/* ============================================================
   cart.css — 400Link 购物车流程公共样式（cart1 / cart2 / cart3 共用）
   结构：通用基础 → cart1（选购页）→ cart2（配置页）→ cart3（付款页）
   页面通过 <body class="page-select|page-config|page-pay"> 区分作用域
   ============================================================ */

/* ============ 通用基础 ============ */
@font-face{
  font-family:"Harmony-Regular";
  src:url('../fonts/Harmony/Harmony-Regular.woff2') format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}
:root{
  --primary:#165DFF;
  --primary-dark:#0E4BDB;
  --secondary:#00B42A;
  --purple:#722ED1;
  --recommend-blue:#2F54EB;
  --neutral:#F1F3F5;
  --neutral-dark:#E5E6EB;
  --accent:#FF7D00;
  --text-primary:#1D2129;
  --text-secondary:#4E5969;
  --text-tertiary:#86909C;
  --gray-500:#64748b;
  --danger:#F53F3F;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:"Harmony-Regular",-apple-system,'PingFang SC','Microsoft YaHei',sans-serif;;
  background:#F2F3F5;color:var(--text-primary);min-height:100vh;font-size:16px;line-height:1.5;
}
img{max-width:100%;vertical-align:middle;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{font-family:inherit;cursor:pointer;}
input[type="radio"],input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;margin:0;}
.container{width:100%;max-width:1280px;margin:0 auto;padding-left:16px;padding-right:16px;}
@media(min-width:640px){.container{padding-left:24px;padding-right:24px;}}
@media(min-width:1024px){.container{padding-left:32px;padding-right:32px;}}

