/* ============================================================
   AI Embassy console — design tokens
   Register: product. Palette: "spruce ink on paper" (whisper).
   ============================================================ */
:root {
  /* Neutrals tinted toward spruce hue 155 */
  --paper:        oklch(0.972 0.004 155);
  --paper-2:      oklch(0.949 0.006 155);
  --surface:      oklch(1.000 0 0);
  --surface-2:    oklch(0.975 0.004 155);
  --surface-3:    oklch(0.945 0.007 155);
  --ink:          oklch(0.240 0.020 155);
  --ink-2:        oklch(0.400 0.018 155);
  --ink-3:        oklch(0.520 0.015 155);
  --ink-faint:    oklch(0.660 0.012 155);
  --line:         oklch(0.905 0.010 155);
  --line-strong:  oklch(0.845 0.014 155);

  /* Brand: embassy spruce */
  --spruce:       oklch(0.470 0.095 158);
  --spruce-deep:  oklch(0.360 0.075 160);
  --spruce-soft:  oklch(0.940 0.028 158);
  --spruce-line:  oklch(0.870 0.050 158);

  /* Accent: wax-seal amber (proof receipts, highlights) */
  --seal:         oklch(0.700 0.130 70);
  --seal-deep:    oklch(0.520 0.110 65);
  --seal-soft:    oklch(0.960 0.040 85);

  /* States */
  --ok:           oklch(0.560 0.130 152);
  --ok-soft:      oklch(0.950 0.038 152);
  --warn:         oklch(0.620 0.140 75);
  --warn-soft:    oklch(0.960 0.048 85);
  --err:          oklch(0.540 0.190 28);
  --err-soft:     oklch(0.955 0.035 28);
  --info:         oklch(0.540 0.100 230);
  --info-soft:    oklch(0.955 0.022 230);

  /* Type */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Elevation (paper world: edges first, shadow second) */
  --ring:         0 0 0 1px var(--line);
  --ring-strong:  0 0 0 1px var(--line-strong);
  --shadow-1:     0 1px 2px oklch(0.24 0.02 155 / 0.05);
  --shadow-2:     0 2px 6px oklch(0.24 0.02 155 / 0.07), 0 1px 2px oklch(0.24 0.02 155 / 0.05);
  --shadow-3:     0 12px 32px oklch(0.24 0.02 155 / 0.14), 0 2px 8px oklch(0.24 0.02 155 / 0.08);

  --r-1: 6px;
  --r-2: 10px;
  --r-3: 14px;

  --sidebar-w: 248px;
  --topbar-h: 56px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ Base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "tnum" 0;
}
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; color: inherit; }
input, select, textarea { font: inherit; }
svg { display: block; }
code, pre, kbd { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--spruce); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--spruce-soft); }

.skip {
  position: absolute; left: 8px; top: -48px; z-index: 200;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 8px;
  text-decoration: none; font-weight: 600; transition: top 0.15s var(--ease);
}
.skip:focus { top: 8px; }

/* ============ App frame ============ */
#app { display: flex; min-height: 100vh; }
.frame { flex: 1; min-width: 0; display: flex; flex-direction: column; margin-left: var(--sidebar-w); }
.container { max-width: 1160px; margin: 0 auto; padding: 28px 32px 72px; width: 100%; }
main:focus { outline: none; }

/* ============ Sidebar ============ */
#sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 60;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper-2);
  border-right: 1px solid var(--line);
  padding: 18px 14px 16px;
  overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 14px; }
.brand-mark {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--spruce-deep); color: oklch(0.96 0.02 120);
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.12), 0 1px 2px oklch(0.24 0.02 155 / 0.2);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-name { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.brand-sub { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); letter-spacing: 0.02em; }

.tenant-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-2);
  background: var(--surface); box-shadow: var(--ring);
  margin: 0 2px 10px;
}
.tenant-avatar {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  background: var(--spruce-soft); color: var(--spruce-deep);
  border-radius: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em;
}
.tenant-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.tenant-name { font-weight: 600; font-size: 12.5px; }
.tenant-tier { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.nav-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-faint); padding: 14px 10px 5px;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: 8px;
  color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 13.5px;
  border: 1px solid transparent;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav a svg { width: 16px; height: 16px; flex: none; color: var(--ink-faint); transition: color 0.15s var(--ease); }
