/* =============================================================================
   SCADA - shared stylesheet
   Used by index.html, dapp.html, eth/dapp.html and operators.html.

   Design: a modern dashboard that still feels like a handheld console from the
   90s. Phosphor colours on near-black, chunky bezels, scanlines, blinking
   cursors - but with readable type, generous spacing and a real hierarchy.

   Colours live ONLY in the variables below. Four presets are keyed off
   body[data-theme]; scada-theme.js / scada.js set that attribute. The ten
   variables the charts read at runtime are marked [JS]. Keep them defined.
   ========================================================================== */

/* ===================== 1. COLOUR VARIABLES ===================== */
:root {
  /* Green CRT (default) */
  --primary-color: #2bff6f;                 /* [JS] */
  --primary-dark: #0b4d22;
  --primary-light: #6dff9d;
  --primary-lighter: #b3ffcc;
  --primary-glow: rgba(43, 255, 111, 0.35);
  --primary-glow-strong: rgba(43, 255, 111, 0.7);
  --background-dark: #040a05;
  --background-panel: #0a1a0d;              /* [JS] */
  --background-darker: #0f2414;
  --border-color: #1d4a27;                  /* [JS] */
  --text-secondary: #8fc79b;                /* [JS] */
  --warning-color: #ffe34d;
  --warning-alt: #ffb340;                   /* [JS] */
  --error-color: #ff5c5c;                   /* [JS] */
  --cyan-accent: #3ee6ff;
  --chart-color: rgba(43, 255, 111, 0.55);  /* [JS] */
  --chart-border: rgba(43, 255, 111, 1);    /* [JS] */
  --chart-grid: rgba(29, 74, 39, 0.35);     /* [JS] */
  --chart-text: #b3ffcc;                    /* [JS] */

  /* Layout tokens (theme-independent) */
  --font-display: 'VT323', 'Courier New', monospace;
  --font-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace;
  --radius: 10px;
  --radius-sm: 6px;
  --page-max: 1240px;
  --gutter: 16px;
  --header-h: 60px;
  --text-primary: #e6ffe9;
}

/* Amber Terminal */
body[data-theme="amber"] {
  --primary-color: #ffb000;
  --primary-dark: #4d3300;
  --primary-light: #ffc84d;
  --primary-lighter: #ffe3a6;
  --primary-glow: rgba(255, 176, 0, 0.35);
  --primary-glow-strong: rgba(255, 176, 0, 0.7);
  --background-dark: #0a0702;
  --background-panel: #1a1204;
  --background-darker: #241a08;
  --border-color: #4a3610;
  --text-secondary: #d1b280;
  --warning-color: #fff07a;
  --warning-alt: #ff8c3a;
  --error-color: #ff5c5c;
  --cyan-accent: #7ae3ff;
  --chart-color: rgba(255, 176, 0, 0.55);
  --chart-border: rgba(255, 176, 0, 1);
  --chart-grid: rgba(74, 54, 16, 0.4);
  --chart-text: #ffe3a6;
  --text-primary: #fff3dc;
}

/* Blue Vault */
body[data-theme="blue"] {
  --primary-color: #3dd6ff;
  --primary-dark: #063a4d;
  --primary-light: #7ae3ff;
  --primary-lighter: #c2f1ff;
  --primary-glow: rgba(61, 214, 255, 0.35);
  --primary-glow-strong: rgba(61, 214, 255, 0.7);
  --background-dark: #02070a;
  --background-panel: #061820;
  --background-darker: #0a2230;
  --border-color: #114457;
  --text-secondary: #8cc3d6;
  --warning-color: #ffe34d;
  --warning-alt: #ffb340;
  --error-color: #ff5c7a;
  --cyan-accent: #9dff6a;
  --chart-color: rgba(61, 214, 255, 0.55);
  --chart-border: rgba(61, 214, 255, 1);
  --chart-grid: rgba(17, 68, 87, 0.4);
  --chart-text: #c2f1ff;
  --text-primary: #e3f8ff;
}

/* Purple Haze */
body[data-theme="purple"] {
  --primary-color: #d470ff;
  --primary-dark: #3d0c57;
  --primary-light: #e39bff;
  --primary-lighter: #f1d0ff;
  --primary-glow: rgba(212, 112, 255, 0.35);
  --primary-glow-strong: rgba(212, 112, 255, 0.7);
  --background-dark: #07020a;
  --background-panel: #140820;
  --background-darker: #1c0c2c;
  --border-color: #3d1a57;
  --text-secondary: #c39ad6;
  --warning-color: #ffe34d;
  --warning-alt: #ffb340;
  --error-color: #ff5c7a;
  --cyan-accent: #5af0ff;
  --chart-color: rgba(212, 112, 255, 0.55);
  --chart-border: rgba(212, 112, 255, 1);
  --chart-grid: rgba(61, 26, 87, 0.4);
  --chart-text: #f1d0ff;
  --text-primary: #f6e8ff;
}

