/* ==========================================================
   SHARKILHA — O painel das produtoras
   Tema: oceano profundo / tubarão
========================================================== */
* { margin:0; padding:0; box-sizing:border-box; }

:root {
    --fundo0:#040d1a;
    --fundo1:#071626;
    --carta:rgba(10, 28, 48, .72);
    --carta-solida:#0a1c30;
    --vidro:rgba(255,255,255,.04);
    --borda:rgba(120, 200, 255, .12);
    --borda-forte:rgba(0, 224, 255, .35);
    --ciano:#00e0ff;
    --ciano-escuro:#0092b8;
    --azul:#3b82f6;
    --texto:#e8f4ff;
    --texto2:#8fb0c9;
    --ok:#34d399;
    --aviso:#fbbf24;
    --erro:#fb7185;
    --info:#60a5fa;
    --roxo:#a78bfa;
    --ouro:#f5c542;
    --grad:linear-gradient(135deg, #00e0ff 0%, #3b82f6 100%);
    --grad-suave:linear-gradient(135deg, rgba(0,224,255,.15), rgba(59,130,246,.15));
    --sombra:0 20px 50px rgba(0,0,0,.45);
    --raio:18px;
}

html { scroll-behavior:smooth; }
body {
    font-family:'Inter', sans-serif;
    background:var(--fundo0);
    color:var(--texto);
    min-height:100vh;
    overflow-x:hidden;
}
h1,h2,h3,h4,.brand-nome { font-family:'Sora', sans-serif; }
a { color:var(--ciano); text-decoration:none; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,224,255,.2); border-radius:10px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,224,255,.4); }
::selection { background:rgba(0,224,255,.3); }

/* ---------- FUNDO OCEANO ---------- */
#oceano-bg { position:fixed; inset:0; z-index:-1; background:radial-gradient(ellipse at 20% -10%, #0a2740 0%, var(--fundo0) 55%), var(--fundo0); overflow:hidden; }
.oceano-glow { position:absolute; border-radius:50%; filter:blur(120px); opacity:.35; animation:derivar 18s ease-in-out infinite alternate; }
.oceano-glow.g1 { width:520px; height:520px; background:#0e3a5c; top:-140px; left:-120px; }
.oceano-glow.g2 { width:620px; height:620px; background:#082f4e; bottom:-220px; right:-160px; animation-delay:-9s; }
@keyframes derivar { from { transform:translate(0,0) scale(1); } to { transform:translate(60px,40px) scale(1.15); } }

.bolha { position:absolute; bottom:-60px; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), rgba(0,224,255,.06)); border:1px solid rgba(0,224,255,.15); animation:subirBolha linear infinite; }
@keyframes subirBolha { from { transform:translateY(0) translateX(0); opacity:0; } 10% { opacity:.7; } to { transform:translateY(-110vh) translateX(40px); opacity:0; } }

