/* Silent Ribbon V13: single contrast system + motion theatre.
   Every interactive element draws foreground and background from compatible semantic tokens. */
:root{color-scheme:dark}
body{
 --ink:#f4f6fa;--ink-soft:#c6cad6;--ink-faint:#a3aabb;
 --layer:#161b25e8;--layer2:#242b38d9;--field:#1d2430;
 --field-line:#495263;--control:#293241;--control-ink:#f3f5fa;
 --chosen:#e7ebf4;--chosen-ink:#151924;--chosen-soft:#bbc6d5;
 --positive:#74e2ae;--negative:#ff999f;--attention:#f4c783;
 --accent-glow:rgba(181,196,240,.20);
 --stage-a:#0b0d15;--stage-b:#111829;--stage-c:#05070d;
 --fx-opacity:.8;--fx-duration:34s;
 --white:var(--ink);--secondary:var(--ink-soft);--muted:var(--ink-faint);
 --line:rgba(203,214,231,.19);
 background:var(--stage-a);color:var(--ink);
 transition:background .45s,color .35s;
}
body[data-studio-theme="charcoal"]{
 --ink:#f4f4f6;--ink-soft:#c6c6ce;--ink-faint:#a2a5ae;--layer:#25262fe5;--layer2:#363944d9;
 --field:#252934;--field-line:#565966;--control:#373b46;--control-ink:#f6f6f7;
 --chosen:#eeeef0;--chosen-ink:#16171c;--stage-a:#191a20;--stage-b:#31313b;--stage-c:#0e1017;
}
body[data-studio-theme="porcelain"]{
 --ink:#202833;--ink-soft:#404d60;--ink-faint:#57677a;--layer:#f7f9fce9;--layer2:#e3e8f0ed;
 --field:#ffffff;--field-line:#8896aa;--control:#e0e6ee;--control-ink:#1d2733;
 --chosen:#222c3a;--chosen-ink:#ffffff;--chosen-soft:#f1f3f8;
 --stage-a:#e4e9f0;--stage-b:#d2dbe7;--stage-c:#f9fafc;
 --positive:#167d53;--negative:#b83048;--attention:#916021;--accent-glow:rgba(67,81,117,.23);
 --line:rgba(39,53,73,.24);color-scheme:light;
}
body[data-studio-theme="mist"]{
 --ink:#253043;--ink-soft:#455269;--ink-faint:#5e6c7e;--layer:#f7f9fff1;--layer2:#e6eef7e8;
 --field:#fff;--field-line:#91a1b6;--control:#e1e9f4;--control-ink:#253043;
 --chosen:#303f58;--chosen-ink:#ffffff;--chosen-soft:#f0f3fb;
 --stage-a:#d7e4f4;--stage-b:#eddff0;--stage-c:#f6f9ff;
 --positive:#167954;--negative:#b42a53;--attention:#7c5420;
 --line:rgba(48,64,89,.23);color-scheme:light;
}
body[data-studio-theme="aurora"]{
 --ink:#f5f9fb;--ink-soft:#c5d6dc;--ink-faint:#a5b9c6;
 --layer:#111e2bdc;--layer2:#183246d9;--field:#142737;--field-line:#567286;
 --control:#294258;--control-ink:#f5fbff;--chosen:#c7f1ea;--chosen-ink:#122a35;
 --stage-a:#08141e;--stage-b:#073e48;--stage-c:#13142c;
 --positive:#77eed3;--negative:#ff929e;--attention:#ffcd87;
}
body[data-studio-theme="velvet"]{
 --ink:#fff5f6;--ink-soft:#e6c9d5;--ink-faint:#c49fac;
 --layer:#281723e6;--layer2:#432332df;--field:#301c2b;--field-line:#775064;
 --control:#4d2d3c;--control-ink:#fff3f7;--chosen:#ffd9e2;--chosen-ink:#301722;
 --stage-a:#170e19;--stage-b:#52243d;--stage-c:#110c19;
 --positive:#90e4c1;--negative:#ffa0ac;--attention:#f3c47e;
}
body[data-studio-theme="dusk"]{
 --ink:#f6f4ff;--ink-soft:#c5c3e2;--ink-faint:#a4a4c5;
 --layer:#1a1935e5;--layer2:#303052de;--field:#282845;--field-line:#63638a;
 --control:#37375b;--control-ink:#f4f2ff;--chosen:#dddcff;--chosen-ink:#252545;
 --stage-a:#101022;--stage-b:#30285c;--stage-c:#0b122c;
 --positive:#86e6bd;--negative:#ff9baf;--attention:#e9cb8c;
}
/* Legacy Porcelain selector overrides used to hard-code ALL children to black.
   They are neutralized here in favour of semantic roles. */
