/* Shared workspace controls. The prototype iframe owns its own colors. */
.topbar{gap:16px}
.topbar-actions{display:flex;align-items:center;gap:20px;flex:none}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:7px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);font-size:12px;white-space:nowrap;flex:none}
.theme-toggle:hover{background:var(--surface2);border-color:var(--muted)}
.theme-toggle .icon{width:17px;height:17px}
.theme-icon-only{width:36px;padding:7px}
.theme-icon-only span{display:none}
.login-form-side{position:relative}
.login-theme-toggle{position:absolute;right:28px;top:24px}
input[readonly]{background:var(--surface2);color:var(--muted);cursor:default}
.account-button:hover{background:var(--surface2);border-radius:8px}
@media(max-width:1000px){.topbar-actions>.topbar-right{display:none}}
@media(max-width:680px){
 .topbar{gap:10px}.topbar-left{flex:1;overflow:hidden}
 .topbar-left>span{flex:none}
 .topbar .theme-toggle{width:36px;padding:7px}
 .topbar .theme-toggle span{display:none}
 .login-form-side{position:static}
 .login-theme-toggle{right:20px;top:24px}
 .login-theme-toggle span{display:none}
 .viewer-toolbar{gap:10px}
}

/* White theme: keep hierarchy, contrast and interaction states consistent. */
:root[data-theme=light]{
 color-scheme:light;
 --bg:#f6f7f4;--sidebar:#eef1ec;--surface:#fff;--surface2:#edf0eb;
 --line:#d6dcd3;--muted:#606e62;--text:#253128;
 --accent:#965025;--accent-ink:#fff;--green:#387249;--red:#ac3f36;
 --soft:#455b4b;--hover:#e5ebe3;--strong-line:#9aa997;
 --accent-wash:#f6eadd;--success-bg:#eaf3e9;--error-bg:#fcf0ed;
}
:root[data-theme=light] :is(.workspace-label,.topbar-left strong,.stats strong,.section-label,.select-trigger,.select-option,.copy-link,.library-access,.login-form-wrap label,.person-link,.person-link small){color:var(--soft)}
:root[data-theme=light] input::placeholder{color:var(--muted)}
:root[data-theme=light] :is(.workspace-label span,.nav-heading,.nav-heading span,.person-link em,.sync-state,.topbar-right,.topbar-slash,.page-heading .eyebrow,.stats,.view-tabs button,.search-box>.icon,.search-box kbd,.breadcrumb,.card-lock,.card-path,.card-meta,.card-meta i,.content-footer,.role-badge,dialog .eyebrow,.dialog-note,dialog .optional,.action-list button>.icon:first-child,.story-copy .eyebrow,.story-copy p,.story-footer,.login-form-wrap>.eyebrow,.login-hint,.login-hint>span,.login-form-side>footer,.device-switch button){color:var(--muted)}
:root[data-theme=light] input:focus,:root[data-theme=light] .select-trigger:focus-visible,:root[data-theme=light] .select-trigger[aria-expanded=true]{box-shadow:0 0 0 3px #96502518;border-color:var(--accent)}
:root[data-theme=light] :is(.topbar,.card-meta,.person-link small,.role-badge,.library-access,.device-switch){border-color:var(--line)}
:root[data-theme=light] .primary:hover:not(:disabled){background:#7d3f1d;border-color:#7d3f1d}
:root[data-theme=light] .secondary{background:var(--surface);color:var(--text);border-color:var(--line)}
:root[data-theme=light] .secondary:hover:not(:disabled){background:var(--surface2);border-color:var(--strong-line)}
:root[data-theme=light] :is(.icon-button:hover,.nav-main:hover,.person-link:hover,.copy-link:hover,.library-card-footer button:hover){background:var(--hover);color:var(--text)}
:root[data-theme=light] .nav-main>span{background:#25312809}
:root[data-theme=light] :is(.nav-main.active,.folder-visual,.select-option[aria-selected=true]){background:var(--accent-wash);color:var(--accent)}
:root[data-theme=light] :is(.icon-button.active,.person-link.active,.device-switch button.active){background:#dbe4d8;color:var(--text)}
:root[data-theme=light] .view-tabs button.active{color:var(--text)}
:root[data-theme=light] .tone-0{background:#dce9dd;color:#355c3d}
:root[data-theme=light] .tone-1{background:#f0e2d6;color:#7c5736}
:root[data-theme=light] .tone-2{background:#deeaed;color:#365e68}
:root[data-theme=light] .tone-3{background:#e9e1f0;color:#68517d}
:root[data-theme=light] .tone-4{background:#eeead6;color:#6b6334}
:root[data-theme=light] .status-dot{background:var(--green);box-shadow:none}
:root[data-theme=light] :is(.prototype-card:hover,.library-card:hover,.library-card:focus-within,.folder-card:hover){border-color:var(--strong-line)}
:root[data-theme=light] .prototype-card:hover{box-shadow:0 8px 24px #2531280c}
:root[data-theme=light] :is(.preview-link,.device-switch){background:var(--surface2)}
:root[data-theme=light] .open-hover{color:#f4f6f1}
:root[data-theme=light] .thumbnail-placeholder{background-image:radial-gradient(ellipse at top right,#fff9,transparent 70%)}
:root[data-theme=light] :is(.folder-card:hover,.select-trigger:hover:not(:disabled),.action-list button:hover){background:var(--hover);border-color:var(--strong-line)}
:root[data-theme=light] .breadcrumb .new-folder{color:var(--soft);border-color:var(--strong-line)}
:root[data-theme=light] .empty-symbol{background:var(--surface2);border-color:var(--line);color:var(--muted)}
:root[data-theme=light] :is(.banner,.toast.error,.dialog-feedback.error){background:var(--error-bg);border-color:#dca99b;color:#8b3e2c}
:root[data-theme=light] dialog{background:var(--surface);border-color:var(--line);box-shadow:0 24px 90px #24302726}
:root[data-theme=light] dialog::backdrop{background:#24302740}
:root[data-theme=light] :is(.drop-zone,.viewer-option){background:var(--surface2);border-color:var(--strong-line)}
:root[data-theme=light] :is(.drop-zone.drag-over,.drop-zone:focus-within,.viewer-option:has(input:checked)){background:var(--accent-wash);border-color:var(--accent)}
:root[data-theme=light] .delete-symbol{background:var(--error-bg);border-color:#dca99b}
:root[data-theme=light] .action-list button.danger-text,:root[data-theme=light] .action-list button.danger-text .icon:first-child{color:var(--red)}
:root[data-theme=light] .action-list button.danger-text:hover{background:var(--error-bg)}
:root[data-theme=light] .primary.danger{background:#ac3f36;color:white;border-color:#ac3f36}
:root[data-theme=light] .primary.danger:hover:not(:disabled){background:#92332b;border-color:#92332b}
:root[data-theme=light] :is(.toast,.dialog-feedback){background:var(--success-bg);border-color:#9bb89a;color:#315c38;box-shadow:0 10px 30px #25312812}
:root[data-theme=light] :is(.visibility-badge.published,.account-role){background:var(--success-bg);color:var(--green)}
:root[data-theme=light] .visibility-badge.hidden{background:var(--surface2);color:var(--muted)}
:root[data-theme=light] .account-role.admin{background:var(--accent-wash);color:var(--accent)}
:root[data-theme=light] .account-success{background:var(--success-bg)}
:root[data-theme=light] .select-menu{background:var(--surface);border-color:var(--strong-line);box-shadow:0 10px 30px #25312822;scrollbar-color:var(--strong-line) transparent}
:root[data-theme=light] :is(.select-option:hover,.select-option.highlighted){background:var(--hover);color:var(--text)}
:root[data-theme=light] .select-option[aria-selected=true]{color:var(--accent);background:var(--accent-wash)}
:root[data-theme=light] input[type=checkbox]{background:var(--surface);border-color:var(--strong-line)}
:root[data-theme=light] input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
:root[data-theme=light] .export-status.is-error{color:var(--red)}
:root[data-theme=light] .view-stage{background:#e1e6de}
:root[data-theme=light] .view-stage:has(.view-error){background:var(--bg)}
:root[data-theme=light] .login-story{background:radial-gradient(ellipse at 10% 50%,#e0e9d8 0%,#edf0e7 70%);border-color:var(--line)}
:root[data-theme=light] .login-story:after{background-image:linear-gradient(#355c3d 1px,transparent 1px),linear-gradient(90deg,#355c3d 1px,transparent 1px)}
:root[data-theme=light] .mock-window{background:#f9fbf6;border-color:#aebda3;box-shadow:0 24px 70px #24302715}
:root[data-theme=light] :is(.mock-dots,.mock-label){color:var(--soft)}
:root[data-theme=light] .mock-bars b{background:#c1cdb9}
:root[data-theme=light] .login-form-wrap input{background:var(--surface);border-color:var(--line)}
:root[data-theme=light] .login-form-wrap input:focus{border-color:var(--accent)}