:root {
  --indigo: #1F2647;
  --indigo-2: #2E3866;
  --plaster: #EEF1F5;
  --wall: #E2E7EE;
  --surface: #FFFFFF;
  --line: #D6DCE5;
  --ink: #1A1F33;
  --muted: #5E6781;
  --marigold: #E9A23B;
  --marigold-soft: #FCF1DE;
  --due: #B42350;
  --due-soft: #FBE8EE;
  --paid: #2F7D55;
  --paid-soft: #E3F2EA;
  --part: #A8620C;
  --water: #2C6FA8;
  --water-soft: #E5F0F9;
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --nav-h: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--plaster); color: var(--ink);
  font: 400 16px/1.5 var(--body); font-variant-numeric: tabular-nums;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--indigo-2); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); line-height: 1.15; margin: 0; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }
h2 { font-size: 1.3rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hidden { display: none !important; }

/* ---------- top bar & nav ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--indigo); color: #fff;
  padding: calc(env(safe-area-inset-top) + 10px) 20px 10px;
  display: flex; align-items: center; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.15rem; text-decoration: none; color: #fff; }
.brand svg { width: 28px; height: 28px; }
.topnav { display: flex; gap: 4px; margin-left: 12px; }
.topnav a, .bottomnav a {
  text-decoration: none; color: rgba(255,255,255,.72); padding: 8px 12px; border-radius: var(--r-sm); font-weight: 600; font-size: .95rem;
}
.topnav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.topnav a[aria-current="page"] { color: var(--indigo); background: var(--marigold); }
.topbar .spacer { flex: 1; }
.month-pick { display: flex; align-items: center; gap: 4px; }
.month-pick button { background: transparent; border: 0; color: #fff; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; }
.month-pick button:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.month-pick button:disabled { opacity: .3; cursor: default; }
.month-pick select { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-sm); padding: 5px 8px; font-weight: 600; }
.month-pick select option { color: var(--ink); }
.who { font-size: .85rem; color: rgba(255,255,255,.7); }
.bottomnav { display: none; }

main { max-width: 1120px; margin: 0 auto; padding: 24px 20px 48px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-head p { margin: 4px 0 0; }

@media (max-width: 760px) {
  .topnav, .who, .brand span { display: none; }
  .month-pick select { font-size: .95rem; }
  .grid-form { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topbar { padding-left: 14px; padding-right: 10px; }
  main { padding: 16px 14px calc(var(--nav-h) + 28px + env(safe-area-inset-bottom)); }
  .bottomnav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
    background: var(--indigo); padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around;
  }
  .bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: .72rem; padding: 6px 8px; flex: 1; }
  .bottomnav a svg { width: 22px; height: 22px; }
  .bottomnav a[aria-current="page"] { color: var(--marigold); }
}

/* ---------- buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 9px 16px; border-radius: var(--r-sm); font-weight: 600; cursor: pointer; text-decoration: none; min-height: 40px;
}
.btn:hover { border-color: var(--indigo-2); }
.btn.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; }
.btn.primary:hover { background: var(--indigo-2); }
.btn.accent { background: var(--marigold); border-color: var(--marigold); color: var(--indigo); }
.btn.whatsapp { background: #1F8F4E; border-color: #1F8F4E; color: #fff; }
.btn.danger { color: var(--due); border-color: #EBC3CF; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 5px 10px; min-height: 32px; font-size: .875rem; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

label.field { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; font-weight: 600; color: var(--muted); }
input[type=text], input[type=number], input[type=password], input[type=date], input[type=month], input[type=tel], select, textarea {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 9px 11px; min-height: 40px; width: 100%; color: var(--ink); font-weight: 500;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--indigo-2); box-shadow: 0 0 0 3px rgba(46,56,102,.15); }
input:disabled, select:disabled { background: var(--plaster); color: var(--muted); }
.grid-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px; }
.check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink); font-size: .95rem; }
.check input { width: 18px; height: 18px; accent-color: var(--indigo); }

.panel { background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); padding: 18px; }
.panel + .panel { margin-top: 16px; }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { background: var(--indigo); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; position: relative; }
.login-art h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 10ch; }
.login-art p { color: rgba(255,255,255,.75); max-width: 36ch; }
.login-art .elev { position: absolute; right: -10px; bottom: 0; width: min(46%, 300px); opacity: .95; }
.login-form { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.login-form form { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.login-form .err { color: var(--due); font-weight: 600; min-height: 1.5em; margin: 0; }
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-art { min-height: 230px; padding: 28px 22px; }
  .login-art .elev { width: 150px; }
}

/* ---------- summary strip ---------- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 22px; }
.strip > div { padding: 14px 18px; border-left: 1px solid var(--line); }
.strip > div:first-child { border-left: 0; }
.strip .k { font-size: .82rem; color: var(--muted); font-weight: 600; }
.strip .v { font-family: var(--display); font-size: 1.45rem; font-weight: 700; }
.strip .v.due { color: var(--due); }
.strip .v.paid { color: var(--paid); }
.progress { height: 6px; background: var(--wall); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--paid); border-radius: 3px; }
@media (max-width: 760px) {
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > div:nth-child(3) { border-left: 0; }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- the building ---------- */
.building-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .building-layout { grid-template-columns: 1fr; } }
.building { position: relative; padding-top: 34px; }
.roof {
  height: 34px; position: absolute; top: 0; left: 18px; right: 18px;
  background: var(--indigo); clip-path: polygon(3% 100%, 0 0, 100% 0, 97% 100%);
  color: #fff; font-family: var(--display); font-weight: 700; font-size: .95rem; display: flex; align-items: center; justify-content: center;
}
.floors { background: var(--wall); border: 3px solid var(--indigo); border-top: 0; border-radius: 0 0 4px 4px; }
.floor { display: grid; grid-template-columns: 86px 1fr; border-top: 3px solid var(--indigo); }
.floor:first-child { border-top: 0; }
.floor-label { display: flex; flex-direction: column; justify-content: center; padding: 10px 12px; font-family: var(--display); font-weight: 700; color: var(--indigo); background: rgba(31,38,71,.06); border-right: 2px dashed rgba(31,38,71,.25); }
.floor-label small { font-family: var(--body); font-weight: 500; color: var(--muted); font-size: .75rem; }
.flats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; padding: 12px; }
.flat {
  position: relative; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px 10px 4px 4px; padding: 12px 14px 12px 18px; display: grid; gap: 2px; min-height: 108px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.flat::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 0 3px 3px 0; background: var(--due); }
