/* ============================================================================
   KORA STYLES — how this file is organised
   ----------------------------------------------------------------------------
   CSS rule of thumb: when two rules set the same thing, the one LOWER in the file wins.
   This file grew in layers, top to bottom:
     1. Fonts and the base layout (top bar, cards, lists, buttons, receipt, plans)
     2. "v2 refinements": small fixes to the base layout
     3. "AURORA THEME": ALL COLOURS live here. Dark is the base (:root), light is
        :root[data-theme="light"]. To change a colour, change it in this section.
     4. Feature sections added later (Ask Kora, install guide, receipt, profile, import,
        invite, tenancy card, empty lists ...), each with a short title comment.
   Light or dark: every page's <head> sets data-theme="light" or "dark" before anything shows
   (light unless the person picked Dark). See rentTheme in app.js.
   ============================================================================ */

/* Font: Metropolis, the closest free match to Proxima Nova (the font Buildium uses).
   Loaded from jsDelivr (not Google) and kept on the phone by the service worker. Must stay at the top of this file. */
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.3.0/files/metropolis-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.3.0/files/metropolis-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.3.0/files/metropolis-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/@fontsource/metropolis@5.3.0/files/metropolis-latin-700-normal.woff2') format('woff2'); }

/* ================= Kora design system, v2 =================
   Light and dark are the same layout with different colour variables. */
* { -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); font-variant-numeric: tabular-nums;
  background: radial-gradient(900px 380px at 100% -6%, rgba(14, 138, 94, .09), transparent 70%), var(--bg);
  background-attachment: fixed; padding-bottom: 104px; -webkit-font-smoothing: antialiased; min-height: 100vh;
}

h1, h2, h3, .hero-amount, .rent-amount, .stat .v { font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.02em; }
.fw-semibold { font-weight: 600; }
.text-muted { color: var(--muted) !important; }
.text-pending { color: var(--warn-fg); }
.text-overdue { color: var(--bad-fg); }
a { color: var(--link); }
.container, .app-header .container, main.container { max-width: 1180px; }
.container { padding-left: 18px; padding-right: 18px; }

/* ---------- Top bar (every signed-in page) ---------- */
.topbar { position: sticky; top: 0; z-index: 40; background: var(--topbar); border-bottom: 1px solid var(--line); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.topbar-in { max-width: 1180px; margin: 0 auto; padding: .6rem 18px; display: flex; align-items: center; gap: .6rem; min-height: 62px; }
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.brand svg { width: 32px; height: 32px; }
.topnav { display: none; gap: .15rem; margin-left: 1.4rem; flex: 1; padding: .22rem; width: fit-content; flex: 0 1 auto; border: 1px solid var(--line); border-radius: 99px; background: var(--surface2); }
.topnav a { padding: .42rem 1rem; border-radius: 99px; font-weight: 600; font-size: .85rem; color: var(--muted); text-decoration: none; transition: background .2s, color .2s; }
.topnav a:hover { color: var(--ink); background: var(--hover); }
.topnav a.active { background: var(--nav-on); color: var(--nav-on-fg); box-shadow: 0 6px 14px -8px rgba(6, 40, 31, .7); }
.topbar .tools { margin-left: auto; display: inline-flex; align-items: center; gap: .55rem; }
.iconbtn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); transition: transform .15s, color .2s, background .2s; }
.iconbtn:hover { color: var(--ink); background: var(--hover); } .iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.topbar .me { display: inline-flex; text-decoration: none; }
.topbar .avatar { width: 38px; height: 38px; font-size: .8rem; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--line); }
@media (min-width: 992px) { .topnav { display: flex; } .bottom-nav { display: none; } body { padding-bottom: 2.5rem; } }

/* ---------- Page title area ---------- */
.app-header { position: relative; overflow: hidden; padding: 1.7rem 0 1.1rem; background: none; color: var(--ink); }
.app-header .container { position: relative; z-index: 1; }
.app-header h1 { font-size: clamp(1.7rem, 4.2vw, 2.25rem); font-weight: 700; margin: 0; line-height: 1.1; }
.app-header .sub { display: block; margin-top: .3rem; color: var(--muted); font-size: .95rem; }
.app-header .back { display: inline-flex; align-items: center; gap: .25rem; margin-bottom: .6rem; padding: .22rem .7rem .22rem .45rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); text-decoration: none; font-size: .8rem; font-weight: 600; }
.app-header .back:hover { color: var(--ink); }
.section-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .65rem .15rem; color: var(--ink); }

/* ---------- Entrance screens: split screen on a computer, a bold band on a phone ---------- */
body.auth { padding-bottom: 2rem; }
body.auth .app-header { color: #fff; padding: 1.7rem 0 5.5rem; border-radius: 0 0 36px 36px; min-height: 12rem;
  background: radial-gradient(520px 260px at 100% 0%, rgba(200, 245, 110, .2), transparent 70%), linear-gradient(135deg, var(--hero-a), var(--hero-b)); }
body.auth .app-header::after { content: ''; position: absolute; right: -10px; bottom: 0; width: min(360px, 80%); height: 110px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='200' viewBox='0 0 520 200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='2.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M20 190V110l60-48 60 48v80z'/%3E%3Cpath d='M64 190v-46h32v46'/%3E%3Cpath d='M170 190V84l78-62 78 62v106z'/%3E%3Cpath d='M224 190v-58h48v58'/%3E%3Cpath d='M352 190v-70l56-44 56 44v70z'/%3E%3Cpath d='M392 190v-36h32v36'/%3E%3Cpath d='M0 190h520'/%3E%3C/g%3E%3Cg fill='%23c8f56e' fill-opacity='.35'%3E%3Ccircle cx='470' cy='40' r='20'/%3E%3C/g%3E%3C/svg%3E") no-repeat right bottom / contain; pointer-events: none; }
body.auth .app-header h1 { color: #fff; }
body.auth .app-header .sub, body.auth .app-header .back { color: rgba(255, 255, 255, .8); }
body.auth .app-header .back { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
body.auth .hero, body.auth .auth-card, body.auth .rent-card { margin-top: -3.2rem; }
.points { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .55rem; color: rgba(255, 255, 255, .9); font-size: .95rem; }
.points li { display: flex; align-items: center; gap: .6rem; } .points li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; background: rgba(200, 245, 110, .22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.4' fill='none' stroke='%23c8f56e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }
@media (min-width: 992px) {
  body.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; padding-bottom: 0; }
  body.auth .app-header { min-height: 100vh; border-radius: 0 48px 48px 0; padding: 3rem 0; display: flex; align-items: center; }
  body.auth .app-header::after { height: 220px; width: 520px; }
  body.auth .app-header .container { max-width: none; padding-left: clamp(2rem, 6vw, 5.5rem); padding-right: clamp(2rem, 6vw, 5.5rem); }
  body.auth .app-header h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); max-width: 14ch; }
  body.auth .app-header .sub { font-size: 1.05rem; max-width: 34ch; }
  body.auth main.container { max-width: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.5rem; }
  body.auth .hero, body.auth .auth-card, body.auth .rent-card { margin-top: 0; width: 100%; }
}
.app-header[data-mark] .container::before { content: ''; display: block; width: 44px; height: 44px; margin-bottom: 1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 16L16 5l12 11' fill='none' stroke='%235fe0a8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 15v12h18V15' fill='none' stroke='%235fe0a8' stroke-width='2.6' stroke-linejoin='round'/%3E%3Cpath d='M13 27v-7h6v7' fill='%235fe0a8'/%3E%3C/svg%3E") center / contain no-repeat; }
.auth-card { max-width: 480px; margin-left: auto; margin-right: auto; padding: 1.7rem; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-up); position: relative; z-index: 1; animation: rise .4s ease-out; }
.auth-card .form-label { font-weight: 600; }
.auth-card .form-control, .auth-card .input-group-text { font-size: 1.05rem; padding: .85rem 1rem; }
.hero { max-width: 480px; margin: 0 auto 1.5rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--shadow-up); position: relative; z-index: 1; }
.hero-label { color: var(--muted); font-size: .85rem; }
.hero-amount { font-size: 2.5rem; font-weight: 700; line-height: 1.1; }
.hero-of { color: var(--muted); }
.code-input { font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.9rem; font-weight: 700; letter-spacing: .6rem; text-align: center; border: 0; border-bottom: 3px solid var(--line); border-radius: 0; background: transparent; }
.code-input:focus { border-bottom-color: var(--brand); box-shadow: none; background: transparent; }

/* ---------- Cards, lists, tables ---------- */
.card, .list-group, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--ink); }
.panel { padding: 1rem; margin-bottom: 1rem; }
.list-group { overflow: visible; }
.list-group-item { background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); padding: .9rem 1rem; }
.list-group-item:last-child { border-bottom: 0; }
.list-group-item-action { color: var(--ink); }
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--hover); color: var(--ink); }
.cols { display: grid; gap: 1.25rem; } @media (min-width: 992px) { .cols { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; margin-bottom: 1.25rem; }
.stats.three { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } .stats.three { grid-template-columns: repeat(3, 1fr); } }
.stat { display: flex; align-items: center; gap: .7rem; padding: .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.stat .ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.stat .l { font-size: .74rem; color: var(--muted); } .stat .v { font-size: 1.15rem; font-weight: 700; line-height: 1.15; } .stat small { display: block; font-size: .7rem; color: var(--muted); }
.stat .ic.sun { background: var(--warn-bg); color: var(--warn-fg); }   /* amber tile: "Lost to empty units" on Properties */
.ic svg, .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.meter { display: flex; height: 12px; margin: .6rem 0 .5rem; border-radius: 99px; background: var(--track); overflow: hidden; }
.meter span { display: block; height: 100%; animation: grow .9s cubic-bezier(.2, .7, .2, 1); }
.meter .got { background: var(--brand); } .meter .wait { background: repeating-linear-gradient(135deg, var(--sun) 0 6px, #f6cf85 6px 12px); }
.legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .78rem; color: var(--muted); }
.legend i { display: inline-block; width: 9px; height: 9px; margin-right: .35rem; border-radius: 50%; }

/* one list markup: stacked on a phone, a table row on a computer */
.thead { display: none; }
.trow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow .who { display: flex; align-items: center; gap: .75rem; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; font: inherit; }
.trow .who b { display: block; } .trow .who small { display: block; color: var(--muted); }
.trow .where, .trow .when { display: none; color: var(--muted); font-size: .9rem; }
.trow .right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.trow .amt { font-weight: 700; } .trow .act { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }
@media (min-width: 992px) {
  .tbl .thead { display: grid; grid-template-columns: var(--cols); gap: .75rem; padding: .7rem 1rem; color: var(--muted); font-size: .74rem; font-weight: 600; border-bottom: 1px solid var(--line); }
  .tbl .trow { display: grid; grid-template-columns: var(--cols); gap: .75rem; }
  .tbl .trow .right { display: contents; } .tbl .trow .where, .tbl .trow .when { display: block; }
  .tbl .trow .who { order: 1; } .tbl .trow .where { order: 2; } .tbl .trow .amt { order: 3; text-align: left; } .tbl .trow .when { order: 4; } .tbl .trow .state { order: 5; } .tbl .trow .act { order: 6; flex-basis: auto; }
  .tbl .trow .act.wide { grid-column: 1 / -1; }
}
.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; margin-bottom: 1rem; }
.pgrid { display: grid; gap: 1rem; } @media (min-width: 992px) { .pgrid { grid-template-columns: 1fr 1fr; align-items: start; } }
.pcard .list-group { box-shadow: none; border: 0; background: transparent; } .pcard .list-group-item { padding-left: .25rem; padding-right: .25rem; }
.house-tile { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.house-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vacant-row { background: var(--vacant); box-shadow: inset 3px 0 0 var(--sun); }
.note { display: flex; gap: .6rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); color: var(--muted); font-size: .82rem; }
.note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.kv { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); } .kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); font-size: .88rem; } .kv b { text-align: right; }
.tabs { display: flex; gap: .3rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; }
.tabs button { border: 0; background: none; padding: .6rem .9rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.search { position: relative; margin-bottom: .9rem; } .search .form-control { padding-left: 2.4rem; } .search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }

/* ---------- Status labels and initials ---------- */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .6rem; border-radius: 99px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-paid, .chip-confirmed { background: var(--ok-bg); color: var(--ok-fg); }
.chip-partial, .chip-pending { background: var(--warn-bg); color: var(--warn-fg); }
.chip-unpaid, .chip-waiting { background: var(--idle-bg); color: var(--idle-fg); }
.chip-overdue, .chip-failed, .chip-rejected { background: var(--bad-bg); color: var(--bad-fg); }
.avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .9rem; }
.av0 { background: var(--av0-bg); color: var(--av0-fg); } .av1 { background: var(--av1-bg); color: var(--av1-fg); } .av2 { background: var(--av2-bg); color: var(--av2-fg); }
.av3 { background: var(--av3-bg); color: var(--av3-fg); } .av4 { background: var(--av4-bg); color: var(--av4-fg); }
.hero-profile { display: flex; align-items: center; gap: 1rem; max-width: none; } .hero-profile .avatar { width: 56px; height: 56px; font-size: 1.2rem; }
.pm { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.pm svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Buttons and fields (Bootstrap, restyled) ---------- */
.btn { border-radius: 12px; font-weight: 600; }
.btn-success { background: linear-gradient(180deg, #17956a, #0f7a55); border-color: #0f7a55; color: #fff; }
.btn-success:hover, .btn-success:focus { background: #0d6a4a; border-color: #0d6a4a; color: #fff; }
.btn-outline-success { color: var(--link); border-color: var(--link); } .btn-outline-success:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-danger { color: var(--bad-fg); border-color: var(--bad-fg); background: transparent; } .btn-outline-danger:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.btn-link { color: var(--link); font-weight: 600; text-decoration: none; }
.form-control, .form-select, .input-group-text { background-color: var(--field-bg); color: var(--ink); border-color: var(--field); border-radius: 12px; padding: .65rem .85rem; }
.form-control::placeholder { color: var(--muted); }
.form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2310302a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); } :root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23e9f5f1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); }

