/* Shared atmospheric surfaces for Spectre Pro and Aura. Spectre retains its
   stored "spectacular" key; Aura's separate canvas follows in studio-aura.css. */
/* Bronze is also available in Neon and Minimal. */
:root[data-accent="bronze"]{--accent:#e5b88d;--end:#f3d9b9;--ink:#302016}
:root[data-resolved-theme="light"][data-accent="bronze"]{--accent:#88512c;--end:#70411f;--ink:#fff}
.preference-picker__swatch[data-color="bronze"]{--swatch:#c99564;background:linear-gradient(135deg,#f2d4ae,#bd8554 48%,#80502e)}
.preference-picker__badge[data-style="spectacular"]{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,transparent),color-mix(in srgb,var(--end) 8%,transparent));color:var(--accent)}
.preference-picker__tier{display:inline-flex;align-items:center;justify-content:center;flex:none;padding:3px 6px;border:1px solid color-mix(in srgb,var(--accent) 38%,transparent);border-radius:5px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--end) 6%,transparent));color:var(--accent);font-size:9px;font-weight:700;line-height:1.2;letter-spacing:.12em;text-transform:uppercase}
.preference-picker__tier[hidden]{display:none}

/* A continuous, low-chroma atmosphere. Broad overlapping washes carry the
   accent through the canvas; neutral glass keeps the working surfaces calm. */
