/* Login page styles (shared with b2b login); auth-workspace.css applies the lawyer palette on top. */
    :root {
        --auth-bg-1: #0b1024;
        --auth-bg-2: #1b1e4a;
        --auth-accent: #4f7cff;
        --auth-accent-2: #9b6bff;
        --auth-accent-3: #21d4fd;
        --auth-text: #0f172a;
        --auth-text-muted: #64748b;
        --auth-card-bg: rgba(255, 255, 255, 0.85);
        --auth-input-bg: rgba(241, 245, 249, 0.7);
        --auth-input-border: rgba(15, 23, 42, 0.08);
        --auth-error: #ef4444;
    }

    html, body { margin: 0; padding: 0; }

    body.login-page {
        margin: 0;
        min-height: 100vh;
        min-height: 100dvh;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        background: var(--auth-bg-1);
        color: var(--auth-text);
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }

    .auth-shell {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        display: grid;
        grid-template-columns: 1.05fr 1fr;
        isolation: isolate;
        overflow: hidden; /* blur bloblar tashqariga chiqib scroll hosil qilmasligi uchun */
    }

    .auth-shell::before,
    .auth-shell::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        filter: blur(90px);
        opacity: 0.55;
        z-index: -1;
        animation: auth-float 18s ease-in-out infinite;
    }

    .auth-shell::before {
        width: 520px;
        height: 520px;
        background: radial-gradient(circle at 30% 30%, var(--auth-accent-2), transparent 60%);
        top: -120px;
        left: -120px;
    }

    .auth-shell::after {
        width: 600px;
        height: 600px;
        background: radial-gradient(circle at 70% 70%, var(--auth-accent-3), transparent 65%);
        bottom: -160px;
        right: -160px;
        animation-delay: -8s;
    }

    @keyframes auth-float {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50%      { transform: translate(40px, -30px) scale(1.08); }
    }

    .auth-hero {
        position: relative;
        padding: 56px 64px;
        color: #fff;
        background:
            radial-gradient(120% 80% at 0% 0%, rgba(155, 107, 255, 0.35), transparent 55%),
            radial-gradient(120% 80% at 100% 100%, rgba(33, 212, 253, 0.28), transparent 55%),
            linear-gradient(135deg, var(--auth-bg-1) 0%, var(--auth-bg-2) 100%);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        overflow: hidden;
    }

    .auth-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
        background-size: 48px 48px;
        mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
        -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
        pointer-events: none;
    }

    .auth-hero__brand {
        display: flex;
        align-items: center;
        gap: 14px;
        position: relative;
        z-index: 1;
    }

    .auth-hero__brand img {
        height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
        padding: 8px 12px;
        backdrop-filter: blur(10px);
    }

    .auth-hero__brand-text {
        font-weight: 600;
        font-size: 18px;
        letter-spacing: 0.5px;
    }

    .auth-hero__content {
        position: relative;
        z-index: 1;
        max-width: 480px;
    }

    .auth-hero__title {
        font-size: clamp(32px, 3.6vw, 48px);
        line-height: 1.1;
        font-weight: 700;
        margin: 0 0 20px;
        letter-spacing: -0.02em;
    }

    .auth-hero__title span {
        background: linear-gradient(120deg, var(--auth-accent-3), var(--auth-accent-2));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .auth-hero__sub {
        font-size: 16px;
        line-height: 1.65;
        color: rgba(255, 255, 255, 0.72);
        margin: 0 0 32px;
    }

    .auth-hero__features {
        display: grid;
        gap: 14px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .auth-hero__features li {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14.5px;
        color: rgba(255, 255, 255, 0.85);
    }

    .auth-hero__features li::before {
        content: '';
        width: 22px;
        height: 22px;
        border-radius: 6px;
        background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
        flex-shrink: 0;
        position: relative;
        box-shadow: 0 6px 16px rgba(79, 124, 255, 0.4);
    }

    .auth-hero__features li::after {
        content: '';
        position: absolute;
        width: 6px;
        height: 11px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: translate(8px, 4px) rotate(45deg);
    }

    .auth-hero__footer {
        position: relative;
        z-index: 1;
        font-size: 13px;
        color: rgba(255, 255, 255, 0.55);
    }

    .auth-panel {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 48px 32px;
        background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    }

    .auth-card {
        position: relative;
        width: 100%;
        max-width: 440px;
        background: var(--auth-card-bg);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border: 1px solid rgba(255, 255, 255, 0.6);
        border-radius: 24px;
        padding: 44px 40px 36px;
        box-shadow:
            0 30px 60px -20px rgba(15, 23, 42, 0.18),
            0 12px 30px -12px rgba(79, 124, 255, 0.18);
    }

    .auth-card__head {
        margin-bottom: 28px;
    }

    .auth-card__title {
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 6px;
        letter-spacing: -0.01em;
    }

    .auth-card__sub {
        font-size: 14.5px;
        color: var(--auth-text-muted);
        margin: 0;
    }

    .auth-alert {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 14px;
        margin-bottom: 18px;
        border-radius: 12px;
        background: rgba(239, 68, 68, 0.08);
        color: var(--auth-error);
        border: 1px solid rgba(239, 68, 68, 0.22);
        font-size: 13.5px;
        line-height: 1.45;
    }

    .auth-alert::before {
        content: '!';
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        border-radius: 50%;
        background: var(--auth-error);
        color: #fff;
        font-weight: 700;
        font-size: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1px;
    }

    .auth-field {
        position: relative;
        margin-bottom: 16px;
    }

    .auth-field .form-group { margin: 0; }
    .auth-field .help-block { display: none; }

    .auth-field__inner {
        position: relative;
    }

    .auth-field input.form-control {
        width: 100%;
        height: 56px;
        padding: 22px 50px 8px 18px;
        font-size: 15px;
        color: var(--auth-text);
        background: var(--auth-input-bg);
        border: 1.5px solid var(--auth-input-border);
        border-radius: 14px;
        outline: none;
        transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        box-shadow: none;
    }

    .auth-field input.form-control:focus {
        background: #fff;
        border-color: var(--auth-accent);
        box-shadow: 0 0 0 4px rgba(79, 124, 255, 0.12);
    }

    .auth-field .has-error input.form-control {
        border-color: rgba(239, 68, 68, 0.55);
    }

    .auth-field__label {
        position: absolute;
        top: 50%;
        left: 18px;
        transform: translateY(-50%);
        font-size: 14.5px;
        color: var(--auth-text-muted);
        pointer-events: none;
        transition: all 0.18s ease;
        background: transparent;
        padding: 0 2px;
    }

    .auth-field input.form-control:focus + .auth-field__label,
    .auth-field input.form-control:not(:placeholder-shown) + .auth-field__label,
    .auth-field.is-filled .auth-field__label {
        top: 14px;
        transform: translateY(0);
        font-size: 11.5px;
        color: var(--auth-accent);
        font-weight: 500;
        letter-spacing: 0.02em;
    }

    .auth-field__icon {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        width: 22px;
        height: 22px;
        color: var(--auth-text-muted);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .auth-field__toggle {
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 28px;
        height: 28px;
        border-radius: 8px;
        background: transparent;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--auth-text-muted);
        padding: 0;
    }

    .auth-field__toggle:hover { color: var(--auth-accent); }

    .auth-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 6px 0 22px;
    }

    .auth-check {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        font-size: 14px;
        color: var(--auth-text);
        user-select: none;
        margin: 0;
        font-weight: 400;
    }

    .auth-check input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .auth-check__box {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        border: 1.5px solid #cbd5e1;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.18s ease;
        flex-shrink: 0;
    }

    .auth-check input[type="checkbox"]:checked + .auth-check__box {
        background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
        border-color: transparent;
    }

    .auth-check input[type="checkbox"]:checked + .auth-check__box::after {
        content: '';
        width: 5px;
        height: 9px;
        border: solid #fff;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg) translate(-1px, -1px);
    }

    .auth-submit {
        position: relative;
        width: 100%;
        height: 56px;
        border: none;
        border-radius: 14px;
        font-size: 15.5px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: #fff;
        cursor: pointer;
        background: linear-gradient(120deg, var(--auth-accent), var(--auth-accent-2));
        box-shadow:
            0 10px 24px -8px rgba(79, 124, 255, 0.55),
            0 4px 10px -4px rgba(155, 107, 255, 0.4);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    box-shadow 0.2s ease,
                    background 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .auth-submit:hover {
        box-shadow:
            0 14px 30px -8px rgba(79, 124, 255, 0.65),
            0 6px 14px -4px rgba(155, 107, 255, 0.5);
    }

    .auth-submit:active {
        transform: translateY(1px) scale(0.99);
    }

    .auth-submit__arrow {
        display: inline-block;
        transition: transform 0.2s ease;
    }

    .auth-submit:hover .auth-submit__arrow {
        transform: translateX(3px);
    }

    .auth-foot {
        text-align: center;
        margin-top: 22px;
        font-size: 13px;
        color: var(--auth-text-muted);
    }

    /* ===== Tablet (<= 1024px) ===== */
    @media (max-width: 1024px) {
        .auth-shell { grid-template-columns: 1fr; }
        .auth-hero {
            padding: 36px 32px 44px;
            min-height: auto;
        }
        .auth-hero__features { display: none; }
        .auth-hero__footer { margin-top: 22px; }
        .auth-panel { padding: 40px 24px; }
    }

    /* ===== Mobile (<= 640px) ===== */
    @media (max-width: 640px) {
        .auth-shell::before,
        .auth-shell::after { filter: blur(60px); opacity: 0.45; }
        .auth-shell::before { width: 360px; height: 360px; top: -80px; left: -80px; }
        .auth-shell::after  { width: 420px; height: 420px; bottom: -120px; right: -120px; }

        .auth-hero {
            padding: 28px 20px 32px;
            padding-top: max(28px, env(safe-area-inset-top));
        }

        .auth-hero__brand img { height: 38px; }
        .auth-hero__brand-text { font-size: 16px; }

        .auth-hero__content { margin-top: 22px; }
        .auth-hero__title { font-size: 26px; margin-bottom: 10px; }
        .auth-hero__sub { font-size: 14px; line-height: 1.55; margin-bottom: 0; }
        .auth-hero__footer { font-size: 11.5px; margin-top: 18px; }

        .auth-panel {
            padding: 24px 16px 40px;
            padding-bottom: max(40px, env(safe-area-inset-bottom));
        }

        .auth-card {
            padding: 28px 20px 24px;
            border-radius: 20px;
            box-shadow: 0 16px 36px -16px rgba(15, 23, 42, 0.22);
        }

        .auth-card__head { margin-bottom: 22px; }
        .auth-card__title { font-size: 22px; }
        .auth-card__sub { font-size: 13.5px; }

        .auth-field { margin-bottom: 14px; }
        .auth-field input.form-control {
            height: 54px;
            font-size: 16px; /* iOS zoom oldini olish uchun >=16px shart */
            padding: 20px 48px 6px 16px;
            border-radius: 12px;
        }
        .auth-field__label { left: 16px; font-size: 14px; }
        .auth-field input.form-control:focus + .auth-field__label,
        .auth-field input.form-control:not(:placeholder-shown) + .auth-field__label,
        .auth-field.is-filled .auth-field__label { top: 12px; font-size: 11px; }

        .auth-field__icon,
        .auth-field__toggle { right: 12px; }
        .auth-field__toggle { width: 32px; height: 32px; }

        .auth-row { margin: 4px 0 18px; }

        .auth-submit {
            height: 54px;
            font-size: 15px;
            border-radius: 12px;
        }

        .auth-foot {
            margin-top: 18px;
            font-size: 12px;
        }
    }

    /* ===== Very small (<= 380px) ===== */
    @media (max-width: 380px) {
        .auth-hero { padding: 22px 16px 26px; }
        .auth-hero__title { font-size: 23px; }
        .auth-panel { padding: 20px 12px 36px; }
        .auth-card { padding: 24px 16px 22px; border-radius: 18px; }
        .auth-card__title { font-size: 20px; }
    }

    /* ===== Short / landscape mobile ===== */
    @media (max-height: 560px) and (orientation: landscape) {
        .auth-shell { grid-template-columns: 1fr 1.1fr; }
        .auth-hero { padding: 24px 28px; }
        .auth-hero__content { margin-top: 12px; }
        .auth-hero__title { font-size: 22px; }
        .auth-hero__sub { font-size: 13px; }
        .auth-panel { padding: 20px 18px; }
        .auth-card { padding: 22px 22px 20px; }
    }

    @media (hover: none) {
        .auth-submit { box-shadow: 0 8px 18px -8px rgba(79, 124, 255, 0.5); }
    }