/* Stratum console — "soft structuralism" by day, deep glass by night.
   Layout: a floating rail and a floating top island over a quiet field; content sits in machined trays:
   every panel is a shell (tinted tray, hairline ring) holding a core (the lit surface) with concentric radii.
   One accent (deep teal). Depth comes from wide, soft, tinted ambient shadows, never hard grey borders.
   Motion uses one heavy spring curve and only transform / opacity. Nothing loads from outside the server. */
@font-face { font-family: "Geist"; src: url("../fonts/geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --bg: #e8ebeb; --glow-a: rgba(255, 255, 255, .9); --glow-b: rgba(10, 111, 98, .07);
  --shell: rgba(13, 42, 39, .045); --surface: #ffffff; --surface-2: #f5f7f7; --sunken: #eef1f1; --glass: rgba(255, 255, 255, .72);
  --hair: rgba(12, 38, 35, .075); --hair-strong: rgba(12, 38, 35, .15); --line: var(--hair);
  --text: #0a1415; --muted: #54666a; --faint: #8a999c;
  --accent: #0a6f62; --accent-hover: #08594f; --accent-ink: #ffffff; --accent-soft: #dcefec; --accent-ring: rgba(10, 111, 98, .16);
  --ok: #18794e; --ok-bg: #e1f2e8; --warn: #9a5806; --warn-bg: #fbedcf; --bad: #bd3328; --bad-bg: #fae4e1;
  --info: #2457c5; --info-bg: #e2ebfb; --idle: #54666a; --idle-bg: #e8eded;
  --lit: inset 0 1px 0 rgba(255, 255, 255, .95);
  --ambient: 0 1px 1px rgba(12, 38, 35, .03), 0 22px 44px -26px rgba(12, 38, 35, .2);
  --float: 0 1px 1px rgba(12, 38, 35, .04), 0 28px 60px -22px rgba(12, 38, 35, .32);
  --grain-blend: multiply; --grain: .045;
  --r-shell: 24px; --bezel: 6px; --r-core: calc(var(--r-shell) - var(--bezel)); --r: 13px; --pill: 999px;
  --rail: 258px; --gutter: 2.75rem;
  --z-top: 30; --z-drawer: 40; --z-pop: 60; --z-grain: 80;
  --spring: cubic-bezier(.32, .72, 0, 1);
  --font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", "Cascadia Mono", ui-monospace, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #050707; --glow-a: rgba(60, 196, 176, .11); --glow-b: rgba(60, 196, 176, .06);
    --shell: rgba(255, 255, 255, .035); --surface: #0c1213; --surface-2: #111819; --sunken: #080c0d; --glass: rgba(12, 18, 19, .7);
    --hair: rgba(255, 255, 255, .075); --hair-strong: rgba(255, 255, 255, .16);
    --text: #eaf1f1; --muted: #93a4a7; --faint: #66777a;
    --accent: #3cc4b0; --accent-hover: #62d5c3; --accent-ink: #03211c; --accent-soft: #0f2e29; --accent-ring: rgba(60, 196, 176, .2);
    --ok: #4fcf93; --ok-bg: #10301f; --warn: #f0b34d; --warn-bg: #35270a; --bad: #ff8f84; --bad-bg: #3c1713;
    --info: #86aef7; --info-bg: #13284a; --idle: #93a4a7; --idle-bg: #192325;
    --lit: inset 0 1px 0 rgba(255, 255, 255, .06);
    --ambient: 0 30px 60px -34px rgba(0, 0, 0, .9); --float: 0 30px 70px -20px rgba(0, 0, 0, .95);
    --grain-blend: soft-light; --grain: .1; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #050707; --glow-a: rgba(60, 196, 176, .11); --glow-b: rgba(60, 196, 176, .06);
  --shell: rgba(255, 255, 255, .035); --surface: #0c1213; --surface-2: #111819; --sunken: #080c0d; --glass: rgba(12, 18, 19, .7);
  --hair: rgba(255, 255, 255, .075); --hair-strong: rgba(255, 255, 255, .16);
  --text: #eaf1f1; --muted: #93a4a7; --faint: #66777a;
  --accent: #3cc4b0; --accent-hover: #62d5c3; --accent-ink: #03211c; --accent-soft: #0f2e29; --accent-ring: rgba(60, 196, 176, .2);
  --ok: #4fcf93; --ok-bg: #10301f; --warn: #f0b34d; --warn-bg: #35270a; --bad: #ff8f84; --bad-bg: #3c1713;
  --info: #86aef7; --info-bg: #13284a; --idle: #93a4a7; --idle-bg: #192325;
  --lit: inset 0 1px 0 rgba(255, 255, 255, .06);
  --ambient: 0 30px 60px -34px rgba(0, 0, 0, .9); --float: 0 30px 70px -20px rgba(0, 0, 0, .95);
  --grain-blend: soft-light; --grain: .1; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 14.5px; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.55 var(--font); -webkit-font-smoothing: antialiased; }
/* The field: two soft lights behind everything, and a film of grain over it. Both fixed, neither interactive. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60vw 50vh at 12% -8%, var(--glow-a), transparent 70%), radial-gradient(50vw 55vh at 100% 105%, var(--glow-b), transparent 70%); }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: var(--z-grain); opacity: var(--grain); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color: var(--accent); text-decoration: none; transition: color .4s var(--spring); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
p { text-wrap: pretty; }
h1 { font: 600 clamp(2.1rem, 3.2vw, 2.9rem)/1.02 var(--font); margin: 0; letter-spacing: -.045em; text-wrap: balance; }
h2 { font: 600 1.06rem/1.3 var(--font); margin: 0 0 1rem; letter-spacing: -.02em; }
code, .mono { font-family: var(--mono); font-size: .88em; }
.muted { color: var(--muted); }
.small { font-size: .87rem; }
.nowrap { white-space: nowrap; }
.mt-1 { margin-top: .7rem; } .mt-2 { margin-top: 1.4rem; } .w-30 { width: 30%; } .block { width: 100%; }
.alert-text { color: var(--bad); font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
svg.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 1rem; top: 0; transform: translateY(-140%); z-index: var(--z-pop); background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; border-radius: var(--pill); font-weight: 600; transition: transform .5s var(--spring); }
.skip:focus { transform: translateY(1rem); text-decoration: none; }
.eyebrow { display: inline-flex; align-items: center; gap: .45rem; padding: .22rem .7rem; border-radius: var(--pill); font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); background: var(--shell); box-shadow: 0 0 0 1px var(--hair); margin-bottom: 1rem; }
.eyebrow::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.crumbs { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.crumbs .back { margin-bottom: 1rem; }

/* Shell: a floating rail beside a column with a floating island on top */
.shell { display: grid; grid-template-columns: calc(var(--rail) + 14px) minmax(0, 1fr); min-height: 100dvh; }
.side { position: sticky; top: 14px; height: calc(100dvh - 28px); margin: 14px 0 14px 14px; padding: 1.15rem .8rem 1.1rem; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 3px;
  background: var(--glass); border-radius: var(--r-shell); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--ambient); backdrop-filter: blur(18px) saturate(1.3); }
