:root {
  --bg: #0A1628;
  --surface: #111f35;
  --surface2: #1a2d4a;
  --surface3: #243a5e;
  --border: #2a3f60;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --accent: #005EB8;
  --accent-glow: rgba(0,94,184,0.15);
  --gold: #FFC72C;
  --gold-dark: #D4A010;
  --gold-glow: rgba(255,199,44,0.15);
  --green: #38A169;
  --green-glow: rgba(56,161,105,0.15);
  --red: #E53E3E;
  --red-glow: rgba(229,62,62,0.15);
  --purple: #805AD5;
  --cyan: #3182CE;
  --orange: #DD6B20;
  --navy: #003F7F;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }

/* Header / Hero */
.header {
  background: #003F7F;
  border-bottom: 3px solid #FFC72C;
  padding: 40px 40px 36px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 24px, rgba(255,255,255,0.018) 24px, rgba(255,255,255,0.018) 25px);
}
.header-inner {
  max-width: 1600px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.header-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 4px;
}
.header-wordmark {
  display: flex;
  align-items: baseline;
  font-family: 'DM Serif Display', serif;
  font-size: 38px;
  line-height: 1;
}
.header-wordmark .traffic { color: #fff; }
.header-wordmark .grants  { color: #FFC72C; }
.header-wordmark .dot-ai  { color: #fff; }
.header-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.header-subtitle {
  font-family: 'DM Serif Display', serif;
  font-size: 22px;
  color: rgba(255,255,255,0.9);
  font-weight: 400;
  margin-bottom: 24px;
}
.header-stats { display:flex; gap:40px; flex-wrap:wrap; justify-content:center; }
.header-stat { text-align:center; }
.header-stat .val { font-family:'DM Serif Display',serif; font-size:32px; color:var(--gold); }
.header-stat .lbl { font-size:11px; color:rgba(255,255,255,0.45); text-transform:uppercase; letter-spacing:2px; margin-top:2px; }

.tg-back-nav{display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;align-items:center;padding:0 24px 18px;position:relative;z-index:1;}
.tg-back-nav a{font-size:12px;font-weight:600;color:rgba(255,255,255,0.95);text-decoration:none;padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,0.3);transition:color .15s,border-color .15s,background .15s;}
.tg-back-nav a:hover{color:#FFC72C;border-color:rgba(255,199,44,0.55);background:rgba(255,255,255,0.07);}

/* Tabs */
.tab-bar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 40px; display:flex; gap:0; max-width:100%; overflow-x:auto; }
.tab-btn { padding:14px 28px; font-size:14px; font-weight:600; color:rgba(255,255,255,0.45); cursor:pointer; border:none; background:none; border-bottom:3px solid transparent; transition:all 0.2s; white-space:nowrap; font-family:'DM Sans',sans-serif; }
.tab-btn:hover { color:rgba(255,255,255,0.8); background:var(--surface2); }
.tab-btn.active { color:var(--gold); border-bottom-color:var(--gold); }

/* Content */
.content { max-width:1600px; margin:0 auto; padding:32px 40px; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Cards */
.card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:24px; margin-bottom:20px; }
.card-header { font-family:'DM Serif Display',serif; font-size:20px; margin-bottom:16px; color:#fff; display:flex; align-items:center; gap:10px; }
.card-header .icon { font-size:22px; }

/* Grid */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:1100px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

/* Metric boxes */
.metric-box { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:20px; text-align:center; }
.metric-box .val { font-family:'DM Serif Display',serif; font-size:32px; }
.metric-box .lbl { font-size:12px; color:var(--text-dim); text-transform:uppercase; letter-spacing:1px; margin-top:4px; }
.metric-box.gold .val { color:var(--gold); }
.metric-box.blue .val { color:var(--accent); }
.metric-box.green .val { color:var(--green); }
.metric-box.purple .val { color:var(--purple); }

/* Tables */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:var(--surface2); color:var(--gold); font-weight:600; text-align:left; padding:10px 14px; border-bottom:2px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:0.5px; position:sticky; top:0; z-index:2; }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--border); vertical-align:top; }
.data-table tr:hover { background:var(--surface2); }
.data-table .money { font-family:'DM Sans',sans-serif; font-weight:600; color:var(--green); }
.data-table .rising { color:var(--green); }
.data-table .declining { color:var(--red); }
.data-table .stable { color:var(--text-muted); }

/* Tags */
.tag { display:inline-block; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:600; }
.tag-gold { background:var(--gold-glow); color:var(--gold); border:1px solid rgba(255,199,44,0.35); }
.tag-green { background:var(--green-glow); color:var(--green); border:1px solid rgba(56,161,105,0.35); }
.tag-blue { background:var(--accent-glow); color:var(--accent); border:1px solid rgba(0,94,184,0.35); }
.tag-red { background:var(--red-glow); color:var(--red); border:1px solid rgba(229,62,62,0.35); }
.tag-purple { background:rgba(128,90,213,0.15); color:var(--purple); border:1px solid rgba(128,90,213,0.3); }

/* Bars */
.bar-container { height:22px; background:var(--surface3); border-radius:4px; overflow:hidden; position:relative; }
.bar-fill { height:100%; border-radius:4px; transition:width 0.6s ease; }
.bar-label { position:absolute; right:6px; top:3px; font-size:10px; font-weight:600; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.5); }

