:root{--bg-0: #070809;--bg-1: #0d0f13;--card: rgba(20, 22, 27, .72);--card-solid: #14161b;--elev: rgba(30, 33, 40, .6);--line: rgba(230, 199, 138, .14);--line-strong: rgba(230, 199, 138, .32);--fg: #f4f1ea;--muted: #9c968a;--muted-2: #6f6a61;--gold-1: #f0d59b;--gold-2: #d8b063;--gold-3: #c1934a;--gold-grad: linear-gradient(135deg, #f4dca6 0%, #d8b063 52%, #c1934a 100%);--ok: #6dd7a6;--err: #ef6a6a;--radius: 20px;--radius-sm: 12px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;color:var(--fg);background:radial-gradient(1200px 600px at 50% -10%,rgba(216,176,99,.1),transparent 60%),radial-gradient(900px 500px at 100% 110%,rgba(120,90,200,.08),transparent 55%),linear-gradient(180deg,var(--bg-1),var(--bg-0));background-attachment:fixed;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:16px 18px}.card{position:relative;width:100%;max-width:460px;background:var(--card);backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px 22px;box-shadow:0 1px #ffffff0a inset,0 30px 80px -20px #000000b3,0 0 0 1px #0000004d;animation:rise .5s cubic-bezier(.22,1,.36,1) both}.card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius);padding:1px;background:linear-gradient(160deg,rgba(240,213,155,.35),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes rise{0%{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}.brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}.brand .mark{width:38px;height:38px;border-radius:11px;background:var(--gold-grad);display:grid;place-items:center;color:#241a0a;font-weight:800;font-size:20px;box-shadow:0 6px 20px -6px #d8b06399}.brand .bhead{font-size:15.5px;font-weight:700;letter-spacing:.2px;line-height:1.3}.title{font-size:22px;font-weight:750;letter-spacing:-.2px;margin:0 0 5px}.title .accent{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 18px}.field{margin-bottom:14px}.label{display:block;font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--muted);margin-bottom:7px;text-transform:uppercase}.input{width:100%;height:46px;padding:0 16px;background:var(--elev);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--fg);font-size:16px;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}.input::placeholder{color:var(--muted-2)}.input:focus{border-color:var(--line-strong);box-shadow:0 0 0 4px #d8b0631a;background:#24272eb3}.input.invalid{border-color:#ef6a6a99}.input.valid{border-color:#6dd7a666}.hint{font-size:12px;color:var(--err);margin-top:6px;min-height:14px}.noemail{margin:-4px 0 14px}.noemail summary{list-style:none;cursor:pointer;font-size:12.5px;color:var(--gold-1);display:inline-flex;align-items:center;gap:6px;-webkit-user-select:none;user-select:none;transition:opacity .15s}.noemail summary::-webkit-details-marker{display:none}.noemail summary:hover{opacity:.82}.noemail summary .chev{transition:transform .2s;font-size:10px}.noemail[open] summary .chev{transform:rotate(90deg)}.providers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.provider{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--elev);color:var(--fg);text-decoration:none;font-size:12px;transition:transform .08s,border-color .18s,background .18s}.provider:hover{border-color:var(--line-strong);background:#24272ecc}.provider:active{transform:scale(.97)}.provider .pv-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff}.pv-qq{background:linear-gradient(135deg,#12b7f5,#0a86d6)}.pv-163{background:linear-gradient(135deg,#d33a31,#b0271f)}.pv-hot{background:linear-gradient(135deg,#1a86e0,#0a5bb8)}.plans{display:grid;grid-template-columns:1fr 1fr;gap:12px}.plan{position:relative;border:1px solid var(--line);background:var(--elev);border-radius:14px;padding:13px 14px;cursor:pointer;text-align:left;overflow:hidden;transition:transform .08s,border-color .2s,box-shadow .2s,background .2s}.plan:hover{border-color:var(--line-strong)}.plan:active{transform:scale(.985)}.plan.selected{border-color:transparent;background:linear-gradient(var(--card-solid),var(--card-solid)) padding-box,var(--gold-grad) border-box;box-shadow:0 10px 30px -12px #d8b06373}.plan .p-name{font-size:14px;font-weight:650;color:var(--fg)}.plan .p-price{margin-top:6px;font-size:21px;font-weight:780;letter-spacing:-.5px}.plan .p-price .yen{font-size:15px;font-weight:600;opacity:.7;margin-right:1px}.plan.selected .p-price{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.plan .p-per{margin-top:4px;font-size:11px;color:var(--muted)}.badge{position:absolute;top:0;right:0;font-size:10px;font-weight:700;letter-spacing:.4px;padding:3px 9px;border-bottom-left-radius:10px;background:var(--gold-grad);color:#241a0a}.plan.selected .badge{filter:brightness(1.05)}.note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 16px;padding:11px 13px;border-radius:var(--radius-sm);background:#d8b0630f;border:1px solid var(--line);font-size:12px;line-height:1.55;color:var(--muted)}.note .n-ico{flex:none;width:19px;height:19px;border-radius:6px;background:#d8b06329;color:var(--gold-1);display:grid;place-items:center;font-size:12px;margin-top:1px}.note b{color:var(--gold-1);font-weight:650}.btn{position:relative;width:100%;height:50px;border:none;border-radius:var(--radius-sm);background:var(--gold-grad);color:#221808;font-size:16px;font-weight:700;letter-spacing:.2px;cursor:pointer;overflow:hidden;transition:transform .08s,box-shadow .2s,opacity .2s;box-shadow:0 12px 30px -12px #d8b06399}.btn:hover:not(:disabled){box-shadow:0 16px 40px -12px #d8b063bf}.btn:active:not(:disabled){transform:translateY(1px) scale(.995)}.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;filter:grayscale(.3)}.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line);box-shadow:none;font-weight:600}.btn.ghost:hover:not(:disabled){border-color:var(--line-strong);background:var(--elev);box-shadow:none}.summary{background:var(--elev);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;font-size:13.5px;line-height:1.9;color:var(--muted);margin-bottom:20px}.summary b{color:var(--fg);font-weight:650}.qr-wrap{text-align:center}.qr-box{position:relative;display:inline-block;background:#fff;padding:16px;border-radius:16px;margin:6px 0 18px;box-shadow:0 20px 50px -20px #000c}.qr-box img{display:block;width:208px;height:208px}.qr-box:before,.qr-box:after{content:"";position:absolute;width:22px;height:22px;border:2px solid var(--gold-2)}.qr-box:before{top:-6px;left:-6px;border-right:none;border-bottom:none;border-top-left-radius:8px}.qr-box:after{bottom:-6px;right:-6px;border-left:none;border-top:none;border-bottom-right-radius:8px}.pill{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:13.5px}.spinner{width:16px;height:16px;border:2px solid rgba(216,176,99,.2);border-top-color:var(--gold-2);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.result{text-align:center;padding:10px 0 4px}.result .icon{width:68px;height:68px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;font-size:32px;animation:pop .4s cubic-bezier(.34,1.56,.64,1) both}.result.ok .icon{background:radial-gradient(circle at 50% 35%,#6dd7a640,#6dd7a60f);border:1px solid rgba(109,215,166,.4);color:var(--ok)}.result.err .icon{background:radial-gradient(circle at 50% 35%,#ef6a6a38,#ef6a6a0d);border:1px solid rgba(239,106,106,.4);color:var(--err)}@keyframes pop{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.result .msg{font-size:20px;font-weight:750;margin-bottom:6px}.result .sub{color:var(--muted);font-size:13.5px;line-height:1.6}.footer{text-align:center;margin-top:8px}
