:root {
  color-scheme: dark;
  --bg: oklch(12% 0.026 302);
  --surface: oklch(18% 0.04 312);
  --surface-high: oklch(23% 0.052 320);
  --ink: oklch(96% 0.012 320);
  --ink-soft: oklch(84% 0.026 315);
  --muted: oklch(70% 0.032 310);
  --line: oklch(33% 0.06 315);
  --flame: oklch(72% 0.18 38);
  --flame-light: oklch(82% 0.13 55);
  --flame-deep: oklch(61% 0.21 22);
  --on-flame: oklch(16% 0.04 310);
}

* { box-sizing: border-box; }

body {
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 14%, oklch(42% 0.15 324 / 0.24), transparent 28rem),
    radial-gradient(circle at 82% 82%, oklch(48% 0.18 22 / 0.16), transparent 26rem),
    var(--bg);
  font-family: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
}

::selection { color: var(--on-flame); background: var(--flame); }

.payment-shell { width: min(640px, 100%); }
.payment-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 24px;
  color: var(--ink);
  font-size: 20px;
  font-family: "Bricolage Grotesque", "Noto Sans TC", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.payment-brand img {
  width: 54px;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 14px 34px oklch(5% 0.02 300 / 0.5);
}
.payment-card {
  position: relative;
  padding: clamp(30px, 7vw, 54px);
  background:
    radial-gradient(circle at 90% -12%, oklch(56% 0.18 24 / 0.23), transparent 22rem),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 32px 90px oklch(5% 0.02 300 / 0.58);
  overflow: hidden;
}
.payment-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -38px;
  width: 110px;
  height: 170px;
  background: linear-gradient(155deg, var(--flame-light), var(--flame-deep));
  clip-path: polygon(72% 0, 100% 14%, 42% 100%, 0 72%);
  opacity: 0.1;
  pointer-events: none;
}

h1 {
  max-width: 14ch;
  margin: 0;
  font-family: "Bricolage Grotesque", "Noto Sans TC", system-ui, sans-serif;
  font-size: clamp(30px, 7vw, 48px);
  line-height: 1.25;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.payment-lead {
  max-width: 52ch;
  margin: 14px 0 0;
  color: var(--ink-soft);
  line-height: 1.8;
  text-wrap: pretty;
}
.payment-status { min-height: 26px; margin: 28px 0 0; color: var(--flame-light); font-weight: 700; }
.license-panel { position: relative; z-index: 1; margin-top: 28px; }
.license-label { display: block; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.license-code {
  display: block;
  width: 100%;
  padding: 15px;
  overflow-wrap: anywhere;
  color: var(--ink);
  background: var(--surface-high);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.6;
  user-select: all;
}
.payment-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.payment-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  color: var(--on-flame);
  background: linear-gradient(135deg, var(--flame-light), var(--flame) 52%, var(--flame-deep));
  border: 1px solid transparent;
  border-radius: 999px;
  box-shadow: 0 10px 26px oklch(61% 0.21 22 / 0.24);
  font: inherit;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}
.payment-button:hover { transform: translateY(-2px); box-shadow: 0 15px 34px oklch(61% 0.21 22 / 0.34); }
.payment-button.secondary {
  color: var(--ink);
  background: var(--surface-high);
  border-color: var(--line);
  box-shadow: none;
}
.payment-button.secondary:hover { border-color: var(--flame); }
.payment-help { max-width: 56ch; margin: 18px 0 0; color: var(--muted); font-size: 13px; line-height: 1.75; }
.payment-footer { margin-top: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.payment-footer a { color: inherit; text-underline-offset: 3px; }
.legal-shell { width: min(760px, 100%); }
.legal-card h1 { max-width: none; }
.legal-meta { margin: 12px 0 0; color: var(--muted); font-size: 13px; }
.legal-card section { position: relative; z-index: 1; margin-top: 30px; }
.legal-card section + section { padding-top: 26px; border-top: 1px solid var(--line); }
.legal-card h2 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.45;
}
.legal-card p,
.legal-card li { color: var(--ink-soft); line-height: 1.85; }
.legal-card p { margin: 0; }
.legal-card p + p { margin-top: 10px; }
.legal-card ul,
.legal-card ol { margin: 10px 0 0; padding-left: 1.4em; }
.legal-card li + li { margin-top: 7px; }
.legal-contact {
  display: inline-flex;
  margin-top: 18px;
  color: var(--flame-light);
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 800;
  overflow-wrap: anywhere;
  text-underline-offset: 5px;
}
.legal-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; }
.legal-nav a[aria-current="page"] { color: var(--ink-soft); text-decoration-thickness: 2px; }
:where(a, button):focus-visible { outline: 3px solid var(--flame-light); outline-offset: 4px; }
[hidden] { display: none !important; }

@media (max-width: 520px) {
  body { padding: 18px 14px; }
  .payment-card { border-radius: 18px; }
  .payment-actions { display: grid; }
  .payment-button { width: 100%; }
}

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