@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
	[x-cloak] {
		display: none !important;
	}

	:root {
		color-scheme: light;
		--font-root: 15px;
		--type-kicker: 0.7rem;
		--type-caption: 0.76rem;
		--type-label: 0.84rem;
		--type-body: 0.94rem;
		--type-body-strong: 0.98rem;
		--type-title-sm: 1.08rem;
		--type-title-md: clamp(1.22rem, 1.12rem + 0.25vw, 1.38rem);
		--type-title-lg: clamp(1.35rem, 1.18rem + 0.52vw, 1.72rem);
		--leading-tight: 1.2;
		--leading-body: 1.55;
		--app-bg: #efe4e6;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(181, 76, 90, 0.14), transparent 26%), radial-gradient(circle at right 12%, rgba(138, 68, 81, 0.12), transparent 28%), linear-gradient(180deg, #f8eef0 0%, #ecdfe2 100%);
		--shell-surface: rgba(248, 239, 241, 0.84);
		--sidebar-surface: rgba(243, 232, 235, 0.92);
		--panel-bg: rgba(252, 246, 247, 0.9);
		--panel-soft: rgba(255, 249, 250, 0.74);
		--panel-border: rgba(132, 88, 95, 0.14);
		--text-primary: #3a2328;
		--text-muted: #7b5b61;
		--text-soft: #9b7d83;
		--field-bg: rgba(255, 250, 251, 0.96);
		--field-border: rgba(168, 122, 130, 0.18);
		--field-focus: rgba(181, 76, 90, 0.16);
		--accent: #b54c5a;
		--accent-strong: #963947;
		--accent-contrast: #fff7f8;
		--shadow-color: rgba(72, 37, 44, 0.09);
	}

	html[data-theme-preset='sakura'] {
		--app-bg: #dfe7ee;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(194, 165, 109, 0.16), transparent 28%), radial-gradient(circle at right 12%, rgba(84, 122, 149, 0.16), transparent 28%), linear-gradient(180deg, #eef2f6 0%, #dde6ee 100%);
		--shell-surface: rgba(238, 243, 247, 0.84);
		--sidebar-surface: rgba(230, 236, 242, 0.92);
		--panel-bg: rgba(244, 247, 250, 0.9);
		--panel-soft: rgba(249, 251, 253, 0.72);
		--panel-border: rgba(44, 57, 71, 0.14);
		--text-primary: #2c3947;
		--text-muted: #62707e;
		--text-soft: #86929d;
		--field-bg: rgba(248, 250, 252, 0.96);
		--field-border: rgba(84, 122, 149, 0.18);
		--field-focus: rgba(84, 122, 149, 0.18);
		--accent: #547a95;
		--accent-strong: #3f6179;
		--accent-contrast: #f8fafc;
		--shadow-color: rgba(44, 57, 71, 0.08);
	}

	html[data-theme-preset='citrus'] {
		--app-bg: #e6ebd0;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(170, 181, 62, 0.17), transparent 28%), radial-gradient(circle at right 10%, rgba(113, 132, 61, 0.14), transparent 26%), linear-gradient(180deg, #f3f6e8 0%, #e3e8cf 100%);
		--shell-surface: rgba(244, 247, 234, 0.84);
		--sidebar-surface: rgba(239, 243, 226, 0.92);
		--panel-bg: rgba(249, 251, 242, 0.9);
		--panel-soft: rgba(253, 255, 248, 0.7);
		--panel-border: rgba(108, 120, 58, 0.14);
		--text-primary: #313724;
		--text-muted: #6f7658;
		--text-soft: #8b9271;
		--field-bg: rgba(253, 255, 249, 0.96);
		--field-border: rgba(123, 136, 68, 0.18);
		--field-focus: rgba(170, 181, 62, 0.18);
		--accent: #aab53e;
		--accent-strong: #8c9630;
		--accent-contrast: #fbfde8;
		--shadow-color: rgba(70, 76, 38, 0.08);
	}

	html[data-theme-preset='eelo'] {
		--app-bg: #e6e9f4;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(31, 42, 122, 0.16), transparent 28%), radial-gradient(circle at right 10%, rgba(217, 149, 40, 0.16), transparent 26%), linear-gradient(180deg, #f3f4fa 0%, #e1e5f1 100%);
		--shell-surface: rgba(243, 244, 250, 0.86);
		--sidebar-surface: rgba(237, 240, 249, 0.92);
		--panel-bg: rgba(248, 249, 253, 0.92);
		--panel-soft: rgba(253, 253, 255, 0.72);
		--panel-border: rgba(31, 42, 122, 0.14);
		--text-primary: #1f2a7a;
		--text-muted: #4d589c;
		--text-soft: #7782b1;
		--field-bg: rgba(252, 253, 255, 0.96);
		--field-border: rgba(31, 42, 122, 0.18);
		--field-focus: rgba(217, 149, 40, 0.2);
		--accent: #d99528;
		--accent-strong: #b87916;
		--accent-contrast: #f8fbff;
		--shadow-color: rgba(19, 26, 76, 0.1);
	}

	html.dark {
		color-scheme: dark;
	}

	html[data-theme-preset='lagoon'] {
		--app-bg: #dde7ea;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(61, 143, 141, 0.18), transparent 26%), radial-gradient(circle at right 15%, rgba(84, 117, 122, 0.14), transparent 24%), linear-gradient(180deg, #eef4f5 0%, #dce7e9 100%);
		--shell-surface: rgba(242, 247, 247, 0.84);
		--sidebar-surface: rgba(235, 242, 243, 0.92);
		--panel-bg: rgba(247, 251, 251, 0.9);
		--panel-soft: rgba(255, 255, 255, 0.68);
		--panel-border: rgba(49, 92, 97, 0.14);
		--text-primary: #24343a;
		--text-muted: #63777d;
		--text-soft: #7e9297;
		--field-bg: rgba(255, 255, 255, 0.94);
		--field-border: rgba(86, 120, 126, 0.18);
		--field-focus: rgba(61, 143, 141, 0.18);
		--accent: #3d8f8d;
		--accent-strong: #347b79;
		--accent-contrast: #f3ffff;
		--shadow-color: rgba(39, 67, 72, 0.08);
	}

	html[data-theme-preset='ember'] {
		--app-bg: #e7e1e2;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(154, 111, 121, 0.16), transparent 28%), radial-gradient(circle at right 12%, rgba(121, 102, 113, 0.14), transparent 28%), linear-gradient(180deg, #f3efef 0%, #e3dbdd 100%);
		--shell-surface: rgba(245, 241, 241, 0.84);
		--sidebar-surface: rgba(239, 233, 234, 0.92);
		--panel-bg: rgba(250, 247, 247, 0.9);
		--panel-soft: rgba(253, 250, 250, 0.7);
		--panel-border: rgba(111, 93, 101, 0.14);
		--text-primary: #342d31;
		--text-muted: #71666b;
		--text-soft: #8d8187;
		--field-bg: rgba(253, 251, 251, 0.95);
		--field-border: rgba(127, 107, 115, 0.17);
		--field-focus: rgba(154, 111, 121, 0.18);
		--accent: #9a6f79;
		--accent-strong: #825b65;
		--accent-contrast: #fff8f9;
		--shadow-color: rgba(68, 58, 63, 0.08);
	}

	html[data-theme-preset='midnight'] {
		--app-bg: #101724;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(74, 182, 255, 0.18), transparent 28%), radial-gradient(circle at right 15%, rgba(45, 89, 132, 0.18), transparent 25%), linear-gradient(180deg, #111a29 0%, #0d1420 100%);
		--shell-surface: rgba(20, 30, 46, 0.84);
		--sidebar-surface: rgba(17, 27, 43, 0.94);
		--panel-bg: rgba(18, 28, 43, 0.92);
		--panel-soft: rgba(25, 37, 58, 0.74);
		--panel-border: rgba(129, 160, 195, 0.12);
		--text-primary: #dfebf6;
		--text-muted: #91a8be;
		--text-soft: #6f8599;
		--field-bg: rgba(12, 20, 31, 0.9);
		--field-border: rgba(103, 129, 157, 0.22);
		--field-focus: rgba(74, 182, 255, 0.2);
		--accent: #4ab6ff;
		--accent-strong: #2b9ff0;
		--accent-contrast: #06131f;
		--shadow-color: rgba(2, 8, 18, 0.34);
	}

	html.dark[data-theme-preset='cleopatra'] {
		--app-bg: #1a1013;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(181, 76, 90, 0.16), transparent 25%), radial-gradient(circle at right 15%, rgba(120, 58, 69, 0.2), transparent 26%), linear-gradient(180deg, #1d1215 0%, #130b0d 100%);
		--shell-surface: rgba(31, 18, 22, 0.84);
		--sidebar-surface: rgba(26, 15, 19, 0.94);
		--panel-bg: rgba(34, 20, 24, 0.92);
		--panel-soft: rgba(43, 26, 31, 0.74);
		--panel-border: rgba(178, 120, 129, 0.14);
		--text-primary: #f4e6e8;
		--text-muted: #c7a9af;
		--text-soft: #9a7a81;
		--field-bg: rgba(22, 13, 16, 0.9);
		--field-border: rgba(151, 92, 102, 0.22);
		--field-focus: rgba(181, 76, 90, 0.2);
		--accent: #d45d6c;
		--accent-strong: #b74756;
		--accent-contrast: #180b0e;
		--shadow-color: rgba(0, 0, 0, 0.34);
	}

	html.dark[data-theme-preset='lagoon'] {
		--app-bg: #0f1b1e;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(61, 143, 141, 0.16), transparent 25%), radial-gradient(circle at right 10%, rgba(49, 92, 97, 0.2), transparent 25%), linear-gradient(180deg, #0d191d 0%, #0a1417 100%);
		--shell-surface: rgba(14, 26, 30, 0.84);
		--sidebar-surface: rgba(12, 22, 26, 0.94);
		--panel-bg: rgba(16, 28, 33, 0.92);
		--panel-soft: rgba(22, 36, 41, 0.74);
		--panel-border: rgba(116, 154, 160, 0.12);
		--text-primary: #e3f0ef;
		--text-muted: #a6bfbe;
		--text-soft: #79908f;
		--field-bg: rgba(9, 17, 20, 0.9);
		--field-border: rgba(86, 120, 126, 0.22);
		--field-focus: rgba(61, 143, 141, 0.2);
		--accent: #58b2af;
		--accent-strong: #409895;
		--accent-contrast: #071617;
		--shadow-color: rgba(0, 0, 0, 0.3);
	}

	html.dark[data-theme-preset='ember'] {
		--app-bg: #171316;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(154, 111, 121, 0.16), transparent 26%), radial-gradient(circle at right 15%, rgba(101, 82, 91, 0.2), transparent 25%), linear-gradient(180deg, #181417 0%, #110d10 100%);
		--shell-surface: rgba(24, 20, 23, 0.84);
		--sidebar-surface: rgba(21, 17, 20, 0.94);
		--panel-bg: rgba(28, 23, 26, 0.92);
		--panel-soft: rgba(36, 30, 34, 0.74);
		--panel-border: rgba(161, 131, 142, 0.12);
		--text-primary: #f0e6e8;
		--text-muted: #beaeb4;
		--text-soft: #8c7d84;
		--field-bg: rgba(17, 13, 16, 0.9);
		--field-border: rgba(117, 95, 104, 0.22);
		--field-focus: rgba(154, 111, 121, 0.2);
		--accent: #c6909d;
		--accent-strong: #aa7481;
		--accent-contrast: #160f12;
		--shadow-color: rgba(0, 0, 0, 0.3);
	}

	html.dark[data-theme-preset='midnight'] {
		--app-bg: #081018;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(74, 182, 255, 0.16), transparent 28%), radial-gradient(circle at right 10%, rgba(57, 85, 129, 0.18), transparent 25%), linear-gradient(180deg, #0a111a 0%, #060c13 100%);
		--shell-surface: rgba(10, 19, 30, 0.84);
		--sidebar-surface: rgba(8, 16, 26, 0.94);
		--panel-bg: rgba(12, 21, 33, 0.92);
		--panel-soft: rgba(18, 30, 44, 0.74);
		--panel-border: rgba(100, 135, 168, 0.14);
		--text-primary: #e3edf8;
		--text-muted: #97adc2;
		--text-soft: #70859a;
		--field-bg: rgba(7, 13, 20, 0.9);
		--field-border: rgba(84, 110, 139, 0.22);
		--field-focus: rgba(74, 182, 255, 0.2);
		--accent: #60c0ff;
		--accent-strong: #319fe6;
		--accent-contrast: #05111a;
		--shadow-color: rgba(0, 0, 0, 0.34);
	}

	html.dark[data-theme-preset='sakura'] {
		--app-bg: #121922;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(194, 165, 109, 0.15), transparent 26%), radial-gradient(circle at right 12%, rgba(84, 122, 149, 0.2), transparent 25%), linear-gradient(180deg, #141b25 0%, #0f151d 100%);
		--shell-surface: rgba(21, 29, 39, 0.84);
		--sidebar-surface: rgba(17, 24, 33, 0.94);
		--panel-bg: rgba(23, 31, 42, 0.92);
		--panel-soft: rgba(31, 40, 52, 0.74);
		--panel-border: rgba(148, 165, 178, 0.12);
		--text-primary: #e8edf2;
		--text-muted: #b2beca;
		--text-soft: #8394a3;
		--field-bg: rgba(14, 20, 28, 0.9);
		--field-border: rgba(84, 122, 149, 0.22);
		--field-focus: rgba(84, 122, 149, 0.2);
		--accent: #c2a56d;
		--accent-strong: #a98b55;
		--accent-contrast: #131920;
		--shadow-color: rgba(0, 0, 0, 0.3);
	}

	html.dark[data-theme-preset='citrus'] {
		--app-bg: #15190d;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(170, 181, 62, 0.16), transparent 26%), radial-gradient(circle at right 12%, rgba(99, 113, 47, 0.2), transparent 25%), linear-gradient(180deg, #14180d 0%, #0f1308 100%);
		--shell-surface: rgba(21, 26, 14, 0.84);
		--sidebar-surface: rgba(18, 22, 12, 0.94);
		--panel-bg: rgba(25, 31, 17, 0.92);
		--panel-soft: rgba(34, 41, 24, 0.74);
		--panel-border: rgba(146, 160, 77, 0.12);
		--text-primary: #ebf0d8;
		--text-muted: #b8c095;
		--text-soft: #8a936f;
		--field-bg: rgba(15, 19, 10, 0.9);
		--field-border: rgba(115, 127, 56, 0.22);
		--field-focus: rgba(170, 181, 62, 0.2);
		--accent: #c9d95a;
		--accent-strong: #acbc3d;
		--accent-contrast: #121608;
		--shadow-color: rgba(0, 0, 0, 0.3);
	}

	html.dark[data-theme-preset='eelo'] {
		--app-bg: #0c1130;
		--app-bg-gradient: radial-gradient(circle at top left, rgba(217, 149, 40, 0.16), transparent 28%), radial-gradient(circle at right 12%, rgba(31, 42, 122, 0.28), transparent 26%), linear-gradient(180deg, #0d1336 0%, #080c24 100%);
		--shell-surface: rgba(14, 20, 54, 0.86);
		--sidebar-surface: rgba(12, 17, 48, 0.94);
		--panel-bg: rgba(17, 24, 60, 0.92);
		--panel-soft: rgba(24, 33, 78, 0.74);
		--panel-border: rgba(128, 142, 210, 0.16);
		--text-primary: #ecefff;
		--text-muted: #a8b1de;
		--text-soft: #7a85b9;
		--field-bg: rgba(9, 13, 36, 0.9);
		--field-border: rgba(108, 122, 188, 0.22);
		--field-focus: rgba(217, 149, 40, 0.24);
		--accent: #f0a93a;
		--accent-strong: #d18e1e;
		--accent-contrast: #0a0f2c;
		--shadow-color: rgba(0, 0, 0, 0.4);
	}

	html {
		@apply scroll-smooth;
		font-size: var(--font-root);
	}

	body {
		background-color: var(--app-bg);
		background-image: var(--app-bg-gradient);
		color: var(--text-primary);
		font-family: 'Instrument Sans', sans-serif;
		font-size: var(--type-body);
		line-height: var(--leading-body);
		text-rendering: optimizeLegibility;
		transition: background-color 0.3s ease, color 0.3s ease;
	}
}

