/* estwarden — Baltic Security Monitor */

/* ── THEME: LIGHT ── */
:root, [data-theme="light"] {
  --bg-0: #f4f4f7;
  --bg-1: #ffffff;
  --bg-2: #eeeef2;
  --bg-hover: #e6e6ec;
  --border: rgba(0,0,0,0.08);
  --border-subtle: rgba(0,0,0,0.04);
  --text-0: #111118;
  --text-1: #40404e;
  --text-2: #70707e;
  --text-3: #a0a0ae;

  --accent: #4a6fa5;
  --accent-soft: rgba(74,111,165,0.07);
  --red: #8b4555;
  --red-soft: rgba(139,69,85,0.06);
  --orange: #9a7040;
  --orange-soft: rgba(154,112,64,0.06);
  --yellow: #887830;
  --yellow-soft: rgba(136,120,48,0.06);
  --green: #407a50;
  --green-soft: rgba(64,122,80,0.06);

  --cat-mil: #8b4555;
  --cat-hyb: #9a7040;
  --cat-mar: #4a6fa5;
  --cat-nato: #4a6fa5;
  --cat-dip: #6a5a95;
  --cat-leg: #7a5c2e;

  --chart-grid: rgba(0,0,0,0.04);
  --chart-text: #a0a0ae;

  --header-bg: rgba(255,255,255,0.80);
  --header-border: rgba(0,0,0,0.06);
  --header-text: #111118;
  --header-dim: #a0a0ae;
  --badge-border: transparent;

  --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* ── THEME: DARK (Taplox palette) ── */
[data-theme="dark"] {
  --bg-0: #22282e;
  --bg-1: #282f36;
  --bg-2: #2f3943;
  --bg-hover: #3a4551;
  --border: transparent;
  --border-subtle: rgba(255,255,255,0.06);
  --text-0: #e4e8ef;
  --text-1: #aab8c5;
  --text-2: #8391a2;
  --text-3: #5d7186;

  --accent: #1a80f8;
  --accent-soft: rgba(26,128,248,0.12);
  --red: #f42557;
  --red-soft: rgba(244,37,87,0.10);
  --orange: #f0934e;
  --orange-soft: rgba(240,147,78,0.10);
  --yellow: #f4c006;
  --yellow-soft: rgba(244,192,6,0.08);
  --green: #17c553;
  --green-soft: rgba(23,197,83,0.10);

  --cat-mil: #f42557;
  --cat-hyb: #f0934e;
  --cat-mar: #63b7e6;
  --cat-nato: #1a80f8;
  --cat-dip: #7942ed;
  --cat-leg: #d4a24e;

  --chart-grid: rgba(255,255,255,0.04);
  --chart-text: #5d7186;

  --header-bg: rgba(34,40,46,0.92);
  --header-border: rgba(255,255,255,0.06);
  --header-text: #e4e8ef;
  --header-dim: #687d92;
  --badge-border: transparent;

  --card-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg-0);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 420;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.2s ease, color 0.2s ease;
}

/* ── TYPE SCALE ── */
/* Display: 22-28px 700  — page titles, big numbers */
/* Body:    14px    420  — default */
/* Label:   12px    600  — section headers, uppercase tracking */
/* Small:   11px    500  — metadata, timestamps, badges */

a { color: var(--text-1); text-decoration: none; }
a:hover { color: var(--text-0); }

/* ── HEADER ── */

header {
  background: var(--header-bg);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--header-border);
  position: sticky;
  top: 0;
  z-index: 10000;
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand-logo {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 8px;
}

h1 {
  font-size: 14px;
  font-weight: 650;
  color: var(--text-0);
  letter-spacing: -0.02em;
}
h1 span { color: var(--text-2); font-weight: 400; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-link {
  font-size: 13px;
  color: var(--text-2) !important;
  font-weight: 450;
  transition: color 0.15s;
}
.header-link:hover { color: var(--text-0) !important; }
.header-link.nav-active { color: var(--text-0) !important; font-weight: 600; }

/* ── Mobile nav — burger + dropdown ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 32px;
  height: 32px;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-toggle:hover { background: var(--bg-hover); }
.nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--text-1);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none;
}
.mobile-nav a {
  display: block;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.mobile-nav a:hover,
.mobile-nav a:active {
  background: var(--bg-hover);
  color: var(--text-0);
}
.mobile-nav a.nav-active {
  color: var(--text-0);
  font-weight: 700;
  background: var(--bg-hover);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language picker */
.lang-picker {
  position: relative;
}
.lang-current {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  transition: all 0.15s;
}
.lang-current:hover { background: var(--bg-hover); }
.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-1);
  border: none;
  border-radius: 8px;
  overflow: hidden;
  z-index: 10001;
  min-width: 120px;
}
.lang-picker.open .lang-dropdown { display: block; }
.lang-dropdown button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 12px;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.lang-dropdown button:hover { background: var(--bg-hover); color: var(--text-0); }

.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  transition: all 0.15s;
}
.theme-toggle:hover { background: var(--bg-hover); color: var(--text-0); }
.theme-toggle svg { width: 15px; height: 15px; }
.icon-sun { display: none; }
.icon-moon { display: block; }
[data-theme="dark"] .icon-sun { display: block; }
[data-theme="dark"] .icon-moon { display: none; }

.threat-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  background: var(--bg-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.threat-pill .dot { width: 7px; height: 7px; }
.threat-pill-green  { color: var(--green); }
.threat-pill-yellow { color: var(--yellow); }
.threat-pill-orange { color: var(--orange); }
.threat-pill-red    { color: var(--red); }

/* ── MAIN ── */

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── DATE NAV ── */

.date-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.date-current {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-updated {
  font-size: 13px;
  font-weight: 450;
  color: var(--text-2);
}
.date-picker {
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
}
.date-chip {
  font-size: 10px;
  padding: 2px 5px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  transition: color 0.1s;
  border-radius: 8px;
}
.date-chip:hover { color: var(--text-1); background: var(--bg-hover); }
.date-chip.active {
  color: var(--text-0);
  font-weight: 600;
}

/* ── STAT CARDS ── */

.status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.stat-card {
  background: var(--bg-1);
  border: none;
  border-radius: 10px;
  padding: 18px 16px 16px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
}
.stat-red::before    { background: var(--red); }
.stat-orange::before { background: var(--orange); }
.stat-yellow::before { background: var(--yellow); }
.stat-green::before  { background: var(--green); }
.stat-num {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.stat-red .stat-num    { color: var(--red); }
.stat-orange .stat-num { color: var(--orange); }
.stat-yellow .stat-num { color: var(--yellow); }
.stat-green .stat-num  { color: var(--green); }
.stat-label {
  font-size: 13px;
  color: var(--text-2);
  margin-top: 6px;
  display: block;
  font-weight: 500;
}

/* ── CARDS ── */

.card {
  background: var(--bg-1);
  border: none;
  border-radius: 12px;
  padding: 22px 24px;
  box-shadow: var(--card-shadow);
}
.card h2 {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-2);
  margin-bottom: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── INDICATORS TABLE ── */

.indicators-table {
  display: flex;
  flex-direction: column;
}
.ind-header, .ind-row {
  display: grid;
  grid-template-columns: 36px 88px 132px 1fr 36px 36px;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.ind-header {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-2);
}
.ind-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--bg-2);
  font-size: 15px;
}
.ind-row:last-child { border-bottom: none; }
.ind-row:hover { background: var(--bg-hover); margin: 0 -20px; padding-left: 20px; padding-right: 20px; }

.ind-col-status { display: flex; justify-content: center; }
.ind-col-label { color: var(--text-0); font-weight: 600; }
.ind-col-finding { color: var(--text-1); font-size: 14px; }
.ind-col-conf { text-align: center; position: relative; }
.conf-badge {
  font-size: 9px;
  letter-spacing: 1px;
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 2px 5px;
  transition: border-color 0.15s;
}
.conf-badge:hover { border-color: var(--border); }
.conf-high { color: var(--green); }
.conf-medium { color: var(--text-2); }
.conf-low { color: var(--text-3); opacity: 0.6; }
.conf-tip {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 50;
  background: var(--card);
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-1);
  width: 260px;
  text-align: left;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.conf-tip strong { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }
.conf-tip-src { color: var(--text-3); font-size: 11px; }
.ind-col-src { text-align: center; }
.ind-col-src a {
  color: var(--text-3);
  font-size: 12px;
}
.ind-col-src a:hover { color: var(--text-0); }

/* Collapsible quiet indicators */
.ind-quiet-group {
  border-top: 1px solid var(--border-subtle);
}
.ind-quiet-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--text-2);
  transition: color .15s;
}
.ind-quiet-toggle:hover { color: var(--text-1); }
.ind-quiet-chevron {
  margin-left: auto;
  font-size: 14px;
  transition: transform .2s;
}
.ind-quiet-group.expanded .ind-quiet-chevron { transform: rotate(90deg); }
.ind-quiet-rows {
  display: none;
}
.ind-quiet-group.expanded .ind-quiet-rows { display: block; }
.ind-row-quiet {
  opacity: 0.55;
}

/* Dots */
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.dot-green  { background: var(--green); }
.dot-yellow { background: var(--yellow); }
.dot-orange { background: var(--orange); }
.dot-red    { background: var(--red); }

/* Category tags */
.cat-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.cat-military   { background: var(--red-soft);    color: var(--cat-mil); }
.cat-hybrid     { background: var(--orange-soft); color: var(--cat-hyb); }
.cat-maritime   { background: rgba(14,94,111,0.07); color: var(--cat-mar); }
.cat-nato       { background: rgba(30,64,175,0.07); color: var(--cat-nato); }
.cat-diplomatic { background: rgba(91,33,182,0.07); color: var(--cat-dip); }
.cat-legislative { background: rgba(122,92,46,0.07); color: var(--cat-leg); }

[data-theme="dark"] .cat-maritime   { background: rgba(99,183,230,0.10); }
[data-theme="dark"] .cat-nato       { background: rgba(26,128,248,0.10); }
[data-theme="dark"] .cat-diplomatic { background: rgba(121,66,237,0.10); }
[data-theme="dark"] .cat-legislative { background: rgba(212,162,78,0.10); }

/* ── CHARTS ── */

