/* ============================================================================
   dashboard.css — shell do launcher (sidebar + topbar + cards), escopado em
   #dashboard-screen. Compartilhado por index.html (dashboard) e pacotes.html
   (loja), pra que as duas páginas tenham EXATAMENTE o mesmo visual.
   Extraído do <style> inline do index.html.
   ============================================================================ */
/* ============ DASHBOARD (launcher) — réplica de dashboard.png, escopado em #dashboard-screen ============ */
#dashboard-screen{ position:fixed; inset:0; z-index:55; display:none; overflow:hidden;
  --bg:#eaf7ff; --bg2:#dcf3ed; --panel:#f7fcff; --panel2:#edf9fb; --card:#fff;
  --line:rgba(43,102,129,.16); --line2:rgba(43,102,129,.28); --red:#3b82d0; --red2:#35b779;
  --text:#17324d; --muted:#5e7485; --muted2:#7a91a0; --gold:#f0b429; --green:#35b779; --blue:#3b82d0; --ruby:#e64463; --purple:#a855f7;
  font:14px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
#dashboard-screen.show{ display:block; }
#dashboard-screen *{ box-sizing:border-box; }
#dashboard-screen img{ display:block; } #dashboard-screen a{ color:inherit; text-decoration:none; }
#dashboard-screen .pix{ image-rendering:pixelated; }
#dashboard-screen ::-webkit-scrollbar{ width:9px; height:9px; } #dashboard-screen ::-webkit-scrollbar-thumb{ background:#26272e; border-radius:9px; }
#dashboard-screen .app{ display:grid; grid-template-columns:208px minmax(0,1fr) 372px; grid-template-rows:72px 1fr; height:100vh; }
#dashboard-screen .sidebar{ grid-row:1/3; grid-column:1; background:var(--bg2); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 14px 14px; overflow-y:auto; }
#dashboard-screen .sb-logo{ width:150px; margin:4px auto 18px; } #dashboard-screen .sb-logo img{ width:100%; }
#dashboard-screen .nav{ display:flex; flex-direction:column; gap:3px; }
#dashboard-screen .nav a{ display:flex; align-items:center; gap:12px; padding:10px 13px; border-radius:9px; color:#a7a5ad; font-weight:500; font-size:13.5px; transition:.12s; cursor:pointer; }
#dashboard-screen .nav a svg{ width:18px; height:18px; flex:none; opacity:.85; }
#dashboard-screen .nav a:hover{ background:rgba(255,255,255,.04); color:#fff; }
#dashboard-screen .nav a.on{ background:linear-gradient(135deg,#3b82d0,#35b779); color:#fff; box-shadow:0 6px 16px -4px rgba(35,135,164,.55); }
#dashboard-screen .nav a.on svg{ opacity:1; }
#dashboard-screen .sb-event{ margin-top:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
#dashboard-screen .sb-event .pic{ height:100px; background:#0a0a0c 60% 28%/170% no-repeat; position:relative; }
#dashboard-screen .sb-event .pic::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,var(--card),transparent 70%); }
#dashboard-screen .sb-event .bd{ padding:12px 14px 14px; }
#dashboard-screen .sb-event .tag{ font-size:11px; color:var(--muted); margin-bottom:3px; }
#dashboard-screen .sb-event h4{ font-size:14px; font-weight:800; margin-bottom:6px; white-space:nowrap; }
#dashboard-screen .sb-event .tm{ font-size:11px; color:var(--muted); margin-bottom:12px; } #dashboard-screen .sb-event .tm b{ color:#ff7a4d; }
#dashboard-screen .sb-event .btn{ display:block; text-align:center; padding:9px; border:1px solid rgba(255,255,255,.16); border-radius:9px; font-size:12px; font-weight:800; letter-spacing:.05em; color:#dcd9da; }
#dashboard-screen .sb-event .btn:hover{ border-color:var(--red); color:#fff; background:rgba(226,58,47,.08); }
#dashboard-screen .sb-social{ display:flex; justify-content:center; gap:18px; margin-top:16px; } #dashboard-screen .sb-social a svg{ width:20px; height:20px; }
#dashboard-screen .topbar{ grid-column:2/4; grid-row:1; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:var(--bg); border-bottom:1px solid var(--line); }
#dashboard-screen .welcome{ display:flex; align-items:center; gap:14px; }
#dashboard-screen .av{ width:46px; height:46px; border-radius:50%; border:2px solid var(--red); background:#1d1e24 center/120% no-repeat; flex:none; overflow:hidden; }
#dashboard-screen .av img{ width:100%; height:100%; object-fit:cover; object-position:center 18%; }
#dashboard-screen .welcome .t1{ font-size:12.5px; color:var(--muted); } #dashboard-screen .welcome .t2{ font-size:21px; font-weight:800; line-height:1.1; margin-top:1px; }
#dashboard-screen .tb-right{ display:flex; align-items:center; gap:11px; }
#dashboard-screen .cur{ display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:11px; padding:8px 14px 8px 11px; font-size:13.5px; font-weight:700; color:#ded; white-space:nowrap; }
#dashboard-screen .cur .gem{ width:18px; height:18px; flex:none; }
#dashboard-screen .iconbtn{ position:relative; width:40px; height:40px; display:grid; place-items:center; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:11px; color:#bdbcc2; cursor:pointer; }
#dashboard-screen .iconbtn:hover{ color:#fff; border-color:var(--line2); } #dashboard-screen .iconbtn svg{ width:18px; height:18px; }
#dashboard-screen .content{ grid-column:2; grid-row:2; overflow-y:auto; padding:20px 24px 28px; }
#dashboard-screen .section-h{ display:flex; align-items:center; justify-content:space-between; margin:0 2px 13px; }
#dashboard-screen .section-h h3{ font-size:16px; font-weight:800; } #dashboard-screen .section-h a{ font-size:12.5px; color:var(--red2); font-weight:600; }
#dashboard-screen .hero{ position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--line); min-height:314px; display:flex; flex-direction:column; justify-content:flex-end; padding:22px 26px; }
#dashboard-screen .hero .bg{ position:absolute; inset:0; background:#bfeafa url('/assets/brand/ultimate-poke-idle/dashboard-hero-eeveelutions-user.webp') center 62%/cover no-repeat; z-index:0; }
#dashboard-screen .hero .sc{ position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(10,8,12,.92) 0%,rgba(10,8,12,.7) 38%,rgba(10,8,12,.15) 68%,transparent 100%),linear-gradient(0deg,rgba(8,6,10,.85),transparent 60%); }
#dashboard-screen .hero>*{ position:relative; z-index:2; }
#dashboard-screen .rank{ position:absolute; top:20px; left:26px; z-index:2; }
#dashboard-screen .rank .l1{ font-size:11px; color:#cfc7cf; opacity:.8; }
#dashboard-screen .rank .l2{ display:flex; align-items:center; gap:6px; font-size:14px; font-weight:800; color:#cfe0ff; } #dashboard-screen .rank .l2 svg{ width:14px; height:14px; color:#7fb4ff; }
#dashboard-screen .hero h1{ font-size:34px; font-weight:900; margin-bottom:8px; text-shadow:0 3px 14px rgba(0,0,0,.6); }
#dashboard-screen .hero p{ font-size:13.5px; color:#cbc7cc; } #dashboard-screen .hero p b{ color:#ff6a4d; } #dashboard-screen .hero .sub2{ color:#9b97a0; margin-bottom:18px; }
#dashboard-screen .hero .actions{ display:flex; align-items:center; gap:18px; margin-top:4px; }
#dashboard-screen .play{ display:flex; align-items:center; gap:12px; background:linear-gradient(135deg,#3b82d0,#35b779); color:#fff; font-size:17px; font-weight:900; letter-spacing:.06em; padding:14px 40px; border:none; border-radius:12px; cursor:pointer; box-shadow:0 12px 28px -6px rgba(35,135,164,.58); }
#dashboard-screen .play:hover{ filter:brightness(1.07); } #dashboard-screen .play:disabled{ opacity:.7; cursor:wait; } #dashboard-screen .play .pb{ width:24px; height:24px; }
#dashboard-screen .srv{ font-size:12.5px; color:var(--muted); } #dashboard-screen .srv b{ color:#cdc9cf; } #dashboard-screen .srv .on{ color:var(--green); }
#dashboard-screen .team-wrap{ margin-top:24px; }
#dashboard-screen .team{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
#dashboard-screen .mon{ background:var(--card); border:1px solid var(--line); border-radius:13px; padding:10px; transition:.12s; }
#dashboard-screen .mon:hover{ border-color:var(--line2); transform:translateY(-2px); }
#dashboard-screen .mon .top{ position:relative; height:78px; background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.05),transparent 70%); border-radius:9px; display:grid; place-items:center; margin-bottom:9px; }
#dashboard-screen .mon .top img{ max-height:74px; width:auto; image-rendering:pixelated; }
#dashboard-screen .mon .lv{ position:absolute; top:5px; right:6px; font-size:10px; font-weight:800; color:#e8e6ea; background:rgba(10,10,14,.55); padding:2px 6px; border-radius:6px; }
#dashboard-screen .mon .shiny{ position:absolute; top:4px; left:7px; color:#f4c842; font-size:13px; filter:drop-shadow(0 0 5px rgba(244,200,66,.9)); }
#dashboard-screen .mon .st{ position:absolute; bottom:5px; right:6px; font-size:9px; font-weight:900; letter-spacing:.04em; color:#fff; padding:2px 6px; border-radius:5px; background:#8a4bd8; }
#dashboard-screen .mon .st.ko{ background:#d12b22; } #dashboard-screen .mon .st.psn{ background:#a040a0; } #dashboard-screen .mon .st.brn{ background:#f08030; }
#dashboard-screen .mon .st.par{ background:#c9a80f; } #dashboard-screen .mon .st.slp{ background:#8c8a92; } #dashboard-screen .mon .st.frz{ background:#58a8c8; }
#dashboard-screen .mon.fainted .top img{ filter:grayscale(1) brightness(.6); }
#dashboard-screen .mon.empty .top{ color:#3a3b42; } #dashboard-screen .mon.empty .nm{ color:var(--muted2); }
#dashboard-screen .mon .nmrow{ display:flex; align-items:center; justify-content:space-between; gap:5px; margin-bottom:6px; }
#dashboard-screen .mon .nm{ font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dashboard-screen .mon .gd{ font-size:12px; font-weight:900; flex:none; } #dashboard-screen .mon .gd.m{ color:#6da2f0; } #dashboard-screen .mon .gd.f{ color:#f87ba8; }
#dashboard-screen .mon .typs{ display:flex; gap:4px; margin-bottom:8px; min-height:16px; }
#dashboard-screen .typ{ font-size:9px; font-weight:800; letter-spacing:.05em; color:#fff; padding:2.5px 7px; border-radius:6px; text-shadow:0 1px 2px rgba(0,0,0,.4); }
#dashboard-screen .mon .lab{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--muted); margin-bottom:3px; } #dashboard-screen .mon .lab b{ color:#cfcdd2; font-weight:600; }
#dashboard-screen .bar{ height:5px; border-radius:4px; background:#2a2b31; overflow:hidden; margin-bottom:8px; } #dashboard-screen .bar i{ display:block; height:100%; border-radius:4px; }
#dashboard-screen .bar.hp i{ background:linear-gradient(90deg,#37c46b,#5ee08c); } #dashboard-screen .bar.exp i{ background:linear-gradient(90deg,#e0a52a,#f4c842); } #dashboard-screen .mon .bar:last-child{ margin-bottom:0; }
#dashboard-screen .cols{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
#dashboard-screen .panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
#dashboard-screen #dsh-news{ max-height:352px; overflow-y:auto; padding-right:2px; }
#dashboard-screen .news{ display:flex; gap:13px; padding:12px 0; border-bottom:1px solid var(--line); } #dashboard-screen .news:last-of-type{ border-bottom:none; }
#dashboard-screen .news .ic{ width:42px; height:42px; border-radius:10px; background:#101116; border:1px solid var(--line); display:grid; place-items:center; flex:none; overflow:hidden; } #dashboard-screen .news .ic img{ width:34px; height:34px; image-rendering:pixelated; object-fit:contain; }
#dashboard-screen .news .ic.r{ box-shadow:inset 0 0 0 1px rgba(226,58,47,.3); } #dashboard-screen .news h5{ font-size:13.5px; font-weight:700; margin-bottom:2px; } #dashboard-screen .news p{ font-size:12px; color:var(--muted); }
#dashboard-screen .news .hrow{ display:flex; align-items:center; gap:7px; }
#dashboard-screen .news .dt{ font-size:10.5px; color:var(--muted2); flex:none; margin-left:auto; }
#dashboard-screen .news .nv{ flex:none; font-size:9px; font-weight:900; letter-spacing:.06em; color:#fff; background:linear-gradient(180deg,#ec4234,#c8231d); padding:2px 6px; border-radius:5px; }
#dashboard-screen .badges-next{ font-size:11px; color:var(--muted); text-align:center; margin-bottom:8px; } #dashboard-screen .badges-next b{ color:#f4c842; font-weight:700; }
#dashboard-screen .act{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); } #dashboard-screen .act:last-of-type{ border-bottom:none; }
#dashboard-screen .act .ic{ width:34px; height:34px; border-radius:50%; background:#101116; border:1px solid var(--line); display:grid; place-items:center; flex:none; overflow:hidden; } #dashboard-screen .act .ic img{ width:30px; height:30px; }
#dashboard-screen .act p{ font-size:12.5px; color:#cbc9ce; } #dashboard-screen .act p b{ color:#fff; }
#dashboard-screen .rightcol{ grid-column:3; grid-row:2; overflow-y:auto; padding:20px 22px 28px; border-left:1px solid var(--line); background:var(--panel); display:flex; flex-direction:column; gap:18px; }
#dashboard-screen .block h3{ font-size:15px; font-weight:800; margin-bottom:12px; }
#dashboard-screen .block .head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } #dashboard-screen .block .head h3{ margin:0; }
#dashboard-screen .pcard{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; }
#dashboard-screen .pcard .row1{ display:flex; align-items:center; gap:13px; margin-bottom:13px; }
#dashboard-screen .pcard .av2{ width:54px; height:54px; border-radius:12px; border:2px solid var(--red); overflow:hidden; background:#1d1e24; flex:none; } #dashboard-screen .pcard .av2 img{ width:100%; height:100%; object-fit:cover; object-position:center 16%; }
#dashboard-screen .pcard .nm{ font-size:16px; font-weight:800; } #dashboard-screen .pcard .lv{ font-size:11.5px; color:var(--muted); margin:1px 0 6px; }
#dashboard-screen .xpbar{ height:7px; border-radius:5px; background:#2a2b31; overflow:hidden; } #dashboard-screen .xpbar i{ display:block; height:100%; background:linear-gradient(90deg,#e0a52a,#f4c842); border-radius:5px; }
#dashboard-screen .badges-row{ display:flex; gap:5px; justify-content:space-between; margin:14px 0 4px; }
#dashboard-screen .badges-row .bdg{ flex:1; height:32px; display:grid; place-items:center; }
#dashboard-screen .badges-row .bdg img{ width:30px; height:30px; object-fit:contain; image-rendering:auto; transition:.15s; }
#dashboard-screen .badges-row .bdg.off img{ filter:grayscale(1) brightness(.45); opacity:.4; }
#dashboard-screen .badges-row .bdg.on img{ filter:drop-shadow(0 2px 7px rgba(240,180,41,.55)); }
#dashboard-screen .badges-cap{ font-size:10.5px; color:var(--muted); text-align:center; margin-bottom:8px; }
#dashboard-screen .pstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; margin-top:13px; }
#dashboard-screen .pstats .s{ background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:10px; padding:9px 4px; }
#dashboard-screen .pstats .s .k{ font-size:10.5px; color:var(--muted); margin-bottom:3px; } #dashboard-screen .pstats .s .v{ font-size:15px; font-weight:800; }
#dashboard-screen .pstats .s.g .v{ color:var(--gold); } #dashboard-screen .pstats .s.b .v{ color:var(--blue); }
#dashboard-screen .block .erow{ display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line); } #dashboard-screen .block .erow:last-child{ border-bottom:none; }
#dashboard-screen .erow .ic{ width:40px; height:40px; border-radius:10px; background:#101116; border:1px solid var(--line); display:grid; place-items:center; flex:none; overflow:hidden; } #dashboard-screen .erow .ic img{ width:34px; height:34px; }
#dashboard-screen .erow .nm{ font-size:13px; font-weight:700; } #dashboard-screen .erow .tm{ font-size:11px; color:var(--muted); } #dashboard-screen .erow .tm b{ color:#ff7a4d; }
/* Rankings (Top Insígnias / Top Shinies) */
#dashboard-screen .rkl{ display:flex; flex-direction:column; gap:6px; }
#dashboard-screen .rk-empty{ font-size:12px; color:var(--muted); padding:8px 2px; }
#dashboard-screen .rk{ display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:7px 12px 7px 9px; }
#dashboard-screen .rk.top1{ border-color:rgba(240,180,41,.55); background:linear-gradient(90deg,rgba(240,180,41,.10),var(--card) 70%); }
#dashboard-screen .rk .pos{ width:26px; flex:none; text-align:center; font-size:15px; font-weight:800; color:var(--muted); }
#dashboard-screen .rk.top1 .pos, #dashboard-screen .rk.top2 .pos, #dashboard-screen .rk.top3 .pos{ font-size:17px; }
#dashboard-screen .rk .nm{ flex:1; min-width:0; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dashboard-screen .rk .sprs{ display:flex; gap:2px; flex:none; } #dashboard-screen .rk .sprs img{ width:26px; height:26px; object-fit:contain; image-rendering:pixelated; }
#dashboard-screen .rk .val{ flex:none; font-size:12.5px; font-weight:800; color:var(--gold); }
#dashboard-screen .rk .val.sh{ color:#7fd4ff; }
#dashboard-screen .morelink{ display:block; text-align:center; color:var(--red2); font-size:12.5px; font-weight:600; padding-top:13px; }
@media(max-width:1180px){ #dashboard-screen .app{ grid-template-columns:208px 1fr; } #dashboard-screen .topbar{ grid-column:2/3; } #dashboard-screen .rightcol{ display:none; } }
/* Hambúrguer: só aparece no mobile; backdrop do drawer */
#dashboard-screen .iconbtn.burger{ display:none; }
#dashboard-screen .nav-backdrop{ display:none; position:fixed; inset:0; z-index:75; background:rgba(5,4,8,.62); backdrop-filter:blur(2px); }
/* ===== CELULAR: dashboard vira UMA coluna limpa e rolável (perfil/insígnias incluídos) ===== */
@media(max-width:760px){
  #dashboard-screen{ overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #dashboard-screen .app{ display:block; height:auto; min-height:100%; }
  /* sidebar vira DRAWER (menu hambúrguer): desliza da esquerda sobre um backdrop */
  #dashboard-screen .sidebar{ position:fixed; top:0; left:0; bottom:0; width:264px; z-index:80;
    transform:translateX(-108%); transition:transform .25s ease; box-shadow:26px 0 60px rgba(0,0,0,.55); }
  #dashboard-screen.nav-open .sidebar{ transform:translateX(0); }
  #dashboard-screen.nav-open .nav-backdrop{ display:block; }
  #dashboard-screen .iconbtn.burger{ display:grid; width:38px; height:38px; flex:none; }
  /* topbar compacta e fixa */
  #dashboard-screen .topbar{ position:sticky; top:0; z-index:10; height:auto; padding:11px 14px; gap:10px; background:var(--bg2); border-bottom:1px solid var(--line); }
  #dashboard-screen .av{ width:38px; height:38px; }
  #dashboard-screen .welcome{ gap:10px; min-width:0; } #dashboard-screen .welcome .t1{ font-size:11px; } #dashboard-screen .welcome .t2{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw; }
  #dashboard-screen .tb-right{ gap:7px; }
  #dashboard-screen .cur{ font-size:12px; padding:6px 9px; }
  #dashboard-screen .tb-right .cur:nth-of-type(2){ display:none; }   /* insígnias já aparecem no card de perfil */
  /* conteúdo */
  #dashboard-screen .content{ padding:14px; }
  #dashboard-screen .hero{ min-height:0; padding:16px; border-radius:14px; }
  #dashboard-screen .hero h1{ font-size:23px; margin-bottom:6px; } #dashboard-screen .hero p{ font-size:12.5px; } #dashboard-screen .hero .sub2{ margin-bottom:14px; }
  #dashboard-screen .rank{ position:static; margin-bottom:10px; }
  #dashboard-screen .hero .actions{ flex-direction:column; align-items:stretch; gap:11px; }
  #dashboard-screen .play{ width:100%; justify-content:center; padding:15px; font-size:18px; }
  #dashboard-screen .srv{ text-align:center; }
  #dashboard-screen .team-wrap{ margin-top:20px; }
  #dashboard-screen .team{ grid-template-columns:repeat(3,1fr); gap:8px; }
  #dashboard-screen .mon{ padding:8px; } #dashboard-screen .mon .top{ height:58px; margin-bottom:7px; } #dashboard-screen .mon .top img{ max-height:54px; } #dashboard-screen .mon .nm{ font-size:11px; }
  #dashboard-screen .typ{ font-size:8px; padding:2px 5px; } #dashboard-screen .mon .lv{ font-size:9px; padding:1px 4px; }
  #dashboard-screen #dsh-news{ max-height:300px; }
  #dashboard-screen .cols{ grid-template-columns:1fr; gap:14px; margin-top:20px; }
  /* MOSTRA o perfil + 8 insígnias + acesso rápido (estava escondido) — empilhado no fim */
  #dashboard-screen .rightcol{ display:flex; gap:16px; border-left:none; border-top:1px solid var(--line); padding:18px 14px 30px; }
}
@media(max-width:380px){ #dashboard-screen .team{ grid-template-columns:repeat(2,1fr); } }