* { margin:0; padding:0; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif; }
body { background:#0b0f17; color:#eef2f8; min-height:100vh; padding-bottom:80px; }
.app { max-width:420px; margin:0 auto; padding:16px 14px; }
.header { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.logo { font-size:20px; font-weight:700; background:linear-gradient(135deg,#ffd966,#f0b73b); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.user-info { font-size:12px; color:#889bb3; }
.balance-card { background:radial-gradient(circle at 20% 20%,#212e40,#0f1621); border-radius:24px; padding:22px 18px; margin-bottom:18px; border:1px solid #31415a; }
.balance-label { font-size:13px; color:#889bb3; margin-bottom:8px; }
.balance-number { font-size:38px; font-weight:800; color:#f5e3b6; line-height:1.1; margin-bottom:6px; }
.balance-number .cny { font-size:22px; color:#d4b87a; margin-right:2px; }
.balance-sub { font-size:13px; color:#a3b6d0; display:flex; justify-content:space-between; margin-top:4px; }
.divider { height:1px; background:#2a384b; margin:14px 0; }
.price-banner { background:linear-gradient(90deg,#1f3345,#2a4255); border-radius:16px; padding:14px; display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.price-banner .lbl { font-size:12px; color:#a3b6d0; }
.price-banner .val { font-size:20px; font-weight:800; color:#f5c542; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.item-box { background:#121c29; border-radius:14px; padding:14px; border:1px solid #203040; }
.item-box .lbl { font-size:11px; color:#8699b3; margin-bottom:6px; }
.item-box .val { font-size:20px; font-weight:700; color:#fff; }
.item-box .hint { font-size:10px; color:#5a6f8b; margin-top:4px; }
.btn-row { display:flex; gap:10px; margin-bottom:12px; }
.btn { flex:1; padding:14px 8px; border-radius:40px; border:none; font-size:14px; font-weight:700; cursor:pointer; transition:0.15s; }
.btn-primary { background:linear-gradient(145deg,#f5c542,#e0a82b); color:#1a1a1a; }
.btn-outline { background:#1f2a3a; border:1.5px solid #435a78; color:#d0def0; }
.btn:active { transform:scale(0.97); }
.bottom-nav { position:fixed; bottom:0; left:0; right:0; background:#141b26; border-top:1px solid #2a3546; display:flex; justify-content:space-around; padding:10px 0; max-width:420px; margin:0 auto; }
.bottom-nav a { color:#6f86a3; text-decoration:none; font-size:12px; text-align:center; flex:1; padding:6px 0; }
.bottom-nav a.active { color:#f5c542; font-weight:600; }
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(30,42,59,0.95); padding:14px 24px; border-radius:30px; font-size:14px; color:#f0e7d3; border:1px solid #f5c54260; opacity:0; pointer-events:none; transition:0.2s; z-index:999; }
.toast.show { opacity:1; top:20%; }
.card { background:#141b26; border-radius:18px; padding:18px; margin-bottom:14px; border:1px solid #2a3546; }
.card-title { font-size:15px; font-weight:600; color:#d0def0; margin-bottom:14px; }
.list-item { display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid #1a2537; font-size:14px; }
.list-item:last-child { border-bottom:none; }
.list-item .muted { font-size:11px; color:#6f86a3; margin-top:3px; }
.empty { text-align:center; padding:40px 20px; color:#5e7490; font-size:13px; }
.back { display:inline-block; padding:10px 18px; background:#1f2a3a; border:1px solid #435a78; color:#d0def0; border-radius:20px; text-decoration:none; font-size:13px; margin-bottom:14px; }