.brand { display: flex; align-items: center; gap: .7rem; font: 600 1.14rem var(--font); color: var(--text); padding: .1rem .5rem 1.15rem; letter-spacing: -.03em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand small { display: block; font: 400 .74rem var(--font); color: var(--muted); letter-spacing: 0; }
.nav-title { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin: 1.25rem .7rem .4rem; font-weight: 500; white-space: nowrap; }
.side a.nav { position: relative; display: flex; align-items: center; gap: .75rem; color: var(--muted); padding: .52rem .7rem; border-radius: var(--r); font-weight: 500; white-space: nowrap; transition: background .5s var(--spring), color .5s var(--spring), transform .5s var(--spring); }
.side a.nav:hover { background: var(--shell); color: var(--text); text-decoration: none; transform: translateX(2px); }
.side a.nav:active { transform: scale(.98); }
.side a.nav.active { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: 0 0 0 1px var(--hair), var(--lit), 0 10px 22px -14px rgba(12, 38, 35, .35); }
.side a.nav.active svg { color: var(--accent); }
.side a.nav .count { margin-left: auto; font: 500 .74rem var(--mono); background: var(--info-bg); color: var(--info); padding: 0 .45rem; border-radius: var(--pill); }
:root[data-rail="mini"] { --rail: 66px; }
:root[data-rail="mini"] .side .brand span, :root[data-rail="mini"] .side a.nav span { display: none; }
:root[data-rail="mini"] .nav-title { height: 1px; margin: .7rem .6rem; background: var(--hair); font-size: 0; }
:root[data-rail="mini"] .side a.nav, :root[data-rail="mini"] .side .brand { justify-content: center; padding-inline: 0; }
:root[data-rail="mini"] .side a.nav:hover { transform: none; }
.col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 14px; z-index: var(--z-top); margin: 14px var(--gutter) 0; height: 54px; display: flex; align-items: center; gap: .5rem; padding: 0 .55rem;
  background: var(--glass); border-radius: var(--pill); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--ambient); backdrop-filter: blur(20px) saturate(1.4); }
