:root {
  --bg: #081116;
  --panel: #101c24;
  --panel-2: #14242e;
  --line: #223640;
  --text: #edf7fb;
  --muted: #8ea7b3;
  --accent: #39c5bb;
  --accent-2: #4f8cff;
  --danger: #ff5f6d;
  --warning: #f5b84b;
  --ok: #49d17d;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, #102a35 0, var(--bg) 34%, #060b0f 100%);
}
a { color: inherit; text-decoration: none; }
.list li a:hover, .compact-list a:hover { text-decoration: underline; }
.list li:has(a) { transition: border-color 0.15s ease; }
.list li:has(a):hover { border-color: var(--accent); }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  padding: 22px 16px;
  background: rgba(7, 18, 24, 0.94);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 20px;
  font-weight: 800;
}
.brand span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #041012;
  font-size: 12px;
}
nav { display: grid; gap: 6px; }
.nav-label {
  margin: 14px 10px 4px;
  color: #5f7884;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
nav a {
  padding: 11px 12px;
  border-radius: 8px;
  color: var(--muted);
}
nav a:hover, nav a.active { background: var(--panel-2); color: var(--text); }
.app-footer {
  margin-top: auto;
  padding: 16px 10px 0;
  display: grid;
  gap: 8px;
}
.app-footer-meta {
  display: grid;
  gap: 2px;
  color: #5f7884;
  font-size: 11px;
  line-height: 1.5;
}

/* Production gets the "serious" color on purpose — this is a security tool
   that runs real audits against real customer systems, so production
   should visually give an operator a moment of pause. Development is calm
   (safe to experiment); staging sits between the two. Never rely on color
   alone — the badge text always spells out the environment name too. */
.env-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.env-development { color: #bff8d1; background: #123b28; }
.env-staging { color: #ffe1a6; background: #493317; }
.env-production { color: #ffd0d4; background: #4a1720; }

.health-ok, .health-warn { font-size: 16px !important; }
.health-ok { color: var(--ok); }
.health-warn { color: var(--warning); }

.shell { margin-left: 248px; min-height: 100vh; }
.login-shell { margin-left: 0; display: grid; place-items: center; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: rgba(8, 17, 22, 0.82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.topbar span { color: var(--muted); margin-left: 8px; }
main { max-width: 1180px; margin: 0 auto; padding: 26px 24px 44px; }
h1 { margin: 0 0 18px; font-size: 30px; }
h2 { margin: 0 0 14px; font-size: 18px; }
h3 { margin: 0 0 10px; font-size: 16px; }
p { color: var(--muted); }
.dashboard-hero, .dashboard-topline, .trend-grid, .dashboard-layout, .dashboard-sections, .panel, table, td, th, .badge, .button {
  min-width: 0;
}
.page-subtitle { margin-top: -10px; margin-bottom: 20px; }
.page-header, .section-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}
.section-heading { margin-bottom: 14px; }
.section-heading > div { min-width: 0; }
.section-heading h2 { margin-bottom: 4px; }
.section-heading p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }

.panel, .grid > div, .finding, table {
  background: rgba(16, 28, 36, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.panel, .grid > div, .finding { padding: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: stretch; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.stats.compact { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.dashboard-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.dashboard-hero {
  display: grid;
  grid-template-columns: minmax(320px, 1.2fr) minmax(420px, 1.8fr);
  gap: 14px;
  margin-bottom: 14px;
}
.hero-score-card {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  min-height: 168px;
  padding: 20px;
  border: 1px solid rgba(57, 197, 187, 0.38);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 20%, rgba(57, 197, 187, 0.18), transparent 38%),
    linear-gradient(135deg, rgba(20, 36, 46, 0.98), rgba(8, 17, 22, 0.96));
}
.hero-score-card span { display: block; color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.hero-score-card strong { display: block; margin-top: 12px; color: var(--accent); font-size: 50px; line-height: 1; }
.hero-score-card em { display: block; margin-top: 8px; color: var(--text); font-style: normal; font-weight: 800; }
.hero-score-card p { margin: 12px 0 0; max-width: 34rem; }
.hero-score-card .button { align-self: flex-end; white-space: nowrap; }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.kpi-grid article {
  display: grid;
  align-content: start;
  min-height: 82px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 28, 36, 0.82);
}
.kpi-grid span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.kpi-grid strong { display: block; margin-top: 8px; color: var(--text); font-size: 25px; line-height: 1; }
.kpi-grid em { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; font-style: normal; }
.dashboard-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 14px;
  margin-bottom: 14px;
}
.dashboard-topline {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(0, 1.35fr);
  gap: 14px;
  margin-bottom: 14px;
}
.trend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.8fr);
  gap: 14px;
  margin-bottom: 14px;
}
.dashboard-sections { margin-bottom: 14px; align-items: stretch; }
.dashboard-sections > .panel { min-height: 100%; }
.stats article {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(20, 36, 46, 0.95), rgba(11, 22, 29, 0.95));
}
.stats span { display: block; color: var(--muted); font-size: 13px; text-transform: capitalize; }
.stats strong { display: block; margin-top: 10px; font-size: 26px; }
.score-card strong { color: var(--accent); }
.score-card em { display: block; margin-top: 8px; color: var(--muted); font-style: normal; }
.risk-panel { display: grid; align-content: start; gap: 14px; }
.risk-score {
  display: grid;
  place-items: center;
  min-height: 154px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: radial-gradient(circle, rgba(57, 197, 187, 0.16), rgba(11, 22, 29, 0.92) 62%);
}
.risk-score strong { color: var(--accent); font-size: 56px; line-height: 1; }
.risk-score span { color: var(--muted); font-weight: 800; }
.risk-distribution {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 9px;
}
.risk-distribution article {
  display: grid;
  align-content: space-between;
  min-width: 0;
  min-height: 100px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 22, 0.36);
}
.risk-distribution strong { display: block; margin: 12px 0 10px; font-size: 28px; }
.risk-distribution div { height: 8px; border-radius: 999px; background: #0b171d; overflow: hidden; border: 1px solid var(--line); }
.risk-distribution i { display: block; height: 100%; min-width: 2px; border-radius: 999px; }
.risk-distribution i.severity-critical { background: #ff5f6d; }
.risk-distribution i.severity-high { background: #ff7a76; }
.risk-distribution i.severity-medium { background: #f5b84b; }
.risk-distribution i.severity-low { background: #49d17d; }
.risk-distribution i.severity-info { background: #8ba7ff; }
.trend-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.trend-summary article,
.severity-trend-grid article {
  min-width: 0;
  min-height: 86px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 22, 0.35);
}
.trend-summary span { display: block; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.trend-summary strong { display: block; margin-top: 8px; font-size: 26px; }
.trend-chart {
  display: block;
  width: 100%;
  height: 104px;
  margin: 6px 0 12px;
  padding: 12px;
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    rgba(8, 17, 22, 0.35);
  background-size: 100% 25%;
}
.trend-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 8px;
}
.trend-points span {
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 22, 0.35);
}
.trend-points strong { display: block; font-size: 15px; }
.trend-points em { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-style: normal; }
.severity-trend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}
.severity-trend-grid strong { display: block; margin-top: 12px; font-size: 26px; }
.delta-up { color: var(--ok); font-weight: 800; }
.delta-down { color: var(--danger); font-weight: 800; }
.trend-empty {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 22, 0.35);
}
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 80px 1fr 36px; gap: 10px; align-items: center; }
.bar-row span { color: var(--muted); text-transform: capitalize; }
.bar-row div { height: 10px; border-radius: 999px; background: #0b171d; overflow: hidden; border: 1px solid var(--line); }
.bar-row i { display: block; height: 100%; min-width: 2px; border-radius: 999px; }
.bar-row i.severity-critical { background: #ff5f6d; }
.bar-row i.severity-high { background: #ff7a76; }
.bar-row i.severity-medium { background: #f5b84b; }
.bar-row i.severity-low { background: #49d17d; }
.bar-row i.severity-info { background: #8ba7ff; }

/* Wide/many-column tables get crushed (overlapping badges, mid-word header
   wraps) once their container is narrower than the content actually needs —
   fixed-percentage columns alone can't fix that at every viewport. Give the
   table a sane minimum width and let the panel scroll horizontally instead
   of squeezing columns below a readable size. */
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 640px; }
.table-scroll .connections-table { min-width: 980px; }

.pagination { display: flex; align-items: center; gap: 12px; margin-top: 12px; }

table { width: 100%; table-layout: fixed; border-collapse: collapse; overflow: hidden; }
.audit-history-table th:first-child, .audit-history-table td:first-child { width: 32%; }
.audit-history-table th:nth-child(2), .audit-history-table td:nth-child(2) { width: 27%; }
.audit-history-table th:nth-child(3), .audit-history-table td:nth-child(3) { width: 10%; }
.audit-history-table th:nth-child(5), .audit-history-table td:nth-child(5) { width: 15%; }
.connections-table th:nth-child(2), .connections-table td:nth-child(2) { width: 15%; }
.connections-table th:nth-child(6), .connections-table td:nth-child(6) { width: 8%; }
.connections-table th:nth-child(8), .connections-table td:nth-child(8) { width: 9%; }
.connections-table th:last-child, .connections-table td:last-child { width: 9%; }
th, td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
th { color: #b9ccd4; font-size: 12px; text-transform: uppercase; letter-spacing: 0; background: rgba(20, 36, 46, 0.9); white-space: nowrap; }
tr:hover td { background: rgba(35, 56, 66, 0.35); }
tr:last-child td { border-bottom: 0; }
tr.inline-edit-row { display: none; }
tr.inline-edit-row:target { display: table-row; }
.empty { color: var(--muted); text-align: center; padding: 24px; }
.empty strong, .empty-state strong { color: var(--text); }
.empty-state { color: var(--muted); }
.empty-state p { margin: 6px 0 0; }
.muted { color: var(--muted); }
.truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clamp-2, .clamp-3 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
}
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

input, select, button {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #29424e;
  border-radius: 7px;
  background: #0b171d;
  color: var(--text);
  font: inherit;
}
label { display: grid; gap: 7px; color: #c5d4da; font-size: 13px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { width: auto; }
.form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.form-grid .help { grid-column: 1 / -1; margin: 0; font-size: 13px; }
.form-grid button { width: max-content; }
.inline { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 18px; }
.inline select { width: auto; min-width: 280px; }

.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 38px;
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--accent);
  color: #041012;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
}
/* "Related findings" chips carry a long, dynamic label (finding title +
   connector + finding code) that can exceed the card's width — nowrap would
   overflow the button box and visually collide with the next chip. Let just
   these wrap onto multiple lines instead, without touching every other
   button in the app (which only ever hold short, fixed labels). */
.related-findings { display: flex; flex-wrap: wrap; gap: 8px; }
.related-findings a.button {
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  max-width: 100%;
}
.button.primary { background: var(--accent); color: #041012; }
.button.secondary, button.secondary { background: transparent; color: var(--text); border-color: var(--line); }
.button.danger { background: var(--danger); color: white; }
.button.small { min-height: 30px; min-width: 58px; padding: 6px 10px; font-size: 12px; }
.table-action { margin: 0; }
.inline-action { display: inline-flex; margin-left: 4px; }
.secondary-panel { margin-top: 18px; }
.secondary-panel summary { cursor: pointer; color: var(--text); font-weight: 800; margin-bottom: 14px; }
.inline-edit { margin: 0; }
.danger-zone { border-color: #6d2530; margin-bottom: 18px; }
.user-card { display: grid; gap: 12px; }
.finding-group { display: grid; gap: 12px; margin-bottom: 16px; }
.finding-group .finding { background: rgba(8, 17, 22, 0.35); }
.evidence { display: grid; gap: 8px; margin-top: 4px; }
.evidence-section strong {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--muted);
  margin-bottom: 3px;
}
.evidence-section span { font-size: 13px; }
.evidence-section ul { margin: 0; padding-left: 18px; font-size: 13px; display: grid; gap: 2px; }

.badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
  white-space: nowrap;
}
/* Severity/status/role/connector words are short, fixed vocabulary — they
   must always render in full (never "CRITIC"/"COMPLETE"). Only badges that
   can legitimately hold arbitrary, unbounded user text (e.g. a customer
   name) opt back into ellipsis truncation. */
.customer-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-pending, .status-unknown, .status-active { color: #c6d3d8; background: #1a2b34; }
.status-running { color: #b9d7ff; background: #17365f; }
.status-completed, .status-healthy { color: #bff8d1; background: #123b28; }
.status-failed { color: #ffd0d4; background: #4a1720; }
.severity-info { color: #c7d2fe; background: #232a55; }
.severity-low { color: #c5f6d3; background: #123b28; }
.severity-medium { color: #ffe1a6; background: #493317; }
.severity-high, .severity-critical { color: #ffd0d4; background: #4a1720; }
.compliance-ok { color: #bff8d1; background: #123b28; }
.compliance-attention { color: #ffe1a6; background: #493317; }
.compliance-risk { color: #ffd0d4; background: #4a1720; }
.compliance-unknown { color: #c6d3d8; background: #1a2b34; }
.role-admin { color: #ffd0d4; background: #4a1720; }
.role-customer_admin { color: #ffe1a6; background: #493317; }
.role-auditor { color: #b9d7ff; background: #17365f; }
.role-viewer { color: #c5f6d3; background: #123b28; }
.connector-mock { color: #c6d3d8; background: #1a2b34; }
.connector-unifi { color: #b9d7ff; background: #17365f; }
.connector-gophish { color: #ffe1a6; background: #493317; }
.connector-google_workspace { color: #d4f7f3; background: #12383a; }
.customer-badge { color: #d4f7f3; background: #12383a; margin: 2px; }
.error { color: #ffd0d4; background: #3a1118; border: 1px solid #6d2530; padding: 10px 12px; border-radius: 7px; }
.error-page { max-width: 720px; }
.error-page .empty-state strong { display: block; font-size: 54px; margin-bottom: 8px; }
.notice {
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel-2);
}
.notice.success { color: #bff8d1; border-color: #245c3d; background: #123b28; }
.notice.error { color: #ffd0d4; border-color: #6d2530; background: #3a1118; }
.notice.warning { color: #ffe1a6; border-color: #76521f; background: #493317; }
.notice.warning {
  color: #f2d28a;
  border-color: rgba(245, 184, 75, 0.32);
  background: rgba(73, 51, 23, 0.44);
  font-size: 13px;
}

.narrow {
  width: min(420px, calc(100vw - 32px));
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(16, 28, 36, 0.95);
}
.stack { display: grid; gap: 14px; }
.list { padding: 0; list-style: none; display: grid; gap: 10px; }
.list li {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 13px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.compact-list { margin: 0; }
.compact-list li { align-items: center; }
.compact-list a { white-space: nowrap; }
.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.status-strip span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: rgba(8, 17, 22, 0.35);
}
.status-strip strong { color: var(--text); }
.connector-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 10px;
  align-items: stretch;
}
.connector-health-card {
  display: grid;
  gap: 8px;
  grid-template-rows: auto auto auto 1fr;
  min-height: 142px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 22, 0.35);
}
.connector-health-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.connector-health-card strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.connector-health-card > .muted {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.connector-health-card p { margin: 0; }
.finding-card-list {
  display: grid;
  gap: 10px;
}
.finding-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 8px;
  min-height: 154px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 17, 22, 0.35);
}
.finding-card-meta,
.finding-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.finding-card-meta { flex-wrap: wrap; justify-content: flex-start; }
.finding-card h3 {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.finding-card p {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.finding-card-footer .muted {
  min-width: 0;
  max-width: calc(100% - 72px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-feed {
  display: grid;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
}
.activity-feed li {
  position: relative;
  display: grid;
  grid-template-columns: 82px 1fr;
  min-width: 0;
  gap: 4px 12px;
  padding: 0 0 16px 22px;
  border-left: 1px solid var(--line);
}
.activity-feed li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(57, 197, 187, 0.12);
}
.activity-feed li:last-child { padding-bottom: 0; }
.activity-feed .muted { grid-column: 2; font-size: 13px; }
.activity-kind {
  grid-row: span 2;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .sidebar { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .shell { margin-left: 0; }
  nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two, .stats, .form-grid, .dashboard-layout, .dashboard-kpis, .dashboard-hero, .dashboard-topline, .trend-grid, .trend-summary, .kpi-grid, .risk-distribution, .severity-trend-grid { grid-template-columns: 1fr; }
  .hero-score-card { display: grid; min-height: auto; }
  .hero-score-card strong { font-size: 42px; }
  .page-header, .section-heading { display: grid; }
  .activity-feed li { grid-template-columns: 1fr; }
  .activity-feed .muted { grid-column: auto; }
  .activity-kind { grid-row: auto; }
  main { padding: 22px 16px; }
}

@media (max-width: 560px) {
  main { padding: 18px 12px 34px; }
  h1 { font-size: 26px; }
  .panel, .grid > div, .finding { padding: 13px; }
  .hero-score-card strong { font-size: 34px; }
  .section-heading .button { justify-self: start; }
  th, td { padding: 10px 9px; font-size: 13px; }
  .badge { max-width: 138px; }
  .connector-card-grid { grid-template-columns: 1fr; }
  .finding-card { min-height: 144px; }
}