@layer components {
	.bi {
		display: inline-block;
		font-family: remixicon !important;
		font-style: normal;
		font-weight: 400;
		font-variant: normal;
		line-height: 1;
		text-rendering: auto;
		text-transform: none;
		vertical-align: -0.125em;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.bi::before {
		display: inline-block;
	}

	.bi-save::before { content: "\f053"; }
	.bi-plus-circle::before, .bi-plus-circle-fill::before, .bi-person-plus::before { content: "\ea0f"; }
	.bi-pencil::before, .bi-pencil-square::before { content: "\ef8c"; }
	.bi-trash::before { content: "\ec1a"; }
	.bi-eye::before { content: "\ec95"; }
	.bi-printer::before { content: "\efd3"; }
	.bi-arrow-left::before { content: "\ea5e"; }
	.bi-arrow-left-right::before { content: "\ea60"; }
	.bi-arrow-counterclockwise::before, .bi-arrow-repeat::before { content: "\ea56"; }
	.bi-arrow-down::before, .bi-chevron-down::before { content: "\ea4c"; }
	.bi-x::before, .bi-x-circle::before { content: "\eb91"; }
	.bi-download::before { content: "\ec3e"; }
	.bi-funnel::before { content: "\ed07"; }
	.bi-cash-coin::before, .bi-cash-stack::before, .bi-currency-exchange::before { content: "\ef15"; }
	.bi-wallet::before, .bi-wallet2::before { content: "\f236"; }
	.bi-safe2::before { content: "\f04b"; }
	.bi-diagram-2::before, .bi-diagram-3::before { content: "\ed96"; }
	.bi-scale::before, .bi-rulers::before { content: "\f043"; }
	.bi-columns-gap::before, .bi-grid::before, .bi-grid-1x2::before { content: "\ea42"; }
	.bi-graph-up::before, .bi-graph-up-arrow::before { content: "\ee6c"; }
	.bi-bar-chart::before, .bi-bar-chart-line::before, .bi-bar-chart-line-fill::before { content: "\ea9c"; }
	.bi-pie-chart::before { content: "\efa6"; }
	.bi-journal-text::before, .bi-journals::before { content: "\ead5"; }
	.bi-building::before, .bi-building-gear::before { content: "\eb0d"; }
	.bi-file-earmark::before, .bi-file-earmark-text::before { content: "\ecef"; }
	.bi-file-earmark-bar-graph::before, .bi-clipboard-data::before { content: "\ecad"; }
	.bi-file-earmark-spreadsheet::before { content: "\ecad"; }
	.bi-file-earmark-pdf::before { content: "\ecdd"; }
	.bi-bag-check::before, .bi-bag-check-fill::before { content: "\f0b2"; }
	.bi-shop-window::before { content: "\f13f"; }
	.bi-box-seam::before { content: "\f119"; }
	.bi-box-arrow-up-right::before { content: "\f1de"; }
	.bi-clipboard2-x::before { content: "\ecb7"; }
	.bi-cart3::before, .bi-cart-check-fill::before { content: "\f0ba"; }
	.bi-truck::before, .bi-truck-flatbed::before { content: "\f1bf"; }
	.bi-receipt::before, .bi-receipt-cutoff::before { content: "\eac0"; }
	.bi-people::before, .bi-person-vcard::before { content: "\f180"; }
	.bi-tags::before { content: "\efcf"; }
	.bi-person-gear::before { content: "\f180"; }
	.bi-shield-check::before { content: "\f0a6"; }
	.bi-key::before { content: "\ee32"; }
	.bi-gear::before { content: "\f08a"; }
	.bi-fuel-pump::before { content: "\ed86"; }
	.bi-check2-circle::before, .bi-check-circle::before, .bi-check-circle-fill::before { content: "\eb7b"; }
	.bi-lock::before { content: "\ee8f"; }
	.bi-calendar2-check::before, .bi-calendar4-week::before { content: "\eb1f"; }
	.bi-activity::before { content: "\ee6c"; }
	.bi-radar::before { content: "\eff1"; }
	.bi-hourglass-split::before { content: "\f1a3"; }
}

@layer components {
	.app-shell {
		background: color-mix(in srgb, var(--shell-surface) 100%, transparent);
	}

	.mobile-sidebar {
		background: color-mix(in srgb, var(--sidebar-surface) 100%, transparent);
		border-right: 1px solid var(--panel-border);
		box-shadow: 0 24px 80px -32px var(--shadow-color);
	}

	.app-sidebar {
		background: color-mix(in srgb, var(--sidebar-surface) 100%, transparent);
		align-self: flex-start;
		position: sticky;
		top: 0.75rem;
		max-height: calc(100vh - 1.5rem);
		min-height: 0;
	}

	.app-sidebar-scroll {
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-gutter: stable;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--accent) 34%, var(--panel-border)) transparent;
	}

	.app-sidebar-scroll::-webkit-scrollbar {
		width: 0.55rem;
	}

	.app-sidebar-scroll::-webkit-scrollbar-track {
		background: transparent;
		margin-block: 0.85rem;
	}

	.app-sidebar-scroll::-webkit-scrollbar-thumb {
		background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, var(--panel-soft)) 0%, color-mix(in srgb, var(--accent-strong) 24%, var(--panel-border)) 100%);
		border-radius: 999px;
		border: 2px solid transparent;
		background-clip: padding-box;
		min-height: 2.75rem;
	}

	.app-sidebar-scroll::-webkit-scrollbar-thumb:hover {
		background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 48%, var(--panel-soft)) 0%, color-mix(in srgb, var(--accent-strong) 34%, var(--panel-border)) 100%);
		background-clip: padding-box;
	}

	.sidebar-group + .sidebar-group {
		border-top: 1px solid color-mix(in srgb, var(--panel-border) 92%, transparent);
		margin-top: 0.5rem;
		padding-top: 0.75rem;
	}

	.sidebar-group-kicker {
		color: var(--text-soft);
		font-size: 0.68rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		@apply px-2 pb-2 font-bold;
	}

	.sidebar-link[data-pending] {
		opacity: 0.55;
		cursor: not-allowed;
	}

	.sidebar-link[data-pending]::after {
		content: 'soon';
		margin-left: auto;
		font-size: 0.6rem;
		font-weight: 700;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		padding: 0.1rem 0.45rem;
		border-radius: 999px;
		background: color-mix(in srgb, var(--accent) 16%, transparent);
		color: var(--accent-strong);
	}

	.crud-modal-backdrop {
		background: rgba(5, 10, 18, 0.62);
		backdrop-filter: blur(14px);
		@apply fixed inset-0 z-[160] px-3 py-5 sm:px-6 sm:py-8;
	}

	.crud-modal-shell {
		@apply mx-auto flex h-full max-w-5xl items-center justify-center;
	}

	.crud-modal-card {
		max-height: min(92vh, 960px);
		width: min(100%, 1080px);
		overflow: hidden;
		@apply flex flex-col;
	}

	.crud-modal-content {
		@apply flex min-h-0 flex-1 flex-col;
	}

	.crud-modal-header {
		border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 92%, transparent);
		@apply flex items-start justify-between gap-4 px-5 py-5 sm:px-7;
	}

	.crud-modal-body {
		@apply min-h-0 overflow-y-auto px-5 py-5 sm:px-7 sm:py-6;
	}

	.crud-modal-state {
		@apply flex min-h-[14rem] flex-col items-center justify-center gap-3;
	}

	.theme-swal-popup {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent) !important;
		border: 1px solid color-mix(in srgb, var(--panel-border) 100%, transparent) !important;
		border-radius: 1.5rem !important;
		box-shadow: 0 28px 80px -36px var(--shadow-color) !important;
		color: var(--text-primary) !important;
	}

	.theme-swal-title {
		color: var(--text-primary) !important;
		font-size: 1.15rem !important;
		font-weight: 800 !important;
	}

	.theme-swal-body {
		color: var(--text-muted) !important;
		font-size: 0.95rem !important;
	}

	.theme-swal-confirm,
	.theme-swal-cancel {
		margin: 0 0.3rem !important;
	}

	.is-invalid {
		border-color: rgba(220, 82, 82, 0.42) !important;
		box-shadow: 0 0 0 4px rgba(220, 82, 82, 0.08) !important;
	}

	.form-error-copy {
		color: #d54a4a;
		@apply mt-2 text-sm;
	}

	.password-meter-track {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		@apply h-2 overflow-hidden rounded-full;
	}

	.password-meter-fill {
		background: linear-gradient(90deg, #d97757 0%, var(--accent) 100%);
		@apply h-full rounded-full transition-all duration-300;
	}

	.password-status-pill {
		@apply inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold;
	}

	.password-status-pill.is-weak {
		background: rgba(217, 119, 87, 0.12);
		color: #c45f36;
	}

	.password-status-pill.is-good {
		background: color-mix(in srgb, var(--accent) 14%, transparent);
		color: var(--accent-strong);
	}

	.password-status-pill.is-strong {
		background: rgba(39, 174, 96, 0.14);
		color: #1f8b54;
	}

	.password-status-pill.is-idle {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		color: var(--text-muted);
	}

	.role-picker-layout {
		@apply grid gap-5 xl:grid-cols-[minmax(0,1.1fr)_minmax(18rem,0.9fr)];
	}

	.role-picker-list {
		@apply min-h-[20rem] space-y-3 overflow-y-auto pr-1 sm:pr-2;
	}

	.role-picker-option {
		border: 1px solid color-mix(in srgb, var(--panel-border) 100%, transparent);
		@apply flex w-full items-start justify-between gap-4 rounded-3xl px-4 py-4 text-left transition;
	}

	.role-picker-option:hover {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		transform: translateY(-1px);
	}

	.role-picker-option.is-selected {
		border-color: color-mix(in srgb, var(--accent) 38%, var(--panel-border));
		background: color-mix(in srgb, var(--accent) 8%, var(--panel-soft));
	}

	.role-picker-selection {
		@apply flex min-h-[20rem] flex-col rounded-[1.75rem] border p-4 sm:p-5;
		border-color: color-mix(in srgb, var(--panel-border) 100%, transparent);
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
	}

	.role-picker-chip-grid {
		@apply flex flex-wrap gap-2;
	}

	.role-picker-chip {
		@apply inline-flex items-center gap-2 rounded-full px-3 py-2 text-sm font-semibold;
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		color: var(--text-primary);
	}

	.user-preview-shell {
		@apply flex items-center gap-4 rounded-[1.75rem] border p-4;
		border-color: color-mix(in srgb, var(--panel-border) 100%, transparent);
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
	}

	.user-preview-avatar {
		@apply h-16 w-16 overflow-hidden rounded-[1.25rem] border;
		border-color: color-mix(in srgb, var(--panel-border) 100%, transparent);
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
	}

	.user-preview-avatar img {
		@apply h-full w-full object-cover;
	}

	.settings-sub-sidebar {
		background: linear-gradient(180deg, color-mix(in srgb, var(--sidebar-surface) 100%, transparent) 0%, color-mix(in srgb, var(--panel-bg) 100%, transparent) 100%);
		align-self: flex-start;
		max-height: calc(100vh - 1.5rem);
		position: sticky;
		top: 0.75rem;
		min-height: 0;
		overflow-x: hidden;
		overflow-y: auto;
		scrollbar-width: thin;
		scrollbar-color: color-mix(in srgb, var(--accent) 34%, var(--panel-border)) transparent;
	}

	.settings-sub-sidebar::-webkit-scrollbar { width: 0.55rem; }
	.settings-sub-sidebar::-webkit-scrollbar-track { background: transparent; margin-block: 0.85rem; }
	.settings-sub-sidebar::-webkit-scrollbar-thumb {
		background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, var(--panel-soft)) 0%, color-mix(in srgb, var(--accent-strong) 24%, var(--panel-border)) 100%);
		border-radius: 999px;
		border: 2px solid transparent;
		background-clip: padding-box;
		min-height: 2.75rem;
	}
	.settings-sub-sidebar::-webkit-scrollbar-thumb:hover {
		background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 48%, var(--panel-soft)) 0%, color-mix(in srgb, var(--accent-strong) 34%, var(--panel-border)) 100%);
		background-clip: padding-box;
	}

	.settings-subnav-shell { @apply flex h-full min-h-0 flex-col; }

	.settings-subnav-header {
		border-bottom: 1px solid color-mix(in srgb, var(--panel-border) 92%, transparent);
		@apply px-4 py-5;
	}

	.settings-subnav-title {
		color: var(--text-primary);
		font-size: var(--type-title-sm);
		@apply mt-2 font-semibold;
	}

	.settings-subnav-copy {
		color: var(--text-muted);
		@apply mt-1 text-sm;
	}

	.settings-subnav-group { @apply px-3 py-3; }
	.settings-subnav-group + .settings-subnav-group {
		border-top: 1px solid color-mix(in srgb, var(--panel-border) 92%, transparent);
	}

	.settings-subnav-kicker {
		color: var(--text-soft);
		font-size: 0.68rem;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		@apply px-2 pb-2 font-bold;
	}

	.settings-subnav-link {
		color: var(--text-muted);
		@apply block rounded-2xl px-2 py-1.5 transition;
	}

	.settings-subnav-link:hover {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		color: var(--text-primary);
		transform: translateX(2px);
	}

	.settings-subnav-label {
		@apply inline-flex items-center gap-3 text-sm font-semibold;
	}

	.settings-subnav-index {
		background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
		border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--panel-border));
		color: var(--accent);
		min-width: 2rem;
		@apply inline-flex items-center justify-center rounded-full px-2 py-1 text-[11px] font-bold;
	}

	.settings-anchor-section {
		scroll-margin-top: 6.5rem;
	}

	.app-topbar {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
	}

	.panel {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		border: 1px solid var(--panel-border);
		box-shadow: 0 18px 42px -24px var(--shadow-color);
		@apply rounded-[24px] backdrop-blur;
	}

	.surface-soft {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		@apply rounded-[20px];
	}

	.form-input {
		background: var(--field-bg);
		border-color: var(--field-border);
		color: var(--text-primary);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
		font-size: var(--type-label);
		line-height: 1.45;
		@apply mt-2 w-full rounded-xl border px-3.5 py-2.5 outline-none transition;
	}

	select.form-input { appearance: none; }

	.form-input:focus {
		border-color: var(--accent);
		box-shadow: 0 0 0 4px var(--field-focus);
	}

	.form-input::placeholder { color: var(--text-soft); }

	.btn-primary {
		background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
		color: var(--accent-contrast);
		box-shadow: 0 14px 24px -18px var(--shadow-color);
		font-size: var(--type-caption);
		letter-spacing: 0.02em;
		@apply inline-flex items-center justify-center rounded-full px-4 py-2.5 font-semibold transition;
	}

	.btn-primary:hover {
		filter: brightness(1.03);
		transform: translateY(-1px);
	}

	.btn-secondary {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border-color: var(--panel-border);
		color: var(--text-primary);
		font-size: var(--type-caption);
		letter-spacing: 0.02em;
		@apply inline-flex items-center justify-center rounded-full border px-4 py-2.5 font-semibold transition;
	}

	.btn-secondary:hover {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
	}

	.btn-danger {
		background: linear-gradient(135deg, #d15d55 0%, #b43d36 100%);
		color: #fff8f7;
		font-size: var(--type-caption);
		letter-spacing: 0.02em;
		@apply inline-flex items-center justify-center rounded-full px-4 py-2.5 font-semibold transition;
	}

	.badge {
		@apply inline-flex items-center rounded-full px-3 py-1 text-xs font-medium;
	}

	.sidebar-link {
		color: var(--text-muted);
		font-size: var(--type-body-strong);
		@apply flex items-center gap-3 rounded-xl px-3.5 py-2.5 font-semibold transition;
	}

	.sidebar-link:hover {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		color: var(--text-primary);
	}

	.sidebar-link-active {
		background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
		color: var(--accent-contrast);
		box-shadow: 0 16px 28px -22px var(--shadow-color);
	}

	.section-kicker {
		color: var(--accent);
		font-size: var(--type-kicker);
		@apply font-bold uppercase tracking-[0.28em];
	}

	.text-muted {
		color: var(--text-muted);
	}

	.theme-card {
		border: 1px solid var(--panel-border);
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		@apply rounded-[20px] p-4 transition;
	}

	.theme-card:hover { transform: translateY(-2px); }

	.theme-card-button {
		cursor: pointer;
		text-align: left;
		width: 100%;
	}

	.theme-card.is-selected {
		border-color: var(--accent);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
	}

	.selection-chip {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		color: var(--text-muted);
		font-size: var(--type-caption);
		@apply rounded-full px-3 py-1 font-semibold;
	}

	.selection-chip.is-selected {
		background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
		border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border));
		color: var(--text-primary);
	}

	.preset-pack-grid {
		@apply grid gap-3 sm:grid-cols-2;
	}

	.preset-pack-card {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		@apply block rounded-[18px] p-3.5 transition cursor-pointer;
	}

	.preset-pack-card:hover { transform: translateY(-1px); }

	.preset-pack-card:has(.peer:checked) {
		border-color: var(--accent);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
	}

	.preset-preview-grid { @apply grid gap-3; }

	.preset-preview-card { @apply block cursor-pointer; }

	.preset-preview-card:has(.peer:checked) {
		border-color: var(--accent);
		box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
		background: color-mix(in srgb, var(--accent) 5%, var(--panel-soft));
	}

	.preset-check-indicator {
		background: var(--field-bg);
		border: 1px solid var(--field-border);
		@apply relative inline-flex h-5 w-5 rounded-md shrink-0;
	}

	.preset-preview-card:has(.peer:checked) .preset-check-indicator {
		background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
		border-color: transparent;
		box-shadow: 0 8px 18px -12px var(--shadow-color);
	}

	.preset-preview-card:has(.peer:checked) .preset-check-indicator::after {
		content: '';
		position: absolute;
		left: 6px;
		top: 2px;
		width: 5px;
		height: 10px;
		border: solid var(--accent-contrast);
		border-width: 0 2px 2px 0;
		transform: rotate(45deg);
	}

	.preset-select-chip { transition: all 180ms ease; }

	.preset-preview-card:has(.peer:checked) .preset-select-chip {
		background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
		border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border));
		color: var(--text-primary);
	}

	.preset-inline-note {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		@apply flex items-center gap-3 rounded-full px-4 py-2.5;
	}

	.generator-card {
		position: relative;
		overflow: hidden;
		background: linear-gradient(145deg, color-mix(in srgb, var(--panel-soft) 100%, transparent) 0%, color-mix(in srgb, var(--panel-bg) 100%, transparent) 100%);
		border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--panel-border));
	}

	.generator-card-shell { position: relative; z-index: 1; }

	.generator-card-orb {
		position: absolute;
		border-radius: 9999px;
		filter: blur(10px);
		opacity: 0.7;
		pointer-events: none;
	}

	.generator-card-orb-primary {
		right: -3rem; top: -2.5rem;
		height: 9rem; width: 9rem;
		background: color-mix(in srgb, var(--accent) 24%, transparent);
	}

	.generator-card-orb-secondary {
		left: 42%; bottom: -3.5rem;
		height: 8rem; width: 8rem;
		background: color-mix(in srgb, var(--text-primary) 10%, transparent);
	}

	.generator-card-badge {
		background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
		border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--panel-border));
		color: var(--text-primary);
		@apply inline-flex items-center gap-2 rounded-full px-3.5 py-1.5 text-xs font-semibold tracking-[0.16em] uppercase;
	}

	.generator-card-title { max-width: 18rem; }
	.generator-card-meta { @apply flex flex-wrap gap-2; }
	.generator-card-icon-wrap { position: relative; align-self: flex-start; @apply hidden sm:block; }

	.generator-card-icon {
		border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--panel-border));
		background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--panel-soft)) 0%, color-mix(in srgb, var(--accent-strong) 12%, var(--panel-bg)) 100%);
		color: var(--text-primary);
		box-shadow: 0 18px 30px -22px var(--shadow-color);
		@apply flex items-center justify-center rounded-[1.35rem];
	}

	.generator-card-icon-main { height: 4rem; width: 4rem; }
	.generator-card-icon-float { position: absolute; right: -0.6rem; bottom: -0.4rem; height: 2rem; width: 2rem; }

	.generator-card-action-row {
		background: color-mix(in srgb, var(--panel-bg) 70%, transparent);
		border: 1px solid color-mix(in srgb, var(--panel-border) 90%, transparent);
		margin-top: 1.5rem;
		@apply flex flex-col gap-4 rounded-[20px] px-4 py-4 sm:flex-row sm:items-center sm:justify-between;
	}

	.generator-card-caption { color: var(--text-primary); @apply text-sm font-semibold; }
	.generator-card-button { @apply inline-flex items-center gap-2; }

	.table-shell thead {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
	}

	.table-shell tbody {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
	}

	.table-shell tbody tr {
		border-color: var(--panel-border);
	}

	.icon-label-button { @apply inline-flex items-center gap-2; }

	.icon-button {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		color: var(--text-primary);
		@apply inline-flex h-9 w-9 items-center justify-center rounded-full transition;
	}

	.icon-button.is-accent {
		background: color-mix(in srgb, var(--accent) 18%, var(--panel-soft));
		color: var(--accent);
	}

	.brand-lockup { @apply flex items-center gap-3; }
	.page-heading { @apply min-w-0; }
	.page-header-row { @apply min-w-0; }
	.page-heading > div { @apply space-y-0.5; }
	.page-heading p { display: none; }

	.page-heading h1 {
		font-size: clamp(1rem, 0.94rem + 0.22vw, 1.2rem) !important;
		line-height: 1.15 !important;
		@apply font-black;
		color: var(--text-primary);
		margin: 0;
	}

	.type-page-title {
		font-size: clamp(1rem, 0.94rem + 0.22vw, 1.2rem) !important;
		line-height: 1.15 !important;
		@apply font-black;
	}

	.type-section-title {
		font-size: var(--type-title-md);
		line-height: 1.28;
		@apply font-black;
	}

	.type-card-title {
		font-size: var(--type-title-sm);
		line-height: 1.34;
		@apply font-semibold;
	}

	.type-body { font-size: var(--type-label); line-height: var(--leading-body); }
	.type-meta { font-size: var(--type-caption); line-height: 1.45; }

	.page-breadcrumbs {
		display: inline-flex;
		align-items: center;
		flex-wrap: nowrap;
		font-size: 0.78rem;
		line-height: 1.15;
		@apply min-w-0;
	}

	.page-header-inline {
		display: flex;
		align-items: center;
		justify-content: end;
		gap: 0.45rem;
		flex-wrap: nowrap;
		@apply min-w-0;
	}

	.page-actions { @apply flex shrink-0 items-center gap-1.5; }
	.page-heading { flex: 1 1 auto; }

	.header-action-button {
		font-size: 0.78rem;
		white-space: nowrap;
	}

	@screen lg {
		.page-breadcrumbs { text-align: right; }
		.page-header-row { align-items: flex-end; }
		.page-header-inline { justify-content: flex-end; }
	}

	.user-menu-trigger {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		color: var(--text-primary);
		@apply inline-flex items-center gap-3 rounded-full px-3 py-2 text-left transition;
	}

	.user-menu-trigger:hover {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
	}

	.user-menu-avatar {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		@apply inline-flex h-9 w-9 items-center justify-center rounded-full transition;
	}

	.user-menu-avatar:hover {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
	}

	.user-menu-panel {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		border: 1px solid var(--panel-border);
		box-shadow: 0 24px 80px -36px var(--shadow-color);
		@apply absolute z-[95] mt-3 rounded-[24px] p-2 backdrop-blur;
	}

	.user-menu-link {
		color: var(--text-primary);
		font-size: var(--type-label);
		@apply inline-flex w-full items-center gap-3 rounded-[18px] px-3 py-3 font-medium transition;
	}

	.user-menu-link:hover {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
	}

	.header-search-shell {
		background: linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 100%, transparent) 0%, color-mix(in srgb, var(--panel-bg) 100%, transparent) 100%);
		border: 1px solid var(--panel-border);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 24px -20px var(--shadow-color);
		@apply flex w-full items-center gap-2 rounded-full p-1;
	}

	.header-search-icon {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		color: var(--text-muted);
		@apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full;
	}

	.header-search-submit {
		background: color-mix(in srgb, var(--accent) 16%, var(--panel-soft));
		color: var(--accent);
		@apply inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full transition;
	}

	.header-search-submit:hover {
		background: color-mix(in srgb, var(--accent) 22%, var(--panel-soft));
	}

	.header-search-input {
		background: transparent;
		color: var(--text-primary);
		min-width: 0;
		font-size: var(--type-label);
		@apply w-full border-0 px-1 py-0 outline-none ring-0;
	}

	.header-search-input::placeholder { color: var(--text-soft); }

	.mobile-search-panel { @apply pt-1; }
	.mobile-search-shell { max-width: 100%; }

	.activity-item {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		font-size: var(--type-label);
		@apply rounded-[18px] px-4 py-3;
	}

	.notice-card {
		background: color-mix(in srgb, var(--accent) 9%, var(--panel-soft));
		border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--panel-border));
		color: var(--text-primary);
		@apply rounded-[20px] px-5 py-4;
	}

	.skeleton-panel {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		@apply rounded-[22px] p-5;
	}

	.skeleton-line,
	.skeleton-pill,
	.skeleton-avatar,
	.skeleton-block {
		background: linear-gradient(90deg, color-mix(in srgb, var(--panel-soft) 78%, transparent) 0%, color-mix(in srgb, var(--panel-bg) 100%, transparent) 50%, color-mix(in srgb, var(--panel-soft) 78%, transparent) 100%);
		background-size: 200% 100%;
		animation: shimmer 1.15s ease-in-out infinite;
	}

	.skeleton-line { @apply h-3 rounded-full; }
	.skeleton-line.is-title { @apply h-5; }
	.skeleton-pill { @apply h-10 rounded-full; }
	.skeleton-avatar { @apply h-10 w-10 rounded-2xl; }
	.skeleton-block { @apply rounded-[18px]; height: 14rem; }

	.accordion-trigger { @apply flex w-full items-center justify-between gap-3 text-left; }
	.accordion-indicator { color: var(--text-muted); @apply inline-flex shrink-0 items-center justify-center; }
	.accordion-indicator.is-open { color: var(--accent); }

	.module-report-card {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		@apply rounded-[18px] p-4;
	}

	.panel h2 { font-size: var(--type-title-md); line-height: 1.28; }
	.panel h3 { font-size: var(--type-title-sm); line-height: 1.34; }

	.panel label,
	.breadcrumbs,
	.page-breadcrumbs,
	.text-sm { font-size: var(--type-label); }

	.text-xs { font-size: var(--type-caption); }
	.text-lg { font-size: var(--type-title-sm); }
	.text-xl { font-size: var(--type-title-md); }
	.text-2xl, .text-3xl { font-size: var(--type-title-lg); line-height: var(--leading-tight); }

	.popover-panel {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		border: 1px solid var(--panel-border);
		box-shadow: 0 22px 60px -28px var(--shadow-color);
		@apply rounded-[22px] backdrop-blur;
	}

	.loading-overlay {
		background: rgba(15, 23, 42, 0.3);
		@apply fixed inset-0 z-[140] flex items-center justify-center px-4 backdrop-blur-sm;
	}

	.loading-card {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		border: 1px solid var(--panel-border);
		box-shadow: 0 28px 80px -38px var(--shadow-color);
		@apply inline-flex items-center gap-4 rounded-[24px] px-5 py-4;
	}

	.loader-spinner {
		border: 3px solid color-mix(in srgb, var(--panel-border) 100%, transparent);
		border-top-color: var(--accent);
		animation: spin 0.8s linear infinite;
		@apply inline-block h-8 w-8 rounded-full;
	}

	.loader-spinner.is-inline { @apply h-5 w-5; }

	.toast-stack {
		@apply fixed right-4 top-4 z-[145] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3;
	}

	.toast-item {
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		border: 1px solid var(--panel-border);
		box-shadow: 0 24px 80px -38px var(--shadow-color);
		@apply rounded-[24px] px-4 py-4 backdrop-blur;
	}

	.toast-item.is-success {
		border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border));
	}

	.toast-item.is-error {
		border-color: rgba(214, 127, 95, 0.45);
	}

	.toast-icon {
		@apply inline-flex h-8 w-8 items-center justify-center rounded-full;
	}

	.toast-icon.is-success {
		background: color-mix(in srgb, var(--accent) 16%, var(--panel-soft));
		color: var(--accent);
	}

	.toast-icon.is-error {
		background: rgba(214, 127, 95, 0.16);
		color: #d67f5f;
	}

	.chart-panel { min-height: 22rem; }

	.chart-card-legend {
		display: flex;
		flex-wrap: wrap;
		gap: 0.85rem 1.1rem;
		margin-top: 1.1rem;
		margin-bottom: 1rem;
	}

	.chart-legend-item {
		display: inline-flex;
		align-items: center;
		gap: 0.65rem;
		min-width: 9rem;
		max-width: 100%;
		color: var(--text-primary);
		font-size: 0.98rem;
		font-weight: 500;
	}

	.chart-legend-swatch {
		width: 2.25rem;
		height: 1.1rem;
		border-radius: 0.35rem;
		background: var(--legend-swatch);
		flex-shrink: 0;
	}

	.chart-legend-label {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.dashboard-canvas {
		display: grid;
		gap: 1.25rem;
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.dashboard-widget { grid-column: span 12 / span 12; }
	.dashboard-widget.is-dragging { opacity: 0.55; }
	.dashboard-widget.is-full { grid-column: span 12 / span 12; }
	.dashboard-widget.is-half { grid-column: span 12 / span 12; }
	.dashboard-widget.is-wide { grid-column: span 12 / span 12; }

	.dashboard-drag-handle {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		color: var(--text-muted);
		@apply inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-[11px] font-semibold uppercase tracking-[0.16em] transition;
	}

	.dashboard-drag-handle:hover {
		border-color: color-mix(in srgb, var(--accent) 36%, var(--panel-border));
		color: var(--text-primary);
	}

	.chart-shell {
		position: relative;
		min-height: 16rem;
	}

	[data-dashboard-chart][data-chart-type='pie'] .chart-shell { min-height: 21rem; }

	.chart-shell canvas {
		height: 16rem !important;
		opacity: 0.2;
		transition: opacity 0.2s ease;
	}

	[data-dashboard-chart][data-chart-type='pie'] .chart-shell canvas { height: 21rem !important; }
	.chart-shell.is-ready canvas { opacity: 1; }

	.chart-loader {
		@apply absolute inset-0 z-[1] flex items-center justify-center;
	}

	.chart-shell.is-ready .chart-loader {
		opacity: 0;
		pointer-events: none;
	}

	.quick-action-card {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		color: var(--text-primary);
		@apply inline-flex w-full items-start gap-3 rounded-[20px] px-4 py-4 transition;
	}

	.quick-action-card:hover {
		transform: translateY(-2px);
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
	}

	.widget-toggle-grid { @apply flex flex-wrap gap-2; }
	.widget-toggle-grid-balanced { @apply items-stretch; }

	.widget-chip {
		background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
		border: 1px solid var(--panel-border);
		color: var(--text-muted);
		@apply rounded-full px-3 py-2 text-xs font-semibold uppercase tracking-[0.18em] transition;
	}

	.widget-chip.is-active {
		background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
		border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border));
		color: var(--text-primary);
	}

	.auth-visual-frame {
		position: relative;
		overflow: hidden;
		border: 1px solid var(--panel-border);
		background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
		box-shadow: 0 20px 48px -28px var(--shadow-color);
		@apply rounded-[1.75rem] p-3;
	}

	.auth-visual-image {
		display: block;
		width: 100%;
		height: 100%;
		max-height: 22rem;
		object-fit: cover;
		border-radius: 1.25rem;
		animation: authFloat 9s ease-in-out infinite;
	}
}