.flat.paid::before { background: var(--paid); }
.flat.partial::before { background: var(--marigold); }
.flat.vacant::before { background: var(--line); }
.flat:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(31,38,71,.12); }
.flat .no { font-family: var(--display); font-weight: 800; font-size: 1.25rem; color: var(--indigo); display: flex; align-items: baseline; gap: 8px; }
.flat .no small { font-family: var(--body); font-size: .75rem; font-weight: 600; color: var(--muted); }
.flat .name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flat .amt { font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.flat .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.flat.vacant { background: transparent; border-style: dashed; color: var(--muted); }
@media (max-width: 760px) {
  .floor { grid-template-columns: 38px 1fr; }
  .floor-label { padding: 8px 0; align-items: center; font-size: 1.1rem; }
  .floor-label small { display: none; }
  .flats { grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
  .flats .flat:only-child { grid-column: span 2; }
  .flat { padding: 10px 10px 10px 14px; min-height: 96px; }
  .flat .no { font-size: 1.1rem; }
  .flat .amt { font-size: 1.02rem; }
  .roof { left: 10px; right: 10px; }
}
.ground { height: 14px; background: repeating-linear-gradient(135deg, var(--indigo) 0 6px, transparent 6px 12px); opacity: .25; margin: 0 -8px; border-radius: 2px; }

.chip { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--plaster); color: var(--muted); }
.chip.due { background: var(--due-soft); color: var(--due); }
.chip.paid { background: var(--paid-soft); color: var(--paid); }
.chip.partial { background: var(--marigold-soft); color: var(--part); }
.chip.water { background: var(--water-soft); color: var(--water); }
.chip.hike { background: var(--marigold-soft); color: var(--part); }

.side h3 { margin-bottom: 10px; }
.ledger { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ledger td { padding: 7px 0; border-bottom: 1px solid var(--plaster); }
.ledger td:last-child { text-align: right; font-weight: 600; }
.ledger tr.total td { border-top: 2px solid var(--ink); border-bottom: 0; font-weight: 800; padding-top: 10px; }
.pos { color: var(--paid); } .neg { color: var(--due); }
.notice { background: var(--marigold-soft); border: 1px solid #F1D29E; color: #6B4508; padding: 10px 14px; border-radius: var(--r-sm); margin-bottom: 16px; font-weight: 500; }
.notice.bad { background: var(--due-soft); border-color: #EBC3CF; color: var(--due); }

/* ---------- readings ---------- */
.reading-list { display: grid; gap: 10px; }
.reading {
  display: grid; grid-template-columns: 110px 1fr 1fr 110px 110px 120px; gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 16px;
}
.reading .flatno { font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--indigo); line-height: 1.1; }
.reading .flatno small { display: block; font-family: var(--body); font-weight: 600; font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reading .calc { text-align: right; }
.reading .calc .k { font-size: .75rem; color: var(--muted); font-weight: 600; }
.reading .calc .v { font-weight: 700; }
.reading .calc .v.total { font-family: var(--display); font-size: 1.15rem; }
.reading.missing { border-color: var(--marigold); box-shadow: inset 4px 0 0 var(--marigold); }
.reading .fixed { color: var(--muted); font-size: .9rem; grid-column: span 2; }
@media (max-width: 760px) {
  .reading { grid-template-columns: repeat(6, 1fr); gap: 10px; padding: 12px 14px; }
  .reading .flatno { grid-column: span 6; display: flex; align-items: baseline; gap: 10px; }
  .reading .flatno small { display: inline; }
  .reading label.field { grid-column: span 3; }
  .reading .fixed { grid-column: span 6; }
  .reading .calc { grid-column: span 2; text-align: left; }
}
.saved-flash { animation: flash 1s ease; }
@keyframes flash { 0% { background: var(--paid-soft); } 100% { background: var(--surface); } }

/* ---------- sheet ---------- */
.sheet-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
table.sheet { border-collapse: collapse; width: 100%; min-width: 860px; font-size: .9rem; }
.sheet th, .sheet td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--plaster); white-space: nowrap; }
.sheet th:first-child, .sheet td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); font-weight: 600; color: var(--muted); }
.sheet thead th { background: var(--indigo); color: #fff; font-family: var(--display); font-size: 1rem; position: sticky; top: 0; }
.sheet thead th:first-child { background: var(--indigo); color: #fff; }
.sheet tr.water td { background: var(--water-soft); }
.sheet tr.water td:first-child { background: var(--water-soft); }
.sheet tr.grand td { font-weight: 800; border-top: 2px solid var(--ink); font-size: 1rem; }
.sheet td.sum { background: var(--marigold-soft); font-weight: 700; }

/* ---------- tables / lists ---------- */
.list { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.list th, .list td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--plaster); }
.list th { font-size: .82rem; color: var(--muted); font-weight: 700; background: #F8F9FB; }
.list td.r, .list th.r { text-align: right; }
.list tr.click { cursor: pointer; }
.list tr.click:hover td { background: #F8F9FB; }
@media (max-width: 760px) { .list .hide-sm { display: none; } }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(20,24,45,.45); z-index: 40; animation: fade .2s ease; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--plaster); z-index: 41;
  display: flex; flex-direction: column; animation: slide .25s ease; box-shadow: -10px 0 30px rgba(20,24,45,.2);
}
.drawer header { background: var(--indigo); color: #fff; padding: calc(env(safe-area-inset-top) + 16px) 20px 16px; display: flex; align-items: center; gap: 12px; }
.drawer header .x { margin-left: auto; background: transparent; border: 0; color: #fff; font-size: 1.6rem; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.drawer header .x:hover { background: rgba(255,255,255,.12); }
.drawer .body { overflow-y: auto; padding: 18px 20px calc(30px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.drawer .body > * { flex-shrink: 0; }
.drawer .panel + .panel { margin-top: 0; }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (max-width: 760px) {
  .drawer { top: auto; width: 100%; max-height: 92vh; border-radius: var(--r-lg) var(--r-lg) 0 0; animation: rise .25s ease; }
  .drawer header { border-radius: var(--r-lg) var(--r-lg) 0 0; padding-top: 16px; }
  @keyframes rise { from { transform: translateY(40px); opacity: 0; } }
}

/* bill preview (mirrors the PNG card) */
.bill { background: var(--surface); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.bill .bh { padding: 14px 18px; display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line); }
.bill .bh b { font-family: var(--display); font-size: 1.1rem; }
.bill table { width: 100%; border-collapse: collapse; }
.bill td { padding: 8px 18px; border-bottom: 1px solid var(--plaster); }
.bill td:last-child { text-align: right; font-weight: 600; }
.bill tr.sub td { color: var(--muted); font-size: .85rem; padding-top: 0; text-align: left; font-weight: 500; }
.bill .bt { display: flex; justify-content: space-between; align-items: center; background: var(--indigo); color: #fff; padding: 14px 18px; }
.bill .bt b { font-family: var(--display); font-size: 1.6rem; color: var(--marigold); }

#toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 600; opacity: 0; pointer-events: none; transition: all .2s ease; z-index: 60; max-width: 90vw;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.bad { background: var(--due); }
@media (min-width: 761px) { #toast { bottom: 28px; } }

.empty { text-align: center; padding: 56px 20px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-md); }
.empty p { max-width: 44ch; margin: 8px auto 18px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================
   Swathi Residency 2.0 — premium property dashboard (2026 refresh)
   Existing data, billing, forms and actions are intentionally retained.
   ================================================================ */
:root { --indigo:#172b4d; --indigo-2:#24456d; --plaster:#f5f7fb; --wall:#edf2f8; --line:#e5eaf1; --ink:#1c2c42; --muted:#718198; --marigold:#dca45d; --r-sm:10px; --r-md:16px; --r-lg:22px; }
body { background:var(--plaster); }
.app-layout { display:flex; min-height:100vh; }
.app-sidebar { width:258px; flex:0 0 258px; position:sticky; top:0; height:100vh; background:#142743; color:#f7faff; display:flex; flex-direction:column; padding:27px 16px 22px; box-sizing:border-box; }
.sidebar-brand { display:flex; gap:12px; align-items:center; padding:4px 9px 35px; color:#fff; text-decoration:none; }
.sidebar-brand .brand-mark { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:#294463; }
.sidebar-brand svg { width:29px; height:29px; }
.sidebar-brand strong { font:800 1.12rem/1.2 var(--display); display:block; }
.sidebar-brand small { font-size:.57rem; letter-spacing:1.9px; color:#9eb0c8; font-weight:700; }
.nav-section-label { color:#7f96b4; letter-spacing:1.5px; font-size:.68rem; font-weight:700; padding:0 15px 13px; }
.side-nav { display:flex; flex-direction:column; gap:5px; }
.side-nav a { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:11px; text-decoration:none; color:#b6c4d8; font-weight:600; font-size:.91rem; }
.side-nav svg { width:20px; height:20px; flex:none; }
.side-nav a:hover { background:#233b59; color:white; }
.side-nav a[aria-current="page"] { color:white; background:#345a88; box-shadow:inset 3px 0 0 #dca45d; }
.sidebar-foot { margin-top:auto; }
.property-mini { display:flex; align-items:center; gap:10px; padding:14px 11px; background:#203a59; border-radius:12px; }
.property-mini svg { width:25px; height:25px; color:#dfb77f; }
.property-mini strong,.property-mini small { display:block; }
.property-mini strong { font-size:.81rem; }
.property-mini small { color:#a8bad0; font-size:.72rem; }
.signed-in { color:#9bafc7; font-size:.75rem; padding:19px 11px 0; }
.signed-in strong { color:#fff; }
.app-content { min-width:0; flex:1; }
.topbar { background:#fff; color:var(--ink); padding:16px 32px; min-height:74px; box-sizing:border-box; border-bottom:1px solid var(--line); box-shadow:none; }
.topbar-title { display:flex; flex-direction:column; }
.topbar-title strong { font:800 1.2rem/1.3 var(--display); }
.topbar-eyebrow { color:#8795a9; font-size:.65rem; font-weight:700; letter-spacing:1.2px; }
.month-pick { background:#f5f7fb; border:1px solid var(--line); border-radius:10px; }
.month-pick button { color:#3b526e; }
.month-pick button:hover:not(:disabled) { background:#e8edf5; }
.month-pick select { color:#263a55; border:0; background:transparent; font-size:.87rem; }
.user-avatar { width:37px; height:37px; border-radius:50%; background:#e9f0fa; color:#2c527f; display:grid; place-items:center; font-weight:800; }
main { max-width:1450px; padding:32px clamp(20px,3vw,48px) 65px; }
.dashboard-welcome { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-bottom:25px; }
.dashboard-welcome h1 { font-size:clamp(1.55rem,2.5vw,2.2rem); margin:6px 0 7px; }
.dashboard-welcome p { margin:0; color:var(--muted); }
.eyebrow { color:#5577a0; letter-spacing:1.4px; font-weight:800; font-size:.68rem; }
.building-pill { display:inline-flex; align-items:center; gap:8px; border-radius:100px; background:#e7effa; color:#345c8d; padding:9px 14px; font-size:.81rem; font-weight:700; white-space:nowrap; }
.building-pill svg { width:18px; height:18px; }
.occupancy-overview { display:flex; justify-content:space-between; align-items:center; gap:22px; background:linear-gradient(115deg,#fff 55%,#eef4fc); border:1px solid var(--line); border-radius:18px; padding:23px 26px; margin-bottom:24px; }
.occupancy-overview h2 { font-size:1.25rem; margin:7px 0; }
.occupancy-overview p { margin:0; font-size:.86rem; }
.occupancy-stats { display:flex; gap:0; }
.occupancy-stats>div { min-width:91px; padding:4px 18px; border-left:1px solid #dbe4ef; text-align:center; }
.occupancy-stats strong { display:block; font:800 1.65rem var(--display); color:#213c60; }
.occupancy-stats span { color:var(--muted); font-size:.74rem; white-space:nowrap; }
.page-head { margin-bottom:14px; }
.page-head h2,.section-heading h2 { font-size:1.16rem; }
.strip { border:0; background:transparent; gap:14px; margin-bottom:29px; }
.strip>div { background:#fff; border:1px solid var(--line)!important; border-radius:15px; padding:19px 20px; box-shadow:0 4px 18px rgba(29,50,81,.025); }
.strip .k { font-size:.79rem; }
.strip .v { font-size:clamp(1.22rem,2vw,1.7rem); margin-top:7px; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; }
.section-heading p { margin:5px 0 0; }
.building-layout { grid-template-columns:minmax(0,1fr) minmax(250px,310px); gap:18px; }
.building { background:#fff; border:1px solid var(--line); border-radius:17px; padding:60px 20px 23px; box-shadow:0 4px 18px rgba(29,50,81,.025); }
.roof { top:17px; left:20px; right:20px; height:37px; border-radius:8px 8px 0 0; clip-path:none; background:#2d4c70; }
.floors { border:1px solid #e0e8f1; border-radius:0 0 10px 10px; background:#f8fafd; overflow:hidden; }
.floor { border-top:1px solid #e1e8f1; grid-template-columns:83px 1fr; }
.floor-label { background:#eaf0f8; border-right:1px solid #dce5f0; }
.flats { gap:10px; padding:12px; }
.flat { min-height:112px; border-radius:11px; padding:13px 12px 13px 17px; box-shadow:0 2px 7px rgba(32,54,82,.025); }
.flat .no { font-size:1.12rem; }
.flat .amt { font-size:1.05rem; }
.panel { box-shadow:0 4px 18px rgba(29,50,81,.025); }
.btn.primary { background:#284e7c; border-color:#284e7c; }
.btn.primary:hover { background:#18395f; }
@media(max-width:1100px) { .occupancy-overview { flex-direction:column; align-items:stretch; } .occupancy-stats { justify-content:space-around; } .occupancy-stats>div { flex:1; } .building-layout { grid-template-columns:1fr; } }
@media(max-width:760px) { .app-sidebar { display:none; } .topbar { padding:12px 16px; min-height:65px; } .topbar-title strong { font-size:1rem; } .topbar-eyebrow { font-size:.55rem; } .user-avatar { display:none; } main { padding:19px 13px calc(var(--nav-h) + 35px); } .dashboard-welcome { align-items:flex-start; flex-direction:column; } .dashboard-welcome h1 { font-size:1.55rem; } .occupancy-overview { padding:18px 14px; } .occupancy-stats>div { min-width:0; padding:4px 7px; } .occupancy-stats strong { font-size:1.25rem; } .occupancy-stats span { font-size:.65rem; } .strip { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .strip>div { padding:13px 11px; } .strip .v { font-size:1.17rem; } .building { padding:55px 8px 14px; } .roof { left:8px; right:8px; } .floor { grid-template-columns:43px 1fr; } .floor-label { padding:7px 5px; } .flats { padding:8px; } .section-heading { align-items:flex-start; } .bottomnav { background:#142743; } }

/* Swathi Residency 3.0 — visual match to the original premium mockup */
:root{--indigo:#172b4c;--ink:#17243a;--plaster:#f7f8fc;--line:#e9edf4;--muted:#8b94a6;--display:'Figtree','Segoe UI',sans-serif}
body{background:#f8f9fd;font-size:14px}
.app-sidebar{width:242px;flex-basis:242px;background:#111e39;padding:27px 15px 19px}
.sidebar-brand{padding:6px 11px 41px;gap:10px}
.sidebar-brand .brand-mark{background:#243657;border-radius:11px}
.sidebar-brand strong{font-size:1.03rem;letter-spacing:-.4px}
.sidebar-brand small{letter-spacing:1.35px;font-size:.54rem}
.nav-section-label{color:#6f83a5;font-size:.61rem;padding:0 15px 12px}
.side-nav{gap:7px}
.side-nav a{color:#a2b1cb;border-radius:9px;font-size:.84rem;padding:12px 13px;gap:14px}
.side-nav a[aria-current=page]{background:#344c77;box-shadow:none;color:#fff}
.side-nav a[aria-current=page]:before{content:'';position:absolute;left:15px;width:3px;height:21px;background:#9fbbf7;border-radius:5px}
.sidebar-help{background:#1e3050;border:1px solid #304365;border-radius:13px;padding:17px;margin-bottom:17px;display:flex;flex-direction:column;gap:6px}
.sidebar-help-icon{font-size:25px;color:#b9d0ff}
.sidebar-help strong{font-size:.83rem;color:#f5f8ff}
.sidebar-help small{color:#a2b4d1;font-size:.73rem;line-height:1.55}
.property-mini{background:transparent;border-top:1px solid #30405b;border-radius:0;padding-top:20px}
.topbar{padding:18px 34px;background:#fff;border-bottom:1px solid #edf0f6;min-height:75px}
.topbar-title strong{font-size:1.05rem}
.topbar-eyebrow{font-size:.6rem;color:#9aa4b5}
.topbar-bell{width:34px;height:34px;display:grid;place-items:center;color:#697995;border:1px solid #e9edf4;border-radius:10px}
.topbar-bell svg{width:17px;height:17px}
.user-avatar{background:#e7d8fc;color:#7557a2}
main{max-width:1600px;padding:36px clamp(22px,3vw,48px) 80px}
.dashboard-welcome{margin-bottom:27px;align-items:center}
.dashboard-welcome h1{font-size:2.05rem;font-weight:800;letter-spacing:-.9px;margin:7px 0 8px}
.dashboard-welcome p{font-size:.91rem}
.welcome-wave{color:#d5a3ed;font-size:1.5rem}
.dashboard-actions{display:flex;gap:9px}
.dashboard-actions .btn{display:inline-flex;gap:8px;align-items:center;font-size:.82rem}
.dashboard-actions svg{width:17px;height:17px}
.btn.primary{background:#344b9b;border-color:#344b9b}
.btn.primary:hover{background:#243d83}
.hero-property{min-height:216px;border-radius:17px;background:linear-gradient(105deg,#e9e6ff 0%,#eceaff 48%,#e3e8fc 100%);position:relative;display:flex;align-items:center;padding:32px 38px;overflow:hidden;margin-bottom:34px}
.hero-copy{z-index:2;position:relative}
.hero-tag{font-size:.68rem;letter-spacing:1.4px;font-weight:800;color:#7766b2}
.hero-copy h2{font-size:2.05rem;color:#292d5c;margin:11px 0 6px;letter-spacing:-1px}
.hero-copy p{color:#777c9c;margin:0;font-size:.86rem}
.hero-metrics{display:flex;gap:23px;margin-top:22px;color:#6b7195;font-size:.75rem}
.hero-metrics span{display:flex;flex-direction:column;gap:1px}
.hero-metrics strong{color:#303665;font-size:1.18rem}
.hero-art{position:absolute;right:17%;bottom:0;width:220px;height:210px;display:flex;align-items:flex-end;justify-content:center;opacity:.9}
.art-building{height:184px;width:135px;background:#9c9ed5;border:7px solid #8c8dc7;border-bottom:0;border-radius:8px 8px 0 0;box-shadow:15px 0 0 #bab9e7;display:flex;flex-direction:column}
.art-floor{display:flex;justify-content:space-evenly;align-items:center;flex:1;border-bottom:4px solid #8183be}
.art-window{height:19px;width:17px;background:#e9e9fc;border:3px solid #8586bf;border-radius:3px}
.art-window.lit{background:#ffefc5}
.art-ground{position:absolute;bottom:0;width:200px;height:8px;background:#c3c0e9;border-radius:15px}
.art-sun{position:absolute;right:0;top:13px;width:58px;height:58px;background:#ffefce;border-radius:50%}
.hero-occupancy{position:absolute;right:32px;top:34px;width:125px;z-index:2;background:#ffffffb8;border:1px solid #ffffff9c;padding:13px;border-radius:12px;box-shadow:0 6px 18px #6563a31a}
.hero-occupancy span{display:block;color:#767b9b;font-size:.7rem}
.hero-occupancy strong{font-size:1.45rem;color:#343f78}
.hero-progress{height:5px;background:#d6d7ec;border-radius:8px;margin-top:8px;overflow:hidden}
.hero-progress i{display:block;height:100%;background:#7875d5;border-radius:8px}
.overview-heading{margin-bottom:17px}
.section-heading h2{font-size:1.2rem;font-weight:800}
.period-label{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 13px;color:#77839b;font-size:.78rem}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px;margin-bottom:31px}
.metric-card{position:relative;border-radius:15px;min-height:157px;padding:19px 20px;overflow:hidden}
.metric-purple{background:#f0ebff}.metric-green{background:#e7f8ee}.metric-peach{background:#fff0e8}.metric-blue{background:#e9f2ff}
.metric-top{display:flex;justify-content:space-between;align-items:center;color:#58617c;font-size:.82rem;font-weight:700}
.metric-icon{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#ffffffa6;color:#586b9d}
.metric-icon svg{width:17px;height:17px}
.metric-card>strong{display:block;font-size:1.68rem;letter-spacing:-.8px;color:#202b45;margin:16px 0 7px;line-height:1.1}
.metric-card>small{display:block;font-size:.73rem;color:#808ba1;position:relative;z-index:2}
.metric-decor{position:absolute;right:13px;bottom:-35px;font-size:110px;line-height:1;color:#fff;opacity:.38;font-weight:800}
.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr);gap:20px;align-items:start}
.dashboard-units-card,.insight-card{background:#fff;border:1px solid #edf0f5;border-radius:16px;box-shadow:0 6px 24px #1b315009}
.dashboard-units-card{padding:23px 24px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:23px}
.card-head h2{font-size:1.08rem;font-weight:800}
.card-head p{color:#9ba4b2;margin:6px 0 0;font-size:.76rem}
.text-link{color:#5363b7;text-decoration:none;font-weight:700;font-size:.8rem}
.unit-floor-list{display:flex;flex-direction:column;gap:16px}
.unit-floor{border:1px solid #e9edf4;border-radius:12px;overflow:hidden}
.unit-floor-heading{display:flex;align-items:center;gap:12px;background:#f8faff;padding:11px 14px}
.floor-index{width:36px;height:36px;background:#e7eafb;border-radius:9px;display:grid;place-items:center;color:#5d6ba8;font-weight:800}
.unit-floor-heading strong{display:block;color:#26344e;font-size:.83rem}
.unit-floor-heading span{display:block;color:#9ba4b4;font-size:.7rem;margin-top:2px}
.unit-floor-heading .floor-count{margin-left:auto;color:#6680a3;background:#fff;border:1px solid #e9edf4;border-radius:100px;padding:5px 9px;font-size:.7rem}
.unit-tile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:11px;padding:13px}
.unit-tile-grid .flat{min-height:111px;border-radius:10px;background:#f9fbff;border:1px solid #edf0f5;padding:12px 12px 12px 16px;box-shadow:none}
.unit-tile-grid .flat::before{width:4px;top:13px;bottom:13px}
.unit-tile-grid .flat.paid{background:#f3fbf6}
.unit-tile-grid .flat.partial{background:#fffbf0}
.unit-tile-grid .flat.vacant{background:#f8f9fc}
.unit-tile-grid .flat .no{font-size:1.02rem;color:#28344b}
.unit-tile-grid .flat .no small{font-size:.67rem}
.unit-tile-grid .flat .name{font-size:.78rem;color:#7c899c}
.unit-tile-grid .flat .amt{font-size:.93rem;color:#26344e}
.unit-tile-grid .chip{font-size:.65rem}
.unit-legend{display:flex;gap:19px;flex-wrap:wrap;margin-top:20px;color:#8792a3;font-size:.73rem}
.unit-legend span{display:flex;align-items:center;gap:7px}
.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.legend-dot.green{background:#4ab986}.legend-dot.orange{background:#edb15e}.legend-dot.gray{background:#bbc4d2}
.dashboard-right{display:flex;flex-direction:column;gap:18px}
.insight-card{padding:22px}
.donut-wrap{display:flex;justify-content:center;margin:11px 0 22px}
.donut{width:155px;height:155px;border-radius:50%;background:conic-gradient(#7465cb calc(var(--value)*1%),#eeeafa 0);display:grid;place-items:center}
.donut>div{width:122px;height:122px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;flex-direction:column}
.donut strong{font-size:1.7rem;color:#26314e}
.donut span{font-size:.75rem;color:#929bad}
.insight-split{display:flex;justify-content:space-between;gap:8px;border-top:1px solid #f0f2f6;padding-top:15px}
.insight-split span{font-size:.72rem;color:#8a95a8;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.insight-split strong{display:block;width:100%;font-size:.85rem;color:#27344e;padding-left:15px}
.insight-action{display:block;text-align:center;margin-top:20px;border:1px solid #e8eaf7;background:#f8f8ff;border-radius:9px;color:#565fb2;padding:10px;text-decoration:none;font-weight:700;font-size:.8rem}
.quick-actions{display:flex;flex-direction:column}
.quick-actions a{display:flex;align-items:center;gap:12px;text-decoration:none;color:#26344e;padding:11px 0;border-top:1px solid #f1f2f6}
.quick-actions a:first-child{border-top:0}
.quick-icon{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;flex:none}
.quick-icon svg{width:19px;height:19px}
.quick-icon.purple{background:#f0ebff;color:#7164c7}.quick-icon.green{background:#e7f8ee;color:#41a476}.quick-icon.peach{background:#fff0e8;color:#d9956b}
.quick-actions a span:nth-child(2){flex:1}
.quick-actions strong{display:block;font-size:.8rem}
.quick-actions small{display:block;color:#9aa3b1;font-size:.7rem;margin-top:2px}
.quick-actions b{color:#a6b0c1;font-weight:500}
.expense-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #f0f2f6;font-size:.8rem;color:#7e899a}
.expense-row strong{color:#26344e}
.expense-total{border:0;font-weight:800;color:#26344e}
.next-month-action{display:flex;justify-content:space-between;align-items:center;margin-top:23px;background:#fff;border:1px solid var(--line);padding:14px 20px;border-radius:13px;color:#65748b}
@media(max-width:1200px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-main-grid{grid-template-columns:1fr}.dashboard-right{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{right:13%}}
@media(max-width:760px){.dashboard-welcome h1{font-size:1.7rem}.dashboard-actions{width:100%}.dashboard-actions .btn{flex:1;font-size:.75rem}.hero-property{min-height:210px;padding:22px}.hero-copy h2{font-size:1.45rem}.hero-metrics{gap:13px}.hero-art{right:-42px;opacity:.35}.hero-occupancy{right:14px;top:13px;transform:scale(.8);transform-origin:top right}.metric-grid{gap:10px}.metric-card{min-height:142px;padding:14px}.metric-card>strong{font-size:1.25rem}.metric-top{font-size:.71rem}.dashboard-right{grid-template-columns:1fr}.dashboard-units-card{padding:17px 13px}.unit-tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:9px}.unit-floor-heading{padding:10px}.topbar-bell{display:none}.next-month-action{flex-direction:column;gap:12px;align-items:stretch}.next-month-action .btn{width:100%}}

/* Unit details, documents, and historical timeline */
.unit-floor-heading[data-floor]{cursor:pointer;transition:background .15s;border-radius:12px;padding:8px}.unit-floor-heading[data-floor]:hover{background:#e9f4f0}.doc-item,.change-item{padding:12px 0;border-bottom:1px solid #e7edf0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}.doc-item a{color:#087f65;font-weight:650;flex:1;overflow-wrap:anywhere}.doc-item small{color:#72808c}.change-item{display:block}.change-item p{margin:6px 0;color:#64748b;line-height:1.6}#doc-upload{display:flex;flex-wrap:wrap;gap:10px;align-items:center}#doc-upload input{max-width:100%}

/* V5: reference-inspired interactive floor matrix */
.residency-floor-dashboard{margin:24px 0;background:#f0f3ff;border:1px solid #e3e9f8;border-radius:26px;padding:26px;color:#25314b}.residency-floor-header{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:20px}.residency-floor-header h2{margin:5px 0 7px;font-size:24px}.residency-floor-header p{margin:0;color:#778198;font-size:13px}.residency-building-label{background:white;border-radius:30px;padding:10px 15px;font-weight:700;font-size:11px;letter-spacing:.08em;color:#7a82a5}.residency-summary-strip{background:white;border-radius:19px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:24px;margin-bottom:24px;box-shadow:0 8px 22px #1c2b5b0b}.residency-summary-strip>div{display:flex;align-items:center;gap:16px;padding:0 20px;border-right:1px solid #edf0f6}.residency-summary-strip>div:last-child{border:0}.residency-summary-strip small{display:block;color:#69748b;font-size:13px}.residency-summary-strip strong{display:block;font-size:30px;margin-top:3px}.residency-summary-icon{display:grid;place-items:center;width:53px;height:53px;border-radius:13px;font-size:27px;font-weight:700}.residency-summary-icon.lilac{background:#eae7ff;color:#7668d9}.residency-summary-icon.mint{background:#e2f9e9;color:#15966d}.residency-summary-icon.amber{background:#fff4db;color:#c58a1d}.residency-floor-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(270px,1fr);gap:22px}.residency-matrix-wrap{min-width:0}.residency-block-title{display:flex;align-items:center;gap:15px;justify-content:center;margin:0 0 18px;font-size:14px}.residency-block-title span{height:1px;background:#cdd4e5;flex:1}.residency-matrix{display:flex;flex-direction:column;gap:9px}.residency-matrix-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:10px}.residency-floor-name{border:0;border-radius:10px;background:white;padding:13px;text-align:left;color:#34425b;font-weight:700;cursor:pointer}.residency-flat-cells{display:flex;flex-wrap:wrap;gap:9px}.residency-flat-cell{border:2px solid transparent;background:#fff;min-width:72px;flex:1 1 72px;max-width:120px;min-height:70px;border-radius:11px;padding:10px 5px;cursor:pointer;color:#35415d;transition:transform .15s,box-shadow .15s,border-color .15s}.residency-flat-cell:hover{transform:translateY(-2px);box-shadow:0 5px 12px #303c6922}.residency-flat-cell strong{display:block;font-size:15px}.residency-flat-cell small{display:block;font-size:10px;margin-top:5px}.residency-flat-cell.is-paid{background:#dcf8e9;color:#176f50}.residency-flat-cell.is-occupied{background:#ffedc9;color:#95620d}.residency-flat-cell.is-vacant{background:#fff;color:#778197}.residency-flat-cell.is-selected{border-color:#3d3b88;box-shadow:0 0 0 2px #c4c6f6;background:#b8c5fb;color:#26346d}.residency-map-legend{display:flex;flex-wrap:wrap;gap:15px;margin-top:22px;font-size:12px;color:#66748b}.residency-map-legend span{display:flex;align-items:center;gap:6px}.residency-dot{display:inline-block;width:11px;height:11px;border-radius:4px}.residency-dot.paid{background:#7bdbac}.residency-dot.occupied{background:#f8cf79}.residency-dot.vacant{background:#fff;border:1px solid #cfd5e3}.residency-dot.selected{background:#8fa6ed}.residency-selection-panel{background:white;border-radius:20px;padding:26px;min-height:365px;box-shadow:0 7px 25px #1c2b5b0a}.residency-selection-empty{text-align:center}.residency-selection-graphic{font-size:34px;color:#8a92d3}.residency-selection-empty h3{font-size:23px;margin:8px 0}.residency-selection-empty p{font-size:13px;color:#7d879b;line-height:1.6}.residency-overall-ring{width:190px;height:190px;border-radius:50%;margin:25px auto;background:conic-gradient(#8b9ce9 var(--ring),#e8f8ee 0);display:grid;place-items:center}.residency-overall-ring>div{width:135px;height:135px;background:white;border-radius:50%;display:flex;flex-direction:column;justify-content:center}.residency-overall-ring strong{font-size:35px}.residency-overall-ring small{color:#8992a6}.residency-overall-key{display:flex;justify-content:space-around;font-size:12px;color:#69748b}.residency-selection-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.residency-selection-top h3{font-size:25px;margin:8px 0 4px}.residency-selection-top p{font-size:12px;color:#7c879c;margin:0}.residency-status{padding:7px 10px;border-radius:18px;font-size:11px;font-weight:700}.residency-status.occupied{background:#e0f7e9;color:#13744d}.residency-status.vacant{background:#f1f2f6;color:#687387}.residency-detail-list{margin:23px 0;border-top:1px solid #eef0f5}.residency-detail-list>div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #eef0f5;padding:13px 0;font-size:12px}.residency-detail-list span{color:#7c879b}.residency-detail-list strong{text-align:right;overflow-wrap:anywhere}.residency-panel-actions{display:flex;flex-direction:column;gap:9px}.residency-panel-actions .btn{justify-content:center}.residency-panel-footnote{font-size:11px;line-height:1.5;color:#8b93a3;margin-top:16px}.residency-below{grid-template-columns:1fr 1fr!important}.residency-below>.insight-card{min-width:0}@media(max-width:1000px){.residency-floor-layout{grid-template-columns:1fr}.residency-selection-panel{min-height:0}.residency-summary-strip>div{padding:0 10px}}@media(max-width:600px){.residency-floor-dashboard{padding:14px;border-radius:16px}.residency-floor-header{align-items:flex-start;flex-direction:column}.residency-summary-strip{padding:12px 4px}.residency-summary-strip>div{flex-direction:column;gap:6px;text-align:center}.residency-summary-icon{width:38px;height:38px;font-size:20px}.residency-summary-strip strong{font-size:22px}.residency-summary-strip small{font-size:10px}.residency-matrix-row{grid-template-columns:87px minmax(0,1fr);gap:5px}.residency-floor-name{font-size:11px;padding:9px}.residency-flat-cells{gap:5px}.residency-flat-cell{min-width:55px;min-height:60px;padding:6px 3px}.residency-flat-cell strong{font-size:12px}.residency-flat-cell small{font-size:9px}.residency-below{grid-template-columns:1fr!important}}

/* V6: actual interactive floor matrix */
.floor-page{max-width:1500px;margin:auto}.floor-eyebrow{font-size:11px;letter-spacing:.14em;font-weight:800;color:#8d9cb6;margin-bottom:10px}.floor-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.floor-kpi{display:flex;align-items:center;gap:18px;background:white;border:1px solid #e8ecf5;border-radius:18px;padding:24px;box-shadow:0 5px 24px #25335609}.floor-kpi-icon{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;font-size:29px}.floor-kpi-icon.lavender{background:#edeaff;color:#6e63c9}.floor-kpi-icon.mint{background:#e1faeb;color:#139b65}.floor-kpi-icon.peach{background:#fff1dc;color:#d58c24}.floor-kpi small,.floor-facts small,.floor-person small{display:block;color:#8b96ac;font-size:12px;font-weight:600}.floor-kpi strong{display:block;font-size:29px;color:#1b2944;margin-top:3px}.floor-workspace{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(310px,1fr);gap:22px;align-items:start}.floor-map-card,.floor-detail{background:#fff;border:1px solid #e7eaf3;border-radius:22px;padding:26px;box-shadow:0 6px 26px #1b2a4908}.floor-map-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:28px}.floor-map-title h2,.floor-detail h2{font-size:21px;margin:0}.floor-map-title span{color:#8996aa;font-size:13px}.floor-matrix{display:flex;flex-direction:column;gap:11px}.floor-matrix-row{display:grid;grid-template-columns:128px 1fr;gap:12px;align-items:center}.floor-label{background:#f3f6fb;border-radius:11px;padding:16px 12px;font-weight:750;color:#34445e}.floor-unit-list{display:flex;flex-wrap:wrap;gap:10px}.floor-unit{min-width:88px;min-height:66px;border-radius:11px;border:2px solid transparent;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;transition:transform .15s,box-shadow .15s;font:inherit}.floor-unit:hover{transform:translateY(-2px);box-shadow:0 5px 12px #182b4820}.floor-unit b{font-size:15px}.floor-unit small{font-size:10px}.floor-unit.occupied{background:#dff8eb;color:#14744d}.floor-unit.vacant{background:#f2f4f8;color:#738095}.floor-unit.selected{border-color:#394ca5;box-shadow:0 0 0 3px #dce2ff;background:#dfe5ff;color:#243c8e}.floor-empty{color:#a1aab8;font-size:13px}.floor-legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:27px;color:#7c889c;font-size:12px}.floor-legend span{display:flex;align-items:center;gap:7px}.legend-dot{width:12px;height:12px;border-radius:4px;display:inline-block}.legend-dot.occupied{background:#8fe3b4}.legend-dot.vacant{background:#d9deea}.legend-dot.selected{background:#8698e8}.floor-detail-head{display:flex;justify-content:space-between;gap:12px;align-items:start;border-bottom:1px solid #edf0f6;padding-bottom:21px}.floor-detail-head small{font-size:10px;letter-spacing:.12em;font-weight:800;color:#98a3b5}.floor-detail-head h2{margin:7px 0}.floor-detail-head p{color:#8995a8;font-size:13px;margin:0}.floor-status{font-size:11px;padding:7px 11px;border-radius:100px;font-weight:700}.floor-status.occupied{background:#e1f8eb;color:#15845a}.floor-status.vacant{background:#f1f2f6;color:#66758a}.floor-person{display:flex;gap:15px;align-items:center;padding:23px 0}.floor-person-icon{height:52px;width:52px;display:grid;place-items:center;border-radius:15px;background:#ecebff;color:#7771c9;font-size:27px}.floor-person strong,.floor-person span{display:block}.floor-person strong{font-size:17px;margin:4px 0}.floor-person span{font-size:13px;color:#8a95a7}.floor-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px}.floor-facts>div{background:#f7f9fd;border-radius:12px;padding:15px}.floor-facts strong{display:block;margin-top:8px;color:#25344f;font-size:14px}.floor-open{width:100%;margin-top:23px}.floor-side-note{font-size:12px;color:#8995a7;line-height:1.6;margin-top:15px}@media(max-width:1050px){.floor-workspace{grid-template-columns:1fr}}@media(max-width:650px){.floor-kpis{grid-template-columns:1fr}.floor-matrix-row{grid-template-columns:95px 1fr}.floor-unit{min-width:68px}.floor-map-card,.floor-detail{padding:16px}.floor-map-title{flex-direction:column;align-items:start}}

/* V7: financial analytics inspired by the requested mint-and-white reference */
.finance-page{max-width:1540px;margin:0 auto;padding:34px 32px 60px;color:#1b302d}.finance-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:26px}.finance-heading h1{font-size:clamp(27px,3vw,38px);letter-spacing:-1.1px;margin:7px 0}.finance-heading p,.finance-panel-heading p{color:#82938e;margin:0;font-size:13px}.finance-action{background:#079a70!important;color:white!important;border:0!important}.finance-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}.finance-kpi,.finance-panel{background:#fff;border:1px solid #e7efeb;border-radius:17px;box-shadow:0 4px 22px rgba(17,55,42,.035)}.finance-kpi{position:relative;min-height:143px;padding:23px 20px;display:flex;flex-direction:column;gap:13px}.finance-kpi>span:first-child{font-size:13px;color:#70827d}.finance-kpi strong{font-size:clamp(22px,2.2vw,31px);font-weight:800;letter-spacing:-1px}.finance-kpi small{font-size:12px;color:#8b9995}.finance-kpi .fin-positive{color:#09966b}.finance-kpi .fin-warning{color:#c66769}.fin-kpi-icon{position:absolute;right:17px;top:17px;background:#f0f7f4;border-radius:9px;width:31px;height:31px;display:grid;place-items:center;color:#079a70}.finance-panels{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(270px,1fr);gap:18px;margin-bottom:18px}.finance-panel{padding:22px 24px}.finance-panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:22px}.finance-panel-heading h2{font-size:18px;margin:0 0 5px;letter-spacing:-.4px}.finance-key,.finance-keys{display:flex;align-items:center;gap:8px;font-size:12px;color:#778b83;white-space:nowrap}.finance-key i,.finance-keys i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#079a70}.finance-keys{gap:18px}.finance-keys span{display:flex;align-items:center;gap:6px}.finance-svg{width:100%;height:auto;min-height:240px;display:block}.finance-ring{width:min(210px,80%);aspect-ratio:1;border-radius:50%;margin:22px auto;display:grid;place-items:center}.finance-ring>div{background:white;border-radius:50%;width:71%;height:71%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px}.finance-ring small{font-size:12px;color:#81918b}.finance-ring strong{font-size:clamp(18px,2vw,25px)}.finance-legend{display:grid;grid-template-columns:1fr 1fr;gap:13px}.finance-legend>div{display:flex;flex-direction:column;gap:4px;font-size:12px}.finance-legend span{color:#81908c;display:flex;align-items:center;gap:6px}.finance-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}.finance-legend strong{font-size:13px}.finance-revenue{margin-bottom:14px}.finance-bars{height:220px;display:flex;align-items:flex-end;justify-content:space-around;gap:12px;border-bottom:1px solid #e9efed;padding:0 10px 8px;overflow-x:auto}.finance-bar-group{flex:1;min-width:37px;max-width:85px;display:flex;flex-direction:column;align-items:center;gap:9px}.finance-bar{width:100%;background:#e2ece8;border-radius:7px 7px 0 0;display:flex;align-items:flex-end;overflow:hidden}.finance-bar-collected{background:#079a70;width:100%;border-radius:5px 5px 0 0}.finance-bar-group small{font-size:11px;color:#84958e;white-space:nowrap}.finance-note{font-size:12px;color:#84958e;line-height:1.6}@media(max-width:1050px){.finance-kpis{grid-template-columns:repeat(2,1fr)}.finance-panels{grid-template-columns:1fr}}@media(max-width:600px){.finance-page{padding:20px 14px 42px}.finance-kpis{gap:9px}.finance-kpi{padding:16px 12px;min-height:125px}.finance-kpi strong{font-size:21px}.finance-panel{padding:17px 14px}.finance-heading{align-items:flex-start}.finance-legend{grid-template-columns:1fr 1fr}.finance-key{display:none}}

/* V8: building photograph and transparent rent calculator */
.hero-art.real-house{position:relative;overflow:hidden;min-height:220px;border-radius:18px;align-self:stretch;max-width:350px;width:36%;background:#e7edf4}
.hero-art.real-house img{width:100%;height:100%;object-fit:cover;object-position:center 47%;display:block;position:absolute;inset:0}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;align-items:start}
.calc-card{background:#fff;border:1px solid #e6eaf0;border-radius:20px;padding:25px;box-shadow:0 5px 25px rgba(22,34,57,.04)}
.calc-card h2{font-size:21px;margin:0 0 12px}.calc-card-head{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap}.calc-card-head .field{min-width:200px}
.calc-table{width:100%;border-collapse:collapse;margin-top:20px}.calc-table td,.calc-table th{padding:13px 5px;border-bottom:1px solid #e9eef1;text-align:left}.calc-table td:last-child,.calc-table th:last-child{text-align:right;font-variant-numeric:tabular-nums}.calc-table small,.calc-payment small{display:block;font-size:12px;color:#7d899c;margin-top:4px}.calc-table tfoot{font-size:17px}.calc-balance{color:#0c9270}.calc-hint{font-size:13px;color:#748297;margin-top:22px;line-height:1.6}.calc-form{display:grid;grid-template-columns:1fr 1fr;gap:13px}.calc-form .field:nth-child(5),.calc-form button{grid-column:1/-1}.calc-payment{padding:14px 0;border-bottom:1px solid #e9eef1}.calc-payment strong{font-size:18px}.calc-payment.legacy{background:#f4f6fa;padding:14px;border-radius:10px;margin-top:10px}.calc-history{max-height:330px;overflow:auto}
@media(max-width:950px){.calc-grid{grid-template-columns:1fr}.hero-art.real-house{width:42%}}
@media(max-width:600px){.hero-art.real-house{width:100%;height:220px;max-width:none}.calc-form{grid-template-columns:1fr}.calc-card{padding:17px}}


/* V9: dedicated two-column hero; photo never overlays text or occupancy */
.hero-property {
  display:grid;
  grid-template-columns:minmax(270px,1fr) minmax(200px,330px) minmax(130px,155px);
  align-items:center;
  gap:clamp(18px,3vw,44px);
  padding:32px clamp(22px,3vw,42px);
  min-height:280px;
}
.hero-property .hero-copy {position:relative;z-index:1;min-width:0;}
.hero-property .hero-copy h2 {font-size:clamp(1.6rem,2.6vw,2.25rem);overflow-wrap:anywhere;}
.hero-property .hero-art.real-house {
  position:relative;inset:auto;right:auto;bottom:auto;
  width:100%;max-width:none;height:240px;min-height:0;
  align-self:center;opacity:1;flex:none;border-radius:17px;
  box-shadow:0 8px 22px rgba(28,40,80,.12);
}
.hero-property .hero-art.real-house img {object-position:center 42%;}
.hero-property .hero-occupancy {
  position:relative;inset:auto;right:auto;top:auto;transform:none;
  width:100%;max-width:160px;justify-self:end;z-index:1;
}
.sidebar-brand .residency-brand-icon {width:29px;height:29px;display:block;}
.brand .residency-brand-icon {width:28px;height:28px;display:block;}
@media(max-width:1150px){
  .hero-property {grid-template-columns:minmax(240px,1fr) minmax(180px,300px);}
  .hero-property .hero-occupancy {grid-column:1/-1;justify-self:start;max-width:200px;}
}
@media(max-width:720px){
  .hero-property {grid-template-columns:1fr;gap:18px;padding:22px;}
  .hero-property .hero-art.real-house {height:230px;width:100%;opacity:1;}
  .hero-property .hero-occupancy {grid-column:1;max-width:none;}
  .hero-property .hero-metrics {flex-wrap:wrap;}
}

/* V10: prominent billing month selector on Readings, Statement and Calculator */
.billing-month-toolbar{
 display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 padding:17px 20px;margin:0 0 22px;background:#fff;border:1px solid #d9e5e0;
 border-left:4px solid #119b77;border-radius:14px;box-shadow:0 4px 16px rgba(21,48,71,.045);
}
.billing-month-heading{display:flex;align-items:center;gap:12px}
.billing-month-heading strong{display:block;font-size:1rem;color:#152d40}
.billing-month-heading small{display:block;margin-top:3px;color:#63758a;font-size:.8rem}
.billing-month-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:#e5f7f0;color:#0a906d;font-size:1.5rem}
.billing-month-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.billing-month-actions select{width:auto;min-width:185px;padding:11px 13px;border:1px solid #b9d4ca;border-radius:9px;background:#f7fdfa;color:#173a33;font-weight:700}
.billing-month-actions .btn{white-space:normal;text-align:center}
.billing-no-month{color:#ab5b15;font-weight:700}
@media(max-width:720px){.billing-month-toolbar{padding:15px}.billing-month-actions{width:100%}.billing-month-actions select{flex:1;min-width:130px}}

/* V11: building photo at left, details in center, occupancy at right */
.hero-property {grid-template-columns:minmax(220px,340px) minmax(280px,1fr) minmax(140px,170px);}
.hero-property .hero-art.real-house {grid-column:1;grid-row:1;height:250px;max-width:340px;}
.hero-property .hero-copy {grid-column:2;grid-row:1;}
.hero-property .hero-occupancy {grid-column:3;grid-row:1;}
@media (max-width:1150px) {
 .hero-property {grid-template-columns:minmax(180px,300px) minmax(240px,1fr);}
 .hero-property .hero-occupancy {grid-column:2;grid-row:2;justify-self:start;}
 .hero-property .hero-art.real-house {grid-row:1 / span 2;height:250px;}
 .hero-property .hero-copy {grid-column:2;grid-row:1;}
}
@media (max-width:720px) {
 .hero-property {grid-template-columns:1fr;}
 .hero-property .hero-art.real-house {grid-column:1;grid-row:1;max-width:none;height:230px;}
 .hero-property .hero-copy {grid-column:1;grid-row:2;}
 .hero-property .hero-occupancy {grid-column:1;grid-row:3;}
}

/* V12 — rent collection from monthly statement */
.sheet-payment-row td {vertical-align:middle;min-width:104px;background:#f6faf9}
.sheet-payment-row td:first-child {font-weight:700;min-width:160px;white-space:normal}
.sheet-payment-cell {display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 0}
.sheet-payment-status {font-size:11px;font-weight:800;border-radius:30px;padding:4px 10px}
.sheet-payment-status.paid {background:#dcf6e8;color:#137c51}
.sheet-payment-status.partial {background:#fff0d5;color:#98600d}
.sheet-payment-status.due {background:#fde8e8;color:#a53a40}
.sheet-pay-button {cursor:pointer;border:1px solid #a4d8c6;background:white;color:#087a60;border-radius:8px;padding:7px 9px;font-size:11px;font-weight:750;white-space:nowrap}
.sheet-pay-button:hover,.sheet-pay-button:focus-visible {background:#e5f8f0;outline:2px solid #a4d8c6}
.sheet-balance td {font-weight:700;color:#6c4b23}
.sheet-pay-summary {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0 20px}
.sheet-pay-summary>div {background:#f0f7f5;border-radius:12px;padding:12px 9px;min-width:0}
.sheet-pay-summary small {display:block;color:#677c83;font-size:11px}
.sheet-pay-summary strong {display:block;font-size:16px;margin-top:5px;overflow-wrap:anywhere}
.sheet-pay-form {display:grid;gap:12px;margin-top:14px}
.sheet-pay-form .btn {justify-self:start}
.sheet-payment-history {border-bottom:1px solid #e6eced;padding:12px 0;line-height:1.6}
.sheet-payment-history strong {font-size:16px}
.sheet-payment-history small {display:block;color:#64748b}
.sheet-payment-history.legacy {background:#f8f5e9;border-radius:8px;padding:12px;margin-top:10px}
@media(max-width:580px){.sheet-pay-summary{grid-template-columns:1fr 1fr}}

/* ================================================================
   SWATHI RESIDENCY — COMET INSPIRED DESIGN SYSTEM, V13
   Original styling inspired by soft violet, floating card UI.
   CSS-only: preserves API, forms, routing, calculations and records.
   ================================================================ */
:root{
 --indigo:#6552bd;--indigo-2:#7762cf;--plaster:#f6f4fd;--wall:#e9e3f7;
 --surface:#fff;--line:#e8e2f4;--ink:#272344;--muted:#847d9c;
 --marigold:#a68bf0;--marigold-soft:#f2ecff;
 --due:#cf4e7c;--due-soft:#fff0f6;--paid:#268f79;--paid-soft:#e8f8f3;
 --part:#ae7b30;--water:#6856bc;--water-soft:#f1edff;
 --r-sm:12px;--r-md:16px;--r-lg:23px;
}
body{background:#f6f4fd;color:var(--ink);}
a{color:#6654bd}
:focus-visible{outline:3px solid #aa91ff;outline-offset:2px}
.app-layout{background:#f6f4fd}
.app-sidebar{
 background:linear-gradient(173deg,#6b56c4 0%,#5745a5 58%,#493d90 100%);
 box-shadow:12px 0 36px rgba(69,48,136,.11);color:#fff;
 border-radius:0 26px 26px 0;padding-top:30px;
}
.sidebar-brand{padding-bottom:42px}
.sidebar-brand .brand-mark{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.19);border-radius:16px;box-shadow:0 10px 24px #352b7133}
.sidebar-brand strong{color:#fff}
.sidebar-brand small,.nav-section-label{color:#d5cbfa}
.side-nav{gap:8px}
.side-nav a{color:#e1dafa;border-radius:14px;padding:13px 14px;transition:background .18s,transform .18s}
.side-nav a:hover{background:#ffffff22;transform:translateX(2px)}
.side-nav a[aria-current="page"]{background:#fff;color:#5742a6;box-shadow:0 9px 23px #38257a36;font-weight:800}
.side-nav a[aria-current="page"] svg{color:#725ac8}
.sidebar-help,.property-mini{background:#ffffff19;border:1px solid #ffffff26;border-radius:17px}
.sidebar-help strong,.property-mini strong{color:#fff}
.sidebar-help small,.property-mini small,.signed-in{color:#d8cef6}
.signed-in strong{color:#fff}
.app-content{background:#f6f4fd}
.topbar{background:#ffffffd9;backdrop-filter:blur(12px);border-bottom:1px solid #eae5f6;box-shadow:0 2px 16px #61539c09}
.topbar-title strong{color:#292247}
.topbar-eyebrow{color:#8f83b5}
.user-avatar{background:#ece3ff;color:#674bc0}
.month-pick{background:#f4f0ff;border-color:#e4dcf8}
.month-pick select,.month-pick button{color:#5748a4}
main{max-width:1550px}
h1,h2,h3{color:#2c264a}
.dashboard-welcome h1{color:#2b244a}
.eyebrow{color:#8a6fda}
.building-pill{background:#eee7ff;color:#6854b9}
.hero-property{
 background:linear-gradient(112deg,#e8dfff 0%,#f1ebff 55%,#e6e6ff 100%);
 border:1px solid #e4d8ff;border-radius:27px;box-shadow:0 14px 34px #6553b21a;
}
.hero-tag{color:#7961c8}
.hero-copy h2{color:#32276d}
.hero-copy p,.hero-metrics{color:#7f73a3}
.hero-metrics strong{color:#493c87}
.hero-occupancy{background:#fffdfedb;border:1px solid #fff;border-radius:19px;box-shadow:0 12px 28px #6252b026}
.hero-occupancy strong{color:#624eb3}
.hero-progress{background:#e6def8}
.hero-progress i{background:linear-gradient(90deg,#8669df,#b38bfb)}
.metric-grid{gap:18px}
.metric-card{border-radius:23px;min-height:168px;border:1px solid #ffffffa8;box-shadow:0 12px 30px #5b4e9414}
.metric-purple{background:linear-gradient(140deg,#7b63d4,#a58ae9)}
.metric-purple .metric-top,.metric-purple>strong,.metric-purple>small{color:#fff}
.metric-purple .metric-icon{background:#ffffff35;color:#fff}
.metric-green{background:linear-gradient(135deg,#e0f8f1,#f4fffa)}
.metric-peach{background:linear-gradient(135deg,#ffebf2,#fff7fa)}
.metric-blue{background:linear-gradient(135deg,#eae7ff,#f8f6ff)}
.metric-card>strong{color:#302747}
.metric-card>small{color:#776e8e}
.metric-card .metric-icon{border-radius:13px}
.metric-decor{opacity:.23}
.dashboard-units-card,.insight-card,.panel,.building,.finance-panel,.finance-kpi,
.occupancy-overview,.strip>div,.floor-matrix-card,.floor-detail-panel{
 border:1px solid #ebe5f7!important;background:#fff;
 border-radius:23px!important;box-shadow:0 10px 34px #55458e0c!important;
}
.dashboard-units-card{padding:26px}
.unit-floor{border-color:#eee8f8;border-radius:17px}
.unit-floor-heading{background:#faf8ff}
.floor-index{background:#eee8ff;color:#7659c7}
.unit-tile-grid .flat{border-color:#eae3f7;background:#faf9ff;border-radius:15px}
.unit-tile-grid .flat.paid{background:#edfbf5}
.unit-tile-grid .flat.partial{background:#fff8ed}
.unit-tile-grid .flat.vacant{background:#f6f4fa}
.unit-floor-heading .floor-count{color:#735eb4;border-color:#eae4f7}
.btn,.btn.primary,button{transition:background .16s,box-shadow .16s,transform .16s}
.btn{border-radius:12px}
.btn.primary{background:linear-gradient(110deg,#7458d0,#9372e5);border-color:#8064d8;color:#fff;box-shadow:0 8px 19px #7860cb30}
.btn.primary:hover{background:#6650be;box-shadow:0 10px 22px #7860cb3d}
.btn:active,button:active{transform:translateY(1px)}
.billing-month-toolbar{border:1px solid #e5dbf8;border-left:4px solid #8267dc;background:linear-gradient(105deg,#fff,#faf7ff);border-radius:20px;box-shadow:0 7px 25px #55458e0d}
.billing-month-heading strong{color:#34285c}
.billing-month-heading small{color:#83779f}
.billing-month-icon{background:#eee6ff;color:#7355c5}
.billing-month-actions select{border:1px solid #dbcef8;background:#f7f2ff;color:#56439c;border-radius:12px}
.billing-no-month{color:#ac6682}
.occupancy-overview{background:linear-gradient(110deg,#fff,#f3efff)}
.occupancy-stats strong{color:#5d4caa}
.occupancy-stats>div{border-color:#e9e1f7}
.strip>div{background:#fff}
.roof{background:#6952b5}
.floors{background:#faf8ff;border-color:#eae2f7}
.floor{border-color:#eae2f7}
.floor-label{background:#eee9fa;border-color:#e4dcf3}
.flat{border-radius:14px}
.section-heading h2,.card-head h2{color:#332a58}
.text-link{color:#775acb}
.period-label{background:#fff;color:#766a99;border-color:#e6dff4}
.finance-page{color:#2c2449}
.finance-kpi{background:linear-gradient(140deg,#fff,#faf7ff)}
.finance-kpi:first-child{background:linear-gradient(135deg,#7560cf,#a189ed);color:white}
.finance-kpi:first-child strong,.finance-kpi:first-child span,.finance-kpi:first-child small{color:#fff}
.finance-panel{background:#fff}
.finance-ring{box-shadow:0 7px 24px #5b46a818}
.finance-revenue .finance-bar-collected{background:linear-gradient(180deg,#8062d7,#ac93f2)!important}
.finance-revenue .finance-bar{background:#e8e0fa}
.finance-action{background:#f1eaff;border-color:#e2d7fa;color:#6a52b6}
.finance-note{color:#84789f}
table{border-collapse:separate;border-spacing:0}
th{background:#f3effd;color:#5e4ba0}
td{border-color:#eee8f6}
tr:hover td{background:#fbf9ff}
input,select,textarea{border-color:#e4dcf1;border-radius:11px}
input:focus,select:focus,textarea:focus{border-color:#9b7ee4;outline-color:#c3b1f2}
.chip.paid,.badge.paid{background:#e4f8f0;color:#278d72}
.chip.due,.badge.due{background:#ffedf4;color:#c04b78}
.bottomnav{background:#6250b0}
@media(max-width:760px){
 .app-sidebar{display:none}
 .topbar{background:#fff}
 .metric-card{border-radius:17px}
 .hero-property{border-radius:21px}
 .dashboard-units-card,.insight-card,.panel,.finance-panel{border-radius:17px!important}
}

/* V14 Luxoa-inspired statement redesign — functionality unchanged */
.statement-intro{display:flex;justify-content:space-between;gap:30px;align-items:center;min-height:220px;padding:34px 42px;border-radius:26px;background:linear-gradient(113deg,#7465bd 0%,#8982cc 55%,#a9a8db 100%);color:white;box-shadow:0 16px 38px #6352a126;overflow:hidden;position:relative;margin-bottom:20px}
.statement-intro-copy{position:relative;z-index:1}
.statement-intro h1{color:#fff;font-size:clamp(1.75rem,3vw,2.6rem);margin:8px 0}
.statement-intro p{color:#f2efff;margin:0 0 17px}
.statement-kicker{font-size:.73rem;font-weight:850;letter-spacing:.12em;color:#8572bb}
.statement-intro .statement-kicker{color:#e7dcff}
.statement-month-tag{display:inline-flex;padding:7px 12px;border-radius:99px;background:#ffffff2b;border:1px solid #ffffff4a;color:white;font-weight:700;font-size:.82rem}
.statement-intro-mark{width:220px;height:150px;position:relative;flex:none;opacity:.72}
.statement-intro-mark span{display:grid;place-items:center;position:absolute;right:50px;top:10px;width:124px;height:124px;border-radius:28px;background:#ffffff38;border:1px solid #ffffff70;transform:rotate(-10deg);font-size:70px;font-weight:700;color:white;box-shadow:0 16px 26px #54469726}
.statement-intro-mark i{position:absolute;display:block;width:14px;height:14px;background:#d5f7a1;border-radius:50%;right:15px;top:17px}
.statement-intro-mark i:nth-child(3){right:190px;top:95px;width:9px;height:9px;background:#f9d1e9}
.statement-intro-mark i:nth-child(4){right:12px;top:115px;width:11px;height:11px;background:#fff}
.statement-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:30px}
.statement-stat{background:#fff;border:1px solid #e8e1f6;border-radius:20px;padding:22px 22px 20px;min-width:0;box-shadow:0 9px 22px #6654a00b}
.statement-stat>span{display:block;font-size:.82rem;font-weight:700;color:#7b7294}
.statement-stat strong{display:block;font-size:clamp(1.4rem,2vw,2rem);font-weight:850;letter-spacing:-.04em;color:#332a56;margin:8px 0 5px}
.statement-stat small{color:#948aa8;font-size:.75rem}
.statement-stat.billed{background:linear-gradient(130deg,#7b66ce,#a18bea);border-color:transparent}
.statement-stat.billed>span,.statement-stat.billed strong,.statement-stat.billed small{color:#fff}
.statement-stat.outstanding strong{color:#ba567b}
.statement-stat.collected strong{color:#258c79}
.statement-stat.rate strong{color:#6954b8}
.statement-table-head{align-items:center;margin-bottom:14px}
.statement-table-head h2{font-size:1.35rem;margin:5px 0}
.statement-table-card{border-radius:23px;background:#fff;border:1px solid #e6dff3;box-shadow:0 12px 34px #5b4c9412;overflow:hidden}
.statement-table-label{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;background:#faf8ff;border-bottom:1px solid #eee7f8}
.statement-table-label span{font-size:.7rem;font-weight:850;letter-spacing:.13em;color:#8677b1}
.statement-table-label strong{color:#5d4ba4}
.statement-table-card .sheet-wrap{border:0;border-radius:0;max-width:100%}
.statement-table-card table.sheet{border-collapse:separate;border-spacing:0;font-size:.85rem;min-width:1190px}
.statement-table-card .sheet th,.statement-table-card .sheet td{padding:12px 13px;border-bottom:1px solid #f1edf8}
.statement-table-card .sheet thead th{background:#7664bc;color:#fff;font-size:.88rem;padding:14px 13px}
.statement-table-card .sheet thead th:first-child{background:#7664bc;color:#fff;z-index:2;min-width:145px}
.statement-table-card .sheet tbody tr:nth-child(even):not(.water):not(.grand):not(.sheet-payment-row) td:not(.sum){background:#fcfbff}
.statement-table-card .sheet tbody tr:hover td:not(.sum){background:#f5f0ff}
.statement-table-card .sheet td.sum{background:#f1ebfc;color:#544394;min-width:105px}
.statement-table-card .sheet tr.water td{background:#eee9fd}
.statement-table-card .sheet tr.water td:first-child{background:#eee9fd}
.statement-table-card .sheet tr.grand td{border-top:2px solid #8b78c6;font-size:.94rem;color:#443581}
.statement-table-card .sheet tr.grand td:first-child{color:#443581}
.statement-table-card .sheet-payment-row td{background:#f8f6fe}
.statement-table-card .sheet-payment-row td:first-child{background:#f8f6fe}
.statement-table-card .sheet-payment-status.due{background:#ffedf2;color:#b34b70}
.statement-table-card .sheet-payment-status.paid{background:#e7f8f1;color:#1b8a6d}
.statement-table-card .sheet-payment-status.partial{background:#fff4e2;color:#a27524}
.statement-table-card .sheet-pay-button{background:#fff;color:#6953b6;border:1px solid #cfc1f1;border-radius:10px;font-size:.74rem;padding:8px 11px}
.statement-table-card .sheet-pay-button:hover{background:#f0eaff;outline-color:#d7c8f9}
.statement-table-card .sheet-balance td{color:#ae6480}
.statement-table-footer{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:13px 20px;font-size:.76rem;color:#8a7da8;background:#faf8ff;border-top:1px solid #eee8f7}
.statement-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;align-items:start}
.statement-expense-card,.statement-owner-card{background:#fff;border:1px solid #e7e0f5;border-radius:22px;padding:23px;box-shadow:0 10px 28px #5b4c9410}
.statement-expense-card h3{font-size:1.1rem;margin:7px 0}
.statement-expense-card p{margin:5px 0 20px;font-size:.84rem}
.statement-expense-list{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.statement-expense-list>div{background:#f7f3ff;border-radius:13px;padding:13px}
.statement-expense-list span{display:block;font-size:.78rem;color:#8678a3}
.statement-expense-list strong{display:block;margin-top:5px;color:#4e3e8b;font-size:1.1rem}
.statement-owner-card{margin:0!important;max-width:none!important}
@media(max-width:1000px){.statement-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.statement-intro{padding:24px;min-height:0}.statement-intro-mark{display:none}.statement-stats{gap:10px}.statement-stat{padding:15px}.statement-bottom-grid{grid-template-columns:1fr}.statement-table-head{align-items:start}.statement-table-card{border-radius:16px}}
@media print{.statement-intro{color:#2c2449;background:#f3effd;box-shadow:none}.statement-intro h1,.statement-intro p{color:#2c2449}.statement-stats{grid-template-columns:repeat(4,1fr)}.statement-table-card .sheet-wrap{overflow:visible}.statement-table-card table.sheet{min-width:0;font-size:8px}.statement-table-card .sheet td,.statement-table-card .sheet th{padding:5px 3px}.statement-table-card .sheet-pay-button{display:none}}

/* V15 — compact, fully visible ledger + coherent Luxoa financial and floor UI */
.statement-intro{min-height:118px!important;padding:20px 28px!important;margin-bottom:14px!important;border-radius:19px!important;box-shadow:0 8px 20px #5b48a51b!important}
.statement-intro h1{font-size:clamp(1.45rem,2vw,1.9rem)!important;margin:4px 0!important}
.statement-intro p{font-size:.82rem!important;margin:0 0 8px!important}
.statement-intro-mark{width:90px!important;height:76px!important;opacity:.45!important}
.statement-intro-mark span{width:68px!important;height:68px!important;font-size:38px!important;right:4px!important;top:0!important;border-radius:18px!important}
.statement-month-tag{padding:4px 10px!important;font-size:.7rem!important}
.statement-stats{gap:12px!important;margin-bottom:18px!important}
.statement-stat{padding:15px 17px!important;border-radius:15px!important}
.statement-stat strong{font-size:clamp(1.25rem,1.6vw,1.65rem)!important;margin:4px 0!important}
.statement-table-head{margin-bottom:9px!important}
.statement-table-head h2{font-size:1.18rem!important}
.statement-table-label{padding:9px 13px!important}
.statement-table-card{width:100%;min-width:0;border-radius:16px!important}
.statement-table-card .sheet-wrap{width:100%;overflow-x:auto}
.statement-table-card table.sheet{width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:clamp(.65rem,.73vw,.78rem)!important}
.statement-table-card .sheet th,.statement-table-card .sheet td{padding:9px 3px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statement-table-card .sheet th:first-child,.statement-table-card .sheet td:first-child{width:11%!important;min-width:0!important;padding-left:11px!important}
.statement-table-card .sheet th:not(:first-child),.statement-table-card .sheet td:not(:first-child){width:8.9%!important;text-align:center!important}
.statement-table-card .sheet th:last-child,.statement-table-card .sheet td:last-child{width:9%!important;min-width:0!important}
.statement-table-card .sheet-payment-row td{white-space:normal!important;overflow:visible!important}
.statement-table-card .sheet-payment-cell{display:flex;flex-direction:column;align-items:center;gap:5px}
.statement-table-card .sheet-pay-button{font-size:clamp(.55rem,.64vw,.7rem)!important;padding:6px 4px!important;width:100%;max-width:102px;line-height:1.15}
.statement-table-card .sheet-payment-status{font-size:.65rem}
.statement-table-card .sheet-payment-row td:first-child{font-size:.72rem;line-height:1.25;white-space:normal!important}
.finance-page{padding:22px 20px 44px!important}
.finance-heading{margin-bottom:17px!important}
.finance-heading h1{font-size:clamp(1.65rem,2.3vw,2.2rem)!important}
.finance-kpis{gap:14px!important;margin-bottom:16px!important}
.finance-kpi{min-height:133px!important;border-radius:21px!important;padding:21px!important;box-shadow:0 9px 26px #5846960d!important}
.finance-kpi:first-child{background:linear-gradient(130deg,#7461c8,#a494e4)!important}
.finance-kpi .fin-kpi-icon{background:#eee8fd;color:#7054c2}
.finance-kpi:first-child .fin-kpi-icon{background:#ffffff35;color:#fff}
.finance-panels{grid-template-columns:minmax(0,1.6fr) minmax(310px,1fr)!important;gap:16px!important}
.finance-panel{border-radius:21px!important;padding:22px!important;box-shadow:0 10px 30px #5846960d!important}
.finance-panel-heading h2{color:#31274f;font-size:1.08rem}
.finance-panel-heading p{color:#897fa0}
.finance-key i{background:#7b65d4}
.finance-ring{width:min(215px,82%);margin:10px auto 22px}
.finance-empty-chart{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:linear-gradient(135deg,#faf8ff,#f1edff);border:1px dashed #d9cafa;border-radius:17px}
.finance-empty-chart strong{font-size:1.05rem;color:#584598}
.finance-empty-chart p{max-width:320px;font-size:.82rem;color:#847a9f}
.finance-empty-icon{font-size:2rem;color:#8268d4;background:#fff;width:54px;height:54px;border-radius:15px;margin-bottom:10px}
.finance-revenue .finance-bar-collected{background:#7964d6!important}
.finance-revenue .finance-bar{background:#e4def4!important}
.floor-page{max-width:1540px;padding:18px 10px 30px}
.floor-kpis{gap:13px;margin:15px 0 20px}
.floor-kpi{padding:18px;border-radius:19px;border-color:#e8e0f5;box-shadow:0 8px 26px #59479a0c}
.floor-kpi-icon.lavender{background:#eee8ff;color:#7156c7}
.floor-kpi-icon.mint{background:#e5f9f1;color:#258f72}
.floor-kpi-icon.peach{background:#fff1f7;color:#c76592}
.floor-kpi strong{color:#453576}
.floor-map-card,.floor-detail{border-radius:21px;border-color:#e7def5;box-shadow:0 10px 30px #59479a0e}
.floor-matrix-row{grid-template-columns:115px 1fr}
.floor-label{background:#f1edfc;color:#6651ad;border-radius:11px}
.floor-unit.occupied{background:#e6f8f1;color:#197d63}
.floor-unit.selected{background:#ded5fa;color:#513c9a;border-color:#8068d3;box-shadow:0 0 0 3px #eee8ff}
.floor-facts>div{background:#f7f3ff}
.floor-facts strong{color:#51418e}
.floor-person-icon{background:#eee8ff;color:#6f56be}
.reading,.calc-card,.panel,.settings-card,.drawer{border-color:#e7e0f5;border-radius:19px}
@media(max-width:1100px){.statement-table-card table.sheet{min-width:1150px!important;font-size:.76rem!important}.statement-table-card .sheet th,.statement-table-card .sheet td{padding:10px 8px!important}.statement-table-card .sheet th:first-child,.statement-table-card .sheet td:first-child{min-width:145px!important}.statement-table-card .sheet th:not(:first-child),.statement-table-card .sheet td:not(:first-child){min-width:100px!important}.finance-panels{grid-template-columns:1fr!important}}
@media(max-width:650px){.statement-intro{padding:16px!important}.statement-intro-mark{display:none}.statement-stat{padding:12px!important}.statement-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.finance-page{padding:14px 4px 30px!important}.floor-page{padding:10px 0}}

/* V16: reference-inspired finance and uniform billing metrics */
.statement-intro{min-height:0!important;padding:21px 28px!important;border-radius:21px!important;margin-bottom:15px!important;box-shadow:0 9px 22px #6552a01a!important}
.statement-intro h1{font-size:clamp(1.45rem,2.1vw,2.1rem)!important;margin:5px 0!important}
.statement-intro p{font-size:.84rem;margin-bottom:8px!important}
.statement-intro-mark{width:100px!important;height:90px!important}
.statement-intro-mark span{width:70px!important;height:70px!important;font-size:43px!important;right:10px!important;top:7px!important;border-radius:20px!important}
.statement-stats{gap:13px!important;margin-bottom:23px!important}
.statement-stat,.statement-stat.billed{min-height:135px!important;padding:19px 21px!important;border-radius:18px!important;background:#fff!important;border:1px solid #e7e0f4!important;box-shadow:0 8px 22px #6554a010!important}
.statement-stat>span,.statement-stat.billed>span{color:#81759e!important;font-size:.82rem!important}
.statement-stat strong,.statement-stat.billed strong{color:#4e4384!important;font-size:clamp(1.5rem,2vw,2.15rem)!important}
.statement-stat small,.statement-stat.billed small{color:#9b90b0!important}
.statement-stat.collected{border-top:4px solid #2bb6a0!important}
.statement-stat.collected strong{color:#258e7b!important}
.statement-stat.outstanding{border-top:4px solid #e880a2!important}
.statement-stat.outstanding strong{color:#bd5a83!important}
.statement-stat.rate{border-top:4px solid #9579e6!important}
.statement-stat.rate strong{color:#6e58bd!important}
.statement-stat.billed{border-top:4px solid #7562ca!important}
.billing-month-toolbar{padding:12px 19px!important;min-height:0!important;margin-bottom:15px!important;border-radius:17px!important}
.billing-month-heading{gap:10px!important}
.billing-month-icon{width:37px!important;height:37px!important}
.finance-page{background:transparent!important}
.finance-heading{background:linear-gradient(108deg,#f0ecfc,#fff 68%,#f9f1f7);border:1px solid #e7e0f3;border-radius:22px;padding:23px 27px!important;margin-bottom:18px!important}
.finance-heading h1{font-size:clamp(1.55rem,2.3vw,2.3rem)!important;margin:5px 0!important}
.finance-heading p{color:#8a809e!important}
.finance-kpis{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-bottom:18px!important}
.finance-kpi,.finance-kpi:first-child{position:relative!important;min-height:145px!important;border:1px solid #e8e1f5!important;border-radius:19px!important;background:#fff!important;box-shadow:0 10px 25px #6151a014!important;padding:21px!important;overflow:hidden}
.finance-kpi:first-child{background:linear-gradient(125deg,#7462c3,#a393df)!important;border:0!important}
.finance-kpi>span:first-child{font-size:.83rem!important;font-weight:650!important;color:#857a9b!important}
.finance-kpi strong{font-size:clamp(1.45rem,2.1vw,2.2rem)!important;letter-spacing:-.04em!important;color:#3e345e!important;margin-top:12px!important;display:block!important}
.finance-kpi small{display:block!important;color:#8f86a2!important;margin-top:12px!important;font-size:.78rem!important}
.finance-kpi:first-child>span:first-child,.finance-kpi:first-child strong,.finance-kpi:first-child small{color:#fff!important}
.finance-kpi:nth-child(2) strong{color:#238e7c!important}
.finance-kpi:nth-child(4) strong{color:#c15c81!important}
.finance-kpi .fin-kpi-icon{background:#f1edfa!important;color:#806bc6!important;border-radius:13px!important;right:18px!important;top:18px!important}
.finance-kpi:first-child .fin-kpi-icon{background:#ffffff33!important;color:#fff!important}
.finance-panels{display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr)!important;gap:18px!important;align-items:stretch!important}
.finance-panel{background:#fff!important;border:1px solid #e8e1f4!important;border-radius:22px!important;box-shadow:0 10px 27px #6455a010!important;padding:23px!important}
.finance-panel-heading h2{font-size:1.13rem!important;color:#372e58!important}
.finance-panel-heading p{font-size:.81rem!important;color:#9489a5!important}
.finance-trend,.finance-expenses{min-height:340px!important}
.finance-empty-chart{min-height:240px!important;background:linear-gradient(135deg,#faf8ff,#f5f1fd)!important;border:1px dashed #ddd2f4!important;border-radius:18px!important;padding:25px!important}
.finance-empty-chart strong{color:#51418e!important}
.finance-ring{width:195px!important;height:195px!important;margin:14px auto!important}
.finance-ring>div{background:#fff!important}
.finance-legend{gap:10px!important}
.finance-revenue{margin-top:18px!important}
.finance-bar-collected{background:linear-gradient(180deg,#7862cb,#a28ae6)!important}
.finance-keys span:first-child i{background:#826ad4!important}
@media(max-width:1100px){.finance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}.finance-panels{grid-template-columns:1fr!important}}
@media(max-width:650px){.finance-kpis,.statement-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}.statement-intro-mark{display:none!important}.finance-heading{padding:18px!important}}

/* V16.2 luxury identity — sidebar brand only */
.sidebar-brand{gap:13px!important;align-items:center!important;padding:9px 8px 38px!important}
.sidebar-brand .brand-mark{
 width:58px!important;height:58px!important;flex:0 0 58px;
 background:linear-gradient(145deg,#8170cb,#54419d)!important;
 border:1px solid rgba(255,240,198,.48)!important;
 border-radius:18px!important;
 box-shadow:inset 0 1px 0 #ffffff36,0 9px 24px #31236d44!important;
 display:grid;place-items:center;
}
.sidebar-brand .residency-brand-icon{width:46px!important;height:46px!important;object-fit:contain;filter:drop-shadow(0 2px 4px #26183b33)}
.sidebar-brand strong{font-size:1.12rem!important;font-weight:800!important;letter-spacing:-.45px!important;line-height:1.18!important;color:#fff!important}
.sidebar-brand small{font-size:.59rem!important;letter-spacing:1.25px!important;color:#e9ddff!important;margin-top:6px;display:block}
@media(max-width:1100px){.sidebar-brand{gap:9px!important}.sidebar-brand .brand-mark{width:50px!important;height:50px!important;flex-basis:50px}.sidebar-brand .residency-brand-icon{width:40px!important;height:40px!important}.sidebar-brand strong{font-size:1rem!important}}

/* V16.3 — floating card-shell across all pages, desktop/tablet. */
@media (min-width:761px) {
  html { background:#efebf9; }
  body { background:linear-gradient(145deg,#f2eefb,#f8f6fd 60%,#f0eafb); }
  .app-layout {
    padding:12px;gap:12px;min-height:100vh;
    background:transparent;align-items:stretch;
  }
  .app-sidebar {
    top:12px;height:calc(100vh - 24px);
    border-radius:25px!important;overflow-y:auto;overflow-x:hidden;
    scrollbar-width:thin;scrollbar-color:#ffffff4d transparent;
    box-shadow:0 16px 38px #4d3a8840!important;
    flex-shrink:0;
  }
  .app-content {
    min-width:0;overflow:visible;
    background:#f7f4fe;
    border:1px solid #e7dff5;
    border-radius:25px;
    box-shadow:0 15px 45px #51417c12;
  }
  .app-content>.topbar,.app-content .topbar {
    top:12px;border-radius:25px 25px 0 0;
    border-bottom:1px solid #ebe4f5;
  }
  .app-content main { border-radius:0 0 25px 25px; }
  .sidebar-brand {padding-left:7px!important;padding-right:7px!important;}
  .side-nav a {border-radius:13px!important;}
}
@media (min-width:761px) and (max-width:1100px) {
  .app-layout {padding:9px;gap:9px;}
  .app-sidebar {top:9px;height:calc(100vh - 18px);border-radius:19px!important;}
  .app-content {border-radius:19px;}
  .app-content>.topbar,.app-content .topbar {top:9px;border-radius:19px 19px 0 0;}
}
@media (max-width:760px) {
  .app-layout {background:#f7f4fe;}
  .app-content {background:#f7f4fe;}
  .topbar {border-radius:0 0 18px 18px;box-shadow:0 5px 16px #5b499113;}
}

/* V16.4 — soft differentiated pastel backgrounds across KPI groups */
.finance-kpi,.finance-kpi:first-child,.statement-stat,.statement-stat.billed,
.occupancy-stats>div,.strip>div{
 border:1px solid rgba(119,99,174,.14)!important;
 box-shadow:0 12px 25px rgba(79,58,128,.07)!important;
}
.finance-kpi:first-child{background:linear-gradient(135deg,#7560c4,#a18de0)!important;border-color:transparent!important}
.finance-kpi:nth-child(2){background:linear-gradient(145deg,#e2f7f0,#f1fcf8)!important}
.finance-kpi:nth-child(3){background:linear-gradient(145deg,#fff0db,#fff9ed)!important}
.finance-kpi:nth-child(4){background:linear-gradient(145deg,#ffe7f0,#fff4f8)!important}
.finance-kpi:nth-child(2) strong{color:#197e6c!important}
.finance-kpi:nth-child(3) strong{color:#8e5e24!important}
.finance-kpi:nth-child(4) strong{color:#b64c76!important}
.finance-kpi:nth-child(2) .fin-kpi-icon{background:#c9ede0!important;color:#188b72!important}
.finance-kpi:nth-child(3) .fin-kpi-icon{background:#ffdfac!important;color:#a46a24!important}
.finance-kpi:nth-child(4) .fin-kpi-icon{background:#fbd3e1!important;color:#c14c7c!important}
.statement-stat.billed{background:linear-gradient(145deg,#e9e1ff,#f6f2ff)!important;border-top:4px solid #8066d2!important}
.statement-stat.collected{background:linear-gradient(145deg,#e1f8f1,#f5fcf9)!important;border-top:4px solid #2bb6a0!important}
.statement-stat.outstanding{background:linear-gradient(145deg,#ffe8f0,#fff7fa)!important;border-top:4px solid #e880a2!important}
.statement-stat.rate{background:linear-gradient(145deg,#e7edff,#f7f8ff)!important;border-top:4px solid #9579e6!important}
.statement-stat.billed strong{color:#5d47a3!important}
.statement-stat.billed>span{color:#6b5b9d!important}
.statement-stat.billed small{color:#8a7cb3!important}
.statement-stat.collected strong{color:#1c8c75!important}
.statement-stat.outstanding strong{color:#ba4f79!important}
.statement-stat.rate strong{color:#6651b7!important}
.occupancy-stats>div:nth-child(1),.strip>div:nth-child(1){background:linear-gradient(145deg,#eee8ff,#f9f6ff)!important}
.occupancy-stats>div:nth-child(2),.strip>div:nth-child(2){background:linear-gradient(145deg,#e2f7ef,#f6fdf9)!important}
.occupancy-stats>div:nth-child(3),.strip>div:nth-child(3){background:linear-gradient(145deg,#ffeaf2,#fff8fa)!important}
@media print{
.finance-kpi,.finance-kpi:first-child,.statement-stat,.statement-stat.billed,
.occupancy-stats>div,.strip>div{background:#fff!important;box-shadow:none!important;color:#242038!important}
}

/* V16.5 consistent luxury pastel card treatment across all application screens */
.floor-kpi{background:#f0eaff!important;border:1px solid #e3d9fb!important;box-shadow:0 10px 25px #63539b0d!important}
.floor-kpi:nth-child(2){background:#e6f8f1!important;border-color:#d1f0e2!important}
.floor-kpi:nth-child(3){background:#fff0f5!important;border-color:#f9dce8!important}
.floor-kpi:nth-child(1) strong{color:#6046ae!important}
.floor-kpi:nth-child(2) strong{color:#187d67!important}
.floor-kpi:nth-child(3) strong{color:#b94f79!important}
.floor-map-card{background:linear-gradient(145deg,#fff,#fcfaff)!important}
.floor-detail{background:linear-gradient(145deg,#fff,#fbf9ff)!important}
.floor-detail .floor-facts>*,.floor-facts>div{background:#f0eaff!important;border-radius:15px!important}
.floor-detail .floor-facts>*:nth-child(2),.floor-facts>div:nth-child(2){background:#e7f8f1!important}
.floor-detail .floor-facts>*:nth-child(3),.floor-facts>div:nth-child(3){background:#fff0f5!important}
.floor-detail .floor-facts>*:nth-child(4),.floor-facts>div:nth-child(4){background:#fff4e2!important}
.floor-label{background:#f0eaff!important}
.floor-unit.occupied:not(.selected){background:#e3f7ee!important}
.floor-unit.vacant:not(.selected){background:#fff0f5!important}
.residency-summary-strip>div:nth-child(1){background:#f0eaff!important}
.residency-summary-strip>div:nth-child(2){background:#e6f8f1!important}
.residency-summary-strip>div:nth-child(3){background:#fff0f5!important}
.metric-grid>.metric-card:nth-child(1){background:linear-gradient(145deg,#ede6ff,#faf7ff)!important}
.metric-grid>.metric-card:nth-child(2){background:linear-gradient(145deg,#e4f8f1,#f8fdfa)!important}
.metric-grid>.metric-card:nth-child(3){background:linear-gradient(145deg,#fff0df,#fffcf5)!important}
.metric-grid>.metric-card:nth-child(4){background:linear-gradient(145deg,#ffe9f2,#fff9fb)!important}
.metric-grid>.metric-card strong,.metric-grid>.metric-card small,.metric-grid>.metric-card .metric-top{color:#3c315b!important}
.calc-card:nth-child(odd){background:linear-gradient(145deg,#fff,#f8f4ff)!important}
.calc-card:nth-child(even){background:linear-gradient(145deg,#fff,#f1fbf7)!important}
.insight-card:nth-child(3n+1){background:#f3edff!important}
.insight-card:nth-child(3n+2){background:#eaf8f2!important}
.insight-card:nth-child(3n){background:#fff0f5!important}
/* Maintain clear distinction for interactive controls and readable text */
.floor-kpi,.floor-map-card,.floor-detail,.calc-card,.insight-card{transition:box-shadow .18s ease,transform .18s ease}
@media print{.floor-kpi,.floor-map-card,.floor-detail,.calc-card,.insight-card,.metric-grid>.metric-card{background:#fff!important;box-shadow:none!important}}

/* V16.6: compact dashboard building hero, photo stays left */
@media(min-width:1151px){
 .hero-property{grid-template-columns:minmax(155px,205px) minmax(240px,1fr) minmax(125px,155px)!important;gap:clamp(16px,2.4vw,32px)!important;padding:18px 26px!important;min-height:0!important;}
 .hero-property .hero-art.real-house{height:176px!important;min-height:0!important;max-width:205px!important;grid-column:1!important;grid-row:1!important;}
 .hero-property .hero-copy{grid-column:2!important;grid-row:1!important;}
 .hero-property .hero-copy h2{font-size:clamp(1.5rem,2.2vw,2.05rem)!important;margin:8px 0!important;}
 .hero-property .hero-copy p{margin:5px 0 16px!important;}
 .hero-property .hero-metrics{gap:clamp(12px,2vw,28px)!important;}
 .hero-property .hero-occupancy{grid-column:3!important;grid-row:1!important;max-width:155px!important;justify-self:end!important;}
}
@media(min-width:721px) and (max-width:1150px){
 .hero-property{grid-template-columns:minmax(150px,195px) minmax(200px,1fr)!important;gap:18px!important;padding:18px 22px!important;min-height:0!important;}
 .hero-property .hero-art.real-house{grid-column:1!important;grid-row:1 / span 2!important;height:175px!important;max-width:195px!important;}
 .hero-property .hero-copy{grid-column:2!important;grid-row:1!important;}
 .hero-property .hero-occupancy{grid-column:2!important;grid-row:2!important;justify-self:start!important;max-width:180px!important;}
}
@media(max-width:720px){
 .hero-property{padding:16px!important;gap:14px!important;min-height:0!important;}
 .hero-property .hero-art.real-house{height:180px!important;min-height:0!important;}
 .hero-property .hero-copy h2{margin:6px 0!important;}
}

/* ===== Luxury sign-in, v17 — intentionally scoped; dashboard styles unchanged ===== */
body.is-login { background:#07182b; color:#f7f2e8; color-scheme:dark; }
.lux-login { --gold:#eac46d; --navy:#091a30; min-height:100vh; min-height:100dvh; position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) minmax(350px,450px); grid-template-rows:auto 1fr auto; column-gap:clamp(22px,4vw,80px); padding:clamp(22px,3.6vw,54px) clamp(22px,5vw,90px) 20px; overflow:hidden; font-family:var(--body); }
.lux-login-scene { position:absolute;inset:0;z-index:-3;background:#102743 url('/static/luxury-residency.jpg?v=170') center 48% / cover no-repeat; }
.lux-login-shade { position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(4,17,34,.94) 0%,rgba(7,22,42,.75) 35%,rgba(5,17,31,.58) 66%,rgba(5,15,29,.79) 100%),linear-gradient(0deg,rgba(3,13,27,.93),transparent 30%); }
.lux-login-header { grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:1; }
.lux-brand {display:flex;align-items:center;gap:14px;color:#f6dfac;font:600 clamp(21px,2.3vw,32px) Georgia,serif;letter-spacing:.015em;}
.lux-brand .residency-brand-icon {width:40px;height:44px;object-fit:contain;}
.lux-header-note,.lux-eyebrow {font-size:11px;letter-spacing:.23em;font-weight:700;color:#e7c982;}
.lux-login-intro {grid-column:1;grid-row:2;align-self:center;max-width:680px;padding:45px 0 55px;}
.lux-login-intro h1 {font:italic 400 clamp(45px,5.4vw,86px)/1.08 Georgia,'Times New Roman',serif;color:#fff7e7;margin:20px 0 22px;letter-spacing:-.035em;}
.lux-rule {width:86px;height:2px;background:var(--gold);margin-bottom:25px;}
.lux-login-intro>p {color:#eee7dc;font-size:clamp(16px,1.5vw,21px);line-height:1.6;max-width:470px;}
.lux-highlights {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:clamp(40px,6vw,90px);max-width:600px;}
.lux-highlights>div {display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center;color:#f6eee0;font-size:12px;font-weight:600;}
.lux-feature-icon {color:var(--gold);font-size:32px;line-height:1.1;}
.lux-login-panel {grid-column:2;grid-row:2;align-self:center;width:100%;border:1px solid rgba(240,203,126,.65);border-radius:28px;background:linear-gradient(145deg,rgba(18,34,55,.92),rgba(7,20,37,.96));box-shadow:0 28px 85px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.09);padding:clamp(26px,3vw,46px);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;}
.lux-panel-mark {display:flex;justify-content:center;margin-bottom:16px;}
.lux-panel-mark .residency-brand-icon {width:57px;height:61px;object-fit:contain;}
.lux-login-panel h2 {font:400 clamp(30px,2.7vw,40px) Georgia,serif;text-align:center;color:#fff6e5;margin:0 0 10px;}
.lux-panel-subtitle {color:#bfcbd8;font-size:14px;text-align:center;margin:0 0 34px;line-height:1.5;}
.lux-login-panel form {display:flex;flex-direction:column;gap:18px;}
.lux-field {display:flex;flex-direction:column;gap:9px;color:#e4d8c7;font-size:13px;font-weight:600;}
.lux-input-wrap {position:relative;display:flex;align-items:center;}
.lux-input-wrap input[type=text],.lux-input-wrap input[type=password] {width:100%;min-height:52px;border:1px solid rgba(204,220,237,.26);border-radius:13px;background:rgba(219,235,251,.09);color:#fff;padding:12px 60px 12px 42px;font-size:16px;box-shadow:none;}
.lux-input-wrap input::placeholder {color:#aab8ca;}
.lux-input-wrap input:focus {outline:2px solid rgba(234,196,109,.7);outline-offset:1px;border-color:var(--gold);}
.lux-input-icon {position:absolute;left:15px;z-index:1;font-size:21px;color:#e8cb88;pointer-events:none;}
.lux-reveal {position:absolute;right:8px;background:transparent;color:#f1d18d;border:0;min-width:48px;min-height:44px;cursor:pointer;font-size:12px;font-weight:700;}
.lux-error {color:#ffb3bb;min-height:1.1em;font-size:13px;margin:0;}
.lux-submit {display:flex;align-items:center;justify-content:center;gap:14px;min-height:54px;width:100%;border:1px solid #ffe2a2;border-radius:14px;background:linear-gradient(115deg,#f8db8c,#c78d2f 80%,#f1d07c);color:#1a1d29;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(210,160,65,.16);}
.lux-submit:hover:not(:disabled) {filter:brightness(1.07);transform:translateY(-1px);}
.lux-submit:disabled {opacity:.65;cursor:wait;}
.lux-secure {margin-top:24px;text-align:center;color:#a9b8c8;font-size:12px;}
.lux-login-footer {grid-column:1/-1;grid-row:3;display:flex;justify-content:space-between;gap:12px;color:#c2cbd6;font-size:11px;letter-spacing:.1em;padding-top:16px;border-top:1px solid rgba(255,255,255,.18);}
@media(max-width:900px) { .lux-login {grid-template-columns:1fr;gap:18px;padding:24px 22px 18px;} .lux-login-header {grid-column:1;} .lux-login-intro {grid-column:1;grid-row:2;text-align:center;justify-self:center;padding:18px 0 0;} .lux-login-intro h1 {font-size:clamp(38px,8vw,58px);margin:10px 0;} .lux-rule {margin:12px auto;} .lux-login-intro>p {font-size:15px;} .lux-highlights {display:none;} .lux-login-panel {grid-column:1;grid-row:3;max-width:480px;justify-self:center;} .lux-login-footer {grid-row:4;justify-content:center;text-align:center;} .lux-login-footer span:last-child,.lux-header-note {display:none;} }
@media(max-width:480px) { .lux-login {padding:calc(16px + env(safe-area-inset-top)) 16px calc(15px + env(safe-area-inset-bottom));gap:15px;min-height:100dvh;} .lux-brand {font-size:21px;} .lux-brand .residency-brand-icon {width:33px;height:36px;} .lux-login-intro {padding:12px 0 0;} .lux-login-intro h1 {font-size:38px;} .lux-login-intro>p {font-size:13px;} .lux-login-panel {border-radius:22px;padding:25px 22px;} .lux-panel-subtitle {margin-bottom:22px;} .lux-login-panel form {gap:13px;} .lux-login-footer {font-size:10px;} }
@media(prefers-reduced-motion:reduce) { .lux-submit {transition:none;transform:none!important;} }
/* V18 secure invitation & tenant portal */
.invite-page{min-height:100dvh;display:grid;place-items:center;padding:24px;background:linear-gradient(145deg,#08182c,#1c2d4b 55%,#4a3764);color:#fff}.invite-card{width:min(100%,470px);padding:clamp(24px,5vw,48px);border:1px solid #dcb66b80;border-radius:24px;background:#0e2035e8;box-shadow:0 22px 80px #0006}.invite-card h1{font-family:Georgia,serif;font-size:40px;color:#f6dfae}.invite-card p{color:#e3e7ef}.invite-emblem{color:#e9bf6e;font-size:42px}.invite-brand{color:#e9bf6e;letter-spacing:.2em;font-size:12px}.invite-card .field{color:#fff}.invite-card input{background:#fff;color:#172033}.invite-card .btn.primary,.invite-manager .btn.primary{background:linear-gradient(110deg,#b88437,#efcb78);color:#172033;border:0}.invite-back{display:inline-block;margin-top:22px;color:#e9bf6e}.invite-manager{margin-top:24px;padding:22px;border:1px solid #e5d8f6;border-radius:18px;background:#faf7ff}.invite-manager h3{margin:0 0 8px}.invite-manager #invite-created{margin-top:18px}.invite-manager #invite-link{width:100%;margin:8px 0}.invite-pending{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0}.tenant-page{min-height:100dvh;background:#f8f6f1;color:#17263b}.tenant-page header{display:flex;align-items:center;justify-content:space-between;padding:20px clamp(20px,6vw,90px);background:#101f33;color:#f3d394;font-weight:700;letter-spacing:.09em}.tenant-hero{padding:clamp(36px,8vw,95px) clamp(20px,6vw,90px);background:linear-gradient(110deg,#14243b,#283e57);color:#fff}.tenant-hero span{color:#e4bd75;letter-spacing:.18em;font-size:12px}.tenant-hero h1{font:clamp(36px,6vw,70px) Georgia,serif;margin:12px 0}.tenant-bills{padding:36px clamp(20px,6vw,90px)}.tenant-bills h2{font:32px Georgia,serif}.tenant-table{overflow-x:auto}.tenant-table table{min-width:540px}@media(max-width:600px){.invite-card{padding:24px}.tenant-page header{font-size:12px}.tenant-hero{padding:45px 20px}}

/* V18.1: Dashboard ledger contrast independent of login theme */
body:not(.is-login) { color-scheme: light; color: var(--ink); background: var(--plaster); }
.statement-table-card .sheet tbody td:not(.sum) { color: #40365D; }
.statement-table-card .sheet tbody td:first-child { color: #71658F; }
.statement-table-card .sheet tbody tr.grand td { color: #443581; }
.statement-table-card .sheet thead th { color: #FFFFFF; }
.statement-table-card .sheet tbody td.sum { color: #544394; }