:root {
    /* Estrutura escura */
    --dc-black: #05080d;
    --dc-navy: #08111f;
    --dc-surface: #0d1828;
    --dc-surface-light: #132238;
    --dc-panel: rgba(11, 23, 39, .94);

    /* Destaques tecnológicos */
    --dc-cyan: #22d3ee;
    --dc-cyan-light: #67e8f9;
    --dc-cyan-dark: #0891b2;
    --dc-blue: #2563eb;
    --dc-blue-dark: #1e3a8a;

    /* Status */
    --success: #22c55e;
    --warning: #f59e0b;
    --danger: #ef4444;

    /* Textos e bordas */
    --text: #f1f5f9;
    --muted: #94a3b8;
    --muted-light: #cbd5e1;
    --line: rgba(148, 163, 184, .18);
    --line-highlight: rgba(34, 211, 238, .28);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 24px;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;

    background:
        radial-gradient(
            circle at 16% 18%,
            rgba(37, 99, 235, .16),
            transparent 27%
        ),
        radial-gradient(
            circle at 84% 22%,
            rgba(34, 211, 238, .12),
            transparent 26%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(8, 145, 178, .08),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #03060a 0%,
            #07101c 42%,
            #0a1728 70%,
            #03070d 100%
        );

    background-attachment: fixed;
}

/* Grade técnica ao fundo */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .55;

    background-image:
        linear-gradient(
            rgba(34, 211, 238, .035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(34, 211, 238, .035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, .9),
        transparent 92%
    );
}

/* Vinheta para profundidade */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            transparent 35%,
            rgba(0, 0, 0, .68) 100%
        );
}

.login-page {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1160px;
}

.login-shell {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    overflow: hidden;

    border: 1px solid rgba(103, 232, 249, .19);
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 34, 56, .98),
            rgba(5, 12, 23, .98)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 0 0 1px rgba(0, 0, 0, .55),
        0 30px 90px rgba(0, 0, 0, .72),
        0 0 55px rgba(8, 145, 178, .07);

    backdrop-filter: blur(18px);
}

/* Linha luminosa superior */
.login-shell::before {
    content: "";
    position: absolute;
    top: 0;
    left: 7%;
    width: 46%;
    height: 1px;
    z-index: 3;

    background: linear-gradient(
        90deg,
        transparent,
        var(--dc-cyan),
        transparent
    );

    box-shadow: 0 0 16px rgba(34, 211, 238, .72);
}

.brand-side {
    position: relative;
    padding: 48px;
    overflow: hidden;

    border-right: 1px solid var(--line);

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(34, 211, 238, .11),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            rgba(15, 31, 51, .98),
            rgba(6, 15, 27, .99)
        );
}

/* Detalhe de iluminação interna */
.brand-side::after {
    content: "";
    position: absolute;
    right: -130px;
    bottom: -170px;
    width: 360px;
    height: 360px;
    pointer-events: none;

    border: 1px solid rgba(34, 211, 238, .11);
    border-radius: 50%;

    box-shadow:
        0 0 0 40px rgba(34, 211, 238, .025),
        0 0 0 80px rgba(34, 211, 238, .018);
}

.form-side {
    position: relative;
    padding: 48px;

    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, .025),
            transparent 32%
        ),
        linear-gradient(
            155deg,
            rgba(10, 23, 40, .99),
            rgba(3, 9, 17, .99)
        );
}

.brand-mark {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 58px;
}

.brand-icon {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;

    border: 1px solid rgba(103, 232, 249, .38);
    border-radius: 18px;

    color: var(--dc-cyan-light);
    font-size: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(34, 211, 238, .18),
            rgba(37, 99, 235, .08)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 0 26px rgba(34, 211, 238, .14);
}

.brand-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.4px;
}

.brand-subtitle {
    margin-top: 5px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: .3px;
}

.hero-copy {
    position: relative;
    z-index: 2;
}

