/* Visual 2.0 (17/10, Higor: «tá tudo muito amador... que bagulho feio»).
   Camada por cima do CSS antigo: troca a base (cores, fonte, cantos, botões) e arruma
   o layout do computador. Nada de função depende daqui: tirar este arquivo volta ao visual antigo.
   Regras: vermelho = marca e ação principal; azul só em botão que abre o Telegram;
   texto em caixa normal (nada de letra de terminal em maiúscula); cartões com canto arredondado. */

:root{
  --felt-0:#09090C; --felt-1:#0D0D11; --surface:#121217; --raised:#17171E; --raised-2:#1E1E27;
  --line:rgba(255,255,255,.085); --line-soft:rgba(255,255,255,.055);
  --text:#F4F4F6; --muted:#A6A6B2; --dim:#74747F;
  --gold:#EF2D45; --jade:#2FD07F; --amber:#F5C518; --red:#EF2D45; --orange:#EF2D45;
  --display:"Inter","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"Inter","Helvetica Neue",Arial,sans-serif;
  --r:16px; --r-sm:12px; --r-xs:10px;
  --card:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,0) 60%),var(--surface);
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -12px rgba(0,0,0,.6);
  --brand-grad:linear-gradient(180deg,#F5455B,#DD1F38);
}
body{font-size:15px;line-height:1.55;letter-spacing:-.006em;font-feature-settings:"cv11","ss01";
  background:radial-gradient(1200px 600px at 70% -200px,rgba(239,45,69,.07),transparent 70%),var(--felt-0);
  background-attachment:fixed}
h1,h2,h3,h4{letter-spacing:-.022em;font-stretch:100%!important}
h1,.binfo b,.promo .pt b{font-stretch:100%}
b,strong{font-weight:600}
::selection{background:rgba(239,45,69,.35)}
/* números alinhados em toda parte (antes era a fonte mono que fazia isso) */
.xp-chip,.mi .mp,.pr .pc,.mov .mn,.lvsaldo b,.lvfoot,.rung .amt,.kpi .v,.prow .cv,.control input,.pricebox .pv,
.srtnum b,.sxnum b,.ckracha b,.akpi b,.ldnum{font-variant-numeric:tabular-nums}

