/* ================================================================
   TISAKENYUMBA — RESPONSIVE SYSTEM  v37
   Mobile-first · fluid · accessible · zero horizontal scroll
   ─────────────────────────────────────────────────────────────────
   Breakpoints
     xs:  320px  tiny phones (SE, Galaxy A)
     sm:  480px  standard mobile
     md:  768px  tablet / large phone landscape
     lg:  1024px laptop
     xl:  1280px desktop
    2xl:  1440px large / wide desktop
   ================================================================ */

/* ================================================================
   0. GLOBAL OVERFLOW GUARD
   ================================================================ */
html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ================================================================
   1. BASE — FONT & LINE-HEIGHT
   ================================================================ */
body {
  font-size:              var(--text-base);
  line-height:            1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:         optimizeLegibility;
}

/* Fluid type hierarchy */
h1,.land-title        { font-size: var(--text-3xl); line-height: 0.94; }
h2,.auth-title        { font-size: var(--text-xl);  }
h3,.ph h3             { font-size: var(--text-lg);  }
h4,.card-body h4      { font-size: var(--text-md);  }

.td-mono,
.sc .sc-lbl,
thead th              { font-size: var(--text-xs);  }

/* ================================================================
   2. CONTAINER SYSTEM — fluid gutter via clamp in tokens
   ================================================================ */
.container,
.content-wrap {
  width:         100%;
  max-width:     var(--container-max);
  margin-left:   auto;
  margin-right:  auto;
  padding-left:  var(--container-px);
  padding-right: var(--container-px);
}

/* ================================================================
   3. GLOBAL IMAGE SAFETY
   ================================================================ */
img,
video,
svg {
  max-width:  100%;
  height:     auto;
  display:    block;
}

/* ================================================================
   4. ANTI-SCROLL SCREENS
   ================================================================ */
.screen,
#landing,
#tenant-search,
#agent-dashboard,
#tenant-auth,
#agent-auth {
  max-width:  100vw;
  overflow-x: hidden;
}

/* ================================================================
   5. LANDING SCREEN
   ================================================================ */
#landing {
  padding:          0;
  flex-direction:   column;
  overflow-x:       hidden;
  min-height:       100dvh;       /* dvh: accounts for mobile browser chrome */
}

/* — Topbar — */
.land-topbar {
  padding:    clamp(8px, 2vw, 12px) var(--container-px);
  position:   sticky;
  top:        0;
  z-index:    var(--z-topbar);
}

.land-topbar-logo img {
  height: clamp(56px, 12vw, 100px);
  width:  auto;
}

/* — Inner content — */
.land-inner {
  position:        relative;
  z-index:         1;
  text-align:      center;
  width:           100%;
  padding:         0 var(--container-px) var(--sp-8);
  /* fluid max-width: tight on phone, generous on desktop */
  max-width:       min(100%, 480px);
  margin:          0 auto;
}

@media (min-width: 480px) {
  .land-inner { max-width: 540px; }
}
@media (min-width: 768px) {
  .land-inner { max-width: 680px; }
}
@media (min-width: 1024px) {
  .land-inner {
    max-width:      min(900px, 90vw);
    padding-bottom: var(--sp-12);
  }
}
@media (min-width: 1280px) {
  .land-inner { max-width: 960px; }
}

/* — Hero block — */
.land-hero-block {
  padding: clamp(24px, 6vw, 80px) 0 clamp(16px, 4vw, 56px);
}

.land-title {
  letter-spacing: clamp(-1px, -0.5vw, -2px);
  margin-bottom:  var(--sp-3);
}

.land-sub {
  font-size:     var(--text-sm);
  margin-bottom: var(--sp-4);
}

.land-free-badge {
  font-size:     var(--text-xs);
  padding:       6px 12px;
  margin-bottom: var(--sp-8);
}

/* — Role grid — */
.role-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   10px;
  margin-bottom:         var(--sp-6);
}

@media (min-width: 360px) {            /* xs+: 2-col early */
  .role-grid {
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
  }
}