.hero-copy h2 {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: 40px;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -1.2px;
}

.hero-copy h2::after {
    content: "";
    display: block;
    width: 62px;
    height: 3px;
    margin-top: 20px;
    border-radius: 999px;

    background: linear-gradient(
        90deg,
        var(--dc-cyan),
        var(--dc-blue)
    );

    box-shadow: 0 0 14px rgba(34, 211, 238, .45);
}

.hero-copy p {
    max-width: 540px;
    margin: 0 0 44px;
    color: var(--muted-light);
    font-size: 16px;
    line-height: 1.75;
}

.feature-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.feature-item {
    position: relative;
    min-height: 155px;
    padding: 22px;
    overflow: hidden;

    border: 1px solid var(--line);
    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(19, 34, 56, .88),
            rgba(7, 16, 28, .88)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .045),
        0 12px 30px rgba(0, 0, 0, .26);

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

.feature-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    width: 35px;
    height: 2px;

    background: var(--dc-cyan);
    box-shadow: 0 0 10px rgba(34, 211, 238, .65);
}

.feature-item:hover {
    transform: translateY(-2px);
    border-color: var(--line-highlight);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 16px 35px rgba(0, 0, 0, .32),
        0 0 22px rgba(34, 211, 238, .05);
}

.feature-item i {
    margin-bottom: 16px;
    color: var(--dc-cyan);
    font-size: 21px;
}

.feature-item strong {
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
    font-size: 15px;
}

.feature-item span {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

.login-container {
    max-width: 470px;
    margin: 0 auto;
}

.login-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 26px;
    padding: 9px 15px;

    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 999px;

    color: #86efac;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .35px;
    text-transform: uppercase;

    background: rgba(34, 197, 94, .08);
}

.login-badge i {
    color: var(--success);
    filter: drop-shadow(0 0 6px rgba(34, 197, 94, .75));
}

.login-container h1 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 36px;
    font-weight: 900;
    letter-spacing: -.8px;
}

.login-description {
    margin-bottom: 32px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.65;
}

.form-label {
    display: block;
    margin-bottom: 9px;
    color: var(--muted-light);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
}

.input-group-custom {
    position: relative;
}

.input-group-custom i {
    position: absolute;
    top: 50%;
    left: 18px;
    z-index: 2;
    transform: translateY(-50%);
    color: var(--dc-cyan);
}

.form-control {
    width: 100%;
    height: 62px;
    padding: 0 52px 0 50px;

    border: 1px solid rgba(148, 163, 184, .22);
    border-radius: 16px;
    outline: none;

    color: #ffffff;
    font-size: 15px;
    font-weight: 700;

    background:
        linear-gradient(
            145deg,
            rgba(14, 28, 47, .96),
            rgba(6, 15, 27, .98)
        );

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

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

.form-control:hover {
    border-color: rgba(34, 211, 238, .32);
}

.form-control:focus {
    color: #ffffff;
    border-color: var(--dc-cyan);
    background: #081524;

    box-shadow:
        0 0 0 4px rgba(34, 211, 238, .09),
        0 0 22px rgba(34, 211, 238, .08);
}

.form-control::placeholder {
    color: #64748b;
    font-weight: 500;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;

    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    cursor: pointer;

    border: 1px solid rgba(148, 163, 184, .14);
    border-radius: 12px;

    color: var(--muted-light);
    background: rgba(148, 163, 184, .07);

    transition: .2s ease;
}

.password-toggle:hover {
    color: var(--dc-cyan-light);
    border-color: rgba(34, 211, 238, .32);
    background: rgba(34, 211, 238, .1);
}

.btn-login {
    position: relative;
    width: 100%;
    height: 62px;
    margin-top: 14px;
    overflow: hidden;
    cursor: pointer;

    border: 1px solid rgba(103, 232, 249, .34);
    border-radius: 16px;

    color: #021018;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .2px;

    background:
        linear-gradient(
            135deg,
            var(--dc-cyan-light),
            var(--dc-cyan) 52%,
            var(--dc-cyan-dark)
        );

    box-shadow:
        0 14px 34px rgba(8, 145, 178, .22),
        inset 0 1px 0 rgba(255, 255, 255, .42);

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

.btn-login::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -70%;
    width: 45%;
    height: 180%;
    transform: rotate(22deg);

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, .42),
        transparent
    );

    transition: left .45s ease;
}

