/* =====================================================================
   RENTSMART — Mobile-First Design System
   ===================================================================== */

/* ── Design Tokens ─────────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand: #146a57;
  --brand-deep: #0d5243;
  --brand-light: #e6f4f0;
  --brand-mid: rgba(20, 106, 87, 0.12);
  --brand-glow: rgba(20, 106, 87, 0.18);

  /* Accent */
  --accent: #e07842;
  --accent-deep: #c05e2a;
  --accent-light: #fef0e6;
  --accent-mid: rgba(224, 120, 66, 0.14);

  /* Background */
  --bg: #f4f1ea;
  --bg-deep: #ece7dc;
  --bg-card: #ffffff;

  /* Surface */
  --surface: #ffffff;
  --surface-soft: #faf8f3;
  --surface-raised: #ffffff;

  /* Text */
  --ink: #0f2820;
  --ink-mid: #2a4438;
  --ink-soft: #4a6358;
  --ink-muted: #7a9488;

  /* Border */
  --line: #ddd7c9;
  --line-soft: #eae4d8;
  --line-strong: #c8c0b0;

  /* Semantic aliases (used by walkthrough module) */
  --border: var(--line);
  --primary: var(--brand);
  --text: var(--ink);
  --text-secondary: var(--ink-soft);

  /* Status */
  --success: #15803d;
  --success-bg: #dcfce7;
  --warning: #b45309;
  --warning-bg: #fef3c7;
  --danger: #b91c1c;
  --danger-bg: #fee2e2;
  --info: #1d4ed8;
  --info-bg: #dbeafe;

  /* Radius */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-full: 999px;

  /* Shadows */
  --shadow-xs:  0 1px 4px rgba(15, 40, 32, 0.06);
  --shadow-sm:  0 2px 10px rgba(15, 40, 32, 0.08);
  --shadow-md:  0 6px 24px rgba(15, 40, 32, 0.11);
  --shadow-lg:  0 14px 48px rgba(15, 40, 32, 0.15);
  --shadow-card: 0 4px 18px rgba(15, 40, 32, 0.09);
  --shadow-soft: 0 14px 35px rgba(15, 40, 32, 0.10);

  /* Layout */
  --page-x: 1rem;
  --top-bar-h: 68px;
  --bottom-nav-h: 66px;

  /* Z-index scale */
  --z-map:        50;
  --z-sticky:    100;
  --z-nav:       200;
  --z-bottom-nav:300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-qa:       9999;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 0.15s;
  --dur: 0.22s;
  --dur-slow: 0.35s;
}

/* ── Reset & Base ───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 14%, rgba(224, 120, 66, 0.09), transparent 38%),
    radial-gradient(circle at 82% 20%, rgba(20, 106, 87, 0.08), transparent 38%),
    linear-gradient(140deg, #f5f2eb 0%, #ece8df 100%),
    url("/static/src/images/rentbg.png") center / cover no-repeat fixed;
  /* Extra bottom padding on mobile for bottom nav */
  padding-bottom: var(--bottom-nav-h);
}

h1, h2, h3, h4, h5 {
  font-family: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.8rem, 4.5vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 3vw, 1.95rem); font-weight: 600; }
h3 { font-size: 1.15rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; }
h5 { font-size: 0.9rem; font-weight: 600; }

/* UI labels / nav / buttons — use Jakarta Sans, not Fraunces */
button, label, input, select, textarea {
  font-family: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

p { margin: 0 0 0.75em; line-height: 1.65; }

img { display: block; max-width: 100%; }

button { font-family: inherit; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* ── Typography helpers ─────────────────────────────────────────────── */
.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
  font-size: 0.7rem;
  font-weight: 800;
}

.subtext {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.55;
}

/* ── Layout wrappers ────────────────────────────────────────────────── */
.page {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--page-x) 2rem;
}

.mode-section {
  display: grid;
  gap: 1rem;
  padding-top: 0.5rem;
}

.hidden { display: none !important; }

/* ── Animations ─────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

.sub-page { animation: fadeIn var(--dur-fast) var(--ease); }

/* =====================================================================
   NAVIGATION — TOP BAR
   ===================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  width: 100%;
  padding: 0.6rem var(--page-x);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(221, 215, 201, 0.55);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--top-bar-h);
}

/* Brand */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.brand-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #f0faf6;
  font-size: 1rem;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  box-shadow: 0 3px 10px rgba(20, 106, 87, 0.35);
}

/* Site nav */
.site-nav {
  display: flex;
  gap: 0.3rem;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav::-webkit-scrollbar { display: none; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: all var(--dur-fast) var(--ease);
}
.nav-link i { font-size: 0.85rem; }
.nav-link:hover {
  background: var(--brand-mid);
  color: var(--brand-deep);
}
.nav-link.active {
  background: var(--brand-mid);
  border-color: rgba(20, 106, 87, 0.25);
  color: var(--brand-deep);
}

/* Topbar end cluster */
.topbar-end {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Role switcher */
.role-switcher {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--brand-mid);
  border: 1px solid rgba(20, 106, 87, 0.22);
  border-radius: var(--r-full);
  padding: 0.3rem 0.65rem;
}
.role-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--brand-deep);
  white-space: nowrap;
}
.role-switcher select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-deep);
  cursor: pointer;
  outline: none;
}

/* Auth actions */
.auth-actions {
  display: flex;
  gap: 0.4rem;
}

/* =====================================================================
   HAMBURGER BUTTON
   ===================================================================== */

.hamburger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: var(--r-sm);
  padding: 8px;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease);
}
.hamburger-btn:hover { background: var(--brand-mid); }
.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), width var(--dur) var(--ease);
  transform-origin: center;
}

/* Animate to X when open */
.hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =====================================================================
   SIDEBAR DRAWER
   ===================================================================== */

/* Backdrop overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 24, 18, 0.45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: calc(var(--z-modal) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.sidebar-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* The drawer itself */
.sidebar-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--surface);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 40px rgba(10, 24, 18, 0.18);
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
  overflow: hidden;
}

/* On mobile: full-width */
@media (max-width: 480px) {
  .sidebar-drawer { width: 100%; }
}

.sidebar-drawer.is-open {
  transform: translateX(0);
}

/* Drawer header */
.sidebar-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 1rem 1.1rem;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
  background: linear-gradient(160deg, #f8fdf9 0%, #f0f9f4 100%);
}

.sidebar-close-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  display: grid;
  place-items: center;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--dur-fast);
  flex-shrink: 0;
}
.sidebar-close-btn:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-light);
}

/* ── User section ─────────────────────────────────────────────────── */

.sidebar-user-section {
  flex-shrink: 0;
  border-bottom: 1px solid var(--line-soft);
}

.sidebar-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: background var(--dur-fast);
  border-radius: 0;
}
.sidebar-user-card:hover { background: var(--bg); }

.sidebar-user-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}

.sidebar-user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #f0faf6;
  font-size: 0.78rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(20, 106, 87, 0.28);
}

.sidebar-user-info { min-width: 0; }
.sidebar-user-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.sidebar-user-role {
  font-size: 0.73rem;
  color: var(--ink-soft);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1px;
}

.sidebar-user-arrow {
  color: var(--ink-muted);
  font-size: 0.75rem;
  transition: transform var(--dur-fast);
  flex-shrink: 0;
}
.sidebar-user-card.expanded .sidebar-user-arrow {
  transform: rotate(90deg);
}

/* User sub-menu (logout etc.) */
.sidebar-user-submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.sidebar-user-submenu.expanded {
  max-height: 200px;
}

.sidebar-user-submenu-inner {
  display: flex;
  padding: 0 0 0.75rem 0;
}
.sidebar-submenu-line {
  width: 2px;
  background: var(--line);
  margin: 0 0 0 1.95rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.sidebar-submenu-items {
  flex: 1;
  padding: 0 0.5rem 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.sidebar-submenu-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--r-md);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--ink-soft);
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.sidebar-submenu-item i { font-size: 0.82rem; color: var(--ink-muted); width: 16px; text-align: center; }
.sidebar-submenu-item:hover { background: var(--bg); color: var(--ink); }
.sidebar-submenu-item.danger { color: #b91c1c; }
.sidebar-submenu-item.danger i { color: #b91c1c; }
.sidebar-submenu-item.danger:hover { background: #fee2e2; }

/* ── Nav items ────────────────────────────────────────────────────── */

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* Section divider label */
.sidebar-nav-section-label {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  padding: 0.65rem 0.75rem 0.25rem;
}

/* Nav item row */
.sidebar-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.72rem 0.85rem;
  border-radius: var(--r-md);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-mid);
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  min-height: 48px;
}
.sidebar-nav-item:hover {
  background: var(--bg);
  color: var(--ink);
}
.sidebar-nav-item.active {
  background: var(--brand-mid);
  color: var(--brand-deep);
}
.sidebar-nav-item.active .sidebar-nav-item-icon { color: var(--brand); }

.sidebar-nav-item-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
}

.sidebar-nav-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: color var(--dur-fast);
}

.sidebar-nav-item-label {
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-nav-item-badge {
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.sidebar-nav-item-badge.new {
  background: var(--brand);
  color: #fff;
}
.sidebar-nav-item-badge.beta {
  background: var(--accent-mid);
  color: var(--accent-deep);
}

.sidebar-nav-item-arrow {
  color: var(--ink-muted);
  font-size: 0.72rem;
  transition: transform var(--dur-fast);
  flex-shrink: 0;
}
.sidebar-nav-item.expanded .sidebar-nav-item-arrow {
  transform: rotate(90deg);
}

/* Sub-items (expandable children) */
.sidebar-nav-subitems {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur) var(--ease);
}
.sidebar-nav-subitems.expanded {
  max-height: 400px;
}
.sidebar-subitems-inner {
  display: flex;
  padding: 0.25rem 0 0.5rem;
}
.sidebar-subitems-line {
  width: 2px;
  background: var(--line);
  margin-left: 1.65rem;
  border-radius: 2px;
  flex-shrink: 0;
}
.sidebar-subitems-list {
  flex: 1;
  padding: 0 0.35rem 0 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.sidebar-nav-subitem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  width: 100%;
  text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
  min-height: 40px;
}
.sidebar-nav-subitem i { font-size: 0.8rem; color: var(--ink-muted); width: 14px; text-align: center; }
.sidebar-nav-subitem:hover { background: var(--bg); color: var(--ink); }
.sidebar-nav-subitem.active { color: var(--brand-deep); background: var(--brand-light); }
.sidebar-nav-subitem.active i { color: var(--brand); }

/* ── Drawer footer ────────────────────────────────────────────────── */

.sidebar-drawer-footer {
  flex-shrink: 0;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface-soft);
}
.sidebar-footer-text {
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.sidebar-footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
  flex-shrink: 0;
}

/* =====================================================================
   MOBILE BOTTOM NAVIGATION
   ===================================================================== */

.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-bottom-nav);
  display: flex;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-soft);
  height: var(--bottom-nav-h);
  padding: 0 0.25rem env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 24px rgba(15, 40, 32, 0.08);
}

.mbn-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.22rem;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.5rem 0.25rem;
  border-radius: var(--r-md);
  margin: 0.3rem 0.1rem;
  transition: all var(--dur-fast) var(--ease);
  position: relative;
}
.mbn-tab i {
  font-size: 1.15rem;
  transition: transform var(--dur-fast) var(--ease);
}
.mbn-tab:hover { color: var(--brand); }
.mbn-tab.active {
  color: var(--brand);
  background: var(--brand-mid);
}
.mbn-tab.active i { transform: translateY(-1px); }

/* Add / List tab — prominent pill */
.mbn-tab.mbn-add {
  flex: 0 0 auto;
  width: 3.2rem;
  height: 3.2rem;
  margin: auto 0.5rem;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff;
  font-size: 0.62rem;
  box-shadow: 0 4px 14px rgba(20, 106, 87, 0.4);
}
.mbn-tab.mbn-add i { font-size: 1.2rem; }
.mbn-tab.mbn-add:hover {
  background: linear-gradient(145deg, var(--brand-deep), #09382b);
  transform: scale(1.05);
}

/* Hide bottom nav on desktop */
@media (min-width: 1024px) {
  .mobile-bottom-nav { display: none; }
  body { padding-bottom: 0; }
}

/* =====================================================================
   BUTTONS
   ===================================================================== */

.cta-btn,
.ghost-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: var(--r-full);
  padding: 0.6rem 1.1rem;
  border: 1.5px solid transparent;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  white-space: nowrap;
  min-height: 44px;
  -webkit-user-select: none;
  user-select: none;
}
.cta-btn i, .ghost-btn i { font-size: 0.9rem; }

.cta-btn {
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #f0faf6;
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(20, 106, 87, 0.28);
}
.cta-btn:hover {
  background: linear-gradient(145deg, var(--brand-deep), #09382b);
  box-shadow: 0 5px 18px rgba(20, 106, 87, 0.38);
  transform: translateY(-1px);
}
.cta-btn:active { transform: translateY(0); }

.ghost-btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
}
.ghost-btn:hover {
  background: var(--bg);
  border-color: var(--line-strong);
}

.cta-btn:disabled,
.ghost-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.ghost-btn.small,
.cta-btn.small {
  padding: 0.38rem 0.75rem;
  font-size: 0.78rem;
  min-height: 36px;
}

/* Accent / orange variant */
.cta-btn.accent {
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: 0 3px 12px rgba(224, 120, 66, 0.3);
}
.cta-btn.accent:hover {
  box-shadow: 0 5px 18px rgba(224, 120, 66, 0.4);
}

/* =====================================================================
   SECTION SUBNAV (tab pills)
   ===================================================================== */

.section-subnav {
  display: flex;
  gap: 0.3rem;
  padding: 0.5rem 0;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.section-subnav::-webkit-scrollbar { display: none; }

.subnav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
  min-height: 36px;
  transition: all var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.subnav-btn i { font-size: 0.82rem; }
.subnav-btn:hover {
  background: var(--brand-mid);
  color: var(--brand-deep);
}
.subnav-btn.active {
  background: var(--brand-mid);
  color: var(--brand-deep);
  border: 1px solid rgba(20, 106, 87, 0.2);
}

/* =====================================================================
   PANEL / CARD BASE
   ===================================================================== */

.panel, .hero-block {
  background: linear-gradient(160deg, #fffdf9 0%, #f8f4ec 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 1.25rem;
}

@media (min-width: 768px) {
  .panel, .hero-block { padding: 1.5rem; }
}

/* =====================================================================
   HERO + SEARCH
   ===================================================================== */

.hero-block {
  background: linear-gradient(155deg, #f5fbf8 0%, #edf6f2 50%, #f2ede3 100%);
  border-radius: var(--r-lg);
  padding: 1.75rem 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.hero-block::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 106, 87, 0.08), transparent 70%);
  pointer-events: none;
}

.hero-block h1 {
  margin: 0.5rem 0 0.6rem;
  font-family: "Nunito Sans", "Avenir Next", system-ui, sans-serif;
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  max-width: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.hero-block h1 em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}

/* Search form */
.search-shell {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 640px) {
  .search-shell {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .search-shell .search-field { flex: 1; min-width: 180px; }
  .search-shell .field { min-width: 130px; }
}

@media (min-width: 900px) {
  .search-shell {
    flex-wrap: nowrap;
    gap: 0.55rem;
  }
  .search-shell .search-field { flex: 2.2; }
  .search-shell .field { flex: 1; }
}

/* Field */
.field {
  display: grid;
  gap: 0.2rem;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  position: relative;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 106, 87, 0.1);
}

.field > span {
  text-transform: uppercase;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.field > span i { color: var(--brand); font-size: 0.72rem; }

.field input,
.field textarea,
.field select {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  width: 100%;
  min-height: 26px;
}
.field input::placeholder { color: var(--ink-muted); font-weight: 500; }

/* Autocomplete suggestions */
.suggestions {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  margin: 0;
  list-style: none;
  padding: 0.5rem;
  border: 1.5px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md);
  max-height: 200px;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  z-index: var(--z-sticky);
}
.suggestions:empty {
  display: none;
}
.suggestions li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--ink-mid);
  transition: background var(--dur-fast);
}
.suggestions li::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--brand);
  font-size: 0.75rem;
}
.suggestions li:hover { background: var(--brand-light); color: var(--brand-deep); }

/* Search submit button */
.search-shell .cta-btn[type="submit"] {
  min-height: 52px;
  padding: 0.65rem 1.5rem;
  font-size: 0.92rem;
  width: 100%;
}
@media (min-width: 640px) {
  .search-shell .cta-btn[type="submit"] { width: auto; }
}

/* Quick filters */
.quick-filters {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.75rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  min-height: 36px;
}
.chip-toggle:has(input:checked) {
  background: var(--brand-mid);
  border-color: rgba(20, 106, 87, 0.3);
  color: var(--brand-deep);
}
.chip-toggle input[type="checkbox"] { display: none; }
.chip-toggle select {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: inherit;
  outline: none;
  cursor: pointer;
}

/* Applied filter chips */
.applied-chips {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}
.applied-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--r-full);
  padding: 0.25rem 0.6rem;
  background: var(--brand-mid);
  border: 1px solid rgba(20, 106, 87, 0.25);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-deep);
}

/* =====================================================================
   RESULTS LAYOUT (listing list + map)
   ===================================================================== */

.results-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}

@media (min-width: 900px) {
  .results-layout {
    grid-template-columns: 1fr 1.4fr;
  }
}

