/* Shared by the portal's new auth/admin pages only -- index.php keeps its
   own pre-existing inline <style> block untouched (see the top-level task
   note about not restyling the already-verified homepage). Same light
   palette as index.php so these feel like the same site. */
:root {
    --border: #ddd;
    --muted: #666;
    --accent: #2a6df4;
    --error: #c0392b;
    --success: #2e7d32;
    --bg: #fff;
    --text: #111;
}
* { box-sizing: border-box; }
body {
    font-family: system-ui, -apple-system, sans-serif;
    max-width: 480px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
}
h1 { font-size: 1.4rem; margin-bottom: 1rem; }
.card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
}
.error {
    color: var(--error);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.success { color: var(--success); font-size: 0.95rem; }
label { display: block; margin: 0.75rem 0 0.25rem; font-size: 0.85rem; color: var(--muted); }
input[type=email], input[type=text] {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
    color: var(--text);
    font: inherit;
}
button {
    margin-top: 1rem;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    cursor: pointer;
}
button.danger { background: var(--error); }
.back {
    display: inline-block;
    margin-bottom: 1.25rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.85rem;
}
.admin-wrap { max-width: 900px; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin-top: 1rem; }
th, td { border: 1px solid var(--border); padding: 0.4rem 0.5rem; text-align: center; }
th:first-child, td:first-child { text-align: left; white-space: nowrap; }
th { background: rgba(0,0,0,0.03); }
form.inline { display: inline; }
.tag-manage-row { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tag-manage-row label { margin: 0 0 0.25rem; }
.tag-manage-row > div { flex: 1; min-width: 140px; }
.tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.4rem 0.2rem 0.7rem;
    font-size: 0.8rem;
    margin: 0.15rem;
}
.tag-pill button {
    margin: 0;
    padding: 0.1rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 999px;
}
.game-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}
.game-list-item:last-of-type { border-bottom: none; }
.game-list-item form { display: inline; }
.game-list-item button { margin: 0; padding: 0.4rem 0.8rem; font-size: 0.85rem; }
/* Game<->tag assignment UI (admin/tags.php) -- one row per game, tags as
   wrapping toggle chips instead of a wide table, so it never needs
   horizontal scroll no matter how many tags exist. Chip look matches
   index.php's public filter chips (kept separately there, see file-top
   comment) so the two feel consistent without touching that file. */
.assign-list { margin-top: 1rem; }
.assign-row {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--border);
}
.assign-row:last-child { border-bottom: none; }
.assign-row-name { font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; }
.assign-row-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag-chip {
    font: inherit;
    font-size: 0.75rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
    color: inherit;
}
.tag-chip:hover { border-color: var(--muted); }
.tag-chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tag-chip:disabled { opacity: 0.6; cursor: default; }

@media (prefers-color-scheme: dark) {
    :root {
        --border: #333;
        --muted: #999;
        --bg: #111;
        --text: #eee;
    }
    th { background: rgba(255,255,255,0.05); }
}