/* ============================================================
   TISAKENYUMBA — MAIN APP CSS v44
   Single consolidated stylesheet. Replaces:
   tokens.css · base.css · components.css · screens.css
   cards-v2.css · improvements.css · responsive.css
   ──────────────────────────────────────────────────────────
   Architecture: Design Tokens → Reset → Animations →
   Layout → Components → Screens → Modals → Responsive
============================================================ */

/* ══════════════════════════════════════════════════════════
   § 1  DESIGN TOKENS
══════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --sky:        #0EA5E9;
  --sky-d:      #0284C7;
  --sky-l:      #38BDF8;
  --sky-pale:   #E0F2FE;
  --sky-deep:   #0C4A6E;
  --night:      #080E1C;
  --navy:       #0D1F3C;
  --slate:      #1A3560;

  /* Surfaces (light) */
  --bg:         #F0F9FF;
  --surface:    #FFFFFF;
  --surface2:   #E0F2FE;
  --border:     #BAE6FD;
  --border2:    #7DD3FC;

  /* Text */
  --text:       #0C1929;
  --subtext:    #4A7FA5;
  --mid:        #1D4ED8;

  /* Semantic */
  --moss:       #059669;
  --gold:       #D97706;
  --danger:     #DC2626;
  --wa:         #25D366;

  /* Typography */
  --serif:      'Clash Display', 'Plus Jakarta Sans', sans-serif;
  --sans:       'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:       'JetBrains Mono', monospace;

  /* Elevation */
  --sh:         0 1px 4px rgba(14,165,233,.08), 0 4px 16px rgba(14,165,233,.10);
  --sh2:        0 4px 20px rgba(14,165,233,.15), 0 12px 40px rgba(14,165,233,.12);
  --sh3:        0 8px 40px rgba(14,165,233,.18), 0 24px 64px rgba(14,165,233,.14);

  /* Shape */
  --r:          14px;
  --r-sm:       10px;
  --r-lg:       20px;
  --r-xl:       28px;
  --r-full:     9999px;

  /* Motion */
  --ease:       cubic-bezier(.4,0,.2,1);
  --spring:     cubic-bezier(.34,1.56,.64,1);
  --fast:       120ms;
  --mid-dur:    220ms;
  --slow:       360ms;

  /* Z-scale */
  --z-base:    1;
  --z-sticky:  10;
  --z-modal:   30;
  --z-toast:   40;
  --z-offline: 9999;

  /* Fluid type */
  --text-xs:   clamp(10px,1.8vw,11px);
  --text-sm:   clamp(11px,2.0vw,13px);
  --text-base: clamp(13px,2.2vw,14px);
  --text-md:   clamp(15px,2.6vw,17px);
  --text-lg:   clamp(18px,3.2vw,22px);
  --text-xl:   clamp(24px,5.0vw,32px);
  --text-2xl:  clamp(32px,7.0vw,48px);
  --text-hero: clamp(44px,11vw,72px);

  /* Spacing (8pt grid) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;

  /* Component tokens */
  --topbar-h:   56px;
  --card-img-h: clamp(180px, 28vw, 260px);
  --focus-ring: 0 0 0 3px rgba(14,165,233,.3);
}

/* Dark mode */
[data-theme="dark"] {
  --bg:       #0B1E38;
  --surface:  #0F2745;
  --surface2: #172F52;
  --border:   #1E4A6F;
  --border2:  #2563A8;
  --text:     #E8F4FD;
  --subtext:  #7DD3FC;
  --mid:      #38BDF8;
  --sky-pale: #172F52;
  --sh:       0 2px 12px rgba(0,0,0,.4), 0 6px 24px rgba(0,0,0,.3);
  --sh2:      0 6px 32px rgba(0,0,0,.55), 0 16px 56px rgba(0,0,0,.4);
  --sh3:      0 12px 56px rgba(0,0,0,.65), 0 28px 80px rgba(0,0,0,.5);
}

