/* Os portais do plicflix (developers e admin): as cores do logo. */
:root { --fundo:#0B0820; --painel:#15102E; --borda:#ffffff1f; --texto:#f2eefc; --suave:#b9b2d4; --magenta:#DC0DF7; --roxo:#A104F8; --ciano:#19D3F0; --verde:#2BD96B; --vermelho:#FF4D5E; --amarelo:#FFC23A; }
* { box-sizing: border-box; }
body { margin:0; background:var(--fundo); color:var(--texto); font:15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color:var(--ciano); text-decoration:none; } a:hover { text-decoration:underline; }
.topo { display:flex; align-items:center; gap:24px; padding:12px 32px; background:#0B0820ee; border-bottom:1px solid var(--borda); position:sticky; top:0; z-index:5; backdrop-filter: blur(8px); }
.marca { display:flex; align-items:center; gap:10px; color:var(--texto); font-weight:800; letter-spacing:.5px; }
.marca img { height:34px; } .marca span { font-size:13px; text-transform:uppercase; color:var(--suave); border:1px solid var(--borda); padding:2px 8px; border-radius:99px; }
.site-admin .marca span { color:#000; background:var(--amarelo); border-color:var(--amarelo); }
.topo nav { display:flex; gap:4px; flex:1; flex-wrap:wrap; } .topo nav a { color:var(--suave); padding:6px 12px; border-radius:8px; }
.topo nav a.ativo, .topo nav a:hover { color:var(--texto); background:#ffffff12; text-decoration:none; }
.quem { display:flex; gap:12px; align-items:center; color:var(--suave); } .quem form { margin:0; }
main { max-width:1180px; margin:0 auto; padding:28px 32px 64px; }
.rodape { text-align:center; color:#ffffff55; font-size:12px; padding:24px; }
h1 { font-size:30px; margin:0 0 6px; } h2 { font-size:21px; margin:32px 0 12px; } h3 { font-size:16px; margin:20px 0 10px; color:var(--suave); font-weight:700; }
.sub { color:var(--suave); margin:0 0 24px; }
.cartao { background:var(--painel); border:1px solid var(--borda); border-radius:14px; padding:20px; margin-bottom:16px; }
.grade { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.numero { font-size:30px; font-weight:900; } .numero small { display:block; font-size:13px; font-weight:500; color:var(--suave); }
.botao, button { display:inline-block; background:var(--magenta); color:#fff; border:0; border-radius:10px; padding:10px 18px; font:inherit; font-weight:700; cursor:pointer; }
.botao:hover, button:hover { filter:brightness(1.1); text-decoration:none; }
.botao.secundario, button.secundario { background:#ffffff1a; } .botao.perigo, button.perigo { background:var(--vermelho); } button.verde { background:#14a352; }
button.link { background:none; color:var(--ciano); padding:0; font-weight:500; }
button[disabled] { opacity:.4; cursor:not-allowed; }
form.linha { display:flex; gap:10px; align-items:end; flex-wrap:wrap; }
label { display:block; font-weight:600; margin:14px 0 6px; } label small { font-weight:400; color:var(--suave); margin-left:6px; }
input, textarea, select { width:100%; background:#0b0820; color:var(--texto); border:1px solid #ffffff33; border-radius:10px; padding:10px 12px; font:inherit; }
textarea { min-height:110px; resize:vertical; } input:focus, textarea:focus { outline:2px solid var(--roxo); border-color:transparent; }
.dica { color:var(--suave); font-size:13px; margin-top:4px; }
.aviso { padding:12px 16px; border-radius:10px; margin-bottom:18px; } .aviso.ok { background:#14a35230; border:1px solid #14a352; } .aviso.erro { background:#ff4d5e26; border:1px solid var(--vermelho); }
.aviso.atencao { background:#ffc23a1f; border:1px solid var(--amarelo); }
table { width:100%; border-collapse:collapse; } th, td { text-align:left; padding:10px 8px; border-bottom:1px solid var(--borda); vertical-align:middle; } th { color:var(--suave); font-weight:600; font-size:13px; }
.selo { display:inline-block; padding:2px 10px; border-radius:99px; font-size:12px; font-weight:700; background:#ffffff1a; }
.selo.publicado, .selo.ativo, .selo.paga, .selo.online { background:#14a35233; color:#5cf09a; }
.selo.em_revisao, .selo.aguardando_pagamento, .selo.aberta, .selo.instavel { background:#ffc23a26; color:var(--amarelo); }
.selo.recusado, .selo.suspenso, .selo.offline, .selo.cancelada { background:#ff4d5e26; color:#ff8a95; }
.selo.rascunho { background:#19d3f026; color:var(--ciano); }
.conferencia { list-style:none; padding:0; margin:0; } .conferencia li { display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--borda); }
.conferencia .sinal { font-weight:900; width:20px; } .conferencia .ok .sinal { color:var(--verde); } .conferencia .falta .sinal { color:var(--vermelho); }
.conferencia small { display:block; color:var(--suave); }
.abas { display:flex; gap:6px; border-bottom:1px solid var(--borda); margin:20px 0; flex-wrap:wrap; } .abas a { padding:10px 14px; color:var(--suave); border-bottom:2px solid transparent; }
.abas a.ativo { color:var(--texto); border-color:var(--magenta); }
.duas { display:grid; grid-template-columns: 1fr 1fr; gap:24px; } @media (max-width:900px){ .duas { grid-template-columns:1fr; } main { padding:20px 16px; } .topo { padding:10px 16px; flex-wrap:wrap; } }
.midia { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.midia .cartao img, .midia .cartao video { width:100%; border-radius:8px; background:#000; max-height:220px; object-fit:contain; }
.miniaturas { display:flex; gap:10px; flex-wrap:wrap; } .miniaturas figure { margin:0; width:180px; } .miniaturas img { width:180px; border-radius:6px; }
.chave { font-family: ui-monospace, monospace; font-size:16px; background:#000; padding:14px; border-radius:10px; word-break:break-all; border:1px dashed var(--amarelo); }
.heroi { padding:56px 0 24px; } .heroi h1 { font-size:46px; line-height:1.1; } .heroi p { font-size:19px; color:var(--suave); max-width:720px; }
.passos { counter-reset:p; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.passos .cartao::before { counter-increment:p; content:counter(p); display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--roxo); font-weight:900; margin-bottom:8px; }
.doc { max-width:880px; } .doc pre { background:#000; padding:14px; border-radius:10px; overflow:auto; } .doc code { font-family:ui-monospace, monospace; font-size:13.5px; }
.doc table { margin:12px 0; } .doc blockquote { border-left:3px solid var(--amarelo); margin:12px 0; padding:4px 16px; background:#ffc23a12; }
.docs-lado { display:grid; grid-template-columns:220px 1fr; gap:32px; } .docs-lado nav a { display:block; padding:6px 0; color:var(--suave); } .docs-lado nav a.ativo { color:var(--texto); font-weight:700; }
@media (max-width:900px){ .docs-lado { grid-template-columns:1fr; } }
/* a prévia (imita o app) */
.previa h3 { margin-top:24px; }
.p-destaque { position:relative; aspect-ratio: 2.2/1; border-radius:14px; overflow:hidden; background:#000; }
.p-fundo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center; } .vazio { display:grid; place-items:center; color:#ffffff66; background:linear-gradient(135deg,#1d1450,#0b0820); height:100%; min-height:120px; border-radius:8px; }
.p-sombra { position:absolute; inset:0; background:linear-gradient(90deg,#000e 0%,#0009 38%,transparent 70%), linear-gradient(180deg,transparent 45%, #0B0820 100%); }
.p-conteudo { position:absolute; left:4%; bottom:12%; width:46%; }
.p-logo { max-width:100%; max-height:120px; object-fit:contain; display:block; } .p-nome { font-size:34px; font-weight:900; }
.p-meta { margin:10px 0; color:#ddd; font-size:13px; font-weight:600; } .p-online { color:var(--verde); }
.p-idade { display:inline-grid; place-items:center; min-width:22px; height:22px; border-radius:4px; font-weight:900; font-size:11px; color:#fff; background:#1d1815; }
.p-idade.iL { background:#0C9447; } .p-idade.i10 { background:#0F7DC2; } .p-idade.i12 { background:#F8C411; color:#000; } .p-idade.i14 { background:#E67824; } .p-idade.i16 { background:#DB2827; }
.p-sub { font-size:15px; margin:0 0 12px; text-shadow:0 1px 6px #000; }
.p-botoes { display:flex; gap:10px; } .p-jogar { background:#fff; color:#000; font-weight:800; padding:9px 18px; border-radius:8px; } .p-info { background:#6060708c; padding:9px 16px; border-radius:8px; font-weight:700; }
.p-linha { display:flex; gap:32px; flex-wrap:wrap; align-items:flex-start; }
.p-poster { position:relative; width:180px; aspect-ratio:2/3; border-radius:10px; overflow:hidden; background:#000; } .p-poster img { width:100%; height:100%; object-fit:cover; }
.p-poster-texto { position:absolute; left:0; right:0; bottom:0; padding:30px 10px 10px; background:linear-gradient(180deg,transparent,#000d); } .p-poster-texto small { display:block; color:#ccc; }
.p-cel-tela { position:relative; width:220px; aspect-ratio:9/16; border-radius:22px; overflow:hidden; border:6px solid #222; background:#000; }
.p-cel-tela > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% center; }
.p-cel-sombra { position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%, #000b 68%, #0B0820); }
.p-cel-conteudo { position:absolute; left:10px; right:10px; bottom:18px; display:grid; gap:10px; justify-items:center; } .p-cel-conteudo .p-logo { max-height:60px; }
.p-pagina { display:grid; grid-template-columns: 2fr 1fr; gap:20px; } .p-galeria { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; } .p-galeria img, .p-galeria video { width:100%; border-radius:8px; }
.p-galeria video { grid-column: 1 / -1; } .p-painel { background:var(--painel); border:1px solid var(--borda); border-radius:12px; padding:14px; font-size:14px; }
.p-painel dl { display:grid; grid-template-columns:auto 1fr; gap:6px 12px; } .p-painel dt { color:var(--suave); } .p-painel dd { margin:0; }
.p-tags span { display:inline-block; background:#66c0f422; color:#8fd3ff; padding:3px 8px; border-radius:4px; margin:2px; font-size:12px; }
.p-sobre { grid-column: 1 / -1; color:#dad6e8; }
@media (max-width:900px){ .p-pagina { grid-template-columns:1fr; } .p-conteudo { width:80%; } }
/* o campo de arquivo divide a linha com o botão (sem cobrir o botão do cartão ao lado) */
form.linha input[type=file] { flex: 1 1 160px; min-width: 0; width: auto; }
form.linha button { flex: 0 0 auto; }
.midia .cartao { overflow: hidden; min-width: 0; }