:root{
  --bg1:#150c2b; --bg2:#0b0618; --panel:rgba(38,26,66,.62); --panel2:rgba(48,32,84,.5);
  --line:rgba(232,196,106,.34); --gold:#e8c46a; --gold2:#c8a24a; --ink:#f2ecff; --dim:#b9aede;
  --good:#7fd1a0; --warn:#e8a06a; --bad:#e08a8a; --red:#c1121f;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:"Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  color:var(--ink); min-height:100vh; padding:26px 16px 40px;
  background-color:var(--bg2);
  /* 星空：三層不同大小的星點 + 漸層夜空 */
  background-image:
    radial-gradient(1.6px 1.6px at 18% 12%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 72% 8%, rgba(255,246,214,.8) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 42% 26%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 88% 34%, rgba(255,246,214,.7) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 8% 44%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 60% 62%, rgba(255,246,214,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 30% 78%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 82% 86%, rgba(255,246,214,.5) 50%, transparent 51%),
    radial-gradient(1100px 620px at 50% -8%, #3a2364 0%, #241543 42%, #120a26 100%);
  background-attachment:fixed,fixed,fixed,fixed,fixed,fixed,fixed,fixed,fixed;
}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:760px;margin:0 auto}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.back,.keybtn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--line);border-radius:99px;
  background:rgba(20,12,40,.6);color:var(--gold);font-size:13px;cursor:pointer}
.keybtn.on{border-color:var(--good);color:var(--good)}
h1{font-size:30px;letter-spacing:6px;text-align:center;color:var(--gold);
  text-shadow:0 0 18px rgba(232,196,106,.35),0 2px 0 rgba(0,0,0,.5);font-weight:700}
