/* Alpha Terminal — native CSS, no framework dependency */
:root {
  color-scheme: dark;
  --bg: #080b0d;
  --surface: #0d1114;
  --surface-2: #11171b;
  --surface-3: #171e23;
  --line: #253038;
  --line-strong: #37444d;
  --text: #f0f3f2;
  --muted: #8c989f;
  --faint: #5d6970;
  --accent: #b8f34a;
  --accent-ink: #111705;
  --cyan: #58d9d2;
  --warn: #ffc65c;
  --danger: #ff7373;
  --ok: #72df94;
  --sidebar: 252px;
  --topbar: 64px;
  --radius: 5px;
  --shadow: 0 20px 60px rgb(0 0 0 / 28%);
  font-family: "IBM Plex Sans", "Noto Sans SC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.5; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(255 255 255 / 1.5%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 1.1%) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 75%);
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
code { font: 500 .8rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--cyan); overflow-wrap: anywhere; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.08; letter-spacing: -.045em; }
h2 { margin-bottom: 4px; font-size: 1rem; letter-spacing: -.015em; }
[hidden] { display: none !important; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-150%); border: 1px solid var(--accent); background: var(--surface-2); padding: 8px 12px; color: var(--accent); }
.skip-link:focus { transform: translateY(0); }
button { transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease; }
button:active { transform: translateY(1px) scale(.99); }

/* Brand and navigation */
.brand { display: flex; align-items: center; gap: 12px; min-width: max-content; }
.brand-mark, .mobile-brand {
  display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--accent); border-radius: 50%;
  background: transparent; color: var(--accent); font: 800 .75rem/1 ui-monospace, monospace; letter-spacing: -.04em;
}
.brand b { display: block; font: 720 .78rem/1.1 ui-monospace, monospace; letter-spacing: .08em; }
.brand small { display: block; margin-top: 4px; color: var(--muted); font: 500 .56rem/1 ui-monospace, monospace; letter-spacing: .16em; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; display: flex; width: var(--sidebar); flex-direction: column;
  border-right: 1px solid var(--line); background: #0a0e10; padding: 20px 14px;
}
.sidebar .brand { padding: 2px 8px 28px; }
.primary-nav { display: grid; gap: 2px; }
.nav-item {
  display: grid; grid-template-columns: 30px 1fr; align-items: start; width: 100%; border: 0; border-left: 2px solid transparent;
  background: transparent; padding: 12px; color: var(--muted); text-align: left; cursor: pointer; transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-item span { grid-row: span 2; padding-top: 2px; color: var(--faint); font: .64rem ui-monospace, monospace; }
.nav-item b { font-size: .82rem; font-weight: 650; }
.nav-item small { margin-top: 2px; color: var(--faint); font-size: .64rem; }
.nav-item:hover { background: var(--surface-2); color: var(--text); transform: translateX(2px); }
.nav-item.is-active { border-left-color: var(--accent); background: linear-gradient(90deg, rgb(184 243 74 / 10%), transparent); color: var(--accent); }
.sidebar-foot { margin-top: auto; border-top: 1px solid var(--line); padding: 18px 8px 0; }
.sidebar-foot p { margin: 9px 0 0; color: var(--faint); font-size: .7rem; }

.app-shell { min-height: 100vh; margin-left: var(--sidebar); }
.topbar, .token-topbar {
  position: sticky; top: 0; z-index: 20; display: flex; height: var(--topbar); align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); background: rgb(8 11 13 / 92%); padding: 0 28px; backdrop-filter: blur(16px);
}
.topbar > div, .top-actions { display: flex; align-items: center; gap: 10px; }
.breadcrumb { color: var(--muted); font: .72rem ui-monospace, monospace; letter-spacing: .04em; }
.breadcrumb b { color: var(--text); }
.mobile-brand, .mobile-nav { display: none; }
.user-button {
  display: grid; min-width: 34px; height: 34px; place-items: center; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface-2); padding: 0 10px; color: var(--text); font-weight: 700; cursor: pointer;
}
.user-menu {
  position: absolute; top: 54px; right: 28px; z-index: 45; min-width: 176px; border: 1px solid var(--line-strong);
  background: var(--surface-2); box-shadow: var(--shadow); padding: 6px;
}
.user-menu > span { display: block; border-bottom: 1px solid var(--line); padding: 8px 10px; color: var(--muted); font-size: .72rem; }
.user-menu button { width: 100%; border: 0; background: transparent; padding: 9px 10px; color: var(--text); text-align: left; cursor: pointer; }
.user-menu button:hover { background: var(--surface-3); color: var(--accent); }

