/* Central Brabox v4 — camada visual por cima do estilo.css/central.css.
   A ideia: a arte do Brabox (a cidade à noite, o carro, a lanterna vermelha). Letra condensada reta,
   vermelho só onde é ação ou "agora", rótulos no azul das janelas, cantos suaves, nada pulsando. */

body{font-size:16px; overflow-x:clip}
h1,h2,h3{font-weight:900; letter-spacing:.005em; line-height:.94}
h1{font-size:64px} h2{font-size:42px} h3{font-size:28px}
.rot{display:inline-block; font-family:var(--display); font-weight:800; font-size:15px; line-height:1.2; letter-spacing:.16em; text-transform:uppercase; color:var(--rot)}
.lnk{display:inline-block; background:none; border:0; border-bottom:2px solid currentColor; border-radius:0; padding:0 0 2px; color:var(--text); font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; cursor:pointer}
.lnk:hover{color:var(--brand)}
:root[data-theme="light"]{--card-sombra:0 8px 26px rgba(13,22,38,.07)}
@media (prefers-color-scheme: light){ :root[data-theme="auto"]{--card-sombra:0 8px 26px rgba(13,22,38,.07)} }

/* faixas escuras (topo, capa do início, título das telas): no tema Dia continuam noite */
:root[data-theme="light"] :is(.topbar,.hero-ini,.page-head.arte,.prof-hero .banner){
  --text:#F4F3F5; --muted:#A9BACA; --faint:#6F869C; --rot:#8FD3DC; --trilho:#203B55; --cheio:#F4F3F5;
  --surface:#0E2236; --raised:#0B1D30; --line:rgba(143,211,220,.12); --line-2:#2A4762; --pop:#F4F3F5; --pop-ink:#050F1C; --brand-soft:rgba(255,43,69,.18); --sun:#F2C35B; --sun-soft:rgba(242,195,91,.14);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root[data-theme="auto"] :is(.topbar,.hero-ini,.page-head.arte,.prof-hero .banner){
    --text:#F4F3F5; --muted:#A9BACA; --faint:#6F869C; --rot:#8FD3DC; --trilho:#203B55; --cheio:#F4F3F5;
    --surface:#0E2236; --raised:#0B1D30; --line:rgba(143,211,220,.12); --line-2:#2A4762; --pop:#F4F3F5; --pop-ink:#050F1C; --brand-soft:rgba(255,43,69,.18); --sun:#F2C35B; --sun-soft:rgba(242,195,91,.14);
    color-scheme:dark;
  }
}

/* ---------- etiquetas: "ao vivo" é um traço vermelho, sem bolinha piscando ---------- */
.tag{font-family:var(--display); font-weight:800; font-size:13.5px; letter-spacing:.1em; padding:4px 9px 3px; border-radius:6px}
.tag.live::before,.tag.offline::before,.tag.online::before{width:14px; height:3px; border-radius:2px; animation:none; opacity:1}
.livedot{width:14px; height:3px; border-radius:2px; animation:none}

/* ---------- botões ---------- */
.btn{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:.08em; padding:11px 20px 9px; border-radius:10px}
.btn.sm{font-size:14.5px; padding:7px 14px 6px; border-radius:8px}
.btn.lg{font-size:19px; padding:14px 26px 12px}
.btn.kick{background:var(--brand); color:var(--brand-ink)}
.btn.kick:hover{background:var(--brand-2); border-color:transparent}
.btn.sun,.btn.pop{background:var(--pop); color:var(--pop-ink)}
.btn.ghost{border:1.5px solid var(--line-2)}
.icon-btn{border-radius:10px; border-color:transparent; background:var(--raised)}
.avatar{border-radius:30%}
.avatar img{border-radius:inherit}