.topbar .grow { flex: 1; }
.jump { display: inline-flex; align-items: center; gap: .6rem; height: 38px; min-width: min(320px, 36vw); padding: 0 .5rem 0 .85rem; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); font: inherit; cursor: pointer; transition: background .5s var(--spring), color .5s var(--spring); }
.jump:hover { background: var(--shell); color: var(--text); }
.jump span { flex: 1; text-align: left; }
kbd { font: 500 .72rem var(--mono); color: var(--muted); background: var(--shell); box-shadow: 0 0 0 1px var(--hair); border-radius: 7px; padding: .08rem .4rem; }
.live { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .86rem; color: var(--info); background: var(--info-bg); padding: .38rem .8rem; border-radius: var(--pill); white-space: nowrap; transition: transform .5s var(--spring); }
.live:hover { text-decoration: none; transform: translateY(-1px); }
.live i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.8s var(--spring) infinite; }
@keyframes pulse { 50% { opacity: .25; transform: scale(.7); } }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .5s var(--spring), color .5s var(--spring), transform .4s var(--spring); }
.iconbtn:hover { color: var(--text); background: var(--shell); }
.iconbtn:active { transform: scale(.92); }
.menu-btn { display: none; }
.burger { position: relative; width: 18px; height: 12px; }
.burger i { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .6s var(--spring); }
.burger i:first-child { top: 2px; } .burger i:last-child { bottom: 2px; }
body.nav-open .burger i:first-child { transform: translateY(3.25px) rotate(45deg); }
body.nav-open .burger i:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.user { position: relative; }
.user summary { list-style: none; display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .22rem .85rem .22rem .22rem; border-radius: var(--pill); background: var(--shell); box-shadow: 0 0 0 1px var(--hair); transition: background .5s var(--spring); }
.user summary:hover { background: var(--surface); }
.user summary::-webkit-details-marker { display: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font: 600 .82rem var(--font); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.user .who { line-height: 1.15; font-weight: 500; font-size: .87rem; }
.user .who small { display: block; font-weight: 400; color: var(--muted); font-size: .75rem; }
.user .menu { position: absolute; right: 0; top: calc(100% + 12px); z-index: var(--z-pop); min-width: 230px; padding: .45rem; background: var(--surface); border-radius: 20px; box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--float); animation: pop .5s var(--spring); transform-origin: top right; }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.96); } }
.user .menu .label { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); padding: .5rem .7rem .3rem; }
.user .menu button, .user .menu label { width: 100%; text-align: left; background: none; border: 0; padding: .5rem .7rem; border-radius: 12px; font: inherit; color: var(--text); cursor: pointer; display: flex; gap: .65rem; align-items: center; transition: background .4s var(--spring); }
.user .menu button:hover, .user .menu label:hover { background: var(--shell); }
.user .menu hr { border: 0; height: 1px; background: var(--hair); margin: .4rem .3rem; }
.main { padding: 2.75rem var(--gutter) 6rem; min-width: 0; width: 100%; display: flow-root; }
.main:focus { outline: none; }
/* Entry: each block settles upward as it comes into view (added by script, so nothing hides without it). */
.reveal { opacity: 0; transform: translateY(26px); filter: blur(6px); }
.reveal.in { opacity: 1; transform: none; filter: none; transition: opacity .9s var(--spring), transform .9s var(--spring), filter .9s var(--spring); transition-delay: var(--d, 0s); }
.back { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; font-weight: 500; transition: color .4s var(--spring); }
.back:hover { color: var(--text); text-decoration: none; }
.back svg { width: 15px; height: 15px; transition: transform .5s var(--spring); }
.back:hover svg { transform: translateX(-4px); }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.head p { margin: .8rem 0 0; color: var(--muted); max-width: 60ch; font-size: 1.05rem; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.actions form { display: inline-flex; }

/* The tray: shell outside, lit core inside, radii concentric */
.card { position: relative; isolation: isolate; padding: calc(var(--bezel) + 1.5rem) calc(var(--bezel) + 1.6rem) calc(var(--bezel) + 1.7rem); margin-bottom: 1.5rem; background: var(--shell); border-radius: var(--r-shell); box-shadow: 0 0 0 1px var(--hair); }
.card::before { content: ""; position: absolute; inset: var(--bezel); z-index: -1; border-radius: var(--r-core); background: var(--surface); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--ambient); }
.card.flush { padding: var(--bezel); overflow-x: auto; }
.card.flush > h2 { padding: 1.35rem 1.6rem .3rem; margin-bottom: .5rem; }
.grid { display: grid; gap: 1.5rem; }
.grid > * { min-width: 0; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); align-items: start; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--bezel); padding: var(--bezel); margin-bottom: 1.5rem; background: var(--shell); border-radius: var(--r-shell); box-shadow: 0 0 0 1px var(--hair); }
.stat { background: var(--surface); padding: 1.25rem 1.4rem 1.35rem; min-width: 0; border-radius: var(--r-core); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--ambient); transition: transform .6s var(--spring); }
.stat:hover { transform: translateY(-3px); }
.stat .n { font: 600 2rem/1.1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.045em; }
.stat .l { color: var(--muted); font-size: .86rem; margin-top: .4rem; }
.empty { padding: 3.25rem 1.6rem 3.75rem; color: var(--muted); max-width: 52ch; }
.empty strong { display: block; color: var(--text); margin-bottom: .4rem; font: 600 1.25rem var(--font); letter-spacing: -.03em; }
.empty .btn { margin-top: 1.25rem; }