@media (min-width: 768px) {
  .role-grid { gap: 16px; }

  .role-card {
    padding:       32px 22px 26px;
    border-radius: var(--r-xl);
  }
  .role-card h3 { font-size: 19px; }
  .role-card p  { font-size: 12px; }
}

@media (min-width: 1024px) {
  .role-grid { gap: 20px; }

  .role-card {
    padding:       36px 24px 28px;
    border-radius: 24px;
  }
}

/* ================================================================
   6. PRICING SECTION
   ================================================================ */
.pricing-cols {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

@media (min-width: 480px) {
  .pricing-cols {
    flex-direction: row;
    gap:            12px;
  }
}

@media (min-width: 768px) {
  .pricing-cols          { gap: 14px; }
  .pricing-col           { padding: 24px 18px; border-radius: 20px; }
  .pricing-tier-price    { font-size: 28px; }
}

@media (min-width: 1024px) {
  .pricing-cols          { gap: 20px; }
  .pricing-col           { padding: 30px 22px; }
  .pricing-tier-name     { font-size: 20px; }
  .pricing-tier-price    { font-size: 32px; }
}

/* ================================================================
   7. AUTH SCREENS
   ================================================================ */
#tenant-auth,
#agent-auth {
  padding:          var(--sp-6) var(--container-px);
  align-items:      center;
  justify-content:  center;
  min-height:       100dvh;
}

.auth-box {
  width:      100%;
  max-width:  440px;
}

.auth-logo-wrap img {
  width: clamp(100px, 28vw, 140px);
}

@media (min-width: 768px) {
  .auth-box           { max-width: 480px; }
  #tenant-auth,
  #agent-auth         { padding: var(--sp-10) var(--container-px); }
}

@media (min-width: 1024px) {
  .auth-box           { max-width: 520px; }
}

/* ================================================================
   8. APP HEADER
   ================================================================ */
.app-header {
  padding:     clamp(8px, 2vw, 12px) var(--container-px);
  min-height:  var(--topbar-h);
  width:       100%;
}

.nav-logo-img {
  height:     clamp(40px, 9vw, 70px);
  width:      auto;
  max-width:  260px;
  object-fit: contain;
}

.hdr-right { gap: var(--sp-2); }

.user-pill {
  font-size: var(--text-xs);
  padding:   5px 10px 5px 5px;
}

@media (min-width: 480px) {
  .user-pill { font-size: 12px; }
}

@media (min-width: 768px) {
  .hdr-right   { gap: var(--sp-3); }
}

/* ================================================================
   9. SEARCH / TENANT SCREEN
   ================================================================ */
.search-hero {
  padding: clamp(14px, 3vw, 28px) var(--container-px) clamp(12px, 2.5vw, 20px);
}

.hero-top h2 {
  font-size: clamp(20px, 5vw, 30px);
}

.hero-select {
  font-size: var(--text-base);
  padding:   11px 14px;
}

/* Filter row — 2-col on mobile, 4-col on tablet+ */
.filter-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   8px;
}

@media (min-width: 768px) {
  .filter-row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap:                   10px;
  }
}

@media (min-width: 1024px) {
  .filter-row {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .hero-top,
  .search-actions {
    max-width:    var(--container-max);
    margin-left:  auto;
    margin-right: auto;
    padding:      0;
  }
}

/* ================================================================
   10. LISTINGS SECTION — RESPONSIVE GRID
   ================================================================ */
.listings-section {
  padding: clamp(12px, 3vw, 24px) var(--container-px);
  flex:    1;
}

#listings-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   14px;
}

/* 2-col at 480px+ */
@media (min-width: 480px) {
  #listings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   14px;
  }
}

/* Keep 2-col at tablet */
@media (min-width: 768px) {
  #listings-grid          { gap: 16px; }
  .listings-section       { padding: clamp(16px, 3vw, 24px) var(--container-px); }
}

