:root{
    /* Monochrome-blue identity: exactly one hue (navy/indigo, three
       shades of it) plus true neutrals (graphite/white) - no second
       competing color anywhere in the decorative palette. Replaces the
       earlier warm-terracotta scheme. --red stays untouched: it's a
       semantic/danger color (errors, "sold"), not a brand color, and
       needs to stay visually distinct from the brand hue on purpose.
       Old variable NAMES are kept as-is (script.js and every existing
       rule reference them) - only the values moved. */
    --ink:#1C2430;
    --ink-rgb:28,36,48;
    --paper:#F3F4F6;
    --card:#ffffff;
    --card-2:#F7F8FA;
    --teal-900:#10151D;
    --teal-700:#5B6472;
    --turquoise:#33456B; /* repurposed into the blue family - was the "verified" green */
    --turquoise-soft:#DDE6F1;
    --verified-blue:#1D9BF0; /* the classic blue checkmark color, same in both themes */
    --accent:#33456B;
    --accent-rgb:51,69,107;
    --accent-deep:#1C2E4D;
    --accent-bright:#5B7CAD;
    --accent-ink:#F5F8FC;
    --accent2:#33456B; /* one vivid accent now, not two - see changelog */
    --accent2-soft:#DDE6F1;
    --gold:#5B7CAD; /* repurposed into the blue family - was gold/VIP */
    --gold-soft:#E7EEF6;
    --gold-ink:#1C2E4D;
    --red:#a13327;
    --red-soft:#f3ded9;
    --line: rgba(var(--ink-rgb),0.13);
    --card-line: rgba(var(--accent-rgb),0.3);
    --shadow-rgb: 28,36,48;
    --radius: 22px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;}
  body{background:var(--paper);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease;overscroll-behavior-y:contain;}
  h1,h2,h3{font-family:'Unbounded',sans-serif;font-weight:700;letter-spacing:-0.01em;margin:0;}
  button{font-family:'Manrope',sans-serif;cursor:pointer;}
  a{text-decoration:none;color:inherit;}
  .page{display:none;min-height:100vh;}
  .page.show{display:block;}
  .hidden{display:none !important;}
  .tile-rule{height:8px;width:100%;background-image:repeating-linear-gradient(135deg,var(--accent2) 0 10px,var(--turquoise) 10px 20px,var(--teal-900) 20px 30px);background-size:42px 42px;}

  /* ---------- dark mode ---------- */
  body.dark{--paper:#12161D;--card:#1A2029;--card-2:#20272F;--ink:#EAEDF2;--ink-rgb:234,237,242;--line:rgba(234,237,242,0.14);--card-line:rgba(110,143,194,0.35);--teal-900:#F3F4F6;--teal-700:#B8C0CC;--accent:#6E8FC2;--accent-rgb:110,143,194;--accent-deep:#8FACD6;--accent-bright:#A8C0E0;--accent-ink:#0E1826;--accent2:#6E8FC2;--accent2-soft:#22344A;--gold:#8FACD6;--gold-soft:#22344A;--gold-ink:#DCE6F2;--turquoise:#6E8FC2;--turquoise-soft:#22344A;--shadow-rgb:0,0,0;}
  body.dark .navy-block{background:var(--card);}
  body.dark .logo, body.dark .eyebrow, body.dark .footer-bottom div{color:var(--ink) !important;}
  body.dark .lang-menu, body.dark .type-dropdown{background:var(--card);border-color:var(--line);}
  body.dark .pill{background:var(--card-2);color:var(--ink);}
  body.dark .icon-btn{color:var(--accent);background:var(--card-2);}
  body.dark .icon-btn:hover{background:var(--accent2-soft);color:var(--accent);}
  body.dark .site-footer{background:#232120;}
  body.dark .site-footer, body.dark .site-footer div{color:var(--ink) !important;}
  /* --teal-900 is really "strong ink" (dark in light mode, light cream
     in dark mode) - these "black pill" buttons pair it with a hardcoded
     white text colour that assumed it always stays dark, so in dark
     mode the background flips to pale cream while the text stays white
     on top of it - unreadable, looking like a blank off-white blob.
     Pair the text colour with the same inversion so it keeps reading
     right in both themes. */
  body.dark .btn-black,body.dark .otp-choice.sms,body.dark .admin-fab{color:var(--paper);}

  /* ---------- top navbar ---------- */
  .navy-block{background:#ffffff;color:var(--ink);}
  header.nav{padding:14px 6vw;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .logo{display:flex;align-items:center;gap:10px;font-family:'Unbounded',sans-serif;font-size:21px;font-weight:700;color:var(--teal-900);cursor:pointer;flex-shrink:0;}
  .logo-mark{width:34px;height:34px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;font-size:16px;flex-shrink:0;}
  .logo-mark svg{width:19px;height:19px;}
  .navbar-search{flex:1 1 auto;max-width:660px;display:flex;align-items:center;gap:9px;background:var(--paper);border-radius:22px;padding:10px 16px;min-width:100px;margin:0 18px;}
  .navbar-search svg{width:16px;height:16px;color:rgba(var(--ink-rgb),0.5);flex-shrink:0;}
  .navbar-search input{border:none;background:transparent;outline:none;font-size:14px;color:var(--ink);width:100%;font-family:'Manrope',sans-serif;}
  .lang-wrap{position:relative;flex-shrink:0;}
  .lang-select{display:flex;align-items:center;gap:5px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--ink);font-weight:700;font-size:13px;background:transparent;border:none;}
  .lang-select:hover{background:var(--paper);}
  .lang-menu{position:absolute;top:120%;right:0;background:#fff;border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,0.18);padding:6px;display:none;flex-direction:column;min-width:70px;z-index:60;border:1px solid var(--line);}
  .lang-menu.open{display:flex;}
  .lang-menu button{background:none;border:none;text-align:left;padding:8px 10px;border-radius:6px;font-size:13.5px;font-weight:600;cursor:pointer;color:var(--ink);}
  .lang-menu button:hover{background:var(--paper);}
  .lang-menu button.active{background:var(--accent);color:#fff;}
  .icon-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:var(--paper);color:var(--accent);flex-shrink:0;position:relative;}
  .notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:var(--red);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1;}
  .notif-badge.hidden{display:none;}
  .icon-btn:hover{background:var(--accent2-soft);color:var(--accent);}
  .icon-btn svg{width:18px;height:18px;}
  .icon-btn.mode-active{background:var(--accent);color:#fff;}
  .navbar-right{display:flex;align-items:center;gap:4px;flex-shrink:0;}
  .pill-btn{display:flex;align-items:center;gap:7px;background:var(--accent2);border:1px solid var(--accent2);color:#fff;padding:9px 16px;border-radius:999px;font-weight:800;font-size:13.5px;white-space:nowrap;}
  .pill-btn:hover{filter:brightness(1.06);}
  /* Signature CTA treatment from the approved redesign: a dark ink pill
     with a small circular accent "arrow" chip riding at its trailing
     edge (see .cta-arrow, added via a tiny markup change on the one or
     two most prominent CTAs - #postAdBtn, .m-btn-primary equivalents). */
  .pill-btn.cta{background:var(--ink);border:none;color:var(--paper);padding:9px 8px 9px 18px;transition:transform .15s ease;}
  .pill-btn.cta:hover{filter:none;transform:translateY(-1px);}
  .cta-arrow{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0;}
  .cta-arrow svg{width:11px;height:11px;}
  .pill-btn.ghost{background:transparent;border:1.5px solid var(--ink);color:var(--ink);}
  .avatar-btn{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#5C8DFF,#2F6FED);border:none;display:grid;place-items:center;color:#fff;flex-shrink:0;}
  .back-btn{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);color:var(--teal-900);padding:9px 16px;border-radius:999px;font-weight:700;font-size:13.5px;}

  /* ---------- home hero ---------- */
  .hero-section{display:grid;grid-template-columns:1.15fr 0.85fr;gap:20px;align-items:center;padding:48px 6vw 40px;position:relative;overflow:hidden;}
  .hero-section::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 90% at 88% 15%, rgba(var(--accent-rgb),0.10), transparent 70%);pointer-events:none;}
  @media (max-width:820px){.hero-section{grid-template-columns:1fr;padding:34px 6vw 28px;}}
  .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--accent2-soft);color:var(--accent);font-weight:800;font-size:12px;padding:8px 16px 8px 8px;border-radius:999px;margin-bottom:20px;}
  .hero-eyebrow .chip{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex-shrink:0;}
  .hero-eyebrow .chip svg{width:11px;height:11px;}
  .hero-title{font-family:'Unbounded',sans-serif;font-size:clamp(28px,3.6vw,44px);font-weight:700;line-height:1.08;letter-spacing:-0.01em;}
  .hero-title em{font-style:normal;color:var(--accent);}
  .hero-sub{font-size:15px;line-height:1.6;color:rgba(var(--ink-rgb),0.65);max-width:440px;margin-top:16px;}
  .hero-actions{display:flex;align-items:center;gap:12px;margin-top:26px;flex-wrap:wrap;}
  .hero-actions .pill-btn{padding-top:13px;padding-bottom:13px;font-size:14.5px;}
  .hero-actions .pill-btn.cta{padding:8px 8px 8px 22px;}
  /* "E'lonlarni ko'rish" was redundant next to "E'lon joylash" - the
     listings grid is one scroll away regardless, on any screen size. */
  #heroBrowseBtn{display:none;}
  .hero-stats{display:flex;gap:26px;margin-top:28px;}
  .hero-stats div b{display:block;font-family:'Unbounded',sans-serif;font-size:19px;font-weight:700;}
  .hero-stats div span{font-size:11px;color:rgba(var(--ink-rgb),0.5);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
  .hero-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:220px;}
  .hero-icon{width:190px;height:190px;border-radius:48px;background:radial-gradient(120% 120% at 28% 18%, var(--accent-bright), var(--accent) 55%, var(--accent-deep) 100%);position:relative;box-shadow:inset 0 3px 0 rgba(255,255,255,0.35), inset 0 -18px 36px rgba(0,0,0,0.18), 0 34px 60px -22px rgba(var(--accent-rgb),0.55);display:grid;place-items:center;}
  .hero-icon svg{width:84px;height:84px;position:relative;z-index:1;}
  .hero-float-chip{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 16px;font-size:12.5px;font-weight:800;box-shadow:0 16px 30px -12px rgba(var(--shadow-rgb),0.3);display:flex;align-items:center;gap:8px;z-index:1;}
  .hero-float-chip.c1{top:8%;left:2%;}
  .hero-float-chip svg{width:15px;height:15px;color:var(--accent);flex-shrink:0;}
  @media (max-width:820px){
    .hero-float-chip{display:none;}
    .hero-icon{width:56px;height:56px;border-radius:16px;}
    .hero-icon svg{width:24px;height:24px;}
    /* pulled out of the grid flow into a small badge in the corner,
       instead of its own big full-width row - shrinks the whole hero
       and moves everything under it up, per feedback. Sits below the
       title (not at the very top, where it collided with the
       "tekshirilgan e'lonlar" eyebrow pill) - roughly level with the
       paragraph/stats, out of everything else's way. */
    .hero-art{position:absolute;top:190px;right:6vw;min-height:0;z-index:2;}
    /* the paragraph's max-width (440px) is wider than the phone
       itself, so it was running edge-to-edge straight under the icon.
       Narrowing it reserves a clear column on the right for the icon
       for its whole height, instead of the text wrapping behind it. */
    .hero-sub{max-width:calc(100% - 76px);}
    .hero-section{padding-bottom:24px;}
    /* the two hero CTA buttons are redundant on mobile - the bottom
       tabbar's own "+" tab already posts an ad, and browsing is just
       a scroll away - dropping them shortens the hero so the icon
       (now much smaller) sits right after the text, not way down. */
    .hero-actions{display:none;}
  }

  /* ---------- toolbar: segment + view controls + map + filters ---------- */
  .toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 6vw;gap:14px;flex-wrap:wrap;border-bottom:1px solid var(--line);border-top:1px solid var(--line);}
  .toolbar-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
  .toolbar-divider{width:1px;height:24px;background:var(--line);flex-shrink:0;}
  .segment{display:inline-flex;background:var(--paper);border-radius:100px;padding:3px;gap:2px;}
  .segment button{border:none;background:transparent;padding:7px 14px;border-radius:100px;font-weight:700;font-size:13px;color:rgba(var(--ink-rgb),0.55);cursor:pointer;white-space:nowrap;}
  .segment button.active{background:var(--accent);color:#fff;box-shadow:0 1px 3px rgba(var(--shadow-rgb),0.18);}
  body.dark .segment{background:var(--card-2);}
  body.dark .segment button.active{background:var(--accent);color:#fff;}
  .view-controls{display:flex;align-items:center;gap:6px;}
  .view-btn{width:36px;height:34px;border-radius:9px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;background:#fff;color:rgba(var(--ink-rgb),0.55);}
  body.dark .view-btn{background:var(--card);}
  .view-btn svg{width:16px;height:16px;}
  .view-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
  .map-btn{display:flex;align-items:center;gap:7px;background:var(--paper);border:1px solid transparent;padding:0 15px;height:34px;border-radius:9px;color:var(--ink);font-weight:700;font-size:13.5px;cursor:pointer;}
  .map-btn svg{width:15px;height:15px;}
  .filters-btn{display:flex;align-items:center;gap:8px;background:#fff;border:1.5px solid var(--ink);padding:8px 16px;border-radius:9px;font-weight:700;font-size:13.5px;color:var(--ink);cursor:pointer;margin-left:auto;}
  body.dark .filters-btn{background:var(--card);}
  .filters-btn svg{width:15px;height:15px;}
  @media (max-width:820px){
    /* on a narrow screen toolbar-left (segment+viewcontrols+map button)
       never fits next to "Filtrlar" on one line - the leftover
       margin-left:auto then left a big ugly gap once it wrapped to
       its own row. display:contents dissolves toolbar-left's own box
       so segment/map-btn/filters-btn all become plain flex items of
       one shared wrapping row: segment (flex:1 0 100%) forces its own
       full-width line, then "Xaritada" and "Filtrlar" are the only
       two items left and land side by side right under it. The 3-way
       grid/list/compact toggle is dropped on mobile - one screen-wide
       column is the only view that makes sense at this width anyway. */
    .toolbar{padding:12px 4vw;gap:10px;}
    .toolbar-left{display:contents;}
    .toolbar-divider{display:none;}
    .view-controls{display:none;}
    .segment{flex:1 0 100%;}
    .segment button{flex:1;padding:6px 11px;font-size:12px;}
    .map-btn{flex:1;justify-content:center;padding:0 12px;height:36px;font-size:12.5px;}
    .filters-btn{flex:1;justify-content:center;margin-left:0;padding:7px 14px;font-size:12.5px;}
  }

  /* ---------- filter pills row ---------- */
  .filter-pills{display:flex;gap:9px;padding:14px 6vw 6px;flex-wrap:wrap;position:relative;}
  .pill{display:flex;align-items:center;gap:6px;background:var(--paper);border:none;padding:9px 15px;border-radius:20px;font-weight:600;font-size:13px;color:var(--ink);cursor:pointer;white-space:nowrap;}
  .pill svg{width:14px;height:14px;flex-shrink:0;}
  .pill .chev{width:10px;height:10px;transition:transform .15s ease;}
  .pill.open .chev{transform:rotate(180deg);}
  .pill.selected{background:var(--accent);color:#fff;}
  .type-dropdown{position:absolute;top:100%;left:6vw;margin-top:6px;background:#fff;border-radius:12px;box-shadow:0 16px 36px rgba(var(--shadow-rgb),0.18);border:1px solid var(--line);padding:6px;min-width:190px;display:none;flex-direction:column;z-index:40;}
  .type-dropdown.open{display:flex;}
  .type-dropdown button{background:none;border:none;text-align:left;padding:10px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;}
  .type-dropdown button:hover{background:var(--paper);}
  .type-dropdown button.active{color:var(--accent);}

  /* ---------- HOME: vip + grid ---------- */
  .vip-section{padding:32px 6vw 8px;}
  .vip-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
  .eyebrow{display:block;font-size:12.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent2);font-weight:800;margin-bottom:6px;}
  .vip-head h2{font-size:28px;color:var(--teal-900);}
  .vip-sub{font-size:13.5px;color:rgba(var(--ink-rgb),0.6);max-width:340px;}
  .vip-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x proximity;}
  .vip-scroll::-webkit-scrollbar{height:6px;}
  .vip-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
  .vip-card{position:relative;flex:0 0 240px;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;height:300px;background:#111;color:#fff;box-shadow:0 10px 26px -14px rgba(18,21,31,0.45);clip-path:polygon(0 0,100% 0,100% 100%,26px 100%,0 calc(100% - 26px));transition:transform .25s ease;border:none;padding:0;text-align:left;display:block;}
  .vip-card:hover{transform:translateY(-5px);}
  .vip-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(0.6) saturate(1.05);}
  .vip-card .grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,21,31,0) 35%,rgba(10,12,20,0.92) 100%);}
  .vip-badge{position:absolute;top:13px;left:13px;background:var(--gold-soft);color:var(--gold-ink);font-weight:800;font-size:11px;letter-spacing:0.04em;padding:5px 10px;border-radius:999px;}
  .vip-info{position:absolute;left:15px;right:15px;bottom:15px;}
  .vip-price{font-family:'Unbounded',sans-serif;font-size:20px;font-weight:700;}
  .vip-place{font-size:12.5px;color:rgba(255,255,255,0.82);margin-top:3px;line-height:1.35;}
  .empty-note{font-size:13.5px;color:rgba(var(--ink-rgb),0.45);padding:20px 4px;}

  .results-bar{padding:22px 6vw 4px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .results-count{font-size:14px;}
  .results-count b{font-family:'Unbounded',sans-serif;font-size:19px;color:var(--teal-900);}
  .grid{padding:16px 6vw 70px;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;}
  .grid.view-list{display:flex;flex-direction:column;gap:12px;}
  .grid.view-compact{display:flex;flex-direction:column;gap:8px;}
  .listing{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1.5px solid var(--card-line);box-shadow:0 1px 2px rgba(var(--shadow-rgb),0.04), 0 14px 28px -20px rgba(var(--shadow-rgb),0.35);display:flex;flex-direction:column;transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;cursor:pointer;text-align:left;padding:0;width:100%;font-family:'Manrope',sans-serif;position:relative;}
  .listing:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 4px 10px rgba(var(--shadow-rgb),0.06), 0 20px 36px -18px rgba(var(--shadow-rgb),0.4);}
  .listing .thumb{position:relative;height:158px;overflow:hidden;}
  .listing .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .top-badge{position:absolute;top:12px;left:12px;background:var(--gold-soft);color:var(--gold-ink);font-size:11px;font-weight:800;letter-spacing:0.04em;padding:5px 9px;border-radius:999px;}
  .owner-badge{position:absolute;left:12px;background:rgba(255,255,255,0.94);color:var(--teal-900);font-size:11px;font-weight:800;padding:5px 9px;border-radius:999px;max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .type-badge{position:absolute;top:12px;right:12px;background:rgba(18,21,31,0.72);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:0.03em;padding:5px 9px;border-radius:999px;}
  .listing .body{padding:15px 16px 17px;display:flex;flex-direction:column;gap:6px;flex:1;}
  .listing .price{font-family:'Unbounded',sans-serif;font-weight:800;font-size:20px;color:var(--teal-900);font-variant-numeric:tabular-nums;}
  .listing .desc{font-size:13.5px;color:rgba(var(--ink-rgb),0.72);line-height:1.4;}
  .listing .meta{margin-top:auto;padding-top:9px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:rgba(var(--ink-rgb),0.5);border-top:1px dashed var(--line);}

  .grid.view-list .listing{flex-direction:row;}
  .grid.view-list .listing .thumb{width:220px;height:140px;flex-shrink:0;}
  .grid.view-list .listing .body{padding:14px 18px;}

  .grid.view-compact .listing{flex-direction:row;align-items:center;border-radius:12px;}
  .grid.view-compact .listing .thumb{width:56px;height:56px;flex-shrink:0;}
  .grid.view-compact .listing .body{flex:1;padding:9px 16px;flex-direction:row;align-items:center;justify-content:space-between;gap:14px;}
  .grid.view-compact .listing .desc,.grid.view-compact .listing .meta{display:none;}

  /* ---------- DETAIL PAGE ---------- */
  .detail-wrap{max-width:960px;margin:0 auto;padding:32px 6vw 80px;}
  .detail-top-row{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;margin-bottom:28px;align-items:start;}
  @media (max-width:760px){.detail-top-row{grid-template-columns:1fr;}}
  .gallery-main{position:relative;height:380px;border-radius:20px;overflow:hidden;background:#111;}
  .gallery-main img{width:100%;height:100%;object-fit:cover;display:block;}
  .gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,0.92);border:none;display:grid;place-items:center;font-size:16px;color:var(--teal-900);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.2);}
  .gallery-arrow.prev{left:14px;}
  .gallery-arrow.next{right:14px;}
  .gallery-counter{position:absolute;bottom:14px;right:14px;background:rgba(18,21,31,0.65);color:#fff;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;}
  .gallery-thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:2px;}
  .gallery-thumbs img{width:64px;height:52px;object-fit:cover;border-radius:10px;cursor:pointer;opacity:0.5;border:2px solid transparent;flex-shrink:0;}
  .gallery-thumbs img.active{opacity:1;border-color:var(--accent);}
  .detail-actions-panel{display:flex;flex-direction:column;gap:14px;}
  .action-tags{display:flex;gap:8px;flex-wrap:wrap;}
  .action-btns-row{display:flex;gap:10px;flex-wrap:wrap;}
  .action-btn{flex:1;min-width:130px;padding:12px 14px;border-radius:999px;font-weight:800;font-size:13px;text-align:center;border:none;}
  .action-btn.outline{background:#fff;border:1.5px solid var(--accent2);color:var(--accent2);}
  .action-btn.filled{background:var(--accent2);color:#fff;}
  .view-like-row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
  .view-count{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);font-weight:700;}
  .like-btn{background:var(--paper);border:none;border-radius:999px;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer;color:var(--ink);}
  .like-btn:disabled{opacity:0.7;cursor:default;}
  .sold-sticker{position:absolute;top:14px;left:14px;z-index:5;background:var(--red);color:#fff;font-weight:800;font-size:13px;letter-spacing:0.03em;padding:7px 16px;border-radius:999px;box-shadow:0 6px 16px rgba(0,0,0,0.25);}
  .detail-title-block{margin-bottom:22px;}
  .detail-price{font-family:'Unbounded',sans-serif;font-size:34px;font-weight:800;color:var(--teal-900);font-variant-numeric:tabular-nums;}
  .detail-title{font-size:15px;color:rgba(var(--ink-rgb),0.65);margin-top:6px;}
  .location-row{display:flex;align-items:center;gap:8px;margin-top:8px;color:rgba(var(--ink-rgb),0.65);font-size:13.5px;}
  .location-row .pin{color:var(--accent2);font-size:15px;}
  .detail-tag{background:var(--turquoise-soft);color:var(--teal-700);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px;}
  .detail-tag.gold{background:var(--gold-soft);color:var(--gold-ink);}
  .detail-tag.top{background:var(--accent2-soft);color:var(--accent-deep);}
  .detail-section{margin-top:28px;}
  .detail-section h3{font-size:17px;color:var(--teal-900);margin-bottom:10px;}
  .detail-desc-text{font-size:14.5px;color:rgba(var(--ink-rgb),0.75);line-height:1.65;}
  .info-list{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:4px 20px;}
  .info-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px dashed var(--line);font-size:14px;}
  .info-row:last-child{border-bottom:none;}
  .info-row .il{color:rgba(var(--ink-rgb),0.6);}
  .info-row .iv{font-weight:700;color:var(--teal-900);text-align:right;}
  .section-head-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
  .report-pill{background:var(--red-soft);color:var(--red);font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;border:none;}
  .location-row2{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:rgba(var(--ink-rgb),0.7);font-size:13.5px;}
  .location-row2 .pin{color:var(--accent2);}
  .map-box{height:260px;border-radius:16px;overflow:hidden;border:1px solid var(--line);margin-top:4px;background:#eee;position:relative;}
  .map-box .leaflet-container{height:100%;width:100%;font-family:'Manrope',sans-serif;}
  .map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;color:rgba(var(--ink-rgb),0.5);font-size:13px;}
  .map-caption{font-size:12px;color:rgba(var(--ink-rgb),0.5);margin-top:8px;}
  .owner-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap;}
  .owner-avatar{width:52px;height:52px;border-radius:50%;background:var(--turquoise);color:#fff;font-family:'Unbounded',sans-serif;font-weight:700;font-size:19px;display:grid;place-items:center;flex-shrink:0;}
  .owner-name{font-weight:800;font-size:15px;color:var(--teal-900);}
  /* the badge's checkmark is a literal cutout in the SVG path (evenodd
     fill-rule), not a separately-colored stroke - so it needs a solid
     backing behind it to always read as "white check on blue seal"
     regardless of what page background it happens to sit on. */
  .verified-tick{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;color:var(--verified-blue);vertical-align:middle;position:relative;}
  .verified-tick::before{content:'';position:absolute;inset:3px;background:#fff;border-radius:50%;z-index:0;}
  .verified-tick svg{width:100%;height:100%;position:relative;z-index:1;}
  .owner-role{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);margin-top:2px;}
  .owner-contact-btn{margin-left:auto;background:var(--accent2);color:#fff;border:1.5px solid var(--accent2);padding:11px 20px;border-radius:999px;font-weight:800;font-size:13.5px;}
  .similar-section{margin-top:34px;}
  .similar-scroll{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px;}
  .similar-card{flex:0 0 220px;background:var(--card);border-radius:16px;overflow:hidden;border:1px solid var(--line);cursor:pointer;transition:transform .2s ease;text-align:left;padding:0;font-family:'Manrope',sans-serif;}
  .similar-card:hover{transform:translateY(-3px);}
  .similar-card .thumb{height:130px;overflow:hidden;}
  .similar-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .similar-card .body{padding:12px 14px 14px;}
  .similar-card .price{font-family:'Unbounded',sans-serif;font-weight:700;font-size:17px;color:var(--teal-900);}
  .similar-card .desc{font-size:12.5px;color:rgba(var(--ink-rgb),0.65);margin-top:3px;line-height:1.35;}

  /* ---------- seller profile ---------- */
  .seller-head-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;}
  .seller-head-card .owner-avatar{width:64px;height:64px;font-size:24px;}
  .seller-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-bottom:30px;}
  .sstat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
  .sstat .n{font-family:'Unbounded',sans-serif;font-size:26px;font-weight:700;color:var(--teal-900);}
  .sstat .l{font-size:12px;color:rgba(var(--ink-rgb),0.55);margin-top:2px;}
  .sstat.vip .n{color:#1C4F8A;}
  .sstat.top .n{color:#8A5518;}

  /* ---------- ADMIN DASHBOARD ---------- */
  .admin-body{padding:28px 5vw 60px;max-width:1200px;margin:0 auto;}
  .admin-tabs{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;}
  .tab-btn{background:none;border:1px solid var(--line);padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;color:var(--teal-700);}
  .tab-btn.active{background:var(--accent);color:#fff;border-color:var(--accent);}
  .admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:26px;}
  .astat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;}
  .astat .n{font-family:'Unbounded',sans-serif;font-size:26px;font-weight:700;color:var(--teal-900);}
  .astat .l{font-size:12px;color:rgba(var(--ink-rgb),0.55);margin-top:2px;}
  .queue-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;gap:14px;align-items:center;margin-bottom:10px;flex-wrap:wrap;cursor:pointer;}
  .queue-row img{width:80px;height:60px;border-radius:10px;object-fit:cover;flex-shrink:0;}
  .queue-info{flex:1;min-width:160px;}
  .queue-info .qprice{font-family:'Unbounded',sans-serif;font-weight:700;font-size:16px;color:var(--teal-900);}
  .queue-info .qdesc{font-size:12.5px;color:rgba(var(--ink-rgb),0.65);margin-top:2px;}
  .queue-info .qseller{font-size:11px;color:var(--turquoise);font-weight:700;margin-top:4px;}
  .queue-actions{display:flex;gap:8px;flex-shrink:0;}
  .qbtn{border:none;padding:8px 13px;border-radius:9px;font-size:12px;font-weight:800;}
  .qbtn.del{background:rgba(var(--ink-rgb),0.08);color:var(--ink);}
  .qbtn:not(.del){background:var(--turquoise-soft);color:var(--turquoise);}
  .empty-admin{text-align:center;padding:60px 20px;color:rgba(var(--ink-rgb),0.45);font-size:14px;}
  .profile-row{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;display:flex;align-items:center;gap:14px;margin-bottom:10px;}
  .profile-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent2);color:#fff;font-family:'Unbounded',sans-serif;font-weight:700;font-size:16px;display:grid;place-items:center;flex-shrink:0;}
  .profile-info{flex:1;}
  .profile-name{font-weight:800;font-size:14.5px;color:var(--teal-900);}
  .profile-meta{font-size:12px;color:rgba(var(--ink-rgb),0.55);margin-top:2px;}
  .profile-count{font-size:12.5px;color:var(--turquoise);font-weight:700;}

  /* --teal-900 inverts between light/dark mode (it's really "strong ink"
     colour, dark in light mode / light cream in dark mode) - a toast
     needs to stay readable in BOTH modes, so it can't ride that
     variable: in dark mode it used to turn into a pale, off-white/cream
     blob with white text on top of it. Pinned to the accent colour
     instead, which is a strong, legible orange in both themes. */
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--accent2);color:#fff;padding:12px 22px;border-radius:999px;font-size:13.5px;font-weight:600;opacity:0;pointer-events:none;transition:all .25s ease;z-index:100;}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  .overlay{position:fixed;inset:0;background:rgba(18,21,31,0.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:60;}
  .overlay.show{display:flex;}
  .modal{background:var(--paper);border-radius:20px;max-width:360px;width:100%;padding:28px;position:relative;box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);}
  .modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(var(--ink-rgb),0.08);border:none;font-size:16px;color:var(--teal-900);display:grid;place-items:center;}
  .modal h3{font-size:22px;color:var(--teal-900);margin-bottom:4px;}
  .modal .modal-sub{font-size:13px;color:rgba(var(--ink-rgb),0.6);margin-bottom:20px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;font-weight:700;color:var(--teal-700);margin-bottom:6px;}
  .field input,.field textarea,.field select{width:100%;border:1.5px solid var(--line);border-radius:14px;padding:11px 14px;font-family:'Manrope',sans-serif;font-size:14px;background:var(--card);color:var(--ink);}
  .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
  .field textarea{min-height:80px;resize:vertical;}
  .submit-btn{width:100%;background:var(--ink);color:var(--paper);border:none;padding:13px;border-radius:999px;font-weight:800;font-size:14.5px;margin-top:6px;}
  .error-text{color:var(--red);font-size:12.5px;margin-top:-8px;margin-bottom:10px;display:none;}

  /* ---------- footer ---------- */
  .site-footer{background:var(--accent);color:#fff;padding:40px 6vw 24px;margin-top:20px;}
  .footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:28px;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,0.22);}
  .footer-brand .logo{color:#fff;margin-bottom:10px;}
  .footer-brand p{font-size:13px;line-height:1.6;color:rgba(255,255,255,0.75);max-width:280px;margin:0;}
  .footer-col h4{font-size:12.5px;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:#fff;margin-bottom:14px;}
  .footer-col a{display:block;font-size:13.5px;color:#fff;margin-bottom:10px;}
  .footer-col a:hover{text-decoration:underline;}
  .footer-social{display:flex;gap:10px;margin-top:14px;}
  .footer-social a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.3);color:#fff;transition:background .15s ease,transform .15s ease;}
  .footer-social a:hover{background:rgba(255,255,255,0.3);transform:translateY(-2px);}
  .footer-social svg{width:17px;height:17px;}
  .footer-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;font-size:12px;}
  @media (max-width:640px){.footer-top{grid-template-columns:1fr;gap:22px;}}

  /* ---------- info pages ---------- */
  .info-wrap{max-width:720px;margin:0 auto;padding:40px 6vw 80px;}
  .info-wrap h2{font-size:26px;color:var(--teal-900);margin-bottom:22px;}
  .faq-item{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin-bottom:14px;}
  .faq-item h4{font-size:14.5px;font-weight:800;color:var(--teal-900);margin-bottom:8px;}
  .faq-item p{font-size:13.5px;color:rgba(var(--ink-rgb),0.72);line-height:1.6;margin:0;}
  .contact-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:12px;}
  .contact-row .ic{width:38px;height:38px;border-radius:50%;background:var(--accent2-soft);color:#7A4A24;display:grid;place-items:center;font-size:16px;flex-shrink:0;}
  .contact-row a{font-weight:700;font-size:14.5px;color:var(--teal-900);}
  .info-lead{font-size:14px;color:rgba(var(--ink-rgb),0.7);line-height:1.65;margin-bottom:22px;}
  .offer-text p{font-size:13.5px;color:rgba(var(--ink-rgb),0.72);line-height:1.7;margin-bottom:14px;}

  /* ---------- full map view ---------- */
  /* 100vh on mobile is the height as if the browser's address bar were
     always hidden, even while it's showing - so the map (sized by vh)
     ends up taller than what's actually visible right after load, and
     as the address bar auto-hides/shows on scroll, the true visible
     area keeps changing under it. The fixed Yandex/"Menga yaqin"
     buttons (anchored to the real viewport bottom) then drift in and
     out of view as that mismatch shifts - "bir ko'rinib bir
     ko'rinmay". 100dvh tracks the actual visible viewport instead;
     kept as a second declaration so browsers without dvh support just
     keep the vh line above (they ignore the unknown unit and fall
     back to the FIRST valid value already set, not defaulting to
     nothing). */
  /* On a very short viewport (a phone turned sideways, ~180-200px
     tall) subtracting the fixed header/bar overhead went negative,
     collapsing the map to ~0 height - everything (search box, the
     fixed Yandex/"Menga yaqin" buttons) then visually piled on top of
     each other in whatever sliver was left, looking like they
     randomly appear/disappear. max() puts a floor under it so the map
     never collapses, even if it means a bit of page scroll instead. */
  #mapFull{height:max(240px, calc(100vh - 70px - 61px));height:max(240px, calc(100dvh - 70px - 61px));width:100%;}
  @media (max-width:820px){
    #mapFull .leaflet-bottom{margin-bottom:4px;}
  }
  .leaflet-price-pin{background:var(--accent2);color:#fff;font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:16px;box-shadow:0 4px 10px rgba(0,0,0,0.25);white-space:nowrap;cursor:pointer;transform:translateY(-6px);position:relative;font-family:'Manrope',sans-serif;}
  /* "Sizning joylashuvingiz" fixed dot on the post-listing location map -
     stays put once the separate draggable property pin is moved away. */
  .my-location-dot{width:16px;height:16px;}
  .my-location-dot span{display:block;width:12px;height:12px;margin:2px;border-radius:50%;background:#2F6FED;border:2.5px solid #fff;box-shadow:0 0 0 4px rgba(47,111,237,0.28),0 2px 6px rgba(0,0,0,0.3);}
  .leaflet-price-pin::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid var(--accent2);}
  .map-popup-link{display:inline-block;margin-top:6px;font-weight:800;color:var(--accent2);text-decoration:underline;cursor:pointer;}

  /* ---------- side panels ---------- */
  /* 0.4 alpha only dimmed the page behind an open drawer - a bright
     map (or any light content) stayed clearly legible through it,
     reading as "why is a map showing inside the panel". Dark enough
     now that whatever's behind is properly obscured, not just tinted. */
  .backdrop{position:fixed;inset:0;background:rgba(10,10,8,0.82);z-index:70;display:none;}
  .backdrop.open{display:block;}
  .side-panel{position:fixed;top:0;right:-420px;width:400px;max-width:92vw;height:100%;background:#fff;z-index:80;box-shadow:-10px 0 30px rgba(0,0,0,0.2);transition:right .25s ease;display:flex;flex-direction:column;}
  body.dark .side-panel{background:var(--card);}
  .side-panel.open{right:0;}
  .side-panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line);flex-shrink:0;}
  .side-panel-head h3{margin:0;font-size:19px;font-weight:800;}
  .close-x{width:32px;height:32px;border-radius:50%;border:none;background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);}
  .side-panel-body{padding:18px 22px;overflow-y:auto;flex:1;}
  .ps-search{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:12px;padding:11px 14px;margin-bottom:14px;}
  .ps-search input{border:none;background:transparent;outline:none;flex:1;font-size:14px;color:var(--ink);}
  .ps-count{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);margin-bottom:10px;font-weight:600;}
  .ps-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-radius:10px;cursor:pointer;}
  .ps-row:hover{background:var(--paper);}
  .ps-avatar{width:42px;height:42px;border-radius:50%;flex-shrink:0;background:linear-gradient(135deg,#5C8DFF,#2F6FED);}
  .ps-name{font-weight:700;font-size:14.5px;}
  .ps-handle{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);margin-top:1px;}
  .side-panel:has(#threadMessages) .side-panel-body{display:flex;flex-direction:column;padding:0;}
  .thread-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:18px 22px;}
  .msg-bubble{max-width:78%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.4;word-wrap:break-word;}
  .msg-bubble.mine{align-self:flex-end;background:var(--turquoise);color:#fff;border-bottom-right-radius:4px;}
  .msg-bubble.theirs{align-self:flex-start;background:var(--paper);color:var(--ink);border-bottom-left-radius:4px;}
  .msg-time{font-size:10.5px;opacity:.7;margin-top:3px;display:block;}
  .thread-input-row{display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--line);flex-shrink:0;}
  .thread-input-row input{flex:1;border:none;background:var(--paper);border-radius:12px;padding:11px 14px;font-size:14px;outline:none;color:var(--ink);}
  .thread-input-row button{background:var(--turquoise);color:#fff;border:none;border-radius:12px;padding:0 18px;font-weight:700;font-size:13.5px;cursor:pointer;}
  .conv-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-radius:10px;cursor:pointer;}
  .conv-row:hover{background:var(--paper);}
  .conv-name-row{display:flex;align-items:center;gap:8px;}
  .conv-unread{background:var(--red);color:#fff;font-size:11px;font-weight:800;border-radius:999px;min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;}
  .conv-preview{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);margin-top:2px;}
  .toggle-row{display:flex;gap:8px;}
  .toggle-row button{flex:1;padding:12px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-weight:700;font-size:14px;cursor:pointer;color:var(--ink);}
  .toggle-row button.sel{background:var(--ink);border-color:var(--ink);color:var(--paper);}

  /* ---------- my profile ---------- */
  .profile-shell{display:flex;min-height:70vh;}
  .profile-side{width:220px;flex-shrink:0;border-right:1px solid var(--line);padding:24px 14px;display:flex;flex-direction:column;gap:2px;}
  .profile-nav-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:10px;border:none;background:none;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;text-align:left;}
  .profile-nav-item svg{width:18px;height:18px;flex-shrink:0;color:rgba(var(--ink-rgb),0.5);}
  .profile-nav-item:hover{background:var(--paper);}
  .profile-nav-item.active{background:var(--accent);color:#fff;}
  .profile-nav-item.active svg{color:#fff;}
  .profile-nav-item.logout{margin-top:auto;color:var(--red);}
  .profile-nav-item.logout svg{color:var(--red);}
  .profile-content{flex:1;padding:28px 34px;}
  @media (max-width:820px){.profile-shell{flex-direction:column;}.profile-side{width:100%;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--line);}}
  .profile-header-row{display:flex;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
  .big-avatar{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,#5C8DFF,#2F6FED);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Unbounded',sans-serif;font-weight:700;font-size:22px;}
  .btn-outline{background:var(--paper);border:none;padding:10px 18px;border-radius:20px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:6px;}
  .btn-black{background:var(--teal-900);color:#fff;border:none;padding:10px 18px;border-radius:20px;font-weight:700;font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:6px;}
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0 24px;}
  @media (max-width:600px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
  .stat-box{background:var(--paper);border-radius:12px;padding:16px;}
  .stat-box .num{font-weight:800;font-size:20px;}
  .stat-box .label{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);margin-top:3px;}
  .profile-tabs{display:flex;gap:26px;border-bottom:1px solid var(--line);}
  .profile-tab{display:flex;align-items:center;gap:7px;background:none;border:none;padding:12px 2px;font-weight:700;font-size:14px;color:rgba(var(--ink-rgb),0.5);cursor:pointer;border-bottom:2px solid transparent;}
  .profile-tab.active{color:var(--ink);border-bottom-color:var(--accent);}
  .empty-state{display:flex;flex-direction:column;align-items:center;text-align:center;padding:60px 20px;color:rgba(var(--ink-rgb),0.5);}
  .empty-state .emoji-box{width:90px;height:90px;border-radius:50%;background:var(--paper);display:flex;align-items:center;justify-content:center;margin-bottom:18px;font-size:34px;}
  .empty-state p{font-weight:700;font-size:14.5px;color:var(--ink);margin:0;}
  .balance-card{width:320px;max-width:100%;background:linear-gradient(135deg,var(--teal-900),#37432B);border-radius:16px;padding:20px;color:#fff;}
  .balance-card .brand{color:var(--accent2);font-weight:800;font-size:13px;letter-spacing:0.5px;}
  .balance-card .phone{font-size:13px;opacity:0.85;margin-top:20px;}
  .balance-card .amount{font-weight:800;font-size:22px;margin-top:6px;}
  .amount-input{width:100%;max-width:320px;background:var(--paper);border:none;border-radius:12px;padding:13px 15px;font-size:14px;outline:none;color:var(--ink);}
  .quick-amounts{display:flex;gap:8px;margin-top:10px;}
  .quick-amounts button{background:var(--paper);border:none;padding:9px 16px;border-radius:9px;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--ink);}
  .quick-amounts button.sel{background:var(--accent);color:#fff;}
  .pay-methods{display:flex;gap:12px;margin-top:16px;}
  .pay-method{border:2px solid var(--line);border-radius:12px;padding:16px 24px;cursor:pointer;font-weight:800;font-size:15px;}
  .pay-method.sel{border-color:var(--accent);}
  .btn-full-black{width:100%;background:var(--ink);color:var(--paper);border:none;padding:15px 46px 15px 15px;border-radius:999px;font-weight:800;font-size:15px;cursor:pointer;position:relative;transition:transform .15s ease;text-align:center;}
  .btn-full-black:hover:not(:disabled){transform:translateY(-1px);}
  .btn-full-black:not(:disabled)::after{content:'';position:absolute;right:7px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:14px;}
  .verify-box{max-width:520px;text-align:center;margin:10px auto 0;}
  .verify-box .badge{width:64px;height:64px;border-radius:50%;background:var(--turquoise);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;font-size:28px;}
  .verify-list{background:var(--paper);border-radius:14px;padding:18px;text-align:left;margin-bottom:14px;}
  .verify-item{display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;font-size:13.5px;}

  /* ---------- post-ad wizard ---------- */
  .post-head{display:flex;align-items:center;gap:16px;padding:22px 6vw 4px;}
  .post-body{padding:20px 6vw 60px;max-width:760px;margin:0 auto;}
  .post-title{font-weight:800;font-size:21px;margin:6px 0 18px;}
  .section-label{font-size:12.5px;font-weight:800;color:rgba(var(--ink-rgb),0.5);text-transform:uppercase;letter-spacing:0.4px;margin:20px 0 10px;}
  .option-row{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;margin-bottom:4px;cursor:pointer;font-weight:700;font-size:15px;transition:background .15s ease;}
  .option-row .opt-ic{width:20px;height:20px;flex-shrink:0;color:rgba(var(--ink-rgb),0.6);}
  .option-row:hover{background:var(--paper);}
  .breadcrumb{display:flex;align-items:center;gap:8px;color:rgba(var(--ink-rgb),0.5);font-size:13px;font-weight:600;margin-bottom:20px;}
  .upload-box{background:var(--paper);border-radius:16px;padding:20px;margin-bottom:22px;}
  .upload-tile{width:78px;height:78px;border-radius:12px;background:#fff;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(var(--ink-rgb),0.5);font-size:22px;}
  .upload-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px;}
  .upload-thumb{position:relative;width:78px;height:78px;border-radius:12px;overflow:hidden;flex-shrink:0;}
  .upload-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
  .upload-thumb .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,0.6);color:#fff;border:none;font-size:12px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  @media (max-width:700px){.two-col{grid-template-columns:1fr;}}
  .location-card{background:var(--paper);border-radius:14px;padding:16px 18px;margin-bottom:26px;}
  .tier-info{font-size:12.5px;color:rgba(var(--ink-rgb),0.6);margin-top:8px;line-height:1.5;}
  .tier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
  @media (max-width:640px){.tier-cards{grid-template-columns:1fr;}}
  .tier-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:16px 14px;cursor:pointer;font-family:'Manrope',sans-serif;}
  .tier-card.sel{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink);}
  .tier-card-icon{width:34px;height:34px;border-radius:10px;background:var(--paper);color:var(--accent);display:flex;align-items:center;justify-content:center;}
  .tier-card-icon svg{width:18px;height:18px;}
  .tier-card-name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:14.5px;color:var(--ink);}
  .tier-card-price{font-family:'Unbounded',sans-serif;font-weight:700;font-size:17px;color:var(--ink);}
  .tier-card-feats{font-size:12px;color:rgba(var(--ink-rgb),0.6);line-height:1.6;}
  .tier-card-vip{border-color:var(--gold);}
  .tier-card-vip .tier-card-icon{background:var(--gold-soft);color:var(--gold-ink);}
  .tier-card-vip.sel{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold);}
  .tier-card-badge{position:absolute;top:-10px;left:12px;background:var(--gold-soft);color:var(--gold-ink);font-size:11px;font-weight:800;padding:3px 10px;border-radius:8px;}
  .payment-summary{background:var(--paper);border-radius:14px;padding:16px 18px;margin:18px 0;}
  .payment-summary-row{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;color:var(--teal-900);}
  .payment-amount{font-family:'Unbounded',sans-serif;font-size:22px;font-weight:700;color:var(--turquoise);}
  .payment-summary-note{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);margin-top:6px;}
  .location-card .lt{font-weight:800;font-size:14px;margin-bottom:6px;}
  #postLocationMap{height:320px;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
  .post-location-search{display:flex;gap:8px;margin-top:14px;}
  .post-location-search input{flex:1;border:1.5px solid var(--line);border-radius:9px;padding:0 14px;height:38px;font-size:13.5px;font-family:'Manrope',sans-serif;background:var(--paper);color:var(--ink);outline:none;}
  .post-location-search input:focus{border-color:var(--accent);}
  .post-location-search button{background:var(--accent2);color:#fff;border:none;padding:0 18px;height:38px;border-radius:9px;font-weight:800;font-size:13px;cursor:pointer;flex-shrink:0;}
  .post-location-map-wrap{position:relative;margin-top:10px;}
  .post-location-expand-btn{position:absolute;top:10px;right:10px;z-index:1000;width:34px;height:34px;border-radius:9px;background:#fff;border:none;box-shadow:0 4px 12px rgba(0,0,0,0.22);display:flex;align-items:center;justify-content:center;color:var(--teal-900);cursor:pointer;}
  /* full-screen mode: same map instance, just its wrapper grows to
     cover the whole viewport - click again (icon becomes a shrink
     arrow) to go back to the normal in-flow size. */
  .post-location-map-wrap.fullscreen{position:fixed;inset:0;z-index:2000;margin:0;}
  .post-location-map-wrap.fullscreen #postLocationMap{height:100%;border-radius:0;border:none;}
  @media (max-width:820px){
    #postLocationMap{height:260px;}
  }
  .loc-hint{font-size:12px;color:rgba(var(--ink-rgb),0.55);margin-top:8px;}

  /* ---------- auth screens ---------- */
  .auth-gate{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;background:rgba(20,24,15,0.55);}
  .auth-gate-box{background:#fff;border-radius:20px;padding:32px 30px;max-width:420px;width:90%;text-align:center;box-shadow:0 30px 60px rgba(0,0,0,0.3);}
  .auth-gate-actions{display:flex;gap:12px;margin-top:10px;}
  .auth-gate-actions button{flex:1;padding:13px;border-radius:22px;font-weight:700;font-size:14.5px;border:none;cursor:pointer;}
  .auth-full{position:fixed;inset:0;z-index:96;display:flex;background:#fff;}
  .auth-full-image{flex:1;position:relative;display:none;overflow:hidden;background:var(--teal-900);}
  .auth-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.12) brightness(0.92);transform:scale(1.02);}
  /* Real photo backdrop, logo centered over it - a moody, editorial
     composition (in the spirit of joymee.uz's own splash screen, not a
     copy of it: our own colors/mark, our own photo). The source photo is
     black-and-white; --auth-hero-tint recolors it into our own navy
     brand instead of leaving it a generic grayscale stock shot -
     mix-blend-mode:color keeps the photo's own light/dark shape
     (the "luminosity") and only replaces its hue/saturation. */
  .auth-hero-tint{position:absolute;inset:0;background:linear-gradient(150deg,#4A6FA8 0%,#1C2E4D 65%,#10151D 100%);mix-blend-mode:color;opacity:0.85;}
  .auth-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,21,29,0.55) 0%,rgba(16,21,29,0.12) 32%,rgba(16,21,29,0.14) 58%,rgba(16,21,29,0.82) 100%);}
  .auth-full-logo{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;z-index:1;}
  .auth-full-form{flex:1;max-width:460px;margin:0 auto;display:flex;flex-direction:column;justify-content:center;padding:40px;position:relative;}
  .auth-full-form h2{font-size:26px;margin:0 0 26px;text-align:center;}
  .auth-full-form label{display:block;font-weight:700;font-size:13.5px;margin-bottom:8px;}
  .auth-tabs{display:flex;gap:6px;background:var(--paper);border-radius:999px;padding:4px;margin-bottom:14px;}
  .auth-tab{flex:1;border:none;background:transparent;padding:10px 8px;border-radius:999px;font-weight:800;font-size:13.5px;color:var(--ink);cursor:pointer;}
  .auth-tab.active{background:var(--accent);color:#fff;}
  .login-code-box{font-size:30px;font-weight:800;letter-spacing:0.12em;text-align:center;background:var(--paper);border-radius:14px;padding:16px;margin:14px 0;user-select:all;}
  .auth-full-form input{width:100%;background:var(--paper);border:none;border-radius:12px;padding:14px 16px;font-size:15px;outline:none;margin-bottom:12px;color:var(--ink);}
  .auth-terms{font-size:12.5px;color:rgba(var(--ink-rgb),0.55);text-align:center;margin:4px 0 22px;line-height:1.5;}
  .auth-close{position:absolute;top:20px;right:20px;}
  @media (min-width:760px){.auth-full-image{display:block;}}
  .btn-full-outline{width:100%;background:var(--paper);border:none;padding:15px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;color:rgba(var(--ink-rgb),0.6);margin-top:10px;}
  .otp-phone{font-weight:800;font-size:19px;margin-bottom:14px;}
  .otp-choice{width:100%;padding:15px;border-radius:22px;border:none;font-weight:700;font-size:14.5px;cursor:pointer;margin-bottom:10px;}
  .otp-choice.tg{background:var(--turquoise);color:#fff;}
  .otp-choice.sms{background:var(--teal-900);color:#fff;}
  .otp-choice.edit{background:var(--paper);color:rgba(var(--ink-rgb),0.6);}
  .code-boxes{display:flex;gap:10px;margin-bottom:20px;}
  .code-boxes input{width:100%;text-align:center;font-size:20px;font-weight:800;padding:14px 0;background:var(--paper);border:2px solid transparent;border-radius:12px;outline:none;color:var(--ink);}
  .code-boxes input:focus{border-color:var(--accent);}

  @media (max-width:720px){
    .owner-contact-btn{margin-left:0;width:100%;}
  }

  /* ---------- xarita qidiruv va joylashuv ---------- */
  /* "Yandex xaritada ochish" / "Menga yaqin" - real Leaflet map
     controls now (see addMapCornerControls, 08-full-map.js), styled
     on top of Leaflet's own already-proven-visible .leaflet-bar
     look rather than a fresh position:fixed button. */
  .map-corner-btn a{width:38px;height:38px;line-height:38px;display:flex;align-items:center;justify-content:center;color:var(--teal-900);}
  /* joymee-style: search sits in a plain top bar (normal flow, right
     under the header), not floating over the map. */
  .map-search-row{position:relative;z-index:30;padding:12px 6vw;background:var(--card);border-bottom:1px solid var(--line);}
  .map-search-box2{display:flex;align-items:center;gap:9px;background:var(--paper);border-radius:22px;padding:9px 16px;}
  .map-search-box2 svg{width:16px;height:16px;color:rgba(var(--ink-rgb),0.5);flex-shrink:0;}
  .map-search-box2 input{flex:1;border:none;background:transparent;outline:none;font-size:14px;color:var(--ink);font-family:'Manrope',sans-serif;}
  .map-search-box2 button{background:var(--accent2);border:none;padding:8px 16px;border-radius:9px;font-weight:800;font-size:13px;cursor:pointer;color:#fff;flex-shrink:0;}
  .user-location-pin{width:38px;height:38px;border-radius:50%;background:var(--turquoise);color:#fff;border:3px solid #fff;box-shadow:0 0 0 4px rgba(var(--shadow-rgb),0.15),0 4px 10px rgba(var(--shadow-rgb),0.3);display:flex;align-items:center;justify-content:center;font-family:'Manrope',sans-serif;font-weight:800;font-size:11px;}

  /* ---------- admin floating tugma ---------- */
  .admin-fab{position:fixed;bottom:24px;right:24px;width:50px;height:50px;border-radius:50%;background:var(--teal-900);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(0,0,0,0.28);cursor:pointer;z-index:90;}
  .admin-fab:hover{filter:brightness(1.15);}
  .admin-fab.hidden{display:none;}

  /* ============================================================
     MOBIL PASTKI NAVIGATSIYA (telefon uchun alohida ko'rinish)
     Kompyuterda (>820px) butunlay yashirin - o'sha yerda yuqoridagi
     to'liq nav qatori ishlatiladi. Telefonda esa asosiy 5 ta amal
     doim qo'l ostida: Bosh sahifa / Qidiruv / E'lon joylash /
     Xabarlar / Profil - dasturlardagi (Instagram va h.k.) odatiy
     pastki panel uslubida.
     ============================================================ */
  .mobile-tabbar{display:none;}

  @media (max-width:820px){
    /* Telefonda tepadagi qatorni ixchamlashtiramiz: profil tugmasi
       pastki panelda takrorlangani uchun bu yerdan olib tashlanadi -
       layk va profil-qidirish esa (o'z alohida bo'limi bo'lmagani
       uchun) joyida qoladi. */
    #avatarBtn{display:none;}
    header.nav{padding:12px 4vw;gap:10px;}
    .navbar-search{margin:0 6px;}

    body{padding-bottom:68px;}
    /* pastki panelga tegib turadigan "suzuvchi" elementlarni ko'tarib qo'yamiz */
    .admin-fab{bottom:80px;}
    .map-search-row{padding:10px 4vw;}
    /* header (70) + bottom tabbar w/ safety margin (76 incl. safe-area)
       + the search bar's own in-flow height (~58, now that it's no
       longer fixed) all eat into the map's available space. dvh (see
       above) matters most exactly here - mobile is where the address
       bar show/hide behavior actually happens. max() floor: a phone
       turned sideways is short enough that this subtraction alone
       could go negative and collapse the map to 0 (see the desktop
       rule above for the full story). */
    #mapFull{height:max(180px, calc(100vh - 70px - 76px - 58px - env(safe-area-inset-bottom)));height:max(180px, calc(100dvh - 70px - 76px - 58px - env(safe-area-inset-bottom)));}

    .mobile-tabbar{
      display:flex;align-items:stretch;justify-content:space-around;
      /* MUST stay below every overlay (side-panel drawers z-index:80,
         backdrop 70, auth-gate 95/96, admin-fab 90, dropdowns 40/60) -
         it was wrongly at 500 before, sitting ON TOP of open drawers
         and hiding their bottom-most controls (e.g. the "write a
         message" input box got fully covered by the tabbar and was
         impossible to reach/type into). */
      position:fixed;left:0;right:0;bottom:0;z-index:30;
      background:var(--card);border-top:1px solid var(--line);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom));
      box-shadow:0 -6px 24px rgba(var(--shadow-rgb,0,0,0),0.08);
    }
    .mtab{
      flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
      background:none;border:none;color:rgba(var(--ink-rgb),0.5);font-family:'Manrope',sans-serif;
      font-size:10.5px;font-weight:700;padding:6px 2px;cursor:pointer;
    }
    .mtab svg{width:21px;height:21px;}
    .mtab.active{color:var(--accent);}
    .mtab-post{
      position:relative;color:#fff;
    }
    .mtab-post svg{
      width:44px;height:44px;padding:11px;box-sizing:border-box;border-radius:50%;
      background:var(--ink);color:var(--paper);margin-top:-26px;
      box-shadow:0 6px 16px rgba(var(--shadow-rgb,0,0,0),0.3);
    }
    .mtab-post span{display:none;}
  }

  @media (min-width:821px){
    .mobile-tabbar{display:none !important;}
  }