/* shadcn-inspired design tokens (light) */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

html.auth-locked #app { display: none; }
#auth-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: hsl(0 0% 100%);
}
.auth-gate-card {
  width: 100%;
  max-width: 300px;
  text-align: center;
}
.auth-gate-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground);
  margin: 0 0 16px;
}
.auth-gate-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-gate-form input {
  width: 100%;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: hsl(0 0% 100%);
  text-align: center;
}
.auth-gate-form input:focus {
  outline: none;
  border-color: var(--foreground);
}
.auth-gate-btn {
  width: 100%;
  margin-top: 4px;
  position: relative;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.auth-gate-btn-loading {
  cursor: wait;
  opacity: 0.85;
}
.auth-btn-spin {
  width: 18px;
  height: 18px;
  border: 2px solid hsl(0 0% 100% / 0.35);
  border-top-color: hsl(0 0% 100%);
  border-radius: 50%;
  animation: auth-btn-spin 0.7s linear infinite;
}
@keyframes auth-btn-spin {
  to { transform: rotate(360deg); }
}
.auth-gate-error {
  font-size: 12px;
  color: var(--destructive);
  margin: 0;
}

:root {
  --background: hsl(0 0% 100%);
  --foreground: hsl(240 10% 3.9%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(240 10% 3.9%);
  --popover: hsl(0 0% 100%);
  --primary: hsl(240 5.9% 10%);
  --primary-foreground: hsl(0 0% 98%);
  --secondary: hsl(240 4.8% 95.9%);
  --secondary-foreground: hsl(240 5.9% 10%);
  --muted: hsl(240 4.8% 95.9%);
  --muted-foreground: hsl(240 3.8% 46.1%);
  --accent: hsl(240 4.8% 95.9%);
  --accent-foreground: hsl(240 5.9% 10%);
  --destructive: hsl(0 84.2% 60.2%);
  --border: hsl(240 5.9% 90%);
  --input: hsl(240 5.9% 90%);
  --ring: hsl(240 5.9% 10%);
  --radius: 0.5rem;
  --sidebar-width: 380px;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --score-high: hsl(142 76% 36%);
  --score-mid: hsl(48 96% 53%);
  --score-low: hsl(0 72% 51%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

#app {
  display: grid;
  grid-template-columns: 1fr var(--sidebar-width);
  height: 100%;
  overflow: hidden;
}

#app.explorer-app {
  grid-template-columns: 1fr;
}

#app.explorer-app.table-open .map-data-panel {
  display: none;
}

.explorer-page .tool-nav.compact {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: hsl(0 0% 100% / 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  font-size: 12px;
}
.explorer-page .tool-nav.compact a,
.explorer-page .tool-nav.compact span {
  padding: 6px 10px;
  border-radius: calc(var(--radius) - 4px);
  text-decoration: none;
  color: var(--muted-foreground);
}
.explorer-page .tool-nav.compact span.active {
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 500;
}
.explorer-page .tool-nav.compact a:hover { color: var(--foreground); background: var(--accent); }

.barri-select,
.metric-select {
  min-width: 200px;
  max-width: 280px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: hsl(0 0% 100% / 0.94);
  color: var(--foreground);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.hud-selectors {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.poi-menu {
  background: hsl(0 0% 100% / 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 10px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  font-size: 12px;
}
.poi-menu summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--foreground);
  list-style: none;
}
.poi-menu summary::-webkit-details-marker { display: none; }
.poi-menu[open] summary { margin-bottom: 8px; }
.poi-menu .poi-item { margin-bottom: 6px; }

.map-data-panel {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 1001;
  max-height: min(52vh, 520px);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.map-data-panel.hidden { display: none; }
.map-data-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
  flex-shrink: 0;
}
.map-data-panel-header h2 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.map-data-panel-body {
  overflow-y: auto;
  padding: 16px;
  flex: 1;
  min-height: 0;
}

.location-report { font-size: 13px; line-height: 1.55; }
.location-report .area-report {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 16px;
}
.location-report .area-detail-head { margin-bottom: 14px; }
.location-report .report-lead {
  color: var(--muted-foreground);
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.6;
}
.location-report .report-lead a { color: var(--foreground); }
.location-report .report-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.location-report .stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
.location-report .stat-card {
  padding: 10px 12px;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.location-report .stat-card .val {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.location-report .stat-card .lbl {
  font-size: 10px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.location-report .report-section {
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.location-report .report-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.location-report .report-section h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}
.location-report .data-kv {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 1fr;
  gap: 6px 16px;
  font-size: 12px;
}
.location-report .data-kv dt { color: var(--muted-foreground); }
.location-report .data-kv dd { font-weight: 500; font-variant-numeric: tabular-nums; margin: 0; }
.location-report .shop-list,
.location-report .street-list {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
}
.location-report .shop-list li { margin-bottom: 4px; }
.location-report .factor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px 20px;
}
.location-report .factor-grid .factor-bar {
  margin-bottom: 0;
  min-width: 0;
}
@media (max-width: 640px) {
  .location-report .factor-grid { grid-template-columns: 1fr; }
  .barri-select, .metric-select { min-width: 160px; max-width: 100%; }
}

#main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

/* Map */
#map-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  background: hsl(220 14% 96%);
  overflow: hidden;
}
#map { height: 100%; width: 100%; z-index: 0; }

/* HUD */
.map-hud {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}
.map-hud-left { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.map-hud > * { pointer-events: auto; }

.map-layer-tabs {
  display: flex;
  gap: 3px;
  background: hsl(0 0% 100% / 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  flex-wrap: nowrap;
}
.explorer-page .map-layer-tabs {
  max-width: min(100%, 520px);
}
.map-layer-btn {
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  padding: 5px 8px;
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.map-layer-btn:hover { color: var(--foreground); background: var(--accent); }
.map-layer-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
}

.lai-weights { font-size: 12px; }
.lai-weight-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.lai-weight-row:last-child { border-bottom: none; }
.lai-weight-pct { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.big-score .lai-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.investor-box {
  margin-top: 14px;
  padding: 12px;
  background: var(--muted);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.5;
}
.investor-box h4 { font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.investor-box ul { margin: 6px 0 8px 18px; }
.investor-box .badge { margin-right: 6px; }

.map-hint {
  display: inline-block;
  padding: 6px 12px;
  background: hsl(0 0% 100% / 0.88);
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 12px;
  color: var(--muted-foreground);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}

.map-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px;
  box-shadow: var(--shadow-md);
}
.map-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  background: transparent;
  color: var(--foreground);
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s;
}
.map-ctrl-btn:hover { background: var(--accent); }
.map-ctrl-btn:active { background: var(--muted); }
.map-ctrl-btn.active { background: var(--primary); color: var(--primary-foreground); }
.map-ctrl-btn.active:hover { background: var(--primary); opacity: 0.92; }

.section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.section-title-row .section-title { margin-bottom: 0; }

.weight-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.preset-btn {
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.15s;
}
.preset-btn:hover { color: var(--foreground); background: var(--accent); }
.preset-btn.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}

/* Legend */
.map-legend {
  position: absolute;
  bottom: 20px;
  left: 16px;
  z-index: 1000;
  background: hsl(0 0% 100% / 0.94);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  font-size: 12px;
  min-width: 200px;
  backdrop-filter: blur(8px);
}
.map-legend-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border);
}
.map-legend-title { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; }
.map-legend-toggle {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  background: var(--background);
  color: var(--muted-foreground);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.map-legend-toggle:hover { background: var(--accent); color: var(--foreground); }
.map-legend-body { padding: 10px 12px 12px; }
.legend-bar {
  height: 8px;
  width: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, hsl(0 65% 50%), hsl(48 90% 68%), hsl(142 55% 38%));
  margin-bottom: 6px;
  border: 1px solid hsl(0 0% 0% / 0.06);
}
.legend-labels {
  display: flex;
  justify-content: space-between;
  color: var(--muted-foreground);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.legend-scale {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 10px;
  color: var(--muted-foreground);
  margin-bottom: 4px;
}
.legend-scale span { display: inline-flex; align-items: center; gap: 4px; }
.legend-scale i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  font-style: normal;
}
.legend-pois { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); }
.legend-poi { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; }
.legend-poi .dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--card);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Leaflet overrides */
.leaflet-container {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: hsl(220 14% 96%);
}
.leaflet-control-attribution {
  background: hsl(0 0% 100% / 0.8) !important;
  border-radius: var(--radius) 0 0 0;
  padding: 4px 8px !important;
  font-size: 10px !important;
  color: var(--muted-foreground) !important;
  backdrop-filter: blur(4px);
}
.leaflet-control-attribution a { color: var(--muted-foreground) !important; }

.map-tooltip {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  color: var(--foreground) !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
}
.map-tooltip::before { border-top-color: var(--border) !important; }
.leaflet-tooltip-left.map-tooltip::before { border-left-color: var(--border) !important; }
.leaflet-tooltip-right.map-tooltip::before { border-right-color: var(--border) !important; }
.map-tooltip .tt-name { font-weight: 500; }
.map-tooltip .tt-score {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--score-high);
  padding-left: 8px;
  border-left: 1px solid var(--border);
}

