.compactPanelHeader {
	padding-bottom: 8px;
}
.compactTitle {
	font-size: calc(var(--ui-fs) * 1.21) !important;
	margin-bottom: 2px !important;
}
.compactDesc {
	font-size: calc(var(--ui-fs) * 0.86) !important;
	color: var(--theme-colors-text-secondary);
	margin-bottom: 0 !important;
}
.dashboardHeroCard.compactHeroCard {
	padding: 14px 10px 10px 10px !important;
	min-width: 0;
	max-width: 100%;
}
.dashboardHeroCardHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.dashboardCardTag.small {
	font-size: calc(var(--ui-fs) * 0.71);
	margin-bottom: 0;
}
.dashboardHeroCardInfo {
	font-size: calc(var(--ui-fs) * 0.79);
	color: var(--theme-colors-text-secondary);
	font-weight: 500;
	opacity: 0.7;
}
.dashboardLinkCard.compactModuleCard {
	padding: 14px 10px 10px 10px !important;
	min-width: 0;
	max-width: 100%;
}
.dashboardModuleCardHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.dashboardModuleCardInfo {
	font-size: calc(var(--ui-fs) * 0.79);
	color: var(--theme-colors-text-secondary);
	font-weight: 500;
	opacity: 0.7;
}
.compactGo {
	font-size: calc(var(--ui-fs) * 0.86);
	margin-top: 6px;
}
.dashboardHeaderLink.compact {
	font-size: calc(var(--ui-fs) * 0.86);
	padding: 4px 10px;
	border-radius: 7px;
}
.compactActionPanel {
	padding: 14px 10px 10px 10px !important;
	min-width: 0;
	max-width: 100%;
}
.dashboardActionPanelHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.dashboardCardTag.small {
	font-size: 10px;
	margin-bottom: 0;
}
.dashboardActionPanelInfo {
	font-size: 11px;
	color: var(--theme-colors-text-secondary);
	font-weight: 500;
	opacity: 0.7;
}
.compactActionList {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	row-gap: 6px;
	margin: 0;
}
.dashboardActionButton.compact {
	font-size: calc(var(--ui-fs) * 0.86);
	padding: 5px 10px;
	border-radius: 7px;
	min-width: 0;
	flex: 1 1 140px;
	white-space: normal;
	text-align: center;
}
.dashboardTrendChartWrapper {
	width: 100%;
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.dashboardTrendChart {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(30, 1fr);
	gap: 2px;
}

@media (max-width: 900px) {
       .dashboardTrendChart {
	       gap: 3px;
       }
}

@media (max-width: 600px) {
       .dashboardTrendChart {
	       gap: 2px;
       }
}
th:last-child {
	text-align: left;
}
/* Bonus yönetimi tablosunda işlem butonları arası boşluk */
.bonus-action-buttons {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: flex-start;
	position: relative;
}

/* Notların arka planı temaya göre transparan ve hafif koyu */
.request-note-display {
	color: #333;
	font-style: italic;
	background: color-mix(in srgb, var(--theme-colors-surface, #fff) 85%, #000 15%);
	opacity: 0.92;
	padding: 2px 8px;
	border-radius: 6px;
	font-size: inherit;
	margin-left: 8px;
	margin-right: 0;
	display: inline-block;
	text-align: center;
}
.detail-label {
	color: var(--theme-colors-accent);
	font-weight: 600;
}
.detail-value {
	color: var(--theme-colors-text-primary);
}
/* Bildirim paneli ve butonları için küçük boyutlar */
.ntfPanelHeader {
	gap: 6px;
}
.ntfPanelHeader button.ntfMarkAllRead,
.ntfPanelHeader button.ntfClearAll {
	font-size: 11px;
	padding: 3px 10px;
	border-radius: 6px;
	margin-left: 4px;
	background: var(--theme-colors-chip-bg, #F8FAF4);
	border: 1px solid var(--theme-colors-divider, #F5D7AE);
	color: var(--theme-colors-text-secondary, #6A5A58);
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}
.ntfPanelHeader button.ntfMarkAllRead:hover,
.ntfPanelHeader button.ntfClearAll:hover {
	background: var(--theme-colors-divider, #F5D7AE);
	color: var(--theme-colors-accent, #F2784B);
}
.ntfPanel {
	font-size: 13px;
	min-width: 260px;
	max-width: 320px;
}
.ntfPanelTitle {
	font-size: 13px;
}
/* Modal (Pop-up) stilleri */
.modal {
	display: flex;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.32s cubic-bezier(.4,1,.4,1);
	position: fixed;
	z-index: 10000;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: auto;
	background: rgba(44, 44, 44, 0.32);
	backdrop-filter: blur(2px);
	justify-content: center;
	align-items: center;
}
.modal.open {
	opacity: 1;
	pointer-events: auto;
}
.modal-content {
		border: 1.5px solid color-mix(in srgb, var(--theme-colors-accent, #F2784B) 40%, var(--theme-colors-surface, #fff) 60%);
	background: color-mix(in srgb, var(--theme-colors-surface, #fff) 85%, transparent 15%);
	backdrop-filter: blur(8px) saturate(120%);
	margin: 6vh auto;
	padding: 48px 44px 36px 44px;
	border-radius: 20px;
	max-width: 700px;
	min-width: 420px;
	min-height: 300px;
	box-shadow: 0 16px 56px rgba(60,61,89,0.26);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 28px;
	transform: scale(0.96);
	opacity: 0;
	transition: opacity 0.32s cubic-bezier(.4,1,.4,1), transform 0.32s cubic-bezier(.4,1,.4,1);
	font-size: 1.2rem;
	font-family: var(--font-heading, inherit);
}
.modal.open .modal-content {
	opacity: 1;
	transform: scale(1);
}
.modal-content label {
	font-weight: 500;
	margin-bottom: 4px;
}
.modal-content textarea {
	width: 100%;
	min-height: 60px;
	resize: vertical;
	border-radius: 8px;
	border: 1px solid var(--theme-colors-divider, #eee);
	padding: 8px;
	font-size: 1rem;
}
.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 8px;
}
.close {
	position: absolute;
	top: 10px;
	right: 16px;
	font-size: 1.4rem;
	color: #888;
	cursor: pointer;
}
.charCounter {
	font-size: 0.9em;
	color: #888;
	align-self: flex-end;
}
/* Tablo içi işlem butonları arası boşluk */
.tableWrapper td button:not(:last-child) {
	margin-right: 8px;
}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap');

* {
	transition: color 0.4s ease, background-color 0.4s ease, border-color 0.4s ease, 
		background 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease, stroke 0.4s ease;
}

html {
	transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, 
		background 0.4s ease, box-shadow 0.4s ease, fill 0.4s ease, stroke 0.4s ease;
}

:root {
	--theme-radius-small: 8px;
	--theme-radius-medium: 12px;
	--theme-radius-large: 16px;
	--theme-spacing-xs: 6px;
	--theme-spacing-sm: 10px;
	--theme-spacing-md: 16px;
	--theme-spacing-lg: 24px;
	--layout-sidebar-expanded: 260px;
	--layout-sidebar-collapsed: 84px;
	--font-body: "Manrope", "Segoe UI", sans-serif;
	--font-heading: "Sora", "Segoe UI", sans-serif;
	--ui-fs: 14px;
	--ui-font-scale: 1;
	--ui-control-pad-y: 9px;
	--ui-control-pad-x: 11px;
	--ui-panel-pad: 12px;
	--ui-card-pad: 18px;
}

/* ── Theme: Light (default) ──────────────────────────────────────── */
:root,
[data-theme-mode="light"] {
	--theme-colors-canvas: #FFFFFF;
	--theme-colors-canvas-accent: #F2C12E;
	--theme-colors-canvas-accent-secondary: #F29D35;
	--theme-colors-surface: #FFFFFF;
	--theme-colors-surface-strong: #FFF6EA;
	--theme-colors-input-bg: #FFFFFF;
	--theme-colors-input-text: #3C3D59;
	--theme-colors-chip-bg: #F8FAF4;
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.02);
	--theme-colors-text-primary: #3C3D59;
	--theme-colors-text-secondary: #6A5A58;
	--theme-colors-border: #F29D35;
	--theme-colors-divider: #F5D7AE;
	--theme-colors-accent: #F2784B;
	--theme-colors-accent-alt: #F29D35;
	--theme-colors-accent-contrast: #FFFFFF;
	--theme-colors-danger: #F2784B;
	--theme-colors-warning: #F2C12E;
	--theme-colors-success: #D9843B;
	--theme-colors-notice-bg: #FFF1DB;
	--theme-colors-notice-border: #F2C12E;
	--theme-colors-notice-text: #8A5B1B;
	--theme-colors-pending-bg: #FFF3CC;
	--theme-colors-approved-bg: #FCE7D3;
	--theme-colors-rejected-bg: #FFE1D6;
	--theme-colors-sidebar-bg: #3C3D59;
	--theme-colors-sidebar-bg-alt: #4A4B6A;
	--theme-colors-sidebar-text: #FFFFFF;
	--theme-colors-sidebar-muted: #F2C12E;
	--theme-colors-sidebar-active: #F2784B;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.12);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.08);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.18);
	--theme-colors-sidebar-icon-bg: rgba(242, 193, 46, 0.18);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.18);
	--theme-colors-ping-output-bg: #2F3045;
	--theme-colors-ping-output-text: #FFF3CC;
	--theme-shadow-soft: 0 14px 34px rgba(60, 61, 89, 0.14);
	--theme-shadow-card: 0 10px 24px rgba(60, 61, 89, 0.08);
}

/* ── Theme: System ────────────────────────────────────────────────── */
[data-theme-mode="system"] {
	--theme-colors-canvas: #F7F3EC;
	--theme-colors-canvas-accent: #F7F3EC;
	--theme-colors-canvas-accent-secondary: #F7F3EC;
	--theme-colors-surface: #FFFFFF;
	--theme-colors-surface-strong: #F9EFE0;
	--theme-colors-input-bg: rgba(255, 255, 255, 0.78);
	--theme-colors-input-text: #3C3D59;
	--theme-colors-chip-bg: #F7EFE2;
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-text-primary: #3C3D59;
	--theme-colors-text-secondary: #7A685B;
	--theme-colors-border: #D9843B;
	--theme-colors-divider: #E8D4BF;
	--theme-colors-accent: #D9843B;
	--theme-colors-accent-alt: #F29D35;
	--theme-colors-accent-contrast: #FFFFFF;
	--theme-colors-danger: #F2784B;
	--theme-colors-warning: #F2C12E;
	--theme-colors-success: #D9843B;
	--theme-colors-notice-bg: #FBEBD7;
	--theme-colors-notice-border: #D9843B;
	--theme-colors-notice-text: #7A4B1E;
	--theme-colors-pending-bg: #FCEAB7;
	--theme-colors-approved-bg: #F6DFC7;
	--theme-colors-rejected-bg: #F9D9CC;
	--theme-colors-sidebar-bg: #4B4D6C;
	--theme-colors-sidebar-bg-alt: #4B4D6C;
	--theme-colors-sidebar-text: #FFFFFF;
	--theme-colors-sidebar-muted: #F2C12E;
	--theme-colors-sidebar-active: #D9843B;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.10);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.14);
	--theme-colors-sidebar-icon-bg: rgba(242, 193, 46, 0.14);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.14);
	--theme-colors-ping-output-bg: #35374D;
	--theme-colors-ping-output-text: #FFF1CF;
	--theme-shadow-soft: 0 12px 28px rgba(60, 61, 89, 0.10);
	--theme-shadow-card: 0 8px 18px rgba(60, 61, 89, 0.07);
}

/* ── Theme: Light Flat ────────────────────────────────────────────── */
[data-theme-mode="lightFlat"] {
	--theme-colors-canvas: #F6F7FA;
	--theme-colors-canvas-accent: #F6F7FA;
	--theme-colors-canvas-accent-secondary: #F6F7FA;
	--theme-colors-surface: #FFFFFF;
	--theme-colors-surface-strong: #F0F2F7;
	--theme-colors-input-bg: #FFFFFF;
	--theme-colors-input-text: #2C3442;
	--theme-colors-chip-bg: #EEF1F6;
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.04);
	--theme-colors-text-primary: #2C3442;
	--theme-colors-text-secondary: #5A6476;
	--theme-colors-border: #C8CFDB;
	--theme-colors-divider: #DEE3EC;
	--theme-colors-accent: #4F79C8;
	--theme-colors-accent-alt: #6A8FDB;
	--theme-colors-accent-contrast: #FFFFFF;
	--theme-colors-danger: #D66A6A;
	--theme-colors-warning: #C9A74E;
	--theme-colors-success: #4E9A7E;
	--theme-colors-notice-bg: #EEF4FF;
	--theme-colors-notice-border: #7A9FE1;
	--theme-colors-notice-text: #2E4A7F;
	--theme-colors-pending-bg: rgba(201, 167, 78, 0.18);
	--theme-colors-approved-bg: rgba(78, 154, 126, 0.18);
	--theme-colors-rejected-bg: rgba(214, 106, 106, 0.18);
	--theme-colors-sidebar-bg: #2B3342;
	--theme-colors-sidebar-bg-alt: #2B3342;
	--theme-colors-sidebar-text: #F7F9FC;
	--theme-colors-sidebar-muted: #BFD0EE;
	--theme-colors-sidebar-active: #3F4E66;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.10);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.08);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.16);
	--theme-colors-sidebar-icon-bg: rgba(106, 143, 219, 0.18);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.16);
	--theme-colors-ping-output-bg: #EEF2F8;
	--theme-colors-ping-output-text: #324A6E;
	--theme-shadow-soft: 0 10px 24px rgba(38, 47, 62, 0.10);
	--theme-shadow-card: 0 6px 16px rgba(38, 47, 62, 0.08);
}

/* ── Theme: Dark ──────────────────────────────────────────────────── */
[data-theme-mode="dark"] {
	--theme-colors-canvas: #2E3045;
	--theme-colors-canvas-accent: #F2784B;
	--theme-colors-canvas-accent-secondary: #D9843B;
	--theme-colors-surface: #3C3D59;
	--theme-colors-surface-strong: #47496B;
	--theme-colors-input-bg: transparent;
	--theme-colors-input-text: #FFFFFF;
	--theme-colors-chip-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.10);
	--theme-colors-text-primary: #FFFFFF;
	--theme-colors-text-secondary: #F7D79E;
	--theme-colors-border: #D9843B;
	--theme-colors-divider: rgba(242, 157, 53, 0.28);
	--theme-colors-accent: #F2C12E;
	--theme-colors-accent-alt: #F29D35;
	--theme-colors-accent-contrast: #3C3D59;
	--theme-colors-danger: #F2784B;
	--theme-colors-warning: #F2C12E;
	--theme-colors-success: #D9843B;
	--theme-colors-notice-bg: #544525;
	--theme-colors-notice-border: #F2C12E;
	--theme-colors-notice-text: #FFF0C2;
	--theme-colors-pending-bg: rgba(242, 193, 46, 0.18);
	--theme-colors-approved-bg: rgba(217, 132, 59, 0.22);
	--theme-colors-rejected-bg: rgba(242, 120, 75, 0.22);
	--theme-colors-sidebar-bg: #2A2B3F;
	--theme-colors-sidebar-bg-alt: #3C3D59;
	--theme-colors-sidebar-text: #FFFFFF;
	--theme-colors-sidebar-muted: #F29D35;
	--theme-colors-sidebar-active: #D9843B;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.08);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.12);
	--theme-colors-sidebar-icon-bg: rgba(242, 193, 46, 0.18);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.12);
	--theme-colors-ping-output-bg: #1E2031;
	--theme-colors-ping-output-text: #FFF3CC;
	--theme-shadow-soft: 0 18px 38px rgba(0, 0, 0, 0.26);
	--theme-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.20);
}

/* ── Theme: Dark Flat ─────────────────────────────────────────────── */
[data-theme-mode="darkFlat"] {
	--theme-colors-canvas: #20242D;
	--theme-colors-canvas-accent: #20242D;
	--theme-colors-canvas-accent-secondary: #20242D;
	--theme-colors-surface: #2A2F3A;
	--theme-colors-surface-strong: #333A47;
	--theme-colors-input-bg: #1D212A;
	--theme-colors-input-text: #EDEFF2;
	--theme-colors-chip-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.08);
	--theme-colors-text-primary: #F3F4F7;
	--theme-colors-text-secondary: #B7BCC8;
	--theme-colors-border: #4A5263;
	--theme-colors-divider: rgba(153, 163, 184, 0.22);
	--theme-colors-accent: #7FA7FF;
	--theme-colors-accent-alt: #9BC8FF;
	--theme-colors-accent-contrast: #111827;
	--theme-colors-danger: #F37A7A;
	--theme-colors-warning: #E7C777;
	--theme-colors-success: #66C6A2;
	--theme-colors-notice-bg: #2F3645;
	--theme-colors-notice-border: #7FA7FF;
	--theme-colors-notice-text: #DDE7FF;
	--theme-colors-pending-bg: rgba(231, 199, 119, 0.20);
	--theme-colors-approved-bg: rgba(102, 198, 162, 0.20);
	--theme-colors-rejected-bg: rgba(243, 122, 122, 0.20);
	--theme-colors-sidebar-bg: #181D25;
	--theme-colors-sidebar-bg-alt: #181D25;
	--theme-colors-sidebar-text: #F3F4F7;
	--theme-colors-sidebar-muted: #A9B0BE;
	--theme-colors-sidebar-active: #2A3344;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.10);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.16);
	--theme-colors-sidebar-icon-bg: rgba(127, 167, 255, 0.20);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.16);
	--theme-colors-ping-output-bg: #151923;
	--theme-colors-ping-output-text: #E4ECFF;
	--theme-shadow-soft: 0 18px 38px rgba(0, 0, 0, 0.32);
	--theme-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.26);
}

/* ── Theme: Light Warm ────────────────────────────────────────────── */
[data-theme-mode="lightWarm"] {
	--theme-colors-canvas: #FEF8F3;
	--theme-colors-canvas-accent: #FEF8F3;
	--theme-colors-canvas-accent-secondary: #FEF8F3;
	--theme-colors-surface: #FFFFFF;
	--theme-colors-surface-strong: #FDF3E8;
	--theme-colors-input-bg: #FFFFFF;
	--theme-colors-input-text: #3C3D59;
	--theme-colors-chip-bg: #F8F4F0;
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-text-primary: #3C3D59;
	--theme-colors-text-secondary: #7A6B60;
	--theme-colors-border: #D9843B;
	--theme-colors-divider: #E8D4BF;
	--theme-colors-accent: #D9843B;
	--theme-colors-accent-alt: #F29D35;
	--theme-colors-accent-contrast: #FFFFFF;
	--theme-colors-danger: #E8845A;
	--theme-colors-warning: #F2C12E;
	--theme-colors-success: #D9843B;
	--theme-colors-notice-bg: #FBEBD7;
	--theme-colors-notice-border: #D9843B;
	--theme-colors-notice-text: #7A4B1E;
	--theme-colors-pending-bg: rgba(242, 193, 46, 0.18);
	--theme-colors-approved-bg: rgba(217, 132, 59, 0.20);
	--theme-colors-rejected-bg: rgba(232, 132, 90, 0.20);
	--theme-colors-sidebar-bg: #5A4D42;
	--theme-colors-sidebar-bg-alt: #6B5A4E;
	--theme-colors-sidebar-text: #FFFFFF;
	--theme-colors-sidebar-muted: #F2C12E;
	--theme-colors-sidebar-active: #D9843B;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.12);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.08);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.18);
	--theme-colors-sidebar-icon-bg: rgba(242, 193, 46, 0.18);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.18);
	--theme-colors-ping-output-bg: #3C3045;
	--theme-colors-ping-output-text: #FFF1CF;
	--theme-shadow-soft: 0 12px 28px rgba(60, 61, 89, 0.10);
	--theme-shadow-card: 0 8px 18px rgba(60, 61, 89, 0.07);
}

