/* EarnIsland dashboard — user surface.
   A focused, dark-first control panel: hairline borders, one teal accent used
   sparingly, monospace for machine values, tight-but-breathing spacing. Light
   theme is a first-class peer (prefers-color-scheme + a persisted [data-theme]
   override). System font stack only — no web fonts, no CDN. */

/* ------------------------------------------------------------------ tokens */

:root {
	/* dark (default) */
	--bg: #0d1014;
	--surface: #151a20;
	--raised: #1c222b;
	--border: #232a34;
	--border-strong: #2c3542;
	--text: #e6eaef;
	--muted: #9aa4b2;
	--faint: #6b7280;
	--accent: #2dd4bf;
	--accent-ink: #0d1014;
	--accent-soft: rgba(45, 212, 191, 0.12);
	--accent-line: rgba(45, 212, 191, 0.35);
	--positive: #34d399;
	--warn: #fbbf24;
	--danger: #f87171;
	--danger-soft: rgba(248, 113, 113, 0.12);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-pop: 0 8px 30px rgba(0, 0, 0, 0.5);

	--r-card: 8px;
	--r-ctl: 6px;

	--s1: 4px;
	--s2: 8px;
	--s3: 12px;
	--s4: 16px;
	--s6: 24px;
	--s8: 32px;

	--sidebar-w: 220px;
	--content-max: 1080px;

	--sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
	:root {
		--bg: #f6f7f9;
		--surface: #ffffff;
		--raised: #ffffff;
		--border: #e4e8ee;
		--border-strong: #d3d9e1;
		--text: #17202a;
		--muted: #5b6675;
		--faint: #8b95a3;
		--accent: #0d9488;
		--accent-ink: #ffffff;
		--accent-soft: rgba(13, 148, 136, 0.10);
		--accent-line: rgba(13, 148, 136, 0.30);
		--positive: #059669;
		--warn: #b45309;
		--danger: #dc2626;
		--danger-soft: rgba(220, 38, 38, 0.08);
		--shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
		--shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
	}
}

/* explicit override wins over the media query, both directions */
:root[data-theme="dark"] {
	--bg: #0d1014;
	--surface: #151a20;
	--raised: #1c222b;
	--border: #232a34;
	--border-strong: #2c3542;
	--text: #e6eaef;
	--muted: #9aa4b2;
	--faint: #6b7280;
	--accent: #2dd4bf;
	--accent-ink: #0d1014;
	--accent-soft: rgba(45, 212, 191, 0.12);
	--accent-line: rgba(45, 212, 191, 0.35);
	--positive: #34d399;
	--warn: #fbbf24;
	--danger: #f87171;
	--danger-soft: rgba(248, 113, 113, 0.12);
	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-pop: 0 8px 30px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
	--bg: #f6f7f9;
	--surface: #ffffff;
	--raised: #ffffff;
	--border: #e4e8ee;
	--border-strong: #d3d9e1;
	--text: #17202a;
	--muted: #5b6675;
	--faint: #8b95a3;
	--accent: #0d9488;
	--accent-ink: #ffffff;
	--accent-soft: rgba(13, 148, 136, 0.10);
	--accent-line: rgba(13, 148, 136, 0.30);
	--positive: #059669;
	--warn: #b45309;
	--danger: #dc2626;
	--danger-soft: rgba(220, 38, 38, 0.08);
	--shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* ------------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
table { border-collapse: collapse; width: 100%; }

.mono { font-family: var(--mono); font-size: 0.92em; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.up { color: var(--positive); }
.down { color: var(--accent); }

/* icons: inherit color via currentColor; sized in-context */
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
	stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------------ app shell */

.app {
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	min-height: 100vh;
}

/* --- sidebar --- */

.sidebar {
	position: sticky;
	top: 0;
	align-self: start;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	padding: var(--s4) var(--s3);
	border-right: 1px solid var(--border);
	background: var(--surface);
}

.brand {
	display: flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s2) var(--s2) var(--s4);
}
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-name {
	font-size: 15px;
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--text);
}

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
	display: flex;
	align-items: center;
	gap: var(--s3);
	padding: 8px 10px;
	border: 0;
	border-radius: var(--r-ctl);
	background: transparent;
	color: var(--muted);
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.12s, background 0.12s;
}
.nav-item:hover { color: var(--text); background: var(--raised); }
.nav-item .ic { width: 17px; height: 17px; color: var(--faint); transition: color 0.12s; }
.nav-item:hover .ic { color: var(--muted); }
.nav-item[aria-current="page"] {
	color: var(--text);
	background: var(--accent-soft);
	box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item[aria-current="page"] .ic { color: var(--accent); }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); }

