@import "https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,300&display=swap";:root{--p950:#04181c;--p900:#05171e;--p850:#0a1315;--p800:#193138;--p700:#305a5f;--p600:#73a09f;--p500:#a3c3c3;--p400:#cbdada;--p300:#e8ecee;--p200:#f6f8f8;--accent:#32ddc9;--white:#fff;--ink:#0a1315;--ink-2:#4c5458;--ink-3:#677174;--err:#b3261e;--ok:#0f6b5c;--warn:#8a5a00;--r:8px;--gut:20px;--max:1120px;--font:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--ease:cubic-bezier(.22, .61, .36, 1);--nav-height:72px;--topbar-height:72px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:var(--font);color:var(--ink);background:var(--white);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;font-weight:300;line-height:1.5}@media (width>=700px){:root{--gut:32px}}@media (width>=1100px){:root{--gut:48px;--topbar-height:88px}}*,:before,:after{box-sizing:border-box}html,body,#root{min-height:100%}body{background:var(--p200);min-width:320px;margin:0;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(900px 480px at 90% -10%, #32ddc924, transparent 55%), radial-gradient(700px 420px at 0% 100%, #305a5f1f, transparent 55%), var(--p200);position:fixed;inset:0}img,svg{max-width:100%;display:block}a{color:var(--p700);text-underline-offset:3px;text-decoration-thickness:1px}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}strong,b{font-weight:600}:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}.on-light :focus-visible{outline-color:var(--p700)}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.icon{fill:none;stroke:currentColor;stroke-width:1.6px;stroke-linecap:round;stroke-linejoin:round;flex:none;width:24px;height:24px}.eyebrow{letter-spacing:.24em;text-transform:uppercase;color:var(--p700);align-items:center;gap:16px;font-size:12px;font-weight:600;display:inline-flex}.eyebrow:after{content:"";background:var(--accent);width:37px;height:1px}.dark .eyebrow{color:var(--accent)}.h2{letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(28px,4vw,40px);font-weight:200;line-height:1.12}.h2 em{color:var(--p600);font-style:normal;font-weight:300}.lead{color:var(--ink-2);margin:0;font-size:clamp(16px,1.5vw,18px);font-weight:300;line-height:1.55}.fine{color:var(--ink-3);font-size:13px;line-height:1.5}.fh{letter-spacing:.22em;text-transform:uppercase;color:var(--p700);margin-bottom:16px;font-size:11px;font-weight:600;display:block}.app-shell{flex-direction:column;min-height:100dvh;display:flex}.app-main{width:min(100%, calc(var(--max) + var(--gut) * 2));padding:28px var(--gut) calc(var(--nav-height) + 28px);flex:1;margin:0 auto}@media (width>=900px){.app-main{padding-bottom:48px}}.topbar{z-index:40;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);color:#fff;background:#05171eeb;border-bottom:1px solid #ffffff0d;position:sticky;top:0}.topbar-inner{width:min(100%, calc(var(--max) + var(--gut) * 2));padding-inline:var(--gut);min-height:var(--topbar-height);justify-content:space-between;align-items:center;gap:24px;margin:0 auto;display:flex}.brand{color:#fff;flex-direction:column;gap:4px;line-height:1;text-decoration:none;display:flex}.brand b,.brand-title{letter-spacing:.26em;text-transform:uppercase;white-space:nowrap;color:#fff;font-size:13px;font-weight:600}.brand span,.brand-sub{letter-spacing:.34em;text-transform:uppercase;color:var(--p600);font-size:9.5px;font-weight:400}.brand-row{align-items:center;gap:14px;display:flex}.brand-mark{border-radius:var(--r);background:var(--accent);width:40px;height:40px;color:var(--p900);flex-shrink:0;place-items:center;display:grid}.desktop-nav{align-items:center;gap:8px 32px;display:none}.desktop-nav a{color:#fff;border-bottom:1px solid #0000;padding:8px 0;font-size:14px;font-weight:400;text-decoration:none;transition:border-color .2s;position:relative}.desktop-nav a:hover,.desktop-nav a.active{border-color:var(--accent);color:#fff}.topbar-actions{align-items:center;gap:.5rem;display:flex}@media (width>=900px){.desktop-nav{display:flex}.bottom-nav{display:none}}.bottom-nav{z-index:50;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--p400);background:#fffffff0;position:fixed;bottom:0;left:0;right:0}.bottom-nav-inner{grid-template-columns:repeat(4,1fr);gap:.25rem;max-width:480px;margin:0 auto;display:grid}.nav-item{appearance:none;color:var(--ink-3);border-radius:var(--r);letter-spacing:.02em;background:0 0;border:0;flex-direction:column;align-items:center;gap:.2rem;padding:.45rem .3rem;font-size:.72rem;font-weight:600;text-decoration:none;transition:background .2s,color .2s;display:flex}.nav-item svg{stroke-width:1.6px;width:22px;height:22px}.nav-item:hover{color:var(--p700);background:var(--p200)}.nav-item.active{color:var(--p900);background:#32ddc92e}.btn{letter-spacing:-.02em;cursor:pointer;width:max-content;max-width:100%;transition:filter .32s, transform .32s var(--ease), background .25s, color .25s, border-color .25s;background:0 0;border:0;justify-content:center;align-items:center;gap:12px;font-size:16px;font-weight:600;line-height:1.5;display:inline-flex;position:relative}.btn--primary,.btn-primary{background:var(--accent);color:var(--p900);border-radius:var(--r);padding:14px 28px}.btn--secondary,.btn-secondary{color:var(--p700);background:0 0;justify-content:flex-start;padding:10px 0}.form-actions .btn--secondary,.form-actions .btn-secondary,.btn-secondary.btn-sm{border:1px solid var(--p500);border-radius:var(--r);background:#fff;justify-content:center;padding:10px 16px}.btn-ghost{color:inherit;border-radius:var(--r);background:0 0;padding:8px 12px}.btn-ghost:hover:not(:disabled){background:#ffffff1a}.btn-danger{color:var(--err);border-radius:var(--r);background:#fdf3f2;border:1px solid #f0c7c3;padding:12px 20px}.btn-sm{padding:10px 16px;font-size:14px}.btn-icon{border-radius:var(--r);width:44px;height:44px;padding:0}.btn--block,.btn-block{width:100%}@media (hover:hover){.btn--primary:hover:not(:disabled),.btn-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px)}.btn-secondary:hover:not(:disabled){filter:brightness(1.05)}}.btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-row{flex-wrap:wrap;align-items:center;gap:16px 28px;display:flex}.field,.fld{gap:7px;display:grid}.field label,.fld label{color:var(--p700);letter-spacing:.01em;font-size:13px;font-weight:500}.field-hint{color:var(--ink-3);font-size:12.5px}.input,.select,.textarea,.fld input,.fld select,.fld textarea{border:1px solid var(--p500);border-radius:var(--r);width:100%;height:54px;color:var(--ink);background:#fff;padding:0 16px;font-size:16px;font-weight:400;transition:border-color .25s,box-shadow .25s}.textarea,.fld textarea{resize:vertical;height:auto;min-height:96px;padding:14px 16px}.input::placeholder,.textarea::placeholder{color:#8a9598;font-weight:300}.input:hover,.select:hover,.textarea:hover{border-color:var(--p600)}.input:focus,.select:focus,.textarea:focus{border-color:var(--p700);outline:none;box-shadow:0 0 0 3px #32ddc959}.select{appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--p700) 50%), linear-gradient(135deg, var(--p700) 50%, transparent 50%);background-position:calc(100% - 18px),calc(100% - 12px);background-repeat:no-repeat;background-size:6px 6px,6px 6px;padding-right:36px}.surface,.card{border:1px solid var(--p500);border-radius:var(--r);transition:transform .5s var(--ease), border-color .3s, box-shadow .5s;background:#fff}@media (hover:hover){.card:hover{border-color:var(--p600);transform:translateY(-4px);box-shadow:0 24px 40px -28px #05171e59}}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;display:flex}.page-header h1{letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(28px,4vw,40px);font-weight:200;line-height:1.12}.page-header h1 em{color:var(--p600);font-style:normal;font-weight:300}.page-header p{color:var(--ink-2);margin-top:.35rem;font-weight:300}.month-switcher{border:1px solid var(--p500);border-radius:var(--r);background:#fff;align-items:center;gap:.25rem;padding:.2rem;display:inline-flex}.month-switcher span{text-align:center;min-width:140px;color:var(--ink);font-size:.92rem;font-weight:500}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:14px;display:grid}@media (width>=800px){.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.kpi-card{animation:rise .7s var(--ease) both;padding:22px 20px;position:relative;overflow:hidden}.kpi-card:after{content:"";background:radial-gradient(circle,#32ddc938,#0000 70%);border-radius:50%;width:80px;height:80px;position:absolute;top:-20px;right:-20px}.kpi-label{letter-spacing:.18em;text-transform:uppercase;color:var(--p700);font-size:11px;font-weight:600}.kpi-value{letter-spacing:-.02em;color:var(--ink);margin-top:.4rem;font-size:clamp(1.2rem,2.4vw,1.55rem);font-weight:500}.kpi-meta{color:var(--ink-3);margin-top:.35rem;font-size:.8rem}.kpi-card.accent-paid .kpi-value{color:var(--ok)}.kpi-card.accent-pending .kpi-value{color:var(--warn)}.kpi-card.accent-overdue .kpi-value{color:var(--err)}.chart-panel{animation:rise .8s var(--ease) both;margin-bottom:14px;padding:22px 20px 8px}.chart-panel h2{letter-spacing:-.015em;color:var(--ink);margin:0 0 .2rem;font-size:1.15rem;font-weight:400}.chart-panel .subtitle{color:var(--ink-2);margin-bottom:.85rem;font-size:.9rem}.progress-wrap{margin-top:.2rem}.progress-head{color:var(--ink-2);justify-content:space-between;margin-bottom:.45rem;font-size:.82rem;font-weight:600;display:flex}.progress-bar{background:var(--p300);border-radius:999px;height:8px;overflow:hidden}.progress-bar>span{border-radius:inherit;background:linear-gradient(90deg, var(--p700), var(--accent));height:100%;transition:width .8s var(--ease);display:block}.bill-list{flex-direction:column;gap:14px;display:flex}.bill-card{animation:rise .7s var(--ease) both;gap:16px;padding:20px;display:grid}@media (width>=720px){.bill-card{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}}.bill-title{letter-spacing:-.015em;color:var(--ink);font-size:1.15rem;font-weight:400}.bill-meta{flex-wrap:wrap;gap:.4rem;margin-top:.5rem;display:flex}.bill-amount{letter-spacing:-.02em;color:var(--ink);margin-top:.35rem;font-size:1.2rem;font-weight:500}.badge{letter-spacing:.08em;text-transform:uppercase;border:1px solid #0000;border-radius:999px;align-items:center;gap:.3rem;padding:6px 12px;font-size:11px;font-weight:600;display:inline-flex}.badge-neutral{background:var(--p200);color:var(--p700);border-color:var(--p400)}.badge-success{color:var(--ok);background:#32ddc92e;border-color:#32ddc973}.badge-warning{color:var(--warn);background:#fff6e5;border-color:#f0d9a8}.badge-danger{color:var(--err);background:#fdf3f2;border-color:#f0c7c3}.badge-info{color:var(--p700);border-color:var(--p500);background:#73a09f2e}.check{border:1px solid var(--p600);color:#0000;width:22px;height:22px;transition:all .25s var(--ease);background:#fff;border-radius:5px;place-items:center;padding:0;display:grid}.check[aria-checked=true]{background:var(--accent);border-color:var(--accent);color:var(--p900)}.payment-controls{background:var(--p200);border:1px solid var(--p400);border-radius:var(--r);gap:.75rem;padding:16px;display:grid}.payment-row{gap:.75rem;display:grid}@media (width>=520px){.payment-row{grid-template-columns:1fr 1fr}}.paid-stamp{color:var(--ok);font-size:.8rem;font-weight:600}.stack{flex-direction:column;gap:14px;display:flex}.grid-2{gap:14px;display:grid}@media (width>=640px){.grid-2{grid-template-columns:1fr 1fr}}.modal-backdrop{z-index:80;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#04181cb8;place-items:end center;padding:0;animation:.35s fade;display:grid;position:fixed;inset:0}@media (width>=700px){.modal-backdrop{place-items:center;padding:24px}}.modal{width:min(100%,640px);max-height:min(94svh,760px);animation:slide-up .55s var(--ease);overscroll-behavior:contain;background:#fff;border-radius:16px 16px 0 0;overflow:auto;box-shadow:0 30px 60px -20px #00000073}@media (width>=700px){.modal{border-radius:var(--r)}}.modal-header{background:var(--p900);color:#fff;isolation:isolate;padding:28px 24px 22px;position:relative;overflow:hidden}.modal-header:before{content:"";z-index:-1;background:radial-gradient(420px 220px at 100% 0,#32ddc938,#0000 70%);position:absolute;inset:0}.modal-header h2{letter-spacing:-.02em;color:#fff;margin:0 40px 0 0;font-size:clamp(22px,3.4vw,28px);font-weight:200;line-height:1.15}.modal-header .field-hint{color:#ffffffb3;margin-top:8px}.modal-header .btn-ghost{color:#fff;position:absolute;top:10px;right:10px}.modal-body{padding:24px}.form-actions{flex-wrap:wrap;justify-content:flex-end;gap:12px 20px;margin-top:18px;display:flex}.bill-type-grid{gap:10px;display:grid}@media (width>=560px){.bill-type-grid{grid-template-columns:1fr 1fr}}.bill-type-option{text-align:left;border:1px solid var(--p500);border-radius:var(--r);transition:border-color .25s, box-shadow .25s, transform .3s var(--ease);background:#fff;gap:6px;padding:16px;display:grid}.bill-type-option strong{color:var(--ink);font-size:15px;font-weight:600}.bill-type-option span{color:var(--ink-2);font-size:13px;font-weight:300;line-height:1.45}.bill-type-option.is-on{border-color:var(--p700);box-shadow:0 0 0 3px #32ddc947}.bill-type-option:hover{border-color:var(--p600)}.chk{color:var(--ink-2);cursor:pointer;align-items:flex-start;gap:14px;margin:0;font-size:13.5px;line-height:1.55;display:flex}.chk input{opacity:0;width:1px;height:1px;position:absolute}.chk .box{border:1px solid var(--p600);background:#fff;border-radius:5px;flex:none;place-items:center;width:22px;height:22px;margin-top:1px;transition:background .2s,border-color .2s;display:grid}.chk .box svg{width:14px;height:14px;stroke:var(--p900);stroke-width:2.4px;opacity:0;transition:.25s var(--ease);transform:scale(.6)}.chk input:checked+.box{background:var(--accent);border-color:var(--accent)}.chk input:checked+.box svg{opacity:1;transform:none}.auth-page{background:var(--p900);isolation:isolate;place-items:center;min-height:100dvh;padding:24px;display:grid;position:relative}.auth-page:before{content:"";z-index:-1;background:radial-gradient(900px 500px at 85% 0,#32ddc929,#0000 60%),radial-gradient(700px 500px at 0 100%,#305a5f59,#0000 60%);position:absolute;inset:0}.auth-card{width:min(100%,440px);animation:rise .7s var(--ease) both;border-color:var(--p800);padding:0;overflow:hidden}.auth-card-head{background:var(--p900);color:#fff;isolation:isolate;padding:28px 28px 22px;position:relative}.auth-card-head:before{content:"";z-index:-1;background:radial-gradient(420px 220px at 100% 0,#32ddc938,#0000 70%);position:absolute;inset:0}.auth-card-body{background:#fff;padding:28px}.auth-card h1{letter-spacing:-.02em;color:#fff;margin:12px 0 8px;font-size:clamp(26px,4vw,32px);font-weight:200}.auth-card .lead{color:#ffffffb3;margin-bottom:0}.auth-footer{text-align:center;color:var(--ink-3);margin-top:18px;font-size:.9rem}.setup-steps{color:var(--ink-2);gap:10px;margin:16px 0 0;padding-left:1.2rem;font-size:14px;line-height:1.5;display:grid}.setup-steps code{background:var(--p200);border:1px solid var(--p400);color:var(--p900);border-radius:4px;padding:1px 6px;font-size:12.5px}.alert{border-radius:var(--r);border:1px solid #0000;padding:14px 16px;font-size:14px;line-height:1.55}.alert-error{border-color:var(--err);color:#7a1b16;background:#fdf3f2}.alert-info{border-color:var(--p500);background:var(--p200);color:var(--p700)}.alert-warn{color:var(--warn);background:#fff6e5;border-color:#f0d9a8}.empty{text-align:center;padding:40px 24px}.empty h3{letter-spacing:-.015em;margin-top:14px;font-size:1.2rem;font-weight:300}.empty p{color:var(--ink-2);margin-top:.4rem}.user-list{flex-direction:column;gap:12px;display:flex}.user-row{align-items:center;gap:14px;padding:16px;display:flex}.avatar{border-radius:var(--r);width:44px;height:44px;color:var(--p900);background:var(--accent);flex-shrink:0;place-items:center;font-weight:600;display:grid}.user-info strong{color:var(--ink);font-weight:500;display:block}.user-info span{color:var(--ink-2);word-break:break-all;font-size:.86rem}.skeleton{background:linear-gradient(90deg, var(--p300), #fff, var(--p300));border-radius:var(--r);background-size:200% 100%;height:96px;animation:1.2s linear infinite shimmer}.fab{right:20px;bottom:calc(var(--nav-height) + 16px);z-index:45;background:var(--accent);color:var(--p900);border:0;border-radius:999px;align-items:center;gap:10px;height:58px;padding:0 20px;font-size:15px;font-weight:600;display:inline-flex;position:fixed;box-shadow:0 18px 40px -12px #05171e8c,0 0 0 6px #32ddc929}@media (width>=900px){.fab{bottom:32px;right:calc((100vw - min(100vw, calc(var(--max) + var(--gut) * 2))) / 2 + var(--gut))}}@media (hover:hover){.fab:hover{filter:brightness(1.07)}}@keyframes rise{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=520px){.hide-mobile{display:none}}