:root {
    --color-bg: #0f1115;
    --color-surface: #171a21;
    --color-border: #2a2f3a;
    --color-text: #e6e8eb;
    --color-text-muted: #9aa1ac;
    --color-accent: #4f8cff;
    --color-error: #ff6b6b;
    --color-success: #3ecf8e;
    --color-warning: #f0b429;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --radius: 8px;

    /* Rarity colors — fixed to the 10 catalog slugs, not DB-driven (purely
       cosmetic, and the slugs are stable). Lives here, not dashboard.css,
       so pages outside the dashboard shell (landing, login) can use them
       too — e.g. the landing page's card showcase glow. */
    --rarity-common: #9aa1ac;
    --rarity-uncommon: #3ecf8e;
    --rarity-rare: #4f8cff;
    --rarity-super-rare: #a78bfa;
    --rarity-epic: #f472b6;
    --rarity-mythic: #fb923c;
    --rarity-legendary: #f0b429;
    --rarity-divine: #f5f5f5;
    --rarity-ancestral: #ef4444;
    --rarity-cosmic: #7dd3fc;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.page {
    max-width: 420px;
    margin: 10vh auto 0;
    padding: 0 var(--space-3);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
}

h1 {
    font-size: 1.25rem;
    margin: 0 0 var(--space-4);
}

form p {
    margin: 0 0 var(--space-3);
}

label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

input,
textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: 1rem;
    font-family: inherit;
}

textarea {
    resize: vertical;
}

input:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-accent);
}

button {
    width: 100%;
    padding: 0.7rem;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
}

.errorlist {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-2);
    color: var(--color-error);
    font-size: 0.875rem;
}

.messages {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-3);
}

.message {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    margin-bottom: var(--space-2);
}

.message--success {
    background: rgba(62, 207, 142, 0.12);
    color: var(--color-success);
}

.message--error {
    background: rgba(255, 107, 107, 0.12);
    color: var(--color-error);
}

.footer-link {
    margin-top: var(--space-3);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.footer-link a {
    color: var(--color-accent);
}

.banner {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    font-size: 0.875rem;
}

.banner--warning {
    background: rgba(240, 180, 41, 0.12);
    color: var(--color-warning);
}

.banner-form {
    display: inline;
    margin-left: var(--space-2);
}

.link-button {
    width: auto;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-accent);
    font-size: inherit;
    text-decoration: underline;
}