/* ── Theme: Light Cool ────────────────────────────────────────────── */
[data-theme-mode="lightCool"] {
	--theme-colors-canvas: #F0F4FF;
	--theme-colors-canvas-accent: #F0F4FF;
	--theme-colors-canvas-accent-secondary: #F0F4FF;
	--theme-colors-surface: #FFFFFF;
	--theme-colors-surface-strong: #E8F0FF;
	--theme-colors-input-bg: #FFFFFF;
	--theme-colors-input-text: #2C3442;
	--theme-colors-chip-bg: #EEF1F6;
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.04);
	--theme-colors-text-primary: #2C3442;
	--theme-colors-text-secondary: #5A6476;
	--theme-colors-border: #7A9FE1;
	--theme-colors-divider: #DEE3EC;
	--theme-colors-accent: #4F79C8;
	--theme-colors-accent-alt: #6A8FDB;
	--theme-colors-accent-contrast: #FFFFFF;
	--theme-colors-danger: #D66A6A;
	--theme-colors-warning: #6A8FDB;
	--theme-colors-success: #4E9A7E;
	--theme-colors-notice-bg: #EEF4FF;
	--theme-colors-notice-border: #7A9FE1;
	--theme-colors-notice-text: #2E4A7F;
	--theme-colors-pending-bg: rgba(106, 143, 219, 0.18);
	--theme-colors-approved-bg: rgba(78, 154, 126, 0.18);
	--theme-colors-rejected-bg: rgba(214, 106, 106, 0.18);
	--theme-colors-sidebar-bg: #3B4B6A;
	--theme-colors-sidebar-bg-alt: #4A5B7A;
	--theme-colors-sidebar-text: #F7F9FC;
	--theme-colors-sidebar-muted: #BFD0EE;
	--theme-colors-sidebar-active: #6A8FDB;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.10);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.08);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.16);
	--theme-colors-sidebar-icon-bg: rgba(106, 143, 219, 0.18);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.16);
	--theme-colors-ping-output-bg: #EEF2F8;
	--theme-colors-ping-output-text: #324A6E;
	--theme-shadow-soft: 0 10px 24px rgba(38, 47, 62, 0.10);
	--theme-shadow-card: 0 6px 16px rgba(38, 47, 62, 0.08);
}

/* ── Theme: Dark Warm ─────────────────────────────────────────────── */
[data-theme-mode="darkWarm"] {
	--theme-colors-canvas: #1A1410;
	--theme-colors-canvas-accent: #F2784B;
	--theme-colors-canvas-accent-secondary: #D9843B;
	--theme-colors-surface: #2A241A;
	--theme-colors-surface-strong: #3A3228;
	--theme-colors-input-bg: #0F0A06;
	--theme-colors-input-text: #F5E5D9;
	--theme-colors-chip-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.10);
	--theme-colors-text-primary: #F5E5D9;
	--theme-colors-text-secondary: #D4C4B4;
	--theme-colors-border: #D9843B;
	--theme-colors-divider: rgba(242, 157, 53, 0.28);
	--theme-colors-accent: #F2784B;
	--theme-colors-accent-alt: #F29D35;
	--theme-colors-accent-contrast: #1A1410;
	--theme-colors-danger: #F2784B;
	--theme-colors-warning: #F2C12E;
	--theme-colors-success: #D9843B;
	--theme-colors-notice-bg: #3A281A;
	--theme-colors-notice-border: #F2C12E;
	--theme-colors-notice-text: #FFE8CC;
	--theme-colors-pending-bg: rgba(242, 193, 46, 0.18);
	--theme-colors-approved-bg: rgba(217, 132, 59, 0.22);
	--theme-colors-rejected-bg: rgba(242, 120, 75, 0.22);
	--theme-colors-sidebar-bg: #0F0A06;
	--theme-colors-sidebar-bg-alt: #1A1410;
	--theme-colors-sidebar-text: #F5E5D9;
	--theme-colors-sidebar-muted: #F29D35;
	--theme-colors-sidebar-active: #D9843B;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.08);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.12);
	--theme-colors-sidebar-icon-bg: rgba(242, 193, 46, 0.18);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.12);
	--theme-colors-ping-output-bg: #0F0A06;
	--theme-colors-ping-output-text: #FFF0D6;
	--theme-shadow-soft: 0 18px 38px rgba(0, 0, 0, 0.38);
	--theme-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.28);
}

/* ── Theme: Dark Cool ─────────────────────────────────────────────── */
[data-theme-mode="darkCool"] {
	--theme-colors-canvas: #0F1419;
	--theme-colors-canvas-accent: #6A8FDB;
	--theme-colors-canvas-accent-secondary: #7FA7FF;
	--theme-colors-surface: #1A202A;
	--theme-colors-surface-strong: #242E3A;
	--theme-colors-input-bg: #0A0E14;
	--theme-colors-input-text: #E8F0FF;
	--theme-colors-chip-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-option-bg: rgba(255, 255, 255, 0.10);
	--theme-colors-text-primary: #E8F0FF;
	--theme-colors-text-secondary: #B7C8E8;
	--theme-colors-border: #4F79C8;
	--theme-colors-divider: rgba(106, 143, 219, 0.22);
	--theme-colors-accent: #6A8FDB;
	--theme-colors-accent-alt: #7FA7FF;
	--theme-colors-accent-contrast: #0F1419;
	--theme-colors-danger: #F37A7A;
	--theme-colors-warning: #7FA7FF;
	--theme-colors-success: #4E9A7E;
	--theme-colors-notice-bg: #1A2847;
	--theme-colors-notice-border: #7FA7FF;
	--theme-colors-notice-text: #DDE7FF;
	--theme-colors-pending-bg: rgba(106, 143, 219, 0.18);
	--theme-colors-approved-bg: rgba(78, 154, 126, 0.18);
	--theme-colors-rejected-bg: rgba(243, 122, 122, 0.22);
	--theme-colors-sidebar-bg: #0A0E14;
	--theme-colors-sidebar-bg-alt: #0A0E14;
	--theme-colors-sidebar-text: #E8F0FF;
	--theme-colors-sidebar-muted: #8BA8E0;
	--theme-colors-sidebar-active: #6A8FDB;
	--theme-colors-sidebar-border: rgba(255, 255, 255, 0.10);
	--theme-colors-sidebar-panel-bg: rgba(255, 255, 255, 0.06);
	--theme-colors-sidebar-panel-border: rgba(255, 255, 255, 0.16);
	--theme-colors-sidebar-icon-bg: rgba(106, 143, 219, 0.20);
	--theme-colors-sidebar-icon-border: rgba(255, 255, 255, 0.16);
	--theme-colors-ping-output-bg: #0A0E14;
	--theme-colors-ping-output-text: #E8F0FF;
	--theme-shadow-soft: 0 18px 38px rgba(0, 0, 0, 0.4);
	--theme-shadow-card: 0 12px 28px rgba(0, 0, 0, 0.3);
}

/* ── Palette: Sunset ──────────────────────────────────────────────── */
[data-palette="sunset"] {
	--theme-colors-canvas-accent: #F2C12E;
	--theme-colors-canvas-accent-secondary: #F29D35;
	--theme-colors-border: #D9843B;
	--theme-colors-accent: #F2784B;
	--theme-colors-accent-alt: #F29D35;
	--theme-colors-danger: #F2784B;
	--theme-colors-warning: #F2C12E;
	--theme-colors-success: #D9843B;
	--theme-colors-notice-border: #F29D35;
	--theme-colors-pending-bg: rgba(242, 193, 46, 0.20);
	--theme-colors-approved-bg: rgba(217, 132, 59, 0.22);
	--theme-colors-rejected-bg: rgba(242, 120, 75, 0.22);
	--theme-colors-sidebar-muted: #F2C12E;
	--theme-colors-sidebar-active: #D9843B;
	--theme-colors-sidebar-icon-bg: rgba(242, 193, 46, 0.20);
	--theme-colors-ping-output-text: #FFF1CF;
}

/* ── Palette: Ocean ───────────────────────────────────────────────── */
[data-palette="ocean"] {
	--theme-colors-canvas-accent: #4BA3F2;
	--theme-colors-canvas-accent-secondary: #4BD9BF;
	--theme-colors-border: #4BA3F2;
	--theme-colors-accent: #2A7BD9;
	--theme-colors-accent-alt: #4BA3F2;
	--theme-colors-danger: #F2784B;
	--theme-colors-warning: #4BD9BF;
	--theme-colors-success: #2A7BD9;
	--theme-colors-notice-border: #4BA3F2;
	--theme-colors-pending-bg: rgba(75, 163, 242, 0.20);
	--theme-colors-approved-bg: rgba(75, 217, 191, 0.20);
	--theme-colors-sidebar-muted: #4BD9BF;
	--theme-colors-sidebar-active: #2A7BD9;
	--theme-colors-sidebar-icon-bg: rgba(75, 163, 242, 0.22);
	--theme-colors-ping-output-text: #DDF4FF;
}

/* ── Palette: Forest ──────────────────────────────────────────────── */
[data-palette="forest"] {
	--theme-colors-canvas-accent: #5EA667;
	--theme-colors-canvas-accent-secondary: #D7B17B;
	--theme-colors-border: #5EA667;
	--theme-colors-accent: #3C8A52;
	--theme-colors-accent-alt: #5EA667;
	--theme-colors-danger: #C56C4D;
	--theme-colors-warning: #D7B17B;
	--theme-colors-success: #3C8A52;
	--theme-colors-notice-border: #5EA667;
	--theme-colors-pending-bg: rgba(215, 177, 123, 0.22);
	--theme-colors-approved-bg: rgba(94, 166, 103, 0.22);
	--theme-colors-sidebar-muted: #D7B17B;
	--theme-colors-sidebar-active: #3C8A52;
	--theme-colors-sidebar-icon-bg: rgba(94, 166, 103, 0.24);
	--theme-colors-ping-output-text: #EAF7EB;
}

/* ── Palette: Mono ────────────────────────────────────────────────── */
[data-palette="mono"] {
	--theme-colors-canvas-accent: #C9CDD4;
	--theme-colors-canvas-accent-secondary: #B4BAC4;
	--theme-colors-border: #8F98A8;
	--theme-colors-divider: #D7DCE5;
	--theme-colors-accent: #5D6675;
	--theme-colors-accent-alt: #7B8596;
	--theme-colors-danger: #7A5151;
	--theme-colors-warning: #8D8D8D;
	--theme-colors-success: #5D6675;
	--theme-colors-notice-border: #8F98A8;
	--theme-colors-pending-bg: rgba(143, 152, 168, 0.20);
	--theme-colors-approved-bg: rgba(123, 133, 150, 0.20);
	--theme-colors-rejected-bg: rgba(122, 81, 81, 0.20);
	--theme-colors-sidebar-muted: #D0D6E2;
	--theme-colors-sidebar-active: #5D6675;
	--theme-colors-sidebar-icon-bg: rgba(143, 152, 168, 0.22);
	--theme-colors-ping-output-text: #EDF1F6;
}

