/* App kit. Change the variables per project, then rework layout. Ranges below are measured from live products. */
:root {
  --bg: #0b0d11;            /* page */
  --s1: #12151b;            /* panel */
  --s2: #1a1e26;            /* input, hover */
  --line: rgba(255, 255, 255, .08);
  --text: #eef0f3;
  --muted: #8d94a1;
  --accent: #7aa2ff;
  --on-accent: #06080d;
  --up: #22c98d;            /* live products: #00bc7d, #24c98d, #3ce3ab */
  --down: #f0556b;          /* live products: #ff637e, #f04438, #f23674 */
  --radius: 10px;           /* panels: terminals 4-12, consumer 20-28 */
  --radius-s: 6px;
  --font: "Inter", Arial, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
  --row: 56px;              /* tables: pro 40, standard 56-64, consumer 69-76; order book 18-25 */
}
* { box-sizing: border-box; margin: 0 }
html, body { height: 100% }
body { background: var(--bg); color: var(--text); font: 14px/1.4 var(--font); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums }
button, input { font: inherit; color: inherit }
a { color: inherit; text-decoration: none }
.num { font-variant-numeric: tabular-nums; white-space: nowrap }
.mono { font-family: var(--mono) }
.up { color: var(--up) } .down { color: var(--down) } .muted { color: var(--muted) }
.topbar { height: 56px; display: flex; align-items: center; gap: 24px; padding: 0 16px; border-bottom: 1px solid var(--line) }
.topbar .logo { font-weight: 600; font-size: 16px; display: flex; gap: 8px; align-items: center }
.topbar nav { display: flex; gap: 4px }
.topbar nav a { padding: 6px 12px; border-radius: var(--radius-s); color: var(--muted) }
.topbar nav a.on, .topbar nav a:hover { color: var(--text); background: var(--s2) }
.topbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center }
.btn { height: 36px; padding: 0 14px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--s2); cursor: pointer; font-weight: 500; transition: background .15s, opacity .15s, transform .1s }
.btn:hover { background: #242934 }
.btn:active { transform: translateY(1px) }
.btn:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px }
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent }
.btn.primary:hover { opacity: .9 }
.btn.big { height: 48px; width: 100%; font-size: 15px; border-radius: var(--radius) }
.btn[disabled] { opacity: .45; cursor: not-allowed }
.panel { background: var(--s1); border: 1px solid var(--line); border-radius: var(--radius) }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); padding: 0 12px }
.tabs a { padding: 10px; color: var(--muted); font-size: 13px; border-bottom: 1px solid transparent; margin-bottom: -1px }
.tabs a.on { color: var(--text); border-color: var(--text) }
.seg { display: inline-flex; background: var(--s2); padding: 3px; border-radius: var(--radius-s) }
.seg a { padding: 5px 12px; border-radius: 4px; color: var(--muted); font-size: 13px }
.seg a.on { background: var(--s1); color: var(--text) }
.field { background: var(--s2); border: 1px solid transparent; border-radius: var(--radius); padding: 12px 14px }
.field:focus-within { border-color: var(--line) }
.field label { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; margin-bottom: 6px }
.field .row { display: flex; align-items: center; gap: 8px }
.field input { width: 100%; background: none; border: 0; outline: 0; font-size: 28px; font-weight: 500; min-width: 0 }
.coin { display: inline-flex; gap: 6px; align-items: center; height: 36px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--s1); border: 1px solid var(--line); font-weight: 500; white-space: nowrap; cursor: pointer }
.dot { width: 24px; height: 24px; border-radius: 50%; flex: none; background: var(--s2); border: 1px solid var(--line); object-fit: cover }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0 }
.kv span:first-child { color: var(--muted) }
table.t { width: 100%; border-collapse: collapse }
table.t th { font-size: 12px; font-weight: 500; color: var(--muted); text-align: right; padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer }
table.t td { height: var(--row); padding: 0 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap }
table.t th:first-child, table.t td:first-child { text-align: left }
table.t tbody tr { cursor: pointer; transition: background .12s }
table.t tbody tr:hover { background: rgba(255, 255, 255, .03) }
.asset { display: flex; align-items: center; gap: 10px; font-weight: 500 }
.asset small { display: block; color: var(--muted); font-weight: 400; font-size: 12px }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px }
.stat { padding: 16px; }
.stat b { display: block; font-size: 24px; font-weight: 500; margin-top: 4px; letter-spacing: -.01em }
.stat span { color: var(--muted); font-size: 13px }
.search { height: 36px; background: var(--s2); border-radius: var(--radius-s); border: 1px solid transparent; padding: 0 12px; outline: 0; min-width: 220px }
.skeleton { background: linear-gradient(90deg, var(--s2), #262b35, var(--s2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: 4px; color: transparent !important }
@keyframes sk { to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important } }