/* LVI design system. Dark-first instrument-panel look, frost-cyan accent. */

/* ---------- Fonts ---------- */

@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/static/fonts/barlow-400.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/static/fonts/barlow-500.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/static/fonts/barlow-600.woff2") format("woff2");
}
@font-face {
	font-family: "Barlow";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("/static/fonts/barlow-700.woff2") format("woff2");
}
@font-face {
	font-family: "JetBrains Mono";
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("/static/fonts/jetbrains-mono.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root {
	/* All sizes are rem, so this one value scales the whole UI. */
	--ui-scale: 150%;

	--font-ui: "Barlow", "Helvetica Neue", Arial, sans-serif;
	--font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

	--r-sm: 0.375rem;
	--r-md: 0.625rem;
	--r-lg: 0.875rem;

	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

	--z-sticky: 20;
	--z-overlay: 40;
	--z-modal: 100;
}

:root[data-theme="dark"] {
	--bg: #141821;
	--surface: #1b212c;
	--surface-2: #222937;
	--surface-3: #2a3242;
	--border: #2b3343;
	--border-strong: #3a4457;
	--text: #dde3ee;
	--text-2: #9aa5b8;
	--text-3: #6b7690;
	--accent: #7ecfe0;
	--accent-strong: #9adeec;
	--on-accent: #0c1118;
	--accent-soft: rgba(126, 207, 224, 0.1);
	--ok: #a3be8c;
	--ok-soft: rgba(163, 190, 140, 0.13);
	--danger: #d6848d;
	--danger-strong: #e29aa2;
	--danger-soft: rgba(214, 132, 141, 0.12);
	--warn: #ebcb8b;
	--grid-line: rgba(126, 207, 224, 0.045);
	--chart-1: #3987e5;
	--chart-2: #d95926;
	--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25), 0 2px 8px rgba(0, 0, 0, 0.18);
	--shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
	--tooltip-bg: #0e1219;
	--tooltip-fg: #c6cedd;
	color-scheme: dark;
}

:root[data-theme="light"] {
	--bg: #eef1f6;
	--surface: #ffffff;
	--surface-2: #f4f6fa;
	--surface-3: #e9edf4;
	--border: #dfe4ed;
	--border-strong: #c6cedd;
	--text: #202737;
	--text-2: #5a6579;
	--text-3: #8a94a9;
	--accent: #20708d;
	--accent-strong: #185d76;
	--on-accent: #ffffff;
	--accent-soft: rgba(32, 112, 141, 0.08);
	--ok: #5d7f46;
	--ok-soft: rgba(93, 127, 70, 0.11);
	--danger: #b04a55;
	--danger-strong: #963c46;
	--danger-soft: rgba(176, 74, 85, 0.09);
	--warn: #a07f2f;
	--grid-line: rgba(32, 112, 141, 0.05);
	--chart-1: #2a78d6;
	--chart-2: #eb6834;
	--shadow-1: 0 1px 2px rgba(32, 40, 58, 0.05), 0 2px 8px rgba(32, 40, 58, 0.06);
	--shadow-2: 0 2px 4px rgba(32, 40, 58, 0.06), 0 10px 28px rgba(32, 40, 58, 0.12);
	--tooltip-bg: #202737;
	--tooltip-fg: #eef1f6;
	color-scheme: light;
}

/* ---------- Base ---------- */

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

html {
	font-size: var(--ui-scale);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.55;
	color: var(--text);
	background: var(--bg);
	display: flex;
	flex-direction: column;
	height: 100vh;
	overflow: hidden;
}
body > nav { flex-shrink: 0; }
body > main { flex: 1; overflow-y: auto; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 600;
	line-height: 1.2;
	text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
small { font-size: 0.8125rem; color: var(--text-2); }
strong { font-weight: 600; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 0.125rem;
}

::placeholder { color: var(--text-3); }
::selection { background: var(--accent-soft); }

.mono, .num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 0.92em;
}

/* Micro label: uppercase kicker used on card headers and column heads */
.kicker {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-3);
}

/* ---------- Top bar ---------- */

.topbar {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0 1.25rem;
	height: 3.25rem;
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	position: relative;
	z-index: var(--z-sticky);
}

