:root{
  --bg:#edf3ff;
  --card:#ffffff;
  --soft:#eaf1ff;
  --line:#d8e2f4;
  --blue:#1676ff;
  --blue2:#49b9ff;
  --text:#14233d;
  --muted:#7f8ca3;
  --danger:#ff4d45;
  --shadow:0 10px 24px rgba(44,87,155,.12);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
body{min-height:100vh}
#app{max-width:560px;margin:0 auto;min-height:100vh;padding:14px 14px 102px}
.page-title{font-weight:800;font-size:18px;margin:4px 2px 14px}
.card{background:var(--card);border-radius:20px;box-shadow:var(--shadow);padding:18px;margin-bottom:14px}
.balance-card{background:linear-gradient(130deg,#1264ff,#50c0ff);color:#fff}
.balance-row{display:flex;align-items:center;justify-content:space-between}
.balance-label{opacity:.88;font-weight:700}
.balance{font-size:32px;font-weight:900;margin-top:8px}
.balance small{font-size:14px}
.white-btn{border:0;border-radius:12px;background:#fff;color:#1669df;padding:12px 18px;font-weight:800;box-shadow:0 7px 15px rgba(0,0,0,.12)}
.field{margin:12px 0}
.field label{display:block;font-size:14px;color:#68758b;font-weight:800;margin-bottom:8px}
.input-wrap{display:flex;align-items:center;background:#eef3fc;border:1px dashed #cbd7e8;border-radius:14px;padding:4px}
.input-wrap input{flex:1;border:0;background:transparent;outline:none;padding:14px;font-size:17px;min-width:0}
.unit{background:#fff;border-radius:10px;padding:10px 12px;font-weight:900}
.hint{background:#eaf2ff;color:#55708f;border-radius:9px;padding:9px 12px;font-size:12px;font-weight:700}
.primary{width:100%;border:0;border-radius:12px;background:linear-gradient(90deg,#0e69ff,#45c0ff);color:#fff;padding:15px;font-size:16px;font-weight:900}
.secondary{width:100%;border:1px solid #bdd4f5;border-radius:12px;background:white;color:#1670df;padding:14px;font-weight:900}
.disabled{opacity:.45}
.rate-head{display:flex;justify-content:space-between;align-items:center}
.rate-table{display:grid;grid-template-columns:1fr 20px 1fr 1fr;gap:9px;align-items:center}
.rate-table .cell{background:#eef3fc;border:1px solid #d7e0ef;border-radius:12px;padding:12px;font-weight:800}
.rate-table .r{color:#096ef4}
.section-title{font-size:18px;font-weight:900}
.muted{color:var(--muted);font-size:13px}
.bottom-nav{position:fixed;bottom:8px;left:50%;transform:translateX(-50%);width:min(530px,calc(100% - 28px));background:#fff;border:1.5px solid #1883ff;border-radius:24px;padding:4px;display:grid;grid-template-columns:repeat(3,1fr);z-index:20}
.nav-btn{border:0;background:transparent;padding:14px 6px;color:#8d97a8;font-weight:900;font-size:15px}
.nav-btn.active{color:#0776f5}
.tabs{display:flex;background:#dfe8f8;border-radius:12px;padding:3px;margin-bottom:20px}
.tabs button{flex:1;border:0;background:transparent;padding:9px;border-radius:9px;color:#5d6b80;font-weight:800}
.tabs button.active{background:#fff;color:#1670e9;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.empty{text-align:center;padding:150px 0 80px;color:#9da7b7}
.empty-icon{font-size:38px}
.profile-head{background:linear-gradient(120deg,#f0171d,#ff704e);color:#fff;display:flex;align-items:center;gap:15px}
.avatar{width:66px;height:66px;border-radius:50%;background:#fff3;border:3px solid #fff8;display:grid;place-items:center;font-size:26px;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.name{font-size:22px;font-weight:900}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{background:#fff;border-radius:17px;padding:18px;box-shadow:var(--shadow)}
.metric b{display:block;font-size:24px;color:#1171f1;margin-top:8px}
.menu-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:17px;padding:20px;margin-bottom:12px;box-shadow:var(--shadow);font-weight:900}
.menu-row span:last-child{color:#9aa5b5}
.runtime{text-align:center;color:#8794a6;margin:20px 0}
.modal{position:fixed;inset:0;background:rgba(20,31,51,.55);display:none;align-items:center;justify-content:center;padding:24px;z-index:99}
.modal.show{display:flex}
.modal-card{width:min(420px,100%);background:#fff;border-radius:25px;padding:24px;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal-card h2{text-align:center;margin:0 0 15px}
.modal-card p{line-height:1.65;font-weight:700}
.rule{height:2px;background:#657084;margin:10px 0 16px}
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);background:#192335;color:#fff;padding:12px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:.2s;z-index:120;max-width:85%;text-align:center}
#toast.show{opacity:1}
.back{border:0;background:transparent;color:#3b6d9c;font-size:16px;margin-bottom:12px}
.demo-qr{width:170px;height:170px;margin:18px auto;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#111 0 8px,#fff 8px 16px);border:12px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,.15);font-weight:1000;color:#1670e9;text-shadow:0 0 4px #fff}
.agent-hero{text-align:center;font-size:52px}
.progress{height:7px;background:#e2e9f5;border-radius:9px;overflow:hidden;margin:8px 0}
.progress i{display:block;height:100%;background:#2d8cff;width:0}
.notice{background:#eef6ff;border-radius:12px;padding:12px;color:#4d6582;font-size:13px;line-height:1.55}
.order{background:#fff;border-radius:15px;padding:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.order-top{display:flex;justify-content:space-between;font-weight:900}
.order small{color:#8793a6}