/* ============================================================
   字影万像 · 个人中心（余额 / 充值 / 我的作品 / 消费明细）
   与主页同源浅色玻璃语言
   ============================================================ */
#view-personal{position:fixed;inset:0;z-index:71;background:linear-gradient(180deg,#f5f6f9 0%,#eef0f6 100%);overflow-y:auto;display:none}
#view-personal.show{display:block}
#view-personal::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(58% 50% at 12% 0%,rgba(124,92,255,.14),transparent 55%),
  radial-gradient(50% 44% at 90% 10%,rgba(22,184,214,.13),transparent 55%),
  linear-gradient(180deg,#f5f6f9 0%,#eef0f6 100%);
  background-size:160% 160%,160% 160%,100% 100%;
  animation:auroraDrift 22s ease-in-out infinite alternate}
.p-body{max-width:1100px;margin:0 auto;padding:96px 28px 70px}
.p-head{display:flex;align-items:center;gap:18px;margin-bottom:30px}
.p-ava{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#c9c2ee,#e7b9d6);
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#3a2f4a;border:1px solid var(--line2)}
.p-head h2{font-size:24px;font-weight:700}
.p-head .p-sub{font-size:13px;color:var(--mut);margin-top:3px}
.p-logout{margin-left:auto;font-size:13px;font-weight:700;color:#7c5cff;background:rgba(124,92,255,.10);
  border:1px solid rgba(124,92,255,.32);border-radius:10px;padding:9px 18px;cursor:pointer;transition:.2s;white-space:nowrap}
.p-logout:hover{background:rgba(124,92,255,.20)}
.p-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}
@media(max-width:760px){.p-cards{grid-template-columns:1fr}}
.p-card{background:rgba(255,255,255,.66);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.7);
  border-radius:20px;padding:22px 24px;box-shadow:0 14px 40px rgba(40,40,80,.1)}
.p-card .p-k{font-size:12px;color:var(--mut2);letter-spacing:.05em;text-transform:uppercase}
.p-card .p-v{font-size:30px;font-weight:800;margin-top:8px;letter-spacing:-.01em}
.p-card .p-v small{font-size:14px;font-weight:600;color:var(--mut);margin-left:4px}
.p-card .p-act{margin-top:14px}
.p-card.accent{background:linear-gradient(135deg,rgba(124,92,255,.12),rgba(22,184,214,.10));border-color:rgba(124,92,255,.25)}
.p-rech{font-size:13px;font-weight:700;color:#fff;background:var(--sig);border:none;border-radius:10px;padding:9px 18px;cursor:pointer;transition:.2s}
.p-rech:hover{transform:translateY(-1px)}
.p-tabs{display:flex;gap:10px;margin-bottom:20px}
.p-tabs button{padding:9px 18px;border-radius:20px;font-size:14px;font-weight:600;color:var(--mut);
  border:1px solid var(--line);background:rgba(255,255,255,.5);transition:.2s}
.p-tabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.p-tabpane{display:none}
.p-tabpane.on{display:block}
.p-empty{text-align:center;padding:60px 20px;color:var(--mut2);font-size:14px}
.p-empty svg{width:54px;height:54px;color:var(--v);opacity:.5;margin-bottom:14px}
.bill{background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:10px;
  display:flex;align-items:center;justify-content:space-between;gap:14px}
.bill .b-main b{font-size:14px}
.bill .b-main span{display:block;font-size:12px;color:var(--mut);margin-top:3px}
.bill .b-amt{font-size:15px;font-weight:800}
.bill .b-amt.minus{color:#c0392b}
.bill .b-amt.plus{color:#0BA360}