/* ============================================
   Component Styles - Extracted from index.html
   ============================================ */

/* --------------------------------------------
   Hero Map Container
   -------------------------------------------- */
.hero-map-container {
                  position: relative;
                  width: 100%;
                  height: 500px;
                  background: linear-gradient(135deg, #e8eef7 0%, #dce4f2 100%);
                  overflow: visible;
                }

                /* Edge fade effect */
                .hero-map-container::before {
                  content: "";
                  position: absolute;
                  inset: 0;
                  background: radial-gradient(
                    ellipse 70% 70% at center,
                    transparent 30%,
                    rgba(248, 250, 252, 0.4) 60%,
                    rgba(248, 250, 252, 0.85) 80%,
                    #f8fafc 100%
                  );
                  pointer-events: none;
                  z-index: 5;
                }

                /* Stylized map background */
                .map-background {
                  position: absolute;
                  inset: 0;
                  opacity: 0.6;
                }

                .map-background svg {
                  width: 100%;
                  height: 100%;
                }

                /* River/road path */
                .river-path {
                  fill: none;
                  stroke: #6b7db3;
                  stroke-width: 3;
                  stroke-linecap: round;
                  stroke-linejoin: round;
                }

                /* Map blocks/buildings */
                .map-block {
                  fill: #c4cde6;
                  opacity: 0.7;
                }

                /* Metric cards */
                .metric-card {
                  position: absolute;
                  background: white;
                  border-radius: 12px;
                  padding: 12px 20px 12px 16px;
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08),
                    0 2px 8px rgba(0, 0, 0, 0.04);
                  cursor: pointer;
                  transition: transform 0.3s ease, box-shadow 0.3s ease;
                  z-index: 10;
                }

                .metric-card:hover {
                  transform: translateY(-4px) scale(1.02);
                  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12),
                    0 4px 12px rgba(0, 0, 0, 0.06);
                }

                .metric-card::after {
                  content: "";
                  position: absolute;
                  bottom: -8px;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 0;
                  height: 0;
                  border-left: 8px solid transparent;
                  border-right: 8px solid transparent;
                  border-top: 8px solid white;
                }

                /* Pin dot */
                .pin-dot {
                  position: absolute;
                  bottom: -16px;
                  left: 50%;
                  transform: translateX(-50%);
                  width: 8px;
                  height: 8px;
                  background: #e74c3c;
                  border-radius: 50%;
                  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.3);
                }

                /* Circular progress */
                .score-circle {
                  position: relative;
                  width: 44px;
                  height: 44px;
                  flex-shrink: 0;
                }

                .score-circle svg {
                  width: 100%;
                  height: 100%;
                  transform: rotate(-90deg);
                }

                .score-circle .bg-circle {
                  fill: none;
                  stroke: #e8eef7;
                  stroke-width: 4;
                }

                .score-circle .progress-circle {
                  fill: none;
                  stroke-width: 4;
                  stroke-linecap: round;
                  transition: stroke-dashoffset 1s ease-out;
                }

                .score-value {
                  position: absolute;
                  inset: 0;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 14px;
                  font-weight: 600;
                  color: #1a2b4a;
                }

                .score-label {
                  font-size: 16px;
                  font-weight: 500;
                  color: #1a2b4a;
                }

                /* Card positions */
                .card-1 {
                  top: 60px;
                  right: 140px;
                  animation: float 4s ease-in-out infinite;
                }

                .card-2 {
                  top: 200px;
                  right: 60px;
                  animation: float 4s ease-in-out infinite 0.5s;
                }

                .card-3 {
                  bottom: 120px;
                  left: 80px;
                  animation: float 4s ease-in-out infinite 1s;
                }

                .card-4 {
                  top: 140px;
                  left: 60px;
                  animation: float 4s ease-in-out infinite 1.5s;
                }

                @keyframes float {
                  0%,
                  100% {
                    transform: translateY(0);
                  }
                  50% {
                    transform: translateY(-8px);
                  }
                }

                .metric-card:hover {
                  animation-play-state: paused;
                }

                /* Color variants */
                .score-excellent .progress-circle {
                  stroke: #2563eb;
                }
                .score-great .progress-circle {
                  stroke: #3b82f6;
                }
                .score-good .progress-circle {
                  stroke: #60a5fa;
                }
                .score-okay .progress-circle {
                  stroke: #f472b6;
                }

                /* Expanded card state */
                .metric-card.expanded {
                  padding: 16px 20px;
                  flex-direction: column;
                  align-items: flex-start;
                  gap: 8px;
                }

                .metric-card.expanded .card-header {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                }

                .metric-card.expanded .card-details {
                  display: flex;
                  flex-direction: column;
                  gap: 6px;
                  width: 100%;
                  padding-top: 8px;
                  border-top: 1px solid #e8eef7;
                  margin-top: 4px;
                }

                .detail-row {
                  display: flex;
                  justify-content: space-between;
                  font-size: 12px;
                }

                .detail-label {
                  color: #64748b;
                }

                .detail-value {
                  font-weight: 500;
                  color: #1a2b4a;
                }

                .detail-value.positive {
                  color: #10b981;
                }
                .detail-value.negative {
                  color: #ef4444;
                }

                /* Suburb name badge */
                .suburb-badge {
                  position: absolute;
                  top: -8px;
                  left: 12px;
                  background: #2563eb;
                  color: white;
                  font-size: 10px;
                  font-weight: 600;
                  padding: 2px 8px;
                  border-radius: 4px;
                  text-transform: uppercase;
                  letter-spacing: 0.5px;
                }

                /* Interactive hint */
                .interaction-hint {
                  position: absolute;
                  bottom: 20px;
                  right: 20px;
                  background: rgba(255, 255, 255, 0.9);
                  padding: 8px 14px;
                  border-radius: 20px;
                  font-size: 12px;
                  color: #64748b;
                  display: flex;
                  align-items: center;
                  gap: 6px;
                  opacity: 0.8;
                  transition: opacity 0.3s ease;
                  z-index: 10;
                }

                .interaction-hint:hover {
                  opacity: 1;
                }

                .cursor-icon {
                  width: 14px;
                  height: 14px;
                }

/* --------------------------------------------
   Data Dashboard
   -------------------------------------------- */
