:root {
  color-scheme: light dark;
  --fg: #1c2230;
  --muted: #7a869a;
  --line: #e4e8ef;
  --ok: #17a34a;
  --warn: #b45309;
  --bad: #c62828;
  --accent: #2f6fed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: #fbfcfe;
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
  :root { --fg: #e8edf6; --muted: #8b97ab; --line: #232a37; }
  body { background: #0c0f15; }
}

.shell {
  width: 100%;
  max-width: 460px;
  padding: 40px 24px 56px;
  text-align: center;
}

/* ---------- 环形成功标记 ---------- */
.spinner, .tick {
  width: 62px;
  height: 62px;
  margin: 0 auto 26px;
}
.spinner svg, .tick svg { width: 100%; height: 100%; display: block; }

.spinner { animation: fadein .25s ease both; }
.spinner .track { fill: none; stroke: var(--line); stroke-width: 3.4; }
.spinner .arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-dasharray: 90 220;
  transform-origin: 50% 50%;
  animation: spin 1.05s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.tick { display: none; animation: pop .32s cubic-bezier(.2, 1.4, .4, 1) both; }
.tick.show { display: block; }
.tick .ring { fill: none; stroke: var(--ok); stroke-width: 3.4; }
.tick .check {
  fill: none;
  stroke: var(--ok);
  stroke-width: 3.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  animation: draw .38s .12s ease forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

h1 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0 0 10px;
}
h1.ok { color: var(--ok); }
h1.bad { color: var(--bad); }

.sub {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  min-height: 1.6em;
}

/* 进度条：只在检测过程中出现 */
.meter {
  height: 3px;
  margin: 26px auto 0;
  width: 220px;
  border-radius: 99px;
  background: var(--line);
  overflow: hidden;
  transition: opacity .4s ease, height .4s ease, margin .4s ease;
}
.meter i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: var(--accent);
  transition: width .45s ease;
}
.meter.hide { opacity: 0; height: 0; margin-top: 0; }

.meta {
  margin: 18px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  min-height: 1.5em;
  word-break: break-all;
}

.foot {
  margin: 34px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  opacity: .85;
}

.trace {
  margin: 10px 0 0;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  color: var(--muted);
  opacity: .7;
  white-space: pre-wrap;
  word-break: break-all;
  display: none;
}
.trace.show { display: block; }