.section-head {
  margin-bottom: 0.75rem;
}
.section-head h2 { margin: 0 0 0.2rem; font-size: 1.2rem; }
.section-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

/* Listing grid */
.listing-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 480px) and (max-width: 899px) {
  .listing-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   LISTING CARD (placard)
   ===================================================================== */

.listing-card {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.listing-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--line);
}
.listing-card.selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 106, 87, 0.12), var(--shadow-md);
}

/* Card header (title + save) */
.placard-header {
  padding: 0.75rem 0.9rem 0.5rem;
  background: transparent;
  border-bottom: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  order: 2;
}

.property-information { min-width: 0; flex: 1; }

.property-link {
  border: none;
  background: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  width: 100%;
}

.property-title .title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink);
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.property-address {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.15rem;
  color: var(--ink-soft);
  font-size: 0.76rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.property-address::before {
  content: "\f3c5";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--accent);
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* Save / favorite button */
.favorite-wrapper { flex-shrink: 0; }

.favoriteIcon {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  min-height: 34px;
}
.favoriteIcon.neutral {
  background: var(--surface);
  color: var(--ink-mid);
}
.favoriteIcon.neutral::before {
  content: "\f004";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.favoriteIcon.liked {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-deep);
}
.favoriteIcon.liked:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}
.favoriteIcon.liked::before {
  content: "\f004";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.85rem;
  color: #fff;
}

/* Card media section */
.placard-content {
  padding: 0;
  order: 1;
}

.content-inner {
  display: flex;
  flex-direction: column;
}

.media-wrapper {
  border-radius: 0;
  overflow: hidden;
  background: #e4ece9;
  position: relative;
}

.media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.placard-media-track {
  height: 100%;
  width: 100%;
  display: flex;
  transition: transform 0.28s var(--ease);
}

.placard-image {
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
  object-fit: cover;
  display: block;
  cursor: pointer;
}

.placard-media-placeholder {
  height: 100%;
  width: 100%;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(20, 106, 87, 0.18), rgba(15, 40, 32, 0.25));
  color: #d0e8e1;
  font-size: 2.5rem;
  cursor: pointer;
}

/* Image counter */
.placardCarouselImgCount {
  position: absolute;
  top: 0.55rem;
  left: 0.55rem;
  padding: 0.22rem 0.5rem;
  border-radius: var(--r-full);
  background: rgba(15, 25, 20, 0.6);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

/* Carousel controls */
.galleryControl {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  display: flex;
  gap: 0.3rem;
}

.imageCarouselLeftContainer,
.imageCarouselRightContainer {
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(15, 25, 20, 0.62);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-fast);
  backdrop-filter: blur(4px);
}
.imageCarouselLeftContainer:hover,
.imageCarouselRightContainer:hover {
  background: rgba(15, 25, 20, 0.82);
}

/* Area badge overlay */
.placardBanner {
  position: absolute;
  left: 0.55rem;
  bottom: 0.55rem;
}
.placardBanner .virtualTour {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--r-full);
  padding: 0.22rem 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(15, 25, 20, 0.6);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}

/* Property info block (below image) */
.property-info {
  padding: 0.75rem 0.9rem;
  display: grid;
  gap: 0.4rem;
  order: 3;
}

.top-level-info { display: none; } /* Hide old rent rollup */

.property-meta {
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.35;
}
.property-meta:first-of-type {
  font-size: 0.82rem;
  color: var(--ink-mid);
  font-weight: 600;
}

/* Card price + actions row */
.property-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--brand);
  background: var(--brand-light);
  padding: 0.35rem 0.75rem;
  color: var(--brand-deep);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.phone-link:hover {
  background: var(--brand-mid);
  border-color: var(--brand-deep);
}

.checkAvailability {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: none;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #f0faf6;
  padding: 0.38rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur-fast);
  box-shadow: 0 2px 8px rgba(20, 106, 87, 0.25);
}
.checkAvailability:hover {
  box-shadow: 0 4px 14px rgba(20, 106, 87, 0.35);
  transform: translateY(-1px);
}

/* Badges */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.1rem;
}
.badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--r-full);
  border: 1px solid rgba(20, 106, 87, 0.25);
  background: var(--brand-light);
  color: var(--brand-deep);
  padding: 0.18rem 0.48rem;
  font-size: 0.7rem;
  font-weight: 700;
}

/* =====================================================================
   MAP PANEL
   ===================================================================== */

.map-panel {
  position: sticky;
  top: calc(var(--top-bar-h) + 0.5rem);
  background: linear-gradient(160deg, #fffef8 0%, #f7f2e5 100%);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-shadow: var(--shadow-card);
}
@media (max-width: 899px) {
  .map-panel { position: static; border-radius: var(--r-md); }
  .map-hidden-mobile .map-panel { display: none; }
}

.map-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}
.map-head h3 { margin: 0; font-size: 1rem; }

.map-nav-consolidated {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}
.map-nav-consolidated .nav-item { position: relative; }
.map-nav-consolidated .mortar-wrapper {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.map-nav-consolidated button {
  border: 1.5px solid var(--line);
  background: var(--surface);
  color: var(--ink-mid);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.78rem;
  min-height: 34px;
  padding: 0.32rem 0.6rem;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.map-nav-consolidated button:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-deep);
}
.map-nav-consolidated button.active {
  border-color: var(--brand);
  background: var(--brand-mid);
  color: var(--brand-deep);
}
.map-nav-consolidated button:disabled { opacity: 0.45; cursor: not-allowed; }

.map-nav-consolidated .zoomIn,
.map-nav-consolidated .zoomOut {
  width: 2rem;
  min-height: 2rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  display: grid;
  place-items: center;
}

.map-options-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: var(--z-sticky);
  min-width: 180px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.5rem;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 0.35rem;
}
.map-options-menu label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-xs);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-mid);
  cursor: pointer;
}
.map-options-menu label:hover { background: var(--bg); }
.map-options-menu input, .map-options-menu select {
  accent-color: var(--brand);
}
.map-options-menu select {
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 0.2rem 0.4rem;
  font-size: 0.78rem;
  background: var(--surface);
}

.map-surface {
  margin-top: 0.5rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: #f4efe1;
  position: relative;
  overflow: hidden;
}

.google-map-canvas {
  position: absolute;
  inset: 0;
}
.map-pin-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #eff8f4;
  border-radius: var(--r-full);
  border: 2px solid rgba(255,255,255,0.5);
  padding: 0.28rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(15, 40, 32, 0.3);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast);
}
.map-pin:hover { transform: translate(-50%, -55%) scale(1.05); }
.map-pin.selected {
  background: linear-gradient(145deg, var(--accent), var(--accent-deep));
  box-shadow: 0 3px 12px rgba(224, 120, 66, 0.45);
}

/* Map popup card */
.gm-style-iw-c {
  padding: 0 !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 24px rgba(0,0,0,0.2) !important;
  overflow: hidden !important;
}
.gm-style-iw-d { overflow: hidden !important; padding: 0 !important; }
.gm-ui-hover-effect { top: 4px !important; right: 4px !important; opacity: 0.7 !important; }

.map-popup-card {
  width: 280px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
}
.mpc-media {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: #e8ede9;
}
.mpc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s var(--ease);
}
.map-popup-card:hover .mpc-img { transform: scale(1.04); }
.mpc-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #9ab; font-size: 2rem;
}
.mpc-arrow {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.42); color: #fff;
  border: none; width: 28px; height: 28px;
  border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; z-index: 2; transition: background 0.15s;
}
.mpc-arrow:hover { background: rgba(0,0,0,0.65); }
.mpc-prev { left: 8px; }
.mpc-next { right: 8px; }
.mpc-dots {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; z-index: 2;
}
.mpc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.5); transition: background 0.15s;
}
.mpc-dot.active { background: #fff; }
.mpc-body { padding: 12px 14px 14px; }
.mpc-price { font-size: 1.05rem; font-weight: 800; color: var(--brand); }
.mpc-per { font-size: 0.72rem; font-weight: 400; color: #667; }
.mpc-title {
  font-size: 0.85rem; font-weight: 700; color: var(--ink);
  margin: 4px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mpc-meta { font-size: 0.72rem; color: var(--ink-soft); margin-bottom: 8px; }
.mpc-badge {
  display: inline-block; font-size: 0.68rem; font-weight: 700;
  background: var(--brand-light); color: var(--brand);
  padding: 2px 8px; border-radius: 20px; margin-bottom: 8px;
}
.mpc-view-btn {
  width: 100%; padding: 9px;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff; border: none; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}
.mpc-view-btn:hover { opacity: 0.9; transform: translateY(-1px); }

.map-note {
  margin: 0.6rem 0 0;
  color: var(--ink-muted);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.map-note::before {
  content: "\f05a";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--brand);
  font-size: 0.7rem;
}

/* =====================================================================
   DUAL PANELS (favorites + actions)
   ===================================================================== */

.dual-panels {
  display: grid;
  gap: 1rem;
}
@media (min-width: 768px) {
  .dual-panels { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   META / INFO BLOCKS
   ===================================================================== */

.meta-block {
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 0.85rem;
  font-size: 0.87rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* =====================================================================
   FORMS (stacked)
   ===================================================================== */

.stacked-form {
  display: grid;
  gap: 0.6rem;
}
.stacked-form h4 { margin: 0 0 0.25rem; font-size: 1rem; }

.stacked-form label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--ink-mid);
}
.stacked-form label:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.stacked-form input,
.stacked-form textarea,
.stacked-form select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.6rem 0.8rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  min-height: 44px;
}
.stacked-form input:focus,
.stacked-form textarea:focus,
.stacked-form select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 106, 87, 0.1);
}
.stacked-form textarea { min-height: 100px; resize: vertical; }
.stacked-form input[type="checkbox"] { width: auto; min-height: auto; accent-color: var(--brand); }

/* Feedback messages */
.feedback {
  min-height: 1.2rem;
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  display: block;
  white-space: pre-line;
  line-height: 1.6;
}
.feedback.error { color: var(--danger); }
.feedback.success { color: var(--success); }

/* ── Inline field validation ─────────────────────────────────────────────── */
.field-invalid {
  border-color: var(--danger) !important;
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
}
.field-error-msg {
  display: block;
  font-size: 0.76rem;
  color: var(--danger);
  margin-top: 0.2rem;
  margin-bottom: 0.25rem;
}

/* ── Publish review checklist ────────────────────────────────────────────── */
.publish-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 1rem 0 1.2rem;
}
.publish-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
  padding: 0.45rem 0.65rem;
  border-radius: 8px;
}
.publish-check--ok {
  background: color-mix(in srgb, var(--success) 10%, transparent);
  color: var(--success);
}
.publish-check--fail {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  color: var(--danger);
}
.publish-check span { flex: 1; }
.publish-check-fix {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--danger);
  color: var(--danger);
  background: transparent;
  cursor: pointer;
}
.publish-check-fix:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* =====================================================================
   LISTING DETAIL PAGE
   ===================================================================== */

.detail-shell {
  display: grid;
  gap: 1rem;
  padding-top: 0.5rem;
}

.detail-topbar {
  display: flex;
  align-items: center;
}

.detail-hero {
  display: grid;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 768px) {
  .detail-hero { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.75fr); }
}

.detail-gallery {
  border: 1.5px solid var(--line-soft);
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 0.75rem;
  box-shadow: var(--shadow-card);
}

.detail-main-media-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-soft);
  background: #eef3ef;
}
.detail-main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-thumb-strip {
  margin-top: 0.6rem;
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.detail-thumb-strip::-webkit-scrollbar { display: none; }

.detail-thumb {
  border: 2.5px solid transparent;
  border-radius: var(--r-sm);
  padding: 0;
  width: 88px;
  height: 60px;
  overflow: hidden;
  background: var(--bg);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color var(--dur-fast);
}
.detail-thumb.active { border-color: var(--brand); }
.detail-thumb img { width: 100%; height: 100%; object-fit: cover; }

.detail-contact-card {
  border: 1.5px solid var(--line-soft);
  background: linear-gradient(155deg, #fffdf6 0%, #f5ede0 100%);
  border-radius: var(--r-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-md);
  display: grid;
  gap: 0.6rem;
}
@media (min-width: 768px) {
  .detail-contact-card {
    position: sticky;
    top: calc(var(--top-bar-h) + 0.5rem);
  }
}
.detail-contact-card h2 { margin: 0; font-size: 1.6rem; color: var(--brand-deep); }
.detail-contact-card .eyebrow { margin-bottom: 0.1rem; }

.wt-inspection-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: var(--r-full);
  border: 2px solid var(--brand);
  background: var(--brand-light);
  color: var(--brand-deep);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  transition: all var(--dur-fast);
  min-height: 48px;
}
.wt-inspection-cta:hover {
  background: var(--brand-mid);
  box-shadow: 0 4px 14px rgba(20, 106, 87, 0.2);
}

.detail-body { display: grid; gap: 0.85rem; }

.detail-headline {
  margin: 0.4rem 0;
  color: var(--ink-mid);
  font-size: 1rem;
  font-weight: 700;
}

.detail-facts {
  margin: 0.5rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.detail-facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-soft);
  color: var(--ink-mid);
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.detail-description {
  margin: 0.2rem 0 0;
  color: var(--ink-soft);
  line-height: 1.65;
  font-size: 0.92rem;
}

.detail-amenities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.detail-amenities span {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface-soft);
  color: var(--ink-mid);
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 700;
}

/* =====================================================================
   PLACEHOLDER PAGES (area guides, about, etc.)
   ===================================================================== */

.placeholder-page { padding: 0.5rem 0 2rem; }
.placeholder-header { margin-bottom: 1.5rem; }
.placeholder-header h2 { margin: 0 0 0.4rem; }
.placeholder-header .subtext { margin: 0; }

.phase-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.6rem;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-full);
  background: var(--accent-mid);
  border: 1px solid rgba(224, 120, 66, 0.28);
  color: var(--accent-deep);
  font-size: 0.72rem;
  font-weight: 800;
}

.placeholder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.placeholder-card {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 1.25rem;
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.placeholder-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.placeholder-card h4 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.placeholder-card p {
  margin: 0;
  font-size: 0.83rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.placeholder-icon-text {
  font-size: 2rem;
  font-weight: 800;
  font-family: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--brand);
  margin-bottom: 0.4rem;
  line-height: 1;
}

/* Stat cards */
.stat-card { text-align: center; padding: 1.5rem 1rem; }
.stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  font-family: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--brand-deep);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }

/* Trust cards */
.trust-card { display: flex; flex-direction: column; gap: 0.5rem; }
.trust-badge-icon {
  font-size: 1.5rem;
  color: var(--brand);
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
}

/* Area guides */
.area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}

.area-card {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 1.1rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
  font-family: inherit;
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
}
.area-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.area-card:hover {
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.area-card:hover::before { opacity: 1; }

.area-card-name {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.area-card-sub { font-size: 0.73rem; color: var(--ink-soft); margin-bottom: 0.6rem; }
.area-card-tags { display: flex; flex-wrap: wrap; gap: 0.28rem; }
.area-card-tags span {
  background: var(--brand-light);
  color: var(--brand-deep);
  border-radius: var(--r-full);
  padding: 0.15rem 0.45rem;
  font-size: 0.7rem;
  font-weight: 700;
}

/* How it works */
.hiw-cols { display: grid; gap: 1.1rem; }
@media (min-width: 640px) {
  .hiw-cols { grid-template-columns: 1fr 1fr; }
}
.hiw-steps {
  margin: 0.75rem 0 0;
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  counter-reset: step;
}
.hiw-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
  counter-increment: step;
}
.hiw-steps li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--brand-mid);
  color: var(--brand-deep);
  font-weight: 800;
  font-size: 0.72rem;
  display: grid;
  place-items: center;
  margin-top: 0.1rem;
}
.hiw-steps li strong { color: var(--ink); }

/* About */
.about-mission { margin-bottom: 1.5rem; }
.about-mission p { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 0.75rem; }

/* Future expansion banner */
.future-expansion-banner {
  margin-top: 2rem;
  border-top: 1px solid var(--line-soft);
  padding-top: 1.25rem;
}
.expansion-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.expansion-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--ink-muted);
  white-space: nowrap;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.expansion-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.expansion-items span {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-muted);
}

/* =====================================================================
   ACCOUNT SECTION
   ===================================================================== */

.account-profile-layout {
  display: grid;
  gap: 1rem;
  margin-top: 0.5rem;
}
@media (min-width: 640px) {
  .account-profile-layout { grid-template-columns: 240px 1fr; }
}

.profile-card {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.profile-avatar-wrap {
  position: relative;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}
.profile-avatar-wrap:hover .profile-avatar-overlay { opacity: 1; }
.profile-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #f0faf6;
  font-size: 1.6rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 14px rgba(20, 106, 87, 0.3);
  border: 3px solid rgba(255,255,255,0.8);
  overflow: hidden;
}
/* when no photo: show dashed border + muted colour to hint it's uploadable */
.profile-avatar.no-photo {
  background: var(--bg-soft);
  color: var(--ink-soft);
  border: 2.5px dashed var(--line-soft);
  box-shadow: none;
  font-size: 1rem;
}
.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.profile-avatar-overlay i { font-size: 1.1rem; }
/* always show overlay when there's no photo */
.profile-avatar-wrap.no-photo .profile-avatar-overlay {
  opacity: 1;
  background: rgba(0,0,0,0.18);
}
.profile-card h3 { margin: 0; }

