/* v17.9: clearer hierarchy for a dense trading workspace. */
:root {
  --bg: #0b1013;
  --bg-1: #11191d;
  --bg-2: #172126;
  --bg-3: #1e2b30;
  --line: #29393e;
  --line-2: #456066;
  --txt: #edf4f1;
  --txt-2: #bdceca;
  --muted: #9bafa9;
  --r: 16px;
  --r-lg: 20px;
  --wrap: 1320px;
}
body { background-image: radial-gradient(ellipse at 15% 0%, rgba(204,228,100,.055), transparent 45%); background-size: auto; }
.topbar { background: rgba(11,16,19,.97); border-bottom-color: var(--line); }
.topbar-in { gap: 1.25rem; }
.nav a { font-size: .875rem; padding: .6rem .65rem; border-radius: 8px; }
.nav a.on { color: var(--lime); background: var(--lime-glow); }
.sec-h { margin-bottom: 1.75rem; }
.sec-h h1 { font-size: clamp(1.9rem, 3.8vw, 3rem); letter-spacing: -.035em; }
.sec-h p { max-width: 70ch; color: var(--txt-2); }
.hero { padding-bottom: 2rem; }
.panel { padding: clamp(1rem, 2vw, 1.75rem); box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.panel-h { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.panel-h h2 { font-size: 1.125rem; }
.cards { gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.card { background: linear-gradient(150deg, var(--bg-2), var(--bg-1) 70%); box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.card:hover { transform: none; border-color: var(--line-2); }
.stat { padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-1); }
.stat-v { font-variant-numeric: tabular-nums; font-size: clamp(1.35rem, 2.5vw, 1.85rem); }
.stat-k, .panel-note { font-size: .875rem; letter-spacing: .035em; }
.tabs { gap: .5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line); }
.tab { border-radius: 10px; min-height: 44px; }
.btn { min-height: 44px; border-radius: 10px; font-weight: 600; }
.btn-primary { box-shadow: 0 3px 12px rgba(204,228,100,.12); }
input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 1rem; min-height: 44px; border-radius: 9px; }
input[type=checkbox], input[type=radio] { accent-color: var(--lime); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.tablewrap { scrollbar-color: var(--line-2) var(--bg-1); }
table { font-variant-numeric: tabular-nums; }
th { color: var(--txt-2); background: var(--bg-2); }
td, th { padding: .85rem 1rem; }
tbody tr:hover { background: rgba(204,228,100,.035); }
.notice { line-height: 1.7; border-radius: 12px; }
@media (max-width: 700px) {
  .wrap { width: calc(100% - 1.5rem); }
  .panel { border-radius: 14px; }
  .topbar-in { gap: .65rem; }
  .stats-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: .9rem; min-width: 0; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tab { flex-shrink: 0; }
  .card { min-width: 0; }
  .panel-h { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}