/* 3-col on laptop */
@media (min-width: 1024px) {
  #listings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   18px;
  }

  .listings-section {
    max-width: var(--container-max);
    margin:    0 auto;
    width:     100%;
  }

  .section-hdr { max-width: var(--container-max); }
}

/* 4-col on wide desktop */
@media (min-width: 1280px) {
  #listings-grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   20px;
  }
}

/* Auto-fit fallback for any future uncontrolled grids */
.auto-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap:                   16px;
}

/* ================================================================
   11. LISTING CARDS
   ================================================================ */
.listing-card {
  border-radius: clamp(14px, 3vw, 20px);
}

/* Aspect ratio — keeps image proportional without fixed height */
.card-img-v2 {
  aspect-ratio: 16 / 10;
  min-height:   unset;
}

/* Taller aspect on very small screens avoids crushing */
@media (max-width: 359px) {
  .card-img-v2 { aspect-ratio: 4 / 3; }
}

.card-body {
  padding: clamp(10px, 2.5vw, 14px);
}

.card-body h4 {
  font-size: clamp(13px, 3vw, 16px);
}

/* Card action buttons — flex-fill on mobile, fixed on larger */
.card-actions {
  display:   flex;
  gap:       6px;
  flex-wrap: wrap;
}

.card-actions .wa-btn,
.card-actions .view-btn {
  flex:             1;
  min-width:        0;
  justify-content:  center;
  font-size:        var(--text-xs);
  padding:          10px 8px;
}

@media (min-width: 768px) {
  .card-actions .wa-btn,
  .card-actions .view-btn {
    font-size: 12px;
    padding:   11px 12px;
  }
}

.tag-row {
  flex-wrap: wrap;
  gap:       4px;
}

.tag {
  font-size: var(--text-xs);
  padding:   3px 7px;
}

/* ================================================================
   12. PILLS / CATEGORY BAR
   ================================================================ */
.pills-bar {
  padding:                   var(--sp-3) var(--container-px);
  gap:                       6px;
  flex-wrap:                 nowrap;
  overflow-x:                auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:           none;
  scroll-snap-type:          x mandatory;
}
.pills-bar::-webkit-scrollbar { display: none; }

.pills-bar > * { scroll-snap-align: start; }

@media (min-width: 768px) {
  .pills-bar {
    flex-wrap:  wrap;
    overflow-x: visible;
  }
}

/* ================================================================
   13. AGENT DASHBOARD
   ================================================================ */
.agent-hero {
  padding: clamp(16px, 3vw, 32px) var(--container-px) clamp(12px, 2.5vw, 24px);
}

.agent-hero h2 {
  font-size: clamp(18px, 5vw, 26px);
}

/* Stats row — always 3 columns, scale text */
.stats-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(6px, 2vw, 12px);
}

.stat-card {
  padding: clamp(10px, 2.5vw, 16px) clamp(6px, 1.5vw, 12px);
}

.stat-card .num {
  font-size: clamp(20px, 5vw, 28px);
}

.stat-card .lbl {
  font-size: clamp(8px, 1.5vw, 10px);
}

@media (min-width: 1024px) {
  .stats-row  { max-width: 600px; }
}

.sub-banner {
  margin:        clamp(10px, 2.5vw, 16px) var(--container-px) 0;
  border-radius: clamp(12px, 3vw, 16px);
  flex-wrap:     wrap;
  gap:           var(--sp-3);
}

@media (min-width: 480px) {
  .sub-banner { flex-wrap: nowrap; }
}

.dash-body {
  padding: clamp(12px, 3vw, 24px) var(--container-px);
}

@media (min-width: 1024px) {
  .dash-body {
    padding:   clamp(16px, 3vw, 32px) var(--container-px);
    max-width: var(--container-max);
    margin:    0 auto;
    width:     100%;
  }
}

/* Agent own listings grid */
#agent-listings-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   12px;
}

@media (min-width: 768px) {
  #agent-listings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   14px;
  }
}

