/* =============================================================================
   ArneIron — Chat + Token-Commerce prototype
   ds.css  ·  THE shared design system (single source of truth)
   Red pixel-CRT aesthetic. Built to reproduce the PNG mockups as live UI.
   Palette + CRT params ported 1:1 from wp-kit/components/_crt.py + _widgets.py.

   Sections
     0. Fonts
     1. Tokens (custom properties)
     2. Reset / base / typography
     3. CRT overlay layer
     4. Layout shell (app frame, header, sidebar, footer, hud)
     5. Buttons
     6. Forms / inputs
     7. Cards (standard / feature / post / pricing)
     8. Chat (bubbles, avatar, composer, usage strip)
     9. Token commerce (balance chip, wallet popover, calculator, meters)
    10. Feedback (badges, alerts, toasts, tooltips, popovers, modals)
    11. Navigation (tabs, accordion, pagination, breadcrumb)
    12. Data (tables, gauges, progress, charts, stat tiles)
    13. Utilities
    14. Responsive (mobile ~390px)
   ============================================================================= */

/* 0. FONTS ----------------------------------------------------------------- */
/* H06 FOLLOW-UP (UNIT H05): the Google Fonts @import was REMOVED. The same four
   families (Orbitron / Rajdhani / Share Tech Mono / Inter) are self-hosted via
   theme.json `fontFamilies[].fontFace` → assets/fonts/*.woff2, and the two
   above-the-fold criticals are <link rel=preload>'d by inc/enqueue.php
   (arneiron_g_preload_fonts). A top-of-file `@import url(...)` is render-blocking
   AND made the families DOUBLE-LOAD (remote CSS + local woff2). Dropping it leaves
   ONLY the self-hosted faces, which still resolve every var(--f-*) stack below.
   The font-family tokens in §1 are unchanged; theme.json is the canonical loader. */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* --- base / neutrals --- */
  --c-base:        #fff44f;   /* near-black canvas */
  --c-obsidian:    #f2d018;
  --c-panel:       #ffe534;   /* raised panel */
  --c-panel-2:     #ffd91a;
  --c-panel-3:     #ffcc00;
  --c-well:        #f5c800;   /* sunken input well */

  /* --- red ramp (oxblood -> white-hot) --- */
  --c-oxblood:     #006994;
  --c-maroon:      #0077a8;
  --c-blood:       #0085b5;
  --c-red-deep:    #0093c4;
  --c-signal:      #00a3d4;   /* primary signal red */
  --c-red:         #00a3d4;   /* alias */
  --c-hot:         #00b8e6;   /* hot orange-red */
  --c-whitehot:    #7fd4f0;   /* white-hot highlight */
  --c-red-dim:     #005577;

  /* --- ink (text) --- */
  --c-ink:         #3d2b00;   /* warm off-white */
  --c-ink-dim:     #6b4e00;
  --c-ink-faint:   #8a6800;   /* H02 a11y: lifted from #78463f (2.7:1, AA-fail) to
                                 4.99:1 on --c-base / 4.82:1 on --c-panel — clears
                                 WCAG AA for the .text-faint mono meta/caption text
                                 (timestamps, "X remaining", meter feet). Same warm
                                 desaturated red-brown hue, luminance only. */
  --c-ink-ghost:   #b89000;

  /* --- grid / borders --- */
  --c-grid:        #006994;
  --c-grid-2:      #005577;
  --c-hair:        #004466;

  /* --- system / status (green sparse + amber) --- */
  --c-green:       #2ecc40;
  --c-green-dim:   #1a9c2e;
  --c-green-dark:  #0d6618;
  --c-amber:       #ff8c00;
  --c-error:       #ff4136;

  /* --- glow rgba (NOT for SVGs fed to AI; fine for CSS) --- */
  --glow-red:      rgba(0,163,212,.55);
  --glow-red-soft: rgba(0,163,212,.22);
  --glow-green:    rgba(46,204,64,.45);
  --glow-amber:    rgba(255,140,0,.45);

  /* --- gradients (dithered depth approximations) --- */
  --grad-primary:  linear-gradient(180deg, #00b8e6 0%, #00a3d4 38%, #006994 100%);
  --grad-primary-hover: linear-gradient(180deg, #33ccf0 0%, #00b8e6 40%, #0077a8 100%);
  --grad-panel:    linear-gradient(180deg, #ffe534 0%, #ffd91a 100%);
  --grad-panel-up: linear-gradient(180deg, #ffcc00 0%, #ffd91a 100%);
  --grad-user-bubble: linear-gradient(180deg, #00a3d4 0%, #006994 100%);
  --grad-agent-bubble: linear-gradient(180deg, #ffe534 0%, #ffcc00 100%);
  --grad-ramp:     linear-gradient(90deg, #006994, #0077a8, #0085b5, #0093c4, #00a3d4, #00b8e6);

  /* --- halftone / scanline textures --- */
  --tex-halftone:  radial-gradient(circle at 1px 1px, rgba(0,163,212,.16) 1px, transparent 1.4px);
  --tex-halftone-size: 6px 6px;

  /* --- spacing scale (4px base) --- */
  --sp-0: 0;     --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;
  --sp-8: 64px;  --sp-9: 96px;

  /* --- radii: hard pixel corners --- */
  --r-0: 0px;    --r-1: 8px;    --r-pill: 999px;  /* cartoon rounded corners */

  /* --- type scale --- */
  --f-display: 'Orbitron', sans-serif;
  --f-ui:      'Rajdhani', sans-serif;
  --f-mono:    'Share Tech Mono', monospace;
  --f-body:    'Inter', sans-serif;
  --fs-hud:    11px;  --fs-xs: 12px;  --fs-sm: 13px;  --fs-md: 15px;
  --fs-lg:     18px;  --fs-xl: 22px;  --fs-2xl: 28px; --fs-3xl: 40px;
  --fs-4xl:    56px;  --fs-display: 72px;

  /* --- block shadows (hard, offset, brand press affordance) --- */
  --sh-block:    4px 4px 0 0 #006994;
  --sh-block-lg: 6px 6px 0 0 #006994;
  --sh-block-red: 4px 4px 0 0 var(--c-oxblood);
  --sh-block-red-lg: 6px 6px 0 0 var(--c-oxblood);
  --sh-glow:     0 0 12px var(--glow-red);
  --sh-glow-soft:0 0 8px var(--glow-red-soft);
  --sh-inset:    inset 0 0 0 1px var(--c-grid-2);

  /* --- z-index --- */
  --z-base: 0;    --z-raised: 10;  --z-sticky: 100;  --z-sidebar: 200;
  --z-overlay: 500; --z-crt: 900;  --z-modal: 1000;  --z-popover: 1100;
  --z-toast: 1200;

  /* --- transitions --- */
  --t-fast: 90ms;  --t-mid: 160ms;  --t-slow: 280ms;
  --ease: steps(4, end);          /* pixel-stepped where it reads right */
  --ease-smooth: cubic-bezier(.2,.7,.3,1);
}

/* 2. RESET / BASE ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-base);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.5;
  letter-spacing: .2px;
  /* dual corner radial glows + faint grid, per brand website language */
  background-image:
    radial-gradient(700px 500px at 0% 0%, rgba(255,42,42,.10), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(0,255,65,.05), transparent 60%),
    linear-gradient(transparent 47px, var(--c-hair) 47px),
    linear-gradient(90deg, transparent 47px, var(--c-hair) 47px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  background-attachment: fixed, fixed, fixed, fixed;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--c-signal); text-decoration: none; }
a:hover { color: var(--c-hot); text-shadow: var(--sh-glow-soft); }
::selection { background: var(--c-signal); color: var(--c-base); }

/* scrollbar */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--c-obsidian); }
::-webkit-scrollbar-thumb { background: var(--c-maroon); border: 2px solid var(--c-obsidian); }
::-webkit-scrollbar-thumb:hover { background: var(--c-signal); }

/* typography helpers */
h1,h2,h3,h4 { font-family: var(--f-ui); font-weight: 700; letter-spacing: 1px; margin: 0 0 var(--sp-3); color: var(--c-ink); }
.display, .wordmark { font-family: var(--f-display); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; }
.mono, .hud { font-family: var(--f-mono); }
.eyebrow { font-family: var(--f-mono); font-size: var(--fs-hud); letter-spacing: 2px; text-transform: uppercase; color: var(--c-ink-dim); }
.text-signal { color: var(--c-signal); }
.text-green  { color: var(--c-green); }
.text-amber  { color: var(--c-amber); }
.text-dim    { color: var(--c-ink-dim); }
.text-faint  { color: var(--c-ink-faint); }
.text-hot    { color: var(--c-hot); }
.glow        { text-shadow: 0 0 8px var(--glow-red); }
.glow-green  { text-shadow: 0 0 8px var(--glow-green); }

/* 3. CRT OVERLAY ----------------------------------------------------------- */
/* Fixed full-viewport layer: scanlines + aperture grille + vignette + bloom.
   Add <div class="crt-overlay" aria-hidden="true"></div> as last body child. */
.crt-overlay {
  position: fixed; inset: 0; z-index: var(--z-crt);
  pointer-events: none;
  mix-blend-mode: normal;
}
.crt-overlay::before {        /* scanlines + aperture grille */
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,42,42,.03) 0 1px, transparent 1px 3px);
  opacity: .9;
}
.crt-overlay::after {         /* vignette + barrel-edge darkening + corner bloom */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    radial-gradient(60% 50% at 50% 0%, rgba(255,42,42,.05), transparent 70%);
}
/* optional animated flicker; toggled by fx.js adding .crt-flicker */
@keyframes crt-flicker { 0%,100%{opacity:.9} 50%{opacity:.82} 92%{opacity:.97} }
.crt-overlay.crt-flicker::before { animation: crt-flicker 6s infinite steps(8); }
/* chromatic aberration utility (apply to a wrapper for a subtle RGB split) */
.crt-aberr { text-shadow: -.6px 0 rgba(255,0,0,.4), .6px 0 rgba(0,180,255,.25); }
@media (prefers-reduced-motion: reduce) { .crt-overlay.crt-flicker::before { animation: none; } }

/* 4. LAYOUT SHELL ---------------------------------------------------------- */
.app {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.app--sidebar { grid-template-columns: 248px 1fr; grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header" "sidebar main" "footer footer"; }
.app--sidebar > .app-header { grid-area: header; }
.app--sidebar > .sidebar    { grid-area: sidebar; }
.app--sidebar > .app-main   { grid-area: main; }
.app--sidebar > .app-footer { grid-area: footer; }

/* header */
.app-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--sp-5);
  height: 56px; padding: 0 var(--sp-5);
  background: linear-gradient(180deg, #160608, #070304);
  border-bottom: 2px solid var(--c-signal);
}
.app-header .brand { display: flex; align-items: center; gap: var(--sp-3); }
.app-header .brand .mark { width: 40px; height: 24px; }
.app-header .brand .wordmark { font-size: var(--fs-lg); }
.app-header .brand .wordmark .net { color: var(--c-ink-faint); }
.app-nav { display: flex; gap: var(--sp-2); align-items: center; }
.app-nav a {
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-sm);
  letter-spacing: 1px; text-transform: uppercase; color: var(--c-ink-dim);
  padding: var(--sp-2) var(--sp-3); border: 2px solid transparent;
}
.app-nav a:hover { color: var(--c-ink); }
.app-nav a.is-active { color: var(--c-signal); border-color: var(--c-grid-2); background: var(--c-panel); }
.app-header .spacer { flex: 1; }
.app-header .hud-readout { font-family: var(--f-mono); font-size: var(--fs-hud); color: var(--c-green); letter-spacing: 1px; }

/* sidebar */
.sidebar {
  width: 248px; padding: var(--sp-4) var(--sp-3);
  background: var(--grad-panel); border-right: 2px solid var(--c-grid-2);
}
.sidebar .nav-group { margin-bottom: var(--sp-5); }
.sidebar .nav-group > .label { font-family: var(--f-mono); font-size: var(--fs-hud);
  letter-spacing: 2px; color: var(--c-ink-faint); text-transform: uppercase; margin-bottom: var(--sp-2); }
.sidebar a.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); margin-bottom: 2px;
  font-family: var(--f-ui); font-weight: 600; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: 1px; color: var(--c-ink-dim);
  border-left: 3px solid transparent;
}
.sidebar a.nav-item:hover { color: var(--c-ink); background: var(--c-panel); }
.sidebar a.nav-item.is-active { color: var(--c-signal); background: var(--c-panel-2);
  border-left-color: var(--c-signal); box-shadow: var(--sh-glow-soft); }
