:root {
            --shell-bg: rgba(15, 23, 42, 0.78);
            --shell-border: rgba(125, 211, 252, 0.24);
            --shell-shadow: 0 28px 90px rgba(2, 6, 23, 0.5);
            --field-bg: rgba(15, 23, 42, 0.72);
            --field-border: rgba(125, 211, 252, 0.22);
            --muted-text: #cbd5e1;
        }
        body {
            min-height: 100vh;
            margin: 0;
            display: grid;
            place-items: center;
            background:
                radial-gradient(circle at 15% 20%, rgba(14, 165, 233, 0.28), transparent 24%),
                radial-gradient(circle at 85% 15%, rgba(59, 130, 246, 0.22), transparent 20%),
                radial-gradient(circle at 50% 100%, rgba(20, 184, 166, 0.16), transparent 30%),
                linear-gradient(160deg, #0f172a 10%, #111c3b 45%, #020617 100%);
            color: #e2e8f0;
            font-family: "Manrope", sans-serif;
            padding: 20px;
            position: relative;
            overflow: hidden;
        }
        body::before,
        body::after {
            content: "";
            position: fixed;
            inset: auto;
            width: 340px;
            height: 340px;
            border-radius: 999px;
            filter: blur(70px);
            opacity: 0.45;
            pointer-events: none;
        }
        body::before {
            top: -80px;
            left: -70px;
            background: rgba(14, 165, 233, 0.28);
        }
        body::after {
            right: -120px;
            bottom: -100px;
            background: rgba(59, 130, 246, 0.22);
        }
        .shell {
            width: min(92vw, 430px);
            background:
                linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
                var(--shell-bg);
            border: 1px solid var(--shell-border);
            border-radius: 30px;
            padding: 30px;
            box-shadow: var(--shell-shadow);
            backdrop-filter: blur(18px);
            position: relative;
            overflow: hidden;
        }
        .shell::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(125, 211, 252, 0.08), transparent 36%, rgba(20, 184, 166, 0.05));
            pointer-events: none;
        }
        .brand {
            text-align: center;
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }
        .brand img {
            width: 92px;
            height: 92px;
            border-radius: 24px;
            margin-bottom: 16px;
            box-shadow:
                0 16px 40px rgba(56, 189, 248, 0.28),
                inset 0 1px 0 rgba(255, 255, 255, 0.18);
            border: 1px solid rgba(255, 255, 255, 0.12);
        }
        .brand h1 {
            font-weight: 700;
            letter-spacing: -0.02em;
        }
        .brand p {
            color: var(--muted-text);
            max-width: 300px;
            margin: 0 auto;
            line-height: 1.5;
        }
        .form-label {
            color: #dbeafe;
            font-weight: 600;
            margin-bottom: 8px;
        }
        .form-control, .form-select {
            background: var(--field-bg);
            border-color: var(--field-border);
            color: #f8fafc;
            border-radius: 16px;
            min-height: 52px;
            padding: 12px 16px;
            backdrop-filter: blur(10px);
        }
        .form-control:focus, .form-select:focus {
            background: rgba(15, 23, 42, 0.84);
            color: #f8fafc;
            border-color: #38bdf8;
            box-shadow: 0 0 0 0.25rem rgba(56, 189, 248, 0.16);
        }
        .form-select {
            background-image:
                linear-gradient(45deg, transparent 50%, #7dd3fc 50%),
                linear-gradient(135deg, #7dd3fc 50%, transparent 50%);
            background-position:
                calc(100% - 22px) calc(50% - 2px),
                calc(100% - 16px) calc(50% - 2px);
            background-size: 6px 6px, 6px 6px;
            background-repeat: no-repeat;
        }
        .btn-primary {
            width: 100%;
            border: none;
            border-radius: 18px;
            padding: 14px 16px;
            font-weight: 700;
            letter-spacing: 0.01em;
            background: linear-gradient(135deg, #0ea5e9, #2563eb 55%, #14b8a6 120%);
            box-shadow: 0 16px 36px rgba(37, 99, 235, 0.28);
            transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
        }
        .btn-primary:hover {
            transform: translateY(-1px);
            box-shadow: 0 20px 42px rgba(37, 99, 235, 0.34);
            filter: brightness(1.03);
        }
        .alert {
            border-radius: 16px;
            border: 1px solid rgba(248, 113, 113, 0.18);
            background: rgba(127, 29, 29, 0.26);
            color: #fee2e2;
            margin-bottom: 18px;
        }
        [dir="rtl"] body {
            font-family: "Tajawal", sans-serif;
        }
        [dir="rtl"] .shell {
            text-align: right;
        }
        [dir="rtl"] .brand {
            text-align: center;
        }
        [dir="rtl"] .form-select {
            background-position:
                18px calc(50% - 2px),
                24px calc(50% - 2px);
            padding-right: 16px;
            padding-left: 42px;
        }
        @media (max-width: 520px) {
            body {
                padding: 14px;
            }
            .shell {
                width: 100%;
                padding: 22px 18px;
                border-radius: 24px;
            }
            .brand img {
                width: 78px;
                height: 78px;
            }
            .brand p {
                font-size: 0.95rem;
            }
            .form-control,
            .form-select,
            .btn-primary {
                min-height: 50px;
            }
        }