/* Shared controls */
.btn, .text-button, .icon-button {
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2); color: var(--text); cursor: pointer;
}
.btn { min-height: 36px; padding: 7px 14px; font-size: .78rem; font-weight: 650; }
.btn:hover { border-color: var(--muted); background: var(--surface-3); }
.btn-primary { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { border-color: #d6ff85; background: #d0ff78; }
.btn-quiet { border-color: transparent; background: transparent; color: var(--muted); }
.btn-small { min-height: 30px; padding: 4px 10px; }
.btn-block { width: 100%; }
.btn-danger { border-color: rgb(255 115 115 / 45%); color: var(--danger); }
.text-button { border: 0; background: transparent; color: var(--accent); padding: 5px; font-size: .75rem; }
.icon-button { width: 34px; height: 34px; font-size: 1.3rem; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .5; }
.status-chip {
  display: inline-flex; width: fit-content; align-items: center; gap: 7px; white-space: nowrap; border: 1px solid var(--line);
  border-radius: 999px; background: rgb(255 255 255 / 2%); padding: 4px 9px; color: var(--muted); font: 650 .66rem ui-monospace, monospace;
}
.status-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.status-online, .status-ready, .status-sent { border-color: rgb(114 223 148 / 32%); color: var(--ok); }
.status-degraded, .status-pending, .status-sending, .status-accumulating { border-color: rgb(255 198 92 / 32%); color: var(--warn); }
.status-failed, .status-offline { border-color: rgb(255 115 115 / 32%); color: var(--danger); }
.status-unintegrated { border-color: rgb(88 217 210 / 28%); color: var(--cyan); }
.status-muted { color: var(--muted); }
.badge {
  display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2);
  padding: 2px 8px; color: var(--muted); font: 650 .67rem ui-monospace, monospace;
}
.badge-high, .score-high { color: var(--ok); }
.badge-medium, .score-medium { color: var(--warn); }
.badge-low, .score-low { color: var(--danger); }

/* Workspace */
.workspace, .token-workspace { width: min(100%, 1540px); margin: 0 auto; padding: 32px 28px 64px; }
.view { display: none; animation: reveal .16s ease-out; }
.view.is-active { display: block; }
@keyframes reveal { from { opacity: .6; transform: translateY(4px); } }
.page-head, .token-identity { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.page-head > div:first-child { max-width: 760px; }
.page-head p:not(.eyebrow), .panel-head p, .form-intro { margin-bottom: 0; color: var(--muted); font-size: .82rem; }
.eyebrow { margin-bottom: 8px; color: var(--accent); font: 700 .64rem ui-monospace, monospace; letter-spacing: .15em; }
.head-meta { min-width: 168px; border-left: 1px solid var(--line); padding-left: 16px; }
.head-meta span, .field-label { display: block; color: var(--faint); font: .62rem ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.head-meta b { display: block; margin-top: 4px; font-size: .78rem; }
.notice { margin-bottom: 18px; border-left: 2px solid var(--warn); background: rgb(255 198 92 / 7%); padding: 12px 15px; color: var(--warn); font-size: .8rem; }
.notice-failed { border-color: var(--danger); background: rgb(255 115 115 / 7%); color: var(--danger); }

.metric-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); margin-bottom: 18px; background: var(--surface); }
.metric-strip article { min-width: 0; border-right: 1px solid var(--line); padding: 18px; }
.metric-strip article:last-child { border-right: 0; }
.metric-strip span { display: block; color: var(--muted); font-size: .72rem; }
.metric-strip strong { display: block; margin: 12px 0 8px; font: 680 clamp(1.45rem, 3vw, 2.25rem)/1 ui-monospace, monospace; letter-spacing: -.06em; }
.metric-strip small { display: block; overflow: hidden; color: var(--faint); font: .59rem ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overview-grid { grid-template-columns: minmax(0, 2.45fr) minmax(250px, .55fr); align-items: start; }
.overview-grid > .panel { align-self: start; }
.overview-grid .panel-span { grid-row: span 2; }
.overview-grid .table-wrap table { min-width: 0; table-layout: fixed; }
.overview-grid th, .overview-grid td { padding-inline: 9px; overflow: hidden; text-overflow: ellipsis; }
.overview-grid th:nth-child(1) { width: 22%; }
.overview-grid th:nth-child(2) { width: 7%; }
.overview-grid th:nth-child(3) { width: 21%; }
.overview-grid th:nth-child(4) { width: 17%; }
.overview-grid th:nth-child(5) { width: 11%; }
.overview-grid th:nth-child(6) { width: 22%; }
.overview-grid td:first-child small { display: block; margin-top: 4px; overflow: hidden; color: var(--faint); font: .62rem ui-monospace, monospace; text-overflow: ellipsis; }
.overview-grid td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; }
.panel {
  min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px rgb(255 255 255 / 2%) inset;
}
.panel-span { grid-row: span 2; }
.panel-head { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 14px 16px; }
.table-wrap { width: 100%; overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: .75rem; }
th { color: var(--faint); font: 650 .61rem ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; }
th, td { border-bottom: 1px solid var(--line); padding: 11px 13px; text-align: left; vertical-align: top; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: rgb(255 255 255 / 2%); }
td.wrap { min-width: 220px; max-width: 360px; white-space: normal; }
.cell-main { display: block; max-width: 220px; overflow: hidden; color: var(--text); font-weight: 650; text-overflow: ellipsis; }
.cell-sub { display: block; max-width: 240px; margin-top: 3px; overflow: hidden; color: var(--faint); font: .65rem ui-monospace, monospace; text-overflow: ellipsis; }
.row-link { color: var(--cyan); }
.row-actions { display: flex; gap: 5px; }
.empty-state { padding: 42px 18px; color: var(--muted); text-align: center; font-size: .8rem; }
.empty-state::before { content: "∅"; display: block; margin-bottom: 8px; color: var(--line-strong); font: 1.8rem ui-monospace, monospace; }
.error-text { color: var(--danger); }
.positive { color: var(--ok); }
.negative { color: var(--danger); }

.chain-list, .status-stack { display: grid; gap: 1px; background: var(--line); }
.chain-item, .status-row { display: grid; align-items: center; background: var(--surface); padding: 13px 15px; }
.chain-item { grid-template-columns: 1fr auto; }
.chain-item span, .status-row p { margin: 0; color: var(--muted); font-size: .73rem; }
.chain-item strong { font: 700 .9rem ui-monospace, monospace; }
.status-row { grid-template-columns: 1fr auto; gap: 12px; }
.status-row strong { display: block; font-size: .77rem; }
.status-row small { display: block; margin-top: 3px; color: var(--faint); font-size: .67rem; }

/* Filters, forms and tabs */
.filter-bar { display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 12px; padding: 12px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: .72rem; }
input, select {
  width: 100%; min-height: 40px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface-2);
  padding: 8px 10px; color: var(--text); outline: 0;
}
input::placeholder { color: var(--faint); }
input:focus, select:focus { border-color: var(--accent); }
select { color-scheme: dark; }
select option { background: var(--surface-2); color: var(--text); }
.filter-bar label { min-width: 190px; }
.segmented { display: flex; gap: 2px; margin-bottom: 12px; }
.segmented button { border: 1px solid var(--line); background: var(--surface); padding: 8px 13px; color: var(--muted); cursor: pointer; }
.segmented button.is-active { border-color: var(--accent); color: var(--accent); }
.signal-tab { display: none; }
.signal-tab.is-active { display: block; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.field-control { display: grid; gap: 7px; }
.field-control > div { display: flex; justify-content: space-between; color: var(--muted); font-size: .7rem; }
.field-control output { color: var(--accent); font: 700 .72rem ui-monospace, monospace; }
input[type="range"] { min-height: 20px; border: 0; background: transparent; padding: 0; accent-color: var(--accent); }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 0; }
.form-panel { display: grid; gap: 14px; padding: 16px; }
.form-panel .panel-head { margin: -16px -16px 2px; }
.form-feedback { min-height: 1.2em; color: var(--muted); font-size: .72rem; }
.form-feedback.is-error { color: var(--danger); }
.form-feedback.is-success { color: var(--ok); }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row input { width: 16px; min-height: 16px; accent-color: var(--accent); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.copytrade-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.copytrade-config-grid { align-content: start; }
.head-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }
.control-grid { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr); }
.attention-panel { border-color: var(--line-strong); }
.count-badge { display: grid; min-width: 28px; height: 28px; place-items: center; border-radius: 50%; background: var(--surface-3); color: var(--warn); font: 700 .72rem ui-monospace, monospace; }
.action-list, .setup-progress { display: grid; }
.action-item { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); padding: 15px 16px; }
.action-item:last-child { border-bottom: 0; }
.action-item strong { display: block; font-size: .8rem; }
.action-item p { margin: 4px 0 0; color: var(--muted); font-size: .7rem; }
.action-critical { box-shadow: 2px 0 var(--danger) inset; }
.action-warning { box-shadow: 2px 0 var(--warn) inset; }
.all-clear { padding: 28px 16px; color: var(--ok); text-align: center; font-size: .8rem; }
.setup-step { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 12px 15px; color: var(--muted); text-align: left; cursor: pointer; }
.setup-step:last-child { border-bottom: 0; }
.setup-step:hover { background: var(--surface-2); }
.setup-step.is-done { color: var(--ok); }
.step-index { font: 700 .68rem ui-monospace, monospace; }
.step-copy strong, .step-copy small { display: block; }
.step-copy strong { color: var(--text); font-size: .76rem; }
.step-copy small { margin-top: 3px; color: var(--faint); font-size: .64rem; }
.compact-metrics { margin-top: 18px; }
.operations-tabs, .analytics-tabs { position: sticky; top: calc(var(--topbar) + 8px); z-index: 10; width: fit-content; border: 1px solid var(--line); background: var(--bg); padding: 3px; }
.operation-tab, .analytics-panel, .settings-panel { display: none; }
.operation-tab.is-active, .analytics-panel.is-active, .settings-panel.is-active { display: block; }
.shadow-summary { display: flex; align-items: center; gap: 12px; padding: 28px; }
.shadow-summary strong { font: 700 2rem ui-monospace, monospace; }
.shadow-summary span { color: var(--muted); }
.settings-layout { display: grid; grid-template-columns: 210px minmax(0,1fr); align-items: start; gap: 18px; }
.settings-nav { position: sticky; top: calc(var(--topbar) + 18px); display: grid; border: 1px solid var(--line); background: var(--surface); }
.settings-nav button { display: grid; grid-template-columns: 28px 1fr; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 12px; color: var(--muted); text-align: left; cursor: pointer; }
.settings-nav button:last-child { border-bottom: 0; }
.settings-nav button span { color: var(--faint); font: .62rem ui-monospace, monospace; }
.settings-nav button.is-active { background: rgb(184 243 74 / 8%); color: var(--accent); }
.settings-content { min-width: 0; }
.settings-panel > .panel, .settings-panel > .grid, .settings-panel > form, .strategy-workbench { margin-bottom: 18px; }
.setup-progress.large .setup-step { padding-block: 16px; }
.strategy-workbench { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(290px,.55fr); gap: 18px; align-items: start; }
.strategy-editors { margin: 0; padding: 16px; }
.strategy-editors > div { min-width: 0; border: 1px solid var(--line); background: var(--surface-2); }
.subpanel-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); padding: 10px 13px; }
.subpanel-head h3 { margin: 0; font-size: .8rem; }
.inline-select { display: flex; align-items: center; gap: 8px; }
.inline-select select { min-width: 180px; }
.strategy-preview { position: sticky; top: calc(var(--topbar) + 18px); }
.strategy-track { display: grid; gap: 1px; background: var(--line); }
.strategy-marker { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; background: var(--surface); padding: 13px 15px; }
.strategy-marker strong { font: 700 .82rem ui-monospace, monospace; }
.strategy-marker small { color: var(--muted); }
.marker-profit strong { color: var(--ok); }
.marker-loss strong { color: var(--danger); }
.marker-entry strong { color: var(--cyan); }
.strategy-summary { border-top: 1px solid var(--line); background: rgb(184 243 74 / 5%); padding: 16px; color: var(--muted); font-size: .74rem; line-height: 1.7; }
.sticky-save { position: sticky; bottom: 12px; z-index: 12; display: flex; align-items: center; justify-content: flex-end; gap: 14px; border: 1px solid var(--line-strong); background: rgb(13 17 20 / 94%); box-shadow: var(--shadow); padding: 12px 14px; backdrop-filter: blur(12px); }
.strategy-levels { display: grid; gap: 10px; padding: 16px; }
.strategy-level-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.strategy-level-row .text-button { min-height: 40px; }
.source-help { display: grid; grid-template-columns: auto 1fr; gap: 12px; border-bottom: 1px solid var(--line); background: rgb(88 217 210 / 5%); padding: 12px 16px; }
.source-help strong { color: var(--cyan); font-size: .74rem; }
.source-help span { color: var(--muted); font-size: .7rem; }
#copytrade-sources input:not([type="checkbox"]), #copytrade-sources select { min-width: 180px; min-height: 36px; }
#copytrade-sources input[type="checkbox"] { width: 16px; min-height: 16px; accent-color: var(--accent); }
.notice-online { border-color: rgb(84 225 158 / 38%); background: rgb(84 225 158 / 7%); color: var(--ok); }
.btn-danger { border-color: rgb(255 115 115 / 55%); background: rgb(255 115 115 / 11%); color: var(--danger); }
.btn-danger:hover { border-color: var(--danger); }

