:root {
  color-scheme:light;
  font-family:"Segoe UI","Noto Sans TC","Microsoft JhengHei UI","PingFang TC",system-ui,sans-serif;
  --bg:#EEF2F7;
  --bg-paint:linear-gradient(160deg,#E8F1FA 0%,#F1ECF8 48%,#E9F5EF 100%);
  --bg-light:radial-gradient(50% 36% at 82% 6%,rgba(160,130,228,.22),transparent 70%),radial-gradient(50% 36% at 12% 62%,rgba(110,205,185,.22),transparent 70%);
  --ink:#1E2A4A; --ink-2:#526384; --ink-3:#8593B0;
  --line:rgba(30,42,74,.12); --line-strong:rgba(30,42,74,.22);
  --surface:rgba(30,42,74,.06); --surface-2:rgba(30,42,74,.13);
  --key:#1E2A4A; --key-ink:#FFFFFF;
  --luma:#2F938A; --luma-ink:#276C66; --ring-a:#2F938A; --ring-b:#7A66CF; --coral:#B93A32;
  --edge:linear-gradient(135deg,rgba(255,255,255,.96),rgba(122,102,207,.22) 52%,rgba(47,147,138,.22));
  --rule:linear-gradient(90deg,transparent,var(--line-strong) 30%,rgba(47,147,138,.25) 70%,transparent);
  color:var(--ink); background:var(--bg);
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { min-height:100vh; min-height:100svh; margin:0; display:grid; place-items:center; padding:40px 24px; background:var(--bg-light),var(--bg-paint); }
.shell { width:min(100%,500px); padding:32px 40px; border:1px solid transparent; border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(255,255,255,.58)) padding-box,var(--edge) border-box; box-shadow:0 18px 48px rgba(30,42,74,.12),0 2px 6px rgba(30,42,74,.08),inset 0 1px 0 #fff; }
.mark { display:flex; align-items:center; gap:10px; color:var(--ink); font-size:19px; font-weight:600; letter-spacing:-.025em; }
.mark::before { content:""; width:23px; height:23px; flex:none; border:3px solid var(--luma); border-inline-end-color:var(--ring-b); border-radius:50%; transform:rotate(-30deg); }
h1 { margin:28px 0 10px; font-size:30px; line-height:1.25; letter-spacing:-.025em; font-weight:600; text-wrap:balance; }
p { margin:12px 0; color:var(--ink-2); line-height:1.7; }
label { display:block; margin:16px 0 7px; font-size:14px; font-weight:500; }
input { width:100%; min-height:46px; padding:11px 14px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(255,255,255,.72); color:var(--ink); font:inherit; }
button { cursor:pointer; min-height:44px; padding:11px 20px; border:1px solid var(--line-strong); border-radius:999px; background:var(--surface); color:var(--ink); font:inherit; font-weight:500; }
button:hover { background:var(--surface-2); }
button.primary { width:100%; border-color:var(--key); background:var(--key); color:var(--key-ink); font-weight:600; }
button.primary:hover { background:#2D3E65; }
button:disabled { opacity:.55; cursor:wait; }
:is(input,button,a,select):focus-visible { outline:3px solid var(--luma); outline-offset:4px; }
form button { margin-top:22px; }
.divider { display:flex; align-items:center; gap:16px; margin:22px 0 4px; color:var(--ink-2); font-size:13px; }
.divider::before,.divider::after { content:""; height:1px; flex:1; background:var(--rule); }
.actions { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-top:10px; }
.actions button { border:0; background:transparent; padding:8px 0; color:var(--ink-2); text-decoration:underline; text-underline-offset:4px; font-size:14px; }
#notice { margin:16px 0; color:var(--luma-ink); line-height:1.7; overflow-wrap:anywhere; }
#notice:empty { display:none; }
#notice:has(+ #errorCode:not([hidden])) { color:var(--coral); }
#verifySection { margin-top:20px; }
#verifySection button { width:100%; }
#verifySection button + button { margin-top:12px; }
#errorCode { display:block; margin:0 0 18px; font-size:12px; color:var(--ink-2); overflow-wrap:anywhere; }
a { display:inline-flex; align-items:center; min-height:44px; color:var(--luma-ink); text-underline-offset:4px; overflow-wrap:anywhere; }
.consent-note { margin:20px 0 0; font-size:12.5px; line-height:1.7; }
.consent-note a { display:inline; min-height:0; }
footer { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px; padding-top:12px; background:var(--rule) top/100% 1px no-repeat; font-size:13px; }
#accountStoreLink { margin-top:12px; padding:9px 20px; border:1px solid var(--line-strong); border-radius:999px; text-decoration:none; }
.payment-emblem { display:grid; place-items:center; width:74px; height:74px; margin:32px 0 0; border:1px solid transparent; border-radius:50%; background:linear-gradient(#fff,#F5F7FB) padding-box,linear-gradient(135deg,var(--ring-a),var(--ring-b)) border-box; box-shadow:0 10px 28px rgba(30,42,74,.12); color:var(--luma-ink); font-size:30px; }
.payment h1 { font-size:28px; margin-top:24px; }
.support-scope,.start-conditions { font-size:13px; line-height:1.6; }
.signed-in-account { font-size:14px; overflow-wrap:anywhere; color:var(--ink); }
.refund-guide { margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.refund-guide h2 { font-size:14px; font-weight:600; margin:16px 0 5px; color:var(--ink); }
.refund-guide p { font-size:13px; line-height:1.65; margin:0; }
@media(max-width:540px) { body { padding:24px 16px; } .shell { padding:28px 24px; border-radius:20px; } h1 { font-size:27px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }