:root {
  --ink: #0b1216;
  --text: #f3faf7;
  --muted: #a7c0c7;
  --mint: #b8f0d0;
  --teal: #5ec4d0;
  --coral: #ff8f7a;
  --sand: #f0c49a;
  --violet: #b39ddb;
  --ok: #7dcea6;
  --warn: #e0b07a;
  --bad: #f09090;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dial: 540.35398;
  --pad: max(24px, calc((100vw - 1280px) / 2 + 40px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, system-ui, sans-serif;
  font-optical-sizing: auto;
  color: var(--text);
  background: var(--ink);
  letter-spacing: -0.014em;
  line-height: 1.55;
  overflow-x: hidden;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(125deg, #0b1216 0%, #122028 40%, #1a1530 70%, #0e1c22 100%);
}
.splash span {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.75;
  animation: drift 16s var(--ease) infinite alternate;
}
.s1 { width: 55vw; height: 55vw; top: -18%; left: -10%; background: #276a85; }
.s2 { width: 40vw; height: 40vw; top: 10%; right: -12%; background: #d66b5a; animation-delay: -4s; }
.s3 { width: 35vw; height: 35vw; bottom: -10%; left: 20%; background: #6b4ea3; animation-delay: -8s; }
.s4 { width: 28vw; height: 28vw; bottom: 5%; right: 15%; background: #2a7a6a; animation-delay: -11s; }

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(30px, 40px) scale(1.08); }
}

.bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 18px var(--pad) 0;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.06em;
}
.logo i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--teal), var(--coral));
  box-shadow: 0 8px 24px rgba(94, 196, 208, 0.35);
}

.top-score {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
}
.top-score.is-live {
  border-color: rgba(184, 240, 208, 0.28);
  box-shadow: 0 0 0 1px rgba(184, 240, 208, 0.08), 0 12px 40px rgba(0, 0, 0, 0.25);
}
.ts {
  min-width: 72px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
}
.ts-k {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.ts-v {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ts-v.sm {
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ts-v.ok { color: var(--ok); }
.ts-v.warn { color: var(--warn); }
.ts-v.bad { color: var(--bad); }
.ts-v.muted { color: var(--muted); }

.page {
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 96px);
  padding: 28px var(--pad) 40px;
  animation: rise 0.75s var(--ease) both;
}
.page[hidden] { display: none !important; }

.story {
  position: relative;
  z-index: 2;
  padding: 8px var(--pad) 80px;
}
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
}
.story-grid article {
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.story-grid .n {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--sand);
  margin-bottom: 12px;
}
.story-grid h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.story-grid p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}
.story-foot {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--muted);
  max-width: 36em;
}

body.is-busy .story,
body.is-result .story {
  display: none;
}

.idle {
  padding-top: 28px;
}

.hero {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(200px, 260px);
  gap: 36px;
  align-items: start;
}

.col-copy h1 {
  max-width: 9em;
}
.col-copy .lede {
  margin-bottom: 0;
}