.brand {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--text);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand-mark {
	width: 1.625rem;
	height: 1.625rem;
	border-radius: var(--r-sm);
	background: linear-gradient(135deg, var(--accent), var(--accent-strong));
	color: var(--on-accent);
	display: grid;
	place-items: center;
	flex-shrink: 0;
}
.brand-mark svg { display: block; width: 0.9375rem; height: 0.9375rem; }
.brand-sub {
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-left: 0.125rem;
}

.topbar-links {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1;
	min-width: 0;
}
.topbar-links a {
	display: flex;
	align-items: center;
	height: 3.25rem;
	padding: 0 0.75rem;
	color: var(--text-2);
	font-size: 0.875rem;
	font-weight: 500;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: color 120ms var(--ease-out);
}
.topbar-links a:hover { color: var(--text); text-decoration: none; }
.topbar-links a[aria-current] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}
.topbar-links a:focus-visible { outline-offset: -2px; }
.topbar-links a.has-badge { position: relative; padding-right: 1.625rem; }
.nav-badge {
	position: absolute;
	top: 0.5rem;
	right: 0.25rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 1.125rem;
	height: 1.125rem;
	padding: 0 0.3125rem;
	border-radius: 999px;
	background: var(--accent);
	color: var(--surface);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
}

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-left: auto;
	min-width: 0;
}
.plan-banner {
	padding: 0.625rem 1.25rem;
	background: var(--accent-soft);
	border-bottom: 1px solid var(--border);
	color: var(--text);
	font-size: 0.875rem;
	line-height: 1.45;
}
.plan-banner-warn {
	background: color-mix(in srgb, var(--warn) 14%, var(--surface));
	border-bottom-color: color-mix(in srgb, var(--warn) 45%, transparent);
}
.trial-note {
	margin-top: auto;
	padding: 0.3125rem 1.25rem;
	border-top: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-3);
	font-size: 0.75rem;
	line-height: 1.4;
	text-align: center;
}
.account-menu { position: relative; }
.account-menu > summary {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem;
	border-radius: 999px;
	cursor: pointer;
	list-style: none;
	color: var(--text);
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary:hover, .account-menu[open] > summary { background: var(--surface-2); }
.account-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-avatar {
	display: grid;
	place-items: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--accent-soft);
	border: 1px solid var(--accent);
	color: var(--accent);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}
.account-name {
	max-width: 14rem;
	padding-right: 0.375rem;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.account-pop {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: var(--z-overlay);
	display: grid;
	gap: 0.375rem;
	min-width: 14rem;
	max-width: 22rem;
	padding: 0.875rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-2);
}
.account-who { font-weight: 600; overflow-wrap: anywhere; }
.account-logout { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.375rem; }
.account-pop .account-item, .account-pop .account-logout { width: 100%; justify-content: flex-start; }
.account-item { margin-top: 0.375rem; }
.account-item[aria-current] { color: var(--accent); border-color: var(--accent); }
.topbar-file {
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.icon-btn {
	appearance: none;
	background: none;
	border: none;
	width: 2.125rem;
	height: 2.125rem;
	border-radius: var(--r-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-2);
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: background 120ms var(--ease-out), color 120ms var(--ease-out);
}
.icon-btn::before { content: ""; position: absolute; inset: -0.3125rem; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.icon-btn:active { transform: scale(0.94); }
.icon-btn svg { display: block; width: 1.0625rem; height: 1.0625rem; }

/* Below full HD the bar drops the subtitle and name (the menu shows it) and packs the eight links so they fit 1366 px, below 1366 px the links wrap on their own row. */
@media (max-width: 1919px) {
	.topbar:has(.topbar-links) { gap: 1rem; }
	.topbar:has(.topbar-links) .brand-sub { display: none; }
	.topbar-links { gap: 0; }
	.topbar-links a { padding: 0 0.375rem; }
	.account-name { display: none; }
}
@media (max-width: 1365px) {
	.topbar:has(.topbar-links) { flex-wrap: wrap; height: auto; row-gap: 0; }
	.topbar-actions { flex: 1 1 0; justify-content: flex-end; min-width: 0; min-height: 3.25rem; }
	.topbar-links {
		order: 3;
		flex: 1 0 calc(100% + 2.5rem);
		flex-wrap: wrap;
		margin: 0 -1.25rem;
		padding: 0 0.75rem;
		border-top: 1px solid var(--border);
	}
	.topbar-links a { height: 2.5rem; }
}

[data-theme="dark"] .icon-btn .icon-moon,
[data-theme="light"] .icon-btn .icon-sun { display: none; }

/* ---------- Page scaffolding ---------- */

.page {
	width: 100%;
	max-width: 72.5rem;
	margin: 0 auto;
	padding: 2rem 1.5rem 4rem;
}
.page-narrow { max-width: 47.5rem; }

.page-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}
.page-head h1 { font-size: 1.625rem; }
.page-head .page-desc { margin-top: 0.375rem; color: var(--text-2); font-size: 0.875rem; }
.page-head .registries { margin: 0.375rem 0 0; padding-left: 1.25rem; color: var(--text-2); font-size: 0.875rem; }
.page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.crumbs {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--text-3);
	margin-bottom: 0.625rem;
}
.crumbs a { color: var(--text-3); }
.crumbs a:hover { color: var(--accent); text-decoration: none; }

