/* ============================================================
   Carbon Terminal  --  Near-black, monospace throughout, phosphor-green accent and hairline rules. Maximum density, zero ornament.

   Drop-in stylesheet. Link this, then use the shared class names:
   .btn .card .panel .kpi .badge .table .input .select .switch
   .alert .toast .modal .empty .tabs .nav .chip .u .wrap .section .grid

   Full rules: design-system/DESIGN.md
   Every theme in this system exposes these exact 59 tokens, so
   switching themes is swapping this file and nothing else.
   ============================================================ */
:root{
  /* Canvas & surfaces  -- four levels, never a fifth */
  --bg: #08090a;
  --surface-1: #0e1011;
  --surface-2: #131617;
  --surface-3: #1b1f21;
  --line: #1e2325;
  --line-strong: #2d3437;

  /* Text  -- muted is for labels, never body copy */
  --text: #d3ded8;
  --text-muted: #7e8d86;
  --text-faint: #4e5a55;

  /* Accent  -- exactly one per app */
  --accent: #8ce563;
  --accent-hover: #a2ef7c;
  --accent-fg: #08090a;
  --accent-soft: rgba(140,229,99,.13);

  /* Semantic  -- state, not decoration */
  --success: #63d68d;
  --success-soft: rgba(99,214,141,.13);
  --warning: #e3ae3f;
  --warning-soft: rgba(227,174,63,.13);
  --danger: #ff6259;
  --danger-soft: rgba(255,98,89,.14);
  --info: #55b6d6;
  --info-soft: rgba(85,182,214,.14);

  /* Type */
  --font-sans: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-mono: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-display: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --fs-xs: 10.5px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 26px;
  --fs-3xl: 34px;
  --lh-tight: 1.1;
  --lh-normal: 1.5;
  --ls-body: .01em;
  --ls-label: .06em;
  --ls-head: .01em;
  --fw-body: 400;
  --fw-label: 600;
  --fw-head: 700;

  /* Spacing  -- 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Shape */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 3px;
  --radius-full: 3px;
  --bw: 1px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgba(0,0,0,.4);
  --shadow-2: 0 2px 8px rgba(0,0,0,.5);
  --shadow-3: 0 12px 32px rgba(0,0,0,.65);

  /* Motion */
  --dur-fast: .1s;
  --dur-base: .16s;
  --ease: linear;

}

/* ============================================================
   BASE + COMPONENTS  --  identical in all 7 themes.
   Every value below resolves through a token above. If you need
   a new look, change a token; do not edit this section.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);font-size:var(--fs-base);line-height:var(--lh-normal);
  font-weight:var(--fw-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  padding-bottom:var(--sp-8);min-height:100vh;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
hr{border:0;border-top:var(--bw) solid var(--line);margin:var(--sp-5) 0}
code,kbd{font-family:var(--font-mono)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-5)}
.section{margin-top:var(--sp-7)}
.section-head{display:flex;align-items:baseline;gap:var(--sp-3);margin-bottom:var(--sp-4);flex-wrap:wrap}
.section-head h2{
  margin:0;font-family:var(--font-display);font-size:var(--fs-lg);
  font-weight:var(--fw-head);letter-spacing:var(--ls-head);
}
.spacer{flex:1}
.row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:var(--sp-4)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.u{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.09em;
   color:var(--text-muted);font-weight:var(--fw-label)}
.muted{color:var(--text-muted)}
.faint{color:var(--text-faint)}
.num{font-variant-numeric:tabular-nums}

/* ---------- nav ---------- */
.nav{
  display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;
  background:var(--surface-1);border:var(--bw) solid var(--line);
  border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-5);
}
.brand{display:flex;align-items:center;gap:var(--sp-3)}
.logo{
  width:40px;height:40px;flex:none;border-radius:var(--radius-sm);display:grid;place-items:center;
  font-size:20px;background:var(--accent-soft);border:var(--bw) solid var(--line-strong);color:var(--accent);
}
.nav h1{margin:0;font-family:var(--font-display);font-size:var(--fs-md);
        font-weight:var(--fw-head);letter-spacing:var(--ls-head)}
.nav h1 .sub{display:block;font-size:var(--fs-xs);font-weight:var(--fw-body);
             color:var(--text-muted);margin-top:2px;letter-spacing:0}
.nav-links{display:flex;gap:var(--sp-1);flex-wrap:wrap}
.nav-links a{
  padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);color:var(--text-muted);
  font-weight:var(--fw-label);font-size:var(--fs-sm);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav-links a:hover{background:var(--surface-3);color:var(--text);text-decoration:none}