.btn-login:hover {
    color: #020b11;
    transform: translateY(-1px);
    filter: brightness(1.06);

    box-shadow:
        0 18px 40px rgba(8, 145, 178, .32),
        0 0 22px rgba(34, 211, 238, .15);
}

.btn-login:hover::after {
    left: 130%;
}

.btn-login:active {
    transform: translateY(1px);
}

.login-options {
    display: grid;
    gap: 13px;
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.login-options a {
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    border: 1px solid rgba(148, 163, 184, .17);
    border-radius: 14px;

    color: var(--muted-light);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;

    background:
        linear-gradient(
            145deg,
            rgba(19, 34, 56, .76),
            rgba(7, 16, 28, .86)
        );

    transition: .2s ease;
}

.login-options a i {
    color: var(--dc-cyan);
}

.login-options a:hover {
    color: #ffffff;
    border-color: rgba(34, 211, 238, .42);
    background: rgba(34, 211, 238, .08);

    box-shadow:
        inset 0 0 18px rgba(34, 211, 238, .025),
        0 0 18px rgba(34, 211, 238, .05);
}

.options-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
}

.status-login {
    margin-top: 18px;
}

.security-note {
    margin-top: 26px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    text-align: center;
}

.security-note i {
    margin-right: 4px;
    color: var(--success);
}

.footer-login {
    margin-top: 24px;
    color: #64748b;
    font-size: 11px;
    letter-spacing: .3px;
    text-align: center;
}

/* Alertas do sistema */
.alert {
    padding: 14px 16px;
    border-radius: 13px;
    font-size: 13px;
    line-height: 1.5;
}

.alert-success {
    color: #bbf7d0;
    border: 1px solid rgba(34, 197, 94, .28);
    background: rgba(34, 197, 94, .09);
}

.alert-danger {
    color: #fecaca;
    border: 1px solid rgba(239, 68, 68, .3);
    background: rgba(239, 68, 68, .09);
}

.alert-warning {
    color: #fde68a;
    border: 1px solid rgba(245, 158, 11, .3);
    background: rgba(245, 158, 11, .09);
}

/* Preenchimento automático dos navegadores */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    transition: background-color 9999s ease-in-out 0s;
    box-shadow:
        0 0 0 1000px #081524 inset,
        0 0 0 4px rgba(34, 211, 238, .08);
}

/* Tablets */
@media (max-width: 920px) {
    body {
        align-items: flex-start;
        padding: 14px;
    }

    .login-shell {
        grid-template-columns: 1fr;
        border-radius: 21px;
    }

    .brand-side {
        padding: 30px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .form-side {
        padding: 30px;
    }

    .brand-mark {
        margin-bottom: 34px;
    }

    .hero-copy h2 {
        font-size: 30px;
    }

    .hero-copy p {
        margin-bottom: 28px;
        font-size: 15px;
    }
}

/* Celulares */
@media (max-width: 560px) {
    body {
        padding: 8px;
    }

    .login-shell {
        border-radius: 18px;
    }

    .brand-side,
    .form-side {
        padding: 22px;
    }

    .brand-icon {
        width: 56px;
        height: 56px;
        border-radius: 15px;
        font-size: 22px;
    }

    .brand-title {
        font-size: 21px;
    }

    .brand-subtitle {
        font-size: 12px;
    }

    .hero-copy h2 {
        font-size: 27px;
    }

    .hero-copy p {
        font-size: 14px;
    }

    .feature-grid,
    .options-row {
        grid-template-columns: 1fr;
    }

    .feature-item {
        min-height: auto;
    }

    .login-container h1 {
        font-size: 29px;
    }

    .form-control,
    .btn-login {
        height: 58px;
        border-radius: 14px;
    }
}

/* Reduz animações conforme configuração do usuário */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }
}

