:root{
  --ink:#14221d;--muted:#64736b;--line:#e2eae4;--green:#087a50;--green-dark:#075d3e;
  --mint:#e7f5ec;--blue:#eaf2ff;--amber:#fff4df;--cream:#f5f8f6;
  --shadow:0 14px 36px rgba(20,48,33,.08);--shadow-soft:0 6px 18px rgba(20,48,33,.055)
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;color:var(--ink);font:500 15px/1.55 Inter,"Segoe UI",Arial,sans-serif;background:radial-gradient(ellipse at 4% 0%,rgba(177,233,198,.38),transparent 34%),radial-gradient(ellipse at 96% 8%,rgba(192,216,255,.3),transparent 31%),linear-gradient(180deg,#f8fbf9 0%,#f2f6f5 100%)}
header{height:76px;border-bottom:1px solid rgba(220,231,224,.9);padding:0 max(calc((100vw - 1120px)/2),28px);display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.91);backdrop-filter:blur(16px);box-shadow:0 4px 20px rgba(24,54,36,.035)}
.brand{font:850 22px/1.1 Inter,"Segoe UI",Arial,sans-serif;color:var(--green);display:flex;align-items:center;gap:9px;text-decoration:none;letter-spacing:-.7px}.brand:first-letter{font-size:29px}
header form{margin:0}main{max-width:1120px;margin:46px auto;padding:0 26px}
h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.55px}h1{font-weight:850}h2{font-weight:800}
.intro{display:flex;justify-content:space-between;align-items:end;margin-bottom:30px}.intro h1{font-size:clamp(32px,4vw,42px);line-height:1.12;margin:7px 0 9px;color:#10231a}.intro p{color:var(--muted);margin-bottom:0;font-size:15px}
.eyebrow{font-size:11px;letter-spacing:1.8px;color:var(--green);font-weight:850;margin-bottom:8px}.month{display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}.stats>div,.panel{border:1px solid rgba(220,231,224,.9);border-radius:18px;box-shadow:var(--shadow-soft)}.stats>div{padding:21px 23px;background:linear-gradient(140deg,#fff 48%,#edf8f0)}.stats>div:nth-child(2){background:linear-gradient(140deg,#fff 48%,#edf4ff)}.stats>div:nth-child(3){background:linear-gradient(140deg,#fff 48%,#fff4e8)}.stats small{display:block;color:#68786f;font-size:11px;letter-spacing:.85px;font-weight:800}.stats strong{display:block;font-size:27px;line-height:1.2;font-weight:850;letter-spacing:-.8px;margin-top:10px;color:#13271d;font-variant-numeric:tabular-nums}
.panel{padding:25px;margin-bottom:22px;background:rgba(255,255,255,.96)}.section-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:20px}.section-title h2{font-size:21px;line-height:1.2;margin:0 0 6px;color:#17251e}.section-title p{color:var(--muted);font-size:13px;margin:0;line-height:1.5}
.tenant-form{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr .7fr auto;gap:10px}.tenant-list{margin-top:17px}.tenant{display:flex;align-items:center;gap:13px;padding:15px 3px;border-top:1px solid var(--line)}.avatar{width:42px;height:42px;border-radius:14px;background:linear-gradient(145deg,#d9f6e4,#b9e8ca);color:#086943;display:grid;place-items:center;font-weight:850;font-size:16px;box-shadow:inset 0 0 0 1px rgba(8,122,80,.08)}.grow{flex:1}.grow b,.align b{font-weight:800}.align{text-align:right}.stats strong,.align b,.bill-total b{font-variant-numeric:tabular-nums}
.bill-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.bill{border:1px solid #dfebe3;border-radius:16px;padding:19px;background:linear-gradient(160deg,#fff 0%,#fff 72%,#f5faf6 100%);box-shadow:0 5px 16px rgba(18,49,31,.045);transition:transform .18s ease,box-shadow .18s ease}.bill:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.bill-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:17px}.bill-head b{font-size:16px;font-weight:850}.bill-head small{margin-top:4px}.stats small,.align small,.tenant small,.bill-head small{display:block;color:var(--muted);font-size:12px;line-height:1.45}
.badge{font-size:12px;font-weight:800;color:#8b560b;background:#fff0cc;padding:7px 11px;border-radius:999px;white-space:nowrap}.badge.paid{color:#096c47;background:#ddf4e5}
.bill-form{display:grid;grid-template-columns:1fr 1fr;gap:11px}.bill-form label,.month label{font-size:11px;color:#53645a;font-weight:750;display:grid;gap:6px}.span{grid-column:span 2}.bill-total{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--line);margin-top:15px;padding-top:13px;font-size:11px;color:var(--muted);line-height:1.6}.bill-total b{font-size:13px;color:#17251e;white-space:nowrap;font-weight:850}.payment{display:flex;align-items:center;gap:9px;border-top:1px solid var(--line);padding-top:13px;margin-top:13px}.payment input{flex:1;min-width:100px}.payment small{white-space:nowrap;color:var(--muted);font-size:11px;font-weight:700}
input{font:inherit;font-size:14px;color:var(--ink);border:1px solid #d8e4dc;border-radius:10px;padding:11px 12px;min-width:0;background:#fff;box-shadow:0 1px 2px rgba(20,48,33,.025)}input::placeholder{color:#9aa79f}input:focus{outline:3px solid rgba(24,145,91,.16);border-color:#55a87e}
button{border:0;background:linear-gradient(135deg,#0d8859,#076442);color:#fff;padding:11px 17px;border-radius:10px;font:800 13px Inter,"Segoe UI",Arial,sans-serif;cursor:pointer;white-space:nowrap;box-shadow:0 5px 12px rgba(8,122,80,.15);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}button:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 8px 16px rgba(8,122,80,.2)}button:active{transform:translateY(0)}.quiet{background:transparent;color:#52645a;box-shadow:none}.quiet:hover{background:#edf5ef;box-shadow:none}.secondary{background:#e6f4eb;color:#0a7149;box-shadow:none}.secondary:hover{background:#d6eddf;box-shadow:none}
.empty{padding:22px;background:linear-gradient(120deg,#f1faf4,#edf5ff);border:1px dashed #ccded1;border-radius:12px;color:#5e7065;font-size:13px;font-weight:600}footer{text-align:center;color:#7f8e84;font-size:12px;padding:12px 0 35px}
.auth{max-width:440px;margin:11vh auto;background:rgba(255,255,255,.97);padding:38px;border:1px solid #deebe2;border-radius:23px;box-shadow:0 24px 70px rgba(16,58,34,.13);position:relative;overflow:hidden}.auth:before{content:"";position:absolute;right:-70px;top:-80px;width:210px;height:210px;border-radius:50%;background:linear-gradient(135deg,rgba(190,239,204,.65),rgba(222,235,255,.5));pointer-events:none}.auth .brand,.auth h1,.auth p,.auth form{position:relative}.auth h1{font-size:30px;line-height:1.2;margin:33px 0 8px;color:#10251a}.auth p{color:var(--muted);line-height:1.65}.auth form{display:grid;gap:10px;margin-top:25px}.auth label{font-size:12px;color:#44584b;font-weight:750}.auth button{margin-top:8px;padding:14px;font-size:14px}
@media(max-width:760px){main{margin:28px auto}.intro{align-items:flex-start;gap:18px;flex-direction:column}.stats{grid-template-columns:1fr}.tenant-form{grid-template-columns:1fr 1fr}.bill-grid{grid-template-columns:1fr}.stats>div{padding:15px 18px}.stats strong{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}