/* Ink — a Vercel-register admin theme.
 * Flat hairline surfaces, true dark, one ink-blue accent, Geist + Geist Mono.
 * Token names still map 1:1 onto shadcn/ui's neutral theme so every existing class keeps working.
 * Accent is reserved for primary actions, links, active nav and one chart series;
 * green/amber/red are reserved for status.
 */

@font-face {
	font-family: "Geist";
	src: url("geist.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist Mono";
	src: url("geist-mono.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light;

	--background: oklch(1 0 0);
	--foreground: oklch(0.16 0 0);
	--card: oklch(1 0 0 / 0.82);
	--card-foreground: oklch(0.16 0 0);
	--card-shadow: inset 0 1px 0 oklch(1 0 0 / 0.9), 0 1px 2px oklch(0 0 0 / 0.04), 0 12px 32px -16px oklch(0 0 0 / 0.12);
	--popover: oklch(1 0 0 / 0.95);
	--popover-foreground: oklch(0.16 0 0);
	--mesh-1: color-mix(in oklch, var(--accent) 7%, transparent);
	--mesh-2: color-mix(in oklch, var(--accent) 4%, transparent);
	--mesh-3: color-mix(in oklch, var(--accent) 5%, transparent);
	--secondary: oklch(0.968 0 0);
	--secondary-foreground: oklch(0.2 0 0);
	--muted: oklch(0.968 0 0);
	--muted-foreground: oklch(0.55 0 0);
	--border: oklch(0.925 0 0);
	--border-strong: oklch(0.84 0 0);
	--input: oklch(0.925 0 0);
	--input-bg: transparent;

	/* bright indigo: links, rings, icon tints / strong: button-grade, white text */
	--accent: oklch(0.58 0.24 270);
	--accent-strong: oklch(0.53 0.24 270);
	--accent-foreground: oklch(0.985 0 0);
	--primary: var(--accent-strong);
	--primary-foreground: var(--accent-foreground);
	--ring: var(--accent);

	--destructive: oklch(0.577 0.215 27.325);
	--success: oklch(0.62 0.16 155);
	--success-fg: oklch(0.5 0.13 155);
	--warning: oklch(0.72 0.15 75);
	--warning-fg: oklch(0.55 0.12 65);
	--chart-1: var(--accent);
	--chart-2: oklch(0.78 0 0);

	--sidebar: oklch(0.985 0 0 / 0.85);
	--sidebar-foreground: oklch(0.16 0 0);
	--sidebar-accent: oklch(0.955 0 0);
	--sidebar-accent-foreground: oklch(0.16 0 0);
	--sidebar-border: var(--border);
	--overlay: oklch(0 0 0 / 0.4);
	--shadow-color: oklch(0 0 0 / 0.08);
	--key-bg: oklch(0.96 0 0);
	--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");

	--font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;

	--space-0-5: 0.125rem;
	--space-1: 0.25rem;
	--space-1-5: 0.375rem;
	--space-2: 0.5rem;
	--space-2-5: 0.625rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;

	--radius: 0.625rem;
	--radius-sm: calc(var(--radius) - 4px);
	--radius-md: calc(var(--radius) - 2px);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) + 4px);

	--shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.04);
	--shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color);

	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--dur-fast: 150ms;
	--dur-base: 200ms;

	--sidebar-w: 15rem;
	--header-h: 3.5rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--background: oklch(0.13 0 0);
		--foreground: oklch(0.96 0 0);
		--card: oklch(0.175 0 0 / 0.55);
		--card-foreground: oklch(0.96 0 0);
		--card-shadow: inset 0 1px 0 oklch(1 0 0 / 0.06), 0 12px 32px -16px oklch(0 0 0 / 0.6);
		--popover: oklch(0.19 0 0 / 0.9);
		--popover-foreground: oklch(0.96 0 0);
		--mesh-1: color-mix(in oklch, var(--accent) 11%, transparent);
		--mesh-2: color-mix(in oklch, var(--accent) 7%, transparent);
		--mesh-3: color-mix(in oklch, var(--accent) 8%, transparent);
		--secondary: oklch(1 0 0 / 8%);
		--secondary-foreground: oklch(0.96 0 0);
		--muted: oklch(1 0 0 / 6%);
		--muted-foreground: oklch(0.66 0 0);
		--border: oklch(1 0 0 / 9%);
		--border-strong: oklch(1 0 0 / 20%);
		--input: oklch(1 0 0 / 12%);
		--input-bg: oklch(1 0 0 / 4%);

		--accent: oklch(0.71 0.20 270);
		--accent-strong: oklch(0.61 0.23 270);
		--accent-foreground: oklch(0.985 0 0);
		--ring: var(--accent);

		--destructive: oklch(0.68 0.19 23);
		--success: oklch(0.72 0.15 155);
		--success-fg: oklch(0.76 0.14 155);
		--warning: oklch(0.78 0.14 80);
		--warning-fg: oklch(0.8 0.13 85);
		--chart-2: oklch(0.42 0 0);

		--sidebar: oklch(0.13 0 0 / 0.7);
		--sidebar-foreground: oklch(0.96 0 0);
		--sidebar-accent: oklch(1 0 0 / 6%);
		--sidebar-accent-foreground: oklch(0.96 0 0);
		--shadow-color: oklch(0 0 0 / 0.5);
		--key-bg: oklch(1 0 0 / 8%);
		--icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
		--icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fafafa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	}
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; border-color: var(--border) }