/* ── Palette: Rose ────────────────────────────────────────────────── */
[data-palette="rose"] {
	--theme-colors-canvas-accent: #E05B7F;
	--theme-colors-canvas-accent-secondary: #F5A4B8;
	--theme-colors-border: #D9507A;
	--theme-colors-accent: #E05B7F;
	--theme-colors-accent-alt: #F098B6;
	--theme-colors-danger: #E05B7F;
	--theme-colors-warning: #F5A4B8;
	--theme-colors-success: #C4496A;
	--theme-colors-notice-border: #E05B7F;
	--theme-colors-pending-bg: rgba(245, 164, 184, 0.22);
	--theme-colors-approved-bg: rgba(196, 73, 106, 0.18);
	--theme-colors-rejected-bg: rgba(224, 91, 127, 0.22);
	--theme-colors-sidebar-muted: #F5C4D2;
	--theme-colors-sidebar-active: #C4496A;
	--theme-colors-sidebar-icon-bg: rgba(224, 91, 127, 0.22);
	--theme-colors-ping-output-text: #FFE8F0;
}

/* ── Palette: Slate ───────────────────────────────────────────────── */
[data-palette="slate"] {
	--theme-colors-canvas-accent: #4B85C2;
	--theme-colors-canvas-accent-secondary: #9AC0E0;
	--theme-colors-border: #4B85C2;
	--theme-colors-accent: #4B85C2;
	--theme-colors-accent-alt: #7AB0D8;
	--theme-colors-danger: #D9735A;
	--theme-colors-warning: #9AC0E0;
	--theme-colors-success: #3A7A96;
	--theme-colors-notice-border: #4B85C2;
	--theme-colors-pending-bg: rgba(154, 192, 224, 0.22);
	--theme-colors-approved-bg: rgba(58, 122, 150, 0.20);
	--theme-colors-rejected-bg: rgba(217, 115, 90, 0.22);
	--theme-colors-sidebar-muted: #BCE0F6;
	--theme-colors-sidebar-active: #3A7A96;
	--theme-colors-sidebar-icon-bg: rgba(75, 133, 194, 0.24);
	--theme-colors-ping-output-text: #E0F0FF;
}

/* ── Palette: Amber ───────────────────────────────────────────────── */
[data-palette="amber"] {
	--theme-colors-canvas-accent: #E8913A;
	--theme-colors-canvas-accent-secondary: #F2D06A;
	--theme-colors-border: #C47B28;
	--theme-colors-accent: #E8913A;
	--theme-colors-accent-alt: #F2B86A;
	--theme-colors-danger: #E86A4A;
	--theme-colors-warning: #F2D06A;
	--theme-colors-success: #C47B28;
	--theme-colors-notice-border: #E8913A;
	--theme-colors-pending-bg: rgba(242, 208, 106, 0.22);
	--theme-colors-approved-bg: rgba(196, 123, 40, 0.20);
	--theme-colors-rejected-bg: rgba(232, 106, 74, 0.22);
	--theme-colors-sidebar-muted: #F2D09A;
	--theme-colors-sidebar-active: #C47B28;
	--theme-colors-sidebar-icon-bg: rgba(232, 145, 58, 0.22);
	--theme-colors-ping-output-text: #FFF4DC;
}

/* ── Palette: Indigo ──────────────────────────────────────────────── */
[data-palette="indigo"] {
	--theme-colors-canvas-accent: #6B57C4;
	--theme-colors-canvas-accent-secondary: #C4B0F5;
	--theme-colors-border: #6B57C4;
	--theme-colors-accent: #6B57C4;
	--theme-colors-accent-alt: #9180DE;
	--theme-colors-danger: #E05B8A;
	--theme-colors-warning: #C4B0F5;
	--theme-colors-success: #4A3BAF;
	--theme-colors-notice-border: #6B57C4;
	--theme-colors-pending-bg: rgba(196, 176, 245, 0.22);
	--theme-colors-approved-bg: rgba(74, 59, 175, 0.18);
	--theme-colors-rejected-bg: rgba(224, 91, 138, 0.22);
	--theme-colors-sidebar-muted: #D0C6F8;
	--theme-colors-sidebar-active: #4A3BAF;
	--theme-colors-sidebar-icon-bg: rgba(107, 87, 196, 0.24);
	--theme-colors-ping-output-text: #EEE8FF;
}

/* ── Palette: Teal ────────────────────────────────────────────────── */
[data-palette="teal"] {
	--theme-colors-canvas-accent: #2BA99B;
	--theme-colors-canvas-accent-secondary: #5CC4B8;
	--theme-colors-border: #2BA99B;
	--theme-colors-accent: #2BA99B;
	--theme-colors-accent-alt: #4DB6AA;
	--theme-colors-danger: #E07B6A;
	--theme-colors-warning: #5CC4B8;
	--theme-colors-success: #1F8877;
	--theme-colors-notice-border: #2BA99B;
	--theme-colors-pending-bg: rgba(92, 196, 184, 0.20);
	--theme-colors-approved-bg: rgba(31, 136, 119, 0.18);
	--theme-colors-rejected-bg: rgba(224, 123, 106, 0.22);
	--theme-colors-sidebar-muted: #A8DDD6;
	--theme-colors-sidebar-active: #1F8877;
	--theme-colors-sidebar-icon-bg: rgba(43, 169, 155, 0.22);
	--theme-colors-ping-output-text: #D4F5F1;
}

/* ── Palette: Violet ──────────────────────────────────────────────── */
[data-palette="violet"] {
	--theme-colors-canvas-accent: #8B5BA8;
	--theme-colors-canvas-accent-secondary: #D9C4F5;
	--theme-colors-border: #8B5BA8;
	--theme-colors-accent: #8B5BA8;
	--theme-colors-accent-alt: #A878C4;
	--theme-colors-danger: #DE6B8A;
	--theme-colors-warning: #D9C4F5;
	--theme-colors-success: #6A3E88;
	--theme-colors-notice-border: #8B5BA8;
	--theme-colors-pending-bg: rgba(217, 196, 245, 0.22);
	--theme-colors-approved-bg: rgba(106, 62, 136, 0.18);
	--theme-colors-rejected-bg: rgba(222, 107, 138, 0.22);
	--theme-colors-sidebar-muted: #D9CCEB;
	--theme-colors-sidebar-active: #6A3E88;
	--theme-colors-sidebar-icon-bg: rgba(139, 91, 168, 0.24);
	--theme-colors-ping-output-text: #F0E8FF;
}

/* ── Palette: Lime ────────────────────────────────────────────────── */
[data-palette="lime"] {
	--theme-colors-canvas-accent: #99C90A;
	--theme-colors-canvas-accent-secondary: #C4E54A;
	--theme-colors-border: #7DA30F;
	--theme-colors-accent: #7DA30F;
	--theme-colors-accent-alt: #99C90A;
	--theme-colors-danger: #E27A61;
	--theme-colors-warning: #C4E54A;
	--theme-colors-success: #5A7B0A;
	--theme-colors-notice-border: #99C90A;
	--theme-colors-pending-bg: rgba(196, 229, 74, 0.20);
	--theme-colors-approved-bg: rgba(90, 123, 10, 0.18);
	--theme-colors-rejected-bg: rgba(226, 122, 97, 0.22);
	--theme-colors-sidebar-muted: #D9F0A3;
	--theme-colors-sidebar-active: #5A7B0A;
	--theme-colors-sidebar-icon-bg: rgba(153, 201, 10, 0.22);
	--theme-colors-ping-output-text: #F0FFCC;
}

/* ── Palette: Pink ────────────────────────────────────────────────── */
[data-palette="pink"] {
	--theme-colors-canvas-accent: #E91E63;
	--theme-colors-canvas-accent-secondary: #F589C3;
	--theme-colors-border: #D91E54;
	--theme-colors-accent: #E91E63;
	--theme-colors-accent-alt: #F06FA3;
	--theme-colors-danger: #E91E63;
	--theme-colors-warning: #F589C3;
	--theme-colors-success: #B1154A;
	--theme-colors-notice-border: #E91E63;
	--theme-colors-pending-bg: rgba(245, 137, 195, 0.22);
	--theme-colors-approved-bg: rgba(177, 21, 74, 0.18);
	--theme-colors-rejected-bg: rgba(233, 30, 99, 0.22);
	--theme-colors-sidebar-muted: #F8B8D8;
	--theme-colors-sidebar-active: #B1154A;
	--theme-colors-sidebar-icon-bg: rgba(233, 30, 99, 0.24);
	--theme-colors-ping-output-text: #FFE8F5;
}

/* ── Palette: Cyan ────────────────────────────────────────────────── */
[data-palette="cyan"] {
	--theme-colors-canvas-accent: #00BCD4;
	--theme-colors-canvas-accent-secondary: #4FE8F0;
	--theme-colors-border: #0097A7;
	--theme-colors-accent: #0097A7;
	--theme-colors-accent-alt: #1FD4ED;
	--theme-colors-danger: #E5725A;
	--theme-colors-warning: #4FE8F0;
	--theme-colors-success: #00838F;
	--theme-colors-notice-border: #00BCD4;
	--theme-colors-pending-bg: rgba(79, 232, 240, 0.20);
	--theme-colors-approved-bg: rgba(0, 131, 143, 0.18);
	--theme-colors-rejected-bg: rgba(229, 114, 90, 0.22);
	--theme-colors-sidebar-muted: #A9E9F5;
	--theme-colors-sidebar-active: #00838F;
	--theme-colors-sidebar-icon-bg: rgba(0, 188, 212, 0.24);
	--theme-colors-ping-output-text: #D4F9FF;
}

/* ── Palette: Copper ──────────────────────────────────────────────── */
[data-palette="copper"] {
	--theme-colors-canvas-accent: #B87333;
	--theme-colors-canvas-accent-secondary: #D9A276;
	--theme-colors-border: #9B5E24;
	--theme-colors-accent: #9B5E24;
	--theme-colors-accent-alt: #C17942;
	--theme-colors-danger: #E07A61;
	--theme-colors-warning: #D9A276;
	--theme-colors-success: #704A1B;
	--theme-colors-notice-border: #B87333;
	--theme-colors-pending-bg: rgba(217, 162, 118, 0.20);
	--theme-colors-approved-bg: rgba(112, 74, 27, 0.18);
	--theme-colors-rejected-bg: rgba(224, 122, 97, 0.22);
	--theme-colors-sidebar-muted: #DFC4A8;
	--theme-colors-sidebar-active: #704A1B;
	--theme-colors-sidebar-icon-bg: rgba(184, 115, 51, 0.22);
	--theme-colors-ping-output-text: #F5E8D8;
}

/* ── Palette: Charcoal ────────────────────────────────────────────── */
[data-palette="charcoal"] {
	--theme-colors-canvas-accent: #4A5568;
	--theme-colors-canvas-accent-secondary: #8B96A8;
	--theme-colors-border: #2D3748;
	--theme-colors-divider: #D7DCE5;
	--theme-colors-accent: #4A5568;
	--theme-colors-accent-alt: #718096;
	--theme-colors-danger: #D97A6A;
	--theme-colors-warning: #8B96A8;
	--theme-colors-success: #2D3748;
	--theme-colors-notice-border: #4A5568;
	--theme-colors-pending-bg: rgba(139, 150, 168, 0.20);
	--theme-colors-approved-bg: rgba(45, 55, 72, 0.18);
	--theme-colors-rejected-bg: rgba(217, 122, 106, 0.22);
	--theme-colors-sidebar-muted: #BFCAD8;
	--theme-colors-sidebar-active: #2D3748;
	--theme-colors-sidebar-icon-bg: rgba(74, 85, 104, 0.22);
	--theme-colors-ping-output-text: #E8EBF0;
}

/* ── Palette: Coral ───────────────────────────────────────────────── */
[data-palette="coral"] {
	--theme-colors-canvas-accent: #FF6B6B;
	--theme-colors-canvas-accent-secondary: #FFB8B8;
	--theme-colors-border: #E94B3D;
	--theme-colors-accent: #E94B3D;
	--theme-colors-accent-alt: #FF8888;
	--theme-colors-danger: #E94B3D;
	--theme-colors-warning: #FFB8B8;
	--theme-colors-success: #C63029;
	--theme-colors-notice-border: #FF6B6B;
	--theme-colors-pending-bg: rgba(255, 184, 184, 0.22);
	--theme-colors-approved-bg: rgba(198, 48, 41, 0.18);
	--theme-colors-rejected-bg: rgba(233, 75, 61, 0.22);
	--theme-colors-sidebar-muted: #FFD4D4;
	--theme-colors-sidebar-active: #C63029;
	--theme-colors-sidebar-icon-bg: rgba(255, 107, 107, 0.24);
	--theme-colors-ping-output-text: #FFE8E8;
}

/* ── Palette: Peach ───────────────────────────────────────────────── */
[data-palette="peach"] {
	--theme-colors-canvas-accent: #FFAB91;
	--theme-colors-canvas-accent-secondary: #FFCCB2;
	--theme-colors-border: #E8845A;
	--theme-colors-accent: #E8845A;
	--theme-colors-accent-alt: #FFB399;
	--theme-colors-danger: #E8845A;
	--theme-colors-warning: #FFCCB2;
	--theme-colors-success: #D1654D;
	--theme-colors-notice-border: #FFAB91;
	--theme-colors-pending-bg: rgba(255, 204, 178, 0.20);
	--theme-colors-approved-bg: rgba(209, 101, 77, 0.18);
	--theme-colors-rejected-bg: rgba(232, 132, 90, 0.22);
	--theme-colors-sidebar-muted: #FFD9C8;
	--theme-colors-sidebar-active: #D1654D;
	--theme-colors-sidebar-icon-bg: rgba(232, 132, 90, 0.24);
	--theme-colors-ping-output-text: #FFEDE8;
}

/* ── Palette: Mint ────────────────────────────────────────────────── */
[data-palette="mint"] {
	--theme-colors-canvas-accent: #4ECDC4;
	--theme-colors-canvas-accent-secondary: #7FEAE0;
	--theme-colors-border: #2DB8AA;
	--theme-colors-accent: #2DB8AA;
	--theme-colors-accent-alt: #5FD9D0;
	--theme-colors-danger: #E08A7A;
	--theme-colors-warning: #7FEAE0;
	--theme-colors-success: #1F9586;
	--theme-colors-notice-border: #4ECDC4;
	--theme-colors-pending-bg: rgba(127, 234, 224, 0.20);
	--theme-colors-approved-bg: rgba(31, 149, 134, 0.18);
	--theme-colors-rejected-bg: rgba(224, 138, 122, 0.22);
	--theme-colors-sidebar-muted: #A8E1DB;
	--theme-colors-sidebar-active: #1F9586;
	--theme-colors-sidebar-icon-bg: rgba(45, 184, 170, 0.24);
	--theme-colors-ping-output-text: #D4F9F5;
}

