:root {
  --bg: #f2f2f7; --panel: #fff; --text: #000; --muted: #8e8e93;
  --border: rgb(60 60 67 / 13%);
  --accent: #0a84ff; --accent-soft: rgb(10 132 255 / 10%);
  --ok: #30d158; --fail: #ff3b30; --wait: #ff9f0a;
  --shadow: 0 1px 2px rgb(0 0 0 / 7%);
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #000; --panel: #1c1c1e; --text: #fff; --muted: #98989f;
    --border: rgb(84 84 88 / 34%); --accent-soft: rgb(10 132 255 / 18%);
    --shadow: 0 1px 3px rgb(0 0 0 / 50%);
  }
}
:root[data-theme='dark'] {
  --bg: #000; --panel: #1c1c1e; --text: #fff; --muted: #98989f;
  --border: rgb(84 84 88 / 34%); --accent-soft: rgb(10 132 255 / 18%);
  --shadow: 0 1px 3px rgb(0 0 0 / 50%);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 620px; margin: 0 auto; padding: 32px 20px 48px; }
h1 { font-size: 26px; letter-spacing: -.02em; margin: 0 0 8px; }
.lead { color: var(--muted); font-size: 14.5px; margin: 0 0 24px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 20px; transition: color .3s ease; }
.hint.sent { color: var(--ok); }

.section-title { font-size: 17px; letter-spacing: -.01em; margin: 28px 0 4px; }
.lead.small { font-size: 13.5px; margin-bottom: 14px; }

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.check.current { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.check.current .check-name::after {
  content: 'вы здесь'; margin-left: 8px; font-size: 11px; font-weight: 600;
  color: var(--accent); background: var(--accent-soft);
  padding: 2px 7px; border-radius: 20px; vertical-align: middle;
}
.check {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow);
  animation: rise .32s cubic-bezier(.34, 1.3, .64, 1) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}
.check-body { flex: 1; min-width: 0; }
.check-name { font-size: 15px; font-weight: 590; letter-spacing: -.01em; }
.check-note { font-size: 13px; color: var(--muted); margin-top: 2px; }
.check-time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }


.dot {
  width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: var(--muted); transition: background .4s ease, box-shadow .4s ease;
}
.check[data-state='wait'] .dot { background: var(--wait); animation: breathe 1.4s ease-in-out infinite; }
.check[data-state='ok'] .dot { background: var(--ok); box-shadow: 0 0 0 4px rgb(48 209 88 / 16%); }
.check[data-state='fail'] .dot { background: var(--fail); box-shadow: 0 0 0 4px rgb(255 59 48 / 16%); }
.check[data-state='fail'] { animation: shake .4s ease; }

.verdict {
  margin-top: 22px; padding: 16px 18px; border-radius: 14px;
  background: var(--accent-soft); border: 1px solid transparent;
  font-size: 14.5px; animation: rise .36s cubic-bezier(.34, 1.3, .64, 1);
}
.verdict.bad { background: rgb(255 59 48 / 12%); }
.verdict strong { display: block; margin-bottom: 4px; font-size: 15.5px; }
.hidden { display: none; }

.actions { display: flex; gap: 10px; margin-top: 22px; }
.btn {
  flex: 1; padding: 12px 16px; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 590;
  font-family: inherit; transition: transform .12s ease, opacity .2s ease;
}
.btn:active { transform: scale(.97); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.btn[disabled] { opacity: .5; cursor: default; }

@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes breathe { 50% { opacity: .35; transform: scale(.82); } }
@keyframes shake {
  25% { transform: translateX(-3px); } 50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}