.analysis-marker-icon { background: transparent !important; border: none !important; }
.analysis-marker-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.analysis-marker-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111827;
  border: 3px solid var(--card);
  box-shadow: 0 0 0 2px #111827, 0 2px 8px hsl(0 0% 0% / 0.35);
}
.analysis-marker-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  color: #111827;
  background: var(--card);
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  white-space: nowrap;
}

.analysis-location-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  line-height: 1.45;
}
.analysis-location-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.analysis-location-dot {
  flex-shrink: 0;
  margin-top: 2px;
  width: 12px;
  height: 12px;
  border-width: 2px;
}
.analysis-location-name {
  font-weight: 600;
  color: var(--foreground);
}
.analysis-location-coords {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}
.analysis-location-note {
  font-size: 12px;
  color: var(--muted-foreground);
}

.poi-marker-icon { background: transparent !important; border: none !important; }
.poi-marker-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--card);
  box-shadow: 0 1px 4px hsl(0 0% 0% / 0.25);
}

.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: hsl(0 0% 100% / 0.85) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
  font-weight: 600 !important;
  font-size: 11px !important;
}

.leaflet-popup-content-wrapper {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md) !important;
  border: 1px solid var(--border);
}
.leaflet-popup-content { font-size: 12px; line-height: 1.45; margin: 10px 12px !important; }
.leaflet-popup-tip { box-shadow: none !important; }

