/* ============================================================
   QAQ 积分服务 · 样式
   配色对齐 muskspace.cn：薄荷绿 #5bc5a3 + 冷灰底 #f5f7fa + 中性黑 #181818
   改主色只需改 :root 里的 --brand / --brand-600 / --brand-50 / --brand-100
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#5bc5a3;
  --brand-600:#3fa888;
  --brand-50:#eaf7f2;
  --brand-100:#cfeede;

  --bg:#f5f7fa;
  --surface:#fff;
  --surface-2:#f9fafb;

  --line:#ecefef;
  --line2:#e2e6eb;

  --text:#181818;
  --text2:#6b7280;
  --text3:#9aa1ab;

  --amber:#e8a027;
  --amber-bg:#fffbeb;
  --amber-line:#fde68a;
  --amber-text:#92400e;

  --red:#d54941;
  --red-bg:#fee2e2;
  --red-line:#fecaca;
  --red-text:#c2410c;

  --green:#00a870;

  --shadow-sm:0 1px 2px #0000000a;
  --shadow:0 4px 16px #0000000f;
  --shadow-lg:0 16px 48px #0000001a;

  --r-sm:6px;
  --r:9px;
  --r-lg:14px;
  --r-pill:999px;

  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;

  --brand-dark:var(--brand-600);
  --brand-bg:var(--brand-50);
  --brand-line:var(--brand-100);
  --radius:var(--r);
}
body{
  font-family:var(--font);
  background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.app{display:flex;min-height:100vh}

/* ==================== 登录 ==================== */
.login-view{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:24px;background:var(--bg);
}
.login-card{
  width:100%;max-width:368px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 30px 28px;
  box-shadow:var(--shadow-lg);
}
.login-logo{
  width:52px;height:52px;border-radius:12px;object-fit:contain;
  display:block;margin-bottom:16px;
}
.login-card h1{font-size:22px;font-weight:650;letter-spacing:-.01em}
.login-card .sub{font-size:14px;color:var(--text3);margin:3px 0 22px}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:13.5px;color:var(--text2);margin-bottom:5px}
.fld input{
  width:100%;padding:9px 12px;font-size:14.5px;
  border:1px solid var(--line2);border-radius:var(--r-sm);
  font-family:inherit;color:var(--text);background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.fld input:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(91,197,163,.18);
}
.fld input::placeholder{color:var(--text3)}
.login-err{
  font-size:14px;color:var(--red);background:var(--red-bg);
  border:1px solid var(--red-line);border-radius:var(--r-sm);
  padding:8px 11px;margin-bottom:12px;display:none;
}
.login-err.on{display:block}
.login-foot{
  margin-top:18px;padding-top:15px;border-top:1px solid var(--line);
  font-size:13px;color:var(--text3);line-height:1.7;
}
.demo-link{
  display:block;width:100%;text-align:center;margin-top:12px;
  background:none;border:none;color:var(--text3);
  font-size:13.5px;cursor:pointer;font-family:inherit;
  text-decoration:underline;text-underline-offset:2px;
}
.demo-link:hover{color:var(--brand-dark)}

/* ==================== 侧栏 ==================== */
.sidebar{
  width:264px;flex-shrink:0;background:var(--surface);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;
  padding:22px 16px;
  box-shadow:var(--shadow-sm);
}
.brand{
  padding:0 6px 16px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);margin-bottom:16px;
}
.brand-mark{
  width:44px;height:44px;border-radius:12px;
  object-fit:contain;flex-shrink:0;display:block;
}
.brand-text-wrap{min-width:0;flex:1}
.brand-text{font-size:15.5px;font-weight:650;letter-spacing:-.01em;line-height:1.25;white-space:nowrap}
.brand-sub{font-size:12.5px;color:var(--text3);margin-top:2px;letter-spacing:.01em;white-space:nowrap}

.bal-mini{
  margin:0 0 14px;padding:10px 14px;
  background:var(--brand-50);border:1px solid var(--brand-100);
  border-radius:var(--r);
}
.bal-mini .lb{font-size:12px;color:var(--brand-dark);letter-spacing:.03em;opacity:.85}
.bal-mini .val{
  font-size:26px;font-weight:700;color:var(--brand-dark);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.25;
}
.bal-mini .rmb{font-size:12px;color:var(--brand-dark);opacity:.7}

