@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

.cz-auth {
    --cz-blue-50: #EEF3FA;
    --cz-blue-500: #2B5C9C;
    --cz-blue-600: #244E85;
    --cz-blue-700: #1D3F6C;
    --cz-pink-500: #EF569F;
    --cz-neutral-0: #FFFFFF;
    --cz-neutral-25: #FAFBFD;
    --cz-neutral-100: #EBEEF3;
    --cz-neutral-200: #DCE1E9;
    --cz-neutral-300: #C3CAD6;
    --cz-neutral-400: #97A1B2;
    --cz-neutral-500: #6E798C;
    --cz-neutral-700: #3B4453;
    --cz-neutral-900: #151A22;
    --cz-green-50: #E7F7F2;
    --cz-green-700: #0B7357;
    --cz-amber-50: #FDF4E1;
    --cz-amber-700: #9E6D06;
    --cz-red-50: #FDECEE;
    --cz-red-500: #E03E52;
    --cz-red-700: #A32232;

    --cz-brand-primary: var(--cz-blue-500);
    --cz-text-heading: var(--cz-neutral-900);
    --cz-text-body: var(--cz-neutral-700);
    --cz-text-muted: var(--cz-neutral-500);
    --cz-text-subtle: var(--cz-neutral-400);
    --cz-surface-card: var(--cz-neutral-0);
    --cz-border-default: var(--cz-neutral-300);
    --cz-border-subtle: var(--cz-neutral-200);
    --cz-status-success-fg: var(--cz-green-700);
    --cz-status-success-bg: var(--cz-green-50);
    --cz-status-warning-fg: var(--cz-amber-700);
    --cz-status-warning-bg: var(--cz-amber-50);
    --cz-status-danger-fg: var(--cz-red-700);
    --cz-status-danger-bg: var(--cz-red-50);

    --cz-gradient-brand: linear-gradient(112deg, #2B5C9C 0%, #EF569F 100%);

    --cz-font-display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
    --cz-font-sans: "Plus Jakarta Sans", "Poppins", system-ui, sans-serif;
    --cz-text-xs: 12px;
    --cz-text-sm: 13px;
    --cz-text-base: 14px;
    --cz-text-md: 15px;
    --cz-text-lg: 17px;
    --cz-text-2xl: 24px;
    --cz-text-3xl: 30px;
    --cz-tracking-tight: -0.02em;
    --cz-tracking-snug: -0.01em;

    --cz-radius-sm: 6px;
    --cz-radius-md: 10px;
    --cz-control-height-md: 40px;
    --cz-control-height-lg: 48px;
    --cz-ring-focus: 0 0 0 3px rgba(43, 92, 156, .22);
    --cz-ring-danger: 0 0 0 3px rgba(224, 62, 82, .20);

    min-height: 100vh;
    font-family: var(--cz-font-sans);
    background: var(--cz-surface-card);
}

.cz-auth-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}

.cz-auth-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--cz-gradient-brand);
    padding: 56px;
}

.cz-auth-visual__mark {
    position: absolute;
    right: -120px;
    bottom: -60px;
    width: 520px;
    opacity: .12;
    pointer-events: none;
}

.cz-auth-visual__logo {
    position: relative;
    height: 30px;
    width: auto;
}

.cz-auth-visual__copy {
    position: relative;
    margin-top: auto;
}

.cz-auth-visual__copy h2 {
    margin: 0;
    font-family: var(--cz-font-display);
    font-size: var(--cz-text-3xl);
    font-weight: 600;
    letter-spacing: var(--cz-tracking-tight);
    line-height: 1.25;
    color: #fff;
}

.cz-auth-visual__copy p {
    margin: 16px 0 0;
    max-width: 420px;
    font-size: var(--cz-text-md);
    line-height: 1.65;
    color: rgba(255, 255, 255, .82);
}

.cz-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
}

.cz-auth-panel__inner {
    width: 100%;
    max-width: 380px;
    display: grid;
    gap: 20px;
}

.cz-title {
    margin: 0;
    font-family: var(--cz-font-display);
    font-size: var(--cz-text-2xl);
    font-weight: 600;
    letter-spacing: var(--cz-tracking-tight);
    color: var(--cz-text-heading);
}

