:root{--navy:#082b55;--blue:#1769d2;--blue-soft:#eef5ff;--green:#72b64a;--green-soft:#eff8ea;--ink:#0b1f38;--muted:#718096;--line:#e8edf3;--surface:#fff;--bg:#f7f9fc;--shadow:0 14px 38px rgba(15,38,68,.08);--soft-shadow:0 5px 18px rgba(15,38,68,.055)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Arial,sans-serif;background:linear-gradient(180deg,#fff 0,#f8fafe 45%,#f6f9fc 100%);color:var(--ink);line-height:1.45}.wrap{width:min(100% - 32px,900px);margin:0 auto;padding:24px 0 50px}.muted{color:var(--muted)}a{color:var(--blue)}.top{display:flex;justify-content:space-between;align-items:center;gap:18px}.brand{font-size:29px;line-height:1;font-weight:800;letter-spacing:-1px;color:var(--navy)}.brand-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:5px;color:#94a2b5}.top>a,.back-link{font-weight:700;text-decoration:none;color:var(--navy)}
.nav{display:flex;gap:8px;margin:20px 0 24px}.nav a{padding:10px 15px;border-radius:12px;color:#65758a;text-decoration:none;font-weight:700}.nav a:has(b),.nav a:hover{background:var(--blue-soft);color:var(--navy)}.nav b{font-weight:800}
.card,.summary-card{background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:22px;box-shadow:var(--soft-shadow)}.card{padding:26px;margin:17px 0}.card h1,.card h2,.card h3{margin-top:0;color:var(--ink);letter-spacing:-.5px}.card h1{font-size:30px}.card h2{font-size:22px}.welcome{padding:30px;background:linear-gradient(135deg,#fff 0%,#f6faff 65%,#eff8ea 140%)}.welcome h1{margin:3px 0 7px;font-size:35px;line-height:1.08}.eyebrow{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8a9ab0}
.summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:17px 0}.summary-card{display:flex;flex-direction:column;gap:6px;padding:23px;color:inherit;text-decoration:none;min-width:0;transition:transform .15s,box-shadow .15s}.summary-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.summary-card strong{font-size:31px;line-height:1.15;letter-spacing:-.7px}.summary-card>span:last-child{margin-top:4px;color:var(--blue);font-weight:800}.summary-card.accent{background:linear-gradient(135deg,#0a315f,#0b4b85);color:#fff;border:0}.summary-card.accent .muted,.summary-card.accent>span:last-child{color:#dbeaff}.stat{font-size:36px;line-height:1.15;font-weight:800;letter-spacing:-.8px}
.field{margin:17px 0}label{display:block;font-weight:750;margin-bottom:7px}input,select,textarea{width:100%;padding:14px 15px;border:1px solid #dce4ed;border-radius:14px;font:inherit;font-size:16px;background:#fff;color:var(--ink);outline:none;transition:border .15s,box-shadow .15s}input:focus,select:focus,textarea:focus{border-color:#76a9e6;box-shadow:0 0 0 4px rgba(23,105,210,.09)}textarea{min-height:140px;resize:vertical}.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;border:0;border-radius:14px;padding:12px 18px;font:inherit;font-weight:800;text-decoration:none;cursor:pointer;min-height:46px;box-shadow:0 6px 15px rgba(8,43,85,.14)}.btn:hover{background:#0b3b72}.error,.ok{padding:13px 14px;border-radius:13px;margin:12px 0}.error{background:#fff2f2;color:#8a2222;border:1px solid #f2d5d5}.ok{background:#f0f9ec;color:#356b22;border:1px solid #d8eccf}
.units{padding:0;margin:4px 0 0;list-style:none}.units li{padding:11px 0;border-bottom:1px solid #edf1f5}.units li:last-child{border-bottom:0}.bill-list{display:flex;flex-direction:column;margin-top:8px;gap:8px}.bill-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px;border:1px solid #edf1f5;border-radius:16px;color:inherit;text-decoration:none;background:#fff}.bill-row:hover{background:#fafcff;border-color:#dce7f4}.bill-right{text-align:right;flex:0 0 auto}.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.detail-grid>div{padding:15px;background:#f8fafc;border:1px solid #edf1f5;border-radius:14px;min-width:0}.detail-grid span,.detail-grid b{display:block}.detail-grid b{margin-top:4px;overflow-wrap:anywhere}.actions{display:flex;gap:10px;flex-wrap:wrap}.update{padding:15px 0;border-bottom:1px solid #edf1f5}.update:last-child{border-bottom:0}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;background:var(--green-soft);color:#3d7927;font-size:12px;font-weight:800}.quick-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.quick{padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);text-decoration:none;font-weight:800;box-shadow:var(--soft-shadow)}.quick small{display:block;color:var(--muted);font-weight:500;margin-top:3px}.footer-note{margin:20px 0 0;padding:18px;border-radius:18px;background:linear-gradient(90deg,#f3f8ff,#f3faef);font-weight:700;color:#29435e}
.login-shell{max-width:460px;margin:6vh auto 0}.login-logo{display:flex;justify-content:center;margin-bottom:18px}.login-logo img{width:92px;height:92px;border-radius:25px;box-shadow:var(--shadow)}.login-shell .brand{text-align:center;font-size:35px}.login-shell .brand-sub{text-align:center}.login-shell .card{padding:30px;margin-top:25px}
@media(max-width:640px){body{padding-bottom:91px}.wrap{width:min(100% - 28px,900px);padding:18px 0 25px}.top .brand{font-size:26px}.top>a{font-size:14px}.nav{position:fixed;z-index:50;left:0;right:0;bottom:0;margin:0;padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));display:grid;grid-template-columns:repeat(4,1fr);gap:3px;background:rgba(255,255,255,.94);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(15,38,68,.07);backdrop-filter:blur(18px)}.nav a{padding:10px 3px;text-align:center;border-radius:12px;font-size:12px}.nav a:before{display:block;font-size:19px;line-height:1.1;margin-bottom:4px;font-weight:400}.nav a:nth-child(1):before{content:'⌂'}.nav a:nth-child(2):before{content:'▤'}.nav a:nth-child(3):before{content:'◉'}.nav a:nth-child(4):before{content:'○'}.nav a:has(b){background:transparent;color:var(--navy)}.card{padding:20px;border-radius:19px;margin:13px 0}.welcome{padding:23px}.welcome h1{font-size:28px}.summary-grid{gap:10px;margin:13px 0}.summary-card{padding:18px 16px;border-radius:18px}.summary-card strong{font-size:25px}.summary-card>span:last-child{font-size:13px}.card h1{font-size:27px}.detail-grid{grid-template-columns:1fr;gap:8px}.bill-row{align-items:flex-start;padding:15px 13px}.bill-row .muted{font-size:12px}.actions .btn{flex:1}.card>.top{align-items:center}.card>.top h1{margin-bottom:2px}.card>.top .btn{padding:10px 12px;font-size:13px}.login-shell{margin-top:4vh}.login-shell .card{padding:23px}.login-shell .brand{font-size:32px}body:has(.login-shell){padding-bottom:0}}
@media(max-width:390px){.summary-grid,.quick-grid{grid-template-columns:1fr}.welcome h1{font-size:25px}.bill-row{gap:9px}}
@media(min-width:641px){.wrap{width:min(100% - 64px,1120px);padding:32px 0 55px}.nav{margin:23px 0 27px}.welcome{padding:36px 39px}.welcome h1{font-size:39px}.summary-grid{gap:20px}.summary-card{padding:29px 30px;min-height:160px;justify-content:center}.summary-card strong{font-size:38px}.card{padding:30px 34px;margin:20px 0}}

/* Tenant-facing finishing touches */
.top>a.btn,.card .top>a.btn{color:#fff!important;text-decoration:none;white-space:nowrap;flex-shrink:0}
.top>a.btn:hover,.card .top>a.btn:hover{color:#fff!important;background:#164b82}
.back-wrap{margin:8px 0 18px}.back-button{display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border:1px solid #dce5f0;border-radius:14px;background:#fff;box-shadow:0 4px 15px rgba(8,43,85,.06);color:#14375e;text-decoration:none;font-weight:750;transition:background .15s,transform .15s}.back-button:hover{background:#f2f7ff;transform:translateX(-2px)}.back-button span{font-size:21px;line-height:1}
.footer-note{display:flex;align-items:center;gap:18px;margin:25px 0 8px;padding:25px 28px;background:linear-gradient(115deg,#f1f6ff 0%,#f8fbff 48%,#f3f9f7 100%);border:1px solid #e6eef5;border-radius:24px;color:#183756;box-shadow:0 6px 24px rgba(15,38,68,.035)}.footer-leaf{display:grid;place-items:center;width:54px;height:54px;flex-shrink:0;border-radius:17px;background:#fff;color:#527e7b;font-size:26px;box-shadow:0 4px 18px rgba(20,55,85,.07)}.footer-note>div{display:flex;flex-direction:column;gap:3px}.footer-kicker{font-size:10px;letter-spacing:.19em;color:#8293a6;font-weight:800}.footer-note strong{font-size:19px;letter-spacing:-.35px}.footer-sub{font-size:12px;color:#74869a;font-weight:500}
@media(max-width:640px){.footer-note{padding:19px 17px;gap:13px}.footer-leaf{width:45px;height:45px}.footer-note strong{font-size:16px}.card .top>a.btn{font-size:12px;padding:10px 12px}}


/* VMS visitor approvals */
.nav-badge,.quick-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#8b1e2d;color:#fff;font-size:11px;font-weight:850;vertical-align:middle}.quick{position:relative}.quick-badge{position:absolute;top:12px;right:12px}.visitor-quick.has-pending{border-color:#e5c5ca;background:#fffafb}.visitor-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start}.visitor-title h1{margin:3px 0 5px}.pending-count{white-space:nowrap;padding:7px 10px;border-radius:999px;background:#fff1f2;color:#8b1e2d;font-size:12px;font-weight:850}.visitor-empty{padding:24px 4px 5px;color:var(--muted)}.visitor-approval-card{display:grid;grid-template-columns:145px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}.visitor-approval-card:first-child{margin-top:14px}.tenant-visitor-photo{width:145px;height:145px;object-fit:cover;border-radius:18px;background:#f3f5f8;border:1px solid var(--line)}.visitor-info h2{margin:0 0 4px;font-size:24px}.visitor-meta{color:var(--muted);margin:3px 0}.visitor-destination{margin:12px 0 4px}.visitor-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:17px}.visitor-actions button{border:0;border-radius:14px;padding:13px;font:inherit;font-weight:850;cursor:pointer}.visitor-approve{background:#166534;color:#fff}.visitor-reject{background:#9f1239;color:#fff}.tenant-visitor-history{display:grid;gap:0}.tenant-visitor-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-top:1px solid var(--line)}.tenant-visitor-row small{display:block;color:var(--muted);margin-top:3px}.tenant-status{padding:6px 9px;border-radius:999px;background:#f2f4f7;color:#536174;font-size:11px;font-weight:850;text-transform:uppercase;white-space:nowrap}.tenant-status.approved{background:#ecfdf3;color:#166534}.tenant-status.rejected{background:#fff1f2;color:#9f1239}.tenant-status.waiting_approval{background:#fff7ed;color:#9a3412}.tenant-status.escalated{background:#fef3c7;color:#92400e}
@media(max-width:640px){.nav{grid-template-columns:repeat(5,1fr)}.nav a{font-size:11px}.nav a:nth-child(4):before{content:'◇'}.nav a:nth-child(5):before{content:'○'}.visitor-title{align-items:center}.visitor-approval-card{grid-template-columns:90px 1fr;gap:13px}.tenant-visitor-photo{width:90px;height:90px;border-radius:15px}.visitor-info h2{font-size:20px}.visitor-actions{grid-column:1/-1}.tenant-visitor-row{align-items:flex-start}}