:root {
    --bg: #14091f;
    --bg-2: #1f1030;
    --card: #2a1840;
    --border: #3d2659;
    --text: #f6efe6;
    --muted: #b8a7c9;
    --accent: #ff7a1a;
    --accent-2: #ffb347;
    --accent-ink: #1a0b00;
    --ok: #7be38f;
    --warn: #ffcf5c;
    --danger: #ff5c6c;
    --radius: 14px;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
    background: radial-gradient(1200px 600px at 50% -200px, #3a1a52 0%, var(--bg) 60%) fixed, var(--bg);
    color: var(--text);
    font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    min-height: 100vh;
}

a { color: var(--accent-2); }
code { font-size: .9em; }

.site-header {
    padding: 16px;
    text-align: center;
}
.brand {
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .02em;
    font-size: 1.1rem;
}

.container {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 16px 48px;
}
body.admin .container { max-width: 960px; }

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px 20px;
    margin-bottom: 16px;
    box-shadow: 0 10px 30px rgb(0 0 0 / .25);
}
.card.narrow { max-width: 380px; margin-inline: auto; }
.center { text-align: center; }

h1 { font-size: 1.6rem; line-height: 1.2; margin: 0 0 8px; }
h2 { font-size: 1.2rem; margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.error { color: var(--danger); display: block; margin-top: 6px; font-size: .9rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.big-emoji { font-size: 64px; line-height: 1; margin-bottom: 12px; }
.float { animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .float { animation: none; } }

form { margin: 0; }
label { display: block; margin-bottom: 6px; font-weight: 600; }

input[type=text], input[type=password], input:not([type]), select {
    width: 100%;
    padding: 14px 16px;
    font-size: 1.1rem;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

#vote-form, .card.narrow form { display: grid; gap: 12px; margin-top: 16px; }

.btn {
    display: inline-block;
    padding: 14px 20px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-ink);
    background: linear-gradient(180deg, var(--accent-2), var(--accent));
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    text-decoration: none;
}
.btn:disabled { opacity: .6; cursor: progress; }
.btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.small { padding: 8px 12px; font-size: .9rem; }
.card .btn.secondary { margin-top: 8px; }

button.link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--accent-2);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
}
button.link.danger { color: var(--danger); }
.inline { display: inline; }

.your-vote { color: var(--accent-2); }

/* Results */
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .8rem; color: var(--accent-2); margin: 0 0 8px; }
.winner { border-color: var(--accent); }
.winner-name { font-size: clamp(1.8rem, 7vw, 2.8rem); color: var(--accent-2); }
.podium { list-style: none; padding: 0; margin: 0; }
.podium li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.podium li:last-child { border-bottom: 0; }
.podium .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.podium .count, .tally-row .count { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Admin */
.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.admin-nav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.admin-nav a.active { color: var(--accent-2); }
.admin-nav form { margin-left: auto; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.stat {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
}
.stat-value { display: block; font-size: 1.6rem; font-weight: 800; }
.stat-value.ok { color: var(--ok); }
.stat-value.warn { color: var(--warn); }
.stat-label { color: var(--muted); font-size: .85rem; }

.controls { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }

.flash {
    background: var(--bg-2);
    border-left: 4px solid var(--ok);
    padding: 10px 14px;
    border-radius: 6px;
}

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { color: var(--muted); font-weight: 600; font-size: .85rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.grouped td { background: rgb(255 122 26 / .06); }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgb(255 122 26 / .18);
    color: var(--accent-2);
    font-size: .85rem;
    font-weight: 600;
}
td.ua { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.action-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.action-bar select, .action-bar input { width: auto; flex: 1 1 180px; font-size: 1rem; padding: 10px 12px; }

.rename-row { display: flex; gap: 8px; margin-bottom: 8px; }
.rename-row input { font-size: 1rem; padding: 8px 12px; }

.tally-row { border-bottom: 1px solid var(--border); }
.tally-row summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    cursor: pointer;
    list-style: none;
}
.tally-row summary::-webkit-details-marker { display: none; }
.tally-row .rank { width: 1.5em; color: var(--muted); font-variant-numeric: tabular-nums; }
.tally-row .name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.tally-row .bar { flex: 0 1 30%; height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.tally-row .bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.tally-row[open] summary { color: var(--accent-2); }

.qr { width: min(360px, 80vw); height: auto; background: #fff; padding: 12px; border-radius: 12px; margin: 16px auto; display: block; }
.qr-url { font-size: 1.2rem; font-weight: 700; overflow-wrap: anywhere; }

@media (max-width: 520px) {
    .stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .stat { padding: 12px 6px; }
    .stat-value { font-size: 1.2rem; }
    .tally-row .bar { display: none; }
}

@media print {
    body { background: #fff; color: #000; }
    .no-print, .site-header { display: none !important; }
    .card { box-shadow: none; border: 0; background: #fff; }
    .qr { width: 70%; }
}

.danger-zone { border-color: rgb(255 92 108 / .5); }
.danger-zone summary { cursor: pointer; list-style: none; }
.danger-zone summary::-webkit-details-marker { display: none; }
.danger-zone summary h2 { display: inline; margin: 0; color: var(--danger); font-size: 1.05rem; }
.danger-zone summary h2::before { content: "▸ "; }
.danger-zone[open] summary h2::before { content: "▾ "; }
.danger-zone[open] summary { margin-bottom: 8px; }
.danger-zone .btn:disabled { opacity: .4; cursor: not-allowed; }