/* ══════════════════════════════════════════════════════════════════════════
   Mireda Panel — design tokens and components.

   Both themes are first-class.  Dark is the default because customers live in
   the console; light is a real design, not an inversion.  The console well
   stays dark in BOTH themes — a terminal that goes white reads as a bug.
   ══════════════════════════════════════════════════════════════════════════ */

/* Optional local fonts.  If they are not present the stack falls through to
   system-ui, which is why no @import or CDN link appears here — the CSP
   allows no third-party origins.  deploy/fetch-fonts.sh populates these. */
@font-face {
  font-family: 'InterLocal';
  src: url('/assets/fonts/inter-variable.woff2') format('woff2');
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: 'JetBrainsMonoLocal';
  src: url('/assets/fonts/jetbrains-mono-variable.woff2') format('woff2');
  font-weight: 100 800; font-display: swap;
}

:root {
  --sans: 'InterLocal', Inter, system-ui, -apple-system, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrainsMonoLocal', 'JetBrains Mono', ui-monospace, 'SF Mono',
          'Cascadia Mono', Menlo, Consolas, monospace;

  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --row-h: 36px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ── dark (default) ───────────────────────────────────────────────────── */
:root,
:root[data-theme='dark'] {
  --app-bg:        #0d0f19;
  --nav-bg:        #101220;
  --card:          #131624;
  --raised:        #171a29;
  --sunken:        #1c1e2e;
  --inset:         #07080e;
  --border:        #282b3a;
  --border-2:      #33364a;
  --border-soft:   #1c1f2d;

  --text:          #e9e9ed;
  --text-2:        #b2b6ca;
  --text-3:        #8a8fa3;
  --text-4:        #75798c;
  --text-5:        #5c6072;
  --text-6:        #4b4f61;

  --accent:        #9184d9;
  --accent-lo:     #b5abfc;
  --accent-hi:     #d2cefd;
  --accent-bg:     #231f3d;
  --accent-bg-2:   #1e1b31;
  --accent-br:     #4a4392;
  --accent-br-2:   #3a3560;

  --ok:            #3fb950;
  --ok-text:       #5fd67a;
  --ok-bg:         #0f2c17;
  --ok-br:         #1c5c2c;

  --warn:          #d29922;
  --warn-text:     #e3b341;
  --warn-bg:       #2b2213;
  --warn-br:       #5c4718;

  --orange:        #db6d28;
  --orange-text:   #f0883e;
  --orange-bg:     #2b1d11;
  --orange-br:     #5c3a18;

  --bad:           #f0524d;
  --bad-text:      #ff8a85;
  --bad-soft:      #e9a8a5;
  --bad-bg:        #241b20;
  --bad-br:        #4a2725;
  --bad-br-2:      #5c2422;

  --shadow:        0 6px 18px rgba(0,0,0,.55);
  --shadow-lg:     0 24px 60px rgba(0,0,0,.6);
  --track:         #242737;
}

/* ── light ────────────────────────────────────────────────────────────── */
:root[data-theme='light'] {
  --app-bg:        #f7f8fb;
  --nav-bg:        #ffffff;
  --card:          #ffffff;
  --raised:        #f7f8fb;
  --sunken:        #f0eefb;
  --inset:         #07080e;      /* the console stays dark on purpose */
  --border:        #e4e7f5;
  --border-2:      #d8dbe8;
  --border-soft:   #eceef7;

  --text:          #1b1d26;
  --text-2:        #40445a;
  --text-3:        #62667c;
  --text-4:        #75798c;
  --text-5:        #8b90a3;
  --text-6:        #a8adbf;

  --accent:        #796cbf;
  --accent-lo:     #5d5294;
  --accent-hi:     #423a6a;
  --accent-bg:     #f0eefb;
  --accent-bg-2:   #f5f4ff;
  --accent-br:     #c9c2f0;
  --accent-br-2:   #ded9f8;

  --ok:            #1a7f37;
  --ok-text:       #1a7f37;
  --ok-bg:         #e8f5eb;
  --ok-br:         #acd9b6;

  --warn:          #9a6700;
  --warn-text:     #9a6700;
  --warn-bg:       #fdf5e2;
  --warn-br:       #ecd8a4;

  --orange:        #bc4c00;
  --orange-text:   #bc4c00;
  --orange-bg:     #fdf0e6;
  --orange-br:     #f0c9a8;

  --bad:           #d1332e;
  --bad-text:      #b02622;
  --bad-soft:      #b02622;
  --bad-bg:        #fdeceb;
  --bad-br:        #f2c2c0;
  --bad-br-2:      #e8a5a2;

  --shadow:        0 6px 18px rgba(27,29,38,.08);
  --shadow-lg:     0 24px 60px rgba(27,29,38,.14);
  --track:         #e4e7f5;
}

/* ══ reset ═════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--app-bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: var(--accent-lo); text-decoration: none; }
a:hover { color: var(--accent-hi); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.02em; }
p { margin: 0; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted  { color: var(--text-3); }
.dim    { color: var(--text-4); }
.faint  { color: var(--text-5); }
.tnum   { font-variant-numeric: tabular-nums; }
.trunc  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row    { display: flex; align-items: center; gap: 8px; }
.col    { display: flex; flex-direction: column; }
.spacer { margin-left: auto; }
.hidden { display: none !important; }

/* thin scrollbars that read as part of the surface */
* { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 6px;
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-clip: content-box; background-color: var(--text-6); }

/* ══ shell ═════════════════════════════════════════════════════════════ */

#app { display: flex; height: 100vh; overflow: hidden; }

.nav {
  width: 236px; flex: none; height: 100%;
  display: flex; flex-direction: column;
  background: var(--nav-bg);
  border-right: 1px solid var(--border);
}
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 14px;
  border-bottom: 1px solid var(--border); margin-bottom: 12px;
}
.nav-mark {
  width: 22px; height: 22px; border: 1.5px solid currentColor;
  border-radius: 3px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; letter-spacing: -.04em;
}
.nav-word { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.nav-tier {
  margin-left: auto; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; padding: 2px 5px; border-radius: 3px;
  border: 1px solid var(--accent); color: var(--accent);
}
.nav-tier.owner { border-color: var(--orange); color: var(--orange-text); }

.nav-context {
  margin: 0 8px; padding: 10px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--raised); cursor: pointer;
}
.nav-context:hover { border-color: var(--border-2); }
.nav-context .title { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.nav-context .meta {
  font-family: var(--mono); font-size: 10.5px; opacity: .62; margin-top: 4px;
}
.nav-context .switch {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
  font-size: 11px; color: var(--text-3);
}

.nav-items { display: flex; flex-direction: column; gap: 1px; padding: 10px 8px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 9px;
  height: 31px; padding: 0 9px; border-radius: var(--r);
  font-size: 13px; color: var(--text-3); text-align: left; width: 100%;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.nav-item:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text-2); }
