@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',system-ui,sans-serif;color:#17302e;background:#f4f7f6;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}.app{display:flex;min-height:100vh}.sidebar{width:246px;flex-shrink:0;background:#102a28;color:#c8d9d5;display:flex;flex-direction:column;padding:26px 14px;position:sticky;top:0;height:100vh}.brand{display:flex;gap:12px;align-items:center;color:white;font-family:Manrope;font-size:21px;font-weight:800;padding:2px 12px 31px}.brand-mark{width:39px;height:39px;border-radius:12px;background:#2fbca3;display:grid;place-items:center;color:#093830;font-size:20px}.side-label{font-size:10px;letter-spacing:1.5px;color:#759590;padding:19px 12px 8px;font-weight:800}.nav{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:9px;background:transparent;border:0;color:#c8d9d5;width:100%;text-align:left;font-size:13px;font-weight:600;margin:2px 0}.nav:hover{background:#21443e}.nav.active{color:white;background:#237c6d}.nav .symbol{width:21px;text-align:center;font-size:17px}.side-bottom{margin-top:auto;background:#1b3e38;border-radius:12px;padding:15px;font-size:12px;line-height:1.7}.side-bottom strong{display:block;color:#fff;margin-bottom:3px}.main{min-width:0;flex:1}.topbar{height:84px;background:white;border-bottom:1px solid #e5eeea;display:flex;align-items:center;justify-content:space-between;padding:0 38px;gap:12px}.crumb{color:#92a29d;font-size:12px}.topbar h2{margin:5px 0 0;font-family:Manrope;font-size:19px;letter-spacing:-.5px}.top-actions{display:flex;align-items:center;gap:12px}.company-select{border:1px solid #dce8e3;border-radius:9px;background:#fff;padding:11px 14px;min-width:180px;font-size:12px;color:#244640;font-weight:700}.avatar{width:38px;height:38px;display:grid;place-items:center;background:#d2f0e8;color:#08715f;border-radius:50%;font-weight:800}.content{padding:35px 38px 70px;max-width:1480px;margin:auto}.section-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:25px}.section-head h1{font:800 26px Manrope;margin:0 0 7px;letter-spacing:-1px}.muted{color:#8c9e99;font-size:13px;margin:0}.primary{background:#127b6b;color:white;border:0;border-radius:9px;padding:11px 17px;font-weight:700;font-size:12px}.primary:hover{background:#086456}.ghost{background:white;color:#31544e;border:1px solid #dce8e3;border-radius:9px;padding:10px 14px;font-weight:700;font-size:12px}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.stat,.panel{background:white;border:1px solid #e4ede9;border-radius:15px;box-shadow:0 5px 23px #17483d08}.stat{padding:21px 23px}.stat-top{display:flex;align-items:center;justify-content:space-between;color:#78928b;font-size:12px;font-weight:600}.stat-icon{height:34px;width:34px;border-radius:10px;background:#e7f6f2;display:grid;place-items:center;color:#138878;font-size:18px}.stat strong{font:800 27px Manrope;display:block;letter-spacing:-1px;margin:18px 0 8px}.delta{font-size:11px;color:#118879}.panel{padding:24px}.panel-title{font:800 15px Manrope;margin:0 0 20px}.dash-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:18px}.bars{height:230px;display:flex;gap:12px;align-items:flex-end;padding:15px 4px 0}.bar-group{flex:1;display:flex;align-items:flex-end;justify-content:center;gap:5px;height:100%;position:relative}.bar{width:25%;min-width:8px;border-radius:6px 6px 0 0;background:#19a991;min-height:3px}.bar.alt{background:#d3eae3}.bar-caption{position:absolute;bottom:-24px;font-size:10px;color:#9baaa6}.legend{display:flex;gap:20px;font-size:11px;color:#7f9690;margin-top:39px}.dot{width:9px;height:9px;display:inline-block;border-radius:3px;background:#19a991;margin-right:6px}.dot.alt{background:#d3eae3}.activity{display:flex;flex-direction:column;gap:17px}.activity-row{display:flex;align-items:center;gap:12px}.activity-ico{width:36px;height:36px;display:grid;place-items:center;background:#e9f8f4;border-radius:10px}.activity-name{font-size:12px;font-weight:700}.activity-sub{font-size:11px;color:#91a19d;margin-top:4px}.activity-amount{margin-left:auto;font-size:12px;font-weight:800}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}.data-table th{padding:13px 10px;color:#8a9d97;font-size:10px;letter-spacing:.5px;text-transform:uppercase;background:#f7faf9}.data-table td{padding:16px 10px;border-top:1px solid #edf2ef}.data-table tr:first-child td{border-top:0}.data-table td strong{font-weight:800}.tag{display:inline-flex;padding:5px 10px;border-radius:50px;background:#e7f7ef;color:#13835c;font-weight:700;font-size:10px}.tag.unpaid{color:#b57b23;background:#fff4e1}.tag.overdue{color:#bd4747;background:#ffebeb}.tag.pending{color:#977033;background:#fff1d9}.empty{color:#9cada6;text-align:center;padding:38px 12px;font-size:13px}.toolbar{display:flex;gap:10px;margin-bottom:17px;align-items:center;flex-wrap:wrap}.search{border:1px solid #dce8e3;border-radius:9px;background:white;padding:11px 13px;min-width:240px;flex:1;max-width:360px}.pill{background:#e8f5f0;color:#107765;font-size:11px;padding:7px 11px;border-radius:30px;font-weight:800}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.info-box{background:#eff8f5;border:1px solid #d8ebe3;padding:18px;border-radius:12px;font-size:13px;line-height:1.7}.modal-bg{position:fixed;inset:0;background:#1028239e;display:grid;place-items:center;padding:20px;z-index:10}.modal{background:white;padding:27px;border-radius:17px;width:min(100%,510px);box-shadow:0 12px 60px #0003;max-height:90vh;overflow:auto}.modal h2{font:800 20px Manrope;margin:0 0 20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#496860;font-weight:700}.field.full{grid-column:1/-1}.field input,.field select{border:1px solid #d8e6df;padding:11px;border-radius:9px;min-width:0;color:#233d36;background:white}.modal-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:24px}.login{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background:white}.login-art{background:radial-gradient(circle at 30% 20%,#2a9582,#102f2b 75%);padding:12%;display:flex;flex-direction:column;justify-content:center;color:white}.login-art h1{font:800 clamp(38px,4vw,66px) Manrope;letter-spacing:-3px;line-height:1.1}.login-art p{color:#cce5de;line-height:1.8}.login-form{display:flex;align-items:center;justify-content:center;padding:30px}.login-inner{width:min(100%,420px)}.login-inner h2{font:800 29px Manrope}.login-inner .field{margin:19px 0}.login-inner button{width:100%;margin-top:12px;padding:14px}.helper{margin-top:20px;font-size:12px;color:#859c94;line-height:1.8}.banner{background:#fff9ec;border:1px solid #f1dfac;border-radius:10px;padding:10px 15px;font-size:11px;color:#91682a;margin-bottom:20px}.logo-line{font-weight:800;font-size:23px;color:#096c5d}.mobile-menu,.mobile-nav{display:none}.footer-note{color:#91a69e;font-size:11px;margin-top:28px}@media(max-width:1050px){.cards{grid-template-columns:repeat(2,1fr)}.dash-grid{grid-template-columns:1fr}.sidebar{width:210px}.content{padding:25px}.topbar{padding:0 25px}}@media(max-width:720px){.sidebar{display:none}.topbar{height:auto;padding:16px;flex-wrap:wrap}.content{padding:20px 14px}.cards{gap:10px}.stat{padding:15px}.stat strong{font-size:20px}.two-col{grid-template-columns:1fr}.login{grid-template-columns:1fr}.login-art{padding:35px 25px}.login-art h1{font-size:32px;letter-spacing:-1px}.login-art p{display:none}.login-form{padding:30px 25px}.mobile-menu{display:block;border:0;background:#e9f5f0;border-radius:8px;padding:8px}.mobile-nav{width:100%;display:flex;gap:6px;overflow:auto;padding-bottom:4px}.mobile-nav button{white-space:nowrap;border:1px solid #e0eae6;border-radius:7px;background:white;padding:8px;font-size:11px}.company-select{min-width:135px}.avatar{display:none}.section-head h1{font-size:22px}}