:root {
  --bg: #0F172A;
  --card: #1E293B;
  --primary: #3B82F6;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --accent-gold: #D9B44A;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --card-border: rgba(255,255,255,0.08);
  --card-hover-bg: rgba(255,255,255,0.06);
  --sidebar-bg: rgba(15,23,42,0.75);
  --glass-border: rgba(255,255,255,0.08);
  --badge-bg: rgba(30,41,59,0.3);
  --tab-bg: rgba(30,41,59,0.3);
  --header-bg: rgba(15,23,42,0.85);
  --scrollbar-thumb: rgba(255,255,255,0.1);
  --shadow: 0 8px 30px rgba(0,0,0,0.08);
  --gradient-title: linear-gradient(135deg, #D9B44A 0%, #3B82F6 100%);
  --gradient-accent: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(217,180,74,0.03));
  --insight-bg: linear-gradient(135deg, rgba(59,130,246,0.06), rgba(217,180,74,0.03));
  --chart-bg: rgba(30,41,59,0.2);
  --input-bg: rgba(30,41,59,0.5);
  --skeleton-base: rgba(30,41,59,0.3);
  --skeleton-shine: rgba(30,41,59,0.5);
  --skeleton-bg: #0F172A;
  --badge-text: #94A3B8;
  --info-row-bg: rgba(255,255,255,0.03);
  --mobile-controls-bg: rgba(15,23,42,0.88);
  --drag-handle-bg: rgba(255,255,255,0.25);
  --scrollbar-thumb-hover: rgba(255,255,255,0.25);
  --loading-overlay: rgba(11,15,25,0.96);
  --insight-bullet: #a78bfa;
  --ranking-bg: rgba(30,41,59,0.3);
  --ranking-border: rgba(255,255,255,0.03);
  --ranking-hover-bg: rgba(59,130,246,0.08);
  --stat-subtitle: #64748B;
  --accent: #a78bfa;
  --zero-fill: rgba(30,41,59,0.2);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}
body.light {
  --bg: #F8FAFC;
  --card: #FFFFFF;
  --primary: #2563EB;
  --success: #16A34A;
  --warning: #D97706;
  --danger: #DC2626;
  --accent-gold: #D9B44A;
  --text-primary: #0F172A;
  --text-secondary: #64748B;
  --card-border: rgba(0,0,0,0.06);
  --card-hover-bg: rgba(0,0,0,0.03);
  --sidebar-bg: rgba(255,255,255,0.75);
  --glass-border: rgba(0,0,0,0.06);
  --badge-bg: rgba(0,0,0,0.03);
  --tab-bg: rgba(0,0,0,0.04);
  --header-bg: rgba(255,255,255,0.85);
  --scrollbar-thumb: rgba(0,0,0,0.1);
  --shadow: 0 8px 30px rgba(0,0,0,0.04);
  --gradient-title: linear-gradient(135deg, #D9B44A 0%, #2563EB 100%);
  --gradient-accent: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(217,180,74,0.04));
  --insight-bg: linear-gradient(135deg, rgba(37,99,235,0.04), rgba(217,180,74,0.02));
  --chart-bg: rgba(0,0,0,0.02);
  --input-bg: rgba(0,0,0,0.03);
  --skeleton-base: rgba(0,0,0,0.06);
  --skeleton-shine: rgba(0,0,0,0.1);
  --skeleton-bg: #F8FAFC;
  --badge-text: #64748B;
  --info-row-bg: rgba(0,0,0,0.02);
  --mobile-controls-bg: rgba(255,255,255,0.88);
  --drag-handle-bg: rgba(0,0,0,0.2);
  --scrollbar-thumb-hover: rgba(0,0,0,0.25);
  --loading-overlay: rgba(248,250,252,0.96);
  --insight-bullet: #2563EB;
  --ranking-bg: rgba(0,0,0,0.02);
  --ranking-border: rgba(0,0,0,0.04);
  --ranking-hover-bg: rgba(37,99,235,0.08);
  --stat-subtitle: #64748B;
  --accent: #2563EB;
  --zero-fill: rgba(200,210,220,0.3);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text-primary); overflow:hidden; transition:background .3s,color .3s; }