/* Funnel, delivery and detail content */
.funnel-grid { display: grid; grid-template-columns: repeat(7, minmax(100px, 1fr)); overflow-x: auto; }
.funnel-stage { position: relative; min-width: 100px; border-right: 1px solid var(--line); padding: 20px 15px; }
.funnel-stage:last-child { border-right: 0; }
.funnel-stage::after { content: "→"; position: absolute; top: 24px; right: -7px; z-index: 2; color: var(--line-strong); }
.funnel-stage:last-child::after { display: none; }
.funnel-stage span { display: block; min-height: 34px; color: var(--muted); font-size: .7rem; }
.funnel-stage strong { display: block; margin: 12px 0 6px; font: 700 1.55rem ui-monospace, monospace; }
.funnel-stage small { color: var(--faint); font-size: .62rem; }
.delivery-grid, .score-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); }
.score-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 46px; padding: 10px 14px; background: var(--surface); }
.score-line span { overflow: hidden; color: var(--muted); font: .7rem ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.score-line strong { color: var(--text); font: 700 .78rem ui-monospace, monospace; }
.outcome-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.delivery-card, .outcome-card { background: var(--surface); padding: 18px; }
.delivery-card span, .outcome-card span { display: block; color: var(--muted); font-size: .68rem; }
.delivery-card strong, .outcome-card strong { display: block; margin-top: 9px; font: 700 1.25rem ui-monospace, monospace; }
.detail-list { margin: 0; }
.detail-list > div { display: grid; grid-template-columns: minmax(110px, .38fr) 1fr; border-bottom: 1px solid var(--line); padding: 12px 15px; }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--faint); font-size: .7rem; }
.detail-list dd { margin: 0; color: var(--text); font-size: .73rem; overflow-wrap: anywhere; }