@media (min-width: 1280px) {
  #agent-listings-grid {
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
  }
}

/* ================================================================
   14. SPARKLINE & REVENUE CHART
   ================================================================ */
.sparkline-wrap { margin-top: var(--sp-3); }

.sparkline-bars,
.rev-bars {
  height: clamp(24px, 5vw, 40px);
}

.rev-lbls span { font-size: var(--text-xs); }

/* ================================================================
   15. HEALTH / RISK PANELS
   ================================================================ */
.health-panel {
  border-radius: clamp(12px, 3vw, 16px);
  padding:       clamp(12px, 3vw, 16px);
}

.h-item {
  padding:   clamp(8px, 2vw, 10px) 0;
  font-size: var(--text-sm);
}

.risk-item {
  font-size: var(--text-sm);
  flex-wrap: wrap;
  gap:       6px;
}

/* ================================================================
   16. MODALS
   ================================================================ */
.modal-overlay {
  padding:      var(--sp-4);
  align-items:  flex-end;   /* bottom-sheet on mobile */
}

.modal-box {
  border-radius: 20px 20px 16px 16px;
  max-height:    92dvh;
  width:         100%;
  max-width:     min(480px, 96vw);
}

@media (min-width: 480px) {
  .modal-overlay {
    align-items: center;
    padding:     var(--sp-5);
  }

  .modal-box {
    border-radius: clamp(16px, 3vw, 20px);
  }
}

@media (min-width: 768px) {
  .modal-box { max-width: min(520px, 96vw); }
}

.plan-modal .modal-box { max-width: min(600px, 96vw); }

/* ================================================================
   17. FORMS
   ================================================================ */
.fg input,
.fg select,
.mfg input,
.mfg select,
.mfg textarea,
.hero-select {
  font-size:     16px;    /* Prevents iOS auto-zoom on focus */
  padding:       clamp(10px, 2.5vw, 13px) 14px;
  border-radius: clamp(10px, 2vw, 13px);
}

.fg label,
.mfg label {
  font-size: var(--text-xs);
}

/* Two-column form row */
.form-row-2,
.mfg-row {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   0;
}

@media (min-width: 480px) {
  .form-row-2,
  .mfg-row {
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
  }
}

/* Textarea */
.mfg textarea,
#wa-msg {
  min-height: 80px;
  resize:     vertical;
}

@media (min-width: 768px) {
  #wa-msg { min-height: 120px; }
}

/* ================================================================
   18. BUTTONS
   ================================================================ */
.pri-btn {
  padding:    clamp(12px, 3vw, 14px);
  font-size:  var(--text-base);
  min-height: 48px;
  border-radius: clamp(11px, 2.5vw, 13px);
}

.back-btn,
.nav-back-btn {
  font-size:     var(--text-xs);
  padding:       7px 13px;
  min-height:    38px;
  margin-bottom: clamp(16px, 4vw, 28px);
  touch-action:  manipulation;
}

/* ================================================================
   19. TOUCH TARGETS — minimum 44px per WCAG 2.5.5
   ================================================================ */
.tb,
.ab,
.hamburger-btn,
.nd-close,
.theme-toggle,
.tab-btn,
.how-tab,
.back-btn,
.nav-back-btn,
.pri-btn,
.search-go,
.upgrade-btn,
.add-listing-btn {
  min-height:   44px;
  touch-action: manipulation;
}

/* Tighter in dense data tables */
.ab { min-height: 32px; }

/* ================================================================
   20. HOW IT WORKS SECTION
   ================================================================ */
.how-section {
  padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 40px);
}

.how-title {
  font-size: clamp(20px, 5vw, 28px);
}

.how-step {
  padding: clamp(12px, 3vw, 18px);
}

.how-text strong { font-size: clamp(13px, 3vw, 15px); }
.how-text p      { font-size: var(--text-sm); }

