:root {
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bg-page: #f2f3f5;
    --bg-surface: #ffffff;
    --text-primary: #2c3035;
    --text-secondary: #555b61;
    --text-muted: #868d94;
    --border-color: #e1e4e8;
    --border-strong: #cdd2d8;
    --accent: #5b7083;
    --accent-hover: #44535f;
    --accent-soft: #eef1f4;
    --link: #3f6079;
    --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-btn: 0 1px 2px rgba(15, 23, 42, 0.08);
    --radius-md: 8px;
    --radius: var(--radius-md);
    --control-h: 36px;
}

@media (prefers-color-scheme: dark) {
    [data-theme="auto"] {
        --bg-page: #15171a;
        --bg-surface: #1e2125;
        --text-primary: #e3e6e9;
        --text-secondary: #b3b9bf;
        --text-muted: #828a91;
        --border-color: #2e333a;
        --border-strong: #3a4048;
        --accent: #7e95a8;
        --accent-hover: #98abbb;
        --accent-soft: #262b31;
        --link: #8fb0c9;
        --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.5);
        --shadow-btn: 0 1px 2px rgba(0, 0, 0, 0.35);
    }
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
    background: var(--bg-page);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { color: var(--text-primary); font-weight: 600; line-height: 1.25; }

.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-width: 380px;
    padding: 28px;
}
.auth-card .error-code {
    text-align: center;
    margin-bottom: 4px;
    color: var(--text-muted);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
}
.auth-card h1 { text-align: center; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--text-muted); margin-bottom: 20px; }
.auth-card .sub:last-child { margin-bottom: 0; }

.field { margin-bottom: 16px; }
.field > label { display: block; font-weight: 600; color: var(--text-primary); margin-bottom: 5px; }
input[type=password] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .9rem;
    font-family: inherit;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    border: 1px solid var(--border-strong);
    background: var(--bg-surface);
    color: var(--text-primary);
    min-height: var(--control-h);
    padding: 0 16px;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: var(--shadow-btn);
}
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}
.btn-block { width: 100%; }