:root {
  --app-ink: #172033;
  --app-ink-2: #344057;
  --app-muted: #717b8f;
  --app-line: #e2e6ee;
  --app-line-strong: #d7dce7;
  --app-bg: #f5f7fb;
  --app-surface: #fff;
  --app-soft: #f8f9fc;
  --app-primary: #5f50d6;
  --app-primary-dark: #4939bd;
  --app-primary-light: #eeeaff;
  --app-success: #10866f;
  --app-success-light: #e4f8f1;
  --app-danger: #cf3f69;
  --app-danger-light: #fde9ef;
  --app-warning: #b67313;
  --app-warning-light: #fff1dc;
  --app-blue: #3973b6;
  --app-blue-light: #e8f2ff;
  --app-sidebar: #191b2b;
  --app-sidebar-2: #22243a;
  --app-shadow-sm: 0 8px 24px rgba(30, 42, 74, .07);
  --app-shadow: 0 18px 55px rgba(30, 42, 74, .12);
  --app-radius: 16px;
  --app-radius-lg: 22px;
  --present: 0;
  --remote: 0;
  --late: 0;
  --leave: 0;
  --preview: #5f50d6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
input[type="hidden"] { display: none !important; }
button { color: inherit; }
img { max-width: 100%; }
.skip-link { position: fixed; top: -60px; left: 18px; z-index: 2000; padding: 10px 14px; border-radius: 10px; color: #fff; background: #111827; }
.skip-link:focus { top: 12px; }

.app-body {
  min-height: 100vh;
  color: var(--app-ink);
  background: var(--app-bg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 300; width: 272px; display: flex; flex-direction: column; color: #cdd2df; background: radial-gradient(circle at 20% 0, rgba(110,92,222,.17), transparent 28%), linear-gradient(180deg, var(--app-sidebar), #151724); box-shadow: 8px 0 30px rgba(14, 17, 31, .12); }
.sidebar-head { min-height: 78px; padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); }
.app-brand { min-width: 0; display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #6656de, #9468d7); box-shadow: 0 10px 24px rgba(94, 78, 215, .34); font-size: 18px; font-weight: 900; }
.brand-copy { min-width: 0; display: flex; flex-direction: column; }
.brand-copy b { overflow: hidden; color: #fff; font-size: 14px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.brand-copy small { margin-top: 2px; color: #9299ac; font-size: 11px; }
.sidebar-close { width: 36px; height: 36px; display: none; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; color: #fff; background: rgba(255,255,255,.06); cursor: pointer; font-size: 23px; }
.sidebar-nav { flex: 1; padding: 18px 13px 25px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.17) transparent; }
.sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255,255,255,.16); }
.nav-label { margin: 20px 11px 8px; display: block; color: #777f93; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.2px; }
.nav-label:first-child { margin-top: 2px; }
.sidebar-nav a { min-height: 43px; margin: 3px 0; padding: 9px 11px; display: flex; align-items: center; gap: 11px; border-radius: 11px; color: #b8bfce; font-size: 13px; font-weight: 650; transition: background .18s ease, color .18s ease, transform .18s ease; }
.sidebar-nav a:hover { color: #fff; background: rgba(255,255,255,.06); transform: translateX(2px); }
.sidebar-nav a.active { color: #fff; background: linear-gradient(135deg, rgba(105,88,224,.96), rgba(126,91,208,.96)); box-shadow: 0 10px 24px rgba(78,63,177,.26); }
.sidebar-nav i { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: #aeb5c5; background: rgba(255,255,255,.055); font-style: normal; font-size: 13px; font-weight: 900; }
.sidebar-nav a.active i { color: #fff; background: rgba(255,255,255,.16); }
.sidebar-foot { padding: 13px; border-top: 1px solid rgba(255,255,255,.07); }
.support-card { padding: 14px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.05); }
.support-card > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #dcd5ff; background: rgba(116,98,222,.22); font-weight: 900; }
.support-card > div { min-width: 0; display: flex; flex-direction: column; }
.support-card b { color: #fff; font-size: 12px; }
.support-card small { overflow: hidden; color: #8e96a9; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.support-card a { color: #cfc7ff; font-size: 11px; font-weight: 900; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 250; display: none; background: rgba(17, 19, 32, .55); backdrop-filter: blur(2px); }

.app-main { min-width: 0; grid-column: 2; }
.topbar { position: sticky; top: 0; z-index: 200; min-height: 78px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid rgba(224,228,237,.9); background: rgba(255,255,255,.93); backdrop-filter: blur(16px); }
.topbar-left { min-width: 0; display: flex; align-items: center; gap: 14px; }
.topbar-left > div { min-width: 0; }
.topbar-left small { display: block; color: var(--app-muted); font-size: 11px; }
.topbar-left h1 { margin: 1px 0 0; overflow: hidden; font-size: 20px; line-height: 1.25; letter-spacing: -.45px; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--app-line); border-radius: 12px; color: #536077; background: #fff; cursor: pointer; transition: background .18s ease, border-color .18s ease; }
.icon-btn:hover { border-color: #cbc6ed; color: var(--app-primary); background: #faf9ff; }
.menu-button { display: none; }
.notification { font-size: 16px; font-weight: 900; }
.user-menu { position: relative; }
.user-menu > button { min-height: 48px; padding: 5px 8px 5px 6px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--app-line); border-radius: 14px; background: #fff; cursor: pointer; }
.user-menu > button:hover { border-color: #cec8ef; }
.avatar { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: var(--app-primary-dark); background: var(--app-primary-light); font-size: 12px; font-weight: 900; }
.avatar.soft { color: #4d40b6; background: #eeeaff; }
.avatar.xl { width: 78px; height: 78px; font-size: 23px; }
.user-copy { min-width: 135px; display: flex; flex-direction: column; align-items: flex-start; }
.user-copy b { max-width: 160px; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.user-copy small { color: var(--app-muted); font-size: 10px; }
.chevron { color: var(--app-muted); }
.user-dropdown { position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; width: 230px; padding: 8px; display: none; border: 1px solid var(--app-line); border-radius: 15px; background: #fff; box-shadow: var(--app-shadow); }
.user-dropdown.open { display: block; }
.dropdown-user { margin: 3px 4px 8px; padding: 9px 10px 12px; display: flex; flex-direction: column; border-bottom: 1px solid #edf0f4; }
.dropdown-user b { font-size: 13px; }
.dropdown-user small { color: var(--app-muted); font-size: 11px; overflow-wrap: anywhere; }
.user-dropdown a, .user-dropdown form button { width: 100%; padding: 10px 11px; display: block; border: 0; border-radius: 9px; color: #424d63; background: transparent; text-align: left; font-size: 12px; cursor: pointer; }
.user-dropdown a:hover, .user-dropdown form button:hover { color: var(--app-primary); background: var(--app-primary-light); }

.page-content { width: 100%; max-width: 1680px; margin-inline: auto; padding: 26px 28px 50px; }
.alert { margin: 0 0 18px; padding: 13px 15px; border: 1px solid transparent; border-radius: 12px; font-size: 13px; font-weight: 750; }
.alert.error { border-color: #f7cad8; color: #a42b50; background: #fff0f4; }
.alert.success { border-color: #c7ecdf; color: #08735c; background: #eaf9f4; }
.eyebrow { color: var(--app-primary); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.25px; }
.eyebrow.light { color: #ddd7ff; }

.btn { min-height: 42px; padding: 10px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 11px; font-size: 12px; font-weight: 850; line-height: 1.2; cursor: pointer; transition: transform .17s ease, box-shadow .17s ease, background .17s ease, border-color .17s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: 3px solid rgba(95,80,214,.18); outline-offset: 2px; }
.btn-primary { color: #fff; background: linear-gradient(135deg, var(--app-primary), #7654d1); box-shadow: 0 9px 22px rgba(95,80,214,.22); }
.btn-secondary { border-color: var(--app-line-strong); color: #3b465b; background: #fff; }
.btn-light { color: var(--app-primary-dark); background: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.42); color: #fff; background: rgba(255,255,255,.06); }
.btn-sm { min-height: 36px; padding: 8px 12px; font-size: 11px; }
.wide { width: 100%; }
.text-button { padding: 0; border: 0; color: var(--app-primary); background: transparent; font-size: 12px; font-weight: 850; cursor: pointer; }

.welcome-banner, .module-hero, .payroll-action { position: relative; overflow: hidden; min-height: 190px; padding: 34px 38px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-radius: var(--app-radius-lg); color: #fff; background: radial-gradient(circle at 88% 0, rgba(255,255,255,.18), transparent 28%), linear-gradient(135deg, #332b6d, #6755d5 62%, #7f5bcf); box-shadow: 0 22px 55px rgba(62, 49, 145, .22); }
.welcome-banner::after, .module-hero::after, .payroll-action::after { content: ""; position: absolute; width: 280px; height: 280px; right: -120px; bottom: -170px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; box-shadow: 0 0 0 38px rgba(255,255,255,.035), 0 0 0 78px rgba(255,255,255,.025); }
.welcome-banner > *, .module-hero > *, .payroll-action > * { position: relative; z-index: 1; }
.welcome-banner h1, .module-hero h1, .payroll-action h2 { max-width: 700px; margin: 9px 0 7px; font-size: clamp(26px, 3vw, 38px); line-height: 1.12; letter-spacing: -1.3px; }
.welcome-banner p, .module-hero p, .payroll-action p { max-width: 720px; margin: 0; color: #ddd9ef; font-size: 14px; }
.banner-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.welcome-banner.super { background: radial-gradient(circle at 88% 0, rgba(255,255,255,.15), transparent 30%), linear-gradient(135deg, #1f3157, #3f62a2 62%, #526fc2); }

.metric-cards { margin: 18px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.metric-card { min-height: 122px; padding: 20px; display: flex; align-items: center; gap: 14px; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; box-shadow: var(--app-shadow-sm); }
.metric-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 14px; font-style: normal; font-weight: 900; }
.metric-icon.violet { color: var(--app-primary); background: var(--app-primary-light); }
.metric-icon.green { color: var(--app-success); background: var(--app-success-light); }
.metric-icon.pink { color: var(--app-danger); background: var(--app-danger-light); }
.metric-icon.amber { color: var(--app-warning); background: var(--app-warning-light); }
.metric-icon.blue { color: var(--app-blue); background: var(--app-blue-light); }
.metric-icon.gray { color: #626d7f; background: #eef0f4; }
.metric-card > div { min-width: 0; display: flex; flex-direction: column; }
.metric-card small { color: var(--app-muted); font-size: 11px; font-weight: 700; }
.metric-card b { margin: 2px 0; font-size: 28px; line-height: 1.1; letter-spacing: -.8px; }
.metric-card em { color: #8790a2; font-size: 10px; font-style: normal; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .8fr); gap: 17px; margin-bottom: 17px; }
.dashboard-grid.bottom { grid-template-columns: 1fr 1fr; }
.panel { min-width: 0; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; box-shadow: var(--app-shadow-sm); }
.panel-head { min-height: 68px; padding: 17px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #edf0f4; }
.panel-head > div { min-width: 0; }
.panel-head h3 { margin: 0; font-size: 15px; line-height: 1.35; }
.panel-head p { margin: 3px 0 0; color: var(--app-muted); font-size: 11px; }
.panel-head > a { color: var(--app-primary); font-size: 11px; font-weight: 850; white-space: nowrap; }
.panel-head select, .panel-head input { max-width: 220px; padding: 9px 11px; border: 1px solid var(--app-line); border-radius: 10px; color: #4d586e; background: #fff; outline: none; font-size: 11px; }
.chart-panel { padding-bottom: 4px; }
.large-chart { height: 280px; padding: 24px 20px 8px; display: grid; grid-template-columns: 38px 1fr; gap: 10px; }
.chart-axis { padding-bottom: 27px; display: flex; flex-direction: column; justify-content: space-between; color: #9ba3b2; font-size: 9px; text-align: right; }
.chart-area { position: relative; min-width: 0; background-image: linear-gradient(#edf0f4 1px, transparent 1px); background-size: 100% 25%; }
.chart-area svg { width: 100%; height: calc(100% - 28px); }
.chart-labels { height: 28px; display: flex; align-items: end; justify-content: space-between; color: #929aa9; font-size: 9px; }
.chart-summary { padding: 0 20px 18px 68px; display: flex; gap: 20px; color: var(--app-muted); font-size: 10px; }
.chart-summary span { display: flex; align-items: center; gap: 6px; }
.chart-summary b { color: var(--app-ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.purple { background: var(--app-primary); }.dot.green { background: var(--app-success); }
.quick-panel { padding-bottom: 12px; }
.quick-actions { padding: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick-actions a { min-height: 104px; padding: 14px; display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 2px 10px; border: 1px solid #e8ebf1; border-radius: 14px; background: #fff; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.quick-actions a:hover { transform: translateY(-2px); border-color: #cdc7ef; box-shadow: 0 10px 25px rgba(37, 43, 76, .08); }
.quick-actions .metric-icon { width: 40px; height: 40px; grid-row: 1 / 3; }
.quick-actions b { font-size: 12px; }
.quick-actions small { color: var(--app-muted); font-size: 10px; }
.employee-list, .request-list, .announcement-list { padding: 7px 18px 14px; }
.employee-list > a, .request-list > div { min-height: 65px; padding: 10px 2px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; border-bottom: 1px solid #edf0f4; }
.employee-list > a:last-child, .request-list > div:last-child { border-bottom: 0; }
.employee-list > a > span:nth-child(2), .request-list > div > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.employee-list b, .request-list b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.employee-list small, .request-list small { color: var(--app-muted); font-size: 10px; }
.employee-list em, .request-list > div > em { color: #8a93a4; font-size: 9px; font-style: normal; white-space: nowrap; }
.announcement-list article { padding: 13px 2px; display: grid; grid-template-columns: 36px 1fr; gap: 11px; border-bottom: 1px solid #edf0f4; }
.announcement-list article:last-child { border-bottom: 0; }
.announcement-list article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--app-primary); background: var(--app-primary-light); font-weight: 900; }
.announcement-list b { font-size: 12px; }
.announcement-list p { margin: 3px 0; color: var(--app-muted); font-size: 10px; }
.announcement-list small { color: #9aa2b0; font-size: 9px; }
.empty { min-height: 120px; padding: 25px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--app-muted); text-align: center; }
.empty > span { margin-bottom: 8px; font-size: 28px; }
.empty b { color: var(--app-ink); }
.empty p { margin: 4px 0 0; font-size: 12px; }

.page-actions { margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.page-actions > div { display: flex; align-items: center; gap: 9px; }
.page-subtitle { margin: -8px 0 17px; color: var(--app-muted); }
.search-form { min-width: 330px; display: flex; align-items: center; gap: 8px; }
.search-form input, .search-form select { min-width: 0; flex: 1; padding: 10px 12px; border: 1px solid var(--app-line); border-radius: 10px; background: #fff; outline: none; }
.search-form input:focus, .search-form select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 4px rgba(95,80,214,.08); }
.table-panel { overflow: visible; }
.table-tools { display: flex; align-items: center; gap: 8px; }
.table-tools input { min-width: 210px; }
.table-wrap { width: 100%; overflow-x: auto; border-radius: 0 0 var(--app-radius) var(--app-radius); }
.table-wrap table { width: 100%; min-width: 850px; border-collapse: collapse; }
th, td { padding: 13px 16px; border-bottom: 1px solid #edf0f4; text-align: left; vertical-align: middle; }
th { color: #737d90; background: #fafbfc; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .65px; white-space: nowrap; }
td { color: #3d485e; font-size: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #fbfbfe; }
td b { color: var(--app-ink); }
.block { display: block; }
td small.block { margin-top: 2px; color: var(--app-muted); font-size: 10px; }
.table-wrap.compact th, .table-wrap.compact td { padding-top: 8px; padding-bottom: 8px; }
.employee-cell { min-width: 220px; display: flex; align-items: center; gap: 10px; }
.employee-cell > span:last-child { min-width: 0; display: flex; flex-direction: column; }
.employee-cell b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-cell small { color: var(--app-muted); }
.actions { display: flex; gap: 6px; }
.actions a { padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 8px; font-size: 10px; font-weight: 850; }
.actions a:hover { color: var(--app-primary); background: var(--app-primary-light); }
.status { width: max-content; max-width: 170px; padding: 5px 9px; display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; color: #5e6777; background: #eef0f4; font-size: 9px; font-weight: 900; text-transform: capitalize; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.active, .status.approved, .status.present, .status.published, .status.paid, .status.completed, .status.resolved, .status.hired, .status.reimbursed, .status.done { color: #0c7b64; background: #e4f8f1; }
.status.pending, .status.review, .status.submitted, .status.draft, .status.open, .status.planned, .status.screening, .status.interview, .status.waiting, .status.in_progress, .status.trial { color: #a46610; background: #fff1dc; }
.status.rejected, .status.cancelled, .status.suspended, .status.failed, .status.void, .status.inactive, .status.locked, .status.at_risk, .status.blocked { color: #b53158; background: #fde9ef; }
.status.remote, .status.offer, .status.booked, .status.live { color: #356eaf; background: #e8f2ff; }

.form-page { max-width: 1380px; margin-inline: auto; }
.form-page-head { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-page-head h2 { margin: 0; font-size: 22px; }
.form-page-head p { margin: 4px 0 0; color: var(--app-muted); }
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: 17px; }
.form-layout > .panel { overflow: hidden; }
.form-grid { padding: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid.four { grid-template-columns: repeat(4, 1fr); }
.form-grid label { min-width: 0; display: flex; flex-direction: column; gap: 7px; color: #39455b; font-size: 11px; font-weight: 850; }
.form-grid label > span { display: flex; align-items: center; justify-content: space-between; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--app-line-strong); border-radius: 10px; color: var(--app-ink); background: #fff; outline: none; font-size: 12px; }
.form-grid textarea { min-height: 95px; resize: vertical; }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--app-primary); box-shadow: 0 0 0 4px rgba(95,80,214,.09); }
.form-grid input[type="file"] { padding: 8px; }
.form-grid input[type="color"] { padding: 4px; }
.form-grid .check, .check { flex-direction: row; align-items: center; gap: 8px; }
.form-grid .check input, .check input { width: auto; min-height: auto; }
.form-footer { padding: 16px 20px; display: flex; justify-content: flex-end; gap: 9px; border-top: 1px solid #edf0f4; background: #fafbfc; }
.profile-preview { position: sticky; top: 96px; padding: 26px; text-align: center; }
.profile-photo { width: 104px; height: 104px; margin: 0 auto 16px; display: grid; place-items: center; border: 7px solid #f1efff; border-radius: 50%; color: var(--app-primary); background: var(--app-primary-light); font-size: 32px; font-weight: 900; }
.profile-preview h3 { margin: 0; }
.profile-preview p { margin: 4px 0 18px; color: var(--app-muted); }
.profile-preview ul { padding: 0; list-style: none; text-align: left; }
.profile-preview li { padding: 9px 0; display: flex; justify-content: space-between; gap: 15px; border-bottom: 1px solid #edf0f4; color: var(--app-muted); font-size: 11px; }
.profile-preview li b { color: var(--app-ink); }

.profile-header { margin-bottom: 17px; padding: 25px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; box-shadow: var(--app-shadow-sm); }
.profile-main { min-width: 0; display: flex; align-items: center; gap: 17px; }
.profile-main > div:last-child { min-width: 0; }
.profile-title { display: flex; align-items: center; gap: 10px; }
.profile-title h2 { margin: 0; font-size: 22px; }
.profile-main p { margin: 4px 0; color: var(--app-muted); }
.profile-contact { display: flex; gap: 16px; color: #566176; font-size: 11px; }
.profile-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: start; gap: 17px; }
.profile-details { padding-bottom: 15px; }
.profile-details dl { margin: 0; padding: 10px 20px; }
.profile-details dl > div { padding: 10px 0; display: grid; grid-template-columns: 115px 1fr; gap: 10px; border-bottom: 1px solid #edf0f4; }
.profile-details dl > div:last-child { border-bottom: 0; }
.profile-details dt { color: var(--app-muted); font-size: 10px; }
.profile-details dd { margin: 0; color: var(--app-ink); font-size: 11px; font-weight: 750; overflow-wrap: anywhere; }
.tabs { margin-bottom: 12px; padding: 5px; display: flex; gap: 5px; overflow-x: auto; border: 1px solid var(--app-line); border-radius: 13px; background: #fff; }
.tabs button { padding: 9px 14px; border: 0; border-radius: 9px; color: var(--app-muted); background: transparent; font-size: 11px; font-weight: 850; white-space: nowrap; cursor: pointer; }
.tabs button.active { color: var(--app-primary); background: var(--app-primary-light); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.attendance-hero { margin-bottom: 17px; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 25px; border-radius: var(--app-radius-lg); color: #fff; background: radial-gradient(circle at 90% 0, rgba(255,255,255,.18), transparent 32%), linear-gradient(135deg, #173e4a, #167e70 62%, #2c9b83); box-shadow: 0 20px 50px rgba(24, 106, 94, .2); }
.attendance-hero h2 { margin: 7px 0 4px; font-size: 27px; }
.attendance-hero p { margin: 0; color: #d3eee8; }
.live-clock { margin-top: 8px; color: #fff; font-size: 34px; font-weight: 900; letter-spacing: 1px; }
.punch-form { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.punch-button { width: 112px; height: 112px; display: grid; place-items: center; border: 9px solid rgba(255,255,255,.19); border-radius: 50%; color: #0f725f; background: #fff; box-shadow: 0 14px 34px rgba(16, 75, 67, .25); font-size: 14px; font-weight: 900; cursor: pointer; }
.punch-button.out { color: #b42f56; }
.location-state { max-width: 180px; color: #d6f1eb; font-size: 10px; }
.selfie-input { max-width: 205px; color: #e8f7f3; font-size: 10px; }
.inline-form { display: inline; }
.decision-inline { display: flex; align-items: center; gap: 6px; }
.decision-inline select, .decision-inline input { max-width: 125px; padding: 7px 8px; border: 1px solid var(--app-line); border-radius: 8px; font-size: 10px; }
.decision-inline button { padding: 7px 10px; border: 0; border-radius: 8px; color: #fff; background: var(--app-primary); font-size: 10px; font-weight: 850; cursor: pointer; }
.decision-inline button.reject, .decision-inline .reject { background: var(--app-danger); }
.decision-inline button.approve, .decision-inline .approve { background: var(--app-success); }

.leave-balance-grid { margin: 0 0 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.leave-balance { padding: 20px; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; box-shadow: var(--app-shadow-sm); }
.leave-balance > div:first-child { display: flex; align-items: center; gap: 11px; }
.leave-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-weight: 900; }
.leave-balance h3 { margin: 0; font-size: 14px; }
.leave-balance p { margin: 2px 0 0; color: var(--app-muted); font-size: 10px; }
.leave-balance > b { margin: 18px 0 8px; display: block; font-size: 27px; }
.leave-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #eceef3; }
.leave-progress span { height: 100%; display: block; border-radius: inherit; background: var(--app-primary); }
.muted { color: var(--app-muted); }

.payroll-action { margin-bottom: 17px; min-height: 165px; background: radial-gradient(circle at 90% 0, rgba(255,255,255,.16), transparent 30%), linear-gradient(135deg, #32315f, #5256a6 62%, #6970bd); }
.payroll-action form { display: flex; align-items: end; gap: 9px; }
.payroll-action label { display: flex; flex-direction: column; gap: 6px; color: #e1e3f3; font-size: 10px; font-weight: 800; }
.payroll-action input { padding: 10px 11px; border: 1px solid rgba(255,255,255,.3); border-radius: 10px; color: #fff; background: rgba(255,255,255,.1); }
.payroll-run-grid { margin-bottom: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.payroll-run { overflow: hidden; border: 1px solid var(--app-line); border-radius: var(--app-radius); background: #fff; box-shadow: var(--app-shadow-sm); }
.payroll-run > header { padding: 17px; display: flex; align-items: start; justify-content: space-between; gap: 12px; border-bottom: 1px solid #edf0f4; }
.payroll-run h3 { margin: 0; font-size: 14px; }
.payroll-run header small { color: var(--app-muted); font-size: 10px; }
.run-metrics { padding: 15px 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.run-metrics div { display: flex; flex-direction: column; }
.run-metrics small { color: var(--app-muted); font-size: 9px; }
.run-metrics b { font-size: 13px; }
.payroll-run footer { padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #fafbfc; }
.payroll-run footer small { color: var(--app-muted); font-size: 9px; }
.compliance-note { margin-top: 15px; padding: 15px; display: flex; gap: 11px; border: 1px solid #efd4a9; border-radius: 13px; color: #70501c; background: #fff8ec; }
.compliance-note > span { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: #ffebc8; font-weight: 900; }
.compliance-note b { font-size: 11px; }
.compliance-note p { margin: 3px 0 0; font-size: 10px; }

.module-hero > div { display: flex; align-items: center; gap: 18px; }
.module-large-icon { width: 68px; height: 68px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: rgba(255,255,255,.13); font-size: 27px; font-weight: 900; }
.module-stats { margin: 17px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.module-stats > div { min-height: 105px; padding: 17px; display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--app-line); border-radius: 14px; background: #fff; box-shadow: var(--app-shadow-sm); }
.module-stats small { color: var(--app-muted); font-size: 10px; }
.module-stats b { margin: 2px 0; font-size: 24px; }
.module-stats em { color: #8d95a4; font-size: 9px; font-style: normal; }
.detail-chips { min-width: 240px; display: flex; gap: 5px; flex-wrap: wrap; }
.detail-chips span { max-width: 170px; padding: 6px 8px; display: flex; flex-direction: column; border-radius: 8px; background: #f1f0f7; font-size: 10px; }
.detail-chips small { color: #888f9e; font-size: 8px; text-transform: uppercase; }
.row-menu { position: relative; }
.row-menu > button { width: 34px; height: 30px; border: 0; border-radius: 8px; background: #eef0f4; cursor: pointer; font-weight: 900; }
.row-menu > div { position: absolute; top: 35px; right: 0; z-index: 40; width: 210px; padding: 10px; display: none; border: 1px solid var(--app-line); border-radius: 12px; background: #fff; box-shadow: var(--app-shadow); }
.row-menu.open > div { display: block; }
.row-menu form { display: flex; flex-direction: column; gap: 7px; }
.row-menu form + form { margin-top: 7px; padding-top: 7px; border-top: 1px solid #edf0f4; }
.row-menu label { color: var(--app-muted); font-size: 9px; font-weight: 800; }
.row-menu select { width: 100%; margin-top: 4px; padding: 8px; border: 1px solid var(--app-line); border-radius: 8px; font-size: 10px; }
.row-menu form button { padding: 8px; border: 0; border-radius: 8px; color: var(--app-primary); background: var(--app-primary-light); font-size: 10px; font-weight: 900; cursor: pointer; }
.row-menu form button.danger { color: #b23157; background: #fde9ef; }
.workflow-board { margin: 17px 0; padding-bottom: 6px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; }
.workflow-column { min-height: 190px; border: 1px solid #dfe3eb; border-radius: 15px; background: #eef0f5; }
.workflow-column > header { padding: 13px; display: flex; align-items: center; justify-content: space-between; }
.workflow-column > header b { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; }
.workflow-column > header span { padding: 2px 8px; border-radius: 20px; background: #fff; font-size: 9px; font-weight: 900; }
.workflow-column > div { padding: 0 8px 8px; }
.workflow-column article { margin-bottom: 8px; padding: 12px; display: flex; flex-direction: column; border: 1px solid #e2e5ec; border-radius: 11px; background: #fff; box-shadow: 0 4px 12px rgba(40,45,76,.06); }
.workflow-column article small { color: var(--app-muted); font-size: 8px; }
.workflow-column article b { margin: 4px 0; font-size: 11px; }
.workflow-column article p { margin: 0; color: var(--app-muted); font-size: 9px; }

.settings-grid { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 17px; }
.settings-form { padding: 20px; }
.settings-form.compact { border-bottom: 1px solid #edf0f4; }
.settings-form .btn { margin-top: 16px; }
.mini-records { max-height: 380px; padding: 8px 18px 18px; overflow-y: auto; }
.mini-records > div { min-height: 57px; padding: 10px 0; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid #edf0f4; }
.mini-records > div:last-child { border-bottom: 0; }
.mini-records > div > span:nth-child(2) { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.mini-records b { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mini-records small { color: var(--app-muted); font-size: 9px; }
.mini-records em { font-style: normal; }
.check-row { display: flex !important; align-items: center; gap: 8px; }
.check-row input { width: auto !important; }
.roster-form { background: #faf9fd; }
.enquiries > div { grid-template-columns: 38px 1fr auto; align-items: start; }
.enquiries p { margin: 5px 0; color: #596277; font-size: 10px; }

.modal { width: min(650px, calc(100% - 28px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 30px 90px rgba(21,24,48,.35); }
.modal.wide-modal { width: min(900px, calc(100% - 28px)); }
.modal::backdrop { background: rgba(20,22,36,.58); backdrop-filter: blur(4px); }
.modal > form, .modal > div { padding: 24px; }
.modal-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef0f4; cursor: pointer; font-size: 20px; }

.error-page { padding: 100px 20px; text-align: center; }
.error-code { color: #dedaf0; font-size: 88px; font-weight: 900; line-height: 1; }
.error-page h1 { font-size: 31px; }
.error-page p { color: var(--app-muted); }

.auth-body { min-height: 100vh; background: #f5f6fb; }
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.08fr .92fr; }
.auth-art { padding: 35px 48px; display: flex; flex-direction: column; color: #fff; background: radial-gradient(circle at 18% 18%, rgba(255,255,255,.14), transparent 27%), linear-gradient(145deg, #25213f, #5846bc 70%, #7d59ca); }
.auth-copy { width: 100%; max-width: 620px; margin: auto; }
.auth-copy h1 { margin: 15px 0; font-size: clamp(42px, 5vw, 56px); line-height: 1.04; letter-spacing: -2.4px; }
.auth-copy > p { color: #d7d3e7; font-size: 16px; }
.mini-dashboard { margin-top: 34px; overflow: hidden; border: 7px solid #201d2e; border-radius: 22px; color: var(--app-ink); background: #f7f7fb; box-shadow: 0 30px 80px rgba(18,14,35,.35); }
.mini-head { height: 38px; padding: 0 13px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #e8eaf0; background: #fff; }
.mini-head span { width: 7px; height: 7px; border-radius: 50%; background: #d7d9df; }
.mini-grid { padding: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-grid > div { padding: 13px; display: flex; flex-direction: column; border: 1px solid #e6e8ef; border-radius: 12px; background: #fff; }
.mini-grid small { color: #7d8596; font-size: 8px; }
.mini-grid b { font-size: 18px; }
.mini-grid em { color: var(--app-success); font-size: 8px; font-style: normal; }
.mini-grid .wide { grid-column: 1 / -1; }
.spark { height: 70px; display: flex; align-items: end; gap: 8px; }
.spark i { flex: 1; display: block; border-radius: 4px 4px 0 0; background: linear-gradient(#7662d7, #d7d1f6); }
.spark i:nth-child(1){height:25%}.spark i:nth-child(2){height:42%}.spark i:nth-child(3){height:38%}.spark i:nth-child(4){height:62%}.spark i:nth-child(5){height:50%}.spark i:nth-child(6){height:74%}.spark i:nth-child(7){height:88%}
.auth-panel { padding: 34px; display: grid; place-items: center; }
.auth-card { width: min(470px, 100%); padding: 34px; border: 1px solid var(--app-line); border-radius: 22px; background: #fff; box-shadow: 0 22px 65px rgba(36,42,73,.09); }
.auth-heading h1 { margin: 8px 0; font-size: 30px; line-height: 1.16; letter-spacing: -.8px; }
.auth-heading p { margin: 0; color: var(--app-muted); font-size: 13px; }
.auth-form { margin-top: 23px; display: flex; flex-direction: column; gap: 15px; }
.auth-form label { display: flex; flex-direction: column; gap: 6px; }
.auth-form label > span { color: #354056; font-size: 11px; font-weight: 850; }
.auth-form input, .auth-form select { width: 100%; min-height: 44px; padding: 11px 12px; border: 1px solid var(--app-line-strong); border-radius: 10px; outline: none; }
.auth-form input:focus, .auth-form select:focus { border-color: var(--app-primary); box-shadow: 0 0 0 4px rgba(95,80,214,.09); }
.password-field { position: relative; }
.password-field input { padding-right: 65px; }
.password-field button { position: absolute; top: 50%; right: 8px; padding: 5px 8px; border: 0; border-radius: 7px; background: #eef0f4; font-size: 9px; cursor: pointer; transform: translateY(-50%); }
.form-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-between a, .auth-bottom a { color: var(--app-primary); font-size: 10px; font-weight: 900; }
.auth-form .check { flex-direction: row; align-items: center; }
.auth-form .check input { width: auto; min-height: auto; }
.auth-form .check span { font-size: 10px; font-weight: 600; }
.auth-separator { position: relative; margin: 24px 0; border-top: 1px solid var(--app-line); text-align: center; }
.auth-separator span { position: relative; top: -11px; padding: 0 12px; color: #8b93a3; background: #fff; font-size: 9px; }
.demo-credentials { margin-top: 15px; padding: 13px; display: flex; flex-direction: column; border-radius: 11px; background: var(--app-primary-light); }
.demo-credentials b { font-size: 10px; }
.demo-credentials small { margin-top: 3px; color: #6a6680; font-size: 9px; }
.auth-bottom { margin-top: 18px; color: var(--app-muted); text-align: center; font-size: 10px; }
.compact-form { gap: 12px; }

@media (max-width: 1180px) {
  .app-shell { grid-template-columns: 244px minmax(0, 1fr); }
  .sidebar { width: 244px; }
  .metric-cards, .module-stats { grid-template-columns: 1fr 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-grid.bottom { grid-template-columns: 1fr 1fr; }
  .form-grid.four { grid-template-columns: 1fr 1fr; }
  .payroll-run-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .app-shell { display: block; }
  .sidebar { width: 280px; transform: translateX(-102%); transition: transform .23s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open ~ * .sidebar-backdrop { display: block; }
  body.sidebar-open .sidebar-backdrop { display: block; }
  .sidebar-close, .menu-button { display: grid; }
  .app-main { min-width: 0; }
  .topbar { padding: 0 17px; }
  .page-content { padding: 18px 17px 40px; }
  .dashboard-grid.bottom { grid-template-columns: 1fr; }
  .form-layout, .profile-grid { grid-template-columns: 1fr; }
  .profile-preview { display: none; }
  .attendance-hero, .payroll-action { align-items: flex-start; flex-direction: column; }
  .punch-form, .payroll-action form { justify-content: flex-start; }
  .leave-balance-grid { grid-template-columns: 1fr 1fr; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 580px) {
  .topbar-left small { display: none; }
  .topbar-left h1 { font-size: 17px; }
  .notification { display: none; }
  .user-copy { display: none; }
  .user-menu > button { min-height: 42px; padding: 3px 7px 3px 3px; }
  .welcome-banner, .module-hero, .payroll-action { min-height: 0; padding: 25px; align-items: flex-start; flex-direction: column; }
  .welcome-banner h1, .module-hero h1, .payroll-action h2 { font-size: 25px; }
  .banner-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .metric-cards, .module-stats, .leave-balance-grid, .payroll-run-grid { grid-template-columns: 1fr; }
  .quick-actions { grid-template-columns: 1fr; }
  .page-actions { align-items: stretch; flex-direction: column; }
  .page-actions > div { flex-wrap: wrap; }
  .search-form { width: 100%; min-width: 0; }
  .form-grid, .form-grid.four { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .form-page-head { align-items: flex-start; flex-direction: column; }
  .form-page-head .btn { width: 100%; }
  .profile-header { align-items: flex-start; flex-direction: column; }
  .profile-main { align-items: flex-start; flex-direction: column; }
  .profile-contact { flex-direction: column; gap: 4px; }
  .profile-title { align-items: flex-start; flex-direction: column; }
  .attendance-hero { padding: 24px; }
  .punch-form { width: 100%; align-items: stretch; flex-direction: column; }
  .punch-button { width: 100%; height: 58px; border-width: 5px; border-radius: 13px; }
  .payroll-action form { width: 100%; align-items: stretch; flex-direction: column; }
  .module-hero > div { align-items: flex-start; }
  .module-large-icon { width: 52px; height: 52px; border-radius: 15px; }
  .auth-panel { padding: 15px; }
  .auth-card { padding: 24px; }
  .table-wrap table { min-width: 780px; }
  .panel-head { align-items: flex-start; flex-direction: column; }
  .panel-head input, .panel-head select, .table-tools { width: 100%; max-width: none; }
  .table-tools input { min-width: 0; }
  .large-chart { height: 235px; padding-left: 10px; }
  .chart-summary { padding-left: 52px; }
}
.avatar-image{object-fit:cover;border:3px solid #fff;box-shadow:0 5px 18px rgba(32,25,68,.14)}
.quick-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.quick-contact-grid a{display:flex;flex-direction:column;gap:5px;padding:18px;border:1px solid var(--app-line);border-radius:14px;background:var(--app-soft);color:var(--app-ink)}.quick-contact-grid a span{font-size:13px;color:var(--app-muted);overflow-wrap:anywhere}.colleague-card{padding:28px}.colleague-card h2{margin:8px 0}.form-note{padding:14px 16px;border-radius:12px;background:var(--app-soft);border:1px solid var(--app-line);color:var(--app-muted)}.table-empty-search{text-align:center;padding:24px;color:var(--app-muted)}
@media(max-width:620px){.quick-contact-grid{grid-template-columns:1fr}}

.chart-period { padding: 7px 10px; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-muted); background: var(--app-soft); font-size: 11px; font-weight: 800; }
.trend-chart { min-height: 285px; padding: 24px 10px 8px; display: grid; grid-template-columns: repeat(7, minmax(42px, 1fr)); align-items: end; gap: 14px; border-bottom: 1px solid var(--app-line); background: repeating-linear-gradient(to top, transparent 0, transparent 61px, #eef1f6 62px); }
.trend-column { min-width: 0; display: grid; grid-template-rows: 220px auto auto; justify-items: center; gap: 5px; }
.trend-bars { width: min(46px, 100%); height: 220px; display: flex; align-items: end; justify-content: center; gap: 5px; }
.trend-bars span { width: 42%; min-height: 5px; border-radius: 7px 7px 3px 3px; transition: height .25s ease; }
.trend-headcount { background: linear-gradient(180deg, #7b68df, #5f50d6); box-shadow: 0 7px 16px rgba(95,80,214,.18); }
.trend-attendance { background: linear-gradient(180deg, #4fc8ad, #168d74); box-shadow: 0 7px 16px rgba(22,141,116,.15); }
.trend-column b { font-size: 11px; }
.trend-column small { color: var(--app-muted); font-size: 10px; }
@media (max-width: 700px) { .trend-chart { min-width: 620px; } .chart-panel { overflow-x: auto; } }

/* HRMS v4 dashboard, preferences, security and backup center */
.accent-blue { --app-primary:#2f6fd1; --app-primary-dark:#2358ad; --app-primary-light:#e8f1ff; }
.accent-green { --app-primary:#12806b; --app-primary-dark:#0b6756; --app-primary-light:#e4f7f1; }
.accent-orange { --app-primary:#c56b18; --app-primary-dark:#9f5210; --app-primary-light:#fff0df; }
.density-compact .page-content { padding: 20px; }
.density-compact .panel-head { min-height: 58px; padding: 13px 16px; }
.density-compact th, .density-compact td { padding: 9px 12px; }
.density-compact .sidebar-nav a { min-height: 38px; padding-block: 6px; }

.dashboard-hero,.settings-hero { position:relative; min-height:220px; padding:36px 40px; display:flex; align-items:center; justify-content:space-between; gap:32px; overflow:hidden; border-radius:24px; color:#fff; background:radial-gradient(circle at 82% 10%,rgba(255,255,255,.19),transparent 28%),linear-gradient(135deg,#252053,#5d4bd0 60%,#8261d2); box-shadow:0 24px 60px rgba(62,49,145,.22); }
.dashboard-hero::after,.settings-hero::after { content:""; position:absolute; width:340px; height:340px; right:-160px; bottom:-220px; border:1px solid rgba(255,255,255,.18); border-radius:50%; box-shadow:0 0 0 45px rgba(255,255,255,.04),0 0 0 90px rgba(255,255,255,.025); }
.dashboard-hero > *,.settings-hero > * { position:relative; z-index:1; }
.dashboard-hero-copy { max-width:720px; }
.dashboard-hero h1,.settings-hero h1 { margin:9px 0 8px; font-size:clamp(30px,3.5vw,45px); line-height:1.06; letter-spacing:-1.7px; }
.dashboard-hero p,.settings-hero p { max-width:710px; margin:0; color:#e1def2; font-size:14px; }
.hero-workforce-card { min-width:330px; padding:20px; display:flex; align-items:center; gap:18px; border:1px solid rgba(255,255,255,.18); border-radius:20px; background:rgba(255,255,255,.12); backdrop-filter:blur(12px); }
.hero-workforce-card > div:last-child { display:flex; flex-direction:column; }
.hero-workforce-card small { color:#dcd8ee; font-size:10px; text-transform:uppercase; letter-spacing:.8px; }
.hero-workforce-card b { margin:3px 0; font-size:14px; }
.hero-workforce-card span { color:#d9d6e8; font-size:10px; }
.attendance-ring { --value:0; width:88px; height:88px; flex:0 0 auto; padding:7px; border-radius:50%; background:conic-gradient(#fff calc(var(--value)*1%),rgba(255,255,255,.18) 0); }
.attendance-ring > div { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:#5a49c4; }
.attendance-ring b { margin:0; font-size:20px; }
.attendance-ring span { color:#e9e7f5; font-size:8px; }

.executive-metrics { margin:18px 0; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:13px; }
.executive-card { min-height:128px; padding:17px; display:flex; flex-direction:column; gap:9px; border:1px solid var(--app-line); border-radius:17px; background:var(--app-surface); box-shadow:var(--app-shadow-sm); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.executive-card:hover { transform:translateY(-3px); border-color:#cfc9ef; box-shadow:0 15px 34px rgba(33,42,73,.11); }
.executive-card > span { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; font-weight:900; }
.executive-card > div { display:flex; flex-direction:column; }
.executive-card small { color:var(--app-muted); font-size:9px; text-transform:uppercase; letter-spacing:.55px; }
.executive-card b { margin:2px 0; color:var(--app-ink); font-size:20px; line-height:1.15; }
.executive-card em { color:#8992a3; font-size:9px; font-style:normal; }
.executive-card.violet > span { color:#5f50d6; background:#eeeaff; }.executive-card.green > span { color:#10866f; background:#e4f8f1; }.executive-card.pink > span { color:#c33f68; background:#fde9ef; }.executive-card.orange > span { color:#b66a12; background:#fff1dc; }.executive-card.blue > span { color:#3973b6; background:#e8f2ff; }.executive-card.gray > span { color:#586277; background:#eef0f4; }
.dashboard-primary-grid { margin-bottom:17px; display:grid; grid-template-columns:minmax(0,1.65fr) minmax(330px,.8fr); gap:17px; }
.dashboard-insight-grid { margin-bottom:17px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.dashboard-secondary-grid { margin-bottom:17px; display:grid; grid-template-columns:1fr 1fr; gap:17px; }
.modern-trend-chart { min-height:315px; padding:32px 24px 12px; display:grid; grid-template-columns:repeat(7,minmax(42px,1fr)); align-items:end; gap:17px; background:repeating-linear-gradient(to top,transparent 0,transparent 65px,#eef1f6 66px); }
.modern-trend-column { height:245px; display:grid; grid-template-rows:1fr auto auto; gap:4px; align-items:end; text-align:center; }
.modern-bars { height:100%; display:flex; align-items:end; justify-content:center; gap:5px; }
.modern-bars i,.modern-bars b { width:12px; min-height:5px; border-radius:8px 8px 3px 3px; }
.modern-bars i { background:linear-gradient(180deg,#7f6be0,#b8aff0); }.modern-bars b { background:linear-gradient(180deg,#20a986,#8ce0c8); }
.modern-trend-column > span { color:#626d80; font-size:10px; font-weight:800; }.modern-trend-column > small { color:#9aa2b0; font-size:8px; }
.chart-summary.modern { padding:14px 22px 18px; border-top:1px solid var(--app-line); }
.action-center-grid { padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.action-center-grid a { min-height:92px; padding:13px; display:grid; grid-template-columns:40px 1fr auto; grid-template-rows:auto auto; align-items:center; gap:1px 10px; border:1px solid var(--app-line); border-radius:14px; background:var(--app-surface); }
.action-center-grid a:hover { border-color:#cfc8ee; box-shadow:0 9px 22px rgba(35,42,72,.08); }
.action-center-grid .action-icon { grid-row:1/3; }.action-center-grid b { font-size:11px; }.action-center-grid small { color:var(--app-muted); font-size:9px; }.action-center-grid em { grid-row:1/3; grid-column:3; color:var(--app-primary); font-style:normal; font-weight:900; }
.action-icon { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; font-weight:900; }.action-icon.green{color:#10866f;background:#e4f8f1}.action-icon.pink{color:#c33f68;background:#fde9ef}.action-icon.violet{color:#5f50d6;background:#eeeaff}.action-icon.blue{color:#3973b6;background:#e8f2ff}.action-icon.orange{color:#b66a12;background:#fff1dc}.action-icon.gray{color:#596377;background:#eef0f4}
.attendance-mix-body { min-height:260px; padding:23px; display:flex; align-items:center; justify-content:center; gap:28px; }
.mix-donut { width:138px; height:138px; flex:0 0 auto; padding:16px; border-radius:50%; background:conic-gradient(#21a585 0 calc(var(--present)*1%),#3d7fc4 0 calc((var(--present) + var(--remote))*1%),#e5a535 0 calc((var(--present) + var(--remote) + var(--late))*1%),#a970d0 0 calc((var(--present) + var(--remote) + var(--late) + var(--leave))*1%),#e0667e 0); }
.mix-donut > div { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:50%; background:var(--app-surface); }.mix-donut b{font-size:27px}.mix-donut small{color:var(--app-muted);font-size:9px}
.mix-legend { min-width:130px; display:flex; flex-direction:column; gap:9px; }.mix-legend span{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:7px}.mix-legend i{width:8px;height:8px;border-radius:50%}.mix-legend i.present{background:#21a585}.mix-legend i.remote{background:#3d7fc4}.mix-legend i.late{background:#e5a535}.mix-legend i.leave{background:#a970d0}.mix-legend i.absent{background:#e0667e}.mix-legend b{font-size:10px}.mix-legend em{color:var(--app-muted);font-size:10px;font-style:normal}
.department-bars { padding:18px 20px 22px; }.department-bars > div{margin-bottom:15px}.department-bars span{margin-bottom:6px;display:flex;justify-content:space-between;gap:10px}.department-bars span b{font-size:10px}.department-bars span em{color:var(--app-muted);font-size:10px;font-style:normal}.department-bars > div > i{height:8px;display:block;overflow:hidden;border-radius:999px;background:#edf0f5}.department-bars > div > i b{height:100%;display:block;border-radius:999px;background:linear-gradient(90deg,var(--app-primary),#a98be1)}
.upcoming-list { padding:8px 18px 14px; }.upcoming-list > div{min-height:60px;padding:9px 0;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--app-line)}.upcoming-list > div:last-child{border-bottom:0}.upcoming-list > div > span{width:42px;height:42px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;color:var(--app-primary);background:var(--app-primary-light)}.upcoming-list > div > span b{font-size:14px;line-height:1}.upcoming-list > div > span small{font-size:7px;text-transform:uppercase}.upcoming-list > div > div{display:flex;flex-direction:column}.upcoming-list > div > div b{font-size:10px}.upcoming-list > div > div small{color:var(--app-muted);font-size:8px}
.approval-center-list,.payslip-mini { padding:8px 18px 15px; }.approval-center-list a,.payslip-mini a{min-height:62px;padding:9px 0;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;border-bottom:1px solid var(--app-line)}.approval-center-list a:last-child,.payslip-mini a:last-child{border-bottom:0}.approval-number{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;color:var(--app-primary);background:var(--app-primary-light);font-size:15px;font-weight:900}.approval-center-list a > span:nth-child(2),.payslip-mini a > span:nth-child(2){display:flex;flex-direction:column}.approval-center-list b,.payslip-mini b{font-size:10px}.approval-center-list small,.payslip-mini small{color:var(--app-muted);font-size:8px}.approval-center-list em,.payslip-mini em{color:var(--app-primary);font-size:9px;font-style:normal;font-weight:850}

.modern-hero { margin-bottom:17px; }.hero-stat{min-width:210px;padding:18px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:rgba(255,255,255,.12);display:flex;flex-direction:column}.hero-stat small{color:#ddd9ef;font-size:9px;text-transform:uppercase}.hero-stat b{font-size:36px;line-height:1.1}.hero-stat span{color:#e4e1f0;font-size:10px}
.preference-layout { display:grid; grid-template-columns:minmax(320px,.8fr) minmax(0,1.3fr); gap:17px; align-items:start; }.preference-card{overflow:hidden}.preference-options{padding:20px}.preference-options fieldset{margin:0 0 22px;padding:0;border:0}.preference-options legend{margin-bottom:9px;color:var(--app-ink);font-size:11px;font-weight:900}.choice-grid{display:grid;gap:10px}.choice-grid.three{grid-template-columns:repeat(3,1fr)}.choice-grid.two{grid-template-columns:1fr 1fr}.visual-choice,.text-choice{position:relative;cursor:pointer}.visual-choice input,.text-choice input,.accent-options input{position:absolute;opacity:0;pointer-events:none}.visual-choice{padding:10px;border:1px solid var(--app-line);border-radius:13px;background:var(--app-surface)}.visual-choice:has(input:checked),.text-choice:has(input:checked){border-color:var(--app-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--app-primary) 12%,transparent)}.visual-choice > b{display:block;margin-top:7px;font-size:9px;text-align:center}.theme-preview{height:70px;padding:7px;display:grid;grid-template-columns:20px 1fr;grid-template-rows:15px 1fr;gap:5px;border-radius:8px;background:#f3f5fa}.theme-preview i:first-child{grid-row:1/3;border-radius:4px;background:#25283c}.theme-preview i:nth-child(2),.theme-preview i:nth-child(3){border-radius:4px;background:#fff}.theme-preview.dark{background:#1f2330}.theme-preview.dark i:nth-child(2),.theme-preview.dark i:nth-child(3){background:#303646}.theme-preview.system{background:linear-gradient(135deg,#f3f5fa 50%,#1f2330 50%)}.accent-options{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.accent-options label{padding:10px;display:flex;align-items:center;gap:7px;border:1px solid var(--app-line);border-radius:10px;cursor:pointer;font-size:9px}.accent-options label:has(input:checked){border-color:var(--app-primary);background:var(--app-primary-light)}.accent-dot{width:15px;height:15px;border-radius:50%}.accent-dot.purple{background:#5f50d6}.accent-dot.blue{background:#2f6fd1}.accent-dot.green{background:#12806b}.accent-dot.orange{background:#c56b18}.text-choice{padding:14px;display:flex;border:1px solid var(--app-line);border-radius:12px}.text-choice span{display:flex;flex-direction:column}.text-choice b{font-size:10px}.text-choice small{color:var(--app-muted);font-size:8px}.preference-select{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:850}.preference-select select{padding:11px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);color:var(--app-ink)}.widget-toggle-grid{padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.widget-toggle{position:relative;min-height:78px;padding:13px;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:10px;border:1px solid var(--app-line);border-radius:13px;cursor:pointer}.widget-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;color:var(--app-primary);background:var(--app-primary-light);font-size:11px;font-weight:900}.widget-toggle > span:nth-child(2){display:flex;flex-direction:column}.widget-toggle b{font-size:10px}.widget-toggle small{color:var(--app-muted);font-size:8px}.widget-toggle input{position:absolute;opacity:0}.widget-toggle > i{width:36px;height:21px;padding:3px;display:flex;align-items:center;border-radius:999px;background:#cfd4df;transition:.2s}.widget-toggle > i::after{content:"";width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}.widget-toggle input:checked + i{background:var(--app-primary)}.widget-toggle input:checked + i::after{transform:translateX(15px)}.preference-footer{padding:15px 18px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--app-line);background:var(--app-soft);font-size:9px;color:var(--app-muted)}

.security-hero{background:radial-gradient(circle at 82% 10%,rgba(255,255,255,.18),transparent 30%),linear-gradient(135deg,#17324c,#285c78 58%,#347d82)}.backup-hero{background:radial-gradient(circle at 82% 10%,rgba(255,255,255,.18),transparent 30%),linear-gradient(135deg,#243047,#435777 58%,#5b6e8e)}.security-score{min-width:180px;padding:17px;display:flex;align-items:center;gap:13px;border:1px solid rgba(255,255,255,.17);border-radius:18px;background:rgba(255,255,255,.11)}.score-ring{width:68px;height:68px;display:flex;align-items:center;justify-content:center;border:7px solid rgba(255,255,255,.23);border-top-color:#7fe0c6;border-radius:50%}.score-ring b{font-size:19px}.score-ring span{font-size:8px}.security-score > small{color:#e3edf2;font-size:9px}.security-summary-grid,.backup-overview{margin:17px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.security-summary,.backup-overview > div{min-height:96px;padding:15px;display:flex;align-items:center;gap:11px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface);box-shadow:var(--app-shadow-sm)}.security-summary > div,.backup-overview > div{display:flex;flex-direction:column}.security-summary small,.backup-overview small{color:var(--app-muted);font-size:8px;text-transform:uppercase}.security-summary b,.backup-overview b{font-size:11px}.backup-overview em{color:var(--app-muted);font-size:8px;font-style:normal}.shield-icon{width:37px;height:37px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;font-weight:900}.shield-icon.success{color:#0d8068;background:#e4f8f1}.shield-icon.warning{color:#aa6811;background:#fff1dc}.shield-icon.info{color:#356fae;background:#e8f2ff}.shield-icon.danger{color:#b43158;background:#fde9ef}.security-grid-layout,.backup-grid{grid-template-columns:1fr 1fr}.security-card-body{padding:20px}.security-card-body p{margin-top:0;color:var(--app-muted);font-size:10px}.setup-key{padding:13px;display:grid;grid-template-columns:1fr auto;gap:5px 10px;border:1px dashed #bdb6df;border-radius:12px;background:var(--app-primary-light)}.setup-key small{grid-column:1/3;color:var(--app-muted);font-size:8px}.setup-key code{overflow-wrap:anywhere;font-size:12px;font-weight:800}.btn-sm{padding:7px 10px!important;font-size:9px!important}.uri-details{margin:12px 0}.uri-details summary{cursor:pointer;font-size:9px;font-weight:800}.uri-details code{margin-top:8px;display:block;overflow-wrap:anywhere;font-size:8px}.inline-security-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:10px}.inline-security-form label,.stacked-label{display:flex;flex-direction:column;gap:6px;font-size:9px;font-weight:800}.inline-security-form input,.stacked-label input{min-height:40px;padding:9px 10px;border:1px solid var(--app-line);border-radius:9px;background:var(--app-surface);color:var(--app-ink)}.session-list,.login-history{padding:7px 18px 14px}.session-list > div,.login-history > div{min-height:62px;padding:9px 0;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;border-bottom:1px solid var(--app-line)}.session-list > div:last-child,.login-history > div:last-child{border-bottom:0}.session-device{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;color:var(--app-primary);background:var(--app-primary-light)}.session-device.danger{color:#b43158;background:#fde9ef}.session-list span:nth-child(2),.login-history span:nth-child(2){min-width:0;display:flex;flex-direction:column}.session-list b,.login-history b{overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.session-list small,.login-history small{color:var(--app-muted);font-size:8px}.login-history{max-height:420px;overflow:auto}.event-dot{width:9px;height:9px;margin-left:14px;border-radius:50%}.event-dot.success{background:#19a17e}.event-dot.danger{background:#d34b6d}.login-history em{color:var(--app-muted);font-size:8px;font-style:normal}.btn-link{padding:0;border:0;color:var(--app-primary);background:none;font-size:9px;font-weight:900;cursor:pointer}.btn-link.danger{color:#bc345c}.security-policy-panel{margin-top:17px}.admin-events{max-height:410px}

.backup-overview > div{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto auto}.backup-overview > div .shield-icon{grid-row:1/4}.backup-scope-card{margin-bottom:16px;padding:14px;display:flex;gap:11px;border:1px solid var(--app-line);border-radius:13px;background:var(--app-soft)}.backup-scope-card > span{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;color:var(--app-primary);background:var(--app-primary-light);font-weight:900}.backup-scope-card > div{display:flex;flex-direction:column}.backup-scope-card b{font-size:10px}.backup-scope-card small{color:var(--app-muted);font-size:8px}.switch-row{position:relative;margin-bottom:14px;padding:13px;display:grid;grid-template-columns:1fr 40px;align-items:center;border:1px solid var(--app-line);border-radius:12px}.switch-row > span{display:flex;flex-direction:column}.switch-row b{font-size:10px}.switch-row small{color:var(--app-muted);font-size:8px}.switch-row input{position:absolute;opacity:0}.switch-row > i{width:38px;height:22px;padding:3px;display:flex;border-radius:999px;background:#cfd4df}.switch-row > i::after{content:"";width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}.switch-row input:checked + i{background:var(--app-primary)}.switch-row input:checked + i::after{transform:translateX(16px)}.backup-table{margin-top:17px}.checksum{padding:5px 7px;border-radius:7px;background:var(--app-soft);font-size:8px}.backup-actions{display:flex;align-items:center;gap:8px}.backup-actions form{display:inline}.settings-shortcuts{margin:17px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.settings-shortcuts a{min-height:94px;padding:15px;display:grid;grid-template-columns:43px 1fr auto;align-items:center;gap:11px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface);box-shadow:var(--app-shadow-sm)}.settings-shortcuts a > span{width:43px;height:43px;display:grid;place-items:center;border-radius:12px;color:var(--app-primary);background:var(--app-primary-light);font-weight:900}.settings-shortcuts a > div{display:flex;flex-direction:column}.settings-shortcuts b{font-size:11px}.settings-shortcuts small{color:var(--app-muted);font-size:8px}.settings-shortcuts em{color:var(--app-primary);font-size:9px;font-style:normal;font-weight:900}.payslip-color-preview{min-height:70px;padding:11px;display:grid;grid-template-columns:15px 1fr;grid-template-rows:auto auto;gap:2px 8px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-soft)}.payslip-color-preview i{grid-row:1/3;width:15px;border-radius:5px;background:var(--preview)}.payslip-color-preview b{font-size:10px}.payslip-color-preview small{color:var(--app-muted);font-size:8px}.configuration-checklist{padding:9px 18px 15px}.configuration-checklist a{min-height:62px;padding:9px 0;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;border-bottom:1px solid var(--app-line)}.configuration-checklist a:last-child{border-bottom:0}.configuration-checklist a > div{display:flex;flex-direction:column}.configuration-checklist b{font-size:9px}.configuration-checklist small{color:var(--app-muted);font-size:8px}.configuration-checklist em{color:var(--app-primary);font-size:8px;font-style:normal;font-weight:900}.otp-input{text-align:center;font-size:24px!important;letter-spacing:8px;font-weight:900}

/* Dark appearance */
.theme-dark { --app-ink:#eef1f7; --app-ink-2:#cdd3df; --app-muted:#9ba5b8; --app-line:#343a49; --app-line-strong:#424958; --app-bg:#151821; --app-surface:#20242f; --app-soft:#262b37; --app-primary-light:#302b4f; color-scheme:dark; }
.theme-dark .topbar,.theme-dark .panel,.theme-dark .executive-card,.theme-dark .security-summary,.theme-dark .backup-overview > div,.theme-dark .settings-shortcuts a,.theme-dark .modal,.theme-dark .auth-card { background:var(--app-surface); border-color:var(--app-line); }
.theme-dark .page-content,.theme-dark.app-body { background:var(--app-bg); }.theme-dark .topbar{box-shadow:0 8px 24px rgba(0,0,0,.16)}
.theme-dark input,.theme-dark select,.theme-dark textarea,.theme-dark .form-grid input,.theme-dark .form-grid select,.theme-dark .form-grid textarea,.theme-dark .panel-head select,.theme-dark .panel-head input,.theme-dark .search-form input,.theme-dark .search-form select { color:var(--app-ink); background:#252a35; border-color:var(--app-line-strong); }
.theme-dark th { color:#aeb7c7; background:#252a35; }.theme-dark td{color:#cbd2dd}.theme-dark tbody tr:hover td{background:#252a35}.theme-dark .panel-head,.theme-dark th,.theme-dark td,.theme-dark .employee-list > a,.theme-dark .request-list > div,.theme-dark .announcement-list article,.theme-dark .upcoming-list > div,.theme-dark .approval-center-list a,.theme-dark .payslip-mini a,.theme-dark .session-list > div,.theme-dark .login-history > div{border-color:var(--app-line)}
.theme-dark .modern-trend-chart{background:repeating-linear-gradient(to top,transparent 0,transparent 65px,#2f3440 66px)}.theme-dark .mix-donut > div{background:var(--app-surface)}.theme-dark .quick-actions a,.theme-dark .action-center-grid a,.theme-dark .visual-choice,.theme-dark .text-choice,.theme-dark .widget-toggle{background:var(--app-surface);border-color:var(--app-line)}.theme-dark .theme-preview.light{background:#f3f5fa}.theme-dark .status{filter:saturate(.8)}
@media (prefers-color-scheme:dark){.theme-system{--app-ink:#eef1f7;--app-ink-2:#cdd3df;--app-muted:#9ba5b8;--app-line:#343a49;--app-line-strong:#424958;--app-bg:#151821;--app-surface:#20242f;--app-soft:#262b37;--app-primary-light:#302b4f;color-scheme:dark}.theme-system .topbar,.theme-system .panel,.theme-system .executive-card,.theme-system .security-summary,.theme-system .backup-overview>div,.theme-system .settings-shortcuts a{background:var(--app-surface);border-color:var(--app-line)}.theme-system.app-body,.theme-system .page-content{background:var(--app-bg)}.theme-system input,.theme-system select,.theme-system textarea{color:var(--app-ink);background:#252a35;border-color:var(--app-line-strong)}.theme-system th{background:#252a35;color:#aeb7c7}.theme-system td{color:#cbd2dd}.theme-system tbody tr:hover td{background:#252a35}}

@media (max-width:1350px){.executive-metrics{grid-template-columns:repeat(3,1fr)}.dashboard-insight-grid{grid-template-columns:1fr 1fr}.dashboard-insight-grid .insight-card:last-child{grid-column:1/-1}.security-summary-grid,.backup-overview{grid-template-columns:1fr 1fr}}
@media (max-width:980px){.dashboard-hero,.settings-hero{padding:28px;align-items:flex-start;flex-direction:column}.hero-workforce-card{width:100%;min-width:0}.dashboard-primary-grid,.preference-layout,.security-grid-layout,.backup-grid{grid-template-columns:1fr}.dashboard-secondary-grid{grid-template-columns:1fr}.settings-shortcuts{grid-template-columns:1fr}.widget-toggle-grid{grid-template-columns:1fr}}
@media (max-width:720px){.executive-metrics,.dashboard-insight-grid,.security-summary-grid,.backup-overview{grid-template-columns:1fr}.dashboard-insight-grid .insight-card:last-child{grid-column:auto}.modern-trend-chart{min-width:620px}.dashboard-chart-card{overflow-x:auto}.choice-grid.three,.choice-grid.two,.accent-options{grid-template-columns:1fr 1fr}.attendance-mix-body{align-items:flex-start;flex-direction:column}.inline-security-form{grid-template-columns:1fr}.settings-shortcuts a{grid-template-columns:43px 1fr}.settings-shortcuts em{display:none}.backup-actions{align-items:flex-start;flex-direction:column}}

/* v4 readability pass: keep operational labels legible on desktop and mobile */
.hero-workforce-card small,.hero-workforce-card span{font-size:12px}
.attendance-ring span{font-size:10px}
.executive-card small,.executive-card em{font-size:11px}
.modern-trend-column>span{font-size:12px}.modern-trend-column>small{font-size:10px}
.action-center-grid b{font-size:13px}.action-center-grid small{font-size:11px}
.mix-donut small{font-size:11px}
.upcoming-list>div>span small{font-size:10px}.upcoming-list>div>div b{font-size:13px}.upcoming-list>div>div small{font-size:11px}
.approval-center-list b,.payslip-mini b{font-size:13px}.approval-center-list small,.payslip-mini small,.approval-center-list em,.payslip-mini em{font-size:11px}
.hero-stat small{font-size:11px}.hero-stat span{font-size:12px}
.preference-options legend{font-size:14px}.visual-choice>b,.accent-options label{font-size:12px}.text-choice b{font-size:13px}.text-choice small{font-size:11px}.preference-select{font-size:12px}.widget-toggle b{font-size:13px}.widget-toggle small,.preference-footer{font-size:11px}
.score-ring span,.security-score>small{font-size:11px}.security-summary small,.backup-overview small{font-size:11px}.security-summary b,.backup-overview b{font-size:13px}.backup-overview em{font-size:11px}
.security-card-body p{font-size:12px}.setup-key small,.uri-details code{font-size:11px}.btn-sm{font-size:11px!important}.uri-details summary,.inline-security-form label,.stacked-label{font-size:12px}.session-list b,.login-history b{font-size:12px}.session-list small,.login-history small,.login-history em,.btn-link{font-size:11px}
.backup-scope-card b,.switch-row b,.payslip-color-preview b{font-size:13px}.backup-scope-card small,.switch-row small,.settings-shortcuts small,.payslip-color-preview small,.configuration-checklist small{font-size:11px}.checksum{font-size:10px}.settings-shortcuts b{font-size:13px}.settings-shortcuts em,.configuration-checklist em{font-size:11px}.configuration-checklist b{font-size:12px}
.superadmin-hero{background:radial-gradient(circle at 82% 10%,rgba(255,255,255,.18),transparent 30%),linear-gradient(135deg,#172d50,#315d9c 58%,#5b68cf)}
.backup-mini-list{padding:8px 18px 15px}.backup-mini-list>div{min-height:64px;padding:10px 0;display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:11px;border-bottom:1px solid var(--app-line)}.backup-mini-list>div:last-child{border-bottom:0}.backup-mini-list>div>span:nth-child(2){display:flex;flex-direction:column}.backup-mini-list b{font-size:13px}.backup-mini-list small,.backup-mini-list em{color:var(--app-muted);font-size:11px;font-style:normal}
@media(max-width:720px){.backup-mini-list>div{grid-template-columns:42px 1fr}.backup-mini-list em{grid-column:2}}

/* v5 enterprise HR suite */
.topbar-assistant{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid var(--app-line);border-radius:12px;background:var(--app-surface);color:var(--app-ink);font-size:12px;font-weight:800;text-decoration:none}.topbar-assistant span{display:grid;place-items:center;width:24px;height:24px;border-radius:8px;background:var(--app-primary-light);color:var(--app-primary)}
.enterprise-section-hero{margin-bottom:16px}.enterprise-section-hero>div{display:flex;align-items:center;gap:18px}.module-large-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:rgba(255,255,255,.16);font-size:28px}.enterprise-tabs{display:flex;gap:8px;overflow-x:auto;padding:5px 2px 16px;margin-bottom:4px;scrollbar-width:thin}.enterprise-tabs a{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;padding:10px 13px;border:1px solid var(--app-line);border-radius:12px;background:var(--app-surface);color:var(--app-ink-2);font-size:12px;font-weight:750;text-decoration:none;white-space:nowrap}.enterprise-tabs a span{color:var(--app-primary);font-size:15px}.enterprise-tabs a:hover,.enterprise-tabs a.active{border-color:var(--app-primary);background:var(--app-primary-light);color:var(--app-primary)}
.enterprise-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.enterprise-summary>div{min-height:100px;padding:19px;border:1px solid var(--app-line);border-radius:18px;background:var(--app-surface);box-shadow:0 8px 25px rgba(30,36,58,.04)}.enterprise-summary small{display:block;color:var(--app-muted);font-size:12px;font-weight:700}.enterprise-summary b{display:block;margin-top:8px;color:var(--app-ink);font-size:25px;line-height:1.1}.enterprise-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px}.enterprise-three-col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}.enterprise-form-panel{margin-bottom:16px}.form-grid.one{grid-template-columns:1fr}.form-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.form-grid.four .full{grid-column:1/-1}.enterprise-form-panel textarea,.assistant-compose textarea{min-height:92px}
.enterprise-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.enterprise-hub-card{display:flex;flex-direction:column;min-height:215px;padding:22px;border:1px solid var(--app-line);border-radius:20px;background:var(--app-surface);box-shadow:0 10px 30px rgba(34,40,66,.055);text-decoration:none;color:inherit;transition:.2s transform,.2s border-color,.2s box-shadow}.enterprise-hub-card:hover{transform:translateY(-3px);border-color:var(--app-primary);box-shadow:0 16px 36px rgba(58,53,130,.11)}.enterprise-hub-card>span{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--app-primary-light);color:var(--app-primary);font-size:23px}.enterprise-hub-card h3{margin:20px 0 7px;font-size:17px}.enterprise-hub-card p{margin:0;color:var(--app-muted);font-size:13px;line-height:1.65}.enterprise-hub-card em{margin-top:auto;padding-top:17px;color:var(--app-primary);font-size:12px;font-style:normal;font-weight:800}
.lifecycle-board,.asset-grid,.policy-grid,.opportunity-grid,.report-grid,.anomaly-grid,.country-pack-grid,.integration-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}.lifecycle-card,.asset-card,.policy-card,.opportunity-card,.report-card,.anomaly-card,.country-pack-card,.integration-card{overflow:hidden;margin:0}.lifecycle-card header,.asset-card header,.policy-card header,.report-card header,.anomaly-card header,.country-pack-card header,.integration-card header{display:flex;align-items:flex-start;gap:12px;padding:18px;border-bottom:1px solid var(--app-line)}.lifecycle-card header>div,.asset-card header>div,.policy-card header>div,.report-card header>div,.anomaly-card header>div,.country-pack-card header>div,.integration-card header>div{min-width:0;flex:1}.lifecycle-card h3,.asset-card h3,.policy-card h3,.opportunity-card h3,.report-card h3,.anomaly-card h3,.country-pack-card h3,.integration-card h3{margin:4px 0;font-size:15px}.lifecycle-card p,.asset-card p,.policy-card p,.opportunity-card p,.report-card p,.anomaly-card p,.country-pack-card p,.integration-card p{margin:0;color:var(--app-muted);font-size:12px;line-height:1.5}.lifecycle-card header>b{font-size:20px;color:var(--app-primary)}.progress-track{height:8px;margin:18px;border-radius:999px;background:var(--app-soft);overflow:hidden}.progress-track span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--app-primary),#7f77ef)}.lifecycle-card footer,.asset-card footer,.policy-card footer,.report-card footer,.anomaly-card footer,.country-pack-card footer,.integration-card footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-top:1px solid var(--app-line);font-size:11px;color:var(--app-muted)}
.asset-card dl,.anomaly-card dl,.country-pack-card dl,.integration-card dl{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px;margin:0}.asset-card dl div,.anomaly-card dl div,.country-pack-card dl div,.integration-card dl div{min-width:0}.asset-card dt,.anomaly-card dt,.country-pack-card dt,.integration-card dt{color:var(--app-muted);font-size:10px;text-transform:uppercase;letter-spacing:.05em}.asset-card dd,.anomaly-card dd,.country-pack-card dd,.integration-card dd{margin:5px 0 0;color:var(--app-ink);font-size:12px;font-weight:750;overflow-wrap:anywhere}.asset-icon,.policy-icon,.assistant-avatar,.anomaly-card header>span,.integration-card header>span{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:13px;background:var(--app-primary-light);color:var(--app-primary);font-size:18px}.compact-action{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%}.compact-action select,.compact-action input{min-width:0}
.compliance-timeline{display:grid;gap:12px}.compliance-item{display:grid;grid-template-columns:15px 1fr auto;gap:14px;align-items:start;padding:17px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface)}.compliance-dot{width:12px;height:12px;margin-top:5px;border-radius:50%;background:#90a0b8;box-shadow:0 0 0 4px var(--app-soft)}.compliance-item.severity-high .compliance-dot{background:#e98b2a}.compliance-item.severity-critical .compliance-dot{background:#db3c5a}.compliance-item h3{margin:0 0 5px;font-size:14px}.compliance-item p{margin:0;color:var(--app-muted);font-size:12px}.compliance-item>aside{text-align:right}.compliance-item>aside b{display:block;font-size:12px}.compliance-item>aside small{display:block;margin-top:3px;color:var(--app-muted);font-size:10px}
.shift-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}.shift-card{padding:20px;border:1px solid var(--app-line);border-radius:19px;background:var(--app-surface)}.shift-card header{display:flex;justify-content:space-between;gap:10px}.shift-card h3{margin:0;font-size:16px}.shift-card .shift-time{display:block;margin:18px 0;color:var(--app-primary);font-size:22px;font-weight:850}.shift-card p{color:var(--app-muted);font-size:12px}.shift-card footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:17px;padding-top:15px;border-top:1px solid var(--app-line)}
.policy-card .policy-content{min-height:100px;padding:18px;color:var(--app-ink-2);font-size:12px;line-height:1.65}.policy-card footer{align-items:flex-start;flex-direction:column}.signature-form{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%}.signed-badge{color:#187c59;font-weight:800}.skills-matrix{display:grid;gap:12px}.skill-rating{display:flex;gap:4px}.skill-rating i{width:11px;height:11px;border-radius:50%;background:var(--app-line)}.skill-rating i.on{background:var(--app-primary)}.opportunity-card{padding:20px}.opportunity-card>small{display:block;margin:13px 0;color:var(--app-muted);font-size:11px}.opportunity-card textarea{width:100%;min-height:72px;margin:10px 0}
.identity-endpoints{display:grid;gap:9px}.identity-endpoints code,.token-list code{display:block;padding:10px;border:1px solid var(--app-line);border-radius:9px;background:var(--app-soft);font-size:10px;overflow-wrap:anywhere}.token-list{display:grid;gap:10px}.token-list>div{display:flex;justify-content:space-between;gap:12px;padding:13px;border:1px solid var(--app-line);border-radius:12px}.token-list b{font-size:12px}.token-list small{font-size:10px;color:var(--app-muted)}
.integration-card .integration-actions{display:flex;flex-wrap:wrap;gap:7px}.integration-card .status-line{display:flex;justify-content:space-between;gap:8px;padding:12px 18px;background:var(--app-soft);font-size:11px}.integration-upload{display:grid;gap:8px;width:100%}.integration-upload input[type=file]{font-size:11px}
.report-builder-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:16px}.report-field-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.report-field-picker label{display:flex;align-items:center;gap:8px;padding:11px;border:1px solid var(--app-line);border-radius:11px;background:var(--app-surface);font-size:12px;cursor:grab}.report-field-picker label.dragging{opacity:.45}.report-field-picker label.drag-over{border-color:var(--app-primary);background:var(--app-primary-light)}.report-columns{display:flex;flex-wrap:wrap;gap:6px;padding:16px}.report-columns span{padding:6px 9px;border-radius:999px;background:var(--app-soft);font-size:10px;font-weight:750}.report-card header>em{font-size:10px;font-style:normal;color:var(--app-muted)}
.assistant-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.assistant-chat{overflow:hidden}.assistant-chat>header{display:flex;align-items:center;gap:13px;padding:18px;border-bottom:1px solid var(--app-line)}.assistant-chat>header>div{flex:1}.assistant-chat h3{margin:0;font-size:16px}.assistant-chat header p{margin:3px 0 0;color:var(--app-muted);font-size:11px}.assistant-safe{padding:6px 9px;border-radius:999px;background:#e9f8f1;color:#147453;font-size:10px;font-weight:850}.assistant-messages{display:grid;gap:12px;max-height:520px;overflow-y:auto;padding:20px;background:var(--app-soft)}.assistant-message{max-width:82%;padding:14px 16px;border:1px solid var(--app-line);border-radius:15px;background:var(--app-surface)}.assistant-message.user{justify-self:end;background:var(--app-primary);color:#fff;border-color:transparent}.assistant-message b{font-size:11px}.assistant-message p{margin:7px 0;font-size:13px;line-height:1.65}.assistant-message small{font-size:9px;opacity:.72}.assistant-empty{text-align:center;padding:42px 15px}.assistant-empty>span{font-size:30px;color:var(--app-primary)}.assistant-empty h3{margin:10px 0 5px}.assistant-empty p{color:var(--app-muted);font-size:12px}.assistant-compose{display:grid;grid-template-columns:1fr auto;align-items:end;gap:10px;padding:16px;border-top:1px solid var(--app-line)}.assistant-side{height:max-content}.assistant-suggestions{display:grid;gap:8px;padding:16px}.assistant-suggestions button{padding:11px;text-align:left;border:1px solid var(--app-line);border-radius:11px;background:var(--app-surface);color:var(--app-ink);font-size:11px;cursor:pointer}.assistant-suggestions button:hover{border-color:var(--app-primary);background:var(--app-primary-light)}.assistant-guardrails{margin:0 16px 16px;padding:15px;border-radius:13px;background:var(--app-soft)}.assistant-guardrails h4{margin:0 0 8px;font-size:12px}.assistant-guardrails ul{margin:0;padding-left:17px;color:var(--app-muted);font-size:10px;line-height:1.7}
.anomaly-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px;margin-bottom:16px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface)}.anomaly-toolbar h3{margin:0;font-size:15px}.anomaly-toolbar p{margin:4px 0 0;color:var(--app-muted);font-size:11px}.anomaly-card{border-top:4px solid #91a0b6}.anomaly-card.severity-high{border-top-color:#e98b2a}.anomaly-card.severity-critical{border-top-color:#db3c5a}.country-pack-card.active{border-color:var(--app-primary);box-shadow:0 0 0 1px var(--app-primary)}.country-pack-card header>span{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:var(--app-primary-light);color:var(--app-primary);font-size:13px;font-weight:900}.payroll-component-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--app-line)}
.auth-inline-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.auth-inline-fields label{min-width:0}.enterprise-dashboard-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:18px}.enterprise-dashboard-strip a{display:flex;flex-direction:column;min-height:112px;padding:16px;border:1px solid var(--app-line);border-radius:16px;background:var(--app-surface);text-decoration:none;color:inherit}.enterprise-dashboard-strip a span{font-size:18px;color:var(--app-primary)}.enterprise-dashboard-strip a small{margin-top:auto;color:var(--app-muted);font-size:10px}.enterprise-dashboard-strip a b{margin-top:5px;font-size:20px}.enterprise-dashboard-strip a em{margin-top:4px;color:var(--app-muted);font-size:10px;font-style:normal}
.theme-dark .enterprise-tabs a,.theme-dark .enterprise-summary>div,.theme-dark .enterprise-hub-card,.theme-dark .compliance-item,.theme-dark .shift-card,.theme-dark .report-field-picker label,.theme-dark .assistant-message,.theme-dark .assistant-suggestions button,.theme-dark .anomaly-toolbar,.theme-dark .enterprise-dashboard-strip a{background:var(--app-surface);border-color:var(--app-line)}.theme-dark .assistant-messages,.theme-dark .assistant-guardrails,.theme-dark .integration-card .status-line{background:var(--app-soft)}.theme-dark .assistant-message.user{background:var(--app-primary)}
@media(max-width:1350px){.enterprise-hub-grid,.lifecycle-board,.asset-grid,.policy-grid,.opportunity-grid,.report-grid,.anomaly-grid,.country-pack-grid,.integration-grid,.shift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.enterprise-dashboard-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:980px){.enterprise-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.enterprise-two-col,.enterprise-three-col,.report-builder-layout,.assistant-layout{grid-template-columns:1fr}.assistant-side{height:auto}.enterprise-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar-assistant{display:none}}
@media(max-width:720px){.enterprise-section-hero>div{align-items:flex-start}.module-large-icon{width:48px;height:48px;border-radius:14px}.enterprise-summary,.enterprise-hub-grid,.lifecycle-board,.asset-grid,.policy-grid,.opportunity-grid,.report-grid,.anomaly-grid,.country-pack-grid,.integration-grid,.shift-grid,.enterprise-dashboard-strip,.form-grid.four,.auth-inline-fields{grid-template-columns:1fr}.enterprise-two-col,.enterprise-three-col{gap:12px}.report-field-picker{grid-template-columns:1fr}.assistant-compose{grid-template-columns:1fr}.assistant-message{max-width:95%}.signature-form,.compact-action{grid-template-columns:1fr}.compliance-item{grid-template-columns:14px 1fr}.compliance-item>aside{grid-column:2;text-align:left}.enterprise-tabs{margin-right:-14px}.enterprise-tabs a{font-size:11px}}
.approval-inline{display:grid!important;grid-template-columns:minmax(110px,1fr) auto auto!important;min-width:330px}.approval-inline input{height:35px;padding:7px 9px;font-size:11px}
@media(max-width:720px){.approval-inline{grid-template-columns:1fr!important;min-width:190px}}

/* v6 enterprise hub and navigation */
.enterprise-suite-hero {
  position: relative;
  overflow: hidden;
  margin-bottom: 18px;
  padding: clamp(26px, 4vw, 44px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  border-radius: 26px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.18), transparent 28%),
    radial-gradient(circle at 6% 100%, rgba(172,144,255,.32), transparent 30%),
    linear-gradient(135deg, #5144c8 0%, #6951d7 48%, #8362cf 100%);
  box-shadow: 0 22px 60px rgba(71, 57, 169, .22);
}
.enterprise-suite-hero::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -105px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  box-shadow: 0 0 0 35px rgba(255,255,255,.04), 0 0 0 70px rgba(255,255,255,.025);
  pointer-events: none;
}
.enterprise-suite-hero-copy,
.enterprise-suite-hero-actions { position: relative; z-index: 1; min-width: 0; }
.enterprise-suite-hero-copy { max-width: 820px; }
.enterprise-suite-kicker,
.enterprise-module-category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #ddd8ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.enterprise-suite-hero h1 { margin: 9px 0 10px; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; letter-spacing: -1.5px; }
.enterprise-suite-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.72; }
.enterprise-suite-metrics { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 10px; }
.enterprise-suite-metrics span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.17); border-radius: 999px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); font-size: 11px; }
.enterprise-suite-metrics b { color: #fff; }
.enterprise-suite-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }

.enterprise-hub-toolbar {
  position: sticky;
  top: 88px;
  z-index: 50;
  margin-bottom: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--app-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--app-surface) 94%, transparent);
  box-shadow: 0 10px 32px rgba(30, 42, 74, .08);
  backdrop-filter: blur(14px);
}
.enterprise-hub-search {
  min-width: 0;
  min-height: 46px;
  padding: 0 12px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--app-line-strong);
  border-radius: 13px;
  background: var(--app-soft);
}
.enterprise-hub-search > span { color: var(--app-primary); font-size: 20px; }
.enterprise-hub-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--app-ink); background: transparent; }
.enterprise-hub-search input::placeholder { color: var(--app-muted); }
.enterprise-hub-search:focus-within { border-color: var(--app-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--app-primary) 15%, transparent); }
.enterprise-hub-search kbd { padding: 2px 7px; border: 1px solid var(--app-line); border-radius: 7px; color: var(--app-muted); background: var(--app-surface); font: 700 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.enterprise-hub-filters { min-width: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; overflow: visible; }
.enterprise-hub-filters button,
.enterprise-hub-results button {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  color: var(--app-ink-2);
  background: var(--app-surface);
  cursor: pointer;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.enterprise-hub-filters button:hover,
.enterprise-hub-filters button.active { border-color: var(--app-primary); color: var(--app-primary); background: var(--app-primary-light); }
.enterprise-hub-results { min-height: 30px; margin: 0 2px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--app-muted); font-size: 12px; }
.enterprise-hub-results button { min-height: 30px; padding: 5px 9px; color: var(--app-primary); }

.enterprise-hub-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.enterprise-hub-card {
  min-width: 0;
  min-height: 286px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--app-line);
  border-radius: 21px;
  background: var(--app-surface);
  box-shadow: 0 10px 30px rgba(34, 40, 66, .055);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.enterprise-hub-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--app-primary) 55%, var(--app-line)); box-shadow: 0 18px 40px rgba(58, 53, 130, .12); }
.enterprise-hub-card[hidden] { display: none !important; }
.enterprise-hub-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.enterprise-hub-icon,
.enterprise-module-icon {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: var(--app-primary);
  background: var(--app-primary-light);
  font-size: 23px;
  font-weight: 900;
}
.enterprise-favorite-button {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--app-line);
  border-radius: 11px;
  color: var(--app-muted);
  background: var(--app-soft);
  cursor: pointer;
  font-size: 18px;
}
.enterprise-favorite-button:hover,
.enterprise-favorite-button[aria-pressed="true"] { border-color: #e8ba53; color: #9c6810; background: #fff4d9; }
.enterprise-category-badge { align-self: flex-start; margin-top: 19px; padding: 5px 8px; border-radius: 999px; color: var(--app-primary); background: var(--app-primary-light); font-size: 9px; font-weight: 900; letter-spacing: .7px; text-transform: uppercase; }
.enterprise-hub-card h2 { margin: 11px 0 7px; color: var(--app-ink); font-size: 17px; line-height: 1.3; letter-spacing: -.25px; overflow-wrap: anywhere; }
.enterprise-hub-card p { margin: 0; color: var(--app-muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.enterprise-hub-open { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--app-primary); font-size: 12px; font-weight: 900; }
.enterprise-hub-open::before { content: ""; position: absolute; }
.enterprise-hub-open:hover span { transform: translateX(3px); }
.enterprise-hub-open span { transition: transform .18s ease; }
.enterprise-hub-empty { padding: 54px 24px; border: 1px dashed var(--app-line-strong); border-radius: 20px; background: var(--app-surface); text-align: center; }
.enterprise-hub-empty > span { width: 58px; height: 58px; margin: auto; display: grid; place-items: center; border-radius: 18px; color: var(--app-primary); background: var(--app-primary-light); font-size: 28px; }
.enterprise-hub-empty h2 { margin: 16px 0 5px; font-size: 19px; }
.enterprise-hub-empty p { margin: 0 0 18px; color: var(--app-muted); }

.enterprise-breadcrumb { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: var(--app-muted); font-size: 12px; }
.enterprise-breadcrumb a { color: var(--app-primary); font-weight: 800; }
.enterprise-breadcrumb strong { min-width: 0; overflow: hidden; color: var(--app-ink-2); text-overflow: ellipsis; white-space: nowrap; }
.enterprise-module-header {
  margin-bottom: 18px;
  padding: 24px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border: 1px solid var(--app-line);
  border-radius: 21px;
  background: linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-primary-light) 45%, var(--app-surface)));
  box-shadow: var(--app-shadow-sm);
}
.enterprise-module-heading { min-width: 0; display: flex; align-items: flex-start; gap: 17px; }
.enterprise-module-heading > div { min-width: 0; }
.enterprise-module-category { color: var(--app-primary); }
.enterprise-module-heading h1 { margin: 5px 0 5px; color: var(--app-ink); font-size: clamp(23px, 3vw, 31px); line-height: 1.2; letter-spacing: -.8px; overflow-wrap: anywhere; }
.enterprise-module-heading p { max-width: 800px; margin: 0; color: var(--app-muted); line-height: 1.65; }
.enterprise-module-actions { flex: 0 0 auto; }

/* System-wide polish and resilient layouts */
.panel,
.executive-card,
.enterprise-hub-card,
.enterprise-module-header { isolation: isolate; }
.panel h2,
.panel h3,
.panel p,
td,
th { overflow-wrap: anywhere; }
.table-wrap { max-width: 100%; }
.form-grid > *,
.enterprise-two-col > *,
.enterprise-three-col > *,
.enterprise-summary > * { min-width: 0; }

.theme-dark .enterprise-hub-toolbar,
.theme-dark .enterprise-hub-card,
.theme-dark .enterprise-hub-empty,
.theme-dark .enterprise-module-header,
.theme-dark .enterprise-hub-filters button,
.theme-dark .enterprise-hub-results button,
.theme-dark .enterprise-hub-search kbd { border-color: var(--app-line); background: var(--app-surface); }
.theme-dark .enterprise-hub-search,
.theme-dark .enterprise-favorite-button { border-color: var(--app-line-strong); background: var(--app-soft); }
.theme-dark .enterprise-hub-search input { background: transparent; }
.theme-dark .enterprise-favorite-button[aria-pressed="true"] { color: #ffd77b; background: #493c22; }

.density-compact .enterprise-suite-hero { padding: 25px 28px; }
.density-compact .enterprise-hub-toolbar { top: 82px; padding: 10px; }
.density-compact .enterprise-hub-card { min-height: 245px; padding: 17px; }
.density-compact .enterprise-module-header { padding: 18px 20px; }
.density-compact .enterprise-summary > div { min-height: 84px; padding: 15px; }

@media (max-width: 1320px) {
  .enterprise-hub-toolbar { grid-template-columns: 1fr; }
  .enterprise-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .enterprise-suite-hero { align-items: flex-start; flex-direction: column; }
  .enterprise-suite-hero-actions { justify-content: flex-start; }
  .enterprise-hub-toolbar { position: static; }
  .enterprise-module-header { align-items: flex-start; flex-direction: column; }
  .enterprise-module-actions { width: 100%; }
}
@media (max-width: 680px) {
  .enterprise-suite-hero { padding: 26px 20px; border-radius: 20px; }
  .enterprise-suite-hero-actions { width: 100%; }
  .enterprise-suite-hero-actions .btn { width: 100%; }
  .enterprise-hub-grid { grid-template-columns: 1fr; }
  .enterprise-hub-card { min-height: 0; }
  .enterprise-hub-toolbar { padding: 10px; border-radius: 15px; }
  .enterprise-hub-filters { justify-content: flex-start; margin: 0; padding: 0; }
  .enterprise-hub-search kbd { display: none; }
  .enterprise-hub-search { grid-template-columns: 24px minmax(0, 1fr); }
  .enterprise-module-header { padding: 19px; }
  .enterprise-module-heading { gap: 12px; }
  .enterprise-module-icon { width: 44px; height: 44px; border-radius: 13px; font-size: 20px; }
  .enterprise-module-actions .btn { width: 100%; }
  .enterprise-breadcrumb strong { max-width: 55vw; }
}
.theme-light { color-scheme: light; }
.accent-purple { --app-primary: #5f50d6; --app-primary-dark: #4939bd; --app-primary-light: #eeeaff; }
.density-comfortable { --enterprise-density-scale: 1; }
.enterprise-hub-card > .enterprise-category-badge {
  width: auto;
  height: auto;
  display: inline-flex;
  place-items: initial;
  margin-top: 19px;
  padding: 5px 8px;
  border-radius: 999px;
  color: var(--app-primary);
  background: var(--app-primary-light);
  font-size: 9px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .7px;
  text-transform: uppercase;
}

/* v7 subscription, revenue and company administration */
.billing-hero {
  position: relative;
  overflow: hidden;
  min-height: 245px;
  margin-bottom: 18px;
  padding: 36px 38px;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, .62fr);
  align-items: center;
  gap: 34px;
  border-radius: 24px;
  color: #fff;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.18), transparent 25%),
    radial-gradient(circle at 12% 120%, rgba(121,214,203,.21), transparent 34%),
    linear-gradient(135deg, #4034a5, #6b50d4 54%, #7158c6);
  box-shadow: 0 22px 50px rgba(63, 49, 155, .22);
}
.billing-hero::after { content:""; position:absolute; right:-70px; bottom:-105px; width:270px; height:270px; border:1px solid rgba(255,255,255,.14); border-radius:50%; }
.billing-hero > * { position: relative; z-index: 1; min-width: 0; }
.billing-hero h1 { max-width: 820px; margin: 9px 0 10px; font-size: clamp(28px, 4vw, 43px); line-height: 1.08; letter-spacing: -1.5px; }
.billing-hero p { max-width: 760px; margin: 0; color: #e5e0ff; font-size: 14px; line-height: 1.7; }
.billing-hero .banner-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.billing-current-card { min-width: 0; padding: 22px; border: 1px solid rgba(255,255,255,.2); border-radius: 20px; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.13); backdrop-filter: blur(10px); }
.billing-current-card > small { display: block; margin-top: 13px; color: #dcd6ff; font-size: 10px; font-weight: 850; letter-spacing: .8px; text-transform: uppercase; }
.billing-current-card > strong { display: block; margin: 3px 0 2px; color: #fff; font-size: clamp(23px, 3vw, 31px); line-height: 1.2; overflow-wrap: anywhere; }
.billing-current-card > p { font-size: 11px; }
.billing-current-card > div { margin-top: 18px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.16); }
.billing-current-card > div span { color: #dcd6ff; font-size: 10px; }
.billing-current-card > div b { max-width: 65%; font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.currency-total { font-size: clamp(17px, 2.4vw, 25px) !important; line-height: 1.35 !important; }

.billing-usage-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.usage-card { padding: 20px; }
.usage-card > div:first-child { display: flex; align-items: center; gap: 12px; }
.usage-card > div:first-child > div { min-width: 0; display: flex; flex-direction: column; }
.usage-card small { color: var(--app-muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .65px; }
.usage-card b { margin-top: 2px; font-size: 18px; }
.usage-card p { margin: 10px 0 0; color: var(--app-muted); font-size: 11px; line-height: 1.55; }
.usage-track { height: 8px; margin-top: 17px; overflow: hidden; border-radius: 99px; background: var(--app-soft); }
.usage-track i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--app-primary), #8b68dd); }
.billing-feature-chips { margin-top: 15px; display: flex; flex-wrap: wrap; gap: 6px; }
.billing-feature-chips span { padding: 5px 8px; border-radius: 99px; color: var(--app-primary); background: var(--app-primary-light); font-size: 9px; font-weight: 800; }

.billing-alert-panel { margin-bottom: 18px; overflow: hidden; border-color: #edd9ac; }

.billing-gateway-options { padding: 0 20px 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.billing-gateway-options article { min-width: 0; padding: 13px 14px; border: 1px solid var(--app-line); border-radius: 13px; background: var(--app-soft); }
.billing-gateway-options article > div { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 7px; }
.billing-gateway-options b { color: var(--app-ink); font-size: 11px; }
.billing-gateway-options p { margin: 8px 0 0; color: var(--app-muted); font-size: 10px; line-height: 1.5; }
.billing-gateway-options small { margin-top: 7px; display: block; color: var(--app-primary); font-size: 9px; font-weight: 800; overflow-wrap: anywhere; }
.gateway-driver-badge { padding: 4px 7px; border-radius: 999px; color: var(--app-primary); background: var(--app-primary-light); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .45px; }
.billing-invoice-action { padding: 21px; display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); align-items: end; gap: 18px; border-top: 1px solid var(--app-line); }
.billing-invoice-action:first-of-type { border-top: 0; }
.billing-invoice-action h3 { margin: 6px 0 3px; font-size: 15px; }
.billing-invoice-action p { margin: 0; color: var(--app-muted); font-size: 11px; }
.invoice-number { color: var(--app-primary); font-size: 11px; font-weight: 900; letter-spacing: .5px; }
.billing-payment-form { min-width: 0; display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; align-items: end; gap: 9px; }
.billing-payment-form label, .plan-select-form label { min-width: 0; }
.billing-payment-form label > span { display: block; margin-bottom: 5px; color: var(--app-muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .55px; }
.billing-payment-form input, .billing-payment-form select { width: 100%; min-height: 41px; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 10px; color: var(--app-ink); background: var(--app-surface); font-size: 11px; }
.billing-payment-form input[type=file] { max-width: 210px; padding: 7px; }
.invoice-actions { grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; gap: 7px; }
.invoice-actions form, .invoice-actions button { width: auto; }

.subscription-plan-grid { padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.subscription-plan-card { min-width: 0; padding: 23px; display: flex; flex-direction: column; border: 1px solid var(--app-line); border-radius: 19px; background: var(--app-surface); box-shadow: 0 10px 27px rgba(35, 42, 72, .05); }
.subscription-plan-card.current { border-color: color-mix(in srgb, var(--app-primary) 58%, var(--app-line)); box-shadow: 0 15px 36px rgba(76, 62, 170, .12); }
.plan-card-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.plan-card-head > span, .plan-card-head > input { min-width: 0; color: var(--app-ink); font-size: 14px; font-weight: 900; }
.plan-card-head > input { width: 100%; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 9px; background: var(--app-surface); }
.plan-card-head em { padding: 5px 8px; border-radius: 99px; color: var(--app-primary); background: var(--app-primary-light); font-size: 9px; font-style: normal; font-weight: 900; white-space: nowrap; }
.subscription-plan-card h2 { margin: 18px 0 0; font-size: 27px; letter-spacing: -.7px; }
.subscription-plan-card > small { color: var(--app-muted); font-size: 10px; }
.subscription-plan-card > p { min-height: 43px; margin: 15px 0; color: var(--app-muted); font-size: 11px; line-height: 1.65; }
.plan-limits { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan-limits span { padding: 10px; display: flex; flex-direction: column; border-radius: 11px; background: var(--app-soft); color: var(--app-muted); font-size: 9px; }
.plan-limits b { color: var(--app-ink); font-size: 13px; }
.subscription-plan-card ul { margin: 17px 0; padding: 0; display: grid; gap: 8px; list-style: none; }
.subscription-plan-card li { position: relative; padding-left: 20px; color: var(--app-ink-2); font-size: 11px; }
.subscription-plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--app-success); font-weight: 900; }
.plan-select-form { margin-top: auto; display: grid; gap: 8px; }
.plan-select-form select { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--app-line); border-radius: 10px; color: var(--app-ink); background: var(--app-surface); }

.billing-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.billing-section-nav { position: sticky; top: 90px; z-index: 25; margin: 0 0 18px; padding: 9px; display: flex; flex-wrap: wrap; gap: 7px; border: 1px solid var(--app-line); border-radius: 14px; background: color-mix(in srgb, var(--app-surface) 92%, transparent); box-shadow: var(--app-shadow-sm); backdrop-filter: blur(13px); }
.billing-section-nav a { padding: 8px 11px; border-radius: 9px; color: var(--app-muted); font-size: 10px; font-weight: 850; }
.billing-section-nav a:hover { color: var(--app-primary); background: var(--app-primary-light); }
.admin-plan-grid, .gateway-admin-grid { padding: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-plan-card, .gateway-admin-card { min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 11px; border: 1px solid var(--app-line); border-radius: 18px; background: var(--app-surface); }
.admin-plan-card label > span, .gateway-admin-card label > span { display: block; margin-bottom: 5px; color: var(--app-muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .55px; }
.admin-plan-card input:not([type=checkbox]), .admin-plan-card textarea, .admin-plan-card select,
.gateway-admin-card input:not([type=checkbox]), .gateway-admin-card textarea, .gateway-admin-card select { width: 100%; min-height: 40px; padding: 9px 10px; border: 1px solid var(--app-line); border-radius: 9px; color: var(--app-ink); background: var(--app-surface); font-size: 11px; }
.admin-plan-card textarea, .gateway-admin-card textarea { min-height: 76px; resize: vertical; }
.admin-plan-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.plan-feature-grid { padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; border-radius: 12px; background: var(--app-soft); }
.plan-feature-grid .check { min-width: 0; display: flex; align-items: flex-start; gap: 7px; }
.plan-feature-grid .check span { margin: 0; overflow-wrap: anywhere; font-size: 9px; text-transform: none; letter-spacing: 0; }
.admin-plan-footer { margin-top: auto; padding-top: 12px; display: grid; grid-template-columns: minmax(100px, 1fr) auto auto; align-items: end; gap: 9px; border-top: 1px solid var(--app-line); }
.admin-plan-footer .check { align-self: center; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.new-plan { min-height: 350px; align-items: stretch; justify-content: center; border-style: dashed; }
.billing-price-form { padding: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--app-line); }
.billing-price-form .full { grid-column: 1 / -1; justify-self: end; min-width: 190px; }
.gateway-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.gateway-meta span { padding: 4px 7px; border-radius: 99px; color: var(--app-primary); background: var(--app-primary-light); font-size: 8px; font-weight: 900; text-transform: uppercase; }
.gateway-admin-card code { overflow-wrap: anywhere; color: var(--app-primary); font-size: 9px; }
.btn-small { min-height: 34px; padding: 7px 10px; font-size: 10px; }

.company-manage-hero { margin-bottom: 18px; padding: 27px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 1px solid var(--app-line); border-radius: 21px; background: linear-gradient(135deg, var(--app-surface), color-mix(in srgb, var(--app-primary-light) 58%, var(--app-surface))); box-shadow: var(--app-shadow-sm); }
.company-manage-hero h1 { margin: 7px 0 6px; font-size: clamp(25px, 3.4vw, 35px); letter-spacing: -1px; }
.company-manage-hero p { margin: 0; color: var(--app-muted); }
.company-health-card { min-width: 260px; padding: 17px; border: 1px solid var(--app-line); border-radius: 15px; background: var(--app-surface); }
.company-health-card small { color: var(--app-muted); font-size: 9px; text-transform: uppercase; }
.company-health-card strong { display: block; margin: 3px 0 11px; font-size: 20px; }
.company-management-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 17px; margin-bottom: 17px; }
.company-management-grid > .panel { overflow: hidden; }
.company-management-grid .form-grid { padding: 20px; }
.subscription-feature-list { padding: 16px 20px 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.subscription-feature-list span { padding: 6px 9px; border-radius: 99px; color: var(--app-primary); background: var(--app-primary-light); font-size: 9px; font-weight: 850; }
.usage-callout { margin: 0 20px 20px; padding: 13px 14px; border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-soft); color: var(--app-muted); font-size: 11px; }
.invoice-create-form, .company-admin-create { padding: 20px; border-bottom: 1px solid var(--app-line); }
.company-admin-grid { padding: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.admin-access-list { padding: 0 20px 20px; display: grid; gap: 10px; }
.admin-access-list article { padding: 13px; display: grid; grid-template-columns: 1fr auto; gap: 12px; border: 1px solid var(--app-line); border-radius: 12px; }
.admin-access-list h4 { margin: 0 0 2px; }
.admin-access-list p { margin: 0; color: var(--app-muted); font-size: 10px; }
.timeline-list { padding: 8px 20px 20px; display: grid; gap: 0; }
.timeline-list article { position: relative; padding: 12px 0 12px 25px; border-bottom: 1px solid var(--app-line); }
.timeline-list article::before { content:""; position:absolute; left:3px; top:18px; width:8px; height:8px; border-radius:50%; background:var(--app-primary); box-shadow:0 0 0 4px var(--app-primary-light); }
.timeline-list article::after { content:""; position:absolute; left:6px; top:30px; bottom:-12px; width:1px; background:var(--app-line); }
.timeline-list article:last-child::after { display:none; }
.timeline-list b { display:block; font-size:11px; }
.timeline-list small { color:var(--app-muted); font-size:9px; }
.support-access-banner { min-height: 58px; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; background: linear-gradient(90deg, #9a5510, #b77718); }
.support-access-banner > div { display: flex; align-items: center; gap: 11px; }
.support-access-banner > div > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.15); }
.support-access-banner p { margin: 0; display: flex; flex-direction: column; }
.support-access-banner b { font-size: 12px; }
.support-access-banner small { color: #ffedcd; font-size: 10px; }
.support-access-banner button { min-height: 35px; padding: 7px 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; color: #fff; background: rgba(255,255,255,.1); cursor: pointer; font-size: 10px; font-weight: 850; }

.theme-dark .billing-current-card { background: rgba(20,22,34,.24); }
.theme-dark .subscription-plan-card,
.theme-dark .admin-plan-card,
.theme-dark .gateway-admin-card,
.theme-dark .company-manage-hero,
.theme-dark .company-health-card { border-color: var(--app-line); background: var(--app-surface); }
.theme-dark .usage-track { background: #313644; }
.theme-dark .billing-section-nav { background: color-mix(in srgb, var(--app-surface) 92%, transparent); }
.theme-dark .billing-payment-form input,
.theme-dark .billing-payment-form select,
.theme-dark .plan-select-form select,
.theme-dark .admin-plan-card input:not([type=checkbox]),
.theme-dark .admin-plan-card textarea,
.theme-dark .admin-plan-card select,
.theme-dark .gateway-admin-card input:not([type=checkbox]),
.theme-dark .gateway-admin-card textarea,
.theme-dark .gateway-admin-card select { color: var(--app-ink); background: #252a35; border-color: var(--app-line-strong); }
.density-compact .billing-hero { min-height: 210px; padding: 27px 30px; }
.density-compact .usage-card, .density-compact .subscription-plan-card, .density-compact .admin-plan-card, .density-compact .gateway-admin-card { padding: 16px; }
.density-compact .billing-invoice-action { padding: 15px; }

@media (max-width: 1380px) {
  .admin-plan-grid, .gateway-admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-price-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-invoice-action { grid-template-columns: 1fr; align-items: stretch; }
  .billing-payment-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-payment-form .btn { grid-column: 1 / -1; justify-self: start; }
  .invoice-actions { flex-direction: row; }
}
@media (max-width: 1080px) {
  .billing-hero { grid-template-columns: 1fr; }
  .billing-current-card { max-width: 520px; }
  .billing-usage-grid, .subscription-plan-grid { grid-template-columns: 1fr 1fr; }
  .billing-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .company-management-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .billing-hero { min-height: 0; padding: 27px 21px; border-radius: 20px; }
  .billing-hero h1 { font-size: 29px; }
  .billing-current-card { width: 100%; }
  .billing-usage-grid, .subscription-plan-grid, .admin-plan-grid, .gateway-admin-grid, .billing-metrics, .company-admin-grid, .billing-gateway-options { grid-template-columns: 1fr; }
  .subscription-plan-grid, .admin-plan-grid, .gateway-admin-grid { padding: 14px; }
  .billing-price-form { grid-template-columns: 1fr; padding: 15px; }
  .billing-price-form .full { width: 100%; min-width: 0; }
  .billing-section-nav { position: static; }
  .billing-payment-form { grid-template-columns: 1fr; }
  .billing-payment-form input[type=file] { max-width: none; }
  .billing-payment-form .btn { width: 100%; }
  .invoice-actions { flex-direction: column; }
  .company-manage-hero { align-items: stretch; flex-direction: column; padding: 22px; }
  .company-health-card { min-width: 0; }
  .admin-plan-limits, .plan-feature-grid, .admin-plan-footer { grid-template-columns: 1fr; }
  .support-access-banner { align-items: flex-start; flex-direction: column; padding: 11px 16px; }
  .support-access-banner form, .support-access-banner button { width: 100%; }
}

/* v7 billing state helpers */
.subscription-cancel-form { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.subscription-cancel-form .btn { min-height: 36px; }
.billing-no-gateway { min-height: 76px; padding: 14px 16px; display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1px dashed var(--app-line-strong); border-radius: 12px; color: var(--app-muted); background: var(--app-soft); }
.billing-no-gateway b { color: var(--app-ink); font-size: 11px; }
.billing-no-gateway span { font-size: 10px; line-height: 1.5; }
.subscription-feature-list span.disabled { color: var(--app-muted); background: var(--app-soft); text-decoration: line-through; opacity: .78; }
.admin-billing-hero .billing-current-card { align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.theme-dark .billing-no-gateway { background: #252a35; }
@media (max-width: 760px) { .subscription-cancel-form, .subscription-cancel-form .btn { width: 100%; } }
.billing-state-banner { margin: 0 0 18px; padding: 14px 16px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 12px; border: 1px solid var(--app-line); border-radius: 14px; background: var(--app-surface); }
.billing-state-banner > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; font-weight: 900; }
.billing-state-banner b { display: block; font-size: 12px; }
.billing-state-banner p { margin: 2px 0 0; color: var(--app-muted); font-size: 10px; }
.billing-state-banner a { color: var(--app-primary); font-size: 10px; font-weight: 850; }
.billing-state-banner.danger { border-color: #efc5c9; background: #fff8f8; }.billing-state-banner.danger > span { color:#a42632;background:#fde4e7; }
.billing-state-banner.warning { border-color:#ecd6aa;background:#fffaf0; }.billing-state-banner.warning > span { color:#9b6500;background:#ffedc7; }
.billing-state-banner.info > span { color:var(--app-primary);background:var(--app-primary-light); }
.theme-dark .billing-state-banner.danger,.theme-dark .billing-state-banner.warning,.theme-dark .billing-state-banner.info { background:var(--app-surface);border-color:var(--app-line-strong); }
@media(max-width:680px){.billing-state-banner{grid-template-columns:38px minmax(0,1fr)}.billing-state-banner a{grid-column:2}}