.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.chart-card {
  min-height: 260px;
}
.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.chart-header h2 { margin: 0; }
.chart-range {
  display: flex;
  gap: 2px;
  background: var(--bg-secondary, #f3f3f3);
  border-radius: 8px;
  padding: 2px;
}
.range-btn {
  background: none;
  border: none;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #737373);
  border-radius: 8px;
  cursor: pointer;
  transition: all .15s;
}
.range-btn:hover { color: var(--text-primary, #111); }
.range-btn.active {
  background: var(--bg-primary, #fff);
  color: var(--text-primary, #111);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
[data-theme="dark"] .chart-range { background: rgba(255,255,255,.06); }
[data-theme="dark"] .range-btn.active { background: rgba(255,255,255,.1); }
.chart-card canvas {
  width: 100% !important;
  height: 200px !important;
}

/* ── INFO ── */

.info-section {
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 8px;
}
.info-section h2 {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bg-2);
}
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.info-block h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 8px;
}
.info-block p, .info-block li {
  font-size: 15px;
  color: var(--text-1);
  line-height: 1.7;
}
.info-block ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.info-block li {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.info-block li .cat-tag, .info-block li .dot { flex-shrink: 0; }
.info-block li .dot { position: relative; top: 1px; }
.info-block .dim { color: var(--text-2); font-size: 11.5px; margin-top: 8px; }

/* ── EMPTY STATE ── */

.empty-state {
  text-align: center;
  padding: 56px 24px;
}
.empty-state h2 {
  font-size: 15px;
  color: var(--text-0);
  margin-bottom: 6px;
}
.empty-state p { color: var(--text-2); font-size: 13px; }

/* ── FOOTER ── */

footer {
  border-top: 1px solid var(--border-subtle);
  margin-top: 12px;
}
.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-2);
}
.footer-inner a { color: var(--text-3); }
.footer-inner a:hover { color: var(--text-1); }

/* ── PARTNERS ── */
.partners-bar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 18px 24px 14px;
}
.partners-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  background: var(--bg-1);
  border: none;
  border-radius: 8px;
}
.partners-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-3);
  white-space: nowrap;
  flex-shrink: 0;
}
.partners-divider {
  width: 1px;
  height: 24px;
  background: var(--border-subtle);
  flex-shrink: 0;
}
.partners-inner a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
  opacity: .8;
  transition: opacity .15s;
}
.partners-inner a:hover { opacity: 1; }
.partners-inner img { height: 32px; width: auto; display: block; }
.partner-cta {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.3;
}
.partner-cta strong {
  color: var(--text-1);
  font-weight: 700;
}
/* theme-aware partner logos */
[data-theme="dark"] .partner-light { display: none; }
[data-theme="light"] .partner-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .partner-light { display: none; }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .partner-dark { display: none; }
}
@media (max-width: 600px) {
  .partners-inner { flex-wrap: wrap; gap: 10px; padding: 10px 12px; }
  .partners-divider { display: none; }
  .partner-cta { font-size: 10px; }
}

/* ── ECONOMY PAGE ── */

