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

:root {
  --bg-wall: #5c6bc0;
  --surface: #ffffff;
  --text: #202124;
  --text-secondary: #5f6368;
  --border: #e0e0e0;
  --blue: #1a73e8;
  --blue-soft: #e8f0fe;
  --danger: #d93025;
  --danger-soft: #fce8e6;
  --warn: #ea8600;
  --ok: #188038;
  --font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Roboto Mono", ui-monospace, monospace;
  --safe-bottom: max(16px, env(safe-area-inset-bottom));
  --safe-top: max(0px, env(safe-area-inset-top));
}

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
  font-family: var(--font);
  background: #ffffff;
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

body.page-shade {
  background: #000000;
}

body.page-funnel {
  background: #f8f9fa;
}

/* ── Page 1: notification shade (wallpaper or white) ── */
.shade-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  max-width: 428px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: #000000;
}

.shade-screen--wall {
  background: #000000;
}

.home-wallpaper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000000;
}

.home-wallpaper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.shade-screen--wall .status-bar {
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.shade-screen--wall .shade-footer button {
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.shade-screen--wall .notify-stack {
  gap: 6px;
}

.shade-screen--wall .notify-card {
  padding: 10px 10px 10px 11px;
}

.shade-screen--wall .shade-cta-wrap {
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.55) 28%, rgba(0, 0, 0, 0.82) 100%);
}

.notify-app-letter {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

.notify-app-letter.gmail {
  background: #fff;
  color: #ea4335;
  font-family: Georgia, serif;
  font-size: 13px;
}

.notify-app-letter.files {
  background: #1a73e8;
}

.notify-app-letter.whatsapp {
  background: #25d366;
}

.notify-app-letter.instagram {
  background: linear-gradient(135deg, #f58529, #dd2a7b, #8134af);
}

.notify-app-letter.chrome {
  background: linear-gradient(135deg, #ea4335, #fbbc05, #34a853, #4285f4);
  font-size: 10px;
}

.shade-screen--white {
  background: #ffffff;
  border-left: 1px solid #e8eaed;
  border-right: 1px solid #e8eaed;
}

.phone-ui-white {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #ffffff;
  pointer-events: none;
}

.phone-ui-white::before {
  content: "";
  position: absolute;
  top: calc(52px + var(--safe-top));
  left: 16px;
  right: 16px;
  height: 72px;
  border-radius: 28px;
  background: #f1f3f4;
  opacity: 0.9;
}

.phone-ui-white::after {
  content: "";
  position: absolute;
  bottom: calc(120px + var(--safe-bottom));
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0e0e0 20%, #e0e0e0 80%, transparent);
}

.shade-alert-strip {
  display: block;
  width: calc(100% - 24px);
  border: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  z-index: 5;
  margin: 0 12px 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(217, 48, 37, 0.92);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: 0 4px 20px rgba(217, 48, 37, 0.45);
  animation: stripPulse 2s ease-in-out infinite;
  font-family: var(--font);
}

.shade-alert-strip strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 4px;
}

@keyframes stripPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(217, 48, 37, 0.4); }
  50% { box-shadow: 0 4px 28px rgba(217, 48, 37, 0.65); }
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: calc(8px + var(--safe-top)) 12px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #202124;
  position: relative;
  z-index: 4;
}

.shade-screen--white .status-bar {
  color: #202124;
  text-shadow: none;
}

.status-notif-bar {
  flex: 1;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.status-fb-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px 4px 6px;
  border: none;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(217, 48, 37, 0.3);
  animation: fbPulse 2s ease-in-out infinite;
  cursor: pointer;
  font-family: var(--font);
}

.status-fb-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.status-fb-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes fbPulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(217, 48, 37, 0.25); }
  50% { box-shadow: 0 2px 10px rgba(217, 48, 37, 0.28), 0 0 0 1px rgba(217, 48, 37, 0.5); }
}

.status-icons {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  flex-shrink: 0;
}

.notify-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 12px 12px;
  position: relative;
  z-index: 5;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 0;
}

.notify-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding-bottom: 4px;
}

.notify-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 10px 12px 12px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(-28px) scale(0.98);
  transition:
    opacity 0.4s ease,
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  flex-shrink: 0;
}

