/* CarSyncPro Login Server — self-contained styles (no external fonts/assets,
   so the strict CSP needs no exceptions). Light + dark aware. Centered card. */

:root {
    --bg: #eef2f7;
    --bg-accent: #e2e8f2;
    --card: #ffffff;
    --ink: #16213a;
    --ink-soft: #5b6472;
    --line: #d9e0ea;
    --brand: #004b8d;
    --brand-ink: #ffffff;
    --brand-hover: #003a6e;
    --error-bg: #fdecec;
    --error-ink: #a12626;
    --info-bg: #e6f0fa;
    --info-ink: #0a3f73;
    --focus: #004b8d;
    --radius: 14px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f141c;
        --bg-accent: #141b26;
        --card: #1a2130;
        --ink: #e8ecf3;
        --ink-soft: #9aa4b4;
        --line: #2b3547;
        --brand: #3f83c4;
        --brand-ink: #ffffff;
        --brand-hover: #5497d4;
        --error-bg: #3a1f22;
        --error-ink: #f2b8b8;
        --info-bg: #17293f;
        --info-ink: #bcd4f2;
        --focus: #5f9bd6;
    }
}

* { box-sizing: border-box; }

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 2rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 50% -10%, var(--bg-accent), var(--bg));
    color: var(--ink);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.card {
    width: 100%;
    max-width: 25rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 2.25rem 1.9rem;
    box-shadow: 0 10px 30px rgba(16, 26, 45, 0.10);
    text-align: center;
}

/* Visually hidden, still read by assistive tech */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Brand logo (inline SVG) + product subtitle */
.brand {
    margin-bottom: 1.6rem;
    line-height: 1.15;
}
.brand-logo {
    display: block;
    width: 210px;
    max-width: 72%;
    height: auto;
    margin: 0 auto;
}
.brand-sub {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Recolor the logo for dark backgrounds. The blue keeps the brand value
   #004b8d; only the near-black "Car" is lightened, otherwise it would be
   invisible on the dark card. Orange is unchanged. */
@media (prefers-color-scheme: dark) {
    .brand-logo .logo-car { fill: #e8ecf3; }
}

h1 {
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 0.55rem;
    letter-spacing: -0.01em;
}

.lede {
    margin: 0 auto 1.5rem;
    max-width: 22rem;
    color: var(--ink-soft);
}

form { text-align: center; }

label {
    display: block;
    font-size: 0.86rem;
    font-weight: 600;
    margin: 0.95rem 0 0.4rem;
    text-align: center;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 0.72rem 0.85rem;
    font-size: 1rem;
    text-align: center;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}

button[type="submit"] {
    width: 100%;
    margin-top: 1.6rem;
    padding: 0.78rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand-ink);
    background: var(--brand);
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.12s ease;
}

button[type="submit"]:hover { background: var(--brand-hover); }
button[type="submit"]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent);
    outline-offset: 2px;
}

.alert {
    margin: 0 0 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    font-size: 0.92rem;
    text-align: center;
}
.alert-error { background: var(--error-bg); color: var(--error-ink); }
.alert-info  { background: var(--info-bg);  color: var(--info-ink);  }

.links {
    margin: 1.35rem 0 0;
    font-size: 0.9rem;
    text-align: center;
}
.links a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
}
.links a:hover { text-decoration: underline; }

.muted {
    color: var(--ink-soft);
    font-size: 0.9rem;
    margin: 0.5rem 0 0;
    text-align: center;
}

.register {
    margin: 1.1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--ink-soft);
    text-align: center;
}
.register a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.register a:hover { text-decoration: underline; }

.foot {
    margin-top: 1.35rem;
    color: var(--ink-soft);
    font-size: 0.82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
}
.foot .lock { opacity: 0.8; }

/* Deploy marker — a tiny, muted build stamp (SemVer + short git SHA) so an
   operator can confirm at a glance which version is live. Deliberately
   understated so it never distracts a customer. Also surfaced machine-readably
   at /health (app_version). */
.app-version {
    margin: 10px auto 0;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    opacity: 0.6;
}

/* Two-column sign-in page: sign in (left) + registration (right). The card uses
   the full comfortable width so the expanded registration form breathes in a
   2-column grid instead of one long stack. */
.card--split { max-width: 66rem; }

.split {
    display: grid;
    grid-template-columns: minmax(0, 19rem) 1fr; /* narrow sign-in | wide registration */
    gap: 2.5rem;
    text-align: left;
}
.pane { min-width: 0; }
.pane h2 {
    font-size: 1.3rem;
    line-height: 1.2;
    margin: 0 0 0.55rem;
    letter-spacing: -0.01em;
}
.pane--register {
    border-left: 1px solid var(--line);
    padding-left: 2.2rem;
    text-align: center;
}
.reg-note { margin-top: 1rem; }

