/* 账号设置 → 我的服务 / 积分充值（public/js/account-wallet.js）. Cartoon style: ink outlines, offset shadows,
   ZCOOL KuaiLe titles, Baloo 2 numbers. */
.wallet-panel,.wallet-shop{--ink:#2b1d14;--paper:#fffaf0;--muted:#6e604d;color:var(--ink)}
.wallet-title{margin:0 0 10px;font:400 24px var(--f-display,'ZCOOL KuaiLe',sans-serif)}
.wallet-panel h4,.wallet-shop h4{margin:20px 0 8px;font:400 19px var(--f-display,'ZCOOL KuaiLe',sans-serif)}
.wallet-panel .muted,.wallet-shop .muted{color:var(--muted);font-size:14px;margin:4px 0 10px}
.wallet-loading{color:var(--muted)}
.wallet-sim{display:flex;gap:8px;align-items:center;margin:0 0 12px;padding:7px 12px;border:2px dashed #5b8fc7;border-radius:12px;background:#eef6ff;color:#16457a;font-size:13px}
.wallet-sim b{padding:1px 8px;border-radius:999px;background:#2f6db0;color:#fff;font-size:12px;white-space:nowrap}
/* balance */
.wallet-balance{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 14px;padding:14px 18px;border:3px solid var(--ink);border-radius:22px;background:linear-gradient(135deg,#fff3b8,#ffd96a);box-shadow:0 5px 0 var(--ink)}
.wallet-balance>div{display:grid}
.wallet-balance span{font-weight:800;font-size:14px}
.wallet-balance b{font:800 40px/1 var(--f-num,'Baloo 2',sans-serif);font-variant-numeric:tabular-nums}
.wallet-balance small{grid-column:1/-1;color:#6b4c00;font-size:13px}
.wallet-balance .wallet-go{grid-row:1;grid-column:3;min-height:44px;white-space:nowrap;background:#fff}
.wallet-coin{flex:none;filter:drop-shadow(0 2px 0 rgba(43,29,20,.25))}
/* trial */
.wallet-trial{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:12px 14px;border:3px solid var(--ink);border-radius:18px;background:#fff;box-shadow:0 3px 0 var(--ink)}
.wallet-trial>span{font-size:30px}
.wallet-trial p{margin:0;flex:1;line-height:1.5}
.wallet-trial p b{display:block}
.wallet-trial.on{background:#e8f6df}
.wallet-trial .btn{min-height:46px;min-width:88px}
/* my courses */
.wallet-courses{display:grid;gap:10px}
.wallet-course{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 14px 14px;border:3px solid var(--ink);border-radius:18px;background:#fff;opacity:.8}
.wallet-course.on{opacity:1;background:linear-gradient(90deg,color-mix(in srgb,var(--tone) 22%,#fff),#fff 70%)}
.wallet-course i,.wallet-plan header i{display:grid;place-items:center;width:44px;height:44px;border:3px solid var(--ink);border-radius:14px;background:var(--tone);color:var(--tone-ink);font:800 15px var(--f-num,'Baloo 2',sans-serif);font-style:normal}
.wallet-course b{font-size:16px}
.wallet-course small,.wallet-plan small{display:block;color:var(--muted);font-size:12px}
.wallet-course p{margin:0;text-align:right;font-size:13px;line-height:1.2;color:var(--muted)}
.wallet-course p strong{font:800 22px var(--f-num,'Baloo 2',sans-serif);color:var(--ink)}
.wallet-course-bar{position:absolute;left:14px;right:14px;bottom:6px;height:5px;border-radius:5px;background:#eee2c8;overflow:hidden}
.wallet-course-bar span{display:block;height:100%;background:var(--tone)}
/* open with points */
.wallet-plans{display:grid;gap:14px}
.wallet-plan{display:grid;gap:12px;padding:14px;border:3px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:0 4px 0 var(--ink)}
.wallet-plan header{display:flex;align-items:center;gap:12px}
.wallet-plan header b{font-size:17px}
.wallet-months{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wallet-months button{display:grid;justify-items:center;gap:0;min-height:64px;padding:6px 4px;border:2px solid var(--ink);border-radius:14px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;transition:transform .12s}
.wallet-months button span{font-weight:700;font-size:13px}
.wallet-months button b{font:800 20px/1.1 var(--f-num,'Baloo 2',sans-serif)}
.wallet-months button small{font-size:11px}
.wallet-months button[aria-checked=true]{background:color-mix(in srgb,var(--tone) 30%,#fff);border-width:3px;box-shadow:0 3px 0 var(--ink);transform:translateY(-2px)}
.wallet-months button:focus-visible,.wallet-pack:focus-visible{outline:3px solid #2879ac;outline-offset:2px}
.wallet-redeem{justify-self:end;min-height:46px;padding:0 20px}
.wallet-confirm{margin:14px 0;padding:14px;border:3px solid var(--ink);border-radius:18px;background:#fff1be;box-shadow:0 4px 0 var(--ink)}
.wallet-confirm p{margin:0 0 10px;line-height:1.6}
.wallet-confirm small{color:var(--muted)}
.wallet-confirm div{display:flex;flex-wrap:wrap;gap:8px}
.wallet-confirm .btn{min-height:44px}
.wallet-state{min-height:1.5em;margin:10px 0 0;font-weight:700}
.wallet-state[data-kind=ok]{color:#24603a}.wallet-state[data-kind=err]{color:#b3401d}
.wallet-state .alink{margin-left:6px;font-weight:800}
/* history */
.wallet-history{margin-top:16px;border-top:2px dashed #d9c9a6}
.wallet-history summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}
.wallet-history ul,.wallet-orders{margin:0;padding:0;list-style:none}
.wallet-history li,.wallet-orders li{display:grid;grid-template-columns:7.5em 1fr auto auto;align-items:baseline;gap:8px;padding:8px 2px;border-bottom:1px dashed #e2d5b8;font-size:14px}
.wallet-history li span,.wallet-orders li span{color:var(--muted);font-size:13px}
.wallet-history em,.wallet-orders em{font-style:normal}
.wallet-history b{font-family:var(--f-num,'Baloo 2',sans-serif);font-size:16px}
.wallet-history .plus{color:#24603a}.wallet-history .minus{color:#b3401d}
.wallet-history small{color:var(--muted);font-size:12px}
/* buy points */
.wallet-buy{display:grid;gap:14px;margin-top:16px}
.wallet-packs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.wallet-pack{position:relative;display:grid;justify-items:center;align-content:start;gap:1px;padding:16px 6px 10px;border:3px solid var(--ink);border-radius:20px;background:#fff;color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.wallet-pack b{font:800 30px/1 var(--f-num,'Baloo 2',sans-serif);margin-top:4px}
.wallet-pack>span:not(.wallet-ribbon){font-size:12px;color:var(--muted)}
.wallet-pack strong{margin-top:6px;font:800 18px var(--f-num,'Baloo 2',sans-serif)}
.wallet-pack s{font-size:12px;color:var(--muted)}
.wallet-pack em{margin-top:2px;padding:1px 8px;border-radius:999px;background:#ff7a59;color:#fff;font-style:normal;font-size:12px;font-weight:800}
.wallet-pack em.plain{background:none;color:var(--muted);font-weight:600}
.wallet-pack small{margin-top:4px;font-size:11px;color:var(--muted)}
.wallet-pack:hover{transform:translateY(-2px)}
.wallet-pack[aria-checked=true]{background:#fff4c8;border-width:4px;box-shadow:0 6px 0 var(--ink);transform:translateY(-4px)}
.wallet-pack[aria-checked=true]::after{content:'✓';position:absolute;top:-10px;left:-10px;display:grid;place-items:center;width:26px;height:26px;border:3px solid var(--ink);border-radius:50%;background:#6cc391;color:#fff;font-weight:900;font-size:14px}
.wallet-ribbon{position:absolute;top:-12px;right:-6px;padding:2px 8px;border:2px solid var(--ink);border-radius:10px;background:#ff5c7a;color:#fff;font-size:11px;font-weight:900;transform:rotate(6deg);white-space:nowrap}
.wallet-summary{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 18px;padding:16px 18px;border:3px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:0 5px 0 var(--ink)}
.wallet-summary h4{grid-column:1/-1;margin:0}
.wallet-summary dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0;max-width:360px}
.wallet-summary dt{color:var(--muted);font-size:14px}
.wallet-summary dd{margin:0;text-align:right;font:700 16px var(--f-num,'Baloo 2',sans-serif)}
.wallet-summary dd.save{color:#c14322}
.wallet-summary .total{padding-top:6px;border-top:2px solid var(--ink);color:var(--ink);font-weight:800}
.wallet-summary dd.total{font-size:26px}
.wallet-methods{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 0;font-size:13px;color:var(--muted)}
.wallet-methods i{padding:2px 10px;border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-style:normal;font-weight:700;font-size:12px}
.wallet-pay{grid-column:2;grid-row:2/4;min-height:56px;padding:0 24px;font-size:18px}
.wallet-pay:disabled{opacity:.55;cursor:not-allowed}
.wallet-summary>small{grid-column:1/-1;color:var(--muted);font-size:12px}
.wallet-guest{margin:14px 0 0;padding:14px;border:3px solid var(--ink);border-radius:18px;background:#fff1e6}
.wallet-guest p{margin:6px 0 10px;font-size:14px}
.wallet-orders li{grid-template-columns:7.5em 1fr auto auto auto}
.wallet-orders i{padding:1px 8px;border-radius:999px;background:#efe6d2;font-style:normal;font-size:12px;font-weight:700}
.wallet-orders i[data-status=fulfilled]{background:#d8efb4}.wallet-orders i[data-status=pending]{background:#fff1be}.wallet-orders i[data-status=failed],.wallet-orders i[data-status=expired],.wallet-orders i[data-status=cancelled]{background:#f4ddd6}
.wallet-orders a{font-weight:800}
.guest-start{margin-top:16px;padding-top:12px;border-top:2px dashed #d9c9a6;text-align:center}
.guest-start p{margin:0 0 6px;font-weight:700}
.guest-start small{display:block;margin-top:6px;color:#6e604d;font-size:12px}
@media (max-width:640px){
 .wallet-packs{grid-template-columns:repeat(3,1fr)}
 .wallet-months{grid-template-columns:repeat(2,1fr)}
 .wallet-summary{grid-template-columns:1fr}
 .wallet-pay{grid-column:1;grid-row:auto;width:100%}
 .wallet-balance{grid-template-columns:auto 1fr}
 .wallet-balance .wallet-go{grid-column:1/-1;grid-row:auto;width:100%}
 .wallet-history li,.wallet-orders li{grid-template-columns:1fr auto;font-size:13px}
}
/* the one-week trial offer */
.wallet-offer-shade{position:fixed;inset:0;z-index:4000;display:grid;place-items:center;padding:16px;background:rgba(43,29,20,.45)}
.wallet-offer{position:relative;width:min(440px,100%);padding:24px 22px 18px;border:3px solid #2b1d14;border-radius:26px;background:#fffaf0;color:#2b1d14;text-align:center;box-shadow:0 8px 0 #2b1d14;animation:walletPop .32s cubic-bezier(.2,1.3,.4,1)}
.wallet-offer .sx{position:absolute;top:10px;right:10px;width:44px;height:44px;border:0;background:none;font-size:26px;cursor:pointer;color:#2b1d14}
.wallet-offer-art{font-size:56px;line-height:1}
.wallet-offer h2{margin:8px 0;font-family:var(--f-display,'ZCOOL KuaiLe',sans-serif);font-weight:400}
.wallet-offer p{margin:8px 0;line-height:1.6}
.wallet-offer .muted{color:#6e604d;font-size:13px}
.wallet-offer-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:14px 0 6px}
.wallet-offer-actions .btn{min-height:48px;min-width:140px}
@keyframes walletPop{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.wallet-offer{animation:none}.wallet-pack,.wallet-months button{transition:none}}