/* Sidebar */
#sidebar {
  border-left: 1px solid var(--border);
  background: var(--background);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#sidebar header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.tool-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tool-nav a, .tool-nav span {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 9999px;
  text-decoration: none;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  transition: all 0.15s;
}
.tool-nav a:hover { color: var(--foreground); background: var(--accent); }
.tool-nav a.active, .tool-nav span.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--primary);
}
#sidebar header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-bottom: 4px;
}
#sidebar header .subtitle { color: var(--muted-foreground); font-size: 13px; margin-bottom: 12px; }
#sidebar header a {
  color: var(--muted-foreground);
  font-size: 12px;
  text-decoration: none;
  transition: color 0.15s;
}
#sidebar header a:hover { color: var(--foreground); }

#panel {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 32px;
}

.section { margin-bottom: 24px; }
.section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}

/* Cards */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.card-header { padding: 16px 16px 0; }
.card-content { padding: 16px; }
.card-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--muted);
  border-radius: 0 0 var(--radius) var(--radius);
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}
.badge-default { background: var(--secondary); color: var(--secondary-foreground); }
.badge-outline { border-color: var(--border); color: var(--foreground); }
.badge-success { background: hsl(142 76% 36% / 0.12); color: hsl(142 76% 30%); border-color: hsl(142 76% 36% / 0.2); }
.badge-muted { background: var(--muted); color: var(--muted-foreground); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  font-weight: 500;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; pointer-events: none; }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: hsl(240 5.9% 20%); }
.btn-secondary {
  background: var(--secondary);
  color: var(--secondary-foreground);
  border-color: var(--border);
}
.btn-secondary:hover { background: hsl(240 4.8% 90%); }
.btn-outline {
  background: var(--background);
  border-color: var(--input);
  color: var(--foreground);
}
.btn-outline:hover { background: var(--accent); }
.btn-ghost {
  background: transparent;
  color: var(--foreground);
}
.btn-ghost:hover { background: var(--accent); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }
.btn-icon { width: 36px; padding: 0; }