/* ===================== 2. BASE ===================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background-dark);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.55;
  transition: background 0.4s ease, color 0.4s ease;
  overflow-x: hidden;
}

/* Vignette only. Purely decorative, never catches the pointer.
   The CRT scanline overlay that used to sit on body::before is gone: a 2px-on,
   2px-off gradient across the whole viewport softened every edge under it,
   text worst of all, which read as the page being out of focus. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 8999;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.55) 100%);
}

a { color: var(--primary-color); text-decoration: none; }
a:hover { color: var(--primary-light); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 8px;
  color: var(--primary-color);
  text-shadow: 0 0 10px var(--primary-glow);
  line-height: 1.05;
}
h1 { font-size: 2.6rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 10px; padding-left: 22px; }
li { margin: 3px 0; }

strong { color: var(--primary-lighter); font-weight: 600; }

code, .mono { font-family: var(--font-mono); }

img, svg { max-width: 100%; }

button { font-family: inherit; }

::selection { background: var(--primary-color); color: var(--background-dark); }

.hidden { display: none !important; }
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

.muted, .label { color: var(--text-secondary); }

/* ===================== 3. HEADER / NAV ===================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25)), var(--background-panel);
  border-bottom: 2px solid var(--border-color);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 0 14px var(--primary-glow);
  backdrop-filter: blur(6px);
}

.site-header-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  letter-spacing: 0.14em;
  color: var(--primary-color);
  text-shadow: 0 0 12px var(--primary-glow-strong);
  white-space: nowrap;
}
.brand-mark {
  display: inline-block;
  width: 12px;
  height: 20px;
  background: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-glow-strong);
  animation: blink 1.4s step-start infinite;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

/* height matches .net-switch .control-select, so the active link's green pill
   and the outlined PULSECHAIN box are the same size in the same row. Both are
   border-box, so 32px is the whole thing, border included. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font-family: var(--font-display);
  /* Eight tabs have to fit inside the header's capped 1240px beside the brand
     and the tools, which on every page but the landing one include NET and the
     chain dropdown. A media query cannot do it: the cap is a constant, so above
     1240px the header is the same size whatever the window and no breakpoint
     fires.

     Measured, the row had about 785px and wanted about 800px - fifteen short.
     So the size stays exactly as it was and the room comes from the spacing
     either side of the words instead, which leaves ~70px to spare. Shrinking
     the face was the wrong lever: it made the tabs smaller than the body text
     to buy space that was never needed. */
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  padding: 0 9px;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav a:hover {
  color: var(--primary-light);
  background: rgba(255, 255, 255, 0.03);
}
.site-nav a.active {
  color: var(--background-dark);
  background: var(--primary-color);
  text-shadow: none;
  box-shadow: 0 0 12px var(--primary-glow);
}

.header-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--primary-color);
  font-size: 1.2rem;
  width: 40px;
  height: 36px;
  cursor: pointer;
}

/* Network switch - the <select> the engine drives (hard navigation between
   the PulseChain and Ethereum builds). */
.net-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.net-switch .control-select {
  flex: none;
  min-width: 0;
  height: 32px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  padding: 2px 28px 2px 10px;
}

/* Theme selector - four phosphor dots. scada-theme.js / scada.js toggle
   .active on the chosen one. */
.theme-selector {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--background-dark);
}
.theme-circle {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
  transition: transform 0.15s ease;
}
.theme-circle:hover { transform: scale(1.15); }
.theme-circle.active {
  transform: scale(1.2);
  outline: 1px solid var(--primary-lighter);
  outline-offset: 2px;
}
.theme-inner {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
}
.theme-circle[data-theme="green"]  .theme-inner { background: radial-gradient(circle, #2bff6f, #0b4d22); box-shadow: 0 0 6px rgba(43, 255, 111, 0.9); }
.theme-circle[data-theme="amber"]  .theme-inner { background: radial-gradient(circle, #ffb000, #4d3300); box-shadow: 0 0 6px rgba(255, 176, 0, 0.9); }
.theme-circle[data-theme="blue"]   .theme-inner { background: radial-gradient(circle, #3dd6ff, #063a4d); box-shadow: 0 0 6px rgba(61, 214, 255, 0.9); }
.theme-circle[data-theme="purple"] .theme-inner { background: radial-gradient(circle, #d470ff, #3d0c57); box-shadow: 0 0 6px rgba(212, 112, 255, 0.9); }

/* Registry badge: the only link to registry.html on the site. */
.banner-registry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border-color);
  border-radius: 50%;
  background: var(--background-dark);
  color: var(--primary-color);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.banner-registry:hover { border-color: var(--primary-color); box-shadow: 0 0 10px var(--primary-glow); }
.banner-registry img, .banner-registry svg { width: 20px; height: 20px; display: block; }

/* Wallet bar - sits under the header on the dApp pages. */
.wallet-bar {
  background: var(--background-darker);
  border-bottom: 1px solid var(--border-color);
}
.wallet-bar-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 8px var(--gutter);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.wb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}
.wb-label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
}
.wallet-bar .metric-value { min-width: 0; }
.wallet-bar .control-button { margin: 0 0 0 auto; }

/* ===================== 4. PAGE LAYOUT ===================== */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 22px var(--gutter) 40px;
  min-width: 0;
}
.liq-table, .locks-list, .vault-locks-scroll { max-width: 100%; overflow-x: auto; }

.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeUp 0.25s ease; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.tab-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.tab-intro h1 { margin: 0; }
.tab-intro p { color: var(--text-secondary); max-width: 64ch; margin: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.grid-2 > .panel, .grid-3 > .panel { margin-bottom: 0; }
.span-2 { grid-column: span 2; }

.section-title {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 12px;
}
.section-title h2 { margin: 0; font-size: 1.6rem; }
.section-title .muted { font-size: 0.85rem; }

/* ===================== 5. PANELS ===================== */
.panel {
  position: relative;
  background: var(--background-panel);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  padding: 16px 18px 18px;
  margin-bottom: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(0, 0, 0, 0.45),
    0 0 10px var(--primary-glow);
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Bezel corner screws */
.panel::before, .panel::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-color);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.8);
  top: 7px;
}
.panel::before { left: 7px; }
.panel::after { right: 7px; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.panel-title {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-glow);
}
.panel-subtitle {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin: -6px 0 12px;
}
.panel-note {
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.6;
  margin-top: 10px;
}
.panel-note a, .liq-note a, .liq-detail a { border-bottom: 1px dotted var(--border-color); }

/* The status lamp. The engine adds .status-offline when a read fails. */
.status-indicator {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 8px var(--primary-glow-strong);
  animation: pulse 2s infinite;
}
.status-indicator.status-active { animation: none; }
.status-offline {
  background: var(--error-color);
  box-shadow: 0 0 8px rgba(255, 92, 92, 0.8);
  animation: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
@keyframes blink {
  50% { opacity: 0; }
}

/* Key / value rows */
.metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 0.9rem;
}
.metric-label { color: var(--text-secondary); }
.metric-value {
  background: var(--background-dark);
  padding: 3px 10px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-width: 80px;
  text-align: right;
  color: var(--primary-lighter);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.metric-value.highlight, .vault-metric-value.highlight {
  color: var(--warning-color);
  text-shadow: 0 0 6px rgba(255, 227, 77, 0.5);
}
.metric-value.address, .vault-metric-value.address { font-size: 0.85em; }

/* Stat tiles - the big numbers */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.stat-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.9vw, 2.2rem);
  line-height: 1.05;
  color: var(--primary-color);
  text-shadow: 0 0 12px var(--primary-glow);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}
.stat-primary .stat-value { font-size: clamp(2rem, 2.4vw, 2.8rem); }
/* The tile is a flex column and this is its last child, so the caption used
   to sit wherever the content above it ended - and the longest caption wraps
   to two lines while the others do not, leaving them at different heights.
   margin-top: auto drops it to the tile's foot (the grid stretches tiles in
   a row to match), and reserving two lines means a one-line caption starts
   at the same baseline as one that wraps. */
.stat-sub {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-secondary);
  margin-top: auto;
  min-height: 2.7em;
}

/* Progress bars */
.progress-bar {
  width: 100%;
  height: 16px;
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  margin: 8px 0;
  position: relative;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--primary-color) 0 6px, var(--primary-dark) 6px 8px);
  box-shadow: 0 0 10px var(--primary-glow);
  transition: width 0.4s ease;
}
.progress-text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  text-shadow: 0 0 4px #000, 0 0 2px #000;
}