.cz-subtitle {
    margin: 6px 0 0;
    font-size: var(--cz-text-base);
    color: var(--cz-text-muted);
}

.cz-auth .form-label {
    font-family: var(--cz-font-sans);
    font-size: var(--cz-text-sm);
    font-weight: 600;
    color: var(--cz-text-heading);
    margin-bottom: 6px;
}

.cz-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--cz-control-height-md);
    padding: 0 12px;
    background: var(--cz-surface-card);
    border: 1px solid var(--cz-border-default);
    border-radius: var(--cz-radius-md);
    transition: border-color .14s cubic-bezier(.2, .8, .3, 1), box-shadow .14s cubic-bezier(.2, .8, .3, 1);
}

.cz-input-group:focus-within {
    border-color: var(--cz-brand-primary);
    box-shadow: var(--cz-ring-focus);
}

.cz-input-group.is-invalid {
    border-color: var(--cz-red-500);
}

.cz-input-group.is-invalid:focus-within {
    box-shadow: var(--cz-ring-danger);
}

.cz-input-icon {
    display: flex;
    color: var(--cz-text-subtle);
    font-size: 16px;
    flex-shrink: 0;
}

.cz-auth .cz-input-group .form-control {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    height: auto;
    font-family: var(--cz-font-sans);
    font-size: var(--cz-text-base);
    color: var(--cz-text-heading);
    box-shadow: none !important;
}

.cz-input-suffix-btn {
    border: 0;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--cz-text-subtle);
    cursor: pointer;
    flex-shrink: 0;
}

.cz-auth .otp-input {
    border: 1px solid var(--cz-border-default);
    border-radius: var(--cz-radius-md);
    color: var(--cz-text-heading);
    background: var(--cz-surface-card);
}

.cz-auth .otp-input:focus {
    border-color: var(--cz-brand-primary);
    box-shadow: var(--cz-ring-focus);
    outline: 0;
}

.cz-auth .btn-success {
    height: var(--cz-control-height-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cz-gradient-brand);
    border: 1px solid transparent;
    border-radius: var(--cz-radius-md);
    font-family: var(--cz-font-sans);
    font-weight: 600;
    letter-spacing: var(--cz-tracking-snug);
}

.cz-auth .btn-success:hover,
.cz-auth .btn-success:focus {
    filter: brightness(1.05);
    background: var(--cz-gradient-brand);
    border-color: transparent;
}

.cz-auth .btn-success:focus {
    box-shadow: var(--cz-ring-focus);
}

.cz-auth .btn-link {
    font-family: var(--cz-font-sans);
    font-weight: 600;
    font-size: var(--cz-text-sm);
    text-decoration: none;
    color: var(--cz-text-muted);
}

.cz-auth a.text-muted,
.cz-auth a.text-muted:hover {
    font-weight: 600;
    font-size: var(--cz-text-sm);
    color: var(--cz-text-muted);
}

.cz-auth .form-check-input {
    accent-color: var(--cz-brand-primary);
    width: 18px;
    height: 18px;
    margin-top: 0;
}

.cz-auth .form-check-label {
    font-size: var(--cz-text-base);
    color: var(--cz-text-heading);
    padding-left: 4px;
}

.cz-auth .alert {
    border: 0;
    border-radius: var(--cz-radius-sm);
    font-size: var(--cz-text-sm);
}

.cz-auth .alert-success {
    background: var(--cz-status-success-bg);
    color: var(--cz-status-success-fg);
}

.cz-auth .alert-warning {
    background: var(--cz-status-warning-bg);
    color: var(--cz-status-warning-fg);
}

.cz-auth .alert-danger {
    background: var(--cz-status-danger-bg);
    color: var(--cz-status-danger-fg);
}

@media (max-width: 991.98px) {
    .cz-auth-shell {
        grid-template-columns: 1fr;
    }

    .cz-auth-visual {
        padding: 32px;
        min-height: 220px;
    }

    .cz-auth-visual__copy p {
        display: none;
    }
}