/* ============================================================
   HOUSP BUYER — Visual language ported from sell.html
   Mobile-first, centered narrow content, white cards on grey,
   navy primary + gold accent, F5F7FF active states.
   ============================================================ */

:root{
  --navy:#2E1065;
  --navy-light:#5B21B6;
  --navy-dark:#1a0b3d;
  --gold:#6D28D9;
  --gold-light:#8B5CF6;
  --gold-dark:#5B21B6;
  --green:#22C55E;
  --green-bg:#F0FDF4;
  --bg:#F5F6F8;
  --card:#fff;
  --line:#F1F5F9;
  --border:#E2E8F0;
  --text:#1E293B;
  --muted:#64748B;
  --muted-2:#94A3B8;
  --tint:#F5F3FF;  /* active card tint */
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; margin:0; }
body {
  font-family:'Inter',ui-sans-serif,system-ui,sans-serif;
  color: var(--text);
  min-height:100vh;
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(109,40,217,.10) 0%, transparent 55%),
    radial-gradient(ellipse 70% 55% at 100% 0%, rgba(46,16,101,.10) 0%, transparent 55%),
    radial-gradient(ellipse 60% 50% at 50% 100%, rgba(109,40,217,.06) 0%, transparent 60%),
    linear-gradient(180deg, #F4F6FB 0%, #EEF1F8 100%);
  background-attachment: fixed;
}

