/* ============================================================================
   indicacoes.css — aba "Minhas Indicações".
   Mesma paleta "Dark Space" do dashboard/pacotes/hall-da-fama: as páginas do
   site têm que parecer o mesmo produto. Escopado em #ref-page.
   ============================================================================ */
#ref-page{
  --bg:#0a0612; --bg2:#130a22; --panel:#171025; --panel2:#1d1330;
  --line:rgba(157,78,221,.25); --line2:rgba(199,125,255,.45);
  --text:#ece6f7; --muted:#a89cc4; --muted2:#8577a3;
  --gold:#f0b429; --green:#4ade80; --purple:#a855f7; --purple2:#c084fc;
  font:14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  color:var(--text); background:var(--bg); min-height:100vh; -webkit-font-smoothing:antialiased;
}
#ref-page *{ box-sizing:border-box; }
#ref-page a{ color:inherit; text-decoration:none; }
#ref-page ::-webkit-scrollbar{ width:9px; height:9px; }
#ref-page ::-webkit-scrollbar-thumb{ background:#3a2a54; border-radius:9px; }
#ref-page::before{ content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 14% -6%, rgba(157,78,221,.22), transparent 60%),
    radial-gradient(900px 560px at 88% 8%, rgba(123,44,191,.18), transparent 55%),
    radial-gradient(700px 500px at 50% 100%, rgba(74,222,128,.10), transparent 60%); }

#ref-page .shell{ position:relative; z-index:1; display:grid; grid-template-columns:260px minmax(0,1fr); min-height:100vh; }
#ref-page .side{ background:var(--bg2); border-right:1px solid var(--line); padding:18px 14px; }
#ref-page .logo img{ width:100%; max-width:200px; height:auto; display:block; margin:0 auto 22px; }
#ref-page .nav{ display:flex; flex-direction:column; gap:3px; }
#ref-page .nav a{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px;
  color:var(--muted); font-weight:600; font-size:13.5px; }
#ref-page .nav a:hover{ background:rgba(157,78,221,.12); color:var(--text); }
#ref-page .nav a.on{ background:rgba(157,78,221,.20); color:var(--text); box-shadow:inset 0 0 0 1px var(--line2); }
#ref-page .nav svg{ width:18px; height:18px; flex:none; }

#ref-page .main{ padding:26px 30px 60px; max-width:1100px; }
#ref-page h1{ margin:0 0 6px; font-size:31px; letter-spacing:-.4px; }
#ref-page .sub{ margin:0 0 22px; color:var(--muted); font-size:14px; }

/* ── link ── */
#ref-page .linkbox{ background:linear-gradient(120deg,rgba(74,222,128,.10),rgba(157,78,221,.12));
  border:1px solid var(--line2); border-radius:14px; padding:16px 20px; margin-bottom:20px; }
#ref-page .linkbox .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted2); margin-bottom:8px; }
#ref-page .linkrow{ display:flex; gap:10px; flex-wrap:wrap; }
#ref-page .linkrow input{ flex:1; min-width:240px; background:#0d0718; border:1.5px solid var(--line);
  border-radius:9px; padding:11px 14px; color:var(--text); font:inherit; font-size:14px; }
#ref-page .btn{ background:#3f2d63; border:1px solid var(--line2); color:#fff; border-radius:9px;
  padding:11px 20px; cursor:pointer; font:inherit; font-weight:700; font-size:13.5px; white-space:nowrap; }
#ref-page .btn:hover{ background:#4d3878; }
#ref-page .btn.ok{ background:#2f6b45; border-color:rgba(74,222,128,.5); }

/* ── números ── */
#ref-page .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; margin-bottom:22px; }
#ref-page .stat{ background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:14px 18px; }
#ref-page .stat .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted2); }
#ref-page .stat .v{ font-size:25px; font-weight:800; margin-top:3px; }
#ref-page .stat .v.gold{ color:var(--gold); }
#ref-page .stat .x{ font-size:11.5px; color:var(--muted2); }

/* ── lista ── */
#ref-page .panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
#ref-page .panel .head{ padding:14px 20px; border-bottom:1px solid var(--line); background:var(--panel2);
  font-size:15px; font-weight:700; }
#ref-page .row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:14px; align-items:center;
  padding:13px 20px; border-bottom:1px solid rgba(157,78,221,.10); }
#ref-page .row:last-child{ border-bottom:none; }
#ref-page .row .nm{ font-weight:700; }
#ref-page .row .lv{ font-size:11.5px; color:var(--muted2); }
#ref-page .dots{ display:flex; gap:4px; }
#ref-page .dot{ width:11px; height:11px; border-radius:50%; background:rgba(255,255,255,.10); }
#ref-page .dot.on{ background:var(--green); box-shadow:0 0 6px rgba(74,222,128,.5); }
#ref-page .row .val{ text-align:right; font-weight:800; color:var(--gold); font-variant-numeric:tabular-nums; }
#ref-page .tag{ font-size:11px; padding:3px 9px; border-radius:999px; background:rgba(157,78,221,.16);
  border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
#ref-page .tag.liga{ background:rgba(240,180,41,.16); border-color:rgba(240,180,41,.45); color:#ffd97a; }
#ref-page .vazio{ padding:34px 22px; text-align:center; color:var(--muted); font-size:13.5px; line-height:1.8; }

#ref-page .como{ margin-top:20px; background:var(--panel); border:1px solid var(--line);
  border-radius:13px; padding:16px 20px; font-size:13.5px; line-height:1.9; color:var(--muted); }
#ref-page .como b{ color:var(--text); }
#ref-page .termos{ margin-top:14px; font-size:11.5px; color:var(--muted2); line-height:1.75; }

@media (max-width:900px){
  #ref-page .shell{ grid-template-columns:1fr; }
  #ref-page .side{ border-right:none; border-bottom:1px solid var(--line); }
  #ref-page .nav{ flex-direction:row; flex-wrap:wrap; }
  #ref-page .main{ padding:20px 16px 50px; }
  #ref-page .row{ grid-template-columns:minmax(0,1fr) auto; }
}