/* ---------------------------------------------------------------------------
   Login and registration.

   Both pages carried their own inline stylesheet and neither loaded
   styles.css, which is where the site header's styles live — so the header
   rendered as a bare list of links above a page painted in a third palette
   (#1a73e8 on #1e1e1e). This file replaces both inline blocks and uses the
   same tokens as landing.css and dashboard.css.

   The :root block mirrors landing.css. It is duplicated rather than shared so
   these pages do not have to pull in 21 KB of landing styles; if these values
   change, change them there too.
   --------------------------------------------------------------------------- */

:root {
    --uv-bg-0:#07070c; --uv-bg-1:#0b0b12; --uv-bg-2:#11111a; --uv-bg-3:#161622;
    --uv-line:rgba(255,255,255,.08); --uv-line-2:rgba(255,255,255,.14);
    --uv-fg:#e9ecf3; --uv-fg-2:#c3c8d6; --uv-muted:#9098aa; --uv-dim:#6b7185;
    --uv-blue:#4f8cff; --uv-violet:#9b7bff; --uv-teal:#48d3c0;
    --uv-green:#3fd39a; --uv-amber:#ffb020; --uv-red:#ff5c74;
    --uv-grad:linear-gradient(135deg,#4f8cff 0%,#9b7bff 55%,#48d3c0 100%);
    --uv-r:14px;
    --uv-mono:'SFMono-Regular',ui-monospace,Menlo,Consolas,'Liberation Mono',monospace;
}

*, *::before, *::after { box-sizing:border-box; }
html { overflow-x:hidden; }

body.uv-auth {
    background:var(--uv-bg-0);
    color:var(--uv-fg);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    margin:0;
}

.uv-auth ::selection { background:rgba(79,140,255,.32); }

.auth-wrap { width:100%; max-width:1120px; margin:0 auto; padding:0 20px; }
.auth-main { flex:1; padding:40px 0 60px; }

/* ─────────── Layout ───────────
   The form is the reason anyone opens these pages, so it leads on desktop and
   stays first in the source for small screens and screen readers. */

.auth-grid {
    display:grid;
    grid-template-columns:minmax(0,380px) minmax(0,1fr);
    gap:34px;
    align-items:start;
}

.auth-grid.single { grid-template-columns:minmax(0,420px); justify-content:center; }

/* ─────────── The form card ─────────── */

.auth-card {
    background:var(--uv-bg-1);
    border:1px solid var(--uv-line);
    border-radius:var(--uv-r);
    padding:28px;
    position:sticky;
    top:90px;
}

.auth-card h1 {
    font-size:1.5rem;
    font-weight:700;
    letter-spacing:-.02em;
    margin:0 0 6px;
    color:var(--uv-fg);
}

.auth-card .lede {
    font-size:.9rem;
    color:var(--uv-muted);
    margin:0 0 22px;
    line-height:1.55;
}

.auth-field { margin-bottom:14px; }

.auth-field label {
    display:block;
    font-size:.79rem;
    font-weight:600;
    color:var(--uv-fg-2);
    margin-bottom:6px;
    letter-spacing:.01em;
}

.auth-field input {
    width:100%;
    background:var(--uv-bg-0);
    border:1px solid var(--uv-line-2);
    color:var(--uv-fg);
    padding:11px 14px;
    border-radius:10px;
    font-size:.95rem;
    transition:border-color .15s, box-shadow .15s;
}

.auth-field input::placeholder { color:var(--uv-dim); }

.auth-field input:focus {
    outline:none;
    border-color:var(--uv-blue);
    box-shadow:0 0 0 3px rgba(79,140,255,.16);
}

.auth-hint { font-size:.77rem; color:var(--uv-dim); margin-top:6px; line-height:1.5; }

.auth-btn {
    width:100%;
    background:var(--uv-grad);
    color:#fff;
    border:none;
    padding:12px 20px;
    border-radius:10px;
    font-weight:650;
    font-size:.96rem;
    cursor:pointer;
    margin-top:6px;
    transition:filter .15s;
}

.auth-btn:hover { filter:brightness(1.08); }
.auth-btn:disabled { opacity:.5; cursor:not-allowed; filter:none; }

.auth-links {
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--uv-line);
    font-size:.86rem;
    color:var(--uv-muted);
    text-align:center;
    line-height:1.9;
}