.verification-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
}
.verification-badge.unverified {
  background: var(--accent-mid);
  color: var(--accent-deep);
  border: 1px solid rgba(224, 120, 66, 0.28);
}
.verification-badge.verified {
  background: var(--brand-mid);
  color: var(--brand-deep);
  border: 1px solid rgba(20, 106, 87, 0.25);
}

.profile-fields { display: flex; flex-direction: column; gap: 0.6rem; }

/* Verification checklist */
.verification-checklist {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.verification-checklist li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.87rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--r-md);
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
}
.verification-checklist li::before {
  content: "\f111";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 0.7rem;
  flex-shrink: 0;
}
.verification-checklist li.check-done::before {
  content: "\f058";
  font-weight: 900;
  color: var(--brand);
}

/* Status chips */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-full);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.3rem;
}
.status-chip.pending {
  background: var(--warning-bg);
  color: var(--warning);
}
.status-chip.active {
  background: var(--success-bg);
  color: var(--success);
}

/* Add card placeholder */
.add-card {
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.88rem;
  font-weight: 700;
  min-height: 90px;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.add-card:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-deep);
}

/* =====================================================================
   SMALL LIST / ITEMS
   ===================================================================== */

/* ── Site Footer ───────────────────────────────────────────────────────── */

.site-footer {
  background: var(--ink);
  color: var(--ink-muted);
  padding: 2.5rem 1.25rem 1.5rem;
  margin-top: auto;
  /* keep above mobile bottom nav */
  padding-bottom: calc(1.5rem + 66px);
}
@media (min-width: 1024px) {
  .site-footer { padding-bottom: 1.5rem; }
}

.site-footer-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.footer-brand .brand-mark {
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #f0faf6;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.footer-brand-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.footer-tagline {
  font-size: 0.82rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
}
.footer-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid #374151;
  border-radius: var(--r-full);
  background: transparent;
  color: #9ca3af;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.footer-nav-btn i { font-size: 0.75rem; }
.footer-nav-btn:hover,
.footer-nav-btn.active {
  border-color: var(--brand);
  color: #f0faf6;
  background: rgba(20,106,87,.18);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 1.25rem;
  border-top: 1px solid #1f2937;
}
@media (min-width: 640px) {
  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer-copy {
  font-size: 0.78rem;
  color: #4b5563;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.footer-link {
  font-size: 0.78rem;
  color: #6b7280;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--dur-fast);
}
.footer-link:hover { color: var(--brand); }
.footer-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #374151;
}

/* ── Phone Verification Banner ─────────────────────────────────────────── */

.phone-verify-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fefce8;
  border-bottom: 2px solid #fbbf24;
  color: #92400e;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  position: sticky;
  top: 0;
  z-index: 1100;
}
.phone-verify-banner i { color: #d97706; }
.phone-verify-banner .auth-link { color: var(--brand); margin-left: 0.25rem; }
.phone-verify-dismiss {
  margin-left: auto;
  background: transparent;
  border: none;
  color: #92400e;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.15rem 0.3rem;
}

/* ── Auth Overlay ──────────────────────────────────────────────────────── */

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 18, 14, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.auth-overlay.is-open {
  opacity: 1;
  pointer-events: all;
}

.auth-card {
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
  width: 100%;
  max-width: 420px;
  max-height: 90dvh;
  overflow-y: auto;
  padding: 2rem 1.75rem 1.5rem;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur) var(--ease);
}
.auth-overlay.is-open .auth-card {
  transform: translateY(0) scale(1);
}

.auth-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--bg);
  color: var(--ink-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.auth-close-btn:hover { background: var(--line-soft); color: var(--ink); }

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.auth-brand-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.02em;
}

/* Tab switcher */
.auth-tabs {
  display: flex;
  gap: 0.25rem;
  background: var(--bg);
  border-radius: var(--r-md);
  padding: 0.25rem;
  margin-bottom: 1.5rem;
}
.auth-tab {
  flex: 1;
  padding: 0.52rem 0;
  border: none;
  background: transparent;
  border-radius: calc(var(--r-md) - 2px);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast);
}
.auth-tab.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0,0,0,.1);
}

/* Form */
.auth-form { display: flex; flex-direction: column; gap: 1rem; }

.auth-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 0.1rem;
  letter-spacing: -0.02em;
}
.auth-subtitle {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0 0 0.25rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.auth-field label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.auth-field label i { color: var(--brand); font-size: 0.78rem; }

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="tel"],
.auth-field input[type="password"] {
  width: 100%;
  padding: 0.72rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg);
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--ink);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  box-sizing: border-box;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-light);
}

.auth-password-wrap {
  position: relative;
}
.auth-password-wrap input { padding-right: 2.75rem; }
.auth-show-pw {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 0.88rem;
  padding: 0.25rem;
  line-height: 1;
}
.auth-show-pw:hover { color: var(--ink); }

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.auth-remember {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.auth-remember input { accent-color: var(--brand); }
.auth-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}
.auth-link:hover { text-decoration: underline; }
.auth-forgot { font-weight: 600; color: var(--ink-muted); }

.auth-error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
  border-radius: var(--r-md);
  padding: 0.6rem 0.85rem;
  font-size: 0.83rem;
  font-weight: 600;
}

.auth-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-deep));
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  letter-spacing: 0.01em;
  margin-top: 0.25rem;
}
.auth-submit-btn:hover { opacity: 0.9; transform: translateY(-1px); }
.auth-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.auth-switch-text {
  text-align: center;
  font-size: 0.83rem;
  color: var(--ink-muted);
  margin: 0;
}

/* Role chips */
.auth-role-chips {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.auth-role-chip input { display: none; }
.auth-role-chip span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: var(--r-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  background: var(--bg);
  transition: border-color var(--dur-fast), background var(--dur-fast), color var(--dur-fast);
}
.auth-role-chip input:checked + span {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-deep);
}

/* Trust badges */
.auth-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.73rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.auth-trust i { color: var(--brand); margin-right: 0.2rem; }

/* Mobile */
@media (max-width: 480px) {
  .auth-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .auth-overlay { align-items: flex-end; padding: 0; }
}

/* ── Tenant Leads ──────────────────────────────────────────────────────── */

.tl-table {
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-bottom: 1rem;
  overflow: hidden;
}

.tl-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  background: var(--bg);
  border-bottom: 1.5px solid var(--line-soft);
  gap: 0.75rem;
  user-select: none;
  transition: background var(--dur-fast);
}
.tl-table-header:hover { background: var(--brand-light); }

.tl-table-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 0;
}
.tl-table-title h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}

.tl-icon { color: var(--brand); font-size: 0.95rem; }
.tl-icon-warn { color: #d97706; }

.tl-help {
  color: var(--ink-muted);
  font-size: 0.85rem;
  cursor: help;
  flex-shrink: 0;
}

.tl-badge {
  background: var(--brand);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-full);
  flex-shrink: 0;
}

.tl-chevron {
  color: var(--ink-muted);
  font-size: 0.78rem;
  transition: transform var(--dur-fast);
  flex-shrink: 0;
}
.tl-table-header.is-collapsed .tl-chevron { transform: rotate(-90deg); }

.tl-table-body {
  overflow: hidden;
  transition: max-height var(--dur) var(--ease);
  max-height: 2000px;
}
.tl-table-body.collapsed { max-height: 0; }

.tl-table-scroll { overflow-x: auto; }

.tl-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;
}
.tl-data-table thead tr {
  background: var(--bg);
  border-bottom: 1.5px solid var(--line-soft);
}
.tl-data-table th {
  padding: 0.65rem 1rem;
  text-align: left;
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  white-space: nowrap;
}
.tl-data-table td {
  padding: 0.8rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-mid);
}
.tl-data-table tbody tr:last-child td { border-bottom: none; }
.tl-data-table tbody tr:hover td { background: var(--bg); }
.tl-row-flagged td { background: #fff7ed; }

.tl-tenant-name {
  font-weight: 700;
  color: var(--ink);
  font-size: 0.88rem;
}
.tl-tenant-phone {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

.tl-traveling {
  max-width: 200px;
  color: var(--ink-soft);
  font-size: 0.83rem;
  line-height: 1.4;
}
.tl-date {
  white-space: nowrap;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.tl-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.tl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.75rem;
  border-radius: var(--r-full);
  font-size: 0.78rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast), opacity var(--dur-fast);
  white-space: nowrap;
}
.tl-btn-primary {
  background: var(--brand);
  color: #fff;
}
.tl-btn-primary:hover { opacity: 0.85; }
.tl-btn-ghost {
  background: var(--bg);
  color: var(--ink-soft);
  border: 1.5px solid var(--line);
}
.tl-btn-ghost:hover { background: var(--line-soft); color: var(--ink); }

.tl-flagged-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #b91c1c;
  background: #fee2e2;
  padding: 0.2rem 0.5rem;
  border-radius: var(--r-full);
}

.tl-empty {
  text-align: center;
  color: var(--ink-muted);
  padding: 2rem 1rem !important;
  font-size: 0.87rem;
  font-style: italic;
}

/* Unmatched toggle row */
.tl-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0;
  margin-bottom: 0.75rem;
}
.tl-toggle-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.tl-switch {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
}
.tl-switch input { display: none; }
.tl-switch-track {
  width: 42px;
  height: 24px;
  background: var(--line);
  border-radius: var(--r-full);
  position: relative;
  transition: background var(--dur-fast);
  cursor: pointer;
}
.tl-switch input:checked ~ .tl-switch-track { background: var(--brand); }
.tl-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--dur-fast);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.tl-switch input:checked ~ .tl-switch-track .tl-switch-thumb { transform: translateX(18px); }
.tl-switch-off, .tl-switch-on {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.tl-switch input:checked ~ .tl-switch-on { color: var(--brand); }

.small-list {
  margin-top: 0.5rem;
  display: grid;
  gap: 0.5rem;
}

.small-item {
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0.75rem 1rem;
  font-size: 0.85rem;
  transition: border-color var(--dur-fast);
}
.small-item:hover { border-color: var(--line); }

.inline-actions {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* =====================================================================
   OWNER SECTION + WIZARD
   ===================================================================== */

.section-head { margin-bottom: 0.75rem; }
.section-head h2 { margin: 0 0 0.25rem; }
.section-head p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

.wizard-layout {
  display: grid;
  gap: 1rem;
  align-items: start;
}
@media (min-width: 900px) {
  .wizard-layout { grid-template-columns: 0.65fr 1.45fr 1fr; }
}

/* Wizard step sidebar */
.wizard-steps {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 0.85rem;
  display: grid;
  gap: 0.4rem;
  box-shadow: var(--shadow-xs);
}

.wizard-step {
  border-radius: var(--r-md);
  border: 1.5px solid var(--line-soft);
  background: var(--surface-soft);
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all var(--dur-fast) var(--ease);
}
.wizard-step i { font-size: 0.85rem; color: var(--ink-muted); }
.wizard-step:hover { border-color: var(--line); }
.wizard-step.active {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-deep);
  box-shadow: 0 2px 10px rgba(20, 106, 87, 0.12);
}
.wizard-step.active i { color: var(--brand); }
.wizard-step.done {
  border-color: rgba(20, 106, 87, 0.2);
  background: var(--surface);
  color: var(--brand-deep);
}
.wizard-step.done i { color: var(--brand); }
.wizard-step.clickable { cursor: pointer; }
.wizard-step.clickable:hover:not(.active) {
  border-color: var(--brand);
  background: var(--brand-light);
  color: var(--brand-deep);
}

/* Wizard actions */
.wizard-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  gap: 0.5rem;
}

/* Preview card */
.preview-card {
  border: 1.5px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: 0.75rem;
  min-height: 120px;
  margin-bottom: 0.75rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
}
.preview-card.mobile { max-width: 240px; }

/* =====================================================================
   WALKTHROUGH MODULE
   ===================================================================== */

#walkthrough-section {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--page-x) 6rem;
}

/* Progress header */
.wt-progress-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 1.25rem;
}
.wt-ph-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.wt-ph-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.wt-progress-track {
  width: 120px;
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.wt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 3px;
  transition: width 0.35s var(--ease);
}
.wt-progress-pct {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--brand);
  min-width: 2.8rem;
  text-align: right;
}
.wt-item-nav-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Start screen */
.wt-start-wrap { display: flex; flex-direction: column; gap: 1.25rem; }

.wt-property-preview {
  display: flex;
  gap: 1rem;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1rem;
  box-shadow: var(--shadow-xs);
}
.wt-preview-img-wrap {
  width: 84px; height: 84px;
  border-radius: var(--r-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}
.wt-preview-img { width: 100%; height: 100%; object-fit: cover; }
.wt-preview-info { flex: 1; }
.wt-status-badge {
  display: inline-block;
  background: var(--brand-light);
  color: var(--brand-deep);
  border: 1px solid rgba(20,106,87,0.22);
  border-radius: var(--r-full);
  padding: 0.18rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
}

.wt-legal-notice {
  background: #fffbeb;
  border: 1.5px solid #f59e0b;
  border-radius: var(--r-md);
  padding: 1rem;
  font-size: 0.87rem;
  color: #78350f;
  line-height: 1.55;
}

.wt-start-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.wt-meta-chip {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-full);
  padding: 0.3rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.wt-actions { display: flex; gap: 0.75rem; padding-top: 0.5rem; flex-wrap: wrap; }

/* Sections screen */
.wt-sections-wrap { display: flex; flex-direction: column; gap: 1rem; }
.wt-sections-header { margin-bottom: 0.5rem; }
.wt-sections-title { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.2rem; }
.wt-sections-subtitle { font-size: 0.85rem; color: var(--ink-soft); }
.wt-sections-list { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }

.wt-section-card {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: var(--shadow-xs);
}
.wt-section-card.done {
  border-color: rgba(20, 106, 87, 0.3);
  background: linear-gradient(145deg, #f8fdf9, #f0faf6);
}
.wt-sc-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.wt-sc-icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.wt-section-card.done .wt-sc-icon {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.wt-sc-info { flex: 1; }
.wt-sc-name { font-weight: 700; font-size: 0.95rem; }
.wt-sc-progress { font-size: 0.78rem; color: var(--ink-soft); }
.wt-sc-bar-track {
  height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 0.35rem;
}
.wt-sc-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 2px;
  transition: width 0.3s var(--ease);
}
.wt-sections-footer { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Item screen */
.wt-item-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-bottom: 1.5rem;
}
.wt-item-header { display: flex; flex-direction: column; gap: 0.2rem; }
.wt-item-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  font-weight: 800;
}
.wt-item-label { font-size: 1.2rem; font-weight: 800; margin: 0; }
.wt-item-instruction {
  font-size: 0.87rem;
  color: var(--ink-soft);
  line-height: 1.55;
  background: var(--brand-light);
  border-left: 3px solid var(--brand);
  padding: 0.6rem 0.85rem;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

/* Media zone */
.wt-media-zone {
  background: var(--surface);
  border: 1.5px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem;
}
.wt-media-title { font-weight: 700; font-size: 0.92rem; margin-bottom: 0.75rem; }
.wt-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}
.wt-thumb-wrap { position: relative; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; }
.wt-thumb { width: 100%; height: 100%; object-fit: cover; }
.wt-thumb-del {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,0.6); color: #fff;
  border: none; border-radius: 50%;
  width: 22px; height: 22px; font-size: 0.7rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}

.wt-add-photo-btn,
.wt-add-photo-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  color: #fff;
  padding: 0.55rem 1rem;
  border-radius: var(--r-full);
  font-size: 0.85rem;
  font-weight: 700;
  transition: opacity 0.2s;
  box-shadow: 0 2px 10px rgba(20,106,87,0.25);
}
.wt-add-photo-btn[aria-busy="true"],
.wt-add-photo-label[aria-busy="true"] { opacity: 0.6; pointer-events: none; }
.wt-file-input { display: none; }

.wt-media-req { font-size: 0.78rem; color: var(--danger); margin-top: 0.5rem; }
.wt-media-req.met { color: var(--success); }

/* Rating zone */
.wt-rating-zone { display: flex; flex-direction: column; gap: 0.75rem; }
.wt-rating-title { font-size: 1rem; font-weight: 800; margin: 0; }
.wt-required-star { color: var(--danger); }

.wt-rating-group {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.wt-rating-btn {
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-full);
  border: 1.5px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--ink-mid);
  transition: all var(--dur-fast);
  min-height: 40px;
  font-family: inherit;
}
.wt-rating-btn:hover { border-color: var(--brand); }
.wt-rating-btn.active {
  background: linear-gradient(145deg, var(--brand), var(--brand-deep));
  border-color: var(--brand);
  color: #fff;
}
.wt-rating-btn[data-rating="DAMAGED"].active {
  background: linear-gradient(145deg, #dc2626, #b91c1c);
  border-color: #dc2626;
}

.wt-note-zone { display: flex; flex-direction: column; gap: 0.4rem; }
.wt-note-label { font-size: 0.87rem; font-weight: 700; }
.wt-note-required-hint { font-size: 0.78rem; color: var(--danger); }
.wt-note-input {
  width: 100%; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 0.65rem 0.8rem; font-size: 0.88rem; font-family: inherit;
  resize: vertical; background: var(--surface); color: var(--ink);
  min-height: 80px; transition: border-color var(--dur-fast);
}
.wt-note-input:focus { outline: none; border-color: var(--brand); }

/* Item footer */
.wt-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  margin-top: 0.5rem;
}