.nav-item.active {
  background: var(--sunken); color: var(--text); font-weight: 500;
  box-shadow: inset 2px 0 0 var(--accent);
}
:root[data-theme='light'] .nav-item.active { color: var(--accent-hi); }
.nav-item .badge {
  margin-left: auto; font-family: var(--mono); font-size: 10px;
  color: var(--text-4); opacity: .8;
}
.nav-foot {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--border);
}
.avatar {
  width: 24px; height: 24px; border-radius: 999px; flex: none;
  background: linear-gradient(140deg, var(--accent), var(--accent-lo));
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #0f1117;
}

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: 52px; flex: none; display: flex; align-items: center; gap: 14px;
  padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--nav-bg);
}
.crumb { font-size: 13px; color: var(--text-3); }
.crumb.cur { color: var(--text); font-weight: 500; }

.searchbox {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--r);
  color: var(--text-4); font-size: 12px; width: 230px; cursor: pointer;
}
.searchbox:hover { border-color: var(--border-2); }
.kbd {
  font-family: var(--mono); font-size: 10px; border: 1px solid var(--border-2);
  border-radius: 3px; padding: 0 4px; color: var(--text-4);
}

.seg { display: flex; height: 30px; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.seg button { display: flex; align-items: center; padding: 0 9px; color: var(--text-5); }
.seg button.on { background: var(--sunken); color: var(--text); }
:root[data-theme='light'] .seg button.on { color: var(--accent-lo); }

.iconbtn {
  display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border: 1px solid var(--border); border-radius: var(--r); color: var(--text-2);
  position: relative;
}
.iconbtn:hover { border-color: var(--border-2); background: color-mix(in srgb, var(--text) 5%, transparent); }
.iconbtn .dot {
  position: absolute; top: 5px; right: 6px; width: 5px; height: 5px;
  border-radius: 999px; background: var(--bad);
}

.content { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 40px; }
.content.flush { padding: 0; display: flex; flex-direction: column; }

/* ══ buttons ═══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: var(--r);
  border: 1px solid var(--border); background: transparent;
  color: var(--text-2); font-size: 12.5px; font-weight: 500;
  white-space: nowrap; transition: all .12s var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--border-2); color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn.lg { height: 34px; padding: 0 13px; font-size: 13px; }
.btn.sm { height: 26px; padding: 0 9px; font-size: 11.5px; }
.btn.primary {
  border-color: var(--accent-br); background: var(--accent-bg); color: var(--accent-hi);
}
.btn.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 26%, var(--accent-bg)); }
.btn.danger { border-color: var(--bad-br); color: var(--bad); }
.btn.danger:hover:not(:disabled) { background: var(--bad-bg); color: var(--bad-text); }
.btn.danger.solid { background: var(--bad-bg); color: var(--bad-soft); }
.btn.ok { border-color: var(--ok-br); background: var(--ok-bg); color: var(--ok-text); }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover:not(:disabled) { border-color: var(--border); }
.btn.icon { width: 32px; padding: 0; }
.btn.icon.sm { width: 26px; }
.btn.block { width: 100%; }

.divider-v { width: 1px; height: 22px; background: var(--border); margin: 0 3px; }

/* ══ inputs ════════════════════════════════════════════════════════════ */

.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12px; color: var(--text-3); }
.field .hint { font-size: 11.5px; color: var(--text-4); }
.input, .select, .textarea {
  width: 100%; min-height: 32px; padding: 6px 10px;
  background: var(--card); color: var(--text); font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--r);
  caret-color: var(--accent); transition: border-color .12s var(--ease);
}
.input::placeholder { color: var(--text-5); }
.input:hover, .select:hover { border-color: var(--border-2); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.textarea { min-height: 84px; resize: vertical; font-family: var(--mono); font-size: 12.5px; }
.input.mono { font-family: var(--mono); }
.select { appearance: none; padding-right: 26px; cursor: pointer; }

.searchinput { position: relative; }
.searchinput .input { padding-left: 30px; }
.searchinput svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); color: var(--text-5); }