.breadcrumbs { margin-bottom: 0.75rem; font-size: 0.8125rem; }
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.breadcrumbs li { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--text-3); }
.breadcrumbs li + li::before { content: "/" / ""; color: var(--border-strong); }
.breadcrumbs a { color: var(--text-2); }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs [aria-current] { color: var(--text); font-weight: 500; overflow-wrap: anywhere; }

/* Section title with the tab bar of its pages, the tab's own heading follows. */
.section-head { margin-bottom: 1.5rem; }
.section-head h1 { font-size: 1.625rem; margin-bottom: 0.75rem; }
.tabs { border-bottom: 1px solid var(--border); }
.tabs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.25rem;
	margin: 0 0 -1px;
	padding: 0;
	list-style: none;
}
.tabs a {
	display: block;
	padding: 0.5rem 0.875rem;
	color: var(--text-2);
	font-size: 0.875rem;
	font-weight: 500;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
	border-radius: var(--r-sm) var(--r-sm) 0 0;
	transition: color 120ms var(--ease-out), background 120ms var(--ease-out);
}
.tabs a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.tabs a:focus-visible { outline-offset: -2px; }
.tabs a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); }
.page-head .tab-title { font-size: 1.125rem; }

/* ---------- Cards ---------- */

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
}
.card-head .kicker { color: var(--text-2); }
.card-body { padding: 1.25rem; }
.card-foot {
	padding: 0.875rem 1.25rem;
	border-top: 1px solid var(--border);
	background: var(--surface-2);
}

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }
table.data {
	--cell-x: 1.25rem;
	--cell-edge: 1.25rem;
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}
table.data th {
	text-align: left;
	padding: 0.625rem var(--cell-x);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-3);
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}
table.data td {
	padding: 0.6875rem var(--cell-x);
	border-bottom: 1px solid var(--border);
	vertical-align: middle;
}
table.data tbody tr { transition: background 100ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
	table.data tbody tr:hover { background: var(--surface-2); }
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr[data-href] { cursor: pointer; }
td.badge-list .badge { margin: 0 0.25rem 0.25rem 0; }
table.data td.num, table.data th.num { text-align: right; }
table.data :is(th, td):first-child { padding-left: var(--cell-edge); }
table.data :is(th, td):last-child { padding-right: var(--cell-edge); }
/* The controller's instance list has seven columns, long badges wrap so it fits 1366 px. */
#instances .badge { white-space: normal; height: auto; min-height: 1.375rem; padding-block: 0.25rem; line-height: 1.2; border-radius: 0.6875rem; }
@media (max-width: 1600px) {
	table.data { --cell-x: 0.625rem; }
}
table.data tfoot td, table.data tfoot th {
	padding: 0.75rem var(--cell-x);
	border-top: 1px solid var(--border-strong);
	border-bottom: none;
	font-weight: 600;
	background: var(--surface-2);
}

.table-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.875rem;
	justify-content: flex-end;
	align-items: center;
	white-space: nowrap;
	font-size: 0.8125rem;
}

.row-link { font-weight: 500; color: var(--text); }
.row-link:hover { color: var(--accent); }

.link-danger { color: var(--danger); }
.link-danger:hover { color: var(--danger-strong); }

.empty-state {
	text-align: center;
	padding: 2.75rem 1.25rem;
	color: var(--text-3);
	font-size: 0.875rem;
}

/* ---------- Badges ---------- */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
	height: 1.375rem;
	padding: 0 0.5625rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-muted { background: var(--surface-3); color: var(--text-2); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }

.price-best {
	font-weight: 600;
	color: var(--ok);
	background: var(--ok-soft);
	border-radius: var(--r-sm);
	padding: 0.125rem 0.4375rem;
	margin: -0.125rem -0.4375rem;
}

/* ---------- Buttons ---------- */

.btn {
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 2.375rem;
	padding: 0 1rem;
	border-radius: var(--r-sm);
	border: 1px solid transparent;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
	transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out), color 120ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }

.btn-ghost {
	background: transparent;
	border-color: var(--border-strong);
	color: var(--text-2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn-warn {
	background: transparent;
	border-color: color-mix(in srgb, var(--warn) 55%, transparent);
	color: var(--warn);
}
.btn-warn:hover { background: color-mix(in srgb, var(--warn) 14%, transparent); border-color: var(--warn); color: var(--warn); }

.btn-danger {
	background: transparent;
	border-color: color-mix(in srgb, var(--danger) 55%, transparent);
	color: var(--danger);
}
.btn-danger:hover { background: var(--danger); border-color: var(--danger); color: var(--on-accent); }

.btn-sm { height: 1.75rem; padding: 0 0.625rem; font-size: 0.75rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ---------- Forms ---------- */

.field { display: block; margin-bottom: 1rem; }
.field > span, .field > label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-2);
	margin-bottom: 0.375rem;
}

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], select {
	width: 100%;
	height: 2.375rem;
	padding: 0 0.75rem;
	font-family: var(--font-ui);
	font-size: 0.875rem;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	transition: border-color 120ms var(--ease-out), background 120ms var(--ease-out);
}
input:focus, select:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--surface);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type="number"] { font-family: var(--font-mono); font-size: 0.8125rem; }
select { cursor: pointer; }
input[type="file"] { font-size: 0.875rem; color: var(--text-2); }

.form-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
	gap: 0 1rem;
}

/* Inline group: inputs and button on one row */
.input-row { display: flex; gap: 0.625rem; }
.input-row input { flex: 1; }
.input-row select { flex: 0 0 auto; width: auto; }
.input-row .btn { flex-shrink: 0; }
@media (max-width: 640px) {
	.input-row { flex-direction: column; }
	.input-row input { flex: none; }
}

.form-error {
	display: block;
	white-space: pre-line;
	background: var(--danger-soft);
	color: var(--danger);
	border-radius: var(--r-sm);
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	margin-bottom: 1rem;
}
.form-ok {
	display: block;
	background: var(--ok-soft);
	color: var(--ok);
	border-radius: var(--r-sm);
	padding: 0.625rem 0.75rem;
	font-size: 0.8125rem;
	margin-bottom: 1rem;
}

/* ---------- Deploy target form (controller) ---------- */

.target-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 0 1.25rem;
	align-items: start;
}
.field-help { display: block; margin-top: 0.3125rem; font-size: 0.75rem; color: var(--text-3); overflow-wrap: anywhere; }
.form-grid .field-wide { grid-column: 1 / -1; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; font-size: 0.75rem; color: var(--accent); cursor: pointer; white-space: nowrap; }
.link-btn:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.link-btn[hidden] { display: none; }
.field-help .link-btn { margin-left: 0.375rem; }
.check-field { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.5rem; padding-top: 1.375rem; }
.check-field > span { margin: 0; }
.check-field input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--accent); }
.check-field .field-help { grid-column: 1 / -1; }
textarea {
	width: 100%;
	min-height: 4.5rem;
	padding: 0.5rem 0.75rem;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border-strong);
	border-radius: var(--r-sm);
	resize: vertical;
}
textarea:focus { outline: none; border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px var(--accent-soft); }
input[readonly] { color: var(--text-2); }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.5rem; }
.target-form .target-group { display: none; }
.target-form:has(select[name="type"] option[value="docker"]:checked) .target-group[data-types~="docker"],
.target-form:has(select[name="type"] option[value="kubernetes"]:checked) .target-group[data-types~="kubernetes"],
.target-form:has(select[name="type"] option[value="upcloud"]:checked) .target-group[data-types~="upcloud"],
.target-form:has(select[name="type"] option[value="ecs"]:checked) .target-group[data-types~="ecs"],
.target-form:has(select[name="type"] option[value="cloudrun"]:checked) .target-group[data-types~="cloudrun"],
.target-form:has(select[name="type"] option[value="containerapps"]:checked) .target-group[data-types~="containerapps"],
.target-form:has(select[name="type"] option[value="onprem"]:checked) .target-group[data-types~="onprem"] { display: block; }
.target-form:has(select[name="replica.type"] option[value=""]:checked) .target-group[data-replica],
.target-form:has(select[name="replica.type"] option[value="minio"]:checked) .target-group[data-replica]:not([data-replica="*"], [data-replica="minio"]),
.target-form:has(select[name="replica.type"] option[value="s3"]:checked) .target-group[data-replica]:not([data-replica="*"], [data-replica="s3"]),
.target-form:has(select[name="replica.type"] option[value="gcs"]:checked) .target-group[data-replica]:not([data-replica="*"], [data-replica="gcs"]),
.target-form:has(select[name="replica.type"] option[value="azure"]:checked) .target-group[data-replica]:not([data-replica="*"], [data-replica="azure"]),
.target-form:has(select[name="replica.type"] option[value="upcloud"]:checked) .target-group[data-replica]:not([data-replica="*"], [data-replica="upcloud"]) { display: none; }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.check-error {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-width: 30rem;
	margin-top: 0.25rem;
	font-size: 0.75rem;
	color: var(--danger);
	overflow-wrap: anywhere;
}
.audit-detail { font-family: var(--font-mono); overflow-wrap: anywhere; }

