/* F45 surface: static porcelain controls over a quiet owner-reference field.
   Tokens cover both the legacy dashboard and the studio workspace. */
:root,
:root:not([data-theme="light"]) body.studio-workspace{
  --bg:#05070b;--bg-card:#10151d;--bg-elev:#18202a;--panel:#10151d;--panel-2:#18202a;--field:#111923;
  --white:#e2e8f0;--grey:#a9b6c6;--silver:#a9b6c6;--muted:#a9b6c6;--hairline:rgba(169,182,198,.22);--border:rgba(169,182,198,.22);
  --slab:#10151d;--slab-hi:#18202a;--slab-line:rgba(169,182,198,.18);--slab-line-hi:rgba(169,182,198,.34);--well:#111923;--well-line:rgba(169,182,198,.22);--well-focus:#a9b6c6;
  --ink-2:#c3cfdd;--ink-3:#a9b6c6;--ink-4:#8291a3;--mono-line:rgba(169,182,198,.3);--mono-fill:#a9b6c6;--chip-bg:rgba(169,182,198,.09);--chip-bg-hi:rgba(169,182,198,.15);
  --gold-one:#a9b6c6;--gold:#a9b6c6;--gold-bright:#e2e8f0;--gold-deep:#8291a3;--gold-ink:#c3cfdd;--gold-line:rgba(169,182,198,.36);--gold-fill:rgba(169,182,198,.12);--gold-fill-2:rgba(169,182,198,.18);
  --studio-bg:#05070b;--studio-panel:#10151d;--studio-panel-hi:#18202a;--studio-line:rgba(169,182,198,.22);--studio-ink:#e2e8f0;--studio-muted:#a9b6c6;--studio-gold:#a9b6c6;--studio-gold-wash:rgba(169,182,198,.13);
}
:root[data-theme="light"],
:root[data-theme="light"] body.studio-workspace{
  --bg:#f0efed;--bg-card:#f3eeed;--bg-elev:#f7f7f5;--panel:#f3eeed;--panel-2:#f7f7f5;--field:#f3eeed;
  --white:#20394f;--grey:#536173;--silver:#536173;--muted:#536173;--hairline:rgba(32,57,79,.18);--border:rgba(32,57,79,.18);
  --slab:linear-gradient(145deg,#fffdf7 0%,#f3eeed 100%);--slab-hi:linear-gradient(145deg,#fff 0%,#e9edf2 100%);--slab-line:rgba(32,57,79,.14);--slab-line-hi:rgba(32,57,79,.26);--well:linear-gradient(145deg,#fffdf7 0%,#edf1f5 100%);--well-line:rgba(32,57,79,.16);--well-focus:#20394f;
  --ink-2:#536173;--ink-3:#536173;--ink-4:#536173;--mono-line:rgba(32,57,79,.22);--mono-fill:#536173;--chip-bg:rgba(255,255,255,.52);--chip-bg-hi:rgba(224,231,240,.78);
  --gold-one:#20394f;--gold:#20394f;--gold-bright:#20394f;--gold-deep:#20394f;--gold-ink:#20394f;--gold-line:rgba(32,57,79,.35);--gold-fill:rgba(224,231,240,.72);--gold-fill-2:rgba(220,221,233,.72);
  --studio-bg:#f0efed;--studio-panel:#f3eeed;--studio-panel-hi:#f7f7f5;--studio-line:rgba(32,57,79,.18);--studio-ink:#20394f;--studio-muted:#536173;--studio-gold:#20394f;--studio-gold-wash:rgba(224,231,240,.76);
}
/* The grain is CSS-only and intentionally static. It lives behind app content. */
:root[data-theme="light"] body.studio-workspace{background-color:#f0efed;background-image:radial-gradient(ellipse at 34% -12%,#fffdf7 0%,transparent 48%),radial-gradient(ellipse at 88% 82%,#dcdde9 0%,transparent 52%),radial-gradient(ellipse at -8% 48%,#e0e7f0 0%,transparent 43%),radial-gradient(ellipse at 54% 46%,#f3eeed 0%,transparent 66%);color:var(--studio-ink)}
:root[data-theme="light"] body.studio-workspace::before{content:"";display:block!important;position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
body.studio-workspace{background:var(--studio-bg);color:var(--studio-ink)}

/* Raised porcelain is limited to actionable chrome; media and template art remain untouched. */
:root[data-theme="light"] .panel,:root[data-theme="light"] .process,:root[data-theme="light"] #v-postgrid .pg-inspector,:root[data-theme="light"] .sheet-inner{background:var(--slab);border-color:var(--border);box-shadow:5px 7px 18px rgba(50,65,95,.13),-5px -5px 15px rgba(255,255,255,.8),inset 1px 1px 0 rgba(255,255,255,.85)}
:root[data-theme="light"] input:not([type=checkbox]):not([type=file]):not([type=range]):not([type=color]):not([type=radio]):not([type=button]):not([type=submit]),:root[data-theme="light"] select,:root[data-theme="light"] textarea,:root[data-theme="light"] .pg-input{background:var(--well)!important;color:var(--white)!important;border-color:var(--well-line)!important;box-shadow:inset 2px 2px 6px rgba(50,65,95,.08),inset -2px -2px 5px rgba(255,255,255,.8)}
:root[data-theme="light"] .btn,:root[data-theme="light"] .nite-cta,:root[data-theme="light"] .nite-ghost,:root[data-theme="light"] .cchip,:root[data-theme="light"] .seg .opt,:root[data-theme="light"] .themebtn,:root[data-theme="light"] .workspace-stages button,:root[data-theme="light"] #v-postgrid .pg-button,:root[data-theme="light"] .botnav .bn{background:linear-gradient(145deg,#fffdf7 0%,#e9edf2 100%)!important;color:var(--white)!important;border-color:var(--border)!important;box-shadow:5px 7px 18px rgba(50,65,95,.13),-5px -5px 15px rgba(255,255,255,.8),inset 1px 1px 0 rgba(255,255,255,.85)!important}
:root[data-theme="light"] .btn-primary,:root[data-theme="light"] #v-make #renderBtn,:root[data-theme="light"] #v-postgrid .pg-primary{background:linear-gradient(145deg,#eef5fb 0%,#dce7f0 100%)!important;color:#20394f!important;border:1px solid #20394f!important;box-shadow:4px 5px 14px rgba(50,65,95,.17),-3px -3px 10px rgba(255,255,255,.75)!important}
:root[data-theme="light"] .btn[aria-pressed=true],:root[data-theme="light"] .seg .opt.on,:root[data-theme="light"] .cchip.on,:root[data-theme="light"] .workspace-stages button[aria-selected=true],:root[data-theme="light"] .botnav .bn.on{box-shadow:inset 3px 3px 8px rgba(50,65,95,.13),inset -2px -2px 6px rgba(255,255,255,.8)!important;background:#e0e7f0!important}

/* Dark mode keeps the satin hierarchy without importing the light mist. */
:root:not([data-theme="light"]) .panel,:root:not([data-theme="light"]) .process,:root:not([data-theme="light"]) #v-postgrid .pg-inspector,:root:not([data-theme="light"]) .sheet-inner{background:#10151d;border-color:var(--border);box-shadow:5px 7px 18px rgba(0,0,0,.38),-2px -2px 10px rgba(255,255,255,.025),inset 1px 1px 0 rgba(255,255,255,.04)}
:root:not([data-theme="light"]) .btn,:root:not([data-theme="light"]) .nite-cta,:root:not([data-theme="light"]) .nite-ghost,:root:not([data-theme="light"]) .cchip,:root:not([data-theme="light"]) .seg .opt,:root:not([data-theme="light"]) .themebtn,:root:not([data-theme="light"]) .workspace-stages button,:root:not([data-theme="light"]) #v-postgrid .pg-button,:root:not([data-theme="light"]) .botnav .bn{background:linear-gradient(145deg,#1a222d 0%,#0f151d 100%)!important;color:var(--white)!important;border-color:var(--border)!important;box-shadow:4px 5px 14px rgba(0,0,0,.38),inset 1px 1px 0 rgba(255,255,255,.045)!important}
:root:not([data-theme="light"]) .btn-primary,:root:not([data-theme="light"]) #v-make #renderBtn,:root:not([data-theme="light"]) #v-postgrid .pg-primary{background:#c3cfdd!important;color:#101923!important;border-color:#c3cfdd!important}
:root:not([data-theme="light"]) .btn[aria-pressed=true],:root:not([data-theme="light"]) .seg .opt.on,:root:not([data-theme="light"]) .cchip.on,:root:not([data-theme="light"]) .workspace-stages button[aria-selected=true],:root:not([data-theme="light"]) .botnav .bn.on{background:#0d151f!important;box-shadow:inset 3px 3px 8px rgba(0,0,0,.42),inset -1px -1px 5px rgba(255,255,255,.04)!important}

@media (hover:hover) and (pointer:fine){.btn:hover,.nite-cta:hover,.nite-ghost:hover,.cchip:hover,.seg .opt:hover,.themebtn:hover,.workspace-stages button:hover,#v-postgrid .pg-button:hover,.botnav .bn:hover{transform:translateY(-1px)}}
.btn:active,.nite-cta:active,.nite-ghost:active,.cchip:active,.seg .opt:active,.themebtn:active,.workspace-stages button:active,#v-postgrid .pg-button:active,.botnav .bn:active{transform:none;box-shadow:inset 3px 3px 8px rgba(50,65,95,.16)!important}
.btn:disabled,.btn[disabled],.pg-button:disabled,.pg-button[aria-disabled=true]{transform:none!important;box-shadow:none!important;opacity:.5}
:root[data-theme="light"] :focus-visible{outline:2px solid #20394f!important;outline-offset:3px}:root:not([data-theme="light"]) :focus-visible{outline:2px solid #c3cfdd!important;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.btn,.nite-cta,.nite-ghost,.cchip,.seg .opt,.themebtn,.workspace-stages button,#v-postgrid .pg-button,.botnav .bn{transition:none!important;transform:none!important}}

@media (forced-colors:active){body.studio-workspace,body.studio-workspace::before{background:Canvas!important;color:CanvasText!important}.btn,.nite-cta,.nite-ghost,.cchip,.seg .opt,.themebtn,.workspace-stages button,#v-postgrid .pg-button,.botnav .bn{forced-color-adjust:auto;background:ButtonFace!important;color:ButtonText!important;border-color:ButtonText!important;box-shadow:none!important}}

/* F45 cascade repairs: index workspace rules intentionally carry higher specificity. */
:root[data-theme="light"] body.studio-workspace .wrap{background:transparent!important}
:root[data-theme="light"] body.studio-workspace{background-attachment:fixed}
:root[data-theme="light"] body.studio-workspace .tabs{background:linear-gradient(145deg,#fffdf7 0%,#f3eeed 100%)!important}
:root[data-theme="light"] body.studio-workspace #v-make .studio,:root[data-theme="light"] body.studio-workspace #v-make .nite-tile,:root[data-theme="light"] body.studio-workspace #v-make .moment{background:linear-gradient(145deg,#fffdf7 0%,#f3eeed 100%)!important}
:root[data-theme="light"] body.studio-workspace #v-make input:not([type=checkbox]):not([type=file]):not([type=range]):not([type=color]):not([type=radio]),:root[data-theme="light"] body.studio-workspace #v-make select{background:linear-gradient(145deg,#fffdf7 0%,#edf1f5 100%)!important;color:#20394f!important;border-color:rgba(32,57,79,.16)!important;box-shadow:inset 2px 2px 6px rgba(50,65,95,.08),inset -2px -2px 5px rgba(255,255,255,.8)}
:root[data-theme="light"] body.studio-workspace .makebar{background:#f3eeed!important;border-color:rgba(32,57,79,.18)!important;box-shadow:0 -8px 16px #f3eeed!important}
:root[data-theme="light"] body.studio-workspace .view{--bg:var(--studio-bg);--bg-card:var(--studio-panel);--bg-elev:var(--studio-panel-hi);--panel:var(--studio-panel);--panel-2:var(--studio-panel-hi);--field:var(--studio-panel);--white:var(--studio-ink);--grey:var(--studio-muted);--silver:var(--studio-muted);--muted:var(--studio-muted);--hairline:var(--studio-line);--border:var(--studio-line)}

/* Rounded text actions retain their names; only compact icon controls become circles. */
body.studio-workspace .btn,body.studio-workspace .nite-cta,body.studio-workspace .nite-ghost,body.studio-workspace .cchip,body.studio-workspace .seg .opt,body.studio-workspace .workspace-stages button,body.studio-workspace #v-postgrid .pg-button,body.studio-workspace .tabs .tab,body.studio-workspace #nite-select,body.studio-workspace #recBtn{border-radius:18px!important}
body.studio-workspace .themebtn{border-radius:50%!important}

@media (hover:hover) and (pointer:fine){body.studio-workspace .btn:hover,body.studio-workspace .nite-cta:hover,body.studio-workspace .nite-ghost:hover,body.studio-workspace .cchip:hover,body.studio-workspace .seg .opt:hover,body.studio-workspace .themebtn:hover,body.studio-workspace .workspace-stages button:hover,body.studio-workspace #v-postgrid .pg-button:hover,body.studio-workspace .botnav .bn:hover{transform:translateY(-1px)!important}}
body.studio-workspace .btn:disabled:hover,body.studio-workspace .btn[disabled]:hover,body.studio-workspace .pg-button:disabled:hover,body.studio-workspace .pg-button[aria-disabled=true]:hover{transform:none!important;box-shadow:none!important}
@media (prefers-reduced-transparency:reduce){:root[data-theme="light"] body.studio-workspace::before{display:none!important}}

/* Template format chips are chrome too; their artwork stays inside the preview. */
:root[data-theme="light"] body.studio-workspace #v-make .nite-chip{background:linear-gradient(145deg,#fffdf7,#e9edf2)!important;color:#20394f!important;border-color:rgba(32,57,79,.18)!important;box-shadow:5px 7px 18px rgba(50,65,95,.13),-5px -5px 15px rgba(255,255,255,.8),inset 1px 1px 0 rgba(255,255,255,.85)!important}
:root[data-theme="light"] body.studio-workspace #v-make .nite-chip.on{background:#e0e7f0!important;box-shadow:inset 3px 3px 8px rgba(50,65,95,.13),inset -2px -2px 6px rgba(255,255,255,.8)!important}
:root:not([data-theme="light"]) body.studio-workspace #v-make .nite-chip{background:linear-gradient(145deg,#1a222d,#0f151d)!important;color:#e2e8f0!important;border-color:rgba(169,182,198,.22)!important;box-shadow:4px 5px 14px rgba(0,0,0,.38),inset 1px 1px 0 rgba(255,255,255,.045)!important}
:root:not([data-theme="light"]) body.studio-workspace #v-make .nite-chip.on{background:#0d151f!important;box-shadow:inset 3px 3px 8px rgba(0,0,0,.42)!important}
body.studio-workspace #v-make .nite-chip{border-radius:20px!important;min-height:44px}
body.studio-workspace .btn{min-height:44px}
body.studio-workspace #v-make a{color:var(--studio-ink)}
/* A narrow portrait preview needs separate corners for playback and sound. */
body.studio-workspace #v-make .preview-play{border-radius:18px;box-shadow:0 3px 10px rgba(0,0,0,.2)}
:root[data-theme="light"] body.studio-workspace #v-make :is(.preview-play,.preview-sound){background:linear-gradient(145deg,#fffdf7,#e9edf2);color:#20394f;border-color:rgba(255,255,255,.85);box-shadow:0 3px 10px rgba(0,0,0,.2),inset 1px 1px 0 #fff}
@media(max-width:900px){body.studio-workspace #v-make #make-stage .preview-play{top:10px;bottom:auto;right:10px}}
/* Keep long platform labels and every interaction state inside the existing hit area. */
body.studio-workspace #v-make .seg .opt{overflow-wrap:anywhere}
body.studio-workspace :is(.btn,.nite-cta,.nite-ghost,.cchip,.nite-chip,.themebtn,.seg .opt,.workspace-stages button,.pg-button,.botnav .bn):active{transform:none!important;box-shadow:inset 3px 3px 8px rgba(50,65,95,.16)!important}
body.studio-workspace :is(.btn,.nite-cta,.nite-ghost,.cchip,.nite-chip,.themebtn,.seg .opt,.workspace-stages button,.pg-button,.botnav .bn):is(:disabled,[disabled],[aria-disabled=true]){transform:none!important;box-shadow:none!important;opacity:.5}
@media(prefers-reduced-motion:reduce){body.studio-workspace :is(.btn,.nite-cta,.nite-ghost,.cchip,.nite-chip,.themebtn,.seg .opt,.workspace-stages button,.pg-button,.botnav .bn){transition:none!important;transform:none!important}}
@media(forced-colors:active){
 :root body.studio-workspace::before{display:none!important}
 :root body.studio-workspace :is(.tabs,.makebar,.studio,.panel,.process,.pg-inspector,.sheet-inner){background:Canvas!important;box-shadow:none!important}
 :root body.studio-workspace :is(#v-make,#v-postgrid,.view,.tabs,.botnav,header) :is(.btn,.nite-cta,.nite-ghost,.cchip,.nite-chip,.seg .opt,.workspace-stages button,.pg-button,.bn,.tab),:root body.studio-workspace .themebtn{background:ButtonFace!important;color:ButtonText!important;border:1px solid ButtonText!important;box-shadow:none!important}
 :root body.studio-workspace :focus-visible{outline-color:Highlight!important}
}