/* V3 Operator Portal: dark, layered panels, dot-matrix figures, tinted cards. */

@font-face { font-family: 'Geist'; src: url('/fonts/geist-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('/fonts/geist-sans-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
/* Doto draws '.' and ',' as small crosses; this face supplies just those two from Geist Mono. */
@font-face { font-family: 'DotSep'; src: url('/fonts/geist-mono-latin-500-normal.woff2') format('woff2'); unicode-range: U+002C, U+002E; font-display: swap; }
@font-face { font-family: 'Doto'; src: url('/fonts/doto-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Doto'; src: url('/fonts/doto-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }

:root {
  color-scheme: dark;
  --page: #08080a;
  --frame: #151517;
  --panel: #0e0e10;
  --surface-1: #141416;
  --surface-2: #1b1b1e;
  --surface-3: #242428;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text-1: #ededee;
  --text-2: #8d8d93;
  --text-3: #5d5d64;
  --ink: #d9dadd;
  --ink-soft: #6d6d75;
  --ok: #3ecf6e;
  --pending: #e8a33a;
  --auth: #4b8dff;
  --bad: #ef5350;
  --violet: #8b5cf6;
  --sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --dot: 'DotSep', 'Doto', 'Geist Mono', ui-monospace, monospace;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  /* legacy spacing tokens used by inner pages */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s6: 48px;
  --radius: var(--r-md);
  --border: var(--line);
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--text-1); font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--text-1); }
h1 { font-size: 24px; margin: 0; font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: 15px; margin: 0; font-weight: 500; }
p { margin: 0 0 var(--s2); }
button { font: inherit; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dot-num { font-family: var(--dot); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; line-height: 1; }
.muted { color: var(--text-2); }
.muted-2 { color: var(--text-3); }
.small { font-size: 12.5px; }
.strong, .strong-2 { font-weight: 600; color: var(--text-1); }
.mono-wrap { word-break: break-all; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 8px; }
.icon { flex-shrink: 0; }

/* ---------- Frame ---------- */
.shell { display: flex; margin: 14px; min-height: calc(100vh - 28px); background: var(--frame); border-radius: 30px; border: 1px solid var(--line); }
.content { flex: 1; min-width: 0; background: var(--panel); border-radius: 30px; border-left: 1px solid var(--line); box-shadow: -18px 0 40px rgba(0, 0, 0, 0.35); }
.main { padding: 8px 32px 32px; max-width: 1560px; }
.main.solo { margin: 0 auto; padding-top: 32px; }
.tabbar { display: none; }

/* ---------- Sidebar ---------- */
.sidebar { width: 252px; flex-shrink: 0; padding: 28px 18px 20px; display: flex; flex-direction: column; gap: 18px; position: sticky; top: 14px; height: calc(100vh - 28px); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px 8px; }
.brand .mark, .brand-logo { color: var(--text-1); display: inline-flex; }
.brand-text { display: grid; line-height: 1.15; }
.brand-text strong { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.brand-text small { color: var(--text-3); font-size: 11.5px; }
.brand-mark { font-family: var(--mono); background: var(--text-1); color: var(--panel); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 600; }
.seg { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 3px; margin: 0 6px; }
.seg button { background: none; border: 0; color: var(--text-3); padding: 6px 0; border-radius: 9px; cursor: pointer; font-size: 13px; }
.seg button.on { background: var(--surface-3); color: var(--text-1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset; }
.nav-label { color: var(--text-3); font-size: 12.5px; padding: 6px 12px 0; display: flex; justify-content: space-between; align-items: center; }
.nav-count { background: rgba(239, 83, 80, 0.15); color: var(--bad); font-size: 11px; border-radius: 6px; padding: 0 6px; font-family: var(--mono); }
.nav, .nav-sub, .sidebar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-sub { padding: 2px 0 4px 18px; }
.nav-item, .sidebar li > a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; color: var(--text-2); text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 14.5px; text-align: left; }
.nav-sub .nav-item { font-size: 14px; padding: 8px 12px; color: var(--text-3); }
.nav-item:hover, .sidebar li > a:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.03); }
.nav-item.active, .sidebar li > a.active { color: var(--text-1); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.nav-item.active-group { color: var(--text-1); }
.nav-caret { margin-left: auto; color: var(--text-3); }
.nav-badge { margin-left: auto; background: rgba(232, 163, 58, 0.14); color: var(--pending); font-size: 11px; font-family: var(--mono); border-radius: 7px; padding: 1px 7px; }
.mini { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 6px; }
.mini-head { width: 100%; display: flex; justify-content: space-between; align-items: center; background: none; border: 0; color: var(--text-2); padding: 6px 8px; cursor: pointer; }
.mini-id { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.mini-body { padding: 4px 8px 6px; text-align: center; }
.mini-title { font-size: 16px; color: var(--text-1); }
.mini-sub { font-size: 11.5px; color: var(--text-3); }
.mini-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 4px 12px; }
.mini-progress span { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; position: relative; }
.mini-progress span::after { content: ''; position: absolute; inset: 0; width: calc(var(--fill, 0) * 100%); background: #fff; border-radius: 4px; box-shadow: 0 0 8px rgba(255, 255, 255, 0.5); }
.mini-actions { display: flex; gap: 6px; justify-content: center; }
.mini-actions .pill { height: 36px; font-size: 12.5px; flex: 1; justify-content: center; }
.sidebar-foot { margin-top: auto; display: flex; gap: 10px; padding: 0 6px; align-items: center; }
.sidebar-foot .muted { flex: 1; }

/* ---------- Top bar ---------- */
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 32px 10px; flex-wrap: wrap; }
.live { display: flex; gap: 8px; flex-wrap: wrap; }
.live-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); font-size: 12px; }
.live-k { color: var(--text-3); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.delta.up { color: var(--ok); }
.delta.down { color: var(--bad); }
.badge-live { font-family: var(--mono); font-size: 10px; color: var(--ok); border: 1px solid rgba(62, 207, 110, 0.5); border-radius: 5px; padding: 0 4px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.dots { width: 150px; height: 22px; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.28) 1px, transparent 1.4px); background-size: 7px 7px; opacity: 0.6; }
.user-id { white-space: nowrap; }
.who { display: flex; align-items: center; gap: 10px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; background: radial-gradient(circle at 30% 25%, #6d6d78, #26262b 70%); border: 1px solid var(--line-2); }
.who-text { display: grid; line-height: 1.2; }
.who-text strong { font-weight: 500; font-size: 14px; }
.link-quiet { background: none; border: 0; padding: 0; color: var(--text-3); font-size: 11.5px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.link-quiet:hover:not(:disabled) { color: var(--text-1); }
.link-quiet:disabled { opacity: 0.4; cursor: default; }

/* Console keeps a simple live header */
.live-header { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; padding: 22px 32px 10px; font-size: 13px; }
.live-item { display: flex; align-items: center; gap: 8px; }
.live-label { color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.live-clock { margin-left: auto; }

/* ---------- Buttons ---------- */
.pill, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); color: var(--text-1); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 13.5px; transition: background 0.15s, border-color 0.15s; }
.pill:hover, .btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.2); }
.pill.strong, .btn.primary { background: #ededee; color: #0c0c0e; border-color: #ededee; font-weight: 500; }
.pill.strong:hover, .btn.primary:hover { background: #fff; }
.pill.wide { flex: 1; }
.pill.amber { background: rgba(232, 163, 58, 0.1); border-color: rgba(232, 163, 58, 0.22); color: #f0b24e; cursor: default; font-size: 12.5px; }
.pill.amber-quiet { border-color: rgba(232, 163, 58, 0.18); color: #c99a4a; background: transparent; font-size: 12.5px; }
.pill:disabled, .btn:disabled, .btn.disabled, .pill.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn.small { height: 32px; font-size: 12.5px; padding: 0 14px; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 500; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.02); color: var(--text-2); text-decoration: none; cursor: pointer; flex-shrink: 0; position: relative; }
.icon-btn:hover { color: var(--text-1); background: rgba(255, 255, 255, 0.07); }
.icon-btn.sm { width: 32px; height: 32px; }
.icon-btn.xs { width: 24px; height: 24px; border-color: transparent; background: rgba(255, 255, 255, 0.06); }
.icon-inline { background: none; border: 0; color: var(--text-2); cursor: pointer; padding: 0 0 0 6px; display: inline-flex; vertical-align: middle; }
.link { background: none; border: 0; padding: 0; color: var(--text-2); text-decoration: underline; cursor: pointer; text-align: left; }

/* ---------- Overview ---------- */
.overview { display: grid; gap: 22px; }
.overview-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding-top: 18px; }
.hero { padding: 0; }
.hero-meta { color: var(--text-3); font-size: 11.5px; display: flex; align-items: center; gap: 5px; }
.hero-title { font-size: 26px; font-weight: 400; margin: 2px 0 10px; display: flex; align-items: center; }
.hero-figure { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-num { font-size: clamp(56px, 7.2vw, 96px); letter-spacing: 0.02em; }
.asset-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 8px; border-radius: 12px; background: rgba(75, 141, 255, 0.12); color: #6ea5ff; font-size: 17px; border: 1px solid rgba(75, 141, 255, 0.2); }
.asset-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.asset-ico.sm { width: 22px; height: 22px; }
.asset-ico.eth { background: #4b6bff; color: #fff; }
.asset-ico.warm { background: #f7931a; color: #fff; }
.hero-sub { display: flex; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 13px; flex-wrap: wrap; }
.hero-sub .num.muted-2 { font-size: 22px; font-family: var(--dot); font-weight: 600; color: var(--text-3); }
.gain { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-family: var(--mono); font-size: 12.5px; }
.gain.down { color: var(--bad); }
.gain-dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgba(62, 207, 110, 0.18); font-size: 8px; }
.gain.down .gain-dot { background: rgba(239, 83, 80, 0.18); }
.notice-row { display: flex; gap: 14px; align-items: center; }
.notice { display: flex; align-items: center; gap: 14px; min-width: 300px; padding: 14px 18px; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); text-decoration: none; color: var(--text-2); }
.notice span { display: grid; line-height: 1.3; }
.notice strong { color: var(--text-1); font-weight: 500; font-size: 14px; }
.notice small { color: var(--text-3); font-size: 12px; }
.notice-time { margin-left: auto; align-self: flex-start; font-size: 11px; color: var(--text-3); }
.icon-btn.bell { width: 56px; height: 56px; color: var(--bad); border-color: var(--line); background: var(--surface-1); }
.bell-dot { position: absolute; top: 16px; right: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 8px var(--bad); }

.row-a { display: grid; grid-template-columns: 1fr 1fr 60px minmax(250px, 0.72fr); gap: 16px; align-items: stretch; }
.row-b { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 16px; align-items: stretch; }

.tile, .card { position: relative; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-1); padding: 22px 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); min-width: 0; overflow: hidden; }
.tile-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.tile-name { display: inline-flex; gap: 10px; align-items: center; font-size: 15.5px; }
.tile-tools { display: inline-flex; gap: 8px; }
.tile-tools .icon-btn { width: 36px; height: 36px; }
.tile-figure .dot-num { font-size: 34px; }
.tile-usd { color: var(--text-3); font-size: 12.5px; margin: 8px 0 18px; }
.tile-meta { display: flex; gap: 12px 32px; margin: 0; flex-wrap: wrap; }
.tile-meta dt { color: var(--text-3); font-size: 11.5px; }
.tile-meta dd { margin: 2px 0 0; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tile-meta dd span { color: var(--text-3); }
.tile-foot { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 0 -24px -22px; padding: 16px 16px; background: #121214; border-top: 1px solid var(--line); }

.tile-warm, .tile-cool { display: flex; flex-direction: column; }
.tile-warm .tile-foot, .tile-cool .tile-foot { margin-top: auto; }
.tile-warm .tile-meta { margin-bottom: 22px; }
.tile-cool .tile-meta { margin-bottom: 22px; }
.tile-warm { background: radial-gradient(120% 90% at 18% 0%, rgba(176, 102, 28, 0.42), rgba(70, 42, 16, 0.25) 45%, transparent 75%), #17140f; }
.tile-cool { background: radial-gradient(120% 90% at 18% 0%, rgba(78, 84, 196, 0.42), rgba(40, 42, 92, 0.25) 45%, transparent 75%), #13141c; }
.tile-violet { background: radial-gradient(130% 70% at 50% 115%, rgba(139, 92, 246, 0.75), rgba(91, 33, 182, 0.35) 45%, transparent 75%), #141218; border-color: rgba(167, 139, 250, 0.35); display: flex; flex-direction: column; }
.tile-deep { background: radial-gradient(110% 80% at 20% 0%, rgba(40, 78, 150, 0.4), transparent 70%), #111318; }
.tile-plain { background: linear-gradient(180deg, #161618, #121214); }

.rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--line); }
.rail .icon-btn { border-color: transparent; }
.rail-gap { flex: 1; }

.tag-ad { font-size: 11px; color: #b79cff; }
.promo-title { font-size: 22px; font-weight: 400; margin: 4px 0 8px; }
.promo-text { color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.promo-actions { margin-top: auto; display: grid; gap: 10px; }
.btn-violet, .btn-violet-quiet { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 12px; text-decoration: none; font-size: 14px; }
.btn-violet { background: linear-gradient(180deg, #6d3fd8, #5a2fc0); color: #fff; border: 1px solid rgba(196, 170, 255, 0.35); box-shadow: 0 6px 24px rgba(109, 63, 216, 0.35); }
.btn-violet:hover { filter: brightness(1.1); }
.btn-violet-quiet { color: var(--text-1); border: 1px solid rgba(196, 170, 255, 0.3); background: rgba(20, 14, 34, 0.55); }

.selects { display: inline-flex; gap: 8px; }
.select-pill { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.03); font-size: 13px; color: var(--text-1); }
.select-pill select { appearance: none; background: none; border: 0; color: inherit; font: inherit; padding: 0 18px 0 0; height: 100%; min-height: 0; cursor: pointer; width: auto; }
.select-pill .icon { position: absolute; right: 10px; pointer-events: none; color: var(--text-2); }
.select-pill.static { color: var(--text-1); }
.trend { position: relative; width: 100%; }
.trend svg { display: block; overflow: visible; }
.line-current { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.line-glow { fill: none; stroke-width: 6; opacity: 0.45; }
.line-previous { fill: none; stroke: #8d8d93; stroke-width: 1.6; stroke-dasharray: 1.5 5; stroke-linecap: round; }
.line-expected { fill: none; stroke: #4a4a52; stroke-width: 1.6; }
.end circle { stroke: var(--panel); stroke-width: 2; }
.end.cur circle { fill: #c5f25e; }
.end.prev circle, .end.exp circle { fill: #d9dadd; }
.end text { font: 11px var(--mono); fill: var(--text-2); }
.end.cur text { fill: var(--text-1); }
.hover-dot { fill: #fff; stroke: var(--panel); stroke-width: 2; }
.legend-row { display: flex; gap: 18px; font-size: 11.5px; color: var(--text-3); margin-top: 6px; flex-wrap: wrap; }
.legend-row span { display: inline-flex; align-items: center; gap: 6px; }
.key { width: 16px; height: 0; border-top: 2px solid; display: inline-block; }
.key.cur { border-image: linear-gradient(90deg, #3b9bff, #c5f25e) 1; }
.key.prev { border-top: 2px dotted #8d8d93; }
.key.exp { border-color: #4a4a52; }
.trend-foot { display: flex; align-items: flex-end; gap: 40px; margin: 18px -24px -22px; padding: 16px 24px 20px; background: #121214; border-top: 1px solid var(--line); }
.trend-foot .k, .status-ends .k, .quick-k { color: var(--text-2); font-size: 12.5px; }
.trend-foot .v { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; color: var(--text-2); }
.trend-foot .u { color: var(--text-3); font-size: 12px; }
.trend-foot .icon-btn { margin-left: auto; }
.dot-num.sm { font-size: 28px; color: var(--text-1); }
.dot-num.md { font-size: 30px; }
.dot-num.xs { font-size: 19px; font-weight: 600; }

.chips { justify-content: flex-start; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); font-size: 14px; color: #6ea5ff; }
.chip.quiet { color: var(--text-3); padding: 0 12px; }
.chip.right { margin-left: auto; color: var(--text-1); padding: 0 12px; }
.chip.state-auth { color: var(--auth); background: rgba(75, 141, 255, 0.12); padding: 0 12px; }
.chip.state-pending { color: var(--pending); background: rgba(232, 163, 58, 0.12); padding: 0 12px; }
.chip.state-ok { color: var(--ok); background: rgba(62, 207, 110, 0.12); padding: 0 12px; }
.chip.state-bad { color: var(--bad); background: rgba(239, 83, 80, 0.14); padding: 0 12px; }
.chip.state-neutral { color: var(--text-2); padding: 0 12px; }
.status-card { display: flex; flex-direction: column; background: radial-gradient(90% 70% at 50% 100%, rgba(255, 255, 255, 0.08), transparent 70%), linear-gradient(180deg, #161618, #111113); }
.status-center { text-align: center; margin-top: 8px; }
.status-who { display: inline-flex; gap: 6px; align-items: center; color: var(--text-2); font-size: 13px; }
.status-center h2 { font-size: 24px; font-weight: 500; margin: 6px 0 4px; }
.status-ends { display: flex; justify-content: space-between; margin-top: 14px; }
.status-ends .right { text-align: right; }
.gauge { width: calc(100% + 48px); margin: -4px -24px 0; height: auto; display: block; }
.gauge-track { fill: none; stroke-width: 3; }
.gauge-fill { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.55)); }
.gauge-mark { stroke: var(--panel); stroke-width: 2; }
.gauge-mark.ok { fill: var(--ok); }
.gauge-mark.pending { fill: var(--pending); }
.status-foot { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }

.quick { display: flex; flex-direction: column; gap: 6px; }
.quick-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.quick-bal { display: grid; text-align: right; font-size: 12px; color: var(--text-1); line-height: 1.35; }
.quick-bal small { color: var(--text-3); font-size: 11.5px; }
.quick-k { margin-top: 10px; }
.quick-amount { display: flex; align-items: baseline; gap: 10px; }
.quick-amount input { font-family: var(--dot); font-weight: 800; font-size: 34px; background: none; border: 0; padding: 0; height: auto; min-height: 0; color: var(--text-1); width: 100%; outline: none; }
.quick-amount input::placeholder { color: var(--text-3); }
.quick-amount input:focus { border: 0; }
.quick-swap { display: flex; justify-content: center; margin: 4px 0; }
.quick-swap .icon-btn { background: var(--surface-2); }
.quick-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: auto; padding-top: 14px; }

.bottombar { display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px; align-items: center; }
.bar-pill { display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: var(--r-md); background: var(--surface-1); border: 1px solid var(--line); text-decoration: none; color: var(--text-1); }
.bar-pill.right { padding: 10px 10px 10px 16px; }
.bar-pill span:not(.icon-btn) { display: grid; line-height: 1.25; }
.bar-pill strong { font-weight: 500; font-size: 13.5px; }
.bar-pill small { color: var(--text-3); font-size: 11.5px; }
.bar-pill:hover { border-color: var(--line-2); }
.search { position: relative; display: flex; align-items: center; gap: 12px; max-width: 520px; justify-self: center; width: 100%; }
.search input { border: 0; background: none; height: 40px; padding: 0; color: var(--text-1); }
.search input::placeholder { color: var(--text-3); }
.search input:focus { border: 0; }
.search-results { position: absolute; bottom: 48px; left: 52px; right: 0; list-style: none; margin: 0; padding: 6px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-sm); z-index: 10; }
.search-results a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; }
.search-results a:hover { background: rgba(255, 255, 255, 0.06); }

/* ---------- Inner pages ---------- */
.page { display: grid; gap: 20px; padding-top: 18px; }
.page.narrow { max-width: 760px; }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.back { color: var(--text-2); text-decoration: none; font-size: 13.5px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.stat { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; }
.stat-label { color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.stat-value { font-family: var(--dot); font-weight: 800; font-size: 22px; }
.stat-value.num, .stat .num { font-family: var(--dot); font-weight: 800; }
.stat-sub { color: var(--text-2); font-size: 12px; margin-top: 4px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.card-head h2 { font-size: 15px; font-weight: 500; color: var(--text-1); }
.action-card { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.action-card h2 { margin-bottom: 6px; }
.action-card p { margin: 0 0 4px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.strip-item { padding: 16px 18px; border-right: 1px solid var(--line); }
.strip-item:last-child { border-right: 0; }
.strip-value { font-size: 16px; }

/* Forms */
.form { display: grid; gap: 16px; }
label { display: grid; gap: 6px; font-size: 13px; color: var(--text-2); }
input, select, textarea { min-height: 44px; padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: #0b0b0d; color: var(--text-1); font: inherit; width: 100%; }
textarea { padding: 10px 14px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: rgba(255, 255, 255, 0.35); outline: none; }
label.check { display: flex; gap: 10px; align-items: flex-start; color: var(--text-1); }
label.check input { width: 18px; min-height: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: #ededee; }
.input-row { display: flex; gap: 8px; }
.hint { font-size: 12px; color: var(--text-3); }
.code-input { letter-spacing: 0.3em; font-size: 20px; max-width: 220px; font-family: var(--mono); }
.error { color: var(--bad); margin: 0; }
.ok-text { color: var(--ok); margin: 0; }
.actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.confirm h1 { font-size: 22px; }
.segmented { display: inline-flex; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 12px; padding: 3px; justify-self: start; }
.segmented button { background: none; border: 0; color: var(--text-2); padding: 6px 16px; border-radius: 9px; cursor: pointer; }
.segmented button.active { background: var(--surface-3); color: var(--text-1); }
.filters { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.filters label { min-width: 220px; }
.controls { display: grid; gap: 16px; }
.inline-form { max-width: 520px; }
.handover { display: grid; gap: 8px; padding: 16px; border: 1px solid rgba(232, 163, 58, 0.4); border-radius: var(--r-md); background: var(--surface-2); margin-top: 16px; }
.setup-key { font-size: 18px; letter-spacing: 0.05em; padding: 16px; background: #0b0b0d; border: 1px solid var(--line-2); border-radius: var(--r-sm); font-family: var(--mono); }
.verify-banner { display: grid; gap: 14px; padding: 18px 22px; margin: 18px 0 0; border: 1px solid rgba(75, 141, 255, 0.4); border-radius: var(--r-md); background: var(--surface-1); }
.verify-banner .input-row { max-width: 460px; }

/* Key/value lists */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin: 0 0 16px; }
.kv dt { color: var(--text-3); font-size: 13px; }
.kv dd { margin: 0; min-width: 0; }
.kv.compact { gap: 5px 18px; font-size: 13px; }

/* Status */
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-ok { color: var(--ok); background: rgba(62, 207, 110, 0.12); }
.status-pending { color: var(--pending); background: rgba(232, 163, 58, 0.12); }
.status-auth { color: var(--auth); background: rgba(75, 141, 255, 0.12); }
.status-bad { color: var(--bad); background: rgba(239, 83, 80, 0.12); }
.status-neutral { color: var(--text-2); background: rgba(255, 255, 255, 0.06); }
.badges { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.tag { font-size: 11px; border: 1px solid var(--line-2); border-radius: 6px; padding: 0 6px; color: var(--text-2); margin-left: 8px; }

/* Tables */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--text-3); font-weight: 500; font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
td { padding: 12px; border-bottom: 1px solid var(--line); }
th.num, td.num { text-align: right; }
tr:last-child td { border-bottom: 0; }
td > span.num, td > a.num { white-space: nowrap; }

/* Withdrawals */
.requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.request { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.015); }
.request-head { width: 100%; display: grid; grid-template-columns: 100px 1fr auto auto; gap: 16px; align-items: center; background: none; border: 0; color: inherit; padding: 16px 18px; cursor: pointer; text-align: left; }
.request-body { padding: 16px 18px 18px; border-top: 1px solid var(--line); }
.timeline { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center; }
.tl-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--text-3); }
.timeline .done .tl-dot { background: var(--text-2); border-color: var(--text-2); }
.timeline .ev-completed .tl-dot { background: var(--ok); border-color: var(--ok); }
.timeline .ev-refused .tl-dot { background: var(--bad); border-color: var(--bad); }
.timeline .ev-first_authorization .tl-dot { background: var(--auth); border-color: var(--auth); }
.timeline .current .tl-dot { border-color: var(--pending); background: var(--pending); box-shadow: 0 0 10px var(--pending); }
@keyframes settle { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.request .status { animation: settle 0.3s ease-out 1; }

/* Charts (inner pages) */
.chart { position: relative; }
.chart-plot { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; }
.grid { stroke: var(--line); stroke-width: 1; }
.axis { fill: var(--text-3); font: 11px var(--mono); }
.ink { stroke: var(--ink); }
.ink.dash { stroke: var(--ink-soft); stroke-dasharray: 5 4; }
.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line.thin { stroke-width: 1.5; }
.legend .ink { stroke-width: 2; }
.marker { stroke: var(--text-3); stroke-dasharray: 2 3; }
.marker-label { fill: var(--text-2); font: 11px var(--mono); }
.crosshair { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; }
.dot { fill: var(--ink); stroke: var(--surface-1); stroke-width: 2; }
/* Gradient bars take their fill from the chart's gradient attribute; only grey bars set it here. */
.bar.soft { fill: var(--ink-soft); }
.bar-group .hit { fill: transparent; }
.bar-group.hover .bar { opacity: 0.8; }
.bar-group:focus { outline: none; }
.bar-group:focus .hit { stroke: var(--text-2); }
.legend { display: flex; gap: 16px; margin-bottom: 8px; font-size: 12px; color: var(--text-2); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.tooltip { position: absolute; pointer-events: none; background: rgba(28, 28, 32, 0.96); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 12px; font-size: 12px; min-width: 160px; z-index: 5; backdrop-filter: blur(6px); }
.tooltip-title { color: var(--text-2); margin-bottom: 4px; }
.tooltip-row { display: flex; gap: 10px; justify-content: space-between; color: var(--text-2); }
.tooltip-row strong { color: var(--text-1); }

/* Validators, logs, sessions */
.validator .node-id { font-size: 11px; color: var(--text-3); word-break: break-all; margin-bottom: 8px; font-family: var(--mono); }
.spark { display: flex; justify-content: space-between; align-items: center; }
.log { list-style: none; margin: 0; padding: 0; font-size: 13px; max-height: 560px; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 72px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.log li.warn .log-level { color: var(--pending); font-family: var(--mono); font-size: 11px; }
.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sessions li { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.more-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.more-list a { display: block; padding: 16px; background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; }
.loading { color: var(--text-3); padding: 24px; }

/* Sign-in */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: radial-gradient(60% 50% at 50% 0%, rgba(139, 92, 246, 0.14), transparent 70%), var(--page); }
.login-card { width: 100%; max-width: 420px; display: grid; gap: 24px; padding: 36px; border-radius: 28px; background: var(--frame); border: 1px solid var(--line); }
.login-card form { display: grid; gap: 16px; }
.login-card h1 { margin: 0; }
.login-card .btn.primary { height: 46px; }

/* How it works */
.prose p, .prose li { color: var(--text-2); max-width: 66ch; }
.prose h2 { margin-top: 16px; font-size: 18px; }
.prose .steps { display: grid; gap: 8px; }
.flow { width: 100%; height: auto; }
.flow-box rect { fill: var(--surface-2); stroke: var(--line-2); }
.flow-box.pending rect { stroke: var(--pending); }
.flow-box.ok rect { stroke: var(--ok); }
.flow-title { fill: var(--text-1); font-size: 13px; font-weight: 600; }
.flow-sub { fill: var(--text-3); font-size: 11px; }
.flow-box.muted .flow-title { fill: var(--text-2); }
.flow-arrow { stroke: var(--text-3); }
.flow-head { fill: var(--text-3); }

/* ---------- Inner pages, dashboard style ---------- */
.page.wide { max-width: none; }
.page-hero { padding-top: 0; }
.page-num { font-size: clamp(44px, 5.2vw, 72px); }
.hero-aside { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.hero-usd { font-family: var(--dot); font-weight: 600; font-size: 20px; color: var(--text-3); }
.hero-cta { padding: 0 22px; height: 46px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.chip-inline { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); color: var(--text-2); font-size: 12.5px; }
.chip-inline .num { color: var(--text-1); }
.chip-inline.ok { color: var(--ok); background: rgba(62, 207, 110, 0.1); border-color: rgba(62, 207, 110, 0.2); }
.asset-ico.neutral { background: rgba(255, 255, 255, 0.1); color: var(--text-1); }
.head-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); color: var(--text-1); }
.card-head h2.tile-name { font-size: 15.5px; }
.k-label { color: var(--text-3); font-size: 12px; margin-bottom: 6px; }
.live-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--surface-1); border: 1px solid var(--line); color: var(--text-2); font-size: 13px; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.empty { display: grid; place-items: center; gap: 8px; padding: 32px; color: var(--text-3); text-align: center; }
.empty p { margin: 0; }

/* Validators */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.vtile { display: flex; flex-direction: column; }
.spark-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-size: 12.5px; }
.glow-spark { width: 100%; margin: 4px 0 14px; }
.glow-spark svg { display: block; overflow: visible; }
.spark-end { fill: #c5f25e; stroke: var(--panel); stroke-width: 2; }
.tile-meta.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 0 0 18px; }
.spec-grid.two { grid-template-columns: 1fr 1fr; }
.spec-grid dt { color: var(--text-3); font-size: 11.5px; }
.spec-grid dd { margin: 2px 0 0; font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; }
.spec-grid .span-2 { grid-column: span 2; }
.tile-foot.spread { justify-content: space-between; align-items: center; padding: 14px 24px; }
.node-id { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Infrastructure */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.metric { padding: 18px 20px; border-radius: var(--r-md); background: linear-gradient(180deg, #161618, #121214); border: 1px solid var(--line); display: grid; gap: 10px; }
.metric-head { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }
.metric-value { display: flex; align-items: baseline; gap: 8px; }
.metric-value .dot-num { font-size: 30px; }
.metric-unit { color: var(--text-3); font-size: 12.5px; }
.meter { display: block; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #3b9bff, #5fd0a8 60%, #c5f25e); box-shadow: 0 0 10px rgba(95, 208, 168, 0.45); }
.meter.lg { height: 10px; }
.disks { display: grid; gap: 22px; }
.disk { display: grid; gap: 10px; }
.disk-head, .disk-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

/* Live activity */
.feed { list-style: none; margin: 0; padding: 0; max-height: 620px; overflow-y: auto; display: grid; gap: 2px; }
.feed li { display: grid; grid-template-columns: 14px 1fr auto; gap: 12px; align-items: center; padding: 9px 10px; border-radius: 12px; font-size: 13px; }
.feed li:hover { background: rgba(255, 255, 255, 0.03); }
.feed-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); justify-self: center; }
.feed li.mev .feed-dot { background: #a78bfa; box-shadow: 0 0 8px #a78bfa; }
.feed li.warn .feed-dot { background: var(--pending); box-shadow: 0 0 8px var(--pending); }
.feed-msg { min-width: 0; }
.feed-time { color: var(--text-3); font-size: 11.5px; }
.chip-mini { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-family: var(--mono); }
.chip-mini.warn { color: var(--pending); background: rgba(232, 163, 58, 0.12); }
.chip-mini.mev { color: #c4b5fd; background: rgba(139, 92, 246, 0.16); border: 1px solid rgba(167, 139, 250, 0.3); }

/* Withdrawals */
.lifecycle { gap: 4px; }
.steps-v { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 14px; }
.steps-v li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; color: var(--text-3); }
.steps-v li span:last-child { display: grid; line-height: 1.3; }
.steps-v strong { font-weight: 500; font-size: 14px; color: var(--text-2); }
.steps-v small { font-size: 11.5px; }
.step-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(196, 170, 255, 0.3); font-size: 12px; font-family: var(--mono); color: var(--text-2); }
.steps-v li.done .step-dot { background: rgba(139, 92, 246, 0.35); color: #fff; border-color: transparent; }
.steps-v li.done strong { color: var(--text-1); }
.steps-v li.now .step-dot { background: #fff; color: #1a1033; border-color: #fff; box-shadow: 0 0 14px rgba(196, 170, 255, 0.7); }
.steps-v li.now strong { color: #fff; }
.request-head { grid-template-columns: minmax(110px, auto) 1fr auto auto 20px; }
.req-id { display: inline-flex; align-items: center; gap: 10px; }
.req-amount { font-size: 22px; }
.req-amount small { font-family: var(--sans); font-size: 12px; color: var(--text-3); font-weight: 400; }
.req-caret { color: var(--text-3); }
.req-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; }
.form-tile { display: grid; gap: 12px; padding: 26px 28px; }
.form-tile .quick-amount input { font-size: 44px; }
.btn.big { height: 48px; padding: 0 26px; font-size: 14.5px; }
.confirm h1 { font-size: 22px; font-weight: 400; margin: 6px 0 0; }
.confirm-amount { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 4px; }
.confirm-amount .dot-num { font-size: 44px; }

/* Rewards */
.seg.inline { margin: 0; min-width: 240px; grid-template-columns: repeat(3, 1fr); }
.summary-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.legend-row.top { margin: 0 0 8px; }
.key-sq { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.key-sq.cur { background: linear-gradient(180deg, #c5f25e, #3b9bff); }
.key-sq.soft { background: var(--ink-soft); }
.history { list-style: none; margin: 0; padding: 0; display: grid; }
.history li { display: grid; grid-template-columns: 170px 1fr 170px 110px; gap: 18px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.history li:last-child { border-bottom: 0; }
.history-date { color: var(--text-2); font-size: 13px; }
.history-v { font-size: 17px; text-align: right; font-weight: 600; }
.history-usd { text-align: right; }

/* Settings */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; align-items: start; }

/* Top bar: one line on laptop widths */
@media (max-width: 1640px) { .dots, .user-id { display: none; } }
@media (max-width: 1420px) { .live-chip.gas { display: none; } .who-text { display: none; } }
@media (max-width: 1180px) { .live-chip.block { display: none; } }

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

/* ---------- Responsive ---------- */
@media (max-width: 1320px) {
  .row-a { grid-template-columns: 1fr 1fr; }
  .rail { display: none; }
  .tile-violet { grid-column: span 2; }
  .row-b { grid-template-columns: 1fr 1fr; }
  .trend-card { grid-column: span 2; }
  .dots { display: none; }
}
@media (max-width: 1320px) { .row-b > .lifecycle { grid-column: span 2; } }
@media (max-width: 1100px) { .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .bottombar { grid-template-columns: 1fr 1fr; }
  .search { grid-column: span 2; order: -1; max-width: none; }
  .user-id { display: none; }
}
@media (max-width: 760px) {
  .shell { margin: 0; border-radius: 0; border: 0; min-height: 100vh; }
  .content { border-radius: 0; border: 0; box-shadow: none; }
  .sidebar { display: none; }
  .tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: rgba(20, 20, 22, 0.96); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); backdrop-filter: blur(10px); }
  .tabbar a { text-align: center; padding: 15px 4px; text-decoration: none; color: var(--text-2); font-size: 13px; }
  .tabbar a.active { color: var(--text-1); font-weight: 500; }
  .main { padding: 4px 16px 92px; }
  .topbar { padding: 14px 16px 4px; }
  .live { display: none; }
  .topbar-right { width: 100%; justify-content: space-between; }
  .who-text { display: none; }
  .live-header { padding: 12px 16px; gap: 8px 16px; font-size: 12px; }
  .live-clock { margin-left: 0; }
  .row-a, .row-b { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .vgrid, .settings-grid { grid-template-columns: 1fr; }
  .req-grid, .summary-row { grid-template-columns: 1fr; }
  .history li { grid-template-columns: 1fr auto; }
  .history .meter, .history-usd { display: none; }
  .spec-grid, .spec-grid.two { grid-template-columns: 1fr; }
  .spec-grid .span-2 { grid-column: auto; }
  .request-head { grid-template-columns: 1fr auto; }
  .req-date, .req-caret { display: none; }
  .tile-violet, .trend-card, .row-b > .lifecycle { grid-column: auto; }
  .hero-num { font-size: 52px; }
  .notice-row { width: 100%; }
  .notice { min-width: 0; flex: 1; }
  .tile-meta { gap: 20px; }
  .bottombar { grid-template-columns: 1fr; }
  .search { grid-column: auto; }
  .grid-2, .two-up, .cards { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .card, .tile { padding: 18px; }
  .tile-foot, .trend-foot { margin: 18px -18px -18px; }
  .gauge { width: calc(100% + 36px); margin: -4px -18px 0; }
  .request-head { grid-template-columns: 1fr auto; }
  .kv { grid-template-columns: 1fr; gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .strip-item { border-right: 0; border-bottom: 1px solid var(--line); }
  .login-card { padding: 24px; }
}
.center { text-align: center; }

/* Administrator forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; align-items: start; }
.form-grid .span-2, .form-grid .error, .form-grid .actions { grid-column: span 2; }
.subform { margin: 14px 0 6px; padding: 16px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.025); border: 1px solid var(--line); }
.subhead { font-size: 13px; font-weight: 500; color: var(--text-2); margin: 22px 0 12px; }
.holder-link { display: grid; text-decoration: none; line-height: 1.35; }
.holder-link strong { font-weight: 500; }
.alloc { display: flex; align-items: center; gap: 10px; min-width: 140px; }
.alloc .meter { flex: 1; }
.pos { color: var(--ok); font-family: var(--mono); }
.neg { color: var(--bad); font-family: var(--mono); }
.admin-grid { align-items: start; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } .form-grid .span-2, .form-grid .error, .form-grid .actions { grid-column: auto; } }

/* ---------- Sign-in and sign-up ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 24px; background: radial-gradient(70% 60% at 30% 10%, #2a2a30, #121214 70%); }
.auth-card { width: min(1240px, 100%); min-height: min(820px, calc(100vh - 64px)); display: grid; grid-template-columns: 1fr 1fr; border-radius: 34px; background: #050506; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55); overflow: hidden; }
.auth-panel { position: relative; overflow: hidden; border-radius: 34px; background: linear-gradient(160deg, #7c4dff 0%, #6a35e8 45%, #4c1fb8 100%); padding: 48px; display: flex; flex-direction: column; justify-content: space-between; min-height: 640px; color: #fff; }
.auth-art { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 78%; }
.auth-brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: #fff; }
.auth-float { position: absolute; z-index: 2; top: 44px; right: 44px; width: 230px; padding: 18px 20px; border-radius: 18px; background: #161618; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); }
.auth-float-head { display: flex; gap: 12px; align-items: center; }
.auth-float-head span:last-child { display: grid; line-height: 1.25; }
.auth-float-head strong { font-weight: 500; font-size: 14px; }
.auth-float-head small { color: var(--text-3); font-size: 12px; }
.auth-float-head .asset-ico { width: 36px; height: 36px; }
.auth-float-k { margin-top: 16px; font-size: 12px; color: var(--text-2); }
.auth-float-v { font-size: 22px; color: var(--text-1); }
.auth-float-s { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); margin-top: 4px; }
.auth-panel::after { content: ''; position: absolute; inset: auto 0 0 0; height: 52%; background: linear-gradient(180deg, rgba(56, 18, 150, 0) 0%, rgba(44, 14, 120, 0.82) 55%, rgba(36, 10, 100, 0.95) 100%); pointer-events: none; }
.auth-copy { position: relative; z-index: 2; }
.auth-copy p { margin: 0 0 12px; font-size: 15px; }
.auth-copy h2 { margin: 0; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; font-weight: 500; letter-spacing: -0.02em; max-width: 14ch; }
.auth-form { display: grid; align-content: center; padding: 56px clamp(28px, 6vw, 96px); }
.auth-fields { display: grid; gap: 18px; width: 100%; max-width: 480px; }
.auth-fields h1 { font-size: clamp(34px, 3.6vw, 50px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.05; margin: 0; }
.auth-sub { margin: -6px 0 10px; font-size: 16px; color: var(--text-1); }
.field { display: grid; gap: 8px; }
.field-label { font-size: 14px; color: var(--text-2); }
.field-box { position: relative; display: block; }
.field-box input { height: 56px; border-radius: 12px; background: #19191c; border: 1px solid transparent; padding: 0 52px 0 18px; font-size: 16px; }
.field-box input:focus { border-color: rgba(255, 255, 255, 0.28); background: #1d1d21; }
.field.has-error .field-box input { border-color: var(--bad); color: #ff8a86; }
.field-icon { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--text-2); cursor: pointer; display: inline-flex; padding: 0; }
.field-icon.err { color: var(--bad); pointer-events: none; }
.field-error { color: var(--bad); font-size: 13px; margin: 0; }
.field-hint { color: var(--text-3); font-size: 13px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.auth-btn { height: 58px; border-radius: 14px; border: 0; background: linear-gradient(180deg, #7c4dff, #6a35e8); color: #fff; font-size: 17px; font-weight: 500; cursor: pointer; margin-top: 10px; box-shadow: 0 10px 30px rgba(124, 77, 255, 0.35); }
.auth-btn:hover { filter: brightness(1.08); }
.auth-btn:disabled { opacity: 0.6; cursor: default; }
.auth-switch { text-align: center; color: var(--text-2); margin: 0; font-size: 15px; }
.auth-switch a { color: var(--text-1); font-weight: 600; text-decoration: none; }
.auth-switch.small { font-size: 13px; }
.auth-switch.small a { font-weight: 400; color: var(--text-3); }
@media (max-width: 980px) {
  .auth { padding: 0; place-items: stretch; }
  .auth-card { grid-template-columns: 1fr; border-radius: 0; min-height: 100vh; }
  .auth-panel { min-height: 300px; border-radius: 0 0 28px 28px; padding: 28px 24px; }
  .auth-float { display: none; }
  .auth-panel { min-height: 260px; gap: 40px; }
  .auth-copy h2 { font-size: 28px; max-width: 16ch; }
  .auth-form { padding: 32px 20px 48px; }
  .field-row { grid-template-columns: 1fr; }
}