/* ─── App layout: sell.html-style sidebar + content ─── */
.b-app{ display:flex; min-height:100vh; }
.b-sidebar{
  width:260px; min-height:100vh; flex-shrink:0;
  position:sticky; top:0; align-self:flex-start; height:100vh;
  background: linear-gradient(185deg, #2E1065 0%, #3A1C7D 100%);
  color:#fff;
  padding:28px 22px;
  display:flex; flex-direction:column;
  overflow-y:auto;
  position:fixed; left:0; top:0; bottom:0;
  z-index:200;
}
.b-sidebar::after{
  content:'';
  position:absolute; bottom:-60px; left:-60px;
  width:260px; height:260px; border-radius:50%;
  background: rgba(109,40,217,0.05);
  pointer-events:none;
}
.b-sidebar-logo{
  display:flex; align-items:center; gap:10px; margin-bottom:34px;
  position:relative; z-index:1;
}
.b-sidebar-logo img{ height:28px; width:auto; }
.b-sidebar-section{
  color:rgba(255,255,255,.4);
  font-size:10px; font-weight:800; letter-spacing:.14em;
  text-transform:uppercase; padding:18px 0 8px;
}
.b-nav{ display:flex; flex-direction:column; gap:4px; flex:1; position:relative; z-index:1; }
.b-nav-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-radius:8px;
  color:rgba(255,255,255,.72);
  text-decoration:none;
  font-size:14px; font-weight:600;
  transition: background .2s, color .2s;
  cursor:pointer;
  border:1px solid transparent;
}
.b-nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; }
.b-nav-item.active{
  background: rgba(255,255,255,.13);
  color:#fff;
  border-color: transparent;
  box-shadow: inset 3px 0 0 #c4b5fd;
}
.b-nav-item .ic{
  width:22px; height:22px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--gold-light);
}
.b-nav-item.active .ic{ color: #c4b5fd; }
.b-nav-item .count{
  margin-left:auto; font-size:11px; font-weight:800;
  background:var(--gold); color:#fff;
  padding:2px 8px; border-radius:999px; min-width:22px; text-align:center;
}
.b-sidebar-foot{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:20px; margin-top:20px;
  position:relative; z-index:1;
}
.b-sidebar-foot .who{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.b-sidebar-foot .avatar{
  width:34px; height:34px; border-radius:999px;
  background: rgba(255,255,255,.1);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:13px;
}
.b-sidebar-foot .who b{ color:#fff; font-size:13px; font-weight:700; display:block; }
.b-sidebar-foot .who span{ color:rgba(255,255,255,.45); font-size:11px; }
.b-sidebar-foot button{
  color:rgba(255,255,255,.4); font-size:12px; font-weight:500;
  background:none; border:0; cursor:pointer; padding:0;
  font-family:inherit; transition:color .2s;
}
.b-sidebar-foot button:hover{ color:rgba(255,255,255,.85); }

.b-main{ flex:1; min-width:0; margin-left:260px; display:flex; flex-direction:column; background: linear-gradient(180deg, #f4f1fb 0%, #ece8f7 100%); }
.b-header{
  background: linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.80) 100%);
  padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-bottom:1px solid rgba(226,232,240,.7);
  position:sticky; top:0; z-index:90;
  flex-shrink:0;
  box-shadow: 0 1px 0 rgba(255,255,255,.95);
}
.b-header-left{ display:flex; align-items:center; gap:12px; min-width:0 }
.b-menu-toggle{
  display:none; background:transparent; border:0;
  width:38px; height:38px; border-radius:10px; color:var(--navy);
  cursor:pointer; align-items:center; justify-content:center;
}
.b-menu-toggle:hover{ background:rgba(46,16,101,.05); }
.b-header h1{
  margin:0; font-size:18px; font-weight:900; color:var(--navy); letter-spacing:-.01em;
}
.b-header .sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.b-header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; }

.b-body{
  flex:1;
  padding:28px 20px 60px;
  width:100%;
}
.b-content{
  width:100%;
  max-width:720px;
  margin:0 auto;
}
.b-content.wide{ max-width:960px; }

/* Bell */
.b-bell{
  position:relative;
  width:42px; height:42px; border-radius:8px;
  border:1.5px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  color:var(--navy);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:border-color .2s, background .2s, transform .2s, box-shadow .2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 3px rgba(46,16,101,.04);
}
.b-bell:hover{
  border-color:var(--gold);
  background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 100%);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 18px -6px rgba(109,40,217,.30);
}
.b-bell .ub{
  position:absolute; top:6px; right:7px;
  min-width:16px; height:16px; padding:0 4px; border-radius:999px;
  background:var(--gold); color:#fff;
  font-size:10px; font-weight:900;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid #fff;
}
.b-pop{
  position:absolute; top:64px; right:14px;
  width:380px; max-width:calc(100vw - 28px);
  background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(250,251,254,.92) 100%);
  border:1px solid rgba(255,255,255,.75);
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 30px 70px rgba(46,16,101,.22),
    0 0 0 1px rgba(46,16,101,.04);
  z-index:200; overflow:hidden;
  display:none;
}
.b-pop.open{ display:block; }
.b-pop-head{
  padding:14px 16px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.b-pop-head b{ color:var(--navy); font-size:14px; font-weight:900; }
.b-pop-list{ max-height:420px; overflow:auto; }
.b-pop-item{
  padding:12px 16px; border-bottom:1px solid var(--line);
  display:flex; gap:12px; align-items:flex-start;
  text-decoration:none; color:inherit; cursor:pointer;
}
.b-pop-item:hover{ background:#FAFBFE; }
.b-pop-item .ic{
  width:34px; height:34px; border-radius:10px;
  background:rgba(109,40,217,.12); color:var(--gold-dark);
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.b-pop-item.unread .ic{ background:rgba(46,16,101,.08); color:var(--navy); }
.b-pop-item .ttl{ font-size:13px; font-weight:800; color:var(--navy); line-height:1.3 }
.b-pop-item .msg{ font-size:12px; color:var(--muted); line-height:1.4; margin-top:2px }
.b-pop-item .tm{ font-size:11px; color:var(--muted-2); margin-top:4px }

/* ─── Mobile ─── */
@media (max-width: 1024px){
  .b-sidebar{
    width:280px; transform:translateX(-100%);
    transition:transform .25s;
  }
  .b-app.open .b-sidebar{
    transform:translateX(0);
    box-shadow:30px 0 80px rgba(0,0,0,.3);
  }
  .b-main{ margin-left:0; }
  .b-menu-toggle{ display:inline-flex; }
  .b-body{ padding:20px 16px 60px; }
  .b-header{ padding:12px 16px; }
}

/* Scrim for mobile drawer */
.b-scrim{
  display:none;
  position:fixed; inset:0;
  background:rgba(26,11,61,.4);
  z-index:150;
}
.b-app.open .b-scrim{ display:block; }

/* ============================================================
   sell.html-style components
   ============================================================ */

/* Cards — subtle gradient surface, layered shadow, inner highlight */
.card{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:10px;
  padding:22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 3px rgba(46,16,101,.04),
    0 12px 28px -10px rgba(46,16,101,.10);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover{
  border-color: rgba(109,40,217,.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 6px rgba(46,16,101,.05),
    0 24px 50px -14px rgba(46,16,101,.18);
}
.card-tight{ padding:18px; }
.card-flat{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:18px;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card-flat:hover{
  border-color: rgba(109,40,217,.35);
  box-shadow: 0 10px 24px -10px rgba(46,16,101,.12);
}
.section-card{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:10px;
  padding:24px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 3px rgba(46,16,101,.04),
    0 14px 32px -12px rgba(46,16,101,.10);
  transition: box-shadow .25s, border-color .25s;
  position:relative;
  overflow:hidden;
}
.section-card::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:120px;
  background: radial-gradient(ellipse 60% 100% at 0% 0%, rgba(109,40,217,.05) 0%, transparent 70%);
  pointer-events:none;
}
.section-card:hover{
  border-color: rgba(109,40,217,.30);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 2px 6px rgba(46,16,101,.05),
    0 24px 50px -14px rgba(46,16,101,.16);
}
.section-card > *{ position:relative; z-index:1; }

/* Icon box (above section titles) — gradient + soft shadow */
.icon-box{
  width:56px; height:56px;
  border-radius:10px;
  background: linear-gradient(135deg, rgba(46,16,101,.10) 0%, rgba(46,16,101,.04) 100%);
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 14px -6px rgba(46,16,101,.18);
}
.icon-box.gold{
  background: linear-gradient(135deg, rgba(109,40,217,.22) 0%, rgba(109,40,217,.08) 100%);
  color: var(--gold-dark);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 14px -6px rgba(109,40,217,.30);
}
.icon-box.green{
  background: linear-gradient(135deg, rgba(34,197,94,.18) 0%, rgba(34,197,94,.05) 100%);
  color: var(--green);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 6px 14px -6px rgba(34,197,94,.25);
}
.icon-box svg{ width:28px; height:28px; }

/* Headings */
.h1{
  font-size:26px; font-weight:900; color:var(--navy);
  letter-spacing:-.015em; line-height:1.2; margin:0 0 8px;
}
.h2{
  font-size:20px; font-weight:900; color:var(--navy);
  letter-spacing:-.01em; line-height:1.25; margin:0 0 6px;
}
.h-sub{
  color:var(--muted); font-size:14px; line-height:1.55;
  margin:0 0 24px;
}
.eyebrow{
  color: var(--gold); font-size:11px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase;
  margin-bottom:8px;
}

/* Buttons (sell.html-exact) */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
  padding:14px 22px;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
  font-family:inherit;
  border:none; cursor:pointer;
  transition: background .2s, transform .15s, box-shadow .2s, border-color .2s;
  text-decoration:none;
  text-align:center;
  line-height:1;
}
.btn-primary{
  background: linear-gradient(180deg, #4C1D95 0%, var(--navy) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 4px 14px -4px rgba(46,16,101,.40);
}
.btn-primary:hover:not(:disabled){
  background: linear-gradient(180deg, #5B21B6 0%, #4C1D95 100%);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 12px 28px -6px rgba(46,16,101,.50);
}
.btn-gold{
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    0 4px 14px -4px rgba(109,40,217,.50);
}
.btn-gold:hover{
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%);
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.36),
    0 14px 30px -8px rgba(109,40,217,.55);
}
.btn-outline{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  color:var(--navy);
  border:1.5px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 3px rgba(46,16,101,.03);
}
.btn-outline:hover{
  border-color: var(--gold);
  background: #fff;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px -8px rgba(109,40,217,.30);
}
.btn-ghost{
  background:transparent; color:var(--muted); border:none;
  padding:8px 12px; font-size:14px;
}
.btn-ghost:hover{ color:var(--navy); }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 16px; font-size:13px; border-radius:999px; }
.btn-lg{ padding:18px 24px; font-size:16px; }

/* Form inputs — gradient surface, soft borders, glow on focus
   (We deliberately match bare <input> too because many inputs omit a type attribute.) */
.input,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]):not([type=range]),
select, textarea {
  width:100%;
  padding:14px 16px;
  border:1.5px solid var(--border);
  border-radius:8px;
  font-size:15px;
  font-weight:500;
  color: var(--text);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  outline:none;
  font-family:inherit;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
  box-shadow:
    inset 0 1px 2px rgba(46,16,101,.04),
    0 1px 0 rgba(255,255,255,.9);
}
.input:hover,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]):not([type=range]):hover:not(:focus),
select:hover:not(:focus), textarea:hover:not(:focus){
  border-color: rgba(109,40,217,.45);
}
.input:focus,
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=button]):not([type=submit]):not([type=range]):focus,
select:focus, textarea:focus {
  border-color: var(--gold);
  background:#fff;
  box-shadow:
    inset 0 1px 2px rgba(46,16,101,.02),
    0 0 0 4px rgba(109,40,217,.18),
    0 4px 14px -4px rgba(109,40,217,.30);
}
input::placeholder, textarea::placeholder{ color:#94A3B8; font-weight:400; }
textarea{ min-height:96px; resize:vertical; }
select{
  appearance:none;
  background-image:
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-position: center, right 14px center;
  background-repeat: no-repeat;
  padding-right:38px;
}
.field{ margin-bottom:14px; }
.field-label{
  display:block;
  font-size:11px; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase;
  color: var(--muted); margin-bottom:8px;
}

/* OTP-style large input */
.otp-input{
  text-align:center;
  font-size:22px !important;
  font-weight:800 !important;
  letter-spacing:14px;
  padding:18px 16px !important;
  color:var(--navy) !important;
}

/* ─── Locked / blurred content for unauthed buyers ─── */
.locked{
  position:relative;
  display:inline-block;
  border-radius:6px;
  user-select:none;
}
.locked > *{
  filter: blur(7px) saturate(80%);
  pointer-events:none;
  opacity:.85;
}
.locked::after{
  content:'🔒';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  border-radius:6px;
  pointer-events:none;
}

/* Full-card locked overlay (sits over a content section) */
.lock-card{
  position:relative;
  overflow:hidden;
}
.lock-card .lock-content{
  filter: blur(10px) saturate(70%);
  pointer-events:none;
  user-select:none;
}
.lock-card .lock-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.55) 100%);
  padding:18px;
}
.lock-overlay-inner{
  text-align:center;
  max-width:340px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:10px;
  padding:22px 24px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 24px 50px -16px rgba(46,16,101,.30);
}
.lock-overlay-inner .lock-ico{
  width:48px; height:48px; border-radius:8px;
  background: linear-gradient(135deg, rgba(109,40,217,.22), rgba(109,40,217,.08));
  color: var(--gold-dark);
  margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px -4px rgba(109,40,217,.30);
}
.lock-overlay-inner h4{
  margin:0 0 6px;
  font-size:16px; font-weight:900; color:var(--navy);
  letter-spacing:-.005em;
}
.lock-overlay-inner p{
  margin:0 0 14px;
  font-size:13px; color: var(--muted); line-height:1.5;
}

/* Search input with icon — icon never overlaps the placeholder */
.search-wrap{ position:relative; }
.search-wrap .si{
  position:absolute;
  left:18px; top:50%; transform:translateY(-50%);
  color:var(--muted-2); pointer-events:none;
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  transition: color .2s;
  z-index:1;
}
.search-wrap input{
  padding-left:52px !important;  /* clear space for the 20px icon at left:18px */
  font-size:15px;
}
.search-wrap:focus-within .si{ color: var(--gold); }

/* ─── Option cards — gradient surface, glassy hover ─── */
.option{
  display:flex; align-items:flex-start; gap:14px;
  padding:18px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  cursor:pointer;
  transition: border-color .25s, transform .25s, box-shadow .25s, background .25s;
  user-select:none;
  text-decoration:none;
  color:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 3px rgba(46,16,101,.03);
}
.option:hover{
  border-color: rgba(109,40,217,.50);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 18px 38px -14px rgba(46,16,101,.20);
}
.option.active{
  border-color: var(--navy);
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px -12px rgba(46,16,101,.22);
}
.option .o-ico{
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background: var(--gold); color: #fff;
}
.option.gold .o-ico{ background: rgba(109,40,217,.14); color: var(--gold-dark); }
.option.green .o-ico{ background: rgba(34,197,94,.12); color: var(--green); }
.option .o-body{ flex:1; min-width:0; }
.option .o-ttl{ font-weight:800; color:var(--navy); font-size:15px; }
.option .o-sub{ color: var(--muted); font-size:13px; line-height:1.4; margin-top:2px; }
.option .o-end{ flex-shrink:0; }

