/* ArkPanel – Apple-style admin look: quiet layered surfaces, translucent chrome, one accent, colour only for status
   and map identity. Springs for motion (damping ratio + response), press feedback on pointer-down.
   Dark is the default; light follows the OS unless the user picked a theme (html[data-theme]). */
:root {
    /* Surfaces rise in lightness instead of leaning on borders (Apple dark mode). */
    --bg: #0e0e10;
    --surface: #1c1c1e;
    --surface-2: #242427;
    --surface-3: #2e2e32;
    --field: #232326;
    --fill: rgba(120, 120, 128, .24);          /* neutral control fill: buttons, segmented tracks */
    --fill-strong: rgba(120, 120, 128, .36);
    --fill-weak: rgba(120, 120, 128, .12);
    --thumb: #5a5a5f;                          /* selected segment */
    --thumb-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --border: rgba(255, 255, 255, .075);
    --border-strong: rgba(255, 255, 255, .14);
    --text: #f5f5f7;
    --muted: #a1a1a6;
    --faint: #6e6e73;
    --blue: #0a84ff; --blue-hover: #409cff;
    --orange: #ff9f0a; --orange-hover: #ffb340;
    --accent: var(--blue);
    --accent-hover: var(--blue-hover);
    --accent-soft: rgba(10, 132, 255, .18);
    --on-accent: #fff;
    --accent-2: #40c8e0;
    --ok: #30d158;
    --warn: #ff9f0a;
    --err: #ff453a;
    --idle: #8e8e93;
    --glow: rgba(10, 132, 255, .07);
    --terminal-bg: #0a0a0c;
    --scroll-thumb: rgba(255, 255, 255, .22);
    /* Materials: heavier for structure (sidebar), lighter for floating chrome. */
    --material-sidebar: rgba(30, 30, 33, .74);
    --material-chrome: rgba(16, 16, 18, .72);
    --material-pop: rgba(40, 40, 44, .82);
    --material-edge: rgba(255, 255, 255, .09);  /* bright top edge: light catching the material */
    --scrim: rgba(0, 0, 0, .48);
    --radius: 14px;
    --radius-lg: 18px;
    --radius-sm: 9px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .32);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .32);
    --shadow-pop: 0 24px 70px rgba(0, 0, 0, .55), 0 0 0 .5px rgba(255, 255, 255, .1);
    /* System fonts first: they ship optical sizes and tracking tables. Display cut for large text. */
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, Roboto, "Helvetica Neue", sans-serif;
    --mono: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
    /* Type scale in rem, so the browser's text size setting scales the panel. */
    --fs-2xs: .6875rem;   /* 11 */
    --fs-xs: .71875rem;   /* 11.5 */
    --fs-sm: .78125rem;   /* 12.5 */
    --fs-ctl: .8125rem;   /* 13 */
    --fs-base: .875rem;   /* 14 */
    --fs-md: .9375rem;    /* 15 */
    --fs-lg: 1.0625rem;   /* 17 */
    --fs-xl: 1.25rem;     /* 20 */
    --fs-2xl: 1.5rem;     /* 24 */
    --fs-3xl: 1.625rem;   /* 26 */
    /* Motion. Springs as linear() curves: --spring = damping 1.0 / response .35 s (no overshoot, the default);
       --spring-bounce = damping .72 / response .4 s, only where a gesture or press carries momentum. */
    --spring: cubic-bezier(.2, .8, .2, 1);
    --spring-bounce: cubic-bezier(.3, 1.3, .5, 1);
    --spring-dur: .5s;
    --ease: cubic-bezier(.25, .1, .25, 1);
    --sidebar-w: 252px;
    color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
    :root {
        --spring: linear(0, 0.064, 0.197, 0.346, 0.485, 0.605, 0.702, 0.778, 0.837, 0.881, 0.914, 0.938, 0.956, 0.969, 0.978, 0.984, 0.989, 0.992, 0.995, 0.996, 0.997, 0.998, 1);
        --spring-bounce: linear(0, 0.055, 0.183, 0.342, 0.503, 0.649, 0.771, 0.866, 0.937, 0.985, 1.015, 1.031, 1.038, 1.038, 1.034, 1.028, 1.022, 1.016, 1.011, 1.007, 1.004, 1.001, 1, 0.999, 0.999, 0.999, 1);
    }
}
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        --bg: #f2f2f7; --surface: #ffffff; --surface-2: #f5f5f7; --surface-3: #e8e8ed; --field: #ffffff;
        --fill: rgba(120, 120, 128, .12); --fill-strong: rgba(120, 120, 128, .2); --fill-weak: rgba(120, 120, 128, .07);
        --thumb: #ffffff; --thumb-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
        --border: rgba(0, 0, 0, .07); --border-strong: rgba(0, 0, 0, .14);
        --text: #1d1d1f; --muted: #6e6e73; --faint: #8e8e93;
        --blue: #0071e3; --blue-hover: #0077ed; --orange: #b35c00; --orange-hover: #c46500;
        --accent-soft: rgba(0, 113, 227, .1); --accent-2: #0e7e98;
        --ok: #1e8237; --warn: #b35c00; --err: #d70015; --idle: #8e8e93;
        --glow: rgba(0, 113, 227, .05); --terminal-bg: #111114; --scroll-thumb: rgba(0, 0, 0, .22);
        --material-sidebar: rgba(232, 232, 237, .72); --material-chrome: rgba(242, 242, 247, .74);
        --material-pop: rgba(252, 252, 254, .84); --material-edge: rgba(255, 255, 255, .7); --scrim: rgba(0, 0, 0, .22);
        --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 10px rgba(0, 0, 0, .035);
        --shadow-lift: 0 4px 12px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .08);
        --shadow-pop: 0 30px 80px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .08);
        color-scheme: light;
    }
}
:root[data-theme="light"] {
    --bg: #f2f2f7; --surface: #ffffff; --surface-2: #f5f5f7; --surface-3: #e8e8ed; --field: #ffffff;
    --fill: rgba(120, 120, 128, .12); --fill-strong: rgba(120, 120, 128, .2); --fill-weak: rgba(120, 120, 128, .07);
    --thumb: #ffffff; --thumb-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 0 0 .5px rgba(0, 0, 0, .04);
    --border: rgba(0, 0, 0, .07); --border-strong: rgba(0, 0, 0, .14);
    --text: #1d1d1f; --muted: #6e6e73; --faint: #8e8e93;
    --blue: #0071e3; --blue-hover: #0077ed; --orange: #b35c00; --orange-hover: #c46500;
    --accent-soft: rgba(0, 113, 227, .1); --accent-2: #0e7e98;
    --ok: #1e8237; --warn: #b35c00; --err: #d70015; --idle: #8e8e93;
    --glow: rgba(0, 113, 227, .05); --terminal-bg: #111114; --scroll-thumb: rgba(0, 0, 0, .22);
    --material-sidebar: rgba(232, 232, 237, .72); --material-chrome: rgba(242, 242, 247, .74);
    --material-pop: rgba(252, 252, 254, .84); --material-edge: rgba(255, 255, 255, .7); --scrim: rgba(0, 0, 0, .22);
    --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 10px rgba(0, 0, 0, .035);
    --shadow-lift: 0 4px 12px rgba(0, 0, 0, .06), 0 16px 40px rgba(0, 0, 0, .08);
    --shadow-pop: 0 30px 80px rgba(0, 0, 0, .18), 0 0 0 .5px rgba(0, 0, 0, .08);
    color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { scrollbar-color: var(--scroll-thumb) transparent; }
body { background: var(--bg); color: var(--text); font: var(--fs-base)/1.47 var(--font); letter-spacing: -.003em;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-optical-sizing: auto;
    -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
/* Tracking tightens and leading closes as type grows; small text gets a hair of extra space. */
h1 { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; font-weight: 650; margin: 0; letter-spacing: -.021em; }
h2 { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.3; font-weight: 600; margin: 0; letter-spacing: -.012em; }
code, pre, .mono { font-family: var(--mono); font-size: .78125rem; letter-spacing: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.hidden { display: none !important; }
.inline { display: inline; }
.nowrap { white-space: nowrap; }
svg.icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------- shell ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
    background: var(--material-sidebar); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
    border-right: 1px solid var(--border); overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar:hover { scrollbar-color: var(--scroll-thumb) transparent; }
.brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 14px; font-family: var(--font-display); font-weight: 650; font-size: var(--fs-md); color: var(--text); letter-spacing: -.015em; }
.brand:hover { color: var(--text); }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(160deg, var(--accent-2), var(--accent) 70%); display: grid; place-items: center; color: #fff;
    box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .28), 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent); }
