/* HEADWATER — token desain bersama (landing + app).
   Arah: hitam pekat ala Apple/Linear, garis rambut, satu aksen biru kobalt (±5–10% layar). */
:root{
  --bg:#000; --bg-2:#07080a; --panel:#0b0c0f; --panel-2:#101217; --raised:#15181e;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#f4f5f7; --text-2:#c9ccd3; --muted:#8a8f98; --faint:#5b606a;
  --accent:#4c8dff; --accent-2:#8fb6ff; --accent-bg:rgba(76,141,255,.12);
  --up:#3fd68f; --down:#ff5c6c; --warn:#f5b84b;
  --sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-s:8px; --r:12px; --r-l:18px; --r-xl:26px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:15px;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.num{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono);font-size:.92em;letter-spacing:-.01em}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.up{color:var(--up)} .down{color:var(--down)}

/* Tombol: utama putih (premium), sekunder garis, aksen hanya untuk penanda kecil */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border-radius:999px;font-weight:600;font-size:14px;letter-spacing:-.01em;white-space:nowrap;
  transition:transform .2s var(--ease),background .2s,border-color .2s,opacity .2s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--text);color:#000}
.btn-primary:hover{background:#fff}
.btn-line{border:1px solid var(--line-2);color:var(--text)}
.btn-line:hover{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.03)}
.btn-accent-line{border:1px solid rgba(76,141,255,.55);color:var(--accent-2)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-sm{height:32px;padding:0 12px;font-size:13px}

/* Label status datar (tanpa bingkai/rotasi) */
.tag{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;
  font-size:12px;font-weight:500;background:rgba(255,255,255,.06);color:var(--text-2);white-space:nowrap}
.tag-accent{background:var(--accent-bg);color:var(--accent-2)}
.tag-up{background:rgba(63,214,143,.12);color:var(--up)}
.tag-warn{background:rgba(245,184,75,.12);color:var(--warn)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.dot.live{background:var(--up);box-shadow:0 0 0 0 rgba(63,214,143,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 6px rgba(63,214,143,0)}100%{box-shadow:0 0 0 0 rgba(63,214,143,0)}}

.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.14em;font-size:13px}
.logo img{width:26px;height:26px}

/* Avatar & logo koin */
.av{width:36px;height:36px;border-radius:50%;background:var(--raised);object-fit:cover;flex-shrink:0;
  display:grid;place-items:center;font-size:12px;font-weight:600;color:var(--muted);overflow:hidden}
.coin-logo{width:32px;height:32px;border-radius:9px;background:var(--raised);object-fit:cover;flex-shrink:0;
  display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--muted);overflow:hidden}

::selection{background:rgba(76,141,255,.35)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}