.auth-links a { color:var(--uv-blue); text-decoration:none; }
.auth-links a:hover { text-decoration:underline; }
.auth-links .sep { color:var(--uv-dim); margin:0 8px; }

.auth-guest {
    display:block;
    margin-top:12px;
    padding:10px 16px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--uv-line-2);
    border-radius:10px;
    color:var(--uv-fg-2);
    text-decoration:none;
    font-size:.87rem;
    text-align:center;
    transition:background .15s, color .15s;
}

.auth-guest:hover { background:rgba(255,255,255,.08); color:var(--uv-fg); }

.auth-error, .auth-ok {
    display:flex;
    align-items:flex-start;
    gap:9px;
    padding:11px 14px;
    border-radius:10px;
    font-size:.87rem;
    margin-bottom:16px;
    line-height:1.5;
}

.auth-error { background:rgba(255,92,116,.10); border:1px solid rgba(255,92,116,.30); color:#ffb3be; }
.auth-ok    { background:rgba(63,211,154,.10); border:1px solid rgba(63,211,154,.28); color:var(--uv-fg-2); }

/* ─────────── Supporting column ─────────── */

.auth-aside h2 {
    font-size:1.22rem;
    font-weight:700;
    letter-spacing:-.02em;
    margin:0 0 8px;
    color:var(--uv-fg);
}

.auth-aside > p.intro {
    font-size:.93rem;
    color:var(--uv-muted);
    line-height:1.65;
    margin:0 0 22px;
    max-width:62ch;
}

.feat-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
    margin-bottom:26px;
}

.feat {
    background:var(--uv-bg-1);
    border:1px solid var(--uv-line);
    border-radius:var(--uv-r);
    padding:16px 18px;
}

.feat i {
    color:var(--uv-blue);
    font-size:1rem;
    margin-bottom:9px;
    display:block;
}

.feat h3 { font-size:.92rem; font-weight:650; margin:0 0 5px; color:var(--uv-fg); }
.feat p  { font-size:.84rem; color:var(--uv-muted); margin:0; line-height:1.58; }

/* Claim list: each item is something the account actually does. */
.claims { list-style:none; padding:0; margin:0 0 26px; }

.claims li {
    position:relative;
    padding:0 0 0 26px;
    margin-bottom:10px;
    font-size:.89rem;
    color:var(--uv-fg-2);
    line-height:1.6;
}

.claims li::before {
    content:'\f00c';
    font-family:'Font Awesome 6 Free';
    font-weight:900;
    position:absolute;
    left:0; top:1px;
    color:var(--uv-green);
    font-size:.78rem;
}

.claims li.no::before { content:'\f00d'; color:var(--uv-dim); }
.claims li.no { color:var(--uv-muted); }

/* ─────────── Long-form content (register) ─────────── */

.auth-prose { margin-top:34px; }

.auth-prose h2 {
    font-size:1.16rem;
    font-weight:700;
    letter-spacing:-.02em;
    margin:34px 0 10px;
    color:var(--uv-fg);
}

.auth-prose h2:first-child { margin-top:0; }

.auth-prose p {
    font-size:.91rem;
    color:var(--uv-muted);
    line-height:1.7;
    margin:0 0 14px;
    max-width:70ch;
}

.auth-prose p strong { color:var(--uv-fg-2); font-weight:600; }
.auth-prose a { color:var(--uv-blue); text-decoration:none; }
.auth-prose a:hover { text-decoration:underline; }