.col-action {
  margin: 36px auto 0;
  width: 100%;
  max-width: 720px;
  padding: 32px 36px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(18px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.filters-art {
  padding-top: 4px;
}
.filters-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.filter-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  perspective: 800px;
}
.fcard {
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
  transform-origin: center right;
  transition: transform 0.25s var(--ease), border-color 0.2s;
}
.fcard b {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 3px;
}
.fcard span {
  font-size: 12px;
  color: var(--muted);
}
.f1 { transform: rotate(2deg); border-color: rgba(94, 196, 208, 0.35); }
.f2 { transform: rotate(-2.5deg) translateX(-6px); border-color: rgba(240, 196, 154, 0.35); }
.f3 { transform: rotate(1.5deg); border-color: rgba(255, 143, 122, 0.4); }
.f4 { transform: rotate(-2deg) translateX(-8px); border-color: rgba(179, 157, 219, 0.4); }
.f5 { transform: rotate(2.2deg); border-color: rgba(184, 240, 208, 0.35); }
.fcard:hover {
  transform: rotate(0deg) translateX(-4px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .f1, .f2, .f3, .f4, .f5 { transform: none; }
}

.hint-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.hint-pills span {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.action-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.lab-tight {
  margin-top: 18px;
}
.subject-row {
  margin-bottom: 4px;
}

.history-wrap {
  margin: 28px auto 0;
  width: 100%;
  max-width: 720px;
}
.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}
.history-list button {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.history-list .h-meta {
  color: var(--muted);
  font-size: 12px;
}
.history-list .h-email {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  word-break: break-all;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
}

h1 {
  margin: 0 0 18px;
  font-size: clamp(48px, 7.5vw, 84px);
  font-weight: 650;
  letter-spacing: -0.07em;
  line-height: 0.98;
  max-width: 9em;
}
h1 em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(90deg, var(--teal), var(--mint), var(--sand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lede {
  margin: 0;
  max-width: 28em;
  font-size: 17px;
  color: var(--muted);
  line-height: 1.7;
}

.lab {
  display: block;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mint);
}

.email-row {
  display: flex;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.email-row input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  padding: 16px;
  letter-spacing: -0.02em;
}

.btn-copy {
  appearance: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, #6ed7e0, #3aa8b4);
  color: #062025;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 0 18px;
  cursor: pointer;
}
.btn-copy:hover { filter: brightness(1.08); }

.link-new {
  appearance: none;
  border: none;
  background: none;
  display: block;
  margin: 12px 0 22px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-new:hover { color: var(--sand); }

.btn-go {
  appearance: none;
  border: none;
  width: 100%;
  padding: 17px 22px;
  border-radius: 14px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #1a0f08;
  cursor: pointer;
  background: linear-gradient(135deg, var(--sand), var(--coral), #ff6b8a);
  box-shadow: 0 14px 40px rgba(255, 143, 122, 0.35);
  transition: transform 0.15s var(--ease), filter 0.2s;
}
.btn-go:hover { filter: brightness(1.05); }
.btn-go:active { transform: translateY(1px); }
.btn-go:disabled { opacity: 0.55; cursor: wait; }

.btn-ghost {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 14px 22px;
  border-radius: 12px;
  cursor: pointer;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

.scan {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.scan-block { max-width: 420px; }
.scan h2 {
  margin: 0 0 10px;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.045em;
}
.scan p { margin: 0; color: var(--muted); }

.radar {
  width: 110px;
  height: 110px;
  position: relative;
  margin-bottom: 28px;
}
.radar i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(94, 196, 208, 0.35);
  animation: ping 1.8s var(--ease) infinite;
}
.radar i:nth-child(2) { inset: 16px; border-color: rgba(240, 196, 154, 0.4); animation-delay: 0.25s; }
.radar i:nth-child(3) { inset: 32px; border-color: rgba(255, 143, 122, 0.45); animation-delay: 0.5s; }
.radar b {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 28px rgba(184, 240, 208, 0.7);
}
@keyframes ping {
  0% { opacity: 0.2; transform: scale(0.9); }
  50% { opacity: 1; }
  100% { opacity: 0.2; transform: scale(1.06); }
}

.result-hero {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 36px;
  max-width: 900px;
}

.dial-wrap { position: relative; width: 200px; height: 200px; }
.dial-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 28px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.block.wide {
  grid-column: 1 / -1;
}

.dial-wrap { position: relative; width: 200px; height: 200px; }
.dial {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.dial .track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 12;
}
.dial .prog {
  fill: none;
  stroke: var(--mint);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: var(--dial);
  stroke-dashoffset: var(--dial);
  transition: stroke-dashoffset 1.1s var(--ease), stroke 0.3s;
}
.dial .prog.spam { stroke: var(--bad); }
.dial .prog.mixed { stroke: var(--warn); }
.dial .prog.wait { stroke: var(--teal); }

.dial-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding-top: 64px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.dial-num strong {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: -0.07em;
}
.dial-num em {
  font-style: normal;
  font-size: 18px;
  color: var(--muted);
  margin-left: 2px;
}

.verdict-text h2 {
  margin: 12px 0 10px;
  font-size: clamp(24px, 3.5vw, 34px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.25;
  max-width: 16em;
}
.meta { margin: 0; color: var(--muted); font-size: 14px; }

.pill {
  display: inline-flex;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(94, 196, 208, 0.18);
  color: var(--teal);
}
.pill.spam, .pill.high, .pill.fail { background: rgba(240, 144, 144, 0.18); color: var(--bad); }
.pill.mixed, .pill.medium, .pill.warn { background: rgba(224, 176, 122, 0.18); color: var(--warn); }
.pill.wait, .pill.unknown { background: rgba(167, 192, 199, 0.15); color: var(--muted); }
.pill.soft, .pill.clean, .pill.low, .pill.inbox { background: rgba(125, 206, 166, 0.18); color: var(--ok); }

.strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
.tile {
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.tile .k {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.tile .v {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.pill-inline {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

.blocks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 28px;
}
.block {
  padding: 22px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.block[hidden] { display: none !important; }
.block header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.block h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.block > p {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--muted);
}
.ip-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px !important;
  color: var(--teal) !important;
}
.subj {
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--muted);
}

.findings { list-style: none; margin: 0; padding: 0; }
.findings li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
}
.findings li:last-child { border-bottom: none; }
.findings .t { font-weight: 650; }
.findings .d { margin-top: 2px; font-size: 12px; color: var(--muted); }
.findings .badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge.ok, .badge.pass { color: var(--ok); }
.badge.warn { color: var(--warn); }
.badge.fail { color: var(--bad); }
.badge.info { color: var(--muted); }

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.result-actions .btn-go { width: auto; min-width: 180px; }

.toast {
  position: fixed;
  z-index: 40;
  left: var(--pad);
  bottom: 28px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--mint);
  color: #0b1216;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  animation: rise 0.35s var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .col-action {
    max-width: none;
    padding: 28px 22px;
  }
  .filter-stack {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .f1, .f2, .f3, .f4, .f5 {
    transform: none;
    flex: 1 1 140px;
  }
  .strip { grid-template-columns: 1fr 1fr; }
  .blocks { grid-template-columns: 1fr; }
  .result-hero { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  h1 { font-size: 40px; }
  .top-score { width: 100%; }
  .ts { flex: 1; min-width: 56px; }
}