@import url('https://fonts.googleapis.com/css2?family=Audiowide&family=Bruno+Ace&family=Inter:wght@400;600;700&family=Orbitron:wght@400;600;800&display=swap');
@import url('branding.css');
:root{--bg:#070812;--panel:#101326;--panel2:#0d1020;--text:#eaf6ff;--muted:#8aa0b5;--cyan:#21d4fd;--pink:#ff3cac;--violet:#8b5cf6;--danger:#ff4d67;--border:#26304b}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 70% 0,#151331 0,#070812 45%);color:var(--text);font-family:Inter,Arial}.app{display:flex;min-height:100vh}.sidebar{width:230px;background:rgba(9,11,24,.96);border-right:1px solid var(--border);padding:24px 16px;position:fixed;top:0;bottom:0}.brand{font-family:Orbitron;font-weight:800;font-size:24px;letter-spacing:2px}.brand span{color:var(--pink);text-shadow:0 0 14px var(--pink)}nav{display:flex;flex-direction:column;gap:6px;margin-top:28px;overflow:auto;height:calc(100vh - 90px)}nav a{color:#b9c8d9;text-decoration:none;padding:10px 12px;border-radius:10px}nav a:hover{background:#151936;color:#fff;box-shadow:inset 3px 0 0 var(--cyan)}nav .logout{margin-top:auto;color:#ff8da0}.main{margin-left:230px;padding:24px;width:calc(100% - 230px)}.top{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:linear-gradient(180deg,#070812 70%,transparent);padding-bottom:18px;z-index:5}.top h1{font-family:Orbitron;font-size:24px}.quick{display:flex;gap:10px}.btn{display:inline-block;border:1px solid var(--border);background:#171b34;color:#fff;padding:10px 16px;border-radius:10px;text-decoration:none;cursor:pointer}.btn.neon{border-color:var(--cyan);box-shadow:0 0 18px #21d4fd33}.btn.pink{border-color:var(--pink);box-shadow:0 0 18px #ff3cac33}.btn.danger{border-color:var(--danger);background:#2a1017}.grid{display:grid;gap:16px}.grid.stats{grid-template-columns:repeat(4,1fr)}.grid.two{grid-template-columns:1fr 1fr}.card{background:linear-gradient(180deg,#12162d,#0d1020);border:1px solid var(--border);border-radius:16px;padding:18px;box-shadow:0 12px 35px #0006}.stats .card b{display:block;font-family:Orbitron;font-size:32px;color:var(--cyan)}.stats .card span{color:var(--muted)}.form{display:flex;flex-direction:column;gap:10px}.rowform{display:grid;grid-template-columns:repeat(6,1fr);align-items:center}.form input,.form select,.form textarea,.filters input,.filters select{background:#090c19;border:1px solid #2b3450;color:#fff;padding:11px;border-radius:9px}.form textarea{min-height:90px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:12px 10px;border-bottom:1px solid #20283f;text-align:left}th{color:#8ca6be;font-size:12px;text-transform:uppercase}.chip{border:1px solid #33405f;background:#171c34;color:#d9efff;border-radius:8px;padding:7px 9px;margin:2px;cursor:pointer}.chip.danger{color:#ff8798;border-color:#713040}.inline{display:inline}.logo{width:34px;height:34px;object-fit:contain;vertical-align:middle;margin-right:8px}.carousel{display:flex;gap:14px;overflow:auto;padding-bottom:8px;animation:float 35s linear infinite}.poster{min-width:140px}.poster img,.placeholder{width:140px;height:200px;border-radius:12px;object-fit:cover;background:#15192f;display:grid;place-items:center;font-size:36px}.poster span{display:block;margin-top:8px;font-size:13px}.mini-chart{height:90px;display:flex;align-items:flex-end;gap:8px}.mini-chart i{flex:1;background:linear-gradient(var(--pink),var(--cyan));border-radius:5px 5px 0 0}.flash{padding:12px;border-radius:10px;margin-bottom:12px;background:#172034}.progress{height:10px;background:#090c18;border-radius:10px;overflow:hidden}.progress span{display:block;width:20%;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));animation:pulse 1.5s infinite}.muted{color:var(--muted)}.danger-zone{border-color:#56202b}.login-bg{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle,#19163d,#05060d)}.login-card{width:360px;padding:30px;border:1px solid #2b3450;border-radius:18px;background:#0d1020;display:flex;flex-direction:column;gap:14px}.login-card input{padding:12px;background:#080b17;border:1px solid #2c3552;border-radius:9px;color:#fff}.big{font-size:34px;text-align:center;margin-bottom:10px}details{border:1px solid #202943;border-radius:10px;margin:8px 0;padding:10px}pre{white-space:pre-wrap;color:#d7eaff}@keyframes pulse{50%{opacity:.45}}@media(max-width:1000px){.sidebar{width:190px}.main{margin-left:190px;width:calc(100% - 190px)}.grid.stats{grid-template-columns:1fr 1fr}.grid.two{grid-template-columns:1fr}.rowform{grid-template-columns:1fr 1fr}}@media(max-width:700px){.sidebar{position:static;width:100%}.app{display:block}.main{margin:0;width:100%}.grid.stats{grid-template-columns:1fr}.top{position:static}.quick{flex-wrap:wrap}}


/* =========================================================
   STV PLAY - RODAPE GLOBAL V1
   ========================================================= */

.stv-global-footer{
    width:100%;
    margin-top:34px;
    padding:18px 12px 20px;

    text-align:center;

    color:#7388a3;
    font-size:11px;
    font-weight:600;
    letter-spacing:.55px;

    border-top:1px solid rgba(33,212,253,.10);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(33,212,253,.025),
            rgba(255,60,172,.025),
            transparent
        );
}

