/* Resident portal "Warm Studio" theme: warm canvas, Pondview blue, marigold accent,
          sand to match the staff Lease Detail page. */
       :root {
           --canvas: #f6f4ef; --surface: #ffffff; --surface-2: #f0ede6;
           --sand: #ede7dc; --sand-ink: #6b5f4e;
           --ink: #17213a; --muted: #5f6879; --faint: #8c94a3; --line: #e5e0d6;
           --accent: #338dff; --accent-ink: #1663d6; --accent-soft: #e7f0ff;
           --marigold: #f2b33d; --marigold-ink: #4d3604; --marigold-soft: #fdf1d6;
           --good: #188a56; --good-soft: #e1f4ea; --warn: #a8670a; --warn-soft: #fcefd9;
           --bad: #c9382f; --bad-soft: #fde8e6;
           --hero-bg: #17213a; --hero-fg: #f7f5f0; --hero-muted: #aab4c8; --hero-line: rgba(255,255,255,.12);
           --shadow: 0 1px 2px rgba(23,33,58,.05), 0 6px 20px rgba(23,33,58,.06);
           --shadow-lift: 0 2px 4px rgba(23,33,58,.06), 0 14px 32px rgba(23,33,58,.10);
           --glass: rgba(246,244,239,.82);
           --font-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
           --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
           --r-lg: 20px; --r-md: 14px;
       }

       :root { color-scheme: light; }
       /* "System": follow the device unless the resident picked Light. */
       @media (prefers-color-scheme: dark) {
           :root:not([data-theme="light"]) { 
   --canvas: #0f141c; --surface: #171d28; --surface-2: #1e2633; --sand: #29251f; --sand-ink: #cdbfa8;
   --ink: #e9edf4; --muted: #a0a9b8; --faint: #747e8f; --line: #2a3242;
   --accent: #5aa2ff; --accent-ink: #7db5ff; --accent-soft: #1a2a45;
   --marigold: #f5c15a; --marigold-ink: #2b1f04; --marigold-soft: #3a2f17;
   --good: #45cf8e; --good-soft: #14301f; --warn: #f0b04a; --warn-soft: #36290f; --bad: #ff7d73; --bad-soft: #3a1c1b;
   --hero-bg: #1d3a6e; --hero-fg: #f2f5fa; --hero-muted: #b2c2dc; --hero-line: rgba(255,255,255,.14);
   --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
   --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.35);
   --glass: rgba(15,20,28,.82);
   color-scheme: dark;
}
       }
       /* Picked Dark: dark even on a light device. */
       :root[data-theme="dark"] { 
   --canvas: #0f141c; --surface: #171d28; --surface-2: #1e2633; --sand: #29251f; --sand-ink: #cdbfa8;
   --ink: #e9edf4; --muted: #a0a9b8; --faint: #747e8f; --line: #2a3242;
   --accent: #5aa2ff; --accent-ink: #7db5ff; --accent-soft: #1a2a45;
   --marigold: #f5c15a; --marigold-ink: #2b1f04; --marigold-soft: #3a2f17;
   --good: #45cf8e; --good-soft: #14301f; --warn: #f0b04a; --warn-soft: #36290f; --bad: #ff7d73; --bad-soft: #3a1c1b;
   --hero-bg: #1d3a6e; --hero-fg: #f2f5fa; --hero-muted: #b2c2dc; --hero-line: rgba(255,255,255,.14);
   --shadow: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
   --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 14px 32px rgba(0,0,0,.35);
   --glass: rgba(15,20,28,.82);
   color-scheme: dark;
}

       * { margin: 0; padding: 0; box-sizing: border-box; }
       [hidden] { display: none !important; }
       html, body { min-height: 100%; }
       body { font-family: var(--font-body); font-size: 15px; line-height: 1.5; background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
       h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
       h1 { font-size: 1.75rem; font-weight: 800; }
       h2 { font-size: 1.15rem; font-weight: 700; }
       h3 { font-size: 1rem; font-weight: 700; }
       a { color: var(--accent-ink); }
       button, input, select, textarea { font: inherit; color: inherit; }
       :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
       .num { font-variant-numeric: tabular-nums; }
       .icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
       .icon.sm { width: 16px; height: 16px; }
       .icon.lg { width: 24px; height: 24px; }
       .muted { color: var(--muted); }
       .small { font-size: .82rem; }

       /* ── Sign-in pages ── */
       body.auth { padding: 2rem 1rem; background: radial-gradient(1200px 600px at 10% -10%, var(--accent-soft), transparent 60%), radial-gradient(900px 500px at 110% 110%, var(--marigold-soft), transparent 60%), var(--canvas); background-attachment: fixed; }
       .auth .card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lift); padding: 2.5rem; }
       .auth .card.narrow { max-width: 410px; margin: 6vh auto 0; text-align: center; }
       .logo-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 35%, transparent); }
       .logo-icon svg { width: 28px; height: 28px; }
       .auth h1 { font-size: 1.55rem; }
       .auth h1 span { color: var(--accent-ink); }
       .subtitle { font-size: .875rem; color: var(--muted); margin: .25rem 0 1.75rem; }
       .field { text-align: left; margin-bottom: 1rem; display: flex; flex-direction: column; gap: .35rem; }
       .field label, .field .lbl { font-size: .82rem; font-weight: 700; }
       .field input, .field select, .field textarea, .input { width: 100%; padding: .7rem .85rem; font-size: .95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
       .field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
       .field textarea { min-height: 84px; resize: vertical; }
       .field .hint { font-size: .78rem; color: var(--muted); }
       .btn-primary { width: 100%; padding: .8rem 1.5rem; border: none; border-radius: 12px; background: var(--accent); color: #fff; font-size: .95rem; font-weight: 700; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
       .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 35%, transparent); }
       .google-btn { display: flex; align-items: center; justify-content: center; gap: .75rem; width: 100%; padding: .8rem 1.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .95rem; font-weight: 600; color: var(--ink); text-decoration: none; transition: all .2s ease; }
       .google-btn:hover { border-color: var(--faint); box-shadow: var(--shadow); }
       .google-btn img { width: 20px; height: 20px; }
       .divider { display: flex; align-items: center; gap: .75rem; color: var(--faint); font-size: .75rem; margin: 1.25rem 0; }
       .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
       .footer-text { margin-top: 1.5rem; font-size: .78rem; color: var(--faint); }

       /* ── Flash ── */
       .flash-msg { display: flex; gap: .5rem; padding: .8rem 1rem; border-radius: 12px; font-size: .88rem; font-weight: 600; margin-bottom: 1.25rem; text-align: left; }
       .flash-error { background: var(--bad-soft); color: var(--bad); }
       .flash-warning { background: var(--warn-soft); color: var(--warn); }
       .flash-success, .flash-celebrate { background: var(--good-soft); color: var(--good); }
       .flash-info { background: var(--accent-soft); color: var(--accent-ink); }

       /* ── App shell ── */
       body.app::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--canvas); }
       .shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
       .sidebar { position: sticky; top: 0; height: 100vh; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; padding: 22px 14px 16px max(14px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
       .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; text-decoration: none; color: var(--ink); }
       .brand-mark { width: 36px; height: 36px; border-radius: 11px; background: var(--accent); display: grid; place-items: center; color: #fff; flex: none; }
       .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.1; }
       .brand-name small { display: block; font-family: var(--font-body); font-weight: 500; font-size: .72rem; color: var(--muted); }
       .nav { display: flex; flex-direction: column; gap: 2px; }
       .nav-label { font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); padding: 14px 12px 6px; }
       .nav-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem; transition: background .15s, color .15s; cursor: pointer; }
       .nav-item:hover { background: var(--surface-2); color: var(--ink); }
       .nav-item.active { background: var(--accent-soft); color: var(--accent-ink); }
       .count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--marigold); color: var(--marigold-ink); font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
       .side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
       .who-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
       .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--marigold); color: var(--marigold-ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .85rem; flex: none; text-decoration: none; }
       .who-card .who { min-width: 0; flex: 1; }
       .who-card .who b { display: block; font-size: .88rem; }
       .who-card .who span { display: block; font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
       .icon-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; position: relative; flex: none; text-decoration: none; }
       .icon-btn:hover { color: var(--ink); border-color: var(--faint); }
       .lease-switch { border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
       .lease-switch summary { list-style: none; cursor: pointer; padding: 8px 10px; font-size: .8rem; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; }
       .lease-switch summary::-webkit-details-marker { display: none; }
       .lease-switch a { display: block; padding: 8px 10px; border-radius: 10px; font-size: .82rem; color: var(--ink); text-decoration: none; }
       .lease-switch a:hover { background: var(--surface-2); }
       .lease-switch a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }

       .main { min-width: 0; display: flex; flex-direction: column; }
       .topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
       .topbar-in { display: flex; align-items: center; gap: 12px; padding-block: 14px; max-width: 1180px; margin: 0 auto; }
       .crumb { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
       .spacer { flex: 1; }
       .mobile-brand { display: none; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
       .gutter { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
       .view { width: 100%; max-width: 1180px; margin: 0 auto; padding-block: 28px 64px; display: flex; flex-direction: column; gap: 22px; }
       .view > .flash-msg { margin-bottom: 0; }
       .view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
       .view-head .sub { color: var(--muted); margin-top: 4px; max-width: 60ch; }
       .eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
       .tabbar { display: none; }
       .more-sheet { position: fixed; inset: 0; z-index: 50; background: rgba(10,14,22,.45); display: flex; align-items: flex-end; }
       .more-sheet .sheet { width: 100%; background: var(--surface); border-radius: 24px 24px 0 0; padding: 18px max(16px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 4px; }

       /* ── Components ── */
       .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); min-width: 0; }
       .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
       .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: 12px; border: 1px solid transparent; font-weight: 700; font-size: .9rem; white-space: nowrap; transition: transform .12s, box-shadow .15s; text-decoration: none; cursor: pointer; }
       .btn:active { transform: translateY(1px); }
       .btn-blue { background: var(--accent); color: #fff; }
       .btn-blue:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
       .btn-gold { background: var(--marigold); color: var(--marigold-ink); }
       .btn-gold:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--marigold) 45%, transparent); }
       .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line); }
       .btn-ghost:hover { border-color: var(--faint); }
       .btn-quiet { background: none; color: var(--accent-ink); padding-inline: 2px; border: 0; }
       .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
       .pill.good { background: var(--good-soft); color: var(--good); }
       .pill.warn { background: var(--warn-soft); color: var(--warn); }
       .pill.bad { background: var(--bad-soft); color: var(--bad); }
       .pill.info { background: var(--accent-soft); color: var(--accent-ink); }
       .pill.neutral { background: var(--surface-2); color: var(--muted); }
       .pill.gold { background: var(--marigold-soft); color: var(--warn); }
       .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
       .list > * + * { border-top: 1px solid var(--line); }
       .kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: .9rem; }
       .kv > span:first-child { color: var(--muted); }
       .kv b { font-weight: 600; text-align: right; }
       .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
       .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
       .split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 18px; align-items: start; }
       .stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
       .tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 12px; }
       .tabs button { border: 0; background: none; padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: .86rem; color: var(--muted); cursor: pointer; }
       .tabs button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
       .banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); font-size: .9rem; }
       .banner.bad { background: var(--bad-soft); }
       .banner.bad .icon { color: var(--bad); }
       .banner.info { background: var(--accent-soft); }
       .banner.info .icon { color: var(--accent-ink); }
       .banner.gold { background: var(--marigold-soft); }
       .banner.gold .icon { color: var(--warn); }
       .empty { text-align: center; padding: 28px 16px; color: var(--muted); }
       .empty svg.art { width: 120px; height: 90px; margin: 0 auto 10px; display: block; }
       .copy { border: 1px solid var(--line); background: var(--surface); border-radius: 10px; padding: 7px 10px; display: inline-flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 700; color: var(--muted); cursor: pointer; flex: none; }
       .copy:hover { color: var(--accent-ink); border-color: var(--accent); }
       code.val { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .86rem; background: var(--surface-2); padding: 2px 7px; border-radius: 6px; word-break: break-all; }

       /* Bento (home) */
       .greet h1 { font-size: 2rem; }
       .greet .sub { color: var(--muted); margin-top: 6px; }
       .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 18px; }
       .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--ink); text-decoration: none; transition: transform .18s, box-shadow .18s; }
       a.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
       .tile-label { display: flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
       .tile-balance { grid-column: span 2; grid-row: span 2; background: var(--hero-bg); color: var(--hero-fg); border-color: transparent; padding: 26px; position: relative; overflow: hidden; }
       .tile-balance .tile-label { color: var(--hero-muted); }
       .tile-balance .big { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 5vw, 3.5rem); letter-spacing: -0.03em; line-height: 1; margin-top: 6px; }
       .tile-balance .hint { color: var(--hero-muted); }
       .tile-balance .items { margin-top: auto; }
       .tile-balance .items div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--hero-line); font-size: .88rem; color: var(--hero-muted); }
       .tile-balance .items div b { color: var(--hero-fg); font-weight: 600; }
       .tile-balance .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
       .tile-balance .btn-ghost { background: transparent; color: var(--hero-fg); border-color: var(--hero-line); }
       .tile-balance .ripple { position: absolute; right: -60px; top: -60px; width: 240px; height: 240px; pointer-events: none; }
       .tile-balance .ripple circle { fill: none; stroke: var(--hero-line); stroke-width: 1.5; }
       .chip-gold { display: inline-flex; align-self: flex-start; gap: 6px; align-items: center; background: var(--marigold); color: var(--marigold-ink); font-size: .78rem; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
       .ring-wrap { display: flex; align-items: center; gap: 16px; }
       .ring { width: 92px; height: 92px; flex: none; }
       .ring .track { fill: none; stroke: var(--surface-2); stroke-width: 9; }
       .ring .bar { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
       .ring text { font-family: var(--font-display); font-weight: 800; fill: var(--ink); font-size: 22px; }
       .ring text.cap { font-family: var(--font-body); font-weight: 600; fill: var(--muted); font-size: 9px; letter-spacing: .06em; }
       .stat { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; }
       .tile-wide { grid-column: span 2; }
.tile-balance-alt { grid-column: span 2; grid-row: span 2; }
.tile-quick { grid-column: span 4; flex-direction: row; flex-wrap: wrap; gap: 12px; padding: 14px; }
       .quick { flex: 1 1 200px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; transition: border-color .15s, background .15s; }
       .stack > .quick { flex: none; }
       .quick:hover { border-color: var(--accent); background: var(--accent-soft); }
       .quick small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }
       .qi { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; }
       .qi.blue { background: var(--accent-soft); color: var(--accent-ink); }
       .qi.gold { background: var(--marigold-soft); color: var(--warn); }
       .qi.green { background: var(--good-soft); color: var(--good); }
       .qi.sand { background: var(--sand); color: var(--sand-ink); }

       /* Money */
       .charge { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; }
       .charge .t { font-weight: 600; }
       .charge .d { font-size: .8rem; color: var(--muted); }
       .total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 2px solid var(--ink); margin-top: 4px; }
       .total-row .stat { font-size: 2rem; }
       .explain { background: var(--accent-soft); border-radius: var(--r-md); padding: 16px 18px; font-size: .92rem; white-space: pre-line; }
       .method { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
       .method .logo { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: .9rem; flex: none; }
       .method .body { flex: 1; min-width: 0; }
       .method .body b { display: block; }
       .table-wrap { overflow-x: auto; }
       table.ledger { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
       table.ledger th { text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); }
       table.ledger td { padding: 11px 8px; border-bottom: 1px solid var(--line); }
       table.ledger tr:last-child td { border-bottom: 0; }
       table.ledger .r { text-align: right; font-variant-numeric: tabular-nums; }
       .amt-pay { color: var(--good); font-weight: 600; }
       .amt-owed { color: var(--bad); font-weight: 700; }
       details.form-drawer > summary { list-style: none; cursor: pointer; }
       details.form-drawer > summary::-webkit-details-marker { display: none; }
       details.form-drawer[open] > summary { margin-bottom: 14px; }

       /* Lease */
       .lease-hero { background: var(--sand); border-radius: var(--r-lg); padding: 26px; display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
       .lease-hero .tileico { width: 58px; height: 58px; border-radius: 16px; background: var(--surface); color: var(--sand-ink); display: grid; place-items: center; flex: none; box-shadow: var(--shadow); }
       .lease-hero .eyebrow { color: var(--sand-ink); }
       .lease-hero h1 { font-size: 1.6rem; }
       .lease-hero .meta { color: var(--sand-ink); margin-top: 6px; font-size: .92rem; }
       .occ { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
       .occ span { background: var(--surface); padding: 5px 12px 5px 5px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; }
       .occ span i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .64rem; font-weight: 800; background: var(--accent-soft); color: var(--accent-ink); }
       .occ span.me i { background: var(--marigold); color: var(--marigold-ink); }
       .track-line { position: relative; height: 10px; background: var(--surface-2); border-radius: 999px; margin: 34px 0 10px; }
       .track-line .fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 999px; }
       .track-line .mk { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); }
       .track-line .flag { position: absolute; bottom: 18px; transform: translateX(-50%); font-size: .72rem; font-weight: 700; white-space: nowrap; background: var(--ink); color: var(--canvas); padding: 3px 8px; border-radius: 7px; }
       .track-labels { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); gap: 8px; }
       .choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
       .choice { position: relative; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 16px; display: flex; flex-direction: column; gap: 6px; cursor: pointer; transition: border-color .15s, background .15s; }
       .choice:hover { border-color: var(--faint); }
       .choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
       .choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
       .choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
       .choice b { font-family: var(--font-display); }
       .choice span { font-size: .82rem; color: var(--muted); }
       .done-box { display: flex; gap: 12px; align-items: flex-start; background: var(--good-soft); border-radius: var(--r-md); padding: 14px 16px; }
       .done-box .icon { color: var(--good); }

       /* Docs / profile / help */
       .doc { display: flex; align-items: center; gap: 14px; padding: 13px 2px; }
       .doc .fi { width: 40px; height: 46px; border-radius: 9px; background: var(--bad-soft); color: var(--bad); display: grid; place-items: center; font-size: .62rem; font-weight: 800; letter-spacing: .04em; flex: none; }
       .doc .fi.ledger { background: var(--accent-soft); color: var(--accent-ink); }
       .doc .body { flex: 1; min-width: 0; }
       .doc .body b { display: block; font-weight: 600; }
       .doc .body span { font-size: .8rem; color: var(--muted); }
       .profile-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
       .profile-hero .avatar { width: 72px; height: 72px; font-size: 1.5rem; }
       .contact-card { display: flex; flex-direction: column; gap: 10px; }
       .contact-card .ci { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; }
       .contact-card .val { font-family: var(--font-display); font-weight: 800; font-size: 1.12rem; word-break: break-word; }
       details.faq { border-top: 1px solid var(--line); }
       details.faq:first-of-type { border-top: 0; }
       details.faq summary { list-style: none; cursor: pointer; padding: 15px 0; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
       details.faq summary::-webkit-details-marker { display: none; }
       details.faq summary::after { content: "+"; font-size: 1.2rem; color: var(--accent-ink); line-height: 1; }
       details.faq[open] summary::after { content: "–"; }
       details.faq p { padding: 0 0 16px; color: var(--muted); max-width: 65ch; }
       .req-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
       .req-row .body { flex: 1; min-width: 0; }
       .req-row .body p { color: var(--muted); font-size: .86rem; word-break: break-word; }
       /* Theme switch */
       .theme-btn { width: 38px; height: 38px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer; flex: none; }
       .theme-btn:hover { color: var(--ink); border-color: var(--faint); }
       .theme-btn .i-sun { display: none; }
       :root[data-theme="dark"] .theme-btn .i-sun { display: block; }
       :root[data-theme="dark"] .theme-btn .i-moon { display: none; }
       @media (prefers-color-scheme: dark) {
           :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; }
           :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; }
       }
       .theme-float { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); z-index: 30; }
       .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; flex-wrap: wrap; }
       .seg button { border: 0; background: var(--surface); padding: 9px 16px; font-weight: 700; font-size: .88rem; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
       .seg button + button { border-left: 1px solid var(--line); }
       .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
       #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; width: 100%; height: 100%; }

       @media (max-width: 1100px) {
           .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
           .tile-quick { grid-column: span 2; }
           .split { grid-template-columns: minmax(0, 1fr); }
           .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       }
       @media (max-width: 900px) {
           .shell { grid-template-columns: minmax(0, 1fr); }
           .sidebar { display: none; }
           .mobile-brand { display: flex; }
           .crumb { display: none; }
           .gutter { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
           .view { padding-block: 20px calc(100px + env(safe-area-inset-bottom, 0px)); }
           .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--glass); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-top: 1px solid var(--line); padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
           .tabbar a, .tabbar button { border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; font-size: .68rem; font-weight: 700; color: var(--faint); text-decoration: none; position: relative; cursor: pointer; }
           .tabbar .active { color: var(--accent-ink); }
           .tabbar .count { position: absolute; top: 0; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px; font-size: .6rem; }
       }
       @media (max-width: 640px) {
           h1, .greet h1 { font-size: 1.55rem; }
           .bento, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
           .tile-balance, .tile-quick, .tile-wide, .tile-balance-alt { grid-column: auto; grid-row: auto; }
           .card { padding: 18px; }
           .auth .card { padding: 1.75rem 1.25rem; }
       }
       @media (prefers-reduced-motion: reduce) {
           *, *::before, *::after { animation: none !important; transition: none !important; }
       }

/* ── Classes used by main's portal pages, restyled to match ── */
.card.wide { max-width: 920px; margin: 0 auto; }
.app .card.wide { max-width: none; margin: 0; }
.auth .card.wide { margin: 4vh auto 0; }
.form-grid { display: flex; flex-direction: column; gap: 1rem; }
.form-grid label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: .35rem; }
.form-grid input[type=text], .form-grid input[type=email], .form-grid input[type=tel], .form-grid input[type=password],
.form-grid input[type=date], .form-grid input[type=file], .form-grid select, .form-grid textarea {
    width: 100%; padding: .7rem .85rem; font-size: .95rem; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-grid textarea { min-height: 110px; resize: vertical; }
.form-grid .hint, .hint { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.btn-inline { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
              background: var(--accent); color: #fff; font-weight: 700; font-size: .9rem; text-decoration: none; cursor: pointer; }
.btn-inline:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn-inline.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-inline.secondary:hover { border-color: var(--faint); box-shadow: none; }
.alert-box { background: var(--bad-soft); color: var(--ink); border-radius: var(--r-md); padding: 14px 16px; font-size: .9rem; }
.alert-box strong { color: var(--bad); }
.pos { color: var(--bad); font-weight: 700; }
.neg { color: var(--good); font-weight: 600; }
.pill.paid { background: var(--good-soft); color: var(--good); }
.pill.partial { background: var(--marigold-soft); color: var(--warn); }
.pill.pending { background: var(--accent-soft); color: var(--accent-ink); }
.pill.unpaid { background: var(--bad-soft); color: var(--bad); }
.doc-list { display: flex; flex-direction: column; }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 13px 4px;
           text-decoration: none; color: inherit; border-top: 1px solid var(--line); }
.doc-list > .doc-row:first-child { border-top: 0; }
a.doc-row:hover .doc-title, a.doc-row:focus-visible .doc-title { color: var(--accent-ink); }
.doc-title { font-weight: 600; color: var(--ink); }
.doc-row .muted { font-size: .8rem; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent-ink); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.link-btn:disabled { color: var(--faint); cursor: wait; }
.explain-box { background: var(--accent-soft); border-radius: var(--r-md); padding: 16px 18px; }
.explain-out { font-size: .92rem; line-height: 1.55; white-space: pre-line; }
.explain-out.waiting { color: var(--muted); }
.explain-out.error { color: var(--bad); }
.photo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-grid img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.legal h3 { margin: 1.4rem 0 .5rem; font-size: 1rem; }
.legal p, .legal li { font-size: .9rem; line-height: 1.6; color: var(--ink); max-width: 70ch; }
.legal ul { padding-left: 1.25rem; margin: .4rem 0; }
.preview-banner { background: var(--marigold); color: var(--marigold-ink); padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
                  font-size: .85rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; position: relative; z-index: 35; }
.preview-banner a { color: var(--marigold-ink); font-weight: 800; }
.auth .preview-banner { border-radius: 12px; max-width: 920px; margin: 0 auto 1rem; }
.page-footer { text-align: center; font-size: .78rem; color: var(--faint); padding: 18px 16px 24px; }
.page-footer a { color: var(--muted); }
.app .page-footer { padding-bottom: 8px; }
.tab-panels > [hidden] { display: none; }
.kv span:first-child { color: var(--muted); }

/* Statement rows become small cards on phones, so amounts show without sideways scrolling. */
@media (max-width: 600px) {
    table.ledger { min-width: 0; }
    table.ledger thead { display: none; }
    table.ledger, table.ledger tbody, table.ledger tr, table.ledger td { display: block; width: 100%; }
    table.ledger tr { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; }
    table.ledger td { display: flex; justify-content: space-between; gap: 1rem; border: 0 !important; padding: 4px 0; text-align: right; }
    table.ledger td::before { content: attr(data-label); color: var(--muted); font-weight: 500; text-align: left; }
    table.ledger td.empty { display: none; }
}