/* ---------- topo ---------- */
.topbar{--surface:color-mix(in srgb, var(--hero), #fff 7%); --raised:color-mix(in srgb, var(--hero), #fff 5%);
  background:color-mix(in srgb, var(--hero) 90%, transparent); border-bottom:1px solid rgba(255,255,255,.06); color:var(--text)}
.topbar .wrap{height:70px}
.logo .logo-img{height:40px}
.mainnav{gap:6px; margin-left:18px}
.mainnav button{font-family:var(--display); font-weight:700; font-size:18px; letter-spacing:.05em; padding:9px 10px 6px; border-bottom-width:3px}
.mainnav button[aria-current="page"]{border-bottom-color:var(--brand)}
.coins{background:none; padding:0 4px; font-family:var(--display); font-weight:800; font-size:22px; color:var(--text)}
.coins .sarue{color:var(--sun)}
.mobnav{gap:20px; padding:0 16px; border-top:1px solid rgba(255,255,255,.06)}
.mobnav button{background:none; border:0; border-bottom:3px solid transparent; border-radius:0; padding:11px 0 8px; font-family:var(--display); font-weight:700; font-size:16px; letter-spacing:.05em; color:var(--muted)}
.mobnav button[aria-current="page"]{background:none; color:var(--text); border-color:var(--brand)}
.tema-menu,.busca-menu{border-radius:18px; border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 60px rgba(0,0,0,.45)}

/* ---------- blocos ---------- */
.card{border-radius:var(--r-lg); box-shadow:var(--card-sombra,none)}
.input{background:var(--raised); border-radius:10px}
.sec-head{border-bottom:0; padding-bottom:0}
.sec-head h2{font-size:40px}
.meta-bar{height:12px; border-radius:6px; background:var(--trilho)}
.meta-bar i{background:var(--cheio); border-radius:6px}
.table th{font-family:var(--display); font-weight:800; font-size:14px; letter-spacing:.12em}

/* abas, filtros e seletores: uma "gaveta" com o escolhido em branco */
.tabs{background:var(--raised); border:0; border-radius:12px; padding:4px; gap:4px}
.tabs button{font-family:var(--display); font-weight:800; font-size:16px; letter-spacing:.08em; padding:7px 14px 5px; border-radius:8px}
.tabs button[aria-selected="true"]{background:var(--pop); color:var(--pop-ink)}
.ktabs button{font-weight:900; font-size:28px; border-bottom-width:3px}
.chip,.seg button{font-family:var(--display); font-weight:800; font-size:15.5px; letter-spacing:.08em; padding:8px 16px 6px; border-radius:10px; background:var(--surface); border:1px solid var(--line)}
.chip[aria-pressed="true"],.seg button[aria-pressed="true"]{background:var(--pop); color:var(--pop-ink); border-color:var(--pop)}

/* comando do chat: "!fig CÓDIGO" numa gaveta escura com o Copiar encaixado */
.cmd-chat{background:var(--raised); border-radius:12px; padding:5px; gap:6px; flex-wrap:nowrap}
.cmd-chat code{background:none; border:0; padding:8px 12px 6px; font:800 26px/1.1 var(--display); letter-spacing:.04em}
.cmd-chat code i{color:var(--brand)}
.cmd-chat .btn{background:var(--pop); color:var(--pop-ink); border:0; align-self:stretch}

/* passos (loja, manda): uma linha só, separada por fios, sem caixinhas */
.how,.steps3{gap:0; border-block:1px solid var(--line-2)}
.how .step,.steps3 .step{background:none; border:0; border-radius:0; box-shadow:none; padding:16px 22px; align-items:baseline}
.how .step:first-child,.steps3 .step:first-child{padding-left:0}
.how .step + .step,.steps3 .step + .step{border-left:1px solid var(--line-2)}
.step .n{font-weight:900; font-size:38px; color:var(--brand)}
.step b{color:var(--text)}

/* ---------- título das telas: a cidade da arte entra pela direita ---------- */
.page-head.arte{position:relative; isolation:isolate; margin:0 calc(50% - 50vw); padding:70px calc(50vw - 50%) 34px; min-height:250px; align-items:flex-end; background:var(--hero); color:var(--text); overflow:hidden}
.page-head.arte::before{content:""; position:absolute; inset:0 0 0 30%; z-index:-2; background:url(/arte/cidade.webp) center 38%/cover no-repeat; opacity:.6}
.page-head.arte::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--hero) 32%,color-mix(in srgb,var(--hero) 45%,transparent) 62%,color-mix(in srgb,var(--hero) 20%,transparent)),linear-gradient(0deg,var(--hero) 0,transparent 60%)}
.page-head.arte h1{font-size:100px; line-height:.86; margin-top:8px}
.ph-t{display:grid; justify-items:start}
.page-head.arte + *{margin-top:26px}