/* Tables: no boxes, only breath and a whisper of a rule */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: left; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); font-weight: 500; padding: .9rem 1.6rem .75rem; border-bottom: 1px solid var(--hair); white-space: nowrap; }
td { padding: 1rem 1.6rem; border-bottom: 1px solid var(--hair); vertical-align: middle; transition: background .5s var(--spring); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:last-child td:first-child { border-bottom-left-radius: var(--r-core); }
tbody tr:last-child td:last-child { border-bottom-right-radius: var(--r-core); }
td.num, th.num { text-align: right; white-space: nowrap; }
td.mono { white-space: nowrap; }
td .sub { display: block; color: var(--muted); font-size: .86rem; overflow-wrap: anywhere; }
td.tools { text-align: right; white-space: nowrap; }
td.tools form { display: inline-flex; }
td > a:first-child, .ident a { font-weight: 600; color: var(--text); }
td > a:first-child:hover { color: var(--accent); text-decoration: none; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .8rem 2rem; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

/* Status: a soft pill with a lamp */
.badge { display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .7rem .2rem .55rem; border-radius: var(--pill); font-size: .8rem; font-weight: 500; white-space: nowrap; background: var(--idle-bg); color: var(--idle); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
.badge.success, .badge.online, .badge.ready { background: var(--ok-bg); color: var(--ok); }
.badge.warning, .badge.failed_over, .badge.syncing { background: var(--warn-bg); color: var(--warn); }
.badge.failed, .badge.offline, .badge.error, .badge.missing { background: var(--bad-bg); color: var(--bad); }
.badge.running, .badge.pending { background: var(--info-bg); color: var(--info); }
.badge.running::before { animation: pulse 1.8s var(--spring) infinite; }
.ticks { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.ticks i { width: 4px; height: 20px; border-radius: 2px; background: var(--idle-bg); }
.ticks i.success { background: var(--ok); } .ticks i.warning { background: var(--warn); height: 14px; }
.ticks i.failed { background: var(--bad); height: 8px; } .ticks i.running, .ticks i.pending { background: var(--info); }

/* Buttons: pills that press; the main call carries its arrow in a nested disc */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; border: 0; background: var(--surface); color: var(--text); padding: .4rem 1.15rem; border-radius: var(--pill); font: 500 .93rem var(--font); cursor: pointer; white-space: nowrap; overflow: hidden;
  box-shadow: 0 0 0 1px var(--hair-strong), var(--lit), 0 8px 18px -14px rgba(12, 38, 35, .4); transition: transform .5s var(--spring), background .5s var(--spring), box-shadow .5s var(--spring), opacity .5s var(--spring); }
.btn:hover { background: var(--surface-2); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 14px 26px -14px var(--accent); }
.btn.primary:hover { background: var(--accent-hover); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-bg); }
.btn.solid-danger { background: var(--bad); color: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 26px -14px var(--bad); }
.btn.sm { min-height: 32px; padding: .15rem .85rem; font-size: .86rem; }
.btn.lg { min-height: 48px; padding-inline: 1.5rem; font-size: 1rem; }
.head .btn.primary, form.stack > .actions .btn.primary, .login .btn.primary, .empty .btn.primary, .errorpage .btn.primary { padding-right: .4rem; gap: .8rem; }
.head .btn.primary::after, form.stack > .actions .btn.primary::after, .login .btn.primary::after, .empty .btn.primary::after, .errorpage .btn.primary::after { content: ""; width: 30px; height: 30px; flex: none; border-radius: 50%; background-color: rgba(255, 255, 255, .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E"); background-size: 16px; background-position: center; background-repeat: no-repeat; transition: transform .6s var(--spring); }
.btn.primary:hover::after { transform: translate(3px, -1px) scale(1.06); }
.login .btn.primary { justify-content: space-between; padding-left: 1.5rem; }
.btn[aria-busy="true"] { pointer-events: none; opacity: .72; }
.btn[aria-busy="true"]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .45) 50%, transparent 75%); transform: translateX(-100%); animation: sweep 1.2s var(--spring) infinite; }
@keyframes sweep { to { transform: translateX(100%); } }

/* Forms */
form.stack { max-width: 980px; }
form.stack .card:has(> h2) { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 2.5rem; }
form.stack .card:has(> h2) > h2 { grid-column: 1; grid-row: 1 / span 40; margin: .2rem 0 0; }
form.stack .card:has(> h2) > :not(h2) { grid-column: 2; }
.field { margin-bottom: 1.3rem; }
.field label { display: block; font-weight: 500; margin-bottom: .45rem; font-size: .93rem; }
.field .req { color: var(--bad); margin-left: .15rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: .55rem .95rem; border: 0; border-radius: var(--r); background: var(--sunken); color: var(--text); font: inherit;
  box-shadow: 0 0 0 1px var(--hair), inset 0 1px 2px rgba(12, 38, 35, .05); transition: box-shadow .5s var(--spring), background .5s var(--spring); }
input:hover, select:hover, textarea:hover { box-shadow: 0 0 0 1px var(--hair-strong), inset 0 1px 2px rgba(12, 38, 35, .05); }
input:focus, select:focus, textarea:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px var(--accent-ring); }
input:user-invalid { box-shadow: 0 0 0 1px var(--bad), 0 0 0 5px var(--bad-bg); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); width: 17px; height: 17px; }
textarea { font-family: var(--mono); font-size: .88rem; resize: vertical; }
.hint { margin: .45rem 0 0; font-size: .86rem; color: var(--muted); max-width: 62ch; }
.err { margin: .45rem 0 0; font-size: .87rem; color: var(--bad); font-weight: 500; }
.check { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1rem; cursor: pointer; }
.check input { margin-top: .2rem; flex: none; }
.check span small { display: block; color: var(--muted); max-width: 60ch; margin-top: .15rem; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1.25rem; }
.filters { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filters input, .filters select { width: auto; min-width: 220px; min-height: 40px; border-radius: var(--pill); background: var(--surface); }
.chips { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .7rem; }
.pick { border-radius: var(--r); max-height: 360px; overflow-y: auto; background: var(--sunken); box-shadow: 0 0 0 1px var(--hair), inset 0 1px 2px rgba(12, 38, 35, .05); }
.pick h3 { margin: 0; padding: .6rem .95rem; font-size: .8rem; font-weight: 500; color: var(--muted); background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--hair); position: sticky; top: 0; z-index: 1; }
.pick label { display: flex; gap: .7rem; align-items: center; padding: .5rem .95rem; font-weight: 400; margin: 0; cursor: pointer; transition: background .4s var(--spring); }
.pick label:hover { background: var(--surface); }