nav{padding:0;flex:1;overflow-y:auto;margin:0 -4px}
nav::-webkit-scrollbar{width:5px}
nav::-webkit-scrollbar-thumb{background:var(--line2);border-radius:3px}
.nav-group{font-size:12.5px;color:var(--text3);padding:14px 12px 6px;letter-spacing:.05em;font-weight:500}
.nav-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-sm);cursor:pointer;
  color:var(--text2);font-size:15px;line-height:1.5;
  transition:background .13s,color .13s;
  user-select:none;
}
.nav-item:hover{background:var(--surface-2);color:var(--text)}
.nav-item.on{background:var(--brand-bg);color:var(--brand-dark);font-weight:500}
.nav-item svg{width:20px;height:20px;flex-shrink:0;opacity:.75}
.nav-item.on svg{opacity:1}
.nav-badge{
  margin-left:auto;font-size:11.5px;padding:0 5px;border-radius:3px;
  background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-line);
}

.side-foot{padding:12px;border-top:1px solid var(--line);text-align:center}
.user-row{
  display:flex;align-items:center;gap:7px;justify-content:center;
  font-size:13px;color:var(--text2);margin-bottom:7px;
  overflow:hidden;
}
.user-row .dot{
  width:5px;height:5px;border-radius:50%;background:var(--brand);flex-shrink:0;
}
.user-row .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px}
.btn-logout{
  width:100%;padding:6px;font-size:13.5px;
  background:transparent;border:1px solid var(--line2);border-radius:6px;
  color:var(--text3);cursor:pointer;font-family:inherit;
}
.btn-logout:hover{color:var(--text2);border-color:var(--text3)}

/* ==================== 主区 ==================== */
main{flex:1;min-width:0;padding:32px 36px 60px}
.inner{width:100%;max-width:1400px;margin:0 auto}

.notice{
  display:flex;align-items:flex-start;gap:8px;
  background:var(--amber-bg);border:1px solid var(--amber-line);
  border-radius:8px;padding:9px 13px;margin-bottom:16px;
  font-size:14px;color:var(--amber-text);
}
.notice svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.notice.err{background:var(--red-bg);border-color:var(--red-line);color:var(--red-text)}

.page{display:none}
.page.on{display:block}
.page-head{margin-bottom:18px}
.page-head h1{font-size:19px;font-weight:600;letter-spacing:-.01em}
.page-head p{font-size:14px;color:var(--text2);margin-top:3px}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.card-h{font-size:14.5px;font-weight:600;margin-bottom:3px;display:flex;align-items:center;gap:7px}
.card-sub{font-size:13.5px;color:var(--text3);margin-bottom:14px}
.step-no{
  width:17px;height:17px;border-radius:50%;background:var(--brand);color:#fff;
  font-size:12px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-weight:500;
}

.hero{
  background:linear-gradient(135deg,var(--brand),var(--brand-600));
  border-radius:var(--r-lg);padding:24px 26px;color:#fff;
  margin-bottom:16px;position:relative;overflow:hidden;
  box-shadow:0 6px 20px rgba(91,197,163,.28);
}
.hero::after{
  content:"";position:absolute;right:-40px;top:-40px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.055);
}
.hero .hi{font-size:14px;opacity:.85;position:relative;z-index:1}
.hero .big{
  font-size:38px;font-weight:700;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.15;
  margin:6px 0 2px;position:relative;z-index:1;
}
.hero .big span{font-size:16px;font-weight:400;opacity:.8;margin-left:5px;letter-spacing:0}
.hero .eq{font-size:13.5px;opacity:.72;position:relative;z-index:1}

.redeem-row{display:flex;gap:9px}
.redeem-row input{
  flex:1;padding:9px 13px;font-size:14.5px;
  border:1px solid var(--line2);border-radius:8px;
  font-family:inherit;color:var(--text);background:#fff;
}
.redeem-row input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(91,197,163,.18)}
.redeem-row input::placeholder{color:var(--text3)}