@media (min-width: 1024px) {
  /* Horizontal layout on desktop */
  .how-steps {
    flex-direction: row;
    gap:            0;
    align-items:    stretch;
  }

  .how-step {
    flex:           1;
    flex-direction: column;
    text-align:     center;
    align-items:    center;
    gap:            12px;
    padding:        26px 18px;
    border-radius:  16px;
  }

  .how-connector {
    width:      24px;
    height:     2px;
    background: rgba(14,165,233,.3);
    align-self: center;
    flex-shrink:0;
    margin:     0 -2px;
    position:   relative;
    top:        -10px;
  }

  .how-text { text-align: center; }
  .how-num  { margin-bottom: 4px; }
}

/* ================================================================
   21. PLAN CARDS
   ================================================================ */
.plan-cards {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

@media (min-width: 480px) {
  .plan-cards {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
  }
}

@media (min-width: 1024px) {
  .plan-cards {
    grid-template-columns: repeat(4, 1fr);
    gap:                   16px;
  }
}

/* ================================================================
   22. ADMIN — TOPBAR
   ================================================================ */
.topbar {
  padding:    var(--sp-3) var(--container-px);
  flex-wrap:  wrap;
  gap:        var(--sp-2);
  min-height: var(--topbar-h);
}

.topbar-l h2 { font-size: clamp(16px, 4vw, 24px); }
.topbar-l p  { font-size: var(--text-xs); }

.topbar-r {
  display:                   flex;
  align-items:               center;
  gap:                       6px;
  flex-wrap:                 nowrap;
  overflow-x:                auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:           none;
  padding-bottom:            2px;
}
.topbar-r::-webkit-scrollbar { display: none; }

@media (max-width: 479px) {
  .topbar-r .tb.ghost  { display: none; }
  .topbar-r .sb-status { display: none; }
}

@media (min-width: 480px) {
  .topbar-r .tb.ghost { display: flex; }
}

@media (min-width: 768px) {
  .topbar-r .sb-status { display: flex; }
  .topbar   {
    flex-wrap:  nowrap;
    padding:    var(--sp-3) var(--sp-6);
  }
  .topbar-r { overflow-x: visible; }
}

/* ================================================================
   23. ADMIN — STAT GRID
   ================================================================ */
.stat-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-bottom:         14px;
}

@media (min-width: 768px) {
  .stat-grid {
    grid-template-columns: repeat(4, 1fr);
    gap:                   12px;
  }
}

.sc .sc-val { font-size: clamp(22px, 5vw, 30px); }
.sc .sc-lbl { font-size: var(--text-xs); }

/* ================================================================
   24. ADMIN — DASHBOARD GRID
   ================================================================ */
.dash-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   12px;
  margin-bottom:         12px;
}