select {
    width: 100%;
    padding: 0.72rem 0.85rem;
    font-size: 1rem;
    text-align: center;
    text-align-last: center;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
select:focus {
    outline: none;
    border-color: var(--focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent);
}

/* =========================================================================
   Full-window auth page — the current login mockup.
   A branded showcase panel (LEFT, 55%) beside the form column (RIGHT).
   The form column shows sign-in and flips to a two-step registration wizard.
   Deliberately a single light look (fixed mockup colors) so it renders
   identically regardless of the browser's light/dark preference. Scoped under
   .auth / .body--bare so the shared .card pages (forgot / reset / change) are
   untouched.
   ========================================================================= */
.body--bare {
    margin: 0;
    padding: 0;
    display: block;
    background: #fff;
    color: #16324f;
}

.auth {
    display: flex;
    min-height: 100vh;
}

/* Form on the LEFT (40%), branded showcase panel on the RIGHT (60%). Order is
   set via flex `order` so the form stays first in the DOM (and first on mobile,
   where the columns stack). */
/* ============================ SHOWCASE PANEL (right) =========================== */
.auth-panel {
    order: 2;
    flex: 0 0 50%;
    box-sizing: border-box;
    padding: 56px 64px;
    background: linear-gradient(160deg, #12406f 0%, #0b2c50 60%, #081f3a 100%);
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre the content → even margin top + bottom */
    color: #fff;
}
/* Cap the content width so the mock keeps the mockup's proportions on wide
   screens (the extra panel width becomes margin around it). */
.auth-panel__inner {
    width: 100%;
    max-width: 660px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #fff;
}
.auth-brand svg { flex: none; }
.auth-brand > span { font-size: 20px; font-weight: 700; color: #fff; }
.auth-brand__pro { color: #f59a5e; }

.auth-panel__title {
    margin: 36px 0 0;
    font-size: 42px;
    line-height: 1.12;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.6px;
}
.auth-panel__title span { color: #f5975a; }

/* Decorative browser/dashboard preview */
.mock {
    margin-top: 30px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 22px 55px rgba(3, 15, 30, 0.45);
}
.mock__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 14px;
}
.mock__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    flex: none;
}
.mock__url {
    flex: 1;
    margin-left: 8px;
    height: 22px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
}
.mock__body {
    box-sizing: border-box;
    background: #f6f9fc;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mock__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: #5c7692;
}
.mock__site { font-size: 10.5px; font-weight: 400; color: #8299b1; }
.mock__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.mock__stat {
    background: #fff;
    border: 1px solid #e4ebf3;
    border-radius: 8px;
    padding: 10px 12px;
}
.mock__k {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #8299b1;
}
.mock__v {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 3px;
    font-size: 19px;
    font-weight: 700;
    color: #16324f;
}
.mock__v i {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    color: #f0701f;
}
.mock__chart {
    background: #fff;
    border: 1px solid #e4ebf3;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
}
.mock__chart-head {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    font-weight: 600;
    color: #5c7692;
}
.mock__up { font-weight: 700; color: #f0701f; }
/* The bar container has an EXPLICIT height so the bars' percentage heights
   resolve in every browser. A flex-grown (flex:1) height is treated as
   indefinite by Safari/Firefox, which collapses the bars to zero — hence the
   fixed height here. */
.mock__bars {
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    margin-top: 10px;
}
.mock__bars span {
    flex: 1;
    min-height: 2px;
    background: #cfe0f2;
    border-radius: 2px 2px 0 0;
}
/* Per-bar heights live here (not as inline styles) so the strict CSP
   (style-src 'self') does not block them. The last four bars are highlighted. */
.mock__bars span:nth-child(1)  { height: 28%; }
.mock__bars span:nth-child(2)  { height: 34%; }
.mock__bars span:nth-child(3)  { height: 30%; }
.mock__bars span:nth-child(4)  { height: 42%; }
.mock__bars span:nth-child(5)  { height: 38%; }
.mock__bars span:nth-child(6)  { height: 50%; }
.mock__bars span:nth-child(7)  { height: 46%; }
.mock__bars span:nth-child(8)  { height: 58%; }
.mock__bars span:nth-child(9)  { height: 54%; }
.mock__bars span:nth-child(10) { height: 66%; }
.mock__bars span:nth-child(11) { height: 74%; }
.mock__bars span:nth-child(12) { height: 88%; }
.mock__bars span:nth-child(n+9) { background: #1d5fa8; }

.auth-chips {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 14px;
}
.chip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 7px 8px;
    font-size: 11.5px;
    color: #eaf2fa;
}
.chip svg { flex: none; color: #f5975a; }

/* ============================================================================
   Registration showcase panel — free-trial focus + "how it works".
   Right column of /register only (login keeps the dashboard mock). Built on
   the shared .auth-panel / .auth-panel__inner / .auth-brand / .auth-panel__title
   so it matches the login panel's frame; the classes below add the trial
   headline sub-line, the numbered step list and a wrapping chip row.
   ============================================================================ */
.auth-panel__title--trial { text-wrap: balance; }

.auth-panel__sub {
    margin: 14px 0 0;
    max-width: 42ch;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.auth-steps {
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.auth-step {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}
.auth-step__num {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    background: #f0701f;
    color: #fff;
}
.auth-step__body { min-width: 0; }
.auth-step__t {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}
.auth-step__d {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.64);
}

/* "Included in your trial" box: the feature set as a bordered card with a
   quiet label and a two-column list of orange-ticked features. */
.trial-incl {
    margin-top: 30px;
    padding: 20px 22px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.04);
}
.trial-incl__label {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}
.trial-incl__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 20px;
}
.trial-incl__list li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #eaf2fa;
}
.incl-check { flex: none; color: #ff8a54; }

/* ============================ FORM COLUMN (left) ============================ */
.auth-main {
    order: 1;
    flex: 1;
    box-sizing: border-box;
    padding: 36px 72px;
    background: #fff;
    display: flex;
    flex-direction: column;
}
.auth-top {
    display: flex;
    justify-content: flex-end;
    gap: 0.4ch;
    font-size: 13px;
    color: #5c7692;
}
.auth-top a { color: #1466b8; font-weight: 600; text-decoration: none; }
.auth-top a:hover { text-decoration: underline; }

.auth-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    max-width: 420px;
    transition: max-width 0.2s ease;
}
/* The registration wizard needs room for its 2-column field grid. */
.auth[data-view="register"] .auth-center { max-width: 560px; }

.auth-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #5c7692;
}
.auth-view h1 {
    margin: 10px 0 0;
    font-size: 28px;
    font-weight: 700;
    color: #16324f;
    letter-spacing: -0.4px;
    line-height: 1.15;
}
.auth-view .lede {
    margin: 8px 0 26px;
    max-width: none;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: #5c7692;
}

/* fields */
.auth .field { text-align: left; margin: 0 0 16px; }
.auth label {
    display: block;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #33475e;
    margin: 0 0 6px;
}
.auth input[type="email"],
.auth input[type="password"],
.auth input[type="text"],
.auth input[type="tel"],
.auth input[type="url"],
.auth select {
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 14px;
    border: 1.5px solid #c9d7e8;
    border-radius: 8px;
    background: #fff;
    font-size: 15px;
    color: #16324f;
    text-align: left;
    text-align-last: left;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.auth select { padding: 0 12px; }
.auth input:focus,
.auth select:focus {
    outline: none;
    border-color: #1d5fa8;
    box-shadow: 0 0 0 3px rgba(29, 95, 168, 0.14);
}

/* Read-only, domain-bound field: the registration country is fixed by the
   domain (it drives the currency + the Market Insights view), so it is shown
   as a non-editable value with a lock icon instead of a select. Matches the
   input frame but reads clearly as "not editable". */
.auth .field-locked {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    height: 46px;
    padding: 0 12px;
    border: 1.5px solid #c9d7e8;
    border-radius: 8px;
    background: #eef3f9;
    color: #16324f;
}
.auth .field-locked svg { flex: 0 0 auto; }
.auth .field-locked__value { font-weight: 600; }
.auth .field-locked__hint {
    margin-left: auto;
    font-size: 12px;
    color: #5c7692;
    white-space: nowrap;
}

/* buttons (scoped to the auth page: mockup styling) */
.auth .btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    height: 48px;
    padding: 0 1rem;
    font: inherit;
    font-size: 15.5px;
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: filter 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}
.auth .btn--primary {
    color: #fff;
    background: linear-gradient(180deg, #15599c, #0d4a8a);
    box-shadow: 0 6px 14px rgba(13, 74, 138, 0.25);
}
.auth .btn--primary:hover { filter: brightness(1.07); }
.auth .btn--ghost {
    height: 46px;
    color: #0d4a8a;
    background: #fff;
    border: 1.5px solid #c9d7e8;
}
.auth .btn--ghost:hover { background: #f2f7fc; }
.auth .btn:focus-visible {
    outline: 3px solid rgba(29, 95, 168, 0.45);
    outline-offset: 2px;
}

/* Sign-in helper row: "stay signed in" checkbox (left) + forgot link (right). */
.auth-formrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 14px 0 20px;
}
.auth .checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: #33475e;
    cursor: pointer;
    text-align: left;
}
.auth .checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #0d4a8a;
    cursor: pointer;
}
.forgot-link { font-size: 13px; font-weight: 600; color: #1466b8; text-decoration: none; white-space: nowrap; }
.forgot-link:hover { text-decoration: underline; }

/* "oder" divider */
.divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
}
.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e4ebf3;
}
.divider span { font-size: 12px; color: #8299b1; }

.auth .alert { text-align: left; }

/* registration: stepper + steps */
.stepper {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0 0 1.4rem;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: #5c7692;
}
.stepper__item {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex: 1;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #d7dde6;
}
.stepper__item span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background: #d7dde6;
    color: #16324f;
    font-size: 0.78rem;
}
.stepper__item.is-active { color: #0d4a8a; border-bottom-color: #0d4a8a; }
.stepper__item.is-active span { background: #0d4a8a; color: #fff; }

.reg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 0.9rem; }
.reg-grid .field { min-width: 0; }
.reg-grid .field--full { grid-column: 1 / -1; }
.reg-actions { display: flex; gap: 0.75rem; margin-top: 1.25rem; }
.req { color: #0d4a8a; font-weight: 700; }

.auth-switch { margin: 1.25rem 0 0; font-size: 0.92rem; color: #5c7692; }
.auth-switch a { color: #1466b8; font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* No-credit-card reassurance badge on the registration view. */
.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1.4rem;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: rgba(13, 74, 138, 0.09);
    color: #0d4a8a;
    font-size: 0.85rem;
    font-weight: 600;
}
.auth-badge span { font-weight: 800; }

/* Secured-connection note — sits centred directly under the form's button
   (inside .auth-center), same gap on the sign-in and registration pages. */
.auth-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 28px auto 0;
    font-size: 12.5px;
    color: #5c7692;
}

/* Trust / compliance badges under the form (replaces the single secure line). */
.auth-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    margin: 26px auto 0;
    max-width: 420px;
}
.auth-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    line-height: 1.3;
    color: #5c7692;
    white-space: nowrap;
}
.auth-trust__item svg { flex: none; }

/* Auth footer: copyright (left), language menu + support (right). The left
   column is always white, so these use fixed light-surface colors, not tokens. */
.auth-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 24px;
    font-size: 12.5px;
    color: #5c7692;
}
.auth-foot__copy { white-space: nowrap; }
.auth-foot__meta { display: flex; align-items: center; gap: 18px; }
.auth-foot__support { color: #5c7692; text-decoration: none; }
.auth-foot__support:hover { color: var(--brand); text-decoration: underline; }
.auth-foot__support:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

/* Language menu — native <details>, no JS. Opens upward (footer sits low). */
.auth-lang { position: relative; }
.auth-lang > summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    list-style: none;
    color: #5c7692;
}
.auth-lang > summary::-webkit-details-marker { display: none; }
.auth-lang > summary::after { content: "\25BE"; font-size: 10px; }
.auth-lang[open] > summary::after { content: "\25B4"; }
.auth-lang > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.auth-lang__menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    margin: 0;
    padding: 5px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(16, 33, 58, 0.14);
    min-width: 190px;
    z-index: 10;
}
.auth-lang__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    color: var(--ink);
    text-decoration: none;
    font-size: 13px;
}
a.auth-lang__opt:hover { background: var(--bg-accent); }
.auth-lang__opt.is-active { font-weight: 600; color: var(--brand, #f0701f); }
.auth-lang__opt.is-active::after { content: "\2713"; font-size: 12px; }
/* Languages without a translation yet: shown, but muted and not selectable. */
.auth-lang__opt.is-soon {
    color: #9aa8ba;
    cursor: default;
}
.auth-secure svg { flex: none; }

/* Compact registration wizard — the company step has the most fields, so tighten
   its vertical rhythm (shorter inputs, smaller gaps, trimmed header/padding) to
   keep the whole step on screen without scrolling. Scoped to the register view
   so the sign-in page keeps its roomier spacing. */
.auth[data-view="register"] .auth-main { padding-top: 20px; padding-bottom: 16px; }
.auth[data-view="register"] .auth-view h1 { font-size: 25px; }
.auth[data-view="register"] .auth-view .lede { margin: 6px 0 12px; font-size: 13.5px; }
.auth[data-view="register"] .stepper { margin-bottom: 0.7rem; }
.auth[data-view="register"] .auth label { margin-bottom: 3px; font-size: 12.5px; }
.auth[data-view="register"] input[type="email"],
.auth[data-view="register"] input[type="tel"],
.auth[data-view="register"] input[type="url"],
.auth[data-view="register"] input[type="text"],
.auth[data-view="register"] select,
.auth[data-view="register"] .field-locked { height: 40px; }
.auth[data-view="register"] .btn { height: 46px; }
.reg-grid .field { margin-bottom: 9px; }
.reg-actions { margin-top: 0.7rem; }
.auth[data-view="register"] .auth-secure { margin-top: 12px; }

/* ---- responsive: stack, panel on top, on small screens ---- */
/* Mobile brand mark on the form column. The branded panel is hidden on mobile,
   so without this the pages would carry no CarSyncPro identity. Hidden on
   desktop (the panel shows the brand there). */
.auth-mobilebrand { display: none; }

/* Mobile-only "scroll to the form" affordance in the registration hero. */
.trial-scroll { display: none; }

@media (max-width: 960px) {
    /* On mobile the branded panel is dropped entirely — just the sign-in /
       registration form, centred in the viewport. */
    .auth { flex-direction: column; }
    .auth-panel { display: none; }
    .auth-main { flex: 1; padding: 28px 22px; }
    .auth[data-view="register"] .auth-center { max-width: 100%; }

    /* Registration on mobile: bring the trial panel back as a full-height hero
       ABOVE the form, so the customer sees "30 days · unlimited · no credit
       card" and the 3 steps before reaching the form; a tap arrow scrolls down
       to it. The "included" box and the form's brand line are dropped here (the
       hero already carries the brand and the value proposition). */
    .auth[data-view="register"] .auth-panel--trial {
        display: flex;
        order: 0;
        flex: none;
        width: 100%;
        /* Not a full-screen hero: leave the top of the registration form peeking
           in below the fold so the customer sees the form starts here (and the
           tap arrow points right at it). svh = the small viewport (URL bar
           visible), so the form peeks even when the address bar is showing;
           vh is the fallback for older mobile browsers. */
        min-height: 76vh;
        min-height: 76svh;
        position: relative;
        /* Gleicher Innenabstand oben und unten: der Inhalt ist vertikal zentriert
           (justify-content: center), so ist die Luft über dem Logo = Luft unter
           dem letzten Text bis zur blauen Kante. Der Pfeil sitzt absolut in der
           unteren Luft. */
        padding: 52px 26px 52px;
    }
    .auth[data-view="register"] .auth-main { flex: none; }
    .auth[data-view="register"] .trial-incl { display: none; }
    .auth[data-view="register"] .auth-mobilebrand { display: none; }
    .auth[data-view="register"] .auth-panel__title { font-size: 34px; }

    .trial-scroll {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        position: absolute;
        left: 50%;
        bottom: 22px;
        transform: translateX(-50%);
        color: #fff;
        text-decoration: none;
    }
    .trial-scroll__label {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.3px;
        color: rgba(255, 255, 255, 0.85);
    }
    .trial-scroll__icon {
        color: #fff;
        background: rgba(245, 151, 90, 0.18);
        border: 1px solid rgba(245, 151, 90, 0.45);
        border-radius: 50%;
        padding: 7px;
        animation: trial-bounce 1.8s ease-in-out infinite;
    }
    @keyframes trial-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(5px); }
    }
    @media (prefers-reduced-motion: reduce) {
        .trial-scroll__icon { animation: none; }
    }

    /* Brand mark at the top of the form column: sign-in shows the logo mark +
       wordmark; the registration page uses the compact "CarSyncPro Kundenportal"
       wordmark to save vertical space on its longer form. */
    .auth-mobilebrand {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin: 0 0 22px;
        text-decoration: none;
    }
    .auth-mobilebrand svg { flex: none; }
    .auth-mobilebrand__name {
        font-size: 19px;
        font-weight: 700;
        letter-spacing: -0.2px;
        color: #16324f;
    }
    .auth-mobilebrand__pro { color: #f0701f; }
    .auth-mobilebrand--text { gap: 7px; }
    .auth-mobilebrand--text .auth-mobilebrand__name { font-size: 17px; }
    .auth-mobilebrand__sub { font-size: 14px; font-weight: 600; color: #5c7692; }
    /* The register brand line already says "Kundenportal", so drop the eyebrow. */
    .auth[data-view="register"] .auth-eyebrow { display: none; }
}
@media (max-width: 560px) {
    /* Registration wizard: single-column fields on narrow screens. */
    .reg-grid { grid-template-columns: 1fr; }
}