:root {
	--color-accent: #177245;
	--color-accent-2: #0e7490;
	--color-on-accent: #ffffff;
	--color-danger: #dc2626;
	--surface-page: #f3f2ec;
	--surface-card: #ffffff;
	--surface-sunken: #f0efe7;
	--border: #dcdbd0;
	--text: #16150f;
	--text-muted: #71706a;

	--radius: 2px;
	--border-w: 1px;
	--accent-edge: 2px;
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 22px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
	background: var(--surface-page);
	color: var(--text);
	font-family: "Inter", system-ui, sans-serif;
	font-size: 14px;
}

#app.grid {
	display: grid;
	grid-template-columns: 1fr 392px;
	gap: var(--space-4);
	align-items: start;
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--space-4);
}

@media (max-width: 920px) {
	#app.grid { grid-template-columns: 1fr; }
}

.empty {
	color: var(--text-muted);
	text-align: center;
	padding: var(--space-5);
}

/* stream */
.stage {
	background: #000;
	border: var(--border-w) solid var(--border);
	border-top: var(--accent-edge) solid var(--color-accent);
	border-radius: var(--radius);
	overflow: hidden;
}
.stage .yt { aspect-ratio: 16 / 9; }
.stage iframe { width: 100%; height: 100%; border: 0; display: block; }
.stage-empty {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	color: #9aa3ad;
	font-family: "JetBrains Mono", monospace;
}

/* rail cards */
.rail { display: flex; flex-direction: column; gap: var(--space-4); }
.card {
	background: var(--surface-card);
	border: var(--border-w) solid var(--border);
	border-top: var(--accent-edge) solid var(--color-accent-2);
	border-radius: var(--radius);
	overflow: hidden;
}
.card .hd {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-3) var(--space-4);
	border-bottom: var(--border-w) solid var(--border);
}
.card .hd .t {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--text-muted);
}

/* poll */
.poll-card .q { font-size: 15px; font-weight: 700; margin: var(--space-3) var(--space-4) var(--space-2); }
.opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	border: var(--border-w) solid var(--border);
	background: var(--surface-sunken);
	border-radius: var(--radius);
	margin: 0 var(--space-4) var(--space-2);
	padding: var(--space-2) var(--space-3);
	overflow: hidden;
	cursor: pointer;
}
.opt.res { cursor: default; }
.opt .rk { width: 16px; height: 16px; border: 2px solid var(--text-muted); border-radius: var(--radius); flex: none; }
.opt.sel { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.opt.sel .rk { border-color: var(--color-accent); background: var(--color-accent); }
.opt .lab { font-size: 13.5px; }
.opt .pct { margin-left: auto; font-family: "JetBrains Mono", monospace; font-weight: 600; position: relative; }
.opt.res .fill {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--color-accent-2) 20%, transparent);
}
.pollfoot {
	padding: var(--space-3) var(--space-4);
	border-top: var(--border-w) solid var(--border);
	background: var(--surface-sunken);
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	color: var(--text-muted);
}

/* badges */
.badge {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 4px 9px;
	border-radius: var(--radius);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.badge.open { background: color-mix(in srgb, var(--color-accent-2) 14%, transparent); color: var(--color-accent-2); }
.badge.closed { background: color-mix(in srgb, var(--text-muted) 16%, transparent); color: var(--text-muted); }
.badge.draft { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }
.live-dot {
	width: 8px;
	height: 8px;
	border-radius: 1px;
	background: var(--color-danger);
	animation: pulse 1.8s infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6); }
	70% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0); }
	100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

/* chat */
.chat-card .stream { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); max-height: 320px; overflow: auto; }
.msg { display: flex; gap: var(--space-2); padding: 6px var(--space-1); font-size: 13.5px; }
.msg .nm { font-weight: 700; }
.chat-card .composer { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--border-w) solid var(--border); background: var(--surface-sunken); }
.chat-card .composer input { flex: 1; margin: 0; }

/* buttons + inputs */
.btn {
	font-family: "JetBrains Mono", monospace;
	font-weight: 700;
	font-size: 14px;
	background: var(--color-accent);
	color: var(--color-on-accent);
	border: none;
	border-radius: var(--radius);
	padding: 10px 16px;
	cursor: pointer;
}
.btn.ghost { background: var(--surface-sunken); border: var(--border-w) solid var(--border); color: var(--text); }
.btn.sm { padding: 8px 13px; font-size: 13px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }

label {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--text-muted);
	display: block;
	margin: var(--space-3) 0 var(--space-1);
}
input[type="text"], input[type="password"] {
	width: 100%;
	background: var(--surface-page);
	border: var(--border-w) solid var(--border);
	border-radius: var(--radius);
	padding: 10px 12px;
	font-family: "Inter", sans-serif;
	font-size: 14px;
	color: var(--text);
}
input[type="text"]:focus, input[type="password"]:focus { outline: none; border-color: var(--color-accent-2); }
input[type="text"] + input[type="text"] { margin-top: var(--space-2); }
.form-error { color: var(--color-danger); font-size: 13px; padding: 0 var(--space-4) var(--space-3); }

/* admin layout */
.admin-grid { max-width: 1240px; margin: 0 auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.admin-grid h1 { font-family: "JetBrains Mono", monospace; font-size: 22px; font-weight: 800; margin: 0; }
.apikey-card { background: var(--surface-card); border: var(--border-w) solid var(--border); border-top: var(--accent-edge) solid var(--color-accent-2); border-radius: var(--radius); padding: var(--space-3) var(--space-4); }
.adminsplit { display: grid; grid-template-columns: 1fr 392px; gap: var(--space-4); align-items: start; }
@media (max-width: 920px) { .adminsplit { grid-template-columns: 1fr; } }
.stream-form, .poll-form { padding: var(--space-3) var(--space-4); }
.prow { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: var(--border-w) solid var(--border); }
.prow:last-child { border-bottom: none; }
.prow .pq { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; }
.prow .pact { display: flex; gap: var(--space-2); }
.pollresults .opt { position: relative; display: flex; align-items: center; gap: var(--space-2); border: var(--border-w) solid var(--border); background: var(--surface-sunken); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); overflow: hidden; }
.pollresults .opt .fill { position: absolute; inset: 0; background: color-mix(in srgb, var(--color-accent-2) 20%, transparent); }
.pollresults .opt .lab, .pollresults .opt .pct { position: relative; }
.pollresults .opt .pct { margin-left: auto; font-family: "JetBrains Mono", monospace; font-weight: 600; }
#banner:not(:empty) { color: var(--color-danger); font-family: "JetBrains Mono", monospace; font-size: 13px; padding: var(--space-2) 0; }