/* =========================================================================
 * GLM Coding Plan · 订阅与续费页面样式
 * 设计参数对齐参考页 bigmodel.cn/glm-coding：
 *   底色 #f7f8fa ｜ 标题 #131212 ｜ 次级文字 #5e5e66 ｜ 弱文字 #8d8e99
 *   主按钮蓝色渐变 #095ddc→#8ebafc ｜ 选中态黑渐变 #111112→#424242
 *   Pro 高亮描边 #91bdfd ｜ 徽标 #fff0f0/#f1343a
 * ========================================================================= */

:root{
  --bg:#f7f8fa;
  --white:#ffffff;
  --ink:#131212;
  --body:#5e5e66;
  --muted:#8d8e99;
  --line:#eceef2;
  --blue:#0958d9;
  --blue-from:#095ddc;
  --blue-to:#8ebafc;
  --pro-border:#91bdfd;
  --red:#f1343a;
  --radius-card:20px;
  --container:1200px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}   /* 防御：author display 规则不得覆盖 hidden 属性 */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:MiSans,Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer}

.container{max-width:var(--container);margin:0 auto;padding:0 32px}

/* ---------------- 顶部导航 ---------------- */
.nav{background:var(--bg)}
.nav-inner{height:68px;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand-logo{
  width:26px;height:26px;border-radius:8px;
  background:linear-gradient(141.6deg,var(--blue-from) 1.6%,var(--blue-to) 98.3%);
  display:inline-block;position:relative;
}
.brand-logo::after{content:"";position:absolute;inset:8px;background:#fff;border-radius:3px}
.brand-name{font-size:16px}
.brand-note{font-size:12px;color:var(--muted);font-weight:400;margin-left:2px}
.nav-links{display:flex;gap:34px;font-size:14px;color:#374151}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto}
.btn-ghost{
  display:inline-block;background:linear-gradient(164.5deg,#111112 1.6%,#424242 98.3%);
  color:#fff;font-size:13px;padding:9px 22px;border-radius:999px;
}

/* ---------------- Hero ---------------- */
.hero{padding:92px 0 34px}
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:80px}
.hero-title-box{text-align:center;position:relative}
.hero-title{font-size:60px;line-height:80px;font-weight:700;letter-spacing:.5px}
.hero-subtitle{font-size:50px;line-height:70px;font-weight:400;color:var(--ink);margin-top:10px}
.hero-sticker{
  position:absolute;z-index:2;padding:12px 24px;border-radius:14px;
  font-size:20px;font-weight:700;color:#fff;white-space:nowrap;
  box-shadow:0 12px 26px rgba(17,17,17,.16);
}
.hero-sticker--left{left:min(-30px,calc(50% - 400px));top:4px;background:#131212;transform:rotate(-12deg)}
.hero-sticker--right{right:min(30px,calc(50% - 380px));top:-16px;background:linear-gradient(160deg,#3b6dfd,#5b8cff);transform:rotate(8deg)}
.hero-agents{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px}
.hero-agents-tip{font-size:18px;line-height:25px;color:var(--body)}
.agent-list{
  display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:10px;
  max-width:100%;overflow-x:auto;padding:4px 2px 6px;
  scrollbar-width:none;
}
.agent-list::-webkit-scrollbar{display:none}
.agent-item{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;
  min-width:96px;padding:13px 10px 11px;background:#fff;border-radius:10px;
  box-shadow:0 2px 10px rgba(17,17,17,.04);
}
.agent-icon{width:26px;height:26px;display:block}
.agent-icon svg{width:100%;height:100%;display:block}
.agent-name{font-size:11.5px;color:var(--body);white-space:nowrap}
.hero-agents-link{font-size:13px;color:var(--muted);border-bottom:1px solid transparent}
.hero-agents-link:hover{color:var(--ink);border-color:#c9ced6}

/* ---------------- 续费区（自主续费） ---------------- */
.plans{padding:20px 0 80px}
.plans-head{text-align:center}
.plans-title-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}
.plans-title{font-size:44px;font-weight:700;line-height:1.3}
.plans-promo{display:inline-block;font-size:13.5px;font-weight:600;color:#fff;
  background:linear-gradient(167deg,#fe524c 40%,#fe9166 100%);border-radius:999px;padding:7px 16px;
  box-shadow:0 6px 16px rgba(254,82,76,.25);white-space:nowrap;transform:translateY(2px)}
.plans-note{font-size:14px;color:var(--muted);margin-top:16px}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:52px}

.plan-card{
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius-card);
  overflow:hidden;display:flex;flex-direction:column;
}
/* 边框宽度与普通卡一致（1.5px），否则高亮卡内容整体低 0.5px、同排按钮差 1px */
.plan-card.is-highlight{border-color:var(--pro-border);box-shadow:0 14px 40px rgba(9,88,217,.10)}

.plan-head{height:150px;position:relative;overflow:hidden}
.plan-head::before,.plan-head::after{content:"";position:absolute;border-radius:50%}
.plan-head::before{width:150%;height:125%;left:-22%;top:42%;transform:rotate(-6.5deg)}
.plan-head::after{width:120%;height:60%;left:-10%;top:76%;transform:rotate(-4deg)}
/* 六档渐进配色：灰 → 浅蓝 → 蓝 → 蓝紫 → 紫 → 金（由浅入深、层层递进） */
.plan-card[data-wave="w1"] .plan-head{background:linear-gradient(175deg,#eef0f3 0%,#f7f8fa 55%,#ffffff 100%)}
.plan-card[data-wave="w1"] .plan-head::before{background:rgba(255,255,255,.75)}
.plan-card[data-wave="w1"] .plan-head::after{background:rgba(226,229,235,.6)}
.plan-card[data-wave="w2"] .plan-head{background:linear-gradient(175deg,#e7f1fe 0%,#f5faff 55%,#ffffff 100%)}
.plan-card[data-wave="w2"] .plan-head::before{background:linear-gradient(120deg,rgba(203,228,255,.85),rgba(255,255,255,.92))}
.plan-card[data-wave="w2"] .plan-head::after{background:rgba(255,255,255,.72)}
.plan-card[data-wave="w3"] .plan-head{background:linear-gradient(175deg,#dce8fd 0%,#f0f6ff 55%,#ffffff 100%)}
.plan-card[data-wave="w3"] .plan-head::before{background:linear-gradient(120deg,rgba(168,205,255,.9),rgba(248,251,255,.92))}
.plan-card[data-wave="w3"] .plan-head::after{background:rgba(255,255,255,.68)}
.plan-card[data-wave="w4"] .plan-head{background:linear-gradient(175deg,#e2e2fe 0%,#f4f4ff 55%,#ffffff 100%)}
.plan-card[data-wave="w4"] .plan-head::before{background:linear-gradient(120deg,rgba(198,198,255,.9),rgba(250,250,255,.92))}
.plan-card[data-wave="w4"] .plan-head::after{background:rgba(255,255,255,.72)}
.plan-card[data-wave="w5"] .plan-head{background:linear-gradient(175deg,#ece0fe 0%,#f8f4ff 55%,#ffffff 100%)}
.plan-card[data-wave="w5"] .plan-head::before{background:linear-gradient(120deg,rgba(219,194,255,.9),rgba(252,249,255,.92))}
.plan-card[data-wave="w5"] .plan-head::after{background:rgba(255,255,255,.72)}
.plan-card[data-wave="w6"] .plan-head{background:linear-gradient(175deg,#ffeccd 0%,#fff8ec 55%,#ffffff 100%)}
.plan-card[data-wave="w6"] .plan-head::before{background:linear-gradient(120deg,rgba(255,213,148,.95),rgba(255,250,240,.92))}
.plan-card[data-wave="w6"] .plan-head::after{background:rgba(255,255,255,.66)}

.plan-body{padding:26px 28px 30px;display:flex;flex-direction:column;flex:1}
.plan-name-row{display:flex;align-items:center;gap:10px}
.plan-name{font-size:32px;font-weight:300;letter-spacing:.2px;line-height:1.15}
.plan-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:999px;line-height:1.2;
}
.plan-badge .i-badge{width:11px;height:11px;display:block}
.plan-badge--hot{
  color:#fff;background:linear-gradient(167deg,#fe524c 40%,#fe9166 100%);
  box-shadow:0 4px 10px rgba(254,82,76,.28);
}
.plan-badge--discount{
  color:var(--red);background:#fff0f0;
}
.plan-desc{font-size:13px;color:var(--muted);margin-top:8px}
/* 数量步进器（买 N 个 = 额度 ×N，阶梯折上折） */
.plan-qty-row{display:flex;align-items:center;gap:8px;margin-top:14px}
.plan-qty-label{font-size:13px;color:var(--body)}
.qty-btn{
  width:30px;height:30px;border-radius:9px;border:1px solid #d7dbe2;background:#fff;
  color:var(--ink);font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
.qty-btn:hover:not(:disabled){border-color:#131212}
.qty-btn:disabled{opacity:.35;cursor:not-allowed}
.qty-num{
  width:56px;height:30px;text-align:center;font-size:15px;font-weight:600;
  font-variant-numeric:tabular-nums;border:1px solid #d7dbe2;border-radius:9px;background:#fff;
  color:var(--ink);padding:0 2px;-moz-appearance:textfield;
}
.qty-num:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(9,93,220,.12)}
.qty-num::-webkit-outer-spin-button,.qty-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.plan-deal{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.5}
.plan-deal.is-on{color:var(--red);font-weight:600}
.plan-price-row{margin-top:14px;display:flex;align-items:baseline;gap:2px}
.plan-price-now{font-size:30px;font-weight:600;letter-spacing:-.3px;line-height:1}
.plan-price-unit{font-size:14px;color:var(--ink);margin-left:2px}
.plan-price-origin{
  font-size:16px;color:#9aa0a9;text-decoration:line-through;
  margin-left:8px;font-weight:400;line-height:1;   /* 不撑高基线行（否则同排卡片按钮差 3px） */
}
.plan-cta{
  margin-top:20px;height:46px;border:none;border-radius:12px;width:100%;
  background:#131212;color:#fff;font-size:16px;font-weight:500;
}
.plan-cta:hover{background:#000}
.plan-cta.is-blue{background:linear-gradient(141.6deg,var(--blue-from) 1.6%,var(--blue-to) 98.3%)}
.plan-cta.is-blue:hover{filter:brightness(1.05)}
.plan-secondary{
  margin-top:10px;height:46px;border-radius:12px;width:100%;
  background:#fff;border:1px solid #d7dbe2;color:#374151;font-size:14px;
}
.plan-secondary:hover{border-color:#b9c0ca}
.plan-quota{margin-top:26px;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.plan-quota .i-star{width:17px;height:17px;color:var(--ink);flex:0 0 auto}
.plan-info{display:inline-flex;align-items:center;color:#b9bec7}
.plan-info .i-info{width:14px;height:14px}
.plan-rights{margin-top:16px;display:flex;flex-direction:column;gap:13px}
.plan-rights li{font-size:14px;color:var(--body);display:flex;gap:10px;line-height:1.6;align-items:flex-start}
.plan-rights .check{color:var(--muted);font-size:13px;line-height:1.7;flex:0 0 auto}
.plan-rights--note{margin-top:14px;padding-top:14px;border-top:1px solid #f0f1f4}
.plan-rights--note li{color:var(--muted);font-size:12.5px}
.plan-rights--note .check{color:#c9ced6}

/* ---------------- 功能区块 ---------------- */
.feature{padding:88px 0 20px}
.feature-title{font-size:44px;font-weight:700;text-align:center;line-height:1.3}
.feature-subtitle{font-size:44px;font-weight:700;text-align:center;line-height:1.3;margin-bottom:64px}
.feature-row{display:grid;grid-template-columns:380px minmax(0,1fr);gap:72px;align-items:start}
.feature-list li{margin-bottom:28px}
.feature-q{font-size:16px;font-weight:600;padding-bottom:9px;position:relative}
.feature-q::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:linear-gradient(93.7deg,var(--blue-from) 2%,var(--blue-to) 98.4%);opacity:.45;
}
.feature-a{font-size:13.5px;color:var(--muted);line-height:1.8;margin-top:10px}

.mock{border-radius:18px;padding:30px;min-height:330px}
.mock-context{background:linear-gradient(160deg,#41464d 0%,#23262b 100%)}
.mock-context-head{display:flex;justify-content:space-between;align-items:baseline;color:#fff;margin-bottom:18px}
.mock-context-label{font-size:12px;color:#c7ccd3}
.mock-context-value{font-size:26px;font-weight:700;letter-spacing:.5px}
.mock-context-card{background:#fff;border-radius:14px;padding:20px}
.mock-line{height:10px;border-radius:6px;background:#e8eaee;margin:11px 0}
.mock-line.dark{background:#cfd4da}
.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w85{width:85%}.w90{width:90%}
.mock-doc{background:linear-gradient(150deg,#f2f4f7 0%,#e9edf3 100%)}
.mock-doc-toolbar{display:flex;gap:6px;margin-bottom:16px}
.mock-doc-toolbar span{width:9px;height:9px;border-radius:50%;background:#d3d8df}
.mock-doc-body{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px}
.mock-doc-side,.mock-doc-main{background:#fff;border-radius:12px;padding:18px}
.mock-chart{display:flex;gap:10px;align-items:flex-end;height:90px;margin-top:16px}
.mock-chart .bar{width:26px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#ffb08a,#ff8f66)}
.bar.h40{height:40%}.bar.h55{height:55%}.bar.h60{height:60%}.bar.h70{height:70%}.bar.h85{height:85%}

/* ---------------- Promo 横幅 ---------------- */
.promo{padding:30px 0}
.promo-card{
  display:flex;align-items:center;gap:18px;background:#fff;
  border-radius:16px;padding:22px 28px;box-shadow:0 4px 18px rgba(17,17,17,.03);
}
.promo-icon{width:44px;height:44px;flex:0 0 auto}
.promo-icon svg{width:100%;height:100%;display:block}
.promo-text{min-width:0}
.promo-title{font-size:17px;font-weight:600}
.promo-desc{font-size:12.5px;color:var(--muted);margin-top:5px}
.btn-outline{
  margin-left:auto;flex:0 0 auto;border:1px solid #9fc1f7;color:var(--blue);
  padding:10px 24px;border-radius:999px;font-size:13px;background:#fff;
}
.btn-outline:hover{background:#f4f8ff}

/* ---------------- 接入配置（仿 ZCode 模型设置面板 + 接入动画，2026-10-09） ---------------- */
.setup{padding:88px 0 20px}
.section-lead{font-size:15px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.9}
.section-lead b{color:var(--ink)}
/* 只有动画面板（2026-10-09 老板要求：左侧三步文案已去掉）→ 面板居中，宽度 640px 上限 */
.setup-grid{display:flex;justify-content:center;margin-top:44px}
.mock-panel{display:grid;grid-template-columns:148px minmax(0,1fr);background:#fff;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;box-shadow:0 18px 50px rgba(16,24,40,.08)}
.mp-side{background:#fafbfc;border-right:1px solid var(--line);padding:14px 9px}
.mp-side-title{font-size:11.5px;color:#98a1b2;padding:7px 8px}
.mp-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#5e5e66;padding:8px;border-radius:9px}
.mp-item.is-active{background:#fff;border:1px solid var(--line);font-weight:600;color:var(--ink)}
.mp-logo{width:16px;height:16px;border-radius:5px;flex:0 0 auto}
.mp-logo--a{background:linear-gradient(141deg,#2b5cff,#8ebafc)}
.mp-logo--b{background:linear-gradient(141deg,#131212,#5b5b63)}
.mp-cube{width:15px;height:15px;border-radius:4px;border:1.5px solid #b9c0ca;flex:0 0 auto;position:relative}
.mp-cube::after{content:"";position:absolute;inset:3px;background:#d7dbe2;border-radius:2px}
.mp-main{padding:18px 20px 20px}
.mp-head{display:flex;align-items:center;gap:9px;font-size:15px;margin-bottom:12px}
.mp-toggle{margin-left:auto;width:40px;height:22px;border-radius:999px;background:#dfe3ea;position:relative;transition:background .3s}
.mp-toggle i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .3s;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.mp-toggle.is-on{background:#131212}
.mp-toggle.is-on i{left:21px}
.mp-label{display:block;font-size:12.5px;color:#8d8e99;margin:12px 0 6px}
.mp-input{display:flex;align-items:center;height:42px;border:1px solid var(--line);border-radius:11px;padding:0 13px;
  font-size:13.5px;background:#fff;transition:border-color .3s,box-shadow .3s}
.mp-input.is-focus{border-color:var(--pro-border);box-shadow:0 0 0 3px rgba(9,88,217,.10)}
.mp-typed{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-caret{width:1.5px;height:17px;background:var(--ink);margin-left:2px;opacity:0}
.mp-input.is-focus .mp-caret{opacity:1;animation:mp-blink 1s steps(1) infinite}
@keyframes mp-blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.mp-select{position:relative;display:flex;align-items:center;height:42px;border:1px solid var(--line);border-radius:11px;
  padding:0 13px;font-size:13.5px;transition:border-color .3s,box-shadow .3s}
.mp-select.is-open,.mp-select.is-focus{border-color:var(--pro-border);box-shadow:0 0 0 3px rgba(9,88,217,.10)}
.mp-arrow{margin-left:auto;color:#98a1b2}
.mp-menu{position:absolute;left:0;right:0;top:46px;background:#fff;border:1px solid var(--line);border-radius:11px;
  box-shadow:0 14px 34px rgba(16,24,40,.12);padding:6px;opacity:0;transform:translateY(-4px);
  pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.mp-select.is-open .mp-menu{opacity:1;transform:none}
.mp-menu-item{padding:9px 11px;border-radius:8px;font-size:13px;color:#5e5e66}
.mp-menu-item.is-sel{background:#f2f6fd;color:#0b57d0;font-weight:600}
.mp-models-head{display:flex;align-items:center;justify-content:space-between;margin:12px 0 6px}
.mp-models-head .mp-label{margin:0}
.mp-addmodel{font-size:12.5px;color:#374151;background:#f2f3f5;border-radius:8px;padding:5px 10px;transition:background .3s,color .3s}
.mp-addmodel.is-on{background:#131212;color:#fff}
/* 模型列表：仿 ZCode「已添加模型」行式布局（2026-10-09 老板给的参考图） */
.mp-models{min-height:54px;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.mp-empty{display:block;padding:14px 12px;font-size:12.5px;color:#98a1b2;line-height:1.6}
.mp-mrow{display:flex;align-items:center;gap:7px;padding:10px 12px;border-bottom:1px solid #f4f5f7;
  opacity:0;transform:translateY(5px);animation:mp-row .42s cubic-bezier(.2,1,.35,1) forwards}
.mp-mrow:last-child{border-bottom:none}
@keyframes mp-row{to{opacity:1;transform:none}}
.mp-mrow-name{font-size:13.5px;font-weight:600}
.mp-badge{font-size:11.5px;color:#5e5e66;background:#f2f3f5;border-radius:6px;padding:1px 7px;white-space:nowrap}
.mp-acts{margin-left:auto;display:flex;align-items:center;gap:13px;color:#b3b9c2}
.mp-acts svg{width:15px;height:15px;display:block}
.mp-mrow .mp-toggle{width:34px;height:19px;margin-left:3px}
.mp-mrow .mp-toggle i{width:13px;height:13px;top:3px;left:3px}
.mp-mrow .mp-toggle.is-on i{left:18px}
/* ---- 添加模型弹窗（仿 ZCode，2026-10-09）---- */
.mock-panel{position:relative}
.mp-modal{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(20,22,26,.38);opacity:0;transition:opacity .3s}
.mp-modal.is-on{opacity:1}
.mp-modal-card{width:min(430px,86%);background:#fff;border-radius:16px;padding:18px 20px 15px;
  box-shadow:0 24px 60px rgba(16,24,40,.28);transform:translateY(10px) scale(.97);transition:transform .32s cubic-bezier(.2,1.2,.35,1)}
.mp-modal.is-on .mp-modal-card{transform:none}
.mp-modal-head{display:flex;align-items:center;justify-content:space-between;font-size:15.5px;font-weight:700}
.mp-modal-x{color:#98a1b2;font-size:17px;line-height:1}
.mp-modal-row{display:flex;align-items:center;gap:7px;margin:13px 0 2px;font-size:13.5px}
.mp-modal-row .mp-toggle{margin-left:auto}
.mp-q{display:inline-flex;width:15px;height:15px;border-radius:50%;border:1px solid #dfe3ea;color:#98a1b2;
  font-size:10.5px;align-items:center;justify-content:center;font-style:normal;vertical-align:1px}
.mp-modal-label{display:block;font-size:12.5px;color:#8d8e99;margin:11px 0 6px}
.mp-input--gray{background:#f5f6f8;border-color:#eef0f3;position:relative}
.mp-placeholder{position:absolute;left:13px;color:#b6bcc7;font-size:13.5px;transition:opacity .2s}
.mp-modal-adv{display:flex;align-items:center;gap:7px;font-size:13.5px;color:#374151;margin:15px 0 2px}
.mp-modal-adv .ar{color:#98a1b2}
.mp-modal-foot{display:flex;align-items:center;gap:14px;margin-top:13px}
.mp-modal-reset{font-size:12.5px;color:#5e5e66;text-decoration:underline;margin-right:auto}
.mp-modal-cancel{font-size:13px;color:#374151}
.mp-modal-save{font-size:13px;background:#131212;color:#fff;border-radius:9px;padding:7px 17px;
  transition:transform .15s}
.mp-modal-save.is-press{transform:scale(.93)}
.mp-input.is-hit{background:#eef4ff;border-color:#d6e2fb}
.mp-hint{font-size:12.5px;color:#98a1b2;margin-top:12px;transition:color .3s}
.mp-hint.is-done{color:#0a8f4c;font-weight:600}

/* ---------------- 管理区 ---------------- */
.manage{background:#f2f2f2;padding:88px 0;margin-top:56px}
.section-title{font-size:44px;font-weight:700;text-align:center;line-height:1.35}
.manage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:52px}
.manage-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:30px 28px}
.manage-icon{width:24px;height:24px;margin-bottom:18px;color:var(--ink)}
.manage-icon svg{width:100%;height:100%;display:block}
.manage-q{font-size:16px;font-weight:600}
.manage-a{font-size:13px;color:var(--muted);line-height:1.8;margin-top:10px}

/* ---------------- 工具 / IDE ---------------- */
.tools{padding:88px 0}
.tool-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1fr;gap:20px;margin-top:52px}
.tool-item{
  background:#f7f8fa;border-radius:12px;padding:36px 20px 30px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.tool-item.is-highlight{background:#fff;box-shadow:0 12px 34px rgba(17,17,17,.07)}
.tool-logo{width:34px;height:34px;opacity:.45}
.tool-item.is-highlight .tool-logo{width:54px;height:54px;opacity:1}
.tool-logo svg{width:100%;height:100%;display:block}
.tool-name{font-size:14px;color:var(--body);margin-top:16px}
.tool-item.is-highlight .tool-name{font-size:18px;font-weight:600;color:var(--ink);margin-top:20px}
.tool-desc{font-size:13px;color:var(--muted);line-height:1.85;margin-top:14px;max-width:520px}

/* ---------------- FAQ ---------------- */
.faq{padding:88px 0 70px}
.faq-inner{display:flex;flex-direction:column;align-items:center}
.faq-mascot{margin-bottom:20px;opacity:.95}
.faq-input-row{position:relative;width:min(800px,100%);margin-top:44px}
.faq-input-row input{
  width:100%;height:64px;border-radius:12px;border:none;background:#f0f1f4;
  padding:0 76px 0 28px;font-size:14px;color:var(--ink);outline:none;
}
.faq-input-row input::placeholder{color:#a3a9b3}
.faq-input-row input:focus{background:#eceef2}
.faq-send{
  position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;
  border:none;background:#ccd1d8;display:grid;place-items:center;
}
.faq-send:hover{background:#b9c0ca}
.faq-list{width:min(800px,100%);margin-top:46px;text-align:left}
.faq-item{border-bottom:1px solid #e8eaee}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:23px 4px;background:none;border:none;text-align:left;
  font-size:15.5px;color:var(--ink);line-height:1.5;
}
.faq-plus{font-size:22px;font-weight:300;color:#a3a9b3;line-height:1;transition:transform .2s;flex:0 0 auto}
.faq-item.is-open .faq-plus{transform:rotate(45deg)}
.faq-a{display:none;padding:2px 4px 24px;font-size:13.5px;color:var(--muted);line-height:1.85}
.faq-item.is-open .faq-a{display:block}

/* ---------------- 底部 CTA ---------------- */
.cta{padding:100px 0 80px}
.cta-inner{display:flex;flex-direction:column;align-items:center;gap:40px}
.cta-title{font-size:44px;font-weight:700;text-align:center;line-height:1.35}
.cta-buttons{display:flex;gap:16px}
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 36px;border-radius:999px;font-size:15px;
}
.btn-pill--dark{background:#131212;color:#fff}
.btn-pill--dark:hover{background:#000}
.btn-pill--light{background:#fff;border:1px solid #d7dbe2;color:var(--ink)}
.btn-pill--light:hover{border-color:#b9c0ca}

/* ---------------- 页脚（深色） ---------------- */
.footer{background:#0b0b0e;color:#d1d5db;padding:58px 0 42px;margin-top:12px}
.footer-top{display:flex;gap:80px;align-items:flex-start}
.footer-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.footer-brand-name{font-size:19px;font-weight:700;color:#fff}
.brand-logo--dark{width:28px;height:28px;background:linear-gradient(141.6deg,var(--blue-from) 1.6%,var(--blue-to) 98.3%)}
.footer-cols{display:flex;gap:72px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column}
.footer-col-title{font-size:13px;color:#8d8e99;margin-bottom:16px}
.footer-col a{font-size:13px;color:#d1d5db;margin-bottom:13px;line-height:1.5}
.footer-col a:hover{color:#fff}
.footer-bottom{
  margin-top:56px;padding-top:26px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
}
.footer-note{font-size:12.5px;color:#6b7280}
.footer-legal{display:flex;gap:22px;font-size:12.5px}
.footer-legal a{color:#8d8e99}
.footer-legal a:hover{color:#fff}
.footer-copy{font-size:12px;color:#5b616b}

/* ---------------- 响应式 ---------------- */
@media (max-width:1080px){
  /* 接入配置：面板居中即可（已无左侧步骤） */
  .setup-grid{margin-top:28px}
  .mock-panel{max-width:640px}
  .nav-links{display:none}
  .hero{padding-top:64px}
  .hero-title{font-size:40px;line-height:1.25}
  .hero-subtitle{font-size:28px;line-height:1.4}
  .hero-sticker{display:none}
  .hero-agents-tip{font-size:15px}
  .plan-grid,.plan-grid.is-team{grid-template-columns:1fr;max-width:520px}
  .feature-row{grid-template-columns:1fr;gap:36px}
  .feature-title,.feature-subtitle,.section-title,.cta-title{font-size:30px}
  .manage-grid{grid-template-columns:1fr}
  .tool-grid{grid-template-columns:1fr 1fr}
  .tool-item.is-highlight{grid-column:1 / -1}
  .promo-card{flex-wrap:wrap}
  .btn-outline{margin-left:0}
  .footer-top{flex-direction:column;gap:36px}
  .footer-cols{gap:40px}
}

/* ---------------- 购买/续费弹窗（演示模式） ---------------- */
.modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(17,17,17,.45)}
.modal-card{
  position:relative;width:min(520px,100%);max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:20px;padding:28px 28px 26px;
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}
.modal-close{position:absolute;right:16px;top:14px;border:none;background:transparent;font-size:22px;color:#a3a9b3;line-height:1}
.modal-close:hover{color:var(--ink)}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.modal-title{font-size:20px;font-weight:700}
.modal-demo{font-size:11.5px;color:#b25e00;background:#fff4e5;border-radius:999px;padding:3px 10px;white-space:nowrap}
.mode-tabs{display:flex;background:#f2f3f5;border-radius:12px;padding:4px;margin-bottom:18px}
.mode-tabs button{flex:1;border:none;background:transparent;color:#374151;font-size:14.5px;padding:10px 0;border-radius:9px}
.mode-tabs button.is-active{background:#fff;font-weight:600;box-shadow:0 2px 8px rgba(17,17,17,.08)}
.field-label{display:block;font-size:13px;color:var(--body);margin:0 0 8px}
.key-input-row{display:flex;gap:10px}
.key-input-row input{
  flex:1;min-width:0;height:46px;border-radius:10px;border:1px solid #e2e5ea;padding:0 14px;
  font-size:13.5px;color:var(--ink);outline:none;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.key-input-row input:focus{border-color:#9fc1f7}
.btn-check{flex:0 0 auto;height:46px;padding:0 18px;border-radius:10px;border:1px solid #d7dbe2;background:#fff;color:#374151;font-size:13.5px}
.btn-check:hover{border-color:#b9c0ca}
.field-note{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.7}
.field-note.is-ok{color:#0a8f4c}
.field-note.is-error{color:#d0393f}
.field-note.is-busy{color:var(--blue)}
.order-summary{display:flex;justify-content:space-between;align-items:center;background:#f7f8fa;border-radius:12px;padding:16px 18px;margin-top:20px}
.order-plan{font-size:14px;color:var(--ink);font-weight:600}
.order-price{font-size:18px;font-weight:700}
.order-promo{font-size:12.5px;color:var(--red);font-weight:600;margin-top:2px}
.query-list .q-qty{
  color:var(--red);font-size:11.5px;font-weight:600;background:#fff0f0;
  padding:1px 7px;border-radius:999px;
}
.modal-next{width:100%;height:50px;border:none;border-radius:12px;margin-top:20px;background:#131212;color:#fff;font-size:15px;font-weight:600}
.modal-next:hover{background:#000}
.modal-next:disabled{background:#c9ced6;cursor:not-allowed}
.pay-methods{display:flex;gap:12px}
.pay-methods button{flex:1;height:48px;border-radius:10px;border:1px solid #e2e5ea;background:#fff;color:#374151;font-size:14px}
.pay-methods button.is-active{border-color:var(--blue);color:var(--blue);background:#f4f8ff;font-weight:600}
.pay-qr{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:22px}
.pay-qr-box{
  width:180px;height:180px;border:1px dashed #c9ced6;border-radius:14px;background:#fafbfc;
  display:grid;place-items:center;color:#a3a9b3;font-size:13px;text-align:center;line-height:1.8;
}
.pay-qr-tip{font-size:13px;color:var(--body)}
.pay-qr-tip b{color:var(--ink)}
.result-icon{width:56px;height:56px;border-radius:50%;background:#e8f7ee;color:#0a8f4c;display:grid;place-items:center;font-size:24px;margin:6px auto 14px}
.result-title{font-size:19px;font-weight:700;text-align:center}
.result-desc{font-size:13.5px;color:var(--body);text-align:center;margin-top:10px;line-height:1.8}
.result-key{margin-top:20px}
.result-key-label{display:block;font-size:13px;color:var(--body);margin-bottom:8px}
.order-meta{margin-top:20px;background:#f7f8fa;border-radius:12px;padding:14px 18px;font-size:12.5px;color:var(--body);line-height:2}
.order-meta span{color:var(--muted)}
body.has-modal{overflow:hidden}

/* ---------------- 结果风险提示 + 购买记录查询 ---------------- */
.result-warn{
  font-size:12.5px;line-height:1.75;color:#b45309;background:#fff7ed;
  border:1px solid #fed7aa;border-radius:10px;padding:10px 14px;margin-top:12px;
}
.result-warn.is-alert{color:#b91c1c;background:#fef2f2;border-color:#fecaca}
.result-warn.is-ok{color:#0a8f4c;background:#e8f7ee;border-color:#bbe7cd}
.query-result{margin-top:18px}
.query-head{font-size:13px;color:var(--ink);font-weight:600;margin-bottom:10px}
.query-list{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.query-list li{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:13px 16px;font-size:12.5px;color:var(--body);
}
.query-list li+li{border-top:1px solid var(--line)}
.query-list .q-left{display:flex;flex-direction:column;gap:3px;min-width:0}
.query-list .q-date{color:var(--muted)}
.query-list .q-plan{color:var(--ink);font-weight:600;font-size:13px}
.query-list .q-no{color:#a3a9b3;font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.query-list .q-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}
.query-list .q-amount{color:var(--ink);font-weight:700;font-size:13.5px}
.query-list .q-status{color:#0a8f4c;font-size:11.5px}

/* ---------------- 移动端（手机）适配：≤600px ----------------
   目标：竖屏手机（375/390/414 宽）单列流式布局、可点按目标 ≥40px、
   输入框 16px（避免 iOS 聚焦自动放大页面）。弹窗改为底部抽屉式。 */
@media (max-width:600px){
  .container{padding:0 18px}

  /* 接入配置：隐藏供应商侧栏、面板单列、字号收紧 */
  .setup{padding:52px 0 8px}
  .section-lead{font-size:13px;margin-top:10px}
  .setup-grid{margin-top:24px}
  .mock-panel{grid-template-columns:minmax(0,1fr);max-width:none}
  .mp-side{display:none}
  .mp-main{padding:15px 16px 17px}
  .mp-input,.mp-select{height:40px;font-size:13px}

  /* 顶部导航：品牌 + 查询订单（隐藏副标题，链接已在 ≤1080 隐藏） */
  .nav-inner{height:58px;gap:12px}
  .brand-logo{width:24px;height:24px}
  .brand-name{font-size:15px}
  .brand-note{display:none}
  .btn-ghost{padding:7px 13px;font-size:12px}
  .btn-plain{padding:7px 13px;font-size:12px;margin-right:8px}

  /* Hero */
  .hero{padding:36px 0 18px}
  .hero-inner{gap:34px}
  .hero-title{font-size:30px;line-height:1.35}
  .hero-subtitle{font-size:19px;line-height:1.55;margin-top:8px}
  .hero-agents{gap:14px}
  .hero-agents-tip{font-size:13px;line-height:1.6;text-align:center}
  .agent-list{gap:8px;justify-content:flex-start}
  .agent-item{min-width:84px;padding:11px 8px 9px;gap:6px}
  .agent-name{font-size:11px}

  /* 套餐区 */
  .plans{padding:8px 0 48px}
  .plans-title-row{gap:10px}
  .plans-title{font-size:26px}
  .plans-promo{font-size:12px;padding:5px 12px;transform:none}
  .plans-note{font-size:12.5px;margin-top:10px}
  .plan-grid,.plan-grid.is-team{grid-template-columns:1fr;max-width:none;gap:16px;margin-top:26px}
  .plan-head{height:104px}
  .plan-body{padding:20px 20px 24px}
  .plan-name{font-size:26px}
  .plan-desc{font-size:12.5px}
  .plan-qty-row{gap:10px}
  .qty-btn{width:34px;height:34px;font-size:18px}
  .qty-num{width:64px;height:34px;font-size:16px}   /* 16px 防 iOS 聚焦缩放 */
  .plan-price-now{font-size:27px}
  .plan-cta{height:48px;font-size:15px}
  .plan-rights li{font-size:13px}

  /* 功能区块：字号与留白整体收缩 */
  .feature{padding:52px 0 12px}
  .feature-title,.feature-subtitle,.section-title,.cta-title{font-size:23px;line-height:1.4}
  .feature-subtitle{margin-bottom:30px}
  .feature-row{gap:22px}
  .feature-q{font-size:15px}
  .feature-a{font-size:13px}
  .mock{padding:18px;min-height:0;border-radius:14px}
  .mock-context-head{flex-direction:column;gap:4px;align-items:flex-start}
  .mock-context-value{font-size:20px}
  .mock-context-card{padding:14px}
  .mock-doc-body{grid-template-columns:1fr}
  .mock-doc-side{display:none}
  .mock-chart .bar{width:20px}

  /* Promo 横幅 */
  .promo-card{flex-wrap:wrap;gap:12px;padding:18px}
  .promo-title{font-size:15.5px}
  .btn-outline{margin-left:0;width:100%;text-align:center;padding:11px 20px}

  /* 管理区 / 工具区 */
  .manage{padding:52px 0;margin-top:36px}
  .manage-grid{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .manage-item{padding:22px 20px}
  .tools{padding:52px 0}
  .tool-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
  .tool-item{padding:22px 12px 18px}
  .tool-item.is-highlight{grid-column:1 / -1}
  .tool-name{font-size:13px;margin-top:12px}
  .tool-item.is-highlight .tool-name{font-size:16px}
  .tool-desc{font-size:12.5px;line-height:1.7}

  /* FAQ */
  .faq{padding:52px 0 44px}
  .faq-input-row{margin-top:26px}
  .faq-input-row input{height:54px;font-size:16px;padding:0 62px 0 16px}   /* 16px 防缩放 */
  .faq-send{right:8px;top:8px;width:38px;height:38px}
  .faq-list{margin-top:26px}
  .faq-q{font-size:14px;padding:18px 2px;gap:12px}
  .faq-plus{font-size:20px}
  .faq-a{font-size:13px}

  /* 底部 CTA */
  .cta{padding:56px 0 48px}
  .cta-inner{gap:26px}
  .cta-buttons{flex-wrap:wrap;justify-content:center;width:100%}
  .btn-pill{height:48px;padding:0 26px;font-size:14px;width:100%}

  /* 页脚 */
  .footer{padding:40px 0 32px}
  .footer-top{gap:26px}
  .footer-brand-name{font-size:17px}
  .footer-cols{gap:24px 40px}
  .footer-col a{margin-bottom:11px}
  .footer-bottom{margin-top:34px;padding-top:20px}
  .footer-legal{flex-wrap:wrap;justify-content:center;gap:8px 18px}

  /* 弹窗：底部抽屉式，输入框 16px 防缩放 */
  .modal{padding:0;align-items:flex-end}
  .modal-card{
    width:100%;max-height:92vh;border-radius:18px 18px 0 0;
    padding:22px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .modal-title{font-size:18px}
  .modal-demo{font-size:11px}
  .mode-tabs button{font-size:13.5px;padding:11px 0}
  .key-input-row{gap:8px}
  .key-input-row input{height:48px;font-size:16px}   /* 16px 防 iOS 缩放 */
  .btn-check{height:48px;padding:0 14px;font-size:13px}
  .order-summary{flex-wrap:wrap;gap:4px 10px;padding:14px 16px;margin-top:16px}
  .order-plan{font-size:13.5px}
  .order-price{font-size:17px}
  .modal-next{height:48px;margin-top:16px}
  .pay-methods button{font-size:13.5px}
  .pay-qr-box{width:158px;height:158px}
  .result-key input{font-size:12.5px}
  .query-list li{padding:11px 0}
}

/* 划线价与立减标签（标价 300 → 现价 280 时的展示） */
.plan-cut{
  font-size:11.5px;font-weight:600;color:var(--red);background:#fff0f0;
  border-radius:999px;padding:2px 9px;margin-left:8px;white-space:nowrap;align-self:center;
}
.order-strike{font-size:13px;color:#9aa0a9;text-decoration:line-through;font-weight:400;margin-left:6px}
.order-cut{
  font-size:11.5px;font-weight:600;color:var(--red);background:#fff0f0;border-radius:999px;
  padding:2px 8px;margin-left:6px;vertical-align:2px;white-space:nowrap;
}

/* 卡片高亮小字：与「买多享折上折」同一行，靠右（不占额外行高，卡片按钮保持对齐） */
.plan-deal{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:18px}   /* 固定行高：只有胶囊无文字时（如提示替代文案）按钮不会被抬高 */
.plan-deal .deal-text{min-width:0}
/* 提示文案（替代「买多享折上折」）：高亮小胶囊，高度 14px < 18px 行高，不顶行 */
.plan-deal .deal-text.is-tip{
  flex:0 0 auto;font-size:11px;font-weight:600;color:var(--red);background:#fff0f0;
  border-radius:999px;padding:1px 8px;white-space:nowrap;line-height:1.1;
}

/* 顶部「联系我们」按钮（描边样式，与深色「查询订单」区分） */
.btn-plain{
  display:inline-block;background:#fff;border:1px solid #d7dbe2;color:var(--ink);
  font-size:13px;padding:8px 18px;border-radius:999px;margin-right:10px;
}
.btn-plain:hover{border-color:#131212}
.nav-right{display:flex;align-items:center}

/* 联系我们弹窗 */
.modal-card--sm{width:min(420px,100%)}
.contact-box{
  display:flex;align-items:center;gap:10px;background:#f7f8fa;border-radius:12px;
  padding:16px 18px;margin-top:16px;
}
.contact-label{font-size:13px;color:var(--muted);flex:0 0 auto}
.contact-value{
  flex:1;min-width:0;font-size:17px;font-weight:700;color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;
}
.contact-qr{display:block;width:200px;height:200px;margin:16px auto 4px;border-radius:12px;object-fit:contain}

/* =========================================================================
 * 动效（2026-10-08）：克制、不打扰
 *   ① 首屏装饰块（Coding / Work）——**仅进页面时**自由抖动一次，随后静止；
 *   ② 主推徽标（热卖 / 超值折扣）——进场轻弹一下 + 之后非常轻的呼吸光。
 *   系统开启「减少动态效果」时全部关闭（prefers-reduced-motion）。
 * ========================================================================= */
:root{--sticker-rot:0deg}
@keyframes sticker-jitter{
  0%   {transform:rotate(var(--sticker-rot)) scale(.9)  translate(-5px, 3px)}
  14%  {transform:rotate(calc(var(--sticker-rot) - 5deg)) scale(1.05) translate(4px,-3px)}
  28%  {transform:rotate(calc(var(--sticker-rot) + 4deg)) scale(.97)  translate(-3px,-1px)}
  42%  {transform:rotate(calc(var(--sticker-rot) - 3deg)) scale(1.03) translate(2px, 2px)}
  58%  {transform:rotate(calc(var(--sticker-rot) + 2deg)) scale(.99)  translate(-2px, 1px)}
  74%  {transform:rotate(calc(var(--sticker-rot) - 1deg)) scale(1.01) translate(1px,-1px)}
  88%  {transform:rotate(calc(var(--sticker-rot) + .5deg)) scale(1)   translate(0,0)}
  100% {transform:rotate(var(--sticker-rot)) scale(1) translate(0,0)}
}
.hero-sticker--left{--sticker-rot:-12deg;animation:sticker-jitter .9s cubic-bezier(.36,.07,.19,.97) .12s both}
.hero-sticker--right{--sticker-rot:8deg;animation:sticker-jitter .9s cubic-bezier(.36,.07,.19,.97) .3s both}

/* 徽标：滚动可见时的「弹跳抖动」——1.15s，多段回弹 + 轻微左右摆（2026-10-08 拉长，原 0.55s 太短） */
@keyframes badge-in{
  0%   {transform:scale(.78) rotate(-6deg);opacity:0}
  16%  {transform:scale(1.12) rotate(3deg);opacity:1}
  34%  {transform:scale(.96) rotate(-2deg)}
  52%  {transform:scale(1.06) rotate(1.5deg)}
  70%  {transform:scale(.98) rotate(-1deg)}
  86%  {transform:scale(1.02) rotate(.5deg)}
  100% {transform:scale(1) rotate(0)}
}
/* 热卖：极轻的呼吸光（幅度约 16px→6px 阴影，不闪不跳） */
@keyframes badge-breathe{
  0%,100%{box-shadow:0 4px 10px rgba(254,82,76,.26)}
  50%{box-shadow:0 5px 15px rgba(254,82,76,.40)}
}
/* 超值折扣：淡到几乎看不见的一圈呼吸光环 */
@keyframes badge-halo{
  0%,100%{box-shadow:0 0 0 0 rgba(241,52,58,.10)}
  50%{box-shadow:0 0 0 5px rgba(241,52,58,0)}
}
/* 呼吸光常驻（很轻）；弹跳抖动由 JS 在**每次滚到可见时**加 .badge-pop 触发：
   离开视口后移除该类 → 再次滑到会重新播放（2026-10-08 老板反馈：要每次滑到都抖、且时长拉长） */
.plan-badge--hot{animation:badge-breathe 3.6s ease-in-out infinite}
.plan-badge--discount{animation:badge-halo 4s ease-in-out infinite}
.plan-badge--hot.badge-pop{
  animation:badge-in 1.15s ease-out both,
            badge-breathe 3.6s ease-in-out infinite;
}
.plan-badge--discount.badge-pop{
  animation:badge-in 1.15s ease-out both,
            badge-halo 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero-sticker--left,.hero-sticker--right,
  .plan-badge--hot,.plan-badge--discount,
  .plan-badge--hot.badge-pop,.plan-badge--discount.badge-pop{animation:none}
}

/* 真实支付二维码区（第三方聚合） */
#payQrBox img{width:100%;height:100%;object-fit:contain;border-radius:10px}
#payQrBox a{
  display:inline-block;background:linear-gradient(164.5deg,#111112 1.6%,#424242 98.3%);color:#fff;
  padding:12px 22px;border-radius:12px;font-size:14px;
}
#payQrBox #payQrText{font-size:11px;word-break:break-all;line-height:1.6;padding:6px}
#payQrBox .pay-qr-sub{display:block;font-size:12px;color:#8d8e99;margin-top:8px}

/* ============ 查询用量弹窗（2026-10-17：Key → 额度三值 + 近 7 天 token 消耗） ============ */
.usage-live{font-size:11.5px;color:#0a7a43;background:#e8f7ee;border-radius:999px;padding:3px 10px;white-space:nowrap}
.usage-result{margin-top:18px}
.usage-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.usage-stat{display:flex;flex-direction:column;gap:2px;background:#f6f7f9;border:1px solid var(--line);
  border-radius:12px;padding:12px 14px}
.usage-stat-label{font-size:11.5px;color:var(--muted)}
.usage-stat-num{font-size:20px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
.usage-stat.is-primary .usage-stat-num{color:#0958d9}
.usage-stat-unit{font-size:10.5px;color:#a3a9b3}
.usage-bar{height:8px;border-radius:99px;background:#eceef2;margin-top:14px;overflow:hidden}
.usage-bar i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#095ddc,#8ebafc);transition:width .5s ease}
.usage-bar-note{display:flex;justify-content:space-between;align-items:center;margin-top:8px;
  font-size:12px;color:var(--muted)}
.usage-bar-note b{color:var(--ink);font-weight:600}
.usage-bar-note a{color:#0958d9;font-weight:600}
.usage-detail{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.usage-detail-title{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:8px}
.usage-kv{list-style:none}
.usage-kv li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;
  font-size:12.5px;color:var(--muted)}
.usage-kv li+li{border-top:1px dashed var(--line)}
.usage-kv b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;text-align:right}
.usage-nodetail{margin-top:14px;font-size:12.5px;color:var(--muted)}
.usage-warn{margin-top:14px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;
  border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.8;white-space:pre-line}
@media (max-width:640px){
  .usage-stats{gap:8px}
  .usage-stat{padding:10px 11px}
  .usage-stat-num{font-size:16px}
}


/* tokens 估算说明（2026-10-18：响应已无 quota，全站只出 tokens） */
.usage-est-note{margin-top:10px;font-size:11.5px;color:#a3a9b3}

/* 温馨提示：数据延迟/10 分钟更新（2026-10-18） */
.usage-tip{margin-top:10px;background:#f0f5ff;border:1px solid #d6e4ff;color:#3b6bb8;
  border-radius:10px;padding:9px 13px;font-size:12px;line-height:1.7}

/* ============ 添加供应商 模板选择层（仿 ZCode，2026-10-20 动画新步骤） ============ */
.mp-picker{position:absolute;inset:0;z-index:30;background:#fff;padding:14px 16px;overflow:auto;
  opacity:0;transform:translateY(10px);transition:opacity .28s ease,transform .28s ease}
.mp-picker.is-on{opacity:1;transform:translateY(0)}
.mp-picker-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mp-picker-back{font-size:15px;color:#5e5e66;line-height:1}
.mp-picker-head b{font-size:15px}
.mp-picker-add{margin-left:auto;background:#111112;color:#fff;font-size:12px;font-weight:600;
  padding:8px 14px;border-radius:9px;transition:transform .18s ease}
.mp-picker-add.is-press{transform:scale(.94)}
.mp-picker-group{font-size:11.5px;color:#98a1b2;margin:8px 2px 6px}
.mp-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mp-ctile{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;
  padding:9px 11px;background:#fff;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.mp-ctile.is-hit{border-color:#9fc1f7;background:#f3f8ff}
.mp-ctile.is-press{transform:scale(.96);border-color:#5b8ff0;background:#eaf2ff}
.mp-ctile-name{font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;flex:1;min-width:0}
.mp-ctile-arrow{color:#b7bdc7;font-size:13px;line-height:1}
.mp-clogo{flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;color:#fff}
.mp-clogo--bm{background:linear-gradient(141.6deg,#095ddc 1.6%,#8ebafc 98.3%)}
.mp-clogo--bm::after{content:"";width:9px;height:9px;background:#fff;border-radius:2.5px}
.mp-clogo--z,.mp-clogo--kimi,.mp-clogo--mimo,.mp-clogo--xai{background:#111112}
.mp-clogo--kimi{position:relative}
.mp-clogo--kimi::after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;
  border-radius:50%;background:#3b82f6}
.mp-clogo--plus{background:#eef0f3;color:#5e5e66;font-size:15px;font-weight:500}
.mp-clogo--mm{background:#ff4d6a}
.mp-clogo--ds{background:#4d6bfe}
.mp-clogo--bl{background:#ff6a00;font-size:11.5px}
.mp-clogo--oai{background:#fff;color:#111112;border:1px solid var(--line)}
.mp-clogo--anth{background:#f5efe4;color:#111112}
@media (max-width:640px){
  .mp-ctile-name{font-size:11px}
  .mp-picker{padding:12px 12px}
}
.usage-stats.is-single{grid-template-columns:1fr}