.eco-summary { }
.eco-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.eco-summary-header h2 { margin-bottom: 2px; }
.eco-date {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.eco-summary-text {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.7;
}

.eco-category { }
.eco-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.eco-cat-header h2 { margin-bottom: 0; }
.eco-cat-icon { font-size: 16px; }

.eco-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.eco-metric-card {
  background: var(--bg-2);
  border: none;
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.eco-metric-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.eco-metric-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-0);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.eco-metric-label {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}
.eco-metric-finding {
  font-size: 12px;
  color: var(--text-1);
  line-height: 1.5;
  margin-top: 4px;
}
.eco-metric-src {
  font-size: 11px;
  color: var(--text-3) !important;
  margin-top: 4px;
  align-self: flex-start;
}
.eco-metric-src:hover { color: var(--text-1) !important; }

/* Trend arrows */
.eco-trend {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.eco-trend-up { color: var(--red); }
.eco-trend-down { color: var(--green); }
.eco-trend-stable { color: var(--text-2); }

/* Sentiment colors */
.eco-sentiment-positive { border-left: 3px solid var(--green); }
.eco-sentiment-neutral { border-left: 3px solid var(--text-3); }
.eco-sentiment-tense { border-left: 3px solid var(--orange); }
.eco-sentiment-negative { border-left: 3px solid var(--red); }

/* ── Economy: hero stats ── */
.eco-hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.eco-hero-card {
  background: var(--bg-1);
  border: none;
  border-radius: 10px;
  padding: 18px 16px 14px;
  position: relative;
  overflow: hidden;
}
.eco-hero-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--border-subtle);
}
.eco-hero-label {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: block;
}
.eco-hero-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.eco-hero-num {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.eco-hero-arrow { font-size: 16px; font-weight: 700; }
.eco-hero-sub {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.4;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eco-hero-date {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}
.eco-stat-green { color: var(--green); }
.eco-stat-red { color: var(--red); }
.eco-stat-neutral { color: var(--text-0); }

/* Sentiment accent bar */
.eco-hero-sentiment::after { background: var(--text-3); }
.eco-hero-sentiment-green::after { background: var(--green); }
.eco-hero-sentiment-green .eco-hero-num { color: var(--green); }
.eco-hero-sentiment-orange::after { background: var(--orange); }
.eco-hero-sentiment-orange .eco-hero-num { color: var(--orange); }
.eco-hero-sentiment-red::after { background: var(--red); }
.eco-hero-sentiment-red .eco-hero-num { color: var(--red); }
.eco-hero-sentiment-neutral .eco-hero-num { color: var(--text-1); }

/* ── Economy: summary ── */
.eco-summary-text {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.7;
  padding: 14px 16px;
  background: var(--bg-2);
  border-radius: 8px;
  border-left: 3px solid var(--text-3);
}

/* ── Economy: category sections ── */
.eco-cat-section { }
.eco-cat-section h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.eco-cat-icon { font-size: 14px; }
.eco-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

/* ── Economy: metric cell ── */
.eco-metric {
  background: var(--bg-2);
  border: none;
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.eco-metric-head {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 2px;
}
.eco-metric-val {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.eco-metric-arrow { font-size: 14px; font-weight: 700; }
.eco-metric-name {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
}
.eco-metric-desc {
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.45;
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eco-metric-link {
  font-size: 10px;
  color: var(--text-3) !important;
  margin-top: 4px;
}
.eco-metric-link:hover { color: var(--text-1) !important; }

/* ── Economy: colors ── */
.eco-color-green { color: var(--green) !important; }
.eco-color-red { color: var(--red) !important; }
.eco-color-orange { color: var(--orange) !important; }
.eco-color-neutral { color: var(--text-2) !important; }

/* ── Economy: method ── */
.eco-method p {
  font-size: 12.5px;
  color: var(--text-1);
  line-height: 1.7;
  margin-top: 6px;
}

/* ── Economy: responsive ── */
@media (max-width: 768px) {
  .eco-hero-grid { grid-template-columns: repeat(2, 1fr); }
  .eco-hero-num { font-size: 24px; }
  .eco-hero-card { padding: 14px 12px 12px; }
  .eco-cat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .eco-hero-grid { gap: 6px; }
  .eco-hero-card { padding: 12px 10px 10px; }
  .eco-hero-num { font-size: 20px; }
  .eco-hero-sub { font-size: 10px; -webkit-line-clamp: 1; }
  .eco-metric { padding: 10px 12px; }
  .eco-metric-val { font-size: 16px; }
}

/* Economy ticker CTA */
.eco-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--bg-1);
  border: none;
  border-radius: 8px;
  text-decoration: none !important;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, background 0.15s;
  overflow-x: auto;
  white-space: nowrap;
}
.eco-ticker:hover { border-color: var(--border); background: var(--bg-hover); }
.eco-ticker-label {
  font-weight: 600;
  color: var(--text-0);
  font-size: 12px;
  flex-shrink: 0;
}
.eco-ticker-sep { color: var(--border); flex-shrink: 0; }
.eco-ticker-item {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  color: var(--text-0);
  font-weight: 600;
}
.eco-ticker-dim {
  color: var(--text-2);
  font-weight: 500;
  font-size: 11px;
}
.eco-ticker-item .eco-trend { font-size: 11px; margin-left: 1px; }
.eco-ticker-arrow {
  color: var(--text-3);
  margin-left: auto;
  flex-shrink: 0;
  transition: color 0.15s;
}
.eco-ticker:hover .eco-ticker-arrow { color: var(--text-0); }
.eco-ticker-sentiment-tense { color: var(--orange) !important; }
.eco-ticker-sentiment-negative { color: var(--red) !important; }
.eco-ticker-sentiment-positive { color: var(--green) !important; }

@media (max-width: 768px) {
  .eco-metrics { grid-template-columns: 1fr; }
  .eco-metric-card { padding: 12px; }
  .eco-metric-value { font-size: 16px; }
}

/* ── GUIDE PAGE ── */

.guide-section { }
.guide-section h2 { margin-bottom: 16px; }
.guide-section h3 {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-0);
  margin: 20px 0 8px;
  letter-spacing: -0.01em;
}
.guide-prose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guide-prose p {
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.7;
}
.guide-prose strong { color: var(--text-0); }
.guide-prose code {
  font-size: 12px;
  background: var(--bg-2);
  border: none;
  padding: 1px 5px;
  border-radius: 8px;
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}
.guide-link {
  color: var(--text-0) !important;
  font-weight: 500;
  font-size: 13px;
}
.guide-link:hover { text-decoration: underline !important; }

/* TOC grid */
.guide-toc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.toc-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: none;
  border-radius: 8px;
  transition: all 0.15s;
}
.toc-item:hover {
  background: var(--bg-hover);
  border-color: var(--border);
  color: var(--text-0);
}
.toc-icon {
  font-size: 20px;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
}
.toc-item div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.toc-item strong {
  font-size: 13px;
  color: var(--text-0);
}
.toc-item span {
  font-size: 11.5px;
  color: var(--text-2);
}

/* Code blocks */
.code-block {
  background: var(--bg-2);
  border: none;
  border-radius: 10px;
  overflow: hidden;
  margin: 4px 0;
}
.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--bg-2);
  font-size: 11px;
  color: var(--text-2);
}
.copy-btn {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.copy-btn:hover {
  background: var(--bg-hover);
  color: var(--text-0);
}
.code-block pre {
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0;
}
.code-block code {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-1);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}

/* API table */
.api-table {
  border: none;
  border-radius: 8px;
  overflow: hidden;
}
.api-row {
  display: grid;
  grid-template-columns: 56px 200px 1fr;
  gap: 8px;
  padding: 8px 14px;
  align-items: center;
  font-size: 12.5px;
  border-bottom: 1px solid var(--bg-2);
}
.api-row:last-child { border-bottom: none; }
.api-header {
  background: var(--bg-2);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
}
.api-method {
  font-size: 11px;
  font-weight: 600;
  color: var(--green);
}
.api-row code {
  font-size: 12px;
  color: var(--text-0);
  font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}
.api-row span:last-child {
  color: var(--text-1);
}