/* ===================== 6. CONTROLS ===================== */
.controls {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.inline-controls { flex-wrap: nowrap; }
.controls.center { justify-content: center; }

.control-button {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary-color);
  background: var(--background-darker);
  border: 2px solid var(--border-color);
  border-bottom-width: 4px;
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
}
.control-button:hover {
  color: var(--primary-light);
  border-color: var(--primary-color);
  box-shadow: 0 0 10px var(--primary-glow);
}
.control-button:active { transform: translateY(2px); border-bottom-width: 2px; }
.control-button:disabled, .control-button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
.control-button.primary {
  background: var(--primary-color);
  color: var(--background-dark);
  border-color: var(--primary-dark);
  box-shadow: 0 0 14px var(--primary-glow);
}
.control-button.primary:hover { background: var(--primary-light); color: var(--background-dark); }
.control-button.small, .small-button { font-size: 0.95rem; padding: 4px 10px; border-bottom-width: 3px; }
.control-button.big { font-size: 1.45rem; padding: 10px 20px; width: 100%; }

.control-select, .control-input {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--primary-lighter);
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  height: 36px;
  flex: 1;
  min-width: 0;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.control-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, var(--primary-color) 50%), linear-gradient(135deg, var(--primary-color) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.control-select option { background: var(--background-panel); color: var(--text-primary); }
.control-input { -moz-appearance: textfield; appearance: textfield; }
.control-input::-webkit-inner-spin-button, .control-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.control-input::placeholder { color: var(--text-secondary); opacity: 0.7; }
.control-select:focus, .control-input:focus, .form-group input:focus, .mini:focus, #chat-input:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 8px var(--primary-glow);
}

/* Supply TOTAL / CIRC toggle (scada.js + liquidity.js). Tooltip from title. */
.toggle-supply-btn {
  position: relative;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--background-dark);
  background: var(--primary-color);
  border: 1px solid var(--primary-dark);
  border-radius: 4px;
  padding: 1px 8px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.3;
}
.toggle-supply-btn:hover { background: var(--primary-light); }
.toggle-supply-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.toggle-supply-btn::before {
  content: attr(title);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--background-dark);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 5px 9px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
}
.toggle-supply-btn:hover::before { opacity: 1; }

/* ===================== 7. SYSTEM LOG (console dock) ===================== */
.console-dock {
  max-width: var(--page-max);
  margin: 0 auto 30px;
  padding: 0 var(--gutter);
}
.console-dock .panel { margin-bottom: 0; }
.console-dock .panel-header { cursor: pointer; user-select: none; margin-bottom: 0; }
.console-dock.collapsed .panel-header { border-bottom: 0; padding-bottom: 0; }
.console-dock.collapsed .console-body { display: none; }
.console-body { margin-top: 10px; display: flex; flex-direction: column; }
.dock-toggle {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  padding: 2px 8px;
  cursor: pointer;
}
.dock-toggle:hover { color: var(--primary-color); border-color: var(--primary-color); }
.dock-head-right { display: flex; align-items: center; gap: 10px; }