.sidebar a.nav-item .ico { width: 16px; text-align: center; }

/* main + footer */
.app-main { padding: var(--sp-6); min-width: 0; }
.app-footer {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-top: 2px solid var(--c-grid-2);
  font-family: var(--f-mono); font-size: var(--fs-hud); color: var(--c-ink-faint);
  letter-spacing: 1px;
}
.app-footer .spacer { flex: 1; }

/* HUD corner brackets (decorative L-corners on a positioned container) */
.hud-frame { position: relative; }
.hud-frame::before, .hud-frame::after {
  content: ""; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border: 2px solid var(--c-signal);
}
.hud-frame::before { top: 4px; left: 4px; border-right: 0; border-bottom: 0; }
.hud-frame::after  { bottom: 4px; right: 4px; border-left: 0; border-top: 0; }
.hud-frame.hud-4::before { box-shadow: calc(100% - 8px) 0 0 -2px var(--c-signal); } /* extra top-right */
.hud-tag { font-family: var(--f-mono); font-size: var(--fs-hud); letter-spacing: 1px; color: var(--c-green); }

/* container helpers */
.container { max-width: 1280px; margin: 0 auto; }
.stack > * + * { margin-top: var(--sp-4); }
.row { display: flex; gap: var(--sp-4); }
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }

/* 5. BUTTONS --------------------------------------------------------------- */
.btn {
  --btn-off: 4px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2); cursor: pointer; user-select: none;
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-md);
  letter-spacing: 2px; text-transform: uppercase;
  padding: 10px 20px; border: 2px solid var(--c-whitehot); border-radius: 0;
  color: var(--c-base); background: var(--grad-primary);
  box-shadow: var(--btn-off) var(--btn-off) 0 0 var(--c-oxblood);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              background var(--t-mid) var(--ease);
}
.btn::before {  /* top highlight scanline */
  content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 1px;
  background: var(--c-whitehot); opacity: .9;
}
.btn:hover { background: var(--grad-primary-hover); }
.btn:active, .btn.is-pressed {
  transform: translate(var(--btn-off), var(--btn-off));
  box-shadow: 0 0 0 0 var(--c-oxblood);
}
.btn:focus-visible { outline: 2px solid var(--c-whitehot); outline-offset: 3px; }
.btn[disabled], .btn.is-disabled {
  cursor: not-allowed; color: #604c4a; border-color: var(--c-grid-2);
  background: linear-gradient(180deg,#28161788,#180b0c); box-shadow: none;
  transform: none;
}
.btn[disabled]::before { display: none; }
/* pixel arrow */
.btn .arrow { width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor; }

/* variants */
.btn--secondary { color: var(--c-signal); background: linear-gradient(180deg,#280a0c,#0c0608);
  border-color: var(--c-signal); }
.btn--secondary::before { background: var(--c-signal); opacity: .5; }
.btn--secondary:hover { background: linear-gradient(180deg,#46100e,#1a0809); color: var(--c-hot); }
.btn--ghost { color: var(--c-ink-dim); background: transparent; border-color: var(--c-grid-2);
  box-shadow: none; }
.btn--ghost::before { display: none; }
.btn--ghost:hover { color: var(--c-signal); border-color: var(--c-signal); background: var(--c-panel); }
.btn--danger { background: linear-gradient(180deg,#ff3a28,#700404); border-color: var(--c-whitehot);
  color: var(--c-whitehot); }
.btn--danger:hover { background: linear-gradient(180deg,#ff5a3a,#a00606); }

/* sizes */
.btn--sm { font-size: var(--fs-sm); padding: 6px 12px; --btn-off: 3px; }
.btn--lg { font-size: var(--fs-lg); padding: 14px 28px; --btn-off: 6px; }
.btn--block { display: flex; width: 100%; }
.btn--icon { padding: 8px; min-width: 36px; }

/* 6. FORMS ----------------------------------------------------------------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field > .label, .form-label {
  display: block; font-family: var(--f-mono); font-size: var(--fs-xs);
  letter-spacing: 2px; text-transform: uppercase; color: var(--c-ink-dim);
  margin-bottom: var(--sp-2);
}
.field .help { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); margin-top: var(--sp-1); }
.field.is-error .help { color: var(--c-error); }
.field.is-error .help::before { content: "✕ "; }

/* terminal-prompt input */
.input, .textarea, .select {
  width: 100%; font-family: var(--f-mono); font-size: var(--fs-md);
  color: var(--c-ink); background: var(--grad-panel); border: 2px solid var(--c-grid-2);
  border-radius: 0; padding: 10px 12px; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input.is-prompt { padding-left: 30px; }
.input.is-prompt-wrap { position: relative; }            /* wrapper variant */
.field .prompt-wrap { position: relative; }
.field .prompt-wrap::before {
  content: ">"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); color: var(--c-ink-faint); pointer-events: none;
}
.field .prompt-wrap:focus-within::before { color: var(--c-signal); }
.field .prompt-wrap .input { padding-left: 28px; }
.input::placeholder, .textarea::placeholder { color: var(--c-ink-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--c-signal); box-shadow: 0 0 0 1px var(--c-signal), var(--sh-glow-soft);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field.is-error .input, .field.is-error .textarea, .input.is-error { border-color: var(--c-error); }
.input[disabled], .textarea[disabled], .select[disabled] {
  background: #16090a; border-color: var(--c-grid); color: #6a4642; cursor: not-allowed;
}
.select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-signal) 50%),
                    linear-gradient(135deg, var(--c-signal) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 10px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}

/* search field */
.search { position: relative; }
.search .input { padding-left: 34px; }
.search::before { content: "⌕"; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--c-ink-faint); font-size: 18px; }

/* checkbox / radio (pixel) */
.check, .radio { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--c-ink); user-select: none; }
.check input, .radio input { position: absolute; opacity: 0; pointer-events: none; }
.check .box, .radio .box {
  width: 22px; height: 22px; background: var(--c-well); border: 2px solid var(--c-grid-2);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.radio .box { /* blocky circle */ clip-path: polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.check input:focus-visible + .box, .radio input:focus-visible + .box { border-color: var(--c-signal); box-shadow: var(--sh-glow-soft); }
.check input:checked + .box { background: var(--grad-primary); border-color: var(--c-signal); }
.check input:checked + .box::after { content: ""; width: 6px; height: 11px; border: solid var(--c-base);
  border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-1px,-1px); }
.radio input:checked + .box::after { content: ""; width: 8px; height: 8px; background: var(--grad-primary); }
.check input:disabled + .box, .radio input:disabled + .box { border-color: var(--c-grid); opacity: .5; }

/* toggle */
.toggle { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle .track { width: 56px; height: 26px; background: #16090a; border: 2px solid var(--c-grid-2);
  position: relative; transition: background var(--t-fast); flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: var(--c-ink-faint); transition: left var(--t-fast) var(--ease); }
.toggle input:checked + .track { background: var(--grad-primary); border-color: var(--c-signal); }
.toggle input:checked + .track::after { left: 32px; background: var(--c-whitehot); }
.toggle input:focus-visible + .track { box-shadow: var(--sh-glow-soft); }
.toggle .state { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: 1px; }
.toggle input:checked ~ .state { color: var(--c-signal); }

/* file input */
.file { display: inline-flex; align-items: stretch; border: 2px solid var(--c-grid-2); }
.file .file-btn { background: var(--c-panel-2); color: var(--c-signal); font-family: var(--f-ui);
  font-weight: 700; letter-spacing: 1px; text-transform: uppercase; padding: 8px 14px; border-right: 2px solid var(--c-grid-2); }
.file .file-name { padding: 8px 14px; font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-ink-faint); }
.file input { display: none; }

/* slider / range */
.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: transparent; cursor: pointer; }
.slider::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(90deg,var(--c-maroon),var(--c-signal)) no-repeat;
  background-size: var(--val,50%) 100%; border: 2px solid var(--c-grid-2); box-shadow: inset 0 0 0 100px #160808; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 22px; margin-top: -8px;
  background: var(--c-whitehot); border: 2px solid var(--c-signal); box-shadow: var(--sh-glow); }
.slider::-moz-range-track { height: 10px; background: #160808; border: 2px solid var(--c-grid-2); }
.slider::-moz-range-progress { height: 10px; background: linear-gradient(90deg,var(--c-maroon),var(--c-signal)); }
.slider::-moz-range-thumb { width: 14px; height: 22px; background: var(--c-whitehot); border: 2px solid var(--c-signal); border-radius: 0; }

/* 7. CARDS ----------------------------------------------------------------- */
.card {
  position: relative; background: var(--grad-panel); border: 2px solid var(--c-grid-2);
  padding: var(--sp-5); box-shadow: var(--sh-block);
}
.card::after { /* halftone texture */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: var(--tex-halftone); background-size: var(--tex-halftone-size);
}
.card > * { position: relative; z-index: 1; }
.card .card-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.card .card-title { font-family: var(--f-ui); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.card--feature { border-color: var(--c-grid-2); border-top: 3px solid var(--c-signal); }
.card--feature .icon { width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--c-panel-2); border: 2px solid var(--c-grid-2); color: var(--c-signal); margin-bottom: var(--sp-3); }
.card--post .meta { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: 1px; margin-bottom: var(--sp-2); }
.card--flush { padding: 0; }

/* pricing card */
.pricing {
  position: relative; background: var(--grad-panel-up); border: 2px solid var(--c-grid-2);
  padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3);
}
.pricing.is-popular { border-color: var(--c-signal); box-shadow: var(--sh-glow), var(--sh-block); }
.pricing .ribbon {
  position: absolute; top: -2px; left: -2px; right: -2px;
  background: var(--grad-primary); color: var(--c-base);
  font-family: var(--f-ui); font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  font-size: var(--fs-xs); text-align: center; padding: 4px 0;
}
.pricing.is-popular { padding-top: calc(var(--sp-5) + 18px); }
.pricing .tier { font-family: var(--f-display); font-weight: 900; font-size: var(--fs-2xl); color: var(--c-ink); }
.pricing .tokens { font-family: var(--f-ui); font-weight: 700; color: var(--c-signal); letter-spacing: 1px; }
.pricing .price { font-family: var(--f-display); font-weight: 900; font-size: var(--fs-3xl);
  color: var(--c-green); text-shadow: var(--sh-glow-soft); }
.pricing .feat { list-style: none; padding: 0; margin: 0; }
.pricing .feat li { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-dim);
  padding: 4px 0 4px 18px; position: relative; }
.pricing .feat li::before { content: "▸"; position: absolute; left: 0; color: var(--c-signal); }

/* stat tile (dashboard KPI) */
.stat {
  background: var(--grad-panel); border: 2px solid var(--c-grid-2); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: 2px;
}
.stat .stat-label { font-family: var(--f-mono); font-size: var(--fs-hud); letter-spacing: 1px;
  text-transform: uppercase; color: var(--c-ink-faint); }
.stat .stat-value { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-2xl); color: var(--c-ink); }
.stat .stat-value.green { color: var(--c-green); }
.stat .stat-value.signal { color: var(--c-signal); }
.stat .stat-delta { font-family: var(--f-mono); font-size: var(--fs-xs); }
.stat .stat-delta.up { color: var(--c-green); } .stat .stat-delta.down { color: var(--c-hot); }

/* 8. CHAT ------------------------------------------------------------------ */
.chat-window { display: flex; flex-direction: column; height: 100%;
  background: var(--grad-panel); border: 2px solid var(--c-grid-2); position: relative; }
.chat-window .hud-frame::before, .chat-window .hud-frame::after { border-color: var(--c-signal); }
.chat-head {
  display: flex; align-items: center; gap: var(--sp-3); height: 60px; padding: 0 var(--sp-4);
  border-bottom: 2px solid var(--c-signal);
  background: linear-gradient(180deg,#18090b,#0c0608);
}
.chat-head .title { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-lg); letter-spacing: 2px; }
.chat-head .spacer { flex: 1; }
.status-dot { width: 9px; height: 9px; display: inline-block; background: var(--c-green); box-shadow: 0 0 8px var(--glow-green); }
.status-dot.connecting { background: var(--c-amber); box-shadow: 0 0 8px var(--glow-amber); }
.status-dot.error { background: var(--c-error); box-shadow: 0 0 8px var(--glow-red); }
.status-label { font-family: var(--f-mono); font-size: var(--fs-xs); letter-spacing: 1px; }

.chat-thread { flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }

/* avatar = the mark in a framed tile */
.avatar { width: 44px; height: 44px; flex: none; background: var(--grad-panel-up);
  border: 2px solid var(--c-grid-2); display: grid; place-items: center; position: relative; }
.avatar img, .avatar svg { width: 34px; height: auto; }
.avatar--ring { box-shadow: 0 0 0 1px var(--c-signal), var(--sh-glow-soft); }
.avatar--sm { width: 32px; height: 32px; }
.avatar--user { background: var(--grad-user-bubble); color: var(--c-whitehot);
  font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-md); }