/* ---------- Auth pages ---------- */

.auth-wrap {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 1.75rem 1.75rem;
}
.auth-card {
	width: 100%;
	max-width: 25rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
	padding: 2rem;
	animation: rise 320ms var(--ease-out) both;
}
.auth-card .brand { justify-content: center; margin-bottom: 1.5rem; }
.auth-card h1 { font-size: 1.25rem; text-align: center; margin-bottom: 1.25rem; }
.auth-foot {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
	text-align: center;
	font-size: 0.8125rem;
	color: var(--text-2);
}
.auth-legal { margin-top: 1rem; text-align: center; font-size: 0.6875rem; }
.auth-legal a { color: var(--text-3); }
.auth-orgs {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.confirm-card { max-width: 30rem; }
.confirm-card p { margin: 0 0 1rem; font-size: 0.875rem; color: var(--text-2); }
.confirm-facts {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--r-sm);
	font-size: 0.875rem;
}
.confirm-facts dt { color: var(--text-2); }
.confirm-facts dd { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.confirm-facts small {
	display: block;
	font-weight: 400;
	font-family: var(--font-mono);
	font-size: 0.75rem;
	color: var(--text-3);
}
.confirm-card .confirm-heading { margin-bottom: 0.375rem; font-weight: 600; color: var(--text); }
.confirm-grants {
	display: grid;
	gap: 0.375rem;
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	font-size: 0.875rem;
}
.confirm-card .confirm-warn {
	padding: 0.625rem 0.75rem;
	border-left: 3px solid var(--warn);
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--warn) 12%, transparent);
	color: var(--text);
}
.confirm-actions { display: grid; gap: 0.5rem; margin-top: 1.25rem; }
@media (max-width: 30rem) {
	.confirm-card { padding: 1.5rem 1.25rem; }
	.confirm-facts { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
	.confirm-facts dd + dt { margin-top: 0.5rem; }
}

@keyframes rise {
	from { opacity: 0; transform: translateY(0.5rem); }
	to { opacity: 1; transform: none; }
}

/* ---------- Dialog ---------- */

dialog {
	border: none;
	padding: 0;
	background: transparent;
	max-width: min(27.5rem, calc(100vw - 2rem));
	width: 100%;
}
dialog::backdrop {
	background: rgba(8, 11, 17, 0.55);
	backdrop-filter: blur(2px);
}
.dialog-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
	overflow: hidden;
}
dialog[open] .dialog-card { animation: dialogIn 200ms var(--ease-out) both; }
@keyframes dialogIn {
	from { opacity: 0; transform: scale(0.95); }
	to { opacity: 1; transform: scale(1); }
}
.dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem 0.75rem 1.25rem;
	border-bottom: 1px solid var(--border);
	background: var(--surface-2);
	font-weight: 600;
}
.dialog-head .dialog-title { display: flex; align-items: center; gap: 0.5rem; color: var(--danger); }
.dialog-title svg { width: 1rem; height: 1rem; }
.dialog-body { padding: 1.25rem; font-size: 0.875rem; color: var(--text-2); white-space: pre-line; }
.dialog-content { padding: 1.25rem; display: grid; gap: 1rem; }
.dialog-content .page-desc { margin: 0; }
dialog.share-dialog { max-width: min(40rem, calc(100vw - 2rem)); }
.share-dialog .input-row select:first-child { flex: 1; min-width: 0; }
.share-check { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.625rem; font-size: 0.8125rem; color: var(--text-2); }
.update-all-list { margin: 0; padding-left: 1.25rem; max-height: 40vh; overflow-y: auto; display: grid; gap: 0.5rem; font-size: 0.875rem; }
.share-link { display: block; width: 100%; margin-top: 0.375rem; font-family: var(--font-mono); font-size: 0.75rem; }