.theme-toggle {
	display: flex;
	align-items: center;
	gap: var(--s2);
	padding: 7px 10px;
	border: 0;
	border-radius: var(--r-ctl);
	background: transparent;
	color: var(--muted);
	font-size: 12.5px;
	cursor: pointer;
}
.theme-toggle:hover { color: var(--text); background: var(--raised); }
.theme-toggle .ic { width: 15px; height: 15px; }

.whoami {
	display: flex;
	align-items: center;
	gap: var(--s2);
	padding: var(--s2);
	border-top: 1px solid var(--border);
}
.whoami-avatar {
	width: 26px; height: 26px; flex: none;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--raised);
	color: var(--muted);
	border: 1px solid var(--border);
}
.whoami-avatar .ic { width: 14px; height: 14px; }
.whoami-email {
	flex: 1;
	min-width: 0;
	font-size: 12px;
	color: var(--muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.whoami-out {
	flex: none;
	display: grid; place-items: center;
	width: 28px; height: 28px;
	border: 0; border-radius: var(--r-ctl);
	background: transparent;
	color: var(--faint);
	cursor: pointer;
}
.whoami-out:hover { color: var(--danger); background: var(--danger-soft); }

/* --- main column --- */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s4);
	padding: var(--s4) var(--s6);
	border-bottom: 1px solid var(--border);
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: saturate(1.4) blur(8px);
}
.page-title { font-size: 19px; font-weight: 640; letter-spacing: -0.02em; }
.page-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: var(--s3); }

.livepill {
	display: inline-flex;
	align-items: center;
	gap: var(--s2);
	padding: 5px 11px 5px 9px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface);
	font-size: 12px;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.livepill-label { color: var(--muted); }

.content {
	width: 100%;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: var(--s6);
	display: flex;
	flex-direction: column;
	gap: var(--s4);
}

/* ------------------------------------------------------------------ dots */

.dot {
	width: 8px; height: 8px; flex: none;
	border-radius: 50%;
	background: var(--faint);
	position: relative;
}
.dot[data-status="online"], .dot[data-status="ok"] { background: var(--positive); }
.dot[data-status="offline"], .dot[data-status="down"] { background: var(--danger); }
.dot[data-status="pending"], .dot[data-status="unknown"] { background: var(--warn); }
.dot[data-status="online"]::after, .dot[data-status="ok"]::after {
	content: ""; position: absolute; inset: -3px;
	border-radius: 50%;
	border: 1px solid var(--positive);
	opacity: 0.5;
	animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
	0% { transform: scale(0.6); opacity: 0.6; }
	100% { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.dot::after { animation: none; }
}

.status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }

/* ------------------------------------------------------------------ cards */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: var(--s4);
	box-shadow: var(--shadow);
}
.card-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--s3);
	margin-bottom: var(--s3);
}
.card-title {
	display: inline-flex; align-items: center; gap: var(--s2);
	font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
.card-title .ic { width: 15px; height: 15px; color: var(--muted); }
.card-hint { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

/* ------------------------------------------------------------------ stat cards */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--s4);
}
.stat {
	position: relative;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: var(--s4);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.stat-label {
	display: flex; align-items: center; gap: 7px;
	font-size: 12px; color: var(--muted); font-weight: 500;
}
.stat-label .ic { width: 14px; height: 14px; color: var(--faint); }
.stat-value {
	margin-top: var(--s3);
	font-size: 27px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.stat-value .stat-unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.stat-value-sm { font-size: 18px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stat-sub { margin-top: 8px; font-size: 11.5px; color: var(--faint); }

/* a stat card that is itself a link (Overview earnings -> Earnings page) */
.stat-link { display: block; text-decoration: none; color: inherit; transition: border-color 0.12s, background 0.12s; }
.stat-link:hover { border-color: var(--accent-line); background: var(--raised); }
.stat-sub .up, .stat-sub .down { font-weight: 600; }
.stat-spark { margin-top: var(--s3); height: 30px; }
.stat-spark svg { width: 100%; height: 100%; overflow: visible; }
.spark-line { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spark-area { fill: var(--accent-soft); stroke: none; }

.throughput-split { display: flex; align-items: baseline; gap: var(--s4); margin-top: var(--s3); }
.throughput-split .tp { display: flex; flex-direction: column; gap: 2px; }
.throughput-split .tp-k { font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 4px; }
.throughput-split .tp-v { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.throughput-split .tp-u { font-size: 11px; font-weight: 500; color: var(--muted); margin-left: 3px; }

/* ------------------------------------------------------------------ big chart */

.chart { height: 260px; }
.chart-svg { width: 100%; height: 100%; overflow: visible; }
.chart-grid line { stroke: var(--border); stroke-width: 1; }
.chart-area { fill: url(#tp-fill); stroke: none; }
.chart-area.earn-area { fill: url(#earn-fill); }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-line.up-line { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart-ticks { display: flex; justify-content: space-between; margin-top: 6px;
	font-family: var(--mono); font-size: 10px; color: var(--faint); }
.chart-dot { fill: var(--accent); }
.chart-empty {
	height: 100%;
	display: grid; place-items: center;
	color: var(--faint); font-size: 13px;
}
.chart-legend { display: flex; gap: var(--s4); font-size: 11.5px; color: var(--muted); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; background: var(--accent); }
.legend-swatch.up-line { background: none; height: 0; border-top: 2px dashed var(--muted); }

/* ------------------------------------------------------------------ tables */

.table-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--s4)) calc(-1 * var(--s4)); }
.table { font-size: 13px; }
.table thead th {
	position: sticky; top: 0;
	text-align: left;
	padding: 8px var(--s4);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--faint);
	border-bottom: 1px solid var(--border);
	background: var(--surface);
	white-space: nowrap;
}
.table tbody td {
	padding: 11px var(--s4);
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
	white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--raised); }
.col-name { font-weight: 550; }
.table td.col-mono { color: var(--muted); }
.table .row-action {
	display: inline-grid; place-items: center;
	width: 28px; height: 28px;
	border: 0; border-radius: var(--r-ctl);
	background: transparent; color: var(--faint); cursor: pointer;
}
.table .row-action:hover { color: var(--danger); background: var(--danger-soft); }
.table td.td-num { text-align: right; font-variant-numeric: tabular-nums; }
.table thead th.td-num { text-align: right; }

/* ------------------------------------------------------------------ buttons */

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: var(--r-ctl);
	font-size: 13px; font-weight: 550;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}
.btn .ic { width: 15px; height: 15px; }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); }
.btn-ghost { background: var(--raised); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover:not(:disabled) { border-color: var(--faint); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--border-strong); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); border-color: var(--danger); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-block { width: 100%; }

.link-btn {
	border: 0; background: transparent; padding: 0;
	color: var(--accent); font-size: 12.5px; font-weight: 550; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ pills, chips, toggles */

.pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 9px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 11px; font-weight: 550;
	color: var(--muted);
	background: var(--raised);
}
.pill[data-on="true"] { color: var(--positive); border-color: color-mix(in srgb, var(--positive) 40%, transparent); background: color-mix(in srgb, var(--positive) 12%, transparent); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
	padding: 7px 13px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-ctl);
	background: var(--raised);
	color: var(--muted);
	font-size: 13px; font-weight: 550;
	cursor: pointer;
	transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.chip:hover { color: var(--text); border-color: var(--faint); }
.chip[aria-pressed="true"] {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--accent-soft);
}

.toggle {
	position: relative;
	width: 38px; height: 22px; flex: none;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	background: var(--raised);
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
}
.toggle::after {
	content: ""; position: absolute; top: 2px; left: 2px;
	width: 16px; height: 16px; border-radius: 50%;
	background: var(--muted);
	transition: transform 0.15s, background 0.15s;
}
.toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.toggle[aria-pressed="true"]::after { transform: translateX(16px); background: var(--accent-ink); }
.toggle:disabled { opacity: 0.6; cursor: default; }

/* ------------------------------------------------------------------ apps grid */

.app-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--s4);
}
.app-card {
	display: flex; flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-card);
	padding: var(--s4);
	box-shadow: var(--shadow);
}
.app-card.is-disabled { opacity: 0.62; }
.app-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.app-card-titles { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.app-card-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }

/* "Revenue reporting" badge: the shared status-pill recoloured to the teal accent
   (used sparingly) — never a new visual language. */