.nav-links a[aria-current]{background:var(--accent-soft);color:var(--accent)}
.chip{
  display:inline-flex;align-items:center;gap:var(--sp-2);background:var(--surface-2);
  border:var(--bw) solid var(--line);border-radius:var(--radius-full);
  padding:4px 12px 4px 4px;font-size:var(--fs-sm);
}
.avatar{
  width:26px;height:26px;flex:none;border-radius:var(--radius-full);background:var(--accent);
  color:var(--accent-fg);display:grid;place-items:center;font-size:11px;font-weight:var(--fw-head);
}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:var(--sp-1);margin:var(--sp-5) 0 0;
      border-bottom:var(--bw) solid var(--line);flex-wrap:wrap}
.tab{
  padding:var(--sp-2) var(--sp-3);font-family:inherit;font-size:var(--fs-sm);
  font-weight:var(--fw-label);color:var(--text-muted);background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:calc(-1 * var(--bw));cursor:pointer;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.tab:hover{color:var(--text)}
.tab[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- surfaces ---------- */
.panel{
  background:var(--surface-1);border:var(--bw) solid var(--line);
  border-radius:var(--radius-md);padding:var(--sp-5);box-shadow:var(--shadow-1);
}
.card{
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--radius-md);padding:var(--sp-4);box-shadow:var(--shadow-1);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.card:hover{background:var(--surface-3);border-color:var(--line-strong)}
.card h3{margin:0;font-family:var(--font-display);font-size:var(--fs-md);font-weight:var(--fw-head)}
.card-top{display:flex;gap:var(--sp-3);align-items:flex-start}
.card-foot{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:var(--bw) solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
}
.thumb{
  width:44px;height:44px;flex:none;border-radius:var(--radius-sm);background:var(--surface-3);
  border:var(--bw) solid var(--line-strong);display:grid;place-items:center;font-size:20px;
}

/* ---------- kpi ---------- */
.kpi{
  background:var(--surface-1);border:var(--bw) solid var(--line);
  border-radius:var(--radius-md);padding:var(--sp-4);box-shadow:var(--shadow-1);
}
.kpi .val{
  font-family:var(--font-display);font-size:var(--fs-2xl);font-weight:var(--fw-head);
  letter-spacing:var(--ls-head);line-height:var(--lh-tight);
  margin:var(--sp-2) 0 var(--sp-1);font-variant-numeric:tabular-nums;
}
.delta{font-size:var(--fs-sm);font-weight:var(--fw-label);display:inline-flex;align-items:center;gap:4px}
.delta.up{color:var(--success)}
.delta.down{color:var(--danger)}

/* ---------- table ---------- */
.table-wrap{
  overflow-x:auto;border:var(--bw) solid var(--line);
  border-radius:var(--radius-md);background:var(--surface-1);
}
.table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:660px}
.table th{
  text-align:left;padding:var(--sp-3) var(--sp-4);background:var(--surface-2);
  font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-muted);font-weight:var(--fw-label);white-space:nowrap;
  border-bottom:var(--bw) solid var(--line);
}
.table th[aria-sort]{color:var(--text)}
.table th[aria-sort]::after{content:" \2193";color:var(--accent)}
.table td{padding:var(--sp-3) var(--sp-4);border-bottom:var(--bw) solid var(--line);vertical-align:middle}
.table th.num,.table td.num{text-align:right}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--dur-fast) var(--ease)}
.table tbody tr:hover{background:var(--surface-2)}
.pager{
  display:flex;align-items:center;gap:var(--sp-2);justify-content:flex-end;
  margin-top:var(--sp-3);font-size:var(--fs-sm);color:var(--text-muted);flex-wrap:wrap;
}

