:root {
    --ink: #0A1628;
    --ink-2: #112240;
    --ink-3: #1B2D4F;
    --paper: #FAFBFC;
    --paper-2: #F0F4F9;
    --paper-3: #E2E9F2;
    /* Brand navy, sampled straight from the logo artwork rather than eyeballed:
       #272B68 is the dominant opaque pixel in zurag/tp-wordmark-navy.png (and #262A67 in
       tp-logo-navy.png — the same colour within rounding), and #1B1D4D is the darker navy
       the mark itself uses for depth, which makes it the natural pressed/hover tone.
       --primary-soft is that navy mixed ~90% into white. Contrast improves across the
       board versus the old bright blue: white-on-primary 5.26 -> 12.87, primary-on-white
       5.26 -> 12.87, primary-on-soft 4.56 -> 10.66. */
    --primary: #272B68;
    --primary-deep: #1B1D4D;
    --primary-soft: #E8E9F4;
    /* --primary-glow is not "a lighter primary" — it is the accent colour used ON the
       permanently-dark ink panels (calculator results, affordability card, guide hero,
       compare bar, verdict cards), so it has to stay light enough to read on #0A1628.
       This is the brand navy lightened to do that: 5.19 on the ink panels, up from the
       old #4D7CFF's 4.87. */
    --primary-glow: #7C83D0;
    --accent: #00D4AA;
    --warning: #FFB020;
    --danger: #FF4757;
    --success: #009878;
    --line: rgba(10, 22, 40, 0.08);
    --line-2: rgba(10, 22, 40, 0.14);
    --shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.04), 0 2px 8px rgba(10, 22, 40, 0.04);
    --shadow-md: 0 4px 12px rgba(10, 22, 40, 0.06), 0 12px 32px rgba(10, 22, 40, 0.08);
    --shadow-lg: 0 8px 24px rgba(39, 43, 104, 0.12), 0 24px 64px rgba(10, 22, 40, 0.12);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    /* Card/panel/modal/dropdown background — previously every one of these hardcoded the
       literal "white" instead of a token, since --paper was already spoken for as the page
       background. This is the one new token dark mode needs. */
    --surface: white;
    /* Permanently-dark panels (buttons/toast/footer/calculator results/etc. — anywhere that
       already pairs background:var(--ink) with a hardcoded color:white) reference this
       instead of --ink directly. --ink itself gets redefined for dark mode (it's ~80% of
       the site's text color); --ink-fixed never changes, so these 13 components stay dark
       regardless of theme, exactly as they are today. */
    --ink-fixed: #0A1628;
    --ink-2-fixed: #112240;

    /* ===== ONE PAGE GRID FOR THE WHOLE SITE =====
       Every section's inner wrapper, plus the header and footer bars, resolves its left and
       right edge from these two values, so all of them land on the same vertical line at
       every viewport width. Before this there were two competing widths: 1400px for the
       home hero/search/listings wrappers and 1320px for .nav-inner, .section-inner,
       .banks-inner and .footer-inner — which is why the header sat up to 72px inside the
       content below it, and why #banks/#features/footer were off the same line ON the home
       page too. Change the grid in one place here, not per component. */
    --page-max: 1400px;
    --page-pad: 32px;
  }

  /* ===== DARK THEME ===== */
  /* Redefines the existing semantic tokens rather than introducing a parallel set — since
     ~72% of the file's background/color/border/shadow declarations already reference these,
     this flips the large majority of the site automatically. --primary/--accent/--warning/
     --danger/--success (brand + semantic hues) are deliberately left unchanged in both
     themes. --ink-fixed/--ink-2-fixed are deliberately NOT redefined here — see the :root
     comment above; they anchor the 13 "dark-island" components that must stay dark whether
     the site is in light or dark mode. */
  html.dark {
    --ink: #E8ECF3;
    --ink-2: #C7D0DE;
    --ink-3: #93A0B4;
    --paper: #0B1220;
    --paper-2: #141C2E;
    --paper-3: #1C2740;
    --line: rgba(255, 255, 255, 0.10);
    --line-2: rgba(255, 255, 255, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30), 0 12px 32px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.36), 0 24px 64px rgba(0, 0, 0, 0.32);
    --surface: #161F33;
    /* --primary is the ONE brand token dark mode has to override. It's used as link and
       active-state TEXT on the dark page, and the brand navy there scores 1.45 — invisible.
       This is that navy lightened just enough: 4.12 as text on --paper and still 4.54 under
       white button labels (the old bright blue managed 3.56 / 5.26, so the weaker axis
       improves). --primary-deep and --primary-soft are deliberately left alone, exactly as
       they were before this change: --primary-deep is text on the --primary-soft tint in
       ~30 places but a white-text background in ~6 (button/chat-send hover, avatar
       gradients), and those two roles want opposite directions on a dark page — lightening
       it would fix the chips and break the avatars. --primary-glow is likewise untouched:
       it lives on panels that stay dark in both themes. */
    --primary: #686FC0;
  }
  /* A handful of translucent "frosted glass" bars hardcode a near-paper rgba literal
     instead of a token (so backdrop-filter blur still shows a hint of the page behind
     them) — token redefinition alone doesn't reach these, so they get direct overrides. */
  html.dark .nav { background: rgba(11, 18, 32, 0.85); }
  html.dark .admin-topbar { background: rgba(11, 18, 32, 0.92); }
  html.dark .mobile-sticky-call { background: rgba(11, 18, 32, 0.97); }
  html.dark .mobile-bottom-nav { background: rgba(11, 18, 32, 0.96); }
  /* The logo mark is a dark-colored asset with no backing plate today — it only stays
     legible because the header/admin-topbar bars are always light. The footer already
     solves this exact problem for the full wordmark (a white plate behind the image) —
     same fix, scoped to dark mode only, for the two bars that flip dark above. */
  /* (The .brand-light/.brand-dark theme-aware logo switch lives at the very end of this
     file — it has to come after the per-component `.some-logo img { display: block }`
     rules it needs to override.) */
  /* Status/role pills and stat-icon tints that were never tokenized to begin with (no
     var() existed for these hues at all) get their own dark-appropriate values directly —
     redefining a token does nothing for a color that was never a token. */
  html.dark .admin-status-pill.status-pending,
  html.dark .admin-role-badge.owner,
  html.dark .admin-role-pill.role-owner { background: rgba(255, 176, 32, 0.18); color: #FFCB6B; }
  html.dark .status-viewing, html.dark .status-today { background: rgba(255, 176, 32, 0.18); color: #FFCB6B; }
  html.dark .status-negotiation, html.dark .status-negotiating,
  html.dark .dash-stat-icon.purple, html.dark .notif-icon.match { background: rgba(123, 44, 191, 0.22); color: #C9A3EA; }
  html.dark .status-closed_rented, html.dark .status-rented { background: rgba(0, 152, 120, 0.22); color: #5FD9BC; }
  html.dark .dash-stat-icon.orange, html.dark .notif-icon.message, html.dark .notif-icon.chat_message,
  html.dark .boost-btn { color: #FFCB6B; }
  html.dark .badge.vip { color: #2a1a00; }
  html.dark .badge.needs-refresh { color: #2a1a00; }
  html.dark .notif-item.unread:hover { background: rgba(104, 111, 192, 0.16); }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  /* Smooths the light/dark toggle itself without touching any existing per-component hover
     transition (a blanket "*" rule would risk changing hover-timing feel sitewide, so this
     is scoped to body plus the handful of large surface containers users actually watch
     flip color when the theme changes). */
  body, .modal, .nav, .footer, .listing-card, .admin-row, .admin-panel, .admin-kpi-card,
  .admin-stat-card, .dash-stat, .dash-panel, .notif-panel, .admin-menu-list,
  .chat-menu-list, .user-dropdown {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  }
  body {
    font-family: 'Manrope', sans-serif;
    background: var(--paper);
    color: var(--ink);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    /* Belt-and-braces against horizontal scroll on mobile browsers: overflow-x alone still
       lets the layout viewport widen when a descendant forces it (Samsung Internet and
       older Chrome Android are the usual offenders). */
    max-width: 100vw;
  }
  html { overflow-x: hidden; }
  .display { font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
  /* ============ NAV ============ */
  .nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(250, 251, 252, 0.85);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    /* The header keeps its gutter as padding INSIDE the bar, while every section keeps its
       gutter as padding OUTSIDE the inner wrapper. So to put the two on one line this box
       has to be the content width plus both gutters — then its padding edge lands exactly
       where a section's inner wrapper starts. Matching --page-max alone would still leave
       the logo one gutter (32px) too far in. */
    max-width: calc(var(--page-max) + var(--page-pad) * 2); margin: 0 auto;
    padding: 18px var(--page-pad);
    display: flex; align-items: center; justify-content: space-between;
    /* Was a flat 32px, which at ~1170px wide (signed in, so the avatar and "Зар нэмэх" are
       both present) squeezed the link row hard enough that "Зар хайх" and "Шинэ орон сууц"
       wrapped onto two lines and made the bar taller. Scales with the viewport instead. */
    gap: clamp(12px, 1.8vw, 32px);
  }
  .logo { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; min-width: 0; }
  /* Horizontal wordmark carries the brand name itself, so there's no separate logo text
     next to it any more. width:auto + object-fit:contain keeps the artwork's own aspect
     ratio at every size; the max-width stops a wide wordmark from crowding the nav on
     small screens. */
  /* max-width sits just above the wordmark's natural width at this height (≈259px for a
     7.6:1 mark at 34px) so the box never letterboxes the artwork. */
  .logo-wordmark {
    height: 34px; width: auto; max-width: 280px;
    object-fit: contain; display: block;
  }
  /* Compact square mark, swapped in for the wordmark on phone widths (see the responsive
     rules in the brand block at the end of this file) — a 7.6:1 wordmark shrunk to fit a
     360px nav would be ~16px tall and unreadable, where the square mark stays legible. */
  .logo-square { height: 34px; width: auto; object-fit: contain; }

  .nav-links { display: flex; gap: 4px; }
  .nav-links a {
    color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 14.5px;
    padding: 8px 14px; border-radius: 8px; transition: all 0.2s;
    cursor: pointer; white-space: nowrap;
  }
  .nav-links a:hover, .nav-links a.active { background: var(--primary-soft); color: var(--primary); }
  .nav-actions { display: flex; gap: 10px; align-items: center; }
  /* "Зар нэмэх" is a 2-word label in a button narrow enough to wrap it, which made the
     button 63px tall and the whole bar 99px — the header grew a second row for one button.
     Nothing in this row should ever wrap; the row is sized by the widest control, not by
     text reflow. */
  .nav-actions .btn { white-space: nowrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    padding: 10px 18px; border-radius: 10px; font-weight: 600; font-size: 14px;
    border: none; text-decoration: none; transition: all 0.18s ease;
    font-family: inherit;
  }
  .btn-ghost { background: transparent; color: var(--ink-2); }
  .btn-ghost:hover { background: var(--paper-2); }
  .btn-primary {
    background: var(--ink-fixed); color: white;
    box-shadow: 0 1px 2px rgba(10, 22, 40, 0.1);
  }
  .btn-primary:hover { background: var(--ink-2); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 22, 40, 0.2); }
  .btn-blue {
    background: var(--primary); color: white;
    box-shadow: 0 2px 8px rgba(39, 43, 104, 0.25);
  }
  .btn-blue:hover { background: var(--primary-deep); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(39, 43, 104, 0.4); }
  .btn-lg { padding: 14px 24px; font-size: 15px; border-radius: 12px; }
  /* A destructive-action variant of .btn-ghost — was previously done ad hoc with an inline
     color:var(--danger) override wherever a delete/remove action needed it. */
  .btn-danger { background: transparent; color: var(--danger); }
  .btn-danger:hover { background: rgba(255, 71, 87, 0.08); }
  /* One shared compact-button size — was previously an inline font-size:11px override (that
     left .btn's full padding untouched, producing an odd proportion) duplicated per call
     site. Still applied alongside .btn, so the existing 768px min-height:44px rule below
     still governs mobile touch targets. Deliberately NOT given overflow:hidden — that would
     reset a flex item's automatic min-width to 0 (a real flexbox quirk) and let it shrink
     below its label's width, which is exactly what caused button text to overlap in a
     tight flex:1 row before this was found and fixed. Leaving min-width at its default
     (content-based) means an overflowing row wraps onto a new line instead. */
  .btn-sm { padding: 8px 14px; font-size: 12.5px; border-radius: 8px; }
  /* Every custom-styled interactive control gets a real visible keyboard-focus ring here —
     previously only native form fields (input/select/textarea) had one. box-shadow, not
     outline, to match every other focus rule in this file. Ring width matches
     .form-input:focus's 4px so buttons and inputs share one focus language. */
  .btn:focus-visible, .filter-toggle:focus-visible, .lrh-view-btn:focus-visible,
  .toggle-switch:focus-visible, .mbn-btn:focus-visible, .auth-close-btn:focus-visible,
  .chip:focus-visible, .hs-adv-toggle:focus-visible, .notif-trigger:focus-visible,
  .admin-bulk-danger:focus-visible {
    outline: none; box-shadow: 0 0 0 4px var(--primary-soft), 0 0 0 1.5px var(--primary) inset;
  }
  /* .btn computes to ~40px tall as-is — fine on desktop (.btn-lg already exists for
     prominent actions), but under the 44px touch-target minimum on touch devices. Bumped
     with min-height only at mobile widths rather than site-wide, so desktop's current
     sizing is untouched. */
  @media (max-width: 768px) {
    .btn { min-height: 44px; }
  }

  /* Mobile menu */
  .mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
  .mobile-menu {
    display: none; position: fixed; top: 70px; left: 0; right: 0;
    background: var(--surface); padding: 20px; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); z-index: 99;
  }
  .mobile-menu.open { display: block; }
  .mobile-menu a { display: block; padding: 14px; color: var(--ink); text-decoration: none; font-weight: 500; border-radius: 8px; }
  .mobile-menu a:hover { background: var(--paper-2); }

  /* Laptop band: the header's five groups (logo / links / icons / avatar / "Зар нэмэх")
     add up to more than the content width once a user is signed in, so between the point
     where the link row appears (1024px) and the point where the grid stops growing
     (--page-max + gutters) everything is scaled down proportionally rather than letting
     one group wrap or spill past the right-hand alignment line. Measured at 1172px signed
     in: the row needed 151px more than it had. */
  @media (min-width: 1025px) and (max-width: 1400px) {
    .nav-inner { gap: clamp(10px, 1vw, 20px); }
    .logo-wordmark { height: 26px; max-width: 210px; }
    .nav-links { gap: 2px; }
    .nav-links a { padding: 8px 9px; font-size: 13.5px; }
    .nav-actions { gap: 6px; }
    .nav-actions .notif-trigger { width: 38px; height: 38px; }
    .nav-actions .btn { padding: 9px 13px; font-size: 13.5px; }
  }

  /* ============ HERO ============ */
  .hero {
    position: relative; padding: 80px 32px 100px;
    background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
    overflow: hidden;
  }
  .hero::before {
    content: ''; position: absolute; top: -200px; right: -200px; width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(39, 43, 104, 0.12) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero::after {
    content: ''; position: absolute; bottom: -100px; left: -100px; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(0, 212, 170, 0.08) 0%, transparent 70%);
    pointer-events: none;
  }
  .hero-grid {
    max-width: var(--page-max); margin: 0 auto; position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
  }
  .hero-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface); padding: 7px 14px; border-radius: 100px;
    border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--ink-2);
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
  }
  .hero-tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.2); animation: pulse 2s infinite; }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(0, 212, 170, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(0, 212, 170, 0.1); }
  }
  .hero h1 {
    font-size: clamp(40px, 5.5vw, 76px);
    margin-bottom: 24px;
  }
  .hero h1 em { font-style: italic; color: var(--primary); }
  .hero-sub {
    font-size: 18px; color: var(--ink-3); max-width: 540px;
    margin-bottom: 36px; line-height: 1.6;
  }
  .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; }
  .hero-stats { display: flex; gap: 48px; padding-top: 32px; border-top: 1px solid var(--line); }
  .hero-stat-num { font-family: 'Fraunces', serif; font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
  .hero-stat-num em { color: var(--primary); font-style: normal; }
  .hero-stat-label { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

  .hero-search {
    background: var(--surface); border-radius: var(--radius-xl);
    padding: 28px; box-shadow: var(--shadow-lg);
    border: 1px solid var(--line);
    position: relative;
  }
  .search-tabs { display: flex; gap: 4px; background: var(--paper-2); padding: 4px; border-radius: 12px; margin-bottom: 22px; }
  .search-tab {
    flex: 1; padding: 10px; border-radius: 8px; font-weight: 600; font-size: 14px;
    cursor: pointer; text-align: center; color: var(--ink-3); transition: all 0.2s;
    border: none; background: transparent; font-family: inherit;
  }
  .search-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
  .search-tab:hover:not(.active) { color: var(--ink); }

  .search-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
  .field-group label { font-size: 12px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; display: block; text-transform: uppercase; letter-spacing: 0.04em; }
  .field-group select, .field-group input {
    width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px;
    font-family: inherit; font-size: 14px; background: var(--paper); color: var(--ink);
    transition: all 0.2s;
  }
  .field-group select:focus, .field-group input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-soft); }

  .price-range-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

  .quick-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
  .qf-label { font-size: 12px; color: var(--ink-3); font-weight: 600; align-self: center; margin-right: 4px; }
  .chip {
    padding: 6px 12px; border-radius: 100px; background: var(--paper-2); font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.18s; color: var(--ink-2); border: 1px solid transparent;
  }
  .chip:hover { background: var(--primary-soft); color: var(--primary); border-color: var(--primary-soft); }
  .chip.active { background: var(--primary); color: white; }

  /* ============ HOME HERO (search-first, unegui.mn-style) ============ */
  .hero-compact { padding: 16px var(--page-pad) 20px; }
  .hero-compact-inner { max-width: var(--page-max); margin: 0 auto; position: relative; z-index: 2; }
  h1.hero-compact-title {
    font-size: 20px; margin-bottom: 4px; font-weight: 700;
  }
  .hero-compact-title em { font-style: italic; color: var(--primary); }
  .hero-compact-sub {
    font-size: 13px; color: var(--ink-3); line-height: 1.5;
  }

  /* Compact info strip below the search bar: one short headline+sub on the left, real
     counts as small inline text on the right (no icon-card stats, no marketing-scale
     headline) — keeps focus on search/listings the way unegui.mn's homepage does. */
  .home-info-strip {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 12px 20px; margin-top: 12px; box-shadow: var(--shadow-sm);
  }
  .home-info-strip-text { flex: 1; min-width: 220px; }
  .home-info-stats-inline {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: 12.5px; color: var(--ink-3);
  }
  .his-item { white-space: nowrap; }
  .his-item strong { color: var(--ink); font-weight: 700; font-size: 13px; }
  .his-item:not(:first-child)::before { content: '•'; margin-right: 8px; color: var(--line-2); }

  .home-search-bar {
    background: var(--surface); border-radius: var(--radius-lg); padding: 16px 20px;
    box-shadow: var(--shadow-sm); border: 1px solid var(--line); text-align: left;
  }

  /* Top row: [Ангилал][keyword][Хайх] as one group, [Байршил][Шүүлтүүр] as another —
     the two groups wrap independently so mobile naturally gets a 3-item row then a
     2-item row underneath, with no per-viewport breakpoint needed to force it. */
  .hs-top-row { display: flex; flex-wrap: wrap; gap: 10px; }
  .hs-primary-row { display: flex; gap: 8px; flex: 3 1 260px; min-width: 0; }
  .hs-secondary-row { display: flex; gap: 8px; flex: 1 1 200px; min-width: 0; }

  .hs-select-wrap { position: relative; flex: 1 1 110px; min-width: 0; }
  .hs-cat-select { flex: 0 1 130px; }
  .hs-select-wrap select {
    width: 100%; height: 44px; padding: 0 30px 0 34px; border: 1.5px solid var(--line-2);
    border-radius: 10px; font-family: inherit; font-size: 13.5px; font-weight: 600;
    color: var(--ink); background: var(--paper); cursor: pointer; transition: all 0.18s;
    appearance: none; -webkit-appearance: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hs-select-wrap select:focus {
    outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-soft);
  }
  .hs-select-icon, .hs-select-chevron {
    position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3);
  }
  .hs-select-icon { left: 11px; }
  .hs-select-chevron { right: 10px; }

  .hs-keyword-wrap { position: relative; flex: 4 1 140px; min-width: 0; }
  .hs-keyword-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); }
  .hs-keyword-wrap input {
    width: 100%; height: 44px; padding: 0 12px 0 36px; border: 1.5px solid var(--line-2);
    border-radius: 10px; font-family: inherit; font-size: 13.5px; background: var(--paper); color: var(--ink);
    transition: all 0.18s;
  }
  .hs-keyword-wrap input:focus {
    outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-soft);
  }

  .hs-search-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 0 clamp(14px, 4vw, 22px); white-space: nowrap; height: 44px; flex: 0 0 auto;
  }

  .hs-adv-toggle {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 44px; padding: 0 14px; border: 1.5px solid var(--line-2); border-radius: 10px;
    background: var(--paper); color: var(--ink-2); font-size: 13px; font-weight: 600;
    font-family: inherit; cursor: pointer; white-space: nowrap; flex: 0 0 auto; transition: all 0.18s;
  }
  .hs-adv-toggle:hover, .hs-adv-toggle.open { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

  /* Category shortcuts: unegui.mn-style icon+label row, same horizontal-scroll
     technique as the old tab row so it works identically at every width — compact
     (small icon, tight padding) with no card shadow, one always-scrollable row. */
  .hs-cat-shortcuts {
    display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hs-cat-shortcuts::-webkit-scrollbar { display: none; }
  .hs-cat-shortcut {
    display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0;
    width: 72px; min-height: 40px; padding: 6px 4px; border-radius: 10px; border: 1px solid transparent;
    background: none; cursor: pointer; font-family: inherit; color: var(--ink-2);
    font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; transition: all 0.18s;
  }
  .hs-cat-shortcut:hover, .hs-cat-shortcut:focus-visible {
    background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary-deep);
  }
  .hs-cs-icon {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
    background: var(--cat-color-soft, var(--primary-soft)); color: var(--cat-color, var(--primary));
  }

  /* Advanced filters: hidden by default, revealed by .hs-adv-toggle — a plain
     in-flow block (not a fixed overlay) so it's automatically full-width and
     contained on mobile with none of position:fixed's overflow pitfalls. */
  .hs-adv-panel { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-direction: column; gap: 14px; }
  .hs-adv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .hs-adv-toggles { align-items: center; margin-top: 4px; }

  .hs-field label {
    display: block; font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
  }
  .hs-field select, .hs-field input {
    width: 100%; padding: 11px 12px; border: 1.5px solid var(--line-2); border-radius: 10px;
    font-family: inherit; font-size: 13.5px; background: var(--paper); color: var(--ink);
    transition: all 0.18s;
  }
  .hs-field select:focus, .hs-field input:focus {
    outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--primary-soft);
  }
  .hs-range { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

  @media (max-width: 1024px) {
    .home-info-strip { flex-direction: column; align-items: flex-start; }
  }
  @media (max-width: 640px) {
    .hero-compact { padding: 12px 18px 16px; }
    .home-search-bar { padding: 14px 16px; border-radius: var(--radius-lg); }
    .hs-cat-shortcuts { margin: 12px -16px 0; padding: 12px 16px 0; }
    .home-info-strip { padding: 14px 16px; gap: 12px; margin-top: 10px; }
  }

  /* Категориуд — one compact horizontal row on desktop (wraps only when it must) */
  .home-cat-grid { display: flex; gap: 10px; }
  .home-cat-tile {
    display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
    flex: 1; min-width: 0; padding: 14px 8px; background: var(--surface); border: 1.5px solid var(--line);
    border-radius: var(--radius-md); cursor: pointer; transition: all 0.18s ease; font-family: inherit;
  }
  .home-cat-tile:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .home-cat-tile-icon {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: var(--cat-color-soft, var(--primary-soft)); color: var(--cat-color, var(--primary));
  }
  .home-cat-tile-icon svg { width: 16px; height: 16px; }
  .home-cat-tile-name { font-size: 11.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .home-cat-tile-count { font-size: 11px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; }
  @media (max-width: 900px) { .home-cat-grid { flex-wrap: wrap; } .home-cat-tile { flex: 1 1 calc(33.333% - 8px); } }
  @media (max-width: 480px) { .home-cat-tile { flex: 1 1 calc(50% - 6px); } }

  /* Compact 5-across card grid for the home page's own listing sections — the Listings
     search-results page keeps its own .listings-grid (3-col, taller cards) unchanged;
     this only restyles .listing-card when it's inside a home grid. */
  /* auto-fit/minmax at every tier (not a fixed column count) — 5-6/row on desktop,
     2-4/row adaptive on tablet, 2/row on mobile with 1/row as an automatic fallback
     if a viewport is ever too narrow for two cards, never a hardcoded per-device rule. */
  .home-listings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
  .home-listings-grid .listing-img { aspect-ratio: 4/3; }
  .home-listings-grid .listing-body { padding: 12px; }
  .home-listings-grid .listing-price { font-size: 16px; }
  .home-listings-grid .listing-price-sub { font-size: 10.5px; }
  .home-listings-grid .listing-title {
    font-size: 12.5px; margin-bottom: 4px; -webkit-line-clamp: 2; display: -webkit-box;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .home-listings-grid .listing-loc { font-size: 11px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .home-listings-grid .listing-meta { padding-top: 8px; gap: 6px 8px; font-size: 10.5px; flex-wrap: wrap; }
  .home-listings-grid .badge { padding: 3px 7px; font-size: 9px; }
  .home-listings-grid .listing-fav { width: 40px; height: 40px; }
  .home-listings-grid .price-tag { font-size: 9.5px; padding: 3px 7px; }
  /* :hover already gives desktop cards elevation (shared .listing-card rule above);
     this adds the touch-equivalent press feedback :hover doesn't reliably give on mobile. */
  .home-listings-grid .listing-card:active { transform: scale(0.98); box-shadow: var(--shadow-sm); }
  @media (max-width: 1024px) { .home-listings-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } }
  @media (max-width: 640px) { .home-listings-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; } }

  /* ============ SECTION ============ */
  section { padding: 100px var(--page-pad); display: none; }
  section.page-active { display: block; }
  .section-inner { max-width: var(--page-max); margin: 0 auto; }
  .home-content-inner { max-width: var(--page-max); margin: 0 auto; }
  .section-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; gap: 32px; flex-wrap: wrap; }
  .section-eyebrow {
    display: inline-block; font-size: 12px; font-weight: 700; color: var(--primary);
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px;
  }
  .section-title { font-size: clamp(32px, 4vw, 52px); max-width: 720px; }
  .section-title em { font-style: italic; color: var(--primary); }
  .section-sub { color: var(--ink-3); max-width: 480px; font-size: 16px; }

  /* ============ LISTINGS ============ */
  /* ============ HOME PORTAL ============ */
  .home-portal-section { background: var(--paper); padding: 24px var(--page-pad) 64px; }
  .portal-cats {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 56px;
  }
  .portal-cat-btn {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 20px 12px; background: var(--surface); border: 1.5px solid var(--line);
    border-radius: var(--radius-md); cursor: pointer; transition: all 0.18s ease;
    font-family: inherit;
  }
  .portal-cat-btn:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .portal-cat-icon {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--cat-color-soft, var(--primary-soft)); color: var(--cat-color, var(--primary));
  }
  .portal-cat-name { font-size: 13px; font-weight: 700; color: var(--ink-2); }
  .portal-section-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 10px 20px; margin-bottom: 18px;
  }
  /* Keeps "Бүгдийг үзэх" pinned to the right even when it wraps onto its own line on
     narrow screens — without this, a lone wrapped flex item sits at the start instead. */
  .portal-section-head .btn { margin-left: auto; }
  /* Space between the three home-portal sections (Шинээр нэмэгдсэн/Онцлох/Категориуд) —
     a class instead of a repeated inline style so it can be tuned per breakpoint below. */
  .portal-section-head-spaced { margin-top: 32px; }
  .portal-section-title { font-size: clamp(20px, 2.2vw, 26px); }
  .portal-section-title em { font-style: italic; color: var(--primary); }
  @media (max-width: 900px) {
    .portal-cats { grid-template-columns: repeat(5, 1fr); }
  }
  @media (max-width: 600px) {
    .portal-cats { grid-template-columns: repeat(5, 1fr); gap: 8px; }
    .portal-cat-btn { padding: 14px 6px; }
    .portal-cat-icon { width: 36px; height: 36px; }
    .portal-cat-icon svg { width: 18px; height: 18px; }
    .portal-cat-name { font-size: 10px; }
  }
  @media (max-width: 640px) {
    .home-portal-section { padding-top: 18px; }
    .portal-section-head { margin-bottom: 14px; }
    .portal-section-head-spaced { margin-top: 24px; }
  }
  .listings-section { background: var(--paper); }
  .filter-bar {
    display: flex; gap: 8px; flex-wrap: wrap; padding: 14px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 14px; margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
  }
  .filter-pill {
    padding: 8px 14px; border-radius: 100px; font-size: 13.5px; font-weight: 500;
    cursor: pointer; background: transparent; color: var(--ink-2); border: 1px solid transparent;
    transition: all 0.18s; display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit;
  }
  .filter-pill:hover { background: var(--paper-2); }
  .filter-pill.active { background: var(--ink-fixed); color: white; }
  .filter-pill.active .count { background: rgba(255, 255, 255, 0.2); color: white; }
  .count { font-size: 11px; padding: 2px 7px; background: var(--paper-3); border-radius: 100px; font-weight: 600; color: var(--ink-2); }

  /* ============ LISTINGS PAGE — unified marketplace layout (same search/card design
     system as the home page: compact search bar, category shortcuts styling reused,
     compact cards) ============ */
  .listings-page-head { margin-bottom: 14px; }
  .listings-breadcrumb { font-size: 12.5px; color: var(--ink-3); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
  .listings-breadcrumb a { color: var(--ink-3); cursor: pointer; }
  .listings-breadcrumb a:hover { color: var(--primary); }
  .listings-page-title { font-size: clamp(20px, 2.2vw, 26px); font-weight: 700; }
  .listings-page-title em { font-style: italic; color: var(--primary); }

  .listings-search-bar { display: flex; gap: 8px; margin-bottom: 14px; }
  .listings-search-bar .hs-keyword-wrap { flex: 1 1 260px; }
  .lsb-mobile-filter-btn { display: none; }

  .filter-bar { margin-bottom: 16px; }

  .listings-layout { display: flex; align-items: flex-start; gap: 24px; }

  .listings-sidebar {
    flex: 0 0 260px; width: 260px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    position: sticky; top: 16px; max-height: calc(100vh - 32px);
    display: flex; flex-direction: column; overflow: hidden;
  }
  .ls-sidebar-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 14px; flex-shrink: 0;
  }
  .ls-sidebar-close { display: none; background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink-3); padding: 2px 4px; }
  .ls-sidebar-scroll { overflow-y: auto; flex: 1; padding: 4px 16px; min-height: 0; }
  .ls-sidebar-footer { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }
  .ls-apply-btn { flex: 1 1 100%; justify-content: center; order: -1; }

  .filter-section { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .filter-section:last-child { border-bottom: none; }
  .filter-section summary {
    cursor: pointer; font-size: 13px; font-weight: 700; color: var(--ink);
    list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 2px 0;
  }
  .filter-section summary::-webkit-details-marker { display: none; }
  .filter-section summary::after {
    content: ''; width: 7px; height: 7px; flex-shrink: 0;
    border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
    transform: rotate(45deg); transition: transform 0.2s;
  }
  .filter-section[open] summary::after { transform: rotate(-135deg); }
  .filter-section-body { padding-top: 8px; display: flex; flex-direction: column; gap: 6px; }

  /* Эрэмбэлэх / Газрын зураг — plain, always-visible sidebar blocks (no <details>
     chevron) sitting above the collapsible filter sections, matching the reference's
     "quick controls first" ordering. */
  .fs-quick-label {
    display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px;
  }
  .fs-map-btn {
    width: 100%; justify-content: center; gap: 8px; font-size: 13px; font-weight: 600;
    padding: 10px 14px; border: 1.5px solid var(--primary-soft);
    background: var(--primary-soft); color: var(--primary-deep);
  }
  .fs-map-btn:hover { border-color: var(--primary); }

  /* Checkbox-look variant of .filter-toggle for "Төлбөрийн нөхцөл" — same underlying
     .filter-toggle/.active class + click handler as every other toggle pill, just a
     different visual (square checkbox instead of a rounded pill). */
  /* minmax(0, 1fr) — not plain 1fr — because grid items default to min-width:auto, which
     for text content means "at least as wide as my longest unbreakable word." With 2-word
     labels like "Банкны зээлээр" that refused to shrink below that, silently overflowing
     the sidebar (clipped by .listings-sidebar's overflow:hidden) instead of wrapping. */
  .filter-toggles.fs-payment-terms { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 10px; }
  .filter-toggle-check {
    display: flex; align-items: center; gap: 10px; width: 100%; justify-content: flex-start;
    background: none; border: none; border-radius: 8px; padding: 8px 6px; font-size: 13px;
    font-weight: 500; color: var(--ink-2);
  }
  .filter-toggle-check::before {
    content: ''; width: 17px; height: 17px; flex-shrink: 0; border-radius: 5px;
    border: 1.5px solid var(--line-2); transition: all 0.15s; background: var(--surface);
  }
  .filter-toggle-check.active { color: var(--ink); font-weight: 600; }
  .filter-toggle-check.active::before {
    background: var(--primary); border-color: var(--primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    background-size: 12px; background-repeat: no-repeat; background-position: center;
  }

  .listings-main { flex: 1; min-width: 0; }
  .listings-results-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
  }
  .lrh-count { font-size: 13.5px; color: var(--ink-3); }
  .lrh-count strong { color: var(--ink); font-weight: 700; font-size: 15px; }
  .lrh-actions { display: flex; align-items: center; gap: 8px; }
  .lrh-actions select {
    border: 1.5px solid var(--line-2); border-radius: 8px; padding: 8px 12px;
    font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
    background: var(--paper); cursor: pointer; outline: none; height: 40px;
  }
  .lrh-view-toggle { display: flex; border: 1.5px solid var(--line-2); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
  .lrh-view-btn {
    width: 40px; height: 40px; display: grid; place-items: center; background: var(--surface);
    border: none; border-left: 1px solid var(--line-2); cursor: pointer; color: var(--ink-3);
  }
  .lrh-view-btn:first-child { border-left: none; }
  .lrh-view-btn.active { background: var(--primary-soft); color: var(--primary); }

  .active-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--primary-soft); color: var(--primary-deep);
    border-radius: 100px; padding: 5px 12px; font-size: 12px; font-weight: 700; cursor: pointer;
  }
  .active-filter-clear-all {
    font-size: 12px; font-weight: 700; color: var(--ink-3); background: none; border: none;
    cursor: pointer; font-family: inherit; text-decoration: underline; padding: 5px 4px;
  }

  .listings-sidebar-overlay { display: none; }

  /* Browse grid — the Listings page's own card grid. A distinct class from .listings-grid
     (which .ld-similar-grid on the Listing Detail modal also uses) so these overrides
     can't leak into that unrelated section. */
  .listings-browse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .listings-browse-grid .listing-img { aspect-ratio: 4/3; }
  .listings-browse-grid .listing-body { padding: 14px; }
  .listings-browse-grid .listing-price { font-size: 18px; }
  .listings-browse-grid .listing-price-sub { font-size: 11px; }
  .listings-browse-grid .listing-title {
    font-size: 13.5px; margin-bottom: 5px; -webkit-line-clamp: 2; display: -webkit-box;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .listings-browse-grid .listing-loc { font-size: 12px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .listings-browse-grid .listing-meta { display: flex; padding-top: 10px; gap: 6px 10px; font-size: 11.5px; flex-wrap: wrap; }
  .listings-browse-grid .badge { padding: 3px 8px; font-size: 9.5px; }
  .listings-browse-grid .listing-fav { width: 40px; height: 40px; }
  .listings-browse-grid .price-tag { display: inline-block; font-size: 10px; padding: 3px 8px; }
  .listings-browse-grid .listing-compare { display: flex; font-size: 10.5px; padding: 5px 10px; }
  .listings-browse-grid .listing-img-count { display: flex; font-size: 10px; padding: 3px 8px; }
  .listings-browse-grid .listing-loan-strip { display: flex; margin-top: 10px; padding: 8px 10px; }
  .listings-browse-grid .loan-strip-label { font-size: 9.5px; }
  .listings-browse-grid .loan-strip-amt { font-size: 13px; }
  .listings-browse-grid .listing-card:active { transform: scale(0.98); }

  /* List view — same card DOM, just laid out as a horizontal row instead of restyling
     the grid into a separate component. This is now the Listings page's DEFAULT view
     (see index.html's #listingsGrid initial class) — Unegui.mn-style wide horizontal
     cards, not the small grid tiles. The grid layout above stays available via the
     view-toggle buttons for anyone who prefers it. */
  .listings-browse-grid.view-list { grid-template-columns: 1fr; gap: 10px; }
  .listings-browse-grid.view-list .listing-card { display: flex; flex-direction: row; align-items: stretch; }
  .listings-browse-grid.view-list .listing-img { width: 220px; flex-shrink: 0; aspect-ratio: auto; }
  .listings-browse-grid.view-list .listing-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .listings-browse-grid.view-list .listing-card:hover { transform: none; }

  /* Desktop: widen the image to ~62/38 (image/info), matching the reference's wide
     horizontal card proportions — mobile's narrower fixed-width override below (640px)
     is untouched, it's already tuned for small screens. */
  @media (min-width: 900px) {
    .listings-browse-grid.view-list .listing-img { width: auto; flex: 0 0 62%; aspect-ratio: 16/10; }
    .listings-browse-grid.view-list .listing-body { justify-content: flex-start; padding-top: 20px; }
  }

  @media (max-width: 1280px) {
    .listings-browse-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  }
  /* Sidebar stays visible (not the mobile sheet) down through 1024px — at that width
     260px sidebar + gap still leaves ~740px for a comfortable 3-column grid. */
  @media (max-width: 900px) {
    .listings-layout { display: block; }
    .listings-sidebar {
      position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(360px, 100vw);
      max-height: none; border-radius: 0; z-index: 1001; transform: translateX(100%);
      transition: transform 0.25s ease; box-shadow: var(--shadow-lg);
    }
    .listings-sidebar.open { transform: translateX(0); }
    .ls-sidebar-close { display: block; }
    .lsb-mobile-filter-btn { display: flex; }
    .listings-sidebar-overlay.open {
      display: block; position: fixed; inset: 0; background: rgba(10, 22, 40, 0.45); z-index: 1000;
    }
  }
  @media (max-width: 640px) {
    .listings-sidebar { width: 100%; }
    .listings-search-bar { flex-wrap: wrap; }
    .listings-results-header { gap: 8px 12px; }
    .listings-browse-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
    .listings-browse-grid.view-list .listing-img { width: 110px; }
    .listings-browse-grid.view-list .listing-body { padding: 10px 12px; }
  }

  .listings-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  }
  .listing-card {
    background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); transition: all 0.3s ease; cursor: pointer;
    position: relative;
  }
  .listing-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-lg);
    border-color: var(--primary-soft);
  }
  .listing-card.hidden { display: none; }
  .listing-img {
    position: relative; aspect-ratio: 4/3; overflow: hidden;
    background: linear-gradient(135deg, #1B2D4F, #272B68);
  }
  .listing-img img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.5s;
  }
  .listing-card:hover .listing-img img { transform: scale(1.05); }

  .listing-badges {
    /* right is reserved so a card with several badges (demo + new/hot + agent +
       verified) wraps onto a second line instead of running under the favorite
       button and getting clipped — the two sit at the same z-index and the button
       paints on top since it's later in the DOM. */
    position: absolute; top: 12px; left: 12px; right: 56px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 2;
  }
  .badge {
    padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 700;
    background: rgba(255, 255, 255, 0.95); color: var(--ink); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .badge.verified { background: var(--accent); color: white; }
  .badge.hot { background: var(--danger); color: white; }
  .badge.new { background: var(--primary); color: white; }
  .badge.vip { background: #FFB020; color: #1a0f00; }
  .badge.agent { background: var(--success); color: white; }
  .badge.demo { background: rgba(10, 22, 40, 0.75); color: white; }
  /* 14-day refresh freshness tiers — one shared definition instead of 3 independently
     hand-typed inline color maps (js/utils.js's listingFreshnessStatus() is the single
     source of truth for which key maps to which tier). */
  .badge.fresh { background: var(--accent); color: white; }
  .badge.needs-refresh { background: var(--warning); color: #1a0f00; }
  .badge.stale, .badge.very-stale { background: var(--danger); color: white; }

  .listing-fav {
    position: absolute; top: 12px; right: 12px; width: 36px; height: 36px;
    border-radius: 50%; background: rgba(255, 255, 255, 0.95); border: none;
    display: grid; place-items: center; cursor: pointer; z-index: 2;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: all 0.18s;
  }
  .listing-fav:hover { background: var(--surface); transform: scale(1.1); }
  .listing-fav.faved svg { fill: var(--danger); stroke: var(--danger); }

  .listing-img-count {
    position: absolute; bottom: 12px; right: 12px; z-index: 2;
    background: rgba(0, 0, 0, 0.6); color: white; padding: 4px 10px;
    border-radius: 6px; font-size: 11px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    display: flex; align-items: center; gap: 5px;
  }

  .listing-body { padding: 20px; }
  .listing-price-row { display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px; gap: 12px; }
  .listing-price { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
  .listing-price-sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 500; }
  .negotiable-tag { color: var(--success); font-weight: 700; }
  .price-tag {
    background: var(--primary-soft); color: var(--primary-deep); padding: 4px 10px;
    border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap;
  }
  .price-tag.below { background: rgba(0, 212, 170, 0.15); color: var(--success); }
  .price-tag.above { background: rgba(255, 71, 87, 0.12); color: var(--danger); }

  .listing-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; line-height: 1.3; }
  .listing-loc { font-size: 13px; color: var(--ink-3); margin-bottom: 14px; display: flex; align-items: center; gap: 4px; }
  /* The location string used to be a bare text node inside this flex container, so the
     `text-overflow: ellipsis` set on the compact card variants below could never apply
     (ellipsis needs a block/inline box of its own, not an anonymous flex item) — a long
     "Сонгинохайрхан, 20-р хороо · …" was simply sliced off mid-word at the card edge.
     Wrapping it in a span (see listingCardHtml) gives the truncation something to act on. */
  .listing-loc > svg { flex-shrink: 0; }
  .listing-loc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Real "posted X ago" (listingTimeAgo() — omitted entirely when there's no real
     timestamp, e.g. every demo listing). Hidden on the desktop card, where the existing
     meta/loan-strip rows already carry enough real info; shown on the compact mobile
     card below, where it replaces that detail. */
  .listing-time { display: none; font-size: 11px; color: var(--ink-3); margin: -8px 0 10px; }
  .listing-meta {
    display: flex; gap: 14px; padding-top: 14px; border-top: 1px solid var(--line);
    font-size: 12.5px; color: var(--ink-2); font-weight: 500; flex-wrap: wrap;
  }
  .listing-meta-item { display: flex; align-items: center; gap: 5px; }
  .listing-meta-item strong { color: var(--ink); font-weight: 700; }

  .listing-loan-strip {
    margin-top: 14px; padding: 12px; background: var(--primary-soft); border-radius: 10px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .loan-strip-label { font-size: 11px; color: var(--primary-deep); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
  .loan-strip-amt { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; color: var(--primary-deep); }

  /* ============ CALCULATOR ============ */
  .calc-section {
    background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
    position: relative; overflow: hidden;
  }
  .calc-section::before {
    content: ''; position: absolute; top: 80px; right: -100px; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(39, 43, 104, 0.08) 0%, transparent 70%);
  }
  .calc-grid {
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; position: relative; z-index: 2;
  }
  .calc-inputs {
    background: var(--surface); border-radius: var(--radius-xl); padding: 36px;
    box-shadow: var(--shadow-md); border: 1px solid var(--line);
  }
  .calc-inputs h3 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin-bottom: 6px; }
  .calc-inputs p { color: var(--ink-3); font-size: 14px; margin-bottom: 28px; }

  .input-row { margin-bottom: 22px; }
  .input-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
  .input-label-text { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .input-label-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; color: var(--primary); }

  .slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
    background: var(--paper-3); outline: none; transition: all 0.2s;
  }
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); cursor: pointer; border: 3px solid white;
    box-shadow: 0 2px 8px rgba(39, 43, 104, 0.4); transition: all 0.18s;
  }
  .slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
  .slider::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); cursor: pointer; border: 3px solid white;
    box-shadow: 0 2px 8px rgba(39, 43, 104, 0.4);
  }

  .loan-type-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 22px; }  .loan-type {
    padding: 14px 12px; border: 1.5px solid var(--line-2); border-radius: 12px;
    cursor: pointer; transition: all 0.18s; text-align: left; background: var(--surface);
    font-family: inherit;
  }
  .loan-type:hover { border-color: var(--primary-soft); }
  .loan-type.active { border-color: var(--primary); background: var(--primary-soft); }
  .loan-type-name { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
  .loan-type-rate { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-3); font-weight: 500; }
  .loan-type.active .loan-type-rate { color: var(--primary-deep); }

  /* Slider marks */
  .slider-marks {
    display: flex; justify-content: space-between; margin-top: 6px;
    font-size: 10px; color: var(--ink-3); font-weight: 500;
    font-family: 'JetBrains Mono', monospace;
  }

  /* Auto-calculated income card */
  .auto-card {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px; margin: 8px 0 22px;
    background: linear-gradient(135deg, rgba(39, 43, 104, 0.08), rgba(0, 212, 170, 0.06));
    border: 1.5px solid var(--primary-soft);
    border-radius: 14px;
    transition: all 0.3s ease;
  }
  .auto-card.warn {
    background: linear-gradient(135deg, rgba(255, 176, 32, 0.08), rgba(255, 71, 87, 0.06));
    border-color: rgba(255, 176, 32, 0.3);
  }
  .auto-card-icon {
    flex-shrink: 0;
    width: 42px; height: 42px; border-radius: 10px;
    background: var(--surface); display: grid; place-items: center;
    box-shadow: 0 2px 8px rgba(39, 43, 104, 0.15);
  }
  .auto-card.warn .auto-card-icon svg { stroke: #C77700; }
  .auto-card-body { flex: 1; }
  .auto-card-label {
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    margin-bottom: 4px; line-height: 1.4;
  }
  .auto-card-value {
    font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700;
    color: var(--primary-deep); letter-spacing: -0.01em; line-height: 1.1;
    margin-bottom: 4px;
  }
  .auto-card.warn .auto-card-value { color: #C77700; }
  .auto-card-hint {
    font-size: 11px; color: var(--ink-3); line-height: 1.4;
  }

  /* Early payoff simulator */
  .early-payoff {
    margin-top: 24px; padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .early-header { margin-bottom: 18px; }
  .early-eyebrow {
    font-size: 11px; font-weight: 700; color: var(--accent);
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px;
  }
  .early-title {
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700;
    color: white;
  }
  .early-input-row {
    background: rgba(255, 255, 255, 0.04);
    padding: 16px; border-radius: 12px; margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .early-input-label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; font-size: 13px; font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
  }
  .early-input-val {
    font-family: 'JetBrains Mono', monospace; font-weight: 700;
    color: var(--accent); font-size: 14px;
  }
  .extra-slider {
    background: rgba(255, 255, 255, 0.15) !important;
  }
  .extra-slider::-webkit-slider-thumb {
    background: var(--accent) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.5) !important;
  }
  .extra-slider::-moz-range-thumb {
    background: var(--accent) !important;
    box-shadow: 0 2px 8px rgba(0, 212, 170, 0.5) !important;
  }
  .early-input-row .slider-marks {
    color: rgba(255, 255, 255, 0.5);
  }
  /* Compare page's slider panel is dark like .early-input-row's — same override so the
     min/mid/max marks (added to match the Calculator page's sliders) stay legible. */
  .compare-input-row .slider-marks {
    color: rgba(255, 255, 255, 0.5);
  }

  .early-results {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
  }
  .early-result-card {
    display: flex; gap: 12px; align-items: center;
    padding: 14px; border-radius: 12px;
    background: rgba(0, 212, 170, 0.1);
    border: 1px solid rgba(0, 212, 170, 0.25);
  }
  .early-result-card.time {
    background: rgba(124, 131, 208, 0.1);
    border-color: rgba(124, 131, 208, 0.3);
  }
  .early-result-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .early-result-info { flex: 1; min-width: 0; }
  .early-result-label {
    font-size: 11px; font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 3px;
  }
  .early-result-value {
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700;
    color: white; letter-spacing: -0.01em; line-height: 1.1;
  }
  .early-summary {
    padding: 14px; border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 13px; line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
  }
  .early-summary strong { color: white; font-weight: 700; }

  /* Results panel */
  .calc-results {
    background: var(--ink-fixed); color: white; border-radius: var(--radius-xl);
    padding: 36px; position: relative; overflow: hidden;
  }
  .calc-results::before {
    content: ''; position: absolute; top: -100px; right: -100px; width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(39, 43, 104, 0.4) 0%, transparent 70%);
    pointer-events: none;
  }
  .calc-results::after {
    content: ''; position: absolute; bottom: -80px; left: -80px; width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(0, 212, 170, 0.2) 0%, transparent 70%);
    pointer-events: none;
  }
  .calc-results-inner { position: relative; z-index: 2; }
  .results-eyebrow {
    color: var(--primary-glow); font-size: 12px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px;
  }
  .results-title { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; margin-bottom: 28px; }

  .big-result {
    background: rgba(255, 255, 255, 0.06); padding: 24px; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 16px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
  .big-result-label { font-size: 12px; color: rgba(255, 255, 255, 0.6); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
  .big-result-amount {
    font-family: 'Fraunces', serif; font-size: 42px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1;
  }
  .big-result-amount em { font-style: normal; color: var(--primary-glow); font-size: 24px; }

  .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; }
  .small-result {
    background: rgba(255, 255, 255, 0.04); padding: 16px; border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .small-result-label { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  .small-result-amount { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 600; }
  .small-result-amount.green { color: var(--accent); }
  .small-result-amount.warn { color: var(--warning); }
  .small-result-amount.danger { color: var(--danger); }

  .bank-comparison { padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
  .bank-row {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr auto; gap: 12px;
    padding: 12px; border-radius: 10px; align-items: center;
    margin-bottom: 8px; transition: all 0.18s;
  }
  .bank-row.verified { background: rgba(0, 212, 170, 0.08); border: 1px solid rgba(0, 212, 170, 0.2); }
  .bank-row.unverified { background: rgba(255, 255, 255, 0.03); border: 1px solid transparent; opacity: 0.75; }
  .bank-row:hover { background: rgba(255, 255, 255, 0.08); opacity: 1; }
  .bank-name { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
  .bank-logo {
    width: 28px; height: 28px; border-radius: 6px; display: grid; place-items: center;
    font-weight: 800; font-size: 11px; color: white; font-family: 'Fraunces', serif;
  }
  .bank-rate { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600; }
  .bank-monthly { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: rgba(255, 255, 255, 0.7); }
  .best-tag { background: var(--accent); color: var(--ink); padding: 3px 8px; border-radius: 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; }

  /* ============ AFFORDABILITY ============ */
  .afford-section { background: var(--surface); padding: 100px var(--page-pad); }
  .afford-card {
    background: linear-gradient(135deg, var(--ink-fixed) 0%, var(--ink-2-fixed) 100%);
    border-radius: var(--radius-xl); padding: 56px;
    position: relative; overflow: hidden; color: white;
    border: 1px solid var(--line);
  }
  .afford-card::before {
    content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%;
    background-image:
      radial-gradient(circle at 80% 20%, rgba(39, 43, 104, 0.3) 0%, transparent 50%),
      radial-gradient(circle at 20% 80%, rgba(0, 212, 170, 0.15) 0%, transparent 50%);
    pointer-events: none;
  }
  .afford-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; position: relative; z-index: 2; align-items: center; }
  .afford-eyebrow { color: var(--primary-glow); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 16px; }
  .afford-title { font-family: 'Fraunces', serif; font-size: clamp(32px, 3.5vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; }
  .afford-title em { font-style: italic; color: var(--primary-glow); }
  .afford-sub { font-size: 16px; color: rgba(255, 255, 255, 0.75); margin-bottom: 28px; line-height: 1.6; }

  .afford-form { display: grid; gap: 14px; margin-bottom: 24px; }
  .afford-input {
    background: rgba(255, 255, 255, 0.06); border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px; height: 44px; padding: 0 16px; color: white; font-family: inherit;
    font-size: 14px; transition: all 0.2s; width: 100%;
  }
  .afford-input::placeholder { color: rgba(255, 255, 255, 0.4); }
  .afford-input:focus { outline: none; background: rgba(255, 255, 255, 0.1); border-color: var(--primary-glow); box-shadow: 0 0 0 3px rgba(124, 131, 208, 0.25); }

  .afford-result {
    background: rgba(0, 212, 170, 0.1); border: 1px solid rgba(0, 212, 170, 0.3);
    border-radius: 16px; padding: 24px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .afford-result-label { font-size: 12px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; }
  .afford-result-amount { font-family: 'Fraunces', serif; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin-bottom: 12px; }
  .afford-result-detail { font-size: 13px; color: rgba(255, 255, 255, 0.7); }

  /* ============ INVESTMENT FORECAST ============ */
  .forecast-section { padding: 100px var(--page-pad); background: var(--paper-2); }
  .forecast-card {
    background: var(--surface); border-radius: var(--radius-xl); padding: 48px;
    box-shadow: var(--shadow-md); border: 1px solid var(--line);
  }
  .forecast-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: center; }
  .forecast-stats { display: grid; gap: 16px; }
  .fstat-card {
    padding: 20px; background: var(--paper-2); border-radius: 14px;
    border-left: 3px solid var(--primary);
  }
  .fstat-card.green { border-left-color: var(--accent); }
  .fstat-card.warn { border-left-color: var(--warning); }
  .fstat-label { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  .fstat-value { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
  .fstat-value.green { color: var(--success); }

  .chart-wrap {
    background: var(--paper); border-radius: 16px; padding: 24px;
    border: 1px solid var(--line); position: relative;
  }
  .chart-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
  .chart-sub { font-size: 12px; color: var(--ink-3); margin-bottom: 20px; }
  .chart-svg { width: 100%; height: 240px; }
  .chart-legend { display: flex; gap: 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
  .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-2); font-weight: 500; }
  .legend-dot { width: 10px; height: 10px; border-radius: 3px; }

  /* ============ FEATURES ============ */
  .features-section { background: var(--paper); }
  .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .resources-section { background: var(--paper-2); }
  .feature-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 28px; transition: all 0.3s ease;
  }
  .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--primary-soft); }
  .feature-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: var(--primary-soft); color: var(--primary-deep);
    display: grid; place-items: center; margin-bottom: 16px;
  }
  .feature-card h4 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; margin-bottom: 8px; }
  .feature-card p { color: var(--ink-3); font-size: 14px; line-height: 1.6; }

  /* ============ BANKS STRIP ============ */
  .banks-section { padding: 60px var(--page-pad); background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .banks-inner { max-width: var(--page-max); margin: 0 auto; }
  .banks-label { text-align: center; font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 28px; }
  .banks-row { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; align-items: center; }
  .bank-pill {
    display: flex; align-items: center; gap: 10px; padding: 12px 20px;
    background: var(--paper); border-radius: 100px; border: 1px solid var(--line);
    transition: all 0.2s; cursor: pointer; text-decoration: none; color: inherit;
  }
  .bank-pill:hover { background: var(--surface); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
  .bp-logo { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: white; font-family: 'Fraunces', serif; font-weight: 800; font-size: 11px; }
  .bp-name { font-size: 13px; font-weight: 600; color: var(--ink-2); }

  /* ============ FOOTER ============ */
  .footer { background: var(--ink-fixed); color: rgba(255, 255, 255, 0.6); padding: 80px var(--page-pad) 40px; }
  .footer-inner { max-width: var(--page-max); margin: 0 auto; }
  .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 56px; }
  .footer-logo { display: flex; align-items: center; margin-bottom: 14px; }
  /* The footer is permanently dark, so it uses the white-on-dark wordmark — which needs no
     white backing plate behind it (that plate only existed because the old asset was
     navy-on-white). width stays auto so the 7.17:1 artwork keeps its own ratio (≈201px at
     this height), well inside the footer's first grid column and a 360px single-column
     phone footer alike. */
  .footer-logo img { height: 28px; width: auto; display: block; object-fit: contain; }
  .footer-desc { font-size: 14px; line-height: 1.6; margin-bottom: 20px; }
  .footer-col h5 { color: white; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 10px; }
  .footer-col a { color: rgba(255, 255, 255, 0.6); text-decoration: none; font-size: 14px; transition: color 0.18s; cursor: pointer; }
  .footer-col a:hover { color: white; }
  .footer-bottom { padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 13px; }

  /* ============ MODAL ============ */
  .modal-overlay {
    display: none; position: fixed; inset: 0; background: rgba(10, 22, 40, 0.6);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 1000; align-items: center; justify-content: center;
    padding: 20px; overflow-y: auto;
  }
  .modal-overlay.open { display: flex; }
  .modal {
    background: var(--surface); border-radius: var(--radius-xl); max-width: 900px; width: 100%;
    max-height: 90vh; overflow-y: auto; position: relative;
    box-shadow: 0 24px 64px rgba(10, 22, 40, 0.3);
    animation: modalIn 0.3s ease;
  }
  @keyframes modalIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .modal-close {
    position: absolute; top: 16px; right: 16px; width: 36px; height: 36px;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center; cursor: pointer; z-index: 10;
    transition: all 0.18s;
  }
  .modal-close:hover { background: var(--paper-2); }
  .modal-share-btn {
    position: absolute; top: 16px; right: 60px; width: 36px; height: 36px;
    border-radius: 50%; background: var(--surface); border: 1px solid var(--line);
    display: grid; place-items: center; cursor: pointer; z-index: 10;
    transition: all 0.18s;
  }
  .modal-share-btn:hover { background: var(--primary-soft); color: var(--primary); }
  .modal-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }

  /* Add/Edit Listing's location-picker map (js/my-listings.js openListingMapPicker) */
  .map-picker-header { font-family: 'Fraunces', serif; font-weight: 700; font-size: 19px; }
  .map-picker-address {
    display: flex; align-items: center; gap: 6px; padding: 0 24px 12px;
    color: var(--ink-3); font-size: 13px;
  }
  .map-picker-address span { overflow-wrap: break-word; }
  .map-picker-wrap { position: relative; }
  .map-picker-controls {
    position: absolute; top: 12px; right: 12px; z-index: 500;
    display: flex; flex-direction: column; gap: 8px;
  }
  .map-picker-ctrl-btn {
    width: 38px; height: 38px; border-radius: 10px; background: var(--surface); border: none;
    box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--ink-2);
    cursor: pointer; transition: all 0.15s;
  }
  .map-picker-ctrl-btn:hover { background: var(--paper-2); color: var(--ink); }
  .map-picker-ctrl-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--primary-soft), 0 0 0 1.5px var(--primary) inset; }
  .map-picker-ctrl-btn:disabled { opacity: 0.5; cursor: default; }
  .map-picker-chip {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 500;
    background: rgba(10, 22, 40, 0.82); color: white; font-size: 12.5px; font-weight: 500;
    padding: 8px 16px; border-radius: 100px; white-space: nowrap; pointer-events: none;
    max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis;
  }
  .map-picker-actions { display: flex; gap: 10px; padding: 16px 24px; }
  @media (max-width: 640px) {
    .map-picker-controls { top: 10px; right: 10px; gap: 6px; }
    .map-picker-ctrl-btn { width: 34px; height: 34px; }
    .map-picker-chip { font-size: 11.5px; padding: 7px 12px; bottom: 12px; }
    .map-picker-actions { flex-direction: column; }
  }

  /* Modal inline gallery carousel */
  .mc-wrap { position: relative; border-radius: var(--radius-xl) var(--radius-xl) 0 0; overflow: hidden; background: #0A1628; }
  .mc-main { position: relative; width: 100%; aspect-ratio: 16/9; overflow: hidden; }
  .mc-main img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.22s; }
  .mc-counter { position: absolute; bottom: 12px; left: 14px; background: rgba(10,22,40,0.7); color: #fff; font-size: 12px; font-weight: 700; border-radius: 20px; padding: 3px 10px; font-family: 'JetBrains Mono', monospace; }
  .mc-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; background: rgba(10,22,40,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; z-index: 2; }
  .mc-nav:hover { background: rgba(10,22,40,0.85); }
  .mc-nav.prev { left: 12px; }
  .mc-nav.next { right: 12px; }
  .mc-expand { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border-radius: 8px; background: rgba(10,22,40,0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
  /* Sits on a near-black gallery bar, so it uses the lightened brand navy (--primary-glow's
     rgb) — the base navy at this alpha would barely separate from the dark chrome. */
  .mc-expand:hover { background: rgba(124, 131, 208, 0.85); }
  .mc-thumbs { display: flex; gap: 4px; padding: 6px; background: #0A1628; overflow-x: auto; scrollbar-width: none; }
  .mc-thumbs::-webkit-scrollbar { display: none; }
  .mc-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 5px; cursor: pointer; flex-shrink: 0; opacity: 0.6; border: 2px solid transparent; transition: all 0.15s; }
  .mc-thumb.active { opacity: 1; border-color: var(--primary); }
  .mc-thumb:hover { opacity: 0.85; }

  /* Seller card */
  .seller-card { display: flex; align-items: center; gap: 14px; background: var(--paper-2); border-radius: 14px; padding: 16px 18px; margin-bottom: 0; }
  .seller-av { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 18px; flex-shrink: 0; }
  .seller-info { flex: 1; min-width: 0; }
  .seller-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 6px; }
  .seller-verified { font-size: 10px; background: var(--success); color: #fff; border-radius: 100px; padding: 1px 7px; font-weight: 700; }
  .seller-meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }

  /* Scam-protection status row — shown on every listing (real vs. not-yet-verified, never hidden) */
  .verify-status-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 18px; }
  .verify-pill {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 100px;
    font-size: 11.5px; font-weight: 700; border: 1px solid transparent;
  }
  .verify-pill.on { background: rgba(0, 212, 170, 0.12); color: var(--success); }
  .verify-pill.off { background: var(--paper-2); color: var(--ink-3); border-color: var(--line); border-style: dashed; }
  .verify-pill svg { flex-shrink: 0; }

  /* Admin — suspicious listing cards */
  .admin-flag-card {
    display: flex; gap: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg); margin-bottom: 16px;
  }
  .admin-flag-img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--paper-2); }
  .admin-flag-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
  .admin-flag-meta { font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
  .admin-flag-reasons { margin: 0 0 14px; padding-left: 18px; font-size: 12.5px; color: var(--danger); line-height: 1.7; }
  .admin-flag-actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .admin-flag-actions .btn { padding: 8px 14px; font-size: 12.5px; }
  .admin-summary-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; }
  .admin-summary-stat {
    flex: 1; min-width: 140px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
  }
  .admin-summary-stat .num { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; color: var(--danger); }
  .admin-summary-stat .label { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
  @media (max-width: 640px) {
    .admin-flag-card { flex-direction: column; }
    .admin-flag-img { width: 100%; height: 160px; }
  }

  /* ============ ADMIN DASHBOARD SHELL ============ */
  /* Admin runs its own compact chrome instead of the full marketing nav/footer — see
     body.admin-mode below (toggled only once guardAdminRoute() actually passes, in
     js/permissions.js) and #adminHeaderBar (js/admin.js renderAdminHeaderBar()). */
  body.admin-mode nav.nav,
  body.admin-mode #emailVerifyBanner,
  body.admin-mode footer.footer,
  body.admin-mode #pwaBanner,
  body.admin-mode .mobile-bottom-nav { display: none !important; }
  /* .mobile-bottom-nav's own max-width:768px rule pads body by 58px to clear its fixed
     height — moot once it's hidden above, but that padding rule isn't itself admin-mode-
     scoped, so cancel it here or admin pages get a dead 58px gap at the bottom on mobile. */
  body.admin-mode { padding-bottom: 0 !important; }

  /* ============ AGENT-ONLY / LOGGED-IN-ONLY CTAs ============ */
  /* Closed brokerage system: "Зар нэмэх" and "Миний самбар" are only ever shown to a visitor
     the JS has actually recognized as authed/an approved agent — js/permissions.js
     refreshAgentUI() is the single place that toggles these two classes, run on every
     sign-in/sign-out/role/agentActive change. Neither class is present at page load before
     JS runs, so anonymous visitors never see a flash of a CTA they can't use. */
  body:not(.is-agent) .agent-cta { display: none !important; }
  body:not(.is-authed) .authed-cta { display: none !important; }
  .admin-page-section { background: var(--paper); padding: 0; }
  .admin-body-wrap { max-width: 1360px; margin: 0 auto; padding: 24px 28px 60px; }

  .admin-topbar {
    position: sticky; top: 0; z-index: 150; background: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line); display: flex; align-items: center;
    justify-content: space-between; padding: 12px 24px; gap: 16px;
  }
  .admin-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .admin-topbar-menu-btn {
    display: none; width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink-2); cursor: pointer; align-items: center; justify-content: center; flex-shrink: 0;
  }
  .admin-topbar-logo {
    width: 32px; height: 32px; display: grid; place-items: center; flex-shrink: 0;
  }
  .admin-topbar-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .admin-topbar-title { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
  .admin-role-badge {
    display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 800;
    letter-spacing: 0.06em; padding: 4px 10px; border-radius: 100px; flex-shrink: 0;
    background: var(--primary-soft); color: var(--primary-deep);
  }
  .admin-role-badge.owner { background: #FFF4DC; color: #8A5A00; }
  .admin-topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .admin-topbar-avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep);
    display: grid; place-items: center; font-weight: 700; font-size: 13px;
  }
  .admin-topbar-back { padding: 7px 14px; font-size: 12.5px; white-space: nowrap; }

  .admin-shell { display: flex; align-items: flex-start; gap: 24px; margin-top: 20px; }
  .admin-sidebar {
    flex: 0 0 200px; width: 200px; position: sticky; top: 76px;
    display: flex; flex-direction: column; gap: 2px;
  }
  .admin-nav-item {
    display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 9px;
    font-size: 13.5px; font-weight: 600; color: var(--ink-2); background: none; border: none;
    cursor: pointer; font-family: inherit; transition: all 0.15s;
  }
  .admin-nav-item:hover { background: var(--paper-2); }
  .admin-nav-item.active { background: var(--primary-soft); color: var(--primary-deep); }
  .admin-main { flex: 1; min-width: 0; }
  .admin-sidebar-overlay { display: none; }

  .admin-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  /* Bulk "clear every demo listing" action above the Demo tab's table. A red text action
     rather than a filled button: it's destructive, so it shouldn't read as the primary
     thing to do on the page. */
  .admin-bulk-danger {
    display: inline-block; background: none; border: 0; padding: 2px 0; margin-bottom: 12px;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--danger); cursor: pointer;
    transition: opacity .18s ease;
  }
  .admin-bulk-danger:hover { opacity: .75; text-decoration: underline; }

  .admin-kpi-grid, .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  /* Unified with Agent Dashboard's .dash-stat (css/main.css, search dash-stat) — same
     conceptual "stat tile" component, previously two independently-drifted card shells
     (12px vs 16px radius, monospace vs serif number, always-on vs no resting shadow). */
  .admin-kpi-card, .admin-stat-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 20px;
  }
  .admin-kpi-card .v, .admin-stat-card .v { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
  .admin-kpi-card .l, .admin-stat-card .l { font-size: 12px; color: var(--ink-3); font-weight: 600; margin-top: 4px; }

  .admin-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); overflow: hidden; }
  .admin-panel-head { font-size: 12.5px; font-weight: 700; color: var(--ink-2); padding: 14px 16px; border-bottom: 1px solid var(--line); }

  .admin-quick-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 16px; }

  .admin-two-col { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin-top: 16px; }

  .admin-recent-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
  .admin-recent-item:last-child { border-bottom: none; }
  .admin-recent-action { font-weight: 600; color: var(--ink); }
  .admin-recent-meta { color: var(--ink-3); white-space: nowrap; }
  .admin-empty-inline { padding: 20px 16px; color: var(--ink-3); font-size: 13px; }

  .admin-attention-row {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: 12px 16px; border: none; border-bottom: 1px solid var(--line); background: none;
    cursor: pointer; font-family: inherit; text-align: left; transition: background 0.15s;
  }
  .admin-attention-row:last-child { border-bottom: none; }
  .admin-attention-row:hover { background: var(--paper-2); }
  .admin-attention-label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
  .admin-attention-count {
    font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12.5px; color: var(--ink-3);
    background: var(--paper-2); padding: 2px 9px; border-radius: 100px; min-width: 26px; text-align: center;
  }
  .admin-attention-count.has-items { background: rgba(255, 71, 87, 0.1); color: var(--danger); }

  .admin-search-row { margin-bottom: 16px; max-width: 380px; }

  .admin-list-table { display: flex; flex-direction: column; gap: 10px; }
  .admin-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--surface);
    border: 1px solid var(--line); border-radius: 12px;
  }
  .admin-row-img { width: 52px; height: 52px; border-radius: 9px; object-fit: cover; flex-shrink: 0; background: var(--paper-2); }
  .admin-user-avatar {
    width: 40px; height: 40px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-deep);
    display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0;
  }
  .admin-row-body { flex: 1; min-width: 0; }
  .admin-row-title { font-size: 13.5px; font-weight: 700; margin-bottom: 3px; }
  .admin-row-meta { font-size: 11.5px; color: var(--ink-3); margin-bottom: 6px; }
  .admin-row-flag { font-size: 11.5px; color: var(--danger); font-weight: 600; margin-top: 4px; cursor: help; }
  .admin-row-reject-reason { font-size: 11.5px; color: var(--danger); margin-top: 4px; }
  .admin-row-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; position: relative; }
  .admin-row-actions .btn { padding: 6px 12px; font-size: 12px; }

  .admin-status-pill {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.03em;
  }
  .admin-status-pill.status-pending { background: #FFF4DC; color: #8A5A00; }
  .admin-status-pill.status-active { background: rgba(0, 212, 170, 0.12); color: var(--success); }
  .admin-status-pill.status-rejected { background: rgba(255, 71, 87, 0.1); color: var(--danger); }
  /* CRM pipeline stages */
  .admin-status-pill.status-new { background: var(--paper-2); color: var(--ink-3); }
  /* Marks a seeded sample listing (isDemo) in the admin listings table. Token-based, so it
     follows the dark theme without needing its own override. */
  .admin-status-pill.status-demo { background: var(--paper-3); color: var(--ink-2); }
  .admin-status-pill.status-contacted { background: var(--primary-soft); color: var(--primary-deep); }
  .admin-status-pill.status-viewing { background: rgba(255, 176, 32, 0.15); color: #C77700; }
  .admin-status-pill.status-negotiation, .admin-status-pill.status-negotiating { background: rgba(123, 44, 191, 0.12); color: #7B2CBF; }
  .admin-status-pill.status-contract { background: rgba(39, 43, 104, 0.12); color: var(--primary-deep); }
  .admin-status-pill.status-closed_sold, .admin-status-pill.status-sold { background: rgba(0, 212, 170, 0.12); color: var(--success); }
  .admin-status-pill.status-closed_rented, .admin-status-pill.status-rented { background: rgba(0, 152, 120, 0.12); color: #007a5e; }
  /* CRM viewings */
  .admin-status-pill.status-scheduled { background: var(--primary-soft); color: var(--primary-deep); }
  .admin-status-pill.status-done { background: rgba(0, 212, 170, 0.12); color: var(--success); }
  .admin-status-pill.status-cancelled { background: rgba(255, 71, 87, 0.1); color: var(--danger); }
  /* CRM follow-up urgency */
  .admin-status-pill.status-overdue { background: rgba(255, 71, 87, 0.1); color: var(--danger); }
  .admin-status-pill.status-today { background: rgba(255, 176, 32, 0.15); color: #C77700; }
  .admin-status-pill.status-upcoming { background: var(--paper-2); color: var(--ink-3); }
  .admin-role-pill {
    display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 100px;
    text-transform: uppercase; letter-spacing: 0.03em; margin-right: 4px;
  }
  .admin-role-pill.role-owner { background: #FFF4DC; color: #8A5A00; }
  .admin-role-pill.role-admin { background: var(--primary-soft); color: var(--primary-deep); }
  .admin-role-pill.role-user { background: var(--paper-2); color: var(--ink-3); }

  /* ============ CRM ============ */
  .crm-count-badge {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: 100px; background: var(--paper-2); color: var(--ink-3);
    font-size: 10.5px; font-weight: 700; margin-left: 6px;
  }
  .crm-count-badge.danger { background: rgba(255, 71, 87, 0.12); color: var(--danger); }
  .crm-empty-row { padding: 16px; text-align: center; color: var(--ink-3); font-size: 12.5px; }

  /* Kanban board — no drag-and-drop (none needed, none loaded): each card carries a stage
     <select> instead, far more reliable on mobile touch than real drag targets. Columns
     scroll horizontally as a set rather than wrapping, same idiom as a real Kanban board. */
  .crm-kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; -webkit-overflow-scrolling: touch; }
  .crm-kanban-col { flex: 0 0 260px; background: var(--paper-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; max-height: 70vh; }
  .crm-kanban-col-head { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 10px; display: flex; align-items: center; padding: 0 2px; }
  .crm-kanban-col-body { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
  .crm-kanban-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px;
    cursor: pointer; box-shadow: var(--shadow-sm);
  }
  .crm-kanban-card-name { font-size: 13.5px; font-weight: 700; margin-bottom: 2px; }
  .crm-kanban-card-meta { font-size: 11.5px; color: var(--ink-3); margin-bottom: 2px; }
  .crm-stage-select { width: 100%; margin-top: 8px; font-size: 11.5px; padding: 5px 8px; }

  .crm-reminder-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
  .crm-reminder-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 10px 16px; border-top: 1px solid var(--line);
  }
  .crm-reminder-row:first-child { border-top: none; }
  .crm-reminder-row:hover { background: var(--paper-2); }
  .crm-reminder-main { cursor: pointer; min-width: 0; flex: 1; }
  .crm-reminder-side { flex-shrink: 0; text-align: right; }
  .crm-follow-name { font-size: 13px; font-weight: 700; }
  .crm-follow-note { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

  /* Today's task board — compact checklist rows, each a count + click-through */
  .crm-task-list { display: flex; flex-direction: column; }
  .crm-task-line {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 16px; cursor: pointer; border-top: 1px solid var(--line); font-size: 13.5px; font-weight: 600;
  }
  .crm-task-line:first-child { border-top: none; }
  .crm-task-line:hover { color: var(--primary); }

  /* Quick alerts — left-accent warning cards, reusing the app's existing danger tokens */
  .crm-alert-card {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: rgba(255, 71, 87, 0.06); border-left: 3px solid var(--danger); border-radius: 8px;
    padding: 10px 14px; margin-bottom: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
  }
  .crm-alert-card:last-child { margin-bottom: 0; }
  .crm-alert-card:hover { background: rgba(255, 71, 87, 0.1); }

  /* Client activity timeline — a left dot-and-line rail, newest entry first */
  .crm-timeline { display: flex; flex-direction: column; }
  .crm-timeline-item { display: flex; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
  .crm-timeline-item:first-child { border-top: none; }
  .crm-timeline-dot {
    width: 9px; height: 9px; border-radius: 50%; background: var(--primary); flex-shrink: 0; margin-top: 5px;
  }
  .crm-timeline-body { min-width: 0; flex: 1; }
  .crm-timeline-label { font-size: 13px; font-weight: 700; }
  .crm-timeline-desc { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; word-break: break-word; }
  .crm-timeline-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 3px; }

  /* Deal contract documents — one row per uploaded file, with a download link */
  .crm-doc-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 8px;
  }
  .crm-doc-row:last-child { margin-bottom: 0; }
  .crm-doc-name { font-size: 13px; font-weight: 700; word-break: break-word; }
  .crm-doc-meta { font-size: 11.5px; color: var(--ink-3); margin-top: 2px; }

  /* Live commission preview shown while filling out the deal form */
  .crm-commission-preview {
    font-size: 12.5px; color: var(--ink-2); background: var(--paper-2); border-radius: 8px;
    padding: 10px 12px; margin-top: 4px;
  }

  @media (max-width: 900px) {
    .crm-reminder-grid { grid-template-columns: 1fr; }
    .crm-kanban-col { flex: 0 0 78vw; }
  }
  @media (max-width: 640px) {
    .crm-reminder-row { flex-direction: column; align-items: flex-start; }
    .crm-reminder-side { text-align: left; }
    .crm-doc-row { flex-direction: column; align-items: flex-start; }
  }

  /* Compact "⋮" action menu — used on every admin table row so a row with several
     possible actions doesn't have to show every button inline. */
  .admin-menu { position: relative; }
  .admin-menu-trigger {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--surface);
    color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; display: grid; place-items: center;
  }
  .admin-menu-trigger:hover { background: var(--paper-2); }
  .admin-menu-list {
    display: none; position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 180px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg);
    padding: 6px; flex-direction: column; gap: 1px;
  }
  .admin-menu-list.open { display: flex; }
  .admin-menu-item {
    display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 7px;
    font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: none; border: none;
    cursor: pointer; font-family: inherit; white-space: nowrap;
  }
  .admin-menu-item:hover { background: var(--paper-2); }
  .admin-menu-item.danger { color: var(--danger); }

  /* Loading / error states shared by every admin section */
  .admin-loading { text-align: center; padding: 40px 20px; color: var(--ink-3); font-size: 13px; }
  .admin-state-block { text-align: center; padding: 48px 20px; }
  .admin-state-block .admin-state-title { font-weight: 700; font-size: 15px; color: var(--ink); margin: 10px 0 4px; }
  .admin-state-block .admin-state-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 16px; }
  /* Small failed-to-load indicator, distinct from the full adminErrorState() component
     (icon+title+sub+retry) — appropriate for a compact KPI card or a tiny badge where the
     full component would be oversized. Used by both adminKpiCard()'s error value and
     adminAttentionRow()'s "Алдаа" badge so they share one definition instead of two
     separately hand-typed inline styles. */
  .admin-inline-error { font-size: 12.5px; color: var(--danger); font-weight: 600; }

  /* ===== LOADING: skeleton + spinner (shared across buyer-facing pages) =====
     One subtle opacity pulse, not a moving-gradient shimmer — deliberately restrained. */
  @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
  .skeleton { background: var(--paper-2); border-radius: 6px; animation: skeletonPulse 1.4s ease-in-out infinite; }
  .skeleton-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  }
  .skeleton-card .skeleton-img { aspect-ratio: 4/3; border-radius: 0; }
  .skeleton-card .skeleton-body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
  .skeleton-card .skeleton-line { height: 12px; }
  .skeleton-card .skeleton-line.w-60 { width: 60%; }
  .skeleton-card .skeleton-line.w-80 { width: 80%; }
  .skeleton-card .skeleton-line.w-40 { width: 40%; }
  .skeleton-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 4px;
    border-top: 1px solid var(--line);
  }
  .skeleton-row:first-child { border-top: none; }
  .skeleton-row .skeleton-avatar { width: 36px; height: 36px; border-radius: 8px; flex-shrink: 0; }
  .skeleton-row .skeleton-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .skeleton-row .skeleton-line { height: 10px; }
  /* Reuses the existing @keyframes spin (defined once, further down, for .img-spinner). */
  .spinner {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: spin 0.7s linear infinite; vertical-align: -2px;
  }

  @media (max-width: 1024px) {
    .admin-two-col { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    .admin-topbar-menu-btn { display: flex; }
    .admin-topbar-title { display: none; }
    .admin-shell { gap: 0; }
    .admin-sidebar {
      position: fixed; top: 0; left: 0; bottom: 0; width: min(280px, 82vw); z-index: 1001;
      background: var(--surface); padding: 16px 12px; box-shadow: var(--shadow-lg); overflow-y: auto;
      transform: translateX(-100%); transition: transform 0.22s ease;
    }
    .admin-sidebar.open { transform: translateX(0); }
    .admin-sidebar-overlay.open { display: block; position: fixed; inset: 0; background: rgba(10, 22, 40, 0.45); z-index: 1000; }
  }
  @media (max-width: 640px) {
    .admin-body-wrap { padding: 16px 14px 48px; }
    .admin-row { flex-wrap: wrap; }
    .admin-row-actions { width: 100%; justify-content: flex-end; }
  }

  /* Site-facing sponsored/ad banner — real Firestore data only (see renderSiteAds(),
     js/home.js); the placement <div> stays empty with zero layout footprint whenever no
     active ad targets it, so an empty slot never shows as a blank gap. */
  .site-ad-banner {
    display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(39, 43, 104, 0.06) 0%, rgba(123, 44, 191, 0.05) 100%);
    border: 1px solid var(--line-2); border-radius: 14px; padding: 14px 18px; margin-bottom: 20px;
    text-decoration: none; color: inherit; transition: border-color 0.15s;
  }
  .site-ad-banner:hover { border-color: var(--primary); }
  .site-ad-banner img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
  .site-ad-body { min-width: 0; }
  .site-ad-label {
    display: inline-block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--primary-deep); background: var(--primary-soft); padding: 2px 8px; border-radius: 100px; margin-bottom: 4px;
  }
  .site-ad-title { font-size: 14px; font-weight: 700; color: var(--ink); }
  .site-ad-sponsor { font-size: 12px; color: var(--ink-3); margin-top: 1px; }

  .seller-stats { display: flex; gap: 16px; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
  .seller-stats span b { color: var(--ink); font-weight: 700; }

  /* Map */
  .map-pin { width: 40px; height: 40px; background: var(--primary); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; box-shadow: 0 4px 14px rgba(39,43,104,0.4); }
  .map-pin svg { transform: rotate(45deg); }

  @media (max-width: 640px) { .mc-thumb { width: 44px; height: 34px; } }

  .modal-body { padding: 32px; }
  .modal-title { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; margin-bottom: 8px; }
  .modal-loc { color: var(--ink-3); font-size: 14px; margin-bottom: 24px; display: flex; align-items: center; gap: 6px; }
  .modal-price-row { display: flex; align-items: baseline; gap: 12px; padding: 20px; background: var(--paper-2); border-radius: 14px; margin-bottom: 24px; }
  .modal-price { font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700; color: var(--primary); }
  .modal-price-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .price-alert-btn {
    display: inline-flex; align-items: center; gap: 6px; margin: -14px 0 20px;
    padding: 8px 14px; border-radius: 100px; border: 1px solid var(--line);
    background: var(--paper); color: var(--ink-2); font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
  }
  .price-alert-btn:hover { border-color: var(--primary); color: var(--primary); }
  .price-alert-btn.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-deep); }
  .modal-info-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
  .info-card { padding: 14px; background: var(--paper-2); border-radius: 10px; }
  .info-card-label { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
  .info-card-value { font-weight: 700; font-size: 16px; }
  .modal-section h4 { font-family: 'Fraunces', serif; font-size: 18px; margin-bottom: 12px; margin-top: 24px; }
  .modal-actions { display: flex; gap: 12px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
  .modal-actions .btn { flex: 1; justify-content: center; }

  /* Барилгын мэргэжлийн мэдээлэл */
  .prof-info-list {
    background: var(--paper-2); border-radius: 12px; padding: 4px;
  }
  .prof-info-row {
    display: grid; grid-template-columns: 180px 1fr; gap: 12px;
    padding: 12px 14px; border-bottom: 1px solid var(--line);
    align-items: start;
  }
  .prof-info-row:last-child { border-bottom: none; }
  .prof-info-row.highlight {
    background: rgba(255, 176, 32, 0.08);
    margin: 4px; border-radius: 8px; border-bottom: none;
  }
  .prof-info-label {
    font-size: 12px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.04em; padding-top: 2px;
  }
  .prof-info-value {
    font-size: 13.5px; color: var(--ink); line-height: 1.5;
  }

  /* .legal-grid/.legal-item/.legal-notes* (Эрх зүйн статус card section) retired —
     the fields they showed are now rows in .ld-spec-table below, and legalNotes free
     text is .ld-legal-notes (also below). */

  /* Stability checklist */
  .stability-item {
    display: flex; gap: 10px; align-items: center;
    padding: 8px 0; font-size: 13.5px;
  }
  .stability-item.ok { color: var(--success); }
  .stability-item.warn { color: #C77700; }
  .stability-item svg { flex-shrink: 0; }

  /* Required check list */
  .check-required {
    padding-left: 0; counter-reset: check-counter; list-style: none;
  }
  .check-required li {
    position: relative; padding: 12px 14px 12px 48px;
    margin-bottom: 8px; background: var(--paper-2); border-radius: 10px;
    font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
    counter-increment: check-counter;
  }
  .check-required li::before {
    content: counter(check-counter);
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary); color: white;
    display: grid; place-items: center;
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px;
  }

  @media (max-width: 640px) {
    .prof-info-row { grid-template-columns: 1fr; gap: 4px; }
  }

  /* ============ LISTING DETAIL PAGE — unegui.mn-density 2-column layout ============ */
  .listing-modal { max-width: 1260px; } /* spec: ~1180-1280px content width */

  .ld-header { padding: 20px 28px 0; }
  .ld-breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ink-3); margin-bottom: 10px;
    padding-right: 120px; /* clears the floating close/fav/share buttons, same as .ld-title below */
  }
  .ld-breadcrumb a { color: var(--ink-3); cursor: pointer; text-decoration: none; }
  .ld-breadcrumb a:hover { color: var(--primary); text-decoration: underline; }
  .ld-title {
    font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700;
    line-height: 1.2; margin-bottom: 8px; padding-right: 120px; /* clears the floating close/fav/share buttons */
  }
  .ld-header-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 12px; color: var(--ink-3); margin-bottom: 8px;
  }
  .ld-meta-dot { opacity: 0.5; }
  .ld-meta-views { display: inline-flex; align-items: center; gap: 4px; }
  .ld-header .modal-loc { margin-bottom: 12px; font-size: 12.5px; }
  .ld-header .modal-price-row { margin-bottom: 12px; padding: 14px 16px; }
  .ld-header .modal-price { font-size: 26px; }

  .ld-grid {
    display: grid; grid-template-columns: 3fr 1fr; gap: 24px;
    padding: 16px 28px 28px; align-items: start;
  }
  .ld-left { min-width: 0; }
  .ld-left .mc-wrap { border-radius: 10px; } /* .mc-wrap defaults to rounding only its top corners, meant for sitting flush against a modal's edge — here it's a card inside the grid, so it gets all four; kept subtle rather than the --radius-lg/xl scale used for bigger card containers elsewhere */
  .ld-right { min-width: 0; }
  .ld-sticky { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
  .ld-contact-box { background: var(--paper-2); border-radius: 10px; padding: 14px; text-align: center; }
  /* display:flex is required here, not just implied by .btn — a mobile rule elsewhere
     sets any .listing-compare to display:none (it was written for the card-overlay
     Compare button on listing cards); this button reuses that class purely for its
     toggleCompare() wiring, not the card context, so it must win that fight explicitly. */
  .listing-compare.ld-compare-btn {
    display: flex; position: static; padding: 10px 18px; border-radius: 10px; font-size: 13px;
    background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .listing-compare.ld-compare-btn:hover { background: var(--paper-2); }
  .listing-compare.ld-compare-btn.active { background: var(--primary-soft); color: var(--primary-deep); border-color: var(--primary); }

  /* Unified spec table — physical facts + building/professional + legal fields as one
     dense unegui.mn-style 2-column key:value grid (each .ld-spec-row is itself one
     label+value pair; the parent grid places two side by side per visual row), instead
     of the old 3 separate card sections. Missing fields are missing rows, never a "—"
     placeholder — same rule the old sections followed. */
  .ld-spec-table {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 10px;
    overflow: hidden; margin: 14px 0;
  }
  .ld-spec-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    background: var(--surface); padding: 8px 14px; font-size: 12.5px;
  }
  .ld-spec-row-label { color: var(--ink-3); font-weight: 500; }
  .ld-spec-row-value { color: var(--ink); font-weight: 700; text-align: right; }
  .ld-spec-row-value.ok { color: var(--success); }
  .ld-spec-row-value.warn { color: #C77700; }
  .ld-legal-notes {
    font-size: 12px; color: var(--ink-3); line-height: 1.5; margin: -6px 0 14px;
  }
  .ld-legal-notes strong { color: var(--ink-2); font-weight: 700; }

  .ld-sublocation {
    display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3);
    margin: 4px 0 14px;
  }
  .ld-sublocation strong { color: var(--ink); font-weight: 700; }

  /* Compact bottom sections (Market Insight, loan calc, checklist) — same .modal-section
     component, smaller heading/spacing so they read as secondary once moved out of the
     main scan-path. */
  .ld-section-compact.modal-section { margin-top: 20px; }
  .ld-left .modal-section h4 { font-size: 15px; margin-top: 20px; margin-bottom: 10px; }
  .ld-nearby-collapse { margin-top: 10px; font-size: 12.5px; }
  .ld-nearby-collapse summary { cursor: pointer; color: var(--primary); font-weight: 700; list-style: none; }
  .ld-nearby-collapse summary::-webkit-details-marker { display: none; }
  .ld-nearby-collapse summary::before { content: '+ '; }
  .ld-nearby-collapse[open] summary::before { content: '− '; }
  .ld-calc-inline .ld-calc { margin-top: 0; max-width: 420px; }

  /* Description */
  .ld-desc-text {
    font-size: 13.5px; line-height: 1.65; color: var(--ink-2);
    max-height: 150px; overflow: hidden; position: relative;
  }
  .ld-desc-text:not(.expanded)::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
    background: linear-gradient(to bottom, transparent, white);
  }
  .ld-desc-text.expanded { max-height: none; }
  .ld-desc-toggle {
    margin-top: 10px; background: none; border: none; cursor: pointer;
    color: var(--primary); font-weight: 700; font-size: 13.5px; font-family: inherit; padding: 0;
  }
  .ld-desc-toggle:hover { text-decoration: underline; }

  /* TP Property Market Insight stat row */
  .ld-mi-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
    margin-bottom: 18px;
  }
  .ld-mi-stat { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
  .ld-mi-stat-label { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
  .ld-mi-stat-val { font-size: 15px; font-weight: 700; font-family: 'JetBrains Mono', monospace; color: var(--ink); }

  /* Similar listings — same shared listingCardHtml() card as home/Listings, styled
     compact to match the unified marketplace design system. A distinct class from
     .listings-browse-grid (Listings page) and .home-listings-grid (home) so none of the
     three can leak into each other despite all sharing the base .listings-grid/
     .listing-card rules. 3-4/row desktop, 2-3/row tablet, 2/row mobile (auto-fit floor
     tuned so 2 never collapses to 1 in the modal's narrower column). */
  .ld-similar-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
  .ld-similar-grid .listing-img { aspect-ratio: 4/3; }
  .ld-similar-grid .listing-body { padding: 14px; }
  .ld-similar-grid .listing-price { font-size: 17px; }
  .ld-similar-grid .listing-price-sub { font-size: 11px; }
  .ld-similar-grid .listing-title {
    font-size: 13px; margin-bottom: 5px; -webkit-line-clamp: 2; display: -webkit-box;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .ld-similar-grid .listing-loc { font-size: 11.5px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ld-similar-grid .listing-meta { display: flex; padding-top: 10px; gap: 6px 10px; font-size: 11px; flex-wrap: wrap; }
  .ld-similar-grid .badge { padding: 3px 8px; font-size: 9.5px; }
  .ld-similar-grid .listing-fav { width: 40px; height: 40px; }
  .ld-similar-grid .price-tag { display: inline-block; font-size: 10px; padding: 3px 8px; }
  @media (max-width: 900px) {
    .ld-similar-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  }
  @media (max-width: 640px) {
    .ld-similar-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
  }

  /* Mini loan calculator (sidebar) */
  .ld-calc {
    margin-top: 18px; padding: 18px; background: var(--paper-2); border-radius: 14px;
  }
  .ld-calc-head {
    display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
    color: var(--ink); margin-bottom: 16px;
  }
  .ld-calc-row { margin-bottom: 14px; }
  .ld-calc-row label {
    display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600;
    color: var(--ink-2); margin-bottom: 8px;
  }
  .ld-calc-row select, .ld-calc-row input[type="number"] { width: 100%; }
  .ld-calc-out {
    background: var(--surface); border-radius: 10px; padding: 14px; text-align: center; margin: 16px 0 10px;
  }
  .ld-calc-out-label { font-size: 11px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
  .ld-calc-out-val { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; color: var(--primary); }
  .ld-calc-disclaimer { font-size: 11px; color: var(--ink-3); line-height: 1.5; }
  .ld-calc-full-link {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%;
    margin-top: 12px; padding: 10px; background: none; border: 1.5px solid var(--line-2);
    border-radius: 10px; cursor: pointer; font-family: inherit; font-size: 12.5px; font-weight: 700;
    color: var(--primary); transition: all 0.15s;
  }
  .ld-calc-full-link:hover { background: var(--surface); border-color: var(--primary); }

  /* Tablet: collapse to a single column, sidebar no longer sticky/floating */
  @media (max-width: 1024px) {
    .ld-grid { grid-template-columns: 1fr; }
    .ld-sticky { position: static; }
  }
  /* .mobile-sticky-call also starts showing at this exact breakpoint (768px) — this
     bottom-padding compensation has to match it 1:1, or the 641-768px band gets no
     clearance and the sticky bar can sit over the last bit of page content. The rest
     of the narrower-viewport tweaks (title size, spec-table columns, etc.) stay scoped
     to 640px below since those are genuinely narrow-screen-only adjustments. */
  @media (max-width: 768px) {
    .ld-grid { padding-bottom: 100px; }
  }
  @media (max-width: 640px) {
    .ld-header { padding: 16px 16px 0; }
    .ld-grid { padding: 14px 16px 100px; gap: 18px; } /* extra bottom padding clears the sticky contact bar */
    .ld-title { font-size: 20px; padding-right: 96px; }
    .ld-breadcrumb { padding-right: 96px; }
    .ld-spec-table { grid-template-columns: 1fr; } /* two side-by-side label:value pairs get too cramped below ~640px */
    .ld-mi-stats { grid-template-columns: repeat(2, 1fr); }
  }

  /* ============ BUILDING & ECONOMICS EDUCATION ============ */
  .edu-section { padding: 100px var(--page-pad); background: var(--surface); }
  .edu-tabs {
    display: flex; gap: 6px; background: var(--paper-2); padding: 6px; border-radius: 14px;
    margin-bottom: 32px; max-width: 560px;
  }
  .edu-tab {
    flex: 1; padding: 12px; border-radius: 10px; font-weight: 600; font-size: 14px;
    cursor: pointer; text-align: center; color: var(--ink-3); transition: all 0.2s;
    border: none; background: transparent; font-family: inherit;
  }
  .edu-tab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
  .edu-panel { display: none; }
  .edu-panel.active { display: block; animation: fadeIn 0.3s ease; }

  /* Building type comparison */
  .build-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 28px; }
  .build-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 24px;
    transition: all 0.25s;
  }
  .build-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .build-card-icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    margin-bottom: 16px; background: var(--primary-soft); color: var(--primary);
  }
  .build-card-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .build-card-mn { font-size: 12px; color: var(--ink-3); margin-bottom: 16px; }
  .build-rating { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .build-rating-row { display: grid; grid-template-columns: 90px 1fr 32px; gap: 10px; align-items: center; }
  .build-rating-label { font-size: 12px; color: var(--ink-3); font-weight: 600; }
  .build-rating-bar-wrap { height: 6px; background: var(--paper-3); border-radius: 3px; overflow: hidden; }
  .build-rating-bar { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
  .build-rating-val { font-size: 11px; font-weight: 700; color: var(--ink); text-align: right; font-family: 'JetBrains Mono', monospace; }
  .build-pros-cons { display: grid; gap: 4px; }
  .build-pc { font-size: 12.5px; line-height: 1.5; display: flex; gap: 8px; align-items: flex-start; }
  .build-pc svg { flex-shrink: 0; margin-top: 2px; }
  .build-pc.pro { color: var(--ink-2); }
  .build-pc.con { color: var(--ink-2); }

  /* Earthquake zone */
  .quake-card {
    background: linear-gradient(135deg, rgba(255,176,32,0.08), rgba(255,71,87,0.05));
    border: 1px solid rgba(255,176,32,0.3); border-radius: 18px; padding: 28px; margin-bottom: 24px;
  }
  .quake-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
  .quake-icon {
    width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
    background: var(--warning); color: white; display: grid; place-items: center;
  }
  .quake-head h4 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; }
  .quake-head p { font-size: 13px; color: var(--ink-3); }
  .quake-scale { display: flex; gap: 10px; margin: 18px 0; }
  .quake-level {
    flex: 1; padding: 14px 10px; border-radius: 10px; text-align: center;
  }
  .quake-level-num { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; }
  .quake-level-label { font-size: 11px; margin-top: 2px; font-weight: 600; }

  /* Insulation */
  .insul-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
  .insul-table th, .insul-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 13.5px; }
  .insul-table th { background: var(--paper-2); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--ink-3); }
  .insul-badge { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 700; }
  .insul-badge.good { background: rgba(0,212,170,0.15); color: var(--success); }
  .insul-badge.mid { background: rgba(255,176,32,0.15); color: #C77700; }
  .insul-badge.bad { background: rgba(255,71,87,0.12); color: var(--danger); }

  /* Economics: inflation chart */
  .econ-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 28px; margin-bottom: 24px;
  }
  .econ-card-title { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
  .econ-card-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 20px; }
  .econ-compare-row {
    display: grid; grid-template-columns: 160px 1fr 70px; gap: 14px; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--line);
  }
  .econ-compare-row:last-child { border-bottom: none; }
  .econ-label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
  .econ-label-note { font-size: 11px; color: var(--ink-3); font-weight: 400; }
  .econ-bar-wrap { height: 24px; background: var(--paper-2); border-radius: 6px; overflow: hidden; position: relative; }
  .econ-bar { height: 100%; border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 11px; font-weight: 700; color: white; transition: width 0.6s ease; }
  .econ-val { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px; text-align: right; }

  /* Real interest rate calc */
  .rir-box {
    background: var(--ink-fixed); color: white; border-radius: 16px; padding: 28px; margin-bottom: 24px;
    position: relative; overflow: hidden;
  }
  .rir-box::before {
    content: ''; position: absolute; top: -80px; right: -40px; width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(39,43,104,0.3), transparent 60%);
  }
  .rir-inner { position: relative; z-index: 2; }
  .rir-formula {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 20px 0;
    font-family: 'JetBrains Mono', monospace;
  }
  .rir-term {
    padding: 12px 18px; background: rgba(255,255,255,0.08); border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12); text-align: center;
  }
  .rir-term-val { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; }
  .rir-term-label { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }
  .rir-op { font-size: 24px; color: rgba(255,255,255,0.5); }
  .rir-result { color: var(--primary-glow); }

  /* Stress test */
  .stress-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .stress-card {
    border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--surface);
  }
  .stress-scenario { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
  .stress-scenario.safe { color: var(--success); }
  .stress-scenario.warn { color: #C77700; }
  .stress-scenario.danger { color: var(--danger); }
  .stress-payment { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; margin-bottom: 4px; }
  .stress-desc { font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
  .stress-ratio { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }

  @media (max-width: 768px) {
    .build-grid { grid-template-columns: 1fr; }
    .stress-grid { grid-template-columns: 1fr; }
    .quake-scale { flex-direction: column; }
    .edu-tabs { flex-direction: column; }
    .econ-compare-row { grid-template-columns: 1fr; gap: 6px; }
    .rir-formula { justify-content: center; }
  }

  /* ============ FIRST-TIME BUYER GUIDE ============ */
  .guide-section { padding: 100px var(--page-pad); background: var(--paper); position: relative; overflow: hidden; }
  .guide-hero {
    background: linear-gradient(135deg, var(--ink-fixed) 0%, var(--ink-2-fixed) 100%);
    border-radius: 24px; padding: 40px; color: white; margin-bottom: 40px;
    position: relative; overflow: hidden;
  }
  .guide-hero::before {
    content: ''; position: absolute; top: -100px; right: -50px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(39,43,104,0.3) 0%, transparent 60%);
  }
  .guide-hero-inner { position: relative; z-index: 2; }
  .guide-hero-badge {
    display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1);
    padding: 7px 14px; border-radius: 100px; font-size: 13px; font-weight: 600;
    margin-bottom: 20px; border: 1px solid rgba(255,255,255,0.15);
  }
  .guide-hero h3 {
    font-family: 'Fraunces', serif; font-size: clamp(26px, 3.5vw, 38px); font-weight: 700;
    line-height: 1.15; margin-bottom: 14px; letter-spacing: -0.02em;
  }
  .guide-hero h3 em { font-style: italic; color: var(--primary-glow); }
  .guide-hero p { font-size: 16px; color: rgba(255,255,255,0.75); line-height: 1.6; max-width: 640px; }
  .guide-hero-stats { display: flex; gap: 32px; margin-top: 28px; flex-wrap: wrap; }
  .guide-hero-stat-num { font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; color: var(--primary-glow); }
  .guide-hero-stat-label { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 2px; }
  .guide-journey { margin-bottom: 48px; }
  .guide-journey-title { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; margin-bottom: 8px; text-align: center; }
  .guide-journey-sub { text-align: center; color: var(--ink-3); font-size: 15px; margin-bottom: 36px; }
  .journey-steps { display: grid; gap: 16px; max-width: 820px; margin: 0 auto; }
  .journey-step {
    display: flex; gap: 20px; background: var(--surface); border: 1px solid var(--line);
    border-radius: 16px; padding: 24px; transition: all 0.25s;
  }
  .journey-step:hover { box-shadow: var(--shadow-md); transform: translateX(4px); border-color: var(--primary-soft); }
  .journey-step-num {
    width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    color: white; display: grid; place-items: center; font-family: 'Fraunces', serif;
    font-size: 22px; font-weight: 700; box-shadow: 0 4px 12px rgba(39,43,104,0.3);
  }
  .journey-step-body { flex: 1; }
  .journey-step-title { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; margin-bottom: 6px; }
  .journey-step-desc { font-size: 14px; color: var(--ink-2); line-height: 1.6; margin-bottom: 10px; }
  .journey-step-tip {
    font-size: 13px; padding: 10px 14px; background: var(--primary-soft); border-radius: 10px;
    color: var(--primary-deep); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start;
  }
  .journey-step-tip svg { flex-shrink: 0; margin-top: 1px; }
  .guide-warnings { margin-bottom: 48px; }
  .warnings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .warning-card {
    background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--danger);
    border-radius: var(--radius-md); padding: 22px; transition: all 0.2s;
  }
  .warning-card:hover { box-shadow: var(--shadow-md); }
  .warning-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .warning-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255,71,87,0.12); color: var(--danger); display: grid; place-items: center;
  }
  .warning-card-title { font-weight: 700; font-size: 15px; }
  .warning-card-desc { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
  .warning-card-fix {
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--success); line-height: 1.5; display: flex; gap: 8px; align-items: flex-start;
  }
  .warning-card-fix svg { flex-shrink: 0; margin-top: 1px; }
  .guide-docs {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; margin-bottom: 48px;
  }
  .guide-docs-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
  .guide-docs-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
  .doc-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .doc-item {
    display: flex; gap: 12px; padding: 16px; background: var(--paper-2); border-radius: 12px;
    align-items: flex-start; cursor: pointer; transition: all 0.15s;
    border: 1.5px solid transparent;
  }
  .doc-item:hover { background: var(--primary-soft); border-color: rgba(39,43,104,0.12); }
  .doc-item.checked { background: rgba(0,212,170,0.06); border-color: rgba(0,212,170,0.3); }
  .doc-check {
    width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-2);
    flex-shrink: 0; display: grid; place-items: center; transition: all 0.15s; margin-top: 2px;
  }
  .doc-item.checked .doc-check { background: var(--accent); border-color: var(--accent); }
  .doc-check svg { opacity: 0; transition: opacity 0.15s; }
  .doc-item.checked .doc-check svg { opacity: 1; }
  .doc-item.checked .doc-label { text-decoration: line-through; color: var(--ink-3); }
  .doc-body { flex: 1; min-width: 0; }
  .doc-label { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.4; }
  .doc-note { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
  .doc-tip {
    display: none; font-size: 11.5px; color: var(--ink-3); margin-top: 7px; line-height: 1.55;
    background: rgba(39,43,104,0.04); padding: 8px 10px; border-radius: 8px;
    border-left: 3px solid var(--primary); gap: 5px; align-items: flex-start;
  }
  .doc-item:hover .doc-tip, .doc-item.checked .doc-tip { display: flex; }
  .doc-tip svg { flex-shrink: 0; margin-top: 2px; color: var(--primary); }
  .doc-link-btn {
    display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;
    padding: 5px 10px; border-radius: 8px; background: var(--surface);
    border: 1.5px solid var(--line-2); color: var(--primary);
    font-size: 11.5px; font-weight: 700; text-decoration: none;
    transition: all 0.15s; white-space: nowrap; margin-top: 1px;
  }
  .doc-link-btn:hover { border-color: var(--primary); background: var(--primary-soft); transform: translateY(-1px); }
  .doc-progress-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
  }
  .doc-progress-label { font-size: 13px; color: var(--ink-3); font-weight: 500; }
  .doc-counter {
    font-size: 20px; font-weight: 800; color: var(--primary);
    font-family: 'JetBrains Mono', monospace;
  }
  .doc-progress-bar {
    height: 6px; background: var(--line); border-radius: 100px; margin-bottom: 20px; overflow: hidden;
  }
  .doc-progress-fill {
    height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--primary), var(--accent));
    transition: width 0.3s ease; width: 0%;
  }
  .guide-fraud {
    background: linear-gradient(135deg, rgba(255,176,32,0.08), rgba(255,71,87,0.05));
    border: 1px solid rgba(255,176,32,0.3); border-radius: 18px; padding: 32px; margin-bottom: 48px;
  }
  .guide-fraud-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
  .guide-fraud-icon {
    width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
    background: var(--warning); color: white; display: grid; place-items: center;
  }
  .guide-fraud-head h4 { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; }
  .guide-fraud-head p { font-size: 13px; color: var(--ink-3); }
  .fraud-list { display: grid; gap: 12px; }
  .fraud-item {
    display: flex; gap: 12px; padding: 14px 16px; background: var(--surface); border-radius: 10px;
    align-items: flex-start; font-size: 14px; line-height: 1.55; color: var(--ink-2);
  }
  .fraud-item svg { flex-shrink: 0; margin-top: 2px; color: var(--danger); }
  .fraud-item strong { color: var(--ink); }
  .guide-costs {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; margin-bottom: 40px;
  }
  .guide-costs-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; margin-bottom: 6px; }
  .guide-costs-sub { font-size: 14px; color: var(--ink-3); margin-bottom: 24px; }
  .cost-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .cost-row:last-child { border-bottom: none; }
  .cost-row.total { border-top: 2px solid var(--ink); margin-top: 8px; padding-top: 16px; }
  .cost-label { font-size: 14px; color: var(--ink-2); }
  .cost-label strong { color: var(--ink); font-weight: 700; }
  .cost-label-note { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
  .cost-value { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink); font-size: 14px; }
  .cost-row.total .cost-value { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; color: var(--primary); }
  .guide-cta { text-align: center; padding: 40px; background: var(--paper-2); border-radius: 18px; }
  .guide-cta h4 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin-bottom: 8px; }
  .guide-cta p { color: var(--ink-3); font-size: 15px; margin-bottom: 24px; max-width: 480px; margin-left: auto; margin-right: auto; }
  .guide-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
  @media (max-width: 768px) {
    .warnings-grid { grid-template-columns: 1fr; }
    .doc-checklist { grid-template-columns: 1fr; }
    .journey-step { flex-direction: column; gap: 14px; }
    .guide-hero { padding: 28px; }
  }

  /* ============ ADVANCED FILTER ============ */
  /* .filter-panel and its old always-visible/collapsible-advanced split were replaced by
     the sidebar's per-field <details> sections (.filter-section, above) — .filter-reset,
     .filter-field, .filter-range, .filter-toggles/.filter-toggle below are still reused
     as-is inside those sections. */
  .filter-reset {
    font-size: 13px; color: var(--primary); cursor: pointer; font-weight: 600;
    background: none; border: none; font-family: inherit;
  }
  .filter-field label {
    display: block; font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
  }
  .filter-field select, .filter-field input {
    width: 100%; padding: 6px 10px; border: 1.5px solid var(--line-2);
    border-radius: 7px; font-family: inherit; font-size: 12.5px; background: var(--paper);
    color: var(--ink); transition: all 0.18s;
  }
  .filter-field select:focus, .filter-field input:focus {
    outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft);
  }
  .filter-range { display: flex; gap: 6px; align-items: center; }
  .filter-range span { color: var(--ink-3); font-size: 12px; }
  .filter-range input, .filter-range select {
    flex: 1; min-width: 0; width: 100%; padding: 6px 6px; border: 1.5px solid var(--line-2);
    border-radius: 7px; font-family: inherit; font-size: 12.5px; background: var(--paper);
    color: var(--ink); cursor: pointer; transition: all 0.18s;
  }
  .filter-range input:focus, .filter-range select:focus {
    outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-soft);
  }
  /* Хотхон/Хороо reuse the site-wide .form-input class (used on every other form across
     the app, so that class itself must stay untouched) — scoped override here so these two
     fields match the sidebar's compact ~33px control height instead of the taller default. */
  #listingsSidebar .filter-section-body .form-input {
    padding: 6px 10px; font-size: 12.5px; border-radius: 7px;
  }
  .filter-toggles {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
    padding-top: 16px; border-top: 1px solid var(--line);
  }
  .filter-toggle {
    padding: 7px 14px; border-radius: 100px; background: var(--paper-2);
    font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s;
    border: 1.5px solid transparent; color: var(--ink-2);
  }
  .filter-toggle:hover { background: var(--primary-soft); }
  .filter-toggle.active { background: var(--primary); color: white; }
  /* Compare bar (floating) */
  .compare-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
    background: var(--ink-fixed); color: white; padding: 14px 24px;
    display: none; align-items: center; gap: 16px;
    box-shadow: 0 -4px 24px rgba(10, 22, 40, 0.2);
    transform: translateY(100%); transition: transform 0.3s ease;
  }
  .compare-bar.show { display: flex; transform: translateY(0); }
  .compare-bar-items { display: flex; gap: 12px; flex: 1; overflow-x: auto; }
  .compare-bar-item {
    display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.08);
    padding: 8px 12px; border-radius: 10px; flex-shrink: 0;
  }
  .compare-bar-item img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
  .compare-bar-item-info { font-size: 12px; }
  .compare-bar-item-title { font-weight: 600; }
  .compare-bar-item-price { color: var(--primary-glow); font-family: 'JetBrains Mono', monospace; }
  .compare-bar-remove {
    width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.15);
    border: none; color: white; cursor: pointer; display: grid; place-items: center;
    flex-shrink: 0;
  }
  .compare-bar-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
  .compare-bar-hint { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

  /* Compare checkbox on cards */
  .listing-compare {
    position: absolute; bottom: 12px; left: 12px; z-index: 2;
    display: flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.95); padding: 6px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: all 0.18s; border: none; font-family: inherit; color: var(--ink-2);
  }
  .listing-compare:hover { background: var(--surface); }
  .listing-compare.active { background: var(--primary); color: white; }
  .listing-compare-check {
    width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--ink-3);
    display: grid; place-items: center; transition: all 0.15s;
  }
  .listing-compare.active .listing-compare-check { border-color: white; background: var(--surface); }

  /* Compare modal table */
  .compare-table-modal {
    width: 100%; border-collapse: collapse;
  }
  .compare-table-modal th, .compare-table-modal td {
    padding: 14px; text-align: left; border-bottom: 1px solid var(--line);
    font-size: 13.5px; vertical-align: top; min-width: 148px;
  }
  .compare-table-modal th {
    background: var(--paper-2); font-weight: 700; position: sticky; top: 0; z-index: 2;
  }
  .compare-table-modal .row-label {
    font-weight: 700; color: var(--ink-3); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.03em; background: var(--paper);
    width: 130px; min-width: 130px;
    position: sticky; left: 0; z-index: 1;
  }
  .compare-table-modal th.row-label { z-index: 3; }
  .compare-prop-head { text-align: center; position: relative; }
  .compare-prop-remove {
    position: absolute; top: 4px; right: 4px; z-index: 4; width: 22px; height: 22px;
    border-radius: 50%; background: var(--paper); border: 1px solid var(--line); color: var(--ink-3);
    cursor: pointer; display: grid; place-items: center; transition: all 0.15s;
  }
  .compare-prop-remove:hover { background: var(--danger); border-color: var(--danger); color: white; }
  .compare-prop-img {
    width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin-bottom: 8px;
  }
  .compare-prop-title {
    font-weight: 700; font-size: 14px; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .compare-cell-best { background: rgba(0, 212, 170, 0.08); }
  .compare-cell-best::after {
    content: ' ✓'; color: var(--success); font-weight: 700;
  }
  @media (max-width: 640px) {
    .compare-table-modal .row-label { width: 96px; min-width: 96px; font-size: 10.5px; }
    .compare-table-modal th, .compare-table-modal td { min-width: 120px; padding: 10px; }
  }

  /* ============ CHAT SYSTEM ============ */
  .chat-modal {
    max-width: 760px; height: 600px; max-height: 85vh;
    display: flex; flex-direction: column; padding: 0; overflow: hidden;
  }
  .chat-layout { display: flex; flex: 1; min-height: 0; }
  .chat-list {
    width: 320px; border-right: 1px solid var(--line); display: flex; flex-direction: column;
    flex-shrink: 0;
  }
  .chat-list-head {
    padding: 20px; border-bottom: 1px solid var(--line);
  }
  .chat-list-head h3 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; }
  .chat-list-items { flex: 1; overflow-y: auto; }
  .chat-list-item {
    display: flex; gap: 10px; align-items: center; padding: 14px 16px; cursor: pointer;
    border-bottom: 1px solid var(--line); transition: all 0.15s; position: relative;
  }
  .chat-list-item:hover { background: var(--paper-2); }
  .chat-list-item.active { background: var(--primary-soft); }
  .chat-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; color: white; font-weight: 700;
    font-family: 'Fraunces', serif; font-size: 16px;
  }
  .chat-list-thumb {
    width: 30px; height: 30px; border-radius: 7px; object-fit: cover; flex-shrink: 0;
    border: 1px solid var(--line);
  }
  .chat-list-info { flex: 1; min-width: 0; }
  .chat-list-name {
    font-weight: 700; font-size: 14px; margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chat-list-preview {
    font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Unread rows read heavier, like an unopened email — matches the reference screenshot. */
  .chat-list-item.unread .chat-list-name { font-weight: 800; }
  .chat-list-item.unread .chat-list-preview { color: var(--ink); font-weight: 600; }
  .chat-list-meta {
    display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0;
  }
  .chat-list-time { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
  .chat-unread-badge {
    min-width: 18px; height: 18px; background: var(--primary); color: white;
    border-radius: 100px; font-size: 10px; font-weight: 700; display: grid; place-items: center;
    padding: 0 5px;
  }
  .chat-closed-toggle {
    display: block; width: 100%; padding: 12px 16px; background: none; border: none;
    border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-3);
    cursor: pointer; text-align: center; font-family: inherit;
  }
  .chat-closed-toggle:hover { background: var(--paper-2); color: var(--ink-2); }

  /* 3-dot conversation menu — same trigger/toggle/click-outside-closes idiom as admin.js's
     adminActionMenu, own CSS since this one becomes a mobile bottom sheet (matching the
     Unegui.mn reference) rather than a small anchored dropdown. */
  .chat-menu { position: relative; flex-shrink: 0; }
  .chat-menu-trigger {
    width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
    color: var(--ink-3); font-size: 18px; font-weight: 700; cursor: pointer;
    display: grid; place-items: center; transition: background 0.15s;
  }
  .chat-menu-trigger:hover { background: var(--paper-2); color: var(--ink); }
  .chat-menu-list {
    display: none; position: absolute; right: 0; top: 36px; z-index: 30;
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: var(--shadow-md); min-width: 200px; padding: 6px; flex-direction: column; gap: 2px;
  }
  .chat-menu-list.open { display: flex; }
  .chat-menu-item {
    padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 500;
    color: var(--ink); background: none; border: none; text-align: left; cursor: pointer;
    font-family: inherit; transition: background 0.15s;
  }
  .chat-menu-item:hover { background: var(--paper-2); }
  .chat-menu-item.danger { color: var(--danger); }
  .chat-menu-item.danger:hover { background: rgba(255, 71, 87, 0.08); }
  @media (max-width: 640px) {
    /* Bottom-sheet on mobile, matching the reference image, instead of a cramped anchored
       dropdown that would otherwise clip against the narrow chat-list width. */
    .chat-menu-list {
      position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 200;
      border-radius: 16px 16px 0 0; min-width: 0; padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
      box-shadow: 0 -8px 24px rgba(10, 22, 40, 0.18);
    }
    .chat-menu-item { padding: 14px 16px; font-size: 14.5px; }
  }

  .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  .chat-header {
    padding: 16px 20px; border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 12px;
  }
  .chat-header-info { flex: 1; min-width: 0; }
  .chat-back-mobile {
    display: none; width: 36px; height: 36px; border-radius: 50%;
    border: none; background: var(--paper-2); cursor: pointer;
    place-items: center; color: var(--ink-2); flex-shrink: 0;
  }
  .chat-header-name {
    font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chat-property-ref {
    display: flex; gap: 10px; padding: 10px 16px; background: var(--paper-2);
    border-bottom: 1px solid var(--line); align-items: center; cursor: pointer;
  }
  .chat-property-ref img { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; }
  .chat-property-ref-info { flex: 1; }
  .chat-property-ref-title { font-size: 13px; font-weight: 600; }

  .chat-messages {
    flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px;
    background: var(--paper);
  }
  .chat-msg { display: flex; gap: 8px; max-width: 75%; }
  .chat-msg.sent { align-self: flex-end; flex-direction: row-reverse; }
  .chat-bubble {
    padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.45;
    overflow-wrap: break-word; word-break: break-word;
  }
  .chat-msg.received .chat-bubble {
    background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px;
  }
  .chat-msg.sent .chat-bubble {
    background: var(--primary); color: white; border-bottom-right-radius: 4px;
  }
  .chat-input-bar {
    display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line);
    align-items: center;
  }
  .chat-input {
    flex: 1; height: 44px; padding: 0 16px; border: 1.5px solid var(--line-2); border-radius: 100px;
    font-family: inherit; font-size: 14px; transition: all 0.18s;
  }
  .chat-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
  .chat-send {
    width: 44px; height: 44px; border-radius: 50%; background: var(--primary);
    border: none; cursor: pointer; display: grid; place-items: center; color: white;
    flex-shrink: 0; transition: all 0.18s;
  }
  .chat-send:hover { background: var(--primary-deep); transform: scale(1.05); }

  /* Gallery */
  .gallery-modal {
    max-width: 900px; padding: 0; overflow: hidden; background: var(--ink-fixed);
  }
  .gallery-main {
    position: relative; aspect-ratio: 16/10; background: #000;
  }
  .gallery-main img { width: 100%; height: 100%; object-fit: contain; }
  .gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.15);
    border: none; cursor: pointer; display: grid; place-items: center; color: white;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: all 0.18s;
  }
  .gallery-nav:hover { background: rgba(255, 255, 255, 0.3); }
  .gallery-nav.prev { left: 16px; }
  .gallery-nav.next { right: 16px; }
  .gallery-counter {
    position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.6); color: white; padding: 6px 14px; border-radius: 100px;
    font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .gallery-thumbs {
    display: flex; gap: 8px; padding: 16px; overflow-x: auto; background: var(--ink-2);
  }
  .gallery-thumb {
    width: 80px; height: 60px; border-radius: 8px; object-fit: cover; cursor: pointer;
    flex-shrink: 0; opacity: 0.5; transition: all 0.18s; border: 2px solid transparent;
  }
  .gallery-thumb.active { opacity: 1; border-color: var(--primary); }
  .gallery-thumb:hover { opacity: 0.8; }

  /* Mini map */
  .mini-map {
    aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; position: relative;
    background: linear-gradient(135deg, #E8EFF5 0%, #D5E3F0 100%); border: 1px solid var(--line);
  }
  .mini-map-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(39,43,104,0.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(39,43,104,0.06) 1px, transparent 1px);
    background-size: 32px 32px;
  }
  .mini-map-roads {
    position: absolute; inset: 0;
  }
  .map-pin {
    position: absolute; transform: translate(-50%, -100%); z-index: 2;
    cursor: pointer; transition: all 0.2s;
  }
  .map-pin:hover { transform: translate(-50%, -100%) scale(1.15); z-index: 3; }
  .map-pin-marker {
    background: var(--primary); color: white; padding: 4px 10px; border-radius: 8px;
    font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow-md);
    font-family: 'JetBrains Mono', monospace;
  }
  .map-pin-marker.main { background: var(--danger); }
  .map-pin::after {
    content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%);
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 6px solid var(--primary);
  }
  .map-pin.main::after { border-top-color: var(--danger); }
  .map-poi {
    position: absolute; transform: translate(-50%, -50%); z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; color: var(--ink-3); font-weight: 600;
  }
  .map-poi-dot {
    /* Sits directly on the (never dark-moded) map tile itself, not a page surface — stays
       a literal white dot regardless of theme so it doesn't look like a hole in the map. */
    width: 24px; height: 24px; border-radius: 50%; background: white;
    display: grid; place-items: center; box-shadow: var(--shadow-sm);
  }

  @media (max-width: 640px) {
    .chat-list { width: 100%; position: absolute; inset: 0; z-index: 5; background: var(--surface); }
    .chat-list.hidden-mobile { display: none; }
    .chat-back-mobile { display: grid; }
    .chat-modal { height: 90vh; }
    .compare-bar { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px; }
    .compare-table-modal { font-size: 12px; }
    .compare-table-modal th, .compare-table-modal td { padding: 8px; }
  }

  /* ============ SOCIAL FEED ============ */
  .feed-section { padding: 100px var(--page-pad); background: var(--paper); }
  .feed-layout {
    display: grid; grid-template-columns: 260px 1fr 300px; gap: 28px;
    align-items: start;
  }
  .feed-sidebar {
    position: sticky; top: 90px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .feed-nav-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 16px;
    border-radius: 12px; cursor: pointer; transition: all 0.18s;
    font-weight: 600; font-size: 14px; color: var(--ink-2);
    border: none; background: transparent; font-family: inherit; text-align: left; width: 100%;
  }
  .feed-nav-item:hover { background: var(--paper-2); }
  .feed-nav-item.active { background: var(--primary-soft); color: var(--primary); }
  .feed-nav-item svg { flex-shrink: 0; }
  .feed-nav-count {
    margin-left: auto; font-size: 11px; padding: 2px 8px;
    background: var(--primary); color: white; border-radius: 100px; font-weight: 700;
  }

  /* Compose box */
  .compose-box {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 18px; margin-bottom: 24px; box-shadow: var(--shadow-sm);
  }
  .compose-top { display: flex; gap: 12px; align-items: center; }
  .compose-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    display: grid; place-items: center; color: white; font-weight: 700; font-size: 18px;
    font-family: 'Fraunces', serif;
  }
  .compose-trigger {
    flex: 1; padding: 12px 18px; background: var(--paper-2); border-radius: 100px;
    color: var(--ink-3); cursor: pointer; font-size: 14px; transition: all 0.18s;
    border: none; text-align: left; font-family: inherit;
  }
  .compose-trigger:hover { background: var(--paper-3); }
  .compose-actions {
    display: flex; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  }
  .compose-action {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px; border-radius: 8px; cursor: pointer; transition: all 0.18s;
    font-size: 13px; font-weight: 600; color: var(--ink-2); border: none; background: transparent;
    font-family: inherit;
  }
  .compose-action:hover { background: var(--paper-2); }

  /* Feed post */
  .feed-post {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    margin-bottom: 20px; overflow: hidden; transition: all 0.2s;
  }
  .feed-post:hover { box-shadow: var(--shadow-md); }
  .post-header {
    display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  }
  .post-avatar {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; color: white; font-weight: 700; font-size: 16px;
    font-family: 'Fraunces', serif;
  }
  .post-author-info { flex: 1; }
  .post-author {
    font-weight: 700; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 6px;
  }
  .post-verified {
    width: 15px; height: 15px; background: var(--primary); border-radius: 50%;
    display: inline-grid; place-items: center;
  }
  .post-badge-role {
    font-size: 10px; padding: 1px 7px; border-radius: 100px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .post-badge-role.agent { background: var(--primary-soft); color: var(--primary-deep); }
  .post-badge-role.company { background: rgba(255, 176, 32, 0.15); color: #C77700; }
  .post-badge-role.owner { background: var(--paper-2); color: var(--ink-2); }
  .post-time { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
  .post-menu {
    width: 32px; height: 32px; border-radius: 50%; border: none; background: transparent;
    cursor: pointer; display: grid; place-items: center; color: var(--ink-3); transition: all 0.18s;
  }
  .post-menu:hover { background: var(--paper-2); }
  .post-text {
    padding: 0 18px 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink);
  }
  .post-text .tag { color: var(--primary); font-weight: 600; }

  /* Post property card embed */
  .post-property {
    margin: 0 18px 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: all 0.2s;
  }
  .post-property:hover { border-color: var(--primary); }
  .post-property-img { aspect-ratio: 16/9; overflow: hidden; position: relative; }
  .post-property-img img { width: 100%; height: 100%; object-fit: cover; }
  .post-property-price {
    position: absolute; bottom: 12px; left: 12px;
    background: rgba(10, 22, 40, 0.85); color: white; padding: 6px 14px; border-radius: 8px;
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .post-property-body { padding: 14px 16px; }
  .post-property-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
  .post-property-meta { font-size: 13px; color: var(--ink-3); display: flex; gap: 12px; }

  /* Post images grid */
  .post-images {
    display: grid; gap: 3px; margin-bottom: 14px;
  }
  .post-images.single { grid-template-columns: 1fr; }
  .post-images.double { grid-template-columns: 1fr 1fr; }
  .post-images.triple { grid-template-columns: 2fr 1fr; }
  .post-images img { width: 100%; object-fit: cover; aspect-ratio: 16/10; cursor: pointer; }
  .post-images.triple img:first-child { grid-row: span 2; aspect-ratio: auto; }

  /* Post actions (like, comment, share) */
  .post-stats {
    display: flex; justify-content: space-between; padding: 10px 18px;
    font-size: 13px; color: var(--ink-3); border-bottom: 1px solid var(--line);
  }
  .post-actions {
    display: flex; padding: 6px;
  }
  .post-action {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px; border-radius: 8px; cursor: pointer; transition: all 0.18s;
    font-size: 13.5px; font-weight: 600; color: var(--ink-2); border: none; background: transparent;
    font-family: inherit;
  }
  .post-action:hover { background: var(--paper-2); }
  .post-action.liked { color: var(--danger); }
  .post-action.liked svg { fill: var(--danger); stroke: var(--danger); }

  /* Right sidebar - trending/promoted */
  .feed-right { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 20px; }
  .feed-widget {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  }
  .feed-widget-title {
    font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; margin-bottom: 16px;
    display: flex; align-items: center; gap: 8px;
  }
  .trending-item {
    display: flex; gap: 12px; padding: 10px 0; cursor: pointer;
    border-bottom: 1px solid var(--line);
  }
  .trending-item:last-child { border-bottom: none; }
  .trending-rank {
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
    color: var(--primary); width: 24px; flex-shrink: 0;
  }
  .trending-info { flex: 1; }
  .trending-name { font-weight: 600; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
  .trending-meta { font-size: 12px; color: var(--ink-3); }

  /* Promoted card */
  .promoted-card {
    border-radius: var(--radius-md); overflow: hidden; cursor: pointer; transition: all 0.2s;
    position: relative; border: 1px solid var(--line);
  }
  .promoted-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .promoted-label {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: rgba(255, 176, 32, 0.95); color: white; padding: 3px 9px; border-radius: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .promoted-img { aspect-ratio: 16/10; }
  .promoted-img img { width: 100%; height: 100%; object-fit: cover; }
  .promoted-body { padding: 12px 14px; }
  .promoted-price { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; color: var(--ink); }
  .promoted-title { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }

  /* ============ NOTIFICATIONS ============ */
  .notif-trigger {
    position: relative; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); cursor: pointer;
    display: grid; place-items: center; color: var(--ink-2); transition: all 0.18s;
  }
  .notif-trigger:hover { background: var(--paper-2); border-color: var(--line-2); }
  /* Theme toggle shows whichever icon represents the mode a click would switch TO. */
  #themeToggleBtn .theme-icon-moon { display: none; }
  html.dark #themeToggleBtn .theme-icon-sun { display: none; }
  html.dark #themeToggleBtn .theme-icon-moon { display: block; }
  .notif-badge-count {
    position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px;
    background: var(--danger); color: white; border-radius: 100px;
    font-size: 10px; font-weight: 700; display: grid; place-items: center;
    padding: 0 4px; border: 2px solid white;
  }
  .notif-panel {
    position: absolute; top: 56px; right: 0; width: 380px; max-width: calc(100vw - 32px);
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    box-shadow: var(--shadow-lg); z-index: 200; overflow: hidden;
    display: none; animation: notifIn 0.22s ease;
  }
  .notif-panel.open { display: block; }
  @keyframes notifIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .notif-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 18px 20px; border-bottom: 1px solid var(--line);
  }
  .notif-header h4 { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; }
  .notif-mark-read {
    font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 600;
    background: none; border: none; font-family: inherit;
  }
  .notif-list { max-height: 420px; overflow-y: auto; }
  .notif-item {
    display: flex; gap: 12px; padding: 14px 20px; cursor: pointer;
    transition: all 0.15s; border-bottom: 1px solid var(--line); position: relative;
  }
  .notif-item:hover { background: var(--paper-2); }
  .notif-item.unread { background: var(--primary-soft); }
  .notif-item.unread:hover { background: #DCE8FF; }
  .notif-item.unread::before {
    content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; background: var(--primary); border-radius: 50%;
  }
  .notif-icon {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
  }
  .notif-icon.view { background: var(--primary-soft); color: var(--primary); }
  .notif-icon.price { background: rgba(0, 212, 170, 0.15); color: var(--success); }
  .notif-icon.message, .notif-icon.chat_message { background: rgba(255, 176, 32, 0.15); color: #C77700; }
  .notif-icon.match { background: rgba(123, 44, 191, 0.12); color: #7B2CBF; }
  .notif-icon.system { background: var(--paper-2); color: var(--ink-2); }
  .notif-content { flex: 1; }
  .notif-text { font-size: 13.5px; line-height: 1.45; color: var(--ink); margin-bottom: 3px; }
  .notif-text strong { font-weight: 700; }
  .notif-time { font-size: 12px; color: var(--ink-3); }
  .notif-footer {
    padding: 14px 20px; text-align: center; border-top: 1px solid var(--line);
  }
  .notif-footer a { color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; text-decoration: none; }

  /* ============ SELLER DASHBOARD ============ */
  .dash-section { padding: 100px var(--page-pad); background: var(--paper-2); }
  .dash-header-card {
    background: linear-gradient(135deg, var(--ink-fixed), var(--ink-2-fixed)); color: white;
    border-radius: 20px; padding: 32px; margin-bottom: 24px; position: relative; overflow: hidden;
  }
  .dash-header-card::before {
    content: ''; position: absolute; top: -100px; right: -50px; width: 350px; height: 350px;
    background: radial-gradient(circle, rgba(39, 43, 104, 0.3), transparent 60%);
  }
  .dash-header-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
  .dash-greeting { font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700; margin-bottom: 6px; }
  .dash-sub { font-size: 14px; color: rgba(255, 255, 255, 0.7); }

  .dash-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px;
  }
  .dash-stat {
    background: var(--surface); border-radius: 16px; padding: 20px; border: 1px solid var(--line);
  }
  .dash-stat-icon {
    width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center;
    margin-bottom: 14px;
  }
  .dash-stat-icon.blue { background: var(--primary-soft); color: var(--primary); }
  .dash-stat-icon.green { background: rgba(0, 212, 170, 0.15); color: var(--success); }
  .dash-stat-icon.orange { background: rgba(255, 176, 32, 0.15); color: #C77700; }
  .dash-stat-icon.purple { background: rgba(123, 44, 191, 0.12); color: #7B2CBF; }
  .dash-stat-num {
    font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700; color: var(--ink);
    letter-spacing: -0.02em; line-height: 1;
  }
  .dash-stat-label { font-size: 12px; color: var(--ink-3); margin-top: 6px; }

  .dash-main-grid {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px;
  }
  .dash-panel {
    background: var(--surface); border-radius: 16px; padding: 24px; border: 1px solid var(--line);
  }
  .dash-panel-title {
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; margin-bottom: 4px;
  }
  .dash-panel-sub { font-size: 13px; color: var(--ink-3); margin-bottom: 20px; }

  /* Account sidebar (support + quick links) */
  .acct-sidebar { display: flex; flex-direction: column; gap: 22px; }
  .acct-support-label { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
  .acct-support-phone { font-family: 'JetBrains Mono', monospace; font-size: 18px; font-weight: 700; color: #FF6B35; margin-bottom: 4px; }
  .acct-support-email { font-size: 14px; font-weight: 700; color: var(--primary); text-decoration: none; }
  .acct-support-email:hover { text-decoration: underline; }
  .acct-nav-list { display: flex; flex-direction: column; gap: 2px; padding-top: 18px; border-top: 1px solid var(--line); }
  .acct-nav-list a { display: flex; align-items: center; justify-content: space-between; padding: 10px 4px; font-size: 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; border-radius: 8px; transition: background 0.15s, color 0.15s; }
  .acct-nav-list a:hover { background: var(--paper-2); color: var(--primary); }
  .acct-nav-count { font-size: 12px; font-weight: 700; color: var(--ink-3); }

  /* Views chart */
  .views-chart { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 20px; }
  .views-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
  .views-bar {
    width: 100%; max-width: 32px; border-radius: 6px 6px 0 0;
    background: linear-gradient(180deg, var(--primary-glow), var(--primary));
    transition: height 0.5s ease; position: relative; min-height: 4px;
  }
  .views-bar:hover { background: var(--primary-deep); }
  .views-bar-label { font-size: 11px; color: var(--ink-3); font-weight: 500; }

  /* Dashboard listing row */
  .dash-listing {
    display: flex; gap: 14px; padding: 14px; border-radius: 12px;
    border: 1px solid var(--line); margin-bottom: 12px; transition: all 0.18s;
  }
  .dash-listing:hover { background: var(--paper-2); }
  .dash-listing-img {
    width: 80px; height: 60px; border-radius: 8px; object-fit: cover; flex-shrink: 0;
  }
  .dash-listing-info { flex: 1; min-width: 0; }
  .dash-listing-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; overflow-wrap: break-word; }
  .dash-listing-price { font-size: 13px; color: var(--primary); font-weight: 600; }
  .dash-listing-stats {
    display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-3);
  }
  .dash-listing-stat { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .dash-listing-status {
    font-size: 11px; padding: 3px 8px; border-radius: 100px; font-weight: 700;
    height: fit-content;
  }
  .dash-listing-status.active { background: rgba(0, 212, 170, 0.15); color: var(--success); }
  .dash-listing-status.pending { background: rgba(255, 176, 32, 0.15); color: #C77700; }

  /* ============ BOOST / PROMOTION ============ */
  .boost-banner {
    background: linear-gradient(135deg, #FFB020, #FF8C00); color: white;
    border-radius: 16px; padding: 24px; margin-top: 24px; position: relative; overflow: hidden;
  }
  .boost-banner::before {
    content: ''; position: absolute; top: -50px; right: -30px; width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 60%);
  }
  .boost-banner-inner { position: relative; z-index: 2; }
  .boost-banner h4 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
  .boost-banner p { font-size: 14px; opacity: 0.9; margin-bottom: 16px; line-height: 1.5; }
  .boost-btn {
    background: var(--surface); color: #C77700; padding: 12px 24px; border-radius: 10px;
    font-weight: 700; border: none; cursor: pointer; font-family: inherit; font-size: 14px;
    transition: all 0.18s;
  }
  .boost-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }

  /* Boost modal */
  .boost-compare {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0;
  }
  .boost-plan {
    border: 2px solid var(--line-2); border-radius: 16px; padding: 22px; cursor: pointer;
    transition: all 0.2s; position: relative; background: var(--surface); font-family: inherit; text-align: left;
  }
  .boost-plan:hover { border-color: var(--primary-soft); }
  .boost-plan.active { border-color: var(--primary); background: var(--primary-soft); }
  .boost-plan-icon {
    width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 14px;
  }
  .boost-plan-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .boost-plan-multiplier { font-size: 13px; color: var(--accent); font-weight: 700; margin-bottom: 12px; }
  .boost-plan-price { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
  .boost-plan-period { font-size: 12px; color: var(--ink-3); }

  @media (max-width: 1024px) {
    .feed-layout { grid-template-columns: 1fr; }
    .feed-sidebar, .feed-right { display: none; }
    .dash-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dash-main-grid { grid-template-columns: 1fr; }
    .boost-compare { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .notif-panel { width: calc(100vw - 24px); right: -8px; }
    .views-chart { height: 120px; }
  }

  /* ============ RENT SECTION ============ */
  .rent-section { background: var(--paper); }

  /* Rent browse grid — mirrors .listings-browse-grid's compact card density,
     scoped separately so overrides never leak into the Listings/Home grids. */
  .rent-browse-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .rent-browse-grid .listing-img { aspect-ratio: 4/3; }
  .rent-browse-grid .listing-body { padding: 14px; }
  .rent-browse-grid .listing-price { font-size: 18px; }
  .rent-browse-grid .listing-price-sub { font-size: 11px; }
  .rent-browse-grid .listing-title {
    font-size: 13.5px; margin-bottom: 5px; -webkit-line-clamp: 2; display: -webkit-box;
    -webkit-box-orient: vertical; overflow: hidden;
  }
  .rent-browse-grid .listing-loc { font-size: 12px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rent-browse-grid .listing-meta { display: flex; padding-top: 10px; gap: 6px 10px; font-size: 11.5px; flex-wrap: wrap; }
  .rent-browse-grid .badge { padding: 3px 8px; font-size: 9.5px; }
  .rent-browse-grid .listing-fav { width: 40px; height: 40px; }
  .rent-browse-grid .price-tag { display: inline-block; font-size: 10px; padding: 3px 8px; }
  .rent-browse-grid .listing-compare { display: flex; font-size: 10.5px; padding: 5px 10px; }
  .rent-browse-grid .listing-img-count { display: flex; font-size: 10px; padding: 3px 8px; }
  .rent-browse-grid .listing-loan-strip { display: flex; margin-top: 10px; padding: 8px 10px; }
  .rent-browse-grid .loan-strip-label { font-size: 9.5px; }
  .rent-browse-grid .loan-strip-amt { font-size: 13px; }
  .rent-browse-grid .listing-card:active { transform: scale(0.98); }

  .rent-browse-grid.view-list { grid-template-columns: 1fr; gap: 10px; }
  .rent-browse-grid.view-list .listing-card { display: flex; flex-direction: row; align-items: stretch; }
  .rent-browse-grid.view-list .listing-img { width: 220px; flex-shrink: 0; aspect-ratio: auto; }
  .rent-browse-grid.view-list .listing-body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
  .rent-browse-grid.view-list .listing-card:hover { transform: none; }

  @media (max-width: 1280px) {
    .rent-browse-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  }
  @media (max-width: 640px) {
    .rent-browse-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
    .rent-browse-grid.view-list .listing-img { width: 110px; }
    .rent-browse-grid.view-list .listing-body { padding: 10px 12px; }
  }

  .mytab {
    padding: 12px 20px; border-radius: 10px; font-weight: 600; font-size: 14px;
    cursor: pointer; text-align: center; color: var(--ink-3); transition: all 0.2s;
    border: 1.5px solid var(--line); background: var(--paper-2); font-family: inherit;
  }
  .mytab.active { background: var(--surface); color: var(--primary); border-color: var(--primary); box-shadow: var(--shadow-sm); }
  .mytab:hover:not(.active) { color: var(--ink); }
  /* Rent CTA banner */
  .rent-cta {
    margin-bottom: 32px; padding: 28px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.12) 0%, rgba(39, 43, 104, 0.08) 100%);
    border: 1px solid rgba(0, 212, 170, 0.25); display: grid;
    grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  }
  .rent-cta-content h4 {
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
    margin-bottom: 6px; color: var(--ink);
  }
  .rent-cta-content p { font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 600px; }

  /* ============ NEW DEVELOPMENTS (Шинэ орон сууц) ============ */
  .newdev-section { background: var(--paper); }
  .newdev-cta {
    margin-bottom: 32px; padding: 28px; border-radius: 18px;
    background: linear-gradient(135deg, rgba(39, 43, 104, 0.1) 0%, rgba(123, 44, 191, 0.08) 100%);
    border: 1px solid rgba(39, 43, 104, 0.2); display: grid;
    grid-template-columns: 1fr auto; align-items: center; gap: 24px;
  }
  .newdev-cta-content h4 { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700; margin-bottom: 6px; color: var(--ink); }
  .newdev-cta-content p { font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 600px; }
  /* Compact grid — auto-fit like .listings-browse-grid, ~4/row desktop instead of the
     old fixed 3-column layout, so density matches the rest of the site. */
  .newdev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
  .newdev-card {
    background: var(--surface); border-radius: var(--radius-lg); overflow: hidden;
    border: 1px solid var(--line); transition: all 0.3s ease; cursor: pointer; position: relative;
  }
  .newdev-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--primary); }
  .newdev-img { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-2); }
  .newdev-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
  .newdev-card:hover .newdev-img img { transform: scale(1.05); }
  .newdev-badge {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    padding: 4px 9px; border-radius: 6px; font-size: 10px; font-weight: 700;
    color: white; background: rgba(39, 43, 104, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .newdev-units-badge {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: rgba(255, 255, 255, 0.95); padding: 4px 9px; border-radius: 6px;
    font-size: 10px; font-weight: 700; color: var(--ink-2);
  }
  .newdev-body { padding: 14px; }
  .newdev-company { font-size: 10.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
  .newdev-title {
    font-size: 13.5px; font-weight: 700; margin-bottom: 5px; line-height: 1.3;
    -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  }
  .newdev-loc {
    font-size: 12px; color: var(--ink-3); margin-bottom: 8px; display: flex; align-items: center; gap: 4px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .newdev-price-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 10px; border-top: 1px solid var(--line); }
  .newdev-price { font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; color: var(--ink); }
  .newdev-price-unit { font-size: 11px; color: var(--ink-3); font-weight: 500; }
  .newdev-complete { font-size: 12px; color: var(--ink-2); font-weight: 600; }
  .newdev-empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
  @media (max-width: 1280px) { .newdev-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
  @media (max-width: 900px) { .newdev-cta { grid-template-columns: 1fr; } }
  @media (max-width: 640px) { .newdev-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } }

  /* ============ BUY vs RENT CALCULATOR ============ */
  .compare-section { padding: 100px var(--page-pad); background: var(--surface); }
  .compare-card {
    background: var(--ink-fixed); color: white; border-radius: var(--radius-xl);
    padding: 48px; position: relative; overflow: hidden;
  }
  .compare-card::before {
    content: ''; position: absolute; top: -150px; left: -150px; width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(39, 43, 104, 0.25) 0%, transparent 60%);
    pointer-events: none;
  }
  .compare-card::after {
    content: ''; position: absolute; bottom: -100px; right: -100px; width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(0, 212, 170, 0.15) 0%, transparent 60%);
    pointer-events: none;
  }
  .compare-grid {
    display: grid; grid-template-columns: 420px 1fr; gap: 40px;
    position: relative; z-index: 2; align-items: start;
  }
  .compare-inputs > h3 {
    font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin-bottom: 8px;
  }
  .compare-inputs > .sub {
    font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-bottom: 24px;
  }
  .compare-input-row { margin-bottom: 18px; }
  .compare-label {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.85);
  }
  .compare-label-val {
    font-family: 'JetBrains Mono', monospace; color: var(--primary-glow); font-weight: 700;
  }
  .compare-slider {
    -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.15); outline: none;
  }
  .compare-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary-glow); cursor: pointer; border: 3px solid var(--ink);
    box-shadow: 0 2px 8px rgba(124, 131, 208, 0.6);
  }
  .compare-slider::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary-glow); cursor: pointer; border: 3px solid var(--ink);
  }
  .compare-results {
    background: rgba(255, 255, 255, 0.04); padding: 28px; border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .verdict-card {
    padding: 20px; border-radius: 14px; margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.15), rgba(0, 212, 170, 0.05));
    border: 1px solid rgba(0, 212, 170, 0.3);
  }
  .verdict-card.rent {
    background: linear-gradient(135deg, rgba(124, 131, 208, 0.18), rgba(124, 131, 208, 0.05));
    border-color: rgba(124, 131, 208, 0.35);
  }
  .verdict-label {
    font-size: 11px; font-weight: 700; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
  }
  .verdict-card.rent .verdict-label { color: var(--primary-glow); }
  .verdict-title {
    font-family: 'Fraunces', serif; font-size: 26px; font-weight: 700;
    letter-spacing: -0.01em; margin-bottom: 6px;
  }
  .verdict-amount {
    font-family: 'JetBrains Mono', monospace; font-size: 18px; color: var(--accent);
    margin-bottom: 8px; font-weight: 600;
  }
  .verdict-card.rent .verdict-amount { color: var(--primary-glow); }
  .verdict-desc {
    font-size: 13px; color: rgba(255, 255, 255, 0.75); line-height: 1.55;
  }

  .compare-table {
    background: rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 16px;
    margin-top: 16px;
  }
  .compare-row {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr;
    padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    align-items: center; font-size: 13px;
  }
  .compare-row:last-child { border-bottom: none; }
  .compare-row.head {
    font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 12px;
  }
  .compare-row-label { color: rgba(255, 255, 255, 0.7); }
  .compare-row-val {
    font-family: 'JetBrains Mono', monospace; font-weight: 600; color: white;
    text-align: right;
  }
  .compare-row-val.winner { color: var(--accent); }
  .compare-row-val.loser { color: rgba(255, 255, 255, 0.4); }

  /* ============ DEMOGRAPHICS DASHBOARD ============ */
  .demo-section { padding: 100px var(--page-pad); background: var(--paper); }
  .demo-intro {
    padding: 24px 28px; background: linear-gradient(135deg, var(--primary-soft), white);
    border-radius: 16px; margin-bottom: 32px;
    border-left: 4px solid var(--primary);
  }
  .demo-intro h4 {
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700;
    margin-bottom: 6px; color: var(--ink);
  }
  .demo-intro p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
  .demo-intro strong { color: var(--primary-deep); }

  .demo-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px;
  }
  .demo-card {
    background: var(--surface); border-radius: 18px; padding: 28px;
    border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  }
  .demo-card-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px;
  }
  .demo-card-title {
    font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700;
  }
  .demo-card-source { font-size: 11px; color: var(--ink-3); }

  /* District comparison */
  .district-list { display: grid; gap: 10px; }
  .district-row {
    display: grid; grid-template-columns: 110px 1fr 80px; gap: 14px;
    align-items: center; padding: 12px 14px; background: var(--paper-2);
    border-radius: 10px; transition: all 0.18s;
  }
  .district-row:hover { background: var(--primary-soft); }
  .district-name { font-weight: 700; font-size: 13.5px; color: var(--ink); }
  .district-bar-wrap {
    height: 8px; background: var(--paper-3); border-radius: 4px; overflow: hidden;
    position: relative;
  }
  .district-bar {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-glow) 100%);
    transition: width 0.5s ease;
  }
  .district-value {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
    color: var(--ink); text-align: right;
  }

  /* Single person stats */
  .stat-big {
    display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px;
  }
  .stat-big-num {
    font-family: 'Fraunces', serif; font-size: 56px; font-weight: 700;
    color: var(--primary); letter-spacing: -0.03em; line-height: 1;
  }
  .stat-big-unit { font-size: 16px; color: var(--ink-3); font-weight: 600; }
  .stat-big-label { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
  .stat-big-trend {
    font-size: 13px; padding: 4px 10px; border-radius: 100px;
    display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
  }
  .stat-big-trend.up { background: rgba(0, 212, 170, 0.12); color: var(--success); }
  .stat-big-trend.down { background: rgba(255, 71, 87, 0.12); color: var(--danger); }

  /* Age distribution */
  .age-dist { display: grid; gap: 8px; }
  .age-row {
    display: grid; grid-template-columns: 70px 1fr 50px; gap: 12px; align-items: center;
  }
  .age-label { font-size: 12px; font-weight: 600; color: var(--ink-3); }
  .age-bar-wrap { height: 28px; background: var(--paper-2); border-radius: 6px; overflow: hidden; }
  .age-bar {
    height: 100%; background: linear-gradient(90deg, var(--accent), #4DD4B5);
    display: flex; align-items: center; padding: 0 8px; color: white;
    font-size: 11px; font-weight: 700; transition: width 0.6s ease;
  }
  .age-pct {
    font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--ink);
    text-align: right;
  }

  /* Korea comparison */
  .compare-trend-card {
    background: var(--surface); padding: 28px; border-radius: 18px;
    border: 1px solid var(--line); margin-bottom: 24px;
  }
  .trend-grid {
    display: grid; grid-template-columns: 1fr 60px 1fr; gap: 20px; align-items: center;
  }
  .trend-col-head {
    font-family: 'Fraunces', serif; font-size: 16px; font-weight: 700; margin-bottom: 14px;
  }
  .trend-row {
    padding: 10px 14px; background: var(--paper-2); border-radius: 8px; margin-bottom: 6px;
    font-size: 13px; color: var(--ink-2);
  }
  .trend-row strong { color: var(--ink); }
  .trend-arrow {
    display: grid; place-items: center; color: var(--primary);
  }
  .trend-arrow svg { width: 32px; height: 32px; }

  /* Forecast big */
  .forecast-big {
    padding: 28px; border-radius: 16px;
    background: linear-gradient(135deg, var(--ink-fixed) 0%, var(--ink-2-fixed) 100%);
    color: white; position: relative; overflow: hidden;
  }
  .forecast-big::before {
    content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(39, 43, 104, 0.3) 0%, transparent 60%);
  }
  .forecast-big-inner { position: relative; z-index: 2; }
  .forecast-big h4 {
    font-family: 'Fraunces', serif; font-size: 20px; margin-bottom: 6px; font-weight: 700;
  }
  .forecast-big p { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-bottom: 20px; line-height: 1.6; }
  .forecast-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .forecast-item {
    padding: 16px; background: rgba(255, 255, 255, 0.06); border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
  }
  .forecast-item-year { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
  .forecast-item-val { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
  .forecast-item-desc { font-size: 11px; color: rgba(255, 255, 255, 0.6); line-height: 1.4; }

  @media (max-width: 1024px) {
    .compare-grid { grid-template-columns: 1fr; }
    .demo-grid { grid-template-columns: 1fr; }
    .forecast-items { grid-template-columns: repeat(2, 1fr); }
    .rent-cta { grid-template-columns: 1fr; }
    .trend-grid { grid-template-columns: 1fr; }
    .trend-arrow { transform: rotate(90deg); margin: 12px auto; }
  }
  @media (max-width: 640px) {
    .compare-card { padding: 28px 20px; }
    .demo-card { padding: 20px; }
    .stat-big-num { font-size: 42px; }
  }

  /* ============ ADD LISTING FORM ============ */
  .add-listing { padding: 36px; }
  .al-header { margin-bottom: 28px; }
  .al-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary);
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px;
    padding: 5px 12px; background: var(--primary-soft); border-radius: 100px;
  }
  .al-title {
    font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.15; margin-bottom: 8px;
  }
  .al-sub { color: var(--ink-3); font-size: 14px; }

  /* Stepper */
  .stepper {
    display: flex; gap: 6px; margin-bottom: 28px; padding: 14px;
    background: var(--paper-2); border-radius: 14px;
  }
  .step {
    flex: 1; display: flex; gap: 8px; align-items: center;
    padding: 10px 12px; border-radius: 10px; transition: all 0.2s;
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    background: transparent;
  }
  .step.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
  .step.done { color: var(--accent); }
  .step-num {
    width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--paper-3); color: var(--ink-2);
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 12px;
  }
  .step.active .step-num { background: var(--primary); color: white; }
  .step.done .step-num { background: var(--accent); color: white; }

  /* Compact mobile stepper — swaps in for the full pill row (see the max-width:768px
     block below) so 7 steps never needs to scroll or wrap into multiple lines. */
  .al-stepper-mobile { display: none; margin-bottom: 22px; }
  .al-stepper-mobile-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin-bottom: 8px; }
  .al-stepper-mobile-bar { height: 5px; background: var(--paper-3); border-radius: 100px; overflow: hidden; }
  .al-stepper-mobile-fill { height: 100%; background: var(--primary); border-radius: 100px; transition: width 0.25s ease; }

  /* Step panels */
  .step-panel { display: none; animation: fadeIn 0.3s ease; }
  .step-panel.active { display: block; }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .step-section-title {
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
    margin-bottom: 6px; color: var(--ink);
  }
  .step-section-sub { color: var(--ink-3); font-size: 13px; margin-bottom: 22px; }

  /* Form fields */
  .form-row { margin-bottom: 18px; }
  .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
  .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
  .form-label {
    display: block; font-size: 13px; font-weight: 600; color: var(--ink-2);
    margin-bottom: 6px;
  }
  .form-label .req { color: var(--danger); margin-left: 2px; }
  .form-label .hint { color: var(--ink-3); font-weight: 400; margin-left: 6px; }

  .form-input, .form-textarea, .form-select {
    width: 100%; border: 1.5px solid var(--line-2);
    border-radius: 10px; font-family: inherit; font-size: 14px;
    background: var(--surface); color: var(--ink); transition: all 0.2s;
  }
  /* Explicit height + horizontal-only padding (not .form-textarea, which is
     multi-line) — the ~40-44px form-control target site-wide, same pattern
     already used by .hs-select-wrap select / .auth-field input. */
  .form-input, .form-select { height: 44px; padding: 0 14px; }
  .form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft);
  }
  .form-textarea { resize: vertical; min-height: 90px; padding: 12px 14px; line-height: 1.5; }
  .form-input.err, .form-select.err, .form-textarea.err { border-color: var(--danger); background: rgba(255, 71, 87, 0.04); }
  .form-err-msg { font-size: 12px; color: var(--danger); margin-top: 4px; font-weight: 500; display: none; }
  .form-input.err + .form-err-msg, .form-select.err + .form-err-msg, .form-textarea.err + .form-err-msg { display: block; }
  .form-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
  .form-label-row .form-label { margin-bottom: 0; }
  .form-char-count { font-size: 11.5px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; }
  .form-textarea-lg { min-height: 220px; }

  /* Listing type cards */
  .type-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  }
  .type-card {
    padding: 18px 12px; border: 2px solid var(--line-2); border-radius: 12px;
    background: var(--surface); cursor: pointer; transition: all 0.2s; text-align: center;
    font-family: inherit;
  }
  .type-card:hover { border-color: var(--primary-soft); }
  .type-card.active {
    border-color: var(--primary); background: var(--primary-soft);
  }
  .type-card-icon {
    width: 42px; height: 42px; margin: 0 auto 8px;
    background: var(--paper-2); border-radius: 10px;
    display: grid; place-items: center; color: var(--ink-2);
  }
  .type-card.active .type-card-icon { background: var(--surface); color: var(--primary); }
  .type-card-name { font-weight: 700; font-size: 13.5px; color: var(--ink); margin-bottom: 2px; }
  .type-card-desc { font-size: 11px; color: var(--ink-3); }

  /* Listing intent (buy/rent/etc) */
  .intent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .intent-card {
    padding: 14px; border: 2px solid var(--line-2); border-radius: 12px;
    background: var(--surface); cursor: pointer; transition: all 0.2s; text-align: left;
    font-family: inherit;
  }
  .intent-card:hover { border-color: var(--primary-soft); }
  .intent-card.active { border-color: var(--primary); background: var(--primary-soft); }
  .intent-card-name { font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 2px; }
  .intent-card-desc { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }

  /* Phone verification */
  .phone-verify {
    padding: 24px; background: linear-gradient(135deg, var(--primary-soft), white);
    border: 1.5px solid var(--primary-soft); border-radius: 16px; margin-bottom: 18px;
  }
  .phone-input-group {
    display: flex; gap: 10px; align-items: stretch;
  }
  .phone-input-group .form-input { flex: 1; }
  .phone-prefix {
    display: flex; align-items: center; padding: 0 14px;
    background: var(--paper-2); border-radius: 10px;
    font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--ink-2);
    font-size: 14px; white-space: nowrap;
  }
  .otp-input-group {
    display: flex; gap: 8px; justify-content: center; margin: 20px 0;
  }
  .otp-input {
    width: 48px; height: 56px; text-align: center;
    border: 2px solid var(--line-2); border-radius: 10px;
    font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 700;
    color: var(--primary); background: var(--surface); transition: all 0.2s;
  }
  .otp-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
  .otp-input.filled { background: var(--primary-soft); }
  .resend-row {
    text-align: center; font-size: 13px; color: var(--ink-3); margin-top: 8px;
  }
  .resend-row a { color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; }

  /* Image upload */
  .image-upload-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  }
  .image-upload-box {
    aspect-ratio: 1; border: 2px dashed var(--line-2); border-radius: 12px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; background: var(--paper-2);
    color: var(--ink-3); position: relative; overflow: hidden;
  }
  .image-upload-box:hover { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
  .image-upload-box.drag-over { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); border-style: solid; }
  .image-upload-box.has-image { border-style: solid; border-color: var(--primary); padding: 0; background: var(--surface); }
  .image-upload-box img { width: 100%; height: 100%; object-fit: cover; }
  .image-upload-box .remove-img {
    position: absolute; top: 4px; right: 4px; width: 44px; height: 44px;
    background: rgba(0, 0, 0, 0.7); color: white; border: none; border-radius: 50%;
    cursor: pointer; display: grid; place-items: center; z-index: 2;
  }
  .image-upload-box .main-badge {
    position: absolute; top: 6px; left: 6px;
    background: var(--primary); color: white; padding: 3px 8px; border-radius: 6px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
  }
  .image-upload-text { font-size: 12px; font-weight: 600; margin-top: 6px; }
  .image-upload-hint { font-size: 10px; color: var(--ink-3); margin-top: 2px; }

  /* Upload progress / failure / cover / reorder overlays on a selected photo */
  .image-upload-box.busy img { filter: brightness(0.6); }
  .img-status-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; z-index: 1;
  }
  .img-spinner {
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: white;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .img-status-failed {
    background: rgba(220, 38, 38, 0.85); color: white; padding: 8px; text-align: center;
  }
  .img-status-failed span { font-size: 11px; font-weight: 600; line-height: 1.3; }
  .img-status-failed button {
    background: var(--surface); color: #dc2626; border: none; border-radius: 8px;
    padding: 5px 10px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit;
  }
  .image-upload-box .cover-btn {
    position: absolute; top: 4px; left: 4px; width: 44px; height: 44px;
    background: rgba(0, 0, 0, 0.55); color: white; border: none; border-radius: 50%;
    cursor: pointer; display: grid; place-items: center; z-index: 2;
  }
  .image-upload-box .cover-btn:hover { background: var(--primary); }
  .local-badge {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 1;
    background: rgba(10, 22, 40, 0.75); color: white; font-size: 9.5px; font-weight: 600;
    text-align: center; padding: 3px 4px; line-height: 1.3;
  }
  .img-reorder {
    position: absolute; bottom: 4px; right: 4px; display: flex; gap: 4px; z-index: 2;
  }
  .img-reorder button {
    width: 44px; height: 44px; border-radius: 50%; border: none;
    background: rgba(0, 0, 0, 0.7); color: white; cursor: pointer;
    display: grid; place-items: center; font-size: 17px; font-family: inherit;
  }
  .img-reorder button:disabled { opacity: 0.35; cursor: default; }

  .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

  /* Price suggestion */
  .price-suggest {
    margin-top: 12px; padding: 14px; background: var(--primary-soft); border-radius: 10px;
    border-left: 3px solid var(--primary); font-size: 13px; line-height: 1.5;
    display: flex; align-items: start; gap: 10px;
  }
  .price-suggest-icon {
    width: 28px; height: 28px; flex-shrink: 0; border-radius: 8px;
    background: var(--surface); display: grid; place-items: center; color: var(--primary);
  }
  .price-suggest strong { color: var(--primary-deep); font-weight: 700; }

  /* Toggle switches */
  .toggle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: var(--paper-2); border-radius: 10px;
    cursor: pointer; transition: all 0.15s;
    font-size: 13.5px; font-weight: 500; color: var(--ink-2);
  }
  .toggle-row:hover { background: var(--primary-soft); }
  .toggle-row.on { background: var(--primary-soft); color: var(--primary-deep); }
  .toggle-switch {
    width: 36px; height: 20px; border-radius: 12px; background: var(--paper-3);
    position: relative; transition: background 0.2s; flex-shrink: 0;
  }
  .toggle-switch::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
    transition: left 0.2s; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  }
  .toggle-row.on .toggle-switch { background: var(--primary); }
  .toggle-row.on .toggle-switch::after { left: 18px; }

  /* Feature chip grid — mobile-friendly multi-select replacing the old toggle-row list.
     .toggle-row-pt (payment-terms chips in the add/edit listing form) shares this exact
     look but is a separate class so its click handler (attachAddListingHandlers) writes
     into addListingState.paymentTerms instead of .features without any risk of the two
     arrays getting cross-wired. */
  .feature-chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .toggle-row.chip, .toggle-row-pt.chip {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 16px; min-height: 44px; border-radius: 100px;
    background: var(--paper-2); border: 1.5px solid var(--line-2);
    font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    cursor: pointer; transition: all 0.15s; text-align: center;
  }
  .toggle-row.chip:hover, .toggle-row-pt.chip:hover { border-color: var(--primary-soft); }
  .toggle-row.chip.on, .toggle-row-pt.chip.on { background: var(--primary); border-color: var(--primary); color: white; }
  .toggle-row.chip.on span::before, .toggle-row-pt.chip.on span::before { content: '✓ '; }

  /* Chip-select — single-choice replacement for a native <select>, backed by a hidden input */
  .chip-select { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip-option {
    padding: 10px 16px; min-height: 44px; border-radius: 100px;
    background: var(--paper-2); border: 1.5px solid var(--line-2);
    font-size: 13.5px; font-weight: 600; color: var(--ink-2);
    cursor: pointer; transition: all 0.15s; font-family: inherit;
  }
  .chip-option:hover { border-color: var(--primary-soft); }
  .chip-option.active { background: var(--primary); border-color: var(--primary); color: white; }

  /* Collapsible "+ Нэмэлт мэдээлэл" section */
  .al-more { margin-bottom: 18px; border: 1.5px solid var(--line-2); border-radius: 12px; overflow: hidden; }
  .al-more-toggle {
    display: flex; align-items: center; gap: 6px;
    padding: 14px 16px; cursor: pointer; font-size: 13.5px; font-weight: 700;
    color: var(--ink-2); list-style: none; user-select: none;
  }
  .al-more-toggle::-webkit-details-marker { display: none; }
  .al-more-toggle::before { content: '+'; font-size: 16px; font-weight: 400; color: var(--ink-3); width: 16px; }
  .al-more[open] .al-more-toggle::before { content: '−'; }
  .al-more-body { padding: 4px 16px 18px; }
  .al-more-body .form-grid-2:first-child { margin-top: 8px; }

  /* Step navigation */
  .step-nav {
    display: flex; gap: 10px; margin-top: 28px; padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .step-nav .btn { flex: 1; justify-content: center; min-width: 0; }
  .step-nav .btn-back { flex: 0 0 auto; }

  /* Pricing plan cards */
  .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
  .plan-card {
    padding: 20px; border: 2px solid var(--line-2); border-radius: 14px;
    cursor: pointer; transition: all 0.2s; background: var(--surface); text-align: left;
    font-family: inherit; position: relative;
  }
  .plan-card:hover { border-color: var(--primary-soft); }
  .plan-card.active { border-color: var(--primary); background: var(--primary-soft); }
  .plan-card.recommend::before {
    content: 'САНАЛ БОЛГОЖ БУЙ'; position: absolute; top: -10px; right: 12px;
    background: var(--accent); color: white; padding: 3px 10px; border-radius: 100px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  }
  .plan-name { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .plan-price {
    font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700;
    color: var(--primary-deep); margin-bottom: 12px;
  }
  .plan-price-period { font-size: 12px; color: var(--ink-3); font-weight: 500; }
  .plan-features { list-style: none; padding: 0; font-size: 12.5px; line-height: 1.6; }
  .plan-features li { padding-left: 18px; position: relative; margin-bottom: 4px; color: var(--ink-2); }
  .plan-features li::before {
    content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;
  }

  /* Review summary */
  /* Success state */
  .success-state {
    padding: 40px 24px; text-align: center;
  }
  .success-icon {
    width: 80px; height: 80px; margin: 0 auto 20px;
    border-radius: 50%; background: rgba(0, 212, 170, 0.15);
    display: grid; place-items: center; color: var(--accent);
    animation: pulseIn 0.5s ease;
  }
  @keyframes pulseIn {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
  }
  .success-title {
    font-family: 'Fraunces', serif; font-size: 24px; font-weight: 700; margin-bottom: 8px;
  }
  .success-id {
    font-family: 'JetBrains Mono', monospace; font-size: 13px;
    padding: 6px 12px; background: var(--paper-2); border-radius: 8px;
    display: inline-block; margin: 12px 0; color: var(--ink-2); font-weight: 600;
  }
  .success-info {
    color: var(--ink-3); font-size: 14px; line-height: 1.6;
    max-width: 420px; margin: 0 auto 28px;
  }

  /* Preview step — reuses the exact shared listingCardHtml() component (home/Listings/
     Listing Detail all already share it) so this genuinely looks like the real card, not
     a lookalike; constrained to a single-card width since it's one listing, not a grid. */
  .al-preview-wrap { max-width: 380px; margin: 0 auto 20px; }
  .al-preview-card .listing-card { cursor: default; }
  .al-preview-edit {
    display: flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 6px 4px;
    font-size: 12.5px; font-weight: 700; color: var(--primary); background: none; border: none;
    cursor: pointer; font-family: inherit;
  }
  .al-preview-edit:hover { text-decoration: underline; }
  .al-preview-block { margin-top: 16px; padding: 16px 18px; background: var(--paper-2); border-radius: 12px; }
  .al-preview-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 700; color: var(--ink); }
  .al-preview-block-head .al-preview-edit { margin: 0; }
  .al-preview-block-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

  /* 7 steps' full text-label pills stop fitting .add-listing's available width well
     before the general 768px tablet breakpoint below (verified overflowing at 820px) —
     the compact stepper needs its own, wider cutoff. */
  @media (max-width: 900px) {
    .stepper { display: none; }
    .al-stepper-mobile { display: block; }
  }
  @media (max-width: 768px) {
    .add-listing { padding: 20px; }
    .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
    .type-grid { grid-template-columns: 1fr 1fr; }
    .intent-grid { grid-template-columns: 1fr; }
    .image-upload-grid { grid-template-columns: 1fr 1fr; }
    .plan-grid { grid-template-columns: 1fr; }
    .toggle-grid { grid-template-columns: 1fr; }
  }

  /* Info page modal */
  .info-page { padding: 48px; }
  .info-page-eyebrow {
    display: inline-block; font-size: 11px; font-weight: 700; color: var(--primary);
    letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 14px;
    padding: 6px 12px; background: var(--primary-soft); border-radius: 100px;
  }
  .info-page-title {
    font-family: 'Fraunces', serif; font-size: 36px; font-weight: 700;
    letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 28px;
  }
  .info-page-body { color: var(--ink-2); font-size: 15px; line-height: 1.7; }
  .info-page-body p { margin-bottom: 16px; }
  .info-page-body h4 {
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
    color: var(--ink); margin-top: 32px; margin-bottom: 14px;
    padding-bottom: 8px; border-bottom: 1px solid var(--line);
  }
  .info-page-body strong { color: var(--ink); font-weight: 700; }

  /* Info stats */
  .info-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0;
  }
  .info-stat {
    padding: 18px; background: var(--paper-2); border-radius: 12px; text-align: center;
  }
  .info-stat-num {
    font-family: 'Fraunces', serif; font-size: 28px; font-weight: 700;
    color: var(--primary); letter-spacing: -0.02em;
  }
  .info-stat-label { font-size: 12px; color: var(--ink-3); margin-top: 4px; }

  /* Job cards */
  .job-list { display: grid; gap: 12px; margin: 16px 0; }
  .job-card {
    padding: 18px; background: var(--paper-2); border-radius: 12px;
    border-left: 3px solid var(--primary); transition: all 0.18s;
  }
  .job-card:hover { background: var(--primary-soft); transform: translateX(4px); }
  .job-tag {
    display: inline-block; padding: 3px 10px; background: var(--surface);
    border-radius: 100px; font-size: 11px; font-weight: 700; color: var(--primary);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px;
  }
  .job-title { font-weight: 700; font-size: 16px; margin-bottom: 4px; color: var(--ink); }
  .job-meta { font-size: 13px; color: var(--ink-3); margin-bottom: 8px; }
  .job-salary {
    font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
    color: var(--success);
  }

  /* Press list */
  .press-list { display: grid; gap: 14px; margin: 16px 0; }
  .press-item {
    padding: 18px; background: var(--paper-2); border-radius: 12px;
    border-left: 3px solid var(--accent);
  }
  .press-date {
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--ink-3); font-weight: 600; margin-bottom: 6px;
  }
  .press-title {
    font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 6px;
    line-height: 1.35;
  }
  .press-desc { font-size: 13px; color: var(--ink-3); line-height: 1.55; }

  /* Contact grid */
  .contact-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 20px 0;
  }
  .contact-card {
    padding: 22px; background: var(--paper-2); border-radius: var(--radius-md);
    transition: all 0.2s; border: 1px solid transparent;
  }
  .contact-card:hover { background: var(--surface); border-color: var(--primary-soft); box-shadow: var(--shadow-sm); }
  .contact-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: var(--surface); color: var(--primary); display: grid; place-items: center;
    margin-bottom: 12px; box-shadow: var(--shadow-sm);
  }
  .contact-card-label {
    font-size: 11px; font-weight: 700; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px;
  }
  .contact-card-value {
    font-family: 'Fraunces', serif; font-size: 20px; font-weight: 700;
    color: var(--ink); display: block; text-decoration: none; margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  a.contact-card-value:hover { color: var(--primary); }
  .contact-card-hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; }

  .dept-list { display: grid; gap: 8px; margin: 14px 0; }
  .dept-item {
    padding: 12px 16px; background: var(--paper-2); border-radius: 10px;
    font-size: 14px;
  }

  /* Security list */
  .security-list { display: grid; gap: 14px; margin: 16px 0; }
  .security-item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px; background: var(--paper-2); border-radius: 12px;
  }
  .security-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: var(--surface); color: var(--primary); display: grid; place-items: center;
    box-shadow: var(--shadow-sm);
  }
  .security-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--ink); }
  .security-desc { font-size: 13px; color: var(--ink-3); line-height: 1.55; }

  /* Checklist & step list */
  .checklist { display: grid; gap: 8px; margin: 14px 0; }
  .check-item {
    padding: 10px 14px; background: var(--paper-2); border-radius: 8px;
    font-size: 14px; color: var(--ink-2);
  }
  .step-list { padding-left: 24px; margin: 14px 0; }
  .step-list li { margin-bottom: 12px; padding-left: 6px; }

  /* Top picks */
  .top-pick-list { display: grid; gap: 12px; margin: 16px 0; }
  .top-pick {
    display: flex; gap: 16px; align-items: flex-start;
    padding: 18px; background: var(--paper-2); border-radius: 12px;
    transition: all 0.18s;
  }
  .top-pick:hover { background: var(--primary-soft); }
  .top-pick-rank {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--primary); color: white; display: grid; place-items: center;
    font-family: 'Fraunces', serif; font-weight: 700; font-size: 18px;
  }
  .top-pick-info { flex: 1; }
  .top-pick-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; color: var(--ink); }
  .top-pick-meta {
    font-family: 'JetBrains Mono', monospace; font-size: 12px;
    color: var(--ink-3); margin-bottom: 6px; font-weight: 500;
  }
  .top-pick-reason { font-size: 13px; color: var(--ink-2); line-height: 1.5; }

  @media (max-width: 640px) {
    .info-page { padding: 24px; }
    .info-page-title { font-size: 26px; }
    .info-stats { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
  }

  /* Toast notifications */
  .toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 2000;
    background: var(--ink-fixed); color: white; padding: 14px 20px; border-radius: 12px;
    box-shadow: 0 8px 24px rgba(10, 22, 40, 0.3);
    display: flex; align-items: center; gap: 10px;
    transform: translateY(100px); opacity: 0; transition: all 0.3s;
    font-size: 14px; font-weight: 500;
  }
  .toast.show { transform: translateY(0); opacity: 1; }
  .toast.success { background: var(--success); }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px) {
    .hero-grid, .calc-grid, .afford-grid, .forecast-grid { grid-template-columns: 1fr; }
    .listings-grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .nav-links { display: none; }
    /* The hamburger is the only way into the menu once .nav-links is hidden, so it gets a
       full 44x44 target from the moment it appears — not only at phone widths. Done with an
       overlay rather than min-width/min-height, which would make the icon the tallest item
       in the row and push the whole header 6px taller. */
    .mobile-toggle { display: grid; place-items: center; position: relative; }
    .mobile-toggle::after {
      content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 44px; height: 44px; border-radius: 10px;
    }
    .modal-info-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    /* One phone gutter for everything — .nav-inner, .hero-compact, section and .footer all
       read it, so the same vertical line holds on mobile too. Vertical padding is untouched. */
    :root { --page-pad: 16px; }
    .hero, section { padding-left: var(--page-pad); padding-right: var(--page-pad); }
    .listings-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .features-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .calc-inputs, .calc-results, .afford-card, .forecast-card { padding: 24px; }
    .hero-stats { flex-wrap: wrap; gap: 24px; }
    .nav-actions .btn-ghost { display: none; }
    .modal-body { padding: 24px; }
    .modal-actions { flex-direction: column; }

    /* The price row used to force the price and the tag/score column onto the same
       line at 36px font — at phone widths that left the price too little room and
       "605 сая ₮" would wrap mid-string, dropping the ₮ onto its own line. Stack the
       tag/score column below the price instead of squeezing it into the same row. */
    .modal-price-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .modal-price { font-size: 30px; }
    .modal-price-tags { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }

    /* Nav overflow fix — logo + all icon buttons + "Зар нэмэх" + the hamburger toggle
       don't fit on one row at phone widths, and previously just overflowed past the
       viewport edge instead of wrapping, pushing .mobile-toggle off-screen and making
       it impossible to open the nav menu at all. Favorites and "Зар нэмэх" are already
       one tap away from the bottom mobile nav, so hide their (redundant) top-nav
       duplicates here instead of cramming everything into the same row. */
    /* Compact mobile header: the 42px circles at an 18px row padding made the bar 71px
       tall for what is really a logo and four icons. 38px circles on a 10px row keep the
       same icon size and hit area (see the ::after tap target below) at 55px total. */
    .nav-inner { padding: 10px var(--page-pad); gap: 8px; }
    /* 8px here nets out to a 6px visual gap (each button carries an inline -2px margin),
       giving a 44px button pitch — exactly the size of the tap target below, so the
       targets sit edge to edge without overlapping into each other. */
    .nav-actions { gap: 8px; }
    .notif-trigger { width: 38px; height: 38px; }
    /* Shrinking the visible circle must not shrink what a thumb has to hit — this keeps a
       full 44x44 tap target centred on the 38px button without changing the layout. */
    .notif-trigger::after {
      content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 44px; height: 44px; border-radius: 50%;
    }
    .mobile-toggle { padding: 7px; }
    .nav-fav-btn, #addListingBtn { display: none; }
    /* Between 431–640px the wordmark still fits, just smaller (24px tall ≈ 183px wide,
       against ~234px of nav padding/gap/action buttons). Below 431px it's swapped for the
       square mark entirely — see the brand block at the end of this file. */
    .logo-wordmark { height: 24px; max-width: none; }
    /* Trimming the footer wordmark slightly keeps a comfortable margin at 360px rather
       than running it close to the content edge. */
    .footer-logo img { height: 24px; }

    /* ---- Compact 2-column listing card ----
       The full card (compare button, photo-count badge, price-per-м² sub-line, price
       tag, м²/өрөө/давхар/он meta row, loan strip) is built for a single wide desktop
       column. At 2-per-row phone widths that much content collided and clipped, so this
       trims each card to what the brief calls for: image, price, title, location,
       real posted-time, and the favorite button — nothing invented, just less shown. */
    .listing-img { aspect-ratio: 1/1; }
    .listing-badges { top: 6px; left: 6px; right: 44px; gap: 4px; }
    .badge { padding: 3px 6px; font-size: 8.5px; border-radius: 4px; }
    .listing-fav { top: 4px; right: 4px; width: 32px; height: 32px; }
    .listing-fav svg { width: 14px; height: 14px; }
    .listing-compare, .listing-img-count, .listing-loan-strip, .price-tag, .listing-meta { display: none; }
    .listing-body { padding: 10px; }
    .listing-price-row { margin-bottom: 2px; }
    .listing-price { font-size: 15px; }
    .listing-price-sub { display: none; }
    .listing-title {
      font-size: 12.5px; margin-bottom: 4px; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .listing-loc { font-size: 11px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .listing-time { display: block; margin: 0; }

    /* ---- Compact category tabs ----
       The top category-tab row scrolls horizontally as one tidy line instead of
       wrapping across several; the sidebar's own filter fields/toggles keep their real
       ids (filtering logic untouched) and just wrap normally inside the narrower panel. */
    .filter-bar {
      flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-pill { flex-shrink: 0; }
  }

  /* ============ PHONE LAYOUT REFINEMENTS ============ */
  /* Scoped entirely to <=640px (and narrower) — no desktop rule is touched. Fixes found by
     measuring the real phone layout: a 227px-tall search card whose controls were squeezed
     below their own text width, a 176px stats strip that wrapped mid-phrase, 100px of
     vertical section padding inherited from desktop, and a bottom nav with no active state. */
  @media (max-width: 640px) {
    /* ---- Vertical rhythm ----
       Only the horizontal padding was ever overridden for phones, so every section still
       carried the desktop 100px top/bottom. That is the "excessive empty space between
       major sections" — nothing else about the sections changes. */
    section { padding-top: 40px; padding-bottom: 40px; }
    .section-head { margin-bottom: 24px; gap: 14px; }
    .hero-compact { padding: 10px var(--page-pad) 14px; }
    .home-search-bar { padding: 12px 12px; }
    .home-info-strip { padding: 14px 14px; margin-top: 10px; gap: 12px; }

    /* ---- Search card ----
       The row previously kept all three primary controls on one line and let flex shrink
       them below their content width, which is what truncated "Ангилал" to "Анг..." and
       clipped the placeholder. Below 640px the blue button drops to its own full-width
       line instead: the two fields then get their real widths back, and the button is the
       easiest thing on the card to hit. The [Байршил][Шүүлтүүр] row is unchanged. */
    .hs-top-row { gap: 8px; }
    .hs-primary-row { flex-wrap: wrap; flex: 1 1 100%; gap: 8px; }
    .hs-secondary-row { flex: 1 1 100%; gap: 8px; }
    .hs-cat-select { flex: 0 1 128px; }
    .hs-keyword-wrap { flex: 1 1 140px; }
    .hs-search-btn { flex: 1 1 100%; height: 46px; font-size: 14px; }
    .hs-location-select { flex: 1 1 auto; }
    .hs-adv-toggle { flex: 0 0 auto; }
    /* One consistent control height/radius across the whole card. */
    .hs-select-wrap select, .hs-keyword-wrap input, .hs-adv-toggle { height: 44px; border-radius: 10px; }
    .hs-select-wrap select { padding-left: 32px; padding-right: 26px; font-size: 13px; }
    .hs-keyword-wrap input { font-size: 13px; padding-left: 34px; }
    .hs-select-icon { left: 10px; }
    .hs-select-chevron { right: 8px; }

    /* ---- Category shortcuts ----
       Already a hidden-scrollbar scroller; what looked broken was a tile sliced in half at
       the right edge. Scroll snapping lands each swipe on a whole tile, and the trailing
       padding lets the last one clear the card edge. */
    .hs-cat-shortcuts {
      margin: 12px -12px 0; padding: 12px 12px 2px;
      gap: 4px; scroll-snap-type: x mandatory; scroll-padding-left: 12px; overscroll-behavior-x: contain;
      /* A tile sliced flat at the card edge reads as broken; fading the last 22px makes the
         same overflow read as "swipe for more". Purely visual — the tile is still fully
         scrollable to, and scroll-snap lands each swipe on a whole tile. */
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    }
    .hs-cat-shortcut { scroll-snap-align: start; width: 68px; padding: 5px 2px; gap: 3px; font-size: 10.5px; }
    .hs-cs-icon { width: 28px; height: 28px; }
    /* Trailing spacer so the final tile can scroll fully clear of the card's right edge. */
    .hs-cat-shortcuts::after { content: ''; flex: 0 0 6px; }

    /* ---- Hero heading ----
       Same wording and the same italic-blue TP Property emphasis, one step smaller with
       balanced wrapping so it no longer breaks after a single word. */
    h1.hero-compact-title { font-size: 17.5px; line-height: 1.25; margin-bottom: 3px; text-wrap: balance; }
    .hero-compact-sub { font-size: 12.5px; }

    /* ---- Listing stats ----
       The inline "N зар · N орон сууц · …" run wrapped mid-phrase at phone widths. On
       mobile only, the same four items become a 2x2 grid with the count above its label —
       no bullet separators, no reflow, and a shorter card than the wrapped version. */
    .home-info-strip-text { min-width: 0; }
    .home-info-stats-inline {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; width: 100%;
      font-size: 11px;
    }
    .his-item {
      display: flex; flex-direction: column; white-space: normal;
      min-width: 0; line-height: 1.25; color: var(--ink-3);
    }
    .his-item strong { font-size: 18px; line-height: 1.1; }
    .his-item:not(:first-child)::before { content: none; }
  }

  /* 320-375px: the two fields still share a line, just on tighter bases — stacking them
     would cost another 52px of card height for no gain in legibility. */
  @media (max-width: 380px) {
    :root { --page-pad: 14px; }
    .hero, section { padding-left: var(--page-pad); padding-right: var(--page-pad); }
    .hs-cat-select { flex: 0 1 112px; }
    .hs-keyword-wrap { flex: 1 1 118px; }
    .hs-select-wrap select { padding-left: 30px; padding-right: 24px; font-size: 12.5px; }
    .hs-keyword-wrap input { font-size: 12.5px; }
    /* Trimming the filter button is what gives "Бүх байршил" enough room to render in
       full instead of ellipsing to "Бүх байр…" on a 320px screen. */
    .hs-adv-toggle { padding: 0 10px; font-size: 12px; gap: 4px; }
    .hs-location-select { flex: 1 1 58%; }
    .his-item strong { font-size: 17px; }
  }

  /* ============ MOBILE BOTTOM NAV ============ */
  .mobile-sticky-call {
    display: none;
    position: sticky; bottom: 0; left: 0; right: 0;
    background: rgba(250,251,252,0.97);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 50;
  }
  @media (max-width: 768px) {
    .mobile-sticky-call { display: flex; }
    /* .ld-sticky (the seller card) is already position:static/visible by this width (see
       the 1024px breakpoint above) — its own phone-reveal/chat buttons would otherwise
       duplicate the sticky bar's. Everything else in the card (avatar, name, badges,
       mailto, compare, "other listings") isn't duplicated, so stays visible. */
    .ld-sticky .ld-contact-box, .ld-sticky .ld-chat-btn { display: none; }
  }

  .mobile-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    background: rgba(250,251,252,0.96);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--line);
    padding: 0 0 env(safe-area-inset-bottom, 0);
  }
  .mobile-bottom-nav-inner {
    display: flex; align-items: stretch; height: 58px;
  }
  .mbn-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; cursor: pointer; background: none; border: none;
    color: var(--ink-3); font-size: 9px; font-weight: 700; font-family: 'Manrope',sans-serif;
    letter-spacing: 0.02em; text-transform: uppercase; padding: 6px 0;
    transition: color 0.15s;
    position: relative;
  }
  .mbn-btn.active, .mbn-btn:active { color: var(--primary); }
  /* The active tab was previously only a colour change on a 9px uppercase label — barely
     readable as "you are here". A brand-blue rule across the top of the tab plus a bolder
     icon stroke makes the current tab unmistakable without adding chrome. */
  .mbn-btn.active::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary);
  }
  .mbn-btn.active svg { stroke-width: 2.4; }
  /* .mbn-add carries its own blue circle, so the rule above would double up on it. */
  .mbn-btn.mbn-add::before { content: none; }
  .mbn-btn svg { flex-shrink: 0; }
  .mbn-fav-badge {
    position: absolute; top: 4px; right: calc(50% - 16px);
    background: var(--danger); color: #fff;
    font-size: 9px; font-weight: 700; border-radius: 100px;
    min-width: 16px; height: 16px; display: none;
    align-items: center; justify-content: center; padding: 0 3px;
  }
  @media (max-width: 768px) {
    .mobile-bottom-nav { display: block; }
    /* 58px is the bar itself; the inset is the home-indicator strip the bar pads itself
       with, which the old flat 58px did not account for — on an iPhone that left the last
       ~34px of page content sitting underneath the bar. */
    /* 58px bar + 1px top border + 5px of breathing room, so the last line of page content
       clears the bar instead of ending flush against its border. The inset is the home-
       indicator strip the bar pads itself with, which the old flat 58px never accounted
       for — on an iPhone that left ~34px of content sitting underneath the bar. */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
    #pwaBanner { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
  }

  /* ============ AUTH MODAL ============ */
  .auth-overlay {
    position: fixed; inset: 0; z-index: 300;
    background: rgba(10, 22, 40, 0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
  }
  .auth-overlay.open { opacity: 1; pointer-events: all; }
  .auth-box {
    background: var(--surface); border-radius: 24px;
    width: 100%; max-width: 420px;
    box-shadow: 0 32px 80px rgba(10,22,40,0.18), 0 8px 24px rgba(10,22,40,0.08);
    /* .auth-overlay's own 20px padding on each side is the "40" below — without a cap
       here, a step with several fields (e.g. register) has no scroll affordance and can
       overflow a short/landscape mobile viewport. */
    max-height: calc(100vh - 40px); overflow-x: hidden; overflow-y: auto;
    transform: translateY(10px); transition: transform 0.22s ease;
  }
  .auth-overlay.open .auth-box { transform: translateY(0); }

  .auth-step {
    padding: 40px 36px;
    display: flex; flex-direction: column; gap: 18px;
    animation: authFadeIn 0.2s ease;
  }
  @keyframes authFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

  .auth-header { display: flex; align-items: center; gap: 10px; }
  .auth-close-btn {
    margin-left: auto; width: 34px; height: 34px; border-radius: 50%;
    border: none; background: var(--paper-2); cursor: pointer;
    display: grid; place-items: center; transition: background 0.15s;
  }
  .auth-close-btn:hover { background: var(--paper-3); }
  .auth-back-btn {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--ink-3);
    background: none; border: none; cursor: pointer; padding: 0;
    font-family: inherit; transition: color 0.15s;
  }
  .auth-back-btn:hover { color: var(--ink); }
  .auth-logo-mark {
    width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0;
  }
  .auth-logo-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .auth-title { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 700; color: var(--ink); }
  .auth-sub { font-size: 14px; color: var(--ink-3); line-height: 1.5; margin-top: -6px; }

  .auth-google-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 13px; border-radius: 12px;
    border: 1.5px solid var(--line-2); background: var(--surface);
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
    cursor: pointer; transition: all 0.15s; box-shadow: var(--shadow-sm);
  }
  .auth-google-btn:hover { border-color: var(--primary-glow); box-shadow: 0 2px 12px rgba(39,43,104,0.1); }
  .auth-google-icon { width: 20px; height: 20px; }

  .auth-divider {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; font-weight: 600; color: var(--ink-3);
    text-transform: uppercase; letter-spacing: 0.08em;
  }
  .auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--line);
  }

  .auth-submit-btn {
    width: 100%; justify-content: center; height: 44px; font-size: 14px;
    border-radius: 10px; margin-top: 2px;
  }

  /* Auth form fields */
  .auth-field { display: flex; flex-direction: column; gap: 6px; }
  .auth-field label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
  .auth-field input {
    width: 100%; padding: 0 16px; height: 44px;
    border: 1.5px solid var(--line-2); border-radius: 10px;
    font-size: 14px; font-family: inherit; color: var(--ink);
    outline: none; transition: border-color 0.15s; background: var(--surface);
  }
  .auth-field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
  .auth-field-row { display: flex; gap: 10px; }
  .auth-field-row .auth-field { flex: 1; }

  .auth-forgot-link {
    text-align: right; font-size: 13px; font-weight: 600;
    color: var(--primary); cursor: pointer; margin-top: -8px;
  }
  .auth-forgot-link:hover { text-decoration: underline; }

  /* User avatar in nav */
  .user-av-nav {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-deep));
    display: grid; place-items: center; cursor: pointer;
    color: white; font-weight: 700; font-size: 14px;
    border: 2px solid transparent; transition: all 0.15s;
    position: relative;
  }
  .user-av-nav:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(39,43,104,0.15); }
  .user-av-nav img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
  .user-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    background: var(--surface); border-radius: 14px;
    box-shadow: var(--shadow-lg); border: 1px solid var(--line);
    min-width: 200px; padding: 8px; z-index: 200;
    display: none;
  }
  .user-dropdown.open { display: block; }
  .user-dropdown-name {
    padding: 10px 12px 6px;
    font-weight: 700; font-size: 14px; color: var(--ink);
  }
  .user-dropdown-phone {
    padding: 0 12px 10px;
    font-size: 12px; color: var(--ink-3); font-family: 'JetBrains Mono', monospace;
    border-bottom: 1px solid var(--line); margin-bottom: 6px;
  }
  .user-dropdown a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 500;
    color: var(--ink-2); cursor: pointer; transition: background 0.12s;
    text-decoration: none;
  }
  .user-dropdown a:hover { background: var(--paper-2); }
  .user-dropdown a.danger { color: var(--danger); }

  @media (max-width: 640px) {
    .auth-step { padding: 28px 24px; }
  }

  /* ============ THEME-AWARE BRAND ASSETS ============ */
  /* Every branding spot (header wordmark, auth modal, admin topbar, PWA banner) ships
     both the navy and the white artwork; CSS shows whichever suits the current theme, so
     the logo swaps in the same frame as the theme toggle with no JS involved. This
     replaced the old "white plate behind a navy logo" workaround — there are real
     white-on-dark assets now, so nothing needs a backing plate.
     Deliberately placed last in the file: the per-component rules these override
     (`.auth-logo-mark img`, `.admin-topbar-logo img`, `.logo-wordmark`) all set
     `display: block` at equal specificity, so source order is what settles it. */
  img.brand-dark { display: none; }
  html.dark img.brand-light { display: none; }
  html.dark img.brand-dark { display: block; }

  /* Phone widths: the horizontal wordmark can't fit next to the action buttons without
     shrinking to an unreadable height, so the square mark takes over. All four header
     images are spelled out explicitly here (rather than relying on the theme rules above)
     because several combinations tie on specificity — being last in the file is what
     settles them. */
  /* `html.dark img.brand-dark` above is (0,2,1); a bare `img.logo-square` is only (0,1,1),
     so in dark mode the square mark won the cascade and rendered at EVERY width — a second
     logo sitting next to the wordmark in the dark header. Naming html.dark here brings this
     rule to the same specificity, and being later in the file settles the tie in favour of
     hidden. The 430px rules below are all (0,2,1)+ with html.dark variants at (0,3,1), so
     the phone swap still wins. */
  img.logo-square, html.dark img.logo-square { display: none; }
  @media (max-width: 430px) {
    img.logo-wordmark, html.dark img.logo-wordmark { display: none; }
    img.logo-square.brand-light { display: block; }
    img.logo-square.brand-dark { display: none; }
    html.dark img.logo-square.brand-light { display: none; }
    html.dark img.logo-square.brand-dark { display: block; }
  }

  /* ============ CMS — Хуудас удирдлага (admin module) ============ */
  /* Scoped to the admin CMS module. Uses only existing design tokens — no new colours,
     no change to the public site. Matches the admin dashboard's card/row style. */
  .cms-wrap { display: flex; flex-direction: column; gap: 0; }
  .cms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
  .cms-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .cms-label { font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
  #cmsOrgEditor { padding: 14px 16px; }
  #cmsOrgEditor textarea.form-input { height: auto; min-height: 56px; padding: 10px 14px; resize: vertical; }
  .cms-block { border: 1px solid var(--line); border-radius: var(--radius-md); margin: 12px 16px; background: var(--surface); overflow: hidden; }
  .cms-block-hidden { opacity: 0.6; }
  .cms-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
  .cms-block-title { font-size: 13px; font-weight: 700; color: var(--ink); min-width: 0; }
  .cms-block-controls { display: flex; gap: 6px; flex-shrink: 0; }
  .cms-ctrl {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2);
    background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 14px;
    display: grid; place-items: center; transition: all 0.15s;
  }
  .cms-ctrl:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
  .cms-ctrl:disabled { opacity: 0.35; cursor: not-allowed; }
  .cms-block-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
  .cms-block-body textarea.form-input { height: auto; min-height: 56px; padding: 10px 14px; resize: vertical; }
  @media (max-width: 640px) {
    .cms-block, #cmsOrgEditor { margin-left: 0; margin-right: 0; }
    .cms-block-head { flex-wrap: wrap; }
  }