/* Shared public authentication surface. Keep this lighter than the signed-in app. */
:root {
    --auth-blue: #4169e1;
    --auth-violet: #7357d9;
    --auth-ink: #17233d;
    --auth-muted: #71809a;
    --auth-line: #dce5f0;
}

body:has(.auth-container) {
    min-height: 100vh !important;
    padding: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 8% 10%, rgba(85, 216, 255, .16), transparent 20rem),
        radial-gradient(circle at 94% 90%, rgba(139, 124, 255, .14), transparent 24rem),
        #f4f7fb !important;
    color: var(--auth-ink) !important;
}

body:has(.auth-container)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(44, 79, 126, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 79, 126, .035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    z-index: -1;
}

body:has(.verify-container) {
    min-height: 100vh !important;
    padding: 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        radial-gradient(circle at 8% 10%, rgba(85, 216, 255, .16), transparent 20rem),
        radial-gradient(circle at 94% 90%, rgba(139, 124, 255, .14), transparent 24rem),
        #f4f7fb !important;
}

body:has(.verify-container)::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(44, 79, 126, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(44, 79, 126, .035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
    z-index: -1;
}

.auth-container {
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    padding: clamp(1.5rem, 4vw, 2.6rem) !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 65px rgba(38, 67, 108, .13) !important;
}

.verify-container {
    width: min(100%, 460px) !important;
    padding: clamp(1.5rem, 4vw, 2.6rem) !important;
    background: rgba(255, 255, 255, .96) !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 22px 65px rgba(38, 67, 108, .13) !important;
    text-align: center;
}

.verify-container > a {
    display: inline-block !important;
    margin-bottom: 1.7rem !important;
    color: var(--auth-blue) !important;
    font-size: 1rem !important;
    letter-spacing: .01em;
}

.verify-header {
    margin-bottom: 1.5rem !important;
}

.verify-header i {
    display: grid !important;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    margin: 0 auto 1rem !important;
    border-radius: 16px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--auth-blue), #55d8ff);
    box-shadow: 0 12px 24px rgba(65, 105, 225, .2);
}

.verify-header h1 {
    color: var(--auth-ink) !important;
    letter-spacing: -.03em;
}

.verify-header p {
    color: var(--auth-muted) !important;
}

.verify-container .form-group {
    margin: 1.35rem 0 !important;
}

.verify-container .form-group label {
    color: #3c4f6b !important;
}

.verify-container .form-group input {
    min-height: 2.8rem;
    padding: .8rem !important;
    background: #fff !important;
    color: var(--auth-ink) !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 10px !important;
}

.verify-container .form-group input:focus {
    border-color: var(--auth-blue) !important;
    box-shadow: 0 0 0 3px rgba(65, 105, 225, .12) !important;
}

.verify-container .submit-btn {
    min-height: 2.8rem;
    background: linear-gradient(135deg, var(--auth-blue), var(--auth-violet)) !important;
    border-radius: 10px !important;
}

.verify-container .resend-btn {
    min-height: 2.6rem;
    color: var(--auth-blue) !important;
    background: #fff !important;
    border: 1px solid #b9c9e2 !important;
    border-radius: 10px !important;
}

.verify-container .message {
    border-radius: 10px !important;
    border: 1px solid transparent;
    line-height: 1.45;
}

.verify-container .message.error {
    background: #fff1f2 !important;
    color: #a43d4d !important;
    border-color: #f1c2c8 !important;
}

.verify-container .message.success {
    background: #effbf6 !important;
    color: #28634e !important;
    border-color: #bce8d5 !important;
}

.skip-link a {
    color: var(--auth-blue) !important;
    font-weight: 750;
}

.auth-header {
    text-align: left !important;
    margin-bottom: 1.6rem !important;
}

.auth-header h1,
.auth-header h1 a {
    color: var(--auth-blue) !important;
    font-size: 1rem !important;
    letter-spacing: .01em;
    text-decoration: none !important;
}

.auth-header h1 i {
    margin-right: .35rem;
}

.auth-header p {
    margin: 1rem 0 0 !important;
    color: var(--auth-muted) !important;
    font-size: 1rem !important;
    line-height: 1.55;
}

.auth-header p::before {
    content: "";
    display: block;
    width: 2.7rem;
    height: .2rem;
    margin-bottom: .8rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--auth-blue), #55d8ff);
}

.form-group {
    margin-bottom: 1rem !important;
}

.form-group label {
    display: block;
    margin-bottom: .4rem !important;
    color: #3c4f6b !important;
    font-size: .8rem !important;
    font-weight: 750 !important;
}

.form-group input,
.form-group select,
.password-wrap input,
.voucher-input {
    background: #fff !important;
    color: var(--auth-ink) !important;
    border-color: var(--auth-line) !important;
    border-radius: 10px !important;
}

.form-group input,
.form-group select {
    min-height: 2.75rem;
    padding: .75rem .85rem !important;
}

.form-group input:focus,
.form-group select:focus {
    outline: none !important;
    border-color: var(--auth-blue) !important;
    box-shadow: 0 0 0 3px rgba(65, 105, 225, .12) !important;
}

.password-wrap input {
    padding-right: 3rem !important;
}

.password-toggle {
    color: var(--auth-muted) !important;
}

.password-strength {
    background: #e8eef6 !important;
}

.password-help,
.voucher-group small {
    color: var(--auth-muted) !important;
}

.submit-btn {
    min-height: 2.8rem;
    margin-top: .3rem;
    background: linear-gradient(135deg, var(--auth-blue), var(--auth-violet)) !important;
    border-radius: 10px !important;
    box-shadow: 0 9px 22px rgba(65, 105, 225, .2);
}

.submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(65, 105, 225, .27) !important;
}

.forgot-password,
.signup-link,
.login-link,
.back-link {
    color: var(--auth-muted) !important;
}

.forgot-password a,
.signup-link a,
.login-link a,
.back-link a {
    color: var(--auth-blue) !important;
    font-weight: 750;
}

.divider {
    color: #a4b0c0 !important;
    margin: 1.15rem 0 !important;
}

.alert,
.message {
    border-radius: 10px !important;
    border: 1px solid transparent;
    line-height: 1.45;
}

.alert,
.message.error {
    background: #fff1f2 !important;
    color: #a43d4d !important;
    border-color: #f1c2c8 !important;
}

.message.success {
    background: #effbf6 !important;
    color: #28634e !important;
    border-color: #bce8d5 !important;
}

.free-offer-card {
    background: #effbf6 !important;
    border: 1px solid #bce8d5 !important;
    color: #28634e !important;
    border-radius: 12px !important;
    padding: .8rem 1rem !important;
}

.free-offer-card span {
    color: #557e70 !important;
}

.voucher-input {
    border: 1px solid var(--auth-line) !important;
}

@media (min-width: 700px) {
    body:has(.auth-container) .auth-container:has(.form-row) {
        max-width: 620px !important;
    }
}

@media (max-width: 560px) {
    body:has(.auth-container),
    body:has(.verify-container) {
        padding: .75rem !important;
        align-items: flex-start !important;
    }

    .auth-container,
    .verify-container {
        margin: 1rem 0;
        padding: 1.35rem !important;
        border-radius: 16px !important;
    }
}