@media (max-width: 768px) {
  .guide-toc { grid-template-columns: 1fr; }
  .guide-section h2 { font-size: 14px; }
  .guide-section h3 { font-size: 12px; margin-top: 16px; }
  .guide-prose p { font-size: 13px; }
  .code-block pre { padding: 10px 12px !important; }
  .code-block code { font-size: 11px; }
  .api-row { grid-template-columns: 48px 1fr; }
  .api-row span:last-child { display: none; }
  .api-header span:last-child { display: none; }
  .toc-item { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .guide-prose p { font-size: 12.5px; }
  .toc-icon { font-size: 16px; width: 24px; }
  .toc-item strong { font-size: 12px; }
  .toc-item span { font-size: 10.5px; }
  .api-row { font-size: 11px; padding: 6px 10px; }
}

/* ── COOKIE CONSENT ── */

#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}
.cookie-inner {
  pointer-events: auto;
  background: var(--bg-1);
  border: none;
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
.cookie-inner p {
  font-size: 12.5px;
  color: var(--text-1);
  line-height: 1.5;
  flex: 1;
}
.cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
  align-items: center;
}
.cookie-policy-link {
  font-size: 11px;
  color: var(--text-3);
  text-decoration: underline;
  margin-right: 4px;
}
.cookie-policy-link:hover { color: var(--text-1); }
.cookie-actions button {
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
#cookie-decline {
  background: transparent;
  color: var(--text-2);
}
#cookie-decline:hover {
  background: var(--bg-hover);
  color: var(--text-0);
}
#cookie-accept {
  background: var(--text-0);
  color: var(--bg-0);
  border-color: var(--text-0);
}
#cookie-accept:hover {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .cookie-inner {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* ── RESPONSIVE ── */

@media (max-width: 768px) {
  /* Hide desktop nav, show burger */
  .desktop-nav { display: none !important; }
  .nav-toggle { display: flex; }
  .mobile-nav.open {
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border-top: 1px solid var(--header-border);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    padding: 4px 0;
  }
  header { position: sticky; }
  .header-inner { height: auto; padding: 12px 16px; }
  main { padding: 16px; gap: 14px; }

  /* Stat cards: 2x2, taller for breathing room */
  .status-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-card { padding: 14px 12px 12px; }

  /* Charts stack */
  .charts-row { grid-template-columns: 1fr; gap: 14px; }

  /* Info: single column, each block gets its own card frame */
  .info-grid { grid-template-columns: 1fr; gap: 0; }
  .info-section { padding: 0; }
  .info-section h2 { 
    padding: 16px 16px 12px; 
    border-bottom: none; 
    font-size: 14px;
  }
  .info-block {
    background: var(--bg-1);
    border: none;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 0 0 8px;
  }
  .info-block h3 { font-size: 13px; margin-bottom: 6px; }
  .info-block p, .info-block li { font-size: 13px; }
  .info-block ul { gap: 10px; display: grid; grid-template-columns: auto 1fr; }
  .info-block li {
    display: contents;
    line-height: 1.6;
  }
  .info-block li .cat-tag { align-self: start; margin-top: 2px; }
  .info-block li .dot { position: static; align-self: start; margin-top: 7px; }
  .info-block li > span:last-child,
  .info-block li > span:not(.cat-tag):not(.dot) { }
  /* dot/tag col lines up, text col has consistent left edge */

  /* Indicators: card-per-row layout */
  .ind-header { display: none; }
  .indicators-table { gap: 6px; }
  .ind-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    border-bottom: 1px solid var(--bg-2);
    background: var(--bg-2);
  }
  .ind-row:hover { margin: 0; padding: 10px 12px; }
  .ind-col-status { justify-content: flex-start; }
  .ind-col-finding { display: block !important; font-size: 12px; color: var(--text-2); }
  .ind-col-src { display: block !important; text-align: left; }
  .ind-col-src a { font-size: 11px; }

  /* Row top line: dot + category + label inline */
  .ind-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto auto;
    gap: 4px 8px;
  }
  .ind-col-status { grid-row: 1; grid-column: 1; align-self: center; }
  .ind-col-cat { grid-row: 1; grid-column: 2; align-self: center; }
  .ind-col-label { grid-row: 1; grid-column: 3; align-self: center; font-size: 13px; }
  .ind-col-finding { grid-row: 2; grid-column: 1 / -1; padding-left: 0; margin-top: 2px; }
  .ind-col-src { grid-row: 1; grid-column: 3; justify-self: end; }

  /* Date nav */
  .date-picker { display: none; }
  .date-current { font-size: 14px; }
}