html, body { overflow-x: clip }

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--foreground);
	background: var(--background);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection { background: color-mix(in oklch, var(--accent) 25%, transparent) }

a { color: inherit; text-underline-offset: 4px }
p { margin: 0 }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; min-width: 0 }
h1 { font-size: var(--text-2xl); letter-spacing: -0.02em }
h2 { font-size: var(--text-base) }
h3 { font-size: var(--text-sm) }

svg { flex: none }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px }

.num, .stat-value, code, .mono { font-variant-numeric: tabular-nums }
.mono, code { font-family: var(--font-mono) }

/* ---------- shell: flat sidebar + hairline ---------- */

body.app {
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	min-height: 100vh;
	background: var(--background);
}
/* added by JS only after the initial state is applied, so a remembered collapsed
   sidebar doesn't animate on every page load */
body.app.sidebar-animated { transition: grid-template-columns var(--dur-base) var(--ease-out) }

/* animated mesh: two oversized fixed layers of color blobs, heavily blurred,
   drifting on slow transforms. Sits behind everything (negative z-index paints
   above the propagated body background, below content); glass cards blur over it.
   Shared by the app shell and the login page. */
html::before, html::after {
	content: "";
	position: fixed;
	inset: -25%;
	z-index: -2;
	pointer-events: none;
	filter: blur(60px);
}
html::before {
	background:
		radial-gradient(ellipse 42% 36% at 72% 18%, var(--mesh-1), transparent 70%),
		radial-gradient(ellipse 36% 42% at 18% 32%, var(--mesh-2), transparent 70%),
		radial-gradient(ellipse 32% 30% at 52% 82%, var(--mesh-3), transparent 70%);
	animation: mesh-drift 36s ease-in-out infinite alternate;
}
html::after {
	z-index: -1;
	filter: blur(80px);
	background:
		radial-gradient(ellipse 36% 32% at 82% 68%, var(--mesh-2), transparent 70%),
		radial-gradient(ellipse 32% 36% at 28% 88%, var(--mesh-1), transparent 65%),
		radial-gradient(ellipse 26% 26% at 55% 42%, var(--mesh-3), transparent 70%);
	animation: mesh-drift-2 48s ease-in-out infinite alternate;
}

@keyframes mesh-drift {
	from { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(1) }
	to { transform: translate3d(3%, 4%, 0) rotate(5deg) scale(1.12) }
}
@keyframes mesh-drift-2 {
	from { transform: translate3d(2%, 3%, 0) rotate(3deg) scale(1.08) }
	to { transform: translate3d(-4%, -3%, 0) rotate(-5deg) scale(1) }
}
body.app.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) }

.sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-2);
	background: var(--sidebar);
	color: var(--sidebar-foreground);
	border-right: 1px solid var(--sidebar-border);
	overflow: hidden;
	min-width: 0;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}
body.app.sidebar-collapsed .sidebar { visibility: hidden }

.brand {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	border-radius: var(--radius-md);
	text-decoration: none;
	min-width: 0;
}
.brand:hover { background: var(--sidebar-accent) }
.brand-mark {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-md);
	background: linear-gradient(160deg, var(--accent), color-mix(in oklch, var(--accent) 72%, oklch(0.45 0.18 295)));
	color: #fff;
	flex: none;
}
.brand-mark svg { width: 1rem; height: 1rem }
.brand-text { display: grid; line-height: 1.25; min-width: 0 }
.brand-text strong { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.brand-text span { font-size: var(--text-xs); color: var(--muted-foreground) }

.sidebar-content { flex: 1; min-height: 0; overflow-y: auto }
.sidebar-group { display: flex; flex-direction: column; padding: var(--space-2) }
.sidebar-group-label {
	display: flex;
	align-items: center;
	height: 2rem;
	padding: 0 var(--space-2);
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--muted-foreground);
}
.sidebar-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1) }

.nav-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: 2rem;
	padding: 0 var(--space-2);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: var(--muted-foreground);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-item svg { width: 1rem; height: 1rem }
.nav-item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground) }
.nav-item.active {
	background: color-mix(in oklch, var(--accent) 10%, transparent);
	color: var(--accent);
	font-weight: 500;
}

.sidebar-footer { min-width: 0 }

/* user menu: a <details> dropdown, like shadcn's NavUser */
.user-menu { position: relative }
.user-menu > summary {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2);
	border-radius: var(--radius-md);
	cursor: pointer;
	list-style: none;
	min-width: 0;
}
.user-menu > summary::-webkit-details-marker { display: none }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--sidebar-accent) }
.user-menu > summary > svg { margin-left: auto; width: 1rem; height: 1rem; color: var(--muted-foreground) }
.avatar {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--radius-md);
	background: color-mix(in oklch, var(--accent) 12%, transparent);
	color: var(--accent);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	flex: none;
}
.user-text { display: grid; line-height: 1.25; min-width: 0 }
.user-text strong, .user-text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.user-text strong { font-weight: 500; font-size: var(--text-sm) }
.user-text span { font-size: var(--text-xs); color: var(--muted-foreground) }