h1 .seal{display:inline-block;margin-left:10px;padding:2px 8px;font-size:14px;letter-spacing:2px;color:#2b1a4d;
  background:linear-gradient(135deg,#f0d894,#c8a24a);border-radius:4px;vertical-align:middle}
.sub{text-align:center;color:var(--dim);font-size:13px;margin:8px 0 22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:16px;
  backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card h2{font-size:17px;letter-spacing:3px;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.card h2::before{content:"";width:6px;height:6px;background:var(--gold);transform:rotate(45deg);display:inline-block}
.hint{font-size:12.5px;color:var(--dim);line-height:1.8;margin-top:8px}
label{display:block;font-size:13.5px;color:var(--gold);margin:14px 0 7px}
label .no{display:inline-block;min-width:20px;color:var(--dim)}
input[type=text],textarea,select{width:100%;padding:11px 13px;font-size:15px;border-radius:11px;color:#fff;font-family:inherit;
  border:1px solid rgba(232,196,106,.3);background:rgba(12,6,26,.66);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,196,106,.18)}
textarea{resize:vertical;line-height:1.7}
.btn{width:100%;padding:13px;margin-top:16px;font-size:16px;font-weight:700;letter-spacing:3px;cursor:pointer;border:none;border-radius:12px;
  background:linear-gradient(135deg,#f0d894,#c8a24a);color:#2b1a4d;font-family:inherit;transition:.18s}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--gold);font-weight:400;letter-spacing:2px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.mcard{background:var(--panel2);border:1px solid rgba(232,196,106,.22);border-radius:13px;padding:14px;cursor:pointer;transition:.18s}
.mcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.mcard h3{font-size:15px;color:var(--gold);margin-bottom:6px;letter-spacing:1px}
.mcard p{font-size:12.5px;color:var(--dim);line-height:1.7}
.spread-item{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(232,196,106,.22);
  border-radius:11px;background:rgba(18,10,36,.5);cursor:pointer;margin-bottom:9px}
.spread-item:hover{border-color:var(--gold)}
.spread-item .nm{font-size:14.5px;color:var(--ink)}
.spread-item .cnt{font-size:12px;color:var(--gold);white-space:nowrap}
.cards{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:6px 0 4px}
.tcard{width:132px;border-radius:12px;padding:12px 10px;text-align:center;
  background:linear-gradient(180deg,rgba(58,35,100,.85),rgba(28,16,54,.9));border:1px solid var(--line);position:relative}
.tcard.rev .sym{transform:rotate(180deg)}
.tcard .pos{font-size:11.5px;color:var(--gold);letter-spacing:1px;margin-bottom:8px;min-height:30px}
.tcard .sym{font-size:34px;color:var(--gold);text-shadow:0 0 14px rgba(232,196,106,.5)}
.tcard .nm{font-size:14px;margin-top:6px;letter-spacing:1px}
.tcard .ori{font-size:11.5px;color:var(--dim);margin-top:3px}
.tcard .kw{font-size:11px;color:var(--gold2);margin-top:6px;line-height:1.6}
.slot{width:132px;height:172px;border-radius:12px;border:1px dashed rgba(232,196,106,.4);display:flex;align-items:center;
  justify-content:center;color:var(--dim);font-size:12.5px;background:rgba(16,9,32,.5)}
.poem{font-family:"KaiTi","STKaiti",serif;font-size:20px;line-height:2.1;letter-spacing:3px;color:var(--gold);text-align:center;margin:10px 0}
.meta-line{font-size:13px;color:var(--dim);text-align:center;line-height:1.9}
.report{white-space:pre-wrap;line-height:2;font-size:15.5px;color:var(--ink)}
.status{font-size:13px;color:var(--dim);margin-bottom:10px;min-height:18px}
.spin{display:inline-block;animation:sp 1.4s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.badge{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:99px;border:1px solid var(--line);color:var(--gold);margin-left:6px}
.badge.good{color:var(--good);border-color:var(--good)}
.pill{display:inline-block;font-size:12px;padding:3px 10px;border-radius:99px;background:rgba(232,196,106,.14);color:var(--gold);margin:0 6px 6px 0}
.errbar{display:none;background:rgba(193,18,31,.22);border:1px solid rgba(224,138,138,.5);color:#ffd9d9;
  padding:10px 13px;border-radius:10px;font-size:13.5px;margin-bottom:14px;line-height:1.7}
.crisis{background:rgba(232,196,106,.1);border:1px solid var(--line);border-radius:14px;padding:18px;line-height:2;white-space:pre-wrap}
.foot{text-align:center;color:var(--dim);font-size:12px;line-height:1.9;margin-top:22px}
.hr{height:1px;background:linear-gradient(90deg,transparent,rgba(232,196,106,.5),transparent);margin:26px 0}
.hidden{display:none!important}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab{flex:1;min-width:100px;text-align:center;padding:10px 6px;font-size:14.5px;letter-spacing:2px;cursor:pointer;border-radius:11px;
  border:1px solid rgba(232,196,106,.3);background:rgba(20,12,40,.55);color:var(--dim);font-family:inherit}
.tab.on{background:linear-gradient(135deg,#f0d894,#c8a24a);color:#2b1a4d;border-color:transparent;font-weight:700}

.mask{display:none;position:fixed;inset:0;background:rgba(6,3,14,.72);z-index:99;align-items:center;justify-content:center;padding:18px}
.mask.show{display:flex}
.dialog{width:100%;max-width:420px;background:linear-gradient(180deg,rgba(48,30,84,.98),rgba(24,14,48,.98));
  border:1px solid var(--line);border-radius:16px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.dialog h3{color:var(--gold);font-size:16px;letter-spacing:2px;margin-bottom:10px}
.dialog .hint{margin:10px 0}
.dialog .btns{display:flex;gap:10px;margin-top:16px}
.dialog .btns .btn{margin-top:0}
.qianbox{text-align:center}
.qianbox .tube{font-size:56px;color:var(--gold);text-shadow:0 0 22px rgba(232,196,106,.45)}
.qianbox .num{font-size:15px;color:var(--gold);letter-spacing:2px;margin-top:6px}