/* Sticky footer (summary, etc.) */
.wt-sticky-footer {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

/* Summary */
.wt-summary-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
.wt-summary-header {}
.wt-summary-title { font-size: 1.25rem; font-weight: 800; }
.wt-summary-subtitle { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.wt-summary-sections { display: flex; flex-direction: column; gap: 0.5rem; }
.wt-summary-section-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--surface); border: 1.5px solid var(--line-soft); border-radius: var(--r-md);
}
.wt-ssr-name { font-size: 0.9rem; font-weight: 700; }
.wt-ssr-stats { display: flex; gap: 0.5rem; align-items: center; }
.wt-summary-declaration {
  font-size: 0.85rem; color: var(--ink-soft); line-height: 1.55;
  background: var(--surface-soft); border: 1px solid var(--line-soft);
  border-radius: var(--r-md); padding: 0.85rem;
}

/* Submit */
.wt-submit-wrap { display: flex; flex-direction: column; gap: 1.25rem; align-items: flex-start; }
.wt-submit-icon { font-size: 3rem; line-height: 1; }
.wt-submit-title { font-size: 1.25rem; font-weight: 800; margin: 0; }
.wt-submit-checklist { display: flex; flex-direction: column; gap: 0.6rem; }
.wt-submit-check-item {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.9rem; font-weight: 600; color: var(--ink-soft);
  padding: 0.55rem 0.85rem;
  background: var(--surface); border: 1.5px solid var(--line-soft); border-radius: var(--r-md);
}
/* Approve walkthrough confirm button (success green override) */
.cta-btn[style*="--success"] { background: var(--success) !important; }
.cta-btn[style*="--success"]:hover { filter: brightness(1.08); }

/* GPS verification card */
.wt-gps-card {
  width: 100%; border: 1.5px solid var(--line-soft); border-radius: var(--r-md);
  background: var(--surface); overflow: hidden;
}
.wt-gps-card-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 0.85rem; background: var(--bg);
  border-bottom: 1px solid var(--line-soft); font-size: 0.9rem;
}
.wt-gps-icon { font-size: 1.1rem; }
.wt-gps-badge {
  margin-left: auto; font-size: 0.75rem; font-weight: 700;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.wt-gps-badge.match   { background: #d1fae5; color: #065f46; }
.wt-gps-badge.mismatch{ background: #fef3c7; color: #92400e; }
.wt-gps-badge.unknown { background: var(--line-soft); color: var(--ink-soft); }
.wt-gps-rows { display: flex; flex-direction: column; }
.wt-gps-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.4rem; padding: 0.5rem 0.85rem;
  font-size: 0.8rem; border-bottom: 1px solid var(--line-soft);
}
.wt-gps-row:last-child { border-bottom: none; }
.wt-gps-row-label { color: var(--ink-soft); font-weight: 600; }
.wt-gps-row-value { font-variant-numeric: tabular-nums; }

.wt-declaration-label {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.87rem; line-height: 1.55; cursor: pointer;
  background: #f0fdf4; border: 1.5px solid #86efac; border-radius: var(--r-md);
  padding: 0.85rem;
}
.wt-submit-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Status / timeline */
.wt-status-wrap {
  display: flex; flex-direction: column; gap: 1.5rem;
  align-items: center; text-align: center; padding: 2rem 0;
}
.wt-status-icon { font-size: 3.5rem; line-height: 1; }
.wt-status-heading { font-size: 1.4rem; font-weight: 800; margin: 0; }
.wt-status-sub { font-size: 0.9rem; color: var(--ink-soft); max-width: 400px; margin: 0; }

.wt-timeline {
  display: flex; flex-direction: column; gap: 0;
  width: 100%; max-width: 360px; text-align: left;
}
.wt-tl-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding-bottom: 1.25rem; position: relative;
}
.wt-tl-step:not(:last-child)::before {
  content: "";
  position: absolute; left: 15px; top: 32px; bottom: 0;
  width: 2px; background: var(--line);
}
.wt-tl-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; flex-shrink: 0;
  color: var(--ink-soft); position: relative; z-index: 1;
}
.wt-tl-step.active .wt-tl-dot, .wt-tl-step.done .wt-tl-dot {
  background: var(--brand); border-color: var(--brand); color: #fff;
}
.wt-tl-label { font-size: 0.88rem; padding-top: 6px; font-weight: 600; }
.wt-tl-step.active .wt-tl-label { color: var(--brand); font-weight: 800; }

.wt-status-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; }