/* Dialog and toast */
dialog { width: min(92vw, 520px); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); box-shadow: var(--shadow); padding: 0; }
dialog::backdrop { background: rgb(0 0 0 / 74%); backdrop-filter: blur(5px); }
dialog form { display: grid; gap: 14px; padding: 18px; }
.dialog-head, .dialog-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-head { border-bottom: 1px solid var(--line); margin: -18px -18px 4px; padding: 16px 18px; }
.dialog-head h2 { margin: 0; }
.dialog-actions { justify-content: flex-end; border-top: 1px solid var(--line); margin: 4px -18px -18px; padding: 14px 18px; }
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; width: min(380px, calc(100vw - 36px)); gap: 8px; }
.toast { border: 1px solid var(--line-strong); border-left: 3px solid var(--cyan); background: var(--surface-2); box-shadow: var(--shadow); padding: 12px 14px; font-size: .76rem; animation: toast-in .18s ease-out; }
.toast.is-success { border-left-color: var(--ok); }
.toast.is-error { border-left-color: var(--danger); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* Login */
.login-page { display: grid; place-items: center; min-height: 100vh; padding: 28px; }
.login-shell { display: grid; width: min(1080px, 100%); min-height: 620px; grid-template-columns: 1.35fr .85fr; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.login-context { display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line); padding: clamp(28px, 5vw, 64px); background: var(--surface-raised); }
.login-context h1 { max-width: 560px; font-size: clamp(2.35rem, 4.2vw, 4rem); line-height: 1.08; text-wrap: balance; }
.login-context > div > p:last-child { max-width: 620px; color: var(--muted); }
.login-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--line); }
.login-facts div { border-right: 1px solid var(--line); padding: 14px 12px 0 0; }
.login-facts div:last-child { border-right: 0; padding-left: 12px; }
.login-facts dt { color: var(--faint); font: .6rem ui-monospace, monospace; }
.login-facts dd { margin: 6px 0 0; font-size: .7rem; }
.login-panel { display: grid; align-items: center; padding: clamp(28px, 5vw, 56px); }
.login-panel form { display: grid; gap: 17px; }
.login-panel h2 { margin-bottom: 2px; font-size: 1.5rem; }
.login-error { border-left: 2px solid var(--danger); background: rgb(255 115 115 / 8%); padding: 10px; color: var(--danger); font-size: .72rem; }
.login-foot { align-self: end; margin: 30px 0 0; color: var(--faint); font-size: .65rem; }