.data-dashboard {
                  background: var(--white);
                  max-width: 1200px;
                  margin: 0 auto;
                }

                .dashboard-content {
                  display: grid;
                  grid-template-columns: 1fr auto 1fr;
                  gap: 40px;
                  align-items: center;
                }

                /* Left Panel - Data Inputs */
                .data-inputs {
                  display: flex;
                  flex-direction: column;
                  gap: 12px;
                }

                .data-input-item {
                  display: flex;
                  align-items: center;
                  gap: 12px;
                  color: var(--text-dark);
                  font-size: 14px;
                  font-weight: 500;
                  padding: 10px 16px;
                  background: #f8fafc;
                  border-radius: 8px;
                  border: 1px solid var(--border);
                  position: relative;
                  transition: all 0.3s ease;
                }

                .data-input-item:hover {
                  border-color: var(--light-bg-primary);
                  background: #f0f7ff;
                }

                .data-input-item i {
                  color: var(--primary);
                  font-size: 18px;
                  width: 24px;
                  text-align: center;
                }

                /* Center - Australia Globe */
                .center-section {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  gap: 24px;
                }

                .total-counter {
                  text-align: center;
                }

                .total-label {
                  color: var(--text-muted);
                  font-size: 12px;
                  font-weight: 600;
                  letter-spacing: 2px;
                  text-transform: uppercase;
                  margin-bottom: 10px;
                }

                .total-number {
                  display: flex;
                  gap: 4px;
                  justify-content: center;
                }

                .digit-box {
                  background: linear-gradient(
                    180deg,
                    var(--primary) 0%,
                    #3563c7 100%
                  );
                  border-radius: 6px;
                  padding: 8px 12px;
                  min-width: 36px;
                  text-align: center;
                  box-shadow: 0 2px 8px rgba(68, 117, 230, 0.3);
                }

                .digit-box span {
                  font-family: "Courier New", monospace;
                  font-size: 28px;
                  font-weight: 700;
                  color: white;
                }

                .digit-box.comma {
                  background: transparent;
                  box-shadow: none;
                  padding: 8px 2px;
                  min-width: auto;
                }

                .digit-box.comma span {
                  color: var(--text-dark);
                }

                .today-count {
                  color: var(--success-green);
                  font-size: 16px;
                  font-weight: 600;
                  margin-top: 10px;
                }

                .today-count i {
                  margin-right: 4px;
                }

                .australia-globe {
                  width: 320px;
                  height: 320px;
                  position: relative;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .globe-glow {
                  position: absolute;
                  width: 280px;
                  height: 280px;
                  border-radius: 50%;
                  background: radial-gradient(
                    circle,
                    rgba(56, 152, 236, 0.15) 0%,
                    rgba(56, 152, 236, 0.05) 50%,
                    transparent 70%
                  );
                  animation: pulse-glow 3s ease-in-out infinite;
                }

                @keyframes pulse-glow {
                  0%,
                  100% {
                    transform: scale(1);
                    opacity: 0.8;
                  }
                  50% {
                    transform: scale(1.1);
                    opacity: 1;
                  }
                }

                .globe-ring {
                  position: absolute;
                  width: 300px;
                  height: 300px;
                  border: 2px solid rgba(68, 117, 230, 0.2);
                  border-radius: 50%;
                  animation: rotate-ring 20s linear infinite;
                }

                .globe-ring::before {
                  content: "";
                  position: absolute;
                  top: -5px;
                  left: 50%;
                  width: 10px;
                  height: 10px;
                  background: var(--primary);
                  border-radius: 50%;
                  box-shadow: 0 0 10px var(--primary);
                }

                @keyframes rotate-ring {
                  from {
                    transform: rotate(0deg);
                  }
                  to {
                    transform: rotate(360deg);
                  }
                }

                .australia-map {
                  position: relative;
                  z-index: 2;
                }

                .australia-map svg {
                  width: 200px;
                  height: 180px;
                  filter: drop-shadow(0 4px 12px rgba(68, 117, 230, 0.3));
                }

                /* Data streams animation */
                .data-streams {
                  position: absolute;
                  width: 100%;
                  height: 100%;
                  pointer-events: none;
                }

                .stream {
                  position: absolute;
                  width: 60px;
                  height: 2px;
                  background: linear-gradient(
                    90deg,
                    transparent,
                    var(--accent),
                    transparent
                  );
                  animation: stream-flow 2s ease-in-out infinite;
                }

                .stream:nth-child(1) {
                  top: 30%;
                  left: -10%;
                  animation-delay: 0s;
                }
                .stream:nth-child(2) {
                  top: 50%;
                  left: -10%;
                  animation-delay: 0.3s;
                }
                .stream:nth-child(3) {
                  top: 70%;
                  left: -10%;
                  animation-delay: 0.6s;
                }
                .stream:nth-child(4) {
                  top: 30%;
                  left: 50%;
                  animation-delay: 0.2s;
                  transform: rotate(180deg);
                }
                .stream:nth-child(5) {
                  top: 50%;
                  left: 50%;
                  animation-delay: 0.5s;
                  transform: rotate(180deg);
                }
                .stream:nth-child(6) {
                  top: 70%;
                  left: 50%;
                  animation-delay: 0.8s;
                  transform: rotate(180deg);
                }

                @keyframes stream-flow {
                  0% {
                    transform: translateX(0) scaleX(0.5);
                    opacity: 0;
                  }
                  50% {
                    transform: translateX(50px) scaleX(1);
                    opacity: 1;
                  }
                  100% {
                    transform: translateX(100px) scaleX(0.5);
                    opacity: 0;
                  }
                }

                /* Right Panel - Stats */
                .stats-panel {
                  display: flex;
                  flex-direction: column;
                  gap: 20px;
                }

                .last-update {
                  display: flex;
                  align-items: center;
                  gap: 16px;
                  padding: 16px 20px;
                  background: #f8fafc;
                  border-radius: 12px;
                  border: 1px solid var(--border);
                }

                .update-icon {
                  width: 50px;
                  height: 50px;
                  background: linear-gradient(
                    135deg,
                    var(--accent),
                    var(--primary)
                  );
                  border-radius: 50%;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  position: relative;
                }

                .update-icon i {
                  color: white;
                  font-size: 22px;
                }

                .update-icon::before {
                  content: "";
                  position: absolute;
                  width: 60px;
                  height: 60px;
                  border: 2px solid rgba(68, 117, 230, 0.3);
                  border-radius: 50%;
                  animation: pulse-ring 2s ease-out infinite;
                }

                @keyframes pulse-ring {
                  0% {
                    transform: scale(1);
                    opacity: 1;
                  }
                  100% {
                    transform: scale(1.3);
                    opacity: 0;
                  }
                }

                .update-info {
                  color: var(--text-dark);
                }

                .update-label {
                  font-size: 11px;
                  color: var(--text-muted);
                  font-weight: 600;
                  letter-spacing: 1px;
                  text-transform: uppercase;
                }

                .update-time {
                  font-size: 18px;
                  font-weight: 700;
                  color: var(--text-dark);
                }

                .update-date {
                  font-size: 13px;
                  color: var(--primary);
                }

                .stat-cards {
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  gap: 12px;
                }

                .stat-card {
                  background: #f8fafc;
                  border-radius: 12px;
                  padding: 20px;
                  border: 1px solid var(--border);
                  text-align: center;
                  transition: all 0.3s ease;
                }

                .stat-card:hover {
                  border-color: var(--accent);
                  box-shadow: 0 4px 12px rgba(68, 117, 230, 0.1);
                  transform: translateY(-2px);
                }

                .stat-card-title {
                  font-size: 11px;
                  color: var(--text-muted);
                  font-weight: 600;
                  letter-spacing: 1px;
                  text-transform: uppercase;
                  margin-bottom: 12px;
                }

                .stat-card-icon {
                  width: 44px;
                  height: 44px;
                  margin: 0 auto 12px;
                  background: linear-gradient(
                    135deg,
                    rgba(68, 117, 230, 0.1),
                    rgba(56, 152, 236, 0.1)
                  );
                  border-radius: 10px;
                  display: flex;
                  align-items: center;
                  justify-content: center;
                }

                .stat-card-icon i {
                  font-size: 20px;
                  color: var(--primary);
                }

                .stat-card-value {
                  font-size: 26px;
                  font-weight: 700;
                  color: var(--text-dark);
                  margin-bottom: 4px;
                }

                .stat-card-desc {
                  font-size: 11px;
                  color: var(--text-muted);
                  line-height: 1.4;
                }

                /* Source Link */
                .source-link {
                  text-align: center;
                  margin-top: 32px;
                  padding-top: 24px;
                  border-top: 1px solid var(--border);
                }

                .source-link a {
                  display: inline-flex;
                  align-items: center;
                  gap: 8px;
                  color: var(--primary);
                  text-decoration: none;
                  font-size: 13px;
                  font-weight: 500;
                  padding: 10px 20px;
                  background: rgba(68, 117, 230, 0.08);
                  border-radius: 8px;
                  border: 1px solid rgba(68, 117, 230, 0.2);
                  transition: all 0.3s ease;
                }

                .source-link a:hover {
                  background: rgba(68, 117, 230, 0.15);
                  border-color: var(--primary);
                  transform: translateY(-2px);
                }

                .source-link a i {
                  font-size: 14px;
                }

                /* Responsive */
                @media (max-width: 1100px) {
                  .dashboard-content {
                    grid-template-columns: 1fr;
                    gap: 30px;
                  }

                  .data-inputs {
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: center;
                  }

                  .data-input-item::after {
                    display: none;
                  }

                  .australia-globe {
                    width: 280px;
                    height: 280px;
                  }

                  .globe-glow {
                    width: 240px;
                    height: 240px;
                  }

                  .globe-ring {
                    width: 260px;
                    height: 260px;
                  }

                  .stats-panel {
                    max-width: 400px;
                    margin: 0 auto;
                    width: 100%;
                  }
                }

                @media (max-width: 600px) {
                  .stat-cards {
                    grid-template-columns: 1fr;
                  }

                  .digit-box {
                    padding: 6px 8px;
                    min-width: 28px;
                  }

                  .digit-box span {
                    font-size: 22px;
                  }

                  .australia-globe {
                    width: 240px;
                    height: 240px;
                  }

                  .australia-map svg {
                    width: 160px;
                    height: 140px;
                  }

                  .data-inputs {
                    gap: 8px;
                  }

                  .data-input-item {
                    font-size: 12px;
                    padding: 8px 12px;
                  }
                }

/* --------------------------------------------
   Threshold Component
   -------------------------------------------- */
.threshold-component {
                display: flex;
                align-items: center;
                gap: 24px;
                width: 100%;
                max-width: 600px;
              }

              .threshold-bar-wrapper {
                flex: 1;
                position: relative;
              }

              /* Impact tooltip */
              .impact-tooltip {
                position: absolute;
                bottom: calc(100% + 16px);
                left: 50%;
                transform: translateX(-50%);
                background: white;
                padding: 8px 14px;
                border-radius: 8px;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                font-size: 13px;
                font-weight: 600;
                white-space: nowrap;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.2s ease, bottom 0.2s ease;
                z-index: 10;
              }

              .impact-tooltip.raised {
                bottom: calc(100% + 36px);
              }

              .impact-tooltip::after {
                content: "";
                position: absolute;
                top: 100%;
                left: 50%;
                transform: translateX(-50%);
                border: 6px solid transparent;
                border-top-color: white;
              }

              .impact-tooltip.negative {
                color: #dc2626;
              }
              .impact-tooltip.moderate {
                color: #ca8a04;
              }
              .impact-tooltip.positive {
                color: #16a34a;
              }

              .impact-tooltip.visible {
                opacity: 1;
              }

              /* Property icon */
              .property-icon {
                position: absolute;
                bottom: calc(100% + 8px);
                left: 0;
                font-size: 16px;
                color: #374151;
                z-index: 2;
              }

              /* Threshold bar */
              .threshold-bar {
                display: flex;
                height: 12px;
                border-radius: 6px;
                overflow: hidden;
                position: relative;
              }

              .bar-segment {
                height: 100%;
                cursor: pointer;
                transition: all 0.2s ease;
                position: relative;
              }

              .bar-segment.red {
                background: #ef4444;
                flex: 0 0 12.5%;
              }

              .bar-segment.yellow {
                background: #eab308;
                flex: 0 0 37.5%;
              }

              .bar-segment.green {
                background: #22c55e;
                flex: 1;
              }

              /* Public housing icon - above bar in the yellow range area */
              .public-housing-icon {
                position: absolute;
                bottom: calc(100% + 8px);
                left: 30%; /* Positioned in the middle of yellow range */
                font-size: 16px;
                color: #374151;
                z-index: 2;
              }

              /* Highlighted state */
              .bar-segment.highlighted {
                opacity: 1;
                transform: scaleY(1.4);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
              }

              .bar-segment:not(.highlighted) {
                opacity: 0.7;
              }

              /* Hover states */
              .bar-segment:hover {
                opacity: 1;
                transform: scaleY(1.4);
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
              }

              /* Labels container */
              .threshold-labels {
                position: relative;
                height: 24px;
                margin-top: 8px;
              }

              .threshold-label {
                position: absolute;
                font-size: 11px;
                font-weight: 500;
                color: #9ca3af;
              }

              .threshold-label.label-0m {
                left: 0;
              }

              .threshold-label.label-250m {
                left: 12.5%;
                transform: translateX(-50%);
              }

              .threshold-label.label-1km {
                left: 50%;
                transform: translateX(-50%);
              }

              /* Info card */
              .info-card {
                background: white;
                border-radius: 12px;
                padding: 20px;
                min-width: 180px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
              }

              .info-card-title {
                font-size: 13px;
                font-weight: 600;
                color: #374151;
                margin-bottom: 2px;
              }

              .info-card-subtitle {
                font-size: 11px;
                color: #9ca3af;
                margin-bottom: 12px;
              }

              .info-card-impact {
                font-size: 28px;
                font-weight: 700;
                margin-bottom: 12px;
                transition: color 0.2s ease;
              }

              .info-card-impact.negative {
                color: #dc2626;
              }
              .info-card-impact.moderate {
                color: #ca8a04;
              }
              .info-card-impact.positive {
                color: #16a34a;
              }

              .info-card-details {
                display: flex;
                flex-direction: column;
                gap: 6px;
                padding-top: 12px;
                border-top: 1px solid #f3f4f6;
              }

              .info-detail {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 11px;
              }

              .info-detail-label {
                color: #9ca3af;
              }

              .info-detail-value {
                color: #374151;
                font-weight: 500;
              }

              .distance-badge {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 2px 8px;
                border-radius: 4px;
                font-size: 10px;
                font-weight: 600;
                text-transform: uppercase;
                letter-spacing: 0.3px;
              }

              .distance-badge.negative {
                background: #fef2f2;
                color: #dc2626;
              }
              .distance-badge.moderate {
                background: #fefce8;
                color: #ca8a04;
              }
              .distance-badge.positive {
                background: #f0fdf4;
                color: #16a34a;
              }

              /* Responsive */
              @media (max-width: 540px) {
                .threshold-component {
                  flex-direction: column;
                  gap: 20px;
                }

                .info-card {
                  width: 100%;
                }

                /* Hide threshold bar on mobile - doesn't fit well */
                .threshold-bar-wrapper {
                  display: none;
                }
              }

/* --------------------------------------------
   Suburb Insights
   -------------------------------------------- */
:root {
              --primary: #4475e6;
            }
            .suburb-insights-wrapper {
              font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                sans-serif;
            }
            .suburb-insights-filters-title {
              font-size: 16px;
              font-weight: 600;
              color: #333;
              margin: 0 0 16px 0;
            }
            .suburb-insights-filters {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 24px;
              margin-bottom: 32px;
            }
            .suburb-insights-filter {
              min-width: 0;
            }
            .suburb-insights-filter-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;
            }
            .suburb-insights-filter-label {
              font-size: 13px;
              font-weight: 600;
              color: #444;
            }
            .suburb-insights-filter-value {
              font-size: 12px;
              color: #666;
              font-weight: 500;
            }
            .suburb-insights-range-slider {
              position: relative;
              height: 24px;
              display: flex;
              align-items: center;
            }
            .suburb-insights-range-segments {
              position: absolute;
              width: 100%;
              height: 8px;
              border-radius: 4px;
              display: flex;
              overflow: hidden;
              cursor: pointer;
            }
            .suburb-insights-range-segment {
              height: 100%;
              transition: opacity 0.2s;
            }
            .suburb-insights-range-segment:hover {
              opacity: 0.8;
            }
            .suburb-insights-range-overlay {
              position: absolute;
              height: 8px;
              background: rgba(255, 255, 255, 0.7);
              pointer-events: none;
              top: 50%;
              transform: translateY(-50%);
            }
            .suburb-insights-range-overlay-left {
              left: 0;
              border-radius: 4px 0 0 4px;
            }
            .suburb-insights-range-overlay-right {
              right: 0;
              border-radius: 0 4px 4px 0;
            }
            .suburb-insights-range-input {
              position: absolute;
              width: 100%;
              height: 8px;
              background: transparent;
              cursor: pointer;
              -webkit-appearance: none;
              appearance: none;
              pointer-events: none;
              margin: 0;
              padding: 0;
            }
            .suburb-insights-range-input.active {
              z-index: 5;
            }
            .suburb-insights-range-input::-webkit-slider-runnable-track {
              height: 8px;
              background: transparent;
            }
            .suburb-insights-range-input::-webkit-slider-thumb {
              -webkit-appearance: none;
              appearance: none;
              pointer-events: auto;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: #fff;
              cursor: pointer;
              border: 2px solid var(--primary);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
              margin-top: -6px;
              position: relative;
            }
            .suburb-insights-range-input::-moz-range-track {
              height: 8px;
              background: transparent;
              border: none;
            }
            .suburb-insights-range-input::-moz-range-thumb {
              pointer-events: auto;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: #fff;
              cursor: pointer;
              border: 2px solid var(--primary);
              box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
              position: relative;
            }
            .suburb-insights-range-input:hover::-webkit-slider-thumb {
              transform: scale(1.1);
            }
            .suburb-insights-range-input:hover::-moz-range-thumb {
              transform: scale(1.1);
            }
            .suburb-insights-container {
              display: flex;
              gap: 60px;
            }
            .suburb-insights-grid-wrapper {
              flex: 1;
              min-width: 0;
            }
            .suburb-insights-grid {
              display: grid;
              background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
              padding: 24px;
              border-radius: 12px;
            }
            .suburb-insights-item {
              padding: 6px 10px;
              font-size: 14px;
              font-weight: 500;
              cursor: pointer;
              transition: all 0.15s ease;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              border-radius: 6px;
              display: flex;
              align-items: center;
            }
            .suburb-insights-item.positive {
              color: #059669;
            }
            .suburb-insights-item.negative {
              color: #dc2626;
            }
            .suburb-insights-item.filtered-out {
              color: #c5c5c5 !important;
              cursor: default;
            }
            .suburb-insights-item.selected {
              font-weight: 600;
            }
            .suburb-insights-item.selected.positive {
              background: #dcfce7;
            }
            .suburb-insights-item.selected.negative {
              background: #fee2e2;
            }
            .suburb-insights-item.selected.filtered-out {
              background: #f0f0f0 !important;
            }
            .suburb-insights-more {
              margin-top: 16px;
              font-size: 13px;
              color: #666;
            }
            .suburb-insights-more a {
              color: var(--primary);
              text-decoration: none;
              font-weight: 500;
            }
            .suburb-insights-more a:hover {
              text-decoration: underline;
            }
            .suburb-insights-panel {
              width: 360px;
              flex-shrink: 0;
            }
            .suburb-insights-name {
              font-size: 32px;
              font-weight: 700;
              margin-bottom: 8px;
              color: #1a1a1a;
            }
            .suburb-insights-growth {
              font-size: 24px;
              font-weight: 600;
              margin-bottom: 32px;
            }
            .suburb-insights-growth.positive {
              color: #059669;
            }
            .suburb-insights-growth.negative {
              color: #dc2626;
            }
            .suburb-insights-growth-label {
              font-size: 14px;
              font-weight: 400;
              color: #666;
              margin-left: 8px;
            }
            .suburb-insights-stats {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 24px;
              margin-bottom: 32px;
            }
            .suburb-insights-stat {
              display: flex;
              flex-direction: column;
            }
            .suburb-insights-stat-header {
              display: flex;
              align-items: center;
              gap: 6px;
              margin-bottom: 4px;
            }
            .suburb-insights-stat-label {
              font-size: 13px;
              color: #666;
            }
            .suburb-insights-stat-value {
              font-size: 20px;
              font-weight: 600;
              color: #1a1a1a;
            }
            .suburb-insights-thumb {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 4px;
              width: 20px;
              height: 20px;
              border-radius: 50%;
              cursor: pointer;
              flex-shrink: 0;
            }
            .suburb-insights-thumb svg {
              width: 100%;
              height: 100%;
            }
            .suburb-insights-thumb.positive {
              background-color: #28a745;
            }
            .suburb-insights-thumb.neutral {
              background-color: #ffc107;
            }
            .suburb-insights-thumb.negative {
              background-color: #dc3545;
            }
            .suburb-insights-analysis {
              font-size: 14px;
              line-height: 1.6;
              color: #444;
              margin-bottom: 32px;
            }
            .suburb-insights-cta {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              background: var(--primary);
              color: #fff;
              padding: 14px 28px;
              border-radius: 8px;
              font-size: 15px;
              font-weight: 600;
              text-decoration: none;
              cursor: pointer;
              border: none;
              transition: all 0.2s ease;
            }
            .suburb-insights-cta:hover {
              opacity: 0.9;
              transform: translateY(-1px);
            }
            .suburb-insights-cta svg {
              width: 18px;
              height: 18px;
            }
            @media (max-width: 1100px) {
              .suburb-insights-filters {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px 32px;
              }
            }
            @media (max-width: 900px) {
              .suburb-insights-container {
                flex-direction: column;
                gap: 40px;
              }
              .suburb-insights-panel {
                width: 100%;
              }
              .suburb-insights-grid {
                padding: 16px;
              }
              .suburb-insights-item {
                font-size: 13px;
                padding: 6px 8px;
              }
              .suburb-insights-name {
                font-size: 26px;
              }
              .suburb-insights-growth {
                font-size: 20px;
              }
              .suburb-insights-stat-value {
                font-size: 18px;
              }
              .suburb-insights-filters {
                grid-template-columns: 1fr 1fr;
                gap: 16px 24px;
              }
            }
            @media (max-width: 500px) {
              .suburb-insights-filters {
                grid-template-columns: 1fr;
              }
            }