/* Tabs */
.tabs-list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--muted);
  border-radius: var(--radius);
  padding: 4px;
  width: 100%;
}
.tabs-trigger {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius) - 4px);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.tabs-trigger:hover { color: var(--foreground); }
.tabs-trigger.active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

.data-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  background: var(--card);
}
.data-tabs .tabs-trigger {
  flex: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 12px 16px;
}
.data-tabs .tabs-trigger.active {
  color: var(--foreground);
  border-bottom-color: var(--primary);
  box-shadow: none;
  background: transparent;
}

/* Inputs */
.input, .select {
  display: flex;
  height: 36px;
  width: 100%;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid var(--input);
  background: var(--background);
  padding: 0 12px;
  font-size: 13px;
  color: var(--foreground);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus, .select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 2px hsl(240 5.9% 10% / 0.08);
}
.input::placeholder { color: var(--muted-foreground); }

/* Weights */
.weight-row {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
}
.weight-row label { color: var(--foreground); }
.weight-row input[type=range] {
  width: 100%;
  accent-color: var(--primary);
  margin-top: 4px;
}
.weight-row span {
  text-align: right;
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* Rank list */
.rank-list { list-style: none; }
.rank-list li {
  display: grid;
  grid-template-columns: 32px 1fr 48px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  margin: 0 -10px;
  border-radius: calc(var(--radius) - 2px);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s;
}
.rank-list li:hover { background: var(--accent); }
.rank-list li.active { background: var(--secondary); font-weight: 600; }
.rank-list .score {
  text-align: right;
  color: var(--foreground);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Detail */
.area-detail { font-size: 13px; line-height: 1.55; }
.area-detail-head { margin-bottom: 12px; }
.area-detail-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.3;
}
.area-detail-meta {
  color: var(--muted-foreground);
  font-size: 12px;
  margin: 4px 0 0;
}
.area-detail .big-score { margin-top: 0; }
.area-detail .area-report {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 16px;
}
.area-detail .metric-grid {
  border-top: none;
  padding-top: 0;
  margin-top: 4px;
}
.area-detail .investor-box {
  background: transparent;
  padding: 0;
}
.detail-meta { color: var(--muted-foreground); font-size: 13px; margin-top: 2px; }
.big-score {
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--score-high);
  margin: 12px 0 16px;
  font-variant-numeric: tabular-nums;
}

.factor-bar { margin-bottom: 10px; }
.factor-bar .label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--muted-foreground);
}
.factor-bar .label span:first-child {
  min-width: 0;
  flex: 1;
}
.factor-bar .label span:last-child {
  color: var(--foreground);
  font-weight: 500;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.factor-bar .track {
  height: 6px;
  background: var(--muted);
  border-radius: 9999px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px hsl(0 0% 0% / 0.06);
}
.factor-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, hsl(205 55% 42%), hsl(152 48% 36%));
  border-radius: 9999px;
  transition: width 0.35s ease, background 0.35s ease;
  box-shadow: inset 0 1px 0 hsl(0 0% 100% / 0.25);
}

.metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 12px;
  font-size: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.metric-grid dt { color: var(--muted-foreground); }
.metric-grid dd { font-weight: 500; font-variant-numeric: tabular-nums; }