/* Token detail */
.token-topbar { padding-left: 24px; }
.token-workspace { max-width: 1440px; }
.token-identity { align-items: center; }
.identity-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--muted); font: .72rem ui-monospace, monospace; }
.identity-line > span:not(.status-chip) { border-right: 1px solid var(--line); padding-right: 8px; }
.token-score { min-width: 150px; border-left: 1px solid var(--line); padding-left: 24px; text-align: right; }
.token-score span, .token-score small { display: block; color: var(--faint); font: .62rem ui-monospace, monospace; }
.token-score strong { display: inline-block; margin: 6px 3px; font: 700 2.8rem/1 ui-monospace, monospace; color: var(--accent); }
.address-panel { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) auto; align-items: center; gap: 12px; margin-bottom: 18px; padding: 14px 16px; }
.address-panel code { display: block; margin-top: 5px; }
.score-breakdown { display: grid; gap: 1px; background: var(--line); }
.score-row { display: grid; grid-template-columns: 1fr auto; background: var(--surface); padding: 12px 15px; }
.score-row span { color: var(--muted); font-size: .72rem; }
.score-row strong { color: var(--accent); font: .75rem ui-monospace, monospace; }
.timeline { padding: 4px 18px; }
.timeline-item { position: relative; border-left: 1px solid var(--line-strong); padding: 16px 0 16px 20px; }
.timeline-item::before { content: ""; position: absolute; top: 21px; left: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); }
.timeline-item strong { display: block; font-size: .76rem; }
.timeline-item p { margin: 5px 0; color: var(--muted); font-size: .7rem; }
.timeline-item small { color: var(--faint); font: .62rem ui-monospace, monospace; }
.state-track { display: flex; gap: 5px; border-bottom: 1px solid var(--line); padding: 14px; overflow-x: auto; }
.state-step { border: 1px solid var(--line); padding: 5px 8px; color: var(--faint); font: .62rem ui-monospace, monospace; }
.state-step.is-active { border-color: var(--accent); background: rgb(184 243 74 / 8%); color: var(--accent); }
.capability-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; }
.capability-panel h2 { margin-bottom: 5px; }
.capability-panel p:last-child { margin: 0; color: var(--muted); font-size: .75rem; }
.narrative-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); gap: 18px; padding: 18px; }
.narrative-summary { grid-row: span 2; border: 1px solid var(--line); background: var(--surface-2); padding: 16px; }
.narrative-summary p { margin: 10px 0 0; color: var(--text); font-size: .88rem; line-height: 1.75; white-space: pre-wrap; }
.narrative-meta { border: 1px solid var(--line); }
.narrative-meta > div { padding: 9px 12px; }
.evidence-section { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 14px; }
.evidence-section .subpanel-head { padding: 0 0 10px; border-bottom: 0; }
.badge { min-width: 22px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 7px; color: var(--cyan); font: .65rem ui-monospace, monospace; text-align: center; }
.evidence-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.evidence-card { border: 1px solid var(--line); background: var(--surface-2); padding: 12px; }
.evidence-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.evidence-card-head strong { overflow: hidden; color: var(--muted); font: .68rem ui-monospace, monospace; text-overflow: ellipsis; white-space: nowrap; }
.evidence-card p { margin: 9px 0; color: var(--text); font-size: .7rem; line-height: 1.55; }
.evidence-kind { border: 1px solid var(--line-strong); padding: 3px 6px; color: var(--cyan); font-size: .62rem; white-space: nowrap; }
.evidence-project_claim { color: var(--accent); }
.evidence-model_inference { color: var(--muted); }
.error-text { border-left: 2px solid var(--danger); padding: 8px 10px; color: var(--danger); font-size: .7rem; }