/* bubbles */
.bubble { max-width: 78%; position: relative; padding: var(--sp-3) var(--sp-4);
  font-family: var(--f-ui); font-size: var(--fs-md); line-height: 1.5; border: 2px solid var(--c-grid-2); }
.bubble .ts { font-family: var(--f-mono); font-size: 10px; color: var(--c-ink-faint); margin-top: var(--sp-2); }
.msg { display: flex; gap: var(--sp-3); align-items: flex-start; }
.msg--agent { align-self: flex-start; }
.msg--user { flex-direction: row-reverse; align-self: flex-end; }

.bubble--agent { background: var(--grad-agent-bubble); border-color: var(--c-grid-2);
  border-left: 2px solid var(--c-signal); color: var(--c-ink); }
.bubble--agent::before { content: ""; position: absolute; left: -9px; top: 14px;
  border: 5px solid transparent; border-right-color: var(--c-signal); }
.bubble--user { background: var(--grad-user-bubble); border-color: var(--c-signal); color: var(--c-whitehot); }
.bubble--user::before { content: ""; position: absolute; right: -9px; top: 14px;
  border: 5px solid transparent; border-left-color: var(--c-signal); }
.bubble--user::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 1px;
  background: var(--c-hot); }
.bubble .meta { margin-top: var(--sp-3); padding-top: var(--sp-2); border-top: 1px solid var(--c-grid);
  font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-hot); letter-spacing: 1px; }

/* system message: centered slim */
.msg--system { align-self: center; max-width: 90%; }
.bubble--system { background: transparent; border: 1px solid var(--c-grid-2); border-left: 2px solid var(--c-green-dark);
  font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-ink-dim); padding: var(--sp-2) var(--sp-4); }

/* streaming caret */
.caret { display: inline-block; width: 8px; height: 1.1em; background: var(--c-hot);
  vertical-align: text-bottom; margin-left: 2px; animation: caret-blink 1s steps(2) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* composer */
.composer { display: flex; align-items: stretch; gap: var(--sp-2); padding: var(--sp-4);
  border-top: 2px solid var(--c-grid-2); background: var(--c-obsidian); }
.composer .field-wrap { flex: 1; position: relative; display: flex; align-items: center;
  background: var(--grad-panel); border: 2px solid var(--c-grid-2); }
.composer.is-focus .field-wrap { border-color: var(--c-signal); box-shadow: var(--sh-glow-soft); }
.composer.is-gated .field-wrap { border-color: var(--c-amber); }
.composer .attach { padding: 0 12px; color: var(--c-ink-faint); font-size: 22px; line-height: 1; background: none; border: none; cursor: pointer; }
.composer .attach:hover { color: var(--c-signal); }
.composer .prompt { color: var(--c-ink-faint); font-family: var(--f-mono); padding-left: 4px; }
.composer .field-wrap.has-value .prompt { color: var(--c-signal); }
.composer input[type=text], .composer textarea {
  flex: 1; background: transparent; border: none; outline: none; color: var(--c-ink);
  font-family: var(--f-mono); font-size: var(--fs-md); padding: 12px 8px; resize: none; }
.composer .estimate { position: absolute; top: 4px; right: 8px; font-family: var(--f-mono);
  font-size: var(--fs-xs); color: var(--c-green); border: 1px solid var(--c-green-dark); padding: 1px 6px; }
.composer .send { flex: none; }

/* in-dialog usage strip */
.usage-strip { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--c-signal); background: var(--grad-panel); }
.usage-strip .balance-zone { flex: 1; display: flex; align-items: center; gap: var(--sp-3); }
.usage-strip .label { font-family: var(--f-mono); font-size: var(--fs-hud); letter-spacing: 1px; color: var(--c-ink-faint); }
.usage-strip .readout { font-family: var(--f-mono); font-size: var(--fs-sm); }
.usage-strip .readout.metering { color: var(--c-hot); }
.usage-strip .readout.estimating { color: var(--c-green); }
.usage-strip .readout.done { color: var(--c-signal); }
.usage-strip .readout.low { color: var(--c-amber); }

