/* Central Brabox · complementos ao estilo do protótipo (player da Kick, estados, moderação) */
.aviso-topo{margin:14px 0 0; padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--text); font-size:14px}
.aviso-topo[hidden]{display:none}
.player-box{position:relative; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; background:#0E1014; box-shadow:var(--shadow-sm)}
.player-box iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.player-off{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px; text-align:center; padding:24px; color:#fff; background:linear-gradient(140deg,#14161C,#0E1014)}
.player-off[hidden]{display:none}
.player-off b{font-family:var(--display); font-weight:700; font-size:40px; line-height:.95; text-transform:uppercase; max-width:560px}
.player-off .muted{color:#B9BDC7}
.live-titulo{display:grid; gap:6px}
.live-titulo h2{font-size:30px; line-height:1}
.live-titulo .tag{justify-self:start}
.chat-card iframe{width:100%; height:100%; border:0; background:#0E1014}
.chat-card .cbody{position:relative; flex:1; min-height:0}
.chat-card .cbody .lock{position:absolute; inset:0; place-content:center}
.alb-lock .lock{padding:18px}
.alb-vazio,.rank-vazio{padding:28px 16px; text-align:center}
.rank-table tr.you td{background:var(--brand-soft)}
.avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block}
.me .avatar{padding:0; overflow:hidden}
.mod-grid{align-items:start}
.bigcode{font-family:var(--display); font-weight:700; font-size:40px; letter-spacing:.06em; line-height:1}
.fig-list{display:grid; gap:8px; padding:14px}
.fig-it{display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:12px}
.fig-it .fig-art-mini{transform:rotate(-3deg)}
.fig-it b{display:block; font-size:14.5px}
.fig-it small{display:block; color:var(--muted); font-size:12px}
.fig-it .code{font-family:var(--mono,ui-monospace,monospace); font-weight:700; letter-spacing:.08em}
.fig-it .acoes{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.fig-it.inativa{opacity:.7}
.fig-list-head{display:flex; align-items:center; gap:10px; padding:16px 16px 0}
.fig-list-head h3{margin:0}
.switch{width:44px; height:26px; border-radius:999px; border:1px solid var(--line-2); background:var(--raised); position:relative; cursor:pointer}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform .15s, background .15s}
.switch[aria-checked="true"]{background:var(--ok-soft); border-color:var(--ok)}
.switch[aria-checked="true"]::after{transform:translateX(18px); background:var(--ok)}
.input.num{font-variant-numeric:tabular-nums}
.so-mod[hidden]{display:none!important}
@media (max-width:900px){ .live-grid{grid-template-columns:1fr} .chat-card{height:420px} .live-titulo h2{font-size:24px} }

/* redes: vídeos e posts reais */
.vid{color:inherit; text-decoration:none}
.vid small{font-size:12.5px}
.vthumb.img{background-size:cover; background-position:center; background-color:#16181c}
.vthumb .t{position:absolute; left:8px; top:8px; z-index:1}
.igp{text-decoration:none}
.igp.img{background-size:cover; background-position:center; background-color:#16181c}
.igp .cap{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; line-height:1.3; text-shadow:0 1px 2px rgba(0,0,0,.5)}
.netcard{color:inherit; text-decoration:none}
footer.site a{display:block; line-height:1.9; color:var(--muted); text-decoration:none}
footer.site a:hover{color:var(--text)}
/* foto do card da figurinha */
.fig-foto{display:grid; gap:8px}
.fig-drop{display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px dashed var(--line-2); border-radius:12px; cursor:pointer; background:var(--surface); transition:border-color .15s, background .15s}
.fig-drop:hover,.fig-drop:focus-visible,.fig-drop.sobre{border-color:var(--brand); background:var(--brand-soft); outline:none}
.fig-drop-prev{width:44px; height:58px; border-radius:8px; overflow:hidden; flex:none; background:#16181c}
.fig-drop-prev img{width:100%; height:100%; object-fit:cover; display:block}
.fig-drop-prev[hidden]{display:none}
.fig-drop-txt b{display:block; font-size:14.5px}
.fig-drop-txt small{display:block; color:var(--muted); font-size:12.5px; line-height:1.35}
/* janela de confirmação (própria do site; sem janela do navegador) */
.janela{position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:16px}
.janela[hidden]{display:none}
.janela-bg{position:absolute; inset:0; background:rgba(8,9,11,.6); backdrop-filter:blur(2px)}
.janela-card{position:relative; width:min(440px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; display:grid; gap:10px; box-shadow:0 24px 60px rgba(0,0,0,.35); animation:janela-in .18s ease-out}
.janela-card h3{margin:0; font-size:24px}
.janela-card p{margin:0; color:var(--muted); font-size:14.5px; line-height:1.45}
.janela-acoes{justify-content:flex-end; margin-top:6px}
body.janela-aberta{overflow:hidden}
@keyframes janela-in{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}
/* Kick no "Siga": estado em vez de número */
.netcard .cnt.kick-on{color:var(--kick)}
.netcard .cnt.kick-off{color:var(--muted)}
.netcard.big .cnt.kick-on,.netcard.big .cnt.kick-off{font-size:44px}
.form label.fig-drop{text-transform:none; letter-spacing:0; font-weight:400; display:flex}
@media (max-width:680px){ .nets-big{grid-template-columns:1fr!important} .nets-small{grid-template-columns:repeat(2,1fr)!important} .mobnav{flex-wrap:wrap} .netcard.big .cnt.kick-on,.netcard.big .cnt.kick-off{font-size:30px} }

/* início: resumo da live */
.inicio-live{display:grid; grid-template-columns:minmax(220px,38%) 1fr; overflow:hidden; margin-top:20px}
.inicio-capa{position:relative; min-height:200px; background:linear-gradient(140deg,#14161C,#0E1014); display:grid; place-items:center}
.inicio-capa .net{width:64px; height:64px; opacity:.5}
.inicio-capa .net svg{width:34px; height:34px}
.inicio-capa.img{background-size:cover; background-position:center}
.inicio-capa.img .net{display:none}
.inicio-txt{padding:22px 24px; display:grid; gap:10px; align-content:center}
.inicio-txt h2{font-size:34px; line-height:.98}
.inicio-txt p{margin:0; font-size:14.5px}
.inicio-live.on .inicio-capa::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 3px var(--kick)}
/* lives passadas */
.vod{cursor:pointer; position:relative}
.vod .vthumb .play{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:rgba(8,9,11,.72); color:#fff; display:grid; place-items:center; font-size:16px; z-index:1; transition:transform .15s, background .15s}
.vod:hover .vthumb .play{transform:translate(-50%,-50%) scale(1.08); background:var(--kick); color:var(--kick-ink)}
.vod.tocando .vthumb{outline:3px solid var(--kick); outline-offset:-3px}
.vod-palco{display:grid; grid-template-columns:1fr; gap:0; overflow:hidden; margin-bottom:18px}
.vod-video{aspect-ratio:16/9; background:#0E1014}
.vod-video video{width:100%; height:100%; display:block; background:#0E1014}
.vod-info{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:14px 18px}
.vod-info h3{font-size:22px; line-height:1.05}
/* moderadores */
.mods-list{display:grid; gap:6px}
.mod-it{display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--line); border-radius:12px}
.mod-it b{font-size:14.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis}
.mod-it .avatar.sm{width:30px; height:30px; font-size:12px}
@media (max-width:680px){ .inicio-live{grid-template-columns:1fr} .inicio-capa{min-height:150px} .inicio-txt h2{font-size:26px} }

.inicio-cards{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:16px}
@media (max-width:680px){ .inicio-cards{grid-template-columns:1fr} }

/* moderação: chat da live */
.chat-mod{margin-bottom:16px}
.chat-mod .net{width:28px; height:28px}
.chat-filtro{border:1px solid var(--line); border-radius:12px; padding:10px 14px}
.chat-filtro summary{cursor:pointer; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chat-filtro[open] summary{margin-bottom:10px}
.chat-filtro textarea{margin-bottom:8px; font-family:var(--mono,ui-monospace,monospace); font-size:13.5px}
.chat-grid{display:grid; grid-template-columns:1fr 280px; gap:14px}
.chat-lista{max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:6px 0; margin-top:8px}
.chat-it{display:grid; grid-template-columns:44px auto 1fr; gap:8px; align-items:baseline; padding:5px 12px; font-size:14px; line-height:1.35}
.chat-it small{color:var(--muted); font-size:12px}
.chat-it.sinal{background:var(--bad-soft)}
.chat-it mark{background:var(--bad); color:#fff; border-radius:4px; padding:0 3px}
.chat-nome{background:none; border:0; padding:0; font:inherit; font-weight:700; color:var(--brand); cursor:pointer; text-align:left}
.chat-nome:hover{text-decoration:underline}
.chat-txt{word-break:break-word; min-width:0}
.chat-pessoa-barra{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; margin-top:8px; border:1px solid var(--line); border-radius:12px; background:var(--raised)}
.chat-pessoa-barra[hidden]{display:none}
.chat-plist{display:grid; gap:6px; margin-top:8px; max-height:520px; overflow:auto}
.chat-p{display:grid; grid-template-columns:30px 1fr; gap:4px 10px; align-items:center; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:left; cursor:pointer; font:inherit; color:inherit}
.chat-p:hover{border-color:var(--text)}
.chat-p b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chat-p small{grid-column:2; color:var(--muted); font-size:12px}
.chat-p small i{font-style:normal; color:var(--bad); font-weight:700}
.chat-p.sinal{border-color:var(--bad)}
.chat-p .avatar.sm{width:30px; height:30px; font-size:12px; grid-row:1 / span 2}
.chk{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted)}
.tag.bad{background:var(--bad-soft); color:var(--bad)}
@media (max-width:900px){ .chat-grid{grid-template-columns:1fr} .chat-lista,.chat-plist{max-height:360px} }

/* log do chat (moderação) */
.chat-mod .clog{height:auto; max-height:none; min-height:0}
.chat-mod .clog > .card{max-height:720px}
.chat-mod .clog-det{min-height:420px}
.chat-mod .lp-list{overflow:auto; flex:1; min-height:0; max-height:640px}
.lp.agora .avatar{box-shadow:0 0 0 2px var(--kick)}
.lp-live{width:9px; height:9px; border-radius:50%; background:var(--kick); flex:none; box-shadow:0 0 0 3px rgba(83,252,24,.25)}
.chat-recentes{max-height:420px; margin-top:10px; border-top:1px solid var(--line)}
.lw-msg.sinal{background:var(--bad-soft)}
.lw-msg mark{background:var(--bad); color:#fff; border-radius:4px; padding:0 3px}
.lw-msgs{max-height:520px}
.chat-filtro{margin-bottom:14px}
.chat-nome{background:none; border:0; padding:0; font:inherit; font-weight:700; cursor:pointer; text-align:left}
.chat-nome:hover{text-decoration:underline}
@media (max-width:900px){ .chat-mod .clog{grid-template-columns:1fr} .chat-mod .clog.is-open .clog-list{display:none} }
.chat-recentes{text-align:left; text-transform:none}
.chat-recentes .lw-msg p{text-transform:none; text-align:left; letter-spacing:0; font-size:14px; color:var(--text); margin:0}
.chat-recentes .lw-msg time{text-transform:none; letter-spacing:0}
.chat-recentes .cday{padding-top:10px}

/* ===================== álbum em páginas ===================== */
.alb-livro{margin-top:16px}
.alb-nav{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.alb-seta{min-width:42px; font-size:16px}
.alb-seta:disabled{opacity:.35; cursor:default}
.alb-abas{display:flex; gap:6px; flex-wrap:wrap; flex:1; justify-content:center}
.alb-aba{min-width:38px; padding:6px 12px; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--muted); font-weight:700; font-size:13px; cursor:pointer; font-family:inherit}
.alb-aba[aria-selected="true"]{background:var(--text); color:var(--bg); border-color:var(--text)}
.alb-aba.raras{color:#B8860B; border-color:#E6C46A}
.alb-aba.raras[aria-selected="true"]{background:linear-gradient(135deg,#FFE58A,#C99A2E); color:#3A2600; border-color:#C99A2E}
.alb-palco{position:relative; perspective:2400px}
.alb-pagina{padding:18px; min-height:520px; position:relative}
.alb-pagina::before{content:""; position:absolute; left:0; top:12px; bottom:12px; width:10px; border-radius:0 8px 8px 0; background:linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0)); pointer-events:none}
.alb-pag-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0 0 14px 8px}
.alb-pag-head b{display:block; font-family:var(--display); font-size:26px; line-height:1; text-transform:uppercase}
.alb-pag-head small{display:block; color:var(--muted); font-size:13px; margin-top:4px}
.alb-dica{text-align:center; font-size:12.5px; margin:10px 0 0}
/* a folha que vira: gira pela lombada (lado esquerdo) */
.alb-folha{position:absolute; inset:0; transform-style:preserve-3d; transform-origin:left center; pointer-events:none; z-index:5}
.alb-folha .face{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; margin:0}
.alb-folha .verso{transform:rotateY(180deg); background:linear-gradient(90deg, var(--raised), var(--surface) 40%)}
.alb-folha .frente::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.28)); opacity:0; animation:folhaSombra .8s ease-in-out forwards}
.alb-folha.vai{animation:folhaVai .8s cubic-bezier(.4,.05,.25,1) forwards}
.alb-folha.volta{animation:folhaVolta .8s cubic-bezier(.4,.05,.25,1) forwards}
@keyframes folhaVai{0%{transform:rotateY(0)} 100%{transform:rotateY(-178deg)}}
@keyframes folhaVolta{0%{transform:rotateY(-178deg)} 100%{transform:rotateY(0)}}
@keyframes folhaSombra{50%{opacity:1} 100%{opacity:0}}

/* página das raras: fundo escuro de veludo com moldura dourada */
.alb-pagina.raras{background:radial-gradient(120% 90% at 20% 0%, #2A2140 0%, #14121F 55%, #0B0A12 100%); border:1px solid #6B5320; box-shadow:inset 0 0 0 4px rgba(242,201,76,.14), var(--shadow-sm); color:#F3EBD2}
.alb-pagina.raras .alb-pag-head b{background:linear-gradient(90deg,#FFF3B0,#F2C94C 40%,#B8860B 70%,#FFE58A); -webkit-background-clip:text; background-clip:text; color:transparent}
.alb-pagina.raras .alb-pag-head small, .alb-pagina.raras .alb-vazio{color:#B9AE90}
.alb-pagina.raras .slot{background:rgba(255,255,255,.04); border:1px solid rgba(242,201,76,.16)}
.alb-pagina.raras .slot-cap small{color:#C9BC95}
.alb-pagina.raras .slot-cap b{color:#F7EFD8}
.rara-hole{border:2px solid transparent!important; background:linear-gradient(#17151F,#17151F) padding-box, var(--acab) border-box; color:transparent}
.rara-hole .rara-q{font-family:var(--display); font-size:46px; font-weight:700; background:var(--acab); -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.85}
.rara-slot.vaga .rara-hole{opacity:.55; filter:saturate(.7)}
.rara-slot.vaga .slot-cap{opacity:.75}
.acab-ouro{--acab:linear-gradient(135deg,#FFF4BF,#F2C94C 30%,#A87412 55%,#FFE27A 75%,#7A5208)}
.acab-prata{--acab:linear-gradient(135deg,#FFFFFF,#D9DEE6 30%,#8E97A4 55%,#F3F5F9 75%,#5E6672)}
.acab-holo{--acab:linear-gradient(135deg,#FF8AD8,#8AF2FF 30%,#C2FF8A 55%,#FFE58A 75%,#B98AFF)}
.acab-rubi{--acab:linear-gradient(135deg,#FF9AAA,#E0203A 30%,#7A0016 55%,#FF5B73 75%,#3D0009)}
.acab-esmeralda{--acab:linear-gradient(135deg,#A8FFD8,#18A86D 30%,#05452C 55%,#5BE3A5 75%,#022417)}
.acab-safira{--acab:linear-gradient(135deg,#A8CCFF,#2350E0 30%,#0A1A5C 55%,#5B8BFF 75%,#040C30)}
.acab-galaxia{--acab:linear-gradient(135deg,#3B1680,#8A4BF0 30%,#160634 55%,#F070FF 75%,#070114)}
.acab-obsidiana{--acab:linear-gradient(135deg,#6C7482,#2A2E36 30%,#121418 55%,#4A505B 75%,#000000)}
/* figurinha rara: brilho que passa e holográfica mudando de cor */
.stk.rara .stk-brilho{animation:stkBrilho 3.4s ease-in-out infinite}
@keyframes stkBrilho{0%{transform:translateX(-30px)} 55%,100%{transform:translateX(150px)}}
.stk.rara.acab-holo{animation:stkHolo 7s linear infinite}
@keyframes stkHolo{to{filter:hue-rotate(360deg)}}
.slot.got.rara-slot .stk{filter:drop-shadow(0 6px 14px rgba(242,201,76,.25))}
@media (prefers-reduced-motion: reduce){ .stk.rara .stk-brilho, .stk.rara.acab-holo{animation:none} .alb-folha{display:none} }
@media (max-width:680px){ .alb-pagina{min-height:0; padding:14px 10px} .alb-pag-head b{font-size:22px} }

/* ===================== loja ===================== */
.loja-saldo{font-size:18px}
.loja-saldo[hidden]{display:none}
.shop .item .body small{display:block; margin:-4px 0 6px}
.loja-mini{width:44px; height:44px; border-radius:10px; display:grid; place-items:center; overflow:hidden; color:#fff; font-family:var(--display); font-weight:700; font-size:16px}
.loja-mini img{width:100%; height:100%; object-fit:cover}
.loja-mini .big{font-size:16px}
.resg-it{grid-template-columns:36px 1fr auto}
.resg-it .avatar.sm{width:32px; height:32px; font-size:12px; padding:0; overflow:hidden}
.resg-feitos summary{cursor:pointer}
.resg-feitos[open] summary{margin-bottom:8px}
.pts.neg{color:var(--bad)}
.mod-bloco{padding-top:28px}

/* ===================== manda pro Brabox ===================== */
.manda-tipo{justify-self:start}
.manda-drop{padding:26px 18px}
.manda-drop[hidden]{display:none}
.manda-drop small{display:block; margin-top:4px}
.mini-link{display:grid; place-items:center; width:100%; height:100%; color:var(--muted)}
.mini-link svg{width:22px; height:22px}
.gitem-link a{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; color:var(--text); text-decoration:none; font-weight:700; font-size:13px; background:linear-gradient(135deg,var(--raised),var(--surface))}
.gitem-link svg{width:30px; height:30px}
.manda-analise{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.manda-card{display:grid; gap:10px; padding:12px; align-content:start}
.manda-midia{aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:var(--raised)}
.manda-midia img{width:100%; height:100%; object-fit:cover; display:block}
.manda-link{display:grid; place-content:center; justify-items:center; gap:6px; height:100%; padding:12px; color:var(--text); text-decoration:none; font-size:12.5px; text-align:center; word-break:break-all}
.manda-link svg{width:26px; height:26px}
.manda-txt b{display:block; font-size:14.5px; overflow-wrap:anywhere}
.manda-txt small{color:var(--muted); font-size:12.5px}

/* ===================== palco ===================== */
.palco-item{position:absolute; inset:0; margin:0; display:grid; grid-template-rows:minmax(0,1fr) auto; gap:12px}
.palco-item img{width:100%; height:100%; object-fit:contain; border-radius:var(--r-lg); background:#0B0C0F}
.palco-item figcaption b{display:block; color:#fff; font-size:20px}
.palco-item figcaption small{color:#9CA1AB; font-size:14px}
.manda-link.grande{background:#16181D; border-radius:var(--r-lg); color:#fff; font-size:18px}
.manda-link.grande svg{width:48px; height:48px}
.manda-link.grande small{color:#9CA1AB; font-size:13px}
.palco-vazio{position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:8px; text-align:center; border:1.5px dashed #363B45; border-radius:var(--r-lg)}
.palco-vazio b{font-family:var(--display); font-size:34px; color:#fff; text-transform:uppercase}
.est-list li{display:flex; align-items:center; gap:10px; padding:8px 10px}
.est-list .mini{width:44px; height:44px; border-radius:8px; overflow:hidden; flex:none; background:#23262C}
.est-list .mini img{width:100%; height:100%; object-fit:cover}
.est-list li b{display:block; color:#fff; font-size:13.5px}
.est-list li small{display:block; color:#9CA1AB; font-size:12px}

/* ===================== log do chat: punir ===================== */
.lw-punir{display:grid; gap:14px; padding:18px 20px 20px; border-bottom:1px solid var(--line); margin-bottom:14px}
.lw-punir:empty{display:none}
.punir-linha{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.punir-linha .lbl{font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-right:4px}
.punir-sep{width:1px; height:22px; background:var(--line); margin:0 4px}
.punir-aviso{font-size:13px; flex-basis:100%}
.punir-motivo{max-width:420px}
.punir-hist{display:grid; gap:4px; padding:10px 12px; border:1px solid var(--line); border-radius:12px; font-size:13px}
.punir-hist > b{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ph-it{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.ph-it small{color:var(--muted); min-width:84px}
.form label.drop{text-transform:none; letter-spacing:0; font-weight:400; color:var(--text)}
.form label.drop b{font-size:16px; font-weight:600}
.form label.drop small{font-size:12.5px; font-weight:400; letter-spacing:0}
.form label.chk{display:flex; flex-direction:row; align-items:center; gap:8px; text-transform:none; letter-spacing:0; font-size:14px; font-weight:600; color:var(--text)}
.form label.chk input{width:18px; height:18px; accent-color:var(--brand)}

/* palco: barra, mídia tocando, tela cheia */
.palco-tit{display:grid; gap:10px}
.palco-barra{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.palco-cheia{background:#23262C; color:#F1F2F4; border-color:#363B45}
.palco-cheia:hover{border-color:#6B707A}
.palco-pend{display:inline-flex; align-items:center; gap:8px; color:#C9CDD5; font-size:13px}
.palco-pend[hidden]{display:none}
.palco-pend b{color:#fff; font-size:16px}
.palco-midia{position:relative; min-height:0; border-radius:var(--r-lg); overflow:hidden; background:#0B0C0F; display:grid}
.palco-midia img, .palco-midia video, .palco-midia iframe{width:100%; height:100%; display:block; border:0; object-fit:contain; background:#0B0C0F}
.palco-item figcaption a{color:#8FA2FF}
.verdict .btn small{display:block; font-size:11px; font-weight:600; opacity:.7; letter-spacing:.04em; margin-top:2px}
body.palco-foco .topbar, body.palco-foco footer.site, body.palco-foco #avisoTopo{display:none!important}
body.palco-foco .stage-wrap{min-height:100vh; padding-block:16px 20px}
body.palco-foco .stage-area{height:calc(100vh - 230px); max-height:none}
.mini{position:relative}
.mini-play{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:14px; text-shadow:0 1px 3px rgba(0,0,0,.7)}
.gitem-abrir{position:absolute; right:8px; bottom:8px; z-index:2; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:rgba(8,9,11,.72); color:#fff; text-decoration:none; font-size:12px}
.manda-midia{position:relative}

/* temas extras (escuros): mesma base do "Preto", com fundo e destaque próprios */
:root[data-theme="oled"],:root[data-theme="azul"],:root[data-theme="roxo"],:root[data-theme="verde"]{
  color-scheme: dark;
  --bg:#0C0D10; --surface:#15171B; --raised:#1B1E23; --line:#262A31; --line-2:#363B45;
  --text:#F1F2F4; --muted:#9CA1AB; --faint:#6B707A;
  --brand:#7D93FF; --brand-2:#A2B2FF; --brand-ink:#0B0D14; --brand-soft:rgba(125,147,255,.14);
  --pop:#F1F2F4; --pop-ink:#0E1014; --pop-soft:rgba(241,242,244,.08);
  --sun:#E0B25A; --sun-ink:#1A1204; --sun-soft:rgba(224,178,90,.13);
  --ok:#4CC98A; --ok-soft:rgba(76,201,138,.13); --bad:#F2707A; --bad-soft:rgba(242,112,122,.13); --warn:#E6A94A; --warn-soft:rgba(230,169,74,.13);
  --live:#FF4057; --kick:#53FC18; --kick-ink:#07120A; --tt:#F1F2F4; --x:#F1F2F4;
  --stage:#08090B; --shadow:0 1px 2px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
  --u0:#F08A9C; --u1:#8FA2FF; --u2:#6FD6A0; --u3:#E8BD6A; --u4:#B39BF0; --u5:#6ED3CD; --u6:#E58DBA; --u7:#9AD66B;
}
:root[data-theme="oled"]{--bg:#000000; --surface:#0A0A0B; --raised:#121214; --line:#1E1F23; --line-2:#2B2D32; --stage:#000000}
:root[data-theme="azul"]{--bg:#0A1228; --surface:#101B38; --raised:#162347; --line:#22305A; --line-2:#2F3F70; --muted:#A3B0CF; --faint:#7482A6; --brand:#5B8BFF; --brand-2:#86A8FF; --brand-ink:#06102A; --brand-soft:rgba(91,139,255,.16); --stage:#070D1F}
:root[data-theme="roxo"]{--bg:#120A20; --surface:#1B1230; --raised:#23183D; --line:#33254F; --line-2:#433263; --muted:#B5A8D0; --faint:#8676A6; --brand:#B48CFF; --brand-2:#CBB0FF; --brand-ink:#14091F; --brand-soft:rgba(180,140,255,.16); --stage:#0C0616}
:root[data-theme="verde"]{--bg:#06110A; --surface:#0C1B11; --raised:#112417; --line:#1B3324; --line-2:#264532; --muted:#9FB8A8; --faint:#6E8A78; --brand:#53FC18; --brand-2:#8BFF5E; --brand-ink:#06120A; --brand-soft:rgba(83,252,24,.12); --stage:#030A05}
/* escolha do tema: menu no topo e cartão no perfil */
.tema-lugar{position:relative; display:inline-flex}
.tema-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:300px; padding:14px; display:grid; gap:10px; box-shadow:var(--shadow)}
.tema-menu[hidden]{display:none}
.tema-tit{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.tema-opcoes{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px}
.tema-op{display:grid; gap:6px; justify-items:start; padding:8px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--text); font-weight:600; font-size:13px; text-align:left}
.tema-op:hover{border-color:var(--text)}
.tema-op[aria-pressed="true"]{border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft)}
.tema-amostra{position:relative; width:100%; height:34px; border-radius:8px; overflow:hidden; display:block; box-shadow:inset 0 0 0 1px rgba(127,127,127,.25)}
.tema-amostra i{position:absolute; left:8px; top:8px; right:30px; bottom:0; border-radius:6px 6px 0 0}
.tema-amostra b{position:absolute; right:8px; top:9px; width:14px; height:14px; border-radius:50%}
.tema-amostra.auto{display:flex}
.tema-amostra.auto span{flex:1}
@media (max-width:680px){ .tema-menu{position:fixed; left:16px; right:16px; top:64px; width:auto} }

/* melhores clipes */
#blocoClipes .sec-head{align-items:center}
#blocoClipes .tabs [hidden]{display:none}
.clipe-video{aspect-ratio:16/9; max-height:70vh; margin:0 auto; width:100%}
.clipe-video video{object-fit:contain}

/* limpeza: código da live ocupa a linha toda, prêmio à esquerda e campo à direita */
.inter-grid{grid-template-columns:1fr}
.inter.code-card{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"tag tag" "premio campo" "premio dica"; column-gap:32px; row-gap:10px; align-items:center; align-content:start}
.inter.code-card > .tag{grid-area:tag}
.inter.code-card .code-prize{grid-area:premio}
.inter.code-card .code-row{grid-area:campo; max-width:520px}
.inter.code-card #codeHint{grid-area:dica}
@media (max-width:680px){ .inter.code-card{grid-template-columns:1fr; grid-template-areas:"tag" "premio" "campo" "dica"} }
.btn[hidden]{display:none!important}

/* emotes da Kick no log do chat */
.lw-msg img.emote{display:inline-block; width:auto; height:28px; max-width:84px; vertical-align:middle; margin:-4px 1px 0; object-fit:contain}

/* histórico geral de moderação */
.mod-hist{padding:20px; display:grid; gap:14px; margin-top:16px; margin-bottom:16px}
.mh-resumo{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.mh-resumo > div{border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:grid; gap:2px}
.mh-resumo b{font-family:var(--display); font-size:28px; line-height:1}
.mh-resumo span{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.mh-filtros{gap:10px 14px}
.mh-busca{flex:1 1 260px; max-width:420px}
.mh-lista{display:grid; max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:12px; padding:4px 0}
.mh-lista .cday{padding:8px 14px 4px}
.mh-it{display:grid; grid-template-columns:52px 104px minmax(0,1fr) auto; gap:12px; align-items:center; padding:10px 14px; border-top:1px solid var(--line)}
.mh-lista .cday + .mh-it{border-top:0}
.mh-it time{color:var(--muted); font-size:13px}
.mh-it .tag{justify-self:start}
.mh-txt{min-width:0}
.mh-txt p{margin:0; font-weight:600}
.mh-txt small{display:block; color:var(--muted); font-size:12.5px; overflow-wrap:anywhere}
.mh-it.falhou{opacity:.7}
.mh-lista .lw-empty{padding:16px 14px; margin:0}
@media (max-width:680px){ .mh-it{grid-template-columns:44px minmax(0,1fr); row-gap:6px} .mh-it .tag{grid-column:2} .mh-txt{grid-column:1/-1} .mh-resumo b{font-size:22px} .mh-resumo{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mh-txt p b{font-weight:700}
.mh-it .mh-txt p{font-weight:500}
.mh-it .mh-txt p .chat-nome{font-weight:700}

/* registro da moderação: menu de moderadores (foto + nome + contas) */
.mh-mod{position:relative}
.mh-mod-btn{display:flex; align-items:center; gap:10px; min-width:250px; padding:6px 12px 6px 6px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); color:var(--text); text-align:left; cursor:pointer}
.mh-mod-btn:hover,.mh-mod-btn[aria-expanded="true"]{border-color:var(--text)}
.mh-mod-txt{display:grid; min-width:0; flex:1 1 auto; line-height:1.2}
.mh-mod-txt b{font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mh-mod-txt small{font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mh-mod-seta{color:var(--muted); font-size:12px}
.avatar.mh-av{width:34px; height:34px; font-size:12px; overflow:hidden; color:#fff}
.avatar.mh-av img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.avatar.mh-av[data-todos]{background:var(--brand); color:#fff; font-size:15px}
.mh-mod-menu{position:absolute; left:0; top:calc(100% + 6px); z-index:60; width:340px; max-height:380px; overflow:auto; padding:6px; display:grid; gap:2px; box-shadow:var(--shadow)}
.mh-mod-menu[hidden]{display:none}
.mh-mod-op{display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:0; border-radius:10px; background:none; color:var(--text); text-align:left; cursor:pointer}
.mh-mod-op:hover,.mh-mod-op:focus-visible{background:var(--surface-2, rgba(127,127,127,.12)); outline:none}
.mh-mod-op[aria-selected="true"]{background:var(--brand-soft, rgba(125,147,255,.16))}
.mh-mod-ok{color:var(--brand); font-weight:700; margin-left:auto}
.mh-mod-sep{height:1px; background:var(--line); margin:4px 6px}
@media (max-width:680px){ .mh-mod,.mh-mod-btn{width:100%} .mh-mod-menu{width:100%} }

/* selos (conquistas) do perfil */
.selos-card{display:grid; gap:12px}
.selos-cab h3{margin:0}
.selos-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:10px}
.selo{display:flex; gap:12px; align-items:center; padding:10px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface)}
.selo.ganho{border-color:color-mix(in srgb, var(--text) 18%, var(--line))}
.selo-txt{display:grid; gap:3px; min-width:0; flex:1}
.selo-txt b{font-size:14.5px; line-height:1.15}
.selo-txt small{font-size:12px; color:var(--muted); line-height:1.3}
.selo:not(.ganho) .selo-txt b{color:var(--muted)}
.selo-prog{display:block; height:5px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:3px}
.selo-prog i{display:block; height:100%; border-radius:99px; background:var(--brand)}
.selo-falta{font-size:11.5px !important}
.selo-falta.max{color:var(--ok, #2f9e44) !important; font-weight:600}
.selo-med{position:relative; flex:none; display:block; width:64px; height:72px}
.selo-med svg{display:block; width:100%; height:100%}
.selo:not(.ganho) .selo-med{opacity:.8}
.selo-novo-card .selo-med{width:76px; height:85px}
.selo-novo{position:fixed; left:50%; bottom:24px; z-index:90; transform:translateX(-50%); pointer-events:none}
.selo-novo[hidden]{display:none}
.selo-novo-card{display:flex; gap:14px; align-items:center; padding:14px 18px 14px 14px; border-radius:18px; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 18px 48px rgba(0,0,0,.28)}
.selo-novo-card small{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); font-weight:700}
.selo-novo-card b{display:block; font-family:var(--display); font-size:22px; line-height:1.05; text-transform:uppercase}
.selo-novo-card span{display:block; font-size:13px; color:var(--muted)}
.selo-novo.entra .selo-novo-card{animation:selo-entra .55s cubic-bezier(.2,1.4,.4,1) both}
.selo-novo.entra .selo-med{animation:selo-gira .9s .1s ease-out both}
.selo-novo.sai .selo-novo-card{animation:selo-sai .35s ease-in both}
@keyframes selo-entra{from{opacity:0; transform:translateY(30px) scale(.85)} to{opacity:1; transform:none}}
@keyframes selo-sai{to{opacity:0; transform:translateY(20px) scale(.95)}}
@keyframes selo-gira{from{transform:rotateY(180deg) scale(.6)} to{transform:none}}
@media (prefers-reduced-motion: reduce){ .selo-novo.entra .selo-novo-card, .selo-novo.entra .selo-med, .selo-novo.sai .selo-novo-card{animation:none} }
@media (max-width:680px){ .selos-grade{grid-template-columns:1fr} }

/* marcas ao lado do nome */
.marca{display:inline-block; width:19px; height:19px; margin-right:5px; vertical-align:-4px; flex:none}
.marca svg{display:block; width:100%; height:100%}
h1 .marca, h2 .marca, #profNome .marca{width:30px; height:30px; vertical-align:2px; margin-right:8px}
/* dar selo (teste) */
.mod-selo{padding:18px 20px; display:grid; gap:10px; margin-top:16px}
.mod-selo-l{gap:8px}
.mod-selo-l .input{height:38px; flex:1 1 150px; min-width:0}

/* ranking: nome e foto levam ao perfil do fã */
.rk-link{color:inherit; text-decoration:none; display:inline-flex; align-items:center; gap:0; border-radius:8px}
.rk-link:hover b, .rk-link:hover{text-decoration:underline; text-underline-offset:3px}
.rk-link:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.so-meu[hidden]{display:none !important}

/* moderação: partes só do Brabox (selo, figurinhas, itens da loja) */
.so-streamer[hidden]{display:none !important}
.two:has(> .so-streamer[hidden]), .mod-grid:has(> .so-streamer[hidden]){grid-template-columns:minmax(0,1fr)}

/* lupa: procurar uma pessoa */
.busca-lugar{position:relative; display:inline-flex}
.busca-menu{position:absolute; right:0; top:calc(100% + 8px); z-index:61; width:320px; padding:12px; display:grid; gap:8px; box-shadow:var(--shadow)}
.busca-menu[hidden]{display:none}
.busca-res{display:grid; gap:2px; max-height:340px; overflow:auto}
.busca-item{display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:10px; color:inherit; text-decoration:none}
.busca-item:hover, .busca-item:focus-visible{background:color-mix(in srgb, var(--text) 7%, transparent); outline:none}
.busca-item .avatar{width:32px; height:32px; font-size:12px; flex:none}
.busca-item b{font-size:14.5px; display:inline-flex; align-items:center; min-width:0}
.busca-dica{margin:4px 2px; font-size:13px; color:var(--muted)}
@media (max-width:680px){ .busca-menu{position:fixed; left:16px; right:16px; top:64px; width:auto} }

/* selos em destaque: estrelas no perfil, faixa abaixo do nome e cartão ao passar o mouse */
.selo{position:relative}
.selo.destaque{border-color:color-mix(in srgb, var(--sun, #f2c14e) 55%, var(--line))}
.vit-estrela{all:unset; position:absolute; top:6px; right:8px; cursor:pointer; font-size:17px; line-height:1; color:var(--muted); padding:2px 3px; border-radius:6px}
.vit-estrela:hover{color:var(--text)}
.vit-estrela.on, .vit-estrela.fixa{color:var(--sun, #f2c14e)}
.vit-estrela.fixa{cursor:default}
.vit-estrela:focus-visible{outline:2px solid var(--brand); outline-offset:1px}
.vit-cab{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; padding:10px 12px; border:1px dashed var(--line-2); border-radius:12px}
.vit-cab span{font-size:13.5px}
.vit-cab small{flex-basis:100%; order:3; font-size:12px; color:var(--muted)}
.vit-cab .btn{margin-left:auto}
.vit-faixa{display:flex; gap:6px; min-height:0}
.vit-faixa:empty{display:none}
.vit-mini .selo-med{width:30px; height:34px}
.vit-card{position:absolute; z-index:95; width:260px; padding:12px; border-radius:14px; background:var(--surface); border:1px solid var(--line-2); box-shadow:0 14px 40px rgba(0,0,0,.3); pointer-events:none}
.vit-card[hidden]{display:none}
.vit-topo{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.vit-topo .avatar{width:34px; height:34px; font-size:12px; flex:none}
.vit-topo b{display:inline-flex; align-items:center; font-size:15px; min-width:0}
.vit-lista{display:grid; grid-template-columns:repeat(4, 1fr); gap:6px}
.vit-it{display:grid; justify-items:center; gap:4px; text-align:center}
.vit-it .selo-med{width:44px; height:50px}
.vit-it span{font-size:11px; line-height:1.2; color:var(--muted)}
.vit-vazio{margin:0; font-size:13px; color:var(--muted)}

/* verificado: selinho à direita do nome · perfil: destaques à direita do nome */
.verif{display:inline-block; width:16px; height:16px; margin-left:5px; vertical-align:-3px; flex:none}
.verif svg{display:block; width:100%; height:100%}
h1 .verif, #profNome .verif{width:26px; height:26px; margin-left:10px; vertical-align:2px}
.prof-nome-linha{display:flex; align-items:center; flex-wrap:wrap; gap:6px 14px}
.prof-nome-linha .vit-faixa{align-items:center}

/* Termos de Uso e Política de Privacidade */
.legal{max-width:820px}
.legal-card{display:grid; gap:12px; line-height:1.6}
.legal-card h1{margin:4px 0 0; font-size:clamp(30px,5vw,44px)}
.legal-card h2{margin:18px 0 0; font-size:22px}
.legal-card p, .legal-card li{margin:0; color:var(--text); font-size:15px}
.legal-card ul{margin:0; padding-left:20px; display:grid; gap:6px}
.legal-card a{color:var(--brand)}
.legal-data{font-size:13px!important; color:var(--muted)!important}
.legal-tab{overflow-x:auto}
.legal-tab table{width:100%; border-collapse:collapse; font-size:14px}
.legal-tab th, .legal-tab td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top}
.legal-tab th{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.legal-ver{margin-top:10px!important; padding-top:14px; border-top:1px solid var(--line)}
/* janela do aceite */
.aceite-card{width:min(520px,100%); gap:12px}
.aceite-pontos{margin:0; padding-left:18px; display:grid; gap:4px; font-size:14px; color:var(--text)}
.aceite-check{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line-2); border-radius:var(--r); font-size:14px; cursor:pointer}
.aceite-check input{margin-top:3px; width:18px; height:18px; accent-color:var(--brand); flex:none}
.aceite-check a{color:var(--brand)}
.aceite-erro{color:var(--bad); font-size:13px}
.conta-regras{font-size:12.5px} .conta-regras a{color:var(--brand)}
.aceite-card > .tag, .legal-card > .tag{justify-self:start}

/* Início: convite para quem ainda não entrou + última live na capa quando offline (02/11/2026) */
.convite{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:26px; align-items:center; margin-top:16px; padding:24px 26px}
.convite-txt{display:grid; gap:12px; justify-items:start}
.convite-txt h2{margin:0; font-size:clamp(28px,4vw,40px); line-height:1}
.convite-txt p{margin:0; font-size:15px; line-height:1.5}
.convite-passos{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.convite-passos li{display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--raised)}
.convite-passos .n{flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-family:var(--display); font-size:22px}
.convite-passos div{display:grid; gap:2px} .convite-passos b{font-size:15px} .convite-passos small{color:var(--muted); font-size:13px}
.inicio-capa.clicavel{cursor:pointer}
.inicio-capa-tag{position:absolute; left:12px; top:12px}
.inicio-play{position:absolute; inset:0; margin:auto; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; font-size:22px; padding-left:4px; box-sizing:border-box; transition:transform .15s ease}
.inicio-capa.clicavel:hover .inicio-play{transform:scale(1.08)}
.inicio-live:not(.on) .inicio-capa.img::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.35))}
@media (max-width:680px){ .convite{grid-template-columns:1fr; gap:18px; padding:20px} }
/* celular: vídeos e posts em fileira que desliza para o lado (a página fica bem mais curta) */
@media (max-width:640px){
  .yt-grid, .ig-grid{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px; gap:12px; margin-inline:-16px; padding:0 16px 6px; scrollbar-width:none}
  .yt-grid::-webkit-scrollbar, .ig-grid::-webkit-scrollbar{display:none}
  .yt-grid > *{flex:0 0 74%; scroll-snap-align:start}
  .ig-grid > *{flex:0 0 46%; scroll-snap-align:start}
}

/* códigos pelo chat da live ("!fig CÓDIGO") */
.cmd-txt{margin:0; font-size:14.5px; color:var(--text)}
.cmd-chat{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cmd-chat code{flex:1; min-width:0; padding:12px 16px; border-radius:var(--r); background:var(--raised); border:1px dashed var(--line-2); font:700 22px/1.1 ui-monospace, Consolas, monospace; letter-spacing:.04em; color:var(--text)}
.cmd-chat code i{font-style:normal; color:var(--sun)}
.cmd-meus{display:grid; gap:6px; margin-top:4px; padding-top:10px; border-top:1px solid var(--line)}
.cmd-meus-t{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.cmd-item{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; font-size:13.5px}
.cmd-item code{font:700 13px/1 ui-monospace, Consolas, monospace; padding:4px 8px; border-radius:6px; background:var(--raised)}
.cmd-item small{color:var(--faint); font-size:12px}
.cmd-item.bom span{color:var(--kick)} .cmd-item.ruim span{color:var(--bad)} .cmd-item.espera span{color:var(--muted)}
.alb-code .cmd-chat code{font-size:18px; padding:10px 14px}
.inter.code-card{grid-template-areas:"tag tag" "premio txt" "premio cmd" "premio dica" "meus meus"}
.inter.code-card .cmd-txt{grid-area:txt} .inter.code-card > .cmd-chat{grid-area:cmd; max-width:520px} .inter.code-card .cmd-meus{grid-area:meus}
.inter.code-card #liveCodeForm{grid-area:dica; display:none} .inter.code-card #liveCodeForm:not([hidden]){display:flex; grid-area:meus}
@media (max-width:680px){ .inter.code-card{grid-template-areas:"tag" "premio" "txt" "cmd" "dica" "meus"} }
.code-row[hidden]{display:none!important}

/* =====================================================================================================================
   Área de controle (/controle): menu lateral próprio, sem o topo e o rodapé do site dos fãs (02/11/2026)
   ===================================================================================================================== */
.ctl-lado[hidden]{display:none!important}
body.modo-controle{padding-left:248px}
body.modo-controle .topbar, body.modo-controle footer.site, body.modo-controle .mobnav{display:none!important}
.ctl-lado{position:fixed; inset:0 auto 0 0; z-index:40; width:248px; box-sizing:border-box; display:flex; flex-direction:column; gap:18px; padding:18px 14px; background:var(--surface); border-right:1px solid var(--line)}
.ctl-marca{display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:4px 8px; color:var(--text); text-decoration:none}
.ctl-marca .logo-img{display:block; height:40px; width:auto}
.ctl-marca b{display:block; font-family:var(--display); font-size:22px; line-height:.9; letter-spacing:.02em}
.ctl-marca small{display:block; margin-top:3px; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.ctl-nav{display:grid; gap:2px}
.ctl-nav a{display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r); color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; transition:background .15s ease, color .15s ease}
.ctl-nav a svg{width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ctl-nav a:hover{background:var(--raised); color:var(--text)}
.ctl-nav a[aria-current="page"]{background:var(--brand-soft); color:var(--brand)}
.ctl-badge{margin-left:auto; padding:2px 8px; border-radius:99px; background:var(--sun-soft); color:var(--sun); font:700 11.5px/1.3 var(--body, inherit); font-style:normal}
.ctl-pe{margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px 6px 0; border-top:1px solid var(--line)}
.ctl-pe .avatar{width:34px; height:34px; flex:none}
.ctl-quem{min-width:0; flex:1; display:grid} .ctl-quem b{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .ctl-quem small{font-size:12px; color:var(--muted)}
.ctl-pe-btn{display:grid; place-items:center; width:34px; height:34px; border-radius:var(--r); border:1px solid var(--line-2); color:var(--muted)}
.ctl-pe-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.ctl-pe-btn:hover{color:var(--text); border-color:var(--text)}
body.modo-controle [data-view="mod"] > .wrap, body.modo-controle [data-view="palco"] > .wrap{max-width:1280px; padding-top:26px}
.ctl-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px}
.ctl-head h1{margin:0}
.ctl-head p{margin:6px 0 0; font-size:14.5px}
.ctl-sec{display:grid; gap:16px; margin-bottom:18px}
.ctl-sec[hidden]{display:none!important}
.ctl-kpis{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px}
.ctl-kpis-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.ctl-kpi{display:grid; gap:4px; align-content:start; padding:16px 18px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); min-width:0}
.ctl-kpi small{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:600}
.ctl-kpi b{font-family:var(--display); font-size:38px; line-height:1; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctl-kpi span{font-size:13px; color:var(--muted)}
.ctl-kpi.on b{color:var(--kick)}
.ctl-barra{display:block; height:6px; margin-top:6px; border-radius:6px; background:var(--raised); overflow:hidden} .ctl-barra i{display:block; height:100%; width:0; border-radius:6px; background:var(--brand); transition:width .6s ease}
.ctl-dupla{display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:16px}
.ctl-card{padding:16px 18px; display:grid; gap:8px; align-content:start}
.ctl-card-h{display:flex; align-items:center; justify-content:space-between; gap:10px} .ctl-card-h h3{margin:0}
.ctl-lista{display:grid}
.ctl-item{display:flex; align-items:center; gap:12px; padding:12px 2px; border-bottom:1px solid var(--line); color:var(--text); text-decoration:none; font-size:14.5px}
.ctl-item:last-child{border-bottom:0}
.ctl-item span{flex:1; min-width:0}
.ctl-item em{font-style:normal; font-weight:700; font-size:13px; color:var(--brand); white-space:nowrap}
.ctl-item:hover em{text-decoration:underline}
.ctl-fa .avatar{width:32px; height:32px; flex:none}
.ctl-pos{flex:none!important; width:22px; text-align:right; font-family:var(--display); font-size:20px; color:var(--muted)}
.ctl-vazio{margin:6px 0; font-size:14px}
.ctl-acoes{display:grid; gap:10px} .ctl-acoes .btn{justify-content:center}
.ctl-codigo{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 12px; border-radius:var(--r); background:var(--raised)}
.ctl-codigo .bigcode{font-size:26px}
.ctl-nega{display:grid; gap:12px; justify-items:start; max-width:520px; margin:40px auto} .ctl-nega h2{margin:0}
body.modo-controle .mod-bloco, body.modo-controle .chat-mod, body.modo-controle .mod-hist, body.modo-controle .mod-selo{margin-top:0; margin-bottom:18px}
body.modo-controle .mod-grid{grid-template-columns:repeat(auto-fit, minmax(380px, 1fr))}
@media (max-width:1100px){ .ctl-kpis{grid-template-columns:repeat(3, minmax(0,1fr))} .ctl-dupla{grid-template-columns:1fr} }
@media (max-width:900px){
  body.modo-controle{padding-left:0}
  .ctl-lado{position:sticky; inset:auto; top:0; width:100%; height:auto; flex-direction:row; align-items:center; gap:10px; padding:10px 12px; border-right:0; border-bottom:1px solid var(--line); overflow-x:auto}
  .ctl-marca small, .ctl-pe{display:none}
  .ctl-nav{display:flex; gap:4px} .ctl-nav a{white-space:nowrap; padding:8px 10px; font-size:13px}
  .ctl-kpis, .ctl-kpis-3{grid-template-columns:repeat(2, minmax(0,1fr))}
  body.modo-controle .mod-grid{grid-template-columns:1fr}
}
body.modo-controle .mod-grid > .grid{grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); align-items:start}
@media (max-width:900px){ body.modo-controle .mod-grid > .grid{grid-template-columns:1fr} }
body.modo-controle .mod-bloco > .sec-head .t h2{display:none}
body.modo-controle.ctl-sem-acesso{padding-left:0}
.ctl-head[hidden]{display:none!important}

/* lista de figurinhas (controle e moderação): linha de ferramenta, sem quebrar */
.fig-list{gap:10px}
.fig-it{grid-template-columns:52px minmax(0,1fr) auto; gap:16px; padding:12px 14px; background:var(--surface)}
.fig-it .fig-art-mini{width:52px}
.fig-it-info{min-width:0; display:grid; gap:7px}
.fig-it-tit{display:flex; align-items:center; gap:8px; min-width:0}
.fig-it-tit b{font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.fig-it-tit .tag{flex:none}
.fig-it-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:12.5px; color:var(--muted)}
.fig-it-cmd{display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:7px; border:1px dashed var(--line-2); background:var(--raised); color:var(--muted); font:600 12.5px/1.2 ui-monospace, Consolas, monospace; cursor:pointer}
.fig-it-cmd b{color:var(--sun); letter-spacing:.06em}
.fig-it-cmd:hover{border-color:var(--text); color:var(--text)}
.fig-it-pegos{display:inline-flex; align-items:center; gap:6px; white-space:nowrap} .fig-it-pegos b{color:var(--text)}
.fig-it-barra{display:inline-block; width:56px; height:5px; border-radius:5px; background:var(--raised); overflow:hidden} .fig-it-barra i{display:block; height:100%; background:var(--sun)}
.fig-it .acoes{flex-wrap:nowrap; align-items:center}
.fig-it-st{display:inline-flex; align-items:center; gap:6px; margin-right:4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.fig-it-st::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--line-2)}
.fig-it-st.on{color:var(--kick)} .fig-it-st.on::before{background:var(--kick); box-shadow:0 0 0 3px color-mix(in srgb, var(--kick) 25%, transparent)}
.fig-it-apagar{color:var(--bad)}
body.modo-controle [data-ctl="figurinhas"]{grid-template-columns:minmax(360px,440px) minmax(0,1fr)!important}
@media (max-width:1100px){ body.modo-controle [data-ctl="figurinhas"]{grid-template-columns:1fr!important} }
@media (max-width:640px){ .fig-it{grid-template-columns:44px minmax(0,1fr)} .fig-it .acoes{grid-column:1 / -1; flex-wrap:wrap; justify-content:flex-start} }
.fig-it{grid-template-areas:"art tit tit" "art meta acoes"; row-gap:8px; align-items:center}
.fig-it > .fig-art-mini{grid-area:art; align-self:center}
.fig-it-info{display:contents}
.fig-it-tit{grid-area:tit} .fig-it-meta{grid-area:meta} .fig-it > .acoes{grid-area:acoes}
.fig-it-tit .fig-it-st{margin-left:auto; flex:none}
@media (max-width:640px){ .fig-it{grid-template-columns:44px minmax(0,1fr); grid-template-areas:"art tit" "art meta" "acoes acoes"} }
.fig-it-meta{flex-wrap:nowrap; min-width:0; overflow:hidden}
.fig-it-meta > *{flex:none}
body.modo-controle [data-ctl="figurinhas"]{grid-template-columns:minmax(340px,400px) minmax(0,1fr)!important}
@media (max-width:1100px){ body.modo-controle [data-ctl="figurinhas"]{grid-template-columns:1fr!important} }
@media (max-width:640px){ .fig-it-meta{flex-wrap:wrap} }
@media (max-width:640px){ .fig-it-tit{flex-wrap:wrap; row-gap:4px} .fig-it-tit b{white-space:normal; flex:1 1 100%} .fig-it-tit .fig-it-st{margin-left:0} }
.fig-list-head{padding:18px 20px 16px; gap:12px; align-items:center; border-bottom:1px solid var(--line)} .fig-list-head h3{line-height:1} .fig-list-head .tag{margin-top:1px}