.menu {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + var(--space-1));
	z-index: 50;
	padding: var(--space-1);
	background: var(--popover);
	color: var(--popover-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	animation: pop-in var(--dur-fast) var(--ease-out);
}
.menu-label { padding: var(--space-1-5) var(--space-2); font-size: var(--text-xs); color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.menu-sep { height: 1px; margin: var(--space-1) calc(-1 * var(--space-1)); background: var(--border) }
.menu-item {
	display: flex;
	width: 100%;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1-5) var(--space-2);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: var(--text-sm);
	text-align: left;
	cursor: pointer;
}
.menu-item:hover, .menu-item:focus-visible { background: var(--muted); color: var(--foreground); outline: none }
.menu-item svg { width: 1rem; height: 1rem; color: var(--muted-foreground) }

.sidebar-backdrop { display: none }

.main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background: transparent;
}

.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--space-2);
	height: var(--header-h);
	padding: 0 var(--space-4);
	border-bottom: 1px solid var(--border);
	background: color-mix(in oklch, var(--background) 75%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
.topbar-sep { width: 1px; height: 1rem; background: var(--border); margin: 0 var(--space-1) }
.topbar-crumb {
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--muted-foreground);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.topbar-badge { margin-left: auto }

.content {
	container-type: inline-size;
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}
.content > * { margin: 0 }

/* page head: the real title lives in the content, Vercel-style */
.page-head { display: grid; gap: var(--space-1); min-width: 0 }
.page-head h1 {
	background: linear-gradient(180deg, var(--foreground) 25%, color-mix(in oklch, var(--foreground) 55%, var(--accent)));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.page-head p { color: var(--muted-foreground); font-size: var(--text-sm); max-width: 68ch }

/* ---------- card: glass over the gradient glows ---------- */

.card {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	padding: var(--space-5);
	background: var(--card);
	color: var(--card-foreground);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--card-shadow);
	min-width: 0;
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	transition: border-color var(--dur-fast) var(--ease-out);
}
.card > p, .card > form > p { margin: 0 }
.card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-4);
}
.card-header h2, .card-header h3 { font-size: var(--text-base); font-weight: 600; line-height: 1.25 }
.card-header > div { display: grid; gap: var(--space-1-5); min-width: 0 }
.card-description { font-size: var(--text-sm); color: var(--muted-foreground) }
.card-header .actions { display: flex; gap: var(--space-2) }
.card-footer { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--muted-foreground) }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6); align-items: start }

/* ---------- tables: borderless, hairline rows ---------- */

.table-scroll {
	overflow-x: auto;
	background: transparent;
}

table { width: 100%; border-collapse: collapse; font-size: var(--text-sm) }
table th, table td { padding: var(--space-2); text-align: left; vertical-align: middle; white-space: nowrap }

table.data th {
	height: 2.25rem;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--muted-foreground);
}
table.data th:first-child, table.data td:first-child { padding-left: 0 }
table.data th:last-child, table.data td:last-child { padding-right: 0 }
table.data td { height: 2.5rem }
table.data tr { border-bottom: 1px solid var(--border); transition: background-color var(--dur-fast) var(--ease-out) }
table.data tr:last-child { border-bottom: 0 }
table.data tr:not(:first-child):hover { background: color-mix(in oklch, var(--muted) 50%, transparent) }
table.data td.bad { white-space: normal; min-width: 14rem; color: var(--destructive) }
table.data td a { font-weight: 500; color: var(--accent); text-decoration: none }
table.data td a:hover { text-decoration: underline }
table.data td.num, table.data th.num { text-align: right }
.cell-main { display: grid; gap: var(--space-0-5); min-width: 0 }
.cell-main strong { font-weight: 500 }
.cell-sub { font-size: var(--text-xs); color: var(--muted-foreground) }
.cell-sub.bad { color: var(--destructive) }
td.actions-cell { text-align: right; width: 1% }
td.actions-cell form.inline + form.inline { margin-left: var(--space-1) }

/* ---------- badge: tinted status pill ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1-5);
	padding: var(--space-0-5) var(--space-2-5);
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.33;
	white-space: nowrap;
	color: var(--foreground);
	background: var(--muted);
}
.badge.ok::before, .badge.warn::before, .badge.muted::before, .badge.bad::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	border-radius: 50%;
}
.badge.ok { background: color-mix(in oklch, var(--success) 12%, transparent); color: var(--success-fg) }
.badge.ok::before { background: var(--success) }
.badge.warn { background: color-mix(in oklch, var(--warning) 14%, transparent); color: var(--warning-fg) }
.badge.warn::before { background: var(--warning) }
.badge.muted { background: var(--muted); color: var(--muted-foreground) }
.badge.muted::before { background: var(--muted-foreground) }
.badge.bad { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive) }
.badge.bad::before { background: var(--destructive) }
.badge.secondary { background: var(--secondary); color: var(--secondary-foreground) }

/* ---------- button ---------- */