.nav a:hover { background: var(--surface); color: var(--ink); }
.nav a:hover svg { color: var(--ink-2); }
.nav a.active {
  background: var(--surface); color: var(--spruce-deep); font-weight: 600;
  border-color: var(--line); box-shadow: var(--shadow-1);
}
.nav a.active svg { color: var(--spruce); }
.nav .count {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); background: var(--surface-3);
  padding: 1px 6px; border-radius: 99px;
}
.nav a.active .count { background: var(--spruce-soft); color: var(--spruce-deep); }

.sidebar-foot { padding: 10px 2px 0; display: flex; flex-direction: column; gap: 10px; }
.quota-mini {
  background: var(--surface); border-radius: var(--r-2); box-shadow: var(--ring);
  padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 7px;
}
.qm-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.qm-label { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.qm-text { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.qm-bar { height: 5px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.qm-fill { display: block; height: 100%; background: var(--spruce); border-radius: 99px; }
.qm-upgrade { font-size: 11.5px; font-weight: 600; color: var(--spruce-deep); text-decoration: none; }
.qm-upgrade:hover { text-decoration: underline; }
.version { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); padding: 0 8px; }

.scrim {
  position: fixed; inset: 0; z-index: 55;
  background: oklch(0.24 0.02 155 / 0.4);
  backdrop-filter: blur(2px);
}

/* ============ Topbar ============ */
#topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 20px 0 24px;
  background: oklch(0.972 0.004 155 / 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tb-title { font-size: 15.5px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.tb-right { display: flex; align-items: center; gap: 10px; }

.search { position: relative; display: flex; align-items: center; }
.search-icon { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--ink-faint); pointer-events: none; }
.search-input {
  width: 240px; padding: 7px 56px 7px 32px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-size: 13px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.search-input::placeholder { color: var(--ink-faint); }
.search-input:focus { outline: none; border-color: var(--spruce); box-shadow: 0 0 0 3px oklch(0.47 0.095 158 / 0.15); }
.search-kbd {
  position: absolute; right: 8px; font-size: 10px; color: var(--ink-3);
  background: var(--surface-3); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; pointer-events: none;
}

.status-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 99px; white-space: nowrap;
}
.dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.dot-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot-err { background: var(--err); box-shadow: 0 0 0 3px var(--err-soft); }

.icon-btn {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink-2); cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn:hover { background: var(--surface-2); border-color: var(--line-strong); }
.menu-btn { display: none; }

.avatar {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: var(--spruce-deep); color: oklch(0.96 0.02 120);
  border: none; border-radius: 9px; font-size: 11.5px; font-weight: 700; cursor: pointer;
}

/* ============ Page scaffolding ============ */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title h1 { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; }
.page-sub { color: var(--ink-3); font-size: 13px; margin-top: 3px; max-width: 62ch; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.section { margin-top: 26px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.section-title { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; }
.section-link { font-size: 12px; font-weight: 600; color: var(--spruce-deep); text-decoration: none; }
.section-link:hover { text-decoration: underline; }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 15px; border-radius: 99px;
  font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none;
  border: 1px solid transparent; white-space: nowrap;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.06s var(--ease);
}
.btn svg { width: 14px; height: 14px; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--spruce-deep); color: oklch(0.97 0.015 120); }
.btn-primary:hover { background: oklch(0.320 0.065 160); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn-danger { background: var(--err-soft); color: var(--err); border-color: oklch(0.9 0.05 28); }
.btn-danger:hover { background: oklch(0.93 0.05 28); }
.btn-sm { padding: 4px 11px; font-size: 12px; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ============ Cards / panels ============ */
.panel {
  background: var(--surface); border-radius: var(--r-3);
  box-shadow: var(--ring), var(--shadow-1);
}
.panel-pad { padding: 18px 20px; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
.panel-head h3 { font-size: 13.5px; font-weight: 700; }

/* ============ Stat cards ============ */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat {
  background: var(--surface); border-radius: var(--r-2);
  box-shadow: var(--ring), var(--shadow-1);
  padding: 14px 16px 15px;
  display: flex; flex-direction: column; gap: 2px;
  position: relative;
}
.stat-label { font-size: 11.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.01em; }
.stat-value { font-family: var(--mono); font-size: 23px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.stat-value .unit { font-size: 13px; color: var(--ink-3); font-weight: 500; margin-left: 2px; }
.stat-delta { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.stat-delta.up { color: var(--ok); }
.stat-delta.down { color: var(--err); }

/* ============ Badges & pills ============ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em;
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.badge svg { width: 10px; height: 10px; }
.b-ok      { background: var(--ok-soft);   color: oklch(0.42 0.11 152); }
.b-err     { background: var(--err-soft);  color: var(--err); }
.b-warn    { background: var(--warn-soft); color: oklch(0.48 0.11 70); }
.b-info    { background: var(--info-soft); color: var(--info); }
.b-neutral { background: var(--surface-3); color: var(--ink-2); }
.b-seal    { background: var(--seal-soft); color: var(--seal-deep); }
.b-sovereign { background: var(--spruce-soft); color: var(--spruce-deep); }

/* ============ Stage strip (S1-S7 pipeline) ============ */
.stage-strip {
  display: flex; align-items: flex-start;
  background: var(--surface); border-radius: var(--r-3);
  box-shadow: var(--ring), var(--shadow-1);
  padding: 16px 14px 13px;
  overflow-x: auto;
}
.stage {
  flex: 1; min-width: 96px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; padding: 0 4px;
}
.stage::before {
  content: ""; position: absolute; top: 13px; left: calc(-50% + 15px); right: calc(50% + 15px);
  height: 2px; background: var(--line-strong);
}
.stage:first-child::before { display: none; }
.stage.done::before, .stage.active::before { background: var(--spruce); }
.stage-node {
  width: 26px; height: 26px; border-radius: 99px; z-index: 1;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 9.5px; font-weight: 700;
  background: var(--surface-3); color: var(--ink-faint);
  border: 2px solid var(--line-strong);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.stage.done .stage-node { background: var(--spruce); border-color: var(--spruce); color: oklch(0.97 0.02 120); }
.stage.done .stage-node svg { width: 12px; height: 12px; }
.stage.active .stage-node { border-color: var(--spruce); color: var(--spruce-deep); background: var(--spruce-soft); }
.stage.failed .stage-node { border-color: var(--err); color: var(--err); background: var(--err-soft); }
.stage.skipped .stage-node { border-style: dashed; }
.stage-name { font-size: 11px; font-weight: 650; color: var(--ink-2); }
.stage-meta { font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint); min-height: 14px; }
.stage.active .stage-meta { color: var(--spruce-deep); }
.stage.failed .stage-meta { color: var(--err); }
.stage.failed .stage-name { color: var(--err); }

@keyframes stage-pulse {
  0% { box-shadow: 0 0 0 0 oklch(0.47 0.095 158 / 0.35); }
  70% { box-shadow: 0 0 0 7px oklch(0.47 0.095 158 / 0); }
  100% { box-shadow: 0 0 0 0 oklch(0.47 0.095 158 / 0); }
}
.stage.active .stage-node { animation: stage-pulse 1.6s var(--ease) infinite; }

/* ============ Tables ============ */
.table-wrap { overflow-x: auto; border-radius: var(--r-3); }
table.data {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--surface); border-radius: var(--r-3);
  box-shadow: var(--ring), var(--shadow-1);
}
table.data { border-radius: var(--r-3); overflow: hidden; }
table.data th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-3); padding: 10px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { transition: background 0.12s var(--ease); }
table.data tbody tr.rowlink { cursor: pointer; }
table.data tbody tr.rowlink:hover { background: var(--surface-2); }
td.mono, .mono { font-family: var(--mono); font-size: 12px; }
td.num { font-family: var(--mono); font-size: 12px; text-align: right; }
th.num { text-align: right; }
.cell-main { font-weight: 600; color: var(--ink); }
.cell-sub { font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); margin-top: 1px; }
tr.dim td { opacity: 0.55; }

/* ============ Filter tabs ============ */
.tabs { display: inline-flex; gap: 2px; background: var(--surface-3); border-radius: 99px; padding: 3px; }
.tab {
  border: none; background: transparent; cursor: pointer;
  padding: 5px 13px; border-radius: 99px;
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.tab .count { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-left: 4px; }

/* ============ Code blocks ============ */
.code {
  background: oklch(0.235 0.018 155); color: oklch(0.90 0.012 140);
  border-radius: var(--r-2); padding: 13px 16px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  overflow-x: auto; white-space: pre;
  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.05);
}
.code .c-key { color: oklch(0.80 0.09 130); }
.code .c-str { color: oklch(0.82 0.07 90); }
.code .c-num { color: oklch(0.78 0.10 65); }
.code .c-dim { color: oklch(0.62 0.012 140); }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; background: var(--surface-3);
  border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--r-2) var(--r-2) 0 0;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2); font-weight: 600;
}
.code-head + .code { border-radius: 0 0 var(--r-2) var(--r-2); }

.hash {
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 7px;
  display: inline-flex; align-items: center; gap: 6px;
}
.hash svg { width: 11px; height: 11px; color: var(--seal-deep); flex: none; }

/* ============ Key-value rows ============ */
.kv { display: flex; flex-direction: column; }
.kv-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.kv-row:last-child { border-bottom: none; }
.kv-key { font-size: 12px; color: var(--ink-3); font-weight: 500; flex: none; }
.kv-val { font-size: 12.5px; color: var(--ink); text-align: right; overflow-wrap: anywhere; }
.kv-val.mono { font-size: 11.5px; }

/* ============ Timeline (autopsy / audit) ============ */
.timeline { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: 10px; top: 24px; bottom: 2px;
  width: 2px; background: var(--line);
}
.tl-item:last-child::before { display: none; }
.tl-node {
  width: 22px; height: 22px; flex: none; z-index: 1;
  border-radius: 99px; display: grid; place-items: center;
  background: var(--surface-3); border: 2px solid var(--line-strong);
  color: var(--ink-3); margin-top: 1px;
}
.tl-node svg { width: 11px; height: 11px; }
.tl-node.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.tl-node.err { background: var(--err-soft); border-color: var(--err); color: var(--err); }
.tl-node.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.tl-body { min-width: 0; flex: 1; }
.tl-title { font-size: 13px; font-weight: 600; }
.tl-title .mono { font-size: 11px; color: var(--ink-3); font-weight: 500; margin-left: 6px; }
.tl-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; }
.tl-time { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 3px; }

/* ============ Banner ============ */
.banner {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--r-2); padding: 12px 15px; margin-bottom: 18px;
  font-size: 13px; box-shadow: var(--ring);
}
.banner svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.banner b { font-weight: 650; }
.banner .banner-x { margin-left: auto; flex: none; }
.banner-warn { background: var(--warn-soft); color: oklch(0.42 0.10 70); }
.banner-err { background: var(--err-soft); color: oklch(0.44 0.15 28); }
.banner-info { background: var(--info-soft); color: oklch(0.42 0.09 230); }

