.page-scanner {
  background:
    radial-gradient(700px 440px at 50% 0, rgba(168, 85, 247, .16), transparent 65%),
    #0d0913;
  border-block: 1px solid rgba(192, 132, 252, .18);
}

.scanner-heading {
  max-width: 900px;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.scanner-kicker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
  color: #d8b4fe;
  font-weight: 800;
}

.scanner-kicker::before {
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  background: #c084fc;
  box-shadow: 0 0 18px rgba(192, 132, 252, .7);
  content: "";
}

.scanner-heading h2 {
  margin: 0;
  color: #faf7ff !important;
  font-size: clamp(2.35rem, 5.8vw, 5rem);
  line-height: 1;
  letter-spacing: -.055em;
}

.scanner-heading > p:last-child {
  max-width: 760px;
  margin: 1.5rem auto 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
}

.scanner-card {
  max-width: 1050px;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border: 1px solid rgba(192, 132, 252, .32);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(39, 24, 59, .94), rgba(18, 13, 27, .98));
  box-shadow: 0 26px 75px rgba(0, 0, 0, .34);
}

.scanner-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
}

.scanner-url-wrap {
  position: relative;
}

.scanner-url-wrap::before {
  position: absolute;
  top: 50%;
  left: 1.15rem;
  width: 1rem;
  height: 1rem;
  border: 3px solid #bca5d2;
  border-radius: 50%;
  content: "";
  transform: translateY(-65%);
  pointer-events: none;
}

.scanner-url-wrap::after {
  position: absolute;
  top: calc(50% + .35rem);
  left: 2rem;
  width: .55rem;
  height: 3px;
  background: #bca5d2;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
  pointer-events: none;
}

.scanner-url-wrap input {
  width: 100%;
  min-height: 64px;
  padding: .9rem 1rem .9rem 3.2rem;
  border: 1px solid #785697 !important;
  border-radius: 10px;
  font-size: 1.05rem;
}

.scanner-submit {
  min-width: 170px;
  min-height: 64px;
  padding: .85rem 1.5rem;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 900;
}

.scanner-consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin: 1.25rem 0 0;
  color: #eee6f5;
}

.scanner-consent input {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: .18rem;
  accent-color: #9333ea;
}

.scanner-fine-print {
  margin: 1rem 0 0;
  color: #aa9ab9;
  font-size: .85rem;
}

.scanner-status {
  min-height: 1.5rem;
  margin: 1rem 0 0;
  color: #d8cbe3;
  font-weight: 750;
}