#map { position:fixed; inset:0; bottom:30px; z-index:0; background:var(--bg); transition:background .3s; }
@media (max-width:768px) {
  #map { bottom:0; }
}
.leaflet-top { top:72px; }
@media (max-width:768px) { .leaflet-top { top:100px; } }
.province-disabled .province-path { pointer-events:none !important; }
#loading { position:fixed; inset:0; z-index:9999; background:var(--loading-overlay); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; transition:opacity .4s,background .3s; }
#loading.hidden { opacity:0; pointer-events:none; }
.spinner { width:50px; height:50px; border:3px solid rgba(255,255,255,.05); border-top-color:#3B82F6; border-right-color:#D9B44A; border-radius:50%; animation:spin 1s cubic-bezier(.5,.1,.5,.9) infinite; box-shadow:0 0 15px rgba(59,130,246,.2); }
@keyframes spin { to { transform:rotate(360deg); } }
#loading p { color:var(--text-secondary); font-size:14px; font-weight:500; letter-spacing:.5px; }
#skeleton-loading { position:fixed; inset:0; z-index:9998; background:var(--skeleton-bg); padding:80px 20px 20px; transition:background .3s; }
.skeleton { background:linear-gradient(90deg,var(--skeleton-base) 25%,var(--skeleton-shine) 50%,var(--skeleton-base) 75%); background-size:200% 100%; animation:shimmer 1.5s infinite; border-radius:8px; }
@keyframes shimmer { 0% { background-position:200% 0; } 100% { background-position:-200% 0; } }
.skeleton-card { height:80px; margin-bottom:10px; border-radius:16px; }
.skeleton-text { height:14px; margin-bottom:8px; width:70%; }
.skeleton-text.short { width:40%; }
.skeleton-chart { height:180px; margin-bottom:12px; border-radius:20px; }
#dashboard-header { position:absolute; top:0; left:0; right:0; z-index:900; height:60px; display:flex; align-items:center; justify-content:space-between; padding:0 24px; background:var(--header-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); transition:background .3s; }
#dashboard-header .header-left { display:flex; align-items:center; gap:16px; }
#dashboard-header .header-title { font-size:18px; font-weight:800; background:var(--gradient-title); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.5px; white-space:nowrap; }
#dashboard-header .header-subtitle { font-size:11px; color:var(--text-secondary); font-weight:500; white-space:nowrap; }
#dashboard-header .header-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
#dashboard-header .header-btn { padding:6px 14px; border-radius:10px; border:1px solid var(--glass-border); background:var(--badge-bg); color:var(--badge-text); font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .2s; backdrop-filter:blur(8px); }
#dashboard-header .header-btn:hover { background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.3); color:var(--primary); }
#breadcrumb { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-secondary); }
#breadcrumb .crumb { color:var(--text-secondary); cursor:pointer; transition:color .2s; font-weight:500; }
#breadcrumb .crumb:hover { color:var(--primary); }
#breadcrumb .crumb.active { color:var(--text-primary); font-weight:700; }
#breadcrumb .sep { color:var(--text-secondary); opacity:.4; font-size:10px; }
#fullscreen-btn { background:var(--badge-bg); backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:10px; padding:6px 14px; color:var(--badge-text); font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .2s; display:flex; align-items:center; gap:6px; }
#fullscreen-btn:hover { background:rgba(59,130,246,.15); border-color:rgba(59,130,246,.3); color:var(--primary); }select:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

#overlay-select {
  min-width: 140px;
}

/* Chart sub-tabs */
.chart-tab {
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 700;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-secondary);
  background: transparent;
  transition: all 0.2s;
}
.chart-tab:hover {
  background: var(--badge-bg);
  color: var(--text-primary);
}
.chart-tab.active {
  background: rgba(59, 130, 246, 0.25);
  color: var(--primary);
}

/* Correlation controls */
#correlation-controls {
  animation: fadeSlideDown 0.25s ease-out;
}
#correlation-controls select {
  transition: border-color 0.2s;
}
#correlation-controls select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

#r-squared-display {
  animation: fadeScale 0.3s ease-out;
}

/* Chart canvas */
#analytics-chart {
  background: var(--chart-bg);
  border-radius: 12px;
  padding: 8px;
  transition: background 0.3s;
}

/* Chart section separator */
#chart-section {
  border-top-color: var(--glass-border);
  transition: border-color 0.3s;
}

#global-search-box {
  position: absolute; top:72px; left:50%; transform:translateX(-50%); z-index:1050; width:480px; max-width:90vw; }
