:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f4f7f5;background:#070b09;font-synthesis:none}*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 8% -10%,rgba(22,163,74,.2),transparent 36rem),radial-gradient(circle at 92% 18%,rgba(14,116,144,.1),transparent 30rem),#070b09}button,input{font:inherit}button{cursor:pointer}.login-shell,.loading{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(460px,100%);padding:40px;border-radius:24px;border:1px solid rgba(72,106,87,.45);background:linear-gradient(145deg,#0f1813fa,#080e0afa);box-shadow:0 32px 100px #00000080}h1,h2,p{margin-top:0}h1{margin:12px 0 8px;font-size:clamp(30px,6vw,44px);letter-spacing:-.045em;line-height:1.05}h2{margin:5px 0 8px;letter-spacing:-.025em}p,small{color:#91a99b}.eyebrow{color:#61e797;font-size:12px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}form{display:grid;gap:18px;margin:30px 0 22px}label{display:grid;gap:8px;color:#cfe0d6;font-size:13px;font-weight:700}input{width:100%;border:1px solid #294036;border-radius:12px;padding:13px 14px;color:#fff;background:#090e0b;outline:none}input:focus{border-color:#2fe181;box-shadow:0 0 0 3px #2fe1811f}.primary{border:0;border-radius:12px;padding:13px 18px;background:linear-gradient(135deg,#55e991,#18c86a);color:#04150c;font-weight:900;box-shadow:0 8px 28px #18c86a2e}.primary:disabled{opacity:.45;cursor:not-allowed}.alert{padding:12px 14px;border-radius:12px;margin-bottom:14px}.error{border:1px solid #6d3131;color:#ffb4b4;background:#2b1313}.success{border:1px solid #275c3c;color:#9df3ba;background:#10271a}header{position:sticky;top:0;z-index:4;display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:72px;padding:12px clamp(18px,4vw,56px);border-bottom:1px solid rgba(53,79,65,.55);background:#070b09db;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.brand,.client-chip,.user{display:flex;align-items:center;gap:12px}.brand b{font-size:18px}.brand small,.client-chip small,.user small{display:block}.client-chip button,.ghost-button{border:1px solid #2b4035;border-radius:10px;padding:9px 12px;color:#d8e5de;background:transparent}.content{width:min(1480px,100%);margin:auto;padding:clamp(20px,4vw,52px)}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.page-heading h1{font-size:clamp(28px,4vw,40px);margin:8px 0 0}.page-heading p{max-width:430px;margin:0;text-align:right}.billing-card{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:clamp(24px,4vw,42px);border:1px solid #244b34;border-radius:26px;background:linear-gradient(125deg,#122c1e,#0b1710);overflow:hidden}.status-overdue{border-color:#733939;background:linear-gradient(125deg,#321818,#160d0d)}.status-due{border-color:#755f2c;background:linear-gradient(125deg,#2a2413,#151109)}.billing-card p{margin-bottom:0;max-width:720px}.countdown{display:inline-flex;margin:2px 0 12px;padding:6px 10px;border-radius:999px;color:#9df3ba;background:#173322;font-size:12px;font-weight:800}.countdown-overdue{color:#ffb4b4;background:#421c1c}.countdown-due{color:#f8d36d;background:#382f14}.billing-action{min-width:190px;display:grid;justify-items:end;gap:5px}.billing-action strong{font-size:28px}.billing-action .primary{margin-top:12px}.mpesa-field{width:100%;margin-top:12px;text-align:left}.mpesa-field input{min-width:210px}.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0}.stats article,.panel{border:1px solid rgba(49,75,61,.65);border-radius:20px;background:linear-gradient(145deg,#0f1813f0,#0a100cf0);box-shadow:0 14px 40px #0000001f}.stats article{padding:22px}.stats span,.stats small{display:block}.stats strong{display:block;margin:8px 0 3px;font-size:34px}.simulation-note{margin:0 0 16px;color:#f8d36d;font-size:12px}.grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr);gap:18px}.panel{min-width:0;overflow:hidden}.section-heading{padding:22px 24px 8px}.section-heading h2{font-size:20px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:15px 24px;text-align:left;border-top:1px solid #1b2a22;white-space:nowrap}th{color:#81988a;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.avatar{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#193c29;color:#63ed9c;font-weight:900}.pill,.payment-status{display:inline-flex;border-radius:999px;padding:5px 9px;background:#1a3023;color:#7aefa8;font-size:11px;font-weight:800;text-transform:uppercase}.payment-list{padding:5px 22px 20px}.payment-list article{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:14px;padding:15px 2px;border-top:1px solid #1b2a22}.payment-list small{display:block;margin-top:3px}.payment-status.pending{color:#f8d36d;background:#382f14}.payment-status.failed{color:#ff9a9a;background:#3c1919}.empty{padding:28px 24px;color:#81988a}.empty b,.empty small{display:block}.empty b{margin-bottom:5px;color:#cfe0d6}.spinner{width:42px;height:42px;border:3px solid #173525;border-top-color:#35df7d;border-radius:50%;animation:spin .8s linear infinite}.loading-content{min-height:calc(100vh - 72px)}.skeleton{position:relative;overflow:hidden;background:#111d16;border:1px solid #1e3027}.skeleton:after{content:"";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.055),transparent);animation:shimmer 1.3s infinite}.skeleton-hero{height:210px;border-radius:26px}.skeleton-card{height:132px;border-radius:20px}.skeleton-panel{height:340px;border-radius:20px}.skeleton-stats>div{padding:0}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{to{transform:translate(100%)}}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:1fr}}@media(max-width:620px){.login-shell{padding:4px}.login-card{padding:18px 12px;border-radius:16px}header{align-items:center;min-height:60px;padding:4px;gap:4px}.brand,.client-chip,.user{gap:4px}.brand small,.client-chip span{display:none}.content{padding:4px}.page-heading{align-items:flex-start;flex-direction:column;gap:4px;margin-bottom:4px;padding:8px 4px}.page-heading p{text-align:left}.billing-card{align-items:flex-start;flex-direction:column;gap:4px;padding:14px 10px;border-radius:14px}.billing-action{width:100%;justify-items:start;gap:4px}.billing-action .primary{width:100%}.stats{grid-template-columns:1fr 1fr;gap:4px;margin:4px 0}.stats article{padding:12px 8px;border-radius:12px}.stats strong{font-size:26px}.grid{gap:4px}.panel{border-radius:12px}.section-heading{padding:12px 10px 4px}th,td{padding:10px 8px}.payment-list{padding:2px 8px 10px}.payment-list article{gap:4px;padding:10px 2px}.alert{margin-bottom:4px}.skeleton-hero{border-radius:14px}.skeleton-card,.skeleton-panel{border-radius:12px}}