.btn, button[type=submit]:not([class]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 2rem;
	padding: 0 var(--space-3);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
	box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.22), 0 1px 2px oklch(0 0 0 / 0.12);
	color: var(--accent-foreground);
	font: inherit;
	font-size: var(--text-sm);
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.btn svg { width: 1rem; height: 1rem }
.btn:hover { filter: brightness(1.08) }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 35%, transparent) }
.btn:active { transform: translateY(0.5px) }
.btn:disabled, .btn[aria-busy=true] { opacity: 0.5; pointer-events: none; cursor: not-allowed }
.btn-primary { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: var(--accent-foreground) }
.btn-secondary { background: transparent; box-shadow: none; color: var(--foreground); border-color: var(--border) }
.btn-secondary:hover { background: var(--muted); border-color: var(--border-strong); filter: none }
.btn-danger { background: transparent; box-shadow: none; color: var(--destructive); border-color: var(--border) }
.btn-danger:hover { background: color-mix(in oklch, var(--destructive) 10%, transparent); border-color: color-mix(in oklch, var(--destructive) 30%, transparent); filter: none }
.btn-ghost { background: transparent; box-shadow: none; color: var(--foreground) }
.btn-ghost:hover { background: var(--muted); filter: none }
.btn-sm { height: 1.75rem; padding: 0 var(--space-2-5); gap: var(--space-1-5); font-size: var(--text-xs) }
.btn-block { width: 100% }
.icon-btn { width: 1.75rem; height: 1.75rem; padding: 0; margin-left: calc(-1 * var(--space-1)); background: transparent; box-shadow: none; color: var(--muted-foreground); border-color: transparent }
.icon-btn:hover { background: var(--muted); color: var(--foreground); filter: none }

/* ---------- form controls ---------- */

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-6) }
@container (min-width: 36rem) {
	.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.form-grid .field.span-2 { grid-column: 1 / -1 }
}
form > h3 { margin: var(--space-2) 0 var(--space-4) }
form > p.muted { margin-top: var(--space-4); font-size: var(--text-sm) }
form > p:last-child { margin-top: var(--space-5) }

.field { display: grid; gap: var(--space-2); margin: 0; min-width: 0; align-content: start }
.field > span { font-size: var(--text-sm); font-weight: 500; line-height: 1; color: var(--foreground) }
label { display: block; font-size: var(--text-sm); font-weight: 500; line-height: 1.4 }

input[type=text], input[type=number], input[type=email], input[type=password], select, textarea {
	display: block;
	width: 100%;
	min-width: 0;
	height: 2rem;
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--input);
	border-radius: var(--radius-md);
	background: var(--input-bg);
	color: var(--foreground);
	font: inherit;
	font-size: var(--text-base);
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (min-width: 768px) {
	input[type=text], input[type=number], input[type=email], input[type=password], select, textarea { font-size: var(--text-sm) }
}
input::placeholder, textarea::placeholder { color: var(--muted-foreground) }
input:focus-visible, select:focus-visible, textarea:focus-visible {
	outline: none;
	border-color: var(--ring);
	box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent);
}
input[aria-invalid=true] { border-color: var(--destructive); box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent) }
input:disabled, select:disabled, textarea:disabled { opacity: 0.5; cursor: not-allowed }
textarea { height: auto; min-height: 4rem; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-sm); resize: vertical }
select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: var(--space-8);
	background-image: var(--icon-chevron);
	background-repeat: no-repeat;
	background-position: right var(--space-2) center;
	background-size: 1rem;
	cursor: pointer;
}
select option { background: var(--popover); color: var(--popover-foreground) }

input[type=checkbox] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	width: 1rem;
	height: 1rem;
	margin: 0 var(--space-2) 0 0;
	vertical-align: -0.2em;
	border: 1px solid var(--input);
	border-radius: 4px;
	background: var(--input-bg);
	cursor: pointer;
}
input[type=checkbox]:checked { background: var(--accent-strong) var(--icon-check) center / 0.75rem no-repeat; border-color: var(--accent-strong) }
input[type=checkbox]:focus-visible { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent) }
.field:has(> label > input[type=checkbox]) { align-content: end }
.field > label:has(input[type=checkbox]) { display: flex; align-items: center; flex-wrap: wrap; min-height: 2rem; align-self: end }

form.inline { display: inline }
/* playground "Run a check": even vertical rhythm between the text box, the option grid and the action */
.playground-form { display: grid; gap: var(--space-5) }
.playground-form .form-grid { row-gap: var(--space-5) }
.playground-form .field > label:has(input[type=checkbox]) { gap: var(--space-2); min-height: 2.25rem; font-size: var(--text-sm); flex-wrap: nowrap; align-items: center; line-height: 1.4 }
.playground-form .field > label > input[type=checkbox] { flex: none }
.playground-form .dialog-footer { margin-top: 0 }
/* playground scan result: the text as one paragraph, sentences highlighted by score (ZeroGPT-style) */
.scan-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--muted-foreground) }
.scan-legend span[class^="k-"] { display: inline-flex; align-items: center; gap: var(--space-1-5) }
.scan-legend span[class^="k-"]::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--swatch) }
.scan-legend .k-ai { --swatch: var(--destructive) }
.scan-legend .k-mixed { --swatch: var(--warning) }
.scan-legend .k-human { --swatch: var(--border) }
.scan-text { margin: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--muted); line-height: 1.75; font-size: var(--text-sm); white-space: normal; overflow-wrap: anywhere }
.scan-sent { border-radius: 3px; padding: 0.1em 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone }
.scan-sent.is-ai { background: color-mix(in oklch, var(--destructive) 28%, transparent); box-shadow: inset 0 -1px 0 color-mix(in oklch, var(--destructive) 70%, transparent) }
.scan-sent.is-mixed { background: color-mix(in oklch, var(--warning) 24%, transparent) }
/* playground Compare: two scanners on the original text. Pattern and colour both differ, so the
   verdicts read without colour: A = underline, B = fill, both = stronger fill + underline */