/* ── Palette: Gold ────────────────────────────────────────────────── */
[data-palette="gold"] {
	--theme-colors-canvas-accent: #FFC107;
	--theme-colors-canvas-accent-secondary: #FFD54F;
	--theme-colors-border: #E8A700;
	--theme-colors-accent: #E8A700;
	--theme-colors-accent-alt: #FFD740;
	--theme-colors-danger: #E17055;
	--theme-colors-warning: #FFD54F;
	--theme-colors-success: #D49700;
	--theme-colors-notice-border: #FFC107;
	--theme-colors-pending-bg: rgba(255, 213, 79, 0.22);
	--theme-colors-approved-bg: rgba(212, 151, 0, 0.18);
	--theme-colors-rejected-bg: rgba(225, 112, 85, 0.22);
	--theme-colors-sidebar-muted: #FFE082;
	--theme-colors-sidebar-active: #D49700;
	--theme-colors-sidebar-icon-bg: rgba(232, 167, 0, 0.24);
	--theme-colors-ping-output-text: #FFFADB;
}

/* ── Palette: Navy ────────────────────────────────────────────────── */
[data-palette="navy"] {
	--theme-colors-canvas-accent: #1E3A8A;
	--theme-colors-canvas-accent-secondary: #3B82F6;
	--theme-colors-border: #1E3A8A;
	--theme-colors-accent: #1E3A8A;
	--theme-colors-accent-alt: #2563EB;
	--theme-colors-danger: #DC2626;
	--theme-colors-warning: #3B82F6;
	--theme-colors-success: #075985;
	--theme-colors-notice-border: #1E3A8A;
	--theme-colors-pending-bg: rgba(59, 130, 246, 0.20);
	--theme-colors-approved-bg: rgba(7, 89, 133, 0.18);
	--theme-colors-rejected-bg: rgba(220, 38, 38, 0.22);
	--theme-colors-sidebar-muted: #93C5FD;
	--theme-colors-sidebar-active: #075985;
	--theme-colors-sidebar-icon-bg: rgba(30, 58, 138, 0.24);
	--theme-colors-ping-output-text: #DBEAFE;
}

/* ── Palette: Maroon ──────────────────────────────────────────────── */
[data-palette="maroon"] {
	--theme-colors-canvas-accent: #A71D30;
	--theme-colors-canvas-accent-secondary: #D1414A;
	--theme-colors-border: #8B1A24;
	--theme-colors-accent: #8B1A24;
	--theme-colors-accent-alt: #B83239;
	--theme-colors-danger: #8B1A24;
	--theme-colors-warning: #D1414A;
	--theme-colors-success: #6B1420;
	--theme-colors-notice-border: #A71D30;
	--theme-colors-pending-bg: rgba(209, 65, 74, 0.22);
	--theme-colors-approved-bg: rgba(107, 20, 32, 0.18);
	--theme-colors-rejected-bg: rgba(139, 26, 36, 0.22);
	--theme-colors-sidebar-muted: #E8A5AC;
	--theme-colors-sidebar-active: #6B1420;
	--theme-colors-sidebar-icon-bg: rgba(167, 29, 48, 0.24);
	--theme-colors-ping-output-text: #F9D8DD;
}

/* ── Palette: Sage ────────────────────────────────────────────────── */
[data-palette="sage"] {
	--theme-colors-canvas-accent: #6B8E4E;
	--theme-colors-canvas-accent-secondary: #A3B895;
	--theme-colors-border: #556B42;
	--theme-colors-accent: #556B42;
	--theme-colors-accent-alt: #7A9661;
	--theme-colors-danger: #D4765A;
	--theme-colors-warning: #A3B895;
	--theme-colors-success: #3F4E29;
	--theme-colors-notice-border: #6B8E4E;
	--theme-colors-pending-bg: rgba(163, 184, 149, 0.20);
	--theme-colors-approved-bg: rgba(63, 78, 41, 0.18);
	--theme-colors-rejected-bg: rgba(212, 118, 90, 0.22);
	--theme-colors-sidebar-muted: #C9D9B3;
	--theme-colors-sidebar-active: #3F4E29;
	--theme-colors-sidebar-icon-bg: rgba(107, 142, 78, 0.24);
	--theme-colors-ping-output-text: #E8F0DD;
}

/* ── Palette: Wine ────────────────────────────────────────────────── */
[data-palette="wine"] {
	--theme-colors-canvas-accent: #722C48;
	--theme-colors-canvas-accent-secondary: #B8568E;
	--theme-colors-border: #5A1F38;
	--theme-colors-accent: #5A1F38;
	--theme-colors-accent-alt: #8B3A62;
	--theme-colors-danger: #D4635A;
	--theme-colors-warning: #B8568E;
	--theme-colors-success: #42182A;
	--theme-colors-notice-border: #722C48;
	--theme-colors-pending-bg: rgba(184, 86, 142, 0.20);
	--theme-colors-approved-bg: rgba(66, 24, 42, 0.18);
	--theme-colors-rejected-bg: rgba(212, 99, 90, 0.22);
	--theme-colors-sidebar-muted: #D9A8C8;
	--theme-colors-sidebar-active: #42182A;
	--theme-colors-sidebar-icon-bg: rgba(114, 44, 72, 0.24);
	--theme-colors-ping-output-text: #F0D9E8;
}

/* ── Palette: Olive ───────────────────────────────────────────────── */
[data-palette="olive"] {
	--theme-colors-canvas-accent: #808000;
	--theme-colors-canvas-accent-secondary: #C4C400;
	--theme-colors-border: #6B6B00;
	--theme-colors-accent: #6B6B00;
	--theme-colors-accent-alt: #9A9A00;
	--theme-colors-danger: #D97A5A;
	--theme-colors-warning: #C4C400;
	--theme-colors-success: #4F4F00;
	--theme-colors-notice-border: #808000;
	--theme-colors-pending-bg: rgba(196, 196, 0, 0.20);
	--theme-colors-approved-bg: rgba(79, 79, 0, 0.18);
	--theme-colors-rejected-bg: rgba(217, 122, 90, 0.22);
	--theme-colors-sidebar-muted: #D9D9A3;
	--theme-colors-sidebar-active: #4F4F00;
	--theme-colors-sidebar-icon-bg: rgba(128, 128, 0, 0.22);
	--theme-colors-ping-output-text: #F0F0CC;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
	transition: background-color 0.4s ease, color 0.4s ease;
}

body {
	font-family: var(--font-body);
	color: var(--theme-colors-text-primary);
	background: var(--theme-colors-canvas);
}

html[data-theme-mode="system"] body {
	background: var(--theme-colors-canvas);
}

html[data-theme-mode="lightFlat"] body {
	background: var(--theme-colors-canvas);
}

h1,
h2,
h3 {
	font-family: var(--font-heading);
}

button,
input,
select {
	font-family: inherit;
	font-size: var(--ui-fs);
}

.appShell {
	display: grid;
	grid-template-columns: var(--layout-sidebar-expanded) 1fr;
	min-height: 100vh;
	transition: grid-template-columns 0.24s ease;
}

.hasSidebar.sidebarCollapsed .appShell {
	grid-template-columns: var(--layout-sidebar-collapsed) 1fr;
}

.appSidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	max-height: 100vh;
	background: linear-gradient(180deg, var(--theme-colors-sidebar-bg-alt), var(--theme-colors-sidebar-bg));
	color: var(--theme-colors-sidebar-text);
	padding: var(--theme-spacing-md);
	border-right: 1px solid var(--theme-colors-sidebar-border);
	display: flex;
	flex-direction: column;
	gap: var(--theme-spacing-lg);
	overflow: hidden;
	transition: width 0.24s ease;
}

.sidebarScrollable {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: visible;
	padding-right: 4px;
}

html[data-theme-mode="system"] .appSidebar {
	background: var(--theme-colors-sidebar-bg);
}

html[data-theme-mode="darkFlat"] body,
html[data-theme-mode="darkFlat"] .loginBody,
html[data-theme-mode="darkFlat"] .appSidebar,
html[data-theme-mode="darkFlat"] .sidebarSettingsPanel {
	background-image: none;
}

html[data-theme-mode="lightFlat"] body,
html[data-theme-mode="lightFlat"] .loginBody,
html[data-theme-mode="lightFlat"] .appSidebar,
html[data-theme-mode="lightFlat"] .sidebarSettingsPanel {
	background-image: none;
}

html[data-theme-mode="darkFlat"] body,
html[data-theme-mode="darkFlat"] .loginBody,
html[data-theme-mode="darkFlat"] .appSidebar {
	background: var(--theme-colors-canvas);
}

html[data-theme-mode="darkFlat"] .appSidebar {
	background: var(--theme-colors-sidebar-bg);
}

html[data-theme-mode="lightFlat"] .appSidebar {
	background: var(--theme-colors-sidebar-bg);
}

.sidebarHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--theme-spacing-sm);
}

.sidebarBrand {
	margin: 0;
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.sidebarToggleButton {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	border: 1.5px solid var(--theme-colors-sidebar-panel-border);
	background: var(--theme-colors-sidebar-panel-bg);
	color: var(--theme-colors-sidebar-text);
	cursor: pointer;
	padding: 0;
	transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.sidebarToggleButton:hover {
	background: var(--theme-colors-sidebar-active);
	border-color: var(--theme-colors-sidebar-muted);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.07);
	transform: scale(1.08);
	filter: none;
}

.sidebarToggleIcon {
	width: 16px;
	height: 16px;
	transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebarNav {
	display: grid;
	gap: var(--theme-spacing-sm);
}

.sidebarLink {
	display: inline-flex;
	align-items: center;
	gap: var(--theme-spacing-sm);
	text-decoration: none;
	color: var(--theme-colors-sidebar-text);
	padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
	border-radius: var(--theme-radius-small);
	font-weight: 600;
	border: 1px solid transparent;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.sidebarLink:hover,
.sidebarLink.isActive {
	background: var(--theme-colors-sidebar-active);
	border-color: var(--theme-colors-sidebar-panel-border);
	transform: translateX(1px);
}

.sidebarLinkIcon {
	width: 34px;
	height: 34px;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
	background: var(--theme-colors-sidebar-icon-bg);
	border: 1px solid var(--theme-colors-sidebar-icon-border);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.05em;
}

.sidebarLinkText {
	display: grid;
	gap: 2px;
}

.sidebarLinkText strong {
	font-size: 14px;
	line-height: 1.2;
}

.sidebarLinkText small {
	font-size: 11px;
	color: var(--theme-colors-sidebar-muted);
}

.hasSidebar.sidebarCollapsed .sidebarBrand,
.hasSidebar.sidebarCollapsed .sidebarLinkText {
	display: none;
}

.hasSidebar.sidebarCollapsed .appSidebar {
	padding-left: var(--theme-spacing-sm);
	padding-right: var(--theme-spacing-sm);
}

.hasSidebar.sidebarCollapsed .sidebarHeader {
	justify-content: center;
}

.hasSidebar.sidebarCollapsed .sidebarNav {
	justify-items: center;
}

.hasSidebar.sidebarCollapsed .sidebarToggleIcon {
	transform: rotate(180deg);
}

.sidebarFooter {
	margin-top: auto;
	display: grid;
	gap: var(--theme-spacing-sm);
	padding-top: var(--theme-spacing-sm);
	border-top: 1px solid var(--theme-colors-sidebar-border);
	position: relative;
	max-height: calc(100vh - 160px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-right: 4px;
}

.sidebarFooter::-webkit-scrollbar {
	width: 4px;
}

.sidebarFooter::-webkit-scrollbar-track {
	background: transparent;
}

.sidebarFooter::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 2px;
	cursor: pointer;
}

.sidebarSettingsButton {
	width: 100%;
	border-color: var(--theme-colors-sidebar-panel-border);
	background: var(--theme-colors-sidebar-panel-bg);
	color: var(--theme-colors-sidebar-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--theme-spacing-sm);
}

.sidebarSettingsButton:hover {
	background: var(--theme-colors-sidebar-active);
	filter: none;
}

.sidebarSettingsPanel {
	padding: 8px;
	border-radius: var(--theme-radius-medium);
	background: var(--theme-colors-sidebar-panel-bg);
	border: 1px solid var(--theme-colors-sidebar-panel-border);
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transform: translateY(-8px) scale(0.98);
	transform-origin: top;
	pointer-events: none;
	transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.24s ease;
}

.sidebarSettingsPanel.isOpen {
	max-height: min(650px, calc(100vh - 150px));
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	padding-right: 6px;
}

.sidebarSettingsPanel.isOpen::-webkit-scrollbar {
	width: 4px;
}

.sidebarSettingsPanel.isOpen::-webkit-scrollbar-track {
	background: transparent;
}

.sidebarSettingsPanel.isOpen::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 2px;
	cursor: pointer;
}

.appearanceSection {
	margin-bottom: 8px;
}

.sidebarSettingsTitle {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--theme-colors-sidebar-muted);
}

.sidebarPreferenceOptions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3px;
	margin-bottom: 5px;
}

.sidebarPreferenceOption {
	width: 100%;
	justify-content: center;
	border-color: var(--theme-colors-sidebar-panel-border);
	background: var(--theme-colors-sidebar-option-bg);
	color: var(--theme-colors-sidebar-text);
	padding: 5px 4px;
	font-size: 10px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebarPreferenceOption.isSelected {
	background: var(--theme-colors-accent);
	border-color: var(--theme-colors-accent);
	color: var(--theme-colors-accent-contrast);
}

/* ── Theme / Palette Picker ───────────────────────────────────────── */

.themePicker,
.palettePicker {
	margin-bottom: 4px;
}

.themePickerTrigger,
.palettePickerTrigger {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 8px;
	border-radius: var(--theme-radius-small);
	border: 1px solid var(--theme-colors-sidebar-panel-border);
	background: var(--theme-colors-sidebar-option-bg);
	color: var(--theme-colors-sidebar-text);
	cursor: pointer;
	font-size: 11px;
	font-weight: 600;
	font-family: inherit;
	text-align: left;
	transition: background 0.18s ease, border-color 0.18s ease;
}

.themePickerTrigger:hover,
.palettePickerTrigger:hover {
	background: rgba(255, 255, 255, 0.09);
	border-color: rgba(255, 255, 255, 0.26);
}

.themePickerCurrentLabel,
.palettePickerCurrentLabel {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 10px;
}

.palettePickerDot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 1.5px solid rgba(255, 255, 255, 0.30);
	transition: background 0.2s ease;
}

.pickerChevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	opacity: 0.65;
	transition: transform 0.22s ease;
}

.themePickerTrigger[aria-expanded="true"] .pickerChevron,
.palettePickerTrigger[aria-expanded="true"] .pickerChevron {
	transform: rotate(180deg);
}

.themePickerGrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3px;
	padding: 4px 0 2px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

.themePicker.is-open .themePickerGrid {
	max-height: none;
	overflow: visible;
	opacity: 1;
}

.palettePickerGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	padding: 6px 0 2px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease;
}

.palettePicker.is-open .palettePickerGrid {
	max-height: none;
	overflow: visible;
	opacity: 1;
	padding-right: 0;
}