/* ---------- Stat tiles (price comparison) ---------- */

.stat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.stat {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
	padding: 0.875rem 1rem;
}
.stat-label {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 0.375rem;
}
.stat-value {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--text);
}
.stat-best { border-color: var(--ok); }
.stat-best .stat-value { color: var(--ok); }
.stat-note { margin-top: 0.25rem; font-size: 0.75rem; color: var(--text-3); }
.stat-note.text-danger, small.text-danger { color: var(--danger); }
table.data tfoot tr + tr td { border-top: none; padding-top: 0; }

/* ---------- Statistics charts (inline SVG) ---------- */

.stats-totals { margin-top: 1rem; }
.stats-totals .stat-value { font-family: var(--font-ui); font-variant-numeric: normal; font-size: 1.5rem; }
.stats-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-bottom: 0.75rem;
	font-size: 0.8125rem;
	color: var(--text-2);
}
.stats-legend span { display: inline-flex; align-items: center; gap: 0.5rem; }
.stats-swatch { display: inline-block; width: 1rem; height: 2px; border-radius: 1px; }
.stats-swatch-visits { background: var(--chart-1); }
.stats-swatch-unique { background: var(--chart-2); }
.stats-chart-wrap { position: relative; overflow-x: auto; }
.stats-chart { display: block; width: 100%; min-width: 36rem; height: auto; font-family: var(--font-ui); }
.stats-chart:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.stats-chart text { font-size: 13px; fill: var(--text-3); }
.stats-chart .stats-tick { font-variant-numeric: tabular-nums; }
.stats-chart .stats-label { fill: var(--text); }
.stats-chart .stats-value { fill: var(--text-2); font-variant-numeric: tabular-nums; }
.stats-chart .stats-end { fill: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.stats-chart .stats-grid-line { stroke: var(--border); stroke-width: 1px; }
.stats-chart .stats-axis { stroke: var(--border-strong); stroke-width: 1px; }
.stats-chart .stats-area { fill: var(--chart-1); opacity: 0.1; }
.stats-chart .stats-line, .stats-chart .stats-key { fill: none; stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.stats-chart .stats-line-visits, .stats-chart .stats-key-visits { stroke: var(--chart-1); }
.stats-chart .stats-line-unique, .stats-chart .stats-key-unique { stroke: var(--chart-2); }
.stats-chart .stats-marker { stroke: var(--surface); stroke-width: 2px; }
.stats-chart .stats-marker-visits { fill: var(--chart-1); }
.stats-chart .stats-marker-unique { fill: var(--chart-2); }
.stats-chart .stats-col { fill: none; pointer-events: all; }
.stats-chart .stats-cross { stroke: var(--text-3); stroke-width: 1px; }
.stats-chart .stats-cross, .stats-chart .stats-hover { visibility: hidden; pointer-events: none; }
.stats-chart.is-hover .stats-cross, .stats-chart.is-hover .stats-hover { visibility: visible; }
.stats-funnel-bar { fill: var(--chart-1); }
.stats-funnel-bar:hover { opacity: 0.8; }
.stats-tip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
	padding: 0.5rem 0.75rem;
	border-radius: var(--r-sm);
	background: var(--tooltip-bg);
	color: var(--tooltip-fg);
	box-shadow: var(--shadow-2);
	font-size: 0.8125rem;
	white-space: nowrap;
}
.stats-tip-day { margin-bottom: 0.25rem; opacity: 0.75; }
.stats-tip-row { display: flex; align-items: center; gap: 0.5rem; }
.stats-tip-row strong { font-variant-numeric: tabular-nums; }
.stats-tip-row span { opacity: 0.75; }
.stats-details summary {
	cursor: pointer;
	padding: 0.875rem 1.25rem;
	border-top: 1px solid var(--border);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--text-2);
}
.stats-details summary:hover { color: var(--text); background: var(--surface-2); }
.stats-details summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Definition list (admin) ---------- */