/* Feedback */
.flash { display: flex; gap: .7rem; align-items: flex-start; padding: .9rem 1.2rem; border-radius: 18px; margin-bottom: 1.75rem; overflow-wrap: anywhere; font-weight: 500; }
.flash.ok { background: var(--ok-bg); color: var(--ok); }
.flash.error { background: var(--bad-bg); color: var(--bad); }
.note { background: var(--info-bg); color: var(--text); border-radius: 16px; padding: .9rem 1.15rem; margin-bottom: 1.4rem; font-size: .93rem; }
.bar { height: 10px; background: var(--sunken); border-radius: var(--pill); overflow: hidden; box-shadow: inset 0 1px 2px rgba(12, 38, 35, .08); }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: var(--pill); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: width .9s var(--spring); }
.log { font-family: var(--mono); font-size: .85rem; max-height: 560px; overflow-y: auto; margin: 0 .8rem .8rem; padding: .9rem 0 1rem; background: var(--sunken); border-radius: 14px; box-shadow: 0 0 0 1px var(--hair), inset 0 1px 2px rgba(12, 38, 35, .06); }
.log div { padding: .2rem 1.2rem; display: grid; grid-template-columns: 5rem 4.6rem 1fr; gap: .5rem; }
.log span { overflow-wrap: anywhere; }
.log .warning span, .log .warning b { color: var(--warn); }
.log .error span, .log .error b { color: var(--bad); }
.log time, .log b { color: var(--faint); font-weight: 400; }
.pager { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.6rem; box-shadow: inset 0 1px 0 var(--hair); }
dialog { color: var(--text); border: 0; }
dialog::backdrop { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(14px) saturate(1.2); }
dialog[open] { animation: pop .6s var(--spring); }
dialog.confirm { border-radius: 28px; background: var(--surface); padding: 2rem 2rem 1.6rem; width: min(460px, calc(100vw - 2rem)); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--float); }
dialog.confirm h2 { margin-bottom: .5rem; font-size: 1.4rem; letter-spacing: -.035em; }
dialog.confirm p { margin: 0 0 1.75rem; color: var(--muted); }
dialog.confirm .actions { justify-content: flex-end; }
dialog.palette { border-radius: 26px; background: var(--surface); padding: 0; width: min(600px, calc(100vw - 2rem)); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--float); margin-top: 14vh; overflow: hidden; }
dialog.palette input { border-radius: 0; min-height: 62px; padding-inline: 1.5rem; font-size: 1.1rem; background: transparent; box-shadow: inset 0 -1px 0 var(--hair); }
dialog.palette input:hover, dialog.palette input:focus { box-shadow: inset 0 -1px 0 var(--hair); background: transparent; }
.palette-list { max-height: 46vh; overflow-y: auto; padding: .55rem; }
.palette-list a { display: flex; align-items: center; gap: .8rem; padding: .65rem .9rem; border-radius: 14px; color: var(--text); font-weight: 500; transition: background .4s var(--spring), transform .4s var(--spring); }
.palette-list a small { margin-left: auto; color: var(--faint); font-weight: 400; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.palette-list a:hover, .palette-list a.on { background: var(--shell); text-decoration: none; transform: translateX(3px); }
.palette-list a.on svg { color: var(--accent); }
.palette-list .none { padding: 1.4rem 1rem; color: var(--muted); }

/* Dashboard bento */
.overview { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.overview .card { margin: 0; }
.overview .card:first-child { grid-column: span 4; } .overview .card:last-child { grid-column: span 8; }
.gauge { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; }
.gauge svg { width: 150px; height: 150px; flex: none; }
.gauge .track { stroke: var(--sunken); } .gauge .value { stroke: var(--accent); }
.gauge .value.warn { stroke: var(--warn); }
.gauge text { fill: var(--text); font: 600 27px var(--font); letter-spacing: -.045em; }
.gauge .big { font: 600 1.3rem/1.2 var(--font); letter-spacing: -.035em; }
.daychart { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; height: 150px; align-items: end; box-shadow: inset 0 -1px 0 var(--hair-strong); }
.daychart .day { width: 100%; max-width: 16px; justify-self: center; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; justify-content: flex-start; min-width: 0; position: relative; }
.daychart .day i { display: block; border-radius: var(--pill); min-height: 4px; }
.daychart .day i.success { background: var(--ok); } .daychart .day i.warning { background: var(--warn); } .daychart .day i.failed { background: var(--bad); }
.daychart .day:hover::after, .daychart .day:focus-visible::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: .78rem; padding: .3rem .7rem; border-radius: var(--pill); white-space: nowrap; z-index: 5; }
.dayaxis { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-top: .55rem; font-size: .72rem; color: var(--faint); text-align: center; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: .86rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: .45rem; }
.legend b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.legend i { width: 8px; height: 8px; border-radius: 50%; }
.legend i.success { background: var(--ok); } .legend i.warning { background: var(--warn); } .legend i.failed { background: var(--bad); }
.cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.cardhead h2 { margin: 0; }
/* The guide: a tray holding the six steps in order and one lit panel for the step you are on */
.guide { margin-bottom: 1.5rem; padding: var(--bezel); background: var(--shell); border-radius: var(--r-shell); box-shadow: 0 0 0 1px var(--hair); }
.guide-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.2rem 1.5rem 1.1rem; }
.guide-head h2 { margin: 0 0 .15rem; font-size: 1.25rem; letter-spacing: -.03em; }
.guide-head p { margin: 0; }
.guide-meter { display: flex; gap: 5px; }
.guide-meter i { width: 34px; height: 6px; border-radius: var(--pill); background: var(--hair-strong); transition: background .6s var(--spring); }
.guide-meter i.on { background: var(--accent); }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--bezel); }
.guide-steps li { min-width: 0; display: grid; }
.guide-steps button { display: grid; grid-template-columns: auto 1fr; column-gap: .75rem; align-content: center; align-items: center; text-align: left; width: 100%; min-width: 0; padding: .95rem 1.1rem 1rem; border: 0; border-radius: var(--r-core); background: transparent; color: var(--text); font: inherit; cursor: pointer; transition: background .5s var(--spring), transform .5s var(--spring), box-shadow .5s var(--spring); }
.guide-steps button:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); transform: translateY(-2px); }
.guide-steps button:active { transform: scale(.98); }
.guide-steps button[aria-selected="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--ambient); transform: none; }
.guide-steps .num { grid-row: 1 / span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 .85rem var(--mono); background: var(--surface); color: var(--faint); box-shadow: 0 0 0 1px var(--hair-strong); }
.guide-steps .num svg { width: 15px; height: 15px; stroke-width: 2; }
.guide-steps b { font-weight: 600; letter-spacing: -.015em; line-height: 1.2; text-wrap: balance; }
.guide-steps small { color: var(--muted); font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-steps .done .num { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
.guide-steps .done b { color: var(--muted); }
.guide-steps .later b, .guide-steps .later small { color: var(--faint); }
.guide-steps .now .num { color: var(--accent); box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-ring); }
.guide-steps button[aria-selected="true"] b { color: var(--text); }
.guide-lock { color: var(--warn) !important; font-size: .95rem !important; }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.guide-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 2.5rem; margin-top: var(--bezel); padding: 1.6rem 1.7rem 1.75rem; border-radius: var(--r-core); background: var(--surface); box-shadow: 0 0 0 1px var(--hair), var(--lit), var(--ambient); }
.guide-now .eyebrow { margin-bottom: .8rem; }
.guide-now h3 { margin: 0; font: 600 clamp(1.5rem, 2.2vw, 2rem)/1.08 var(--font); letter-spacing: -.04em; }
.guide-now p { margin: .7rem 0 0; color: var(--muted); max-width: 64ch; font-size: 1.03rem; }
.guide-now .btn.primary { padding-right: .4rem; gap: .8rem; }
.guide-now .btn.primary::after { content: ""; width: 34px; height: 34px; flex: none; border-radius: 50%; background-color: rgba(255, 255, 255, .18);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 16 16 8M9.5 8H16v6.5'/%3E%3C/svg%3E"); background-size: 16px; background-position: center; background-repeat: no-repeat; transition: transform .6s var(--spring); }
@media (max-width: 1250px) { .guide-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .guide-steps { grid-template-columns: minmax(0, 1fr); }
  .guide-now { grid-template-columns: minmax(0, 1fr); padding: 1.3rem 1.2rem 1.4rem; }
  .guide-head { padding: 1rem 1.1rem .9rem; }
  .guide-meter i { width: 22px; }
}

/* Platform and operating-system marks */
.ident { display: inline-flex; align-items: center; gap: .85rem; min-width: 0; vertical-align: middle; }
.ident > span:last-child { white-space: nowrap; }
.ident .sub { white-space: normal; max-width: 36ch; }
.plat { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--sunken); color: var(--muted); box-shadow: 0 0 0 1px var(--hair), var(--lit); }
.plat svg { width: 18px; height: 18px; stroke-width: 1.4; }
.pick .plat { width: 24px; height: 24px; border-radius: 8px; } .pick .plat svg { width: 13px; height: 13px; }
.pick h3 .ident { gap: .55rem; }
.plat-windows, .plat-agent_windows { color: #1877c9; background: color-mix(in srgb, #1877c9 12%, var(--surface)); }
.plat-ubuntu { color: #d9541e; background: color-mix(in srgb, #d9541e 12%, var(--surface)); }
.plat-debian { color: #c2185b; background: color-mix(in srgb, #c2185b 11%, var(--surface)); }
.plat-centos { color: #8a4fb8; background: color-mix(in srgb, #8a4fb8 12%, var(--surface)); }
.plat-redhat { color: #cc2a1f; background: color-mix(in srgb, #cc2a1f 11%, var(--surface)); }
.plat-linux, .plat-agent_linux, .plat-bsd { color: #b07a0c; background: color-mix(in srgb, #b07a0c 13%, var(--surface)); }
.plat-esxi { color: #56788f; background: color-mix(in srgb, #56788f 15%, var(--surface)); }
.plat-proxmox { color: #d9701a; background: color-mix(in srgb, #d9701a 12%, var(--surface)); }
.plat-libvirt { color: #2f6fb5; background: color-mix(in srgb, #2f6fb5 12%, var(--surface)); }
.plat-hyperv { color: #0f8f9c; background: color-mix(in srgb, #0f8f9c 12%, var(--surface)); }

/* Sign-in: editorial split */
.login { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: 14px; gap: 14px; }
.login .pitch { position: relative; overflow: hidden; background: var(--shell); border-radius: 32px; box-shadow: 0 0 0 1px var(--hair); padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.login .pitch h1 { font-size: clamp(2.6rem, 5.4vw, 5rem); letter-spacing: -.055em; line-height: .96; max-width: 11ch; }
.login .pitch p { color: var(--muted); max-width: 40ch; margin: 1.5rem 0 0; font-size: 1.12rem; }
.login .strata { display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.login .strata i { height: 18px; border-radius: var(--pill); background: var(--accent); transform-origin: left; animation: lay 1.1s var(--spring) backwards; }
.login .strata i:nth-child(1) { width: 100%; opacity: 1; animation-delay: .6s; } .login .strata i:nth-child(2) { width: 82%; opacity: .72; animation-delay: .5s; }
.login .strata i:nth-child(3) { width: 91%; opacity: .5; animation-delay: .4s; } .login .strata i:nth-child(4) { width: 64%; opacity: .34; animation-delay: .3s; }
.login .strata i:nth-child(5) { width: 76%; opacity: .22; animation-delay: .2s; } .login .strata i:nth-child(6) { width: 48%; opacity: .12; animation-delay: .1s; }
@keyframes lay { from { transform: scaleX(0); opacity: 0; } }
.login .panel { display: grid; place-items: center; padding: 2rem 1.25rem 3rem; }
.login form { width: 100%; max-width: 380px; animation: settle 1s var(--spring) backwards .15s; }
@keyframes settle { from { opacity: 0; transform: translateY(26px); } }
.login form h2 { font-size: 2.1rem; letter-spacing: -.045em; margin-bottom: .4rem; }
.login form > p { margin: 0 0 2.2rem; }
.login .brand { padding: 0; }
.errorpage { min-height: 100dvh; display: grid; align-content: center; padding: 2rem clamp(1.25rem, 9vw, 9rem); }
.errorpage h1 { font-size: clamp(2.6rem, 6.5vw, 5.4rem); letter-spacing: -.055em; line-height: .96; max-width: 14ch; }
.errorpage p { color: var(--muted); max-width: 46ch; margin: 1.4rem 0 2.2rem; font-size: 1.1rem; }

@media (max-width: 1100px) { .overview .card:first-child, .overview .card:last-child { grid-column: 1 / -1; } }
@media (max-width: 900px) {
  :root { --gutter: 1rem; }
  .shell { grid-template-columns: minmax(0, 1fr); }
  /* The menu opens as a full glass sheet; its links rise in one after another. */
  .side { position: fixed; inset: 0; z-index: var(--z-drawer); height: auto; margin: 0; border-radius: 0; padding: 5.5rem 1.5rem 2rem; gap: 2px; backdrop-filter: blur(28px) saturate(1.4);
    opacity: 0; pointer-events: none; transition: opacity .6s var(--spring); }
  body.nav-open { overflow: hidden; }
  body.nav-open .side { opacity: 1; pointer-events: auto; }
  .side .brand { display: none; }
  .side a.nav { font-size: 1.5rem; letter-spacing: -.03em; padding: .6rem .5rem; gap: 1rem; opacity: 0; transform: translateY(30px); transition: opacity .7s var(--spring), transform .7s var(--spring); }
  .side a.nav svg { width: 22px; height: 22px; }
  .side .nav-title { opacity: 0; transition: opacity .7s var(--spring) .2s; }
  body.nav-open .side a.nav, body.nav-open .side .nav-title { opacity: 1; transform: none; }
  body.nav-open .side a.nav:nth-of-type(1) { transition-delay: .06s; } body.nav-open .side a.nav:nth-of-type(2) { transition-delay: .1s; }
  body.nav-open .side a.nav:nth-of-type(3) { transition-delay: .14s; } body.nav-open .side a.nav:nth-of-type(4) { transition-delay: .18s; }
  body.nav-open .side a.nav:nth-of-type(5) { transition-delay: .22s; } body.nav-open .side a.nav:nth-of-type(6) { transition-delay: .26s; }
  body.nav-open .side a.nav:nth-of-type(7) { transition-delay: .3s; } body.nav-open .side a.nav:nth-of-type(8) { transition-delay: .34s; }
  body.nav-open .side a.nav:nth-of-type(n+9) { transition-delay: .38s; }
  :root[data-rail="mini"] .side a.nav span { display: inline; }
  :root[data-rail="mini"] .side a.nav { justify-content: flex-start; padding-inline: .5rem; }
  :root[data-rail="mini"] .nav-title { height: auto; background: none; font-size: .66rem; margin: 1.25rem .5rem .4rem; }
  .topbar { z-index: calc(var(--z-drawer) + 1); margin-top: 10px; top: 10px; }
  .menu-btn { display: grid; } .rail-btn { display: none; }
  .jump { min-width: 0; padding: 0; width: 38px; justify-content: center; } .jump span, .jump kbd { display: none; }
  .main { padding: 2rem 1rem 4rem; }
  th, td { padding: .8rem 1rem; }
  .card { padding: calc(var(--bezel) + 1.15rem); }
  form.stack .card:has(> h2) { display: block; }
  form.stack .card:has(> h2) > h2 { margin-bottom: 1.1rem; }
  .user .who { display: none; } .user summary { padding: .22rem; }
  .login { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .login .pitch { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; }
}

/* Repository location suggestions */
.advisor { margin: -.2rem 0 1.3rem; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r); background: var(--sunken); box-shadow: 0 0 0 1px var(--hair); }
.advisor-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem 1.5rem; flex-wrap: wrap; }
.advisor-head b { display: block; font-weight: 600; }
.advisor-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; }
.advisor-item { display: grid; gap: .65rem; justify-items: start; padding: 1rem 1.1rem 1.1rem; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--hair), var(--lit); transition: box-shadow .5s var(--spring); }
.advisor-item.recommended { box-shadow: 0 0 0 1.5px var(--accent), var(--lit); }
.advisor-item.chosen { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-ring); }
.advisor-item.unusable { opacity: .72; }
.advisor-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; width: 100%; }
.advisor-path { display: block; font-weight: 500; font-size: .95rem; overflow-wrap: anywhere; }
.advisor-top small { color: var(--muted); font-size: .84rem; }
.advisor-meter { display: grid; grid-template-columns: minmax(120px, 260px) auto; align-items: center; gap: .8rem; width: 100%; }
.advisor-reasons { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: .9rem; display: grid; gap: .25rem; max-width: 70ch; }
/* ─── RGB lighting ────────────────────────────────────────────────────────────────────────────────
   A fourth appearance, chosen in the account menu. The console sits on a black desk and every panel is
   edged by a strip of light that flows through the spectrum, like the under-glow of a lit keyboard.
   Only edges, the main button, titles and small lamps carry the moving colour; text and status colours
   stay fixed so the screen remains readable. Motion stops for people who ask for reduced motion. */
:root[data-theme="rgb"] {
  --bg: #050508; --glow-a: rgba(255, 0, 128, .13); --glow-b: rgba(0, 200, 255, .12);
  --shell: #0b0b11; --surface: #101018; --surface-2: #161621; --sunken: #08080d; --glass: rgba(14, 14, 22, .82);
  --hair: rgba(255, 255, 255, .08); --hair-strong: rgba(255, 255, 255, .18);
  --text: #f1f1f7; --muted: #a3a3b8; --faint: #6c6c84;
  --accent: #22e0ff; --accent-hover: #6aebff; --accent-ink: #04040a; --accent-soft: rgba(34, 224, 255, .13); --accent-ring: rgba(34, 224, 255, .22);
  --ok: #3dfc9a; --ok-bg: rgba(61, 252, 154, .12); --warn: #ffc93d; --warn-bg: rgba(255, 201, 61, .13); --bad: #ff5470; --bad-bg: rgba(255, 84, 112, .14);
  --info: #6aa8ff; --info-bg: rgba(106, 168, 255, .14); --idle: #a3a3b8; --idle-bg: rgba(255, 255, 255, .07);
  --lit: inset 0 1px 0 rgba(255, 255, 255, .05);
  --ambient: 0 30px 60px -34px rgba(0, 0, 0, .95); --float: 0 30px 80px -18px rgba(0, 0, 0, 1);
  --grain-blend: soft-light; --grain: .08; --bezel: 5px;
  --rgb: linear-gradient(90deg, #ff0055, #ff7a00, #ffe600, #1dff7c, #00d5ff, #6a4dff, #ff00d4, #ff0055);
  --led: 2px; color-scheme: dark;
}
@keyframes rgb-flow { to { background-position: 0 0, 300% 0; } }
@keyframes rgb-slide { to { background-position: 300% 0; } }
@keyframes rgb-hue { to { filter: hue-rotate(360deg); } }

/* The light strip: a gradient painted in the border box, with the panel's own fill on top of it. */
:root[data-theme="rgb"] :is(.card, .stats, .guide, .side, .topbar, .login .pitch, dialog.confirm, dialog.palette, .user .menu) {
  border: var(--led) solid transparent; box-shadow: var(--ambient);
  background: linear-gradient(var(--shell), var(--shell)) padding-box, var(--rgb) border-box;
  background-size: 100% 100%, 300% 100%; animation: rgb-flow 9s linear infinite;
}
:root[data-theme="rgb"] :is(.side, .topbar) { background-image: linear-gradient(#0c0c13, #0c0c13), var(--rgb); backdrop-filter: none; }
:root[data-theme="rgb"] :is(dialog.confirm, dialog.palette, .user .menu) { background-image: linear-gradient(var(--surface), var(--surface)), var(--rgb); }
/* Neighbouring panels are out of step, so the colour appears to travel across the page. */
:root[data-theme="rgb"] .main > :nth-child(3n) { animation-delay: -3s; }
:root[data-theme="rgb"] .main > :nth-child(3n + 1) { animation-delay: -6s; }
:root[data-theme="rgb"] .grid > :nth-child(2n) .card, :root[data-theme="rgb"] .overview .card:last-child { animation-delay: -4.5s; }
:root[data-theme="rgb"] .topbar { animation-delay: -2s; }
:root[data-theme="rgb"] .card::before { box-shadow: var(--lit); }
:root[data-theme="rgb"] .dialog.confirm { animation: rgb-flow 9s linear infinite; }

/* Key caps: tiles with a lit lower edge. */
:root[data-theme="rgb"] :is(.stat, .guide-now, .guide-steps button[aria-selected="true"]) { position: relative; overflow: hidden; box-shadow: var(--lit); }
:root[data-theme="rgb"] :is(.stat, .guide-now)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rgb); background-size: 300% 100%; animation: rgb-slide 9s linear infinite; }
:root[data-theme="rgb"] .stat:nth-child(2n)::after { animation-delay: -3s; } :root[data-theme="rgb"] .stat:nth-child(3n)::after { animation-delay: -6s; }

/* Titles and the main button carry the full spectrum. */
:root[data-theme="rgb"] :is(h1, .login form h2, .errorpage h1, .guide-now h3, .stat .n) { background: var(--rgb); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: rgb-slide 12s linear infinite; }
:root[data-theme="rgb"] .stat .n { animation-duration: 16s; }
:root[data-theme="rgb"] :is(.btn.primary, .skip) { background: var(--rgb); background-size: 300% 100%; color: #050508; font-weight: 600; animation: rgb-slide 6s linear infinite; box-shadow: 0 0 26px -6px rgba(0, 213, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }
:root[data-theme="rgb"] .btn.primary:hover { background: var(--rgb); background-size: 300% 100%; filter: brightness(1.15) saturate(1.2); }
:root[data-theme="rgb"] .btn.primary::after { background-color: rgba(5, 5, 8, .28) !important; }
:root[data-theme="rgb"] .btn { background: var(--surface-2); }
:root[data-theme="rgb"] .btn:hover { background: #1f1f2d; }
:root[data-theme="rgb"] .btn.solid-danger { background: var(--bad); color: #050508; }

/* Navigation: the open page gets a lit bar, like a pressed key. */
:root[data-theme="rgb"] .side a.nav.active { background: var(--surface-2); box-shadow: var(--lit); overflow: hidden; }
:root[data-theme="rgb"] .side a.nav.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, #ff0055, #ffe600, #1dff7c, #00d5ff, #6a4dff, #ff00d4); animation: rgb-hue 6s linear infinite; }
:root[data-theme="rgb"] .side a.nav:hover { background: rgba(255, 255, 255, .06); }

/* Small lamps cycle by rotating their hue, which is cheap to draw. */
:root[data-theme="rgb"] :is(.avatar, .brand svg, .eyebrow::before, .guide-meter i.on, .bar > i, .gauge .value, .guide-steps .done .num, .guide-steps .now .num, ol.steps li::before, .login .strata i, .side a.nav.active svg, .palette-list a.on svg) { animation: rgb-hue 8s linear infinite; }
:root[data-theme="rgb"] :is(.avatar, .guide-meter i.on, .bar > i, .guide-steps .done .num, .login .strata i) { background: #ff0a6c; color: #fff; }
:root[data-theme="rgb"] .brand svg rect { fill: #ff0a6c; }
:root[data-theme="rgb"] :is(.gauge .value, .gauge .value.warn) { stroke: #ff0a6c; }
:root[data-theme="rgb"] .gauge text { fill: var(--text); }
:root[data-theme="rgb"] .bar > i { box-shadow: 0 0 14px #ff0a6c; }
:root[data-theme="rgb"] .guide-steps .now .num { color: #ff0a6c; box-shadow: 0 0 0 2px #ff0a6c, 0 0 16px #ff0a6c; background: var(--surface); }

/* Fields light up when you type in them. */
:root[data-theme="rgb"] :is(input:focus, select:focus, textarea:focus) { background: var(--sunken); box-shadow: 0 0 0 1px var(--accent), 0 0 22px -4px var(--accent); }
:root[data-theme="rgb"] tbody tr:hover td { background: rgba(255, 255, 255, .035); }
:root[data-theme="rgb"] tbody tr:hover td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
:root[data-theme="rgb"] .log { background: #030306; }
:root[data-theme="rgb"] dialog::backdrop { background: rgba(3, 3, 6, .75); }
:root[data-theme="rgb"] .plat { background: var(--surface-2); }
:root[data-theme="rgb"] .login { background: var(--bg); }
:root[data-theme="rgb"] .daychart .day:hover::after { background: #f1f1f7; color: #050508; }

@media (max-width: 900px) { :root[data-theme="rgb"] .side { border-width: 0; background: #08080d; animation: none; } }
@media (prefers-reduced-motion: reduce) { :root[data-theme="rgb"] * { animation: none !important; } }