@import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@400;500;600;700;900&display=swap');
  :root { --accent:#e6e8ec; --accent-dim:#9aa0aa; --bg:#08090b; --surface:#141619; --surface2:#1c1f24; --line:rgba(255,255,255,.09); --muted:#8a8d93; --green:#4ade80; --amber:#fbbf24; --red:#f87171; }
  * { box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent; }
  html,body { height:100%; }
  body { background:var(--bg); color:#f3f4f6; font-family:'Archivo',sans-serif; -webkit-font-smoothing:antialiased; }
  .display { font-family:'Anton',sans-serif; letter-spacing:.02em; }
  button { font-family:inherit; cursor:pointer; border:none; color:inherit; }
  input,textarea,select { font-family:inherit; }
  .app { max-width:480px; margin:0 auto; min-height:100vh; position:relative; }
  .wrap { padding:14px 16px 100px; }
  .appbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:rgba(8,9,11,.82); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
  .card { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px; }
  .accent-btn { background:var(--accent); color:#0a0a0a; font-weight:700; border-radius:12px; padding:12px 16px; transition:opacity .15s; }
  .accent-btn:active { opacity:.8; }
  .accent-btn:disabled { opacity:.5; cursor:default; }
  .ghost { background:var(--surface2); border:1px solid var(--line); color:#cbd0d8; border-radius:999px; padding:9px 15px; font-size:14px; }
  .pill-on { background:var(--accent); color:#0a0a0a; border-color:var(--accent); font-weight:600; }
  .row { display:flex; align-items:center; gap:12px; }
  .field { width:100%; background:#0e1013; border:1px solid var(--line); border-radius:12px; padding:12px 13px; color:#fff; outline:none; font-size:15px; }
  .field:focus { border-color:var(--accent-dim); }
  .mut { color:var(--muted); font-size:13px; }
  .up { text-transform:uppercase; letter-spacing:.1em; font-size:10px; color:var(--muted); font-weight:600; }
  .bar { height:7px; flex:1; border-radius:999px; background:rgba(255,255,255,.09); overflow:hidden; }
  .barfill { height:100%; border-radius:999px; }
  a { color:var(--accent); cursor:pointer; }
  .spin { width:22px;height:22px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:s .7s linear infinite;margin:24px auto; }
  @keyframes s { to { transform:rotate(360deg);} }
  .tabs { display:flex; gap:8px; margin-bottom:16px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
  .tabs::-webkit-scrollbar { display:none; }
  .avatar { border-radius:12px; display:grid; place-items:center; color:#0a0a0a; font-weight:900; font-family:'Anton'; background:var(--accent); }
  .h1 { font-size:26px; }
  .bottomnav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:480px; display:flex; justify-content:space-around; background:rgba(14,16,19,.92); backdrop-filter:blur(16px); border-top:1px solid var(--line); padding:8px 4px calc(8px + env(safe-area-inset-bottom)); z-index:30; }
  .navitem { display:flex; flex-direction:column; align-items:center; gap:3px; background:none; padding:4px 10px; border-radius:10px; color:var(--muted); flex:1; }
  .navitem.on { color:var(--accent); }
  .navitem span { font-size:10px; font-weight:600; letter-spacing:.02em; }
  .stat { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; }
  .stat .n { font-family:'Anton'; font-size:26px; line-height:1; }
  .dot { display:inline-block; height:9px; width:9px; border-radius:50%; }
  .banner { border-radius:12px; padding:11px 14px; font-size:13px; margin-bottom:14px; }