.meta-list {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 0.5rem 1.5rem;
	margin: 0;
	font-size: 0.875rem;
}
.feature-list { list-style: none; margin: 1rem 0 0; padding: 0.75rem 0 0; border-top: 1px solid var(--border); display: grid; gap: 0.5rem; font-size: 0.875rem; }
.feature-list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.feature-list li > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.feature-list + form { margin-top: 1.25rem; }
.feature-checks { border: 0; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.625rem; min-width: 0; }
.feature-checks legend { padding: 0; margin-bottom: 0.5rem; font-size: 0.8125rem; color: var(--text-2); }
.feature-checks .check-field { padding-top: 0; align-items: start; }
.feature-checks .check-field input { margin-top: 0.1875rem; }
.feature-checks .check-field > span { overflow-wrap: anywhere; }
.feature-checks + p { margin: 0 0 1rem; }
.meta-list dt { color: var(--text-2); }
.meta-list dd { margin: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
@media (max-width: 640px) {
	.meta-list { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
	.meta-list dd + dt { margin-top: 0.625rem; }
}
pre.report { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.8125rem; }

/* ---------- Action sections (settings rows) ---------- */

.action-list { container: actions / inline-size; }
.action-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.875rem 2.5rem;
	padding: 1.25rem;
}
.action-row + .action-row { border-top: 1px solid var(--border); }
.action-row-forms { align-items: start; }
.action-info h3, .action-info h4 { font-size: 0.9375rem; }
.action-state {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem;
	margin-top: 0.5rem;
	font-size: 0.875rem;
}
.action-desc { margin-top: 0.375rem; max-width: 38rem; font-size: 0.8125rem; color: var(--text-2); }
.action-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.625rem; }
.action-forms { display: grid; gap: 1.125rem; width: 25rem; }
.action-forms .field { margin: 0; }
.action-forms .input-row select { flex: 1 1 auto; min-width: 0; }
.action-forms .input-row .btn { min-width: 6.5rem; }
.action-toggle { padding-top: 1rem; border-top: 1px solid var(--border); }

.switch {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0;
	border: none;
	background: none;
	color: var(--text);
	font-family: var(--font-ui);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}
.switch-track {
	position: relative;
	flex-shrink: 0;
	width: 2.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background: var(--surface-3);
	border: 1px solid var(--border-strong);
	transition: background 120ms var(--ease-out), border-color 120ms var(--ease-out);
}
.switch-track::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.125rem;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	background: var(--text-2);
	transform: translateY(-50%);
	transition: transform 160ms var(--ease-out), background 120ms var(--ease-out);
}
.switch:hover .switch-track { border-color: var(--accent); }
.switch[aria-checked="true"] .switch-track { background: var(--accent); border-color: var(--accent); }
.switch[aria-checked="true"] .switch-track::after { background: var(--on-accent); transform: translate(1rem, -50%); }

.danger-zone { padding: 1.25rem; border-top: 1px solid var(--border); }
.danger-zone > .kicker { margin-bottom: 0.75rem; color: var(--danger); }
.danger-box {
	border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--danger) 3%, transparent);
}
.danger-box .action-row { padding: 1rem 1.125rem; }
.danger-box .action-row + .action-row { border-top-color: color-mix(in srgb, var(--danger) 22%, var(--border)); }
.danger-box .btn { min-width: 11rem; }

@container actions (max-width: 40rem) {
	.action-row { grid-template-columns: minmax(0, 1fr); }
	.action-controls { justify-content: flex-start; }
	.action-forms { width: auto; }
	.danger-zone { padding: 1rem; }
	.danger-box .action-row { padding: 1rem; }
	.danger-box .btn { min-width: 0; }
}

/* ---------- Changelog ---------- */

.changes + .changes { margin-top: 0.75rem; }
.changes summary { cursor: pointer; font-size: 0.8125rem; }
.changes h2 { margin: 0; font-size: 0.9375rem; }
.change-list { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; font-size: 0.875rem; overflow-wrap: anywhere; }

/* ---------- Nested product panel (item classes) ---------- */