.playground-results { display: contents }
.compare-controls { max-width: 36rem }
.compare-text { white-space: pre-wrap }
.cmp-seg { border-radius: 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone }
.cmp-seg.cmp-a { text-decoration: underline 2px var(--accent); text-underline-offset: 0.3em; text-decoration-skip-ink: none }
.cmp-seg.cmp-b { background: color-mix(in oklch, var(--warning) 30%, transparent) }
.cmp-seg.cmp-both { background: color-mix(in oklch, var(--destructive) 34%, transparent); text-decoration: underline 2px var(--destructive); text-underline-offset: 0.3em; text-decoration-skip-ink: none }
.cmp-legend .k-cmp-a::before { background: none; border-bottom: 2px solid var(--accent); border-radius: 0 }
.cmp-legend .k-cmp-b { --swatch: color-mix(in oklch, var(--warning) 55%, transparent) }
.cmp-legend .k-cmp-both::before { background: color-mix(in oklch, var(--destructive) 55%, transparent); border-bottom: 2px solid var(--destructive) }
.compare-note { margin: 0; font-size: var(--text-xs) }
.compare-unlocated { min-width: 0; font-size: var(--text-sm) }
.compare-unlocated > summary { cursor: pointer; color: var(--muted-foreground); padding: var(--space-1) 0 }
.compare-unlocated p { margin: var(--space-2) 0 var(--space-1); font-size: var(--text-xs) }
.compare-unlocated ul { margin: 0; padding-left: var(--space-5); overflow-wrap: anywhere }
/* playground JSON blocks (tenant format, raw provider response): scroll inside a framed box, never widen the card */
.playground-run { display: grid; gap: var(--space-3); min-width: 0 }
.playground-run > h3 { margin: var(--space-2) 0 0; font-size: var(--text-sm) }
.playground-run pre { margin: 0; max-width: 100%; max-height: 28rem; overflow: auto; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--key-bg); font-size: var(--text-xs); line-height: 1.6 }
.playground-run pre code { font-family: var(--font-mono); white-space: pre; overflow-wrap: normal }
.playground-run details { min-width: 0 }
.playground-run details > summary { cursor: pointer; font-size: var(--text-sm); color: var(--muted-foreground); padding: var(--space-1) 0 }
.playground-run details[open] > summary { margin-bottom: var(--space-2) }

/* ---------- filters + pager ---------- */

/* filter bars are bare toolbars, not cards */
.card.filters {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--space-3);
	padding: 0;
	border: 0;
	background: transparent;
}
.filters .field { flex: 1 1 11rem }
.filters .field > span { font-size: var(--text-xs); color: var(--muted-foreground) }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2) }
.pager .muted { font-size: var(--text-sm) }

/* ---------- misc ---------- */

.empty { color: var(--muted-foreground); padding: var(--space-8) var(--space-4); text-align: center; margin: 0 }
.muted { color: var(--muted-foreground) }
.bad { color: var(--destructive) }
.ok { color: var(--success-fg) }
.warn { color: var(--warning-fg) }
code.key { font-size: var(--text-xs); background: var(--key-bg); border: 1px solid var(--border); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); word-break: break-all }

/* banner = inline alert */
.banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--card);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	font-size: var(--text-sm);
}
.banner > svg { width: 1rem; height: 1rem }
.banner.error {
	color: var(--destructive);
	border-color: color-mix(in oklch, var(--destructive) 30%, var(--border));
	background: color-mix(in oklch, var(--destructive) 6%, var(--card));
}
.banner.ok {
	color: var(--success-fg);
	border-color: color-mix(in oklch, var(--success) 30%, var(--border));
	background: color-mix(in oklch, var(--success) 6%, var(--card));
}
.banner.ok > svg { color: var(--success) }

/* alert = "needs attention": amber, a warning not an error */
.alert {
	display: grid;
	grid-template-columns: 1rem minmax(0, 1fr);
	gap: var(--space-0-5) var(--space-3);
	padding: var(--space-3) var(--space-4);
	border: 1px solid color-mix(in oklch, var(--warning) 35%, var(--border));
	border-radius: var(--radius-lg);
	background: color-mix(in oklch, var(--warning) 7%, var(--card));
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	color: var(--warning-fg);
	font-size: var(--text-sm);
}
.alert > svg { width: 1rem; height: 1rem; margin-top: 0.125rem }
.alert-title { font-weight: 500 }
.alert-body { grid-column: 2; color: color-mix(in oklch, var(--warning-fg) 85%, var(--foreground)) }
.alert-body ul { margin: 0; padding-left: var(--space-4) }