.btn{
  padding:9px 18px;font-size:15px;font-family:inherit;
  border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  background:var(--brand);color:#fff;font-weight:500;white-space:nowrap;
  transition:all .15s;
}
.btn:hover:not(:disabled){background:var(--brand-dark)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-lg{width:100%;padding:11px;font-size:14.5px}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:11px;max-width:620px}
.plan{
  position:relative;padding:16px 14px;text-align:center;
  border:1.5px solid var(--line2);border-radius:var(--r);
  cursor:pointer;background:#fff;transition:all .15s;
}
.plan:hover{border-color:var(--brand-line)}
.plan.on{border-color:var(--brand);background:var(--brand-bg)}
.plan-tag{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  background:#f59e6b;color:#fff;font-size:11.5px;
  padding:1px 8px;border-radius:9px;white-space:nowrap;
}
.plan .price{
  font-size:26px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.plan .price small{font-size:14px;font-weight:400;margin-right:1px}
.plan .credits{font-size:14px;color:var(--text2);margin-top:3px;font-variant-numeric:tabular-nums}
.plan .bonus{font-size:12.5px;color:var(--brand-dark);margin-top:2px;height:16px}
.plan-check{
  position:absolute;right:9px;top:9px;width:15px;height:15px;border-radius:50%;
  background:var(--brand);display:none;align-items:center;justify-content:center;
}
.plan.on .plan-check{display:flex}
.plan-check::after{
  content:"";width:4px;height:7px;border:solid #fff;
  border-width:0 1.5px 1.5px 0;transform:rotate(42deg);margin-top:-2px;
}

.pay-opt{
  display:flex;align-items:center;gap:11px;
  padding:12px 15px;border:1.5px solid var(--line2);border-radius:8px;
  cursor:pointer;background:#fff;
}
.pay-opt.on{border-color:var(--brand);background:var(--brand-bg)}
.pay-logo{
  width:28px;height:28px;border-radius:6px;background:#1677ff;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:13.5px;font-weight:600;flex-shrink:0;
}
.pay-name{font-size:14.5px;font-weight:500}
.pay-desc{font-size:13px;color:var(--text3)}
.pay-radio{
  width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line2);
  margin-left:auto;flex-shrink:0;position:relative;
}
.pay-opt.on .pay-radio{border-color:var(--brand);background:var(--brand)}
.pay-opt.on .pay-radio::after{
  content:"";position:absolute;left:4px;top:4px;width:6px;height:6px;
  border-radius:50%;background:#fff;
}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) 296px;gap:14px;align-items:start}

