:root{--auth-navy:#020817;--auth-blue:#168dff;--auth-cyan:#00c6ff;--auth-border:rgba(0,198,255,.45);--auth-muted:#9eb2c9;--auth-white:#f8fbff}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0}body.cyber-auth-page{overflow-x:hidden;color:var(--auth-white);background:radial-gradient(circle at 50% 40%,rgba(15,93,190,.24),transparent 38%),linear-gradient(145deg,#01040d 0%,#020817 48%,#001126 100%);font-family:Arial,Helvetica,sans-serif}.matrix-canvas{position:fixed;inset:0;z-index:0;width:100%;height:100%;opacity:.75}.cyber-vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at center,transparent 22%,rgba(0,5,15,.25) 63%,rgba(0,2,9,.88) 100%),linear-gradient(to bottom,rgba(2,8,23,.08),rgba(0,3,12,.52))}.cyber-floor{position:fixed;left:-15%;right:-15%;bottom:-28vh;z-index:1;height:58vh;opacity:.58;transform:perspective(530px) rotateX(62deg);transform-origin:center top;background-image:linear-gradient(rgba(0,140,255,.24) 1px,transparent 1px),linear-gradient(90deg,rgba(0,198,255,.22) 1px,transparent 1px);background-size:46px 46px;box-shadow:0 -30px 90px rgba(0,126,255,.22);z-index:3;display:grid;place-items:center;min-height:100vh;padding:34px 18px}.cyber-auth-wrap{width:min(100%,570px)}.cyber-auth-card{position:relative;overflow:hidden;padding:34px;border:1px solid var(--auth-border);border-radius:26px;background:linear-gradient(145deg,rgba(4,21,47,.91),rgba(1,10,26,.94));box-shadow:0 0 0 1px rgba(14,135,255,.14),0 0 38px rgba(0,125,255,.25),0 30px 85px rgba(0,0,0,.58);backdrop-filter:blur(18px)}.cyber-auth-card:before{content:"";position:absolute;inset:-2px;pointer-events:none;border-radius:inherit;background:linear-gradient(115deg,transparent 20%,rgba(0,198,255,.13),transparent 52%);transform:translateX(-100%);z-index:1;text-align:center}.cyber-logo{width:84px;height:84px;object-fit:contain;margin-bottom:13px;filter:drop-shadow(0 0 9px rgba(0,198,255,.65)) drop-shadow(0 0 24px rgba(0,108,255,.36))}.cyber-brand-title{margin:0;font-size:clamp(1.6rem,5vw,2.25rem);font-weight:850;letter-spacing:.045em}.cyber-brand-title span{color:var(--auth-cyan)}.cyber-brand-subtitle{margin:7px 0 0;color:#b6c7da;font-size:.74rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}.cyber-divider{width:52px;height:2px;margin:20px auto;border-radius:999px;background:linear-gradient(90deg,transparent,var(--auth-cyan),transparent);box-shadow:0 0 15px rgba(0,198,255,.72)}.cyber-heading{margin-bottom:6px;text-align:center;font-weight:850}.cyber-intro{margin-bottom:24px;color:var(--auth-muted);text-align:center;line-height:1.6}.cyber-alert{margin-bottom:12px;padding:12px 14px;border:1px solid rgba(0,198,255,.28);border-radius:12px;background:rgba(4,18,39,.9);color:#ddecff;font-size:.86rem}.cyber-alert-danger{border-color:rgba(255,101,119,.48);color:#ffd7dc}.cyber-alert-success{border-color:rgba(41,211,145,.45);color:#d3ffed}.cyber-label{display:block;margin-bottom:8px;color:#33c9ff;font-size:.76rem;font-weight:800;letter-spacing:.055em;text-transform:uppercase}.cyber-field{position:relative;margin-bottom:17px}.cyber-field-icon{position:absolute;left:16px;top:50%;z-index:2;transform:translateY(-50%);color:var(--auth-cyan);font-size:1.05rem}.cyber-input{width:100%;min-height:52px;padding:12px 48px;border:1px solid rgba(0,157,255,.58);border-radius:11px;outline:0;color:#fff;background:rgba(0,5,17,.64)}.cyber-input::placeholder{color:#70849c}.cyber-input:focus{border-color:var(--auth-cyan);background:rgba(0,12,31,.88);box-shadow:0 0 0 4px rgba(0,198,255,.1),0 0 18px rgba(0,137,255,.18)}.password-toggle{position:absolute;right:8px;top:50%;z-index:2;width:38px;height:38px;transform:translateY(-50%);border:0;color:var(--auth-cyan);background:transparent;cursor:pointer}.cyber-button{width:100%;min-height:52px;border:0;border-radius:11px;color:#fff;font-weight:850;letter-spacing:.045em;background:linear-gradient(100deg,#0868ff,#00c6ff);box-shadow:0 9px 28px rgba(0,132,255,.25);cursor:pointer}.cyber-button-outline{margin-top:14px;background:rgba(0,8,22,.4);border:1px solid var(--auth-cyan);color:var(--auth-cyan);box-shadow:none}.cyber-back-link{display:inline-flex;align-items:center;justify-content:center;width:100%;margin-top:15px;color:#59d4ff;text-decoration:none;font-size:.88rem}.cyber-security-strip{display:grid;grid-template-columns:repeat(3,1fr);margin-top:22px;padding:15px 8px;border:1px solid rgba(55,134,222,.22);border-radius:13px;background:rgba(0,5,17,.38)}.cyber-security-item{padding:0 10px;color:#d4e2f2;text-align:center;font-size:.69rem;line-height:1.45}.cyber-security-item+.cyber-security-item{border-left:1px solid rgba(120,169,222,.22)}.cyber-security-item i{display:block;margin-bottom:5px;color:var(--auth-cyan);font-size:1.25rem}.cyber-footer{margin-top:20px;color:#a8bad0;text-align:center;font-size:.75rem}.cyber-footer strong{color:#fff}.otp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:11px 0 23px}.otp-box{width:100%;aspect-ratio:1/1.05;min-width:0;border:1px solid var(--auth-cyan);border-radius:11px;outline:0;color:#fff;background:rgba(0,5,17,.76);text-align:center;font-size:clamp(1.25rem,5vw,1.75rem);font-weight:800;caret-color:var(--auth-cyan)}.otp-box:focus{transform:translateY(-2px);box-shadow:0 0 0 3px rgba(0,198,255,.12),0 0 20px rgba(0,158,255,.26)}.hidden-code-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}@media(max-width:575px){.cyber-auth-shell{padding:18px 11px}.cyber-auth-card{padding:25px 18px;border-radius:20px}.otp-grid{gap:6px}.cyber-security-strip{grid-template-columns:1fr;gap:12px}.cyber-security-item+.cyber-security-item{padding-top:12px;border-top:1px solid rgba(120,169,222,.22);border-left:0}}@media(prefers-reduced-motion:reduce){.cyber-floor,.cyber-auth-card:before{ }
    .cyber-auth-card { padding: 20px 13px; }
    .cyber-logo { width: 68px; height: 68px; }
    .cyber-brand-subtitle { letter-spacing: .1em; }
    .otp-grid { gap: 4px; }
    .otp-box { border-radius: 8px; }
}

