/* 澄彻心力宇宙 · 共享样式
   配色沿用十日无常的深蓝紫（--bg:#12131a 同源），比走镖的暖褐更"宇宙"。
   结晶 = 能量，主色用青（能量感）+ 金（价值感）。 */
:root{
  --bg:#0b0d14; --bg2:#0e1119; --panel:#141824; --panel2:#1b2130; --line:#29314a;
  --ink:#e9ebf5; --ink2:#a3a9c2; --ink3:#6b7288;
  --gold:#d8b26a; --gold2:#f0d49a;
  --crystal:#7fd4ff; --crystal-d:#3d8fb5;
  --jade:#4fbf8b; --down:#d3705f; --warn:#c9a24a;
  --r:12px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
  font-size:15px; line-height:1.72; -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
/* 深空底：两层径向光 + 一层细星点 */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(900px 620px at 18% -8%, rgba(127,212,255,.13), transparent 62%),
    radial-gradient(760px 560px at 92% 8%, rgba(216,178,106,.10), transparent 60%),
    radial-gradient(1100px 900px at 50% 118%, rgba(79,191,139,.07), transparent 66%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 68% 14%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.6px 1.6px at 32% 62%, rgba(127,212,255,.55), transparent),
    radial-gradient(1.1px 1.1px at 84% 54%, rgba(255,255,255,.45), transparent),
    radial-gradient(1.3px 1.3px at 52% 88%, rgba(216,178,106,.5), transparent),
    radial-gradient(1px 1px at 8% 76%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.2px 1.2px at 92% 82%, rgba(255,255,255,.35), transparent);
}
.wrap{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:26px 20px 64px}
.slim{max-width:430px}

/* ---------- 通用件 ---------- */
h1,h2,h3{margin:0; font-weight:600; letter-spacing:.08em}
h1{font-size:26px}
h2{font-size:17px; color:var(--ink)}
h3{font-size:14px; color:var(--ink2); letter-spacing:1px}
.sub{color:var(--ink3); font-size:12.5px; margin:6px 0 0; line-height:1.65}
.mut{color:var(--ink3)}
.num{font-variant-numeric:tabular-nums; font-feature-settings:"tnum"}
.up{color:var(--jade)} .down{color:var(--down)}

.card{
  background:linear-gradient(180deg, var(--panel), var(--bg2));
  border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; margin:14px 0;
}
.card.tight{padding:13px 15px}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.spread{display:flex; justify-content:space-between; align-items:center; gap:12px}

