:root{
  --bg:#0F1419;
  --surface:#161B22;
  --surface-2:#1C2430;
  --border:#2A3441;
  --text:#E6EDF3;
  --text-dim:#8B949E;
  --accent:#D4A017;
  --accent-soft:rgba(212,160,23,0.14);
  --positive:#3FB950;
  --positive-soft:rgba(63,185,80,0.12);
  --negative:#F85149;
  --negative-soft:rgba(248,81,73,0.12);
  --radius:10px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
.num,.mono{ font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; }
h1,h2,h3,.display{ font-family:'Space Grotesk',sans-serif; }
a{ color:var(--accent); }

.wrap{ max-width:1080px; margin:0 auto; padding:28px 20px 80px; }

/* ---------- Header ---------- */
header.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
header.top .brand{ display:flex; flex-direction:column; gap:2px; }
header.top .brand .eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent);
}
header.top h1{ font-size:22px; margin:0; font-weight:700; letter-spacing:-.01em; }
header.top .ticker{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-dim); }
header.top .right{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* ---------- Wallet switcher ---------- */
.wallet-switch{ display:flex; align-items:center; gap:6px; }
.wallet-switch select{ min-width:140px; }

/* ---------- Summary cards ---------- */
.summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:24px; }
@media (max-width:720px){ .summary{ grid-template-columns:repeat(2,1fr);} }
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 16px 14px; }
.card .label{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:8px; }
.card .value{ font-size:20px; font-weight:600; }
.card .sub{ font-size:12px; margin-top:4px; color:var(--text-dim); }
.pos{ color:var(--positive); } .neg{ color:var(--negative); }

/* ---------- Sections ---------- */
section{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:20px; }
section > h2{ font-size:15px; margin:0 0 16px; font-weight:600; display:flex; align-items:center; gap:8px; justify-content:space-between; }
section > h2 .n{ font-family:'IBM Plex Mono',monospace; color:var(--accent); font-size:12px; }
section > h2 .title-left{ display:flex; align-items:center; gap:8px; }

/* ---------- Form ---------- */
form#txForm{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr 1fr auto; gap:10px; align-items:end; }
@media (max-width:860px){ form#txForm{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:11px; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
select,input{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:9px 10px; border-radius:7px; font-size:13px; font-family:'Inter',sans-serif; width:100%;
}
input.mono{ font-family:'IBM Plex Mono',monospace; }
select:focus,input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.seg{ display:flex; border:1px solid var(--border); border-radius:7px; overflow:hidden; }
.seg button{ flex:1; padding:9px 0; background:var(--surface-2); color:var(--text-dim); border:none; cursor:pointer; font-size:13px; font-weight:600; font-family:'Inter',sans-serif; }
.seg button.active.buy{ background:var(--positive-soft); color:var(--positive); }
.seg button.active.sell{ background:var(--negative-soft); color:var(--negative); }
.seg button.active.above{ background:var(--positive-soft); color:var(--positive); }
.seg button.active.below{ background:var(--negative-soft); color:var(--negative); }

button.primary{
  background:var(--accent); color:#1A1200; border:none; border-radius:7px; padding:10px 18px;
  font-weight:600; cursor:pointer; font-size:13px; font-family:'Inter',sans-serif; white-space:nowrap;
}
button.primary:hover{ filter:brightness(1.08); }
button.primary:disabled{ opacity:.6; cursor:default; }
button.ghost{
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  border-radius:7px; padding:7px 12px; cursor:pointer; font-size:12px; font-family:'Inter',sans-serif;
}
button.ghost:hover{ color:var(--text); border-color:var(--text-dim); }
button.link{ background:none; border:none; color:var(--accent); cursor:pointer; font-size:12px; padding:0; }

/* ---------- Table ---------- */
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:right; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-dim); font-weight:500; padding:8px 10px; border-bottom:1px solid var(--border); }
th:first-child, td:first-child{ text-align:left; }
td{ padding:11px 10px; text-align:right; border-bottom:1px solid var(--border); font-family:'IBM Plex Mono',monospace; }
tr:last-child td{ border-bottom:none; }
td.asset{ font-family:'Inter',sans-serif; font-weight:600; display:flex; align-items:center; gap:8px; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); display:inline-block; }
.rowbtn{ cursor:pointer; background:transparent; border:none; color:var(--text-dim); font-size:12px; }
.rowbtn:hover{ color:var(--negative); }
.empty{ color:var(--text-dim); font-size:13px; padding:20px 4px; text-align:center; }
.badge{ font-family:'IBM Plex Mono',monospace; font-size:10px; padding:3px 7px; border-radius:20px; }
.badge.active{ background:var(--accent-soft); color:var(--accent); }
.badge.done{ background:var(--surface-2); color:var(--text-dim); }

/* ---------- Chart section ---------- */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.tab{ padding:6px 12px; border-radius:20px; border:1px solid var(--border); background:var(--surface-2); color:var(--text-dim); font-size:12px; cursor:pointer; font-family:'IBM Plex Mono',monospace; }
.tab.active{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent); }
.range-row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:10px; }
.ranges{ display:flex; gap:4px; }
.ranges button{ background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:5px 10px; font-size:11px; border-radius:6px; cursor:pointer; font-family:'IBM Plex Mono',monospace; }
.ranges button.active{ background:var(--surface-2); color:var(--accent); border-color:var(--accent); }
.chart-legend{ display:flex; gap:16px; font-size:11px; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; }
.chart-legend span{ display:inline-flex; align-items:center; gap:5px; }
.swatch{ width:14px; height:2px; display:inline-block; }
#chartWrap{ position:relative; height:320px; }
.chart-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-size:13px; }

.util-row{ display:flex; justify-content:flex-end; gap:8px; margin-top:-6px; margin-bottom:20px; }

footer{ text-align:center; color:var(--text-dim); font-size:11px; margin-top:30px; font-family:'IBM Plex Mono',monospace; }

/* ---------- Alerts / CSV forms ---------- */
.inline-form{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.inline-form .field{ min-width:140px; }
.hint{ font-size:11px; color:var(--text-dim); margin-top:8px; }

/* ---------- Auth page ---------- */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card{ width:100%; max-width:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:28px; }
.auth-card .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; display:block; }
.auth-card h1{ font-size:22px; margin:0 0 20px; }
.auth-card .field{ margin-bottom:14px; }
.auth-card button.primary{ width:100%; padding:11px; margin-top:6px; }
.auth-toggle{ text-align:center; margin-top:16px; font-size:13px; color:var(--text-dim); }
.auth-error{ background:var(--negative-soft); color:var(--negative); font-size:12px; padding:9px 12px; border-radius:7px; margin-bottom:14px; display:none; }

.loading-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; color:var(--text-dim); font-family:'IBM Plex Mono',monospace; font-size:13px; }