:root{--bg:#f7f8fb;--surface:#fff;--ink:#152438;--muted:#64748b;--line:#e4e8ef;--accent:#196dba;--accent-light:#eaf4ff;--green:#19765b;--red:#b64551;--shadow:0 10px 32px #17283e0b}*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);width:100%;max-width:100%;font-family:Arial,Helvetica Neue,sans-serif}body{width:100%;min-width:0;max-width:100%;margin:0;line-height:1.45;overflow-x:clip}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.6;cursor:wait}h1,h2,p{margin:0}h1{font-size:1.55rem}h2{font-size:1.1rem}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:2px;outline:3px solid #8ec9ff}.shell{width:100%;min-width:0;max-width:920px;padding:20px 20px calc(90px + env(safe-area-inset-bottom,0px));margin:0 auto}.topbar{justify-content:space-between;align-items:center;gap:8px;min-width:0;margin-bottom:31px;display:flex}.identity{flex:auto;align-items:center;gap:12px;min-width:0;display:flex}.identity .brand-mark{flex:none}.identity>div:last-child{min-width:0}.identity strong,.identity span{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}.identity>div:last-child{flex-direction:column;line-height:1.35;display:flex}.identity span,.muted,.fine-print,.section-heading p{color:var(--muted)}.identity span{font-size:.8rem}.brand-mark{color:#fff;background:linear-gradient(135deg,#157ac8,#20a18c);border-radius:16px;justify-content:center;align-items:center;width:60px;height:60px;font-size:1.2rem;font-weight:800;display:flex}.brand-mark.small{border-radius:13px;width:44px;height:44px;font-size:1rem}.ghost,.text-button{color:#48647c;background:0 0;border:0}.user-button{font-size:.82rem}.topbar-actions{flex:0 auto;align-items:center;gap:5px;min-width:0;display:flex}.topbar-actions .ghost{min-width:0}.notification-toggle{white-space:nowrap;border-radius:10px;align-items:center;gap:5px;padding:7px 5px;font-size:.78rem;display:inline-flex}.notification-toggle:hover{background:var(--accent-light)}.notification-text{font-size:.74rem}@media (max-width:640px){.notification-text{display:none}.notification-toggle{padding:7px 6px;font-size:1.1rem}.user-button{font-size:.72rem}}.monthbar{grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;width:100%;max-width:420px;margin:8px auto 22px;display:grid}.monthbar h1{text-align:center;overflow-wrap:anywhere;text-transform:capitalize;text-align:center;min-width:0}.arrow{border:1px solid var(--line);color:#45617c;background:#fff;border-radius:12px;width:44px;height:44px;font-size:1.8rem;line-height:0}.tabs{border:1px solid var(--line);background:#fff;border-radius:15px;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-bottom:20px;padding:5px;display:grid}.tabs button{min-width:0;min-height:44px;color:var(--muted);background:0 0;border:0;border-radius:11px;padding-inline:6px;font-weight:600}.tabs button.active{background:var(--accent-light);color:var(--accent)}.summary{border:1px solid var(--line);min-width:0;box-shadow:var(--shadow);background:#fff;border-radius:20px;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:23px;padding:22px;display:grid}.summary div{flex-direction:column;gap:4px;min-width:0;display:flex}.summary span{color:var(--muted);font-size:.8rem}.summary strong{white-space:normal;overflow-wrap:anywhere;min-width:0;font-size:1.35rem;line-height:1.25}.summary .balance{border-top:1px solid var(--line);grid-column:1/-1;padding-top:14px}.summary .balance strong{color:var(--green);font-size:1.9rem}.summary .balance strong.negative{color:var(--red)}.summary p{color:var(--muted);grid-column:1/-1;font-size:.77rem}.section-heading{justify-content:space-between;align-items:center;margin:0 0 12px;display:flex}.section-heading p{margin-top:3px;font-size:.82rem}.add-btn,.primary{color:#fff;background:var(--accent);border:0;border-radius:12px;min-height:44px;padding:10px 20px;font-weight:700}.add-btn{white-space:nowrap}.list{border:1px solid var(--line);min-width:0;box-shadow:var(--shadow);background:#fff;border-radius:18px;overflow:hidden}.payment-row{border-bottom:1px solid var(--line);align-items:flex-start;gap:14px;min-width:0;padding:17px;display:flex}.payment-row:last-child{border-bottom:0}.date-chip{background:#f2f5f9;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;min-width:51px;min-height:54px;display:flex}.date-chip strong{font-size:1.24rem}.date-chip small{text-transform:uppercase;color:var(--muted);font-size:.65rem}.payment-details{flex:1;min-width:0}.payment-title{word-break:break-word;font-weight:700}.payment-row.paid .payment-title{color:var(--muted);text-decoration:line-through}.payment-meta{color:var(--muted);margin-top:3px;font-size:.76rem;display:block}.payment-actions{flex-wrap:wrap;align-items:center;gap:12px;margin-top:11px;display:flex}.mark-button{background:var(--accent-light);color:var(--accent);border:0;border-radius:8px;min-height:34px;padding:8px 9px;font-size:.76rem;font-weight:700}.mark-button.completed{color:var(--green);background:#e5f6ed}.text-button{padding:0;font-size:.75rem;text-decoration:underline}.amount{white-space:nowrap;max-width:100%;padding-top:5px;font-size:.95rem}.amount.positive{color:var(--green)}.shared-label{color:#7651a5;vertical-align:middle;background:#f1eafa;border-radius:6px;margin-left:8px;padding:3px 6px;font-size:.6rem}.panel{border:1px solid var(--line);min-width:0;box-shadow:var(--shadow);background:#fff;border-radius:20px;margin-bottom:22px;padding:24px}.panel h2{margin-bottom:8px}.family-setup,.family-intro{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.family-setup label{width:100%}.family-setup input{margin-top:6px}.secondary{color:#215f99;background:#f2f7fe;border:1px solid #c5d5e7;border-radius:12px;min-height:44px;padding:11px 16px;font-weight:700}.invite-box{gap:8px;width:100%;max-width:630px;display:flex}.invite-box input{flex:1;min-width:0}.invite-box button{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:10px}.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;display:grid}.weekdays{text-align:center;color:var(--muted);margin:15px 0 7px;font-size:.75rem}.calendar-day{aspect-ratio:1.2;border:1px solid var(--line);width:100%;min-width:0;color:var(--ink);background:#fafcff;border-radius:10px;min-height:36px;padding:0;font-size:.87rem;position:relative}.calendar-day.is-today{border-color:var(--accent)}.calendar-day.selected{background:var(--accent-light)}.dot{background:#1977c1;border-radius:50%;width:6px;height:6px;position:absolute;bottom:4px;left:calc(50% - 3px)}.small-text{margin-top:12px;font-size:.79rem}.empty{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:225px;padding:25px;display:flex}.empty span{font-size:2rem}.empty p{color:var(--muted);max-width:350px}.login-layout{place-items:center;min-height:90vh;display:grid}.login{flex-direction:column;align-items:stretch;gap:12px;width:100%;min-width:0;max-width:440px;display:flex}.login .brand-mark{margin-bottom:10px}.login h1{font-size:2rem}.fine-print{font-size:.77rem}.form-fields{flex-direction:column;gap:17px;min-width:0;margin-top:12px;display:flex}.form-fields label,.family-setup label{flex-direction:column;gap:7px;font-size:.85rem;font-weight:650;display:flex}input,select{width:100%;min-width:0;max-width:100%;min-height:44px;color:var(--ink);background:#fff;border:1px solid #d3dce7;border-radius:10px;padding:10px 12px}.notice{overflow-wrap:anywhere;color:#77531e;background:#fff7e5;border:1px solid #f3d79a;border-radius:12px;min-width:0;margin:14px 0;padding:12px 40px 12px 14px;font-size:.85rem;position:relative}.notice.success{color:#25643e;background:#edf9f0;border-color:#c4eccc}.notice-close{background:0 0;border:0;font-size:1.7rem;position:absolute;top:5px;right:10px}.modal-backdrop{z-index:100;background:#17263b77;justify-content:center;align-items:center;min-width:0;padding:15px;display:flex;position:fixed;inset:0}.modal{width:min(100%,570px);min-width:0;max-height:calc(100dvh - 24px - env(safe-area-inset-bottom,0px));-webkit-overflow-scrolling:touch;background:#fff;border-radius:20px;padding:22px;overflow:auto;box-shadow:0 18px 70px #102a3d33}.modal-head{justify-content:space-between;align-items:center;display:flex}.icon-close{color:var(--muted);background:0 0;border:0;font-size:1.9rem}.toggle-type{background:#f1f4f8;border-radius:12px;grid-template-columns:1fr 1fr;gap:4px;padding:4px;display:grid}.toggle-type button{background:0 0;border:0;border-radius:9px;min-height:41px}.toggle-type button.selected{color:var(--accent);background:#fff;font-weight:700;box-shadow:0 2px 7px #142b4416}.two-col{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.two-col>label{min-width:0}.form-fields .checkbox-line{flex-direction:row;align-items:center;gap:10px;font-weight:500}.checkbox-line input{width:20px;min-height:20px;accent-color:var(--accent)}.danger-button{color:#a92b3c;background:0 0;border:0;padding:9px}.family-leave-button{background:#fff;border:1px solid #e5c1c6;border-radius:10px;justify-content:center;align-items:center;margin-top:14px;padding:10px 14px;font-weight:650;display:inline-flex}.family-leave-button:hover{background:#fff5f6}.family-membership-meta{color:var(--muted);justify-content:flex-end;align-items:center;gap:8px;margin-top:14px;padding:2px 2px 0;font-size:.75rem;display:flex}.family-membership-meta button{color:inherit;font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:8px 2px;text-decoration:underline}.family-membership-meta button:hover,.family-membership-meta button:focus-visible{color:#a92b3c}.family-membership-meta button:disabled{opacity:.5;cursor:default}footer{text-align:center;color:var(--muted);margin-top:36px;font-size:.75rem}@media (max-width:640px){.shell{padding:calc(12px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) calc(80px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}.topbar{gap:4px;margin-bottom:20px}.identity{gap:8px}.identity .brand-mark.small{border-radius:11px;width:38px;height:38px}.identity strong{font-size:.93rem}.identity span{font-size:.72rem}.topbar-actions{gap:1px}.user-button{text-overflow:ellipsis;white-space:nowrap;max-width:min(27vw,115px);padding:7px 1px;font-size:.72rem;overflow:hidden}.notification-text{display:none}.notification-toggle{padding:7px 6px;font-size:1.1rem}.summary{gap:10px;padding:15px}.summary strong{font-size:clamp(.95rem,4vw,1.1rem)}.summary .balance strong{font-size:clamp(1.4rem,6vw,1.65rem)}.payment-row{grid-template-columns:43px minmax(0,1fr);align-items:start;gap:9px;padding:13px 10px;display:grid}.date-chip{grid-row:1/span 2;width:43px;min-width:0;min-height:48px}.payment-details{min-width:0}.amount{white-space:normal;overflow-wrap:anywhere;grid-column:2;margin-left:0;padding-top:0;font-size:.85rem}.payment-actions{gap:8px}.mark-button{font-size:.72rem}.two-col{grid-template-columns:minmax(0,1fr)}.panel{padding:15px}.monthbar h1{font-size:clamp(1.05rem,4.6vw,1.3rem)}.calendar-grid{gap:3px}.calendar-day{aspect-ratio:1;border-radius:8px;width:100%;min-width:0;min-height:0;font-size:clamp(.7rem,3vw,.86rem)}.calendar-panel{min-width:0}.login-layout{min-height:calc(100dvh - 120px)}input,select{font-size:16px}.modal-backdrop{padding:10px}.modal{max-height:calc(100dvh - 20px - env(safe-area-inset-bottom,0px));padding:17px}.tabs button{font-size:.84rem}}@media (max-width:345px){.topbar .user-button{max-width:69px}.notification-toggle{padding-inline:4px}.summary{padding:12px}.summary .balance strong{font-size:1.35rem}.panel{padding:12px}.calendar-grid{gap:2px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.archive{flex-direction:column;gap:4px;min-width:0;display:flex}.archive-info{flex-direction:column;align-items:flex-start;gap:10px;display:flex}.archive-info h2{margin:0}.archive-info p{max-width:670px;font-size:.83rem}.archive-date{flex-direction:column;gap:6px;width:100%;max-width:230px;font-size:.8rem;font-weight:650;display:flex}.archive-date input{min-width:0;max-width:230px}.archive-import{cursor:pointer;text-align:center;justify-content:center;align-items:center;font-size:.85rem;display:inline-flex;position:relative;overflow:hidden}.archive-import input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.archive-import:focus-within{outline-offset:2px;outline:3px solid #8ec9ff}.archive-empty{color:var(--muted);font-size:.87rem}.archive-ledger h2{margin-bottom:5px}.archive-ledger>p{font-size:.8rem}.archive-totals{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0;display:grid}.archive-totals>div{background:#f5f8fc;border-radius:12px;flex-direction:column;gap:3px;min-width:0;padding:13px;display:flex}.archive-totals span{color:var(--muted);font-size:.76rem}.archive-totals strong{overflow-wrap:anywhere;font-size:1.03rem}.archive-lines{flex-direction:column;display:flex}.archive-line{border-top:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:12px;min-width:0;padding:10px 0;display:flex}.archive-line>span{overflow-wrap:anywhere;flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.archive-line>span>strong{font-size:.85rem}.archive-line small{color:var(--muted);overflow-wrap:anywhere;font-size:.71rem}.archive-line>strong{text-align:right;overflow-wrap:anywhere;max-width:45%;font-size:.82rem}.archive-line .positive{color:var(--green)}.archive-line .negative{color:var(--red)}.archive-detail{margin-top:16px}.archive-detail summary{color:var(--accent);cursor:pointer;font-size:.85rem;font-weight:650}.archive-detail[open] summary{margin-bottom:12px}.archive-card-total{flex-wrap:wrap;align-items:baseline;gap:8px;margin:14px 0;font-size:.85rem;display:flex}.archive-card-total strong{color:var(--green);font-size:1.08rem}@media (max-width:640px){.tabs{gap:2px;padding:4px}.tabs button{min-width:0;padding-inline:2px;font-size:clamp(.7rem,3.1vw,.83rem)}.archive-ledger,.archive-info{padding:15px}.archive-totals{gap:7px}.archive-totals>div{padding:10px}.archive-totals strong{font-size:.92rem}.archive-line{gap:7px}.archive-line>strong{max-width:44%;font-size:.76rem}}