.themePickerCard,
.palettePickerCard {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	padding: 6px 4px;
	min-height: 36px;
	border-radius: 5px;
	border: 1px solid var(--theme-colors-sidebar-panel-border);
	border-top: 2.5px solid;
	background: var(--prev-bg, var(--theme-colors-sidebar-option-bg));
	cursor: pointer;
	font-family: inherit;
	font-size: 9px;
	color: var(--theme-colors-sidebar-text);
	transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.themePickerCard {
	border-top-color: var(--prev-acc, #888);
}

.palettePickerCard {
	border-top-color: transparent;
	gap: 2px;
}

.themePickerCard:hover,
.palettePickerCard:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-1px);
}

.themePickerCard.isSelected,
.palettePickerCard.isSelected {
	border: 1px solid var(--theme-colors-accent);
	border-top: 3px solid var(--theme-colors-accent);
	background: color-mix(in srgb, var(--theme-colors-accent) 12%, transparent);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(255, 255, 255, 0.1);
	transform: translateY(-1px);
}

.themePickerCard > span {
	font-size: 10px;
	font-weight: 600;
	color: inherit;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
}

.themePickerCardPreview {
	width: 32px;
	height: 32px;
	border-radius: 5px;
	background: linear-gradient(135deg, var(--prev-bg, #f5f5f5), var(--prev-srf, #f0f0f0));
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.04);
	margin-bottom: 5px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.themePickerCardPreview::before {
	content: '';
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--prev-acc, #888);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.1);
	position: absolute;
	bottom: -6px;
	right: -6px;
	transition: transform 0.2s ease;
}

.themePickerCard:hover .themePickerCardPreview::before {
	transform: translate(-2px, -2px) scale(1.05);
}

.palettePickerSwatches {
	display: flex;
	align-items: center;
	padding: 2px 0 0;
}

.palettePickerSwatches span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	margin-left: -2px;
	flex-shrink: 0;
}

.palettePickerSwatches span:first-child {
	margin-left: 0;
}

.sidebarUserCard {
	padding: var(--ui-panel-pad);
	border-radius: var(--theme-radius-small);
	background: var(--theme-colors-sidebar-panel-bg);
	border: 1px solid var(--theme-colors-sidebar-panel-border);
	display: flex;
	align-items: center;
	gap: var(--theme-spacing-sm);
}

.sidebarUserContent {
	display: grid;
	gap: var(--theme-spacing-xs);
	min-width: 0;
}

.sidebarUserLabel {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--theme-colors-sidebar-muted);
}

.sidebarUserName {
	font-size: 14px;
	line-height: 1.25;
	word-break: break-word;
}

.sidebarUserMeta {
	font-size: 11px;
	color: var(--theme-colors-sidebar-muted);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sidebarLogoutButton {
	width: 100%;
	border-color: var(--theme-colors-sidebar-panel-border);
	background: var(--theme-colors-sidebar-panel-bg);
	color: var(--theme-colors-sidebar-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.sidebarLogoutButton:hover {
	background: var(--theme-colors-sidebar-active);
	filter: none;
}

.sidebarActionIcon {
	width: 20px;
	height: 20px;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
}

.sidebarActionIcon svg {
	width: 20px;
	height: 20px;
}

.sidebarUserIcon {
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--theme-colors-sidebar-icon-bg);
	border: 1px solid var(--theme-colors-sidebar-icon-border);
}

.sidebarActionLabel {
	white-space: nowrap;
}

.hasSidebar.sidebarCollapsed .sidebarFooter {
	justify-items: center;
	padding-right: 0;
}

.hasSidebar.sidebarCollapsed .sidebarScrollable {
	padding-right: 0;
}

.hasSidebar.sidebarCollapsed .sidebarUserCard,
.hasSidebar.sidebarCollapsed .sidebarSettingsButton,
.hasSidebar.sidebarCollapsed .sidebarLogoutButton {
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-grid;
	place-items: center;
	border-radius: 999px;
}

.hasSidebar.sidebarCollapsed .sidebarUserCard {
	grid-template-columns: 1fr;
}

.hasSidebar.sidebarCollapsed .sidebarUserContent {
	display: none;
}

.hasSidebar.sidebarCollapsed .sidebarUserIcon {
	margin: 0;
	width: 24px;
	height: 24px;
}

.hasSidebar.sidebarCollapsed .sidebarUserLabel,
.hasSidebar.sidebarCollapsed .sidebarUserName,
.hasSidebar.sidebarCollapsed .sidebarUserMeta,
.hasSidebar.sidebarCollapsed .sidebarActionLabel {
	display: none;
}



.appMain {
	padding: var(--theme-spacing-lg);
}

.dashboardPage {
	max-width: 1200px;
	margin: 0 auto;
}

.dashboardHero {
	display: grid;
	grid-template-columns: minmax(280px, 1.2fr) minmax(320px, 1fr);
	gap: var(--theme-spacing-md);
	margin-bottom: var(--theme-spacing-md);
}

.dashboardHeroCard {
	background:
		linear-gradient(145deg, var(--theme-colors-surface), var(--theme-colors-surface-strong)),
		radial-gradient(circle at top right, var(--theme-colors-canvas-accent), transparent 42%);
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-large);
	padding: calc(var(--ui-card-pad) + 4px);
	box-shadow: var(--theme-shadow-card);
	min-height: 100%;
}

.dashboardHeroCard h2 {
	margin: 0 0 10px;
	font-size: 28px;
}

.dashboardHeroMeta,
.dashboardModuleMeta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	font-size: calc(var(--ui-fs) * 0.93);
}

.dashboardHeroBadge,
.dashboardInlineMeta {
	display: inline-flex;
	align-items: center;
	padding: 6px 10px;
	border-radius: 999px;
	border: 1px solid var(--theme-colors-border);
	background: var(--theme-colors-surface-strong);
	font-size: calc(var(--ui-fs) * 0.86);
	color: var(--theme-colors-text-secondary);
}

.dashboardSummaryGrid {
	margin-bottom: 0;
}

.dashboardMetricCard small {
	display: block;
	margin-top: 8px;
	color: var(--theme-colors-text-secondary);
	font-size: calc(var(--ui-fs) * 0.86);
}

.dashboardGrid {
	display: grid;
	gap: var(--theme-spacing-md);
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.dashboardOpsGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 18px;
	align-items: start;
	margin-bottom: 24px;
}

.dashboardChartSection {
	margin-top: var(--theme-spacing-md);
}

.dashboardCard {
	background: var(--theme-colors-surface);
	border: 1.5px solid var(--theme-colors-border);
	border-radius: 18px;
	padding: 28px 24px 22px 24px;
	box-shadow: 0 4px 24px 0 rgba(60,61,89,0.10);
	margin-bottom: 18px;
	transition: box-shadow 0.18s, border 0.18s;
	height: 100%;
}
@media (max-width: 900px) {
	.dashboardOpsGrid {
		grid-template-columns: 1fr;
	}
}

.dashboardCard:not(:last-child) {
	margin-bottom: 24px;
}

.dashboardCard:hover {
	box-shadow: 0 8px 32px 0 rgba(60,61,89,0.16);
	border-color: var(--theme-colors-accent);
}

.dashboardCardTag {
	margin: 0 0 8px;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--theme-colors-accent);
}

.dashboardCard h2 {
	margin: 0 0 8px;
	font-size: calc(var(--ui-fs) * 1.43);
}

.dashboardCard p {
	margin: 0;
	color: var(--theme-colors-text-secondary);
	line-height: 1.5;
	font-size: calc(var(--ui-fs) * 0.93);
}

.dashboardLinkCard {
	text-decoration: none;
	color: inherit;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dashboardLinkCard span {
	display: inline-block;
	margin-top: 12px;
	font-weight: 700;
	color: var(--theme-colors-accent);
	font-size: calc(var(--ui-fs) * 0.93);
}

.dashboardHeaderLink {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.dashboardActionPanel,
.dashboardChartPanel,
.dashboardActivityPanel,
.dashboardModuleCard {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.dashboardChartPanelWide {
	padding: calc(var(--ui-card-pad) + 2px);
	position: relative;
	z-index: 3;
	overflow: visible;
}

.dashboardChartHeader {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--theme-spacing-md);
	flex-wrap: wrap;
}

.dashboardChartControls {
	justify-content: flex-end;
	gap: 8px;
}

.dashboardChartControls input {
	min-width: 148px;
}

.dashboardTrendScroll {
	margin-top: 6px;
	overflow-x: auto;
}

.dashboardTrendChart {
       min-height: 240px;
       display: grid;
       align-items: end;
       gap: 16px;
       padding: 32px 18px 18px 18px;
       border-radius: 16px;
       border: 1.5px solid var(--theme-colors-border);
       overflow-x: auto;
       position: relative;
       z-index: 2;
       background:
	       linear-gradient(180deg, transparent, transparent 79%, var(--theme-colors-divider) 79%, transparent 80%),
	       linear-gradient(180deg, transparent, transparent 54%, var(--theme-colors-divider) 54%, transparent 55%),
	       linear-gradient(180deg, transparent, transparent 29%, var(--theme-colors-divider) 29%, transparent 30%),
	       var(--theme-colors-surface-strong);
       box-shadow: 0 2px 12px 0 rgba(60,61,89,0.07);
}

.dashboardTrendChartWide {
	min-height: 360px;
	padding: 28px 16px 16px;
}

.dashboardTrendEmpty {
	grid-column: 1 / -1;
	align-self: center;
	justify-self: center;
	color: var(--theme-colors-text-secondary);
	font-size: 13px;
}

.dashboardTrendMeta {
	margin-top: -2px;
	font-size: 12px;
	color: var(--theme-colors-text-secondary);
}

.dashboardTrendDay {
	display: grid;
	gap: 2px;
	justify-items: center;
	align-self: stretch;
	grid-template-rows: 1fr auto auto;
	position: relative;
	outline: none;
	text-decoration: none;
	color: inherit;
	z-index: 1;
}

.dashboardTrendDayLink {
	cursor: pointer;
}

.dashboardTrendDayMuted {
	opacity: 0.7;
}

.dashboardTrendDay:hover,
.dashboardTrendDay:focus-visible {
	z-index: 12;
}

.dashboardTrendDay:focus-visible .dashboardTrendBars,
.dashboardTrendDay:hover .dashboardTrendBars {
	transform: translateY(-2px);
}

.dashboardTrendBars {
	width: 100%;
	height: 120px;
	display: grid;
	align-items: end;
	justify-items: center;
	position: relative;
	transition: transform 0.18s ease;
}

.dashboardTrendBar {
	width: 70%;
	border-radius: 6px 6px 2px 2px;
	min-height: 4px;
	transition: height 0.24s cubic-bezier(.4,1,.4,1), opacity 0.18s cubic-bezier(.4,1,.4,1);
	box-shadow: 0 1px 2px 0 rgba(60,61,89,0.06);
}

.dashboardTrendBarTotal {
	grid-area: 1 / 1;
	width: 70%;
	background: linear-gradient(180deg, color-mix(in srgb, var(--theme-colors-accent) 80%, white), var(--theme-colors-accent));
	box-shadow: 0 1px 4px 0 rgba(60,61,89,0.08);
	opacity: 0.22;
}

.dashboardTrendStatusBars {
	grid-area: 1 / 1;
	width: 60%;
	height: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 7px;
	align-items: end;
}

.dashboardTrendBarPending {
	background: linear-gradient(180deg, color-mix(in srgb, var(--theme-colors-warning) 78%, white), var(--theme-colors-warning));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.dashboardTrendBarApproved {
	background: linear-gradient(180deg, color-mix(in srgb, var(--theme-colors-success) 78%, white), var(--theme-colors-success));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.dashboardTrendBarRejected {
	background: linear-gradient(180deg, color-mix(in srgb, var(--theme-colors-danger) 78%, white), var(--theme-colors-danger));
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

.dashboardTrendBarPlaceholder {
	height: 6px;
	opacity: 0.12;
}

.dashboardChartFloatingTooltip {
	position: fixed;
	z-index: 9999;
	min-width: 176px;
	max-width: 240px;
	padding: 10px 12px;
	border-radius: var(--theme-radius-medium);
	border: 1px solid var(--theme-colors-border);
	background: color-mix(in srgb, var(--theme-colors-surface) 94%, black 6%);
	box-shadow: var(--theme-shadow-soft);
	display: grid;
	grid-template-columns: auto auto;
	gap: 4px 10px;
	font-size: 12px;
	color: var(--theme-colors-text-secondary);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.dashboardChartFloatingTooltip.is-visible {
	opacity: 1;
	visibility: visible;
}

.dashboardChartFloatingTooltip strong {
	color: var(--theme-colors-text-primary);
	text-align: right;
}

.dashboardTrendValue {
	font-size: 12px;
	font-weight: 700;
	color: var(--theme-colors-text-primary);
}

.dashboardTrendLabel {
	font-size: 12px;
	color: var(--theme-colors-text-secondary);
}

.dashboardTrendLegend {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--theme-colors-text-secondary);
}

.dashboardTrendLegend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dashboardLegendDot {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	display: inline-block;
}

.dashboardLegendDotTotal {
	background: var(--theme-colors-accent);
}

.dashboardLegendDotPending {
	background: var(--theme-colors-warning);
}

.dashboardLegendDotApproved {
	background: var(--theme-colors-success);
}

.dashboardLegendDotRejected {
	background: var(--theme-colors-danger);
}

.dashboardActionList {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 6px;
}

.dashboardActionButton {
	text-decoration: none;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 18px 24px;
	border-radius: var(--theme-radius-medium);
	background: linear-gradient(145deg, var(--theme-colors-surface-strong), var(--theme-colors-surface));
	border: 1px solid var(--theme-colors-border);
	color: var(--theme-colors-text-primary);
	font-weight: 700;
	font-size: 1rem;
	min-width: 140px;
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.dashboardActionButton:hover {
	transform: translateY(-1px);
	border-color: var(--theme-colors-accent);
	box-shadow: var(--theme-shadow-soft);
}

.dashboardActivityList {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.dashboardActivityItem {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-radius: var(--theme-radius-medium);
	border: 1px solid var(--theme-colors-border);
	background: var(--theme-colors-surface-strong);
}

.dashboardActivityItem strong,
.dashboardActivityItem p,
.dashboardActivityItem small {
	margin: 0;
}

.dashboardActivityItem p {
	color: var(--theme-colors-text-secondary);
	margin-top: 4px;
}

.dashboardActivityMeta {
	display: grid;
	justify-items: end;
	gap: 6px;
}

.dashboardLinkCard:hover {
	transform: translateY(-2px);
	box-shadow: var(--theme-shadow-soft);
}

.pageNotice {
	margin-bottom: var(--theme-spacing-md);
	padding: var(--ui-control-pad-y) calc(var(--ui-control-pad-x) + 3px);
	border-radius: var(--theme-radius-medium);
	border: 1px solid var(--theme-colors-notice-border);
	background: var(--theme-colors-notice-bg);
	color: var(--theme-colors-notice-text);
	font-size: 14px;
}

.adminPanel {
	max-width: 1200px;
	margin: 0 auto;
}

.panelHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--theme-spacing-md);
	margin-bottom: var(--theme-spacing-md);
	background: var(--theme-colors-surface);
	border: 1px solid var(--theme-colors-border);
	padding: var(--theme-spacing-md);
	border-radius: var(--theme-radius-large);
	box-shadow: var(--theme-shadow-card);
}

.panelHeader h1 {
	margin: 0;
}

.panelHeader p {
	margin: 6px 0 0;
	color: var(--theme-colors-text-secondary);
}

.panelHeaderActions {
	display: flex;
	gap: var(--theme-spacing-sm);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.summaryGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--theme-spacing-sm);
	margin-bottom: var(--theme-spacing-md);
}

.summaryCard {
	background: var(--theme-colors-surface);
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-medium);
	padding: var(--theme-spacing-md);
	box-shadow: var(--theme-shadow-card);
}

.summaryCard p {
	margin: 0;
	font-size: 13px;
	color: var(--theme-colors-text-secondary);
}

.summaryCard strong {
	margin-top: 6px;
	display: block;
	font-size: 24px;
}

.tableSection,
.detailSection {
	background: var(--theme-colors-surface);
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-medium);
	padding: var(--theme-spacing-md);
	box-shadow: var(--theme-shadow-card);
}

.tableSection {
	margin-bottom: var(--theme-spacing-md);
}

.tableHeaderRow {
	display: flex;
	flex-direction: column;
	gap: var(--theme-spacing-sm);
	margin-bottom: var(--theme-spacing-sm);
}

.tableHeaderTop {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--theme-spacing-sm);
}

.tableHeaderTop h2 {
	margin: 0;
	font-size: 18px;
}

.tableHeaderBottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--theme-spacing-sm);
	padding-top: var(--theme-spacing-xs);
	border-top: 1px solid var(--theme-colors-border);
}