.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check .box {
  width: 16px; height: 16px; flex: none; border-radius: var(--r-sm);
  border: 1.5px solid var(--border-2); display: grid; place-items: center;
  transition: all .12s var(--ease);
}
.check input:checked + .box { background: var(--accent); border-color: var(--accent); }
.check input:checked + .box::after {
  content: ''; width: 4px; height: 8px; margin-top: -2px;
  border: solid #0f1117; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.check input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px; }

.toggle {
  width: 34px; height: 19px; border-radius: 999px; flex: none;
  background: var(--track); border: 1px solid var(--border-2);
  position: relative; transition: all .16s var(--ease); cursor: pointer;
}
.toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 999px; background: var(--text-4);
  transition: all .16s var(--ease);
}
.toggle.on { background: var(--accent-bg); border-color: var(--accent); }
.toggle.on::after { left: 16px; background: var(--accent); }
.toggle:disabled { opacity: .4; cursor: not-allowed; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px;
  border: 1px solid var(--border); border-radius: var(--r); font-size: 11.5px;
  color: var(--text-3); cursor: pointer; transition: all .12s var(--ease);
}
.chip:hover { border-color: var(--border-2); color: var(--text-2); }
.chip.on { border-color: var(--accent-br); background: var(--accent-bg); color: var(--accent-hi); }

/* ══ status ════════════════════════════════════════════════════════════ */

.dot { width: 7px; height: 7px; border-radius: 999px; flex: none; display: inline-block; }
.dot.online    { background: var(--ok);     box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.dot.starting,
.dot.stopping,
.dot.installing{ background: var(--warn);   animation: pulse 1.6s infinite; }
.dot.offline   { background: var(--text-4); }
.dot.suspended { background: var(--orange); }
.dot.crashed   { background: var(--bad);    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 22%, transparent); }

