:root {
            --navy: #0F1B33;
            --navy-2: #16244A;
            --navy-3: #1D2E5C;
            --paper: #F6F1E4;
            --paper-2: #EFE7D2;
            --paper-line: #D9CCA8;
            --gold: #B8862F;
            --gold-bright: #D9A94E;
            --seal: #8A2332;
            --ink: #1B2036;
            --ink-muted: #6C6858;
            --cream: #F2ECDD;
            --cream-muted: #B9BFD4;
            --font-display: 'Fraunces', Georgia, serif;
            --font-body: 'IBM Plex Sans', sans-serif;
            --font-mono: 'IBM Plex Mono', monospace;
        }

        .auth-scope *,
        .auth-scope *::before,
        .auth-scope *::after {
            margin: 0; padding: 0; box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        body.auth-body {
            font-family: var(--font-body);
            background-color: var(--navy);
            background-image:
                radial-gradient(120% 90% at 15% 0%, var(--navy-3) 0%, var(--navy) 55%, var(--navy) 100%);
            color: var(--ink);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px 16px;
            position: relative;
            overflow-x: hidden;
        }
        body.auth-body::after {
            content: ''; position: fixed; inset: 0; pointer-events: none;
            background-image: radial-gradient(circle, rgba(242,236,221,0.045) 1px, transparent 1px);
            background-size: 24px 24px;
        }

        @media (prefers-reduced-motion: reduce) {
            .auth-scope *, .auth-scope *::before, .auth-scope *::after {
                animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
            }
        }

        .auth-wrap {
            position: relative; z-index: 1;
            display: flex;
            width: 100%; max-width: 1040px;
            background: var(--paper);
            border: 1px solid var(--paper-line);
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
        }

        /* ============ BRAND / CREDENTIAL SIDE ============ */
        .auth-brand {
            flex: 1;
            position: relative;
            padding: 46px 40px;
            background:
                radial-gradient(120% 90% at 15% 0%, var(--navy-3) 0%, var(--navy) 55%, var(--navy) 100%);
            color: var(--cream);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
        .auth-brand::after {
            content: ''; position: absolute; inset: 0; pointer-events: none;
            background-image: radial-gradient(circle, rgba(242,236,221,0.05) 1px, transparent 1px);
            background-size: 22px 22px;
        }
        .brand-serial {
            font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em;
            text-transform: uppercase; color: var(--gold-bright); margin-bottom: 26px;
            position: relative; z-index: 1;
        }
        .brand-head { position: relative; z-index: 1; }
        .brand-head h1 {
            font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
            font-size: 2.05rem; line-height: 1.16; color: var(--cream); margin-bottom: 16px;
        }
        .brand-head h1 em { font-style: italic; color: var(--gold-bright); font-weight: 500; }
        .brand-head > p {
            color: var(--cream-muted); font-size: 0.94rem; line-height: 1.62; max-width: 34ch;
            margin-bottom: 34px;
        }

        .brand-protocol { position: relative; z-index: 1; display: flex; flex-direction: column; }
        .brand-protocol .p-row {
            display: flex; gap: 15px; align-items: flex-start;
            padding: 16px 0; border-top: 1px solid rgba(242,236,221,0.12);
        }
        .brand-protocol .p-row:last-child { border-bottom: 1px solid rgba(242,236,221,0.12); }
        .p-marker {
            flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
            background: var(--gold-bright); color: var(--navy);
            display: flex; align-items: center; justify-content: center;
            font-size: 0.85rem;
        }
        .p-text h4 { font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; margin-bottom: 3px; color: var(--cream); }
        .p-text p { color: var(--cream-muted); font-size: 0.82rem; line-height: 1.5; }

        /* watermark seal on brand side */
        .brand-watermark {
            position: absolute; right: -46px; bottom: -46px; width: 240px; height: 240px;
            opacity: 0.06; z-index: 0; transform: rotate(-12deg);
        }

        /* ============ FORM / DOCUMENT SIDE ============ */
        .auth-panel {
            flex: 1.15;
            position: relative;
            padding: 46px 42px 40px;
            background: var(--paper);
            display: flex; flex-direction: column;
        }
        .auth-panel::before, .auth-panel::after,
        .auth-panel .cf-bl, .auth-panel .cf-br {
            content: ''; position: absolute; width: 15px; height: 15px;
            border: 1.5px solid var(--gold); opacity: 0.7; pointer-events: none;
        }
        .auth-panel::before { top: 20px; left: 20px; border-right: none; border-bottom: none; }
        .auth-panel::after { top: 20px; right: 20px; border-left: none; border-bottom: none; }
        .auth-panel .cf-bl { bottom: 20px; left: 20px; border-right: none; border-top: none; }
        .auth-panel .cf-br { bottom: 20px; right: 20px; border-left: none; border-top: none; }

        .panel-code {
            font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
            color: var(--ink-muted); margin-bottom: 6px;
        }
        .panel-title {
            font-family: var(--font-display); font-size: 1.6rem; font-weight: 600;
            color: var(--navy); letter-spacing: -0.01em; margin-bottom: 4px;
        }
        .panel-sub { font-size: 0.85rem; color: var(--ink-muted); margin-bottom: 24px; }

        /* inputs */
        .auth-form { display: flex; flex-direction: column; }
        .field {
            position: relative; margin-bottom: 16px;
        }
        .field > i.f-icon {
            position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
            color: var(--ink-muted); font-size: 0.92rem; z-index: 2;
        }
        .field input,
        .field select {
            width: 100%; padding: 15px 16px 15px 42px;
            background: #fff; border: 1.5px solid var(--paper-line); border-radius: 2px;
            font-family: var(--font-body); font-size: 0.95rem; color: var(--ink);
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .field select { appearance: none; cursor: pointer; }
        .field select:invalid { color: var(--ink-muted); }
        .field .select-caret {
            position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
            color: var(--ink-muted); font-size: 0.75rem; pointer-events: none;
        }
        .field input::placeholder { color: transparent; }
        .field input:focus,
        .field select:focus {
            outline: none; border-color: var(--gold);
            box-shadow: 0 0 0 3px rgba(184,134,47,0.14);
        }
        .field label.float {
            position: absolute; left: 42px; top: 50%; transform: translateY(-50%);
            color: var(--ink-muted); font-size: 0.95rem; pointer-events: none;
            background: var(--paper); padding: 0 6px; transition: all 0.18s ease;
        }
        .field input:focus + label.float,
        .field input:not(:placeholder-shown) + label.float {
            top: 0; transform: translateY(-50%);
            font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
            text-transform: uppercase; color: var(--gold); font-weight: 500;
        }
        /* select va sana uchun doimiy kichik yorliq */
        .field label.pinned {
            position: absolute; left: 42px; top: 0; transform: translateY(-50%);
            font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
            text-transform: uppercase; color: var(--gold); font-weight: 500;
            background: var(--paper); padding: 0 6px; pointer-events: none; z-index: 2;
        }
        .field .toggle-pass {
            position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
            color: var(--ink-muted); cursor: pointer; font-size: 0.9rem; z-index: 2;
            padding: 6px; background: none; border: none;
        }
        .field .toggle-pass:hover { color: var(--navy); }

        .field-row { display: flex; gap: 12px; }
        .field-row .field { flex: 1; }

        .hint {
            font-size: 0.74rem; color: var(--ink-muted); margin: -8px 0 14px 4px;
            display: flex; align-items: center; gap: 6px;
        }
        .hint.ok { color: #2E6B3A; }
        .hint.bad { color: var(--seal); }

        .recaptcha-row { display: flex; justify-content: center; margin: 6px 0 18px; transform-origin: center; }

        .submit-btn {
            width: 100%; padding: 15px; border: none; border-radius: 2px; cursor: pointer;
            background: var(--gold); color: var(--navy);
            font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
            display: flex; align-items: center; justify-content: center; gap: 10px;
            transition: background 0.22s, transform 0.22s, box-shadow 0.22s;
            box-shadow: 0 8px 20px -8px rgba(184,134,47,0.6);
        }
        .submit-btn:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(184,134,47,0.7); }
        .submit-btn:active { transform: translateY(0); }
        .submit-btn:disabled { opacity: 0.75; cursor: default; transform: none; }
        .submit-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

        .error-message {
            display: flex; align-items: center; gap: 10px;
            background: #FBEDE9; color: var(--seal);
            border-left: 3px solid var(--seal);
            padding: 12px 15px; border-radius: 2px; margin-top: 18px;
            font-size: 0.88rem;
        }
        .error-message i { font-size: 0.95rem; }

        .register-link {
            text-align: center; margin-top: 24px; padding-top: 20px;
            border-top: 1px dashed var(--paper-line);
        }
        .register-link p { color: var(--ink-muted); font-size: 0.86rem; margin-bottom: 4px; }
        .register-link a {
            display: inline-flex; align-items: center; gap: 8px;
            color: var(--navy); font-weight: 700; font-size: 0.94rem; text-decoration: none;
        }
        .register-link a i { transition: transform 0.22s; font-size: 0.78rem; }
        .register-link a:hover { color: var(--gold); }
        .register-link a:hover i { transform: translateX(4px); }

        .copyright {
            text-align: center; margin-top: 20px;
            font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.04em;
            color: var(--ink-muted);
        }

        /* ============ RESPONSIVE ============ */
        @media (max-width: 860px) {
            body.auth-body { padding: 16px 12px; align-items: flex-start; }
            .auth-wrap { flex-direction: column; max-width: 460px; }
            .auth-brand { padding: 36px 28px 30px; }
            .brand-head h1 { font-size: 1.7rem; }
            .brand-protocol { display: none; }
            .brand-head > p { margin-bottom: 4px; }
            .brand-watermark { width: 180px; right: -40px; bottom: -40px; }
            .auth-panel { padding: 38px 28px 34px; }
            .auth-panel::before, .auth-panel::after { top: 16px; }
            .auth-panel::before, .auth-panel .cf-bl { left: 16px; }
            .auth-panel::after, .auth-panel .cf-br { right: 16px; }
            .auth-panel .cf-bl, .auth-panel .cf-br { bottom: 16px; }
        }
        @media (max-width: 420px) {
            .auth-brand { padding: 30px 22px 26px; }
            .auth-panel { padding: 34px 22px 30px; }
            .brand-head h1 { font-size: 1.5rem; }
            .panel-title { font-size: 1.4rem; }
            .field-row { flex-direction: column; gap: 0; }
            .recaptcha-row { transform: scale(0.92); }
        }