/* =========================================================
   BOOTSTRAP COMPATIBILITY LAYER
   Tailwind-based aliases for Bootstrap classes.
   Keeps existing blade views working without Bootstrap CSS.
   Remove section-by-section as blade files are migrated.
   ========================================================= */
@layer components {
    /* ── Display utilities ───────────────────────── */
    .d-none         { display: none !important; }
    .d-block        { display: block !important; }
    .d-flex         { display: flex !important; }
    .d-inline       { display: inline !important; }
    .d-inline-block { display: inline-block !important; }
    .d-inline-flex  { display: inline-flex !important; }
    .d-grid         { display: grid !important; }
    .d-table        { display: table !important; }
    .d-table-cell   { display: table-cell !important; }

    @media (min-width: 576px) {
        .d-sm-none        { display: none !important; }
        .d-sm-block       { display: block !important; }
        .d-sm-flex        { display: flex !important; }
        .d-sm-inline-flex { display: inline-flex !important; }
        .d-sm-inline-block { display: inline-block !important; }
    }
    @media (min-width: 768px) {
        .d-md-none        { display: none !important; }
        .d-md-block       { display: block !important; }
        .d-md-flex        { display: flex !important; }
        .d-md-inline-flex { display: inline-flex !important; }
        .d-md-inline-block { display: inline-block !important; }
    }
    @media (min-width: 992px) {
        .d-lg-none        { display: none !important; }
        .d-lg-block       { display: block !important; }
        .d-lg-flex        { display: flex !important; }
        .d-lg-inline-flex { display: inline-flex !important; }
        .d-lg-inline-block { display: inline-block !important; }
    }
    @media (min-width: 1200px) {
        .d-xl-none        { display: none !important; }
        .d-xl-block       { display: block !important; }
        .d-xl-flex        { display: flex !important; }
    }

    /* ── Flex utilities ──────────────────────────── */
    .flex-wrap      { flex-wrap: wrap !important; }
    .flex-nowrap    { flex-wrap: nowrap !important; }
    .flex-column    { flex-direction: column !important; }
    .flex-column-reverse { flex-direction: column-reverse !important; }
    .flex-row       { flex-direction: row !important; }
    .flex-row-reverse { flex-direction: row-reverse !important; }
    .flex-fill      { flex: 1 1 auto !important; }
    .flex-grow-0    { flex-grow: 0 !important; }
    .flex-grow-1    { flex-grow: 1 !important; }
    .flex-shrink-0  { flex-shrink: 0 !important; }
    .flex-shrink-1  { flex-shrink: 1 !important; }

    .justify-content-start   { justify-content: flex-start !important; }
    .justify-content-end     { justify-content: flex-end !important; }
    .justify-content-center  { justify-content: center !important; }
    .justify-content-between { justify-content: space-between !important; }
    .justify-content-around  { justify-content: space-around !important; }
    .justify-content-evenly  { justify-content: space-evenly !important; }

    .align-items-start    { align-items: flex-start !important; }
    .align-items-end      { align-items: flex-end !important; }
    .align-items-center   { align-items: center !important; }
    .align-items-baseline { align-items: baseline !important; }
    .align-items-stretch  { align-items: stretch !important; }

    .align-self-auto    { align-self: auto !important; }
    .align-self-start   { align-self: flex-start !important; }
    .align-self-end     { align-self: flex-end !important; }
    .align-self-center  { align-self: center !important; }
    .align-self-stretch { align-self: stretch !important; }

    /* ── Font weight ─────────────────────────────── */
    .fw-lighter  { font-weight: lighter !important; }
    .fw-light    { font-weight: 300 !important; }
    .fw-normal   { font-weight: 400 !important; }
    .fw-medium   { font-weight: 500 !important; }
    .fw-semibold { font-weight: 600 !important; }
    .fw-bold     { font-weight: 700 !important; }
    .fw-bolder   { font-weight: bolder !important; }

    /* ── Text utilities ──────────────────────────── */
    .text-start      { text-align: left !important; }
    .text-center     { text-align: center !important; }
    .text-end        { text-align: right !important; }
    .text-uppercase  { text-transform: uppercase !important; }
    .text-lowercase  { text-transform: lowercase !important; }
    .text-capitalize { text-transform: capitalize !important; }
    .text-nowrap     { white-space: nowrap !important; }
    .text-truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .text-break      { word-wrap: break-word !important; word-break: break-word !important; }
    .text-decoration-none { text-decoration: none !important; }
    .text-decoration-underline { text-decoration: underline !important; }

    .text-primary   { color: var(--accent) !important; }
    .text-secondary { color: var(--text-muted) !important; }
    .text-dark      { color: var(--text-primary) !important; }
    .text-light     { color: var(--text-soft) !important; }
    .text-white     { color: #fff !important; }
    .text-black     { color: #000 !important; }
    .text-danger    { color: #dc3545 !important; }
    .text-success   { color: #198754 !important; }
    .text-warning   { color: #856404 !important; }
    .text-info      { color: #0dcaf0 !important; }

    .lh-1    { line-height: 1 !important; }
    .lh-sm   { line-height: 1.25 !important; }
    .lh-base { line-height: var(--leading-body) !important; }
    .lh-lg   { line-height: 2 !important; }

    /* ── Overflow / visibility ───────────────────── */
    .overflow-hidden  { overflow: hidden !important; }
    .overflow-auto    { overflow: auto !important; }
    .overflow-scroll  { overflow: scroll !important; }
    .overflow-visible { overflow: visible !important; }
    .overflow-x-auto  { overflow-x: auto !important; }
    .overflow-y-auto  { overflow-y: auto !important; }

    .visible   { visibility: visible !important; }
    .invisible { visibility: hidden !important; }

    /* ── Position ────────────────────────────────── */
    .position-static   { position: static !important; }
    .position-relative { position: relative !important; }
    .position-absolute { position: absolute !important; }
    .position-fixed    { position: fixed !important; }
    .position-sticky   { position: sticky !important; }
    .top-0    { top: 0 !important; }
    .bottom-0 { bottom: 0 !important; }
    .start-0  { left: 0 !important; }
    .end-0    { right: 0 !important; }

    /* ── Sizing ──────────────────────────────────── */
    .w-25  { width: 25% !important; }
    .w-50  { width: 50% !important; }
    .w-75  { width: 75% !important; }
    .w-100 { width: 100% !important; }
    .w-auto { width: auto !important; }
    .h-25  { height: 25% !important; }
    .h-50  { height: 50% !important; }
    .h-75  { height: 75% !important; }
    .h-100 { height: 100% !important; }
    .h-auto { height: auto !important; }
    .mw-100 { max-width: 100% !important; }
    .mh-100 { max-height: 100% !important; }

    /* ── Margins / padding (Bootstrap scale) ─────── */
    /* Bootstrap spacing scale differs from Tailwind:
       Bootstrap 3 = 1rem, Tailwind 3 = 0.75rem
       Adding explicit Bootstrap-scale aliases: */
    .mb-0 { margin-bottom: 0 !important; }
    .mt-0 { margin-top: 0 !important; }
    .ms-0 { margin-left: 0 !important; }
    .me-0 { margin-right: 0 !important; }
    .mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
    .my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
    .m-0  { margin: 0 !important; }

    .ms-auto { margin-left: auto !important; }
    .me-auto { margin-right: auto !important; }
    .mx-auto { margin-left: auto !important; margin-right: auto !important; }
    .my-auto { margin-top: auto !important; margin-bottom: auto !important; }
    .mt-auto { margin-top: auto !important; }
    .mb-auto { margin-bottom: auto !important; }

    /* ── Gap (Bootstrap 5 scale) ─────────────────── */
    .gap-0 { gap: 0 !important; }
    .gap-1 { gap: 0.25rem !important; }
    .gap-2 { gap: 0.5rem !important; }
    .gap-3 { gap: 1rem !important; }
    .gap-4 { gap: 1.5rem !important; }
    .gap-5 { gap: 3rem !important; }
    .row-gap-1 { row-gap: 0.25rem !important; }
    .row-gap-2 { row-gap: 0.5rem !important; }
    .row-gap-3 { row-gap: 1rem !important; }
    .column-gap-1 { column-gap: 0.25rem !important; }
    .column-gap-2 { column-gap: 0.5rem !important; }
    .column-gap-3 { column-gap: 1rem !important; }

    /* ── Border / radius / shadow ────────────────── */
    .border   { border: 1px solid var(--panel-border) !important; }
    .border-0 { border: 0 !important; }
    .border-top    { border-top: 1px solid var(--panel-border) !important; }
    .border-bottom { border-bottom: 1px solid var(--panel-border) !important; }
    .border-start  { border-left: 1px solid var(--panel-border) !important; }
    .border-end    { border-right: 1px solid var(--panel-border) !important; }
    .border-primary { border-color: var(--accent) !important; }
    .border-danger  { border-color: #dc3545 !important; }
    .border-success { border-color: #198754 !important; }

    .rounded        { border-radius: 0.75rem !important; }
    .rounded-0      { border-radius: 0 !important; }
    .rounded-1      { border-radius: 0.35rem !important; }
    .rounded-2      { border-radius: 0.55rem !important; }
    .rounded-3      { border-radius: 1rem !important; }
    .rounded-circle { border-radius: 50% !important; }
    .rounded-pill   { border-radius: 999px !important; }

    .shadow-none { box-shadow: none !important; }
    .shadow-sm   { box-shadow: 0 4px 12px -8px var(--shadow-color) !important; }
    .shadow      { box-shadow: 0 14px 36px -20px var(--shadow-color) !important; }
    .shadow-lg   { box-shadow: 0 28px 64px -28px var(--shadow-color) !important; }

    /* ── Background ──────────────────────────────── */
    .bg-primary   { background: var(--accent) !important; color: var(--accent-contrast) !important; }
    .bg-secondary { background: color-mix(in srgb, var(--panel-soft) 80%, transparent) !important; color: var(--text-muted) !important; }
    .bg-success   { background: #198754 !important; color: #fff !important; }
    .bg-danger    { background: #dc3545 !important; color: #fff !important; }
    .bg-warning   { background: #ffc107 !important; color: #000 !important; }
    .bg-info      { background: #0dcaf0 !important; color: #000 !important; }
    .bg-light     { background: color-mix(in srgb, var(--panel-soft) 100%, transparent) !important; color: var(--text-primary) !important; }
    .bg-dark      { background: color-mix(in srgb, var(--text-primary) 12%, transparent) !important; }
    .bg-white     { background: #fff !important; }
    .bg-transparent { background: transparent !important; }

    /* ── Misc ────────────────────────────────────── */
    .cursor-pointer { cursor: pointer; }
    .user-select-none { user-select: none !important; }
    .pe-none { pointer-events: none !important; }
    .pe-auto { pointer-events: auto !important; }
    .visually-hidden,
    .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
    .clearfix::after { content: ''; display: table; clear: both; }

    /* ── Grid (Bootstrap 12-col) ─────────────────── */
    .container {
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        margin-left: auto;
        margin-right: auto;
        max-width: 1200px;
    }
    .container-fluid {
        width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .row {
        display: flex;
        flex-wrap: wrap;
        margin-left: -0.75rem;
        margin-right: -0.75rem;
    }
    .row > * {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    .col       { flex: 1 1 0%; min-width: 0; }
    .col-auto  { flex: 0 0 auto; width: auto; }
    .col-1  { flex: 0 0 auto; width: 8.3333%; }
    .col-2  { flex: 0 0 auto; width: 16.6667%; }
    .col-3  { flex: 0 0 auto; width: 25%; }
    .col-4  { flex: 0 0 auto; width: 33.3333%; }
    .col-5  { flex: 0 0 auto; width: 41.6667%; }
    .col-6  { flex: 0 0 auto; width: 50%; }
    .col-7  { flex: 0 0 auto; width: 58.3333%; }
    .col-8  { flex: 0 0 auto; width: 66.6667%; }
    .col-9  { flex: 0 0 auto; width: 75%; }
    .col-10 { flex: 0 0 auto; width: 83.3333%; }
    .col-11 { flex: 0 0 auto; width: 91.6667%; }
    .col-12 { flex: 0 0 auto; width: 100%; }
    @media (min-width: 576px) {
        .col-sm      { flex: 1 1 0%; }
        .col-sm-auto { flex: 0 0 auto; width: auto; }
        .col-sm-1  { flex: 0 0 auto; width: 8.3333%; }
        .col-sm-2  { flex: 0 0 auto; width: 16.6667%; }
        .col-sm-3  { flex: 0 0 auto; width: 25%; }
        .col-sm-4  { flex: 0 0 auto; width: 33.3333%; }
        .col-sm-6  { flex: 0 0 auto; width: 50%; }
        .col-sm-8  { flex: 0 0 auto; width: 66.6667%; }
        .col-sm-12 { flex: 0 0 auto; width: 100%; }
    }
    @media (min-width: 768px) {
        .col-md      { flex: 1 1 0%; }
        .col-md-auto { flex: 0 0 auto; width: auto; }
        .col-md-1  { flex: 0 0 auto; width: 8.3333%; }
        .col-md-2  { flex: 0 0 auto; width: 16.6667%; }
        .col-md-3  { flex: 0 0 auto; width: 25%; }
        .col-md-4  { flex: 0 0 auto; width: 33.3333%; }
        .col-md-5  { flex: 0 0 auto; width: 41.6667%; }
        .col-md-6  { flex: 0 0 auto; width: 50%; }
        .col-md-7  { flex: 0 0 auto; width: 58.3333%; }
        .col-md-8  { flex: 0 0 auto; width: 66.6667%; }
        .col-md-9  { flex: 0 0 auto; width: 75%; }
        .col-md-10 { flex: 0 0 auto; width: 83.3333%; }
        .col-md-12 { flex: 0 0 auto; width: 100%; }
    }
    @media (min-width: 992px) {
        .col-lg      { flex: 1 1 0%; }
        .col-lg-auto { flex: 0 0 auto; width: auto; }
        .col-lg-1  { flex: 0 0 auto; width: 8.3333%; }
        .col-lg-2  { flex: 0 0 auto; width: 16.6667%; }
        .col-lg-3  { flex: 0 0 auto; width: 25%; }
        .col-lg-4  { flex: 0 0 auto; width: 33.3333%; }
        .col-lg-5  { flex: 0 0 auto; width: 41.6667%; }
        .col-lg-6  { flex: 0 0 auto; width: 50%; }
        .col-lg-7  { flex: 0 0 auto; width: 58.3333%; }
        .col-lg-8  { flex: 0 0 auto; width: 66.6667%; }
        .col-lg-9  { flex: 0 0 auto; width: 75%; }
        .col-lg-10 { flex: 0 0 auto; width: 83.3333%; }
        .col-lg-12 { flex: 0 0 auto; width: 100%; }
    }
    @media (min-width: 1200px) {
        .col-xl      { flex: 1 1 0%; }
        .col-xl-auto { flex: 0 0 auto; width: auto; }
        .col-xl-3  { flex: 0 0 auto; width: 25%; }
        .col-xl-4  { flex: 0 0 auto; width: 33.3333%; }
        .col-xl-6  { flex: 0 0 auto; width: 50%; }
        .col-xl-8  { flex: 0 0 auto; width: 66.6667%; }
        .col-xl-9  { flex: 0 0 auto; width: 75%; }
        .col-xl-12 { flex: 0 0 auto; width: 100%; }
    }

    /* ── Buttons ─────────────────────────────────── */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.35em;
        padding: 0.5rem 1rem;
        font-size: var(--type-caption);
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.4;
        border-radius: 999px;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.18s ease;
        text-decoration: none;
        white-space: nowrap;
        vertical-align: middle;
        user-select: none;
        background: transparent;
    }
    .btn:hover { text-decoration: none; }
    .btn:disabled,
    .btn.disabled {
        opacity: 0.6;
        cursor: not-allowed;
        pointer-events: none;
    }
    /* btn-primary already defined above; ensure btn.btn-primary inherits it */
    .btn.btn-primary, button.btn-primary:not(.btn-secondary):not(.btn-danger):not(.btn-light) {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
        color: var(--accent-contrast);
        border-color: transparent;
        box-shadow: 0 10px 20px -14px var(--shadow-color);
    }
    .btn.btn-primary:hover { filter: brightness(1.05); transform: translateY(-1px); }

    .btn.btn-secondary, button.btn-secondary {
        background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
        border-color: var(--panel-border);
        color: var(--text-primary);
    }
    .btn.btn-secondary:hover { background: color-mix(in srgb, var(--panel-bg) 100%, transparent); }

    .btn.btn-danger, button.btn-danger {
        background: linear-gradient(135deg, #d15d55 0%, #b43d36 100%);
        color: #fff8f7;
        border-color: transparent;
    }
    .btn.btn-danger:hover { filter: brightness(1.06); transform: translateY(-1px); }

    .btn.btn-light, button.btn-light {
        background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
        border-color: var(--panel-border);
        color: var(--text-primary);
    }
    .btn.btn-light:hover { background: color-mix(in srgb, var(--panel-bg) 100%, transparent); }

    .btn.btn-warning, button.btn-warning {
        background: #ffc107;
        color: #000;
        border-color: #ffc107;
    }
    .btn.btn-success, button.btn-success {
        background: #198754;
        color: #fff;
        border-color: #198754;
    }
    .btn.btn-info, button.btn-info {
        background: #0dcaf0;
        color: #000;
        border-color: #0dcaf0;
    }

    .btn.btn-outline-primary { background: transparent; border-color: var(--accent); color: var(--accent); }
    .btn.btn-outline-primary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
    .btn.btn-outline-secondary { background: transparent; border-color: var(--panel-border); color: var(--text-muted); }
    .btn.btn-outline-secondary:hover { background: color-mix(in srgb, var(--panel-soft) 100%, transparent); }
    .btn.btn-outline-danger { background: transparent; border-color: #dc3545; color: #dc3545; }
    .btn.btn-outline-danger:hover { background: rgba(220, 53, 69, 0.08); }
    .btn.btn-outline-success { background: transparent; border-color: #198754; color: #198754; }
    .btn.btn-outline-success:hover { background: rgba(25, 135, 84, 0.08); }
    .btn.btn-outline-warning { background: transparent; border-color: #ffc107; color: #856404; }
    .btn.btn-outline-light { background: transparent; border-color: var(--panel-border); color: var(--text-muted); }

    .btn.btn-sm, .btn-group-sm .btn {
        padding: 0.3rem 0.75rem;
        font-size: 0.72rem;
        border-radius: 999px;
    }
    .btn.btn-lg, .btn-group-lg .btn {
        padding: 0.65rem 1.5rem;
        font-size: 1rem;
    }

    .btn-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
        opacity: 0.65;
        transition: opacity 0.15s, background 0.15s;
        line-height: 1;
    }
    .btn-close::before { content: '×'; font-size: 1.5rem; }
    .btn-close:hover {
        opacity: 1;
        background: color-mix(in srgb, var(--panel-soft) 80%, transparent);
    }

    /* ── Form components ─────────────────────────── */
    .form-label {
        display: block;
        margin-bottom: 0.4rem;
        font-size: var(--type-label);
        font-weight: 600;
        color: var(--text-primary);
    }

    .form-text {
        margin-top: 0.25rem;
        font-size: var(--type-caption);
        color: var(--text-muted);
    }

    .form-control {
        display: block;
        width: 100%;
        padding: 0.5rem 0.85rem;
        font-size: var(--type-label);
        font-weight: 400;
        line-height: 1.45;
        color: var(--text-primary);
        background: var(--field-bg);
        background-clip: padding-box;
        border: 1px solid var(--field-border);
        border-radius: 0.75rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        outline: none;
        appearance: none;
    }
    .form-control:focus {
        border-color: var(--accent);
        box-shadow: 0 0 0 4px var(--field-focus);
    }
    .form-control::placeholder { color: var(--text-soft); }
    .form-control:disabled,
    .form-control[readonly] {
        background: color-mix(in srgb, var(--field-bg) 60%, transparent);
        opacity: 0.75;
    }
    .form-control:disabled { cursor: not-allowed; }
    textarea.form-control { resize: vertical; min-height: 5rem; }
    .form-control-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; border-radius: 0.55rem; }
    .form-control-lg { padding: 0.65rem 1rem; font-size: 1rem; border-radius: 0.9rem; }
    .form-control.is-invalid { border-color: rgba(220, 82, 82, 0.42); box-shadow: 0 0 0 4px rgba(220, 82, 82, 0.08); }
    .form-control.is-valid   { border-color: rgba(25, 135, 84, 0.42); box-shadow: 0 0 0 4px rgba(25, 135, 84, 0.08); }

    .form-select {
        display: block;
        width: 100%;
        padding: 0.5rem 2.25rem 0.5rem 0.85rem;
        font-size: var(--type-label);
        font-weight: 400;
        line-height: 1.45;
        color: var(--text-primary);
        background: var(--field-bg) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236c757d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.7rem center / 16px 12px;
        border: 1px solid var(--field-border);
        border-radius: 0.75rem;
        appearance: none;
        outline: none;
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
		position: relative;
		z-index: 1;
    }
	.form-select:focus {
		border-color: var(--accent);
		box-shadow: 0 0 0 4px var(--field-focus);
		z-index: 30;
	}
    .form-select:disabled { opacity: 0.7; cursor: not-allowed; }
    .form-select-sm { padding: 0.3rem 1.75rem 0.3rem 0.65rem; font-size: 0.8rem; border-radius: 0.55rem; }

	.select2-container {
		width: 100% !important;
		position: relative;
		z-index: 1;
	}
	.select2-container--open,
	.select2-container--focus {
		z-index: 2600 !important;
	}
	.select2-dropdown {
		z-index: 2600 !important;
		border: 1px solid var(--field-border);
		border-radius: 0.9rem;
		background: var(--field-bg);
		box-shadow: 0 1rem 2rem color-mix(in srgb, var(--shadow-color) 65%, transparent);
		overflow: hidden;
	}
	.select2-container--default .select2-selection--single,
	.select2-container--default .select2-selection--multiple {
		min-height: 2.6rem;
		border: 1px solid var(--field-border);
		border-radius: 0.75rem;
		background: var(--field-bg);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
		transition: border-color 0.15s ease, box-shadow 0.15s ease;
	}
	.select2-container--default.select2-container--focus .select2-selection--single,
	.select2-container--default.select2-container--focus .select2-selection--multiple,
	.select2-container--default.select2-container--open .select2-selection--single,
	.select2-container--default.select2-container--open .select2-selection--multiple {
		border-color: var(--accent);
		box-shadow: 0 0 0 4px var(--field-focus);
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered,
	.select2-container--default .select2-selection--multiple .select2-selection__rendered {
		color: var(--text-primary);
		line-height: 1.45;
		padding-left: 0.85rem;
		padding-right: 2.25rem;
	}
	.select2-container--default .select2-selection--single .select2-selection__rendered {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	.select2-container--default .select2-selection--single .select2-selection__placeholder,
	.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
		color: var(--text-soft);
	}
	.select2-container--default .select2-selection--single .select2-selection__arrow {
		height: 100%;
		right: 0.7rem;
	}
	.select2-container--default .select2-selection--multiple {
		padding: 0.3rem 2.25rem 0.3rem 0.45rem;
	}
	.select2-container--default .select2-selection--multiple .select2-selection__choice {
		margin-top: 0.2rem;
		border: 0;
		border-radius: 999px;
		background: color-mix(in srgb, var(--accent) 14%, var(--field-bg));
		color: var(--text-primary);
		padding: 0.15rem 0.5rem;
	}
	.select2-container--default .select2-results__option--selected {
		background: color-mix(in srgb, var(--accent) 14%, var(--field-bg));
		color: var(--text-primary);
	}
	.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
		background: var(--accent);
		color: var(--accent-contrast);
	}
	.select2-search--dropdown {
		padding: 0.6rem;
		background: color-mix(in srgb, var(--panel-soft) 70%, transparent);
	}
	.select2-search--dropdown .select2-search__field {
		border: 1px solid var(--field-border);
		border-radius: 0.65rem;
		background: var(--field-bg);
		color: var(--text-primary);
		padding: 0.45rem 0.65rem;
		outline: none;
	}
	.select2-search--dropdown .select2-search__field:focus {
		border-color: var(--accent);
		box-shadow: 0 0 0 4px var(--field-focus);
	}

    .form-check {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0;
        min-height: 1.5rem;
        cursor: pointer;
    }
    .form-check-input {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
        accent-color: var(--accent);
        cursor: pointer;
        margin: 0;
    }
    .form-check-label { font-size: var(--type-label); cursor: pointer; color: var(--text-primary); }
    .form-check-inline { display: inline-flex; }

    .form-switch .form-check-input {
        width: 2rem;
        height: 1.1rem;
        border-radius: 999px;
    }

    .input-group {
        display: flex;
        align-items: stretch;
        position: relative;
    }
    .input-group .form-control,
    .input-group .form-select { flex: 1 1 auto; min-width: 0; border-radius: 0; }
    .input-group > :first-child { border-top-left-radius: 0.75rem !important; border-bottom-left-radius: 0.75rem !important; }
    .input-group > :last-child  { border-top-right-radius: 0.75rem !important; border-bottom-right-radius: 0.75rem !important; }
    .input-group-text {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.85rem;
        font-size: var(--type-label);
        color: var(--text-muted);
        background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
        border: 1px solid var(--field-border);
        white-space: nowrap;
    }

    .invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: var(--type-caption); color: #dc3545; }
    .was-validated .form-control:invalid ~ .invalid-feedback,
    .form-control.is-invalid ~ .invalid-feedback { display: block; }
    .valid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: var(--type-caption); color: #198754; }

    /* ── Alerts ──────────────────────────────────── */
    .alert {
        position: relative;
        padding: 0.85rem 1.1rem;
        margin-bottom: 1rem;
        border: 1px solid transparent;
        border-radius: 1rem;
        font-size: var(--type-label);
    }
    .alert ul { margin-bottom: 0; padding-left: 1.2rem; }
    .alert-danger   { background: rgba(220,53,69,0.08); border-color: rgba(220,53,69,0.25); color: #a71d2a; }
    .alert-success  { background: rgba(25,135,84,0.08); border-color: rgba(25,135,84,0.25); color: #0d6830; }
    .alert-warning  { background: rgba(255,193,7,0.1); border-color: rgba(255,193,7,0.3); color: #664d03; }
    .alert-info     { background: rgba(13,202,240,0.08); border-color: rgba(13,202,240,0.25); color: #055160; }
    .alert-primary  { background: color-mix(in srgb, var(--accent) 10%, transparent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--accent-strong); }
    .alert-secondary { background: color-mix(in srgb, var(--panel-soft) 60%, transparent); border-color: var(--panel-border); color: var(--text-muted); }

    /* ── Table ───────────────────────────────────── */
    .table {
        width: 100%;
        margin-bottom: 1rem;
        color: var(--text-primary);
        border-collapse: collapse;
        font-size: var(--type-label);
    }
    .table > :not(caption) > * > * {
        padding: 0.65rem 0.9rem;
        border-bottom: 1px solid var(--panel-border);
        vertical-align: middle;
    }
    .table th {
        font-weight: 700;
        font-size: var(--type-caption);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
    }
    .table thead {
        background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
    }
    .table tbody tr:last-child > * { border-bottom: 0; }
    .table-sm > :not(caption) > * > * { padding: 0.35rem 0.65rem; }
    .table-bordered > :not(caption) > * > * { border: 1px solid var(--panel-border); }
    .table-hover tbody tr:hover > * { background: color-mix(in srgb, var(--panel-soft) 60%, transparent); }
    .table-striped > tbody > tr:nth-of-type(odd) > * { background: color-mix(in srgb, var(--panel-soft) 40%, transparent); }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ── Badge ───────────────────────────────────── */
    /* Extends the existing .badge definition */
    .badge.bg-primary   { background: var(--accent); color: var(--accent-contrast); }
    .badge.bg-secondary { background: color-mix(in srgb, var(--panel-soft) 80%, transparent); color: var(--text-muted); }
    .badge.bg-success   { background: #198754; color: #fff; }
    .badge.bg-danger    { background: #dc3545; color: #fff; }
    .badge.bg-warning   { background: #ffc107; color: #000; }
    .badge.bg-info      { background: #0dcaf0; color: #000; }
    .badge.bg-light     { background: color-mix(in srgb, var(--panel-soft) 100%, transparent); color: var(--text-primary); }
    .badge.bg-dark      { background: var(--text-primary); color: var(--accent-contrast); }

    /* ── Bootstrap Modal (kept for Layer 2 migration) */
    .modal {
		display: none;
		outline: 0;
		@apply fixed inset-0 z-[170] overflow-x-hidden overflow-y-auto px-3 py-4 sm:px-5 sm:py-7;
    }
	.modal.show {
		display: block;
	}

    .modal-backdrop {
        background: rgba(5, 10, 18, 0.62);
        backdrop-filter: blur(8px);
		@apply fixed inset-0 z-[165];
    }
    .modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
    .modal-backdrop.show { opacity: 1; }

    .modal-dialog {
        width: auto;
        pointer-events: none;
        transition: transform 0.2s ease, opacity 0.2s ease;
		@apply relative mx-auto my-2 w-full;
    }
    @media (min-width: 576px) {
		.modal-dialog {
			max-width: 500px;
			@apply my-7;
		}
    }

    .modal-dialog-centered {
		@apply flex items-center;
        min-height: calc(100% - 1rem);
    }
    @media (min-width: 576px) {
        .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
    }

    .modal-dialog-scrollable { height: calc(100% - 1rem); }
	.modal-dialog-scrollable .modal-content { max-height: 100%; overflow: hidden; }
	.modal-dialog-scrollable .modal-body { overflow-y: auto; }
    @media (min-width: 576px) {
        .modal-dialog-scrollable { height: calc(100% - 3.5rem); }
        .modal-sm .modal-dialog, .modal-sm { max-width: 300px; }
    }
    @media (min-width: 992px) {
        .modal-lg .modal-dialog, .modal-lg,
        .modal-xl .modal-dialog, .modal-xl { max-width: 800px; }
    }
    @media (min-width: 1200px) {
        .modal-xl .modal-dialog, .modal-xl { max-width: 1140px; }
    }

	@media (max-width: 991.98px) {
		.modal-fullscreen-lg-down,
		.modal-fullscreen-lg-down .modal-dialog {
			width: 100vw;
			max-width: none;
			height: 100%;
			margin: 0;
		}

		.modal-fullscreen-lg-down .modal-content {
			min-height: 100%;
			border-radius: 0;
			border-width: 0;
		}

		.modal-fullscreen-lg-down .modal-body {
			overflow-y: auto;
		}
	}

    .modal-content {
		width: 100%;
        pointer-events: auto;
        background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
        border: 1px solid var(--panel-border);
        border-radius: 1.5rem;
        box-shadow: 0 28px 80px -36px var(--shadow-color);
        outline: 0;
		overflow: visible;
		backdrop-filter: blur(20px);
		@apply relative flex flex-col border border-white/40;
    }

    .modal-header {
        border-bottom: 1px solid var(--panel-border);
		background: linear-gradient(180deg, color-mix(in srgb, var(--panel-soft) 92%, transparent) 0%, transparent 100%);
		@apply flex shrink-0 items-start justify-between gap-4 px-5 py-5 sm:px-6;
    }

    .modal-title {
        margin-bottom: 0;
        line-height: 1.5;
        font-size: var(--type-title-sm);
        font-weight: 700;
        color: var(--text-primary);
    }

    .modal-body {
		@apply relative flex-1 px-5 py-5 sm:px-6 sm:py-6;
		overflow: visible;
    }

    .modal-footer {
        border-top: 1px solid var(--panel-border);
		background: linear-gradient(0deg, color-mix(in srgb, var(--panel-soft) 86%, transparent) 0%, transparent 100%);
		@apply flex shrink-0 flex-wrap items-center justify-end gap-3 px-5 py-4 sm:px-6;
    }

    .fade { transition: opacity 0.15s linear; }
    .fade:not(.show) { opacity: 0; }

    /* ── Dropdown ────────────────────────────────── */
    .dropdown { position: relative; display: inline-block; }
    .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        min-width: 10rem;
        padding: 0.5rem;
        font-size: var(--type-label);
        color: var(--text-primary);
        list-style: none;
        background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
        border: 1px solid var(--panel-border);
        border-radius: 1.25rem;
        box-shadow: 0 20px 60px -24px var(--shadow-color);
        backdrop-filter: blur(16px);
    }
    .dropdown-menu.show { display: block; }
    .dropdown-menu-end { left: auto; right: 0; }
    .dropup .dropdown-menu { top: auto; bottom: 100%; }

    .dropdown-item {
        display: block;
        width: 100%;
        padding: 0.45rem 0.85rem;
        clear: both;
        font-weight: 500;
        font-size: var(--type-label);
        color: var(--text-primary);
        text-align: inherit;
        text-decoration: none;
        white-space: nowrap;
        background: none;
        border: none;
        border-radius: 0.85rem;
        cursor: pointer;
        transition: background 0.15s;
    }
    .dropdown-item:hover,
    .dropdown-item:focus { background: color-mix(in srgb, var(--panel-soft) 100%, transparent); }
    .dropdown-item.active { background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)); color: var(--text-primary); }
    .dropdown-item:disabled,
    .dropdown-item.disabled { opacity: 0.5; pointer-events: none; }

    .dropdown-divider {
        height: 0;
        margin: 0.4rem 0;
        overflow: hidden;
        border-top: 1px solid var(--panel-border);
    }
    .dropdown-header {
        display: block;
        padding: 0.35rem 0.85rem;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--text-soft);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        white-space: nowrap;
    }
    .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.35em;
        vertical-align: 0.15em;
        content: '';
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }
    .dropup .dropdown-toggle::after { border-top: 0; border-bottom: 0.3em solid; }
    .dropdown-toggle-split::after { margin-left: 0; }

    /* ── Nav / Tabs ──────────────────────────────── */
    .nav {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }
    .nav-link {
        display: block;
        padding: 0.5rem 1rem;
        font-size: var(--type-label);
        font-weight: 600;
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.15s;
        cursor: pointer;
        border: 1px solid transparent;
    }
    .nav-link:hover { color: var(--text-primary); }
    .nav-link.disabled { opacity: 0.5; pointer-events: none; }

    .nav-tabs {
        border-bottom: 1px solid var(--panel-border);
        gap: 0.25rem;
    }
    .nav-tabs .nav-link {
        border-bottom-color: transparent;
        border-radius: 0.75rem 0.75rem 0 0;
        margin-bottom: -1px;
    }
    .nav-tabs .nav-link.active,
    .nav-tabs .nav-item.show .nav-link {
        color: var(--text-primary);
        background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
        border-color: var(--panel-border) var(--panel-border) transparent;
    }

    .nav-pills .nav-link { border-radius: 999px; }
    .nav-pills .nav-link.active,
    .nav-pills .show > .nav-link {
        background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
        color: var(--text-primary);
    }

    .tab-content > .tab-pane { display: none; }
    .tab-content > .active { display: block; }

    /* ── Spinner ─────────────────────────────────── */
    .spinner-border {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        vertical-align: -0.125em;
        border: 0.2em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        animation: spin 0.75s linear infinite;
    }
    .spinner-border-sm { width: 1rem; height: 1rem; border-width: 0.15em; }
    .spinner-grow {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        background: currentColor;
        border-radius: 50%;
        opacity: 0;
        animation: spinner-grow 0.75s linear infinite;
    }
    .spinner-grow-sm { width: 1rem; height: 1rem; }

    /* ── Card (Bootstrap) ────────────────────────── */
    .card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
        border: 1px solid var(--panel-border);
        border-radius: 1.25rem;
        box-shadow: 0 14px 36px -20px var(--shadow-color);
        word-wrap: break-word;
    }
    .card-body { flex: 1 1 auto; padding: 1.25rem 1.5rem; }
    .card-title { margin-bottom: 0.5rem; font-size: var(--type-title-sm); font-weight: 700; }
    .card-subtitle { margin-top: -0.25rem; margin-bottom: 0; font-size: var(--type-label); color: var(--text-muted); }
    .card-text:last-child { margin-bottom: 0; }
    .card-header {
        padding: 0.75rem 1.5rem;
        border-bottom: 1px solid var(--panel-border);
        background: color-mix(in srgb, var(--panel-soft) 60%, transparent);
        border-radius: 1.25rem 1.25rem 0 0;
    }
    .card-footer {
        padding: 0.75rem 1.5rem;
        border-top: 1px solid var(--panel-border);
        background: color-mix(in srgb, var(--panel-soft) 40%, transparent);
        border-radius: 0 0 1.25rem 1.25rem;
    }

    /* ── Pagination ──────────────────────────────── */
    .pagination {
        display: flex;
        padding-left: 0;
        list-style: none;
        gap: 0.25rem;
    }
    .page-item.disabled .page-link { opacity: 0.5; pointer-events: none; }
    .page-item.active .page-link {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
        color: var(--accent-contrast);
        border-color: transparent;
    }
    .page-link {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 2.25rem;
        height: 2.25rem;
        padding: 0 0.65rem;
        font-size: var(--type-label);
        font-weight: 600;
        color: var(--text-muted);
        background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
        border: 1px solid var(--panel-border);
        border-radius: 999px;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.15s;
    }
    .page-link:hover { background: color-mix(in srgb, var(--panel-bg) 100%, transparent); color: var(--text-primary); }

    /* ── Collapse ────────────────────────────────── */
    .collapse:not(.show) { display: none; }
    .collapsing {
        height: 0;
        overflow: hidden;
        transition: height 0.35s ease;
    }

    /* ── Tooltip / Popover stub ──────────────────── */
    .tooltip { position: absolute; z-index: 1080; pointer-events: none; }
    .tooltip-inner { max-width: 200px; padding: 0.4rem 0.75rem; color: #fff; background: rgba(20, 25, 40, 0.9); border-radius: 0.5rem; font-size: var(--type-caption); }

    /* ── List group ──────────────────────────────── */
    .list-group { display: flex; flex-direction: column; padding-left: 0; margin-bottom: 0; border-radius: 1rem; overflow: hidden; }
    .list-group-item {
        position: relative;
        display: block;
        padding: 0.65rem 1rem;
        color: var(--text-primary);
        background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
        border: 1px solid var(--panel-border);
        margin-top: -1px;
        text-decoration: none;
    }
    .list-group-item:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
    .list-group-item:last-child  { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
    .list-group-item.active { background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)); border-color: color-mix(in srgb, var(--accent) 32%, var(--panel-border)); }
    .list-group-item-action { cursor: pointer; }
    .list-group-item-action:hover { background: color-mix(in srgb, var(--panel-soft) 80%, transparent); }
    .list-group-flush .list-group-item { border-left: 0; border-right: 0; }

    /* ── Progress ────────────────────────────────── */
    .progress {
        height: 0.5rem;
        background: color-mix(in srgb, var(--panel-soft) 100%, transparent);
        border-radius: 999px;
        overflow: hidden;
    }
    .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--accent) 0%, var(--accent-strong) 100%);
        border-radius: 999px;
        transition: width 0.35s ease;
    }
    .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent); background-size: 1rem 1rem; }

    /* ── Offcanvas ───────────────────────────────── */
    .offcanvas {
        position: fixed;
        bottom: 0;
        z-index: 1045;
        display: flex;
        flex-direction: column;
        max-width: 100%;
        background: color-mix(in srgb, var(--panel-bg) 100%, transparent);
        border: 1px solid var(--panel-border);
        outline: 0;
        transition: transform 0.3s ease;
        visibility: hidden;
    }
    .offcanvas.show { visibility: visible; }
    .offcanvas-start { top: 0; left: 0; width: 400px; border-right: 1px solid var(--panel-border); transform: translateX(-100%); }
    .offcanvas-start.show { transform: translateX(0); }
    .offcanvas-end { top: 0; right: 0; width: 400px; border-left: 1px solid var(--panel-border); transform: translateX(100%); }
    .offcanvas-end.show { transform: translateX(0); }
    .offcanvas-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--panel-border); }
    .offcanvas-title { margin-bottom: 0; font-weight: 700; }
    .offcanvas-body { flex-grow: 1; overflow-y: auto; padding: 1rem 1.5rem; }
    .offcanvas-backdrop { position: fixed; inset: 0; z-index: 1040; background: rgba(5, 10, 18, 0.5); }
}

@keyframes spinner-grow {
    0%  { transform: scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1); opacity: 0; }
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

@keyframes authFloat {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50% { transform: translate3d(0, -8px, 0) scale(1.015); }
}

@media (max-width: 1023px) {
	html { font-size: 14.5px; }
	body { font-size: 14px; }

	.app-shell { background: transparent; }
	.panel { @apply rounded-[20px]; }
	.app-topbar { @apply rounded-[18px]; }
	.header-search-shell { @apply rounded-[18px]; }
	.header-search-icon, .header-search-submit { @apply h-8 w-8; }
	.theme-card { @apply p-3.5; }

	.toast-stack { @apply right-3 top-3 w-[calc(100vw-1.5rem)]; }

	.page-header-row { align-items: center; flex-wrap: nowrap; }
	.page-header-inline { width: auto; max-width: 100%; flex: 0 1 max-content; overflow: hidden; }
	.page-breadcrumbs { max-width: min(36vw, 17rem); overflow-x: auto; white-space: nowrap; }

	.header-action-button {
		min-height: 2.2rem;
		padding-left: 0.7rem;
		padding-right: 0.7rem;
	}

	.widget-toggle-grid-balanced {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
	}

	.widget-toggle-grid-balanced .widget-chip {
		justify-content: center;
		text-align: center;
	}

	.dashboard-canvas {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.dashboard-widget.is-half { grid-column: span 6 / span 6; }
	.dashboard-widget.is-wide { grid-column: span 7 / span 7; }
	.dashboard-widget.is-side { grid-column: span 5 / span 5; }
}

@media (max-width: 767px) {
	html { font-size: 14px; }
	body { font-size: 13.5px; }

	.section-kicker { letter-spacing: 0.22em; }
	.icon-button { @apply h-8 w-8; }

	.page-heading h1, .type-page-title { font-size: 1rem !important; }

	.header-action-button {
		min-height: 2rem;
		padding-left: 0.6rem;
		padding-right: 0.6rem;
		font-size: 0.72rem;
	}

	.page-breadcrumbs { font-size: 0.7rem; max-width: 28vw; }

	.profile-layout-grid { grid-template-columns: 1fr; }
	.profile-showcase-main { grid-template-columns: 1fr; align-items: start; gap: 1rem; margin-top: -1.5rem; }
	.profile-showcase-stats { grid-template-columns: 1fr; min-width: 0; }
	.profile-showcase { border-radius: 1.6rem; }

	.profile-cover-chrome { left: 1rem; right: 1rem; top: 0.9rem; flex-direction: column; align-items: start; }
	.profile-cover-brand { left: 1rem; bottom: 0.85rem; max-width: calc(100% - 2rem); }
	.profile-cover-meta { justify-content: start; }
	.profile-nav-strip { gap: 0.45rem; top: 4.9rem; }

	.page-header-inline { gap: 0.35rem; }
	.page-actions { gap: 0.35rem; }

	.widget-toggle-grid-balanced { grid-template-columns: 1fr; }
}

@layer components {
	.landing-page {
		margin: 0;
		min-width: 320px;
		overflow-x: hidden;
		background: var(--panel-bg);
		color: var(--text-primary);
		font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
		font-size: 1rem;
		line-height: 1.65;
	}

	.landing-page *, .landing-page *::before, .landing-page *::after { box-sizing: border-box; }
	.landing-page a, .landing-page button { transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
	.landing-page :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 3px; }
	.landing-container { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
	.landing-skip-link { position: fixed; z-index: 100; left: 1rem; top: -5rem; padding: .7rem 1rem; border-radius: 6px; background: var(--accent); color: var(--accent-contrast); }
	.landing-skip-link:focus { top: 1rem; }

	.landing-topbar { background: var(--text-primary); color: var(--panel-bg); font-size: .78rem; }
	.landing-topbar-link { display: flex; min-width: 0; align-items: center; gap: .45rem; opacity: .84; }
	.landing-topbar-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.landing-topbar-link:hover, .landing-icon-link:hover { opacity: 1; color: var(--accent); }
	.landing-icon-link { display: grid; width: 2rem; height: 2rem; place-items: center; opacity: .8; }

	.landing-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid var(--panel-border); background: color-mix(in srgb, var(--panel-bg) 94%, transparent); backdrop-filter: blur(14px); }
	.landing-header.is-scrolled { box-shadow: 0 10px 28px -24px var(--shadow-color); }
	.landing-brand { display: flex; min-width: 0; align-items: center; gap: .75rem; color: var(--text-primary); font-weight: 800; }
	.landing-brand img { width: auto; max-width: 9rem; height: 2.5rem; object-fit: contain; }
	.landing-brand-mark { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 8px; background: var(--accent); color: var(--accent-contrast); }
	.landing-brand > span:last-child { overflow: hidden; max-width: 14rem; text-overflow: ellipsis; white-space: nowrap; }
	.landing-navigation { display: flex; align-items: center; gap: 1.5rem; }
	.landing-nav-links, .landing-nav-actions { display: flex; align-items: center; gap: 1rem; }
	.landing-nav-link { position: relative; padding-block: .65rem; color: var(--text-muted); font-size: .84rem; font-weight: 700; }
	.landing-nav-link::after { position: absolute; right: 0; bottom: .25rem; left: 0; height: 2px; transform: scaleX(0); background: var(--accent); content: ''; transition: transform 180ms ease; }
	.landing-nav-link:hover, .landing-nav-link.is-active { color: var(--text-primary); }
	.landing-nav-link.is-active::after { transform: scaleX(1); }
	.landing-menu-button { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid var(--panel-border); border-radius: 7px; background: var(--panel-soft); font-size: 1.45rem; }

	.landing-button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; padding: .68rem 1.1rem; border: 1px solid transparent; border-radius: 7px; font-size: .84rem; font-weight: 800; line-height: 1.2; }
	.landing-button:hover { transform: translateY(-1px); }
	.landing-button-primary { background: var(--accent); color: var(--accent-contrast); box-shadow: 0 10px 24px -18px var(--accent-strong); }
	.landing-button-primary:hover { background: var(--accent-strong); }
	.landing-button-secondary { border-color: var(--panel-border); background: var(--panel-soft); color: var(--text-primary); }
	.landing-button-on-dark { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); color: #fff; }
	.landing-button-contrast { background: var(--accent-contrast); color: var(--accent-strong); }

	.landing-section { padding-block: 6rem; background: var(--panel-bg); }
	.landing-section-muted { background: var(--panel-soft); }
	.landing-section-heading { max-width: 43rem; margin-bottom: 3rem; }
	.landing-section-heading.text-center { margin-inline: auto; }
	.landing-eyebrow { margin-bottom: .65rem; color: var(--accent); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
	.landing-section-heading h2, .landing-cta h2 { color: var(--text-primary); font-size: 2.35rem; font-weight: 800; line-height: 1.15; }
	.landing-section-heading > p:last-child { margin-top: 1rem; color: var(--text-muted); }

	.landing-hero { position: relative; height: min(640px, calc(100svh - 120px)); min-height: 480px; overflow: hidden; background: var(--text-primary); color: #fff; }
	.landing-hero-media, .landing-hero-slide, .landing-hero-overlay { position: absolute; inset: 0; }
	.landing-hero-slide { visibility: hidden; opacity: 0; transition: opacity 600ms ease, visibility 600ms ease; }
	.landing-hero-slide.is-active { visibility: visible; opacity: 1; }
	.landing-hero-image { width: 100%; height: 100%; object-fit: cover; }
	.landing-hero-overlay { background: rgba(12, 15, 22, .62); }
	.landing-hero:not(:has(.landing-hero-media)) .landing-hero-overlay { background: color-mix(in srgb, var(--accent) 30%, var(--text-primary)); }
	.landing-hero-content { position: relative; z-index: 2; display: flex; height: 100%; align-items: center; padding-block: 4rem 6rem; }
	.landing-hero h1 { max-width: 18ch; color: #fff; font-size: 3.65rem; font-weight: 800; line-height: 1.04; }
	.landing-hero-description { max-width: 42rem; margin-top: 1.25rem; color: rgba(255,255,255,.82); font-size: 1.08rem; }
	.landing-hero-captions { position: absolute; z-index: 3; right: 0; bottom: 5.2rem; left: 0; display: flex; justify-content: flex-end; pointer-events: none; }
	.landing-hero-caption { display: none; width: min(21rem, 34vw); padding-left: 1rem; border-left: 2px solid var(--accent); color: rgba(255,255,255,.78); }
	.landing-hero-caption.is-active { display: grid; gap: .3rem; }
	.landing-hero-caption strong { color: #fff; font-size: .9rem; }
	.landing-hero-caption span { font-size: .78rem; }
	.landing-hero-caption a { width: max-content; color: #fff; font-size: .76rem; font-weight: 800; pointer-events: auto; }
	.landing-slider-controls { position: absolute; z-index: 4; right: 0; bottom: 1.5rem; left: 0; display: flex; align-items: center; gap: .7rem; }
	.landing-slider-controls > button, .landing-slider-controls-dark > button { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(0,0,0,.18); color: #fff; }
	.landing-slider-dots { display: flex; align-items: center; gap: .4rem; }
	.landing-slider-dots button { width: .55rem; height: .55rem; border-radius: 50%; background: rgba(255,255,255,.45); }
	.landing-slider-dots button.is-active { background: var(--accent); }

	.landing-about-media { overflow: hidden; border-radius: 8px; aspect-ratio: 6 / 5; background: var(--panel-soft); }
	.landing-about-media img { width: 100%; height: 100%; object-fit: cover; }
	.landing-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.25rem; }
	.landing-card, .landing-project-card { overflow: hidden; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); box-shadow: 0 16px 30px -28px var(--shadow-color); }
	.landing-card:hover, .landing-project-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-border)); }
	.landing-card-image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
	.landing-card > .landing-feature-icon { margin: 1.5rem 1.5rem 0; }
	.landing-card-body, .landing-project-body { padding: 1.5rem; }
	.landing-card h3, .landing-feature h3, .landing-reason h3, .landing-project-card h3 { font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
	.landing-card p, .landing-feature p, .landing-reason p, .landing-project-card p { margin-top: .65rem; color: var(--text-muted); }
	.landing-text-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.25rem; color: var(--accent-strong); font-size: .84rem; font-weight: 800; }
	.landing-text-link:hover { gap: .6rem; }

	.landing-reason-list { border-top: 1px solid var(--panel-border); }
	.landing-reason { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; padding-block: 1.5rem; border-bottom: 1px solid var(--panel-border); }
	.landing-reason-number { color: var(--accent); font-size: .78rem; font-weight: 800; }
	.landing-inline-icon { float: right; color: var(--accent); font-size: 1.4rem; }
	.landing-statistics { background: var(--text-primary); color: var(--panel-bg); }
	.landing-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
	.landing-stat { display: grid; justify-items: center; gap: .35rem; padding: 1.5rem; text-align: center; }
	.landing-stat + .landing-stat { border-left: 1px solid rgba(255,255,255,.14); }
	.landing-stat i { margin-bottom: .25rem; color: var(--accent); font-size: 1.5rem; }
	.landing-stat strong { color: #fff; font-size: 2.25rem; line-height: 1; }
	.landing-stat span { color: rgba(255,255,255,.7); font-size: .82rem; }

	.landing-feature-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
	.landing-feature { display: flex; min-height: 9rem; gap: 1.25rem; padding: 1.35rem; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); }
	.landing-feature > img { width: 9rem; border-radius: 6px; object-fit: cover; }
	.landing-feature-icon { display: grid; flex: 0 0 auto; width: 3rem; height: 3rem; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft)); color: var(--accent); font-size: 1.35rem; }
	.landing-project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; }
	.landing-project-card > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
	.landing-tag { display: inline-flex; padding: .25rem .55rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); color: var(--accent-strong); font-size: .7rem; font-weight: 800; }
	.landing-project-client { margin-top: .25rem !important; color: var(--accent-strong) !important; font-size: .8rem; font-weight: 700; }

	.landing-testimonial-track { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 1rem; }
	.landing-testimonial { position: relative; padding: 2rem; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); }
	.is-enhanced .landing-testimonial-track:has(+ .landing-slider-controls) .landing-testimonial { display: none; max-width: 48rem; margin-inline: auto; }
	.is-enhanced .landing-testimonial.is-active { display: block; }
	.landing-quote { color: var(--accent); font-size: 2rem; }
	.landing-testimonial blockquote { margin-top: .75rem; color: var(--text-primary); font-size: 1.05rem; line-height: 1.75; }
	.landing-rating { display: flex; gap: .2rem; margin-top: 1rem; color: var(--accent); font-size: .8rem; }
	.landing-person { display: flex; align-items: center; gap: .8rem; margin-top: 1.5rem; }
	.landing-person > img, .landing-person > span { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; }
	.landing-person > span { display: grid; place-items: center; background: var(--accent); color: var(--accent-contrast); font-weight: 800; }
	.landing-person strong, .landing-person small { display: block; }
	.landing-person small { color: var(--text-muted); }
	.landing-slider-controls-dark { position: static; justify-content: center; margin-top: 1.5rem; }
	.landing-slider-controls-dark > button { border-color: var(--panel-border); background: var(--panel-bg); color: var(--text-primary); }
	.landing-slider-controls-dark .landing-slider-dots button { background: var(--panel-border); }

	.landing-logo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); border-top: 1px solid var(--panel-border); border-left: 1px solid var(--panel-border); }
	.landing-logo-cell { display: grid; min-height: 8rem; place-items: center; padding: 1.25rem; border-right: 1px solid var(--panel-border); border-bottom: 1px solid var(--panel-border); color: var(--text-muted); font-weight: 800; text-align: center; }
	.landing-logo-cell img { width: 100%; max-width: 9rem; height: 4rem; object-fit: contain; }
	.landing-cta { position: relative; padding-block: 5rem; overflow: hidden; background: var(--accent); color: var(--accent-contrast); }
	.landing-cta { background-image: var(--landing-cta-image, none); background-position: center; background-size: cover; }
	.landing-cta::before { position: absolute; inset: 0; background: color-mix(in srgb, var(--accent-strong) 88%, transparent); content: ''; }
	.landing-cta h2 { color: var(--accent-contrast); }
	.landing-cta p { max-width: 42rem; margin: 1rem auto 0; opacity: .82; }

	.landing-contact-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
	.landing-contact-list > * { display: flex; min-width: 0; align-items: center; gap: 1rem; padding: 1.1rem; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); }
	.landing-contact-list > * > i { color: var(--accent); font-size: 1.25rem; }
	.landing-contact-list span { min-width: 0; }
	.landing-contact-list small, .landing-contact-list strong { display: block; }
	.landing-contact-list small { color: var(--text-muted); font-size: .7rem; }
	.landing-contact-list strong { overflow-wrap: anywhere; font-size: .88rem; }

	.landing-footer { padding-top: 4.5rem; background: var(--text-primary); color: rgba(255,255,255,.72); }
	.landing-footer-grid { display: grid; grid-template-columns: minmax(15rem,1.5fr) repeat(3,minmax(9rem,1fr)); gap: 2.5rem; }
	.landing-footer-brand img { width: auto; max-width: 10rem; height: 3rem; object-fit: contain; filter: brightness(0) invert(1); }
	.landing-footer h2, .landing-footer h3 { color: #fff; font-weight: 800; }
	.landing-footer h2 { margin-top: .8rem; font-size: 1.25rem; }
	.landing-footer h3 { margin-bottom: 1rem; font-size: .85rem; }
	.landing-footer p { max-width: 25rem; margin-top: .8rem; }
	.landing-footer nav, .landing-footer-links { display: grid; gap: .55rem; }
	.landing-footer a:hover { color: var(--accent); }
	.landing-footer-social { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 7px; }
	.landing-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-block: 1.3rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .78rem; }
	.landing-empty-state { display: grid; min-height: calc(100svh - 72px); place-items: center; padding-block: 5rem; background: var(--panel-soft); }
	.landing-empty-state h1 { font-size: 2.5rem; font-weight: 800; }
	.landing-empty-state p:not(.landing-eyebrow) { margin-top: .75rem; color: var(--text-muted); }
}

@media (max-width: 1100px) {
	.landing-nav-links { gap: .65rem; }
	.landing-nav-link { font-size: .76rem; }
	.landing-navigation { gap: .8rem; }
	.landing-nav-actions .landing-button-primary { display: none; }
}

@media (max-width: 1023px) {
	.landing-navigation { position: absolute; top: calc(100% + 1px); right: 1rem; left: 1rem; display: none; max-height: calc(100svh - 100px); align-items: stretch; padding: 1rem; overflow-y: auto; border: 1px solid var(--panel-border); border-radius: 8px; background: var(--panel-bg); box-shadow: 0 20px 40px -24px var(--shadow-color); }
	.landing-navigation.is-open { display: block; }
	.landing-nav-links, .landing-nav-actions { align-items: stretch; flex-direction: column; }
	.landing-nav-link { padding: .65rem; }
	.landing-nav-actions { margin-top: .8rem; }
	.landing-nav-actions .landing-button-primary { display: inline-flex; }
	.landing-card-grid, .landing-project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
	.landing-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767px) {
	.landing-container { width: min(100% - 1.25rem, 1180px); }
	.landing-topbar-link:first-child { display: none; }
	.landing-section { padding-block: 4rem; }
	.landing-section-heading { margin-bottom: 2rem; }
	.landing-section-heading h2, .landing-cta h2 { font-size: 1.85rem; }
	.landing-hero { height: min(590px, calc(100svh - 100px)); min-height: 450px; }
	.landing-hero h1 { font-size: 2.5rem; line-height: 1.08; }
	.landing-hero-description { font-size: .98rem; }
	.landing-hero-captions { display: none; }
	.landing-card-grid, .landing-project-grid, .landing-feature-grid, .landing-contact-list, .landing-footer-grid { grid-template-columns: 1fr; }
	.landing-feature { flex-direction: column; }
	.landing-feature > img { width: 100%; aspect-ratio: 16 / 9; }
	.landing-stat + .landing-stat { border-left: 0; }
	.landing-footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	.landing-page *, .landing-page *::before, .landing-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}