/* Landlord review */
.wt-review-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
.wt-review-title { font-size: 1.25rem; font-weight: 800; margin: 0; }
.wt-review-subtitle { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.wt-review-section { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.wt-review-sec-name {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-muted); font-weight: 800;
  padding: 0.25rem 0; border-bottom: 1px solid var(--line-soft); margin-bottom: 0.25rem;
}
.wt-review-item {
  background: var(--surface); border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md); padding: 0.85rem;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.wt-review-item.acknowledged { border-color: #86efac; background: #f0fdf4; }
.wt-review-item.disputed { border-color: #fca5a5; background: #fff5f5; }
.wt-ri-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.wt-ri-label { font-weight: 700; font-size: 0.9rem; }
.wt-ri-rating {
  font-size: 0.75rem; font-weight: 800; padding: 0.2rem 0.6rem;
  border-radius: var(--r-full); background: var(--bg);
}
.wt-rating-good    { color: #15803d; background: #dcfce7; }
.wt-rating-fair    { color: #92400e; background: #fef3c7; }
.wt-rating-damaged { color: #991b1b; background: #fee2e2; }
.wt-rating-not_present { color: var(--ink-soft); background: var(--bg); }
.wt-rating-not_tested  { color: var(--ink-soft); background: var(--bg); }
.wt-ri-photos { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.wt-ri-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-sm); }
.wt-ri-note { font-size: 0.82rem; color: var(--ink-soft); font-style: italic; margin: 0; }
.wt-ri-actions { display: flex; gap: 0.5rem; }
.wt-ri-ack, .wt-ri-dispute {
  flex: 1; padding: 0.4rem; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface);
  cursor: pointer; font-size: 0.8rem; font-weight: 700;
  transition: all var(--dur-fast); font-family: inherit;
}
.wt-ri-ack.active { background: #dcfce7; border-color: #86efac; color: #15803d; }
.wt-ri-dispute.active { background: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.wt-review-actions { display: flex; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; }

/* Owner walkthrough list */
.wt-owner-card {
  display: flex; gap: 1rem; align-items: center;
  background: var(--surface); border: 1.5px solid var(--line-soft);
  border-radius: var(--r-lg); padding: 1rem; margin-bottom: 0.75rem;
  box-shadow: var(--shadow-xs); transition: box-shadow var(--dur-fast);
}
.wt-owner-card:hover { box-shadow: var(--shadow-sm); }
.wt-owner-thumb { width: 72px; height: 72px; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0; }
.wt-owner-info { flex: 1; }
.wt-owner-prop { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.2rem; }
.wt-owner-meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.4rem; }
.wt-owner-stats { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Shared wt badges */
.wt-badge-done {
  background: var(--success-bg); color: var(--success);
  font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--r-full);
}
.wt-badge-pending {
  background: var(--warning-bg); color: var(--warning);
  font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--r-full);
}
.wt-badge-damage {
  background: var(--danger-bg); color: var(--danger);
  font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: var(--r-full);
}

/* =====================================================================
   ADMIN SECTION
   ===================================================================== */

/* (admin section uses placeholder-page, dual-panels, small-list — already styled) */

/* =====================================================================
   MOBILE-ONLY TOGGLE
   ===================================================================== */

.mobile-only { display: none; }
@media (max-width: 899px) {
  .mobile-only { display: inline-flex; }
}

/* =====================================================================
   RESPONSIVE BREAKPOINTS
   ===================================================================== */

/* Tablet (≥640px) */
@media (min-width: 640px) {
  :root { --page-x: 1.5rem; }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  :root { --page-x: 2rem; }

  .topbar {
    max-width: 1280px;
    margin: 0 auto;
  }

  /* On desktop, show the brand text */
  .brand span:last-child { display: inline; }
}

/* Collapse nav on small mobile */
@media (max-width: 480px) {
  .site-nav { display: none; }
  .auth-actions .ghost-btn { display: none; }
}

/* Walkthrough footer on desktop */
@media (min-width: 1024px) {
  #walkthrough-section { padding-bottom: 4rem; }
}

/* =====================================================================
   UTILITY CLASSES
   ===================================================================== */

.section-head h2 { margin-bottom: 0.2rem; }

/* Error / success inline */
.error-text { color: var(--danger); font-size: 0.82rem; }
.success-text { color: var(--success); font-size: 0.82rem; }

/* =====================================================================
   QA TEST PANEL (developer tool — dark theme preserved)
   ===================================================================== */

.qa-panel {
  position: fixed;
  bottom: calc(var(--bottom-nav-h) + 0.75rem);
  right: 1rem;
  width: 280px;
  background: #0f172a;
  border: 1.5px solid #334155;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45);
  z-index: var(--z-qa);
  font-size: 0.8rem;
  color: #e2e8f0;
  font-family: ui-monospace, "Cascadia Code", "Fira Code", monospace;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .qa-panel { bottom: 1.25rem; }
}

.qa-panel-header {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #1e293b; border-bottom: 1px solid #334155; user-select: none;
}
.qa-badge {
  background: #f59e0b; color: #0f172a;
  font-size: 0.65rem; font-weight: 800; letter-spacing: 0.05em;
  padding: 0.1rem 0.4rem; border-radius: 4px;
  font-family: ui-monospace, monospace;
}
.qa-panel-title { flex: 1; font-size: 0.78rem; font-weight: 600; color: #94a3b8; }
.qa-collapse-btn {
  background: none; border: none; color: #64748b; cursor: pointer;
  font-size: 1.1rem; line-height: 1; padding: 0 0.25rem; transition: color 0.15s;
}
.qa-collapse-btn:hover { color: #e2e8f0; }
.qa-panel-body { padding: 0.6rem 0; max-height: 520px; overflow-y: auto; }
.qa-section {
  padding: 0.4rem 0.75rem; border-bottom: 1px solid #1e293b;
  padding-bottom: 0.6rem; margin-bottom: 0.25rem;
}
.qa-section-label {
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: #475569; font-weight: 700; margin-bottom: 0.4rem;
}
.qa-accounts { display: flex; gap: 0.4rem; }
.qa-account-btn {
  flex: 1; display: flex; align-items: center; gap: 0.5rem;
  background: #1e293b; border: 1.5px solid #334155; border-radius: 8px;
  padding: 0.4rem 0.5rem; cursor: pointer; color: #e2e8f0;
  transition: border-color 0.15s, background 0.15s; text-align: left;
}
.qa-account-btn:hover { border-color: #f59e0b; background: #2d3e50; }
.qa-account-btn.active { border-color: #f59e0b; background: #2d3e50; }
.qa-account-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: #146a57; color: #fff;
  font-size: 0.65rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qa-account-avatar.owner { background: #d27f45; }
.qa-account-info { line-height: 1.2; }
.qa-account-name { font-size: 0.75rem; font-weight: 600; }
.qa-account-role { font-size: 0.65rem; color: #64748b; }
.qa-tabs { display: flex; padding: 0 0.75rem 0.4rem; gap: 0.25rem; }
.qa-tab {
  flex: 1; padding: 0.3rem 0.25rem;
  background: none; border: 1px solid #334155; border-radius: 6px;
  color: #64748b; cursor: pointer; font-size: 0.68rem; font-family: inherit; font-weight: 500;
  transition: all 0.15s;
}
.qa-tab:hover { color: #e2e8f0; border-color: #475569; }
.qa-tab.active { background: #1e293b; color: #f59e0b; border-color: #f59e0b; }
.qa-tab-panel { padding: 0 0.75rem; }
.qa-flow-list { display: flex; flex-direction: column; gap: 0.3rem; }
.qa-flow-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; padding: 0.3rem 0.4rem; border-radius: 6px; transition: background 0.1s;
}
.qa-flow-row:hover { background: #1e293b; }
.qa-bypass-row { background: rgba(245,158,11,0.05); }
.qa-bypass-row:hover { background: rgba(245,158,11,0.1); }
.qa-flow-label {
  display: flex; align-items: center; gap: 0.4rem;
  color: #94a3b8; font-size: 0.75rem; flex: 1; min-width: 0;
}
.qa-step {
  width: 18px; height: 18px; border-radius: 50%;
  background: #334155; color: #64748b; font-size: 0.6rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.qa-step.bypass { background: rgba(245,158,11,0.2); color: #f59e0b; }
.qa-step.danger  { background: rgba(239,68,68,0.2);  color: #ef4444; }
.qa-btn {
  padding: 0.2rem 0.55rem; border-radius: 5px;
  border: 1px solid #334155; background: #1e293b; color: #94a3b8;
  cursor: pointer; font-size: 0.68rem; font-family: inherit; font-weight: 500;
  white-space: nowrap; flex-shrink: 0; transition: all 0.15s;
}
.qa-btn:hover:not(:disabled) { border-color: #64748b; color: #e2e8f0; }
.qa-btn:disabled { opacity: 0.4; cursor: default; }
.qa-btn.bypass { border-color: rgba(245,158,11,0.4); color: #f59e0b; background: rgba(245,158,11,0.08); }
.qa-btn.bypass:hover:not(:disabled) { background: rgba(245,158,11,0.15); }
.qa-btn.danger  { border-color: rgba(239,68,68,0.4); color: #ef4444; background: rgba(239,68,68,0.08); }
.qa-btn.danger:hover:not(:disabled) { background: rgba(239,68,68,0.15); }
.qa-log {
  padding: 0.4rem 0.75rem; font-size: 0.68rem; color: #475569;
  border-top: 1px solid #1e293b; margin-top: 0.4rem;
  transition: color 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qa-log.flash { color: #4ade80; }
.qa-wizard-bypass-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--ink-soft); cursor: pointer;
  padding: 0.5rem 0; user-select: none;
}
.qa-wizard-bypass-label input { cursor: pointer; }

/* ── Owner Profile Modal ────────────────────────────────────────────── */
.owner-profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 40, 32, 0.55);
  backdrop-filter: blur(3px);
  padding: 1rem;
}
.owner-profile-modal {
  background: var(--surface);
  width: 100%;
  max-width: 520px;
  max-height: 88vh;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  animation: modal-in 0.22s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.owner-profile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.owner-profile-header h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.owner-profile-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast), color var(--dur-fast);
  flex-shrink: 0;
}
.owner-profile-close-btn:hover { background: var(--line-soft); color: var(--ink); }
.owner-profile-body {
  overflow-y: auto;
  flex: 1;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.op-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.op-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--line-soft);
}
.op-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.op-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 3px;
}
.op-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--success);
  background: var(--success-bg);
  border-radius: 20px;
  padding: 2px 8px;
}
.op-bio {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}
.op-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
.op-stat {
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 0.75rem 0.5rem;
  text-align: center;
}
.op-stat-value {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 4px;
}
.op-stat-label {
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.op-listings-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  margin: 0 0 0.6rem;
}
.op-listing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-soft);
  border-radius: 10px;
  background: var(--surface);
  margin-bottom: 0.4rem;
  transition: border-color var(--dur-fast);
}
.op-listing-row:last-child { margin-bottom: 0; }
.op-listing-row:hover { border-color: var(--brand); }
.op-listing-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 2px;
}
.op-listing-area {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 0;
}
.op-listing-price {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Shared Modal System (viewing, inquiry, etc.) ───────────────────── */
.rent-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1010;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 40, 32, 0.55);
  backdrop-filter: blur(3px);
  padding: 1rem;
}
.rent-modal {
  background: var(--surface);
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  animation: modal-in 0.22s ease;
}
.rent-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.rent-modal-title {
  margin: 0 0 2px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.rent-modal-subtitle {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-muted);
}
.rent-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.rent-modal-close:hover { background: var(--line-soft); color: var(--ink); }
.rent-modal-body {
  padding: 1.25rem;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.rent-modal-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rent-modal-label {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.rent-modal-hint {
  font-weight: 400;
  color: var(--ink-muted);
}
.rent-modal-time-slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ── Viewing time-slot picker ──────────────────────────────────── */
.vts-list { display: flex; flex-direction: column; gap: .75rem; }

.vts-slot {
  border: 1.5px solid var(--line-soft);
  border-radius: 12px;
  padding: .75rem .9rem;
  background: var(--surface);
  transition: border-color .15s;
}
.vts-slot:focus-within { border-color: var(--primary); }

.vts-slot-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .55rem;
}
.vts-slot-num { font-size: .78rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.vts-slot-tag { font-size: .75rem; font-weight: 600; color: var(--primary); }

.vts-row { display: flex; gap: .5rem; align-items: center; }
.vts-date-wrap { position: relative; flex: 1; }
.vts-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-size: .85rem; pointer-events: none; }
.vts-date { padding-left: 2.1rem !important; cursor: pointer; }

.vts-time-panel { margin-top: .6rem; }
.vts-time-label { font-size: .75rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .4rem; text-transform: uppercase; letter-spacing: .04em; }

.vts-time-chips {
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.vts-chip {
  padding: .3rem .65rem;
  border: 1.5px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
  line-height: 1.4;
}
.vts-chip:hover { border-color: var(--primary); color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); }
.vts-chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 700; }
.vts-chip-custom { border-style: dashed; }
.vts-chip-custom.selected { background: var(--ink-soft); border-color: var(--ink-soft); }

.vts-custom-time { margin-top: .5rem; max-width: 160px; }
.rent-modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
  font-family: inherit;
}
.rent-modal-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.rent-modal-textarea {
  resize: vertical;
  min-height: 80px;
}
.rent-modal-error {
  font-size: 0.8rem;
  color: var(--danger);
  min-height: 1.2em;
  margin: 0;
}
.rent-modal-success {
  font-size: 0.85rem;
  color: var(--success);
  background: var(--success-bg);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  margin: 0;
}
.rent-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* ── Saved Listings Cards ────────────────────────────────────────────── */
#account-saved-listings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}
.saved-listing-card {
  display: flex;
  gap: 0.85rem;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.saved-listing-card:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 12px var(--brand-glow);
}
.slc-thumb {
  width: 110px;
  min-height: 100px;
  flex-shrink: 0;
  position: relative;
  background: var(--bg-deep);
}
.slc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slc-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--ink-muted);
}
.slc-status-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: 4px;
  padding: 2px 6px;
}
.slc-body {
  flex: 1;
  padding: 0.75rem 0.5rem 0.75rem 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.slc-title {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slc-area {
  margin: 0;
  font-size: 0.78rem;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
.slc-meta {
  margin: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.slc-price {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand);
}
.slc-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 0.75rem 0.75rem 0;
  justify-content: center;
  flex-shrink: 0;
}
.cta-btn--small {
  font-size: 0.78rem !important;
  padding: 0.35rem 0.75rem !important;
  min-height: 34px !important;
}

/* ── Save Preset Popover ─────────────────────────────────────────────── */
.preset-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 900;
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: 12px;
  padding: 1rem;
  width: 240px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  animation: preset-pop-in .18s ease;
}
@keyframes preset-pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1);   }
}
.preset-popover-title {
  margin: 0;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.preset-popover-title i { color: var(--brand); }
.preset-popover-input {
  width: 100%;
  box-sizing: border-box;
  padding: .45rem .7rem;
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.preset-popover-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.preset-popover-error {
  margin: 0;
  font-size: .76rem;
  color: var(--danger);
  min-height: 1em;
}
.preset-popover-actions {
  display: flex;
  gap: .5rem;
}

/* ── KYC / Identity Verification Panels ─────────────────────────────── */
.kyc-section { display: flex; flex-direction: column; gap: .65rem; }
.kyc-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.kyc-title {
  margin: 0 0 .2rem;
  font-size: .92rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: .4rem;
}
.kyc-title i { color: var(--brand); font-size: .85rem; }
.kyc-desc {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 36ch;
}
.kyc-badge {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.kyc-badge--pending {
  background: var(--warning-bg);
  color: var(--warning);
}
.kyc-badge--verified {
  background: var(--success-bg);
  color: var(--success);
}
.kyc-badge--review {
  background: #eff6ff;
  color: #1d4ed8;
}
.kyc-form { display: flex; flex-direction: column; gap: .5rem; }
.kyc-hint {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: .45rem .7rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.kyc-hint i { color: var(--brand); }
.kyc-form-row {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.kyc-input {
  flex: 1;
  padding: .5rem .75rem;
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  font-size: .88rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  min-width: 0;
}
.kyc-input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}
.kyc-form-btn {
  white-space: nowrap;
  font-size: .82rem !important;
  padding: .5rem 1rem !important;
  min-height: 36px !important;
  flex-shrink: 0;
}
.kyc-feedback {
  margin: 0;
  font-size: .78rem;
  min-height: 1.1em;
}
.kyc-feedback.success { color: var(--success); }
.kyc-feedback.error   { color: var(--danger); }

/* ── Signup Avatar Picker ──────────────────────────────────────────── */
.signup-avatar-picker {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2.5px dashed var(--line-soft);
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s, background .2s;
  flex-shrink: 0;
}
.signup-avatar-picker:hover {
  border-color: var(--brand);
  background: var(--accent-light);
}
.signup-avatar-placeholder {
  font-size: 1.6rem;
  color: var(--ink-soft);
  pointer-events: none;
}
.signup-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ── Viewing Request Cards ─────────────────────────────────────────── */
.vc-list { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: .75rem; }

.vc-section-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin: 1.25rem 0 .5rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.vc-section-label:first-child { margin-top: 0; }
.vc-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

.vc-card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .15s;
}
.vc-card:hover { box-shadow: 0 3px 12px rgba(0,0,0,.07); }

/* Left accent bar by status */
.vc-card--pending   { border-left: 4px solid #f39c12; }
.vc-card--proposed  { border-left: 4px solid #8e44ad; }
.vc-card--confirmed { border-left: 4px solid var(--brand); }
.vc-card--completed { border-left: 4px solid #27ae60; }
.vc-card--declined  { border-left: 4px solid var(--danger, #c0392b); }
.vc-card--cancelled { border-left: 4px solid var(--line-soft); }

.vc-body { padding: 1rem 1.1rem .9rem; }

.vc-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin-bottom: .6rem;
}
.vc-title-group { flex: 1; min-width: 0; }
.vc-title {
  margin: 0;
  font-weight: 700;
  font-size: .97rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.vc-area {
  margin: .1rem 0 0;
  font-size: .8rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .3rem;
}

/* Status badge */
.vc-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .65rem;
  border-radius: 20px;
  border: 1.5px solid currentColor;
  white-space: nowrap;
  line-height: 1.3;
}
.vc-badge--pending   { color: #f39c12; }
.vc-badge--proposed  { color: #8e44ad; }
.vc-badge--confirmed { color: var(--brand); }
.vc-badge--completed { color: #27ae60; }
.vc-badge--declined  { color: var(--danger, #c0392b); }
.vc-badge--cancelled { color: var(--ink-soft); }

/* Meta rows */
.vc-meta { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .5rem; }
.vc-meta-row {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  font-size: .83rem;
  color: var(--ink);
}
.vc-meta-row i { color: var(--ink-soft); font-size: .8rem; flex-shrink: 0; }
.vc-meta-row strong { font-weight: 600; }
.vc-meta-row.muted { color: var(--ink-soft); }
.vc-meta-row.danger { color: var(--danger, #c0392b); }
.vc-meta-row.text { font-style: italic; }

.vc-timestamp {
  font-size: .74rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
}

/* Actions bar */
.vc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .7rem 1.1rem .85rem;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-soft, #f9fafb);
}
.vc-actions .cta-btn,
.vc-actions .ghost-btn {
  font-size: .8rem;
  padding: .4rem 1rem;
}
.vc-actions .ghost-btn.danger {
  color: var(--danger, #c0392b);
  border-color: var(--danger, #c0392b);
}
.vc-actions .ghost-btn.danger:hover {
  background: rgba(192,57,43,.07);
}

.vc-feedback {
  font-size: .78rem;
  min-height: 1.1em;
  padding: .3rem 1.1rem .1rem;
  color: var(--danger, #c0392b);
}

/* Empty state */
.vc-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--ink-soft);
}
.vc-empty i { font-size: 2.5rem; margin-bottom: .75rem; opacity: .35; }
.vc-empty p { margin: .3rem 0 0; font-size: .9rem; }

/* ── Wizard step 2 — Unit & Pricing ───────────────────────────────── */
.wizard-section-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-soft);
  margin: 1.25rem 0 .6rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.wizard-section-title:first-child { margin-top: 0; }
.wizard-section-title i { color: var(--brand); }

.wizard-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  margin-bottom: .5rem;
}
@media (max-width: 540px) { .wizard-field-row { grid-template-columns: 1fr; } }

.wizard-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink);
}
.wizard-field input,
.wizard-field select {
  font-size: .9rem;
  padding: .5rem .7rem;
  border: 1.5px solid var(--line-soft);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  outline: none;
  transition: border-color .15s;
}
.wizard-field input:focus,
.wizard-field select:focus { border-color: var(--brand); }

.wizard-radio-group {
  display: flex;
  gap: 1rem;
  margin-top: .1rem;
}
.wizard-radio {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .9rem;
  font-weight: 400;
  cursor: pointer;
}
.wizard-radio input[type="radio"] { accent-color: var(--brand); width: 1rem; height: 1rem; }

/* Per-bedroom detail panels */
.wizard-bedroom-panel {
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: .75rem 1rem;
  margin-bottom: .6rem;
}
.wizard-bedroom-title {
  font-size: .83rem;
  font-weight: 700;
  color: var(--brand);
  margin: 0 0 .6rem;
}
.wizard-bedroom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
}
@media (max-width: 480px) { .wizard-bedroom-row { grid-template-columns: 1fr; } }
.wizard-bedroom-label {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.wizard-bedroom-label select {
  font-size: .85rem;
  padding: .4rem .6rem;
  border: 1.5px solid var(--line-soft);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.wizard-bedroom-label select:focus { border-color: var(--brand); }

/* ── Inquiry modal ────────────────────────────────────────────────── */
.inq-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(2px);
}
.inq-modal-overlay.hidden { display: none; }
.inq-modal-box {
  background: var(--surface);
  border-radius: var(--r-lg, 1rem);
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  animation: inqSlideUp .2s ease;
}
@keyframes inqSlideUp {
  from { opacity:0; transform: translateY(16px); }
  to   { opacity:1; transform: translateY(0); }
}
.inq-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: .4rem;
}
.inq-modal-close:hover { background: var(--surface-alt, #f0f0f0); color: var(--ink); }
.inq-modal-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 .75rem;
}
.inq-modal-meta {
  font-size: .88rem;
  color: var(--ink-soft);
  background: var(--surface-alt, #f6f6f6);
  border-radius: .5rem;
  padding: .75rem 1rem;
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.inq-whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  padding: .75rem 1rem;
  background: #25D366;
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  border-radius: .6rem;
  text-decoration: none;
  transition: background .15s;
  margin-bottom: 1rem;
}
.inq-whatsapp-btn:hover { background: #1ebe5d; color: #fff; }
.inq-whatsapp-btn i { font-size: 1.2rem; }
.inq-divider {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink-muted);
  font-size: .8rem;
  margin-bottom: 1rem;
}
.inq-divider::before,
.inq-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
}

/* ── Post-Viewing Decision Modal ────────────────────────────────── */
.pvm-intro {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0.25rem 0 1.25rem;
}
.pvm-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.pvm-option-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: left;
  transition: transform .12s, box-shadow .12s;
}
.pvm-option-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.pvm-option-btn i { font-size: 1.4rem; margin-bottom: 0.15rem; }
.pvm-opt-label { font-weight: 600; font-size: 0.97rem; }
.pvm-opt-sub   { font-size: 0.8rem; opacity: 0.8; }
.pvm-option-btn--yes {
  background: color-mix(in srgb, var(--success) 10%, var(--surface));
  border-color: var(--success);
  color: var(--success);
}
.pvm-option-btn--yes:hover { background: color-mix(in srgb, var(--success) 18%, var(--surface)); }
.pvm-option-btn--no {
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-color: var(--danger);
  color: var(--danger);
}
.pvm-option-btn--no:hover { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); }
.pvm-feedback {
  margin-top: 1rem;
  font-size: 0.85rem;
  min-height: 1.2rem;
  white-space: pre-line;
}

/* ── Walkthroughs tabs ───────────────────────────────────────────── */
.wt-tab-strip {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  border-bottom: 2px solid var(--line-soft);
  padding-bottom: 0;
}
.wt-tab {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 6px 6px 0 0;
  transition: color .15s;
}
.wt-tab.active { color: var(--brand); border-bottom-color: var(--brand); }
.wt-tab-badge {
  background: var(--brand);
  color: #fff;
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}
.wt-pane { animation: fadeIn .18s; }

/* ── Tenant Lease Progress Cards ────────────────────────────────── */
.plp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem; margin-bottom: 1rem; }
.plp-step { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; }
.plp-dot  { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }

/* ── Shared modal box (used by lease-init, lease-terms, lease-sign, etc.) ── */
.rent-modal-box {
  background: var(--surface);
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
  padding: 1.5rem;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-in .22s ease;
}

/* ── Lease Signing Modal ─────────────────────────────────────────── */
#lease-sign-modal .rent-modal-box { max-width: 560px; }

/* ── Lease Case Cards (owner) ────────────────────────────────────── */
.lc-card {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  margin-bottom: 0.75rem;
  background: var(--surface);
}
.lc-thumb {
  width: 60px; height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}
.lc-thumb-placeholder {
  width: 60px; height: 48px;
  background: var(--border);
  border-radius: 6px;
  flex-shrink: 0;
}
.lc-info { flex: 1; min-width: 0; }
.lc-prop { font-weight: 600; font-size: 0.93rem; margin-bottom: 0.15rem; }
.lc-meta { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.2rem; }
.lc-tenant { font-size: 0.8rem; color: var(--ink-soft); margin-bottom: 0.35rem; }
.lc-badge { font-size: 0.75rem; display: inline-flex; align-items: center; gap: 0.3rem; padding: 2px 8px; border-radius: 20px; }
.lc-badge--pending { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #b45309; }
.lc-badge--sent    { background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }

/* ── Lease Initiation Modal ──────────────────────────────────────── */
.lim-amenities-preview { margin-bottom: 0.75rem; }
.lim-amenities-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.lim-chip {
  background: var(--line-soft);
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.76rem;
  text-transform: capitalize;
}
.lim-check-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; color: var(--ink); }
.lim-checklist { background: color-mix(in srgb, var(--success) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 25%, transparent); border-radius: 8px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.lim-check-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  margin-bottom: 0.3rem;
  cursor: default;
}

/* ── Lease Ack Modal ─────────────────────────────────────────────── */
#lease-ack-modal .rent-modal-box {
  max-width: 600px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
#lease-ack-modal .rent-modal-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
#lease-ack-modal .rent-modal-title {
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 2px;
}
#lease-ack-modal .rent-modal-title i {
  color: var(--brand);
  font-size: 1rem;
  background: none;
  padding: 0;
}
#lease-ack-modal .rent-modal-subtitle {
  color: var(--ink-soft);
  font-size: 0.78rem;
  margin: 0;
}
#lease-ack-modal .rent-modal-close {
  background: var(--bg);
  color: var(--ink-soft);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 1.3rem;
  padding: 0 6px;
  margin-left: auto;
}
#lease-ack-modal .rent-modal-close:hover { background: var(--line-soft); color: var(--ink); }

.lam-body {
  padding: 1.25rem 1.25rem 0;
  overflow-y: auto;
  max-height: 55vh;
  background: #fff;
}

/* Specs row */
.lam-specs-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 1rem;
}
.lam-spec {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--brand-light); color: var(--brand);
  padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
}

/* Terms grid */
.lam-terms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.lam-term {
  background: var(--surface-soft, #faf8f3);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  position: relative;
  overflow: hidden;
}
.lam-term::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--brand);
  border-radius: 2px 0 0 2px;
}
.lam-term-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 0.2rem;
}
.lam-term-val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.lam-special-terms {
  font-size: 0.84rem;
  background: var(--accent-light);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.lam-special-terms strong { color: var(--accent-deep); }

/* Walkthrough note + section chips */
.lam-wt-note {
  font-size: 0.83rem;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  border: 1.5px dashed color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--brand-deep);
  margin-bottom: 0.5rem;
}
.lam-wt-note p {
  margin: 0 0 0.6rem;
  font-weight: 600;
}
.lam-checklist-sections {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.lam-section-chip {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  color: var(--brand-deep);
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.74rem;
  font-weight: 600;
}
.lam-section-chip::before {
  content: "📷";
  font-size: 0.68rem;
}

/* ── Lease Modal Chat Thread ─────────────────────────────────────── */
.lam-chat {
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.lam-chat-header {
  padding: 0.6rem 1.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  border-bottom: 1px solid var(--border);
  background: #fff;
}
.lam-chat-messages {
  height: 180px;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.lam-chat-empty {
  margin: auto;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.lam-msg {
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lam-msg--mine  { align-self: flex-end; align-items: flex-end; }
.lam-msg--theirs { align-self: flex-start; align-items: flex-start; }
.lam-msg-bubble {
  padding: 0.45rem 0.75rem;
  border-radius: 16px;
  font-size: 0.85rem;
  line-height: 1.45;
  word-break: break-word;
}
.lam-msg--mine .lam-msg-bubble {
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.lam-msg--theirs .lam-msg-bubble {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.lam-msg-meta {
  font-size: 0.7rem;
  color: var(--ink-soft);
  padding: 0 4px;
}
.lam-chat-compose {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--border);
  background: #fff;
}
.lam-chat-input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--bg);
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s;
}
.lam-chat-input:focus { border-color: var(--brand); background: #fff; }
.lam-chat-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--brand);
  color: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.lam-chat-send-btn:hover  { background: var(--brand-deep); }
.lam-chat-send-btn:active { transform: scale(0.93); }

/* Agreement checkboxes */
.lam-checks {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--border);
  margin-bottom: 0;
  padding: 0.75rem 1.25rem 0;
  background: #fff;
}
.lam-checks .lim-check-row {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
  transition: color 0.15s;
}
.lam-checks .lim-check-row:last-child { border-bottom: none; }
.lam-checks .lim-check-row input[type="checkbox"] {
  width: 17px; height: 17px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--brand);
  cursor: pointer;
}
.lam-checks .lim-check-row:hover { color: var(--brand); }

/* Footer actions */
.lam-footer {
  padding: 1rem 1.25rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: #fff;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.lam-footer .cta-btn {
  flex: 1;
  padding: 0.75rem;
  font-size: 0.9rem;
  border-radius: 8px;
}
.lam-footer .ghost-btn {
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
}

/* Specs row (shared with init modal) */
.lim-specs-row {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.lim-spec {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--brand-light); color: var(--brand);
  padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600;
}
/* Section chips (shared with init modal) */
.lim-checklist-sections {
  display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; margin-bottom: 0.5rem;
}
.lim-section-chip {
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  color: var(--brand-deep); padding: 2px 10px;
  border-radius: 20px; font-size: 0.76rem;
}

/* ── Wizard step 6 — Trust & Conversion ──────────────────────────── */
.wizard-check-label {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1.5px solid var(--line-soft);
  border-radius: .6rem;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: .6rem;
}
.wizard-check-label:hover { border-color: var(--brand); background: var(--surface-alt, #fafafa); }
.wizard-check-label input[type="checkbox"] {
  margin-top: .15rem;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.wizard-check-label span {
  font-size: .9rem;
  color: var(--ink);
  line-height: 1.4;
}

/* ── Wizard step 3 — Amenities ────────────────────────────────────── */
.am-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem .75rem;
  margin-bottom: .75rem;
}
@media (max-width: 680px) { .am-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .am-grid { grid-template-columns: 1fr; } }

.am-check {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .84rem;
  color: var(--ink);
  cursor: pointer;
  padding: .35rem .5rem;
  border-radius: 7px;
  transition: background .12s;
  line-height: 1.35;
}
.am-check:hover { background: var(--bg-soft); }
.am-check input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: .1rem;
  flex-shrink: 0;
  accent-color: var(--brand);
  cursor: pointer;
}
.am-check input[type="checkbox"]:checked + span {
  color: var(--brand);
  font-weight: 600;
}

/* ── Wizard step 4 — Media / Photo Upload ─────────────────────────── */
.mz-dropzone {
  position: relative;
  border: 2.5px dashed var(--line-soft);
  border-radius: 14px;
  background: var(--bg-soft);
  transition: border-color .15s, background .15s;
  overflow: hidden;
  margin-bottom: .75rem;
}
.mz-dropzone--over {
  border-color: var(--brand);
  background: rgba(20,106,87,.05);
}
.mz-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
  cursor: pointer;
  gap: .5rem;
}
.mz-drop-icon {
  font-size: 2.4rem;
  color: var(--brand);
  opacity: .7;
}
.mz-drop-title {
  margin: 0;
  font-size: .97rem;
  font-weight: 600;
  color: var(--ink);
}
.mz-drop-link {
  color: var(--brand);
  text-decoration: underline;
  cursor: pointer;
}
.mz-drop-sub {
  margin: 0;
  font-size: .78rem;
  color: var(--ink-soft);
}
.mz-file-input {
  display: none;
}
.mz-uploading-bar {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand);
  border-radius: 12px;
}

/* Hint line */
.mz-hint {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border-radius: 8px;
}
.mz-hint--warn { background: #fff8e1; color: #b8860b; }
.mz-hint--ok   { background: #e8f5e9; color: #2e7d32; }

/* Photo grid */
.mz-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}
.mz-photo-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid var(--line-soft);
  background: var(--bg-soft);
  aspect-ratio: 4/3;
  cursor: default;
  transition: border-color .15s, box-shadow .15s;
}
.mz-photo-card:hover { border-color: var(--brand); box-shadow: 0 3px 10px rgba(0,0,0,.1); }
.mz-photo-card--cover { border-color: var(--brand); }

.mz-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mz-cover-badge {
  position: absolute;
  top: .4rem;
  left: .4rem;
  background: var(--brand);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .18rem .5rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: .25rem;
  pointer-events: none;
}
.mz-photo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  transition: opacity .15s;
  display: flex;
  align-items: flex-end;
  padding: .4rem;
}
.mz-photo-card:hover .mz-photo-overlay { opacity: 1; }
.mz-photo-actions {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
}
.mz-action-btn {
  background: rgba(255,255,255,.9);
  border: none;
  border-radius: 6px;
  width: 1.8rem;
  height: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .75rem;
  color: var(--ink);
  transition: background .12s;
}
.mz-action-btn:hover { background: #fff; }
.mz-action-btn--danger { color: var(--danger, #c0392b); }
.mz-action-btn:disabled { opacity: .35; cursor: not-allowed; }

.mz-photo-meta {
  position: absolute;
  bottom: .3rem;
  right: .4rem;
  font-size: .65rem;
  color: rgba(255,255,255,.8);
  margin: 0;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}

.mz-empty-photos {
  text-align: center;
  padding: 1.5rem 1rem;
  color: var(--ink-soft);
  font-size: .88rem;
}
.mz-empty-photos i { font-size: 2rem; opacity: .3; display: block; margin-bottom: .5rem; }

/* ══════════════════════════════════════════════════════════════════
   User Management
   ══════════════════════════════════════════════════════════════════ */
.um-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.25rem;
  align-items: center;
}
.um-search-input {
  flex: 1;
  min-width: 200px;
  padding: .55rem .85rem;
  border: 1.5px solid var(--line-soft);
  border-radius: .6rem;
  font-size: .88rem;
  background: var(--surface);
  color: var(--ink);
  outline: none;
}
.um-search-input:focus { border-color: var(--brand); }
.um-select {
  padding: .52rem .75rem;
  border: 1.5px solid var(--line-soft);
  border-radius: .6rem;
  font-size: .85rem;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  cursor: pointer;
}
.um-select:focus { border-color: var(--brand); }
.um-field-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
  margin-bottom: .4rem;
}
.um-table-wrap {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: .75rem;
  overflow: hidden;
  overflow-x: auto;
}
.um-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .83rem;
  min-width: 700px;
}
.um-table thead tr { background: var(--surface-alt, #fafafa); }
.um-table th {
  padding: .6rem .9rem;
  text-align: left;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
  border-bottom: 1.5px solid var(--line-soft);
  white-space: nowrap;
}
.um-table th.num { text-align: right; }
.um-table td {
  padding: .65rem .9rem;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink);
  vertical-align: middle;
}
.um-table td.num { text-align: right; }
.um-table .um-row:last-child td { border-bottom: none; }
.um-table .um-row:hover { background: var(--surface-alt, #fafafa); }
.um-user-cell { display: flex; align-items: center; gap: .75rem; }
.um-avatar {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-deep);
  font-weight: 700;
  font-size: .9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.um-user-info { display: flex; flex-direction: column; gap: .05rem; }
.um-user-name { font-weight: 600; color: var(--ink); font-size: .85rem; }
.um-user-sub  { font-size: .73rem; color: var(--ink-muted); }
.um-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}
.um-verif-cell { display: flex; gap: .4rem; align-items: center; font-size: .9rem; }
.um-date { font-size: .75rem; color: var(--ink-muted); white-space: nowrap; }
.um-edit-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border: 1.5px solid var(--line-soft);
  border-radius: .45rem;
  background: var(--surface);
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
}
.um-edit-btn:hover { border-color: var(--brand); color: var(--brand); }
.um-count {
  font-size: .75rem;
  color: var(--ink-muted);
  padding: .5rem .9rem;
  border-top: 1px solid var(--line-soft);
  background: var(--surface-alt, #fafafa);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════════
   Intelligence Dashboard
   ══════════════════════════════════════════════════════════════════ */
.intel-dashboard {
  max-width: 1160px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* Header */
.intel-dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--line-soft);
}
.intel-dashboard-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ink);
  margin: 0 0 .25rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.intel-dashboard-title i { color: var(--brand); }
.intel-dashboard-sub { font-size: .85rem; color: var(--ink-muted); margin: 0; }
.intel-refresh-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem 1rem;
  border: 1.5px solid var(--line-soft);
  border-radius: .6rem;
  background: var(--surface);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.intel-refresh-btn:hover { border-color: var(--brand); color: var(--brand); }

/* Section labels */
.intel-section-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  margin: 1.75rem 0 .75rem;
}
.intel-section-label i { color: var(--brand); font-size: .85rem; }

