:root {
    /* Light-mode design tokens for the login card/page. */
    --page-bg: #f3f6fb;
    --panel-bg: #ffffff;
    --panel-border: #d9e2ee;
    --text-main: #1d2733;
    --text-muted: #5d6b7a;
}

body[data-theme="dark"] {
    /* Dark-mode overrides used when data-theme="dark" is applied. */
    --page-bg: #0f1722;
    --panel-bg: #182334;
    --panel-border: #314257;
    --text-main: #edf3ff;
    --text-muted: #b3c0d3;
}

body {
    background: radial-gradient(circle at top left, #d8e6ff 0%, var(--page-bg) 45%);
    color: var(--text-main);
    transition: background-color 0.2s ease, color 0.2s ease;
}

body[data-theme="dark"] {
    background: radial-gradient(circle at top left, #1f3552 0%, var(--page-bg) 45%);
}

.login-card {
    /* Fixed-width auth card keeps layout stable across device widths. */
    width: 360px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    color: var(--text-main);
}

.form-check-input {
    cursor: pointer;
}

.form-check-label {
    color: var(--text-main);
}

.help-text {
    color: var(--text-muted);
    font-size: 0.85rem;
}