.pill-rev { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.pill-rev .ic { width: 12px; height: 12px; }
.app-card-blurb { margin-top: 6px; font-size: 12.5px; color: var(--muted); min-height: 34px; }
.app-card-foot {
	margin-top: var(--s3); padding-top: var(--s3);
	border-top: 1px solid var(--border);
	display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
}
.app-signup { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.app-signup:hover { color: var(--accent); }
.app-signup .ic { width: 12px; height: 12px; }
.disabled-reason { margin-top: 8px; font-size: 11.5px; color: var(--warn); display: inline-flex; align-items: center; gap: 6px; }
.disabled-reason .ic { width: 13px; height: 13px; }

.app-form { margin-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.app-form[hidden] { display: none; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 12px; font-weight: 550; color: var(--muted); }
.field-req { color: var(--accent); }
.field-input, .num-input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--border-strong);
	border-radius: var(--r-ctl);
	background: var(--bg);
	color: var(--text);
	font-size: 13px;
	font-family: var(--sans);
}
.field-input:focus, .num-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-help { font-size: 11.5px; color: var(--faint); }

.cap-row { display: flex; gap: var(--s3); align-items: flex-end; }
.cap-field { flex: 1; }
.cap-field .num-input { font-family: var(--mono); }
.num-input { text-align: right; }

.form-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.form-status { font-size: 12px; color: var(--muted); }
.form-status.is-err { color: var(--danger); }

/* optional revenue-reporting subsection: a recessed panel, set off from the
   run-critical fields above it, marked clearly as optional. */
.rev-section {
	display: flex; flex-direction: column; gap: var(--s3);
	padding: var(--s3);
	border: 1px solid var(--border);
	border-radius: var(--r-ctl);
	background: var(--bg);
}
.rev-section-head { display: flex; align-items: center; gap: 7px; }
.rev-section-head .ic { width: 14px; height: 14px; color: var(--accent); }
.rev-section-title { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.rev-section-opt {
	font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--faint);
	border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px;
}
.rev-section-copy { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.rev-link { color: var(--accent); font-weight: 550; }
.rev-link:hover { text-decoration: underline; }

/* subtle note for revenue apps whose required login already powers reporting. */
.rev-note { display: flex; align-items: flex-start; gap: 7px; font-size: 11.5px; color: var(--muted); }
.rev-note .ic { width: 13px; height: 13px; color: var(--accent); flex: none; margin-top: 1px; }

/* ------------------------------------------------------------------ switches (controls) */

.switch-row {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
	padding: var(--s3) 0;
	border-bottom: 1px solid var(--border);
}
.switch-row:last-child { border-bottom: 0; padding-bottom: 0; }
.switch-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.switch-name { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 550; }
.switch-name .ic { width: 15px; height: 15px; color: var(--muted); }
.switch-sub { font-size: 12px; color: var(--muted); }
.lock-pill { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }

/* ------------------------------------------------------------------ equalizer */

.eq-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.eq-reset { display: flex; align-items: center; gap: var(--s2); font-size: 12px; color: var(--muted); }
.eq-reset .num-input { width: 84px; }
.eq { margin-top: var(--s4); user-select: none; }
.eq-graph {
	display: grid;
	grid-template-columns: repeat(24, 1fr);
	align-items: end;
	gap: 3px;
	height: 130px;
	padding: var(--s2);
	border: 1px solid var(--border);
	border-radius: var(--r-ctl);
	background: var(--bg);
	touch-action: none;
	cursor: ns-resize;
}
.eq-bar {
	height: 100%;
	display: flex; align-items: flex-end;
	border-radius: 3px 3px 0 0;
	background: var(--raised);
	overflow: hidden;
}
.eq-bar-night { background: color-mix(in srgb, var(--raised) 60%, var(--bg)); }
.eq-fill { width: 100%; background: var(--accent); opacity: 0.85; border-radius: 3px 3px 0 0; }
.eq-bar-night .eq-fill { opacity: 0.6; }
.eq-axis { display: grid; grid-template-columns: repeat(24, 1fr); margin-top: 6px; padding: 0 var(--s2); }
.eq-tick { font-size: 10px; font-family: var(--mono); color: var(--faint); }

/* ------------------------------------------------------------------ ruleset */

.ruleset { display: flex; flex-direction: column; gap: var(--s1); font-family: var(--mono); font-size: 12px; }
.rule-row {
	display: grid;
	grid-template-columns: 66px 1fr auto;
	gap: var(--s3);
	align-items: center;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--r-ctl);
	background: var(--bg);
}
.rule-kind { font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.03em; }
.rule-kind.k-allow { color: var(--positive); }
.rule-kind.k-drop { color: var(--danger); }
.rule-kind.k-rate { color: var(--warn); }
.rule-desc { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rule-pin { color: var(--faint); display: inline-flex; }
.rule-pin .ic { width: 13px; height: 13px; }

/* ------------------------------------------------------------------ per-app live */

.perapp { display: flex; flex-direction: column; }
.perapp-row {
	display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
	padding: 9px 0;
	border-bottom: 1px solid var(--border);
}
.perapp-row:last-child { border-bottom: 0; }
.perapp-name { font-size: 13px; font-weight: 500; }
.perapp-rate { color: var(--muted); font-variant-numeric: tabular-nums; }
.empty { color: var(--faint); font-size: 13px; padding: var(--s3) 0; }

/* ------------------------------------------------------------------ empty state */

.empty-state {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: var(--s3);
	padding: var(--s8) var(--s4);
}
.empty-state-icon {
	display: grid; place-items: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
}
.empty-state-icon .ic { width: 22px; height: 22px; }
.empty-state-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.empty-state-body { font-size: 13px; color: var(--muted); max-width: 46ch; }
.empty-state .btn { margin-top: var(--s2); }

/* ------------------------------------------------------------------ install command */

.cmd {
	border: 1px solid var(--border);
	border-radius: var(--r-ctl);
	background: var(--bg);
	overflow: hidden;
}
.cmd-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 7px 12px;
	border-bottom: 1px solid var(--border);
	font-size: 11.5px; color: var(--muted);
}
.cmd-code {
	display: block;
	padding: 12px;
	font-family: var(--mono); font-size: 12.5px;
	color: var(--text);
	white-space: pre-wrap;
	word-break: break-all;
}
.os-row { display: flex; gap: var(--s2); margin-bottom: var(--s3); }

.add-wait { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: var(--s3); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--s4); font-size: 13px; align-items: baseline; }
.kv dt { color: var(--muted); }
.kv dd { color: var(--text); }