/* ─── Filter Panel ─── */
.filterToggleButton {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	font-weight: 600;
	padding: 7px 14px;
}

.filterToggleButton::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	transition: transform 0.2s ease;
}

.filterToggleButton[aria-expanded="true"]::after {
	transform: rotate(-135deg) translateY(-2px);
}

.filterToggleButton.is-active {
	background: color-mix(in srgb, var(--theme-colors-accent) 12%, var(--theme-colors-surface));
	color: var(--theme-colors-accent);
	border-color: color-mix(in srgb, var(--theme-colors-accent) 30%, transparent);
}

.filterPanel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.filterPanel.is-open {
	max-height: 320px;
}

.filterPanelInner {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 14px 16px;
	margin-top: 2px;
	border-radius: var(--theme-radius-medium);
	border: 1px solid var(--theme-colors-border);
	background: var(--theme-colors-surface-strong);
	box-shadow: var(--theme-shadow-card);
}

.filterRow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 10px 0;
}

.filterRow + .filterRow {
	border-top: 1px solid var(--theme-colors-border);
}

.filterRowLabel {
	min-width: 68px;
	max-width: 80px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--theme-colors-text-secondary);
}

.filterRow label {
	font-size: 13px;
	color: var(--theme-colors-text-secondary);
	white-space: nowrap;
}

.filterRow input[type="date"] {
	min-width: 148px;
}

.filterRowActions {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

.filterRowActions button {
	font-size: 13px;
	padding: 6px 14px;
}

.tableHeaderRow h2,
.detailSection h2 {
	margin: 0 0 var(--theme-spacing-sm);
	font-size: 18px;
}

.paginationControls,
.searchControls {
	display: flex;
	gap: var(--theme-spacing-xs);
	align-items: center;
	flex-wrap: wrap;
}

.searchControls label,
.paginationControls label {
	font-size: 13px;
	color: var(--theme-colors-text-secondary);
}

.searchControls input,
.searchControls textarea,
.searchControls select,
.filterRow input,
.filterRow select {
	transition: box-shadow 0.25s cubic-bezier(.4,1,.7,1), border-color 0.22s cubic-bezier(.4,1,.7,1), background 0.22s cubic-bezier(.4,1,.7,1), color 0.22s cubic-bezier(.4,1,.7,1), outline 0.18s cubic-bezier(.4,1,.7,1);
}

.filterRow select:focus, .filterRow select:active, .filterRow select:hover {
	transition: background 0.22s cubic-bezier(.4,1,.7,1), color 0.22s cubic-bezier(.4,1,.7,1), border-color 0.22s cubic-bezier(.4,1,.7,1);
	/* Hover/active efektleri kaldırıldı, sadece transition bırakıldı */
}

.paginationControls select,
.loginForm input {
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-small);
	padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
	background: var(--theme-colors-input-bg);
	color: var(--theme-colors-input-text);
}

.searchControls input {
	min-width: 150px;
}

.searchControls textarea {
	min-width: 240px;
	width: 100%;
	flex: 1;
	resize: vertical;
}

.charCounter {
	width: 100%;
	text-align: right;
	font-size: 12px;
	color: var(--theme-colors-text-secondary);
}

.tableMessage {
	min-height: 20px;
	color: var(--theme-colors-text-secondary);
	font-size: 13px;
	margin-bottom: 8px;
}

.activeViewSummary {
	min-height: 22px;
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--theme-colors-text-secondary);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.activeViewSummaryBadge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--theme-colors-surface-strong);
	border: 1px solid var(--theme-colors-border);
}

.tableWrapper {
	overflow-x: auto;
}

table {
	width: 100%;
	border-collapse: collapse;
	min-width: 760px;
}

th,
td {
	padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
	border-bottom: 1px solid var(--theme-colors-divider);
	text-align: left;
	font-size: var(--ui-fs);
}

th {
	font-size: calc(var(--ui-fs) - 1px);
	color: var(--theme-colors-text-secondary);
}

html[data-font-size="small"] {
	--ui-font-scale: 0.9;
	--ui-fs: 12px;
}

html[data-font-size="normal"] {
	--ui-font-scale: 1;
	--ui-fs: 14px;
}

html[data-font-size="large"] {
	--ui-font-scale: 1.18;
	--ui-fs: 17px;
}

html[data-density="compact"] {
	--theme-spacing-xs: 4px;
	--theme-spacing-sm: 8px;
	--theme-spacing-md: 12px;
	--theme-spacing-lg: 18px;
	--ui-control-pad-y: 6px;
	--ui-control-pad-x: 9px;
	--ui-panel-pad: 9px;
	--ui-card-pad: 14px;
}

html[data-density="comfortable"] {
	--theme-spacing-xs: 8px;
	--theme-spacing-sm: 12px;
	--theme-spacing-md: 18px;
	--theme-spacing-lg: 28px;
	--ui-control-pad-y: 11px;
	--ui-control-pad-x: 14px;
	--ui-panel-pad: 16px;
	--ui-card-pad: 22px;
}

/* Global typography scale for all app pages */
body {
	font-size: calc(14px * var(--ui-font-scale));
}

h1 {
	font-size: calc(2.1rem * var(--ui-font-scale));
}

h2 {
	font-size: calc(1.45rem * var(--ui-font-scale));
}

h3 {
	font-size: calc(1.2rem * var(--ui-font-scale));
}

p,
span,
label,
small,
strong,
button,
input,
select,
textarea,
th,
td,
.tableMessage,
.requestDetail,
.pageNotice,
.pingChip,
.pingOutput,
.loginMessage,
.sidebarSettingsTitle,
.sidebarUserLabel,
.sidebarUserName,
.sidebarUserMeta,
.sidebarLinkText strong,
.sidebarLinkText small,
.dashboardCardTag,
.summaryCard p,
.searchControls label,
.paginationControls label,
.loginForm label,
.pingField label,
.pingModeRow label,
.eyebrow {
	font-size: calc(var(--ui-fs) * 1);
}

.summaryCard strong {
	font-size: calc(var(--ui-fs) * 1.7);
}

.dashboardCard h2 {
	font-size: calc(var(--ui-fs) * 1.45);
}

.tableHeaderRow h2,
.detailSection h2 {
	font-size: calc(var(--ui-fs) * 1.3);
}

.statusBadge {
	display: inline-block;
	border-radius: 999px;
	font-size: calc(var(--ui-fs) * 0.9);
	padding: 4px 9px;
	font-weight: 600;
}

.statusPending {
	color: var(--theme-colors-warning);
	background: var(--theme-colors-pending-bg);
}

.statusApproved {
	color: var(--theme-colors-success);
	background: var(--theme-colors-approved-bg);
}

.statusRejected {
	color: var(--theme-colors-danger);
	background: var(--theme-colors-rejected-bg);
}

.requestDetail {
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-small);
	background: var(--theme-colors-surface-strong);
	padding: var(--ui-panel-pad);
	font-size: var(--ui-fs);
	white-space: pre-wrap;
}

.detailActions {
	margin-top: var(--theme-spacing-sm);
	display: flex;
	gap: var(--theme-spacing-xs);
	justify-content: flex-end;
}

button {
	border: 1px solid var(--theme-colors-accent);
	background: var(--theme-colors-accent);
	color: var(--theme-colors-accent-contrast);
	border-radius: var(--theme-radius-small);
	padding: var(--ui-control-pad-y) calc(var(--ui-control-pad-x) + 3px);
	cursor: pointer;
	font-weight: 700;
	transition: transform 0.18s ease, filter 0.18s ease;
}

button:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px 0 var(--theme-colors-accent-shadow, rgba(0,0,0,0.32));
}

button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.ghostButton {
	background: var(--theme-colors-surface);
	color: var(--theme-colors-accent);
}

.actionToast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 1200;
	max-width: min(420px, calc(100vw - 32px));
	padding: 12px 14px;
	border-radius: var(--theme-radius-small);
	background: var(--theme-colors-surface);
	border: 1px solid var(--theme-colors-border);
	box-shadow: var(--theme-shadow-soft);
	color: var(--theme-colors-text-primary);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: 10px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.actionToastIcon {
	width: 22px;
	height: 22px;
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	font-size: 12px;
	font-weight: 800;
	background: var(--theme-colors-surface-strong);
	border: 1px solid var(--theme-colors-border);
}

.actionToastMessage {
	font-size: 13px;
	line-height: 1.4;
}

.actionToastCloseButton {
	padding: 4px 8px;
	font-size: 12px;
	background: transparent;
	color: var(--theme-colors-text-secondary);
	border: 1px solid var(--theme-colors-border);
}

.actionToast.isVisible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.actionToast.isSuccess {
	border-color: var(--theme-colors-success);
}

.actionToast.isSuccess .actionToastIcon {
	color: var(--theme-colors-success);
	border-color: var(--theme-colors-success);
}

.actionToast.isError {
	border-color: var(--theme-colors-danger);
}

.actionToast.isError .actionToastIcon {
	color: var(--theme-colors-danger);
	border-color: var(--theme-colors-danger);
}

.dangerButton {
	border-color: var(--theme-colors-danger);
	background: var(--theme-colors-danger);
}

.loginBody {
	display: grid;
	place-items: center;
	padding: var(--ui-card-pad);
	background: var(--theme-colors-canvas);
	animation: loginFadeIn 0.5s ease;
}

html[data-theme-mode="system"] .loginBody {
	background: var(--theme-colors-canvas);
}

html[data-theme-mode="darkFlat"] .loginBody {
	background: var(--theme-colors-canvas);
}

html[data-theme-mode="lightFlat"] .loginBody {
	background: var(--theme-colors-canvas);
}

.loginPage {
	width: min(430px, 100%);
}

.loginPanel {
	background: var(--theme-colors-surface);
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-large);
	padding: calc(var(--ui-card-pad) + 8px);
	box-shadow: var(--theme-shadow-soft);
}

.eyebrow {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--theme-colors-accent);
	font-weight: 700;
}

.loginPanel h1 {
	margin: var(--theme-spacing-sm) 0 var(--theme-spacing-xs);
}

.loginDescription {
	margin: 0 0 var(--theme-spacing-md);
	color: var(--theme-colors-text-secondary);
}

.loginForm {
	display: grid;
	gap: var(--theme-spacing-xs);
}

.passwordField {
	display: flex;
	align-items: center;
	gap: var(--theme-spacing-xs);
}

.passwordField input {
	flex: 1 1 auto;
	min-width: 0;
}

.passwordToggleButton {
	min-width: 84px;
	white-space: nowrap;
	padding: var(--ui-control-pad-y) var(--ui-control-pad-x);
}

.loginForm label {
	font-size: 13px;
	color: var(--theme-colors-text-secondary);
	margin-top: var(--theme-spacing-xs);
}

.loginMessage {
	min-height: 20px;
	font-size: 13px;
	color: var(--theme-colors-success);
	margin-top: var(--theme-spacing-xs);
}

.loginMessage.isError {
	color: var(--theme-colors-danger);
}

.eyeFollower {
	position: fixed;
	left: 50%;
	bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
	transform: translateX(-50%);
	z-index: 1;
	pointer-events: none;
	width: min(300px, 88vw);
	display: flex;
	justify-content: center;
	opacity: 0.95;
}

.eyeFollower::before,
.eyeFollower::after {
	content: "";
	position: absolute;
	pointer-events: none;
	opacity: 0;
	color: #5a6a82;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-shadow: 0 3px 8px rgba(54, 69, 92, 0.2);
	transform: translateY(0) scale(0.9);
	transition: opacity 0.2s ease;
}

.eyeFollower::before {
	content: "zZz";
	right: 56px;
	top: -30px;
	font-size: 16px;
}

.eyeFollower::after {
	content: "z";
	right: 96px;
	top: -12px;
	font-size: 13px;
}

.eyeFollower.isSleeping::before,
.eyeFollower.isSleeping::after {
	opacity: 0.9;
}

.eyeFollower.isSleeping::before {
	animation: eyeFollowerSleepZzz 2.1s ease-in-out infinite;
}

.eyeFollower.isSleeping::after {
	animation: eyeFollowerSleepZzzSmall 2.1s ease-in-out infinite 0.45s;
}

.eyeFollower.isCelebrating::before,
.eyeFollower.isCelebrating::after {
	opacity: 0.98;
	color: #ff7a28;
	text-shadow: 0 4px 12px rgba(255, 122, 40, 0.42);
}

.eyeFollower.isCelebrating::before {
	content: "YUPPI";
	top: -34px;
	right: 34px;
	font-size: 14px;
	letter-spacing: 1.1px;
	animation: eyeFollowerCheerBurst 0.64s ease-in-out infinite;
}

.eyeFollower.isCelebrating::after {
	content: "!";
	top: -20px;
	right: 114px;
	font-size: 20px;
	animation: eyeFollowerCheerPop 0.48s ease-in-out infinite;
}

.eyeFollowerFace {
	--eye-face-shift: 0px;
	--eye-face-tilt: 0deg;
	width: 190px;
	height: 74px;
	border-radius: 28px;
	border: 1px solid rgba(18, 24, 32, 0.12);
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	position: relative;
	overflow: hidden;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
	animation: eyeFollowerBreath 5.8s ease-in-out infinite;
}

.eyeFollowerFace::selection {
	background: transparent;
}

.eyeFollowerFace::before,
.eyeFollowerFace::after {
	content: "";
	position: absolute;
	top: 13px;
	width: 28px;
	height: 5px;
	border-radius: 999px;
	background: #2e3440;
	opacity: 0;
	transition: opacity 0.16s ease, transform 0.16s ease;
}
.eyeFollowerFace::before {
	left: 54px;
	transform: rotate(8deg);
}