/* Visual infrastructure: restrained network topology and rack architecture */
.brand-side{min-height:680px;display:flex;flex-direction:column;justify-content:space-between}
.brand-mark{margin-bottom:0}.brand-subtitle,.hero-copy,.feature-grid,.login-description,.security-note,.footer-login{display:none!important}
.infrastructure{position:relative;z-index:2;min-height:450px;display:flex;flex-direction:column;justify-content:center;align-items:center;isolation:isolate}
.network-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.85}
.rack{position:relative;width:220px;padding:18px 14px;border:1px solid #28435c;border-radius:12px;background:linear-gradient(120deg,#15283b,#060e19 68%);box-shadow:0 25px 50px #0009,0 0 55px #0891b21b;transform:perspective(850px) rotateY(-8deg)}
.rack:before{content:"";position:absolute;inset:5px;border:1px solid #ffffff0b;border-radius:8px;pointer-events:none}
.rack-unit{height:44px;margin:8px 0;border:1px solid #294157;border-radius:5px;background:linear-gradient(180deg,#17283a,#0a1320);display:flex;align-items:center;gap:9px;padding:0 12px;box-shadow:inset 0 1px #ffffff10}
.rack-unit:before{content:"";width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e8c;animation:blink 2.8s infinite}
.rack-unit:nth-child(2n):before{animation-delay:1s}.rack-unit:after{content:"";flex:1;height:8px;background:repeating-linear-gradient(90deg,#39536a 0 3px,transparent 3px 8px);opacity:.65}
.orbit-icon{position:absolute;width:64px;height:64px;display:grid;place-items:center;font-size:27px;color:#67e8f9;background:#0a1a2b;border:1px solid #2c647d;border-radius:16px;box-shadow:0 0 30px #0891b238;animation:float 6s ease-in-out infinite}
.orbit-icon.music{left:4%;top:15%}.orbit-icon.ai{right:3%;top:15%;animation-delay:-2s}.orbit-icon.listeners{left:3%;bottom:12%;animation-delay:-3s}.orbit-icon.flash{right:4%;bottom:12%;animation-delay:-1s}
.infrastructure:after{content:"";position:absolute;width:320px;height:320px;border:1px solid #22d3ee19;border-radius:50%;box-shadow:0 0 0 50px #22d3ee05,0 0 0 100px #22d3ee04;z-index:-1}
.form-side{display:flex;align-items:center}.login-container{width:100%}.login-badge{border-radius:8px}.btn-login{border-radius:10px}.form-control{border-radius:10px}.login-options a{border-radius:9px}
@keyframes blink{50%{opacity:.3}}@keyframes float{50%{transform:translateY(-10px)}}
@media(max-width:920px){.brand-side{min-height:350px}.infrastructure{min-height:265px}.rack{transform:scale(.72);margin:-35px 0}.orbit-icon{transform:scale(.75)}.infrastructure:after{transform:scale(.7)}}
@media(max-width:560px){.brand-side{min-height:260px}.infrastructure{min-height:190px}.rack{transform:scale(.54);margin:-65px 0}.orbit-icon{width:43px;height:43px;font-size:20px;border-radius:11px;animation:none}.infrastructure:after{transform:scale(.5)}.brand-mark{gap:10px}.login-badge{font-size:10px}}
@media(prefers-reduced-motion:reduce){.rack-unit:before,.orbit-icon{animation:none}}


/* Tema aço grafite: acabamento metálico fosco, sem halo azul no fundo */
:root {
    --dc-black: #202429;
    --dc-navy: #2a3036;
    --dc-surface: #30363d;
    --dc-surface-light: #3b4249;
    --dc-panel: rgba(42, 47, 53, .97);
    --dc-cyan: #6aa8c8;
    --dc-cyan-light: #a3c9dd;
    --dc-cyan-dark: #467a98;
    --dc-blue: #477fbd;
    --line: rgba(210, 220, 230, .13);
    --line-highlight: rgba(125, 175, 205, .29);
}
body {
    background-color: #2a2f34;
    background-image:
        linear-gradient(115deg, rgba(255,255,255,.045), transparent 34%, rgba(0,0,0,.09) 74%),
        linear-gradient(160deg, #41474e 0%, #30363c 38%, #242a30 78%, #31373d 100%);
    background-attachment: fixed;
}
body::before {
    opacity: .16;
    background-image: repeating-linear-gradient(0deg, rgba(230,235,240,.06) 0px, rgba(230,235,240,.06) 1px, transparent 1px, transparent 4px);
    background-size: auto;
    mask-image: none;
}
body::after {background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.20) 100%);}
.login-shell {
    border-color: rgba(202,211,220,.20);
    background: linear-gradient(140deg, #373e45, #242a30);
    box-shadow: 0 24px 72px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.08);
}
.login-shell::before {background:linear-gradient(90deg,transparent,#9cb7c8,transparent);box-shadow:0 0 9px rgba(155,185,205,.22)}
.brand-side {
    background: linear-gradient(148deg, #434a51 0%, #343b42 44%, #292f36 100%);
    border-right-color: rgba(230,235,240,.12);
}
.form-side {
    background: linear-gradient(145deg, #30363d 0%, #252b31 100%);
}
.brand-side::after {border-color:rgba(190,210,225,.07);box-shadow:0 0 0 40px rgba(210,225,235,.012),0 0 0 80px rgba(210,225,235,.007)}
.brand-icon {border-color:rgba(170,195,215,.24);background:linear-gradient(145deg,#48535e,#303a44);box-shadow:0 10px 22px rgba(0,0,0,.16)}
.rack {border-color:#65717c;background:linear-gradient(120deg,#434d57,#242b32 68%);box-shadow:0 19px 42px #0006}
.rack-unit {border-color:#56616c;background:linear-gradient(180deg,#49535d,#303841)}
.rack-unit:after {background:repeating-linear-gradient(90deg,#677785 0 3px,transparent 3px 8px)}
.orbit-icon {color:#b3d0e2;background:#343e47;border-color:#627c8d;box-shadow:0 12px 24px #0003}
.infrastructure:after {border-color:rgba(200,220,235,.10);box-shadow:0 0 0 50px rgba(210,225,235,.017),0 0 0 100px rgba(210,225,235,.01)}
.network-canvas {opacity:.48}
.form-control {background:linear-gradient(145deg,#3c454e,#30373f);border-color:rgba(210,220,230,.22)}
.form-control:focus {background:#353f48;border-color:#81b0cc;box-shadow:0 0 0 3px rgba(125,175,205,.13)}
.form-control:-webkit-autofill,.form-control:-webkit-autofill:hover,.form-control:-webkit-autofill:focus {box-shadow:0 0 0 1000px #353f48 inset}
.btn-login {color:#f8fafc;border-color:#5488b2;background:linear-gradient(135deg,#477fac,#356c98 55%,#2a5981);box-shadow:0 10px 24px rgba(0,0,0,.21)}
.btn-login:hover {color:#fff;box-shadow:0 13px 27px rgba(0,0,0,.26)}
.login-options a {background:linear-gradient(145deg,#3b444d,#30373f);border-color:rgba(210,220,230,.16)}
.login-options a:hover {background:#414d58;border-color:rgba(155,190,215,.40)}
.login-badge {background:rgba(50,80,68,.18)}
@media(max-width:920px){.brand-side{border-right:0;border-bottom:1px solid rgba(230,235,240,.12)}}