@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
	--app-bg: #EEF0F5;
	--surface: #fff;
	--surface-sunk: #F6F7FB;
	--border: #EDEFF5;
	--control-line: #9AA3B8;
	--brand: #4E46E8;
	--brand-strong: #4B3D9B;
	--brand-deep: #3E3384;
	--brand-tint: #EDEBFB;
	--accent-cyan: #74DCEC;
	--ok: #3FBF8F;
	--warn: #F0A742;
	--risk: #E4694F;
	--ok-tint: #E7F6F0;
	--warn-tint: #FDF3E3;
	--risk-tint: #FBEAE5;
	--ok-ink: #22775A;
	--warn-ink: #9A6516;
	--risk-ink: #A6402B;
	--extended-tint: #FFF8EE;
	--surface-hover: #FBFBFE;
	--ink: #2E3247;
	--ink-2: #5A6178;
	--ink-3: #8B95AE;
	--sidebar: #2A1258;
	--nav-idle: rgba(255,255,255,.62);
	--nav-hover: rgba(255,255,255,.07);
	--nav-active: #5B3FD4;
	--r-card: 16px;
	--r-btn: 10px;
	--r-pill: 999px;
	--sh-card: 0 6px 20px rgba(46,50,71,.05);
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	--topbar-h: 64px;
}

html.theme-dark {
	color-scheme: dark;
	--app-bg: #100E1A;
	--surface: #1C1830;
	--surface-sunk: #141224;
	--surface-hover: #262040;
	--border: #322C4C;
	--control-line: #7A7294;
	--brand: #8B7CFF;
	--brand-strong: #7C6CFF;
	--brand-deep: #A498FF;
	--brand-tint: #2A2458;
	--accent-cyan: #5EE4F0;
	--ok: #4AD4A4;
	--warn: #F0B45A;
	--risk: #F07A64;
	--ok-tint: #16382E;
	--warn-tint: #3A2C14;
	--risk-tint: #3A1C18;
	--ok-ink: #7EE0B8;
	--warn-ink: #F0C878;
	--risk-ink: #F0A090;
	--extended-tint: #2A2418;
	--ink: #F2EEFA;
	--ink-2: #C0B8D6;
	--ink-3: #8A82A4;
	--sidebar: #0C0818;
	--nav-idle: rgba(242,238,250,.64);
	--nav-hover: rgba(255,255,255,.08);
	--nav-active: #6B4FE8;
	--sh-card: 0 10px 32px rgba(0,0,0,.42);
}

html.theme-dark body {
	background:
		radial-gradient(1200px 520px at 12% -10%, rgba(124,108,255,.18), transparent 55%),
		radial-gradient(900px 420px at 100% 0%, rgba(94,228,240,.08), transparent 46%),
		var(--app-bg);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
	height: 100%;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	overflow-x: hidden;
	overscroll-behavior-x: none;
}
body {
	background: var(--app-bg);
	font-family: 'Poppins', system-ui, sans-serif;
	color: var(--ink);
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	touch-action: pan-y;
}
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; touch-action: manipulation; }
input, select, textarea { font-family: inherit; font-size: 14px; touch-action: manipulation; }

.btn {
	height: 38px;
	padding: 0 15px;
	border-radius: var(--r-btn);
	font-size: 13.5px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
}
.b-pri { background: var(--brand-strong); color: #fff; }
.b-pri:hover { background: var(--brand-deep); }
.b-sec { background: var(--surface); color: var(--ink-2); border: 1px solid var(--border); }
.b-ghost { color: var(--brand-strong); }
.b-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
.b-risk { background: var(--risk); color: #fff; }
.LoadMoreBtn {
	display: none;
	width: 100%;
	height: 36px;
	margin: 8px 0 4px;
	justify-content: center;
	border-radius: 10px;
}
.LoadMoreBtn.on { display: flex; }

.card {
	background: var(--surface);
	border-radius: var(--r-card);
	box-shadow: var(--sh-card);
	padding: 20px 22px;
}

.HiddenBuffer { display: none; }

/* Login */
html.login-html,
html.login-html body.login-body {
	height: auto;
	min-height: 100%;
	min-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-x: none;
	touch-action: pan-y;
}
.login-body {
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-x: none;
	touch-action: pan-y;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: max(24px, var(--safe-top)) max(24px, var(--safe-right)) max(24px, var(--safe-bottom)) max(24px, var(--safe-left));
	background: linear-gradient(135deg, #2A1258 0%, #4E46E8 45%, #74DCEC 100%);
}
.login-card {
	width: 100%;
	max-width: 420px;
	min-width: 0;
	background: var(--surface);
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(42,18,88,.35);
	padding: 36px 32px 24px;
}
.login-brand { text-align: center; margin-bottom: 28px; }
.brand-mark {
	width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
	display: grid; place-items: center;
	background: linear-gradient(145deg, #A78BFA 0%, #4E46E8 52%, #2DD4BF 100%);
	box-shadow: 0 6px 18px rgba(78,70,232,.38);
	font-size: 28px; font-weight: 700; color: #fff;
}
.brand-wordmark { font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -.03em; }
.brand-wordmark em { font-style: normal; color: var(--brand); }
.LocalDevBadge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--warn);
	color: #3a2a00;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	vertical-align: middle;
}
.LocalDevBadge[hidden] { display: none; }
.login-html .LocalDevBadge {
	position: fixed;
	top: max(8px, var(--safe-top));
	left: max(8px, var(--safe-left));
	z-index: 40;
	margin-left: 0;
}
.login-tag { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.login-card h2 { font-size: 20px; font-weight: 600; margin: 8px 0 16px; }
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.field input, .field select, .FormElement input, .FormElement select, .FormElement textarea {
	width: 100%; height: 42px; padding: 0 14px;
	border: 1px solid var(--border); border-radius: var(--r-btn);
	background: var(--surface-sunk);
	color: var(--ink);
}
.FormElement textarea { height: 80px; padding: 10px 14px; }
.field input:focus, .FormElement input:focus, .FormElement select:focus { outline: 2px solid var(--brand); border-color: transparent; }
.login-error { background: var(--risk-tint); color: var(--risk-ink); padding: 10px 12px; border-radius: 8px; font-size: 13px; margin-bottom: 12px; display: none; }
.login-error.on { display: block; }
.remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 16px; }
.remember input { width: auto; height: auto; }

input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	flex: none;
	border: 2px solid var(--control-line);
	border-radius: 5px;
	background: var(--surface);
	cursor: pointer;
	vertical-align: middle;
	position: relative;
}
input[type="checkbox"]:checked {
	background: var(--brand);
	border-color: var(--brand);
}
input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 9px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
input[type="number"] {
	height: 38px;
	padding: 0 10px;
	border: 1px solid var(--control-line);
	border-radius: 10px;
	background: var(--surface-sunk);
	color: var(--ink);
	font: inherit;
	box-sizing: border-box;
}
input[type="number"]:focus {
	outline: 2px solid var(--brand);
	border-color: transparent;
}
.login-footer { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--ink-3); }

