:root{font-family:Inter,sans-serif;color:#141b2c;background:#f9f9ff;--background: #f9f9ff;--surface: #f9f9ff;--surface-low: #f1f3ff;--surface-card: #ffffff;--surface-high: #dbe2f9;--surface-mid: #e9edff;--primary: #003d9b;--primary-strong: #0052cc;--primary-soft: #dae2ff;--secondary: #525f73;--secondary-soft: #d6e3fb;--outline: #c3c6d6;--text: #141b2c;--text-soft: #434654;--danger: #7b2600;--danger-soft: #ffdbcf;--shadow: 0 10px 30px rgba(20, 27, 44, .06)}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{background:radial-gradient(circle at top left,rgba(0,82,204,.1),transparent 28%),radial-gradient(circle at bottom right,rgba(219,226,249,.9),transparent 32%),var(--background);color:var(--text)}a{color:inherit;text-decoration:none}button,input{font:inherit}button{border:0;cursor:pointer}button:disabled{opacity:.6;cursor:not-allowed;transform:none}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 500,"GRAD" 0,"opsz" 24}.app-shell{min-height:100vh;display:grid;grid-template-columns:280px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:24px 18px;background:#ffffffb8;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-right:1px solid rgba(195,198,214,.35);display:flex;flex-direction:column;gap:24px}.brand-block{display:flex;align-items:center;gap:14px}.brand-block.large{margin-bottom:28px}.brand-block h1,.brand-block h2,.brand-block p{margin:0}.brand-block h1{font-size:1.05rem;font-weight:900;letter-spacing:-.03em}.brand-block p{color:var(--text-soft);font-size:.85rem}.brand-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-strong));box-shadow:0 14px 30px #003d9b3d}.sidebar-nav{display:flex;flex-direction:column;gap:6px}.shell-nav-link{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;color:var(--secondary);font-size:.82rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;transition:.16s ease}.shell-nav-link:hover,.shell-nav-link.active{background:#0052cc14;color:var(--primary)}.shell-nav-link.active{box-shadow:inset 3px 0 0 var(--primary)}.sidebar-footer{margin-top:auto;display:grid;gap:14px}.footer-links{display:flex;gap:8px}.shell-main{display:grid;grid-template-rows:auto 1fr;min-width:0}.topbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 28px 18px;background:#f9f9ffcc;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.topbar-title{font-size:1.2rem;font-weight:900;letter-spacing:-.04em}.topbar-subtitle{color:var(--text-soft);font-size:.85rem}.topbar-actions{display:flex;align-items:center;gap:12px}.search-field{display:flex;align-items:center;gap:10px;min-width:320px;padding:12px 14px;border-radius:999px;background:#ffffffd9;box-shadow:inset 0 0 0 1px #c3c6d64d}.search-field.compact{min-width:280px}.search-field input{width:100%;border:0;outline:none;background:transparent}.page-content{padding:0 28px 28px}.page-stack{display:grid;gap:24px}.two-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.processing-layout{grid-template-columns:360px 1fr}.payslip-layout{grid-template-columns:minmax(0,1.65fr) minmax(320px,.7fr)}.hero-card,.split-hero{position:relative;overflow:hidden;padding:28px;border-radius:32px;color:#fff;background:radial-gradient(circle at top right,rgba(255,255,255,.16),transparent 28%),linear-gradient(135deg,var(--primary),var(--primary-strong));box-shadow:0 22px 60px #003d9b3d}.hero-card.compact{padding:24px}.hero-card h1,.split-hero h1{margin:8px 0 10px;font-size:clamp(2rem,4vw,3.8rem);line-height:.95;letter-spacing:-.06em}.hero-card p,.split-hero p{margin:0;max-width:56ch;color:#ffffffc2}.hero-metrics,.hero-actions,.hero-ledger{display:grid;gap:12px}.hero-metrics{margin-top:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.hero-metrics div,.hero-ledger,.hero-ledger.small{padding:16px 18px;border-radius:20px;background:#ffffff21;border:1px solid rgba(255,255,255,.14)}.hero-metrics span,.hero-ledger span{display:block;margin-bottom:6px;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#ffffffb8}.hero-metrics strong,.hero-ledger strong{display:block;font-size:1.1rem;letter-spacing:-.04em}.hero-ledger strong{font-size:clamp(1.4rem,3vw,3rem)}.hero-ledger small{display:block;margin-top:8px;color:#ffffffb3}.hero-ledger.vertical{height:100%;align-content:center}.split-hero{display:flex;justify-content:space-between;align-items:end;gap:24px}.section-card{padding:24px;border-radius:28px;background:#ffffffe0;box-shadow:var(--shadow)}.section-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}.section-card-head h2{margin:6px 0 0;font-size:1.5rem;line-height:1.05;letter-spacing:-.04em}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.summary-card{padding:22px;border-radius:24px;background:#ffffffe0;box-shadow:var(--shadow)}.summary-card.warning{background:linear-gradient(180deg,#fff6f1,#fff)}.summary-card-head{display:flex;justify-content:space-between;gap:16px}.summary-card h3{margin:10px 0 0;font-size:2rem;line-height:1;letter-spacing:-.06em}.summary-meta{margin:16px 0 0;color:var(--text-soft)}.icon-badge,.avatar-badge{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--primary-soft);color:var(--primary);font-weight:800}.avatar-badge{background:linear-gradient(135deg,var(--primary),var(--primary-strong));color:#fff}.avatar-badge.small{width:38px;height:38px;border-radius:12px;font-size:.8rem}.primary-button,.secondary-button,.ghost-button,.action-card{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;border-radius:16px;font-weight:800;transition:transform .14s ease,opacity .14s ease,background .14s ease}.primary-button:hover,.secondary-button:hover,.ghost-button:hover,.action-card:hover{transform:translateY(-1px)}.primary-button{color:#fff;background:linear-gradient(135deg,var(--primary),var(--primary-strong));box-shadow:0 16px 28px #003d9b33}.secondary-button{background:var(--secondary-soft);color:var(--primary)}.secondary-button.compact{padding-inline:14px;border-radius:999px}.ghost-button,.ghost-link{color:var(--primary);background:transparent}.full-width{width:100%}.muted-copy{margin:0;color:var(--text-soft);line-height:1.7}.error-copy{margin:0;color:var(--danger);font-weight:700}.eyebrow{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}.eyebrow.inverse{color:#ffffffb8}.bullet-list{margin:0;padding-left:18px;display:grid;gap:12px;color:var(--text-soft)}.token-grid,.action-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px}.token-card,.action-card{padding:16px;border-radius:22px;background:var(--surface-low)}.token-swatch{width:100%;height:72px;border-radius:18px;margin-bottom:12px}.token-card strong,.token-card span{display:block}.token-card span{margin-top:4px;color:var(--text-soft);font-size:.9rem}.type-ramp{display:grid;gap:18px}.type-label{display:block;margin-bottom:6px;color:var(--text-soft);font-size:.82rem}.display-sample,.headline-sample{display:block;letter-spacing:-.05em}.display-sample{font-size:2.5rem}.headline-sample{font-size:1.65rem}.body-sample{margin:0;color:var(--text-soft)}.table-like{display:grid;gap:10px}.table-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;border-radius:18px;background:var(--surface-low)}.table-row strong,.table-row span{display:block}.table-row>div>span{margin-top:4px;color:var(--text-soft)}.progress-stack{display:grid;gap:18px}.progress-meta{display:flex;justify-content:space-between;margin-bottom:8px;font-weight:700}.progress-bar{height:10px;border-radius:999px;overflow:hidden;background:#0052cc1f}.progress-bar>div{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--primary-strong))}.progress-bar.muted{background:#525f7324}.progress-bar.warning{background:#7b26001f}.progress-bar.warning>div{background:linear-gradient(90deg,#b85a2a,var(--danger))}.pill{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;border-radius:999px;background:#0052cc1f;color:var(--primary);font-size:.75rem;font-weight:800}.pill.neutral{background:#525f7324;color:var(--secondary)}.pill.warning{background:#7b26001f;color:var(--danger)}.pill.danger{background:var(--danger-soft);color:var(--danger)}.timeline{display:grid;gap:14px}.timeline-item{padding:16px 18px;border-left:3px solid var(--primary);border-radius:0 18px 18px 0;background:var(--surface-low)}.timeline-item span,.timeline-item strong{display:block}.timeline-item span{color:var(--text-soft);margin-bottom:4px}.period-stack{display:grid;gap:12px}.period-card{text-align:left;padding:18px;border-radius:24px;background:var(--surface-low)}.period-card.selected{background:var(--surface-card);box-shadow:var(--shadow);outline:2px solid rgba(0,82,204,.12)}.period-card strong,.period-card span,.period-card small{display:block}.period-meta,.period-footer{display:flex;justify-content:space-between;align-items:center}.period-footer{margin-top:16px;color:var(--text-soft)}.period-footer strong{color:var(--primary)}.payslip-sheet{display:grid;gap:24px}.payslip-head{display:flex;justify-content:space-between;gap:16px}.payslip-head h3{margin:0;color:var(--primary);font-size:1.7rem;letter-spacing:-.05em}.payslip-head p,.payslip-meta small{margin:6px 0 0;color:var(--text-soft)}.info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:20px;border-radius:22px;background:var(--surface-low)}.info-grid span,.info-grid strong{display:block}.info-grid span{color:var(--secondary);margin-bottom:6px;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.ledger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.ledger-subtitle{margin:0 0 14px;color:var(--primary);text-transform:uppercase;letter-spacing:.12em;font-size:.82rem}.ledger-subtitle.danger{color:var(--danger)}.money-list{display:grid;gap:12px}.money-row,.money-total{display:flex;justify-content:space-between;gap:12px}.money-row span{color:var(--text-soft)}.money-total{margin-top:18px;padding-top:16px;border-top:1px solid rgba(195,198,214,.5);font-weight:900}.employee-table-wrap{overflow-x:auto}.employee-table{width:100%;border-collapse:separate;border-spacing:0 10px}.employee-table th{padding:0 14px 10px;text-align:left;color:var(--secondary);font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.employee-table td{padding:16px 14px;background:var(--surface-low)}.employee-table tr td:first-child{border-radius:18px 0 0 18px}.employee-table tr td:last-child{border-radius:0 18px 18px 0}.employee-cell{display:flex;align-items:center;gap:12px}.employee-cell strong,.employee-cell span{display:block}.employee-cell span{color:var(--text-soft);font-size:.84rem}.field{display:grid;gap:8px}.field span{font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}.field input,.password-field{width:100%;padding:14px 16px;border:1px solid rgba(195,198,214,.32);border-radius:16px;background:var(--surface-low)}.field input:focus{outline:2px solid rgba(0,82,204,.18)}.password-field{display:flex;align-items:center;padding:0 8px 0 16px}.password-field input{border:0;padding:14px 0;outline:none;background:transparent}.icon-button{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:transparent;color:var(--secondary)}.checkbox-row{display:flex;align-items:center;gap:10px;color:var(--text-soft)}.login-page{position:relative;min-height:100vh;overflow:hidden;display:grid;place-items:center;padding:40px 24px}.login-layout{position:relative;z-index:1;width:min(1180px,100%);display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}.login-copy h2{margin:0 0 16px;font-size:clamp(3rem,7vw,5.8rem);line-height:.92;letter-spacing:-.08em}.login-copy>p{max-width:42ch;color:var(--text-soft);font-size:1.05rem;line-height:1.7}.login-card{display:grid;gap:18px;padding:28px;border-radius:32px;background:#ffffffe0;box-shadow:0 30px 60px #141b2c1f}.login-links{display:flex;justify-content:space-between;align-items:center;gap:12px}.trust-row{margin-top:28px;display:grid;gap:12px}.avatar-stack{display:flex}.avatar-stack span{width:44px;height:44px;margin-right:-10px;border-radius:999px;display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:800;border:3px solid var(--background);background:linear-gradient(135deg,var(--primary),var(--primary-strong))}.login-ambient{position:absolute;width:520px;height:520px;border-radius:120px;filter:blur(60px);opacity:.55}.login-ambient-left{top:-120px;left:-180px;background:#0052cc29;transform:rotate(16deg)}.login-ambient-right{right:-120px;bottom:-120px;background:#dbe2f9db;transform:rotate(-18deg)}@media(max-width:1080px){.app-shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid rgba(195,198,214,.35)}.topbar,.split-hero,.hero-metrics,.summary-grid,.two-column,.processing-layout,.payslip-layout,.ledger-grid,.info-grid,.login-layout{grid-template-columns:1fr;flex-direction:column}.topbar{align-items:stretch}.topbar-actions,.hero-actions,.login-links{width:100%;flex-wrap:wrap}.search-field{min-width:0;width:100%}}@media(max-width:720px){.page-content,.topbar{padding-inline:16px}.section-card,.hero-card,.split-hero,.login-card{padding:20px;border-radius:24px}.login-copy h2,.hero-card h1,.split-hero h1{font-size:2.4rem}.employee-table{min-width:760px}}