/* ══════════════════════════════════════════════════════════
   § 2  RESET & BASE
══════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body{
  font-family:var(--sans);background:var(--bg);color:var(--text);
  min-height:100vh;font-size:14px;
  transition:background var(--slow) var(--ease),color var(--slow) var(--ease);
  line-height:1.5;
}
button,a,[onclick]{touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
button,
.role-card,.listing-card,.plan-card,.prem-card,.tab-btn{
  -webkit-user-select:none;user-select:none;
}
button{font-family:inherit;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--text)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:4px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ══════════════════════════════════════════════════════════
   § 3  ANIMATIONS
══════════════════════════════════════════════════════════ */
@keyframes fadeUp  {from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn  {from{opacity:0}to{opacity:1}}
@keyframes float   {0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shimmer {0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes spin    {to{transform:rotate(360deg)}}
@keyframes pillIn  {from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes slideUp {from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes modalIn {from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse   {0%,100%{opacity:1}50%{opacity:.4}}

.fade-up{animation:fadeUp .35s var(--ease) both}

/* ══════════════════════════════════════════════════════════
   § 4  GLOBAL LAYOUT
══════════════════════════════════════════════════════════ */
.screen{display:none;min-height:100vh;flex-direction:column}
.screen.active{display:flex}

/* ══════════════════════════════════════════════════════════
   § 5  GLOBAL COMPONENTS
══════════════════════════════════════════════════════════ */

/* ── Offline bar ─────────────────────────────────────────── */
#offline-bar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:var(--z-offline);
  background:var(--night);color:var(--sky-l);
  font-size:12px;font-weight:600;padding:10px 16px;
  text-align:center;border-bottom:2px solid var(--sky);
  align-items:center;justify-content:center;gap:6px;
}
#offline-bar.show{display:flex}

/* ── Toast ───────────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--navy);color:#E0F2FE;
  padding:11px 22px;border-radius:var(--r-full);
  font-size:12px;font-weight:600;z-index:var(--z-toast);
  transition:transform .3s var(--spring);
  white-space:nowrap;max-width:calc(100vw - 32px);
  box-shadow:0 8px 32px rgba(0,0,0,.3);
  pointer-events:none;
}
.toast.show   {transform:translateX(-50%) translateY(0)}
.toast.success{background:var(--moss)}
.toast.error  {background:var(--danger)}

/* ── Spinner / Loading ───────────────────────────────────── */
.spinner{
  width:28px;height:28px;border:2.5px solid var(--border);
  border-top-color:var(--sky);border-radius:50%;
  animation:spin .75s linear infinite;margin:0 auto;
}
.loading-wrap{
  display:flex;flex-direction:column;align-items:center;
  gap:12px;padding:44px 20px;color:var(--subtext);font-size:13px;
}

/* ── Primary button ──────────────────────────────────────── */
.pri-btn{
  width:100%;padding:14px;
  background:linear-gradient(135deg,var(--sky),var(--sky-d));
  color:#fff;border-radius:var(--r);font-size:14px;font-weight:700;
  letter-spacing:.3px;display:flex;align-items:center;
  justify-content:center;gap:8px;
  transition:transform var(--fast),box-shadow var(--fast);
  box-shadow:0 4px 16px rgba(14,165,233,.35);
  border:none;cursor:pointer;
}
.pri-btn:hover  {transform:translateY(-1px);box-shadow:0 8px 28px rgba(14,165,233,.45)}
.pri-btn:active {transform:scale(.99)}
.pri-btn:disabled{background:var(--subtext);cursor:not-allowed;transform:none;box-shadow:none}

/* ── Secondary / Ghost button ────────────────────────────── */
.sec-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--subtext);
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-full);padding:7px 16px;font-weight:500;
  transition:all var(--fast);cursor:pointer;
}
.sec-btn:hover{color:var(--sky);border-color:var(--sky)}

/* ── Form group ──────────────────────────────────────────── */
.fg{margin-bottom:16px}
.fg label{
  display:block;font-size:11px;font-weight:700;
  color:var(--text);margin-bottom:5px;letter-spacing:.2px;
  text-transform:uppercase;
}
.fg input,.fg select,.fg textarea,.hero-select{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-size:16px;background:var(--surface);color:var(--text);
  outline:none;transition:border-color var(--mid-dur),box-shadow var(--mid-dur);
  -webkit-appearance:none;line-height:1.5;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{
  border-color:var(--sky);box-shadow:var(--focus-ring);
}
.fg input::placeholder,.fg textarea::placeholder{color:var(--subtext)}
.fg small{display:block;font-size:11px;color:var(--subtext);margin-top:4px;line-height:1.5}
.req-star{color:var(--danger);margin-left:2px}

/* ── Tab row ─────────────────────────────────────────────── */
.tab-row{
  display:flex;background:var(--sky-pale);
  border-radius:var(--r-sm);padding:4px;gap:4px;margin-bottom:24px;
}
.tab-btn{
  flex:1;padding:10px;border-radius:7px;
  font-size:13px;font-weight:600;color:var(--subtext);transition:all var(--mid-dur);
}
.tab-btn.active{
  background:var(--surface);color:var(--text);
  box-shadow:0 2px 8px rgba(14,165,233,.15);
}

/* ── Screen nav bar (back button bar) ────────────────────── */
.screen-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:rgba(10,22,40,.85);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:var(--z-sticky);
}
.nav-back-btn{
  display:inline-flex;align-items:center;gap:6px;
  color:#7DD3FC;font-size:13px;font-weight:600;
  padding:6px 10px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  transition:all var(--fast);
}
.nav-back-btn:hover{background:rgba(255,255,255,.12);color:#BAE6FD}
.screen-nav-title{
  font-size:14px;font-weight:700;color:#E0F2FE;letter-spacing:.02em;
}

/* ── App header (search & agent screens) ─────────────────── */
.app-header{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:10px 16px;display:flex;align-items:center;
  justify-content:space-between;position:sticky;top:0;
  z-index:var(--z-sticky);box-shadow:var(--sh);width:100%;
}
.app-logo img{height:36px;width:auto}
.hdr-right{display:flex;align-items:center;gap:8px}
.theme-toggle{
  width:34px;height:34px;border-radius:var(--r-sm);
  background:var(--sky-pale);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  transition:all var(--fast);cursor:pointer;color:var(--subtext);
}
.theme-toggle:hover{border-color:var(--sky);color:var(--sky)}
.user-pill{
  display:flex;align-items:center;gap:7px;
  background:var(--sky-pale);border:1px solid var(--border);
  padding:5px 12px 5px 6px;border-radius:var(--r-full);
  font-size:12px;font-weight:600;cursor:pointer;transition:all var(--fast);
}
.user-pill:hover{border-color:var(--sky)}
.avatar{
  width:26px;height:26px;
  background:linear-gradient(135deg,var(--sky-l),var(--sky-d));
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;
}
.avatar.green{background:linear-gradient(135deg,#10B981,#059669)}

/* ── Badge / Tags ────────────────────────────────────────── */
.tag{font-size:10px;font-weight:600;padding:3px 9px;border-radius:8px;
     background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.tag.green{color:var(--moss);border-color:var(--moss)}
.tag.sky{color:var(--sky);border-color:var(--border2)}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.count-badge{
  background:var(--sky-pale);border:1px solid var(--border2);
  color:var(--sky-d);font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:var(--r-full);font-family:var(--mono);
}

/* ── Notice / info boxes ─────────────────────────────────── */
.free-notice{
  background:linear-gradient(135deg,#ECFDF5,#D1FAE5);
  border:1px solid #6EE7B7;border-radius:var(--r-sm);
  padding:12px 16px;margin-bottom:20px;
  font-size:12px;color:#065F46;
  display:flex;align-items:center;gap:10px;line-height:1.5;
}
.monthly-notice{
  background:linear-gradient(135deg,var(--sky-pale),#BAE6FD);
  border:1px solid var(--border2);border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:20px;
  font-size:12px;color:var(--sky-deep);
}
.monthly-notice h5{font-weight:700;margin-bottom:10px;font-size:13px}
.notice-box{
  background:var(--sky-pale);border:1px solid var(--border2);
  border-radius:var(--r-sm);padding:12px 14px;margin-bottom:14px;
  font-size:12px;color:var(--mid);line-height:1.6;
}
.notice-box h5{font-weight:700;margin-bottom:5px;font-size:12px}
.notice-box ul{padding-left:14px}
.notice-box li{margin-bottom:2px}
.wa-notice-box{border-color:rgba(37,211,102,.3);background:rgba(37,211,102,.07);color:#065F46}
[data-theme="dark"] .wa-notice-box{color:#6EE7B7}
.listing-req-notice{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:var(--gold)}

/* ── Auth heading ────────────────────────────────────────── */
.auth-title{font-family:var(--serif);font-size:var(--text-xl);font-weight:700;
            margin-bottom:6px;letter-spacing:-.02em}
.auth-sub{font-size:13px;color:var(--subtext);margin-bottom:10px;line-height:1.65}

/* ── Terms / links ───────────────────────────────────────── */
.terms-text{
  font-size:11px;color:var(--subtext);text-align:center;
  margin-top:14px;line-height:1.6;
}
.terms-text a{color:var(--sky);cursor:pointer;text-decoration:underline}

/* ── WhatsApp CTA button ─────────────────────────────────── */
.wa-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;background:var(--wa);color:#fff;
  border:none;border-radius:var(--r);padding:14px;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:all var(--fast);
  box-shadow:0 4px 16px rgba(37,211,102,.3);
}
.wa-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(37,211,102,.4)}
.wa-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

/* ══════════════════════════════════════════════════════════
   § 6  LANDING SCREEN
══════════════════════════════════════════════════════════ */
#landing{
  background:linear-gradient(160deg,var(--night) 0%,var(--navy) 45%,#0D3460 100%);
  color:#E0F2FE;align-items:center;justify-content:center;
  padding:48px 24px;position:relative;overflow:hidden;min-height:100vh;
}
#landing::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 5%,rgba(14,165,233,.4) 0%,transparent 65%),
    radial-gradient(ellipse 50% 40% at 5% 95%,rgba(56,189,248,.2) 0%,transparent 55%);
  pointer-events:none;
}
#landing::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle,rgba(14,165,233,.07) 1px,transparent 1px);
  background-size:32px 32px;pointer-events:none;
}
.land-topbar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  padding:20px 24px;z-index:2;
}
.land-topbar-logo img{height:80px;width:auto;animation:float 3.5s ease-in-out infinite}
.land-inner{position:relative;z-index:1;text-align:center;max-width:440px;width:100%}
.land-hero-block{margin-top:72px}

/* Badge */
.land-free-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(14,165,233,.18);border:1px solid rgba(14,165,233,.35);
  color:var(--sky-l);padding:6px 16px;border-radius:var(--r-full);
  font-size:11px;font-weight:700;margin-bottom:32px;letter-spacing:.5px;
  backdrop-filter:blur(8px);
}

/* Hero title */
.land-title{
  font-family:var(--serif);font-size:var(--text-hero);font-weight:700;
  line-height:.9;letter-spacing:-2px;margin-bottom:14px;
}
.land-title span{
  background:linear-gradient(135deg,var(--sky-l),var(--sky));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.land-sub{font-size:14px;color:#7DD3FC;margin-bottom:20px;font-weight:400;line-height:1.6}

/* Role cards */
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}
.role-card{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-lg);padding:28px 18px 22px;cursor:pointer;
  transition:all .25s var(--ease);backdrop-filter:blur(14px);text-align:left;
}
.role-card:hover{
  background:rgba(14,165,233,.18);border-color:rgba(14,165,233,.5);
  transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.4);
}
.role-card:active{transform:translateY(-1px)}
.rc-icon{margin-bottom:14px;color:var(--sky-l)}
.role-card h3{font-size:17px;font-weight:700;margin-bottom:5px;color:#E0F2FE;letter-spacing:-.01em}
.role-card p{font-size:11px;color:#7DD3FC;line-height:1.55}
.free-tag{
  margin-top:14px;display:inline-block;
  background:var(--sky);color:#fff;
  font-size:10px;font-weight:700;padding:4px 12px;
  border-radius:var(--r-full);letter-spacing:.3px;
}
.monthly-tag{
  margin-top:14px;display:inline-block;
  background:linear-gradient(135deg,var(--sky),var(--sky-d));
  color:#fff;font-size:10px;font-weight:700;
  padding:4px 12px;border-radius:var(--r-full);letter-spacing:.3px;
}

/* How It Works */
.how-section{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-lg);padding:20px;margin-bottom:24px;text-align:left;
  backdrop-filter:blur(8px);
}
.how-title{
  font-family:var(--serif);font-size:18px;font-weight:700;
  color:#E0F2FE;margin-bottom:14px;text-align:center;
}
.how-tabs{
  display:flex;gap:6px;background:rgba(255,255,255,.07);
  border-radius:var(--r-sm);padding:4px;margin-bottom:18px;
}
.how-tab{
  flex:1;padding:8px;border-radius:7px;font-size:12px;font-weight:600;
  color:#7DD3FC;transition:all var(--mid-dur);
}
.how-tab.active{background:rgba(14,165,233,.3);color:#E0F2FE}
.how-steps{display:flex;flex-direction:column;gap:0}
.how-step{display:flex;align-items:flex-start;gap:12px;padding:8px 0}
.how-num{
  width:28px;height:28px;background:linear-gradient(135deg,var(--sky),var(--sky-d));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;flex-shrink:0;
}
.how-text strong{font-size:13px;font-weight:700;color:#E0F2FE;display:block;margin-bottom:2px}
.how-text p{font-size:11px;color:#7DD3FC;line-height:1.5}
.how-connector{width:2px;height:16px;background:rgba(14,165,233,.25);margin-left:13px}

/* Areas strip */
.land-areas{
  font-size:11px;color:#1E4A6F;letter-spacing:.2px;
  margin-top:4px;line-height:1.8;
}

/* ══════════════════════════════════════════════════════════
   § 7  AUTH SCREENS
══════════════════════════════════════════════════════════ */
#tenant-auth,#agent-auth{
  background:linear-gradient(160deg,#080E1C 0%,#0D2548 50%,#0F2340 100%);
  align-items:center;justify-content:center;padding:24px 20px;min-height:100vh;
}
/* Text overrides on dark auth bg */
#tenant-auth .auth-title,#tenant-auth .auth-sub,
#agent-auth  .auth-title,#agent-auth  .auth-sub  {color:#E0F2FE}
#tenant-auth label,#agent-auth label             {color:#BAE6FD}
#tenant-auth .fg input,#tenant-auth .fg select,
#agent-auth  .fg input,#agent-auth  .fg select{
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.15);color:#E0F2FE;
}
#tenant-auth .fg textarea,#agent-auth .fg textarea{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:#E0F2FE;
}
#tenant-auth .fg input::placeholder,
#agent-auth  .fg input::placeholder{color:rgba(255,255,255,.35)}
#tenant-auth .fg small,#agent-auth .fg small{color:#7DD3FC}
#tenant-auth .tab-row,#agent-auth .tab-row{background:rgba(255,255,255,.07)}
#tenant-auth .tab-btn,#agent-auth .tab-btn{color:#7DD3FC}
#tenant-auth .tab-btn.active,#agent-auth .tab-btn.active{
  background:rgba(255,255,255,.12);color:#E0F2FE;
}
#tenant-auth .free-notice,#agent-auth .free-notice{
  background:rgba(5,150,105,.15);border-color:rgba(52,211,153,.3);color:#6EE7B7;
}
#tenant-auth .monthly-notice,#agent-auth .monthly-notice{
  background:rgba(14,165,233,.1);border-color:rgba(14,165,233,.22);color:#7DD3FC;
}
#tenant-auth .monthly-notice h5,#agent-auth .monthly-notice h5{color:#BAE6FD}
#tenant-auth .terms-text,#agent-auth .terms-text{color:#7DD3FC}

/* Plan compare table */
.plan-compare-table{border-radius:var(--r-sm);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.pct-head{
  display:grid;grid-template-columns:1fr repeat(3,80px);
  background:rgba(14,165,233,.2);padding:8px 12px;
  font-size:11px;font-weight:700;color:#BAE6FD;gap:4px;
  align-items:center;
}
.pct-head small{display:block;font-size:10px;font-weight:400;opacity:.75;margin-top:2px}
.pct-row{
  display:grid;grid-template-columns:1fr repeat(3,80px);
  padding:9px 12px;gap:4px;align-items:center;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:11px;color:#7DD3FC;
}
.pct-row:nth-child(odd){background:rgba(255,255,255,.03)}
.pct-feat{font-size:11px;color:#BAE6FD;font-weight:500}
.pct-col{text-align:center;display:flex;align-items:center;justify-content:center}
.pct-pop{background:rgba(14,165,233,.18);border-radius:4px}
.ti{width:16px;height:16px}
.ti.yes{color:#34D399}.ti.no{color:rgba(255,255,255,.25)}

/* NRC label + tooltip */
.nrc-label{position:relative;display:inline-flex;align-items:center;gap:5px}
.nrc-tooltip-wrap{position:relative;display:inline-flex}
.nrc-lock-icon{color:#7DD3FC;cursor:help}
.nrc-tooltip{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
  background:var(--navy);color:#BAE6FD;
  font-size:11px;font-weight:400;line-height:1.5;
  padding:8px 12px;border-radius:var(--r-sm);width:200px;text-align:center;
  border:1px solid rgba(14,165,233,.3);
  box-shadow:0 4px 16px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity var(--fast);
  z-index:10;white-space:normal;
}
.nrc-tooltip-wrap:hover .nrc-tooltip{opacity:1}

/* ══════════════════════════════════════════════════════════
   § 8  TENANT SEARCH SCREEN
══════════════════════════════════════════════════════════ */
#tenant-search{background:var(--bg)}

/* Search hero */
.search-hero{
  background:linear-gradient(160deg,var(--night) 0%,var(--navy) 100%);
  padding:20px 16px 18px;color:#E0F2FE;
}
.hero-top{margin-bottom:16px}
.hero-top h2{
  font-family:var(--serif);font-size:28px;font-weight:700;
  line-height:1.05;margin-bottom:4px;letter-spacing:-.02em;
}
.hero-top p{font-size:12px;color:#7DD3FC}

.filter-section-label-row{margin-bottom:5px}
.fsl{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:#7DD3FC;letter-spacing:.05em;text-transform:uppercase;
}
.hero-select{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.15);
  color:#E0F2FE;border-radius:var(--r-sm);
}
.hero-select option{background:var(--navy);color:#E0F2FE}
.hero-select-hint{font-size:10px;color:rgba(125,211,252,.55);margin-top:3px;font-family:var(--mono)}

/* Search actions row */
.search-actions{
  display:flex;gap:8px;margin-top:14px;
}
.search-go{
  flex:1;padding:12px;
  background:linear-gradient(135deg,var(--sky),var(--sky-d));
  color:#fff;border-radius:var(--r-sm);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all var(--fast);box-shadow:0 4px 16px rgba(14,165,233,.35);
}
.search-go:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(14,165,233,.45)}
.map-btn{
  width:44px;height:44px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.15);border-radius:var(--r-sm);
  color:#BAE6FD;display:flex;align-items:center;justify-content:center;
  transition:all var(--fast);flex-shrink:0;
}
.map-btn:hover{background:rgba(14,165,233,.25);border-color:rgba(14,165,233,.4)}
.prem-map-btn{border-color:rgba(251,191,36,.3);color:var(--gold)}
.prem-map-btn:hover{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.5)}

/* Pills bar */
.pills-bar{
  display:flex;gap:7px;padding:10px 14px;
  overflow-x:auto;scrollbar-width:none;background:var(--surface);
  border-bottom:1px solid var(--border);
}
.pills-bar::-webkit-scrollbar{display:none}
.pill{
  flex-shrink:0;display:inline-flex;align-items:center;gap:5px;
  padding:5px 13px;border:1px solid var(--border2);border-radius:var(--r-full);
  font-size:11px;font-weight:600;color:var(--sky-d);background:var(--sky-pale);
  cursor:pointer;transition:all var(--fast);animation:pillIn .2s var(--spring) both;
  white-space:nowrap;
}
.pill:hover{border-color:var(--sky);background:#BAE6FD}
.pill .pill-x{
  width:14px;height:14px;background:var(--sky-d);color:#fff;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;
}

/* Listings section */
.listings-section{padding:14px 12px}
.section-hdr{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.section-hdr h3{
  font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:-.01em;
}

/* ══════════════════════════════════════════════════════════
   § 9  LISTING CARDS
══════════════════════════════════════════════════════════ */
.listing-card{
  background:var(--surface);border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:var(--sh);margin-bottom:14px;overflow:hidden;
  transition:transform var(--fast),box-shadow var(--fast),border-color var(--fast);
  cursor:pointer;
}
.listing-card:hover{
  transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--border2);
}
.listing-card:active{transform:scale(.99)}

/* Card image */
.card-img{
  position:relative;height:var(--card-img-h);background:var(--surface2);
  overflow:hidden;
}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.listing-card:hover .card-img img{transform:scale(1.03)}

/* Slideshow */
.img-slides{position:absolute;inset:0;width:100%;height:100%}
.img-slides img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;
  transition:opacity .55s var(--ease),transform .55s var(--ease);
  transform:scale(1.04);will-change:opacity,transform;
}
.img-slides img.active{opacity:1;transform:scale(1);z-index:1}
.slide-arrow{
  position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  background:rgba(0,0,0,.45);color:#fff;border:none;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);transition:background var(--fast),opacity var(--fast);
  opacity:0;
}
.card-img:hover .slide-arrow,.card-img:focus-within .slide-arrow{opacity:1}
.slide-arrow.prev{left:7px}
.slide-arrow.next{right:7px}
.slide-arrow:disabled{opacity:.2!important;pointer-events:none}
.slide-dots{
  position:absolute;bottom:8px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;z-index:3;
}
.slide-dot{
  width:6px;height:6px;border-radius:3px;
  background:rgba(255,255,255,.5);transition:all .25s;cursor:pointer;
}
.slide-dot.active{width:18px;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}

/* Watermark on blur */
.wm{position:absolute;inset:0;z-index:2}
.wm-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
  backdrop-filter:blur(18px);background:rgba(10,22,40,.55);
  color:#E0F2FE;text-align:center;
}
.wm-overlay p{font-size:12px;font-weight:700;margin-bottom:6px}

/* Price & area overlay tags */
.price-tag{
  position:absolute;bottom:10px;left:10px;z-index:4;
  background:rgba(10,22,40,.85);color:#E0F2FE;
  padding:5px 12px;border-radius:var(--r-full);
  font-size:13px;font-weight:700;backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12);letter-spacing:.01em;
  font-family:var(--serif);
}
.area-tag{
  position:absolute;top:10px;left:10px;z-index:4;
  background:rgba(14,165,233,.9);color:#fff;
  padding:4px 11px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;backdrop-filter:blur(4px);
  letter-spacing:.04em;text-transform:uppercase;
}
.featured-tag{
  position:absolute;top:10px;right:10px;z-index:4;
  background:linear-gradient(135deg,#F59E0B,#D97706);color:#fff;
  padding:4px 11px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;letter-spacing:.04em;
}
.fav-btn{
  position:absolute;bottom:10px;right:10px;z-index:4;
  width:34px;height:34px;background:rgba(10,22,40,.8);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:none;cursor:pointer;color:#fff;
  backdrop-filter:blur(6px);transition:all var(--fast);
}
.fav-btn:hover{background:rgba(14,165,233,.9)}
.fav-btn.saved{background:var(--danger)}

/* Card body */
.card-body{padding:12px 14px 10px}
.card-title{
  font-family:var(--serif);font-size:16px;font-weight:700;
  color:var(--text);margin-bottom:5px;letter-spacing:-.01em;line-height:1.25;
}
.card-desc{font-size:12px;color:var(--subtext);line-height:1.55;margin-bottom:8px}

/* Feature badges */
.feat-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.feat-badge{
  font-size:10px;font-weight:600;padding:3px 9px;
  border-radius:var(--r-full);background:var(--sky-pale);
  color:var(--sky-d);border:1px solid var(--border2);
}

/* Card footer */
.card-footer{border-top:1px solid var(--border);padding:10px 14px}
.card-footer-top{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px;
}
.agent-info{display:flex;align-items:center;gap:7px}
.agent-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky),var(--sky-d));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:11px;font-weight:700;flex-shrink:0;
}
.agent-name{font-size:11px;font-weight:600;color:var(--text)}
.agent-plan{font-size:10px;color:var(--subtext)}