.summary{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;position:sticky;top:32px;
  box-shadow:var(--shadow);
}
.sum-row{display:flex;justify-content:space-between;font-size:14px;padding:6px 0;color:var(--text2)}
.sum-row b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.sum-total{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 0 14px;margin-top:4px;border-top:1px solid var(--line);
}
.sum-total .lb{font-size:14px;color:var(--text2)}
.sum-total .amt{
  font-size:29px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.sum-total .amt small{font-size:16px;font-weight:400;margin-right:1px}
.sum-note{font-size:13px;color:var(--text3);margin-top:10px;line-height:1.55}

table{width:100%;border-collapse:collapse;font-size:14px}
thead th{
  text-align:left;font-weight:500;color:var(--text3);font-size:13px;
  padding:8px 10px;border-bottom:1px solid var(--line2);white-space:nowrap;
  background:var(--surface-2);
}
tbody td{
  padding:9px 10px;border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;color:var(--text2);
}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
.n{text-align:right}
.model-tag{
  font-family:var(--mono);
  font-size:13px;color:var(--text);background:var(--surface-2);
  padding:1px 6px;border-radius:4px;border:1px solid var(--line);
  white-space:nowrap;
}
.hit-bar{display:inline-flex;align-items:center;gap:6px}
.hit-track{width:38px;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.hit-fill{height:100%;background:var(--brand);border-radius:2px}
.hit-fill.hi{background:#f59e6b}
.cost{color:var(--text);font-weight:500}
.empty-row td{
  text-align:center;color:var(--text3);padding:34px 10px;font-size:14px;
}
.skel{
  display:inline-block;height:10px;border-radius:3px;
  background:linear-gradient(90deg,#f0f2f5 25%,#e5e8ec 50%,#f0f2f5 75%);
  background-size:200% 100%;animation:sh 1.2s infinite;
}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:16px}
.stat{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:14px 16px;
  box-shadow:var(--shadow-sm);
}
.stat .lb{font-size:13px;color:var(--text3)}
.stat .v{
  font-size:22px;font-weight:600;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:2px;
}
.stat .v small{font-size:13px;font-weight:400;color:var(--text3);margin-left:2px}
.stat .sub{font-size:12.5px;color:var(--text3);margin-top:1px}
.stat.hl{background:var(--brand-bg);border-color:var(--brand-line)}
.stat.hl .v{color:var(--brand-dark)}

.code-wrap{position:relative;margin-top:12px}
.code-wrap pre{
  background:#1b1f24;color:#a8d8c8;border-radius:8px;
  padding:15px 17px;font-family:var(--mono);
  font-size:13px;line-height:1.7;overflow-x:auto;
  white-space:pre;
}
.copy-btn{
  position:absolute;right:9px;top:9px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:#cfe7e2;border-radius:5px;padding:3px 10px;
  font-size:12.5px;cursor:pointer;font-family:inherit;
}
.copy-btn:hover{background:rgba(255,255,255,.18)}
.copy-btn.done{background:var(--brand);border-color:var(--brand);color:#fff}

.kv{display:grid;grid-template-columns:88px 1fr;gap:8px 14px;font-size:14px;align-items:center}
.kv dt{color:var(--text3);font-size:14px}
.kv dd{display:flex;align-items:center;gap:8px;min-width:0}
.key-val{
  font-family:var(--mono);font-size:13.5px;
  background:var(--surface-2);padding:4px 9px;border-radius:5px;
  border:1px solid var(--line);color:var(--text);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mini-btn{
  font-size:13px;padding:3px 9px;border-radius:5px;cursor:pointer;
  background:#fff;border:1px solid var(--line2);color:var(--text2);
  font-family:inherit;white-space:nowrap;
}
.mini-btn:hover:not(:disabled){border-color:var(--brand);color:var(--brand-dark)}
.mini-btn:disabled{opacity:.5;cursor:not-allowed}
.inline-code{
  background:var(--surface-2);padding:2px 6px;border-radius:4px;
  font-size:13.5px;font-family:var(--mono);
}

.tip{
  display:flex;gap:9px;padding:11px 14px;border-radius:8px;
  font-size:14px;line-height:1.65;
}
.tip.ok{background:var(--brand-50);color:#1f6b56;border:1px solid var(--brand-100)}
.tip.warn{background:var(--amber-bg);color:var(--amber-text);border:1px solid var(--amber-line)}
.tip.err{background:var(--red-bg);color:var(--red-text);border:1px solid var(--red-line)}
.tip svg{width:14px;height:14px;flex-shrink:0;margin-top:2px}

.faq{border-bottom:1px solid var(--line)}
.faq:last-child{border-bottom:none}
.faq-q{
  padding:13px 0;font-size:14.5px;font-weight:500;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.faq-q::after{content:"+";color:var(--text3);font-size:16px;font-weight:400;line-height:1}
.faq.open .faq-q::after{content:"−"}
.faq-a{
  display:none;padding:0 0 14px;font-size:14px;color:var(--text2);
  line-height:1.75;max-width:660px;
}
.faq.open .faq-a{display:block}

.pager{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:13px;font-size:14px;color:var(--text3);
  gap:12px;flex-wrap:wrap;
}
.pager-btns{display:flex;gap:5px}
.pager-btns button{
  padding:4px 10px;font-size:13.5px;border-radius:5px;
  background:#fff;border:1px solid var(--line2);color:var(--text2);
  cursor:pointer;font-family:inherit;font-variant-numeric:tabular-nums;
}
.pager-btns button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.pager-btns button:disabled{opacity:.4;cursor:not-allowed}

/* Toast */
#toast{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%) translateY(20px);
  background:#26292e;color:#fff;padding:10px 20px;border-radius:8px;
  font-size:14px;opacity:0;pointer-events:none;transition:.22s;z-index:99;
  max-width:min(420px,calc(100vw - 40px));text-align:center;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--red)}
#toast.ok{background:var(--brand-dark)}

/* ==================== 响应式 ==================== */
@media(min-width:1600px){
  main{padding:36px 44px 70px}
  .sidebar{width:280px}
  .two-col{grid-template-columns:minmax(0,1fr) 340px}
  .hero .big{font-size:43px}
  .hero{padding:26px 30px}
}
@media(max-width:1240px){
  .sidebar{width:256px}
  main{padding:30px 32px 56px}
  .two-col{grid-template-columns:minmax(0,1fr) 292px}
}
@media(max-width:1000px){
  .sidebar{width:252px;padding:20px 16px}
  .brand{padding:0 4px 14px;gap:9px;margin-bottom:14px}
  .brand-mark{width:40px;height:40px;border-radius:11px}
  .brand-text{font-size:15.5px}
  .brand-sub{font-size:12.5px}
  .bal-mini{margin:0 0 12px;padding:9px 12px}
  .bal-mini .val{font-size:26px}
  .nav-item{padding:8px 11px;font-size:14.5px;gap:9px}
  .nav-item svg{width:20px;height:20px}
  .nav-group{padding:12px 11px 5px;font-size:12px}
  main{padding:26px 28px 52px}
  .two-col{grid-template-columns:minmax(0,1fr) 268px;gap:14px}
  .summary{padding:17px}
  .card{padding:18px;margin-bottom:14px}
  .hero{padding:20px 22px;margin-bottom:14px}
  .hero .big{font-size:34px}
  .stat .v{font-size:18px}
  .plan{padding:15px 11px}
  .plan .price{font-size:23px}
  .plan .credits{font-size:13.5px}
  .plan-tag{font-size:11px;padding:1px 6px}
}
@media(max-width:860px){
  .two-col{grid-template-columns:1fr}
  .summary{position:static}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .app{display:block}
  .sidebar{
    width:100%;max-width:100vw;height:auto;position:sticky;top:0;z-index:30;
    flex-direction:row;align-items:center;
    border-right:none;border-bottom:1px solid var(--line);
    background:var(--surface);
    padding:0;overflow:hidden;box-shadow:none;
  }
  .brand{padding:11px 12px;border-bottom:none;flex-shrink:0}
  .brand-mark{width:32px;height:32px;border-radius:8px}
  .brand-text{font-size:14px}
  .brand-sub{display:none}
  .bal-mini{display:none}
  nav{
    display:flex;align-items:center;gap:2px;flex:1;
    padding:6px 8px;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  nav::-webkit-scrollbar{height:0}
  .nav-group{display:none}
  .nav-item{flex-shrink:0;white-space:nowrap;padding:8px 11px;font-size:14px;gap:7px}
  .nav-item svg{width:13px;height:13px}
  .nav-badge{display:none}
  .side-foot{display:none}
  main{padding:18px 16px 46px}
  .inner{max-width:none}
  .page-head h1{font-size:19px}
  .hero{padding:16px 17px}
  .hero .big{font-size:31px}
  .hero .hi{font-size:13.5px}
  .hero .eq{font-size:13px}
  .card{padding:16px;margin-bottom:14px}
  .plans{grid-template-columns:1fr;gap:9px}
  .plan{padding:13px 12px}
  .plan .price{font-size:23px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .stat{padding:11px 13px}
  .stat .v{font-size:19px}
  .redeem-row{flex-direction:column}
  .redeem-row .btn{width:100%;padding:10px}
  .kv{grid-template-columns:1fr;gap:4px}
  .kv dt{margin-top:6px}
  .sum-total .amt{font-size:23px}
  table{font-size:13.5px}
  thead th,tbody td{padding:7px 8px}
  .copy-btn{font-size:12px;padding:3px 8px}
  .code-wrap pre{font-size:12px;padding:13px 14px}
  .login-card{padding:26px 22px 22px}
}