.log-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--border-color);
}
.log-tab {
  background: transparent;
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  color: var(--text-secondary);
  padding: 3px 12px;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.log-tab:hover { color: var(--primary-color); }
.log-tab-active, .log-tab-active:hover {
  background: var(--primary-color);
  color: var(--background-dark);
  border-color: var(--primary-color);
}
.log-tab-pane { display: none; flex-direction: column; }
.log-tab-pane-active { display: flex; }

.log-container {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 10px;
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  border-top: 0;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-size: 0.8rem;
  line-height: 1.5;
}

/* One scrollbar for every panel that scrolls, instead of the browser default
   on some and a themed one on others. Firefox reads the two standard
   properties; WebKit needs its own pseudo-elements, so both are given. The
   colours are variables, so the bar follows whichever theme is on. */
.log-container,
.vault-locks-scroll,
.modal-content {
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) var(--background-dark);
}
.log-container::-webkit-scrollbar,
.vault-locks-scroll::-webkit-scrollbar,
.modal-content::-webkit-scrollbar { width: 10px; }
.log-container::-webkit-scrollbar-track,
.vault-locks-scroll::-webkit-scrollbar-track,
.modal-content::-webkit-scrollbar-track { background: var(--background-dark); }
.log-container::-webkit-scrollbar-thumb,
.vault-locks-scroll::-webkit-scrollbar-thumb,
.modal-content::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 5px; }
.log-container::-webkit-scrollbar-thumb:hover,
.vault-locks-scroll::-webkit-scrollbar-thumb:hover,
.modal-content::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

.log-entry { word-break: break-word; }
.log-timestamp { color: var(--text-secondary); opacity: 0.8; }
.log-info { color: var(--primary-lighter); }
.log-warn { color: var(--warning-color); }
.log-error { color: var(--error-color); }
.log-cursor {
  display: inline-block;
  color: var(--primary-color);
  animation: blink 1s step-start infinite;
}

/* Chat (kept in the DOM for the engine, not shown) */
.chat-pane-toolbar { display: flex; justify-content: flex-end; padding: 4px 0; }
.chat-show-all-btn {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.chat-input-container { display: flex; gap: 8px; margin-top: 8px; }
#chat-input {
  flex: 1;
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-primary);
  font-family: var(--font-mono);
}
.chat-message { color: var(--text-primary); }
.chat-message .log-timestamp { color: var(--text-secondary); }
.chat-sender { color: var(--cyan-accent); font-weight: 600; }

/* ===================== 8. ENGINE / HEALTH ===================== */
.engine-health {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px;
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
}
.engine-health .eh-label { color: var(--text-secondary); }
#engine-health-text { font-size: 1.5rem; }
#engine-health-status { font-size: 1.4rem; line-height: 1; }