/* progress: thin accent meter */
progress {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 0.25rem;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	background: color-mix(in oklch, var(--accent) 15%, transparent);
	color: var(--accent);
}
progress::-webkit-progress-bar { background: color-mix(in oklch, var(--accent) 15%, transparent); border-radius: 999px }
progress::-webkit-progress-value { background: var(--accent); border-radius: 999px }
progress::-moz-progress-bar { background: var(--accent); border-radius: 999px }
progress.high::-webkit-progress-value { background: var(--warning) }
progress.high::-moz-progress-bar { background: var(--warning) }
progress.full::-webkit-progress-value { background: var(--destructive) }
progress.full::-moz-progress-bar { background: var(--destructive) }

.meter { display: grid; gap: var(--space-1-5); min-width: 9rem }
.meter-head { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--muted-foreground) }
.meter small { font-size: var(--text-xs); color: var(--muted-foreground); font-variant-numeric: tabular-nums }

/* ---------- overview ---------- */

.section-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) }
@container (min-width: 36rem) { .section-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@container (min-width: 64rem) { .section-cards { grid-template-columns: repeat(4, minmax(0, 1fr)) } }

.stat-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--card);
	box-shadow: var(--card-shadow);
	min-width: 0;
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	transition: border-color var(--dur-fast) var(--ease-out);
}
.stat-card:hover { border-color: var(--border-strong) }
/* glossy accent hairline along the top edge */
.stat-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	height: 1px;
	background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 55%, transparent), transparent);
}
.stat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2) }
.stat-head > div { display: grid; gap: var(--space-1-5); min-width: 0 }
.stat-label { font-size: var(--text-sm); color: var(--muted-foreground) }
.stat-value { font-size: var(--text-3xl); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em }
.stat-foot { display: grid; gap: var(--space-1); font-size: var(--text-sm); margin-top: auto }
.stat-foot strong { font-weight: 500 }
.stat-foot span { color: var(--muted-foreground) }

/* delta chip: change vs yesterday */
.delta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-0-5) var(--space-2);
	border-radius: 999px;
	font-size: var(--text-xs);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.delta svg { width: 0.625rem; height: 0.625rem }
.delta.up { background: color-mix(in oklch, var(--success) 12%, transparent); color: var(--success-fg) }
.delta.down { background: color-mix(in oklch, var(--destructive) 12%, transparent); color: var(--destructive) }
.delta.down svg { transform: rotate(180deg) }

/* 7-day sparkline inside a stat card */
.spark { display: block; width: 100%; height: 2rem; overflow: visible }
.spark-line {
	fill: none;
	stroke: var(--accent);
	stroke-width: 1.5px;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
	filter: drop-shadow(0 0 3px color-mix(in oklch, var(--accent) 45%, transparent));
}
.spark-area { fill: color-mix(in oklch, var(--accent) 8%, transparent) }

/* mini stat strip: one glass bar, hairline dividers */
.stat-strip {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--card-shadow);
}
@container (min-width: 64rem) { .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.stat-strip > div {
	display: grid;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-5);
	background: var(--card);
	min-width: 0;
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.strip-label { font-size: var(--text-xs); color: var(--muted-foreground) }
.strip-value { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums }
.strip-sub { font-size: var(--text-xs); color: var(--muted-foreground) }

/* error breakdown bars */
.errbars { display: grid; gap: var(--space-3) }
.errbar {
	display: grid;
	grid-template-columns: minmax(0, 11rem) 1fr 2.5rem;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-sm);
}
.errbar-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs) }
.errbar-track { height: 0.375rem; border-radius: 999px; background: color-mix(in oklch, var(--destructive) 12%, transparent); overflow: hidden }
.errbar-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, color-mix(in oklch, var(--destructive) 65%, var(--accent)), var(--destructive));
}
.errbar .num { text-align: right; font-weight: 500 }

/* top tenants leaderboard */
.toplist { display: grid }
.toplist-row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) 0;
	border-bottom: 1px solid var(--border);
	font-size: var(--text-sm);
}
.toplist-row:last-child { border-bottom: 0 }
.toplist-row .rank { width: 1.25rem; color: var(--muted-foreground); font-size: var(--text-xs) }
.toplist-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500 }
.toplist-row .num { font-variant-numeric: tabular-nums }

.overview-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: stretch }
/* bento: cards in a row share its height; footers sit on the bottom edge, empty states centre */
.overview-row > .card > .card-footer { margin-top: auto }
.overview-row > .card > .empty { flex: 1; display: grid; place-items: center }
.overview-row > .card > .chart { flex: 1; align-content: end }
@container (min-width: 64rem) { .overview-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) } }

/* bar chart: accent series + neutral series, drawn in on load */
.card-header > .legend, .legend { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-xs); color: var(--muted-foreground) }
.legend span { display: inline-flex; align-items: center; gap: var(--space-1-5) }
.legend span::before { content: ""; width: 0.625rem; height: 0.625rem; border-radius: 2px; background: var(--swatch) }
.legend .k-scan { --swatch: var(--chart-1) }
.legend .k-humanize { --swatch: var(--chart-2) }
.chart { display: grid; gap: var(--space-2) }
.chart svg { display: block; width: 100%; height: 12rem; overflow: visible }
.chart .grid-line { stroke: var(--border); stroke-dasharray: 3 3; vector-effect: non-scaling-stroke }
.chart .bar-humanize { fill: var(--chart-2) }
.chart rect {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: bar-grow 600ms var(--ease-out) backwards;
}
.chart rect:hover { opacity: 0.8 }
.chart-axis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: var(--text-xs); color: var(--muted-foreground); text-align: center }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4) }
.section-head > div { display: grid; gap: var(--space-1) }
.section-head h2 { font-size: var(--text-lg) }

