/* =====================================================================
   Quorvane design system
   Strict-CSP friendly: no inline styles – widths come from .pct-* classes.
   ===================================================================== */

:root {
	color-scheme: light;
	--font: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
	--mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

	--bg: #f4f6fa;
	--surface: #ffffff;
	--surface-2: #f8fafc;
	--surface-3: #eef2f7;
	--border: #e4e8ef;
	--border-strong: #cfd6e1;
	--text: #0f172a;
	--text-2: #475569;
	--text-3: #64748b;

	--primary: #2f5bea;
	--primary-hover: #234bd1;
	--primary-soft: #eaf0ff;
	--primary-text: #2346c4;
	--focus: rgba(47, 91, 234, .28);

	--good: #0ca30c;
	--good-soft: #e8f6e8;
	--good-text: #0a6b12;
	--warning: #fab219;
	--warning-soft: #fff5db;
	--warning-text: #8a5800;
	--critical: #d03b3b;
	--critical-soft: #fdecec;
	--critical-text: #a32323;
	--info: #2a78d6;
	--info-soft: #e8f1fc;
	--info-text: #1c5cab;
	--violet: #6250d6;
	--violet-soft: #efedfc;

	--sidebar-bg: #0b1324;
	--sidebar-bg-2: #0f1a31;
	--sidebar-text: #c9d1e0;
	--sidebar-muted: #7b88a3;
	--sidebar-hover: rgba(255, 255, 255, .06);
	--sidebar-active: rgba(109, 139, 255, .16);
	--sidebar-border: rgba(255, 255, 255, .07);

	--radius: 14px;
	--radius-sm: 10px;
	--radius-xs: 7px;
	--shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
	--shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px -10px rgba(15, 23, 42, .14);
	--shadow-lg: 0 12px 40px -12px rgba(15, 23, 42, .28);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0a0e17;
		--surface: #111827;
		--surface-2: #151d2d;
		--surface-3: #1b2436;
		--border: #222c3f;
		--border-strong: #2e3a51;
		--text: #e7ebf3;
		--text-2: #a9b4c8;
		--text-3: #7f8ba2;
		--primary: #5b7cff;
		--primary-hover: #7390ff;
		--primary-soft: rgba(91, 124, 255, .14);
		--primary-text: #a3b5ff;
		--focus: rgba(91, 124, 255, .35);
		--good-soft: rgba(12, 163, 12, .14);
		--good-text: #6fd56f;
		--warning-soft: rgba(250, 178, 25, .13);
		--warning-text: #fbc95e;
		--critical-soft: rgba(208, 59, 59, .16);
		--critical-text: #f08a8a;
		--info-soft: rgba(42, 120, 214, .16);
		--info-text: #84b6f1;
		--violet-soft: rgba(98, 80, 214, .2);
		--sidebar-bg: #070b14;
		--sidebar-bg-2: #0a1020;
		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .5);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0a0e17;
	--surface: #111827;
	--surface-2: #151d2d;
	--surface-3: #1b2436;
	--border: #222c3f;
	--border-strong: #2e3a51;
	--text: #e7ebf3;
	--text-2: #a9b4c8;
	--text-3: #7f8ba2;
	--primary: #5b7cff;
	--primary-hover: #7390ff;
	--primary-soft: rgba(91, 124, 255, .14);
	--primary-text: #a3b5ff;
	--good-soft: rgba(12, 163, 12, .14);
	--good-text: #6fd56f;
	--warning-soft: rgba(250, 178, 25, .13);
	--warning-text: #fbc95e;
	--critical-soft: rgba(208, 59, 59, .16);
	--critical-text: #f08a8a;
	--info-soft: rgba(42, 120, 214, .16);
	--info-text: #84b6f1;
	--violet-soft: rgba(98, 80, 214, .2);
	--sidebar-bg: #070b14;
	--sidebar-bg-2: #0a1020;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 14px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, p { margin: 0; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }
code, .mono { font-family: var(--mono); font-size: .92em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd { margin: 0; }
button { font: inherit; }
::selection { background: var(--focus); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.icon {
	width: 18px; height: 18px; flex: none;
	fill: none; stroke: currentColor; stroke-width: 1.9;
	stroke-linecap: round; stroke-linejoin: round;
	vertical-align: middle;
}
.icon-sm { width: 15px; height: 15px; }
.muted { color: var(--text-3); }
.small { font-size: 12.5px; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 600; }
.spacer { flex: 1; }
.mt { margin-top: 14px; }
.mt-lg { margin-top: 24px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.stack-lg { display: flex; flex-direction: column; gap: 24px; }
.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }

.sidebar {
	position: sticky; top: 0; height: 100vh;
	display: flex; flex-direction: column; gap: 8px;
	padding: 20px 14px;
	background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-2) 100%);
	color: var(--sidebar-text);
	border-right: 1px solid var(--sidebar-border);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 10px 18px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 6px 14px rgba(47, 91, 234, .45)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; letter-spacing: -.01em; }
.brand-text small { color: var(--sidebar-muted); font-size: 11.5px; letter-spacing: .02em; }

.nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.nav-section {
	padding: 16px 12px 6px; color: var(--sidebar-muted);
	font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.nav-item {
	position: relative; display: flex; align-items: center; gap: 11px;
	padding: 9px 12px; border-radius: 9px;
	color: var(--sidebar-text); font-weight: 500;
	transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }
.nav-item .icon { color: var(--sidebar-muted); transition: color .15s; }
.nav-item:hover .icon { color: #fff; }
.nav-item.active { background: var(--sidebar-active); color: #fff; }
.nav-item.active .icon { color: #8ea5ff; }
.nav-item.active::before {
	content: ""; position: absolute; left: -14px; top: 8px; bottom: 8px; width: 3px;
	border-radius: 0 3px 3px 0; background: #6d8bff;
}
.nav-label { flex: 1; }
.nav-badge {
	min-width: 22px; padding: 1px 7px; border-radius: 999px;
	background: #6d8bff; color: #fff; font-size: 11.5px; font-weight: 700; text-align: center;
}

.sidebar-footer { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: 1px solid var(--sidebar-border); }
.env-pill {
	display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
	margin-left: 8px; padding: 3px 10px; border-radius: 999px;
	background: rgba(250, 178, 25, .12); color: #fbc95e; font-size: 11.5px; font-weight: 600;
}
.env-dot { width: 6px; height: 6px; border-radius: 50%; background: #fab219; }
.user-card { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .04); }
.user-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.25; }
.user-meta strong { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: var(--sidebar-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-card .icon-button { color: var(--sidebar-muted); }
.user-card .icon-button:hover { color: #fff; background: var(--sidebar-hover); }

.main { min-width: 0; padding: 30px 40px 56px; max-width: 1480px; width: 100%; margin: 0 auto; }

.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; flex-wrap: wrap; }
.page-heading h1 { font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -.022em; }
.page-subtitle { margin-top: 6px; color: var(--text-2); }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow {
	display: inline-block; margin-bottom: 6px;
	color: var(--primary-text); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	height: 38px; padding: 0 16px; border-radius: 10px;
	border: 1px solid transparent; cursor: pointer;
	font-size: 13.5px; font-weight: 600; white-space: nowrap;
	transition: background .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .12), inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-success { background: var(--good); color: #fff; }
.btn-success:hover { background: #0a8f0a; }
.btn-danger-soft { background: var(--critical-soft); color: var(--critical-text); }
.btn-danger-soft:hover { background: var(--critical); color: #fff; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.btn-block { width: 100%; height: 42px; }
.icon-button {
	display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
	color: var(--text-3); transition: background .15s, color .15s;
}
.icon-button:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.button-row { display: flex; gap: 10px; justify-content: flex-end; }
.button-row .btn { flex: 1; }
.link-subtle { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-weight: 500; font-size: 13px; }
.link-subtle:hover { color: var(--primary-text); text-decoration: none; }
.link-strong { font-weight: 600; }

/* ---------- Cards ---------- */
.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	min-width: 0;
}
.card-header {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 22px 0;
}
.card-header h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.card-header p { margin-top: 2px; color: var(--text-3); font-size: 13px; }
.card-body { padding: 18px 22px 22px; }
.card-footer {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2);
	border-radius: 0 0 var(--radius) var(--radius);
}
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-main { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 24px; align-items: start; }

/* ---------- KPI tiles ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.kpi {
	padding: 18px 20px; background: var(--surface); border: 1px solid var(--border);
	border-radius: var(--radius); box-shadow: var(--shadow);
}
.kpi-head { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-weight: 550; font-size: 13px; }
.kpi-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.kpi-icon .icon { width: 16px; height: 16px; }
.kpi-icon-blue { background: var(--info-soft); color: var(--info-text); }
.kpi-icon-green { background: var(--good-soft); color: var(--good-text); }
.kpi-icon-violet { background: var(--violet-soft); color: var(--violet); }
.kpi-icon-amber { background: var(--warning-soft); color: var(--warning-text); }
.kpi-icon-red { background: var(--critical-soft); color: var(--critical-text); }
.kpi-value { margin-top: 14px; font-size: 30px; line-height: 1.1; font-weight: 700; letter-spacing: -.025em; }
.kpi-hint { margin-top: 6px; color: var(--text-3); font-size: 12.5px; }

/* ---------- Badges & tags ---------- */
.badge {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 3px 10px; border-radius: 999px;
	font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5;
	background: var(--surface-3); color: var(--text-2);
}
.badge-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge-info { background: var(--info-soft); color: var(--info-text); }
.badge-good { background: var(--good-soft); color: var(--good-text); }
.badge-warning { background: var(--warning-soft); color: var(--warning-text); }
.badge-critical { background: var(--critical-soft); color: var(--critical-text); }
.badge-neutral { background: var(--surface-3); color: var(--text-2); }
.badge-good.badge-dot::before { background: var(--good); }
.badge-warning.badge-dot::before { background: var(--warning); }
.badge-critical.badge-dot::before { background: var(--critical); }
.badge-live::before { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }

.tag {
	display: inline-flex; padding: 2px 8px; margin: 0 4px 4px 0; border-radius: 6px;
	background: var(--surface-3); color: var(--text-2); font-size: 12px; font-weight: 500;
}
.tag-event { background: var(--primary-soft); color: var(--primary-text); font-family: var(--mono); font-size: 11.5px; }
.tag-listen { background: var(--violet-soft); color: var(--violet); font-family: var(--mono); font-size: 11.5px; }

/* ---------- Avatars ---------- */
.avatar {
	display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none;
	border-radius: 50%; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #fff;
}
.av-1 { background: linear-gradient(135deg, #6d8bff, #2f5bea); }
.av-2 { background: linear-gradient(135deg, #f0a35e, #e0662d); }
.av-3 { background: linear-gradient(135deg, #3ccf9a, #148f63); }
.av-4 { background: linear-gradient(135deg, #e792b7, #c94c80); }
.av-5 { background: linear-gradient(135deg, #a597f3, #6250d6); }
.av-6 { background: linear-gradient(135deg, #5fc4e0, #1f8bad); }
.av-system { background: var(--surface-3); color: var(--warning-text); font-size: 14px; }
.inline-user { display: inline-flex; align-items: center; gap: 8px; }
.inline-user .avatar { width: 26px; height: 26px; font-size: 10.5px; }

/* ---------- Charts ---------- */
.bar-chart { display: flex; flex-direction: column; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 36px; align-items: center; gap: 14px; }
.bar-label { color: var(--text-2); font-size: 13px; }
.bar-track { position: relative; height: 12px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: #2a78d6; transition: width .5s ease; min-width: 2px; }
.bar-fill.pct-0 { min-width: 0; }
.bar-value { text-align: right; font-weight: 650; font-variant-numeric: tabular-nums; }

.stacked-bar { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; background: var(--surface-3); }
.seg { display: block; height: 100%; flex: 0 1 auto; transition: width .5s ease; }
.seg-green { background: var(--good); }
.seg-amber { background: var(--warning); }
.seg-red { background: var(--critical); }
.legend-list { display: flex; flex-direction: column; gap: 4px; margin-top: 18px; }
.legend-list li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.legend-list li:last-child { border-bottom: 0; }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.swatch-green { background: var(--good); }
.swatch-amber { background: var(--warning); }
.swatch-red { background: var(--critical); }
.tone-green { color: var(--good-text); }
.tone-amber { color: var(--warning-text); }
.tone-red { color: var(--critical-text); }
.legend-text { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.legend-text small, .legend-value small { color: var(--text-3); font-size: 12px; }
.legend-value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; font-variant-numeric: tabular-nums; }

/* ---------- Meters ---------- */
.meter { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter-lg { height: 10px; }
.meter-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width .6s ease; }
.meter-good { background: var(--good); }
.meter-warning { background: var(--warning); }
.meter-critical { background: var(--critical); }
.meter-label { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 13px; color: var(--text-2); }
.meter-scale { display: flex; justify-content: space-between; margin-top: 6px; color: var(--text-3); font-size: 11.5px; }

/* ---------- Lists ---------- */
.task-list, .activity-list { padding: 10px 10px 12px; }
.task {
	display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 10px; color: var(--text);
	transition: background .15s;
}
.task:hover { background: var(--surface-2); text-decoration: none; }
.task-main { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.task-main small { color: var(--text-3); font-size: 12px; }
.task-amount { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }
.activity-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; }
.activity-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.activity-text small { color: var(--text-3); font-size: 12px; }
.empty-inline { display: flex; align-items: center; gap: 10px; padding: 22px; color: var(--text-3); }
.empty-inline .icon { color: var(--good); }

/* ---------- Callouts ---------- */
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.callout .icon { margin-top: 1px; }
.callout p { margin-top: 2px; color: var(--text-2); font-size: 13px; }
.callout small { color: var(--text-3); font-size: 12px; }
.callout-info { background: var(--info-soft); border-color: transparent; }
.callout-info .icon { color: var(--info-text); }
.callout-good { background: var(--good-soft); border-color: transparent; }
.callout-good .icon { color: var(--good-text); }
.callout-critical { background: var(--critical-soft); border-color: transparent; }
.callout-critical .icon { color: var(--critical-text); }
.callout-neutral .icon { color: var(--text-3); }
.callout-lg { padding: 18px; }
.callout-lg .icon { width: 22px; height: 22px; }

/* ---------- Toasts (Wicket FeedbackPanel) ---------- */
.toasts:empty { display: none; }
.feedbackPanel { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.feedbackPanel li {
	display: flex; align-items: center; gap: 10px; padding: 12px 16px;
	border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
	font-weight: 500;
}
.feedbackPanel li::before {
	content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--info);
}
.feedbackPanelSUCCESS { border-color: transparent !important; background: var(--good-soft) !important; color: var(--good-text); }
.feedbackPanelSUCCESS::before { background: var(--good) !important; }
.feedbackPanelINFO { background: var(--info-soft) !important; border-color: transparent !important; color: var(--info-text); }
.feedbackPanelWARNING { background: var(--warning-soft) !important; border-color: transparent !important; color: var(--warning-text); }
.feedbackPanelWARNING::before { background: var(--warning) !important; }
.feedbackPanelERROR, .feedbackPanelFATAL { background: var(--critical-soft) !important; border-color: transparent !important; color: var(--critical-text); }
.feedbackPanelERROR::before, .feedbackPanelFATAL::before { background: var(--critical) !important; }
.toasts-inline .feedbackPanel { margin: 16px 0 0; }
.toasts-inline .feedbackPanel li { box-shadow: none; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13px; font-weight: 600; color: var(--text); }
.optional { margin-left: 4px; color: var(--text-3); font-weight: 400; font-size: 12px; }
.input {
	width: 100%; height: 40px; padding: 0 12px;
	border: 1px solid var(--border-strong); border-radius: 10px;
	background: var(--surface); color: var(--text);
	font: inherit; font-size: 14px;
	transition: border-color .15s, box-shadow .15s;
}
textarea.input { height: auto; padding: 10px 12px; resize: vertical; min-height: 84px; }
select.input { appearance: none; padding-right: 36px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
	background-position: calc(100% - 18px) 17px, calc(100% - 13px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.input::placeholder { color: var(--text-3); }
.input:hover { border-color: var(--text-3); }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
.input.is-invalid { border-color: var(--critical); }
.input.is-invalid:focus { box-shadow: 0 0 0 4px var(--critical-soft); }
.field-error { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--critical-text); font-size: 12.5px; font-weight: 500; }
.field-error::before { content: "!"; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--critical); color: #fff; font-size: 10px; font-weight: 800; }
.hint { color: var(--text-3); font-size: 12.5px; }
.input-group { display: flex; align-items: stretch; }
.input-addon {
	display: grid; place-items: center; padding: 0 12px; border: 1px solid var(--border-strong); border-right: 0;
	border-radius: 10px 0 0 10px; background: var(--surface-2); color: var(--text-3); font-weight: 600;
}
.input-group .input { border-radius: 0 10px 10px 0; }
.input-group:has(.is-invalid) .input-addon { border-color: var(--critical); }

.form-section { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.form-section:last-child { margin-bottom: 0; }
.form-section legend { padding: 0; margin-bottom: 14px; font-size: 13px; font-weight: 650; color: var(--text-2); text-transform: uppercase; letter-spacing: .05em; }
.form-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 18px; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }

.check {
	display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 10px;
	border: 1px solid var(--border); border-radius: 12px; cursor: pointer; color: var(--text-2); font-size: 13px;
	transition: border-color .15s, background .15s;
}
.check:hover { border-color: var(--border-strong); }
.check:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.check strong { display: block; color: var(--text); margin-bottom: 2px; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex: none; }

/* ---------- Wizard ---------- */
.stepper { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.step {
	display: flex; align-items: center; gap: 12px; padding: 12px 14px;
	border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
	color: var(--text-3);
}
.step-marker {
	position: relative; display: grid; place-items: center; width: 32px; height: 32px; flex: none;
	border-radius: 50%; border: 2px solid var(--border-strong); font-weight: 700; font-size: 13px;
}
.step-check { display: none; width: 16px; height: 16px; stroke-width: 2.6; }
.step-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.step-text strong { color: var(--text-2); font-size: 13.5px; }
.step-text small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step.current { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus); }
.step.current .step-marker { border-color: var(--primary); background: var(--primary); color: #fff; }
.step.current .step-text strong { color: var(--text); }
.step.done .step-marker { border-color: var(--good); background: var(--good); color: #fff; }
.step.done .step-index { display: none; }
.step.done .step-check { display: block; }
.step.done .step-text strong { color: var(--text); }

.wizard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.wizard-card .card-header { padding-bottom: 4px; }
.wizard-card .card-header h2 { font-size: 19px; }
.wizard-card .eyebrow { margin-bottom: 2px; }
.wizard-aside { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 20px; }

.choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.choice-card {
	position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px;
	border: 1px solid var(--border-strong); border-radius: 12px; cursor: pointer; background: var(--surface);
	transition: border-color .15s, box-shadow .15s, background .15s;
}
.choice-card:hover { border-color: var(--primary); }
.choice-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 3px var(--focus); }
.choice-card:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--focus); }
.choice-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--surface-3); color: var(--text-2); }
.choice-card:has(input:checked) .choice-icon { background: var(--primary); color: #fff; }
.choice-title { font-weight: 650; }
.choice-meta { color: var(--text-3); font-size: 12px; }

.slider-field { padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); margin-bottom: 14px; }
.slider-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.slider-head label { font-weight: 600; }
.slider-value { font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.slider { width: 100%; accent-color: var(--primary); height: 6px; cursor: pointer; }
.slider-scale { display: flex; justify-content: space-between; margin-top: 8px; color: var(--text-3); font-size: 12px; }

.offer {
	overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-lg);
	background: var(--surface); border: 1px solid var(--border);
}
.offer-head {
	padding: 22px 22px 20px; color: #fff;
	background: radial-gradient(120% 140% at 100% 0%, #6d8bff 0%, #2f5bea 45%, #1b2f8f 100%);
}
.eyebrow-light { color: rgba(255, 255, 255, .78); }
.offer-instalment { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 40px; font-weight: 750; letter-spacing: -.03em; line-height: 1.1; }
.offer-instalment small { font-size: 14px; font-weight: 500; opacity: .8; letter-spacing: 0; }
.offer-sub { margin-top: 6px; color: rgba(255, 255, 255, .85); }
.offer-details { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.offer-details div { padding: 14px 18px; background: var(--surface); }
.offer-details dt { color: var(--text-3); font-size: 12px; }
.offer-details dd { margin-top: 2px; font-weight: 650; font-variant-numeric: tabular-nums; }
.offer-budget { padding: 16px 18px 18px; border-top: 1px solid var(--border); }
.offer-budget-row { display: flex; justify-content: space-between; margin-bottom: 8px; color: var(--text-2); font-size: 13px; }
.offer-budget-row strong { color: var(--text); font-variant-numeric: tabular-nums; }
.offer-budget .meter-label { margin-top: 12px; }

.next-steps { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; }
.next-steps li { display: flex; gap: 12px; }
.next-steps strong { display: block; font-size: 13.5px; }
.next-steps small { color: var(--text-3); font-size: 12.5px; }
.next-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--primary-soft); color: var(--primary-text); }
.next-icon .icon { width: 16px; height: 16px; }

.review-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; }
.review-block { padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.review-block header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.review-block h3 { font-size: 14px; }
.review-block .dl { grid-template-columns: 1fr; gap: 2px 0; }
.review-block .dl dt { margin-top: 8px; }
.review-block .dl dd { text-align: left; }

/* ---------- Definition lists ---------- */
.dl { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: 10px 18px; }
.dl dt { color: var(--text-3); font-size: 13px; }
.dl dd { font-weight: 550; text-align: right; overflow-wrap: break-word; min-width: 0; }
.dl-left { grid-template-columns: 92px minmax(0, 1fr); }
.dl-left dd { text-align: left; }

/* ---------- Tables ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.search { position: relative; flex: 1; min-width: 240px; max-width: 420px; }
.search .icon { position: absolute; left: 12px; top: 11px; color: var(--text-3); }
.search .input { padding-left: 38px; background: var(--surface-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
	display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
	border-radius: 999px; border: 1px solid var(--border-strong); color: var(--text-2);
	font-size: 12.5px; font-weight: 600; background: var(--surface);
	transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { text-decoration: none; border-color: var(--text-3); color: var(--text); }
.chip.active { background: var(--text); border-color: var(--text); color: var(--surface); }
.chip-count { padding: 0 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 11.5px; }
.chip.active .chip-count { background: rgba(255, 255, 255, .18); color: inherit; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
	padding: 11px 16px; text-align: left; white-space: nowrap;
	color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
	background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.table th.num { text-align: right; }
.table th a { color: inherit; }
.table th a:hover { color: var(--text); text-decoration: none; }
.table td { padding: 13px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.cell-title { display: block; color: var(--text); font-weight: 600; }
a.cell-title:hover { color: var(--primary-text); text-decoration: none; }
.cell-sub { display: block; margin-top: 2px; color: var(--text-3); font-size: 12px; }
.actions-col { width: 1%; text-align: right; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); }
.wicket_orderUp a::after { content: " ↑"; color: var(--primary-text); }
.wicket_orderDown a::after { content: " ↓"; color: var(--primary-text); }
.wicket_orderNone a::after { content: " ↕"; opacity: .35; }
.table-audit .description { min-width: 320px; color: var(--text-2); }
.row-broken { background: var(--critical-soft) !important; }
.row-broken td { color: var(--critical-text); }
.hash { padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); font-size: 11.5px; }
.lock-hint { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; color: var(--text-3); font-size: 12px; }

.pager { display: flex; gap: 4px; }
.pager-link {
	display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px;
	border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 13px;
}
.pager a.pager-link:hover { background: var(--surface-3); text-decoration: none; }
.pager .pager-link[disabled] { opacity: .4; cursor: default; }
.pager span > .pager-link[disabled] { opacity: 1; background: var(--primary); color: #fff; }

/* ---------- Detail page ---------- */
.summary-strip { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.summary-item { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 20px 22px; border-left: 1px solid var(--border); }
.summary-item:first-child { border-left: 0; }
.summary-item strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.summary-label { color: var(--text-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.summary-amount { font-size: 30px; font-weight: 750; letter-spacing: -.025em; line-height: 1.1; }

.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.process-step { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 14px 0 0; color: var(--text-3); }
.process-step:not(:last-child)::after {
	content: ""; flex: 1; height: 2px; min-width: 16px; border-radius: 2px; background: var(--border-strong);
}
.process-step.done:not(:last-child)::after { background: var(--good); }
.process-marker {
	display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%;
	border: 2px solid var(--border-strong); background: var(--surface); font-weight: 700; font-size: 13px;
}
.process-done, .process-failed { display: none; width: 16px; height: 16px; stroke-width: 2.6; }
.process-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.process-text strong { color: var(--text-2); font-size: 13.5px; white-space: nowrap; }
.process-text small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.process-step.done .process-marker { background: var(--good); border-color: var(--good); color: #fff; }
.process-step.done .process-number, .process-step.failed .process-number { display: none; }
.process-step.done .process-done { display: block; }
.process-step.done .process-text strong, .process-step.current .process-text strong, .process-step.failed .process-text strong { color: var(--text); }
.process-step.current .process-marker { border-color: var(--primary); color: var(--primary-text); box-shadow: 0 0 0 5px var(--focus); animation: ring 1.8s ease-in-out infinite; }
.process-step.failed .process-marker { background: var(--critical); border-color: var(--critical); color: #fff; }
.process-step.failed .process-failed { display: block; }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 3px var(--focus); } 50% { box-shadow: 0 0 0 7px transparent; } }

.pending { display: flex; gap: 14px; align-items: flex-start; }
.spinner { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid var(--primary-soft); border-top-color: var(--primary); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton-list { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.skeleton { display: block; height: 44px; border-radius: 10px;
	background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
	background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.verdict { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; margin-bottom: 20px; }
.verdict .icon { width: 26px; height: 26px; }
.verdict-text { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.verdict-text strong { font-size: 16px; }
.verdict-time { color: var(--text-3); font-size: 12px; }
.verdict-green { background: var(--good-soft); color: var(--good-text); }
.verdict-amber { background: var(--warning-soft); color: var(--warning-text); }
.verdict-red { background: var(--critical-soft); color: var(--critical-text); }
.verdict-text span { color: var(--text-2); }

.rule-list { border-top: 1px solid var(--border); }
.rule { display: flex; align-items: flex-start; gap: 12px; padding: 13px 22px; border-bottom: 1px solid var(--border); }
.rule:last-child { border-bottom: 0; }
.rule > .icon { margin-top: 1px; }
.rule-pass > .icon { color: var(--good); }
.rule-warning > .icon { color: var(--warning-text); }
.rule-fail > .icon { color: var(--critical); }
.rule-text { display: flex; flex-direction: column; flex: 1; line-height: 1.4; }
.rule-text span { color: var(--text-2); font-size: 13px; }
.rule-rating { font-size: 12px; font-weight: 650; padding: 2px 9px; border-radius: 999px; }
.rule-pass .rule-rating { background: var(--good-soft); color: var(--good-text); }
.rule-warning .rule-rating { background: var(--warning-soft); color: var(--warning-text); }
.rule-fail .rule-rating { background: var(--critical-soft); color: var(--critical-text); }

.budget { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.budget td { padding: 8px 0; color: var(--text-2); }
.budget td.num { color: var(--text); font-weight: 550; }
.budget .subtotal td { border-top: 1px solid var(--border); padding-top: 12px; font-weight: 650; color: var(--text); }
.budget .total td { border-top: 2px solid var(--text); padding-top: 12px; font-size: 15px; font-weight: 700; color: var(--text); }
.budget .positive { color: var(--good-text) !important; }
.budget .negative { color: var(--critical-text) !important; }

.approval-progress { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.approval-progress > div:first-child { display: flex; flex-direction: column; line-height: 1.35; }
.approval-progress small { color: var(--text-3); font-size: 12px; }
.slots { display: inline-flex; gap: 5px; }
.slot { width: 22px; height: 8px; border-radius: 4px; background: var(--border-strong); }
.slot.filled { background: var(--good); }
.slots-inline { display: flex; align-items: center; gap: 10px; }
.votes { display: flex; flex-direction: column; gap: 12px; }
.votes:empty { display: none; }
.vote { display: flex; gap: 12px; }
.vote-text { flex: 1; min-width: 0; }
.vote-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vote-justification { margin-top: 6px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 13px; }
.vote-form { padding-top: 6px; }

.timeline { position: relative; padding: 18px 22px 22px; }
.timeline-item { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:not(:last-child)::before { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0; width: 2px; background: var(--border); }
.timeline-dot { width: 12px; height: 12px; margin-top: 4px; flex: none; border-radius: 50%; background: var(--surface); border: 3px solid var(--primary); }
.timeline-body { flex: 1; min-width: 0; }
.timeline-head { display: flex; justify-content: space-between; gap: 8px; }
.timeline-head small { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.timeline-body p { margin: 3px 0 4px; color: var(--text-2); font-size: 13px; }

/* ---------- Integrity banner ---------- */
.integrity { display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); transition: background .3s; }
.integrity p { margin-top: 2px; color: var(--text-2); }
.integrity strong { font-size: 15.5px; }
.integrity-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 12px; background: var(--surface-3); color: var(--text-2); }
.integrity-icon .icon { width: 22px; height: 22px; }
.integrity-good { background: var(--good-soft); border-color: transparent; }
.integrity-good .integrity-icon { background: var(--good); color: #fff; }
.integrity-critical { background: var(--critical-soft); border-color: transparent; }
.integrity-critical .integrity-icon { background: var(--critical); color: #fff; }
.integrity-critical strong { color: var(--critical-text); }

/* ---------- Architecture ---------- */
.flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 4px; }
.flow-node {
	display: flex; flex-direction: column; gap: 3px; flex: 1 1 0; min-width: 130px; padding: 14px 16px;
	border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface-2);
}
.flow-node small { color: var(--text-3); font-size: 12px; }
.flow-node-end { border-color: var(--good); background: var(--good-soft); }
.flow-module { color: var(--primary-text); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.flow-edge { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 0 0 172px; padding: 0 8px; }
.flow-edge::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: var(--border-strong); }
.flow-edge::after { content: ""; position: absolute; right: 4px; top: calc(50% - 4px); border: 5px solid transparent; border-left-color: var(--border-strong); border-right: 0; }
.flow-edge code { position: relative; z-index: 1; padding: 2px 8px; border-radius: 6px; background: var(--primary-soft); color: var(--primary-text); font-size: 10.5px; margin-bottom: 26px; }
.flow-mode { position: absolute; top: calc(50% + 8px); color: var(--text-3); font-size: 11px; }
.flow-audit { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px; border-radius: 12px; border: 1px dashed var(--violet); background: var(--violet-soft); color: var(--text-2); }
.flow-audit .icon { color: var(--violet); }
.flow-audit code { color: var(--violet); }

.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.module-card { display: flex; flex-direction: column; padding: 20px; }
.module-head { display: flex; align-items: center; gap: 12px; }
.module-head h3 { font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.module-head code { color: var(--text-3); font-size: 11.5px; }
.module-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: var(--primary-soft); color: var(--primary-text); }
.module-web .module-icon, .module-demo .module-icon { background: var(--surface-3); color: var(--text-2); }
.module-audit .module-icon { background: var(--violet-soft); color: var(--violet); }
.module-description { margin: 14px 0 16px; color: var(--text-2); font-size: 13px; }
.module-facts { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px 12px; font-size: 13px; flex: 1; }
.module-facts dt { color: var(--text-3); font-size: 12px; padding-top: 2px; }
.module-foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---------- Empty state ---------- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 24px; text-align: center; }
.empty-state p { max-width: 520px; color: var(--text-2); }
.empty-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--surface-3); }
.empty-icon .icon { width: 26px; height: 26px; }
.empty-icon-critical { background: var(--critical-soft); color: var(--critical-text); }

/* ---------- Login ---------- */
.login-body { background: var(--surface); }
.login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.login-hero {
	position: relative; overflow: hidden; color: #fff;
	background:
		radial-gradient(60% 50% at 85% 10%, rgba(109, 139, 255, .55) 0%, transparent 70%),
		radial-gradient(50% 45% at 10% 95%, rgba(27, 175, 122, .28) 0%, transparent 70%),
		linear-gradient(160deg, #0b1324 0%, #13225a 55%, #1d3aa8 100%);
}
.login-hero::after {
	content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
	background-image: linear-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .5) 1px, transparent 1px);
	background-size: 44px 44px;
	mask-image: radial-gradient(70% 60% at 50% 40%, #000 0%, transparent 75%);
}
.login-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; height: 100%; padding: 48px 56px; }
.brand-light { padding: 0; }
.brand-light .brand-text small { color: rgba(255, 255, 255, .65); }
.login-pitch h1 { font-size: 46px; line-height: 1.08; font-weight: 750; letter-spacing: -.035em; }
.login-pitch p { max-width: 520px; margin-top: 18px; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.6; }
.login-features { display: flex; flex-direction: column; gap: 18px; max-width: 540px; }
.login-features li { display: flex; gap: 14px; }
.login-features strong { display: block; font-size: 14.5px; }
.login-features span { color: rgba(255, 255, 255, .7); font-size: 13.5px; }
.feature-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); }
.login-stack { color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.login-panel { display: grid; place-items: center; padding: 48px 32px; background: var(--bg); }
.login-card { width: 100%; max-width: 440px; }
.login-card h2 { font-size: 28px; letter-spacing: -.02em; }
.login-card > .muted { margin-top: 6px; }
.login-card form { margin-top: 24px; }
.divider { display: flex; align-items: center; gap: 12px; margin: 28px 0 16px; color: var(--text-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }
.demo-accounts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.demo-account {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
	padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
	transition: border-color .15s, box-shadow .15s, transform .1s;
}
.demo-account:hover { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); text-decoration: none; }
.demo-account .avatar { grid-row: span 2; width: 36px; height: 36px; }
.demo-account-meta { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.demo-account-meta small { color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-account-role { grid-column: 3; grid-row: 1; justify-self: end; color: var(--primary-text); font-size: 11.5px; font-weight: 650; }
.demo-account-user { grid-column: 3; grid-row: 2; justify-self: end; color: var(--text-3); font-size: 11.5px; }
.login-card code { padding: 1px 6px; border-radius: 5px; background: var(--surface-3); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
	.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.review-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1100px) {
	.grid-main, .grid-2, .wizard-layout { grid-template-columns: minmax(0, 1fr); }
	.wizard-aside { position: static; }
	.summary-strip { grid-template-columns: 1fr 1fr; }
	.summary-item:nth-child(3) { border-left: 0; }
	.summary-item:nth-child(n+3) { border-top: 1px solid var(--border); }
	.hide-md { display: none; }
	.login { grid-template-columns: 1fr; }
	.login-hero-inner { padding: 36px 32px; gap: 32px; }
	.login-pitch h1 { font-size: 34px; }
}
@media (max-width: 860px) {
	.shell { grid-template-columns: minmax(0, 1fr); }
	.task { flex-wrap: wrap; }
	.task-amount { min-width: 0; }
	.sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 12px 16px; gap: 6px; }
	.brand { padding: 4px; }
	.nav { flex-direction: row; overflow-x: auto; flex-basis: 100%; order: 3; }
	.nav-section { display: none; }
	.nav-item { white-space: nowrap; flex: none; }
	.nav-item.active::before { display: none; }
	.sidebar-footer { flex-direction: row; align-items: center; border-top: 0; padding-top: 0; margin-left: auto; }
	.env-pill, .user-meta { display: none; }
	.main { padding: 22px 16px 40px; }
	.stepper, .process { grid-template-columns: 1fr 1fr; gap: 12px; }
	.process-step::after { display: none; }
	.form-grid { grid-template-columns: 1fr; }
	.span-2, .span-3, .span-4, .span-6 { grid-column: auto; }
	.page-heading h1 { font-size: 22px; }
}
@media (max-width: 560px) {
	.kpi-grid, .choice-grid, .stepper, .process { grid-template-columns: 1fr; }
	.summary-strip { grid-template-columns: 1fr; }
	.summary-item { border-left: 0 !important; border-top: 1px solid var(--border); }
	.summary-item:first-child { border-top: 0; }
	.bar-row { grid-template-columns: 110px minmax(0, 1fr) 30px; }
	.login-hero { display: none; }
	.login-panel { padding: 32px 16px; }
	.page-header { align-items: flex-start; }
}

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

/* ---------- Width utilities (generated) ---------- */
.pct-0 { width: 0%; }
.pct-1 { width: 1%; }
.pct-2 { width: 2%; }
.pct-3 { width: 3%; }
.pct-4 { width: 4%; }
.pct-5 { width: 5%; }
.pct-6 { width: 6%; }
.pct-7 { width: 7%; }
.pct-8 { width: 8%; }
.pct-9 { width: 9%; }
.pct-10 { width: 10%; }
.pct-11 { width: 11%; }
.pct-12 { width: 12%; }
.pct-13 { width: 13%; }
.pct-14 { width: 14%; }
.pct-15 { width: 15%; }
.pct-16 { width: 16%; }
.pct-17 { width: 17%; }
.pct-18 { width: 18%; }
.pct-19 { width: 19%; }
.pct-20 { width: 20%; }
.pct-21 { width: 21%; }
.pct-22 { width: 22%; }
.pct-23 { width: 23%; }
.pct-24 { width: 24%; }
.pct-25 { width: 25%; }
.pct-26 { width: 26%; }
.pct-27 { width: 27%; }
.pct-28 { width: 28%; }
.pct-29 { width: 29%; }
.pct-30 { width: 30%; }
.pct-31 { width: 31%; }
.pct-32 { width: 32%; }
.pct-33 { width: 33%; }
.pct-34 { width: 34%; }
.pct-35 { width: 35%; }
.pct-36 { width: 36%; }
.pct-37 { width: 37%; }
.pct-38 { width: 38%; }
.pct-39 { width: 39%; }
.pct-40 { width: 40%; }
.pct-41 { width: 41%; }
.pct-42 { width: 42%; }
.pct-43 { width: 43%; }
.pct-44 { width: 44%; }
.pct-45 { width: 45%; }
.pct-46 { width: 46%; }
.pct-47 { width: 47%; }
.pct-48 { width: 48%; }
.pct-49 { width: 49%; }
.pct-50 { width: 50%; }
.pct-51 { width: 51%; }
.pct-52 { width: 52%; }
.pct-53 { width: 53%; }
.pct-54 { width: 54%; }
.pct-55 { width: 55%; }
.pct-56 { width: 56%; }
.pct-57 { width: 57%; }
.pct-58 { width: 58%; }
.pct-59 { width: 59%; }
.pct-60 { width: 60%; }
.pct-61 { width: 61%; }
.pct-62 { width: 62%; }
.pct-63 { width: 63%; }
.pct-64 { width: 64%; }
.pct-65 { width: 65%; }
.pct-66 { width: 66%; }
.pct-67 { width: 67%; }
.pct-68 { width: 68%; }
.pct-69 { width: 69%; }
.pct-70 { width: 70%; }
.pct-71 { width: 71%; }
.pct-72 { width: 72%; }
.pct-73 { width: 73%; }
.pct-74 { width: 74%; }
.pct-75 { width: 75%; }
.pct-76 { width: 76%; }
.pct-77 { width: 77%; }
.pct-78 { width: 78%; }
.pct-79 { width: 79%; }
.pct-80 { width: 80%; }
.pct-81 { width: 81%; }
.pct-82 { width: 82%; }
.pct-83 { width: 83%; }
.pct-84 { width: 84%; }
.pct-85 { width: 85%; }
.pct-86 { width: 86%; }
.pct-87 { width: 87%; }
.pct-88 { width: 88%; }
.pct-89 { width: 89%; }
.pct-90 { width: 90%; }
.pct-91 { width: 91%; }
.pct-92 { width: 92%; }
.pct-93 { width: 93%; }
.pct-94 { width: 94%; }
.pct-95 { width: 95%; }
.pct-96 { width: 96%; }
.pct-97 { width: 97%; }
.pct-98 { width: 98%; }
.pct-99 { width: 99%; }
.pct-100 { width: 100%; }