@media (min-width: 768px) {
  .dash-grid          { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dash-grid.wide     { grid-template-columns: 2fr 1fr; }
}

/* ================================================================
   25. ADMIN — TABLES (horizontal scroll on mobile)
   ================================================================ */
.tbl-wrap {
  overflow-x:                auto;
  -webkit-overflow-scrolling:touch;
  border-radius:             var(--r);
}

table    { min-width: 600px; border-collapse: collapse; width: 100%; }
thead th {
  font-size:   var(--text-xs);
  padding:     10px 10px;
  white-space: nowrap;
}
tbody td {
  font-size: var(--text-sm);
  padding:   9px 10px;
}

@media (min-width: 768px) {
  table    { min-width: unset; }
  thead th { padding: 10px 12px; font-size: 10px; }
  tbody td { padding: 10px 12px; font-size: 12px; }
}

/* ================================================================
   26. ADMIN — SEARCH BAR
   ================================================================ */
.search-bar {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  margin-bottom:  14px;
}

@media (min-width: 480px) {
  .search-bar {
    flex-direction: row;
    flex-wrap:      wrap;
    align-items:    center;
  }

  .si-wrap {
    flex:      1;
    min-width: 180px;
    max-width: 280px;
  }
}

@media (min-width: 768px) {
  .search-bar { flex-wrap: nowrap; }
  .si-wrap    { max-width: 300px; }
}

.f-sel          { width: 100%; }
@media (min-width: 480px) {
  .f-sel        { width: auto; }
}

/* ================================================================
   27. ADMIN — NAV DRAWER
   ================================================================ */
.nav-drawer { width: var(--nav-w); }

.ni {
  padding:    clamp(9px, 2.5vw, 11px) 12px;
  min-height: 44px;
}

/* ================================================================
   28. ADMIN — MODALS
   ================================================================ */
.mh h3 { font-size: clamp(16px, 4vw, 20px); }
.mb    { padding: clamp(14px, 4vw, 20px); }

/* ================================================================
   29. ADMIN — CONTENT AREA
   ================================================================ */
.content {
  padding: clamp(14px, 3vw, 22px) clamp(14px, 4vw, 22px);
}

@media (min-width: 1280px) {
  .content {
    max-width: var(--content-max);
    margin:    0 auto;
  }
}

/* ================================================================
   30. WA CENTRE SCREEN
   ================================================================ */
#tab-wa-centre .dash-grid { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  #tab-wa-centre .dash-grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================================
   31. ALERT ITEMS
   ================================================================ */
.alert-item {
  flex-wrap: wrap;
  gap:       10px;
}

.alert-icon       { font-size: clamp(16px, 4vw, 20px); flex-shrink: 0; }
.alert-body h4    { font-size: var(--text-sm); }
.alert-body p     { font-size: var(--text-xs); }
.alert-actions    { flex-shrink: 0; flex-wrap: wrap; gap: 4px; }

@media (min-width: 480px) {
  .alert-item { flex-wrap: nowrap; }
}

/* ================================================================
   32. PLAN COMPARISON TABLE
   ================================================================ */
.plan-compare-table {
  overflow-x:                auto;
  -webkit-overflow-scrolling:touch;
}

.pct-head,
.pct-row    { min-width: 320px; }

.pct-head > div,
.pct-row > div {
  font-size: var(--text-xs);
  padding:   7px 5px;
}

@media (min-width: 480px) {
  .pct-head > div,
  .pct-row > div {
    font-size: 10px;
    padding:   7px 6px;
  }
}

/* ================================================================
   33. EXPIRY BARS
   ================================================================ */
.exp-name {
  width:     clamp(90px, 22vw, 140px);
  font-size: var(--text-sm);
}

.exp-days {
  font-size: var(--text-xs);
  width:     40px;
}

/* ================================================================
   34. SCREEN NAV (inner nav bar)
   ================================================================ */
.screen-nav {
  padding: var(--sp-3) var(--container-px);
}

.screen-nav-title {
  font-size: clamp(13px, 3.5vw, 16px);
}

/* ================================================================
   35. TOAST
   ================================================================ */
.toast {
  max-width: min(320px, calc(100vw - 32px));
  bottom:    16px;
  font-size: var(--text-sm);
  padding:   10px 18px;
}

#toast.toast {
  right:  var(--container-px);
  bottom: var(--sp-6);
}

/* ================================================================
   36. STATUS / EMPTY SCREENS
   ================================================================ */
.status-screen {
  padding:    clamp(28px, 8vw, 48px) var(--container-px);
  min-height: 50vh;
}

.status-screen .si { font-size: clamp(44px, 12vw, 56px); }
.status-screen h3  { font-size: clamp(18px, 5vw, 24px); }
.status-screen p   {
  font-size: var(--text-sm);
  max-width: min(320px, 90vw);
}

.empty-state {
  padding: clamp(28px, 8vw, 48px) var(--container-px);
}

.empty-state-icon {
  width:  clamp(48px, 14vw, 64px);
  height: clamp(48px, 14vw, 64px);
}

.empty-state h4 { font-size: clamp(16px, 4vw, 18px); }
.empty-state p  { font-size: var(--text-sm); }

/* ================================================================
   37. ADMIN LOGIN BOX
   ================================================================ */
