:root {
  color-scheme: dark;
  --bg: #111a23;
  --bg-soft: #16212c;
  --panel: #1a2733;
  --panel-2: #202f3c;
  --line: #334654;
  --line-soft: #293a47;
  --text: #edf3f5;
  --muted: #aab8c2;
  --muted-2: #8293a0;
  --green: #72c9a1;
  --green-soft: rgba(114, 201, 161, .12);
  --red: #e9868f;
  --red-soft: rgba(233, 134, 143, .12);
  --amber: #d8bb73;
  --blue: #83aee2;
  --radius: 18px;
  --shadow: 0 12px 32px rgba(3, 10, 16, .16);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: linear-gradient(180deg, #14202a 0, var(--bg) 320px); color: var(--text); font-size: 15px; line-height: 1.5; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.app-shell { min-height: 100vh; }
.page-wrap { width: min(1480px, calc(100% - 48px)); margin: 0 auto; padding: 34px 0 72px; }

.topbar { height: 72px; padding: 0 max(24px, calc((100vw - 1480px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.055); background: rgba(8,11,16,.82); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand > span:last-child { display: flex; flex-direction: column; line-height: 1.05; }
.brand strong { font-size: 16px; letter-spacing: .02em; }
.brand small { margin-top: 6px; color: var(--muted-2); font-size: 8px; letter-spacing: .2em; }
.brand-mark { width: 34px; height: 34px; padding: 7px; border: 1px solid #2a3542; border-radius: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: linear-gradient(145deg, #141c26, #0b0f15); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.brand-mark i { display: block; border-radius: 2px; }
.brand-mark i:nth-child(1) { background: #8b5cf6; }
.brand-mark i:nth-child(2) { background: #f0b90b; }
.brand-mark i:nth-child(3) { background: #4f7cff; }
.brand-mark i:nth-child(4) { background: #00c805; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-right form { margin: 0; }
.theme-toggle { height:32px; padding:0 10px; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--panel); color:var(--muted); border-radius:999px; cursor:pointer; font-size:11px; }
.theme-toggle:hover { color:var(--text); border-color:#607789; }
.theme-icon { font-size:13px; line-height:1; }
.demo-pill { color: #f0c66a; background: rgba(240,185,11,.1); border: 1px solid rgba(240,185,11,.2); border-radius: 999px; padding: 5px 9px; font-size: 11px; }
.user-chip { color: var(--muted); font-size: 12px; }
.text-button { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 6px; }
.text-button:hover { color: var(--text); }

.primary-nav { width: min(1480px, calc(100% - 48px)); height: 54px; margin: 0 auto; display: flex; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line-soft); }
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav a { min-width: max-content; padding: 0 14px; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; border-bottom: 2px solid transparent; transition: .18s ease; }
.primary-nav a:hover { color: var(--text); }
.primary-nav a.active { color: var(--text); border-color: var(--text); }
.chain-nav span { width: 7px; height: 7px; border-radius: 50%; background: var(--chain-color); box-shadow: 0 0 10px color-mix(in srgb, var(--chain-color) 60%, transparent); }
.nav-divider { width: 1px; height: 20px; align-self: center; margin: 0 8px; background: var(--line); flex: 0 0 auto; }
.demo-banner { width: min(1480px, calc(100% - 48px)); margin: 14px auto -10px; padding: 10px 14px; border: 1px solid rgba(240,185,11,.16); background: rgba(240,185,11,.055); color: #b6a477; border-radius: 10px; font-size: 12px; }
.demo-banner span { display: inline-block; margin-right: 8px; padding-right: 8px; border-right: 1px solid rgba(240,185,11,.25); color: #f0c76c; font-weight: 700; }

.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.page-heading h1 { margin: 4px 0 7px; font-size: clamp(27px, 3vw, 40px); letter-spacing: -.045em; line-height: 1.12; }
.page-heading > div > p:last-child, .chain-heading p, .token-hero p { margin: 0; color: var(--muted); }
.eyebrow { margin: 0; color: var(--muted-2); font-size: 10px; line-height: 1; letter-spacing: .18em; font-weight: 700; }
.overview-kpis { display: flex; gap: 10px; }
.overview-kpis > div { min-width: 112px; padding: 13px 15px; background: rgba(16,23,32,.72); border: 1px solid var(--line); border-radius: 12px; }
.overview-kpis span { display: block; font-size: 18px; font-weight: 750; }
.overview-kpis small { color: var(--muted-2); font-size: 10px; }

.chain-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chain-card { position: relative; overflow: hidden; padding: 22px; background: linear-gradient(145deg, rgba(19,27,37,.97), rgba(12,17,24,.98)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.chain-card::before { content:""; position: absolute; width: 260px; height: 260px; right: -120px; top: -145px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 68%); pointer-events:none; }
.chain-card::after { content:""; position:absolute; inset:0 auto 0 0; width:2px; background:linear-gradient(transparent, var(--accent), transparent); opacity:.7; }
.chain-card-head { display: flex; justify-content: space-between; gap: 14px; position: relative; }
.chain-identity { display: flex; align-items: center; gap: 12px; }
.chain-identity h2 { margin: 0; font-size: 17px; }
.chain-identity p { margin: 3px 0 0; color: var(--muted-2); font-size: 10px; text-transform: uppercase; }
.chain-orb, .large-chain-orb { display: grid; place-items: center; flex: 0 0 auto; background: color-mix(in srgb, var(--accent) 13%, #111821); border: 1px solid color-mix(in srgb, var(--accent) 38%, #26313e); color: color-mix(in srgb, var(--accent) 80%, white); font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.chain-orb { width: 38px; height: 38px; border-radius: 12px; }
.large-chain-orb { width: 62px; height: 62px; border-radius: 18px; font-size: 14px; box-shadow: 0 12px 40px color-mix(in srgb, var(--accent) 12%, transparent); }
.health-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; color: var(--muted); background: #151d27; border: 1px solid var(--line); font-size: 10px; white-space: nowrap; }
.health-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.health-badge.healthy { color: var(--green); background: var(--green-soft); border-color: rgba(70,220,145,.17); }
.health-badge.failed { color: var(--red); background: var(--red-soft); border-color: rgba(255,107,120,.17); }
.health-badge.stale { color: var(--amber); background: rgba(245,189,79,.1); border-color: rgba(245,189,79,.18); }
.chain-stat-row { margin: 22px 0 17px; padding: 16px 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.chain-stat-row > div { padding: 0 14px; border-right: 1px solid var(--line-soft); }
.chain-stat-row > div:first-child { padding-left: 0; }
.chain-stat-row > div:last-child { padding-right: 0; border: 0; }
.chain-stat-row small, .chain-stat-row span { display: block; color: var(--muted-2); font-size: 10px; }
.chain-stat-row strong { display: block; margin: 4px 0 2px; font-size: 15px; }
.mini-ranking { min-height: 162px; }
.mini-ranking > a { display: grid; grid-template-columns: 24px 34px minmax(0,1fr) auto; gap: 10px; align-items: center; padding: 9px 7px; border-radius: 10px; transition: background .15s; }
.mini-ranking > a:hover { background: rgba(255,255,255,.035); }
.mini-rank { color: var(--muted-2); font-size: 12px; text-align: center; }
.token-avatar { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(145deg,#273342,#141b24); border: 1px solid #303c4a; color: #c4cfdb; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.mini-token, .mini-value { min-width: 0; }
.mini-token strong, .mini-token small, .mini-value strong, .mini-value small { display: block; }
.mini-token strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size: 12px; }
.mini-token small, .mini-value small { color: var(--muted-2); font-size: 9px; }
.mini-value { text-align: right; }
.mini-value strong { color: #d9e2eb; font-size: 12px; }
.card-link { margin-top: 12px; padding-top: 15px; display: flex; justify-content: space-between; color: color-mix(in srgb, var(--accent) 62%, white); border-top: 1px solid var(--line-soft); font-size: 11px; font-weight: 700; }
.card-link span { font-size: 16px; line-height: 1; }
.empty-inline { display:grid; place-items:center; min-height:100px; color:var(--muted-2); font-size:12px; }
.info-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(3,1fr); background: rgba(14,20,28,.7); border: 1px solid var(--line-soft); border-radius: 14px; }
.info-strip > div { padding: 16px 18px; display:flex; align-items:flex-start; gap:12px; border-right:1px solid var(--line-soft); }
.info-strip > div:last-child { border:0; }
.info-icon { color: var(--muted-2); font-size:10px; font-family: ui-monospace, monospace; }
.info-strip p { margin:0; color:var(--muted); font-size:11px; }
.info-strip strong { display:block; margin-bottom:2px; color:var(--text); font-size:12px; }

.heading-with-orb { display:flex; align-items:center; gap:17px; }
.chain-heading { --accent:#70a7ff; }
.run-summary { display:flex; align-items:center; gap:22px; padding:14px 16px; border:1px solid var(--line); background:var(--panel); border-radius:14px; }
.run-summary > div small, .run-summary > div strong { display:block; }
.run-summary > div small { color:var(--muted-2); font-size:9px; }
.run-summary > div strong { margin-top:3px; font-size:12px; }
.toolbar { margin-bottom:14px; padding:12px; display:flex; align-items:center; gap:10px; background:var(--panel); border:1px solid var(--line); border-radius:14px; }
.search-box { flex:1; min-width:220px; height:38px; display:flex; align-items:center; gap:9px; padding:0 12px; border:1px solid var(--line); background:#0b1016; border-radius:10px; color:var(--muted-2); }
.search-box input { width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:12px; }
.search-box input::placeholder { color:#536071; }
.select-box { height:38px; display:flex; align-items:center; gap:8px; padding-left:12px; border:1px solid var(--line); background:#0b1016; border-radius:10px; color:var(--muted-2); font-size:10px; }
.select-box select { height:100%; border:0; padding:0 30px 0 5px; outline:0; background:transparent; color:var(--text); font-size:11px; }
.check-box { display:flex; align-items:center; gap:7px; padding:0 6px; color:var(--muted); font-size:11px; white-space:nowrap; }
.check-box input { accent-color:#76879a; }
.primary-button, .secondary-button { min-height:38px; border-radius:10px; padding:0 15px; cursor:pointer; font-weight:700; font-size:11px; transition:.16s ease; }
.primary-button { border:1px solid #dfe7ef; background:#edf2f7; color:#080b10; }
.primary-button:hover { background:white; transform:translateY(-1px); }
.secondary-button { border:1px solid var(--line); background:#151e29; color:#d2d9e0; }
.secondary-button:hover { border-color:#354253; }
.full { width:100%; }
.text-link { color:var(--muted); font-size:11px; padding:8px; }

.table-shell { overflow:auto; border:1px solid var(--line); background:rgba(14,20,28,.85); border-radius:16px; box-shadow:var(--shadow); }
.token-table { width:100%; min-width:1180px; border-collapse:collapse; }
.token-table th { height:44px; padding:0 12px; background:#0d131a; color:var(--muted-2); border-bottom:1px solid var(--line); font-size:9px; letter-spacing:.04em; text-align:left; font-weight:650; white-space:nowrap; }
.token-table td { height:72px; padding:10px 12px; border-bottom:1px solid var(--line-soft); color:#dce3e9; font-size:11px; vertical-align:middle; }
.token-table tr:last-child td { border-bottom:0; }
.token-table tbody tr { transition:background .14s; }
.token-table tbody tr:hover { background:rgba(255,255,255,.025); }
.token-table tbody tr.row-blocked { opacity:.58; }
.rank-cell { width:64px; text-align:center !important; }
.rank-number { font-size:15px; font-weight:800; }
.rank-move { display:block; margin-top:2px; font-size:9px; }
.token-main-cell { min-width:190px; }
.token-name-link { display:flex; align-items:center; gap:10px; }
.token-name-link > span:last-child { min-width:0; }
.token-name-link strong, .token-name-link small { display:block; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.token-name-link strong { font-size:12px; }
.token-name-link small { color:var(--muted-2); font-size:9px; margin-top:2px; }
.row-flags { display:flex; gap:4px; margin:5px 0 0 42px; }
.flag-new, .flag-watch, .flag-block { display:inline-flex; align-items:center; padding:1px 5px; border-radius:4px; font-size:8px; font-weight:700; }
.flag-new { color:#7ec8ff; background:rgba(70,160,255,.12); }
.flag-watch { color:#f4ca69; background:rgba(244,202,105,.1); }
.flag-block { color:#ff8a94; background:rgba(255,107,120,.12); }
.metric-emphasis { color:#8de2ba; font-size:13px; }
.subvalue { display:block; margin-top:3px; color:var(--muted-2); font-size:9px; white-space:nowrap; }
.positive { color:var(--green) !important; }
.negative { color:var(--red) !important; }
.neutral { color:var(--muted) !important; }
.action-cell { width:142px; text-align:right !important; }
.quick-actions { display:flex; justify-content:flex-end; gap:4px; }
.icon-button { width:28px; height:28px; display:grid; place-items:center; border:1px solid var(--line); background:#111821; color:var(--muted); border-radius:8px; cursor:pointer; }
.icon-button:hover { color:var(--text); border-color:#384657; }
.icon-button.selected { color:#f4ca69; border-color:rgba(244,202,105,.28); background:rgba(244,202,105,.07); }
.icon-button.danger.selected { color:var(--red); border-color:rgba(255,107,120,.28); background:var(--red-soft); }
.icon-button:disabled, .state-button:disabled { opacity:.45; cursor:wait; }
.table-note { margin:10px 3px 0; color:var(--muted-2); font-size:10px; }
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:44px 20px; color:var(--muted); }
.empty-state span { color:var(--muted-2); font-size:11px; }
.empty-state.compact { min-height:160px; }
.page-empty { min-height:60vh; }
.page-empty > span { font-size:70px; font-weight:900; color:#202b37; }

.token-hero { --accent:#70a7ff; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; padding:8px 0 25px; border-bottom:1px solid var(--line); }
.back-link { display:inline-block; margin-bottom:20px; color:var(--muted); font-size:11px; }
.back-link:hover { color:var(--text); }
.token-title-row { display:flex; align-items:center; gap:14px; }
.token-avatar-large { width:54px; height:54px; border-radius:16px; border-color:color-mix(in srgb,var(--accent) 30%,#313c49); background:color-mix(in srgb,var(--accent) 10%,#161e28); color:color-mix(in srgb,var(--accent) 65%,white); font-size:13px; }
.token-title { display:flex; align-items:center; gap:8px; }
.token-title h1 { margin:0; font-size:30px; letter-spacing:-.035em; }
.token-title > span:not(.flag-block) { padding:3px 6px; border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); background:color-mix(in srgb,var(--accent) 9%,transparent); color:color-mix(in srgb,var(--accent) 68%,white); border-radius:5px; font-size:9px; font-weight:800; }
.token-title-row p { margin-top:3px; }
.contract-row { margin:16px 0 0 68px; display:flex; align-items:center; gap:8px; }
.contract-row code { max-width:min(620px,65vw); overflow:hidden; text-overflow:ellipsis; color:#8997a8; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10px; white-space:nowrap; }
.copy-button { border:0; background:transparent; color:#b8c2cd; font-size:10px; cursor:pointer; }
.token-hero-actions { display:flex; gap:7px; }
.state-button { height:38px; padding:0 12px; border:1px solid var(--line); background:#111821; color:var(--muted); border-radius:10px; cursor:pointer; font-size:11px; }
.state-button span { margin-right:5px; }
.state-button:hover { color:var(--text); border-color:#354354; }
.state-button.selected { color:#f4ca69; border-color:rgba(244,202,105,.25); background:rgba(244,202,105,.07); }
.state-button.danger.selected { color:var(--red); border-color:rgba(255,107,120,.25); background:var(--red-soft); }
.notice-card { margin:14px 0; padding:12px 15px; display:flex; gap:10px; align-items:center; border:1px solid var(--line); background:var(--panel); border-radius:11px; color:var(--muted); font-size:11px; }
.notice-card strong { color:var(--text); white-space:nowrap; }
.positive-notice { border-color:rgba(70,220,145,.18); background:var(--green-soft); }
.metric-grid { margin:18px 0; display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.metric-card { min-width:0; padding:16px; border:1px solid var(--line); background:linear-gradient(145deg,#111923,#0d131a); border-radius:13px; }
.metric-card.featured { border-color:color-mix(in srgb,var(--accent) 25%,var(--line)); background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 8%,#111923),#0d131a); }
.metric-card small, .metric-card strong, .metric-card span { display:block; }
.metric-card small { color:var(--muted-2); font-size:9px; }
.metric-card strong { margin:8px 0 4px; overflow:hidden; text-overflow:ellipsis; font-size:19px; letter-spacing:-.02em; }
.metric-card span { color:var(--muted); font-size:9px; white-space:nowrap; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(310px,.7fr); gap:14px; }
.detail-side { display:flex; flex-direction:column; gap:14px; }
.panel { background:rgba(16,23,32,.9); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel-head { padding:18px 19px 13px; display:flex; justify-content:space-between; align-items:center; }
.panel-head h2 { margin:5px 0 0; font-size:15px; }
.panel-head > span { color:var(--muted-2); font-size:9px; }
.history-head { border-bottom:1px solid var(--line-soft); }
.segmented { display:flex; padding:3px; background:#0a0f15; border:1px solid var(--line); border-radius:9px; }
.segmented button { min-width:45px; height:27px; border:0; background:transparent; color:var(--muted); border-radius:6px; font-size:10px; cursor:pointer; }
.segmented button.active { background:#1b2632; color:var(--text); }
.metric-tabs { padding:12px 18px 0; display:flex; gap:18px; overflow:auto; }
.metric-tabs button { padding:0 0 8px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted-2); font-size:10px; cursor:pointer; white-space:nowrap; }
.metric-tabs button.active { color:var(--text); border-color:#dce4eb; }
.chart-meta { min-height:55px; padding:12px 19px 0; display:grid; grid-template-columns:1fr auto; align-items:end; }
.chart-meta span { color:var(--muted-2); font-size:9px; }
.chart-meta strong { grid-column:1; font-size:21px; }
.chart-meta small { grid-column:2; grid-row:1/3; align-self:center; color:var(--muted-2); font-size:9px; }
.chart-wrap { position:relative; min-height:290px; padding:10px 12px 16px; }
.chart-wrap canvas { display:block; width:100%; height:265px; }
.chart-empty { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--muted); }
.chart-empty[hidden] { display:none; }
.chart-empty span { color:var(--muted-2); font-size:10px; }
.link-grid { padding:0 14px 16px; display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.link-grid a, .unavailable-link { min-height:41px; padding:0 11px; display:flex; align-items:center; justify-content:space-between; border:1px solid var(--line); background:#0c1219; border-radius:10px; font-size:10px; }
.link-grid a:hover { border-color:#3b4959; background:#111923; }
.link-grid a span { color:var(--muted-2); }
.unavailable-link { color:#505d6c; }
.unavailable-link small { font-size:8px; }
.note-panel form { padding:0 14px 16px; }
.note-panel textarea { width:100%; resize:vertical; min-height:105px; padding:11px; outline:0; color:var(--text); border:1px solid var(--line); background:#0b1016; border-radius:10px; font-size:11px; line-height:1.6; }
.note-panel textarea:focus { border-color:#3b495a; }
.note-panel .primary-button { margin-top:8px; }
.block-baseline { margin:0 14px 15px; padding:12px; border:1px solid rgba(255,107,120,.15); background:var(--red-soft); border-radius:10px; }
.block-baseline small,.block-baseline strong,.block-baseline span { display:block; }
.block-baseline small { color:#c2767d; font-size:8px; }
.block-baseline strong { margin:3px 0; }
.block-baseline span,.block-baseline p { color:#af7479; font-size:9px; }
.block-baseline p { margin:8px 0 0; padding-top:8px; border-top:1px solid rgba(255,107,120,.13); }

.collection-count { min-width:100px; text-align:right; }
.collection-count strong,.collection-count span { display:block; }
.collection-count strong { font-size:32px; }
.collection-count span { color:var(--muted-2); font-size:10px; }
.health-list { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px; }
.health-list article { --accent:#70a7ff; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; padding:14px; border:1px solid var(--line); background:var(--panel); border-radius:13px; }
.health-list article > div strong,.health-list article > div small { display:block; }
.health-list article > div small { color:var(--muted-2); font-size:8px; }
.health-values { text-align:right; }
.health-list .health-badge { grid-column:2/4; justify-self:end; margin-top:-4px; }
.system-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.log-list { max-height:520px; overflow:auto; padding:0 12px 12px; }
.log-list > div { min-height:54px; display:grid; grid-template-columns:35px minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:9px 7px; border-bottom:1px solid var(--line-soft); }
.log-list > div:last-child { border:0; }
.log-chain { color:var(--muted); font-size:9px; font-weight:800; }
.log-list p { margin:0; min-width:0; }
.log-list p strong,.log-list p small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.log-list p strong { font-size:10px; }
.log-list p small,.log-list time { color:var(--muted-2); font-size:8px; }
.log-status { padding:2px 5px; color:var(--green); background:var(--green-soft); border-radius:4px; font-size:8px; }
.log-status.failed { color:var(--red); background:var(--red-soft); }

.toast { position:fixed; z-index:100; left:50%; bottom:28px; transform:translate(-50%,20px); padding:10px 14px; background:#e9eff5; color:#0a0e13; border-radius:10px; box-shadow:0 15px 50px rgba(0,0,0,.45); font-size:11px; font-weight:700; opacity:0; pointer-events:none; transition:.22s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast.error { background:#ffbdc3; }

.login-body { min-height:100vh; background:radial-gradient(circle at 15% 20%,rgba(139,92,246,.1),transparent 25%),radial-gradient(circle at 75% 75%,rgba(0,200,5,.06),transparent 30%),#080b10; }
.login-shell { width:min(1040px,calc(100% - 48px)); min-height:100vh; margin:0 auto; display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:100px; }
.login-brand { margin-bottom:70px; }
.login-intro h1 { margin:0 0 20px; font-size:clamp(42px,6vw,72px); line-height:1.03; letter-spacing:-.065em; }
.login-intro > p { max-width:530px; color:var(--muted); font-size:15px; line-height:1.8; }
.login-chain-row { margin-top:35px; display:flex; gap:8px; }
.login-chain-row span { padding:7px 10px; border:1px solid var(--line); background:rgba(16,23,32,.75); border-radius:8px; color:var(--muted); font-size:9px; font-weight:800; }
.login-chain-row span::before { content:""; display:inline-block; width:5px; height:5px; margin-right:6px; border-radius:50%; background:var(--dot); }
.login-card { padding:30px; border:1px solid #26313e; background:rgba(16,23,32,.92); border-radius:20px; box-shadow:0 30px 100px rgba(0,0,0,.38); }
.login-card h2 { margin:8px 0 4px; font-size:24px; }
.muted { color:var(--muted); }
.login-card .muted { margin:0; font-size:11px; }
.login-form { margin-top:25px; display:flex; flex-direction:column; gap:14px; }
.login-form label { color:var(--muted); font-size:10px; }
.login-form input { width:100%; height:44px; margin-top:6px; padding:0 12px; outline:0; border:1px solid var(--line); background:#0a0f15; color:var(--text); border-radius:10px; }
.login-form input:focus { border-color:#4a5869; }
.login-form .primary-button { margin-top:5px; height:44px; }
.form-error { margin-top:18px; padding:9px 11px; color:#ff929b; background:var(--red-soft); border:1px solid rgba(255,107,120,.16); border-radius:9px; font-size:10px; }
.demo-login { margin-top:17px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:4px; border:1px solid rgba(240,185,11,.14); background:rgba(240,185,11,.05); border-radius:9px; color:#d4bd7f; font-size:9px; }
.demo-login span { font-family:ui-monospace,monospace; color:#f2d895; }
.login-footnote { margin:15px 0 0; color:var(--muted-2); font-size:9px; line-height:1.6; }

@media (max-width:1100px) {
  .metric-grid { grid-template-columns:repeat(3,1fr); }
  .health-list { grid-template-columns:repeat(2,1fr); }
  .login-shell { gap:50px; }
}

@media (max-width:820px) {
  .page-wrap,.primary-nav,.demo-banner { width:min(100% - 24px,1480px); }
  .topbar { height:62px; padding:0 14px; }
  .brand small,.user-chip { display:none; }
  .demo-pill { font-size:9px; }
  .primary-nav { height:49px; }
  .primary-nav a { padding:0 11px; }
  .page-wrap { padding-top:24px; }
  .page-heading { align-items:flex-start; flex-direction:column; gap:16px; }
  .overview-kpis { width:100%; }
  .overview-kpis > div { flex:1; min-width:0; }
  .chain-grid { grid-template-columns:1fr; }
  .info-strip { grid-template-columns:1fr; }
  .info-strip > div { border-right:0; border-bottom:1px solid var(--line-soft); }
  .run-summary { width:100%; overflow:auto; }
  .toolbar { align-items:stretch; flex-wrap:wrap; }
  .search-box { flex-basis:100%; }
  .token-hero { align-items:flex-start; flex-direction:column; }
  .token-hero-actions { width:100%; }
  .state-button { flex:1; }
  .contract-row { margin-left:0; }
  .detail-grid,.system-grid { grid-template-columns:1fr; }
  .login-shell { width:min(100% - 28px,500px); padding:40px 0; grid-template-columns:1fr; gap:30px; }
  .login-intro h1 { font-size:46px; }
  .login-brand { margin-bottom:38px; }
}

@media (max-width:620px) {
  .topbar-right { gap:6px; }
  .demo-pill { max-width:82px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .primary-nav .nav-divider { margin:0 2px; }
  .overview-heading { margin-bottom:18px; }
  .overview-kpis > div { padding:10px; }
  .overview-kpis span { font-size:15px; }
  .chain-card { padding:17px; }
  .chain-stat-row > div { padding:0 8px; }
  .chain-stat-row strong { font-size:12px; }
  .heading-with-orb { align-items:flex-start; }
  .large-chain-orb { width:48px; height:48px; border-radius:14px; }
  .run-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .run-summary .health-badge { grid-column:1/3; }
  .toolbar .select-box { flex:1; }
  .table-shell { overflow:visible; border:0; background:transparent; box-shadow:none; }
  .token-table { min-width:0; display:block; }
  .token-table thead { display:none; }
  .token-table tbody { display:grid; gap:10px; }
  .token-table tr { display:grid; grid-template-columns:70px 1fr 1fr; border:1px solid var(--line); background:var(--panel); border-radius:14px; overflow:hidden; }
  .token-table td { height:auto; min-height:58px; padding:11px; display:flex; flex-direction:column; justify-content:center; border:0; border-bottom:1px solid var(--line-soft); }
  .token-table td::before { content:attr(data-label); margin-bottom:4px; color:var(--muted-2); font-size:8px; }
  .token-table td.rank-cell { grid-row:1; grid-column:1; text-align:left!important; align-items:center; }
  .token-table td.token-main-cell { grid-row:1; grid-column:2/4; min-width:0; }
  .token-table td.token-main-cell::before { display:none; }
  .token-table td.action-cell { grid-column:1/4; width:auto; align-items:stretch; }
  .quick-actions { justify-content:space-around; }
  .icon-button { width:44px; height:34px; }
  .row-flags { margin-left:42px; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .metric-card { padding:13px; }
  .metric-card strong { font-size:16px; }
  .token-title h1 { font-size:25px; }
  .token-title-row p { font-size:11px; }
  .contract-row code { max-width:70vw; }
  .token-hero-actions { overflow:auto; }
  .state-button { min-width:max-content; }
  .metric-tabs { gap:14px; }
  .history-panel { overflow:hidden; }
  .link-grid { grid-template-columns:1fr; }
  .health-list { grid-template-columns:1fr; }
  .notice-card { align-items:flex-start; flex-direction:column; }
  .login-intro h1 { font-size:38px; }
  .login-intro > p { font-size:13px; }
  .login-card { padding:23px; }
}

/* Workflow-first, comfortable dashboard */
.topbar { height:60px; background:rgba(17,26,35,.94); border-color:var(--line-soft); }
.primary-nav { height:48px; }
.page-wrap { padding-top:22px; }
.demo-banner { margin:10px auto -4px; padding:7px 12px; color:#c5b98f; background:rgba(216,187,115,.07); font-size:11px; }
.compact-heading { align-items:center; margin-bottom:16px; }
.compact-heading h1 { margin:0 0 4px; font-size:clamp(25px,2.2vw,34px); }
.compact-heading p { font-size:13px; }
.chain-card { padding:18px; background:linear-gradient(145deg,#1c2a36,#18242f); }
.chain-card::before { opacity:.35; }
.chain-identity p { text-transform:none; color:var(--muted); }
.chain-quick-meta { display:flex; gap:20px; margin:14px 0 8px; padding:9px 0; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); color:var(--muted); font-size:11px; }
.chain-quick-meta strong { color:var(--text); }
.mini-ranking { min-height:0; }
.mini-ranking-row { display:grid; grid-template-columns:26px minmax(0,1fr) auto 72px; gap:10px; align-items:center; min-height:52px; padding:7px 4px; border-bottom:1px solid var(--line-soft); }
.mini-ranking-row:last-child { border:0; }
.mini-token strong { font-size:13px; }
.mini-token small,.mini-value small { color:var(--muted-2); font-size:10px; }
.mini-value strong { font-size:13px; }
.card-link { font-size:12px; }

.focus-pills { display:flex; gap:6px; margin-bottom:10px; overflow:auto; scrollbar-width:none; }
.focus-pills::-webkit-scrollbar { display:none; }
.focus-pills a { flex:0 0 auto; padding:7px 13px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:#17232e; font-size:12px; }
.focus-pills a:hover,.focus-pills a.active { color:#f5f8fa; border-color:#6e8ba0; background:#294052; }
.toolbar { padding:9px; background:#192630; }
.search-box,.select-box { background:#121d26; }

.table-shell { background:#18242f; box-shadow:var(--shadow); }
.token-table { min-width:1010px; }
.token-table th { height:42px; padding:0 14px; background:#16212b; color:#9cadb9; font-size:10px; }
.token-table td { height:70px; padding:10px 14px; color:#e2eaee; font-size:13px; }
.token-table tbody tr:hover { background:rgba(131,174,226,.055); }
.rank-cell { width:58px; }
.rank-number { font-size:16px; }
.token-main-cell { min-width:170px; }
.token-name-link { gap:0; }
.token-name-link strong { font-size:15px; }
.token-name-link small { max-width:180px; color:var(--muted); font-size:11px; }
.row-flags { margin:5px 0 0; }
.flag-new,.flag-seen,.flag-watch,.flag-block,.flag-ai-block { display:inline-flex; align-items:center; padding:2px 6px; border-radius:5px; font-size:9px; font-weight:700; }
.flag-seen { color:#aab8c2; background:rgba(170,184,194,.1); }
.flag-ai-block { color:#aebbea; background:rgba(126,143,216,.12); }
.metric-emphasis { color:#93d9b9; font-size:15px; }
.subvalue { color:var(--muted-2); font-size:10px; }
.signal-cell { min-width:130px; }
.signal-badge { display:block; width:max-content; margin:2px 0; padding:2px 7px; border-radius:5px; background:rgba(255,255,255,.055); font-size:10px; font-weight:700; }
.signal-badge.new-signal { color:#9fc7f2; background:rgba(131,174,226,.12); }
.quiet-signal { color:var(--muted-2); }
.action-cell { width:430px; }
.quick-actions { align-items:center; gap:6px; }
.gmgn-button { min-height:36px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; gap:5px; border:1px solid #7ba88f; background:#2c6c50; color:#f2fff8; border-radius:8px; font-size:12px; font-weight:800; white-space:nowrap; cursor:pointer; }
.gmgn-button:hover { background:#347b5d; border-color:#91c4a8; }
.gmgn-button.small { min-height:30px; padding:0 9px; font-size:10px; }
.text-action,.compact-action { height:36px; padding:0 10px; border:1px solid var(--line); background:#1d2b36; color:var(--muted); border-radius:8px; cursor:pointer; font-size:12px; white-space:nowrap; }
.text-action:hover,.compact-action:hover { color:var(--text); border-color:#607789; }
.text-action.selected,.compact-action.selected { color:#d9c17e; background:rgba(216,187,115,.09); border-color:rgba(216,187,115,.35); }
.text-action.danger:hover,.text-action.danger.selected { color:#f0a1a8; border-color:rgba(233,134,143,.38); background:var(--red-soft); }
.text-action.ai-action:hover,.text-action.ai-action.selected,.state-button.ai-action.selected { color:#c0c9f3; border-color:rgba(126,143,216,.42); background:rgba(126,143,216,.11); }
.compact-action { padding:0 8px; }
.hero-gmgn { min-height:38px; padding:0 15px; }
.token-title-row { gap:0; }
.contract-row { margin-left:0; }
.metric-grid { grid-template-columns:repeat(5,1fr); }
.metric-card { background:#1a2733; }
.panel { background:#1a2733; }
.link-grid a,.unavailable-link,.note-panel textarea,.segmented { background:#14202a; }

.ai-nav { gap:5px; }
.ai-nav span { display:inline-flex; align-items:center; justify-content:center; min-width:25px; height:19px; padding:0 5px; color:#dfe5ff; background:linear-gradient(135deg,#596dc4,#7d5fb7); border-radius:5px; font-size:9px; font-weight:900; letter-spacing:.04em; }
.ai-page-heading { align-items:flex-end; }
.ai-page-heading .eyebrow { margin:0 0 5px; color:#8999d8; }
.ai-run-status { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.ai-run-status small { color:var(--muted-2); font-size:10px; }
.ai-cost-strip { margin:14px 0; padding:13px 16px; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; border:1px solid var(--line); background:var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow); }
.ai-cost-strip div { min-width:0; padding:2px 13px; display:flex; flex-direction:column; gap:4px; background:var(--panel); }
.ai-cost-strip small { color:var(--muted-2); font-size:9px; }
.ai-cost-strip strong { color:var(--text); font-size:14px; }
.ai-chain-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.ai-chain-panel { padding:16px; border:1px solid var(--line); border-top:2px solid color-mix(in srgb,var(--accent) 65%,transparent); background:var(--panel); border-radius:14px; box-shadow:var(--shadow); }
.ai-chain-title { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; margin-bottom:12px; }
.ai-chain-title .chain-orb { width:39px; height:39px; font-size:10px; }
.ai-chain-title h2 { margin:0; color:var(--text); font-size:17px; }
.ai-chain-title p { margin:3px 0 0; color:var(--muted-2); font-size:9px; }
.ai-chain-title > a { color:var(--muted); font-size:10px; }
.ai-pick-list { display:grid; gap:8px; }
.ai-pick-card { padding:12px; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:11px; }
.ai-pick-top { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px; }
.ai-pick-rank { width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; color:#e6ebff; background:#4f609f; border-radius:8px; font-size:12px; font-weight:900; }
.ai-pick-top a { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ai-pick-top a strong { color:var(--text); font-size:14px; }
.ai-pick-top a small { overflow:hidden; color:var(--muted-2); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.ai-decision { padding:3px 7px; border-radius:999px; font-size:9px; font-weight:800; white-space:nowrap; }
.ai-decision.continue { color:#84d7af; background:rgba(55,159,111,.12); }
.ai-decision.new { color:#aebbea; background:rgba(126,143,216,.13); }
.ai-decision.replace { color:#e3c27d; background:rgba(206,164,78,.12); }
.ai-pick-metrics { margin:9px 0 0; display:flex; gap:12px; color:var(--muted-2); font-size:9px; }
.ai-pick-metrics strong { color:var(--text); }
.ai-pick-rationale { margin-top:10px; }
.ai-pick-rationale > strong,.ai-pick-narrative > strong { color:#aebbea; font-size:9px; font-weight:850; }
.ai-pick-rationale p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.65; }
.ai-pick-narrative { margin-top:10px; padding:10px 11px; border:1px solid rgba(126,143,216,.16); background:rgba(110,126,190,.055); border-radius:9px; }
.ai-pick-narrative p { margin:6px 0 0; color:var(--text); font-size:12px; line-height:1.82; white-space:pre-wrap; }
.ai-pick-narrative small { margin-top:7px; display:block; color:var(--muted-2); font-size:9px; line-height:1.55; }
.ai-forward { margin-top:9px; padding:8px 10px; background:rgba(110,126,190,.07); border-radius:8px; }
.ai-forward small { color:#9aa8df; font-size:9px; font-weight:800; }
.ai-forward ol { margin:5px 0 0 17px; padding:0; color:var(--muted); font-size:10px; line-height:1.55; }
.ai-pick-actions { margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.ai-pick-actions > a:last-child { color:#a9b5df; font-size:10px; font-weight:700; }
.ai-review-panel { margin-top:14px; }
.ai-review-list { padding:0 14px 14px; display:grid; gap:6px; }
.ai-review-list article { padding:8px 10px; display:grid; grid-template-columns:38px 1fr auto auto; gap:10px; align-items:center; border:1px solid var(--line-soft); border-radius:8px; color:var(--muted); font-size:10px; }
.ai-review-list article span { color:#9aa8df; font-weight:800; }
.ai-review-list article strong { color:var(--text); }
.ai-review-list article em { color:var(--green); font-style:normal; font-weight:800; }
.learning-nav { color:#9a87d8 !important; font-weight:800; }
.learning-nav.active { color:var(--text) !important; }
.learning-heading { align-items:center; }
.learning-kpis { margin:0 0 12px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.learning-kpis article { padding:12px 14px; display:grid; gap:5px; border:1px solid var(--line); background:var(--panel); border-radius:10px; box-shadow:var(--shadow); }
.learning-kpis small { color:var(--muted-2); font-size:9px; }
.learning-kpis strong { color:var(--text); font-size:22px; }
.learning-grid { margin-bottom:12px; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:12px; }
.teach-ai-panel form { padding:0 14px 10px; display:grid; grid-template-columns:160px 1fr auto; gap:8px; align-items:start; }
.teach-ai-panel select,.teach-ai-panel textarea { padding:9px 10px; color:var(--text); border:1px solid var(--line); background:#14202a; border-radius:8px; font:inherit; font-size:10px; outline:0; }
.teach-ai-panel textarea { resize:vertical; }
.teach-ai-panel > small { padding:0 14px 13px; display:block; color:var(--muted-2); font-size:8px; }
.outcome-table { padding:0 14px 14px; display:grid; gap:6px; }
.outcome-table > div:not(.empty-inline) { padding:8px 9px; display:grid; grid-template-columns:54px 1fr 1fr 64px; align-items:center; gap:7px; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:8px; }
.outcome-table strong { color:var(--text); font-size:10px; }
.outcome-table span { color:var(--muted-2); font-size:8px; }
.outcome-table em { justify-self:end; font-size:10px; font-style:normal; font-weight:800; }
.learning-section { margin-top:12px; }
.missed-learning-list,.rule-list,.guidance-list { padding:0 14px 14px; display:grid; gap:7px; }
.missed-learning-list > article,.rule-list > article,.guidance-list > article { padding:10px 11px; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:9px; }
.missed-token { display:grid; grid-template-columns:42px 1fr auto auto; align-items:center; gap:9px; }
.missed-token span,.guidance-list article > span { color:#9f8be0; font-size:8px; font-weight:900; }
.missed-token strong { color:var(--text); font-size:11px; }
.missed-token em { font-size:10px; font-style:normal; font-weight:900; }
.missed-token small { color:var(--muted-2); font-size:8px; }
.missed-learning-list article > p { margin:9px 0 0; color:var(--muted); font-size:10px; line-height:1.65; }
.missed-learning-list ul { margin:7px 0 0 17px; padding:0; color:var(--muted); font-size:9px; line-height:1.6; }
.waiting-review { margin-top:8px; padding:8px 9px; color:#b6a770; background:rgba(184,149,54,.08); border-radius:7px; font-size:9px; }
.rule-list > article { display:grid; grid-template-columns:58px 1fr auto; gap:9px; align-items:start; }
.rule-list p,.guidance-list p { margin:0; color:var(--muted); font-size:10px; line-height:1.6; }
.rule-list small,.guidance-list small { color:var(--muted-2); font-size:8px; white-space:nowrap; }
.rule-status { padding:3px 5px; text-align:center; border-radius:5px; font-size:8px; font-weight:900; }
.rule-status.active { color:#75d7ae; background:rgba(54,160,115,.12); }
.rule-status.paused { color:var(--muted-2); background:rgba(120,130,145,.1); }
.guidance-list article { display:grid; grid-template-columns:36px 1fr auto; gap:9px; align-items:start; }
.ai-inline-panel { margin:0 0 12px; padding:11px 13px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--panel); border-radius:11px; box-shadow:var(--shadow); }
.ai-inline-head { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.ai-inline-head > div { display:flex; align-items:center; gap:8px; }
.ai-inline-head strong { color:var(--text); font-size:11px; }
.ai-inline-head > a { color:#a6b3df; font-size:10px; font-weight:700; }
.ai-kicker { padding:3px 6px; color:#dce3ff; background:#4f609f; border-radius:5px; font-size:8px; font-weight:900; }
.ai-inline-grid { margin-top:9px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.ai-inline-pick { min-width:0; padding:8px 9px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:8px; }
.ai-inline-pick > span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
.ai-inline-pick strong { overflow:hidden; color:var(--text); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.ai-inline-pick small { color:var(--muted-2); font-size:8px; }
.ai-inline-pick em { color:var(--muted); font-size:10px; font-style:normal; font-weight:700; }
.ai-token-panel { margin:12px 0; }
.ai-tracking-mode { color:#aebbea; font-size:9px; }
.ai-history-notice { margin:0 14px 12px; padding:10px 12px; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; border:1px solid rgba(126,143,216,.25); background:rgba(126,143,216,.07); border-radius:9px; }
.ai-history-notice strong { color:#c0c9f3; font-size:11px; }
.ai-history-notice span { color:var(--muted); font-size:10px; line-height:1.6; }
.ai-thesis { padding:0 14px 12px; display:grid; gap:7px; }
.ai-thesis span { width:max-content; padding:3px 7px; color:#aebbea; background:rgba(126,143,216,.11); border-radius:5px; font-size:9px; font-weight:800; }
.ai-thesis strong { color:var(--text); font-size:11px; }
.ai-thesis p { margin:0; color:var(--muted); font-size:12px; line-height:1.7; }
.ai-full-narrative { margin:0 14px 12px; padding:14px; border:1px solid rgba(126,143,216,.22); background:rgba(110,126,190,.055); border-radius:10px; }
.ai-full-narrative > div { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:5px 12px; }
.ai-full-narrative strong { color:#c4cdf1; font-size:13px; }
.ai-full-narrative span { color:var(--muted-2); font-size:9px; }
.ai-full-narrative p { margin:10px 0 0; color:var(--text); font-size:13px; line-height:1.9; white-space:pre-wrap; }
.ai-latest-decision { margin:0 14px 12px; padding:12px; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:10px; }
.ai-latest-decision > strong { color:var(--text); font-size:14px; }
.ai-latest-decision > span { margin-left:8px; color:var(--muted-2); font-size:9px; }
.ai-latest-decision p { color:var(--muted); font-size:11px; line-height:1.65; }
.ai-latest-decision ol { margin:7px 0 8px 18px; padding:0; color:var(--muted); font-size:10px; line-height:1.6; }
.ai-latest-decision > small { color:#c18a8f; font-size:9px; }
.ai-result-strip { margin:0 14px 12px; padding:9px 11px; display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line-soft); background:rgba(110,126,190,.055); border-radius:9px; }
.ai-result-strip > strong { color:var(--text); font-size:10px; }
.ai-result-strip > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; }
.ai-result-strip span { min-width:54px; padding:5px 7px; display:grid; gap:2px; text-align:center; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:7px; }
.ai-result-strip small { color:var(--muted-2); font-size:7px; }
.ai-result-strip b { color:inherit; font-size:9px; }
.ai-timeline-head { margin:0 14px; padding:11px 0 8px; display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line-soft); }
.ai-timeline-head strong { color:var(--text); font-size:12px; }
.ai-timeline-head span { color:var(--muted-2); font-size:9px; }
.ai-timeline { padding:0 14px 14px; }
.ai-timeline article { position:relative; display:grid; grid-template-columns:72px 12px 1fr; gap:8px; }
.ai-timeline article:not(:last-child)::after { content:""; position:absolute; left:85px; top:18px; bottom:-3px; width:1px; background:var(--line); }
.ai-timeline time { padding-top:3px; color:var(--muted-2); font-size:9px; }
.ai-timeline i { z-index:1; width:8px; height:8px; margin-top:5px; border:2px solid var(--panel); background:#7e8fd8; border-radius:50%; box-shadow:0 0 0 1px #7e8fd8; }
.ai-timeline article > div { padding:0 0 13px; }
.ai-timeline article strong { color:var(--text); font-size:11px; }
.ai-timeline article p { margin:4px 0; color:var(--muted); font-size:10px; line-height:1.6; }
.ai-timeline article a { color:#9aa8df; font-size:9px; }
.ai-feedback-box { margin:0 14px 14px; padding:10px 11px; border:1px solid var(--line-soft); background:var(--panel-2); border-radius:9px; }
.ai-feedback-box summary { color:#aebbea; cursor:pointer; font-size:10px; font-weight:800; }
.ai-feedback-box form { margin-top:9px; display:grid; grid-template-columns:150px 1fr auto; gap:7px; align-items:start; }
.ai-feedback-box select,.ai-feedback-box textarea { padding:8px 9px; color:var(--text); border:1px solid var(--line); background:#14202a; border-radius:7px; font:inherit; font-size:10px; outline:0; }
.ai-feedback-box textarea { resize:vertical; }
.ai-feedback-box > small { display:block; margin-top:6px; color:var(--muted-2); font-size:8px; }
.ai-decision-history { margin:0 14px 14px; padding:10px 11px; border:1px solid var(--line-soft); border-radius:9px; }
.ai-decision-history summary { color:var(--muted); cursor:pointer; font-size:10px; font-weight:800; }
.ai-decision-history > div { margin-top:8px; display:grid; gap:6px; }
.ai-decision-history article { padding:8px 9px; display:grid; grid-template-columns:110px 90px 70px 1fr; align-items:start; gap:8px; background:var(--panel-2); border-radius:7px; }
.ai-decision-history time,.ai-decision-history span { color:var(--muted-2); font-size:8px; }
.ai-decision-history strong { color:var(--text); font-size:9px; }
.ai-decision-history p { margin:0; color:var(--muted); font-size:9px; line-height:1.5; }

@media (max-width:820px) {
  .topbar { height:58px; }
  .page-wrap { padding-top:18px; }
  .compact-heading { align-items:flex-start; gap:8px; }
  .chain-grid { gap:12px; }
  .metric-grid { grid-template-columns:repeat(3,1fr); }
  .ai-cost-strip { grid-template-columns:repeat(3,1fr); }
  .ai-chain-grid { grid-template-columns:1fr; }
  .learning-grid { grid-template-columns:1fr; }
}

@media (max-width:620px) {
  body { font-size:14px; }
  .page-wrap,.primary-nav,.demo-banner { width:min(100% - 20px,1480px); }
  .brand-mark { width:30px; height:30px; }
  .brand strong { font-size:14px; }
  .demo-pill { display:none; }
  .theme-toggle { width:34px; padding:0; justify-content:center; }
  .theme-label { display:none; }
  .demo-banner { font-size:10px; }
  .compact-heading h1 { font-size:25px; }
  .compact-heading p { font-size:11px; }
  .learning-kpis { grid-template-columns:repeat(2,1fr); }
  .teach-ai-panel form { grid-template-columns:1fr; }
  .rule-list > article,.guidance-list article { grid-template-columns:auto 1fr; }
  .rule-list small,.guidance-list small { grid-column:1 / -1; }
  .missed-token { grid-template-columns:36px 1fr auto; }
  .missed-token small { grid-column:2 / -1; }
  .chain-card { padding:15px; }
  .mini-ranking-row { grid-template-columns:22px minmax(0,1fr) auto; gap:8px; }
  .mini-ranking-row .mini-value { display:none; }
  .gmgn-button.small { min-height:32px; }
  .focus-pills a { padding:7px 11px; font-size:11px; }
  .toolbar { gap:7px; }
  .token-table { width:100%; min-width:0; display:block; }
  .token-table tbody { width:100%; gap:8px; }
  .token-table tr { grid-template-columns:52px 1fr 1fr; background:#1a2733; }
  .token-table td { min-height:52px; font-size:12px; }
  .token-table td.rank-cell { grid-column:1; }
  .token-table td.token-main-cell { grid-column:2/4; }
  .token-table td.signal-cell { grid-column:1/4; min-width:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:5px; }
  .token-table td.signal-cell::before { margin:0 5px 0 0; }
  .token-table td.action-cell { grid-column:1/4; width:auto; }
  .quick-actions { width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .gmgn-button { flex:1 0 100%; min-width:0; }
  .text-action { flex:1 1 calc(50% - 4px); }
  .compact-action { min-width:44px; }
  .row-flags { margin-left:0; }
  .metric-grid { grid-template-columns:repeat(2,1fr); }
  .token-hero-actions { flex-wrap:wrap; overflow:visible; }
  .hero-gmgn { flex-basis:100%; }
  .ai-nav span { display:none; }
  .ai-page-heading { align-items:flex-start; }
  .ai-run-status { align-items:flex-start; }
  .ai-cost-strip { grid-template-columns:repeat(2,1fr); }
  .ai-inline-grid { grid-template-columns:1fr; }
  .ai-inline-head strong { display:none; }
  .ai-pick-metrics { flex-wrap:wrap; }
  .ai-review-list article { grid-template-columns:34px 1fr auto; }
  .ai-review-list article small { grid-column:2/4; }
  .ai-timeline-head span { display:none; }
  .ai-feedback-box form { grid-template-columns:1fr; }
  .ai-result-strip { align-items:flex-start; flex-direction:column; }
  .ai-result-strip > div { width:100%; justify-content:flex-start; }
  .ai-decision-history article { grid-template-columns:1fr auto; }
  .ai-decision-history article p { grid-column:1 / -1; }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg:#f3efe6;
  --bg-soft:#eee7dc;
  --panel:#fffaf2;
  --panel-2:#f7f0e5;
  --line:#d6cfc3;
  --line-soft:#e6ded2;
  --text:#252b31;
  --muted:#616a72;
  --muted-2:#7d858c;
  --green:#287a57;
  --green-soft:rgba(40,122,87,.10);
  --red:#b64f58;
  --red-soft:rgba(182,79,88,.10);
  --amber:#957126;
  --blue:#4d75a4;
  --shadow:0 10px 28px rgba(86,70,48,.10);
}
html[data-theme="light"] body { background:linear-gradient(180deg,#faf6ee 0,var(--bg) 340px); }
html[data-theme="light"] .topbar { background:rgba(250,246,238,.94); border-color:var(--line); }
html[data-theme="light"] .brand-mark { background:linear-gradient(145deg,#fffdf8,#eee7db); border-color:#d3cabd; }
html[data-theme="light"] .primary-nav a.active { border-color:#39434c; }
html[data-theme="light"] .demo-pill,
html[data-theme="light"] .demo-banner { color:#806621; background:rgba(149,113,38,.08); border-color:rgba(149,113,38,.22); }
html[data-theme="light"] .chain-card { background:linear-gradient(145deg,#fffaf2,#f7f0e5); }
html[data-theme="light"] .chain-orb,
html[data-theme="light"] .large-chain-orb { background:color-mix(in srgb,var(--accent) 10%,#fffaf2); border-color:color-mix(in srgb,var(--accent) 32%,#d6cfc3); color:color-mix(in srgb,var(--accent) 72%,#29313a); }
html[data-theme="light"] .health-badge { background:#f5eee3; }
html[data-theme="light"] .focus-pills a { background:#f8f2e8; }
html[data-theme="light"] .focus-pills a:hover,
html[data-theme="light"] .focus-pills a.active { color:#25323b; border-color:#91a2af; background:#dfe9ef; }
html[data-theme="light"] .toolbar { background:#fffaf2; }
html[data-theme="light"] .search-box,
html[data-theme="light"] .select-box { background:#f5f0e7; }
html[data-theme="light"] .search-box input::placeholder { color:#92989d; }
html[data-theme="light"] .secondary-button,
html[data-theme="light"] .state-button,
html[data-theme="light"] .text-action,
html[data-theme="light"] .compact-action,
html[data-theme="light"] .icon-button { background:#f6f0e7; color:#59636b; }
html[data-theme="light"] .table-shell { background:#fffaf2; }
html[data-theme="light"] .token-table th { background:#f3ede3; color:#69747c; }
html[data-theme="light"] .token-table td { color:var(--text); }
html[data-theme="light"] .token-table tbody tr:hover { background:rgba(77,117,164,.055); }
html[data-theme="light"] .mini-value strong { color:#344049; }
html[data-theme="light"] .flag-seen { color:#5f6a72; background:rgba(95,106,114,.09); }
html[data-theme="light"] .flag-ai-block { color:#53649c; background:rgba(83,100,156,.10); }
html[data-theme="light"] .text-action.ai-action:hover,
html[data-theme="light"] .text-action.ai-action.selected,
html[data-theme="light"] .state-button.ai-action.selected { color:#4e5f98; border-color:rgba(78,95,152,.34); background:rgba(78,95,152,.09); }
html[data-theme="light"] .metric-emphasis { color:#287a57; }
html[data-theme="light"] .signal-badge { background:rgba(37,43,49,.055); }
html[data-theme="light"] .signal-badge.new-signal { color:#356b9a; background:rgba(77,117,164,.11); }
html[data-theme="light"] .metric-card,
html[data-theme="light"] .panel { background:#fffaf2; }
html[data-theme="light"] .ai-chain-panel,
html[data-theme="light"] .ai-inline-panel { background:#fffaf2; }
html[data-theme="light"] .ai-pick-card,
html[data-theme="light"] .ai-inline-pick,
html[data-theme="light"] .ai-latest-decision { background:#f7f0e5; }
html[data-theme="light"] .ai-pick-narrative,
html[data-theme="light"] .ai-full-narrative,
html[data-theme="light"] .ai-history-notice { background:#f5efe5; }
html[data-theme="light"] .ai-pick-rank,
html[data-theme="light"] .ai-kicker { color:#fff; background:#586aa8; }
html[data-theme="light"] .ai-forward { background:rgba(78,95,152,.07); }
html[data-theme="light"] .ai-feedback-box,
html[data-theme="light"] .ai-feedback-box select,
html[data-theme="light"] .ai-feedback-box textarea { background:#f7f0e5; }
html[data-theme="light"] .metric-card.featured { background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 6%,#fffaf2),#f8f1e6); }
html[data-theme="light"] .link-grid a,
html[data-theme="light"] .unavailable-link,
html[data-theme="light"] .note-panel textarea,
html[data-theme="light"] .segmented { background:#f5efe5; }
html[data-theme="light"] .segmented button.active { background:#e2e8e9; }
html[data-theme="light"] .toast { background:#29323a; color:#fff; }

@media (max-width:620px) {
  html[data-theme="light"] .token-table tr { background:#fffaf2; }
}

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