/* JN Auth Clean Fix */

:root {
    --auth-bg: #f8f4ef;
    --auth-card: rgba(255, 253, 249, .94);
    --auth-line: rgba(133, 95, 64, .14);
    --auth-text: #2e241e;
    --auth-muted: #7d6b5e;
    --auth-accent: #c66f42;
    --auth-accent-dark: #a8562e;
    --auth-shadow: 0 24px 68px rgba(75, 49, 31, .14);
    --auth-serif: Georgia, "Times New Roman", serif;
}

body[data-theme="night"] {
    --auth-bg: #121922;
    --auth-card: rgba(22, 29, 40, .95);
    --auth-line: rgba(220, 229, 240, .14);
    --auth-text: #eef3f8;
    --auth-muted: #b0bcc8;
    --auth-accent: #d67c4d;
    --auth-accent-dark: #e59063;
    --auth-shadow: 0 26px 72px rgba(0, 0, 0, .34);
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body.auth-clean-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% 0%, rgba(198, 111, 66, .12), transparent 32rem),
        radial-gradient(circle at 100% 18%, rgba(91, 145, 126, .10), transparent 34rem),
        linear-gradient(180deg, #fbf8f4 0%, var(--auth-bg) 100%);
    color: var(--auth-text);
    overflow-x: hidden;
}

body[data-theme="night"].auth-clean-page {
    background:
        radial-gradient(circle at 12% 0%, rgba(214, 124, 77, .12), transparent 32rem),
        radial-gradient(circle at 100% 18%, rgba(92, 126, 177, .13), transparent 34rem),
        linear-gradient(180deg, #101722 0%, var(--auth-bg) 100%);
}

.auth-clean-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.auth-clean-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .24;
    filter: blur(5px) saturate(.96) contrast(1.03);
    transform: scale(1.02);
}

body[data-theme="night"] .auth-clean-bg img {
    opacity: .18;
}

.auth-clean-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .45), transparent 34rem),
        linear-gradient(180deg, rgba(248, 244, 239, .68), rgba(248, 244, 239, .92));
}

body[data-theme="night"] .auth-clean-bg::after {
    background:
        radial-gradient(circle at 50% 20%, rgba(110, 142, 190, .14), transparent 34rem),
        linear-gradient(180deg, rgba(17, 24, 34, .72), rgba(17, 24, 34, .94));
}

.auth-clean-shell {
    position: relative;
    z-index: 2;
    width: min(100%, 520px);
}

.auth-clean-card {
    width: 100%;
    padding: 32px;
    border-radius: 30px;
    background: var(--auth-card);
    border: 1px solid rgba(255, 255, 255, .62);
    box-shadow: var(--auth-shadow);
    backdrop-filter: blur(18px);
}

body[data-theme="night"] .auth-clean-card {
    border-color: var(--auth-line);
}

.auth-clean-brand {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-bottom: 24px;
    text-align: center;
}

.auth-clean-brand a {
    color: inherit;
    text-decoration: none;
}

.auth-clean-brand-mark {
    font-family: var(--auth-serif);
    font-size: 40px;
    line-height: 1;
    color: var(--auth-accent-dark);
    font-weight: 700;
}

.auth-clean-brand small {
    font-size: 10px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--auth-muted);
    font-weight: 800;
}

.auth-clean-kicker {
    margin: 0 0 8px;
    color: var(--auth-accent-dark);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
}

.auth-clean-card h1 {
    margin: 0;
    font-family: var(--auth-serif);
    font-size: clamp(42px, 7vw, 58px);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 600;
    color: var(--auth-text);
    text-align: center;
}

.auth-clean-lead {
    margin: 14px auto 24px;
    max-width: 390px;
    color: var(--auth-muted);
    line-height: 1.65;
    text-align: center;
}

.auth-clean-form {
    display: grid;
    gap: 14px;
}

.auth-clean-form label {
    display: grid;
    gap: 8px;
    color: var(--auth-muted);
    font-size: 13px;
    font-weight: 800;
}

.auth-clean-form input {
    width: 100%;
    min-height: 50px;
    border-radius: 15px;
    border: 1px solid var(--auth-line);
    background: rgba(255, 255, 255, .78);
    color: var(--auth-text);
    padding: 0 14px;
    font: inherit;
    outline: none;
}

body[data-theme="night"] .auth-clean-form input {
    background: rgba(255, 255, 255, .06);
}

.auth-clean-form input:focus {
    border-color: rgba(198, 111, 66, .42);
    box-shadow: 0 0 0 4px rgba(198, 111, 66, .10);
}