.eyeFollowerFace::after {
	right: 54px;
	transform: rotate(-8deg);
}

.eyeFollowerFace.isAngry::before,
.eyeFollowerFace.isAngry::after {
	opacity: 0.9;
	top: 10px;
}

.eyeFollowerFace.isAngry::before {
	transform: rotate(20deg) translateY(2px);
}

.eyeFollowerFace.isAngry::after {
	transform: rotate(-20deg) translateY(2px);
}

.eyeFollowerMouth {
	position: absolute;
	left: 50%;
	bottom: 14px;
	width: 18px;
	height: 10px;
	border-radius: 999px;
	border: 2px solid #3a404c;
	background: transparent;
	transform: translateX(-50%);
	opacity: 0;
	transition: all 0.16s ease;
}

.eyeFollowerFace.isSmirk .eyeFollowerMouth {
	bottom: 12px;
	width: 26px;
	height: 13px;
	border: 0;
	border-bottom: 2px solid #475364;
	border-radius: 0 0 20px 20px;
	transform: translateX(-50%);
	opacity: 0.88;
}

.eyeFollowerFace.isHappy .eyeFollowerMouth {
	bottom: 11px;
	width: 30px;
	height: 14px;
	border: 0;
	border-bottom: 2px solid #526178;
	border-radius: 0 0 22px 22px;
	transform: translateX(-50%);
	opacity: 0.94;
}

.eyeFollowerFace.isCurious::before,
.eyeFollowerFace.isCurious::after {
	opacity: 0.4;
	top: 12px;
}

.eyeFollowerFace.isCurious::before {
	transform: rotate(8deg) translateY(0.5px);
}

.eyeFollowerFace.isCurious::after {
	transform: rotate(-2deg) translateY(-0.5px);
}

.eyeFollowerFace.isHappy::before,
.eyeFollowerFace.isHappy::after {
	opacity: 0.34;
	top: 13px;
}

.eyeFollowerFace.isHappy::before {
	transform: rotate(5deg) translateY(0);
}

.eyeFollowerFace.isHappy::after {
	transform: rotate(-5deg) translateY(0);
}

.eyeFollowerFace.isWandering {
	animation: eyeFollowerBreath 5.8s ease-in-out infinite, eyeFollowerWander 1.7s ease-in-out 1;
}

.eyeFollowerFace.isSleeping {
	animation: eyeFollowerSleepBreath 2.8s ease-in-out infinite;
}

.eyeFollowerFace.isSleeping .eyeFollowerMouth {
	bottom: 11px;
	width: 10px;
	height: 7px;
	border: 1px solid #5f6f87;
	border-radius: 999px;
	opacity: 0.72;
	transform: translateX(-50%);
}

.eyeFollowerFace.isSleeping::before,
.eyeFollowerFace.isSleeping::after {
	opacity: 0.26;
	top: 14px;
}

.eyeFollowerFace.isSleeping::before {
	transform: rotate(6deg) translateY(0.4px);
}

.eyeFollowerFace.isSleeping::after {
	transform: rotate(-6deg) translateY(0.4px);
}

.eyeFollowerFace.isSneezing {
	animation: eyeFollowerSneeze 0.78s ease-in-out;
}

.eyeFollowerFace.isSneezing .eyeFollowerMouth {
	bottom: 10px;
	width: 14px;
	height: 16px;
	border: 2px solid #3a404c;
	border-radius: 999px;
	background: transparent;
	transform: translateX(-50%) translateY(1px);
	opacity: 0.95;
}

.eyeFollowerFace.isAngry .eyeFollowerMouth {
	bottom: 10px;
	width: 28px;
	height: 11px;
	border: 0;
	border-bottom: none;
	border-top: 3px solid #3a404c;
	border-radius: 14px 14px 0 0;
	opacity: 1;
}

.eyeFollowerFace.isShaking {
	animation: eyeFollowerHeadShake 0.76s ease-in-out;
}

.eyeFollowerFace.isAngry {
	background: transparent;
	box-shadow: none;
}

.eyeFollowerFace.isCelebrating {
	animation: eyeFollowerOverjoy 0.56s cubic-bezier(0.22, 0.76, 0.2, 1) infinite;
}