td.products-panel { padding: 0 !important; background: var(--surface-2); }
.products-panel-inner { padding: 1rem 1.25rem 1.25rem; }
.products-panel-head { margin-bottom: 0.625rem; }
table.data-nested { --cell-x: 0.875rem; --cell-edge: 0.875rem; font-size: 0.8125rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 1rem; }
table.data-nested th, table.data-nested td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.products-search { max-width: 26.25rem; margin: 0 0 0.5rem; }
.inline-form { margin: 0; display: inline-flex; }
.directory-add { gap: 0.5rem; }
.directory-add select { width: auto; }
#directory-table td small { overflow-wrap: anywhere; }
#directory-table td:last-child { text-align: right; }
#directory-table .directory-add { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
@media (max-width: 640px) {
	#directory-table thead { display: none; }
	#directory-table tr, #directory-table td { display: block; }
	#directory-table td:first-child { border-bottom: 0; }
	#directory-table td:last-child { text-align: left; padding-top: 0; }
	#directory-table .directory-add { justify-content: flex-start; }
}
#directory-results:not(:empty) { margin-top: 1rem; }
#item-class-list td small:not(.mono) { overflow-wrap: anywhere; }

/* ---------- Error page ---------- */

.error-card { text-align: center; }
.error-code {
	font-family: var(--font-mono);
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--accent);
	margin-bottom: 0.75rem;
}
.error-msg { color: var(--text-2); margin-bottom: 1.5rem; }

/* ---------- Licenses ---------- */

.license-intro { margin: 0 0 1.5rem; color: var(--text-2); font-size: 0.875rem; }
.license-packages { margin: 0.75rem 0 0; padding-left: 1.25rem; font-size: 0.8125rem; }
.card-head h2.kicker { margin: 0; }
.license-text + .license-text { margin-top: 0.75rem; }
.license-text summary { cursor: pointer; font-size: 0.875rem; font-weight: 500; }
.license-note { font-size: 0.75rem; color: var(--text-3); }
.license-version { word-break: break-all; }
.license-image { overflow-wrap: anywhere; }
.license-kind { white-space: nowrap; }
.license-users { margin: 0.5rem 0; font-size: 0.8125rem; color: var(--text-2); overflow-wrap: anywhere; }
.license-text pre { max-height: 30rem; overflow-y: auto; }

/* ---------- Background operations ---------- */

.spinner, .btn.is-busy::before {
	display: inline-block;
	flex: none;
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}
.btn.is-busy::before { content: ""; }
.btn.is-busy { cursor: progress; }
.btn.is-busy:disabled { opacity: 0.75; }
@keyframes spin { to { transform: rotate(360deg); } }

fieldset.op-lock { display: contents; border: 0; margin: 0; padding: 0; min-width: 0; }

.op-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-1);
	margin-bottom: 1.5rem;
	overflow: hidden;
}
.op-done { border-left-color: var(--ok); }
.op-failed { border-left-color: var(--danger); }
.op-main { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1rem 1.25rem; }
.op-icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
}
.op-done .op-icon { background: var(--ok-soft); color: var(--ok); }
.op-failed .op-icon { background: var(--danger-soft); color: var(--danger); }
.op-icon svg, .op-icon .spinner { width: 1.125rem; height: 1.125rem; }
.op-text { flex: 1; min-width: 0; }
.op-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 2rem; }
.op-step, .op-detail { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.op-step { color: var(--accent); font-weight: 600; }
.op-failed .op-detail { color: var(--danger); }
.op-failed-step { margin: 0.25rem 0 0; font-size: 0.8125rem; color: var(--text-2); }
.op-meta { margin: 0.375rem 0 0; font-size: 0.75rem; color: var(--text-3); overflow-wrap: anywhere; }
.op-meta [data-op-elapsed] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-close { flex: none; }
.op-progress { height: 3px; background: var(--accent-soft); overflow: hidden; }
.op-progress span {
	display: block;
	width: 30%;
	height: 100%;
	background: var(--accent);
	animation: op-slide 1.6s var(--ease-in-out) infinite;
}
@keyframes op-slide {
	from { transform: translateX(-100%); }
	to { transform: translateX(340%); }
}
.op-badge .spinner { width: 0.6875rem; height: 0.6875rem; border-width: 1.5px; }

@media (prefers-reduced-motion: reduce) {
	.spinner, .btn.is-busy::before { animation: none; }
	.op-progress span { width: 100%; animation: none; opacity: 0.6; }
}

/* ---------- Misc ---------- */

img, video, svg { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}