.area-report {
  margin: 0 0 16px;
  padding: 14px;
  background: var(--muted);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.area-report h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin-bottom: 10px;
}
.area-score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.area-score-chip {
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
}
.area-score-chip .val {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}
.area-score-chip .lbl {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 2px;
}
.area-score-chip .sub {
  font-size: 11px;
  color: var(--foreground);
  margin-top: 4px;
}
.location-report .stat-card {
  background: linear-gradient(160deg, hsl(0 0% 100%) 0%, hsl(220 18% 96%) 100%);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.04);
}
.location-report .stat-card .val {
  background: linear-gradient(135deg, currentColor 0%, currentColor 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.area-score-chip {
  background: linear-gradient(160deg, hsl(0 0% 100%) 0%, hsl(220 16% 97%) 100%);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.04);
}
.rent-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
  font-size: 11px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.rent-stats dt { color: var(--muted-foreground); }
.rent-stats dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.dev-stats {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 8px;
  line-height: 1.5;
}
.dev-stats strong { color: var(--foreground); font-weight: 600; }

/* Local profile */
.local-profile {
  margin-top: 16px;
  padding: 14px;
  background: var(--muted);
  border-radius: var(--radius);
  font-size: 12px;
  line-height: 1.55;
}
.local-profile h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}
.local-profile ul { margin: 6px 0 10px 18px; }
.local-profile .tag { color: var(--muted-foreground); font-size: 11px; }
.local-profile p + p { margin-top: 6px; }

/* Research */
.research-box { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.research-box h4 { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.research-actions { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
.cost-hint { font-size: 12px; color: var(--muted-foreground); line-height: 1.45; }
.research-content { font-size: 12px; line-height: 1.55; color: var(--foreground); }
.research-content ul { margin: 6px 0 8px 18px; }
.research-content .sources a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.research-meta { font-size: 11px; color: var(--muted-foreground); margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.research-error { color: var(--destructive); font-size: 12px; }
.empty { color: var(--muted-foreground); font-size: 13px; line-height: 1.5; }

/* POI controls */
.poi-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.poi-item input[type=checkbox] { margin-top: 3px; accent-color: var(--primary); }
.poi-item .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.poi-dots-dual {
  display: inline-flex;
  gap: 3px;
  flex-shrink: 0;
  margin-top: 4px;
}
.poi-dots-dual .dot { margin-top: 0; }
.legend-poi .poi-dots-dual { margin-top: 0; }
.poi-item .count { color: var(--muted-foreground); font-size: 12px; }

/* Bottom table panel */
#table-view {
  display: none;
  flex-direction: column;
  flex-shrink: 0;
  max-height: 42vh;
  min-height: 200px;
  overflow: hidden;
  background: var(--card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px hsl(0 0% 0% / 0.06);
  z-index: 1100;
}
#app.table-open #table-view { display: flex; }

#table-view .table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  padding-right: 12px;
}
#table-view .data-tabs {
  flex: 1;
  border-bottom: none;
  padding: 0;
}
#table-view .data-tabs .tabs-trigger {
  padding: 8px 12px;
  font-size: 12px;
}
#table-view .table-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
#table-view .table-footer {
  padding: 8px 16px;
}

.table-wrap { flex: 1; overflow: auto; }
table.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data-table th, table.data-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data-table th {
  position: sticky;
  top: 0;
  background: var(--muted);
  z-index: 1;
  cursor: pointer;
  user-select: none;
  font-weight: 600;
  font-size: 12px;
  color: var(--muted-foreground);
}
table.data-table th:hover { color: var(--foreground); }
table.data-table th .sort { font-size: 10px; margin-left: 4px; opacity: 0.6; }
table.data-table tbody tr { cursor: pointer; transition: background 0.1s; }
table.data-table tbody tr:hover { background: var(--accent); }
table.data-table tbody tr.active { background: var(--secondary); }
table.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

.table-footer {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted-foreground);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--card);
}
.pager { display: flex; align-items: center; gap: 8px; }

/* Methodology */
.method { font-size: 12px; color: var(--muted-foreground); line-height: 1.55; }
.method h2 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.method ul { margin-top: 8px; padding-left: 18px; }

/* Separator */
.separator { height: 1px; background: var(--border); margin: 16px 0; }

/* Scrollbar */
#panel::-webkit-scrollbar, .table-wrap::-webkit-scrollbar { width: 6px; height: 6px; }
#panel::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 9999px;
}

/* Let map clicks reach neighbourhood polygons through cluster gaps */
.leaflet-marker-pane { pointer-events: none; }
.leaflet-marker-pane * { pointer-events: auto; }