/* ══════════════════════════════════════════════════════════
   § 10 AGENT DASHBOARD
══════════════════════════════════════════════════════════ */
#agent-dashboard{background:var(--bg)}
.agent-hero{
  background:linear-gradient(160deg,var(--night) 0%,var(--navy) 100%);
  padding:20px 16px 24px;color:#E0F2FE;
}
.agent-hero h2{
  font-family:var(--serif);font-size:24px;font-weight:700;
  margin-bottom:6px;letter-spacing:-.02em;
}
#agent-plan-label{font-size:12px;color:#7DD3FC;margin-bottom:18px}

/* Stats row */
.stats-row{display:flex;gap:10px;margin-bottom:18px}
.stat-card{
  flex:1;
  /* Uses semi-transparent white that reads well on the dark agent-hero gradient */
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-sm);padding:12px 14px;text-align:center;
  transition:border-color var(--fast);
}
.stat-card:hover{border-color:rgba(14,165,233,.5)}
.stat-card .num{
  font-family:var(--serif);font-size:28px;font-weight:700;
  color:#38BDF8; /* fixed sky-l value — always visible on dark hero bg */
  line-height:1;margin-bottom:3px;
}
/* FIX: use a fixed light value for the dark hero background */
.stat-card .lbl{font-size:10px;color:rgba(186,230,253,.8);font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.stat-delta{font-size:10px;margin-top:3px;font-family:var(--mono)}
.stat-delta.up{color:#34D399}
.stat-delta.down{color:#FCA5A5}

/* Add listing btn */
.add-listing-btn{
  width:100%;padding:13px;
  background:linear-gradient(135deg,var(--sky),var(--sky-d));
  color:#fff;border-radius:var(--r-sm);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:7px;
  transition:all var(--fast);box-shadow:0 4px 16px rgba(14,165,233,.4);
}
.add-listing-btn:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(14,165,233,.5)}

/* Subscription banner */
.sub-banner{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--surface);border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);padding:12px 16px;
}
.sub-info h4{font-size:13px;font-weight:700;color:var(--sky);margin-bottom:2px}
.sub-info p{font-size:11px;color:var(--subtext);font-family:var(--mono)}
.upgrade-btn{
  padding:7px 16px;background:linear-gradient(135deg,var(--sky),var(--sky-d));
  color:#fff;border-radius:var(--r-full);font-size:12px;font-weight:700;
  transition:all var(--fast);box-shadow:0 2px 10px rgba(14,165,233,.3);white-space:nowrap;
}
.upgrade-btn:hover{transform:translateY(-1px)}