@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes crawl { 0% { transform: translateX(-100%) } 100% { transform: translateX(340%) } }
@keyframes spin  { to { transform: rotate(360deg) } }
@keyframes shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px;
  border-radius: 999px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .08em; border: 1px solid transparent; white-space: nowrap;
}
.pill.online    { background: var(--ok-bg);     border-color: var(--ok-br);     color: var(--ok-text); }
.pill.starting,
.pill.stopping,
.pill.installing{ background: var(--warn-bg);   border-color: var(--warn-br);   color: var(--warn-text); }
.pill.offline   { background: var(--raised);    border-color: var(--border);    color: var(--text-4); }
.pill.suspended { background: var(--orange-bg); border-color: var(--orange-br); color: var(--orange-text); }
.pill.crashed   { background: var(--bad-bg);    border-color: var(--bad-br);    color: var(--bad-text); }
.pill.accent    { background: var(--accent-bg); border-color: var(--accent-br); color: var(--accent-hi); }

.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px;
  border-radius: var(--r-sm); font-size: 10.5px; border: 1px solid var(--border);
  color: var(--text-3); white-space: nowrap;
}
.tag.mono { font-family: var(--mono); }
.tag.accent { border-color: var(--accent-br-2); background: var(--accent-bg-2); color: var(--accent-lo); }
.tag.ok     { border-color: var(--ok-br); background: var(--ok-bg); color: var(--ok-text); }
.tag.bad    { border-color: var(--bad-br); background: var(--bad-bg); color: var(--bad-text); }
.tag.warn   { border-color: var(--warn-br); background: var(--warn-bg); color: var(--warn-text); }

/* ══ cards, sections ═══════════════════════════════════════════════════ */

.card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); overflow: hidden;
}
.card-head {
  height: 38px; flex: none; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; border-bottom: 1px solid var(--border);
}
.card-head h3 { font-size: 12.5px; font-weight: 500; letter-spacing: 0; }
.card-body { padding: 12px; }

.page-head { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.page-head h1 { font-size: 26px; letter-spacing: -.025em; }
.page-head h2 { font-size: 19px; letter-spacing: -.02em; }
.meta-line {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-3); flex-wrap: wrap;
}
.meta-line .sep { color: var(--border-2); }
.meta-line b { color: var(--text); font-weight: 500; }

.section-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-5); margin-bottom: 8px;
}

/* ══ metric tiles ══════════════════════════════════════════════════════ */

.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.metric {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); padding: 11px 12px 9px;
}
.metric .k {
  font-size: 10.5px; letter-spacing: .1em; color: var(--text-4); text-transform: uppercase;
}
.metric .v {
  font-family: var(--mono); font-size: 21px; font-weight: 500;
  letter-spacing: -.02em; margin-top: 5px;
}
.metric .v small { font-size: 12px; color: var(--text-4); margin-left: 3px; font-weight: 400; }
.metric .spark { margin-top: 6px; height: 26px; }
.delta { font-family: var(--mono); font-size: 10.5px; }
.delta.up { color: var(--ok-text); }
.delta.down { color: var(--bad-text); }