/* Chooser */
.chooser { display: grid; gap: 16px; margin-top: 12px; }
.chooser-tile {
	border: 1px solid var(--border); border-radius: 14px; padding: 18px;
	text-align: left; background: var(--surface-sunk);
}
.chooser-tile:hover { border-color: var(--brand); }
.chooser-tile h3 { font-size: 16px; margin-bottom: 4px; }
.chooser-tile p { font-size: 13px; color: var(--ink-3); }

/* Shell */
.AppShell {
	display: grid;
	grid-template-columns: 266px 1fr;
	height: 100vh;
	height: 100dvh;
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	overflow-x: hidden;
	overscroll-behavior-x: none;
	touch-action: pan-y;
}
.SideNav { background: var(--sidebar); display: flex; flex-direction: column; color: #fff; overflow: hidden; }
.SideBrand { display: flex; align-items: center; gap: 12px; padding: 18px 16px 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.SideBrand .brand-mark { width: 42px; height: 42px; border-radius: 13px; margin: 0; font-size: 22px; }
.SideBrand .brand-wordmark { color: #fff; font-size: 18px; flex: 1; min-width: 0; }
.SideBrand .brand-wordmark em { color: var(--accent-cyan); }
.nav-close {
	display: none;
	margin-left: auto;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	color: #fff;
	flex: none;
}
.nav-close:hover { background: var(--nav-hover); }
.side-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 4px 4px 2px;
	min-height: 32px;
}
.nav-dock {
	display: inline-flex;
	margin-left: auto;
	width: 28px;
	height: 28px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	color: #fff;
	flex: none;
	opacity: .6;
}
.nav-dock:hover {
	background: var(--nav-hover);
	opacity: .85;
}
.AppShell.nav-collapsed { grid-template-columns: 72px 1fr; }
.nav-collapsed .brand-wordmark { display: none; }
.nav-collapsed .SideBrand {
	justify-content: center;
	padding-left: 8px;
	padding-right: 8px;
}
.nav-collapsed .side-meta { justify-content: center; }
.nav-collapsed .nav-dock { margin-left: 0; }
.nav-collapsed .nav-item span:not(.nav-ico) { display: none; }
.nav-collapsed .nav-item {
	justify-content: center;
	padding: 8px;
	gap: 0;
}
.nav-collapsed .side-ver { display: none; }
.SideMenu { flex: 1; overflow: auto; padding: 8px 10px 16px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent; }
.SideMenu::-webkit-scrollbar { width: 6px; }
.SideMenu::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }
.nav-item {
	display: flex; align-items: center; gap: 10px; width: 100%;
	min-height: 40px; padding: 8px 12px; border-radius: 9px;
	color: var(--nav-idle); font-size: 13px; font-weight: 500; text-align: left;
}
.nav-item:hover { background: var(--nav-hover); color: #fff; }
.nav-item.active { background: var(--nav-active); color: #fff; font-weight: 600; }
html.role-accountant .nav-item[data-view="dashboard"],
html.role-accountant .nav-item[data-view="workstations"],
html.role-accountant .nav-item[data-view="contactreports"],
html.role-accountant .nav-item[data-view="reports"],
html.role-accountant .nav-item[data-view="paystubs"],
html.role-accountant .nav-item[data-view="operations"],
html.role-accountant .nav-item[data-view="alerts"],
html.role-accountant .nav-item[data-view="myaccount"],
html.role-accountant .nav-item[data-view="settings"],
html.role-accountant .shift-pill,
html.role-accountant .AlertBellBtn,
html.role-accountant .PayRunFlagPaid,
html.role-accountant .PayRunFlagVerified,
html.role-accountant .PayRunFlagCanceled,
body.role-accountant .nav-item[data-view="dashboard"],
body.role-accountant .nav-item[data-view="workstations"],
body.role-accountant .nav-item[data-view="contactreports"],
body.role-accountant .nav-item[data-view="reports"],
body.role-accountant .nav-item[data-view="paystubs"],
body.role-accountant .nav-item[data-view="operations"],
body.role-accountant .nav-item[data-view="alerts"],
body.role-accountant .nav-item[data-view="myaccount"],
body.role-accountant .nav-item[data-view="settings"],
body.role-accountant .shift-pill,
body.role-accountant .AlertBellBtn,
body.role-accountant .PayRunFlagPaid,
body.role-accountant .PayRunFlagVerified,
body.role-accountant .PayRunFlagCanceled {
	display: none !important;
}

html.nav-booting .SideMenu .nav-item,
html.nav-booting .SideFoot .nav-item,
html.nav-booting .shift-pill,
html.nav-booting .AlertBellBtn {
	opacity: 0;
	visibility: hidden;
	transform: translateX(-10px);
	pointer-events: none;
}

html.nav-ready .SideMenu .nav-item,
html.nav-ready .SideFoot .nav-item {
	animation: navitemin 0.32s ease both;
}

html.nav-ready .SideMenu .nav-item:nth-child(1) { animation-delay: 0.02s; }
html.nav-ready .SideMenu .nav-item:nth-child(2) { animation-delay: 0.05s; }
html.nav-ready .SideMenu .nav-item:nth-child(3) { animation-delay: 0.08s; }
html.nav-ready .SideMenu .nav-item:nth-child(4) { animation-delay: 0.11s; }
html.nav-ready .SideMenu .nav-item:nth-child(5) { animation-delay: 0.14s; }
html.nav-ready .SideMenu .nav-item:nth-child(6) { animation-delay: 0.17s; }
html.nav-ready .SideMenu .nav-item:nth-child(7) { animation-delay: 0.20s; }
html.nav-ready .SideMenu .nav-item:nth-child(8) { animation-delay: 0.23s; }
html.nav-ready .SideMenu .nav-item:nth-child(9) { animation-delay: 0.26s; }
html.nav-ready .SideMenu .nav-item:nth-child(10) { animation-delay: 0.29s; }
html.nav-ready .SideFoot .nav-item:nth-child(1) { animation-delay: 0.32s; }
html.nav-ready .SideFoot .nav-item:nth-child(2) { animation-delay: 0.35s; }
html.nav-ready .SideFoot .nav-item:nth-child(3) { animation-delay: 0.38s; }

html.nav-ready .shift-pill,
html.nav-ready .AlertBellBtn {
	animation: navitemin 0.28s ease both;
}

@keyframes navitemin {
	from {
		opacity: 0;
		visibility: hidden;
		transform: translateX(-10px);
	}
	to {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}
.SideFoot { padding: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.side-ver { padding: 0 4px; font-size: 11px; color: rgba(255,255,255,.38); letter-spacing: .04em; }
.MainCol { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; overflow-x: hidden; }
.TopBar {
	height: calc(var(--topbar-h) + var(--safe-top));
	min-height: calc(var(--topbar-h) + var(--safe-top));
	background: var(--surface);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: var(--safe-top) max(16px, var(--safe-right)) 0 max(16px, var(--safe-left));
	border-bottom: 1px solid var(--border);
	flex: none;
}
.TopBar h1 { font-size: 18px; font-weight: 700; min-width: 0; }
.page-ctx { font-size: 12px; color: var(--ink-3); }
.TopTools { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.ThemeToggle {
	flex: none;
	width: 52px;
	height: 30px;
	padding: 0;
	border-radius: 999px;
	background: #E6E8F0;
	border: 1px solid var(--border);
	position: relative;
	box-shadow: inset 0 1px 2px rgba(46,50,71,.08);
}
.ThemeToggle:hover { border-color: var(--brand); }
.ThemeToggleKnob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	color: #E0A020;
	box-shadow: 0 2px 6px rgba(46,50,71,.18);
	display: grid;
	place-items: center;
	transition: transform .28s ease, background .28s ease, color .28s ease, box-shadow .28s ease;
}
.ThemeToggle .theme-moon { display: none; }
html.theme-dark .ThemeToggle {
	background: linear-gradient(135deg, #2A2458 0%, #1A1638 100%);
	border-color: #4A3F7A;
	box-shadow: inset 0 0 0 1px rgba(139,124,255,.22), 0 0 16px rgba(124,108,255,.22);
}
html.theme-dark .ThemeToggleKnob {
	transform: translateX(22px);
	background: #16122A;
	color: #E8D48A;
	box-shadow: 0 0 12px rgba(232,212,138,.35);
}
html.theme-dark .ThemeToggle .theme-sun { display: none; }
html.theme-dark .ThemeToggle .theme-moon { display: block; }
.shift-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ok-ink); background: var(--ok-tint); padding: 4px 10px; border-radius: var(--r-pill); }
.shift-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(140deg,#F58A6F,#E96A4E); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12px; }
.ModulesArea {
	flex: 1;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	overflow-x: hidden;
	padding: 20px 22px calc(16px + var(--safe-bottom));
	display: flex;
	flex-direction: column;
	touch-action: pan-y;
}
.ModuleRoot { display: none; }
.ModuleRoot.ModuleOn { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; overflow: hidden; overflow-x: hidden; }
.ListScroll {
	flex: 1;
	min-height: 0;
	min-width: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior-x: none;
	overscroll-behavior-y: contain;
	touch-action: pan-y;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--ink-3) var(--surface-sunk);
}
.ListScroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ListScroll::-webkit-scrollbar-track { background: var(--surface-sunk); border-radius: 999px; }
.ListScroll::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 999px; }
.ListScroll::-webkit-scrollbar-thumb:hover { background: var(--ink-2); }
.nav-toggle { display: none; }

.ModHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ModHead h2 { font-size: 22px; }
.ModHead p { color: var(--ink-3); font-size: 13px; margin-top: 4px; }
.ModToolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; flex: none; }
.ModHead { flex: none; }
.ModToolbar input, .ModToolbar select { height: 36px; border: 1px solid var(--border); border-radius: 10px; padding: 0 10px; background: var(--surface); color: var(--ink); }
.ModToolbar select { min-width: 140px; max-width: 200px; }
.ModToolbar .ContactSearch { flex: 1; min-width: 160px; }
.ViewSwitch { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-left: auto; }
.ViewSwitch .view-btn { height: 36px; padding: 0 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.ViewSwitch .view-btn.on { background: var(--brand-strong); color: #fff; }
.TimeRange { background: var(--brand-tint); color: var(--brand-strong); padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.metric { background: var(--surface); border-radius: 16px; box-shadow: var(--sh-card); padding: 16px 18px; }
.metric .lbl { font-size: 11px; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; }
.metric .num { font-size: 32px; font-weight: 700; line-height: 1.15; margin: 6px 0 4px; }
.metric .num.ok { color: var(--ok); }
.metric .num.risk { color: var(--risk); }
.metric .num.brand { color: var(--brand); }
.metric .sub { font-size: 12px; color: var(--ink-3); }

.report-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.report-table th { text-align: left; background: var(--surface-sunk); color: var(--ink-3); font-size: 11px; letter-spacing: .04em; padding: 8px 8px; font-weight: 600; }
.report-table td { padding: 8px; border-bottom: 1px solid var(--border); }
.report-table tr.DayDivider td { border-top: 2px solid var(--brand-tint); }
.report-table tr.ExtendedDay td { background: var(--extended-tint); }
.report-table tr.ReportItemSelectd td { background: var(--brand-tint); }
.ListArea .ListItem { display: grid; grid-template-columns: 40px 1fr 1fr 1fr 90px 80px 90px 80px 70px 90px 80px 60px 70px; gap: 4px; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: 12px; align-items: center; }
.ListArea .ListItem.DayDivider { border-top: 2px solid #ddd; }
.ListArea .ListItem.ExtendedDay { background: var(--extended-tint); }
.ListArea .ListItem.ReportItemSelectd { background: var(--brand-tint); }
.ListHeaders { display: grid; grid-template-columns: 40px 1fr 1fr 1fr 90px 80px 90px 80px 70px 90px 80px 60px 70px; gap: 4px; padding: 8px 6px; background: var(--surface-sunk); font-size: 11px; color: var(--ink-3); font-weight: 600; }
.ListField[fieldname="code"] { letter-spacing: .1em; }
.ReportPanel .ListHeaders { flex: none; }
.ReportPanel .ListArea { background: var(--surface); border-radius: 12px; }

.EditItemBox, .FromToBox, .ContactPickBox, .ChangeStationStatusBox, .ContactDrawer, .PasswordBox {
	display: none; background: var(--surface); border-radius: 16px; box-shadow: 0 18px 50px rgba(46,50,71,.18); padding: 16px 18px;
}
.EditItemBox.EditItemBoxShow, .FromToBox.FromToBoxShow, .ContactPickBox.FromToBoxShow, .StatementBox.StatementBoxShow,
.ChangeStationStatusBox.ChangeStationStatusBoxShow, .ContactDrawer.open, .PasswordBox.open { display: block; }
.overlay-scrim { display: none; position: fixed; inset: 0; background: rgba(20,16,40,.35); z-index: 40; }
.overlay-scrim.on { display: block; }
.ContactPickBtn {
	max-width: 220px;
	overflow: hidden;
}
.ContactPickLabel {
	display: inline-block;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.overlay-card.ContactPickBox {
	display: none;
	width: min(520px, calc(100% - 28px));
	max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
	min-height: min(420px, calc(100dvh - 80px));
	overflow: hidden;
	flex-direction: column;
	padding: 16px 18px;
}
.overlay-card.ContactPickBox.FromToBoxShow {
	display: flex;
}
.ContactPickBox .EditItemHead { flex: none; }
.ContactPickLenses {
	flex: none;
	flex-wrap: nowrap;
	width: 100%;
	margin-bottom: 10px;
}
.ContactPickLenses .status-filter {
	height: 30px;
	padding: 0 7px;
	font-size: 11px;
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
}
.ContactPickLenses .cp-ico { display: none; }
.ContactPickLenses .cp-txt {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ContactPickSearchRow {
	flex: none;
	margin-bottom: 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ContactPickCount {
	font-size: 12px;
	font-weight: 600;
	color: var(--ink-3);
}
.ContactPickSearchWrap {
	position: relative;
	width: 100%;
}
.ContactPickSearch {
	width: 100%;
	height: 38px;
	padding: 0 34px 0 10px;
	border: 1px solid var(--border);
	border-radius: 10px;
	background: var(--surface-sunk);
	color: var(--ink);
}
.ContactPickSearchClear {
	display: none;
	position: absolute;
	top: 50%;
	right: 4px;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	padding: 0;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--ink-3);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.ContactPickSearchClear.on { display: inline-flex; }
.ContactPickSearchClear:hover { background: var(--surface-hover); color: var(--ink); }
.ContactPickList {
	flex: 1;
	min-height: 180px;
	overflow-y: auto;
}
.contact-pick-row {
	padding: 10px 8px;
	border-bottom: 1px solid var(--border);
	cursor: pointer;
}
.contact-pick-row strong { display: block; font-size: 14px; }
.contact-pick-row span { display: block; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.contact-pick-row:hover { background: var(--brand-tint); }
@media (max-width: 720px) {
	.ContactPickLenses .status-filter {
		height: 40px;
		padding: 0;
	}
	.ContactPickLenses .cp-txt { display: none; }
	.ContactPickLenses .cp-ico {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
}

.ChartPlot {
	flex: 1;
	min-height: 160px;
	display: flex;
	align-items: stretch;
	gap: 6px;
}
.ChartScale {
	flex: none;
	min-width: 28px;
	max-width: 72px;
	display: flex;
	flex-direction: column;
}
.ChartScaleUnit {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
	margin-bottom: 4px;
	line-height: 1.1;
}
.ChartTicks {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	font-size: 9px;
	color: var(--ink-3);
	line-height: 1;
}
.ChartBars {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	align-items: flex-end;
	gap: 3px;
}
.ChartAxis {
	display: flex;
	justify-content: space-between;
	margin: 4px 0 0 34px;
	font-size: 9px;
	color: var(--ink-3);
}
.ChartCaption {
	margin-top: 6px;
	font-size: 10px;
	font-weight: 600;
	color: var(--ink-3);
	letter-spacing: .02em;
}

.overlay-card {
	position: fixed;
	z-index: 41;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: min(720px, calc(100% - 32px));
	max-height: calc(100dvh - 40px - var(--safe-top) - var(--safe-bottom));
	overflow: auto;
	overscroll-behavior-x: none;
}

.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; align-content: start; }
.contact-card { background: var(--surface); border-radius: 16px; box-shadow: var(--sh-card); padding: 16px; cursor: pointer; }
.contact-card.ContactInactive { opacity: .5; }
.contact-card h3 { font-size: 15px; }
.contact-card .dept { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; }
.contact-card .meta { font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.contact-list { background: var(--surface); border-radius: 12px; min-height: 100%; }
.contact-list-head, .contact-row {
	display: grid;
	grid-template-columns: 64px 1fr 1fr 0.9fr 0.9fr minmax(168px, 1.5fr) 1.1fr 64px 36px 44px;
	gap: 8px;
	padding: 10px 14px;
	align-items: center;
}
.contact-list-head {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--surface-sunk);
	color: var(--ink-3);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
}
.contact-row { border-bottom: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.contact-row:hover { background: var(--brand-tint); }
.contact-row.ContactInactive { opacity: .5; }
.contact-row .dept { color: var(--ink-2); }

.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-content: start; }
.station-card { background: var(--surface); border-radius: 16px; box-shadow: var(--sh-card); padding: 16px; position: relative; }
.station-card .st-name { font-weight: 700; }
.station-card .st-loc { color: var(--ink-3); font-size: 13px; }
.station-card .st-status { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: capitalize; }
.AuthorizedStatus .st-status { background: var(--ok-tint); color: var(--ok-ink); }
.RequestStatus .st-status, .PendingdStatus .st-status { background: var(--warn-tint); color: var(--warn-ink); }
.BlockStatus .st-status, .UnauthorizedStatus .st-status { background: var(--risk-tint); color: var(--risk-ink); }
.DeleteItemBtn, .ChangeStatusBtn { display: none; }
.EditStationsMode .DeleteItemBtn, .EditStationsMode .ChangeStatusBtn { display: inline-flex; margin-top: 10px; margin-right: 6px; }
.DeleteItemBtn { background: var(--risk); color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.ChangeStatusBtn { background: var(--brand-strong); color: #fff; border-radius: 8px; padding: 4px 10px; font-size: 12px; }
.NoStationMessage { background: var(--surface); border-radius: 16px; padding: 24px; line-height: 1.55; color: var(--ink-2); }
.NoStationMessage span { display: block; margin: 10px 0 4px; font-weight: 700; color: var(--ink); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.FormElement label { display: block; font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 4px; }
.Frame { background: var(--surface); border-radius: 16px; box-shadow: var(--sh-card); padding: 16px 18px; margin-bottom: 12px; }
.FrameTitle { font-weight: 700; margin-bottom: 10px; }

.PwaUpdateBar {
	display: none;
	position: fixed;
	top: var(--safe-top);
	left: 0;
	right: 0;
	height: 4px;
	z-index: 90;
	pointer-events: none;
	overflow: hidden;
	background: rgba(42, 18, 88, 0.18);
}
.PwaUpdateBar.on { display: block; }
.PwaUpdateBarSweep {
	position: absolute;
	top: 0;
	left: 0;
	width: 28%;
	height: 100%;
	background: linear-gradient(90deg,
		rgba(116, 220, 236, 0) 0%,
		rgba(116, 220, 236, 0.9) 32%,
		#4E46E8 50%,
		rgba(167, 139, 250, 0.9) 68%,
		rgba(167, 139, 250, 0) 100%);
	box-shadow: 0 0 14px 3px rgba(78, 70, 232, 0.55);
	animation: pwaupdatekitt 0.85s ease-in-out infinite alternate;
}
@keyframes pwaupdatekitt {
	from { transform: translateX(-8%); }
	to { transform: translateX(265%); }
}

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: #2E3247; color: #fff; padding: 10px 16px; border-radius: 10px; opacity: 0; pointer-events: none; z-index: 80; }
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.PwaUpdateToast {
	position: fixed;
	left: 50%;
	bottom: calc(16px + var(--safe-bottom));
	transform: translateX(-50%) translateY(120%);
	width: min(420px, calc(100% - 28px));
	background: #2E3247;
	color: #fff;
	padding: 14px 16px 14px 16px;
	border-radius: 14px;
	box-shadow: 0 10px 28px rgba(20, 16, 40, .28);
	z-index: 85;
	opacity: 0;
	pointer-events: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	transition: transform .28s ease, opacity .28s ease;
}
.PwaUpdateToast.on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	pointer-events: auto;
}
.PwaUpdateToastMsg { flex: 1; min-width: 140px; font-size: 14px; font-weight: 600; line-height: 1.35; padding-right: 22px; }
.PwaUpdateToastClose {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.AppLoading, .AppAlert { display: none; position: fixed; inset: 0; z-index: 70; align-items: center; justify-content: center; background: rgba(20,16,40,.28); }
.AppLoading.open, .AppAlert.open { display: flex; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--brand-tint); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.AreaLoading { position: relative; }
.AreaLoadingMask {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--surface) 62%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
	border-radius: inherit;
}
.AreaLoadingSpin {
	width: 22px;
	height: 22px;
	border: 2px solid var(--brand-tint);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}
.metric.AreaLoading { min-height: 92px; }
#ContactPickList.AreaLoading { min-height: 140px; }
.AlertBox { background: var(--surface); border-radius: 16px; padding: 20px; width: min(420px, calc(100% - 32px)); color: var(--ink); }
.AlertTitle { font-weight: 700; margin-bottom: 8px; }
.AlertBody { line-height: 1.45; color: var(--ink-2); }

.StatementFooter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 12px; background: var(--surface); border-radius: 12px; padding: 10px 14px; flex: none; }
.ShowStatementBtn { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-strong); color: #fff; font-weight: 700; display: grid; place-items: center; }

@media print {
	.SideNav, .TopBar, .ModToolbar, .ModHead, .ShowStatementBtn, .btn { display: none !important; }
	.AppShell { display: block; }
	.ModulesArea { overflow: visible; }
}

@media (max-width: 900px) {
	.AppShell { grid-template-columns: 1fr; }
	.SideNav {
		position: fixed;
		inset: 0 auto 0 0;
		width: min(266px, calc(100% - 40px));
		transform: translateX(-105%);
		z-index: 30;
		padding-top: var(--safe-top);
		padding-bottom: var(--safe-bottom);
		padding-left: var(--safe-left);
	}
	.nav-open .SideNav { transform: none; }
	body.nav-open { overflow: hidden; }
	body.nav-open #navScrim { display: block; z-index: 25; }
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		flex: none;
	}
	.nav-close { display: inline-flex; }
	.nav-dock { display: none !important; }
	.AppShell.nav-collapsed { grid-template-columns: 1fr; }
	.SideMenu { padding: 12px 12px 20px; }
	.SideNav .nav-item {
		min-height: 48px;
		padding: 12px 14px;
		font-size: 16px;
		margin-bottom: 6px;
		gap: 12px;
		border-radius: 11px;
	}
	.SideFoot { padding: 12px; }
	.SideNav .nav-ico svg { width: 20px; height: 20px; }
	.TopBar {
		gap: 8px;
		padding-left: max(12px, var(--safe-left));
		padding-right: max(12px, var(--safe-right));
	}
	.TopBar > div:nth-of-type(1) { min-width: 0; flex: 1; }
	.TopBar h1 {
		font-size: 16px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.page-ctx { display: none; }
	.shift-pill span:last-child { display: none; }
	.TopTools { gap: 8px; }
	.ThemeToggle { width: 46px; height: 28px; }
	.ThemeToggleKnob { width: 20px; height: 20px; }
	html.theme-dark .ThemeToggleKnob { transform: translateX(18px); }
	.ModulesArea { padding: 14px 12px calc(12px + var(--safe-bottom)); }
	.ModHead { flex-wrap: wrap; gap: 10px; }
	.ModToolbar { min-width: 0; }
	.metric-grid { grid-template-columns: 1fr 1fr; }
	.form-grid { grid-template-columns: 1fr; }
	.login-card { padding: 28px 20px 20px; }
	input, select, textarea { font-size: 16px; }
	.contact-list-head,
	.contact-row {
		grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1fr) auto 36px 44px;
	}
	.contact-list-head > :nth-child(4),
	.contact-list-head > :nth-child(5),
	.contact-list-head > :nth-child(7),
	.contact-list-head > :nth-child(8),
	.contact-row > :nth-child(4),
	.contact-row > :nth-child(5),
	.contact-row > :nth-child(7),
	.contact-row > :nth-child(8) {
		display: none;
	}
	.contact-list-head > :nth-child(6) { display: none; }
	.contact-list-head > :nth-child(9),
	.contact-list-head > :nth-child(10),
	.contact-row > :nth-child(6),
	.contact-row > :nth-child(9),
	.contact-row > :nth-child(10) {
		display: flex;
	}
	.toast { bottom: calc(16px + var(--safe-bottom)); }
	.sticky-panel {
		width: 100vw;
	}
	.sticky-panel-head {
		padding-top: calc(12px + var(--safe-top));
		padding-left: max(16px, var(--safe-left));
		padding-right: max(16px, var(--safe-right));
	}
	.sticky-panel-foot {
		padding-bottom: calc(14px + var(--safe-bottom));
		padding-left: max(16px, var(--safe-left));
		padding-right: max(16px, var(--safe-right));
	}
	.sticky-panel-x {
		width: 40px;
		height: 40px;
	}
}

.sticky-scrim {
	position: fixed;
	inset: 0;
	background: rgba(44, 42, 74, .32);
	z-index: 72;
	display: none;
}
.sticky-scrim.open { display: block; }
.sticky-panel {
	position: fixed;
	top: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	width: min(400px, 100vw);
	background: #FFFDF6;
	z-index: 82;
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 40px rgba(40, 36, 90, .18);
	transform: translateX(105%);
	transition: transform .22s ease;
	border-left: 1px solid #F0E6C8;
}
.sticky-panel.open { transform: translateX(0); }
.sticky-panel-head {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #F0E6C8;
	background: #FFF9E8;
}
.sticky-panel-head h3 { margin: 0; font-size: 16px; font-weight: 600; color: #5C4A1F; }
.sticky-panel-x {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #5C4A1F;
}
.sticky-panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; }
.sticky-panel .sn-desc-wrap { margin-top: 0; width: 100%; }
.sticky-panel #sn_desc,
.sticky-panel .sn-desc-tall {
	height: 144px;
	min-height: 144px;
	resize: vertical;
}
.sticky-panel-foot {
	flex: none;
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	padding: 14px 18px;
	border-top: 1px solid #F0E6C8;
	background: #FFF9E8;
}
.sticky-note-btn {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #C9B36A;
	background: #FFF8E0;
	border: 1px solid #F0E6C8;
	flex: none;
}
.sticky-note-btn:hover { color: #A88A2E; background: #FFF1C4; }
.sticky-note-btn.has-notes {
	color: #C9A227;
	background: #FFF3B0;
	border-color: #E8D070;
}
.sticky-note-btn.has-notes .sticky-page { fill: #FFE34D; }
.sticky-note-btn.has-notes .sticky-fold { fill: #F5C400; }
.sticky-note-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 14px;
	height: 14px;
	padding: 0 3px;
	border-radius: 8px;
	background: #C9A227;
	color: #fff;
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	line-height: 14px;
	text-align: center;
	pointer-events: none;
}
.sticky-card-mini {
	background: #FFF7C2;
	border: 1px solid #F0E08A;
	border-radius: 10px;
	padding: 12px 14px;
	margin-bottom: 10px;
	cursor: pointer;
}
.sticky-card-mini:hover { background: #FFF3A8; }
.sticky-card-mini-body {
	font-weight: 400;
	font-size: 13px;
	color: #4A3B12;
	line-height: 1.45;
	max-height: 5.8em;
	overflow: hidden;
	white-space: pre-wrap;
}
.sticky-card-mini-meta { margin-top: 8px; font-size: 11px; color: #9A8650; }

html.theme-dark .sticky-scrim { background: rgba(8, 6, 16, .58); }
html.theme-dark .sticky-panel {
	background: #1A1626;
	border-left-color: #3A3420;
	box-shadow: -16px 0 40px rgba(0, 0, 0, .45);
}
html.theme-dark .sticky-panel-head,
html.theme-dark .sticky-panel-foot {
	background: #221C14;
	border-color: #3A3420;
}
html.theme-dark .sticky-panel-head h3,
html.theme-dark .sticky-panel-x { color: #E8D48A; }
html.theme-dark .sticky-panel-x:hover { background: rgba(232, 212, 138, .12); }
html.theme-dark .sticky-panel #sn_desc,
html.theme-dark .sticky-panel .sn-desc-tall,
html.theme-dark .sticky-panel input[type="date"] {
	background: #141224;
	color: #F2EEFA;
	border-color: #3A3420;
}
html.theme-dark .sticky-card-mini {
	background: #2A2416;
	border-color: #5C4A28;
}
html.theme-dark .sticky-card-mini:hover { background: #342C1A; }
html.theme-dark .sticky-card-mini-body { color: #F0E6C8; }
html.theme-dark .sticky-card-mini-meta { color: #B8A56A; }
.contact-card-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.contact-notecell {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.TopStickyBtn { color: #E4D29A; }
.TopStickyBtn.has-notes { color: #E0B000; }

html.theme-dark .AppLoading,
html.theme-dark .AppAlert { background: rgba(8,6,16,.55); }
html.theme-dark .user-card,
html.theme-dark .pr-card,
html.theme-dark .PayRunsModule .PayRunContactSelect,
html.theme-dark .PayRunRangeRow input[type="date"],
html.theme-dark .NoStationHow,
html.theme-dark .ReportListCard {
	background: var(--surface);
	color: var(--ink);
	border-color: var(--border);
}
html.theme-dark .ReportListCard {
	border-color: var(--border);
	box-shadow: var(--sh-card);
}
html.theme-dark .OpAlert.kind-tables { color: var(--risk-ink); }
html.theme-dark .OpAlert { color: var(--warn-ink); }
html.theme-dark .AppUpdateFrame { background: #3A1C18; }
html.theme-dark .login-hint { color: var(--ink-3); }

@media print {
	html.theme-dark {
		color-scheme: light;
		--app-bg: #fff;
		--surface: #fff;
		--ink: #2E3247;
	}
	.InstallInviteToast,
	.InstallInviteScrim,
	.InstallInviteGuide {
		display: none !important;
	}
}

.InstallInviteToast {
	position: fixed;
	top: calc(16px + var(--safe-top));
	right: 16px;
	width: min(360px, calc(100vw - 28px));
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(42, 18, 88, 0.18);
	z-index: 86;
	padding: 16px 16px 14px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-12px);
	transition: transform 0.28s ease, opacity 0.28s ease;
}
.InstallInviteToast.on {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.InstallInviteClose {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 50%;
	background: rgba(42, 18, 88, 0.08);
	color: var(--ink-2);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.InstallInviteClose:hover {
	background: rgba(42, 18, 88, 0.14);
	color: var(--ink);
}
.InstallInviteKicker {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--brand);
	margin-bottom: 4px;
	padding-right: 28px;
}
.InstallInviteTitle {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 6px;
	padding-right: 28px;
}
.InstallInviteBody {
	font-size: 13px;
	line-height: 1.45;
	color: var(--ink-2);
	margin-bottom: 12px;
}
.InstallInviteToast .b-pri {
	width: 100%;
	justify-content: center;
}
.InstallInviteScrim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(16, 12, 32, 0.48);
	z-index: 94;
}
.InstallInviteScrim.on {
	display: block;
}
.InstallInviteGuide {
	display: none;
	position: fixed;
	z-index: 95;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: min(520px, calc(100vw - 24px));
	max-height: calc(100vh - 32px);
	overflow: auto;
	background: var(--surface);
	color: var(--ink);
	border-radius: 18px;
	box-shadow: 0 24px 56px rgba(16, 10, 40, 0.28);
	padding: 18px 18px 16px;
}
.InstallInviteGuide.on {
	display: block;
}
.InstallInviteGuideHead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.InstallInviteGuideHead h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}
.InstallInviteWhere {
	font-size: 12px;
	font-weight: 600;
	color: var(--brand);
	margin-bottom: 14px;
}
.InstallInviteStep {
	display: grid;
	grid-template-columns: 28px 1fr;
	gap: 10px;
	margin-bottom: 14px;
}
.InstallInviteNum {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--brand-tint);
	color: var(--brand-strong);
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.InstallInviteStep p {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.4;
}
.IgBrowser,
.IgPhone {
	border: 1px solid var(--border);
	border-radius: 10px;
	background: #F3F1FA;
	overflow: hidden;
}
.IgChrome {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 8px;
	background: #E6E2F2;
}
.IgDotsWin {
	display: flex;
	gap: 3px;
}
.IgDotsWin i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #C8C0D8;
}
.IgUrl {
	flex: 1;
	height: 22px;
	border-radius: 6px;
	background: #fff;
	border: 1px solid #D7D1E6;
	font-size: 10px;
	color: #6B6480;
	display: flex;
	align-items: center;
	padding: 0 8px;
}
.IgHit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 6px;
	border-radius: 6px;
	background: #4E46E8;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	box-shadow: 0 0 0 3px rgba(78, 70, 232, 0.28);
	animation: ighitpulse 1.1s ease-in-out infinite;
}
.IgMenu {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: #2E3247;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.IgHit.IgMenu {
	background: #4E46E8;
}
.IgPage {
	height: 36px;
	background: linear-gradient(180deg, #fff, #F6F4FC);
}
.IgPhone {
	width: 168px;
	margin: 0 auto;
	border-radius: 18px;
	padding: 8px 8px 10px;
	background: #2A1258;
}
.IgPhoneCap {
	width: 48px;
	height: 5px;
	border-radius: 3px;
	background: #5B3FD4;
	margin: 0 auto 8px;
}
.IgPhoneScreen {
	background: #EEF0F5;
	border-radius: 10px;
	min-height: 88px;
	padding: 8px;
}
.IgPhoneBar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}
.IgShare {
	width: 26px;
	height: 26px;
	border-radius: 7px;
}
.IgSheet {
	background: #fff;
	border-radius: 8px;
	padding: 6px 8px;
	font-size: 11px;
	font-weight: 600;
	color: #2E3247;
}
.IgSheet .IgHit {
	margin-left: 6px;
	height: 18px;
	font-size: 10px;
}
.IgFileMenu {
	background: #fff;
	border: 1px solid #D7D1E6;
	border-radius: 8px;
	padding: 6px 0;
	width: 180px;
	font-size: 11px;
	color: #2E3247;
}
.IgFileMenu div {
	padding: 5px 10px;
}
.IgFileMenu .IgPick {
	background: rgba(78, 70, 232, 0.16);
	color: #3E3384;
	font-weight: 700;
}
@keyframes ighitpulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(78, 70, 232, 0.22); }
	50% { box-shadow: 0 0 0 6px rgba(78, 70, 232, 0.08); }
}
html.theme-dark .InstallInviteToast,
html.theme-dark .InstallInviteGuide {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}
html.theme-dark .InstallInviteClose {
	background: rgba(255, 255, 255, 0.08);
	color: var(--ink-2);
}
html.theme-dark .IgBrowser,
html.theme-dark .IgPhoneScreen {
	background: #1A1628;
}
html.theme-dark .IgChrome {
	background: #241E36;
}
html.theme-dark .IgUrl {
	background: #141224;
	border-color: #3A3450;
	color: #B8B0C8;
}
html.theme-dark .IgPage {
	background: linear-gradient(180deg, #1C1830, #161226);
}
html.theme-dark .IgSheet,
html.theme-dark .IgFileMenu {
	background: #241E36;
	color: #F2EEFA;
	border-color: #3A3450;
}