/* Shared calm light theme: all screens, sheets and account dialogs. */
:root{color-scheme:light;background:#f4f7f6;color:#263c35;font-size:14px;line-height:1.5;-webkit-text-size-adjust:100%;--surface:#fff;--border:#dce5e1;--muted:#61736c;--green:#08785b;--red:#c43246}
body{background:#f4f7f6;color:#263c35}
.app{max-width:960px;padding: max(22px,env(safe-area-inset-top)) 18px 112px}
.top{align-items:center;margin-bottom:20px;gap:10px}
.brand{font-size:22px;font-weight:750;letter-spacing:-.6px;color:#20392f}
.top .muted{font-size:12px;margin-top:3px;line-height:1.5}
.top .pill{flex-shrink:0;max-width:115px;text-align:center}
h2{font-size:16px;line-height:1.4;font-weight:700;letter-spacing:-.2px}
h3{font-size:15px;line-height:1.45;font-weight:650;margin:0 0 10px}
.sectionhead{margin:18px 0 10px;gap:10px}
.panel,.tile,.payment-card{background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 5px #20392f05;border-radius:16px}
.panel{padding:15px;margin-bottom:14px}
.panel>.sectionhead:first-child{margin-top:0}
.hero{background:#edf6f2}
.eyebrow{font-size:11px;color:var(--muted);letter-spacing:.5px}
.big{font-size:27px;font-weight:700}
.grid{gap:10px}
.tile{padding:12px;min-width:0}
.tile strong{font-size:clamp(15px,4.4vw,20px);font-weight:700;margin:6px 0 2px;line-height:1.4;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.positive{color:var(--green)}.negative{color:var(--red)}.warn{color:#91600d}
.muted,.item-sub,.subtitle,.note,.empty{color:var(--muted)}
.muted,.note{font-size:12px}.note{line-height:1.65}.subtitle,.item-sub{font-size:11px;line-height:1.5}
.item{padding:12px 0;gap:10px;border-color:#e5ece8}
.item-title{font-weight:600;font-size:14px;line-height:1.45}
.item-sub{margin-top:3px}.item-right{font-size:13px;max-width:48%;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.item-right strong{font-weight:650}
.btn{background:#08785b;color:#fff;font-size:13px;font-weight:650;border-radius:11px;padding:11px 14px;min-height:44px;line-height:1.4}
.btn.secondary{background:#eaf2ef;color:#356052}.btn.danger{background:#fbe9ed;color:#ad273c}
.btn.small{font-size:12px;padding:8px 11px;min-height:40px}
.btn:active{filter:brightness(.95)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #2e83bd;outline-offset:3px}
.feature,.voicebox{background:#eaf3f9;border:1px solid #c9ddea;border-radius:15px;padding:14px;box-shadow:none}
.feature.warning{background:#fff5e6;border-color:#ead3ae}
.feature .feature-head,.voicebox .feature-head{font-size:14px;font-weight:650;line-height:1.45;color:#315e7e}
.feature.warning .feature-head{color:#795715}
.feature p{font-size:12px;color:#4b645a;line-height:1.65;margin:6px 0}
.kpi-pill,.pill{background:#e6f2ed;color:#336454;border:1px solid #d3e6dd;font-size:10px;font-weight:550}
.kpi-pill{font-size:11px}
.bottom{background:#fffffff2;border-top:1px solid #dde7e1;box-shadow:0 -3px 14px #263c3505;padding-top:7px;padding-bottom:calc(7px + env(safe-area-inset-bottom))}
.nav{max-width:960px;gap:2px}.nav button{color:#62736d;flex:1;min-width:0;min-height:52px;gap:4px;font-size:10px;padding:7px 2px;font-weight:500}
.nav button.active{color:#08785b;background:#e8f4ee;border-radius:12px}
.nav span svg{width:22px;height:22px}.nav span{font-size:21px}
label{font-size:12px;color:#4c6257;margin:12px 0 5px}
input,select,textarea{background:#fff;color:#263c35;border:1px solid #cbd9d2;border-radius:10px;font-size:16px;min-height:44px;padding:10px 12px;accent-color:#08785b}
input::placeholder,textarea::placeholder{color:#76867e;opacity:1}
input:focus,select:focus,textarea:focus{border-color:#4b9c85}
.search{font-size:14px}.formgrid{gap:0 12px}
.modalback{background:#183d314f;backdrop-filter:blur(3px)}
.modal{background:#fbfdfc;color:#263c35;border:1px solid #dce5e1;box-shadow:0 -8px 35px #1d3e3017;padding:20px 18px calc(24px + env(safe-area-inset-bottom))}
.modalhead{gap:12px}.modalhead h2{font-size:17px}.modal p{font-size:13px;color:#536b5e;line-height:1.65}
details summary{color:#496c60;font-size:12px;font-weight:550;padding:10px 0}
.rowline{font-size:13px;margin:9px 0;gap:10px;line-height:1.5}.rowline strong{font-weight:650;font-variant-numeric:tabular-nums}
.toast{background:#e4f3eb;color:#24513d;border:1px solid #bcdcc9;font-size:13px;box-shadow:0 4px 18px #1c423b12}
.payment-card{padding:14px;margin-bottom:12px}.payment-card h3{font-size:15px;font-weight:650;margin-bottom:6px}
.payment-top{gap:10px;margin-bottom:10px}.payment-top strong{font-size:17px;font-weight:700}
.payment-status{font-size:11px;padding:4px 9px;font-weight:650}
.payment-status.pending{background:#fff0d6;color:#805300}.payment-status.paid{background:#e3f3e9;color:#1e6a47}
.payment-status.late{background:#fbe2e7;color:#b5263e}
.payment-card details{border-color:#e0e9e3}.payment-card .muted{font-size:12px}
.card-spend{background:#f0f6f3;border:1px solid #dce8e1;padding:12px;border-radius:12px}
.card-spend>div{font-size:19px;margin:8px 0;font-weight:650}
.card-account .statement-heading{font-size:14px;margin-top:18px}
.statement-box{background:#fff;border-color:#d8e4dc;padding:12px}
.statement-top>strong{font-size:18px}.statement-box.late{background:#fff1f3;border-color:#e9b6c0}
.statement-box.late .statement-top>strong,.statement-box.late .rowline strong{color:#b5263e}
.bank-brand{border:1px solid #e1e9e4;padding:8px 12px;min-height:40px}.bank-brand img{height:24px}
.category-clinic{color:#08734d!important}.category-investment{color:#1e687a!important}.category-supply{color:#445d51!important}.category-tax,.category-salary{color:#5a665f!important}.category-study{color:#99500e!important}.category-market{color:#7547a2!important}.category-personal{color:#8d467e!important}
@media(max-width:420px){.app{padding-left:14px;padding-right:14px}.brand{font-size:21px}.top .muted{font-size:11px}.panel{padding:13px}.grid{gap:8px}.tile{padding:11px}.tile strong{font-size:17px}.sectionhead h2{font-size:15px}.btn{padding:10px 12px}.payment-top strong{font-size:16px}}
@media(min-width:700px){.app{padding-top:30px}.panel{padding:18px}.modal{border-radius:20px}.tile strong{font-size:21px}.nav button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Prevent native iOS date/select controls from imposing their intrinsic width. */
.formgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.formgrid>div{min-width:0}
input,select,textarea{min-width:0;max-width:100%;box-sizing:border-box}
input[type="date"]{width:100%;min-inline-size:0;appearance:none;-webkit-appearance:none;display:block}
input[type="date"]::-webkit-date-and-time-value{text-align:left;min-width:0}
@media(max-width:480px){.formgrid>div:has(input[type="date"]){grid-column:1/-1}}