:root {
	color-scheme: dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: #080d12;
	color: #f3f6f8;
	--background: #080d12;
	--panel: #10171e;
	--panel-soft: #151e27;
	--border: #263442;
	--muted: #93a1af;
	--green: #55e6ad;
	--green-dark: #153b30;
	--cyan: #39c7e8;
	--amber: #ffc857;
	--red: #ff6687;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--background); }
body { min-width: 320px; }

button, input { font: inherit; }
button, input { min-height: 44px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }

.shell { width: min(1500px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 64px; }
.hidden { display: none !important; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: .77rem; font-weight: 850;
	letter-spacing: .18em; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.04em; }
h2 { margin: 0; font-size: 1.35rem; }
.subtitle { margin: 8px 0 0; color: var(--muted); }

.brand-header, .login-card, .tabs, .view { border: 1px solid var(--border); border-radius: 20px;
	background: var(--panel); }
.brand-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
	padding: 26px 28px; }
.header-meta { display: flex; align-items: center; gap: 12px; }
.version { color: var(--muted); font-variant-numeric: tabular-nums; }

.status-chip { display: inline-flex; align-items: center; justify-content: center; min-height: 32px;
	padding: 5px 12px; border: 1px solid currentColor; border-radius: 999px; font-size: .75rem;
	font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.status-chip.healthy { color: var(--green); background: color-mix(in srgb, var(--green-dark) 65%, transparent); }
.status-chip.degraded { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, transparent); }
.status-chip.failed { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.status-chip.neutral { color: var(--muted); background: #121922; }

.login-card { width: min(620px, 100%); margin: 40px auto 0; padding: 30px; }
.login-card > p { color: var(--muted); }
form, label { display: grid; gap: 8px; }
form { gap: 18px; }
label { color: var(--muted); font-weight: 700; }
input { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 10px 13px;
	background: #0a1118; color: #f3f6f8; }
input:focus { outline: 2px solid color-mix(in srgb, var(--green) 70%, transparent); outline-offset: 1px; }
.form-actions, .channel-actions, .copy-row, .section-heading { display: flex; align-items: center; gap: 10px; }
.message { color: var(--red); min-height: 1.25em; }

button { border: 1px solid transparent; border-radius: 11px; padding: 9px 15px; font-weight: 800; color: #07100d; }
button.primary { background: var(--green); }
button.secondary { background: #1c2935; border-color: #34485b; color: #eaf1f5; }
button.danger { background: #49202d; border-color: #713244; color: #ffb5c4; }

.tabs { display: flex; gap: 8px; margin-top: 24px; padding: 8px; overflow-x: auto; }
.tab { flex: 0 0 auto; background: transparent; color: var(--muted); }
.tab.active { background: var(--green); color: #07100d; }
.push-right { margin-left: auto; }
.view { margin-top: 20px; padding: 24px; }

.summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.summary-card { display: grid; gap: 7px; min-width: 0; padding: 18px; border: 1px solid var(--border);
	border-radius: 15px; background: var(--panel-soft); }
.summary-card span { color: var(--muted); }
.summary-card strong { font-size: 1.35rem; }

.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.channel-card { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 17px;
	background: #0c131a; }
.card-heading, .card-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step { color: var(--muted); font-size: 1.35rem; font-weight: 900; }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.metric { padding: 12px; border-radius: 11px; background: var(--panel-soft); }
.metric span { display: block; color: var(--muted); font-size: .78rem; }
.metric strong { display: block; margin-top: 4px; }
.source-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; }
.channel-card > label { margin-top: 16px; }
.copy-row input { min-width: 0; }
.channel-actions { flex-wrap: wrap; margin-top: 16px; }
.preview-frame { margin-top: 18px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px;
	background: #030608; aspect-ratio: 16 / 9; }
.channel-preview { width: 100%; height: 100%; object-fit: contain; }
.channel-message { margin: 10px 0 0; }
.section-heading { justify-content: space-between; margin-bottom: 18px; }
.logs-list { display: grid; gap: 10px; }
.log-entry { display: grid; grid-template-columns: 150px 90px minmax(0, 1fr); gap: 12px;
	padding: 14px; border: 1px solid var(--border); border-radius: 12px; }

@media (max-width: 1000px) {
	.channel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.shell { width: min(100% - 20px, 1500px); padding-top: 10px; }
	.brand-header { align-items: flex-start; padding: 20px; }
	.header-meta { flex-direction: column; align-items: flex-end; }
	.view { padding: 14px; }
	.summary-grid { grid-template-columns: 1fr; }
	.channel-card { padding: 16px; }
	.source-editor { grid-template-columns: 1fr; }
	.source-editor button { width: 100%; }
	.copy-row { align-items: stretch; flex-direction: column; }
	.copy-row button { width: 100%; }
	.log-entry { grid-template-columns: 1fr; }
}