/* ---------- início: o Brabox no carro, como na abertura da live ---------- */
.hero-ini{position:relative; isolation:isolate; display:flex; align-items:center; min-height:620px; background:var(--hero); color:var(--text); overflow:hidden}
.hero-ini::before{content:""; position:absolute; inset:0 0 0 34%; z-index:-2; background:url(/arte/brabox.webp) center 30%/cover no-repeat}
.hero-ini::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,var(--hero) 36%,color-mix(in srgb,var(--hero) 60%,transparent) 47%,transparent 62%),linear-gradient(0deg,var(--hero) 0,transparent 32%)}
.hero-ini-txt{width:100%; padding-top:60px; padding-bottom:120px}
.hero-status{display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; min-height:24px}
.hero-status .tag{background:none; padding:0; font-size:17px; letter-spacing:.16em; gap:12px}
.hero-status .tag.live{color:var(--text)}
.hero-status .tag.live::before{width:34px; height:4px; background:var(--live)}
.hero-status .tag.offline{color:var(--muted)}
.hero-status .tag.offline::before{width:34px; height:4px; background:var(--faint)}
.hero-viewers{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.hero-viewers::before{content:"· "}
.hero-tit{font-size:118px; line-height:.86; margin:20px 0 22px}
.hero-live{max-width:500px; margin:0; font-size:18px; color:var(--muted)}
.hero-live b{display:block; margin-bottom:4px; color:var(--text); font-size:19px; font-weight:700}
.hero-acoes{gap:26px; margin-top:30px}
.hero-acoes .lnk{color:var(--text)}
.ini-cards{display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:18px; margin-top:-80px; position:relative; z-index:2}
.ini-card{padding:24px 26px 26px; display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0}
.ini-card h3{font-size:34px}
.ini-card p{margin:0}
.ini-card p b{color:var(--text)}
.ini-card .cmd-chat{align-self:stretch; margin-top:auto}
.ini-card .lnk{margin-top:auto}
.ini-num{font-family:var(--display); font-weight:900; font-size:66px; line-height:.9}
.ini-num span{font-size:30px; color:var(--muted); margin-left:4px}
.riscos{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; width:100%; margin:4px 0}
.riscos i{height:12px; border-radius:3px; background:var(--trilho)}
.riscos i.f{background:var(--cheio)} .riscos i.r{background:var(--brand)}
.ini-card .meta-bar{width:100%; margin:4px 0}
.ini-pr{display:flex; align-items:center; gap:14px; width:100%; margin:4px 0}
.ini-pr-art{position:relative; display:grid; place-items:center; width:72px; height:72px; flex:none; border-radius:14px; overflow:hidden}
.ini-pr-art .art-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.ini-pr-art .big{font:900 32px/1 var(--display); color:#fff}
.ini-pr-art .emote{width:40px; height:40px}
.ini-pr b{display:block; font:800 25px/1.02 var(--display); text-transform:uppercase; overflow-wrap:anywhere}
.ini-pr small{font:800 15px var(--display); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.convite{margin-top:-80px; position:relative; z-index:2; padding:28px 30px}
.convite-passos li{background:var(--raised); border:0; border-radius:12px}
.convite-passos .n{width:auto; height:auto; background:none; color:var(--brand); font-size:40px; font-weight:900; border-radius:0}
.hero-ini + .wrap > .aviso-topo{margin-top:-60px; position:relative; z-index:3}

/* ---------- ao vivo ---------- */
.player-box{border-radius:var(--r-lg)}
.chat-head b{font-family:var(--display); font-weight:800; font-size:20px; letter-spacing:.06em}

/* ---------- álbum ---------- */
.alb-count{font-weight:900; font-size:72px}
.alb-count .of{font-size:.5em; color:var(--muted); margin-left:6px}
.alb-prog{min-width:260px}
.alb-aba{border-radius:8px; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.06em; background:var(--raised); border-color:transparent}
.alb-aba[aria-selected="true"]{background:var(--pop); color:var(--pop-ink); border-color:var(--pop)}
.alb-pag-head b{font-weight:900; font-size:30px}
.slot{border-radius:14px}
.slot-cap b{font-family:var(--display); font-weight:800; font-size:18px; letter-spacing:.03em; text-transform:uppercase}

/* ---------- ranking ---------- */
.pod{position:relative; padding:28px 20px 24px}
.pod .avatar{width:84px; height:84px; font-size:26px}
.pod.first{border-color:var(--line); padding-block:36px 28px}
.pod.first .avatar{width:104px; height:104px}
.pod .place{position:absolute; left:20px; top:14px; font-weight:900; font-size:64px; color:var(--line-2)}
.pod.first .place{color:var(--brand)}
.pod > b{font-family:var(--display); font-weight:800; font-size:24px}
.table tr.you td{background:var(--brand-soft)}

/* ---------- loja ---------- */
.item .art{height:150px}
.item h3{font-family:var(--display); font-weight:800; font-size:24px; line-height:1.02; letter-spacing:.01em; text-transform:uppercase}
.item .price{font-family:var(--display); font-size:26px}

/* ---------- perfil ---------- */
.prof-hero{background:var(--surface)}
.prof-hero .banner{position:relative; height:170px; background:var(--hero) url(/arte/cidade.webp) right 40%/cover no-repeat}
.prof-hero .banner::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--hero) 10%,color-mix(in srgb,var(--hero) 30%,transparent) 70%)}
.prof-hero .avatar{width:110px; height:110px; font-size:36px; border-radius:28%}
.prof-hero h1{font-size:60px}
.prof-hero .stats div b{font-weight:900; font-size:44px}