.input-group-text { background-color: var(--hover); } .input-group > .form-control { border-radius: 0; }
.input-group > .input-group-text:first-child { border-radius: 12px 0 0 12px; } .input-group > .btn:last-child { border-radius: 0 12px 12px 0; } .input-group > .form-control:last-child { border-radius: 0 12px 12px 0; }
.form-control:focus, .form-select:focus { background-color: var(--field-bg); color: var(--ink); border-color: var(--brand); box-shadow: 0 0 0 .2rem rgba(37, 178, 122, .2); }
.form-text { color: var(--muted); }
.alert { border: 0; border-radius: 14px; } .alert-warning { background: var(--warn-bg); color: var(--warn-fg); } .alert-success { background: var(--ok-bg); color: var(--ok-fg); } .alert-danger { background: var(--bad-bg); color: var(--bad-fg); }
.border { border-color: var(--line) !important; }
.nav-pills { gap: .35rem; flex-wrap: wrap; } .nav-pills .nav-link, .nav-pills button.nav-link { border-radius: 99px; padding: .4rem 1rem; font-weight: 600; color: var(--muted); background: var(--surface); border: 1px solid var(--line); }
.nav-pills .nav-link:hover { color: var(--ink); } .nav-pills .nav-link.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- Phone navigation ---------- */
.bottom-nav { position: fixed; left: 50%; transform: translateX(-50%); z-index: 30; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: min(560px, calc(100% - 20px)); display: flex; gap: .2rem; padding: .35rem; background: var(--topbar); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .12rem; padding: .45rem 0; border-radius: 16px; text-decoration: none; font-size: .8rem; font-weight: 600; color: var(--muted); }
.bottom-nav a.active { background: var(--brand-soft); color: var(--brand); }
.bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Tenant home, paying, pop-ups ---------- */
.rent-card { margin: 0 0 1.25rem; padding: 1.4rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); animation: rise .35s ease-out; }
.rent-card.is-paid { background: var(--card-paid); } .rent-card.is-soon { background: var(--card-soon); } .rent-card.is-late { background: var(--card-late); }
.rent-icon { width: 52px; height: 52px; margin-bottom: .9rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--brand); color: #fff; }
.is-soon .rent-icon { background: var(--sun); color: #3a2a00; } .is-late .rent-icon { background: var(--coral); }
.rent-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rent-label { font-weight: 600; } .rent-amount { font-size: 2.6rem; font-weight: 700; line-height: 1.05; } .rent-sub { margin-top: .25rem; color: var(--muted); }
.is-late .rent-sub { color: var(--bad-fg); } .is-soon .rent-sub { color: var(--warn-fg); }
.method { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem; margin-bottom: .6rem; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 2px solid var(--line); border-radius: 16px; }
.method b { display: block; } .method small { color: var(--muted); } .method.active { border-color: var(--brand); background: var(--brand-soft); } .method:disabled { opacity: .55; cursor: not-allowed; }
.method svg { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bank-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); } .bank-line:last-of-type { border-bottom: 0; }
.bank-line span { color: var(--muted); font-size: .85rem; }
.done-mark { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 1rem; border-radius: 50%; background: var(--ok-bg); color: var(--ok-fg); font-size: 1.8rem; font-weight: 700; } .done-mark.warn { background: var(--warn-bg); color: var(--warn-fg); }
.check { width: 72px; height: 72px; margin-bottom: 1rem; fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw .6s ease-out forwards; } .check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .4s .5s ease-out forwards; }
.overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(3, 20, 18, .6); }
.sheet { width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 1.5rem 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 24px 24px 0 0; animation: rise .2s ease-out; }
.sheet .hint { margin: -.25rem .25rem 1rem; font-size: .85rem; color: var(--muted); }
@media (min-width: 576px) { .overlay { align-items: center; } .sheet { border-radius: 24px; } }
.menu { position: relative; } .menu summary { list-style: none; cursor: pointer; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--muted); font-size: 1.3rem; line-height: 1; }
.menu summary::-webkit-details-marker { display: none; } .menu summary:hover { background: var(--hover); }
.menu-list { position: absolute; right: 0; top: 100%; z-index: 5; min-width: 160px; padding: .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.menu-list button { display: block; width: 100%; padding: .55rem .75rem; text-align: left; border: 0; border-radius: 8px; background: none; color: var(--bad-fg); font-weight: 600; } .menu-list button:hover { background: var(--bad-bg); }
.themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.themes button { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .4rem; border: 2px solid var(--line); border-radius: 14px; background: var(--surface2); color: var(--ink); font-weight: 600; font-size: .85rem; }
.themes button[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .themes svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.seg { display: flex; gap: .25rem; padding: .25rem; background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; }
.seg button { flex: 1; padding: .55rem .5rem; border: 0; border-radius: 11px; background: none; color: var(--muted); font-weight: 600; } .seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ---------- Receipt (also printable) ---------- */
.receipt { padding: 1.5rem; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); max-width: 680px; margin: 0 auto; }
.receipt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding-bottom: 1rem; border-bottom: 2px solid var(--line); }
.receipt-title { font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 1.6rem; font-weight: 700; }
.receipt-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.receipt-parties span, .receipt-table th { color: var(--muted); font-size: .8rem; font-weight: 500; }
.receipt-table { width: 100%; margin-top: .5rem; border-collapse: collapse; } .receipt-table th, .receipt-table td { padding: .55rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.receipt-table td { text-align: right; font-weight: 600; } .receipt-table tr.total td, .receipt-table tr.total th { font-size: 1.15rem; color: var(--ink); border-bottom: 2px solid var(--line); }
.receipt-note { margin: 1rem 0 0; font-size: .8rem; color: var(--muted); }
@media print { body, .receipt { background: #fff !important; color: #000 !important; } .topbar, .app-header, .no-print, .bottom-nav { display: none !important; } .receipt { box-shadow: none; border: 1px solid #bbb; } .receipt * { color: #000 !important; border-color: #bbb !important; } }

a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@keyframes rise { from { transform: translateY(20px); opacity: 0; } } @keyframes grow { from { width: 0; } } @keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .meter span, .auth-card, .rent-card, .sheet { animation: none; } .check circle, .check path { animation: none; stroke-dashoffset: 0; } }

body.narrow main.container, body.narrow .app-header .container { max-width: 600px; }

@media (min-width: 992px) { .bottom-nav { display: none; } }


.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

/* ---- Plan dashboards ---- */
.seg.wrap { flex-wrap: wrap; } .seg.wrap button { flex: 1 1 30%; }
.plan-chip { display: inline-block; margin-left: .5rem; padding: .15rem .6rem; border-radius: 99px; background: var(--brand-soft); color: var(--brand); font: 600 .72rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; vertical-align: middle; }
.qbar { display: flex; gap: .5rem; overflow-x: auto; margin: 0 0 1rem; padding-bottom: .25rem; }
.qbar a { flex: none; padding: .5rem .9rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .85rem; text-decoration: none; }
.qbar a.main { background: var(--brand); border-color: var(--brand); color: #fff; }
.vizgrid { display: grid; gap: 1rem; margin-bottom: 1rem; } @media (min-width: 992px) { .vizgrid { grid-template-columns: 1.5fr 1fr; } }
.panel h3 { font-size: 1rem; margin: 0 0 .15rem; } .panel .sub2 { font-size: .78rem; color: var(--muted); margin-bottom: .6rem; }
.viz { width: 100%; height: auto; display: block; } .viz text { fill: var(--muted); font: 500 11px 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.viz .b-exp { fill: var(--track); } .viz .b-got { fill: var(--brand); } .viz .grid { stroke: var(--line); stroke-width: 1; }
.donut { display: flex; align-items: center; gap: 1rem; } .donut svg { flex: none; width: 130px; height: 130px; }
.donut .ring-bg { stroke: var(--track); } .donut .ring { stroke: var(--brand); } .donut .big { fill: var(--ink); font: 700 22px 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; } .donut text.s { fill: var(--muted); font-size: 11px; }
.age { display: grid; grid-template-columns: 1fr auto; gap: .15rem .75rem; font-size: .85rem; margin-bottom: .6rem; } .age .bar { grid-column: 1 / -1; height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; } .age .bar i { display: block; height: 100%; background: var(--coral); border-radius: 99px; }
.health { display: grid; gap: .6rem; } .health .h-row { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; align-items: center; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.health .h-row small { color: var(--muted); } .health .bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--track); overflow: hidden; } .health .bar i { display: block; height: 100%; background: var(--brand); }
@media (min-width: 992px) { .health { grid-template-columns: repeat(2, 1fr); } }
.feed { list-style: none; margin: 0; padding: 0; } .feed li { display: flex; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--line); font-size: .86rem; } .feed li:first-child { border-top: 0; }
.feed .dot { flex: none; width: 9px; height: 9px; margin-top: .35rem; border-radius: 50%; background: var(--brand); } .feed small { color: var(--muted); display: block; }
.locked { position: relative; opacity: .75; border-style: dashed; } .locked .lock-note { display: flex; gap: .6rem; align-items: center; font-size: .86rem; }
.locked .ghost { height: 56px; margin-top: .7rem; border-radius: 12px; background: repeating-linear-gradient(135deg, var(--track) 0 8px, transparent 8px 16px); opacity: .6; }

/* ---- Plans page ---- */
.plans { display: grid; gap: .9rem; grid-template-columns: 1fr; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .plans { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .plans { grid-template-columns: repeat(5, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.plan.rec { border: 2px solid var(--brand); } .plan.cur { background: var(--brand-soft); }
.plan .badge-rec { position: absolute; top: -.7rem; right: 1rem; padding: .15rem .6rem; border-radius: 99px; background: var(--brand); color: #fff; font: 700 .7rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.plan h3 { margin: 0; font-size: 1.15rem; } .plan .tag { color: var(--muted); font-size: .82rem; }
.plan .price { margin: .7rem 0 .1rem; font: 700 2rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; line-height: 1; } .plan .price small { font: 500 .85rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--muted); }
.plan .save { min-height: 1.2rem; font-size: .8rem; color: var(--brand); font-weight: 600; }
.plan .limits { margin: .6rem 0; padding: .5rem .6rem; border-radius: 12px; background: var(--surface2); font-size: .82rem; }
.plan ul { list-style: none; margin: 0 0 1rem; padding: 0; flex: 1; font-size: .86rem; } .plan li { padding: .22rem 0 .22rem 1.3rem; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 9px; height: 5px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg); }
.plan li.soon { color: var(--muted); } .plan li.soon::before { border-color: var(--muted); opacity: .6; } .plan li.soon i { font-style: normal; font-size: .68rem; margin-left: .3rem; padding: .05rem .4rem; border-radius: 99px; background: var(--idle-bg); color: var(--idle-fg); }
.cmp-wrap { overflow-x: auto; } .cmp { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .86rem; } .cmp th, .cmp td { padding: .6rem .5rem; border-top: 1px solid var(--line); text-align: center; } .cmp th:first-child, .cmp td:first-child { text-align: left; }
.cmp thead th { border-top: 0; font-size: .8rem; } .cmp .y { color: var(--brand); font-weight: 700; } .cmp .n { color: var(--muted); } .cmp tr.cur-col td.c, .cmp th.c.cur { background: var(--brand-soft); }

/* =================== v2 refinements (these win over the older rules above) =================== */
.card, .list-group, .panel, .pcard, .stat, .receipt { border-radius: var(--radius); }
.list-group { overflow: hidden; }
.panel { padding: 1.15rem; }
.list-group-item { padding: 1rem 1.1rem; transition: background .15s; }
.list-group-item-action:hover, .trow:hover { background: var(--hover); }
.section-title { display: flex; align-items: center; gap: .5rem; }

/* clickable cards lift a little */
.pcard, .plan, .h-row, .stat, .method { transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.plan:hover, .h-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }

/* figures */
.stats { gap: .85rem; }
.stat { padding: 1rem; border-radius: 18px; }
.stat .ic { width: 42px; height: 42px; border-radius: 14px; }
.stat .l { font-size: .74rem; letter-spacing: .01em; } .stat .v { font-size: 1.3rem; }
.stats.three { grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.stats.three .stat { flex-direction: column; align-items: flex-start; gap: .6rem; padding: .85rem; }
.stats.three .stat .v { font-size: 1.1rem; }
@media (min-width: 768px) { .stats.three .stat { flex-direction: row; align-items: center; gap: .8rem; padding: 1rem; } .stats.three .stat .v { font-size: 1.3rem; } }

/* ---------- Hero card and the measuring line ---------- */
.hero-card { position: relative; overflow: hidden; margin-bottom: 1rem; padding: 1.5rem 1.4rem 1.3rem; border-radius: 28px; color: #fff; box-shadow: var(--shadow-up);
  background: radial-gradient(560px 260px at 100% 0%, rgba(200, 245, 110, .2), transparent 70%), radial-gradient(380px 220px at 0% 110%, rgba(95, 224, 168, .18), transparent 70%), linear-gradient(135deg, var(--hero-a), var(--hero-b)); }
.hero-card::after { content: ''; position: absolute; right: -40px; top: -40px; width: 190px; height: 190px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 0 0 28px rgba(255, 255, 255, .03), 0 0 0 58px rgba(255, 255, 255, .02); pointer-events: none; }
.hero-card .eyebrow { position: relative; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; opacity: .78; }
.hero-card .big { position: relative; margin: .4rem 0 .15rem; font: 700 clamp(2.5rem, 8vw, 3.6rem)/1 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.03em; }
.hero-card .of { position: relative; opacity: .82; font-size: .95rem; }
.gauge { position: relative; margin-top: 1.1rem; padding-top: 1.7rem; }
.gauge-flag { position: absolute; top: 0; transform: translateX(-50%); padding: .12rem .55rem; border-radius: 99px; background: var(--accent); color: #0a2a20; font: 700 .72rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; white-space: nowrap; transition: left 1s cubic-bezier(.2, .7, .2, 1); }
.gauge-flag::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; transform: translateX(-50%) rotate(45deg); background: inherit; border-radius: 2px; }
.meter { position: relative; display: flex; height: 14px; margin: .5rem 0 .45rem; border-radius: 99px; background: var(--track); overflow: hidden; }
.meter::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .55) calc(25% - 1px) 25%); opacity: .55; }
.meter span { display: block; height: 100%; animation: grow 1s cubic-bezier(.2, .7, .2, 1); }
.meter .got { background: linear-gradient(90deg, var(--brand), #3fd39b); border-radius: 99px; }
.meter .wait { background: repeating-linear-gradient(135deg, var(--sun) 0 6px, #f6cf85 6px 12px); }
.hero-card .meter { height: 18px; background: rgba(255, 255, 255, .14); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25); }
.hero-card .meter .got { background: linear-gradient(90deg, #7be08f, var(--accent)); box-shadow: 0 0 18px rgba(200, 245, 110, .6); }
.scale { display: flex; justify-content: space-between; font-size: .8rem; opacity: .85; letter-spacing: .01em; }
.hero-card .legend { margin-top: .75rem; color: rgba(255, 255, 255, .85); gap: .35rem 1.1rem; }
.hero-card .legend b { color: #fff; margin-left: .25rem; }
.hero-card .plan-chip { background: rgba(255, 255, 255, .14); color: #fff; }
.legend { gap: .35rem 1.1rem; }

/* loading shimmer */
.skel { position: relative; overflow: hidden; border-radius: 12px; background: var(--track); min-height: 1rem; }
.skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .45) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.3s infinite; }
.hero-card .skel { background: rgba(255, 255, 255, .14); } .hero-card .skel::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .22) 50%, transparent 80%); }
.stat.skel { height: 74px; border: 0; }

/* quick actions */
.qbar { gap: .55rem; padding: .1rem .1rem .45rem; scrollbar-width: none; } .qbar::-webkit-scrollbar { display: none; }
.qbar a { padding: .55rem 1rem; box-shadow: var(--shadow); transition: transform .15s, background .2s; } .qbar a:hover { transform: translateY(-1px); background: var(--hover); }
.qbar a.main { background: linear-gradient(180deg, var(--brand), #0a6e4b); color: #fff; box-shadow: 0 10px 20px -12px rgba(10, 110, 75, .8); }
.qbar a.main:hover { background: linear-gradient(180deg, var(--brand), #0a6e4b); }

/* ---------- Status labels ---------- */
.chip { padding: .24rem .65rem; font-size: .73rem; letter-spacing: .01em; }
.avatar { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); }

/* ---------- Buttons and fields ---------- */
.btn { border-radius: 14px; font-weight: 600; transition: transform .12s ease, box-shadow .2s, background .2s, border-color .2s; }
.btn:active:not(:disabled) { transform: scale(.975); }
.btn-lg { padding: .85rem 1.2rem; font-size: 1.02rem; border-radius: 16px; }
.btn-success { background: linear-gradient(180deg, #129a6a, #0b7550); border-color: #0b7550; box-shadow: 0 10px 22px -14px rgba(11, 117, 80, .9), inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn-success:hover, .btn-success:focus { background: linear-gradient(180deg, #11936a, #09694a); border-color: #09694a; }
.btn-outline-success { background: transparent; }
.form-control, .form-select, .input-group-text { padding: .72rem .95rem; border-radius: 14px; }
.input-group > .input-group-text:first-child { border-radius: 14px 0 0 14px; } .input-group > .btn:last-child, .input-group > .form-control:last-child { border-radius: 0 14px 14px 0; }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(14, 138, 94, .16); }
.form-label { font-weight: 600; font-size: .88rem; }
.thead { text-transform: uppercase; letter-spacing: .05em; }
.tabs button { transition: color .2s; }
.nav-pills .nav-link.active { background: var(--nav-on); border-color: var(--nav-on); color: var(--nav-on-fg); }

/* ---------- Phone navigation ---------- */
.bottom-nav { width: min(520px, calc(100% - 24px)); padding: .4rem; border-radius: 26px; gap: .15rem; background: var(--topbar); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); box-shadow: var(--shadow-up); }
.bottom-nav a { padding: .5rem 0 .42rem; border-radius: 20px; font-size: clamp(.72rem, 3.55vw, .8rem); line-height: 1.1; white-space: nowrap; min-width: 0; transition: background .2s, color .2s, transform .15s; }
.bottom-nav a:active { transform: scale(.94); }
/* The smallest phones (about 320px wide): tighten the bar so "Properties" still fits at a readable size */
@media (max-width: 340px) { .bottom-nav { width: calc(100% - 12px); padding: .3rem; gap: 0; } .bottom-nav a { letter-spacing: -.015em; } }
.bottom-nav a.active { background: var(--nav-on); color: var(--nav-on-fg); box-shadow: 0 8px 16px -10px rgba(6, 40, 31, .8); }

/* ---------- Tenant home ---------- */
.rent-card { position: relative; overflow: hidden; padding: 1.6rem; border-radius: 28px; box-shadow: var(--shadow-up); }
.rent-card::after { content: ''; position: absolute; right: -50px; top: -50px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, .35); pointer-events: none; }
:root[data-theme="dark"] .rent-card::after { background: rgba(255, 255, 255, .04); } 
.rent-amount { font-size: clamp(2.6rem, 9vw, 3.2rem); }
.method { border-radius: 18px; } .method:hover:not(:disabled) { border-color: var(--brand); }
.sheet { border-radius: 28px 28px 0 0; box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, .6); }
.overlay { backdrop-filter: blur(3px); }

/* ---------- Charts ---------- */
.viz .b-exp { fill: var(--track); } .viz .b-got { fill: var(--brand); }
.donut .ring { stroke: var(--brand); transition: stroke-dasharray 1s cubic-bezier(.2, .7, .2, 1); }
.health .h-row { border-radius: 18px; }

/* ---------- Plans: the recommended plan stands out ---------- */
.plan { border-radius: 24px; padding: 1.25rem; }
.plan.rec { border: 0; color: #fff; box-shadow: var(--shadow-up);
  background: radial-gradient(360px 200px at 100% 0%, rgba(200, 245, 110, .22), transparent 70%), linear-gradient(160deg, var(--hero-a), var(--hero-b)); }
.plan.rec .tag, .plan.rec .price small { color: rgba(255, 255, 255, .72); } .plan.rec .save { color: var(--accent); }
.plan.rec .limits { background: rgba(255, 255, 255, .1); color: #fff; } .plan.rec li::before { border-color: var(--accent); }
.plan.rec .btn-success { background: var(--accent); border-color: var(--accent); color: #0a2a20; box-shadow: none; }
.plan .badge-rec { background: var(--accent); color: #0a2a20; }
.plan.cur { border-color: var(--brand); }

/* ---------- Motion: sections rise in one after another ---------- */
main.container > * { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
main.container > *:nth-child(2) { animation-delay: .05s; } main.container > *:nth-child(3) { animation-delay: .1s; } main.container > *:nth-child(4) { animation-delay: .15s; }
main.container > *:nth-child(5) { animation-delay: .2s; } main.container > *:nth-child(6) { animation-delay: .25s; } main.container > *:nth-child(n+7) { animation-delay: .3s; }
@keyframes shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { main.container > *, .gauge-flag, .donut .ring, .skel::after { animation: none; transition: none; } }
@media print { .hero-card, .topbar { display: none !important; } }

.plan.rec .btn:disabled, .plan.rec .btn.disabled { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .25); color: #fff; opacity: 1; box-shadow: none; }
.plan .btn { margin-top: auto; }

/* ================= AURORA THEME =================
   Same pages, same layout. Dark is the signature look (mesh glow + frosted glass);
   light is "Pearl", the same idea on a pastel mesh. Everything below only restyles. */
:root, :root[data-theme="dark"] { color-scheme: dark;
  --bg: #050f17; --surface: rgba(255,255,255,.07); --surface2: rgba(255,255,255,.045); --ink: #eaf6f6; --muted: #9db6bd; --line: rgba(255,255,255,.12);
  --brand: #7bf0cf; --brand-soft: rgba(123,240,207,.14); --link: #7bf0cf; --topbar: rgba(8,18,30,.62);
  --field-bg: rgba(255,255,255,.06); --field: rgba(255,255,255,.18); --hover: rgba(255,255,255,.09); --track: rgba(255,255,255,.1);
  --shadow: 0 18px 40px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.1);
  --shadow-up: 0 26px 50px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  --hero-a: #123f55; --hero-b: #1a1650; --accent: #7bf0cf; --nav-on: rgba(255,255,255,.16); --nav-on-fg: #fff;
  --ok-bg: rgba(123,240,207,.16); --ok-fg: #7bf0cf; --warn-bg: rgba(255,200,110,.16); --warn-fg: #ffd68a; --bad-bg: rgba(255,130,110,.16); --bad-fg: #ff9d8c;
  --idle-bg: rgba(255,255,255,.1); --idle-fg: #b8cbd0;
  --card-paid: rgba(123,240,207,.12); --card-soon: rgba(255,200,110,.12); --card-late: rgba(255,130,110,.13); --vacant: rgba(255,255,255,.05);
  --av0-bg: rgba(123,240,207,.18); --av0-fg: #7bf0cf; --av1-bg: rgba(255,200,110,.18); --av1-fg: #ffd68a; --av2-bg: rgba(110,160,255,.2); --av2-fg: #a9c6ff;
  --av3-bg: rgba(255,130,180,.2); --av3-fg: #ffa8cc; --av4-bg: rgba(160,140,255,.22); --av4-fg: #c4b8ff;
  --sun: #ffb85c; --coral: #ff8a78; --radius: 24px; }
:root[data-theme="light"] { color-scheme: only light;
  --bg: #eef4f6; --surface: rgba(255,255,255,.66); --surface2: rgba(255,255,255,.5); --ink: #14262c; --muted: #5b7078; --line: rgba(255,255,255,.95);
  --brand: #0e9a82; --brand-soft: rgba(79,216,182,.2); --link: #0b8470; --topbar: rgba(255,255,255,.6);
  --field-bg: rgba(255,255,255,.85); --field: rgba(20,38,44,.16); --hover: rgba(255,255,255,.8); --track: rgba(20,38,44,.09);
  --shadow: 0 18px 40px -26px rgba(40,70,90,.4), inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-up: 0 26px 50px -26px rgba(40,70,110,.45), inset 0 1px 0 #fff;
  --hero-a: #dff7f0; --hero-b: #e6e2ff; --accent: #4fd8b6; --nav-on: #14262c; --nav-on-fg: #fff;
  --ok-bg: rgba(79,216,182,.22); --ok-fg: #0a6e5c; --warn-bg: rgba(255,185,90,.26); --warn-fg: #8a5a00; --bad-bg: rgba(255,120,100,.2); --bad-fg: #b3331f;
  --idle-bg: rgba(20,38,44,.07); --idle-fg: #4b6068;
  --card-paid: rgba(79,216,182,.18); --card-soon: rgba(255,185,90,.2); --card-late: rgba(255,120,100,.16); --vacant: rgba(255,255,255,.5);
  --av0-bg: rgba(79,216,182,.28); --av0-fg: #0a6e5c; --av1-bg: rgba(255,185,90,.3); --av1-fg: #8a5a00; --av2-bg: rgba(110,160,255,.26); --av2-fg: #2a4f9a;
  --av3-bg: rgba(255,130,180,.26); --av3-fg: #a1315a; --av4-bg: rgba(160,140,255,.26); --av4-fg: #5a3fa3; }

/* the mesh itself */
body, :root[data-theme="dark"] body {
  background:
    radial-gradient(760px 520px at 0% -6%, rgba(123,240,207,.20), transparent 70%),
    radial-gradient(700px 520px at 100% 4%, rgba(123,114,255,.26), transparent 70%),
    radial-gradient(640px 480px at 55% 108%, rgba(255,170,100,.10), transparent 70%), var(--bg);
  background-attachment: fixed; }
:root[data-theme="light"] body {
  background:
    radial-gradient(760px 520px at 0% -6%, rgba(110,230,200,.5), transparent 70%),
    radial-gradient(700px 520px at 100% 4%, rgba(160,150,255,.42), transparent 70%),
    radial-gradient(640px 480px at 55% 108%, rgba(255,200,150,.38), transparent 70%), var(--bg);
  background-attachment: fixed; }

/* frosted glass everywhere a surface sits on the mesh */
.card, .list-group, .panel, .pcard, .stat, .plan, .method, .health .h-row, .rent-card, .receipt, .house-tile, .vacant-row, .cmp-wrap, .note {
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.card, .list-group, .panel, .pcard, .stat, .plan, .receipt { border-radius: 26px; }
.list-group-item { background: transparent; }
.trow:hover, .list-group-item-action:hover { background: var(--hover); }
.topbar { border-bottom-color: var(--line); -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5); }
.topnav { background: var(--surface2); border-color: var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.topnav a.active { background: var(--nav-on); color: var(--nav-on-fg); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 8px 18px -10px rgba(0,0,0,.5); }
:root[data-theme="light"] .topnav a.active { box-shadow: 0 8px 18px -10px rgba(20,38,44,.6); }
.brand svg { filter: drop-shadow(0 0 10px rgba(123,240,207,.45)); }
.iconbtn, .app-header .back { background: var(--surface); border-color: var(--line); }

/* light-weight numerals, the Aurora signature */
.hero-amount, .rent-amount, .stat .v, .hero-card .big, .plan .price b { font-weight: 300 !important; letter-spacing: -.035em; }
.stat .v { font-weight: 400 !important; }
h1, .app-header h1 { font-weight: 600; }
.app-header h1 { letter-spacing: -.03em; }

/* the hero card with the measuring line */
.hero-card { color: var(--ink); border: 1px solid var(--line); border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.11), rgba(255,255,255,.04)); box-shadow: var(--shadow-up);
  -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); }
:root[data-theme="light"] .hero-card { background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(255,255,255,.5)); }
.hero-card::after { background: radial-gradient(closest-side, rgba(123,114,255,.4), transparent); opacity: .8; }
:root[data-theme="light"] .hero-card::after { background: radial-gradient(closest-side, rgba(140,125,255,.35), transparent); }
.hero-card .eyebrow { opacity: .7; letter-spacing: .12em; }
.hero-card .of, .hero-card .legend { color: var(--muted); }
.hero-card .legend b { color: var(--ink); }
.hero-card .plan-chip { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.gauge-flag { background: linear-gradient(90deg, #7bf0cf, #7b72ff); color: #04181b; box-shadow: 0 6px 18px -6px rgba(123,114,255,.8); }
.hero-card .meter, .meter { background: var(--track); box-shadow: inset 0 1px 3px rgba(0,0,0,.25); }
.hero-card .meter .got, .meter .got { background: linear-gradient(90deg, #7bf0cf, #7b72ff); box-shadow: 0 0 22px rgba(123,114,255,.65), 0 0 8px rgba(123,240,207,.5); }
.hero-card .meter .wait, .meter .wait { background: repeating-linear-gradient(135deg, #ffb85c 0 6px, #ffd699 6px 12px); opacity: .92; }
.meter::after { background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.55) calc(25% - 1px) 25%); opacity: .7; }
:root[data-theme="light"] .meter::after { background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255,255,255,.95) calc(25% - 1px) 25%); }
.scale { color: var(--muted); }

/* buttons, fields, chips */
.btn-success, .plan.rec .btn-success { background: linear-gradient(110deg, #7bf0cf, #7b72ff); border: 0; color: #04181b; font-weight: 700;
  box-shadow: 0 12px 26px -12px rgba(123,114,255,.85), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-success:hover, .btn-success:focus { background: linear-gradient(110deg, #93f6da, #918aff); color: #04181b; }
.btn-success:disabled, .btn-success.disabled { background: var(--surface); color: var(--muted); box-shadow: none; border: 1px solid var(--line); }
.btn-outline-success { color: var(--brand); border-color: rgba(123,240,207,.45); background: transparent; }
.btn-outline-success:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
:root[data-theme="light"] .btn-outline-success { border-color: rgba(14,154,130,.5); }
.form-control, .form-select, .input-group-text { background-color: var(--field-bg); color: var(--ink); border-color: var(--field); border-radius: 16px; }
.form-control:focus, .form-select:focus { border-color: #7bf0cf; box-shadow: 0 0 0 4px rgba(123,240,207,.2); background-color: var(--field-bg); color: var(--ink); }
.form-select option { background: #0e1a2b; color: #eaf6f6; }
:root[data-theme="light"] .form-select option { background: #fff; color: #14262c; }
.nav-pills .nav-link.active, .tabs button[aria-selected="true"] { background: var(--nav-on); color: var(--nav-on-fg); }
.chip { border: 1px solid transparent; }
.chip-paid, .chip-confirmed { border-color: rgba(123,240,207,.3); }
.chip-partial, .chip-pending { border-color: rgba(255,200,110,.3); }
.chip-unpaid, .chip-waiting { border-color: rgba(255,255,255,.14); }
.chip-overdue, .chip-failed, .chip-rejected { border-color: rgba(255,130,110,.3); }

/* floating glass dock */
.bottom-nav { background: var(--topbar); border-color: var(--line); border-radius: 99px; -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--shadow-up); }
.bottom-nav a { border-radius: 99px; }
.bottom-nav a.active { background: var(--nav-on); color: var(--nav-on-fg); }

/* sheets and menus need a solid base so text stays readable over content */
.sheet { background: #0e1a2b; background-image: linear-gradient(160deg, rgba(123,240,207,.10), rgba(123,114,255,.12)); border: 1px solid rgba(255,255,255,.14); border-radius: 30px 30px 0 0; color: var(--ink); }
:root[data-theme="light"] .sheet { background: #f7fbfc; background-image: linear-gradient(160deg, rgba(110,230,200,.2), rgba(160,150,255,.18)); border-color: #fff; }
.overlay { background: rgba(2,8,14,.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.menu-list { background: #0e1a2b; border: 1px solid rgba(255,255,255,.14); }
:root[data-theme="light"] .menu-list { background: #fff; border-color: rgba(20,38,44,.12); }

/* member cards with status tint */
.rent-card { border: 1px solid var(--line); }
.rent-card::after { opacity: .6; }
.pcard { border-color: var(--line); }

/* plans */
.plan.rec { background: linear-gradient(160deg, rgba(123,240,207,.18), rgba(123,114,255,.26)); border-color: rgba(123,240,207,.4); color: var(--ink); box-shadow: 0 30px 60px -30px rgba(123,114,255,.6); }
.plan.rec .tag, .plan.rec .price small, .plan.rec .limits { color: var(--muted); }
.plan .badge-rec { background: linear-gradient(90deg, #7bf0cf, #7b72ff); color: #04181b; }
.plan.cur { box-shadow: 0 0 0 2px rgba(123,240,207,.55); }
.plan.rec .btn:disabled, .plan.rec .btn.disabled { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.cmp thead th { background: var(--surface2); }

/* signed-out screens */
body.auth .app-header { background:
    radial-gradient(520px 320px at 0% 0%, rgba(123,240,207,.32), transparent 70%),
    radial-gradient(560px 360px at 100% 20%, rgba(123,114,255,.45), transparent 70%),
    linear-gradient(160deg, #0d2a3d, #150f3d); }
body.auth .app-header, body.auth .app-header h1 { color: #fff; }
.auth-card { background: var(--surface); border-color: var(--line); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.code-input { background: var(--field-bg); color: var(--ink); border-color: var(--field); }

/* loading shimmer reads on glass */
.skel { background: rgba(255,255,255,.08); }
:root[data-theme="light"] .skel { background: rgba(20,38,44,.07); }
@media print { body { background: #fff !important; } .card, .panel, .receipt { backdrop-filter: none; } }
.hero-card::after { border: 0; box-shadow: none; width: 320px; height: 320px; right: -90px; top: -120px; }
.rent-card::after { border: 0; box-shadow: none; opacity: .5; }
.auth-card { background: rgba(14,26,43,.78); }
:root[data-theme="light"] .auth-card { background: rgba(255,255,255,.93); }
.form-select { background-repeat: no-repeat; background-position: right .9rem center; background-size: 14px 10px; padding-right: 2.4rem; }
:root[data-theme="dark"] .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%239db6bd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); }

/* Kora wordmark on signed-out screens */
.brand-lock { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; font: 700 1.5rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.03em; color: #fff; }
.brand-lock svg { width: 44px; height: 44px; filter: drop-shadow(0 0 14px rgba(123,240,207,.5)); }
.app-header[data-mark] .container::before { display: none; }

/* calm, bluish top edge so the phone status bar blends in (no green tint) */
html { background: #0a1424; }
:root[data-theme="light"] { background: #e8f1f3; }
:root, :root[data-theme="dark"] { --topbar: rgba(10,20,36,.9); }
:root[data-theme="light"] { --topbar: rgba(232,241,243,.88); }
body, :root[data-theme="dark"] body {
  background:
    radial-gradient(760px 520px at 0% 14%, rgba(123,240,207,.16), transparent 70%),
    radial-gradient(700px 520px at 100% 4%, rgba(123,114,255,.24), transparent 70%),
    radial-gradient(640px 480px at 55% 108%, rgba(255,170,100,.10), transparent 70%), var(--bg);
  background-attachment: fixed; }


/* ================= Ask Kora (helper chat), the guided tour and larger text =================
   Made for people who are not used to apps: big writing, big buttons, plain colours. */
:root, :root[data-theme="dark"] { --solid: #0e1a2b; --solid-line: rgba(255,255,255,.16); }
:root[data-theme="light"] { --solid: #f7fbfc; --solid-line: rgba(20,38,44,.14); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.kh-btn { position: fixed; z-index: 35; right: 14px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: .55rem;
  min-height: 56px; padding: 0 1.25rem 0 1rem; border: 0; border-radius: 99px; font: 700 1.05rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; color: #04181b;
  background: linear-gradient(110deg, #7bf0cf, #7b72ff); box-shadow: 0 16px 34px -12px rgba(123,114,255,.9), inset 0 1px 0 rgba(255,255,255,.4); }
.kh-btn svg { width: 26px; height: 26px; }
.kh-btn:active { transform: scale(.97); }
.kh-btn.open { opacity: 0; pointer-events: none; }
@media (min-width: 992px) { .kh-btn { right: 24px; bottom: 24px; } }

.kh { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; height: min(86vh, 680px); display: flex; flex-direction: column; background: var(--solid); color: var(--ink);
  border: 1px solid var(--solid-line); border-bottom: 0; border-radius: 28px 28px 0 0; box-shadow: 0 -24px 60px -20px rgba(0,0,0,.6); overflow: hidden; }
.kh[hidden] { display: none; }
.kh::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(420px 220px at 0% 0%, rgba(123,240,207,.14), transparent 70%), radial-gradient(420px 260px at 100% 0%, rgba(123,114,255,.18), transparent 70%); }
@media (min-width: 992px) { .kh { left: auto; right: 24px; bottom: 24px; width: 430px; height: min(80vh, 690px); border-radius: 28px; border-bottom: 1px solid var(--solid-line); } }
.kh-head { position: relative; display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem .8rem 1.2rem; border-bottom: 1px solid var(--solid-line); }
.kh-title { flex: 1; min-width: 0; line-height: 1.2; }
.kh-title b { display: block; font: 700 1.35rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.02em; }
.kh-title small { color: var(--muted); font-size: .95rem; }
.kh-tool { min-height: 46px; padding: 0 .9rem; border: 1px solid var(--solid-line); border-radius: 99px; background: transparent; color: var(--ink); font: 600 .95rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.kh-tool[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.kh-close { background: var(--ink); color: var(--solid); border-color: transparent; font-weight: 700; }
.kh-log { position: relative; flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; -webkit-overflow-scrolling: touch; }
.kh-msg { max-width: 92%; padding: .85rem 1rem; border-radius: 20px; font-size: 1.1rem; line-height: 1.5; }
.kh-msg p { margin: 0 0 .5rem; } .kh-msg p:last-child { margin: 0; }
.kh-msg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--solid-line); border-bottom-left-radius: 6px; }
.kh-msg.me { align-self: flex-end; background: linear-gradient(110deg, #7bf0cf, #7b72ff); color: #04181b; font-weight: 600; border-bottom-right-radius: 6px; }
.kh-msg.typing { color: var(--muted); font-style: italic; }
.kh-acts { display: grid; gap: .5rem; margin-top: .8rem; }
.kh-acts .btn { min-height: 52px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.kh-chips { position: relative; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem .6rem; max-height: 38%; overflow-y: auto; }
.kh-chip { min-height: 48px; padding: .5rem 1rem; border: 1.5px solid var(--brand); border-radius: 99px; background: transparent; color: var(--brand); font: 600 1.02rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; text-align: left; }
.kh-chip:active { background: var(--brand-soft); }
.kh-form { position: relative; display: flex; gap: .5rem; padding: .7rem 1rem calc(.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--solid-line); }
.kh-form input { flex: 1; min-width: 0; min-height: 56px; padding: 0 1rem; font-size: 1.15rem; border: 1.5px solid var(--field); border-radius: 18px; background: var(--field-bg); color: var(--ink); }
.kh-form input:focus { outline: none; border-color: #7bf0cf; box-shadow: 0 0 0 4px rgba(123,240,207,.22); }
.kh-form .btn { min-height: 56px; padding: 0 1.4rem; font-size: 1.1rem; }

.kt-shield { position: fixed; inset: 0; z-index: 1000; background: transparent; }
.kt-hole { position: fixed; z-index: 1001; display: none; border-radius: 20px; pointer-events: none; border: 3px solid #7bf0cf;
  box-shadow: 0 0 0 100vmax rgba(2,8,14,.78), 0 0 26px 4px rgba(123,240,207,.55); transition: left .25s, top .25s, width .25s, height .25s; }
.kt-card { position: fixed; z-index: 1002; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin: 0 auto; padding: .8rem 1.1rem 1rem;
  background: var(--solid); color: var(--ink); border: 1px solid var(--solid-line); border-radius: 24px; box-shadow: 0 30px 70px -20px rgba(0,0,0,.75); }
.kt-card { bottom: auto; top: auto; transition: top .35s cubic-bezier(.2,.8,.2,1), transform .2s ease-in, opacity .2s ease-in; will-change: transform, opacity; }
.kt-card.kt-leave-left { transform: translateX(-115%); opacity: 0; }
.kt-card.kt-leave-right { transform: translateX(115%); opacity: 0; }
.kt-card.kt-enter-right { transform: translateX(115%); opacity: 0; transition: none; }
.kt-card.kt-enter-left { transform: translateX(-115%); opacity: 0; transition: none; }
.kt-card:not(.kt-enter-right):not(.kt-enter-left):not(.kt-leave-left):not(.kt-leave-right) { transition: top .35s cubic-bezier(.2,.8,.2,1), transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease-out; }
@media (prefers-reduced-motion: reduce) { .kt-card { transition: none !important; } }
.kt-top-row { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.kt-count { color: var(--muted); font-weight: 600; font-size: .9rem; letter-spacing: .04em; }
.kt-card h2 { margin: .1rem 0 .3rem; font: 700 1.3rem/1.25 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: -.02em; }
.kt-card p { margin: 0 0 .9rem; font-size: 1.02rem; line-height: 1.45; color: var(--ink); opacity: .9; }
.kt-btns { display: flex; gap: .5rem; } .kt-btns .btn { flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center; font-size: 1.02rem; padding: 0 .6rem; }
.kt-btns .btn-success { flex: 1.4; }
.kt-skip { min-height: 40px; padding: 0 .2rem 0 .8rem; border: 0; background: none; color: var(--muted); font: 600 .95rem 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; }
@media (prefers-reduced-motion: reduce) { .kt-hole { transition: none; } }
@media print { .kh, .kh-btn, .kt-card, .kt-hole, .kt-shield { display: none !important; } }

/* Received bar: one solid blue */
.hero-card .meter .got, .meter .got { background: #5b8dff; box-shadow: 0 0 18px rgba(91,141,255,.55); }
.legend i[style*="--accent"] { background: #5b8dff !important; }

/* Assistants */
.asst-card .chip { font-size: .78rem; }
.form-check { margin-bottom: .35rem; }
.asst-card .chip { display: inline-block; padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface2); }
#logout { border: 1px solid var(--line); color: var(--ink); background: var(--surface2); padding: .6rem 1.2rem; border-radius: 14px; }

/* Co-manager */
.role-banner { padding: .55rem 1rem; text-align: center; font-size: .86rem; color: var(--ink); background: linear-gradient(90deg, rgba(123,240,207,.16), rgba(123,114,255,.2)); border-bottom: 1px solid var(--line); }
.cm-card { border-color: rgba(123,114,255,.45); }
.chip-reversed { background: var(--bad-bg); color: var(--bad-fg); border-color: rgba(255,130,110,.3); text-decoration: line-through; }
.receipt-void { border: 2px solid var(--bad-fg); color: var(--bad-fg); border-radius: 12px; padding: .7rem .9rem; margin-bottom: 1rem; font-weight: 700; }
.support-banner { background: linear-gradient(90deg, rgba(255,200,110,.2), rgba(255,130,110,.18)); }

/* ---- Plans and prices on the start and sign-up screens ---- */
body.auth #plans-title, body.auth #plans { width: 100%; max-width: 780px; margin-left: auto; margin-right: auto; }
body.auth #plans .seg { margin-left: auto; margin-right: auto; }
body.auth #plans .plans { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
body.auth #plans .plan { min-width: 0; }
@media (min-width: 992px) {
  /* The left panel stays in place while the right side scrolls through the plans */
  body.auth { align-items: start; }
  body.auth .app-header { position: sticky; top: 0; height: 100vh; }
  body.auth main.container { justify-content: flex-start; padding-top: 3rem; padding-bottom: 3rem; }
}

/* ---- Smoother scrolling ----
   The background glow is painted once on a fixed layer, instead of being repainted on every scroll step.
   Content boxes no longer blur what is behind them (the soft background made the blur nearly invisible, but it was
   recalculated for every card while scrolling). The top bar, bottom menu and pop-ups keep their frosted look. */
:root, :root[data-theme="dark"] {
  --mesh: radial-gradient(760px 520px at 0% 14%, rgba(123,240,207,.16), transparent 70%),
          radial-gradient(700px 520px at 100% 4%, rgba(123,114,255,.24), transparent 70%),
          radial-gradient(640px 480px at 55% 108%, rgba(255,170,100,.10), transparent 70%); }
:root[data-theme="light"] {
  --mesh: radial-gradient(760px 520px at 0% -6%, rgba(110,230,200,.5), transparent 70%),
          radial-gradient(700px 520px at 100% 4%, rgba(160,150,255,.42), transparent 70%),
          radial-gradient(640px 480px at 55% 108%, rgba(255,200,150,.38), transparent 70%); }
html, :root[data-theme="light"] { background: var(--bg); }
/* The body has a solid colour (iPhone Safari colours the clock-and-battery bar from it; transparent showed dark).
   "isolation" keeps the glow layer above that colour and below the page. */
body, :root[data-theme="dark"] body, :root[data-theme="light"] body { background: var(--bg) !important; isolation: isolate; }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--mesh), var(--bg); transform: translateZ(0); }
.card, .list-group, .panel, .pcard, .stat, .plan, .method, .health .h-row, .rent-card, .receipt, .house-tile, .vacant-row, .cmp-wrap, .note, .hero-card {
  -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Tenants list: contact buttons side by side */
.trow .act.tenant-acts { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
/* Activity lists keep a fixed height and scroll inside, so the page does not keep growing */
.feed-scroll { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; padding-right: .35rem; scrollbar-width: thin; }
.feed-scroll::-webkit-scrollbar { width: 6px; } .feed-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

/* Install guide for iPhone/iPad: drawings of Safari's buttons with the one to tap highlighted */
.sheet.ig { padding-top: 1.25rem; }
.ig-step { margin-bottom: 1rem; }
.ig-cap { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; font-size: .95rem; }
.ig-num { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; background: var(--brand); color: #04201a; }
.ig-bar, .ig-list, .ig-add, .ig-home { background: rgba(127,140,150,.16); border: 1px solid var(--line); border-radius: 18px; }
.ig-bar { display: flex; align-items: center; justify-content: space-around; gap: .4rem; padding: .45rem .6rem; }
.ig-url { flex: 1; min-width: 0; text-align: center; font-size: .8rem; color: var(--muted); background: rgba(127,140,150,.16); border-radius: 12px; padding: .35rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ig-btn { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.ig-on { position: relative; color: #0a84ff !important; }
.ig-btn.ig-on { background: rgba(10,132,255,.14); }
.ig-tap { position: absolute; inset: -4px; border-radius: inherit; border: 2px solid #0a84ff; animation: igPulse 1.4s ease-out infinite; pointer-events: none; }
.ig-row .ig-tap, .ig-addbtn .ig-tap { border-radius: 12px; }
@keyframes igPulse { 0% { transform: scale(.9); opacity: 1; } 100% { transform: scale(1.12); opacity: 0; } }
.ig-list { padding: .25rem; }
.ig-row { position: relative; display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 12px; color: var(--ink); }
.ig-row svg { flex: none; color: var(--muted); }
.ig-row.ig-on { background: rgba(10,132,255,.12); font-weight: 600; }
.ig-row.ig-on svg { color: #0a84ff; }
.ig-add { padding: .5rem .7rem .8rem; }
.ig-addbar { display: flex; align-items: center; justify-content: space-between; font-size: .85rem; padding-bottom: .55rem; border-bottom: 1px solid var(--line); margin-bottom: .6rem; }
.ig-addbar span { color: #0a84ff; }
.ig-addbtn { padding: .15rem .55rem; font-weight: 700; border-radius: 12px; }
.ig-app { display: flex; align-items: center; gap: .7rem; }
.ig-app img, .ig-homeapp img { border-radius: 11px; }
.ig-sub { font-size: .75rem; color: var(--muted); }
.ig-home { display: flex; justify-content: space-around; align-items: flex-start; padding: .8rem .5rem .6rem; }
.ig-ghost { width: 46px; height: 46px; border-radius: 11px; background: rgba(127,140,150,.22); }
.ig-homeapp { display: flex; flex-direction: column; align-items: center; gap: .2rem; animation: igPop 1.6s ease-in-out infinite; }
.ig-homeapp small { font-size: .7rem; }
@keyframes igPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ig-point { display: flex; flex-direction: column; align-items: center; gap: .1rem; margin-top: .9rem; color: #0a84ff; font-size: .8rem; font-weight: 600; }
.ig-point svg { animation: igBounce 1.1s ease-in-out infinite; }
@keyframes igBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .ig-tap, .ig-homeapp, .ig-point svg { animation: none; } }

.ig-pill { flex: 1; min-width: 0; display: flex; align-items: center; gap: .2rem; background: rgba(127,140,150,.18); border-radius: 22px; padding: 0 .15rem; }
.ig-pill .ig-url { background: none; padding: .35rem .2rem; }
.ig-round { background: rgba(127,140,150,.18); }
.ig-acts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; padding: .7rem .4rem; background: rgba(127,140,150,.16); border: 1px solid var(--line); border-radius: 18px; }
.ig-act { display: flex; flex-direction: column; align-items: center; gap: .3rem; font-size: .68rem; line-height: 1.15; text-align: center; color: var(--ink); }
.ig-act i { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(127,140,150,.22); color: var(--muted); font-style: normal; }
.ig-act.ig-on i { background: rgba(10,132,255,.16); color: #0a84ff; }
.ig-act.ig-on { font-weight: 700; }
.ig-act .ig-tap { border-radius: 50%; }

/* Moving between pages: the tapped tab lights up at once and a bar runs along the top until the next page shows */
#nav-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, var(--brand), var(--accent)); box-shadow: 0 0 10px var(--brand); border-radius: 0 3px 3px 0; }
#nav-progress.run { opacity: 1; animation: navRun 6s cubic-bezier(.1,.7,.2,1) forwards; }
@keyframes navRun { 0% { width: 0; } 15% { width: 45%; } 50% { width: 75%; } 100% { width: 92%; } }
body.navigating main { opacity: .55; transition: opacity .15s ease .08s; }
.bottom-nav a.active, .topnav a.active { transition: background .12s, color .12s; }
/* Where the browser supports it (newer Safari and Chrome), pages swap with a quick fade and the nav bars stay put */
@view-transition { navigation: auto; }
.bottom-nav { view-transition-name: bottom-nav; }
.topbar { view-transition-name: top-bar; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  #nav-progress.run { animation: none; width: 70%; }
  body.navigating main { transition: none; }
  @view-transition { navigation: none; }
}

/* Type: Metropolis for everything (closest free match to Proxima Nova).
   The staff console keeps its own fonts and falls back neatly if these are not loaded. */
h1, h2, h3, .brand, .brand-lock, .receipt-title, .kh-title b, .kt-card h2, .section-title { font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 600; letter-spacing: -.01em; }
.app-header h1 { letter-spacing: -.015em; }
.hero-amount, .rent-amount, .stat .v, .hero-card .big, .plan .price b, .code-input { font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em; }
body { font-family: 'Metropolis', system-ui, -apple-system, 'Segoe UI', sans-serif; }
.hero-card .eyebrow { text-transform: none; letter-spacing: 0; font-size: .9rem; }
.thead { text-transform: none; letter-spacing: 0; }

/* Payment method logos (when an official logo file is used instead of the drawn icon) */
.pm-logo { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); overflow: hidden; }
.pm-logo img { width: 100%; height: 100%; object-fit: cover; padding: 0; }

/* Confirm / Reject on a bank transfer: side by side at opposite ends, with full-size touch targets,
   so one can't be pressed by accident when aiming for the other */
.trow .act.wide { flex-direction: row; justify-content: space-between; align-items: center; gap: 1.5rem; margin-top: .65rem; }
.trow .act.wide .btn { min-height: 44px; padding: .5rem 1.25rem; font-size: .95rem; }

/* Dashboard lists (Needs attention, Other rent due, Recent payments) scroll inside their own box
   instead of growing the page. A soft fade at the bottom shows there is more to see. */
.dash-scroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.dash-scroll::-webkit-scrollbar { width: 6px; } .dash-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
.dash-scroll.more-below { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent); }

/* Properties: compact cards that open with a tap (when there is more than one property) */
.pcard-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; }
.pcard-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: .75rem; padding: .15rem 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; -webkit-tap-highlight-color: transparent; }
.pcard-toggle:disabled { opacity: 1; cursor: default; }
.pcard-name { min-width: 0; flex: 1; } .pcard-name .section-title { overflow-wrap: anywhere; }
.pgrid > * { min-width: 0; } .pgrid .pcard { margin-bottom: 0; }
.pcard-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.pcard-chev { flex: none; margin-left: auto; color: var(--muted); transition: transform .2s ease; }
.pcard.open .pcard-chev { transform: rotate(180deg); }
.pcard-units { margin-top: .75rem; }
.health.dash-scroll { padding-right: .2rem; }


/* Sign-up and welcome pages on desktop: centre "Plans and prices" over the plans, like the card above it */
@media (min-width: 992px) { body.auth #plans-title { justify-content: center; text-align: center; margin-left: auto; margin-right: auto; } }

/* Sign-up and log-in on desktop: the form sits in the middle of its side (the plans now live on the landing page) */
@media (min-width: 992px) { body.auth main.container { min-height: 100vh; justify-content: center; } }


/* ===== Receipt: branded band, stamp, faint logo and a torn-paper edge ===== */
.receipt { position: relative; overflow: hidden; padding-bottom: 2.4rem;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.receipt > * { position: relative; z-index: 1; }
.receipt::after { content: ''; position: absolute; right: -46px; bottom: -34px; width: 230px; height: 230px; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='54' r='8' fill='%237bf0cf'/><g fill='none' stroke='%237bf0cf' stroke-width='8' stroke-linecap='round' stroke-linejoin='round'><path d='M50 8 L67 23 V34 H33 V23 Z'/><path d='M50 8 L67 23 V34 H33 V23 Z' transform='rotate(120 50 54)'/><path d='M50 8 L67 23 V34 H33 V23 Z' transform='rotate(240 50 54)'/></g></svg>") no-repeat center / contain; opacity: .07; }
.receipt-head { margin: -1.5rem -1.5rem 0; padding: 1.4rem 1.5rem 1.3rem; border-bottom: 0; color: #fff;
  background: radial-gradient(420px 220px at 0% 0%, rgba(123,240,207,.45), transparent 70%), radial-gradient(420px 240px at 100% 100%, rgba(123,114,255,.55), transparent 70%), #0b2a34; }
.receipt-head .receipt-title { color: #fff; }
.receipt-head .text-muted { color: rgba(255,255,255,.78) !important; }
.receipt-head > div:first-child .text-muted { color: #7bf0cf !important; font-weight: 600; letter-spacing: .02em; }
.receipt-void { margin-top: 1rem; }
.receipt-stamp { display: table; margin: 1.3rem .4rem .6rem auto; padding: .3rem .75rem; border: 3px solid currentColor; border-radius: 10px;
  font-weight: 800; font-size: 1rem; letter-spacing: .08em; line-height: 1.2; color: var(--ok-fg); transform: rotate(-8deg); opacity: .9; }
.receipt-stamp.part { color: var(--warn-fg); }
.receipt-stamp.void { color: var(--bad-fg); }
@media print {
  .receipt { -webkit-mask: none; mask: none; }
  .receipt::after { display: none; }
  .receipt-head { background: none !important; border-bottom: 2px solid #bbb; margin: 0; padding: 0 0 1rem; }
}
.receipt-brand { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: .7rem; letter-spacing: -.01em; }
.receipt-brand svg { width: 26px; height: 26px; }
@media print { .receipt-brand { color: #000; } }

/* ===== Profile: a menu of rows, each opening its own screen ===== */
.pf-group { border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1.4rem; }
.pf-row { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; color: var(--ink); text-decoration: none; min-height: 60px; -webkit-tap-highlight-color: transparent; }
.pf-row + .pf-row { border-top: 1px solid var(--line); }
.pf-row:hover, .pf-row:active { background: var(--hover); color: var(--ink); }
.pf-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pf-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); }
.pf-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-tx { flex: 1; min-width: 0; } .pf-tx b { display: block; font-weight: 600; }
.pf-tx small { display: block; color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tx small:empty { display: none; }
.pf-chev { flex: none; color: var(--muted); }
.pf-panel .pf-back { display: inline-flex; margin-bottom: .9rem; }
.pf-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .35rem; }
.pf-sub { color: var(--muted); margin: 0 0 1rem; }
.pf-panel > .card, .pf-panel > form.card, .pf-panel > .pf-group { margin-top: .75rem; }
#acct-plan:empty { display: none; }
@media (min-width: 992px) { #pf-menu, .pf-panel { max-width: 680px; margin-left: auto; margin-right: auto; } .hero-profile { max-width: 680px; margin-left: auto; margin-right: auto; } }
.pf-panel .pf-back { align-items: center; gap: .3rem; padding: .35rem .85rem; border: 1px solid var(--line); border-radius: 99px; color: var(--ink); text-decoration: none; background: var(--surface2); font-weight: 600; font-size: .92rem; }
.pf-panel .pf-back:hover { color: var(--ink); background: var(--hover); }
.hero-profile[hidden], #pf-menu[hidden], .pf-panel[hidden] { display: none !important; }
/* No highlight boxes from taps or from the page moving focus to a screen's title; keyboard users still get a ring */
.pf-title:focus, .pf-title:focus-visible { outline: none; }
.pf-row:focus { outline: none; }
.pf-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
@media (hover: none) { .pf-row:focus-visible { outline: none; } }
.pf-row, .pf-back, .seg button { -webkit-tap-highlight-color: transparent; }

/* Numbers use the phone's own font (San Francisco on iPhone, like the Calculator app): fuller, rounder digits.
   Words stay in Metropolis. */
:root { --num-font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, system-ui, sans-serif; }
.hero-amount, .rent-amount, .stat .v, .hero-card .big, .donut .big, .plan .price, .plan .price b, .code-input, .amt,
.trow .amt, .receipt-table td, .lp-month .sum, .lp-row .amt, .lp-total b, .lp-way .got, .num {
  font-family: var(--num-font) !important; font-variant-numeric: normal; letter-spacing: -.01em; }
.hero-amount, .rent-amount, .stat .v, .hero-card .big, .donut .big, .lp-month .sum { font-weight: 600; }
.kl-key, .kc-key { font-family: var(--num-font) !important; font-weight: 400 !important; }

/* Eye-catching button (Kora's mint-to-violet), used for Import */
.btn-glow { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: 99px; font-weight: 600;
  background: linear-gradient(90deg, #7bf0cf, #7b72ff); color: #06151a !important; box-shadow: 0 8px 22px -8px rgba(123,114,255,.85), 0 0 0 1px rgba(255,255,255,.12) inset;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; text-decoration: none; }
.btn-glow:hover, .btn-glow:focus-visible { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 26px -8px rgba(123,114,255,.95), 0 0 0 1px rgba(255,255,255,.18) inset; }
.btn-glow:active { transform: translateY(0); }
.btn-glow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-glow .tag { font-size: .62rem; font-weight: 700; letter-spacing: .05em; padding: .12rem .4rem; border-radius: 99px; background: rgba(6,21,26,.82); color: #c9c5ff; }
.btn-glow.btn-sm { padding: .38rem .9rem; font-size: .88rem; }
.btn-glow.btn-lg { padding: .85rem 1.4rem; font-size: 1.05rem; }

/* Excel import */
.imp-hero { text-align: center; margin-bottom: 1.2rem; }
.imp-hero .xl { width: 58px; height: 58px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .6rem;
  background: linear-gradient(135deg, #7bf0cf, #7b72ff); color: #06151a; box-shadow: 0 10px 24px -10px rgba(123,114,255,.9); }
.imp-hero .xl svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.imp-hero h2 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .3rem; }
.imp-steps { list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: s; }
.imp-steps li { position: relative; padding: 0 0 1.1rem 2.6rem; }
.imp-steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 700; background: var(--brand-soft); color: var(--brand); }
.imp-steps li:not(:last-child)::after { content: ''; position: absolute; left: .93rem; top: 2.1rem; bottom: .25rem; width: 2px; background: var(--line); }
.imp-steps b { display: block; margin-bottom: .15rem; }
.imp-steps p { margin: 0 0 .5rem; color: var(--muted); font-size: .92rem; }
.imp-sheet { width: 100%; border-collapse: collapse; font-size: .74rem; margin: .3rem 0 .4rem; border-radius: 10px; overflow: hidden; }
.imp-sheet th { background: #1d6f42; color: #fff; font-weight: 600; padding: .3rem .35rem; text-align: left; }
.imp-sheet td { border: 1px solid var(--line); padding: .28rem .35rem; white-space: nowrap; }
.imp-sheet td.empty { color: var(--muted); font-style: italic; }
.imp-tip { font-size: .82rem; color: var(--muted); }
.imp-prop { border: 1px solid var(--line); border-radius: 14px; padding: .7rem .85rem; margin-bottom: .6rem; }
.imp-prop h3 { font-size: .98rem; font-weight: 700; margin: 0 0 .35rem; }
.imp-room { display: flex; justify-content: space-between; gap: .5rem; font-size: .88rem; padding: .25rem 0; border-top: 1px dashed var(--line); }
.imp-room:first-of-type { border-top: 0; }
.imp-room .who { color: var(--muted); }
.imp-q { margin-bottom: 1rem; }
.imp-q label { font-weight: 600; }
.imp-lock { text-align: center; }
.imp-lock .xl { opacity: .9; }

/* Pick a photo of the bank receipt */
.proof-pick { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .8rem 1rem; border: 2px dashed var(--line); border-radius: 14px; cursor: pointer; color: var(--ink); }
.proof-pick:hover { border-color: var(--brand); }
.proof-pick svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--brand); }
#notify-card .form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
#notify-card .form-check-input { width: 2.6em; height: 1.4em; flex: none; cursor: pointer; }
/* Tour moving to another page: the current page fades as the next one loads */
html.kt-going main, html.kt-going .app-header { opacity: .35; transition: opacity .2s ease; }

/* Ask Kora: talking to a person on the Kora team */
.kh-msg.team { align-self: flex-start; background: var(--brand-soft); border: 1px solid var(--brand); border-bottom-left-radius: 6px; }
.kh-from { display: block; font-size: .8rem; font-weight: 700; color: var(--brand); margin-bottom: .25rem; letter-spacing: .01em; }
.kh-teambar { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .55rem 1rem; font-size: .9rem; font-weight: 600;
  background: linear-gradient(90deg, rgba(123,240,207,.16), rgba(123,114,255,.16)); border-bottom: 1px solid var(--solid-line); }
.kh-teambar button { border: 0; background: none; color: var(--link); font: inherit; font-weight: 600; padding: .2rem 0; white-space: nowrap; }
.kh-hand textarea { margin-top: .6rem; font-size: 1rem; }
.kh-btn.kh-new::after { content: ''; position: absolute; top: 6px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: #ff4d4f; box-shadow: 0 0 0 2px var(--bg); }

/* A plan given by the Kora team (dashboard) */
.gift-note { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .95rem 2.6rem .95rem 1rem; margin-bottom: 1rem; border-radius: 20px;
  background: linear-gradient(120deg, rgba(123,240,207,.18), rgba(123,114,255,.22)); border: 1px solid rgba(123,180,240,.45); animation: rise .4s ease-out; }
.gift-ic { font-size: 1.6rem; line-height: 1; }
.gift-tx { font-size: .98rem; line-height: 1.45; }
.gift-acts { margin-top: .4rem; } .gift-acts a { font-weight: 600; color: var(--link); text-decoration: none; }
.gift-x { position: absolute; top: .45rem; right: .55rem; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 1.5rem; line-height: 1; }
.gift-x:hover { background: var(--hover, rgba(255,255,255,.06)); color: var(--ink); }
/* More on the account than the plan includes (dashboard) */
.gift-acts a + a { margin-left: 1.1rem; }
.team-note { background: linear-gradient(120deg, rgba(255,196,92,.18), rgba(255,140,90,.14)); border-color: rgba(240,170,90,.5); }
.choose-card .form-check { padding-top: .35rem; padding-bottom: .35rem; }
.paused-card { opacity: .8; }

/* Recording a payment: what is owed, or rent paid in advance */
.pay-mode { display: flex; gap: .3rem; padding: .25rem; border-radius: 14px; background: var(--surface2, rgba(255,255,255,.04)); border: 1px solid var(--line); }
.pay-mode button { flex: 1; border: 0; background: none; color: var(--muted); font-weight: 600; font-size: .9rem; padding: .5rem; border-radius: 10px; }
.pay-mode button.on { background: var(--brand-soft); color: var(--brand); }
.pay-mode button:disabled { opacity: .45; }
.adv-quote { padding: .75rem .9rem; border-radius: 14px; border: 1px dashed var(--line); }
.adv-total { font-size: 1.35rem; font-weight: 700; }
.paid-ahead { margin-bottom: .75rem; padding: .7rem .9rem; border-radius: 14px; background: var(--brand-soft); color: var(--ink); font-size: .95rem; }

/* Invite a landlord */
.inv-rewards { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.inv-rewards > div { display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border-radius: 16px; background: var(--brand-soft); }
.inv-rewards span:last-child { font-size: .9rem; color: var(--muted); }
.inv-ic { font-size: 1.4rem; line-height: 1; margin-bottom: .2rem; }
.inv-when { margin-top: .8rem; font-size: .9rem; color: var(--muted); }
.inv-when b { color: var(--ink); }
.inv-link { padding: .65rem .8rem; border-radius: 12px; border: 1px dashed var(--line); font-weight: 600; overflow-wrap: anywhere; }
.inv-person { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); }

/* Tenant: my tenancy, report a problem */
.tn-card { padding: 1.1rem; }
.tn-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.tn-room { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.tn-prop { color: var(--muted); font-size: .92rem; margin-top: .15rem; }
.tn-rent { text-align: right; flex: none; } .tn-rent b { display: block; font-size: 1.3rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.tn-rent span { color: var(--muted); font-size: .82rem; }
.tn-facts { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0; }
.tn-facts > div { padding: .7rem .8rem; border-radius: 14px; background: var(--brand-soft); }
.tn-facts span { display: block; font-size: .76rem; color: var(--muted); } .tn-facts b { font-size: 1rem; }
.tn-lord { display: flex; align-items: center; gap: .75rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.tn-lord-tx { flex: 1; min-width: 0; } .tn-lord-tx small { display: block; color: var(--muted); font-size: .76rem; } .tn-lord-tx b { font-size: .98rem; }
.tn-lord-acts { display: flex; gap: .5rem; }
.tn-act { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--brand); background: var(--surface); }
.tn-act svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rp-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.rp-chip { border: 1px solid var(--line); background: var(--surface2, transparent); color: var(--ink); border-radius: 99px; padding: .45rem .9rem; font-size: .92rem; font-weight: 600; }
.rp-chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }

.sec-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sec-head a { font-weight: 600; font-size: .9rem; text-decoration: none; color: var(--link); white-space: nowrap; }

.rec-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.rec-sum > div { padding: .7rem .8rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.rec-sum span { display: block; font-size: .74rem; color: var(--muted); } .rec-sum b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.rec-sum .bad b { color: var(--bad-fg); } .rec-sum .warn b { color: var(--warn-fg); }

/* The "Turn on notifications" card: a clearly visible "Not now" */
.nt-card .nt-no { border: 1px solid currentColor; color: inherit; background: transparent; font-weight: 600; opacity: 1; }
.nt-card .nt-no:hover { background: rgba(127,127,127,.15); }


/* ---- App look: matching the landing page where it helps ---- */
/* the main "Record payment" quick action uses the same teal-to-purple as every other main button */
.qbar a.main, .qbar a.main:hover { background: linear-gradient(110deg, #7bf0cf, #7b72ff); color: #04181b; border-color: transparent; box-shadow: 0 10px 22px -12px rgba(123,114,255,.7); }
/* the month card gets the landing page's two glows: teal low on the left, purple high on the right */
.hero-card::before { content: ''; position: absolute; left: -120px; bottom: -150px; width: 340px; height: 340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(123,240,207,.28), transparent); }
:root[data-theme="light"] .hero-card::before { background: radial-gradient(closest-side, rgba(110,230,200,.35), transparent); }
.hero-card > * { position: relative; z-index: 1; }
/* the six-month chart keeps a sensible size on big screens (its text was scaling up with it) */
.vizgrid .viz { max-height: 210px; width: 100%; margin: 0 auto; }
/* a payment that just arrived */
@keyframes just-in { 0% { background: rgba(123,240,207,.32); } 100% { background: transparent; } }
.just-in { animation: just-in 2.4s ease-out both; }
@media (prefers-reduced-motion: reduce) { .just-in { animation: none; } }

/* Empty lists: icon, one line, one button. No motion. */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 1.8rem 1.2rem; border: 1px dashed var(--line); border-radius: 22px; }
.card .empty-state { border: 0; padding: .4rem 0 1rem; }
.empty-state .es-ic { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 17px; background: var(--brand-soft); color: var(--brand); margin-bottom: .35rem; }
.empty-state .es-ic svg { width: 26px; height: 26px; }
.empty-state b { font-size: 1.05rem; }
.empty-state p { color: var(--muted); margin: 0 0 .7rem; max-width: 34ch; font-size: .93rem; line-height: 1.5; }

/* ---- Payments: one page for every payment and its receipt ---- */
.pay-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-bottom: .75rem; }
.pay-tools .form-select { width: auto; }
#filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
#filters::-webkit-scrollbar { display: none; }
#filters .nav-link { white-space: nowrap; }
.pay-sum { font-size: .92rem; margin: .25rem 0 .75rem; }
.tmonth { padding: .9rem 1rem .45rem; font-size: .78rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); }
.tmonth:first-child { padding-top: .7rem; }
.trow .act.rc-acts { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
.trow .who small + small { margin-top: .1rem; }
.hero-card .hero-extra { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.14); font-size: .88rem; opacity: .9; position: relative; }
:root[data-theme="light"] .hero-card .hero-extra { border-top-color: rgba(0,0,0,.08); }
@media (max-width: 575.98px) {
  .pay-tools { grid-template-columns: minmax(0, 1fr) 9.6rem; }
  #filters { gap: .3rem; }
  #filters .nav-link { padding: .4rem .8rem; font-size: .9rem; }
}
:root[data-theme="light"] .hero-card .legend span:nth-child(3) i { background: rgba(15, 35, 50, .2) !important; }

/* Country code picker in front of phone numbers */
.cc-pick, .input-group > .cc-pick { position: relative; gap: .3rem; padding-right: 1.9rem; cursor: pointer; white-space: nowrap; }
.cc-pick::after { content: ''; position: absolute; right: .65rem; top: 50%; width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .55; }
.cc-pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.cc-pick:focus-within { box-shadow: 0 0 0 3px rgba(44, 192, 138, .25); z-index: 3; }
/* Plan cards: each plan includes the one before it */
.plan .plan-more { margin: .1rem 0 .35rem; font-size: .84rem; font-weight: 600; color: var(--muted); }

/* ---- install.html: the "Get the app" link ---- */
.get-app { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 2rem; padding-bottom: 2rem; }
.ga-card { width: 100%; max-width: 420px; text-align: center; padding: 2rem 1.5rem; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-up); }
.ga-icon { border-radius: 20px; margin-bottom: 1rem; box-shadow: 0 10px 30px -10px rgba(91, 141, 255, .5); }
.get-app h1 { font-size: 1.7rem; font-weight: 700; margin: 0 0 .5rem; }
.ga-sub { color: var(--muted); margin: 0 auto 1.5rem; max-width: 30ch; }
.ga-note { color: var(--muted); font-size: .92rem; margin: .9rem 0; }
.ga-note.ga-ok { color: var(--ink); font-weight: 600; }
.ga-steps { text-align: left; margin: 0 0 1rem; padding-left: 1.3rem; font-size: .95rem; }
.ga-steps li { margin: .3rem 0; }
.ga-foot { margin: 1.5rem 0 0; font-size: .9rem; color: var(--muted); }
.demo-banner-actions { display: inline-flex; gap: .4rem; margin-left: .5rem; vertical-align: middle; flex-wrap: wrap; }
@media (max-width: 520px) { .demo-banner-actions { display: flex; justify-content: center; margin: .45rem 0 0; } }