/* ── VARIÁVEIS ─────────────────────────────────── */
:root {
  --green: #00C853;
  --green2: #00913C;
  --glow: rgba(0,200,83,0.25);
  --faint: rgba(0,200,83,0.08);
  --black: #000;
  --card: #0f0f0f;
  --card2: #141414;
  --border: rgba(0,200,83,0.18);
  --text: #e8e8e8;
  --muted: #555;
  --red: #ff5252;
  --gold: #FFC107;
  --mono: 'Share Tech Mono', monospace;
  --body: 'Rajdhani', sans-serif;
  --display: 'Orbitron', sans-serif;
}

/* ── RESET ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; background:#000; }
body { font-family:var(--body); color:var(--text); }
button { cursor:pointer; }
input, textarea { outline:none; }
a { text-decoration:none; color:inherit; }

/* ── GRID BG ───────────────────────────────────── */
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,200,83,0.03) 1px, transparent 1px),
    linear-gradient(90deg,rgba(0,200,83,0.03) 1px,transparent 1px);
  background-size:40px 40px;
}

/* ── APP CONTAINER ─────────────────────────────── */
#app { position:relative; z-index:1; height:100vh; overflow:hidden; }

/* ── PAGE ──────────────────────────────────────── */
.page {
  display:flex; flex-direction:column;
  height:100vh; overflow:hidden;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }

/* ── SCROLL ────────────────────────────────────── */
.scroll {
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-bottom:80px;
}
.scroll::-webkit-scrollbar { width:2px; }
.scroll::-webkit-scrollbar-thumb { background:var(--green2); border-radius:2px; }

/* ── TOPBAR ────────────────────────────────────── */
.topbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; flex-shrink:0;
  background:rgba(0,0,0,0.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border); z-index:10;
}
.logo { font-family:var(--display); font-size:15px; font-weight:900; letter-spacing:2px; color:var(--green); text-shadow:0 0 16px var(--glow); }
.logo span { color:var(--text); }
.topbar-back { background:none; border:none; color:var(--muted); font-size:20px; padding:4px 8px; }
.topbar-back:hover { color:var(--green); }
.topbar-right { display:flex; align-items:center; gap:10px; }

/* ── BOTTOM NAV ────────────────────────────────── */
.bottomnav {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; background:rgba(0,0,0,0.95);
  border-top:1px solid var(--border); backdrop-filter:blur(16px); z-index:10;
}
.nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  padding:10px 4px 14px; border:none; background:none;
  color:var(--muted); font-family:var(--body); font-size:10px;
  letter-spacing:1px; transition:color .2s; gap:4px;
}
.nav-item svg { width:20px; height:20px; }
.nav-item.active { color:var(--green); }
.nav-item.active svg { filter:drop-shadow(0 0 6px var(--green)); }

/* ── BUTTONS ───────────────────────────────────── */
.btn { width:100%; border:none; border-radius:8px; cursor:pointer; font-family:var(--display); font-weight:700; letter-spacing:2px; text-transform:uppercase; transition:all .2s; }
.btn-primary { background:var(--green); color:#000; font-size:13px; padding:14px 24px; box-shadow:0 0 20px rgba(0,200,83,0.3); }
.btn-primary:active { transform:scale(.98); box-shadow:none; }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-outline { background:transparent; color:var(--green); border:1px solid var(--green); font-size:12px; padding:12px 20px; }
.btn-outline:active { background:var(--faint); }
.btn-sm { padding:10px; font-size:11px; }
.btn-danger { background:transparent; color:var(--red); border:1px solid rgba(255,82,82,.3); font-size:11px; padding:10px; }

/* ── INPUTS ────────────────────────────────────── */
.input-group { margin-bottom:14px; }
.input-label { display:block; font-family:var(--mono); font-size:10px; color:var(--green); letter-spacing:2px; margin-bottom:6px; opacity:.8; }
.input-field {
  width:100%; background:var(--card2); border:1px solid var(--border);
  border-radius:8px; padding:12px 14px; color:var(--text);
  font-family:var(--body); font-size:15px; transition:border-color .2s;
}
.input-field:focus { border-color:var(--green); }
.input-field::placeholder { color:var(--muted); }
textarea.input-field { resize:vertical; line-height:1.6; }

/* ── CARDS ─────────────────────────────────────── */
.card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:16px; margin:0 16px 12px; }
.card-label { font-family:var(--mono); font-size:10px; color:var(--green); letter-spacing:2px; margin-bottom:10px; opacity:.8; }
.section-label { font-family:var(--mono); font-size:10px; color:var(--green); letter-spacing:3px; text-transform:uppercase; padding:16px 20px 8px; opacity:.7; }