/* ---------- menu de cores ---------- */
.tema-menu{width:380px; padding:16px}
.tema-tit{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.16em; color:var(--rot)}
.tema-opcoes{grid-template-columns:1fr 1fr; gap:8px}
.tema-op{gap:4px; padding:8px 8px 10px; border:1.5px solid transparent; border-radius:12px; background:var(--raised); text-align:left; align-content:start}
.tema-op:hover{border-color:var(--line-2)}
.tema-op[aria-pressed="true"]{border-color:var(--text); box-shadow:none}
.tema-amostra{height:58px; border-radius:8px; box-shadow:none}
.tema-amostra s{position:absolute; left:8px; top:9px; width:40%; height:6px; border-radius:3px; background:rgba(255,255,255,.85)}
.tema-amostra.claro{box-shadow:inset 0 0 0 1px #D9DEE5}
.tema-amostra.claro s{background:#0D1626}
.tema-amostra i{left:8px; right:34%; top:auto; bottom:8px; height:20px; border-radius:5px}
.tema-amostra.claro i{box-shadow:0 2px 6px rgba(0,0,0,.12)}
.tema-amostra b{right:8px; top:auto; bottom:8px; width:24%; height:20px; border-radius:5px}
.tema-op .tema-n{font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.06em; text-transform:uppercase; margin-top:4px}
.tema-op small{font-size:12px; line-height:1.25; color:var(--muted); font-weight:500}
.tema-op.auto{grid-column:1/-1; grid-template-columns:72px 1fr; column-gap:12px; align-items:center}
.tema-op.auto .tema-amostra{grid-row:span 2; height:44px}
.tema-op.auto .tema-n{margin-top:0}
.tema-amostra.auto b{width:22%; height:12px}

/* ---------- celular e telas médias ---------- */
@media (max-width:1060px){
  .ini-cards{grid-template-columns:1fr 1fr}
  .ini-cards > :first-child{grid-column:1/-1}
  .hero-tit{font-size:96px}
}
@media (max-width:680px){
  h1{font-size:46px} h2{font-size:34px}
  .topbar .wrap{height:60px}
  .logo .logo-img{height:32px}
  .hero-ini{display:block; min-height:0; padding-top:250px}
  .hero-ini::before{inset:0 0 auto 0; height:360px; background-position:30% 28%}
  .hero-ini::after{background:linear-gradient(0deg,var(--hero) 0,var(--hero) calc(100% - 330px),color-mix(in srgb,var(--hero) 40%,transparent) calc(100% - 230px),transparent calc(100% - 120px))}
  .hero-ini-txt{padding-top:0; padding-bottom:96px}
  .hero-tit{font-size:68px; margin:14px 0 16px}
  .hero-live{font-size:16px}
  .hero-acoes{gap:20px; margin-top:22px}
  .ini-cards{grid-template-columns:1fr; gap:14px; margin-top:-70px}
  .ini-card{padding:20px}
  .ini-card h3{font-size:30px}
  .convite{margin-top:-70px; padding:20px}
  .page-head.arte{min-height:190px; padding-top:44px; padding-bottom:24px}
  .page-head.arte::before{inset:0; opacity:.45}
  .page-head.arte h1{font-size:64px}
  .how .step,.steps3 .step{padding:12px 0}
  .how .step + .step,.steps3 .step + .step{border-left:0; border-top:1px solid var(--line-2)}
  .alb-count{font-size:52px}
  .pod .place{font-size:48px}
  .prof-hero .avatar{width:92px; height:92px}
  .prof-hero h1{font-size:46px}
  .cmd-chat code{font-size:22px}
  .tema-menu{width:auto}
}

/* ---------- acertos depois de ver as telas reais ---------- */
.avatar{background:var(--line-2); color:var(--text)}
.prof-hero .info{position:relative; z-index:1}
.player-box{background:var(--raised)}
.code-box{border-left-width:1px; border-left-color:var(--line); border-radius:var(--r-lg)}
.alb-top:has(.alb-tray[hidden]){grid-template-columns:minmax(0,1fr)}
.alb-top:has(.alb-tray[hidden]) .alb-code{display:flex; align-items:center; gap:10px 24px; flex-wrap:wrap}
.alb-top:has(.alb-tray[hidden]) .alb-code .cmd-chat{flex:1 1 320px; max-width:560px}
.alb-code b.lbl{font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.16em; color:var(--rot)}
.page-head.arte .coins{font-size:60px; gap:10px; padding:0}
.page-head.arte .coins .sarue{width:40px; height:40px}
.mobnav{flex-wrap:nowrap; overflow-x:auto}
:root[data-theme="light"] .topbar{background:var(--hero)}
@media (prefers-color-scheme: light){ :root[data-theme="auto"] .topbar{background:var(--hero)} }

/* ---------- álbum v4: figurinhas soltas na página, sem caixinha; faixa de riscos; a última que pegou ---------- */
.alb-head .meta-bar{display:none}
.alb-prog{justify-items:end; gap:6px}
.alb-falta{font-size:16px; color:var(--muted)}
.alb-riscos{margin:22px 0 0}
.alb-riscos i{height:14px}
.alb-top{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:18px}
.alb-top:has(.alb-tray[hidden]):has(.alb-ultima[hidden]){grid-template-columns:minmax(0,1fr)}
.alb-top:has(.alb-tray[hidden]):has(.alb-ultima[hidden]) .alb-code{display:flex; align-items:center; gap:10px 24px; flex-wrap:wrap}
.alb-top:has(.alb-tray[hidden]):has(.alb-ultima[hidden]) .alb-code .cmd-chat{flex:1 1 320px; max-width:560px}
.alb-top:has(.alb-tray[hidden]):not(:has(.alb-ultima[hidden])){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.alb-top:has(.alb-tray[hidden]):not(:has(.alb-ultima[hidden])) .alb-code{display:grid}
.alb-code{padding:22px 24px; align-content:center; gap:14px}
.alb-ultima{display:flex; align-items:center; gap:22px; padding:18px 24px}
.alb-ult-art{width:78px; flex:none; transform:rotate(-3deg)}
.alb-ult-t{flex:1; min-width:0; display:grid; gap:4px}
.alb-ult-t h3{font-size:30px; overflow-wrap:anywhere}
.alb-ult-t p{margin:0; font-size:14.5px}
.alb-livro{margin-top:18px}
.alb-nav{margin-bottom:14px}
.alb-seta{width:46px; height:40px; padding:0}
.alb-abas{background:var(--raised); border-radius:12px; padding:4px; gap:4px; flex:0 1 auto; margin:0 auto}
.alb-aba{min-width:36px; padding:7px 12px 5px; border:0; background:none; color:var(--muted); font-size:16px}
.alb-aba[aria-selected="true"]{background:var(--pop); color:var(--pop-ink)}
.alb-aba.raras{border:0; color:#E6C46A}
.alb-pagina{padding:30px 32px 34px}
.alb-pagina::before{display:none}
.alb-pag-head{margin:0 0 26px}
.alb-pag-head b{font-size:34px}
.alb-grid{gap:30px 26px}
.alb-pagina:not(.raras) .slot{background:none; border:0; padding:0; gap:14px}
.slot-art{width:min(190px,88%)}
.alb-pagina:not(.raras) .slot.got .stk{filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)) drop-shadow(0 14px 22px rgba(0,0,0,.35))}
.slot-hole{border:1.5px dashed var(--line-2); border-radius:14px; background:var(--raised); font-size:64px; color:var(--line-2)}
.slot-cap small{font-size:13px; color:var(--muted)}
.slot-cap b{font-size:21px}
.slot.empty .slot-cap{opacity:1}
.slot.empty .slot-cap b{color:var(--faint)}
@media (max-width:1060px){ .alb-top,.alb-top:has(.alb-tray[hidden]):not(:has(.alb-ultima[hidden])){grid-template-columns:1fr} }
@media (max-width:680px){
  .alb-pagina{padding:18px 14px 22px}
  .alb-grid{gap:22px 14px}
  .slot-cap b{font-size:17px}
  .alb-ultima{gap:14px; padding:16px; flex-wrap:wrap}
  .alb-ult-art{width:60px}
  .alb-ult-t h3{font-size:24px}
  .alb-ultima .btn{width:100%}
  .alb-falta{font-size:14px}
}
@media (max-width:680px){ .alb-head .alb-prog{justify-items:start; min-width:0; max-width:none} }