/* ------------------------------------------------------------------ savebar */

.savebar {
	position: fixed;
	left: 50%; bottom: var(--s6);
	transform: translateX(-50%);
	z-index: 50;
	display: flex; align-items: center; gap: var(--s4);
	padding: 10px 12px 10px var(--s4);
	border: 1px solid var(--border-strong);
	border-radius: 10px;
	background: var(--raised);
	box-shadow: var(--shadow-pop);
}
.savebar[hidden] { display: none; }
.savebar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.savebar-msg { font-size: 13px; font-weight: 500; }
.savebar-msg.is-err { color: var(--danger); }
.savebar-actions { display: flex; gap: var(--s2); }

/* ------------------------------------------------------------------ login */

.login {
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1.05fr 1fr;
}
.login-aside {
	display: flex; flex-direction: column; justify-content: center; gap: var(--s6);
	padding: var(--s8) 8%;
	background: var(--surface);
	border-right: 1px solid var(--border);
}
.login-brand { display: flex; align-items: center; gap: var(--s3); }
.login-brand .brand-mark { width: 34px; height: 34px; }
.login-brand .brand-name { font-size: 20px; }
.login-lede { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 30ch; letter-spacing: -0.01em; }
.login-points { display: flex; flex-direction: column; gap: var(--s3); }
.login-points li { display: flex; align-items: center; gap: var(--s3); font-size: 14px; color: var(--text); }
.login-points .ic { width: 18px; height: 18px; color: var(--accent); }
.login-main { display: grid; place-items: center; padding: var(--s6); }
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-title { font-size: 22px; font-weight: 640; letter-spacing: -0.02em; }
.login-hint { margin-top: 8px; margin-bottom: var(--s6); font-size: 13.5px; color: var(--muted); }
.login-error { margin-top: var(--s4); font-size: 13px; color: var(--danger); min-height: 18px; }
.login-fine { margin-top: var(--s4); font-size: 12px; color: var(--faint); }
.google-g { width: 17px; height: 17px; }

/* ------------------------------------------------------------------ responsive */

@media (max-width: 860px) {
	.app { grid-template-columns: 1fr; }
	.sidebar {
		position: static; height: auto; flex-direction: row; align-items: center;
		gap: var(--s3); overflow-x: auto;
		border-right: 0; border-bottom: 1px solid var(--border);
	}
	.brand { padding: var(--s2); }
	.brand-name { display: none; }
	.nav { flex-direction: row; }
	.nav-item[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
	.nav-label { display: none; }
	.side-foot { margin-top: 0; margin-left: auto; flex-direction: row; align-items: center; }
	.whoami { border-top: 0; border-left: 1px solid var(--border); }
	.whoami-email { display: none; }
	.stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.grid-2 { grid-template-columns: minmax(0, 1fr); }
	.content { padding: var(--s4); }
	.topbar { padding: var(--s3) var(--s4); }
	.login { grid-template-columns: 1fr; }
	.login-aside { display: none; }
}

@media (max-width: 460px) {
	.stat-grid { grid-template-columns: minmax(0, 1fr); }
}