:root {
      /* Apple Surfaces & Canvas */
      --bg: #f5f5f7;
      --bg-2: #fbfbfd;
      --panel: #ffffff;
      --panel-2: #f5f5f7;
      --panel-elevated: rgba(255, 255, 255, 0.85);

      /* Apple Grayscale Typography & Labels */
      --ink: #1d1d1f;
      --muted: #6e6e73;
      --muted-2: #86868b;
      --muted-3: #a1a1a6;

      /* Precision Apple Dividers & Borders */
      --line: rgba(0, 0, 0, 0.08);
      --line-strong: rgba(0, 0, 0, 0.14);
      --line-subtle: rgba(0, 0, 0, 0.04);
      --line-focus: #0071e3;

      /* Apple System Accents */
      --apple-blue: #0071e3;
      --apple-blue-hover: #0077ed;
      --apple-blue-soft: rgba(0, 113, 227, 0.08);

      --mint: #00a37a;
      --mint-2: #00d9a3;
      --mint-ink: #00694f;
      --mint-soft: rgba(0, 163, 122, 0.08);

      --emerald: #00805f;
      --emerald-2: #00a37a;
      --teal: #0077ed;

      --gold: #b25e00;
      --gold-soft: rgba(178, 94, 0, 0.08);

      --coral: #e0443e;
      --coral-ink: #c2312b;
      --coral-soft: rgba(224, 68, 62, 0.08);

      --sun: #ff9500;
      --sky: #0071e3;
      --indigo: #5856d6;

      /* Apple Multi-tier Ambient Occlusion Shadows */
      --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.04);
      --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.04);
      --shadow: 0 12px 32px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02);
      --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);

      /* Apple Continuous Squircles (Radii) */
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius: 28px;
      --radius-pill: 9999px;

      /* Apple Motion Physics */
      --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1);
      --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);

      /* Authentic Apple Typography Stack */
      --f-head: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro AR Display", "SF Pro", "Apple Arabic", "Noto Sans Arabic", "Alexandria", "Cairo", sans-serif;
      --f-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro AR Text", "SF Pro", "Apple Arabic", "Noto Sans Arabic", "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;
      --f-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

      /* Legacy & Semantic Mappings */
      --green: var(--emerald);
      --amber: var(--gold);
      --red: var(--coral);
      --accent: var(--apple-blue);
      --accent-2: var(--apple-blue-hover);
      --navy: var(--ink);
      --soft-bg: var(--bg);
      --soft-line: var(--line);
      --shadow-soft: var(--shadow-sm);
      --shadow-lift: var(--shadow);
      --buyer-ink: var(--ink);
      --buyer-muted: var(--muted);
      --buyer-bg: var(--bg);
      --buyer-card: var(--panel);
      --buyer-emerald: var(--emerald);
      --buyer-gold: var(--gold);
      --buyer-coral: var(--coral);
      --border: var(--line);
      --surface: rgba(0, 0, 0, 0.03);
      --surface1: rgba(0, 0, 0, 0.03);
      --surface2: rgba(0, 0, 0, 0.05);
      --text: var(--ink);
      --fg: var(--ink);
      --card: var(--panel);

      color: var(--ink);
      background: var(--bg);
      font-family: var(--f-body);
    }
    * { box-sizing: border-box; }
    body {
      background-color: var(--bg);
      background-image:
        radial-gradient(1100px 500px at 50% -80px, rgba(0, 113, 227, 0.06), transparent 70%),
        radial-gradient(800px 400px at 85% 10%, rgba(0, 163, 122, 0.03), transparent 60%);
      color: var(--ink);
      font-family: var(--f-body);
      margin: 0;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      line-height: 1.4736842105;
      letter-spacing: -0.011em;
      overflow-x: hidden;
    }
    [dir="rtl"] body {
      letter-spacing: 0;
      line-height: 1.65;
    }
    main {
      min-height: 100vh;
      padding: 0 0 48px;
    }

    /* ==========================================================================
       APPLE PRO HIG REDESIGN — PARITY WITH ACCOUNT.HTML
       ==========================================================================
       Design Architecture & Aesthetics Summary:
       1. Daylight Color System:
          - Pure Apple daylight palette: #0071e3 (Blue), #00a37a (Mint), #b25e00 (Amber), #e0443e (Coral)
          - Neutral surface tiers: #ffffff (Elevated), #f5f5f7 (Base/Track), #fbfbfd (Card), #1d1d1f (Ink)
       2. macOS Studio Inspector Window Frame (.rc):
          - macOS traffic lights (.macos-traffic: red, yellow, green) with bidirectional RTL/LTR mirroring
          - Live pulsating beacon dot (.rc-bar-beacon-dot) & Studio Engine badge
          - Continuous squircles (border-radius: 28px) with 1px white inset specular highlight and multi-layered spatial ambient shadows
       3. Liquid Segmented Controls:
          - Continuous pill tab navigation (#tabsOuter) with SF Symbol SVGs and spring physics
          - Liquid segmented mode switch (#modeToggle) with Apple spring transitions
       4. Apple Pro Squircle Intent Cards (.intent-chips & .intent-chip):
          - Continuous 22px squircle cards with 52x52 vector icon boxes, hover lift, and Apple Blue soft focus glow
       5. Desktop Balance — Initial Specimen Preview (.initial-report-specimen):
          - Live verified specimen preview eliminating desktop void before first analysis
          - Live beacon tag, coral/amber instant verdict box, 4-stat metric grid, legal & pricing alert shields
          - Auto-hides via CSS selectors once active analysis reports render
       6. Keynote Aurora Hero (.section-welcome):
          - Ambient floating glass chips (.hero-glass-chip) with specular reflections and float physics
          - Real-time telemetry ticker strip (.apple-telemetry-strip)
       7. Bilingual Copywriting & Typography:
          - Native Arabic RTL & English LTR typography hierarchy with Keynote headline scale
       8. DOM & Engine Integrity:
          - 100% preservation of all existing DOM IDs, form listeners, calculators, and ECharts scripts
       ========================================================================== */
    .topbar-outer {
      position: sticky;
      top: 0;
      z-index: 100;
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
      background: rgba(245, 245, 247, 0.85);
      border-bottom: 1px solid var(--line);
      transition: background-color 0.3s var(--ease-apple);
    }
    .topbar, .workspace, .data-view { margin: 0 auto; max-width: 1380px; }
    .topbar {
      align-items: center;
      display: flex;
      justify-content: space-between;
      gap: 18px;
      padding: 10px 24px;
      height: 56px;
    }

    /* Apple Keynote Typography Hierarchy */
    .typography-overview-hero-headline {
      font-family: var(--f-head);
      font-size: clamp(34px, 5.2vw, 64px);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.03em;
      color: #1d1d1f;
      margin: 0 auto;
    }
    [dir="rtl"] .typography-overview-hero-headline {
      font-size: clamp(30px, 4.8vw, 58px);
      letter-spacing: 0;
      line-height: 1.26;
    }
    .typography-site-body {
      color: var(--muted-2);
      font-size: clamp(16px, 1.8vw, 19px);
      line-height: 1.5;
      font-weight: 400;
      max-width: 38em;
      margin: 0 auto;
    }
    .text-gradient {
      background-image: linear-gradient(90deg, #1d1d1f 0%, #434344 50%, #1d1d1f 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }
    .text-gradient-vibrant {
      background-image: linear-gradient(135deg, #0071e3 0%, #9333ea 50%, #f43f5e 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: inline-block;
    }

    /* Apple Hero Welcome Section & Aurora Mesh */
    .section-welcome {
      position: relative;
      background:
        radial-gradient(1200px 520px at 50% -90px, rgba(0, 113, 227, 0.09), transparent 70%),
        radial-gradient(900px 450px at 85% 15%, rgba(147, 51, 234, 0.05), transparent 60%),
        radial-gradient(700px 380px at 15% 20%, rgba(0, 163, 122, 0.05), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--bg) 100%);
      border-bottom: 1px solid var(--line-subtle);
      padding: 54px 24px 44px;
      text-align: center;
      margin-bottom: 24px;
      overflow: hidden;
    }
    .section-welcome::before {
      content: "";
      position: absolute;
      inset: -40px;
      background:
        radial-gradient(circle at 50% 20%, rgba(0, 113, 227, 0.07) 0%, transparent 60%),
        radial-gradient(circle at 80% 60%, rgba(147, 51, 234, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 20% 70%, rgba(0, 163, 122, 0.04) 0%, transparent 50%);
      filter: blur(36px);
      animation: auroraShift 12s ease-in-out infinite alternate;
      pointer-events: none;
    }
    @keyframes auroraShift {
      0% { transform: scale(1) translate(0, 0); opacity: 0.85; }
      50% { transform: scale(1.06) translate(12px, -8px); opacity: 1; }
      100% { transform: scale(0.96) translate(-10px, 8px); opacity: 0.85; }
    }

    /* Apple Frosted Glacier Light Sheen */
    @keyframes glacierSweep {
      0% { left: -140%; opacity: 0; }
      12% { opacity: 0.85; }
      32% { left: 160%; opacity: 0; }
      100% { left: 160%; opacity: 0; }
    }
    .glacier-card {
      position: relative;
      overflow: hidden;
    }

    .glacier-card::after {
      content: "";
      position: absolute;
      top: -30%;
      left: -140%;
      width: 65%;
      height: 160%;
      background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 25%,
        rgba(255, 255, 255, 0.65) 50%,
        rgba(255, 255, 255, 0.08) 75%,
        transparent 100%
      );
      transform: skewX(-24deg);
      pointer-events: none;
      animation: glacierSweep 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
      z-index: 3;
    }

    .glacier-card:hover::after {
      animation-duration: 3.5s;
    }

    /* Apple macOS Floating Glass Widgets */
    @keyframes floatChipLeft {
      0%, 100% {
        transform: translateY(-50%) rotate(0deg);
      }
      50% {
        transform: translateY(calc(-50% - 8px)) rotate(-0.8deg);
      }
    }

    @keyframes floatChipRight {
      0%, 100% {
        transform: translateY(-50%) rotate(0deg);
      }
      50% {
        transform: translateY(calc(-50% - 10px)) rotate(1deg);
      }
    }

    .hero-glass-chip {
      position: absolute;
      background: rgba(255, 255, 255, 0.86);
      backdrop-filter: blur(20px) saturate(190%);
      -webkit-backdrop-filter: blur(20px) saturate(190%);
      border: 1px solid rgba(255, 255, 255, 0.95);
      border-radius: 20px;
      box-shadow:
        0 16px 40px -10px rgba(0, 0, 0, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.03),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
      padding: 12px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      z-index: 10;
      text-align: start;
      pointer-events: auto;
      transition: all 0.35s var(--ease-spring);
    }

    .hero-glass-chip:hover {
      transform: translateY(-50%) scale(1.05) translateY(-5px) !important;
      box-shadow:
        0 24px 50px -10px rgba(0, 0, 0, 0.16),
        0 0 0 1.5px var(--apple-blue);
      background: rgba(255, 255, 255, 0.96);
    }

    .hero-glass-chip.chip-left {
      top: 50%;
      transform: translateY(-50%);
      inset-inline-start: max(20px, calc((100% - 1340px) / 2));
      animation: floatChipLeft 6s ease-in-out infinite;
    }

    .hero-glass-chip.chip-right {
      top: 50%;
      transform: translateY(-50%);
      inset-inline-end: max(20px, calc((100% - 1340px) / 2));
      animation: floatChipRight 7s ease-in-out infinite;
    }
    .hero-chip-icon {
      width: 44px;
      height: 44px;
      border-radius: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    }
    .hero-chip-icon.amber {
      background: linear-gradient(135deg, rgba(255, 149, 0, 0.14), rgba(255, 59, 48, 0.10));
      color: #e0443e;
      border: 1px solid rgba(255, 149, 0, 0.25);
    }
    .hero-chip-icon.blue {
      background: linear-gradient(135deg, rgba(0, 113, 227, 0.14), rgba(88, 86, 214, 0.10));
      color: var(--apple-blue);
      border: 1px solid rgba(0, 113, 227, 0.25);
    }
    .hero-chip-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .hero-chip-lbl {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted-2);
    }
    .hero-chip-val {
      font-family: var(--f-head);
      font-size: 16px;
      font-weight: 800;
      color: #1d1d1f;
      line-height: 1.2;
    }
    .hero-chip-sub {
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 500;
    }
    @media (max-width: 1420px) {
      .hero-glass-chip { display: none; }
    }

    /* Live Telemetry Ticker Strip */
    .apple-telemetry-strip {
      max-width: 1040px;
      margin: 28px auto 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px 24px;
      padding: 10px 22px;
      background: rgba(255, 255, 255, 0.82);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: var(--radius-pill);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
    .telemetry-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 12.5px;
      font-weight: 600;
      color: #424245;
    }
    .telemetry-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #34c759;
      box-shadow: 0 0 8px rgba(52, 199, 89, 0.7);
      animation: rcLivePulse 2s infinite;
      flex-shrink: 0;
    }
    .telemetry-sep {
      width: 1px;
      height: 14px;
      background: rgba(0, 0, 0, 0.12);
    }
    @media (max-width: 720px) {
      .apple-telemetry-strip {
        border-radius: 18px;
        justify-content: flex-start;
      }
      .telemetry-sep { display: none; }
    }

    .welcome {
      max-width: 1040px;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }
    .lockup-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .headline-lockup {
      max-width: 920px;
      margin: 0 auto;
      text-align: center;
    }
    .logo-eyebrow {
      margin-bottom: 16px;
      display: flex;
      justify-content: center;
    }
    .tag {
      display: inline-flex;
      gap: 8px;
      align-items: center;
      padding: 7px 18px;
      border-radius: var(--radius-pill);
      background: rgba(255, 255, 255, 0.94);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(0, 0, 0, 0.07);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.95);
      color: #333336;
      font-weight: 600;
      font-size: 13px;
      transition: all 0.22s var(--ease-spring);
    }
    .tag:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    }
    .headline-wrap {
      margin-bottom: 14px;
    }

    /* macOS / iPadOS Studio Inspector Window (.rc) with Layered Spatial Shadows */
    .rc {
      margin: 0 auto 40px;
      max-width: 1380px;
      border-radius: 32px;
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.07);
      box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.02),
        0 12px 30px -6px rgba(0, 0, 0, 0.06),
        0 36px 90px -12px rgba(0, 0, 0, 0.10),
        inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
      overflow: hidden;
      transition: box-shadow 0.35s var(--ease-apple), transform 0.35s var(--ease-apple);
      position: relative;
    }
    .rc:hover {
      box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.03),
        0 18px 40px -6px rgba(0, 0, 0, 0.08),
        0 48px 110px -14px rgba(0, 0, 0, 0.13),
        inset 0 1px 1.5px rgba(255, 255, 255, 0.95);
    }
    .rc-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 24px;
      background: #fbfbfd;
      border-bottom: 1px solid rgba(0, 0, 0, 0.07);
      font-size: 13px;
      color: #6e6e73;
    }
    .macos-traffic {
      display: inline-flex;
      gap: 7px;
      margin-inline-end: 4px;
      flex-shrink: 0;
    }
    .macos-traffic span {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: inline-block;
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.35);
    }
    .macos-traffic .t-red { background: #ff5f56; border: 0.5px solid rgba(0, 0, 0, 0.1); }
    .macos-traffic .t-yellow { background: #ffbd2e; border: 0.5px solid rgba(0, 0, 0, 0.1); }
    .macos-traffic .t-green { background: #27c93f; border: 0.5px solid rgba(0, 0, 0, 0.1); }
    .rc-bar-title-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1;
    }
    .rc-bar-beacon-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #34c759;
      flex-shrink: 0;
      box-shadow: 0 0 8px rgba(52, 199, 89, 0.6);
      animation: rcLivePulse 2s infinite;
    }
    #rcBarTitle {
      font-weight: 600;
      color: #1d1d1f;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
    }
    .rc-bar-badge {
      margin-inline-start: auto;
      background: rgba(0, 113, 227, 0.08);
      color: var(--apple-blue);
      border: 1px solid rgba(0, 113, 227, 0.18);
      border-radius: var(--radius-pill);
      padding: 4px 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      flex-shrink: 0;
    }

    /* Apple Liquid Segmented Control (.rc-segmented-bar) */
    .rc-segmented-bar {
      padding: 12px 24px;
      background: #ffffff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      justify-content: flex-start;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .rc-segmented-bar::-webkit-scrollbar { display: none; }
    .rc-segmented-control {
      display: inline-flex;
      background: #f5f5f7;
      padding: 3px;
      border-radius: var(--radius-pill);
      gap: 3px;
      max-width: 100%;
      border: 1px solid rgba(0, 0, 0, 0.04);
    }
    .rc-segment-tab, .tab-button {
      appearance: none;
      border: none;
      background: transparent;
      padding: 8px 18px;
      font-size: 13px;
      font-weight: 500;
      color: #6e6e73;
      border-radius: var(--radius-pill);
      cursor: pointer;
      transition: all 0.22s var(--ease-spring);
      font-family: var(--f-body);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .rc-tab-svg {
      flex-shrink: 0;
      transition: transform 0.2s ease;
    }
    .rc-segment-tab:hover, .tab-button:hover { color: #1d1d1f; }
    .rc-segment-tab.active, .tab-button.active {
      background: #ffffff;
      color: #1d1d1f;
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    }
    .rc-segment-tab.active .rc-tab-svg, .tab-button.active .rc-tab-svg {
      color: var(--apple-blue);
      transform: scale(1.08);
    }

    /* Apple Animation Suite */
    @keyframes appleTabIn {
      from {
        opacity: 0;
        transform: translateY(8px) scale(0.995);
      }
      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }
    @keyframes pop {
      from {
        opacity: 0;
        transform: scale(0.85) translateY(14px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }
    @keyframes rcLivePulse {
      0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.7); }
      70% { box-shadow: 0 0 0 7px rgba(52, 199, 89, 0); }
      100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, 0); }
    }
    @keyframes settle {
      from { transform: scale(1.04); }
      to { transform: scale(1); }
    }

    .view:not(.hidden) {
      animation: appleTabIn 0.32s var(--ease-spring);
      padding: 24px;
    }

    h1, h2, h3, h4, p { margin: 0; }
    h1, h2, h3, h4 { font-family: var(--f-head); color: var(--ink); letter-spacing: -0.025em; }
    [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.35; }
    h1 { font-size: clamp(26px, 3.8vw, 42px); line-height: 1.15; font-weight: 800; }
    .topbar p, .muted { color: var(--muted); margin-top: 4px; font-size: 13px; font-weight: 500; }
    .pill { background: #ffffff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-xs); padding: 10px 14px; }
    .tabs {
      background: #f5f5f7;
      border: 1px solid rgba(0, 0, 0, 0.04);
      border-radius: var(--radius-pill);
      box-shadow: none;
      display: inline-flex;
      gap: 3px;
      overflow-x: auto;
      padding: 3px;
    }
    .tab-button--minor { font-size: 12.5px; font-weight: 600; opacity: .75; padding: 7px 12px; min-height: 36px; align-self: center; }
    .tab-button--alex-only { opacity: .38; cursor: not-allowed; }
    .nc-region-pill { background: #ffffff; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 700; padding: 6px 14px; transition: all .15s ease; white-space: nowrap; }
    .nc-region-pill:hover { background: #f8fafc; color: var(--ink); border-color: var(--apple-blue); }
    .nc-region-pill.active { background: var(--apple-blue); border-color: var(--apple-blue); color: #fff; box-shadow: 0 4px 12px rgba(0,113,227,.25); }
    .workspace { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(360px, .8fr) minmax(520px, 1.2fr); }
    .workspace.hidden, .data-view.hidden { display: none; }
    .data-view { display: grid; gap: 18px; }
    .toolbar { align-items: end; display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(160px, 1fr)); }
    .panel {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.07);
      border-radius: 26px;
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.02),
        0 14px 36px -8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
      min-width: 0;
      padding: 28px;
      transition: box-shadow .25s var(--ease-spring), transform .25s var(--ease-spring);
    }
    .panel:hover {
      box-shadow:
        0 4px 10px rgba(0, 0, 0, 0.03),
        0 20px 48px -10px rgba(0, 0, 0, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    }
    form, .results { display: grid; gap: 16px; }
    .field-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    label { align-items: start; color: var(--muted-2); display: grid; font-size: 13px; font-weight: 600; gap: 6px; }
    input, select, button { font: inherit; min-width: 0; }
    input, select {
      background: #fbfbfd;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 14px;
      color: var(--ink);
      min-height: 48px;
      overflow: hidden;
      padding: 11px 16px;
      font-size: 14.5px;
      text-overflow: ellipsis;
      width: 100%;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
      transition: border-color .18s var(--ease-apple), box-shadow .18s var(--ease-apple), background-color .18s var(--ease-apple);
    }
    input:focus, select:focus {
      background: #ffffff;
      border-color: var(--apple-blue);
      outline: none;
      box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.16), 0 2px 8px rgba(0, 0, 0, 0.03);
    }
    .segmented { background: #f5f5f7; border-radius: var(--radius-pill); display: grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 4px; }
    .segmented button { background: transparent; border: 0; border-radius: var(--radius-pill); color: var(--muted); cursor: pointer; min-height: 40px; padding: 8px 12px; font-weight: 600; font-size: 13px; transition: all .2s var(--ease-spring); }
    .segmented button.active { background: #ffffff; color: var(--ink); font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
    .checks { display: flex; gap: 16px; }
    .checks label { align-items: center; display: flex; gap: 8px; color: var(--ink); font-weight: 500; }
    .checks input { width: auto; min-height: auto; }
    .quick { align-items: center; background: rgba(0, 113, 227, 0.06); border: 1px solid rgba(0, 113, 227, 0.15); border-radius: 14px; color: var(--apple-blue); display: flex; justify-content: space-between; padding: 12px 16px; font-weight: 600; }
    .primary {
      background: linear-gradient(180deg, #0077ed 0%, #0071e3 100%);
      border: 0;
      border-radius: var(--radius-pill);
      box-shadow: 0 4px 14px rgba(0, 113, 227, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.38);
      color: white;
      cursor: pointer;
      font-weight: 700;
      font-size: 15px;
      min-height: 52px;
      padding: 13px 28px;
      transition: all .25s var(--ease-spring);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      position: relative;
      overflow: hidden;
      letter-spacing: -0.01em;
    }
    .primary::after {
      content: "";
      position: absolute;
      top: -20%;
      left: -120%;
      width: 50%;
      height: 140%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
      transform: skewX(-20deg);
      transition: left 0.65s ease;
      pointer-events: none;
    }
    .primary:hover::after {
      left: 150%;
    }
    .primary.btn-loading { opacity: .75; pointer-events: none; position: relative; }
    .primary.btn-loading::after { content: ""; display: inline-block; width: 16px; height: 16px; margin-left: 10px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: btnSpin .7s linear infinite; vertical-align: middle; }
    @keyframes btnSpin { to { transform: rotate(360deg); } }
    .primary:hover {
      box-shadow: 0 10px 28px rgba(0, 113, 227, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
      background: linear-gradient(180deg, #1a82f7 0%, #0077ed 100%);
      transform: translateY(-2px) scale(1.008);
    }
    .primary:active { transform: scale(0.975); }
    .verdict { align-items: center; border-radius: 8px; color: white; display: flex; justify-content: space-between; min-height: 58px; padding: 18px; }
    .verdict strong { font-size: 34px; }
    .verdict-title { align-items: center; display: flex; gap: 8px; }
    .verdict .info { color: rgba(255,255,255,.9); flex: 0 0 auto; }
    .verdict .info:hover::after { left: auto; right: 0; transform: none; }
    .Buy { background: var(--green); }
    .Buy-if-verified { background: #18705d; }
    .Negotiate { background: #b07d1a; }
    .Wait { background: #5c6680; }
    .Avoid { background: var(--red); }
    .Overpriced { background: #b45309; }
    .Verify-first { background: #7a5b12; }
    .metric-grid, .scenario-grid, .alts { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    #comparisonResults.alts { align-items: stretch; }
    .metric, .score, .alt { background: #fbfaf7; border: 1px solid #e2ddd2; border-radius: 8px; display: grid; gap: 8px; min-width: 0; padding: 12px; }
    .metric span, .score span, .alt span { color: #61706c; font-size: 12px; text-transform: capitalize; }
    .metric strong { font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
    .score-row { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .score { min-height: 104px; position: relative; }
    .score strong { font-size: 26px; }
    .score.good { background: #f2faf6; border-color: #97c8b7; }
    .score.good strong { color: var(--green); }
    .score.amber { background: #fff9eb; border-color: #e3c178; }
    .score.amber strong { color: var(--amber); }
    .score.red { background: #fff4f2; border-color: #ebb0a8; }
    .score.red strong { color: var(--red); }
    .score-head { align-items: center; display: flex; justify-content: space-between; gap: 8px; }
    .status-pill { border-radius: 999px; font-size: 11px; font-weight: 800; padding: 4px 7px; text-transform: uppercase; width: fit-content; }
    .good .status-pill { background: #dff3ea; color: var(--green); }
    .amber .status-pill { background: #fff0c8; color: var(--amber); }
    .red .status-pill { background: #ffe0dc; color: var(--red); }
    .info { align-items: center; border: 1px solid currentColor; border-radius: 50%; color: #71807b; display: inline-grid; font-size: 11px; font-style: normal; font-weight: 800; height: 18px; justify-items: center; position: relative; width: 18px; }
    .info:hover::after { background: #17211f; border-radius: 6px; bottom: 24px; color: white; content: attr(data-tip); font-size: 12px; font-weight: 500; left: 50%; line-height: 1.4; padding: 10px 12px; position: absolute; text-transform: none; transform: translateX(-50%); width: min(420px, 82vw); z-index: 20; }
    .band { border-top: 1px solid #e2ddd2; display: grid; gap: 12px; padding-top: 16px; }
    .section-title { align-items: center; display: flex; gap: 8px; }
    .hero-grid { display: grid; gap: 12px; grid-template-columns: 1.1fr .9fr; }
    .decision-card { background: linear-gradient(135deg, #152420, #26493e); border-radius: 8px; color: white; display: grid; gap: 12px; padding: 18px; }
    .decision-card .verdict { padding: 0; background: transparent; }
    .deal-score { align-items: center; display: grid; gap: 10px; grid-template-columns: 96px 1fr; }
    .ring { --p: 0; --ring: var(--red); aspect-ratio: 1; align-items: center; background: conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(255,255,255,.10) 0); border-radius: 50%; display: grid; font-size: 24px; font-weight: 800; justify-items: center; position: relative; }
    .ring::before { background: #0e1620; border-radius: 50%; content: ""; inset: 10px; position: absolute; }
    .ring span { position: relative; }
    .decision-copy { color: rgba(255,255,255,.82); line-height: 1.45; }
    .signal-stack { display: grid; gap: 10px; }
    .benchmark-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .benchmark-card { border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 10px; min-width: 0; padding: 12px; }
    .benchmark-card .metric-grid { grid-template-columns: 1fr; }
    .benchmark-card.good { background: #f2faf6; border-color: #97c8b7; }
    .benchmark-card.amber { background: #fff9eb; border-color: #e3c178; }
    .benchmark-card.red { background: #fff4f2; border-color: #ebb0a8; }
    .benchmark-card header { align-items: center; display: flex; justify-content: space-between; gap: 8px; }
    .benchmark-card h4 { margin: 0; }
    .benchmark-card p { color: var(--muted); line-height: 1.45; }
    .signal { background: #f8faf8; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; min-height: 82px; min-width: 0; padding: 12px; }
    .signal-top { align-items: center; display: flex; justify-content: space-between; gap: 12px; }
    .signal-top span { color: var(--muted); font-size: 13px; }
    .signal-top strong { font-size: 18px; }
    .bar { background: #e5ebe7; border-radius: 999px; height: 10px; overflow: hidden; }
    .bar > i { background: var(--green); display: block; height: 100%; width: var(--w); }
    .bar.red > i { background: var(--red); }
    .bar.amber > i { background: var(--amber); }
    .comparison { display: grid; gap: 12px; }
    .compare-row { display: grid; gap: 8px; }
    .compare-label { align-items: center; display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
    .hist-footer { margin-top: 10px; }
    .hist-footer-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; align-items: center; }
    .hist-footer-stats { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid rgba(128,128,128,0.18); font-size: 12px; }
    .hist-footer-count { color: var(--muted); }
    .hist-footer-median { font-weight: 600; color: var(--fg); font-size: 13px; }
    .hist-footer-median-lbl { font-weight: 400; color: var(--muted); font-size: 11px; margin-inline-end: 4px; }
    .range { background: #e8ede9; border-radius: 999px; height: 16px; overflow: hidden; position: relative; }
    .range .market { background: #79b09e; height: 100%; width: var(--market); }
    .range .subject { background: var(--red); border-radius: 999px; height: 100%; left: var(--subject-left); position: absolute; top: 0; width: 6px; }
    .legend-item { align-items: center; color: var(--muted); display: inline-flex; font-size: 13px; gap: 6px; }
    .legend-dot { border-radius: 999px; display: inline-block; height: 10px; width: 10px; }
    .matrix { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
    .matrix div { border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
    .summary-table { border-collapse: collapse; width: 100%; }
    .table-wrap { overflow-x: auto; width: 100%; }
    .comps-table { min-width: 980px; }
    .comps-table th.sortable:hover { color: var(--ink); }
    .comps-table th.sortable .sort-icon { color: var(--muted); font-size: 10px; }
    .comp-badge { border-radius: 4px; display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; white-space: nowrap; }
    .badge-green { background: #d1fae5; color: #065f46; }
    .badge-amber { background: #fef3c7; color: #92400e; }
    .badge-red   { background: #fee2e2; color: #991b1b; }
    .badge-muted { background: #f1f5f9; color: #64748b; font-weight: 400; }
    .comp-controls { align-items: end; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(120px, 1fr)) auto; }
    .comp-controls label { font-size: 12px; }
    .summary-table th, .summary-table td { border-bottom: 1px solid var(--line); padding: 10px 8px; text-align: left; vertical-align: top; }
    .summary-table th { color: var(--muted); font-size: 12px; text-transform: uppercase; }
    .summary-table td { font-size: 14px; }
    .segment-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .segment-chip { background: #eef6f1; border: 1px solid #cde2d7; border-radius: 999px; color: #2f6658; font-size: 12px; padding: 4px 7px; }
    .coverage-pill { border-radius: 999px; display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 8px; }
    .coverage-pill.good { background: #dff3ea; color: var(--green); }
    .coverage-pill.amber { background: #fff0c8; color: var(--amber); }
    .coverage-pill.red { background: #ffe0dc; color: var(--red); }
    .listing-link { color: var(--green); font-weight: 800; text-decoration: none; }
    .listing-link:hover { text-decoration: underline; }
    .comp-analyze-btn { background: none; border: 1px solid var(--green); border-radius: 4px; color: var(--green); cursor: pointer; font-size: 11px; font-weight: 700; margin-left: 8px; padding: 2px 7px; transition: background .15s, color .15s; vertical-align: middle; }
    .comp-analyze-btn:hover { background: var(--green); color: #fff; }
    .bookmarklet-box { background: #f6faf7; border: 1px solid #cfe3d8; border-radius: 8px; display: grid; gap: 10px; padding: 12px; }
    .bookmarklet-action { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
    .bookmarklet-button { background: #17211f; border-radius: 8px; color: #fff; display: inline-block; font-weight: 800; padding: 10px 12px; text-decoration: none; }
    .bookmarklet-button:hover { background: #2b3d38; }
    .review-card { background: linear-gradient(135deg, #ffffff, #f8fafc); border: 1px solid var(--soft-line); border-radius: 18px; box-shadow: 0 12px 34px rgba(15,23,42,.06); display: grid; gap: 14px; padding: 16px; }
    .review-head { align-items: start; display: flex; gap: 12px; justify-content: space-between; }
    .review-head h3 { margin-bottom: 4px; }
    .review-badge { border-radius: 999px; flex: 0 0 auto; font-size: 12px; font-weight: 850; padding: 6px 10px; }
    .review-badge.high { background: #dcfce7; color: #047857; }
    .review-badge.medium { background: #fffbeb; color: #92400e; }
    .review-badge.low, .review-badge.unknown { background: #fff1f2; color: #be123c; }
    .review-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .review-grid label { position: relative; }
    .review-grid label.needs-check input, .review-grid label.needs-check select { border-color: #f4b740; box-shadow: 0 0 0 3px rgba(244,183,64,.12); }
    .review-grid label.needs-check::after { color: #92400e; content: "check"; font-size: 11px; font-weight: 850; position: absolute; inset-inline-end: 10px; top: 2px; }
    html[lang="ar"] .review-grid label.needs-check::after { content: "راجع"; }
    .review-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
    .review-notes { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
    .review-note { background: #f8fafc; border: 1px solid var(--soft-line); border-radius: 14px; color: #64748b; font-size: 13px; line-height: 1.45; padding: 11px; }
    .review-note strong { color: var(--navy); display: block; margin-bottom: 4px; }
    /* Apple Powder Blue Keynote Hero Inquiry Card */
    .check-hero {
      background: linear-gradient(135deg, #edf5fd 0%, #dce7f3 100%);
      border: 1px solid rgba(0, 113, 227, 0.18);
      border-radius: 28px;
      box-shadow:
        0 4px 14px rgba(0, 113, 227, 0.05),
        0 22px 50px -10px rgba(0, 113, 227, 0.12),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
      display: grid;
      gap: 16px;
      overflow: hidden;
      padding: 28px 30px;
      position: relative;
    }
    .check-hero::before {
      content: "";
      position: absolute;
      inset: -24px;
      background: radial-gradient(circle at 85% 20%, rgba(0, 113, 227, 0.16) 0%, transparent 48%),
                  radial-gradient(circle at 15% 85%, rgba(6, 182, 212, 0.14) 0%, transparent 50%);
      filter: blur(28px);
      pointer-events: none;
    }
    .check-hero > * { position: relative; z-index: 1; }
    .check-hero h2, .check-hero h3 {
      color: #1d1d1f;
      font-family: var(--f-head);
      letter-spacing: -0.025em;
    }
    .check-hero p {
      color: #48484a;
      font-size: 14.5px;
      line-height: 1.58;
    }
    .check-steps {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 6px;
    }
    .check-steps span {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(0, 113, 227, 0.16);
      border-radius: var(--radius-pill);
      color: #1d1d1f;
      font-size: 13px;
      font-weight: 700;
      padding: 10px 16px;
      text-align: center;
      box-shadow: 0 2px 8px rgba(0, 113, 227, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.95);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      white-space: normal;      /* each chip sizes to its content: no fixed width or height, the text wraps instead of overflowing */
      overflow-wrap: anywhere;
      max-width: 100%;
      border-radius: 18px;
      transition: all 0.25s var(--ease-spring);
    }
    .check-steps span:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0, 113, 227, 0.14);
      border-color: var(--apple-blue);
      color: var(--apple-blue);
    }

    /* Apple Studio Initial Specimen Preview Card */
    .initial-report-specimen {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.07);
      border-radius: 28px;
      box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.02),
        0 20px 52px -12px rgba(0, 0, 0, 0.08),
        inset 0 1px 1px rgba(255, 255, 255, 0.95);
      padding: 28px;
      display: grid;
      gap: 18px;
      animation: appleTabIn 0.4s var(--ease-spring);
      position: relative;
      overflow: hidden;
    }
    .specimen-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    .specimen-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(0, 113, 227, 0.08);
      border: 1px solid rgba(0, 113, 227, 0.16);
      border-radius: var(--radius-pill);
      padding: 4px 12px;
      font-size: 11.5px;
      font-weight: 700;
      color: var(--apple-blue);
      letter-spacing: 0.03em;
    }
    .specimen-property-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--muted);
    }
    .verdict-box {
      border-radius: 20px;
      padding: 20px 22px;
      position: relative;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.08);
    }
    .verdict-box.verdict-warn {
      background: linear-gradient(135deg, rgba(255, 59, 48, 0.06) 0%, rgba(255, 149, 0, 0.04) 50%, #ffffff 100%);
      border-color: rgba(255, 59, 48, 0.2);
    }
    .verdict-box.verdict-warn .v { color: #e0443e; }
    .verdict-box .vs {
      color: #86868b;
      font-size: 11.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .verdict-box .v {
      font-family: var(--f-head);
      font-weight: 800;
      font-size: 32px;
      line-height: 1.15;
      margin-top: 6px;
      letter-spacing: -0.02em;
    }
    .verdict-box p {
      color: #6e6e73;
      font-size: 14px;
      margin-top: 8px;
      line-height: 1.5;
    }
    .stat-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .stat {
      background: #fbfbfd;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 16px;
      padding: 13px 16px;
      transition: all 0.22s var(--ease-apple);
    }
    .stat:hover {
      background: #ffffff;
      border-color: rgba(0, 113, 227, 0.2);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    }
    .stat span {
      display: block;
      color: #86868b;
      font-size: 11.5px;
      font-weight: 500;
    }
    .stat b {
      font-size: 20px;
      font-family: var(--f-head);
      font-weight: 700;
      color: #1d1d1f;
      margin-top: 3px;
      display: block;
      letter-spacing: -0.02em;
    }
    .specimen-notes-group {
      display: grid;
      gap: 8px;
    }
    .note {
      border-radius: 14px;
      padding: 12px 16px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 10px;
      background: #fbfbfd;
      border: 1px solid rgba(0, 0, 0, 0.06);
      color: var(--ink);
      line-height: 1.45;
    }
    .note.warn {
      background: rgba(255, 149, 0, 0.05);
      border-color: rgba(255, 149, 0, 0.2);
    }
    .note.ok {
      background: rgba(0, 163, 122, 0.05);
      border-color: rgba(0, 163, 122, 0.2);
    }
    .specimen-callout {
      background: #edf5fd;
      border: 1px solid rgba(0, 113, 227, 0.15);
      border-radius: 16px;
      padding: 14px 18px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 13px;
      color: #1d1d1f;
      line-height: 1.55;
    }
    .specimen-callout-icon {
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .analyze-grid.result-mode #initialReportSpecimen,
    .report-col:has(#linkOutput:not([hidden])) #initialReportSpecimen,
    .report-col:has(#output:not([hidden])) #initialReportSpecimen,
    .report-col:has(#buyerOutput:not([hidden])) #initialReportSpecimen {
      display: none !important;
    }
    .pulse-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
    /* Livability atlas */
    .atlas-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(480px, 1fr)); }
    .atlas-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; display: flex; flex-direction: column; overflow: hidden; }
    .atlas-card-header { align-items: flex-start; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; gap: 10px; justify-content: space-between; padding: 16px 20px 14px; }
    .atlas-card-header h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
    .atlas-card-header .atlas-sub { color: #64748b; font-size: 12px; line-height: 1.5; max-width: 340px; }
    .atlas-sea-badge { border-radius: 20px; font-size: 12px; font-weight: 600; padding: 4px 10px; white-space: nowrap; }
    .sea-direct { background: #dbeafe; color: #1d4ed8; }
    .sea-close  { background: #e0f2fe; color: #0369a1; }
    .sea-inland { background: #f1f5f9; color: #64748b; }
    .atlas-top-row { display: grid; gap: 0; grid-template-columns: 220px 1fr; }
    .atlas-radar { height: 220px; width: 220px; }
    .atlas-info-col { border-left: 1px solid #f1f5f9; display: flex; flex-direction: column; gap: 10px; padding: 16px; }
    [dir="rtl"] .atlas-info-col { border-left: none; border-right: 1px solid #f1f5f9; }
    .atlas-tags { display: flex; flex-wrap: wrap; gap: 5px; }
    .atlas-tag { background: #f1f5f9; border-radius: 5px; color: #475569; font-size: 11px; font-weight: 600; padding: 3px 8px; }
    .atlas-kv { color: #475569; font-size: 12px; line-height: 1.6; }
    .atlas-kv strong { color: #1e293b; font-weight: 700; }
    .atlas-scores { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); padding: 12px 20px; }
    .atlas-dim { align-items: center; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; text-align: center; }
    .atlas-dim-icon { font-size: 16px; line-height: 1; }
    .atlas-dim-label { color: #94a3b8; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
    .atlas-dim-score { font-size: 22px; font-weight: 900; line-height: 1; }
    .atlas-dim-bar { background: #e2e8f0; border-radius: 3px; height: 4px; margin-top: 2px; overflow: hidden; width: 100%; }
    .atlas-dim-fill { border-radius: 3px; height: 100%; }
    .atlas-hist-section { border-top: 1px solid #f1f5f9; padding: 12px 20px 14px; }
    .atlas-hist-title { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .05em; margin-bottom: 8px; text-transform: uppercase; }
    .atlas-hist-bars { align-items: flex-end; display: flex; gap: 4px; height: 48px; }
    .atlas-hist-bar { background: #e2e8f0; border-radius: 3px 3px 0 0; flex: 1; min-width: 0; transition: background .2s; }
    .atlas-hist-bar:hover { background: #94a3b8; }
    .atlas-hist-bar[data-peak="1"] { background: #3b82f6; }
    .atlas-hist-bar[data-median="1"] { background: #f59e0b; outline: 2px solid #d97706; outline-offset: 1px; }
    .atlas-hist-labels { color: #94a3b8; display: flex; font-size: 10px; justify-content: space-between; margin-top: 3px; }
    .atlas-notes-section { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 12px 20px; }
    .atlas-notes-title { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .05em; margin-bottom: 6px; text-transform: uppercase; }
    .atlas-note { color: #475569; font-size: 12px; line-height: 1.6; padding: 1px 0 1px 14px; position: relative; }
    .atlas-note::before { color: #3b82f6; content: "→"; left: 0; position: absolute; }
    @media (max-width: 900px) { .atlas-grid { grid-template-columns: 1fr; } }
    @media (max-width: 620px) { .atlas-top-row { grid-template-columns: 1fr; } .atlas-radar { height: 180px; width: 100%; } .atlas-info-col { border-left: none; border-top: 1px solid #f1f5f9; } }
    .pulse-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 34px rgba(20,33,61,.06); display: grid; gap: 10px; padding: 14px; }
    .pulse-card header { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
    .pulse-card h3 { margin: 0; }
    .pulse-stats { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pulse-stats div { background: #f8fafc; border-radius: 10px; padding: 9px; }
    .pulse-stats span { color: #64748b; display: block; font-size: 11px; text-transform: uppercase; }
    .pulse-stats strong { color: var(--ink); display: block; font-size: 14px; margin-top: 3px; overflow-wrap: anywhere; }
    .cx-actions { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cx-action { background: #fff; border: 1px solid #dbe5e1; border-radius: 14px; box-shadow: 0 10px 28px rgba(20,33,61,.05); display: grid; gap: 6px; padding: 13px; }
    .cx-action strong { color: var(--buyer-ink); }
    .cx-action span { color: #64748b; font-size: 13px; line-height: 1.4; }
    .buyer-layout { background: radial-gradient(circle at top left, rgba(16,185,129,.14), transparent 34%), linear-gradient(180deg, #f8fbff, #eef5f3); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); display: grid; gap: 20px; grid-template-columns: minmax(360px, .72fr) minmax(560px, 1.28fr); padding: 18px; }
    .buyer-layout .panel { background: var(--buyer-card); border: 0; border-radius: 18px; box-shadow: 0 20px 60px rgba(20,33,61,.08); color: var(--buyer-ink); }
    .buyer-layout h2, .buyer-layout h3, .buyer-headline h2, .gauge-label strong { font-family: var(--f-head); letter-spacing: -0.02em; }
    .buyer-layout .muted { color: var(--buyer-muted); }
    .buyer-form { display: grid; gap: 14px; }
    .wizard-step { background: rgba(255,255,255,.74); border: 1px solid rgba(148,163,184,.2); border-radius: 16px; box-shadow: 0 8px 30px rgba(20,33,61,.04); display: grid; gap: 12px; padding: 14px; }
    .wizard-head { align-items: center; display: flex; gap: 10px; }
    .step-dot { align-items: center; background: #e6f7f0; border-radius: 999px; color: #047857; display: inline-grid; font-size: 13px; font-weight: 900; height: 28px; justify-items: center; width: 28px; }
    .wizard-step label { color: #475569; }
    .wizard-step input, .wizard-step select { background: #fff; border: 1px solid #dbe5e1; border-radius: 12px; min-height: 44px; }
    .wizard-progress { background: #e2e8f0; border-radius: 999px; height: 8px; overflow: hidden; }
    .wizard-progress i { background: linear-gradient(90deg, var(--buyer-emerald), #6ee7b7); display: block; height: 100%; width: 100%; }
    .buyer-result { animation: riseIn .42s ease both; display: grid; gap: 16px; }
    .buyer-hero { animation: riseIn .45s ease both; backdrop-filter: blur(18px); background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,250,.78)); border: 1px solid rgba(255,255,255,.96); border-radius: 28px; box-shadow: var(--shadow-lift); color: var(--buyer-ink); display: grid; gap: 18px; padding: 22px; }
    .buyer-hero.good { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(220,252,231,.76)); }
    .buyer-hero.amber { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(254,243,199,.8)); }
    .buyer-hero.red { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,228,230,.78)); }
    .buyer-top { align-items: center; display: grid; gap: 20px; grid-template-columns: 250px 1fr; }
    .echarts-gauge-wrap { display:grid; justify-items:center; gap:0; }
    .echarts-gauge { width:220px; height:140px; }
    .echarts-ring  { width:110px; height:110px; }
    .gauge-label { color: var(--buyer-ink); display: grid; gap: 2px; justify-items: center; margin-top: 2px; text-align: center; }
    .gauge-label strong { display: block; font-size: 24px; line-height: 1.05; }
    .gauge-label span { color: var(--buyer-muted); font-size: 13px; font-weight: 750; }
    .buyer-headline h2 { color: var(--buyer-ink); font-size: clamp(30px, 4vw, 50px); line-height: .98; margin-bottom: 8px; }
    .buyer-headline p { color: #475569; font-size: 16px; line-height: 1.55; }
    .buyer-summary { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .summary-card { animation: riseIn .5s ease both; background: #fff; border: 0; border-radius: 18px; box-shadow: 0 10px 30px rgba(20,33,61,.06); display: grid; gap: 6px; padding: 14px; }
    .summary-card:nth-child(2) { animation-delay: .06s; }
    .summary-card:nth-child(3) { animation-delay: .12s; }
    .summary-card strong { font-size: 15px; }
    .summary-card span { color: #64748b; font-size: 13px; line-height: 1.45; }
    .legality-alert { background: linear-gradient(135deg, #fff7f7, #ffe4e6); border: 1px solid #fda4af; border-radius: 18px; box-shadow: 0 18px 44px rgba(190,18,60,.09); color: #7f1d1d; display: grid; gap: 10px; padding: 18px; }
    .age-card { background: linear-gradient(135deg, #ffffff, #eefaf4); border-radius: 18px; box-shadow: 0 16px 46px rgba(20,33,61,.08); display: grid; gap: 12px; padding: 16px; }
    .age-card.amber { background: linear-gradient(135deg, #ffffff, #fff7df); }
    .age-card.red { background: linear-gradient(135deg, #ffffff, #fff1f2); }
    .age-meter { background: #e2e8f0; border-radius: 999px; height: 12px; overflow: hidden; }
    .age-meter i { background: linear-gradient(90deg, #10b981, #f4b740, #f87171); display: block; height: 100%; width: var(--age-width); }
    .age-card header { align-items: center; display: flex; justify-content: space-between; gap: 10px; }
    .age-card strong { color: var(--buyer-ink); font-size: 20px; }
    .shield-card { background: linear-gradient(135deg, #ffffff, #ecfdf5); border: 0; border-radius: 22px; box-shadow: 0 18px 50px rgba(16,185,129,.12); display: grid; gap: 12px; padding: 18px; }
    .shield-card strong { color: #059669; font-size: 30px; }
    .script-box { background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; color: #334155; line-height: 1.5; padding: 14px; white-space: pre-wrap; }
    .share-row { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
    .secondary { background: #fff; border: 1px solid #dbe5e1; border-radius: 12px; color: var(--buyer-ink); cursor: pointer; font-weight: 800; min-height: 42px; padding: 10px 12px; }
    .visual-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
    .visual-card { animation: riseIn .5s ease both; background: #fff; border: 0; border-radius: 20px; box-shadow: 0 16px 46px rgba(20,33,61,.08); display: grid; gap: 10px; min-width: 0; padding: 16px; }
    .visual-card.wide { grid-column: 1 / -1; }
    .visual-card h3 { align-items: center; display: flex; justify-content: space-between; gap: 10px; }
    .chart-caption { color: #64748b; font-size: 13px; line-height: 1.45; }
    .bullet-track { background: linear-gradient(90deg, rgba(16,185,129,.22) 0 45%, rgba(244,183,64,.24) 45% 67%, rgba(248,113,113,.25) 67% 100%); border-radius: 999px; height: 26px; position: relative; }
    .bullet-marker { bottom: -8px; border-radius: 999px; position: absolute; top: -8px; transform: translateX(-50%); width: 5px; }
    .bullet-marker.market { background: #34d399; }
    .bullet-marker.subject { background: #f87171; box-shadow: 0 0 0 5px rgba(248,113,113,.16); }
    .chart-legend { display: flex; flex-wrap: wrap; gap: 10px; }
    .legend-chip { align-items: center; color: #64748b; display: inline-flex; font-size: 12px; gap: 6px; }
    .chart-dot { border-radius: 999px; display: inline-block; height: 10px; width: 10px; }
    .risk-flag-list { display: flex; flex-direction: column; gap: 8px; }
    .risk-flag-card { align-items: flex-start; border-left: 3px solid; border-radius: 6px; display: flex; gap: 10px; padding: 10px 12px; }
    .risk-flag-card.red   { background: #fff1f2; border-color: #e11d48; }
    .risk-flag-card.amber { background: #fffbeb; border-color: #d97706; }
    .risk-flag-icon { flex-shrink: 0; font-size: 14px; font-weight: 700; line-height: 1.5; }
    .risk-flag-card.red   .risk-flag-icon { color: #e11d48; }
    .risk-flag-card.amber .risk-flag-icon { color: #d97706; }
    .risk-flag-text { color: #1e293b; font-size: 13px; line-height: 1.5; }
    .risk-flag-meaning { color: #64748b; display: block; font-size: 12px; line-height: 1.5; margin-top: 5px; }
    .risk-flag-action  { color: #92400e; display: block; font-size: 12px; font-weight: 600; line-height: 1.5; margin-top: 4px; }
    .risk-flag-card.red .risk-flag-action { color: #9f1239; }
    .comp-ladder { display: grid; gap: 12px; }
    .comp-ladder-track { background: linear-gradient(90deg, rgba(16,185,129,.22), rgba(244,183,64,.25), rgba(248,113,113,.24)); border-radius: 999px; height: 22px; position: relative; }
    .comp-ladder-marker { bottom: -7px; border-radius: 999px; position: absolute; top: -7px; transform: translateX(-50%); width: 4px; }
    .comp-ladder-marker.low { background: #10b981; }
    .comp-ladder-marker.median { background: #34d399; width: 5px; }
    .comp-ladder-marker.subject { background: #f87171; box-shadow: 0 0 0 5px rgba(248,113,113,.16); width: 6px; }
    .comp-ladder-marker.high { background: #b91c1c; }
    .comp-ladder-labels { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .comp-ladder-labels span { background: #f8fafc; border-radius: 12px; color: #64748b; display: grid; font-size: 12px; gap: 2px; padding: 8px; }
    .comp-ladder-labels strong { color: var(--navy); font-size: 14px; }
    .comp-callout { border-radius: 14px; color: #334155; font-size: 14px; font-weight: 750; line-height: 1.45; padding: 12px; }
    .comp-callout.good { background: #ecfdf5; color: #047857; }
    .comp-callout.amber { background: #fffbeb; color: #92400e; }
    .comp-callout.red { background: #fff1f2; color: #be123c; }
    .matrix strong { display: block; margin-bottom: 4px; }
    .good { color: var(--green); }
    .warn { color: var(--amber); }
    .bad { color: var(--red); }
    .insight-strip { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .insight-card { background: #fff; border-radius: 18px; box-shadow: 0 12px 34px rgba(15,23,42,.06); display: grid; gap: 5px; padding: 14px; }
    .insight-card span { color: #64748b; font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .insight-card strong { color: var(--navy); font-size: 22px; line-height: 1.05; }
    .insight-card small { color: #64748b; line-height: 1.35; }
    .trust-ribbon { align-items: stretch; display: grid; gap: 10px; grid-template-columns: 1.1fr 1fr; }
    .trust-card, .goal-chip { background: rgba(255,255,255,.94); border-radius: 18px; box-shadow: 0 12px 34px rgba(15,23,42,.06); display: grid; gap: 6px; padding: 14px; }
    .trust-card { border-left: 5px solid #94a3b8; }
    .trust-card.good { border-left-color: #10b981; }
    .trust-card.amber { border-left-color: #f4b740; }
    .trust-card.red { border-left-color: #f87171; }
    .trust-card span, .goal-chip span { color: #64748b; font-size: 12px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
    .trust-card strong { color: var(--navy); font-size: 20px; line-height: 1.05; }
    .trust-card small, .goal-chip small { color: #64748b; line-height: 1.35; }
    .confidence-meter { background: #e2e8f0; border-radius: 999px; height: 8px; overflow: hidden; }
    .confidence-meter i { background: linear-gradient(90deg, #f87171, #f4b740, #10b981); display: block; height: 100%; width: var(--confidence-width); }
    .goal-chips { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .goal-chip { border-top: 4px solid #94a3b8; min-width: 0; }
    .goal-chip.good { border-top-color: #10b981; }
    .goal-chip.amber { border-top-color: #f4b740; }
    .goal-chip.red { border-top-color: #f87171; }
    .goal-chip strong { align-items: center; color: var(--navy); display: flex; font-size: 17px; gap: 8px; line-height: 1.15; }
    .goal-dot { border-radius: 999px; display: inline-block; flex: 0 0 auto; height: 10px; width: 10px; }
    .goal-chip.good .goal-dot { background: #10b981; }
    .goal-chip.amber .goal-dot { background: #f4b740; }
    .goal-chip.red .goal-dot { background: #f87171; }
    .evidence-note { background: #f8fafc; border: 1px solid var(--soft-line); border-radius: 14px; color: #64748b; font-size: 13px; line-height: 1.45; padding: 12px; }
    .detail-stack { display: grid; gap: 10px; }
    details.disclosure { background: #fff; border: 1px solid var(--soft-line); border-radius: 18px; box-shadow: 0 12px 32px rgba(15,23,42,.05); overflow: hidden; }
    details.disclosure summary { align-items: center; cursor: pointer; display: flex; font-weight: 900; justify-content: space-between; list-style: none; padding: 15px 16px; }
    details.disclosure summary::-webkit-details-marker { display: none; }
    details.disclosure summary::after { color: #94a3b8; content: "+"; font-size: 22px; line-height: 1; }
    details.disclosure[open] summary::after { content: "-"; }
    .disclosure-body { border-top: 1px solid var(--soft-line); display: grid; gap: 12px; padding: 16px; }
    .loading-steps { align-content: center; display: grid; gap: 14px; min-height: 360px; }
    .loading-step { align-items: center; background: #fff; border-radius: 16px; box-shadow: 0 10px 28px rgba(15,23,42,.06); color: #475569; display: flex; gap: 12px; padding: 13px 14px; }
    .loading-step i { animation: pulseDot 1.1s ease-in-out infinite; background: #10b981; border-radius: 999px; display: inline-block; height: 10px; width: 10px; }
    .loading-step:nth-child(2) i { animation-delay: .18s; }
    .loading-step:nth-child(3) i { animation-delay: .36s; }
    /* Global loading overlay */
    .loading-overlay { position: fixed; inset: 0; background: rgba(11, 20, 29, .75); backdrop-filter: blur(4px); display: none; place-items: center; z-index: 150; }
    .loading-overlay.active { display: grid; }
    .loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
    .spinner-ring { width: 48px; height: 48px; border: 3px solid rgba(16,185,129,.2); border-top-color: #10b981; border-radius: 50%; animation: spin .8s linear infinite; }
    .spinner-text { color: #e9f1f0; font-size: 15px; font-weight: 600; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .hist-wrap { display: grid; gap: 10px; position: relative; }
    /* Disclaimer under the verdict: one small label; hover shows the text, a tap or click opens it (phones have no hover). */
    .r2-disc { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
    .r2 .r2-hero .r2-disc { color: #1d3a5c; font-weight: 600; }
    .r2-disc > summary { cursor: pointer; list-style: none; display: inline-block; text-decoration: underline dotted; text-underline-offset: 3px; }
    .r2-disc > summary::-webkit-details-marker { display: none; }
    .r2-disc > p { margin: 4px 0 0; line-height: 1.5; max-width: 60ch; }
    .r2-bvr-sum { font-size: 15px; font-weight: 600; line-height: 1.55; margin: 6px 0 12px; }
    .r2-bvr-wrap { overflow-x: auto; }
    .r2-bvr { border-collapse: collapse; font-size: 13px; width: 100%; }
    .r2-bvr th, .r2-bvr td { border-bottom: 1px solid var(--line); padding: 9px 8px; text-align: start; vertical-align: top; }
    .r2-bvr thead th { color: var(--muted); font-size: 12px; font-weight: 600; }
    .r2-bvr td small { color: var(--muted); display: block; font-size: 11px; margin-top: 2px; }
    .r2-bvr td.win { color: var(--green); font-weight: 700; }
    .r2-bvr-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
    .hist-bars { align-items: end; border-bottom: 1px solid var(--line); display: grid; gap: 8px; grid-template-columns: repeat(8, minmax(0, 1fr)); min-height: 170px; }
    .hist-bin { align-items: center; background: none; border: none; cursor: default; display: grid; gap: 6px; justify-items: center; min-width: 0; padding: 0; }
    .hist-bin-clickable { cursor: pointer; }
    .hist-bin-clickable:hover .hist-bar { filter: brightness(1.25); }
    .hist-bin-empty { opacity: .45; cursor: default; }
    .hist-bin-active .hist-bar { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px 6px 0 0; }
    .hist-bin-tap { color: var(--muted); font-size: 10px; line-height: 1; margin-top: -4px; transition: transform .15s; }
    .hist-bin-active .hist-bin-tap { transform: rotate(180deg); color: var(--accent); }
    .hist-count { color: var(--muted); font-size: 12px; }
    .hist-bar { background: linear-gradient(180deg, #1f8468, #86c4b0); border-radius: 6px 6px 0 0; transition: filter .15s; width: 100%; }
    .hist-label { color: var(--muted); font-size: 11px; text-align: center; white-space: nowrap; }
    /* Histogram drawer */
    .hist-drawer { animation: fadeSlideUp .18s ease; background: var(--card); border: 1px solid var(--line); border-radius: 14px; margin-top: 4px; overflow: hidden; }
    @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .hist-drawer-header { align-items: center; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); display: flex; gap: 10px; padding: 10px 14px; }
    .hist-drawer-range { color: var(--ink); font-size: 13px; font-weight: 700; flex: 1; }
    .hist-drawer-count { background: rgba(255,255,255,.07); border-radius: 20px; color: var(--muted); font-size: 12px; padding: 2px 10px; }
    .hist-drawer-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; margin-left: auto; padding: 4px 6px; }
    .hist-drawer-close:hover { color: var(--ink); }
    .hist-drawer-tags { align-items: center; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; }
    .hist-tags-label { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
    .hist-tag-chip { background: rgba(99,179,237,.12); border: 1px solid rgba(99,179,237,.25); border-radius: 20px; color: #63b3ed; font-size: 12px; font-weight: 600; padding: 3px 10px; }
    .hist-tag-chip small { color: rgba(99,179,237,.65); font-size: 10px; margin-left: 2px; }
    .hist-tag-sm { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--muted); font-size: 11px; padding: 2px 7px; }
    .hist-listing-list { display: grid; gap: 0; max-height: 340px; overflow-y: auto; }
    .hist-listing-row { border-bottom: 1px solid var(--line); display: grid; gap: 3px; padding: 10px 14px; }
    .hist-listing-row:last-child { border-bottom: none; }
    .hist-listing-row:hover { background: rgba(255,255,255,.025); }
    .hist-row-top { align-items: center; display: flex; gap: 8px; }
    .hist-row-psqm { color: var(--ink); font-size: 14px; font-weight: 800; flex: 1; }
    .hist-row-link { background: rgba(255,255,255,.08); border-radius: 6px; color: var(--muted); font-size: 12px; padding: 2px 7px; text-decoration: none; }
    .hist-row-link:hover { background: rgba(255,255,255,.14); color: var(--ink); }
    .hist-row-title { color: var(--muted); font-size: 12px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hist-row-meta { color: rgba(255,255,255,.35); font-size: 11px; }
    .hist-row-seg { background: rgba(255,255,255,.07); border-radius: 4px; font-weight: 600; padding: 1px 5px; }
    .hist-row-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
    .hist-drawer-more { color: var(--muted); font-size: 12px; padding: 8px 14px; margin: 0; text-align: center; }
    .tru-badge { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.35); border-radius: 20px; color: #22c55e; display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; letter-spacing: .02em; padding: 1px 7px; vertical-align: middle; white-space: nowrap; }
    .tru-badge svg { flex-shrink: 0; }
    .hist-marker { bottom: 0; position: absolute; top: 10px; transform: translateX(-1px); z-index: 2; }
    .hist-marker::before { bottom: 0; content: ""; left: 0; position: absolute; top: 28px; width: 3px; }
    .hist-marker span { border-radius: 6px; display: block; font-size: 12px; font-weight: 800; line-height: 1.25; padding: 5px 7px; transform: translateX(-50%); white-space: nowrap; }
    .hist-marker.median::before { background: var(--green); }
    .hist-marker.median span { background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--green); }
    .hist-marker.subject::before { background: var(--red); top: 60px; }
    .hist-marker.subject span { background: #fff4f2; border: 1px solid #f0b7af; color: var(--red); top: 34px; }
    ul { margin: 0; padding-left: 18px; }
    .empty { align-items: center; color: #61706c; display: flex; min-height: 560px; justify-content: center; text-align: center; }
    .error { color: #a33a2d; }
    @media (max-width: 980px) {
      main { padding: 16px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .workspace { grid-template-columns: 1fr; }
      .buyer-layout, .buyer-top { grid-template-columns: 1fr; }
      .hero-grid { grid-template-columns: 1fr; }
      .benchmark-grid { grid-template-columns: 1fr; }
      .benchmark-card .metric-grid { grid-template-columns: 1fr; }
      .metric-grid, .scenario-grid, .alts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .pulse-grid, .check-steps, .cx-actions, .insight-strip, .trust-ribbon { grid-template-columns: 1fr; }
      .goal-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .score-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .toolbar { grid-template-columns: 1fr; }
    }
    @media (max-width: 620px) {
      .field-grid, .metric-grid, .scenario-grid, .alts, .score-row { grid-template-columns: 1fr; }
      .review-grid, .review-notes { grid-template-columns: 1fr; }
      .buyer-summary { grid-template-columns: 1fr; }
      .goal-chips { grid-template-columns: 1fr; }
      .comp-ladder-labels { grid-template-columns: 1fr 1fr; }
      .visual-grid { grid-template-columns: 1fr; }
      .visual-card.wide { grid-column: auto; }
      .verdict { align-items: flex-start; flex-direction: column; gap: 8px; }
      .benchmark-card .metric-grid { grid-template-columns: 1fr; }
    }
    @keyframes riseIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes sheen {
      0%, 55% { left: -75%; }
      100% { left: 130%; }
    }
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.4; }
    }
    @keyframes pulseDot {
      0%, 100% { opacity: .35; transform: scale(.85); }
      50% { opacity: 1; transform: scale(1.25); }
    }
    @keyframes needleSet {
      from { transform: rotate(-82deg); }
    }
    /* --- Brand + account widget --- */
    .brand-block { align-items: center; display: flex; gap: 13px; }
    .brand-logo { align-items: center; background: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.18); display: flex; height: 40px; justify-content: center; place-items: center; width: 40px; flex-shrink:0; }
    .account-widget { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
    .aw-link { color: #475569; font-weight: 700; padding: 8px 10px; text-decoration: none; }
    .aw-link:hover { color: var(--navy); }
    .plan-badge { background: #f5f5f7; border: 1px solid rgba(0,0,0,0.06); border-radius: 999px; color: #1d1d1f; font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 5px 12px; text-transform: uppercase; }
    .plan-badge.pro { background: var(--apple-blue); border-color: transparent; color: #ffffff; }
    .plan-badge.agency { background: linear-gradient(135deg, #1d1d1f, #434344); border-color: transparent; color: #fff; }
    .usage-chip { color: #86868b; font-size: 12.5px; font-weight: 600; }
    .aw-btn { border: 0; border-radius: var(--radius-pill); cursor: pointer; font: inherit; font-weight: 700; min-height: 38px; padding: 8px 16px; transition: all .18s var(--ease-apple); }
    .aw-upgrade { background: var(--apple-blue); box-shadow: 0 4px 14px rgba(0,113,227,.28); color: #fff; }
    .aw-upgrade:hover { box-shadow: 0 6px 20px rgba(0,113,227,.38); transform: translateY(-1px); }
    .aw-auth { background: #ffffff; border: 1px solid var(--line); color: #1d1d1f; box-shadow: var(--shadow-xs); }
    .aw-auth:hover { background: #f5f5f7; }
    /* --- Upgrade overlay --- */
    .upgrade-overlay { align-items: flex-start; background: rgba(15,23,42,.55); backdrop-filter: blur(6px); display: none; inset: 0; justify-content: center; overflow-y: auto; padding: 20px; position: fixed; z-index: 200; }
    .upgrade-overlay.open { display: flex; }
    .upgrade-card { background: #fff; border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.22); margin: auto; max-width: 460px; overflow: hidden; width: 100%; border: 1px solid var(--line); }
    .upgrade-top { background: linear-gradient(135deg, #0071e3, #0077ed); color: #ffffff; padding: 26px 26px 22px; }
    .upgrade-top .ut-eyebrow { font-size: 12px; font-weight: 850; letter-spacing: .08em; opacity: .88; text-transform: uppercase; }
    .upgrade-top h3 { font-size: 26px; margin: 8px 0 0; color: #ffffff; font-family: var(--f-head); }
    .upgrade-body { display: grid; gap: 14px; padding: 24px 26px 26px; }
    .upgrade-body p { color: var(--muted); line-height: 1.5; margin: 0; }
    .upgrade-perks { display: grid; gap: 9px; list-style: none; margin: 0; padding: 0; }
    .upgrade-perks li { color: var(--ink); display: flex; gap: 9px; font-size: 14.5px; }
    .upgrade-perks li::before { color: var(--apple-blue); content: "✓"; font-weight: 900; }
    .upgrade-actions { display: flex; gap: 10px; margin-top: 4px; }
    .upgrade-actions .primary { flex: 1; }
    .upgrade-actions .secondary { background: #fff; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); cursor: pointer; font-weight: 800; padding: 12px 16px; }
    /* --- Pro gate inline --- */
    .pro-gate-wrap { position: relative; overflow: hidden; border-radius: 14px; }
    .pro-gate-blur { filter: blur(5px); pointer-events: none; user-select: none; opacity: .5; }
    .pro-gate-cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255,255,255,.85); backdrop-filter: blur(12px); border-radius: 14px; padding: 16px; text-align: center; }
    .pro-gate-cta strong { color: var(--ink); font-size: 15px; display: block; margin-bottom: 2px; font-family: var(--f-head); }
    .pro-gate-cta span { color: var(--muted); font-size: 13px; }
    .pro-gate-btn { background: var(--apple-blue); border: none; border-radius: 999px; color: #fff; cursor: pointer; font-size: 13.5px; font-weight: 700; padding: 10px 22px; margin-top: 4px; box-shadow: 0 4px 14px rgba(0,113,227,.28); }
    /* ── Mortgage / leveraged-return calculator ─────────────────────── */
    .mortgage-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
    @media (max-width: 540px) { .mortgage-cards-grid { grid-template-columns: 1fr; } }
    .mortgage-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 14px 16px; }
    .mortgage-card { background: #f8fafc; border-color: #e2e8f0; }
    .mortgage-card-title { font-size: 13px; font-weight: 800; color: var(--green); margin-bottom: 10px; }
    .mortgage-stat { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
    .mortgage-stat { border-bottom-color: #f1f5f9; }
    .mortgage-stat:last-child { border-bottom: none; }
    .mortgage-stat span { color: var(--muted); }
    .mortgage-stat strong { font-weight: 700; text-align: right; }
    .mortgage-stat small { font-size: 10px; display: block; text-align: right; }
    .mortgage-footnote { font-size: 11px; color: var(--muted); margin: 6px 0 0; }
    /* ── Guest full-report gate ───────────────────────────────────────── */
    .guest-full-gate { background: #ffffff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lift); padding: 22px 20px; }
    .gfg-tagline { color: var(--muted); font-size: 13px; margin: 0 0 14px; text-align: center; }
    .gfg-items { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-bottom: 18px; }
    @media (max-width: 540px) { .gfg-items { grid-template-columns: 1fr; } }
    .gfg-item { align-items: flex-start; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; color: var(--fg); display: flex; font-size: 13px; gap: 8px; line-height: 1.4; padding: 10px 12px; }
    .gfg-actions { display: flex; flex-direction: column; align-items: center; gap: 9px; }
    .gfg-btn { background: var(--apple-blue); border: none; border-radius: 999px; color: #fff; cursor: pointer; font-size: 15px; font-weight: 700; padding: 13px 28px; width: 100%; max-width: 320px; box-shadow: 0 4px 14px rgba(0,113,227,.28); }
    .gfg-btn:hover { opacity: .9; }
    .gfg-login { color: var(--muted); font-size: 13px; text-decoration: none; }
    .guest-blur { filter: blur(6px); pointer-events: none; user-select: none; opacity: .85; }
    .guest-peek { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(92%, 340px); text-align: center; background: #ffffff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lift); z-index: 2; }
    .guest-peek-title { font-weight: 800; font-size: 14px; color: var(--ink, #fff); margin-bottom: 4px; }
    .guest-peek-sub { font-size: 12px; color: var(--muted, #9fb0c4); margin-bottom: 10px; }
    .guest-peek-btn { background: var(--apple-blue); color: #fff; border: 0; border-radius: 999px; padding: 9px 22px; font-weight: 700; font-size: 13.5px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,113,227,.28); }
    .guest-peek-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .gfg-headline { font-size: 22px; font-weight: 900; color: var(--fg); text-align: center; margin-bottom: 8px; letter-spacing: -.02em; line-height: 1.2; }
    .gfg-no-cc { color: var(--apple-blue); font-size: 13px; font-weight: 600; margin: 0; text-align: center; }
    .gfg-login:hover { color: var(--accent); }
    @media (max-width: 620px) {
      .account-widget { width: 100%; }
    }



    /* NC Custom Dropdown */
    .nc-custom-dropdown-wrapper {
      position: relative;
      width: 100%;
    }
    .nc-dropdown-trigger {
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      color: var(--ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-height: 44px;
      padding: 10px 11px;
      transition: all .15s ease;
      width: 100%;
      font-size: inherit;
    }
    .nc-dropdown-trigger:hover {
      background: rgba(255,255,255,.06);
      border-color: var(--line-strong);
    }
    .nc-dropdown-trigger:focus {
      border-color: var(--accent);
      outline: 3px solid rgba(16,185,129,.18);
    }
    .nc-dropdown-trigger.open {
      background: rgba(255,255,255,.06);
      border-color: var(--accent);
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
    .nc-dropdown-label {
      flex: 1;
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nc-dropdown-chevron {
      flex: 0 0 20px;
      stroke: var(--muted);
      transition: transform .2s ease;
      opacity: 0.7;
    }
    .nc-dropdown-trigger.open .nc-dropdown-chevron {
      transform: rotate(180deg);
    }
    .nc-dropdown-menu {
      background: rgba(255,255,255,.04);
      border: 1px solid var(--line-strong);
      border-top: none;
      border-bottom-left-radius: 12px;
      border-bottom-right-radius: 12px;
      display: none;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 1000;
      max-height: 400px;
      overflow-y: auto;
    }
    .nc-dropdown-menu.show {
      display: flex;
    }
    /* Ensure dropdown stays hidden by default until properly opened */
    .nc-custom-dropdown-wrapper .nc-dropdown-menu:not(.show) {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .nc-dropdown-search-wrapper {
      display: flex;
      align-items: center;
      padding: 8px 10px;
      border-bottom: 1px solid var(--line-strong);
      flex: 0 0 auto;
      position: relative;
    }
    .nc-dropdown-search {
      background: transparent !important;
      border: 1px solid var(--line-strong) !important;
      border-radius: 8px;
      color: var(--ink) !important;
      flex: 1;
      font-size: 13px;
      min-height: 36px;
      padding: 6px 8px 6px 28px !important;
    }
    .nc-dropdown-search::placeholder {
      color: var(--muted-2);
    }
    .nc-dropdown-search:focus {
      border-color: var(--accent) !important;
      outline: 2px solid rgba(16,185,129,.12) !important;
    }
    .nc-search-icon {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      stroke: var(--muted-2);
      pointer-events: none;
      flex: 0 0 18px;
    }
    .nc-dropdown-items {
      overflow-y: auto;
      flex: 1;
      min-height: 0;
    }
    .nc-dropdown-area-group {
      display: flex;
      flex-direction: column;
    }
    .nc-dropdown-area-header {
      background: rgba(16,185,129,.08);
      border-bottom: 1px solid var(--line-strong);
      color: var(--accent);
      cursor: default;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .05em;
      padding: 10px 14px;
      text-transform: uppercase;
      user-select: none;
    }
    .nc-dropdown-compound {
      align-items: center;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      cursor: pointer;
      display: flex;
      font-size: 13px;
      gap: 8px;
      justify-content: space-between;
      padding: 10px 14px 10px 28px;
      text-decoration: none;
      transition: background .12s ease, color .12s ease;
      user-select: none;
    }
    .nc-dropdown-compound:hover {
      background: rgba(16,185,129,.12);
      color: var(--accent);
    }
    .nc-dropdown-compound.selected {
      background: rgba(16,185,129,.16);
      border-left: 3px solid var(--accent);
      color: var(--accent);
      font-weight: 600;
      padding-left: 25px;
    }
    .nc-dropdown-compound-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nc-dropdown-compound-count {
      color: var(--muted);
      font-size: 12px;
      flex: 0 0 auto;
      font-weight: 500;
    }
    .nc-dropdown-compound.selected .nc-dropdown-compound-count {
      color: var(--accent);
      font-weight: 600;
    }
    .nc-dropdown-empty {
      color: var(--muted);
      font-size: 13px;
      padding: 20px 14px;
      text-align: center;
      user-select: none;
    }

    /* Buttons */
    .secondary { background: #ffffff; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); font-family: var(--f-body); font-weight: 500; font-size: 13.5px; padding: 9px 18px; cursor: pointer; transition: all 0.22s var(--ease-apple); }
    .secondary:hover { background: var(--bg); border-color: rgba(0,0,0,.22); transform: translateY(-1px); }

    /* Metrics, scores, alts */
    .metric, .alt, .score, .signal { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
    .metric span, .score span, .alt span { color: var(--muted); font-size: 12px; }
    .metric strong, .alt strong { color: var(--ink); }
    .score.good { background: rgba(0,163,122,.06); border-color: rgba(0,163,122,.24); }
    .score.amber { background: rgba(178,94,0,.06); border-color: rgba(178,94,0,.24); }
    .score.red { background: rgba(224,68,62,.06); border-color: rgba(224,68,62,.24); }
    .good .status-pill { background: rgba(0,163,122,.12); color: var(--mint-ink); }
    .amber .status-pill { background: rgba(178,94,0,.12); color: var(--gold); }
    .red .status-pill { background: rgba(224,68,62,.12); color: var(--coral-ink); }
    .info { color: var(--muted); border-color: var(--line-strong); }
    .info:hover::after { background: #ffffff; border: 1px solid var(--line-strong); color: var(--ink); box-shadow: var(--shadow); }

    /* Decision / hero / signals */
    .decision-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: var(--ink); }
    .decision-copy { color: var(--muted); }
    .ring::before { background: #ffffff; }
    .signal-top span { color: var(--muted); }
    .signal-top strong { color: var(--ink); }
    .bar { background: rgba(0,0,0,.06); border-radius: 999px; }

    /* Benchmark cards */
    .benchmark-card { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
    .benchmark-card.good { background: rgba(0,163,122,.06); border-color: rgba(0,163,122,.24); }
    .benchmark-card.amber { background: rgba(178,94,0,.06); border-color: rgba(178,94,0,.24); }
    .benchmark-card.red { background: rgba(224,68,62,.06); border-color: rgba(224,68,62,.24); }
    .benchmark-card p { color: var(--muted); }

    /* Tables */
    .summary-table th { color: var(--muted-2); }
    .summary-table td { color: var(--ink); }
    .summary-table th, .summary-table td { border-bottom: 1px solid var(--line); }
    .segment-chip { background: rgba(0,113,227,.08); border: 1px solid rgba(0,113,227,.18); color: var(--apple-blue); border-radius: var(--radius-pill); }
    .coverage-pill.good { background: rgba(0,163,122,.12); color: var(--mint-ink); }
    .coverage-pill.amber { background: rgba(178,94,0,.12); color: var(--gold); }
    .coverage-pill.red { background: rgba(224,68,62,.12); color: var(--coral-ink); }
    .listing-link { color: var(--apple-blue); }
    .comp-analyze-btn { border-color: var(--apple-blue); color: var(--apple-blue); border-radius: var(--radius-pill); }
    .comp-analyze-btn:hover { background: var(--apple-blue); color: #ffffff; }
    .badge-green { background: rgba(0, 163, 122, 0.08); color: #00694f; border: 1px solid rgba(0, 163, 122, 0.18); border-radius: var(--radius-pill); }
    .badge-amber { background: rgba(178, 94, 0, 0.08); color: #b25e00; border: 1px solid rgba(178, 94, 0, 0.18); border-radius: var(--radius-pill); }
    .badge-red   { background: rgba(224, 68, 62, 0.08); color: #c2312b; border: 1px solid rgba(224, 68, 62, 0.18); border-radius: var(--radius-pill); }
    .badge-muted { background: rgba(0, 0, 0, 0.04); color: var(--muted); font-weight: 500; border-radius: var(--radius-pill); }
    .bookmarklet-box { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-xs); }
    .bookmarklet-button { background: #fbfbfd; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); }
    .bookmarklet-button:hover { background: #ffffff; border-color: var(--apple-blue); }

    /* Listing review */
    .review-card { background: rgba(255,255,255,.03); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
    .review-note { background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--muted); }
    .review-note strong { color: var(--ink); }
    .review-badge.high { background: rgba(16,185,129,.18); color: var(--green); }
    .review-badge.medium { background: rgba(244,183,64,.18); color: var(--amber); }
    .review-badge.low, .review-badge.unknown { background: rgba(248,113,113,.18); color: var(--red); }



    /* Pulse */
    .pulse-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
    /* Atlas dark */
    .atlas-card { background: var(--panel); border-color: var(--line); }
    .atlas-card-header { background: var(--panel-2); border-bottom-color: var(--line); }
    .atlas-card-header h3 { color: var(--ink); }
    .atlas-card-header .atlas-sub { color: var(--muted); }
    .atlas-sea-badge.sea-direct { background: rgba(59,130,246,.18); color: #93c5fd; }
    .atlas-sea-badge.sea-close  { background: rgba(14,165,233,.18); color: #7dd3fc; }
    .atlas-sea-badge.sea-inland { background: rgba(255,255,255,.06); color: var(--muted); }
    .atlas-info-col { border-left-color: var(--line); }
    .atlas-tag { background: rgba(255,255,255,.07); color: var(--muted); }
    .atlas-kv { color: var(--muted); }
    .atlas-kv strong { color: var(--ink); }
    .atlas-dim { background: rgba(255,255,255,.04); border-color: var(--line); }
    .atlas-dim-label { color: var(--muted); }
    .atlas-dim-bar { background: rgba(255,255,255,.1); }
    .atlas-scores { border-top: 1px solid var(--line); }
    .atlas-hist-section { border-top-color: var(--line); }
    .atlas-hist-bar { background: rgba(255,255,255,.1); }
    .atlas-hist-bar[data-peak="1"] { background: var(--accent-2); }
    .atlas-hist-bar[data-median="1"] { background: #f59e0b; outline: 2px solid #d97706; outline-offset: 1px; }
    .atlas-hist-bar:hover { background: rgba(255,255,255,.22); }
    .atlas-hist-labels { color: rgba(255,255,255,.25); }
    .atlas-hist-title { color: var(--muted); }
    .atlas-notes-section { background: var(--panel-2); border-top-color: var(--line); }
    .atlas-notes-title { color: var(--muted); }
    .atlas-note { color: var(--muted); }
    .atlas-note::before { color: var(--accent-2); }
    .pulse-stats div { background: rgba(255,255,255,.03); }
    .pulse-stats span { color: var(--muted-2); }
    .pulse-stats strong { color: var(--ink); }
    .cx-action { background: rgba(255,255,255,.03); border: 1px solid var(--line); }
    .cx-action strong { color: var(--ink); }
    .cx-action span { color: var(--muted); }

    /* Buyer report (Simple view) */
    .buyer-layout { background: transparent; box-shadow: none; padding: 0; }
    .buyer-layout .panel { background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: var(--shadow-soft); color: var(--ink); }
    .wizard-step { background: rgba(255,255,255,.03); border: 1px solid var(--line); }
    .wizard-step label { color: var(--muted); }
    .step-dot { background: rgba(16,185,129,.16); color: var(--green); }
    .wizard-progress { background: rgba(255,255,255,.08); }
    .buyer-hero { background: linear-gradient(135deg, rgba(20,32,44,.92), rgba(12,22,18,.9)); border: 1px solid var(--line-strong); box-shadow: var(--shadow-lift); color: var(--ink); }
    .buyer-hero.good { background: linear-gradient(135deg, rgba(16,38,32,.92), rgba(10,22,18,.92)); border-color: rgba(16,185,129,.3); }
    .buyer-hero.amber { background: linear-gradient(135deg, rgba(40,33,12,.92), rgba(20,17,8,.92)); border-color: rgba(244,183,64,.3); }
    .buyer-hero.red { background: linear-gradient(135deg, rgba(43,16,18,.92), rgba(22,10,11,.92)); border-color: rgba(248,113,113,.3); }
    .buyer-headline h2 { color: var(--ink); }
    .buyer-headline p { color: var(--muted); }
    .gauge-label strong { color: var(--ink); }
    .gauge-label span { color: var(--muted); }
    .summary-card { background: rgba(255,255,255,.04); box-shadow: none; border: 1px solid var(--line); }
    .summary-card strong { color: var(--ink); }
    .summary-card span { color: var(--muted); }
    .legality-alert { background: linear-gradient(135deg, rgba(127,29,29,.4), rgba(76,12,18,.5)); border: 1px solid rgba(248,113,113,.4); color: #fecaca; }
    .age-card { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(16,185,129,.06)); box-shadow: var(--shadow-soft); }
    .age-card.amber { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(244,183,64,.08)); }
    .age-card.red { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(248,113,113,.08)); }
    .age-card strong { color: var(--ink); }
    .age-meter { background: rgba(255,255,255,.08); }
    .shield-card { background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(16,185,129,.1)); border: 1px solid rgba(16,185,129,.25); box-shadow: var(--shadow-soft); }
    .shield-card strong { color: var(--green); }
    .script-box { background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--ink); }
    .visual-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); box-shadow: var(--shadow-soft); border: 1px solid var(--line); }
    .chart-caption, .chart-legend .legend-chip, .comp-ladder-labels span { color: var(--muted); }
    .comp-ladder-labels span { background: rgba(255,255,255,.03); }
    .comp-ladder-labels strong { color: var(--ink); }
    .bullet-marker.market, .comp-ladder-marker.median { background: #e9f1f0; }
    .comp-callout.good { background: rgba(16,185,129,.12); color: var(--green); }
    .comp-callout.amber { background: rgba(244,183,64,.12); color: var(--amber); }
    .comp-callout.red { background: rgba(248,113,113,.12); color: var(--red); }
    .risk-flag-card.red   { background: rgba(225,29,72,.1); border-color: #e11d48; }
    .risk-flag-card.amber { background: rgba(217,119,6,.1); border-color: #d97706; }
    .risk-flag-text { color: var(--ink); }
    .risk-flag-meaning { color: var(--muted); }
    .risk-flag-action  { color: #d97706; }
    .risk-flag-card.red .risk-flag-action { color: #fb7185; }

    .insight-card, .trust-card, .goal-chip { background: rgba(255,255,255,.04); box-shadow: var(--shadow-soft); }
    .insight-card span, .trust-card span, .goal-chip span { color: var(--muted-2); }
    .insight-card strong, .trust-card strong, .goal-chip strong, .comp-ladder-labels strong { color: var(--ink); }
    .insight-card small, .trust-card small, .goal-chip small { color: var(--muted); }
    .confidence-meter { background: rgba(255,255,255,.08); }
    .evidence-note { background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--muted); }
    .bench-note { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); border-radius: 8px; color: var(--green); font-size: 12px; font-weight: 500; grid-column: 1/-1; padding: 8px 12px; }
    details.disclosure { background: rgba(255,255,255,.03); border: 1px solid var(--line); box-shadow: none; }
    details.disclosure summary { color: var(--ink); }
    .disclosure-body { border-top: 1px solid var(--line); }
    .matrix div { border: 1px solid var(--line); background: rgba(255,255,255,.02); }
    .matrix span { color: var(--muted); }
    .good { color: var(--green); } .warn { color: var(--amber); } .bad { color: var(--red); }

    /* Loading + histogram + empty */
    .loading-step { background: rgba(255,255,255,.04); box-shadow: none; color: var(--muted); }
    .hist-bars { border-bottom: 1px solid var(--line); }
    .hist-bar { background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
    .hist-count, .hist-label { color: var(--muted); }
    .hist-marker.median span { background: rgba(16,185,129,.15); border: 1px solid rgba(16,185,129,.4); color: var(--green); }
    .hist-marker.subject span { background: rgba(248,113,113,.15); border: 1px solid rgba(248,113,113,.4); color: var(--red); }
    .range { background: rgba(255,255,255,.08); }
    .empty { color: var(--muted); }
    .error { color: var(--red); }

    /* Verdict tints kept vivid on dark */
    .verdict { color: var(--ink); }
    .Wait { background: #475569; color: #fff; }
    .Avoid { background: var(--red); color: #2a0a0a; }

    /* ---- New unified layout ---- */
    [hidden] { display: none !important; }
    .view { margin: 0 auto; max-width: 1380px; }
    .view.hidden { display: none; }
    .analyze-grid { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(380px, .82fr) minmax(560px, 1.18fr); }
    .input-col, .report-col { display: grid; gap: 16px; min-width: 0; }
    .analyze-mode-bar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 18px;
    }
    .view:has(.analyze-grid.result-mode) .analyze-mode-bar,
    .result-mode .analyze-mode-bar {
      display: none !important;
    }
    /* Apple Liquid Segmented Control (.mode-toggle) */
    .mode-toggle, .view-toggle {
      background: #f5f5f7;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: var(--radius-pill);
      display: inline-flex;
      padding: 3px;
      gap: 3px;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
      width: fit-content;
      max-width: 100%;
    }
    .mode-toggle button, .view-toggle button {
      appearance: none;
      background: transparent;
      border: 0;
      border-radius: var(--radius-pill);
      color: var(--muted);
      cursor: pointer;
      font-family: var(--f-body);
      font-weight: 500;
      font-size: 13.5px;
      min-height: 38px;
      padding: 8px 20px;
      transition: all 0.22s var(--ease-spring);
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }
    .mode-toggle button:hover, .view-toggle button:hover {
      color: var(--ink);
    }
    .mode-toggle button.active, .view-toggle button.active {
      background: #ffffff;
      color: var(--ink);
      font-weight: 600;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
    }
    /* Apple Pro Intent Cards (.intent-chips & .intent-chip) */
    .intent-chips {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 20px;
    }
    .intent-chip {
      appearance: none;
      border: 1.5px solid rgba(0, 0, 0, 0.08);
      background: #ffffff;
      border-radius: 22px;
      padding: 16px 18px;
      cursor: pointer;
      text-align: start;
      display: flex;
      align-items: center;
      gap: 14px;
      transition: all 0.28s var(--ease-spring);
      font-family: var(--f-body);
      position: relative;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), inset 0 1px 0 rgba(255, 255, 255, 0.9);
      overflow: hidden;
    }
    .intent-chip:hover {
      border-color: rgba(0, 113, 227, 0.35);
      transform: translateY(-3px) scale(1.008);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 113, 227, 0.2);
    }
    .intent-chip.active {
      background: #ffffff;
      border-color: var(--apple-blue);
      box-shadow: 0 0 0 2px var(--apple-blue), 0 16px 36px rgba(0, 113, 227, 0.14);
      transform: translateY(-3px);
    }
    .intent-chip .ic-icon {
      width: 52px;
      height: 52px;
      border-radius: 16px;
      background: #f5f5f7;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.28s var(--ease-spring);
      border: 1px solid rgba(0, 0, 0, 0.05);
      color: var(--muted);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    }
    .intent-chip:hover .ic-icon {
      transform: scale(1.08) rotate(1deg);
      color: var(--apple-blue);
    }
    .intent-chip.active .ic-icon {
      background: linear-gradient(135deg, rgba(0, 113, 227, 0.12), rgba(0, 113, 227, 0.06));
      border-color: rgba(0, 113, 227, 0.25);
      color: var(--apple-blue);
      box-shadow: 0 4px 14px rgba(0, 113, 227, 0.15);
    }
    .intent-chip .ic-label {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--ink);
      display: block;
      line-height: 1.3;
      letter-spacing: -0.01em;
    }
    .intent-chip .ic-sub {
      font-size: 12px;
      color: var(--muted-2);
      display: block;
      margin-top: 3px;
      font-weight: 500;
    }
    .report-toolbar { align-items: center; display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; }
    .report-toolbar .rt-label { color: var(--muted); font-size: 13px; font-weight: 700; }
    /* City selector */
    .city-select { align-items: center; display: inline-flex; gap: 8px; }
    .city-pill { align-items: center; background: #ffffff; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink); display: inline-flex; font: inherit; font-weight: 700; gap: 8px; min-height: 38px; padding: 7px 14px; cursor: pointer; box-shadow: var(--shadow-xs); transition: all 0.18s var(--ease-apple); }
    .city-pill:hover { background: var(--bg); border-color: rgba(0,0,0,0.22); }
    .city-pill .pin { color: var(--apple-blue); }
    .city-menu { background: #ffffff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 2px; left: 0; margin-top: 8px; min-width: 220px; padding: 8px; position: absolute; top: 100%; z-index: 60; }
    .city-menu.open { display: flex; }
    .city-menu button { background: transparent; border: 0; border-radius: 10px; color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; padding: 11px 12px; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: background 0.15s ease; }
    .city-menu button:hover:not(:disabled) { background: var(--bg); }
    .city-menu button:disabled { color: var(--muted-2); cursor: not-allowed; }
    .city-menu .soon { background: rgba(244,183,64,.16); border-radius: 999px; color: var(--gold); font-size: 10.5px; font-weight: 800; padding: 3px 8px; text-transform: uppercase; }
    .city-wrap { position: relative; }
    .topbar { gap: 16px; }
    .topbar-mid { align-items: center; display: flex; gap: 12px; }
    @media (max-width: 1040px) { .analyze-grid { grid-template-columns: 1fr; } }

    /* ---- Sync progress panel ---- */
    .sync-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
    .sync-title { align-items: center; display: flex; gap: 10px; }
    .sync-state { align-items: center; border-radius: 999px; display: inline-flex; font-size: 12.5px; font-weight: 800; gap: 7px; padding: 6px 12px; }
    .sync-state.live { background: rgba(16,185,129,.16); color: var(--green); }
    .sync-state.idle { background: rgba(148,163,184,.16); color: var(--muted); }
    .sync-dot { border-radius: 999px; height: 8px; width: 8px; }
    .sync-state.live .sync-dot { background: var(--green); animation: syncPulse 1.1s ease-in-out infinite; }
    .sync-state.idle .sync-dot { background: var(--muted); }
    @keyframes syncPulse { 0%,100% { opacity:.35; transform:scale(.8);} 50%{opacity:1; transform:scale(1.3);} }
    .sync-overall { background: rgba(255,255,255,.07); border-radius: 999px; height: 10px; margin: 14px 0 6px; overflow: hidden; }
    .sync-overall i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 999px; display: block; height: 100%; transition: width .5s ease; }
    .sync-steps { display: grid; gap: 8px; margin-top: 14px; }
    .sync-step { align-items: center; background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 10px; grid-template-columns: 22px 1fr auto auto; padding: 10px 13px; }
    .sync-step .st-name { color: var(--ink); font-weight: 700; }
    .sync-step .st-rows { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
    .sync-step .st-pill { border-radius: 999px; font-size: 11px; font-weight: 800; padding: 4px 9px; text-transform: uppercase; }
    .st-pill.done { background: rgba(16,185,129,.16); color: var(--green); }
    .st-pill.active { background: rgba(244,183,64,.18); color: var(--gold); }
    .st-pill.pending { background: rgba(148,163,184,.14); color: var(--muted-2); }
    .st-ico { font-size: 15px; text-align: center; }
    .st-ico.spin { animation: spin 1s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .sync-meta { color: var(--muted-2); font-size: 12.5px; margin-top: 10px; }

    /* =====================================================
       REDESIGN ADDITIONS
       ===================================================== */

    /* Fix buyer output full-width (was 2-col grid) */
    #buyerOutput { display: block; min-width: 0; width: 100%; padding: 0 !important; background: transparent !important; box-shadow: none !important; border: 0 !important; }
    .buyer-result { min-width: 0; width: 100%; }
    #buyerOutput[hidden], #output[hidden] { display: none !important; }
    /* Tab-switch transition */
    @keyframes invSlideIn { from { opacity:0; transform:translateY(22px) scale(.98); } to { opacity:1; transform:none; } }
    .inv-results { animation: invSlideIn .38s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes buyerSlideIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
    .buyer-result { animation: buyerSlideIn .32s cubic-bezier(.2,.8,.2,1) both; }

    /* Language toggle */
    .lang-toggle { align-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; font-size: 13px; font-weight: 800; gap: 6px; min-height: 36px; padding: 6px 14px; transition: background .15s; }
    .lang-toggle:hover { background: rgba(255,255,255,.09); }
    [dir="rtl"] body, [dir="rtl"] { font-family: var(--f-body); }
    [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { font-family: var(--f-head); letter-spacing: -0.015em; }

    /* Histogram: bars-wrap scopes markers; side padding gives out-of-range markers room */
    .hist-bars-wrap { padding: 72px 15% 0; position: relative; }
    .hist-mode-btn { padding:5px 16px; border-radius:20px; font-size:12px; font-weight:600; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .18s; white-space:nowrap; }
    .hist-mode-btn.hist-mode-active { background:var(--accent); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); }
    .seg-ctrl { display:inline-flex; background:var(--surface2); border:1.5px solid var(--accent); border-radius:24px; padding:3px; gap:0; }
    .seg-ctrl-btn { padding:5px 16px; border-radius:20px; font-size:12px; font-weight:600; border:none; background:transparent; color:var(--muted); cursor:pointer; transition:all .18s; white-space:nowrap; }
    .seg-ctrl-btn.seg-active { background:var(--accent); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.18); }
    .hist-marker span { position: absolute; top: 4px; }
    /* Directional labels: left marker opens right, right marker opens left — lines never cross text */
    .hist-marker.pin-right span { transform: translateX(6px); }
    .hist-marker.pin-left  span { transform: translateX(calc(-100% - 6px)); }

    /* KPI row (buyer) */
    .buyer-kpi-row { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-bottom: 4px; }
    .buyer-kpi { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 4px; min-width: 0; padding: 16px 14px; text-align: center; }
    .buyer-kpi.good { border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.07); }
    .buyer-kpi.amber { border-color: rgba(244,183,64,.35); background: rgba(244,183,64,.07); }
    .buyer-kpi.red { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.07); }
    .buyer-kpi .kpi-lbl { color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
    .buyer-kpi .kpi-val { color: var(--ink); font-size: 20px; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
    .buyer-kpi.good .kpi-val { color: var(--green); }
    .buyer-kpi.amber .kpi-val { color: var(--amber); }
    .buyer-kpi.red .kpi-val { color: var(--red); }
    .buyer-kpi .kpi-sub { color: var(--muted); font-size: 12px; line-height: 1.3; }

    /* Chart card */
    .chart-card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-soft); display: grid; gap: 14px; padding: 20px; }
    .chart-card h3 { align-items: center; display: flex; gap: 10px; justify-content: space-between; margin: 0; }

    /* Price zone bar */
    .price-zone-bar { border-radius: 14px; height: 42px; overflow: visible; position: relative;
      background: linear-gradient(90deg, rgba(16,185,129,.28) 0% 34%, rgba(244,183,64,.26) 34% 66%, rgba(248,113,113,.26) 66% 100%); }
    .price-zone-pin { border-radius: 999px; bottom: -10px; position: absolute; top: -10px; transform: translateX(-50%); width: 7px; }
    .price-zone-pin.market-pin { background: var(--green); box-shadow: 0 0 0 5px rgba(52,211,153,.22); }
    .price-zone-pin.subject-pin { background: var(--red); box-shadow: 0 0 0 5px rgba(248,113,113,.22); z-index: 2; }
    .price-zone-pin.both-pin { background: linear-gradient(to bottom, var(--red), var(--green)); box-shadow: 0 0 0 5px rgba(255,255,255,.12); z-index: 2; }
    .price-zone-labels { color: var(--muted); display: flex; font-size: 12px; justify-content: space-between; margin-top: 14px; }
    .price-zone-labels b { color: var(--ink); }
    .price-pin-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
    .price-pin-legend .ppl { align-items: center; color: var(--muted); display: flex; font-size: 13px; gap: 7px; }
    .ppl-dot { border-radius: 999px; display: inline-block; flex: 0 0 auto; height: 11px; width: 11px; }

    /* Property identity strip */
    .prop-identity { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
    .prop-id-pill { background: var(--surface2); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 12px; font-weight: 600; padding: 4px 12px; }
    .prop-id-pill.nbhd { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: #60a5fa; }
    .prop-id-pill.loc  { background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); color: var(--green); }
    .benchmark-scope { color: var(--muted); font-size: 11px; font-weight: 500; margin-left: 4px; }
    .uvb-card { background: var(--surface1); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
    .uvb-header { border-bottom: 1px solid var(--line); padding: 12px 16px 10px; }
    .uvb-title-row { align-items: center; display: flex; gap: 10px; justify-content: space-between; }
    .uvb-heading { font-size: 13px; font-weight: 700; }
    .uvb-link { color: var(--green); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .uvb-link:hover { text-decoration: underline; }
    .uvb-subtitle { color: var(--muted); font-size: 12px; margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .uvb-location { color: var(--muted); font-size: 11px; margin: 2px 0 0; }
    .uvb-cols { display: grid; grid-template-columns: 1fr 1px 1fr; }
    .uvb-col { padding: 12px 16px; }
    .uvb-col-head { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; margin-bottom: 8px; text-transform: uppercase; }
    .uvb-cells { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .uvb-cell { display: flex; flex-direction: column; gap: 1px; }
    .uvb-cell strong { font-size: 13px; font-weight: 700; }
    .uvb-label { color: var(--muted); font-size: 10px; }
    .uvb-note span { color: var(--muted); font-size: 11px; }
    .uvb-divider { background: var(--line); }

    /* Plain-language verdict hero */
    .verdict-hero { border-radius: 22px; display: grid; gap: 16px; padding: 20px; }
    .verdict-hero.good { background: linear-gradient(135deg, rgba(16,38,32,.92), rgba(10,22,18,.92)); border: 1px solid rgba(16,185,129,.35); }
    .verdict-hero.amber { background: linear-gradient(135deg, rgba(40,33,12,.92), rgba(20,17,8,.92)); border: 1px solid rgba(244,183,64,.35); }
    .verdict-hero.red { background: linear-gradient(135deg, rgba(43,16,18,.92), rgba(22,10,11,.92)); border: 1px solid rgba(248,113,113,.35); }
    .vh-top { align-items: center; display: grid; gap: 20px; grid-template-columns: 210px 1fr; }
    .tri-dials { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
    .tri-dial { align-items: center; display: flex; flex-direction: column; }
    .tri-dial-label { color: var(--buyer-muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; margin-top: -10px; text-align: center; text-transform: uppercase; }
    .tri-dial-context { color: var(--buyer-ink); font-size: 12px; font-weight: 500; line-height: 1.4; margin-top: 5px; opacity: .75; text-align: center; }
    .vh-badge { border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .05em; margin-top: 6px; padding: 5px 12px; text-transform: uppercase; width: fit-content; }
    .good .vh-badge { background: rgba(16,185,129,.2); color: var(--green); }
    .amber .vh-badge { background: rgba(244,183,64,.2); color: var(--amber); }
    .red .vh-badge { background: rgba(248,113,113,.2); color: var(--red); }
    .vh-headline { color: var(--ink); font-size: clamp(22px, 3.5vw, 40px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-bottom: 6px; }
    .vh-copy { color: var(--muted); font-size: 15px; line-height: 1.55; }
    .vh-steps { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
    .vh-step { background: rgba(255,255,255,.04); border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 13px; line-height: 1.4; padding: 12px; }
    .vh-step strong { color: var(--ink); display: block; margin-bottom: 3px; }

    /* ROI visual bar */
    .roi-visual { display: grid; gap: 8px; }
    .roi-row { align-items: center; display: grid; gap: 10px; grid-template-columns: 100px 1fr 90px; }
    .roi-label { color: var(--muted); font-size: 12px; font-weight: 700; }
    .roi-track { background: rgba(255,255,255,.07); border-radius: 999px; height: 14px; overflow: hidden; position: relative; }
    .roi-track.roi-neg { background: rgba(248,113,113,.10); }
    .roi-fill { border-radius: 999px; height: 100%; }
    .roi-val { color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.3; text-align: right; }
    .roi-summary { color: var(--muted); font-size: 13px; margin: 4px 0 0; }
    .roi-summary strong { font-weight: 800; }
    .roi-story { background: var(--surface2); border-radius: 10px; display: grid; gap: 0; margin-bottom: 16px; overflow: hidden; }
    .roi-story-lead { align-items: baseline; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; padding: 10px 14px; }
    .roi-story-lead:last-child { border-bottom: none; }
    .roi-story-lead--exit { background: var(--surface1); }
    .roi-story-label { color: var(--muted); font-size: 12px; flex-shrink: 0; }
    .roi-story-sublabel { color: var(--muted); font-size: 12px; font-weight: 400; }
    .roi-story-lead strong { font-size: 15px; font-weight: 800; text-align: right; }
    .roi-divider-label { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; margin: 16px 0 8px; text-transform: uppercase; }
    .roi-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 4px; }
    .roi-card { background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; }
    .roi-card--highlight { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }
    .roi-card-label { font-size: 12px; font-weight: 700; }
    .roi-card-sublabel { color: var(--muted); font-size: 11px; }
    .roi-card-value { font-size: 22px; font-weight: 800; margin: 4px 0 2px; }
    .roi-card-ann { color: var(--muted); font-size: 12px; }
    .roi-card-note { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; margin-top: 8px; padding-top: 6px; }
    .roi-card-cgt { color: var(--amber, #f59e0b); font-size: 12px; margin-top: 4px; }
    .roi-footnote { color: var(--muted); font-size: 11px; margin-top: 12px; }
    /* ── Broker directory ── */
    .broker-stat { display:flex;flex-direction:column;align-items:center;padding:10px 18px;background:var(--surface2);border-radius:10px;min-width:80px; }
    .broker-stat-val { font-size:22px;font-weight:700;color:var(--text); }
    .broker-stat-label { font-size:11px;color:var(--muted);margin-top:2px; }
    #brokerGrid { display:flex;flex-direction:column;gap:10px; }
    /* Agency accordion card */
    .broker-agency-card { background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden; }
    .broker-agency-card[open] > .broker-agency-header { border-bottom:1px solid var(--line); }
    .broker-agency-header { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;list-style:none;user-select:none; }
    .broker-agency-header::-webkit-details-marker { display:none; }
    .broker-agency-left { display:flex;align-items:center;gap:12px;flex:1;min-width:0; }
    .broker-agency-name { font-weight:700;font-size:14px; }
    .broker-agency-sub { margin-top:3px;display:flex;flex-wrap:wrap;gap:3px; }
    .broker-agency-right { display:flex;align-items:center;gap:10px;flex-shrink:0; }
    .broker-agency-counts { display:flex;gap:10px;font-size:12px;color:var(--muted); }
    .broker-chevron { font-size:18px;color:var(--muted);transition:transform .2s;display:inline-block; }
    .broker-agency-card[open] .broker-chevron { transform:rotate(90deg); }
    /* Agent rows inside agency */
    .broker-agents-list { padding:0 16px 12px; }
    .broker-agent-row { display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line); }
    .broker-agent-row:last-child { border-bottom:none; }
    .broker-agent-avatar { width:32px;height:32px;border-radius:50%;background:var(--line);color:var(--text);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0; }
    .broker-agent-info { flex:1;min-width:0; }
    .broker-agent-name { font-weight:600;font-size:13px; }
    .broker-agent-meta { display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:2px; }
    .broker-agent-phone { font-size:11px;color:var(--muted); }
    .broker-agent-counts { display:flex;gap:10px;font-size:12px;color:var(--muted); }
    .broker-avatar { width:42px;height:42px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;flex-shrink:0; }
    .broker-avatar--agency { font-size:16px; }
    .broker-trust-pill { font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0; }
    /* Quality signal badges */
    .broker-qbadge { font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap;flex-shrink:0; }
    .broker-qbadge--fast { background:rgba(16,185,129,.15);color:#10b981; }
    .broker-qbadge--stale { background:rgba(245,158,11,.15);color:#f59e0b; }
    /* Quality signals panel inside expanded card */
    .broker-quality-panel { padding:10px 16px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--muted); }
    .broker-qsig { display:flex;flex-direction:column;gap:2px; }
    .broker-qsig strong { font-size:13px;color:var(--text); }
    .broker-stale-bar { margin-top:4px;height:4px;border-radius:2px;background:var(--line);width:80px;overflow:hidden; }
    .broker-stale-bar-fill { height:100%;border-radius:2px;background:var(--amber,#f59e0b); }
    .broker-stale-bar-fill--ok { background:var(--green,#10b981); }
    .broker-trust-pill--good  { background:#16a34a22;color:#16a34a; }
    .broker-trust-pill--amber { background:#d9770622;color:#d97706; }
    .broker-trust-pill--muted { background:var(--line);color:var(--muted); }
    /* Agent strip on analysis result */
    .agent-strip { align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:14px;padding:10px 14px; }
    .agent-strip-avatar { align-items:center;background:var(--accent);border-radius:50%;color:#fff;display:flex;flex-shrink:0;font-size:13px;font-weight:700;height:32px;justify-content:center;width:32px; }
    .agent-strip-info { flex:1;min-width:0; }
    .agent-strip-name { font-size:13px;font-weight:600; }
    .agent-strip-agency { color:var(--muted);font-size:12px; }
    .agent-strip-link { background:none;border:none;color:var(--accent);cursor:pointer;font-size:12px;font-weight:600;padding:0;text-decoration:underline; }
    /* Price history sparkline */
    .sparkline-wrap { background:var(--panel-2);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;padding:12px 14px; }
    .sparkline-label { color:var(--muted);font-size:11px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em; }
    .sparkline-change { font-size:12px;font-weight:600;margin-top:4px; }
    .broker-badges { display:flex;flex-wrap:wrap;gap:5px; }
    .broker-badge { font-size:11px;padding:2px 8px;border-radius:20px;font-weight:600; }
    .broker-badge--tru { background:#1d4ed822;color:#1d4ed8; }
    .broker-badge--ver { background:#16a34a22;color:#16a34a; }
    .broker-badge--doc { background:#7c3aed22;color:#7c3aed; }
    .broker-count { display:flex;flex-direction:column;align-items:center; }
    .broker-count strong { font-size:14px;font-weight:700; }
    .broker-count span { font-size:10px;color:var(--muted);margin-top:1px; }
    .broker-nbhd { font-size:10px;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--muted); }
    /* ── end Broker directory ── */
    .roi-investor-details { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
    .roi-investor-summary { cursor: pointer; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--accent-2, #34d399); user-select: none; display: flex; align-items: center; gap: 6px; list-style: none; }
    .roi-investor-summary::-webkit-details-marker { display: none; }
    .roi-investor-summary:hover { color: var(--ink); }
    .roi-investor-details[open] .roi-investor-summary { border-bottom: 1px solid var(--line); }
    .roi-investor-details > .roi-divider-label,
    .roi-investor-details > .roi-cards { padding: 0 16px; }
    .roi-investor-details > .roi-divider-label { margin-top: 12px; }
    .roi-investor-details > .roi-cards { padding-bottom: 4px; }
    .roi-assumptions { margin-top: 14px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
    .roi-assumptions summary { cursor: pointer; padding: 10px 14px; font-size: 12px; color: var(--muted); user-select: none; }
    .roi-assumptions summary:hover { color: var(--text); }
    .roi-assumptions-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .roi-assumptions-table th { background: var(--surface2); color: var(--muted); font-weight: 600; text-align: left; padding: 6px 10px; }
    .roi-assumptions-table td { padding: 6px 10px; border-top: 1px solid var(--line); color: var(--text); vertical-align: top; }
    .roi-assumptions-table td:last-child { color: var(--muted); font-size: 11px; }
    .roi-assumptions-note { margin: 8px 10px 10px; font-size: 11px; color: var(--muted); line-height: 1.5; }
    .roi-assumptions-table th, .roi-assumptions-table td { text-align: start; }
    .tone-good  { color: var(--green); }
    .tone-amber { color: var(--amber); }
    .tone-red   { color: var(--red); }

    /* Score visual (donut stub) */
    .score-vis { align-items: center; display: flex; gap: 14px; }
    .score-ring { flex: 0 0 auto; }
    .score-meta { display: grid; gap: 3px; }
    .score-meta strong { color: var(--ink); font-size: 22px; }
    .score-meta span { color: var(--muted); font-size: 12px; }
    .score-meta small { color: var(--muted); font-size: 11px; line-height: 1.35; }

    /* Parameter tooltip enhanced */
    .param-explain { border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; line-height: 1.5; margin-top: 8px; padding-top: 8px; }

    /* Investor metric row */
    .inv-metric-row { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
    .inv-metric { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 6px; padding: 14px; }
    .inv-metric .im-label { color: var(--muted-2); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
    .inv-metric .im-val { color: var(--ink); font-size: 18px; font-weight: 800; line-height: 1.1; }
    .inv-metric .im-sub { color: var(--muted); font-size: 12px; line-height: 1.35; }
    .inv-metric.good { border-color: rgba(16,185,129,.3); } .inv-metric.good .im-val { color: var(--green); }
    .inv-metric.amber { border-color: rgba(244,183,64,.3); } .inv-metric.amber .im-val { color: var(--amber); }
    .inv-metric.red { border-color: rgba(248,113,113,.3); } .inv-metric.red .im-val { color: var(--red); }

    @media (max-width: 680px) {
      .buyer-kpi-row { grid-template-columns: 1fr; }
      .vh-top { grid-template-columns: 1fr; }
      .vh-steps { grid-template-columns: 1fr; }
      .tri-dials { gap: 0; }
      .tri-dial-label { font-size: 10px; }
      .roi-row { grid-template-columns: 72px 1fr 55px; }
      .inv-metric-row { grid-template-columns: 1fr; }
      /* NC Custom Dropdown Mobile */
      .nc-dropdown-menu { max-height: 300px !important; }
      .nc-dropdown-compound { padding: 8px 12px 8px 24px; font-size: 12px; }
      .nc-dropdown-compound.selected { padding-left: 21px; }
      .nc-dropdown-compound-name { font-size: 12px; }
      .nc-dropdown-compound-count { font-size: 11px; }
      .nc-dropdown-search { font-size: 12px; min-height: 36px; }
    }


    /* ── Comparables browser ── */
    .cb { display: grid; gap: 10px; margin-top: 6px; }
    .cb-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0 8px; background: var(--bg, #f5f8fc); }
    .cb-fbtn { border: 1px solid #10243A; background: #10243A; color: #fff; border-radius: 999px; padding: 7px 14px; font: inherit; font-weight: 800; cursor: pointer; min-height: 40px; }
    .cb-fsel { border: 1px solid var(--line); background: var(--panel, #fff); color: var(--ink); border-radius: 999px; padding: 7px 12px; font: inherit; font-weight: 700; min-height: 40px; max-width: 100%; }
    .cb-act { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--apple-blue, #0071e3); color: var(--apple-blue, #0071e3); background: var(--panel, #fff); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 34px; }
    .cb-count { color: var(--muted); font-size: 12.5px; margin-inline-start: auto; }
    .pp-strip { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 10px 0; background: rgba(255,255,255,.03); }
    .pp-strip .pp-h { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
    .pp-strip .pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; align-items: start; }
    .pp-strip .pp-c span { display: block; font-size: 11px; color: var(--muted); }
    .pp-strip .pp-c b { display: block; font-size: 14px; overflow-wrap: anywhere; }
    .pp-strip .pp-c i { display: block; font-size: 11px; font-style: normal; color: var(--muted); }
    .pp-strip .pp-note { font-size: 12px; color: var(--amber, #f59e0b); margin-top: 8px; }
    .cb-csv { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 36px; }
    .cb-sec { background: var(--panel, #fff); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; overflow-x: clip; }
    .cb-sec h4 { margin: 0 0 2px; font-size: 14.5px; }
    .cb-sub { color: var(--muted); font-size: 12.5px; margin: 0 0 8px; }
    .cb-line { position: relative; height: 96px; margin: 26px 6px 4px; }
    .cb-axis { position: absolute; left: 0; right: 0; top: 64px; height: 6px; border-radius: 6px; background: linear-gradient(90deg, rgba(18,128,92,.2), rgba(0,113,227,.2) 50%, rgba(192,57,43,.2)); }
    .cb-dot { position: absolute; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; border: 2px solid var(--panel, #fff); cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.25); background: #0071e3; }
    .cb-dot.cheap { background: #12805C; } .cb-dot.dear { background: #C0392B; }
    .cb-dot.on, .cb-dot:focus-visible { outline: 3px solid #10243A; outline-offset: 1px; }
    .cb-dot.off { opacity: .15; pointer-events: none; }
    .cb-med, .cb-pin { position: absolute; top: 4px; bottom: 18px; }
    .cb-med { width: 2px; background: #12805C; } .cb-pin { width: 3px; background: #C0392B; }
    .cb-med span, .cb-pin span { position: absolute; white-space: nowrap; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; }
    .cb-med span { top: -22px; color: #12805C; background: rgba(18,128,92,.1); } .cb-pin span { bottom: -24px; color: #fff; background: #C0392B; }
    .cb-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; margin: 26px 2px 0; }
    .cb-pop { display: none; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
    .cb-pop.show { display: flex; }
    .cb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .cb-card { border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--panel, #fff); min-width: 0; }
    .cb-p { font-size: 17px; font-weight: 800; }
    .cb-facts { color: var(--muted); font-size: 12.5px; }
    .cb-why { display: flex; flex-wrap: wrap; gap: 4px; } .cb-why span { display: inline-flex; align-items: center; min-height: 20px; line-height: 1.15; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; background: #D8EBFF; color: #10243A; }
    .cb-bdg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
    .cb-b { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 20px; line-height: 1.15;
            font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 3px 7px; white-space: nowrap; border: 1px solid transparent; vertical-align: middle; }
    .cb-bdg { align-items: center; }
    .cb-bdg > .cb-b, .cb-why > span { flex: 0 0 auto; min-width: max-content; }   /* wrap, never squeeze: squeezed badges overlapped */
    .cb-bdg > .cb-b.place { min-width: 0; max-width: 100%; flex: 0 1 auto; }
    .cb-b.place .pl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
    .cb-b.good { color: #12805C; background: rgba(18,128,92,.08); border-color: rgba(18,128,92,.22); }
    .cb-b.warn { color: #B26A00; background: rgba(178,106,0,.08); border-color: rgba(178,106,0,.22); }
    .cb-b.info { color: #0071e3; background: rgba(0,113,227,.08); border-color: rgba(0,113,227,.22); }
    .cb-b.mute { color: var(--muted); border-color: var(--line); }
    .cb-b.bad { color: #C0392B; background: rgba(192,57,43,.08); border-color: rgba(192,57,43,.25); }
    button.cb-b { font-family: inherit; cursor: pointer; } button.cb-b.tap { text-decoration: underline dotted; text-underline-offset: 2px; }
    .cb .cheap { color: #12805C; } .cb .same { color: #0071e3; } .cb .dear { color: #C0392B; }
    .cb-acts { display: flex; gap: 6px; align-items: center; margin-top: auto; }
    .cb-go { border: 0; border-radius: 10px; background: #0071e3; color: #fff; font: inherit; font-weight: 800; padding: 8px 12px; cursor: pointer; min-height: 40px; }
    .cb-open { font-size: 12px; font-weight: 700; color: var(--muted); text-decoration: none; padding: 8px 6px; }
    .cb-buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .cb-bucket { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel, #fff); color: var(--ink); font: inherit; cursor: pointer; text-align: start; min-height: 60px; }
    .cb-bucket b { display: block; font-size: 19px; } .cb-bucket.on { border-color: #0071e3; box-shadow: inset 0 0 0 1px #0071e3; }
    .cb-rows { display: none; margin-top: 8px; } .cb-rows.show { display: block; }
    .cb-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 2px; border-top: 1px solid var(--line); }
    .cb-row .cb-l1 { font-weight: 800; } .cb-row .cb-acts { grid-row: span 3; align-self: center; margin: 0; } .cb-row .cb-facts, .cb-row .cb-bdg { grid-column: 1; }
    .cb-more { width: 100%; margin-top: 8px; min-height: 42px; border: 1px solid var(--line); background: var(--panel, #fff); color: var(--ink); border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; }
    .mc-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
    .mc-chip { border: 1px solid var(--line); background: var(--panel, #fff); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; min-height: 38px; }
    .mc-chip.on { background: #10243A; color: #fff; border-color: #10243A; }
    .mc-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 8px 0 10px; }
    .mc-in label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; min-width: 0; }
    .mc-in select, .mc-in input { width: 100%; min-height: 42px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; font: inherit; font-size: 15px; background: var(--panel, #fff); color: var(--ink); }
    @media (max-width: 480px) { .mc-in { grid-template-columns: 1fr 1fr; } .mc-in label:nth-child(2) { grid-column: 1 / -1; grid-row: 1; } }
    .cb-legend { color: var(--muted); font-size: 11.5px; margin: 8px 0 0; }
    .cb-up { font-size: 13px; color: var(--muted); text-align: center; margin: 6px 0 0; } .cb-up a { color: #0071e3; font-weight: 700; }
    .cb-shade { position: fixed; inset: 0; background: rgba(10,20,35,.45); z-index: 10050; display: none; align-items: flex-end; justify-content: center; }
    .cb-shade.show { display: flex; }
    .cb-sheet { background: var(--panel, #fff); color: var(--ink); width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; border-radius: 18px 18px 0 0; padding: 16px 16px 12px; }
    .cb-sheet h3 { margin: 0 0 10px; font-size: 16px; }
    .cb-grp { margin: 0 0 12px; } .cb-grp > span { display: block; font-size: 12.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
    .cb-opts { display: flex; flex-wrap: wrap; gap: 6px; }
    .cb-opts button { border: 1px solid var(--line); background: var(--panel, #fff); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; min-height: 38px; }
    .cb-opts button.on { background: #10243A; color: #fff; border-color: #10243A; } .cb-opts button:disabled { opacity: .4; cursor: default; }
    .cb-foot { position: sticky; bottom: -12px; display: flex; gap: 8px; padding: 10px 0 4px; background: var(--panel, #fff); }
    .cb-foot button { flex: 1; min-height: 44px; border-radius: 12px; font: inherit; font-weight: 800; cursor: pointer; border: 1px solid var(--line); background: var(--panel, #fff); color: var(--ink); }
    .cb-foot .apply { background: #0071e3; color: #fff; border-color: #0071e3; }
    @media (min-width: 641px) { .cb-shade { align-items: center; } .cb-sheet { border-radius: 18px; } }
    @media (max-width: 640px) {
      .cb-cards { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
      .cb-card { flex: 0 0 82%; scroll-snap-align: start; }
      .cb-bucket b { font-size: 17px; } .cb-count { width: 100%; margin: 0; }
    }
    /* ---- Collapsible input panel (result-mode) ---- */
    .analyze-grid.result-mode { grid-template-columns: 1fr; }
    .analyze-grid.result-mode .input-col { display: none !important; }
    .edit-btn { align-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); border-radius: 11px; color: var(--muted); cursor: pointer; display: inline-flex; font: inherit; font-size: 13px; font-weight: 800; gap: 7px; min-height: 36px; padding: 7px 14px; transition: background .15s; }
    .edit-btn:hover { background: rgba(255,255,255,.10); color: var(--ink); }

    /* ---- Payment section redesign ---- */
    .bed-pill { background: var(--panel-2); border: 1px solid var(--line); border-radius: 20px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 13px; transition: background .15s, color .15s, border-color .15s; }
    .bed-pill.active { background: var(--accent); border-color: var(--accent); color: #fff; }
    .payment-section { border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 12px; padding: 16px; background: #fbfbfd; }
    .payment-tabs { background: #f5f5f7; border-radius: var(--radius-pill); display: grid; gap: 3px; grid-template-columns: 1fr 1fr; padding: 3px; }
    @media (max-width: 700px) { .bed-pill, .payment-tab { min-height: 44px; } }
    .payment-tab { background: transparent; border: 0; border-radius: var(--radius-pill); color: var(--muted); cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; min-height: 38px; padding: 8px; transition: all .2s var(--ease-spring); }
    .payment-tab.active { background: #ffffff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.08); font-weight: 700; }
    .installment-fields { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
    .installment-calc { background: rgba(0, 113, 227, 0.08); border: 1px solid rgba(0, 113, 227, 0.2); border-radius: var(--radius-pill); color: var(--apple-blue); font-size: 13px; font-weight: 700; padding: 10px 16px; text-align: center; }

    /* ---- Decision guide ---- */
    .decision-guide { background: #ffffff; border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 0; overflow: hidden; box-shadow: var(--shadow-xs); }
    .dg-header { align-items: center; cursor: pointer; display: flex; font-weight: 700; gap: 10px; justify-content: space-between; padding: 16px 20px; user-select: none; }
    .dg-header span { align-items: center; background: rgba(0, 163, 122, 0.1); border-radius: var(--radius-pill); color: var(--mint); display: inline-flex; font-size: 11px; font-weight: 700; padding: 3px 10px; }
    .dg-body { border-top: 1px solid var(--line); display: grid; gap: 10px; padding: 16px 20px; }
    .dg-body.hidden { display: none; }
    .dg-item { align-items: flex-start; display: flex; gap: 10px; }
    .dg-check { align-items: center; background: #ffffff; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; display: inline-flex; flex: 0 0 auto; height: 20px; justify-content: center; margin-top: 1px; transition: all .18s var(--ease-apple); width: 20px; }
    .dg-check.checked { background: var(--apple-blue); border-color: var(--apple-blue); }
    .dg-check.checked::after { color: #ffffff; content: "✓"; font-size: 12px; font-weight: 900; }
    .dg-item-text { color: var(--muted); font-size: 13px; line-height: 1.45; }
    .dg-item-text strong { color: var(--ink); display: block; font-size: 13px; margin-bottom: 1px; }

    /* ---- Investor hero ---- */
    /* Investor view — restructured */
    .inv-results { display: grid; gap: 18px; }
    .inv-verdict-top { align-items: center; background: linear-gradient(135deg,#0e2318,#172f22); border: 1px solid rgba(16,185,129,.25); border-radius: 20px; display: grid; gap: 24px; grid-template-columns: 140px 1fr; padding: 24px; }
    @media(max-width:600px){ .inv-verdict-top { grid-template-columns: 1fr; justify-items: center; } }
    .inv-dial-wrap { align-items: center; display: flex; flex-direction: column; gap: 4px; }
    .echarts-ring { width: 120px !important; height: 120px !important; }
    .inv-dial-label { display: grid; gap: 2px; justify-items: center; text-align: center; }
    .inv-dial-label strong { display: block; font-family: var(--f-head); font-size: 32px; line-height: 1; }
    .inv-dial-label span { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
    .inv-verdict-body { display: grid; gap: 8px; }
    .verdict-badge-row { align-items: center; display: flex; gap: 10px; }
    .verdict-chip { border-radius: 8px; font-family: var(--f-head); font-size: 16px; font-weight: 800; padding: 6px 14px; }
    .verdict-chip.Buy,.verdict-chip.Buy-if-verified { background: rgba(16,185,129,.18); color: #34d399; }
    .verdict-chip.Negotiate { background: rgba(244,183,64,.18); color: #f4b740; }
    .verdict-chip.Wait,.verdict-chip.Verify-first { background: rgba(244,183,64,.12); color: #fbbf24; }
    .verdict-chip.Avoid, .verdict-chip.Overpriced { background: rgba(248,113,113,.18); color: #f87171; }
    .inv-verdict-copy { color: var(--ink); font-size: 15px; font-weight: 600; margin: 0; }
    .inv-verdict-sub  { color: var(--muted); font-size: 13px; margin: 0; }
    .inv-signal-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); }
    @media(max-width:600px){ .inv-signal-row { grid-template-columns: 1fr; } }
    .inv-section { display: grid; gap: 10px; }
    .inv-section-title { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; margin: 0; text-transform: uppercase; }
    .inv-risk-section { background: rgba(248,113,113,.06); border: 1px solid rgba(248,113,113,.2); border-radius: 14px; display: grid; gap: 10px; padding: 18px; }
    .inv-risk-section ul { color: var(--muted); margin: 0; padding-left: 18px; }
    .inv-risk-section li { margin-bottom: 4px; }
    .signal-desc { color: var(--muted); font-size: 10px; line-height: 1.4; margin: 4px 0 0; }
    .inv-memo { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }

    /* ---- Plain-language price context card ---- */
    .price-context-card { background: rgba(255,255,255,.03); border: 1px solid var(--line); border-radius: 20px; display: grid; gap: 14px; padding: 20px; }
    .pc-header { align-items: center; display: flex; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
    .pc-header h3 { margin: 0; font-size: 15px; }
    .pc-verdict { color: var(--ink); font-size: 14px; line-height: 1.6; margin: 0; }
    .pc-rows { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
    .pc-row { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 12px; justify-content: space-between; padding: 10px 14px; }
    .pc-row:last-child { border-bottom: 0; }
    .pc-row span { color: var(--muted); font-size: 12px; flex-shrink: 0; }
    .pc-row strong { color: var(--ink); font-size: 14px; font-weight: 700; text-align: right; }
    .pc-row.pc-em { background: rgba(255,255,255,.03); }
    .pc-row.pc-asking strong { font-size: 16px; }
    .pc-row.pc-asking.good strong { color: var(--green); }
    .pc-row.pc-asking.amber strong { color: var(--amber); }
    .pc-row.pc-asking.red strong { color: var(--red); }
    .pc-col-hdr { direction: ltr; display: flex; justify-content: flex-end; gap: 8px; padding: 2px 14px 4px; }
    .pc-col-hdr > span { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); text-align: right; min-width: 100px; }
    .pc-vals { align-items: center; direction: ltr; display: flex; gap: 8px; flex-shrink: 0; }
    .pc-vals > strong { min-width: 100px; text-align: right; }
    .pc-psqm { color: var(--muted); font-size: 12px; min-width: 90px; text-align: right; white-space: nowrap; }
    .pc-action { border-radius: 10px; font-size: 13px; font-weight: 700; line-height: 1.45; margin: 0; padding: 12px 14px; }
    .pc-action.good { background: rgba(16,185,129,.12); color: var(--green); }
    .pc-action.amber { background: rgba(244,183,64,.12); color: var(--amber); }
    .pc-action.red { background: rgba(248,113,113,.12); color: var(--red); }

    /* ---- RTL fix: chart containers with LTR gradients/grids must not inherit rtl direction ---- */
    /* linear-gradient(90deg) reverses under direction:rtl, misaligning pins vs colour zones */
    .hist-wrap, .hist-bars-wrap, .hist-bars, .price-zone-bar, .bullet-track, .comp-ladder-track { direction: ltr; }
    /* Let text labels inside re-inherit their natural direction */
    .hist-marker span, .hist-label, .price-zone-labels, .price-pin-legend,
    .comp-ladder-labels, .chart-legend { direction: inherit; }

    /* ---- ROI ECharts chart ---- */
    .roi-echarts { width: 100%; min-height: 180px; }

    /* ---- QC fixes ---- */
    @media (max-width: 900px) { .goal-chips { grid-template-columns: repeat(2, 1fr); } }
    .buyer-kpi-row .buyer-kpi { min-width: 0; }
    .hist-wrap { overflow: hidden; }
    .inv-metric-row { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

    /* focus-visible outlines */
    .tab-button:focus-visible, .mode-toggle button:focus-visible, .view-toggle button:focus-visible,
    .primary:focus-visible, .secondary:focus-visible, .edit-btn:focus-visible,
    .payment-tab:focus-visible, .dg-check:focus-visible, .lang-toggle:focus-visible,
    .theme-toggle:focus-visible { outline: 3px solid var(--apple-blue); outline-offset: 2px; }

    /* Theme toggle */
    .theme-toggle { align-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); cursor: pointer; display: inline-flex; font: inherit; font-size: 15px; gap: 0; min-height: 36px; padding: 5px 10px; transition: background .15s; }
    .theme-toggle:hover { background: rgba(255,255,255,.09); }

    /* Verdict chip — boosted saturation for Egyptian market (bolder is better on dark screens) */
    .verdict-chip.Buy, .verdict-chip.Buy-if-verified { background: rgba(52,211,153,.25); color: #34d399; border: 1px solid rgba(52,211,153,.45); }
    .verdict-chip.Negotiate { background: rgba(251,191,36,.24); color: #fbbf24; border: 1px solid rgba(251,191,36,.45); }
    .verdict-chip.Wait, .verdict-chip.Verify-first { background: rgba(251,191,36,.18); color: #fbbf24; border: 1px solid rgba(251,191,36,.32); }
    .verdict-chip.Avoid, .verdict-chip.Overpriced { background: rgba(248,113,113,.25); color: #f87171; border: 1px solid rgba(248,113,113,.45); }

    /* ==========================================================================
       APPLE macOS PRO DAYLIGHT DESIGN SYSTEM (Tokens & Component Overrides)
       --------------------------------------------------------------------------
       Target: Universal Native Daylight Design System
       Aesthetics & Design Rules:
         - Surfaces: Apple Daylight canvas (#f5f5f7) with Cupertino squircle panels (#ffffff).
         - Accents: Unified Apple Royal Blue (#0071e3 / #0077ed) replacing legacy teal/emerald.
         - Segmented Nav: macOS Sonoma pill capsule tabs with active white squircle elevation.
         - Input Fields: Crisp white (#ffffff) with 12px squircle radius & Apple blue focus glow.
         - Badges & Modals: High-contrast Apple status pills and royal blue gradient pro sheets.
         - Typography: Alexandria & IBM Plex Sans Arabic for RTL, Plus Jakarta Sans for LTR.
         - Safety: 100% preservation of all DOM IDs, ECharts, calculators, and API hooks.
       ========================================================================== */
    :root {
      color: #1d1d1f;
      background: #f5f5f7;
      /* Core Apple Tokens */
      --bg: #f5f5f7;
      --bg-2: #fbfbfd;
      --panel: #ffffff;
      --panel-2: #f8fafc;
      --panel-elevated: rgba(255, 255, 255, 0.90);
      --ink: #1d1d1f;
      --muted: #6e6e73;
      --muted-2: #86868b;
      --muted-3: #a1a1a6;
      --line: rgba(0, 0, 0, 0.08);
      --line-strong: rgba(0, 0, 0, 0.14);
      --line-subtle: rgba(0, 0, 0, 0.04);
      --line-focus: #0071e3;
      --apple-blue: #0071e3;
      --apple-blue-hover: #0077ed;
      --apple-blue-soft: rgba(0, 113, 227, 0.08);
      --green: #00805f;
      --amber: #b25e00;
      --red: #e0443e;
      --accent: #0071e3;
      --accent-2: #0077ed;
      --navy: #1d1d1f;
      --soft-bg: #f5f5f7;
      --soft-line: rgba(0, 0, 0, 0.08);
      --shadow-soft: 0 4px 18px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-lift: 0 12px 36px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
      /* Buyer-view tokens */
      --buyer-ink: #1d1d1f;
      --buyer-muted: #6e6e73;
      --buyer-bg: #f5f5f7;
      --buyer-card: #ffffff;
      --buyer-emerald: #00805f;
      --buyer-gold: #b25e00;
      --buyer-coral: #e0443e;
      --text: #1d1d1f;
      --fg: #1d1d1f;
      --card: #ffffff;
      --border: rgba(0, 0, 0, 0.08);
      --surface: rgba(0, 0, 0, 0.03);
      --surface1: rgba(0, 0, 0, 0.03);
      --surface2: rgba(0, 0, 0, 0.05);
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 18px;
      --radius-xl: 22px;
      --f-head: "Alexandria", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --f-body: "IBM Plex Sans Arabic", "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }
    body {
      background: var(--bg);
      color: var(--ink);
      font-family: var(--f-body);
      -webkit-font-smoothing: antialiased;
    }
    h1, h2, h3, h4 {
      color: var(--ink);
      font-family: var(--f-head);
      letter-spacing: -0.02em;
    }
    [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 {
      letter-spacing: 0;
    }
    .muted, .topbar p { color: var(--muted); }
    a { color: var(--apple-blue); }
    .tabs {
      background: #f5f5f7;
      border: 1px solid rgba(0, 0, 0, 0.05);
      border-radius: var(--radius-pill);
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
      padding: 3px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      width: fit-content;
      max-width: 100%;
    }
    .tab-button {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--muted);
      border-radius: var(--radius-pill);
      font-weight: 600;
      font-size: 13.5px;
      min-height: 36px;
      padding: 7px 16px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      cursor: pointer;
      line-height: 1.2;
      transition: all .18s cubic-bezier(.16, 1, .3, 1);
    }
    .tab-button:hover {
      background: rgba(0, 0, 0, 0.04);
      color: var(--ink);
    }
    .tab-button.active {
      background: #ffffff;
      color: var(--ink);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
      font-weight: 700;
    }
    .tab-button.active .rc-tab-svg {
      color: var(--apple-blue);
    }
    .panel {
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: var(--shadow-soft);
      color: var(--ink);
    }
    input, select, textarea {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.14) !important;
      border-radius: 12px !important;
      color: var(--ink) !important;
      font-size: 14.5px !important;
      font-family: var(--f-body) !important;
      box-shadow: none !important;
      transition: border-color .15s ease, box-shadow .15s ease !important;
    }
    input::placeholder, textarea::placeholder { color: var(--muted-2); }
    select option { background: #fff; color: var(--ink); }
    input:focus, select:focus, textarea:focus {
      border-color: var(--apple-blue) !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16) !important;
    }
    .primary, button.primary {
      background: var(--apple-blue);
      border: 0;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(0, 113, 227, 0.28);
      color: #ffffff;
      font-weight: 700;
      font-size: 15px;
      min-height: 48px;
      padding: 13px 22px;
      transition: all .16s cubic-bezier(.16, 1, .3, 1);
    }
    .primary:hover, button.primary:hover {
      background: var(--apple-blue-hover);
      box-shadow: 0 12px 32px rgba(0, 113, 227, 0.36);
      transform: translateY(-1px);
    }
    .segmented {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 12px;
      padding: 4px;
    }
    .segmented button {
      background: transparent;
      border: 0;
      border-radius: 9px;
      color: var(--muted);
      cursor: pointer;
      min-height: 40px;
      padding: 8px 12px;
      font-weight: 700;
      transition: all .15s ease;
    }
    .segmented button.active {
      background: #ffffff;
      color: var(--ink);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      font-weight: 800;
    }
    .quick {
      background: rgba(0, 113, 227, 0.06);
      border: 1px solid rgba(0, 113, 227, 0.15);
      border-radius: 12px;
      color: var(--apple-blue);
    }
    .nc-dropdown-trigger {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.14) !important;
      border-radius: 12px !important;
      color: var(--ink) !important;
      font-weight: 600 !important;
    }
    .nc-dropdown-trigger:hover {
      background: #f8fafc !important;
      border-color: rgba(0, 0, 0, 0.22) !important;
    }
    .nc-dropdown-trigger:focus, .nc-dropdown-trigger.open {
      border-color: var(--apple-blue) !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.16) !important;
    }
    .nc-dropdown-chevron { stroke: var(--muted); }
    .nc-dropdown-menu {
      background: #ffffff !important;
      border: 1px solid var(--line) !important;
      border-radius: 14px !important;
      box-shadow: var(--shadow-lift) !important;
    }
    .nc-dropdown-search-wrapper { border-color: var(--line); }
    .nc-dropdown-search {
      background: #f8fafc !important;
      border: 1px solid var(--line) !important;
      border-radius: 8px !important;
      color: var(--ink) !important;
    }
    .nc-dropdown-search::placeholder { color: var(--muted-2); }
    .nc-dropdown-search:focus {
      border-color: var(--apple-blue) !important;
      outline: none !important;
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.14) !important;
    }
    .nc-search-icon { stroke: var(--muted); }
    .nc-dropdown-area-header {
      background: rgba(0, 113, 227, 0.06);
      border-color: var(--line);
      color: var(--apple-blue);
      font-weight: 700;
    }
    .nc-dropdown-compound {
      border-color: rgba(0, 0, 0, 0.04);
      color: var(--ink);
    }
    .nc-dropdown-compound:hover {
      background: rgba(0, 113, 227, 0.06);
      color: var(--apple-blue);
    }
    .nc-dropdown-compound.selected {
      background: rgba(0, 113, 227, 0.10);
      border-color: var(--apple-blue);
      color: var(--apple-blue);
      font-weight: 700;
    }
    .nc-dropdown-compound-count { color: var(--muted); }
    .nc-dropdown-compound.selected .nc-dropdown-compound-count { color: var(--apple-blue); }
    .nc-dropdown-empty { color: var(--muted); }
    label { color: var(--muted-2); }
    .secondary {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.14);
      border-radius: 12px;
      color: var(--ink);
      font-weight: 700;
    }
    .secondary:hover { background: #f8fafc; border-color: rgba(0,0,0,.22); }
    .lang-toggle, .theme-toggle {
      background: rgba(0, 0, 0, 0.04);
      border: 1px solid rgba(0, 0, 0, 0.08);
      color: var(--ink);
      border-radius: 999px;
      font-weight: 600;
    }
    .lang-toggle:hover, .theme-toggle:hover {
      background: rgba(0, 0, 0, 0.07);
    }
    .city-pill {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 999px;
      color: var(--ink);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
      font-weight: 700;
    }
    .plan-badge {
      background: rgba(0, 0, 0, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.08);
      color: var(--muted);
      border-radius: 999px;
      font-weight: 700;
    }
    .plan-badge.pro {
      background: var(--apple-blue);
      color: #ffffff;
      border-color: transparent;
      box-shadow: 0 4px 12px rgba(0, 113, 227, 0.28);
    }
    .aw-upgrade {
      background: var(--apple-blue);
      color: #ffffff;
      border-radius: 999px;
      font-weight: 700;
      box-shadow: 0 6px 18px rgba(0, 113, 227, 0.25);
    }
    .aw-upgrade:hover {
      background: var(--apple-blue-hover);
      box-shadow: 0 8px 24px rgba(0, 113, 227, 0.35);
      transform: translateY(-1px);
    }
    .aw-auth {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.12);
      color: var(--ink);
      border-radius: 999px;
      font-weight: 700;
    }
    .aw-auth:hover { background: #f8fafc; }
    .signal {
      background: #fbfbfd;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(0,0,0,.02);
    }
    .signal-top span { color: var(--muted-2); }
    .signal-top strong { color: var(--ink); font-family: var(--f-head); }
    .signal-desc { color: var(--muted); }
    .bar { background: rgba(0, 0, 0, 0.07); border-radius: 999px; }
    .ring { background: conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(0, 0, 0, 0.08) 0); }
    .ring::before { background: #ffffff; }
    .metric, .alt, .score {
      background: #fbfbfd;
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }
    .metric span, .score span, .alt span {
      color: var(--muted-2);
      font-weight: 600;
    }
    .metric strong, .alt strong {
      color: var(--ink);
      font-family: var(--f-head);
    }
    .uvb-card { background: #ffffff; border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-soft); }
    .uvb-header { border-color: var(--line); }
    .uvb-col-head, .uvb-label, .uvb-location, .uvb-subtitle { color: var(--muted); }
    .uvb-divider { background: var(--line); }
    .verdict-hero { border-radius: 18px; box-shadow: var(--shadow-soft); }
    .verdict-hero.good { background: linear-gradient(135deg, #f0fdf7, #ffffff); border: 1px solid rgba(0, 128, 95, 0.25); }
    .verdict-hero.amber { background: linear-gradient(135deg, #fffbeb, #ffffff); border: 1px solid rgba(178, 94, 0, 0.25); }
    .verdict-hero.red { background: linear-gradient(135deg, #fff1f2, #ffffff); border: 1px solid rgba(224, 68, 62, 0.25); }
    .vh-copy { color: var(--muted); }
    .vh-step { background: rgba(0,0,0,.03); border: 1px solid var(--line); color: var(--muted); border-radius: 12px; }
    .vh-step strong { color: var(--ink); }
    .shield-card { background: linear-gradient(135deg,#f0fdf7,#ffffff); border: 1px solid rgba(0,128,95,.2); box-shadow: var(--shadow-soft); border-radius: 20px; }
    .shield-card strong { color: var(--green); }
    .price-context-card { background: #ffffff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); }
    .pc-rows { border-color: var(--line); }
    .pc-row { border-color: var(--line); }
    .pc-row span { color: var(--muted); }
    .pc-row strong { color: var(--ink); }
    .pc-row.pc-em { background: #f8fafc; }
    .chart-card { background: #ffffff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-soft); }
    .hist-bars { border-color: var(--line); }
    .hist-count, .hist-label { color: var(--muted); }
    .hist-marker.median span { background: #f0fdf7; border: 1px solid rgba(0,128,95,.3); color: var(--green); }
    .hist-marker.subject span { background: #fff1f2; border: 1px solid rgba(224,68,62,.3); color: var(--red); }
    .inv-metric { background: #fbfbfd; border: 1px solid var(--line); border-radius: 14px; }
    .inv-metric .im-label { color: var(--muted-2); }
    .inv-metric .im-val { color: var(--ink); font-family: var(--f-head); }
    .inv-metric .im-sub { color: var(--muted); }
    .buyer-kpi { background: #fbfbfd; border: 1px solid var(--line); border-radius: 14px; }
    .buyer-kpi .kpi-lbl { color: var(--muted-2); }
    .buyer-kpi .kpi-val { color: var(--ink); font-family: var(--f-head); }
    .buyer-kpi .kpi-sub { color: var(--muted); }
    details.disclosure { background: #ffffff; border: 1px solid var(--line); border-radius: 16px; }
    details.disclosure summary { color: var(--ink); }
    .disclosure-body { border-color: var(--line); color: var(--ink); }
    .risk-flag-card.red { background: #fff1f2; border: 1px solid rgba(224,68,62,.25); border-radius: 14px; }
    .risk-flag-card.amber { background: #fffbeb; border: 1px solid rgba(178,94,0,.25); border-radius: 14px; }
    .risk-flag-text { color: var(--ink); }
    .evidence-note { background: #f8fafc; border: 1px solid var(--line); color: var(--muted); border-radius: 12px; }
    .comp-callout.good { background: #f0fdf7; color: var(--green); border-radius: 10px; }
    .comp-callout.amber { background: #fffbeb; color: var(--amber); border-radius: 10px; }
    .comp-callout.red { background: #fff1f2; color: var(--red); border-radius: 10px; }
    .sparkline-wrap { background: #fbfbfd; border: 1px solid var(--line); border-radius: 12px; }
    .comp-ladder-labels span { background: #f8fafc; }
    .comp-ladder-labels strong { color: var(--ink); }
    .summary-table th { color: var(--muted-2); font-size: 12px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid var(--line-strong); padding: 12px 10px; }
    .summary-table td { color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13.5px; padding: 12px 10px; }
    .summary-table tr:hover td { background: rgba(0, 0, 0, 0.015); }
    .bench-note { background: rgba(0,113,227,.06); border: 1px solid rgba(0,113,227,.18); color: var(--apple-blue); border-radius: 10px; }
    .param-explain { border-color: var(--line); color: var(--muted); }
    .chart-caption { color: var(--muted); }
    .price-zone-labels { color: var(--muted); }
    .price-zone-labels b { color: var(--ink); }
    .price-pin-legend .ppl { color: var(--muted); }
    .info { color: var(--muted); border-color: rgba(0,0,0,.2); }
    .info:hover::after { background: #ffffff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-lift); }
    .inv-signal-row .signal { background: #fbfbfd; }
    .legality-alert { background: linear-gradient(135deg,#fff7f7,#ffe4e6); border: 1px solid rgba(224,68,62,.25); color: #7f1d1d; border-radius: 16px; }
    .agent-strip { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; }
    .sparkline-label { color: var(--muted); }
    .modal-overlay { background: rgba(0,0,0,.35); backdrop-filter: blur(8px); }
    .atlas-dim-label { color: var(--muted-2); }
    .atlas-hist-labels { color: var(--muted); }
    .atlas-hist-bar { background: #e5e5ea; }
    .atlas-hist-bar:hover { background: #c7c7cc; }
    .pro-gate-cta span { color: var(--muted); }
    .trust-card { border-left-color: var(--line-strong); }
    .goal-chip { border-top-color: var(--line-strong); }

    /* ── Light-mode component refinements ──────────────────── */
    .city-menu { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lift); }
    .city-menu button:hover:not(:disabled) { background: rgba(0, 113, 227, 0.06); color: var(--apple-blue); }
    .pill { background: #ffffff; border: 1px solid var(--line); box-shadow: 0 1px 3px rgba(0,0,0,.04); }
    .badge-green { background: rgba(0,128,95,.08); color: #00805f; border: 1px solid rgba(0,128,95,.2); border-radius: 6px; }
    .badge-amber { background: rgba(178,94,0,.08); color: #b25e00; border: 1px solid rgba(178,94,0,.2); border-radius: 6px; }
    .badge-red   { background: rgba(224,68,62,.08); color: #e0443e; border: 1px solid rgba(224,68,62,.2); border-radius: 6px; }
    .badge-muted { background: rgba(0,0,0,.04); color: var(--muted); border-radius: 6px; }
    .score.good  { background: #f0fdf7; border-color: rgba(0,128,95,.25); }
    .score.amber { background: #fffbeb; border-color: rgba(178,94,0,.25); }
    .score.red   { background: #fff1f2; border-color: rgba(224,68,62,.25); }
    .benchmark-card.good  { background: #f0fdf7; border: 1px solid rgba(0,128,95,.25); border-radius: 14px; }
    .benchmark-card.amber { background: #fffbeb; border: 1px solid rgba(178,94,0,.25); border-radius: 14px; }
    .benchmark-card.red   { background: #fff1f2; border: 1px solid rgba(224,68,62,.25); border-radius: 14px; }
    .range { background: #e5e5ea; }
    .bullet-marker.market,
    .comp-ladder-marker.median { background: var(--green); }
    .pulse-stats div { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; }
    .cx-action { background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: 14px; }
    .summary-card { background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: 16px; }
    .script-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; }
    .insight-card, .trust-card, .goal-chip { background: #ffffff; border: 1px solid var(--line); border-radius: 14px; }
    .loading-step { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; }
    .matrix div { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; }
    .wizard-step { background: #ffffff; border: 1px solid var(--line); box-shadow: var(--shadow-soft); border-radius: 16px; }
    .mode-toggle, .view-toggle { background: rgba(0,0,0,.05); border-radius: 12px; padding: 4px; }
    .bookmarklet-box { background: #f8fafc; border: 1px solid var(--line); border-radius: 14px; }
    .bookmarklet-button { background: var(--ink); color: #ffffff; border-radius: 10px; }
    .bookmarklet-button:hover { background: #000000; }
    .gfg-item { background: #ffffff; border: 1px solid var(--line); color: var(--ink); border-radius: 12px; }
    .gfg-headline { color: var(--ink); }
    .atlas-tag { background: rgba(0,0,0,.05); color: var(--ink); border-radius: 6px; }
    .atlas-dim { background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; }
    .atlas-dim-bar { background: #e5e5ea; }
    .atlas-sea-badge.sea-direct { background: rgba(0,113,227,.08); color: #0071e3; }
    .atlas-sea-badge.sea-close  { background: rgba(0,113,227,.05); color: #0077ed; }
    .atlas-sea-badge.sea-inland { background: rgba(0,0,0,.05); color: var(--muted); }
    .hist-drawer-header { background: #f8fafc; border-bottom: 1px solid var(--line); }
    .hist-drawer-count { background: rgba(0,0,0,.05); color: var(--muted); }
    .hist-row-meta { color: var(--muted); }
    .hist-row-link { background: rgba(0,113,227,.06); color: var(--apple-blue); }
    .hist-row-link:hover { background: rgba(0,113,227,.12); color: var(--apple-blue); }
    .hist-row-seg { background: rgba(0,0,0,.05); }
    .sync-overall { background: rgba(0,0,0,.08); }
    .sync-step { background: #f8fafc; }
    .wizard-progress { background: #e5e5ea; }
    .age-meter { background: #e5e5ea; }
    .confidence-meter { background: #e5e5ea; }
    .info:hover::after { background: #ffffff; border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-lift); }
    .upgrade-card { background: #ffffff; border-radius: 24px; box-shadow: var(--shadow-lift); }
    .upgrade-body p { color: var(--muted); }
    .upgrade-perks li { color: var(--ink); }
    .upgrade-actions .secondary { background: #ffffff; border: 1px solid var(--line); color: var(--ink); }
    .age-meter { background: rgba(0,0,0,.1); }
    .confidence-meter { background: rgba(0,0,0,.1); }
    /* Info tooltip popup */
    .info:hover::after { background: #ffffff; }
    /* Upgrade card — light restore */
    .upgrade-card { background: #ffffff; }
    .upgrade-body p { color: #475569; }
    .upgrade-perks li { color: #334155; }
    .upgrade-actions .secondary { background: #ffffff; border-color: #dbe5e1; color: #0f172a; }
    /* Plan badge (free tier) */
    .plan-badge { background: #e6f7f0; border-color: #b6e4cf; color: #1a7a5e; }
    /* Auth button */
    .aw-auth { background: #ffffff; border-color: #dbe5e1; color: #0d1117; }
    .aw-auth:hover { background: #f1f5f9; }
    /* Form section labels */
    .form-section-label { color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .08em; margin: 0 0 8px; text-transform: uppercase; }
    /* Optional collapsible */
    .opt-details { margin-top: 18px; }
    .opt-details > summary { align-items: center; color: var(--muted); cursor: pointer; display: flex; font-size: 13px; font-weight: 700; gap: 8px; list-style: none; padding: 4px 0; user-select: none; }
    .opt-details > summary::-webkit-details-marker { display: none; }
    .opt-details > summary::before { content: "▸"; color: var(--accent); font-size: 11px; transition: transform .2s; }
    .opt-details[open] > summary::before { transform: rotate(90deg); }
    .opt-hint { color: var(--muted); font-size: 11px; font-weight: 600; opacity: .7; }
    /* Disclosure teaser */
    .disclosure > summary { align-items: baseline; display: flex; flex-wrap: wrap; gap: 8px; }
    .disc-title { flex-shrink: 0; }
    .disc-teaser { color: var(--muted); font-size: 12px; font-weight: 600; opacity: .8; }

    /* ============================================================
       MOBILE — ≤ 480px
       ============================================================ */

    /* Tabs: hide scrollbar, keep scrollability */
    .tabs { scrollbar-width: none; -ms-overflow-style: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab-button { white-space: nowrap; }

    @media (max-width: 480px) {
      /* --- Global spacing --- */
      main { padding: 10px; }
      .panel { padding: 14px; border-radius: 14px; }

      /* --- Header: compact --- */
      .topbar { gap: 8px; }
      .topbar h1 { font-size: 20px; }
      .topbar p { display: none; }          /* hide tagline on very small screens */
      .topbar-mid { display: flex; }        /* keep city picker visible on mobile */
      .city-pill { font-size: 13px; padding: 6px 10px; min-height: 34px; gap: 5px; }
      .city-menu { min-width: 180px; }
      .account-widget { gap: 6px; }
      .aw-link { display: none; }           /* hide "Pricing" text link */
      .usage-chip { display: none; }        /* hide "X/3 today" usage counter */
      .aw-btn { padding: 7px 12px; font-size: 13px; min-height: 36px; }

      /* --- Tabs: smaller text so all 5 fit without overcrowding --- */
      .tab-button { font-size: 12px; padding: 8px 10px; }

      /* --- Area Match form: 2×2 grid on mobile --- */
      #compareResultsPanel .alts { grid-template-columns: 1fr; }
      .toolbar[style*="flex-wrap"] label[id="lbl_compareBeds"],
      .toolbar[style*="flex-wrap"] label[id="lbl_compareBaths"] { flex: 1 1 calc(50% - 7px); min-width: 0; }

      /* --- Histogram: fully responsive on narrow screens --- */
      .hist-wrap { overflow-x: unset; }
      .hist-bars-wrap { min-width: 0; padding: 84px 4% 0; }   /* two marker chip rows need ~75px; 52 let them cover the counts (22 Oct) */
      .hist-count span { display: none; }                      /* number only: 'N listings' wrapped to two lines in 8 narrow bins */
      .hist-label { position: relative; z-index: 3; background: #fff; }  /* marker lines pass behind the range labels */
      .hist-bars { gap: 3px; min-height: 130px; }
      .hist-label { font-size: 9px; line-height: 1.25; min-height: 2.5em; }   /* both modes keep a 2-line label row: total-price ranges wrap, so the bars jumped 15px on switching */
      .hist-count { font-size: 10px; }
      .hist-marker span { font-size: 10px; padding: 3px 5px; white-space: nowrap; }

      /* --- Neighbourhood drawer: slide up from bottom (sheet style) --- */
      #nbhdDrawer {
        top: auto !important;
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 85vh !important;
        border-radius: 20px 20px 0 0;
        transform: translateY(100%) !important;
        transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,.45) !important;
      }
      #nbhdDrawer[style*="translateX(0)"] { transform: translateY(0) !important; }

      /* --- Broker agent popup: don't overflow viewport --- */
      .broker-agent-popup { min-width: unset !important; width: min(560px, 92vw) !important; }

      /* --- Trends controls: stack to single column --- */

      /* --- Comparables controls: 2-column flex wrap --- */
      .comp-controls { display: flex; flex-wrap: wrap; gap: 6px; }
      .comp-controls label { flex: 1 1 calc(50% - 3px); min-width: 0; }
      .comp-controls label:has(input[type=checkbox]) { flex: 0 0 auto; align-self: center; }
      .comp-controls select { width: 100%; }

      /* --- ROI / financial table rows --- */
      .roi-row { grid-template-columns: 60px 1fr 50px; font-size: 12px; }

      /* --- Trust ribbon / insight strip: already 1-col at 980px --- */

      /* --- Suppress non-essential decorative elements --- */
      .brand-logo { width: 34px; height: 34px; font-size: 17px; border-radius: 9px; }

      /* --- Verdict hero: center the tri-dials --- */
      .tri-dials { justify-content: center; }

      /* --- Broker page: stack controls vertically --- */
      #brokersTab .panel > div:first-child { flex-direction: column; align-items: stretch; }
      #brokerSearch { width: 100% !important; box-sizing: border-box; }
      #brokerNeighborhood, #brokerFilter, #brokerType, #brokerSort { width: 100%; box-sizing: border-box; }
      /* Broker card: hide counts on mobile, keep trust + chevron */
      .broker-agency-header { flex-wrap: wrap; gap: 8px; }
      .broker-agency-counts { display: none; }
      .broker-agency-right { gap: 6px; flex-shrink: 0; }
      .broker-badges { gap: 3px; }
      .broker-agency-left { flex: 1 1 100%; } .broker-agency-right { flex-wrap: wrap; justify-content: flex-start; } .broker-agency-name { overflow-wrap: anywhere; }
      .broker-agent-row { flex-wrap: wrap; row-gap: 8px; } .broker-agent-info { flex: 1 1 calc(100% - 52px); } .broker-agent-counts, .broker-agent-row .broker-trust-pill, .ag-mini { flex: none; }

      /* --- Neighbourhood drawer: listing row buttons stack on narrow --- */
      #nbhdDrawerBody [style*="display:flex"][style*="flex-wrap:wrap"] { gap: 6px; }
      #nbhdDrawerBody a[style*="white-space:nowrap"],
      #nbhdDrawerBody button[style*="white-space:nowrap"] { flex: 1 1 auto; justify-content: center; }
    }

    /* Drawer open class for mobile (JS sets translateX(0), override for mobile) */
    @media (max-width: 480px) {
      #nbhdDrawer.drawer-open { transform: translateY(0) !important; }
    }

    /* ── Mobile layout ── */
    @media (max-width: 640px) {
      /* ── Compact 2-row header ──
         Row 1: [logo + Betak] ←→ [lang | theme | auth]
         Row 2: [city pill — full width]
         Overrides the 980px column rule so mobile gets a tighter header. */
      .topbar { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
      .topbar p { font-size: 10px; margin-top: 2px; }
      .topbar h1 { font-size: 21px; }
      .brand-block { flex: 1 1 0; min-width: 0; }
      .account-widget { width: auto !important; flex: 0 0 auto; gap: 6px; flex-wrap: nowrap; }
      .topbar-mid { flex: 0 0 100%; order: 10; }
      .aw-link { display: none; }
      .usage-chip { display: none; }
      .plan-badge { display: none; }
      .aw-upgrade { display: none; }
      .aw-btn { font-size: 13px; padding: 7px 11px; min-height: 40px; }

      /* Nav: allow tabs to scroll horizontally */
      .tabs-outer { position: relative; }
      .tabs-outer::after {
        content: ''; position: absolute; top: 0; right: 0; height: 100%; width: 48px;
        background: linear-gradient(to left, var(--bg, #0a1628) 0%, transparent 100%);
        pointer-events: none; border-radius: 0 18px 18px 0;
        transition: opacity .25s; opacity: 1;
      }
      .tabs-outer::after { background: linear-gradient(to left, #f1f5f9 0%, transparent 100%); }
      .tabs-outer.scrolled-end::after { opacity: 0; }
      /* RTL: fade appears on the left side */
      .tabs-outer.is-rtl::after { right: auto; left: 0; background: linear-gradient(to right, var(--bg, #0a1628) 0%, transparent 100%); border-radius: 18px 0 0 18px; }
      .tabs-outer.is-rtl::after { background: linear-gradient(to right, #f1f5f9 0%, transparent 100%); }
      .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: 2px; padding-bottom: 2px; }
      .tab-button { flex-shrink: 0; padding: 8px 10px; font-size: 12px; min-height: 40px; }
      .tab-button--minor { min-height: 40px; }

      /* Report toolbar: hide label to save room */
      .report-toolbar { gap: 8px; }
      .rt-label { display: none; }
      .edit-btn { font-size: 12px; padding: 6px 10px; }

      /* Analyze layout: single column (also covers .analyze-grid alias) */
      .analyze-grid { grid-template-columns: 1fr !important; }
      .analyze-layout { grid-template-columns: 1fr !important; gap: 14px; }
      .form-col, .report-col { width: 100%; }

      /* Offer shield: stack fair value + max offer vertically */
      .shield-card > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }

      /* Share row: wrap buttons */
      .share-row { flex-wrap: wrap; gap: 6px; }
      .share-row .secondary { flex: 1 1 calc(50% - 6px); min-width: 0; font-size: 12px; padding: 7px 6px; }

      /* ROI cards: 2 per row on mobile */
      .roi-cards { grid-template-columns: 1fr 1fr !important; }

      /* Comparables table: always allow horizontal scroll */
      .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

      /* Metric grid: 2 columns */
      .metric-grid { grid-template-columns: 1fr 1fr !important; }

      /* Pulse grid: single column */
      .pulse-grid { grid-template-columns: 1fr !important; }

      /* Verdict hero font size */
      .verdict-chip { font-size: 22px !important; }

      /* Score signals: allow wrap */
      .three-signals { grid-template-columns: 1fr !important; }

      /* Prevent any element from overflowing the viewport width */
      .analyze-grid, .input-col, .report-col,
      .panel, .visual-card, .shield-card, .chart-card { max-width: 100%; box-sizing: border-box; }

      /* Price dial + comparison panel: stack vertically on mobile */
      .price-dial-row { flex-direction: column !important; align-items: stretch !important; }
      .price-dial-row > div:first-child { align-self: center; }
      .price-dial-kpi-grid { grid-template-columns: 1fr 1fr !important; }
      .gauge-range-track { overflow-x: hidden !important; }

      /* Flagged listings table — hide low-priority columns, ensure scroll */
      #flaggedTableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: calc(100vw - 32px); }
      #flaggedTableWrap table { min-width: 420px; }
      /* Hide: Compound(2), Type(3), Area m²(6), EGP/m²(7), Dec(9) */
      #flaggedTableWrap th:nth-child(2), #flaggedTableWrap td:nth-child(2),
      #flaggedTableWrap th:nth-child(3), #flaggedTableWrap td:nth-child(3),
      #flaggedTableWrap th:nth-child(6), #flaggedTableWrap td:nth-child(6),
      #flaggedTableWrap th:nth-child(7), #flaggedTableWrap td:nth-child(7),
      #flaggedTableWrap th:nth-child(9), #flaggedTableWrap td:nth-child(9) { display: none; }
    }

    /* ── Refine accordion: always expanded on desktop ── */
    @media (min-width: 641px) {
      #refineFields { display: block !important; }
      #refineToggle { display: none; }
    }

    /* ── Email verify nudge bar ──────────────────────────────────────── */
    #verifyNudge {
      align-items: center; display: none; gap: 10px; justify-content: center; flex-wrap: wrap;
      background: #f5f8fd; border-bottom: 1px solid var(--line); padding: 9px 16px;
      font-size: 13px; color: var(--ink);
    }
    #verifyNudge.show { display: flex; }
    #verifyNudge a { color: var(--apple-blue); font-weight: 700; text-decoration: none; cursor: pointer; }
    #verifyNudge a:hover { text-decoration: underline; }
    #verifyNudge .nudge-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }

    /* ── Usage limit nudge bar ─────────────────────────────────────── */
    #limitNudge {
      align-items: center; display: none; gap: 10px; justify-content: center; flex-wrap: wrap;
      background: #f5f8fd; border-bottom: 1px solid var(--line); padding: 9px 20px;
      font-size: 13px; color: var(--ink);
    }
    #limitNudge.show { display: flex; }
    #limitNudge a { color: var(--apple-blue); font-weight: 700; text-decoration: none; }
    #limitNudge a:hover { text-decoration: underline; }
    #limitNudge .nudge-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; }

    /* ── Verdict upsell nudge (injected after hero) ─────────────────── */
    #verdictNudge {
      align-items: center; background: #ffffff;
      border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lift); display: flex;
      flex-wrap: wrap; gap: 12px; justify-content: space-between; padding: 12px 16px;
    }
    #verdictNudge .vn-text { font-size: 13px; color: var(--ink); }
    #verdictNudge .vn-btn {
      background: var(--apple-blue); border-radius: 999px; color: #fff;
      font-size: 12.5px; font-weight: 700; padding: 8px 18px; text-decoration: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,113,227,.28);
    }

    /* ── NC compound-not-recognized notice ───────────────────────── */
    #ncCompoundNotice {
      align-items: flex-start; background: rgba(245,158,11,.08);
      border: 1px solid rgba(245,158,11,.3); border-radius: 12px; display: flex;
      gap: 10px; padding: 11px 14px;
    }
    #ncCompoundNotice .ncn-icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
    #ncCompoundNotice .ncn-body { font-size: 13px; color: var(--ink); line-height: 1.5; }
    #ncCompoundNotice .ncn-body strong { color: var(--amber,#f59e0b); }

    /* ── Guided tour tooltips ──────────────────────────────────────── */
    .tour-tip {
      position: fixed;
      z-index: 9000;
      background: var(--card-bg, #1e1e2e);
      border: 1px solid var(--accent, #6c63ff);
      border-radius: 12px;
      padding: 16px 18px;
      max-width: 300px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      font-size: 14px;
      line-height: 1.5;
    }
    .tour-tip-title { font-weight: 600; margin-bottom: 8px; color: var(--accent, #6c63ff); }
    .tour-tip-body { color: var(--text-muted, #aaa); margin-bottom: 12px; }
    .tour-tip-footer { display: flex; justify-content: space-between; align-items: center; }
    .tour-got-it { background: var(--accent, #6c63ff); color: #fff; border: none; border-radius: 6px; padding: 6px 14px; cursor: pointer; font-size: 13px; }
    .tour-skip { font-size: 12px; color: var(--text-muted, #94a3b8); cursor: pointer; text-decoration: underline; background: none; border: none; }
    @media (max-width: 640px) {
      .tour-tip { position: fixed; bottom: 20px; left: 16px; right: 16px; max-width: none; top: auto !important; }
    }

    /* ── Market teaser cards ────────────────────────────────────────── */
    .mkt-teaser-grid { display: flex; gap: 12px; flex-wrap: wrap; }
    .mkt-teaser-card {
      background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px;
      flex: 1 1 140px; min-width: 140px; max-width: 200px; padding: 14px 16px;
    }
    .mkt-teaser-locked {
      flex: 1 1 200px; min-width: 200px; position: relative;
    }
    .mkt-teaser-blur { display: flex; gap: 12px; flex-wrap: wrap; filter: blur(5px); pointer-events: none; user-select: none; }
    .mkt-teaser-gate {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: 10px;
      background: rgba(10,15,30,.55); border-radius: 12px; backdrop-filter: blur(3px);
      text-align: center; padding: 16px;
    }
    .mkt-teaser-gate span { font-size: 13px; font-weight: 700; color: #fff; }
    .mkt-teaser-gate a {
      background: linear-gradient(135deg,#6366f1,#8b5cf6); border-radius: 8px; color: #fff;
      font-size: 12px; font-weight: 700; padding: 7px 18px; text-decoration: none;
    }

    @media print {
      /* ══════════════════════════════════════════════════════════════
         PROPAI PRINT STYLESHEET — clean 2-page PDF report
         ══════════════════════════════════════════════════════════════ */

      @page { margin: 16mm 14mm; size: A4; }
      :root, html, body, main {
        background: #fff !important;
        background-color: #fff !important;
        background-image: none !important;
        background-attachment: scroll !important;
        color: #111 !important;
        font-size: 13px !important;
        font-family: var(--f-body) !important;
        box-shadow: none !important;
      }

      /* ── 1. Hide ALL UI chrome ────────────────────────────────────── */
      .topbar, nav, .account-widget, #modeToggle, #linkForm, #form,
      .report-toolbar, .input-col, footer, #syncPanel, #manualToggleHint,
      #_authGateOverlay, .comp-controls, .comp-show-more, .pro-gate-wrap,
      [data-tab], .city-selector, #savedSection, #limitNudge, #verdictNudge, #verifyNudge, #ncCompoundNotice { display: none !important; }

      /* ── 2. Hide visual-only / interactive report elements ────────── */
      iframe, .listing-map-wrap,          /* map frame + its container */
      .share-row, #scriptBox, #shareToast, #saveToast,  /* share buttons */
      .echarts-gauge-wrap, .echarts-gauge, .echarts-ring,  /* ECharts dials */
      .roi-echarts, .chart-card,          /* ROI + histogram charts */
      .hist-bars-wrap,                    /* histogram bar chart area */
      .trust-ribbon, .visual-grid,        /* trust ribbon + building age card */
      .cx-actions, .ai-tools-section,     /* AI tools section */
      .inv-dial-wrap,                     /* investor score dial */
      .gauge-range-track,                 /* price/sqm range bar in signals panel */
      .print-hide,                        /* explicitly tagged sections */
      /* Hide accordion toggle arrows — keep content */
      summary { display: none !important; }

      /* ── Guest gate: hide blurred content and gate card in print ─── */
      .guest-blur, .guest-full-gate, .guest-peek { display: none !important; }

      /* ── Comparables: show first 5 rows only in print ────────────── */
      .comps-table tbody tr:nth-child(n+6) { display: none !important; }
      .comps-table thead th:nth-child(3),   /* Days on market col — skip in print */
      .comps-table thead th:nth-child(4),   /* Relisted col */
      .comps-table tbody td:nth-child(3),
      .comps-table tbody td:nth-child(4) { display: none !important; }
      .evidence-note { font-size: 11px !important; color: #6b7280 !important; margin-bottom: 8px !important; }

      /* ── 3. Force all disclosures open in print ───────────────────── */
      details { display: block !important; }
      details > *:not(summary) { display: block !important; }

      /* ── 4. Layout — single column, full width ────────────────────── */
      .analyze-grid, .analyze-grid.result-mode { display: block !important; width: 100% !important; }
      .report-col { display: block !important; width: 100% !important; padding: 0 !important; }
      #buyerOutput, #investorOutput { display: block !important; box-shadow: none !important; width: 100% !important; }
      .buyer-result { display: block !important; gap: 0 !important; }
      .buyer-result > * { margin-bottom: 14px !important; }

      /* ── 5. Verdict hero ─────────────────────────────────────────── */
      .verdict-hero, .buyer-hero,
      .buyer-hero.good, .buyer-hero.amber, .buyer-hero.red {
        background: #f0fdf4 !important; border: 2px solid #86efac !important;
        border-radius: 10px !important; color: #111 !important; padding: 16px !important;
        box-shadow: none !important;
      }
      .buyer-hero.amber { background: #fffbeb !important; border-color: #fcd34d !important; }
      .buyer-hero.red   { background: #fff1f2 !important; border-color: #fca5a5 !important; }
      .verdict-chip { font-size: 20px !important; font-weight: 800 !important; }
      .vh-copy, .decision-copy { color: #374151 !important; font-size: 13px !important; line-height: 1.5 !important; }
      .buyer-top { display: block !important; }

      /* ── 6. Offer shield ─────────────────────────────────────────── */
      .shield-card {
        background: #fff !important; border: 1.5px solid #d1fae5 !important;
        border-radius: 10px !important; box-shadow: none !important; padding: 14px !important;
      }

      /* ── 7. Three signals — keep as text tiles, hide gauge SVGs ──── */
      .three-signals { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
      .signal { background: #f9fafb !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; padding: 10px !important; }
      .signal-top span, .signal strong, .signal small { color: #374151 !important; }

      /* ── 8. Panels & cards ───────────────────────────────────────── */
      .panel, .inv-metric-row .inv-metric,
      .inv-section { background: #fff !important; box-shadow: none !important; }
      .inv-metric { border: 1px solid #e5e7eb !important; border-radius: 8px !important; padding: 10px !important; }
      .disclosure-body, details > div { background: #fff !important; border: 1px solid #e5e7eb !important; border-radius: 8px !important; padding: 12px !important; }

      /* ── 9. Risk flags ───────────────────────────────────────────── */
      .risk-flag, [class*="flag-item"] { color: #b45309 !important; }
      .risk-flag-meaning { color: #64748b !important; }
      .risk-flag-action  { color: #92400e !important; }

      /* ── 10. Investor view ───────────────────────────────────────── */
      .inv-verdict-top { display: block !important; background: #f0fdf4 !important; border: 1.5px solid #86efac !important; border-radius: 10px !important; padding: 14px !important; }
      .inv-signal-row { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }

      /* ── 11. Typography ──────────────────────────────────────────── */
      a { color: #111 !important; text-decoration: none !important; }
      * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }

      /* ── 12. Page breaks ─────────────────────────────────────────── */
      .shield-card, .three-signals, .disclosure, details { break-inside: avoid; }
      .buyer-result > section:nth-child(4) { break-before: page; }
    }
    /* Print-only branding header (hidden on screen) */
    #printHeader { display: none; }
    @media print {
      #printHeader {
        display: flex !important; align-items: center; gap: 12px;
        border-bottom: 2px solid #10b981; padding-bottom: 12px; margin-bottom: 20px;
      }
      #printHeader .ph-logo { background: #10b981; color: #fff; font-weight: 900; font-size: 18px; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
      #printHeader .ph-title { font-size: 20px; font-weight: 800; color: #111; }
      #printHeader .ph-sub { font-size: 12px; color: #6b7280; }
      #printHeader .ph-date { margin-left: auto; font-size: 11px; color: #9ca3af; }
    }
    /* ── Searchable combobox ─────────────────────────────────────────── */
    .srch-sel-wrap { display: block; position: relative; }
    .srch-sel-inp {
      appearance: none; -webkit-appearance: none;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
      border: 1px solid #dbe5e1; border-radius: 12px; color: #18221f;
      cursor: default; min-height: 44px; overflow: hidden;
      padding: 10px 36px 10px 11px; text-overflow: ellipsis; width: 100%;
    }
    .srch-sel-inp:focus { border-color: #347d69; cursor: text; outline: 3px solid rgba(52,125,105,.16); }
    [dir="rtl"] .srch-sel-inp { background-position: left 10px center; padding: 10px 11px 10px 36px; }
    .srch-sel-drop {
      background: #fff; border: 1px solid #e2e8e4; border-radius: 12px;
      box-shadow: 0 10px 32px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.06);
      list-style: none; margin: 4px 0 0; max-height: 220px; overflow-y: auto;
      padding: 4px; position: absolute; width: 100%; z-index: 2000;
    }
    .srch-sel-item { border-radius: 8px; color: #18221f; cursor: pointer; font-size: 13px; padding: 8px 12px; }
    .srch-sel-item:hover, .srch-sel-item.focused { background: rgba(52,125,105,.10); }
    .srch-sel-item.selected { color: #347d69; font-weight: 600; }
    .srch-sel-item mark { background: transparent; color: #347d69; font-weight: 700; }
    .srch-sel-empty { color: #94a3b8; font-style: italic; pointer-events: none; }
  
    /* ===================================================================
       UX Phase 1 - append-only polish layer (Sept 2026)
       Overrides by cascade position only; no existing rule is edited.
       Every rule here corresponds to something measured in the browser.
       =================================================================== */

    /* 1. --bg was referenced 5x and defined 0x. Measured page background is
          rgb(7,11,16) dark / rgb(248,250,252) light. Without this the tab-bar
          fade rendered navy (#0a1628) over a near-black page, and three bare
          var(--bg) declarations were dropped as invalid. */
    :root { --bg: #f5f5f7; }

    /* 2. Equal tab widths only where the bar is not scrolling. Below 640px the
          tabs overflow (595px of buttons in 353px) and equalising would make six
          ~58px tabs, so natural width plus the existing scroll + fade is kept. */
    @media (min-width: 641px) {
      .tabs {
        display: inline-flex;
        width: fit-content;
        max-width: 100%;
        gap: 3px;
      }
      .tabs .tab-button {
        flex: 0 0 auto;
        min-width: auto;
        max-width: none;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
      }
      /* Minor tabs opt out so they stay visually secondary. */
      .tabs .tab-button--minor { flex: 0 0 auto; }
    }

    /* 3. Keyboard focus was visible on .theme-toggle and nothing else. Same ring
          values as that existing rule, so the treatment stays consistent. */
    :where(button, a, input, select, textarea, [role="button"], [tabindex]):focus-visible {
      outline: 3px solid var(--apple-blue);
      outline-offset: 2px;
    }
  
    /* City menu in Arabic (RTL): the pill sits on the right, so the menu opens from the right edge and stays on screen (19 Oct) */
    [dir="rtl"] .city-menu { left: auto; right: 0; }   /* Arabic: pill is on the right, menu opens from it */
    @media (max-width:640px){
      .city-menu { min-width: 180px; max-width: calc(100vw - 24px); }
    }
    /* Header bar alignment (19 Oct 2026): brand sized to the 56px bar; the bar grows (never overflows) when it wraps */
    .topbar{height:auto!important;min-height:56px;flex-wrap:wrap;row-gap:8px;padding-top:8px!important;padding-bottom:8px!important}
    .topbar .brand-block{display:flex;align-items:center;gap:10px;min-width:0}
    .topbar .brand-block h1{font-size:21px!important;line-height:1.1!important;margin:0!important;letter-spacing:-.02em}
    .topbar .brand-block p{font-size:11.5px!important;line-height:1.3!important;margin:2px 0 0!important;white-space:nowrap}
    .topbar .brand-logo{width:34px;height:34px;flex:0 0 34px}
    .topbar-mid{flex:1 1 auto;display:flex;justify-content:center;min-width:0}
    .topbar .account-widget{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    /* Tabs line up with the header and the content (same 1380px column, 24px inset) */
    .tabs-outer{padding-inline:max(24px, calc((100% - 1380px) / 2 + 24px))!important;box-sizing:border-box}
    /* A closed drawer sits above the page; its shadow showed as a dark smudge at the top */
    #nbhdDrawer[style*="translateY(-100vh)"]{box-shadow:none!important}
    @media (max-width:760px){
      .topbar{padding-inline:14px!important}
      .topbar .brand-block p{display:none}
      .topbar-mid{order:3;flex:1 0 100%;justify-content:flex-start}
    }
  

      .market-subnav { margin: 0; padding: 16px 24px 0; }
      .msn-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
      .msn-chip { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; display: inline-flex; font: inherit; font-size: 13px; font-weight: 700; gap: 6px; min-height: 36px; padding: 6px 14px; transition: background .15s, color .15s, border-color .15s; }
      .msn-chip:hover { border-color: var(--accent); color: var(--ink); }
      .msn-chip.active { background: var(--apple-blue); border-color: var(--apple-blue); color: #ffffff; }
      .msn-pro { background: linear-gradient(135deg,#6366f1,#8b5cf6); border-radius: 4px; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 1px 5px; }
      /* Market teaser (Oct 2026): a lock tile stands where a Pro number would be; the number itself never reaches the browser. */
      .lock-tile { align-items: center; background: var(--panel-2); border: 1px dashed var(--line); border-radius: 12px; box-sizing: border-box; color: var(--muted); cursor: pointer; display: flex; font: inherit; font-size: 13px; gap: 8px; max-width: 100%; min-height: 44px !important; padding: 8px 12px; text-align: start; width: 100%; }
      .lock-tile:hover { border-color: var(--accent); }
      .lock-tile:focus-visible { outline: 2px solid var(--apple-blue); outline-offset: 2px; }
      .lock-tile .lt-l { color: var(--ink); flex: 0 1 auto; font-size: 12.5px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
      .lock-tile .lt-bar { background: var(--line); border-radius: 6px; flex: 1 1 36px; height: 10px; min-width: 36px; }
      .lock-tile .lt-chip { background: linear-gradient(135deg,#6366f1,#8b5cf6); border-radius: 4px; color: #fff; flex: none; font-size: 9px; font-weight: 800; letter-spacing: .04em; padding: 2px 6px; }
      .lk-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 12px 0; }
      .lk-banner { background: color-mix(in srgb, #6366f1 10%, var(--panel-2)); border: 1px solid color-mix(in srgb, #6366f1 35%, transparent); border-radius: 14px; font-size: 13.5px; font-weight: 700; line-height: 1.55; margin: 0 0 12px; padding: 12px 14px; }
      .lk-guide-btns { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .lk-guide-btns button { min-height: 44px; } .lk-guide-link { color: var(--accent); font-weight: 800; min-height: 44px; display: inline-flex; align-items: center; padding: 0 6px; }
      .lk-snap { margin: 0; } .lk-snap img { border-radius: 14px; display: block; height: auto; max-width: 100%; }
      .lk-snap figcaption { color: var(--muted); font-size: 12px; margin: 8px 0; }
      .ac-locked { padding: 18px; } .ac-locked h3 { margin: 0 0 4px; }
      .lk-linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 800; min-height: 44px; padding: 0 4px; }
      .msn-hint { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 10px 0 0; max-width: 62ch; }
      .pulse-card.edge-low { border-inline-start: 4px solid var(--green); }
      .pulse-card.edge-high { border-inline-start: 4px solid var(--amber); }
      .pulse-edge-note { font-size: 12px; font-weight: 700; margin: -2px 0 8px; color: var(--muted); }
      .pulse-edge-note.edge-low { color: var(--green); }
      .pulse-edge-note.edge-high { color: var(--amber); }
      .pulse-detail-btn { background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); cursor: pointer; font-size: 12px; font-weight: 600; margin-top: 8px; padding: 7px; text-align: center; width: 100%; }
      .dh-chips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 14px 0 18px; }
      .dh-chip { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
      .dh-chip span { color: var(--muted); display: block; font-size: 12px; font-weight: 600; }
      .dh-chip strong { display: block; font-size: 22px; margin-top: 4px; }
      .dh-pill { border-radius: 999px; display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; }
      .dh-pill.strong { background: rgba(16,185,129,.14); color: var(--green); }
      .dh-pill.partial { background: rgba(245,158,11,.14); color: var(--amber); }
      .dh-pill.thin { background: rgba(148,163,184,.16); color: var(--muted); }
      /* ── Areas card ───────────────────────────────────────────────────────────── */
      .ac-wrap { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
      .ac-card, .ac-sec, .ac-split { min-width: 0; }
      .ac-sec .table-wrap { overflow-x: auto; }
      .ac-top { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; }
      .ac-select { flex: 1 1 320px; max-width: 560px; position: relative; }
      .ac-select input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 22px rgba(0,0,0,.16); color: var(--ink); font: inherit; font-size: 15px; font-weight: 700; min-height: 48px; padding: 0 44px; width: 100%; }
      .ac-select input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(16,185,129,.22), 0 6px 22px rgba(0,0,0,.16); }
      .ac-ico { color: var(--muted); font-size: 20px; inset-block-start: 11px; inset-inline-start: 15px; pointer-events: none; position: absolute; }
      .ac-caret { background: transparent; border: 0; color: var(--muted); cursor: pointer; font-size: 16px; height: 48px; inset-block-start: 0; inset-inline-end: 4px; position: absolute; width: 40px; }
      .ac-list { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.4); inset-inline: 0; list-style: none; margin: 8px 0 0; max-height: 340px; overflow-y: auto; padding: 6px; position: absolute; z-index: 30; }
      .ac-list li { align-items: baseline; border-radius: 10px; cursor: pointer; display: flex; gap: 10px; justify-content: space-between; padding: 9px 12px; }
      .ac-list li .m { color: var(--muted); font-size: 12px; white-space: nowrap; }
      .ac-list li.active, .ac-list li:hover { background: rgba(16,185,129,.14); }
      .ac-list li.current .n { color: var(--accent); }
      .ac-list li.none { color: var(--muted); cursor: default; }
      .ac-quick { display: flex; flex-wrap: wrap; gap: 8px; }
      .ac-chip { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 12px; }
      .ac-chip:hover { border-color: var(--accent); color: var(--ink); }
      .ac-chip.active { background: var(--apple-blue); border-color: var(--apple-blue); color: #ffffff; }
      .ac-card { animation: acIn .45s cubic-bezier(.2,.8,.2,1) both; background: var(--panel); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow: hidden; }
      @keyframes acIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
      .ac-hero { background-position: center; background-size: cover; min-height: 270px; position: relative; }
      .ac-hero-in { align-content: end; color: #0b2545; display: grid; gap: 10px; inset: 0; padding: 22px 26px 26px; position: absolute; }
      .ac-hero h2 { color: #0b2545; font-size: clamp(30px, 5vw, 46px); letter-spacing: -.02em; line-height: 1.1; margin: 0; }
      .ac-tags { display: flex; flex-wrap: wrap; gap: 8px; }
      .ac-edge { background: rgba(255,255,255,.6); border: 1px solid rgba(11,37,69,.16); border-radius: 999px; color: #0b2545; font-size: 12px; font-weight: 700; padding: 4px 11px; }
      .ac-edge.edge-low { background: #e3fbf2; border-color: #00a77d; }
      .ac-edge.edge-high { background: #fff3d6; border-color: #e0a23b; }
      .ac-hero .dh-pill { backdrop-filter: blur(8px); }
      .ac-cta { align-items: center; background: linear-gradient(135deg, var(--apple-blue), #0077ed); border: 0; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,113,227,.28); color: #ffffff; cursor: pointer; display: inline-flex; font: inherit; font-size: 14px; font-weight: 700; gap: 8px; justify-self: start; padding: 10px 18px; }
      .ac-cta:hover { transform: translateY(-1px); }
      .ac-kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); margin-top: 16px; padding: 0 22px; position: relative; z-index: 2; }
      .ac-kpi { backdrop-filter: blur(14px); background: color-mix(in srgb, var(--panel-2) 88%, transparent); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: 12px 14px; }
      .ac-kpi .l { color: var(--muted); display: block; font-size: 12px; font-weight: 700; }
      .ac-kpi strong { display: block; font-size: 22px; letter-spacing: -.01em; margin-top: 3px; }
      .ac-kpi strong small { color: var(--muted); font-size: 12px; font-weight: 600; }
      .ac-kpi em { color: var(--muted); display: block; font-size: 11.5px; font-style: normal; margin-top: 2px; }
      .ac-kpi.sale { border-top: 3px solid #10b981; } .ac-kpi.rent { border-top: 3px solid #f59e0b; } .ac-kpi.yield { border-top: 3px solid #a78bfa; }
      .ac-split { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); padding: 18px 22px 4px; }
      .ac-panel { background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px; }
      .ac-panel.sale { background: linear-gradient(160deg, rgba(16,185,129,.12), transparent 55%), var(--panel-2); }
      .ac-panel.rent { background: linear-gradient(160deg, rgba(245,158,11,.12), transparent 55%), var(--panel-2); }
      .ac-panel h3 { font-size: 13px; letter-spacing: .06em; margin: 0 0 8px; text-transform: uppercase; }
      .ac-panel.sale h3 { color: #10b981; } .ac-panel.rent h3 { color: #f59e0b; }
      .ac-panel .big { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
      .ac-panel .big small { color: var(--muted); font-size: 13px; font-weight: 600; }
      .ac-panel .rows { display: grid; gap: 6px; margin-top: 10px; }
      .ac-panel .rows div { align-items: baseline; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; padding-bottom: 6px; }
      .ac-panel .rows span { color: var(--muted); font-size: 13px; }
      .ac-panel .rows b { font-size: 14px; } .ac-panel .rows b small { color: var(--muted); font-weight: 500; }
      .ac-range { margin-top: 14px; }
      .ac-range .bar { background: linear-gradient(90deg, rgba(16,185,129,.25), rgba(148,163,184,.25), rgba(239,68,68,.25)); border-radius: 999px; height: 8px; position: relative; }
      .ac-range.rent .bar { background: linear-gradient(90deg, rgba(245,158,11,.2), rgba(245,158,11,.5)); }
      .ac-range .bar i { background: #fff; border: 3px solid var(--accent); border-radius: 50%; height: 18px; inset-block-start: -5px; margin-inline-start: -9px; position: absolute; width: 18px; }
      .ac-range .ends { color: var(--muted); display: flex; font-size: 11.5px; justify-content: space-between; margin-top: 8px; }
      .ac-sec { padding: 18px 22px 4px; }
      .ac-sec h3 { align-items: baseline; display: flex; flex-wrap: wrap; font-size: 16px; gap: 10px; margin: 0 0 12px; }
      .ac-sec h3 small { color: var(--muted); font-size: 12px; font-weight: 500; }
      .ac-types { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 4px 0 14px; }
      .ac-type { background: rgba(99,102,241,.08); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
      .ac-type b { color: #a5b4fc; font-size: 13px; } .ac-type span, .ac-type small { color: var(--muted); font-size: 12px; } .ac-type strong { font-size: 16px; }
      .ac-type.thin { opacity: .7; }
      .ac-tpills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
      .ac-tpills button { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font-size: 13px; font-weight: 700; min-height: 36px; padding: 6px 14px; }
      .ac-tpills button.on { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.5); color: var(--green, #10b981); }
      .ac-layouts { border-collapse: collapse; width: 100%; }
      .ac-layouts th { color: var(--muted); font-size: 12px; font-weight: 700; padding: 8px 10px; text-align: start; }
      .ac-layouts td { border-top: 1px solid var(--line); font-size: 14px; padding: 11px 10px; vertical-align: middle; }
      .ac-layouts small { color: var(--muted); }
      .ac-layouts .lay { background: rgba(99,102,241,.14); border-radius: 8px; color: #a5b4fc; font-weight: 800; padding: 4px 10px; white-space: nowrap; }
      .ac-layouts .mini { background: rgba(148,163,184,.16); border-radius: 999px; height: 6px; margin-bottom: 6px; max-width: 160px; }
      .ac-layouts .mini i { background: linear-gradient(90deg, #10b981, #34d399); border-radius: 999px; display: block; height: 100%; }
      .yld { background: rgba(148,163,184,.16); border-radius: 999px; font-weight: 800; padding: 3px 10px; }
      .yld.mid { background: rgba(245,158,11,.18); color: #f59e0b; } .yld.hi { background: rgba(16,185,129,.2); color: #10b981; }
      .ac-chart { height: 290px; width: 100%; }
      .ac-maphead { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; }
      .ac-layers { display: flex; gap: 6px; }
      .ac-layers button { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 12px; }
      .ac-layers button.on { background: rgba(56,189,248,.16); border-color: #38bdf8; color: #7dd3fc; }
      .ac-map { border: 1px solid var(--line); border-radius: 18px; height: 400px; overflow: hidden; width: 100%; z-index: 1; }
      .ac-legend { color: var(--muted); display: flex; font-size: 12px; gap: 14px; margin-top: 8px; }
      .ac-legend i { border-radius: 50%; display: inline-block; height: 10px; margin-inline-end: 5px; width: 10px; }
      .ac-map-dark .maplibregl-canvas { filter: invert(1) hue-rotate(180deg) brightness(.95) contrast(.92); }
      .ac-bub { animation: acBubIn .6s cubic-bezier(.2,.9,.3,1.3) both; background: color-mix(in srgb, var(--c) 34%, transparent); border: 2px solid var(--c); border-radius: 50%; box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 0 var(--c); color: #fff; cursor: pointer; font: 800 11px/1 inherit; padding: 0; transition: scale .18s, box-shadow .18s; }
      .ac-bub span { display: block; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
      .ac-bub:hover, .ac-bub:focus-visible { box-shadow: 0 8px 22px rgba(0,0,0,.45), 0 0 0 7px color-mix(in srgb, var(--c) 28%, transparent); outline: none; scale: 1.12; }
      @keyframes acBubIn { from { opacity: 0; scale: .2; } to { opacity: 1; scale: 1; } }   /* scale, not transform: MapLibre positions the marker with transform */
      .ac-poi span { align-items: center; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,.4); display: flex; font-size: 14px; height: 28px; justify-content: center; width: 28px; }
      .ac-pop { color: #0f172a; font: 13px/1.5 inherit; }
      .ac-pop strong { display: block; font-size: 14px; margin-bottom: 3px; }
      .ac-pop i { border-radius: 50%; display: inline-block; height: 8px; margin-inline-end: 6px; width: 8px; }
      .maplibregl-popup-content { border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.35); padding: 12px 14px; }
      .maplibregl-ctrl-group { border-radius: 12px; overflow: hidden; }
      .ac-pin span { animation: acPulse 1.8s ease-out infinite; background: #38bdf8; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 0 rgba(56,189,248,.6); display: block; height: 18px; width: 18px; }
      @keyframes acPulse { 70% { box-shadow: 0 0 0 16px rgba(56,189,248,0); } 100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); } }
      .ac-foot { color: var(--muted); font-size: 12px; line-height: 1.6; padding: 14px 22px 20px; }
      .ac-all h3 { align-items: baseline; display: flex; flex-wrap: wrap; font-size: 16px; gap: 10px; margin: 6px 0 12px; }
      .ac-all h3 small { color: var(--muted); font-size: 12px; font-weight: 500; }
      .ac-all th[data-sort]:hover { color: var(--accent); }
      .ac-all .ac-row { cursor: pointer; } .ac-all .ac-row:hover td { background: rgba(16,185,129,.08); }
      .ac-all .edge-low { color: var(--green); } .ac-all .edge-high { color: var(--amber); }
      .ac-skel .sk { animation: acShim 1.3s ease-in-out infinite; background: linear-gradient(90deg, var(--panel-2), rgba(148,163,184,.18), var(--panel-2)); background-size: 200% 100%; border-radius: 18px; margin-bottom: 12px; }
      .ac-skel .hero { height: 230px; } .ac-skel .row { height: 90px; }
      @keyframes acShim { to { background-position: -200% 0; } }
      .ac-err { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3); border-radius: 14px; padding: 16px; }
      @media (max-width: 640px) { .ac-kpis { margin-top: 12px; padding: 0 14px; } .ac-split, .ac-sec { padding-inline: 14px; } .ac-hero-in { padding: 16px; } .ac-map { height: 320px; } .ac-select { max-width: none; } }
      @media (prefers-reduced-motion: reduce) { .ac-card, .ac-pin span, .ac-skel .sk, .ac-bub { animation: none; } }
      /* ── Areas: hero art, verdict, similar, compare, map views, skeleton, motion ─────────── */
      .ac-hero { background: radial-gradient(120% 90% at 100% 0%,rgba(0,113,227,.16) 0%,rgba(0,113,227,0) 55%),linear-gradient(135deg,#D8EBFF 0%,#F5F8FC 100%); overflow: hidden; }   /* Betak palette (founder, 22 Oct 2026): light blue #D8EBFF, background #F5F8FC, blue #0071E3 */
      .ac-art, .ac-art svg { display: block; height: 100%; inset: 0; position: absolute; width: 100%; }
      .ac-hero::after { content: none; }
      .ac-hero-in { z-index: 2; }
      .ac-hero h2, .ac-hero-in { color: #fff !important; }
      .ac-hero h2 { text-shadow: 0 1px 3px rgba(0,0,0,.65), 0 2px 18px rgba(0,0,0,.55) !important; }
      .ac-hero::after { background: linear-gradient(180deg, rgba(7,12,20,.12) 20%, rgba(7,12,20,.86)); }
      .ac-photo { filter: saturate(1.08) contrast(1.03); height: 100%; inset: 0; object-fit: cover; opacity: 0; position: absolute; transition: opacity .8s ease, transform 14s ease-out; transform: scale(1.06); width: 100%; }
      .ac-photo.in { opacity: 1; transform: scale(1); }
      .ac-credit { color: rgba(255,255,255,.78); font-size: 11px; justify-self: start; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
      .ac-credit:hover { color: #fff; text-decoration: underline; }
      .ac-sun { animation: acSun 11s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
      @keyframes acSun { from { transform: translateY(8px) scale(.97); } to { transform: translateY(-8px) scale(1.04); } }
      .ac-star, .ac-win { animation: acTw 3.6s ease-in-out infinite; }
      @keyframes acTw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
      .ac-wv { animation: acWv 16s linear infinite; } .ac-wv2 { animation-duration: 11s; animation-direction: reverse; } .ac-wv3 { animation-duration: 8s; }
      @keyframes acWv { to { transform: translateX(-400px); } }
      .ac-verdict { align-items: center; background: linear-gradient(120deg, color-mix(in srgb, var(--vt) 18%, transparent), transparent 70%), var(--panel-2); border-block: 1px solid var(--line); display: flex; gap: 16px; padding: 16px 24px; --vt: #94a3b8; }
      .ac-verdict.good { --vt: #10b981; } .ac-verdict.warn { --vt: #f59e0b; } .ac-verdict.mid { --vt: #38bdf8; }
      .ac-verdict .ic { align-items: center; background: color-mix(in srgb, var(--vt) 22%, transparent); border-radius: 16px; display: flex; flex: none; font-size: 28px; height: 54px; justify-content: center; width: 54px; }
      .ac-verdict strong { font-size: clamp(17px, 2.6vw, 22px); letter-spacing: -.01em; }
      .ac-verdict .ch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
      .ac-verdict .ch span { background: rgba(148,163,184,.14); border: 1px solid var(--line); border-radius: 999px; font-size: 12.5px; font-weight: 700; padding: 5px 12px; }
      .ac-verdict .ch span.good { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.4); color: #34d399; }
      .ac-verdict .ch span.warn { background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.4); color: #fbbf24; }
      .ac-verdict .ch span.mute { color: var(--muted); }
      .ac-verdict .fresh { align-items: center; color: var(--muted); display: inline-flex; gap: 7px; }
      .ac-verdict .ch .fresh > span { background: none; border: 0; padding: 0; }
      .ac-verdict .fresh i { animation: acLive 1.8s ease-out infinite; background: #22c55e; border-radius: 50%; display: inline-block; height: 8px; width: 8px; }
      .ac-verdict .fresh.old i { animation: none; background: #f59e0b; }
      @keyframes acLive { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }
      .ac-spark polyline[pathLength] { animation: acDraw 1.3s .35s ease-out both; stroke-dasharray: 1; }
      .ac-spark polyline:not([pathLength]) { animation: acFade 1s .9s ease-out both; }
      @keyframes acDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
      @keyframes acFade { from { opacity: 0; } to { opacity: 1; } }
      .ac-range .bar i { animation: acSlide 1.1s .3s cubic-bezier(.2,.9,.3,1.15) both; }
      @keyframes acSlide { from { left: 0%; } }
      .ac-rv.pre { opacity: 0; transform: translateY(18px); }
      .ac-rv.pre.in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
      .ac-card.ac-fading { opacity: .4; transition: opacity .2s; }
      .ac-nb { margin: 0 0 18px; } .ac-nbh { margin: 6px 0 4px; } .ac-nbn { margin: 0 0 6px; }
      .ac-crumb { align-items: center; display: flex; flex-wrap: wrap; gap: 6px; }
      .ac-crumb-b { background: transparent; border: 1px solid var(--line); border-radius: 10px; color: inherit; cursor: pointer; font: inherit; min-height: 44px; min-width: 44px; padding: 0 12px; }
      .ac-crumb-b.cur { border-color: transparent; font-weight: 800; padding-inline: 0; }
      .ac-nbw { display: grid; gap: 6px; } .ac-nbw .ac-sim:disabled { cursor: default; opacity: .9; }
      .ac-nba { background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--accent); cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; min-height: 44px; }
      .ac-sims { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 10px; }
      .ac-sim { background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; color: inherit; cursor: pointer; display: grid; font: inherit; gap: 4px; min-height: 44px; padding: 12px 14px; text-align: start; transition: transform .18s, border-color .18s; }
      .ac-sim:hover { border-color: var(--accent); transform: translateY(-2px); }
      .ac-sim span { color: var(--muted); font-size: 12.5px; } .ac-sim i { color: var(--muted); font-style: normal; font-weight: 800; } .ac-sim i.g { color: #34d399; }
      .ac-cmp-sel { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font: inherit; min-height: 44px; padding: 0 14px; width: min(100%, 420px); }
      .ac-cmp { border-collapse: collapse; margin-top: 12px; width: 100%; }
      .ac-cmp th, .ac-cmp td { border-top: 1px solid var(--line); padding: 11px 12px; text-align: start; }
      .ac-cmp thead th { border-top: 0; font-size: 14px; }
      .ac-cmp td:first-child { color: var(--muted); font-size: 13px; }
      .ac-cmp td.win { background: rgba(16,185,129,.14); color: #34d399; font-weight: 800; }
      .ac-cmp-go { background: transparent; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-weight: 800; padding: 0; }
      .ac-metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; display: inline-flex; padding: 3px; }
      .ac-metric button { background: transparent; border: 0; border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; min-height: 34px; padding: 0 14px; }
      .ac-heatbtn { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; min-height: 40px; padding: 0 16px; }
      .ac-heatbtn.on { background: linear-gradient(135deg, #f97316, #ef4444); border-color: transparent; color: #fff; }
      .ac-metric button.on { background: var(--apple-blue); color: #ffffff; }
      .ac-legend .sz { margin-inline-start: auto; opacity: .8; }
      .ac-empty { padding: 36px 24px 28px; text-align: center; }
      .ac-empty-ic { animation: acSun 4s ease-in-out infinite alternate; font-size: 44px; }
      .ac-empty p { color: var(--muted); margin: 6px auto 18px; max-width: 520px; }
      .ac-list li .m em.thin { color: var(--amber); font-style: normal; }
      .ac-skel { display: grid; gap: 12px; } .ac-skel .strip { height: 78px; } .ac-skel .skk { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .ac-skel .tile { height: 96px; }
      .ac-nav a { align-items: center; display: inline-flex; min-height: 40px; }
      @media (max-width: 640px) {
        .ac-nav { -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); mask-image: linear-gradient(to right, #000 86%, transparent); scrollbar-width: none; }
        [dir="rtl"] .ac-nav { -webkit-mask-image: linear-gradient(to left, #000 86%, transparent); mask-image: linear-gradient(to left, #000 86%, transparent); }
        .ac-nav::-webkit-scrollbar { display: none; }
        .ac-hero-in .ac-tags { flex-wrap: wrap; }   /* wrap: the developer chip must not hide behind a scroll */ .ac-hero-in .ac-edge { white-space: nowrap; }
        .ac-verdict { align-items: flex-start; padding: 14px 16px; } .ac-verdict .ic { height: 44px; width: 44px; font-size: 22px; }
        .ac-layers button, .ac-metric button { min-height: 44px; } .ac-maphead { align-items: stretch; flex-direction: column; }
        .ac-cmp th, .ac-cmp td { padding: 9px 6px; font-size: 12.5px; overflow-wrap: anywhere; } .ac-cmp td:first-child { width: 30%; } .ac-cmp-go { min-height: 44px; } .ac-foot summary { align-items: center; display: flex; min-height: 44px; }
      }
      @media (max-width: 640px), (pointer: coarse) {
        .ac-cta, .seg-ctrl-btn, .nbr-more { min-height: 44px; } .pbed-btn { min-height: 44px !important; min-width: 44px !important; padding-inline: 12px !important; }
        .ac-nav a { min-height: 44px; padding-inline: 16px; } .ac-chip, .ac-sim { min-height: 44px; }
        #cookieBanner button, #cookieBanner a { min-height: 44px; min-width: 44px; }
        footer a, .site-footer a, .footer-links a { display: inline-block; min-height: 44px; padding: 12px 8px; }
      }
      @media (prefers-reduced-motion: reduce) { .ac-sun, .ac-star, .ac-win, .ac-wv, .ac-verdict .fresh i, .ac-range .bar i, .ac-spark polyline, .ac-empty-ic { animation: none !important; } .ac-rv.pre { opacity: 1; transform: none; } .ac-spark polyline[pathLength] { stroke-dasharray: none; } }
      .ac-notify { background: linear-gradient(135deg, var(--apple-blue), #0077ed); border: 0; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,113,227,.25); color: #ffffff; cursor: pointer; font: inherit; font-weight: 700; min-height: 48px; padding: 0 22px; }
      .ac-notify.on { background: var(--panel-2); border: 1px solid var(--line); box-shadow: none; color: var(--accent); }
      .ac-pop-go { background: var(--apple-blue); border: 0; border-radius: 10px; color: #ffffff; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; margin-top: 8px; min-height: 36px; padding: 0 12px; width: 100%; }
      .nbr-loc.flash { animation: acFlash 2.2s ease-out; }
      @keyframes acFlash { 0%, 60% { box-shadow: 0 0 0 3px #38bdf8, 0 0 30px rgba(56,189,248,.5); } 100% { box-shadow: 0 0 0 0 transparent; } }
      .ag-form { display: flex; gap: 8px; flex-wrap: wrap; }
      .ag-form input { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); flex: 1 1 260px; font: inherit; font-size: 15px; min-height: 48px; padding: 0 16px; }
      .ag-form input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16,185,129,.2); outline: none; }
      .ag-form button { border-radius: 12px; min-height: 48px; padding: 0 26px; }
      .ag-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 14px; }
      .ag-card { animation: acIn .45s cubic-bezier(.2,.8,.2,1) both; background: var(--panel-2); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
      .ag-head { align-items: center; display: flex; gap: 14px; }
      .ag-score { align-items: center; background: conic-gradient(var(--c) calc(var(--p, 0) * 1%), rgba(148,163,184,.22) 0); border-radius: 50%; color: var(--c); display: flex; flex: none; flex-direction: column; height: 78px; justify-content: center; position: relative; width: 78px; }
      .ag-score::before { background: var(--panel-2); border-radius: 50%; content: ""; inset: 7px; position: absolute; }
      .ag-score b, .ag-score small { position: relative; } .ag-score b { font-size: 24px; line-height: 1; } .ag-score small { color: var(--muted); font-size: 10.5px; }
      .ag-id h3 { font-size: 17px; margin: 0 0 6px; }
      .ag-tags { display: flex; flex-wrap: wrap; gap: 6px; }
      .ag-tags span { background: rgba(148,163,184,.14); border-radius: 999px; font-size: 11.5px; font-weight: 700; padding: 3px 10px; }
      .ag-tags span.ok { background: rgba(16,185,129,.16); color: #34d399; }
      .ag-tier { font-size: 13px; font-weight: 800; margin-top: 6px; }
      .ag-why { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
      .ag-why span { background: rgba(148,163,184,.12); border-radius: 10px; font-size: 12px; padding: 5px 10px; }
      .ag-why span.up b { color: #34d399; } .ag-why span.dn b { color: #f87171; }
      .ag-facts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 14px; }
      .ag-facts small, .ag-areas small { color: var(--muted); display: block; font-size: 11.5px; } .ag-facts b { font-size: 15px; }
      .ag-areas { font-size: 13px; margin: 12px 0 0; } .ag-areas small { display: inline; margin-inline-end: 6px; }
      .ag-note { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 10px 0 0; }
      .ag-cities { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 12px 0 0; }
      .ag-city { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-width: 0; }
      .ag-city b, .ag-city small, .ag-city span { display: block; overflow-wrap: anywhere; } .ag-city small { color: var(--muted); font-size: 12px; } .ag-city span { font-size: 12.5px; margin-top: 3px; }
      .ag-mini { align-items: baseline; border: 1.5px solid var(--c, #94a3b8); border-radius: 999px; color: var(--c, #94a3b8); display: inline-flex; flex: none; font-size: 12px; gap: 1px; padding: 2px 8px; white-space: nowrap; } .ag-mini small { font-size: 9.5px; opacity: .75; }
      .ac-zone { background: rgba(56,189,248,.14); border: 2px dashed #38bdf8; border-radius: 50%; height: 64px; width: 64px; }
      .ac-list .thin.none { opacity: .75; font-style: normal; }
      .ac-sell-sum { line-height: 1.7; margin: 0 0 12px; }
      .ac-sellers { display: grid; gap: 8px; }
      .ac-seller { align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 12px; grid-template-columns: minmax(120px, 1.4fr) minmax(60px, 1fr) 40px 38px auto; padding: 10px 14px; }
      .ac-seller .n { min-width: 0; } .ac-seller .n b, .ac-seller .n small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-seller .n small { color: var(--muted); font-size: 11.5px; }
      .ac-seller .bar { background: rgba(148,163,184,.16); border-radius: 999px; height: 8px; } .ac-seller .bar i { background: linear-gradient(90deg, #38bdf8, #10b981); border-radius: 999px; display: block; height: 100%; }
      .ac-seller .sh { color: var(--muted); font-size: 12.5px; font-weight: 700; text-align: end; }
      .ac-seller .sc { background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid var(--c); border-radius: 50%; color: var(--c); font-size: 12.5px; font-weight: 800; height: 34px; line-height: 32px; text-align: center; width: 34px; }
      .ac-seller-go { background: transparent; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; min-height: 36px; padding: 0 14px; }
      .ac-seller-go:hover { background: rgba(16,185,129,.14); } .ac-seller-go { flex: none; min-width: 44px; }
      @media (max-width: 640px) { .ac-seller { grid-template-columns: 1fr auto auto; } .ac-seller .bar { display: none; } .ac-seller .sh { display: none; } .ac-seller-go { min-height: 44px; } .ag-list { grid-template-columns: minmax(0, 1fr); } }
      @media (max-width: 640px) { #compareTab button, #compareTab select, #compareTab input { min-height: 40px; } }
      .hm-head { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
      .hm-ctl { display: flex; flex-wrap: wrap; gap: 10px; }
      .hm-map { height: min(68vh, 640px); min-height: 380px; }
      .hm-legend { align-items: center; color: var(--muted); display: flex; font-size: 12.5px; font-weight: 700; gap: 10px; margin-top: 10px; }
      .hm-legend i { border-radius: 999px; flex: 1; height: 10px; max-width: 360px; }
      @media (max-width: 640px) { .hm-map { height: 62vh; } .hm-ctl .ac-metric { width: 100%; overflow-x: auto; } }
      .nbr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
      .nbr-loc { animation: acIn .5s cubic-bezier(.2,.8,.2,1) both; background: var(--card); border: 1px solid var(--border); border-inline-start: 3px solid; border-radius: 12px; padding: 16px 18px; transition: transform .2s, box-shadow .2s; }
      .nbr-loc:hover { box-shadow: 0 12px 30px rgba(0,0,0,.28); transform: translateY(-2px); }
      .nbr-loc.thin { opacity: .62; } .nbr-loc.thin:hover { opacity: 1; }
      .nbr-loc-h { align-items: baseline; display: flex; gap: 8px; justify-content: space-between; margin-bottom: 10px; }
      .nbr-pill { background: rgba(148,163,184,.16); border-radius: 999px; color: var(--text-muted); font: 700 11px/1 'Courier New', monospace; padding: 4px 9px; white-space: nowrap; }
      .nbr-pill small { font: 500 10px/1 inherit; opacity: .85; }
      .nbr-pill.up { background: rgba(92,184,122,.16); color: #5CB87A; } .nbr-pill.dn { background: rgba(224,107,95,.16); color: #E06B5F; }
      .nbr-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
      .nbr-tags.kw { margin-top: 6px; }
      .nbr-tags span { background: rgba(99,155,255,.1); border: 1px solid rgba(99,155,255,.2); border-radius: 10px; color: var(--text-muted); font-size: 11px; padding: 3px 9px; }
      .nbr-tags.kw span { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
      .nbr-more { background: transparent; border: 1px solid var(--line); border-radius: 12px; color: var(--accent); cursor: pointer; font: inherit; font-weight: 800; margin: 14px auto 0; min-height: 44px; padding: 0 22px; display: block; }
      .nbr-more:hover { background: rgba(16,185,129,.12); }
      @media (prefers-reduced-motion: reduce) { .nbr-loc { animation: none; transition: none; } }
      .ac-spark { display: block; height: 26px; margin-top: 8px; width: 100%; }
      .ac-spark-note { color: var(--muted); display: block; font-size: 11px; font-style: normal; margin-top: 2px; }
      .ac-foot { color: var(--muted); font-size: 12.5px; padding: 12px 22px 20px; }
      .ac-foot summary { color: var(--accent); cursor: pointer; font-weight: 700; }
      .ac-foot ul { line-height: 1.7; margin: 8px 0 0; padding-inline-start: 18px; }
      .ac-nav { backdrop-filter: blur(12px); background: color-mix(in srgb, var(--panel) 90%, transparent); border-bottom: 1px solid var(--line); display: flex; gap: 6px; overflow-x: auto; padding: 10px 18px; position: sticky; top: 0; z-index: 12; }
      .ac-nav a { border-radius: 999px; color: var(--muted); flex: 0 0 auto; font-size: 13px; font-weight: 700; padding: 6px 14px; text-decoration: none; white-space: nowrap; }
      .ac-nav a:hover { color: var(--ink); } .ac-nav a.on { background: rgba(16,185,129,.16); color: var(--accent); }
      .ac-legacy { padding-top: 22px; }
      .ac-legacy #nbrContent { margin-top: 6px; }
      .ac-h4 { font-size: 13px; letter-spacing: .06em; margin: 20px 0 10px; text-transform: uppercase; color: var(--muted); }
      .ac-guide { align-items: center; display: grid; gap: 18px; grid-template-columns: minmax(0, 1.4fr) minmax(220px, 1fr); }
      .ac-guide-text p { font-size: 14.5px; line-height: 1.7; margin: 8px 0; }
      .ac-sea { background: rgba(56,189,248,.18); border-color: rgba(56,189,248,.5); color: #7dd3fc; }
      .ac-notes { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 8px 0 0; padding-inline-start: 18px; }
      .ac-radar { height: 250px; width: 100%; }
      .ac-dims { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-top: 8px; }
      .ac-dim { display: grid; gap: 4px; grid-template-columns: 1fr auto; } .ac-dim span { font-size: 13px; } .ac-dim b small { color: var(--muted); font-weight: 500; }
      .ac-dim .b, .ac-road .b { background: rgba(148,163,184,.18); border-radius: 999px; grid-column: 1 / -1; height: 6px; overflow: hidden; } .ac-dim .b i, .ac-road .b i { border-radius: 999px; display: block; height: 100%; }
      .ac-life { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 12px 0 4px; }
      .ac-lf { align-items: flex-start; background: linear-gradient(135deg, rgba(16,185,129,.14), transparent 70%), var(--panel-2); border: 1px solid var(--line); border-radius: 16px; display: flex; gap: 12px; padding: 14px; }
      .ac-lf .i { font-size: 26px; line-height: 1; }
      .ac-lf small { color: var(--muted); display: block; font-size: 12px; line-height: 1.5; margin-top: 3px; }
      .ac-facs { display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
      .ac-fac { align-items: center; display: flex; gap: 10px; }
      .ac-fac .i { align-items: center; background: rgba(56,189,248,.14); border-radius: 10px; display: inline-flex; flex: none; font-size: 18px; height: 34px; justify-content: center; width: 34px; }
      .ac-fac .t { flex: 1; min-width: 0; }
      .ac-fac .t b { font-size: 13.5px; }
      .ac-fac .t em { font-size: 11px; font-style: normal; font-weight: 700; margin-inline-start: 8px; }
      .ac-fac .t em.up { color: var(--green); } .ac-fac .t em.dn { color: var(--muted); }
      .ac-fac .b { background: rgba(148,163,184,.18); border-radius: 999px; height: 6px; margin-top: 5px; }
      .ac-fac .b i { background: linear-gradient(90deg, #38bdf8, #10b981); border-radius: 999px; display: block; height: 100%; }
      .ac-fac .pct { color: var(--muted); font-size: 12px; font-weight: 700; min-width: 34px; text-align: end; }
      .ac-stock { display: grid; gap: 10px; }
      .ac-stock .k { color: var(--muted); display: inline-block; font-size: 12px; font-weight: 700; margin-inline-end: 10px; min-width: 70px; }
      .ac-stock .ac-edge { background: rgba(148,163,184,.14); border-color: var(--line); color: var(--ink); margin: 2px 0; }
      .ac-roads { display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
      .ac-road .t { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; margin-bottom: 5px; } .ac-road .t b { font-size: 14px; } .ac-road .t span { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
      .ac-road .b i { background: linear-gradient(90deg, #38bdf8, #a78bfa); }
      .ac-tags2 { display: flex; flex-wrap: wrap; gap: 8px; } .ac-tags2 .ac-edge { background: rgba(148,163,184,.14); color: var(--ink); }
      .ac-places { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
      .ac-place { background: var(--panel-2); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; }
      .ac-place .h { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
      .ac-place .h .i { align-items: center; border-radius: 10px; display: inline-flex; font-size: 18px; height: 34px; justify-content: center; width: 34px; }
      .ac-place .h b { font-size: 14px; } .ac-place .h em { color: var(--muted); font-size: 12px; font-style: normal; margin-inline-start: auto; }
      .ac-place ul { list-style: none; margin: 0; padding: 0; } .ac-place li { align-items: baseline; border-top: 1px dashed var(--line); display: flex; gap: 10px; justify-content: space-between; padding: 6px 0; font-size: 13px; }
      .ac-place li i { color: var(--muted); font-size: 12px; font-style: normal; white-space: nowrap; }
      .ac-poi span { align-items: center; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.4); display: flex; font-size: 14px; height: 26px; justify-content: center; width: 26px; }
      .ac-layers { flex-wrap: wrap; } .ac-layers button[data-poi].on { background: rgba(16,185,129,.16); border-color: var(--accent); color: var(--accent); }
      @media (max-width: 760px) { .ac-guide { grid-template-columns: minmax(0, 1fr); } .ac-nav { padding-inline: 12px; } }
      .saved-empty { background: var(--panel-2); border: 1px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; }
      .saved-empty p { color: var(--muted); font-size: 13px; margin: 6px auto 14px; max-width: 46ch; }
    

    /* webfix-1: phone fixes from docs/ux/UX_MARKET_REVIEW.md (S1 tap targets, S4 sticky CTA, S5 forms, S6 shift/cookie). Desktop untouched. */
    .ac-sticky { display: none; }
    #brokerGrid, #dataSummary { min-height: 320px; } #brokerStats { min-height: 64px; } #marketSignals { min-height: 150px; } #marketPulse:not([hidden]) { min-height: 360px; }
    .broker-agency-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
    .broker-more { background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; color: var(--accent); cursor: pointer; font: inherit; font-weight: 800; min-height: 44px; padding: 0 20px; }
    @media (max-width: 640px), (max-width: 900px) and (max-height: 500px) {
      html .msn-strip .msn-chip { min-height: 44px; }
      .tab-button, .tab-button--minor, .msn-chip, .city-pill, .lang-toggle, .aw-btn, .theme-toggle, a.brand-block { min-height: 44px; }
      .theme-toggle { justify-content: center; min-width: 44px; }
      #verifyNudge .nudge-close, #limitNudge .nudge-close { min-height: 44px; min-width: 44px; padding: 0; }
      .ac-caret { min-width: 44px; min-height: 44px; }
      #switchToManualLink { min-height: 44px; } #nbhdDrawer button[onclick="closeNbhdDrawer()"] { min-height: 44px; min-width: 44px; }
      .maplibregl-ctrl.maplibregl-ctrl-group button { height: 44px; width: 44px; }
      .ac-bub::before { content: ""; height: max(100%, 44px); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: max(100%, 44px); }
      .ac-cta, .seg-ctrl-btn, .nbr-more, .pbed-btn, .ac-seller-go, .ac-chip, .ac-sim, .ac-nav a, .ac-layers button, .ac-metric button, .ac-cmp-go { min-height: 44px; }
      .pbed-btn { min-width: 44px; }
      footer a { display: inline-block; min-height: 44px; padding: 14px 8px; }
      input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]), select, textarea { font-size: 16px !important; }
      input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]), select { min-height: 44px; }
      #cookieBanner { flex-wrap: nowrap !important; gap: 8px !important; line-height: 1.25; padding: 4px 10px calc(4px + env(safe-area-inset-bottom)) !important; font-size: 11px !important; justify-content: space-between !important; }
      #cookieText { flex: 1 1 auto; min-width: 0; }
      #cookieBanner a { display: inline; min-height: 0; min-width: 0; padding: 15px 4px; }
      #cookieOk { min-height: 44px !important; min-width: 56px; padding: 0 14px !important; }
    }
    @media (max-width: 640px) {
      .ac-sticky { background: linear-gradient(to top, var(--bg, #070b10) 72%, transparent); bottom: 0; display: block; padding: 14px 12px calc(10px + env(safe-area-inset-bottom)); position: sticky; z-index: 40; }
      html.has-cookie .ac-sticky { bottom: 56px; }
      .ac-sticky .ac-cta { justify-content: center; min-height: 48px; width: 100%; }
    }
    /* The cookie banner follows the theme, live: light by default, dark only while html[data-theme="dark"] is set (QC #26) */
    html[data-theme="dark"] #cookieBanner { background: #1c1c1e !important; color: #a1a1a6 !important; border-color: rgba(255,255,255,.14) !important; box-shadow: 0 -6px 20px rgba(0,0,0,.4) !important; }
    html:not([data-theme="dark"]) #cookieBanner { background: #ffffff; color: #6e6e73; }
    /* The fixed cookie banner covered the last footer line (Contact), so a tap there hit "OK" instead of the link */
    html.has-cookie footer { padding-bottom: 88px !important; }
    /* Phones: the comparables table becomes one card per listing (no sideways scrolling). Every column stays: each cell
       carries its header as a label (set by the script below), and the sortable headers become a row of sort chips. */
    @media (max-width: 760px) {
      .table-wrap:has(.comps-table) { overflow-x: visible; }
      .comps-table { min-width: 0 !important; width: 100%; display: block; border: 0; }
      .comps-table thead, .comps-table tbody { display: block; }
      .comps-table thead tr { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 10px; align-items: center; }
      .comps-table thead tr::before { content: attr(data-sortlabel); color: var(--muted); font-size: 11px; font-weight: 700; }
      .comps-table thead th { display: none; border: 0 !important; padding: 0 !important; }
      .comps-table thead th.sortable { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 6px 12px !important;
        border: 1px solid var(--line) !important; border-radius: 999px; background: var(--panel-2); font-size: 12px; white-space: nowrap; }
      .comps-table tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 12px 14px; margin: 0 0 10px;
        border: 1px solid var(--line); border-radius: 16px; background: var(--panel-2); }
      .comps-table tbody td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; overflow-wrap: anywhere; font-size: 13px; }
      .comps-table tbody td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 10px; font-weight: 700;
        letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
      .comps-table tbody td:nth-child(1), .comps-table tbody td:nth-child(9) { grid-column: 1 / -1; }
      .comps-table tbody td:nth-child(1)::before { display: none; }
      .comps-table tbody td:empty { display: none; }
    }
    /* Phones: minimal side gutters so the content and cards take the width (20 Oct 2026) */
    @media (max-width:640px){
      main,section{padding-inline:6px!important}
      .panel{padding-inline:6px!important}
      .check-hero{margin-inline:0!important;padding-inline:12px!important}
      .tabs-outer{padding-inline:6px!important}
    }