.stv-global-footer span{
    display:inline-block;
    margin:0 5px;
    color:#21d4fd;
}

.stv-global-footer strong{
    color:#9cb4cc;
    font-weight:700;
    letter-spacing:.8px;
}

.stv-login-footer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    margin:0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(33,212,253,.035),
            rgba(255,60,172,.035),
            transparent
        );
}

@media(max-width:700px){

    .stv-global-footer{
        margin-top:26px;
        padding:16px 8px 18px;
        font-size:10px;
        letter-spacing:.35px;
    }

    .stv-login-footer{
        margin:0;
    }

}



/* =========================================================
   STV PLAY - LOGIN UNIVERSO V2
   ========================================================= */

body.login-bg{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    padding:40px 20px 70px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(circle at 50% 30%, #111d48 0%, #070916 45%, #02030a 100%);
}


/* VIDEO DE FUNDO */

.stv-login-video{
    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    z-index:-3;

    pointer-events:none;
}


/* CAMADA ESCURA SOBRE O UNIVERSO */

.stv-login-overlay{
    position:fixed;
    inset:0;
    z-index:-2;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(7,12,32,.10) 0%,
            rgba(3,6,18,.28) 48%,
            rgba(1,3,10,.72) 100%
        ),
        linear-gradient(
            180deg,
            rgba(1,3,12,.18),
            rgba(1,3,12,.42)
        );
}


/* CARD PRINCIPAL */

.login-bg .login-card{
    position:relative;
    z-index:2;

    width:min(440px, calc(100vw - 36px));

    padding:38px 38px 36px;

    display:flex;
    flex-direction:column;
    gap:17px;

    border:1px solid rgba(69,218,255,.62);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(7,17,40,.80),
            rgba(8,10,31,.74)
        );

    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);

    box-shadow:
        0 28px 80px rgba(0,0,0,.58),
        0 0 28px rgba(33,212,253,.12),
        inset 0 1px 0 rgba(255,255,255,.08);
}


/* BRILHO CIANO / MAGENTA AO REDOR DO CARD */

.login-bg .login-card::before{
    content:"";
    position:absolute;
    inset:-1px;
    z-index:-1;

    border-radius:22px;
    padding:1px;

    background:
        linear-gradient(
            135deg,
            #21d4fd 0%,
            rgba(33,212,253,.25) 35%,
            rgba(139,92,246,.28) 62%,
            #ff3cac 100%
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;
    mask-composite:exclude;

    pointer-events:none;
}


.login-bg .login-card::after{
    content:"";
    position:absolute;

    width:72%;
    height:90px;

    left:14%;
    bottom:-38px;

    z-index:-2;

    background:rgba(89,63,255,.22);

    filter:blur(48px);

    pointer-events:none;
}


/* LOGO */

.login-bg .login-brand{
    min-height:82px;
    margin:0 0 2px;
}

.login-bg .login-brand img{
    display:block;

    max-width:270px;
    max-height:105px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 8px rgba(33,212,253,.22))
        drop-shadow(0 0 18px rgba(255,60,172,.12));
}

.login-bg .login-brand .brand-text{
    font-family:Orbitron, sans-serif;

    font-size:34px;
    font-weight:800;

    letter-spacing:3px;

    color:#f3fbff !important;

    text-shadow:
        0 0 12px rgba(33,212,253,.45),
        0 0 26px rgba(255,60,172,.22) !important;
}


/* NOME DO PAINEL */

.login-bg .panel-name{
    margin-top:-4px;
    margin-bottom:7px;

    text-align:center;

    font-family:Orbitron, sans-serif;

    font-size:11px;
    font-weight:600;

    letter-spacing:3.4px;

    text-transform:uppercase;

    color:#8fa8c8;
}


