:root{--green:#087a51;--green2:#0ca66f;--mint:#eaf8f2;--ink:#12251f;--muted:#708079;--line:#e5ece8;--bg:#f4f8f6;--white:#fff;--red:#dc4c4c;--orange:#e99b28;--blue:#3169d8;--shadow:0 12px 40px rgba(16,56,43,.08)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}.splash{height:100vh;display:grid;place-content:center;gap:28px;text-align:center}.splash img{width:220px}.loader{width:38px;height:38px;border:3px solid #d9eee6;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite;margin:auto}@keyframes spin{to{transform:rotate(360deg)}}
.login{min-height:100vh;display:grid;grid-template-columns:1.08fr .92fr;background:white}.login-art{position:relative;overflow:hidden;padding:54px 62px;color:white;background:radial-gradient(circle at 15% 18%,#20bd83 0,transparent 32%),linear-gradient(145deg,#075f40,#063d2c)}.login-art:after{content:'';position:absolute;inset:auto -100px -160px auto;width:530px;height:530px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 70px rgba(255,255,255,.035),0 0 0 140px rgba(255,255,255,.025)}.brand-white{filter:brightness(0) invert(1);width:180px}.hero-copy{position:relative;z-index:2;max-width:620px;margin-top:18vh}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;opacity:.75}.hero-copy h1{font:800 clamp(38px,5vw,68px)/1.05 Manrope;margin:18px 0}.hero-copy p{font-size:18px;line-height:1.7;opacity:.8;max-width:540px}.location-pill{display:inline-flex;gap:10px;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);padding:12px 16px;border-radius:99px;margin-top:20px}.login-box{display:grid;place-content:center;padding:40px}.login-card{width:min(420px,85vw)}.mobile-logo{display:none}.login-card h2{font:800 34px Manrope;margin:0 0 10px}.login-card>p{color:var(--muted);margin:0 0 34px}.field{margin:0 0 18px}.field label{display:block;font-weight:600;font-size:13px;margin:0 0 8px}.input{width:100%;border:1px solid var(--line);border-radius:13px;padding:14px 15px;outline:none;background:#fbfdfc;transition:.2s}.input:focus{border-color:var(--green2);box-shadow:0 0 0 4px rgba(12,166,111,.09)}.btn{border:0;border-radius:12px;padding:13px 18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:linear-gradient(135deg,var(--green),var(--green2));color:white;box-shadow:0 8px 20px rgba(8,122,81,.2)}.btn-ghost{background:var(--mint);color:var(--green)}.btn-danger{background:#fff0f0;color:var(--red)}.btn-block{width:100%}.demo{margin-top:24px;padding:14px 16px;background:var(--mint);border-radius:13px;color:#346252;font-size:13px;line-height:1.6}
.shell{min-height:100vh;display:grid;grid-template-columns:260px 1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:#fff;border-right:1px solid var(--line);padding:28px 18px;display:flex;flex-direction:column;z-index:20}.side-brand{padding:0 12px 28px}.side-brand img{width:145px}.side-brand small{display:block;color:var(--muted);margin-top:8px}.nav{display:flex;flex-direction:column;gap:5px}.nav button{border:0;background:transparent;text-align:left;padding:12px 14px;border-radius:11px;color:#65736e;font-weight:600;display:flex;gap:12px;align-items:center}.nav button.active,.nav button:hover{background:var(--mint);color:var(--green)}.nav svg{width:19px}.side-user{margin-top:auto;border-top:1px solid var(--line);padding:18px 8px 0;display:flex;gap:11px;align-items:center}.avatar{width:38px;height:38px;border-radius:12px;display:grid;place-content:center;background:linear-gradient(135deg,var(--green),#18bd84);color:white;font-weight:800}.side-user b{font-size:13px;display:block}.side-user small{color:var(--muted)}.main{grid-column:2;padding:28px 34px 55px;max-width:1500px;width:100%}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.topbar h1{font:800 26px Manrope;margin:0}.topbar p{color:var(--muted);margin:5px 0 0}.top-actions{display:flex;gap:10px}.iconbtn{width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:white;display:grid;place-content:center;position:relative}.dot{position:absolute;right:8px;top:8px;width:7px;height:7px;background:var(--red);border-radius:50%;border:2px solid white}.mobile-menu{display:none}
.alert{border-radius:16px;padding:17px 20px;margin-bottom:22px;display:flex;gap:14px;align-items:center}.alert-warning{background:#fff8e8;border:1px solid #f7e3b1;color:#79581b}.alert-danger{background:#fff0f0;border:1px solid #f6d1d1;color:#8c3030}.alert .grow{flex:1}.alert b{display:block;margin-bottom:3px}.grid{display:grid;gap:18px}.stats{grid-template-columns:repeat(4,1fr);margin-bottom:22px}.stat{background:white;border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow)}.stat-top{display:flex;justify-content:space-between;align-items:flex-start}.stat-icon{width:43px;height:43px;border-radius:13px;background:var(--mint);color:var(--green);display:grid;place-content:center}.stat .value{font:800 27px Manrope;margin-top:18px}.stat .label{color:var(--muted);font-size:13px;margin-top:4px}.trend{font-size:11px;font-weight:700;color:var(--green);background:var(--mint);padding:5px 8px;border-radius:99px}.two{grid-template-columns:1.35fr .65fr}.card{background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.card-head{padding:19px 21px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.card-head h3{font:700 16px Manrope;margin:0}.card-body{padding:20px}.link{color:var(--green);font-size:13px;font-weight:700;border:0;background:none}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;white-space:nowrap}th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#87938f;padding:13px 16px;border-bottom:1px solid var(--line)}td{padding:15px 16px;border-bottom:1px solid #f0f3f2;font-size:13px}tbody tr:last-child td{border:0}.badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:99px;font-size:11px;font-weight:700}.badge:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}.paid{color:var(--green);background:var(--mint)}.unpaid{color:var(--orange);background:#fff7e8}.overdue{color:var(--red);background:#fff0f0}.pending{color:var(--blue);background:#edf3ff}.big-bill{padding:24px;border-radius:17px;background:linear-gradient(145deg,#087a51,#09a16b);color:white;position:relative;overflow:hidden}.big-bill:after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-60px;top:-80px;border:35px solid rgba(255,255,255,.07)}.big-bill small{opacity:.75}.big-bill strong{display:block;font:800 30px Manrope;margin:8px 0 18px}.bill-meta{display:flex;justify-content:space-between;position:relative;z-index:2}.bill-meta b{display:block;margin-top:4px}.quick-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quick{border:1px solid var(--line);background:white;border-radius:14px;padding:16px;text-align:left}.quick:hover{border-color:#a9dbc8;background:#fbfffd}.quick .stat-icon{margin-bottom:12px}.quick b{display:block;font-size:13px}.quick small{color:var(--muted)}.empty{padding:42px;text-align:center;color:var(--muted)}
.modal-backdrop{position:fixed;inset:0;background:rgba(7,31,23,.48);backdrop-filter:blur(4px);z-index:50;display:grid;place-content:center;padding:20px}.modal{background:white;border-radius:20px;width:min(520px,95vw);max-height:90vh;overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.2)}.modal-head{padding:21px 24px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0;font:800 19px Manrope}.modal-body{padding:24px}.close{border:0;background:#f2f5f3;width:34px;height:34px;border-radius:10px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}#toast{position:fixed;right:24px;bottom:24px;z-index:99}.toast{background:#16392d;color:white;padding:14px 17px;border-radius:12px;box-shadow:0 15px 40px rgba(0,0,0,.2);animation:up .25s ease}@keyframes up{from{transform:translateY(15px);opacity:0}}.bars{height:210px;display:flex;align-items:flex-end;gap:16px;padding:18px 10px 0}.bar{flex:1;background:linear-gradient(#18bd84,#0b7c54);border-radius:8px 8px 3px 3px;min-height:20px;position:relative}.bar span{position:absolute;bottom:-25px;width:100%;text-align:center;color:var(--muted);font-size:11px}.bar:hover:before{content:attr(data-v);position:absolute;top:-30px;left:50%;transform:translateX(-50%);font-size:10px;background:var(--ink);color:white;padding:5px;border-radius:6px}.section-title{font:800 22px Manrope;margin:0 0 20px}.muted{color:var(--muted)}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}.two{grid-template-columns:1fr}.login-art{padding:45px 35px}.shell{grid-template-columns:82px 1fr}.sidebar{width:82px;padding:25px 12px}.side-brand img{width:45px;object-fit:cover;object-position:left}.side-brand small,.nav span,.side-user>div:not(.avatar){display:none}.nav button{justify-content:center}.side-user{justify-content:center}.main{grid-column:2}}
@media(max-width:720px){.login{display:block}.login-art{display:none}.login-box{min-height:100vh;padding:25px}.mobile-logo{display:block;width:150px;margin-bottom:55px}.shell{display:block}.sidebar{display:none;width:260px}.sidebar.open{display:flex}.main{padding:22px 16px}.mobile-menu{display:grid}.topbar h1{font-size:21px}.topbar p{font-size:12px}.stats{grid-template-columns:1fr 1fr;gap:11px}.stat{padding:15px}.stat .value{font-size:21px}.quick-list{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}.alert{align-items:flex-start}.alert .btn{display:none}}
@media(max-width:430px){.stats{grid-template-columns:1fr}.top-actions .iconbtn:last-child{display:none}}
.rejected{color:var(--red);background:#fff0f0}.approved{color:var(--green);background:var(--mint)}