.engine-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; }
.chart-box { position: relative; height: 240px; }
.chart-title {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.engine-stats .metric { font-size: 0.88rem; }
.engine-stats .divider { border-top: 1px solid var(--border-color); margin: 10px 0; }

/* ===================== 9. LIQUIDITY MAP ===================== */
.liq-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.liq-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  min-width: 0;
}
.liq-stat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.liq-stat-head .toggle-supply-btn { padding: 0 6px; font-size: 0.85rem; }
.liq-stat-label {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.liq-stat-value {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.05;
  color: var(--primary-color);
  text-shadow: 0 0 8px var(--primary-glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.liq-stat-hero { font-size: 2.4rem; }
.liq-stat-sub { font-size: 0.75rem; color: var(--text-secondary); }

.liq-table {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--background-dark);
}
.liq-head, .liq-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) 80px 105px 105px 100px 150px;
  gap: 10px;
  padding: 9px 12px;
  align-items: center;
  font-size: 0.85rem;
}
.liq-head {
  background: var(--background-darker);
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.liq-row { border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.15s ease; }
.liq-row:last-child { border-bottom: 0; }
.liq-row:hover, .liq-row:focus-visible, .liq-row-open { background: var(--background-darker); outline: none; }
.liq-caret { display: inline-block; width: 12px; color: var(--text-secondary); }
.liq-c-pair { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.liq-c-dex { color: var(--text-secondary); text-transform: uppercase; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; }
.liq-c-usd, .liq-c-scada { text-align: right; font-variant-numeric: tabular-nums; color: var(--primary-lighter); }
/* Volume is a flow, not a holding, so it reads quieter than the depth
   figures beside it rather than competing with them. */
.liq-c-vol { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.liq-c-burned { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.liq-burned-pct { min-width: 56px; text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.liq-burned-high { color: var(--primary-color); font-weight: 600; text-shadow: 0 0 6px var(--primary-glow); }
.liq-bar {
  flex: 1;
  min-width: 40px;
  height: 8px;
  background: var(--background-panel);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  display: block;
  position: relative;
  overflow: hidden;
}
.liq-bar-fill { display: block; height: 100%; background: var(--primary-color); box-shadow: 0 0 6px var(--primary-glow); transition: width 0.3s ease; }
.liq-tag { font-size: 0.78em; letter-spacing: 0.04em; vertical-align: middle; white-space: nowrap; }
.liq-tag-control { color: var(--primary-color); }
.liq-tag-v3 { color: var(--warning-alt); }
.liq-tag-derived { color: var(--text-secondary); }

.liq-detail {
  padding: 10px 12px 12px 30px;
  background: var(--background-panel);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.8rem;
}
.liq-detail-line { display: grid; grid-template-columns: minmax(0, 1fr) 120px 70px 100px; gap: 10px; padding: 3px 0; align-items: center; }
.liq-detail-label { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.liq-detail-label em { font-style: normal; opacity: 0.6; font-size: 0.9em; }
.liq-detail-val, .liq-detail-pct { text-align: right; color: var(--primary-lighter); font-variant-numeric: tabular-nums; }
.liq-detail-addr { text-align: right; }
.liq-detail-total { border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin: 4px 0; padding: 5px 0; font-weight: 600; }
.liq-detail-total .liq-detail-label, .liq-detail-total .liq-detail-val, .liq-detail-total .liq-detail-pct { color: var(--primary-color); }
.liq-detail-note { color: var(--text-secondary); line-height: 1.5; margin-bottom: 6px; }
.liq-detail-links { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.liq-detail-supply { color: var(--text-secondary); opacity: 0.7; }
.liq-empty { padding: 18px 12px; text-align: center; color: var(--text-secondary); }
.error-text { color: var(--error-color); }
.liq-note { margin-top: 12px; font-size: 0.78rem; line-height: 1.6; color: var(--text-secondary); }
.liq-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.liq-updated { font-size: 0.78rem; color: var(--text-secondary); }

.liq-tier-btn { font-size: 0.95rem; padding: 2px 10px; margin: 0 auto 0 12px; border-bottom-width: 2px; }
.liq-tier-btn.on {
  color: var(--background-dark);
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* ===================== 10. VAULTS / TOKEN LOCKER ===================== */
.vault-locks-header, .vault-locks-row {
  display: grid;
  grid-template-columns: 50px 1fr 1fr 1fr;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px dashed var(--border-color);
  align-items: center;
  font-size: 0.85rem;
}
.vault-locks-header {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}
.vault-locks-header span, .vault-locks-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-locks-row span:nth-child(2), .vault-locks-header span:nth-child(2) { text-align: right; color: var(--cyan-accent); }
.vault-locks-row span:nth-child(3), .vault-locks-header span:nth-child(3) { text-align: center; color: var(--warning-color); }
.vault-locks-row span:nth-child(4), .vault-locks-header span:nth-child(4) { text-align: right; }
.vault-locks-row:hover { background: var(--background-darker); }
.vault-locks-scroll { max-height: 240px; overflow-y: auto; background: var(--background-dark); border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin: 10px 0; }

.collapsible-header { cursor: pointer; user-select: none; }
.collapsible-header:hover .panel-title { color: var(--primary-light); }
.collapse-caret {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-secondary);
  margin-right: 8px;
  user-select: none;
}
#token-locker-toggle, #how-scada-toggle { display: none; }  /* chevron text comes from the engine; we use the whole header instead */

.vault-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 10px 0 14px; }
.vault-action {
  padding: 12px 14px;
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vault-action.primary { border-left-color: var(--primary-color); }
.vault-action p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.5; }
.vault-action .row { display: flex; gap: 8px; align-items: center; }
.vault-action .control-button { align-self: flex-start; }
.vault-action input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  color: var(--primary-lighter);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.vaults-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; }
.vault-card {
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 14px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.vault-card:hover { border-color: var(--primary-color); box-shadow: 0 0 10px var(--primary-glow); }
.vault-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.vault-name { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.06em; color: var(--primary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-locks-count { font-size: 0.78rem; color: var(--text-secondary); background: var(--background-dark); padding: 2px 8px; border-radius: 3px; white-space: nowrap; }
.vault-metric { display: flex; justify-content: space-between; gap: 8px; margin: 6px 0; font-size: 0.85rem; }
.vault-metric-label { color: var(--text-secondary); }
.vault-metric-value { color: var(--primary-lighter); font-weight: 600; }
.vault-card-footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-color); display: flex; flex-wrap: wrap; gap: 8px; }
/* flex: 1 means flex-basis: 0, which asks both buttons to ignore how wide
   their labels are. Paired with white-space: nowrap they could not shrink to
   fit either, so 'View Details' hung off the edge of a narrow card. Sizing
   from the label and allowing a wrap keeps them in: when the two cannot share
   a line they stack, each filling the width. */
.vault-card-footer button { flex: 1 1 auto; }
.transfer-ownership-btn, .view-vault-btn { white-space: nowrap; }

#vault-details {
  margin-top: 16px;
  padding: 16px;
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.vault-details-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-color); }
.vault-details-header h3 { margin: 0; }
.vault-details-info { margin: 12px 0; padding: 12px 14px; background: var(--background-dark); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.vault-details-info .metric { margin: 8px 0; }
.copy-btn {
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  color: var(--primary-color);
  padding: 2px 8px;
  margin-left: 6px;
  cursor: pointer;
  border-radius: 3px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
}
.copy-btn:hover { border-color: var(--primary-color); }
.locks-section { margin: 16px 0; }
.locks-section h4 { margin-bottom: 8px; }
.locks-list { background: var(--background-dark); border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.locks-table-header, .locks-table-row { display: grid; grid-template-columns: 50px 1fr 1.2fr 100px 110px; gap: 10px; padding: 9px 12px; align-items: center; font-size: 0.85rem; }
.locks-table-header { background: var(--background-darker); border-bottom: 1px solid var(--border-color); font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.1em; color: var(--text-secondary); }
.locks-table-header > span:nth-child(4), .locks-table-header > span:nth-child(5), .locks-table-row > span:nth-child(4), .locks-table-row > span:nth-child(5) { text-align: center; }
.locks-table-row { border-bottom: 1px solid var(--border-color); }
.locks-table-row:last-child { border-bottom: 0; }
.locks-table-row:hover { background: var(--background-darker); }
.locks-table-row.released { opacity: 0.6; }
.lock-status-text { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.1em; display: block; width: 100%; text-align: center; }
.lock-status-text.locked { color: var(--text-secondary); }
.lock-status-text.ready { color: var(--warning-color); animation: pulse 2s infinite; }
.lock-status-text.released { color: var(--primary-light); }
.released-mark { color: var(--primary-color); font-size: 1.2em; }
.lock-form-section { margin-top: 16px; padding: 14px; background: var(--background-dark); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.lock-form { display: flex; flex-direction: column; gap: 12px; }
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group label { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--primary-lighter); }
.form-group input {
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  color: var(--primary-lighter);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.form-hint { font-size: 0.78rem; color: var(--text-secondary); }
.empty-state { text-align: center; padding: 28px 16px; color: var(--text-secondary); }
.empty-state p { margin: 4px 0; }

/* ===================== 11. MODALS & TOAST ===================== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  padding: 16px;
}
.modal-content {
  background: var(--background-panel);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 0 30px var(--primary-glow);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid var(--border-color); }
.modal-header h3 { margin: 0; }
.modal-close { background: none; border: none; color: var(--primary-color); font-size: 1.8rem; cursor: pointer; line-height: 1; padding: 0 4px; }
.modal-close:hover { color: var(--error-color); }
.modal-body { padding: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border-color); }
.modal-warning { font-size: 0.85rem; color: var(--warning-color); }
.modal-info { font-size: 0.85rem; color: var(--text-secondary); }

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  background: var(--background-panel);
  color: var(--text-primary);
  border: 2px solid var(--primary-color);
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 0.9rem;
  box-shadow: 0 0 20px var(--primary-glow);
  max-width: min(90vw, 520px);
  text-align: center;
}

/* ===================== 12. LEARN / PROSE ===================== */
.prose { max-width: 78ch; }
.prose h3 { margin-top: 18px; }
.prose h4 { margin-top: 14px; color: var(--primary-lighter); }
.prose p, .prose li { color: var(--text-primary); font-size: 0.92rem; }
.prose .muted { color: var(--text-secondary); }
.callout {
  padding: 12px 14px;
  background: var(--background-darker);
  border-left: 3px solid var(--primary-color);
  border-radius: var(--radius-sm);
  margin: 12px 0;
  font-size: 0.9rem;
}
.callout.warn { border-left-color: var(--warning-color); }
.callout strong { color: var(--primary-lighter); }

.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 10px; }
.steps li {
  position: relative;
  padding: 10px 14px 10px 52px;
  background: var(--background-darker);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--background-dark);
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--primary-glow);
}

.glossary { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.glossary dt { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.08em; color: var(--primary-color); }
.glossary dd { margin: 0; font-size: 0.82rem; color: var(--text-secondary); }
.glossary > div { padding: 10px 12px; background: var(--background-darker); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }

.address-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.address-list .control-button { width: 100%; }
.address-row { display: flex; flex-direction: column; gap: 4px; }
.address-row .muted { font-size: 0.78rem; }

.video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.video-wrap { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; background: #000; }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { font-size: 0.82rem; color: var(--text-secondary); margin-top: 6px; }

.swap-frame { position: relative; width: 100%; height: 765px; overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--border-color); background: var(--background-dark); }
.dex-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dex-links a { display: inline-flex; }

.token-list { list-style: none; padding: 0; display: grid; gap: 6px; }
.token-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 0.82rem; padding: 6px 10px; background: var(--background-darker); border: 1px solid var(--border-color); border-radius: 4px; }
.token-list code { color: var(--text-secondary); font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis; }

/* ===================== 13. OPERATORS ===================== */
.phase-hero { text-align: center; padding: 14px 0 6px; }
.panel.is-complete .phase-hero { padding: 6px 0 2px; }
.phase-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 36px;
  margin: 14px 0;
  padding: 10px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  font-size: 0.88rem;
}
.phase-facts .label { margin-right: 6px; }
.phase-text { max-width: 80ch; margin: 0 auto; }
.price-big {
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--primary-color);
  text-shadow: 0 0 16px var(--primary-glow);
}
.price-unit { font-size: 0.32em; letter-spacing: 0.15em; }
.countdown {
  font-family: var(--font-display);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--warning-color);
  text-shadow: 0 0 12px rgba(255, 227, 77, 0.35);
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
#mine-grid, #rent-grid { grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.piece {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--background-darker);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.piece:hover { border-color: var(--primary-dark); box-shadow: 0 0 10px var(--primary-glow); }
.piece-art { aspect-ratio: 1; background: var(--background-dark); border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; display: grid; place-items: center; }
.art-frame { width: 100%; height: 100%; }
.art-frame svg, .art-frame img { width: 100%; height: 100%; display: block; }
.piece-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 0.85rem; }
.piece-row strong { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: 0.08em; color: var(--primary-color); }
.piece-name {
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag {
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.tag-sale { color: var(--primary-color); }
.tag-rent { color: var(--cyan-accent); }
.tag-rented { color: var(--warning-color); }
.tag-idle { color: var(--text-secondary); }

.act {
  white-space: pre-line;
  width: 100%;
  padding: 8px 10px;
  background: var(--background-panel);
  border: 1px solid var(--primary-color);
  border-bottom-width: 3px;
  border-radius: var(--radius-sm);
  color: var(--primary-color);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.act:hover:not(:disabled) { background: var(--primary-dark); box-shadow: 0 0 10px var(--primary-glow); }
.act:active:not(:disabled) { transform: translateY(1px); }
.act:disabled { cursor: not-allowed; color: var(--text-secondary); border-color: var(--border-color); opacity: 0.6; }
.act-quiet { border-color: var(--border-color); color: var(--text-secondary); }

/* A card is a flex column, so its action button used to sit wherever the rows
   above it ended, and a seven-figure price wrapped the label onto a second
   line and made that one button taller than the rest. Dropping it to the
   card's foot with two lines always reserved lines every button up: the grid
   stretches cards in a row to the same height, so the feet agree. */
.piece > .act:last-child {
  margin-top: auto;
  min-height: 3.6em;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mini {
  background: var(--background-dark);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  color: var(--primary-lighter);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 6px 8px;
  width: 100%;
}
.mini[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.mini[type="number"]::-webkit-outer-spin-button, .mini[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.inline { display: flex; gap: 6px; align-items: center; }
.inline > .mini { flex: 1 1 auto; }
.inline > .act { width: auto; white-space: nowrap; }

.note { color: var(--text-secondary); font-size: 0.88rem; line-height: 1.6; }
.note strong { color: var(--primary-color); font-weight: 500; }
.stat-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: 0.88rem;
}
.stat-row strong { color: var(--primary-color); }

.connect {
  padding: 6px 14px;
  background: var(--primary-color);
  border: 2px solid var(--primary-dark);
  border-bottom-width: 4px;
  border-radius: var(--radius-sm);
  color: var(--background-dark);
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.connect:hover:not(:disabled) { background: var(--primary-light); }
.connect:disabled { opacity: 0.5; cursor: not-allowed; }

.empty { color: var(--text-secondary); font-size: 0.9rem; padding: 18px 0; grid-column: 1 / -1; }
.sub-title { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary-light); margin: 24px 0 0; }
.grid + .sub-title { border-top: 1px solid var(--border-color); margin-top: 30px; padding-top: 22px; }
.sub-note { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.55; max-width: 78ch; margin: 3px 0 0; }

.field { display: flex; flex-direction: column; gap: 3px; }
.field .cap { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); }
.field-box { display: flex; align-items: center; background: var(--background-dark); border: 1px solid var(--border-color); border-radius: 3px; padding-right: 8px; }
.field-box:focus-within { border-color: var(--primary-color); }
.field-box .mini { border: 0; background: transparent; padding: 6px 8px; min-width: 0; }
.field-box .mini:focus { outline: none; box-shadow: none; }
.field-box .unit { font-size: 0.7rem; letter-spacing: 0.1em; color: var(--text-secondary); white-space: nowrap; }

.tools { border-top: 1px solid var(--border-color); padding-top: 9px; margin-top: 2px; display: flex; flex-direction: column; gap: 7px; }
.tools-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tools-title { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary-light); }
.tools-hint { font-size: 0.72rem; color: var(--text-secondary); }
.state { font-size: 0.82rem; line-height: 1.5; color: var(--text-secondary); }
.state strong { color: var(--primary-color); font-weight: 500; }
.state + .state { margin-top: 5px; }

/* ===================== 14. HOME (index.html) ===================== */
.hero {
  position: relative;
  padding: 64px 0 40px;
  text-align: center;
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--border-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-color) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.18;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.hero-kicker {
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.3em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 14vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.1em;
  color: var(--primary-color);
  text-shadow: 0 0 24px var(--primary-glow-strong), 0 0 60px var(--primary-glow);
  margin: 0;
}
.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3vw, 1.7rem);
  letter-spacing: 0.18em;
  color: var(--primary-lighter);
  min-height: 1.6em;
  margin: 12px 0 18px;
}
.hero-subtitle::after { content: '█'; animation: blink 1s step-start infinite; margin-left: 2px; }
.hero-pitch {
  max-width: 62ch;
  margin: 0 auto 26px;
  color: var(--text-primary);
  font-size: 1.05rem;
}
/* A pitch paragraph that introduces the link directly beneath it, so the
   two read as one unit instead of two stacked blocks. */
.hero-pitch.lead-in { margin-bottom: 14px; }

.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-color);
  border-bottom-width: 5px;
  background: var(--background-panel);
  color: var(--primary-color);
  transition: transform 0.05s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cta:hover { border-color: var(--primary-color); box-shadow: 0 0 14px var(--primary-glow); color: var(--primary-light); }
.cta:active { transform: translateY(2px); border-bottom-width: 3px; }
.cta.primary { background: var(--primary-color); color: var(--background-dark); border-color: var(--primary-dark); box-shadow: 0 0 18px var(--primary-glow); }
.cta.primary:hover { background: var(--primary-light); color: var(--background-dark); }

.home-section { padding: 36px 0 8px; }
.home-section > h2 { font-size: 2.2rem; text-align: center; }
.home-section > .lead { text-align: center; color: var(--text-secondary); max-width: 64ch; margin: 0 auto 24px; }

.flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  margin: 24px 0 8px;
}
.flow-node {
  position: relative;
  padding: 18px 14px;
  background: var(--background-panel);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  text-align: center;
  box-shadow: 0 0 10px var(--primary-glow);
}
.flow-node + .flow-node { margin-left: 28px; }
.flow-node + .flow-node::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 50%;
  width: 28px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--primary-color) 0 6px, transparent 6px 10px);
  animation: flowDash 0.9s linear infinite;
}
@keyframes flowDash { to { background-position: 10px 0; } }
.flow-step { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.25em; color: var(--text-secondary); }
.flow-name { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: 0.1em; color: var(--primary-color); text-shadow: 0 0 10px var(--primary-glow); }
.flow-desc { font-size: 0.82rem; color: var(--text-secondary); margin-top: 6px; }
.flow-node.supply { border-color: var(--primary-color); box-shadow: 0 0 20px var(--primary-glow); }