/* CAMPOS */

.login-bg .login-card input{
    width:100%;
    height:54px;

    padding:0 17px;

    outline:none;

    border:1px solid rgba(74,111,163,.48);
    border-radius:11px;

    background:
        linear-gradient(
            180deg,
            rgba(4,10,27,.84),
            rgba(6,11,27,.72)
        );

    color:#f1f8ff;

    font-family:Inter, Arial, sans-serif;
    font-size:14px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        0 7px 20px rgba(0,0,0,.13);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.login-bg .login-card input::placeholder{
    color:#7185a2;
}

.login-bg .login-card input:focus{
    border-color:#21d4fd;

    background:rgba(5,13,32,.92);

    box-shadow:
        0 0 0 3px rgba(33,212,253,.08),
        0 0 20px rgba(33,212,253,.13);
}


/* BOTAO ENTRAR */

.login-bg .login-card .btn.neon{
    position:relative;

    width:100%;
    height:54px;

    margin-top:3px;

    border:1px solid rgba(104,228,255,.82);
    border-radius:11px;

    background:
        linear-gradient(
            100deg,
            #10c8f4 0%,
            #4777ff 48%,
            #e838bc 100%
        );

    color:#fff;

    font-family:Orbitron, sans-serif;
    font-size:13px;
    font-weight:800;

    letter-spacing:1.7px;
    text-transform:uppercase;

    cursor:pointer;

    box-shadow:
        0 0 22px rgba(33,212,253,.20),
        0 0 34px rgba(255,60,172,.13);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.login-bg .login-card .btn.neon:hover{
    transform:translateY(-1px);

    filter:brightness(1.08);

    box-shadow:
        0 0 27px rgba(33,212,253,.30),
        0 0 42px rgba(255,60,172,.20);
}

.login-bg .login-card .btn.neon:active{
    transform:translateY(0);
}


/* MENSAGENS DE LOGIN */

.login-bg .login-card .flash{
    margin:0;

    border:1px solid rgba(255,77,103,.35);

    background:rgba(65,13,31,.68);

    color:#ffd9df;

    backdrop-filter:blur(8px);
}


/* RODAPE SOBRE O VIDEO */

.login-bg .stv-login-footer{
    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:3;

    margin:0;
    padding:17px 12px 19px;

    border-top:1px solid rgba(33,212,253,.09);

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(1,3,12,.55)
        );

    color:#7488a5;
}

.login-bg .stv-login-footer strong{
    color:#9bb0cb;
}


/* RESPONSIVO */

@media (max-width:600px){

    body.login-bg{
        padding:24px 18px 64px;
    }

    .login-bg .login-card{
        width:min(390px, 100%);
        padding:30px 24px 28px;
        border-radius:19px;
        gap:15px;
    }

    .login-bg .login-card::before{
        border-radius:19px;
    }

    .login-bg .login-brand{
        min-height:68px;
    }

    .login-bg .login-brand img{
        max-width:225px;
        max-height:88px;
    }

    .login-bg .login-brand .brand-text{
        font-size:29px;
    }

    .login-bg .panel-name{
        font-size:10px;
        letter-spacing:2.7px;
    }

    .login-bg .login-card input,
    .login-bg .login-card .btn.neon{
        height:51px;
    }
}


@media (max-height:620px){

    body.login-bg{
        align-items:flex-start;
        overflow:auto;
        padding-top:24px;
        padding-bottom:70px;
    }

    .login-bg .login-card{
        padding-top:24px;
        padding-bottom:24px;
    }

    .login-bg .login-brand{
        min-height:54px;
    }

    .login-bg .login-brand img{
        max-height:68px;
    }
}


/* =========================================================
   STV PLAY - LOGIN HEADER V3
   Logo esquerda + nome direita
   ========================================================= */

body.login-bg{
    padding-top:70px;
    padding-bottom:70px;
}


/* MAIS TRANSPARENCIA NO CARD */

.login-bg .login-card{
    width:min(560px, calc(100vw - 36px));

    padding:38px 42px 36px;

    background:
        linear-gradient(
            145deg,
            rgba(5,15,38,.62),
            rgba(8,8,29,.56)
        );

    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
}


/* LOGO + NOME NA MESMA LINHA */

.login-bg .stv-login-brand-row{
    width:100%;

    display:grid;
    grid-template-columns:auto 1px minmax(0,1fr);

    align-items:center;
    justify-content:center;

    gap:25px;

    margin:0 0 19px;
}


/* LOGO MAIOR */

.login-bg .stv-login-brand-row .login-brand{
    min-width:125px;
    min-height:105px;

    margin:0;

    display:flex;
    align-items:center;
    justify-content:center;
}

.login-bg .stv-login-brand-row .login-brand img{
    width:auto;
    height:auto;

    max-width:145px;
    max-height:120px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 10px rgba(33,212,253,.25))
        drop-shadow(0 0 22px rgba(255,60,172,.18));
}


