:root{
  --bg:#0b0c10;--surface:#0f1218;--border:#262a39;--muted:#9aa0aa;--text:#edf1f7;
  --primary:#e94040;--accent:#3b82f6;--ok:#10b981;--warn:#d97706;--err:#dc2626;
  --chip-bg:rgba(59,130,246,.14);--chip-border:rgba(59,130,246,.5);
  --shadow:0 18px 48px rgba(0,0,0,.35);
  --bg-grad:radial-gradient(1000px 600px at 20% -10%,#1b1d24 0,#0b0c10 60%),radial-gradient(900px 500px at 120% 10%,#1a1d28 0,#0b0c10 60%)
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f7f8fb;--surface:#ffffff;--border:#e5e7eb;--muted:#6b7280;--text:#111827;
    --primary:#e94040;--accent:#2563eb;--ok:#10b981;--warn:#b45309;--err:#b91c1c;
    --chip-bg:rgba(37,99,235,.08);--chip-border:rgba(37,99,235,.35);
    --shadow:0 10px 28px rgba(0,0,0,.08);
    --bg-grad:radial-gradient(1000px 600px at 15% -10%,#ffffff 0,#f7f8fb 60%),radial-gradient(900px 500px at 120% 10%,#ffffff 0,#f7f8fb 60%)
  }
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow-x:hidden;scroll-behavior:smooth}
body{margin:0;background:var(--bg-grad);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
.container{max-width:1000px;margin:0 auto;padding:clamp(12px,3vw,24px)}
.hero{background:var(--surface);border:1px solid var(--border);padding:16px;border-radius:16px;display:flex;justify-content:space-between;gap:12px;align-items:center;box-shadow:var(--shadow);position:sticky;top:0;z-index:5;min-width:0}
h1{margin:0;font-size:clamp(20px,4.2vw,26px)}
.muted{color:var(--muted);font-size:clamp(12px,2.8vw,13px);overflow-wrap:anywhere}
.card{background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:clamp(14px,3vw,20px);border:1px solid var(--border);min-width:0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:12px;border:1px solid transparent;background:var(--primary);color:white;cursor:pointer;font-weight:700;transition:transform .2s,opacity .2s,box-shadow .2s;gap:8px;max-width:100%}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(233,64,64,.25)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn.light{background:color-mix(in oklab, var(--surface) 92%, transparent);border:1px solid var(--border);color:var(--text)}
.btn.alt{background:color-mix(in oklab, var(--accent) 16%, var(--surface));border:1px solid var(--border);color:var(--text)}
.ico{width:18px;height:18px;flex:0 0 18px}
.section-title{font-weight:900;font-size:clamp(18px,4.6vw,22px);margin:2px 0 12px 2px;letter-spacing:.2px}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;isolation:isolate}
.plan{position:relative;border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--surface);transition:border-color .18s, box-shadow .18s, transform .18s;overflow:hidden;z-index:0}
@media (hover:hover){.plan:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.12)}}
.plan.selected{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent),0 16px 40px color-mix(in oklab, var(--accent) 20%, transparent);transform:none;z-index:1}
@media(max-width:720px){.plan,.plan:hover,.plan.selected{transform:none}}
.plan input{position:absolute;opacity:0;inset:0;cursor:pointer}
.plan .head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.plan .title{font-weight:800;display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.plan .price{font-size:22px;font-weight:900;white-space:nowrap}
.plan .desc{margin-top:8px;color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.plan .actions{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.plan .chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--chip-border);background:var(--chip-bg);color:var(--muted);font-size:12px}
.plan.soldout{opacity:.75;filter:grayscale(.25);cursor:not-allowed}
.plan.soldout:hover{transform:none;box-shadow:none}
.ribbon{position:absolute;top:12px;right:-38px;transform:rotate(35deg);background:#9ca3af;color:#0b0c10;font-weight:900;padding:6px 56px;font-size:12px;border:1px solid #cbd5e1;border-radius:6px}
.grid{display:grid;gap:14px;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;min-width:0}
.foot{margin-top:18px;color:var(--muted);font-size:12px;text-align:center}
.info{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:12px;overflow-wrap:anywhere}
.selected-plan{
  border:2px dashed var(--ok);
  background: linear-gradient(145deg, color-mix(in oklab, var(--ok) 18%, transparent), color-mix(in oklab, var(--ok) 6%, transparent));
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok) 10%, transparent), 0 18px 44px color-mix(in oklab, var(--ok) 22%, transparent);
  animation: pop-in .28s ease-out;
}
.selected-plan .badge-top{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:900;font-size:clamp(14px,3.2vw,15px);
  color:var(--ok);background:rgba(16,185,129,.14);
  padding:6px 10px;border-radius:999px;border:1px dashed color-mix(in oklab, var(--ok) 55%, transparent)
}
.selected-plan .si-title{
  display:flex;align-items:center;gap:8px;
  font-weight:900;font-size:clamp(16px,3.8vw,20px);
  margin-top:8px
}
.selected-plan .si-price{margin-top:4px;font-size:clamp(18px,4vw,22px);font-weight:900}
.selected-plan .si-desc{margin-top:8px;color:var(--muted);font-size:14px}
@keyframes pop-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.alert{border:1px solid color-mix(in oklab, var(--err) 40%, transparent);background:color-mix(in oklab, var(--err) 12%, var(--surface));color:color-mix(in oklab, var(--err) 80%, white);border-radius:12px;padding:12px}
.okbox{border:1px solid color-mix(in oklab, var(--ok) 35%, transparent);background:color-mix(in oklab, var(--ok) 12%, var(--surface));color:color-mix(in oklab, var(--ok) 80%, white);border-radius:12px;padding:12px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:var(--chip-bg);border:1px dashed var(--chip-border);font-weight:700;max-width:100%}
.badge code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere}
.udid-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.toast{position:fixed;left:12px;right:12px;top:12px;display:flex;flex-direction:column;gap:10px;z-index:9999}
.toast-item{min-width:260px;max-width:min(92vw,420px);padding:12px 14px;border-radius:12px;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:.98;transform:translateY(-8px);animation:fade .2s ease-out;word-break:break-word}
.t-ok{background:var(--ok)}.t-err{background:var(--err)}.t-warn{background:var(--warn)}.t-info{background:#374151}
@keyframes fade{from{opacity:0;transform:translateY(-16px)}to{opacity:.98;transform:translateY(0)}}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:10000;padding:16px}
.modal .panel{width:min(960px,98vw);max-height:92vh;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.modal .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;gap:10px}
#payos-embed{flex:1 1 auto;min-height:clamp(420px,70vh,740px);height:min(78vh,760px);width:100%;overflow:hidden;border-radius:12px}
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:12000;padding:16px}
.sheet{width:min(520px,95vw);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.sheet h3{margin:0 0 8px}
.line{height:4px;width:100%;border-radius:999px;background:linear-gradient(90deg,#1f2937,#374151);overflow:hidden;position:relative}
.line::after{content:"";position:absolute;left:-30%;top:0;height:100%;width:30%;background:linear-gradient(90deg,#e5e7eb,#9ca3af);animation:ind 1.1s linear infinite}
@keyframes ind{0%{left:-30%}100%{left:100%}}
.hidden{display:none}
.note{font-size:clamp(12px,2.9vw,13px);color:var(--muted);background:color-mix(in oklab, var(--accent) 6%, var(--surface));border:1px dashed var(--border);padding:10px;border-radius:10px}
.cta-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
.countwrap{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:clamp(12px,3.2vw,14px)}
.countnum{font-variant-numeric:tabular-nums}
.progress{position:relative;height:8px;width:100%;border-radius:999px;background:color-mix(in oklab, var(--accent) 6%, var(--surface));border:1px solid var(--border);overflow:hidden}
.progress .bar{position:absolute;left:0;top:0;height:100%;width:100%;background:linear-gradient(90deg,#60a5fa,#3b82f6);transform-origin:left center}
.back-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.form{display:flex;flex-direction:column;gap:10px}
.field{display:flex;gap:10px;flex-wrap:wrap}
.input{flex:1;min-width:220px;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:color-mix(in oklab, var(--surface) 92%, transparent);color:var(--text);outline:none}
.field .btn{white-space:nowrap}
.pay-focus{animation:pay-pulse 1s ease-out 0s 2}
@keyframes pay-pulse{0%{transform:scale(.98)}50%{transform:scale(1)}100%{transform:scale(.98)}}
@media(max-width:720px){
  .hero{flex-direction:column;align-items:flex-start}
  .btn{width:100%}
  .cta-row{flex-direction:column;align-items:stretch}
  .ribbon{right:-44px}
}