body[data-studio-theme] .surface *,body[data-studio-theme] .glass-panel *,
body[data-studio-theme] .metric-card *{color:inherit}
body[data-studio-theme] .scene-heading p,body[data-studio-theme] .hero-line p,
body[data-studio-theme] .micro{color:var(--ink-faint)}
body[data-studio-theme] .scene-heading h1,body[data-studio-theme] .hero-line h1,
body[data-studio-theme] .brand-title{color:var(--ink)}
body[data-studio-theme] .scene-heading em,body[data-studio-theme] .hero-line em{color:var(--studio-accent)}
body[data-studio-theme] .surface,body[data-studio-theme] .glass-panel{
 background:linear-gradient(145deg,var(--layer),var(--layer2));border-color:var(--line);
 box-shadow:0 18px 48px rgba(3,8,22,.18),inset 0 1px rgba(255,255,255,.08);color:var(--ink);
}
body[data-studio-theme] .metric-card{background:linear-gradient(142deg,var(--layer2),var(--layer));border-color:var(--line);color:var(--ink)}
body[data-studio-theme] .metric-card:hover{background:var(--layer2)}
body[data-studio-theme] .metric-top,body[data-studio-theme] .metric-card small,
body[data-studio-theme] .hero-number-side span,body[data-studio-theme] .graph-footer,
body[data-studio-theme] .chart-labels,body[data-studio-theme] .tiny-note,
body[data-studio-theme] .brand-caption,body[data-studio-theme] .top-status-meta,
body[data-studio-theme] .section-label,body[data-studio-theme] .studio-label,
body[data-studio-theme] .studio-switch,body[data-studio-theme] .event-text small,
body[data-studio-theme] .event time,body[data-studio-theme] .archive-item-meta,
body[data-studio-theme] .detail-row,body[data-studio-theme] .donut-center span{color:var(--ink-soft)}
body[data-studio-theme] .detail-row strong,body[data-studio-theme] .event-title,
body[data-studio-theme] .composition-legend strong,body[data-studio-theme] .metric-card strong,
body[data-studio-theme] .stats-hero strong{color:var(--ink)}
body[data-studio-theme] .bottom-nav{background:linear-gradient(155deg,var(--layer2),var(--layer));border-color:var(--line)}
body[data-studio-theme] .bottom-nav button{color:var(--ink-soft);background:transparent}
body[data-studio-theme] .bottom-nav button.active{background:var(--chosen);color:var(--chosen-ink);box-shadow:0 7px 22px rgba(0,0,0,.12)}
body[data-studio-theme] .bottom-nav button.active *{color:inherit}
body[data-studio-theme] .archive-selector{background:var(--layer);border-color:var(--line)}
body[data-studio-theme] .archive-selector button{color:var(--ink-soft);background:transparent}
body[data-studio-theme] .archive-selector button.active{background:var(--chosen);color:var(--chosen-ink);box-shadow:0 8px 22px rgba(0,0,0,.10)}
body[data-studio-theme] .archive-selector button.active *{color:inherit}
body[data-studio-theme] .period-tabs{background:var(--layer2);border-color:var(--line)}
body[data-studio-theme] .period-tabs button{color:var(--ink-soft);background:transparent}
body[data-studio-theme] .period-tabs button.active{background:var(--chosen);color:var(--chosen-ink)}
body[data-studio-theme] .period-tabs button.active *{color:inherit}
body[data-studio-theme] .solid-action,body[data-studio-theme] .archive-toolbar .solid-action{
 background:var(--chosen);color:var(--chosen-ink);border:1px solid var(--chosen);
 box-shadow:0 6px 18px rgba(4,5,16,.12)
}
body[data-studio-theme] .solid-action *,body[data-studio-theme] .outline-action *{color:inherit}
body[data-studio-theme] .outline-action,body[data-studio-theme] .period-button,
body[data-studio-theme] .metric-switch,body[data-studio-theme] .studio-header-link,
body[data-studio-theme] .header-action,body[data-studio-theme] .quiet-link{
 background:var(--control);color:var(--control-ink);border:1px solid var(--line)
}
body[data-studio-theme] .outline-action:hover,body[data-studio-theme] .period-button:hover{filter:brightness(1.08)}
body[data-studio-theme] .outline-action.danger{color:var(--negative);border-color:var(--negative)}
body[data-studio-theme] .archive-item,body[data-studio-theme] .events-list,
body[data-studio-theme] .studio-sample,body[data-studio-theme] .vip-studio-rule{
 background:linear-gradient(135deg,var(--layer2),var(--layer));border-color:var(--line);color:var(--ink)
}
body[data-studio-theme] input:not([type=range]):not([type=checkbox]),
body[data-studio-theme] select,body[data-studio-theme] textarea,
body[data-studio-theme] .studio-label input:not([type=range]){
 background:var(--field);color:var(--ink);border:1px solid var(--field-line)
}
body[data-studio-theme] input::placeholder{color:var(--ink-faint);opacity:1}
body[data-studio-theme] select option{background:var(--field);color:var(--ink)}
body[data-studio-theme] .studio-switch{border-color:var(--line)}
body[data-studio-theme] .studio-sample strong{color:var(--ink)}
body[data-studio-theme] .studio-sample small{color:var(--ink-soft)}
body[data-studio-theme] .top-status{color:var(--ink-soft)}
body[data-studio-theme] .service-pill{background:var(--control);color:var(--ink-soft);border:1px solid var(--line)}
body[data-service-state="good"] .service-pill,body[data-service-state="good"] #status-line,
body[data-service-state="good"] #overview-service{color:var(--positive)!important}
body[data-service-state="bad"] .service-pill,body[data-service-state="bad"] #status-line,
body[data-service-state="bad"] #overview-service{color:var(--negative)!important}
body[data-service-state="warning"] .service-pill,body[data-service-state="warning"] #status-line,
body[data-service-state="warning"] #overview-service{color:var(--attention)!important}
body[data-studio-theme] .status-indicator{background:var(--positive);box-shadow:0 0 13px var(--positive)}
body[data-studio-theme] .status-indicator.off{background:var(--negative);box-shadow:0 0 10px var(--negative)}
body[data-studio-theme] .issue{border-left:2px solid var(--negative)}
body[data-studio-theme] .event-pin{color:var(--positive);background:var(--control)}
body[data-studio-theme] .route.norm{color:var(--positive);border-color:var(--positive)}
body[data-studio-theme] .route.kall{color:var(--negative);border-color:var(--negative)}
body[data-studio-theme] .route.vip{color:var(--attention);border-color:var(--attention)}
body[data-studio-theme] .route.review{color:var(--attention);border-color:var(--attention)}
body[data-studio-theme] .chart-line-path{stroke:var(--studio-accent)}
body[data-studio-theme] .donut{background:conic-gradient(var(--studio-accent) 0%,var(--studio-accent) var(--fill,0%),var(--field-line) var(--fill,0%),var(--field-line) 100%)}
body[data-studio-theme] .donut:before{background:var(--layer)}
body[data-studio-theme] .chart-grid line{stroke:var(--ink-faint)}
body[data-studio-theme] .chart-tooltip{background:var(--field);color:var(--ink);border-color:var(--line)}
body[data-studio-theme] .chart-tooltip span{color:var(--ink-soft)}
body[data-studio-theme] .sheet{background:var(--layer);color:var(--ink)}
body[data-studio-theme] .sheet button:not(.solid-action):not(.outline-action){color:var(--ink);background:var(--control)}
body[data-studio-theme] .toast{background:var(--chosen);color:var(--chosen-ink)}
body[data-studio-theme] .toast.error{background:var(--negative);color:var(--stage-a)}
body[data-studio-theme] .lock-screen{background:var(--stage-a);color:var(--ink)}
body[data-studio-theme] .lock-screen p{color:var(--ink-soft)}
body[data-studio-theme] .studio-design-extras{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--layer2)}
body[data-studio-theme] :is(button,input,select):focus-visible{outline:2px solid var(--studio-accent);outline-offset:3px}
body[data-studio-theme] [type=range],body[data-studio-theme] [type=checkbox]{accent-color:var(--studio-accent)}
body[data-studio-font="editorial"] .scene h1,body[data-studio-font="editorial"] .brand-title{font-family:Georgia,'Times New Roman',serif;font-style:italic}
body[data-studio-font="mono"] .micro,body[data-studio-font="mono"] .metric-top,body[data-studio-font="mono"] .scene-heading h1{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
body[data-studio-glass="off"] .surface,body[data-studio-glass="off"] .glass-panel{backdrop-filter:none!important;box-shadow:none}
body[data-studio-gradient="flat"] .surface,body[data-studio-gradient="flat"] .glass-panel,body[data-studio-gradient="flat"] .metric-card{background:var(--layer)!important}
body[data-studio-gradient="deep"] .surface,body[data-studio-gradient="deep"] .glass-panel,body[data-studio-gradient="deep"] .metric-card{background:linear-gradient(130deg,var(--layer2),var(--stage-b),var(--layer))}
/* Rendered behind content, always visually perceptible, never intercepts taps. */
.fx-stage{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:var(--fx-opacity);isolation:isolate;transition:opacity .3s ease}
.fx-stage>*{position:absolute;will-change:transform;pointer-events:none}
.fx-haze{width:85vw;height:70vh;border-radius:50%;filter:blur(55px);mix-blend-mode:screen;opacity:.45;animation:fxHaze var(--fx-duration) ease-in-out infinite alternate}
.fx-haze-a{top:-18%;left:-30%;background:radial-gradient(ellipse,rgba(139,166,222,.45),transparent 70%)}
.fx-haze-b{bottom:-22%;right:-38%;animation-direction:alternate-reverse;background:radial-gradient(ellipse,rgba(146,117,189,.43),transparent 70%)}
.fx-mesh{inset:-20%;opacity:.25;background-image:linear-gradient(113deg,transparent 49.7%,var(--studio-accent) 50%,transparent 50.3%),linear-gradient(24deg,transparent 49.7%,var(--studio-accent) 50%,transparent 50.3%);background-size:105px 105px;mask-image:radial-gradient(ellipse at 60% 45%,black,transparent 68%);animation:fxMesh calc(var(--fx-duration)*1.4) linear infinite}
.fx-stars{inset:-20%;opacity:.55;background-image:radial-gradient(circle,var(--studio-accent) 1px,transparent 1.7px),radial-gradient(circle,var(--studio-accent) .7px,transparent 1.5px);background-size:113px 151px,177px 121px;background-position:0 0,51px 64px;mask-image:radial-gradient(ellipse at 50% 55%,black,transparent 80%);animation:fxStars calc(var(--fx-duration)*1.9) linear infinite}
.fx-orbit{height:74vmax;width:74vmax;border:1px solid var(--studio-accent);opacity:.25;border-radius:48% 52% 68% 32% / 54% 35% 65% 46%;animation:fxOrbit calc(var(--fx-duration)*1.2) linear infinite}
.fx-orbit-a{left:-35%;top:18%;box-shadow:0 0 50px var(--accent-glow),inset 0 0 26px var(--accent-glow)}
.fx-orbit-b{right:-42%;top:-17%;width:90vmax;height:90vmax;animation-direction:reverse;opacity:.17}
.fx-comet{width:43vw;max-width:340px;height:1px;opacity:.6;background:linear-gradient(90deg,transparent,var(--studio-accent),transparent);transform:rotate(-19deg);box-shadow:0 0 15px var(--studio-accent);animation:fxComet calc(var(--fx-duration)*1.4) linear infinite}
.fx-comet-a{top:27%;left:-40%}.fx-comet-b{top:68%;left:-65%;animation-delay:calc(var(--fx-duration)*-.6)}
.fx-waves{position:absolute;inset:-6%;width:112%;height:112%;fill:none;stroke:var(--studio-accent);stroke-width:1.4;opacity:.42;filter:drop-shadow(0 0 13px var(--accent-glow));animation:fxWave calc(var(--fx-duration)*1.25) ease-in-out infinite alternate}
.fx-waves path:nth-child(2){opacity:.66;transform:translateY(12px)}.fx-waves path:nth-child(3){opacity:.48}.fx-waves path:nth-child(4){opacity:.27}
body[data-studio-fx="none"] .fx-stage{display:none}
body[data-studio-fx="waves"] .fx-stage>*:not(.fx-waves),body[data-studio-fx="aurora"] .fx-stage>*:not(.fx-haze),
body[data-studio-fx="orbits"] .fx-stage>*:not(.fx-orbit),body[data-studio-fx="mesh"] .fx-stage>*:not(.fx-mesh):not(.fx-stars),
body[data-studio-fx="comet"] .fx-stage>*:not(.fx-comet){display:none}
body[data-fx-paused="yes"] .fx-stage *,body[data-fx-paused="yes"] .fx-stage{animation-play-state:paused!important}
@keyframes fxHaze{from{transform:translate(-12%,3%) scale(.86)}to{transform:translate(25%,15%) scale(1.38)}}
@keyframes fxMesh{to{transform:translate(105px,105px)}}
@keyframes fxStars{to{transform:translate(113px,151px)}}
@keyframes fxOrbit{to{transform:rotate(360deg)}}
@keyframes fxComet{from{transform:translate(-20vw,20vh) rotate(-19deg)}to{transform:translate(150vw,-55vh) rotate(-19deg)}}
@keyframes fxWave{from{transform:translate(-8%,6%) skewX(-5deg) scale(1.05)}to{transform:translate(9%,-5%) skewX(5deg) scale(1.12)}}
body[data-studio-theme="porcelain"] .fx-haze,body[data-studio-theme="mist"] .fx-haze{mix-blend-mode:multiply;opacity:.45}
body[data-studio-theme="porcelain"] .fx-waves,body[data-studio-theme="mist"] .fx-waves{opacity:.52}
body[data-studio-theme="porcelain"] .fx-mesh,body[data-studio-theme="mist"] .fx-mesh{opacity:.2}
body[data-studio-gradient="flat"] .fx-haze{opacity:.12}
body[data-studio-gradient="deep"] .fx-haze{opacity:.8}
/* Dynamic feedback and hard-stop semantics, with no confirmation pop-ups. */
body[data-studio-theme] .top-status #status-line{font-weight:650;letter-spacing:.025em}
body[data-studio-theme] .status-indicator{width:8px;height:8px}
body[data-studio-theme] .metric-card,body[data-studio-theme] .surface,body[data-studio-theme] .bottom-nav{transition:background .4s,color .3s,border-color .35s,box-shadow .4s}
body[data-studio-theme] .studio-header-link{border-color:var(--studio-accent)}
@media(prefers-reduced-motion:reduce){.fx-stage *,body .fx-waves{animation:none!important;transition:none!important}}
@media(max-width:600px){.fx-haze{filter:blur(48px)}.fx-orbit{width:110vmax;height:110vmax}.fx-waves{opacity:.55}}

body[data-studio-theme] .event.severity-error .event-pin{color:var(--negative);border-color:var(--negative)}
body[data-studio-theme] .event.severity-warning .event-pin{color:var(--attention);border-color:var(--attention)}