.big-numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.big-number { text-align: center; padding: 18px 12px; background: var(--background-darker); border: 1px solid var(--border-color); border-radius: var(--radius-sm); }
.big-number .n { font-family: var(--font-display); font-size: 3.2rem; line-height: 1; color: var(--primary-color); text-shadow: 0 0 14px var(--primary-glow); }
.big-number .l { font-size: 0.85rem; color: var(--text-secondary); margin-top: 6px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.card {
  padding: 18px;
  background: var(--background-panel);
  border: 2px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: 0 0 10px var(--primary-glow);
}
.card-tag { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.25em; color: var(--text-secondary); margin-bottom: 4px; }
.card h3 { font-size: 1.5rem; }
.card p, .card li { font-size: 0.88rem; color: var(--text-primary); }
.card .highlight { color: var(--primary-color); }
.card ul { padding-left: 18px; }
.card.link { display: block; transition: border-color 0.15s ease, transform 0.15s ease; }
.card.link:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.card .arrow { font-family: var(--font-display); color: var(--primary-color); letter-spacing: 0.1em; display: block; margin-top: 10px; }

.chain-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; }
.chain-tab {
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
  padding: 8px 20px;
  background: transparent;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
}
.chain-tab.active { background: var(--primary-color); color: var(--background-dark); border-color: var(--primary-color); box-shadow: 0 0 12px var(--primary-glow); }
.chain-content { display: none; }
.chain-content.active { display: block; animation: fadeUp 0.25s ease; }
.network-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.network-item { padding: 10px 12px; background: var(--background-darker); border: 1px solid var(--border-color); border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.network-item-label { font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.15em; color: var(--text-secondary); }
.network-item-value { font-size: 0.9rem; color: var(--primary-lighter); overflow: hidden; text-overflow: ellipsis; }
.network-item-sub { font-size: 0.75rem; color: var(--text-secondary); }
.contract-box {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--background-dark);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.contract-label { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.15em; color: var(--text-secondary); }
.contract-address { font-size: 0.82rem; color: var(--primary-lighter); word-break: break-all; flex: 1; min-width: 200px; }

.site-footer {
  border-top: 2px solid var(--border-color);
  margin-top: 30px;
  padding: 22px var(--gutter) 34px;
  background: var(--background-panel);
}
.site-footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.footer-links { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.footer-links a { color: var(--text-secondary); }
.footer-links a:hover { color: var(--primary-color); }
.social { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border-color); border-radius: 50%; color: var(--primary-color); }
.social svg { width: 14px; height: 14px; fill: currentColor; }
.social:hover { border-color: var(--primary-color); box-shadow: 0 0 8px var(--primary-glow); }
.link-button { background: none; border: 0; padding: 0; color: var(--text-secondary); cursor: pointer; font: inherit; }
.link-button:hover { color: var(--primary-color); }

/* ===================== 15. RESPONSIVE ===================== */


/* The header runs out of room long before the page does. Every page except
   the landing one carries NET and the chain dropdown, about 200px the
   landing page does not have, so the nav ran out of room there first.

   Rather than hide eight tabs behind a hamburger for the sake of one line,
   the nav drops to its own full-width row and stays completely visible.
   Note overflow-x goes back to visible: scrolling is what hid the overflow
   in the first place, and on its own row there is nothing to hide. */
@media (max-width: 1100px) {
  .site-header-inner { flex-wrap: wrap; gap: 8px 10px; }
  .site-nav {
    order: 3;
    flex-basis: 100%;
    flex-wrap: wrap;
    overflow-x: visible;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
  }
}
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .engine-layout { grid-template-columns: minmax(0, 1fr); }
  .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 0; }
  .flow-node + .flow-node { margin-left: 28px; }
  .flow-node:nth-child(3) { margin-left: 0; }
  .flow-node:nth-child(3)::before { display: none; }
}

