:root {
    --auth-ink: #102a2c;
    --auth-muted: #5f7373;
    --auth-line: #d9e4e1;
    --auth-soft: #f2f7f5;
    --auth-paper: #ffffff;
    --auth-brand: #177b73;
    --auth-brand-dark: #0d5d58;
    --auth-focus: #0f8f84;
    --auth-danger: #b42318;
    --auth-success: #067647;
    --auth-radius: 18px;
    color-scheme: light;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: #edf4f1; }
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--auth-ink);
    background:
        radial-gradient(circle at 8% 12%, rgba(52, 211, 153, .12), transparent 28rem),
        linear-gradient(135deg, #f8fbfa 0%, #edf4f1 55%, #e8f1ee 100%);
    font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
a { color: inherit; }
.auth-skip {
    position: fixed; left: 12px; top: 12px; z-index: 30; transform: translateY(-180%);
    padding: 10px 14px; border-radius: 10px; background: #fff; color: var(--auth-brand-dark);
    font-weight: 800; box-shadow: 0 8px 24px rgba(15, 54, 51, .18);
}
.auth-skip:focus { transform: none; }

.auth-page { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(320px, .92fr) minmax(480px, 1.08fr); }
.auth-story {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: clamp(28px, 5vw, 68px); color: #eefcf8;
    background: #0b3435;
}
.auth-story::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
        radial-gradient(circle at 90% 8%, rgba(45, 212, 191, .28), transparent 24rem);
    background-size: 46px 46px, 46px 46px, auto;
}
.auth-story > * { position: relative; z-index: 1; }
.auth-brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; text-decoration: none; }
.auth-brand-mark {
    width: 46px; height: 46px; display: grid; place-items: center; overflow: hidden;
    border: 1px solid rgba(255,255,255,.24); border-radius: 14px; background: rgba(255,255,255,.1);
}
.auth-brand-mark img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.auth-brand-mark i { font-size: 20px; }
.auth-brand-name { display: block; font-size: 17px; font-weight: 900; letter-spacing: .01em; }
.auth-brand-subtitle { display: block; margin-top: 2px; color: #b9d4cf; font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.auth-story-copy { max-width: 620px; margin: clamp(58px, 12vh, 130px) 0 48px; }
.auth-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: #99f6e4; font-size: 12px; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.auth-eyebrow::before { content: ""; width: 28px; height: 2px; background: #5eead4; }
.auth-story h1 { max-width: 700px; margin: 18px 0; font-size: clamp(2.15rem, 4.2vw, 4.4rem); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.auth-story-lead { max-width: 590px; margin: 0; color: #cbe0dc; font-size: clamp(1rem, 1.4vw, 1.16rem); line-height: 1.65; }
.auth-channel-line { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.auth-channel { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #e6fffa; background: rgba(255,255,255,.07); font-size: 12px; font-weight: 750; }
.auth-channel.roadmap { color: #b8cbc7; border-style: dashed; }
.auth-channel small { color: #8fb0aa; font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.auth-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 16px; background: rgba(255,255,255,.14); }
.auth-proof div { min-height: 96px; padding: 18px; background: rgba(7, 39, 40, .86); }
.auth-proof i { color: #5eead4; }
.auth-proof strong { display: block; margin-top: 10px; font-size: 13px; }
.auth-proof span { display: block; margin-top: 4px; color: #9fbbb6; font-size: 11px; line-height: 1.45; }

.auth-workspace { display: grid; align-items: center; padding: clamp(20px, 5vw, 72px); }
.auth-card { width: min(100%, 530px); margin: auto; }
.auth-card.auth-card-wide { width: min(100%, 680px); }
.auth-mobile-brand { display: none; margin-bottom: 26px; color: var(--auth-ink); }
.auth-mobile-brand .auth-brand-mark { color: #fff; background: var(--auth-brand); }
.auth-mobile-brand .auth-brand-subtitle { color: var(--auth-muted); }
.auth-card-header { margin-bottom: 28px; }
.auth-card-header h2 { margin: 0; font-size: clamp(1.85rem, 4vw, 2.6rem); line-height: 1.08; letter-spacing: -.035em; }
.auth-card-header p { margin: 10px 0 0; color: var(--auth-muted); font-size: 14px; line-height: 1.6; }
.auth-switch { margin-top: 16px; color: var(--auth-muted); font-size: 13px; }
.auth-switch a, .auth-link { color: var(--auth-brand-dark); font-weight: 850; text-underline-offset: 3px; }

.auth-alert { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 13px 14px; border: 1px solid #fecdca; border-radius: 12px; background: #fef3f2; color: var(--auth-danger); font-size: 13px; font-weight: 700; line-height: 1.45; }
.auth-alert[hidden], .auth-social[hidden] { display: none; }
.auth-form { display: grid; gap: 17px; }
.auth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.auth-field { min-width: 0; }
.auth-field-full { grid-column: 1 / -1; }
.auth-field label, .auth-field legend { display: block; margin: 0 0 7px; color: #294442; font-size: 12px; font-weight: 850; }
.auth-input, .auth-select {
    width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #cbdad6; border-radius: 12px;
    outline: none; color: var(--auth-ink); background: var(--auth-paper); transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-input::placeholder { color: #8b9b99; }
.auth-input:hover, .auth-select:hover { border-color: #9cb8b2; }
.auth-input:focus, .auth-select:focus { border-color: var(--auth-focus); box-shadow: 0 0 0 4px rgba(15, 143, 132, .14); }
.auth-input[aria-invalid="true"] { border-color: var(--auth-danger); }
.auth-password { position: relative; }
.auth-password .auth-input { padding-right: 52px; }
.auth-icon-button { position: absolute; right: 5px; top: 5px; width: 40px; height: 40px; border: 0; border-radius: 9px; color: #607774; background: transparent; cursor: pointer; }
.auth-icon-button:hover { background: var(--auth-soft); color: var(--auth-ink); }
.auth-hint { display: block; margin-top: 6px; color: #728582; font-size: 11px; line-height: 1.45; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.auth-check { display: flex; align-items: flex-start; gap: 9px; color: #4f6663; font-size: 12px; line-height: 1.5; }
.auth-check input { width: 17px; height: 17px; margin: 1px 0 0; flex: none; accent-color: var(--auth-brand); }
.auth-button {
    width: 100%; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid transparent; border-radius: 12px; padding: 12px 18px; cursor: pointer; text-decoration: none;
    background: var(--auth-brand); color: #fff; font-size: 14px; font-weight: 900; transition: background .15s, transform .15s, box-shadow .15s;
}
.auth-button:hover { background: var(--auth-brand-dark); box-shadow: 0 8px 22px rgba(13, 93, 88, .18); transform: translateY(-1px); }
.auth-button:active { transform: none; }
.auth-button:disabled { opacity: .62; cursor: wait; transform: none; box-shadow: none; }
.auth-button-secondary { border-color: var(--auth-line); background: #fff; color: #294442; }
.auth-button-secondary:hover { border-color: #9cb8b2; background: var(--auth-soft); color: #173c39; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #778a87; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--auth-line); }
.auth-social { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.auth-social .auth-button[hidden] { display: none; }
.auth-social-note { grid-column: 1 / -1; margin: 4px 0 0; color: #728582; font-size: 11px; line-height: 1.5; text-align: center; }
.auth-legal { margin: 22px 0 0; color: #738582; font-size: 11px; line-height: 1.55; text-align: center; }
.auth-status { min-height: 21px; margin: 0; color: var(--auth-muted); font-size: 13px; font-weight: 750; text-align: center; }
.auth-status.error { color: var(--auth-danger); }
.auth-status.success { color: var(--auth-success); }
.auth-roadmap-mobile { display: none; margin-top: 24px; padding: 16px; border: 1px dashed #b8cbc6; border-radius: 14px; color: var(--auth-muted); background: rgba(255,255,255,.55); font-size: 12px; line-height: 1.5; }

:focus-visible { outline: 3px solid rgba(15, 143, 132, .38); outline-offset: 3px; }
@media (max-width: 940px) {
    .auth-page { display: block; }
    .auth-story { display: none; }
    .auth-workspace { min-height: 100vh; min-height: 100dvh; padding: max(22px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(26px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
    .auth-card { width: min(100%, 600px); }
    .auth-mobile-brand { display: inline-flex; }
    .auth-roadmap-mobile { display: block; }
}
@media (max-width: 620px) {
    .auth-workspace { align-items: start; }
    .auth-card-header { margin-bottom: 24px; }
    .auth-grid, .auth-social { grid-template-columns: 1fr; }
    .auth-social-note { grid-column: auto; }
    .auth-row { align-items: flex-start; }
    .auth-proof { grid-template-columns: 1fr; }
    input:not([type="checkbox"]):not([type="radio"]), select { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}