:root {
  color-scheme: dark;
  --bg: #0b0f14;
  --panel: #121923;
  --panel-2: #182231;
  --line: rgba(255,255,255,.08);
  --text: #eef4f8;
  --muted: #8fa0ad;
  --green: #46d68c;
  --red: #ff5a5f;
  --amber: #f4b84b;
  --cyan: #18b7b0;
  --single: #18b7b0;
  --single-hi: #9af4ec;
  --double: #ff5a5f;
  --double-hi: #ffc9cb;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #06090d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; color: var(--text); touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body:not(.admin-desktop), body:not(.admin-desktop) * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
button { font: inherit; }
.admin-desktop { min-height: 100vh; }
body.admin-desktop { min-height: 100vh; display: grid; grid-template-columns: 260px 1fr; background: #0a0e14; color: var(--text); }
.admin-sidebar { min-height: 100vh; padding: 28px 22px; display: flex; flex-direction: column; justify-content: flex-start; border-right: 1px solid var(--line); background: #0d131b; position: sticky; top: 0; }
.admin-sidebar h1 { font-size: 26px; }
.admin-sidebar-sub { margin: 8px 0 0; color: var(--text); font-size: 13px; font-weight: 700; }
.admin-sidebar nav { margin-top: 34px; display: grid; gap: 8px; align-content: start; }
.admin-sidebar nav button, .admin-link { min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); text-align: left; text-decoration: none; display: flex; align-items: center; }
.admin-sidebar nav button.active { color: #061015; background: var(--green); font-weight: 900; }
.admin-link { border: 1px solid var(--line); color: var(--text); justify-content: center; }
.admin-main { min-width: 0; padding: 26px 30px 40px; overflow: auto; }
.admin-topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.admin-topbar h2 { font-size: 24px; }
.admin-topbar p { margin: 6px 0 0; color: var(--muted); }
.admin-actions { display: flex; gap: 10px; }
.admin-section { display: none; margin-top: 22px; }
.admin-section.active { display: block; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.admin-grid-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.admin-kpi-grid article { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.admin-kpi-grid span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.admin-kpi-grid strong { display: block; color: var(--text); font-size: 20px; line-height: 1.15; overflow-wrap: anywhere; }
.admin-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.admin-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.admin-card-head p { margin: 0 0 4px; color: var(--muted); font-size: 12px; }
.admin-card-head h3 { font-size: 18px; }
.admin-card-head span { min-height: 28px; padding: 5px 10px; border-radius: 999px; background: #0d131b; color: var(--green); font-size: 12px; white-space: nowrap; }
.admin-desktop-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-desktop-form label { display: grid; gap: 6px; min-width: 0; }
.admin-desktop-form label:has(textarea), .admin-desktop-form label:first-child { grid-column: 1 / -1; }
.admin-desktop-form span { color: var(--muted); font-size: 12px; }
.admin-desktop-form input, .admin-desktop-form textarea, .admin-desktop-form select { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 10px 11px; font: inherit; outline: none; }
.admin-desktop-form textarea { min-height: 116px; resize: vertical; line-height: 1.4; }
.admin-readable { display: grid; gap: 8px; }
.admin-readable div { min-width: 0; padding: 11px; border-radius: 8px; background: #0d131b; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.admin-readable span { color: var(--muted); font-size: 12px; }
.admin-readable strong { font-size: 14px; text-align: right; overflow-wrap: anywhere; }
.admin-list-toggle { justify-self: end; margin-top: 2px; }
.admin-empty { padding: 16px; color: var(--muted); text-align: center; }
.admin-table-wrap { width: 100%; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; min-width: 760px; }
.admin-table th { padding: 0 12px 4px; color: var(--muted); font-size: 12px; text-align: left; font-weight: 700; white-space: nowrap; }
.admin-table td { padding: 12px; background: #0d131b; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; vertical-align: middle; }
.admin-table td:first-child { border-left: 1px solid var(--line); border-radius: 8px 0 0 8px; }
.admin-table td:last-child { border-right: 1px solid var(--line); border-radius: 0 8px 8px 0; }
.admin-table input, .admin-table select { width: 100%; min-width: 130px; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: #090d12; color: var(--text); padding: 8px 10px; font: inherit; outline: none; }
.admin-status { display: inline-flex; align-items: center; min-height: 26px; padding: 0 9px; border-radius: 999px; background: rgba(143,160,173,.12); color: var(--muted); font-size: 12px; white-space: nowrap; }
.admin-status.used { background: rgba(70,214,140,.12); color: var(--green); }
.admin-status.expired { background: rgba(255,90,95,.13); color: var(--red); }
.admin-error { position: fixed; top: 0; left: 0; right: 0; z-index: 5; padding: 12px 18px; background: #5b1720; color: #fff; }
.admin-login { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 24px; background: #06090d; }
.admin-login.is-hidden { display: none; }
.admin-login-box { width: min(100%, 380px); padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); display: grid; gap: 14px; }
.admin-login-box h2 { font-size: 24px; }
.admin-login-box input { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 0 12px; font: inherit; outline: none; }
.admin-login-box p:last-child { min-height: 18px; margin: 0; color: var(--red); font-size: 12px; }
.phone-shell {
  width: min(100%, 430px);
  height: 100dvh;
  margin: 0 auto;
  background: var(--bg);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 80px rgba(0,0,0,.45);
}
.auth-gate { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: #06090d; }
.auth-gate.is-hidden { display: none; }
.auth-gate-box { width: min(100%, 390px); padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); display: grid; gap: 13px; }
.auth-gate-box h2 { font-size: 24px; margin: 0; }
.auth-gate-status { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-gate-box label { display: grid; gap: 6px; }
.auth-gate-box label.is-hidden,
.auth-gate-box button.is-hidden { display: none; }
.auth-gate-box label span { color: var(--muted); font-size: 12px; }
.auth-gate-box input { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 0 12px; font: inherit; outline: none; }
.auth-gate-box p:last-child { min-height: 18px; margin: 0; color: var(--red); font-size: 12px; }
.phone-status {
  height: 34px;
  padding: 9px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(238,244,248,.88);
  font-size: 12px;
  font-weight: 700;
}
.app { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px calc(92px + env(safe-area-inset-bottom)); scrollbar-width: none; }
.app::-webkit-scrollbar { display: none; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: env(safe-area-inset-top); }
.agent-hero { display: grid; grid-template-columns: 86px 1fr; gap: 13px; align-items: center; padding: 10px 0 4px; }
.agent-subtitle { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.35; }
.mascot-horse { width: 82px; height: 82px; position: relative; border-radius: 18px; background: linear-gradient(135deg, rgba(82,214,255,.18), rgba(70,214,140,.12)); border: 1px solid rgba(255,255,255,.09); overflow: hidden; }
.mascot-horse .head { position: absolute; width: 42px; height: 48px; right: 14px; top: 17px; border-radius: 22px 20px 18px 16px; background: linear-gradient(145deg, #7cf7c6, #52d6ff 54%, #b78cff); transform: rotate(-8deg); box-shadow: inset -5px -7px 0 rgba(0,0,0,.14); }
.mascot-horse .neck { position: absolute; width: 30px; height: 44px; left: 22px; bottom: 6px; border-radius: 18px 14px 8px 8px; background: linear-gradient(180deg, #52d6ff, #46d68c); transform: rotate(14deg); }
.mascot-horse .mane { position: absolute; width: 18px; height: 58px; left: 24px; top: 13px; border-radius: 14px; background: linear-gradient(180deg, #ff5a75, #f4b84b, #46d68c); transform: rotate(10deg); z-index: 2; }
.mascot-horse .ear { position: absolute; top: 8px; width: 16px; height: 24px; border-radius: 12px 12px 4px 4px; background: #89e4ff; z-index: 3; }
.mascot-horse .ear.left { left: 34px; transform: rotate(-20deg); }
.mascot-horse .ear.right { right: 18px; transform: rotate(22deg); background: #b78cff; }
.mascot-horse .eye { position: absolute; right: 12px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: #061015; box-shadow: 0 0 0 3px rgba(255,255,255,.22); }
.mascot-horse .muzzle { position: absolute; right: -4px; bottom: 9px; width: 24px; height: 17px; border-radius: 14px; background: rgba(255,255,255,.72); }
.agent-answer { margin-top: 14px; padding: 14px; border-radius: 8px; background: linear-gradient(145deg, #141e2b, #0e151d); border: 1px solid rgba(82,214,255,.18); }
.answer-head { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.answer-head em { margin-left: auto; color: var(--muted); font-style: normal; font-size: 12px; }
.prediction-main { margin-top: 13px; display: grid; grid-template-columns: 1fr 84px; gap: 12px; align-items: stretch; }
.prediction-main div:first-child { padding: 12px; background: #0d131b; border-radius: 8px; }
.prediction-main span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.prediction-main b { font-size: 22px; }
.confidence { display: grid; place-items: center; text-align: center; background: rgba(70,214,140,.1); border: 1px solid rgba(70,214,140,.25); border-radius: 8px; }
.confidence strong { color: var(--green); font-size: 23px; }
.agent-answer p { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.wallet-band.compact { margin-top: 12px; }
.page { display: none; margin-top: 14px; }
.page.active { display: block; }
.eyebrow, .muted { margin: 0; color: var(--muted); font-size: 12px; }
h1 { margin: 4px 0 0; font-size: 25px; line-height: 1.1; letter-spacing: 0; }
h2 { margin: 0; font-size: 17px; letter-spacing: 0; }
h3 { margin: 0; font-size: 16px; letter-spacing: 0; }
.icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); position: relative; }
.icon-btn span { position: absolute; inset: 11px 14px 13px; border: 2px solid var(--text); border-top: 0; border-radius: 0 0 10px 10px; }
.icon-btn span::before { content: ""; position: absolute; top: -9px; left: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.wallet-band { margin-top: 16px; padding: 13px; background: linear-gradient(135deg, #172434, #111820); border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(70,214,140,.12); flex: 0 0 auto; }
.primary-btn, .ghost-btn { border: 0; border-radius: 8px; min-height: 42px; padding: 0 14px; color: #061015; background: var(--green); font-weight: 700; white-space: nowrap; }
.ghost-btn { background: transparent; border: 1px solid var(--line); color: var(--text); }
.quick-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.quick-grid article { min-width: 0; padding: 12px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.quick-grid span, .signal-row span, .approve-box span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.quick-grid strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
body[data-page="records"] .wallet-band,
body[data-page="records"] .quick-grid,
body[data-page="admin"] .wallet-band,
body[data-page="admin"] .quick-grid { display: none; }
body[data-page="records"] .page.active,
body[data-page="admin"] .page.active { margin-top: 12px; }
.good { color: var(--green); }
.tabs { margin-top: 16px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 4px; background: #090d12; border: 1px solid var(--line); border-radius: 8px; }
.tabs button { height: 38px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; }
.tabs .active { color: var(--text); background: var(--panel-2); }
.section-block { margin-top: 14px; display: grid; gap: 12px; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.strategy-list { margin-top: 14px; display: grid; gap: 12px; }
.home-strategy-board { margin-top: 12px; display: grid; gap: 8px; }
.home-strategy-tile { min-height: 82px; padding: 12px; border-radius: 8px; border: 1px solid var(--line); background: linear-gradient(145deg, #121923, #0e141c); display: grid; gap: 10px; }
.home-strategy-tile.is-waiting { border-color: rgba(244,184,75,.22); }
.home-strategy-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.home-strategy-main span { color: var(--muted); font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.home-strategy-main strong { font-size: 15px; text-align: right; }
.home-strategy-meta { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: 6px; }
.home-strategy-meta div { min-width: 0; padding: 8px; border-radius: 8px; background: #0d131b; }
.home-strategy-meta span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 4px; }
.home-strategy-meta strong { display: block; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-summary-grid { margin-top: 12px; display: grid; gap: 10px; }
.home-summary-card { margin-top: 0; }
.home-metric-list { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.home-metric-list div { min-width: 0; padding: 10px; border-radius: 8px; background: #0d131b; }
.home-metric-list span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.home-metric-list strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.home-record-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.home-record-list li { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 10px; border-radius: 8px; background: #0d131b; }
.home-record-list b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-record-list span { grid-column: 1; color: var(--muted); font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-record-list em { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 11px; font-style: normal; white-space: nowrap; }
.compact-btn { min-height: 32px; padding: 0 10px; font-size: 12px; }
.admin-inline-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.admin-inline-actions input { width: 86px; min-height: 34px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 0 9px; font: inherit; outline: none; }
.admin-filter-row { display: grid; grid-template-columns: minmax(220px, 1fr) 180px auto; gap: 8px; margin: 0 0 12px; }
.admin-filter-row input, .admin-filter-row select { min-height: 36px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 0 10px; font: inherit; outline: none; }
.admin-user-filter, .admin-transfer-filter { grid-template-columns: minmax(260px, 1fr) 160px auto; }
.admin-pager { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.admin-pager > div { display: flex; gap: 8px; }
.ghost-btn:disabled { opacity: .45; cursor: not-allowed; }
.admin-modal { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 24px; background: rgba(5,8,12,.68); backdrop-filter: blur(10px); }
.admin-modal.is-open { display: grid; }
.admin-modal-box { width: min(860px, 100%); max-height: min(760px, calc(100dvh - 48px)); overflow: auto; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.36); }
.admin-readable pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--text); font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.strategy-card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.strategy-card.live { border-color: rgba(70,214,140,.35); box-shadow: inset 0 0 0 1px rgba(70,214,140,.08); }
.strategy-card { cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.compact-strategy { padding: 12px; }
.compact-strategy-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.compact-strategy-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.compact-strategy-grid div { min-width: 0; padding: 8px; border-radius: 8px; background: #0d131b; }
.compact-strategy-grid span { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; }
.compact-strategy-grid strong { display: block; font-size: 13px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head, .section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: #2c3744; border-radius: 999px; }
.switch span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: white; transition: .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { left: 24px; }
.signal-row { margin-top: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.signal-row div { padding: 8px; background: #0d131b; border-radius: 8px; min-width: 0; }
.signal-row strong { font-size: 15px; overflow-wrap: anywhere; }
.sub-signal { margin-top: 8px; }
.sub-signal strong { font-size: 14px; }
.wait-signal { color: var(--muted); font-size: 14px; }
.strategy-stats { margin-top: 10px; display: grid; grid-template-columns: 1.4fr repeat(3, .8fr); gap: 6px; }
.strategy-stats span { min-width: 0; padding: 7px 8px; border-radius: 8px; background: rgba(13,19,27,.72); color: var(--muted); font-size: 11px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strategy-stats span:first-child { color: var(--green); text-align: left; }
.bead-road { margin-top: 10px; display: flex; gap: 5px; overflow: hidden; max-height: 29px; }
.bead-road i { justify-self: center; align-self: center; }
.odd { background: rgba(255,90,95,.18); color: #ff9ea1; border: 1px solid rgba(255,90,95,.35); }
.even { background: rgba(24,183,176,.18); color: #9af4ec; border: 1px solid rgba(24,183,176,.35); }
.pulse { box-shadow: 0 0 0 5px rgba(82,214,255,.12); }
.parity-dot { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-style: normal; font-size: 12px; font-weight: 900; }
.single-dot { background: radial-gradient(circle at 35% 28%, var(--single-hi), var(--single) 64%, #0a6863); box-shadow: 0 0 14px rgba(24,183,176,.55); }
.double-dot { background: radial-gradient(circle at 35% 28%, var(--double-hi), var(--double) 64%, #a71922); box-shadow: 0 0 14px rgba(255,90,95,.55); }
.parity-chip { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; color: #fff; font-style: normal; font-size: .9em; box-shadow: 0 0 14px rgba(255,255,255,.08); vertical-align: middle; }
.single-chip { background: linear-gradient(135deg, var(--single-hi), var(--single)); box-shadow: 0 0 16px rgba(24,183,176,.42); }
.double-chip { background: linear-gradient(135deg, var(--double-hi), var(--double)); box-shadow: 0 0 16px rgba(255,90,95,.42); }
.risk-line, .progress-wrap { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.progress-wrap { align-items: center; }
.progress { flex: 1; height: 8px; border-radius: 999px; background: #0c1219; overflow: hidden; }
.progress b { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: inherit; }
.panel { margin-top: 12px; }
.road-panel { overflow: hidden; }
.road-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.road-header span { color: var(--muted); font-size: 12px; }
.large-road { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.large-road i { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-weight: 900; }
.linear-road { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.road-cell { min-height: 72px; border-radius: 8px; display: grid; place-items: center; gap: 3px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, #101823, #0b1118); position: relative; overflow: hidden; }
.road-cell::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 16px 16px; opacity: .55; }
.road-cell i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; color: #fff; z-index: 1; }
.road-cell span { font-size: 9px; color: rgba(238,244,248,.7); z-index: 1; }
.odd-cell i { background: radial-gradient(circle at 35% 28%, var(--double-hi), var(--double) 62%, #a71922); box-shadow: 0 0 18px rgba(255,90,95,.72), inset 0 -5px 10px rgba(0,0,0,.25); }
.even-cell i { background: radial-gradient(circle at 35% 28%, var(--single-hi), var(--single) 62%, #0a6863); box-shadow: 0 0 18px rgba(24,183,176,.72), inset 0 -5px 10px rgba(0,0,0,.25); }
.road-cell.active { border-color: rgba(70,214,140,.8); box-shadow: 0 0 24px rgba(70,214,140,.35); }
.road-cell.active i { outline: 2px solid rgba(255,255,255,.75); }
.record-tabs { margin: 12px 0; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #0d131b; border: 1px solid var(--line); border-radius: 8px; }
.record-tabs button { min-height: 36px; border: 0; border-radius: 6px; color: var(--muted); background: transparent; font-size: 12px; }
.record-tabs .active { color: #061015; background: var(--green); font-weight: 800; }
.record-page { display: none !important; }
.record-page.active { display: grid !important; }
.record-pager { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 12px; }
.record-pager > div { display: flex; gap: 8px; }
.record-pager .ghost-btn { min-height: 34px; padding: 0 10px; font-size: 12px; }
.record-pager .ghost-btn:disabled { opacity: .45; cursor: not-allowed; }
.trend-tabs { margin-top: 12px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #0d131b; border: 1px solid var(--line); border-radius: 8px; }
.trend-tabs button { min-height: 38px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; }
.trend-tabs .active { color: #061015; background: var(--green); font-weight: 900; }
.road-board { margin-top: 12px; padding: 12px; border-radius: 8px; background: #111a13; border: 1px solid rgba(122,164,95,.22); color: var(--text); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }
.road-board.is-jumping { animation: roadJump .42s ease; }
@keyframes roadJump {
  0% { transform: translateY(0); border-color: rgba(122,164,95,.22); }
  35% { transform: translateY(-7px); border-color: var(--green); box-shadow: 0 0 0 2px rgba(70,214,140,.28), inset 0 0 0 1px rgba(255,255,255,.75); }
  100% { transform: translateY(0); border-color: rgba(122,164,95,.22); }
}
.hash-road-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.hash-road-head h2 { margin: 0; font-size: 20px; letter-spacing: 0; }
.hash-road-head p { margin: 5px 0 0; color: #b6d1a7; font-size: 12px; }
.hash-road-head > span { min-height: 32px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 8px; border: 1px solid rgba(70,214,140,.34); color: var(--green); font-size: 12px; font-weight: 900; background: #07100b; }
.hash-road-stats { margin-top: 18px; padding-bottom: 13px; display: grid; grid-template-columns: 1fr 78px 1fr; align-items: center; gap: 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.hash-road-stats > div { min-width: 0; text-align: center; position: relative; }
.hash-road-stats span { display: block; color: #acd39a; font-size: 11px; margin-bottom: 4px; }
.hash-road-stats strong { color: #2f73ff; font-size: 20px; line-height: 1.1; overflow-wrap: anywhere; }
.hash-road-stats em { position: absolute; top: -6px; left: calc(50% + 25px); width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: #ff4051; color: #fff; font-style: normal; font-size: 11px; font-weight: 900; }
.hash-countdown { width: 58px; height: 58px; justify-self: center; border-radius: 50%; border: 4px solid #2f73ff; display: grid; place-items: center; align-content: center; background: #1a2118; }
.hash-countdown strong { color: #f5f9ff; font-size: 20px; }
.hash-countdown span { max-width: 48px; margin: 0; color: #b6d1a7; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hash-road-subhead { margin: 13px 0 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hash-road-subhead b { color: #2f73ff; font-size: 15px; }
.hash-road-subhead span { color: #ff4051; font-size: 12px; }
.road-scroll { overflow-x: auto; overflow-y: hidden; padding: 0 0 10px; scrollbar-width: auto; scrollbar-color: #9d9d9d #383838; }
.road-scroll::-webkit-scrollbar { height: 10px; }
.road-scroll::-webkit-scrollbar-track { background: #383838; border-radius: 999px; }
.road-scroll::-webkit-scrollbar-thumb { background: #a3a3a3; border-radius: 999px; border: 2px solid #383838; }
.bead-grid-horizontal { --cell: clamp(25px, 7vw, 30px); display: grid; grid-auto-flow: column; grid-template-rows: repeat(6, var(--cell)); grid-auto-columns: var(--cell); gap: 4px; width: max-content; min-width: 100%; min-height: calc(var(--cell) * 6 + 20px); padding: 4px; border-radius: 6px; background: transparent; }
.bead-slot { width: var(--cell); height: var(--cell); border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: transparent; }
.bead-slot.filled { color: #fff; border-color: rgba(255,255,255,.78); text-shadow: 0 1px 2px rgba(0,0,0,.28); }
.bead-slot.single { background: #10c8a9; box-shadow: none; }
.bead-slot.double { background: #ff4051; box-shadow: none; }
.bead-slot.latest { outline: 2px solid #2f73ff; outline-offset: 1px; }
.admin-panel { margin-top: 12px; }
.admin-form { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.admin-form label { display: grid; gap: 6px; min-width: 0; }
.admin-form label:first-child, .admin-form label:has(textarea), .admin-form label:nth-last-child(-n + 2) { grid-column: 1 / -1; }
.admin-form span { color: var(--muted); font-size: 12px; }
.admin-form input, .admin-form textarea { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 10px 11px; font: inherit; outline: none; }
.admin-form textarea { min-height: 78px; resize: vertical; line-height: 1.35; }
.create-panel { margin-top: 12px; }
.create-panel.is-collapsed { display: none; }
.create-view .panel { display: grid; gap: 12px; }
.play-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; }
.play-choice button { min-height: 42px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: inherit; font-weight: 700; }
.play-choice button.active { color: #061015; background: var(--green); }
.create-form-grid { margin-top: 0; }
.full-btn { width: 100%; margin-top: 2px; }
.empty-state { margin: 12px 0 0; padding: 14px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; background: rgba(13,19,27,.45); }
.form-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.form-grid label { display: grid; gap: 6px; min-width: 0; }
.form-grid label:first-child, .form-grid label:last-child { grid-column: 1 / -1; }
.form-grid span { color: var(--muted); font-size: 12px; }
.form-grid input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 0 11px; font: inherit; outline: none; }
.segmented { margin-top: 12px; padding: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; background: #0d131b; border-radius: 8px; border: 1px solid var(--line); }
.segmented button { min-height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 12px; }
.segmented .active { color: #061015; background: var(--green); font-weight: 800; }
.approval-card { margin-top: 12px; display: grid; grid-template-columns: 82px 1fr; gap: 12px; align-items: center; padding: 12px; background: #0d131b; border-radius: 8px; }
.approval-ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--green) 0 74%, #24303c 74% 100%); color: var(--text); font-weight: 900; position: relative; }
.approval-ring::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #0d131b; }
.approval-ring { isolation: isolate; }
.approval-ring::after { content: attr(data-label); position: relative; z-index: 1; }
.approval-ring { font-size: 0; }
.approval-card h3 { margin: 4px 0 6px; font-size: 20px; }
.approval-card span { color: var(--muted); font-size: 12px; line-height: 1.35; }
.action-row { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pill { display: inline-flex; align-items: center; min-height: 28px; border-radius: 999px; padding: 0 10px; background: #0d131b; border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.pill.good { color: var(--green); border-color: rgba(70,214,140,.3); }
.risk-list { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.risk-list div { padding: 11px; background: #0d131b; border-radius: 8px; }
.risk-list span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.risk-list strong { font-size: 14px; }
.node-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.node-list li { min-height: 42px; padding: 0 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #0d131b; border-radius: 8px; }
.node-list b { font-size: 14px; }
.node-list span { font-size: 12px; color: var(--muted); }
.warn-text { color: var(--amber) !important; }
.profile-panel { margin-bottom: 8px; }
.menu-list { margin-top: 12px; display: grid; gap: 8px; }
.menu-list button { min-height: 46px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 8px; background: #0d131b; color: var(--text); text-align: left; }
.menu-list span { color: var(--muted); font-size: 12px; }
.my-profile-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.my-auth-time { min-width: 120px; padding: 10px; border-radius: 8px; background: #0d131b; text-align: right; }
.my-auth-time span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.my-auth-time strong { font-size: 13px; overflow-wrap: anywhere; }
.my-result-strip { margin-top: 12px; display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.my-result-strip .parity-dot { flex: 0 0 auto; }
.my-rank-list { margin-top: 12px; display: grid; gap: 8px; }
.my-rank-list div { min-height: 42px; display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 0 11px; border-radius: 8px; background: #0d131b; }
.my-rank-list span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(70,214,140,.12); color: var(--green); font-size: 12px; font-weight: 800; }
.my-rank-list strong { font-size: 14px; }
.my-rank-list em { color: var(--green); font-size: 12px; font-style: normal; }
.my-menu-list strong { font-size: 14px; }
.position-calc-form { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.position-calc-form label { display: grid; gap: 6px; min-width: 0; }
.position-calc-form span { color: var(--muted); font-size: 12px; }
.position-calc-form input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 8px; background: #0d131b; color: var(--text); padding: 0 11px; font: inherit; outline: none; }
.position-calc-result { margin-top: 12px; display: grid; gap: 8px; }
.position-calc-result article { padding: 11px; border-radius: 8px; background: #0d131b; }
.position-calc-result article > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.position-calc-result span { color: var(--muted); font-size: 12px; }
.position-calc-result strong { color: var(--green); font-size: 18px; white-space: nowrap; }
.position-calc-result em { color: var(--muted); font-size: 11px; font-style: normal; }
.position-calc-result p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.simulation-range { margin-top: 10px; padding: 10px; border-radius: 8px; background: #0d131b; color: var(--muted); font-size: 12px; }
.simulation-summary { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.simulation-summary div { padding: 10px; border-radius: 8px; background: #0d131b; min-width: 0; }
.simulation-summary span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 5px; }
.simulation-summary strong { color: var(--green); font-size: 17px; overflow-wrap: anywhere; }
.approve-box { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.approve-box div { padding: 10px; background: #0d131b; border-radius: 8px; min-width: 0; }
.approve-box strong { font-size: 14px; overflow-wrap: anywhere; }
.tx-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.tx-list li { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 11px; background: #0d131b; border-radius: 8px; border: 1px solid transparent; }
.tx-list b { font-size: 14px; }
.tx-list span { color: var(--muted); font-size: 12px; grid-column: 1; }
.tx-list em { color: var(--muted); font-size: 12px; font-style: normal; grid-row: 1 / span 2; grid-column: 2; align-self: center; }
.tx-list .warn { border-color: rgba(244,184,75,.25); }

.bottom-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(76px + env(safe-area-inset-bottom));
  padding: 8px 14px calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  background: rgba(10,14,20,.94);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
.bottom-nav button {
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  display: grid;
  place-items: center;
  gap: 3px;
}
.bottom-nav .active {
  color: var(--green);
  background: rgba(70,214,140,.08);
}
button:disabled, input:disabled { opacity: .55; cursor: not-allowed; }
.bottom-nav span {
  width: 22px;
  height: 22px;
  display: block;
  position: relative;
}
.home-icon::before { content: ""; position: absolute; inset: 5px 4px 3px; border: 2px solid currentColor; border-top: 0; border-radius: 3px; }
.home-icon::after { content: ""; position: absolute; left: 4px; top: 2px; width: 14px; height: 14px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.chart-icon::before { content: ""; position: absolute; left: 4px; bottom: 4px; width: 3px; height: 9px; background: currentColor; box-shadow: 6px -4px 0 currentColor, 12px -1px 0 currentColor; border-radius: 2px; }
.wallet-icon::before { content: ""; position: absolute; inset: 5px 3px 4px; border: 2px solid currentColor; border-radius: 5px; }
.wallet-icon::after { content: ""; position: absolute; right: 4px; top: 10px; width: 6px; height: 4px; background: currentColor; border-radius: 4px; }
.user-icon::before { content: ""; position: absolute; top: 3px; left: 7px; width: 8px; height: 8px; border: 2px solid currentColor; border-radius: 50%; }
.user-icon::after { content: ""; position: absolute; left: 4px; bottom: 3px; width: 14px; height: 8px; border: 2px solid currentColor; border-radius: 10px 10px 4px 4px; }
.admin-icon::before { content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; border-radius: 50%; }
.admin-icon::after { content: ""; position: absolute; left: 9px; top: 9px; width: 4px; height: 4px; background: currentColor; border-radius: 50%; box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor, -7px 0 0 currentColor, 7px 0 0 currentColor; }

@media (min-width: 700px) {
  body:not(.admin-desktop) { padding: 24px 0; }
  .phone-shell { height: min(844px, calc(100dvh - 48px)); border-radius: 28px; }
}

@media (max-width: 980px) {
  body.admin-desktop { grid-template-columns: 1fr; }
  .admin-sidebar { min-height: auto; }
  .admin-grid { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
  .home-metric-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-strategy-meta { grid-template-columns: 1fr; }
  .compact-strategy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-grid, .signal-row, .approve-box { grid-template-columns: 1fr 1fr; }
  .quick-grid article:last-child, .signal-row div:last-child, .approve-box div:last-child { grid-column: 1 / -1; }
}