/* 9. TOKEN COMMERCE -------------------------------------------------------- */
/* balance chip */
.balance-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 6px 12px 6px 8px; background: var(--grad-panel-up);
  border: 2px solid var(--c-signal); position: relative;
}
.balance-chip.is-low { border-color: var(--c-amber); }
.balance-chip .coin { width: 22px; height: 22px; flex: none; background: var(--c-signal);
  clip-path: polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  display: grid; place-items: center; color: var(--c-base); font-family: var(--f-display); font-weight: 900; font-size: 11px; }
.balance-chip.is-low .coin { background: var(--c-amber); }
.balance-chip .col { display: flex; flex-direction: column; line-height: 1.1; }
.balance-chip .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; color: var(--c-ink-faint); }
.balance-chip .v { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-lg); color: var(--c-whitehot); }
.balance-chip.is-low .v { color: var(--c-amber); }
.balance-chip .tick { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-hot); margin-left: var(--sp-2); }

/* value pill (€ equivalent) */
.value-pill { display: inline-flex; flex-direction: column; padding: 6px 12px;
  background: var(--grad-panel); border: 2px solid var(--c-grid-2); line-height: 1.1; }
.value-pill .k { font-family: var(--f-mono); font-size: 10px; letter-spacing: 2px; color: var(--c-ink-faint); }
.value-pill .v { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-lg); color: var(--c-ink); }

/* wallet popover (balance breakdown) */
.wallet { width: 320px; background: var(--grad-panel-up); border: 2px solid var(--c-signal);
  box-shadow: var(--sh-block-lg), var(--sh-glow-soft); padding: var(--sp-4); }
.wallet .row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--c-grid);
  font-family: var(--f-mono); font-size: var(--fs-sm); }
.wallet .row .v { color: var(--c-ink); }
.wallet .total { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-xl); color: var(--c-green); }

/* token calculator */
.calc { background: var(--grad-panel); border: 2px solid var(--c-grid-2); padding: var(--sp-5); }
.calc .calc-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.calc .calc-display { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4); background: var(--c-obsidian); border: 2px solid var(--c-grid-2); margin-bottom: var(--sp-4); }
.calc .tok-out { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-3xl); color: var(--c-whitehot); }
.calc .eur-out { font-family: var(--f-display); font-weight: 900; font-size: var(--fs-3xl); color: var(--c-green); text-shadow: var(--sh-glow-soft); }
.calc .presets { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0; }
.calc .preset { font-family: var(--f-mono); font-size: var(--fs-sm); padding: 6px 12px;
  background: var(--c-panel-2); border: 2px solid var(--c-grid-2); color: var(--c-ink-dim); cursor: pointer; }
.calc .preset:hover { border-color: var(--c-signal); color: var(--c-ink); }
.calc .preset.is-active { background: var(--grad-primary); border-color: var(--c-signal); color: var(--c-base); }
.calc .rate-note { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: 1px; }

/* 10. FEEDBACK ------------------------------------------------------------- */
/* badges / chips / tags */
.badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-mono);
  font-size: var(--fs-xs); letter-spacing: 1px; text-transform: uppercase; padding: 2px 8px;
  background: var(--c-signal); color: var(--c-base); }
.badge--green { background: var(--c-green); color: var(--c-obsidian); }
.badge--amber { background: var(--c-amber); color: var(--c-obsidian); }
.badge--blood { background: var(--c-blood); color: var(--c-whitehot); }
.badge--dim   { background: var(--c-ink-faint); color: var(--c-base); }
.badge--outline { background: transparent; border: 2px solid var(--c-signal); color: var(--c-signal); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-weight: 600;
  font-size: var(--fs-sm); padding: 4px 10px; background: var(--c-panel-2); border: 2px solid var(--c-grid-2);
  color: var(--c-ink-dim); }
.chip .x { cursor: pointer; color: var(--c-ink-faint); }
.chip .x:hover { color: var(--c-signal); }
.tag { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-signal); border: 1px solid var(--c-grid-2); padding: 1px 6px; }

/* alerts / notices */
.alert { display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); position: relative;
  background: var(--grad-panel); border: 2px solid var(--c-signal); border-left-width: 8px; }
.alert .alert-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border: 2px solid currentColor; color: var(--c-signal); font-family: var(--f-ui); font-weight: 700; }
.alert .alert-body { flex: 1; }
.alert .alert-title { font-family: var(--f-ui); font-weight: 700; letter-spacing: 1px; color: var(--c-ink); }
.alert .alert-text { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-dim); }
.alert .alert-tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 1px; color: var(--c-signal); align-self: flex-start; }
.alert--info    { border-color: var(--c-signal); } .alert--info .alert-ico,.alert--info .alert-tag{color:var(--c-signal);}
.alert--success { border-color: var(--c-green); }  .alert--success .alert-ico,.alert--success .alert-tag{color:var(--c-green);}
.alert--warning { border-color: var(--c-amber); }  .alert--warning .alert-ico,.alert--warning .alert-tag{color:var(--c-amber);}
.alert--error   { border-color: var(--c-error); }  .alert--error .alert-ico,.alert--error .alert-tag{color:var(--c-error);}

/* tooltip */
[data-tooltip] { position: relative; }
.tooltip, [data-tooltip]::after {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--c-obsidian); border: 2px solid var(--c-signal); color: var(--c-ink);
  font-family: var(--f-mono); font-size: var(--fs-xs); padding: 4px 8px; white-space: nowrap;
  box-shadow: var(--sh-glow-soft); pointer-events: none; z-index: var(--z-popover);
}
[data-tooltip]::after { content: attr(data-tooltip); opacity: 0; transition: opacity var(--t-fast); }
[data-tooltip]:hover::after { opacity: 1; }

/* popover */
.popover { background: var(--grad-panel-up); border: 2px solid var(--c-signal);
  box-shadow: var(--sh-block-lg); padding: var(--sp-4); position: absolute; z-index: var(--z-popover);
  display: none; }
.popover.is-open { display: block; }
.popover .hud-frame::before, .popover .hud-frame::after { border-color: var(--c-signal); }

/* modal + scrim */
.scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(2,1,1,.78);
  backdrop-filter: blur(1px); display: none; align-items: center; justify-content: center; padding: var(--sp-5); }
.scrim.is-open { display: flex; }
.modal { width: min(560px, 100%); max-height: 86vh; overflow: auto; position: relative;
  background: var(--grad-panel-up); border: 2px solid var(--c-signal);
  box-shadow: var(--sh-block-lg), 0 0 30px var(--glow-red-soft); }