/* Sub required notice */
.sub-required{
  margin:16px;padding:16px;
  background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);
  border-radius:var(--r);text-align:center;
}
.sub-required h4{font-size:14px;font-weight:700;color:var(--gold);margin-bottom:6px}
.sub-required p{font-size:12px;color:var(--subtext);line-height:1.6}

/* Dash body */
.dash-body{padding:14px 16px}

/* Account health panel */
.health-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;margin-top:20px;margin-bottom:20px;
}
.health-panel h4{font-size:13px;font-weight:700;margin-bottom:12px;
  display:flex;align-items:center;gap:6px;color:var(--text)}
.h-item{display:flex;align-items:center;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--border)}
.h-item:last-child{border:none}
.h-left{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text)}
.h-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--subtext)}
.h-dot.ok{background:var(--moss);box-shadow:0 0 0 3px rgba(5,150,105,.15)}
.h-dot.warn{background:var(--gold);box-shadow:0 0 0 3px rgba(217,119,6,.15)}
.h-dot.bad{background:var(--danger);box-shadow:0 0 0 3px rgba(220,38,38,.15)}

/* Portal plan cards in agent dashboard */
.portal-plans-section{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:16px;margin-bottom:16px;
}
.portal-plans-title{
  font-family:var(--serif);font-size:18px;font-weight:700;
  margin-bottom:4px;display:flex;align-items:center;gap:8px;
}
.portal-plans-sub{font-size:11px;color:var(--subtext);margin-bottom:16px;font-family:var(--mono)}
.portal-plan-cards{display:flex;flex-direction:column;gap:10px}

