*{margin:0;padding:0;box-sizing:border-box;}

        body{
            font-family:'Inter',sans-serif;
            height:100vh;
            overflow:hidden;
            background:#08090d;
            display:flex;
            align-items:center;
            justify-content:center;
        }

        canvas#bg{
            position:fixed;
            inset:0;
            width:100%;
            height:100%;
            z-index:0;
        }

        .overlay{
            position:fixed;
            inset:0;
            background:radial-gradient(ellipse 60% 70% at 50% 50%, transparent 30%, rgba(8,9,13,0.85) 100%);
            z-index:1;
        }

        .card-wrap{
            position:relative;
            z-index:10;
            width:100%;
            max-width:360px;
            padding:16px;
        }

        .login-card{
            background:rgba(255,255,255,0.035);
            border:1px solid rgba(255,255,255,0.09);
            border-radius:16px;
            padding:36px 32px;
        }

        .card-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin-bottom:32px;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:9px;
        }

        .brand-mark{
            width:28px;
            height:28px;
            border-radius:7px;
            background:#5b5bd6;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:13px;
            color:#fff;
        }

        .brand-name{
            font-size:0.88rem;
            font-weight:600;
            color:#ededef;
            letter-spacing:-0.01em;
        }

        .version{
            font-size:0.68rem;
            color:#3d3d4a;
        }

        .heading{
            margin-bottom:28px;
        }

        .heading h1{
            font-size:1.45rem;
            font-weight:700;
            color:#ededef;
            letter-spacing:-0.03em;
            line-height:1.2;
            margin-bottom:5px;
        }

        .heading h1 em{
            font-style:normal;
            color:#5b5bd6;
        }

        .heading .sub{
            font-size:0.78rem;
            color:#62626f;
            line-height:1.5;
        }

        .field-label{
            font-size:0.7rem;
            font-weight:500;
            color:#44444f;
            letter-spacing:0.05em;
            text-transform:uppercase;
            display:block;
            margin-bottom:6px;
        }

        .input-wrap{
            position:relative;
            margin-bottom:14px;
        }

        .input-icon{
            position:absolute;
            left:12px;
            top:50%;
            transform:translateY(-50%);
            font-size:14px;
            color:#2d2d38;
            pointer-events:none;
        }

        .form-control{
            width:100%;
            background:#0d0e16;
            border:1px solid #1c1c27;
            border-radius:9px;
            padding:10px 12px 10px 36px;
            color:#ededef;
            font-size:0.83rem;
            font-family:'Inter',sans-serif;
            outline:none;
            transition:border-color .15s;
            letter-spacing:-0.01em;
        }

        .form-control::placeholder{
            color:#25252f;
        }

        .form-control:focus{
            border-color:#5b5bd6;
            box-shadow:none;
            background:#0d0e16;
            color:#ededef;
        }

        .form-control:hover:not(:focus){
            border-color:#2a2a38;
        }

        .meta-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            margin:16px 0 20px;
        }

        .remember-label{
            display:flex;
            align-items:center;
            gap:7px;
            font-size:0.75rem;
            color:#3d3d4a;
            cursor:pointer;
            margin:0;
        }

        .form-check-input{
            accent-color:#5b5bd6;
            width:13px;
            height:13px;
            margin:0;
        }

        .forgot-link{
            font-size:0.75rem;
            color:#5b5bd6;
            text-decoration:none;
            opacity:.8;
        }

        .forgot-link:hover{
            opacity:1;
            color:#5b5bd6;
        }

        .btn-login{
            width:100%;
            padding:11px;
            border:none;
            border-radius:9px;
            background:#5b5bd6;
            color:#fff;
            font-size:0.83rem;
            font-weight:600;
            font-family:'Inter',sans-serif;
            cursor:pointer;
            letter-spacing:-0.01em;
            display:flex;
            align-items:center;
            justify-content:center;
            gap:7px;
            transition:background .15s, transform .1s;
        }

        .btn-login:hover{
            background:#6b6bdf;
            color:#fff;
        }

        .btn-login:active{
            transform:scale(0.99);
        }

        .card-footer-row{
            margin-top:20px;
            padding-top:16px;
            border-top:1px solid rgba(255,255,255,0.05);
            display:flex;
            align-items:center;
            justify-content:center;
            gap:6px;
        }

        .footer-txt{
            font-size:0.7rem;
            color:#2d2d38;
        }

        .alert-danger{
            background:rgba(239,68,68,0.08);
            border:1px solid rgba(239,68,68,0.2);
            border-radius:9px;
            color:#f87171;
            font-size:0.78rem;
            padding:10px 12px;
            margin-bottom:18px;
        }

        @media(max-width:480px){
            .login-card{
                padding:28px 20px;
            }
        }