.modal .modal-head { display: flex; align-items: center; padding: var(--sp-4); border-bottom: 2px solid var(--c-grid-2);
  background: linear-gradient(180deg,#18090b,#0c0608); }
.modal .modal-title { font-family: var(--f-ui); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; flex: 1; }
.modal .modal-close { background: none; border: 2px solid var(--c-signal); color: var(--c-signal); cursor: pointer;
  width: 28px; height: 28px; line-height: 1; }
.modal .modal-body { padding: var(--sp-5); }
.modal .modal-foot { display: flex; gap: var(--sp-3); justify-content: flex-end; padding: var(--sp-4);
  border-top: 2px solid var(--c-grid-2); }
.modal--danger { border-color: var(--c-error); }

/* toasts */
.toast-stack { position: fixed; top: var(--sp-5); right: var(--sp-5); z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: var(--sp-3); max-width: 360px; }
.toast { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4);
  background: var(--grad-panel-up); border: 2px solid var(--c-signal); border-left-width: 6px;
  box-shadow: var(--sh-block); animation: toast-in var(--t-slow) var(--ease-smooth); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } }
.toast.is-out { animation: toast-out var(--t-mid) var(--ease-smooth) forwards; }
@keyframes toast-out { to { transform: translateX(20px); opacity: 0; } }
.toast--success { border-color: var(--c-green); } .toast--error { border-color: var(--c-error); }
.toast--warning { border-color: var(--c-amber); }
.toast .toast-ico { color: var(--c-signal); font-family: var(--f-ui); font-weight: 700; }
.toast--success .toast-ico { color: var(--c-green); } .toast--error .toast-ico { color: var(--c-error); }
.toast--warning .toast-ico { color: var(--c-amber); }
.toast .toast-msg { font-family: var(--f-ui); font-size: var(--fs-sm); color: var(--c-ink); }

/* 11. NAVIGATION ----------------------------------------------------------- */
/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--c-grid-2); }
.tab { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 1px;
  text-transform: uppercase; padding: 8px 16px; color: var(--c-ink-dim); cursor: pointer;
  background: var(--c-panel); border: 2px solid transparent; border-bottom: none; margin-bottom: -2px; }
.tab:hover { color: var(--c-ink); }
.tab.is-active { color: var(--c-signal); background: var(--c-panel-2);
  border-color: var(--c-grid-2); border-bottom: 2px solid var(--c-base); }
.tab-panel { display: none; padding: var(--sp-5) 0; }
.tab-panel.is-active { display: block; }

/* accordion */
.accordion .acc-item { border: 2px solid var(--c-grid-2); margin-bottom: 2px; background: var(--c-panel); }
.accordion .acc-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  padding: var(--sp-3) var(--sp-4); font-family: var(--f-ui); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.accordion .acc-head .chev { transition: transform var(--t-fast); color: var(--c-signal); }
.accordion .acc-item.is-open .acc-head .chev { transform: rotate(90deg); }
.accordion .acc-body { display: none; padding: 0 var(--sp-4) var(--sp-4); font-family: var(--f-body); color: var(--c-ink-dim); }
.accordion .acc-item.is-open .acc-body { display: block; }

/* pagination */
.pager { display: flex; gap: 4px; align-items: center; font-family: var(--f-mono); }
.pager a, .pager span { display: grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px;
  border: 2px solid var(--c-grid-2); color: var(--c-ink-dim); background: var(--c-panel); }
.pager a:hover { border-color: var(--c-signal); color: var(--c-ink); }
.pager .is-active { background: var(--grad-primary); border-color: var(--c-signal); color: var(--c-base); }
.pager .is-disabled { opacity: .4; pointer-events: none; }

/* breadcrumb */
.breadcrumb { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: 1px; }
.breadcrumb a { color: var(--c-ink-dim); } .breadcrumb .sep { color: var(--c-grid-2); margin: 0 6px; }
.breadcrumb .current { color: var(--c-signal); }

/* 12. DATA ----------------------------------------------------------------- */
/* tables */
.table { width: 100%; border-collapse: collapse; font-family: var(--f-mono); font-size: var(--fs-sm); }
.table thead th { text-align: left; font-size: var(--fs-hud); letter-spacing: 1px; text-transform: uppercase;
  color: var(--c-ink-faint); padding: var(--sp-2) var(--sp-3); border-bottom: 2px solid var(--c-grid-2); }
.table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-grid); color: var(--c-ink-dim); }
.table tbody tr:nth-child(even) { background: rgba(255,42,42,.03); }
.table tbody tr:hover { background: var(--c-panel-2); }
.table tbody tr.is-active { background: var(--c-panel-3); box-shadow: inset 3px 0 0 var(--c-signal); }
.table .num { text-align: right; color: var(--c-ink); }
.table .status-ok { color: var(--c-green); } .table .status-warn { color: var(--c-amber); }
.table .status-err { color: var(--c-error); }

/* gauges / progress (segmented pixel bars) */
.gauge { position: relative; }
.gauge .gauge-head { display: flex; justify-content: space-between; font-family: var(--f-mono);
  font-size: var(--fs-xs); color: var(--c-ink-dim); margin-bottom: var(--sp-1); }
.gauge .gauge-head .pct { color: var(--c-signal); }
.gauge .track { height: 16px; background: #100708; border: 2px solid var(--c-grid-2); position: relative; overflow: hidden; }
.gauge .fill { height: 100%; background: var(--grad-ramp); width: var(--val, 50%); position: relative; }
.gauge .fill.green { background: linear-gradient(90deg, var(--c-green-dark), var(--c-green)); }
.gauge .fill.blood { background: linear-gradient(90deg, var(--c-maroon), var(--c-signal)); }
.gauge .track::after { /* segment ticks */ content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(90deg, transparent 0 10px, rgba(5,2,3,.9) 10px 12px); }

/* radial gauge (allocation donut, via conic-gradient) */
.radial { width: 120px; height: 120px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--c-signal) calc(var(--val,60%)), #16090a 0); }
.radial::before { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: var(--c-obsidian);
  border: 2px solid var(--c-grid-2); }
.radial .radial-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.radial .radial-label .v { font-family: var(--f-ui); font-weight: 700; font-size: var(--fs-xl); color: var(--c-signal); }
.radial .radial-label .k { font-family: var(--f-mono); font-size: 10px; color: var(--c-ink-faint); }

/* chart container */
.chart { position: relative; background: var(--c-obsidian); border: 2px solid var(--c-grid-2); padding: var(--sp-3); }
.chart canvas { display: block; width: 100%; }
.chart .chart-head { display: flex; justify-content: space-between; font-family: var(--f-mono);
  font-size: var(--fs-xs); color: var(--c-ink-faint); letter-spacing: 1px; margin-bottom: var(--sp-2); }
.chart .legend { display: flex; gap: var(--sp-3); font-family: var(--f-mono); font-size: var(--fs-xs); }
.chart .legend .dot { width: 8px; height: 8px; display: inline-block; margin-right: 4px; background: var(--c-signal); }

/* spinner / loader */
.spinner { width: 28px; height: 28px; display: inline-block; position: relative; animation: spin 1s steps(8) infinite; }
.spinner::before { content: ""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg, transparent, var(--c-signal)); border-radius: 50%;
  -webkit-mask: radial-gradient(transparent 40%, #000 42%); mask: radial-gradient(transparent 40%, #000 42%); }
@keyframes spin { to { transform: rotate(360deg); } }

/* 13. UTILITIES ------------------------------------------------------------ */
.panel { background: var(--grad-panel); border: 2px solid var(--c-grid-2); padding: var(--sp-5); position: relative; }
.panel--up { background: var(--grad-panel-up); }
.divider { height: 1px; background: var(--c-grid-2); border: none; margin: var(--sp-4) 0; }
.divider--signal { background: var(--c-signal); }
.flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; }
.justify-between { justify-content: space-between; } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .flex-1 { flex: 1; } .wrap { flex-wrap: wrap; }
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}
.w-full{width:100%}.text-center{text-align:center}.text-right{text-align:right}
.hidden{display:none}.scanlines{position:relative}
.scanlines::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);}
.halftone{background-image:var(--tex-halftone);background-size:var(--tex-halftone-size);}

