:root{
            --bg-1:#07111f;
            --bg-2:#0b1f38;
            --bg-3:#123f7a;
            --card:#ffffff;
            --text:#111827;
            --muted:#6b7280;
            --line:#dbe3ee;
            --primary:#2563eb;
            --primary-hover:#1d4ed8;
            --input-bg:#f8fafc;
        }

        *{
            box-sizing:border-box;
        }

        html,body{
            height:100%;
            margin:0;
            font-family: "Segoe UI", Arial, sans-serif;
            color:var(--text);
        }

        body{
            min-height:100vh;
            overflow:auto;
            background:
                radial-gradient(circle at 15% 20%, rgba(59,130,246,.18), transparent 20%),
                radial-gradient(circle at 80% 30%, rgba(14,165,233,.18), transparent 20%),
                radial-gradient(circle at 50% 80%, rgba(37,99,235,.14), transparent 22%),
                linear-gradient(135deg, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%);
        }

       .login-page{
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            padding:32px;
            position:relative;
        }
        
        @media (max-height: 820px){
            .login-page{
                align-items:flex-start;
                padding-top:24px;
                padding-bottom:24px;
            }
        }

        .login-page::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events:none;
        }

        .login-shell{
            position:relative;
            z-index:2;
            width:100%;
            max-width:1280px;
            margin:0 auto;
            display:grid;
            grid-template-columns: 1.15fr 0.85fr;
            align-items:center;
            gap:36px;
        }

        .brand-side{
            min-height:680px;
            border-radius:28px;
            position:relative;
            overflow:hidden;
            padding:40px 40px 20px 40px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.10);
            box-shadow:0 30px 70px rgba(0,0,0,.28);
            backdrop-filter: blur(6px);
        }

        .brand-top{
            display:flex;
            flex-direction:column;
            gap:10px;
        }

        .brand-badge{
            display:inline-flex;
            align-items:center;
            gap:10px;
            width:max-content;
            padding:10px 16px;
            border-radius:999px;
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.12);
            color:#dbeafe;
            font-size:13px;
            font-weight:600;
            letter-spacing:.4px;
        }

        .brand-title{
            margin:0;
            font-size:58px;
            line-height:.95;
            font-weight:900;
            letter-spacing:1px;
            color:#ffffff;
        }

        .brand-subtitle{
            margin:0;
            font-size:18px;
            line-height:1.5;
            max-width:560px;
            color:rgba(255,255,255,.80);
        }

        .mascot-wrap{
            position:relative;
            flex:1;
            display:flex;
            align-items:center;
            justify-content:center;
            min-height:420px;
        }

        .mascot-glow{
            position:absolute;
            width:520px;
            height:520px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(56,189,248,.35) 0%, rgba(37,99,235,.18) 35%, transparent 70%);
            filter:blur(30px);
        }

        .mascot-img{
            position:relative;
            z-index:2;
            max-height:620px;
            max-width:100%;
            object-fit:contain;
            filter:
                drop-shadow(0 20px 50px rgba(0,0,0,.35))
                drop-shadow(0 0 35px rgba(56,189,248,.18));
        }

        .brand-footer{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        }

        .brand-chip{
            padding:10px 14px;
            border-radius:12px;
            background:rgba(255,255,255,.06);
            border:1px solid rgba(255,255,255,.10);
            color:#e5f0ff;
            font-size:13px;
            font-weight:600;
        }

        .login-card{
            position:relative;
            z-index:2;
            background:rgba(255,255,255,.96);
            border:1px solid rgba(255,255,255,.65);
            border-radius:28px;
            padding:34px;
            box-shadow:0 30px 70px rgba(0,0,0,.28);
            backdrop-filter: blur(10px);
        }

        .login-card::before{
            content:"";
            position:absolute;
            left:0;
            right:0;
            top:0;
            height:4px;
            border-radius:28px 28px 0 0;
            background:linear-gradient(90deg, #38bdf8, #2563eb);
        }

        .login-brand{
            display:flex;
            align-items:center;
            gap:14px;
            margin-bottom:26px;
        }

        .login-brand-logo{
            width:56px;
            height:56px;
            border-radius:16px;
            background:linear-gradient(135deg, #eff6ff, #dbeafe);
            display:flex;
            align-items:center;
            justify-content:center;
            color:#2563eb;
            font-size:24px;
            box-shadow: inset 0 0 0 1px #dbeafe;
        }

        .login-brand-text h1{
            margin:0;
            font-size:28px;
            font-weight:900;
            letter-spacing:.5px;
            color:#0f172a;
        }

        .login-brand-text p{
            margin:4px 0 0 0;
            color:var(--muted);
            font-size:13px;
            font-weight:600;
            text-transform:uppercase;
            letter-spacing:1px;
        }

        .login-title{
            margin:0 0 6px 0;
            font-size:30px;
            font-weight:800;
            color:#111827;
        }

        .login-desc{
            margin:0 0 24px 0;
            color:#6b7280;
            font-size:15px;
        }

        .form-label{
            font-weight:700;
            color:#374151;
            margin-bottom:8px;
        }

        .input-group{
            border:1px solid var(--line);
            border-radius:16px;
            overflow:hidden;
            background:var(--input-bg);
            transition:.25s ease;
        }

        .input-group:focus-within{
            border-color:#93c5fd;
            box-shadow:0 0 0 4px rgba(37,99,235,.10);
            background:#fff;
        }

        .input-group-text{
            background:transparent;
            border:none;
            color:#6b7280;
            min-width:50px;
            justify-content:center;
        }

        .form-control{
            border:none !important;
            background:transparent !important;
            min-height:56px;
            font-size:15px;
            color:#111827;
            box-shadow:none !important;
        }

        .form-control::placeholder{
            color:#9ca3af;
        }

        .toggle-password{
            cursor:pointer;
        }

        .btn-login{
            width:100%;
            min-height:56px;
            border:none;
            border-radius:16px;
            background:linear-gradient(135deg, #2563eb, #1d4ed8);
            color:#fff;
            font-size:16px;
            font-weight:800;
            letter-spacing:.2px;
            transition:.25s ease;
            box-shadow:0 14px 26px rgba(37,99,235,.28);
        }

        .btn-login:hover{
            transform:translateY(-1px);
            background:linear-gradient(135deg, #1d4ed8, #1e40af);
        }

        .login-bottom{
            margin-top:22px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
        }

        .login-note{
            color:#6b7280;
            font-size:13px;
        }

        .login-link{
            text-decoration:none;
            color:#2563eb;
            font-weight:700;
            font-size:13px;
        }

        @media (max-width: 1100px){
            .login-shell{
                grid-template-columns: 1fr;
                gap:24px;
            }

            .brand-side{
                min-height:unset;
                padding:28px;
            }

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

            .mascot-img{
                max-height:420px;
            }
        }

        @media (max-width: 640px){
            .login-page{
                padding:16px;
            }

            .brand-side{
                padding:22px;
                border-radius:22px;
            }

            .login-card{
                padding:24px;
                border-radius:22px;
            }

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

            .login-title{
                font-size:24px;
            }

            .mascot-img{
                max-height:320px;
            }

            .login-bottom{
                flex-direction:column;
                align-items:flex-start;
            }
        }