/* ══════════════════════════════════════════════════════════
   § 11 PENDING SCREEN
══════════════════════════════════════════════════════════ */
.status-screen{
  flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;padding:40px 24px;
}
.si{
  width:72px;height:72px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin:0 auto 20px;
}
.si-success{background:linear-gradient(135deg,#ECFDF5,#D1FAE5);color:var(--moss)}
.si-info{background:linear-gradient(135deg,var(--sky-pale),#BAE6FD);color:var(--sky-d)}
.status-screen h3{font-family:var(--serif);font-size:24px;font-weight:700;margin-bottom:8px}
.status-screen p{font-size:13px;color:var(--subtext);line-height:1.65;max-width:320px;margin:0 auto}

/* ══════════════════════════════════════════════════════════
   § 12 MODALS
══════════════════════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:var(--z-modal);
  background:rgba(8,14,28,.75);backdrop-filter:blur(6px);
  align-items:flex-end;justify-content:center;
  padding-bottom:env(safe-area-inset-bottom);
}
.modal-overlay.open{display:flex}

.modal-sheet{
  background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:0 20px 32px;width:100%;max-width:540px;max-height:92vh;
  overflow-y:auto;animation:slideUp .3s var(--ease);
  -webkit-overflow-scrolling:touch;
  border-top:1px solid var(--border);
}
.sheet-handle{
  width:40px;height:4px;background:var(--border2);border-radius:2px;
  margin:14px auto 10px;flex-shrink:0;
}
.modal-nav-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 0 14px;border-bottom:1px solid var(--border);margin-bottom:18px;
}
.modal-back-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--sky);
  padding:6px 12px;border-radius:var(--r-full);
  background:var(--sky-pale);border:1px solid var(--border2);
  transition:all var(--fast);
}
.modal-back-btn:hover{background:#BAE6FD;border-color:var(--sky)}
.modal-nav-title{font-size:14px;font-weight:700;color:var(--text)}

.sheet-title{
  font-family:var(--serif);font-size:22px;font-weight:700;
  margin-bottom:6px;color:var(--text);display:flex;align-items:center;gap:6px;
  letter-spacing:-.02em;
}
.sheet-sub{font-size:13px;color:var(--subtext);margin-bottom:20px;line-height:1.6}
.divider-line{height:1px;background:var(--border);margin:20px 0}

/* ── Listing detail modal ────────────────────────────────── */
#detail-img{
  margin:0;border-radius:0;overflow:hidden;position:relative;
  height:220px;background:var(--surface2);
  display:flex;align-items:center;justify-content:center;
}
.detail-meta-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0 6px;
}
.detail-price{
  font-family:var(--serif);font-size:26px;font-weight:700;color:var(--sky);
}
.detail-agent-card{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;background:var(--surface2);
  border-radius:var(--r-sm);border:1px solid var(--border);margin-bottom:14px;
}

/* ── Map modal (zone grid) ───────────────────────────────── */
.zone-grid{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 14px}
.zone-section{width:100%}
.zone-label{font-size:10px;font-weight:700;color:var(--subtext);
  text-transform:uppercase;letter-spacing:.08em;margin:10px 0 6px}
.zone-btn{
  display:inline-flex;align-items:center;gap:4px;
  padding:6px 14px;border-radius:var(--r-full);
  background:var(--surface2);border:1px solid var(--border2);
  font-size:12px;font-weight:600;color:var(--sky-d);
  cursor:pointer;transition:all var(--fast);
}
.zone-btn:hover{background:var(--sky-pale);border-color:var(--sky);color:var(--sky-d)}
.zone-btn.hot{border-color:rgba(251,191,36,.5);color:var(--gold)}
.zone-btn.hot::after{content:'🔥';font-size:10px;margin-left:2px}
.zone-btn.active{background:var(--sky);border-color:var(--sky-d);color:#fff}

/* ── Add listing modal ───────────────────────────────────── */
.upload-zone{
  border:2px dashed var(--border2);border-radius:var(--r);
  padding:24px 16px;text-align:center;cursor:pointer;
  background:var(--sky-pale);transition:all var(--fast);margin-bottom:12px;
}
.upload-zone:hover{border-color:var(--sky);background:#BAE6FD}
.uz-icon{
  width:56px;height:56px;margin:0 auto 10px;
  background:var(--surface);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--sky);border:1px solid var(--border2);
}
.upload-zone p{font-size:13px;font-weight:700;color:var(--sky-d);margin-bottom:3px}
.upload-hint{font-size:11px;color:var(--subtext)!important;font-weight:400!important}
.photo-count-lbl{font-size:11px;color:var(--sky-d);margin-bottom:8px;font-family:var(--mono)}
.img-previews{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.img-previews img{
  width:72px;height:72px;object-fit:cover;border-radius:var(--r-sm);
  border:2px solid var(--border2);
}

/* Rent input */
.rent-input-wrap{position:relative}
.rent-prefix{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:13px;font-weight:700;color:var(--subtext);pointer-events:none;
}
.rent-input-wrap input{padding-left:42px}

/* Feature grid */
.feat-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:7px;margin-bottom:14px;
}
.feat-chip{
  display:flex;align-items:center;gap:5px;
  padding:7px 10px;border-radius:var(--r-sm);
  border:1.5px solid var(--border);background:var(--surface);
  font-size:11px;font-weight:600;color:var(--text);cursor:pointer;
  transition:all var(--fast);
}
.feat-chip.sel{
  border-color:var(--sky);background:var(--sky-pale);color:var(--sky-d);
}

/* Expiry options */
.expiry-opts{display:flex;gap:8px;margin-bottom:18px}
.exp-opt{
  flex:1;padding:10px;border-radius:var(--r-sm);text-align:center;
  border:1.5px solid var(--border);font-size:12px;font-weight:600;
  color:var(--subtext);cursor:pointer;transition:all var(--fast);
}
.exp-opt.sel{border-color:var(--sky);background:var(--sky-pale);color:var(--sky-d)}

/* ── Payment modal ───────────────────────────────────────── */
.mpamba-box{
  background:var(--sky-pale);border:1px solid var(--border2);
  border-radius:var(--r);padding:16px;margin-bottom:20px;
}
.mpamba-box h4{
  font-size:13px;font-weight:700;color:var(--sky-d);
  margin-bottom:12px;display:flex;align-items:center;gap:5px;
}
.mpamba-steps{display:flex;flex-direction:column;gap:9px}
.mpamba-step{
  display:flex;align-items:center;gap:10px;
  font-size:13px;color:var(--text);line-height:1.5;
}
.mpamba-num{
  width:24px;height:24px;flex-shrink:0;
  background:linear-gradient(135deg,var(--sky),var(--sky-d));
  color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;
}
.till{color:var(--sky-d);font-family:var(--mono);font-size:14px}

/* Plan cards (in modals) */
#prem-plans,#plan-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.prem-card,.plan-card{
  border:2px solid var(--border2);border-radius:var(--r);
  padding:14px 16px;cursor:pointer;transition:all var(--fast);
  background:var(--surface);
}
.prem-card.sel,.plan-card.sel{
  border-color:var(--sky);background:var(--sky-pale);
  box-shadow:0 0 0 3px rgba(14,165,233,.12);
}
.prem-card:hover,.plan-card:hover{border-color:var(--sky-d)}
.pc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.pc-name{font-size:15px;font-weight:700;color:var(--text)}
.pc-price{font-size:13px;font-weight:700;color:var(--sky-d);font-family:var(--mono)}
.pc-feat{font-size:11px;color:var(--subtext);line-height:1.55}

/* Saved favourites */
#saved-listings-wrap .listing-card{margin-bottom:12px}

/* Saved modal */
.saved-empty{
  text-align:center;padding:40px 20px;
  color:var(--subtext);font-size:13px;
}

/* Terms / Privacy content */
#terms-content,#privacy-content{
  font-size:12px;color:var(--subtext);line-height:1.8;
  padding-bottom:8px;max-height:60vh;overflow-y:auto;
}

/* ══════════════════════════════════════════════════════════
   § 13 AUTH SCREEN — PLAN COMPARE TABLE
══════════════════════════════════════════════════════════ */
/* (on dark background — auth screens) */
#tenant-auth .plan-compare-table,
#agent-auth  .plan-compare-table{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
#tenant-auth .pct-row,
#agent-auth  .pct-row{border-color:rgba(255,255,255,.05)}

/* ══════════════════════════════════════════════════════════
   § 14 RESPONSIVE
══════════════════════════════════════════════════════════ */
@media(min-width:480px){
  .role-grid{gap:18px}
  .role-card{padding:32px 22px 26px}
  .role-card h3{font-size:19px}
  .stats-row .num{font-size:32px}
}
@media(min-width:600px){
  .modal-sheet{border-radius:var(--r-xl)}
  .modal-overlay{align-items:center;padding:24px}
  #detail-img{height:280px}
  .feat-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:768px){
  .search-hero{padding:24px 28px}
  .hero-top h2{font-size:36px}
  .listings-section{padding:18px 20px}
  .dash-body{padding:18px 20px}
  .land-title{font-size:clamp(54px,12vw,80px)}
  .modal-sheet{max-width:560px}
}
@media(max-width:360px){
  .role-grid{grid-template-columns:1fr}
  .search-actions{gap:6px}
  .stats-row{gap:7px}
  .stat-card .num{font-size:24px}
  .pct-head{grid-template-columns:1fr repeat(3,60px)}
  .pct-row{grid-template-columns:1fr repeat(3,60px)}
  .feat-grid{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════════════════
   § 15  LISTING CARDS v2 (JS-rendered cards)
══════════════════════════════════════════════════════════ */

/* ── Tenant listing card (card-img-v2 layout) ────────────── */
.card-img-v2{
  position:relative;width:100%;aspect-ratio:16/10;
  background:linear-gradient(140deg,#0d2040 0%,#1a3560 100%);
  overflow:hidden;flex-shrink:0;
}
.card-img-v2 .img-slides{width:100%;height:100%}
.card-img-v2 .img-slides img{
  width:100%;height:100%;object-fit:cover;display:none;
  user-select:none;-webkit-user-drag:none;
}
.card-img-v2 .img-slides img.active{display:block}
.card-no-photo{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:100%;height:100%;
  color:rgba(255,255,255,.2);gap:6px;
}
.card-no-photo span{font-size:11px;font-weight:600;letter-spacing:.04em}
.card-img-overlay-top{
  position:absolute;top:8px;left:8px;right:8px;
  display:flex;justify-content:space-between;align-items:flex-start;
  z-index:3;
}
.card-img-overlay-bottom{
  position:absolute;bottom:8px;left:8px;right:8px;
  display:flex;justify-content:space-between;align-items:flex-end;
  z-index:3;
}
.card-price-pill{
  background:rgba(8,14,28,.82);color:#fff;
  padding:5px 12px;border-radius:var(--r-full);
  font-size:13px;font-weight:700;
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px);font-family:var(--serif);
}
.card-fav-btn{
  width:32px;height:32px;background:rgba(8,14,28,.7);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:none;cursor:pointer;
  color:#fff;backdrop-filter:blur(4px);transition:all var(--fast);
}
.card-fav-btn:hover{background:rgba(14,165,233,.9)}
.card-fav-btn.saved{background:var(--danger)}
.card-view-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(8,14,28,.7);color:rgba(255,255,255,.8);
  padding:4px 10px;border-radius:var(--r-full);
  font-size:10px;font-weight:700;backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.1);
  transition:all var(--fast);
}

.card-body-v2{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px}
.card-title-v2{
  display:flex;align-items:flex-start;gap:5px;
  font-size:14px;font-weight:700;color:var(--text);line-height:1.3;
  font-family:var(--serif);letter-spacing:-.01em;
}
.card-title-v2 svg{color:var(--sky);flex-shrink:0;margin-top:2px}
.card-beds-v2{
  display:flex;align-items:center;gap:5px;
  font-size:12px;color:var(--subtext);font-weight:500;margin-bottom:3px;
}
.card-info-row{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.card-feat-badge{
  font-size:10px;font-weight:600;padding:3px 9px;border-radius:var(--r-full);
  background:var(--sky-pale);color:var(--sky-d);border:1px solid var(--border2);
}
.card-verified-dot{
  width:7px;height:7px;background:var(--moss);border-radius:50%;flex-shrink:0;
  box-shadow:0 0 0 2px rgba(5,150,105,.2);
}
.card-verified-label{font-size:10px;font-weight:700;color:var(--moss)}

.card-footer-v2{
  border-top:1px solid var(--border);padding:10px 14px;
  display:flex;align-items:center;justify-content:space-between;
}
.card-agent-row{display:flex;align-items:center;gap:7px}
.card-agent-avatar{
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,var(--sky-l),var(--sky-d));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:10px;font-weight:700;flex-shrink:0;
}
.card-agent-name{font-size:11px;font-weight:600;color:var(--subtext)}
.card-agent-meta{font-size:10px;color:var(--subtext)}
.verified-badge-icon{vertical-align:middle;flex-shrink:0}
.card-col-left{display:flex;flex-direction:column;gap:2px}
.card-col-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}