:root:is([data-style="spectacular"],[data-style="aura"]){
 --spectre-a:#637e75;--spectre-b:#66778b;--spectre-c:#827f70;
 --spectre-canvas:#10141d;--spectre-glow:26%;--spectre-glow-secondary:16%;
 --bg:#14192266;--panel:#1b222b91;--field:#11172166;--surface-raised:#242b369e;
 --text:#e7edf6;--heading:#f5f7fc;--muted:#bec9d8;--line:#c2d7f126;--ui-border:var(--line);
 --spectre-edge:#e5efff24;--spectre-highlight:#ffffff08;--spectre-shadow:#02050f24;
 --spectre-chrome:#141923b3;--spectre-overlay:#1a202ceb;--spectre-menu:#202633;
 --spectre-inset:#00000014;--spectre-native:#152035;
 --spectre-control:#050c1c52;--spectre-control-border:#c2d7f142;--spectre-focus-base:#0b1225;
 --button-background:linear-gradient(115deg,var(--accent),var(--end));
}
:root:is([data-style="spectacular"],[data-style="aura"])[data-accent="violet"]{--spectre-a:#79728f;--spectre-b:#5c7886;--spectre-c:#887981}
:root:is([data-style="spectacular"],[data-style="aura"])[data-accent="blue"]{--spectre-a:#677f9c;--spectre-b:#607f83;--spectre-c:#7c748c}
:root:is([data-style="spectacular"],[data-style="aura"])[data-accent="pink"]{--spectre-a:#977c8a;--spectre-b:#797b94;--spectre-c:#657f86}
:root:is([data-style="spectacular"],[data-style="aura"])[data-accent="amber"]{--spectre-a:#94846a;--spectre-b:#697d8a;--spectre-c:#8e766b}
:root:is([data-style="spectacular"],[data-style="aura"])[data-accent="cyan"]{--spectre-a:#5e828b;--spectre-b:#737c96;--spectre-c:#6f857d}
:root:is([data-style="spectacular"],[data-style="aura"])[data-accent="bronze"]{--spectre-a:#97816f;--spectre-b:#688084;--spectre-c:#7e778d}
:root:is([data-style="spectacular"],[data-style="aura"])[data-accent="violet"]:not([data-resolved-theme="light"]){--accent:#b9aed5;--end:#d0c5e5;--ink:#242130}
:root:is([data-style="spectacular"],[data-style="aura"])[data-resolved-theme="light"]{
 --spectre-canvas:#edf0f4;--spectre-glow:16%;--spectre-glow-secondary:10%;
 --bg:#ffffff40;--panel:#ffffff91;--field:#ffffff66;--surface-raised:#ffffffb3;
 --text:#202d43;--heading:#152036;--muted:#3b4960;--line:#3a52792b;
 --spectre-edge:#ffffffbf;--spectre-highlight:#ffffff66;--spectre-shadow:#35436b13;
 --spectre-chrome:#f5f7fab3;--spectre-overlay:#f0f3f7eb;--spectre-menu:#f5f7fa;
 --spectre-inset:#465a7310;--spectre-native:#f4f7fd;
 --spectre-control:#ffffff70;--spectre-control-border:#344e795c;--spectre-focus-base:#f5f8ff;
 --button-background:linear-gradient(115deg,var(--accent),var(--end));
}
:root:is([data-style="spectacular"],[data-style="aura"]) body{
 isolation:isolate;
 background:
 radial-gradient(ellipse 90% 85% at 18% 4%,color-mix(in srgb,var(--spectre-a) var(--spectre-glow),transparent) 0%,color-mix(in srgb,var(--spectre-a) calc(var(--spectre-glow) * .42),transparent) 40%,transparent 78%),
 radial-gradient(ellipse 85% 100% at 96% 54%,color-mix(in srgb,var(--spectre-b) var(--spectre-glow),transparent) 0%,color-mix(in srgb,var(--spectre-b) calc(var(--spectre-glow) * .42),transparent) 42%,transparent 80%),
 radial-gradient(ellipse 100% 80% at 42% 112%,color-mix(in srgb,var(--spectre-c) var(--spectre-glow-secondary),transparent) 0%,color-mix(in srgb,var(--spectre-c) calc(var(--spectre-glow-secondary) * .4),transparent) 40%,transparent 80%),
 var(--spectre-canvas);
 background-attachment:fixed;color:var(--text);
}
/* Diffuse ribbons join the washes without sharp rings or animated effects. */
:root:is([data-style="spectacular"],[data-style="aura"]) body::before{
 content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:
 radial-gradient(ellipse at 96% -14%,transparent 40%,color-mix(in srgb,var(--spectre-a) 4%,transparent) 54%,transparent 68%),
 linear-gradient(125deg,transparent 16%,color-mix(in srgb,var(--spectre-a) 3%,transparent) 38%,color-mix(in srgb,var(--spectre-b) 4%,transparent) 62%,transparent 88%);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body main#main{background:transparent}
:root:is([data-style="spectacular"],[data-style="aura"]) body main#main::before{opacity:.025}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#studioHeader,#studioRail,.workspace-dock,.floating-player,.workspace-dock-launcher,.dock-expand,.studio-mobile-nav,.reopen-player){
 background:var(--spectre-chrome);border-color:var(--line);
 backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
 box-shadow:0 8px 32px var(--spectre-shadow),inset 0 1px var(--spectre-highlight);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body #studioHeader{border-bottom-color:var(--spectre-edge)}
:root:is([data-style="spectacular"],[data-style="aura"]) body #studioRail{border-right-color:var(--spectre-edge)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(.rail-footer,.account-rail,footer){background:transparent;border-color:var(--line)}
:root:is([data-style="spectacular"],[data-style="aura"]) body #studioRail a[aria-current="page"]{
 color:var(--heading);border-color:color-mix(in srgb,var(--accent) 28%,transparent);
 background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 4%,transparent));
 box-shadow:inset 2px 0 var(--accent),inset 0 1px var(--spectre-highlight),0 4px 20px var(--spectre-shadow);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body #studioRail a[aria-current="page"] svg{color:var(--accent)}
/* Tokens also cover dynamically mounted screens; the explicit card family adds
   glass depth without turning layout containers or each table cell into a pane. */
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#main,.window-body) :is(
 .panel:not(.workspace-surface),.workspace-card,.take-card,.home-intro,.editor-card,
 .story-card,.story-scene,.production-summary,.generation-price-bar,#advancedProduction,
 [data-draft-field="advancedProduction"],.market-card,.market-metric,.collection-card,
 .draft-card,.template-card,.learn-card,.model-directory-card,.usage-prices-table-wrap){
 background:linear-gradient(135deg,var(--spectre-highlight),transparent 55%),var(--panel);
 border:1px solid var(--line);border-top-color:var(--spectre-edge);border-radius:16px;
 box-shadow:0 10px 30px var(--spectre-shadow),inset 0 1px 0 var(--spectre-highlight);
 backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#main,.window-body) :is(.home-intro,.generation-price-bar){
 background:linear-gradient(125deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 78%),var(--panel);
 border-color:color-mix(in srgb,var(--accent) 22%,transparent);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#main,.window-body) :is(.workspace-surface,#sparkPanel.workspace-surface,#voicePanel.workspace-surface){background:transparent;box-shadow:none}
/* Draft toolbars are layout rows: let the continuous canvas show through them.
   Their inputs and buttons receive the glass treatment individually below. */
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(.voice-mode-tabs,.tabs,.story-count,.market-balance-card){
 background:var(--field);border-color:var(--line);box-shadow:inset 0 1px var(--spectre-highlight);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(button.secondary,.button.secondary,.workspace-toggle,.preference-picker__trigger){
 background:linear-gradient(130deg,var(--spectre-highlight),transparent),var(--field);
 border-color:var(--line);color:var(--text);box-shadow:inset 0 1px var(--spectre-highlight);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#main,.window-body,dialog) :is(button[type="submit"]:not(.secondary),.generation-price-bar button:not(.secondary)){
 background:var(--button-background);color:var(--ink);font-weight:600;
 border-color:color-mix(in srgb,var(--accent) 72%,transparent);
 box-shadow:0 4px 14px var(--spectre-shadow),inset 0 1px #ffffff26;
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(button.secondary,.button.secondary):hover:not(:disabled){
 background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is([role="tab"][aria-selected="true"],.preference-picker__option[aria-selected="true"],.workspace-option[aria-checked="true"]){
 color:var(--accent);background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 18%,transparent),color-mix(in srgb,var(--accent) 6%,transparent));
 border-color:color-mix(in srgb,var(--accent) 38%,transparent);box-shadow:inset 0 1px var(--spectre-highlight);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){
 background:var(--spectre-control);border:1px solid var(--spectre-control-border);
 color:var(--text);box-shadow:inset 0 2px 7px var(--spectre-inset);border-radius:8px;
}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(input,textarea)::placeholder{color:var(--muted);opacity:.75}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(input,select,textarea):hover:not(:disabled){border-color:color-mix(in srgb,var(--accent) 65%,var(--spectre-control-border))}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(input,select,textarea,button,a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 3px var(--spectre-focus-base)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#main,.window-body,dialog) :is(button[type="submit"]:not(.secondary),.generation-price-bar button:not(.secondary)):hover:not(:disabled){filter:brightness(1.05);box-shadow:0 6px 18px var(--spectre-shadow)}
:root:is([data-style="spectacular"],[data-style="aura"])[data-resolved-theme="light"] body :is(#main,.window-body,dialog) :is(button[type="submit"]:not(.secondary),.generation-price-bar button:not(.secondary)):hover:not(:disabled){filter:brightness(.92)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#globalSearch,#globalSearchQuery){background:transparent;border:0;border-radius:0;box-shadow:none}
/* Native select popups cannot rely on the translucent page behind them. */
:root:is([data-style="spectacular"],[data-style="aura"]) body select :is(option,optgroup){background:var(--spectre-native);color:var(--text)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(input[type="checkbox"],input[type="radio"],input[type="range"]){accent-color:var(--accent)}
:root:is([data-style="spectacular"],[data-style="aura"]) body input::file-selector-button{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-color:var(--line)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(table,thead,tbody,tr,td){background:transparent;border-color:var(--line)}
:root:is([data-style="spectacular"],[data-style="aura"]) body th{background:var(--field);border-color:var(--line);color:var(--muted)}
:root:is([data-style="spectacular"],[data-style="aura"]) body tbody tr:nth-child(even){background:color-mix(in srgb,var(--text) 2%,transparent)}
:root:is([data-style="spectacular"],[data-style="aura"]) body tbody tr:hover{background:color-mix(in srgb,var(--accent) 7%,transparent)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(.codelist-row,.story-timing,.story-layers,summary,.recording-detail-section){border-color:var(--line)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(h1,h2,h3,h4){color:var(--heading)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(.eyebrow,.story-tools>h3,.creation-steps b,.story-scene legend){color:var(--accent)}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(.card-icon,.spark-symbol,.workspace-avatar,.step-number,.creation-steps b){
 background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 24%,transparent),color-mix(in srgb,var(--end) 7%,transparent));
 box-shadow:inset 0 1px color-mix(in srgb,var(--accent) 25%,transparent);
}
/* Overlays need denser glass than cards so text behind them never competes. */
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(dialog:not(.intro-tour),.intro-card,.workspace-drawer,.studio-window,.notification-panel,.activity-summary){
 background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 65%),var(--spectre-overlay);
 border:1px solid var(--spectre-edge);box-shadow:0 28px 80px #0005,inset 0 1px var(--spectre-highlight);
 backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
}
/* Floating menus and section previews need an opaque base, even without blur. */
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(.preference-picker__popup,#accountMenu,#workspaceMenu,.control-help-popover,.direction-popover,.rail-tooltip,.studio-busy,.language-menu,.draft-actions-menu[popover],.section-preview){
 background:linear-gradient(130deg,var(--spectre-highlight),transparent),var(--spectre-menu);
 border:1px solid var(--spectre-edge);box-shadow:0 16px 48px #0004,inset 0 1px var(--spectre-highlight);
 backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
}
:root:is([data-style="spectacular"],[data-style="aura"]) body dialog::backdrop{background:#03071280;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
:root:is([data-style="spectacular"],[data-style="aura"])[data-resolved-theme="light"] body dialog::backdrop{background:#26375738}
:root:is([data-style="spectacular"],[data-style="aura"]) body :is(.studio-window-titlebar,.workspace-drawer-heading,.workspace-drawer-footer,.generation-review .review-header){background:var(--field);border-color:var(--line)}
:root:is([data-style="spectacular"],[data-style="aura"]) body ::selection{background:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--heading)}
@media(max-width:760px){
 :root:is([data-style="spectacular"],[data-style="aura"]){--spectre-glow:22%;--spectre-glow-secondary:14%}
 :root:is([data-style="spectacular"],[data-style="aura"]) body :is(#studioHeader,.workspace-dock,.floating-player){backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
 /* An expanded mobile rail is an overlay, not a card. */
 :root:is([data-style="spectacular"],[data-style="aura"]) body #studioRail{background:var(--spectre-overlay)}
}
@media(forced-colors:active){
 :root:is([data-style="spectacular"],[data-style="aura"]){--button-background:ButtonFace;--bg:Canvas;--panel:Canvas;--field:Canvas;--line:CanvasText;--text:CanvasText;--heading:CanvasText;--muted:CanvasText}
 :root:is([data-style="spectacular"],[data-style="aura"]) body::before{display:none}
 :root:is([data-style="spectacular"],[data-style="aura"]) body,:root:is([data-style="spectacular"],[data-style="aura"]) body :is(#main,#studioHeader,#studioRail,dialog,.workspace-drawer,.preference-picker__popup,.workspace-menu,.studio-window,.panel,.story-card,.workspace-card,.take-card,.production-summary,.generation-price-bar,.draft-actions-menu[popover],.section-preview){background:Canvas!important;border-color:CanvasText;box-shadow:none;backdrop-filter:none}
 :root:is([data-style="spectacular"],[data-style="aura"]) body #studioRail a[aria-current="page"]{border-color:Highlight;box-shadow:none}
}