body.cyber-auth-page{background:#010715 url('../images/matrix-blue-bg.webp') center center/cover no-repeat;}


/* PERFORMANCE */

/* Performance patch for the Mazetech blue Matrix authentication pages */

.matrix-canvas {
    opacity: .55;
}

.cyber-floor {
    opacity: .38;
    animation-duration: 12s;
}

.cyber-auth-card {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.cyber-auth-card::before {
    animation-duration: 8s;
}

@media (max-width: 768px) {
    .matrix-canvas {
        opacity: .42;
    }

    .cyber-floor {
        display: none;
    }

    .cyber-auth-card {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(3, 15, 35, .96);
        box-shadow:
            0 0 20px rgba(0, 125, 255, .18),
            0 20px 50px rgba(0, 0, 0, .45);
    }

    .cyber-auth-card::before {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .matrix-canvas,
    .cyber-floor,
    .cyber-auth-card::before {
        display: none;
    }
}

body.cyber-auth-page{
    background-attachment:scroll;
}
.cyber-auth-shell,.cyber-auth-card{
    contain:layout paint;
}

/* ==========================================================
   AUTH LAYOUT FIX — LOGIN + 2FA
========================================================== */

/* Restore the floor to a background-only layer. */
.cyber-floor {
    display: block;
    min-height: 0;
    padding: 0;
    place-items: initial;
    pointer-events: none;
}

/* The original stylesheet was missing this shell rule, which caused
   both authentication cards to sit against the left side. */
.cyber-auth-shell {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 34px 20px;
}

.cyber-auth-wrap {
    width: 100%;
    max-width: 570px;
    margin: auto;
}

.cyber-auth-card {
    width: 100%;
    margin: 0 auto;
}

.cyber-brand {
    text-align: center;
}

.cyber-logo {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Short desktop/laptop screens */
@media (max-height: 780px) and (min-width: 576px) {
    .cyber-auth-shell {
        align-items: flex-start;
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .cyber-auth-wrap {
        max-width: 520px;
    }

    .cyber-auth-card {
        padding: 25px 30px;
    }

    .cyber-logo {
        width: 66px;
        height: 66px;
        margin-bottom: 8px;
    }

    .cyber-divider {
        margin-top: 13px;
        margin-bottom: 13px;
    }

    .cyber-intro {
        margin-bottom: 16px;
    }

    .cyber-security-strip {
        margin-top: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .cyber-footer {
        margin-top: 12px;
    }
}

/* Phones */
@media (max-width: 575px) {
    .cyber-floor {
        display: none;
    }

    .cyber-auth-shell {
        align-items: flex-start;
        justify-content: center;
        padding: 18px 11px 24px;
    }

    .cyber-auth-wrap {
        width: 100%;
        max-width: 100%;
    }

    .cyber-auth-card {
        width: 100%;
        margin: 0;
    }
}