.scanner-status[data-type="error"] { color: #fda4af; }
.scanner-status[data-type="success"] { color: #c4f1d5; }

.scanner-progress {
  height: 4px;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
}

.scanner-progress::before {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6d28d9, #c084fc);
  content: "";
  animation: scan-progress 1.15s ease-in-out infinite alternate;
}

@keyframes scan-progress {
  from { transform: translateX(-20%); }
  to { transform: translateX(220%); }
}

.scan-results {
  max-width: 1050px;
  margin: 2rem auto 0;
  scroll-margin-top: 100px;
}

.scan-results-header {
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: 16px 16px 0 0;
  background: var(--surface);
}

.scan-results-header h3 {
  margin: 0;
  color: #faf7ff !important;
  font-size: 1.55rem;
}

.scan-results-header p {
  margin: .45rem 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: .85rem;
}

.scan-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  padding: 1rem;
  border-inline: 1px solid var(--line);
  background: rgba(18, 13, 27, .94);
}

.scan-metric {
  display: grid;
  gap: .2rem;
  padding: 1rem;
  color: inherit;
  border: 1px solid rgba(192, 132, 252, .22);
  border-radius: 12px;
  background: rgba(25, 17, 36, .96);
  text-align: center;
}

button.scan-metric { cursor: pointer; }
body:not(.failure-lab) button.scan-metric { background: rgba(25, 17, 36, .96); }
body:not(.failure-lab) button.scan-metric[aria-pressed="true"] { border-color: #c084fc; background: linear-gradient(135deg, #6d28d9, #9333ea); box-shadow: inset 0 0 0 2px #c084fc; }

.scan-metric strong { font-size: 1.65rem; }
.scan-metric span { color: var(--muted); font-size: .78rem; }
.scan-metric.fail strong { color: #fda4af; }
.scan-metric.review strong { color: #f5d0fe; }
.scan-metric.pass strong { color: #86efac; }
.scan-metric.score strong { color: #c084fc; }

.scan-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: .7rem;
  padding: 0 1rem 1rem;
  border-inline: 1px solid var(--line);
  background: rgba(18, 13, 27, .94);
}

.scan-toolbar input,
.scan-toolbar select {
  width: 100%;
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid rgba(192, 132, 252, .3);
  border-radius: 9px;
  background: #100b18;
  color: #f8f4fb;
}

.scan-result-context {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 1rem .85rem;
  border-inline: 1px solid var(--line);
  background: rgba(18, 13, 27, .94);
  color: var(--muted);
  font-size: .8rem;
}

.scan-findings {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0 0 16px 16px;
  background: rgba(10, 7, 16, .74);
}

.scan-finding-group + .scan-finding-group { margin-top: 2rem; }
.scan-finding-group h4 { margin: 0 0 .8rem; font-size: 1.2rem; }

.scan-finding {
  overflow: hidden;
  border: 1px solid rgba(192, 132, 252, .24);
  border-left-width: 4px;
  border-left-color: #c084fc;
  border-radius: 10px;
  background: var(--surface);
}

.scan-finding[data-impact="critical"],
.scan-finding[data-impact="serious"] { border-left-color: #fb7185; }
.scan-finding[data-impact="moderate"] { border-left-color: #facc15; }
.scan-finding[data-impact="minor"] { border-left-color: #60a5fa; }
.scan-finding.pass-item { border-left-color: #86efac; }

.scan-finding + .scan-finding { margin-top: .65rem; }

.scan-finding summary {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
}

.scan-impact { width: 10px; height: 10px; border-radius: 50%; background: #c084fc; }
[data-impact="critical"] .scan-impact, [data-impact="serious"] .scan-impact { background: #fb7185; }
[data-impact="moderate"] .scan-impact { background: #facc15; }
[data-impact="minor"] .scan-impact { background: #60a5fa; }
.pass-item .scan-impact { background: #86efac; }

.scan-finding-title { display: grid; gap: .18rem; }
.scan-finding-title strong { color: #f8f4fb; }
.scan-finding-title small { color: var(--muted); text-transform: capitalize; }
.scan-count { min-width: 2rem; padding: .2rem .5rem; border-radius: 999px; background: rgba(192,132,252,.14); text-align: center; font-weight: 850; }

.scan-finding-body { padding: 0 1rem 1rem 2.45rem; border-top: 1px solid rgba(192, 132, 252, .16); }
.scan-finding-body > p { color: var(--muted); }
.scan-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .75rem 0; }
.scan-chip { display: inline-block; padding: .25rem .5rem; border-radius: 999px; background: rgba(147, 51, 234, .18); color: #e9d5ff; font-size: .7rem; font-weight: 800; }
.scan-guide { display: inline-block; margin: .15rem 0 .85rem; }
.scan-node { margin-top: .65rem; padding: .8rem; border-radius: 8px; background: #09070f; }
.scan-node code { display: block; overflow-wrap: anywhere; color: #e9d5ff; font-size: .78rem; }
.scan-node p, .scan-truncated { margin: .65rem 0 0; color: #c9bdd6; font-size: .82rem; white-space: pre-line; }
.scan-empty { color: var(--muted); }
.scan-node-actions { display: flex; gap: .5rem; margin-top: .75rem; }
.scan-node-actions button,
.scan-export-actions button { min-height: 36px; padding: .45rem .75rem; border: 1px solid rgba(192, 132, 252, .32); border-radius: 8px; background: rgba(147, 51, 234, .14); color: #e9d5ff; font-weight: 800; }
.scan-empty-state { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.scan-empty-state h4 { margin: 0 0 .4rem; color: #f8f4fb; }
.scan-empty-state p { margin: 0; }

.scan-export-card {
  max-width: 1050px;
  margin: .8rem auto 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.scan-export-card summary { cursor: pointer; font-weight: 850; }
.scan-export-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: .8rem; }

@media (max-width: 720px) {
  .scanner-input-row { grid-template-columns: 1fr; }
  .scanner-submit { width: 100%; }
  .scan-summary { grid-template-columns: 1fr 1fr; }
  .scan-toolbar { grid-template-columns: 1fr; }
  .scan-result-context { display: grid; }
  .scan-export-actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .scanner-progress::before { animation: none; width: 100%; }
  .scan-results { scroll-behavior: auto; }
}