:root{--blue:#3451b2;--sky:#52adc8;--ink:#2b2f33;--soft:#5b636b;--line:#e3e6e8;--bg:#f7f9fc;--card:#fff;--warm:#fff8f0}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
a{color:var(--blue)}
.topbar{border-bottom:1px solid var(--line);background:#fff}
.topbar .wrap{max-width:960px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:14px}
.topbar .brand{font-weight:700}
.topbar .sp{flex:1}
.wrap{max-width:960px;margin:0 auto;padding:26px 20px 80px}
.hidden{display:none}
/* login gate */
.gate{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:22px}
.gate-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:32px 28px;max-width:400px;width:100%;box-shadow:0 12px 40px rgba(52,81,178,.08);text-align:center}
.gate-emoji{font-size:44px}
.gate-title{margin:.1em 0;font-size:1.6em}
.gate-sub{color:var(--soft);margin:.2em 0 1em}
.fld{display:block;text-align:left;margin:12px 0}
.fld span{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--soft);margin-bottom:4px}
.fld input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;font-size:15px;font-family:inherit}
.gate-err{color:#b3402e;font-size:13.5px;min-height:1.2em;margin:.4em 0}
.gate-note{color:var(--soft);font-size:12.5px;margin-top:14px}
.btn{border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:10px;padding:10px 18px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;width:100%;margin-top:8px}
.btn.ghost{background:#fff;color:var(--blue)}
.btn.small{width:auto;padding:7px 14px;font-size:13px;margin-top:0}
.btn.danger{background:#fff;color:#b3402e;border-color:#e0b6ae}
.btn:disabled{opacity:.5;cursor:default}
.linkbtn{background:none;border:none;color:var(--blue);cursor:pointer;font-size:13.5px;font-family:inherit;padding:4px}
/* hub cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px;margin-top:18px}
.xcard{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;text-decoration:none;color:var(--ink);transition:transform .15s,box-shadow .15s,border-color .15s}
.xcard:hover{border-color:var(--sky);box-shadow:0 6px 20px rgba(82,173,200,.16);transform:translateY(-3px)}
.xcard .em{font-size:34px}
.xcard h3{margin:.35em 0 .15em;font-size:1.15em}
.xcard p{margin:0;color:var(--soft);font-size:.92em}
/* generic panels */
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;margin:16px 0}
h1.page{font-size:1.7em;margin:.2em 0 .1em}
.sub{color:var(--soft);margin:.1em 0 1em}
input[type=text],input[type=email],textarea,select{border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;font-family:inherit;width:100%;background:#fff;color:var(--ink)}
textarea{resize:vertical;line-height:1.7}
.saved{color:#3c7a50;font-size:12.5px;min-height:1.2em}
.rules-hint{background:#fff6e8;border:1px solid #f0d9ae;border-radius:12px;padding:14px 16px;font-size:13.5px;margin:16px 0}
.rules-hint pre{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px;overflow:auto;font-size:12px;text-align:left}
footer{color:var(--soft);font-size:12.5px;text-align:center;padding:30px 0}
canvas.sticker{border:1px solid var(--line);border-radius:12px;max-width:100%;height:auto;background:#fff}
.thumb{width:96px;height:96px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
@media (max-width:640px){.wrap{padding:18px 14px 60px}.gate-card{padding:26px 20px}}