/* 14. RESPONSIVE (mobile ~390px) ------------------------------------------- */
@media (max-width: 860px) {
  .app--sidebar { grid-template-columns: 1fr; grid-template-areas: "header" "main" "footer"; }
  .sidebar { display: none; }
  .sidebar.is-open { display: block; position: fixed; inset: 56px 0 0 0; z-index: var(--z-sidebar); width: 100%; }
  .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
  .app-nav { display: none; }
  .app-header .menu-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  :root { --fs-3xl: 32px; --fs-2xl: 24px; --sp-6: 20px; }
  .app-main { padding: var(--sp-4); }
  .app-header { gap: var(--sp-3); padding: 0 var(--sp-4); }
  .bubble { max-width: 88%; }
  .calc .calc-display { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .calc .tok-out, .calc .eur-out { font-size: var(--fs-2xl); }
  .modal { width: 100%; }
  .toast-stack { left: var(--sp-3); right: var(--sp-3); top: auto; bottom: var(--sp-4); max-width: none; }
  .balance-chip .v { font-size: var(--fs-md); }
  /* H01 visual+responsive QA — clear overflow oversights at phone widths.
     Additive, token-based, scoped to the ≤480px viewport; no brand restyle. */
  .wallet { width: min(320px, 100%); }                 /* fixed 320px popover overflowed ~288px content well */
  .usage-strip { flex-wrap: wrap; }                    /* balance-zone + fixed 160px gauge had no wrap → h-scroll */
  .usage-strip .balance-zone { flex-basis: 100%; }     /* keep readout legible above the gauge once wrapped */
  /* H05 (H01 item a): the .estimate cost chip is absolute top/right inside the
     field-wrap; on phone widths it overlapped the typed prompt text. Drop it out
     of the overlay and inline it BELOW the field so the input keeps full width
     and the estimate stays readable. The chip keeps its green-on-panel skin. */
  .composer .field-wrap { flex-wrap: wrap; }
  .composer .estimate { position: static; order: 3; flex-basis: 100%;
    align-self: stretch; text-align: right; margin: 2px 4px 4px; }
}
.menu-toggle { display: none; background: none; border: 2px solid var(--c-grid-2); color: var(--c-signal);
  width: 36px; height: 36px; cursor: pointer; }

/* =============================================================================
   16. ACCESSIBILITY (UNIT H02 — a11y pass)
   Additive, global a11y utilities + reduced-motion guards layered over the
   red pixel-CRT skin. Per-block style.css already ships scoped .sr-only /
   .screen-reader-text rules; these are the THEME-WIDE fallbacks so any block
   (and the dynamic render fragments) can rely on them without re-declaring.
   ========================================================================== */

/* Screen-reader-only text — visually hidden, still in the a11y tree. Both the
   WP-conventional `.screen-reader-text` and the short `.sr-only` alias. */
.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* A skip-link style sr-only that becomes visible on focus (keyboard users). */
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto; height: auto;
  margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

/* Visible focus ring consistent with the CRT skin. `.btn` / inputs / checks /
   toggles already carry tuned :focus-visible above; this broadens it to links
   and any other keyboard-reachable control (accordion heads, segmented tabs,
   dismiss/close buttons, modal triggers, agent-select) WITHOUT removing the
   existing outlines. Pointer focus stays clean; only keyboard focus paints. */
a:focus-visible,
[tabindex]:focus-visible,
.acc-head:focus-visible,
.seg-btn:focus-visible,
.tab:focus-visible,
.modal-close:focus-visible,
.alert-dismiss:focus-visible,
.arneiron-nc-dismiss:focus-visible,
.arneiron-ac-select:focus-visible,
[data-modal-open]:focus-visible,
[data-modal-close]:focus-visible,
[data-buy]:focus-visible {
  outline: 2px solid var(--c-whitehot);
  outline-offset: 2px;
}

/* =============================================================================
   17. STATES (UNIT H05 — loading / empty / error / disabled)
   A token-only, reduced-motion-safe state layer for the chat-commerce + account
   blocks. Additive: nothing here overrides a component skin — these are opt-in
   classes/attributes that render.php + save.js (and the ai-chatboxes plugin) can
   toggle. All motion is decorative and is neutralised by the §16 reduced-motion
   guard below (the universal `*` rule + the explicit shimmer/pulse entries).
   ========================================================================== */

/* --- SKELETON / SHIMMER LOADERS ----------------------------------------------
   `.skeleton` is a single placeholder bar; `.skeleton-block` a padded stack of
   them. The shimmer is a transl/opacity-free background sweep (compositor-cheap;
   the CRT is opacity-only per H06 — this paints background-position, which stays
   off the main thread for a small element and is fully suppressed by RM). */
.skeleton, .skeleton-line {
  display: block; position: relative; overflow: hidden;
  background: var(--c-panel-2);
  border: 1px solid var(--c-grid);
  min-height: 0.85em; border-radius: 0;
}
.skeleton::after, .skeleton-line::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, var(--c-grid-2) 45%, var(--c-grid-2) 55%, transparent 100%);
  background-size: 220% 100%;
  opacity: .55;
  animation: skeleton-shimmer 1.25s var(--ease-smooth) infinite;
}
@keyframes skeleton-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skeleton-line { height: 0.85em; margin: 6px 0; }
.skeleton-line.w-1\/2 { width: 50%; } .skeleton-line.w-3\/4 { width: 75%; } .skeleton-line.w-1\/4 { width: 25%; }
.skeleton-block { display: flex; flex-direction: column; gap: 8px; padding: var(--sp-3) 0; }
.skeleton--chip { width: 88px; height: 1.6em; }
.skeleton--avatar { width: 40px; height: 40px; flex: none; }
/* host-driven loading: a block marked [data-loading]/`.is-loading` dims live
   content + blocks pointer events while its skeleton (a sibling) shows. */
.is-loading, [data-loading="true"] { position: relative; }
.is-loading > :not(.skeleton-block):not(.state-loading),
[data-loading="true"] > :not(.skeleton-block):not(.state-loading) { opacity: .35; pointer-events: none; }
.state-loading { display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-ink-dim); padding: var(--sp-4); }