/* ---------- badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);
  font-weight:var(--fw-label);padding:3px 9px;border-radius:var(--radius-full);
  border:var(--bw) solid transparent;white-space:nowrap;
}
.badge::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:currentColor;flex:none}
.badge.ok{color:var(--success);background:var(--success-soft);border-color:var(--success-soft)}
.badge.warn{color:var(--warning);background:var(--warning-soft);border-color:var(--warning-soft)}
.badge.err{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-soft)}
.badge.info{color:var(--info);background:var(--info-soft);border-color:var(--info-soft)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:inherit;font-size:var(--fs-sm);font-weight:var(--fw-label);line-height:1;
  padding:10px 15px;border-radius:var(--radius-sm);cursor:pointer;
  background:var(--surface-2);color:var(--text);border:var(--bw) solid var(--line-strong);
  box-shadow:var(--shadow-1);letter-spacing:var(--ls-label);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--surface-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--text-muted);box-shadow:none}
.btn.ghost:hover{background:var(--surface-3);color:var(--text)}
.btn.danger{background:transparent;color:var(--danger);border-color:var(--danger-soft)}
.btn.danger:hover{background:var(--danger-soft)}
.btn.sm{padding:6px 11px;font-size:var(--fs-xs)}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{background:var(--surface-2)}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--sp-4)}
.field > label{font-size:var(--fs-sm);font-weight:var(--fw-label)}
.input,.select,textarea.input{
  width:100%;font-family:inherit;font-size:var(--fs-sm);color:var(--text);
  background:var(--surface-2);border:var(--bw) solid var(--line-strong);
  border-radius:var(--radius-sm);padding:10px 12px;
  transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
textarea.input{resize:vertical;min-height:76px;line-height:var(--lh-normal)}
.input::placeholder{color:var(--text-muted)} /* --text-faint is too weak to read */
.input:focus,.select:focus{outline:none;border-color:var(--accent);background:var(--surface-3)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input:disabled,.select:disabled{opacity:.45;cursor:not-allowed}
.hint{font-size:var(--fs-xs);color:var(--text-muted)}
.hint.err{color:var(--danger)}
.check{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);cursor:pointer}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:16px;height:16px;flex:none}
input[type=range]{accent-color:var(--accent);width:100%}
.switch{display:inline-flex;align-items:center;gap:var(--sp-3);cursor:pointer;font-size:var(--fs-sm)}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch .track{
  width:38px;height:22px;flex:none;border-radius:var(--radius-full);background:var(--surface-3);
  border:var(--bw) solid var(--line-strong);position:relative;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.switch .track::after{
  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;
  border-radius:var(--radius-full);background:var(--text-muted);
  transition:transform var(--dur-base) var(--ease),background var(--dur-fast) var(--ease);
}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .track::after{transform:translateX(16px);background:var(--accent-fg)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- feedback ---------- */
.alert{
  display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--radius-sm);
  border:var(--bw) solid var(--line);background:var(--surface-2);
}
.alert .ic{flex:none;line-height:1.4}
.alert.warn{border-color:var(--warning-soft);background:var(--warning-soft);color:var(--warning)}
.alert.err{border-color:var(--danger-soft);background:var(--danger-soft);color:var(--danger)}
.alert strong{color:inherit}
.toast{
  display:flex;align-items:center;gap:var(--sp-3);max-width:420px;font-size:var(--fs-sm);
  background:var(--surface-3);border:var(--bw) solid var(--line-strong);
  border-radius:var(--radius-md);padding:var(--sp-3) var(--sp-4);box-shadow:var(--shadow-3);
}
.modal{
  width:100%;max-width:392px;background:var(--surface-2);
  border:var(--bw) solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-3);padding:var(--sp-5);
}
.modal h3{margin:0 0 var(--sp-2);font-family:var(--font-display);
          font-size:var(--fs-lg);font-weight:var(--fw-head);letter-spacing:var(--ls-head)}
.modal p{margin:0;font-size:var(--fs-sm);color:var(--text-muted)}
.modal-foot{display:flex;gap:var(--sp-2);justify-content:flex-end;margin-top:var(--sp-5);flex-wrap:wrap}
.empty{
  text-align:center;padding:var(--sp-7) var(--sp-4);color:var(--text-muted);
  border:var(--bw) dashed var(--line-strong);border-radius:var(--radius-md);
}
.empty .ic{font-size:30px;margin-bottom:var(--sp-3);opacity:.6}
.empty h3{margin:0 0 var(--sp-2);font-family:var(--font-display);
          font-size:var(--fs-md);font-weight:var(--fw-head);color:var(--text)}

/* ---------- chart (no libraries) ---------- */
.chart{display:flex;align-items:flex-end;gap:var(--sp-2);height:148px}
.chart .bar{
  flex:1;min-height:4px;background:var(--accent);opacity:.85;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  transition:opacity var(--dur-fast) var(--ease);
}
.chart .bar:hover{opacity:1}
.chart .bar.alt{background:var(--accent-soft);border:var(--bw) solid var(--accent)}
.chart-x{display:flex;gap:var(--sp-2);margin-top:var(--sp-2)}
.chart-x span{flex:1;text-align:center;font-size:var(--fs-xs);color:var(--text-muted)}
.spark{width:100%;height:52px;display:block;overflow:visible}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .wrap{padding:0 var(--sp-3)}
  .panel{padding:var(--sp-4)}
  .nav{gap:var(--sp-3)}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
   THEME OVERRIDES  --  the few rules this identity needs
   that a token cannot express.
   ============================================================ */
.u{letter-spacing:.12em}
.chart .bar{border-radius:1px 1px 0 0}
.table th{letter-spacing:.1em}
.logo{font-size:16px}