:root {
      --bg:        #05060a;
      --surface:   #0a0c13;
      --card:      #0f1119;
      --card-h:    #141720;
      --elevated:  #1a1e2e;
      --overlay:   #1f243a;

      --b0: rgba(255,255,255,0.03);
      --b1: rgba(255,255,255,0.07);
      --b2: rgba(255,255,255,0.12);

      --t1: #eceef7;
      --t2: #8891b0;
      --t3: #404762;
      --t4: #252a3d;

      --accent:      #6c8fff;
      --accent-soft: rgba(108,143,255,0.08);
      --accent-glow: rgba(108,143,255,0.2);

      --green:      #00d4a1;
      --green-soft: rgba(0,212,161,0.08);
      --red:        #ff6b7a;
      --red-soft:   rgba(255,107,122,0.08);
      --amber:      #ffb347;
      --amber-soft: rgba(255,179,71,0.08);
      --purple:     #c084fc;
      --purple-soft:rgba(192,132,252,0.08);

      --r-sm: 6px;
      --r:    10px;
      --r-lg: 16px;
      --r-xl: 22px;
      --r-2xl: 28px;

      --font:  'DM Sans', system-ui, sans-serif;
      --head:  'Syne', system-ui, sans-serif;
      --mono:  'JetBrains Mono', monospace;

      --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
      --shadow:    0 4px 20px rgba(0,0,0,0.55);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.65);
      --shadow-xl: 0 24px 80px rgba(0,0,0,0.8);

      --glow-accent-sm: 0 0 0 1px rgba(108,143,255,0.18), 0 0 24px rgba(108,143,255,0.12);
      --glow-accent:    0 0 0 1px rgba(108,143,255,0.25), 0 0 48px rgba(108,143,255,0.16);
      --glow-accent-lg: 0 0 0 1px rgba(108,143,255,0.32), 0 0 80px rgba(108,143,255,0.22);
      --glow-purple-sm: 0 0 0 1px rgba(192,132,252,0.18), 0 0 24px rgba(192,132,252,0.12);

      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --t-fast: 100ms ease-out;
      --t-base: 200ms ease-out;
      --t-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* ── SKIP LINK (accessibility) ─────────────────────────────────── */
    .skip-link {
      position: absolute;
      top: -100%;
      left: 16px;
      z-index: 10000;
      padding: 8px 16px;
      background: var(--accent);
      color: #fff;
      font-family: var(--font);
      font-size: 13px;
      font-weight: 600;
      border-radius: var(--r);
      text-decoration: none;
      transition: top 180ms;
    }
    .skip-link:focus { top: 16px; }

    /* ── BASE RESETS ────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--font);
      background: var(--bg);
      color: var(--t1);
      font-size: 13px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }

    /* ── STATIC NAV LAYOUT HELPERS (merged layer owns nav styles) ── */
    .nav-left { display: flex; align-items: center; gap: 20px; }
    .nav-logo-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--accent), #a78bfa);
      box-shadow: 0 0 10px var(--accent-glow);
    }
    .nav-divider { width: 1px; height: 18px; background: var(--b1); }
    .nav-sub { font-size: 12px; color: var(--t3); font-weight: 500; letter-spacing: 0.01em; }
    .live-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 8px var(--green);
      animation: pulse 2.5s ease-in-out infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }

    /* ── KPI ROW GRID ───────────────────────────────────────────────── */
    .kpi-row {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 12px;
      margin-bottom: 48px;
    }
    .kpi-pill {
      display: inline-flex; align-items: center; gap: 5px;
      font-size: 10px; font-weight: 600;
      padding: 4px 10px; border-radius: 20px;
      margin-top: 10px; font-family: var(--mono);
      letter-spacing: 0.02em;
    }
    .pill-red   { background: var(--red-soft);   color: var(--red);   border: 1px solid rgba(255,107,122,0.2); }
    .pill-green { background: var(--green-soft); color: var(--green); border: 1px solid rgba(0,212,161,0.2); }
    .pill-dim   { background: var(--b0);         color: var(--t3);    border: 1px solid var(--b1); }
    .pill-amber { background: var(--amber-soft); color: var(--amber); border: 1px solid rgba(255,179,71,0.2); }

    /* ── SECTION LAYOUT ─────────────────────────────────────────────── */
    .section-head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 20px;
    }
    .section-left { display: flex; align-items: center; gap: 12px; }

    /* ── CHART GRID / COMP GRID LAYOUTS ────────────────────────────── */
    .chart-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 14px; }
    .comp-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
    .market-pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

    /* ── COMP CARD & META (layout helpers) ─────────────────────────── */
    .comp-meta {
      font-size: 11px; color: var(--t3);
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    }
    .comp-meta a {
      color: var(--accent); text-decoration: none;
      font-family: var(--mono); font-size: 10px;
      transition: color 150ms;
    }
    .comp-meta a:hover { color: #a3b8ff; }
    .comp-meta-sep { color: var(--t4); }

    .status-chip {
      font-size: 10px; font-weight: 600;
      padding: 4px 11px; border-radius: 20px;
      white-space: nowrap; flex-shrink: 0; margin-top: 2px;
      letter-spacing: 0.04em;
    }
    .chip-avail { background: var(--green-soft); color: var(--green); border: 1px solid rgba(0,212,161,0.2); }
    .chip-sold  { background: rgba(64,71,98,0.2); color: var(--t3);  border: 1px solid var(--b1); }

    /* ── TABLE ELEMENTS ─────────────────────────────────────────────── */
    .pricing-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    .type-badge { display: inline-flex; align-items: center; gap: 7px; }
    .bed-tag {
      font-size: 11px; font-weight: 500; font-family: var(--mono);
      background: var(--elevated); color: var(--t2);
      padding: 3px 9px; border-radius: var(--r-sm); border: 1px solid var(--b1);
    }
    .furn-tag {
      font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
      color: var(--accent); background: var(--accent-soft);
      padding: 2px 7px; border-radius: 3px; text-transform: uppercase;
      border: 1px solid rgba(108,143,255,0.15);
    }
    .price-main  { font-size: 14px; font-weight: 600; font-family: var(--mono); color: var(--t1); }
    .price-range { font-size: 12px; color: var(--t2); font-family: var(--mono); }
    .price-sold  { font-size: 11px; color: var(--t4); font-style: italic; }
    .delta { font-size: 11px; font-weight: 600; font-family: var(--mono); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 4px; }
    .delta-up   { color: var(--red);   background: var(--red-soft); }
    .delta-down { color: var(--green); background: var(--green-soft); }
    .delta-nil  { color: var(--t4); background: transparent; }

    /* ── CHANGES LAYOUT ─────────────────────────────────────────────── */
    .changes-wrap { display: flex; flex-direction: column; gap: 6px; }
    .change-indicator { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .ci-up   { background: var(--red);   box-shadow: 0 0 8px rgba(255,107,122,0.5); }
    .ci-down { background: var(--green); box-shadow: 0 0 8px rgba(0,212,161,0.5); }
    .change-site   { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
    .change-type   { font-size: 11px; color: var(--t3); }
    .change-prices { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
    .cp-old      { color: var(--t3); text-decoration: line-through; }
    .cp-arrow    { color: var(--t4); }
    .cp-new-up   { color: var(--red);   font-weight: 700; }
    .cp-new-down { color: var(--green); font-weight: 700; }
    .change-when { font-size: 10px; color: var(--t3); font-family: var(--mono); white-space: nowrap; }
    .no-changes {
      background: var(--card); border: 1px solid var(--b1);
      border-radius: var(--r-lg); padding: 36px;
      text-align: center; color: var(--t3); font-size: 12px;
    }

    /* ── HEATMAP LAYOUT ─────────────────────────────────────────────── */
    .mp-chart-wrap { position: relative; height: 260px; }
    .heatmap-grid { display: grid; gap: 3px; margin-top: 16px; }
    .heatmap-row { display: grid; grid-template-columns: 140px repeat(4,1fr); gap: 3px; align-items: center; }
    .heatmap-label { font-size: 11px; color: var(--t2); padding-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .heatmap-header-row { display: grid; grid-template-columns: 140px repeat(4,1fr); gap: 3px; margin-bottom: 6px; }
    .heatmap-header-cell { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3); text-align: center; padding: 4px; }
    .hc-avail-high { background: rgba(0,212,161,0.18); color: var(--green); border: 1px solid rgba(0,212,161,0.25); }
    .hc-avail-mid  { background: rgba(255,179,71,0.14); color: var(--amber); border: 1px solid rgba(255,179,71,0.2); }
    .hc-avail-low  { background: rgba(255,107,122,0.14); color: var(--red);  border: 1px solid rgba(255,107,122,0.2); }
    .hc-na         { background: var(--b0); color: var(--t4); border: 1px solid var(--b1); }

    /* ── LEGEND ─────────────────────────────────────────────────────── */
    .legend-row  { display: flex; gap: 16px; align-items: center; margin-top: 16px; }
    .legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3); }
    .legend-dot  { width: 8px; height: 8px; border-radius: 50%; }

    /* ── SKELETON & FADE ────────────────────────────────────────────── */
    .skel {
      background: linear-gradient(90deg, var(--card) 0%, var(--elevated) 50%, var(--card) 100%);
      background-size: 300% 100%;
      animation: shimmer 1.8s ease-in-out infinite;
      border-radius: var(--r);
    }
    @keyframes shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} }
    .empty-state { padding: 48px; text-align: center; color: var(--t3); font-size: 12px; }
    .fade-in { animation: fadeUp 400ms var(--ease) both; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

    /* ── BED TABS ───────────────────────────────────────────────────── */
    .bed-tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
    .bed-tab {
      font-size: 11px; font-weight: 600;
      padding: 6px 16px; border-radius: 20px;
      border: 1px solid var(--b1);
      background: transparent; color: var(--t3);
      cursor: pointer; transition: all 200ms var(--ease);
      font-family: var(--font);
      letter-spacing: 0.02em;
    }
    .bed-tab:hover { background: rgba(108,143,255,0.07); color: var(--t1); border-color: rgba(108,143,255,0.2); }
    .bed-tab.on {
      background: linear-gradient(135deg, rgba(108,143,255,0.16), rgba(108,143,255,0.09));
      border-color: rgba(108,143,255,0.45);
      color: #a3b8ff;
      box-shadow: 0 0 16px rgba(108,143,255,0.14);
    }

    /* ── MODAL BASE LAYOUT ──────────────────────────────────────────── */
    .modal-backdrop {
      position: fixed; inset: 0; z-index: 900;
      background: rgba(4,5,13,0.88);
      backdrop-filter: blur(16px) saturate(160%);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; pointer-events: none;
      transition: opacity 280ms var(--ease);
    }
    .modal-backdrop.open { opacity: 1; pointer-events: all; }
    .modal-header-inner { flex: 1; }
    .modal-close {
      width: 32px; height: 32px; border-radius: 8px;
      background: var(--b0); border: 1px solid var(--b1);
      color: var(--t2); cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px; line-height: 1;
      transition: background 150ms, color 150ms, border-color 150ms;
      flex-shrink: 0; margin-left: 16px; margin-top: 2px;
    }
    .modal-close:hover { background: var(--red-soft); color: var(--red); border-color: rgba(255,107,122,0.3); }

    /* ── MODAL CONTENT PARTS ─────────────────────────────────────────── */
    .modal-stat-row {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 10px;
      margin-bottom: 24px;
    }
    .modal-stat {
      background: var(--elevated);
      border: 1px solid var(--b1);
      border-radius: var(--r-lg);
      padding: 16px 18px;
    }
    .modal-stat-label {
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--t3); margin-bottom: 8px;
    }
    .modal-stat-value {
      font-family: var(--head);
      font-size: 22px; font-weight: 700;
      letter-spacing: -0.03em;
      background: linear-gradient(135deg, var(--t1) 60%, var(--t2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .modal-stat-sub { font-size: 10px; color: var(--t3); margin-top: 4px; }

    .modal-section-title {
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--t3); margin-bottom: 12px; margin-top: 20px;
    }
    .modal-section-title:first-child { margin-top: 0; }

    .modal-table { width: 100%; border-collapse: collapse; }
    .modal-table thead th {
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--t4); padding: 8px 14px;
      text-align: left; border-bottom: 1px solid var(--b1);
    }
    .modal-table tbody td {
      padding: 10px 14px; border-bottom: 1px solid var(--b0);
      vertical-align: middle;
    }
    .modal-table tbody tr:last-child td { border-bottom: none; }
    .modal-table tbody tr:hover td { background: rgba(108,143,255,0.03); }

    .modal-site-row {
      display: flex; align-items: center; justify-content: space-between;
      background: var(--elevated); border: 1px solid var(--b1);
      border-radius: var(--r-lg); padding: 14px 18px;
      margin-bottom: 8px;
      transition: border-color 150ms;
    }
    .modal-site-row:hover { border-color: var(--b2); }
    .modal-site-row:last-child { margin-bottom: 0; }
    .msr-left { display: flex; align-items: center; gap: 12px; }
    .msr-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .msr-name { font-size: 13px; font-weight: 600; }
    .msr-meta { font-size: 11px; color: var(--t3); }
    .msr-right { text-align: right; }
    .msr-price { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--t1); }
    .msr-range { font-size: 11px; color: var(--t3); font-family: var(--mono); }

    .modal-change-item {
      display: grid;
      grid-template-columns: 8px 1fr auto;
      align-items: center; gap: 14px;
      background: var(--elevated); border: 1px solid var(--b1);
      border-radius: var(--r-lg); padding: 12px 16px;
      margin-bottom: 7px;
      transition: border-color 150ms;
    }
    .modal-change-item:hover { border-color: var(--b2); }
    .modal-change-item:last-child { margin-bottom: 0; }
    .mci-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .mci-info-title { font-size: 12px; font-weight: 600; }
    .mci-info-sub   { font-size: 11px; color: var(--t3); }
    .mci-price { font-family: var(--mono); font-size: 12px; font-weight: 700; white-space: nowrap; }
    .mci-up   { color: var(--red); }
    .mci-down { color: var(--green); }

    .modal-bar-row {
      display: flex; align-items: center; gap: 12px;
      margin-bottom: 8px;
    }
    .modal-bar-label { font-size: 11px; color: var(--t2); width: 110px; flex-shrink: 0; }
    .modal-bar-track {
      flex: 1; height: 6px; background: var(--b1);
      border-radius: 3px; overflow: hidden;
    }
    .modal-bar-fill {
      height: 100%; border-radius: 3px;
      transition: width 600ms var(--ease);
    }
    .modal-bar-val { font-size: 11px; font-family: var(--mono); color: var(--t2); width: 60px; text-align: right; flex-shrink: 0; }

    @media(prefers-reduced-motion:reduce){ *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
    /* ══════════════════════════════════════════════════════════════
       MERGED DESIGN SYSTEM — clean single source of truth
       No duplication, no specificity battles.
    ══════════════════════════════════════════════════════════════ */

    /* ── SECTION HEADERS ─────────────────────────────────────────── */
    .section-title {
      font-family: var(--head);
      font-size: 19px;
      font-weight: 800;
      letter-spacing: -0.03em;
      text-transform: none;
      color: var(--t1);
    }
    .section-tag {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(108,143,255,0.1);
      border: 1px solid rgba(108,143,255,0.25);
      padding: 3px 11px;
      border-radius: 100px;
    }
    .section-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    /* ── KPI CARDS ────────────────────────────────────────────────── */
    .kpi {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: var(--r-2xl);
      padding: 32px 32px 48px;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 280ms var(--ease), transform 280ms var(--ease), box-shadow 280ms var(--ease);
    }
    .kpi::before {
      content: '';
      position: absolute;
      top: 0; left: 20px; right: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
      pointer-events: none;
    }
    .kpi::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 100% 70% at 50% 0%, rgba(108,143,255,0.09) 0%, transparent 65%);
      pointer-events: none;
    }
    .kpi:hover {
      border-color: rgba(108,143,255,0.38);
      transform: translateY(-4px);
      box-shadow: 0 24px 72px rgba(0,0,0,0.6), var(--glow-accent);
    }
    .kpi:hover .kpi-hint { color: var(--accent); }
    .kpi-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 18px;
    }
    .kpi-value {
      font-family: var(--head);
      font-size: 56px;
      font-weight: 800;
      letter-spacing: -0.05em;
      line-height: 1;
      background: linear-gradient(160deg, #ffffff 0%, #c8d4ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .kpi-sub { font-size: 11px; color: var(--t3); margin-top: 12px; }
    .kpi-hint {
      position: absolute;
      bottom: 20px; right: 24px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--t4);
      display: flex;
      align-items: center;
      gap: 4px;
      transition: color 200ms;
    }

    /* ── CHART CARDS ─────────────────────────────────────────────── */
    .chart-card {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--r-xl);
      padding: 28px;
      position: relative;
      overflow: hidden;
      transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
    }
    .chart-card::before {
      content: '';
      position: absolute;
      top: 0; left: 20px; right: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
      pointer-events: none;
    }
    .chart-card:hover { border-color: var(--b2); }
    .chart-card.clickable { cursor: pointer; }
    .chart-card.clickable:hover {
      border-color: rgba(108,143,255,0.35);
      box-shadow: 0 16px 50px rgba(0,0,0,0.5), var(--glow-accent-sm);
      transform: translateY(-3px);
    }
    .chart-card.clickable .chart-title::after {
      content: ' ↗';
      font-size: 11px;
      color: var(--t3);
      transition: color 180ms;
    }
    .chart-card.clickable:hover .chart-title::after { color: var(--accent); }
    .chart-title {
      font-family: var(--head);
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--t1);
      margin-bottom: 4px;
    }
    .chart-sub {
      font-size: 11px;
      color: var(--t3);
      margin-bottom: 24px;
    }
    .chart-wrap { position: relative; height: 240px; }

    /* ── COMPETITOR CARDS ────────────────────────────────────────── */
    .comp-card {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--r-xl);
      overflow: hidden;
      transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
    }
    .comp-card:hover {
      border-color: rgba(108,143,255,0.3);
      box-shadow: 0 16px 48px rgba(0,0,0,0.55), var(--glow-accent-sm);
      transform: translateY(-3px);
    }
    .comp-head {
      padding: 24px 26px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .comp-name {
      font-family: var(--head);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.03em;
      margin-bottom: 6px;
      background: linear-gradient(160deg, #ffffff 0%, #c8d4ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ── MARKET POSITION ─────────────────────────────────────────── */
    .market-pos-card {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--r-xl);
      padding: 28px;
      position: relative;
      overflow: hidden;
      transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease);
    }
    .market-pos-card::before {
      content: '';
      position: absolute;
      top: 0; left: 20px; right: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
      pointer-events: none;
    }
    .market-pos-card:hover { border-color: var(--b2); }
    .market-pos-card.clickable { cursor: pointer; }
    .market-pos-card.clickable:hover {
      border-color: rgba(108,143,255,0.35);
      box-shadow: 0 16px 50px rgba(0,0,0,0.5), var(--glow-accent-sm);
      transform: translateY(-3px);
    }
    .market-pos-card.clickable .chart-title::after {
      content: ' ↗'; font-size: 11px; color: var(--t3); transition: color 180ms;
    }
    .market-pos-card.clickable:hover .chart-title::after { color: var(--accent); }
    .mp-chart-wrap { position: relative; height: 260px; }

    /* ── TABLE ───────────────────────────────────────────────────── */
    thead th {
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--t3);
      padding: 12px 24px;
      text-align: left;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      font-family: var(--font);
    }
    tbody td {
      padding: 13px 24px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      vertical-align: middle;
    }
    tbody tr:last-child td { border-bottom: none; }
    tbody tr { transition: background 150ms; }
    tbody tr:hover td { background: rgba(108,143,255,0.06); }

    /* ── CHANGE ROWS ─────────────────────────────────────────────── */
    .change-row {
      display: grid;
      grid-template-columns: 10px 1fr auto auto;
      align-items: center; gap: 18px;
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-lg);
      padding: 16px 22px;
      transition: background 200ms, border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
    }
    .change-row:hover {
      border-color: rgba(108,143,255,0.28);
      transform: translateX(4px);
      background: #131727;
      box-shadow: -4px 0 20px rgba(108,143,255,0.1), 0 8px 24px rgba(0,0,0,0.4);
    }

    /* ── HEATMAP ─────────────────────────────────────────────────── */
    .heatmap-card {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--r-xl);
      padding: 28px;
      position: relative;
      overflow: hidden;
    }
    .heatmap-card::before {
      content: '';
      position: absolute;
      top: 0; left: 20px; right: 20px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
      pointer-events: none;
    }
    .heatmap-cell {
      height: 56px;
      border-radius: 10px;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 2px;
      font-family: var(--mono);
      font-size: 13px; font-weight: 700;
      transition: transform 150ms, box-shadow 150ms;
      cursor: default;
    }
    .heatmap-cell:hover { transform: scale(1.04); z-index: 1; position: relative; }
    .heatmap-cell-label { font-size: 9px; font-weight: 400; opacity: 0.7; letter-spacing: 0.04em; }

    /* ── INSIGHT CARDS ───────────────────────────────────────────── */
    .insight-card {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--r-xl);
      padding: 22px 24px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
    }
    .insight-card:hover {
      border-color: rgba(108,143,255,0.28);
      transform: translateY(-3px);
      box-shadow: 0 12px 40px rgba(0,0,0,0.5), var(--glow-accent-sm);
    }

    /* ── NAV ─────────────────────────────────────────────────────── */
    nav {
      position: sticky; top: 0; z-index: 200;
      height: 60px;
      background: rgba(4,5,13,0.92);
      backdrop-filter: blur(40px) saturate(220%);
      border-bottom: 1px solid rgba(255,255,255,0.07);
      padding: 0 36px;
      display: flex; align-items: center; justify-content: space-between;
    }
    nav::after {
      content: '';
      position: absolute;
      bottom: -1px; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(108,143,255,0.2) 30%, rgba(108,143,255,0.35) 50%, rgba(108,143,255,0.2) 70%, transparent 100%);
      pointer-events: none;
    }
    .nav-logo {
      font-family: var(--head);
      font-size: 15px; font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--t1);
      display: flex; align-items: center; gap: 8px;
    }
    .nav-live {
      display: flex; align-items: center; gap: 7px;
      font-size: 10px;
      padding: 5px 13px;
      border-radius: 100px;
      background: rgba(0,212,161,0.08);
      border: 1px solid rgba(0,212,161,0.22);
      color: var(--green);
      font-family: var(--mono);
      letter-spacing: 0.06em;
    }
    .nav-right {
      display: flex; align-items: center; gap: 10px;
    }

    /* ── EXPORT BUTTON ───────────────────────────────────────────── */
    .export-btn {
      display: flex; align-items: center; gap: 7px;
      font-size: 11px; font-weight: 600;
      padding: 6px 14px;
      border-radius: 100px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.04);
      color: var(--t2);
      cursor: pointer;
      transition: all 200ms var(--ease);
      font-family: var(--font);
      letter-spacing: 0.03em;
    }
    .export-btn:hover {
      border-color: rgba(108,143,255,0.4);
      background: rgba(108,143,255,0.1);
      color: var(--t1);
      box-shadow: var(--glow-accent-sm);
    }
    .export-btn svg {
      width: 13px; height: 13px;
      opacity: 0.65;
      transition: opacity 180ms;
    }
    .export-btn:hover svg { opacity: 1; }

    /* Export dropdown */
    .export-wrap { position: relative; }
    .export-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 180px;
      background: var(--elevated);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: var(--r-lg);
      box-shadow: 0 16px 40px rgba(0,0,0,0.6);
      overflow: hidden;
      opacity: 0;
      pointer-events: none;
      transform: translateY(-6px) scale(0.97);
      transition: all 180ms var(--ease);
      z-index: 300;
    }
    .export-dropdown.open {
      opacity: 1;
      pointer-events: all;
      transform: translateY(0) scale(1);
    }
    .export-option {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      font-size: 12px; color: var(--t2);
      cursor: pointer;
      transition: background 120ms, color 120ms;
      font-family: var(--font);
    }
    .export-option:hover { background: rgba(108,143,255,0.08); color: var(--t1); }
    .export-option:first-child { border-radius: var(--r-lg) var(--r-lg) 0 0; }
    .export-option:last-child  { border-radius: 0 0 var(--r-lg) var(--r-lg); }
    .export-option svg { width: 13px; height: 13px; opacity: 0.6; flex-shrink: 0; }

    /* ── AI INSIGHTS STRIP ───────────────────────────────────────── */
    .ai-insights-section {
      margin-bottom: 52px;
    }
    .ai-insights-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 16px;
    }
    .ai-insights-left {
      display: flex; align-items: center; gap: 12px;
    }
    .ai-badge {
      display: flex; align-items: center; gap: 6px;
      font-size: 10px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--purple);
      background: rgba(192,132,252,0.1);
      border: 1px solid rgba(192,132,252,0.2);
      padding: 3px 10px;
      border-radius: 100px;
    }
    .ai-badge-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--purple);
      box-shadow: 0 0 6px rgba(192,132,252,0.8);
      animation: pulse 2.5s ease-in-out infinite;
    }
    .ai-refresh-btn {
      display: flex; align-items: center; gap: 6px;
      font-size: 11px; color: var(--t3);
      background: none; border: none;
      cursor: pointer; padding: 4px 8px;
      border-radius: 6px;
      transition: color 150ms, background 150ms;
      font-family: var(--font);
    }
    .ai-refresh-btn:hover { color: var(--t2); background: var(--b0); }
    .ai-refresh-btn svg { width: 12px; height: 12px; }
    .ai-refresh-btn.spinning svg { animation: spin 1s linear infinite; }

    .ai-insights-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .ai-insight-card {
      background: linear-gradient(160deg, rgba(20,16,36,0.95) 0%, rgba(13,10,26,0.95) 100%);
      border: 1px solid rgba(192,132,252,0.14);
      border-radius: var(--r-xl);
      padding: 24px 26px;
      position: relative;
      overflow: hidden;
      transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
    }
    .ai-insight-card::before {
      content: '';
      position: absolute;
      top: 0; left: 16px; right: 16px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(192,132,252,0.28), transparent);
      pointer-events: none;
    }
    .ai-insight-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192,132,252,0.06) 0%, transparent 60%);
      pointer-events: none;
    }
    .ai-insight-card:hover {
      border-color: rgba(192,132,252,0.32);
      transform: translateY(-4px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.5), var(--glow-purple-sm);
    }
    .ai-insight-icon {
      width: 38px; height: 38px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 17px;
      flex-shrink: 0;
      margin-bottom: 16px;
    }
    .ai-insight-label {
      font-size: 9px; font-weight: 700;
      letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 8px;
    }
    .ai-insight-text {
      font-size: 13px; color: var(--t1);
      line-height: 1.6;
      font-weight: 400;
    }
    .ai-insight-text strong { color: var(--t1); font-weight: 600; }

    /* Skeleton states for AI insights */
    .ai-insight-skel .skel { width: 100%; border-radius: 6px; }
    .ai-insight-skel .ai-insight-label { background: var(--elevated); border-radius: 4px; height: 10px; width: 60%; margin-bottom: 12px; }

    /* ── MODAL ───────────────────────────────────────────────────── */
    .modal {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: var(--r-2xl);
      box-shadow: 0 40px 120px rgba(0,0,0,0.9), var(--glow-accent-sm);
      width: 100%; max-width: 680px;
      max-height: 85vh;
      overflow-y: auto;
      transform: translateY(20px) scale(0.97);
      transition: transform 300ms var(--ease);
      position: relative;
    }
    .modal-backdrop.open .modal { transform: translateY(0) scale(1); }
    .modal-header {
      padding: 28px 32px 22px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      border-radius: var(--r-2xl) var(--r-2xl) 0 0;
      display: flex; align-items: flex-start; justify-content: space-between;
      position: sticky; top: 0;
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      z-index: 2;
    }
    .modal-eyebrow {
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--accent); margin-bottom: 6px;
    }
    .modal-title {
      font-family: var(--head);
      font-size: 22px; font-weight: 800;
      letter-spacing: -0.03em;
    }
    .modal-body { padding: 28px 32px 32px; }
    .modal-section-title {
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase;
      color: var(--t3); margin-bottom: 14px; margin-top: 24px;
    }
    .modal-section-title:first-child { margin-top: 0; }

    /* ── PAGE ────────────────────────────────────────────────────── */
    .page {
      max-width: none;
      margin: 0;
      padding: 0;
    }
    .section { margin-bottom: 52px; }
    .section-head { margin-bottom: 22px; }

    /* ── RESPONSIVE ──────────────────────────────────────────────── */
    @media(max-width:1280px){
      .right-panel { width: 260px; }
      .sidebar-nav { width: 180px; }
    }
    @media(max-width:1024px){
      .right-panel { display: none; }
      .sidebar-nav { width: 170px; }
      .comp-grid { grid-template-columns: 1fr; }
      .chart-grid { grid-template-columns: 1fr; }
      .market-pos-grid { grid-template-columns: 1fr; }
      .insights-strip { grid-template-columns: 1fr; }
      .ai-insights-grid { grid-template-columns: 1fr; }
    }
    @media(max-width:768px){
      .sidebar-nav { display: none; }
      .main-tabs { display: flex !important; }
      .main-content { padding: 20px 16px 60px; }
    }
    @media(max-width:640px){
      nav { padding: 0 16px; }
      .kpi-row { gap: 8px; }
      .heatmap-row { grid-template-columns: 100px repeat(4,1fr); }
      .heatmap-header-row { grid-template-columns: 100px repeat(4,1fr); }
      .ai-insights-grid { grid-template-columns: 1fr; }
      .nav-right .export-wrap { display: none; }
    }

    @media print {
      nav, .main-tabs, #loading-screen, #login-screen, .export-wrap, .ai-refresh-btn, .modal-backdrop { display: none !important; }
      body { background: #fff; color: #000; }
      .page { padding: 0; }
      .kpi, .chart-card, .comp-card, .ai-insight-card, .heatmap-card, .market-pos-card, .change-row { border: 1px solid #ddd !important; background: #fff !important; break-inside: avoid; box-shadow: none !important; }
      .kpi-value, .kpi-label, .section-title, .chart-title, .comp-name, .ai-insight-text { color: #000 !important; -webkit-text-fill-color: #000 !important; }
      .chart-sub, .kpi-sub, .ai-insight-label, .comp-meta { color: #666 !important; }
    }

    /* ── LOGIN SCREEN ───────────────────────────────────────────────── */
    #login-screen {
      position: fixed; inset: 0; z-index: 9999;
      background: #05060a;
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      transition: opacity 500ms var(--ease), transform 500ms var(--ease);
    }
    #login-screen.hidden {
      opacity: 0; pointer-events: none; transform: scale(1.02);
    }

    /* Animated background grid */
    #login-screen::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(108,143,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(108,143,255,0.04) 1px, transparent 1px);
      background-size: 48px 48px;
      animation: gridPan 20s linear infinite;
    }
    @keyframes gridPan {
      0%   { background-position: 0 0; }
      100% { background-position: 48px 48px; }
    }

    /* Ambient glow */
    #login-screen::after {
      content: '';
      position: absolute;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(108,143,255,0.08) 0%, transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .login-card {
      position: relative; z-index: 2;
      width: 100%; max-width: 420px;
      background: #0f1119;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 24px;
      padding: 48px 40px 40px;
      box-shadow: 0 32px 80px rgba(0,0,0,0.8), 0 0 0 1px rgba(108,143,255,0.08);
      animation: loginUp 600ms cubic-bezier(0.16,1,0.3,1) both;
    }
    @keyframes loginUp {
      from { opacity:0; transform: translateY(24px); }
      to   { opacity:1; transform: translateY(0); }
    }

    .login-brand {
      text-align: center;
      margin-bottom: 36px;
    }
    .login-crown { display: none; }
    .login-wordmark { display: none; }
    .login-brand-name {
      font-family: var(--head);
      font-size: 26px; font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #eceef7;
      margin-bottom: 12px;
    }
    .login-brand-sub {
      font-size: 11px; color: var(--t3);
      letter-spacing: 0.08em; text-transform: uppercase;
    }

    .login-field {
      margin-bottom: 14px;
    }
    .login-field label {
      display: block;
      font-size: 11px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--t3); margin-bottom: 7px;
    }
    .login-field input {
      width: 100%;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 10px;
      padding: 13px 16px;
      font-family: var(--font);
      font-size: 14px; color: var(--t1);
      outline: none;
      transition: border-color 180ms, box-shadow 180ms, background 180ms;
      -webkit-text-fill-color: var(--t1);
    }
    .login-field input::placeholder { color: var(--t3); -webkit-text-fill-color: var(--t3); }
    .login-field input:-webkit-autofill,
    .login-field input:-webkit-autofill:hover,
    .login-field input:-webkit-autofill:focus {
      -webkit-box-shadow: 0 0 0 1000px #141720 inset !important;
      -webkit-text-fill-color: #eceef7 !important;
      caret-color: #eceef7;
      border-color: rgba(255,255,255,0.09) !important;
    }

    /* ── LOADING SCREEN ─────────────────────────────────────────────── */
    #loading-screen {
      position: fixed; inset: 0; z-index: 9999;
      background: #020308;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      overflow: hidden;
      opacity: 1;
      transition: opacity 600ms cubic-bezier(0.4,0,0.2,1);
    }
    #loading-screen.out { opacity: 0; pointer-events: none; }
    #loading-screen.gone { display: none; }

    /* Canvas fills full screen */
    #holo-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
    }

    /* Content over canvas */
    .holo-ui {
      position: relative; z-index: 10;
      display: flex; flex-direction: column;
      align-items: center;
      pointer-events: none;
    }

    /* Hexagon logo mark */
    .holo-hex {
      width: 72px; height: 72px;
      position: relative; margin-bottom: 32px;
    }
    .holo-hex svg { width: 100%; height: 100%; }

    .holo-brand {
      font-family: var(--head);
      font-size: 28px; font-weight: 700;
      letter-spacing: 0.18em; text-transform: uppercase;
      color: #fff;
      text-shadow: 0 0 40px rgba(108,143,255,0.8), 0 0 80px rgba(108,143,255,0.4);
      margin-bottom: 6px;
      animation: hFadeUp 800ms cubic-bezier(0.16,1,0.3,1) 200ms both;
    }
    .holo-tagline {
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
      color: rgba(108,143,255,0.7);
      margin-bottom: 52px;
      animation: hFadeUp 800ms cubic-bezier(0.16,1,0.3,1) 350ms both;
    }

    /* Scanning progress bar */
    .holo-progress {
      width: 320px; position: relative;
      animation: hFadeUp 600ms cubic-bezier(0.16,1,0.3,1) 500ms both;
    }
    .holo-progress-track {
      width: 100%; height: 1px;
      background: rgba(108,143,255,0.2);
      position: relative; margin-bottom: 12px;
    }
    .holo-progress-fill {
      position: absolute; top: 0; left: 0;
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #6c8fff, #a78bfa, #00d4a1);
      transition: width 180ms ease-out;
      box-shadow: 0 0 12px rgba(108,143,255,0.8);
    }
    .holo-progress-scan {
      position: absolute; top: -4px; left: 0%;
      width: 2px; height: 9px;
      background: #fff;
      box-shadow: 0 0 8px #fff, 0 0 16px rgba(108,143,255,0.8);
      transition: left 180ms ease-out;
    }

    /* Tick marks on track */
    .holo-progress-ticks {
      display: flex; justify-content: space-between;
      margin-bottom: 10px;
    }
    .holo-tick {
      width: 1px; height: 4px;
      background: rgba(108,143,255,0.25);
    }

    .holo-status {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: rgba(108,143,255,0.6);
      letter-spacing: 0.12em;
      display: flex; align-items: center; gap: 8px;
    }
    .holo-cursor {
      display: inline-block; width: 6px; height: 6px;
      border-radius: 50%;
      background: #6c8fff;
      box-shadow: 0 0 8px rgba(108,143,255,1);
      animation: cursorBlink 1s ease-in-out infinite;
    }
    @keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0.2} }

    /* Data stream numbers */
    .holo-stream {
      position: absolute; inset: 0;
      pointer-events: none; overflow: hidden;
      font-family: 'JetBrains Mono', monospace;
      font-size: 11px;
    }
    .stream-col {
      position: absolute; top: 0;
      display: flex; flex-direction: column;
      animation: streamFall linear infinite;
      opacity: 0;
    }
    .stream-char {
      line-height: 1.4;
      color: rgba(108,143,255,0.15);
    }
    .stream-char.bright { color: rgba(108,143,255,0.5); }
    @keyframes streamFall {
      0%   { transform: translateY(-100%); opacity: 0; }
      5%   { opacity: 1; }
      95%  { opacity: 1; }
      100% { transform: translateY(110vh); opacity: 0; }
    }

    @keyframes hFadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── CAR SCENE (l.landerer) ─────────────────────────────────────── */
    .car-ui {
      position: relative; z-index: 10;
      display: flex; flex-direction: column;
      align-items: flex-start;
      padding: 0 0 60px 10%;
      justify-content: flex-end;
      height: 100%;
      pointer-events: none;
    }
    .car-greeting {
      font-family: var(--head);
      font-size: 11px; font-weight: 400;
      letter-spacing: 0.24em; text-transform: uppercase;
      color: rgba(255,255,255,0.35);
      margin-bottom: 10px;
      animation: hFadeUp 1s cubic-bezier(0.16,1,0.3,1) 300ms both;
    }
    .car-name {
      font-family: var(--head);
      font-size: 52px; font-weight: 700;
      letter-spacing: -0.02em;
      color: #fff;
      line-height: 1;
      margin-bottom: 6px;
      animation: hFadeUp 1s cubic-bezier(0.16,1,0.3,1) 450ms both;
    }
    .car-model {
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px; letter-spacing: 0.18em;
      color: rgba(255,255,255,0.4);
      margin-bottom: 48px;
      animation: hFadeUp 1s cubic-bezier(0.16,1,0.3,1) 580ms both;
    }
    .car-progress {
      width: 280px;
      animation: hFadeUp 800ms cubic-bezier(0.16,1,0.3,1) 700ms both;
    }
    .car-progress-track {
      width: 100%; height: 1px;
      background: rgba(255,255,255,0.12);
      position: relative; margin-bottom: 10px;
    }
    .car-progress-fill {
      position: absolute; top: 0; left: 0;
      height: 100%; width: 0%;
      background: #fff;
      transition: width 200ms ease-out;
      box-shadow: 0 0 8px rgba(255,255,255,0.6);
    }
    .car-status {
      font-family: 'JetBrains Mono', monospace;
      font-size: 10px; color: rgba(255,255,255,0.35);
      letter-spacing: 0.12em;
    }
    .login-field input:focus {
      border-color: rgba(236,238,247,0.3);
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 0 3px rgba(236,238,247,0.06);
    }
    .login-field input.error {
      border-color: rgba(255,107,122,0.5);
      box-shadow: 0 0 0 3px rgba(255,107,122,0.1);
    }

    .login-error {
      font-size: 12px; color: var(--red);
      text-align: center;
      min-height: 18px;
      margin-bottom: 14px;
      opacity: 0; transition: opacity 200ms;
    }
    .login-error.show { opacity: 1; }

    .login-btn {
      width: 100%;
      background: #eceef7;
      border: none; border-radius: 10px;
      padding: 14px;
      font-family: var(--head);
      font-size: 14px; font-weight: 700;
      letter-spacing: 0.04em;
      color: #05060a;
      cursor: pointer;
      transition: transform 150ms, box-shadow 150ms, opacity 150ms, background 150ms;
      box-shadow: 0 4px 20px rgba(236,238,247,0.12);
    }
    .login-btn:hover {
      transform: translateY(-1px);
      background: #ffffff;
      box-shadow: 0 8px 28px rgba(236,238,247,0.2);
    }
    .login-btn:active { transform: translateY(0); }
    .login-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

    .login-footer {
      text-align: center;
      margin-top: 24px;
      font-size: 11px; color: var(--t4);
    }

    /* ── LAYOUT SHELL ───────────────────────────────────────────────── */
    .app-shell {
      display: flex;
      min-height: calc(100vh - 60px);
    }

    /* ── LEFT SIDEBAR NAV ───────────────────────────────────────────── */
    .sidebar-nav {
      width: 200px;
      flex-shrink: 0;
      position: sticky;
      top: 60px;
      height: calc(100vh - 60px);
      background: rgba(4,5,12,0.98);
      border-right: 1px solid var(--b1);
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: 16px 10px 16px;
      gap: 2px;
      overflow-y: auto;
      z-index: 180;
    }
    .sidebar-section-label {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--t4);
      padding: 6px 10px 4px;
      margin-top: 4px;
    }
    .sidebar-section-label:first-child { margin-top: 0; }
    .sidebar-tab {
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font);
      font-size: 12.5px;
      font-weight: 500;
      padding: 8px 10px;
      border-radius: var(--r);
      border: 1px solid transparent;
      background: transparent;
      color: var(--t3);
      cursor: pointer;
      transition: all 160ms var(--ease);
      text-align: left;
      width: 100%;
    }
    .sidebar-tab svg {
      width: 14px; height: 14px;
      opacity: 0.5;
      flex-shrink: 0;
      transition: opacity 160ms;
    }
    .sidebar-tab:hover {
      background: rgba(108,143,255,0.06);
      color: var(--t2);
      border-color: rgba(108,143,255,0.15);
    }
    .sidebar-tab:hover svg { opacity: 0.8; }
    .sidebar-tab.on {
      background: linear-gradient(135deg, rgba(108,143,255,0.14), rgba(108,143,255,0.07));
      border-color: rgba(108,143,255,0.32);
      color: #a3b8ff;
      box-shadow: 0 0 20px rgba(108,143,255,0.1);
    }
    .sidebar-tab.on svg { opacity: 1; }
    .sidebar-divider {
      height: 1px;
      background: var(--b1);
      margin: 6px 10px;
    }

    /* ── MAIN CONTENT AREA ──────────────────────────────────────────── */
    .main-content {
      flex: 1;
      min-width: 0;
      padding: 28px 24px 100px;
    }

    /* ── RIGHT PANEL ────────────────────────────────────────────────── */
    .right-panel {
      width: 300px;
      flex-shrink: 0;
      position: sticky;
      top: 60px;
      height: calc(100vh - 60px);
      overflow-y: auto;
      padding: 18px 16px;
      border-left: 1px solid var(--b1);
      background: rgba(4,5,12,0.98);
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .right-panel-title {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--t3);
      padding: 0 2px;
      margin-bottom: 6px;
    }

    /* KPI cards in right panel — stacked vertically */
    .kpi-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .kpi-mini {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid rgba(255,255,255,0.07);
      border-radius: var(--r-lg);
      padding: 14px 16px 24px;
      position: relative;
      overflow: hidden;
      transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
      cursor: default;
    }
    .kpi-mini::before {
      content: '';
      position: absolute;
      top: 0; left: 12px; right: 12px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.13), transparent);
      pointer-events: none;
    }
    .kpi-mini:hover {
      border-color: rgba(108,143,255,0.3);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.45), var(--glow-accent-sm);
    }
    .kpi-mini-label {
      font-size: 9px;
      font-weight: 700;
      color: var(--t3);
      margin-bottom: 6px;
      letter-spacing: 0.07em;
      text-transform: uppercase;
    }
    .kpi-mini-value {
      font-family: var(--head);
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.04em;
      line-height: 1;
      background: linear-gradient(160deg, #ffffff 0%, #c8d4ff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .kpi-mini-sub {
      font-size: 10px;
      color: var(--t3);
      margin-top: 4px;
    }
    .kpi-mini-hint {
      position: absolute;
      bottom: 8px; right: 12px;
      font-size: 8px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--t4);
      display: flex; align-items: center; gap: 3px;
      transition: color 200ms;
      cursor: pointer;
    }
    .kpi-mini:hover .kpi-mini-hint { color: var(--accent); }

    /* AI insights in right panel — stacked */
    .ai-panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .ai-panel-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ai-panel-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--t2);
    }
    .ai-insights-stack {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ai-insight-card-sm {
      background: linear-gradient(160deg, rgba(20,16,36,0.95) 0%, rgba(13,10,26,0.95) 100%);
      border: 1px solid rgba(192,132,252,0.12);
      border-radius: var(--r-lg);
      padding: 14px 16px;
      position: relative;
      overflow: hidden;
      transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
    }
    .ai-insight-card-sm::before {
      content: '';
      position: absolute;
      top: 0; left: 10px; right: 10px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(192,132,252,0.25), transparent);
      pointer-events: none;
    }
    .ai-insight-card-sm:hover {
      border-color: rgba(192,132,252,0.3);
      transform: translateY(-2px);
      box-shadow: 0 8px 28px rgba(0,0,0,0.45), var(--glow-purple-sm);
    }
    .ai-insight-card-sm-header {
      display: flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 7px;
    }
    .ai-insight-icon-sm {
      width: 22px; height: 22px;
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px;
      flex-shrink: 0;
    }
    .ai-insight-label-sm {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--t3);
    }
    .ai-insight-text-sm {
      font-size: 11.5px;
      color: var(--t1);
      line-height: 1.5;
    }

    /* ── OLD KPI ROW — HIDDEN ───────────────────────────────────────── */
    .kpi-row { display: none; }
    .ai-insights-section { display: none; }

    /* ── MAIN TABS — now sidebar, hidden old style ───────────────────── */
    .main-tabs { display: none; }
    .tab-panel { display: none; }
    .tab-panel.on { display: block; }

    /* ── OWN LISTINGS ───────────────────────────────────────────────── */
    .brand-section { margin-bottom: 48px; }
    .brand-header { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
    .brand-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; }
    .brand-nation     { background: rgba(108,143,255,0.12); color: var(--accent); border: 1px solid rgba(108,143,255,0.25); }
    .brand-coronation { background: rgba(0,212,161,0.1);   color: var(--green);  border: 1px solid rgba(0,212,161,0.25); }
    .brand-count { font-size: 12px; color: var(--t3); }

    .unit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
    .unit-card {
      background: linear-gradient(160deg, #111420 0%, #0d1018 100%);
      border: 1px solid var(--b1);
      border-radius: var(--r-xl); padding: 20px 22px;
      transition: border-color 240ms var(--ease), transform 240ms var(--ease), box-shadow 240ms var(--ease);
      position: relative; overflow: hidden;
    }
    .unit-card:hover { border-color: rgba(108,143,255,0.28); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.5), var(--glow-accent-sm); }
    .unit-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(108,143,255,0.04) 0%,transparent 60%); pointer-events:none; }
    .unit-address { font-family: var(--head); font-size: 15px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
    .unit-meta { font-size: 11px; color: var(--t3); margin-bottom: 14px; }
    .unit-price { font-family: var(--head); font-size: 28px; font-weight: 700; letter-spacing: -0.03em; background: linear-gradient(135deg, var(--t1) 60%, var(--t2)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom: 4px; }
    .unit-price-sub { font-size: 11px; color: var(--t3); margin-bottom: 14px; }
    .unit-vs { display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--elevated); border:1px solid var(--b1); border-radius:var(--r); font-size:11px; }
    .unit-vs-label { color: var(--t3); flex: 1; }
    .unit-vs-val { font-family: var(--mono); font-weight: 700; font-size: 12px; }
    .vs-above { color: var(--red); }
    .vs-below { color: var(--green); }
    .vs-equal { color: var(--t3); }
    .unit-status { position:absolute; top:16px; right:16px; font-size:9px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
    .status-available   { background:var(--green-soft); color:var(--green); border:1px solid rgba(0,212,161,0.2); }
    .status-leased      { background:var(--b0); color:var(--t3); border:1px solid var(--b1); }
    .status-application { background:var(--amber-soft); color:var(--amber); border:1px solid rgba(255,179,71,0.2); }
    .unit-bed-row { display:flex; gap:6px; margin-bottom:12px; }
    .unit-bed-tag { font-size:10px; font-weight:500; font-family:var(--mono); background:var(--elevated); color:var(--t2); padding:2px 8px; border-radius:4px; border:1px solid var(--b1); }
    .own-chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:48px; }
    .own-kpi-row { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:48px; }
    .empty-own { text-align:center; padding:60px; color:var(--t3); font-size:13px; background:var(--card); border:1px solid var(--b1); border-radius:var(--r-xl); }

    @media(max-width:1024px){ .unit-grid{grid-template-columns:repeat(2,1fr)} .own-chart-grid{grid-template-columns:1fr} .own-kpi-row{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:640px){ .unit-grid{grid-template-columns:1fr} .main-tabs{padding:0 16px} }

    /* User badge in nav when logged in */
    .nav-user {
      display: flex; align-items: center; gap: 8px;
      font-size: 10px; color: var(--t2);
      font-family: var(--mono);
      background: rgba(255,255,255,0.03);
      border: 1px solid rgba(255,255,255,0.08);
      padding: 5px 13px;
      border-radius: 20px;
      cursor: pointer;
      letter-spacing: 0.04em;
      transition: border-color 180ms, color 180ms, background 180ms;
    }
    .nav-user:hover { border-color: rgba(255,107,122,0.35); color: var(--red); background: rgba(255,107,122,0.06); }
    .nav-user-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--t2);
    }