/* ============ Empty state ============ */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 48px 24px; gap: 6px;
}
.empty-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 6px;
  background: var(--surface-3); color: var(--ink-faint);
  border: 1px dashed var(--line-strong);
}
.empty-icon svg { width: 20px; height: 20px; }
.empty h3 { font-size: 14.5px; font-weight: 650; }
.empty p { font-size: 13px; color: var(--ink-3); max-width: 46ch; }
.empty .btn { margin-top: 10px; }

/* ============ Skeletons ============ */
@keyframes shimmer { from { background-position: -200px 0; } to { background-position: calc(200px + 100%) 0; } }
.skel {
  border-radius: 6px; min-height: 12px;
  background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200px 100%;
  animation: shimmer 1.3s linear infinite;
}
.skel-row { display: flex; gap: 12px; align-items: center; padding: 13px 14px; border-bottom: 1px solid var(--line); }
.skel-row:last-child { border-bottom: none; }

/* ============ Toasts ============ */
#toast-root {
  position: fixed; bottom: 20px; right: 20px; z-index: 120;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  background: oklch(0.235 0.018 155); color: oklch(0.94 0.01 140);
  border-radius: 10px; padding: 10px 16px;
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-3);
  max-width: 380px;
  animation: toast-in 0.25s var(--ease);
}
.toast.leaving { animation: toast-out 0.2s var(--ease) forwards; }
.toast svg { width: 15px; height: 15px; flex: none; }
.toast .t-ok { color: oklch(0.82 0.13 152); }
.toast .t-err { color: oklch(0.80 0.16 28); }
.toast .t-info { color: oklch(0.80 0.09 230); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(0.97); } }