.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-4); margin: 0 }
.kv dt { color: var(--muted-foreground) }
.kv dd { margin: 0; font-weight: 500; text-align: right }
.results { display: grid; gap: var(--space-4) }

/* ---------- login: centered card over dot grid + accent glow ---------- */

body.login {
	min-height: 100svh;
	display: grid;
	place-items: center;
	padding: var(--space-6);
	background: var(--background);
}
/* dot grid, fading in toward the card */
body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(color-mix(in oklch, var(--foreground) 12%, transparent) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, transparent 25%, black 100%);
	mask-image: radial-gradient(ellipse 65% 55% at 50% 45%, transparent 25%, black 100%);
}
/* soft accent glow from the top */
body.login::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 55% 32% at 50% 0%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 70%);
}
.login-wrap { position: relative; z-index: 1; width: 100%; max-width: 24rem; display: flex; flex-direction: column; gap: var(--space-6) }
.login-wrap .brand { align-self: center; padding: 0; font-weight: 500 }
.login-wrap .brand:hover { background: transparent }
.login-wrap .brand-mark { width: 1.5rem; height: 1.5rem; border-radius: var(--radius-md) }
.login-wrap .brand-mark svg { width: 0.875rem; height: 0.875rem }
.login-head { display: grid; gap: var(--space-1-5); text-align: center }
.login-head h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em }
.login-card { box-shadow: var(--shadow-lg) }
.login-card form { display: grid; gap: var(--space-5) }

/* ---------- toasts (sonner) ---------- */

.toast-region {
	position: fixed;
	right: var(--space-4);
	bottom: var(--space-4);
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: min(22rem, calc(100vw - 2 * var(--space-4)));
}
.toast {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-lg);
	backdrop-filter: blur(14px) saturate(1.4);
	-webkit-backdrop-filter: blur(14px) saturate(1.4);
	font-size: var(--text-sm);
	animation: toast-in 300ms var(--ease-out);
}
.toast::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--swatch) }
.toast.error { --swatch: var(--destructive) }
.toast.ok { --swatch: var(--success) }
.toast span { flex: 1; min-width: 0 }
.toast-close {
	flex: none;
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
	font-size: var(--text-base);
	line-height: 1;
}
.toast-close:hover { background: var(--muted); color: var(--foreground) }

@keyframes toast-in { from { opacity: 0; transform: translateY(1rem) } }
@keyframes pop-in { from { opacity: 0; transform: translateY(0.25rem) } }
@keyframes fade-in { from { opacity: 0 } }
@keyframes bar-grow { from { transform: scaleY(0) } }

/* ---------- mobile: the sidebar becomes a sheet ---------- */

@media (max-width: 767px) {
	body.app, body.app.sidebar-collapsed { display: block }

	.sidebar, body.app.sidebar-collapsed .sidebar {
		position: fixed;
		inset: 0 auto 0 0;
		z-index: 60;
		width: min(18rem, 85vw);
		height: 100dvh;
		padding: var(--space-2) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom)) max(var(--space-2), env(safe-area-inset-left));
		border-right: 1px solid var(--sidebar-border);
		box-shadow: var(--shadow-lg);
		visibility: hidden;
		transform: translateX(-100%);
		transition: transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
	}
	body.app.sidebar-open .sidebar { visibility: visible; transform: none; transition: transform var(--dur-base) var(--ease-out) }
	body.app.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: var(--overlay); animation: fade-in var(--dur-base) var(--ease-out) }
	body.app.sidebar-open { overflow: hidden }

	.main { min-height: 100dvh }
	.topbar { padding: 0 max(var(--space-4), env(safe-area-inset-right)) 0 max(var(--space-4), env(safe-area-inset-left)) }
	.content { padding: var(--space-4) var(--space-4) max(var(--space-8), env(safe-area-inset-bottom)); gap: var(--space-4) }
	.card { padding: var(--space-4); gap: var(--space-4) }
	.stat-card { padding: var(--space-4); gap: var(--space-4) }
	.card.filters { padding: 0 }
	.card.filters .btn { width: 100% }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important }
	/* the mesh loops forever, so a 1ms duration would strobe — freeze it outright */
	html::before, html::after { animation: none !important }
	.btn:active { transform: none }
}

/* ---------- dialog (shadcn Dialog on a native <dialog>) ---------- */

