/* ═══════════════════════════════════════════
   base.css — Переменные, сброс, типографика,
   анимации, шапка, навигация, герой
   ═══════════════════════════════════════════ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --bg:#08090E;
  --s1:#0F1117;
  --s2:#151720;
  --s3:#1C1F2B;
  --b1:#252836;
  --b2:#2E3246;
  --a:#6C63FF;
  --a2:#5A52E8;
  --ag:linear-gradient(135deg,#6C63FF,#9B8FFF);
  --ag2:linear-gradient(135deg,#4A42D4,#6C63FF,#9B8FFF);
  --g:#00D4A0;--g2:#00BA8C;
  --r:#FF4D6D;--r2:#E83558;
  --y:#FFB800;--p:#B06EFF;
  --c:#00C2DB;--o:#FF7849;
  --t1:#F0F1FF;--t2:#8B90B8;--t3:#454866;--t4:#22253A;
  --mono:'DM Mono',monospace;
  --font:'DM Sans',sans-serif;
  --head:'Syne',sans-serif;
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;--r20:20px;--r24:24px;
}
html,body{height:100%;overscroll-behavior:none}
body{
  background:var(--bg);color:var(--t1);
  font-family:var(--font);min-height:100vh;
  padding-bottom:80px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::-webkit-scrollbar{display:none}
input,button,select,textarea{font-family:var(--font)}
button{cursor:pointer}

/* ─── BG GLOW ─── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 50% 30% at 20% 0%,rgba(108,99,255,.08) 0%,transparent 60%),
    radial-gradient(ellipse 40% 25% at 80% 100%,rgba(0,212,160,.05) 0%,transparent 50%);
}

/* ─── PAGE TRANSITIONS ─── */
.pg{display:none;padding:0 0 8px;animation:pgIn .2s ease;position:relative;z-index:1}
.pg.on{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ─── HEADER ─── */
.hdr{
  background:rgba(8,9,14,.94);
  border-bottom:1px solid rgba(108,99,255,.1);
  padding:10px 16px 0;position:sticky;top:0;z-index:200;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px);
}
.hdr-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.logo{display:flex;align-items:center;gap:10px}
.logo-ico{
  width:36px;height:36px;border-radius:11px;
  background:var(--ag);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:800;font-size:13px;color:#fff;
  flex-shrink:0;letter-spacing:.5px;
  box-shadow:0 0 20px rgba(108,99,255,.3),inset 0 1px 0 rgba(255,255,255,.1);
}
.logo-name{font-family:var(--head);font-size:18px;font-weight:700;letter-spacing:-.3px}
.logo-sub{font-size:9px;color:var(--t3);font-weight:500;letter-spacing:1px;text-transform:uppercase}
.hdr-actions{display:flex;gap:7px}
.hdr-btn{
  width:36px;height:36px;border-radius:10px;
  background:rgba(108,99,255,.07);
  border:1px solid rgba(108,99,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:15px;cursor:pointer;transition:all .14s;position:relative;
}
.hdr-btn:active{background:rgba(108,99,255,.15);transform:scale(.93)}
.hdr-btn-dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--r);border:2px solid var(--bg);
  position:absolute;top:4px;right:4px;
  animation:dot-pulse 2s ease infinite;
}
@keyframes dot-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,77,109,.4)}50%{box-shadow:0 0 0 4px rgba(255,77,109,0)}}
.nav-tabs{display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nav-tab{
  flex-shrink:0;padding:8px 14px;font-size:12px;font-weight:600;
  color:var(--t3);cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .17s;white-space:nowrap;user-select:none;
}
.nav-tab.on{color:var(--a);border-bottom-color:var(--a);font-weight:700}

/* ─── BOTTOM NAV ─── */
.bnav{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(8,9,14,.97);
  border-top:1px solid rgba(108,99,255,.1);
  display:flex;padding:6px 0 max(env(safe-area-inset-bottom,0px),12px);
  z-index:300;backdrop-filter:blur(24px);
}
.bni{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;padding:4px 0;user-select:none}
.bni-ico{width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .2s}
.bni-lbl{font-size:9px;font-weight:600;color:var(--t3);letter-spacing:.3px;text-transform:uppercase}
.bni.on .bni-lbl{color:var(--a)}.bni.on .bni-ico{transform:translateY(-2px)}

/* ─── HERO ─── */
.hero{
  margin:12px 14px 10px;
  background:linear-gradient(145deg,var(--s1) 0%,rgba(15,17,23,.97) 100%);
  border:1px solid rgba(108,99,255,.15);
  border-radius:var(--r24);padding:22px 20px;
  position:relative;overflow:hidden;
  box-shadow:0 4px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(108,99,255,.07);
}
.hero::before{
  content:'';position:absolute;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,99,255,.09) 0%,transparent 70%);
  top:-80px;right:-60px;pointer-events:none;
}
.hero-label{font-size:10px;color:var(--t3);font-weight:600;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.badge-live{
  display:inline-flex;align-items:center;gap:4px;padding:2px 7px;
  border-radius:20px;background:rgba(0,212,160,.08);border:1px solid rgba(0,212,160,.2);
  font-size:9px;font-weight:700;color:var(--g);letter-spacing:.5px;
}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--g);animation:live 1.4s ease infinite}
@keyframes live{0%,100%{opacity:1}50%{opacity:.3}}
.hero-bal-wrap{display:flex;align-items:center;gap:12px}
.hero-bal{font-family:var(--head);font-size:38px;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--t1)}
.hero-bal.hidden .bal-val{filter:blur(7px);user-select:none}
.hero-eye{
  width:30px;height:30px;border-radius:9px;
  background:rgba(108,99,255,.08);border:1px solid rgba(108,99,255,.15);
  display:flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;
}
.hero-eye:active{background:rgba(108,99,255,.18)}
.hero-change{font-size:12px;margin-top:6px;font-weight:600;display:flex;align-items:center;gap:5px}
.hero-change.up{color:var(--g)}.hero-change.dn{color:var(--r)}
.hero-change-dot{width:5px;height:5px;border-radius:50%;background:currentColor}
.hero-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.hbtn{
  background:rgba(108,99,255,.07);border:1px solid rgba(108,99,255,.14);
  border-radius:var(--r12);padding:12px 4px 10px;
  text-align:center;cursor:pointer;transition:all .15s;user-select:none;
}
.hbtn:active{background:rgba(108,99,255,.15);transform:scale(.93)}
.hbtn-ico{font-size:20px;margin-bottom:4px}
.hbtn-lbl{font-size:9px;font-weight:700;color:var(--t2);letter-spacing:.2px;text-transform:uppercase}
.copy-addr-btn{
  width:100%;margin-top:14px;padding:10px 14px;
  background:rgba(108,99,255,.06);border:1px dashed rgba(108,99,255,.25);
  border-radius:var(--r12);color:var(--t2);font-size:11px;font-weight:600;
  display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .14s;
}
.copy-addr-btn:active{background:rgba(108,99,255,.14)}