/* ============ Modal ============ */
.modal-scrim {
  position: fixed; inset: 0; z-index: 110;
  background: oklch(0.24 0.02 155 / 0.45);
  backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
  animation: fade-in 0.18s var(--ease);
}
.modal {
  background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-3), var(--ring);
  width: 100%; max-width: 520px; max-height: 86vh; overflow-y: auto;
  animation: modal-in 0.22s var(--ease);
}
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px 0;
}
.modal-head h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.modal-sub { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }
.modal-body { padding: 16px 22px 4px; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 22px 20px;
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

/* ============ Forms ============ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.field .hint { font-size: 11.5px; color: var(--ink-3); }
.input, select.input, textarea.input {
  width: 100%; padding: 8px 12px;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-size: 13.5px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.input:focus { outline: none; border-color: var(--spruce); box-shadow: 0 0 0 3px oklch(0.47 0.095 158 / 0.15); }
.input.invalid { border-color: var(--err); }
.field .err-text { font-size: 11.5px; color: var(--err); display: none; }
.field.invalid .err-text { display: block; }
.input.mono { font-family: var(--mono); font-size: 12.5px; }

/* ============ Usage bars / sparkline ============ */
.usage-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.usage-row:last-child { border-bottom: none; }
.usage-label { width: 130px; flex: none; font-size: 12.5px; font-weight: 600; }
.usage-track { flex: 1; height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.usage-fill { display: block; height: 100%; border-radius: 99px; background: var(--spruce); transition: width 0.5s var(--ease); }
.usage-fill.warn { background: var(--warn); }
.usage-fill.err { background: var(--err); }
.usage-num { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); white-space: nowrap; }

.spark { display: block; width: 100%; height: auto; }
.spark-line { fill: none; stroke: var(--spruce); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark-fill { fill: url(#sparkfill); }
.spark-dot { fill: var(--spruce); }

/* ============ Pricing ============ */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plan {
  background: var(--surface); border-radius: var(--r-3);
  box-shadow: var(--ring), var(--shadow-1);
  padding: 18px; display: flex; flex-direction: column; gap: 10px;
  position: relative;
}
.plan.current { box-shadow: 0 0 0 2px var(--spruce), var(--shadow-2); }
.plan-flag {
  position: absolute; top: -9px; left: 16px;
  background: var(--spruce-deep); color: oklch(0.97 0.015 120);
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 99px;
}
.plan-name { font-size: 13.5px; font-weight: 700; }
.plan-price { font-family: var(--mono); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.plan-price .per { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.plan-desc { font-size: 12px; color: var(--ink-3); min-height: 34px; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plan li { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-2); align-items: flex-start; }
.plan li svg { width: 13px; height: 13px; color: var(--ok); flex: none; margin-top: 3px; }
.plan .btn { margin-top: auto; }

/* ============ Receipt (proof) ============ */
.receipt {
  border: 1px dashed var(--line-strong); border-radius: var(--r-2);
  background:
    repeating-linear-gradient(-45deg, transparent 0 9px, oklch(0.94 0.01 155 / 0.5) 9px 10px),
    var(--surface);
  padding: 16px 18px;
}
.receipt-seal {
  width: 40px; height: 40px; border-radius: 99px;
  display: grid; place-items: center; margin-bottom: 10px;
  background: var(--seal-soft); color: var(--seal-deep);
  border: 1.5px solid var(--seal);
  box-shadow: 0 0 0 4px oklch(0.7 0.13 70 / 0.12);
}
.receipt-seal svg { width: 19px; height: 19px; }
.receipt h4 { font-size: 13px; font-weight: 700; margin-bottom: 2px; }

/* ============ Detail layout ============ */
.detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-3); margin-bottom: 12px; }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--spruce-deep); text-decoration: underline; }
.crumbs .sep { color: var(--ink-faint); }
.crumbs .here { color: var(--ink); font-weight: 600; font-family: var(--mono); font-size: 12px; }

/* ============ Live ticker ============ */
@keyframes row-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
tr.fresh { animation: row-in 0.3s var(--ease); }

.live-dot { position: relative; width: 8px; height: 8px; border-radius: 99px; background: var(--ok); flex: none; }
.live-dot::after {
  content: ""; position: absolute; inset: -3px; border-radius: 99px;
  border: 1.5px solid var(--ok); opacity: 0;
  animation: ping 1.8s var(--ease) infinite;
}
@keyframes ping { 0% { transform: scale(0.6); opacity: 0.8; } 80%, 100% { transform: scale(1.4); opacity: 0; } }

/* ============ Responsive ============ */
@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 280px; }
  .frame { margin-left: 0; }
  #sidebar { transform: translateX(-100%); transition: transform 0.22s var(--ease); box-shadow: none; }
  #sidebar.open { transform: none; box-shadow: var(--shadow-3); }
  .menu-btn { display: grid; }
  .search-input { width: 170px; }
  .search-kbd { display: none; }
  .container { padding: 20px 16px 64px; }
  .status-pill { display: none; }
  .stat-grid { gap: 10px; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 19px; }
  .search { display: none; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .stage { min-width: 84px; }
  .usage-label { width: 96px; }
  .tb-title { font-size: 14px; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}