.auth-clean-actions {
    display: grid;
    gap: 10px;
    width: min(260px, 100%);
    margin: 8px auto 0;
}

.auth-clean-button,
.auth-clean-link-button {
    min-height: 48px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-weight: 850;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.auth-clean-button {
    background: linear-gradient(180deg, var(--auth-accent), var(--auth-accent-dark));
    color: white;
    box-shadow: 0 12px 24px rgba(174, 89, 45, .18);
}

.auth-clean-link-button {
    background: rgba(255, 255, 255, .66);
    color: var(--auth-text);
    border-color: var(--auth-line);
}

body[data-theme="night"] .auth-clean-link-button {
    background: rgba(255, 255, 255, .05);
}

.auth-clean-links {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    color: var(--auth-muted);
    font-size: 13px;
}

.auth-clean-links a {
    color: var(--auth-accent-dark);
    text-decoration: none;
    font-weight: 800;
}

.auth-clean-alert {
    display: grid;
    gap: 4px;
    margin-bottom: 14px;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid var(--auth-line);
    line-height: 1.5;
    font-size: 14px;
}

.auth-clean-alert strong {
    color: var(--auth-text);
}

.auth-clean-alert span {
    color: var(--auth-muted);
}

.auth-clean-alert.error {
    background: rgba(196, 74, 46, .10);
}

.auth-clean-alert.success {
    background: rgba(79, 145, 117, .12);
}

.auth-clean-alert.warning {
    background: rgba(198, 111, 66, .10);
}

.auth-clean-code-info {
    text-align: center;
    color: var(--auth-muted);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 18px;
}

.auth-clean-code-info strong {
    color: var(--auth-text);
}

.code-inputs {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 9px;
    margin-bottom: 2px;
}

.code-box {
    min-height: 58px !important;
    padding: 0 !important;
    text-align: center;
    font-size: 24px !important;
    font-weight: 850;
    letter-spacing: 0;
}

.resend-form {
    margin-top: 12px;
    display: grid;
    place-items: center;
}

.resend-form .auth-clean-link-button {
    width: min(260px, 100%);
}

.password-rule,
.auth-clean-small {
    color: var(--auth-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 620px) {
    body.auth-clean-page {
        padding: 18px;
    }

    .auth-clean-card {
        padding: 26px 20px;
        border-radius: 24px;
    }

    .code-inputs {
        gap: 6px;
    }

    .code-box {
        min-height: 52px !important;
        font-size: 21px !important;
    }
}

/* JN auth micro hover 2026 06 02 */
:where(.auth-clean-button, .auth-clean-link-button, button, input[type="submit"]) {
    transform: translateY(0) scale(1);
    transition:
        transform .18s cubic-bezier(.22, 1, .36, 1),
        box-shadow .18s cubic-bezier(.22, 1, .36, 1),
        border-color .18s ease,
        background-color .18s ease,
        filter .18s ease;
    will-change: transform;
}

:where(.auth-clean-button, .auth-clean-link-button, button, input[type="submit"]):where(:hover, :focus-visible):not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    transform: translateY(-1px) scale(1.012);
    box-shadow: 0 16px 36px rgba(32, 38, 51, .11), 0 6px 16px rgba(32, 38, 51, .07);
    border-color: rgba(36, 48, 68, .20) !important;
    filter: brightness(1.018) saturate(1.03);
}

:where(.auth-clean-button, .auth-clean-link-button, button, input[type="submit"]):active:not(:disabled):not(.disabled):not([aria-disabled="true"]) {
    transform: translateY(0) scale(.992);
    transition-duration: .08s;
}

:where(.auth-clean-button, .auth-clean-link-button, button, input[type="submit"]):focus-visible {
    outline: 3px solid rgba(88, 124, 255, .22);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    :where(.auth-clean-button, .auth-clean-link-button, button, input[type="submit"]) {
        transition: none !important;
        transform: none !important;
        will-change: auto !important;
    }
}



.auth-remember-check {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin: 2px 0 0 !important;
    color: var(--auth-muted) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.auth-remember-check input {
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    border: 1px solid var(--auth-line) !important;
    background: rgba(255, 255, 255, .72) !important;
    display: grid !important;
    place-items: center !important;
    cursor: pointer !important;
}

.auth-remember-check input:checked {
    background: linear-gradient(180deg, var(--auth-accent), var(--auth-accent-dark)) !important;
    border-color: transparent !important;
}

.auth-remember-check input:checked::after {
    content: "✓";
    color: white;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
}

.auth-remember-check span {
    color: inherit !important;
}