/* ─── SECTION HEADER ─── */
.sec{display:flex;align-items:center;justify-content:space-between;padding:0 14px;margin:14px 0 8px;z-index:1;position:relative}
.sec-t{font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:-.2px}
.sec-a{font-size:12px;color:var(--a);font-weight:600;cursor:pointer}

/* ─── SKELETON ─── */
.skel{background:linear-gradient(90deg,var(--s2) 25%,rgba(108,99,255,.05) 50%,var(--s2) 75%);background-size:200% 100%;animation:skelAnim 1.5s infinite;border-radius:var(--r8)}
@keyframes skelAnim{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-row{display:flex;align-items:center;gap:12px;padding:14px 15px;border-bottom:1px solid rgba(108,99,255,.06)}
.skel-circle{width:42px;height:42px;border-radius:50%;flex-shrink:0}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:7px}
.skel-line-a{height:12px;border-radius:4px;width:55%}
.skel-line-b{height:10px;border-radius:4px;width:38%}

/* ─── TOAST ─── */
#toast-container{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.toast{padding:9px 18px;border-radius:20px;font-size:13px;font-weight:600;white-space:nowrap;animation:toastIn .3s cubic-bezier(.16,1,.3,1);backdrop-filter:blur(12px)}
.toast.success{background:rgba(0,212,160,.15);border:1px solid rgba(0,212,160,.3);color:var(--g)}
.toast.error{background:rgba(255,77,109,.13);border:1px solid rgba(255,77,109,.25);color:var(--r)}
.toast.info{background:rgba(108,99,255,.15);border:1px solid rgba(108,99,255,.3);color:#A89FFF}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px) scale(.9)}to{opacity:1;transform:none}}

/* ─── EMPTY STATE ─── */
.empty-state{padding:40px 20px;text-align:center}
.empty-ico{font-size:36px;margin-bottom:8px}
.empty-txt{font-size:14px;font-weight:600;color:var(--t2)}
.empty-sub{font-size:12px;color:var(--t3);margin-top:3px}

/* ─── LOGIN ─── */
#login-screen{
  position:fixed;inset:0;background:var(--bg);z-index:1000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
}
#login-screen::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 30%,rgba(108,99,255,.1),transparent 60%);
  pointer-events:none;
}
.login-logo{
  width:72px;height:72px;border-radius:22px;background:var(--ag);
  margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-size:24px;font-weight:800;color:#fff;
  box-shadow:0 12px 40px rgba(108,99,255,.4);
  position:relative;
}
.login-title{font-family:var(--head);font-size:30px;font-weight:800;text-align:center;margin-bottom:6px;letter-spacing:-.5px;position:relative}
.login-sub{font-size:14px;color:var(--t2);text-align:center;margin-bottom:32px;line-height:1.5;position:relative}