:root {
  color-scheme: dark;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #101011;
  color: #f4f3f2;
  --muted: #a5a5ad;
  --accent: #ff795e;
}
* { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.6; }
main { min-height: 100svh; display: grid; place-items: center; padding: 28px 20px; }
.verify-card {
  width: 100%; max-width: 400px; padding: 37px 31px 20px;
  text-align: center; background: #19191c; border: 1px solid #333337;
  border-radius: 20px; box-shadow: 0 16px 56px #0003;
  animation: arrive 420ms cubic-bezier(.2,.7,.2,1) both;
  transition: border-color 280ms ease;
}
.logo { display: block; margin: 0 auto 22px; border-radius: 16px; object-fit: contain; }
h1 { font-size: 25px; font-weight: 600; line-height: 1.25; letter-spacing: -.7px; margin: 0 0 12px; }
.description { font-size: 14px; color: #b7b7bf; line-height: 1.7; margin: 0 auto; max-width: 290px; overflow-wrap: anywhere; }
.primary {
  display: flex; position: relative; align-items: center; justify-content: center;
  gap: 12px; min-height: 49px; margin-top: 27px; padding: 12px 39px;
  border: 1px solid #ff8c74; border-radius: 9px; background: var(--accent);
  color: #24130e; text-decoration: none; font-size: 14px; font-weight: 650;
  transition: background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.primary:hover { background: #ff8b74; transform: translateY(-1px); box-shadow: 0 4px 17px #ff795e16; }
.primary:active { transform: translateY(0) scale(.99); }
.primary[aria-disabled=true] { opacity: .7; pointer-events: none; cursor: wait; }
.arrow { position: absolute; right: 17px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform 180ms ease; }
.primary:hover .arrow { transform: translateX(2px); }
.spinner { display: none; position: absolute; right: 18px; width: 16px; height: 16px; border: 2px solid #24130e44; border-top-color: #24130e; border-radius: 50%; animation: spin 700ms linear infinite; }
.is-busy .spinner { display: block; }
.is-busy .arrow { display: none; }
.note { color: var(--muted); font-size: 11px; margin: 15px 0 5px; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.privacy { min-height: 44px; padding: 8px 12px; background: transparent; border: 0; font-size: 11px; color: var(--muted); transition: color 160ms ease; }
.privacy:hover { color: #f4f3f2; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.verified { border-color: #496b56; }
.verified h1 { animation: result-in 300ms ease both; }
.verified .primary { background: #a4dbb9; border-color: #b2e9c6; }
.verified .primary:hover { background: #b8e6c9; }
.feedback { text-align: left; font-size: 12px; color: #f3c0b2; background: #2d2321; border: 1px solid #77534b; padding: 12px; border-radius: 8px; margin-top: 15px; animation: result-in 200ms ease both; }
[hidden] { display: none !important; }
dialog { width: calc(100% - 32px); max-width: 480px; background: #1b1b1e; color: #eeeef1; border: 1px solid #3c3c42; border-radius: 17px; padding: 22px; box-shadow: 0 24px 90px #0008; }
dialog[open] { animation: arrive 200ms ease both; }
dialog::backdrop { background: #000a; backdrop-filter: blur(4px); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.dialog-header h2 { font-size: 19px; line-height: 1.3; margin: 0; font-weight: 600; }
.dialog-header button { width: 44px; height: 44px; background: #242429; border: 1px solid #414147; border-radius: 9px; font-size: 24px; flex-shrink: 0; }
dialog p { color: #b7b7bf; font-size: 13px; line-height: 1.8; }
.noscript { padding: 16px; text-align: center; color: #f3c0b2; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes result-in { from { opacity: .3; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 380px) { .verify-card { padding: 30px 22px 16px; } h1 { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .primary:hover, .primary:active { transform: none; } }