/* ---------- 顶部导航 ---------- */
.site-header{position:sticky;top:0;z-index:50;box-shadow:0 1px 2px rgba(0,0,0,.05);}
.topbar{background:var(--primary);height:64px;display:flex;align-items:center;border-bottom:1px solid #E5E7EB;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;}
.brand{display:flex;align-items:center;}
.brand img{width:100px;height:41px;}
.slogan{display:none;margin-left:16px;font-size:14px;color:#fff;}
@media(min-width:768px){.slogan{display:block;}}
.topbar-right{display:flex;align-items:center;gap:12px;}
@media(min-width:640px){.topbar-right{gap:24px;}}
.topbar-tel{display:block;align-items:center;color:#fff;font-weight:500;font-size:14px;}
.topbar-tel i{margin-right:4px;}
@media(min-width:640px){.topbar-tel{display:flex;}}
.topbar-account{display:flex;align-items:center;color:#fff;font-size:12px;padding-left:16px;border-left:1px solid rgba(255,255,255,.4);}
.topbar-account i{margin-right:4px;}
.topbar-cart{position:relative;color:#fff;}
.topbar-cart i{font-size:18px;}
.cart-count{position:absolute;top:-8px;right:-8px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;line-height:1;}

/* ---------- 步骤条 ---------- */
.steps-bar{background:var(--neutral);height:56px;display:flex;align-items:center;}
.steps{display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;width:100%;}
.steps::-webkit-scrollbar{display:none;}
@media(min-width:640px){.steps{gap:24px;}}
@media(min-width:768px){.steps{gap:40px;}}
.step{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.step-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:500;background:#fff;border:2px solid var(--neutral-dark);color:var(--text-tertiary);transition:all .3s;}
.step.done .step-dot{background:var(--primary);border-color:var(--primary);color:#fff;}
.step.active .step-dot{border-color:var(--primary);color:var(--primary);animation:pulse-subtle 2s infinite;position:relative;}
.step.active .step-dot::after{content:"";position:absolute;bottom:-4px;right:-4px;width:12px;height:12px;background:var(--accent);border-radius:50%;border:2px solid #fff;}
.step-label{font-size:12px;font-weight:500;color:var(--text-tertiary);white-space:nowrap;}
.step.active .step-label,.step.done .step-label{color:var(--primary);}
@media(min-width:640px){.step-label{font-size:14px;}}
.step-sep{color:#D1D5DB;flex-shrink:0;}
@keyframes pulse-subtle{0%,100%{opacity:1;}50%{opacity:.8;}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

/* ---------- 白色面板（顶部渐变条） ---------- */
.panel{position:relative;overflow:hidden;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.05);padding:24px;transition:all .35s cubic-bezier(.34,1.56,.64,1);}
.panel::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#165DFF,#00B42A);border-radius:4px 4px 0 0;}
.deco-circle-tr{position:absolute;top:0;right:0;width:128px;height:128px;background:rgba(22,93,255,.05);border-radius:50%;margin-right:-64px;margin-top:-64px;}
.deco-circle-bl{position:absolute;bottom:0;left:0;width:160px;height:160px;background:rgba(22,93,255,.05);border-radius:50%;margin-left:-80px;margin-bottom:-80px;}

/* ---------- 页脚（三页统一） ---------- */
.site-footer{background:#fff;border-top:1px solid var(--neutral-dark);margin-top:64px;padding:32px 0;}
.footer-inner{display:flex;flex-direction:column;justify-content:space-between;align-items:center;}
@media(min-width:768px){.footer-inner{flex-direction:row;}}
.footer-copy{color:#6B7280;font-size:14px;margin-bottom:16px;}
@media(min-width:768px){.footer-copy{margin-bottom:0;}}
.footer-links{display:flex;gap:24px;}
.footer-links a{color:#6B7280;font-size:14px;transition:color .2s;}
.footer-links a:hover{color:var(--primary);}

/* ---------- 在线客服 ---------- */
#chat-toggle{display:none;}
.service-btn{position:fixed;bottom:24px;right:24px;width:60px;height:60px;border-radius:50%;background:#4DDFFD;color:#fff;border:none;box-shadow:0 4px 12px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;font-size:24px;z-index:99;cursor:pointer;transition:all .3s;}
.service-btn:hover{transform:scale(1.05);background:#3BC8E6;}
.chat-window{position:fixed;bottom:66px;right:16px;width:600px;height:600px;max-width:90vw;max-height:90vh;min-width:300px;min-height:400px;background:#fff;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:1000;overflow:hidden;visibility:hidden;opacity:0;transition:all .3s;}
#chat-toggle:checked ~ .chat-window{visibility:visible;opacity:1;}
.chat-close{position:absolute;top:20px;right:12px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);border:none;display:flex;align-items:center;justify-content:center;z-index:1001;box-shadow:0 2px 4px rgba(0,0,0,.1);cursor:pointer;}
.chat-head{position:absolute;top:0;left:0;width:100%;height:60px;background:#fff;z-index:100;}
.chat-title{width:100%;padding:10px 12px;display:flex;min-height:60px;font-size:14px;color:#fff;background:rgb(0,47,167);}
.chat-ico{display:flex;margin-right:4px;}
.chat-ico img{width:40px;height:40px;border-radius:50%;}
.chat-dec{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-dec-top{display:flex;height:22px;line-height:22px;align-items:center;}
.chat-dec-bottom{margin-top:-6px;overflow:hidden;text-overflow:ellipsis;}
.chat-foot{position:absolute;bottom:0;width:100%;height:25px;padding:0 0 8px;font-size:12px;color:rgba(0,0,0,.26);text-align:center;background:#F8F9FA;z-index:100;}
.chat-foot a{color:inherit;}
.chat-body{padding-top:60px;height:100%;}
.chat-body iframe{width:100%;height:100%;border:none;display:block;}
@media(max-width:768px){
  .chat-window{width:100vw;height:100vh;bottom:0;right:0;border-radius:0;max-width:none;max-height:none;min-width:0;min-height:0;}
  .service-btn{width:56px;height:56px;bottom:16px;right:16px;}
  .chat-window .chat-head,.chat-window .chat-foot{display:none;}
  .chat-body{padding-top:0;}
}


/* ============================================================
   全局提示 / 确认弹窗 —— #appAlertModal / #appConfirmModal
   视觉语言完全对齐登录弹窗（.login-modal-box）：
   4px 蓝绿渐变顶条、12px 圆角、白卡、0 20px 60px 投影、
   圆形浅灰关闭钮、蓝色实心主按钮。
   自包含：不依赖 bootstrap.css，也不依赖 cart.css 其他片段。
   放置建议：追加到 cart.css 末尾；或放进 common/footer.html 的
   <style> 里（全站生效，含未引 cart.css 的页面）。
   ============================================================ */
@keyframes appModalIn{from{transform:translateY(22px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ---------- 遮罩：bootstrap JS 自动插入的 .modal-backdrop ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:100001;
  background:#0F172A;opacity:0;transition:opacity .2s linear;
}
.modal-backdrop.show{opacity:.55;}

/* ---------- 弹窗容器：铺满视口、固定定位 ---------- */
#appAlertModal,
#appConfirmModal{
  position:fixed;inset:0;z-index:100002;display:none;
  width:100%;height:100%;overflow-x:hidden;overflow-y:auto;
  outline:0;-webkit-overflow-scrolling:touch;
}
#appAlertModal.show,
#appConfirmModal.show,
#appAlertModal[style*="display: block"],
#appAlertModal[style*="display:block"],
#appConfirmModal[style*="display: block"],
#appConfirmModal[style*="display:block"]{display:block;}

/* ---------- 对话框：水平居中 + 垂直居中 ---------- */
#appAlertModal .modal-dialog,
#appConfirmModal .modal-dialog{
  position:relative;width:100%;max-width:400px;margin:0 auto;
  padding:24px 20px;min-height:100%;
  display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
}
#appConfirmModal .modal-dialog{max-width:380px;}

/* ---------- 白卡本体 ---------- */
#appAlertModal .modal-content,
#appConfirmModal .modal-content{
  pointer-events:auto;position:relative;width:100%;
  background:#fff;border:0;border-radius:12px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  color:#1D2129;font-family:inherit;font-size:14px;
  animation:appModalIn .28s cubic-bezier(.34,1.3,.64,1);
}
/* 顶部渐变条（与 .login-modal-box::before 一致） */
#appAlertModal .modal-content::before,
#appConfirmModal .modal-content::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:4px;z-index:1;
  background:linear-gradient(90deg,#165DFF,#00B42A);
}

/* ---------- 标题栏 ---------- */
#appAlertModal .modal-header,
#appConfirmModal .modal-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 24px 10px;border:0;border-radius:0;
}
#appAlertModal .modal-title,
#appConfirmModal .modal-title{
  margin:0;font-size:17px;font-weight:700;line-height:1.4;color:#1D2129;
  display:flex;align-items:center;gap:8px;
}

/* ---------- 右上角关闭钮（替代 bootstrap 的 svg btn-close） ---------- */
#appAlertModal .btn-close,
#appConfirmModal .btn-close{
  flex:0 0 28px;width:28px;height:28px;padding:0;margin:0;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:#F1F3F5;background-image:none;
  color:#4E5969;opacity:1;cursor:pointer;box-shadow:none;
  transition:background .2s,color .2s;font-size:0;line-height:1;
}
#appAlertModal .btn-close::before,
#appConfirmModal .btn-close::before{content:"✕";font-size:13px;font-weight:600;line-height:1;}
#appAlertModal .btn-close:hover,
#appConfirmModal .btn-close:hover{background:#E5E6EB;color:#1D2129;}
#appAlertModal .btn-close:focus-visible,
#appConfirmModal .btn-close:focus-visible{outline:2px solid #165DFF;outline-offset:2px;}

/* ---------- 内容区 ---------- */
#appAlertModal .modal-body,
#appConfirmModal .modal-body{
  padding:6px 24px 4px;
  font-size:14px;line-height:1.75;color:#4E5969;
  white-space:pre-wrap;word-break:break-word;text-align:left;
  max-height:60vh;overflow-y:auto;
}

/* ---------- 底部按钮区 ---------- */
#appAlertModal .modal-footer,
#appConfirmModal .modal-footer{
  display:flex;flex-direction:row;align-items:center;gap:10px;
  justify-content:flex-end;padding:18px 24px 22px;border:0;
}
#appAlertModal .modal-footer>*,
#appConfirmModal .modal-footer>*{margin:0!important;}
/* 提示框：只有一个「确定」，整行铺满（同登录按钮） */
#appAlertModal .modal-footer .btn{width:100%;}

/* ---------- 按钮基础 ---------- */
#appAlertModal .btn,
#appConfirmModal .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:0;padding:12px 20px;border:0;border-radius:8px;
  font:inherit;font-size:14px;font-weight:600;line-height:1.4;
  background:transparent;color:#4E5969;
  cursor:pointer;box-shadow:none;transition:all .25s;
}
/* 主按钮：蓝色实心（同 .btn-primary / 登录按钮） */
#appAlertModal .btn-primary,
#appConfirmModal .btn-primary{
  background:#165DFF;color:#fff;
  box-shadow:0 4px 12px rgba(22,93,255,.25);
}
#appAlertModal .btn-primary:hover,
#appConfirmModal .btn-primary:hover{
  background:#0E4BDB;box-shadow:0 6px 16px rgba(22,93,255,.35);transform:translateY(-1px);
}
#appAlertModal .btn-primary:active,
#appConfirmModal .btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(22,93,255,.3);}
/* 次按钮（确认框的「取消」） */
#appConfirmModal .btn-outline-secondary{
  flex:1 1 0;width:auto;background:#fff;color:#4E5969;
  border:1px solid #E5E6EB;box-shadow:none;
}
#appConfirmModal .btn-outline-secondary:hover{background:#F7F8FA;border-color:#C9CDD4;color:#1D2129;}
#appConfirmModal .modal-footer .btn-primary{flex:1 1 0;width:auto;}

/* ---------- 移动端 ---------- */
@media(max-width:520px){
  #appAlertModal .modal-dialog,
  #appConfirmModal .modal-dialog{padding:16px 12px;}
  #appAlertModal .modal-header,
  #appConfirmModal .modal-header{padding:16px 18px 8px;}
  #appAlertModal .modal-body,
  #appConfirmModal .modal-body{padding:4px 18px;}
  #appAlertModal .modal-footer,
  #appConfirmModal .modal-footer{padding:14px 18px 18px;}
  #appAlertModal .modal-title,
  #appConfirmModal .modal-title{font-size:16px;}
}

/* ---------- 无障碍：降低动效偏好 ---------- */
@media(prefers-reduced-motion:reduce){
  #appAlertModal .modal-content,
  #appConfirmModal .modal-content{animation:none;}
  .modal-backdrop{transition:none;}
}

/* ============ cart1 选购页（body.page-select） ============ */

/* 顶部通知栏（默认隐藏） */
.notice-bar{display:none;background:var(--primary);color:#fff;text-align:center;padding:8px 0;font-size:14px;}

/* 主布局 */
.page-select .page-main{max-width:1280px;margin:0 auto;padding:32px 16px;}
.page-select .page-main>*+*{margin-top:48px;}
@media(min-width:640px){.page-select .page-main{padding-left:24px;padding-right:24px;}}
@media(min-width:1024px){.page-select .page-main{padding-left:32px;padding-right:32px;}}
@media(min-width:768px){.page-select .panel-lg{padding:32px;}}

/* ---------- 限时优惠引导卡 ---------- */
.promo-card{
  position:relative;z-index:10;overflow:hidden;border-radius:12px;padding:24px;
  background:linear-gradient(to right,rgba(22,93,255,.9),var(--primary));
  color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  animation:fadeIn .5s ease-in-out;
}
.promo-card::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(255,255,255,.1);border-radius:50%;}
.promo-card::after{content:"";position:absolute;bottom:-40px;left:-40px;width:128px;height:128px;background:rgba(255,255,255,.1);border-radius:50%;}
.promo-inner{display:flex;flex-direction:column;align-items:center;justify-content:space-between;}
@media(min-width:768px){.promo-inner{flex-direction:row;}}
.promo-text{margin-bottom:24px;}
@media(min-width:768px){.promo-text{width:66.666%;margin-bottom:0;}}
.promo-title{font-size:24px;font-weight:700;margin-bottom:12px;}
.promo-desc{color:rgba(255,255,255,.9);margin-bottom:16px;}
.promo-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;}
.countdown-box{background:rgba(255,255,255,.2);border-radius:8px;padding:12px;display:inline-block;text-align:center;}
.countdown-label{font-size:12px;opacity:.8;margin-bottom:4px;}
.countdown-row{display:flex;gap:4px;align-items:baseline;}
.countdown-num{font-weight:700;animation:countPulse 1s infinite;}
@keyframes countPulse{0%{transform:scale(1);}50%{transform:scale(1.05);}100%{transform:scale(1);}}
.promo-btn1{background:#fff;color:var(--primary);padding:0.5rem 1.0rem 0.5rem 1.0rem;font-weight:500;border:none;transition:all .3s;display:inline-flex;align-items:center;border-radius: 0.5rem;}
.promo-btn1:hover{background:#F3F4F6;}
.promo-btn1 i{margin-left:4px;}

/* ---------- 套餐选购面板 ---------- */
.select-title{font-size:24px;font-weight:700;margin-bottom:32px;display:flex;align-items:center;justify-content:center;}
.select-title i{color:var(--primary);margin-right:12px;}
.tabs-main{border-bottom:1px solid var(--neutral-dark);margin-bottom:32px;}
.tabs-main-row{display:flex;overflow-x:auto;scrollbar-width:none;}
.tabs-main-row::-webkit-scrollbar{display:none;}
.tab-main{display:inline-flex;align-items:center;padding:12px 20px;font-size:16px;font-weight:500;color:var(--text-secondary);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s;cursor:pointer;}
.tab-main i{margin-right:8px;font-size:18px;}
.tab-main:hover{color:var(--primary);}
/* 主标签切换（纯 CSS radio） */
#mt-pkg:checked ~ .tabs-main .tab-main[for="mt-pkg"],
#mt-addon:checked ~ .tabs-main .tab-main[for="mt-addon"]{border-bottom-color:var(--primary);color:var(--primary);}
.tab-area{display:none;}
#mt-pkg:checked ~ .tab-area-pkg{display:block;}
#mt-addon:checked ~ .tab-area-addon{display:block;}


/* ============================================================
   cart1-new 专有：:target 标签切换
   显隐规则全部通用（不含数据 ID）；is-default 由服务端标在默认面板上
   ============================================================ */
.tab-pane{display:none;scroll-margin-top:130px;}
.tab-pane:target{display:block;}
.tab-pane.is-default{display:block;}
.tab-pane:target ~ .tab-pane.is-default,
.tab-pane:has(~ .tab-pane:target){display:none;}
.tab-pane:has(.tab-pane:target){display:block;}
.tab-pane .custom-panel{display:block;}
/* 标签高亮：不在此处按 ID 写死。
   - 有 JS：由脚本切换 .is-active（下方规则）。
   - 无 JS：由服务端在渲染当前标签时直接输出 class="is-active"（模板循环内一行）。
   纯 CSS 无法做跨元素属性匹配（点亮 href 值 == :target 元素 id 的链接），
   因此无 JS 又无 SSR 标注时，高亮不跟随属于已知降级，显隐不受影响。 */
/* ===== JS 增强层：有 JS 时滚动被拦截，改用 .is-active 切换 ===== */
html.js .tab-pane{display:none;}
html.js .tab-pane:target{display:none;}
html.js .tab-pane.is-active{display:block;}
html.js .main-pane.is-active{display:block;}
html.js .main-pane:has(.sub-pane.is-active){display:block;}
.tab-main.is-active,.tab-sub.is-active{border-bottom-color:var(--primary);color:var(--primary);}
.tab-sub.is-active{font-weight:500;}

/* 通知条 */
.notification-bar{display:flex;align-items:flex-start;background:rgba(22,93,255,.1);border-left:4px solid var(--primary);padding:12px;margin-bottom:32px;}
.notification-bar i{color:var(--primary);margin-right:12px;margin-top:2px;font-size:18px;}
.notification-bar .nb-text{font-size:14px;color:var(--text-secondary);}

/* 系列子标签切换（纯 CSS radio） */
.subtabs{border-bottom:1px solid var(--neutral-dark);margin-bottom:24px;}
.subtabs-row{display:flex;overflow-x:auto;scrollbar-width:none;}
.subtabs-row::-webkit-scrollbar{display:none;}
.tab-sub{display:inline-flex;align-items:center;padding:12px 20px;font-size:14px;color:var(--text-secondary);border-bottom:2px solid transparent;white-space:nowrap;transition:color .2s;cursor:pointer;}
.tab-sub i{margin-right:4px;}
.tab-sub:hover{color:var(--primary);}
.tab-sub.active{border-bottom-color:var(--primary);color:var(--primary);font-weight:500;}
#grid-cx,#grid-lx,#grid-zy{display:none;}
#sr-cx:checked ~ .subtabs .tab-sub[for="sr-cx"],
#sr-lx:checked ~ .subtabs .tab-sub[for="sr-lx"],
#sr-zy:checked ~ .subtabs .tab-sub[for="sr-zy"],
#sr-custom:checked ~ .subtabs .tab-sub[for="sr-custom"]{border-bottom-color:var(--primary);color:var(--primary);font-weight:500;}
#sr-cx:checked ~ #grid-cx,
#sr-lx:checked ~ #grid-lx,
#sr-zy:checked ~ #grid-zy{display:grid;}

/* ---------- 套餐卡片 ---------- */
.cards-grid{display:grid;grid-template-columns:1fr;gap:24px;animation:fadeIn .5s ease-in-out;}
@media(min-width:640px){.cards-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.cards-grid{grid-template-columns:repeat(3,1fr);}}
.package-card{position:relative;overflow:hidden;border:1px solid var(--neutral-dark);border-radius:12px;padding:20px;transition:all .3s;}
.package-card:hover{border-color:rgba(22,93,255,.5);box-shadow:0 10px 15px -3px rgba(0,0,0,.1);transform:translateY(-4px);}
.badge-recommend{position:absolute;right:-24px;top:16px;transform:rotate(45deg);background:var(--recommend-blue);color:#fff;font-size:12px;font-weight:700;padding:4px 40px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;}
.card-name{font-size:18px;font-weight:700;}
.badge{display:inline-flex;align-items:center;font-size:12px;padding:4px 8px;border-radius:9999px;margin-top:4px;margin-right:4px;}
.badge-blue{background:rgba(22,93,255,.1);color:var(--primary);}
.badge-green{background:rgba(0,180,42,.1);color:var(--secondary);}
.card-price{font-size:24px;font-weight:700;color:var(--primary);margin:12px 0;}
.card-price small{font-size:14px;font-weight:400;color:var(--text-tertiary);}
.card-price .price-orig{font-size:13px;font-weight:400;color:var(--text-tertiary);text-decoration:line-through;margin-left:8px;}
.card-desc{font-size:14px;color:var(--text-secondary);margin-bottom:16px;}
.card-features{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.feature-line{display:flex;align-items:flex-start;font-size:14px;}
.feature-line i{color:var(--secondary);margin-right:8px;margin-top:2px;flex-shrink:0;}
.feature-line span{color:var(--text-secondary);}
.card-actions{display:flex;gap:12px;}
.btn-buy{flex:1;display:block;text-align:center;padding:12px 0;border-radius:8px;background:var(--primary);color:#fff;font-weight:500;border:none;box-shadow:0 4px 6px -1px rgba(22,93,255,.3);transition:all .3s;}
.btn-buy:hover{background:rgba(22,93,255,.9);transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(22,93,255,.4);}
.btn-compare{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:8px;background:#fff;border:1px solid var(--primary);color:var(--primary);font-weight:500;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:all .3s;cursor:pointer;}
.btn-compare:hover{background:rgba(22,93,255,.05);}
.btn-compare i{margin-right:4px;}
.btn-compare:has(.cmp-toggle:checked){background:#F0F6FF;border-color:var(--primary);box-shadow:0 0 0 1px var(--primary) inset;}

/* ---------- 套餐对比栏（纯 CSS：checkbox + counter 计数） ---------- */
#package-selection{counter-reset:cmp;}
.cmp-toggle:checked{counter-increment:cmp;}
.compare-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:99998;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--neutral-dark);box-shadow:0 -4px 20px rgba(15,23,42,.08);}
#package-selection:has(.cmp-toggle:checked) .compare-bar{display:flex;}
.cmp-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;}
.cmp-chip{display:block;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#F0F6FF;color:var(--primary);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background .2s;}
.cmp-chip i{font-size:13px;opacity:.65;}
.cmp-chip:hover{background:#E8F3FF;}
#package-selection:has(#cmp-cx1:checked) .ch-cx1,
#package-selection:has(#cmp-cx2:checked) .ch-cx2,
#package-selection:has(#cmp-cx3:checked) .ch-cx3,
#package-selection:has(#cmp-lx1:checked) .ch-lx1,
#package-selection:has(#cmp-lx2:checked) .ch-lx2,
#package-selection:has(#cmp-lx3:checked) .ch-lx3,
#package-selection:has(#cmp-zy1:checked) .ch-zy1,
#package-selection:has(#cmp-zy2:checked) .ch-zy2{display:inline-flex;}
.cmp-actions{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.cmp-clear{color:var(--text-tertiary);font-size:13px;transition:color .2s;white-space:nowrap;}
.cmp-clear:hover{color:var(--danger);}
.cmp-go{width:auto;min-width:0;padding:10px 20px;font-size:14px;}
.cmp-count::after{content:"(" counter(cmp) ")";}
.cmp-go{cursor:pointer;}

/* ---------- 套餐对比弹窗（纯 CSS checkbox 开关） ---------- */
.cmp-modal{position:fixed;inset:0;z-index:100001;display:none;}
#package-selection:has(#cmp-modal-toggle:checked) .cmp-modal{display:flex;align-items:center;justify-content:center;}
.cmp-modal-mask{position:absolute;inset:0;background:rgba(15,23,42,.55);cursor:pointer;}
.cmp-modal-box{position:relative;width:90vw;max-height:90vh;margin:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:slideUp .3s ease;display:flex;flex-direction:column;}
.cmp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--neutral-dark);flex-shrink:0;}
.cmp-modal-head h3{font-size:17px;font-weight:700;display:flex;align-items:center;}
.cmp-modal-head h3 i{color:var(--primary);margin-right:8px;}
.cmp-modal-close{width:28px;height:28px;border-radius:50%;background:var(--neutral);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:all .2s;}
.cmp-modal-close:hover{background:var(--neutral-dark);color:var(--text-primary);}
.cmp-modal-body{overflow:auto;padding:0 20px 20px;}
.cmp-table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px;}
.cmp-table th,.cmp-table td{border-bottom:1px solid #F0F2F5;padding:11px 14px;text-align:left;white-space:nowrap;}
.cmp-table thead th{background:#F7FAFF;color:var(--text-primary);font-weight:600;position:sticky;top:0;z-index:2;}
.cmp-table tbody td:first-child{color:var(--text-tertiary);}
.cmp-table td:not(:first-child){font-weight:500;color:var(--text-primary);}
.cmp-price{color:var(--primary);font-weight:700;}
.cmp-orig{color:var(--text-tertiary);text-decoration:line-through;font-weight:400;font-size:12px;margin-left:5px;}
.cmp-buy{display:inline-block;padding:6px 16px;border-radius:6px;background:var(--primary);color:#fff;font-size:12px;font-weight:500;transition:all .25s;}
.cmp-buy:hover{background:var(--primary-dark);box-shadow:0 4px 10px rgba(22,93,255,.3);}
/* 对比列按勾选状态显隐 */
/*.cmp-table .ccol{display:block;}*/
#package-selection:has(#cmp-cx1:checked) .ccol-cx1,
#package-selection:has(#cmp-cx2:checked) .ccol-cx2,
#package-selection:has(#cmp-cx3:checked) .ccol-cx3,
#package-selection:has(#cmp-lx1:checked) .ccol-lx1,
#package-selection:has(#cmp-lx2:checked) .ccol-lx2,
#package-selection:has(#cmp-lx3:checked) .ccol-lx3,
#package-selection:has(#cmp-zy1:checked) .ccol-zy1,
#package-selection:has(#cmp-zy2:checked) .ccol-zy2{display:table-cell;}
@media(max-width:768px){.cmp-modal-box{margin:0;width:96vw;}}
/* 达到 8 个上限提示 */
.cmp-limit-tip{display:none;align-items:center;gap:6px;margin:0 0 12px;padding:10px 14px;border-radius:8px;background:#FFF7E8;border:1px solid #FFCF8B;color:var(--accent);font-size:13px;font-weight:500;}
#package-selection:has(#cmp-cx1:checked):has(#cmp-cx2:checked):has(#cmp-cx3:checked):has(#cmp-lx1:checked):has(#cmp-lx2:checked):has(#cmp-lx3:checked):has(#cmp-zy1:checked):has(#cmp-zy2:checked) .cmp-limit-tip{display:flex;}

/* ---------- 登录弹窗（纯 CSS：#login-toggle checkbox 开关；风格与卡片体系一致） ---------- */
.login-modal{position:fixed;inset:0;z-index:100002;display:none;}
body:has(#login-toggle:checked) .login-modal{display:flex;align-items:center;justify-content:center;padding:20px;}
.login-modal-mask{position:absolute;inset:0;background:rgba(15,23,42,.55);cursor:pointer;}
.login-modal-box{position:relative;width:400px;max-width:92vw;background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);animation:slideUp .3s ease;overflow:hidden;}
.login-modal-box::before{content:"";display:block;height:4px;background:linear-gradient(90deg,var(--primary),var(--secondary));}
.login-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;}
.login-head h3{font-size:17px;font-weight:700;display:flex;align-items:center;}
.login-head h3 i{color:var(--primary);margin-right:8px;}
.login-close{width:28px;height:28px;border-radius:50%;background:var(--neutral);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:all .2s;}
.login-close:hover{background:var(--neutral-dark);color:var(--text-primary);}
.login-body{padding:0 24px 24px;display:flex;flex-direction:column;gap:16px;}
.login-field{display:flex;flex-direction:column;gap:6px;}
.login-label{font-size:13px;font-weight:500;color:var(--text-secondary);}
.login-input-wrap{display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--neutral-dark);border-radius:8px;background:var(--neutral);transition:all .2s;}
.login-input-wrap i{color:var(--text-tertiary);font-size:14px;width:16px;text-align:center;}
.login-input-wrap:focus-within{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(22,93,255,.12);}
.login-input-wrap input{flex:1;min-width:0;border:0;outline:0;background:transparent;padding:12px 0;font-size:14px;color:var(--text-primary);}
.login-input-wrap input::placeholder{color:var(--text-tertiary);}
.login-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;}
.login-remember{display:flex;align-items:center;gap:6px;color:var(--text-secondary);cursor:pointer;}
.login-remember input{accent-color:var(--primary);}
.login-forgot{color:var(--primary);}
.login-forgot:hover{text-decoration:underline;}
label.btn-primary{cursor:pointer;}
.login-submit{width:100%;padding:12px;font-size:15px;border:0;cursor:pointer;}
.login-tip{text-align:center;font-size:13px;color:var(--text-tertiary);margin:2px 0 0;}
.login-tip a{color:var(--primary);font-weight:500;}
/* 登录失败提示：#login-error 由服务端在登录失败时输出 checked，正常请求不带该节点状态 */
.login-error-tip{display:none;align-items:flex-start;gap:9px;padding:11px 13px;border-radius:8px;background:#FFF1F0;border:1px solid #FFCCC7;color:var(--danger);font-size:13px;line-height:1.55;animation:fadeIn .25s ease;}
.login-error-tip i{margin-top:2px;font-size:15px;}
.login-error-tip strong{display:block;font-weight:600;}
.login-error-tip span{display:block;color:#B46363;font-size:12px;margin-top:2px;}
body:has(#login-error:checked) .login-error-tip{display:flex;}
body:has(#login-error:checked) .login-input-wrap{border-color:#FFA39E;background:#FFF5F5;}
body:has(#login-error:checked) .login-input-wrap:focus-within{box-shadow:0 0 0 3px rgba(245,63,63,.12);}
body:has(#login-error:checked) .login-modal-box{animation:slideUp .3s ease,shake .35s .3s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-5px);}80%{transform:translateX(5px);}}


 
/* 桥接：显形/居中改由 bootstrap .show 驱动（原绑在 #login-toggle:checked 上） */
#loginModal.show{display:flex !important;align-items:center;justify-content:center;padding:20px;}
/* 可选：错误态的红框+抖动（原绑在 #login-error:checked 上，改由 #lm_err 的行内 style 驱动） */
body:has(#lm_err[style*="block"]) .login-input-wrap{border-color:#FFA39E;background:#FFF5F5;}
body:has(#lm_err[style*="block"]) .login-input-wrap:focus-within{box-shadow:0 0 0 3px rgba(245,63,63,.12);}
body:has(#lm_err[style*="block"]) .login-modal-box{animation:slideUp .3s ease,shake .35s .3s ease;}
 

/* ---------- 定制套餐面板（仅"定制套餐"页签显示） ---------- */
.custom-panel{display:none;animation:fadeIn .5s ease-in-out;}
#sr-custom:checked ~ .custom-panel{display:block;}
.custom-box{background:var(--neutral);border-radius:12px;padding:24px;text-align:center;}
.custom-icon{width:64px;height:64px;border-radius:50%;background:rgba(22,93,255,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.custom-icon i{color:var(--primary);font-size:24px;}
.custom-title{font-size:20px;font-weight:700;margin-bottom:12px;}
.custom-desc{color:var(--text-secondary);margin-bottom:24px;}
.custom-stats{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:24px;}
@media(min-width:768px){.custom-stats{grid-template-columns:repeat(3,1fr);}}
.stat-box{background:#fff;padding:16px;border-radius:8px;}
.stat-num{color:var(--primary);font-size:30px;font-weight:700;margin-bottom:4px;}
.stat-label{color:var(--text-secondary);font-size:14px;}
.btn-custom-consult{display:inline-flex;align-items:center;background:var(--primary);color:#fff;padding:12px 24px;border-radius:8px;font-weight:500;border:none;box-shadow:0 4px 6px -1px rgba(22,93,255,.3);transition:all .3s;}
.btn-custom-consult:hover{background:rgba(22,93,255,.9);}
.btn-custom-consult i{margin-right:8px;}

/* ---------- 行业案例 ---------- */
.cases-title{display:flex;align-items:center;font-size:20px;font-weight:700;margin-bottom:32px;}
.cases-title i{color:var(--primary);margin-right:12px;font-size:20px;}
.cases-title span{color:#1F2937;font-weight:600;}
.case-tabs{display:flex;overflow-x:auto;scrollbar-width:none;gap:4px;border-bottom:1px solid #E5E7EB;margin-bottom:24px;}
.case-tabs::-webkit-scrollbar{display:none;}
.case-tab{display:inline-block;padding:8px 16px;font-size:14px;font-weight:500;color:#6B7280;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;transition:color .2s;}
.case-tab:hover{color:var(--primary);}
.case-content{display:none;padding-top:16px;animation:fadeIn .5s ease-in-out;}
#case-retail:checked ~ .case-tabs .case-tab[for="case-retail"],
#case-service:checked ~ .case-tabs .case-tab[for="case-service"],
#case-education:checked ~ .case-tabs .case-tab[for="case-education"],
#case-manufacture:checked ~ .case-tabs .case-tab[for="case-manufacture"]{color:var(--primary);border-bottom-color:var(--primary);}
#case-retail:checked ~ .cases-body #case-retail-panel,
#case-service:checked ~ .cases-body #case-service-panel,
#case-education:checked ~ .cases-body #case-education-panel,
#case-manufacture:checked ~ .cases-body #case-manufacture-panel{display:block;}
.case-grid{display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:1024px){.case-grid{grid-template-columns:repeat(5,1fr);}}
.case-info{background:#F9FAFB;border:1px solid #F3F4F6;border-radius:8px;padding:24px;}
@media(min-width:1024px){.case-info{grid-column:span 2;}}
.case-info-head{display:flex;align-items:center;margin-bottom:16px;}
.case-info-head img{width:64px;height:64px;border-radius:8px;object-fit:cover;margin-right:16px;border:1px solid #F3F4F6;}
.case-info-name{font-size:18px;font-weight:700;color:#1F2937;}
.case-info-sub{color:#6B7280;font-size:14px;}
.case-points{display:flex;flex-direction:column;gap:12px;font-size:14px;color:#374151;}
.case-points div{display:flex;align-items:flex-start;}
.case-points i{color:#22C55E;margin-right:8px;margin-top:2px;}
.case-tags{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;}
.case-tag{padding:4px 8px;background:#EFF6FF;color:#1D4ED8;font-size:12px;border-radius:9999px;}
.case-data{display:grid;grid-template-columns:1fr;gap:16px;}
@media(min-width:640px){.case-data{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1024px){.case-data{grid-column:span 3;}}
.data-card{position:relative;border-radius:8px;padding:20px;text-align:center;border:1px solid;box-shadow:0 1px 2px rgba(0,0,0,.05);overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:160px;transition:all .3s;}
.data-card:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1);}
.data-card .bg-tint{position:absolute;inset:0;opacity:.9;}
.data-card .bg-icon{position:absolute;top:0;right:0;width:96px;height:96px;opacity:.5;font-size:80px;transform:translate(25%,-25%);}
.data-body{position:relative;z-index:10;}
.data-num{font-size:30px;font-weight:700;margin-bottom:4px;}
.data-label{font-size:14px;color:#4B5563;}
.data-note{font-size:12px;color:#9CA3AF;margin-top:4px;}
.dc-blue{border-color:#BFDBFE;}.dc-blue .bg-tint{background:linear-gradient(to bottom right,#EFF6FF,#EEF2FF);}.dc-blue .bg-icon{color:#DBEAFE;}.dc-blue .data-num{color:var(--primary);}
.dc-green{border-color:#BBF7D0;}.dc-green .bg-tint{background:linear-gradient(to bottom right,#F0FDF4,#F0FDFA);}.dc-green .bg-icon{color:#DCFCE7;}.dc-green .data-num{color:#16A34A;}
.dc-purple{border-color:#E9D5FF;}.dc-purple .bg-tint{background:linear-gradient(to bottom right,#FAF5FF,#FDF2F8);}.dc-purple .bg-icon{color:#F3E8FF;}.dc-purple .data-num{color:#9333EA;}
.dc-orange{border-color:#FED7AA;}.dc-orange .bg-tint{background:linear-gradient(to bottom right,#FFF7ED,#FFFBEB);}.dc-orange .bg-icon{color:#FFEDD5;}.dc-orange .data-num{color:#EA580C;}
.dc-red{border-color:#FECACA;}.dc-red .bg-tint{background:linear-gradient(to bottom right,#FEF2F2,#FFF1F2);}.dc-red .bg-icon{color:#FEE2E2;}.dc-red .data-num{color:#DC2626;}
.dc-teal{border-color:#99F6E4;}.dc-teal .bg-tint{background:linear-gradient(to bottom right,#F0FDFA,#ECFEFF);}.dc-teal .bg-icon{color:#CCFBF1;}.dc-teal .data-num{color:#0D9488;}
.dc-emerald{border-color:#A7F3D0;}.dc-emerald .bg-tint{background:linear-gradient(to bottom right,#ECFDF5,#F0FDF4);}.dc-emerald .bg-icon{color:#D1FAE5;}.dc-emerald .data-num{color:#059669;}
.dc-indigo{border-color:#C7D2FE;}.dc-indigo .bg-tint{background:linear-gradient(to bottom right,#EEF2FF,#EFF6FF);}.dc-indigo .bg-icon{color:#E0E7FF;}.dc-indigo .data-num{color:#4F46E5;}
.dc-amber{border-color:#FDE68A;}.dc-amber .bg-tint{background:linear-gradient(to bottom right,#FFFBEB,#FEFCE8);}.dc-amber .bg-icon{color:#FEF3C7;}.dc-amber .data-num{color:#D97706;}
.dc-sky{border-color:#BAE6FD;}.dc-sky .bg-tint{background:linear-gradient(to bottom right,#F0F9FF,#EFF6FF);}.dc-sky .bg-icon{color:#E0F2FE;}.dc-sky .data-num{color:#0284C7;}
.dc-rose{border-color:#FECDD3;}.dc-rose .bg-tint{background:linear-gradient(to bottom right,#FFF1F2,#FDF2F8);}.dc-rose .bg-icon{color:#FFE4E6;}.dc-rose .data-num{color:#E11D48;}
.dc-violet{border-color:#DDD6FE;}.dc-violet .bg-tint{background:linear-gradient(to bottom right,#F5F3FF,#FAF5FF);}.dc-violet .bg-icon{color:#EDE9FE;}.dc-violet .data-num{color:#7C3AED;}

/* ---------- 信任保障 ---------- */
.trust-card{position:relative;z-index:10;overflow:hidden;border-radius:12px;padding:24px;background:linear-gradient(to right,rgba(22,93,255,.9),var(--primary));color:#fff;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);}
.trust-card::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(255,255,255,.1);border-radius:50%;}
.trust-card::after{content:"";position:absolute;bottom:-40px;left:-40px;width:128px;height:128px;background:rgba(255,255,255,.1);border-radius:50%;}
.trust-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:24px;}
.trust-title i{margin-right:8px;}
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;position:relative;z-index:1;}
@media(min-width:768px){.trust-grid{grid-template-columns:repeat(4,1fr);}}
.trust-item{text-align:center;}
.trust-icon{width:48px;height:48px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--primary);margin:0 auto 12px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);}
.trust-icon i{font-size:20px;}
.trust-name{font-weight:500;}
.trust-desc{color:rgba(255,255,255,.8);font-size:14px;margin-top:4px;}
.trust-cta{margin-top:32px;text-align:center;position:relative;z-index:1;}
.trust-cta a{display:inline-block;background:#fff;color:var(--primary);padding:12px 32px;border-radius:8px;font-weight:500;transition:background .3s;}
.trust-cta a:hover{background:#F3F4F6;}
.trust-cta i{margin-left:4px;}

/* ============ cart2 配置页（body.page-config） ============ */
body.page-config{padding-bottom:5rem;}
.page-config .page-main{padding:32px 0;}
.config-layout{display:flex;flex-direction:column;gap:32px;}
@media(min-width:1024px){.config-layout{flex-direction:row;}.col-left{width:66.666%;}.col-right{width:33.333%;}}
.mb-panel{margin-bottom:32px;}

.panel-title{font-size:20px;font-weight:600;margin-bottom:24px;display:flex;align-items:center;}
.panel-title i{color:var(--primary);margin-right:8px;}

/* ---------- 配置步骤导航（纯 CSS 面板切换） ---------- */
.config-steps{display:flex;width:100%;margin-bottom:24px;overflow:hidden;border-radius:12px;border:1px solid var(--neutral-dark);}
.config-step{flex:1;padding:.85rem 0;background:#fff;text-align:center;white-space:nowrap;transition:all .3s;font-weight:500;color:var(--primary);position:relative;font-size:14px;cursor:pointer;}
.config-step:hover{background:#F7FAFF;color:var(--primary);}
input.cs-radio{position:absolute;opacity:0;width:0;height:0;}
#cs1:checked ~ .config-steps label[for="cs1"],
#cs2:checked ~ .config-steps label[for="cs2"],
#cs3:checked ~ .config-steps label[for="cs3"],
#cs4:checked ~ .config-steps label[for="cs4"]{background:var(--primary);color:#fff;font-weight:600;box-shadow:inset 0 -2px 4px rgba(0,0,0,.1);}
.config-panels{min-height:300px;}
.config-panel{display:none;animation:fadeIn .5s ease;}
#cs1:checked ~ .config-panels #panel1,
#cs2:checked ~ .config-panels #panel2,
#cs3:checked ~ .config-panels #panel3,
#cs4:checked ~ .config-panels #panel4{display:block;}

/* ---------- 400号码输入区 ---------- */
.integrated-phone-number{background:#F7FAFF;border:1px solid #E8F3FF;border-radius:16px;padding:24px;margin-bottom:24px;}
.integrated-phone-header{display:flex;align-items:center;margin-bottom:16px;}
.integrated-phone-icon{width:36px;height:36px;border-radius:10px;background:#E8F3FF;color:var(--primary);display:flex;align-items:center;justify-content:center;margin-right:12px;}
.integrated-phone-title{font-size:16px;font-weight:600;color:var(--text-primary);}
.integrated-phone-subtitle{font-size:14px;color:var(--gray-500);margin-left:8px;font-weight:400;}
.integrated-phone-input-wrapper{position:relative;display:flex;align-items:center;}
.integrated-phone-prefix{position:absolute;left:20px;font-size:16px;font-weight:600;color:var(--gray-500);}
.integrated-phone-number-input{width:100%;padding:.85rem 20px .85rem 64px;border:2px solid var(--neutral-dark);border-radius:12px;font-size:17px;font-weight:600;letter-spacing:1px;transition:all .3s;height:58px;font-family:inherit;color:var(--text-primary);}
.integrated-phone-number-input::placeholder{color:#cacdd4;font-weight:400;}
.integrated-phone-number-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(22,93,255,.1);}
.integrated-phone-validation{margin-top:8px;font-size:13px;height:18px;display:flex;align-items:center;}
.integrated-phone-hint{margin-top:12px;padding:8px 12px;background:rgba(22,93,255,.05);border-radius:8px;font-size:13px;color:var(--gray-500);line-height:1.5;}
.integrated-phone-hint strong{color:var(--primary);}
.integrated-phone-hint p+p{margin-top:4px;}
.form-control.form-control-lg{    width: 100%;
    padding: .85rem 20px .85rem 35px;
    border: 2px solid var(--neutral-dark);
    border-radius: 12px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all .3s;
    height: 58px;
    font-family: inherit;
    color: var(--primary);}
 
.form-control.form-control-lg::placeholder{color:var(--neutral-dark); font-size:16px;font-weight:400;}   
.form-control.form-control-lg:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(22,93,255,.1);}

.integrated-phone-number .integrated-phone-validation {color:var(--danger);}

/* ---------- 面板1：通话时间 ---------- */
.minutes-display-card{background:linear-gradient(135deg,#F7FAFF 0%,#EDF5FF 100%);border-radius:16px;border:2px solid #E8F3FF;padding:24px;margin:16px 0 32px;box-shadow:0 8px 24px rgba(22,93,255,.08);position:relative;overflow:hidden;}
.minutes-display-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#165DFF,#4080FF);}
.minutes-display-card .text-center{text-align:center;}
.minutes-caption{color:var(--secondary);font-weight:500;}
.minutes-main-value{font-size:56px;font-weight:700;color:var(--primary);line-height:1;margin:8px 0;}
.minutes-sub{font-size:14px;color:var(--secondary);}
.overage-info{background-color:rgba(255,125,0,.1);border-left:4px solid var(--accent);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0;display:flex;align-items:center;justify-content:center;}
.overage-info i{color:var(--accent);margin-right:12px;font-size:20px;}
.overage-info span{font-weight:500;color:var(--accent);}
.info-note{background:rgba(22,93,255,.05);padding:16px;border-radius:8px;border:1px solid rgba(22,93,255,.1);margin-top:16px;}
.info-note h4{font-weight:500;font-size:14px;margin-bottom:8px;}
.info-note ul{font-size:12px;color:var(--text-secondary);}
.info-note li{display:flex;align-items:flex-start;}
.info-note li+li{margin-top:6px;}
.info-note li i{color:var(--primary);margin-right:8px;margin-top:2px;}

/* ---------- 面板2：绑定接听数 ---------- */
.panel2-title{font-size:18px;font-weight:500;margin-bottom:16px;}
.panel2-sub{color:var(--text-secondary);font-size:14px;margin-bottom:24px;}
.input-slider-group{display:flex;align-items:center;gap:32px;margin-bottom:16px;}
@media(max-width:768px){.input-slider-group{flex-direction:column;gap:16px;}.input-slider-group input[type="range"]{display:none;}}
.input-slider-group input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:#E8F3FF;outline:none;flex:1;}
.input-slider-group input[type="range"]::-webkit-slider-runnable-track{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;background:linear-gradient(to right,#165DFF,#165DFF var(--progress,0%),#E8F3FF var(--progress,0%));}
.input-slider-group input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--primary);cursor:pointer;border:4px solid #fff;box-shadow:0 0 0 2px #94BFFF,0 4px 12px rgba(22,93,255,.3);margin-top:-10px;}
.input-slider-group input[type="range"]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--primary);cursor:pointer;border:4px solid #fff;}
.number-input{width:120px;padding:12px 16px;border:2px solid var(--neutral-dark);border-radius:12px;font-size:17px;font-weight:600;text-align:center;font-family:inherit;color:var(--text-primary);}
.number-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(22,93,255,.1);}
.number-input-message{margin-top:16px;font-size:14px;text-align:center;color:var(--secondary);}
.number-input-message i{margin-right:4px;}

/* ---------- 单选框 / 多选框（各占一行，自适应） ---------- */
.choice-demo{display:flex;flex-direction:column;gap:16px;margin-top:16px;}
.choice-group{background:#F7FAFF;border:1px solid #E8F3FF;border-radius:12px;padding:16px 18px;}
.choice-label{display:flex;align-items:center;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:14px;}
.choice-label .cl-ico{width:24px;height:24px;border-radius:7px;background:#E8F3FF;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;font-size:12px;margin-right:10px;}
.choice-options{display:flex;flex-wrap:wrap;gap:12px;}
/* 单选胶囊 */
.choice-radio{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:1.5px solid #E2E8F0;border-radius:999px;background:#fff;font-size:14px;color:var(--text-secondary);cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 6px rgba(15,23,42,.04);}
.cr-dot{width:16px;height:16px;border-radius:50%;border:1.5px solid #C9CDD4;position:relative;flex-shrink:0;background:#fff;transition:all .25s;}
.choice-radio:hover{border-color:#94BFFF;color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 14px rgba(22,93,255,.12);}
.choice-radio:has(input:checked){background:linear-gradient(135deg,#165DFF,#4080FF);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 8px 18px rgba(22,93,255,.3);}
.choice-radio:has(input:checked) .cr-dot{background:#fff;border-color:#fff;}
.choice-radio input:checked + .cr-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--primary);}
/* 多选方块 */
.choice-check{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:1.5px solid #E2E8F0;border-radius:12px;background:#fff;font-size:14px;color:var(--text-secondary);cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 6px rgba(15,23,42,.04);}
.cc-box{width:17px;height:17px;border-radius:5px;border:1.5px solid #C9CDD4;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;transition:all .25s;}
.cc-box i{font-size:10px;color:#fff;opacity:0;transform:scale(.5);transition:all .25s;}
.choice-check:hover{border-color:#94BFFF;color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 14px rgba(22,93,255,.12);}
.choice-check:has(input:checked){background:linear-gradient(135deg,#165DFF,#4080FF);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 8px 18px rgba(22,93,255,.3);}
.choice-check input:checked + .cc-box{background:#fff;border-color:#fff;}
.choice-check input:checked + .cc-box i{opacity:1;transform:scale(1);color:var(--primary);}

/* ---------- 面板3：增值功能 ---------- */
.features-legend{display:flex;flex-wrap:wrap;gap:24px;padding:12px 16px;background:#F7FAFF;border-radius:8px;border:1px solid #E8F3FF;margin-bottom:24px;}
.status-item{display:flex;align-items:center;font-size:12px;color:var(--gray-500);}
.status-dot{width:10px;height:10px;border-radius:50%;margin-right:6px;}
.dot-optional{background:var(--primary);}
.dot-disabled{background:#C9CDD4;}
.dot-required{background:var(--secondary);}
.dot-selected{background:rgba(22,93,255,.7);}
.features-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:16px;}
@media(max-width:1200px){.features-container{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}}
@media(max-width:768px){.features-container{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}}
@media(max-width:576px){.features-container{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}}
.feature-item{position:relative;}
.feature-check{position:absolute;opacity:0;width:0;height:0;}
.feature-card{position:relative;border-radius:12px;padding:16px;cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1);border:1px solid #F0F2F5;background:#fff;height:100%;display:flex;flex-direction:column;overflow:hidden;}
.feature-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#165DFF,#4080FF);transform:scaleX(0);transition:transform .35s cubic-bezier(.34,1.56,.64,1);transform-origin:left center;}
.feature-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at top right,rgba(22,93,255,.05),transparent 40%);opacity:0;transition:opacity .35s ease;pointer-events:none;}
.feature-card:hover{border-color:#E8F3FF;box-shadow:0 8px 16px rgba(22,93,255,.1);transform:translateY(-3px);}
.feature-card:hover::before{transform:scaleX(1);}
.feature-card:hover::after{opacity:1;}
.feature-check:checked + .feature-card{border-color:var(--primary);background:#F7FAFF;}
.feature-check:checked + .feature-card::before{transform:scaleX(1);}
.feature-check:checked + .feature-card .check-circle{background:var(--primary);border-color:var(--primary);}
.feature-check:checked + .feature-card .check-icon{opacity:1;}
.feature-header{display:flex;justify-content:space-between;margin-bottom:12px;}
.feature-price{font-size:13px;font-weight:600;color:var(--primary);text-decoration:line-through dashed 1px;}
.feature-icon{width:40px;height:40px;border-radius:12px;background:#F7FAFF;color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:12px;font-size:18px;}
.feature-title{font-weight:600;font-size:14px;margin-bottom:8px;}
.feature-desc{font-size:12px;color:var(--gray-500);flex-grow:1;}
.check-circle{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--neutral-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.check-icon{color:#fff;font-size:12px;opacity:0;transition:opacity .2s;}

/* ---------- 面板4：语音导航 ---------- */
.voice-heading{font-size:18px;font-weight:500;margin-bottom:16px;}
.voice-sub{color:var(--text-secondary);font-size:14px;margin-bottom:24px;padding-bottom:16px;}
.voice-container{display:flex;gap:16px;flex-wrap:wrap;width:100%;}
@media(min-width:768px){.voice-container{flex-wrap:nowrap;}.voice-item-2{flex:0 0 calc((100% - 32px)/3);min-width:calc((100% - 32px)/3);max-width:calc((100% - 32px)/3);}}
@media(max-width:767px){.voice-item-2{flex:0 0 100%;width:100%;margin-bottom:16px;}}
.voice-radio-2{position:absolute;opacity:0;width:0;height:0;z-index:-1;}
.voice-card-2{border:2px solid var(--neutral-dark);border-radius:16px;padding:24px;cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1);height:100%;display:flex;flex-direction:column;background:#fff;position:relative;overflow:hidden;}
.voice-card-2::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;border-radius:16px 16px 0 0;background-color:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .9s cubic-bezier(.34,1.56,.64,1);z-index:2;opacity:0;}
.voice-card-2::after{content:"";position:absolute;top:0;right:0;width:120px;height:120px;border-radius:50%;transform:translate(50%,-50%);transition:all .35s ease;}
.voice-item-2:nth-of-type(1) .voice-card-2::after{background:radial-gradient(circle,rgba(0,180,42,.08),transparent 60%);}
.voice-item-2:nth-of-type(2) .voice-card-2::after{background:radial-gradient(circle,rgba(22,93,255,.08),transparent 60%);}
.voice-item-2:nth-of-type(3) .voice-card-2::after{background:radial-gradient(circle,rgba(114,46,209,.08),transparent 60%);}
.voice-radio-2:checked + .voice-card-2::before{transform:scaleX(1);opacity:1;}
.voice-item-2:nth-of-type(1) .voice-radio-2:checked + .voice-card-2{color:var(--secondary);border-color:var(--secondary);background:#F0FFF4;box-shadow:0 8px 24px rgba(0,180,42,.15);}
.voice-item-2:nth-of-type(2) .voice-radio-2:checked + .voice-card-2{color:var(--primary);border-color:var(--primary);background:#F7FAFF;box-shadow:0 8px 24px rgba(22,93,255,.15);}
.voice-item-2:nth-of-type(3) .voice-radio-2:checked + .voice-card-2{color:var(--purple);border-color:var(--purple);background:#F9F5FF;box-shadow:0 8px 24px rgba(114,46,209,.15);}
.voice-item-2:nth-of-type(1) .voice-radio-2:checked + .voice-card-2::after{background:radial-gradient(circle,rgba(0,180,42,.15),transparent 50%);width:140px;height:140px;}
.voice-item-2:nth-of-type(2) .voice-radio-2:checked + .voice-card-2::after{background:radial-gradient(circle,rgba(22,93,255,.15),transparent 50%);width:140px;height:140px;}
.voice-item-2:nth-of-type(3) .voice-radio-2:checked + .voice-card-2::after{background:radial-gradient(circle,rgba(114,46,209,.15),transparent 50%);width:140px;height:140px;}
.voice-badge-2{border-radius:12px;padding:2px 10px;font-size:12px;display:inline-block;font-weight:600;width:auto;text-align:center;position:absolute;top:25px;left:50%;transform:translateX(-50%);z-index:3;}
.voice-item-2:nth-of-type(1) .voice-badge-2{background:var(--secondary);color:#fff;}
.voice-item-2:nth-of-type(2) .voice-badge-2{background:var(--primary);color:#fff;}
.voice-item-2:nth-of-type(3) .voice-badge-2{background:var(--purple);color:#fff;}
.voice-header-2{display:flex;justify-content:flex-end;}
.voice-check-2{width:22px;height:22px;border:2px solid var(--neutral-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-left:auto;transition:all .3s;}
.voice-check-icon-2{color:#fff;font-size:14px;opacity:0;transition:opacity .3s,transform .3s;transform:scale(.8);}
.voice-radio-2:checked + .voice-card-2 .voice-check-icon-2{opacity:1;transform:scale(1);}
.voice-item-2:nth-of-type(1) .voice-radio-2:checked + .voice-card-2 .voice-check-2{background:var(--secondary);border-color:var(--secondary);box-shadow:0 0 0 4px rgba(0,180,42,.2);}
.voice-item-2:nth-of-type(2) .voice-radio-2:checked + .voice-card-2 .voice-check-2{background:var(--primary);border-color:var(--primary);box-shadow:0 0 0 4px rgba(22,93,255,.2);}
.voice-item-2:nth-of-type(3) .voice-radio-2:checked + .voice-card-2 .voice-check-2{background:var(--purple);border-color:var(--purple);box-shadow:0 0 0 4px rgba(114,46,209,.2);}
.voice-icon-2{width:48px;height:48px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;font-size:24px;margin-top:20px;transition:box-shadow .3s;}
.voice-item-2:nth-of-type(1) .voice-icon-2{background:#F0FFF4;color:var(--secondary);}
.voice-item-2:nth-of-type(2) .voice-icon-2{background:#F7FAFF;color:var(--primary);}
.voice-item-2:nth-of-type(3) .voice-icon-2{background:#F9F5FF;color:var(--purple);}
.voice-title-2{font-size:17.6px;font-weight:600;margin-bottom:10px;color:#333;text-align:left;}
.voice-price-2{font-weight:700;margin-bottom:13px;font-size:19.2px;text-align:left;}
.voice-item-2:nth-of-type(1) .voice-price-2{color:var(--secondary);}
.voice-item-2:nth-of-type(2) .voice-price-2{color:var(--primary);}
.voice-item-2:nth-of-type(3) .voice-price-2{color:var(--purple);}
.voice-desc-2{color:#666;font-size:13.6px;margin-bottom:19px;line-height:1.6;text-align:left;}
.voice-features-2{list-style:none;padding:0;margin-top:auto;color:#666;font-size:12.8px;}
.voice-features-2 li{margin-bottom:10px;display:flex;align-items:center;line-height:1.5;}
.voice-features-2 li::before{content:"•";margin-right:10px;font-size:14px;}
.voice-item-2:nth-of-type(1) .voice-features-2 li::before{color:var(--secondary);}
.voice-item-2:nth-of-type(2) .voice-features-2 li::before{color:var(--primary);}
.voice-item-2:nth-of-type(3) .voice-features-2 li::before{color:var(--purple);}

/* 选中卡图标：光晕颜色随各卡主色 + 呼吸脉动 */
.voice-item-2 .voice-radio-2:checked + .voice-card-2 .voice-icon-2{
  animation:iconPulse 3s ease-in-out infinite;}
.voice-item-2 .voice-radio-2#v-none:checked     + .voice-card-2 .voice-icon-2{--glow:0,180,42;}    /* 绿·无分机 */
.voice-item-2 .voice-radio-2#v-ivr:checked      + .voice-card-2 .voice-icon-2{--glow:22,93,255;}   /* 蓝·IVR */
.voice-item-2 .voice-radio-2#v-advanced:checked + .voice-card-2 .voice-icon-2{--glow:124,58,237;}  /* 紫·高级 */
@keyframes iconPulse{
  0%,100%{box-shadow:0 0 8px 2px  rgba(var(--glow),.30),   /* 近层：最亮最实 */
                        0 0 22px 7px  rgba(var(--glow),.14),   /* 中层：更淡更远 */
                        0 0 44px 16px rgba(var(--glow),.05);}  /* 远层：几乎透明的大范围 */
  50%{box-shadow:0 0 12px 3px rgba(var(--glow),.45),
                    0 0 32px 11px rgba(var(--glow),.20),
                    0 0 60px 22px rgba(var(--glow),.08);}
}

@media (prefers-reduced-motion:reduce){
  .voice-item-2 .voice-radio-2:checked + .voice-card-2 .voice-icon-2{
    animation:none;box-shadow:0 0 0 4px rgba(var(--glow),.12),0 0 14px rgba(var(--glow),.40);}
}


/* ---------- IVR层级（语音导航的下级分类，仅 #v4 选中时显示） ---------- */
.ivr-level-panel{display:none;position:relative;margin-top:25px;padding:20px 22px 22px;background:linear-gradient(180deg,#F7FAFF,#FBFDFF);border:1.5px solid #D6E4FF;border-radius:14px;}
.voice-container:has(#v4:checked) ~ .ivr-level-panel{display:block;animation:fadeIn .35s ease;}
.ivr-level-panel::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(45deg);width:15px;height:15px;background:#F7FAFF;border-left:1.5px solid #D6E4FF;border-top:1.5px solid #D6E4FF;border-radius:3px 0 0 0;}
.ilr-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.ilr-ico{width:38px;height:38px;border-radius:10px;background:#E8F3FF;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.ilr-tt h4{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.3;}
.ilr-tt p{font-size:12px;color:var(--text-tertiary);margin-top:2px;}
.ilr-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;}
@media(max-width:640px){.ilr-options{grid-template-columns:1fr;}}
.ilr-card{position:relative;display:flex;flex-direction:column;gap:9px;padding:16px 16px 15px;border:1.5px solid #E2E8F0;border-radius:12px;background:#fff;cursor:pointer;transition:all .25s ease;}
.ilr-card:hover{border-color:#94BFFF;box-shadow:0 6px 16px rgba(22,93,255,.1);transform:translateY(-1px);}
.ilr-card input{position:absolute;opacity:0;width:0;height:0;}
.ilr-card:has(input:checked){border-color:var(--primary);background:#F5F8FF;box-shadow:0 6px 16px rgba(22,93,255,.12);}
.ilr-row{display:flex;align-items:center;gap:10px;padding-right:26px;}
.ilr-icon{width:34px;height:34px;border-radius:9px;background:#F2F3F5;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;transition:all .25s ease;}
.ilr-card:has(input:checked) .ilr-icon{background:#E8F3FF;color:var(--primary);}
.ilr-name{font-size:15px;font-weight:600;color:var(--text-primary);}
.ilr-tag{margin-left:auto;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap;}
.ilr-tag-free{background:#E8FFEA;color:var(--secondary);}
.ilr-tag-price{background:#F7FAFF;color:var(--primary);}
.ilr-desc{font-size:12.5px;line-height:1.6;color:var(--text-tertiary);}
.ilr-card:has(input:checked) .ilr-desc{color:var(--text-secondary);}
.ilr-check{position:absolute;top:12px;right:12px;width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;opacity:0;transform:scale(.6);transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:2;}
.ilr-card:has(input:checked) .ilr-check{opacity:1;transform:scale(1);}
.voice-desc-2{color:#666;font-size:13.6px;margin-bottom:19px;line-height:1.6;text-align:left;}
.voice-features-2{list-style:none;padding:0;margin-top:auto;color:#666;font-size:12.8px;}
.voice-features-2 li{margin-bottom:10px;display:flex;align-items:center;line-height:1.5;}
.voice-features-2 li::before{content:"•";margin-right:10px;font-size:14px;}
.voice-item-2:nth-of-type(1) .voice-features-2 li::before{color:var(--secondary);}
.voice-item-2:nth-of-type(2) .voice-features-2 li::before{color:var(--primary);}
.voice-item-2:nth-of-type(3) .voice-features-2 li::before{color:var(--purple);}

/* ---------- 服务周期 ---------- */
.period-section{position:relative;padding:32px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.05);overflow:hidden;}
.period-section::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#165DFF,#00B42A);border-radius:4px 4px 0 0;}
.period-title{font-size:20px;font-weight:700;margin-bottom:24px;display:flex;align-items:center;position:relative;}
.period-title i{color:var(--primary);margin-right:8px;}
.period-sub{color:#4B5563;margin-bottom:8px;font-size:14px;}
.period-options-container{position:relative;width:100%;margin:28px 0 0;}
.period-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
@media(max-width:640px){.period-cards{grid-template-columns:1fr;gap:12px;}}
.period-card{position:relative;border-radius:16px;padding:26px 16px 22px;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);text-align:center;background:#fff;border:1.5px solid #E2E8F0;box-shadow:0 4px 12px rgba(15,23,42,.04);}
.period-card::after{content:"";position:absolute;inset:0;border-radius:16px;background:radial-gradient(circle at 100% 0%,rgba(255,255,255,.3),transparent 55%);opacity:0;transition:opacity .4s ease;pointer-events:none;}
.period-card:hover{transform:translateY(-4px);border-color:#94BFFF;box-shadow:0 12px 24px rgba(22,93,255,.12);}
.period-year{font-size:32px;font-weight:800;line-height:1.15;color:var(--text-primary);position:relative;z-index:1;transition:color .3s;letter-spacing:.5px;}
.period-year span{font-size:16px;font-weight:700;margin-left:4px;opacity:.85;}
.period-price{font-size:17px;font-weight:800;color:var(--primary);margin-top:8px;position:relative;z-index:1;transition:color .3s;}
.period-price span{font-size:12px;font-weight:500;color:var(--text-tertiary);margin-left:2px;transition:color .3s;}
.period-note{font-size:12px;color:var(--text-tertiary);margin-top:10px;padding-top:10px;border-top:1px dashed #E8ECF3;position:relative;z-index:1;transition:color .3s,border-color .3s;width:72%;margin-left:auto;margin-right:auto;}
.period-radio{position:absolute;opacity:0;width:0;height:0;}
.period-card:has(.period-radio:checked){background:linear-gradient(135deg,#165DFF,#4080FF);border-color:transparent;transform:translateY(-4px);box-shadow:0 14px 28px rgba(22,93,255,.28);}
.period-card:has(.period-radio:checked)::after{opacity:1;}
.period-card:has(.period-radio:checked) .period-year,
.period-card:has(.period-radio:checked) .period-note{color:#fff;}
.period-card:has(.period-radio:checked) .period-note{border-top-color:rgba(255,255,255,.3);}
.period-card:has(.period-radio:checked) .period-price{color:#fff;}
.period-card:has(.period-radio:checked) .period-price span{color:rgba(255,255,255,.85);}
.period-card:has(.period-radio:checked) .check-mark{opacity:1;transform:scale(1);background:#fff;color:var(--primary);box-shadow:0 2px 8px rgba(15,23,42,.2);}
.check-mark{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;opacity:0;transform:scale(.6);transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:2;}
.discount-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:12px;font-weight:700;padding:4px 14px;border-radius:999px;z-index:3;white-space:nowrap;background:linear-gradient(135deg,#FF9F43,#FF7D00);color:#fff;box-shadow:0 4px 10px rgba(255,125,0,.35);letter-spacing:.5px;}
.period-description{text-align:center;margin-top:28px;padding:16px;background:#F7FAFF;border-radius:12px;border:1px solid #E8F3FF;font-size:14px;}
.period-description p{color:var(--gray-500);line-height:1.6;}
.selected-period-text{font-weight:600;color:var(--primary);}


/* ---------- 支付方式 + 业务备注 ---------- */
.paynote-methods{display:flex;flex-direction:column;gap:12px;position:relative;}
.paynote-method{position:relative;display:flex;align-items:center;gap:14px;padding:16px 18px;border:1.5px solid #E2E8F0;border-radius:10px;background:#fff;cursor:pointer;transition:all .25s ease;}
.paynote-method:hover{border-color:#94BFFF;box-shadow:0 6px 16px rgba(22,93,255,.1);}
.paynote-method input{position:absolute;opacity:0;width:0;height:0;}
.pm-icon{width:42px;height:42px;border-radius:10px;background:#F2F3F5;color:var(--text-secondary);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;transition:all .25s ease;}
.pm-name{font-size:15px;font-weight:500;color:var(--text-primary);}
.paynote-method:has(input:checked){border-color:var(--primary);background:#F5F8FF;box-shadow:0 6px 16px rgba(22,93,255,.12);}
.paynote-method:has(input:checked) .pm-icon{background:#E8F3FF;color:var(--primary);}
.paynote-method:has(input:checked) .pm-wechat{background:#E8FFEA;color:#00B42A;}
.paynote-method:has(input:checked) .check-mark{opacity:1;transform:scale(1);}
.paynote-method .check-mark{top:50%;right:14px;margin-top:-11px;background:var(--primary);}
.paynote-textarea{display:block;width:100%;box-sizing:border-box;padding:14px 16px;border:1.5px solid #E2E8F0;border-radius:10px;background:#fff;font:inherit;font-size:14px;line-height:1.6;color:var(--text-primary);resize:vertical;min-height:96px;transition:border-color .2s,box-shadow .2s;}
.paynote-textarea::placeholder{color:#A9AEB8;}
.paynote-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,255,.12);}
.paynote-hint{margin:10px 0 0;font-size:12px;color:var(--text-tertiary);display:flex;align-items:center;gap:5px;}
.paynote-hint i{font-size:13px;}

/* ---------- 右侧价格汇总 ---------- */
.price-summary{position:relative;overflow:hidden;background:#fff;border-radius:12px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.05);}
.price-summary::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#165DFF,#00B42A);}
.summary-sticky{position:sticky;top:130px;}
.summary-header{position:relative;padding:8px 0;margin-bottom:16px;}
.summary-header h2{font-weight:600;font-size:20px;}
.summary-header h2 i{color:var(--primary);margin-right:8px;font-size:16px;}
.summary-header h3{font-weight:600;font-size:18px;}
.summary-header::after{content:"";position:absolute;bottom:0;left:-24px;right:-24px;height:1px;background:linear-gradient(90deg,transparent,var(--neutral-dark),transparent);}
.summary-table{width:100%;font-size:14px;border-collapse:collapse;}
.summary-table td{padding:10px 0;border-bottom:1px dashed #E5E6EB;vertical-align:top;}
.summary-table td:last-child{text-align:right;white-space:nowrap;font-weight:600;color:var(--primary);}
.summary-table .sum-label{color:var(--text-secondary);}
.summary-total-row td{border-bottom:none;padding-top:14px;font-weight:700;font-size:16px;}
.summary-total-row .sum-label{color:var(--text-primary);}
.summary-total-row td:last-child{color:var(--primary);font-size:18px;}
.summary-note{font-size:12px;color:var(--text-secondary);margin:4px 0 0 6px;}
.included-heading{color:var(--text-secondary);font-weight:500;margin-bottom:12px;font-size:12px;}
.included-features{max-height:140px;overflow-y:auto;}
.feature-tag{display:inline-flex;align-items:center;background:#F0F7FF;color:var(--primary);font-size:12px;padding:2px 8px;border-radius:12px;margin:0 4px 6px 0;transition:all .2s;}
.feature-tag:hover{background:#E8F3FF;transform:translateY(-1px);}
.feature-tag i{margin-right:4px;font-size:12px;}
.summary-highlight{position:relative;background:linear-gradient(135deg,#F0F7FF 0%,#EDFFF3 100%);border-radius:12px;padding:16px;margin-top:24px;border:1px solid rgba(22,93,255,.1);}
.summary-highlight-inner{display:flex;align-items:flex-start;}
.highlight-ico{width:24px;height:24px;border-radius:50%;background:rgba(0,180,42,.1);display:flex;align-items:center;justify-content:center;color:var(--secondary);margin-right:12px;flex-shrink:0;margin-top:2px;}
.summary-highlight h4{font-weight:500;font-size:14px;margin-bottom:4px;}
.summary-highlight p{font-size:12px;color:var(--text-secondary);}
.summary-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding-bottom:58px;}
.btn-primary{background:var(--primary);color:#fff;font-weight:600;padding:12px 24px;border-radius:8px;transition:all .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(22,93,255,.2);width:100%;border:none;cursor:pointer;font-size:14px;font-family:inherit;}
.btn-primary:hover{background:var(--primary-dark);box-shadow:0 6px 16px rgba(22,93,255,.3);transform:translateY(-2px);}
.btn-secondary{background:#fff;border:1px solid var(--primary);color:var(--primary);font-weight:600;padding:12px 24px;border-radius:8px;transition:all .3s;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;font-size:14px;font-family:inherit;}
.btn-secondary:hover{background:#F7FAFF;transform:translateY(-2px);}
.price-summary .small.text-danger {color:var(--danger);font-size:14px;}

/* ---------- 服务预览：订单信息块 ---------- */
.order-info-box{margin-bottom:18px;padding:14px 16px;background:#F7FAFF;border:1px solid #E8F3FF;border-radius:10px;}
.oi-cat{font-size:12px;color:var(--text-tertiary);}
.oi-name-row{display:flex;align-items:center;gap:10px;margin-top:4px;flex-wrap:wrap;}
.oi-name{font-size:19px;font-weight:800;color:var(--text-primary);}
.oi-acts{display:inline-flex;gap:6px;}
.oi-act{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:400;padding:3px 9px;border-radius:999px;text-decoration:none;transition:all .2s ease;}
.oi-act i{font-size:10px;}
.oi-edit{background:#E8F3FF;color:var(--primary);}
.oi-edit:hover{background:var(--primary);color:#fff;}
.oi-del{background:#FFECE8;color:var(--danger);}
.oi-del:hover{background:var(--danger);color:#fff;}
.oi-notice{margin:10px 0 0;font-size:12px;color:var(--secondary);display:flex;align-items:center;gap:5px;}
.oi-notice i{font-size:12px;}
/* ---------- 优惠码（纯 CSS 状态切换：默认/有效/无效/已应用） ---------- */
.promo-box{margin-top:16px;}
.promo-row{display:flex;gap:8px;}
.promo-input{flex:1;min-width:0;padding:10px 14px;border:1.5px solid var(--neutral-dark);border-radius:8px;font-size:14px;font-family:inherit;color:var(--text-primary);background:#fff;outline:none;transition:all .25s;}
.promo-input::placeholder{color:#A8AEB8;}
.promo-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(22,93,255,.1);}
.promo-input:valid:not(:placeholder-shown){box-shadow:0 0 0 3px rgba(0,180,42,.08);}
.promo-input:invalid:not(:placeholder-shown){border-color:var(--danger);box-shadow:0 0 0 3px rgba(245,63,63,.08);}
.promo-btn{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:8px;background:var(--primary);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .25s;}
.promo-btn:hover{background:var(--primary-dark);}
.promo-entry:has(.promo-input:invalid:not(:placeholder-shown)) .promo-btn{opacity:.45;}
/*.promo-hint{display:none;align-items:center;gap:6px;font-size:12px;margin-top:8px;}
.hint-ok{color:var(--secondary);}
.hint-bad{color:var(--danger);}
.promo-entry:has(.promo-input:valid:not(:placeholder-shown)) .hint-ok{display:flex;}
.promo-entry:has(.promo-input:invalid:not(:placeholder-shown)) .hint-bad{display:flex;}*/

.promo-hint{display:none;align-items:center;gap:6px;font-size:12px;margin-top:8px;}
.promo-hint:not(:empty){display:flex;}      /* 有内容就显示，JS 说了算 */
.promo-hint.hint-ok{color:var(--secondary);}
.promo-hint.hint-bad{color:var(--danger);}
/* 输入框边框跟随校验状态（JS 已在切 hint-bad / hint-ok，无需改 JS） */
.promo-input{border:1px solid #d9dee8;transition:border-color .2s,box-shadow .2s;}
.promo-entry:has(.promo-hint.hint-bad) .promo-input{
  border-color:var(--danger) !important;}
.promo-entry:has(.promo-hint.hint-bad) .promo-input:focus{
  box-shadow:0 0 0 3px rgba(245,63,63,.12);}
.promo-entry:has(.promo-hint.hint-ok) .promo-input{
  border-color:var(--secondary) !important;}

.promo-applied-box{display:none;align-items:flex-start;gap:8px;background:rgba(0,180,42,.08);border:1px solid rgba(0,180,42,.25);border-radius:8px;padding:10px 12px;font-size:13px;color:#0A8A1E;}
.promo-applied-box i{margin-top:2px;}
.promo-applied-box b{font-weight:700;}
.promo-remove{margin-left:auto;color:var(--text-tertiary);font-size:12px;cursor:pointer;text-decoration:underline;flex-shrink:0;white-space:nowrap;transition:color .2s;}
.promo-remove:hover{color:var(--danger);}
/* 已应用态：隐藏输入区，显示成功框、折扣行与折后总价 */
#promo-applied:checked ~ .config-layout .promo-entry{display:none;}
#promo-applied:checked ~ .config-layout .promo-applied-box{display:flex;}
.promo-discount-row{display:none;}
#promo-applied:checked ~ .config-layout .promo-discount-row{display:table-row;}
.promo-discount-row td{color:var(--secondary);}
.promo-discount-row td:last-child{color:var(--secondary);}
.total-disc{display:none;}
#promo-applied:checked ~ .config-layout .total-orig{display:none;}
#promo-applied:checked ~ .config-layout .total-disc{display:inline;color:var(--secondary);}
/* 底部合计条价格联动 */
.mobile-bottom-total .price-disc{display:none;}
#promo-applied:checked ~ .mobile-bottom-total .price-orig{display:none;}
#promo-applied:checked ~ .mobile-bottom-total .price-disc{display:inline;}

/* 原价划线（显隐由 JS 控制，不用管 display） */
.total-orig{text-decoration:line-through;color:var(--text-tertiary);
  font-size:13px;font-weight:400;margin-right:6px;}

/* 优惠码生效：折后总价变绿 */
body:has(#promo-applied:checked) #quoteTotal{color:var(--secondary);}





/* ---------- 移动端底部合计条 ---------- */
.mobile-bottom-total{display:none;align-items:center;gap:10px;position:fixed;width:100%;left:0;bottom:0;padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--neutral-dark);box-shadow:0 -4px 20px rgba(15,23,42,.06);z-index:99999;}
@media(max-width:1023px){.mobile-bottom-total{display:flex;}}
.mobile-bottom-total .total{display:flex;flex-direction:column;line-height:1.3;flex-shrink:0;}
.mobile-bottom-total .total-label{font-size:11px;font-weight:500;color:var(--text-tertiary);}
.mobile-bottom-total .total .price{font-size:20px;font-weight:800;color:var(--danger);}
.mobile-bottom-total .btn-primary{flex:1;justify-content:center;min-width:0;max-height:none;border-radius:10px;padding:.8rem 1rem;font-size:14px;box-shadow:0 4px 12px rgba(22,93,255,.25);}
@media(max-width:360px){.mobile-bottom-total{padding:.65rem .9rem;gap:8px;}.mobile-bottom-total .btn-primary{font-size:13px;padding:.7rem .8rem;}}

/* ---------- 移动端服务预览弹出（纯 CSS checkbox 开关） ---------- */
.summary-close{display:none;}
.total-summary-btn{display:none;}
@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media(max-width:1023px){
  /* 默认隐藏服务预览卡 */
  .config-layout .col-right .price-summary{display:none;}
  /* 勾选后以底部浮层弹出 */
  #summary-toggle:checked ~ .config-layout .col-right .price-summary{
    display:block;position:fixed;left:12px;right:12px;
    bottom:calc(72px + env(safe-area-inset-bottom));z-index:100000;
    max-height:65vh;overflow-y:auto;
    box-shadow:0 -10px 40px rgba(0,0,0,.2);
    animation:slideUp .3s ease;
  }
  /* 浮层右上角关闭按钮：顶部与"服务预览"标题对齐，右侧与表格数字对齐（相对 summary-header 定位） */
  .summary-close{display:flex;position:absolute;top:6px;right:0;width:26px;height:26px;align-items:center;justify-content:center;border-radius:50%;background:var(--neutral);color:var(--text-secondary);cursor:pointer;font-size:13px;z-index:5;transition:all .2s;}
  .summary-close:hover{background:var(--neutral-dark);color:var(--text-primary);}
  /* 移动端底栏已有加入购物车，弹层内隐藏 */
  .config-layout .col-right .price-summary .summary-actions{display:none;}
  /* 底部合计条中的"服务预览"按钮 */
  .total-summary-btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--primary);color:var(--primary);border-radius:10px;padding:9px 12px;font-size:13px;font-weight:500;cursor:pointer;flex-shrink:0;white-space:nowrap;background:#fff;}
  .total-summary-btn:active{background:#F7FAFF;}
}

/* ============ cart3 付款页（body.page-pay） ============ */
.page-pay .page-main{padding:32px 16px;}
@media(min-width:640px){.page-pay .page-main{padding-left:24px;padding-right:24px;}}
@media(min-width:1024px){.page-pay .page-main{padding-left:32px;padding-right:32px;}}
@media(min-width:768px){.page-pay .panel{padding:32px;}}
.page-pay .panel-title{font-size:24px;font-weight:700;margin-bottom:24px;}
.page-pay .panel-title i{margin-right:12px;}
.panel-inner{max-width:960px;margin:0 auto;}

/* 返回上一步 */
.back-link{text-align:center;margin-bottom:28px;}
.back-link a{color:var(--primary);font-size:14px;text-decoration:underline;transition:color .2s;}
.back-link a:hover{color:var(--primary-dark);}
.back-link a i{margin-right:4px;font-size:12px;}

/* ---------- 订单支付卡片（同 cart2 高亮卡：4px 蓝色渐变顶条 + 浅蓝渐变底，无描边） ---------- */
.pay-card{
  max-width:760px;margin:0 auto;border:none;border-radius:16px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#F7FAFF 0%,#EDF5FF 100%);
  box-shadow:0 8px 24px rgba(22,93,255,.08);padding:32px 24px;
}
.pay-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#165DFF,#4080FF);}
@media(min-width:640px){.pay-card{padding:36px 40px;}}
.pay-title{font-size:22px;font-weight:700;text-align:center;color:var(--text-primary);}
.pay-order{font-size:13px;color:var(--text-tertiary);text-align:center;margin-top:16px;}
.pay-order span{color:var(--text-secondary);font-weight:500;}
.pay-amount{font-size:40px;font-weight:800;color:var(--danger);text-align:center;margin:8px 0 12px;line-height:1.2;}
.pay-status{display:flex;justify-content:center;margin-bottom:28px;}
.status-pill{display:inline-flex;align-items:center;gap:6px;background:#FFF7E8;border:1px solid #FFCF8B;color:var(--accent);font-size:12px;font-weight:600;padding:4px 14px;border-radius:999px;}

/* ---------- 支付方式（纯 CSS radio 选中态） ---------- */
.pay-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;}
.pay-method input[type="radio"]{position:absolute;opacity:0;width:0;height:0;}
.pay-method label{
  display:flex;align-items:center;gap:12px;padding:16px 18px;border:1px solid var(--neutral-dark);border-radius:10px;
  cursor:pointer;transition:all .25s;font-size:15px;color:var(--text-primary);background:#fff;
}
.pay-method label:hover{border-color:rgba(22,93,255,.5);box-shadow:0 4px 12px rgba(22,93,255,.1);transform:translateY(-1px);}
.pay-method .fake-dot{
  width:18px;height:18px;border-radius:50%;border:1px solid #C9CDD4;flex-shrink:0;position:relative;transition:all .2s;background:#fff;
}
.pay-method .pm-name{font-weight:500;}
.pay-method .pm-balance{color:var(--text-tertiary);font-size:14px;}
.pay-method .pm-balance b{color:var(--text-primary);font-weight:600;}
.pay-method input:checked + label{border-color:var(--primary);background:#fff;}
.pay-method input:checked + label .fake-dot{border-color:var(--primary);}
.pay-method input:checked + label .fake-dot::after{
  content:"";position:absolute;inset:3px;border-radius:50%;background:var(--primary);
}

/* ---------- 支付按钮 ---------- */
.pay-actions{display:flex;flex-direction:column;gap:12px;}
.btn-pay{
  display:flex;align-items:center;justify-content:center;width:100%;padding:13px 0;border-radius:8px;border:none;
  background:var(--primary);color:#fff;font-size:15px;font-weight:600;transition:all .3s;
  box-shadow:0 4px 6px -1px rgba(22,93,255,.3);
}
.btn-pay:hover{background:rgba(22,93,255,.9);transform:translateY(-2px);box-shadow:0 10px 15px -3px rgba(22,93,255,.4);}
.btn-later{
  display:flex;align-items:center;justify-content:center;width:100%;padding:12px 0;border-radius:8px;
  background:#fff;border:1px solid var(--neutral-dark);color:var(--text-secondary);font-size:14px;transition:all .3s;
}
.btn-later:hover{border-color:var(--primary);color:var(--primary);background:#F7FAFF;}

/* ---------- 支付说明 ---------- */
.pay-notes{margin-top:24px;background:var(--neutral);border-radius:10px;padding:16px;font-size:13px;color:var(--text-secondary);line-height:1.8;}
.pay-notes p{display:flex;align-items:flex-start;}
.pay-notes p+p{margin-top:4px;}
.pay-notes i{color:var(--primary);margin-right:8px;margin-top:4px;font-size:13px;flex-shrink:0;}
@media(max-width:768px){
  .pay-card{padding:28px 16px;}
  .pay-amount{font-size:34px;}
}