:root {
    color-scheme: light;
    --font-sans: "Manrope", "Segoe UI", sans-serif;
    --font-display: "Syne", "Segoe UI", sans-serif;
    --ink: #121a22;
    --ink-soft: #3a4a58;
    --muted: #677887;
    --paper: #e8eef2;
    --surface: #f7fafb;
    --border: #cfd8df;
    --primary: #1a5f4a;
    --primary-hover: #144c3b;
    --focus: #2a8f70;
    --radius: 14px;
    --shadow: 0 1px 0 rgba(20, 33, 43, 0.04), 0 12px 32px rgba(20, 33, 43, 0.06);
    font-family: var(--font-sans);
    line-height: 1.5;
}
* { box-sizing: border-box; }
body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    background:
        radial-gradient(ellipse 80% 50% at 100% -10%, rgba(26, 95, 74, 0.08), transparent 55%),
        radial-gradient(ellipse 60% 40% at 0% 100%, rgba(20, 33, 43, 0.05), transparent 50%),
        var(--paper);
}
.auth-body { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.auth-gate { width: min(420px, 100%); }
.auth-card {
    display: flex; flex-direction: column; gap: 16px;
    padding: 32px 28px; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow);
}
.auth-card h1 {
    margin: 0; font-family: var(--font-display); font-size: 1.6rem;
    font-weight: 600; letter-spacing: -0.03em; line-height: 1.2;
}
.auth-card .muted { margin: 0; color: var(--ink-soft); }
.auth-brand {
    margin: 0; color: var(--primary); font-family: var(--font-display);
    font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em;
}
.button {
    display: inline-flex; align-items: center; justify-content: center;
    align-self: flex-start; margin-top: 8px; min-height: 46px; padding: 10px 20px;
    border: 1px solid transparent; border-radius: 12px; color: #fff;
    background: var(--primary); font: inherit; font-size: 0.95rem; font-weight: 600;
    text-decoration: none; cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}
.button:hover { background: var(--primary-hover); transform: translateY(-1px); }
.button:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }