/* ============================================================
   Chumba — shared stylesheet (feed · profile · terms)
   Brand tokens per Build Plan §2
   ============================================================ */
:root{
  --brand:#298FBB; --brand-600:#227AA1; --brand-700:#1F6E90; --brand-050:#E8F3F8;
  --accent:#E58226; --accent-600:#CE7018; --accent-700:#B0600F;
  --bg:#0B1015; --surface:#16202A; --surface-2:#1E2A36; --border:#2A3947;
  --text:#FFFFFF; --text-muted:#B9C4CE; --text-dim:#7C8B98;
  --paper:#FFFFFF; --paper-2:#F4F7F9; --ink:#0E1B24; --ink-muted:#5A6B78; --line:#E4EBEF;
  --success:#22C55E; --danger:#EF4444; --star:#F5B301;
  --nav:64px; --contact:50px;
  --ff:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs:"DM Serif Display",Georgia,serif;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--ff);
  background:radial-gradient(120% 80% at 50% -10%,#101a24 0%,#070b0f 55%,#05080b 100%);
  color:var(--text);
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;min-height:100dvh;overflow:hidden;
}
img{max-width:100%}
button{font-family:inherit}

.stage{display:flex;flex-direction:column;align-items:center;gap:0}
.stage-note{display:none}

/* ---- web: clean wide app viewport (no phone skin) ---- */
.phone{
  position:relative;
  height:min(940px,97vh); height:min(940px,97dvh); width:min(560px,96vw);
  background:var(--bg);border-radius:14px;overflow:hidden;
  box-shadow:0 24px 70px -22px rgba(0,0,0,.7);
}
.notch{display:none}
.app{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.app.light{background:var(--paper-2);color:var(--ink)}
/* stacked pages (header + scroll list + nav) — robust flex column */
.app.stack{display:flex;flex-direction:column}
.app.stack>.mlist,.app.stack>.ulist,.app.stack>.sscroll,.app.stack>.tscroll{flex:1 1 auto;min-height:0;height:auto}
.app.stack>.locpill{align-self:flex-start}

/* ======================= LOGO (reproduces CHUMBA.co.ke wordmark) ======================= */
.logo{position:relative;display:inline-flex;align-items:baseline;font-weight:700;letter-spacing:.005em;line-height:1;font-size:20px;white-space:nowrap}
.logo .w{color:var(--brand)}
.logo .tld{font-size:.52em;font-weight:600;color:var(--brand-600);margin-left:1px;letter-spacing:0}
.logo .w .a{position:relative}
.logo .w .a::after{content:"";position:absolute;left:50%;bottom:.12em;transform:translateX(-50%);width:.17em;height:.17em;background:var(--accent);border-radius:1px}
.logo .px{position:absolute;top:-.44em;left:1.02em;width:.9em;height:.62em;pointer-events:none}
.logo .px i{position:absolute;background:var(--accent);border-radius:1px}
.logo .px i:nth-child(1){width:.2em;height:.2em;left:0;bottom:0;opacity:1}
.logo .px i:nth-child(2){width:.16em;height:.16em;left:.26em;bottom:.16em;opacity:.9}
.logo .px i:nth-child(3){width:.13em;height:.13em;left:.5em;bottom:.34em;opacity:.7}
.logo .px i:nth-child(4){width:.1em;height:.1em;left:.72em;bottom:.5em;opacity:.5}
.logo.light .w{color:#fff}
.logo.light .tld{color:var(--text-muted)}
.logo.sm{font-size:17px}
.logo.lg{font-size:27px}
/* uploaded brand logo (admin → Branding) replaces the wordmark where present */
.brandlogo{display:inline-block;object-fit:contain;max-width:74vw;vertical-align:middle}
.brandlogo-lg{height:46px}
.brandlogo-sm{height:26px}
.splash .brandlogo{height:62px;animation:logoIn .6s cubic-bezier(.2,.8,.2,1) both}

/* ======================= SIDE DRAWER (TikTok-style) ======================= */
.drawer{position:absolute;top:0;left:0;bottom:0;width:80%;max-width:310px;z-index:90;
  background:var(--surface);transform:translateX(-102%);transition:transform .32s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column;box-shadow:8px 0 40px rgba(0,0,0,.5);padding-top:env(safe-area-inset-top)}
.drawer.open{transform:translateX(0)}
.drawer .dh{padding:26px 20px 18px;border-bottom:1px solid var(--border);display:flex;gap:13px;align-items:center;cursor:pointer}
.drawer .dh img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--brand)}
.drawer .dh .nm{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px;color:#fff}
.drawer .dh .h{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.drawer .dstats{display:flex;gap:18px;padding:14px 20px;border-bottom:1px solid var(--border)}
.drawer .dstats div{color:var(--text-muted);font-size:12px}
.drawer .dstats b{display:block;color:#fff;font-size:15px;font-weight:700}
.dmenu{flex:1;overflow-y:auto;padding:8px 0;scrollbar-width:none}
.dmenu::-webkit-scrollbar{display:none}
.di{display:flex;align-items:center;gap:14px;padding:13px 20px;color:var(--text-muted);font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none}
.di:hover{background:var(--surface-2);color:#fff}
.di svg{width:21px;height:21px;flex:0 0 auto;color:var(--text-dim)}
.di.accent svg{color:var(--accent)}
.dsep{height:1px;background:var(--border);margin:8px 20px}
.dfoot{padding:14px 20px 20px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:6px 14px}
.dfoot a{font-size:12px;color:var(--text-dim);text-decoration:none}
.dfoot a:hover{color:var(--brand)}

/* generic dark scrim behind drawer/sheets */
.scrim-bg{position:absolute;inset:0;z-index:65;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.3s}
.scrim-bg.on{opacity:1;pointer-events:auto}
.scrim-bg.z{z-index:85}

/* ======================= TOP BAR / BELL ======================= */
.icon-btn{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(22,32,42,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.08);color:#fff;cursor:pointer;position:relative}
.icon-btn svg{width:19px;height:19px}
.light .icon-btn{background:var(--paper);border-color:var(--line);color:var(--ink);box-shadow:0 1px 4px rgba(14,27,36,.06)}
.badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg)}
.light .badge{border-color:var(--paper-2)}

/* ======================= BOTTOM NAV (shared) ======================= */
.nav{position:absolute;left:0;right:0;bottom:0;height:calc(var(--nav) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);z-index:40;display:flex;align-items:center;justify-content:space-around;background:rgba(9,13,17,.86);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.06)}
.light .nav{background:rgba(255,255,255,.94);border-top:1px solid var(--line)}
.nv{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--text-dim);font-size:10px;font-weight:500;cursor:pointer;flex:1;background:none;border:none;text-decoration:none}
.nv svg{width:23px;height:23px}
.nv.on{color:#fff}
.light .nv.on{color:var(--ink)}
.nv.post{margin-top:-26px;flex:0 0 auto}
.nv.post .pcirc{width:52px;height:52px;border-radius:18px;background:linear-gradient(150deg,var(--accent),var(--accent-700));display:grid;place-items:center;box-shadow:0 10px 24px -6px rgba(229,130,38,.7),0 0 0 5px rgba(11,16,21,.9);transition:transform .18s}
.light .nv.post .pcirc{box-shadow:0 10px 24px -6px rgba(229,130,38,.6),0 0 0 5px rgba(244,247,249,.95)}
.nv.post:active .pcirc{transform:scale(.9)}
.nv.post .pcirc svg{width:27px;height:27px;stroke-width:2.4;color:#fff}
.nv.post span{color:var(--accent);font-weight:600;margin-top:2px}

/* ======================= BOTTOM SHEETS (shared) ======================= */
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:88;background:var(--surface);border-radius:22px 22px 0 0;transform:translateY(101%);transition:transform .34s cubic-bezier(.32,.72,0,1);max-height:76%;display:flex;flex-direction:column;box-shadow:0 -12px 40px rgba(0,0,0,.5)}
.light .sheet{background:var(--paper)}
.sheet.up{transform:translateY(0)}
.sheet .grab{width:38px;height:4px;border-radius:3px;background:var(--border);margin:9px auto 4px}
.sheet .sh-head{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 12px;border-bottom:1px solid var(--border)}
.light .sheet .sh-head{border-color:var(--line)}
.sheet .sh-head h4{font-size:15px;font-weight:700;color:#fff}
.light .sheet .sh-head h4{color:var(--ink)}
.sheet .sh-head .x{width:30px;height:30px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;cursor:pointer;color:var(--text-muted)}
.light .sheet .sh-head .x{background:var(--paper-2);color:var(--ink-muted)}

/* settings / notifications list rows */
.rows{flex:1;min-height:0;overflow-y:auto;padding:6px 0;scrollbar-width:none}
.rows::-webkit-scrollbar{display:none}
.row{display:flex;align-items:center;gap:14px;padding:13px 20px;color:var(--text-muted);font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none}
.light .row{color:var(--ink)}
.row:hover{background:var(--surface-2)}
.light .row:hover{background:var(--paper-2)}
.row svg{width:20px;height:20px;color:var(--text-dim);flex:0 0 auto}
.row .chev{margin-left:auto;color:var(--text-dim)}
.row.danger{color:var(--danger)}.row.danger svg{color:var(--danger)}

.notif{display:flex;gap:12px;padding:13px 18px;border-bottom:1px solid rgba(42,57,71,.5);align-items:flex-start}
.notif img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.notif .nt{flex:1;font-size:13.5px;color:var(--text-muted);line-height:1.45}
.notif .nt b{color:#fff;font-weight:600}
.notif .nt .t{display:block;color:var(--text-dim);font-size:11.5px;margin-top:3px}
.notif .thumb{width:42px;height:42px;border-radius:8px;object-fit:cover;flex:0 0 auto}
.notif.unread{background:rgba(41,143,187,.06)}

/* ======================= TOAST ======================= */
.toast{position:absolute;left:50%;bottom:calc(var(--nav) + 22px);transform:translateX(-50%) translateY(20px);z-index:95;background:var(--surface-2);border:1px solid var(--border);color:#fff;font-size:13px;font-weight:500;padding:10px 18px;border-radius:22px;opacity:0;transition:.3s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:80%;text-align:center}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}

/* ============================================================
   FEED PAGE
   ============================================================ */
.feed{height:100%;overflow-y:scroll;overflow-x:hidden;scroll-snap-type:y mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.feed::-webkit-scrollbar{display:none}
.ptr{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:50%;transform:translate(-50%,-46px);z-index:40;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);border:1px solid var(--border);box-shadow:0 6px 18px rgba(0,0,0,.45);opacity:0;pointer-events:none}
.ptr-spin{width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.25);border-top-color:#fff}
.ptr.ready{border-color:var(--brand,#E58226)}
.ptr.spin .ptr-spin{animation:ptrspin .7s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
.card{position:relative;height:100%;width:100%;scroll-snap-align:start;scroll-snap-stop:always;overflow:hidden;background:#000}
.media{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.media::-webkit-scrollbar{display:none}
.media img{min-width:100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;user-select:none;-webkit-user-drag:none;pointer-events:none}
.scrim-t{position:absolute;top:0;left:0;right:0;height:220px;background:linear-gradient(180deg,rgba(5,8,11,.82),rgba(5,8,11,0));z-index:5;pointer-events:none}
.scrim-b{position:absolute;bottom:0;left:0;right:0;height:64%;background:linear-gradient(0deg,rgba(5,8,11,.94) 6%,rgba(5,8,11,.72) 34%,rgba(5,8,11,0) 100%);z-index:5;pointer-events:none}
.dots{display:flex;gap:5px;justify-content:center;margin-top:8px}
.dots i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.4);transition:.25s}
.dots i.on{background:#fff;width:22px}
.burst{position:absolute;inset:0;display:grid;place-items:center;z-index:20;pointer-events:none}
.burst svg{width:120px;height:120px;opacity:0;transform:scale(.3)}
.burst.go svg{animation:burst .8s ease}
@keyframes burst{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1.15)}30%{transform:scale(.95)}45%{transform:scale(1.05)}100%{opacity:0;transform:scale(1.2)}}

/* single compact row: menu · tabs (top) · bell · search */
.topbar{position:absolute;top:0;left:0;right:0;z-index:30;padding:calc(env(safe-area-inset-top) + 9px) 10px 0;display:flex;align-items:center;gap:7px}
.topbar .icon-btn{flex:0 0 auto;width:36px;height:36px}
.tabs{flex:1;min-width:0;display:flex;gap:15px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 90%,transparent)}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;font-size:14.5px;font-weight:600;color:var(--text-muted);white-space:nowrap;padding:2px 0 8px;cursor:pointer;transition:.2s;flex:0 0 auto}
.tab.on{color:#fff}
.tab.on::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2.5px;border-radius:2px;background:var(--accent)}

/* topbar: horizontal category chip row + openable search (marketplace-style, not a tab strip) */
.catrow{flex:1;min-width:0;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 92%,transparent)}
.catrow::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:rgba(22,32,42,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);color:var(--text-muted);font-family:var(--ff);font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:.15s}
.chip:active{transform:scale(.95)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.light .chip{background:var(--paper);border-color:var(--line);color:var(--ink-muted)}
.light .chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
/* two-tier header: brand + location (row 1) / location pill + chips (row 2) */
.topbar.tb2{flex-direction:column;align-items:stretch;gap:9px}
.tbrow{display:flex;align-items:center;gap:9px}
.brandmark{text-decoration:none;flex:0 0 auto;line-height:1}
.tbicons{margin-left:auto;display:flex;align-items:center;gap:7px;flex:0 0 auto}
.tbfilters{display:flex;align-items:center;gap:9px}
.tbfilters .locwrap{flex:1 1 0;min-width:0}
.tbfilters .locbtn{width:100%;max-width:none;justify-content:space-between}
.tbfilters .locwrap:last-child .locmenu{left:auto;right:0}
.locwrap{position:relative;flex:0 0 auto}
.locbtn{display:flex;align-items:center;gap:6px;min-height:36px;background:rgba(22,32,42,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);color:#fff;font-family:var(--ff);font-size:13.5px;font-weight:700;padding:0 12px;border-radius:18px;cursor:pointer;max-width:46vw}
.locbtn>svg:first-child{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.locbtn #locLabel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.locbtn .chev{width:14px;height:14px;flex:0 0 auto;opacity:.8;transition:transform .2s}
.locbtn.open .chev{transform:rotate(180deg)}
.light .locbtn{background:var(--paper);border-color:var(--line);color:var(--ink)}
.locmenu{position:absolute;top:calc(100% + 8px);left:0;min-width:200px;max-height:60vh;overflow-y:auto;background:var(--surface-2);border:1px solid var(--border);border-radius:15px;padding:6px;box-shadow:0 18px 44px rgba(0,0,0,.55);display:none;flex-direction:column;gap:2px;scrollbar-width:none;z-index:40}
.locmenu::-webkit-scrollbar{display:none}
.locmenu.show{display:flex;animation:catpop .16s ease}
@keyframes catpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.locitem{text-align:left;background:none;border:none;color:var(--text-muted);font-family:var(--ff);font-size:14px;font-weight:600;padding:10px 13px;border-radius:10px;cursor:pointer;white-space:nowrap}
.locitem:hover{background:rgba(255,255,255,.05);color:#fff}
.locitem.on{background:var(--accent);color:#fff}
/* searchable location dropdown (counties + areas), mirrors the Explore picker */
.locmenu-search{min-width:min(300px,86vw);max-width:86vw;max-height:64vh}
.locsearch{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 11px;margin-bottom:6px}
.locsearch svg{width:16px;height:16px;stroke:var(--text-dim);flex:0 0 auto}
.locsearch input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fff;font-family:var(--ff);font-size:14px}
.locsearch input::placeholder{color:var(--text-dim)}
.locmenu-search .locrows{display:flex;flex-direction:column;gap:2px;max-height:52vh;overflow-y:auto;scrollbar-width:none}
.locmenu-search .locrows::-webkit-scrollbar{display:none}
.locmenu .locrow{display:flex;align-items:center;gap:8px}
.areasub{color:var(--text-dim);font-size:12px;font-weight:500}
/* location picker button + light dropdown (Post form) */
.locpick{display:flex;align-items:center;justify-content:space-between;gap:8px;cursor:pointer;text-align:left}
.locpick>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.locpick .ph{color:var(--ink-muted)}
.locpick .chev{width:16px;height:16px;flex:0 0 auto;opacity:.55;transition:transform .2s}
.locpick.open .chev{transform:rotate(180deg)}
.light .locmenu{background:var(--paper);border-color:var(--line);box-shadow:0 18px 44px rgba(0,0,0,.18)}
.light .locsearch{background:var(--paper-2);border-color:var(--line)}
.light .locsearch input{color:var(--ink)}
.light .locsearch input::placeholder{color:var(--ink-muted)}
.light .locsearch svg{stroke:var(--ink-muted)}
.light .locmenu .locitem{color:var(--ink)}
.light .locmenu .locitem:hover{background:var(--paper-2)}
.light .locmenu .locitem.on{background:var(--accent);color:#fff}
.light .locmenu .areasub{color:var(--ink-muted)}
/* unified segmented filter bar (location · category) */
.filterbar{position:relative;flex:1;min-width:0;display:flex;align-items:center;height:36px;background:rgba(20,29,38,.62);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.13);border-radius:18px;box-shadow:0 4px 16px rgba(0,0,0,.22)}
.fseg{flex:1 1 0;min-width:0;height:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:none;color:#fff;font-family:var(--ff);font-size:13.5px;font-weight:600;padding:0 12px;cursor:pointer;white-space:nowrap;border-radius:18px}
.fseg span{overflow:hidden;text-overflow:ellipsis}
.fseg .pin,.fseg .grid{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.fseg .chev{width:13px;height:13px;flex:0 0 auto;opacity:.75;transition:transform .2s}
.fseg.open .chev{transform:rotate(180deg)}
.fseg:active{background:rgba(255,255,255,.06)}
.fdiv{width:1px;height:18px;flex:0 0 auto;background:rgba(255,255,255,.16)}
.light .filterbar{background:var(--paper);border-color:var(--line)}
.light .fseg{color:var(--ink)}
.filterbar .locmenu{top:calc(100% + 9px)}
#locMenu{left:0;right:auto}
#catMenu{left:auto;right:0}
/* solid top navbar — opaque surface so the filters read cleanly over any photo */
.topbar.solidnav{background:var(--surface);border-bottom:1px solid var(--border);padding:calc(env(safe-area-inset-top) + 8px) 8px 8px;gap:6px}
.solidnav .icon-btn{background:none;border:none;box-shadow:none;width:38px;height:38px;color:var(--text)}
.solidnav .icon-btn:active{background:rgba(255,255,255,.07)}
.nav-spacer{flex:1;min-width:0}
.dd{position:relative;flex:0 0 auto;min-width:0}
.navdd{display:flex;align-items:center;gap:5px;height:34px;background:var(--surface-2);border:1px solid var(--border);color:var(--text);font-family:var(--ff);font-size:13px;font-weight:600;padding:0 9px;border-radius:10px;cursor:pointer;white-space:nowrap}
/* fixed widths so the button size never depends on the selected label (label truncates instead) */
#locBtn{width:min(122px,34vw)}
#catBtn{width:min(92px,25vw)}
.navdd span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:left}
.navdd .pin,.navdd .grid{width:15px;height:15px;flex:0 0 auto;color:var(--accent)}
.navdd .chev{width:13px;height:13px;flex:0 0 auto;opacity:.7;transition:transform .2s}
.navdd.open .chev{transform:rotate(180deg)}
.navdd:active{background:var(--surface)}
.dd .locmenu{top:calc(100% + 8px)}
.light .topbar.solidnav{background:var(--paper);border-color:var(--line)}
.light .solidnav .icon-btn{color:var(--ink)}
.light .navdd{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
.searchbar{position:absolute;top:calc(env(safe-area-inset-top) + 9px);left:10px;right:10px;display:none;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:22px;padding:9px 13px;z-index:33;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.searchbar.show{display:flex}
.searchbar svg{width:18px;height:18px;stroke:var(--text-muted);flex:0 0 auto}
.searchbar input{flex:1;min-width:0;background:none;border:none;outline:none;color:#fff;font-family:var(--ff);font-size:15.5px}
.searchbar input::placeholder{color:var(--text-dim)}
.searchbar .x{background:none;border:none;color:var(--text-muted);font-size:16px;line-height:1;cursor:pointer;flex:0 0 auto;padding:2px 4px}
.light .searchbar input{color:var(--ink)}

/* ======================= SPLASH / PRELOADER ======================= */
.splash{position:absolute;inset:0;z-index:200;background:radial-gradient(120% 90% at 50% 32%,#132330 0%,#0a1016 55%,#070b0f 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .55s ease}
.splash.hide{opacity:0;pointer-events:none}
.splash .logo{font-size:36px;animation:logoIn .6s cubic-bezier(.2,.8,.2,1) both}
.splash .logo .px i{animation:pxPop .5s ease both}
.splash .logo .px i:nth-child(1){animation-delay:.30s}
.splash .logo .px i:nth-child(2){animation-delay:.40s}
.splash .logo .px i:nth-child(3){animation-delay:.50s}
.splash .logo .px i:nth-child(4){animation-delay:.60s}
.splash .tag{font-size:11.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--text-dim);font-weight:600;animation:fadeUp .7s .35s both}
.splash .load{display:flex;gap:7px;margin-top:6px;animation:fadeUp .7s .5s both}
.splash .load i{width:8px;height:8px;border-radius:50%;background:var(--brand);animation:dot 1s infinite ease-in-out}
.splash .load i:nth-child(2){background:var(--accent);animation-delay:.15s}
.splash .load i:nth-child(3){animation-delay:.3s}
@keyframes logoIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}
@keyframes pxPop{0%{opacity:0;transform:scale(0)}70%{transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes dot{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

.rail{position:absolute;right:7px;bottom:calc(var(--nav) + var(--contact) + 12px);z-index:25;display:flex;flex-direction:column;align-items:center;gap:10px}
.act{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;background:none;border:none;color:#fff}
.act .ico{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:rgba(10,15,20,.26);backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.09);transition:transform .18s}
.act:active .ico{transform:scale(.86)}
.act svg{width:17px;height:17px}
.act .n{font-size:10px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.65)}
.act.liked .ico{background:rgba(229,130,38,.16);border-color:rgba(229,130,38,.5)}
.act.liked svg{fill:var(--accent);stroke:var(--accent)}
.act.liked .n{color:var(--accent)}
.act.saved svg{fill:#fff}
.act .rate-avg{color:var(--star)}
.rail-avatar{position:relative;margin-top:2px;cursor:pointer}
.rail-avatar img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff}
.rail-avatar .plus{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:17px;height:17px;border-radius:50%;background:var(--accent);display:grid;place-items:center;border:2px solid var(--bg);font-size:11px;font-weight:700;line-height:1;color:#fff}

.info{position:absolute;left:14px;right:74px;bottom:calc(var(--nav) + var(--contact) + 12px);z-index:22}
.lister{display:flex;align-items:center;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.lister .nm{font-size:14px;font-weight:600;cursor:pointer}
.tick{width:15px;height:15px;border-radius:50%;background:var(--brand);display:inline-grid;place-items:center;flex:0 0 auto}
.tick svg{width:9px;height:9px;stroke:#fff;stroke-width:3.5}
.cat-chip{font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--text-muted);background:rgba(22,32,42,.7);border:1px solid var(--border);padding:3px 9px;border-radius:20px}
.loc{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-muted);margin-bottom:9px}
.loc svg{width:13px;height:13px}
.priceline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:9px}
.price{display:inline-flex;align-items:baseline;gap:4px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.price .cur{font-size:12px;font-weight:600;opacity:.85}
.price .amt{font-size:17px;font-weight:700;line-height:1.1}
.price .per{font-size:12px;font-weight:500;opacity:.85}
.title{font-size:18.5px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.specs{display:flex;gap:14px;margin-bottom:9px;color:var(--text-muted);font-size:13px;font-weight:500;flex-wrap:wrap}
.specs span{display:flex;align-items:center;gap:5px}
.specs svg{width:15px;height:15px;opacity:.85}
.desc{font-size:13px;line-height:1.5;color:var(--text-muted);max-height:2.9em;overflow:hidden;transition:max-height .3s}
.desc.open{max-height:16em}
.desc b.more{color:#fff;font-weight:600;cursor:pointer}

.contact{position:absolute;left:0;right:0;bottom:calc(var(--nav) + env(safe-area-inset-bottom));height:var(--contact);z-index:24;display:flex;gap:8px;padding:7px 12px;align-items:center}
.cbtn-lbl{display:inline}
.cbtn{flex:1;height:100%;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent}
.cbtn svg{width:15px;height:15px}
.cbtn.call{background:rgba(22,32,42,.7);border-color:var(--border);color:#fff;backdrop-filter:blur(6px)}
.cbtn.dm{background:var(--brand);color:#fff}
.cbtn.wa{background:var(--success);color:#062a13}
/* feed contact bar only — transparent buttons with coloured icons (detail page keeps its solid style) */
.contact .cbtn{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.contact .cbtn svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.5))}
.contact .cbtn.call svg{color:#22C55E}
.contact .cbtn.dm svg{color:#3B9EDB}
.contact .cbtn.wa svg{color:#25D366}

/* comment sheet */
.cmts{overflow-y:auto;padding:6px 18px;flex:1;min-height:0;scrollbar-width:none}
.cmts::-webkit-scrollbar{display:none}
.cmt{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid rgba(42,57,71,.5)}
.cmt img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.cmt .cb .who{font-size:13px;font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:5px;color:#fff}
.cmt .cb .who .t{font-size:11px;color:var(--text-dim);font-weight:400}
.cmt .cb p{font-size:13.5px;line-height:1.45;color:var(--text-muted)}
.cmt .cl{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text-dim);font-size:11px}
.cmt .cl svg{width:16px;height:16px}
.cmt-bar{display:flex;gap:9px;align-items:center;padding:11px 16px calc(env(safe-area-inset-bottom) + 11px);border-top:1px solid var(--border);background:var(--surface)}
.cmt-bar img{width:32px;height:32px;border-radius:50%}
.cmt-bar input{flex:1;background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:10px 15px;color:#fff;font-family:var(--ff);font-size:13.5px;outline:none}
.cmt-bar input::placeholder{color:var(--text-dim)}
.cmt-bar .send{width:38px;height:38px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:0 0 auto;cursor:pointer}
.cmt-bar .send svg{width:18px;height:18px}

/* rating sheet */
.rate-body{padding:20px 22px calc(env(safe-area-inset-bottom) + 26px);text-align:center}
.rate-body .big{font-family:var(--fs);font-size:52px;line-height:1;color:var(--star)}
.rate-body .sub{font-size:13px;color:var(--text-muted);margin:4px 0 20px}
.stars{display:flex;justify-content:center;gap:10px;margin-bottom:20px}
.stars svg{width:38px;height:38px;cursor:pointer;fill:var(--border);transition:transform .12s}
.stars svg.on{fill:var(--star)}
.stars svg:active{transform:scale(1.2)}
.rate-body textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:12px 14px;color:#fff;font-family:var(--ff);font-size:13.5px;resize:none;height:74px;outline:none;margin-bottom:16px}
.rate-body .submit{width:100%;height:48px;border-radius:14px;background:var(--accent);color:#fff;font-weight:700;font-size:15px;border:none;cursor:pointer}

/* ============================================================
   PROFILE PAGE (light surface per §2)
   ============================================================ */
.pscroll{height:100%;overflow-y:auto;scrollbar-width:none;padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 10px)}
.pscroll::-webkit-scrollbar{display:none}
.pbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 12px;background:var(--paper-2)}
.pbar .ttl{font-weight:700;font-size:15px;display:flex;align-items:center;gap:6px;margin:0 auto}
.pbar .spacer{width:38px}
.phero{background:var(--paper);padding:22px 20px 18px;text-align:center;border-bottom:1px solid var(--line)}
.phero .av{width:92px;height:92px;border-radius:50%;object-fit:cover;margin:0 auto 12px;display:block;border:3px solid var(--paper);box-shadow:0 6px 22px -6px rgba(41,143,187,.5),0 0 0 2px var(--brand)}
.phero .nm{font-size:20px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--ink)}
.phero .nm .tick{width:17px;height:17px}
.phero .handle{font-size:13.5px;color:var(--ink-muted);margin-top:2px}
.phero .acct{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;font-weight:600;color:var(--brand-700);background:var(--brand-050);border:1px solid #cfe6f0;padding:4px 11px;border-radius:20px}
.phero .bio{font-size:13.5px;color:var(--ink-muted);line-height:1.5;margin:12px auto 0;max-width:34ch}

.pstats{display:flex;justify-content:center;gap:26px;padding:16px 0 4px;background:var(--paper)}
.pstat{text-align:center;cursor:pointer}
.pstat b{display:block;font-size:19px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pstat span{font-size:12px;color:var(--ink-muted)}

.pactions{display:flex;gap:9px;padding:16px 20px;background:var(--paper)}
.pbtn{height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:14.5px;font-weight:600;cursor:pointer;border:1px solid transparent}
.pbtn svg{width:17px;height:17px}
.pbtn.follow{flex:1;background:var(--brand);color:#fff}
.pbtn.follow.on{background:var(--paper);color:var(--ink);border-color:var(--line)}
.pbtn.msg{flex:1;background:var(--paper);color:var(--ink);border-color:var(--line)}
.pbtn.sq{width:44px;flex:0 0 auto;background:var(--paper);color:var(--ink);border-color:var(--line)}

.ptabs{display:flex;position:sticky;top:calc(env(safe-area-inset-top) + 60px);z-index:20;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ptab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:13px 0;color:var(--ink-muted);cursor:pointer;font-size:12.5px;font-weight:600;position:relative}
.ptab svg{width:20px;height:20px}
.ptab.on{color:var(--ink)}
.ptab.on::after{content:"";position:absolute;bottom:-1px;left:20%;right:20%;height:2.5px;border-radius:2px;background:var(--ink)}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line)}
.grid.tabgrid>div{position:relative;min-width:0}
.tile{display:block;width:100%;position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--paper-2);cursor:pointer}
.tile img{width:100%;height:100%;object-fit:cover}
/* single bottom bar: views on the left, price on the right — cannot overlap (flexbox) */
.tile .tbar{position:absolute;left:7px;right:7px;bottom:6px;display:flex;align-items:flex-end;justify-content:space-between;gap:6px;z-index:1}
.tile .tbar .tviews{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.85);flex:0 0 auto}
.tile .tbar .tviews svg{width:12px;height:12px}
.tile .tbar .tprice{font-family:var(--fs);font-size:13px;color:#fff;line-height:1;text-shadow:0 1px 5px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}
.tile .tstat{position:absolute;left:6px;top:6px;font-size:10px;font-weight:700;color:#fff;background:rgba(229,130,38,.95);padding:2px 6px;border-radius:6px;z-index:1}
.tile .tgrad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 34%,transparent 62%,rgba(0,0,0,.5))}
.empty{padding:50px 30px;text-align:center;color:var(--ink-muted);font-size:13.5px}
.empty svg{width:40px;height:40px;color:var(--line);margin-bottom:10px}

/* ============================================================
   TERMS PAGE
   ============================================================ */
.tscroll{height:100%;overflow-y:auto;scrollbar-width:none;background:var(--paper)}
.tscroll::-webkit-scrollbar{display:none}
.tcontent{padding:22px 22px 60px;color:var(--ink)}
.tcontent h1{font-size:22px;font-weight:700;margin-bottom:4px}
.tcontent .upd{font-size:12px;color:var(--ink-muted);margin-bottom:22px}
.tcontent h2{font-size:15px;font-weight:700;margin:22px 0 7px;color:var(--brand-700)}
.tcontent p{font-size:13.5px;line-height:1.62;color:#3a4a56;margin-bottom:10px}
.tcontent ul{margin:0 0 10px 18px}
.tcontent li{font-size:13.5px;line-height:1.6;color:#3a4a56;margin-bottom:5px}

/* ============================================================
   MESSAGES (inbox + chat thread) — light
   ============================================================ */
.msearch{padding:10px 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.msearch input{width:100%;background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:10px 15px;font-family:var(--ff);font-size:13.5px;color:var(--ink);outline:none}
.mlist{height:100%;overflow-y:auto;scrollbar-width:none;background:var(--paper);padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 8px)}
.mlist::-webkit-scrollbar{display:none}
.conv{display:flex;gap:12px;align-items:center;padding:12px 16px;cursor:pointer;border-bottom:1px solid var(--line)}
.conv:hover{background:var(--paper-2)}
.conv .cav{position:relative;flex:0 0 auto}
.conv .cav img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.conv .cav .on-dot{position:absolute;right:1px;bottom:1px;width:12px;height:12px;border-radius:50%;background:var(--success);border:2px solid var(--paper)}
.conv .cb{flex:1;min-width:0}
.conv .cb .r1{display:flex;align-items:center;gap:5px}
.conv .cb .nm{font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .cb .tm{margin-left:auto;font-size:11.5px;color:var(--ink-muted);flex:0 0 auto}
.conv .cb .pv{font-size:13px;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.conv.unread .cb .pv{color:var(--ink);font-weight:600}
.conv .cthumb{width:44px;height:44px;border-radius:9px;object-fit:cover;flex:0 0 auto}
.conv .ub{width:20px;height:20px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;flex:0 0 auto}

.thread{position:absolute;inset:0;z-index:50;background:var(--paper-2);display:flex;flex-direction:column;transform:translateX(101%);transition:transform .3s cubic-bezier(.32,.72,0,1)}
.thread.open{transform:translateX(0)}
.thead{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 10px) 12px 10px;background:var(--paper);border-bottom:1px solid var(--line)}
.thead img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.thead .who{min-width:0}
.thead .who .n{font-weight:700;font-size:14.5px;color:var(--ink);display:flex;align-items:center;gap:5px}
.thead .who .s{font-size:11.5px;color:var(--success)}
.thead .sp{margin-left:auto;display:flex;gap:6px}
.tpin{display:flex;gap:10px;align-items:center;padding:10px 14px;background:var(--brand-050);border-bottom:1px solid var(--line)}
.tpin img{width:42px;height:42px;border-radius:9px;object-fit:cover}
.tpin .pi{flex:1;min-width:0}
.tpin .pi .t{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpin .pi .p{font-size:12px;color:var(--brand-700);font-weight:700}
.tpin a{font-size:12px;font-weight:600;color:var(--brand);text-decoration:none;flex:0 0 auto}
.tmsgs{flex:1;min-height:0;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none}
.tmsgs::-webkit-scrollbar{display:none}
.tday{align-self:center;font-size:11px;color:var(--ink-muted);background:var(--paper);padding:3px 12px;border-radius:12px;margin:4px 0}
.bub{max-width:78%;padding:9px 13px;border-radius:16px;font-size:13.5px;line-height:1.4;position:relative}
.bub.them{align-self:flex-start;background:var(--paper);color:var(--ink);border-bottom-left-radius:5px}
.bub.me{align-self:flex-end;background:var(--brand);color:#fff;border-bottom-right-radius:5px}
.bub .tt{display:block;font-size:10px;margin-top:3px;opacity:.6}
.tcompose{display:flex;gap:8px;align-items:center;padding:10px 12px calc(env(safe-area-inset-bottom) + 10px);background:var(--paper);border-top:1px solid var(--line)}
.tcompose .att{width:40px;height:40px;border-radius:50%;background:var(--paper-2);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink-muted);flex:0 0 auto;cursor:pointer}
.tcompose input{flex:1;background:var(--paper-2);border:1px solid var(--line);border-radius:22px;padding:11px 15px;font-family:var(--ff);font-size:13.5px;color:var(--ink);outline:none}
.tcompose .snd{width:42px;height:42px;border-radius:50%;background:var(--brand);display:grid;place-items:center;flex:0 0 auto;cursor:pointer}
.tcompose .snd svg{width:19px;height:19px}

/* ============================================================
   FOLLOWERS / FOLLOWING — light
   ============================================================ */
.fseg{display:flex;background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.fseg .s{flex:1;text-align:center;padding:14px 0;font-weight:600;font-size:14px;color:var(--ink-muted);cursor:pointer;position:relative}
.fseg .s.on{color:var(--ink)}
.fseg .s.on::after{content:"";position:absolute;bottom:-1px;left:30%;right:30%;height:2.5px;border-radius:2px;background:var(--brand)}
.ulist{height:100%;overflow-y:auto;scrollbar-width:none;background:var(--paper);padding-bottom:calc(var(--nav) + env(safe-area-inset-bottom) + 8px)}
.ulist::-webkit-scrollbar{display:none}
.urow{display:flex;gap:12px;align-items:center;padding:11px 16px}
.urow img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.urow .ub{flex:1;min-width:0}
.urow .ub .n{font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;gap:5px}
.urow .ub .m{font-size:12px;color:var(--ink-muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbtn{flex:0 0 auto;height:34px;padding:0 16px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--brand);background:var(--brand);color:#fff}
.fbtn.on{background:var(--paper);color:var(--ink);border-color:var(--line)}

/* ============================================================
   POST WIZARD — light
   ============================================================ */
.wizard{display:flex;flex-direction:column;height:100%;background:var(--paper)}
.whead{padding:calc(env(safe-area-inset-top) + 12px) 12px 12px;display:flex;align-items:center;gap:10px;background:var(--paper)}
.whead .ttl{font-weight:700;font-size:15px;margin:0 auto;color:var(--ink)}
.wprog{height:3px;background:var(--line);position:relative}
.wprog i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:0 3px 3px 0;transition:width .35s cubic-bezier(.4,0,.2,1);width:16.6%}
.wstepnum{padding:12px 18px 0;font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-700)}
.wbody{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:6px 18px calc(env(safe-area-inset-bottom) + 24px);scrollbar-width:none}
.wbody::-webkit-scrollbar{display:none}
.wstep{display:none}
.wstep.on{display:block;animation:stepIn .3s ease}
@keyframes stepIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
.wstep h3{font-size:20px;font-weight:700;color:var(--ink);margin:8px 0 3px;text-wrap:balance}
.wstep .sub{font-size:13px;color:var(--ink-muted);margin-bottom:18px;line-height:1.45}
.wfoot{display:flex;gap:10px;padding:12px 16px calc(env(safe-area-inset-bottom) + 14px);border-top:1px solid var(--line);background:var(--paper)}
.wbtn{height:50px;border-radius:14px;font-weight:700;font-size:15px;cursor:pointer;border:1px solid transparent;display:flex;align-items:center;justify-content:center;gap:7px}
.wbtn svg{width:18px;height:18px}
.wbtn.back{flex:0 0 auto;width:54px;background:var(--paper-2);color:var(--ink);border-color:var(--line)}
.wbtn.next{flex:1;background:var(--brand);color:#fff}
.wbtn.publish{flex:1;background:linear-gradient(150deg,var(--accent),var(--accent-700));color:#fff;box-shadow:0 10px 24px -8px rgba(229,130,38,.7)}

/* form fields */
.field{margin-bottom:16px}
.field>label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field .req{color:var(--accent)}
.ctrl{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-family:var(--ff);font-size:14px;color:var(--ink);outline:none;transition:border-color .15s}
.ctrl:focus{border-color:var(--brand)}
select.ctrl{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235A6B78' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
textarea.ctrl{height:104px;resize:none;line-height:1.5}
.ctrl::placeholder{color:#9fb0bc}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.catgrid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.catcard{border:1.5px solid var(--line);border-radius:16px;padding:18px 14px;text-align:center;cursor:pointer;background:var(--paper);transition:.15s}
.catcard .ic{width:48px;height:48px;border-radius:14px;background:var(--brand-050);display:grid;place-items:center;margin:0 auto 10px;color:var(--brand-700)}
.catcard .ic svg{width:25px;height:25px}
.catcard .cn{font-weight:700;font-size:14.5px;color:var(--ink)}
.catcard .cd{font-size:11px;color:var(--ink-muted);margin-top:2px;line-height:1.3}
.catcard.on{border-color:var(--brand);background:var(--brand-050);box-shadow:0 8px 20px -10px rgba(41,143,187,.6)}
.catcard.on .ic{background:var(--brand);color:#fff}

.seg2{display:flex;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.seg2 button{flex:1;border:none;background:none;padding:10px;border-radius:9px;font-weight:600;font-size:13px;color:var(--ink-muted);cursor:pointer;font-family:var(--ff)}
.seg2 button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 5px rgba(14,27,36,.14)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:var(--paper);border-radius:20px;padding:8px 13px;font-size:12.5px;font-weight:500;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:6px;transition:.12s}
.chip svg{width:14px;height:14px}
.chip.on{border-color:var(--brand);background:var(--brand-050);color:var(--brand-700)}

.uploader{border:1.6px dashed var(--brand);border-radius:16px;background:var(--brand-050);padding:24px;text-align:center;cursor:pointer;color:var(--brand-700)}
.uploader svg{width:32px;height:32px;margin-bottom:8px}
.uploader .ut{font-weight:700;font-size:14px}
.uploader .us{font-size:11.5px;color:var(--ink-muted);margin-top:3px}
.uphotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.uphoto{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--paper-2)}
.uphoto img{width:100%;height:100%;object-fit:cover}
.uphoto .rm{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer}
.uphoto.cover::after{content:"Cover";position:absolute;left:4px;bottom:4px;font-size:9px;font-weight:700;background:var(--accent);color:#fff;padding:2px 6px;border-radius:5px;z-index:1}
.uphoto video{width:100%;height:100%;object-fit:cover;background:#000}
.uphoto .urm{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;display:grid;place-items:center;font-size:13px;line-height:1;cursor:pointer;z-index:3}
.uphoto .ucover{position:absolute;right:4px;bottom:4px;border:0;background:rgba(0,0,0,.62);color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;cursor:pointer;z-index:3}
.uphoto .uvbadge{position:absolute;left:4px;top:4px;background:rgba(0,0,0,.6);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px;z-index:2}
.uphoto.isblocked{outline:2px solid var(--danger,#DC2626);outline-offset:-2px}
.uphoto .ublock{position:absolute;inset:0;background:rgba(220,38,38,.55);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;z-index:2;text-transform:uppercase;letter-spacing:.06em}

/* media: video in feed & detail galleries */
.media video{min-width:100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;user-select:none;pointer-events:none;background:#000}

/* tap-to-unmute button on autoplaying videos (TikTok-style) */
.vmute{position:absolute;top:62px;right:10px;left:auto;z-index:30;width:36px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(22,32,42,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;cursor:pointer;color:#fff}
.vmute svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vmute.soundon{background:rgba(0,0,0,.42)}
.dgallery .vmute{top:auto;bottom:14px}

/* YouTube-style buffering spinner shown while a video is loading.
   Centered with margins (not translate) so the rotate animation can't fight the centering — spins steadily in place. */
.vload{position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px 0 0 -22px;z-index:20;border-radius:50%;border:3px solid rgba(255,255,255,.22);border-top-color:#fff;animation:cspin .8s linear infinite;pointer-events:none;opacity:0;transition:opacity .18s ease}
.vload.on{opacity:1}

/* video seek scrubber (detail page) */
.vseek{position:absolute;left:10px;right:10px;bottom:8px;height:16px;z-index:22;cursor:pointer;display:flex;align-items:center;touch-action:none}
.vseek::before{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:3px;border-radius:3px;background:rgba(255,255,255,.32)}
.vseek i{position:absolute;left:0;top:50%;transform:translateY(-50%);height:3px;border-radius:3px;width:0;background:var(--accent)}
.vseek .seekhint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap}
.dgallery video{min-width:100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;background:#000}

/* upload progress overlay */
.uploadov{position:absolute;inset:0;background:rgba(9,12,16,.82);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:60;padding:24px}
.uploadov.on{display:flex}
.uploadcard{background:var(--paper);color:var(--ink);border-radius:18px;padding:26px 22px;width:100%;max-width:300px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.upspin{width:38px;height:38px;margin:0 auto 14px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:upspin 1s linear infinite}
@keyframes upspin{to{transform:rotate(360deg)}}
.uptitle{font-weight:700;font-size:15px}
.upsub{font-size:11.5px;color:var(--ink-muted);margin:4px 0 14px}
.upbar{height:8px;border-radius:99px;background:var(--paper-2);overflow:hidden}
.upbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));border-radius:99px;transition:width .2s ease}
.uppct{font-size:12px;font-weight:700;margin-top:8px;color:var(--brand)}

/* video cover picker (bottom sheet) */
.coverpick{position:absolute;inset:0;background:rgba(9,12,16,.55);display:none;align-items:flex-end;z-index:65}
.coverpick.on{display:flex}
.cpsheet{background:var(--paper);color:var(--ink);width:100%;border-radius:18px 18px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom) + 18px);max-height:82%;overflow-y:auto;animation:cpUp .22s ease}
@keyframes cpUp{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.cphead{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px}
.cpx{border:0;background:var(--paper-2);width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;color:var(--ink)}
.cpsub{font-size:12px;color:var(--ink-muted);margin:4px 0 14px}
.cpframes{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
.cpframe{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:3px solid transparent;cursor:pointer;background:var(--paper-2)}
.cpframe.on{border-color:var(--brand)}
.cpframe img{width:100%;height:100%;object-fit:cover}
.cploading{grid-column:1/-1;text-align:center;font-size:12.5px;color:var(--ink-muted);padding:26px 0}
.cpupload{display:block;text-align:center;border:1.5px dashed var(--brand);color:var(--brand-700);border-radius:12px;padding:12px;font-weight:700;font-size:13px;cursor:pointer}

/* ===== Chumba skeleton loaders (shimmer placeholders) ===== */
.sk{position:relative;overflow:hidden;background:rgba(140,150,160,.16);border-radius:8px}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(210,220,230,.30),transparent);animation:sksweep 1.25s ease infinite}
@keyframes sksweep{100%{transform:translateX(100%)}}

/* feed skeleton card — fills a slide, dark like the feed */
.skcard{position:relative;height:100%;width:100%;scroll-snap-align:start;overflow:hidden;background:#0f1318}
.skcard .sk{background:rgba(255,255,255,.07)}
.skcard .sk::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent)}
.skrail{position:absolute;right:7px;bottom:calc(var(--nav) + var(--contact) + 12px);display:flex;flex-direction:column;align-items:center;gap:18px}
.skrail i{width:42px;height:42px;border-radius:50%}
.skinfo{position:absolute;left:14px;right:74px;bottom:calc(var(--nav) + var(--contact) + 12px);display:flex;flex-direction:column;gap:11px}
.skinfo .skchip{width:74px;height:22px;border-radius:7px}
.skinfo .skl{height:13px;border-radius:6px}
.skinfo .skprice{width:120px;height:26px;border-radius:8px;margin-top:2px}
.skbrand{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);display:flex;gap:6px}
.skbrand span{width:12px;height:12px;border-radius:3px;background:var(--accent);animation:skpx 1s ease-in-out infinite}
.skbrand span:nth-child(2){animation-delay:.15s}
.skbrand span:nth-child(3){animation-delay:.3s}
@keyframes skpx{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-5px)}}

/* comment skeleton rows (light sheet) */
.skcmt{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid rgba(42,57,71,.12)}
.skcmt .skav{width:36px;height:36px;border-radius:50%;flex:0 0 auto}
.skcmt .skcol{flex:1;display:flex;flex-direction:column;gap:8px;padding-top:2px}
.skcmt .skcol .sk{height:11px;border-radius:6px}

/* fade images in as they load (placeholder shimmer sits behind) */
.imgfade{opacity:0;transition:opacity .35s ease}
.imgfade.rdy{opacity:1}

/* boost / promote a listing */
.boostbanner{display:flex;align-items:center;gap:12px;background:linear-gradient(100deg,var(--brand),var(--brand-600));color:#fff;border-radius:14px;padding:13px 15px;text-decoration:none;margin-bottom:14px}
.boostbanner .bi{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.18);display:grid;place-items:center;flex:0 0 auto}
.boostbanner .bi svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2}
.boostbanner .bt{flex:1;min-width:0}
.boostbanner .bt b{display:block;font-size:14px}
.boostbanner .bt span{font-size:11.5px;opacity:.88}
.boostbanner .chev{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;opacity:.9;flex:0 0 auto}
.boosthead{display:flex;gap:12px;align-items:center;background:var(--paper-2);border-radius:14px;padding:12px;margin-bottom:16px}
.boosthead img{width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.boosthead .t{font-weight:700;font-size:14px}
.boosthead .s{font-size:12px;color:var(--ink-muted);line-height:1.45;margin-top:3px}
.pkgs{display:flex;flex-direction:column;gap:10px}
.pkg{display:flex;align-items:center;gap:12px;border:2px solid var(--line);border-radius:14px;padding:13px 14px;cursor:pointer;position:relative}
.pkg.on{border-color:var(--brand);background:var(--brand-050)}
.pkg input{position:absolute;opacity:0}
.pkg .pkgi{flex:1;min-width:0}
.pkg .pn{font-weight:700;font-size:14.5px}
.pkg .pt{font-size:12px;color:var(--ink-muted);margin-top:2px}
.pkg .pr{text-align:right;flex:0 0 auto}
.pkg .pp{font-weight:800;font-size:15px;color:var(--brand-700)}
.pkg .pd{font-size:11px;color:var(--ink-muted)}
.paystatus{margin-top:14px;padding:12px 14px;border-radius:12px;font-size:13px;font-weight:600;text-align:center;display:none}
.paystatus.wait{display:block;background:#FFF7E6;color:#B0600F}
.paystatus.ok{display:block;background:#E7F7EC;color:#16A34A}
.paystatus.err{display:block;background:var(--danger-050,#FEECEC);color:var(--danger,#DC2626)}
.boostbadge{font-size:9.5px;font-weight:800;color:#fff;background:linear-gradient(90deg,#E58226,#F5B301);padding:3px 7px;border-radius:6px;letter-spacing:.03em;text-transform:uppercase;box-shadow:0 2px 8px rgba(229,130,38,.55)}
/* floating Featured badge on feed cards — overlay, so it never pushes card content */
.card .cardfeatured{position:absolute;top:calc(env(safe-area-inset-top) + 66px);left:10px;z-index:24;font-size:10.5px;font-weight:800;color:#fff;background:linear-gradient(90deg,#E58226,#F5B301);padding:5px 11px;border-radius:20px;letter-spacing:.03em;box-shadow:0 3px 12px rgba(0,0,0,.4)}

/* detail-page engagement metrics (views / comments / saves / ratings) */
.dengage{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:2px 0 8px}
.de{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--paper-2);border-radius:12px;padding:11px 5px;text-align:center}
.de svg{width:19px;height:19px;color:var(--ink-muted)}
.de b{font-size:15px;color:var(--ink);font-family:var(--fs);line-height:1}
.de span{font-size:9.5px;color:var(--ink-muted);line-height:1.25}
.de.tap{cursor:pointer;background:#FFF7E6;border:1px solid #F5D89A}
/* client payment history */
.txlist{height:100%;overflow-y:auto;background:var(--paper);scrollbar-width:none}
.txlist::-webkit-scrollbar{display:none}
.tx{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.tx .txico{width:40px;height:40px;border-radius:11px;background:var(--accent-050,#FDF1E6);color:var(--accent-700,#B0600F);display:grid;place-items:center;flex:0 0 auto}
.tx .txico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.tx .txb{flex:1;min-width:0}
.tx .txt1{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink)}
.tx .txt2{font-size:12.5px;color:var(--ink-2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tx .txt3{font-size:11px;color:var(--ink-muted);margin-top:3px}
.tx .txamt{font-family:var(--fs);font-size:15px;color:var(--ink);flex:0 0 auto}
.txbadge{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.02em}
.txbadge.green{background:#E7F6ED;color:#16A34A}
.txbadge.amber{background:#FCF1E2;color:#B0600F}
.txbadge.red{background:var(--danger-050,#FBEAEA);color:var(--danger,#DC2626)}
.txbadge.gray{background:var(--paper-2);color:var(--ink-muted)}

/* compact "Boost" pill in the detail top bar (doesn't push content) */
.dtop .dl{display:flex;align-items:center;gap:8px}
.dtop .boostpill{display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 15px;border-radius:20px;background:linear-gradient(90deg,#E58226,#F5B301);color:#fff;font-weight:700;font-size:13px;text-decoration:none;box-shadow:0 4px 12px rgba(229,130,38,.45)}
.dtop .boostpill svg{width:16px;height:16px;fill:#fff;stroke:none}

/* "Featured" banner on a boosted listing's detail page */
.featuredbar{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(90deg,#E58226,#F5B301);color:#fff;font-weight:800;font-size:11.5px;letter-spacing:.02em;padding:6px 13px;border-radius:20px;margin-bottom:11px;box-shadow:0 4px 12px rgba(229,130,38,.35)}
/* featured (boosted) search cards stand out */
.scard.featured{outline:2px solid var(--accent);outline-offset:0;box-shadow:0 6px 18px rgba(229,130,38,.28)}
.scard .ftag{position:absolute;left:8px;top:8px;z-index:3;font-size:10px;font-weight:800;color:#fff;background:linear-gradient(90deg,#E58226,#F5B301);padding:3px 8px;border-radius:7px;letter-spacing:.02em;box-shadow:0 2px 8px rgba(0,0,0,.3)}

/* detail-page rating stars */
.ratestars{display:flex;gap:10px;font-size:36px;line-height:1;color:#F5B301;cursor:pointer;user-select:none;margin-top:6px}
.ratestars span{cursor:pointer;transition:transform .1s}
.ratestars span:active{transform:scale(1.2)}

/* chat image attachments */
.bub .bimg{display:block;max-width:210px;width:100%;height:auto;border-radius:10px;margin-bottom:3px;cursor:pointer}
.bub.hasimg{max-width:230px}

/* password show/hide eye */
.pwwrap{position:relative}
.pwwrap .ctrl{padding-right:44px}
.pweye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;padding:7px;cursor:pointer;color:var(--ink-muted);display:grid;place-items:center;line-height:0}
.pweye svg{width:20px;height:20px}

/* signup consent checkbox */
.consent{display:flex;align-items:flex-start;gap:9px;margin:2px 0 16px;font-size:12px;line-height:1.5;color:var(--ink-2)}
.consent input{width:17px;height:17px;margin-top:1px;flex:0 0 auto;accent-color:var(--brand)}
.consent a{color:var(--brand);font-weight:600;text-decoration:none}

/* legal / info pages (guidelines, terms) */
.legal{flex:1;min-height:0;overflow-y:auto;padding:18px 18px calc(env(safe-area-inset-bottom) + 24px);color:var(--ink);scrollbar-width:none}
.legal::-webkit-scrollbar{display:none}
.legal .lead{font-size:14px;color:var(--ink-2);line-height:1.55;margin-bottom:8px}
.legal h3{font-size:15px;font-weight:700;margin:18px 0 5px;color:var(--ink)}
.legal p{font-size:13.5px;color:var(--ink-2);line-height:1.6;margin-bottom:6px}
.legal a{color:var(--brand);font-weight:600;text-decoration:none}
.legal .callout{background:var(--brand-050);border:1px solid var(--line);border-radius:12px;padding:13px 14px;font-size:13px;line-height:1.55;color:var(--ink-2);margin:16px 0}
.legal .muted{font-size:12px;color:var(--ink-muted);margin-top:16px}

/* report modal (bottom sheet) */
.reportsheet{position:absolute;inset:0;background:rgba(9,12,16,.55);display:none;align-items:flex-end;z-index:66}
.reportsheet.on{display:flex}
.rpcard{background:var(--paper);color:var(--ink);width:100%;border-radius:18px 18px 0 0;padding:18px 18px calc(env(safe-area-inset-bottom) + 18px);max-height:88%;overflow-y:auto;animation:cpUp .22s ease}
.rphead{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px}
.rpx{border:0;background:var(--paper-2);width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;color:var(--ink)}
.rpsub{font-size:12px;color:var(--ink-muted);margin:4px 0 12px}
.rpreasons{display:flex;flex-direction:column;gap:1px}
.rpreason{display:flex;align-items:center;gap:11px;padding:13px 4px;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;color:var(--ink)}
.rpreason input{accent-color:var(--danger,#DC2626);width:18px;height:18px;flex:0 0 auto}

/* TikTok-style centered loading spinner (shown mid-screen while a page loads) */
#cload{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:9999;pointer-events:none}
#cload.on{display:flex}
#cload .chip{width:76px;height:76px;border-radius:20px;background:rgba(12,16,21,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(0,0,0,.4);animation:cpop .18s ease}
@keyframes cpop{from{transform:scale(.8);opacity:.3}to{transform:scale(1);opacity:1}}
#cload .ring{width:36px;height:36px;border-radius:50%;border:3.5px solid rgba(255,255,255,.22);border-top-color:var(--accent);animation:cspin .8s linear infinite}
@keyframes cspin{to{transform:rotate(360deg)}}
/* thin fallback bar kept for very top edge (subtle) */
#npbar{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--brand),var(--accent));z-index:9998;opacity:0;transition:width .3s ease,opacity .25s ease}
#npbar.on{opacity:1}

/* "listing published" pill shown after a background publish finishes */
.pubdone{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translate(-50%,20px);z-index:9999;background:var(--brand);color:#fff;text-decoration:none;font:600 13px/1 var(--fs,system-ui);padding:13px 20px;border-radius:24px;box-shadow:0 12px 34px rgba(0,0,0,.32);opacity:0;transition:opacity .35s ease,transform .35s ease}
.pubdone.on{opacity:1;transform:translate(-50%,0)}

/* persistent "Posting…" pill (service-worker upload path — shows on the feed while it finishes) */
.postingpill{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 78px);transform:translate(-50%,0);z-index:9999;display:none;align-items:center;gap:9px;background:rgba(12,16,21,.92);color:#fff;font:600 13px/1 var(--fs,system-ui);padding:11px 17px;border-radius:24px;box-shadow:0 10px 30px rgba(0,0,0,.38);backdrop-filter:blur(6px)}
.postingpill.on{display:inline-flex;animation:cpop .2s ease}
.postingpill .sp{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:cspin .8s linear infinite;flex:0 0 auto}

.pricewrap{display:flex;gap:8px}
.pricewrap .cur{display:flex;align-items:center;padding:0 13px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;font-weight:700;font-size:13px;color:var(--ink-muted)}
.pricewrap .ctrl{flex:1}
.maprow{height:140px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,#dbe8ef,#eef4f7);position:relative;overflow:hidden;display:grid;place-items:center;cursor:pointer;margin-top:4px}
.maprow::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(41,143,187,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(41,143,187,.12) 1px,transparent 1px);background-size:26px 26px}
.maprow .pin{position:relative;color:var(--accent);display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:600}
.maprow .pin svg{width:30px;height:30px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}

/* preview card */
.pvcard{border-radius:20px;overflow:hidden;background:#000;position:relative;aspect-ratio:3/4;box-shadow:0 16px 40px -16px rgba(0,0,0,.55);margin-bottom:14px}
.pvcard>img{width:100%;height:100%;object-fit:cover}
.pvcard .pvg{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,8,11,.93) 8%,transparent 55%)}
.pvcard .pvinfo{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff}
.pvcard .pvchip{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;background:rgba(22,32,42,.75);border:1px solid rgba(255,255,255,.15);padding:4px 10px;border-radius:20px}
.pvempty{display:grid;place-items:center;height:100%;color:#7c8b98;font-size:13px;text-align:center;padding:20px}
.pubok{text-align:center;padding:30px 20px}
.pubok .ok{width:78px;height:78px;border-radius:50%;background:var(--success);display:grid;place-items:center;margin:0 auto 18px;animation:pop .5s ease}
.pubok .ok svg{width:40px;height:40px;stroke:#fff;stroke-width:3}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.pubok h3{font-size:21px;font-weight:700;color:var(--ink);margin-bottom:6px}
.pubok p{font-size:13.5px;color:var(--ink-muted);line-height:1.5;max-width:30ch;margin:0 auto 22px}

/* ============================================================
   PROPERTY DETAIL (dark gallery → light body)
   ============================================================ */
.dpage{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;background:var(--paper);position:relative}
.dpage::-webkit-scrollbar{display:none}
.dgallery{position:relative;height:56vh;min-height:320px;background:#000;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.dgallery::-webkit-scrollbar{display:none}
.dgallery img{min-width:100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center}
.dtop{position:absolute;top:0;left:0;right:0;z-index:12;display:flex;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 14px 0}
.dtop .r{display:flex;gap:8px}
.dtop .ib{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(10,15,20,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.14);color:#fff;cursor:pointer}
.dtop .ib svg{width:19px;height:19px}
.dtop .ib.liked svg{fill:var(--accent);stroke:var(--accent)}
.dgdots{position:absolute;bottom:38px;left:0;right:0;display:flex;gap:5px;justify-content:center;z-index:11}
.dgdots i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.45)}
.dgdots i.on{background:#fff;width:22px}
/* media counter sits BELOW the top action bar so it never collides with Share/Download/Like */
.dgcount{position:absolute;top:calc(env(safe-area-inset-top) + 62px);left:50%;transform:translateX(-50%);z-index:11;font-size:12px;font-weight:600;color:#fff;background:rgba(10,15,20,.5);padding:4px 11px;border-radius:20px;backdrop-filter:blur(6px)}
.dbody{background:var(--paper);border-radius:22px 22px 0 0;margin-top:-24px;position:relative;z-index:5;padding:20px 20px calc(var(--contact) + env(safe-area-inset-bottom) + 20px)}
.dpriceline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.dprice{display:inline-flex;align-items:baseline;gap:5px;background:var(--accent);color:#fff;padding:6px 14px 8px;border-radius:13px;box-shadow:0 8px 20px -6px rgba(229,130,38,.6)}
.dprice .cur{font-size:12px;font-weight:600;opacity:.9}
.dprice .amt{font-family:var(--fs);font-size:27px;line-height:.9}
.dprice .per{font-size:12px;opacity:.9}
.dtype{font-size:11.5px;font-weight:600;color:var(--brand-700);background:var(--brand-050);border:1px solid #cfe6f0;padding:5px 11px;border-radius:20px}
.dtitle{font-size:21px;font-weight:700;letter-spacing:-.01em;margin-bottom:8px;text-wrap:balance;color:var(--ink)}
.dloc{display:flex;align-items:center;gap:5px;font-size:13.5px;color:var(--ink-muted);margin-bottom:14px}
.dloc svg{width:15px;height:15px}
.dstats{display:flex;gap:8px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:18px}
.dstat{flex:1;text-align:center}
.dstat .ic{color:var(--brand-700);margin-bottom:5px}
.dstat .ic svg{width:20px;height:20px}
.dstat b{display:block;font-size:15px;font-weight:700;color:var(--ink)}
.dstat span{font-size:11.5px;color:var(--ink-muted)}
.dsec{margin-bottom:22px}
.dsec h3{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:10px}
.dsec p{font-size:14px;line-height:1.6;color:var(--ink-2)}
.amen{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.amen .a{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2)}
.amen .a .ai{width:32px;height:32px;border-radius:9px;background:var(--brand-050);color:var(--brand-700);display:grid;place-items:center;flex:0 0 auto}
.amen .a .ai svg{width:16px;height:16px}
.dmap{height:150px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(135deg,#dbe8ef,#eef4f7);position:relative;overflow:hidden;display:grid;place-items:center}
.dmap::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(41,143,187,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(41,143,187,.12) 1px,transparent 1px);background-size:26px 26px}
.dmap .mpin{position:relative;color:var(--accent)}
.dmap .mpin svg{width:34px;height:34px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))}
.dmap-live{background:#eef4f7}
.dmap-live::before{display:none}
.dratehead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.dratehead .big{font-family:var(--fs);font-size:40px;line-height:1;color:var(--ink)}
.dratehead .st{color:var(--star);font-size:14px}
.dratehead .sub{font-size:12.5px;color:var(--ink-muted)}
.review{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--line)}
.review img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.review .rb .who{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px}
.review .rb .who .st{color:var(--star);font-size:11px;letter-spacing:1px}
.review .rb .dt{font-size:11.5px;color:var(--ink-muted);margin-left:auto}
.review .rb p{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:4px}
.lcard{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-radius:16px;padding:14px}
.lcard img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.lcard .li{flex:1;min-width:0}
.lcard .li .n{font-weight:700;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:5px}
.lcard .li .m{font-size:12.5px;color:var(--ink-muted);margin-top:1px}
.gate{background:var(--accent-050);border:1px solid #f3d9bf;border-radius:12px;padding:12px 14px;font-size:12.5px;color:var(--accent-700);display:flex;gap:9px;align-items:center;margin-top:14px}
.gate svg{width:18px;height:18px;flex:0 0 auto}
.dcontact{position:absolute;left:0;right:0;bottom:0;height:calc(var(--contact) + env(safe-area-inset-bottom));padding:8px 12px calc(env(safe-area-inset-bottom) + 8px);z-index:20;display:flex;gap:8px;background:var(--paper);border-top:1px solid var(--line)}
.dpage-wrap{position:relative;height:100%}

/* ============================================================
   AUTH (login / register / otp)
   ============================================================ */
.auth{height:100%;display:flex;flex-direction:column;background:var(--paper)}
.auth-hero{background:radial-gradient(120% 100% at 50% 10%,#153343,#0b141b);color:#fff;padding:calc(env(safe-area-inset-top) + 46px) 26px 40px;text-align:center;border-radius:0 0 28px 28px;flex:0 0 auto}
.auth-hero .logo{font-size:30px;justify-content:center}
.auth-hero .tl{color:#9db4c4;font-size:13.5px;margin-top:12px;line-height:1.5}
.auth-body{flex:1;overflow-y:auto;min-height:0;padding:24px 24px 30px;scrollbar-width:none}
.auth-body::-webkit-scrollbar{display:none}
.auth-body h2{font-size:20px;font-weight:700;margin-bottom:4px;color:var(--ink)}
.auth-body .sub{font-size:13.5px;color:var(--ink-muted);margin-bottom:22px}
.methodtabs{display:flex;gap:6px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:4px;margin-bottom:20px}
.methodtabs button{flex:1;border:none;background:none;padding:11px;border-radius:9px;font-weight:600;font-size:13px;color:var(--ink-muted);cursor:pointer;font-family:var(--ff)}
.methodtabs button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 5px rgba(14,27,36,.14)}
.phoneinput{display:flex;gap:8px}
.phoneinput .cc{display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);font-weight:600;font-size:14px;color:var(--ink);white-space:nowrap}
.phoneinput .ctrl{flex:1}
.btn-full{width:100%;height:50px;border-radius:14px;font-weight:700;font-size:15px;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn-brand{background:var(--brand);color:#fff}
.btn-accent{background:linear-gradient(150deg,var(--accent),var(--accent-700));color:#fff;box-shadow:0 10px 24px -8px rgba(229,130,38,.6)}
.btn-google{background:var(--paper);border:1px solid var(--line);color:var(--ink)}
.btn-google svg{width:19px;height:19px}
.divider{display:flex;align-items:center;gap:12px;margin:20px 0;color:var(--ink-muted);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.authlink{text-align:center;font-size:13.5px;color:var(--ink-muted);margin-top:22px}
.authlink a{color:var(--brand);font-weight:700}
.legalnote{text-align:center;font-size:11.5px;color:var(--ink-muted);margin-top:16px;line-height:1.5}
.legalnote a{color:var(--brand-700);font-weight:600}
.otpwrap{display:flex;gap:9px;justify-content:center;margin:26px 0 18px}
.otpwrap input{width:46px;height:56px;text-align:center;font-size:24px;font-weight:700;border:1.5px solid var(--line);border-radius:12px;font-family:var(--ff);color:var(--ink);outline:none;background:var(--paper)}
.otpwrap input:focus{border-color:var(--brand)}
.otpwrap input.filled{border-color:var(--brand);background:var(--brand-050)}
.resend{text-align:center;font-size:13px;color:var(--ink-muted)}
.resend b{color:var(--brand);font-weight:700}
.otp-to{text-align:center;font-size:13.5px;color:var(--ink-2);margin-bottom:2px}
.otp-to b{color:var(--ink)}

/* ============================================================
   ONBOARDING
   ============================================================ */
.onb{height:100%;display:flex;flex-direction:column;background:var(--paper)}
.onb-top{padding:calc(env(safe-area-inset-top) + 16px) 20px 8px;display:flex;align-items:center;gap:12px}
.onb-dots{display:flex;gap:6px;margin:0 auto}
.onb-dots i{width:8px;height:8px;border-radius:4px;background:var(--line);transition:.25s}
.onb-dots i.on{width:24px;background:var(--brand)}
.onb-skip{font-size:13px;font-weight:600;color:var(--ink-muted);cursor:pointer;text-decoration:none}
.onb-body{flex:1;overflow-y:auto;min-height:0;padding:14px 24px 20px;scrollbar-width:none}
.onb-body::-webkit-scrollbar{display:none}
.onb-body h2{font-size:24px;font-weight:700;margin-bottom:7px;text-wrap:balance;color:var(--ink)}
.onb-body .sub{font-size:14px;color:var(--ink-muted);margin-bottom:24px;line-height:1.5}
.onb-hero-ic{width:74px;height:74px;border-radius:22px;background:linear-gradient(150deg,var(--brand),var(--brand-700));display:grid;place-items:center;margin-bottom:20px;box-shadow:0 14px 30px -10px rgba(41,143,187,.6)}
.onb-hero-ic svg{width:38px;height:38px;color:#fff}
.intgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.intcard{border:1.5px solid var(--line);border-radius:16px;padding:18px 14px;cursor:pointer;text-align:center;transition:.15s;position:relative;background:var(--paper)}
.intcard .ic{width:50px;height:50px;border-radius:14px;background:var(--brand-050);color:var(--brand-700);display:grid;place-items:center;margin:0 auto 10px}
.intcard .ic svg{width:26px;height:26px}
.intcard .t{font-weight:700;font-size:15px;color:var(--ink)}
.intcard .d{font-size:11px;color:var(--ink-muted);margin-top:2px}
.intcard.on{border-color:var(--brand);background:var(--brand-050)}
.intcard.on .ic{background:var(--brand);color:#fff}
.intcard .chk{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:50%;background:var(--brand);display:none;place-items:center}
.intcard .chk svg{width:13px;height:13px;stroke:#fff;stroke-width:3}
.intcard.on .chk{display:grid}
.pchips{display:flex;flex-wrap:wrap;gap:9px}
.pchip{border:1.5px solid var(--line);background:var(--paper);border-radius:22px;padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--ink);cursor:pointer}
.pchip.on{border-color:var(--brand);background:var(--brand-050);color:var(--brand-700)}
.onb-foot{padding:14px 20px calc(env(safe-area-inset-bottom) + 16px);border-top:1px solid var(--line);flex:0 0 auto}

/* ---- real phone: full bleed, no device frame ---- */
@media (max-width:560px){
  body{display:block;overflow:hidden}
  .stage{gap:0}
  .stage-note{display:none}
  .phone{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
  .notch{display:none}
}