/* ─────────── Steps ─────────── */

.steps { display:flex; flex-direction:column; gap:14px; margin:20px 0 10px; }

.step {
    display:flex;
    gap:14px;
    align-items:flex-start;
    background:var(--uv-bg-1);
    border:1px solid var(--uv-line);
    border-radius:var(--uv-r);
    padding:16px 18px;
}

.step .n {
    flex-shrink:0;
    width:26px; height:26px;
    border-radius:50%;
    background:rgba(79,140,255,.14);
    border:1px solid rgba(79,140,255,.3);
    color:var(--uv-blue);
    font-size:.8rem;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
}

.step h3 { font-size:.92rem; font-weight:650; margin:1px 0 5px; color:var(--uv-fg); }
.step p  { font-size:.85rem; color:var(--uv-muted); margin:0; line-height:1.6; max-width:none; }

/* ─────────── Comparison table ─────────── */

.cmp { overflow-x:auto; margin:18px 0 8px; -webkit-overflow-scrolling:touch; }

.cmp table {
    width:100%;
    border-collapse:collapse;
    min-width:480px;
    background:var(--uv-bg-1);
    border:1px solid var(--uv-line);
    border-radius:var(--uv-r);
    overflow:hidden;
}

.cmp th, .cmp td {
    padding:11px 15px;
    text-align:left;
    border-bottom:1px solid var(--uv-line);
    font-size:.87rem;
}

.cmp thead th {
    background:var(--uv-bg-2);
    color:var(--uv-fg-2);
    font-weight:650;
    font-size:.79rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    white-space:nowrap;
}

.cmp tbody tr:last-child td { border-bottom:none; }
.cmp td { color:var(--uv-fg-2); }
.cmp td:nth-child(2), .cmp td:nth-child(3),
.cmp th:nth-child(2), .cmp th:nth-child(3) { text-align:center; width:22%; }
.cmp .yes { color:var(--uv-green); }
.cmp .no  { color:var(--uv-dim); }
.cmp .note { color:var(--uv-muted); font-size:.8rem; }

/* ─────────── FAQ ─────────── */

.faq { margin-top:8px; }

.faq-item {
    background:var(--uv-bg-1);
    border:1px solid var(--uv-line);
    border-radius:var(--uv-r);
    padding:16px 18px;
    margin-bottom:10px;
}

.faq-item h3 { font-size:.92rem; font-weight:650; margin:0 0 6px; color:var(--uv-fg); }
.faq-item p  { font-size:.86rem; color:var(--uv-muted); margin:0; line-height:1.65; max-width:none; }

/* ─────────── Footer ─────────── */

.auth-foot {
    border-top:1px solid var(--uv-line);
    background:var(--uv-bg-1);
    padding:22px 0;
    margin-top:auto;
    text-align:center;
}

.auth-foot .fl {
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
    justify-content:center;
    font-size:.85rem;
    margin-bottom:9px;
}

.auth-foot a { color:var(--uv-muted); text-decoration:none; }
.auth-foot a:hover { color:var(--uv-blue); }
.auth-foot .byline { font-size:.79rem; color:var(--uv-dim); }
.auth-foot .byline a { color:inherit; text-decoration:underline; font-weight:600; }

/* ─────────── Responsive ─────────── */

@media (max-width:900px) {
    .auth-grid { grid-template-columns:minmax(0,1fr); gap:28px; }
    .auth-card { position:static; }
    .feat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:620px) {
    .auth-main { padding:26px 0 44px; }
    .feat-grid { grid-template-columns:minmax(0,1fr); }
    .auth-card { padding:22px 18px; }
    .auth-card h1 { font-size:1.32rem; }
}

@media (max-width:480px) {
    .auth-wrap { padding:0 14px; }
    .step { padding:14px 15px; }
}

@media (prefers-reduced-motion:reduce) {
    *, *::before, *::after { transition:none !important; animation:none !important; }
}