/* ══════════════════════════════════════════════════════════
   § 16  AGENT LISTING CARDS (alcard-v2)
══════════════════════════════════════════════════════════ */
.alcard-v2{
  display:flex;gap:0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;margin-bottom:12px;
  box-shadow:var(--sh);transition:transform var(--fast),box-shadow var(--fast);
}
.alcard-v2:hover{transform:translateY(-1px);box-shadow:var(--sh2)}
.alcard-v2:active{transform:scale(.99)}
.alcard-thumb{
  width:110px;flex-shrink:0;
  background:linear-gradient(140deg,#0d2040,#1a3560);
  position:relative;overflow:hidden;min-height:120px;
}
.alcard-thumb .img-slides{width:100%;height:100%}
.alcard-thumb .img-slides img{width:100%;height:100%;object-fit:cover;display:none}
.alcard-thumb .img-slides img.active{display:block}
.alcard-status-pill{
  position:absolute;bottom:7px;left:5px;right:5px;
  font-size:9px;font-weight:800;padding:3px 6px;
  border-radius:var(--r-full);text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  backdrop-filter:blur(4px);
}
.alcard-status-pill.live  {background:rgba(5,150,105,.85);color:#ECFDF5}
.alcard-status-pill.pend  {background:rgba(217,119,6,.85);color:#FEF3C7}
.alcard-status-pill.rej   {background:rgba(220,38,38,.85);color:#FEE2E2}
.alcard-status-pill.exp   {background:rgba(75,85,99,.85);color:#E5E7EB}

.alcard-body-v2{
  flex:1;padding:11px 13px;display:flex;flex-direction:column;gap:4px;min-width:0;
}
.alcard-price{
  font-family:var(--serif);font-size:16px;font-weight:700;
  color:var(--sky);letter-spacing:-.01em;
}
.alcard-meta{font-size:11px;color:var(--subtext);display:flex;align-items:center;gap:6px}
.alcard-exp{
  font-size:10px;font-family:var(--mono);color:var(--subtext);margin-top:auto;
}
.alcard-actions-v2{
  display:flex;gap:5px;margin-top:7px;flex-wrap:wrap;
}
.alcard-edit-btn{
  flex:1;padding:6px 10px;background:var(--sky-pale);border:1px solid var(--border2);
  border-radius:var(--r-sm);color:var(--sky-d);font-size:11px;font-weight:700;
  transition:all var(--fast);text-align:center;
}
.alcard-edit-btn:hover{background:#BAE6FD;border-color:var(--sky)}
.alcard-del-btn{
  padding:6px 10px;background:rgba(220,38,38,.08);border:1px solid rgba(220,38,38,.2);
  border-radius:var(--r-sm);color:var(--danger);font-size:11px;font-weight:700;
  transition:all var(--fast);
}
.alcard-del-btn:hover{background:rgba(220,38,38,.15);border-color:var(--danger)}

/* Edit mode banner */
.edit-mode-banner{
  background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.3);
  border-radius:var(--r-sm);padding:10px 14px;font-size:12px;color:#F59E0B;
  margin-bottom:12px;display:none;align-items:center;gap:8px;
}
.edit-mode-banner.visible{display:flex}
.edit-mode-banner button{margin-left:auto;font-size:10px;color:inherit;opacity:.7}

/* ══════════════════════════════════════════════════════════
   § 17  PLAN PICKER CARDS (ppc — JS-rendered)
══════════════════════════════════════════════════════════ */
.ppc{
  border:1.5px solid var(--border);border-radius:var(--r);
  padding:16px;cursor:pointer;position:relative;
  background:var(--surface2);
  transition:border-color var(--mid-dur),background var(--mid-dur),
             box-shadow var(--mid-dur),transform var(--fast);
  margin-bottom:10px;
}
.ppc:active{transform:scale(.985)}
.ppc-pop{border-color:rgba(14,165,233,.35);background:rgba(14,165,233,.04)}
.ppc-sel{
  border-color:var(--sky)!important;background:rgba(14,165,233,.1)!important;
  box-shadow:0 0 0 3px rgba(14,165,233,.18),0 4px 16px rgba(14,165,233,.12);
}
.ppc-current{border-color:rgba(16,185,129,.5)!important}
.ppc-popular{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--sky);color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.6px;text-transform:uppercase;
  padding:3px 14px;border-radius:var(--r-full);white-space:nowrap;
}
.ppc-your-plan{
  position:absolute;top:-12px;right:14px;
  background:#10B981;color:#fff;font-size:9px;font-weight:800;
  letter-spacing:.4px;padding:3px 10px;border-radius:var(--r-full);
}
.ppc-name{font-size:13px;font-weight:700;margin-bottom:2px;color:var(--text)}
.ppc-price{
  font-family:var(--serif);font-size:22px;font-weight:700;
  color:var(--sky);letter-spacing:-.02em;margin-bottom:6px;
}
.ppc-limit{font-size:11px;color:var(--subtext);margin-bottom:8px}
.ppc-feats{display:flex;flex-direction:column;gap:5px}
.ppc-feats li{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--text);list-style:none;
}
.chk{width:14px;height:14px;flex-shrink:0}
.chk-yes{stroke:#10B981}.chk-no{stroke:rgba(0,0,0,.2)}
[data-theme="dark"] .chk-no{stroke:rgba(255,255,255,.2)}

/* ══════════════════════════════════════════════════════════
   § 18  SPARKLINE / VIEWS CHART
   FIX: bars use height:var(--h) — consumes JS-set CSS var
   FIX: all backgrounds use design tokens → proper dark/light
══════════════════════════════════════════════════════════ */
.vw-section{margin-bottom:18px}
.vw-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:12px 16px 6px;background:var(--surface);
}
.vw-header-left{display:flex;flex-direction:column;gap:2px}
.vw-kpi{
  font-family:var(--serif);font-size:30px;font-weight:800;
  line-height:1;color:var(--text);letter-spacing:-1px;
}
.vw-kpi-sub{font-size:11px;font-weight:600;color:var(--subtext);margin-top:2px}
.vw-trend{
  font-size:12px;font-weight:700;padding:3px 9px;
  border-radius:var(--r-full);font-family:var(--mono);
  display:flex;align-items:center;gap:5px;
}
.vw-trend--up  {background:rgba(5,150,105,.12);color:var(--moss)}
.vw-trend--down{background:rgba(220,38,38,.1);color:var(--danger)}
.vw-est-tag{
  font-size:10px;color:var(--subtext);padding:2px 8px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-full);font-family:var(--mono);
}
.vw-chart{
  position:relative;padding:8px 16px 0;
  background:var(--surface);border-top:1px solid var(--border);
}
.vw-grid-lines{
  position:absolute;inset:0;padding:8px 16px 0;
  display:flex;flex-direction:column;justify-content:space-between;
  pointer-events:none;
}
.vw-grid-line{width:100%;height:1px;background:var(--border);opacity:.65}
.vw-bars{
  display:flex;align-items:flex-end;gap:5px;
  height:72px;position:relative;z-index:1;
}
.vw-bar-col{
  flex:1;display:flex;flex-direction:column;align-items:center;
  position:relative;height:100%;justify-content:flex-end;
}
/* FIX: height:var(--h,3px) — JS sets style="--h:XX%" inline on each bar */
.vw-bar{
  width:100%;border-radius:4px 4px 0 0;
  background:linear-gradient(to top,var(--sky-d),var(--sky-l));
  opacity:.45;min-height:3px;
  height:var(--h,3px);
  transition:opacity var(--fast);
}
.vw-bar--today{opacity:.85}
.vw-bar--peak {opacity:.7;background:linear-gradient(to top,#0284C7,#38BDF8)}
.vw-bar-col:hover .vw-bar{opacity:1}
.vw-bar-col:hover .vw-bar-tooltip{display:block}
.vw-bar-tooltip{
  display:none;position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%);
  background:var(--navy);color:#E0F2FE;
  font-size:10px;font-weight:700;padding:4px 8px;border-radius:6px;
  white-space:nowrap;font-family:var(--mono);pointer-events:none;z-index:5;
  border:1px solid rgba(56,189,248,.2);box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.vw-footer{
  display:flex;align-items:center;gap:7px;padding:7px 16px 9px;
  background:var(--surface);border-top:1px solid var(--border);
  font-size:11px;color:var(--subtext);
}
.vw-footer-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.vw-footer-dot--today{background:var(--sky)}
.vw-footer-dot--peak {background:rgba(56,189,248,.45)}
.vw-bar-lbl{
  flex:1;font-size:9px;color:var(--subtext);text-align:center;font-family:var(--mono);
  margin-top:4px;
}
.vw-bar-lbl--today{color:var(--sky);font-weight:700}
.sparkline-wrap{overflow:hidden}

/* ══════════════════════════════════════════════════════════
   § 19  SKELETON LOADER
══════════════════════════════════════════════════════════ */
@keyframes skel-shimmer{
  0%  {background-position:200% 0}
  100%{background-position:-200% 0}
}
.skeleton-card{
  background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);
  background-size:200% 100%;
  animation:skel-shimmer 1.4s ease-in-out infinite;
  border-radius:var(--r);overflow:hidden;height:260px;
  border:1px solid var(--border);margin-bottom:14px;
}

/* ══════════════════════════════════════════════════════════
   § 20  EMPTY STATE
══════════════════════════════════════════════════════════ */
.empty-state{
  display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding:48px 24px;text-align:center;gap:12px;
}
.empty-state-icon{
  width:64px;height:64px;border-radius:var(--r-lg);
  background:var(--sky-pale);border:1px solid var(--border2);
  display:flex;align-items:center;justify-content:center;
  color:var(--sky-d);margin-bottom:4px;
}
.empty-state h3{
  font-family:var(--serif);font-size:18px;font-weight:700;
  color:var(--text);margin-bottom:2px;
}
.empty-state p{font-size:13px;color:var(--subtext);line-height:1.6;max-width:280px}

/* ══════════════════════════════════════════════════════════
   § 21  VERIFIED BADGES
══════════════════════════════════════════════════════════ */
.verified-inline-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#065F46 0%,#047857 50%,#059669 100%);
  color:#ECFDF5;border:1px solid rgba(52,211,153,.5);
  border-radius:6px;padding:3px 9px 3px 7px;
  font-size:10px;font-weight:800;letter-spacing:.04em;
}
.verified-badge-icon{color:#6EE7B7}
.meta-badge.verified,.meta-badge.green{
  display:inline-flex;align-items:center;gap:4px;
  background:linear-gradient(135deg,rgba(16,185,129,.15),rgba(5,150,105,.25));
  color:#34D399;border:1px solid rgba(52,211,153,.4);
  border-radius:var(--r-full);padding:3px 9px;
  font-size:10px;font-weight:700;box-shadow:0 0 6px rgba(52,211,153,.1);
}

/* ══════════════════════════════════════════════════════════
   § 22  MISC UTILITIES
══════════════════════════════════════════════════════════ */
.nav-logo-img{height:36px;width:auto}
.divider-line{height:1px;background:var(--border);margin:20px 0}

/* Tall-modal scroll helper */
.modal-sheet{scroll-padding-bottom:32px}

/* Safe area padding for notched phones */
@supports(padding:env(safe-area-inset-bottom)){
  .modal-sheet{padding-bottom:calc(32px + env(safe-area-inset-bottom))}
  body{padding-bottom:env(safe-area-inset-bottom)}
}