/* ════════════════════════════════════════════════════
   BASE — переменные, reset, общие стили
════════════════════════════════════════════════════ */
:root{
  --bg:#06060d; --surface:#0e0e1a; --surface2:#161628; --surface3:#1f1f33;
  --border:#252538; --border-soft:#1d1d30;
  --ton:#0098EA; --ton-dim:#0070bb; --gold:#FFD166; --win:#00E5A0; --danger:#FF3D6B;
  --star:#FFC83A; --purple:#A855F7;
  --text:#ECECF5; --text-dim:#A8A8C0; --muted:#5a5a78;
  --r:14px; --r-lg:18px; --r-xl:26px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{
  font-family:'Inter',sans-serif;
  background:var(--ld-bg-screen); color:var(--text);
  display:flex; flex-direction:column;
}

/* Общая типографика и хелперы */
.section-title{
  font-size:10px; color:var(--muted); letter-spacing:2px;
  text-transform:uppercase; margin-bottom:9px; font-weight:700;
}
.label-sm{
  font-size:10px; color:var(--muted); letter-spacing:1.5px;
  text-transform:uppercase; font-weight:600;
}

.empty-state{
  text-align:center; padding:30px 20px;
  color:var(--muted); font-size:13px;
}
.empty-state-icon{ font-size:36px; margin-bottom:8px; opacity:.5; }

/* Brand-стили */
.brand{
  font-family:'Bebas Neue'; font-size:24px; letter-spacing:3px;
  background:linear-gradient(135deg,var(--ton),var(--gold));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.brand-pink{
  background:linear-gradient(135deg,var(--star),#ff7400);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.brand-purple{
  background:linear-gradient(135deg,var(--purple),#ec4899);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Header */
.page-header{
  display:flex; justify-content:flex-end; align-items:center;
  padding:14px 18px 12px;
  position:sticky; top:0; z-index:10;
  background:rgba(27,20,56,.55);
  border-bottom:1px solid rgba(140,170,255,.10);
  box-shadow:0 1px 24px rgba(91,108,255,.06);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
}

.chip{
  display:flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:50px; padding:7px 13px;
  font-size:12px; font-weight:700;
}
.chip .val{color:var(--ton);}
.chip-stars{ border-color:rgba(255,184,0,.25); }
.chip-stars .val{color:var(--star);}
.ton-logo{ width:18px; height:18px; display:inline-flex; }
.star-icon{ font-size:13px; }

/* ── Unified header (all tabs) ── */
.caps-header{ justify-content:space-between; }
.page-title{
  font-family:'Bebas Neue'; font-size:20px;
  letter-spacing:3px; color:rgba(255,255,255,.35);
}
.caps-chip{
  font-size:14px; font-weight:800;
  padding:8px 16px; gap:8px;
  background:rgba(18,18,28,.9);
  border-color:rgba(255,184,0,.35);
  box-shadow:0 0 14px rgba(255,184,0,.08);
}
.caps-chip .val{ font-size:16px; letter-spacing:.5px; }

/* Confetti */
.confetti-piece{
  position:fixed; top:-10px; width:8px; height:12px;
  animation:confettiFall linear forwards;
  pointer-events:none; z-index:300; border-radius:2px;
}
@keyframes confettiFall{
  to { transform:translateY(110vh) rotate(720deg); opacity:0 }
}

/* Toast */
.toast{
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--border);
  border-radius:50px; padding:11px 22px;
  font-size:13px; font-weight:600; z-index:500;
  white-space:nowrap; box-shadow:0 8px 30px rgba(0,0,0,.6);
  animation:toastIn .35s ease;
}
@keyframes toastIn{
  from{ opacity:0; transform:translate(-50%,16px); }
  to  { opacity:1; transform:translate(-50%,0);    }
}

/* ── App shell ── */
#app-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* ── Адаптив для планшетов / широких экранов ── */
@media (min-width: 540px) {
  html { background: #03020a; }
  body { align-items: center; }
  #app-shell {
    max-width: 480px;
    height: 100%;
    flex: none;
    border-left: 1px solid rgba(100,120,255,.1);
    border-right: 1px solid rgba(100,120,255,.1);
    box-shadow: 0 0 80px rgba(0,0,0,.8);
  }
  /* position:fixed → absolute, привязывается к #app-shell (position:relative)
     Используем #app-shell-префикс для перебития специфичности nav.css */
  #app-shell #loader   { position: absolute; }
  #app-shell .nav-wrap { position: absolute; }
}

/* TonConnect UI монтирует свою модалку в div#tc-widget-root прямо в <body> —
   без явного z-index она проигрывает нашим оверлеям (topup-sheet и т.п. на 1200+)
   и рендерится визуально позади них, хотя технически видима в DOM. */
#tc-widget-root {
  position: relative;
  z-index: 99999;
}