/* ---------- ANIMAÇÕES ---------- */
.anim-subir { animation:subir .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes subir { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:translateY(0); } }
.anim-flutuar { animation:flutuar 5s ease-in-out infinite; }
@keyframes flutuar { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-16px); } }
.anim-pulsar { animation:pulsar 1.6s ease-in-out infinite; }
@keyframes pulsar { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); } }
@keyframes aparecer { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes nadarLogo { 0%,100% { transform:translateX(0) rotate(0deg); } 50% { transform:translateX(4px) rotate(-4deg); } }

/* ---------- PÁGINAS ---------- */
.page { display:none; min-height:100vh; }
.page.ativa { display:block; }

/* ---------- MARCA ---------- */
.brand { display:flex; align-items:center; gap:12px; cursor:pointer; }
.brand-logo svg { display:block; animation:nadarLogo 6s ease-in-out infinite; }
.brand-nome { font-size:1.35rem; font-weight:800; letter-spacing:-.5px; display:inline-flex; align-items:center; }
.brand-nome b { color:var(--ciano); }
.brand-nome .chip { margin-left:10px; }
.centro-brand { justify-content:center; margin-bottom:18px; }

/* ---------- BOTÕES ---------- */
.btn { border:none; cursor:pointer; font-family:'Inter'; font-weight:700; font-size:.9rem; padding:11px 20px; border-radius:12px; display:inline-flex; align-items:center; gap:8px; transition:.25s; color:var(--texto); background:var(--vidro); justify-content:center; }
.btn i { font-size:1.1rem; }
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:translateY(0) scale(.98); }
.btn-primary { background:var(--grad); color:#03121f; box-shadow:0 8px 24px rgba(0,224,255,.25); }
.btn-primary:hover { box-shadow:0 12px 32px rgba(0,224,255,.4); }
.btn-vidro { background:var(--vidro); border:1px solid var(--borda); }
.btn-vidro:hover { border-color:var(--borda-forte); }
.btn-ghost { background:transparent; color:var(--texto2); }
.btn-ghost:hover { color:var(--texto); }
.btn-perigo { background:linear-gradient(135deg,#fb7185,#e11d48); color:white; }
.btn-perigo-ghost { background:rgba(251,113,133,.08); color:var(--erro); border:1px solid rgba(251,113,133,.25); }
.btn-ok { background:linear-gradient(135deg,#34d399,#0d9488); color:#03120d; }
.btn-aviso { background:linear-gradient(135deg,#fbbf24,#d97706); color:#1f1200; }
.btn-grande { padding:15px 28px; font-size:1rem; border-radius:14px; }
.btn-full { width:100%; }
.btn-mini { padding:6px 12px; font-size:.75rem; border-radius:8px; }
.btn-icone { background:var(--vidro); border:1px solid var(--borda); color:var(--texto); width:42px; height:42px; border-radius:12px; cursor:pointer; font-size:1.25rem; display:flex; align-items:center; justify-content:center; transition:.25s; position:relative; }
.btn-icone:hover { border-color:var(--borda-forte); }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }

/* ---------- CAMPOS ---------- */
.campo { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; text-align:left; }
.campo label { font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--texto2); }
.campo input, .campo select, .campo textarea {
    background:rgba(3,14,26,.7); border:1px solid var(--borda); color:var(--texto);
    padding:13px 16px; border-radius:12px; font-family:'Inter'; font-size:.95rem; outline:none; transition:.25s; width:100%;
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color:var(--ciano); box-shadow:0 0 0 3px rgba(0,224,255,.12); }
.campo textarea { resize:vertical; min-height:90px; }
.campo textarea.txt-linha { resize:none; min-height:48px; max-height:220px; overflow-y:auto; line-height:1.5; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
.texto-suave { color:var(--texto2); font-size:.95rem; line-height:1.6; }
.campo-senha { position:relative; }
.campo-senha input { padding-right:48px; }
.olho-senha { position:absolute; right:15px; bottom:14px; cursor:pointer; color:var(--texto2); font-size:1.15rem; transition:.25s; }
.olho-senha:hover { color:var(--ciano); }
.login-extras { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-4px 0 18px; flex-wrap:wrap; }
.login-extras label { display:flex; align-items:center; gap:7px; cursor:pointer; font-size:.82rem; color:var(--texto2); font-weight:600; }
.login-extras input[type=checkbox] { width:16px; height:16px; accent-color:var(--ciano); }
.link-esqueci { font-size:.82rem; font-weight:700; cursor:pointer; }
.rec-codigo-demo { background:rgba(0,224,255,.08); border:1px dashed var(--borda-forte); border-radius:12px; padding:14px; text-align:center; margin:14px 0; }
.rec-codigo-demo b { font-size:1.6rem; letter-spacing:6px; font-family:'Sora'; color:var(--ciano); display:block; }

/* ---------- CHIPS / BADGES ---------- */
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px; font-size:.7rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.chip-ok { background:rgba(52,211,153,.12); color:var(--ok); border:1px solid rgba(52,211,153,.3); }
.chip-aviso { background:rgba(251,191,36,.12); color:var(--aviso); border:1px solid rgba(251,191,36,.3); }
.chip-erro { background:rgba(251,113,133,.12); color:var(--erro); border:1px solid rgba(251,113,133,.3); }
.chip-info { background:rgba(96,165,250,.12); color:var(--info); border:1px solid rgba(96,165,250,.3); }
.chip-ciano { background:rgba(0,224,255,.1); color:var(--ciano); border:1px solid rgba(0,224,255,.3); }
.chip-roxo { background:rgba(167,139,250,.12); color:var(--roxo); border:1px solid rgba(167,139,250,.3); }
.chip-ouro { background:rgba(245,197,66,.12); color:var(--ouro); border:1px solid rgba(245,197,66,.35); }
.chip-neutro { background:rgba(143,176,201,.1); color:var(--texto2); border:1px solid var(--borda); }
.chip-master { background:linear-gradient(135deg, rgba(245,197,66,.2), rgba(251,146,60,.15)); color:var(--ouro); border:1px solid rgba(245,197,66,.4); }
.centro-chip { margin:0 auto 14px; display:table; }

/* ---------- LANDING ---------- */
.land-nav { display:flex; align-items:center; justify-content:space-between; padding:22px 6vw; position:sticky; top:0; z-index:50; backdrop-filter:blur(18px); background:rgba(4,13,26,.7); border-bottom:1px solid var(--borda); }
.land-nav-links { display:flex; gap:28px; }
.land-nav-links a { color:var(--texto2); font-weight:600; font-size:.92rem; transition:.25s; }
.land-nav-links a:hover { color:var(--ciano); }
.land-nav-acoes { display:flex; gap:10px; }

.hero { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:40px; padding:70px 6vw 60px; max-width:1400px; margin:0 auto; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:var(--grad-suave); border:1px solid var(--borda-forte); color:var(--ciano); padding:8px 16px; border-radius:999px; font-size:.8rem; font-weight:700; margin-bottom:22px; }
.hero h1 { font-size:clamp(2.2rem, 4.5vw, 3.6rem); font-weight:800; letter-spacing:-1.5px; line-height:1.1; margin-bottom:20px; }
.grad-texto { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p { color:var(--texto2); font-size:1.08rem; line-height:1.7; max-width:560px; margin-bottom:30px; }
.hero-ctas { display:flex; gap:14px; flex-wrap:wrap; }
.hero-selos { display:flex; gap:22px; margin-top:30px; flex-wrap:wrap; }
.hero-selos span { display:flex; align-items:center; gap:7px; color:var(--texto2); font-size:.85rem; font-weight:600; }
.hero-selos i { color:var(--ciano); font-size:1.1rem; }
.hero-arte { display:flex; justify-content:center; }
.hero-circulo { width:min(360px, 32vw); aspect-ratio:1; border-radius:50%; background:var(--grad-suave); border:1px solid var(--borda-forte); display:flex; align-items:center; justify-content:center; box-shadow:0 0 90px rgba(0,224,255,.18), inset 0 0 60px rgba(0,224,255,.06); }
.hero-circulo svg { width:65%; height:65%; }

.secao { padding:70px 6vw; max-width:1300px; margin:0 auto; text-align:center; }
.secao-titulo { font-size:clamp(1.7rem, 3vw, 2.5rem); font-weight:800; letter-spacing:-1px; margin-bottom:14px; }
.secao-sub { color:var(--texto2); max-width:640px; margin:0 auto 44px; line-height:1.7; }

.features-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; text-align:left; }
.feature-card { background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio); padding:28px; transition:.3s; backdrop-filter:blur(10px); }
.feature-card:hover { transform:translateY(-6px); border-color:var(--borda-forte); box-shadow:var(--sombra); }
.feature-card i { font-size:2rem; color:var(--ciano); margin-bottom:14px; display:block; }
.feature-card h3 { font-size:1.1rem; margin-bottom:8px; }
.feature-card p { color:var(--texto2); font-size:.9rem; line-height:1.65; }

.ciclo-toggle { display:inline-flex; background:rgba(3,14,26,.8); border:1px solid var(--borda); border-radius:999px; padding:5px; gap:5px; margin-bottom:34px; }
.ciclo-btn { border:none; background:transparent; color:var(--texto2); font-family:'Inter'; font-weight:700; font-size:.9rem; padding:10px 22px; border-radius:999px; cursor:pointer; transition:.25s; display:flex; align-items:center; gap:8px; }
.ciclo-btn.ativo { background:var(--grad); color:#03121f; }
.ciclo-btn.ativo .chip { background:rgba(3,18,31,.25); color:#03121f; border:none; }

.metodopag-toggle { display:flex; justify-content:center; align-items:center; background:rgba(3,14,26,.8); border:1px solid var(--borda); border-radius:999px; padding:5px; gap:5px; width:fit-content; margin:0 auto 24px; }
.metodopag-btn { border:none; background:transparent; color:var(--texto2); font-family:'Inter'; font-weight:700; font-size:.85rem; padding:9px 20px; border-radius:999px; cursor:pointer; transition:.25s; display:flex; align-items:center; gap:7px; }
.metodopag-btn i { font-size:1rem; }
.metodopag-btn:hover { color:var(--texto); }
.metodopag-btn.ativo { background:var(--grad); color:#03121f; }

.planos-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 380px)); gap:22px; justify-content:center; }
.planos-grid.compacto { grid-template-columns:1fr 1fr; text-align:left; margin-bottom:18px; }
.plano-card { background:var(--carta); border:1px solid var(--borda); border-radius:22px; padding:32px; text-align:left; position:relative; transition:.3s; backdrop-filter:blur(10px); cursor:pointer; }
.plano-card:hover { transform:translateY(-6px); box-shadow:var(--sombra); }
.plano-card.destaque { border-color:var(--borda-forte); background:linear-gradient(160deg, rgba(0,224,255,.08), var(--carta) 45%); }
.plano-card.selecionado { border-color:var(--ciano); box-shadow:0 0 0 2px var(--ciano), var(--sombra); }
.plano-tag { position:absolute; top:-13px; right:22px; background:var(--grad); color:#03121f; font-size:.7rem; font-weight:800; padding:6px 14px; border-radius:999px; letter-spacing:.5px; }
.plano-nome { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.plano-preco { font-size:2.3rem; font-weight:800; font-family:'Sora'; margin:14px 0 2px; letter-spacing:-1px; }
.plano-preco-riscado { font-size:.95rem; color:var(--texto2); text-decoration:line-through; display:flex; align-items:center; margin-top:10px; }
.plano-preco small { font-size:.95rem; color:var(--texto2); font-weight:600; }
.plano-parcela { color:var(--ciano); font-size:.85rem; font-weight:700; margin-bottom:18px; }
.plano-lista { list-style:none; margin:18px 0 24px; display:flex; flex-direction:column; gap:11px; }
.plano-lista li { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--texto); }
.plano-lista li i { font-size:1.1rem; color:var(--ok); }
.plano-lista li.nao { color:var(--texto2); text-decoration:line-through; opacity:.65; }
.plano-lista li.nao i { color:var(--erro); }
.planos-nota { margin-top:26px; color:var(--texto2); font-size:.85rem; display:flex; align-items:center; gap:8px; justify-content:center; }

/* ---------- VÍDEO TOUR ---------- */
.video-moldura { position:relative; max-width:920px; margin:0 auto; aspect-ratio:16/9; border-radius:22px; overflow:hidden; border:1px solid var(--borda-forte); background:#020a14; box-shadow:0 0 90px rgba(0,224,255,.16), var(--sombra); }
.video-moldura video, .video-moldura iframe { width:100%; height:100%; display:block; border:none; background:#000; object-fit:contain; }
.video-placeholder { max-width:920px; margin:0 auto; aspect-ratio:16/9; border-radius:22px; border:2px dashed var(--borda-forte); background:var(--grad-suave); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; padding:30px; text-align:center; }
.video-placeholder i.vp-icone { font-size:3.6rem; color:var(--ciano); animation:pulsar 2.2s ease-in-out infinite; }
.video-placeholder b { font-family:'Sora'; font-size:1.15rem; }
.video-placeholder p { color:var(--texto2); font-size:.9rem; line-height:1.7; max-width:480px; }
.video-placeholder code { background:rgba(3,14,26,.8); border:1px solid var(--borda); border-radius:8px; padding:3px 10px; color:var(--ciano); font-size:.85rem; }
.tour-selos { display:flex; gap:24px; justify-content:center; flex-wrap:wrap; margin-top:26px; }
.tour-selos span { display:flex; align-items:center; gap:8px; color:var(--texto2); font-size:.85rem; font-weight:600; }
.tour-selos i { color:var(--ciano); font-size:1.15rem; }

.land-footer { border-top:1px solid var(--borda); padding:40px 6vw; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--texto2); font-size:.85rem; }
.footer-admin { color:var(--texto2); font-size:.8rem; display:flex; align-items:center; gap:6px; opacity:.7; transition:.25s; }
.footer-admin:hover { color:var(--ouro); opacity:1; }
.footer-contato { display:flex; align-items:center; gap:6px; margin:0; }
.footer-contato a { color:var(--ciano); text-decoration:none; }
.footer-contato a:hover { text-decoration:underline; }

/* ---------- WIZARD ---------- */
.wizard-wrap { max-width:760px; margin:0 auto; padding:30px 20px 70px; }
.wizard-topo { display:flex; justify-content:space-between; align-items:center; margin-bottom:34px; }
.wizard-passos { display:flex; gap:8px; margin-bottom:26px; }
.wp { flex:1; display:flex; align-items:center; justify-content:center; gap:9px; padding:12px; border-radius:12px; background:var(--vidro); border:1px solid var(--borda); color:var(--texto2); font-size:.82rem; font-weight:700; transition:.3s; }
.wp span { width:24px; height:24px; border-radius:50%; background:rgba(143,176,201,.15); display:flex; align-items:center; justify-content:center; font-size:.75rem; }
.wp.ativo { color:var(--ciano); border-color:var(--borda-forte); background:var(--grad-suave); }
.wp.ativo span { background:var(--grad); color:#03121f; }
.wp.feito { color:var(--ok); }
.wp.feito span { background:rgba(52,211,153,.2); color:var(--ok); }
.wizard-card { background:var(--carta); border:1px solid var(--borda); border-radius:22px; padding:36px; backdrop-filter:blur(14px); animation:aparecer .4s ease both; }
.wizard-card h2 { display:flex; align-items:center; gap:12px; margin-bottom:8px; font-size:1.4rem; }
.wizard-card h2 i { color:var(--ciano); }
.wizard-card > p.texto-suave { margin-bottom:26px; }
.wizard-card.centro { text-align:center; }
.wizard-card.centro h2 { justify-content:center; }
.wizard-nav { display:flex; justify-content:space-between; margin-top:24px; }
.sucesso-icone { font-size:4.5rem; color:var(--ok); margin-bottom:10px; }
.link-caixa { background:rgba(3,14,26,.8); border:1px dashed var(--borda-forte); color:var(--ciano); border-radius:12px; padding:16px; font-family:monospace; font-size:.95rem; word-break:break-all; display:flex; align-items:center; justify-content:space-between; gap:12px; }

/* ---------- PAGAMENTO QR ---------- */
.pagamento-wrap { display:flex; flex-direction:column; align-items:center; gap:24px; }
.qr-caixa { background:white; border-radius:18px; padding:16px; box-shadow:0 0 50px rgba(0,224,255,.15); position:relative; }
.qr-caixa canvas { display:block; border-radius:6px; }
.qr-selo { position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); background:#009ee3; color:white; font-size:.68rem; font-weight:800; padding:5px 14px; border-radius:999px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.4); }
.pag-resumo { display:flex; flex-direction:column; gap:14px; width:100%; max-width:420px; margin:0 auto; }
.pag-linha { display:flex; justify-content:space-between; padding:12px 16px; background:rgba(3,14,26,.6); border:1px solid var(--borda); border-radius:12px; font-size:.92rem; }
.pag-linha b { color:var(--ciano); }
.pag-total { font-size:1.15rem; border-color:var(--borda-forte); }
.pag-copia { background:rgba(3,14,26,.8); border:1px solid var(--borda); border-radius:12px; padding:14px 18px; font-family:monospace; font-size:.72rem; line-height:1.5; color:var(--texto2); word-break:break-all; max-height:90px; overflow-y:auto; }
.pag-aguardando { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--aviso); font-weight:700; font-size:.9rem; }
.pag-aguardando .spinner { width:16px; height:16px; border:2px solid rgba(251,191,36,.3); border-top-color:var(--aviso); border-radius:50%; animation:girar 1s linear infinite; }
@keyframes girar { to { transform:rotate(360deg); } }
.anim-girar { display:inline-block; animation:girar 1s linear infinite; }
.pag-demo-nota { font-size:.78rem; color:var(--texto2); background:rgba(251,191,36,.07); border:1px dashed rgba(251,191,36,.35); padding:10px 14px; border-radius:10px; line-height:1.5; }

/* ---------- AUTH ---------- */
.auth-centro { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px 16px; }
.auth-card { background:var(--carta); border:1px solid var(--borda); border-radius:24px; padding:40px; width:100%; max-width:440px; backdrop-filter:blur(16px); text-align:center; box-shadow:var(--sombra); }
.auth-card h2 { margin-bottom:8px; letter-spacing:-.5px; }
.auth-card > .texto-suave { margin-bottom:26px; }
.auth-card .campo { text-align:left; }
.auth-rodape { margin-top:22px; display:flex; flex-direction:column; gap:10px; font-size:.85rem; }
.auth-dica { color:var(--texto2); display:flex; align-items:center; gap:6px; justify-content:center; }
.admin-borda { border-color:rgba(245,197,66,.35); }

/* ---------- GATE DO PAINEL ---------- */
.gate-wrap { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.gate-marca { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:40px; background:var(--grad-suave); border-right:1px solid var(--borda); text-align:center; }
.gate-marca .hero-circulo { width:200px; }
.gate-produtora-nome { font-size:2rem; font-weight:800; font-family:'Sora'; letter-spacing:-1px; }
.gate-form-lado { display:flex; align-items:center; justify-content:center; padding:40px 20px; }
.gate-form { width:100%; max-width:430px; }
.gate-abas { display:flex; background:rgba(3,14,26,.8); border:1px solid var(--borda); border-radius:14px; padding:5px; gap:5px; margin-bottom:24px; }
.gate-aba { flex:1; border:none; background:transparent; color:var(--texto2); font-family:'Inter'; font-weight:700; padding:11px; border-radius:10px; cursor:pointer; transition:.25s; display:flex; align-items:center; justify-content:center; gap:8px; }
.gate-aba.ativo { background:var(--grad); color:#03121f; }

/* ---------- TOPBAR / TABBAR ---------- */
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 3vw; border-bottom:1px solid var(--borda); background:rgba(4,13,26,.75); backdrop-filter:blur(18px); position:sticky; top:0; z-index:60; }
.painel-identidade { display:flex; flex-direction:column; }
.painel-nome { font-family:'Sora'; font-weight:800; font-size:1.1rem; letter-spacing:-.3px; }
.painel-sub { font-size:.68rem; color:var(--texto2); letter-spacing:1px; text-transform:uppercase; }
.topbar-acoes { display:flex; align-items:center; gap:12px; }
.usuario-pill { display:flex; align-items:center; gap:10px; background:var(--vidro); border:1px solid var(--borda); border-radius:999px; padding:6px 14px 6px 6px; cursor:pointer; transition:.25s; }
.usuario-pill:hover { border-color:var(--borda-forte); }
.usuario-nome { font-size:.85rem; font-weight:700; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--grad); color:#03121f; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.9rem; flex-shrink:0; }

.tabbar { border-bottom:1px solid var(--borda); background:rgba(4,13,26,.6); backdrop-filter:blur(14px); position:sticky; top:71px; z-index:55; }
.tabbar-inner { display:flex; gap:6px; padding:10px 3vw; overflow-x:auto; max-width:1400px; margin:0 auto; }
.tab-btn { border:none; background:transparent; color:var(--texto2); font-family:'Inter'; font-weight:700; font-size:.87rem; padding:10px 16px; border-radius:11px; cursor:pointer; display:flex; align-items:center; gap:8px; white-space:nowrap; transition:.25s; position:relative; }
.tab-btn i { font-size:1.15rem; }
.tab-btn:hover { color:var(--texto); background:var(--vidro); }
.tab-btn.ativo { color:#03121f; background:var(--grad); box-shadow:0 6px 18px rgba(0,224,255,.25); }
.tab-btn.bloqueado { opacity:.55; }
.tab-btn .cadeado { color:var(--ouro); font-size:.9rem; }
.tab-badge { background:var(--erro); color:white; font-size:.65rem; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; }
.tab-btn.ativo .tab-badge { background:#03121f; color:var(--ciano); }

/* ---------- CONTEÚDO ---------- */
.conteudo { max-width:1400px; margin:0 auto; padding:34px 3vw 90px; animation:aparecer .4s ease both; }
.pagina-titulo { display:flex; align-items:center; gap:14px; font-size:1.55rem; font-weight:800; letter-spacing:-.5px; margin-bottom:6px; font-family:'Sora'; }
.pagina-titulo i { color:var(--ciano); }
.pagina-sub { color:var(--texto2); margin-bottom:28px; font-size:.95rem; }

.cartao { background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio); padding:26px; margin-bottom:22px; backdrop-filter:blur(10px); animation:aparecer .45s ease both; }
.cartao h3 { display:flex; align-items:center; gap:10px; font-size:1.05rem; margin-bottom:6px; }
.cartao h3 i { color:var(--ciano); }
.cartao .texto-suave { margin-bottom:20px; font-size:.88rem; }

.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-bottom:26px; }
.stat-card { background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio); padding:22px; display:flex; align-items:center; gap:16px; transition:.3s; animation:aparecer .45s ease both; min-width:0; }
.stat-card:hover { transform:translateY(-4px); border-color:var(--borda-forte); }
.stat-texto { min-width:0; flex:1; }
.stat-icone { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
.stat-num { font-size:1.9rem; font-weight:800; font-family:'Sora'; letter-spacing:-1px; line-height:1.15; overflow-wrap:anywhere; word-break:break-word; }
.stat-num.stat-num-dinheiro { font-size:1.5rem; letter-spacing:-.5px; }
.stat-rotulo { color:var(--texto2); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; margin-top:5px; }

.acoes-rapidas { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; }
.acao-rapida { background:rgba(3,14,26,.5); border:1px solid var(--borda); border-radius:14px; padding:20px; cursor:pointer; transition:.25s; text-align:left; }
.acao-rapida:hover { border-color:var(--borda-forte); transform:translateY(-3px); background:var(--grad-suave); }
.acao-rapida i { font-size:1.6rem; color:var(--ciano); display:block; margin-bottom:10px; }
.acao-rapida b { display:block; font-size:.95rem; margin-bottom:4px; }
.acao-rapida span { color:var(--texto2); font-size:.8rem; }

/* ---------- LISTAS / ITENS ---------- */
.item-linha { display:flex; align-items:center; gap:14px; padding:16px; background:rgba(3,14,26,.45); border:1px solid var(--borda); border-radius:14px; margin-bottom:10px; transition:.25s; flex-wrap:wrap; }
.item-linha:hover { border-color:var(--borda-forte); }
.item-info { flex:1; min-width:180px; }
.item-titulo { font-weight:700; font-size:.98rem; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.item-sub { color:var(--texto2); font-size:.8rem; margin-top:4px; line-height:1.5; }
.item-acoes { display:flex; gap:8px; flex-wrap:wrap; }
.vazio { text-align:center; padding:46px 20px; color:var(--texto2); }
.vazio i { font-size:3rem; display:block; margin-bottom:12px; opacity:.5; color:var(--ciano); }
.vazio b { color:var(--texto); display:block; margin-bottom:6px; font-size:1.05rem; }

.busca-wrap { position:relative; margin-bottom:18px; }
.busca-wrap i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--texto2); font-size:1.1rem; }
.busca-wrap input { width:100%; background:rgba(3,14,26,.7); border:1px solid var(--borda); color:var(--texto); padding:13px 16px 13px 46px; border-radius:12px; font-family:'Inter'; font-size:.92rem; outline:none; transition:.25s; }
.busca-wrap input:focus { border-color:var(--ciano); }

.filtros-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.filtro-chip { border:1px solid var(--borda); background:rgba(3,14,26,.5); color:var(--texto2); padding:7px 15px; border-radius:999px; font-size:.78rem; font-weight:700; cursor:pointer; transition:.25s; font-family:'Inter'; }
.filtro-chip:hover { color:var(--texto); }
.filtro-chip.ativo { background:var(--grad); color:#03121f; border-color:transparent; }

/* ---------- TABELAS (PLANILHA) ---------- */
.subabas { display:flex; gap:8px; margin-bottom:22px; flex-wrap:wrap; }
.subaba-btn { border:1px solid var(--borda); background:var(--vidro); color:var(--texto2); font-family:'Inter'; font-weight:700; font-size:.85rem; padding:10px 18px; border-radius:11px; cursor:pointer; transition:.25s; display:flex; align-items:center; gap:8px; }
.subaba-btn.ativo { background:var(--grad); color:#03121f; border-color:transparent; }
.tabela-wrap { overflow-x:auto; border:1px solid var(--borda); border-radius:14px; }
table.tabela { width:100%; border-collapse:collapse; font-size:.86rem; min-width:700px; }
table.tabela th { text-align:left; padding:13px 14px; background:rgba(0,224,255,.06); color:var(--ciano); font-size:.72rem; text-transform:uppercase; letter-spacing:.7px; border-bottom:1px solid var(--borda); white-space:nowrap; }
table.tabela td { padding:12px 14px; border-bottom:1px solid rgba(120,200,255,.06); vertical-align:middle; }
table.tabela tr:last-child td { border-bottom:none; }
table.tabela tr:hover td { background:rgba(0,224,255,.03); }
table.tabela tr.linha-bloqueada td { background:rgba(251,113,133,.07); color:var(--erro); }
table.tabela tr.linha-bloqueada:hover td { background:rgba(251,113,133,.13); }
table.tabela tr.linha-bloqueada td b { color:var(--erro); }
table.tabela tr.linha-bloqueada td b i { margin-right:3px; }
.uso-barra { height:8px; background:rgba(3,14,26,.8); border-radius:99px; overflow:hidden; margin-top:8px; }
.uso-barra div { height:100%; background:var(--grad); border-radius:99px; transition:width .6s ease; }
.ano-grupo { margin-bottom:26px; }
.ano-titulo { display:flex; align-items:center; gap:10px; font-family:'Sora'; font-weight:800; font-size:1.05rem; margin-bottom:12px; color:var(--ciano); }

/* ---------- SINO ---------- */
.sino-wrap { position:relative; }
.sino-contador { position:absolute; top:-6px; right:-6px; background:var(--erro); color:white; font-size:.62rem; font-weight:800; min-width:18px; height:18px; border-radius:9px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.sino-dropdown { position:absolute; right:0; top:52px; width:340px; max-height:420px; overflow-y:auto; background:var(--carta-solida); border:1px solid var(--borda-forte); border-radius:16px; box-shadow:var(--sombra); display:none; z-index:100; }
.sino-dropdown.aberto { display:block; animation:aparecer .25s ease both; }
.sino-topo { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid var(--borda); font-weight:800; font-size:.9rem; }
.sino-item { padding:13px 16px; border-bottom:1px solid rgba(120,200,255,.06); font-size:.83rem; line-height:1.5; }
.sino-item small { color:var(--texto2); display:block; margin-top:3px; }

/* ---------- SUPERVISÃO ---------- */
#supervisao-banner { background:linear-gradient(90deg, rgba(245,197,66,.18), rgba(251,146,60,.12)); border-bottom:1px solid rgba(245,197,66,.4); color:var(--ouro); padding:10px 3vw; display:flex; align-items:center; justify-content:space-between; gap:14px; font-size:.85rem; font-weight:700; flex-wrap:wrap; }

/* ---------- ADMIN ---------- */
.admin-produtora-card { background:var(--carta); border:1px solid var(--borda); border-radius:var(--raio); padding:24px; transition:.3s; animation:aparecer .45s ease both; }
.admin-produtora-card:hover { transform:translateY(-4px); border-color:var(--borda-forte); box-shadow:var(--sombra); }
.admin-prod-topo { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.admin-prod-avatar { width:50px; height:50px; border-radius:14px; background:var(--grad); color:#03121f; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.3rem; font-family:'Sora'; flex-shrink:0; }
.admin-prod-metricas { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:16px 0; }
.admin-prod-metricas > div { background:rgba(3,14,26,.5); border:1px solid var(--borda); border-radius:10px; padding:10px 6px; text-align:center; }
.admin-prod-metricas b { display:block; font-size:1.15rem; font-family:'Sora'; }
.admin-prod-metricas span { font-size:.62rem; color:var(--texto2); text-transform:uppercase; letter-spacing:.4px; }
.admin-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:18px; }

/* ---------- MODAL ---------- */
#modal-overlay { position:fixed; inset:0; background:rgba(2,8,16,.8); backdrop-filter:blur(6px); z-index:200; display:none; align-items:flex-start; justify-content:center; overflow-y:auto; padding:5vh 16px 40px; }
#modal-overlay.aberto { display:flex; }
#modal-box { background:var(--carta-solida); border:1px solid var(--borda-forte); border-radius:22px; padding:32px; width:100%; max-width:560px; box-shadow:var(--sombra); animation:aparecer .3s ease both; }
#modal-box.largo { max-width:760px; }
.modal-titulo { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:6px; }
.modal-titulo h3 { display:flex; align-items:center; gap:10px; font-size:1.2rem; }
.modal-titulo h3 i { color:var(--ciano); }
.modal-fechar { background:var(--vidro); border:1px solid var(--borda); color:var(--texto2); width:34px; height:34px; border-radius:10px; cursor:pointer; font-size:1rem; transition:.25s; }
.modal-fechar:hover { color:var(--erro); border-color:rgba(251,113,133,.4); }
.modal-corpo { margin-top:18px; }
.contrato-texto { background:rgba(3,14,26,.7); border:1px solid var(--borda); border-radius:12px; padding:20px; font-size:.8rem; color:var(--texto2); line-height:1.7; max-height:320px; overflow-y:auto; text-align:justify; }
.contrato-texto strong { color:var(--texto); }

/* ---------- TUTORIAL DO DRIVE (PASSOS) ---------- */
.gsteps { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.gstep { display:flex; gap:14px; position:relative; padding-bottom:22px; }
.gstep:last-child { padding-bottom:0; }
.gstep:not(:last-child)::before { content:''; position:absolute; left:16px; top:34px; bottom:0; width:2px; background:linear-gradient(var(--borda-forte), transparent); }
.gstep-num { flex-shrink:0; width:34px; height:34px; border-radius:50%; background:var(--grad); color:#03121f; display:flex; align-items:center; justify-content:center; font-family:'Sora'; font-weight:800; font-size:.95rem; z-index:1; }
.gstep-corpo { flex:1; padding-top:4px; min-width:0; }
.gstep-titulo { font-family:'Sora'; font-weight:700; font-size:.97rem; margin-bottom:6px; color:var(--texto); }
.bloco-codigo { background:rgba(3,14,26,.85); border:1px dashed var(--borda-forte); border-radius:12px; padding:16px; font-family:monospace; font-size:.72rem; line-height:1.65; color:var(--texto2); white-space:pre-wrap; word-break:break-word; max-height:200px; overflow-y:auto; margin-top:10px; }

/* ---------- TOASTS ---------- */
#toasts { position:fixed; bottom:24px; right:24px; z-index:300; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--carta-solida); border:1px solid var(--borda-forte); border-left:4px solid var(--ciano); border-radius:14px; padding:14px 18px; min-width:280px; max-width:380px; box-shadow:var(--sombra); font-size:.88rem; font-weight:600; display:flex; align-items:center; gap:11px; animation:toastEntra .35s cubic-bezier(.2,.8,.2,1) both; }
.toast i { font-size:1.3rem; flex-shrink:0; }
.toast.ok { border-left-color:var(--ok); } .toast.ok i { color:var(--ok); }
.toast.erro { border-left-color:var(--erro); } .toast.erro i { color:var(--erro); }
.toast.aviso { border-left-color:var(--aviso); } .toast.aviso i { color:var(--aviso); }
.toast.info { border-left-color:var(--info); } .toast.info i { color:var(--info); }
.toast.saindo { animation:toastSai .3s ease both; }
@keyframes toastEntra { from { opacity:0; transform:translateX(60px); } to { opacity:1; transform:translateX(0); } }
@keyframes toastSai { to { opacity:0; transform:translateX(60px); } }

/* ---------- UPSELL / CADEADO ---------- */
.upsell { text-align:center; padding:60px 24px; }
.upsell i.grande { font-size:4rem; color:var(--ouro); display:block; margin-bottom:18px; }
.upsell h3 { font-size:1.4rem; justify-content:center; }
.upsell p { max-width:440px; margin:10px auto 26px; }

/* ---------- MENU USUÁRIO ---------- */
.menu-flutuante { position:fixed; z-index:150; background:var(--carta-solida); border:1px solid var(--borda-forte); border-radius:14px; box-shadow:var(--sombra); min-width:200px; overflow:hidden; animation:aparecer .2s ease both; }
.menu-flutuante button { display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none; color:var(--texto); font-family:'Inter'; font-weight:600; font-size:.88rem; padding:13px 18px; cursor:pointer; transition:.2s; text-align:left; }
.menu-flutuante button:hover { background:var(--grad-suave); }
.menu-flutuante button.perigo { color:var(--erro); }

/* ---------- PLAYER DE ÁUDIO ----------
   Player 100% nosso: usa o <audio> nativo por baixo (silencioso, sem os
   controles do navegador) e desenhamos tudo por cima — barra de progresso,
   play, pular 10s e volume — nas cores do Sharkilha. Sem caixa/fundo
   branco, flutua direto no card do lançamento. */
.player-audio { margin-top:12px; width:100%; max-width:340px; }
.player-audio audio { display:none; }
.player-audio .pa-topo {
    display:flex; align-items:center; gap:7px; margin-bottom:8px;
    font-size:.7rem; font-weight:800; color:var(--ciano); text-transform:uppercase; letter-spacing:.6px;
}
.pa-seek-linha { display:flex; align-items:center; gap:10px; }
.pa-tempo { font-size:.72rem; font-weight:700; color:var(--texto2); font-variant-numeric:tabular-nums; flex-shrink:0; width:32px; }
.pa-tempo:last-child { text-align:right; }
.pa-seek {
    flex:1; -webkit-appearance:none; appearance:none; height:4px; border-radius:99px;
    background:rgba(3,14,26,.8); outline:none; cursor:pointer; accent-color:var(--ciano);
}
.pa-seek::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:13px; height:13px; border-radius:50%; background:var(--ciano); box-shadow:0 0 0 3px rgba(0,224,255,.2); cursor:pointer; }
.pa-seek::-moz-range-thumb { width:13px; height:13px; border-radius:50%; background:var(--ciano); border:none; box-shadow:0 0 0 3px rgba(0,224,255,.2); cursor:pointer; }
.pa-controles { display:flex; align-items:center; gap:10px; margin-top:12px; }
.pa-btn {
    background:rgba(0,224,255,.08); border:1px solid var(--borda); color:var(--texto);
    width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    cursor:pointer; font-size:1rem; transition:.2s; flex-shrink:0;
}
.pa-btn:hover { background:rgba(0,224,255,.16); border-color:var(--borda-forte); }
.pa-btn-play {
    width:44px; height:44px; font-size:1.25rem; background:var(--grad); color:#03121f; border:none;
    box-shadow:0 6px 18px rgba(0,224,255,.3);
}
.pa-btn-play:hover { filter:brightness(1.08); background:var(--grad); }
.pa-volume { display:flex; align-items:center; gap:7px; margin-left:auto; color:var(--texto2); font-size:1rem; }
.pa-vol-slider {
    width:64px; -webkit-appearance:none; appearance:none; height:4px; border-radius:99px;
    background:rgba(3,14,26,.8); outline:none; cursor:pointer; accent-color:var(--ciano);
}
.pa-vol-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:11px; height:11px; border-radius:50%; background:var(--ciano); cursor:pointer; }
.pa-vol-slider::-moz-range-thumb { width:11px; height:11px; border-radius:50%; background:var(--ciano); border:none; cursor:pointer; }
.pa-vol-pct { font-size:.72rem; font-weight:700; width:32px; }
.player-nativo { width:100%; max-width:280px; height:40px; margin-top:10px; border-radius:10px; color-scheme:dark; accent-color:var(--ciano); }

/* ---------- CONTRATO: TAGS + ASSINATURAS ---------- */
.contrato-tags { background:rgba(3,14,26,.7); border:1px dashed var(--borda-forte); border-radius:12px; padding:14px 16px; font-size:.78rem; color:var(--texto2); line-height:1.85; margin:12px 0 16px; }
.contrato-tags code { background:rgba(0,224,255,.1); color:var(--ciano); padding:2px 7px; border-radius:6px; font-size:.76rem; }
.contrato-texto textarea#cf-contrato-texto { width:100%; }
#cf-contrato-texto { background:rgba(3,14,26,.8); border:1px solid var(--borda); border-radius:12px; padding:14px; color:var(--texto); font-size:.8rem; line-height:1.6; min-height:280px; width:100%; font-family:'Inter', monospace; }
#cf-contrato-texto:focus { outline:none; border-color:var(--ciano); box-shadow:0 0 0 3px rgba(0,224,255,.12); }

.bloco-assinatura { margin-top:16px; border-radius:12px; padding:16px 18px; border:1px solid var(--borda); background:rgba(255,255,255,.02); }
.bloco-assinatura .ba-topo { display:flex; align-items:center; gap:8px; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px; color:var(--texto2); margin-bottom:8px; }
.bloco-assinatura .ba-nome { font-family:'Sora'; font-weight:700; font-size:1.02rem; color:var(--texto); }
.bloco-assinatura .ba-linha { font-size:.82rem; color:var(--texto2); margin-top:2px; }
.bloco-assinatura.ba-produtora { border-color:rgba(167,139,250,.35); }
.bloco-assinatura.ba-produtora .ba-topo { color:var(--roxo); }
.bloco-assinatura.ba-artista { border-color:rgba(52,211,153,.35); background:rgba(52,211,153,.04); }
.bloco-assinatura.ba-artista .ba-topo { color:var(--ok); }
.bloco-assinatura.ba-pendente { border-style:dashed; color:var(--aviso); display:flex; align-items:center; gap:8px; font-size:.85rem; font-weight:600; }
.ba-trilha { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; padding-top:10px; border-top:1px solid var(--borda); font-size:.74rem; color:var(--texto2); }
.ba-trilha b { color:var(--texto); font-weight:700; }
.ba-trilha code { background:rgba(0,224,255,.08); color:var(--ciano); padding:1px 6px; border-radius:5px; }
.ba-dispositivo { margin-top:8px; font-size:.72rem; color:var(--texto2); word-break:break-all; }

/* ---------- RESPONSIVO ---------- */
@media (max-width: 980px) {
    .hero { grid-template-columns:1fr; text-align:center; padding-top:40px; }
    .hero p { margin-left:auto; margin-right:auto; }
    .hero-ctas, .hero-selos { justify-content:center; }
    .hero-arte { order:-1; }
    .hero-circulo { width:200px; }
    .gate-wrap { grid-template-columns:1fr; }
    .gate-marca { border-right:none; border-bottom:1px solid var(--borda); padding:30px 20px; }
    .gate-marca .hero-circulo { width:120px; }
    .planos-grid.compacto { grid-template-columns:1fr; }
    .pagamento-wrap { gap:18px; }
    .land-nav-links { display:none; }
    .form-grid { grid-template-columns:1fr; gap:0; }
    .wizard-passos { flex-wrap:wrap; }
    .wp { min-width:45%; }
    .usuario-nome { display:none; }
    .tabbar { top:70px; }
}