.notify-card.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes notifyDrop {
  0% { transform: translateY(-28px) scale(0.98); opacity: 0; }
  70% { transform: translateY(3px) scale(1); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.notify-card.notify-drop.show {
  opacity: 1;
  animation: notifyDrop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.notify-card.is-tappable {
  cursor: pointer;
}

.notify-card.is-tappable:active {
  transform: translateY(0) scale(0.98);
}

.notify-card.crit {
  border-left: 4px solid var(--danger);
  box-shadow: 0 2px 12px rgba(217, 48, 37, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.notify-body strong {
  font-weight: 600;
  color: var(--danger);
}

.notify-app-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.notify-app-img,
.notify-badge-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.notify-app-img.logo-chase {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.notify-badge.brand {
  background: #fff;
  width: 32px;
  height: 32px;
  padding: 4px;
}

.notify-main { flex: 1; min-width: 0; }

.notify-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 2px;
}

.notify-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 42%;
}

.notify-meta {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.notify-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notify-badge {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.notify-badge.chrome {
  background: linear-gradient(135deg, #ea4335, #fbbc05, #34a853, #4285f4);
  color: #fff;
  font-size: 10px;
  font-style: italic;
}

.notify-badge.shield { background: #e3f2fd; font-size: 14px; }
.notify-badge.perf { background: #ffebee; color: var(--danger); font-size: 9px; }
.notify-badge.android { background: #e8f5e9; font-size: 14px; }
.notify-badge.avast { background: #ff7800; color: #fff; }
.notify-badge.warn { background: #fff8e1; color: var(--warn); }

.notify-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 4px;
  opacity: 0.4;
  background: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%235f6368'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.shade-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px 20px calc(88px + var(--safe-bottom));
  position: relative;
  z-index: 2;
}

.shade-footer button {
  border: none;
  background: none;
  font: 500 14px var(--font);
  color: #5f6368;
  padding: 10px;
  cursor: pointer;
}

.shade-screen--white .shade-footer button {
  color: #5f6368;
}

.shade-cta-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.97) 40%);
  max-width: 428px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s;
  pointer-events: none;
}

.shade-cta-wrap.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.btn-shade {
  width: 100%;
  min-height: 52px;
  border: none;
  border-radius: 26px;
  background: var(--danger);
  color: #fff;
  font: 600 16px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(217, 48, 37, 0.45);
}

.notify-badge.facebook {
  background: #1877f2;
  padding: 2px;
}

/* ── Pages 2–3: scan funnel ── */
.funnel-screen {
  max-width: 428px;
  margin: 0 auto;
  min-height: 100dvh;
  background: #f8f9fa;
  padding-bottom: calc(96px + var(--safe-bottom));
  position: relative;
  z-index: 1;
}

.funnel-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(12px + var(--safe-top)) 16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.funnel-back {
  border: none;
  background: none;
  color: var(--blue);
  font: 500 14px var(--font);
  padding: 8px 0;
  min-width: 56px;
  cursor: pointer;
}

.funnel-title {
  flex: 1;
  text-align: center;
  font-size: 17px;
  font-weight: 500;
}

.funnel-body { padding: 16px; }

.banner {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--danger-soft);
  border-left: 4px solid var(--danger);
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 16px;
}

.banner strong { font-weight: 600; }

.headline {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.lead {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.45;
}

.card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
  margin-bottom: 12px;
  overflow: hidden;
}

.cell {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.cell:last-child { border-bottom: none; }

.cell-value { font-weight: 500; color: var(--text-secondary); }
.cell-value.danger { color: var(--danger); }
.cell-value.warn { color: var(--warn); }

.progress-wrap { padding: 16px; }

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.progress-track {
  height: 6px;
  background: #e8eaed;
  border-radius: 99px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  border-radius: 99px;
}

.progress-fill.warn { background: var(--warn); }
.progress-fill.danger { background: var(--danger); }

.trace-card {
  background: #202124;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.trace-head {
  padding: 10px 14px;
  font-size: 12px;
  color: #9aa0a6;
  display: flex;
  justify-content: space-between;
}

.trace-scroll {
  height: 100px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

.trace-inner {
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  animation: traceScroll 18s linear infinite;
}

@keyframes traceScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.trace-line { color: #9aa0a6; }
.trace-line.warn { color: #fdd663; }
.trace-line.crit { color: #f28b82; }

.log-line {
  padding: 10px 16px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.log-line.warn { color: var(--warn); font-weight: 500; }
.log-line.crit { color: var(--danger); font-weight: 500; }

.score-row {
  display: flex;
  gap: 16px;
  padding: 20px 16px;
  align-items: center;
}

.score-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 4px solid var(--danger);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-num { font-size: 20px; font-weight: 600; color: var(--danger); }
.score-lbl { font-size: 9px; font-weight: 700; color: var(--danger); text-transform: uppercase; }

.risk-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  padding-left: 32px;
  position: relative;
}

.risk-item::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
}

.countdown {
  text-align: center;
  padding: 12px;
  margin: 8px 0;
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 14px;
  font-weight: 500;
}

.footnote {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
}

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  padding: 12px 16px calc(12px + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, #f8f9fa 30%);
  pointer-events: none;
}

.sticky-cta .inner,
.sticky-cta button {
  pointer-events: auto;
}

.sticky-cta .inner {
  max-width: 428px;
  margin: 0 auto;
}

.btn-filled {
  width: 100%;
  min-height: 48px;
  border: none;
  border-radius: 24px;
  font: 500 15px var(--font);
  cursor: pointer;
}

.btn-filled:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }

/* ── Page 2: urgent dark scan ── */
body.page-scan-urgent {
  background: #0a0a0c;
}

.scan-urgent-screen {
  background: #0a0a0c;
  padding-bottom: calc(110px + var(--safe-bottom));
  max-width: 428px;
  margin: 0 auto;
  min-height: 100dvh;
}

.scan-urgent-screen.critical {
  animation: urgentEdge 1.2s ease-in-out infinite;
}

@keyframes urgentEdge {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 59, 48, 0); }
  50% { box-shadow: inset 0 0 0 3px rgba(255, 59, 48, 0.45); }
}

.urgent-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(10px + var(--safe-top)) 16px 8px;
}

.urgent-back {
  color: #8ab4f8 !important;
  min-width: 56px;
}

.urgent-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #ff6b6b;
}

.urgent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b30;
  animation: urgentBlink 0.9s ease-in-out infinite;
}

@keyframes urgentBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.urgent-body { padding: 0 16px 16px; }

.urgent-flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: rgba(255, 59, 48, 0.15);
  border: 1px solid rgba(255, 59, 48, 0.45);
  color: #ffc9c5;
  font-size: 14px;
  line-height: 1.4;
  animation: flashPulse 1.5s ease-in-out infinite;
}

.urgent-flash strong { color: #fff; }

.urgent-flash-tag {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 6px;
  background: #ff3b30;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

@keyframes flashPulse {
  0%, 100% { border-color: rgba(255, 59, 48, 0.45); }
  50% { border-color: rgba(255, 59, 48, 0.9); }
}

.scan-ring-wrap {
  text-align: center;
  margin-bottom: 20px;
}

.scan-ring-outer {
  --pct: 0;
  width: 168px;
  height: 168px;
  margin: 0 auto 12px;
  border-radius: 50%;
  padding: 6px;
  background: conic-gradient(#ff3b30 calc(var(--pct) * 1%), #2a2d32 0);
  box-shadow: 0 0 32px rgba(255, 59, 48, 0.35);
  transition: box-shadow 0.3s;
}

.scan-urgent-screen.critical .scan-ring-outer {
  box-shadow: 0 0 48px rgba(255, 59, 48, 0.55);
  animation: ringGlow 1s ease-in-out infinite;
}

@keyframes ringGlow {
  0%, 100% { box-shadow: 0 0 32px rgba(255, 59, 48, 0.4); }
  50% { box-shadow: 0 0 56px rgba(255, 59, 48, 0.7); }
}

.scan-ring-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #14161a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.scan-ring-pct {
  font-size: 36px;
  font-weight: 700;
  color: #ff6b6b;
  line-height: 1;
}

.scan-ring-lbl {
  font-size: 11px;
  color: #9aa0a6;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.scan-ring-caption {
  font-size: 14px;
  font-weight: 500;
  color: #e8eaed;
}

.urgent-counter-row {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
}

.urgent-counter {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  background: #14161a;
  border: 1px solid #2a2d32;
  text-align: center;
}

.urgent-counter-num {
  display: block;
  font-size: 28px;
  font-weight: 700;
  color: #ff9f43;
  line-height: 1.1;
}

.urgent-counter-num.danger { color: #ff3b30; }

.urgent-counter-lbl {
  font-size: 11px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
}

.urgent-feed {
  max-height: 120px;
  overflow-y: auto;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #0d0f12;
  border: 1px solid #2a2d32;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.55;
}

.urgent-feed-line { color: #9aa0a6; margin-bottom: 4px; }
.urgent-feed-line.warn { color: #fdd663; }
.urgent-feed-line.crit { color: #ff8a80; font-weight: 500; }

.target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.target-chip {
  padding: 12px;
  border-radius: 10px;
  background: #14161a;
  border: 1px solid #2a2d32;
  transition: border-color 0.25s, background 0.25s;
}

.target-chip span {
  display: block;
  font-size: 11px;
  color: #9aa0a6;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.target-chip em {
  font-style: normal;
  font-size: 15px;
  font-weight: 600;
  color: #5f6368;
}

.target-chip em.danger,
.target-chip em.warn,
.target-chip em.cell-value.danger,
.target-chip em.cell-value.warn {
  color: #ff6b6b;
}

.target-chip.hit {
  border-color: rgba(255, 59, 48, 0.6);
  background: rgba(255, 59, 48, 0.12);
  animation: chipHit 0.5s ease;
}

@keyframes chipHit {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.urgent-cta {
  background: linear-gradient(180deg, transparent, #0a0a0c 35%) !important;
}

.urgent-cta-hint {
  text-align: center;
  font-size: 12px;
  color: #ff9f43;
  margin-bottom: 8px;
  font-weight: 500;
}

.btn-urgent {
  background: #3c4043;
  color: #9aa0a6;
}

.btn-urgent.ready {
  background: var(--danger);
  color: #fff;
  box-shadow: 0 4px 20px rgba(217, 48, 37, 0.5);
  animation: ctaPulse 1.2s ease-in-out infinite;
}

@keyframes ctaPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

/* ── Page 3: breach report ── */
body.page-report-breach {
  background: #1a0505;
}

.report-screen {
  max-width: 428px;
  margin: 0 auto;
  min-height: 100dvh;
  padding-bottom: calc(96px + var(--safe-bottom));
  background: #f8f9fa;
}

.breach-hero {
  padding: calc(20px + var(--safe-top)) 20px 20px;
  background: linear-gradient(165deg, #b71c1c 0%, #d32f2f 45%, #8b0000 100%);
  color: #fff;
  text-align: center;
}

.breach-stamp {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 12px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.2em;
  animation: stampPulse 1.5s ease-in-out infinite;
}

@keyframes stampPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

.breach-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.breach-sub {
  font-size: 14px;
  line-height: 1.45;
  opacity: 0.92;
  margin-bottom: 16px;
}

.breach-timer {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 14px;
  font-weight: 600;
}

.breach-timer span {
  font-variant-numeric: tabular-nums;
  color: #ffeb3b;
}

.breach-body { padding: 16px; }

.breach-meter {
  padding: 16px;
  margin-bottom: 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(183, 28, 28, 0.15);
  border: 1px solid #ffcdd2;
}

.breach-meter-head {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}

.breach-meter-val {
  color: var(--danger);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.breach-meter-track {
  height: 10px;
  background: #ffebee;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 8px;
}

.breach-meter-fill {
  width: 88%;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff6b6b, #d32f2f);
  animation: meterPulse 2s ease-in-out infinite;
}

@keyframes meterPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

.breach-meter-note {
  font-size: 13px;
  color: var(--text-secondary);
}

.breach-section-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.exposure-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 20px;
}

.exposure-chip {
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  text-align: center;
}

.exposure-chip span:not(.exposure-icon) {
  display: block;
  font-size: 12px;
  font-weight: 500;
  margin-top: 4px;
}

.exposure-chip em {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}

.exposure-chip.crit {
  border-color: #ef9a9a;
  background: #ffebee;
}

.exposure-chip.crit em { color: var(--danger); }

.exposure-chip.warn {
  border-color: #ffe082;
  background: #fff8e1;
}

.exposure-chip.warn em { color: var(--warn); }

.exposure-icon { font-size: 20px; }

.threat-stack { display: flex; flex-direction: column; gap: 10px; }

.threat-card {
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border-left: 4px solid var(--danger);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.threat-card.severity-high {
  border-left-color: var(--warn);
}

.threat-sev {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--danger);
  margin-bottom: 6px;
}

.threat-card.severity-high .threat-sev { color: var(--warn); }

.threat-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
}

.threat-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.breach-cta {
  background: linear-gradient(180deg, transparent, #f8f9fa 30%) !important;
}

.btn-pulse {
  animation: ctaPulse 1.2s ease-in-out infinite;
  box-shadow: 0 4px 18px rgba(217, 48, 37, 0.45);
}

.exposure-logo {
  display: block;
  width: 28px;
  height: 28px;
  margin: 0 auto 4px;
  object-fit: contain;
}

.exposure-chip .exposure-logo + span {
  margin-top: 0;
}

.target-chip em.cell-value {
  display: block;
  font-style: normal;
}