@media (max-width: 1180px) {
  :root { --sidebar: 206px; }
  .metric-strip { grid-template-columns: repeat(3, 1fr); }
  .metric-strip article:nth-child(3) { border-right: 0; }
  .metric-strip article:nth-child(n+4) { border-top: 1px solid var(--line); }
  .funnel-grid { grid-template-columns: repeat(7, minmax(125px, 1fr)); }
}

@media (max-width: 860px) {
  .sidebar { display: none; }
  .app-shell { margin-left: 0; }
  .mobile-brand { display: grid; border-radius: 50%; cursor: pointer; }
  .breadcrumb { display: none; }
  .topbar { padding: 0 14px; }
  .mobile-nav { position: sticky; top: var(--topbar); z-index: 19; display: flex; overflow-x: auto; border-bottom: 1px solid var(--line); background: var(--surface); }
  .mobile-nav button { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 10px 12px; color: var(--muted); font-size: .7rem; }
  .mobile-nav button.is-active { border-bottom-color: var(--accent); color: var(--accent); }
  .workspace, .token-workspace { padding: 24px 15px 54px; }
  .grid-2 { grid-template-columns: 1fr; }
  .overview-grid, .control-grid, .strategy-workbench { grid-template-columns: 1fr; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav { position: static; display: flex; overflow-x: auto; }
  .settings-nav button { flex: 0 0 auto; min-width: 138px; border-right: 1px solid var(--line); border-bottom: 0; }
  .strategy-preview { position: static; }
  .panel-span { grid-row: auto; }
  .login-shell { min-height: auto; grid-template-columns: 1fr; }
  .login-context { min-height: 380px; border-right: 0; border-bottom: 1px solid var(--line); }
  .address-panel { grid-template-columns: 1fr auto; }
  .token-topbar .brand span:last-child { display: none; }
}

@media (max-width: 620px) {
  .top-actions { gap: 5px; }
  .top-actions > .status-chip { display: none; }
  .workspace { padding-top: 20px; }
  .page-head, .token-identity { align-items: flex-start; flex-direction: column; }
  .head-meta { border-left: 0; border-top: 1px solid var(--line); padding: 10px 0 0; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-strip article, .metric-strip article:nth-child(3) { border-right: 1px solid var(--line); border-top: 1px solid var(--line); }
  .metric-strip article:nth-child(-n+2) { border-top: 0; }
  .metric-strip article:nth-child(even) { border-right: 0; }
  .metric-strip article:last-child { grid-column: span 2; border-right: 0; }
  .filter-bar { align-items: stretch; flex-direction: column; }
  .filter-bar label { min-width: 0; }
  .segmented { overflow-x: auto; }
  .segmented button { flex: 0 0 auto; }
  .form-grid, .form-row, .strategy-level-row { grid-template-columns: 1fr; }
  .sticky-save { bottom: 6px; align-items: stretch; flex-direction: column; }
  .sticky-save .btn { width: 100%; }
  .head-actions { width: 100%; justify-content: flex-start; }
  .source-help { grid-template-columns: 1fr; }
  .shadow-summary { align-items: flex-start; flex-direction: column; }
  .delivery-grid, .outcome-grid, .score-breakdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .token-workspace .grid { align-items: start; }
  .login-page { padding: 0; }
  .login-shell { border-width: 0; }
  .login-context { min-height: 330px; }
  .login-facts { grid-template-columns: 1fr; }
  .login-facts div, .login-facts div:last-child { border-right: 0; padding: 8px 0; }
  .token-topbar { padding: 0 10px; }
  .token-topbar .btn:not(.btn-quiet) { display: none; }
  .token-score { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0 0; text-align: left; }
  .address-panel { grid-template-columns: 1fr; }
  .address-panel .btn { width: fit-content; }
  .capability-panel { align-items: flex-start; flex-direction: column; }
  .narrative-body { grid-template-columns: 1fr; }
  .narrative-summary { grid-row: auto; }
  .evidence-section { grid-column: auto; }
}

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