@media (max-width: 480px) {
  main { padding: 10px; gap: 10px; }

  /* Header: compact brand, nav via hamburger */
  .header-inner { padding: 10px 12px; gap: 8px; }
  h1 { font-size: 12px; }
  h1 span { display: none; }

  /* Stat cards: still 2x2 but compact */
  .status-row { gap: 6px; }
  .stat-card { padding: 12px 10px 10px; }
  .stat-num { font-size: 24px; }
  .stat-label { font-size: 10px; }

  /* Cards */
  .card { padding: 12px 14px; }
  .card h2 { font-size: 14px; margin-bottom: 10px; }

  /* Indicators card mode */
  .ind-row { padding: 8px 10px; }
  .ind-col-label { font-size: 12px; }
  .cat-tag { font-size: 9px; }

  /* Info blocks */
  .info-block { padding: 12px 14px; }

  /* Threat pill in header */
  .threat-pill { font-size: 10px; padding: 3px 8px; }
  .threat-pill .dot { width: 6px; height: 6px; }

  /* Footer */
  .footer-inner { flex-direction: column; gap: 6px; text-align: center; padding: 12px; }

  .cti-section { flex-direction: column; }
  .cti-bars { min-width: unset; }
  .fimi-banner-inner { flex-direction: column; gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSITE THREAT INDEX (CTI)
   ═══════════════════════════════════════════════════════════════════════ */

.cti-section {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 20px; margin-bottom: 12px;
  background: var(--surface-0); border: none;
  border-radius: var(--radius);
}
.cti-gauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cti-ring { position: relative; width: 100px; height: 100px; }
.cti-svg { width: 100%; height: 100%; }
.cti-arc { transition: stroke-dasharray 0.8s ease; }
[data-level="green"] .cti-arc { stroke: #22c55e; }
[data-level="yellow"] .cti-arc { stroke: #eab308; }
[data-level="orange"] .cti-arc { stroke: #f97316; }
[data-level="red"] .cti-arc { stroke: #ef4444; }
.cti-num {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -55%);
  font-size: 28px; font-weight: 800; color: var(--text-0);
}
.cti-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, 45%);
  font-size: 10px; color: var(--text-3);
}
.cti-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.cti-trend { font-weight: 600; }
.cti-trend-rising { color: #ef4444; }
.cti-trend-falling { color: #22c55e; }
.cti-trend-stable { color: var(--text-2); }
.cti-level-name { font-weight: 700; text-transform: uppercase; font-size: 11px; color: var(--text-2); }

.cti-bars { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 6px; }
.cti-bar-row { display: flex; align-items: center; gap: 8px; }
.cti-bar-label { width: 72px; font-size: 11px; font-weight: 600; color: var(--text-2); text-align: right; }
.cti-bar-track { flex: 1; height: 10px; background: var(--surface-1); border-radius: 8px; overflow: hidden; }
.cti-bar-fill { height: 100%; border-radius: 8px; transition: width 0.6s ease; min-width: 2px; }
.cti-bar-security { background: #3b82f6; }
.cti-bar-fimi { background: #9b59b6; }
.cti-bar-hybrid { background: #f97316; }
.cti-bar-econ { background: #22c55e; }
.cti-bar-val { width: 48px; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }

.cti-explainer {
  width: 100%; margin-top: 4px; padding: 8px 12px;
  background: var(--surface-1); border-radius: 8px;
  font-size: 12px; color: var(--text-1); line-height: 1.5;
  display: flex; gap: 8px; align-items: flex-start;
}
.cti-explainer-icon { font-size: 14px; flex-shrink: 0; }

/* ── FIMI Banner ── */
.fimi-banner { border-left: 4px solid #9b59b6; margin-bottom: 12px; }
.fimi-banner-inner {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.fimi-banner-left { display: flex; align-items: center; gap: 8px; }
.fimi-icon { font-size: 20px; }
.fimi-level {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  margin-left: 6px;
}
.fimi-level-low { background: rgba(34,197,94,0.1); color: #22c55e; }
.fimi-level-moderate { background: rgba(234,179,8,0.1); color: #eab308; }
.fimi-level-elevated { background: rgba(249,115,22,0.1); color: #f97316; }
.fimi-level-high { background: rgba(239,68,68,0.1); color: #ef4444; }
.fimi-banner-detail { display: flex; gap: 12px; font-size: 12px; color: var(--text-2); flex-wrap: wrap; }
.fimi-banner-detail span { white-space: nowrap; }
.fimi-learn-more { margin-left: auto; font-size: 11px; color: #9b59b6; font-weight: 600; white-space: nowrap; }

/* ── Review queue ── */
.review-card { padding: 12px 16px; margin-bottom: 8px; border-left: 3px solid var(--border); transition: border-color 0.2s; }
.review-card:hover { border-left-color: #3b82f6; }
.review-actions { display: flex; gap: 6px; margin-top: 8px; }
.review-actions button { font-size: 11px; padding: 4px 10px; border-radius: 10px; cursor: pointer; border: none; background: var(--surface-1); color: var(--text-1); }
.review-actions button:hover { background: var(--surface-0); }
.review-actions .btn-confirm { border-color: #22c55e; color: #22c55e; }
.review-actions .btn-confirm:hover { background: rgba(34,197,94,0.1); }
.review-actions .btn-reject { border-color: #ef4444; color: #ef4444; }
.review-actions .btn-reject:hover { background: rgba(239,68,68,0.1); }
.review-tag { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 700; color: #fff; margin-right: 3px; }
.review-tag-n1 { background: #e74c3c; } .review-tag-n2 { background: #e67e22; }
.review-tag-n3 { background: #f1c40f; } .review-tag-n4 { background: #9b59b6; }
.review-tag-n5 { background: #3498db; }

/* ── WIDGET DESCRIPTIONS ── */
/* Consistent description text under widget titles */
.wdesc {
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.4;
  margin-top: 2px;
  margin-bottom: 4px;
}

/* Help tooltip — info icon with popover */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 9px;
  font-weight: 700;
  cursor: help;
  flex-shrink: 0;
  margin-left: 4px;
  vertical-align: middle;
  transition: background 0.12s, color 0.12s;
  user-select: none;
  -webkit-user-select: none;
}
.help-tip:hover,
.help-tip:focus {
  background: var(--bg-hover);
  color: var(--text-1);
}
.help-tip:hover .help-bubble,
.help-tip:focus .help-bubble {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.help-bubble {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--bg-1);
  border: 1px solid var(--bg-2);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 11px;
  font-weight: 420;
  color: var(--text-2);
  line-height: 1.5;
  width: max-content;
  max-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease;
  z-index: 1000;
  pointer-events: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}
.help-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--bg-2);
}

/* Guide box — visible explanation panel */
.guide-box {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 11px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 12px;
}
.guide-box strong {
  color: var(--text-1);
}
.guide-box-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  margin-right: 6px;
  flex-shrink: 0;
  vertical-align: middle;
}

/* Mobile: position tooltips better */
@media (max-width: 600px) {
  .help-bubble {
    left: auto;
    right: -8px;
    transform: translateY(4px);
    max-width: 200px;
  }
  .help-tip:hover .help-bubble,
  .help-tip:focus .help-bubble {
    transform: translateY(0);
  }
  .help-bubble::after {
    left: auto;
    right: 12px;
    transform: none;
  }
  .guide-box {
    font-size: 10px;
    padding: 10px 12px;
  }
}

/* ── Satellite gallery scroll strip ── */
#sat-strip::-webkit-scrollbar { display: none; }

/* Lightbox transitions */
#sat-lightbox img#sat-lb-img {
  transition: opacity .2s ease;
}
@media (max-width: 600px) {
  #sat-lightbox > div:first-child { padding: 10px 12px !important; }
  #sat-lightbox > div:first-child > div:first-child > div:first-of-type { font-size: 13px !important; }
  #sat-lightbox > div:last-child { padding: 6px 8px 8px !important; }
  #sat-lightbox .sat-lb-thumb { width: 42px !important; height: 28px !important; }
  #sat-lb-prev, #sat-lb-next { width: 36px !important; height: 36px !important; font-size: 22px !important; }
  #sat-lightbox > div:nth-child(4) { inset: 50px 12px 70px 12px !important; }
  .sat-thumb { flex: 0 0 120px !important; }
  .sat-thumb img { height: 72px !important; }
}

/* ═══ MOBILE AUDIT FIXES (PRD 4.1) ═══ */

/* ── 4.1.1: Global mobile base — prevent overflow, enforce minimum text ── */
@media (max-width: 500px) {
  html { font-size: 14px; }
  body { overflow-x: hidden; min-font-size: 11px; -webkit-text-size-adjust: 100%; }

  /* All panels: no horizontal overflow */
  .pnl, .card, .camp-section, .guide-box, .origin {
    max-width: 100vw;
    overflow-x: hidden;
    word-break: break-word;
  }

  /* Ensure minimum 11px for body text */
  .pnl-l, .sig-source, .sig-pills, .eco-metric-label,
  .eco-metric-finding, .src-legend, .footer-inner span,
  .camp-meta, .camp-stat-label {
    font-size: max(11px, inherit);
  }
}

/* ── 4.1.2: Satellite gallery swipe — better touch targets ── */
#sat-strip {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
/* sat-thumb is combined with sat-card on gallery items */
.sat-thumb {
  scroll-snap-align: start;
  touch-action: pan-x;
  flex: 0 0 180px !important;
  min-width: 180px;
}
@media (max-width: 500px) {
  .sat-thumb { flex: 0 0 150px !important; min-width: 150px; }
  .sat-thumb img { height: 80px !important; border-radius: 6px; }
}

/* ── 4.1.3: Lightbox — larger touch targets for nav ── */
@media (max-width: 600px) {
  #sat-lb-prev, #sat-lb-next {
    width: 48px !important;
    height: 48px !important;
    font-size: 26px !important;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 4.1.4: Sensor grid collapse to single column below 500px ── */
@media (max-width: 500px) {
  .src-grid { grid-template-columns: 1fr !important; }
  .sat-site-grid { grid-template-columns: 1fr !important; }
  .camp-grid { grid-template-columns: 1fr !important; }
  .eco-hero-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── 4.1.5: Podcast player — iOS Safari audio fixes ── */
@media (max-width: 500px) {
  #pod-row {
    max-width: 100vw;
    overflow: hidden;
  }
  /* Larger touch target for play button */
  #pod-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .pod-speed-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 4px 8px !important;
  }
}

/* ── 4.1.6: Intelligence map — touch-friendly controls ── */
@media (max-width: 600px) {
  .map-ctrls {
    flex-wrap: wrap;
    bottom: 4px !important;
    left: 4px !important;
    gap: 3px !important;
  }
  .map-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    min-height: 32px;
    touch-action: manipulation;
  }
  .info-legend {
    bottom: 70px !important;
    left: 4px !important;
    max-width: 170px;
    font-size: 9px;
  }
  /* Leaflet controls — bigger touch targets */
  .leaflet-control-zoom a {
    width: 32px !important;
    height: 32px !important;
    line-height: 30px !important;
    font-size: 16px !important;
  }
  /* Drawer: full width, more content */
  .drawer {
    max-height: 250px !important;
    padding: 10px 12px !important;
  }
  .drawer-body {
    grid-template-columns: 1fr !important;
  }
}

/* ── 4.1.7: All pages — compact on small screens ── */
@media (max-width: 375px) {
  /* iPhone SE — tightest layout */
  body { font-size: 13px; }
  .dash { padding: 6px 8px 20px !important; }
  .intel-page { padding: 6px 8px 20px !important; }
  .camp-page { padding: 6px 8px 20px !important; }

  .pnl { padding: 10px !important; }
  .pnl-v { font-size: 18px !important; }
  .pnl-l { font-size: 11px !important; }

  .camp-title { font-size: 16px !important; }

  /* Header compact */
  .brand-logo { width: 20px !important; height: 20px !important; }
  .brand h1 { font-size: 13px !important; }

  /* Campaign cards */
  .dash-grid { gap: 8px !important; }

  /* Stat cards compact */
  .istat-v { font-size: 16px !important; }
  .istat { padding: 8px 10px !important; min-width: 80px !important; }
}

/* ── 4.1.9: Font size enforcement — nothing below 11px on mobile ── */
@media (max-width: 600px) {
  /* Ensure readable text on all elements */
  .wdesc, .istat-l, .lfresh, .lcnt, .stier,
  .fr-dot + *, .anal-meta, .pp-meta,
  .eco-date, .eco-metric-trend {
    font-size: max(11px, inherit) !important;
  }

  /* Sidebar list items — readable */
  .slist li { font-size: max(11px, 12px); padding: 5px 0; }
  .sn { font-size: max(11px, 12px); }
  .sb { font-size: max(9px, 9px); }

  /* Footer */
  .footer-inner { font-size: 11px; }
  .footer-inner a { font-size: 11px; }
}

/* ── Performance: extracted inline styles (PRD 4.2.8) ── */

/* Satellite gallery scroll strip */
.sat-scroll-strip { display:flex;gap:10px;overflow-x:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none; }
.sat-scroll-strip::-webkit-scrollbar { display:none; }

/* Satellite card in scroll strip */
.sat-card { flex:0 0 180px;cursor:pointer;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.08);transition:all .2s;position:relative;background:#111418; }
.sat-card:hover { border-color:#1a80f8;transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.4); }

/* Satellite card overlay pills */
.sat-pill { position:absolute;padding:1px 6px;border-radius:4px;background:rgba(0,0,0,.65);font-size:8px;font-weight:600; }
.sat-pill-level { top:6px;right:6px;font-weight:700;letter-spacing:.3px; }
.sat-pill-cloud { top:6px;left:6px; }

/* Satellite card site name overlay */
.sat-card-name { position:absolute;bottom:4px;left:6px;right:6px;font-size:11px;font-weight:700;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* Satellite card gradient overlay */
.sat-card-gradient { position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(transparent,rgba(0,0,0,.7)); }

/* Lightbox */
.sat-lb-overlay { display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:99999;background:rgba(0,0,0,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); }
.sat-lb-nav { position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.1);border:none;color:#fff;font-size:28px;width:44px;height:44px;border-radius:50%;cursor:pointer;z-index:2;transition:background .15s; }
.sat-lb-nav:hover { background:rgba(255,255,255,.25); }

/* Gallery strip scroll button */
.sat-strip-btn { background:var(--bg-0);border:1px solid var(--border-subtle);border-radius:6px;width:28px;height:24px;cursor:pointer;color:var(--text-2);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center; }

/* Lightbox thumbnail strip */
.sat-lb-strip { position:absolute;bottom:0;left:0;right:0;padding:10px 20px 14px;background:linear-gradient(transparent,rgba(0,0,0,.7));display:flex;gap:8px;overflow-x:auto;justify-content:center;scrollbar-width:none;-ms-overflow-style:none; }
.sat-lb-strip::-webkit-scrollbar { display:none; }
.sat-lb-strip-img { width:72px;height:48px;object-fit:cover;border-radius:4px;border:2px solid transparent;transition:border-color .15s;display:block; }

/* Site grid items (sat sites) */
.sat-site-item { text-decoration:none;display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:8px;transition:all .12s;border:1px solid var(--border-subtle); }
.sat-site-item:hover { transform:translateY(-1px);box-shadow:0 2px 6px rgba(0,0,0,.08); }
.sat-site-item-high { border-color:var(--red);background:var(--red-soft); }
.sat-site-item-high:hover { border-color:var(--red);box-shadow:0 2px 8px rgba(239,68,68,.15); }
.sat-site-item-mod { border-color:var(--orange);background:color-mix(in srgb, var(--orange) 8%, var(--bg-1)); }
.sat-site-item-mod:hover { border-color:var(--orange);box-shadow:0 2px 8px rgba(249,115,22,.12); }
.sat-site-item-low { border-color:var(--border-subtle);background:var(--bg-1);opacity:.5; }
.sat-site-item-low:hover { opacity:.8;border-color:var(--text-3); }
.sat-site-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.sat-site-name { font-size:10px;font-weight:600;color:var(--text-0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1; }

/* Campaign cards */
.campaign-card { padding:12px 14px;background:var(--bg-0);border-radius:8px;border-left:3px solid var(--text-3); }
.campaign-card-critical { border-left-color:var(--red); }
.campaign-card-high { border-left-color:var(--orange); }
.campaign-card-medium { border-left-color:var(--yellow); }

/* Common utility styles */
.fs-9-muted { font-size:9px;color:var(--text-3); }
.fs-8-muted { font-size:8px;color:var(--text-3); }
.flex-center { display:flex;align-items:center; }

/* GitHub icon in header */
.header-gh { color:var(--text-2); display:flex; align-items:center; padding:4px; transition:color .15s; }
.header-gh:hover { color:var(--text-0); }
/* GitHub icon in footer */
.footer-gh { display:inline-flex; align-items:center; vertical-align:middle; }