:root { --bg:#07131f; --panel:#0d2032; --panel-2:#102a40; --line:#244560; --ink:#f2f7fb; --muted:#9bb0c2; --faint:#678198; --teal:#47d8b4; --green:#5ee090; --amber:#ffc668; --red:#ff7c8c; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:radial-gradient(circle at 88% -10%, #173d59 0, transparent 36%), var(--bg); font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
.shell { width:min(1120px, calc(100% - 32px)); margin:0 auto; padding:52px 0 72px; }
.topbar,.section-heading { display:flex; gap:20px; justify-content:space-between; align-items:flex-start; }
.topbar { margin-bottom:24px; }
h1,h2,p { margin:0; } h1 { margin-top:2px; font-size:34px; letter-spacing:-.045em; } h2 { font-size:20px; letter-spacing:-.025em; }
.eyebrow { color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.subhead,.helper { color:var(--muted); }.subhead { margin-top:7px; font-size:13px; }
.status-wrap { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:9px; max-width:340px; }.status { color:var(--teal); font-size:12px; font-weight:700; }.status i { display:inline-block; width:8px; height:8px; margin-right:5px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(71,216,180,.13); }.updated,.source { color:var(--faint); font-size:11px; }.refresh { border:1px solid var(--line); border-radius:7px; padding:7px 11px; color:var(--ink); background:transparent; cursor:pointer; }.refresh:hover { border-color:var(--teal); color:var(--teal); }
.notice { margin:0 0 32px; padding:12px 14px; border:1px solid rgba(255,198,104,.38); border-radius:9px; color:#d9e4ed; background:rgba(255,198,104,.08); font-size:12px; }.notice strong { color:var(--amber); }
.section-heading { margin:0 0 14px; }.source { padding-top:5px; text-align:right; }.coin-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:30px; }.coin-card,.panel { border:1px solid var(--line); border-radius:12px; background:rgba(13,32,50,.92); box-shadow:0 18px 36px rgba(0,0,0,.13); }.coin-card { min-height:144px; padding:16px; }.coin-symbol { color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.08em; }.coin-name { color:var(--muted); font-size:11px; margin-top:2px; }.price { margin-top:21px; font-size:23px; font-weight:800; letter-spacing:-.04em; }.change { margin-top:5px; font-size:12px; font-weight:700; }.positive { color:var(--green); }.negative { color:var(--red); }.neutral { color:var(--muted); }
.panel { margin-top:20px; padding:21px; }.helper { margin:0 0 16px; font-size:12px; }.stable-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:11px; }.stable-card { padding:14px; border:1px solid var(--line); border-radius:9px; background:var(--panel-2); }.stable-top { display:flex; justify-content:space-between; gap:10px; }.stable-card strong { font-size:14px; }.stable-card small { display:block; color:var(--muted); font-size:10px; }.stable-price { margin-top:13px; font-size:19px; font-weight:800; }.peg { margin-top:5px; font-size:11px; font-weight:700; }.peg-ok { color:var(--green); }.peg-watch { color:var(--amber); }.peg-alert { color:var(--red); }.tracked-wallet { margin:0 0 14px; padding:14px; border:1px solid rgba(71,216,180,.36); border-radius:9px; background:rgba(71,216,180,.05); }.tracked-wallet-top { display:flex; justify-content:space-between; gap:10px; }.tracked-wallet-top strong,.tracked-wallet-top small { display:block; }.tracked-wallet-top strong { font-size:13px; }.tracked-wallet-top small { margin-top:2px; color:var(--muted); font-size:10px; }.wallet-balances { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin-top:13px; }.balance-card { padding:10px; border:1px solid var(--line); border-radius:8px; background:#0a1b2b; }.balance-card strong,.balance-card small { display:block; }.balance-card strong { color:var(--teal); font-size:11px; letter-spacing:.06em; }.balance-card small { margin-top:5px; color:var(--ink); font-size:13px; font-weight:800; overflow:hidden; text-overflow:ellipsis; }.wallet-form { display:flex; gap:9px; }.wallet-form input { min-width:0; flex:1; padding:11px 12px; border:1px solid var(--line); border-radius:8px; outline:none; color:var(--ink); background:#091a2a; font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }.wallet-form input:focus { border-color:var(--teal); }.wallet-form button { border:0; border-radius:8px; padding:0 15px; color:#06211d; background:var(--teal); font-weight:800; cursor:pointer; }.wallet-message { min-height:18px; margin:7px 0 0; color:var(--muted); font-size:11px; }.wallet-message.error { color:var(--red); }.wallet-empty { display:flex; align-items:center; gap:13px; padding:15px; border:1px dashed #3b5b75; border-radius:9px; color:var(--muted); }.wallet-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:8px; color:var(--teal); background:rgba(71,216,180,.1); font-size:25px; }.wallet-empty strong,.wallet-empty small { display:block; }.wallet-empty strong { color:var(--ink); font-size:13px; }.wallet-empty small { margin-top:3px; font-size:11px; }.wallet-list { display:grid; gap:8px; }.wallet-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); }.wallet-row strong,.wallet-row small { display:block; }.wallet-row strong { color:var(--ink); font:12px ui-monospace,SFMono-Regular,Menlo,monospace; }.wallet-row small { margin-top:3px; color:var(--muted); font-size:10px; }.wallet-row button { border:0; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; }.wallet-row button:hover { color:var(--red); }
.error { grid-column:1/-1; padding:16px; border:1px solid rgba(255,124,140,.4); border-radius:8px; color:#ffd9df; background:rgba(255,124,140,.08); font-size:13px; }
@media (max-width:760px) { .shell { padding-top:30px; }.topbar { display:block; }.status-wrap { justify-content:flex-start; max-width:none; margin-top:18px; }.coin-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }.stable-list { grid-template-columns:1fr; }.wallet-balances { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:420px) { .shell { width:min(100% - 22px,1120px); }.panel { padding:16px; }.coin-card { padding:13px; }.price { font-size:20px; }.wallet-form { display:grid; }.wallet-form button { min-height:39px; } }
.wallet-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }.wallet-row .wallet-actions button { border:1px solid var(--line); border-radius:6px; padding:5px 7px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; }.wallet-row .wallet-actions button:hover,.wallet-row .wallet-actions button.selected { border-color:var(--teal); color:var(--teal); }.wallet-row .wallet-actions button.remove:hover { border-color:var(--red); color:var(--red); }