/* 星象守护神 · 移动端优先 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#f5c96b;--gold-dim:rgba(245,201,107,.25);
  --ink:#f4efff;--ink-dim:rgba(244,239,255,.65);
  --card:rgba(255,255,255,.055);--card-border:rgba(245,201,107,.22);
}
html{-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);min-height:100vh;
  background:
    radial-gradient(1200px 600px at 50% -10%,rgba(139,92,246,.28),transparent 60%),
    radial-gradient(900px 500px at 85% 30%,rgba(245,201,107,.10),transparent 60%),
    linear-gradient(180deg,#1c0d33 0%,#140826 45%,#0d0518 100%);
  background-attachment:fixed;
}
.wrap{max-width:480px;margin:0 auto;padding:20px 16px 90px}
/* 页眉 */
.hero{text-align:center;padding:26px 0 18px;position:relative}
.hero::before{content:"✦";position:absolute;top:6px;left:12%;color:var(--gold);opacity:.5;animation:tw 3s infinite}
.hero::after{content:"✦";position:absolute;top:20px;right:10%;color:var(--gold);opacity:.35;font-size:12px;animation:tw 4s infinite}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:.7}}
.hero h1{font-size:30px;letter-spacing:6px;
  background:linear-gradient(180deg,#ffe9b8,#f5c96b 60%,#c9932f);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 24px rgba(245,201,107,.25)}
.hero p{margin-top:8px;color:var(--ink-dim);font-size:13px;letter-spacing:2px}
/* 卡片 */
.card{background:var(--card);border:1px solid var(--card-border);border-radius:18px;
  padding:18px 16px;margin-bottom:14px;backdrop-filter:blur(6px)}
.card h2{font-size:15px;color:var(--gold);letter-spacing:2px;margin-bottom:12px}
.card h2::before{content:"✦ ";font-size:12px}
/* 表单 */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--ink-dim);margin-bottom:8px}
select,textarea{
  width:100%;background:rgba(0,0,0,.35);border:1px solid var(--card-border);
  border-radius:12px;color:var(--ink);font-size:15px;padding:12px;outline:none}
select:focus,textarea:focus{border-color:var(--gold)}
textarea{resize:none;height:74px;line-height:1.6}
textarea::placeholder{color:rgba(244,239,255,.3)}
.hint{font-size:12px;color:var(--ink-dim);margin-top:6px}
/* 画风 */
.styles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.style-btn{
  border:1px solid var(--card-border);background:rgba(0,0,0,.3);color:var(--ink);
  border-radius:12px;padding:12px 4px;font-size:13px;cursor:pointer;transition:.2s;position:relative}
.style-btn small{display:block;font-size:10px;color:var(--ink-dim);margin-top:2px}
.style-btn.on{border-color:var(--gold);background:rgba(245,201,107,.14);
  box-shadow:0 0 12px rgba(245,201,107,.25)}
.style-btn.on::after{content:"✓";position:absolute;top:4px;right:8px;color:var(--gold);font-size:12px}
/* 主按钮 */
.btn{display:block;width:100%;border:none;border-radius:14px;cursor:pointer;
  font-size:16px;letter-spacing:2px;padding:14px;font-weight:700}
.btn-gold{background:linear-gradient(180deg,#ffe1a0,#f0b94e 60%,#d99a2b);color:#3a2503;
  box-shadow:0 6px 20px rgba(240,185,78,.35)}
.btn-gold:active{transform:scale(.98)}
.btn-gold:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn-ghost{background:rgba(255,255,255,.07);color:var(--ink);border:1px solid var(--card-border);
  font-size:14px;padding:11px;font-weight:400;margin-top:10px}
.quota{text-align:center;font-size:13px;color:var(--ink-dim);margin-top:10px}
.quota b{color:var(--gold);font-size:16px}
/* 进度 */
#progress{display:none}
.prow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:13px}
.prow .dot{width:10px;height:10px;border-radius:50%;background:#8b5cf6;flex:none;animation:tw 1.2s infinite}
.prow.done .dot{background:#4ade80;animation:none}
.prow.failed .dot{background:#f87171;animation:none}
.prow .lbl{flex:1}
.prow .st{color:var(--ink-dim);font-size:12px}
.prow.failed .st{color:#f87171}
.retry{font-size:12px;color:var(--gold);background:none;border:1px solid var(--gold-dim);
  border-radius:8px;padding:4px 10px;cursor:pointer}
/* 结果 */
#result{display:none}
.shots{display:grid;gap:14px}
.shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--card-border)}
.shot img{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#000}
.wm{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.wm span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-24deg);
  font-size:26px;letter-spacing:8px;color:rgba(255,255,255,.42);white-space:nowrap;
  text-shadow:0 1px 8px rgba(0,0,0,.5)}
.shot .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;font-size:12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.65))}
.star-msg{background:rgba(245,201,107,.08);border:1px dashed var(--gold-dim);
  border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.8;margin:12px 0;color:#ffe9b8}
/* 弹窗 */
.modal{position:fixed;inset:0;background:rgba(5,2,12,.78);display:none;z-index:50;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
.modal.show{display:flex}
.sheet{width:100%;max-width:480px;max-height:88vh;overflow:auto;background:#1e1038;
  border:1px solid var(--card-border);border-bottom:none;border-radius:20px 20px 0 0;padding:22px 18px 30px}
.sheet h3{color:var(--gold);font-size:17px;letter-spacing:2px;text-align:center;margin-bottom:6px}
.sheet .sub{text-align:center;font-size:12px;color:var(--ink-dim);margin-bottom:16px}
.tier{border:1px solid var(--card-border);border-radius:14px;padding:14px;margin-bottom:10px;
  display:flex;justify-content:space-between;align-items:center}
.tier.hot{border-color:var(--gold);background:rgba(245,201,107,.08)}
.tier .t b{font-size:16px}
.tier .t small{display:block;color:var(--ink-dim);font-size:12px;margin-top:4px}
.tier .p{color:var(--gold);font-size:20px;font-weight:700}
.wx-row{background:rgba(0,0,0,.3);border:1px dashed var(--gold-dim);border-radius:12px;
  padding:12px;text-align:center;font-size:13px;line-height:2;margin:14px 0}
.wx-row b{color:var(--gold);font-size:16px;letter-spacing:1px}
.code-row{display:flex;gap:10px;margin-top:6px}
.code-row input{flex:1;background:rgba(0,0,0,.4);border:1px solid var(--card-border);
  border-radius:12px;color:var(--ink);font-size:16px;padding:12px;text-align:center;
  letter-spacing:3px;text-transform:uppercase;outline:none}
.code-row button{flex:none;padding:0 22px}
.doc{font-size:14px;line-height:2;color:var(--ink-dim)}
.doc b{color:var(--ink)}
/* 页脚 */
footer{margin-top:26px;text-align:center;font-size:12px;color:var(--ink-dim);line-height:2.4}
footer a{color:var(--ink-dim);text-decoration:none;margin:0 8px}
footer a:hover{color:var(--gold)}
/* 分享浮条 */
.sharebar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;
  background:rgba(20,10,38,.92);border-top:1px solid var(--card-border);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(8px)}
.sharebar.show{display:block}
.sharebar .in{max-width:480px;margin:0 auto;display:flex;gap:10px;align-items:center}
.sharebar p{flex:1;font-size:12px;color:var(--ink-dim);line-height:1.6}
.sharebar button{flex:none}