:root{--ink:#202033;--muted:#89899a;--line:#ececf2;--purple:#7167e8;--bg:#f7f8fc;--green:#199b72;--font:'DM Sans',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:#fff;border-right:1px solid #ededf2;padding:27px 17px 18px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;align-items:center;gap:11px;padding:0 7px;margin-bottom:42px;text-decoration:none;color:var(--ink);font:800 22px Manrope,sans-serif;letter-spacing:-1px}.brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--purple);color:#fff;border-radius:11px;font-size:20px}.brand-dot{color:var(--purple)}.brand small{display:block;font:700 8px var(--font);color:#9695a6;letter-spacing:1.55px;margin-top:1px}.workspace-label,.nav-label{font-size:9px;font-weight:700;letter-spacing:1.2px;color:#a0a0ae;margin:0 9px 9px}.workspace{height:42px;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;gap:9px;padding:0 10px;font-size:12px;font-weight:600}.workspace-icon{color:var(--purple);font-size:17px}.chevron{margin-left:auto;color:#a0a0ae}.nav-label{margin-top:30px}nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;height:41px;padding:0 11px;display:flex;align-items:center;text-align:left;gap:11px;border-radius:8px;color:#69697b;font:500 12px var(--font);cursor:pointer}.nav-item>span{font-size:18px;width:17px;text-align:center;color:#9999aa}.nav-item.active{background:#f1f0ff;color:#5e55d1;font-weight:700}.nav-item.active>span{color:#6a61de}.nav-item i{margin-left:auto;border-radius:20px;background:#efeff5;padding:3px 7px;font-style:normal;font-size:10px}.sidebar-bottom{margin-top:auto}.help-card{background:#f7f7fb;border:1px solid #f0eff7;padding:13px;border-radius:10px}.help-icon{width:25px;height:25px;border-radius:7px;background:#ebe9ff;color:var(--purple);display:grid;place-items:center;margin-bottom:11px}.help-card strong{font-size:11px}.help-card p{font-size:10px;color:var(--muted);line-height:1.5;margin:5px 0 10px}.help-card button{width:100%;border:1px solid #e7e6ef;background:#fff;border-radius:6px;padding:7px;color:#5e55d1;font:600 10px var(--font);text-align:left}.help-card button span{float:right}.sidebar-footer{padding:18px 4px 0;color:#9999a8;font-size:10px}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#31bd8e;margin-right:5px}.main{margin-left:250px;min-height:100vh}.topbar{height:65px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px}.breadcrumb{font-size:11px;color:#9999a8}.breadcrumb span{margin:0 8px;color:#c4c4ce}.breadcrumb b{color:#4f4f61;font-weight:600}.top-actions{display:flex;align-items:center;gap:17px}.icon-button{position:relative;border:0;background:none;color:#858597;font-size:19px}.icon-button i{position:absolute;width:5px;height:5px;background:#f19079;border-radius:50%;top:1px;right:0}.role-switch{border:1px solid var(--line);background:#fff;border-radius:7px;padding:8px 10px;color:#636375;font:500 10px var(--font);display:flex;gap:8px;align-items:center;cursor:pointer}.profile{display:flex;align-items:center;gap:9px;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#e9e8ff;color:#655bd4;font-weight:700;font-size:10px}.profile-copy b,.profile-copy small{display:block}.profile-copy b{font-size:10px}.profile-copy small{font-size:9px;color:#9999a8;margin-top:2px}.content{max-width:1320px;padding:32px 38px 16px;margin:auto}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:23px}.eyebrow{font-size:9px;color:#9a99a8;font-weight:700;letter-spacing:1px}h1{font:700 25px Manrope,sans-serif;letter-spacing:-.7px;margin:8px 0 5px}h1 span{font-size:19px;color:#efa850}#pageDescription{margin:0;color:#9090a0;font-size:11px}.period-select,.select-small{border:1px solid var(--line);background:#fff;color:#666679;border-radius:7px;padding:9px 11px;font:500 10px var(--font);display:flex;align-items:center;gap:9px;cursor:pointer}.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:16px}.stat-card,.panel{background:#fff;border:1px solid #edecf2;border-radius:10px}.stat-card{padding:15px 16px;position:relative;min-height:132px;overflow:hidden}.stat-top{display:flex;justify-content:space-between;align-items:center;color:#777789;font-size:10px;font-weight:500}.stat-icon{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;font-size:13px}.purple{background:#f0efff;color:#7268e4}.green{background:#e9f7f1;color:#27a77d}.orange{background:#fff4e8;color:#ec9944}.stat-value{font:700 22px Manrope,sans-serif;letter-spacing:-.7px;margin:10px 0 5px}.stat-value small{font:500 10px var(--font);letter-spacing:0;color:#9a99a8}.stat-foot{display:flex;gap:6px;align-items:center;color:#a09fac;font-size:9px}.positive{color:#18a47a;font-weight:700}.soft-green{color:#299f79;background:#eff9f4;padding:3px 6px;border-radius:4px;font-weight:600}.sparkline{position:absolute;right:16px;bottom:16px;height:29px;display:flex;align-items:end;gap:3px;opacity:.7}.sparkline i{width:5px;border-radius:2px 2px 0 0;background:#8b83ed}.orange-line i{background:#f2b067}.receipt-progress{display:flex;gap:4px;margin-top:11px}.receipt-progress span{height:4px;flex:1;border-radius:4px;background:#e6f5ee}.receipt-progress span:nth-child(-n+5){background:#62c69e}.dashboard-grid{display:grid;grid-template-columns:1.38fr 1fr;gap:14px;margin-bottom:14px}.panel{padding:16px}.chart-panel,.recent-panel{min-height:266px}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel-heading h2{font:700 13px Manrope,sans-serif;margin:0 0 5px;letter-spacing:-.2px}.panel-heading p{font-size:10px;color:#9a99a8;margin:0}.chart-legend{display:flex;justify-content:space-between;align-items:center;margin:19px 0 10px;font-size:9px;color:#89899a}.chart-legend>span{display:flex;align-items:center;gap:6px}.legend-dot{width:7px;height:7px;border-radius:50%;background:#756be7}.chart-legend b{font-size:9px;font-weight:500}.chart-legend strong{display:block;color:#373747;font:700 13px Manrope,sans-serif;margin-top:3px}.chart-wrap{display:flex;height:134px}.y-labels{width:43px;display:flex;flex-direction:column;justify-content:space-between;padding:0 0 20px;color:#b2b1bd;font-size:8px}.chart{position:relative;flex:1;padding-bottom:19px}.grid-lines{position:absolute;inset:0 0 19px;display:flex;flex-direction:column;justify-content:space-between}.grid-lines i{border-top:1px dashed #ebebf1}.chart svg{position:absolute;inset:0;width:100%;height:calc(100% - 19px);overflow:visible}.chart .area{fill:url(#fill)}.chart .line{fill:none;stroke:#766ce7;stroke-width:2.2;vector-effect:non-scaling-stroke}.chart circle{fill:#766ce7;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}.x-labels{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;color:#a5a4b1;font-size:8px}.text-link{border:0;background:none;color:#6860d7;font:600 9px var(--font);cursor:pointer}.recent-list{margin-top:13px}.recent-item{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #f1f0f5}.recent-item:last-child{border:0}.recent-icon{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:#f1f0ff;color:#7369e4}.recent-copy{flex:1}.recent-copy b,.recent-copy small{display:block}.recent-copy b{font-size:10px;font-weight:600}.recent-copy small{font-size:9px;color:#a0a0ae;margin-top:3px}.recent-value{text-align:right;font-size:10px;font-weight:700}.recent-value small{display:block;margin-top:3px;color:#9999a8;font-size:8px;font-weight:400}.payslip-panel{padding-bottom:7px}.payslip-panel .panel-heading{margin-bottom:10px}.receipt-row{display:flex;align-items:center;gap:10px;border-top:1px solid #f0eff4;padding:11px 0}.receipt-doc{width:28px;height:28px;display:grid;place-items:center;color:#756be7;background:#f1f0ff;border-radius:7px}.receipt-copy{flex:1}.receipt-copy b,.receipt-copy small{display:block}.receipt-copy b{font-size:10px;font-weight:600}.receipt-copy small{font-size:9px;color:#a0a0ae;margin-top:4px}.badge{background:#eff9f3;color:#259a72;border-radius:4px;padding:5px 7px;font-size:8px;font-weight:700}.view-button{border:1px solid #e9e8f0;background:#fff;border-radius:6px;padding:6px 9px;font:600 9px var(--font);color:#6761c8;cursor:pointer}.view-button span{padding-left:4px}.page-footer{display:flex;justify-content:space-between;color:#a1a0ad;font-size:9px;padding:19px 1px 0}.lock{color:#7770d6;margin-left:4px}.hidden{display:none!important}.listing-page{min-height:300px;padding:19px}.listing-page .panel-heading h2{font-size:15px}.primary-button{border:0;border-radius:7px;background:#6c63dc;color:#fff;padding:10px 13px;font:600 10px var(--font);cursor:pointer}.search-row{display:flex;align-items:center;gap:10px;margin:18px 0 11px}.search-row input,.search-row select{height:34px;border:1px solid var(--line);border-radius:6px;padding:0 10px;font:10px var(--font);color:#666679;background:#fff}.search-row input{width:250px}.search-row span{margin-left:auto;color:#9999a8;font-size:9px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left}th{font-size:8px;letter-spacing:.7px;color:#a0a0ae;font-weight:700;padding:11px 9px;border-bottom:1px solid var(--line)}td{padding:12px 9px;border-bottom:1px solid #f1f0f5;font-size:10px;color:#626274}td strong{font-size:10px;color:#303043}.cell-avatar{display:inline-grid;vertical-align:middle;place-items:center;width:28px;height:28px;margin-right:8px;background:#f0efff;color:#7067dc;border-radius:50%;font-size:9px;font-weight:700}.status-active{color:#239a70;background:#eff9f3;padding:4px 7px;border-radius:4px;font-size:8px;font-weight:700}.table-action{border:0;background:none;color:#7b73d6;cursor:pointer;font-size:15px}.month-card{border-bottom:1px solid #f0eff5}.month-toggle{width:100%;border:0;background:#fff;display:flex;align-items:center;gap:12px;padding:14px 2px;text-align:left;cursor:pointer;color:var(--ink)}.month-icon{background:#f2f1ff;color:#7067dc;width:31px;height:31px;display:grid;place-items:center;border-radius:8px}.month-name{flex:1}.month-name b,.month-name small{display:block}.month-name b{font-size:11px}.month-name small{color:#9d9caa;font-size:9px;margin-top:3px}.month-total{text-align:right;font-weight:700;font-size:11px}.month-total small{display:block;color:#9d9caa;font-size:8px;font-weight:400;margin-top:3px}.month-detail{display:none;background:#fafafd;border-radius:7px;padding:10px 14px;margin-bottom:11px}.month-card.open .month-detail{display:block}.detail-row{display:flex;justify-content:space-between;padding:7px 0;font-size:9px;color:#707082;border-bottom:1px solid #eeeeF4}.detail-row:last-child{border:0}.detail-row b{color:#333347}.month-actions{padding-top:8px;display:flex;justify-content:space-between;align-items:center}.month-actions span{font-size:8px;color:#9898a7}.month-actions button{border:0;background:none;color:#6860d7;font:600 9px var(--font);cursor:pointer}.modal-backdrop{position:fixed;inset:0;background:#17172a70;z-index:10;display:grid;place-items:center;padding:20px}.modal{width:min(440px,100%);background:white;border-radius:12px;padding:23px;box-shadow:0 18px 70px #17172a35}.modal h2{font:700 16px Manrope,sans-serif;margin:0 0 6px}.modal p{font-size:10px;color:#9291a1;margin:0 0 18px}.modal label{display:block;font-size:9px;color:#666679;font-weight:600;margin:11px 0 5px}.modal input,.modal select{width:100%;height:36px;border:1px solid var(--line);border-radius:6px;padding:0 10px;font:10px var(--font);color:#47475a;background:white}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:19px}.modal-actions button{border-radius:6px;padding:9px 13px;font:600 10px var(--font);cursor:pointer}.cancel-button{background:#fff;border:1px solid var(--line);color:#777}.toast{position:fixed;bottom:22px;right:25px;z-index:20;background:#26263b;color:#fff;padding:12px 16px;border-radius:8px;font-size:10px;box-shadow:0 8px 30px #15152825}.empty{text-align:center;color:#9999a8;padding:28px;font-size:10px}@media(max-width:1050px){.sidebar{width:215px}.main{margin-left:215px}.content{padding-left:25px;padding-right:25px}.topbar{padding:0 25px}.dashboard-grid{grid-template-columns:1fr}.chart-panel{min-height:250px}}@media(max-width:720px){.sidebar{width:58px;padding:17px 7px}.brand{padding:0;margin:0 auto 35px}.brand>span:nth-child(2),.workspace-label,.workspace>span:not(.workspace-icon),.nav-label,.nav-item{font-size:0}.workspace{justify-content:center;padding:0}.workspace-icon{font-size:18px}.nav-item{justify-content:center;padding:0}.nav-item>span{font-size:18px}.nav-item i,.sidebar-bottom{display:none}.main{margin-left:58px}.topbar{padding:0 14px}.breadcrumb{font-size:9px}.top-actions{gap:8px}.role-switch{font-size:0;padding:8px}.role-switch span:first-of-type{display:none}.profile-copy,.profile>.chevron{display:none}.content{padding:24px 14px}.welcome-row{align-items:flex-start;gap:10px;flex-direction:column}.period-select{align-self:flex-end;margin-top:-5px}.stats-grid{grid-template-columns:1fr;gap:9px}.stat-card{min-height:120px}.dashboard-grid{grid-template-columns:1fr}.chart-panel,.recent-panel{min-height:unset}.payslip-panel{padding:13px}.receipt-row{gap:7px}.receipt-copy small{max-width:155px;line-height:1.4}.badge{display:none}.view-button{padding:6px}.page-footer{gap:8px;font-size:8px}.listing-page{padding:13px}.search-row{flex-wrap:wrap}.search-row input{width:100%}.search-row select{flex:1}.listing-page .panel-heading{align-items:flex-start}.listing-page .panel-heading p{max-width:190px;line-height:1.5}}