@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');:root{--bg:#f3f6f8;--surface:#fff;--ink:#172536;--muted:#7e8b99;--line:#e6ebef;--green:#176b57;--pale:#e5f3ed;--accent:#d9a85b;--shadow:0 10px 30px rgba(24,43,58,.06)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}.brand{display:flex;align-items:center;gap:10px}.logo{width:38px;height:38px;border-radius:12px;background:#172d40;color:white;display:grid;place-items:center;font:800 20px Manrope}.brand b{font:800 17px Manrope;display:block}.brand small{font-size:9px;letter-spacing:1.2px;color:var(--muted)}header{height:70px;box-shadow:0 2px 14px rgba(20,40,58,.035);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 700px)/2));position:sticky;top:0;z-index:4}header button,.calnav button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;width:38px;height:38px;font-size:19px;margin-left:5px}main{max-width:700px;margin:auto;padding:26px 20px 100px}.page{display:none}.page.active{display:block}.hero{display:flex;justify-content:space-between;align-items:end;gap:8px;margin:9px 0 25px}.hero small,.pagetitle small,.heading small,.modalhead small{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--muted)}h1{font:800 clamp(29px,7vw,39px)/1.12 Manrope;letter-spacing:-1.5px;margin:9px 0}em{font-style:normal;color:var(--green)}h2{font:800 21px Manrope;margin:5px 0}h3{font:700 15px Manrope;margin:0 0 8px}.primary,.secondary,.link,.file{border:0;border-radius:11px;padding:12px 15px;font:700 12px 'DM Sans';cursor:pointer}.primary{background:var(--green);color:white;box-shadow:0 5px 14px rgba(23,107,87,.18)}.primary:active,.small:active{transform:scale(.98)}.secondary,.file{background:var(--pale);color:var(--green)}.wide{width:100%;margin-bottom:16px}.link{background:none;color:var(--green);padding:5px}.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stats article{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:16px;min-height:112px;box-shadow:var(--shadow)}.stats article.dark{background:#172d40;color:white}.stats small{display:block;color:var(--muted);font-size:10px}.stats .dark small{color:#b7c5ce}.stats strong{display:block;font:800 23px Manrope;margin:8px 0 4px}.heading{display:flex;justify-content:space-between;align-items:end;margin:28px 0 13px}.heading h2{margin-top:4px}.cardwrap{margin-bottom:14px}.bankcard{color:white;border-radius:20px;padding:20px;min-height:168px;box-shadow:0 12px 25px rgba(20,40,58,.15);position:relative;overflow:hidden}.bankcard:after{content:"";position:absolute;width:180px;height:180px;border:1px solid #ffffff25;border-radius:50%;right:-65px;top:-90px;box-shadow:0 0 0 25px #ffffff09,0 0 0 50px #ffffff07}.navy{background:linear-gradient(130deg,#172d42,#315368)}.violet{background:linear-gradient(130deg,#4a3a75,#7863a9)}.teal{background:linear-gradient(130deg,#155b5c,#278b83)}.slate{background:linear-gradient(130deg,#3f4b5b,#718092)}.rose{background:linear-gradient(130deg,#793f52,#b36c7b)}.bankline,.cardfoot{display:flex;justify-content:space-between;position:relative;z-index:1}.bankline b{font:700 14px Manrope}.chip{width:27px;height:21px;border:1px solid #ffffff90;border-radius:5px}.nickname{font:700 19px Manrope;margin:22px 0 4px;position:relative;z-index:1}.digits{font-size:11px;letter-spacing:2px;color:#ffffffbb;position:relative;z-index:1}.cardfoot{margin-top:15px;font-size:10px;color:#ffffffcf}.billbox{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;margin-top:-2px;box-shadow:var(--shadow)}.billtop{display:flex;justify-content:space-between;align-items:center}.billtop b{font:700 12px Manrope}.badge{border-radius:20px;padding:5px 8px;background:#fff1d9;color:#98611d;font-size:10px;font-weight:700}.badge.paid{background:#e4f3eb;color:#28764f}.badge.overdue{background:#ffebe9;color:#b63d36}.amount{font:800 23px Manrope;margin:8px 0 2px}.muted{font-size:10px;color:var(--muted)}.progress{height:5px;background:#edf1f3;border-radius:9px;margin:12px 0;overflow:hidden}.progress span{height:100%;display:block;background:#4b9a7d}.actions{display:flex;gap:7px;flex-wrap:wrap}.small{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:700 10px 'DM Sans';color:var(--ink)}.small.green{background:var(--pale);color:var(--green);border:0}.empty{padding:25px;text-align:center;background:var(--surface);border:1px dashed #cbd5dd;border-radius:15px;color:var(--muted);font-size:12px}.upitem,.historyitem{display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);padding:12px;border-radius:13px;margin-bottom:8px}.datebox{width:42px;height:44px;background:var(--pale);color:var(--green);border-radius:10px;display:grid;place-content:center;text-align:center}.datebox b{font:800 16px Manrope}.datebox small{font-size:8px;text-transform:uppercase}.upinfo{flex:1}.upinfo b{display:block;font:700 11px Manrope}.upinfo small{font-size:10px;color:var(--muted)}.upamount{font:700 12px Manrope;white-space:nowrap}.pagetitle{margin:9px 0 22px}.pagetitle p,.panel p{font-size:12px;color:var(--muted);line-height:1.5}.calnav{display:flex;justify-content:space-between;align-items:center;margin:15px 0}.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--surface);padding:10px;border:1px solid var(--line);border-radius:14px}.calgrid div{text-align:center;min-height:34px;display:grid;place-items:center;font-size:11px;border-radius:8px}.calgrid .weekday{font-size:9px;color:var(--muted);font-weight:700}.calgrid .today{background:var(--green);color:white}.calgrid .marked{position:relative}.calgrid .marked:after{content:"";width:4px;height:4px;background:#e2a347;border-radius:50%;position:absolute;bottom:2px}.filter{display:flex;gap:8px;margin-bottom:14px}.filter input{flex:1;min-width:0}.panel{background:var(--surface);border:1px solid var(--line);border-radius:17px;padding:18px;margin-bottom:13px;box-shadow:var(--shadow)}.field{display:block;font-size:11px;font-weight:700;color:var(--muted);margin:13px 0}.field input,.field select,.filter input{display:block;width:100%;height:42px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 10px;margin-top:6px;font:500 13px 'DM Sans'}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.checks{display:flex;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.warning{background:#fff5e3;color:#8a631d!important;padding:10px;border-radius:9px}.danger{border-color:#efd5d2}.danger button{background:#ffedeb;color:#ad4038;border:0;border-radius:9px;padding:10px}.file{display:inline-block}.shade{display:none;position:fixed;inset:0;background:#0c1725a8;z-index:20;align-items:flex-end;justify-content:center;padding:10px}.shade.show{display:flex}.modal{background:var(--surface);color:var(--ink);width:min(500px,100%);max-height:92vh;overflow:auto;border-radius:20px;padding:20px}.modalhead{display:flex;justify-content:space-between;align-items:start;margin-bottom:12px}.modalhead h2{font-size:21px}.x{border:0;background:none;font-size:24px;color:var(--ink)}.summary{background:var(--pale);color:var(--green);padding:12px;border-radius:10px;font-size:12px;line-height:1.5}nav{position:fixed;z-index:10;bottom:0;left:50%;transform:translateX(-50%);width:min(700px,100%);height:72px;background:#ffffffed;backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;padding:7px 5px calc(7px + env(safe-area-inset-bottom));justify-content:space-around}nav button{flex:1;border:0;background:none;color:#84909d;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:3px}nav button small{font-size:9px}nav button.selected{color:var(--green)}#toast{position:fixed;bottom:85px;left:50%;transform:translate(-50%,15px);opacity:0;background:#172d40;color:white;border-radius:10px;padding:11px 15px;font-size:12px;transition:.2s;z-index:40}#toast.show{opacity:1;transform:translate(-50%,0)}body.dark{--bg:#111923;--surface:#1b2734;--ink:#eef3f6;--muted:#9aa9b7;--line:#2c3a48;--green:#77c2a4;--pale:#203d36}body.dark nav{background:#1b2734ed}body.dark .warning{background:#41351e;color:#f2d28b!important}@media(min-width:620px){main{padding:32px 30px 100px}.stats{grid-template-columns:repeat(4,1fr)}.shade{align-items:center}.modal{border-radius:20px}}
button,input,select{font-family:inherit}button{cursor:pointer;transition:transform .12s ease,opacity .12s ease}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:2px}.historyitem,.upitem{box-shadow:var(--shadow)}.page{animation:fadeIn .18s ease}@keyframes fadeIn{from{opacity:.7;transform:translateY(3px)}to{opacity:1;transform:none}}
.cardwrap{margin-bottom:18px}.bankcard{min-height:178px;padding:22px}.nickname{font-size:20px}.billbox{padding:18px}.billbox>.muted{font-size:12px;line-height:1.45;margin:10px 0 14px}.card-mark-paid,.billbox .actions [data-markpaid]{min-height:42px;padding:0 16px;border-radius:11px;font-size:12px;font-weight:800;background:var(--green);color:#fff;box-shadow:0 5px 14px rgba(23,107,87,.18)}.card-actions{padding:10px 2px 2px}.card-actions .small{min-height:36px;padding:0 12px;font-size:11px}.billbox .actions [data-pay]{min-height:38px;font-size:11px}
.field[hidden]{display:none!important}body.dark .card-mark-paid,body.dark .billbox .actions [data-markpaid]{color:#10221c}
.calgrid [data-calendar-date]{cursor:pointer}.calgrid [data-calendar-date]:hover{background:var(--pale);color:var(--green);font-weight:800}.calgrid [data-calendar-date]:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.card-corner-mark{position:relative;z-index:2;border:1px solid #ffffff75;border-radius:10px;background:#d9a85b;color:#172536;padding:8px 11px;font:800 11px 'DM Sans';box-shadow:0 4px 10px #0002}.card-corner-mark:disabled{background:#e5f3ed;color:#176b57;opacity:1;cursor:default}.card-due-line{position:relative;z-index:1;font-size:10px;font-weight:800;letter-spacing:.8px;color:#fff;opacity:.92;margin-top:10px}.cardfoot{margin-top:10px}