/* Project pages, Abu Dhabi (views/insights/project.ejs) and Dubai (views/dubai/project.ejs): one stylesheet,
   cached by the browser, instead of 238 KB inside every page. */
  :root {
    --bg-primary: #eceae5;
    --bg-card: #ffffff;
    --bg-card-hover: #e0ddd8;
    --bg-card-elevated: #ffffff;
    --border-subtle: #D3DDDE;
    --border-hover: #b8c8ca;
    --text-primary: #224C5A;
    --text-secondary: #6c757d;
    --text-muted: #95a5a6;
    --accent-gold: #0f204b;
    --accent-emerald: #0f204b;
    --accent-robin: #0f204b;
    --accent-robin-soft: rgba(15, 32, 75, 0.08);
    --accent-blue: #2B6073;
    --accent-coral: #0f204b;
    --radius-xl: 20px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --shadow-lg: 0 2px 12px rgba(34, 76, 90, 0.08);
    --shadow-glow: 0 0 40px rgba(15, 32, 75, 0.06);
    --transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .project-container {
    padding-top: 0;
    min-height: 100vh;
    padding-bottom: 0;
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
  }

  /* Full-width two-zone bands */
  .project-header-band {
    width: 100%;
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e4e9ec;
    /* No overflow-x here: setting only one axis to non-visible forces the other axis to
       compute as 'auto' too (CSS overflow spec), which was silently clipping the search
       typeahead dropdown (position:absolute, can be taller than this band) at the band's
       bottom edge instead of letting it float over the content below. */
  }

  /* ── DARI hero (Ken Burns slideshow) ── */

  /* Band: flush, no padding when hero active */
  .project-header-band.dari-hero-active {
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  /* prk-zone-inner below hero: just nav row, no top gap */
  .dari-hero-active .prk-zone-inner { padding-top: 0; }

  /* Hero block is a direct child of band — full viewport width */
  #dariHeroBlock { width: 100%; }

  .dari-hero-wrap {
    position: relative;
    height: 480px;
    overflow: hidden;
    background: #0a0f14;
    --dari-hero-control-width: clamp(320px, 25vw, 360px);
  }
  @media (max-width: 900px) { .dari-hero-wrap { height: 360px; } }
  @media (max-width: 600px) { .dari-hero-wrap { height: 420px; } }
  @media (max-width: 400px) { .dari-hero-wrap { height: 450px; } }

  .dari-slideshow { position:absolute; inset:0; }
  .dari-slide {
    position: absolute; inset: 0;
    overflow: hidden;
    opacity: 0; will-change: opacity;
  }
  /* Real <img> instead of a CSS background-image — indexable by Google Images, has real alt
     text, and gets a screen-reader-visible description. The Ken Burns pan/zoom animation moves
     from the slide wrapper (cross-fade only, via opacity) onto this img (transform only), so the
     visual effect is unchanged from the old background-image version. */
  .dari-slide img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center;
    display: block; will-change: transform;
  }
  /* Gradient: dark top-strip for search bar + heavy dark at bottom for text */
  .dari-hero-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.0) 18%),
      linear-gradient(to bottom, rgba(0,0,0,.0) 40%, rgba(0,0,0,.92) 100%);
  }

  /* TOP BAR: search + share pinned to top of hero */
  .dari-hero-topbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 10;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 22px 28px 14px;
  }
  .dari-hero-controls {
    display: flex; align-items: center; gap: 8px;
    width: var(--dari-hero-control-width); min-width: 0;
  }
  @media (max-width: 600px) {
    .dari-hero-topbar { padding: 16px 14px 10px; }
    .dari-hero-controls { gap: 6px; }
  }
  /* Search input adapts to dark hero background */
  .dari-hero-topbar #dariHeroSearchSlot {
    flex: 1 1 auto; width: auto; min-width: 0;
  }
  .dari-hero-topbar #dariHeroShareSlot {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
  }
  #dariHeroSearchSlot #phstripSearchWrap { width: 100%; min-width: 0; }
  #dariHeroSearchSlot #phstripSearchWrap .search-input-wrapper { width: 100% !important; }
  @media (max-width: 600px) {
    .dari-hero-wrap { --dari-hero-control-width: calc(100vw - 28px); }
    .dari-hero-topbar { align-items: flex-start; }
  }
  .dari-hero-topbar .phstrip-search-wrap input {
    background: rgba(255,255,255,.22) !important;
    border: 1.5px solid rgba(255,255,255,.7) !important;
    color: #fff !important;
    box-shadow: 0 1px 10px rgba(0,0,0,.3) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }
  .dari-hero-topbar .phstrip-search-wrap input::placeholder { color: rgba(255,255,255,.6) !important; }
  .dari-hero-topbar .phstrip-search-lens { color: rgba(255,255,255,.7); }
  .dari-hero-topbar .share-report-btn {
    background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: #fff;
  }
  .dari-hero-topbar .share-report-btn:hover { background: rgba(255,255,255,.2); }

  /* Developer logo badge, top-left of the hero — shown only when the linked ADREC project also
     has a broker link (that's where the logo comes from). */
  .dari-hero-dev-logo {
    position: absolute; top: 22px; left: 28px; z-index: 10;
    width: 52px; height: 52px; border-radius: 10px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    padding: 0; box-shadow: 0 2px 10px rgba(0,0,0,.3); overflow: hidden;
  }
  .dari-hero-dev-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  @media (max-width: 600px) {
    .dari-hero-dev-logo { width: 40px; height: 40px; top: 14px; left: 14px; padding: 0; border-radius: 8px; }
  }

  /* BOTTOM CONTENT: full-width inside the hero image */
  .dari-hero-bottom {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 28px 24px;
    gap: 20px;
  }
  @media (max-width: 600px) {
    .dari-hero-bottom { flex-direction: column; align-items: flex-start; padding: 0 14px 14px; gap: 8px; }
  }

  /* RIGHT: Overall appreciation card, bottom-right of hero */
  .dari-hero-right {
    flex-shrink: 0;
    align-self: flex-end;
    width: var(--dari-hero-control-width);
  }
  .dari-hero-right .phstrip-price-block {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start !important;
    text-align: left !important;
    background: rgba(0,0,0,.45) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    gap: 3px;
  }
  .dari-hero-right .phstrip-sum-ctx {
    font-size: .68rem !important; color: rgba(255,255,255,.55) !important;
    font-weight: 500 !important; margin-bottom: 2px !important;
    text-transform: uppercase; letter-spacing: .04em;
  }
  .dari-hero-right .phstrip-sum-big {
    font-size: 1.55rem !important; font-weight: 700 !important;
    line-height: 1.1 !important; color: #fff !important;
  }
  .dari-hero-right .phstrip-sum-big.positive { color: #34d399 !important; }
  .dari-hero-right .phstrip-sum-big.negative { color: #f87171 !important; }
  .dari-hero-right .phstrip-sum-big.neutral  { color: rgba(255,255,255,.85) !important; }
  .dari-hero-right .phstrip-sum-sub {
    font-size: .75rem !important; font-weight: 400 !important;
    color: rgba(255,255,255,.7) !important; margin-left: 4px !important;
  }
  .dari-hero-right .phstrip-sum-meta {
    font-size: .68rem !important; color: rgba(255,255,255,.5) !important; margin-top: 1px !important;
  }
  .dari-hero-right .phstrip-sum-pills { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 5px !important; }
  .dari-hero-right .appr-how-it-works-btn {
    color: rgba(255,255,255,.45) !important; font-size: .72rem !important; margin-top: 2px !important;
  }
  .dari-hero-right .appr-how-it-works-btn .pred-info-icon { color: rgba(255,255,255,.4) !important; }
  /* Watch row — dark theme */
  .dari-hero-right .phstrip-sum-watch { border-top-color: rgba(255,255,255,.12) !important; width: 100% !important; }
  .dari-hero-right .phstrip-sum-watch-cap { color: rgba(255,255,255,.5) !important; }
  .dari-hero-right .phstrip-sum-watch-btn { border-color: rgba(255,255,255,.3) !important; color: rgba(255,255,255,.85) !important; }
  .dari-hero-right .phstrip-sum-watch-btn:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.55) !important; }
  .dari-hero-right .phstrip-sum-watch-btn.watching { background: rgba(255,255,255,.12) !important; }
  @media (max-width: 600px) {
    .dari-hero-right {
      align-self: flex-start;
      width: var(--dari-hero-control-width);
    }
    .dari-hero-right .phstrip-price-block {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 3px !important;
      padding: 10px 14px !important;
      min-width: 0 !important;
      max-width: none !important;
      width: 100% !important;
      border-radius: 10px !important;
    }
    .dari-hero-right .phstrip-sum-ctx {
      font-size: .65rem !important;
      margin-bottom: 2px !important;
      white-space: nowrap;
    }
    .dari-hero-right .phstrip-sum-big {
      font-size: 1.75rem !important;
      font-weight: 800 !important;
      letter-spacing: -0.03em !important;
    }
    .dari-hero-right .phstrip-sum-big-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
    .dari-hero-right .phstrip-sum-sub { font-size: .72rem !important; }
    .dari-hero-right .phstrip-sum-meta { font-size: .68rem !important; margin-top: 1px !important; }
    .dari-hero-right .phstrip-sum-pills { display: flex !important; flex-wrap: wrap; gap: 4px; margin-top: 5px !important; }
    .dari-hero-right .rc-apx-pill { font-size: .65rem !important; padding: 2px 7px !important; }
    .dari-hero-right .appr-how-it-works-btn { display: none !important; }
    .dari-hero-right .phstrip-sum-watch-cap { white-space: normal !important; }
  }
  .dari-hero-name {
    font-size: 2.1rem; font-weight: 700; color: #fff; line-height: 1.15;
    text-shadow: 0 2px 18px rgba(0,0,0,.5);
    margin-bottom: 6px;
  }
  @media (max-width: 900px) { .dari-hero-name { font-size: 1.45rem; } }
  @media (max-width: 600px) { .dari-hero-name { font-size: 1.15rem; margin-bottom: 4px; } }

  .dari-hero-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
  .dari-hero-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px; font-size: .73rem; font-weight: 500;
    background: rgba(255,255,255,.14); color: rgba(255,255,255,.9);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2); white-space: nowrap;
  }
  @media (max-width: 600px) {
    .dari-hero-pills { gap: 4px; margin-bottom: 4px; flex-wrap: wrap; }
    .dari-hero-pill { font-size: .68rem; padding: 2px 8px; }
  }
  .dari-hero-pill.pill-status-uc   { background: rgba(245,158,11,.28); border-color: rgba(245,158,11,.4); color: #fde68a; }
  .dari-hero-pill.pill-status-done { background: rgba(16,185,129,.25); border-color: rgba(16,185,129,.4); color: #6ee7b7; }
  .dari-hero-pill.pill-status-op   { background: rgba(99,102,241,.25); border-color: rgba(99,102,241,.4); color: #c7d2fe; }
  /* Compare — same gold accent as elsewhere on the site, plus a slow pulse ring, so it stands
     out from the plain frosted-glass Handover/Developer/District/Location pills beside it. */
  .dari-hero-compare-pill {
    position: relative; text-decoration: none;
    background: linear-gradient(135deg, #c9a227 0%, #e6c64a 100%);
    border-color: #c9a227; color: #3a2c04; font-weight: 700;
    animation: cmpBtnPulse 2.4s ease-in-out infinite; /* shared with #prkCompareBtn's own gold pill */
  }
  .dari-hero-compare-pill:hover { background: linear-gradient(135deg, #b8931f 0%, #dab73f 100%); color: #2a2003; }
  .dari-hero-docs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
  .dari-hero-doc-btn {
    display: inline-flex; align-items: center; gap: 6px;
    min-width: 156px; padding: 5px 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 7px;
    background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); font-family: inherit; font-size: .7rem;
    font-weight: 700; line-height: 1.2; cursor: pointer; white-space: nowrap;
    transition: background .15s, border-color .15s, transform .15s;
  }
  .dari-hero-doc-btn:hover { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.45); transform: translateY(-1px); }
  .dari-hero-doc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 18px; padding: 0 4px; border-radius: 4px;
    background: #dc2626; color: #fff; font-size: .52rem; font-weight: 800;
  }
  .dari-hero-doc-download { width: 13px; height: 13px; margin-left: auto; color: #fff; opacity: .9; flex-shrink: 0; }
  @media (max-width: 600px) {
    .dari-hero-docs { flex-wrap: nowrap; max-width: calc(100vw - 28px); overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .dari-hero-docs::-webkit-scrollbar { display: none; }
    .dari-hero-doc-btn { flex-shrink: 0; padding: 3px 8px; font-size: .65rem; }
  }

  /* Icon-only map pill — opens the project map (toggleMapModal), placed right after the
     district pill; same trigger as the plain-header "Map" badge (.phstrip-badge-map), which
     is hidden while the DARI hero is active. */
  .dari-hero-map-pill {
    cursor: pointer; appearance: none; font-family: inherit; font-size: .73rem; font-weight: 500;
    transition: background .15s, border-color .15s;
  }
  .dari-hero-map-pill:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.35); }
  @media (max-width: 600px) {
    .dari-hero-map-pill { font-size: .68rem; }
  }

  /* Cards bar: price + appreciation below the info bar, above nav */
  .dari-cards-bar {
    background: #fff;
    border-bottom: 1px solid #e4e9ec;
  }
  .dari-cards-bar-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex; align-items: stretch; flex-wrap: wrap;
    gap: 0;
  }
  @media (max-width: 991px) { .dari-cards-bar-inner { padding: 0 16px; } }

  /* Cards bar hidden — appreciation moved to main panel section */
  .dari-cards-bar { display: none; }

  /* ═══════════════════════════════════════════════════════════════════════
     Project Status bar — DARI registry + ADREC transactions + broker details.
     Always present (independent of the photo hero); light card style to
     match the rest of the page.
  ═══════════════════════════════════════════════════════════════════════ */
  .project-status-bar { background: #f8fafc; border-top: 1px solid #e5e7eb; border-bottom: 1px solid #e5e7eb; }
  .psb-inner {
    max-width: 1320px; margin: 0 auto; padding: 16px 24px;
    display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px;
  }
  @media (max-width: 991px) { .psb-inner { padding: 14px 16px; } }
  @media (max-width: 640px) { .psb-inner { flex-direction: column; padding: 12px 14px; gap: 10px; } }

  .psb-card {
    flex: 1 1 320px; min-width: 280px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    padding: 12px 16px 14px;
  }
  @media (max-width: 640px) { .psb-card { flex: 1 1 auto; width: 100%; min-width: 0; padding: 11px 14px 12px; } }
  .psb-card-head {
    display: flex; align-items: center; gap: 6px;
    font-size: .68rem; font-weight: 800; color: #475569;
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #f1f5f9;
  }
  .psb-card-head svg { color: #94a3b8; flex-shrink: 0; }
  .psb-row { margin-bottom: 7px; }
  .psb-row:empty { display: none; margin: 0; }
  .psb-row:last-child { margin-bottom: 0; }

  /* Chip style — reused for developer contact, escrow/registered, unit mix, docs, service charge */
  .psb-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  /* Sub-groups (e.g. Registered/Developer/Escrow) flow together in one .psb-chips row and only
     wrap onto a new line when the row runs out of width, instead of each forcing its own line. */
  .psb-chip-group { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .psb-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 600; color: #374151;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 20px;
    padding: 3px 9px; white-space: nowrap; text-decoration: none; line-height: 1.3;
    transition: border-color .15s, background .15s, color .15s;
  }
  .psb-chip svg { flex-shrink: 0; color: #94a3b8; }
  a.psb-chip:hover { border-color: #94a3b8; background: #f1f5f9; color: #1e293b; }
  .psb-chip.psb-chip-strong { font-weight: 700; color: #111827; }
  .psb-chip-count { background: #eef2f7; border-radius: 10px; padding: 0 5px; font-weight: 700; color: #111827; margin-left: 1px; }

  /* Construction status row */
  .psb-construction-head { display: flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: #111827; margin-bottom: 4px; }
  .psb-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .psb-status-dot.uc { background: #f59e0b; }
  .psb-status-dot.done { background: #10b981; }
  .psb-status-dot.op { background: #818cf8; }
  .psb-status-dot.neutral { background: #9ca3af; }
  .psb-construction-sub { font-size: .71rem; color: #6b7280; margin-top: 2px; margin-bottom: 2px; }

  /* Progress photo thumbnails — light-card variant (reused by the modal opener) */
  .dari-prog-thumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
  .dari-prog-thumb {
    width: 52px; height: 52px; border-radius: 7px; object-fit: cover;
    cursor: pointer; border: 1.5px solid #e5e7eb;
    transition: border-color .15s, transform .15s; flex-shrink: 0;
  }
  .dari-prog-thumb:hover { border-color: #3b82f6; transform: scale(1.05); }
  .dari-prog-more {
    display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 7px;
    background: #f8fafc; border: 1.5px solid #e5e7eb; color: #6b7280;
    font-size: .66rem; font-weight: 700; text-align: center; line-height: 1.15;
    cursor: pointer; transition: all .15s; flex-shrink: 0;
  }
  .dari-prog-more:hover { background: #eff6ff; border-color: #3b82f6; color: #2563eb; }
  @media (max-width: 640px) {
    .dari-prog-thumb, .dari-prog-more { width: 44px; height: 44px; }
  }

  /* Icon-only chip (email/phone) */
  .psb-chip-icon {
    width: 24px; height: 24px; padding: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .psb-chip-icon svg { color: inherit; }
  a.psb-chip-icon:hover { color: #2563eb; border-color: #93c5fd; background: #eff6ff; }

  /* Document download buttons — deliberately distinct from the plain info chips: PDF icon,
     file label + "PDF · Download" sub-line, and a trailing download arrow, so they read as
     downloadable files at a glance rather than blending in with metadata pills. */
  .psb-doc-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .psb-doc-btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 7px 12px 7px 8px; text-decoration: none; transition: all .15s;
    color: inherit; font: inherit; text-align: left; cursor: pointer;
  }
  .psb-doc-btn:hover { border-color: #86efac; background: #f0fdf4; box-shadow: 0 2px 10px rgba(37,211,102,.12); }
  .psb-doc-icon {
    width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
    background: rgba(236,28,36,.12); color: #ec1c24;
    display: flex; align-items: center; justify-content: center;
  }
  .psb-doc-info { display: flex; flex-direction: column; gap: 0; min-width: 0; }
  .psb-doc-label { font-size: .8rem; font-weight: 700; color: #111827; white-space: nowrap; line-height: 1.3; }
  .psb-doc-type { font-size: .62rem; color: #9ca3af; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
  .psb-doc-dl-icon { color: #cbd5e1; flex-shrink: 0; margin-left: 4px; transition: color .15s; }
  /* Guest, no download url (see _psbDocCardHtml) — same card shape, muted to signal it isn't
     immediately actionable, "Log in to download" instead of "View document". */
  .psb-doc-btn-locked { background: #f8fafc; }
  .psb-doc-btn-locked:hover { border-color: #cbd5e1; background: #f1f5f9; box-shadow: none; }
  .psb-doc-btn-locked .psb-doc-icon { background: #e2e8f0; color: #94a3b8; }
  .psb-doc-btn-locked .psb-doc-type { color: #16a34a; text-transform: none; letter-spacing: normal; font-weight: 700; }
  .psb-doc-btn-locked .psb-doc-dl-icon { color: #94a3b8; }

  .prk-project-info-card .psb-doc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .prk-project-info-card .psb-doc-btn {
    display: flex; width: 100%; min-width: 0; padding: 16px; gap: 14px;
    border-color: #d8dee8; border-radius: 14px;
  }
  .prk-project-info-card .psb-doc-btn.prk-doc-target {
    border-color: #25d366; box-shadow: 0 0 0 3px rgba(37,211,102,.18), 0 8px 20px rgba(15,23,42,.08);
  }
  .prk-project-info-card .psb-doc-icon { width: 50px; height: 50px; border-radius: 10px; background: #ec1c24; color: #fff; }
  .prk-project-info-card .psb-doc-icon svg { display: none; }
  .prk-project-info-card .psb-doc-icon::after { content: 'PDF'; font-size: 11px; font-weight: 800; }
  .prk-project-info-card .psb-doc-btn:nth-child(3n + 2) .psb-doc-icon,
  .prk-project-info-card .psb-doc-btn:nth-child(3n + 3) .psb-doc-icon { background: #ec1c24; }
  .prk-project-info-card .psb-doc-info { flex: 1; gap: 3px; }
  .prk-project-info-card .psb-doc-label { overflow: hidden; text-overflow: ellipsis; font-size: 1rem; color: #23465a; }
  .prk-project-info-card .psb-doc-type { font-size: .75rem; color: #64748b; text-transform: none; letter-spacing: 0; }
  .prk-project-info-card .psb-doc-format { display: none; }
  .prk-project-info-card .psb-doc-dl-icon { margin-left: auto; color: #64748b; }
  .prk-project-info-card .psb-doc-dl-icon svg { width: 18px; height: 18px; }
  .prk-project-info-card { padding: 0; overflow: visible; }
  .prk-info-group { margin-bottom: 16px; }
  .prk-info-data-card {
    padding: 22px 24px; background: #fff;
    border: 1px solid #e2e5eb; border-radius: 12px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
  }
  .prk-info-title {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px;
    padding: 7px 14px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    color: #64748b; font-size: .7rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  .prk-info-title-icon {
    display: inline-flex; align-items: center; gap: 8px;
    color: #c8a030; flex-shrink: 0;
  }
  .prk-info-title-icon::after { content: '·'; color: #46546e; }
  .prk-info-title-icon svg { width: 13px; height: 13px; }
  .prk-info-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; align-items: stretch; }
  .prk-info-stat {
    display: flex; flex-direction: column; min-width: 0; min-height: 170px;
    padding: 18px 20px; background: #fff; border: 1px solid #e8ebf1; border-radius: 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .prk-info-stat:hover { border-color: #cfd8e6; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 23, 42, .09); }
  .prk-info-stat-label {
    display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
    color: #8b95a8; font-size: 10.5px; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase;
  }
  .prk-info-stat-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 10px;
  }
  .prk-info-stat-icon svg { width: 18px; height: 18px; }
  .prk-info-stat-service .prk-info-stat-icon { background: rgba(15,159,110,.12); color: #0f9f6e; }
  .prk-info-stat-floors .prk-info-stat-icon,
  .prk-info-stat-payment .prk-info-stat-icon { background: rgba(15,159,110,.12); color: #0f9f6e; }
  .prk-info-stat-value {
    display: flex; align-items: center; justify-content: flex-start; flex: 1;
    color: #1e2433; font-size: .92rem; font-weight: 700; line-height: 1.35;
    text-align: left; overflow-wrap: anywhere; padding: 4px 0 6px;
  }
  .prk-info-payment-list { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 10px; padding: 4px 0 6px; text-align: left; }
  .prk-info-payment-item + .prk-info-payment-item { border-top: 1px solid #f0f2f6; padding-top: 10px; }
  .prk-info-payment-text { color: #1e2433; font-size: .8rem; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
  .prk-payment-bar { display: flex; width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: #e9edf3; margin-top: 10px; }
  .prk-payment-segment { height: 100%; min-width: 2px; }
  .prk-payment-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
  .prk-payment-stage { display: inline-flex; align-items: center; gap: 5px; color: #64748b; font-size: .66rem; font-weight: 600; line-height: 1.3; }
  .prk-payment-stage-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
  .prk-payment-stage strong { color: #334155; font-size: .67rem; }
  .prk-layouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .prk-layout {
    min-width: 0; padding: 13px 14px; border: 1px solid #e2e8f0; border-radius: 9px;
    background: #fff;
  }
  .prk-layout-type { color: #18766f; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
  .prk-layout-name { color: #17384a; font-size: .87rem; font-weight: 800; margin-top: 3px; overflow-wrap: anywhere; }
  .prk-layout-size { color: #64748b; font-size: .73rem; margin-top: 7px; }
  .prk-project-info-card .psb-payment-plans { gap: 9px; }
  .prk-project-info-card .psb-payment-plan { padding: 12px 14px; border-radius: 9px; font-size: .82rem; background: #f4faf7; border-color: #d6ebe0; }
  .prk-project-info-card .psb-payment-plan svg { width: 14px; height: 14px; color: #20805c; }
  .prk-info-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .prk-info-photo {
    position: relative; min-width: 0; padding: 0; border: 0; border-radius: 8px;
    overflow: hidden; aspect-ratio: 4 / 3; background: #e2e8f0; cursor: pointer;
  }
  .prk-info-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .25s ease; }
  .prk-info-photo:hover img { transform: scale(1.035); }
  .prk-info-photo:focus-visible { outline: 3px solid #0f766e; outline-offset: 2px; }
  .prk-info-photo-more {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .58); color: #fff; font-size: .9rem; font-weight: 800;
  }
  .prk-amenities { display: flex; flex-wrap: wrap; gap: 8px; }
  .prk-amenity {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
    border: 1px solid #dce5e9; border-radius: 7px; background: #f8fafc;
    color: #334155; font-size: .76rem; font-weight: 650;
  }
  .prk-amenity svg { width: 12px; height: 12px; color: #d18b2f; flex-shrink: 0; }
  @media (max-width: 900px) {
    .prk-project-info-card .psb-doc-list { grid-template-columns: 1fr 1fr; }
    .prk-info-stats { grid-template-columns: 1fr 1fr; }
    .prk-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prk-info-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 575px) {
    .prk-info-data-card { padding: 18px 14px; }
    .prk-project-info-card .psb-doc-list, .prk-layouts { grid-template-columns: 1fr; }
    .prk-info-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .prk-info-stats { grid-template-columns: 1fr; }
  }

  /* Payment plan blurbs — free text from the broker feed, so unlike the chip/doc styles above
     these wrap onto multiple lines instead of staying single-line/nowrap. */
  .psb-payment-plans { display: flex; flex-direction: column; gap: 6px; }
  .psb-payment-plan {
    display: flex; align-items: flex-start; gap: 8px;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 8px 10px; font-size: .74rem; color: #374151; line-height: 1.45;
  }
  .psb-payment-plan svg { flex-shrink: 0; margin-top: 2px; color: #94a3b8; }
  .psb-doc-btn:hover .psb-doc-dl-icon { color: #16a34a; }

  /* Documents — PRO lock teaser (reuses .prj-upgrade-cta/.prj-lock-icon/.prj-upgrade-btn) */
  .psb-broker .prj-upgrade-cta { padding: 10px 0 2px; }
  .psb-broker .prj-lock-icon { background: rgba(59,130,246,.1); border-color: rgba(59,130,246,.25); color: #2563eb; }
  .psb-broker .prj-upgrade-cta p { color: #6b7280; }

  /* ── Progress photos modal ─────────────────────────────────────────────── */
  #dariProgressModal {
    display: none; position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,.85); backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    align-items: center; justify-content: center;
    padding: 16px;
  }
  #dariProgressModal.open { display: flex; }
  .dpm-box {
    background: #0f1923; border-radius: 12px; overflow: hidden;
    max-width: 900px; width: 100%; max-height: 90vh;
    display: flex; flex-direction: column;
    border: 1px solid rgba(255,255,255,.1);
  }
  .dpm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .dpm-title {
    font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.9);
  }
  .dpm-sub { font-size: .72rem; color: rgba(255,255,255,.4); margin-top: 1px; }
  .dpm-close {
    background: rgba(255,255,255,.08); border: none; border-radius: 50%;
    width: 28px; height: 28px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: rgba(255,255,255,.7);
    font-size: 1rem; flex-shrink: 0;
  }
  .dpm-close:hover { background: rgba(255,255,255,.16); color: #fff; }
  .dpm-main {
    flex: 1; overflow: hidden; display: flex;
    align-items: center; justify-content: center;
    background: #080e16; position: relative; min-height: 260px;
  }
  .dpm-main img {
    max-width: 100%; max-height: 55vh; object-fit: contain; display: block;
  }
  .dpm-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.5); border: none; border-radius: 50%;
    width: 36px; height: 36px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: #fff; font-size: 1.1rem;
    transition: background .15s;
  }
  .dpm-nav:hover { background: rgba(0,0,0,.8); }
  .dpm-nav.prev { left: 10px; }
  .dpm-nav.next { right: 10px; }
  .dpm-strip {
    display: flex; gap: 6px; padding: 10px 14px;
    overflow-x: auto; background: #0d1520;
    border-top: 1px solid rgba(255,255,255,.06);
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
  }
  .dpm-strip img {
    width: 56px; height: 40px; object-fit: cover; border-radius: 4px;
    cursor: pointer; border: 1.5px solid transparent; flex-shrink: 0;
    transition: border-color .12s;
  }
  .dpm-strip img.active { border-color: #3b82f6; }
  .dpm-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 18px; border-top: 1px solid rgba(255,255,255,.08);
    gap: 10px; flex-wrap: wrap;
  }
  .dpm-counter { font-size: .72rem; color: rgba(255,255,255,.45); }
  .dpm-dl {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .75rem; font-weight: 500; color: #60a5fa;
    text-decoration: none; padding: 5px 12px; border-radius: 6px;
    background: rgba(96,165,250,.1); border: 1px solid rgba(96,165,250,.2);
    transition: background .15s;
  }
  .dpm-dl:hover { background: rgba(96,165,250,.18); }

  /* ── Developer document viewer modal ──────────────────────────────────── */
  #prkDocumentModal {
    display: none; position: fixed; inset: 0; z-index: 10000;
    align-items: center; justify-content: center; padding: 18px;
    background: rgba(15, 23, 42, .82); backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
  #prkDocumentModal.open { display: flex; }
  .prk-document-modal-box {
    display: flex; flex-direction: column; width: min(1100px, 100%); height: min(90vh, 900px);
    overflow: hidden; border: 1px solid rgba(255,255,255,.14); border-radius: 12px;
    background: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.35);
  }
  .prk-document-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 16px; border-bottom: 1px solid #e5e7eb; background: #fff;
  }
  .prk-document-modal-title { min-width: 0; color: #17384a; font-size: .9rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .prk-document-modal-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .prk-document-modal-download {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
    border: 1px solid #bbf7d0; border-radius: 7px; background: #f0fdf4;
    color: #15803d; font-size: .72rem; font-weight: 700; text-decoration: none;
  }
  .prk-document-modal-download:hover { background: #dcfce7; border-color: #86efac; color: #166534; }
  .prk-document-modal-close {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 50%; background: #f1f5f9; color: #475569;
    font-size: 1.15rem; line-height: 1; cursor: pointer;
  }
  .prk-document-modal-close:hover { background: #e2e8f0; color: #0f172a; }
  .prk-document-modal-frame { width: 100%; flex: 1; border: 0; background: #eef2f7; }
  @media (max-width: 575px) {
    #prkDocumentModal { padding: 8px; }
    .prk-document-modal-box { height: 94vh; border-radius: 9px; }
    .prk-document-modal-head { padding: 10px 12px; }
    .prk-document-modal-download span { display: none; }
  }

  /* NAV PILLS: now inside content panel, no hero-specific overrides needed */

  /* Ken Burns keyframes */
  @keyframes dari-kb1 { 0%,100%{transform:scale(1.08) translate(0%,0%)} 50%{transform:scale(1) translate(-1.5%,-1%)} }
  @keyframes dari-kb2 { 0%,100%{transform:scale(1) translate(1.5%,1%)} 50%{transform:scale(1.06) translate(0%,0%)} }
  @keyframes dari-kb3 { 0%,100%{transform:scale(1.05) translate(-1%,1%)} 50%{transform:scale(1) translate(1%,-1%)} }
  @keyframes dari-kb4 { 0%,100%{transform:scale(1) translate(0%,-1.5%)} 50%{transform:scale(1.07) translate(-1%,.5%)} }
  @keyframes dari-kb-fade { 0%,100%{opacity:0} 8%,88%{opacity:1} }
  @keyframes dari-kb-fade-first { 0%,88%{opacity:1} 96%,100%{opacity:0} }

  /* Hide strip sections that moved into hero */
  .dari-hero-active .phstrip-actions-top { display: none !important; }
  .dari-hero-active .phstrip-row1        { display: none !important; }
  /* Nav row is in content panel — visibility controlled by .visible class */

  .project-content-band {
    background: #eceae5;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 80px;
    min-height: 60vh;
    overflow-x: hidden;
  }

  /* Shared inner max-width container for both bands */
  .prk-zone-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
  }
  
  /* Search Section */
  .search-section {
    background: var(--bg-card);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: var(--radius-xl);
    padding: 28px 32px;
    margin-bottom: 28px;
    box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    position: relative;
    z-index: 100;
    transition: all 0.4s var(--transition-smooth);
  }
  
  .search-section:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
  }
  
  .search-title {
    color: var(--text-primary);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -0.03em;
  }
  
  .ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.68rem;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #0f204b 0%, #091533 100%);
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    box-shadow: 0 3px 12px rgba(31, 173, 93, 0.3);
    vertical-align: middle;
  }
  
  .ai-badge svg {
    width: 10px;
    height: 10px;
  }
  
  .search-input-wrapper {
    position: relative;
  }
  
  .search-input {
    width: 100%;
    padding: 16px 24px 16px 52px;
    font-size: 0.95rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.025);
    color: var(--text-primary);
    transition: all 0.3s var(--transition-smooth);
    font-weight: 400;
    letter-spacing: -0.01em;
  }
  
  .search-input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
  }
  
  .search-input:focus {
    outline: none;
    border-color: rgba(31, 173, 93, 0.4);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 3px rgba(31, 173, 93, 0.08);
  }
  
  .search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    transition: color 0.3s ease;
  }
  
  .search-input:focus + .search-icon,
  .search-input-wrapper:focus-within .search-icon {
    color: var(--accent-gold);
  }
  
  .typeahead-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(14, 16, 28, 0.98);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    margin-top: 8px;
    max-height: 340px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.03);
  }
  
  .typeahead-dropdown.show {
    display: block;
    animation: dropdownFade 0.25s ease-out;
  }
  
  @keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .typeahead-item {
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025);
    transition: all 0.2s ease;
  }
  
  .typeahead-item:last-child {
    border-bottom: none;
  }
  
  .typeahead-item:hover, .typeahead-item.active {
    background: rgba(31, 173, 93, 0.05);
  }
  
  .typeahead-item:first-child {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  
  .typeahead-item:last-child {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  
  .typeahead-project-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  
  .typeahead-meta {
    display: flex;
    gap: 16px;
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  
  .typeahead-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  /* Typeahead hint sections (top performers on focus) */
  .typeahead-hint-heading {
    padding: 10px 20px 4px;
    font-size: 9.5px;
    font-weight: 700;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    user-select: none;
  }

  .typeahead-hint-heading:first-child {
    padding-top: 14px;
  }

  .typeahead-hint-item {
    padding: 9px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: background 0.15s ease;
    border-bottom: none;
  }

  .typeahead-hint-item:hover {
    background: rgba(15,32,75,0.05);
  }

  .typeahead-hint-item:last-child {
    padding-bottom: 12px;
  }

  .typeahead-hint-name {
    font-size: 13px;
    font-weight: 500;
    color: #224C5A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }

  .typeahead-hint-sales {
    font-size: 10px;
    font-weight: 600;
    color: #2B6073;
    background: rgba(43,96,115,0.08);
    border-radius: 10px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .typeahead-hint-label {
    padding: 12px 20px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 600;
    color: #0f204b;
    opacity: 0.38;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    pointer-events: none;
    border-top: 1px solid rgba(0,0,0,0.04);
  }

  .typeahead-hint-label:first-child {
    border-top: none;
    padding-top: 10px;
  }

  .typeahead-hint-header {
    padding: 10px 20px 6px;
    font-size: 10px;
    font-weight: 700;
    color: #95a5a6;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    pointer-events: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .typeahead-hint-header-period {
    font-weight: 600;
    font-size: 9px;
    color: #2B6073;
    background: rgba(43,96,115,0.08);
    border-radius: 8px;
    padding: 2px 7px;
    letter-spacing: 0.04em;
  }
  
  /* Project Details Section */
  .project-details-section {
    display: none;
  }
  
  .project-details-section.show {
    display: block;
    animation: sectionReveal 0.5s var(--transition-smooth) both;
  }

  @keyframes sectionReveal {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* Error State Section */
  .error-state-section {
    display: none;
    padding: 60px 20px;
  }
  
  .error-state-section.show {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .error-state-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    padding: 52px 44px;
    text-align: center;
    max-width: 440px;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
  }
  
  .error-state-icon {
    color: var(--accent-gold);
    margin-bottom: 24px;
    opacity: 0.7;
  }
  
  .error-state-title {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 14px 0;
    letter-spacing: -0.02em;
  }
  
  .error-state-message {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.7;
    margin: 0 0 28px 0;
  }
  
  .error-state-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    background: linear-gradient(135deg, #0f204b 0%, #091533 100%);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s var(--transition-smooth);
    letter-spacing: -0.01em;
  }
  
  .error-state-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 173, 93, 0.35);
  }

  .pro-gate-btn-row { display: flex; justify-content: center; }
  .pro-gate-resets {
    color: var(--text-secondary); font-size: 0.78rem; margin: 16px 0 0;
  }
  /* Matches the broker project page's gate CTA (brand green), not the neutral/gold error-state
     look — !important because a later, more specific `.error-state-icon svg` rule elsewhere on
     this page otherwise wins the cascade regardless of source order. */
  .pro-gate-icon, .pro-gate-icon svg { color: var(--prp-brand-primary, #1FAD5D) !important; opacity: 1 !important; }

  /* Project Name in Header Strip */
  .project-name {
    color: #1a2535;
    font-weight: 500;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.03em;
    line-height: 1.2;
  }
  
  .project-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    margin-top: 8px;
  }
  
  .project-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
  }
  
  .project-meta-item svg {
    color: var(--accent-gold);
    width: 12px;
    height: 12px;
    opacity: 0.75;
  }
  
  /* Content Grid - now single column for full-width sales card */
  .content-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  
  /* Project Header Strip - flat, sits inside white header band */
  .project-header-strip {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 0;
    padding: 0 0 0;
    box-shadow: none;
    border: none;
    margin-bottom: 0;
    position: relative;
    z-index: 10;
    overflow: visible;
  }

  /* Top row: info left, actions right */
  .phstrip-row1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding-bottom: 18px;
  }

  .phstrip-info { flex: 1; min-width: 0; }

  .phstrip-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
  }

  /* ── Watch button ── */
  .wl-watch-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid #c7dde2;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.78rem; font-weight: 600; color: #0f6e84;
    cursor: pointer; transition: all 0.18s;
    text-decoration: none;
    white-space: nowrap;
  }
  .wl-watch-btn:hover { background: rgba(15,110,132,0.08); border-color: #0f6e84; }
  .wl-watch-btn.watching {
    background: rgba(15,110,132,0.10); border-color: #0f6e84; color: #0c5a6d;
  }
  .wl-watch-btn.watching svg.eye-off { display:inline; }
  .wl-watch-btn.watching svg.eye-on  { display:none; }
  .wl-watch-btn:not(.watching) svg.eye-off { display:none; }
  .wl-watch-btn:not(.watching) svg.eye-on  { display:inline; }
  .wl-watch-link { font-size: 0.68rem; color: #0f6e84; text-decoration:none; opacity:0.75; display:none; }
  .wl-watch-link:hover { opacity:1; text-decoration:underline; }
  .wl-watch-link.visible { display:block; }


  .phstrip-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 8px 0 6px;
  }
  .phstrip-badge {
    font-size: 11px; font-weight: 600; padding: 3px 10px;
    border-radius: 6px; white-space: nowrap; letter-spacing: 0.02em;
    position: relative;
  }
  @media (hover: hover) {
    .phstrip-badge:hover .phstrip-tip { visibility: visible; opacity: 1; }
  }
  .phstrip-badge .phstrip-tip { width: auto; white-space: nowrap; right: 0; left: auto; }
  .phstrip-badge-blue  { background: rgba(37,99,235,0.09);  color: #2563eb; }
  .phstrip-badge-green { background: rgba(5,150,105,0.09);  color: #059669; }
  .phstrip-badge-amber { background: rgba(217,119,6,0.10);  color: #d97706; }
  .phstrip-badge-slate { background: rgba(71,85,105,0.09);  color: #475569; }
  .phstrip-badge-map   { background: rgba(31,173,93,0.09);  color: #1FAD5D; cursor: pointer; transition: background 0.15s; }
  .phstrip-badge-map:hover { background: rgba(31,173,93,0.18); }
  .phstrip-badge-map svg { vertical-align: -1px; margin-right: 3px; }

  /* Meta text */
  .phstrip-meta-text {
    font-size: 12.5px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.5;
  }

  /* Headline price — APREX hero card style */
  .phstrip-sum-watch {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 12px;
    padding-top: 10px; border-top: 1px solid #eeeeec;
  }
  .phstrip-sum-watch-left { display: flex; align-items: center; gap: 6px; flex: 1; flex-wrap: wrap; }
  .phstrip-sum-watch-badge {
    display: inline-flex; align-items: center;
    background: #f59e0b; color: #fff;
    font-size: 0.62rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 2px 5px; border-radius: 3px; line-height: 1.5; flex-shrink: 0;
  }
  .phstrip-sum-watch-cap { font-size: 0.7rem; color: #9ca3af; line-height: 1.35; }
  .phstrip-sum-watch-btn {
    display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
    background: transparent; border: 1px solid #c7dde2; border-radius: 7px;
    padding: 5px 12px; font-size: 0.75rem; font-weight: 600; color: #0f6e84;
    cursor: pointer; transition: all 0.18s; white-space: nowrap; line-height: 1.3;
  }
  .phstrip-sum-watch-btn:hover { background: rgba(15,110,132,0.08); border-color: #0f6e84; }
  .phstrip-sum-watch-btn.watching { background: rgba(15,110,132,0.10); border-color: #0f6e84; color: #0c5a6d; }
  .phstrip-sum-watch-btn .sw-eye-on  { display: inline; }
  .phstrip-sum-watch-btn .sw-eye-off { display: none; }
  .phstrip-sum-watch-btn.watching .sw-eye-on  { display: none; }
  .phstrip-sum-watch-btn.watching .sw-eye-off { display: inline; }
  .phstrip-sum-watch-btn.loading .sw-eye-on,
  .phstrip-sum-watch-btn.loading .sw-eye-off { display: none; }
  .phstrip-sum-watch-btn.loading .sw-spinner { display: inline-block; }
  .sw-spinner {
    display: none;
    width: 12px; height: 12px;
    border: 2px solid currentColor; border-top-color: transparent;
    border-radius: 50%; animation: sw-spin 0.6s linear infinite; flex-shrink: 0;
  }
  @keyframes sw-spin { to { transform: rotate(360deg); } }
  .phstrip-price-mobile .phstrip-sum-watch { margin-top: 10px; }
  .phstrip-sum-watchlist-link {
    display: none; font-size: 0.68rem; color: #0f6e84;
    text-decoration: none; text-align: right; margin-top: 4px;
    opacity: 0.8;
  }
  .phstrip-sum-watchlist-link:hover { opacity: 1; text-decoration: underline; }
  .phstrip-sum-watchlist-link.visible { display: block; }
  /* Dari dark-glass variant */
  .dari-hero-right .phstrip-sum-watchlist-link { color: rgba(255,255,255,.55); width: 100%; }
  .dari-hero-right .phstrip-sum-watchlist-link:hover { color: rgba(255,255,255,.85); }

  .phstrip-price-block {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #1d9e75;
    border-radius: 12px;
    padding: 14px 18px;
    margin-top: 4px;
    text-align: left;
    min-width: 200px;
  }
  .phstrip-price-block.appr-down    { border-left-color: #d85a30; }
  .phstrip-price-block.appr-neutral { border-left-color: #d1d5db; }
  .phstrip-sum-ctx { font-size: 0.72rem; color: #6b7280; margin-bottom: 6px; }
  .phstrip-sum-big-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  @media (hover: hover) { .phstrip-aprex-link:hover .phstrip-tip { visibility: visible; opacity: 1; } }
  .phstrip-aprex-link.tip-open .phstrip-tip { visibility: visible; opacity: 1; }
  .phstrip-sum-big { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
  .phstrip-sum-big.positive { color: #1d9e75; }
  .phstrip-sum-big.negative { color: #d85a30; }
  .phstrip-sum-big.neutral  { color: #9ca3af; font-size: 1.6rem; }
  .phstrip-sum-sub { font-size: 0.82rem; color: #6b7280; }
  .phstrip-sum-meta { font-size: 0.72rem; color: #6b7280; margin-top: 6px; line-height: 1.5; }
  .phstrip-sum-pills { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
  .aprex-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px 2px 6px; border-radius: 4px;
    background: linear-gradient(135deg, rgba(201,162,39,0.16), rgba(246,211,101,0.10));
    border: 1px solid rgba(201,162,39,0.32);
    color: #92700c; font-size: 0.58rem; font-weight: 800;
    letter-spacing: 0.06em; white-space: nowrap; flex-shrink: 0;
    text-decoration: none; line-height: 1.4;
    transition: background 0.18s, border-color 0.18s;
  }
  .aprex-badge:hover { background: linear-gradient(135deg, rgba(201,162,39,0.26), rgba(246,211,101,0.18)); border-color: rgba(201,162,39,0.48); color: #7a5c0a; text-decoration: none; }
  .aprex-badge-full {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px 3px 7px; border-radius: 5px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border: 1px solid rgba(201,162,39,0.35);
    color: #c9a227; font-size: 0.60rem; font-weight: 800;
    letter-spacing: 0.07em; white-space: nowrap; flex-shrink: 0;
    cursor: pointer; line-height: 1.4; user-select: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    transition: background 0.18s, box-shadow 0.18s, border-color 0.18s;
  }
  .aprex-badge-full:hover { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-color: rgba(201,162,39,0.55); box-shadow: 0 2px 8px rgba(201,162,39,0.18); }
  .aprex-badge-full .aprex-dot { color: rgba(201,162,39,0.45); font-weight: 400; letter-spacing: 0; }
  .aprex-badge-full.proj { background: linear-gradient(135deg, #052e16 0%, #0a3d1e 100%); border-color: rgba(74,222,128,0.3); color: #4ade80; }
  .aprex-badge-full.proj:hover { background: linear-gradient(135deg, #0a3d1e 0%, #052e16 100%); border-color: rgba(74,222,128,0.55); box-shadow: 0 2px 8px rgba(74,222,128,0.18); }
  .aprex-badge-full.proj .aprex-dot { color: rgba(74,222,128,0.4); }
  .appr-how-it-works-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px 3px 7px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(201,162,39,0.14), rgba(246,211,101,0.10));
    border: 1.5px solid rgba(201,162,39,0.28);
    color: #92700c; font-size: 0.65rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s; flex-shrink: 0;
    line-height: 1; letter-spacing: 0.01em; white-space: nowrap;
  }
  .appr-how-it-works-btn:hover {
    background: linear-gradient(135deg, rgba(201,162,39,0.24), rgba(246,211,101,0.16));
    border-color: rgba(201,162,39,0.40);
    color: #7a5c0a; transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(201,162,39,0.15);
  }

  /* Price info tooltips */
  .phstrip-tip-icon {
    display: inline-block; position: relative; cursor: help;
    font-size: 10px; color: #9ca3af; margin-left: 3px; vertical-align: middle;
  }
  @media (hover: hover) {
    .phstrip-tip-icon:hover .phstrip-tip { visibility: visible; opacity: 1; }
  }
  .phstrip-tip-icon.tip-open .phstrip-tip { visibility: visible; opacity: 1; }
  .phstrip-tip {
    visibility: hidden; opacity: 0;
    position: absolute; top: calc(100% + 6px); right: 0;
    background: #1a2535; color: #e5e7eb; font-size: 11px; font-weight: 400;
    line-height: 1.45; letter-spacing: normal; text-transform: none;
    padding: 8px 10px; border-radius: 6px; width: 240px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    transition: opacity .15s; z-index: 1010; pointer-events: none;
  }
  .phstrip-tip::after {
    content: ''; position: absolute; bottom: 100%; right: 12px;
    border: 5px solid transparent; border-bottom-color: #1a2535;
  }

  /* Mobile-only price block: hidden on desktop */
  .phstrip-price-mobile { display: none !important; }

  /* Desktop compact search (top-right of header strip) */
  .phstrip-search-wrap {
    position: relative;
    width: 210px;
  }
  .phstrip-search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; pointer-events: none; z-index: 1;
  }
  .phstrip-search-input {
    width: 100%; height: 34px;
    border: 1.5px solid #e2e5eb; border-radius: 8px;
    background: rgba(255,255,255,0.9);
    padding: 0 12px 0 32px;
    font-size: 12.5px; color: #1f2937; outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
  }
  .phstrip-search-input:focus {
    border-color: var(--prp-brand-primary, #1FAD5D);
    box-shadow: 0 0 0 3px rgba(31,173,93,0.10);
    background: #ffffff;
  }
  .phstrip-search-input::placeholder { color: #adb5bd; }

  /* Mobile lens icon */
  .phstrip-search-lens {
    display: none;
    align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: rgba(255,255,255,0.85); border: 1.5px solid #e2e5eb;
    border-radius: 8px; color: #6b7280; cursor: pointer;
    transition: all 0.2s;
  }
  .phstrip-search-lens:hover {
    background: #ffffff; border-color: var(--prp-brand-primary, #1FAD5D);
    color: var(--prp-brand-primary, #1FAD5D);
  }

  /* Search wrapper when docked inside phstripSearchWrap */
  #phstripSearchWrap .search-input-wrapper {
    position: relative;
    width: 210px;
  }
  #phstripSearchWrap .search-input {
    height: 36px;
    box-sizing: border-box;
    padding: 0 12px 0 32px;
    font-size: 12.5px;
    border: 1.5px solid #e2e5eb;
    border-radius: 8px;
    background: rgba(255,255,255,0.9);
    color: #1f2937;
    box-shadow: none;
  }
  #phstripSearchWrap .search-input:focus {
    border-color: var(--prp-brand-primary, #1FAD5D);
    box-shadow: 0 0 0 3px rgba(31,173,93,0.10);
    background: #ffffff;
  }
  #phstripSearchWrap .search-icon {
    left: 10px;
    width: 14px;
    height: 14px;
    color: #9ca3af;
  }
  #phstripSearchWrap .typeahead-dropdown {
    min-width: 320px;
    right: 0;
    left: auto;
  }

  /* Actions row (search + share side by side, top of header strip) */
  .phstrip-actions-top {
    display: flex; align-items: center; gap: 8px;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
  .phstrip-follow-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 0;
    border-top: 1px solid #e9ecef;
    margin-top: 6px;
  }
  .phstrip-follow-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #94a3b8;
    letter-spacing: 0.3px;
    margin-right: 2px;
    white-space: nowrap;
  }
  .phstrip-social-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 7px;
    color: #64748b;
    background: transparent;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
  }
  .phstrip-social-btn:hover { background: #f1f5f9; color: #1e293b; }

  /* Nav pills row at bottom of header strip */
  .phstrip-nav-row {
    display: none;
    align-items: center; flex-wrap: wrap; gap: 6px;
    padding-top: 15px;
    margin-bottom: 14px;
  }
  .phstrip-nav-row.visible { display: flex; }
  .phstrip-nav-pill { white-space: nowrap; font-size: 11px !important; }
  .phstrip-nav-pill.active { background-color: #6c757d !important; border-color: #6c757d !important; color: #fff !important; }
  .phstrip-nav-pill .pill-pro { display: inline-block; font-size: 8px; font-weight: 800; background: linear-gradient(135deg, #c9a227, #dbb732); color: #fff; padding: 1px 4px; border-radius: 3px; margin-left: 3px; letter-spacing: 0.04em; vertical-align: middle; line-height: 1.2; }
  .phstrip-unit-toggle { margin-left: auto; padding-left: 12px; flex-shrink: 0; }

  /* Keep these for backward compat */
  .project-header-left { flex: 1; min-width: 0; }
  .project-header-actions { display: flex; flex-shrink: 0; align-items: flex-start; }

  .share-report-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
  }

  .share-report-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
  }

  .share-report-btn svg {
    flex-shrink: 0;
  }

  /* Compare — lives in the Key Metrics section label row (same trailing-pill slot .prk-go-filters
     uses elsewhere), gold accent matching the homepage's Compare Projects card and the workspace
     quicklink's "New" badge, plus a slow pulse ring so it isn't just another gray control. */
  .prk-compare-btn {
    order: 3; position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
    border: 1px solid #c9a227; border-radius: 10px;
    background: linear-gradient(135deg, #c9a227 0%, #e6c64a 100%);
    color: #3a2c04; padding: 6px 12px; font-size: 11px; font-weight: 700;
    text-decoration: none; text-transform: none; letter-spacing: normal;
    animation: cmpBtnPulse 2.4s ease-in-out infinite;
  }
  .prk-compare-btn svg { width: 10px; height: 10px; opacity: .85; flex-shrink: 0; }
  .prk-compare-btn:hover {
    background: linear-gradient(135deg, #b8931f 0%, #dab73f 100%);
    color: #2a2003;
  }
  @keyframes cmpBtnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.45); }
    50% { box-shadow: 0 0 0 6px rgba(201, 162, 39, 0); }
  }
  .cmp-new-badge {
    position: absolute; top: -7px; right: -7px;
    font-size: 0.5rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 5px; line-height: 1.4;
    background: #ef4444; color: #fff; box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4);
    pointer-events: none;
  }

  .project-share-wrapper {
    position: relative;
  }

  .project-share-wrapper .prp-share-popup {
    bottom: auto;
    top: calc(100% + 8px);
  }

  /* Compact Investment Returns in Header Strip */
  .project-returns-row {
    display: none;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
    align-items: stretch;
  }
  
  .project-returns-row.has-data {
    display: flex;
  }
  
  .return-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 10px;
    border-radius: 0;
    font-size: 0.7rem;
    font-weight: 500;
    background: transparent;
    border: none;
    color: #6b7280;
    line-height: 1.3;
  }

  .return-chip + .return-chip {
    border-left: 1px solid #d1d5db;
  }

  .return-chip.rc-overall {
    background: transparent;
    border: none;
    justify-content: center;
    padding: 5px 14px;
  }

  .return-chip.rc-overall + .return-chip,
  .return-chip + .return-chip.rc-overall {
    border-left: 1px solid #d1d5db;
  }
  
  .rc-top {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .return-chip .rc-layout {
    color: #6b7280;
    font-weight: 500;
    font-size: 0.68rem;
  }
  
  .return-chip .rc-sales {
    color: #9ca3af;
    font-size: 0.68rem;
  }
  
  .return-chip .rc-appreciation {
    font-weight: 700;
    font-size: 0.88rem;
  }
  
  .return-chip .rc-appreciation.positive {
    color: var(--prp-brand-green);
  }
  
  .return-chip .rc-appreciation.negative {
    color: var(--prp-brand-danger);
  }
  
  .return-chip .rc-appreciation.neutral {
    color: #9ca3af;
  }

  .rc-chip-row4 {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }
  .rc-chip-period {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 400;
  }
  .rc-chip-yoy {
    font-size: 0.72rem;
    font-weight: 600;
  }
  .rc-chip-yoy.positive { color: var(--prp-brand-green); }
  .rc-chip-yoy.negative { color: var(--prp-brand-danger); }
  .rc-chip-yoy.neutral  { color: #9ca3af; }

  .rc-prices {
    font-size: 0.68rem;
    color: #9ca3af;
    letter-spacing: -0.01em;
  }
  
  .rc-prices .rc-arrow {
    color: #d1d5db;
    margin: 0 3px;
  }
  
  .return-chip .rc-overall-label {
    font-size: 0.66rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .return-chip .rc-overall-value {
    font-weight: 700;
    font-size: 0.82rem;
    color: #6b7280;
  }

  /* Pro-gated layout chip blur */
  .rc-gated-appreciation,
  .rc-gated-prices {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
    color: #6b7280;
  }

  /* Status / confidence badges on layout chips */
  .rc-status-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 5px;
    border-radius: 3px;
    line-height: 1.4;
    margin-left: 0;
  }
  .rc-status-badge.status-too-early { background: #f3f4f6; color: #6b7280; }
  .rc-status-badge.status-primary-only { background: #fef3c7; color: #92400e; }
  .rc-status-badge.status-primary-dominant { background: #fff7ed; color: #c2410c; }
  .rc-status-badge.status-mixed { background: #ede9fe; color: #6d28d9; }
  .rc-status-badge.status-market { background: #d1fae5; color: #065f46; }

  .rc-chip-row1 { display: flex; align-items: center; gap: 4px; }
  .rc-chip-row2 { display: flex; align-items: center; }
  .rc-chip-row2.rc-market-row { display: none; } /* MARKET is default — hide badge on desktop; shown on mobile cards */
  .rc-chip-row3 { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
  .rc-chip-type { color: #9ca3af; font-weight: 400; font-size: 0.65rem; text-transform: lowercase; }

  .rc-conf-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.4;
    margin-left: 3px;
  }
  .rc-conf-pill.conf-high { background: #d1fae5; color: #065f46; }
  .rc-conf-pill.conf-med  { background: #fef3c7; color: #92400e; }
  .rc-conf-pill.conf-low  { background: #fee2e2; color: #991b1b; }
  .rc-conf-pill.conf-none { background: #f3f4f6; color: #9ca3af; }

  .return-chip.rc-clickable {
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
  }
  .return-chip.rc-clickable:hover {
    background: #f9fafb;
  }
  .return-chip.rc-clickable.rc-active {
    background: #f3f4f6;
    box-shadow: inset 0 -2px 0 var(--prp-brand-green, #198754);
  }

  /* Cluster detail panel */
  #rcClusterPanel {
    /* Live inside the inline-flex .rc-gated-wrap. The chip row sets the wrapper's
       width; this trick keeps the cluster panel from pushing it wider when the
       legend expands, so collapse/expand doesn't change the table's outer size. */
    align-self: stretch;
    width: 0;
    min-width: 100%;
    box-sizing: border-box;
  }
  .rc-cluster-panel {
    margin-top: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 0.78rem;
  }
  .rc-cluster-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
  }
  .rc-cluster-panel-title {
    font-weight: 600;
    color: #111827;
  }
  .rc-cluster-panel-meta {
    color: #6b7280;
    font-size: 0.7rem;
  }
  .rc-cluster-panel-close {
    color: #9ca3af;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 6px;
    user-select: none;
  }
  .rc-cluster-panel-close:hover { color: #374151; }
  .rc-cluster-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid #f1f3f5;
    border-radius: 8px;
    background: #fff;
    /* fade edges to hint scrollability */
    background-image:
      linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
      linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0)),
      linear-gradient(to left,  rgba(0,0,0,0.06), rgba(0,0,0,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%;
    background-attachment: local, local, scroll, scroll;
  }
  .rc-cluster-scroll-hint {
    display: none;
    text-align: center;
    color: #9ca3af;
    font-size: 0.65rem;
    margin-top: 4px;
    letter-spacing: 0.04em;
  }
  .rc-cluster-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    min-width: 720px;
  }
  .rc-cluster-table th {
    text-align: left;
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.68rem;
    padding: 8px 10px;
    border-bottom: 1px solid #e5e7eb;
    background: #fafbfc;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
  }
  .rc-cluster-table th.num,
  .rc-cluster-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
  .rc-cluster-table th.rc-col-idx,
  .rc-cluster-table td.rc-col-idx { width: 36px; text-align: center; color: #9ca3af; }
  .rc-cluster-table tbody tr:hover td { background: #fafbfc; }
  .rc-cluster-table tbody tr:last-child td { border-bottom: 0; }
  .rc-cluster-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    white-space: nowrap;
  }
  .rc-cluster-appr.positive { color: var(--prp-brand-green, #198754); font-weight: 600; }
  .rc-cluster-appr.negative { color: var(--prp-brand-danger, #dc2626); font-weight: 600; }
  .rc-cluster-appr.neutral  { color: #9ca3af; }
  .rc-cluster-yoy { font-size: 0.68rem; margin-top: 1px; }
  .rc-cluster-yoy.positive { color: var(--prp-brand-green, #198754); }
  .rc-cluster-yoy.negative { color: var(--prp-brand-danger, #dc2626); }
  .rc-cluster-yoy.neutral  { color: #9ca3af; }

  @media (max-width: 640px) {
    .rc-cluster-panel { padding: 10px; font-size: 0.74rem; }
    .rc-cluster-panel-header { flex-wrap: wrap; gap: 4px; }
    .rc-cluster-table { font-size: 0.7rem; min-width: 640px; }
    .rc-cluster-table th { padding: 7px 8px; font-size: 0.68rem; }
    .rc-cluster-table td { padding: 7px 8px; }
    .rc-cluster-scroll-hint { display: block; }
  }
  .rc-cluster-panel-footer {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    color: #6b7280;
    font-size: 0.68rem;
    line-height: 1.4;
  }
  .rc-cluster-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
  }
  @media (max-width: 900px) { .rc-cluster-cards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 580px) { .rc-cluster-cards { grid-template-columns: 1fr; } }
  .rc-cluster-card {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px dashed #ba7517;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s;
  }
  .rc-cluster-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
  @media (hover: hover) {
    .rc-cluster-card:hover .phstrip-tip { visibility: visible; opacity: 1; }
  }
  .rc-cluster-card .phstrip-tip { right: auto; left: 0; width: auto; white-space: nowrap; }
  .rc-cc-area {
    display: inline-flex;
    align-items: center;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 12px;
    margin-bottom: 6px;
    width: fit-content;
  }
  .rc-cc-appr {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 2px;
  }
  .rc-cc-appr.positive { color: var(--prp-brand-green, #198754); }
  .rc-cc-appr.negative { color: var(--prp-brand-danger, #dc2626); }
  .rc-cc-appr.neutral  { color: #9ca3af; }
  .rc-cc-appr.rc-cc-appr-sub {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: normal;
    margin-bottom: 4px;
  }
  .rc-cc-raw { font-size: 0.58rem; color: #9ca3af; font-weight: 400; margin-left: 3px; vertical-align: middle; }
  .rc-cc-price-big {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #1f2937;
    margin-bottom: 2px;
  }
  .rc-cc-launch-from {
    font-size: 0.68rem;
    color: #9ca3af;
    margin-bottom: 2px;
  }
  .rc-cc-status {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
  }
  .rc-cc-not-counted {
    font-size: 0.62rem;
    font-weight: 400;
    color: #9ca3af;
    margin-top: 2px;
  }
  .rc-cc-s-market   { color: #15803d; }
  .rc-cc-s-dominant { color: #b45309; }
  .rc-cc-s-primary  { color: #6b7280; }
  .rc-cc-s-early    { color: #6b7280; }
  .rc-cc-s-mixed    { color: #7c3aed; }
  .rc-apx-hero-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }
  .rc-apx-hero-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 4px 8px;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
  }
  .rc-apx-hero-link:hover { color: #111827; border-color: #9ca3af; }
  .rc-cluster-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    border-radius: 999px;
    padding: 4px 10px 4px 6px;
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .rc-cluster-legend-toggle:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
  }
  .rc-cluster-legend-toggle.open {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
  }
  .rc-cluster-legend-q {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #4b5563;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
  }
  .rc-cluster-legend-toggle.open .rc-cluster-legend-q {
    background: #1d4ed8;
    color: #fff;
  }
  .rc-cluster-legend-chevron {
    transition: transform 0.15s;
  }
  .rc-cluster-legend-toggle.open .rc-cluster-legend-chevron {
    transform: rotate(180deg);
  }
  .rc-cluster-legend {
    margin-top: 10px;
    background: #fafafa;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    padding: 12px 14px;
    color: #374151;
    font-size: 0.72rem;
    line-height: 1.5;
  }
  .rc-cluster-legend-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 8px;
  }
  .rc-cluster-legend-grid {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 4px 14px;
    margin: 0 0 12px;
  }
  .rc-cluster-legend-grid dt {
    font-weight: 600;
    color: #111827;
    font-size: 0.72rem;
  }
  .rc-cluster-legend-grid dd {
    margin: 0;
    color: #4b5563;
    font-size: 0.72rem;
  }
  .rc-cluster-legend-formula {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #e5e7eb;
  }
  .rc-cluster-legend-formula-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 6px;
  }
  .rc-cluster-legend-formula-eq {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 4px;
  }
  .rc-cluster-legend-formula-eq span {
    flex: 0 0 130px;
    font-weight: 600;
    color: #111827;
    font-size: 0.72rem;
  }
  .rc-cluster-legend-formula-eq code {
    flex: 1;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 4px 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.7rem;
    color: #1f2937;
    white-space: normal;
    line-height: 1.5;
  }
  .rc-cluster-legend-formula-note {
    margin-top: 8px;
    font-size: 0.7rem;
    color: #6b7280;
    line-height: 1.5;
  }
  @media (max-width: 540px) {
    .rc-cluster-legend-grid { grid-template-columns: 1fr; }
    .rc-cluster-legend-grid dt { margin-top: 4px; }
    .rc-cluster-legend-formula-eq { flex-direction: column; }
    .rc-cluster-legend-formula-eq span { flex: none; }
  }

  /* Golden gated wrapper */
  .rc-gated-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
    border: 1.5px solid rgba(234,179,8,0.55);
    border-radius: 10px;
    background: rgba(234,179,8,0.03);
    overflow: hidden;
    vertical-align: top;
  }
  .rc-gated-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 10px 5px 12px;
    background: rgba(234,179,8,0.09);
    border-bottom: 1px solid rgba(234,179,8,0.22);
    gap: 6px;
  }
  .rc-pro-header {
    background: rgba(201,162,39,0.09);
    border-bottom-color: rgba(201,162,39,0.22);
  }
  .rc-pro-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #92700c;
    letter-spacing: 0.01em;
    line-height: 1.5;
  }
  .rc-gated-chips {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 2px 4px 2px 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .rc-gated-chips > .return-chip {
    flex-shrink: 0;
  }
  .rc-gated-chips::-webkit-scrollbar {
    height: 6px;
  }
  .rc-gated-chips::-webkit-scrollbar-thumb {
    background: rgba(234,179,8,0.35);
    border-radius: 3px;
  }
  .rc-gated-chips .return-chip + .return-chip {
    border-left: 1px solid rgba(234,179,8,0.25);
  }
  .rc-pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #92400e;
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 0.01em;
    cursor: pointer;
    line-height: 1.5;
  }
  .rc-pro-badge:hover {
    color: #78350f;
    text-decoration: underline;
  }
  .vs-launch-unlock-btn { display:inline-block;padding:1px 6px;font-size:0.68rem;font-weight:700;color:#78350f;background:linear-gradient(135deg,rgba(201,162,39,0.12),rgba(219,183,50,0.22));border:1px solid rgba(201,162,39,0.45);border-radius:4px;text-decoration:none;white-space:nowrap;letter-spacing:0.02em; }
  .vs-launch-unlock-btn:hover { background:linear-gradient(135deg,rgba(201,162,39,0.25),rgba(219,183,50,0.38));color:#78350f;text-decoration:none; }
  .vs-launch-info { position:relative; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border:1px solid #94a3b8; border-radius:50%; color:#64748b; font-size:9px; font-weight:700; cursor:help; vertical-align:middle; line-height:1; background:#fff; }
  .vs-launch-info:hover, .vs-launch-info:focus { background:#f1f5f9; color:#0f172a; outline:none; }
  .vs-launch-info .vs-launch-tip { position:absolute; top:calc(100% + 8px); right:0; width:280px; background:#0f172a; color:#f8fafc; font-size:11px; font-weight:500; line-height:1.5; padding:10px 12px; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,0.2); white-space:normal; z-index:1000; opacity:0; visibility:hidden; transition:opacity 0.12s ease; pointer-events:none; text-align:left; }
  .vs-launch-info .vs-launch-tip::before { content:''; position:absolute; top:-5px; right:4px; width:10px; height:10px; background:#0f172a; transform:rotate(45deg); }
  .vs-launch-info:hover .vs-launch-tip, .vs-launch-info:focus .vs-launch-tip { opacity:1; visibility:visible; }
  .vs-launch-info .vs-launch-tip b { color:#fff; }
  .vs-launch-info .vs-launch-tip .tip-row { display:block; margin-top:4px; }
  .vs-launch-info .vs-launch-tip .tip-row:first-child { margin-top:0; }
  .vs-launch-warn { position:relative; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; margin-left:4px; border-radius:50%; background:#fef3c7; color:#92400e; font-size:10px; font-weight:700; cursor:pointer; vertical-align:middle; line-height:1; border:1px solid #fbbf24; user-select:none; }
  .vs-launch-warn:hover, .vs-launch-warn:focus { background:#fde68a; outline:none; }
  .vs-launch-warn .vs-launch-warn-tip { position:absolute; top:calc(100% + 8px); right:0; width:240px; background:#0f172a; color:#f8fafc; font-size:11px; font-weight:500; line-height:1.5; padding:8px 10px; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,0.25); white-space:normal; z-index:2000; opacity:0; visibility:hidden; transition:opacity 0.12s ease; pointer-events:none; text-align:left; }
  .vs-launch-warn .vs-launch-warn-tip::after { content:''; position:absolute; top:-5px; right:4px; width:10px; height:10px; background:#0f172a; transform:rotate(45deg); }
  .vs-launch-warn.is-open .vs-launch-warn-tip, .vs-launch-warn:focus .vs-launch-warn-tip { opacity:1; visibility:visible; }
  .vs-launch-diverge { position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; margin-left:4px; border-radius:3px; background:#fff7ed; color:#c2410c; font-size:11px; font-weight:700; cursor:pointer; vertical-align:middle; line-height:1; border:1px solid #fb923c; user-select:none; }
  .vs-launch-diverge:hover, .vs-launch-diverge:focus { background:#ffedd5; outline:none; }
  .vs-launch-diverge .vs-launch-diverge-tip { position:absolute; top:calc(100% + 8px); right:0; width:260px; background:#0f172a; color:#f8fafc; font-size:11px; font-weight:500; line-height:1.5; padding:8px 10px; border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,0.25); white-space:normal; z-index:2000; opacity:0; visibility:hidden; transition:opacity 0.12s ease; pointer-events:none; text-align:left; }
  .vs-launch-diverge .vs-launch-diverge-tip::after { content:''; position:absolute; top:-5px; right:4px; width:10px; height:10px; background:#0f172a; transform:rotate(45deg); }
  .vs-launch-diverge.is-open .vs-launch-diverge-tip, .vs-launch-diverge:focus .vs-launch-diverge-tip { opacity:1; visibility:visible; }
  .rc-pro-badge-star {
    font-size: 0.82rem;
    line-height: 1;
  }

  /* ── APREX Appreciation redesign (Pro view) ── */
  .rc-apx-wrap { width: 100%; }
  .rc-apx-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .rc-apx-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #0f172a;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
  }
  .rc-apx-badge .apx-nm  { color: #c8a030; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; }
  .rc-apx-badge .apx-dot { color: #46546e; font-size: 0.7rem; }
  .rc-apx-badge .apx-md  { color: #2dcf88; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; }
  .rc-verified-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dcfce7;
    color: #166534;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.02em;
  }
  /* Hero card */
  .rc-apx-hero {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #1d9e75;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 14px;
  }
  .rc-apx-hero-ctx { font-size: 0.75rem; color: #6b7280; margin-bottom: 6px; }
  .rc-apx-hero-big-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }
  .rc-apx-hero-big {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
  }
  .rc-apx-hero-big.positive { color: #1d9e75; }
  .rc-apx-hero-big.negative { color: #d85a30; }
  .rc-apx-hero-big.neutral  { color: #9ca3af; font-size: 1.8rem; }
  .rc-apx-hero-sub { font-size: 0.83rem; color: #6b7280; }
  .rc-apx-hero-meta { font-size: 0.73rem; color: #6b7280; margin-top: 8px; line-height: 1.5; }
  .rc-apx-hero-pills { display: flex; gap: 7px; margin-top: 10px; flex-wrap: wrap; }
  .rc-apx-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 6px;
    letter-spacing: 0.02em;
  }
  .rc-apx-pill.green { background: #dcfce7; color: #166534; }
  .rc-apx-pill.amber { background: #fef3c7; color: #92400e; }
  .rc-apx-pill.grey  { background: #f3f4f6; color: #6b7280; }
  /* Layout list */
  .rc-apx-list-label {
    font-size: 0.65rem;
    color: #9ca3af;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
  }
  .apx-layout-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
  }
  .apx-layout-tab {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 5px 13px;
    white-space: nowrap;
    cursor: default;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .apx-layout-tab.selectable { cursor: pointer; }
  .apx-layout-tab.selectable:hover:not(.active) { background: #e5e7eb; color: #374151; }
  .apx-layout-tab.active {
    background: #16a34a;
    color: #ffffff;
    border-color: #16a34a;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
  }
  .apx-layout-tab.locked { opacity: 0.5; cursor: pointer; }
  .apx-layout-tab.locked:hover { opacity: 0.75; }
  .apx-layout-tab .apx-layout-lock { margin-left: 5px; font-size: 0.68rem; }
  .rc-apx-row {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 7px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .rc-apx-row:last-child { margin-bottom: 0; }
  .rc-apx-row.apx-market   { border-left: 3px solid #1d9e75; }
  .rc-apx-row.apx-modelled { border-left: 3px solid #ba7517; }
  .rc-apx-row.apx-withheld { background: #f9fafb; border: 1px dashed #d1d5db; cursor: default; }
  .rc-apx-row.apx-active   { border-color: #1d9e75; background: #f0fdf4; }
  .rc-apx-row:hover:not(.apx-withheld) { border-color: #1d9e75; }
  .rc-apx-row-left .nm { font-size: 0.83rem; font-weight: 500; color: #111827; }
  .rc-apx-row-left .nm strong { font-weight: 700; }
  .rc-apx-row-left .nm .cnt { font-weight: 400; color: #9ca3af; font-size: 0.75rem; }
  .rc-apx-row-left .st { font-size: 0.65rem; color: #6b7280; margin-top: 2px; }
  .rc-apx-row-right { text-align: right; flex-shrink: 0; margin-left: 12px; }
  .rc-apx-row-right .pct { font-size: 1.15rem; font-weight: 800; line-height: 1.1; }
  .rc-apx-row-right .pct.positive { color: #1d9e75; }
  .rc-apx-row-right .pct.negative { color: #d85a30; }
  .rc-apx-row-right .pct.neutral  { color: #9ca3af; font-size: 0.95rem; font-weight: 600; }
  .rc-apx-row-right .tier { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; margin-top: 2px; }
  .rc-apx-row-right .tier.high { color: #1d9e75; }
  .rc-apx-row-right .tier.med  { color: #ba7517; }
  .rc-apx-row-right .tier.low  { color: #d85a30; }
  .rc-apx-row-right .tier.none { color: #9ca3af; font-weight: 500; }
  .rc-apx-footnote {
    font-size: 0.65rem;
    color: #9ca3af;
    line-height: 1.6;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
  }
  /* Locked layout row (non-pro) */
  .rc-apx-row.apx-locked { cursor: default; }
  .rc-apx-row.apx-locked:hover { border-color: #e5e7eb; background: #fff; }
  .rc-apx-locked-pct {
    filter: blur(5px);
    user-select: none;
    pointer-events: none;
    color: #1d9e75;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.1;
  }
  /* ── APREX Projection redesign (prx-*) ── */
  .prx-proj-wrap { width: 100%; }
  .prx-proj-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
  }
  .prx-modelled-tag {
    display: inline-flex;
    align-items: center;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    letter-spacing: 0.02em;
  }
  /* Projection hero card — dashed gold left border */
  .prx-proj-hero {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px dashed #ba7517;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 14px;
  }
  .prx-handover-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
    vertical-align: middle;
  }
  .prx-area-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef3c7;
    color: #92400e;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    margin: 0 8px 10px 0;
    vertical-align: middle;
  }
  .prx-borrowed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #f1f5f9;
    color: #64748b;
    border-radius: 50%;
    margin: 0 0 10px 6px;
    vertical-align: middle;
    cursor: help;
  }
  .prx-proj-ctx { font-size: 0.73rem; color: #6b7280; margin-bottom: 6px; }
  .prx-proj-label { font-size: 0.7rem; color: #6b7280; margin-bottom: 4px; }
  .prx-proj-big-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }
  .prx-proj-big { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.04em; color: #ba7517; line-height: 1; }
  .prx-proj-bigsub { font-size: 0.78rem; color: #ba7517; font-weight: 700; }
  .prx-proj-singlenote { font-size: 0.7rem; color: #9ca3af; margin-top: 6px; }
  /* Range track */
  .prx-range-wrap { margin: 18px 0 6px; position: relative; height: 44px; }
  .prx-range-bar { position: absolute; top: 18px; height: 8px; background: #fef3c7; border-radius: 4px; left: 0; right: 0; }
  .prx-range-fill { position: absolute; top: 18px; height: 8px; background: #ba7517; opacity: 0.35; border-radius: 4px; }
  .prx-range-mid { position: absolute; top: 11px; width: 3px; height: 22px; background: #ba7517; border-radius: 2px; }
  .prx-range-lab {
    position: absolute;
    top: 0;
    font-size: 0.68rem;
    color: #92400e;
    font-weight: 700;
    transform: translateX(-50%);
  }
  .prx-range-ends { display: flex; justify-content: space-between; font-size: 0.72rem; color: #6b7280; }
  .prx-range-pct { color: #9ca3af; }
  /* Caution box */
  .prx-caution {
    background: #fef3c7;
    border-radius: 9px;
    padding: 11px 13px;
    font-size: 0.72rem;
    color: #6b4a0a;
    line-height: 1.55;
    margin-bottom: 14px;
  }
  .prx-caution b { color: #4a3206; font-weight: 700; }
  /* Mobile-collapsible sections */
  .prx-mob-chevron { display: none; font-size: 0.75rem; color: #94a3b8; transition: transform 0.2s; flex-shrink: 0; }
  @media (max-width: 640px) {
    .prx-mob-chevron { display: inline-block; margin-left: 8px; }
    .prx-mob-header { cursor: pointer; display: flex !important; justify-content: space-between; align-items: center; }
    .prx-mob-content { display: none; }
    .prx-mob-section.prx-expanded .prx-mob-content { display: block; }
    .prx-mob-section.prx-expanded .prx-mob-chevron { transform: rotate(180deg); }
  }
  /* Comparable projects */
  .prx-comps-label {
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .prx-cmp {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 9px;
    padding: 11px 14px;
    margin-bottom: 8px;
  }
  .prx-cmp.using { border: 1.5px solid #1d9e75; background: #f0fdf4; }
  .prx-cmp-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .prx-cmp-name { font-size: 0.82rem; font-weight: 600; color: #111827; }
  .prx-cmp-name a { color: inherit; text-decoration: none; }
  .prx-cmp-name a:hover { text-decoration: underline; }
  .prx-cmp-dev { font-size: 0.68rem; color: #9ca3af; margin-top: 2px; }
  .prx-cmp-rate { font-size: 0.82rem; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
  .prx-cmp-rate.pos { color: #1d9e75; }
  .prx-cmp-rate.neg { color: #d85a30; }
  .prx-using-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1d9e75;
    background: #fff;
    border: 1px solid #1d9e75;
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .prx-cmp-det { font-size: 0.65rem; color: #9ca3af; margin-top: 5px; line-height: 1.5; }
  .prx-cmp-unit { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
  .prx-cmp-unit-tag {
    font-size: 0.68rem; font-weight: 600;
    background: #fef3c7; color: #92400e;
    border: 1px solid #fcd34d;
    border-radius: 5px; padding: 1px 6px;
    white-space: nowrap;
  }
  .prx-comps-footnote {
    font-size: 0.65rem;
    color: #9ca3af;
    line-height: 1.6;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
  }
  /* Desktop two-column layout */
  .prx-proj-cols { display: grid; gap: 20px; }
  @media (min-width: 768px) {
    .prx-proj-cols { grid-template-columns: 1fr 1fr; align-items: start; }
  }
  /* Layout tab selector */
  .prx-layout-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
  .prx-layout-tab {
    font-size: 0.72rem; font-weight: 600; color: #6b7280;
    background: #f3f4f6; border: 1px solid #e5e7eb;
    border-radius: 20px; padding: 5px 13px;
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .prx-layout-tab:hover:not(.active) { background: #e5e7eb; }
  .prx-layout-tab.active { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
  .prx-layout-tab.locked { opacity: 0.5; }
  /* Cluster size pills */
  .prx-cluster-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  #prxAllCards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 900px) { #prxAllCards { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 580px) { #prxAllCards { grid-template-columns: 1fr; } }
  a.prx-proj-hero-link { display: block; text-decoration: none; color: inherit; border-radius: 12px; }
  a.prx-proj-hero-link:hover .prx-proj-hero { box-shadow: 0 4px 16px rgba(0,0,0,0.10); }
  #prxFloatTip {
    position: fixed; pointer-events: none; z-index: 2000;
    background: #1a2535; color: #e5e7eb; font-size: 11px; font-weight: 400;
    line-height: 1.45; padding: 8px 10px; border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.25); white-space: nowrap;
    visibility: hidden; opacity: 0; transition: opacity .15s;
  }
  .prx-cluster-pill {
    font-size: 0.68rem; font-weight: 600; color: #6b7280;
    background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 16px; padding: 3px 10px;
    cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
  }
  .prx-cluster-pill:hover:not(.active) { background: #f3f4f6; }
  .prx-cluster-pill.active { background: #fffbeb; color: #92400e; border-color: #fcd34d; }

  /* Top Row - now single column for full-width AI Insights */
  .top-row {
    margin-top: 20px;
    margin-bottom: 28px;
  }
  
  /* Listings Card */
  .listings-card {
    background: var(--bg-card);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    flex: 1;
    display: flex;
    flex-direction: column;
    max-height: 400px;
    transition: all 0.4s var(--transition-smooth);
  }
  
  .listings-card:hover {
    border-color: var(--border-hover);
  }
  
  .listings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .listings-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  
  .listings-title svg {
    color: var(--accent-emerald);
  }
  
  .listings-count {
    background: rgba(52, 211, 153, 0.12);
    color: var(--accent-emerald);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.02em;
  }
  
  .listings-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .listing-type-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 2px;
  }
  
  .listing-type-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .listing-type-btn.active {
    background: rgba(52, 211, 153, 0.15);
    color: var(--accent-emerald);
  }
  
  .listing-type-btn:hover:not(.active) {
    color: var(--text-secondary);
  }
  
  .refresh-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
  }
  
  .refresh-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: var(--border-hover);
  }
  
  .refresh-btn.loading svg {
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  .listings-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .listings-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 40px;
    gap: 14px;
  }
  
  /* ── Robin AI analysis loading overlay ── */
  .robin-analysis-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #eceae5);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    /* Intentionally no transition on show — the overlay must be fully opaque the instant
       .visible is added, or whatever's already rendered underneath (e.g. the hero photo)
       visibly bleeds through during the fade, since content now renders fast. Fading out
       (below, via .fade-out) is fine since by then real content is ready to reveal. */
  }
  .robin-analysis-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .robin-analysis-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 360px;
    text-align: center;
  }
  .robin-analysis-logo {
    width: 56px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: robinPulse 2s ease-in-out infinite;
  }
  @keyframes robinPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
  }
  .robin-analysis-project-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #224C5A);
    letter-spacing: -0.03em;
    line-height: 1.3;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .robin-analysis-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6c757d);
    letter-spacing: -0.01em;
    margin-top: -12px;
  }
  .robin-analysis-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
  }
  .robin-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-muted, #95a5a6);
    transition: all 0.3s ease;
    padding: 6px 14px;
    border-radius: 10px;
  }
  .robin-step.active {
    color: var(--text-primary, #224C5A);
    background: var(--accent-robin-soft, rgba(15,32,75,0.08));
    font-weight: 500;
  }
  .robin-step.done {
    color: var(--accent-blue, #2B6073);
  }
  .robin-step-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .robin-step-icon .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-subtle, #D3DDDE);
    transition: all 0.3s ease;
  }
  .robin-step.active .dot {
    width: 8px;
    height: 8px;
    background: var(--accent-robin, #0f204b);
    box-shadow: 0 0 0 3px rgba(15,32,75,0.12);
    animation: stepDotPulse 1s ease-in-out infinite;
  }
  @keyframes stepDotPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(15,32,75,0.12); }
    50% { box-shadow: 0 0 0 6px rgba(15,32,75,0.06); }
  }
  .robin-step.done .dot {
    display: none;
  }
  .robin-step.done .robin-step-icon::after {
    content: '✓';
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-blue, #2B6073);
  }
  .robin-step-label {
    flex: 1;
    text-align: left;
  }
  .robin-analysis-bar {
    width: 100%;
    height: 3px;
    background: var(--border-subtle, #D3DDDE);
    border-radius: 3px;
    overflow: hidden;
  }
  .robin-analysis-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent-robin, #0f204b), var(--accent-blue, #2B6073));
    border-radius: 3px;
    transition: width 0.5s ease;
  }
  .robin-analysis-overlay.fade-out {
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  @media (max-width: 576px) {
    .robin-analysis-inner { gap: 20px; max-width: 280px; }
    .robin-step { font-size: 12px; padding: 5px 10px; }
    .robin-analysis-project-name { font-size: 15px; max-width: 250px; }
    .robin-analysis-title { font-size: 12px; }
  }

  .listings-loading {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 250px;
    width: 100%;
  }
  
  .ai-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  
  .ai-loading-text {
    font-size: 0.9rem;
    font-weight: 400;
    text-align: center;
    line-height: 1.6;
    min-height: 1.6em;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
  }
  
  .ai-loading-text .typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: var(--accent-emerald);
    margin-left: 3px;
    animation: blink 0.7s infinite;
    vertical-align: text-bottom;
  }
  
  .ai-loading-progress {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
  }
  
  .ai-loading-progress .step {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.35s ease;
  }
  
  .ai-loading-progress .step.active {
    background: var(--accent-emerald);
    box-shadow: 0 0 14px rgba(52, 211, 153, 0.5);
    transform: scale(1.15);
  }
  
  .ai-loading-progress .step.done {
    background: rgba(52, 211, 153, 0.4);
  }
  
  @keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
  }
  
  /* Mobile responsive for loading */
  @media (max-width: 576px) {
    .listings-loading {
      min-height: 180px;
      padding: 30px 15px;
    }
    
    .ai-loading-container {
      gap: 20px;
      max-width: 240px;
    }
    
    .ai-loading-text {
      font-size: 0.875rem;
    }
    
    .ai-loading-progress .step {
      width: 8px;
      height: 8px;
    }
    
    .ai-loading-progress {
      gap: 8px;
    }
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .listings-loading .spinner {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.08);
    border-top-color: var(--accent-emerald);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  
  .listing-item {
    display: flex;
    gap: 14px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    transition: all 0.25s ease;
    text-decoration: none;
  }
  
  .listing-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-hover);
    transform: translateX(3px);
  }
  
  .listing-source-badge {
    width: 4px;
    border-radius: 3px;
    flex-shrink: 0;
  }
  
  .listing-source-badge.dubizzle {
    background: var(--accent-blue);
  }
  
  .listing-source-badge.propertyfinder {
    background: var(--accent-coral);
  }
  
  .listing-source-badge.bayut {
    background: #22d3ee;
  }
  
  .listing-details {
    flex: 1;
    min-width: 0;
  }
  
  .listing-title {
    font-size: 0.82rem;
    color: var(--text-primary);
    font-weight: 450;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
  }
  
  .listing-snippet {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.5;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .listing-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
  }
  
  .listing-price {
    color: var(--prp-brand-green);
    font-weight: 600;
  }
  
  .listing-type {
    color: rgba(255, 255, 255, 0.4);
  }
  
  .listing-arrow {
    color: rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
  }
  
  /* Listing Type/Layout Groups */
  .listing-type-group {
    margin-bottom: 20px;
  }
  
  .listing-type-header {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: 10px;
    letter-spacing: -0.01em;
  }
  
  .listing-layout-group {
    margin-bottom: 12px;
    padding-left: 14px;
  }
  
  .listing-layout-label {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    padding: 5px 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  
  .listing-layout-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .listings-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-align: center;
    padding: 40px;
    gap: 10px;
  }
  
  .listings-empty svg {
    opacity: 0.25;
    margin-bottom: 10px;
  }
  
  .listings-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .listings-sources {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
  
  .source-badge {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.03em;
  }
  
  .source-badge.dubizzle {
    background: rgba(96, 165, 250, 0.12);
    color: var(--accent-blue);
  }
  
  .source-badge.propertyfinder {
    background: rgba(251, 113, 133, 0.12);
    color: var(--accent-coral);
  }
  
  .source-badge.bayut {
    background: rgba(34, 211, 238, 0.12);
    color: var(--prp-brand-teal);
  }

  /* Non-Pro listings gate */
  .listings-pro-gate {
    position: relative;
    margin-top: 10px;
  }
  .listings-pro-gate-blur {
    filter: blur(5px);
    opacity: 0.5;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .listings-pro-gate-blur .listing-item {
    pointer-events: none;
  }
  .listings-pro-gate-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 30%, rgba(255,255,255,0.85) 100%);
    border-radius: var(--radius-sm);
    padding: 20px;
  }
  .listings-upgrade-card {
    text-align: center;
    background: #fff;
    border: 1px solid #e2e5eb;
    border-radius: 14px;
    padding: 22px 28px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
    max-width: 340px;
    width: 100%;
  }
  .listings-upgrade-card .upgrade-icon {
    width: 40px; height: 40px;
    margin: 0 auto 12px;
    background: linear-gradient(135deg, rgba(201,162,39,0.12) 0%, rgba(201,162,39,0.06) 100%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #c9a227;
  }
  .listings-upgrade-card .upgrade-count {
    font-size: 0.92rem;
    font-weight: 600;
    color: #1a1f2e;
    margin-bottom: 4px;
  }
  .listings-upgrade-card .upgrade-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .listings-upgrade-card .upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--prp-brand-gold) 0%, #dbb732 30%, #f6d365 60%, var(--prp-brand-gold) 100%);
    background-size: 200% 100%;
    color: #1e293b;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(201, 162, 39, 0.2);
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }
  .listings-upgrade-card .upgrade-btn:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 20px rgba(201, 162, 39, 0.35);
    background-position: 100% 0;
  }

  /* AI Insights Card */
  .ai-insights-card {
    background: var(--bg-card);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: all 0.4s var(--transition-smooth);
  }
  
  .ai-insights-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ai-insights-card:hover {
    border-color: var(--border-hover);
  }

  /* AI Verdict Section */
  .ai-verdict-section {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, rgba(34, 211, 238, 0.04) 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }

  .ai-verdict-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }

  .ai-verdict-icon {
    font-size: 0.85rem;
  }

  .ai-verdict-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--prp-brand-teal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .ai-verdict-content {
    font-size: 0.72rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 10px;
  }

  .ai-verdict-content p {
    margin: 0 0 8px 0;
  }

  .ai-verdict-content p:last-child {
    margin-bottom: 0;
  }

  .ai-verdict-content strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
  }

  .ai-verdict-content em {
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
  }

  .ai-verdict-content .verdict-h1,
  .ai-verdict-content .verdict-h2,
  .ai-verdict-content .verdict-h3,
  .ai-verdict-content .verdict-h4 {
    color: var(--prp-brand-teal);
    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 1.4;
  }

  .ai-verdict-content .verdict-h1 {
    font-size: 0.85rem;
    margin-bottom: 10px;
    display: none; /* Hide main title - redundant with section header */
  }

  .ai-verdict-content .verdict-h2 {
    font-size: 0.8rem;
    margin: 12px 0 6px 0;
    border-bottom: 1px solid rgba(14, 165, 233, 0.15);
    padding-bottom: 4px;
  }

  .ai-verdict-content .verdict-h3 {
    font-size: 0.76rem;
    margin: 10px 0 5px 0;
    display: none; /* Hide project name title - redundant */
  }

  .ai-verdict-content .verdict-h4 {
    font-size: 0.72rem;
    margin: 8px 0 4px 0;
    color: var(--prp-brand-teal);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .ai-verdict-content .verdict-h4:first-child {
    margin-top: 0;
  }

  .ai-verdict-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .ai-verdict-disclaimer {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
  }

  .ai-verdict-date {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
  }

  /* === Cluster Projection Cards === */
  .prj-wrap {
    padding: 20px;
    background: rgba(14,165,233,0.04);
    border: 1px solid rgba(14,165,233,0.14);
    border-radius: var(--radius-md);
    position: relative;
  }

  .prj-header { margin-bottom: 16px; }

  .prj-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px;
  }

  .prj-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
  }

  .prj-meta-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
  }

  .prj-meta-pill.handover {
    background: rgba(201,162,39,0.18);
    color: #c9a227;
    border: 1px solid rgba(201,162,39,0.30);
  }

  .prj-meta-pill.months {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.60);
  }

  .prj-layout-section { margin-bottom: 18px; }
  .prj-layout-section:last-of-type { margin-bottom: 0; }

  .prj-layout-label {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .prj-layout-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.10);
  }

  .prj-clusters-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .prj-cluster-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .prj-cluster-card:hover {
    border-color: rgba(201,162,39,0.30);
    box-shadow: 0 4px 16px rgba(201,162,39,0.10);
  }

  .prj-card-head {
    padding: 10px 12px 10px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }

  /* 3-stat header row: Current Price | SQM | Price/sqm */
  .prj-head-stats {
    display: flex;
    gap: 0;
  }

  .prj-head-stat {
    flex: 1;
    min-width: 0;
    padding-right: 10px;
  }

  .prj-head-stat + .prj-head-stat {
    padding-left: 10px;
    padding-right: 0;
    border-left: 1px solid rgba(255,255,255,0.07);
  }

  .prj-head-stat-val {
    font-size: 0.94rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .prj-head-stat-lbl {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.30);
    margin-top: 2px;
  }

  /* keep backward-compat selectors in case referenced elsewhere */
  .prj-size-row { display: none; }
  .prj-size-badge { display: none; }
  .prj-size-sqft  { display: none; }
  .prj-cur-psm    { display: none; }

  .prj-benches-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    padding: 7px 12px;
    background: none;
    border: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    text-align: left;
    transition: color 0.15s, background 0.15s;
  }

  .prj-bench-arrow {
    font-size: 0.60rem;
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .prj-benches-toggle[aria-expanded="true"] .prj-bench-arrow { transform: rotate(180deg); }

  .prj-benches-toggle:hover {
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.03);
  }

  .prj-bench-list {
    display: none;
    padding: 6px 10px 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.12);
  }

  .prj-bench-list.open { display: block; }

  .prj-bench-item {
    padding: 8px 4px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.72rem;
    cursor: pointer;
    border-radius: 4px;
    transition: background 0.12s;
  }

  .prj-bench-item:hover { background: rgba(255,255,255,0.04); }
  .prj-bench-item:last-child { border-bottom: none; }

  .prj-bench-item.prj-bench-selected {
    background: rgba(74,222,128,0.10);
    border-radius: 6px;
    position: relative;
    padding-left: 12px;
  }
  .prj-bench-item.prj-bench-selected::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #4ade80;
    border-radius: 4px 0 0 4px;
  }

  /* selected badge — shown only on .prj-bench-selected */
  .prj-bench-sel-badge {
    display: none;
    font-size: 0.57rem; font-weight: 700;
    color: rgba(255,255,255,0.92); background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.32);
    border-radius: 3px; padding: 1px 5px;
    white-space: nowrap; flex-shrink: 0;
    letter-spacing: 0.04em;
  }
  .prj-bench-item.prj-bench-selected .prj-bench-sel-badge {
    display: inline-flex; align-items: center;
  }

  /* click-to-select hint — shown on non-selected items */
  .prj-bench-sel-hint {
    display: inline-block;
    font-size: 0.66rem; font-weight: 600;
    color: rgba(255,255,255,0.22);
    white-space: nowrap; flex-shrink: 0;
    transition: color 0.15s;
  }
  .prj-bench-item.prj-bench-selected .prj-bench-sel-hint { display: none; }
  .prj-bench-item:not(.prj-bench-selected):hover .prj-bench-sel-hint { color: rgba(255,255,255,0.58); }
  @media (max-width: 768px) {
    .prj-bench-sel-hint { color: rgba(255,255,255,0.3) !important; }
  }

  .prj-bench-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
  }

  .prj-bench-name {
    color: rgba(255,255,255,0.75);
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    text-decoration: none;
  }

  .prj-bench-name a {
    color: inherit;
    text-decoration: none;
  }
  .prj-bench-name:hover {
    color: rgba(255,255,255,0.95);
    text-decoration: underline;
  }

  .prj-bench-rate {
    font-weight: 700;
    white-space: nowrap;
    font-size: 0.78rem;
    flex-shrink: 0;
  }

  .prj-bench-rate.pos { color: rgba(34,197,94,0.85); }
  .prj-bench-rate.neg { color: #f87171; }
  .prj-bench-rate.neutral { color: rgba(255,255,255,0.45); }
  .prj-bench-since { font-size: 0.68rem; font-weight: 400; }
  .prj-bench-dev { display: block; font-size: 0.65rem; opacity: 0.55; font-weight: 400; margin-top: 1px; }

  .prj-bench-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    align-items: center;
  }

  .prj-bench-meta {
    color: rgba(255,255,255,0.28);
    font-size: 0.63rem;
    line-height: 1.3;
  }

  .prj-bench-weight {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.02em;
  }

  .prj-bench-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 3px;
  }

  .prj-bench-flag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.02em;
  }

  .prj-bench-flag.cross { background: rgba(59,130,246,0.15); color: #93c5fd; }
  .prj-bench-flag.ext   { background: rgba(245,158,11,0.15); color: #fbbf24; }
  .prj-bench-flag.pending { background: rgba(168,85,247,0.15); color: #c084fc; }
  .prj-bench-flag.size  { background: rgba(139,92,246,0.15); color: #c4b5fd; }

  .prj-bench-meta-hi {
    color: rgba(255,255,255,0.55);
    font-size: 0.63rem;
    font-weight: 500;
    line-height: 1.3;
  }

  /* ── Benchmark-driven projection block ── */
  .prj-bench-proj-wrap {
    padding: 12px 14px 10px;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(74,222,128,0.12);
    background: rgba(74,222,128,0.07);
  }
  .prj-bench-proj-src {
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: rgba(255,255,255,0.30);
    margin-bottom: 7px;
  }
  .prj-bench-proj-src span {
    color: rgba(255,255,255,0.65);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }
  .prj-bench-proj-stats {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .prj-bench-proj-price {
    font-size: 1.30rem;
    font-weight: 800;
    color: #4ade80;
    line-height: 1.1;
  }
  .prj-bench-proj-rate { font-size: 0.88rem; font-weight: 700; }
  .prj-bench-proj-rate.pos { color: #4ade80; }
  .prj-bench-proj-rate.neg { color: #f87171; }
  .prj-bench-proj-rate.neutral { color: rgba(255,255,255,0.40); }
  .prj-bench-proj-total { font-size: 0.74rem; font-weight: 600; opacity: 0.75; }
  .prj-bench-proj-psm {
    font-size: 0.66rem;
    font-weight: 600;
    color: rgba(74,222,128,0.45);
  }
  .prj-bench-proj-note {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.22);
    margin-top: 2px;
  }
  .prj-launch-disclaimer {
    font-size: 0.57rem;
    color: rgba(234,179,8,0.80);
    padding: 5px 12px 5px;
    border-top: 1px solid rgba(234,179,8,0.14);
    border-bottom: 1px solid rgba(234,179,8,0.14);
    background: rgba(234,179,8,0.05);
  }
  .prj-bench-header {
    padding: 6px 12px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.25);
    border-top: 1px solid rgba(255,255,255,0.07);
    background: rgba(0,0,0,0.08);
  }

  .prj-note {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.38);
    line-height: 1.5;
    padding: 10px 14px;
    margin-top: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    text-align: center;
  }

  .prj-no-data {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.45);
    text-align: center;
    padding: 28px 16px;
    line-height: 1.5;
  }

  .prj-lock-wrap {
    position: relative;
  }

  .prj-layout-locked-section {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 8px;
  }

  .prj-layout-lock-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 14px 0 10px;
    text-align: center;
  }

  .prj-layout-lock-cta p {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    max-width: 280px;
    line-height: 1.45;
  }

  .prj-lock-fade {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, transparent, rgba(14,24,42,0.92));
    border-radius: 0 0 12px 12px;
    pointer-events: none;
    z-index: 2;
  }

  .prj-blurred {
    filter: blur(4px);
    user-select: none;
    pointer-events: none;
    opacity: 0.55;
  }

  .prj-upgrade-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 16px 0 4px;
    text-align: center;
  }

  .prj-lock-icon {
    width: 36px; height: 36px;
    background: rgba(201,162,39,0.15);
    border: 1.5px solid rgba(201,162,39,0.30);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #c9a227;
  }

  .prj-upgrade-cta p {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.55);
    margin: 0;
    max-width: 280px;
    line-height: 1.45;
  }

  .prj-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg,var(--prp-brand-gold) 0%,#dbb732 30%,#f6d365 60%,var(--prp-brand-gold) 100%);
    background-size: 200% 100%;
    color: #1e293b;
    font-size: 0.80rem;
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 14px;
    text-decoration: none;
    letter-spacing: 0.3px;
    box-shadow: 0 4px 16px rgba(201,162,39,0.25);
  }

  /* compat shim — keep .ai-predictions-sentiment for methodology modal */
  .ai-predictions-sentiment {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    letter-spacing: 0.01em;
  }

  /* Factors badges — kept for methodology modal */
  .ai-factor-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
  }

  .ai-benchmarks-label {
    font-weight: 500;
  }

  /* Prediction Methodology Modal — light theme */
  .pred-method-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15,23,42,0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .pred-method-overlay.show { display: flex; }

  .pred-method-card {
    background: #fff;
    border: 1.5px solid rgba(201,162,39,0.18);
    border-radius: 20px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px;
    position: relative;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12), 0 2px 16px rgba(201,162,39,0.06);
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.08) transparent;
  }
  .pred-method-card::-webkit-scrollbar { width: 5px; }
  .pred-method-card::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.08); border-radius: 4px; }

  .pred-method-close {
    position: absolute; top: 14px; right: 14px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(30,41,59,0.06); border: none;
    color: #64748b; font-size: 1.2rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
  }
  .pred-method-close:hover { background: rgba(30,41,59,0.12); color: #1e293b; }

  .pred-method-title {
    font-size: 1.05rem; font-weight: 700; color: #0f172a;
    margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
  }

  .pred-method-subtitle {
    font-size: 0.78rem; color: #64748b; margin-bottom: 20px; line-height: 1.5;
  }

  .pred-method-step {
    display: flex; gap: 14px; margin-bottom: 18px;
    padding: 14px 16px; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 12px;
    transition: background 0.2s;
  }
  .pred-method-step:hover { background: #f1f5f9; }

  .pred-method-num {
    flex-shrink: 0; width: 28px; height: 28px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 800; margin-top: 1px;
  }
  .pred-method-num.gold { background: linear-gradient(135deg, rgba(201,162,39,0.15), rgba(246,211,101,0.10)); color: #92700c; }
  .pred-method-num.green { background: rgba(16,185,129,0.12); color: #059669; }
  .pred-method-num.blue { background: rgba(59,130,246,0.12); color: #2563eb; }
  .pred-method-num.amber { background: rgba(245,158,11,0.12); color: #d97706; }
  .pred-method-num.purple { background: rgba(124,58,237,0.12); color: #7c3aed; }

  .pred-method-body h4 {
    font-size: 0.82rem; font-weight: 700; color: #1e293b; margin: 0 0 4px;
  }
  .pred-method-body p {
    font-size: 0.76rem; color: #475569; line-height: 1.55; margin: 0;
  }
  .pred-method-body .muted { color: #64748b; font-size: 0.74rem; font-style: italic; }

  .pred-method-divider {
    display: flex; align-items: center; margin: 20px 0 16px;
  }
  .pred-method-divider::before, .pred-method-divider::after { content: ''; flex: 1; height: 1px; background: #e2e8f0; }
  .pred-method-divider span { padding: 0 12px; color: #94a3b8; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700; white-space: nowrap; }

  .pred-method-disclaimer {
    font-size: 0.72rem; color: #94a3b8; line-height: 1.5;
    padding: 12px 14px; background: rgba(30,41,59,0.03);
    border: 1px solid #e2e8f0; border-radius: 10px;
  }
  .pred-method-disclaimer strong { color: #64748b; }

  .pred-method-info-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 12px 4px 9px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(201,162,39,0.14), rgba(246,211,101,0.10));
    border: 1.5px solid rgba(201,162,39,0.28);
    color: #92700c; font-size: 0.68rem; font-weight: 700;
    cursor: pointer; transition: all 0.25s; flex-shrink: 0;
    line-height: 1; letter-spacing: 0.01em;
    white-space: nowrap;
    animation: predInfoPulse 3s ease-in-out 1s 3;
  }
  .pred-method-info-btn .pred-info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; border-radius: 50%;
    background: rgba(201,162,39,0.18); font-size: 0.6rem;
    font-weight: 800; line-height: 1;
  }
  .pred-method-info-btn:hover {
    background: linear-gradient(135deg, rgba(201,162,39,0.24), rgba(246,211,101,0.16));
    border-color: rgba(201,162,39,0.40);
    color: #7a5c0a; transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(201,162,39,0.15);
  }
  @keyframes predInfoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,162,39,0); }
    50% { box-shadow: 0 0 0 5px rgba(201,162,39,0.12); }
  }

  @media (max-width: 576px) {
    .pred-method-overlay { padding: 10px; }
    .pred-method-card { padding: 20px 16px; max-height: 92vh; border-radius: 16px; }
    .pred-method-title { font-size: 1.1rem; }
    .pred-method-subtitle { font-size: 0.82rem; margin-bottom: 18px; }
    .pred-method-step { flex-direction: column; gap: 8px; padding: 14px; }
    .pred-method-num { width: 26px; height: 26px; font-size: 0.7rem; }
    .pred-method-body h4 { font-size: 0.88rem; margin-bottom: 6px; }
    .pred-method-body p { font-size: 0.82rem; line-height: 1.6; }
    .pred-method-body .muted { font-size: 0.76rem; }
    .pred-method-divider span { font-size: 0.72rem; }
    .pred-method-disclaimer { font-size: 0.78rem; padding: 14px; }
    .pred-method-close { width: 36px; height: 36px; font-size: 1.3rem; top: 10px; right: 10px; }
  }

  @media (min-width: 577px) {
    .pred-method-card { max-width: 580px; padding: 32px; }
    .pred-method-title { font-size: 1.12rem; }
    .pred-method-subtitle { font-size: 0.84rem; line-height: 1.6; margin-bottom: 24px; }
    .pred-method-step { padding: 16px 18px; gap: 16px; margin-bottom: 14px; }
    .pred-method-num { width: 30px; height: 30px; font-size: 0.74rem; }
    .pred-method-body h4 { font-size: 0.88rem; margin-bottom: 6px; }
    .pred-method-body p { font-size: 0.82rem; line-height: 1.65; }
    .pred-method-body .muted { font-size: 0.74rem; margin-top: 6px; display: block; }
    .pred-method-disclaimer { font-size: 0.78rem; padding: 14px 16px; line-height: 1.6; }
  }

  .ai-benchmark-item {
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 3px;
  }

  /* Light-theme overrides for projection section */
  #prkPricePredictions .prj-wrap {
    background: linear-gradient(145deg, #fffdf5 0%, #fdf6e3 55%, #fef9ed 100%);
    border: 1.5px solid rgba(201,162,39,0.45);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.8) inset, 0 4px 24px rgba(201,162,39,0.12), 0 1px 4px rgba(0,0,0,0.06);
  }
  #prkPricePredictions .prj-title { color: #0f172a; }
  #prkPricePredictions .prj-meta-pill.handover { background: rgba(201,162,39,0.10); color: #92700c; border-color: rgba(201,162,39,0.20); }
  #prkPricePredictions .prj-meta-pill.months { background: rgba(30,41,59,0.06); color: #475569; }
  #prkPricePredictions .prj-layout-label { color: #94a3b8; }
  #prkPricePredictions .prj-layout-label::after { background: rgba(201,162,39,0.20); }
  #prkPricePredictions .prj-cluster-card { background: #ffffff; border-color: rgba(201,162,39,0.18); box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
  #prkPricePredictions .prj-cluster-card:hover { border-color: rgba(201,162,39,0.38); box-shadow: 0 4px 16px rgba(201,162,39,0.10); }
  #prkPricePredictions .prj-card-head { background: rgba(201,162,39,0.04); border-bottom-color: rgba(201,162,39,0.12); }
  #prkPricePredictions .prj-head-stat-val { color: #1e293b; }
  #prkPricePredictions .prj-head-stat-lbl { color: #b0bac8; }
  #prkPricePredictions .prj-head-stat + .prj-head-stat { border-left-color: rgba(0,0,0,0.07); }
  #prkPricePredictions .prj-star { background: rgba(201,162,39,0.15); color: #92700c; }
  #prkPricePredictions .prj-benches-toggle { color: #94a3b8; border-top-color: rgba(0,0,0,0.06); }
  #prkPricePredictions .prj-benches-toggle:hover { color: #64748b; background: rgba(0,0,0,0.02); }
  #prkPricePredictions .prj-bench-list { background: #f8fafc; border-top-color: rgba(0,0,0,0.06); }
  #prkPricePredictions .prj-bench-item { border-bottom-color: rgba(0,0,0,0.05); }
  #prkPricePredictions .prj-bench-item:hover { background: rgba(0,0,0,0.025); }
  #prkPricePredictions .prj-bench-item.prj-bench-selected { background: rgba(22,163,74,0.08); padding-left: 12px; }
  #prkPricePredictions .prj-bench-item.prj-bench-selected::before { background: #16a34a; }
  #prkPricePredictions .prj-bench-sel-badge { color: #1e293b; background: rgba(15,23,42,0.12); border-color: rgba(15,23,42,0.25); }
  #prkPricePredictions .prj-bench-sel-hint { color: rgba(0,0,0,0.28); }
  #prkPricePredictions .prj-bench-item:not(.prj-bench-selected):hover .prj-bench-sel-hint { color: rgba(0,0,0,0.6); }
  #prkPricePredictions .prj-bench-name { color: #334155; }
  #prkPricePredictions .prj-bench-name a { color: inherit; text-decoration: none; }
  #prkPricePredictions .prj-bench-name:hover { color: #0f172a; }
  #prkPricePredictions .prj-bench-meta { color: #94a3b8; }
  #prkPricePredictions .prj-bench-meta-hi { color: #475569; font-weight: 500; }
  #prkPricePredictions .prj-bench-rate.pos { color: #16a34a; }
  #prkPricePredictions .prj-bench-rate.neg { color: #dc2626; }
  #prkPricePredictions .prj-bench-rate.neutral { color: #64748b; }
  #prkPricePredictions .prj-layout-lock-cta p { color: rgba(0,0,0,0.45); }
  #prkPricePredictions .prj-bench-weight { background: rgba(30,41,59,0.06); color: #64748b; }
  #prkPricePredictions .prj-bench-flag.cross { background: rgba(59,130,246,0.10); color: #3b82f6; }
  #prkPricePredictions .prj-bench-flag.ext   { background: rgba(245,158,11,0.10); color: #d97706; }
  #prkPricePredictions .prj-bench-flag.pending { background: rgba(168,85,247,0.10); color: #9333ea; }
  #prkPricePredictions .prj-bench-flag.size  { background: rgba(139,92,246,0.10); color: #7c3aed; }
  #prkPricePredictions .prj-bench-proj-wrap { background: rgba(22,163,74,0.05); border-top-color: rgba(0,0,0,0.06); border-bottom-color: rgba(22,163,74,0.14); }
  #prkPricePredictions .prj-bench-proj-src { color: #94a3b8; }
  #prkPricePredictions .prj-bench-proj-src span { color: #334155; }
  #prkPricePredictions .prj-bench-proj-price { color: #16a34a; }
  #prkPricePredictions .prj-bench-proj-rate.pos { color: #16a34a; }
  #prkPricePredictions .prj-bench-proj-rate.neg { color: #dc2626; }
  #prkPricePredictions .prj-bench-proj-rate.neutral { color: #64748b; }
  #prkPricePredictions .prj-bench-proj-psm { color: rgba(22,163,74,0.60); }
  #prkPricePredictions .prj-bench-proj-note { color: #b0bac8; }
  #prkPricePredictions .prj-launch-disclaimer { color: #b45309; background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.18); }
  #prkPricePredictions .prj-bench-header { color: #94a3b8; background: rgba(0,0,0,0.02); border-top-color: rgba(0,0,0,0.06); }
  #prkPricePredictions .prj-note { color: #64748b; background: rgba(30,41,59,0.04); border-color: rgba(30,41,59,0.08); }
  #prkPricePredictions .prj-no-data { color: #64748b; }
  #prkPricePredictions .prj-lock-icon { background: rgba(201,162,39,0.10); border-color: rgba(201,162,39,0.28); color: #c9a227; }
  #prkPricePredictions .prj-upgrade-cta p { color: #475569; }
  #prkPricePredictions .prj-lock-fade { background: linear-gradient(to bottom, rgba(255,253,245,0), rgba(255,253,245,0.95)); }
  #prkPricePredictions .prj-blurred { opacity: 0.4; }

  /* ── Mobile overrides for Price Projection section ── */
  @media (max-width: 600px) {
    /* APREX badge: float on top-center border of card */
    #prkPricePredictions .prj-wrap {
      padding: 8px 10px 12px;
      margin-top: 26px;
      overflow: visible;
    }
    #prkPricePredictions .prj-header { margin-bottom: 0; }
    #prkPricePredictions .prj-meta { margin-top: 4px; margin-bottom: 10px; }
    #prkPricePredictions .prj-title { height: 0; overflow: visible; margin: 0; min-height: 0; }
    #prkPricePredictions .aprex-badge-full {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      margin-left: 0 !important;
      font-size: 0.60rem;
      padding: 3px 12px;
      letter-spacing: 0.05em;
      white-space: nowrap;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }
    #prkPricePredictions .prj-card-head { padding: 8px 10px; }
    #prkPricePredictions .prj-bench-proj-wrap { padding: 10px 12px 8px; }
    #prkPricePredictions .prj-bench-list { padding: 4px 8px 8px; }

    /* 3-col header: allow value to wrap to 2 lines instead of truncating */
    #prkPricePredictions .prj-head-stat-val {
      white-space: normal;
      font-size: 0.72rem;
      line-height: 1.25;
    }
    #prkPricePredictions .prj-head-stat-lbl { font-size: 0.62rem; }

    /* Comparable project row: name takes full width, rate wraps below */
    .prj-bench-row {
      flex-wrap: wrap;
      align-items: center;
      gap: 2px 6px;
    }
    .prj-bench-name {
      flex: 1 1 100%;
      order: 1;
    }
    .prj-bench-rate {
      order: 2;
      flex: 1;
      font-size: 0.72rem;
    }
    .prj-bench-sel-badge,
    .prj-bench-sel-hint {
      order: 3;
    }

    /* Projected price: tighter row */
    .prj-bench-proj-price { font-size: 1.15rem; }
    .prj-bench-proj-stats { gap: 8px; margin-bottom: 4px; }

    /* Metadata rows */
    .prj-bench-meta,
    .prj-bench-meta-hi { font-size: 0.68rem; }
    .prj-bench-detail { gap: 3px; margin-top: 3px; }
  }

  /* Light-theme overrides for Active Listings inside prk-panel */
  #prkActiveListings .prk-card::before {
    content: 'PRO';
    position: absolute;
    top: 14px;
    right: 16px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #c9a227;
    background: linear-gradient(135deg, rgba(201,162,39,0.18), rgba(246,211,101,0.12));
    border: 1px solid rgba(201,162,39,0.30);
    padding: 3px 9px;
    border-radius: 6px;
  }
  #prkActiveListings .prk-card-sub { margin-bottom: 8px; }
  #prkActiveListings .prk-peer-filter-bar { margin-bottom: 6px !important; }
  #prkActiveListings .listing-type-group { margin-bottom: 10px; }
  #prkActiveListings .listing-type-header { padding: 6px 0; margin-bottom: 6px; }
  #prkActiveListings .listing-layout-group { margin-bottom: 6px; }
  #prkActiveListings .listing-item { background: #f8f9fa; border-color: #e2e5eb; }
  #prkActiveListings .listing-item:hover { background: #f1f5f9; border-color: #cdd2da; transform: translateX(3px); }
  #prkActiveListings .listing-title { color: #1a1f2e; }
  #prkActiveListings .listing-meta { color: #8b95a8; }
  #prkActiveListings .listing-type { color: #8b95a8; }
  #prkActiveListings .listing-arrow { color: #b0b7c3; }
  #prkActiveListings .listing-type-header { color: #1a1f2e; border-color: #e2e5eb; }
  #prkActiveListings .listing-layout-label { color: #8b95a8; }
  #prkActiveListings .listings-footer { border-color: #e2e5eb; }
  #prkActiveListings .listings-empty { color: #8b95a8; }
  #prkActiveListings .listings-empty p { color: #8b95a8; }
  #prkActiveListings .listings-empty span { color: #b0b7c3 !important; }
  #prkActiveListings .listings-loading .spinner { border-color: #dee2e6; border-top-color: #198754; }
  #prkActiveListings .ai-loading-progress .step { background: #dee2e6; }

  .prk-listings-count-badge { display: inline-flex; align-items: center; justify-content: center; background: #e2e5eb; color: #5a6478; font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 20px; margin-left: 2px; }
  .prk-listings-scroll { max-height: 320px; overflow-y: auto; padding-right: 4px; }
  .prk-listings-scroll::-webkit-scrollbar { width: 4px; }
  .prk-listings-scroll::-webkit-scrollbar-track { background: transparent; }
  .prk-listings-scroll::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 4px; }
  .prk-listings-scroll::-webkit-scrollbar-thumb:hover { background: #b0b7c3; }

  .ai-benchmark-item .positive { color: var(--prp-brand-green); font-weight: 600; }
  .ai-benchmark-item .negative { color: var(--prp-brand-danger); font-weight: 600; }

  .ai-predictions-disclaimer {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    line-height: 1.6;
    margin-top: 10px;
    border-left: 2px solid rgba(255, 255, 255, 0.08);
  }

  .ai-predictions-disclaimer strong {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
  }

  .ai-predictions-upgrade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(34, 211, 238, 0.06) 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 8px;
    margin: 12px 0;
  }

  .ai-predictions-upgrade span {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.8);
  }

  .ai-upgrade-btn {
    font-size: 0.65rem;
    padding: 6px 16px;
    background: linear-gradient(135deg, #1FAD5D 0%, #86efac 100%);
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(31, 173, 93, 0.3);
  }

  .ai-upgrade-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 173, 93, 0.4);
  }

  /* Admin Controls */
  .ai-admin-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
  }

  .ai-refresh-btn {
    font-size: 0.68rem;
    padding: 4px 10px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.25);
    color: var(--prp-brand-teal);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .ai-refresh-btn:hover:not(:disabled) {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.4);
  }

  .ai-refresh-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .ai-refresh-btn.loading {
    position: relative;
    color: transparent;
  }

  .ai-refresh-btn.loading::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid rgba(14, 165, 233, 0.3);
    border-top-color: var(--prp-brand-teal);
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
  }

  @keyframes ai-spin {
    to { transform: rotate(360deg); }
  }

  /* AI Content Loading Overlay */
  .ai-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
    border-radius: 8px;
  }

  .ai-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(14, 165, 233, 0.2);
    border-top-color: var(--prp-brand-teal);
    border-radius: 50%;
    animation: ai-spin 0.8s linear infinite;
  }

  .ai-loading-text {
    color: var(--prp-brand-teal);
    font-size: 0.75rem;
    font-weight: 500;
  }

  /* Premium Blur for Price Predictions */
  .ai-predictions-content {
    position: relative;
  }

  .ai-predictions-blur {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
  }

  .ai-predictions-upgrade {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(34, 211, 238, 0.05) 100%);
    border: 1px solid rgba(14, 165, 233, 0.15);
    border-radius: 6px;
    margin: 8px 0;
  }

  .ai-predictions-upgrade span {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.7);
  }

  .ai-upgrade-btn {
    font-size: 0.68rem;
    padding: 4px 12px;
    background: linear-gradient(135deg, #1FAD5D 0%, #86efac 100%);
    color: white;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
  }

  .ai-upgrade-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(31, 173, 93, 0.3);
  }

  .ai-insights-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    flex-shrink: 0;
  }

  .ai-insights-header svg {
    color: var(--prp-brand-teal);
    width: 16px;
    height: 16px;
  }

  .ai-insights-placeholder {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 40px;
  }
  
  .coming-soon-badge {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--prp-brand-teal);
    background: rgba(14, 165, 233, 0.1);
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  
  .ai-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 30px;
  }
  
  .ai-placeholder p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    font-weight: 450;
  }
  
  .ai-subtext {
    color: var(--text-muted);
    font-size: 0.72rem;
    max-width: 260px;
    line-height: 1.4;
  }

  /* AI Insights Content Styles */
  .ai-insights-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 16px;
    color: rgba(255, 255, 255, 0.5);
    min-height: 200px;
  }

  .ai-loading-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.2s ease;
  }

  .ai-loading-step.active {
    color: rgba(255, 255, 255, 0.85);
    transform: scale(1.02);
  }

  .ai-loading-step.completed {
    color: var(--prp-brand-green);
  }

  .ai-loading-step .step-icon {
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
  }

  .ai-loading-step .spinner {
    width: 12px;
    height: 12px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-top-color: var(--prp-brand-teal);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }

  .ai-loading-step.completed .step-icon::before {
    content: '✓';
  }

  .ai-loading-step.pending .step-icon::before {
    content: '○';
    opacity: 0.35;
  }

  /* AI Help Button */
  .ai-help-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.25);
    color: rgba(14, 165, 233, 0.8);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    margin-left: auto;
  }

  .ai-help-btn:hover {
    background: rgba(14, 165, 233, 0.2);
    border-color: rgba(14, 165, 233, 0.4);
    color: #fff;
  }

  /* AI Help Modal */
  .ai-help-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }

  .ai-help-modal.show {
    display: flex;
  }

  .ai-help-content {
    background: linear-gradient(135deg, #1e1e2e 0%, #2d2d44 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    padding: 24px;
    position: relative;
  }

  .ai-help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
  }

  .ai-help-close:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  .ai-help-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .ai-help-title svg {
    color: var(--prp-brand-teal);
  }

  .ai-help-section {
    margin-bottom: 16px;
  }

  .ai-help-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
  }

  .ai-help-section p {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    margin: 0;
  }

  .ai-help-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: rgba(14, 165, 233, 0.9);
    margin-top: 8px;
  }

  .ai-facts-section {
    margin-bottom: 16px;
  }

  .ai-facts-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .ai-title-appreciation {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
  }

  .ai-title-appreciation.positive {
    color: var(--prp-brand-green);
    background: rgba(74, 222, 128, 0.15);
  }

  .ai-title-appreciation.negative {
    color: var(--prp-brand-danger);
    background: rgba(31, 173, 93, 0.15);
  }

  .ai-title-appreciation.neutral {
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.08);
  }

  .ai-overall-stat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 12px;
  }

  .ai-overall-stat .label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
  }

  .ai-overall-stat .value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--prp-brand-green);
  }

  .ai-overall-stat .value.negative {
    color: var(--prp-brand-danger);
  }

  .ai-overall-stat .value.neutral {
    color: rgba(255, 255, 255, 0.5);
  }

  .ai-layout-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .ai-layout-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.15s;
  }

  .ai-layout-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
  }

  .ai-layout-name {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
  }

  .ai-layout-meta {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.4);
  }

  .ai-layout-appreciation {
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: auto;
  }

  .ai-layout-appreciation.positive { color: var(--prp-brand-green); }
  .ai-layout-appreciation.negative { color: var(--prp-brand-danger); }
  .ai-layout-appreciation.neutral { color: rgba(255, 255, 255, 0.5); }

  .ai-price-example {
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06), rgba(34, 211, 238, 0.04));
    border-radius: 12px;
    border: 1px solid rgba(14, 165, 233, 0.12);
    margin-top: 14px;
  }

  .ai-price-example-title {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--prp-brand-teal);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
  }

  .ai-price-example-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
  }

  .ai-price-example-text strong {
    color: #ffffff;
    font-weight: 600;
  }

  .ai-price-example-text .positive {
    color: var(--prp-brand-green);
    font-weight: 600;
  }

  .ai-price-example-text .negative {
    color: var(--prp-brand-danger);
    font-weight: 600;
  }

  /* Unused styles removed - using new ai-example-* structure */

  .ai-nearby-section {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
    margin-top: 4px;
  }

  .ai-nearby-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ai-nearby-item {
    display: flex;
    flex-direction: column;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.15s;
    cursor: pointer;
  }

  .ai-nearby-item:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
  }

  .ai-nearby-item.same-developer {
    border-left: 2px solid var(--prp-brand-teal);
    background: rgba(14, 165, 233, 0.04);
  }

  .ai-nearby-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .ai-nearby-meta {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.45);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
  }

  .ai-no-data {
    text-align: center;
    padding: 16px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
  }

  .ai-no-data small {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    font-weight: 400;
  }

  .ai-early-stage-banner {
    padding: 10px 14px;
    margin-bottom: 10px;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 6px;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
  }

  /* Top Performing Investments Styles */
  .ai-price-examples {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .ai-price-example-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }

  .ai-price-example-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .ai-price-example-item:first-of-type {
    padding-top: 0;
  }

  .ai-example-rank {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--prp-brand-teal);
    background: rgba(14, 165, 233, 0.12);
    padding: 2px 5px;
    border-radius: 3px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
  }

  .ai-example-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .ai-example-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .ai-example-header strong {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.72rem;
  }

  .ai-invested-date {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
  }

  .ai-example-returns {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }

  .ai-return-premium {
    font-size: 0.78rem;
    font-weight: 700;
  }

  .ai-return-premium.positive {
    color: var(--prp-brand-green);
  }

  .ai-return-premium.negative {
    color: var(--prp-brand-danger);
  }

  .ai-return-duration {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 3px;
    font-weight: 500;
  }

  .ai-return-percent {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 3px;
  }

  .ai-return-percent.positive {
    color: var(--prp-brand-green);
    background: rgba(74, 222, 128, 0.12);
  }

  .ai-return-percent.negative {
    color: var(--prp-brand-danger);
    background: rgba(31, 173, 93, 0.12);
  }

  .ai-example-prices {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.45);
  }

  /* Same Developer Highlight */
  .same-dev-highlight {
    color: var(--prp-brand-teal);
    font-weight: 600;
  }

  /* Nearby Project Header & Breakdown */
  .ai-nearby-header {
    margin-bottom: 4px;
  }

  .ai-nearby-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
  }

  .ai-breakdown-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.62rem;
  }

  .ai-breakdown-type {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
  }

  .ai-breakdown-app {
    font-weight: 700;
  }

  .ai-breakdown-app.positive { color: var(--prp-brand-green); }
  .ai-breakdown-app.negative { color: var(--prp-brand-danger); }
  .ai-breakdown-app.neutral { color: rgba(255, 255, 255, 0.6); }

  .ai-nearby-breakdown .neutral {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.65rem;
    font-weight: 500;
  }

  @media (max-width: 1199px) {
    .ai-insights-card {
      height: auto;
      max-height: none;
    }
  }
  
  /* Full-width Listings Section */
  .listings-section {
    margin-top: 28px;
  }
  
  .listings-card.full-width {
    max-height: 450px;
  }
  
  .listings-card.full-width .listings-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    overflow-y: auto;
    padding-right: 5px;
  }
  
  .listings-card.full-width .listings-placeholder {
    grid-column: 1 / -1;
    min-height: 200px;
  }
  
  .listings-card.full-width .listings-loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
  }
  
  .listings-card.full-width .listings-empty {
    grid-column: 1 / -1;
  }
  
  /* Insight Items */
  .insight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.2s ease;
  }
  
  .insight-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  
  .insight-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .insight-icon.primary {
    background: rgba(52, 211, 153, 0.12);
    color: var(--accent-emerald);
  }
  
  .insight-icon.secondary {
    background: rgba(251, 113, 133, 0.12);
    color: var(--accent-coral);
  }
  
  .insight-icon.trend {
    background: rgba(14, 165, 233, 0.12);
    color: var(--prp-brand-teal);
  }
  
  .insight-icon svg {
    width: 16px;
    height: 16px;
  }
  
  .insight-content {
    flex: 1;
    min-width: 0;
  }
  
  .insight-title {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 5px;
  }
  
  .insight-value {
    font-size: 0.92rem;
    color: var(--text-primary);
    font-weight: 450;
    line-height: 1.5;
  }
  
  .insight-value .highlight {
    color: var(--accent-gold);
    font-weight: 500;
  }
  
  .insight-value .primary-text {
    color: var(--accent-emerald);
  }
  
  .insight-value .secondary-text {
    color: var(--accent-coral);
  }
  
  .top-months-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }
  
  .month-tag {
    background: rgba(251, 113, 133, 0.1);
    color: var(--accent-coral);
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  
  /* Map Card - Modal only */
  .map-card {
    background: var(--bg-card);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-subtle);
    transition: all 0.4s var(--transition-smooth);
    display: flex;
    flex-direction: column;
    /* Hidden by default, shown as modal */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 90vw;
    height: 85vh;
    max-width: 1100px;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    border-radius: var(--radius-xl);
  }
  
  .map-card.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
  }
  
  .map-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  
  .map-header-content {
    flex: 1;
    min-width: 0;
  }
  
  .map-actions {
    display: flex;
    gap: 8px;
  }
  
  .map-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  
  .map-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
    color: var(--text-primary);
  }
  
  .map-btn.active {
    background: rgba(31, 173, 93, 0.1);
    border-color: rgba(31, 173, 93, 0.25);
    color: var(--accent-gold);
  }
  
  .map-container {
    flex: 1;
    min-height: 0;
    background: #080810;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #projectMap {
    width: 100%;
    height: 100%;
  }

  /* Current-project marker InfoWindow card — replaces Google's plain default bubble. */
  .pmap-info {
    padding: 2px 2px 4px;
    min-width: 190px;
    max-width: 240px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
  .pmap-info-top {
    display: flex; align-items: center; gap: 6px;
    font-size: .65rem; font-weight: 700; color: #1FAD5D;
    text-transform: uppercase; letter-spacing: .04em;
    margin-bottom: 5px;
  }
  .pmap-info-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: #1FAD5D; box-shadow: 0 0 0 3px rgba(31,173,93,.18);
  }
  .pmap-info-name { font-size: 1rem; font-weight: 700; color: #111827; line-height: 1.25; margin-bottom: 2px; }
  .pmap-info-dev { font-size: .78rem; color: #6b7280; margin-bottom: 8px; }
  .pmap-info-chips { display: flex; flex-wrap: wrap; gap: 5px; }
  .pmap-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 600; color: #374151;
    background: #f8fafc; border: 1px solid #e5e7eb; border-radius: 20px;
    padding: 3px 9px; white-space: nowrap; line-height: 1.3;
  }
  .pmap-chip svg { flex-shrink: 0; color: #94a3b8; }
  .pmap-chip.pmap-chip-accent { color: #92400e; background: #fffbeb; border-color: #fde68a; }
  .pmap-chip.pmap-chip-accent svg { color: #d97706; }

  .map-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
  }
  
  .map-address {
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .map-address svg {
    color: var(--accent-gold);
    flex-shrink: 0;
    opacity: 0.8;
  }
  
  /* Sales Summary Card */
  .sales-card {
    background: #fff;
    border: 1px solid #e2e5eb;
    border-radius: 14px;
    padding: 20px 22px;
    overflow: visible;
    transition: border-color 0.2s;
  }

  .sales-card:hover {
    border-color: #cdd2da;
  }
  
  .sales-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .sales-title {
    color: #1a1f2e;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: -0.025em;
  }
  
  .sales-title svg {
    color: var(--accent-gold);
  }
  
  /* Filter Pills */
  .filter-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  
  .filter-pill {
    position: relative;
  }
  
  .filter-pill select {
    appearance: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px 36px 10px 14px;
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.25s ease;
    min-width: 130px;
    font-weight: 450;
    letter-spacing: -0.01em;
  }
  
  .filter-pill select:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-hover);
  }
  
  .filter-pill select:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 3px rgba(31, 173, 93, 0.08);
  }
  
  .filter-pill::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--text-muted);
    pointer-events: none;
  }
  
  /* Compact Sales Stats */
  .sales-stats-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 18px;
    margin-bottom: 16px;
    background: #f8f9fa;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
  }
  
  .sales-stats-compact .stats-left {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  
  .sales-stats-compact .total-transactions {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  
  .sales-stats-compact .total-count {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
  }
  
  .sales-stats-compact .total-label {
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  
  .sales-stats-compact .breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 16px;
    border-left: 1px solid var(--border-subtle);
  }
  
  .sales-stats-compact .breakdown-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  
  .sales-stats-compact .breakdown-item span:not(.dot) {
    color: var(--text-secondary);
  }
  
  .sales-stats-compact .breakdown-divider {
    color: var(--border-hover);
    font-size: 0.68rem;
    width: 6px;
    height: 6px;
    border-radius: 2px;
  }
  
  .sales-stats-compact .dot.primary {
    background: #34d399;
  }

  .sales-stats-compact .dot.secondary {
    background: #fb7185;
  }
  
  .sales-stats-compact .stats-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .sales-stats-compact .timeline-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
  }
  
  .sales-stats-compact .timeline-dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
    flex-shrink: 0;
  }
  
  .sales-stats-compact .timeline-dot.primary {
    background: #34d399;
  }

  .sales-stats-compact .timeline-dot.secondary {
    background: #fb7185;
  }
  
  .sales-stats-compact .timeline-type {
    color: var(--text-secondary);
    font-weight: 500;
    min-width: 65px;
  }
  
  .sales-stats-compact .timeline-data {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .sales-stats-compact .timeline-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .sales-stats-compact .timeline-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }
  
  .sales-stats-compact .timeline-value {
    color: var(--text-secondary);
  }
  
  .sales-stats-compact .timeline-value.highlight {
    color: var(--text-primary);
    font-weight: 600;
  }
  
  .sales-stats-compact .timeline-sep {
    color: var(--border-hover);
    font-size: 0.7rem;
  }
  
  .sales-stats-compact .no-resales-text {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.72rem;
  }
  
  @media (max-width: 768px) {
    .sales-stats-compact {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    
    .sales-stats-compact .stats-left {
      flex-wrap: wrap;
    }
    
    .sales-stats-compact .breakdown {
      border-left: none;
      padding-left: 0;
    }
  }
  
  /* Legacy - keeping for reference, can be removed */
  /* Sales Stats Row - 3 Cards */
  .sales-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
  }
  
  @media (max-width: 992px) {
    .sales-stats-row {
      grid-template-columns: 1fr;
    }
  }
  
  /* Transaction Summary Card */
  .transaction-summary-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    transition: all 0.25s ease;
  }
  
  .transaction-summary-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-hover);
  }
  
  .transaction-summary-card .card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .transaction-summary-card .card-header i {
    color: var(--accent-blue);
    font-size: 0.7rem;
  }
  
  .transaction-summary-card .card-header span {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  
  .transaction-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .stat-row .stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  
  .stat-row .stat-label .dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
  }
  
  .stat-row .stat-label .dot.primary {
    background: var(--accent-emerald);
  }
  
  .stat-row .stat-label .dot.secondary {
    background: var(--accent-coral);
  }
  
  .stat-row .stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
  }
  
  .stat-row.total .stat-value {
    font-size: 1.2rem;
    font-weight: 700;
  }
  
  .stat-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 0;
  }
  
  .stat-row.price-row .stat-label {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .stat-row.price-row .price-value {
    color: #1FAD5D;
    font-weight: 600;
  }
  
  .stat-value.positive {
    color: var(--prp-brand-green);
  }
  
  .stat-value.negative {
    color: var(--prp-brand-danger);
  }
  
  /* Sales Insights Cards */
  .sales-insight-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    transition: all 0.25s ease;
  }
  
  .sales-insight-card:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--border-hover);
  }
  
  .sales-insight-card.primary-card {
    border-left: 3px solid var(--accent-emerald);
  }
  
  .sales-insight-card.secondary-card {
    border-left: 3px solid var(--accent-coral);
  }
  
  .insight-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-subtle);
  }
  
  .insight-card-header .dot {
    width: 6px;
    height: 6px;
    border-radius: 2px;
  }
  
  .insight-card-header .dot.primary {
    background: var(--accent-emerald);
  }
  
  .insight-card-header .dot.secondary {
    background: var(--accent-coral);
  }
  
  .insight-card-header .dot.price {
    background: var(--accent-robin);
  }
  
  .insight-value.price-highlight {
    color: var(--accent-robin);
    font-weight: 500;
  }
  
  .insight-card-title {
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  
  .insight-card-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  
  .insight-card-no-data {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
  }
  
  .insight-card-no-data svg {
    flex-shrink: 0;
    color: var(--accent-emerald);
    opacity: 0.6;
  }
  
  .insight-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  
  .insight-label {
    font-size: 0.72rem;
    color: var(--text-muted);
  }
  
  .insight-value {
    font-size: 0.8rem;
    color: var(--text-primary);
    font-weight: 450;
  }
  
  .insight-value.highlight {
    color: var(--accent-gold);
  }
  
  .insight-value.positive {
    color: var(--accent-emerald);
  }
  
  .insight-value.negative {
    color: var(--accent-coral);
  }
  
  .top-months-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }
  
  .month-chip {
    font-size: 0.65rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.01em;
  }
  
  .month-chip.primary {
    background: rgba(52, 211, 153, 0.1);
    color: var(--accent-emerald);
  }
  
  .month-chip.secondary {
    background: rgba(251, 113, 133, 0.1);
    color: var(--accent-coral);
  }
  
  .month-chip .handover-tag {
    font-size: 0.62rem;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    letter-spacing: 0.02em;
  }
  
  /* Contribution Calendar */
  .calendar-section {
    margin-top: 12px;
    position: relative;
    z-index: 1;
  }
  
  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
  }
  
  .calendar-title {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 450;
    display: flex;
    align-items: center;
    gap: 18px;
    letter-spacing: -0.01em;
  }
  
  .calendar-date-range {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 400;
  }
  
  .calendar-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.75rem;
    color: var(--text-muted);
  }
  
  .calendar-legend-row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 14px;
  }
  
  .legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
  }
  
  /* Date Range Filters */
  .date-range-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: 24px;
    position: relative;
    z-index: 100;
  }
  
  .date-filter {
    display: flex;
    align-items: center;
    gap: 7px;
    position: relative;
  }
  
  .date-filter label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  
  .date-filter select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 7px 30px 7px 12px;
    cursor: pointer;
    min-width: 58px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='rgba(255,255,255,0.4)' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    position: relative;
    z-index: 100;
    transition: all 0.25s ease;
  }
  
  .date-filter select:hover {
    border-color: var(--border-hover);
    background-color: rgba(255, 255, 255, 0.06);
  }
  
  .date-filter select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px rgba(31, 173, 93, 0.08);
  }
  
  .date-filter select option {
    background: #14161f;
    color: var(--text-primary);
  }
  
  .date-filter select:focus {
    outline: none;
    border-color: rgba(255, 193, 7, 0.5);
  }
  
  .date-filter select:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
  }
  
  .date-filter-separator {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
  }
  
  /* Calendar Stats */
  .calendar-stats {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  
  .price-stat {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .price-stat-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  
  .price-stat-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-robin);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;
  }
  
  .price-stat-unit {
    font-size: 0.68rem;
    color: var(--text-muted);
  }
  
  .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
  }

  .legend-dot.primary {
    background: #34d399;
  }

  .legend-dot.secondary {
    background: #fb7185;
  }

  .legend-dot.empty {
    background: transparent;
    border: 1px solid #d1d5db;
  }
  
  .calendar-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.7rem;
    color: rgba(14, 165, 233, 0.75);
    padding: 8px 12px;
    margin: 8px 0 0;
    background: rgba(14, 165, 233, 0.06);
    border: 1px solid rgba(14, 165, 233, 0.12);
    border-radius: 8px;
  }

  .calendar-scroll-hint svg {
    color: rgba(14, 165, 233, 0.65);
    animation: calendarHintBounce 1.5s ease-in-out infinite;
  }

  @keyframes calendarHintBounce {
    0%, 100% { transform: rotate(180deg) translateX(0); }
    50% { transform: rotate(180deg) translateX(5px); }
  }

  /* Calendar Grid */
  .calendar-wrapper {
    overflow: visible;
    padding-bottom: 8px;
    position: relative;
    z-index: 10;
  }
  
  .calendar-scroll {
    overflow-x: auto;
    overflow-y: visible;
    padding-top: 100px;
    margin-top: -100px;
    padding-bottom: 20px;
    margin-bottom: -20px;
  }
  
  .calendar-grid {
    display: flex;
    gap: 3px;
    position: relative;
    isolation: isolate;
  }
  
  .calendar-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  
  .calendar-day {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
  }
  
  .calendar-day:hover {
    transform: scale(1.5);
    z-index: 99999;
  }
  
  .calendar-day.primary-1 { background: rgba(52, 211, 153, 0.25); border-color: rgba(52, 211, 153, 0.3); }
  .calendar-day.primary-2 { background: rgba(52, 211, 153, 0.45); border-color: rgba(52, 211, 153, 0.5); }
  .calendar-day.primary-3 { background: rgba(52, 211, 153, 0.65); border-color: rgba(52, 211, 153, 0.7); }
  .calendar-day.primary-4 { background: rgba(52, 211, 153, 0.85); border-color: rgba(52, 211, 153, 0.9); }
  
  .calendar-day.secondary-1 { background: rgba(251, 113, 133, 0.25); border-color: rgba(251, 113, 133, 0.3); }
  .calendar-day.secondary-2 { background: rgba(251, 113, 133, 0.45); border-color: rgba(251, 113, 133, 0.5); }
  .calendar-day.secondary-3 { background: rgba(251, 113, 133, 0.65); border-color: rgba(251, 113, 133, 0.7); }
  .calendar-day.secondary-4 { background: rgba(251, 113, 133, 0.85); border-color: rgba(251, 113, 133, 0.9); }
  
  .calendar-day.mixed { 
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.5) 0%, rgba(251, 113, 133, 0.5) 100%); 
    border-color: rgba(31, 173, 93, 0.4);
  }
  
  .calendar-day.has-sales:hover {
    box-shadow: 0 0 0 2px var(--accent-gold);
  }
  
  /* Price Calendar Specific Styles */
  .price-calendar-section {
    margin-top: 28px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 24px;
  }
  
  .price-appreciation {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
  }
  
  .appreciation-label {
    color: var(--text-muted);
  }
  
  .appreciation-value {
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.78rem;
    letter-spacing: 0.01em;
  }
  
  .appreciation-value.positive {
    color: var(--accent-emerald);
    background: rgba(52, 211, 153, 0.12);
  }
  
  .appreciation-value.negative {
    color: var(--accent-coral);
    background: rgba(251, 113, 133, 0.12);
  }
  
  .appreciation-value.neutral {
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.06);
  }
  
  .price-legend {
    gap: 22px !important;
  }
  
  .legend-gradient {
    display: flex;
    width: 48px;
    height: 12px;
    border-radius: 3px;
    overflow: hidden;
  }
  
  .legend-gradient span {
    flex: 1;
  }
  
  .legend-gradient .low {
    background: rgba(31, 173, 93, 0.25);
  }
  
  .legend-gradient .mid {
    background: rgba(31, 173, 93, 0.5);
  }
  
  .legend-gradient .high {
    background: rgba(31, 173, 93, 0.85);
  }
  
  .price-range-display {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
  }
  
  .price-range-display span {
    font-family: monospace;
  }
  
  .range-separator {
    color: rgba(255, 255, 255, 0.3);
  }
  
  /* Price Calendar Day Colors */
  .calendar-day.price-1 { background: rgba(31, 173, 93, 0.2); border-color: rgba(31, 173, 93, 0.3); }
  .calendar-day.price-2 { background: rgba(31, 173, 93, 0.35); border-color: rgba(31, 173, 93, 0.45); }
  .calendar-day.price-3 { background: rgba(31, 173, 93, 0.5); border-color: rgba(31, 173, 93, 0.6); }
  .calendar-day.price-4 { background: rgba(31, 173, 93, 0.65); border-color: rgba(31, 173, 93, 0.75); }
  .calendar-day.price-5 { background: rgba(31, 173, 93, 0.85); border-color: rgba(31, 173, 93, 0.95); }
  
  .calendar-day.has-price:hover {
    box-shadow: 0 0 0 2px #1FAD5D;
  }
  
  /* Fixed Tooltip */
  #calendarTooltip {
    position: fixed;
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #e2e5eb;
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 0.78rem;
    color: #5a6478;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 99999;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    pointer-events: none;
  }

  #calendarTooltip.show {
    opacity: 1;
    visibility: visible;
  }

  .tooltip-date {
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a1f2e;
    font-size: 0.85rem;
  }

  .tooltip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 5px;
    font-size: 0.8rem;
  }

  .tooltip-dot {
    width: 8px;
    height: 8px;
    border-radius: 3px;
  }

  .tooltip-dot.primary { background: #34d399; }
  .tooltip-dot.secondary { background: #fb7185; }
  .tooltip-dot.price { background: #3b82f6; }

  .tooltip-divider {
    height: 1px;
    background: #e2e5eb;
    margin: 8px 0;
  }

  .tooltip-row.price {
    color: #3b82f6;
    font-weight: 500;
  }
  
  /* Month Labels */
  .calendar-months {
    position: relative;
    height: 20px;
    margin-bottom: 10px;
  }
  
  .month-label {
    position: absolute;
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    transition: all 0.3s ease;
  }
  
  .month-label.year-label {
    color: var(--accent-gold);
    font-weight: 500;
  }
  
  .month-label.glow-primary {
    color: var(--accent-emerald);
    font-weight: 500;
    text-shadow: 0 0 8px rgba(52, 211, 153, 0.5),
                0 0 16px rgba(52, 211, 153, 0.3),
                0 0 24px rgba(52, 211, 153, 0.15);
    animation: glow-primary-pulse 2s ease-in-out infinite;
  }
  
  @keyframes glow-primary-pulse {
    0%, 100% {
      text-shadow: 0 0 8px rgba(74, 222, 128, 0.6),
                  0 0 16px rgba(74, 222, 128, 0.4);
    }
    50% {
      text-shadow: 0 0 12px rgba(74, 222, 128, 0.8),
                  0 0 24px rgba(74, 222, 128, 0.5),
                  0 0 36px rgba(74, 222, 128, 0.3);
    }
  }
  
  .month-label.glow-secondary {
    color: var(--prp-brand-amber);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(251, 146, 60, 0.6),
                0 0 16px rgba(251, 146, 60, 0.4),
                0 0 24px rgba(251, 146, 60, 0.2);
    animation: glow-secondary-pulse 2s ease-in-out infinite;
  }
  
  @keyframes glow-secondary-pulse {
    0%, 100% {
      text-shadow: 0 0 8px rgba(251, 146, 60, 0.6),
                  0 0 16px rgba(251, 146, 60, 0.4);
    }
    50% {
      text-shadow: 0 0 12px rgba(251, 146, 60, 0.8),
                  0 0 24px rgba(251, 146, 60, 0.5),
                  0 0 36px rgba(251, 146, 60, 0.3);
    }
  }
  
  .month-label.glow-mixed {
    color: var(--prp-brand-amber);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6),
                0 0 16px rgba(251, 191, 36, 0.4),
                0 0 24px rgba(251, 191, 36, 0.2);
    animation: glow-mixed-pulse 2s ease-in-out infinite;
  }
  
  @keyframes glow-mixed-pulse {
    0%, 100% {
      text-shadow: 0 0 8px rgba(251, 191, 36, 0.6),
                  0 0 16px rgba(251, 191, 36, 0.4);
    }
    50% {
      text-shadow: 0 0 12px rgba(251, 191, 36, 0.8),
                  0 0 24px rgba(251, 191, 36, 0.5),
                  0 0 36px rgba(251, 191, 36, 0.3);
    }
  }
  
  /* No Data State */
  .no-data {
    text-align: center;
    padding: 48px 24px;
    color: rgba(255, 255, 255, 0.4);
  }
  
  .no-data svg {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
    opacity: 0.3;
  }
  
  .no-data p {
    margin: 0;
    font-size: 0.95rem;
  }
  
  /* Map Overlay for maximized state */
  .map-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .map-overlay.show {
    opacity: 1;
    visibility: visible;
  }

  /* ═══════════════ Comprehensive Mobile Responsive ═══════════════ */
  
  /* Tablet */
  @media (max-width: 991px) {
    .project-content-band {
      padding-bottom: 60px;
    }
    .prk-zone-inner {
      padding: 0 16px;
    }
    
    .search-section {
      padding: 22px 20px;
      border-radius: var(--radius-lg);
      margin-bottom: 20px;
    }
    
    .search-title {
      font-size: 1.15rem;
      gap: 10px;
      margin-bottom: 16px;
    }
    
    .search-title svg {
      width: 22px;
      height: 22px;
    }
    
    .search-input {
      padding: 14px 20px 14px 46px;
      font-size: 0.9rem;
      border-radius: var(--radius-sm);
    }
    
    .search-icon {
      left: 16px;
    }
    
    .sales-card {
      padding: 22px;
    }
    
    .sales-header {
      gap: 12px;
    }
    
    .filter-pills {
      width: 100%;
    }
    
    .filter-pill {
      flex: 1;
    }
    
    .filter-pill select {
      width: 100%;
      min-width: unset;
    }
    
    .calendar-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
    
    .calendar-title {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    
    .date-range-filters {
      margin-left: 0;
      flex-wrap: wrap;
    }
    
    .calendar-stats {
      flex-wrap: wrap;
      gap: 12px;
    }
    
    .listings-card.full-width .listings-content {
      grid-template-columns: 1fr;
    }

    /* Reduce section indent on tablet */
    .prk-section > *:not(.prk-section-label) {
      margin-left: 0;
    }
  }
  
  /* Mobile */
  @media (max-width: 767px) {
    .project-content-band {
      padding-bottom: 48px;
    }

    .prk-zone-inner {
      padding: 0 12px;
    }
    
    .search-section {
      padding: 18px 16px;
      border-radius: var(--radius-md);
      margin-bottom: 16px;
    }
    
    .search-title {
      font-size: 1.05rem;
      gap: 8px;
      margin-bottom: 14px;
    }
    
    .search-title svg {
      width: 20px;
      height: 20px;
    }
    
    .ai-badge {
      font-size: 0.6rem;
      padding: 3px 8px;
    }
    
    .search-input {
      padding: 13px 16px 13px 42px;
      font-size: 0.88rem;
      border-radius: var(--radius-sm);
    }
    
    .top-row {
      margin-bottom: 16px;
    }
    
    .ai-insights-card {
      padding: 16px;
      border-radius: var(--radius-lg);
      height: auto;
      max-height: none;
    }
    
    .map-card.show {
      width: 96vw;
      height: 80vh;
      border-radius: var(--radius-lg);
    }
    
    .map-header {
      padding: 14px 16px;
    }
    
    .project-name {
      line-height: 1.3;
    }
    
    .project-meta-row {
      gap: 10px;
      font-size: 0.72rem;
    }
    
    .map-btn {
      padding: 7px 10px;
      font-size: 0.72rem;
    }
    
    .map-footer {
      padding: 10px 16px;
    }
    
    .map-address {
      font-size: 0.75rem;
    }
    
    .project-header-strip {
      padding: 0;
      border-radius: 0;
      margin-bottom: 0;
    }

    .phstrip-row1 {
      flex-direction: column;
      gap: 12px;
      padding-bottom: 14px;
    }

    .phstrip-actions {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .phstrip-actions-top {
      flex-direction: row-reverse;
    }

    /* Show search box and lens on mobile */
    .phstrip-search-wrap { display: flex; flex: 1; }
    #phstripSearchWrap .search-input-wrapper { width: 100%; }
    .phstrip-search-lens { display: none; }

    /* Tooltip: left-align on mobile so it doesn't overflow the screen edge */
    .phstrip-tip { right: auto; left: 0; }
    .phstrip-tip::after { right: auto; left: 12px; }

    /* Show mobile price block, hide desktop one */
    .phstrip-price-mobile {
      display: block !important;
      margin-top: 10px;
      padding: 12px 16px !important;
    }
    .phstrip-sum-big { font-size: 1.9rem !important; }
    .phstrip-actions .phstrip-price-block:not(.phstrip-price-mobile) { display: none !important; }

    .project-name {
      line-height: 1.35;
    }

    .phstrip-nav-row {
      gap: 6px;
      flex-wrap: wrap;
      overflow-x: visible;
      padding-bottom: 10px;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;
    }
    .phstrip-nav-pill { flex-shrink: 0; font-size: 11px !important; padding: 5px 11px !important; }
    .phstrip-unit-toggle { margin-left: auto; padding-left: 8px; }
    .project-meta-row {
      gap: 8px 14px;
      margin-top: 6px;
    }

    .project-returns-row {
      gap: 6px;
      margin-top: 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
      scrollbar-width: none;
    }

    .project-returns-row::-webkit-scrollbar {
      display: none;
    }

    .return-chip {
      font-size: 0.64rem;
      padding: 4px 8px;
      gap: 1px;
      flex-shrink: 0;
    }

    .rc-prices {
      font-size: 0.62rem;
    }

    .return-chip .rc-overall-value {
      font-size: 0.72rem;
    }

    .rc-gated-wrap {
      width: 100%;
    }

    /* Mobile card grid for layout chips */
    .rc-gated-chips {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      overflow-x: visible;
      flex-wrap: unset;
      padding: 8px;
      gap: 7px;
    }

    .rc-gated-chips::-webkit-scrollbar { display: none; }

    .rc-gated-chips > .return-chip {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 10px 11px;
      border-radius: 8px;
      border: 1px solid rgba(234,179,8,0.28) !important;
      background: #fff;
      flex-shrink: unset;
    }

    .rc-gated-chips > .return-chip + .return-chip {
      border-left: 1px solid rgba(234,179,8,0.28);
    }

    .rc-gated-chips > .return-chip.rc-active {
      border-color: var(--prp-brand-green, #198754) !important;
      background: #f0fdf4;
      box-shadow: 0 0 0 1px var(--prp-brand-green, #198754);
    }

    .rc-gated-chips .return-chip .rc-layout {
      font-size: 0.69rem;
      font-weight: 600;
      color: #374151;
    }

    .rc-gated-chips .return-chip .rc-appreciation {
      font-size: 0.9rem;
      font-weight: 700;
    }

    .rc-gated-chips .return-chip .rc-sales {
      font-size: 0.63rem;
      color: #9ca3af;
    }

    .rc-gated-chips .return-chip .rc-conf-pill {
      font-size: 0.6rem;
      margin-left: 0;
    }

    .rc-gated-chips .return-chip .rc-status-badge {
      font-size: 0.6rem;
      margin-left: 0;
    }

    /* APREX badge: float on top-center border of card */
    .rc-gated-wrap {
      position: relative;
      margin-top: 26px;
      overflow: visible;
    }
    .rc-gated-header > .aprex-badge-full {
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      margin-left: 0 !important;
      font-size: 0.60rem;
      padding: 3px 12px;
      letter-spacing: 0.05em;
      white-space: nowrap;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    }
    /* Header is now simpler: label · PRO · confidence · coverage */
    .rc-gated-header {
      flex-wrap: wrap;
      gap: 4px 6px;
      padding: 7px 10px;
    }
    .rc-pro-label { font-size: 0.68rem; flex: 1; }
    .prk-pro-badge { flex-shrink: 0; }
    .rc-gated-header > .rc-conf-pill { margin-left: auto; font-size: 0.65rem; }
    .rc-gated-header > .rc-status-badge { font-size: 0.65rem; }
    /* Non-pro upgrade button: center after APREX floats out of flow */
    .rc-gated-wrap:not(.rc-pro-wrap) .rc-gated-header { justify-content: center !important; }

    /* Show MARKET badge on mobile cards (hidden on desktop) */
    .rc-gated-chips .rc-chip-row2.rc-market-row { display: flex; }

    .share-report-btn {
      width: 34px;
      height: 34px;
    }
    
    /* Sales card mobile */
    .sales-card {
      padding: 16px;
      border-radius: var(--radius-lg);
    }
    
    .sales-header {
      margin-bottom: 16px;
    }
    
    .sales-title {
      font-size: 0.95rem;
    }
    
    .sales-title svg {
      width: 18px;
      height: 18px;
    }
    
    .filter-pills {
      gap: 8px;
    }
    
    .filter-pill select {
      padding: 9px 30px 9px 12px;
      font-size: 0.75rem;
    }
    
    .sales-stats-compact {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 14px;
    }
    
    .sales-stats-compact .stats-left {
      flex-wrap: wrap;
      gap: 12px;
    }
    
    .sales-stats-compact .breakdown {
      border-left: none;
      padding-left: 0;
    }
    
    .sales-stats-compact .total-count {
      font-size: 1.2rem;
    }
    
    .sales-stats-compact .timeline-row {
      flex-wrap: wrap;
      gap: 4px;
    }
    
    .sales-stats-compact .timeline-data {
      flex-wrap: wrap;
      gap: 6px;
    }
    
    /* Calendar mobile */
    .calendar-section {
      margin-top: 8px;
    }

    .calendar-scroll-hint {
      display: flex;
    }
    
    .calendar-header {
      margin-bottom: 12px;
    }
    
    .calendar-legend-row {
      margin-bottom: 10px;
    }
    
    .calendar-legend {
      gap: 12px;
      font-size: 0.68rem;
    }
    
    .date-range-filters {
      gap: 8px;
    }
    
    .date-filter label {
      font-size: 0.6rem;
    }
    
    .date-filter select {
      font-size: 0.7rem;
      padding: 5px 24px 5px 8px;
      min-width: 48px;
    }
    
    .price-stat {
      gap: 5px;
    }
    
    .price-stat-value {
      font-size: 0.78rem;
    }
    
    /* AI Insights mobile */
    .ai-verdict-section {
      padding: 10px 12px;
      border-radius: var(--radius-sm);
    }
    
    .prj-wrap { padding: 14px; }
    .prj-clusters-grid { grid-template-columns: 1fr; }
    .prj-sc-col-price { font-size: 0.82rem; }
    .prj-head-stat-val { font-size: 0.72rem; }
    .prj-head-stat-lbl { font-size: 0.65rem; }
    .prj-note { font-size: 0.72rem; padding: 8px 10px; }

    .ai-predictions-months {
      font-size: 0.64rem;
    }

    .ai-predictions-sentiment {
      font-size: 0.64rem;
    }

    .ai-layout-grid {
      gap: 4px;
    }
    
    .ai-layout-item {
      padding: 5px 8px;
      gap: 6px;
    }
    
    .ai-nearby-item {
      padding: 6px 8px;
    }
    
    .ai-price-example {
      padding: 10px 12px;
      border-radius: var(--radius-sm);
    }
    
    .ai-price-example-text {
      font-size: 0.78rem;
    }
    
    /* Listings mobile */
    .listings-section {
      margin-top: 16px;
    }
    
    .listings-card.full-width {
      max-height: 380px;
      border-radius: var(--radius-lg);
      padding: 16px;
    }
    
    .listings-card.full-width .listings-content {
      grid-template-columns: 1fr;
    }
    
    .listings-header {
      margin-bottom: 14px;
    }
    
    .listings-title {
      font-size: 0.88rem;
    }
    
    .listing-item {
      padding: 10px 12px;
    }
    
    .listing-title {
      font-size: 0.78rem;
    }
    
    .listing-snippet {
      font-size: 0.68rem;
    }
    
    /* Error state mobile */
    .error-state-card {
      padding: 36px 24px;
      border-radius: var(--radius-lg);
    }
    
    .error-state-icon svg {
      width: 40px;
      height: 40px;
    }
    
    .error-state-title {
      font-size: 1.05rem;
    }
    
    .error-state-message {
      font-size: 0.82rem;
    }
    
    /* Content grid mobile */
    .content-grid {
      gap: 16px;
    }

    /* Remove section content left indent on mobile to prevent overflow */
    .prk-section > *:not(.prk-section-label) {
      margin-left: 0;
    }

    /* Constrain prk-panel width on mobile */
    .prk-panel {
      padding-left: 0;
      padding-right: 0;
      max-width: 100%;
      overflow-x: hidden;
    }

    /* Ensure cards don't overflow on mobile */
    .prk-card {
      max-width: 100%;
      overflow-x: hidden;
    }

    /* Contain table wrappers on mobile */
    .prk-table-wrap {
      max-width: 100%;
    }
    
    /* AI Help Modal mobile */
    .ai-help-content {
      padding: 20px;
      border-radius: var(--radius-lg);
    }
    
    .ai-help-title {
      font-size: 1rem;
    }
    
    .ai-help-section h4 {
      font-size: 0.8rem;
    }
    
    .ai-help-section p {
      font-size: 0.75rem;
    }
    
    /* Tooltip mobile */
    #calendarTooltip {
      font-size: 0.72rem;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
    }
  }
  
  /* Small mobile (iPhone SE etc.) */
  @media (max-width: 390px) {
    .prk-zone-inner {
      padding: 0 8px;
    }
    
    .search-section {
      padding: 14px 12px;
    }
    
    .search-title {
      font-size: 0.95rem;
    }
    
    .search-input {
      padding: 12px 14px 12px 38px;
      font-size: 0.85rem;
    }
    
    .search-icon {
      left: 14px;
    }
    
    .sales-card {
      padding: 12px;
    }
    
    .prk-section > *:not(.prk-section-label) {
      margin-left: 0;
    }
    
    .filter-pills {
      flex-direction: column;
    }
    
    .date-range-filters {
      flex-direction: column;
      gap: 6px;
    }
    
    .date-filter-separator {
      display: none;
    }
  }

  /* ===== PROCUREMENTBUDDY THEME — color overrides ===== */

  /* Page bands */
  .project-content-band { background: #eceae5; }

  /* Search section */
  .search-section {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #D3DDDE;
    box-shadow: 0 2px 12px rgba(34,76,90,0.07);
  }
  .search-section:hover {
    border-color: #b8c8ca;
    box-shadow: 0 4px 20px rgba(34,76,90,0.1);
  }
  .search-input {
    background: #eceae5;
    color: #224C5A;
    border-color: #D3DDDE;
  }
  .search-input::placeholder { color: #aab8ba; }
  .search-input:focus {
    background: #ffffff;
    border-color: rgba(15,32,75,0.5);
    box-shadow: 0 0 0 3px rgba(15,32,75,0.1);
    color: #224C5A;
  }
  .search-icon { color: #95a5a6; }
  .search-input-wrapper:focus-within .search-icon { color: #0f204b; }

  /* Typeahead */
  .typeahead-dropdown {
    background: #ffffff;
    border-color: #D3DDDE;
    box-shadow: 0 8px 32px rgba(34,76,90,0.12), 0 0 0 1px rgba(34,76,90,0.04);
  }
  .typeahead-item { border-bottom-color: #eceae5; }
  .typeahead-item:hover, .typeahead-item.active { background: rgba(15,32,75,0.05); }
  .typeahead-project-name { color: #224C5A; }
  .typeahead-meta { color: #95a5a6; }
  .typeahead-meta span { color: #95a5a6; }

  /* Project header strip (already light-themed by default) */
  .project-meta-item { color: #6c757d; }
  .project-meta-item svg { color: #95a5a6; }

  /* AI Insights card */
  .ai-insights-card {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #D3DDDE;
    box-shadow: 0 2px 12px rgba(34,76,90,0.07);
  }
  .ai-insights-header { border-bottom-color: #eceae5; color: #224C5A; }
  .ai-insights-header svg { color: #95a5a6; }
  .ai-help-btn { color: #95a5a6; border-color: #D3DDDE; background: #eceae5; }
  .ai-help-btn:hover { background: #e0ddd8; color: #6c757d; }
  .ai-loading-step { color: #95a5a6; }
  .ai-loading-step.active { color: #224C5A; }
  .ai-loading-step.completed { color: #0f204b; }
  .ai-no-data { color: #95a5a6; }
  .verdict-h1,.verdict-h2,.verdict-h3,.verdict-h4 { color: #224C5A; }
  .verdict-text { color: #6c757d; }
  .prj-note { background: #e0ddd8; color: #95a5a6; }
  .ai-help-badge { background: #e0ddd8; color: #95a5a6; border-color: #D3DDDE; }

  /* Sales card */
  .sales-card {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #D3DDDE;
    box-shadow: 0 2px 12px rgba(34,76,90,0.07);
  }
  .sales-title { color: #224C5A; }
  .sales-title svg { color: #95a5a6; }
  .filter-pill select { background: #eceae5; color: #6c757d; border-color: #D3DDDE; }
  .filter-pill select:focus { border-color: #b8c8ca; color: #224C5A; }
  .sales-stats-compact { background: #f8f9fa; border-color: #dee2e6; }
  .total-count { color: #224C5A; }
  .total-label { color: #95a5a6; }
  .breakdown-item { color: #6c757d; }
  .timeline-type { color: #95a5a6; }
  .timeline-label { color: #95a5a6; }
  .timeline-value { color: #6c757d; }
  .timeline-value.highlight { color: #0f204b; }
  .timeline-sep { color: #D3DDDE; }
  .price-stat-label { color: #95a5a6; }
  .price-stat-value { color: #224C5A; }
  .price-stat-unit { color: #95a5a6; }
  .appreciation-value { color: #95a5a6; background: #e0ddd8; }
  .appreciation-value.positive { color: #0f204b; background: rgba(15,32,75,0.08); }
  .appreciation-value.negative { color: #dc2626; background: rgba(220,38,38,0.07); }
  .appreciation-value.neutral  { color: #95a5a6; background: #e0ddd8; }

  /* Calendar */
  .calendar-section { border-color: #eceae5; }
  .calendar-header { border-bottom-color: #eceae5; }
  .calendar-title { color: #224C5A; }
  .calendar-month-label { color: #95a5a6; }
  .calendar-day-label { color: #95a5a6; }
  .calendar-day { background: #e0ddd8; border-color: #D3DDDE; }
  .calendar-day.empty { background: transparent; }
  .calendar-legend-label { color: #95a5a6; }
  .calendar-scroll-hint { color: #aab8ba; }
  .date-filter label { color: #95a5a6; }
  .date-filter select { background: #eceae5; color: #6c757d; border-color: #D3DDDE; }
  .date-filter select option { background: #ffffff; color: #224C5A; }
  #calendarTooltip { background: #ffffff; color: #5a6478; border-color: #e2e5eb; box-shadow: 0 4px 16px rgba(0,0,0,0.1); }

  /* Listings */
  .listings-card {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: #D3DDDE;
    box-shadow: 0 2px 12px rgba(34,76,90,0.07);
  }
  .listings-title { color: #224C5A; }
  .listings-title svg { color: #95a5a6; }
  .listings-placeholder { color: #95a5a6; }
  .listing-card { background: #eceae5; border-color: #D3DDDE; }
  .listing-card:hover { background: #e0ddd8; border-color: #b8c8ca; }
  .listing-price { color: #224C5A; }
  .listing-meta { color: #95a5a6; }
  .listings-sources .source-badge { background: #e0ddd8; color: #6c757d; }

  /* Error state */
  .error-state-card {
    background: #ffffff;
    backdrop-filter: none;
    border-color: #D3DDDE;
    box-shadow: 0 2px 12px rgba(34,76,90,0.07);
  }
  .error-state-icon svg { color: #D3DDDE; }
  .error-state-title { color: #224C5A; }
  .error-state-message { color: #95a5a6; }
  .pro-gate-resets { color: #95a5a6; }
  .error-state-btn { background: #eceae5; color: #6c757d; border-color: #D3DDDE; }
  .error-state-btn:hover { background: #e0ddd8; border-color: #b8c8ca; }

  /* AI Help Modal */
  .ai-help-modal { background: rgba(34,76,90,0.45); }
  .ai-help-content {
    background: linear-gradient(135deg, #ffffff 0%, #eceae5 100%);
    border: 1px solid #D3DDDE;
    box-shadow: 0 16px 48px rgba(34,76,90,0.15);
  }
  .ai-help-title { color: #224C5A; }
  .ai-help-title svg { color: #0f204b; }
  .ai-help-close { color: #95a5a6; background: #e0ddd8; }
  .ai-help-close:hover { background: #D3DDDE; color: #224C5A; }
  .ai-help-section h4 { color: #224C5A; }
  .ai-help-section p { color: #6c757d; }

  /* Map card */
  .map-card {
    background: #ffffff;
    border-color: #D3DDDE;
    box-shadow: 0 16px 48px rgba(34,76,90,0.15);
  }
  .map-header { border-bottom-color: #eceae5; }
  .map-header h3 { color: #224C5A; }
  .map-btn { background: #eceae5; color: #6c757d; border-color: #D3DDDE; }
  .map-btn:hover { background: #e0ddd8; color: #224C5A; }
  .map-footer { border-top-color: #eceae5; }
  .map-address { color: #95a5a6; }

  /* ===== CENTERED SEARCH STATE — Finology-style hero ===== */
  .project-container.search-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding-bottom: 80px;
  }

  /* Hero wrapper — centered, max-width constrained */
  .project-container.search-centered .search-section {
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
    text-align: center;
  }

  /* Hide the compact "Project Details" title in hero mode */
  .project-container.search-centered .search-title {
    display: none;
  }

  /* Show hero text only in centered mode */
  .search-hero { display: none; }
  .project-container.search-centered .search-hero { display: block; margin-bottom: 32px; }

  /* Logo */
  .search-hero-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    text-decoration: none;
  }
  .search-hero-logo-text {
    font-size: 1.7rem;
    font-weight: 700;
    color: #224C5A;
    letter-spacing: -0.02em;
  }
  .search-hero-logo-robin {
    color: #25D366;
    font-style: italic;
  }

  .search-hero-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #0f204b;
    background: rgba(15,32,75,0.08);
    border: 1px solid rgba(15,32,75,0.22);
    border-radius: 20px;
    padding: 5px 14px;
    margin-bottom: 18px;
  }

  .search-hero-heading {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.15;
    color: #224C5A;
    margin: 0 0 14px;
  }

  .search-hero-sub {
    font-size: 1rem;
    font-weight: 500;
    color: #2B6073;
    margin: 0;
    opacity: 0.9;
  }

  /* Big pill search input in hero mode */
  .project-container.search-centered .search-input-wrapper {
    position: relative;
  }

  .project-container.search-centered .search-input {
    height: 64px;
    font-size: 17px;
    border-radius: 32px;
    padding: 0 24px 0 62px;
    box-shadow: 0 6px 32px rgba(15,32,75,0.14), 0 2px 8px rgba(34,76,90,0.07);
    border-color: rgba(15,32,75,0.15);
    background: #ffffff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
  }

  .project-container.search-centered .search-input::placeholder {
    font-size: 15px;
  }

  .project-container.search-centered .search-input:focus {
    box-shadow: 0 8px 40px rgba(15,32,75,0.2), 0 2px 8px rgba(34,76,90,0.08);
    border-color: rgba(15,32,75,0.45);
    background: #ffffff;
  }

  .project-container.search-centered .search-icon {
    left: 22px;
    width: 22px;
    height: 22px;
    color: #0f204b;
  }

  /* Typeahead dropdown — round corners to match pill */
  .project-container.search-centered .typeahead-dropdown {
    border-radius: 20px;
    margin-top: 10px;
    text-align: left;
  }

  /* Top performers — pills grouped by district */
  .search-popular-row { display: none; }
  .project-container.search-centered .search-popular-row {
    display: block;
    margin-top: 28px;
    text-align: center;
  }

  .search-popular-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 10px;
  }

  .search-popular-group:last-child {
    margin-bottom: 0;
  }

  .search-popular-district-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #0f204b;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-right: 2px;
    white-space: nowrap;
    opacity: 0.5;
  }

  .search-popular-chip {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: #2B6073;
    background: rgba(43,96,115,0.07);
    border: 1px solid rgba(43,96,115,0.18);
    border-radius: 20px;
    padding: 5px 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.2s;
    text-decoration: none;
    user-select: none;
    white-space: nowrap;
  }

  .search-popular-chip:hover {
    background: rgba(15,32,75,0.1);
    border-color: rgba(15,32,75,0.3);
    color: #0f204b;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(15,32,75,0.08);
    text-decoration: none;
  }

  .search-popular-chip:active {
    transform: translateY(0);
    box-shadow: none;
  }

  @media (max-width: 600px) {
    .project-container.search-centered .search-popular-row {
      margin-top: 22px;
    }

    .search-popular-group {
      gap: 6px;
      margin-bottom: 8px;
    }

    .search-popular-chip {
      font-size: 11px;
      padding: 4px 11px;
    }

    .search-popular-district-label {
      font-size: 10px;
    }
  }

  /* Guest teaser gate — shown right after the reviews section, in place of the logged-in-only
     Tier 2 content (sales history, AI insights, radar, valuation, layouts, documents). The
     median price itself lives in the hero card (renderGuestHeroPriceBlock), matching the
     logged-in layout, so this banner is CTA copy only. */
  .guest-project-gate { margin: 8px 0 24px; }
  .project-content-band.guest-slim-band { min-height: 0; padding-bottom: 40px; }
  .guest-gate-cta {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #0f204b 0%, #1a3566 100%);
    border-radius: 14px;
    padding: 22px 28px;
    color: #fff;
  }
  .guest-gate-cta-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 320px;
  }
  .guest-gate-cta-text strong { font-size: 1.05rem; }
  .guest-gate-cta-text span { font-size: 0.85rem; color: rgba(255,255,255,0.78); line-height: 1.4; }
  .guest-gate-cta-btn {
    flex-shrink: 0;
    margin-left: auto;
    background: #fff;
    color: #0f204b;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
  }
  .guest-gate-cta-btn:hover { background: #e2e8f0; }
  @media (max-width: 640px) {
    .guest-gate-cta-btn { margin-left: 0; }
  }

/* ===== PROPROBIN ANALYTICS PANEL — light theme, scoped ===== */
.prk-panel {
  margin-top: 0;
  background: transparent;
  border-radius: 0;
  padding: 24px 4px 48px;
  color: #1a1f2e;
  font-family: inherit;
  border: none;
}
@media (min-width: 992px) {
  .prk-panel { margin-left: 15px; margin-right: 15px; }
}
.prk-panel * { box-sizing: border-box; }
.prk-nav-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px;
}
.prk-nav-pill {
  font-size: 12px; font-weight: 500; padding: 6px 14px; border-radius: 8px;
  border: 1px solid #e2e5eb; color: #5a6478; background: transparent;
  cursor: pointer; transition: all 0.2s;
}
.prk-nav-pill:hover { background: #fff; border-color: #cdd2da; }
.prk-nav-pill.active { background: rgba(25,135,84,0.1); color: #198754; border-color: rgba(25,135,84,0.3); }
.prk-section { margin-top: 20px; }
.prk-section:first-child { margin-top: 0; }
.prk-section-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: #8b95a8; padding-top: 15px; margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.prk-section-label::after {
  content: ''; flex: 1; height: 1px; order: 2;
  background: linear-gradient(90deg, #9da5b4, transparent);
}
.prk-section-label svg { flex-shrink: 0; opacity: 0.75; }
.prk-go-filters {
  order: 3; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  border: 1px solid #d4dbe4; border-radius: 10px; background: rgba(255,255,255,.24);
  color: #657180; padding: 6px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: 0; text-transform: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.prk-go-filters:hover { background: #fff; border-color: #b8c2cf; color: #334155; }
.prk-go-filters svg { width: 10px; height: 10px; opacity: .7; }
@media (max-width: 575px) { .prk-go-filters { padding: 5px 8px; font-size: 10px; } }
.prk-section-contact {
  display: flex; justify-content: flex-end; margin-top: 14px; padding-bottom: 4px;
}
.prk-section-wa-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 9px; border-radius: 20px;
  background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0;
  font-size: 0.72rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.prk-section-wa-btn:hover { background: #dcfce7; border-color: #86efac; color: #15803d; }
.prk-section-wa-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.prk-section > *:not(.prk-section-label) { margin-left: 23px; }
.prk-card {
  background: #fff; border: 1px solid #e2e5eb; border-radius: 14px;
  padding: 20px 22px; margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.prk-card:hover { border-color: #cdd2da; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.prk-card-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: #1a1f2e; display: flex; align-items: center; gap: 9px; letter-spacing: -0.02em; }
.prk-card-title svg { color: #8b95a8; flex-shrink: 0; }
.prk-card-sub { font-size: 12px; color: #5a6478; margin-bottom: 14px; }
.prk-metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; align-items: stretch; }
@media (max-width: 575px) { .prk-metric-grid { grid-template-columns: repeat(2, 1fr); } }
.prk-type-metric {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e5e8ee;
  border-radius: 14px;
  padding: 16px 18px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.prk-type-metric:hover { border-color:#c7d2e5;transform:translateY(-1px);box-shadow:0 8px 18px rgba(15, 23, 42, 0.08); }
.prk-type-metric-title {
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:#8b95a8;
  margin-bottom:10px;line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.prk-type-metric-price {
  font-size:22px;
  font-weight:800;
  color:#0f9f6e;
  margin-bottom:14px;
  letter-spacing: -0.01em;
}
/* Locked price — layout's price was never sent by the server, so this is a
   ghosted placeholder (blurred, not real data) with a small gold PRO badge
   alongside it, rather than a solid block covering the whole row. */
.prk-type-metric-price.prk-price-locked {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 28px;
}
.prk-price-blur {
  filter: blur(5px);
  opacity: 0.6;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}
.prk-price-lock-cta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  text-decoration: none;
  background: linear-gradient(135deg, var(--prp-brand-gold) 0%, #dbb732 30%, #f6d365 60%, var(--prp-brand-gold) 100%);
  background-size: 200% 100%;
  color: #1e293b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  padding: 4px 9px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(201,162,39,0.28);
  transition: background-position 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.prk-price-lock-cta:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201,162,39,0.38);
}
/* Pro user, non-teaser layout — real price shown, just marked as Pro-tier data */
.prk-pro-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  background: linear-gradient(135deg, #c9a227, #dbb732);
  color: #fff;
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1.2;
}
.prk-type-metric-group { padding-top: 12px; margin-top: 14px; border-top: 1px solid #eef1f5; }
.prk-type-metric-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8b95a8; margin-bottom: 3px; }
.prk-type-metric-v { font-size: 13px; font-weight: 600; color: #2b3446; }
.prk-type-metric-range { font-size: 11px; font-weight: 500; color: #8b95a8; margin-top: 2px; }
.prk-type-metric-meta { font-size: 11px; font-weight: 600; color: #5a6478; margin-top: 8px; }
.prk-type-metric-txn { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.prk-type-metric-date { font-size: 10px; font-weight: 400; color: #8b95a8; margin-top: 10px; padding-top: 8px; border-top: 1px solid #f2f4f7; line-height: 1.6; }
/* Per-unit-type key-metric blocks: each unit type gets its own row of small,
   single-purpose metric cards (price / size / transactions / rate / duration). */
.prk-metric-stack { display: flex; flex-direction: column; gap: 22px; }
.prk-metric-unit-block { display: flex; flex-direction: column; }
.prk-metric-unit-title {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  color: #2b3446; margin: 0 0 12px;
}
/* Unit-type selector pills — only the active unit's metric cards are shown. */
.prk-unit-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.prk-unit-pill {
  appearance: none; cursor: pointer;
  font-size: 0.72rem; font-weight: 600; line-height: 1;
  padding: 5px 13px; border-radius: 20px;
  border: 1px solid #e5e7eb; background: #f3f4f6; color: #6b7280;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.prk-unit-pill:hover:not(.active) { background: #e5e7eb; color: #374151; }
.prk-unit-pill.active {
  background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 700;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
}
.prk-metric-unit-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 575px) { .prk-metric-unit-cards { grid-template-columns: 1fr; } }
.prk-mini-metric {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e8ebf1; border-radius: 16px;
  padding: 18px 20px; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.prk-mini-metric:hover { border-color:#cfd8e6; transform:translateY(-2px); box-shadow:0 10px 24px rgba(15, 23, 42, 0.09); }
.prk-mini-metric-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #8b95a8; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.prk-mini-metric-ico {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 10px; background: #eef1f6; color: #5a6478;
}
.prk-mini-metric-ico svg { width: 18px; height: 18px; opacity: 1; }
.prk-mm-price    .prk-mini-metric-ico { background: rgba(15,159,110,0.12); color: #0f9f6e; }
.prk-mm-size     .prk-mini-metric-ico { background: rgba(37,99,235,0.10);  color: #2563eb; }
.prk-mm-txn      .prk-mini-metric-ico { background: rgba(124,58,237,0.10); color: #7c3aed; }
.prk-mm-rate     .prk-mini-metric-ico { background: rgba(234,88,12,0.10);  color: #ea580c; }
.prk-mm-duration .prk-mini-metric-ico { background: rgba(8,145,178,0.10);  color: #0891b2; }
.prk-mini-metric-value { font-size: 13px; font-weight: 600; color: #1e2433; letter-spacing: -0.01em; line-height: 1.1; text-align: center; margin-bottom: 18px; }
.prk-mini-metric-value .prk-mm-num { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin: 0 3px; }
.prk-mini-metric-value.is-price { color: #0f9f6e; }
.prk-mini-metric-sub { margin-top: auto; padding-top: 14px; border-top: 1px solid #f0f2f6; }
.prk-mini-metric-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; line-height: 2; }
.prk-mini-metric-row > span:first-child { color: #9aa3b2; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.prk-mini-metric-row > span:last-child { color: #2b3446; font-weight: 700; font-size: 11.5px; }
.prk-txn-help {
  position: relative; display: inline-flex; align-items: center; width: fit-content;
  cursor: help; border-bottom: 1px dotted currentColor;
}
.prk-txn-help::after {
  content: attr(data-tooltip); position: absolute; left: 0; bottom: calc(100% + 7px);
  width: max-content; max-width: min(260px, 75vw); padding: 7px 9px;
  border-radius: 6px; background: #0f172a; color: #f8fafc;
  box-shadow: 0 8px 24px rgba(15,23,42,.24); font-size: 10.5px;
  font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none;
  white-space: normal; opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(3px); transition: opacity .15s, transform .15s, visibility .15s;
  z-index: 1000;
}
.prk-txn-help:hover::after, .prk-txn-help:focus::after {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.prk-mini-metric-price.prk-price-locked { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; min-height: 28px; font-size: 22px; font-weight: 600; }
/* Dari status */
.prk-dari-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.prk-dari-card { background: #fff; border: 1px solid #e5e8ee; border-radius: 14px; padding: 18px 20px; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }
.prk-dari-card-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #475569; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid #eef1f5; }
.prk-dari-card-head svg { color: #94a3b8; flex-shrink: 0; }
.prk-dari-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; }
.prk-dari-status-list { display: flex; flex-direction: column; gap: 15px; }
.prk-dari-status-row { width: 100%; }
.prk-dari-k { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8b95a8; margin-bottom: 4px; }
.prk-dari-v { font-size: 14px; font-weight: 600; color: #1e2433; }
.prk-dari-v .psb-status-dot { display: inline-block; margin-right: 7px; vertical-align: middle; }
.prk-dari-progress { width: 100%; }
.prk-dari-progress-top { display: flex; justify-content: flex-start; margin-bottom: 7px; }
.prk-dari-progress-track { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: #e9edf3; }
.prk-dari-progress-fill { height: 100%; min-width: 0; border-radius: inherit; background: #16a34a; transition: width .3s ease; }
.prk-dari-progress-label { color: #16a34a; font-size: 11px; font-weight: 700; }
.prk-dari-unit-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.prk-dari-unit-total-label { color: #8b95a8; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.prk-dari-unit-total-value { color: #111827; font-size: 22px; font-weight: 700; }
.prk-dari-unit-bar { display: flex; width: 100%; height: 12px; overflow: hidden; border-radius: 999px; background: #e9edf3; margin-bottom: 20px; }
.prk-dari-unit-segment { height: 100%; min-width: 2px; }
.prk-dari-unit-list { display: flex; flex-direction: column; }
.prk-dari-unit-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 2px 0; }
.prk-dari-unit-row:first-child { border-top: 0; padding-top: 0; }
.prk-dari-unit-name { color: #334155; font-size: 12px; font-weight: 700; }
.prk-dari-unit-count { color: #111827; font-size: 13px; font-weight: 700; }
.prk-dari-dev { display: flex; align-items: center; gap: 12px; }
.prk-dari-dev-logo { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid #e5e8ee; padding: 3px; flex-shrink: 0; }
.prk-dari-license-list { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
.prk-dari-escrow-status { font-size: 13px; font-weight: 600; }
.prk-dari-escrow-status.prk-dari-escrow-yes { color: #16a34a; }
.prk-dari-escrow-status.prk-dari-escrow-yes strong { color: #111827; }
.prk-dari-escrow-status.prk-dari-escrow-no { color: #92400e; }
.prk-dari-latest { grid-column: 1 / -1; }
.prk-dari-desc { grid-column: 1 / -1; }
.prk-dari-desc-text { font-size: 13px; line-height: 1.6; color: #334155; margin: 0; }
.prk-dari-latest-meta { color: #8b95a8; font-size: 11px; font-weight: 600; margin: -8px 0 14px; }
.prk-dari-latest-content { display: flex; align-items: flex-start; gap: 16px; }
.prk-dari-latest-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; flex: 1; min-width: 0; }
.prk-dari-latest-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; padding: 0; border: 1px solid #e2e8f0; border-radius: 8px; background: #f1f5f9; cursor: pointer; }
.prk-dari-latest-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .2s ease; }
.prk-dari-latest-photo:hover img { transform: scale(1.04); }
.prk-dari-latest-photo-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,.62); color: #fff; font-size: 12px; font-weight: 800; }
.prk-dari-report-btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 9px 12px; border: 1px solid #fecaca; border-radius: 8px; background: #fff5f5; color: #b91c1c; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.prk-dari-report-btn:hover { background: #fee2e2; border-color: #fca5a5; }
.prk-dari-report-btn svg { width: 15px; height: 15px; }
@media (max-width: 1100px) { .prk-dari-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) {
  .prk-dari-cards { grid-template-columns: 1fr; }
  .prk-dari-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .prk-dari-latest-content { flex-direction: column; }
  .prk-dari-latest-gallery { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prk-dari-report-btn { width: 100%; justify-content: center; }
}
.prk-metric {
  background: #fff; border: 1px solid #e2e5eb; border-radius: 12px;
  padding: 16px 18px 14px; transition: border-color 0.2s, transform 0.2s;
  position: relative; z-index: 1;
}
.prk-metric:hover { border-color: #cdd2da; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.06); z-index: 100; }
.prk-metric-icon {
  position: absolute; top: 12px; right: 12px;
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.prk-metric-label { font-size: 10px; color: #8b95a8; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px; padding-right: 36px; line-height: 1.3; }
/* Tooltip inside metric cards: left-aligned, below icon */
.prk-metric-label .phstrip-tip { left: 0; right: auto; }
.prk-metric-label .phstrip-tip::after { left: 12px; right: auto; }
.prk-metric-value { font-size: 20px; font-weight: 700; color: #1a1f2e; }
.prk-metric-change { font-size: 11px; margin-top: 4px; }
.prk-metric-change.up { color: #0d9460; }
.prk-metric-change.down { color: #dc2626; }
.prk-metric-change.neutral { color: #8b95a8; }
.prk-unit-toggle { display: flex; align-items: center; gap: 7px; }
.prk-unit-label { font-size: 11px; color: #8b95a8; font-weight: 500; }
.prk-toggle-switch {
  position: relative; display: inline-block;
  width: 58px; height: 22px; cursor: pointer; flex-shrink: 0;
}
.prk-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.prk-toggle-track {
  position: absolute; inset: 0; border-radius: 11px;
  background: #d1d5db; transition: background 0.25s ease;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15), 0 0 0 1.5px rgba(0,0,0,0.06);
}
.prk-toggle-switch input:checked ~ .prk-toggle-track { background: #22c55e; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1), 0 0 0 1.5px rgba(34,197,94,0.35); }
.prk-toggle-knob {
  position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.04);
  transition: transform 0.25s ease;
}
.prk-toggle-switch input:checked ~ .prk-toggle-track .prk-toggle-knob { transform: translateX(36px); }
.prk-toggle-txt {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 9.5px; font-weight: 800; color: #fff;
  letter-spacing: 0.05em; pointer-events: none; transition: opacity 0.18s;
}
.prk-toggle-txt-on  { left: 8px;  opacity: 0; }
.prk-toggle-txt-off { right: 7px; opacity: 1; }
.prk-toggle-switch input:checked ~ .prk-toggle-track .prk-toggle-txt-on  { opacity: 1; }
.prk-toggle-switch input:checked ~ .prk-toggle-track .prk-toggle-txt-off { opacity: 0; }
.prk-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
@keyframes prkSpin { to { transform: rotate(360deg); } }
.prk-table-wrap { overflow-x: auto; margin-top: 10px; }
.prk-table-wrap.prk-txn-scroll { max-height: 420px; overflow-y: auto; }
.prk-table-wrap.prk-txn-scroll::-webkit-scrollbar { width: 4px; }
.prk-table-wrap.prk-txn-scroll::-webkit-scrollbar-track { background: transparent; }
.prk-table-wrap.prk-txn-scroll::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 4px; }
.prk-table-wrap.prk-txn-scroll::-webkit-scrollbar-thumb:hover { background: #b0b7c3; }
.prk-table-wrap.prk-txn-scroll thead th { position: sticky; top: 0; background: #fff; z-index: 1; box-shadow: 0 1px 0 #e2e5eb; }
.prk-pro-badge { display: inline-flex; align-items: center; gap: 4px; background: rgba(201,162,39,0.15); border: 1px solid rgba(201,162,39,0.3); color: #c9a227; padding: 2px 8px; border-radius: 50px; font-weight: 700; font-size: 10px; letter-spacing: 0.5px; white-space: nowrap; }
.prk-peer-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.prk-peer-filter-btn { padding: 3px 11px; border-radius: 20px; border: 1px solid #dee2e6; background: #fff; color: #5a6478; font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; white-space: nowrap; }
.prk-peer-filter-btn:hover { border-color: #198754; color: #198754; }
.prk-peer-filter-btn.active { background: #198754; border-color: #198754; color: #fff; }
.prk-table { width: 100%; border-collapse: collapse; font-size: 13px; color: #5a6478; }
.prk-table thead th {
  text-align: left; font-size: 11px; font-weight: 600; color: #8b95a8;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 10px 12px;
  border-bottom: 1px solid #e2e5eb; white-space: nowrap;
}
.prk-table tbody td { padding: 10px 12px; border-bottom: 1px solid #e2e5eb; white-space: nowrap; }
.prk-table tbody tr:hover { background: transparent; }
.prk-mono { font-family: monospace; font-size: 12px; }
.prk-text-bold { color: #1a1f2e; font-weight: 600; }
.prk-badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px;
  white-space: nowrap; letter-spacing: 0.02em; display: inline-block;
}
.prk-badge-blue { background: rgba(37,99,235,0.07); color: #2563eb; }
.prk-badge-green { background: rgba(52,211,153,0.12); color: #059669; }
.prk-badge-amber { background: rgba(251,113,133,0.12); color: #e11d48; }
.prk-badge-red { background: rgba(220,38,38,0.08); color: #dc2626; }
.prk-badge-purple { background: rgba(124,58,237,0.07); color: #c9a227; }
.prk-badge-op {
  background: rgba(109,40,217,0.08); color: #6d28d9;
  border: 1px solid rgba(109,40,217,0.2); display: block;
  margin-top: 4px; font-size: 10px; font-weight: 600;
  cursor: help; position: relative; white-space: nowrap;
}
.prk-badge-op::after {
  content: "OP (No premium) means this resale's price and rate exactly match a primary (developer) sale of the same unit. This could be a genuine assignment/transfer at the original price, a premium ADREC didn't record, or a data entry error — so it's excluded from calculations.";
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  min-width: 240px; max-width: 240px; background: #1e1b4b; color: #e0e7ff;
  font-size: 10px; font-weight: 400; line-height: 1.5; padding: 7px 9px;
  border-radius: 6px; white-space: normal; pointer-events: none;
  opacity: 0; transition: opacity 0.18s ease; z-index: 200;
}
.prk-badge-op:hover::after { opacity: 1; }
.prk-insight {
  background: rgba(15,32,75,0.06); border: 1px solid rgba(15,32,75,0.15);
  border-radius: 10px; padding: 14px 18px; margin-top: 14px;
}
.prk-insight p { font-size: 12px; color: #a3382a; line-height: 1.6; }
.prk-insight-red { background: rgba(220,38,38,0.05); border: 1px solid rgba(220,38,38,0.15); }
.prk-insight-red p { color: #991b1b; }
.prk-check-item { display: flex; gap: 10px; padding: 8px 0; font-size: 13px; line-height: 1.5; color: #5a6478; }
.prk-check-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.prk-check-green { background: #0d9460; }
.prk-check-red { background: #dc2626; }
.prk-check-amber { background: #0f204b; }
.prk-check-gated-body {
  filter: blur(4px);
  -webkit-filter: blur(4px);
  user-select: none;
  pointer-events: none;
  color: #5a6478;
}
.prk-check-pro-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg,#c9a227 0%,#f6d365 100%);
  color: #1e293b; font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px; margin-left: 6px;
  letter-spacing: 0.3px; vertical-align: middle;
}
.prk-check-upgrade-link {
  display: inline-block; margin-top: 4px;
  color: #c9a227; font-weight: 600; font-size: 12px;
  text-decoration: none;
}
.prk-check-upgrade-link:hover { text-decoration: underline; }
.prk-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; justify-content: center; }
.prk-legend-item {
  display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5a6478;
  cursor: pointer; user-select: none; transition: opacity 0.2s;
}
.prk-legend-item.off { opacity: 0.35; text-decoration: line-through; }
.prk-legend-item.active { font-weight: 600; color: #1a1f2e; }
.prk-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.prk-divider { border: none; border-top: 1px solid #e2e5eb; margin: 32px 0; }