:root{
            --brand:#a3190c;
            --brand-dark:#7f1208;
            --brand-light:#f3d9d6;
            --brand-soft:rgba(163,25,12,.12);
            --brand-soft-2:rgba(163,25,12,.08);

            --text:#111827;
            --muted:#6b7280;
            --border:rgba(17,24,39,.12);
            --bg1:#f8f5f4;
            --bg2:#efebe9;
            --white:#ffffff;

            --success-bg:#dcfce7;
            --success-text:#166534;
            --danger-bg:#fde8e8;
            --danger-text:#991b1b;
        }

        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
        }

        body{
            min-height:100vh;
            display:flex;
            align-items:center;
            justify-content:center;
            background:
                radial-gradient(900px 500px at 20% 20%, rgba(163,25,12,.10), transparent 60%),
                radial-gradient(900px 500px at 90% 80%, rgba(163,25,12,.08), transparent 55%),
                linear-gradient(135deg, var(--bg1), var(--bg2));
            color:var(--text);
            padding:20px;
        }

        .login-wrapper{
            width:100%;
            max-width:620px;
        }

        .login-card{
            position:relative;
            background:rgba(255,255,255,.94);
            backdrop-filter:blur(10px);
            -webkit-backdrop-filter:blur(10px);
            border:1px solid rgba(17,24,39,.08);
            padding:42px 40px;
            border-radius:26px;
            box-shadow:0 35px 70px rgba(0,0,0,.10);
            overflow:hidden;
        }

        .login-card::before{
            content:"";
            position:absolute;
            inset:-2px;
            border-radius:28px;
            background:linear-gradient(135deg, rgba(163,25,12,.18), rgba(163,25,12,0) 60%);
            z-index:-1;
            filter:blur(18px);
            opacity:.55;
        }

        .brand{
            text-align:center;
            margin-bottom:8px;
        }

        .brand img{
            max-width:150px;
            height:auto;
        }

        .brand p{
            margin-top:10px;
            font-size:14px;
            color:var(--muted);
        }

        .divider{
            height:1px;
            background:rgba(17,24,39,.06);
            margin:22px 0 26px;
        }

        .alert{
            padding:12px 14px;
            border-radius:14px;
            font-size:13px;
            margin-bottom:16px;
            border:1px solid transparent;
            display:flex;
            flex-direction:column;
            gap:4px;
        }

        .alert-title{
            font-size:14px;
            font-weight:700;
            line-height:1.4;
        }

        .alert-text{
            font-size:13px;
            line-height:1.55;
        }

        .alert-danger{
            background:var(--danger-bg);
            color:var(--danger-text);
            border-color:rgba(153,27,27,.12);
        }

        .alert-success{
            background:var(--success-bg);
            color:var(--success-text);
            border-color:rgba(22,101,52,.14);
        }

        .form-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }

        .form-group{
            margin-bottom:16px;
        }

        .form-group label{
            font-size:13px;
            font-weight:600;
            margin-bottom:7px;
            display:block;
            color:#1f2937;
        }

        .input-wrap{
            position:relative;
        }

        .input-wrap .icon{
            position:absolute;
            left:14px;
            top:50%;
            transform:translateY(-50%);
            width:18px;
            height:18px;
            opacity:.55;
            color:#6b7280;
        }

        .form-control{
            width:100%;
            height:50px;
            border-radius:16px;
            border:1px solid rgba(17,24,39,.14);
            padding:0 16px 0 44px;
            font-size:14px;
            transition:.18s ease;
            background:#fff;
            color:var(--text);
        }

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

        .form-control:focus{
            outline:none;
            border-color:rgba(163,25,12,.55);
            box-shadow:0 0 0 4px rgba(163,25,12,.12);
        }

        .input-error{
            border-color:#dc2626 !important;
            box-shadow:0 0 0 3px rgba(220,38,38,.15) !important;
        }

        .error-text{
            font-size:12px;
            color:#dc2626;
            margin-top:5px;
        }

        .toggle-pass{
            position:absolute;
            right:10px;
            top:50%;
            transform:translateY(-50%);
            border:none;
            background:transparent;
            cursor:pointer;
            padding:8px 10px;
            border-radius:10px;
            color:#6b7280;
            font-size:12px;
            transition:.2s ease;
        }

        .toggle-pass:hover{
            background:rgba(17,24,39,.06);
            color:var(--brand);
        }

        .login-btn{
            width:100%;
            height:50px;
            border-radius:16px;
            border:none;
            background:linear-gradient(180deg, var(--brand), var(--brand-dark));
            color:#fff;
            font-weight:700;
            font-size:14px;
            cursor:pointer;
            transition:.2s ease;
            box-shadow:0 14px 26px rgba(163,25,12,.24);
            margin-top:6px;
        }

        .login-btn:hover{
            transform:translateY(-1px);
            box-shadow:0 18px 34px rgba(163,25,12,.28);
        }

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

        .register-box{
            margin-top:18px;
            padding-top:18px;
            border-top:1px solid rgba(17,24,39,.06);
            text-align:center;
        }

        .register-box p{
            font-size:13px;
            color:var(--muted);
            margin-bottom:10px;
        }

        .register-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            width:100%;
            height:48px;
            border-radius:16px;
            border:1px solid rgba(163,25,12,.20);
            background:var(--brand-soft);
            color:var(--brand);
            text-decoration:none;
            font-weight:700;
            font-size:14px;
            transition:.2s ease;
        }

        .register-link:hover{
            background:rgba(163,25,12,.16);
            border-color:rgba(163,25,12,.28);
            color:var(--brand-dark);
        }

        .note{
            margin-top:16px;
            text-align:center;
            font-size:12px;
            color:#9ca3af;
            line-height:1.5;
        }

        @media (max-width: 640px){
            .login-card{
                padding:34px 22px;
                border-radius:22px;
            }

            .form-row{
                grid-template-columns:1fr;
                gap:0;
            }
        }