.eyeFollowerFace.isCelebrating .eyeFollowerMouth {
	bottom: 6px;
	width: 34px;
	height: 18px;
	border: 2px solid #ff7a28;
	border-top: 0;
	border-radius: 0 0 18px 18px;
	background: radial-gradient(circle at 50% 12%, #ffad7a 0%, #d24949 45%, #8d1d2f 100%);
	opacity: 1;
	animation: eyeFollowerJoyMouth 0.5s ease-in-out infinite alternate;
}

.eyeFollowerFace.isCelebrating::before,
.eyeFollowerFace.isCelebrating::after {
	opacity: 0.88;
	top: 9px;
	height: 6px;
	background: linear-gradient(90deg, #ffb36d 0%, #ff7a28 100%);
	animation: eyeFollowerBrowParty 0.54s ease-in-out infinite alternate;
}

.eyeFollowerFace.isCelebrating::before {
	transform: rotate(22deg) translateY(-1px);
}

.eyeFollowerFace.isCelebrating::after {
	transform: rotate(-22deg) translateY(-1px);
}

.eyeFollowerEye {
	--eye-lid-top: 4px;
	--eye-lid-bottom: 2px;
	--eye-scale-y: 1;
	position: relative;
	width: 46px;
	height: 38px;
	border-radius: 52% 52% 48% 48% / 62% 62% 38% 38%;
	background: radial-gradient(circle at 50% 68%, #ffffff 0%, #f6f9fd 52%, #edf2f8 100%);
	border: 1px solid rgba(12, 20, 35, 0.14);
	overflow: hidden;
	box-shadow: inset 0 2px 8px rgba(120, 138, 170, 0.12), 0 6px 14px rgba(31, 40, 56, 0.06);
	transform: scaleY(var(--eye-scale-y));
	transform-origin: center center;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.eyeFollowerEye::before,
.eyeFollowerEye::after {
	content: "";
	position: absolute;
	left: -1px;
	right: -1px;
	z-index: 2;
	pointer-events: none;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.18s ease, border-color 0.18s ease;
}

.eyeFollowerEye::before {
	top: -1px;
	height: 54%;
	background: linear-gradient(180deg, #f8fbff 0%, #edf2f9 48%, #d8e0ec 100%);
	border-bottom: 1px solid rgba(59, 73, 92, 0.18);
	border-radius: 22px 22px 16px 16px;
	box-shadow: inset 0 -2px 3px rgba(121, 139, 168, 0.1);
	transform: translateY(calc(-100% + var(--eye-lid-top)));
}

.eyeFollowerEye::after {
	bottom: -1px;
	height: 48%;
	background: linear-gradient(180deg, #dbe3ee 0%, #eef3f9 46%, #f8fbff 100%);
	border-top: 1px solid rgba(59, 73, 92, 0.12);
	border-radius: 16px 16px 22px 22px;
	box-shadow: inset 0 2px 3px rgba(121, 139, 168, 0.08);
	transform: translateY(calc(100% - var(--eye-lid-bottom)));
}

.eyeFollowerEye.isClosed {
	--eye-lid-top: 18px;
	--eye-lid-bottom: 15px;
	--eye-scale-y: 0.42;
	background: linear-gradient(180deg, #eff4fb 0%, #e1e8f2 100%);
	border-color: rgba(26, 36, 51, 0.18);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.eyeFollowerEye.isSquinting {
	--eye-lid-top: 11px;
	--eye-lid-bottom: 7px;
	--eye-scale-y: 0.7;
	background: linear-gradient(180deg, #fdfefe 0%, #edf1f7 100%);
}

.eyeFollowerEye.isDrowsy {
	--eye-lid-top: 14px;
	--eye-lid-bottom: 10px;
	--eye-scale-y: 0.6;
	background: linear-gradient(180deg, #fafbfd 0%, #eef2f6 100%);
}

.eyeFollowerEye.isClosed::before,
.eyeFollowerEye.isClosed::after {
	border-color: rgba(48, 58, 74, 0.2);
}

.eyeFollowerEye.isSquinting::before,
.eyeFollowerEye.isSquinting::after {
	opacity: 0.95;
}

.eyeFollowerEye.isDrowsy::before,
.eyeFollowerEye.isDrowsy::after {
	opacity: 0.95;
}

.eyeFollowerEye.isAngry {
	border-color: rgba(18, 24, 32, 0.28);
	background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.eyeFollowerEye.isCelebrating {
	--eye-lid-top: 1px;
	--eye-lid-bottom: 0px;
	--eye-scale-y: 1.1;
	border-color: rgba(255, 122, 40, 0.46);
	background: radial-gradient(circle at 50% 74%, #ffffff 0%, #fff4e8 52%, #ffe6d1 100%);
	box-shadow: inset 0 3px 9px rgba(255, 143, 64, 0.2), 0 8px 16px rgba(255, 122, 40, 0.24);
	animation: eyeFollowerJoyEyes 0.44s ease-in-out infinite alternate;
}

.eyeFollowerPupil {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15px;
	height: 15px;
	border-radius: 999px;
	background: radial-gradient(circle at 35% 35%, #474747 0%, #161616 60%, #020202 100%);
	transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)));
	transition: transform 0.1s linear, opacity 0.1s linear;
	z-index: 1;
}

.eyeFollowerPupil::before {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

.eyeFollowerEye.isAngry .eyeFollowerPupil {
	background: radial-gradient(circle at 35% 35%, #3c3c3c 0%, #111111 62%, #000000 100%);
	transform: translate(calc(-50% + (var(--px, 0px) * 0.65)), calc(-50% + (var(--py, 0px) * 0.65)));
}

.eyeFollowerEye.isClosed .eyeFollowerPupil {
	opacity: 0;
}

.eyeFollowerEye.isClosed.isPeekOpen {
	--eye-lid-top: 10px;
	--eye-lid-bottom: 8px;
	--eye-scale-y: 0.82;
	background: radial-gradient(circle at 50% 66%, #ffffff 0%, #f5f8fd 56%, #eaf0f7 100%);
	border-color: rgba(26, 36, 51, 0.22);
	box-shadow: inset 0 1px 8px rgba(120, 138, 170, 0.12), 0 8px 16px rgba(31, 40, 56, 0.08);
}

.eyeFollowerEye.isClosed.isPeekOpen .eyeFollowerPupil {
	opacity: 1;
	transform: translate(calc(-50% + (var(--px, 0px) * 0.38)), calc(-50% + (var(--py, 0px) * 0.38)));
}

.eyeFollowerFace.isWandering .eyeFollowerPupil {
	transition-duration: 0.14s;
}

.eyeFollowerEye.isCelebrating .eyeFollowerPupil {
	background: radial-gradient(circle at 35% 35%, #3f2a1a 0%, #1b1108 58%, #050301 100%);
	animation: eyeFollowerPupilParty 0.26s linear infinite;
}

@keyframes eyeFollowerHeadShake {
	0% { transform: translateX(0) rotate(0deg); }
	12% { transform: translateX(-7px) rotate(-6deg); }
	24% { transform: translateX(7px) rotate(6deg); }
	36% { transform: translateX(-6px) rotate(-5deg); }
	48% { transform: translateX(6px) rotate(5deg); }
	60% { transform: translateX(-4px) rotate(-3deg); }
	72% { transform: translateX(4px) rotate(3deg); }
	84% { transform: translateX(-2px) rotate(-1deg); }
	100% { transform: translateX(0) rotate(0deg); }
}

@keyframes eyeFollowerBreath {
	0% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
	50% { transform: translateX(var(--eye-face-shift)) translateY(-1px) rotate(var(--eye-face-tilt)) scale(1.012); }
	100% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
}

@keyframes eyeFollowerWander {
	0% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
	22% { transform: translateX(calc(var(--eye-face-shift) - 1px)) translateY(-0.8px) rotate(calc(var(--eye-face-tilt) - 0.8deg)) scale(1.006); }
	50% { transform: translateX(calc(var(--eye-face-shift) + 0.8px)) translateY(-0.4px) rotate(calc(var(--eye-face-tilt) + 0.8deg)) scale(1.009); }
	78% { transform: translateX(calc(var(--eye-face-shift) - 0.6px)) translateY(0) rotate(calc(var(--eye-face-tilt) - 0.4deg)) scale(1.004); }
	100% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
}

@keyframes eyeFollowerSleepBreath {
	0% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
	50% { transform: translateX(calc(var(--eye-face-shift) + 0.3px)) translateY(0.4px) rotate(calc(var(--eye-face-tilt) - 0.5deg)) scale(1.008); }
	100% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
}

@keyframes eyeFollowerSleepZzz {
	0% { transform: translateY(7px) translateX(0) scale(0.88); opacity: 0; }
	18% { opacity: 0.82; }
	65% { opacity: 0.72; }
	100% { transform: translateY(-13px) translateX(-4px) scale(1.02); opacity: 0; }
}

@keyframes eyeFollowerSleepZzzSmall {
	0% { transform: translateY(4px) translateX(0) scale(0.9); opacity: 0; }
	20% { opacity: 0.68; }
	60% { opacity: 0.56; }
	100% { transform: translateY(-9px) translateX(-2px) scale(1); opacity: 0; }
}

@keyframes eyeFollowerSneeze {
	0% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
	20% { transform: translateX(calc(var(--eye-face-shift) + 2px)) translateY(-1px) rotate(calc(var(--eye-face-tilt) - 3deg)) scale(1.01); }
	46% { transform: translateX(calc(var(--eye-face-shift) - 5px)) translateY(1px) rotate(calc(var(--eye-face-tilt) + 7deg)) scale(1.03); }
	70% { transform: translateX(calc(var(--eye-face-shift) + 2px)) translateY(0) rotate(calc(var(--eye-face-tilt) - 2deg)) scale(1.01); }
	100% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(var(--eye-face-tilt)) scale(1); }
}

@keyframes eyeFollowerOverjoy {
	0% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(calc(var(--eye-face-tilt) - 1deg)) scale(1); }
	18% { transform: translateX(calc(var(--eye-face-shift) - 1.2px)) translateY(-1px) rotate(calc(var(--eye-face-tilt) - 3.8deg)) scale(1.015); }
	36% { transform: translateX(calc(var(--eye-face-shift) + 1.6px)) translateY(-0.6px) rotate(calc(var(--eye-face-tilt) + 4.4deg)) scale(1.018); }
	54% { transform: translateX(calc(var(--eye-face-shift) - 1.6px)) translateY(0) rotate(calc(var(--eye-face-tilt) - 3.6deg)) scale(1.015); }
	72% { transform: translateX(calc(var(--eye-face-shift) + 1.2px)) translateY(-1px) rotate(calc(var(--eye-face-tilt) + 3.8deg)) scale(1.018); }
	100% { transform: translateX(var(--eye-face-shift)) translateY(0) rotate(calc(var(--eye-face-tilt) + 1deg)) scale(1); }
}

@keyframes eyeFollowerJoyEyes {
	0% { transform: scaleY(var(--eye-scale-y)) scaleX(1); }
	100% { transform: scaleY(calc(var(--eye-scale-y) * 1.02)) scaleX(1.03); }
}

@keyframes eyeFollowerPupilParty {
	0% { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))); }
	25% { transform: translate(calc(-50% + var(--px, 0px) + 0.3px), calc(-50% + var(--py, 0px) - 0.4px)); }
	50% { transform: translate(calc(-50% + var(--px, 0px) - 0.4px), calc(-50% + var(--py, 0px) + 0.3px)); }
	75% { transform: translate(calc(-50% + var(--px, 0px) + 0.2px), calc(-50% + var(--py, 0px) + 0.2px)); }
	100% { transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px))); }
}

@keyframes eyeFollowerJoyMouth {
	0% { transform: translateX(-50%) scale(1); }
	100% { transform: translateX(-50%) scale(1.07); }
}

@keyframes eyeFollowerBrowParty {
	0% { opacity: 0.82; }
	100% { opacity: 1; }
}

@keyframes eyeFollowerCheerBurst {
	0% { transform: translateY(3px) scale(0.88) rotate(-4deg); opacity: 0; }
	22% { opacity: 1; }
	65% { opacity: 0.94; }
	100% { transform: translateY(-13px) scale(1.06) rotate(4deg); opacity: 0; }
}

@keyframes eyeFollowerCheerPop {
	0% { transform: translateY(1px) scale(0.8); opacity: 0; }
	28% { opacity: 1; }
	70% { opacity: 0.94; }
	100% { transform: translateY(-12px) scale(1.14); opacity: 0; }
}

.pingPageCard {
	max-width: 980px;
	margin: 0 auto;
	background: var(--theme-colors-surface);
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-large);
	padding: var(--theme-spacing-md);
	box-shadow: var(--theme-shadow-card);
}

.pingControls {
	display: grid;
	gap: var(--theme-spacing-sm);
	grid-template-columns: 1fr auto auto;
	align-items: end;
	margin-bottom: var(--theme-spacing-sm);
}

.pingField {
	display: grid;
	gap: var(--theme-spacing-xs);
}

.pingField label,
.pingModeRow label {
	font-size: 13px;
	color: var(--theme-colors-text-secondary);
}

.pingField input,
.pingField select {
	height: auto;
	min-height: calc(34px + var(--ui-control-pad-y));
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-small);
	padding: 0 var(--ui-control-pad-x);
	font-size: var(--ui-fs);
	background: var(--theme-colors-input-bg);
	color: var(--theme-colors-input-text);
}

.pingStatusRow {
	display: flex;
	gap: var(--theme-spacing-sm);
	flex-wrap: wrap;
	margin-bottom: var(--theme-spacing-sm);
	align-items: center;
}

.pingChip {
	border-radius: 999px;
	padding: calc(var(--ui-control-pad-y) - 3px) var(--ui-control-pad-x);
	border: 1px solid var(--theme-colors-border);
	background: var(--theme-colors-chip-bg);
	font-size: calc(var(--ui-fs) - 1px);
	color: var(--theme-colors-text-secondary);
}

.pingChip.ok {
	color: var(--theme-colors-success);
	border-color: var(--theme-colors-success);
	background: var(--theme-colors-approved-bg);
}

.pingChip.error {
	color: var(--theme-colors-danger);
	border-color: var(--theme-colors-danger);
	background: var(--theme-colors-rejected-bg);
}

.pingModeRow {
	display: flex;
	align-items: center;
	gap: var(--theme-spacing-sm);
	margin-bottom: var(--theme-spacing-sm);
}

.pingModeRow input {
	width: auto;
	height: auto;
	margin: 0;
}

.pingOutput {
	margin: 0;
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-medium);
	background: var(--theme-colors-ping-output-bg);
	color: var(--theme-colors-ping-output-text);
	padding: var(--ui-panel-pad);
	min-height: 220px;
	max-height: 420px;
	overflow: auto;
	font-size: calc(var(--ui-fs) - 1px);
	line-height: 1.5;
}

#ptProgressBar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	height: 3px;
	width: 0%;
	opacity: 1;
	background: linear-gradient(90deg, var(--theme-colors-accent), var(--theme-colors-accent-alt, var(--theme-colors-accent)));
	border-radius: 0 3px 3px 0;
	box-shadow: 0 0 10px 1px var(--theme-colors-accent);
	pointer-events: none;
	transition: width 0.52s cubic-bezier(0.1, 0, 0.2, 1), opacity 0.5s ease;
}

#ptCenterLoader {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	background: color-mix(in srgb, var(--theme-colors-canvas, var(--pt-boot-bg, #FFFFFF)) 24%, transparent);
	backdrop-filter: blur(10px) saturate(110%);
	will-change: opacity, backdrop-filter, background;
	transition: opacity 0.24s cubic-bezier(0.22, 1, 0.36, 1), backdrop-filter 0.24s ease, background 0.24s ease, visibility 0s linear 0.24s;
}

.ptCenterLoaderRing {
	position: relative;
	display: block;
	width: 58px;
	height: 58px;
	border-radius: 999px;
	border: 3px solid rgba(255, 255, 255, 0.16);
	border-top-color: var(--theme-colors-accent, var(--pt-boot-accent, #F2784B));
	border-right-color: var(--theme-colors-accent, var(--pt-boot-accent, #F2784B));
	background: transparent;
	box-shadow: none;
	animation: ptCenterLoaderSpin 0.72s linear infinite;
	transform-origin: 50% 50%;
	opacity: 1;
	filter: none;
	will-change: auto;
	transition: none;
}

body.ptLeaving #ptCenterLoader,
body.ptEntering #ptCenterLoader {
	opacity: 1;
	visibility: visible;
	background: color-mix(in srgb, var(--theme-colors-canvas, var(--pt-boot-bg, #FFFFFF)) 24%, transparent);
	backdrop-filter: blur(10px) saturate(110%);
	transition-delay: 0s;
}

body.ptLeaving .ptCenterLoaderRing,
body.ptEntering .ptCenterLoaderRing {
	opacity: 1;
	filter: none;
	box-shadow: none;
}

html.ptBootTransition #ptCenterLoader {
	opacity: 1;
	visibility: visible;
}

html.ptBootTransition.ptBootFadeOut #ptCenterLoader {
	opacity: 0;
}

/* --- Exit: application shell fades/slides down together --- */
body.ptLeaving .appShell,
body.ptLeaving .loginPage {
	opacity: 0;
	transform: translateY(7px);
	transition: opacity 0.26s ease, transform 0.32s ease;
}

/* --- Enter: content starts invisible & offset up --- */
body.ptEntering .appShell,
body.ptEntering .loginPage {
	opacity: 0;
	transform: translateY(-7px);
	transition: none;
}

body.ptBootEntering .appShell,
body.ptBootEntering .loginPage {
	opacity: 1;
	transform: none;
	transition: none;
}

/* --- Visible: content slides to rest --- */
body.ptVisible .appShell,
body.ptVisible .loginPage {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.46s cubic-bezier(0, 0, 0.2, 1), transform 0.46s cubic-bezier(0, 0, 0.2, 1);
}

body.ptBootVisible .appShell,
body.ptBootVisible .loginPage {
	opacity: 1;
	transform: none;
	transition: opacity 0.3s ease;
}

@keyframes ptCenterLoaderSpin {
	to {
		rotate: 360deg;
	}
}

@keyframes loginFadeIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 900px) {
	.appShell {
		grid-template-columns: 1fr;
	}

	.hasSidebar.sidebarCollapsed .appShell {
		grid-template-columns: 1fr;
	}

	.appSidebar {
		position: static;
		height: auto;
		max-height: min(72vh, 560px);
		border-radius: var(--theme-radius-medium);
		margin-bottom: var(--theme-spacing-md);
		overflow: hidden;
	}

	.sidebarScrollable {
		overflow-y: auto;
		overflow-x: hidden;
		min-height: 0;
		padding-right: 0;
	}

	.hasSidebar.sidebarCollapsed .sidebarBrand,
	.hasSidebar.sidebarCollapsed .sidebarLinkText {
		display: initial;
	}

	.hasSidebar.sidebarCollapsed .sidebarHeader,
	.hasSidebar.sidebarCollapsed .sidebarNav {
		justify-content: initial;
		justify-items: initial;
	}

	.hasSidebar.sidebarCollapsed .sidebarUserCard,
	.hasSidebar.sidebarCollapsed .sidebarSettingsButton,
	.hasSidebar.sidebarCollapsed .sidebarLogoutButton {
		width: 100%;
		height: auto;
		padding: 10px;
		display: inline-flex;
		border-radius: var(--theme-radius-small);
	}

	.hasSidebar.sidebarCollapsed .sidebarActionLabel,
	.hasSidebar.sidebarCollapsed .sidebarUserLabel,
	.hasSidebar.sidebarCollapsed .sidebarUserName,
	.hasSidebar.sidebarCollapsed .sidebarUserMeta {
		display: initial;
	}

	.hasSidebar.sidebarCollapsed .sidebarToggleIcon {
		transform: none;
	}


}

@media (max-width: 760px) {
	.appMain {
		padding: var(--theme-spacing-md);
	}

	.dashboardHero {
		grid-template-columns: 1fr;
	}

	.dashboardActionList {
		grid-template-columns: 1fr;
	}

	.dashboardChartHeader {
		flex-direction: column;
	}

	.dashboardChartControls {
		justify-content: flex-start;
	}

	.dashboardTrendChart {
		gap: 8px;
		padding-inline: 8px;
	}

	.dashboardTrendTooltip {
		left: 50%;
		min-width: 148px;
	}

	.panelHeader {
		flex-direction: column;
		align-items: flex-start;
	}

	.searchControls input {
		min-width: 130px;
	}

	.detailActions {
		width: 100%;
		justify-content: flex-end;
	}

	.pingControls {
		grid-template-columns: 1fr;
	}

	.eyeFollower {
		width: min(220px, 80vw);
		bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
	}

	.eyeFollowerFace {
		width: 148px;
		height: 58px;
		gap: 16px;
	}

	.eyeFollowerEye {
		width: 34px;
		height: 34px;
	}

	.eyeFollowerPupil {
		width: 12px;
		height: 12px;
	}
}

/* ---- Notification Widget ---- */
#notificationWidget {
	position: fixed;
	top: 16px;
	right: 20px;
	z-index: 9000;
}

.ntfBell {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	border: 1px solid var(--theme-colors-border);
	background: var(--theme-colors-surface);
	color: var(--theme-colors-text-primary);
	cursor: pointer;
	display: grid;
	place-items: center;
	padding: 0;
	box-shadow: var(--theme-shadow-card);
	transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.ntfBell:hover {
	background: var(--theme-colors-surface-strong);
	border-color: var(--theme-colors-accent);
	transform: translateY(-1px);
	filter: none;
}

.ntfBellIcon {
	width: 18px;
	height: 18px;
	pointer-events: none;
}

.ntfBadge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--theme-colors-danger);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	line-height: 18px;
	text-align: center;
	padding: 0 4px;
	border: 2px solid var(--theme-colors-canvas);
	pointer-events: none;
	box-sizing: content-box;
}

@keyframes ntfBellRing {
	0%, 100% { rotate: 0deg; }
	20%       { rotate: -18deg; }
	40%       { rotate: 18deg; }
	60%       { rotate: -12deg; }
	80%       { rotate: 8deg; }
}

.ntfBellRing {
	animation: ntfBellRing 0.52s ease;
	transform-origin: top center;
}

.ntfPanel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 320px;
	max-height: 440px;
	background: var(--theme-colors-surface);
	border: 1px solid var(--theme-colors-border);
	border-radius: var(--theme-radius-large);
	box-shadow: var(--theme-shadow-soft);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: ntfPanelIn 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.ntfPanel[hidden] {
	display: none;
}

@keyframes ntfPanelIn {
	from { opacity: 0; transform: translateY(-6px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ntfPanelOut {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to   { opacity: 0; transform: translateY(-6px) scale(0.97); }
}

.ntfPanel.ntfPanelClosing {
	animation: ntfPanelOut 0.16s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.ntfPanelHeader {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--theme-spacing-sm);
	padding: 12px 14px 10px;
	border-bottom: 1px solid var(--theme-colors-divider);
	flex: 0 0 auto;
}

.ntfPanelTitle {
	font-size: 14px;
	font-weight: 700;
}

.ntfMarkAllRead {
	font-size: 11px;
	font-weight: 600;
	background: none;
	border: none;
	color: var(--theme-colors-accent);
	cursor: pointer;
	padding: 0;
	transition: opacity 0.15s ease;
	filter: none;
	transform: none;
	border-radius: 0;
}

.ntfMarkAllRead:hover {
	opacity: 0.72;
	filter: none;
	transform: none;
}

.ntfList {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

.ntfItem {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 10px 14px;
	border-bottom: 1px solid var(--theme-colors-divider);
	cursor: pointer;
	transition: background 0.14s ease;
}

.ntfItem:last-child {
	border-bottom: none;
}

.ntfItem:hover {
	background: var(--theme-colors-surface-strong);
}

.ntfItemDot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: transparent;
	margin-top: 4px;
	flex: 0 0 8px;
	transition: background 0.14s ease;
}

.ntfItemUnread .ntfItemDot {
	background: var(--theme-colors-accent);
}

.ntfItemContent {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.ntfItemTitle {
	font-size: 13px;
	line-height: 1.3;
	word-break: break-word;
}

.ntfItemBody {
	margin: 0;
	font-size: 12px;
	color: var(--theme-colors-text-secondary);
	line-height: 1.4;
	word-break: break-word;
}

.ntfItemTime {
	font-size: 11px;
	color: var(--theme-colors-text-secondary);
	margin-top: 1px;
	display: block;
}

.ntfEmptyState {
	padding: 28px 14px;
	margin: 0;
	text-align: center;
	font-size: 13px;
	color: var(--theme-colors-text-secondary);
}

/* ── Animation Speed Variants ──────────────────────────────────────── */
[data-animation-speed="slow"] {
	--transition-duration: 0.6s;
	--transition-duration-fast: 0.36s;
	--transition-duration-slow: 0.8s;
}

[data-animation-speed="normal"] {
	--transition-duration: 0.4s;
	--transition-duration-fast: 0.24s;
	--transition-duration-slow: 0.6s;
}

[data-animation-speed="fast"] {
	--transition-duration: 0.2s;
	--transition-duration-fast: 0.12s;
	--transition-duration-slow: 0.3s;
}

* {
	--transition-duration: 0.4s;
	--transition-duration-fast: 0.24s;
	--transition-duration-slow: 0.6s;
}

/* ── Shadow Intensity Variants ────────────────────────────────────── */
html[data-shadow-intensity="none"] *,
html[data-shadow-intensity="none"] {
	box-shadow: none !important;
	text-shadow: none !important;
}

html[data-shadow-intensity="subtle"] {
	--theme-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.05);
	--theme-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
}

html[data-shadow-intensity="normal"] {
	--theme-shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.1);
	--theme-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ── Border Radius Variants ───────────────────────────────────────── */
[data-border-radius="sharp"] {
	--theme-radius-small: 0;
	--theme-radius-medium: 2px;
	--theme-radius-large: 4px;
}

[data-border-radius="normal"] {
	--theme-radius-small: 8px;
	--theme-radius-medium: 12px;
	--theme-radius-large: 16px;
}

[data-border-radius="rounded"] {
	--theme-radius-small: 12px;
	--theme-radius-medium: 16px;
	--theme-radius-large: 20px;
}