:root{--ink:#17261f;--muted:#66776c;--line:#dce5de;--paper:#f5f8f5;--card:#fff;--green:#276b43;--soft:#e1f1e6;--red:#a43c38}*{box-sizing:border-box}body{background:linear-gradient(180deg, #fbfdfb 0, var(--paper) 360px);color:var(--ink);margin:0;font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}.app-shell{min-height:100vh}.topbar{z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);background:#ffffffeb;align-items:center;gap:25px;min-height:64px;padding:0 clamp(18px,5vw,72px);display:flex;position:sticky;top:0}.logo{color:var(--ink);letter-spacing:-.8px;font-size:19px;font-weight:700;text-decoration:none}.logo span{color:var(--green)}nav{gap:3px;display:flex}nav button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-bottom:3px solid #0000;padding:21px 10px 18px}nav button.nav-active{border-bottom-color:var(--green);color:var(--green);font-weight:700}.month{color:var(--muted);margin-left:auto;font-size:14px}.user{background:var(--soft);width:31px;height:31px;color:var(--green);border-radius:50%;place-items:center;font-size:12px;font-weight:700;display:grid}.content{width:min(1120px,100% - 48px);margin:auto;padding:48px 0}.heading,.section-title{justify-content:space-between;align-items:end;gap:18px;margin-bottom:30px;display:flex}.eyebrow{color:var(--green);text-transform:uppercase;letter-spacing:.8px;margin:0 0 7px;font-size:12px;font-weight:700}h1{letter-spacing:-2.3px;margin:0;font-size:clamp(30px,5vw,43px);line-height:1.05}h2{margin:0;font-size:16px}.lead{color:var(--muted);margin:8px 0 0}.total{text-align:right}.total span{color:var(--muted);margin-bottom:4px;font-size:13px;display:block}.total strong{letter-spacing:-1px;font-size:25px}.tabs{border-bottom:1px solid var(--line);gap:7px;padding-bottom:13px;display:flex}.tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:8px 11px}.tabs button.selected{background:var(--soft);color:var(--green);font-weight:700}.tabs b{margin-left:4px;font-size:12px}.charge-generator{justify-content:flex-end;align-items:end;gap:10px;margin:18px 0 4px;display:flex}.charge-generator label{color:var(--muted);gap:5px;font-size:12px;display:grid}.charge-generator input{border:1px solid var(--line);min-height:38px;color:var(--ink);background:#fff;border-radius:8px;padding:7px 9px}.charge-generator .pay-button{min-height:38px}.payment-list{border-bottom:1px solid var(--line)}.payment{border-bottom:1px solid var(--line);grid-template-columns:minmax(220px,1.35fr) minmax(145px,.8fr) 115px auto;align-items:center;gap:18px;padding:19px 6px;display:grid}.payment-overdue{background:#fff9f8;border-left:4px solid #c7453b;padding-left:13px}.payment-overdue .amount{color:#ad332b}.overdue-label{font-weight:750;color:#ad332b!important}.tenant{align-items:center;gap:12px;min-width:0;display:flex}.initials{color:#3e5948;background:#e7eee9;border-radius:50%;flex:0 0 38px;place-items:center;width:38px;height:38px;font-size:12px;font-weight:700;display:grid}.tenant h2{margin:0;font-size:15px}.tenant p,.breakdown{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:4px 0 0;font-size:12px;overflow:hidden}.breakdown span+span:before{content:" \\00b7 "}.amount{text-align:right;font-size:16px}.pay-button,.undo-button{cursor:pointer;white-space:nowrap;border-radius:8px;padding:9px 12px}.pay-button{background:var(--green);color:#fff;border:1px solid #3a8055;font-weight:700}.undo-button{border:1px solid var(--line);color:var(--muted);background:#fff}.hint{color:var(--muted);text-align:center;margin:18px 0 0;font-size:12px}.empty{text-align:center;border-bottom:1px solid var(--line);padding:65px 15px}.tick{background:var(--soft);width:39px;height:39px;color:var(--green);border-radius:50%;place-items:center;margin:0 auto 12px;font-weight:700;display:grid}.empty p{color:var(--muted)}.notice{background:var(--soft);color:var(--green);border-radius:8px;justify-content:space-between;gap:14px;margin-bottom:22px;padding:11px 13px;font-size:13px;display:flex}.notice button{color:inherit;cursor:pointer;background:0 0;border:0}.two-columns{grid-template-columns:1fr 1fr;gap:20px;display:grid}.utility-layout .utility-rule{grid-column:1/-1}.expense-form input[name=concept]{grid-column:span 2}.expense-form{grid-template-columns:repeat(3,1fr)}.expense-form .pay-button{grid-column:1/-1}.expense-form .check-row{gap:7px;min-height:44px;padding:8px 10px}.expense-form .check-row small{display:none}.expense-form .check-row strong{font-size:11px;line-height:1.15}.report-summary{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.report-summary .panel{min-height:116px}.property-grid{gap:18px;display:grid}.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:23px;box-shadow:0 4px 15px #16372108}.panel h2{margin-bottom:16px}.panel-head{justify-content:space-between;align-items:start;gap:16px;margin-bottom:16px;display:flex}.panel-head p{color:var(--muted);margin:5px 0 0;font-size:13px}.form-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.form-grid input,.form-grid select,.form-grid label{border:1px solid var(--line);width:100%;min-height:44px;color:var(--ink);background:#fff;border-radius:7px;padding:10px 12px}.form-grid label{color:var(--muted);padding:7px 12px;font-size:12px}.form-grid label input{border:0;padding:3px 0 0}.form-grid .check-row{cursor:pointer;align-items:center;gap:10px;min-height:80px;padding:12px;display:flex}.form-grid .check-row input[type=checkbox]{width:18px;min-width:18px;height:18px;min-height:18px;accent-color:var(--green);margin:0;padding:0}.check-row span{gap:3px;display:grid}.check-row strong{color:var(--ink);font-size:13px}.check-row small{color:var(--muted);font-size:11px;line-height:1.25}.form-grid .pay-button{grid-column:span 2;min-height:44px}.simple-list>div{border-top:1px solid var(--line);padding:13px 0}.simple-list strong,.simple-list span{display:block}.simple-list span{color:var(--muted);margin-top:4px;font-size:13px}.rooms{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.room{border:1px solid var(--line);cursor:pointer;background:#fcfefc;border-radius:10px;padding:15px;transition:border-color .16s,transform .16s,box-shadow .16s}.room:hover{border-color:#96c9a5;transform:translateY(-2px);box-shadow:0 9px 18px #194f2b14}.room strong,.room span{display:block}.room span{color:var(--muted);margin:5px 0 10px;font-size:12px}.room-status{border-radius:20px;width:max-content;padding:4px 7px;font-weight:750;margin:9px 0 8px!important;font-size:11px!important;display:inline-block!important}.occupied-status{background:#e4f2e7;color:#23643e!important}.available-status{background:#fff2d9;color:#9a5c05!important}.room-tenant{font-weight:700;color:var(--ink)!important;margin:0 0 3px!important;font-size:14px!important}.room-rent{color:var(--muted)!important;margin:0 0 13px!important;font-size:12px!important}.room-available{background:#fffcf5;border-color:#ead8ad}.room button{color:var(--green);cursor:pointer;background:0 0;border:0;margin-right:10px;padding:0;font-size:12px}.utility-layout{align-items:start}.utility-layout .utility-rule{min-height:auto}.utility-rule .rules{max-width:690px;font-size:15px}.report-summary .panel{border-top:3px solid #bfe2c8;padding:22px;position:relative;overflow:hidden}.report-summary .panel:nth-child(2){border-top-color:#f0c88a}.report-summary .panel:nth-child(3){border-top-color:#71a985}.report-summary .panel strong{letter-spacing:-1px;margin-top:16px;font-size:25px;display:block}.report-filters{gap:10px}.report-filters button{padding:9px 13px;font-weight:650}.report-range label,.section-title>div>label{color:var(--muted);gap:5px;margin-top:8px;font-size:12px;display:inline-grid}.report-range input,.section-title input{border:1px solid var(--line);color:var(--ink);background:#fff;border-radius:8px;padding:8px 10px}.room button.danger{color:var(--red)}.rules{color:var(--muted);line-height:1.5}.rules+.simple-list{margin-top:18px}.modal-backdrop{z-index:50;background:#0f1f177a;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal-card{width:min(620px,100%);max-height:calc(100vh - 40px);position:relative;overflow:auto;box-shadow:0 20px 60px #0c231552}.tenant-modal{border:0;border-radius:18px;width:min(700px,100%);padding:0;overflow:hidden}.tenant-modal-header{border-bottom:1px solid var(--line);background:linear-gradient(135deg,#eef8ef,#f8fbf5);grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:28px 62px 24px 28px;display:grid}.tenant-modal-header h2{margin:3px 0 7px;font-size:27px}.tenant-avatar{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:46px;height:46px;font-size:20px;font-weight:700;display:grid}.status-badge{color:#276b43;background:#d8f0dd;border-radius:20px;padding:4px 8px;font-size:12px;font-weight:700;display:inline-block}.secondary-action{color:var(--ink);font:inherit;cursor:pointer;background:#fff;border:1px solid #a7b9aa;border-radius:8px;padding:9px 12px;font-weight:650}.tenant-actions{gap:8px;display:flex}.delete-action{color:#af3329;font:inherit;cursor:pointer;background:#fff7f6;border:1px solid #eab7b3;border-radius:8px;padding:9px 12px;font-weight:650}.tenant-details{background:var(--line);grid-template-columns:repeat(2,1fr);gap:1px;display:grid}.tenant-details div{background:#fff;gap:5px;padding:18px 28px;display:grid}.tenant-details span,.tenant-contract span,.documents-section p{color:var(--muted);font-size:12px}.tenant-details strong,.tenant-contract strong{font-size:15px}.tenant-contract,.documents-section{margin:0 28px;padding:22px 0}.tenant-contract{border-bottom:1px solid var(--line);gap:6px;display:grid}.documents-section{grid-template-columns:1fr auto;gap:12px;display:grid}.documents-section h3{margin:0 0 4px}.documents-section p{margin:0}.upload-button{background:var(--green);color:#fff;cursor:pointer;border-radius:8px;align-self:start;padding:9px 12px;font-size:13px;font-weight:700}.upload-button input{display:none}.document-list{color:var(--muted);grid-column:1/-1;gap:7px;padding-top:6px;font-size:13px;display:grid}.modal-close{color:var(--muted);cursor:pointer;background:0 0;border:0;font-size:24px;line-height:1;position:absolute;top:12px;right:12px}.report-filters,.report-range{flex-wrap:wrap;gap:8px;margin:14px 0;display:flex}.report-filters button{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:20px;padding:7px 10px}.report-filters button.nav-active{background:var(--green);border-color:var(--green);color:#fff}@media (max-width:720px){.topbar{flex-wrap:wrap;gap:10px;padding:12px 18px}.topbar nav{order:3;width:100%;overflow:auto}.topbar nav button{padding:6px 8px}.month{margin-left:auto}.content{padding-top:34px}.payment{grid-template-columns:1fr auto;gap:9px 12px}.breakdown{grid-area:2/1}.amount{grid-area:1/2}.pay-button,.undo-button{grid-area:2/2;justify-self:end}.two-columns,.report-summary{grid-template-columns:1fr}.rooms{grid-template-columns:repeat(2,1fr)}}@media (max-width:440px){.heading{display:block}.total{text-align:left;margin-top:20px}.form-grid{grid-template-columns:1fr}.form-grid .pay-button{grid-column:auto}.panel-head{display:block}.panel-head .pay-button{margin-top:12px}.rooms,.tenant-modal-header,.documents-section,.tenant-details{grid-template-columns:1fr}.tenant-modal-header{padding-right:56px}.tenant-actions{flex-wrap:wrap}}