/* KPI cards */
.intel-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: .5rem;
}
.intel-kpi-card {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: .75rem;
  padding: 1rem 1.1rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s;
}
.intel-kpi-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--kpi-color);
  border-radius: .75rem .75rem 0 0;
}
.intel-kpi-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.intel-kpi-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .5rem;
  background: var(--kpi-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  color: var(--kpi-color);
  margin-bottom: .2rem;
}
.intel-kpi-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--kpi-color);
  line-height: 1.1;
}
.intel-kpi-label {
  font-size: .73rem;
  color: var(--ink-muted);
  font-weight: 500;
  line-height: 1.3;
}

/* Panels (fraud, area table, map) */
.intel-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
  margin-bottom: .5rem;
}
@media (max-width: 680px) { .intel-two-col { grid-template-columns: 1fr; } }

.intel-panel {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: .75rem;
  overflow: hidden;
}
.intel-panel-header {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface-alt, #fafafa);
}
.intel-panel-header i { color: var(--brand); }
.intel-panel-sub {
  font-weight: 400;
  font-size: .73rem;
  color: var(--ink-muted);
  margin-left: auto;
}
.intel-panel-body { max-height: 260px; overflow-y: auto; }

/* Fraud rows */
.intel-fraud-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.intel-fraud-row:last-child { border-bottom: none; }
.intel-fraud-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #fee2e2;
  color: #b91c1c;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
}
.intel-fraud-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.intel-fraud-name { font-size: .83rem; font-weight: 600; color: var(--ink); }
.intel-fraud-email { font-size: .75rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intel-fraud-badge {
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 700;
  font-size: .75rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Duplicate rows */
.intel-dup-row {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.intel-dup-row:last-child { border-bottom: none; }
.intel-dup-icon {
  width: 2rem;
  height: 2rem;
  border-radius: .4rem;
  background: #fef3c7;
  color: #b45309;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  flex-shrink: 0;
  margin-top: .1rem;
}
.intel-dup-info { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.intel-dup-title { font-size: .83rem; font-weight: 600; color: var(--ink); }
.intel-dup-sub { font-size: .75rem; color: var(--ink-muted); }

/* Empty state */
.intel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1.5rem 1rem;
  color: var(--ink-muted);
  font-size: .85rem;
}
.intel-empty i { font-size: 1.5rem; color: var(--brand); opacity: .5; }

/* Quality grid */
.intel-quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .65rem;
  margin-bottom: 2rem;
}
.intel-quality-card {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: .65rem;
  padding: .75rem .9rem;
}
.intel-quality-card--high { border-left: 3px solid #198754; }
.intel-quality-card--mid  { border-left: 3px solid #d97706; }
.intel-quality-card--low  { border-left: 3px solid #dc2626; }
.intel-quality-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; gap: .5rem; }
.intel-quality-title { font-size: .82rem; font-weight: 600; color: var(--ink); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.intel-quality-score { font-size: 1rem; font-weight: 800; flex-shrink: 0; }
.intel-quality-card--high .intel-quality-score { color: #198754; }
.intel-quality-card--mid  .intel-quality-score { color: #d97706; }
.intel-quality-card--low  .intel-quality-score { color: #dc2626; }
.intel-quality-score small { font-size: .65rem; font-weight: 400; opacity: .6; }
.intel-quality-bar { background: var(--line-soft); border-radius: 4px; height: 5px; overflow: hidden; margin-bottom: .4rem; }
.intel-quality-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.intel-quality-card--high .intel-quality-fill { background: #198754; }
.intel-quality-card--mid  .intel-quality-fill { background: #d97706; }
.intel-quality-card--low  .intel-quality-fill { background: #dc2626; }
.intel-quality-meta { display: flex; gap: .75rem; flex-wrap: wrap; font-size: .7rem; color: var(--ink-muted); }
.intel-quality-meta i { margin-right: .2rem; }

/* Area table */
.intel-area-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.intel-area-tbl thead tr { background: var(--surface-alt, #fafafa); }
.intel-area-tbl th { padding: .5rem .75rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); border-bottom: 1.5px solid var(--line-soft); }
.intel-area-tbl th.num { text-align: right; }
.intel-area-tbl td { padding: .5rem .75rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); }
.intel-area-tbl td.num { text-align: right; color: var(--ink-soft); }
.intel-area-tbl tr:last-child td { border-bottom: none; }
.intel-area-tbl .area-name { font-weight: 600; display: flex; align-items: center; gap: .35rem; }
.intel-area-tbl .area-name i { color: var(--brand); font-size: .7rem; }
.intel-ratio { display: inline-block; padding: .15rem .45rem; border-radius: 999px; font-weight: 700; font-size: .78rem; }
.intel-ratio.ratio-hot  { background: #fee2e2; color: #b91c1c; }
.intel-ratio.ratio-warm { background: #fef3c7; color: #b45309; }
.intel-ratio.ratio-ok   { background: #d1fae5; color: #047857; }
.intel-heat-bar { background: var(--line-soft); border-radius: 3px; height: 6px; min-width: 80px; }
.intel-heat-fill { height: 100%; border-radius: 3px; }
.intel-heat-fill.ratio-hot  { background: #b91c1c; }
.intel-heat-fill.ratio-warm { background: #d97706; }
.intel-heat-fill.ratio-ok   { background: var(--brand); }

/* Map canvas */
.intel-map-canvas { width: 100%; height: 280px; border-radius: 0 0 .75rem .75rem; overflow: hidden; background: #e8eaf0; display: flex; align-items: center; justify-content: center; }
.intel-map-placeholder { text-align: center; color: var(--ink-muted); font-size: .82rem; line-height: 1.6; }

/* ══════════════════════════════════════════════════════════════════
   Rented Properties Admin Page
   ══════════════════════════════════════════════════════════════════ */
.rp-page { max-width: 1100px; }
.rp-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.rp-title  { font-size: 1.25rem; font-weight: 800; margin: 0 0 .2rem; }
.rp-sub    { font-size: .83rem; color: var(--ink-soft); margin: 0; }

/* Filters */
.rp-filters { display: flex; gap: .65rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.rp-search-wrap { position: relative; flex: 1; min-width: 220px; }
.rp-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--ink-soft); font-size: .85rem; pointer-events: none; }
.rp-search-input { width: 100%; padding: .55rem .75rem .55rem 2.2rem; border: 1.5px solid var(--line-soft); border-radius: var(--r-md); font-size: .88rem; background: var(--surface); color: var(--ink); box-sizing: border-box; }
.rp-search-input:focus { outline: none; border-color: var(--primary); }

/* Stats pills */
.rp-stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.rp-stat-pill { padding: .3rem .75rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--bg); border: 1px solid var(--line-soft); color: var(--ink-soft); }
.rp-stat-pill span { color: var(--ink); }
.rp-stat-signed { background: color-mix(in srgb, var(--success) 10%, var(--surface)); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.rp-stat-signed span { color: var(--success); }
.rp-stat-active { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.rp-stat-active span { color: var(--primary); }

/* List */
.rp-list { display: flex; flex-direction: column; gap: .75rem; }

/* Card */
.rp-card {
  background: var(--surface);
  border: 1.5px solid var(--line-soft);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: .75rem;
  align-items: start;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.rp-card:hover { border-color: var(--primary); box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 12%, transparent); }
.rp-card-thumb { width: 60px; height: 60px; border-radius: 8px; object-fit: cover; display: block; background: var(--line-soft); flex-shrink: 0; }
.rp-card-thumb-placeholder { width: 60px; height: 60px; border-radius: 8px; background: var(--line-soft); flex-shrink: 0; }
.rp-card-body { min-width: 0; }
.rp-card-title { font-weight: 700; font-size: .95rem; margin: 0 0 .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-card-id    { font-size: .72rem; color: var(--ink-soft); font-family: monospace; margin-bottom: .3rem; }
.rp-card-parties { font-size: .82rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .3rem .75rem; }
.rp-card-parties strong { color: var(--ink); }
.rp-card-meta { font-size: .78rem; color: var(--ink-soft); margin-top: .3rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.rp-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .4rem; flex-shrink: 0; }

/* Status badge */
.rp-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.rp-badge-signed   { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); }
.rp-badge-approved { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.rp-badge-draft    { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.rp-badge-pending  { background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line-soft); }
.rp-badge-active   { background: color-mix(in srgb, var(--success) 18%, var(--surface)); color: var(--success); border: 1.5px solid var(--success); }

/* Drawer */
.rp-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100vw);
  background: var(--surface); border-left: 1.5px solid var(--line-soft);
  box-shadow: -4px 0 32px rgba(0,0,0,.12);
  z-index: 600; display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.rp-drawer.open { transform: translateX(0); }
.rp-drawer-inner { display: flex; flex-direction: column; height: 100%; }
.rp-drawer-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--line-soft); flex-shrink: 0;
}
.rp-drawer-heading { margin: 0; font-size: 1rem; font-weight: 800; }
.rp-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem; }

/* Drawer sections */
.rp-section { margin-bottom: 1.5rem; }
.rp-section-title {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-soft); border-bottom: 1px solid var(--line-soft);
  padding-bottom: .35rem; margin-bottom: .75rem;
}
.rp-parties-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.rp-party-card { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: .65rem .85rem; }
.rp-party-role { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: .2rem; }
.rp-party-name { font-weight: 700; font-size: .9rem; }
.rp-party-contact { font-size: .78rem; color: var(--ink-soft); margin-top: .15rem; }

/* Lease terms grid in drawer */
.rp-terms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: .5rem; margin-bottom: .75rem; }
.rp-term { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: .5rem .75rem; }
.rp-term-label { font-size: .7rem; color: var(--ink-soft); font-weight: 600; margin-bottom: .15rem; }
.rp-term-val   { font-size: .9rem; font-weight: 700; }

/* Signatures */
.rp-sig-row { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.rp-sig { flex: 1; min-width: 140px; background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: .5rem .75rem; font-size: .82rem; }
.rp-sig-name { font-weight: 700; font-size: .88rem; font-style: italic; }
.rp-sig-date { font-size: .72rem; color: var(--ink-soft); }

/* Walkthrough items in drawer */
.rp-wt-sections { display: flex; flex-direction: column; gap: 1rem; }
.rp-wt-section-name { font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin-bottom: .4rem; }
.rp-wt-item { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.rp-wt-item:last-child { border-bottom: none; }
.rp-wt-item-header { display: flex; align-items: flex-start; gap: .5rem; justify-content: space-between; }
.rp-wt-item-label { font-size: .85rem; font-weight: 600; }
.rp-wt-item-note { font-size: .78rem; color: var(--ink-soft); margin-top: .15rem; }
.rp-wt-photos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.rp-wt-photo { width: 72px; height: 56px; border-radius: 6px; object-fit: cover; display: block; cursor: zoom-in; }

/* Messages in drawer */
.rp-messages { display: flex; flex-direction: column; gap: .6rem; }
.rp-msg { background: var(--bg); border: 1px solid var(--line-soft); border-radius: 8px; padding: .55rem .75rem; }
.rp-msg-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .2rem; }
.rp-msg-sender { font-size: .78rem; font-weight: 700; }
.rp-msg-time   { font-size: .7rem; color: var(--ink-soft); }
.rp-msg-body   { font-size: .85rem; line-height: 1.5; }

/* Photo lightbox */
.rp-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 900; display: none; align-items: center; justify-content: center; cursor: zoom-out; }
.rp-lightbox.open { display: flex; }
.rp-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; display: block; }

/* ── Full Record: Payment History ───────────────────────────────────────── */
.rp-pay-summary { font-size: .85rem; margin-bottom: .6rem; color: var(--ink-soft); }
.rp-pay-table-wrap { overflow-x: auto; }
.rp-pay-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.rp-pay-table th { text-align: left; padding: .4rem .6rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); border-bottom: 2px solid var(--line-soft); background: var(--bg); }
.rp-pay-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.rp-pay-table tr:last-child td { border-bottom: none; }
.rp-pay-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-pay-ref { font-size: .72rem; color: var(--ink-soft); font-family: monospace; }

/* ── Full Record: Maintenance Requests ──────────────────────────────────── */
.rp-mr-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: .85rem 1rem; margin-bottom: .75rem; background: var(--bg); }
.rp-mr-card:last-child { margin-bottom: 0; }
.rp-mr-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; flex-wrap: wrap; }
.rp-mr-title { font-weight: 700; font-size: .92rem; }
.rp-mr-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .78rem; color: var(--ink-soft); margin-bottom: .4rem; }
.rp-mr-meta span { display: flex; align-items: center; gap: .3rem; }
.rp-mr-desc { font-size: .84rem; color: var(--ink); line-height: 1.5; margin-bottom: .5rem; }
.rp-mr-comments { margin-top: .6rem; border-top: 1px solid var(--line-soft); padding-top: .6rem; }
.rp-mr-comments-title { font-size: .78rem; font-weight: 600; color: var(--ink-soft); margin-bottom: .35rem; display: flex; align-items: center; gap: .35rem; }

/* ── Full Record: Lease Template Document ───────────────────────────────── */
.rp-lt-card { border: 1px solid var(--line-soft); border-radius: 10px; padding: .85rem 1rem; margin-bottom: .75rem; background: var(--bg); }
.rp-lt-title { font-weight: 700; font-size: .95rem; margin-bottom: .15rem; }
.rp-lt-date { font-size: .72rem; color: var(--ink-soft); margin-bottom: .6rem; }
.rp-lt-section { margin-top: .5rem; }
.rp-lt-section-name { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: .35rem; }

/* ── Full Record: PDF download bar ─────────────────────────────────────── */
.rp-pdf-bar { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; margin-bottom: 1rem; flex-wrap: wrap; }

/* ── Payment Setup Page ─────────────────────────────────────────────────── */
.ps-section { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.ps-section-title { font-size: .9rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; color: var(--ink); }
.ps-bank-status { font-size: .85rem; display: flex; align-items: center; gap: .5rem; padding: .65rem .9rem; border-radius: 8px; margin-bottom: .75rem; }
.ps-bank-status--empty { background: #fef9c3; color: #92400e; border: 1px solid #fde68a; }
.ps-bank-status--linked { background: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; }
.ps-bank-card { display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); margin-bottom: .75rem; flex-wrap: wrap; }
.ps-bank-icon { width: 40px; height: 40px; border-radius: 8px; background: #eff6ff; color: #1d4ed8; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.ps-bank-info { flex: 1; min-width: 0; }
.ps-bank-name { font-weight: 700; font-size: .9rem; }
.ps-bank-acct { font-size: .78rem; color: var(--ink-soft); font-family: monospace; }
.ps-bank-remove-btn { margin-left: auto; }
.ps-bank-form { }
.ps-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem 1rem; margin-bottom: 1rem; }
.ps-method-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .75rem; margin-bottom: .5rem; }
.ps-method-card { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: 1rem .75rem; border: 2px solid var(--line-soft); border-radius: 10px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; background: var(--bg); }
.ps-method-card input[type="radio"] { display: none; }
.ps-method-card:has(input:checked) { border-color: var(--primary); background: #eff6ff; }
.ps-method-icon { font-size: 1.4rem; color: var(--primary); }
.ps-method-label { font-weight: 700; font-size: .85rem; }
.ps-method-sub { font-size: .72rem; color: var(--ink-soft); }
.ps-toggle-list { display: flex; flex-direction: column; gap: .6rem; }
.ps-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: .55rem .25rem; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.ps-toggle-row:last-child { border-bottom: none; }
.ps-toggle-label { font-size: .88rem; }
.ps-toggle-check { width: 18px; height: 18px; cursor: pointer; accent-color: var(--primary); }

/* ── Payment Portfolios ─────────────────────────────────────────────────── */
/* Owner portfolio card list */
.pp-card { display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--surface); margin-bottom: .6rem; flex-wrap: wrap; transition: box-shadow .15s; }
.pp-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.pp-card-icon { width: 42px; height: 42px; border-radius: 10px; background: #eff6ff; color: #1d4ed8; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
.pp-card-body { flex: 1; min-width: 0; }
.pp-card-label { font-weight: 700; font-size: .92rem; }
.pp-card-meta { font-size: .78rem; color: var(--ink-soft); margin-top: .1rem; }
.pp-card-tenant-line { font-size: .78rem; margin-top: .25rem; display: flex; align-items: center; gap: .3rem; }
.pp-card-assigned { color: #15803d; font-weight: 600; display: flex; align-items: center; gap: .3rem; }
.pp-card-unassigned { color: #b45309; display: flex; align-items: center; gap: .3rem; }
.pp-acct-num { font-family: monospace; }
.pp-card-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pp-assign-table-wrap { overflow-x: auto; }

/* Method toggle buttons inside modal */
.pp-method-toggle { display: flex; gap: .5rem; margin-top: .35rem; }
.pp-method-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem .75rem; border: 2px solid var(--line-soft); border-radius: 8px; background: var(--bg); font-size: .85rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, color .15s; color: var(--ink-soft); }
.pp-method-btn.active { border-color: var(--primary); background: #eff6ff; color: var(--primary); }

/* Renter invoice cards */
.pp-invoice-card { border: 1px solid var(--line-soft); border-radius: 14px; padding: 1.1rem 1.25rem; margin-bottom: 1rem; background: var(--surface); }
.pp-invoice-card--paid { border-color: #bbf7d0; background: #f0fdf4; }
.pp-invoice-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; flex-wrap: wrap; }
.pp-invoice-property { font-weight: 700; font-size: .92rem; display: flex; align-items: center; gap: .4rem; }
.pp-invoice-method-label { font-size: .8rem; color: var(--ink-soft); margin-bottom: .65rem; display: flex; align-items: center; gap: .35rem; }
.pp-invoice-details { border: 1px solid var(--line-soft); border-radius: 10px; background: var(--bg); overflow: hidden; }
.pp-invoice-row { display: flex; align-items: center; justify-content: space-between; padding: .5rem .85rem; border-bottom: 1px solid var(--line-soft); font-size: .85rem; gap: .5rem; }
.pp-invoice-row:last-child { border-bottom: none; }
.pp-invoice-row span { color: var(--ink-soft); flex-shrink: 0; }
.pp-invoice-row strong { font-variant-numeric: tabular-nums; }
.pp-invoice-note { padding: .55rem .85rem; font-size: .82rem; color: var(--ink-soft); font-style: italic; background: #fffbeb; border-top: 1px solid #fef3c7; display: flex; gap: .4rem; }
.pp-paid-badge { display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .75rem; color: #15803d; font-weight: 700; font-size: .9rem; }
.pp-empty { padding: 1.25rem; background: var(--surface); border: 1px dashed var(--line-soft); border-radius: 12px; font-size: .88rem; color: var(--ink-soft); display: flex; align-items: center; gap: .5rem; }

/* ── Print styles ───────────────────────────────────────────────────────── */
@media print {
  body > *:not(#rp-drawer) { display: none !important; }
  #rp-drawer { position: static !important; width: 100% !important; height: auto !important; box-shadow: none !important; overflow: visible !important; }
  #rp-drawer-body { overflow: visible !important; height: auto !important; }
  .no-print { display: none !important; }
  .rp-section { break-inside: avoid; page-break-inside: avoid; }
  .rp-mr-card, .rp-lt-card, .rp-party-card { break-inside: avoid; }
  #rp-drawer-close { display: none !important; }
}

/* ── Lease Template Editor Overlay ──────────────────────────────────────── */
.lt-overlay {
  position: fixed; inset: 0; z-index: 800;
  background: var(--bg, #f8fafc);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.lt-overlay.hidden { display: none; }

.lt-overlay-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem; padding: .85rem 1.25rem;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--line-soft, #e2e8f0);
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.lt-overlay-title {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .97rem; color: var(--ink);
}

.lt-overlay-body {
  flex: 1; overflow-y: auto;
  padding: 1.5rem 1.25rem 3rem;
  max-width: 860px; width: 100%; margin: 0 auto;
}

.lt-status-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  padding: .6rem 1.25rem;
  font-size: .84rem; font-weight: 600;
  text-align: center;
  border-top: 1px solid transparent;
  transition: opacity .3s;
}
.lt-status-bar.hidden { display: none; }
.lt-status-saved { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.lt-status-sent  { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }

/* Cover block */
.lt-cover {
  background: linear-gradient(135deg, #1a56db 0%, #0e3a8c 100%);
  color: #fff; border-radius: 14px; padding: 2rem 1.5rem 1.5rem;
  margin-bottom: 1.5rem; text-align: center;
}
.lt-cover-logo { font-size: 2.2rem; margin-bottom: .6rem; opacity: .9; }
.lt-cover-title { font-size: 1.25rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.lt-cover-subtitle { font-size: .85rem; opacity: .8; margin-top: .4rem; }
.lt-cover .lt-field { text-align: left; }
.lt-cover .lt-label { color: rgba(255,255,255,.8); }
.lt-cover .lt-input { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }
.lt-cover .lt-input::placeholder { color: rgba(255,255,255,.5); }

/* Section card */
.lt-section {
  background: var(--surface, #fff);
  border: 1px solid var(--line-soft, #e2e8f0);
  border-radius: 12px; margin-bottom: 1rem;
  overflow: hidden;
}
.lt-section-header {
  display: flex; align-items: center; gap: .65rem;
  padding: .75rem 1.1rem;
  background: var(--bg, #f8fafc);
  border-bottom: 1px solid var(--line-soft, #e2e8f0);
}
.lt-section-num {
  background: var(--primary, #1a56db); color: #fff;
  font-size: .72rem; font-weight: 800;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.lt-section-title { font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.lt-section-body { padding: 1rem 1.1rem; }

/* Sub-section title */
.lt-subsection-title {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--primary, #1a56db);
  margin-bottom: .5rem; padding-bottom: .25rem;
  border-bottom: 2px solid var(--primary-light, #dbeafe);
}

/* Field */
.lt-field { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .7rem; }
.lt-label { font-size: .78rem; font-weight: 600; color: var(--ink-soft, #64748b); }
.lt-input {
  padding: .5rem .75rem;
  border: 1px solid var(--line-soft, #e2e8f0);
  border-radius: 8px;
  font-size: .88rem;
  color: var(--ink, #1e293b);
  background: var(--bg, #f8fafc);
  transition: border-color .15s, box-shadow .15s;
  width: 100%; box-sizing: border-box;
}
.lt-input:focus {
  outline: none; border-color: var(--primary, #1a56db);
  box-shadow: 0 0 0 3px rgba(26,86,219,.12);
  background: #fff;
}
.lt-textarea { resize: vertical; min-height: 70px; font-family: inherit; line-height: 1.5; }

/* Grids */
.lt-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .75rem; }
.lt-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem .75rem; }
@media (max-width: 600px) {
  .lt-grid-2, .lt-grid-3 { grid-template-columns: 1fr; }
}

/* Checkbox row */
.lt-checkbox-row { display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
.lt-checkbox-col { flex-direction: column; gap: .4rem; }
.lt-checkbox-label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .85rem; cursor: pointer; user-select: none;
}
.lt-checkbox-label input[type=checkbox] { accent-color: var(--primary, #1a56db); width: 15px; height: 15px; cursor: pointer; }

/* Utilities table */
.lt-utilities-table { border: 1px solid var(--line-soft); border-radius: 8px; overflow: hidden; margin-bottom: .75rem; }
.lt-util-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0; }
.lt-util-row > div { padding: .5rem .75rem; border-bottom: 1px solid var(--line-soft); font-size: .84rem; display: flex; align-items: center; justify-content: center; }
.lt-util-row > div:first-child { justify-content: flex-start; }
.lt-util-row:last-child > div { border-bottom: none; }
.lt-util-header { background: var(--bg); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.lt-util-header > div { justify-content: center; }
.lt-util-header > div:first-child { justify-content: flex-start; }
.lt-util-row input[type=radio] { accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer; }

/* Signature blocks */
.lt-sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .lt-sig-grid { grid-template-columns: 1fr; } }
.lt-sig-block {
  border: 1px solid var(--line-soft); border-radius: 10px; padding: .9rem 1rem;
  background: var(--bg);
}
.lt-sig-party {
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin-bottom: .75rem;
  display: flex; align-items: center; gap: .4rem;
}
.lt-sig-line-wrap { margin-top: .6rem; }
.lt-sig-prompt { font-size: .75rem; color: var(--ink-soft); margin-bottom: .2rem; }
.lt-sig-input {
  font-family: 'Georgia', cursive; font-size: 1.15rem;
  color: #1e293b; border: none; border-bottom: 2px solid var(--line-soft);
  background: transparent; width: 100%; padding: .25rem 0;
  transition: border-color .15s;
}
.lt-sig-input:focus { outline: none; border-color: var(--primary); }

/* ── Maintenance Request Cards ───────────────────────────────────────────── */
.mr-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line-soft, #e2e8f0);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: .75rem;
  transition: box-shadow .15s;
}
.mr-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,.08); }
.mr-card-left { flex: 1; min-width: 0; }
.mr-card-right { display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; flex-shrink: 0; }
.mr-card-title { font-weight: 700; font-size: .95rem; color: var(--ink, #1e293b); margin-bottom: .2rem; }
.mr-card-meta { font-size: .78rem; color: var(--ink-soft, #64748b); display: flex; flex-wrap: wrap; gap: .3rem .75rem; margin-bottom: .35rem; }
.mr-card-desc { font-size: .84rem; color: var(--ink, #1e293b); line-height: 1.5; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Issue type grid inside form */
.mr-issue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .5rem;
  margin-bottom: .75rem;
}
.mr-issue-chip {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .75rem;
  border: 1px solid var(--line-soft, #e2e8f0);
  border-radius: 8px;
  font-size: .83rem;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s;
}
.mr-issue-chip input[type=checkbox] { accent-color: var(--primary, #1a56db); width: 14px; height: 14px; }
.mr-issue-chip:has(input:checked) {
  border-color: var(--primary, #1a56db);
  background: #eff6ff;
}

/* Photo upload area */
.mr-photo-upload-area {
  border: 2px dashed var(--line-soft, #e2e8f0);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  margin-bottom: .75rem;
}
.mr-photo-upload-area:hover { border-color: var(--primary, #1a56db); background: #eff6ff; }
.mr-photo-label { font-size: .85rem; color: var(--ink-soft, #64748b); display: flex; flex-direction: column; align-items: center; gap: .35rem; cursor: pointer; }
.mr-photo-label svg { width: 28px; height: 28px; opacity: .5; }

/* Photo previews */
.mr-photo-previews {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .75rem;
}
.mr-preview-thumb {
  width: 72px; height: 72px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line-soft, #e2e8f0);
}

/* Eligibility notice */
.mr-eligibility-notice {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  padding: 1rem 1.2rem;
  color: #92400e;
  font-size: .88rem;
  line-height: 1.55;
}

/* Detail modal body */
.mr-detail-section { margin-bottom: 1.25rem; }
.mr-detail-section h4 { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, #64748b); margin-bottom: .5rem; }
.mr-detail-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.mr-detail-photo { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line-soft); cursor: pointer; }
.mr-comment { padding: .65rem .85rem; background: var(--bg, #f8fafc); border-radius: 8px; margin-bottom: .4rem; }
.mr-comment-meta { font-size: .75rem; color: var(--ink-soft); margin-bottom: .2rem; }
.mr-comment-body { font-size: .85rem; line-height: 1.5; }

/* Admin/owner filter bar */
.mr-filter-bar { display: flex; gap: .6rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.mr-filter-bar select { padding: .4rem .75rem; border: 1px solid var(--line-soft); border-radius: 8px; font-size: .85rem; background: var(--surface, #fff); }

/* ── App Toast ────────────────────────────────────────────────────────────── */
.app-toast {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  background: #1e293b; color: #fff;
  padding: .65rem 1.25rem; border-radius: 999px;
  font-size: .875rem; font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
  z-index: 9999; opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  white-space: nowrap;
}
.app-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast--success { background: #166534; }
.app-toast--error   { background: #991b1b; }
.app-toast--info    { background: #1e293b; }

/* ── Analytics Page ───────────────────────────────────────────────────────── */
.an-page {
  max-width: 1080px;
  padding: 1.5rem 1.25rem 3rem;
}

/* Header */
.an-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: .75rem; margin-bottom: 1.5rem;
}
.an-title {
  font-size: 1.35rem; font-weight: 800; color: var(--ink, #1e293b);
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem;
}
.an-subtitle { font-size: .85rem; color: var(--ink-soft, #64748b); margin: 0; }
.an-header-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.an-action-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .9rem; border-radius: 8px;
  border: 1px solid var(--line-soft, #e2e8f0);
  background: var(--surface, #fff); color: var(--ink, #1e293b);
  font-size: .82rem; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.an-action-btn:hover {
  background: var(--bg, #f8fafc);
  border-color: var(--primary, #1a56db);
  box-shadow: 0 0 0 3px rgba(26,86,219,.07);
}

/* Section gap */
.an-section-gap { margin-bottom: 1rem; }

/* KPI strip */
.an-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .65rem; margin-bottom: 1.25rem;
}
.an-kpi-strip--sm {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 0;
}

/* KPI card */
.an-kpi-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line-soft, #e2e8f0);
  border-radius: 14px; padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .25rem;
  position: relative; overflow: hidden;
  transition: box-shadow .15s, transform .15s;
}
.an-kpi-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-1px); }
.an-kpi-icon {
  width: 2rem; height: 2rem; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; margin-bottom: .35rem;
  background: #eff6ff; color: var(--primary, #1a56db);
}
.an-kpi-value {
  font-size: 1.55rem; font-weight: 800;
  color: var(--ink, #1e293b); line-height: 1.1;
  letter-spacing: -.02em;
}
.an-kpi-label {
  font-size: .74rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft, #64748b);
}
.an-kpi-sub { font-size: .72rem; color: #94a3b8; }

/* Listing selector */
.an-selector-row {
  display: flex; align-items: center; gap: .75rem;
  margin-bottom: 1.25rem; flex-wrap: wrap;
}
.an-selector-label {
  font-size: .85rem; font-weight: 700; color: var(--ink, #1e293b);
  white-space: nowrap; display: flex; align-items: center; gap: .35rem;
}
.an-selector-select {
  flex: 1; min-width: 200px; max-width: 420px;
  padding: .5rem .85rem; border-radius: 9px;
  border: 1px solid var(--line-soft, #e2e8f0);
  font-size: .85rem; background: var(--surface, #fff);
  color: var(--ink, #1e293b);
  transition: border-color .15s, box-shadow .15s;
}
.an-selector-select:focus {
  outline: none; border-color: var(--primary, #1a56db);
  box-shadow: 0 0 0 3px rgba(26,86,219,.1);
}

/* Cards */
.an-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line-soft, #e2e8f0);
  border-radius: 14px; overflow: hidden;
}
.an-card-header {
  display: flex; align-items: center; gap: .45rem;
  padding: .85rem 1.1rem;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink, #1e293b);
  background: var(--bg, #f8fafc);
  border-bottom: 1px solid var(--line-soft, #e2e8f0);
}
.an-card-header-sub {
  font-weight: 400; font-size: .78rem;
  text-transform: none; letter-spacing: 0;
  color: var(--ink-soft, #64748b); margin-left: .25rem;
}
.an-card > :not(.an-card-header):not(.an-table-scroll):not(.an-rev-scroll) { padding: 1rem 1.1rem; }

/* Two-col grid */
.an-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 680px) { .an-grid-2 { grid-template-columns: 1fr; } }

/* Occupancy ring */
.an-occ-wrap { display: flex; align-items: center; gap: 1.25rem; padding: 1rem 1.1rem; }
.an-occ-ring-wrap { position: relative; width: 90px; height: 90px; flex-shrink: 0; }
.an-occ-ring { width: 90px; height: 90px; transform: rotate(-90deg); }
.an-occ-ring-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 800; color: var(--ink, #1e293b);
}
.an-occ-info { display: flex; flex-direction: column; gap: .2rem; }
.an-occ-status {
  font-size: .88rem; font-weight: 700;
  display: flex; align-items: center; gap: .4rem;
}
.an-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.an-occ-stat { font-size: .78rem; color: var(--ink-soft, #64748b); }

/* Funnel */
.an-funnel { display: flex; flex-direction: column; gap: .65rem; padding: 1rem 1.1rem; }
.an-funnel-step {}
.an-funnel-meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .3rem;
}
.an-funnel-stage {
  display: flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 600; color: var(--ink, #1e293b);
}
.an-funnel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.an-funnel-count { display: flex; align-items: center; gap: .45rem; font-size: .82rem; }
.an-funnel-drop {
  font-size: .72rem; font-weight: 700; padding: .1rem .4rem;
  border-radius: 999px;
}
.an-funnel-drop.good { background: #dcfce7; color: #166534; }
.an-funnel-drop.ok   { background: #fef9c3; color: #854d0e; }
.an-funnel-drop.low  { background: #fee2e2; color: #991b1b; }
.an-funnel-bar-track {
  height: 8px; background: var(--line-soft, #e2e8f0);
  border-radius: 4px; overflow: hidden;
}
.an-funnel-bar-fill {
  height: 100%; border-radius: 4px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

/* Benchmark & delta */
.an-delta {
  font-size: .75rem; font-weight: 700; padding: .15rem .45rem;
  border-radius: 6px;
}
.an-delta.up   { background: #dcfce7; color: #166534; }
.an-delta.down { background: #fee2e2; color: #991b1b; }
.an-bench-note {
  font-size: .75rem; color: var(--ink-soft, #64748b);
  margin-top: .65rem; display: flex; align-items: center; gap: .3rem;
}

/* Table */
.an-table-scroll { overflow-x: auto; }
.an-table {
  width: 100%; border-collapse: collapse; font-size: .83rem;
}
.an-table thead tr {
  border-bottom: 2px solid var(--line-soft, #e2e8f0);
  background: var(--bg, #f8fafc);
}
.an-table th {
  padding: .6rem .85rem; text-align: left;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-soft, #64748b);
  white-space: nowrap;
}
.an-table-row {
  border-bottom: 1px solid var(--line-soft, #e2e8f0);
  transition: background .1s;
}
.an-table-row:hover { background: var(--bg, #f8fafc); }
.an-table td { padding: .65rem .85rem; vertical-align: middle; }
.an-right { text-align: right !important; }
.an-mono { font-variant-numeric: tabular-nums; }
.an-listing-name { font-weight: 700; font-size: .88rem; }
.an-listing-area { font-size: .74rem; color: var(--ink-soft, #64748b); display: flex; align-items: center; gap: .25rem; margin-top: .1rem; }

/* Status badges */
.an-badge {
  display: inline-block; font-size: .71rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 999px;
  text-transform: capitalize; white-space: nowrap;
}
.an-badge--green { background: #dcfce7; color: #166534; }
.an-badge--amber { background: #fef9c3; color: #854d0e; }

/* Occupancy bar inside table */
.an-occ-cell { display: flex; align-items: center; gap: .45rem; justify-content: flex-end; }
.an-occ-bar { width: 56px; height: 6px; background: var(--line-soft, #e2e8f0); border-radius: 3px; overflow: hidden; }
.an-occ-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }

/* Revenue list */
.an-rev-scroll { max-height: 260px; overflow-y: auto; }
.an-rev-list { display: flex; flex-direction: column; }
.an-rev-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; padding: .6rem 1.1rem;
  border-bottom: 1px solid var(--line-soft, #e2e8f0);
}
.an-rev-row:last-child { border-bottom: none; }
.an-rev-left { flex: 1; min-width: 0; }
.an-rev-month { font-size: .85rem; font-weight: 700; color: var(--ink, #1e293b); }
.an-rev-breakdown { font-size: .73rem; color: var(--ink-soft, #64748b); margin-top: .1rem; }
.an-rev-right { text-align: right; flex-shrink: 0; }
.an-rev-amount { font-size: .9rem; font-weight: 700; color: var(--primary, #1a56db); font-variant-numeric: tabular-nums; }
.an-rev-bar-track { width: 90px; height: 5px; background: var(--line-soft, #e2e8f0); border-radius: 3px; overflow: hidden; margin-top: .3rem; margin-left: auto; }
.an-rev-bar-fill { height: 100%; background: linear-gradient(90deg, #6366f1, var(--primary, #1a56db)); border-radius: 3px; transition: width .4s ease; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES — Mobile-first fixes for all pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global safety net ──────────────────────────────────────────────────── */
* { min-width: 0; }

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Prevent any child from blowing out the viewport */
.mode-section, .sub-page, .placeholder-page,
.an-page, .lt-overlay-body, [data-section] {
  overflow-x: hidden;
  max-width: 100%;
}

/* All tables scroll horizontally inside their container */
table {
  min-width: 0;
}
.tl-table-scroll,
.an-table-scroll,
#analytics-portfolio,
.owner-dash-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .topbar { padding: 0.5rem 0.75rem; gap: 0.5rem; min-height: 56px; }
  .brand-name { display: none; }          /* hide text, keep logo mark */
  .role-switcher label { display: none; } /* hide "Role:" label */
  .role-switcher { padding: 0.25rem 0.5rem; }
}

/* ── Section subnav ─────────────────────────────────────────────────────── */
.section-subnav {
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.65rem; /* room for shadow */
}
@media (max-width: 600px) {
  .subnav-btn { font-size: 0.75rem; padding: 0.35rem 0.65rem; }
  .subnav-btn i { display: none; } /* icon-only on very small screens? no — keep text, drop icon */
}

/* ── Placeholder / page wrapper ─────────────────────────────────────────── */
.placeholder-page { padding: 0.75rem 0 2rem; }
@media (max-width: 600px) {
  .placeholder-header { flex-direction: column !important; align-items: flex-start !important; gap: .5rem !important; }
  .placeholder-header > div:last-child { width: 100%; }
}

/* ── Owner Dashboard KPI strip ──────────────────────────────────────────── */
#owner-kpi-strip,
.owner-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .65rem;
}
@media (max-width: 480px) {
  #owner-kpi-strip,
  .owner-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Analytics page ─────────────────────────────────────────────────────── */
.an-page { padding: 1rem 0.75rem 3rem; }
.an-kpi-strip {
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}
@media (max-width: 480px) {
  .an-kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .an-kpi-strip--sm { grid-template-columns: repeat(2, 1fr); }
  .an-header { flex-direction: column; gap: .5rem; }
  .an-header-actions { width: 100%; justify-content: flex-start; }
  .an-grid-2 { grid-template-columns: 1fr !important; }
  .an-selector-select { max-width: 100%; }
  .an-rev-bar-track { width: 60px; }
}

/* ── intel-two-col (dashboard panels) ──────────────────────────────────── */
.intel-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 740px) {
  .intel-two-col { grid-template-columns: 1fr !important; }
}

/* ── Rent modals ────────────────────────────────────────────────────────── */
.rent-modal-backdrop { padding: 0.5rem; align-items: flex-end; }
@media (min-width: 520px) { .rent-modal-backdrop { align-items: center; } }
.rent-modal {
  max-height: 96vh;
  border-radius: 16px 16px 12px 12px;
}
@media (max-width: 520px) {
  .rent-modal {
    border-radius: 16px 16px 0 0;
    max-width: 100% !important;
    width: 100%;
    margin-bottom: 0 !important;
  }
  .rent-modal-backdrop { padding: 0; padding-top: 0.5rem; }
}

/* ── Lease template overlay ─────────────────────────────────────────────── */
.lt-overlay-body { padding: 1rem 0.75rem 3rem; }
.lt-overlay-header { padding: 0.65rem 0.75rem; flex-wrap: wrap; gap: 0.4rem; }
@media (max-width: 520px) {
  .lt-overlay-header > div:last-child { width: 100%; justify-content: flex-end; }
  .lt-grid-2, .lt-grid-3 { grid-template-columns: 1fr !important; }
  .lt-sig-grid { grid-template-columns: 1fr !important; }
  .lt-utilities-table { font-size: .75rem; }
  .lt-util-row { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

/* ── Maintenance team add row ───────────────────────────────────────────── */
#mr-team-add-row {
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
}
@media (max-width: 900px) {
  #mr-team-add-row {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 520px) {
  #mr-team-add-row {
    grid-template-columns: 1fr !important;
  }
  #mr-team-add-row button { width: 100%; }
}

/* ── Maintenance cards ──────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .mr-card { flex-direction: column; gap: .5rem; }
  .mr-card-right { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ── MR detail modal update row ─────────────────────────────────────────── */
@media (max-width: 560px) {
  #mr-assign-sel { min-width: 0 !important; width: 100%; }
  /* Update request fields stack on mobile */
  #mr-update-btn { width: 100%; margin-top: .25rem; }
}

/* ── Walkthrough ─────────────────────────────────────────────────────────── */
.wt-property-preview {
  display: flex; gap: 1rem; flex-wrap: wrap;
}
@media (max-width: 560px) {
  .wt-property-preview { flex-direction: column; }
  .wt-preview-img-wrap { width: 100%; height: 180px; }
  .wt-progress-header { flex-direction: column; gap: .5rem; padding: .6rem .75rem; }
  .wt-ph-left, .wt-ph-right { width: 100%; }
}

/* Walkthrough review grid */
.wt-review-grid,
.wt-cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* ── Owner dashboard summary bar ────────────────────────────────────────── */
.owner-dash-summary {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
@media (max-width: 480px) {
  .owner-dash-summary { flex-direction: column; }
}

/* ── Inline grid overrides from JS-generated HTML ───────────────────────── */
/* These selectors target inline-styled grids injected by app.ts */
@media (max-width: 680px) {
  /* Maintenance detail modal update row */
  #mr-detail-body [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Owner dashboard KPI grid injected inline */
  #owner-kpi-strip > div {
    min-width: 0;
  }
}

/* ── Lease ops / admin tables ───────────────────────────────────────────── */
#lease-ops-table-wrap,
#admin-table-wrap,
.tl-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Account profile layout ─────────────────────────────────────────────── */
.account-profile-layout {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  .account-profile-layout { grid-template-columns: 200px 1fr !important; }
}

/* ── Detail page (listing detail) ──────────────────────────────────────── */
@media (max-width: 767px) {
  .detail-hero { grid-template-columns: 1fr !important; }
  .dual-panels { grid-template-columns: 1fr !important; }
  .detail-body { gap: .6rem; }
}

/* ── Wizard / add property ──────────────────────────────────────────────── */
@media (max-width: 899px) {
  .wizard-layout { grid-template-columns: 1fr !important; }
  .wizard-preview-col { display: none; }
}

/* ── Bottom nav (mobile) ─────────────────────────────────────────────────── */
@media (min-width: 768px) {
  body { padding-bottom: 0; }
}

/* ── Sidebar drawer ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sidebar-drawer { width: min(320px, 88vw) !important; }
}

/* ── Forms / inputs on mobile ───────────────────────────────────────────── */
@media (max-width: 520px) {
  input, select, textarea {
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
  .cta-btn, .ghost-btn { min-height: 44px; } /* touch target */
  .subnav-btn { min-height: 40px; }
}

/* ── Analytics card inner padding on mobile ─────────────────────────────── */
@media (max-width: 520px) {
  .an-card > *:not(.an-card-header):not(.an-table-scroll):not(.an-rev-scroll) {
    padding: .75rem;
  }
  .an-funnel { padding: .75rem; }
  .an-occ-wrap { padding: .75rem; }
  .an-rev-row { padding: .5rem .75rem; }
  .an-table th, .an-table td { padding: .45rem .55rem; }
}

/* ── Scrollable subnav indicator (fade on right edge) ───────────────────── */
.section-subnav-wrap {
  position: relative;
}
.section-subnav-wrap::after {
  content: '';
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 2rem;
  background: linear-gradient(to left, var(--bg, #f4f1ea), transparent);
  pointer-events: none;
}

/* ── MR form modal responsive ───────────────────────────────────────────── */
@media (max-width: 520px) {
  .mr-issue-grid { grid-template-columns: 1fr 1fr !important; }
  #mr-form-modal .rent-modal,
  #mr-detail-modal .rent-modal { width: 100%; max-width: 100% !important; }
}

/* ── Lease template overlay action buttons ──────────────────────────────── */
@media (max-width: 480px) {
  .lt-overlay-header { gap: .35rem; }
  .lt-overlay-header button { font-size: .78rem; padding: .35rem .65rem; }
}