:root{--bg:#070707;--side:#0a0a0a;--card:#111111;--card2:#181818;--linha:#232323;--txt:#ececec;--mut:#8a8a8a;--ouro:#d4af37;--ouro2:#ecc95a;--ouro-bg:#1d180a;--azul:#3b6fd8;--azul-bg:#0e1730;--verm:#e5534b;--verm-bg:#2a1214;--verde:#3ccf7a;--sombra:0 10px 30px #000a}
[data-tema=claro]{--bg:#f5f5f5;--side:#ffffff;--card:#ffffff;--card2:#f0f0f0;--linha:#e2e2e2;--txt:#141414;--mut:#6b6b6b;--ouro:#a8841d;--ouro2:#a8841d;--ouro-bg:#f8efd6;--azul:#2a5bc4;--azul-bg:#e6edfb;--verm:#c2410c;--verm-bg:#fdeee5;--verde:#15803d;--sombra:0 10px 30px #0002}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--txt);font:14px/1.45 "Segoe UI",Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
svg.i{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== login ===== */
.login{display:grid;place-items:center;min-height:100vh;padding:20px}
.caixa{width:100%;max-width:380px;background:var(--card);border:1px solid var(--linha);border-radius:16px;padding:32px}
.caixa .logo{margin-bottom:18px}
.caixa h1{margin:0;font-size:22px}
.caixa .sub{margin:2px 0 22px;color:var(--mut)}
.caixa label{display:block;font-size:13px;color:var(--mut);margin-bottom:6px}
.caixa input{width:100%;margin-bottom:12px;background:var(--card2);border:1px solid var(--linha);border-radius:10px;padding:10px 12px}
.caixa input:focus{outline:none;border-color:var(--ouro)}
.caixa .btn{width:100%;background:var(--ouro);color:#1a1307;font-weight:600;padding:11px;border-radius:10px}
.msg{min-height:22px;font-size:14px;margin:12px 0 0;word-break:break-all}
.msg a{color:var(--ouro);text-decoration:underline}
.msg.erro{color:var(--verm)}
.nota{font-size:12px;color:var(--mut);margin:14px 0 0}

/* ===== estrutura ===== */
.logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.logo-ic{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#f3d77a,#b8901f);color:#1a1307;display:grid;place-items:center;font-size:16px}
.layout{display:flex;min-height:100vh}
aside{width:232px;flex:none;background:var(--side);border-right:1px solid var(--linha);position:sticky;top:0;height:100vh;padding:14px 10px;overflow-y:auto;transition:margin .2s}
aside .logo{padding:2px 6px 18px}
.sec{font-size:11px;letter-spacing:.09em;color:var(--mut);font-weight:600;padding:12px 8px 6px;text-transform:uppercase}
.item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--mut)}
.item:hover{background:var(--card2);color:var(--txt)}
.item.on{background:var(--azul-bg);color:var(--txt);font-weight:600;box-shadow:inset 3px 0 0 var(--azul)}
.item.on svg{color:var(--azul)}
.recolhido aside{margin-left:-232px}
.principal{flex:1;min-width:0}

.topo{height:56px;display:flex;align-items:center;gap:14px;padding:0 20px;border-bottom:1px solid var(--linha);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);z-index:20}
.trilha{color:var(--mut);display:flex;align-items:center;gap:6px}
.trilha b{color:var(--txt);font-weight:600}
.dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.ic{width:36px;height:36px;border-radius:50%;border:1px solid var(--linha);display:grid;place-items:center;color:var(--mut)}
.ic:hover{color:var(--txt);border-color:var(--mut)}
.ic img{width:20px;height:14px;border-radius:2px;object-fit:cover}
.user{display:flex;align-items:center;gap:9px;border:1px solid var(--linha);border-radius:999px;padding:4px 4px 4px 14px;font-weight:600}
.user:hover{border-color:var(--mut)}
.user .nm{max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:var(--ouro-bg);color:var(--ouro)}
.avatar{width:28px;height:28px;border-radius:50%;background:var(--ouro);color:#1a1307;display:grid;place-items:center;font-size:12px;font-weight:700}

/* menus suspensos */
.menu{position:relative}
.drop{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:var(--card);border:1px solid var(--linha);border-radius:12px;padding:6px;box-shadow:var(--sombra);z-index:30;max-height:340px;overflow-y:auto}
.menu.aberto .drop{display:block}
.drop button,.drop a{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border-radius:8px;white-space:nowrap}
.drop button:hover,.drop a:hover{background:var(--card2)}
.drop button.on{color:var(--ouro);font-weight:600}
.drop img{width:20px;height:14px;border-radius:2px}
.drop .info{padding:8px 10px;font-size:12.5px;color:var(--mut);border-bottom:1px solid var(--linha);margin-bottom:4px}
.filtros .drop{left:0;right:auto}

/* ===== niche finder ===== */
main{padding:28px 28px 60px;max-width:1880px;margin:0 auto}
.cab-nf{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.cab-nf .big{width:46px;height:46px;border-radius:13px;background:var(--azul-bg);border:1px solid var(--azul);color:var(--azul);display:grid;place-items:center}
.cab-nf .big svg{width:24px;height:24px}
.cab-nf h1{margin:0;font-size:21px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cab-nf p{margin:2px 0 0;color:var(--mut)}
.conta{font-size:12px;font-weight:600;color:var(--ouro);border:1px solid var(--ouro);border-radius:999px;padding:2px 10px}

.abas{display:flex;gap:6px;overflow-x:auto;padding-bottom:10px;border-bottom:1px solid var(--linha);scrollbar-width:thin}
.aba{display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;border:1px solid transparent;color:var(--mut);white-space:nowrap;font-weight:500}
.aba:hover{color:var(--txt)}
.aba .n{font-size:11.5px;background:var(--card2);color:var(--mut);padding:1px 8px;border-radius:999px}
.aba.on{border-color:var(--ouro);color:var(--ouro2);background:var(--ouro-bg)}
.aba.on .n{background:var(--ouro);color:#120e02}
.linha-desc{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0}
.desc{color:var(--mut);font-size:13px}
.bt{display:flex;align-items:center;gap:8px;border:1px solid var(--linha);border-radius:10px;padding:8px 14px;color:var(--txt)}
.bt:hover{border-color:var(--mut)}
.bt.on{border-color:var(--ouro);color:var(--ouro2)}
.bt.on svg{fill:currentColor}

.filtros{display:flex;flex-wrap:wrap;gap:8px;background:var(--card);border:1px solid var(--linha);border-radius:14px;padding:10px;margin-bottom:18px}
.busca{flex:1;min-width:240px;display:flex;align-items:center;gap:9px;background:var(--card2);border:1px solid var(--linha);border-radius:10px;padding:0 12px;color:var(--mut)}
.busca input{flex:1;background:none;border:0;outline:none;padding:9px 0;color:var(--txt)}
.fbtn{display:flex;align-items:center;gap:6px;border:1px solid var(--linha);border-radius:10px;padding:9px 12px;white-space:nowrap}
.fbtn:hover{border-color:var(--mut)}
.fbtn.ativo{border-color:var(--ouro);color:var(--ouro);background:var(--ouro-bg)}
.fbtn svg{width:14px;height:14px}

.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--linha);border-top:2px solid var(--linha);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:12px;transition:border-color .15s}
.card:hover{border-color:var(--mut)}
.card.quente{border-top-color:var(--ouro)}
.c-top{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:start}
.av{position:relative;width:44px;height:44px;border-radius:50%;background:var(--card2);display:grid;place-items:center;font-weight:700;color:var(--mut)}
.av img.f{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.av img.b{position:absolute;right:-3px;top:-3px;width:16px;height:16px;border-radius:50%;object-fit:cover;border:2px solid var(--card)}
.c-nome{font-weight:600;font-size:15px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-nome:hover{color:var(--ouro)}
.c-sub{font-size:12.5px;color:var(--mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px}
.c-dir{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.fav{color:var(--mut)}
.fav:hover,.fav.on{color:var(--verm)}
.fav.on svg{fill:currentColor}
.tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:6px;border:1px solid var(--ouro);color:var(--ouro2);background:var(--ouro-bg);white-space:nowrap}
.tag.novo{border-color:var(--verde);color:var(--verde);background:transparent}
.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.thumbs a{position:relative;display:block;border-radius:7px;overflow:hidden;aspect-ratio:16/9;background:var(--card2)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.thumbs a:hover img{transform:scale(1.05)}
.thumbs span{position:absolute;right:4px;bottom:4px;background:#000c;color:#fff;font-size:10.5px;font-weight:600;padding:1px 5px;border-radius:4px}
.nums{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--linha);border-radius:10px;text-align:center}
.nums div{padding:8px 2px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.nums div+div{border-left:1px solid var(--linha)}
.nums b{display:block;color:var(--txt);font-size:15px;letter-spacing:0}
.nums .dest b{color:var(--ouro)}
.pe{font-size:12px;color:var(--mut);display:flex;flex-direction:column;gap:4px}
.pe span{display:flex;align-items:center;gap:6px}
.pe svg{width:13px;height:13px}
.vazio{color:var(--mut);padding:60px 0;text-align:center;grid-column:1/-1}
.mais{display:block;margin:24px auto 0;border:1px solid var(--linha);border-radius:10px;padding:9px 22px}
.mais:hover{border-color:var(--mut)}
.fundo{display:none}

@media (max-width:860px){
  aside{position:fixed;left:0;z-index:40;margin-left:-232px}
  .menu-aberto aside{margin-left:0}
  .menu-aberto .fundo{display:block;position:fixed;inset:0;background:#0007;z-index:35}
  .recolhido aside{margin-left:-232px}
  main{padding:18px 14px 50px}
  .topo{padding:0 12px;gap:8px}
  .trilha span,.trilha .sep,.user .nm,.user .pill{display:none}
  .user{padding:3px}
  .grade{grid-template-columns:1fr}
  .busca{min-width:100%}
}
.fbtn img{width:18px;height:12px;border-radius:2px;object-fit:cover}

/* sidebar sempre azul-escuro, inclusive no tema claro */
.logo{color:var(--ouro2)}
h1{color:var(--txt)}
.conta{color:var(--ouro2)}
.fbtn.ativo{color:var(--ouro2)}
.caixa .btn{background:linear-gradient(135deg,#f3d77a,#c9a43a);color:#120e02}
.busca:focus-within{border-color:var(--azul)}
.thumbs a:hover{outline:1px solid var(--azul)}

/* ===== lives ===== */
.vivo{margin-left:auto;font-size:9.5px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--verm);padding:1px 6px;border-radius:5px}
.palco{display:grid;grid-template-columns:1fr 360px;gap:16px;margin-bottom:30px}
.video{position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--linha);border-radius:14px;overflow:hidden}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sem-live{display:grid;place-items:center;text-align:center;color:var(--mut);padding:30px}
.sem-live b{display:block;color:var(--txt);font-size:18px;margin:10px 0 4px}
.sem-live .proxima{display:inline-block;margin-top:12px;color:var(--ouro2);border:1px solid var(--ouro);border-radius:999px;padding:4px 14px;font-weight:600}
.v-info{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.v-info h2{margin:0;font-size:18px}
.chat{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--linha);border-radius:14px;min-height:0;height:100%;max-height:calc((100vw - 232px - 56px - 376px) * 9 / 16 + 60px)}
.chat-cab{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--linha);font-weight:600}
.chat-cab .on-n{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--mut);font-weight:500}
.chat-cab .on-n::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verde)}
.msgs{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:8px;min-height:260px}
.msg-c{font-size:13.5px;line-height:1.4;word-wrap:break-word;position:relative;padding-right:40px}
.msg-c .n{font-weight:600;color:var(--azul);margin-right:6px}
.msg-c.mago .n{color:var(--ouro2)}
.msg-c.mago .n::after{content:"MAGO";font-size:9px;font-weight:700;margin-left:5px;padding:1px 5px;border-radius:4px;background:var(--ouro);color:#120e02;vertical-align:1px}
.msg-c .acoes{position:absolute;right:0;top:0;display:none;gap:4px}
.msg-c:hover .acoes{display:flex}
.acoes button{color:var(--mut)}.acoes button:hover{color:var(--verm)}
.acoes svg{width:15px;height:15px}
.chat-vazio{color:var(--mut);text-align:center;margin:auto;font-size:13px}
.chat-form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--linha)}
.chat-form input{flex:1;min-width:0;background:var(--card2);border:1px solid var(--linha);border-radius:10px;padding:9px 12px;outline:none}
.chat-form input:focus{border-color:var(--azul)}
.chat-form button{width:40px;border-radius:10px;background:var(--ouro);color:#120e02;display:grid;place-items:center}
.chat-form button:disabled{opacity:.4;cursor:default}
.chat-aviso{font-size:12px;color:var(--verm);padding:0 12px 8px;min-height:0}
.titulo-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px}
.titulo-sec h2{margin:0;font-size:17px}
.grav{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.g-card{background:var(--card);border:1px solid var(--linha);border-radius:14px;overflow:hidden;cursor:pointer;position:relative}
.g-card:hover{border-color:var(--azul)}
.g-card.on{border-color:var(--ouro)}
.g-capa{aspect-ratio:16/9;background:var(--card2) center/cover}
.g-capa::after{content:"";position:absolute;inset:0;aspect-ratio:auto}
.g-txt{padding:10px 12px}
.g-txt b{display:block;font-size:14px;margin-bottom:3px}
.g-txt span{font-size:12px;color:var(--mut)}
.g-tema{font-size:11px;color:var(--ouro2);border:1px solid var(--ouro);border-radius:6px;padding:1px 7px;margin-left:6px}
.g-edit{position:absolute;top:8px;right:8px;display:none;gap:6px}
.g-card:hover .g-edit{display:flex}
.g-edit button{width:30px;height:30px;border-radius:8px;background:#000b;color:#fff;display:grid;place-items:center}
.g-edit svg{width:15px;height:15px}
/* painel do mago */
.admin{background:var(--card);border:1px dashed var(--ouro);border-radius:14px;padding:14px;margin-bottom:22px}
.admin h3{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ouro2)}
.admin .lin{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.admin input,.admin select{flex:1;min-width:160px;background:var(--card2);border:1px solid var(--linha);border-radius:10px;padding:9px 12px;outline:none}
.admin input:focus{border-color:var(--azul)}
.b-ouro{background:var(--ouro);color:#120e02;font-weight:600;border-radius:10px;padding:9px 16px}
.b-verm{background:var(--verm);color:#fff;font-weight:600;border-radius:10px;padding:9px 16px}
.admin .ok{font-size:12.5px;color:var(--mut)}
.modal{position:fixed;inset:0;background:#000a;display:none;place-items:center;z-index:60;padding:16px}
.modal.on{display:grid}
.modal .admin{width:100%;max-width:520px;margin:0;border-style:solid}
@media (max-width:1100px){.palco{grid-template-columns:1fr}.chat{max-height:460px;height:460px}}
.on-n[hidden],.vivo[hidden]{display:none!important}

/* ===== lives: tela + chat ocupando a tela toda ===== */
[data-pagina=lives] main{max-width:none;padding:16px 20px 20px}
[data-pagina=lives] .cab-nf{margin-bottom:12px}
[data-pagina=lives] .admin{margin-bottom:12px;padding:10px 14px}
[data-pagina=lives] .palco{grid-template-columns:1fr 420px;gap:14px;margin:0;height:calc(100vh - var(--palco-top,170px) - 20px);min-height:460px}
[data-pagina=lives] .palco>div:first-child{display:flex;flex-direction:column;min-height:0}
[data-pagina=lives] .video{aspect-ratio:auto;flex:1;min-height:0}
[data-pagina=lives] .chat{max-height:none;height:100%}
[data-pagina=lives] .msgs{min-height:0}
@media (max-width:1100px){[data-pagina=lives] .palco{grid-template-columns:1fr 340px}}
@media (max-width:860px){
  [data-pagina=lives] .palco{grid-template-columns:1fr;height:auto}
  [data-pagina=lives] .video{aspect-ratio:16/9;flex:none}
  [data-pagina=lives] .chat{height:70vh}
}
[data-pagina=lives] .v-info:empty{display:none}