/* ---------- rótulos: sem letra de terminal ---------- */
.eyebrow,.chip,.panel-head h2,.seg button,.toast,.afield > span,.field label,.kpi .k,.prow .ck,.row-title h2,
.ckeye,.sxeye,.lvtxt small,.lvsaldo small,.bienv .btit small,.promo .pgo,.botcard .cap .n,.botcard .go,
.pricebox .pl,.fichas .lb,.rung .vname,.prow .rn,.seemore,.roles button,.bd-mtit,.vidlbl,.rsptxt small,
.lvupcard small,.fbm .fbr small,.demobar,.asub,.admbadge,.sinimg,.rlsub,.rlres small,.sxres small,.fsfichas small,
.brand-sub,.protobar strong,.langsw button,.bd-art .vidlbl,.btn{text-transform:none;letter-spacing:0}
.eyebrow{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
.brand-sub{font-size:11.5px;font-weight:500;color:var(--dim)}

/* ---------- botões ---------- */
.btn{min-height:46px;padding:11px 18px;border-radius:var(--r-sm);font-family:var(--body);font-weight:600;font-size:14.5px;
  transition:background .15s,transform .1s,box-shadow .15s,border-color .15s,filter .15s}
body .btn:not(.ghost):not(.danger),body .bienv .bplay{background:var(--brand-grad);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 22px -10px rgba(239,45,69,.7)}
body .btn:not(.ghost):not(.danger):hover{background:var(--brand-grad);filter:brightness(1.08)}
body .btn.tg:not(.ghost):not(.danger){background:linear-gradient(180deg,#34AEE6,#1E93CC);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 8px 22px -10px rgba(34,158,217,.7)}
.btn.ghost{border-color:var(--line);background:rgba(255,255,255,.03)}
.btn.ghost:hover{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.btn.danger{border-radius:var(--r-sm)}
.btn.big{min-height:52px;font-size:15.5px}
.btn[disabled]{filter:grayscale(.4)}
.pr .pb{border-radius:10px;font-size:13px}

/* ---------- chips: pílulas ---------- */
.chip{border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;font-family:var(--body)}

/* ---------- cartões ---------- */
.ckcard,.lvcard,.promo,.bienv,.botrow,.sxcard,.sxres,.rspcard,.fbo,.fbm,.fbrev,.sup,.nmform,.lvupcard,.fbcard,.login,
.note,.upload,.fba,.srt,.srlbox,.nmok,.vmplayer,.imgprev,.bd-art{border-radius:var(--r)}
.ckcard,.lvcard,.promo,.sxres,.fbo,.fbrev,.sup,.fbm,.botrow{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.note{border-radius:var(--r-sm)}
.bienv{overflow:hidden;border-color:var(--line)}
.bienv .bplay{border-radius:999px;width:62px;height:62px}
.bd-art .play span{border-radius:999px}
.vmclose,.lclose{border-radius:var(--r-xs)}
.lvupcard,.fbcard{border-radius:20px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.toast{border-radius:999px;font-family:var(--body);font-weight:600;font-size:13.5px;padding:12px 18px;
  background:#F4F4F6;color:#111}
.toast svg path{stroke:#111}

/* ---------- campos ---------- */
.afield input,.afield textarea,.afield select,.control,.fbcard textarea,.fba textarea,.idadd input,.rsarow select,.rsarow input{
  border-radius:var(--r-xs);background:#0B0B0F;border-color:var(--line)}
.afield > span,.field label{font-size:13px;font-weight:500;color:var(--muted)}
.afield input:focus,.afield textarea:focus,.afield select:focus,.control:focus-within{border-color:rgba(239,45,69,.6);
  box-shadow:0 0 0 3px rgba(239,45,69,.15)}
.check .bx{border-radius:7px}
.upload{border-radius:var(--r-sm)}

/* ---------- barra do topo e menu de baixo (celular) ---------- */
.appbar{background:rgba(9,9,12,.82);border-bottom-color:var(--line-soft)}
.brand-mark{border-radius:9px}
.avatar{border-radius:999px;background:var(--raised-2)}
.xp-chip{border-radius:999px;font-family:var(--body);font-size:13px;background:rgba(239,45,69,.08)}
.tabbar{background:rgba(11,11,14,.9);border-top-color:var(--line-soft)}
.tabbar button{font-weight:500}
.tabbar button[aria-current="true"]::before{width:22px;height:3px;border-radius:0 0 3px 3px}

/* ---------- cabeçalhos de página ---------- */
.page-head h1{font-weight:700}
.hello h1{font-size:28px}
.row-title h2{font-size:17px;font-weight:650;color:var(--text);letter-spacing:-.01em}
.panel-head h2{font-size:17px;font-weight:650;color:var(--text);letter-spacing:-.01em}

/* ---------- sala do membro: painéis viram cartões ---------- */
.section:not(.adm) .pad > .panel,.section:not(.adm) > .panel{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 18px 8px;margin-top:14px;box-shadow:var(--shadow)}
.section:not(.adm) .pad > .panel:first-child{padding-top:18px}
.seg{border-bottom:none;gap:6px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;
  width:max-content;max-width:calc(100% - 2 * var(--gut))}
.seg button{border:none;border-radius:999px;padding:8px 14px;font-family:var(--body);font-size:13.5px;font-weight:500}
.seg button[aria-current="true"]{background:var(--raised-2);color:var(--text);border:none}

/* ---------- produtos: grade de cartões ---------- */
.botlist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.botrow{padding:0;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.botrow:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.16)}
.botrow.activo{border-color:rgba(47,208,127,.35)}
.botrow .bthumb{border-radius:0;background:#000}
.botrow .bthumb img{transition:transform .35s}
.botrow:hover .bthumb img{transform:scale(1.04)}
.botrow .binfo{padding:12px 14px 14px}
.botrow .binfo b{font-size:15px;font-weight:650}
.promo{padding:12px 14px}
.promo img,.casalogo{border-radius:12px}
.promo .pgo{font-size:13.5px;font-weight:600}

/* ---------- check-in ---------- */
.ckd{border-radius:10px;font-family:var(--body);font-weight:600}
.cktop{align-items:center}
.ckeye{font-size:14px;font-weight:600;color:var(--text)}
.ckcard.hecho .ckeye{color:var(--jade)}

/* ---------- Club ---------- */
.lvcard{padding:18px}
.lvtxt small{font-size:12.5px;font-weight:500}
.lvsaldo small{font-size:12px}
.lvsaldo b{font-size:26px;font-weight:700}
.lvbar{height:10px;border-radius:99px}
.lvbar i{border-radius:99px;background:linear-gradient(90deg,#DD1F38,#F5455B)}
.lvfoot{font-size:12.5px}
.mi .mh{padding:14px 2px}
.mi .mp{font-size:14px;font-weight:700;padding:4px 10px;border-radius:999px;color:var(--text);background:var(--raised-2)}
.mi.hecha .mp{color:var(--jade);background:rgba(47,208,127,.12)}
.mi:last-child,.pr:last-child,.mov:last-child{border-bottom:none}
.mimas{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:6px 0 10px;padding:11px;
  border-radius:var(--r-sm);border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font-weight:600;font-size:14px}
.mimas:hover{background:rgba(255,255,255,.06)}
.prz{border-radius:12px}
.pr .pc{font-weight:700;color:var(--text)}
.cupon{border-radius:8px}
.rspcard{border-radius:var(--r)}
.rspart{border-radius:14px}

/* ---------- sorteio ao vivo / feedback ---------- */
.sxcard{border-radius:var(--r);overflow:hidden}
.sxeye{font-size:12.5px;font-weight:600}
.sxyo{border-radius:var(--r-sm)}
.fbo .fbi,.fbm .fbr{border-radius:10px}
.fbcats button,.fbfil button,.fbtags span{border-radius:999px}
.stp .sn{border-radius:8px;font-family:var(--body);font-weight:700}
.bon .bi,.sup .si,.lockbox .lockic,.acct .av{border-radius:12px}
.bon{border-bottom-color:var(--line-soft)}
.redes a{border-radius:var(--r-sm);background:rgba(255,255,255,.03)}

/* ---------- login ---------- */
.overlay{background:radial-gradient(800px 500px at 50% 0,rgba(239,45,69,.12),transparent 70%),rgba(6,6,9,.97)}
.login{background:var(--card);box-shadow:0 30px 80px -20px rgba(0,0,0,.8)}
.roles button{border-radius:var(--r-sm)}

/* ---------- faixa do «ver como» / demo ---------- */
.demobar{font-family:var(--body);font-size:13.5px;font-weight:600}
.demobar .btn{border-radius:10px}

/* ================= COMPUTADOR ================= */
@media (min-width:1000px){
  .side{background:rgba(13,13,17,.85);border-right-color:var(--line-soft);padding:22px 14px}
  .nav-label{font-family:var(--body);font-size:11.5px;letter-spacing:.06em;font-weight:600}
  .nav-group button{border-radius:var(--r-xs);font-size:14.5px;padding:10px 12px}
  .nav-group button[aria-current="true"]{background:rgba(239,45,69,.12);box-shadow:none;color:#fff}
  .nav-group button[aria-current="true"] svg{color:var(--gold)}
  .who{border-top-color:var(--line-soft)}
  /* conteúdo centrado e mais largo (antes ficava grudado à esquerda com metade da tela vazia) */
  .main{max-width:1180px;width:100%;margin:0 auto}
  .botlist{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
  .hello h1{font-size:34px}

  /* início em duas colunas: vídeo à esquerda, check-in e comunidade à direita */
  .section[data-sec="bots"].on{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:20px;
    grid-template-areas:"head head" "extra extra" "video check" "video comu" "video casa" "rt rt" "bots bots" "foot foot";
    align-content:start;padding:0 var(--gut)}
  .section[data-sec="bots"].on > *{padding-left:0;padding-right:0;min-width:0}
  .section[data-sec="bots"] > .page-head{grid-area:head}
  .section[data-sec="bots"] > .pad:has(#extraCard){grid-area:extra}
  .section[data-sec="bots"] > .pad:has(#checkinCard){grid-area:check;align-self:start}
  .section[data-sec="bots"] > .pad:has(#bienvenidaCard){grid-area:video;align-self:start}
  .section[data-sec="bots"] > .pad:has(#comunidadCard){grid-area:comu;align-self:start}
  .section[data-sec="bots"] > .pad:has(#casaCard){grid-area:casa;align-self:start}
  .section[data-sec="bots"] > .row-title{grid-area:rt;margin-top:34px}
  .section[data-sec="bots"] > .botlist{grid-area:bots}
  .section[data-sec="bots"] > .foot-note{grid-area:foot}
  .section[data-sec="bots"] .ckcard{margin-top:14px}

  /* Club: nível + check-in + raspadinha lado a lado; missões e prêmios lado a lado */
  .section[data-sec="club"].on{padding-top:18px}
  .section[data-sec="club"] > .pad:first-child{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
  .section[data-sec="club"] > .pad:first-child > .lvcard{grid-column:1 / -1}
  .section[data-sec="club"] > .pad:first-child > #extraClub{grid-column:1 / -1}
  .section[data-sec="club"] > .pad:first-child > #extraClub:empty,
  .section[data-sec="club"] > .pad:first-child > #checkinClub:empty,
  .section[data-sec="club"] > .pad:first-child > #clRaspa:empty{display:none}
  .section[data-sec="club"] #clRaspa .rspcard{margin:14px 0 0}
  .section[data-sec="club"] > .pad:nth-child(2){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;align-items:start}
  .section[data-sec="club"] > .pad:nth-child(2) > .panel{margin-top:16px}
  .section[data-sec="club"] > .pad:nth-child(2) > .panel:first-child{grid-row:span 3}

  /* admin: o menu da sala vira só ícones (antes eram dois menus laterais lado a lado) */
  body.em-adm .shell{grid-template-columns:72px 1fr}
  body.em-adm .side{padding:18px 10px;align-items:center}
  body.em-adm .side .brand > div:not(.brand-mark),body.em-adm .side .nav-label,
  body.em-adm .side .who > :not(.avatar),body.em-adm .side .who .xp-chip{display:none}
  body.em-adm .side .brand{padding:0!important}
  body.em-adm .side .nav-group{width:100%}
  body.em-adm .side .nav-group button{font-size:0;justify-content:center;padding:12px 0;gap:0}
  body.em-adm .side .nav-group button svg{width:20px;height:20px}
  body.em-adm .side .who{justify-content:center;padding:10px 0 0}
  body.em-adm .main{max-width:none}
}
@media (min-width:1000px) and (max-width:1180px){
  .section[data-sec="club"] > .pad:nth-child(2){grid-template-columns:minmax(0,1fr)}
  .section[data-sec="club"] > .pad:nth-child(2) > .panel:first-child{grid-row:auto}
}
.mi.mi-extra{display:none}
.mi .mh{color:var(--text)}
.mi .mh b{color:var(--text)}
.mi .mh span{color:var(--dim)}
/* admin: listas longas mais compactas (28 missões cabiam em 3 telas) */
.adm .admrow{padding:8px 12px}
.adm .misrow{margin-bottom:4px}
.adm .admrow .at b{font-size:13.5px}
.adm .admrow .at span{font-size:12px}

/* ---------- Paleta única (17/10, Higor: «muitas cores varando») ----------
   Cada cor quer dizer uma coisa só, e tem um tom só:
   vermelho = marca e ação · verde = feito/ativo · amarelo = nível e recompensa · azul = só Telegram.
   Número, preço e etiqueta de tipo não são alerta: ficam em cinza/branco. */
.botrow.activo{border-color:var(--line)}
.rspcard{background:linear-gradient(135deg,color-mix(in srgb,var(--rc) 10%,transparent),transparent 55%),var(--card)}
.sxcard{border-color:rgba(239,45,69,.45);background:linear-gradient(135deg,rgba(239,45,69,.10),transparent 55%),var(--card)}
.sxeye{color:var(--gold)}
.promo .pgo{color:var(--text)}
.promo .pgo.tg{color:#3BB6EC}
.adm .ldav,.adm .eqav{background:var(--raised-2)}