:root{
  --bg:#020914;--bg-2:#061423;--panel:rgba(8,24,42,.72);--panel-solid:#0a1a2c;
  --text:#f5f9ff;--muted:#8ba0b8;--line:rgba(135,188,229,.18);
  --cyan:#12c8f4;--blue:#2874ff;--green:#20d39a;--red:#ff6077;
  --shadow:0 34px 100px rgba(0,0,0,.42);--radius:26px
}
html[data-theme="light"]{
  --bg:#eaf3fb;--bg-2:#dfeaf5;--panel:rgba(255,255,255,.72);--panel-solid:#fff;
  --text:#11243a;--muted:#677d94;--line:rgba(20,70,110,.13);--shadow:0 30px 80px rgba(35,75,110,.16)
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif}
body{min-height:100vh;color:var(--text);background:
radial-gradient(circle at 15% 15%,rgba(18,200,244,.12),transparent 30%),
radial-gradient(circle at 85% 75%,rgba(40,116,255,.12),transparent 28%),
linear-gradient(135deg,var(--bg),var(--bg-2));overflow-x:hidden;transition:background .35s,color .35s}
#fxCanvas,.noise,.aurora{position:fixed;inset:0;pointer-events:none}
#fxCanvas{z-index:0}.noise{z-index:1;opacity:.14;background-image:radial-gradient(rgba(255,255,255,.35) .45px,transparent .45px);background-size:5px 5px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),transparent 85%)}
.aurora{z-index:0;filter:blur(90px);opacity:.12;border-radius:50%}.a1{width:420px;height:420px;left:-120px;top:4%;background:#11c7f4}.a2{width:460px;height:460px;right:-150px;bottom:-120px;background:#2b73ff}
.login-shell{position:relative;z-index:5;min-height:100vh;max-width:1500px;margin:auto;padding:clamp(26px,5vw,70px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(390px,.85fr);gap:clamp(44px,7vw,100px);align-items:center}
.eyebrow,.status-pill{display:inline-flex;align-items:center;gap:8px;font-size:9px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase}
.eyebrow{color:#a9edff;padding:8px 13px;border:1px solid rgba(18,200,244,.23);background:rgba(18,200,244,.05);border-radius:999px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 15px var(--green);animation:pulse 1.8s infinite}@keyframes pulse{50%{opacity:.45;box-shadow:0 0 5px var(--green)}}
.brand-panel{max-width:780px}.brand-row{display:flex;align-items:center;gap:18px;margin-top:24px}.logo-frame{width:170px;border-radius:22px;overflow:hidden;border:1px solid rgba(116,190,237,.14);box-shadow:0 22px 65px rgba(0,0,0,.32),0 0 45px rgba(0,172,255,.07);transform:perspective(900px) rotateY(5deg);transition:.4s}.logo-frame:hover{transform:perspective(900px) rotateY(0) translateY(-4px)}.logo-frame img{display:block;width:100%}.brand-mini b{display:block;font-size:12px;letter-spacing:1px}.brand-mini span{display:block;margin-top:4px;color:var(--muted);font-size:10px}
.brand-panel h1{font-size:clamp(48px,5.4vw,76px);line-height:.98;letter-spacing:-3px;margin:28px 0 18px;max-width:800px}.brand-panel h1 span{background:linear-gradient(90deg,#fff,var(--cyan));-webkit-background-clip:text;color:transparent}.lead{max-width:720px;color:var(--muted);font-size:clamp(14px,1.22vw,17px);line-height:1.8;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:32px;max-width:620px}.feature-grid article{display:flex;align-items:center;gap:12px;padding:13px 14px;border-left:2px solid var(--cyan);background:linear-gradient(90deg,rgba(18,200,244,.06),transparent);border-radius:0 10px 10px 0}.feature-grid i{font-style:normal;color:rgba(18,200,244,.65);font-size:10px}.feature-grid b{display:block;font-size:14px}.feature-grid small{display:block;margin-top:4px;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.9px}
.auth-wrap{display:flex;justify-content:flex-end}.auth-card{position:relative;width:100%;max-width:480px;padding:36px;border-radius:var(--radius);background:linear-gradient(145deg,var(--panel),rgba(5,15,28,.75));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(22px) saturate(135%);overflow:hidden}
html[data-theme="light"] .auth-card{background:rgba(255,255,255,.72)}
.auth-card:before{content:"";position:absolute;left:14%;right:14%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent);box-shadow:0 0 22px rgba(18,200,244,.5)}.card-glow{position:absolute;width:180px;height:180px;right:-80px;top:-90px;border-radius:50%;background:var(--blue);filter:blur(70px);opacity:.08}.auth-head{display:flex;align-items:center;justify-content:space-between}.status-pill{color:#72e5c0}.theme-toggle{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.035);color:var(--text);cursor:pointer;transition:.2s}.theme-toggle:hover{transform:rotate(14deg);border-color:rgba(18,200,244,.45)}
.auth-card h2{font-size:31px;letter-spacing:-.7px;margin:22px 0 6px}.auth-card>p{margin:0 0 25px;color:var(--muted);font-size:12px;line-height:1.6}
form label{display:block;margin:15px 0 7px;color:var(--muted);font-size:9px;font-weight:900;letter-spacing:.9px;text-transform:uppercase}.field{position:relative}.field input{width:100%;height:54px;padding:0 48px 0 44px;border:1px solid var(--line);border-radius:12px;background:rgba(2,11,22,.38);color:var(--text);outline:none;font-size:14px;transition:.2s}
html[data-theme="light"] .field input{background:rgba(255,255,255,.65)}.field input:focus{border-color:rgba(18,200,244,.75);box-shadow:0 0 0 3px rgba(18,200,244,.08)}.field-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#617d98;font-size:11px}.eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;border-radius:9px;background:transparent;color:#67819b;cursor:pointer}.focus-line{position:absolute;left:50%;right:50%;bottom:0;height:2px;background:linear-gradient(90deg,var(--cyan),var(--blue));transition:.25s}.field:focus-within .focus-line{left:12%;right:12%}
.form-feedback{min-height:18px;margin-top:8px;color:var(--red);font-size:10px}.submit{position:relative;overflow:hidden;width:100%;height:54px;margin-top:2px;border:0;border-radius:12px;padding:0 17px;display:flex;align-items:center;justify-content:space-between;color:#fff;background:linear-gradient(95deg,#08b9ea,#2874ff);font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 12px 30px rgba(0,125,255,.22);transition:.22s}.submit:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(0,125,255,.3)}.submit-arrow{font-size:18px}.button-shine{position:absolute;top:0;left:-120%;width:70%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:.55s}.submit:hover .button-shine{left:140%}.submit:disabled{opacity:.65;cursor:not-allowed;transform:none}
.security-note{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:20px;color:var(--muted);font-size:9px}.security-note span{color:var(--green)}
.toast-wrap{position:fixed;right:18px;top:18px;z-index:1000;width:min(360px,calc(100vw - 28px))}.toast{padding:13px 15px;margin-bottom:8px;border-radius:12px;background:rgba(8,27,45,.95);color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 50px rgba(0,0,0,.3);backdrop-filter:blur(15px);animation:toastIn .25s}.toast.ok{border-left:3px solid var(--green)}.toast.err{border-left:3px solid var(--red)}.toast b{display:block;font-size:11px}.toast small{display:block;margin-top:4px;color:#92a7bc;font-size:9px}@keyframes toastIn{from{opacity:0;transform:translateX(25px)}}
@media(max-width:1050px){.login-shell{grid-template-columns:1fr;gap:32px}.brand-panel{text-align:center;margin:auto}.eyebrow{margin:auto}.brand-row{justify-content:center}.lead{margin:auto}.feature-grid{margin:28px auto 0}.auth-wrap{justify-content:center}}
@media(max-width:680px){.login-shell{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:18px 14px 30px}.brand-panel{display:none}.auth-card{max-width:430px;padding:24px 18px;border-radius:20px}.auth-card h2,.auth-card>p{text-align:center}.auth-head{justify-content:center;position:relative}.theme-toggle{position:absolute;right:0}.status-pill{font-size:8px}.auth-card h2{font-size:25px}.field input{font-size:16px;height:51px}.submit{height:51px}.toast-wrap{left:12px;right:12px;top:12px;width:auto}}

/* ==========================================================
   NOC ISP MANAGER - LOGO VISIBILITY V5.1
   ========================================================== */

.login-brand img,
.brand-logo img,
.hero-brand img,
.hero-logo,
.brand-logo,
.login-logo {
    width: 210px !important;
    max-width: 210px !important;
    height: auto !important;
    object-fit: contain !important;
    filter:
        drop-shadow(0 0 10px rgba(0, 174, 255, .22))
        drop-shadow(0 0 24px rgba(0, 174, 255, .10));
}

/* Mantém a logo proporcional em telas menores */
@media (max-width: 900px) {
    .login-brand img,
    .brand-logo img,
    .hero-brand img,
    .hero-logo,
    .brand-logo,
    .login-logo {
        width: 170px !important;
        max-width: 170px !important;
    }
}


/* =========================================================
   NOC ISP MANAGER - VISUAL FIX V5.2
   ========================================================= */

/* LOGO MAIOR */
.logo-frame{
    width:230px !important;
    max-width:230px !important;
    border-radius:24px !important;
}

.logo-frame img{
    width:100% !important;
    height:auto !important;
    display:block !important;
}

/* Nome da empresa ao lado */
.brand-mini b{
    font-size:15px !important;
    letter-spacing:1.1px !important;
}

.brand-mini span{
    font-size:11px !important;
}

/* Tema claro - contraste correto */
html[data-theme="light"] body{
    background:
        radial-gradient(circle at 15% 18%,rgba(0,174,255,.18),transparent 32%),
        radial-gradient(circle at 83% 77%,rgba(45,115,255,.12),transparent 30%),
        linear-gradient(135deg,#edf6fd,#dfeaf5) !important;

    color:#10243a !important;
}

html[data-theme="light"] .brand-panel h1{
    color:#10243a !important;
}

html[data-theme="light"] .brand-panel h1 span{
    background:linear-gradient(
        90deg,
        #183653,
        #00aeea,
        #087cf0
    ) !important;

    -webkit-background-clip:text !important;
    background-clip:text !important;
    color:transparent !important;
}

html[data-theme="light"] .lead{
    color:#5c7288 !important;
}

html[data-theme="light"] .brand-mini b{
    color:#16314d !important;
}

html[data-theme="light"] .brand-mini span{
    color:#60778e !important;
}

html[data-theme="light"] .eyebrow{
    color:#087795 !important;
    border-color:rgba(0,156,210,.30) !important;
    background:rgba(0,174,234,.07) !important;
}

html[data-theme="light"] .feature-grid b{
    color:#17314d !important;
}

html[data-theme="light"] .feature-grid small{
    color:#60788f !important;
}

html[data-theme="light"] .auth-card{
    background:rgba(255,255,255,.82) !important;
    border-color:rgba(26,87,130,.15) !important;
    box-shadow:
        0 30px 90px rgba(33,75,112,.16) !important;
}

html[data-theme="light"] .auth-card h2{
    color:#112842 !important;
}

html[data-theme="light"] .auth-card > p{
    color:#61768b !important;
}

html[data-theme="light"] form label{
    color:#536b82 !important;
}

html[data-theme="light"] .field input{
    background:#ffffff !important;
    border-color:#ccdbe7 !important;
    color:#172a40 !important;
}

html[data-theme="light"] .security-note{
    color:#60778d !important;
}

/* tablet */
@media(max-width:1050px){
    .logo-frame{
        width:205px !important;
        max-width:205px !important;
    }
}

/* mobile */
@media(max-width:680px){
    .logo-frame{
        width:180px !important;
        max-width:180px !important;
    }
}