:root {
	--ink: #f4f2eb;
	--muted: #999b96;
	--canvas: #08090a;
	--surface: #111315;
	--line: #2a2d2e;
	--red: #e52b20;
}

html, body {
	margin: 0;
	min-width: 320px;
	min-height: 100%;
	background: var(--canvas);
	color: var(--ink);
	font-family: "Avenir Next", "Helvetica Neue", sans-serif;
}

body {
	background-image: linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px), linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px);
	background-size: 40px 40px;
}

button, a { font: inherit; }
.broadcast-page { min-height: 100vh; padding: clamp(0px, 2vw, 28px); }
.broadcast-shell { width: min(100%, 1440px); margin: 0 auto; background: var(--surface); box-shadow: 0 24px 80px rgb(0 0 0 / 45%); }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 15px clamp(16px, 2.5vw, 32px); border: 1px solid var(--line); background: #111315; }
.stream-heading { min-width: 0; }
.brand-row { display: flex; align-items: center; gap: 12px; }
.brand { font-size: clamp(20px, 2.6vw, 28px); font-style: italic; font-weight: 900; letter-spacing: -.06em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.stream-description { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.discord-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid #5865f2; border-radius: 2px; background: transparent; color: #dfe1ff; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.discord-link:hover { background: #5865f2; color: #fff; }
.stream-meta { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.status-group { display: grid; gap: 3px; justify-items: end; }
.status-badge { border-radius: 2px !important; text-transform: uppercase; letter-spacing: .08em; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-detail { color: var(--muted); font-size: 10px; white-space: nowrap; }
.telemetry-item { display: grid; gap: 3px; padding-left: 12px; border-left: 1px solid var(--line); }
.telemetry-item strong { font-size: 12px; white-space: nowrap; }
.telemetry-label { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: .14em; }

.player-shell { position: relative; background: #000; }
.player-topline { display: flex; justify-content: space-between; padding: 8px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
video { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; }
.connection-notice { position: absolute; inset: 37px 0 0; display: grid; place-content: center; gap: 13px; padding: 20px; background: rgb(0 0 0 / 86%); color: var(--ink); font-size: 11px; font-weight: 800; letter-spacing: .15em; text-align: center; text-transform: uppercase; pointer-events: none; }
.connection-notice small { color: var(--muted); font-size: 11px; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.connection-icon { justify-self: center; width: 28px; height: 28px; color: var(--muted); }
.connection-notice.is-offline { background: rgb(0 0 0 / 92%); }
.connection-notice.is-offline .connection-icon { color: var(--red); }
.connection-spinner { justify-self: center; width: 24px; height: 24px; border: 2px solid rgb(244 242 235 / 25%); border-top-color: var(--red); border-radius: 50%; animation: spin .85s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
	.broadcast-page { padding: 0; }
	.topbar { align-items: flex-start; flex-direction: column; gap: 14px; }
	.stream-meta { width: 100%; justify-content: flex-start; }
	.status-group { justify-items: start; }
	.telemetry-item { display: none; }
	.player-topline { font-size: 8px; }
}

.admin-page { min-height: 100vh; padding: clamp(18px, 4vw, 56px); color: var(--ink); }
.admin-login { width: min(100%, 380px); margin: 12vh auto 0; padding: 32px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 80px rgb(0 0 0 / 35%); }
.admin-login-mark { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 24px; border: 1px solid var(--line); color: var(--red); }
.admin-login-mark svg { width: 19px; }
.admin-kicker, .admin-label { margin: 0; color: var(--red); font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.admin-login h1, .admin-header h1 { margin: 8px 0 0; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.05em; }
.admin-muted { color: var(--muted); font-size: 12px; }
.admin-login-form { display: grid; gap: 12px; margin-top: 24px; }
.admin-error { margin: 0; color: #f58d86; font-size: 12px; }
.admin-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 24px; color: var(--muted); font-size: 12px; text-decoration: none; }
.admin-back:hover { color: var(--ink); }
.admin-shell { width: min(100%, 1180px); margin: 0 auto; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 24px 80px rgb(0 0 0 / 35%); }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.admin-header-actions { display: flex; gap: 6px; }
.admin-content { padding: 28px; }
.admin-status-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.admin-state-line { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 13px; }
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.admin-card { min-height: 150px; }
.admin-card-muted { opacity: .62; }
.admin-card-heading { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-card-heading svg { width: 16px; color: var(--red); }
.admin-live-badge { margin-left: auto; }
.admin-metric { display: block; margin-top: 12px; font-size: 25px; letter-spacing: -.04em; }
.admin-card-meta { display: block; margin-top: 7px; color: var(--muted); font-size: 11px; }
.admin-card-wide { grid-column: span 2; }
.admin-settings-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.admin-settings-form > :nth-child(3) { grid-column: span 2; }
.admin-success { color: #74d69a; font-size: 12px; }
.admin-quality-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: center; }
.quality-history { display: grid; gap: 5px; max-height: 150px; overflow: auto; font: 11px ui-monospace, SFMono-Regular, Menlo, monospace; }
.quality-history-row { display: grid; grid-template-columns: 1.2fr .7fr 1fr 1fr; gap: 12px; color: var(--muted); }
.quality-history-row strong { color: var(--ink); }
.admin-quality-grid .admin-metric { margin-top: 0; }
.admin-logs-card { margin-top: 12px; }
.admin-log-output { max-height: 240px; margin: 0; overflow: auto; color: var(--muted); font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; }
.bitrate-readout { display: flex; gap: 28px; margin-bottom: 14px; }
.bitrate-readout div { display: grid; gap: 3px; }
.bitrate-readout strong { font-size: 28px; letter-spacing: -.05em; }
.bitrate-readout span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.bitrate-chart { display: block; width: 100%; height: 150px; overflow: visible; background: repeating-linear-gradient(to bottom, transparent 0 36px, rgb(255 255 255 / 6%) 37px); }
.chart-line { fill: none; stroke-width: 3; vector-effect: non-scaling-stroke; }
.chart-inbound { stroke: var(--red); }
.chart-outbound { stroke: #d8ef28; }
.chart-legend { display: flex; gap: 14px; margin-top: 8px; color: var(--muted); font-size: 10px; }
.legend-inbound::before, .legend-outbound::before { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; content: ""; }
.legend-inbound::before { background: var(--red); }
.legend-outbound::before { background: #d8ef28; }

@media (max-width: 760px) {
	.admin-page { padding: 0; }
	.admin-login { margin: 0; min-height: 100vh; width: auto; border-width: 0 1px; box-shadow: none; }
	.admin-header, .admin-content { padding: 20px; }
	.admin-status-row { align-items: flex-start; flex-direction: column; }
	.admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.admin-card-wide { grid-column: span 2; }
	.admin-quality-grid { grid-template-columns: 1fr 1fr; }
	.admin-settings-form { grid-template-columns: 1fr; }
	.admin-settings-form > :nth-child(3) { grid-column: auto; }
}