/* --------------------------------------------
   Font Awesome Icons
   -------------------------------------------- */
.street-insights-container {
              --si-primary: #4475e6;
              --si-accent: #3898ec;
              --si-success: #10b981;
              --si-success-light: #d1fae5;
              --si-warning: #f59e0b;
              --si-text-dark: #1e293b;
              --si-text-medium: #475569;
              --si-text-light: #64748b;
              --si-border: #e2e8f0;
              --si-bg-subtle: #f8fafc;
              color: var(--si-text-dark);
              line-height: 1.4;
            }

            .street-insights-container .si-insights-layout {
              display: grid;
              grid-template-columns: 280px 1fr;
              gap: 20px;
            }

            @media (max-width: 900px) {
              .street-insights-container .si-insights-layout {
                grid-template-columns: 1fr;
              }
            }

            .street-insights-container .si-suburb-metrics-panel {
              background: var(--si-bg-subtle);
              border-radius: 16px;
              padding: 20px;
              border: 1px solid var(--si-border);
            }

            .street-insights-container .si-suburb-header {
              margin-bottom: 16px;
              padding-bottom: 12px;
              border-bottom: 1px solid var(--si-border);
            }

            .street-insights-container .si-suburb-name {
              font-size: 22px;
              font-weight: 700;
              color: var(--si-text-dark);
              margin: 0 0 2px 0;
            }

            .street-insights-container .si-suburb-label {
              font-size: 14px;
              color: var(--si-text-light);
            }

            .street-insights-container .si-metrics-grid {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 10px;
              margin-bottom: 16px;
            }

            .street-insights-container .si-metric-card {
              background: white;
              border-radius: 10px;
              padding: 12px;
              border: 1px solid var(--si-border);
            }

            .street-insights-container .si-metric-value {
              font-size: 20px;
              font-weight: 700;
              color: var(--si-text-dark);
              margin-bottom: 2px;
            }

            .street-insights-container .si-metric-label {
              font-size: 12px;
              color: var(--si-text-light);
              line-height: 1.2;
            }

            .street-insights-container .si-metric-change {
              display: inline-flex;
              align-items: center;
              gap: 3px;
              font-size: 12px;
              font-weight: 600;
              margin-top: 6px;
              padding: 2px 6px;
              border-radius: 4px;
            }

            .street-insights-container .si-metric-change.si-positive {
              background: var(--si-success-light);
              color: #059669;
            }

            .street-insights-container .si-scores-section {
              display: flex;
              flex-direction: column;
              gap: 8px;
            }

            .street-insights-container .si-score-item {
              display: flex;
              align-items: center;
              gap: 10px;
            }

            .street-insights-container .si-score-label {
              font-size: 13px;
              color: var(--si-text-medium);
              font-weight: 500;
              width: 80px;
              flex-shrink: 0;
            }

            .street-insights-container .si-score-bar {
              flex: 1;
              height: 6px;
              background: var(--si-border);
              border-radius: 3px;
              overflow: hidden;
            }

            .street-insights-container .si-score-fill {
              height: 100%;
              background: linear-gradient(
                90deg,
                var(--si-primary),
                var(--si-accent)
              );
              border-radius: 3px;
            }

            .street-insights-container .si-score-value {
              font-family: "Space Grotesk", sans-serif;
              font-size: 14px;
              font-weight: 700;
              color: var(--si-text-dark);
              width: 24px;
              text-align: right;
            }

            .street-insights-container .si-streets-risks-panel {
              display: flex;
              flex-direction: column;
              gap: 16px;
            }

            .street-insights-container .si-panel-section {
              background: white;
              border-radius: 16px;
              padding: 16px;
              border: 1px solid var(--si-border);
            }

            .street-insights-container .si-section-header-row {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-bottom: 12px;
            }

            .street-insights-container .si-section-icon {
              width: 36px;
              height: 36px;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
              color: white;
            }

            .street-insights-container .si-section-icon.si-success {
              background: linear-gradient(135deg, var(--si-success), #059669);
            }

            .street-insights-container .si-section-icon.si-warning {
              background: linear-gradient(135deg, var(--si-warning), #d97706);
            }

            .street-insights-container .si-section-title {
              font-size: 16px;
              font-weight: 700;
              color: var(--si-text-dark);
              margin: 0;
            }

            .street-insights-container .si-section-desc {
              font-size: 13px;
              color: var(--si-text-light);
              margin: 1px 0 0 0;
            }

            .street-insights-container .si-street-list {
              display: flex;
              flex-direction: column;
              gap: 6px;
            }

            .street-insights-container .si-street-row {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 10px 12px;
              background: var(--si-bg-subtle);
              border-radius: 8px;
              transition: all 0.2s ease;
            }

            .street-insights-container .si-street-row:hover {
              background: #f1f5f9;
            }

            .street-insights-container .si-street-info {
              display: flex;
              flex-direction: column;
              gap: 1px;
            }

            .street-insights-container .si-street-name {
              font-weight: 600;
              font-size: 14px;
              color: var(--si-text-dark);
            }

            .street-insights-container .si-street-meta {
              font-size: 12px;
              color: var(--si-text-light);
            }

            .street-insights-container .si-street-growth {
              font-size: 15px;
              font-weight: 700;
              color: var(--si-success);
              background: var(--si-success-light);
              padding: 4px 10px;
              border-radius: 6px;
            }

            .street-insights-container .si-view-all-link {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 5px;
              margin-top: 10px;
              padding: 8px;
              color: var(--si-primary);
              font-weight: 600;
              font-size: 13px;
              text-decoration: none;
              border-radius: 6px;
              transition: all 0.2s ease;
            }

            .street-insights-container .si-view-all-link:hover {
              background: rgba(68, 117, 230, 0.08);
            }

            .street-insights-container .si-risk-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              gap: 8px;
            }

            .street-insights-container .si-risk-item {
              display: flex;
              align-items: center;
              gap: 10px;
              padding: 10px 12px;
              background: var(--si-bg-subtle);
              border-radius: 8px;
              border: 1px solid transparent;
            }

            .street-insights-container .si-risk-item.si-active {
              border-color: var(--si-border);
            }

            .street-insights-container .si-risk-item.si-inactive {
              opacity: 0.7;
            }

            .street-insights-container .si-risk-icon {
              width: 32px;
              height: 32px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
            }

            .street-insights-container .si-risk-icon svg {
              width: 14px;
              height: 14px;
            }

            .street-insights-container .si-risk-content {
              flex: 1;
              min-width: 0;
            }

            .street-insights-container .si-risk-name {
              display: block;
              font-weight: 600;
              font-size: 13px;
              color: var(--si-text-dark);
            }

            .street-insights-container .si-risk-detail {
              display: block;
              font-size: 11px;
              color: var(--si-text-light);
              margin-top: 1px;
            }

            .street-insights-container .si-risk-detail.si-inactive-text {
              color: var(--si-success);
            }

            .street-insights-container .si-risk-status {
              flex-shrink: 0;
            }

            .street-insights-container .si-active-indicator {
              width: 6px;
              height: 6px;
              border-radius: 50%;
              background: var(--si-warning);
            }

            .street-insights-container .si-inactive-indicator {
              width: 18px;
              height: 18px;
              border-radius: 50%;
              background: var(--si-success-light);
              color: var(--si-success);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 9px;
            }

/* --------------------------------------------
   Suburb Insights Search
   -------------------------------------------- */
:root {
              --primary: #2563eb;
              --positive: #059669;
              --positive-bg: #dcfce7;
              --negative: #dc2626;
              --negative-bg: #fee2e2;
            }

            .property-finder {
              display: flex;
              gap: 32px;
              align-items: flex-start;
            }

            /* Left Panel - Property Details Card */
            .property-details-panel {
              width: 320px;
              flex-shrink: 0;
              background: white;
              border-radius: 12px;
              padding: 28px;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
            }

            .property-details-main {
              margin-bottom: 24px;
            }

            .property-details-address {
              font-size: 20px;
              font-weight: 700;
              color: #1a1a1a;
              margin-bottom: 4px;
              line-height: 1.3;
            }

            .property-details-suburb {
              font-size: 14px;
              color: #666;
              margin-bottom: 16px;
            }

            .property-details-price {
              font-size: 32px;
              font-weight: 700;
              color: #1a1a1a;
              margin-bottom: 4px;
            }

            .property-details-price-label {
              font-size: 13px;
              color: #666;
            }

            .property-details-stats {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 20px;
            }

            .property-details-stat {
              display: flex;
              flex-direction: column;
            }

            .property-details-stat-label {
              font-size: 12px;
              color: #666;
              margin-bottom: 4px;
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }

            .property-details-stat-value {
              font-size: 18px;
              font-weight: 600;
              color: #1a1a1a;
            }

            .property-details-stat.price-stat {
              display: none;
            }

            /* Right Panel - Property Cards Grid */
            .property-cards-container {
              flex: 1;
              display: flex;
              flex-direction: column;
            }

            .property-cards-grid {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              gap: 20px;
            }

            .property-cards-cta {
              margin-top: 16px;
              text-align: right;
              font-size: 14px;
              color: #666;
            }

            .property-cards-cta a {
              color: var(--primary);
              text-decoration: none;
              font-weight: 500;
            }

            .property-cards-cta a:hover {
              text-decoration: underline;
            }

            .property-card {
              background: white;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
              cursor: pointer;
              transition: all 0.2s ease;
              border: 2px solid transparent;
            }

            .property-card:hover {
              box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
              transform: translateY(-4px);
            }

            .property-card.active {
              border-color: var(--primary);
              box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
            }

            .property-card.opportunity.active {
              border-color: var(--positive);
              box-shadow: 0 8px 24px rgba(5, 150, 105, 0.2);
            }

            .property-card.overvalued.active {
              border-color: var(--negative);
              box-shadow: 0 8px 24px rgba(220, 38, 38, 0.2);
            }

            .property-card-image {
              position: relative;
              height: 160px;
              overflow: hidden;
            }

            .property-card-image img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s ease;
            }

            .property-card:hover .property-card-image img {
              transform: scale(1.05);
            }

            .property-card-tag {
              position: absolute;
              top: 12px;
              left: 12px;
              padding: 6px 12px;
              border-radius: 6px;
              font-size: 12px;
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }

            .property-card-tag.opportunity {
              background: var(--positive-bg);
              color: var(--positive);
            }

            .property-card-tag.overvalued {
              background: var(--negative-bg);
              color: var(--negative);
            }

            .property-card-info {
              padding: 16px;
            }

            .property-card-address {
              font-size: 14px;
              font-weight: 600;
              color: #1a1a1a;
              margin-bottom: 4px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .property-card-suburb {
              font-size: 13px;
              color: #666;
            }

            /* Hide 4th card on large screens */
            .property-card:nth-child(4) {
              display: none;
            }

            /* Responsive */
            @media (max-width: 990px) {
              .property-card:nth-child(4) {
                display: block;
              }

              .property-cards-grid {
                grid-template-columns: repeat(2, 1fr);
              }
            }

            @media (max-width: 880px) {
              .property-finder {
                flex-direction: column;
              }

              .property-details-panel {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 16px;
              }

              .property-details-main {
                margin-bottom: 0;
              }

              .property-details-price,
              .property-details-price-label {
                display: none;
              }

              .property-details-address {
                margin-bottom: 4px;
              }

              .property-details-suburb {
                margin-bottom: 0;
              }

              .property-details-stats {
                display: flex;
                flex-wrap: wrap;
                gap: 16px 24px;
              }

              .property-details-stat {
                text-align: left;
              }

              .property-details-stat.price-stat {
                display: flex;
              }

              .property-cards-container {
                width: 100%;
              }

              .property-cards-grid {
                grid-template-columns: repeat(3, 1fr);
                width: 100%;
              }

              .property-card:nth-child(4) {
                display: none;
              }

              .property-card-image {
                height: auto;
                aspect-ratio: 4 / 3;
              }
            }

            @media (max-width: 660px) {
              .property-cards-grid {
                grid-template-columns: repeat(2, 1fr);
              }

              .property-card:nth-child(n + 3) {
                display: none;
              }

              .property-details-stats {
                gap: 12px 20px;
              }

              .property-details-stat-value {
                font-size: 16px;
              }

              .property-details-stat-label {
                font-size: 10px;
              }
            }

            @media (max-width: 480px) {
              .property-finder {
                gap: 20px;
              }

              .property-details-panel {
                padding: 20px;
                gap: 12px;
              }

              .property-details-address {
                font-size: 16px;
              }

              .property-details-stats {
                gap: 10px 16px;
              }

              .property-details-stat-value {
                font-size: 14px;
              }

              .property-details-stat-label {
                font-size: 9px;
              }

              .property-cards-cta {
                font-size: 13px;
              }
            }

/* --------------------------------------------
   Property Details
   -------------------------------------------- */
.property-report-container {
              --pr-primary: #4475e6;
              --pr-accent: #3898ec;
              --pr-success: #10b981;
              --pr-success-light: #d1fae5;
              --pr-warning: #f59e0b;
              --pr-warning-light: #fef3c7;
              --pr-purple: #8b5cf6;
              --pr-purple-light: #ede9fe;
              --pr-text-dark: #1e293b;
              --pr-text-medium: #475569;
              --pr-text-light: #64748b;
              --pr-border: #e2e8f0;
              --pr-bg-subtle: #f8fafc;
              color: var(--pr-text-dark);
              line-height: 1.4;
            }

            .property-report-container .pr-layout {
              display: grid;
              grid-template-columns: 300px 1fr;
              gap: 20px;
            }

            @media (max-width: 900px) {
              .property-report-container .pr-layout {
                grid-template-columns: 1fr;
              }
            }

            /* Left Panel - Property Details */
            .property-report-container .pr-property-panel {
              background: white;
              border-radius: 16px;
              border: 1px solid var(--pr-border);
              overflow: hidden;
            }

            .property-report-container .pr-property-image {
              position: relative;
              height: 180px;
              overflow: hidden;
            }

            .property-report-container .pr-property-image img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .property-report-container .pr-status-badge {
              position: absolute;
              top: 12px;
              left: 12px;
              background: var(--pr-primary);
              color: white;
              padding: 6px 12px;
              border-radius: 6px;
              font-size: 12px;
              font-weight: 600;
            }

            .property-report-container .pr-property-info {
              padding: 16px;
            }

            .property-report-container .pr-property-header {
              margin-bottom: 12px;
            }

            .property-report-container .pr-property-address {
              font-size: 18px;
              font-weight: 700;
              color: var(--pr-text-dark);
              margin: 0 0 2px 0;
            }

            .property-report-container .pr-property-suburb {
              font-size: 13px;
              color: var(--pr-text-light);
            }

            .property-report-container .pr-features-row {
              display: flex;
              gap: 16px;
              padding: 12px 0;
              border-top: 1px solid var(--pr-border);
              border-bottom: 1px solid var(--pr-border);
              margin-bottom: 12px;
            }

            .property-report-container .pr-feature {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 14px;
              color: var(--pr-text-medium);
            }

            .property-report-container .pr-feature i {
              color: var(--pr-text-light);
              font-size: 14px;
            }

            .property-report-container .pr-feature span {
              font-weight: 600;
            }

            .property-report-container .pr-price-section {
              margin-bottom: 16px;
            }

            .property-report-container .pr-asking-price {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 4px;
            }

            .property-report-container .pr-price-label {
              font-size: 13px;
              color: var(--pr-text-light);
            }

            .property-report-container .pr-price-value {
              font-size: 22px;
              font-weight: 700;
              color: var(--pr-text-dark);
            }

            .property-report-container .pr-list-date {
              font-size: 12px;
              color: var(--pr-text-light);
              text-align: right;
            }

            .property-report-container .pr-estimate-section {
              background: var(--pr-bg-subtle);
              border-radius: 12px;
              padding: 14px;
            }

            .property-report-container .pr-estimate-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 12px;
            }

            .property-report-container .pr-estimate-title {
              font-size: 12px;
              font-weight: 600;
              color: var(--pr-primary);
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }

            .property-report-container .pr-estimate-value {
              font-size: 18px;
              font-weight: 700;
              color: var(--pr-success);
            }

            .property-report-container .pr-range-bar {
              position: relative;
              height: 8px;
              background: linear-gradient(90deg, #fecaca, #fef3c7, #d1fae5);
              border-radius: 4px;
              margin-bottom: 8px;
            }

            .property-report-container .pr-range-marker {
              position: absolute;
              top: -4px;
              width: 16px;
              height: 16px;
              background: var(--pr-success);
              border: 3px solid white;
              border-radius: 50%;
              transform: translateX(-50%);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
            }

            .property-report-container .pr-range-labels {
              display: flex;
              justify-content: space-between;
            }

            .property-report-container .pr-range-low,
            .property-report-container .pr-range-mid,
            .property-report-container .pr-range-high {
              display: flex;
              flex-direction: column;
              align-items: center;
            }

            .property-report-container .pr-range-mid {
              align-items: center;
            }

            .property-report-container .pr-range-high {
              align-items: flex-end;
            }

            .property-report-container .pr-range-low {
              align-items: flex-start;
            }

            .property-report-container .pr-range-label {
              font-size: 10px;
              color: var(--pr-text-light);
              text-transform: uppercase;
            }

            .property-report-container .pr-range-value {
              font-size: 12px;
              font-weight: 600;
              color: var(--pr-text-medium);
            }

            /* Right Panel - Map */
            .property-report-container .pr-map-panel {
              background: white;
              border-radius: 16px;
              border: 1px solid var(--pr-border);
              padding: 16px;
            }

            .property-report-container .pr-section-header-row {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-bottom: 16px;
            }

            .property-report-container .pr-section-icon {
              width: 36px;
              height: 36px;
              border-radius: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 16px;
              color: white;
              background: linear-gradient(
                135deg,
                var(--pr-primary),
                var(--pr-accent)
              );
            }

            .property-report-container .pr-section-title {
              font-size: 16px;
              font-weight: 700;
              color: var(--pr-text-dark);
              margin: 0;
            }

            .property-report-container .pr-section-desc {
              font-size: 13px;
              color: var(--pr-text-light);
              margin: 1px 0 0 0;
            }

            .property-report-container .pr-map-container {
              margin-bottom: 16px;
            }

            .property-report-container .pr-map-visual {
              position: relative;
              height: 200px;
              background-image: url("https://tile.openstreetmap.org/15/29823/19345.png"),
                url("https://tile.openstreetmap.org/15/29824/19345.png");
              background-size: 256px 256px;
              background-position: center;
              background-repeat: repeat;
              border-radius: 12px;
              overflow: hidden;
              margin-bottom: 12px;
            }

            .property-report-container .pr-map-visual::before {
              content: "";
              position: absolute;
              inset: 0;
              background: rgba(255, 255, 255, 0.15);
              pointer-events: none;
            }

            .property-report-container .pr-street-grid {
              position: relative;
              width: 100%;
              height: 100%;
            }

            .property-report-container .pr-street-lines {
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
            }

            .property-report-container .pr-map-property {
              position: absolute;
              transform: translate(-50%, -50%);
              z-index: 2;
            }

            .property-report-container .pr-map-marker {
              width: 32px;
              height: 32px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 12px;
              color: white;
              cursor: pointer;
              transition: transform 0.2s ease;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            }

            .property-report-container .pr-map-marker:hover {
              transform: scale(1.15);
            }

            .property-report-container .pr-marker-main {
              width: 40px;
              height: 40px;
              background: var(--pr-primary);
              font-size: 16px;
              box-shadow: 0 0 0 4px rgba(68, 117, 230, 0.2);
            }

            .property-report-container .pr-marker-sold {
              background: var(--pr-success);
            }

            .property-report-container .pr-marker-rented {
              background: var(--pr-purple);
            }

            .property-report-container .pr-marker-forsale {
              background: var(--pr-warning);
            }

            .property-report-container .pr-map-tooltip {
              position: absolute;
              bottom: 100%;
              left: 50%;
              transform: translateX(-50%);
              background: white;
              padding: 8px 12px;
              border-radius: 8px;
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
              white-space: nowrap;
              opacity: 0;
              visibility: hidden;
              transition: all 0.2s ease;
              margin-bottom: 8px;
            }

            .property-report-container .pr-map-property:hover .pr-map-tooltip {
              opacity: 1;
              visibility: visible;
            }

            .property-report-container .pr-map-tooltip strong {
              display: block;
              font-size: 13px;
              color: var(--pr-text-dark);
            }

            .property-report-container .pr-map-tooltip span {
              font-size: 11px;
              color: var(--pr-text-light);
            }

            .property-report-container .pr-map-legend {
              display: flex;
              justify-content: center;
              gap: 16px;
              flex-wrap: wrap;
            }

            .property-report-container .pr-legend-item {
              display: flex;
              align-items: center;
              gap: 6px;
              font-size: 12px;
              color: var(--pr-text-medium);
            }

            .property-report-container .pr-legend-dot {
              width: 10px;
              height: 10px;
              border-radius: 50%;
            }

            .property-report-container .pr-dot-main {
              background: var(--pr-primary);
            }

            .property-report-container .pr-dot-sold {
              background: var(--pr-success);
            }

            .property-report-container .pr-dot-rented {
              background: var(--pr-purple);
            }

            .property-report-container .pr-dot-forsale {
              background: var(--pr-warning);
            }

            /* Risk Section */
            .property-report-container .pr-risks-section {
              margin-top: 16px;
              padding-top: 16px;
              border-top: 1px solid var(--pr-border);
            }

            .property-report-container .pr-risks-header {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-bottom: 12px;
            }

            .property-report-container .pr-risks-icon {
              width: 32px;
              height: 32px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              color: white;
              background: linear-gradient(135deg, var(--pr-warning), #d97706);
            }

            .property-report-container .pr-risks-title {
              font-size: 15px;
              font-weight: 700;
              color: var(--pr-text-dark);
              margin: 0;
            }

            .property-report-container .pr-risks-desc {
              font-size: 12px;
              color: var(--pr-text-light);
              margin: 1px 0 0 0;
            }

            .property-report-container .pr-risk-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
              gap: 8px;
            }

            .property-report-container .pr-risk-item {
              display: flex;
              align-items: center;
              gap: 10px;
              padding: 10px 12px;
              background: var(--pr-bg-subtle);
              border-radius: 8px;
              border: 1px solid transparent;
            }

            .property-report-container .pr-risk-item.pr-risk-active {
              border-color: var(--pr-border);
            }

            .property-report-container .pr-risk-item.pr-risk-inactive {
              opacity: 0.7;
            }

            .property-report-container .pr-risk-icon-box {
              width: 32px;
              height: 32px;
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              flex-shrink: 0;
            }

            .property-report-container .pr-risk-icon-box svg {
              width: 14px;
              height: 14px;
            }

            .property-report-container .pr-risk-content {
              flex: 1;
              min-width: 0;
            }

            .property-report-container .pr-risk-name {
              display: block;
              font-weight: 600;
              font-size: 13px;
              color: var(--pr-text-dark);
            }

            .property-report-container .pr-risk-detail {
              display: block;
              font-size: 11px;
              color: var(--pr-text-light);
              margin-top: 1px;
            }

            .property-report-container .pr-risk-detail.pr-risk-clear {
              color: var(--pr-success);
            }

            .property-report-container .pr-risk-indicator {
              flex-shrink: 0;
            }

            .property-report-container .pr-indicator-active {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: var(--pr-warning);
            }

            .property-report-container .pr-indicator-clear {
              width: 20px;
              height: 20px;
              border-radius: 50%;
              background: var(--pr-success-light);
              color: var(--pr-success);
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 10px;
            }

/* --------------------------------------------
   Accordion / FAQ
   -------------------------------------------- */
.question[data-accordion] .question-content {
              display: none;
              overflow: hidden;
            }
            .question[data-accordion].active .question-content {
              display: block;
            }
            .question[data-accordion] .div-block-14 {
              cursor: pointer;
            }
            .question[data-accordion] .accordion-icon {
              font-size: 20px;
              font-weight: 300;
              transition: transform 0.2s ease;
              user-select: none;
            }

/* ============================================
   About / Data Geeks Section
   ============================================ */
.about-section {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 80px 0;
}

.about-container {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-header {
  text-align: center;
  margin-bottom: 60px;
}

.about-tagline {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4475e6;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 16px;
}

.about-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 20px;
  line-height: 1.2;
}

.about-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 60px;
}