/* DIVISOR NEON */

.login-bg .stv-login-brand-divider{
    width:1px;
    height:88px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(33,212,253,.85),
            rgba(33,212,253,.45),
            transparent
        );

    box-shadow:0 0 13px rgba(33,212,253,.45);
}


/* BLOCO DO NOME */

.login-bg .stv-login-brand-copy{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

    gap:8px;
}


/* NOME GRANDE */

.login-bg .stv-login-brand-copy .panel-name{
    margin:0;

    text-align:left;

    font-family:Orbitron, sans-serif;

    font-size:30px;
    line-height:1.05;

    font-weight:800;

    letter-spacing:2px;

    color:#f5f9ff;

    text-transform:uppercase;

    text-shadow:
        0 0 12px rgba(33,212,253,.26),
        0 0 22px rgba(71,119,255,.16);
}


/* SUBTITULO */

.login-bg .stv-login-brand-subtitle{
    font-family:Orbitron, sans-serif;

    font-size:9px;
    font-weight:600;

    letter-spacing:3.1px;

    color:#a6b5ca;

    white-space:nowrap;
}


/* RESPONSIVO */

@media (max-width:600px){

    body.login-bg{
        padding-top:35px;
        padding-bottom:65px;
    }

    .login-bg .login-card{
        width:min(420px, 100%);
        padding:28px 23px 27px;
    }

    .login-bg .stv-login-brand-row{
        grid-template-columns:auto 1px minmax(0,1fr);
        gap:15px;
        margin-bottom:16px;
    }

    .login-bg .stv-login-brand-row .login-brand{
        min-width:86px;
        min-height:78px;
    }

    .login-bg .stv-login-brand-row .login-brand img{
        max-width:100px;
        max-height:85px;
    }

    .login-bg .stv-login-brand-divider{
        height:68px;
    }

    .login-bg .stv-login-brand-copy .panel-name{
        font-size:21px;
        letter-spacing:1.2px;
    }

    .login-bg .stv-login-brand-subtitle{
        font-size:7px;
        letter-spacing:1.7px;
    }
}


/* =========================================================
   STV PLAY - LOGIN V4
   Card menor + mais transparente
   ========================================================= */

.login-bg .login-card{
    width:min(500px, calc(100vw - 36px));

    padding:30px 36px 29px;

    gap:14px;

    background:
        linear-gradient(
            145deg,
            rgba(5,15,38,.46),
            rgba(8,8,29,.40)
        );

    -webkit-backdrop-filter:blur(9px);
    backdrop-filter:blur(9px);

    box-shadow:
        0 24px 70px rgba(0,0,0,.42),
        0 0 25px rgba(33,212,253,.10),
        inset 0 1px 0 rgba(255,255,255,.07);
}


/* CABECALHO UM POUCO MAIS COMPACTO */

.login-bg .stv-login-brand-row{
    gap:20px;
    margin-bottom:13px;
}

.login-bg .stv-login-brand-row .login-brand{
    min-width:112px;
    min-height:92px;
}

.login-bg .stv-login-brand-row .login-brand img{
    max-width:130px;
    max-height:102px;
}

.login-bg .stv-login-brand-divider{
    height:76px;
}

.login-bg .stv-login-brand-copy .panel-name{
    font-size:27px;
}

.login-bg .stv-login-brand-subtitle{
    font-size:8px;
    letter-spacing:2.7px;
}


/* CAMPOS E BOTAO LEVEMENTE MAIS COMPACTOS */

.login-bg .login-card input,
.login-bg .login-card .btn.neon{
    height:50px;
}


/* MOBILE */

@media (max-width:600px){

    .login-bg .login-card{
        width:min(390px, 100%);
        padding:25px 21px 24px;
        gap:13px;
    }

    .login-bg .stv-login-brand-row{
        gap:13px;
        margin-bottom:12px;
    }

    .login-bg .stv-login-brand-row .login-brand{
        min-width:80px;
        min-height:70px;
    }

    .login-bg .stv-login-brand-row .login-brand img{
        max-width:92px;
        max-height:76px;
    }

    .login-bg .stv-login-brand-divider{
        height:61px;
    }

    .login-bg .stv-login-brand-copy .panel-name{
        font-size:20px;
    }

    .login-bg .stv-login-brand-subtitle{
        font-size:7px;
        letter-spacing:1.5px;
    }

    .login-bg .login-card input,
    .login-bg .login-card .btn.neon{
        height:48px;
    }
}