#global-search-input { width:100%; padding:14px 20px 14px 48px; background:var(--sidebar-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:16px; color:var(--text-primary); font-family:inherit; font-size:14px; outline:none; box-shadow:0 20px 40px -10px rgba(0,0,0,.6),0 0 0 1px rgba(59,130,246,0); transition:border-color .2s,background .3s,box-shadow .2s; }
#global-search-input:focus { border-color:rgba(59,130,246,.4); box-shadow:0 20px 40px -10px rgba(0,0,0,.6),0 0 0 1px rgba(59,130,246,.3); background:var(--card); }
#global-search-input::placeholder { color:var(--text-secondary); }
#global-search-box .search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--text-secondary); font-size:16px; pointer-events:none; }
#global-search-box .search-shortcut { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-secondary); font-size:9px; font-weight:700; background:var(--badge-bg); border:1px solid var(--glass-border); border-radius:4px; padding:2px 6px; letter-spacing:.5px; pointer-events:none; opacity:0; transition:opacity .2s; }
#global-search-input:focus ~ .search-shortcut,
#global-search-input:not(:placeholder-shown) ~ .search-shortcut { opacity:1; }
#global-search-results { position:absolute; top:100%; left:0; right:0; margin-top:6px; background:var(--card); border:1px solid var(--glass-border); border-radius:16px; max-height:280px; overflow-y:auto; display:none; box-shadow:0 20px 25px -5px rgba(0,0,0,.5); }
#sidebar { position:absolute; top:80px; left:20px; z-index:1000; width:480px; max-height:calc(100vh - 100px); background:var(--sidebar-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:var(--radius-xl); box-shadow:var(--shadow),0 20px 25px -5px rgba(0,0,0,.5); overflow:hidden; display:flex; flex-direction:column; transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s,background .3s; }
#sidebar::-webkit-scrollbar { width:6px; }
#sidebar::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
#sidebar::-webkit-scrollbar-thumb:hover { background:var(--scrollbar-thumb-hover); }
#sidebar-drag-handle { display:none; }
.sidebar-header { padding:24px 24px 18px; border-bottom:1px solid var(--glass-border); background:var(--sidebar-bg); backdrop-filter:blur(20px); border-radius:var(--radius-xl) var(--radius-xl) 0 0; z-index:10; flex-shrink:0; }
.sidebar-header h1 { font-size:20px; font-weight:800; background:var(--gradient-title); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.5px; }
.sidebar-header p { font-size:13px; color:var(--text-secondary); margin-top:6px; font-weight:400; }
.sidebar-body { padding:20px 24px 24px; overflow-y:auto; flex:1; }
.sidebar-body::-webkit-scrollbar { width:6px; }
.sidebar-body::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
.control-group { margin-bottom:20px; }
.control-group label { font-size:11px; font-weight:700; color:var(--text-secondary); display:block; margin-bottom:8px; text-transform:uppercase; letter-spacing:1px; }
.control-group select { width:100%; padding:10px 14px; background:var(--input-bg); border:1px solid var(--glass-border); border-radius:10px; font-size:14px; color:var(--text-primary); font-family:inherit; transition:all .2s,background .3s; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; }
.control-group select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(59,130,246,.25); }
.control-group select option { background:var(--card); color:var(--text-primary); }
.stat-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.stat-card { background:var(--badge-bg); border:1px solid var(--glass-border); border-radius:20px; padding:20px; box-shadow:var(--shadow); transition:all .3s cubic-bezier(.4,0,.2,1),background .3s; cursor:default; overflow:hidden; }
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow),0 4px 12px rgba(0,0,0,.1); }
.stat-card .label { font-size:12px; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .value { font-size:36px; font-weight:700; margin-top:4px; letter-spacing:-1px; line-height:1.1; }
.stat-card .value.blue { color:var(--primary); }
.stat-card .value.green { color:var(--success); }
.stat-card .value.orange { color:var(--warning); }
.stat-card .value.purple { color:#8B5CF6; }
.stat-card .value.red { color:var(--danger); }
.stat-card .value.pink { color:#EC4899; }
.stat-card .value.teal { color:#06B6D4; }
.tab-nav { display:flex; gap:4px; padding:4px; background:var(--tab-bg); border-radius:14px; margin-bottom:14px; }
.tab-btn { flex:1; padding:8px 6px; border:none; border-radius:10px; font-size:11px; font-weight:700; color:var(--text-secondary); background:transparent; cursor:pointer; font-family:inherit; transition:all .2s; }
.tab-btn:hover { color:var(--text-primary); background:var(--badge-bg); }
.tab-btn.active { background:rgba(59,130,246,.2); color:var(--primary); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.rank-mode-btn.active { background:var(--primary) !important; color:#fff !important; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.tab-content { display:none; }
.tab-content.active { display:block; }
.exec-summary { background:var(--gradient-accent); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:var(--space-6) var(--space-5); margin-bottom:var(--space-5); box-shadow:var(--shadow); }
.exec-summary-title { font-size:10px; font-weight:700; color:var(--accent-gold); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:var(--space-4); display:flex; align-items:center; gap:8px; }
.exec-hero { font-size:26px; font-weight:800; color:var(--text-primary); letter-spacing:-.5px; margin-bottom:var(--space-4); line-height:1.25; }
.exec-metrics { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--space-3); }
.exec-metric { background:var(--chart-bg); border-radius:var(--radius-md); padding:var(--space-3) var(--space-2); text-align:center; border:1px solid var(--glass-border); }
.exec-metric-label { display:block; font-size:10px; font-weight:700; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }
.exec-metric-value { display:block; font-size:15px; font-weight:700; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.exec-summary-item { display:flex; gap:10px; align-items:start; font-size:13px; line-height:1.6; color:var(--text-primary); padding:6px 0; }
.exec-summary-item:not(:last-child) { border-bottom:1px solid var(--glass-border); }
.exec-summary-item .bullet { color:var(--accent-gold); flex-shrink:0; margin-top:3px; }
#insight-section { margin-bottom:14px; }
#insight-list { background:var(--insight-bg); border:1px solid var(--glass-border); border-radius:16px; padding:16px 18px; font-size:12px; line-height:1.6; color:var(--text-primary); }
#insight-list > div { display:flex; gap:8px; align-items:start; padding:4px 0; }
.ranking-item { cursor:pointer; font-size:11px; padding:10px 12px; background:var(--ranking-bg) !important; border:1px solid var(--ranking-border) !important; border-radius:12px; transition:all .2s,background .3s; box-shadow:var(--shadow); }
.ranking-item:hover { transform:translateX(4px); background:var(--ranking-hover-bg) !important; }
.ranking-item .ri-name { color:var(--text-primary) !important; }
.ranking-item [style*="color:var(--text-primary)"] { color:var(--text-primary) !important; }
.ranking-item .ri-meta { color:var(--text-secondary) !important; }
.ranking-item .ri-value { color:var(--text-primary) !important; }
.ranking-item .ri-rank { color:var(--text-secondary) !important; }
.spotlight-item { cursor:pointer; font-size:10px; padding:6px 8px; background:var(--ranking-bg); border:1px solid var(--ranking-border); border-radius:6px; display:flex; align-items:center; gap:6px; transition:all 0.2s; }
.spotlight-item.hover-green { background:rgba(16,185,129,0.1) !important; border-color:rgba(16,185,129,0.2) !important; }
.spotlight-item.hover-red { background:rgba(239,68,68,0.1) !important; border-color:rgba(239,68,68,0.2) !important; }
.spotlight-item > div > span:first-child { color:var(--text-primary) !important; }
.chart-tab { transition:all .2s; border-radius:8px !important; }
.chart-tab:hover { background:var(--badge-bg) !important; }
.chart-tab.active { background:rgba(59,130,246,.25) !important; border-color:rgba(59,130,246,.5) !important; color:var(--primary) !important; }
#floating-map-config { position:absolute; top:72px; right:20px; z-index:1000; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; transition:opacity .3s,transform .3s; }
#floating-map-config select { background:var(--sidebar-bg); backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:10px; padding:8px 12px; color:var(--text-primary); font-family:inherit; font-size:11px; font-weight:600; cursor:pointer; outline:none; transition:background .3s; }
#mobile-map-controls { display:none; }
#toggle-btn { position:absolute; top:80px; left:508px; z-index:1001; background:var(--sidebar-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid var(--glass-border); border-radius:12px; padding:10px 14px; font-size:14px; font-weight:600; color:var(--text-primary); cursor:pointer; box-shadow:var(--shadow); font-family:inherit; display:flex; align-items:center; gap:8px; transition:all .2s,background .3s; }
#toggle-btn:hover { background:var(--card); border-color:var(--card-hover-bg); transform:translateY(-1px); }
#info-panel { position:absolute; top:80px; right:20px; z-index:1000; background:var(--sidebar-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:20px; box-shadow:var(--shadow),0 20px 25px -5px rgba(0,0,0,.5); padding:20px 24px; min-width:320px; max-width:400px; display:none; max-height:calc(100vh - 120px); overflow-y:auto; transition:background .3s; }
#info-panel::-webkit-scrollbar { width:4px; }
#info-panel::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:2px; }
.spotlight-card { background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(217,180,74,.04)); border:1px solid rgba(59,130,246,.2); border-radius:16px; padding:18px; margin-bottom:16px; }
.spotlight-card .spotlight-label { font-size:10px; font-weight:700; color:var(--primary); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }
.spotlight-card .spotlight-title { font-size:22px; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.spotlight-card .spotlight-rank { font-size:12px; color:var(--success); font-weight:700; margin-bottom:10px; }
.spotlight-card .spotlight-stat { display:flex; justify-content:space-between; align-items:center; padding:4px 0; font-size:12px; }
.spotlight-card .spotlight-stat .s-label { color:var(--text-secondary); }
.spotlight-card .spotlight-stat .s-value { color:var(--text-primary); font-weight:700; }
.spotlight-card .spotlight-stat .s-diff { font-weight:700; }
.spotlight-divider { height:1px; background:var(--glass-border); margin:8px 0; }
.info-panel-header { display:flex; justify-content:flex-end; align-items:center; margin-bottom:4px; }
.info-close-btn { background:none; border:none; color:var(--text-secondary); cursor:pointer; font-size:18px; padding:4px 10px; transition:color .2s; line-height:1; border-radius:6px; }
.info-close-btn:hover { color:var(--danger); background:rgba(239,68,68,.1); }
.info-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; font-size:12px; border-bottom:1px solid var(--glass-border); }
.info-row:last-child { border-bottom:none; }
.info-row .il { color:var(--text-secondary); }
.info-row .ir { color:var(--text-primary); font-weight:600; text-align:right; }
.status-badge { font-size:11px; padding:10px 14px; border-radius:12px; margin-top:18px; border-top:1px solid var(--glass-border); background:var(--badge-bg); display:flex; align-items:center; gap:8px; font-weight:500; }
.status-badge::before { content:''; display:inline-block; width:8px; height:8px; border-radius:50%; }
.status-badge.live { color:var(--success); }
.status-badge.live::before { background:var(--success); box-shadow:0 0 8px var(--success); }
.status-badge.cached { color:var(--warning); }
.status-badge.cached::before { background:var(--warning); box-shadow:0 0 8px var(--warning); }
.status-badge.static { color:var(--text-secondary); }
.status-badge.static::before { background:var(--text-secondary); }

.legend { padding:14px 18px; background:var(--sidebar-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--glass-border); border-radius:14px; box-shadow:0 10px 15px -3px rgba(0,0,0,.3); font-size:11px; line-height:1.7; color:var(--text-secondary); }
.legend b { color:var(--text-primary); font-size:12px; margin-bottom:8px; display:block; }
.legend i { width:14px; height:14px; display:inline-block; margin-right:8px; border-radius:3px; vertical-align:middle; }
.legend-chevron { display:inline-block; transition:transform .2s; }
.leaflet-bottom.leaflet-right { transition:left .35s cubic-bezier(.4,0,.2,1); }
.leaflet-tooltip { background:var(--sidebar-bg) !important; border:1px solid var(--glass-border) !important; border-radius:10px !important; color:var(--text-primary) !important; box-shadow:0 10px 15px -3px rgba(0,0,0,.5) !important; font-family:'Inter',sans-serif !important; font-size:12px !important; padding:10px 14px !important; backdrop-filter:blur(16px) !important; -webkit-backdrop-filter:blur(16px) !important; }
.leaflet-tooltip-left::before { border-left-color:var(--sidebar-bg) !important; }
.leaflet-tooltip-right::before { border-right-color:var(--sidebar-bg) !important; }
.custom-map-badge { background:transparent; border:none; }
.map-badge { display:inline-block; padding:8px 12px; border-radius:12px; font-size:11px; font-weight:700; color:#fff; white-space:nowrap; box-shadow:0 8px 20px -4px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:none; text-align:center; pointer-events:auto; transition:transform .2s,box-shadow .2s; line-height:1.3; }
.map-badge:hover { transform:scale(1.05); box-shadow:0 12px 28px -6px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12); }
.map-badge.highest { background:linear-gradient(135deg,rgba(22,163,74,.92),rgba(21,128,61,.88)); border-color:rgba(22,163,74,.4); }
.map-badge.lowest { background:linear-gradient(135deg,rgba(220,38,38,.92),rgba(185,28,28,.88)); border-color:rgba(220,38,38,.4); }
.map-badge.growth { background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(29,78,216,.88)); border-color:rgba(37,99,235,.4); }
.chip { display:inline-block; padding:2px 8px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.3px; }
.chip.green { background:rgba(22,163,74,.15); color:#22C55E; }
.chip.red { background:rgba(220,38,38,.15); color:#EF4444; }
.chip.blue { background:rgba(37,99,235,.15); color:#3B82F6; }
.btn-sm { padding:6px 12px; font-size:10px; font-weight:600; border-radius:var(--radius-sm); }
.btn-md { padding:8px 16px; font-size:12px; font-weight:600; border-radius:var(--radius-sm); }
.year-btn { background:var(--badge-bg); border:1px solid var(--glass-border); border-radius:var(--radius-sm); padding:5px 14px; font-size:11px; color:var(--text-secondary); cursor:pointer; font-family:inherit; font-weight:600; transition:all .2s; }
.year-btn:hover { background:var(--ranking-hover-bg); border-color:var(--glass-border); }
.year-btn.active { background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
#district-list-container::-webkit-scrollbar { width:4px; }
#district-list-container::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:2px; }
#story-overlay { position:fixed; inset:0; z-index:9998; background:var(--loading-overlay); display:none; flex-direction:column; backdrop-filter:blur(20px); }
#story-overlay.active { display:flex; }
.story-slide { flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; padding:40px 60px; text-align:center; }
.story-slide.active { display:flex; }
.story-slide h2 { font-size:36px; font-weight:800; margin-bottom:20px; background:var(--gradient-title); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.story-slide p { font-size:16px; color:var(--text-secondary); max-width:600px; line-height:1.7; }
.story-slide .stat-big { font-size:72px; font-weight:800; color:var(--text-primary); margin:16px 0; letter-spacing:-2px; }
.story-slide .story-stat { font-size:36px; font-weight:800; color:var(--text-primary); margin:4px 0; letter-spacing:-1px; }
.story-slide .stat-label { font-size:14px; color:var(--accent-gold); font-weight:600; text-transform:uppercase; letter-spacing:3px; }
.story-nav { display:flex; justify-content:center; gap:16px; padding:24px; border-top:1px solid var(--glass-border); }
.story-nav button { padding:12px 28px; border-radius:10px; border:1px solid var(--glass-border); background:var(--badge-bg); color:var(--text-primary); font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .2s; }
.story-nav button:hover { background:var(--ranking-hover-bg); border-color:var(--glass-border); }
.story-nav button.primary { background:var(--ranking-hover-bg); border-color:var(--glass-border); }
.story-nav button.primary:hover { background:rgba(59,130,246,.15); }
.story-progress { display:flex; justify-content:center; gap:8px; padding:16px 24px 0; }
.story-dot { width:10px; height:10px; border-radius:50%; background:var(--badge-bg); transition:all .3s; cursor:pointer; }
.story-dot.active { background:#D9B44A; box-shadow:0 0 12px rgba(217,180,74,.5); }
.story-dot.done { background:rgba(59,130,246,.4); }
#data-footer { position:fixed; bottom:0; left:0; right:0; z-index:999; background:var(--sidebar-bg); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-top:1px solid var(--glass-border); padding:6px 20px; display:flex; align-items:center; justify-content:space-between; font-size:10px; color:var(--text-secondary); transition:background .3s,border-color .3s; }
#data-footer .footer-left, #data-footer .footer-right { display:flex; align-items:center; gap:6px; }
#data-footer .footer-divider { width:1px; height:12px; background:var(--glass-border); margin:0 8px; }
#data-footer .status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--text-secondary); }
#data-footer.live .status-dot { background:var(--success); box-shadow:0 0 6px var(--success); }
#data-footer.cached .status-dot { background:var(--warning); box-shadow:0 0 6px var(--warning); }
#data-footer.static .status-dot { background:var(--text-secondary); }
@media (max-width:768px) {
  #data-footer { padding:4px 12px; font-size:9px; flex-wrap:wrap; gap:2px; }
  #data-footer .footer-divider { margin:0 4px; }
}
#methodology-modal { display:none; position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,0.6); backdrop-filter:blur(8px); align-items:center; justify-content:center; padding:20px; }
#methodology-modal.active { display:flex; }
.methodology-content { background:var(--card); border:1px solid var(--glass-border); border-radius:var(--radius-xl); padding:var(--space-6); max-width:480px; width:100%; max-height:80vh; overflow-y:auto; box-shadow:0 25px 50px rgba(0,0,0,0.5); animation:fadeScale 0.2s ease-out; }
.methodology-content h2 { font-size:16px; font-weight:700; margin-bottom:var(--space-4); color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.methodology-content h2 span { font-size:18px; }
.methodology-content .row { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--glass-border); font-size:12px; }
.methodology-content .row:last-child { border-bottom:none; }
.methodology-content .row .label { color:var(--text-secondary); }
.methodology-content .row .value { color:var(--text-primary); font-weight:600; text-align:right; max-width:60%; }
.methodology-content .close-btn { margin-top:var(--space-4); width:100%; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--glass-border); background:var(--badge-bg); color:var(--text-primary); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; }
.methodology-content .close-btn:hover { background:var(--card-hover-bg); }
@keyframes fadeScale { from { opacity:0; transform:scale(0.95); } to { opacity:1; transform:scale(1); } }
#stat-cards, #insight-list, #exec-summary-list, #top-rankings, #bottom-rankings, #regional-distribution-list { transition:opacity .3s; }
@keyframes slideUpInfo { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }

/* ─── Hamburger Menu ─── */
#mobile-summary-bar { display:none; }
#hamburger-btn { display:none; }
#hamburger-overlay { display:none; }

@media (max-width:768px) {

  /* ─── Map ─── */
  #map { bottom:25px; }

  /* ─── Mobile summary bar (sticky, above map) ─── */
  #mobile-summary-bar { display:flex; position:fixed; top:48px; left:0; right:0; z-index:950; background:var(--header-bg); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); padding:3px 6px; justify-content:space-around; align-items:center; gap:2px; }
  #mobile-summary-bar .ms-item { text-align:center; flex:1; }
  #mobile-summary-bar .ms-label { font-size:7px; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
  #mobile-summary-bar .ms-value { font-size:12px; font-weight:700; color:var(--text-primary); }

  /* ─── Dashboard header ─── */
  #dashboard-header { height:48px; padding:0 8px; }
  #dashboard-header .header-title { font-size:12px; }
  #dashboard-header .header-subtitle { display:none; }
  #dashboard-header .header-actions { gap:4px; }
  #dashboard-header .header-btn { display:none; }
  #fullscreen-btn { display:none; }
  #toggle-story { display:none; }
  #refresh-btn { display:none; }

  /* ─── Hamburger menu ─── */
  #hamburger-btn { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; background:var(--badge-bg); border-radius:8px; color:var(--text-primary); font-size:16px; cursor:pointer; flex-shrink:0; }
  #hamburger-overlay { display:block; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.5); opacity:0; pointer-events:none; transition:opacity 0.3s; }
  #hamburger-overlay.open { opacity:1; pointer-events:auto; }
  #hamburger-menu { position:fixed; top:0; right:0; bottom:0; width:280px; z-index:2001; background:var(--card); padding:20px; transform:translateX(100%); transition:transform 0.3s cubic-bezier(.4,0,.2,1); overflow-y:auto; box-shadow:-4px 0 20px rgba(0,0,0,.3); }
  #hamburger-menu.open { transform:translateX(0); }
  #hamburger-menu .hamburger-close { position:absolute; top:12px; right:12px; background:none; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; padding:8px; }
  #hamburger-menu h3 { font-size:13px; font-weight:700; color:var(--text-primary); margin:16px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--glass-border); }
  #hamburger-menu .hamburger-btn { display:flex; align-items:center; gap:10px; width:100%; padding:12px; border-radius:10px; border:1px solid var(--glass-border); background:var(--badge-bg); color:var(--text-primary); font-size:12px; font-family:inherit; cursor:pointer; margin-bottom:6px; min-height:44px; transition:background 0.2s; }
  #hamburger-menu .hamburger-btn:active { background:var(--ranking-hover-bg); }
  #hamburger-menu .hamburger-label { flex:1; text-align:left; }

  /* ─── Search box ─── */
  #global-search-box { top:90px; width:94vw; }
  #global-search-input { font-size:13px; padding:10px 14px 10px 36px; min-height:44px; }
  #global-search-results { max-height:140px !important; -webkit-overflow-scrolling:touch; }
  .search-shortcut { display:none !important; }

  /* ─── Sidebar → swipeable bottom sheet ─── */
  #sidebar { position:fixed; width:100vw; left:0; bottom:0; top:auto; border-radius:16px 16px 0 0; height:var(--sheet-collapsed,90px); z-index:1100; overflow:hidden; border-bottom:none; box-shadow:0 -4px 20px rgba(0,0,0,.4); padding-bottom:env(safe-area-inset-bottom,0px); transition:height 0.4s cubic-bezier(.32,.72,0,1); }
  #sidebar.sheet-expanded { height:var(--sheet-expanded,55vh); overflow-y:auto; -webkit-overflow-scrolling:touch; }
  #sidebar-drag-handle { display:block; width:48px; height:5px; background:var(--drag-handle-bg); border-radius:3px; margin:8px auto 4px; cursor:grab; flex-shrink:0; }
  #sidebar-drag-handle:active { opacity:.7; cursor:grabbing; }
  .sidebar-header { padding:0 16px 8px; border-radius:16px 16px 0 0; }
  .sidebar-header h1 { font-size:14px; }
  .sidebar-header p { font-size:10px; margin-top:2px; }
  .sidebar-body { padding:4px 16px calc(16px + env(safe-area-inset-bottom,0px)); -webkit-overflow-scrolling:touch; }
  .control-group { margin-bottom:10px; }
  .control-group select { padding:10px 10px; font-size:13px; min-height:44px; }
  .control-group label { font-size:9px; margin-bottom:4px; }

  /* ─── KPI cards → horizontal carousel ─── */
  .stat-cards { display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:0 0 4px; margin-top:6px; }
  .stat-cards::-webkit-scrollbar { display:none; }
  .stat-card { flex:0 0 120px; scroll-snap-align:start; padding:10px; border-radius:14px; }
  .stat-card .value { font-size:18px; }
  .stat-card .value[style*="font-size"] { font-size:16px !important; }
  .stat-card .label { font-size:8px; letter-spacing:0.3px; }
  .stat-card .skeleton { display:none; }

  /* ─── Map controls (moved into hamburger) ─── */
  #floating-map-config { display:none !important; }
  #mobile-map-controls { display:none !important; }
  #toggle-btn { display:none; }

  /* ─── Info panel (province spotlight drawer) ─── */
  #info-panel { position:fixed; bottom:0; left:0; right:0; top:auto; z-index:1200; border-radius:16px 16px 0 0; padding:14px 16px calc(20px + env(safe-area-inset-bottom,0px)); min-width:auto; max-height:70vh; overflow-y:auto; -webkit-overflow-scrolling:touch; box-shadow:0 -4px 20px rgba(0,0,0,.5); animation:slideUpInfo .3s cubic-bezier(.4,0,.2,1); }
  #info-panel h3 { font-size:14px; }
  #info-panel .info-panel-handle { display:block !important; width:40px; height:4px; background:var(--drag-handle-bg); border-radius:2px; margin:0 auto 10px; }

  /* ─── Legend (collapsed by default) ─── */
  .legend { max-width:130px; font-size:9px; padding:8px 10px; }
  .legend b { font-size:10px; }

  /* ─── Leaflet ─── */
  .leaflet-tooltip { font-size:10px !important; padding:4px 8px !important; max-width:200px !important; }

  /* ─── District ─── */
  #district-list-container { max-height:150px !important; -webkit-overflow-scrolling:touch; }
  #district-filter-input { min-height:44px; font-size:13px !important; }
  #chart-section { margin-top:12px !important; padding-top:10px !important; }

  /* ─── Tabs ─── */
  .tab-btn { font-size:9px; padding:6px 4px; }

  /* ─── Exec summary ─── */
  .exec-summary { padding:var(--space-4) var(--space-3); }
  .exec-summary .exec-hero { font-size:18px; }
  .exec-metrics { gap:var(--space-1); }
  .exec-metric { padding:var(--space-1); }
  .exec-metric-value { font-size:12px; }
  .exec-summary-item { font-size:12px; padding:4px 0; }

  /* ─── Story ─── */
  .story-slide { padding:16px; }
  .story-slide h2 { font-size:20px; }
  .story-slide .stat-big { font-size:36px; }
  .story-nav button { padding:12px 16px; min-height:44px; font-size:13px; }

  /* ─── Rankings ─── */
  .ranking-item { padding:10px 12px; }

  /* ─── Methodology ─── */
  .methodology-content { padding:var(--space-3); margin:0 8px; border-radius:var(--radius-md); }

  /* ─── Tab nav ─── */
  .tab-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  #compare-results-table { font-size:10px; overflow-x:auto; }
  #regional-distribution-list > div { padding:2px 0; }

  /* ─── District items ─── */
  .sidebar-body .district-item { min-height:48px; }
  .sidebar-body .district-item > div { font-size:12px; }

  /* ─── Info panel close btn ─── */
  .info-close-btn { padding:10px !important; font-size:20px !important; }

  /* ─── Info row ─── */
  .info-row { padding:8px 0; font-size:12px; }

  /* ─── Search items ─── */
  .search-item { min-height:44px; }

  /* ─── Compare ─── */
  #compare-prov-a, #compare-prov-b { min-height:44px; font-size:12px; }
  .year-btn { padding:6px 12px; font-size:11px; min-height:36px; }
  .spotlight-item { padding:10px 8px; }

  /* ─── Footer ─── */
  #data-footer { padding:2px 8px; font-size:8px; flex-wrap:wrap; gap:2px; }
  #data-footer .footer-divider { margin:0 4px; }
}

/* ─── Landscape ─── */
@media (max-width:768px) and (orientation:landscape) {
  #sidebar { --sheet-collapsed:60px; --sheet-expanded:75vh; }
  #info-panel { max-height:80vh; }
  .stat-cards { flex-wrap:wrap; }
  .stat-card { flex:0 0 130px; }
}

/* ─── Very small screens ─── */
@media (max-width:380px) {
  #dashboard-header .header-title { font-size:10px; }
  .sidebar-header h1 { font-size:13px; }
  .stat-card { flex:0 0 100px; padding:6px; }
  .stat-card .value { font-size:14px !important; }
  .stat-card .value[style*="font-size"] { font-size:13px !important; }
  .stat-card .label { font-size:7px; }
  #mobile-summary-bar .ms-value { font-size:10px; }
  #mobile-summary-bar .ms-label { font-size:6px; }
}