.login-box {
  padding:       clamp(24px, 6vw, 36px);
  max-width:     min(360px, calc(100vw - 32px));
  border-radius: clamp(16px, 4vw, 20px);
}

.login-logo     { font-size: clamp(22px, 6vw, 28px); }
.login-logo img { height: clamp(60px, 15vw, 100px) !important; }

/* ================================================================
   38. PANELS
   ================================================================ */
.panel { border-radius: clamp(12px, 3vw, 14px); }

.ph {
  padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 18px);
}
.ph h3  { font-size: clamp(15px, 3.5vw, 18px); }
.ph p   { font-size: var(--text-xs); }
.pb     { padding: clamp(12px, 3vw, 16px) clamp(14px, 4vw, 18px); }

/* ================================================================
   39. BADGE / TAG
   ================================================================ */
.badge {
  padding:   4px 10px;
  font-size: var(--text-xs);
}

/* ================================================================
   40. FORM GROUP (admin modal)
   ================================================================ */
.mfg { margin-bottom: clamp(10px, 3vw, 14px); }

/* ================================================================
   41. AGENT LISTINGS LIST (tab)
   ================================================================ */
.listings-list {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   12px;
}

@media (min-width: 768px) {
  .listings-list {
    grid-template-columns: 1fr 1fr;
    gap:                   14px;
  }
}

@media (min-width: 1024px) {
  .listings-list {
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
  }
}

/* ================================================================
   42. CARD META ROW
   ================================================================ */
.card-meta-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       5px;
  margin-bottom: 8px;
}

.meta-badge { font-size: var(--text-xs); }

/* ================================================================
   43. WA PREVIEW
   ================================================================ */
.wa-preview { padding: clamp(10px, 3vw, 14px); }

.wa-bubble {
  font-size:     var(--text-sm);
  padding:       9px 12px;
  border-radius: 10px 10px 10px 0;
}

/* ================================================================
   44. OFFLINE BAR
   ================================================================ */
#offline-bar {
  font-size: var(--text-xs);
  padding:   9px var(--container-px);
}

/* ================================================================
   45. HAMBURGER — always visible
   ================================================================ */
.hamburger-btn {
  display:    flex !important;
  flex-shrink:0;
}

/* ================================================================
   46. LARGE DESKTOP CENTERING — 1440px+
   ================================================================ */
@media (min-width: 1440px) {
  .search-hero > * {
    max-width:    var(--container-max);
    margin-left:  auto;
    margin-right: auto;
  }

  .agent-hero > * {
    max-width:    var(--container-max);
    margin-left:  auto;
    margin-right: auto;
  }

  .topbar {
    max-width:     var(--content-max);
    margin-left:   auto;
    margin-right:  auto;
  }
}

/* ================================================================
   47. SAFE AREA — notch / home-bar / landscape insets
   ================================================================ */
@supports (padding: max(0px)) {
  .topbar,
  .land-topbar,
  .app-header,
  .screen-nav {
    padding-left:  max(var(--container-px), env(safe-area-inset-left));
    padding-right: max(var(--container-px), env(safe-area-inset-right));
  }

  .content,
  .listings-section,
  .dash-body {
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  }

  .toast {
    bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px));
  }

  #landing {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

/* ================================================================
   48. REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
  }
}

/* ================================================================
   49. FOCUS VISIBILITY — keyboard & screen-reader accessibility
   ================================================================ */
:focus-visible {
  outline:        3px solid var(--sky);
  outline-offset: 3px;
  box-shadow:     var(--focus-ring);
}

/* Remove outline for mouse users who don't need it */
:focus:not(:focus-visible) {
  outline: none;
}

/* ================================================================
   50. PRINT
   ================================================================ */
@media print {
  .nav-drawer,
  .nav-overlay,
  .topbar-r,
  .hamburger-btn,
  .toast,
  .modal-overlay { display: none !important; }

  body {
    font-size: 11pt;
    color:     #000;
    background:#fff;
  }
}