:root{--navy:#111d2e;--navy-2:#1b2a40;--ink:#172538;--muted:#718096;--line:#e7ebf0;--paper:#f5f7fa;--white:#fff;--teal:#087e78;--teal-soft:#e4f5f2;--gold:#d8a345;--gold-soft:#fff5df;--red:#bd5650;--red-soft:#fff0ec;--blue:#5978b4;--shadow:0 12px 36px rgba(23,37,56,.055);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}input,select,textarea{outline:none}input:focus,select:focus,textarea:focus{border-color:var(--teal)!important;box-shadow:0 0 0 3px rgba(8,126,120,.12)}a{color:inherit;text-decoration:none}svg{display:block}strong{font-weight:700}.app-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}.sidebar{background:var(--navy);color:#d8e1ec;padding:28px 15px 21px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}.brand{display:flex;align-items:center;gap:12px;padding:0 13px 30px;color:#fff}.brand-mark{height:38px;width:38px;border-radius:12px;background:linear-gradient(140deg,#46c1b2,#09877e);display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;box-shadow:0 6px 16px rgba(2,165,148,.26)}.brand-name{font-size:15px;font-weight:750;letter-spacing:-.03em;line-height:1.1}.brand-sub{font-size:10px;color:#8798ae;letter-spacing:.04em;margin-top:5px;font-weight:600;text-transform:uppercase}.nav-caption{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:#64758b;padding:0 16px;margin:19px 0 10px;font-weight:800}.nav-item{width:100%;border:0;background:none;color:#aab8ca;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;text-align:left;font-size:13px;font-weight:600;margin:2px 0;transition:.18s}.nav-item:hover{background:#26384e;color:#fff}.nav-item.active{background:#244646;color:#e8fffb}.nav-item.active .nav-icon{color:#5bd8c7}.nav-icon{width:18px;display:grid;place-items:center;color:#8093aa}.nav-icon svg{width:18px;height:18px;stroke:currentColor}.nav-count{margin-left:auto;color:#a5f4e6;font-size:10px;background:#305e5a;border-radius:5px;padding:3px 5px}.side-bottom{margin-top:auto;padding:20px 8px 0}.side-note{background:#1c2d43;border:1px solid #2c4059;border-radius:13px;padding:15px;line-height:1.45}.side-note .small-icon{color:#6dd8ca}.side-note strong{font-size:12px;display:block;margin-top:9px;color:#fff}.side-note span{font-size:11px;color:#9db0c5;display:block;margin-top:4px}.side-bottom .side-link{width:100%;border:0;background:none;text-align:left;color:#9eb0c5;font-size:12px;padding:18px 9px 3px}.side-link:hover{color:#fff}.main-shell{min-width:0}.topbar{height:76px;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(20px,3vw,42px);position:sticky;top:0;z-index:20;backdrop-filter:blur(16px)}.crumb{font-size:12px;color:#8a96a6;font-weight:600}.crumb strong{color:#34465b;font-weight:700}.top-actions{display:flex;align-items:center;gap:11px}.month-picker,.top-icon-btn,.profile-btn,.role-switch{height:36px;border:1px solid var(--line);background:#fff;border-radius:9px;color:#43546a}.month-picker{padding:0 13px;font-size:12px;font-weight:700;min-width:150px}.top-icon-btn{width:36px;display:grid;place-items:center}.top-icon-btn svg{width:17px;height:17px;stroke:#6b7e91}.profile-btn{display:flex;align-items:center;gap:9px;padding:3px 8px 3px 4px;font-size:12px;font-weight:700}.avatar{height:27px;width:27px;border-radius:8px;background:#e0eee9;color:#087e78;display:grid;place-items:center;font-size:10px;font-weight:800}.role-switch{padding:0 13px;font-size:12px;font-weight:700;color:var(--teal);border-color:#c9e8e3;background:#f7fefd;white-space:nowrap}.content{max-width:1530px;margin:auto;padding:31px clamp(20px,3vw,42px) 72px}.demo-banner{background:#e9f5f2;border:1px solid #d2ebe6;color:#2b716d;padding:10px 15px;border-radius:10px;font-size:11px;font-weight:650;display:flex;align-items:center;gap:8px;margin-bottom:23px}.demo-banner svg{width:15px;height:15px;flex:none}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:.15em;color:var(--teal);font-weight:800;margin:0 0 8px}.page-head h1{font-size:clamp(27px,2.55vw,35px);line-height:1.16;letter-spacing:-.045em;margin:0;font-weight:760}.page-head p{color:#7a899a;font-size:13px;margin:9px 0 0;line-height:1.5}.head-actions,.inline-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.btn{border:1px solid transparent;border-radius:9px;min-height:36px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:750;white-space:nowrap;transition:.16s}.btn:hover{transform:translateY(-1px)}.btn svg{height:14px;width:14px;stroke:currentColor}.btn-primary{background:var(--teal);color:#fff;box-shadow:0 5px 12px rgba(8,126,120,.15)}.btn-primary:hover{background:#066d69}.btn-secondary{background:#fff;color:#3c5068;border-color:#e1e7ec}.btn-secondary:hover{border-color:#bed7d3;color:var(--teal)}.btn-quiet{background:transparent;color:var(--teal);padding-left:7px;padding-right:7px}.btn-danger{background:#fff0ed;color:#b04c48}.btn-sm{min-height:29px;padding:0 10px;font-size:11px;border-radius:7px}.grid{display:grid;gap:17px}.metrics{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:18px}.card{background:#fff;border:1px solid #e9edf1;border-radius:15px;box-shadow:var(--shadow);min-width:0}.metric{padding:20px 21px;min-height:139px;position:relative;overflow:hidden}.metric:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--teal);opacity:0}.metric.highlight:before{opacity:1}.metric-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.metric-label{font-size:11px;color:#7a8a9d;font-weight:750}.metric-icon{height:30px;width:30px;border-radius:9px;background:#f0f5f5;color:#1a8c84;display:grid;place-items:center}.metric-icon svg{width:16px;height:16px;stroke:currentColor}.metric-value{font-size:clamp(20px,2.1vw,29px);font-weight:790;letter-spacing:-.045em;margin-top:20px;white-space:nowrap}.metric-bottom{font-size:10px;color:#8997a6;margin-top:7px}.metric-bottom b{color:var(--teal)}.metric.negative .metric-value{color:var(--red)}.card-pad{padding:21px 23px}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}.card-heading h2,.section-title{font-size:15px;letter-spacing:-.025em;margin:0;font-weight:780}.card-heading p{font-size:11px;color:#8d99a8;margin:4px 0 0}.text-link{border:0;background:none;color:var(--teal);font-weight:750;font-size:11px;padding:5px 0}.two-col{grid-template-columns:minmax(0,1.7fr) minmax(305px,.9fr);margin-bottom:18px}.two-equal{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:18px}.three-col{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}.chart-wrap{height:242px;width:100%;position:relative}.chart-wrap svg{width:100%;height:100%;overflow:visible}.chart-grid{stroke:#ebeff2;stroke-width:1}.chart-axis{fill:#9aa7b4;font-size:10px;font-weight:650}.chart-area{fill:url(#areaFill)}.chart-line{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-line-alt{fill:none;stroke:#d8a345;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.chart-dot{fill:#fff;stroke:var(--teal);stroke-width:3}.chart-legend{display:flex;align-items:center;gap:17px;color:#7b8999;font-size:10px;font-weight:700;margin-top:9px}.legend-dot{height:7px;width:7px;display:inline-block;border-radius:50%;margin-right:5px;background:var(--teal)}.legend-dot.gold{background:var(--gold)}.mini-total{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid #edf0f3;font-size:11px;color:#68798a}.mini-total:first-of-type{border-top:0}.mini-total strong{font-size:12px;color:var(--ink);font-variant-numeric:tabular-nums}.mini-total.total{border-top:1px solid #dae9e5;color:#234942;font-weight:750;margin-top:5px;padding-top:16px}.mini-total.total strong{color:var(--teal);font-size:17px}.mini-total .indented{padding-left:15px}.tag{font-size:10px;font-weight:750;border-radius:6px;padding:5px 7px;white-space:nowrap}.tag.teal{background:var(--teal-soft);color:#138074}.tag.gold{background:var(--gold-soft);color:#966b20}.tag.red{background:var(--red-soft);color:var(--red)}.tag.gray{background:#eef1f4;color:#728094}.sep{border:0;border-top:1px solid var(--line);margin:17px 0}.table-scroll{overflow-x:auto}.data-table{border-collapse:collapse;width:100%;font-size:11px;min-width:650px}.data-table th{text-align:left;font-size:10px;color:#8d9aab;text-transform:uppercase;letter-spacing:.055em;font-weight:800;background:#fafbfd;padding:13px 14px;border-bottom:1px solid #e9edf1;white-space:nowrap}.data-table td{padding:12px 14px;border-bottom:1px solid #eff2f4;white-space:nowrap;color:#536276;font-weight:550;font-variant-numeric:tabular-nums}.data-table tr:last-child td{border-bottom:0}.data-table td.strong{color:#20324a;font-weight:750}.data-table td.right,.data-table th.right{text-align:right}.data-table tbody tr:hover td{background:#fbfdfd}.table-top{padding:20px 21px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px}.table-top h2{font-size:15px;letter-spacing:-.02em;margin:0}.table-top p{font-size:11px;color:#8d99a8;margin:5px 0 0}.table-foot{padding:15px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;color:#8996a5}.table-foot b{color:var(--ink)}.person-cell{display:flex;align-items:center;gap:9px}.person-avatar{height:26px;width:26px;border-radius:8px;background:#e9edf5;color:#5c7297;display:grid;place-items:center;font-size:9px;font-weight:850}.person-avatar.toni{background:#e3f2ee;color:#087e78}.person-avatar.gold{background:#fbedd8;color:#9a7134}.empty{padding:28px;text-align:center;color:#8b98a7;font-size:12px}.notice{background:#f8fafb;border:1px dashed #d7e1e8;border-radius:11px;padding:14px 16px;font-size:11px;line-height:1.55;color:#738398}.notice strong{color:#3e566c}.notice.teal{background:#f3faf8;border-style:solid;border-color:#d6ebe6;color:#537a75}.notice.gold{background:#fffbf3;border-style:solid;border-color:#f1e4c7;color:#8e7041}.notice + .card,.card + .notice{margin-top:17px}.stack{display:grid;gap:17px}.section-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:29px 0 14px}.section-header h2{font-size:17px;letter-spacing:-.03em;margin:0}.section-header p{font-size:11px;color:#8d99a8;margin:4px 0 0}.group-tile{padding:20px 20px 17px;display:flex;flex-direction:column;min-height:180px}.group-tile .group-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.group-icon{height:36px;width:36px;border-radius:10px;background:#eef5f3;color:var(--teal);display:grid;place-items:center}.group-icon svg{height:18px;width:18px;stroke:currentColor}.group-tile h3{font-size:13px;margin:18px 0 3px}.group-tile p{color:#8c9aa8;font-size:10px;margin:0}.group-value{font-size:20px;font-weight:800;letter-spacing:-.035em;margin-top:auto;padding-top:13px}.group-foot{margin-top:13px;border-top:1px solid var(--line);padding-top:12px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#8b99a9}.group-foot button{border:0;background:none;color:var(--teal);font-size:10px;font-weight:800}.pill-tabs{display:inline-flex;gap:3px;border:1px solid #e6eaee;background:#fff;padding:4px;border-radius:9px}.pill-tabs button{border:0;background:none;color:#8391a0;padding:7px 12px;border-radius:7px;font-size:11px;font-weight:750}.pill-tabs button.active{background:#e8f5f2;color:var(--teal)}.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.info-box{padding:14px 15px;border-radius:10px;border:1px solid var(--line);background:#fbfcfd}.info-box .label{color:#8c9aaa;font-size:10px;font-weight:750}.info-box .number{margin-top:8px;font-size:18px;font-weight:790;letter-spacing:-.025em}.info-box .hint{margin-top:5px;font-size:10px;color:#9eabb7}.flow{display:flex;gap:0;flex-wrap:wrap;align-items:center}.flow-step{padding:11px 13px;border-radius:9px;background:#f5f8f9;font-size:10px;color:#6e8191;font-weight:700}.flow-step b{display:block;color:#263b50;font-size:11px;margin-top:3px}.flow-arrow{color:#acbbc5;margin:0 9px;font-size:15px}.activity-item{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid #edf0f2}.activity-item:last-child{border-bottom:0}.activity-icon{height:31px;width:31px;border-radius:9px;background:#eaf5f2;color:var(--teal);display:grid;place-items:center;flex:none}.activity-icon svg{width:15px;height:15px;stroke:currentColor}.activity-copy{min-width:0;flex:1}.activity-copy strong{font-size:11px;display:block;color:#34485b}.activity-copy span{font-size:10px;color:#8c9aaa;display:block;margin-top:4px}.activity-amount{font-size:11px;font-weight:800}.activity-amount.negative{color:var(--red)}.activity-amount.positive{color:var(--teal)}.accent-card{background:#143d3c;border-color:#143d3c;color:#fff;position:relative;overflow:hidden}.accent-card:before,.accent-card:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.1)}.accent-card:before{height:290px;width:290px;right:-120px;top:-80px}.accent-card:after{height:230px;width:230px;right:-16px;top:60px}.accent-card .overline{color:#9bddd2;font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.accent-card h2{color:#fff;font-size:27px;letter-spacing:-.045em;margin:12px 0 5px;position:relative}.accent-card p{color:#b5d9d2;font-size:11px;margin:0;position:relative}.accent-card .accent-row{display:flex;gap:32px;margin-top:30px;position:relative}.accent-card .accent-row div span{display:block;font-size:10px;color:#a8cec7}.accent-card .accent-row div b{display:block;margin-top:7px;font-size:16px}.accent-card .tag{position:relative;margin-top:21px;display:inline-block;background:#235e57;color:#bcf3e9}.progress-track{height:7px;background:#e8eef1;border-radius:20px;overflow:hidden}.progress-track span{display:block;background:var(--teal);height:100%;border-radius:20px}.progress-meta{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#8190a0;margin-top:8px}.form-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:7px;min-width:0}.field.full{grid-column:1/-1}.field label{font-size:11px;color:#4c5e72;font-weight:750}.field input,.field select,.field textarea{width:100%;border:1px solid #dce4e9;border-radius:8px;background:#fff;padding:10px 11px;color:#26394c;font-size:12px;min-height:39px}.field textarea{resize:vertical;min-height:72px}.field .field-help{font-size:10px;color:#91a0ad;line-height:1.45}.field input[type=file]{padding:9px;background:#f7fafb}.modal-overlay{position:fixed;inset:0;background:rgba(11,24,41,.54);z-index:80;display:grid;place-items:center;padding:15px;backdrop-filter:blur(4px)}.modal{width:min(550px,100%);max-height:min(88vh,850px);overflow:auto;background:#fff;border-radius:17px;box-shadow:0 25px 90px rgba(10,25,43,.25)}.modal.large{width:min(710px,100%)}.modal-head{padding:20px 22px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.modal-head h2{font-size:17px;letter-spacing:-.03em;margin:0}.modal-head p{font-size:11px;color:#8d99a8;margin:5px 0 0}.modal-close{height:26px;width:26px;border:0;background:#f2f5f7;color:#7e8c9c;border-radius:7px;font-size:18px;line-height:1}.modal-body{padding:21px 22px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:15px 22px;border-top:1px solid var(--line)}#toast{position:fixed;bottom:24px;right:24px;z-index:100;max-width:340px;background:#183c3b;color:#fff;font-size:12px;font-weight:700;padding:12px 16px;border-radius:10px;box-shadow:0 12px 30px rgba(15,44,43,.22);display:none}.login-page{min-height:100vh;background:#f3f6f8;display:grid;grid-template-columns:1.1fr .9fr}.login-left{background:var(--navy);color:#fff;padding:50px clamp(35px,6vw,95px);display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.login-left:before{content:"";position:absolute;border:1px solid #2f5261;width:560px;height:560px;border-radius:50%;right:-230px;top:14%}.login-left:after{content:"";position:absolute;border:1px solid #284254;width:430px;height:430px;border-radius:50%;right:-100px;top:29%}.login-left .brand{padding:0;position:relative;z-index:1}.login-copy{position:relative;z-index:1;max-width:500px}.login-copy .eyebrow{color:#8fe0d3}.login-copy h1{font-size:clamp(36px,4.2vw,58px);letter-spacing:-.06em;line-height:1.12;margin:15px 0}.login-copy p{color:#a9bfd0;font-size:14px;line-height:1.7}.login-left small{color:#7f92a8;position:relative;z-index:1}.login-right{display:grid;place-items:center;padding:35px}.login-box{width:min(370px,100%)}.login-box h2{font-size:27px;letter-spacing:-.045em;margin:0}.login-box p{font-size:12px;color:#7f8e9e;line-height:1.6;margin:9px 0 25px}.login-box .field{margin-bottom:15px}.login-box .btn{width:100%;margin-top:7px;height:43px}.login-demo{font-size:11px;color:#8d9aa7;margin-top:26px;text-align:center}.login-demo-actions{display:flex;gap:8px;justify-content:center;margin-top:11px}.login-demo-actions button{border:1px solid #dbe6e5;border-radius:8px;background:#fff;color:#41736f;font-size:10px;font-weight:800;padding:8px 11px}.mobile-nav{display:none}.inline-select{height:29px;border:1px solid #e3e9ed;border-radius:7px;color:#44596f;padding:0 8px;font-size:11px;background:#fff}.kpi-stripe{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 0}.kpi-stripe>div{padding:0 20px;border-left:1px solid var(--line)}.kpi-stripe>div:first-child{border-left:0}.kpi-stripe span{font-size:10px;color:#8593a4;display:block;font-weight:700}.kpi-stripe strong{font-size:16px;display:block;margin-top:8px}.spark{height:40px;margin-top:12px}.spark svg{width:100%;height:100%}.hint-row{font-size:10px;color:#92a0ad;display:flex;align-items:center;gap:6px}.tiny-dot{height:6px;width:6px;border-radius:50%;background:var(--teal);display:inline-block;flex:none}.tiny-dot.gold{background:var(--gold)}.status-line{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px;font-size:11px;color:#778899}.status-line b{color:#30475a}.floating-action{display:none}
@media(max-width:1180px){.app-shell{grid-template-columns:224px minmax(0,1fr)}.sidebar{padding-left:12px;padding-right:12px}.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.three-col{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar{padding:0 22px}.content{padding-left:22px;padding-right:22px}}
@media(max-width:900px){.app-shell{display:block}.sidebar{display:none}.topbar{height:64px;padding:0 18px}.content{padding:24px 18px 92px}.two-col,.two-equal{grid-template-columns:1fr}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);height:64px;justify-content:space-around;box-shadow:0 -8px 30px rgba(20,37,58,.05)}.mobile-nav button{flex:1;min-width:0;border:0;background:none;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px;color:#8795a5;font-size:9px;font-weight:800}.mobile-nav button svg{width:18px;height:18px;stroke:currentColor}.mobile-nav button.active{color:var(--teal)}.profile-btn{display:none}.login-page{grid-template-columns:1fr}.login-left{min-height:220px;padding:28px;gap:22px}.login-copy h1{font-size:33px}.login-copy p,.login-left small{display:none}.login-right{padding:35px 20px}}
@media(max-width:650px){.page-head{align-items:flex-start;flex-direction:column}.page-head h1{font-size:27px}.head-actions{width:100%}.head-actions .btn{flex:1}.metrics,.three-col,.info-grid{grid-template-columns:1fr 1fr}.metric{min-height:121px;padding:17px}.metric-value{font-size:20px}.metric-label{font-size:10px}.role-switch{font-size:0;padding:0;width:36px}.role-switch svg{height:15px;width:15px;display:block}.month-picker{min-width:122px;font-size:11px}.topbar .crumb{display:none}.top-actions{width:100%;justify-content:space-between}.card-pad{padding:19px}.kpi-stripe{grid-template-columns:1fr 1fr;row-gap:18px}.kpi-stripe>div:nth-child(3){border-left:0}.form-layout{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media(max-width:430px){.metrics,.three-col,.info-grid{grid-template-columns:1fr 1fr}.metric-value{font-size:18px}.top-icon-btn{display:none}.content{padding-left:14px;padding-right:14px}.metric{padding:15px}.group-value{font-size:18px}}
svg{width:18px;height:18px;flex:none}
