/* =========================================================
   PulseGuard — demo scanner styles
   ========================================================= */
:root {
  --bg: #060a13;
  --bg-2: #0c1426;
  --panel: rgba(13, 20, 38, .72);
  --line: rgba(140, 170, 220, .14);
  --fg: #e8eefb;
  --muted: #8e9bb5;
  --accent: #22d3ee;
  --accent-2: #6d6cff;
  --accent-rgb: 34, 211, 238;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #ff3b5c;
  --danger-2: #ff7a45;
  --danger-rgb: 255, 59, 92;
  --r: 20px;
  --sans: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Inter, Roboto, sans-serif;
  --mono: "Cascadia Mono", Consolas, "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}

@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(109, 108, 255, .22), transparent 60%),
    radial-gradient(50% 40% at 85% 20%, rgba(34, 211, 238, .16), transparent 60%),
    radial-gradient(60% 60% at 50% 110%, rgba(34, 211, 238, .10), transparent 60%);
  transition: opacity 1s;
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -2; opacity: 0;
  background:
    radial-gradient(60% 50% at 20% 10%, rgba(255, 59, 92, .26), transparent 60%),
    radial-gradient(50% 40% at 85% 20%, rgba(255, 122, 69, .18), transparent 60%),
    radial-gradient(60% 60% at 50% 110%, rgba(255, 59, 92, .14), transparent 60%);
  transition: opacity 1s;
}
body.alert::before { opacity: 0; }
body.alert::after { opacity: 1; }

#bg { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; }

/* Decorative CRT scanlines sit BELOW the content (z-index 1, above the canvas
   at -1) so they never blend into the log/terminal text and smear it. */
.scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(0deg, rgba(120,160,220,.035) 0 1px, transparent 1px 3px);
}

