/* Reference layout, calibrated to the supplied 1586 × 992 dashboard. */
@font-face { font-family:Roboto; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/roboto-400.ttf') format('truetype'); }
@font-face { font-family:Roboto; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/roboto-500.ttf') format('truetype'); }
@font-face { font-family:Roboto; font-style:normal; font-weight:600; font-display:swap; src:url('/assets/roboto-600.ttf') format('truetype'); }
@font-face { font-family:Roboto; font-style:normal; font-weight:700; font-display:swap; src:url('/assets/roboto-700.ttf') format('truetype'); }
@font-face { font-family:Roboto; font-style:normal; font-weight:800; font-display:swap; src:url('/assets/roboto-800.ttf') format('truetype'); }
:root {
  --orange-50:#effcfb; --orange-100:#d9f8f4; --orange-200:#a8eee7; --orange-300:#65ded5;
  --orange-400:#20cfc5; --orange-500:#0dbdb4; --orange-600:#079b98; --orange-700:#087778;
  --ink-950:#071332; --ink-900:#091a40; --ink-700:#35415d; --ink-500:#66718a;
  --ink-300:#b4c0d1; --ink-200:#d2deeb; --ink-100:#e5edf4; --canvas:#f8fcff;
  --green:#008c38; --green-bg:#defae7; --blue:#005bc6; --blue-bg:#d9f1ff;
  --purple:#6427ff; --purple-bg:#eee7ff; --red:#c5193d; --red-bg:#ffedf2;
  --shadow-sm:0 2px 3px #16416c04,0 5px 14px #16416c09; --radius:16px;
}
body { background:radial-gradient(ellipse at 70% 0,#eff8fd70,transparent 58%),#fbfdff; color:var(--ink-950); font-family:"Roboto","Segoe UI",Arial,sans-serif; }
svg { fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }
[hidden], svg [hidden] { display:none!important; }
.app-shell { display:grid; grid-template-columns:300px minmax(0,1fr); }
.sidebar { position:fixed; inset:0 auto 0 0; width:300px; height:100dvh; padding:24px 19px 24px 13px; background:url('/assets/guidance-sidebar.svg') left top/100% 100% no-repeat; color:white; isolation:isolate; border:0; }
.brand { display:flex; flex:none; flex-direction:column; align-items:center; width:258px; height:171px; padding:0; gap:0; text-align:center; }
.guidance-logo { display:block; width:88px; height:88px; margin-bottom:1px; }
.brand-copy strong { display:block; font-size:25px; font-weight:800; letter-spacing:-.6px; line-height:29px; color:white; }
.brand-copy small { display:block; margin:0; color:white; font-size:13px; font-weight:400; line-height:18px; letter-spacing:.65px; }
.nav { display:flex; flex:0 1 auto; flex-direction:column; gap:0; width:267px; max-height:calc(100dvh - 218px); overflow:auto; padding:0 0 5px; scrollbar-width:thin; scrollbar-color:#ffffff30 transparent; }
.nav-link { min-height:47px; flex:none; gap:23px; padding:10px 24px; color:#fff; font-size:17px; font-weight:500; line-height:27px; border-radius:24px; white-space:nowrap; }
.nav-link:hover { background:#ffffff12; color:#fff; }
.nav-link.active { background:linear-gradient(100deg,#0accc5,#10c3bf); color:#fff; box-shadow:0 3px 4px #00224d40; }
.nav-icon { display:block; width:26px; height:26px; flex:0 0 26px; background:none!important; border-radius:0; color:white; }
.sidebar-skyline { position:absolute; z-index:-1; bottom:9px; left:0; width:276px; height:185px; opacity:.62; pointer-events:none; }
.sidebar-backdrop { display:none; }
.app-main { grid-column:2; min-width:0; }
.topbar { display:flex; min-height:75px; height:75px; gap:18px; padding:12px 16px 12px 30px; background:#fcfeffeb; border-bottom:1px solid #eaf1f6; box-shadow:0 4px 16px #16416c04; }
.topbar-title { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.topbar-title h1 { font-size:36px; font-weight:800; letter-spacing:-1.1px; line-height:1.1; white-space:nowrap; }
.topbar-tools { display:flex; align-items:center; gap:24px; min-width:0; }
.period-control,.global-search,.profile-menu summary { height:40px; border:1px solid #cedbea; border-radius:9px; background:linear-gradient(#fff,#f8fbfe); box-shadow:0 2px 2px #15365a07; }
.period-control { display:flex; align-items:center; gap:10px; width:303px; padding:8px 12px; font-size:14px; font-weight:500; white-space:nowrap; }
.period-control svg { width:17px; height:17px; flex:none; }
.period-control span { flex:1; }
.global-search { display:flex; align-items:center; gap:10px; width:394px; padding:7px 10px 7px 12px; }
.global-search > svg { width:18px; height:18px; flex:none; }
.global-search input { margin:0; padding:0; width:100%; min-width:0; border:0; border-radius:0; font-size:13px; background:transparent; box-shadow:none; }
.global-search input:focus { box-shadow:none; border:0; }
.global-search input::placeholder { color:#34415d; opacity:1; }
.global-search kbd { flex:none; border-radius:9px; padding:2px 7px; color:#35415d; background:#ebf0f5; font:12px "Segoe UI",sans-serif; }
.notification-button { position:relative; display:grid; place-items:center; width:48px; height:40px; flex:none; }
.notification-button > svg { width:27px; height:27px; }
.notification-button > span { position:absolute; top:-5px; right:3px; display:grid; place-items:center; min-width:23px; height:23px; padding:0 4px; background:#e41933; border:2px solid white; border-radius:50%; font-size:12px; color:white; }
.profile-menu { position:relative; flex:none; }
.profile-menu summary { display:flex; align-items:center; gap:13px; width:151px; padding:0 9px 0 5px; cursor:pointer; list-style:none; }
.profile-menu summary::-webkit-details-marker { display:none; }
.profile-menu .avatar { display:grid; place-items:center; width:36px; height:36px; background:linear-gradient(135deg,#0878b8,#004b8c); color:white; font-size:18px; font-weight:500; }
.profile-menu summary strong { flex:1; font-size:16px; font-weight:500; }
.profile-menu summary > svg { width:18px; height:18px; }
.profile-dropdown { position:absolute; z-index:50; top:49px; right:0; width:240px; padding:16px; border:1px solid var(--ink-200); border-radius:12px; background:white; box-shadow:var(--shadow-lg); }
.profile-dropdown > span,.profile-dropdown > strong,.profile-dropdown > a { display:block; }
.profile-dropdown > span { color:var(--ink-500); font-size:11px; }
.profile-dropdown > strong { margin-bottom:10px; }
.profile-dropdown > a { padding:8px 0; color:var(--blue); font-size:13px; }
.profile-dropdown button { margin-top:9px; width:100%; padding:9px; background:#eef5fa; border:0; border-radius:7px; cursor:pointer; color:var(--ink-900); }
.page-content { max-width:1800px; padding:20px 16px 44px 15px; margin:auto; }
.dashboard-greeting { display:flex; align-items:flex-start; gap:18px; height:91px; padding:0 0 0 15px; }
.dashboard-greeting > i { flex:none; width:6px; height:38px; margin-top:5px; background:#099bb0; border-radius:3px; }
.dashboard-greeting h2 { margin:0 0 2px; font-size:36px; font-weight:800; letter-spacing:-.9px; line-height:44px; }
.dashboard-greeting p { margin:0; font-size:18px; color:#51596e; line-height:25px; }
.reference-stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; margin:0 0 21px 15px; }
.reference-stat { position:relative; display:flex; align-items:flex-start; gap:22px; min-width:0; height:125px; padding:17px 20px; overflow:hidden; border:1px solid #dbe5f0; border-radius:15px; background:#ffffffbc; box-shadow:var(--shadow-sm); }
.reference-stat::after { content:""; position:absolute; right:-1px; bottom:-1px; width:100px; height:49px; background:var(--stat-accent); opacity:.35; clip-path:path("M0 49 C40 49 44 0 100 0 L100 49Z"); }
.reference-stat-icon { display:grid; place-items:center; flex:none; width:52px; height:51px; border-radius:12px; background:var(--stat-soft); color:var(--stat-color); }
.reference-stat-icon svg { width:29px; height:29px; }
.reference-stat-copy { position:relative; z-index:1; min-width:0; }
.reference-stat-copy small { display:block; margin:0 0 7px; color:#081b46; font-size:15px; font-weight:500; line-height:20px; white-space:nowrap; }
.reference-stat-copy strong { display:block; color:#081736; font-size:29px; font-weight:800; letter-spacing:-.7px; line-height:30px; white-space:nowrap; }
.reference-stat-copy em { display:flex; gap:7px; align-items:center; margin-top:7px; color:#566077; font-size:12px; font-style:normal; white-space:nowrap; }
.reference-stat-copy em b { color:#008b32; font-size:14px; font-weight:750; }
.reference-stat-copy em svg { width:16px; height:16px; stroke-width:2.6; color:#008b32; }
.stat-cyan { --stat-color:#0064bd; --stat-soft:#daf1ff; --stat-accent:#71bff3; }
.stat-mint { --stat-color:#00a38f; --stat-soft:#e0f9f3; --stat-accent:#78e6d2; }
.stat-violet { --stat-color:#6125f8; --stat-soft:#eee6ff; --stat-accent:#b09af8; }
.stat-rose { --stat-color:#e41b51; --stat-soft:#fff0f5; --stat-accent:#ffa8c4; }
.stat-rose .reference-stat-copy strong { color:#b71e40; }
.stat-rose .reference-stat-copy em b,.stat-rose .reference-stat-copy em svg { color:#d01a32; }
.dashboard-primary-grid,.dashboard-secondary-grid { display:grid; grid-template-columns:minmax(0,1.725fr) minmax(0,1fr); gap:18px; margin:0 -8px 17px 0; }
.reference-panel { min-width:0; overflow:hidden; border:1px solid #d8e3ee; border-radius:16px; background:linear-gradient(135deg,#ffffffed,#fbfdffeb); box-shadow:var(--shadow-sm); }
.dashboard-primary-grid > .reference-panel { height:291px; }
.dashboard-secondary-grid > .reference-panel { min-height:304px; }
.reference-panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; height:51px; padding:10px 15px; }
.reference-panel-head h3 { font-size:21px; font-weight:800; letter-spacing:-.45px; color:#081538; white-space:nowrap; }
.reference-panel-head > a { display:flex; align-items:center; gap:8px; color:#005bd3; font-size:14px; white-space:nowrap; }
.reference-panel-head > a svg { width:18px; height:18px; }
.chart-controls { display:flex; align-items:center; gap:24px; }
.chart-toggle { display:flex; height:30px; border:1px solid #d6e1eb; border-radius:8px; background:#f3f7fa; }
.chart-toggle button { min-width:91px; padding:3px 13px; border:0; border-radius:7px; color:var(--ink-950); background:transparent; font-size:12px; font-weight:600; cursor:pointer; }
.chart-toggle button.active { color:white; background:linear-gradient(125deg,#075aa8,#007db6); box-shadow:0 2px 4px #00568d19; }
.chart-period { display:flex; gap:7px; align-items:center; height:31px; padding:5px 12px; border:1px solid #cddae8; border-radius:7px; color:#071332; background:#fbfdff; font-size:12px; font-weight:500; cursor:pointer; }
.chart-period svg { width:16px; height:16px; }
.chart-range-form { margin:0; }
.chart-range-form select { margin:0; width:118px; }
.chart-canvas { position:relative; height:238px; padding:0 17px 10px 16px; }
.chart-canvas > svg { display:block; width:100%; height:100%; overflow:visible; }
.chart-grid line { stroke:#e5ecf3; stroke-width:.8; }
.chart-grid text,.chart-axis text { fill:#233151; stroke:none; font-size:12px; font-weight:400; }
.chart-line { fill:none; stroke:#009fc5; stroke-width:2.5; }
.chart-point { fill:#006bb8; stroke:white; stroke-width:1.3; }
.chart-tooltip rect { fill:white; stroke:#bcd4e9; stroke-width:1; filter:drop-shadow(0px 2px 2px #14355618); }
.chart-tooltip text { fill:#071332; stroke:none; font-size:11px; font-weight:600; }
.chart-tooltip line { stroke:#008ac7; stroke-dasharray:3 3; stroke-width:.8; }
.chart-legend { display:none; }
.chart-empty { position:absolute; inset:70px 30px auto; text-align:center; color:#6b7990; font-size:13px; }
.reference-table-wrap { overflow:auto; padding:0 14px 14px; }
.reference-table { width:100%; border-collapse:separate; border-spacing:0; }
.reference-table th { padding:7px 10px; height:32px; border:0; background:#edf3f7; color:#09132f; font-size:12px; font-weight:600; text-transform:none; letter-spacing:0; }
.reference-table th:first-child { border-radius:9px 0 0 9px; }
.reference-table th:last-child { border-radius:0 9px 9px 0; }
.reference-table td { padding:6px 10px; height:39px; border-bottom:1px solid #e5ecf2; color:#101b34; font-size:12px; font-weight:400; }
.reference-table td strong { font-weight:500; color:inherit; }
.reference-table tr:last-child td { border-bottom:0; }
.expiry-table th { padding-inline:8px; }
.expiry-table td { height:36px; padding:4px 3px; }
.document-name { display:flex; gap:8px; align-items:center; white-space:nowrap; }
.mini-doc-icon { display:grid; place-items:center; width:31px; height:26px; flex:none; border-radius:7px; background:linear-gradient(130deg,#daf2ff,#e8fbfc); color:#006dc1; }
.mini-doc-icon svg { width:18px; height:18px; }
.expiry-date-pill { display:inline-flex; align-items:center; gap:7px; padding:4px 9px; border-radius:9px; background:#ffe9ed; color:#cb001e; font-size:12px; white-space:nowrap; }
.expiry-date-pill svg { width:14px; height:14px; }
.dashboard-empty { text-align:center; height:190px!important; color:var(--ink-500)!important; padding:25px!important; }
.recent-applications-table td { white-space:nowrap; }
.recent-applications-table td > a { color:#0051c5; font-weight:700; }
.service-name { display:flex; align-items:center; gap:9px; }
.service-name svg { flex:none; width:18px; height:18px; padding:1px; color:#073b88; }
.reference-table .status { padding:4px 9px; border-radius:9px; font-size:12px; font-weight:500; gap:6px; }
.reference-table .status::before { display:none; }
.reference-table .status svg { width:14px; height:14px; }
.status-new { background:#fff3d4; color:#a64800; }
.status-in-process { background:#d4f1ff; color:#0036a4; }
.status-ready,.status-closed { background:#dffae7; color:#006c2b; }
.dashboard-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:11px 12px; padding:1px 17px 16px; }
.dashboard-quick-actions > a { display:block; min-width:0; height:112px; padding:11px 18px; border:1px solid #dbe4ee; border-radius:13px; background:linear-gradient(125deg,#fbfdff,#f8fbff); box-shadow:0 2px 3px #16416c06; transition:box-shadow .15s,border-color .15s; }
.dashboard-quick-actions > a:hover { border-color:#91d6dc; box-shadow:0 5px 12px #03688212; }
.dashboard-quick-actions .quick-icon { display:grid; place-items:center; width:43px; height:42px; margin:0 0 5px; border-radius:11px; }
.quick-icon svg { width:26px; height:26px; }
.quick-icon.mint { background:#cdf6ec; color:#00a17c; }
.quick-icon.blue { background:#d9efff; color:#005ac9; }
.quick-icon.violet { background:#eae0ff; color:#6724f4; }
.quick-icon.amber { background:#fff1d7; color:#cf7400; }
.dashboard-quick-actions strong { display:block; font-size:18px; font-weight:800; line-height:22px; letter-spacing:-.4px; white-space:nowrap; }
.dashboard-quick-actions small { display:block; color:#4f5c75; font-size:13px; line-height:19px; white-space:nowrap; }
.btn-primary { border-color:#0ab5ad; background:linear-gradient(135deg,#12c7bd,#079b98); box-shadow:0 5px 14px #08ada728; }
.btn-primary:hover { background:linear-gradient(135deg,#0db8b0,#087d80); box-shadow:0 6px 17px #08949232; }
.text-link,.field-link,.icon-button,.record-link,.breadcrumb a { color:#075db8; }
input:focus,select:focus,textarea:focus { border-color:#11bdb5; box-shadow:0 0 0 3px #11bdb51c; }
tbody tr:hover td { background:#f6fbff; }
th { background:#f2f6fa; }
.hero-strip,.payable-card,.payslip-net,.balance-equation,.hr-hero { background:linear-gradient(135deg,#073e7b,#075b82 70%,#079b98); }
.hero-strip::after { border-color:#1fd3c82e; }
:focus-visible { outline:2px solid #079da8; outline-offset:3px; }
@media(min-width:1600px) {
  .reference-stat-copy strong { font-size:31px; }
  .chart-canvas { height:260px; }
  .dashboard-primary-grid > .reference-panel { height:313px; }
}
@media(max-width:1490px) {
  .topbar-tools { gap:16px; }
  .global-search { width:300px; }
  .period-control { width:286px; font-size:13px; }
  .reference-stat { gap:13px; padding-inline:15px; }
  .reference-stat-copy strong { font-size:26px; }
  .reference-stat-copy small { font-size:13px; }
  .reference-stat-copy em { font-size:10px; gap:4px; }
  .reference-stat-copy em b { font-size:12px; }
  .reference-stat-icon { width:44px; height:46px; }
  .reference-panel-head h3 { font-size:19px; }
  .chart-controls { gap:10px; }
  .chart-toggle button { min-width:70px; }
  .chart-period { padding-inline:8px; }
  .reference-table td,.reference-table th,.expiry-date-pill { font-size:11px; }
  .dashboard-quick-actions > a { padding-inline:13px; }
  .dashboard-quick-actions strong { font-size:16px; }
  .dashboard-quick-actions small { font-size:11px; }
}
@media(max-width:1300px) {
  .app-shell { grid-template-columns:260px minmax(0,1fr); }
  .sidebar { width:260px; }
  .brand { width:228px; }
  .brand-copy strong { font-size:23px; }
  .nav { width:231px; }
  .nav-link { gap:16px; padding-inline:20px; font-size:15px; }
  .topbar { padding-left:22px; }
  .topbar-title h1 { font-size:28px; }
  .global-search { width:250px; }
  .global-search kbd { display:none; }
  .period-control { width:257px; font-size:12px; }
  .topbar-tools { gap:10px; }
  .profile-menu summary { width:118px; gap:8px; }
  .notification-button { width:32px; }
  .reference-stat { gap:10px; padding:16px 12px; }
  .reference-stat-copy strong { font-size:23px; }
  .reference-stat-copy em { font-size:10px; white-space:normal; flex-wrap:wrap; }
  .reference-stat-copy em svg { display:none; }
  .dashboard-primary-grid,.dashboard-secondary-grid { grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); }
  .reference-panel-head h3 { font-size:17px; }
  .chart-period { display:none; }
  .expiry-table,.recent-applications-table { min-width:410px; }
  .reference-table-wrap { padding-inline:10px; }
}
@media(max-width:1100px) {
  .period-control { display:none; }
  .reference-stats-grid { gap:12px; margin-left:0; }
  .reference-stat { height:132px; flex-direction:column; gap:8px; padding:13px; }
  .reference-stat-icon { position:absolute; right:10px; bottom:12px; width:36px; height:36px; }
  .reference-stat-icon svg { width:23px; height:23px; }
  .reference-stat-copy strong { font-size:25px; }
  .reference-stat-copy em { max-width:110px; }
  .dashboard-greeting { padding-left:0; }
  .dashboard-greeting h2 { font-size:30px; }
  .dashboard-greeting p { font-size:16px; }
  .dashboard-primary-grid,.dashboard-secondary-grid { grid-template-columns:1fr; }
  .dashboard-secondary-grid > .reference-panel { min-height:280px; }
  .chart-period { display:flex; }
  .reference-panel-head h3 { font-size:21px; }
  .reference-table td,.reference-table th { font-size:12px; }
  .dashboard-quick-actions strong { font-size:18px; }
  .dashboard-quick-actions small { font-size:13px; }
}
@media(max-width:900px) {
  .dashboard-primary-grid,.dashboard-secondary-grid { margin-right:0; }
  .app-shell { display:block; }
  .sidebar { z-index:50; width:300px; transform:translateX(-100%); transition:transform .2s; background:#044a7f; }
  .sidebar.open { transform:translateX(0); }
  .brand { width:258px; }
  .nav { width:267px; }
  .nav-link { gap:23px; font-size:17px; }
  .sidebar.open + .sidebar-backdrop { display:block; position:fixed; z-index:45; inset:0; border:0; background:#03183166; backdrop-filter:blur(2px); }
  .topbar > div { margin:0; }
  .topbar-title { flex:1; }
  .topbar-tools { flex:0 1 auto!important; }
  .topbar { height:70px; min-height:70px; padding:12px 18px; gap:12px; }
  .mobile-menu { display:grid; place-items:center; width:32px; height:32px; padding:0; border-radius:7px; color:#08254d; background:#edf5fb; }
  .page-content { padding:20px 18px 35px; }
  .global-search { width:240px; }
}
@media(max-width:640px) {
  .topbar { height:65px; min-height:65px; padding:10px 12px; }
  .topbar-title h1 { font-size:22px; }
  .global-search { display:none; }
  .profile-menu summary { width:42px; border:0; background:transparent; box-shadow:none; padding:0; }
  .profile-menu summary strong,.profile-menu summary > svg { display:none; }
  .topbar-tools { gap:10px; }
  .page-content { padding:18px 12px 30px; }
  .dashboard-greeting { height:92px; gap:12px; }
  .dashboard-greeting h2 { font-size:25px; letter-spacing:-.6px; line-height:31px; }
  .dashboard-greeting p { font-size:14px; line-height:21px; }
  .reference-stats-grid { grid-template-columns:1fr 1fr; }
  .reference-stat { height:123px; }
  .reference-stat-copy small { font-size:13px; }
  .reference-stat-copy strong { font-size:24px; }
  .reference-stat-copy em { font-size:10px; }
  .reference-panel-head h3 { font-size:17px; white-space:normal; }
  .chart-toggle button { min-width:61px; padding:4px 6px; font-size:10px; }
  .chart-period { display:none; }
  .reference-panel-head > a { font-size:12px; }
  .chart-canvas { padding-inline:6px; }
  .dashboard-quick-actions { padding:1px 12px 15px; gap:10px; }
  .dashboard-quick-actions > a { padding:11px 12px; height:114px; }
  .dashboard-quick-actions strong { font-size:16px; }
  .dashboard-quick-actions small { font-size:11px; white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }
@media print {
  body { background:white; }
  .app-shell { display:block; }
  .sidebar-backdrop,.svg-sprite { display:none!important; }
  .page-content { padding:0; max-width:none; }
}

/* Authentication and user management */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.auth-shell { min-height:100vh; background:#e9f7ff; }
.gp-auth-page { position:relative; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(520px,.92fr); min-height:100vh; overflow:hidden; background:radial-gradient(circle at 19% 14%,#fff 0,#dff2ff 29%,#eef8ff 61%,#d9f5fa 100%); }
.gp-auth-page::before { position:absolute; z-index:0; top:-28%; right:-12%; width:47%; height:68%; border-radius:0 0 0 70%; background:linear-gradient(135deg,#006b8f,#00c9c4); transform:rotate(-7deg); content:""; }
.gp-auth-page::after { position:absolute; z-index:1; right:-12%; bottom:-22%; width:58%; height:61%; border:3px solid #c7ecf8; border-radius:50%; background:#dff6ff9c; content:""; }
.gp-auth-visual { position:relative; z-index:2; display:flex; min-width:0; flex-direction:column; padding:6vh 5vw 5vh 7vw; }
.gp-auth-brand { display:flex; align-items:center; gap:15px; color:#071a48; }
.gp-auth-brand img { width:88px; height:88px; flex:none; }
.gp-auth-brand strong,.gp-auth-brand small { display:block; }
.gp-auth-brand strong { font-size:clamp(26px,2.25vw,40px); font-weight:800; letter-spacing:-1.5px; line-height:1; }
.gp-auth-brand small { margin-top:4px; font-size:clamp(13px,1.05vw,20px); letter-spacing:.03em; }
.gp-auth-message { position:relative; z-index:3; margin:5.5vh 0 0 4.5vw; }
.gp-auth-message h1 { margin:0; color:#071d4d; font-size:clamp(45px,4vw,70px); font-weight:800; letter-spacing:-2.6px; line-height:.98; }
.gp-auth-message h1 em { color:#079baa; font-style:normal; }
.gp-auth-message p { max-width:660px; margin:23px 0 0; color:#273754; font-size:clamp(14px,1.25vw,21px); line-height:1.5; }
.gp-auth-swoop { width:215px; height:18px; margin:7px 0 -3px 68px; border-top:7px solid #069aaa; border-radius:50%; transform:rotate(-4deg); }
.gp-auth-benefits { position:relative; z-index:5; display:grid; grid-template-columns:repeat(4,minmax(105px,1fr)); gap:12px; width:min(570px,85%); margin:3vh 0 0 6vw; }
.gp-auth-benefits > div { display:flex; min-height:108px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #ffffffdd; border-radius:18px; background:#ffffffa8; box-shadow:0 8px 25px #19476510; text-align:center; backdrop-filter:blur(12px); }
.gp-auth-benefits span { display:grid; width:40px; height:40px; place-items:center; margin-bottom:5px; color:#0799aa; border:3px solid currentColor; border-radius:12px; font-size:18px; font-weight:800; }
.gp-auth-benefits strong { color:#0b1c43; font-size:14px; line-height:1.15; }
.gp-auth-city { position:absolute; z-index:1; bottom:-1.5vh; left:0; width:72%; height:39vh; object-fit:fill; opacity:.84; filter:saturate(1.25) drop-shadow(0 8px 20px #07528b1a); transform:scaleX(1.08); transform-origin:left bottom; }
.gp-auth-visual::after { position:absolute; z-index:1; right:-16%; bottom:-16%; width:95%; height:29%; border-radius:50% 50% 0 0; background:linear-gradient(155deg,#00c9bf 0 21%,#0061a5 21% 40%,#012c6a 40%); transform:rotate(-9deg); content:""; }
.gp-auth-form-stage { position:relative; z-index:4; display:grid; place-items:center; padding:5vh 5vw 5vh 1.8vw; }
.gp-login-card { width:min(650px,100%); padding:39px 70px 44px; border:1px solid #ffffff; border-radius:46px; background:linear-gradient(145deg,#ffffffed,#fbfdffec); box-shadow:0 28px 70px #064b7f20,inset 0 1px #fff; backdrop-filter:blur(24px); }
.gp-login-brand { display:flex; flex-direction:column; align-items:center; color:#071943; text-align:center; }
.gp-login-brand img { width:86px; height:86px; }
.gp-login-brand strong { margin-top:4px; font-size:28px; line-height:1; letter-spacing:-.9px; }
.gp-login-brand small { margin-top:5px; font-size:14px; letter-spacing:.02em; }
.gp-login-heading { margin:31px 0 31px; text-align:center; }
.gp-login-heading h2 { margin:0 0 5px; color:#071943; font-size:40px; font-weight:800; letter-spacing:-1.2px; }
.gp-login-heading p { margin:0; color:#47536b; font-size:17px; }
.gp-login-card .alert { margin-bottom:14px; }
.gp-auth-field { position:relative; display:flex; height:57px; align-items:center; margin-bottom:15px; padding:0 16px 0 21px; border:1px solid #c5d2e1; border-radius:17px; background:#ffffff7d; color:#4b5870; transition:.18s; }
.gp-auth-field:focus-within { border-color:#079eaa; box-shadow:0 0 0 4px #079eaa14; }
.gp-auth-field > svg { width:28px; height:28px; flex:none; }
.gp-auth-field input { height:100%; margin:0; padding:0 18px; border:0; border-radius:0; background:transparent; box-shadow:none; font-size:17px; }
.gp-auth-field input:focus { border:0; box-shadow:none; }
.gp-auth-field input::placeholder { color:#5e6980; opacity:1; }
.gp-auth-field button { display:grid; width:34px; height:34px; flex:none; place-items:center; padding:0; border:0; background:transparent; color:#536078; cursor:pointer; }
.gp-auth-field button svg { width:23px; height:23px; }
.gp-auth-field button.showing .eye-slash { display:none; }
.gp-login-options { display:flex; align-items:center; justify-content:space-between; margin:4px 2px 27px; font-size:15px; }
.gp-login-options > label { display:flex; align-items:center; gap:9px; color:#14203d; font-size:15px; cursor:pointer; }
.gp-login-options input { width:21px; height:21px; margin:0; accent-color:#0879d1; }
.gp-login-options a { color:#075dcc; font-weight:500; }
.gp-signin-button { display:flex; width:100%; height:61px; align-items:center; justify-content:center; gap:15px; border:0; border-radius:23px; background:linear-gradient(100deg,#07519d,#00c4b7); color:white; box-shadow:0 11px 24px #087c9b24; font-size:20px; font-weight:700; cursor:pointer; transition:.18s; }
.gp-signin-button:hover { transform:translateY(-1px); box-shadow:0 14px 30px #087c9b38; }
.gp-signin-button svg { width:27px; height:27px; }
.gp-login-security { margin:24px 0 0; color:#67738a; font-size:12px; text-align:center; }
.gp-login-security span { color:#079f91; }
.gp-recovery-card { max-width:610px; }
.gp-back-login { display:block; margin-top:22px; color:#075dcc; font-weight:600; text-align:center; }
.user-table-person { display:flex; align-items:center; gap:10px; }
.user-table-person > span,.profile-avatar-large { display:grid; place-items:center; background:linear-gradient(135deg,#0879b7,#00bbae); color:white; font-weight:800; }
.user-table-person > span { width:38px; height:38px; flex:none; border-radius:11px; font-size:15px; }
.role-badge { display:inline-flex; padding:5px 9px; border-radius:8px; background:#edf3f8; color:#42516b; font-size:10px; font-weight:800; white-space:nowrap; }
.role-admin { background:#ebe5ff; color:#5d27c9; }.role-manager { background:#dff4ff; color:#0863a4; }.role-accountant { background:#e0f8ec; color:#087647; }.role-hr { background:#fff0db; color:#a45800; }.role-staff { background:#edf2f7; color:#44536b; }
.reset-request-note { color:#c75300!important; font-weight:700; }
.actions form { display:inline-flex; }
.user-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); }
.profile-layout { grid-template-columns:minmax(260px,.7fr) minmax(0,1.8fr); }
.user-profile-card { padding:30px; text-align:center; }
.profile-avatar-large { width:78px; height:78px; margin:0 auto 15px; border-radius:23px; font-size:30px; box-shadow:0 12px 28px #087ca228; }
.user-profile-card h2 { margin:0 0 10px; font-size:23px; }
.user-profile-card dl { margin:23px 0 0; text-align:left; }
.user-profile-card dl div { padding:10px 0; border-bottom:1px solid var(--ink-100); }
.user-profile-card dt { color:var(--ink-500); font-size:10px; text-transform:uppercase; }.user-profile-card dd { margin:2px 0 0; font-size:12px; font-weight:700; word-break:break-word; }
@media(max-width:1120px) { .gp-auth-page { grid-template-columns:1fr 540px; }.gp-auth-visual { padding-left:4vw; }.gp-auth-message { margin-left:2vw; }.gp-auth-benefits { margin-left:2vw; }.gp-login-card { padding-inline:48px; }.gp-auth-message h1 { font-size:48px; }.gp-auth-benefits { grid-template-columns:1fr 1fr; width:370px; }.gp-auth-benefits > div { min-height:83px; }.gp-auth-city { width:86%; } }
@media(max-width:860px) { .gp-auth-page { display:block; min-height:100vh; padding:30px 20px; }.gp-auth-visual { display:none; }.gp-auth-form-stage { min-height:calc(100vh - 60px); padding:0; }.gp-login-card { width:min(590px,100%); }.user-metrics { grid-template-columns:1fr 1fr; }.profile-layout { grid-template-columns:1fr; } }
@media(max-width:520px) { .gp-auth-page { padding:0; background:white; }.gp-auth-form-stage { min-height:100vh; }.gp-login-card { min-height:100vh; padding:32px 23px; border:0; border-radius:0; box-shadow:none; }.gp-login-brand img { width:73px; height:73px; }.gp-login-brand strong { font-size:23px; }.gp-login-heading { margin:27px 0; }.gp-login-heading h2 { font-size:32px; }.gp-auth-field { height:54px; }.gp-login-options { font-size:13px; }.gp-login-options > label { font-size:13px; }.user-metrics { grid-template-columns:1fr 1fr; } }
.inline-form { display:inline-flex; align-items:center; gap:8px; margin-left:8px; }
.inline-form select { min-width:118px; height:38px; padding:0 30px 0 10px; }
.status-sent { background:#e0f1ff; color:#075da5; }
.status-accepted,.status-converted { background:#dcf8e7; color:#087044; }