:root{--ink:#16142b;--muted:#5d5a78;--brand:#5b3df5;--brand2:#7f66ff;--bg:#f7f6ff;--card:#fff;--ok:#0f9d58;--warn:#c77700;--line:#e4e1f5}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55}
a{color:var(--brand)}
header.top{display:flex;align-items:center;justify-content:space-between;max-width:1080px;margin:0 auto;padding:18px 20px}
.logo{font-weight:800;font-size:1.25rem;text-decoration:none;color:var(--ink)}
.logo span{color:var(--brand)}
nav a{margin-left:18px;text-decoration:none;color:var(--muted);font-weight:500}
main{max-width:1080px;margin:0 auto;padding:0 20px 60px}
.hero{text-align:center;padding:36px 0 18px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:0 0 14px;letter-spacing:-.02em}
.hero p{font-size:1.15rem;color:var(--muted);max-width:40rem;margin:0 auto}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 8px 30px rgba(40,20,120,.06)}
.grid{display:grid;gap:22px}
@media(min-width:800px){.grid.two{grid-template-columns:1.2fr .8fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
label{display:block;font-weight:600;margin:10px 0 6px}
input[type=text],input[type=url],select,textarea{font-family:inherit;width:100%;padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;background:#fff}
input:focus{outline:none;border-color:var(--brand)}
button,.btn{display:inline-block;border:0;border-radius:12px;padding:13px 20px;font-size:1rem;font-weight:700;cursor:pointer;background:var(--brand);color:#fff;text-decoration:none}
button:hover,.btn:hover{background:var(--brand2)}
button.ghost,.btn.ghost{background:#eeeafe;color:var(--brand)}
button:disabled{opacity:.6;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
[hidden]{display:none!important}
.preview{display:flex;flex-direction:column;align-items:center;gap:12px}
.preview canvas{width:220px;height:220px;image-rendering:pixelated;border-radius:8px;border:1px solid var(--line)}
.tabs{display:flex;gap:8px;margin-bottom:8px}
.tabs button{background:#eeeafe;color:var(--brand)}
.tabs button.on{background:var(--brand);color:#fff}
.muted{color:var(--muted)}
.small{font-size:.9rem}
.badge{display:inline-block;padding:2px 9px;border-radius:99px;font-size:.8rem;font-weight:700}
.badge.ok{background:#e3f6ec;color:var(--ok)}
.badge.pending{background:#fff2dc;color:var(--warn)}
.price{font-size:2.4rem;font-weight:800;margin:6px 0}
.price small{font-size:1rem;color:var(--muted);font-weight:500}
.plan ul{padding-left:18px;margin:10px 0 18px}
.plan.best{border:2px solid var(--brand)}
section{margin-top:46px}
section h2{font-size:1.7rem;text-align:center;margin-bottom:20px}
table.cmp{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:hidden}
table.cmp td,table.cmp th{padding:12px;border-bottom:1px solid var(--line);text-align:left}
details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px}
summary{font-weight:700;cursor:pointer}
footer{text-align:center;color:var(--muted);padding:30px 20px;font-size:.9rem}
.code{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.code canvas{width:110px;height:110px;image-rendering:pixelated}
.err{color:#c62828;font-weight:600}
.keybox{background:#fff8e6;border:1px solid #f3d27a;border-radius:12px;padding:12px 14px;word-break:break-all}
#sign{display:none}
@media print{
@page{margin:12mm}
body.printing{background:#fff}
body.printing>*:not(#sign){display:none!important}
body.printing #sign{display:block}
.sg{text-align:center;color:#000;break-inside:avoid;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box}
.sg svg{display:block}
.sgh{font-weight:800;line-height:1.15}
.sgs{white-space:pre-line;line-height:1.35}
.sign-page .sg{height:250mm}.sign-page .sgh{font-size:44pt;margin-bottom:10mm}.sign-page svg{width:140mm;height:140mm}.sign-page .sgs{font-size:20pt;margin-top:10mm}
.sign-tent .sg{height:124mm}.sign-tent .flip{transform:rotate(180deg);border-top:1px dashed #999}.sign-tent .sgh{font-size:26pt;margin-bottom:5mm}.sign-tent svg{width:75mm;height:75mm}.sign-tent .sgs{font-size:13pt;margin-top:4mm}
body.printing #sign.sign-cards{display:grid;grid-template-columns:1fr 1fr}.sign-cards .sg{height:82mm;border:1px dashed #999;padding:4mm}.sign-cards .sgh{font-size:15pt;margin-bottom:2mm}.sign-cards svg{width:50mm;height:50mm}.sign-cards .sgs{font-size:9pt;margin-top:2mm}
}
.bulkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.bq{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;word-break:break-all}
.bq canvas{width:110px;height:110px;image-rendering:pixelated}.bq span{color:#666;font-size:11px}