:root {
  --deep-navy: #102a43;
  --navy-2: #173a5e;
  --industrial-blue: #2563a8;
  --airflow-cyan: #2cb7c9;
  --safety-amber: #f5a623;
  --critical-red: #d64545;
  --opportunity-green: #2f855a;
  --ai-purple: #6b46c1;
  --background-grey: #f4f7fa;
  --card-white: #ffffff;
  --border-grey: #d9e2ec;
  --body-text: #243b53;
  --muted: #627d98;
  --shadow: 0 18px 45px rgba(16, 42, 67, 0.10);
  --shadow-soft: 0 8px 22px rgba(16, 42, 67, 0.08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 12px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at top left, rgba(44, 183, 201, 0.14), transparent 32rem),
    linear-gradient(180deg, #eef5fb 0%, var(--background-grey) 44%, #eef2f7 100%);
  color: var(--body-text);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.45;
}

a { color: var(--industrial-blue); }

button { font: inherit; }

.scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--deep-navy), #0d1f33 62%, #123f63);
  color: #fff;
  opacity: 1;
  visibility: visible;
  transition: opacity 420ms ease, visibility 420ms ease;
}

.scan-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}

.scan-card {
  width: min(620px, calc(100vw - 2rem));
  display: flex;
  gap: 1.25rem;
  align-items: center;
  padding: 2rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 28px;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 30px 90px rgba(0,0,0,0.35);
}

.scan-mark,
.brand-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--industrial-blue), var(--airflow-cyan));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.05em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

.scan-eyebrow,
.eyebrow {
  margin: 0 0 0.35rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.095em;
  text-transform: uppercase;
}

.scan-eyebrow { color: rgba(255,255,255,0.72); }
.scan-card h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.4rem); }