/* ── HERO SPLASH ───────────────────────────────── */
.hero { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; text-align:center; }
.hero-logo { font-family:var(--display); font-weight:900; font-size:clamp(22px,5.5vw,38px); letter-spacing:4px; color:var(--green); text-shadow:0 0 30px var(--glow); margin-bottom:8px; animation:pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100%{text-shadow:0 0 30px var(--glow)} 50%{text-shadow:0 0 50px rgba(0,200,83,.5)} }
.hero-sub { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:4px; margin-bottom:32px; }
.hero-line { width:60px; height:1px; background:var(--green); margin:0 auto 24px; opacity:.4; }
.hero-desc { font-size:15px; line-height:1.7; color:#888; max-width:300px; margin:0 auto 24px; }
.hero-code { font-family:var(--mono); font-size:11px; color:var(--green); opacity:.6; letter-spacing:3px; margin-bottom:40px; }
.hero-btns { display:flex; flex-direction:column; gap:12px; width:100%; max-width:300px; }
.scanner { width:70px; height:70px; margin:0 auto 28px; position:relative; }
.scanner-ring { position:absolute; inset:0; border:2px solid var(--green); border-radius:50%; animation:scanPulse 2s ease-out infinite; }
.scanner-ring:nth-child(2){animation-delay:.6s} .scanner-ring:nth-child(3){animation-delay:1.2s}
@keyframes scanPulse{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.scanner-dot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.scanner-dot::after{content:'';width:10px;height:10px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green)}

/* ── WALLET ────────────────────────────────────── */
.wallet-card { background:linear-gradient(135deg,#0f1a0f,#0a120a); border:1px solid var(--green); border-radius:16px; padding:20px; margin:16px; position:relative; overflow:hidden; box-shadow:0 0 30px rgba(0,200,83,.15); }
.wallet-card::before { content:''; position:absolute; top:-40px; right:-40px; width:120px; height:120px; background:radial-gradient(circle,rgba(0,200,83,.1),transparent 70%); }
.wallet-label { font-family:var(--mono); font-size:10px; color:var(--green); letter-spacing:3px; margin-bottom:8px; opacity:.7; }
.wallet-amount { font-family:var(--display); font-size:32px; font-weight:900; color:var(--green); text-shadow:0 0 20px var(--glow); }
.wallet-sub { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:4px; }
.wallet-actions { display:flex; gap:10px; margin-top:16px; }
.wallet-btn { flex:1; background:rgba(0,200,83,.1); border:1px solid rgba(0,200,83,.3); color:var(--green); font-family:var(--display); font-size:10px; font-weight:700; letter-spacing:1px; padding:10px 4px; border-radius:8px; }

/* ── STAT ROW ──────────────────────────────────── */
.stat-row { display:flex; gap:10px; padding:0 16px; margin-bottom:12px; }
.stat-box { flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:14px 10px; text-align:center; }
.stat-val { font-family:var(--display); font-size:20px; font-weight:900; color:var(--green); display:block; }
.stat-label { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:2px; margin-top:4px; display:block; }

/* ── TIP CARD ──────────────────────────────────── */
.tip-card { background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin:0 16px 12px; }
.tip-header { padding:10px 14px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.tip-league { font-family:var(--mono); font-size:10px; color:var(--green); letter-spacing:2px; opacity:.8; }
.tip-time { font-family:var(--mono); font-size:10px; color:var(--muted); }
.tip-body { padding:14px; }
.tip-match { font-family:var(--display); font-size:13px; font-weight:700; margin-bottom:8px; letter-spacing:1px; }
.tip-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.tag { background:var(--faint); border:1px solid rgba(0,200,83,.2); color:var(--green); font-family:var(--mono); font-size:10px; padding:3px 8px; border-radius:4px; letter-spacing:1px; }
.tip-text { font-size:13px; color:#888; line-height:1.6; margin-bottom:10px; }
.tip-footer { display:flex; justify-content:space-between; align-items:flex-end; }
.odd-box { background:var(--green); color:#000; font-family:var(--display); font-size:18px; font-weight:900; padding:7px 14px; border-radius:6px; box-shadow:0 0 12px rgba(0,200,83,.4); }
.tip-invest { text-align:right; }
.tip-invest-label { font-size:9px; color:var(--muted); letter-spacing:1px; font-family:var(--mono); }
.tip-invest-val { font-size:13px; font-weight:700; font-family:var(--display); }

/* ── PLAN CARD ─────────────────────────────────── */
.plan-card { margin:0 16px 12px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }
.plan-header { padding:14px 16px; display:flex; justify-content:space-between; align-items:center; }
.plan-name { font-family:var(--display); font-size:15px; font-weight:900; letter-spacing:2px; }
.plan-price { font-family:var(--display); font-size:17px; font-weight:900; color:var(--green); }
.plan-body { padding:12px 16px 16px; background:var(--card); border-top:1px solid var(--border); }
.plan-row { display:flex; justify-content:space-between; padding:4px 0; font-size:13px; }
.plan-row span:first-child { color:var(--muted); font-family:var(--mono); font-size:11px; letter-spacing:1px; }
.plan-row span:last-child { font-weight:600; }

/* ── REDE ──────────────────────────────────────── */
.tree-node { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid rgba(0,200,83,.05); }
.tree-avatar { width:36px; height:36px; border-radius:50%; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:12px; font-weight:700; color:var(--green); flex-shrink:0; }
.tree-info { flex:1; }
.tree-name { font-size:13px; font-weight:600; }
.tree-meta { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:2px; }
.tree-badge { font-family:var(--mono); font-size:9px; padding:2px 6px; border-radius:4px; letter-spacing:1px; }
.lvl-1{margin-left:0} .lvl-2{margin-left:16px;border-left:1px solid rgba(0,200,83,.1)} .lvl-3{margin-left:32px;border-left:1px solid rgba(0,200,83,.07)} .lvl-4{margin-left:48px}

/* ── COMM ROW ──────────────────────────────────── */
.comm-row { display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid rgba(0,200,83,.06); }
.comm-left { display:flex; align-items:center; gap:10px; }
.comm-icon { width:32px; height:32px; border-radius:8px; background:var(--faint); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; }
.comm-name { font-size:13px; font-weight:600; }
.comm-meta { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:2px; }
.comm-val { font-family:var(--display); font-size:14px; font-weight:700; color:var(--green); }

/* ── MENU LIST ─────────────────────────────────── */
.menu-list { background:var(--card); border:1px solid var(--border); border-radius:12px; margin:0 16px 12px; overflow:hidden; }
.menu-item { display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid rgba(0,200,83,.06); cursor:pointer; transition:background .15s; }
.menu-item:last-child { border-bottom:none; }
.menu-item:active { background:var(--faint); }
.menu-icon { width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.menu-item > div { flex:1; }
.menu-sub { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:1px; margin-top:2px; }
.menu-arrow { color:var(--green); flex-shrink:0; }

/* ── LINK BOX ──────────────────────────────────── */
.link-box { background:var(--card2); border:1px solid var(--border); border-radius:8px; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.link-text { font-family:var(--mono); font-size:11px; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-btn { background:none; border:1px solid var(--border); color:var(--green); font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:4px 8px; border-radius:4px; flex-shrink:0; margin-left:8px; }

/* ── TOGGLE ────────────────────────────────────── */
.toggle-group { display:flex; background:var(--card); border:1px solid var(--border); border-radius:8px; margin:0 16px 12px; overflow:hidden; }
.toggle-btn { flex:1; padding:10px; background:none; border:none; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:1px; transition:all .2s; }
.toggle-btn.active { background:var(--green); color:#000; font-weight:700; }

/* ── MSGS ──────────────────────────────────────── */
.erro-box { background:rgba(255,82,82,.08); border:1px solid rgba(255,82,82,.2); color:var(--red); border-radius:8px; padding:10px 14px; font-family:var(--mono); font-size:11px; margin-top:10px; display:none; }
.ok-box { background:var(--faint); border:1px solid rgba(0,200,83,.2); color:var(--green); border-radius:8px; padding:10px 14px; font-family:var(--mono); font-size:11px; margin-top:10px; display:none; }
.info-box { background:var(--faint); border:1px solid rgba(0,200,83,.15); border-radius:8px; padding:12px 14px; margin-bottom:14px; font-size:12px; color:#777; line-height:1.6; }

/* ── PRICE HERO ────────────────────────────────── */
.price-hero { margin:16px 16px 0; background:linear-gradient(135deg,#0f1a0f,#0a120a); border:1px solid var(--green); border-radius:16px; padding:24px; text-align:center; }
.price-val { font-family:var(--display); font-size:38px; font-weight:900; color:var(--green); text-shadow:0 0 20px var(--glow); }
.price-sub { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:2px; margin:4px 0 16px; }
.price-features { list-style:none; text-align:left; display:inline-block; font-size:13px; color:#888; line-height:2; }

/* ── PIX ───────────────────────────────────────── */
.pix-qr-box { text-align:center; padding:16px 0 12px; }
.pix-qr-box img { width:180px; height:180px; border:2px solid var(--green); border-radius:8px; background:#fff; }
.pix-info { background:var(--faint); border:1px solid rgba(0,200,83,.15); border-radius:8px; padding:10px 14px; margin-bottom:10px; }
.pix-info-label { font-family:var(--mono); font-size:9px; color:var(--green); letter-spacing:2px; margin-bottom:3px; }
.pix-info-val { font-family:var(--display); font-size:15px; font-weight:700; }

/* ── ACESSO BADGE ──────────────────────────────── */
.acesso-badge { font-family:var(--mono); font-size:10px; letter-spacing:1px; padding:3px 8px; border-radius:4px; }
.acesso-badge.ativo { background:var(--faint); border:1px solid rgba(0,200,83,.3); color:var(--green); }
.acesso-badge.inativo { background:rgba(255,82,82,.08); border:1px solid rgba(255,82,82,.2); color:var(--red); }

/* ── PERFIL ────────────────────────────────────── */
.perfil-hero { text-align:center; padding:20px 16px; }
.perfil-avatar { width:72px; height:72px; border-radius:50%; background:var(--card); border:2px solid var(--green); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:22px; font-weight:900; color:var(--green); box-shadow:0 0 20px var(--glow); }
.perfil-nome { font-family:var(--display); font-size:18px; font-weight:700; letter-spacing:1px; }
.perfil-role { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:4px; letter-spacing:2px; }

/* ── ADMIN STAT ────────────────────────────────── */
.admin-stat { flex:1; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:12px; text-align:center; }
.admin-val { font-family:var(--display); font-size:16px; font-weight:900; color:var(--green); }
.admin-label { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:1px; margin-top:3px; }

/* ── CONVITE HERO ──────────────────────────────── */
.convite-hero { padding:24px 20px 8px; text-align:center; }
.convite-nome { font-family:var(--display); font-size:20px; font-weight:900; margin:8px 0 4px; }
.convite-tipo { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:2px; }

/* ── PLAN BADGE ────────────────────────────────── */
.plan-badge { font-family:var(--mono); font-size:9px; color:var(--green); border:1px solid rgba(0,200,83,.3); padding:3px 8px; border-radius:4px; letter-spacing:1px; }

/* ── LOADING STATE ─────────────────────────────── */
.loading-state { padding:32px; text-align:center; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:2px; }
.empty-state { padding:32px; text-align:center; }
.empty-state .icon { font-size:36px; margin-bottom:12px; }
.empty-state .msg { font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:1px; }

/* ── SAQUE ITEM ────────────────────────────────── */
.saque-item { padding:14px 16px; border-bottom:1px solid rgba(0,200,83,.06); }
.saque-header { display:flex; justify-content:space-between; margin-bottom:6px; }
.saque-nome { font-size:14px; font-weight:600; }
.saque-valor { font-family:var(--display); font-size:15px; font-weight:900; color:var(--green); }
.saque-pix-txt { font-family:var(--mono); font-size:11px; color:var(--muted); margin-bottom:8px; }
.saque-actions { display:flex; gap:8px; }
.saque-btn { flex:1; padding:8px; border-radius:6px; font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:1px; border:none; }
.saque-btn.aprovar { background:var(--green); color:#000; }
.saque-btn.recusar { background:rgba(255,82,82,.1); border:1px solid rgba(255,82,82,.3); color:var(--red); }

/* ── USER ITEM ─────────────────────────────────── */
.user-item { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(0,200,83,.05); cursor:pointer; }
.user-item:active { background:var(--faint); }
.user-avatar-sm { width:36px; height:36px; border-radius:8px; background:var(--card2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:13px; font-weight:700; color:var(--green); flex-shrink:0; }
.user-info { flex:1; }
.user-name { font-size:13px; font-weight:600; }
.user-meta { font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:1px; }

/* ── TOAST ─────────────────────────────────────── */
.toast { position:fixed; bottom:90px; left:50%; transform:translateX(-50%); background:var(--card); border:1px solid var(--border); border-radius:8px; padding:10px 20px; font-family:var(--mono); font-size:11px; color:var(--green); letter-spacing:1px; z-index:9999; transition:opacity .3s; white-space:nowrap; }
.toast.hidden { opacity:0; pointer-events:none; }
.toast.erro { color:var(--red); border-color:rgba(255,82,82,.3); }

/* ── LOADER ────────────────────────────────────── */
.loader { position:fixed; inset:0; background:rgba(0,0,0,.7); display:flex; align-items:center; justify-content:center; z-index:9998; }
.loader.hidden { display:none; }
.loader-ring { width:40px; height:40px; border:3px solid rgba(0,200,83,.2); border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── FORM LAYOUT ───────────────────────────────── */
.form-header { padding:32px 24px 16px; }
.form-title { font-family:var(--display); font-size:22px; font-weight:900; letter-spacing:2px; margin-bottom:4px; }
.form-sub { font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:2px; }
.form-body { padding:0 20px 24px; }
.form-link { text-align:right; margin-bottom:20px; }
.form-link span { font-family:var(--mono); font-size:11px; color:var(--green); cursor:pointer; letter-spacing:1px; }
.form-footer { text-align:center; margin-top:16px; font-family:var(--mono); font-size:10px; color:var(--muted); letter-spacing:1px; }

/* ── LOGO IMAGEM ───────────────────────────────── */
.hero-img-logo {
  width: clamp(200px, 70vw, 340px);
  max-width: 340px;
  margin-bottom: 4px;
  filter: drop-shadow(0 0 20px rgba(0,200,83,0.3));
  animation: logoGlow 3s ease-in-out infinite;
}
@keyframes logoGlow {
  0%,100% { filter: drop-shadow(0 0 20px rgba(0,200,83,0.3)); }
  50%      { filter: drop-shadow(0 0 35px rgba(0,200,83,0.6)); }
}

/* Topbar com logo pequena */
.topbar-logo-img {
  height: 28px;
  width: auto;
}

/* ── DISCLAIMER / LGPD ─────────────────────────────────────── */
.hero-disclaimer {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  max-width: 300px;
  margin: 0 auto;
  line-height: 1.6;
  padding: 12px 0 0;
  opacity: 0.7;
}
.policy-link {
  color: var(--green);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
}
.policy-link:hover { opacity: 0.8; }