/* ══ tables ════════════════════════════════════════════════════════════ */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .1em; color: var(--text-5); text-transform: uppercase;
  padding: 0 12px; height: 32px; background: var(--raised);
  border-bottom: 1px solid var(--border); font-weight: 400; white-space: nowrap;
}
.table tbody td {
  padding: 0 12px; height: var(--row-h);
  border-bottom: 1px solid var(--border-soft); vertical-align: middle;
}
.table tbody tr:hover { background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.table .actions { text-align: right; white-space: nowrap; }
.table .actions .btn { margin-left: 5px; }
.table tr.clickable { cursor: pointer; }

.bar { height: 4px; border-radius: 2px; background: var(--track); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.bar > i.ok { background: var(--ok); }
.bar > i.warn { background: var(--warn); }
.bar > i.bad { background: var(--bad); }

/* ══ tabs ══════════════════════════════════════════════════════════════ */

.tabs { display: flex; align-items: center; gap: 18px; height: 100%; }
.tab {
  display: flex; align-items: center; gap: 6px; height: 100%;
  font-size: 13px; color: var(--text-3); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-2); }
.tab.on { color: var(--text); border-bottom-color: var(--accent); }
.tab .n { font-family: var(--mono); font-size: 10px; color: var(--text-5); }

/* ══ pagination ════════════════════════════════════════════════════════ */

.pager .chip { height: 26px; padding: 0 9px; font-size: 11.5px; }
.pager .chip[disabled] { opacity: .4; cursor: not-allowed; }
.pager .select { height: 26px; padding: 0 22px 0 8px; font-size: 11.5px; }

/* ══ overview split ════════════════════════════════════════════════════
   The console/players row on the server overview.

   This needs a DEFINITE height, and getting that wrong is what made the
   console scroll for ever.  `.content` is a block-level scroll container,
   not a flex column, so `flex: 1` on this row resolves against nothing and
   the row simply grows to fit its content.  With a console that appends a
   line every time the server says anything, "fit its content" means the
   page itself grows without limit and `.console-body`'s own `overflow-y:
   auto` never engages, because it is never the thing that runs out of room.

   A height here is what gives the console and the player list something to
   scroll inside. */
.overview-split {
  display: flex; gap: 14px; margin-top: 16px;
  height: clamp(380px, 56vh, 760px);
}
.overview-split > .console { flex: 1; min-width: 0; }
.overview-split > .overview-side {
  width: 306px; flex: none; display: flex; flex-direction: column;
  overflow: hidden;
}

/* ══ console ═══════════════════════════════════════════════════════════ */

.console { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.console-body {
  position: relative; flex: 1; min-height: 0; background: var(--inset);
  padding: 10px 12px; overflow-y: auto;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  color: #c9d1d9;
}
.cline { display: flex; gap: 10px; white-space: pre-wrap; word-break: break-word; }
.cline .ts { color: #4b4f61; flex: none; }
.cline .tx { flex: 1; }
.cline.sm     .tx { color: #7ee787; }
.cline.err    .tx { color: #ff8a85; }
.cline.warn   .tx { color: #e3b341; }
.cline.conn   .tx { color: #79c0ff; }
.cline.mireda .tx { color: #b5abfc; }
.cline.echo   .tx { color: #8a8fa3; }
.cline.you    .tx { color: #d2cefd; }

.jump {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px;
  border-radius: 999px; background: var(--accent-bg-2); border: 1px solid var(--accent-br);
  color: var(--accent-hi); font-family: var(--sans); font-size: 11.5px;
  box-shadow: var(--shadow); cursor: pointer;
}

.console-input {
  flex: none; display: flex; align-items: center; gap: 9px; height: 40px;
  padding: 0 12px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--inset) 70%, var(--card));
  font-family: var(--mono); font-size: 12px;
}
.console-input .prompt { color: var(--accent); font-weight: 700; }
.console-input input {
  flex: 1; background: none; border: 0; outline: none;
  font-family: var(--mono); font-size: 12px; color: var(--text);
}
:root[data-theme='light'] .console-input { color: #e9e9ed; }
:root[data-theme='light'] .console-input input { color: #e9e9ed; }

/* ══ player rail ═══════════════════════════════════════════════════════ */

.prow {
  display: flex; align-items: center; gap: 8px; height: var(--row-h);
  padding: 0 12px; border-bottom: 1px solid var(--border-soft);
}
.prow:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.pavatar {
  width: 22px; height: 22px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center; font-size: 9px; font-weight: 700;
}
.pavatar.t  { background: #3a2418; color: #f0883e; }
.pavatar.ct { background: #16283f; color: #79c0ff; }
.pavatar.spec { background: var(--raised); color: var(--text-4); }
.ping.good { color: var(--ok-text); }
.ping.mid  { color: var(--warn-text); }
.ping.bad  { color: var(--bad-text); }

/* ══ modal / toast ═════════════════════════════════════════════════════ */

.backdrop {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 24px; background: rgba(4,5,10,.62); backdrop-filter: blur(2px);
}
.modal {
  width: min(560px, 100%); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal.wide { width: min(860px, 100%); }
.modal-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 16px; }
.modal-body { padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--raised);
}
.danger-zone {
  border: 1px solid var(--bad-br-2); background: color-mix(in srgb, var(--bad) 6%, transparent);
  border-radius: var(--r-md); padding: 12px;
}

.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column-reverse; gap: 8px; max-width: 380px;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--border-2); border-radius: var(--r-md);
  background: var(--card); box-shadow: var(--shadow-lg); font-size: 13px;
  animation: toastin .2s var(--ease);
}
@keyframes toastin { from { opacity: 0; transform: translateY(8px) } }
.toast.ok   { border-color: var(--ok-br); }
.toast.bad  { border-color: var(--bad-br-2); }
.toast .t { font-weight: 500; }
.toast .d { color: var(--text-3); font-size: 12px; margin-top: 2px; }

/* ══ banners ═══════════════════════════════════════════════════════════ */

.banner {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); font-size: 13px;
}
.banner.bad  { border-color: var(--bad-br-2); background: color-mix(in srgb, var(--bad) 6%, transparent); }
.banner.warn { border-color: var(--warn-br); background: color-mix(in srgb, var(--warn) 7%, transparent); }
.banner.info { border-color: var(--accent-br-2); background: var(--accent-bg-2); }
.banner .grow { flex: 1; }
.banner .sub { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

.impersonation {
  flex: none; display: flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 16px; font-size: 12.5px;
  background: var(--orange); color: #150c05; font-weight: 500;
}
.impersonation button { color: #150c05; text-decoration: underline; font-weight: 600; }

/* ══ empty / loading / error ═══════════════════════════════════════════ */

.state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 44px 40px; min-height: 210px;
}
.state .glyph {
  width: 38px; height: 38px; border-radius: var(--r-md); display: grid; place-items: center;
  border: 1px solid var(--border-2); color: var(--accent);
}
.state.bad .glyph { border-color: var(--bad-br-2); color: var(--bad); }
.state h3 { font-size: 15px; }
.state p { font-size: 12.5px; color: var(--text-3); max-width: 380px; text-wrap: pretty; }
.state .code { font-family: var(--mono); font-size: 10.5px; color: var(--text-5); }

.skel {
  border-radius: 3px;
  background: linear-gradient(90deg, var(--track) 25%, color-mix(in srgb, var(--track) 55%, var(--text-6)) 50%, var(--track) 75%);
  background-size: 400px 100%; animation: shimmer 1.3s infinite linear;
}
.skel-row {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 14px;
  border-bottom: 1px solid var(--border-soft);
}

.spinner {
  width: 14px; height: 14px; border-radius: 999px; flex: none;
  border: 2px solid var(--border-2); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

/* ══ progress (long-running jobs) ══════════════════════════════════════ */

.job-steps { display: flex; flex-direction: column; gap: 0; }
.job-step {
  display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-soft);
  font-size: 12.5px;
}
.job-step:last-child { border-bottom: 0; }
.job-step .mark { width: 16px; flex: none; display: grid; place-items: center; padding-top: 2px; }
.job-step .st { font-weight: 500; }
.job-step .sd { color: var(--text-3); font-size: 11.5px; font-family: var(--mono); margin-top: 2px; word-break: break-word; }
.progress { height: 5px; border-radius: 3px; background: var(--track); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--accent); transition: width .3s var(--ease); }
.progress.indeterminate > i { width: 30%; animation: crawl 1.3s infinite ease-in-out; }

/* ══ grids ═════════════════════════════════════════════════════════════ */

.grid { display: grid; gap: 12px; }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid.c4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.mode-tile {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card);
  overflow: hidden; cursor: pointer; transition: all .14s var(--ease); text-align: left;
}
.mode-tile:hover { border-color: var(--border-2); transform: translateY(-1px); box-shadow: var(--shadow); }
.mode-tile.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mode-art {
  height: 74px; display: grid; place-items: center; position: relative;
  border-bottom: 1px solid var(--border);
}
.mode-art::after {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px);
}
.mode-body { padding: 10px 12px 12px; }
.mode-body .n { font-size: 13.5px; font-weight: 600; }
.mode-body .b { font-size: 11.5px; color: var(--text-3); margin-top: 4px; text-wrap: pretty; }

.store-card {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card);
  padding: 13px; display: flex; flex-direction: column; gap: 9px; text-align: left;
  transition: all .14s var(--ease);
}
.store-card:hover { border-color: var(--border-2); box-shadow: var(--shadow); }
.store-icon {
  width: 34px; height: 34px; border-radius: var(--r); display: grid; place-items: center;
  background: var(--accent-bg-2); color: var(--accent-lo); border: 1px solid var(--accent-br-2);
}

/* ══ file manager / editor ═════════════════════════════════════════════ */

.fm { display: flex; gap: 12px; min-height: 0; flex: 1; }
.fm-tree { width: 220px; flex: none; overflow-y: auto; }
.fm-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }
.crumbs button { color: var(--text-3); }
.crumbs button:hover { color: var(--accent-lo); }
.crumbs .sep { color: var(--text-6); }

.editor { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.editor-body { flex: 1; min-height: 0; display: flex; background: var(--inset); overflow: auto; }
.gutter {
  flex: none; padding: 10px 8px; text-align: right; user-select: none;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
  color: #3b3f52; background: rgba(255,255,255,.02); border-right: 1px solid #1a1d2b;
}
.editor-body textarea {
  flex: 1; padding: 10px 12px; background: none; border: 0; outline: none; resize: none;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.6; color: #c9d1d9;
  white-space: pre; overflow-wrap: normal; tab-size: 4;
}
.unsaved { width: 7px; height: 7px; border-radius: 999px; background: var(--warn); flex: none; }

/* ══ auth ══════════════════════════════════════════════════════════════ */

.auth {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--app-bg);
}
.auth-art {
  position: relative; overflow: hidden; padding: 48px;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(900px 500px at 18% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    linear-gradient(160deg, var(--nav-bg), var(--app-bg));
  border-right: 1px solid var(--border);
}
.auth-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(800px 600px at 30% 30%, #000, transparent 75%);
}
.auth-form { display: grid; place-items: center; padding: 40px; }
.auth-form .inner { width: min(360px, 100%); display: flex; flex-direction: column; gap: 16px; }
.auth-console {
  position: relative; z-index: 1; margin-top: 24px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--inset); padding: 12px;
  font-family: var(--mono); font-size: 11px; line-height: 1.7; color: #8b93a7;
  max-width: 420px;
}
@media (max-width: 900px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
}

/* ══ mobile ════════════════════════════════════════════════════════════ */

.mobile-bar { display: none; }
.nav-scrim { display: none; }

@media (max-width: 860px) {
  .nav {
    position: fixed; z-index: 80; left: 0; top: 0; bottom: 0;
    transform: translateX(-100%); transition: transform .2s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .nav.open { transform: none; }
  .nav-scrim.show { display: block; position: fixed; inset: 0; z-index: 70; background: rgba(4,5,10,.55); }
  .mobile-bar { display: flex; }
  .topbar { padding: 0 12px; gap: 10px; }
  .topbar .searchbox, .topbar .crumb.parent { display: none; }
  .content { padding: 14px 12px 32px; }
  .page-head { flex-direction: column; gap: 12px; }
  .page-head .spacer { margin-left: 0; width: 100%; }
  .fm { flex-direction: column; }
  .fm-tree { width: 100%; max-height: 160px; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  /* Stacked, so the row itself is content-sized and each pane carries its
     own height.  `flex: none` is load-bearing: `.console` is `flex: 1`, and
     once the container is a COLUMN that makes flex-basis the main size and
     the `height` below is ignored entirely — which let the console grow to
     53 000 px and take the page with it. */
  .overview-split { flex-direction: column; height: auto; }
  .overview-split > .console { flex: none; height: 60vh; min-height: 320px; }
  .overview-split > .overview-side { width: 100%; height: 44vh; min-height: 260px; }
  .table.responsive thead { display: none; }
  .table.responsive tbody tr {
    display: grid; grid-template-columns: 1fr auto; gap: 4px 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--border-soft);
  }
  .table.responsive tbody td { height: auto; padding: 0; border: 0; }
  .table.responsive tbody td[data-label]::before {
    content: attr(data-label); display: block;
    font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--text-5); margin-bottom: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}