/* Light account workspace. Keep these tokens scoped away from the sales page. */
.account-page{color-scheme:light;--paper:#fbf8ef;--card:#fffdf7;--rule:#efe9d9;--yellow:#f6d55c;--mint:#bfe8d8;--coral:#f9c6bf;--lilac:#e2d8ff;--pop:var(--yellow);--canvas:var(--paper);--surface:var(--card);--ink:#262733;--muted:#565668;--line:#e3dccb;--accent:#6b4de6;--accent-hover:#5636c1;--accent-soft:#ece6ff;--danger:#ab2437;--focus:#6b4de6;--control:10px;background:var(--paper) repeating-linear-gradient(to bottom,transparent 0 31px,var(--rule) 31px 32px)}
.account-page .nav-shell{max-width:1160px}
.account-page .site-header{background:#fff;height:76px}
.account-page .site-header a:not(.brand){font-size:14px;font-weight:600;color:var(--accent)}
.account-page .account-shell{padding-block:44px 64px;max-width:1120px}
.account-page .account-title{margin-bottom:32px}
.account-page .account-title h1{font-size:32px;letter-spacing:-.025em}
.account-page .account-title p{font-size:15px}
.account-page .auth-layout{grid-template-columns:minmax(0,1fr) minmax(0,450px);gap:72px;align-items:start}
.account-page .auth-intro{padding:26px 0 0}
.account-page .auth-intro h2{font-size:34px;line-height:1.5;letter-spacing:-.025em}
.account-page .auth-intro>p{margin-top:18px;font-size:15px;max-width:43ch}
.account-page .account-art{width:330px;height:220px;object-fit:contain;margin:12px auto 8px}
.account-page .auth-intro .auth-help{font-size:13px;max-width:46ch;margin-top:0}
.account-page .auth-panel{background:#fff;border:1px solid var(--line);padding:30px;border-radius:16px}
.account-page .auth-tabs{padding:4px;border-radius:10px;background:var(--surface);gap:4px}
.account-page .auth-tabs button{flex:1;border:0;background:transparent;font-size:14px;padding:10px}
.account-page .auth-tabs [aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.account-page .auth-panel h2{font-size:24px;margin:26px 0 8px}
.account-page .auth-description{font-size:14px;color:var(--muted);margin-bottom:20px}
.account-page form{gap:8px}
.account-page label{margin-top:12px;color:var(--ink)}
.account-page input,.account-page select,.account-page textarea{background:#fff;border-color:var(--line);border-radius:8px}
.account-page .button.primary{color:#fff!important;background:var(--accent)}
.account-page .button.primary:hover{background:var(--accent-hover)}
.account-page button,.account-page .button{transition:background-color 180ms ease-out,border-color 180ms ease-out}
.account-page button:disabled{cursor:not-allowed}
.account-page .link-button{font-size:14px;text-align:left}
.account-page .selected-package{margin-top:26px;background:var(--accent-soft);border-radius:12px;padding:20px 22px;max-width:440px}
.account-page .selected-package p{font-size:13px;color:var(--muted);margin:0 0 6px}
.account-page .selected-package strong,.account-page .checkout-package strong{display:block;font-size:16px;line-height:1.85;font-variant-numeric:tabular-nums}
.account-page .selected-package .link-button{padding:8px 0 0;min-height:36px}
.account-page .signup-package{padding:20px 0;margin-bottom:18px;border-block:1px solid var(--line);display:grid;gap:8px}
.account-page .signup-package h3{font-size:18px}
.account-page .signup-package p{font-size:13px;color:var(--muted)}
.account-page .signup-periods{display:flex;gap:4px;background:var(--surface);padding:4px;border-radius:10px;margin:10px 0 12px}
.account-page .signup-periods button{flex:1;border:0;background:transparent;min-height:44px;padding:8px;font-size:14px;color:var(--muted)}
.account-page .signup-periods button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent);font-weight:650}
.account-page .signup-plans{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.account-page .signup-plan{display:flex;flex-direction:column;align-items:flex-start;gap:6px;border:0;border-radius:0;background:#fff;padding:18px 14px;text-align:left;min-width:0;color:var(--ink)}
.account-page .signup-plan+button{border-left:1px solid var(--line)}
.account-page .signup-plan:hover{background:var(--surface)}
.account-page .signup-plan[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.account-page .signup-plan:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}
.account-page .signup-plan-name{font-size:18px;font-weight:700}
.account-page .signup-plan-price{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.5;margin-top:6px}
.account-page .signup-plan-unit{font-size:12px;color:var(--muted)}
.account-page .signup-plan-detail{font-size:12px;color:var(--muted);line-height:1.9;margin:10px 0;flex:1}
.account-page .signup-plan[aria-pressed=true] .signup-plan-unit,.account-page .signup-plan[aria-pressed=true] .signup-plan-detail{color:#564487}
.account-page .signup-plan-state{font-size:13px;font-weight:650;margin-top:4px}
.account-page .signup-package .signup-plan-note{margin-top:10px;font-size:12px}
.account-page [data-signup-price]{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.account-page .account-summary{padding:18px 0 24px;border-bottom:1px solid var(--line);margin-top:0}
.account-page .account-summary [data-verification-state]{font-size:13px;color:var(--muted)}
.account-page .account-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.account-page .account-section{background:#fff;padding:28px;border-radius:14px}
.account-page .checkout-package{padding:16px 18px;background:var(--accent-soft);border-radius:10px;margin-top:20px}
.account-page .checkout-package .link-button{padding:4px 0;min-height:36px}
.account-page .order-selection{display:grid;gap:8px;margin-top:16px}
.account-page .checkout .order-total{font-size:21px;margin-top:20px}
.account-page .billing-panel{margin-top:22px;padding-top:22px}
.account-page .notice{font-size:14px}
.account-page .notice[data-error=true]{background:#fff0f2}
.account-page .key-record,.account-page .order-record{padding-block:22px}
.account-page .site-footer{max-width:1120px;border-top:1px solid var(--line);font-size:13px;padding-block:24px}
@media(max-width:900px){.account-page .auth-layout{gap:36px;grid-template-columns:minmax(0,1fr) minmax(0,420px)}.account-page .auth-intro h2{font-size:28px}.account-page .account-grid{grid-template-columns:1fr}}
@media(max-width:767px){.account-page .account-shell{padding-block:28px 40px}.account-page .account-title{margin-bottom:24px}.account-page .account-title h1{font-size:27px}.account-page .auth-layout{grid-template-columns:1fr;gap:24px}.account-page .auth-intro{padding:0}.account-page .auth-intro h2{font-size:25px}.account-page .auth-intro h2 br{display:none}.account-page .account-art{display:none}.account-page .auth-intro>p{margin-top:10px}.account-page .auth-intro .auth-help{display:none}.account-page .selected-package{margin-top:18px;max-width:none;padding:16px 18px}.account-page .auth-panel,.account-page .account-section{padding:22px}.account-page .auth-panel h2{margin-top:22px}.account-page .account-title p{font-size:14px}.account-page .account-summary{gap:8px}.account-page .site-footer{margin-top:12px}}
@media(max-width:767px){.account-page .auth-intro .auth-help{display:block;margin-top:10px}}
/* Paper Desk layer — the member area as a desk of paper cards, tickets and stamps. Shared pieces live in site.css. */
.account-page .site-header{height:72px}
.account-page .site-header a:not(.brand){padding:6px 16px;background:var(--card);border:1.5px solid var(--ink);border-radius:10px;color:var(--ink);font-weight:700;text-decoration:none;box-shadow:3px 3px 0 var(--yellow);transition:translate .12s ease-out,box-shadow .12s ease-out}
.account-page .site-header a:not(.brand):hover{translate:-1px -1px;box-shadow:4px 4px 0 var(--yellow)}
.account-page .site-header a:not(.brand):active{translate:2px 2px;box-shadow:1px 1px 0 var(--yellow)}
.account-page .account-title h1{font-weight:800}
.account-page .notice{padding:12px 18px;background:var(--card);border:1.5px solid var(--ink);border-radius:12px;box-shadow:3px 3px 0 var(--mint);font-weight:600}
.account-page .notice[data-error=true]{background:#fff0ee;box-shadow:3px 3px 0 var(--coral)}
.account-page .account-art{rotate:-3deg;animation:rf-float 6s ease-in-out infinite}
.account-page .selected-package,.account-page .checkout-package{background:#fff6cf;border:1.5px dashed var(--ink);border-radius:12px}
.account-page .auth-panel{background:var(--card);border:1.5px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--accent)}
.account-page .auth-panel h2{font-weight:800}
.account-page .auth-tabs,.account-page .signup-periods{padding:4px;background:var(--paper);border:1.5px solid var(--ink);border-radius:12px}
.account-page .auth-tabs button,.account-page .signup-periods button{border-radius:8px;color:var(--ink);font-weight:700;transition:background-color .15s ease-out}
.account-page .auth-tabs button:hover,.account-page .signup-periods button:hover{background:#f6d55c66}
.account-page .auth-tabs [aria-pressed=true],.account-page .auth-tabs [aria-pressed=true]:hover{background:var(--ink);color:#fff}
.account-page .signup-periods button[aria-pressed=true],.account-page .signup-periods button[aria-pressed=true]:hover{background:var(--yellow);color:var(--ink);font-weight:800}
.account-page .signup-package{border-block:1.5px dashed #26273359}
.account-page .signup-package h3{font-weight:800}
.account-page .signup-plans{gap:14px;border:0;border-radius:0;overflow:visible}
.account-page .signup-plan,.account-page .signup-plan+button{position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:14px;transition:translate .15s ease-out,box-shadow .15s ease-out,background-color .15s ease-out}
.account-page .signup-plan:hover{background:#fff;translate:-1px -2px;box-shadow:3px 4px 0 var(--yellow)}
.account-page .signup-plan[aria-pressed=true],.account-page .signup-plan[aria-pressed=true]:hover{background:var(--accent-soft);color:var(--ink);translate:-1px -2px;box-shadow:4px 5px 0 var(--accent)}
.account-page .signup-plan[aria-pressed=true]::after{content:"✓";position:absolute;top:-11px;right:-9px;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:50%;background:var(--yellow);color:var(--ink);font-size:15px;font-weight:800;rotate:8deg;animation:rf-stamp .3s cubic-bezier(.3,1.7,.5,1)}
.account-page .signup-plan-name,.account-page .signup-plan-price{font-weight:800}
.account-page .signup-plan[aria-pressed=true] .signup-plan-state{color:var(--accent)}
.account-page .account-summary{border-bottom:0;padding:6px 0 26px;gap:12px}
.account-page .account-summary p{padding:4px 14px;background:var(--card);border:1.5px solid var(--ink);border-radius:999px;font-weight:700}
.account-page .account-summary p:empty{display:none}
.account-page .account-summary [data-verification-state]{background:var(--mint);color:var(--ink);font-weight:700;border-radius:14px}
.account-page .account-summary [data-verification-state][data-verified=false]{background:var(--yellow)}
.account-page main>form.account-section{margin-bottom:32px}
.account-page form[data-from-link] :is(label[for$="-token"],input[name=token]){display:none}
.account-page .auth-panel[data-sent]>:not([data-signup-sent]){display:none}
.account-page .signup-sent{animation:rf-pop-in .4s cubic-bezier(.3,1.5,.5,1)}
.account-page .signup-sent:focus{outline:0}
.account-page .signup-sent-art{display:block;width:96px;height:72px;margin-bottom:18px;fill:#fff6cf;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;rotate:-4deg;animation:rf-float 4s ease-in-out infinite}
.account-page .signup-sent-art path{fill:none}
.account-page .signup-sent-dot{fill:var(--accent);stroke-width:2.5}
.account-page .signup-sent h2{margin:0 0 10px;font-size:26px}
.account-page .signup-sent p{font-size:15px;line-height:1.85;color:var(--muted)}
.account-page .signup-sent p.sticker{font-size:13px;color:var(--ink)}
.account-page .signup-sent strong{color:var(--ink);overflow-wrap:anywhere}
.account-page .signup-sent-steps{margin:20px 0;padding:0;list-style:none;counter-reset:sent;display:grid;gap:10px}
.account-page .signup-sent-steps li{counter-increment:sent;display:flex;align-items:center;gap:12px;padding:10px 14px;background:#fff;border:1.5px solid var(--ink);border-radius:12px;font-size:14px;font-weight:600}
.account-page .signup-sent-steps li::before{content:counter(sent);flex:none;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid var(--ink);border-radius:8px;background:var(--yellow);font-weight:800;rotate:-6deg}
.account-page .signup-sent-steps li:nth-child(2)::before{background:var(--mint)}
.account-page .signup-sent-steps li:nth-child(3)::before{background:var(--lilac)}
.account-page .signup-sent .signup-sent-help{padding:10px 14px;border:1.5px dashed #26273359;border-radius:10px;font-size:13px}
.account-page .signup-sent-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:20px}
.account-page .signup-sent-actions .button{flex:1 1 100%}
.account-page .signup-sent-actions .link-button:disabled{color:var(--muted);text-decoration:none;cursor:default;opacity:1}
.account-page .signup-sent .signup-sent-status{min-height:1.85em;margin-top:10px;font-size:13px;font-weight:600;color:var(--ink)}
.account-page .signup-sent .signup-sent-status[data-error=true]{color:var(--danger)}
.account-page .account-section{background:var(--card);border:1.5px solid var(--ink);border-radius:16px;--pop:var(--mint);box-shadow:5px 5px 0 var(--pop)}
.account-page .account-section.checkout{--pop:var(--accent)}
.account-page .account-section.order-history{--pop:var(--yellow)}
.account-page .account-section h2{font-weight:800}
.account-page .key-record{margin-top:14px;padding:18px 20px 18px 28px;position:relative;background:#fff;border:1.5px solid var(--ink);border-radius:12px;overflow:hidden;transition:translate .15s ease-out}
.account-page .key-record::before{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:var(--mint);border-right:1.5px dashed var(--ink)}
.account-page .key-record[data-status=expired]::before{background:var(--yellow)}
.account-page .key-record[data-status=revoked]::before{background:var(--coral)}
.account-page .key-record:hover{translate:3px 0}
.account-page .key-record h3{font-family:ui-monospace,Consolas,'Noto Sans Thai',monospace;font-weight:700;letter-spacing:.02em}
.account-page .status{padding:2px 12px;background:var(--lilac);border:1.5px solid var(--ink);border-radius:10px;color:var(--ink);font-size:12.5px;font-weight:700}
.account-page .status:is([data-status=active],[data-status=successful],[data-status=fulfilled]){background:var(--mint)}
.account-page .status:is([data-status=pending],[data-status=reserved],[data-status=processing],[data-status=expired]){background:var(--yellow)}
.account-page .status:is([data-status=failed],[data-status=revoked],[data-status=requires_resolution]){background:var(--coral)}
.account-page .status{margin-block:4px 6px}
.account-page .checkout .sandbox-note{margin-block:14px 16px}
.account-page .order-record{border-bottom:1.5px dashed #26273359}
.account-page .order-record h3{font-weight:800;text-transform:capitalize}
.account-page .order-actions a{font-weight:700}
.account-page .empty-state{margin-top:8px;padding:22px;border:1.5px dashed #26273366;border-radius:12px;text-align:center;max-width:none}
.account-page .claim-panel{margin-top:22px;padding:0 16px;background:var(--paper);border:1.5px dashed var(--ink);border-radius:12px}
.account-page .claim-panel summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;list-style:none;font-weight:700}
.account-page .claim-panel summary::-webkit-details-marker{display:none}
.account-page .claim-panel summary::after{content:"+";flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid var(--ink);border-radius:50%;background:var(--yellow);font-weight:800;line-height:1;transition:rotate .2s ease-out,background-color .2s ease-out}
.account-page .claim-panel[open] summary::after{rotate:45deg;background:var(--coral)}
.account-page .checkout .order-total{font-size:24px;font-weight:800}
.account-page .checkout .sandbox-note{width:fit-content;padding:3px 12px;background:#fff6cf;border:1.5px dashed var(--ink);border-radius:8px;color:var(--ink);font-size:13px;font-weight:700}
.account-page .billing-panel,.account-page [data-billing-review]{border-top:1.5px dashed #26273359}
.account-page .billing-panel h3{font-weight:800}
.account-page .billing-check input{accent-color:var(--ink)}
.account-page .once-key{position:relative;overflow:hidden;background:#fff6cf;border:1.5px solid var(--ink);border-radius:18px;box-shadow:6px 6px 0 var(--accent);animation:rf-pop-in .45s cubic-bezier(.3,1.5,.5,1)}
.account-page .once-key::before{content:"";position:absolute;top:-14px;left:6%;width:9px;height:9px;pointer-events:none;background:var(--accent);box-shadow:70px 6px 0 #e98a7d,150px -4px 0 #6fc3a0,240px 8px 0 var(--accent),330px -2px 0 #e98a7d,430px 6px 0 #6fc3a0,540px 0 0 var(--accent),660px 7px 0 #e98a7d,790px -3px 0 #6fc3a0,920px 5px 0 var(--accent);animation:rf-confetti 1.6s .2s ease-in forwards}
.account-page .once-key h2{font-weight:800}
.account-page .once-key code{padding:14px 16px;background:#fff;border:1.5px dashed var(--ink);border-radius:10px;font-family:ui-monospace,Consolas,monospace;font-weight:700;letter-spacing:.03em}
.account-page .site-footer{border-top:1.5px dashed var(--ink)}
@media(max-width:767px){.account-page .site-header{height:66px}.account-page .account-summary p{width:auto}.account-page .signup-plans{gap:10px}.account-page .account-section{box-shadow:4px 4px 0 var(--pop)}.account-page .auth-panel{box-shadow:4px 4px 0 var(--accent)}}
@media(prefers-reduced-motion:reduce){.account-page button,.account-page .button{transition:none}}