/* Both authentication routes use this layout; feedback stays in the shared suite. */
body.auth-page {
    --auth-green: #126548;
    --auth-ink: #173d32;
    --auth-muted: #61716a;
    --auth-border: #d4ddd5;
    --auth-gold: #dcc399;
    --auth-paper: #fffdf8;
    --auth-accent: #f4ad64;
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: radial-gradient(ellipse at 10% 0%, #24644d70, transparent 55%),
        radial-gradient(ellipse at 95% 90%, #75613a20, transparent 45%), #082e25;
    color: var(--auth-ink);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
    color-scheme: light;
}
.auth-page *, .auth-page *::before, .auth-page *::after { box-sizing: border-box; }
.auth-page svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; flex-shrink: 0; }
.auth-shell {
    max-width: 1280px; min-height: 100vh; min-height: 100dvh; margin: auto;
    display: flex; flex-direction: column;
    padding: max(28px, env(safe-area-inset-top, 0px)) 40px max(20px, env(safe-area-inset-bottom, 0px));
}
.auth-nav { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.auth-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.auth-brand-symbol {
    display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0;
    border: 1px solid #dcc39960; border-radius: 14px; color: var(--auth-gold); background: #ffffff05;
}
.brand { color: #f7f2e8; font-size: 23px; font-weight: 650; letter-spacing: -.025em; overflow-wrap: anywhere; }
.auth-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.auth-tools a {
    display: inline-flex; justify-content: center; align-items: center; gap: 8px;
    min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff30;
    border-radius: 12px; background: #ffffff06; color: #efe9dc; font-size: 14px; text-decoration: none;
}
.auth-main {
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    align-items: stretch; flex: 1; gap: 0; width: 100%; margin: 40px 0 26px;
    border: 1px solid #e0c69b38; border-radius: 30px; background: #0d3a2f;
    box-shadow: 0 32px 100px #001a1650; overflow: hidden;
}
.auth-intro {
    position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0;
    padding: 48px; overflow: hidden; color: #fff9ed;
    background: radial-gradient(ellipse at 15% 40%, #357e5c40, transparent 65%), linear-gradient(145deg, #123f33, #072b24);
}
.auth-intro::before, .auth-intro::after {
    content: ""; position: absolute; pointer-events: none; width: 460px; height: 460px;
    border: 1px solid #dcc39914; border-radius: 50%; right: -270px; top: -260px;
}
.auth-intro::after { width: 540px; height: 540px; right: -310px; top: -300px; }
.auth-intro-aura {
    position: absolute; inset: -20%; pointer-events: none;
    background: radial-gradient(ellipse at 24% 62%, #78cb9230, transparent 42%),
        radial-gradient(ellipse at 90% 20%, #dcc39918, transparent 38%);
    --suite-glow-opacity: .65; --suite-motion-duration: 14s;
}
.auth-card-aura {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 0% 0%, #dcc39925, transparent 45%),
        radial-gradient(ellipse at 100% 95%, #97bb8d14, transparent 40%);
    --suite-float-distance: 0px; --suite-glow-scale: 1; --suite-motion-duration: 10s;
}
.auth-eyebrow {
    position: relative; display: flex; align-items: center; gap: 10px;
    color: var(--auth-gold); font-size: 12px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
}
.auth-eyebrow > span:first-child { width: 22px; height: 1px; background: var(--auth-gold); flex-shrink: 0; }
.auth-intro h1 {
    position: relative; margin: 22px 0 18px; max-width: 440px;
    font-size: clamp(36px, 4vw, 54px); font-weight: 500; line-height: 1.18; letter-spacing: -.045em;
    overflow-wrap: anywhere; text-wrap: balance;
}
.auth-intro-copy { position: relative; margin: 0; max-width: 350px; color: #c6d7ca; font-size: 15px; line-height: 1.8; }
.auth-art { position: relative; display: grid; place-items: center; min-height: 260px; margin: 16px 0; }
.auth-orbit { position: absolute; border: 1px solid #dcc39925; border-radius: 50%; }
.auth-orbit-outer { width: 320px; height: 250px; transform: rotate(-24deg); --suite-base-rotation: -24deg; --suite-motion-duration: 32s; }
.auth-orbit-inner { width: 280px; height: 220px; transform: rotate(26deg); border-color: #dcc39913; --suite-base-rotation: 26deg; --suite-motion-duration: 40s; --suite-orbit-direction: reverse; }
.auth-membership {
    position: relative; width: min(100%, 310px); min-height: 188px; padding: 22px 24px;
    border: 1px solid #dcc39970; border-radius: 18px;
    background: linear-gradient(115deg, #dcc39912, transparent 40%, #dcc3991c), linear-gradient(140deg, #275547, #113b30);
    box-shadow: 0 24px 44px #001c2160, inset 0 1px 0 #fff4; transform: rotate(-8deg);
    --suite-base-rotation: -8deg; --suite-float-distance: -12px; --suite-motion-duration: 9s;
    --suite-luster-color: #fff2c64d; --suite-luster-duration: 8s;
}
.auth-membership-top, .auth-membership-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-membership-top > span { color: #f0e3c9; font-size: 14px; letter-spacing: .04em; overflow-wrap: anywhere; }
.auth-membership-top > svg { color: var(--auth-gold); width: 22px; height: 22px; }
.auth-mark {
    display: grid; place-items: center; width: 54px; height: 54px; margin: 18px 0;
    border: 1px solid #dcc39970; border-radius: 15px; background: linear-gradient(135deg, #e7d0a9, #bb9d6b); color: #173d32;
}
.auth-mark svg { width: 28px; height: 28px; }
.auth-membership-bottom { color: #e1d3b8; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.auth-card-lines { display: flex; align-items: center; gap: 4px; }
.auth-card-lines i { display: block; width: 3px; height: 16px; border-radius: 2px; background: var(--auth-gold); opacity: .5; }
.auth-card-lines i:nth-child(2) { height: 23px; opacity: .8; }
.auth-art-spark { position: absolute; width: 8px; height: 8px; background: var(--auth-gold); border-radius: 50%; box-shadow: 0 0 20px #dcc39960; }
.auth-art-spark-one { left: 12%; top: 20%; }
.auth-art-spark-two { right: 9%; bottom: 22%; width: 5px; height: 5px; }
.auth-intro-footer { position: relative; display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding-top: 24px; border-top: 1px solid #dcc39925; }
.auth-trust-line { display: flex; align-items: center; gap: 9px; color: #e4e9db; font-size: 13px; }
.auth-trust-line svg { color: var(--auth-gold); width: 17px; height: 17px; }
.auth-intro-caption { color: #b5c9bc; font-size: 12px; letter-spacing: .025em; }
.auth-card {
    position: relative; isolation: isolate; overflow: hidden;
    min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 44px 48px;
    background: var(--auth-paper); border-left: 1px solid #dcc39938;
}
.auth-card > :not(.auth-card-aura) { position: relative; }
.auth-brand-symbol { --suite-luster-duration: 12s; }
.auth-art-spark-one { --suite-motion-duration: 7s; --suite-float-distance: -16px; }
.auth-art-spark-two { --suite-motion-duration: 11s; --suite-float-distance: 14px; }
.auth-card-kicker { color: #7b6847; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.auth-card h2 { font-size: clamp(28px, 3vw, 34px); font-weight: 650; line-height: 1.2; letter-spacing: -.035em; margin: 12px 0 10px; overflow-wrap: anywhere; }
.auth-card-heading > p { color: var(--auth-muted); font-size: 14px; margin: 0; line-height: 1.65; }
.auth-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 26px 0; background: #edf0e9; border: 1px solid #d4ddd5; border-radius: 13px; }
.auth-alternative {
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 44px; padding: 9px 12px; border-radius: 9px; border: 1px solid transparent;
    color: #4c5c53; font-size: 14px; font-weight: 650; text-decoration: none; overflow-wrap: anywhere;
}
.auth-alternative.is-current { background: var(--auth-paper); border-color: var(--auth-border); color: var(--auth-green); box-shadow: 0 2px 5px #123f3308; }
.auth-form { display: grid; gap: 18px; }
.auth-register-pair { display: grid; gap: inherit; }
.auth-mobile-copy { display: none; }
.auth-form label, .auth-field { display: grid; gap: 8px; }
.auth-form label { color: #344c40; font-size: 13px; font-weight: 650; }
.auth-page .auth-form :is(input, .phone-control select) {
    width: 100%; min-width: 0; min-height: 52px; padding: 13px 14px; border: 1px solid #9aaa9e;
    border-radius: 11px; background: #fffefa; color: var(--auth-ink); font: inherit; font-size: 16px; font-weight: 400;
}
.auth-page .auth-form .phone-control input { width: 0; }
.auth-page .auth-form .phone-control select { flex: 0 0 130px; width: 130px; min-width: 130px; padding-left: 10px; padding-right: 4px; }
.auth-page .auth-form :is(input[readonly], .phone-control select:disabled) { background: #eef2e9; color: #43614c; opacity: 1; border-color: #bdcbbd; }
.auth-page .phone-note { color: var(--auth-muted); font-size: 12px; font-weight: 400; line-height: 1.6; }
.auth-page .auth-form .auth-remember {
    display: flex; align-items: center; gap: 10px; min-height: 48px;
    width: fit-content; max-width: 100%; cursor: pointer; font-size: 14px;
}
.auth-page .auth-form .auth-remember input {
    appearance: auto; width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px;
    padding: 0; margin: 0; accent-color: var(--auth-green); cursor: pointer;
}
.auth-remember input:focus-visible { outline: 2px solid var(--auth-green); outline-offset: 4px; }
.auth-remember input:disabled { cursor: wait; }
.auth-remember span { overflow-wrap: anywhere; }
.auth-remember-hint { margin-top: -8px; }
.password-field { position: relative; display: block; }
.auth-page .password-field input { padding-right: 54px; }
.password-toggle {
    position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 44px; min-height: 44px;
    padding: 0; border: 0; border-radius: 8px; color: #506658; background: transparent; cursor: pointer;
}
.auth-eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .auth-eye-slash { display: block; }
.auth-submit {
    display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%;
    min-height: 54px; padding: 14px 20px; border: 1px solid #cc893f; border-radius: 12px;
    color: #42270e; background: linear-gradient(110deg, #f8c286, var(--auth-accent));
    font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: inset 0 1px 0 #ffffff80, 0 6px 18px #a7732a15;
}
.auth-submit:disabled { opacity: .6; cursor: wait; }
.auth-notice { color: #9a3526; font-size: 13px; line-height: 1.6; margin: 0; overflow-wrap: anywhere; }
.auth-notice:empty { display: none; }
.auth-notice.success { color: var(--auth-green); }
.auth-card-footnote {
    display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px;
    padding-top: 20px; border-top: 1px solid var(--auth-border); color: var(--auth-muted); font-size: 12px;
}
.auth-card-footnote svg { width: 16px; height: 16px; color: #647c65; }
.auth-footer { display: flex; justify-content: space-between; gap: 16px; color: #b7c9bc; font-size: 12px; padding: 0 4px; }
.auth-footer > span { overflow-wrap: anywhere; }
@media (hover: hover) and (pointer: fine) {
    .auth-tools a:hover { background: #ffffff12; border-color: #dcc39980; }
    .auth-alternative:not(.is-current):hover { background: #fffdf880; color: var(--auth-green); }
}
@media (min-width: 1600px) { .auth-main { flex: 0 0 auto; min-height: 650px; margin-top: auto; margin-bottom: auto; } }
@media (max-width: 1050px) {
    .auth-shell { padding-left: 28px; padding-right: 28px; }
    .auth-intro { padding: 36px; }
    .auth-card { padding: 36px 30px; }
    .auth-intro h1 { font-size: 40px; }
}
@media (max-width: 800px) {
    .auth-shell { max-width: 560px; padding: max(18px, env(safe-area-inset-top, 0px)) 20px max(18px, env(safe-area-inset-bottom, 0px)); }
    .auth-nav { gap: 12px; flex-wrap: wrap; }
    .auth-brand-symbol { width: 38px; height: 38px; border-radius: 12px; }
    .auth-brand { gap: 9px; flex: 1 1 140px; }
    .brand { font-size: 20px; }
    .auth-tools { gap: 6px; max-width: 100%; }
    .auth-tools a { flex: 1 1 auto; min-width: 0; padding: 9px 10px; font-size: 12px; gap: 6px; overflow-wrap: anywhere; }
    .auth-tools svg { width: 17px; height: 17px; }
    .auth-main { grid-template-columns: minmax(0, 1fr); flex: 0 0 auto; margin: 22px 0; border-radius: 24px; }
    .auth-intro { padding: 28px; }
    .auth-eyebrow { font-size: 10px; letter-spacing: .12em; }
    .auth-intro h1 { font-size: 31px; margin: 14px 0 10px; max-width: 100%; }
    .auth-intro-copy { font-size: 13px; max-width: 100%; line-height: 1.65; }
    .auth-intro-footer { display: none; }
    .auth-art { display: grid; min-height: 126px; margin: 12px 0 0; }
    .auth-membership {
        width: 190px; min-height: 104px; padding: 12px 16px; border-radius: 13px;
        --suite-float-distance: -7px; --suite-motion-duration: 6s; --suite-luster-duration: 5s;
    }
    .auth-membership-top > span { font-size: 11px; }
    .auth-membership-top > svg { width: 16px; height: 16px; }
    .auth-membership-bottom { font-size: 8px; letter-spacing: .04em; }
    .auth-mark { width: 30px; height: 30px; margin: 8px 0; border-radius: 9px; }
    .auth-mark svg { width: 18px; height: 18px; }
    .auth-card-lines i { height: 10px; width: 2px; }
    .auth-card-lines i:nth-child(2) { height: 15px; }
    .auth-orbit-outer { width: 230px; height: 116px; --suite-motion-duration: 24s; }
    .auth-orbit-inner { width: 210px; height: 100px; --suite-motion-duration: 30s; }
    .auth-art-spark-one { left: 9%; top: 24%; width: 6px; height: 6px; }
    .auth-art-spark-two { right: 8%; bottom: 20%; }
    .auth-intro-aura { --suite-motion-duration: 9s; --suite-glow-opacity: .45; }
    .auth-submit { --suite-luster-duration: 5s; }
    .auth-card { padding: 28px; border-left: 0; border-top: 1px solid #dcc39938; }
    .auth-card-kicker { display: none; }
    .auth-card h2 { margin-top: 0; font-size: 28px; }
    .auth-mode-tabs { margin: 20px 0; }
    .auth-form { gap: 16px; }
    .auth-card-footnote { margin-top: 20px; padding-top: 16px; }
    .auth-footer { margin-top: auto; flex-wrap: wrap; justify-content: center; gap: 5px 14px; text-align: center; font-size: 11px; }
    .auth-register .auth-intro { padding-top: 22px; padding-bottom: 22px; }
}
@media (max-width: 380px) {
    .auth-shell { padding-left: 14px; padding-right: 14px; }
    .auth-card, .auth-intro { padding-left: 22px; padding-right: 22px; }
    .auth-tools a { padding-left: 8px; padding-right: 8px; }
    .auth-nav .auth-tools a { min-width: 44px; min-height: 44px; flex-shrink: 0; }
    .auth-nav .auth-tools a span { display: none; }
    .auth-page .auth-form .phone-control select { flex-basis: 116px; width: 116px; min-width: 116px; font-size: 14px; }
}
/* Compact portrait layout keeps the complete form and live artwork on screen. */
@media (max-width: 800px) and (orientation: portrait) {
    .auth-desktop-copy { display: none; }
    .auth-mobile-copy { display: inline; }
    .auth-register-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
    .auth-register-pair > label { min-width: 0; }
    .auth-shell { padding: max(10px, env(safe-area-inset-top, 0px)) 14px max(10px, env(safe-area-inset-bottom, 0px)); }
    .auth-nav { flex-wrap: nowrap; gap: 8px; }
    .auth-brand { flex: 0 0 auto; gap: 7px; max-width: 42%; }
    .brand { font-size: 18px; white-space: nowrap; }
    .auth-brand-symbol { width: 32px; height: 36px; border-radius: 10px; }
    .auth-tools { flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
    .auth-tools a { flex: 0 1 auto; padding: 6px 8px; line-height: 1.2; text-align: center; }
    .auth-main { margin: 10px 0 8px; border-radius: 20px; }
    .auth-intro, .auth-register .auth-intro {
        display: grid; grid-template-columns: minmax(0, 1fr) 112px;
        column-gap: 10px; row-gap: 5px; padding: 12px 18px; align-items: center;
    }
    .auth-eyebrow { grid-column: 1; font-size: 9px; letter-spacing: .06em; gap: 6px; }
    .auth-eyebrow > span:first-child { width: 14px; }
    .auth-intro h1 { grid-column: 1; margin: 0; font-size: 21px; line-height: 1.25; }
    .auth-intro-copy { grid-column: 1; font-size: 12px; line-height: 1.5; }
    .auth-art { grid-column: 2; grid-row: 1 / 4; min-height: 78px; margin: 0; }
    .auth-membership { width: 104px; min-height: 70px; padding: 8px; border-radius: 10px; }
    .auth-membership-top { gap: 4px; }
    .auth-membership-top > span { font-size: 9px; }
    .auth-membership-top > svg { width: 12px; height: 12px; }
    .auth-membership-bottom { gap: 4px; font-size: 7px; }
    .auth-mark { width: 23px; height: 23px; margin: 5px 0; border-radius: 7px; }
    .auth-mark svg { width: 14px; height: 14px; }
    .auth-orbit-outer { width: 126px; height: 78px; }
    .auth-orbit-inner { width: 112px; height: 70px; }
    .auth-art-spark-one { left: -2%; width: 4px; height: 4px; }
    .auth-art-spark-two { right: -3%; width: 3px; height: 3px; }
    .auth-card { padding: 16px 18px; }
    .auth-card h2 { font-size: 24px; margin: 0 0 5px; }
    .auth-card-heading > p { font-size: 12px; line-height: 1.5; }
    .auth-mode-tabs { margin: 12px 0; }
    .auth-alternative { padding: 6px 8px; font-size: 13px; }
    .auth-form { gap: 10px; }
    .auth-form label, .auth-field { gap: 5px; }
    .auth-form label { font-size: 12px; line-height: 1.25; }
    .auth-page .auth-form :is(input, .phone-control select) { min-height: 44px; padding-top: 9px; padding-bottom: 9px; }
    .password-toggle { top: 0; right: 2px; }
    .auth-page .phone-note { font-size: 11px; line-height: 1.4; }
    .auth-submit { min-height: 46px; padding: 10px 16px; }
    .auth-card-footnote { margin-top: 8px; padding-top: 0; border-top: 0; font-size: 11px; }
    .auth-footer { font-size: 10px; gap: 3px 8px; }
}
@media (max-width: 800px) and (orientation: portrait) and (max-height: 700px) {
    .auth-shell { padding-top: max(6px, env(safe-area-inset-top, 0px)); padding-bottom: max(6px, env(safe-area-inset-bottom, 0px)); }
    .auth-main { margin-top: 6px; margin-bottom: 6px; }
    .auth-intro, .auth-register .auth-intro { padding-top: 10px; padding-bottom: 10px; }
    .auth-art { min-height: 78px; }
    .auth-intro h1 { font-size: 19px; }
    .auth-card { padding-top: 8px; padding-bottom: 8px; }
    .auth-card-heading { display: flex; align-items: center; gap: 12px; }
    .auth-card-heading h2 { flex: 0 0 auto; margin: 0; font-size: 21px; }
    .auth-card-heading > p { font-size: 11px; }
    .auth-mode-tabs { margin: 8px 0; }
    .auth-form { gap: 7px; }
    .auth-card-footnote { margin-top: 6px; padding-top: 0; }
}