.brand-mark svg.icon { width: 16px; height: 16px; stroke-width: 2.2; }
.brand small { display: block; font-family: var(--font); font-size: var(--fs-2xs); font-weight: 500; color: var(--muted); letter-spacing: .005em; margin-top: -1px; }
.sidebar nav { padding: 2px 10px 12px; flex: 1; }
/* Sentence-case section headers, as in macOS sidebars. */
.nav-label { padding: 16px 10px 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; color: var(--faint); }
.sidebar nav a { display: flex; align-items: center; gap: 9px; padding: 6px 10px; margin: 1px 0; border-radius: 8px; color: var(--text); font-weight: 450;
    transition: background-color .15s var(--ease), color .15s var(--ease), transform .45s var(--spring-bounce); }
.sidebar nav a svg.icon { color: var(--accent); }
.sidebar nav a:hover { background: var(--fill-weak); color: var(--text); }
.sidebar nav a:active { background: var(--fill); transform: scale(.98); transition-duration: .1s, .1s, .08s; transition-timing-function: ease-out; }
/* Selection: accent fill with white content, like System Settings. */
.sidebar nav a.active { background: var(--accent); color: var(--on-accent); font-weight: 550; }
.sidebar nav a.active svg.icon, .sidebar nav a.active .count { color: var(--on-accent); opacity: .9; }
.nav-badge { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: var(--fs-2xs); font-weight: 650; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.sidebar nav a.active .nav-badge { background: var(--on-accent); color: var(--accent); }
.nav-badge:empty { display: none; }
.nav-servers a { justify-content: space-between; }
.nav-servers .count { color: var(--faint); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.nav-empty { padding: 6px 10px; color: var(--faint); }
.sidebar-footer { margin: 10px; padding: 10px 8px 6px 10px; border-radius: 12px; background: var(--fill-weak); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 65%, #fff), var(--accent)); color: #fff;
    display: grid; place-items: center; font-weight: 650; font-size: var(--fs-ctl); text-transform: uppercase; flex-shrink: 0; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.who { flex: 1 1 calc(100% - 48px); min-width: 0; line-height: 1.3; }
.who .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.who .role { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0;
    transition: background-color .15s var(--ease), color .15s var(--ease), transform .45s var(--spring-bounce); }
.icon-btn:hover { background: var(--fill); color: var(--text); }
.icon-btn:active { background: var(--fill-strong); transform: scale(.9); transition-duration: .1s, .1s, .08s; transition-timing-function: ease-out; }
.sidebar-backdrop { display: none; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: radial-gradient(900px 420px at 15% -140px, var(--glow), transparent 70%); }
/* The top bar floats: transparent at the top of the page, a translucent material once content scrolls under it
   (scroll edge effect instead of a permanent divider). panel.js sets .scrolled. */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 14px 32px; min-height: 64px;
    background: transparent; border-bottom: 1px solid transparent; transition: background-color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.topbar.scrolled { background: var(--material-chrome); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    border-bottom-color: var(--border); box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .35); }
.topbar h1 { min-width: 0; flex-shrink: 0; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
.nav-toggle { display: none; }
.palette-btn { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 10px; border: 0; border-radius: var(--radius-sm);
    background: var(--fill-weak); color: var(--faint); font: inherit; font-size: var(--fs-ctl); cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease), transform .45s var(--spring-bounce); }
.palette-btn:hover { background: var(--fill); color: var(--muted); }
.palette-btn:active { transform: scale(.97); transition-duration: .1s, .1s, .08s; transition-timing-function: ease-out; }
.palette-btn svg.icon { width: 15px; height: 15px; }
kbd { white-space: nowrap; font-family: var(--font); font-size: var(--fs-2xs); font-weight: 500; padding: 1px 6px; border-radius: 5px; color: var(--muted);
    background: var(--surface); box-shadow: 0 0 0 .5px var(--border-strong), 0 1px 0 var(--border-strong); }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--faint); white-space: nowrap; }
/* A status, not progress: the dot stays still (no endless pulsing). */
.live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.live.lost .dot { background: var(--err); }
.content { padding: 20px 32px 56px; width: 100%; }

.status-bar { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 32px 0; padding: 10px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); font-size: var(--fs-ctl); box-shadow: var(--shadow); }
.status-bar .item { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.status-bar .warn { color: var(--warn); }
.conn-banner { margin: 12px 32px 0; padding: 10px 16px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--err) 35%, transparent); background: color-mix(in srgb, var(--err) 10%, var(--surface)); font-size: var(--fs-ctl); }
.progress { display: inline-block; width: 140px; height: 6px; background: var(--fill); border-radius: 99px; overflow: hidden; vertical-align: middle; }
.progress > span { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .5s var(--spring); }

