:root {
  color-scheme: dark;
  --canvas: #12151c;
  --surface-1: #1a202a;
  --surface-2: #202633;
  --border: #323b4b;
  --accent: #8fa8ff;
  --accent-solid: #4867d8;
  --accent-surface: #22314d;
  --accent-border: #465f93;
  --text-primary: #eef2fb;
  --text-secondary: #b4bdd0;
  --text-disabled: #737d92;
  --status: #ff9f9f;
  --status-surface: #45262c;
  --status-border: rgba(255, 133, 133, 0.26);
  --font-sans: "Segoe UI", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text-primary); font-family: var(--font-sans); }

.result-page { position: relative; display: grid; min-height: 100vh; place-items: center; overflow: hidden; padding: 32px 20px; }
.result-page::before { position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(143, 168, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 168, 255, 0.025) 1px, transparent 1px); background-size: 36px 36px; content: ""; }
.result-page--success { --status: var(--accent); --status-surface: var(--accent-surface); --status-border: var(--accent-border); }
.result-page--account-mismatch, .result-page--expired, .result-page--used { --status: #ffd27a; --status-surface: #443923; --status-border: #755f32; }

.result-card { width: min(100%, 500px); padding: 0 24px 24px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface-1); box-shadow: 0 18px 48px rgba(4, 7, 12, 0.42); }
.brand { display: flex; height: 52px; align-items: center; gap: 9px; margin: 0 -24px 28px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.brand__mark { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--accent-border); border-radius: 2px; background: var(--accent-solid); color: #fff; }
.brand__mark svg { width: 16px; height: 16px; }
.brand__name { color: var(--accent); font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: -0.02em; }
.status-icon { display: grid; width: 48px; height: 48px; margin-bottom: 20px; place-items: center; border: 1px solid var(--status-border); border-radius: 2px; background: var(--status-surface); color: var(--status); font-family: var(--font-mono); font-size: 26px; font-weight: 700; }
.eyebrow { margin: 0 0 8px; color: var(--status); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
h1 { max-width: 430px; margin: 0; color: var(--text-primary); font-family: var(--font-mono); font-size: clamp(28px, 6vw, 38px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.12; }
.message { max-width: 430px; margin: 16px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 1.55; }
.next-step { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 13px 14px; border: 1px solid var(--border); border-radius: 2px; background: var(--surface-2); }
.next-step__number { display: grid; flex: 0 0 auto; width: 28px; height: 28px; place-items: center; border: 1px solid var(--accent-border); border-radius: 2px; background: var(--accent-surface); color: var(--accent); font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.next-step p { margin: 0; color: var(--text-primary); font-size: 14px; line-height: 1.45; }
.figma-link { display: flex; min-height: 44px; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; border: 1px solid var(--accent-border); border-radius: 2px; background: var(--accent-solid); color: #fff; font-family: var(--font-mono); font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color 150ms ease, box-shadow 150ms ease; }
.figma-link:hover { background: #5875e2; box-shadow: 0 3px 10px rgba(88, 114, 216, 0.28); }
.figma-link:focus-visible { outline: 2px solid #b8cbff; outline-offset: 3px; }
.security-note { margin: 14px 0 0; color: var(--text-disabled); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; text-align: center; }

@media (max-width: 520px) {
  .result-page { align-items: end; padding: 12px; }
  .result-card { padding: 0 18px 20px; }
  .brand { margin-right: -18px; margin-left: -18px; }
  h1 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) { .figma-link { transition: none; } }