.topbar {
  width: min(1440px, calc(100% - 2rem));
  margin: 1.5rem auto 1rem;
  padding: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: center;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(217,226,236,0.9);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.brand-block {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-block h1 {
  margin: 0;
  color: var(--deep-navy);
  font-size: clamp(1.45rem, 3vw, 2rem);
  letter-spacing: -0.03em;
}

.subtitle { margin: 0.2rem 0 0; color: var(--muted); }

.header-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: 600px;
}

.meta-pill,
.meta-note {
  padding: 0.48rem 0.7rem;
  border-radius: 999px;
  background: #eef5fb;
  border: 1px solid var(--border-grey);
  color: var(--deep-navy);
  font-size: 0.78rem;
  font-weight: 700;
}

.meta-pill.strong { background: var(--deep-navy); color: #fff; border-color: var(--deep-navy); }
.meta-pill.confidence { background: #e7f8f9; border-color: rgba(44,183,201,0.4); }
.meta-note { background: #fff8e9; color: #7a4b00; border-color: rgba(245,166,35,0.45); }

.dashboard-shell {
  width: min(1440px, calc(100% - 2rem));
  margin: 0 auto 2rem;
}

.hero-card,
.panel,
.kpi-card {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(217,226,236,0.95);
  box-shadow: var(--shadow-soft);
}

.hero-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: linear-gradient(180deg, var(--airflow-cyan), var(--industrial-blue), var(--opportunity-green));
}

.hero-copy h2 {
  margin: 0;
  max-width: 1020px;
  color: var(--deep-navy);
  font-size: clamp(1.35rem, 3vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.hero-copy p:last-child {
  max-width: 980px;
  color: var(--muted);
  font-size: 1.03rem;
}

.briefing-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 0.8rem;
  min-width: 360px;
}

.briefing-chip {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: 20px;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
}

.briefing-chip span { font-size: 2.1rem; font-weight: 850; line-height: 1; }
.briefing-chip small { font-weight: 700; }
.briefing-chip.risk { background: linear-gradient(145deg, var(--critical-red), #9f2f2f); }
.briefing-chip.opportunity { background: linear-gradient(145deg, var(--opportunity-green), #1f6743); }
.briefing-chip.decision { background: linear-gradient(145deg, var(--industrial-blue), var(--deep-navy)); }

.score-strip {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.kpi-card {
  padding: 1rem;
  border-radius: var(--radius-md);
  position: relative;
  overflow: hidden;
}

.kpi-card::before,
.domain-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--industrial-blue);
}

.kpi-topline {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.trend {
  color: var(--deep-navy);
  background: #eef5fb;
  padding: 0.1rem 0.38rem;
  border-radius: 999px;
}

.kpi-card strong {
  display: block;
  margin-top: 0.7rem;
  color: var(--deep-navy);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.05em;
}

.kpi-card p { margin: 0.1rem 0 0.8rem; color: var(--muted); font-weight: 700; }
.kpi-bar { height: 5px; border-radius: 999px; background: #e6edf4; overflow: hidden; }
.kpi-bar span { display: block; height: 100%; width: 76%; background: var(--industrial-blue); }

.layout-grid { display: grid; gap: 1rem; margin-top: 1rem; }
.primary-grid { grid-template-columns: minmax(0, 1.7fr) minmax(340px, 0.85fr); }
.secondary-grid { grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.75fr); }
.tertiary-grid { grid-template-columns: minmax(0, 1.2fr) minmax(380px, 0.8fr); }

.panel {
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2vw, 1.25rem);
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.panel-header.compact { align-items: center; }
.panel-header h2 { margin: 0; color: var(--deep-navy); font-size: 1.35rem; letter-spacing: -0.02em; }

.filter-chips,
.view-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-end;
}

.filter-chip,
.toggle-button,
.primary-button,
.detail-button {
  border: 1px solid var(--border-grey);
  background: #fff;
  color: var(--body-text);
  border-radius: 999px;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.filter-chip:hover,
.toggle-button:hover,
.primary-button:hover,
.detail-button:hover { transform: translateY(-1px); }
.filter-chip.active,
.toggle-button.active,
.primary-button { background: var(--deep-navy); color: #fff; border-color: var(--deep-navy); }

.signals-list { display: grid; gap: 0.85rem; }

.signal-card {
  padding: 1rem;
  border: 1px solid var(--border-grey);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #fff, #fbfdff);
}

.signal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.6rem;
}

.tag,
.urgency,
.confidence,
.rank,
.world-card span,
.source-item span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.24rem 0.52rem;
  font-size: 0.72rem;
  font-weight: 850;
}

.tag { color: var(--industrial-blue); background: #eef6ff; }
.urgency.high { color: #8a1f1f; background: #ffecec; }
.urgency.medium { color: #7a4b00; background: #fff4dc; }
.urgency.low { color: #1f6743; background: #e9f7ef; }
.confidence { color: #0d5963; background: #e7f8f9; position: relative; }
.confidence:hover::after { content: attr(data-tooltip); position: absolute; left: 0; top: calc(100% + 0.45rem); width: 230px; padding: 0.55rem; border-radius: 10px; background: var(--deep-navy); color: #fff; box-shadow: var(--shadow-soft); z-index: 5; }

.signal-card h3,
.action-card h3,
.domain-card h3,
.watch-item h3,
.world-card h3,
.decision-box h3 {
  margin: 0 0 0.45rem;
  color: var(--deep-navy);
  line-height: 1.25;
}

.signal-card p { margin: 0 0 0.7rem; color: var(--body-text); }
.action-line { margin: 0.75rem 0; padding: 0.72rem; border-radius: 12px; background: #f6f9fc; border: 1px solid #e7eef6; }
.signal-detail { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border-grey); color: var(--muted); }

.actions-list { display: grid; gap: 0.8rem; }
.action-card,
.decision-box {
  border: 1px solid var(--border-grey);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 1rem;
}

.action-card span {
  display: inline-flex;
  margin-bottom: 0.45rem;
  color: #fff;
  background: var(--industrial-blue);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.action-card p,
.decision-box p { margin: 0; color: var(--muted); }
.decision-box { margin-top: 0.9rem; background: linear-gradient(180deg, #fff8e9, #fff); border-color: rgba(245,166,35,0.45); }

.pulse { animation: pulse 900ms ease 2; }
@keyframes pulse { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 5px rgba(37,99,168,0.15); } }

.radar-panel { margin-top: 1rem; }
.radar-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem; }

.domain-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  padding: 1rem;
  border: 1px solid var(--border-grey);
  border-radius: var(--radius-md);
  background: #fff;
  position: relative;
  overflow: hidden;
}

.domain-code {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef5fb;
  color: var(--deep-navy);
  font-weight: 900;
}

.domain-headline {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
}

.domain-headline span { color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.domain-message { margin: 0 0 0.65rem; color: var(--body-text); }
.domain-highlight { margin: 0; color: var(--muted); font-size: 0.92rem; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 820px; }
th, td { padding: 0.75rem 0.65rem; border-bottom: 1px solid #e8eef5; text-align: left; vertical-align: top; font-size: 0.9rem; }
th { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.rank { background: var(--deep-navy); color: #fff; }

.watch-list { display: grid; gap: 0.75rem; }
.watch-item { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--border-grey); border-radius: var(--radius-md); background: #fff; }
.watch-item p { margin: 0; color: var(--muted); font-size: 0.86rem; }
.watch-score { text-align: right; }
.watch-score span { display: block; color: var(--deep-navy); font-size: 1.45rem; font-weight: 900; line-height: 1; }
.watch-score small { color: var(--muted); font-weight: 800; }
.mini-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: #e6edf4; overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--industrial-blue), var(--safety-amber)); }

.world-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.world-card { padding: 0.95rem; border: 1px solid var(--border-grey); border-radius: var(--radius-md); background: #fff; }
.world-card p:not(.eyebrow) { color: var(--muted); margin: 0 0 0.7rem; }
.world-card span { background: #eef6ff; color: var(--industrial-blue); }

.governance-note { padding: 0.95rem; border-radius: var(--radius-md); background: #f6f9fc; border: 1px solid #e7eef6; }
.governance-note ul { margin: 0; padding-left: 1.2rem; }
.governance-note li { margin: 0.4rem 0; }
.source-list { display: grid; gap: 0.65rem; margin-top: 0.85rem; }
.source-item { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem; border: 1px solid var(--border-grey); border-radius: 14px; background: #fff; }
.source-item p { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.85rem; }
.source-item span { background: #e9f7ef; color: var(--opportunity-green); white-space: nowrap; }

.footer {
  width: min(1440px, calc(100% - 2rem));
  margin: 0 auto 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.tone-green::before { background: var(--opportunity-green); }
.tone-amber::before { background: var(--safety-amber); }
.tone-red::before { background: var(--critical-red); }
.tone-blue::before { background: var(--industrial-blue); }
.tone-purple::before { background: var(--ai-purple); }
.tone-cyan::before { background: var(--airflow-cyan); }
.tone-green .kpi-bar span { background: var(--opportunity-green); }
.tone-amber .kpi-bar span { background: var(--safety-amber); }
.tone-red .kpi-bar span { background: var(--critical-red); }
.tone-blue .kpi-bar span { background: var(--industrial-blue); }
.tone-purple .kpi-bar span { background: var(--ai-purple); }
.tone-cyan .kpi-bar span { background: var(--airflow-cyan); }

:focus-visible { outline: 3px solid rgba(44,183,201,0.6); outline-offset: 2px; }

@media (max-width: 1120px) {
  .topbar, .hero-card { grid-template-columns: 1fr; flex-direction: column; align-items: stretch; }
  .header-meta { justify-content: flex-start; }
  .briefing-chips { min-width: 0; }
  .score-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .primary-grid, .secondary-grid, .tertiary-grid { grid-template-columns: 1fr; }
  .radar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .topbar, .dashboard-shell, .footer { width: min(100% - 1rem, 1440px); }
  .brand-block { align-items: flex-start; }
  .brand-mark { width: 48px; height: 48px; border-radius: 14px; }
  .briefing-chips, .score-strip, .radar-grid, .world-grid { grid-template-columns: 1fr; }
  .panel-header { flex-direction: column; align-items: stretch; }
  .filter-chips, .view-toggle { justify-content: flex-start; }
  .footer { flex-direction: column; }
}