/* City selector */
.city-selector { margin-bottom:24px; display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.city-selector label { font-weight:600; color:var(--gold); font-size:14px; }
.city-selector select { background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px 16px; font-size:14px; font-family:'DM Sans',sans-serif; min-width:300px; cursor:pointer; }
.city-selector select:focus { outline:none; border-color:var(--accent); }
.city-search { background:var(--surface2); color:var(--text); border:1px solid var(--border); border-radius:8px; padding:10px 16px; font-size:14px; font-family:'DM Sans',sans-serif; min-width:250px; }
.city-search::placeholder { color:var(--text-dim); }

/* Strategy cards */
.strategy-card { background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:20px; margin-bottom:12px; }
.strategy-card.platinum { border-left:4px solid var(--gold); }
.strategy-card.gold { border-left:4px solid var(--orange); }
.strategy-card.silver { border-left:4px solid var(--text-muted); }
.strategy-card .title { font-weight:700; font-size:15px; margin-bottom:6px; }
.strategy-card .range { color:var(--green); font-weight:600; font-size:13px; }
.strategy-card .elements { margin-top:10px; }
.strategy-card .element { padding:4px 0; font-size:13px; color:var(--text-muted); border-bottom:1px solid var(--border); }
.strategy-card .examples { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* Confidence dots */
.conf { display:inline-flex; gap:2px; }
.conf .dot { width:10px; height:10px; border-radius:50%; background:var(--border); }
.conf .dot.filled { background:var(--gold); }

/* Avoid card */
.avoid-item { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.avoid-item .x { color:var(--red); font-size:18px; font-weight:700; flex-shrink:0; }
.avoid-item .reason { font-size:13px; color:var(--text-muted); }

/* Bundling rules */
.rule-card { display:flex; gap:16px; padding:14px; background:var(--surface2); border-radius:8px; margin-bottom:8px; border:1px solid var(--border); }
.rule-num { width:32px; height:32px; background:var(--accent); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0; }
.rule-title { font-weight:700; font-size:14px; margin-bottom:2px; }
.rule-desc { font-size:13px; color:var(--text-muted); }

/* City detail */
.city-header { display:flex; align-items:center; gap:20px; margin-bottom:24px; flex-wrap:wrap; }
.city-name { font-family:'DM Serif Display',serif; font-size:32px; color:#fff; }
.city-rank { font-size:14px; color:var(--gold); font-weight:600; }

/* Cycle timeline */
.cycle-timeline { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.cycle-dot { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.cycle-dot.funded { background:var(--green); color:#fff; }
.cycle-dot.unfunded { background:var(--surface3); color:var(--text-dim); border:2px dashed var(--border); }

/* Chart containers */
.chart-wrap { position:relative; height:300px; margin:16px 0; }

/* Scrollable table wrapper */
.table-wrap { max-height:500px; overflow-y:auto; border-radius:8px; }
.table-wrap::-webkit-scrollbar { width:6px; }
.table-wrap::-webkit-scrollbar-track { background:var(--surface); }
.table-wrap::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }

/* Recommendation panel */
.reco-panel { background:linear-gradient(135deg,rgba(0,94,184,0.08),rgba(255,199,44,0.08)); border:1px solid var(--border); border-radius:12px; padding:24px; margin-top:20px; }
.reco-panel h3 { font-family:'DM Serif Display',serif; color:var(--gold); margin-bottom:12px; }
.reco-item { padding:8px 0; font-size:14px; border-bottom:1px solid var(--border); }
.reco-item:last-child { border-bottom:none; }

/* Sparkline */
.sparkline { display:inline-flex; align-items:end; gap:2px; height:24px; }
.spark-bar { width:8px; background:var(--accent); border-radius:2px 2px 0 0; transition:height 0.3s; }

/* Footer */
.footer {
  text-align: center;
  padding: 30px 40px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  margin-top: 40px;
}
.footer .brand {
  font-family: 'DM Serif Display', serif;
  font-size: 20px;
  color: var(--text);
  margin-bottom: 6px;
}
.footer .brand span { color: var(--gold); }
.footer .sub {
  font-size: 11px;
  color: rgba(255,255,255,0.3);
  letter-spacing: 1px;
  line-height: 1.8;
}

/* Print */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
  .header { padding: 28px 16px 24px; }
  .header-wordmark { font-size: clamp(1.5rem, 8vw, 2rem); }
  .header-subtitle { font-size: clamp(1rem, 4vw, 1.25rem); margin-bottom: 16px; }
  .header-stats { gap: 20px; }
  .tab-bar { padding: 0 12px; -webkit-overflow-scrolling: touch; }
  .tab-btn { padding: 12px 18px; font-size: 13px; min-height: 44px; }
  .content { padding: 20px 16px; }
  .card { padding: 16px; }
  .city-selector { flex-direction: column; align-items: stretch; gap: 12px; }
  .city-selector select,
  .city-search { min-width: 0 !important; width: 100%; max-width: 100%; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .footer { padding: 24px 16px; }
}
@media (max-width: 420px) {
  .header-stat .val { font-size: 1.5rem; }
}

@media print { .tab-bar { display:none; } .tab-content { display:block !important; page-break-after:always; } }