/* ---------- buttons ----------
   Feedback on press (pointer-down), not on release; the release springs back. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: var(--radius-sm);
    background: var(--fill); color: var(--text); font: inherit; font-size: var(--fs-ctl); font-weight: 550; letter-spacing: -.005em; cursor: pointer; white-space: nowrap;
    transition: background-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), opacity .15s var(--ease), transform .45s var(--spring-bounce); }
.btn:hover:not(:disabled) { background: var(--fill-strong); color: var(--text); }
.btn:active:not(:disabled) { transform: scale(.96); transition-duration: .1s, .1s, .1s, .1s, .08s; transition-timing-function: ease-out; }
.btn:disabled { opacity: .38; cursor: default; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .22); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }
.btn-danger { color: var(--err); }
.btn-danger:hover:not(:disabled) { color: var(--err); background: color-mix(in srgb, var(--err) 14%, var(--fill)); }
.btn-danger-solid { background: var(--err); color: #fff; }
.btn-danger-solid:hover:not(:disabled) { background: color-mix(in srgb, var(--err) 88%, #000); color: #fff; }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--fill); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-sm); border-radius: 7px; }
.btn-icon { width: 32px; padding: 0; }
.btn-sm.btn-icon { width: 28px; }
.btn svg.icon { width: 16px; height: 16px; }
.btn-sm svg.icon { width: 14px; height: 14px; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }

/* ---------- cards ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 20px; box-shadow: var(--shadow); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; flex-wrap: wrap; }
.panel-head + .panel-body { padding-top: 12px; }
.panel-head > .grow { flex: 1 1 320px; min-width: 0; }
.panel-head + .table-wrap, .panel-head + table { margin-top: 12px; }
.panel-body { padding: 18px 20px 20px; }
.panel-desc { color: var(--muted); font-size: var(--fs-ctl); margin: 3px 0 0; line-height: 1.4; }
.fade-in { animation: rise var(--spring-dur) var(--spring) both; }

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
@media (max-width: 980px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px; box-shadow: var(--shadow); overflow: hidden; }
.stat .label { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.stat .label svg.icon { width: 15px; height: 15px; color: var(--faint); }
.stat .value { font-family: var(--font-display); font-size: var(--fs-3xl); line-height: 1.15; font-weight: 650; letter-spacing: -.024em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .value small { font-family: var(--font); font-size: var(--fs-base); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.stat .foot { font-size: var(--fs-xs); color: var(--faint); margin-top: 2px; min-height: 18px; }
.stat.alert-err .value { color: var(--err); }
a.stat { color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .45s var(--spring-bounce); }
a.stat:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-lift); color: var(--text); }
a.stat:active { transform: scale(.985); transition-duration: .2s, .2s, .08s; }

/* meters (CPU/RAM/disk/players): thin capsule, colour by level, value always written next to it */
.meter { height: 6px; border-radius: 99px; background: var(--fill); overflow: hidden; margin-top: 10px; }
.meter > span { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent); transition: width .7s var(--spring); }
.meter.lvl-warn > span { background: var(--warn); }
.meter.lvl-err > span { background: var(--err); }
.meter.thick { height: 8px; }

/* ---------- dashboard hero ---------- */
.hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 4px 0 22px; }
.hero-greet { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1.15; font-weight: 700; letter-spacing: -.024em; }
.hero-greet .wave { display: inline-block; transform-origin: 70% 70%; animation: wave 2.2s var(--ease) .4s 1; }
.hero-sub { color: var(--muted); margin-top: 4px; font-size: var(--fs-md); letter-spacing: -.008em; }
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-sub .ok { color: var(--ok); }
.hero-sub .bad { color: var(--err); }
.host-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.host-chip { display: flex; flex-direction: column; gap: 2px; min-width: 128px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--text);
    box-shadow: var(--shadow); transition: border-color .2s var(--ease), transform .45s var(--spring-bounce); }
.host-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.host-chip:active { transform: scale(.97); transition-duration: .2s, .08s; }
.host-chip .k { font-size: var(--fs-xs); color: var(--faint); display: flex; justify-content: space-between; gap: 8px; }
.host-chip .v { font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.host-chip .meter { margin-top: 4px; height: 4px; }

/* ---------- server cards ---------- */
.toolbar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar-row .grow { flex: 1; }
.chip-filter { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.chip-filter button { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 99px; border: 0; background: var(--fill-weak); color: var(--text);
    font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease), transform .45s var(--spring-bounce); }
.chip-filter button:hover { background: var(--fill); }
.chip-filter button:active { transform: scale(.95); transition-duration: .1s, .1s, .08s; }
.chip-filter button.active { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.chip-filter .n { opacity: .65; font-variant-numeric: tabular-nums; }
/* Columns are set by panel.js (fitCards) so the cards always fill the full width; this is the fallback. */
.server-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-bottom: 24px; }
.server-cards > .empty-state { grid-column: 1 / -1; }
.server-card { --map: var(--accent); position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
    transition: border-color .2s var(--ease), box-shadow .25s var(--ease); }
.server-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 110px; pointer-events: none;
    background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--map) 16%, transparent), transparent 70%); }
.server-card:hover { border-color: color-mix(in srgb, var(--map) 35%, var(--border)); box-shadow: var(--shadow-lift); }
.server-card.flash { animation: flash 1.4s var(--ease); }
.sc-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px 16px 10px; }
.monogram { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-ctl); letter-spacing: -.01em; flex-shrink: 0;
    color: var(--map); background: color-mix(in srgb, var(--map) 15%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--map) 26%, transparent); }