button{
  font:inherit; font-size:14px; color:var(--ink);
  background:var(--panel2); border:1px solid var(--line);
  border-radius:9px; padding:9px 15px; cursor:pointer;
  transition:.16s; letter-spacing:.5px;
}
button:hover:not(:disabled){border-color:var(--crystal-d); background:#222a3c}
button:disabled{opacity:.42; cursor:not-allowed}
button.primary{
  background:linear-gradient(180deg,#2b6f8f,#204e68);
  border-color:var(--crystal-d); color:#eaf7ff; font-weight:600;
}
button.primary:hover:not(:disabled){background:linear-gradient(180deg,#34819f,#255a76)}
button.gold{
  background:linear-gradient(180deg,#7d6127,#5d4718);
  border-color:#8a6c2c; color:#f7e9c8; font-weight:600;
}
button.gold:hover:not(:disabled){background:linear-gradient(180deg,#8f6f2c,#6b5220)}
button.ghost{background:transparent}
button.wide{width:100%; padding:12px}

input{
  font:inherit; font-size:15px; color:var(--ink);
  background:var(--bg2); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; width:100%; letter-spacing:.5px;
}
input:focus{outline:none; border-color:var(--crystal-d)}
label{display:block; font-size:12.5px; color:var(--ink2); margin:14px 0 6px; letter-spacing:.5px}

/* ---------- 结晶 ---------- */
.crystal{
  display:inline-block; width:11px; height:11px; margin-right:5px;
  background:linear-gradient(135deg,var(--crystal),#b98b3f);
  clip-path:polygon(50% 0,100% 38%,78% 100%,22% 100%,0 38%);
  vertical-align:-1px;
}
.crystal.big{width:16px; height:16px; vertical-align:-2px}
.bal{
  font-size:40px; font-weight:600; letter-spacing:1px; line-height:1.1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,var(--crystal),#a8c6d8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.balwrap{display:flex; align-items:baseline; gap:9px}

/* ---------- 徽标 ---------- */
.tag{
  display:inline-block; font-size:11px; letter-spacing:1px;
  padding:2px 9px; border-radius:20px; border:1px solid var(--line);
  color:var(--ink2); background:var(--panel2);
}
.tag.earn{color:var(--jade); border-color:#2c5a48; background:#16241f}
.tag.risk{color:var(--gold); border-color:#5c4a24; background:#221d13}
.tag.lock{color:var(--ink3)}

/* ---------- 进度条 ---------- */
.bar{height:6px; background:#1c2233; border-radius:6px; overflow:hidden; margin:8px 0 4px}
.bar > i{display:block; height:100%; background:linear-gradient(90deg,var(--crystal-d),var(--crystal)); border-radius:6px}

/* ---------- 流水 ---------- */
.ledger{margin:4px 0 0; padding:0; list-style:none}
.ledger li{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:9px 0; border-bottom:1px dashed #232b40; font-size:13.5px;
}
.ledger li:last-child{border-bottom:none}
.ledger .t{color:var(--ink3); font-size:11.5px; letter-spacing:.5px}

/* ---------- 权益 ---------- */
.goods{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:11px; margin-top:12px}
.good{
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; display:flex; flex-direction:column; gap:7px;
}
.good b{font-size:14px; font-weight:600}
.good .p{font-size:13px; color:var(--crystal)}
.good .d{font-size:11.5px; color:var(--ink3); line-height:1.6}
.good button{padding:7px 0; font-size:13px}

/* ---------- 星图 ---------- */
.starmap{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:14px; margin-top:14px}
.star{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--panel),var(--bg2) 70%);
  border:1px solid var(--line); border-radius:14px; padding:16px 17px 15px;
  display:flex; flex-direction:column; gap:9px; transition:.18s;
}
.star:hover{border-color:#3a4a6b; transform:translateY(-2px)}
.star.earn{border-color:#2c5a48}
.star.risk{border-color:#5c4a24}
.star.lock{opacity:.55}
.star::before{
  content:""; position:absolute; right:-40px; top:-40px; width:150px; height:150px;
  border-radius:50%; pointer-events:none;
}
.star.earn::before{background:radial-gradient(circle, rgba(79,191,139,.16), transparent 70%)}
.star.risk::before{background:radial-gradient(circle, rgba(216,178,106,.18), transparent 70%)}
.star .nm{font-size:18px; font-weight:600; letter-spacing:1.5px}
.star .desc{font-size:12.5px; color:var(--ink2); line-height:1.7; min-height:44px}
.star .meta{display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--ink3)}
.star .price{font-size:13px; color:var(--crystal)}
.star .foot{margin-top:2px}

/* ---------- 顶部条 ---------- */
.topbar{
  position:sticky; top:0; z-index:5; backdrop-filter:blur(9px);
  background:rgba(11,13,20,.86); border-bottom:1px solid var(--line);
}
.topbar .in{max-width:920px; margin:0 auto; padding:11px 20px; display:flex; align-items:center; gap:14px}
.topbar .who{font-size:13px; color:var(--ink2)}
.topbar .who b{color:var(--ink); font-weight:600}
.topbar .cb{
  margin-left:auto; font-size:14px; color:var(--crystal);
  font-variant-numeric:tabular-nums; display:flex; align-items:center;
}
.topbar a{color:var(--ink2); font-size:12.5px; text-decoration:none}
.topbar a:hover{color:var(--crystal)}

/* ---------- 登录 ---------- */
.brand{text-align:center; margin:38px 0 26px}
.brand .mark{
  width:62px; height:62px; margin:0 auto 14px;
  background:linear-gradient(135deg,var(--crystal),#b98b3f);
  clip-path:polygon(50% 0,100% 38%,78% 100%,22% 100%,0 38%);
  box-shadow:0 0 34px rgba(127,212,255,.34);
}
.brand h1{font-size:25px; letter-spacing:5px}
.brand .en{font-size:11px; color:var(--ink3); letter-spacing:2.5px; margin-top:5px}
.code{display:flex; gap:9px}
.code input{flex:1}
.code button{white-space:nowrap; padding:11px 13px}
.check{display:flex; gap:9px; align-items:flex-start; margin:16px 0 4px; font-size:12.5px; color:var(--ink3); line-height:1.65}
.check input{width:15px; height:15px; margin:3px 0 0; flex:none; accent-color:var(--crystal-d)}

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(14px);
  z-index:60; background:#1d2436; border:1px solid var(--line); color:var(--ink);
  padding:10px 18px; border-radius:9px; font-size:13.5px; opacity:0;
  transition:.22s; pointer-events:none; max-width:88vw; text-align:center;
}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

.note{
  font-size:11.5px; color:var(--ink3); line-height:1.75;
  border-left:2px solid var(--line); padding:2px 0 2px 11px; margin:10px 0 0;
}
.kv{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:13px}
.kv .k{color:var(--ink3)}
@media(max-width:520px){
  .wrap{padding:20px 14px 52px}
  .bal{font-size:33px}
  .starmap,.goods{grid-template-columns:1fr}
}

/* 离线提示条：不做静默降级。用户必须知道自己的结晶有没有真的进数据库。
   静默降级的后果是「他以为入账了、其实没有」，那比报错糟得多。 */
.offbar{max-width:760px;margin:0 auto;padding:10px 16px;background:rgba(214,160,75,.12);
  border:1px solid rgba(214,160,75,.34);border-radius:0 0 10px 10px;color:#e8c98a;
  font-size:12.5px;line-height:1.65;text-align:center}
.offbar b{color:#f0d9a4;letter-spacing:1px}