@media (max-width: 820px) {
  body { font-size: 14px; }
  .site-header-inner { padding: 8px var(--gutter); }
  /* A row of eight does not fit a phone, so here it does go behind the
     toggle - and opens as a wrapped grid, each link a share of its row. */
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
  .header-tools { margin-left: 0; order: 2; }
  .site-nav { display: none; }
  .site-nav.open { display: flex; }
  .site-nav a { flex: 1 1 30%; }
  .grid-2, .grid-3, .video-grid, .vault-actions { grid-template-columns: minmax(0, 1fr); }
  .span-2 { grid-column: auto; }
  .liq-summary { grid-template-columns: minmax(0, 1fr); }
  .liq-head, .liq-row { grid-template-columns: minmax(0, 1.3fr) 90px 90px 120px; gap: 6px; font-size: 0.8rem; }
  /* Volume survives on a phone; the DEX name and the raw SCADA count do not. */
  .liq-c-dex, .liq-c-scada { display: none; }
  .liq-detail-line { grid-template-columns: minmax(0, 1fr) 80px 60px; }
  .liq-detail-addr { display: none; }
  .locks-table-header, .locks-table-row { grid-template-columns: 40px 1fr 1.2fr 80px 90px; gap: 6px; font-size: 0.78rem; padding: 8px; }
  .inline-controls { flex-wrap: wrap; }
  .inline-controls .control-select, .inline-controls .control-input { flex-basis: 100%; }
  .wallet-bar .control-button { margin-left: 0; width: 100%; }
  .dock-head-right .muted { display: none; }
  .big-numbers { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 40px 0 28px; }
  .swap-frame { height: 700px; }
}

@media (max-width: 520px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-value, .stat-primary .stat-value { font-size: 2rem; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .flow-node + .flow-node { margin-left: 0; }
  .flow-node + .flow-node::before { left: 50%; top: -22px; width: 3px; height: 18px; transform: translateX(-50%); background: repeating-linear-gradient(180deg, var(--primary-color) 0 5px, transparent 5px 9px); animation: none; }
  .flow-node:nth-child(3)::before { display: block; }
  .price-big { font-size: 3rem; }
  .countdown { font-size: 2.4rem; }
  .metric { flex-wrap: wrap; }
  .metric-value { flex: 1; }
  .site-nav a { flex-basis: 45%; }
  .net-switch span { display: none; }
}

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