/*
 * Account screens. Loaded on top of landing.css so the tokens, buttons and
 * type scale are shared with the marketing page — signing in should not feel
 * like leaving the product.
 *
 * Two panes: product proof on the left, the single task on the right. Below
 * 900px the proof pane drops and the card stands alone.
 */
.auth-body { min-height: 100vh; background: var(--bg); }
.auth-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

/* Left: brand and proof --------------------------------------------------- */
.auth-aside {
    position: relative; display: flex; flex-direction: column; gap: 40px; overflow: hidden;
    border-right: 1px solid var(--line);
    background: linear-gradient(160deg, #17123a 0%, #101226 42%, var(--bg) 100%);
    padding: clamp(32px, 4vw, 56px);
}
.auth-aside::before {
    content: ""; position: absolute; left: -120px; top: -140px; width: 620px; height: 520px; pointer-events: none;
    background: radial-gradient(50% 50% at 50% 50%, rgba(145, 119, 255, .3), transparent 70%);
}
.auth-aside::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(80% 60% at 30% 30%, #000, transparent 78%);
    mask-image: radial-gradient(80% 60% at 30% 30%, #000, transparent 78%);
}
.auth-aside > * { position: relative; z-index: 1; }

.auth-pitch { margin-top: auto; }
.auth-pitch h2 { font-size: clamp(30px, 3.2vw, 42px); font-weight: 650; }
.auth-pitch h2 em { font-style: normal; color: var(--accent-bright); }
.auth-pitch p { max-width: 44ch; margin-top: 16px; color: var(--muted); font-size: 15px; }

.auth-points { display: grid; gap: 12px; margin-top: 26px; }
.auth-points li { display: flex; gap: 11px; list-style: none; color: var(--muted); font-size: 13.5px; }
.auth-points svg { width: 17px; height: 17px; margin-top: 2px; flex: 0 0 auto; color: var(--accent-bright); }

.auth-proof {
    max-width: 430px; margin-top: auto; border: 1px solid var(--line); border-radius: 14px;
    background: rgba(19, 21, 33, .72); padding: 16px;
}
.auth-proof-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-proof-name { font-size: 13px; font-weight: 650; }
.auth-spark { width: 100%; height: auto; margin-top: 12px; }
.auth-proof-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.auth-proof-stats > div { min-width: 0; }
.auth-proof-stats span { display: block; color: var(--faint); font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.auth-proof-stats b { display: block; margin-top: 3px; font-size: 14px; font-weight: 700; }
.auth-proof-stats b.up { color: var(--bull); }

/* Right: the form --------------------------------------------------------- */
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: clamp(28px, 4vw, 56px) clamp(18px, 4vw, 48px); }
.auth-card { position: relative; width: 100%; max-width: 400px; }
.auth-brand-mobile { display: none; justify-content: center; margin-bottom: 26px; }

.auth-card .eyebrow { font-size: 10px; }
.auth-title { margin-top: 12px; font-family: "Inter Tight", Inter, sans-serif; font-size: 30px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.auth-sub { margin-top: 9px; color: var(--muted); font-size: 14px; }
.auth-sub b { color: var(--ink); font-weight: 600; }

.auth-badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(124, 92, 252, .35); border-radius: 999px; background: rgba(124, 92, 252, .12); padding: 4px 11px; color: var(--accent-bright); font-size: 11px; font-weight: 650; }
.auth-badge svg { width: 13px; height: 13px; }

.auth-flash { display: flex; gap: 10px; margin-bottom: 20px; border: 1px solid; border-radius: 11px; padding: 11px 13px; font-size: 13px; line-height: 1.5; }
.auth-flash svg { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; }
.auth-flash.is-good { border-color: rgba(25, 184, 119, .32); background: rgba(25, 184, 119, .1); color: #74e3b6; }
.auth-flash.is-bad { border-color: rgba(226, 86, 106, .32); background: rgba(226, 86, 106, .1); color: #f5aab4; }
.auth-flash.is-dev { margin: 20px 0 0; border-color: rgba(220, 160, 65, .38); background: rgba(220, 160, 65, .1); color: #e8c184; }
.auth-flash.is-dev b { letter-spacing: .16em; }

.auth-form { display: grid; gap: 16px; margin-top: 26px; }
.field { display: grid; gap: 7px; }
.field > span:first-child { color: var(--muted); font-size: 12px; font-weight: 600; }
.field-input {
    position: relative; display: flex; align-items: center;
    border: 1px solid var(--line); border-radius: 11px; background: rgba(255, 255, 255, .022);
    transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.field-input > svg { position: absolute; left: 13px; width: 16px; height: 16px; color: var(--faint); pointer-events: none; transition: color .16s var(--ease); }
.field-input input {
    width: 100%; height: 46px; min-width: 0; border: 0; border-radius: inherit; background: none;
    padding: 0 14px 0 39px; color: var(--ink); font: inherit; font-size: 14px;
}
.field-input input::placeholder { color: #5b6274; }
.field-input input:focus { outline: none; }
.field-input:focus-within { border-color: var(--accent-bright); background: rgba(124, 92, 252, .07); box-shadow: 0 0 0 3px rgba(124, 92, 252, .16); }
.field-input:focus-within > svg { color: var(--accent-bright); }
.field.has-error .field-input { border-color: rgba(226, 86, 106, .55); }
.field em { color: #f5aab4; font-style: normal; font-size: 11.5px; }

.field-reveal { display: grid; width: 38px; height: 44px; flex: 0 0 auto; place-items: center; color: var(--faint); }
.field-reveal svg { width: 16px; height: 16px; }
.field-reveal:hover { color: var(--ink); }

.auth-form .btn { margin-top: 4px; height: 46px; }
.auth-terms { color: var(--faint); font-size: 11.5px; text-align: center; }

.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.otp input {
    width: 100%; height: 56px; min-width: 0; border: 1px solid var(--line); border-radius: 12px;
    background: rgba(255, 255, 255, .022); color: var(--ink);
    font: inherit; font-size: 22px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
    transition: border-color .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.otp input:focus { outline: none; border-color: var(--accent-bright); background: rgba(124, 92, 252, .1); box-shadow: 0 0 0 3px rgba(124, 92, 252, .16); transform: translateY(-1px); }
.otp input.is-filled { border-color: var(--line-strong); background: rgba(255, 255, 255, .05); }

.auth-resend { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; color: var(--faint); font-size: 12.5px; }
.auth-resend button { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-bright); font-size: 12.5px; font-weight: 600; }
.auth-resend svg { width: 13px; height: 13px; }
.auth-resend button:hover { text-decoration: underline; }

.auth-foot { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line-soft); color: var(--faint); font-size: 13px; text-align: center; }
.auth-foot a { color: var(--accent-bright); font-weight: 600; }
.auth-foot a:hover { text-decoration: underline; }
.auth-legal { max-width: 400px; color: #565d70; font-size: 11px; line-height: 1.6; text-align: center; }

@media (max-width: 899px) {
    .auth-split { grid-template-columns: minmax(0, 1fr); }
    .auth-aside { display: none; }
    .auth-main { justify-content: flex-start; padding-top: 44px; }
    .auth-brand-mobile { display: flex; width: 100%; }
}

@media (max-width: 400px) {
    .otp { gap: 6px; }
    .otp input { height: 50px; font-size: 19px; }
}