/* ─── Pills / status badges — soft gradients ─── */
.pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:700;
  background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%);
  color:var(--muted);
  white-space:nowrap;
  border:1px solid rgba(226,232,240,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.pill.ok{ background: linear-gradient(180deg, #ECFDF5 0%, #D1FAE5 100%); color:#047857; border-color: rgba(34,197,94,.20); }
.pill.warn{ background: linear-gradient(180deg, #FFFBEB 0%, #FEF3C7 100%); color:#B45309; border-color: rgba(180,83,9,.20); }
.pill.err{ background: linear-gradient(180deg, #FEF2F2 0%, #FEE2E2 100%); color:#B91C1C; border-color: rgba(185,28,28,.20); }
.pill.info{ background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 100%); color:#6D28D9; border-color: rgba(109,40,217,.20); }
.pill.gold{ background: linear-gradient(180deg, #FFF8E2 0%, #FCEFC4 100%); color: var(--gold-dark); border-color: rgba(109,40,217,.30); }
.pill.navy{ background: linear-gradient(180deg, #EEF2F9 0%, #E1E8F2 100%); color: var(--navy); border-color: rgba(46,16,101,.15); }
.pill.dot::before{
  content:''; width:6px; height:6px; border-radius:999px;
  background:currentColor; display:inline-block;
}

/* ─── Section tabs — fluid grid that always fits ─── */
.section-tabs{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:10px;
  margin-bottom:18px;
  padding:2px;
}
.section-tab{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  padding:14px 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1.5px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  text-align:left;
  font-family:inherit;
  transition: border-color .25s, background .25s, transform .25s, box-shadow .25s;
  text-decoration:none;
  color:inherit;
  min-width:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(46,16,101,.03);
}
.section-tab:hover{
  border-color: rgba(109,40,217,.45);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 18px 36px -14px rgba(46,16,101,.20);
}
.section-tab.active{
  border-color: var(--navy);
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 14px 30px -14px rgba(46,16,101,.28);
}
.section-tab .st-row{
  display:flex; align-items:center; gap:10px; width:100%;
  min-width:0;
}
.section-tab .st-ic{
  width:34px; height:34px; border-radius:10px;
  background: linear-gradient(135deg, rgba(46,16,101,.10), rgba(46,16,101,.04));
  color: var(--navy);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.section-tab.active .st-ic{
  background: linear-gradient(135deg, #5B21B6, var(--navy));
  color:#fff;
}
.section-tab .st-check{
  width:22px; height:22px; border-radius:999px;
  background: linear-gradient(135deg, #4ADE80, var(--green));
  color:#fff;
  display:none; align-items:center; justify-content:center;
  margin-left:auto;
  flex-shrink:0;
  box-shadow: 0 4px 10px -2px rgba(34,197,94,.45);
}
.section-tab.active .st-check{ display:flex; }
.section-tab .st-name{
  font-size:14px; font-weight:900; color: var(--navy);
  letter-spacing:-.005em; line-height:1.2;
  width:100%;
  word-break: break-word;
}
.section-tab .st-sub{
  font-size:12px; color: var(--muted);
  line-height:1.3;
  width:100%;
  word-break: break-word;
}
.section-tab:not(.active) .st-name{ color: var(--navy); }
.section-tab:not(.active):hover .st-name{ color: var(--navy); }

@media (max-width: 540px){
  .section-tabs{
    grid-template-columns: repeat(2, 1fr);
    gap:8px;
  }
  .section-tab{ padding:12px 12px; gap:6px; }
  .section-tab .st-sub{ display:none; }
  .section-tab .st-name{ font-size:13px; }
}

/* ─── Section dropdown (LEGACY — kept for any page that still uses it) ─── */
.section-switch{
  position:relative;
  margin-bottom:18px;
}
.section-switch-btn{
  width:100%;
  display:flex; align-items:center; gap:12px;
  background:#fff;
  border:2px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
  cursor:pointer;
  font-family:inherit;
  transition: border-color .2s, box-shadow .2s;
  text-align:left;
}
.section-switch-btn:hover{ border-color: var(--gold); }
.section-switch-btn.open{
  border-color: var(--navy);
  box-shadow:0 0 0 3px rgba(46,16,101,.10);
}
.section-switch-btn .ss-ico{
  width:38px; height:38px; border-radius:10px;
  background: rgba(46,16,101,.06); color: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.section-switch-btn .ss-text{ flex:1; min-width:0; }
.section-switch-btn .ss-lbl{
  font-size:10px; font-weight:800; color:var(--muted-2);
  letter-spacing:.12em; text-transform:uppercase;
}
.section-switch-btn .ss-name{
  font-size:16px; font-weight:900; color:var(--navy);
  letter-spacing:-.005em; margin-top:1px;
}
.section-switch-btn .ss-chev{
  flex-shrink:0;
  width:34px; height:34px; border-radius:10px;
  background: var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s, background .2s, color .2s;
}
.section-switch-btn.open .ss-chev{
  transform:rotate(180deg);
  background: var(--navy); color:#fff;
}

.section-switch-menu{
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:#fff;
  border:2px solid var(--line);
  border-radius:10px;
  box-shadow:0 18px 50px rgba(46,16,101,.18);
  padding:8px;
  z-index:50;
  max-height:0;
  opacity:0; pointer-events:none;
  overflow:hidden;
  transition: max-height .2s, opacity .2s;
}
.section-switch-menu.open{
  max-height:600px; opacity:1; pointer-events:auto; overflow:auto;
}
.section-switch-menu .sm-item{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px;
  border-radius:8px;
  cursor:pointer;
  text-decoration:none; color:inherit;
  transition:background .15s;
  border:none; background:transparent; width:100%;
  font-family:inherit; text-align:left;
}
.section-switch-menu .sm-item:hover{ background:#FAFBFE; }
.section-switch-menu .sm-item.current{ background: var(--tint); }
.section-switch-menu .sm-ico{
  width:36px; height:36px; border-radius:10px;
  background: rgba(46,16,101,.06); color: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.section-switch-menu .sm-item.current .sm-ico{
  background: var(--navy); color:#fff;
}
.section-switch-menu .sm-text{ flex:1; min-width:0; }
.section-switch-menu .sm-ttl{ font-weight:800; color:var(--navy); font-size:14px; }
.section-switch-menu .sm-sub{ font-size:12px; color: var(--muted); margin-top:1px; line-height:1.3; }
.section-switch-menu .sm-check{
  width:22px; height:22px; border-radius:999px; flex-shrink:0;
  background: var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  display:none;
}
.section-switch-menu .sm-item.current .sm-check{ display:flex; }

/* ─── Hero — rich gradient, glass orbs, glow ─── */
.hero{
  background:
    radial-gradient(ellipse 80% 60% at 20% 30%, rgba(109,40,217,.20) 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 80%, rgba(255,255,255,.05) 0%, transparent 60%),
    linear-gradient(135deg, #1a0b3d 0%, var(--navy) 50%, #4C1D95 100%);
  color:#fff;
  border-radius:10px;
  padding:28px 26px;
  position:relative;
  overflow:hidden;
  margin-bottom:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 18px 50px -16px rgba(46,16,101,.45);
  border:1px solid rgba(255,255,255,.06);
}
.hero::before{
  /* Glass orb top right */
  content:'';
  position:absolute; right:-50px; top:-50px;
  width:200px; height:200px; border-radius:50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(109,40,217,.35) 0%, rgba(109,40,217,.06) 60%, transparent 70%);
  pointer-events:none;
  filter: blur(2px);
}
.hero::after{
  content:'';
  position:absolute; right:-80px; bottom:-80px;
  width:280px; height:280px; border-radius:50%;
  background:
    radial-gradient(circle at 70% 30%, rgba(109,40,217,.20) 0%, transparent 65%);
  pointer-events:none;
}
.hero > *{ position:relative; z-index:1; }
.hero h1{
  margin:0; color:#fff;
  font-size:24px; font-weight:900;
  letter-spacing:-.01em;
}
.hero p{
  margin:8px 0 0;
  color: rgba(255,255,255,.75);
  font-size:14px; line-height:1.55;
}
.hero .eyebrow{
  color: var(--gold-light); margin-bottom:8px;
}
.hero-row{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:14px; position:relative; z-index:1;
}

/* Steps (clean, like sell.html .stepper) */
.steps{
  display:flex; align-items:flex-start; gap:0;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:10px;
  padding:18px 16px; margin-bottom:18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 3px rgba(46,16,101,.04),
    0 10px 22px -10px rgba(46,16,101,.10);
  overflow:auto;
}
.step{
  flex:1; min-width:90px;
  display:flex; flex-direction:column; align-items:center;
  text-align:center; position:relative; padding:0 4px;
}
.step:not(:last-child)::after{
  content:''; position:absolute;
  left:calc(50% + 16px); right:calc(-50% + 16px);
  top:14px; height:2px; background: var(--border);
}
.step.done::after{ background: var(--green); }
.step.current::after{ background: linear-gradient(90deg, var(--green), var(--border)); }
.step .dot{
  width:32px; height:32px; border-radius:50%;
  border:2px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
  color:var(--muted-2);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px;
  position:relative; z-index:1;
  box-shadow: 0 2px 6px rgba(46,16,101,.06);
}
.step.done .dot{
  background: linear-gradient(180deg, #4ADE80 0%, var(--green) 100%);
  border-color: var(--green); color:#fff;
  box-shadow: 0 4px 12px -2px rgba(34,197,94,.45);
}
.step.current .dot{
  background: linear-gradient(180deg, #5B21B6 0%, var(--navy) 100%);
  border-color: var(--navy); color:#fff;
  box-shadow:
    0 0 0 4px rgba(46,16,101,.12),
    0 4px 12px -2px rgba(46,16,101,.40);
}
.step .lbl{
  font-size:11px; font-weight:800; color:var(--navy);
  margin-top:8px; line-height:1.25;
}
.step:not(.done):not(.current) .lbl{ color: var(--muted-2); }

/* ─── Stat tiles — gradient + hover lift ─── */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:18px;
}
.stat{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:10px;
  padding:16px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 1px 3px rgba(46,16,101,.04),
    0 8px 18px -8px rgba(46,16,101,.08);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.stat:hover{
  transform: translateY(-2px);
  border-color: rgba(109,40,217,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 14px 28px -10px rgba(46,16,101,.18);
}
.stat .l{
  font-size:11px; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase; color:var(--muted-2);
}
.stat .v{
  font-size:26px; font-weight:900; color:var(--navy);
  margin-top:4px; line-height:1.1; letter-spacing:-.015em;
}
.stat .s{ font-size:12px; color:var(--muted); margin-top:4px; }
.stat.gold{
  background: linear-gradient(180deg, #F5F3FF 0%, #EDE9FE 100%);
  border-color: rgba(109,40,217,.30);
}
.stat.gold .v{ color: var(--gold-dark); }

/* ─── Property cards — glassy, dramatic hover, gradient ─── */
.prop-card{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:10px;
  overflow:hidden;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s;
  text-decoration:none; color:inherit;
  display:block;
  cursor:pointer;
  position:relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 1px 3px rgba(46,16,101,.04),
    0 14px 30px -14px rgba(46,16,101,.12);
}
.prop-card:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.prop-card::after{
  /* gold glow on hover */
  content:'';
  position:absolute; inset:0;
  border-radius:10px;
  pointer-events:none;
  box-shadow: 0 0 0 0 rgba(109,40,217,0);
  transition: box-shadow .35s;
}
.prop-card:hover{
  transform: translateY(-6px);
  border-color: rgba(109,40,217,.45);
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 4px 12px rgba(46,16,101,.05),
    0 32px 60px -18px rgba(46,16,101,.25);
}
.prop-card:hover::after{ box-shadow: 0 0 0 4px rgba(109,40,217,.10); }

.prop-card .img{
  height:220px; position:relative; overflow:hidden;
  background:#E2E8F0;
}
.prop-card .img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s;
}
.prop-card:hover .img img{ transform: scale(1.06); }
.prop-card .img .fade{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(46,16,101,.10) 0%, transparent 30%, transparent 55%, rgba(46,16,101,.55) 100%);
}
.prop-card .img .badges{
  position:absolute; left:14px; top:14px;
  display:flex; gap:6px;
}
.prop-card .img .price{
  position:absolute; right:14px; top:14px;
}
.prop-card .img .price .pill{
  background: rgba(255,255,255,.85);
  color: var(--navy);
  font-weight:900;
  padding:8px 12px;
  font-size:13px;
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 8px 20px rgba(46,16,101,.18);
}

/* Glass info strip at bottom of image */
.prop-card .img .glass-info{
  position:absolute; left:14px; right:14px; bottom:14px;
  display:none;
  padding:10px 14px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.55);
  border-radius:8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 30px rgba(46,16,101,.18);
}
.prop-card .img .glass-info .ttl{
  color:var(--navy); font-weight:900; font-size:15px; letter-spacing:-.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prop-card .img .glass-info .meta{
  color:var(--muted); font-size:12px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.prop-card .body{
  padding:18px 20px 20px;
}
.prop-card .ttl{
  font-size:18px; font-weight:900; color:var(--navy);
  letter-spacing:-.01em; line-height:1.25;
}
.prop-card .meta{
  font-size:13px; color:var(--muted); margin-top:4px;
}
.prop-card .specs{
  display:flex; gap:0; margin-top:14px;
  padding:10px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.prop-card .specs > div{
  flex:1;
  text-align:center;
  border-right:1px solid var(--line);
  padding:0 4px;
}
.prop-card .specs > div:last-child{ border-right:none; }
.prop-card .specs .lbl{
  font-size:10px; font-weight:800; letter-spacing:.10em;
  text-transform:uppercase; color:var(--muted-2);
}
.prop-card .specs .val{
  font-size:13px; font-weight:800; color:var(--navy);
  margin-top:2px;
}
.prop-card .actions{
  display:flex; gap:8px; margin-top:14px;
}
.prop-card .actions .btn{ flex:1; }

/* ─── Activity / offer rows — gradient + lift ─── */
.row-item{
  display:flex; gap:14px; align-items:center;
  padding:14px 16px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1.5px solid var(--line);
  border-radius:8px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
  text-decoration:none; color:inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 2px rgba(46,16,101,.02);
}
.row-item:hover{
  border-color: rgba(109,40,217,.50);
  transform: translateX(3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 14px 26px -12px rgba(46,16,101,.16);
}
.row-item .thumb{
  width:56px; height:56px; border-radius:8px;
  object-fit:cover; flex-shrink:0; background:#E2E8F0;
}
.row-item .col{ flex:1 1 0; min-width:0; }
.row-item .col .ttl{ word-break:break-word; }
.row-item .col .sub{ word-break:break-word; }
.row-item .end{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex-shrink:0; min-width:0; }
.row-item .end .pill{ max-width:100%; white-space:normal; text-align:center; }
@media (max-width: 640px){
  .row-item{ flex-wrap:wrap; row-gap:10px; padding:14px; }
  .row-item .end{
    flex-basis:100%;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap:8px;
    padding-top:10px;
    border-top:1px dashed var(--line);
    flex-wrap:wrap;
  }
  .row-item .end .btn{ flex:1 1 auto; min-width:0; }
}
.row-item .ttl{ font-weight:800; color:var(--navy); font-size:14.5px; line-height:1.25; }
.row-item .sub{ color:var(--muted); font-size:12.5px; margin-top:2px; }
.row-item .end{ flex-shrink:0; }

/* ─── Banner ─── */
.banner{
  display:flex; align-items:flex-start; gap:14px;
  padding:16px 18px;
  border-radius:8px;
  border:2px solid var(--line);
  background:#fff;
}
.banner .ic{
  width:42px; height:42px; border-radius:8px;
  background: rgba(109,40,217,.14); color: var(--gold-dark);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.banner.ok{ background:#F0FDF4; border-color:#BBF7D0; }
.banner.ok .ic{ background: rgba(34,197,94,.15); color: var(--green); }
.banner.warn{ background:#FFFBEB; border-color:#FDE68A; }
.banner.warn .ic{ background: rgba(180,83,9,.12); color:#B45309; }
.banner.err{ background:#FEF2F2; border-color:#FECACA; }
.banner.err .ic{ background: rgba(185,28,28,.12); color:#B91C1C; }
.banner .body b{ display:block; color:var(--navy); font-size:14px; font-weight:800; margin-bottom:2px; }
.banner .body span{ display:block; font-size:13px; color:var(--muted); line-height:1.5; }

/* ─── Toast ─── */
#toast{
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(24px);
  background:#1E293B; color:#fff;
  padding:12px 22px; border-radius:999px;
  font-size:14px; font-weight:500;
  z-index:9999; opacity:0;
  transition: opacity .25s, transform .25s;
  white-space:nowrap; pointer-events:none;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── Modal ─── */
.modal-bg{
  position:fixed; inset:0;
  background:rgba(26,11,61,.45);
  display:none; align-items:center; justify-content:center;
  z-index:300; padding:18px;
}
.modal-bg.open{ display:flex; }
.modal{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(255,255,255,.85);
  border-radius:10px;
  max-width:520px; width:100%; max-height:88vh;
  overflow:auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 40px 100px rgba(26,11,61,.40),
    0 0 0 1px rgba(46,16,101,.04);
  animation: modalIn .25s ease-out;
}
@keyframes modalIn { from { opacity:0; transform:translateY(20px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
.modal .mh{
  padding:18px 22px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.modal .mh h3{ margin:0; font-size:17px; font-weight:900; color:var(--navy); }
.modal .mb{ padding:22px; }
.modal .mf{
  padding:16px 22px; border-top:1px solid var(--line);
  display:flex; gap:10px; justify-content:flex-end;
}

/* ─── Time slot picker ─── */
.slot-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:8px;
}
.slot{
  border:1.5px solid var(--border);
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border-radius:8px;
  padding:12px 8px;
  font-size:14px; font-weight:700; color:var(--navy);
  font-family:inherit;
  cursor:pointer; text-align:center;
  transition: all .2s;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 3px rgba(46,16,101,.04);
}
.slot:hover{
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px -8px rgba(109,40,217,.30);
}
.slot.on{
  background: linear-gradient(180deg, #4C1D95 0%, var(--navy) 100%);
  border-color: var(--navy);
  color:#fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.15),
    0 8px 20px -4px rgba(46,16,101,.45);
}

/* ─── Sticky footer button bar (sell.html-style) ─── */
.action-bar{
  position:sticky;
  bottom:0;
  background:#fff;
  border-top:1px solid var(--line);
  margin:24px -20px -60px;
  padding:14px 20px;
  box-shadow:0 -4px 20px rgba(0,0,0,.06);
}
.action-bar-inner{
  max-width:720px; margin:0 auto;
  display:flex; gap:10px;
}
.action-bar .btn{ flex:1; }

/* ─── Helpers ─── */
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.row.between{ justify-content:space-between; }
.row.end{ justify-content:flex-end; }
.col-stack{ display:flex; flex-direction:column; gap:14px; }
.grid-2{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:14px;
}
.muted{ color: var(--muted); }
.small{ font-size:12px; }
.hr{ height:1px; background: var(--line); border:0; margin:18px 0; }
.tiny{ font-size:11px; }

/* Empty state */
.empty{
  text-align:center;
  padding:40px 22px;
  background:#fff;
  border:2px dashed var(--border);
  border-radius:10px;
}
.empty .ico{
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:10px;
  background: rgba(46,16,101,.05); color: var(--navy);
  display:flex; align-items:center; justify-content:center;
}
.empty b{ display:block; color:var(--navy); font-size:16px; font-weight:900; margin-bottom:6px; }
.empty span{ color:var(--muted); font-size:13.5px; line-height:1.5; }
.empty .e-action{ margin-top:18px; display:inline-flex; }

/* Filter panel */
.filter-toggle{
  display:flex; align-items:center; gap:12px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
  cursor:pointer;
  font-family:inherit;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  width:100%;
  text-align:left;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 1px 3px rgba(46,16,101,.04);
}
.filter-toggle:hover{
  border-color: var(--gold);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 10px 22px -8px rgba(109,40,217,.25);
}
.filter-toggle.open{ border-color: var(--navy); }
.filter-toggle .ft-ic{
  width:36px; height:36px; border-radius:10px;
  background: rgba(46,16,101,.06); color: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.filter-toggle .ft-text{ flex:1; min-width:0; }
.filter-toggle .ft-lbl{
  font-size:10px; font-weight:800; color:var(--muted-2);
  letter-spacing:.12em; text-transform:uppercase;
}
.filter-toggle .ft-val{
  font-size:15px; font-weight:800; color:var(--navy);
  margin-top:1px;
}
.filter-toggle .ft-chev{
  width:30px; height:30px; border-radius:8px;
  background: var(--line); color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s;
}
.filter-toggle.open .ft-chev{ transform: rotate(180deg); background: var(--navy); color:#fff; }
.filter-panel{
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border:1px solid rgba(226,232,240,.7);
  border-radius:10px;
  padding:0 18px;
  max-height:0;
  overflow:hidden;
  transition: max-height .25s, padding .15s, margin-top .15s;
  margin-top:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 12px 28px -12px rgba(46,16,101,.12);
}
.filter-panel.open{
  max-height:640px;
  padding:18px;
  margin-top:10px;
}

/* Tabs (kept for back-compat, but the user wants dropdowns) */
.tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); overflow:auto; }
.tab{ padding:10px 14px; font-size:13px; font-weight:800; color:var(--muted); background:transparent; border:0; cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; }
.tab.on{ color:var(--navy); border-bottom-color: var(--gold); }

/* Small responsive helpers */
@media (max-width: 640px){
  .h1{ font-size:22px; }
  .h2{ font-size:18px; }
  .hero{ padding:22px 20px; }
  .hero h1{ font-size:21px; }
  .icon-box{ width:52px; height:52px; }
  .prop-card .img{ height:180px; }
  .stat-row{ grid-template-columns: repeat(2, 1fr); }
  /* Card spec strip wraps to 2 rows so labels never get cut off */
  .prop-card .specs{ flex-wrap:wrap; }
  .prop-card .specs > div{ flex: 1 1 33%; padding:6px 0; }
  /* grid-2 stacks on mobile */
  .grid-2{ grid-template-columns:1fr; }
  /* MOU options never side-by-side on mobile */
  .mou-opt.recommended{ transform:none; }
  /* Row-item end column buttons wrap below content on narrow screens — already handled in .row-item rules above */
}
@media (max-width: 480px){
  .hero{ padding:20px 18px; border-radius:10px; }
  .hero h1{ font-size:20px; line-height:1.2; }
  .hero p{ font-size:13px; }
  .section-card{ padding:20px 18px; border-radius:10px; }
  .card{ padding:18px; border-radius:10px; }
  .btn{ font-size:14px; padding:13px 16px; min-height:46px; }
  .btn-lg{ font-size:15px; padding:15px 18px; }
  .stat .v{ font-size:22px; }
  .icon-box{ width:48px; height:48px; margin-bottom:14px; }
  .icon-box svg{ width:24px; height:24px; }
  /* Row-item buttons in .end shouldn't wrap on a single line — let them go full width on narrow screens */
  .row-item .end .btn{ font-size:12px; padding:8px 12px; min-height:34px; }
}

/* Touch targets: ensure tappable on mobile */
@media (max-width: 768px){
  .btn-sm{ min-height:36px; }
  .b-bell{ width:40px; height:40px; }
}

/* ────────────────────────────────────────────────────────────
   BUYER browsable layout — top-nav, no sidebar.
   PDF spec: "buyer experience should feel like a browsable
   property website, not a complex portal."
   ──────────────────────────────────────────────────────────── */
.b-app-buyer{ display:block; min-height:100vh; background:#F7F8FC; }
.b-app-buyer .b-body-flat{
  flex:1; padding:24px 20px 64px; width:100%;
}
.b-app-buyer .b-content{
  width:100%; max-width:1080px; margin:0 auto;
}
.b-topbar{
  background:#2E1065;
  border-bottom:1px solid rgba(46,16,101,.9);
  position:sticky; top:0; z-index:90;
  box-shadow:0 2px 8px rgba(46,16,101,.18);
}
.b-topbar-inner{
  max-width:1180px; margin:0 auto;
  padding:12px 24px;
  display:flex; align-items:center; gap:24px;
}
.b-brand{ display:inline-flex; align-items:center; text-decoration:none; flex-shrink:0; }
.b-brand img{ height:32px; width:auto; }
.b-topnav{ display:flex; align-items:center; gap:6px; margin-left:8px; }
.b-topnav-link{
  font-size:14px; font-weight:700; color:rgba(255,255,255,.78);
  padding:8px 14px; border-radius:10px;
  text-decoration:none;
  transition:background .15s, color .15s;
}
.b-topnav-link:hover{ background:rgba(255,255,255,.10); color:#fff; }
.b-topnav-link.active{ background:rgba(109,40,217,.22); color:#fff; }
.b-topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; }
.b-avatar{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(135deg,#6D28D9,#E0B856); color:#2E1065;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:900; font-size:13px;
}
.b-signbtn{
  font-size:13px; font-weight:800; color:rgba(255,255,255,.85);
  padding:8px 14px; border-radius:10px;
  background:transparent; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none;
}
.b-signbtn:hover{ background:rgba(255,255,255,.10); color:#fff; }
.b-signbtn-primary{
  background:#6D28D9; color:#2E1065; border-color:#6D28D9;
}
.b-signbtn-primary:hover{ background:#E0B856; color:#2E1065; border-color:#E0B856; }

@media (max-width:720px){
  .b-topbar-inner{ padding:10px 14px; gap:10px; }
  .b-topnav{ gap:0; }
  .b-topnav-link{ padding:6px 10px; font-size:13px; }
  .b-app-buyer .b-body-flat{ padding:18px 14px 56px; }
}