/* Founder Card */
.about-founder {
  background: #ffffff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.founder-image {
  width: 140px;
  height: 140px;
  margin-bottom: 20px;
}

.founder-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.founder-name {
  font-size: 1.375rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 4px;
}

.founder-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #4475e6;
  margin: 0 0 16px;
}

.founder-bio {
  font-size: 0.9375rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Stats Grid */
.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-stat {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  gap: 16px;
}

.about-stat-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-stat-icon i {
  font-size: 1.25rem;
  color: #4475e6;
}

.about-stat-content {
  display: flex;
  flex-direction: column;
}

.about-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a1a2e;
}

.about-stat-label {
  font-size: 0.8125rem;
  color: #64748b;
}

/* Philosophy Cards */
.about-philosophy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.philosophy-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  text-align: center;
  transition: all 0.3s ease;
}

.philosophy-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.philosophy-card i {
  font-size: 2rem;
  color: #4475e6;
  margin-bottom: 16px;
}

.philosophy-card h4 {
  font-size: 1.0625rem;
  font-weight: 600;
  color: #1a1a2e;
  margin: 0 0 12px;
}

.philosophy-card p {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .about-section {
    padding: 60px 0;
  }

  .about-title {
    font-size: 1.75rem;
  }

  .about-subtitle {
    font-size: 1rem;
  }

  .about-content {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .about-stats {
    grid-template-columns: 1fr 1fr;
  }

  .about-philosophy {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .founder-image {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 480px) {
  .about-stats {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Universal Search Autocomplete Styles
   ============================================ */

.universal-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  z-index: 1000;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  max-height: 320px;
  overflow-y: auto;
  display: none;
}

.universal-search-results.open {
  display: block;
}

.search-results-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.search-result-item:hover,
.search-result-item.selected {
  background-color: #f1f5f9;
}

.search-result-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: #64748b;
}

/* Icon colors by type */
.search-result-item[data-type="addr"] .search-result-icon {
  background: #dcfce7;
  color: #16a34a;
}

.search-result-item[data-type="sal"] .search-result-icon {
  background: #dbeafe;
  color: #2563eb;
}

.search-result-item[data-type="sa4"] .search-result-icon,
.search-result-item[data-type="sal_sa4"] .search-result-icon,
.search-result-item[data-type="state"] .search-result-icon {
  background: #f3e8ff;
  color: #9333ea;
}

.search-result-item[data-type="sua"] .search-result-icon {
  background: #fef3c7;
  color: #d97706;
}

.search-result-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.search-result-name {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  text-align: left;
}

.search-result-name mark {
  background: #fef08a;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

.search-result-type {
  font-size: 12px;
  color: #64748b;
  margin-top: 1px;
  text-align: left;
}

/* Scrollbar */
.universal-search-results::-webkit-scrollbar {
  width: 6px;
}

.universal-search-results::-webkit-scrollbar-track {
  background: transparent;
}

.universal-search-results::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

/* No results */
.search-no-results {
  padding: 20px 14px;
  text-align: center;
  color: #64748b;
  font-size: 14px;
}

/* Wrapper for positioning */
.universal-search-wrapper {
  position: relative;
  width: 100%;
  z-index: 100;
}

/* Ensure dropdown appears above other content */
.universal-search-results {
  z-index: 1000;
}

/* Homepage specific */
.search-section {
  overflow: visible !important;
}

.search-section .universal-search-wrapper {
  width: 100%;
}

.search-section .search-bar {
  margin-bottom: 0;
}

/* Fix contenteditable cursor behavior */
.search-bar[contenteditable="true"] {
  text-align: left;
  caret-color: var(--feature, #333);
  min-height: 1.5em;
}

.search-bar[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: var(--feature, #666);
  pointer-events: none;
}

/* Ensure cursor is visible when focused and empty */
.search-bar[contenteditable="true"]:focus {
  outline: none;
}

.search-section .universal-search-results {
  width: 100%;
  left: 0;
  right: 0;
}

/* Product pages - match search box width */
.pr-search-box,
.sr-search-box {
  position: relative;
  overflow: visible !important;
}

.pr-search-box .universal-search-results,
.sr-search-box .universal-search-results {
  left: 0;
  right: 0;
  width: 100%;
}