.sc-title { min-width: 0; flex: 1; }
.sc-title a { display: block; color: var(--text); font-family: var(--font-display); font-weight: 650; font-size: var(--fs-md); letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-title a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--map); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.sc-title .sub { color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-select { flex-shrink: 0; margin: 0 0 0 2px; opacity: .5; transition: opacity .15s var(--ease); }
.sc-select:checked, .sc-select:hover, .sc-select:focus-visible { opacity: 1; }
.sc-body { position: relative; padding: 4px 16px 12px; flex: 1; }
.sc-players { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.sc-players .big { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.022em; }
.sc-players .big small { font-family: var(--font); font-size: var(--fs-ctl); color: var(--muted); font-weight: 500; letter-spacing: 0; }
.sc-players .meter { flex: 1; max-width: 55%; margin-top: 0; }
.sc-players .meter > span { background: var(--map); }
.sc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.sc-facts div { padding: 7px 10px; border-radius: 9px; background: var(--fill-weak); min-width: 0; }
.sc-facts .k { font-size: var(--fs-2xs); color: var(--faint); letter-spacing: .01em; }
.sc-facts .v { font-weight: 600; font-size: var(--fs-ctl); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-msg { margin-top: 10px; font-size: var(--fs-sm); }
.sc-msg:empty { display: none; }
.server-card.is-off .sc-facts, .server-card.is-off .sc-players .meter { display: none; }
.server-card.is-off .monogram { filter: saturate(.4); opacity: .75; }
.sc-foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px 11px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.sc-foot .connect { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); min-width: 0; }
.sc-actions { display: flex; gap: 4px; margin-left: auto; }
.server-hero { --map: var(--accent); position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; flex-wrap: wrap;
    background: radial-gradient(90% 160% at 0% 0%, color-mix(in srgb, var(--map) 14%, transparent), transparent 70%), var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
[class*="map-"] .server-hero { --map: inherit; }
.server-hero .strong { font-family: var(--font-display); font-weight: 650; font-size: var(--fs-md); letter-spacing: -.012em; }
.server-hero .sc-title { flex: 1 1 220px; }
.server-hero .sc-title .sub { white-space: normal; }
.cluster-tag svg.icon { width: 12px; height: 12px; }
@media (max-width: 700px) { .connect-box { margin-left: 0; width: 100%; justify-content: space-between; } }
.connect-box { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; padding: 4px 4px 4px 12px; border-radius: var(--radius-sm); background: var(--fill-weak); font-size: var(--fs-ctl); }
.cluster-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--muted); padding: 1px 8px; border-radius: 99px; background: var(--fill-weak); margin-left: 6px; vertical-align: 1px; }
.empty-state { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty-state svg.icon { width: 34px; height: 34px; color: var(--faint); margin-bottom: 8px; stroke-width: 1.5; }
.empty-state .t { color: var(--text); font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); letter-spacing: -.015em; margin-bottom: 4px; }

/* ---------- segmented controls (ASA / ASE switch, tabs, view switch) ----------
   A neutral track with a raised thumb on the selected option. ASE mode wears a warm orange accent, so it is
   always clear which game the panel shows. */
.game-switch { display: flex; gap: 2px; margin: 0 14px 6px; padding: 2px; background: var(--fill); border-radius: 9px; }
.game-switch button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 4px 0; border-radius: 7px; font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    letter-spacing: .01em; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.game-switch button:hover { color: var(--text); }
.game-switch button.active { background: var(--thumb); color: var(--text); box-shadow: var(--thumb-shadow); }
body[data-game="ASE"] { --accent: var(--orange); --accent-hover: var(--orange-hover); --accent-soft: color-mix(in srgb, var(--orange) 16%, transparent);
    --glow: color-mix(in srgb, var(--orange) 8%, transparent); --accent-2: #ffcc00; }
/* Bright orange carries dark text in dark mode (white on it would be too weak). */
:root:not([data-theme="light"]) body[data-game="ASE"] { --on-accent: #1d1d1f; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body[data-game="ASE"] { --on-accent: #fff; } }
.game-tag { display: inline-block; font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .03em; padding: 1px 6px; border-radius: 5px; margin-right: 6px; vertical-align: 1px;
    color: var(--blue); background: color-mix(in srgb, var(--blue) 15%, transparent); }
.game-tag.game-ASE { color: var(--orange); background: color-mix(in srgb, var(--orange) 15%, transparent); }
.game-pick { background: var(--fill); }
.game-pick a { padding: 5px 14px; border-radius: 7px; color: var(--muted); font-weight: 500; }
.game-pick a.active { background: var(--thumb); color: var(--text); box-shadow: var(--thumb-shadow); }
.cluster-card-head .game-tag { margin-left: auto; }

/* map identity colours (decorative; the map name is always written too) */
.map-crystalisles { --map: #c77dde; }
.map-gen2 { --map: #5ad1b5; }
.map-lostisland { --map: #6fbf73; }
.map-fjordur { --map: #8fb7d9; }
.map-theisland { --map: #3fb37f; }
.map-scorchedearth { --map: #e09a3e; }
.map-thecenter { --map: #45b2c8; }
.map-aberration { --map: #a77bf0; }
.map-extinction { --map: #e5675f; }
.map-ragnarok { --map: #d6b23f; }
.map-astraeos { --map: #7b8cf5; }
.map-valguero { --map: #93c656; }
.map-lostcolony { --map: #e26fa8; }
.map-genesis { --map: #4fc3e8; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 10px 16px; text-align: left; vertical-align: middle; }
.grid th { font-size: var(--fs-sm); font-weight: 600; color: var(--muted); white-space: nowrap; border-bottom: 1px solid var(--border); letter-spacing: 0; }
.grid td { border-bottom: 1px solid var(--border); }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr { transition: background-color .12s var(--ease); }
.grid tbody tr:hover { background: var(--fill-weak); }
.grid td.num, .grid th.num { text-align: right; font-variant-numeric: tabular-nums; }
.grid td.actions { text-align: right; white-space: nowrap; }
.grid td.actions .btn, .grid td.actions form { margin-left: 4px; }
.grid .check { width: 36px; padding-right: 0; }
.grid .sub { color: var(--muted); font-size: var(--fs-sm); }
.grid a.strong { color: var(--text); font-weight: 600; }
.grid a.strong:hover { color: var(--accent); }
.grid .map-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--map, var(--idle)); margin-right: 8px; vertical-align: 1px; }
.grid td .switch { display: inline-block; vertical-align: middle; margin-top: 0; }
.grid td.num { white-space: nowrap; }
.form-actions .hint { align-self: center; margin: 0; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; margin: 0; }
dl.kv dt { color: var(--muted); }
dl.kv dd { margin: 0; word-break: break-word; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.two-col > .panel { margin-bottom: 0; }
.two-col + .panel, .two-col + .two-col, .two-col + .filter-row { margin-top: 20px; }
@media (max-width: 1100px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- status pills ---------- */
.status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 7px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; letter-spacing: .005em;
    background: color-mix(in srgb, var(--idle) 16%, transparent); color: color-mix(in srgb, var(--idle) 55%, var(--text)); }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--idle); flex-shrink: 0; }
.s-Online, .s-Succeeded, .s-done { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.s-Online .dot, .s-Succeeded .dot, .s-done .dot { background: var(--ok); }
.s-Starting, .s-Queued, .s-Stopping, .s-Running, .s-open { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.s-Starting .dot, .s-Queued .dot, .s-Stopping .dot, .s-Running .dot, .s-open .dot { background: var(--warn); }
/* Only things in motion pulse; a steady state stays still. */
.s-Starting .dot, .s-Stopping .dot, .s-Running .dot { animation: breathe 1.4s ease-in-out infinite; }
.s-Unresponsive, .s-Crashed, .s-Failed, .s-declined { background: color-mix(in srgb, var(--err) 15%, transparent); color: var(--err); }
.s-Unresponsive .dot, .s-Crashed .dot, .s-Failed .dot, .s-declined .dot { background: var(--err); }
.nav-servers .status { background: none; padding: 0; color: inherit; font-weight: inherit; font-size: var(--fs-base); letter-spacing: inherit; }
.sidebar nav a.active .status .dot { box-shadow: 0 0 0 1.5px var(--on-accent); }
.busy { color: var(--warn); font-size: var(--fs-xs); margin-left: 6px; }
.error-text { color: var(--err); font-size: var(--fs-sm); }
.error-text:empty, [data-field="external"]:empty { display: none; }
.role-badge { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: var(--fs-xs); font-weight: 600; background: var(--fill); color: var(--muted); }
.role-Admin { background: var(--accent-soft); color: var(--accent); }
.role-Viewer { background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); }

/* ---------- tabs (segmented) ---------- */
.tabs { display: inline-flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: 10px; margin-bottom: 20px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 5px 16px; color: var(--text); border-radius: 8px; font-weight: 500; white-space: nowrap; font-size: var(--fs-ctl);
    transition: background-color .2s var(--ease), box-shadow .2s var(--ease), transform .45s var(--spring-bounce); }
.tabs a:hover { color: var(--text); background: var(--fill-weak); }
.tabs a:active { transform: scale(.97); transition-duration: .1s, .1s, .08s; }
.tabs a.active { background: var(--thumb); color: var(--text); box-shadow: var(--thumb-shadow); font-weight: 600; }

/* ---------- console / log ---------- */
.terminal { background: var(--terminal-bg); color: #d1d1d6; border: 1px solid var(--border); border-radius: 11px; padding: 14px 16px; height: 480px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: .78125rem; line-height: 1.55; margin: 0; letter-spacing: 0; }
.terminal .cmd { color: #64b5ff; }
.terminal .err { color: #ff8a80; }
.code-line { background: var(--fill-weak); border-radius: var(--radius-sm); padding: 10px 12px; overflow-x: auto; margin: 10px 0; }
.console-input { display: flex; gap: 8px; margin-top: 12px; }
.console-input input { flex: 1; font-family: var(--mono); margin-top: 0; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* ---------- forms ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=time], input[type=search], select, textarea {
    display: block; width: 100%; height: 36px; margin-top: 6px; padding: 0 11px; background: var(--field); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; letter-spacing: inherit;
    transition: border-color .15s var(--ease), box-shadow .2s var(--ease); }
textarea { height: auto; min-height: 84px; padding: 10px 12px; font-family: var(--mono); font-size: .78125rem; resize: vertical; }
textarea.prose { font-family: var(--font); font-size: var(--fs-base); }
/* macOS-style focus ring: a soft accent halo around the field. */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
input[readonly] { color: var(--muted); background: var(--fill-weak); }
input::placeholder, textarea::placeholder { color: var(--faint); }
label { display: block; font-size: var(--fs-ctl); font-weight: 500; color: var(--text); }
label.check-label { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 36px; }
label.check-label input { margin: 0; }
.field-align { padding-top: 25px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 20px; align-items: start; }
.form-grid .wide { grid-column: 1 / -1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid transparent; border-radius: 99px; background: var(--fill-weak); cursor: pointer; font-weight: 500;
    transition: background-color .15s var(--ease), border-color .15s var(--ease); }
.chip:has(input:checked) { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); }
.chip input[type=radio] { accent-color: var(--accent); margin: 0; }
.grid .center { text-align: center; }
.mod-chips { margin-top: 0; }
.mod-chips .chip { color: var(--text); font-size: var(--fs-ctl); padding: 4px 12px; }
.mod-chips .chip:hover { background: var(--fill); }
.matrix td.mod-cell { min-width: 220px; }
.inline-input { height: 30px !important; margin-top: 0 !important; max-width: 260px; }
.inline-select { height: 30px; margin-top: 0; width: auto; min-width: 120px; padding: 0 8px; font-size: var(--fs-ctl); }
.cell-toggle { width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--fill-weak); color: var(--faint); font: inherit; font-weight: 700; cursor: pointer;
    transition: background-color .15s var(--ease), color .15s var(--ease), transform .45s var(--spring-bounce); }
.cell-toggle:hover { background: var(--fill); color: var(--text); }
.cell-toggle:active { transform: scale(.9); transition-duration: .1s, .1s, .08s; }
.cell-toggle.on { background: var(--accent); color: var(--on-accent); }
/* toggle switch for on/off settings */
.switch-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.switch-row:first-child { border-top: 0; padding-top: 0; }
.switch-row .txt { flex: 1; min-width: 0; }
.switch-row .t { font-weight: 600; display: flex; align-items: center; gap: 8px; }
.switch-row .d { color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
/* Switch: white knob with a springy throw; the knob stretches while pressed (like iOS), so the press is felt
   before the release. */
.switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: 99px; background: var(--fill-strong); transition: background-color .25s var(--ease); }
.switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 99px; background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .06); transition: transform .5s var(--spring-bounce), width .25s var(--spring); }
.switch input:active + span::after { width: 22px; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:checked:active + span::after { transform: translateX(12px); }
.switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 1px; }
.tag-critical { font-size: var(--fs-2xs); font-weight: 700; letter-spacing: .04em; color: var(--err); background: color-mix(in srgb, var(--err) 13%, transparent); padding: 1px 6px; border-radius: 5px; }
/* ---------- charts (single series, accent colour; validated contrast vs. both surfaces) ---------- */
.chart { position: relative; min-height: 190px; transition: opacity .2s var(--ease); }
.chart.small { min-height: 140px; }
.chart.loading { opacity: .55; }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { fill: var(--faint); font-size: 11px; font-family: var(--font); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-area { fill: var(--accent); opacity: .1; }
.chart-dot { fill: var(--accent); stroke: var(--surface); stroke-width: 2; }
.chart-cap { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-cap-label { fill: var(--faint); font-size: 10.5px; font-family: var(--font); }
.chart-cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-hit { fill: transparent; cursor: crosshair; outline: none; touch-action: pan-y; }
.chart-tip { position: absolute; top: 4px; min-width: 140px; padding: 8px 10px; background: var(--material-pop); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
    border-radius: 10px; box-shadow: var(--shadow-lift), 0 0 0 .5px var(--border-strong); pointer-events: none; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); z-index: 2; }
.chart-tip strong { font-size: var(--fs-md); color: var(--text); letter-spacing: -.01em; }
.chart-tip span { color: var(--muted); }
.chart-table { margin-top: 8px; font-size: var(--fs-sm); }
.chart-table summary { color: var(--muted); cursor: pointer; }
.chart-table table { margin-top: 8px; max-height: 240px; display: block; overflow-y: auto; }
.chart-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.chart-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.chart-grid-2 > .panel, .chart-grid-3 > .panel { margin-bottom: 0; }
.chart-grid-2 + *, .chart-grid-3 + * { margin-top: 20px; }
@media (max-width: 1200px) { .chart-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 1000px) { .chart-grid-2 { grid-template-columns: 1fr; } }
.segmented { display: inline-flex; gap: 2px; padding: 2px; background: var(--fill); border-radius: 9px; }
.segmented button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text); padding: 4px 12px; border-radius: 7px; font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
    transition: background-color .2s var(--ease), box-shadow .2s var(--ease); }
.segmented button:hover { background: var(--fill-weak); }
.segmented button.active { background: var(--thumb); color: var(--text); box-shadow: var(--thumb-shadow); font-weight: 600; }
.segmented button svg.icon { width: 15px; height: 15px; }
.filter-row { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
.filter-row h2 { font-size: var(--fs-lg); letter-spacing: -.016em; }
.search-input { width: 240px !important; margin-top: 0 !important; height: 32px !important; background: var(--fill-weak) !important; border-color: transparent !important; }
.search-input:focus { background: var(--field) !important; border-color: var(--accent) !important; }
.note-input { margin-top: 0; min-height: 110px; font-family: var(--font); font-size: var(--fs-base); }
/* horizontal bars: who uses CPU/RAM */
.bar-list { list-style: none; margin: 0; padding: 0; }
.bar-list li { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 84px; gap: 12px; align-items: center; padding: 7px 0; }
.bar-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.bar-list .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-ctl); }
.bar-list .track { height: 8px; border-radius: 99px; background: var(--fill); overflow: hidden; }
.bar-list .track span { display: block; height: 100%; border-radius: 99px; background: var(--map, var(--accent)); transition: width .7s var(--spring); }
.disk-list { display: grid; gap: 14px; }
.disk-row .top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.disk-row .name { font-weight: 600; }
.disk-row .name small { color: var(--faint); font-weight: 400; margin-left: 6px; }
.disk-row .num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: var(--fs-ctl); }
.disk-row .meter { margin-top: 6px; }
.health-list { list-style: none; margin: 0; padding: 0; }
.health-list li { display: grid; grid-template-columns: 110px 220px 1fr; gap: 16px; padding: 12px 20px; border-top: 1px solid var(--border); align-items: start; }
.health-list li:first-child { border-top: 0; }
.health-list .fix { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
.s-Ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); }
.s-Ok .dot { background: var(--ok); }
.s-Warn { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.s-Warn .dot { background: var(--warn); }
.s-Fail { background: color-mix(in srgb, var(--err) 15%, transparent); color: var(--err); }
.s-Fail .dot { background: var(--err); }
@media (max-width: 900px) { .health-list li { grid-template-columns: 1fr; gap: 4px; } }
.cluster-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; margin-bottom: 8px; }
a.cluster-card { display: block; color: var(--text); transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .45s var(--spring-bounce); }
a.cluster-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-lift); color: var(--text); }
a.cluster-card:active { transform: scale(.985); transition-duration: .2s, .2s, .08s; }
.cluster-card-head { display: flex; align-items: center; gap: 10px; }
.cluster-card-head svg.icon { color: var(--accent); }
.cluster-card .sub { color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; }
.cluster-card .chips { margin-top: 12px; }
.cluster-card .chip { cursor: default; font-size: var(--fs-sm); padding: 3px 10px; }
.search-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.search-bar .search-input { width: 320px !important; }
.search-bar.no-hit .search-input { border-color: var(--err) !important; }
.search-count { min-width: 70px; font-size: var(--fs-sm); }
.search-line { font-size: var(--fs-sm); }
textarea.ini-editor::selection { background: var(--warn); color: #000; }
.inline-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inline-actions .btn-sm { height: 24px; padding: 0 8px; }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.plain.subcard { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
fieldset.plain[disabled] input, fieldset.plain[disabled] select { opacity: .6; }
textarea.ini-editor { min-height: 560px; margin-top: 0; font-size: .78125rem; line-height: 1.55; white-space: pre; overflow: auto; tab-size: 4; }
.form-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.row-gap { margin-top: 18px; }
label.check-label.compact { min-height: 0; margin-top: 8px; }
@media (max-width: 700px) { .form-grid.cols-2, .form-grid.cols-3 { grid-template-columns: 1fr; } }
.form-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.hint { font-size: var(--fs-sm); color: var(--muted); margin-top: 5px; font-weight: 400; line-height: 1.4; }
.alert { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); margin-bottom: 20px; }
.alert-error { border-color: color-mix(in srgb, var(--err) 35%, transparent); background: color-mix(in srgb, var(--err) 9%, var(--surface)); }
.alert-ok { border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); }
.alert-warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
.panel .alert { margin-bottom: 16px; }
.secret-box { font-family: var(--mono); font-size: var(--fs-md); padding: 8px 12px; margin-top: 6px; background: var(--fill-weak); border: 1px dashed var(--warn); border-radius: var(--radius-sm); display: inline-block; user-select: all; word-break: break-all; }

.changes { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.changes li { margin: 3px 0; }
.req.current-release { border-left-color: var(--ok); }
.version-link { display: block; margin: 0 12px 4px; padding: 4px 10px; font-size: var(--fs-xs); color: var(--faint); border-radius: 6px; }
.version-link:hover { color: var(--accent); }
.login-version { text-align: center; color: var(--faint); font-size: var(--fs-xs); margin-top: 14px; }

/* ---------- requests ---------- */
.req-page { display: flex; flex-direction: column; gap: 22px; }
.req-page .filter-row { margin-top: 0; }
.req-page.ops-first .req-open { order: -1; }
.req-list { display: grid; gap: 12px; }
.req { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.req.open { border-left: 3px solid var(--warn); }
.req-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.req-head .what { font-weight: 650; letter-spacing: -.01em; }
.req-head .meta { color: var(--muted); font-size: var(--fs-sm); }
.req-head .status { margin-left: auto; }
.req-msg { margin-top: 8px; white-space: pre-wrap; word-break: break-word; }
.req-reply { margin-top: 10px; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--fill-weak); font-size: var(--fs-ctl); }
.req-reply .by { color: var(--muted); font-size: var(--fs-xs); }
.req-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.req-actions input { flex: 1; min-width: 180px; margin-top: 0; height: 32px; }

/* Settings-style pages: section menu on the left, cards on the right, save bar floating at the bottom. */
.settings-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 28px; align-items: start; }
.section-nav { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1px; }
.section-nav a { padding: 6px 12px; border-radius: 8px; color: var(--muted); font-weight: 500; transition: background-color .15s var(--ease), color .15s var(--ease); }
.section-nav a:hover { background: var(--fill-weak); color: var(--text); }
.section-nav a:active { background: var(--fill); }
.panel[id] { scroll-margin-top: 84px; }
.savebar { position: sticky; bottom: 12px; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 4px; padding: 12px 16px; flex-wrap: wrap;
    background: var(--material-chrome); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8);
    border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lift), inset 0 1px 0 var(--material-edge); }
.savebar .muted, .savebar .savebar-check { margin-right: auto; font-size: var(--fs-ctl); }
.savebar .savebar-check { margin-top: 0; }
.subcard { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border); }
.subcard h3 { font-family: var(--font-display); font-size: var(--fs-base); font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
@media (max-width: 1000px) { .settings-layout { grid-template-columns: minmax(0, 1fr); } .section-nav { display: none; } }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 16px;
    background: radial-gradient(700px 420px at 30% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
                radial-gradient(600px 380px at 85% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%), var(--bg); }
.login-box { width: 100%; max-width: 360px; background: var(--material-pop); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8);
    border-radius: 20px; padding: 30px; box-shadow: var(--shadow-pop), inset 0 1px 0 var(--material-edge); animation: materialize .6s var(--spring) both; }
.login-box .brand { padding: 0 0 6px; }
.login-box .sub { color: var(--muted); margin: 0 0 22px; }
.login-box label { margin-bottom: 14px; }
.login-box .btn { width: 100%; height: 38px; margin-top: 6px; font-size: var(--fs-base); }

/* ---------- dialog / toasts / palette ----------
   Dialogs are a material that arrives from the button that opened it and leaves the same way (panel.js sets
   --from-x/--from-y from the press). Enter springs in; exit is quicker. The scrim dims to focus. */
dialog { background: var(--material-pop); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8);
    color: var(--text); border: 0; border-radius: var(--radius-lg); padding: 22px; width: min(420px, calc(100vw - 32px));
    box-shadow: var(--shadow-pop), inset 0 1px 0 var(--material-edge);
    opacity: 0; transform: translate(var(--from-x, 0px), var(--from-y, 10px)) scale(.92);
    transition: opacity .18s var(--ease), transform .22s cubic-bezier(.4, 0, 1, 1), overlay .22s allow-discrete, display .22s allow-discrete; }
dialog[open] { opacity: 1; transform: none;
    transition: opacity .22s var(--ease), transform var(--spring-dur) var(--spring), overlay var(--spring-dur) allow-discrete, display var(--spring-dur) allow-discrete; }
@starting-style { dialog[open] { opacity: 0; transform: translate(var(--from-x, 0px), var(--from-y, 10px)) scale(.92); } }
dialog::backdrop { background: rgba(0, 0, 0, 0); transition: background-color .22s var(--ease), overlay .22s allow-discrete, display .22s allow-discrete; }
dialog[open]::backdrop { background: var(--scrim); }
@starting-style { dialog[open]::backdrop { background: rgba(0, 0, 0, 0); } }
dialog h2 { font-size: var(--fs-lg); letter-spacing: -.018em; margin-bottom: 6px; }
dialog p { white-space: pre-line; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 60; max-width: min(400px, calc(100vw - 32px)); }
.toast { display: flex; gap: 10px; align-items: flex-start; background: var(--material-pop); -webkit-backdrop-filter: blur(30px) saturate(1.8); backdrop-filter: blur(30px) saturate(1.8);
    border-radius: 14px; padding: 11px 8px 11px 13px; white-space: pre-line; box-shadow: var(--shadow-lift), 0 0 0 .5px var(--border-strong), inset 0 1px 0 var(--material-edge);
    animation: toastIn var(--spring-dur) var(--spring-bounce) backwards; touch-action: pan-y; cursor: grab; user-select: none; }
/* Once grabbed, the finger (panel.js) owns the position: the entry animation must never replay. */
.toast.grabbed { animation: none; }
.toast.dragging { cursor: grabbing; }
.toast .ic { color: var(--ok); margin-top: 1px; }
.toast.error .ic { color: var(--err); }
.toast .msg { flex: 1; min-width: 0; word-break: break-word; }
.toast .icon-btn { width: 24px; height: 24px; margin: -2px 0 0; }
.toast .icon-btn svg.icon { width: 14px; height: 14px; }
/* Leaves the way it came in: back down, fading. */
.toast.leaving { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .2s var(--ease), transform .25s var(--ease); }
#palette { padding: 0; width: min(560px, calc(100vw - 24px)); margin-top: 12vh; overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--border); }
.palette-input svg.icon { color: var(--faint); }
.palette-input input { border: 0; background: transparent; box-shadow: none !important; height: 52px; margin: 0; padding: 0; font-size: var(--fs-lg); letter-spacing: -.012em; }
.palette-list { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 60vh); overflow-y: auto; }
.palette-list li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.palette-list li .hint { margin: 0 0 0 auto; }
.palette-list li.sel { background: var(--accent); color: var(--on-accent); }
.palette-list li.sel .hint { color: var(--on-accent); opacity: .8; }
.palette-list .grp { padding: 10px 12px 4px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .01em; color: var(--faint); cursor: default; }
.palette-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--faint); }

/* ---------- motion ---------- */
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
/* Materialize: the surface arrives as a material (scale + blur resolving together), not as a plain fade. */
@keyframes materialize { from { opacity: 0; transform: scale(.97); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--map) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes wave { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-8deg); } 60% { transform: rotate(12deg); } 80% { transform: rotate(-4deg); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* Light/dark switch eases instead of flashing (panel.js adds the class for a moment). */
html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after {
    transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), fill .35s var(--ease), stroke .35s var(--ease) !important; }

/* ---------- Central's bar on proxied pages ---------- */
.central-bar { display: flex; align-items: center; gap: 14px; padding: 6px 16px; min-height: 34px; font-size: var(--fs-xs); background: var(--fill-weak); border-bottom: 1px solid var(--border); padding-top: max(6px, env(safe-area-inset-top)); }
.central-bar a { color: var(--accent); font-weight: 550; white-space: nowrap; }
.central-bar-panel { color: var(--muted); }
.central-bar-user { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }

/* ---------- tablet & phone ---------- */
@media (max-width: 900px) {
    /* The menu is a drawer. panel.js moves it with a spring and lets you drag it closed; these are its rest states. */
    .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; transform: translate3d(-102%, 0, 0); touch-action: pan-y; will-change: transform;
        padding-bottom: env(safe-area-inset-bottom); border-right: 0; }
    body.nav-open .sidebar { transform: none; box-shadow: var(--shadow-pop); }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 35; background: var(--scrim); opacity: 0; pointer-events: none; touch-action: none; }
    body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }
    .nav-toggle { display: inline-grid; margin-left: -6px; }
    .topbar { padding: 10px 16px; min-height: 56px; gap: 10px; flex-wrap: wrap; padding-top: max(10px, env(safe-area-inset-top)); }
    .topbar h1 { font-size: var(--fs-lg); letter-spacing: -.016em; flex: 1; }
    .topbar-actions { width: 100%; order: 3; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; width: calc(100% + 32px); scrollbar-width: none; }
    .topbar-actions:empty { display: none; }
    .topbar-actions::-webkit-scrollbar { display: none; }
    .palette-btn .label, .palette-btn kbd, .live .txt { display: none; }
    .palette-btn { width: 34px; padding: 0; justify-content: center; }
    .content { padding: 16px 16px calc(40px + env(safe-area-inset-bottom)); }
    .status-bar, .conn-banner { margin: 10px 16px 0; }
}
@media (max-width: 700px) {
    dl.kv { grid-template-columns: 1fr; gap: 2px 0; }
    dl.kv dd { margin-bottom: 10px; }
    .hero-greet { font-size: 1.3125rem; }
    .host-strip { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .host-chip { min-width: 0; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .stat { padding: 12px 14px; }
    .stat .value { font-size: 1.375rem; }
    .server-cards { grid-template-columns: 1fr; }
    /* phones: per-card buttons instead of multi-select, always the card view */
    [data-bulk], #bulk-count, .sc-select, .toolbar-row .segmented { display: none !important; }
    .topbar-actions:not(:has(> :not([data-bulk]):not(#bulk-count))) { display: none; }
    .toolbar-row .search-input { width: 100% !important; order: 5; }
    .grid th, .grid td { padding: 10px 12px; }
    .panel-head { padding: 14px 16px 0; }
    .panel-body { padding: 14px 16px 16px; }
    .bar-list li { grid-template-columns: 90px 1fr 70px; gap: 8px; }
    .toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
    dialog { padding: 20px; }
    .dialog-actions .btn { flex: 1; }
    .search-bar .search-input { width: 100% !important; }
    .terminal { height: 60vh; }
    .login-box { padding: 24px; }
    .savebar { bottom: calc(8px + env(safe-area-inset-bottom)); }
    /* 16px inputs stop iOS from zooming into fields */
    input[type=text], input[type=password], input[type=email], input[type=number], input[type=time], input[type=search], select, textarea { font-size: 16px; }
}
@media (pointer: coarse) {
    .btn { height: 40px; }
    .btn-sm { height: 34px; padding: 0 12px; }
    .btn-sm.btn-icon { width: 34px; }
    .sidebar nav a { padding: 10px 12px; }
    .icon-btn { width: 40px; height: 40px; }
    .chip-filter button { height: 34px; }
}

/* ---------- notifications page ---------- */
.btn-xs { height: 22px; padding: 0 8px; font-size: var(--fs-xs); margin-left: 8px; vertical-align: 1px; border-radius: 6px; }
.btn-xs svg.icon { width: 12px; height: 12px; }
.example-btn { opacity: .55; }
.switch-row:hover .example-btn, .example-btn:focus-visible { opacity: 1; }
.ok-text { color: var(--ok); }
.msg-cell { max-width: 520px; white-space: pre-line; font-size: var(--fs-sm); color: var(--muted); }

/* ---------- internet access / two-factor ---------- */
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.check-list li:first-child { border-top: 0; }
.check-list .mark { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2xs); font-weight: 700; margin-top: 1px; }
.check-list .mark.ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.check-list .mark.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.check-list .mark.fail { background: color-mix(in srgb, var(--err) 18%, transparent); color: var(--err); }
.check-list .t { font-weight: 600; }
.check-list .d { color: var(--muted); font-size: var(--fs-ctl); margin-top: 2px; }
.qr { display: block; width: 200px; height: 200px; border-radius: 12px; background: #fff; padding: 10px; image-rendering: pixelated; }
.secret-code { font-family: var(--mono); font-size: var(--fs-md); letter-spacing: .08em; word-break: break-all; }
.code-input { font-family: var(--mono); font-size: 22px !important; letter-spacing: .3em; text-align: center; height: 48px !important; }
.zone-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 99px; font-size: var(--fs-sm); font-weight: 600; background: var(--fill); color: var(--muted); }
.zone-badge.internet { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.zone-badge.lan { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.steps { margin: 0; padding-left: 20px; }
.steps li { margin: 6px 0; }
.warn-text { color: var(--warn); }

/* ---------- accessibility preferences ----------
   Reduced motion keeps feedback but swaps travel for cross-fades: no slides, springs or overshoot. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
    .btn:active, .icon-btn:active, .sidebar nav a:active, .palette-btn:active, .chip-filter button:active, .tabs a:active,
    a.stat:active, a.cluster-card:active, .host-chip:active, .cell-toggle:active { transform: none; }
    .switch span::after { transition: transform .15s var(--ease), background-color .15s; }
    .switch input:active + span::after { width: 18px; }
    .switch input:checked:active + span::after { transform: translateX(16px); }
    dialog, dialog[open] { transform: none; transition: opacity .2s var(--ease), overlay .2s allow-discrete, display .2s allow-discrete; }
    @starting-style { dialog[open] { transform: none; } }
    .toast { animation: fadeIn .2s var(--ease) both !important; animation-duration: .2s !important; }
    .toast.leaving { transform: none; }
    .login-box { animation: fadeIn .3s var(--ease) both !important; animation-duration: .3s !important; }
    .s-Starting .dot, .s-Stopping .dot, .s-Running .dot { animation: none; opacity: .6; }
    .hero-greet .wave { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 900px) {
    /* The drawer fades in place instead of sliding. */
    .sidebar, body.nav-open .sidebar { transform: none; }
    .sidebar { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility .2s; }
    body.nav-open .sidebar { opacity: 1; visibility: visible; }
    .sidebar-backdrop { transition: opacity .2s var(--ease); }
}
/* Reduced transparency: frosted surfaces become solid. */
@media (prefers-reduced-transparency: reduce) {
    :root:root { --material-sidebar: var(--surface); --material-chrome: var(--bg); --material-pop: var(--surface); }
    .sidebar, .topbar.scrolled, .savebar, dialog, .toast, .login-box, .chart-tip { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* More contrast: solid materials, defined borders, stronger secondary text. */
@media (prefers-contrast: more) {
    :root:root:root {
        --border: color-mix(in srgb, var(--text) 30%, transparent); --border-strong: color-mix(in srgb, var(--text) 50%, transparent);
        --muted: color-mix(in srgb, var(--text) 82%, var(--bg)); --faint: color-mix(in srgb, var(--text) 66%, var(--bg));
        --material-sidebar: var(--surface); --material-chrome: var(--bg); --material-pop: var(--surface);
    }
    .sidebar, .topbar.scrolled, .savebar, dialog, .toast, .login-box, .chart-tip { -webkit-backdrop-filter: none; backdrop-filter: none; }
    dialog, .toast, .login-box { border: 1px solid var(--border-strong); }
    .btn, .chip-filter button, .segmented, .tabs, .game-switch { box-shadow: inset 0 0 0 1px var(--border); }
}