/* --- EMPTY STATES ------------------------------------------------------------
   Friendly, on-brand "nothing here yet" panel. Used by chat-history, spend-
   breakdown, usage tables, notification-center, agent lists, invoice lists. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3); padding: var(--sp-6) var(--sp-5);
  background: var(--grad-panel); border: 2px dashed var(--c-grid-2); }
.empty-state .empty-ico { width: 40px; height: 40px; display: grid; place-items: center;
  border: 2px solid var(--c-grid-2); color: var(--c-ink-faint);
  font-family: var(--f-display); font-weight: 900; font-size: var(--fs-lg); }
.empty-state .empty-title { font-family: var(--f-ui); font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--c-ink); }
.empty-state .empty-text { font-family: var(--f-mono); font-size: var(--fs-sm); color: var(--c-ink-dim);
  max-width: 42ch; }
.empty-state .empty-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
  margin-top: var(--sp-2); }

/* --- ERROR + RETRY -----------------------------------------------------------
   A compact inline error affordance with a clear retry control. Complements the
   richer `.alert--error` block (kept) for cases that need a one-line, retryable
   failure (a failed stream, a ledger fetch, a checkout call). */
.state-error { display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--grad-panel);
  border: 2px solid var(--c-error); border-left-width: 8px; }
.state-error .err-ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border: 2px solid currentColor; color: var(--c-error); font-family: var(--f-ui); font-weight: 700; }
.state-error .err-body { flex: 1; }
.state-error .err-title { font-family: var(--f-ui); font-weight: 700; color: var(--c-ink); letter-spacing: .5px; }
.state-error .err-text { font-family: var(--f-mono); font-size: var(--fs-xs); color: var(--c-ink-dim); }
.state-error .err-retry { flex: none; align-self: center; }
/* retry button micro-affordance: an arrow that nudges on hover (transform only) */
.btn .retry-ico { display: inline-block; width: 0; height: 0; border-style: solid;
  border-width: 4px 6px 4px 0; border-color: transparent currentColor transparent transparent;
  margin-right: 6px; transition: transform var(--t-fast) var(--ease-smooth); }
.btn:hover .retry-ico { transform: translateX(-2px); }

/* --- DISABLED TREATMENT (broaden beyond .btn) --------------------------------
   The §5 .btn[disabled] skin is the canonical disabled look. Extend the same
   "inert + not-allowed" semantics to seg-btns, presets, chips, tabs, link-btns,
   and any [aria-disabled="true"] / [data-disabled] control so disabled reads
   consistently everywhere (no half-active controls). */
[aria-disabled="true"], [data-disabled="true"],
.seg-btn.is-disabled, .preset.is-disabled, .tab.is-disabled, .chip.is-disabled {
  cursor: not-allowed; opacity: .45; filter: saturate(.6);
  pointer-events: none; user-select: none;
}
/* a control that is "busy" (request in flight): keep it visible but inert + show
   the spinner glyph in place of its label affordance. */
.is-busy { pointer-events: none; position: relative; }
.btn.is-busy { color: transparent; }
.btn.is-busy::after { content: ""; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--c-whitehot);
  border-right-color: transparent; border-radius: 50%;
  animation: btn-spin .7s linear infinite; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* =============================================================================
   18. MICRO-INTERACTIONS (UNIT H05)
   Compositor-friendly polish: transform/opacity only (H06 verified the CRT is
   opacity-only — kept that way). All of this is suppressed under §16 RM.
   ========================================================================== */

/* lift + glow on interactive cards/tiles/agent-cards (transform+shadow only) */
.stat.hud-frame, .agent-card, .package, .pkg-card, .pricing-card, .feature-card {
  transition: transform var(--t-mid) var(--ease-smooth), box-shadow var(--t-mid) var(--ease-smooth);
}
.agent-card:hover, .package:hover, .pkg-card:hover, .pricing-card:hover, .feature-card:hover {
  transform: translateY(-2px); box-shadow: var(--sh-block), var(--sh-glow-soft);
}
.agent-card:focus-within, .package:focus-within, .pkg-card:focus-within {
  box-shadow: var(--sh-block), var(--sh-glow-soft);
}
/* seg-btn / preset / tab active-press feedback (transform only) */
.seg-btn, .preset, .tab { transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease); }
.seg-btn:active, .preset:active, .tab:active { transform: translateY(1px); }

/* balance-update pulse — fired on arneiron:usage by fx.js (rpRefreshBalance). A
   brief opacity/scale tick on the balance value; transform/opacity only. */
.balance-chip .v, .value-pill .v, [data-ledger-bind] { transition: color var(--t-mid) var(--ease-smooth); }
.is-pulsing { animation: balance-pulse .55s var(--ease-smooth); }
@keyframes balance-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.08); text-shadow: var(--sh-glow-soft); }
  100% { transform: scale(1); }
}
/* low-balance attention tick (subtle, non-looping unless .is-low persists) */
.balance-chip.is-low .coin { animation: low-tick 1.8s var(--ease-smooth) infinite; }
@keyframes low-tick { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* composer send arrow nudge on focus/hover of the field (transform only) */
.composer.is-focus .send .arrow, .composer .send:hover .arrow { transform: translateX(2px); }
.composer .send .arrow { transition: transform var(--t-fast) var(--ease-smooth); }

/* toast: gentle exit slide already handled in §10; add a hover-pause affordance
   cue (cursor) so users know they can dismiss. */
.toast { cursor: pointer; }
.toast:hover { box-shadow: var(--sh-block), var(--sh-glow-soft); }

/* count-up / streaming caret easing lives in fx.js; the caret blink is §8. Here
   we just make freshly-streamed text fade its trailing space in cleanly. */
[data-stream] { transition: opacity var(--t-fast); }

/* prefers-reduced-motion: respect users who disable motion. Neutralize the
   decorative CRT/streaming/count-up/toast/spinner animations + transitions.
   (The CRT flicker already had a guard above; this widens the net.) The
   streaming-typewriter caret + JS count-up still settle on their final value —
   only the animation is removed, not the content. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .caret { animation: none !important; opacity: 1; }
  .crt-overlay.crt-flicker::before,
  .toast,
  .toast.is-out,
  .spinner { animation: none !important; }
  /* H05 state/micro-interaction motion — explicit belt-and-braces over the
     universal rule above. The states still render (skeleton bar, busy spinner,
     pulse) — only the animation is removed, the final/static look is kept. */
  .skeleton::after, .skeleton-line::after { animation: none !important; opacity: .4; }
  .btn.is-busy::after { animation: none !important; }
  .balance-chip.is-low .coin { animation: none !important; }
  .is-pulsing { animation: none !important; }
}

/* ===================================================================== */
/* HOTFIX 2026-07-03 — app-shell grid vs block-template rendering.       */
/* WP wraps each template part in a .wp-block-template-part div, so the  */
/* direct-child (>) grid-area mapping at §.app--sidebar never matched    */
/* and header/sidebar/footer auto-placed (broken /history/ layout).      */
/* Flatten the wrappers into the grid and re-pin areas depth-agnostic.   */
/* ===================================================================== */
.app > .wp-block-template-part { display: contents; }
.app--sidebar .app-header { grid-area: header; }
.app--sidebar .sidebar    { grid-area: sidebar; }
.app--sidebar .app-main   { grid-area: main; }
.app--sidebar .app-footer { grid-area: footer; }