:root {
  color-scheme: light;
  --ink: #0f172a;
  --ink-soft: #334155;
  --muted: #78889a;
  --muted-light: #9aa8b8;
  --line: #e8eef1;
  --line-dark: #dce7eb;
  --paper: #ffffff;
  --wash: #f5fafb;
  --aqua: #06b6d4;
  --sky: #0ea5e9;
  --aqua-dark: #078ca4;
  --mint: #28b997;
  --mint-wash: #e8faf5;
  --amber: #e8a634;
  --amber-wash: #fff7e8;
  --coral: #e77868;
  --coral-wash: #fff0ed;
  --shadow: 0 16px 45px rgba(34, 73, 89, .065);
  --shadow-soft: 0 5px 18px rgba(34, 73, 89, .055);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  min-width: 320px;
  margin: 0;
  background: #f5fafb;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(6, 182, 212, .24); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.is-hidden { display: none !important; }
.app-frame { min-height: 100vh; background: radial-gradient(ellipse at 75% 0%, rgba(210, 247, 248, .42), transparent 40%), #f5fafb; }

.topbar { height: 72px; position: sticky; z-index: 20; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; border-bottom: 1px solid #07506e; background: linear-gradient(105deg, #0d607d 0%, #094e70 58%, #083f63 100%); color: #f2fbff; backdrop-filter: blur(18px); }
.topbar-brand, .topbar-right, .brand, .profile-button { display: flex; align-items: center; }
.topbar-brand { gap: 18px; }
.brand { gap: 9px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; display: grid; overflow: hidden; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 11px; background: #fff; box-shadow: 0 5px 12px rgba(6, 182, 212, .16); }
.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-word { font: 800 20px/1 "Manrope", sans-serif; letter-spacing: 0; }
.brand-word span { color: var(--aqua-dark); }
.topbar .brand-word { color: #f3fbff; }
.topbar .brand-word span { color: #8ce9df; }
.topbar .brand-caption { color: #b6d6e0; }
.topbar .brand-divider { background: rgba(226, 245, 250, .28); }
.brand-divider { height: 23px; width: 1px; background: var(--line-dark); }
.brand-caption, .eyebrow, .panel-kicker, .nav-label, .score-label { font-size: 9px; letter-spacing: 1.15px; font-weight: 700; }
.brand-caption { color: #8a9ba8; }
.topbar-right { gap: 23px; }
.online-indicator { display: inline-flex; gap: 7px; align-items: center; color: #d0e7eb; font-size: 11px; white-space: nowrap; }
.online-indicator span, .camera-live i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: #31c59b; box-shadow: 0 0 0 3px rgba(49, 197, 155, .12); }
.icon-button { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #667887; cursor: pointer; transition: .2s ease; }
.icon-button:hover { color: var(--aqua-dark); border-color: #b6e6e9; transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.topbar .icon-button { border-color: rgba(226, 245, 250, .22); background: rgba(255,255,255,.1); color: #e4f4f7; }
.topbar .icon-button:hover { border-color: rgba(226, 245, 250, .45); background: rgba(255,255,255,.18); color: #fff; box-shadow: 0 5px 14px rgba(2, 33, 48, .16); }
.notification-dot { position: absolute; width: 7px; height: 7px; top: 7px; right: 7px; border: 1.5px solid white; border-radius: 50%; background: #ef8874; }
.profile-button { gap: 9px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.avatar { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; overflow: hidden; border-radius: 50%; color: #0b7f91; background: linear-gradient(140deg, #d6f6f3, #bcebf0); font: 800 10px "Manrope", sans-serif; }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.avatar img[hidden] { display: none; }
.avatar-admin { color: #fff; background: linear-gradient(145deg, #102d3a, #3b6974); }
.profile-copy, .sidebar-user > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.profile-copy strong, .sidebar-user strong { font-size: 11px; font-weight: 700; }
.profile-copy small, .sidebar-user small { color: #8494a2; font-size: 10px; }
.logout-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid rgba(226, 245, 250, .24); border-radius: 9px; color: #e8f7fa; background: rgba(255, 255, 255, .06); font-size: 10px; font-weight: 700; text-decoration: none; transition: background .2s ease, border-color .2s ease; }
.logout-button:hover { border-color: rgba(226, 245, 250, .45); background: rgba(255, 255, 255, .13); }
.logout-button:focus-visible { outline: 2px solid #a8e7ea; outline-offset: 3px; }
.settings-button { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 1px solid rgba(226, 245, 250, .24); border-radius: 9px; color: #e8f7fa; background: rgba(255, 255, 255, .06); font-size: 10px; font-weight: 700; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.settings-button:hover { border-color: rgba(226, 245, 250, .45); background: rgba(255, 255, 255, .13); }
.settings-button:focus-visible { outline: 2px solid #a8e7ea; outline-offset: 3px; }
.topbar .profile-copy strong { color: #f3fbff; }
.topbar .profile-copy small { color: #b6d3dd; }
.profile-chevron { color: #c1dbe3; font-size: 9px; margin-left: 2px; }
.topbar .profile-button .avatar-admin { color: #0b6079; background: linear-gradient(145deg, #e3faf4, #bcebf0); }
.mobile-menu-button { display: none; }

.workspace { display: grid; grid-template-columns: 238px minmax(0, 1fr); min-height: calc(100vh - 72px); }
.sidebar { position: sticky; top: 72px; display: flex; flex-direction: column; height: calc(100vh - 72px); padding: 22px 14px 14px; border-right: 1px solid #07506e; background: linear-gradient(180deg, #0d607d 0%, #094e70 54%, #083f63 100%); }
.workspace-select { display: flex; align-items: center; gap: 10px; min-height: 55px; margin: 0 4px 27px; padding: 8px; border: 1px solid rgba(224, 249, 255, .18); border-radius: 13px; background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.workspace-icon { width: 31px; height: 31px; display: grid; place-items: center; color: #087c91; background: #d7f6f2; border-radius: 9px; }
.workspace-select > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }
.workspace-select strong { overflow: hidden; color: #f3fbff; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.workspace-select small { color: #b6d6e0; font-size: 9px; }
.workspace-chevron { color: #b0d1db; font-size: 9px; }
.nav-group { margin: 0 0 22px; }
.nav-label { display: block; padding: 0 11px; margin-bottom: 10px; color: #a8d0dc; font-size: 8px; letter-spacing: 1.2px; }
.nav-link { position: relative; display: flex; width: 100%; align-items: center; gap: 12px; min-height: 41px; margin: 3px 0; padding: 0 11px; border: 0; border-radius: 10px; background: transparent; color: #d1e6ec; font-size: 11px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; transition: background .22s ease, color .22s ease, transform .22s ease; }
.nav-link > i { width: 15px; color: #a9d0dc; text-align: center; font-size: 13px; }
.nav-link:hover { transform: translateX(2px); background: rgba(255,255,255,.1); color: #fff; }
.nav-link.is-current { color: #087d91; background: linear-gradient(100deg, #f5ffff, #dff8f5); font-weight: 700; }
.nav-link.is-current > i { color: #0aa0b1; }
.nav-link.is-current::before { position: absolute; top: 9px; bottom: 9px; left: -14px; width: 3px; border-radius: 0 4px 4px 0; background: #71e1d5; content: ""; }
.nav-count { margin-left: auto; min-width: 21px; padding: 3px 5px; border-radius: 7px; background: rgba(237, 250, 255, .13); color: #def1f6; font-size: 9px; text-align: center; }
.nav-count-accent { background: #fff0e9; color: #dc8357; }
.sidebar-bottom { margin-top: auto; }
.help-card { padding: 15px 13px 13px; border: 1px solid rgba(224, 249, 255, .18); border-radius: 13px; background: linear-gradient(145deg, rgba(255,255,255,.13), rgba(255,255,255,.07)); }
.help-icon { width: 28px; height: 28px; display: grid; place-items: center; margin-bottom: 11px; border-radius: 9px; background: rgba(226, 249, 249, .95); color: #087e91; box-shadow: 0 3px 8px rgba(4, 34, 50, .14); }
.help-card > strong { font-size: 11px; }
.help-card > strong { color: #f2fbff; }
.help-card p { margin: 6px 0 11px; color: #c1dbe3; font-size: 9px; line-height: 1.55; }
.help-card button { padding: 0; border: 0; background: none; color: #93eee2; font-size: 9px; font-weight: 700; cursor: pointer; }
.help-card button i { margin-left: 3px; font-size: 8px; }
.sidebar-user { display: flex; width: 100%; align-items: center; gap: 9px; margin-top: 15px; padding: 12px 4px 3px; border: 0; border-top: 1px solid rgba(226, 245, 250, .2); background: transparent; text-align: left; }
.sidebar-user > span:nth-child(2) { flex: 1; }
.sidebar-user strong { color: #f2fbff; }
.sidebar-user small { color: #b4d1dc; }
.sidebar-user > i { color: #c0dbe3; }
.sidebar-user .avatar-admin { color: #0b6079; background: linear-gradient(145deg, #e3faf4, #bcebf0); }
.sidebar-account-action { margin-top: 5px; }
.sidebar-logout { color: #ffe0db; }
.sidebar-logout > i { color: #ffc0b5; }
.sidebar-logout:hover { color: #fff; background: rgba(235, 105, 88, .18); }
.sidebar-scrim { display: none; }

.main-content { min-width: 0; padding: 32px clamp(22px, 3.2vw, 48px) 15px; }
.dashboard-view { width: 100%; max-width: 1540px; margin: 0 auto; animation: view-in .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 3px 0 25px; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; color: #8d9da8; font-size: 8px; letter-spacing: 1.3px; }
.eyebrow-line { display: inline-block; width: 18px; height: 1px; background: #6ecbc9; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Manrope", sans-serif; letter-spacing: 0; }
.page-heading h1 { margin-bottom: 6px; font-size: clamp(23px, 2.2vw, 29px); line-height: 1.25; font-weight: 800; }
.wave { display: inline-block; color: #e9af4c; font-size: .75em; transform: rotate(12deg); }
.page-heading p { margin-bottom: 0; color: #82919d; font-size: 11px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid transparent; border-radius: 10px; font-size: 10px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: transform .24s cubic-bezier(.2,.8,.2,1.25), box-shadow .24s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.98); }
.button-primary { color: white; background: linear-gradient(105deg, #08aebe, #0c9fd0); box-shadow: 0 5px 14px rgba(6, 164, 188, .2); }
.button-primary:hover { background: linear-gradient(105deg, #079bab, #078fc0); box-shadow: 0 8px 18px rgba(6, 164, 188, .28); }
.button-outline { border-color: #dce7eb; color: #58707d; background: #fff; }
.button-outline:hover { border-color: #9edce1; color: #078ca4; }
.button-soft { color: #0c8798; background: #e8f8f7; }
.button-soft:hover { background: #d8f3f1; }
.button-soft:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button-quiet { color: #70818e; background: transparent; }
.button-quiet:hover { background: #f1f6f7; }

.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin-bottom: 19px; }
.important-info { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid #f0dfb8; border-radius: 14px; background: linear-gradient(110deg, #fffaf0, #fff 75%); box-shadow: var(--shadow-soft); }
.important-info-icon { display: grid; width: 39px; height: 39px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #b27b21; background: #fff0cb; font-size: 15px; }
.important-info > div:nth-child(2) { flex: 1; min-width: 0; }
.important-info-kicker { color: #a57a34; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.important-info h2 { margin: 3px 0; color: #594c32; font: 800 12px/1.35 "Manrope", sans-serif; }
.important-info p { margin: 0; color: #81765f; font-size: 9px; line-height: 1.55; }
.important-info > .button { min-height: 34px; flex: 0 0 auto; padding: 0 10px; font-size: 9px; }
.employee-important-info { border-color: #f0dfb8; }
.stat-card { min-width: 0; padding: 16px 16px 14px; border: 1px solid rgba(228, 237, 239, .95); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-soft); transition: transform .25s cubic-bezier(.2,.8,.2,1.15), box-shadow .25s ease; animation: card-in .45s both; }
.stat-card:nth-child(2) { animation-delay: .04s; }.stat-card:nth-child(3) { animation-delay: .08s; }.stat-card:nth-child(4) { animation-delay: .12s; }.stat-card:nth-child(5) { animation-delay: .16s; }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(34, 73, 89, .09); }
.stat-total { background: linear-gradient(145deg, #fff, #f5fdfc); }
.stat-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7b8b98; font-size: 10px; font-weight: 600; }
.stat-icon { flex: 0 0 auto; width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #eaf8fb; color: #159eb9; font-size: 11px; }
.icon-mint { color: #2aab8f; background: #e9f9f4; }.icon-amber { color: #db9a2c; background: #fff6e5; }.icon-coral { color: #db7a68; background: #fff0ed; }.icon-slate { color: #708391; background: #f0f4f6; }
.stat-value { margin: 11px 0 8px; color: #132a3a; font: 800 25px/1 "Manrope", sans-serif; letter-spacing: 0; }
.stat-unit { color: #8797a2; font: 500 9px "DM Sans", sans-serif; }
.stat-foot { display: flex; align-items: center; gap: 5px; min-height: 13px; color: #84939e; font-size: 9px; white-space: nowrap; }
.stat-foot-dot { width: 5px; height: 5px; border-radius: 50%; background: #38b99a; }.dot-amber { background: #e8ad45; }.dot-coral { background: #e47d6d; }
.stat-note { overflow: hidden; text-overflow: ellipsis; }
.trend-up { color: #259f82; font-weight: 700; }.trend-up i { font-size: 8px; }
.admin-content-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(270px, .82fr); align-items: start; gap: 16px; }
.panel { min-width: 0; border: 1px solid rgba(225, 235, 238, .95); border-radius: var(--radius); background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.attendance-panel { overflow: hidden; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 19px 20px 14px; }
.panel-kicker { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; color: #98a7b0; font-size: 8px; letter-spacing: 1.1px; }
.panel-heading h2 { margin: 0 0 4px; color: #162e3e; font-size: 15px; line-height: 1.35; font-weight: 800; }
.panel-heading p { margin: 0; color: #8998a3; font-size: 10px; line-height: 1.55; }
.panel-more { width: 32px; height: 32px; border-color: #eef2f4; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 20px 13px; }
.select-wrap, .search-box { position: relative; display: flex; height: 34px; align-items: center; border: 1px solid #e4ecef; border-radius: 9px; background: #fff; color: #7e909d; }
.select-wrap { gap: 7px; padding: 0 10px; }
.select-wrap > i:first-of-type { font-size: 10px; }
.select-wrap select { max-width: 95px; appearance: none; padding: 0 15px 0 0; border: 0; outline: 0; background: transparent; color: #465e6a; font-size: 10px; font-weight: 600; cursor: pointer; }
.month-select select { max-width: 110px; }
.select-chevron { position: absolute; right: 8px; font-size: 8px; pointer-events: none; }
.search-box { flex: 1 1 135px; min-width: 115px; gap: 7px; padding: 0 9px; }
.search-box > i { color: #9eacb4; font-size: 10px; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink-soft); background: transparent; font-size: 10px; }
.search-box input::placeholder { color: #a5b0b8; }
.filter-button { display: flex; height: 34px; align-items: center; gap: 7px; padding: 0 10px; border: 1px solid #e4ecef; border-radius: 9px; background: #fff; color: #667987; font-size: 10px; font-weight: 600; cursor: pointer; transition: .2s ease; }
.filter-button:hover { border-color: #a9dfe2; color: #0b8fa1; }
.filter-button i { font-size: 10px; }
.table-scroll { width: 100%; overflow-x: auto; scrollbar-color: #d9e8e9 transparent; scrollbar-width: thin; }
.attendance-table, .personal-table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
.attendance-table th, .personal-table th { height: 35px; padding: 0 11px; border-top: 1px solid #edf2f3; border-bottom: 1px solid #edf2f3; background: #f9fbfc; color: #9aa7b0; font-size: 7px; font-weight: 700; letter-spacing: .75px; }
.attendance-table th:first-child, .attendance-table td:first-child, .personal-table th:first-child, .personal-table td:first-child { padding-left: 20px; }
.attendance-table th:last-child, .attendance-table td:last-child, .personal-table th:last-child, .personal-table td:last-child { padding-right: 20px; }
.attendance-table td, .personal-table td { height: 54px; padding: 7px 11px; border-bottom: 1px solid #f0f3f4; color: #617482; font-size: 9px; }
.attendance-table tbody tr { transition: background .18s ease; }
.attendance-table tbody tr:hover { background: #f8fcfc; }
.employee-cell { display: flex; align-items: center; gap: 8px; }
.employee-avatar { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; color: #286677; background: #e0f2ef; font: 800 9px "Manrope", sans-serif; }
.employee-avatar.avatar-2 { color: #a8664c; background: #f8eadd; }.employee-avatar.avatar-3 { color: #696795; background: #edebf8; }.employee-avatar.avatar-4 { color: #587d5e; background: #e9f3e7; }.employee-avatar.avatar-5 { color: #9d5a74; background: #f9e8ef; }.employee-avatar.avatar-6 { color: #3e7696; background: #e5f1f7; }
.employee-name { display: flex; flex-direction: column; gap: 3px; }
.employee-name strong { color: #304755; font-size: 9px; font-weight: 700; }
.employee-name small { color: #9ba8b0; font-size: 8px; }
.job-title { color: #607482; font-size: 9px; }
.status-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; border-radius: 6px; font-size: 8px; font-weight: 700; }
.status-badge::before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ""; }
.status-hadir { color: #249b7e; background: #e8f8f2; }.status-izin { color: #c58a27; background: #fff6e5; }.status-sakit { color: #cc7161; background: #fff0ec; }.status-pending { color: #b27b2c; background: #fff6e5; }.status-approved { color: #249b7e; background: #e8f8f2; }.status-rejected { color: #c16b5c; background: #fff0ec; }
.table-time { color: #48606e; font-weight: 600; }
.last-seen { display: flex; flex-direction: column; gap: 3px; }
.last-seen strong { color: #4b626e; font-size: 8px; font-weight: 600; }
.last-seen small { color: #9ba8b0; font-size: 8px; }
.table-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 14px; color: #92a0a9; font-size: 9px; }
.pagination { display: flex; align-items: center; gap: 3px; }
.pagination button { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #82929c; font-size: 9px; cursor: pointer; }
.pagination button:hover:not(:disabled), .pagination button.is-active { border-color: #ccebef; background: #edfbfa; color: #0b899c; }
.pagination button:disabled { color: #c4cdd2; cursor: not-allowed; }
.pagination span { padding: 0 2px; }
.empty-state { padding: 38px 15px; text-align: center; }
.empty-state > span { width: 34px; height: 34px; display: grid; place-items: center; margin: auto auto 10px; border-radius: 11px; background: #f1f8f8; color: #75bfc4; }
.empty-state strong { color: #415967; font-size: 11px; }.empty-state p { margin: 5px 0 0; color: #94a1aa; font-size: 9px; }

.requests-panel { overflow: hidden; }
.request-heading { align-items: center; padding-bottom: 17px; }
.pending-count { display: inline-grid; place-items: center; min-width: 18px; height: 17px; padding: 0 4px; border-radius: 6px; color: #c07e2c; background: #fff5e3; font-size: 8px; letter-spacing: 0; }
.text-link { padding: 4px 0; border: 0; background: none; color: #0a9aad; font-size: 9px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.text-link i { margin-left: 3px; font-size: 8px; transition: transform .2s ease; }.text-link:hover i { transform: translateX(3px); }
.request-list { padding: 0 15px; }
.request-item { padding: 13px 3px; border-top: 1px solid #edf2f3; animation: card-in .3s ease both; }
.request-top { display: flex; align-items: flex-start; gap: 9px; }
.request-avatar { flex: 0 0 auto; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #925f48; background: #f8e9df; font: 800 9px "Manrope", sans-serif; }
.request-item:nth-child(2) .request-avatar { color: #527c74; background: #e3f2ed; }.request-item:nth-child(3) .request-avatar { color: #5e6f9c; background: #e9ecf8; }
.request-person { min-width: 0; flex: 1; }
.request-person strong { display: block; overflow: hidden; margin: 1px 0 4px; color: #334c59; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.request-person small { display: block; color: #95a2ab; font-size: 8px; }
.request-type { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 5px; color: #ce755f; background: #fff1ed; font-size: 7px; font-weight: 700; }
.request-type.type-izin { color: #bc8a34; background: #fff7e8; }
.request-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 9px 40px; }
.request-meta span { color: #8998a2; font-size: 8px; }.request-meta i { margin-right: 4px; color: #a6b2b9; }
.request-actions { display: flex; align-items: center; gap: 6px; margin-left: 40px; }
.request-actions button { min-height: 27px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid #e7edef; border-radius: 7px; background: #fff; color: #71838e; font-size: 8px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.request-actions button:hover { transform: translateY(-1px); }
.request-actions .preview-request:hover { color: #0c8b9b; border-color: #a8dfe2; background: #f5fcfc; }
.request-actions .approve-request { color: #218f77; border-color: #d3eee4; background: #effaf5; }.request-actions .approve-request:hover { color: #fff; border-color: #27a985; background: #27a985; }
.request-actions .reject-request:hover { color: #c66e5e; border-color: #f2d5ce; background: #fff5f2; }
.request-result { display: flex; align-items: center; justify-content: space-between; margin-left: 40px; color: #8a99a3; font-size: 8px; }
.request-bottom-note { display: flex; align-items: center; gap: 8px; margin: 0 15px; padding: 13px 2px; border-top: 1px solid #edf2f3; color: #9aa7b0; font-size: 8px; }
.request-bottom-note > span:first-child { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 7px; color: #d09b40; background: #fff7e8; }.request-bottom-note strong { color: #637985; }
.page-footer { display: flex; justify-content: space-between; gap: 15px; padding: 16px 2px 6px; color: #9ba8b0; font-size: 9px; }
.page-footer i { color: #e98a7b; font-size: 8px; }

/* Employee workspace */
.employee-heading { margin-bottom: 20px; }
.shift-chip { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid #e5eef0; border-radius: 11px; background: rgba(255,255,255,.78); }
.shift-chip-icon { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 9px; background: #e8f8f7; color: #1199a9; }
.shift-chip > span:last-child { display: flex; flex-direction: column; gap: 3px; }.shift-chip small { color: #9aa8b0; font-size: 7px; font-weight: 700; letter-spacing: .8px; }.shift-chip strong { color: #4b626e; font-size: 10px; }
.employee-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(310px, .85fr); gap: 16px; align-items: stretch; }
.scan-panel, .personal-summary { overflow: hidden; }
.secure-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid #e3f2ee; border-radius: 7px; color: #39947d; background: #f3fbf8; font-size: 8px; white-space: nowrap; }
.camera-stage { position: relative; height: clamp(230px, 25vw, 300px); overflow: hidden; margin: 0 18px; border: 1px solid #d5e9e9; border-radius: 13px; background: radial-gradient(ellipse at 50% 40%, #d2e7e5 0, #9fb9bb 28%, #6f8991 70%, #425d68 100%); }
.camera-stage.is-expanded { position: fixed; z-index: 1001; top: 50%; left: 50%; width: min(92vw, calc((100vh - 56px) * 16 / 9)); width: min(92vw, calc((100dvh - 56px) * 16 / 9)); height: auto; max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); aspect-ratio: 16 / 9; margin: 0; border-radius: 16px; transform: translate(-50%, -50%); }
body.camera-expanded { overflow: hidden; }
body.camera-expanded::before { position: fixed; z-index: 1000; inset: 0; background: rgba(11, 29, 39, .78); content: ""; backdrop-filter: blur(5px); }
.camera-expand-close { position: absolute; z-index: 4; top: 12px; right: 12px; display: none; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 11px; color: #fff; background: rgba(12, 31, 40, .46); cursor: pointer; backdrop-filter: blur(8px); }
.camera-stage.is-expanded .camera-expand-close { display: grid; }
.camera-stage video, .enrollment-camera video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s ease; transform: scaleX(-1); }
.camera-stage.video-active video, .enrollment-camera.video-active video { opacity: 1; }
.camera-stage.video-active .camera-placeholder, .enrollment-camera.video-active .camera-placeholder { opacity: 0; pointer-events: none; }
.camera-placeholder { position: absolute; z-index: 1; top: 50%; left: 50%; display: flex; align-items: center; flex-direction: column; gap: 7px; width: max-content; max-width: 88%; color: #f7ffff; text-align: center; transform: translate(-50%,-50%); transition: opacity .25s ease; }
.camera-placeholder-icon { width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 4px; border: 1px solid rgba(255,255,255,.28); border-radius: 13px; background: rgba(240,255,255,.13); color: #e8ffff; font-size: 14px; backdrop-filter: blur(8px); }
.camera-placeholder strong { font-size: 11px; }.camera-placeholder small { color: rgba(245,255,255,.75); font-size: 9px; }
.camera-vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(7,25,36,.38), transparent 28%, transparent 69%, rgba(7,25,36,.55)); }
.camera-topline, .camera-bottomline { position: absolute; z-index: 3; right: 13px; left: 13px; display: flex; align-items: center; justify-content: space-between; color: rgba(245,255,255,.84); font-size: 7px; font-weight: 700; letter-spacing: .8px; }
.camera-topline { top: 12px; }.camera-bottomline { bottom: 12px; font-size: 7px; letter-spacing: .45px; }
.camera-live { display: flex; align-items: center; gap: 6px; }.camera-live i { width: 6px; height: 6px; }
.camera-bottomline i { margin-right: 4px; color: #a8eddd; }
.face-frame { position: absolute; z-index: 2; top: 50%; left: 50%; width: 128px; height: 166px; display: grid; place-items: center; transform: translate(-50%,-51%); }
.face-oval { position: absolute; inset: 0; border: 1.5px solid rgba(179,255,245,.75); border-radius: 48% 48% 45% 45% / 43% 43% 55% 55%; box-shadow: 0 0 0 9px rgba(147,243,235,.065), inset 0 0 19px rgba(127,247,241,.12), 0 0 20px rgba(103,242,235,.13); }
.laser-line { position: absolute; top: 5%; left: 6%; width: 88%; height: 1px; background: linear-gradient(90deg, transparent, #b9fff4 25%, #f7ffff 50%, #b9fff4 75%, transparent); box-shadow: 0 0 9px 2px rgba(107,255,239,.58); animation: laser-sweep 2.3s ease-in-out infinite alternate; }
@keyframes laser-sweep { from { top: 7%; opacity: .65; } to { top: 90%; opacity: 1; } }
.face-hint { position: absolute; bottom: -19px; color: rgba(235,255,255,.9); font-size: 6px; font-weight: 700; letter-spacing: 1.4px; white-space: nowrap; }
.scan-corners { position: absolute; z-index: 2; inset: 13px; pointer-events: none; }
.scan-corners i { position: absolute; width: 11px; height: 11px; border-color: rgba(203,255,248,.7); border-style: solid; }
.scan-corners i:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }.scan-corners i:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }.scan-corners i:nth-child(3) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }.scan-corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.camera-stage.is-scanning .face-oval { border-color: #baffef; box-shadow: 0 0 0 10px rgba(88,247,218,.12), 0 0 27px rgba(90,255,232,.28); animation: frame-pulse .7s ease-in-out infinite alternate; }
.camera-stage.is-success .face-oval { border-color: #78ffcd; box-shadow: 0 0 0 10px rgba(80,244,180,.12), 0 0 28px rgba(60,244,176,.3); }
@keyframes frame-pulse { to { transform: scale(1.035); } }
.scan-feedback { display: flex; align-items: center; gap: 9px; min-height: 52px; margin: 12px 18px 0; padding: 8px 11px; border: 1px solid #eef2f3; border-radius: 10px; background: #fbfdfd; transition: .2s ease; }
.feedback-indicator { width: 30px; height: 30px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #7395a0; background: #edf5f6; font-size: 12px; }
.scan-feedback > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 3px; }.scan-feedback strong { color: #566d78; font-size: 9px; }.scan-feedback small { color: #98a5ad; font-size: 8px; }
.scan-time { color: #91a1aa; font: 700 10px "Manrope",sans-serif; }
.scan-feedback.success { border-color: #d8f0e5; background: #f5fcf8; }.scan-feedback.success .feedback-indicator { color: #259b7e; background: #e2f6ec; }.scan-feedback.success strong { color: #25866f; }
.scan-feedback.error { border-color: #f2d9d4; background: #fff9f7; }.scan-feedback.error .feedback-indicator { color: #ce7162; background: #ffede8; }
.scan-feedback.is-busy .feedback-indicator i { animation: spin 1s linear infinite; }@keyframes spin { to { transform: rotate(360deg); } }
.scan-controls { padding: 14px 18px 16px; }
.scan-mode-switch { display: flex; gap: 4px; padding: 3px; border: 1px solid #edf1f2; border-radius: 10px; background: #f6f9fa; }
.scan-mode { flex: 1; min-height: 31px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 7px; color: #7e8f99; background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; transition: .2s ease; }
.scan-mode.is-active { color: #0b8ea0; background: white; box-shadow: 0 2px 7px rgba(30, 75, 84, .09); }
.scan-actions { display: flex; gap: 8px; margin-top: 10px; }.scan-actions .button { flex: 1; min-height: 36px; font-size: 9px; }.scan-button { min-width: 120px; }
.privacy-note { margin: 10px 0 0; color: #9ba8af; font-size: 8px; text-align: center; }.privacy-note i { margin-right: 4px; color: #5ab89e; }
.demo-scan-button { display: block; margin: 8px auto 0; padding: 3px 6px; border: 0; border-radius: 6px; color: #748a95; background: transparent; font-size: 8px; font-weight: 600; cursor: pointer; transition: color .18s ease, background .18s ease; }.demo-scan-button:hover { color: #078ca4; background: #edf9f8; }.demo-scan-button i { margin-right: 4px; color: #45aeba; }

.personal-summary { padding-bottom: 16px; }
.period-select { display: inline-flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #edf1f2; border-radius: 8px; color: #788b96; background: white; font-size: 8px; cursor: pointer; }.period-select i { font-size: 7px; }
.personal-score { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 20px 10px; }
.score-label { display: block; margin-bottom: 5px; color: #96a4ad; font-size: 7px; }
.personal-score > div:first-child > strong { display: block; color: #173c49; font: 800 31px/1 "Manrope", sans-serif; }.personal-score > div:first-child > strong span { color: #39b5b3; font-size: 19px; }
.personal-score small { display: block; margin-top: 5px; color: #2c9b80; font-size: 8px; }.personal-score small i { margin-right: 2px; font-size: 7px; }
.score-ring { width: 64px; height: 64px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: conic-gradient(#17b7b7 0 77%, #f0b65a 77% 82%, #ec8876 82% 86%, #e8f1f1 86%); transform: rotate(-90deg); }
.score-ring-inner { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-direction: column; border-radius: 50%; background: white; transform: rotate(90deg); }.score-ring-inner strong { font: 800 14px "Manrope",sans-serif; color: #365764; }.score-ring-inner small { margin: 1px 0 0; color: #99a7ae; font-size: 5px; letter-spacing: .5px; }
.mini-chart { position: relative; height: 114px; margin: 0 20px; padding: 7px 3px 22px; }
.chart-grid-lines { position: absolute; inset: 7px 0 24px; display: flex; justify-content: space-between; flex-direction: column; }.chart-grid-lines span { width: 100%; border-top: 1px dashed #eaf0f1; }
.chart-bars { position: relative; z-index: 1; display: flex; height: 79px; align-items: flex-end; justify-content: space-between; gap: 5px; padding: 0 3px; }
.chart-bar-group { position: relative; height: 100%; display: flex; flex: 1; align-items: flex-end; justify-content: center; gap: 2px; }
.chart-bar { width: min(7px, 28%); min-height: 4px; border-radius: 3px 3px 1px 1px; background: linear-gradient(180deg, #48c8c0, #68d4c2); transform-origin: bottom; animation: bar-rise .45s cubic-bezier(.2,.8,.2,1) both; }.chart-bar.permission { background: #f3c46b; }.chart-bar.sick { background: #ee9785; }
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.chart-labels { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; color: #a0adb4; font-size: 7px; }
.legend-row { display: flex; justify-content: center; gap: 14px; margin-top: 3px; color: #83939d; font-size: 7px; }.legend-row span { display: flex; align-items: center; gap: 5px; }
.legend-dot { width: 6px; height: 6px; display: inline-block; border-radius: 2px; }.dot-present { background: #4dc4b8; }.dot-permission { background: #f0bf5f; }.dot-sick { background: #e98c7b; }
.summary-divider { height: 1px; margin: 13px 19px 12px; background: #edf1f2; }
.personal-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 17px; }
.personal-stats > div { display: flex; align-items: center; gap: 7px; min-width: 0; }.personal-stat-icon { width: 24px; height: 24px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 7px; font-size: 9px; }.is-green { color: #229e7e; background: #e7f7f0; }.is-amber { color: #c38a2c; background: #fff6e5; }.is-coral { color: #ce7563; background: #fff0ed; }
.personal-stats > div > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }.personal-stats small { color: #97a4ad; font-size: 7px; }.personal-stats strong { color: #536b77; font-size: 8px; white-space: nowrap; }
.employee-lower-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 16px; margin-top: 16px; align-items: start; }
.work-activity-panel { grid-column: 1 / -1; overflow: hidden; }
.task-form { display: grid; gap: 10px; padding: 0 20px 14px; }
.task-form label { display: grid; min-width: 0; gap: 5px; color: #647985; font-size: 9px; font-weight: 700; }
.task-form input, .task-form textarea, .task-form select { width: 100%; min-width: 0; min-height: 36px; padding: 8px 10px; border: 1px solid #e1eaed; border-radius: 9px; outline: 0; color: #415c69; background: #fff; font-size: 10px; font-weight: 400; }
.task-form textarea { min-height: 58px; resize: vertical; }
.task-form input:focus, .task-form textarea:focus, .task-form select:focus { border-color: #88d3d8; box-shadow: 0 0 0 3px rgba(6, 182, 212, .1); }
.task-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(145px, .55fr) auto; align-items: end; gap: 10px; }
.task-form-row .button { min-height: 36px; font-size: 9px; }
.task-status { margin: 0; }
.task-list-heading, .work-activity-subheading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 9px; border-top: 1px solid #edf2f3; }
.task-list-heading h3, .work-activity-subheading h3 { margin: 0; color: #405d69; font: 800 11px/1.35 "Manrope", sans-serif; }
.task-list-heading > span { color: #8a9ba3; font-size: 8px; }
.task-list { display: grid; gap: 8px; margin: 0; padding: 0 20px 14px; list-style: none; }
.task-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid #e5eef0; border-radius: 11px; background: #fbfdfd; }
.task-item-copy { display: grid; flex: 1; min-width: 0; gap: 4px; }
.task-item-copy > strong { color: #3d5966; font-size: 10px; }
.task-item-copy > p { margin: 0; color: #71858e; font-size: 9px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-item-copy > small { color: #91a0a8; font-size: 8px; line-height: 1.5; }
.task-status-control { display: grid; flex: 0 0 155px; gap: 4px; color: #82939b; font-size: 8px; }
.task-status-control select { min-height: 33px; padding: 6px 8px; border: 1px solid #dfeaed; border-radius: 8px; color: #4d6975; background: #fff; font-size: 9px; }
.task-empty-state { padding: 14px 12px; border: 1px dashed #dce8ea; border-radius: 10px; color: #82939b; background: #fbfdfd; font-size: 9px; text-align: center; }
.work-activity-subheading { justify-content: flex-start; }
.work-activity-subheading p { margin: 3px 0 0; color: #91a0a8; font-size: 8px; }
.activity-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #e1efeb; border-radius: 20px; color: #498575; background: #f4fbf8; font-size: 8px; font-weight: 700; }
.activity-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #42b999; box-shadow: 0 0 0 3px rgba(66, 185, 153, .12); }
.work-activity-list { display: grid; gap: 0; margin: 0; padding: 0 20px 10px; list-style: none; }
.work-activity-item { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 9px 0; border-top: 1px solid #edf2f3; }
.work-activity-icon { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 10px; font-size: 11px; }
.work-activity-icon.is-success { color: #219778; background: #e8f8f1; }
.work-activity-icon.is-warning { color: #b27b21; background: #fff4dc; }
.work-activity-copy { display: grid; flex: 1; min-width: 0; gap: 3px; }
.work-activity-copy strong { overflow: hidden; color: #4a6370; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.work-activity-copy small { overflow: hidden; color: #92a0a8; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.work-activity-item time { flex: 0 0 auto; color: #9aa8ae; font-size: 8px; text-align: right; }
.personal-history-panel { overflow: hidden; }
.personal-table th { height: 32px; }.personal-table td { height: 43px; font-size: 9px; }.personal-table td:first-child { color: #506876; font-weight: 600; }
.history-time { color: #526a76; font-weight: 600; }.history-dash { color: #b1bdc3; }
.leave-panel { padding-bottom: 17px; }
.leave-heading-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #159bab; background: #e9f8f7; }
.leave-panel form { padding: 0 18px; }
.leave-type-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 12px; padding: 3px; border: 1px solid #eaf0f1; border-radius: 9px; background: #f7f9fa; }
.leave-tab { display: flex; align-items: center; justify-content: center; gap: 6px; height: 29px; border: 0; border-radius: 6px; background: transparent; color: #84939d; font-size: 9px; font-weight: 700; cursor: pointer; transition: .2s ease; }.leave-tab.is-active { color: #108d9e; background: white; box-shadow: 0 2px 5px rgba(33, 75, 86, .08); }
.date-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.date-fields label, .form-label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #647985; font-size: 9px; font-weight: 600; }
.date-fields input, .form-label input, .form-label select, .form-label textarea { width: 100%; min-width: 0; min-height: 35px; padding: 8px 9px; border: 1px solid #e4ecee; border-radius: 8px; outline: 0; color: #415c69; background: #fff; font-size: 9px; font-weight: 400; transition: border .2s ease, box-shadow .2s ease; }
.date-fields input:focus, .form-label input:focus, .form-label select:focus, .form-label textarea:focus { border-color: #88d3d8; box-shadow: 0 0 0 3px rgba(6, 182, 212, .1); }
.form-label textarea { min-height: 60px; resize: vertical; }.form-label textarea::placeholder, .form-label input::placeholder { color: #a6b1b8; }
.upload-zone { display: flex; align-items: center; gap: 9px; min-height: 53px; margin-top: 10px; padding: 8px 9px; border: 1px dashed #cbdde1; border-radius: 9px; background: #fbfdfd; cursor: pointer; transition: .2s ease; }.upload-zone:hover, .upload-zone.is-dragging { border-color: #51bdc6; background: #f1fbfa; }
.upload-icon { width: 28px; height: 28px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #189baa; background: #e8f8f7; }.upload-zone > span:nth-child(2) { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 4px; }.upload-zone strong { overflow: hidden; color: #5e7480; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.upload-zone strong small { color: #9ba8af; font-size: 7px; font-weight: 400; }.upload-zone > span:nth-child(2) > small { color: #9aa7ae; font-size: 7px; }.upload-paperclip { color: #9aa9b0; font-size: 10px; }
.submit-leave { width: 100%; min-height: 35px; margin-top: 10px; font-size: 9px; }

/* Authentication pages */
.auth-page { min-width: 320px; min-height: 100vh; background: radial-gradient(ellipse at 50% 0, rgba(200, 245, 246, .7), transparent 50%), #f5fafb; }
.auth-layout { display: flex; min-height: 100vh; align-items: center; flex-direction: column; justify-content: center; padding: 38px 16px 20px; }
.auth-brand { margin-bottom: 22px; color: #173444; }
.auth-card { width: min(100%, 440px); padding: 30px; border: 1px solid rgba(231, 240, 242, .95); border-radius: 20px; background: #fff; box-shadow: 0 22px 65px rgba(34, 73, 89, .1); }
.auth-card-wide { width: min(100%, 680px); }
.auth-dashboard-account { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 11px 12px; border: 1px solid #e4eef0; border-radius: 11px; background: #f8fbfc; }
.auth-dashboard-account-copy { display: grid; flex: 1; gap: 3px; }
.auth-dashboard-account-copy strong { color: #34515f; font-size: 11px; }
.auth-dashboard-account-copy small { color: #81939c; font-size: 9px; }
.auth-dashboard-account .button { min-height: 33px; padding: 0 10px; font-size: 9px; }
.account-hero { justify-content: center; flex-direction: column; gap: 9px; max-width: 380px; margin: 0 auto 18px; padding: 17px 20px; border-color: #dcebee; background: radial-gradient(circle at 50% 0, #eafafa, #f8fbfc 70%); text-align: center; }
.account-hero-avatar { width: 70px; height: 70px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 5px 16px rgba(34, 73, 89, .12); font-size: 17px; }
.account-hero-copy, .auth-dashboard-account-copy.account-hero-copy { flex: 0 0 auto; justify-items: center; gap: 4px; }
.account-hero-copy strong, .auth-dashboard-account-copy.account-hero-copy strong { font: 800 14px/1.3 "Manrope", sans-serif; }
.account-hero-copy small { font-size: 10px; }
.account-hero .button { min-height: 34px; margin-top: 2px; }
.employee-account-hero { display: flex; align-items: center; gap: 10px; width: min(100%, 380px); margin: 0 auto 18px; padding: 14px 18px; border: 1px solid #dcebee; border-radius: 16px; background: radial-gradient(circle at 50% 0, #eafafa, #fff 75%); box-shadow: var(--shadow-soft); text-align: center; }
.employee-account-hero .account-hero-copy { display: grid; flex: 1; justify-items: center; gap: 4px; }
.employee-account-hero .account-hero-copy strong { color: #34515f; font: 800 14px/1.3 "Manrope", sans-serif; }
.employee-account-hero .account-hero-copy small { color: #81939c; font-size: 10px; }
.employee-account-hero .account-hero-avatar { width: 58px; height: 58px; border-radius: 50%; }
.employee-account-hero .button { min-height: 34px; padding: 0 10px; font-size: 9px; }
.login-profile-preview { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 11px; border: 1px solid #e4eef0; border-radius: 11px; background: #f8fbfc; }
.login-profile-avatar { width: 42px; height: 42px; border-radius: 50%; }
.login-profile-copy { display: grid; flex: 1; gap: 3px; }
.login-profile-copy strong { color: #34515f; font-size: 10px; }
.login-profile-copy small { color: #81939c; font-size: 9px; }
.login-profile-preview .button { min-height: 32px; padding: 0 9px; font-size: 9px; }
.insight-card { display: flex; align-items: center; gap: 13px; margin: 0 0 20px; padding: 14px 16px; border: 1px solid #cfe9e8; border-radius: 15px; background: linear-gradient(110deg, #f0fbf9, #fff 68%); box-shadow: var(--shadow-soft); }
.insight-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 13px; color: #0a8994; background: #dff7f2; font-size: 17px; }
.insight-copy { flex: 1; min-width: 0; }
.insight-copy > span { color: #168f9d; font-size: 8px; font-weight: 800; letter-spacing: 1px; }
.insight-copy h2 { margin: 4px 0; color: #34515f; font: 800 12px/1.35 "Manrope", sans-serif; }
.insight-copy p { margin: 0; color: #71858e; font-size: 10px; line-height: 1.55; }
.insight-card > .button { min-height: 34px; flex: 0 0 auto; padding: 0 10px; font-size: 9px; }
.auth-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 19px; border: 1px solid #d5f1f0; border-radius: 14px; color: #0c91a3; background: #edfafa; font-size: 18px; }
.auth-icon.owner-icon { color: #557087; background: #f0f5f8; border-color: #e2ebef; }
.auth-kicker { color: #108d9e; font-size: 9px; font-weight: 800; letter-spacing: 1.3px; }
.auth-card h1 { margin: 8px 0 7px; color: #173444; font: 800 24px/1.25 "Manrope", sans-serif; }
.auth-description { margin: 0 0 19px; color: #7e909a; font-size: 12px; line-height: 1.65; }
.auth-notice, .auth-footnote { display: flex; align-items: flex-start; gap: 9px; border-radius: 10px; line-height: 1.55; }
.auth-notice { margin-bottom: 19px; padding: 11px 12px; border: 1px solid #f1e4c5; color: #886b30; background: #fffaf0; font-size: 10px; }
.auth-notice i, .auth-footnote i { flex: 0 0 auto; margin-top: 2px; }
.auth-scope { margin: 0 0 18px; padding: 13px 14px; border: 1px solid #e4eef0; border-radius: 11px; background: #f8fbfc; }
.auth-scope h2, .auth-section-title { margin: 0; color: #34515f; font-size: 11px; font-weight: 800; }
.auth-scope ul { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.auth-scope li { display: flex; align-items: flex-start; gap: 8px; color: #6b808a; font-size: 10px; line-height: 1.5; }
.auth-scope li i { flex: 0 0 auto; margin-top: 2px; color: #168f9d; font-size: 9px; }
.auth-scope li .fa-lock { color: #9a7a3a; }
.auth-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }
.auth-stat-card { display: grid; gap: 5px; padding: 14px; border: 1px solid #e4eef0; border-radius: 11px; background: linear-gradient(145deg, #fbfefe, #f3f9fa); }
.auth-stat-card > span { color: #6b808a; font-size: 10px; font-weight: 700; }
.auth-stat-card > strong { color: #147d8d; font: 800 25px/1 "Manrope", sans-serif; }
.auth-stat-card > small { color: #94a3aa; font-size: 9px; }
.auth-account-list { margin-bottom: 12px; }
.auth-account-list h2 { display: flex; align-items: center; gap: 7px; }
.auth-account-list h2 > i { color: #168f9d; }
.auth-account-list ul { gap: 0; }
.auth-account-list li { min-height: 47px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #edf2f3; }
.auth-account-list li:last-child { border-bottom: 0; }
.auth-account-list li > i { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: #168f9d; background: #e9f8f7; }
.auth-account-list li > span { display: grid; flex: 1; gap: 2px; }
.auth-account-list li strong { color: #47616d; font-size: 10px; }
.auth-account-list li small { color: #93a2a9; font-size: 9px; }
.auth-account-list li b { padding: 4px 7px; border-radius: 20px; color: #168477; background: #e9f8f1; font-size: 8px; }
.auth-management-section > p { margin: 8px 0; color: #738791; font-size: 9px; line-height: 1.55; }
.auth-management-section > .directory-demo-note { margin: 0 0 12px; color: #9a8b61; }
.workspace-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.workspace-panel-heading h2 { display: flex; align-items: center; gap: 7px; margin: 0; color: #34515f; font-size: 12px; }
.workspace-panel-heading h2 i { color: #168f9d; }
.workspace-panel-heading p { margin: 5px 0 0; color: #81939c; font-size: 9px; }
.workspace-slider-controls { display: flex; flex: 0 0 auto; gap: 6px; }
.workspace-slider-controls .icon-button { width: 30px; height: 30px; }
.workspace-admin-slider { display: grid; grid-auto-columns: minmax(300px, 55%); grid-auto-flow: column; gap: 12px; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 10px; scroll-snap-type: x mandatory; scrollbar-color: #b7d9de #edf4f5; scrollbar-width: thin; }
.workspace-admin-card { min-width: 0; padding: 14px; border: 1px solid #dfeaed; border-radius: 13px; background: #fff; scroll-snap-align: start; }
.workspace-admin-card.is-primary { border-color: #83cbd0; box-shadow: inset 0 3px #27a8b1, 0 6px 18px rgba(34, 73, 89, .05); }
.workspace-admin-card.is-selected { border-color: #138fa0; box-shadow: 0 0 0 2px rgba(19, 143, 160, .13); }
.workspace-admin-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding-bottom: 11px; border-bottom: 1px solid #edf2f3; }
.workspace-admin-heading h3 { margin: 0; color: #34515f; font: 800 13px/1.3 "Manrope", sans-serif; }
.workspace-admin-heading p { margin: 4px 0 0; color: #81939c; font-size: 9px; }
.workspace-admin-count { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: #087d91; background: #e8f8f7; font: 800 15px "Manrope", sans-serif; }
.workspace-admin-card:not(.is-primary) .workspace-admin-count { color: #77599a; background: #f2ecf8; }
.workspace-admin-card .auth-account-list { margin: 0; padding: 0; border: 0; background: transparent; }
.workspace-admin-card .auth-account-list li { min-height: 43px; }
.workspace-empty-state { padding: 16px 5px !important; color: #94a3aa !important; font-size: 9px !important; }
.gps-dashboard { display: grid; gap: 12px; margin: 14px 0; padding: 16px; }
.gps-dashboard-heading { display: flex; align-items: flex-start; gap: 10px; }
.gps-dashboard-heading h2, .gps-employee-copy h2 { margin: 3px 0 4px; color: #34515f; font: 800 14px/1.35 "Manrope", sans-serif; }
.gps-dashboard-heading p, .gps-employee-copy p { margin: 0; color: #81939c; font-size: 9px; line-height: 1.55; }
.gps-dashboard-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #087d91; background: #e8f8f7; font-size: 17px; }
.gps-office-summary { padding: 10px 12px; border: 1px solid #dfeaed; border-radius: 9px; color: #47616d; background: #f7fbfc; font-size: 9px; line-height: 1.6; overflow-wrap: anywhere; }
.gps-office-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.gps-radius-field { display: grid; width: min(100%, 190px); gap: 5px; color: #647985; font-size: 9px; font-weight: 700; }
.gps-radius-field input { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #e1eaed; border-radius: 9px; outline: 0; color: #415c69; background: #fff; font: 400 10px "DM Sans", sans-serif; }
.gps-radius-field input:focus, .gps-policy-row select:focus { border-color: #88d3d8; box-shadow: 0 0 0 3px rgba(6, 182, 212, .1); }
.gps-office-form .button { min-height: 36px; font-size: 9px; }
.gps-inline-status { margin: 0; color: #168477; font-size: 9px; line-height: 1.5; }
.gps-inline-status.is-error, .gps-employee-status.is-error { color: #b34d3e; }
.gps-policy-heading h3 { margin: 0; color: #405d69; font: 800 11px/1.4 "Manrope", sans-serif; }
.gps-policy-heading p { margin: 4px 0 0; color: #81939c; font-size: 9px; }
.gps-employee-policies, .gps-operator-log, .gps-company-list { display: grid; gap: 7px; }
.gps-policy-row { display: grid; grid-template-columns: minmax(110px, .7fr) minmax(120px, 1fr) minmax(220px, 1.4fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid #e8eff1; border-radius: 9px; background: #fff; }
.gps-policy-employee { color: #47616d; font-size: 9px; font-weight: 700; }
.gps-policy-row small, .gps-log-row small, .gps-company-card small { color: #91a0a8; font-size: 8px; }
.gps-policy-row select { width: 100%; min-height: 34px; padding: 6px 8px; border: 1px solid #dfeaed; border-radius: 8px; color: #4d6975; background: #fff; font: 400 9px "DM Sans", sans-serif; }
.gps-demo-note { margin: 0; color: #9a8b61; font-size: 8px; line-height: 1.55; }
.gps-empty-state { margin: 0; padding: 12px; border: 1px dashed #dce8ea; border-radius: 9px; color: #82939b; font-size: 9px; text-align: center; }
.gps-operator-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.gps-operator-stats strong { color: #147d8d; font: 800 18px "Manrope", sans-serif; }
.gps-operator-stats span { align-self: center; color: #81939c; font-size: 8px; }
.gps-company-card, .gps-log-row { display: grid; grid-template-columns: minmax(130px, .8fr) minmax(180px, 1.4fr) minmax(120px, .8fr); align-items: center; gap: 8px; padding: 9px; border: 1px solid #e8eff1; border-radius: 9px; background: #fff; }
.gps-company-card h3, .gps-log-row strong { margin: 0; color: #47616d; font-size: 9px; }
.gps-company-card .gps-office-summary { padding: 0; border: 0; background: transparent; }
.gps-log-row span { color: #647985; font-size: 8px; }
.gps-employee-gps-dashboard { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.gps-employee-copy { min-width: 0; }
.gps-employee-status { grid-column: 1 / -1; margin: 0; padding: 9px 10px; border: 1px solid #dfeaed; border-radius: 9px; color: #647985; background: #f7fbfc; font-size: 9px; line-height: 1.5; }
.gps-employee-status.is-success { border-color: #d3eee4; color: #168477; background: #f4fbf8; }
.gps-employee-gps-dashboard > .gps-demo-note { grid-column: 1 / -1; }
.directory-add-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; padding: 12px 0; border-top: 1px solid #e8eff1; }
.directory-add-form .form-label { font-size: 9px; }
.directory-add-form .button { min-height: 35px; font-size: 9px; }
.directory-add-form .directory-form-status { grid-column: 1 / -1; margin: 0; }
.directory-add-form[data-add-employee-form] .form-label:nth-child(3),
.directory-add-form[data-add-employee-form] .button { grid-column: 1 / -1; }
.directory-add-form .form-label input { min-height: 36px; }
.directory-add-form .form-label select { min-height: 36px; }
.auth-section-title { margin-bottom: 5px; font-size: 13px; }
.auth-section-description { margin: 0 0 14px; color: #81939c; font-size: 10px; line-height: 1.55; }
.auth-demo-credentials { display: grid; gap: 7px; margin-bottom: 17px; padding: 12px; border: 1px solid #dcebee; border-radius: 10px; color: #637985; background: #f7fbfc; font-size: 10px; }
.auth-demo-credentials > strong { color: #42606d; font-size: 10px; }.auth-demo-credentials > strong i { margin-right: 4px; color: #168fa0; }
.auth-demo-credentials code { color: #145d6d; font-family: Consolas, monospace; }
.auth-demo-fill { justify-self: start; padding: 0; border: 0; color: #118b9b; background: transparent; font-size: 10px; font-weight: 700; cursor: pointer; }
.auth-demo-fill:hover { color: #075d70; text-decoration: underline; }
.auth-form { display: grid; gap: 13px; }
.auth-field { display: grid; gap: 6px; color: #506876; font-size: 10px; font-weight: 700; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > i { position: absolute; top: 50%; left: 12px; color: #92a4ac; font-size: 12px; transform: translateY(-50%); }
.auth-input-wrap input { width: 100%; min-height: 42px; padding: 10px 12px 10px 36px; border: 1px solid #e1eaed; border-radius: 9px; outline: 0; color: #415c69; background: #fff; font-size: 11px; font-weight: 400; }
.auth-input-wrap select { width: 100%; min-height: 42px; padding: 10px 12px 10px 36px; border: 1px solid #e1eaed; border-radius: 9px; outline: 0; color: #415c69; background: #fff; font-size: 11px; font-weight: 400; }
.auth-input-wrap input:focus { border-color: #88d3d8; box-shadow: 0 0 0 3px rgba(6, 182, 212, .1); }
.auth-input-wrap select:focus { border-color: #88d3d8; box-shadow: 0 0 0 3px rgba(6, 182, 212, .1); }
.auth-input-wrap input::placeholder { color: #a6b1b8; }
.auth-submit { display: flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; border: 0; border-radius: 9px; color: #fff; background: linear-gradient(110deg, #0d8fa1, #087b93); font-size: 11px; font-weight: 700; cursor: pointer; transition: filter .2s ease, transform .2s ease; }
.auth-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.auth-status { display: none; margin: -4px 0 0; color: #b34d3e; font-size: 10px; line-height: 1.5; }
.auth-status.is-error { display: block; }
.auth-status.is-success { display: block; color: #168477; }
.auth-footnote { margin-top: 17px; padding-top: 14px; border-top: 1px solid #edf1f2; color: #8a9aa2; font-size: 9px; }
.auth-footnote i { color: #8b9ca4; }
.auth-back-link { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; color: #118b9b; font-size: 10px; font-weight: 700; text-decoration: none; }
.auth-back-link:hover { color: #075d70; }
.auth-copyright { margin: 18px 0 0; color: #a1aeb5; font-size: 9px; }
.auth-test-link { margin-top: 12px; color: #fff; text-decoration: none; }
.auth-test-caption { margin: 7px 0 0; color: #9a8b61; font-size: 9px; text-align: center; }
.dashboard-test-banner { position: sticky; z-index: 25; top: 0; display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 18px; padding: 7px 16px; color: #745a1c; background: #fff3cc; border-bottom: 1px solid #f0dda3; font-size: 10px; font-weight: 700; text-align: center; }
.dashboard-test-banner i { margin-right: 5px; }
.dashboard-test-banner a { color: #765716; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* Dialogs and feedback */
.modal-dialog { width: min(490px, calc(100% - 28px)); max-width: none; max-height: min(92vh, 850px); padding: 0; overflow: auto; border: 0; border-radius: 17px; background: transparent; color: var(--ink); box-shadow: 0 25px 80px rgba(19, 47, 60, .22); }
.account-settings-dialog { width: min(520px, calc(100% - 28px)); }
.modal-dialog::backdrop { background: rgba(14, 34, 45, .48); backdrop-filter: blur(5px); animation: backdrop-in .2s ease; }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal-dialog[open] { animation: modal-in .28s cubic-bezier(.2,.8,.2,1.15) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.975); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-card { padding: 21px; border: 1px solid rgba(231, 240, 242, .95); border-radius: 17px; background: #fff; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.modal-kicker { display: block; margin-bottom: 6px; color: #96a5ae; font-size: 8px; font-weight: 700; letter-spacing: 1.1px; }
.modal-header h2 { margin: 0 0 5px; color: #173444; font-size: 18px; font-weight: 800; }.modal-header p { margin: 0; color: #8999a3; font-size: 10px; }
.modal-close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.full-field { grid-column: 1 / -1; }
.enrollment-block { margin-top: 17px; padding-top: 15px; border-top: 1px solid #edf1f2; }
.enrollment-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }.enrollment-label > span { display: flex; align-items: center; gap: 7px; color: #425e6a; font-size: 10px; font-weight: 700; }.enrollment-label > span i { color: #159cac; }.enrollment-label > small { color: #9ba7ae; font-size: 8px; }
.enrollment-camera { position: relative; height: 180px; overflow: hidden; border-radius: 11px; background: radial-gradient(ellipse at 50% 40%, #d6e8e6 0, #98b3b5 44%, #536e78 100%); }.enrollment-camera .camera-placeholder { z-index: 1; }.enrollment-face-frame { width: 92px; height: 119px; }.enrollment-face-frame .face-hint { bottom: -16px; font-size: 5px; }.enroll-camera-tag { position: absolute; z-index: 3; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 7px; border: 1px solid rgba(255,255,255,.2); border-radius: 6px; color: white; background: rgba(22,51,61,.28); font-size: 6px; font-weight: 700; letter-spacing: .7px; }.enroll-camera-tag i { color: #71e4c1; font-size: 5px; }
.enrollment-actions { display: flex; gap: 8px; margin-top: 9px; }.enrollment-actions .button { flex: 1; min-height: 34px; font-size: 9px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 18px; padding-top: 13px; border-top: 1px solid #edf1f2; }
.settings-profile-preview { display: flex; align-items: center; gap: 11px; margin-bottom: 15px; padding: 12px; border: 1px solid #e9f0f2; border-radius: 11px; background: #f8fbfc; }
.settings-profile-preview > strong { color: #34515f; font-size: 11px; }
.settings-avatar { position: relative; display: grid; width: 52px; height: 52px; flex: 0 0 auto; place-items: center; overflow: hidden; border-radius: 50%; color: #0b7f91; background: linear-gradient(140deg, #d6f6f3, #bcebf0); font: 800 14px "Manrope", sans-serif; }
.dashboard-logout { display: inline-flex; align-items: center; justify-content: center; gap: 7px; color: #a5483c; text-decoration: none; }
.settings-avatar img { width: 100%; height: 100%; object-fit: cover; }
.settings-avatar img[hidden] { display: none; }
.settings-file-field input { padding: 9px; border: 1px solid #e1eaed; border-radius: 9px; color: #647985; background: #fff; font-size: 10px; }
.settings-file-field small { color: #94a3aa; font-size: 9px; font-weight: 400; }
.settings-password-section { display: grid; gap: 11px; margin-top: 5px; padding-top: 14px; border-top: 1px solid #edf1f2; }
.settings-password-section > strong { color: #34515f; font-size: 11px; }
.settings-password-section > small { margin-top: -7px; color: #8999a3; font-size: 9px; }
.settings-password-section .form-label input { min-height: 38px; font-size: 11px; }
.attachment-dialog { width: min(470px, calc(100% - 28px)); }.attachment-modal-card { padding: 20px; }.document-preview { position: relative; min-height: 380px; overflow: hidden; padding: 22px 25px; border: 1px solid #e6e5dc; background: linear-gradient(145deg, #fffef9, #fbfaf1); box-shadow: inset 0 0 30px rgba(117, 99, 55, .035); color: #57636a; }
.document-top { display: flex; align-items: flex-start; justify-content: space-between; }.document-mark { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid #b7d7d2; border-radius: 50%; color: #529589; }.document-stamp { padding: 5px 7px; border: 1px solid #d89178; color: #d1846b; font-size: 7px; font-weight: 700; line-height: 1.3; letter-spacing: .7px; text-align: center; transform: rotate(5deg); }
.document-clinic { margin: -23px 42px 18px; color: #526c68; font: 800 10px "Manrope",sans-serif; letter-spacing: .65px; text-align: center; }.document-clinic small { display: block; margin-top: 3px; color: #95a39b; font: 500 6px "DM Sans",sans-serif; letter-spacing: 1px; }.document-rule { height: 2px; margin: 0 0 20px; background: #89b7ac; }.document-title { margin-bottom: 13px; color: #52625f; font: 800 11px "Manrope",sans-serif; letter-spacing: 1px; text-align: center; }.document-preview > p { max-width: 340px; margin: 0 auto 15px; color: #78837d; font: 9px/1.65 "DM Sans",sans-serif; text-align: justify; }.document-fields { display: grid; grid-template-columns: 75px 1fr; gap: 8px 5px; max-width: 320px; margin: auto; font-size: 8px; }.document-fields span { color: #99a39b; }.document-fields strong { color: #5d6e69; font-weight: 700; }.document-signature { display: flex; align-items: flex-start; flex-direction: column; gap: 4px; width: max-content; margin: 24px 12px 0 auto; color: #86928a; font-size: 7px; }.signature-mark { color: #648b84; font: italic 16px "Manrope",sans-serif; transform: rotate(-8deg); }.document-signature strong { color: #62706b; font-size: 7px; }.document-watermark { position: absolute; right: 16px; bottom: 12px; color: rgba(168, 151, 105, .22); font: 800 8px "Manrope",sans-serif; letter-spacing: 1.5px; transform: rotate(-9deg); }
.attachment-modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }.attachment-modal-footer > span { color: #99a5ad; font-size: 8px; }.attachment-modal-footer > span i { color: #d2a24c; margin-right: 3px; }.attachment-modal-footer .button { min-height: 33px; }
.toast-region { position: fixed; z-index: 50; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; min-width: 220px; max-width: min(360px, calc(100vw - 32px)); padding: 12px 14px; border: 1px solid #dcebe8; border-radius: 11px; background: rgba(255,255,255,.97); box-shadow: 0 10px 30px rgba(29, 70, 81, .15); color: #49616d; font-size: 10px; animation: toast-in .3s cubic-bezier(.2,.8,.2,1.2) both; pointer-events: auto; }.toast > i { color: #25a986; font-size: 13px; }.toast.is-error > i { color: #d87464; }.toast.is-warning > i { color: #d6a245; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 1260px) {
  .workspace { grid-template-columns: 220px minmax(0,1fr); }
  .main-content { padding-right: 26px; padding-left: 26px; }
  .admin-content-grid { grid-template-columns: minmax(0,1.6fr) minmax(255px,.8fr); gap: 13px; }
  .attendance-table th, .attendance-table td { padding-right: 8px; padding-left: 8px; }
  .attendance-table th:first-child, .attendance-table td:first-child { padding-left: 14px; }
  .attendance-table th:last-child, .attendance-table td:last-child { padding-right: 14px; }
}
@media (max-width: 1080px) {
  .stats-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .stat-alpa { display: none; }
  .admin-content-grid { grid-template-columns: 1fr; }
  .request-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
  .request-item { border-top: 1px solid #edf2f3; }.request-item:first-child { border-top: 1px solid #edf2f3; }
  .request-meta, .request-actions { margin-left: 0; }
  .request-bottom-note { margin-top: 4px; }
  .attendance-panel { order: 0; }.requests-panel { order: 1; }
}
@media (max-width: 900px) {
  .workspace { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 30; top: 72px; bottom: 0; left: 0; width: 250px; height: auto; transform: translateX(-105%); transition: transform .25s cubic-bezier(.2,.8,.2,1); box-shadow: 12px 0 35px rgba(30, 64, 77, .12); }
  .sidebar.is-open { transform: translateX(0); }
  .sidebar-scrim.is-open { position: fixed; z-index: 29; inset: 72px 0 0; display: block; background: rgba(16, 40, 50, .22); backdrop-filter: blur(2px); }
  .mobile-menu-button { display: grid; }
  .topbar-brand { gap: 11px; }
  .main-content { padding: 28px clamp(18px, 4vw, 34px) 15px; }
  .employee-grid { grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr); }
}
@media (max-width: 720px) {
  .topbar { height: 64px; padding: 0 15px; }
  .sidebar { top: 64px; }.sidebar-scrim.is-open { inset: 64px 0 0; }
  .brand-caption, .brand-divider, .online-indicator, .profile-copy, .profile-chevron { display: none; }
  .topbar-right { gap: 8px; }
  .profile-button .avatar { width: 32px; height: 32px; }.icon-button { width: 33px; height: 33px; }
  .settings-button { width: 34px; padding: 0; }.settings-button span { display: none; }
  .workspace { min-height: calc(100vh - 64px); }
  .main-content { padding: 22px 14px 13px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 18px; }.page-heading h1 { font-size: 23px; }.page-heading .button { min-height: 35px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px; }.stat-card { padding: 12px; }.stat-alpa { display: block; }.stat-top { font-size: 9px; }.stat-value { margin: 9px 0 7px; font-size: 22px; }.stat-foot { font-size: 8px; }
  .panel-heading { padding: 16px 14px 12px; }.panel-heading h2 { font-size: 14px; }.panel-heading p { font-size: 9px; }
  .filter-row { gap: 6px; padding: 0 12px 11px; }.select-wrap { height: 32px; padding: 0 8px; }.select-wrap select { font-size: 9px; }.month-select select { max-width: 90px; }.search-box { order: 3; flex-basis: calc(100% - 72px); }.filter-button { order: 4; flex: 1; justify-content: center; height: 32px; }
  .attendance-table { min-width: 860px; }.attendance-table th:first-child, .attendance-table td:first-child { padding-left: 13px; }.table-footer { padding: 11px 13px 13px; }.pagination { gap: 0; }.pagination button { width: 22px; height: 22px; }
  .request-heading { padding-bottom: 12px; }.request-list { display: block; padding: 0 13px; }.request-item { padding: 12px 2px; }.request-meta, .request-actions { margin-left: 40px; }.request-bottom-note { margin: 0 13px; }
  .page-footer { flex-direction: column; gap: 5px; padding-top: 13px; font-size: 8px; }
  .employee-heading { gap: 12px; }.shift-chip { align-self: stretch; }
  .important-info { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 12px; }.important-info > div:nth-child(2) { flex-basis: calc(100% - 51px); }.important-info > .button { margin-left: 49px; }
  .work-activity-list { padding-right: 13px; padding-left: 13px; }.work-activity-item { flex-wrap: wrap; gap: 8px; }.work-activity-item time { margin-left: 39px; text-align: left; }
  .task-form { padding-right: 13px; padding-left: 13px; }.task-form-row { grid-template-columns: 1fr; }.task-form-row .button { width: 100%; }
  .task-list-heading, .work-activity-subheading { padding-right: 13px; padding-left: 13px; }.task-list { padding-right: 13px; padding-left: 13px; }.task-item { align-items: stretch; flex-direction: column; gap: 9px; }.task-status-control { flex-basis: auto; }
  .gps-employee-gps-dashboard { grid-template-columns: 1fr; }.gps-employee-gps-dashboard > .button { width: 100%; }.gps-policy-row, .gps-company-card, .gps-log-row { grid-template-columns: 1fr; }.gps-operator-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .insight-card { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 12px; }.insight-copy { flex-basis: calc(100% - 54px); }.insight-card > .button { margin-left: 52px; }
  .employee-account-hero { gap: 9px; padding: 12px; }.employee-account-hero .account-hero-avatar { width: 48px; height: 48px; border-radius: 50%; }.employee-account-hero .account-hero-copy strong { font-size: 11px; }.employee-account-hero .button { padding: 0 8px; font-size: 8px; }
  .login-profile-preview { flex-wrap: wrap; }.login-profile-preview .button { margin-left: auto; }
  .employee-grid, .employee-lower-grid { grid-template-columns: 1fr; gap: 12px; }.camera-stage { height: 250px; margin: 0 12px; }.scan-feedback { margin-right: 12px; margin-left: 12px; }.scan-controls { padding-right: 12px; padding-left: 12px; }
  .personal-summary .panel-heading { padding-bottom: 9px; }.personal-score { padding-right: 15px; padding-left: 15px; }.mini-chart { margin-right: 16px; margin-left: 16px; }.personal-stats { padding: 0 13px; }
  .personal-table { min-width: 500px; }.employee-lower-grid { margin-top: 12px; }
  .leave-panel form { padding: 0 14px; }
  .modal-card { padding: 17px; }.modal-header h2 { font-size: 16px; }.document-preview { min-height: 360px; padding: 18px; }
}
@media (max-width: 390px) {
  .topbar { padding: 0 10px; }.topbar-brand { gap: 8px; }.brand { gap: 6px; }.brand-word { font-size: 17px; }.brand-mark { width: 30px; height: 30px; font-size: 13px; }.topbar-right { gap: 7px; }
  .main-content { padding-right: 10px; padding-left: 10px; }.stat-card { padding: 10px; }.stat-top { font-size: 8px; }.stat-icon { width: 25px; height: 25px; }.stat-value { font-size: 20px; }.stat-foot { white-space: normal; }
  .scan-actions { flex-direction: column; }.scan-actions .button { width: 100%; }.date-fields { gap: 6px; }
  .auth-card { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}