#flash { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0; background: #fff; }
#flash.go { animation: flash 1.1s ease-out forwards; }
@keyframes flash {
  0%   { opacity: .95; background: #fff; }
  12%  { opacity: .75; background: var(--danger); }
  100% { opacity: 0;   background: var(--danger); }
}

#vignette {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(255, 40, 70, .55) 100%);
  transition: opacity .6s;
}
body.alert #vignette { opacity: 1; animation: vpulse 1.5s ease-in-out infinite; }
@keyframes vpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- shake ---------- */
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 0, 0); }
  20%, 80% { transform: translate3d(4px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-7px, 0, 0); }
  40%, 60% { transform: translate3d(7px, 0, 0); }
}
body.shake .stage, body.shake .topbar { animation: shake .75s cubic-bezier(.36, .07, .19, .97) both; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(6, 10, 19, .85), rgba(6, 10, 19, .4));
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.brand-mark { width: 30px; height: 30px; filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .5)); }
.brand-name { font-weight: 600; font-size: 18px; letter-spacing: -.01em; }
.brand-name b { background: linear-gradient(90deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar-right { display: flex; align-items: center; gap: 10px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
  border: 1px solid var(--line); background: var(--panel); color: var(--muted);
  transition: color .4s, border-color .4s, background .4s;
}
.status-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.status-pill[data-status="ok"] { color: #c9f7e4; }
.status-pill[data-status="locked"] { color: #ffe9bf; border-color: rgba(251, 191, 36, .4); }
.status-pill[data-status="locked"] .dot { background: var(--warn); box-shadow: 0 0 10px var(--warn); }
.status-pill[data-status="scanning"] { color: #cdf6fb; border-color: rgba(var(--accent-rgb), .4); }
.status-pill[data-status="scanning"] .dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: blink 1s infinite; }
.status-pill[data-status="danger"] { color: #ffd4db; border-color: rgba(var(--danger-rgb), .6); background: rgba(var(--danger-rgb), .14); }
.status-pill[data-status="danger"] .dot { background: var(--danger); box-shadow: 0 0 12px var(--danger); animation: blink .5s infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- stage / panels ---------- */
.stage {
  position: relative; z-index: 2; flex: 1; width: 100%; max-width: 780px; margin: 0 auto;
  padding: 28px 16px 40px;
}
/* Inactive panels are taken out of flow (absolute), so the stage is only as
   tall as the ACTIVE panel — no dead space, and hidden panels can't widen the
   page. The active panel is put back into flow to size the stage. */
.panel {
  position: absolute; top: 28px; left: 16px; right: 16px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(26px) scale(.98);
  transition: opacity .55s ease, transform .6s var(--ease-out), visibility 0s linear .6s;
}
.stage[data-state="idle"] .panel-idle,
.stage[data-state="scanning"] .panel-scanning,
.stage[data-state="result"] .panel-result,
.stage[data-state="clean"] .panel-clean {
  position: relative; top: auto; left: auto; right: auto; width: 100%;
  opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s;
}

.title { font-size: clamp(32px, 6vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; margin: 10px 0 12px; }
.lead { color: var(--muted); font-size: 17px; max-width: 520px; margin: 0; line-height: 1.5; }
.lead-danger { color: #ffb8c4; }

/* ---------- hero logo ---------- */
.hero-logo {
  position: relative; width: 220px; height: 220px; display: grid; place-items: center;
  margin: 6px 0 10px; animation: float 5.5s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-8px); } }
.orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), .35); }
.orbit-1 { inset: 0; animation: spin 20s linear infinite; }
.orbit-2 { inset: 22px; border-style: dotted; border-color: rgba(109, 108, 255, .45); animation: spin 28s linear infinite reverse; }
.orbit-1::after, .orbit-2::after {
  content: ''; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent);
}
.orbit-2::after { background: var(--accent-2); box-shadow: 0 0 14px var(--accent-2); }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse-ring { position: absolute; inset: 44px; border-radius: 50%; border: 2px solid rgba(var(--accent-rgb), .55); animation: pulse 2.8s ease-out infinite; }
.pulse-ring.delay { animation-delay: 1.4s; }
@keyframes pulse { 0% { transform: scale(.55); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.shield { width: 124px; height: 124px; filter: drop-shadow(0 12px 32px rgba(var(--accent-rgb), .35)); }
.shield .beam { animation: beam 2.4s ease-in-out infinite; }
@keyframes beam { 0%, 100% { transform: translateY(-34px); } 50% { transform: translateY(34px); } }
.shield .core { animation: core 1.6s ease-in-out infinite; transform-origin: 60px 60px; }
@keyframes core { 50% { transform: scale(1.35); } }

/* ---------- license gate ---------- */
.license {
  width: 100%; max-width: 460px; margin: 26px 0 0; padding: 18px 18px 14px; text-align: left;
  border-radius: var(--r); border: 1px solid rgba(251, 191, 36, .35);
  background: linear-gradient(180deg, rgba(40, 32, 12, .55), var(--panel));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: opacity .45s ease, transform .5s var(--ease-out), max-height .5s ease, margin .5s ease, padding .5s ease;
  overflow: hidden; max-height: 260px;
}
.license.is-gone { opacity: 0; transform: translateY(-10px) scale(.96); max-height: 0; margin-top: 0; padding-top: 0; padding-bottom: 0; border-width: 0; pointer-events: none; }
.license.is-shaking { animation: licenseShake .5s cubic-bezier(.36, .07, .19, .97); border-color: var(--danger); }
@keyframes licenseShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}
.license__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.license__lock { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--warn); background: rgba(251, 191, 36, .12); border: 1px solid rgba(251, 191, 36, .35); flex: none; }
.license__lock svg { width: 22px; height: 22px; }
.license__text { display: flex; flex-direction: column; gap: 2px; }
.license__text b { font-size: 15px; }
.license__text small { color: var(--muted); font-size: 13px; }
.license__row { display: flex; gap: 10px; }
.license__input {
  flex: 1 1 auto; min-width: 0; padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(5, 9, 17, .7); color: #fff;
  font-family: var(--mono); font-size: 18px; letter-spacing: .14em; text-align: center;
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.license__input::placeholder { color: #4b5876; letter-spacing: .14em; }
.license__input:focus { border-color: rgba(var(--accent-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .15); }
.license.is-invalid .license__input { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(var(--danger-rgb), .15); }
.license.is-checking .license__input { color: var(--muted); }
.license__error { margin: 8px 2px 0; min-height: 18px; font-size: 13px; color: #ffb3bf; }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #06101f; box-shadow: 0 10px 30px rgba(var(--accent-rgb), .3); }
.btn-primary[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.btn-primary:not([disabled]):hover { box-shadow: 0 14px 40px rgba(var(--accent-rgb), .45); }

.license-ok {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 9px 16px 9px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; color: #c9f7e4;
  background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .45);
  animation: licenseIn .6s var(--ease-out) both;
}
.license-ok[hidden] { display: none; }
.license-ok svg { width: 18px; height: 18px; color: var(--ok); }
.license-ok b { font-family: var(--mono); letter-spacing: .1em; }
@keyframes licenseIn { from { opacity: 0; transform: translateY(8px) scale(.9); } }

/* ---------- scan button ---------- */
.scan-btn {
  position: relative; isolation: isolate;
  border: 0; padding: 0; margin-top: 30px; border-radius: 999px; background: transparent; cursor: pointer;
  transform: translate(var(--mx, 0), var(--my, 0)) translateZ(0);
  transition: transform .25s var(--ease-out);
  font: inherit; color: #fff;
}
.scan-btn__glow {
  position: absolute; inset: -4px; border-radius: inherit; z-index: -1; opacity: .8;
  background: conic-gradient(from var(--a), var(--accent), var(--accent-2), #ff4fd8, var(--accent));
  filter: blur(12px);
  animation: rotate-a 3.2s linear infinite;
}
@keyframes rotate-a { to { --a: 360deg; } }
.scan-btn__label {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 38px; border-radius: 999px;
  background: linear-gradient(135deg, #10203d, #0a1222);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 18px; font-weight: 700; letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 44px rgba(var(--accent-rgb), .28);
  position: relative; overflow: hidden;
}
.scan-btn__label::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  background-size: 250% 100%; animation: shimmer 2.8s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
.scan-btn__label svg { width: 24px; height: 24px; }
.scan-btn__ico-lock { display: none; }
.scan-btn:hover { transform: translate(var(--mx, 0), var(--my, 0)) translateY(-2px) scale(1.04); }
.scan-btn:active { transform: translate(var(--mx, 0), var(--my, 0)) scale(.96); }
.scan-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* locked until a license key is accepted */
.scan-btn.is-locked { cursor: not-allowed; filter: grayscale(.9) brightness(.7); }
.scan-btn.is-locked .scan-btn__glow { opacity: .12; animation: none; }
.scan-btn.is-locked .scan-btn__label { box-shadow: none; color: #93a0b8; }
.scan-btn.is-locked .scan-btn__label::after { animation: none; opacity: 0; }
.scan-btn.is-locked .scan-btn__ico-shield { display: none; }
.scan-btn.is-locked .scan-btn__ico-lock { display: block; }
.scan-btn.is-locked:hover, .scan-btn.is-locked:active { transform: translate(var(--mx, 0), var(--my, 0)); }
.scan-btn.is-locked.nudge { animation: licenseShake .5s cubic-bezier(.36, .07, .19, .97); }
.scan-btn.unlocking { animation: unlock .8s var(--ease-out); }
@keyframes unlock { 0% { filter: grayscale(.9) brightness(.7); transform: scale(.96); } 40% { filter: none; transform: scale(1.08); } 100% { transform: none; } }

.features { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; color: var(--muted); font-size: 14px; }
.features li { display: inline-flex; align-items: center; gap: 8px; }
.f-ico { font-size: 15px; }

/* ---------- radar ---------- */
.radar-wrap { position: relative; margin: 4px 0 18px; }
.radar { position: relative; width: 270px; height: 270px; border-radius: 50%; }
.radar__grid {
  position: absolute; inset: 16px; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 32%, var(--line) 32% calc(32% + 1px), transparent calc(32% + 1px) 64%, var(--line) 64% calc(64% + 1px), transparent calc(64% + 1px)),
    linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
    linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat,
    radial-gradient(circle, rgba(var(--accent-rgb), .08), transparent 70%);
  box-shadow: inset 0 0 50px rgba(var(--accent-rgb), .08), 0 0 60px rgba(var(--accent-rgb), .08);
  transition: box-shadow .6s;
}
.radar__sweep {
  position: absolute; inset: 16px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(var(--accent-rgb), 0) 0deg, rgba(var(--accent-rgb), .02) 250deg, rgba(var(--accent-rgb), .55) 360deg);
  animation: spin 2.2s linear infinite;
  transition: background .6s;
}
.radar__sweep::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; margin-top: -1px;
  transform-origin: 0 50%; transform: rotate(-90deg);
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .9));
}
.radar__blips { position: absolute; inset: 16px; border-radius: 50%; overflow: hidden; }
.blip {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: blip 1.6s ease-out forwards;
}
.blip.warn { background: var(--warn); box-shadow: 0 0 12px var(--warn); }
.blip.danger { background: var(--danger); box-shadow: 0 0 14px var(--danger); width: 9px; height: 9px; margin: -4px 0 0 -4px; animation-duration: 2.4s; }
@keyframes blip { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1); } }

.radar__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.radar__ring .track { fill: none; stroke: rgba(255, 255, 255, .06); stroke-width: 6; }
.radar__ring .progress {
  fill: none; stroke: url(#gRing); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 578.05; stroke-dashoffset: 578.05;
  transition: stroke-dashoffset .12s linear, stroke .5s;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .8));
}
.radar__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.percent { font-size: 56px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(var(--accent-rgb), .5); }
.percent small { font-size: 22px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.phase { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); transition: opacity .25s; }
.phase.swap { opacity: 0; }

/* alert state of the radar */
.radar.danger .radar__sweep { background: conic-gradient(from 0deg, rgba(var(--danger-rgb), 0) 0deg, rgba(var(--danger-rgb), .03) 250deg, rgba(var(--danger-rgb), .6) 360deg); animation-duration: .9s; }
.radar.danger .radar__sweep::after { background: linear-gradient(90deg, transparent, rgba(var(--danger-rgb), .95)); }
.radar.danger .radar__grid { box-shadow: inset 0 0 60px rgba(var(--danger-rgb), .2), 0 0 70px rgba(var(--danger-rgb), .25); }
.radar.danger .radar__ring .progress { stroke: var(--danger); filter: drop-shadow(0 0 8px rgba(var(--danger-rgb), .9)); }
.radar.danger .percent { color: #ffd4db; text-shadow: 0 0 24px rgba(var(--danger-rgb), .7); }
.radar.danger .phase { color: var(--danger); }

.current-file {
  display: flex; align-items: center; gap: 10px; max-width: 100%;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel);
  font-family: var(--mono); font-size: 13px; color: #cfe1ff;
}
.cf-label { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.current-file code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.caret { width: 8px; height: 16px; background: var(--accent); animation: blink .9s steps(2) infinite; }

.stats { display: flex; gap: 12px; margin: 18px 0; width: 100%; max-width: 540px; }
.stat {
  flex: 1; padding: 14px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel);
  display: flex; flex-direction: column; gap: 4px;
}
.stat__value { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.stat__label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stat.pop .stat__value { color: var(--danger); animation: pop .5s var(--ease-out); }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

.terminal { position: relative; z-index: 2; width: 100%; max-width: 640px; border-radius: 14px; border: 1px solid var(--line); background: rgba(5, 9, 17, .92); overflow: hidden; text-align: left; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.terminal__bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.terminal__bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.terminal__bar i:nth-child(2) { background: #febc2e; }
.terminal__bar i:nth-child(3) { background: #28c840; }
.terminal__bar span { margin-left: 8px; }
/* contain keeps the log repaint inside the box, so fast updates don't smear */
/* Integer line-height on a whole-pixel baseline. The content box (162px) is an
   exact multiple of the 18px rows, so no row is half-clipped and descenders
   (g, y, p) are never cut off. */
.terminal__body { height: 180px; overflow: hidden; padding: 9px 12px; font-family: var(--mono); font-size: 12px; line-height: 18px; display: flex; flex-direction: column; justify-content: flex-end; }
/* flex: none is essential — without it the rows shrink to fit the fixed-height
   body, pile onto each other and collapse to zero. Instead each row keeps its
   height and the oldest rows scroll off the top under overflow:hidden. */
.log-line { flex: none; display: flex; align-items: center; gap: 10px; white-space: nowrap; animation: logIn .2s ease-out; }
@keyframes logIn { from { opacity: 0; } }
.log-time { color: #5d6b86; flex: none; }
.log-icon { flex: none; }
.log-icon::before { content: '✓'; color: var(--ok); }
.log-skip .log-icon::before { content: '–'; color: var(--muted); }
.log-info .log-icon::before { content: '›'; color: var(--accent); }
.log-warn .log-icon::before { content: '!'; color: var(--warn); }
.log-danger .log-icon::before { content: '✖'; color: var(--danger); }
.log-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: #b9c6df; }
.log-warn .log-text { color: #ffe3a1; }
.log-danger .log-text { color: #ffb3bf; font-weight: 700; }

/* ---------- result ---------- */
.alert-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(var(--danger-rgb), .14); border: 1px solid rgba(var(--danger-rgb), .55); color: #ffd4db;
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  animation: badge 1s ease-in-out infinite;
}
.alert-badge__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--danger); color: #fff; display: grid; place-items: center; font-weight: 900; box-shadow: 0 0 16px var(--danger); }
@keyframes badge { 50% { box-shadow: 0 0 0 6px rgba(var(--danger-rgb), .12); } }

.bug-wrap { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin: 14px 0 0; }
.bug-wrap::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--danger-rgb), .35), transparent 70%); animation: vpulse 1.2s ease-in-out infinite; }
.bug { width: 130px; height: 130px; color: var(--danger); filter: drop-shadow(0 0 14px rgba(var(--danger-rgb), .8)); animation: bugTwitch 2.6s ease-in-out infinite; }
@keyframes bugTwitch { 0%, 88%, 100% { transform: rotate(0); } 90% { transform: rotate(-4deg) translateX(-2px); } 94% { transform: rotate(4deg) translateX(2px); } }
.bug__lines * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.stage[data-state="result"] .bug__lines * { animation: draw 1.1s var(--ease-out) forwards; }
.stage[data-state="result"] .bug__lines *:nth-child(2) { animation-delay: .15s; }
.stage[data-state="result"] .bug__lines *:nth-child(3) { animation-delay: .3s; }
.stage[data-state="result"] .bug__lines *:nth-child(4) { animation-delay: .4s; }
.stage[data-state="result"] .bug__lines *:nth-child(5) { animation-delay: .5s; }
.stage[data-state="result"] .bug__lines *:nth-child(6) { animation-delay: .65s; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.glitch {
  position: relative; margin: 6px 0 10px;
  font-size: clamp(30px, 8vw, 68px); font-weight: 900; letter-spacing: .04em; line-height: 1;
  color: #fff; text-shadow: 0 0 26px rgba(var(--danger-rgb), .7);
  white-space: nowrap; max-width: 100%;
  animation: flicker 3s infinite;
}
/* The copies must be exactly the same width as the heading, otherwise the text
   re-wraps inside them and the words overlap. Offsets are done with transform. */
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; overflow: hidden;
  white-space: nowrap; pointer-events: none;
}
.glitch::before { transform: translateX(2px); text-shadow: -2px 0 var(--accent); animation: glitchA 2.3s infinite linear alternate-reverse; }
.glitch::after { transform: translateX(-2px); text-shadow: 2px 0 var(--danger); animation: glitchB 1.7s infinite linear alternate-reverse; }
@keyframes glitchA {
  0% { clip-path: inset(12% 0 78% 0); } 10% { clip-path: inset(62% 0 8% 0); } 20% { clip-path: inset(30% 0 55% 0); }
  30% { clip-path: inset(80% 0 5% 0); } 40% { clip-path: inset(5% 0 90% 0); } 50% { clip-path: inset(45% 0 40% 0); }
  60% { clip-path: inset(70% 0 15% 0); } 70% { clip-path: inset(20% 0 65% 0); } 80% { clip-path: inset(55% 0 30% 0); }
  90% { clip-path: inset(8% 0 85% 0); } 100% { clip-path: inset(40% 0 45% 0); }
}
@keyframes glitchB {
  0% { clip-path: inset(70% 0 10% 0); } 10% { clip-path: inset(15% 0 70% 0); } 20% { clip-path: inset(85% 0 2% 0); }
  30% { clip-path: inset(35% 0 50% 0); } 40% { clip-path: inset(60% 0 25% 0); } 50% { clip-path: inset(5% 0 88% 0); }
  60% { clip-path: inset(48% 0 38% 0); } 70% { clip-path: inset(78% 0 8% 0); } 80% { clip-path: inset(22% 0 60% 0); }
  90% { clip-path: inset(66% 0 20% 0); } 100% { clip-path: inset(12% 0 75% 0); }
}
@keyframes flicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }

.threat-card {
  width: 100%; max-width: 620px; margin-top: 26px; padding: 20px 22px; text-align: left;
  border-radius: var(--r); border: 1px solid rgba(var(--danger-rgb), .45);
  background: linear-gradient(180deg, rgba(40, 12, 22, .75), rgba(13, 20, 38, .8));
  box-shadow: 0 20px 70px rgba(var(--danger-rgb), .18), inset 0 1px 0 rgba(255, 255, 255, .06);
  opacity: 0; transform: translateY(20px);
}
.stage[data-state="result"] .threat-card { animation: rise .7s var(--ease-out) .45s forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.threat-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.threat-name { font-family: var(--mono); font-size: 17px; font-weight: 700; color: #fff; }
.chip { padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.chip-danger { background: var(--danger); color: #fff; box-shadow: 0 0 18px rgba(var(--danger-rgb), .6); animation: blink 1.1s infinite; }
.chip-ok { background: var(--ok); color: #03281b; box-shadow: 0 0 18px rgba(52, 211, 153, .5); }

.threat-grid { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 0; font-size: 14px; }
.threat-grid dt { color: var(--muted); }
.threat-grid dd { margin: 0; min-width: 0; }
.threat-grid code { font-family: var(--mono); font-size: 13px; color: #ffd4db; word-break: break-all; }
.threat-grid code.hash { color: #b9c6df; font-size: 11.5px; }

.meter { margin-top: 16px; }
.meter__head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.meter__head b { color: #fff; font-variant-numeric: tabular-nums; }
.meter__bar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.meter__bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--warn), var(--danger-2), var(--danger));
  background-size: 200% 100%;
  transition: width 1.4s cubic-bezier(.2, .9, .2, 1) .8s;
  animation: meterGlow 1.6s linear infinite;
  box-shadow: 0 0 14px rgba(var(--danger-rgb), .7);
}
@keyframes meterGlow { to { background-position: -200% 0; } }

.techniques { margin-top: 16px; }
.techniques[hidden] { display: none; }
.techniques__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.techniques__list { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-chip { font-family: var(--mono); font-size: 11.5px; padding: 4px 9px; border-radius: 8px; color: #ffd4db; background: rgba(var(--danger-rgb), .12); border: 1px solid rgba(var(--danger-rgb), .35); white-space: nowrap; }

.behaviors { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; font-size: 13.5px; }
.behaviors li { display: flex; gap: 10px; align-items: flex-start; opacity: 0; transform: translateX(-10px); }
/* Animate only once the result panel is actually on screen, staggered by --d. */
.stage[data-state="result"] .behaviors li { animation: slideIn .45s var(--ease-out) var(--d, 0s) forwards; }
.behaviors li::before { content: '▲'; color: var(--danger); font-size: 10px; margin-top: 4px; }
@keyframes slideIn { to { opacity: 1; transform: none; } }

.threat-ref { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: #8fd8ff; text-decoration: none; border-bottom: 1px dashed rgba(143, 216, 255, .5); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.threat-ref[hidden] { display: none; }
.threat-ref:hover { color: #cdeeff; border-color: #cdeeff; }
.threat-ref svg { width: 16px; height: 16px; }

.result-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
.btn {
  font: inherit; font-weight: 700; font-size: 15px; padding: 14px 24px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; transition: transform .2s var(--ease-out), box-shadow .2s, background .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn[disabled]:hover, .btn[disabled]:active { transform: none; }
.btn-danger { background: linear-gradient(135deg, var(--danger), var(--danger-2)); color: #fff; box-shadow: 0 10px 36px rgba(var(--danger-rgb), .4); }
.btn-danger:hover { box-shadow: 0 14px 44px rgba(var(--danger-rgb), .55); }
.btn-danger[disabled] { opacity: .7; cursor: progress; transform: none; }
.btn-ghost { background: var(--panel); color: var(--fg); border-color: var(--line); }
.btn-ghost:hover { border-color: rgba(var(--accent-rgb), .5); }

/* neutralized state */
.threat-card.neutralized { border-color: rgba(52, 211, 153, .45); box-shadow: 0 20px 70px rgba(52, 211, 153, .12); }
.threat-card.neutralized .threat-name { text-decoration: line-through; color: var(--muted); }
.threat-card.neutralized .meter__bar i { background: var(--ok); box-shadow: none; animation: none; width: 4% !important; }

/* ---------- cleaning / removal animation ---------- */
.cleaning { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.cleaning[hidden] { display: none; }
.cleaning__row { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 10px; }
.cleaning__spin { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid rgba(52, 211, 153, .25); border-top-color: var(--ok); animation: spin .8s linear infinite; }
.cleaning__step { flex: 1; min-width: 0; color: #d4f7e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cleaning__pct { font-family: var(--mono); font-weight: 700; color: var(--ok); font-variant-numeric: tabular-nums; }
.cleaning__bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.cleaning__bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--ok), var(--accent)); box-shadow: 0 0 12px rgba(52, 211, 153, .6); transition: width .5s var(--ease-out); }
.cleaning__log { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; font-family: var(--mono); font-size: 12px; color: #9fd9c3; }
.cleaning__log li { display: flex; gap: 8px; align-items: center; animation: logIn .25s ease-out; }
.cleaning__log li::before { content: '✓'; color: var(--ok); }

/* ---------- clean result screen ---------- */
.safe-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px;
  background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .5); color: #c9f7e4;
  font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
}
.safe-badge__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--ok); color: #03281b; display: grid; place-items: center; font-weight: 900; box-shadow: 0 0 16px rgba(52, 211, 153, .6); }
.safe-wrap { position: relative; width: 190px; height: 190px; display: grid; place-items: center; margin: 18px 0 6px; animation: float 5.5s ease-in-out infinite; }
.safe-ring { position: absolute; inset: 34px; border-radius: 50%; border: 2px solid rgba(52, 211, 153, .5); animation: pulse 2.8s ease-out infinite; }
.safe-ring.delay { animation-delay: 1.4s; }
.safe-shield { width: 130px; height: 130px; filter: drop-shadow(0 12px 32px rgba(52, 211, 153, .4)); }
.safe-check { stroke-dasharray: 1; stroke-dashoffset: 1; }
.stage[data-state="clean"] .safe-check { animation: draw .8s var(--ease-out) .2s forwards; }
.safe-title { font-size: clamp(30px, 7vw, 54px); font-weight: 900; letter-spacing: -.01em; margin: 6px 0 10px; background: linear-gradient(90deg, #34d399, #22d3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-clean { max-width: 540px; margin-top: 24px; }
.stat__value--ok { color: var(--ok); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; }
  body.shake .stage, body.shake .topbar { animation: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 520px) {
  .topbar { padding: 12px 14px; }
  .brand-name { font-size: 16px; }
  .status-pill { font-size: 12px; padding: 6px 10px; }
  .radar { width: 230px; height: 230px; }
  .percent { font-size: 46px; }
  .stats { gap: 8px; }
  .stat__value { font-size: 20px; }
  .threat-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .threat-grid dt { margin-top: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
  .scan-btn__label { padding: 16px 28px; font-size: 16px; }
  .current-file code { max-width: 55vw; }
  /* stack the key field and its button so neither is squeezed */
  .license__row { flex-wrap: wrap; }
  .license__input { flex: 1 1 100%; font-size: 17px; letter-spacing: .1em; }
  .license__row .btn { flex: 1 1 100%; }
}