.dialog {
	container-type: inline-size;
	width: min(40rem, calc(100% - 2 * var(--space-4)));
	max-height: calc(100dvh - 2 * var(--space-4));
	margin: auto;
	padding: 0;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--background);
	color: var(--foreground);
	box-shadow: var(--shadow-lg);
}
.dialog[open] { animation: dialog-in var(--dur-base) var(--ease-out) }
.dialog::backdrop { background: var(--overlay) }
.dialog[open]::backdrop { animation: fade-in var(--dur-base) var(--ease-out) }
.dialog > form { position: relative; display: grid; gap: var(--space-4); padding: var(--space-6) }
.dialog-header { display: grid; gap: var(--space-2); padding-right: var(--space-6) }
.dialog-header h2 { font-size: var(--text-lg); font-weight: 600; line-height: 1 }
.dialog-close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--muted-foreground);
	cursor: pointer;
}
.dialog-close:hover { color: var(--foreground); background: var(--accent) }
.dialog-close svg { width: 1rem; height: 1rem }
.dialog-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2) }
@container (max-width: 30rem) {
	.dialog-footer { flex-direction: column-reverse }
	.dialog-footer .btn { width: 100% }
}
@keyframes dialog-in { from { opacity: 0; transform: scale(0.96) } }
@media (prefers-reduced-motion: reduce) {
	.dialog[open], .dialog[open]::backdrop { animation: none }
}
.banner.error { flex-wrap: nowrap; align-items: flex-start }
.banner.error > svg { margin-top: 0.125rem }

/* ---------- providers ---------- */

.provider-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0 }
.provider-title > div { display: grid; gap: var(--space-1); min-width: 0 }
.provider-icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--muted);
	color: var(--foreground);
	flex: none;
}
.provider-icon svg { width: 1rem; height: 1rem }

/* routing strip: switch · priority · save, on one line */
.provider-settings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-6);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: color-mix(in oklch, var(--muted) 50%, transparent);
}
.switch-field { display: flex; align-items: center; gap: var(--space-3); margin: 0; cursor: pointer; flex: 1 1 14rem; min-width: 0 }
.switch-field > span { display: grid; gap: var(--space-0-5); line-height: 1.3 }
.switch-field strong { font-weight: 500 }
.switch-field small { font-size: var(--text-xs); font-weight: 400; color: var(--muted-foreground) }
.switch-field small.warn { color: var(--warning-foreground) }
.priority-field { display: grid; grid-template-columns: auto 4.5rem; grid-template-rows: auto auto; column-gap: var(--space-2); align-items: center; margin: 0 }
.priority-field > span { font-weight: 500 }
.priority-field input { width: 4.5rem; height: 2rem; text-align: center }
.priority-field small { grid-column: 1 / -1; font-size: var(--text-xs); font-weight: 400; color: var(--muted-foreground) }

/* shadcn Switch on a checkbox */
input[type=checkbox].switch {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	display: inline-block;
	width: 2rem;
	height: 1.15rem;
	margin: 0;
	flex: none;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--input);
	box-shadow: var(--shadow-xs);
	cursor: pointer;
	transition: background-color var(--dur-fast) var(--ease-out);
}
input[type=checkbox].switch::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.125rem;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: var(--background);
	transform: translateY(-50%);
	transition: transform var(--dur-fast) var(--ease-out);
}
input[type=checkbox].switch:checked { background: var(--primary); border-color: transparent }
input[type=checkbox].switch:checked::before { transform: translate(0.8rem, -50%) }
input[type=checkbox].switch:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent) }

.subsection-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4) }
.subsection-head > div { display: grid; gap: var(--space-1) }
.subsection-head h3 { font-size: var(--text-sm); font-weight: 600 }

.btn-icon { width: 2rem; height: 2rem; padding: 0 }
.btn-icon svg { width: 1rem; height: 1rem }

/* ⋯ dropdown: a native popover, pinned under its trigger by app.js */
.dropdown {
	position: fixed;
	inset: auto;
	margin: 0;
	width: 12rem;
	padding: var(--space-1);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--popover);
	color: var(--popover-foreground);
	box-shadow: var(--shadow-lg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
.dropdown:popover-open { animation: pop-in var(--dur-fast) var(--ease-out) }
.dropdown form.inline { display: block }
.menu-item.destructive, .menu-item.destructive svg { color: var(--destructive) }
.menu-item.destructive:hover, .menu-item.destructive:focus-visible { background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive) }

.dialog-note { font-size: var(--text-xs); color: var(--muted-foreground); margin: 0 }

/* accounts table: rows stack into mini-cards when the table's box is narrow */
.stack-wrap { container-type: inline-size }
@container (max-width: 44rem) {
	table.table-stack, table.table-stack tbody, table.table-stack tr, table.table-stack td { display: block; width: 100% }
	table.table-stack tr:first-child { display: none }
	table.table-stack tr { position: relative; padding: var(--space-3) var(--space-4) }
	table.table-stack tr:not(:first-child):hover { background: transparent }
	table.table-stack td, table.data.table-stack td:first-child, table.data.table-stack td:last-child { height: auto; padding: var(--space-1) 0; white-space: normal }
	table.table-stack td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) }
	table.table-stack td[data-label]::before { content: attr(data-label); flex: none; font-size: var(--text-xs); color: var(--muted-foreground) }
	table.table-stack td[data-label] > .meter { flex: 0 1 14rem; min-width: 0 }
	table.table-stack td:first-child { padding-right: var(--space-8); margin-bottom: var(--space-1) }
	table.table-stack td.actions-cell { position: absolute; top: var(--space-2); right: var(--space-2); width: auto; padding: 0 }
}
.card-header > .provider-title { display: flex }
.dropdown { text-align: left }