/* ═══════════════════════════════════════════════════════════════
   ui-refresh.css — 报价工具·现代清爽视觉精修层
   ---------------------------------------------------------------
   · 定位：在 styles.css / pkg-calc.css / joint-calc.css / SHELL 内联
     之上做「加法式」精修，只调质感（色彩层次/阴影/圆角/聚焦/字距/
     表格交互），不改任何布局、骨架、类名与 JS 依赖。
   · 遵循：保留品牌橙粉渐变与暖色基调；深色模式照常适配。
   · 回退：整文件删除 + index.html 移除该 link 即可完全还原。
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* 新增质感 token（浅色模式） */
  --ui-bg: radial-gradient(1200px 600px at 12% -8%, #fff7f0 0%, rgba(255,247,240,0) 55%),
           radial-gradient(1000px 520px at 108% 4%, #fff1f2 0%, rgba(255,241,242,0) 52%),
           #f6f2f3;
  --ui-panel-border: rgba(225,29,72,.10);
  --ui-panel-shadow: 0 1px 2px rgba(16,24,40,.04), 0 12px 32px -14px rgba(225,29,72,.16);
  --ui-card-hover-shadow: 0 2px 4px rgba(16,24,40,.05), 0 20px 44px -18px rgba(225,29,72,.24);
  --ui-ring: 0 0 0 3px rgba(225,29,72,.14);
  --ui-ring-accent: 0 0 0 3px rgba(249,115,22,.16);
  --ui-th-bg: #fbf7f6;
  --ui-hover-row: #fff8f6;
  --ui-num: "SFMono-Regular","SF Mono","JetBrains Mono",Consolas,"Liberation Mono",monospace;
}

/* ── 全局渲染：字体平滑 + 数字等宽对齐 ── */
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
/* 金额/积分/盒数等数字使用等宽，避免跳行抖动（覆盖各处） */
.mc-price,.mc-original,.mc-bonus,.mc-discount,
.kpi .val,.mall-points b,.pts-stepper em,
.price,.pkg .price,.lb-gmv,.lb-pct,.col-value,
.fu-metric-value,.rf-metric,.jt-stat .b,.cb-metric .b,
.product-table .pos-price,.combo-summary b,.package-card-price,
.mat-card .pts,.mat-card .price,
.mc-price,.month-table td
{ font-feature-settings:"tnum" 1,"lnum" 1; }
.month-table td,.mc-price,.mc-original,.mc-bonus,.mc-discount{
  font-variant-numeric:tabular-nums;
}

/* ── 工作台背景：柔和的暖色渐变（替代纯灰 #f4f5f7） ── */
body:not(.shell-ready) .app{background:var(--ui-bg);}
.shell .workspace{background:var(--ui-bg);}

/* ── 面板卡片：统一圆角 + 柔和描边 + 双层阴影 ── */
.panel{
  border-color:var(--ui-panel-border);
  border-radius:16px;
  box-shadow:var(--ui-panel-shadow);
  transition:box-shadow .18s ease,border-color .18s ease;
}
/* 补差/联报作用域面板（pkg-calc.css 定义，覆盖其阴影） */
:is(#panel-upgrade,#panel-combo) .panel{
  border-color:var(--ui-panel-border);
  border-radius:14px;
  box-shadow:var(--ui-panel-shadow);
}

/* ── 页签 / 分类胶囊：更细腻的 hover 与选中态 ── */
.cat-btn{border-radius:999px;transition:all .16s ease;}
.cat-btn:hover{border-color:#fdc8d0;color:var(--brand);background:#fff6f6;}
.cat-btn.active{
  background:linear-gradient(135deg,#f97316,#e11d48);
  color:#fff;border-color:transparent;
  box-shadow:0 6px 16px -6px rgba(225,29,72,.5);
}
.month-subtab,.qt-tab,.package-tab,.segment,.segments,.seg-view-btn,
.cb-tab,.fu-view-switch,.qt-board-tab{border-radius:999px;transition:all .15s ease;}
.seg-view-btn.active,.qt-tab.active,.package-tab.active,.cb-tab.active,
.fu-view-switch .active,.qt-board-tab.active{
  background:linear-gradient(135deg,#f97316,#e11d48);
  box-shadow:0 5px 14px -6px rgba(225,29,72,.5);
}
/* 2026-09-29：上面这条给 .qt-tab.active 上了橙色渐变底，但 styles.css 给它的字色是
   `color:var(--brand)`(#e11d48) —— 渐变右端正好也是 #e11d48，那一段文字 1:1 完全看不见。
   浅色 / 暗色都存在（扫描器 verify-output/scan-btn-ink.js 两主题都能复现）。
   这里补白字，与同组其它胶囊（.cat-btn.active / .fu-view-switch .active 等）保持一致。 */
.qt-tab.active{color:#fff;}

/* ── 输入控件：统一聚焦环 + 更柔的描边 ── */
input[type="number"],input[type="text"],input[type="password"],
input[type="search"],select,textarea{
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
input[type="number"]:focus,select:focus,
input[type="text"]:focus,input[type="password"]:focus,
input[type="search"]:focus,textarea:focus{
  border-color:var(--brand);
  box-shadow:var(--ui-ring);
}
:is(#panel-upgrade,#panel-combo) .field input,
:is(#panel-upgrade,#panel-combo) .field select,
:is(#panel-upgrade,#panel-combo) .product-table input{
  border-radius:9px;
}
:is(#panel-upgrade,#panel-combo) .field input:focus,
:is(#panel-upgrade,#panel-combo) .field select:focus,
:is(#panel-upgrade,#panel-combo) .product-table input:focus{
  box-shadow:var(--ui-ring);
}

/* ── 主按钮：渐变 + 投影 + 柔和上浮 ── */
.btn{
  background:linear-gradient(135deg,#f97316,#e11d48);
  box-shadow:0 8px 20px -8px rgba(225,29,72,.6);
  transition:all .16s ease;
}
.btn:hover{
  background:linear-gradient(135deg,#ea580c,#be123c);
  transform:translateY(-1px);
  box-shadow:0 12px 26px -10px rgba(225,29,72,.66);
}
.btn:active{transform:translateY(0) scale(.99);}
.btn.ghost{
  background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);
}
.btn.ghost:hover{background:#fff7f6;box-shadow:inset 0 0 0 1px #fdc8d0;color:var(--brand);}
.primary,.login-submit,.combo-role-btn.active,.cb-role-btn.active,
.intro-save,.template-save,.mat-save,.pkg-save{
  background:linear-gradient(135deg,#f97316,#e11d48)!important;
  box-shadow:0 8px 20px -8px rgba(225,29,72,.6)!important;
  transition:all .16s ease!important;
}
.primary:hover,.login-submit:hover,.combo-role-btn.active:hover,
.cb-role-btn.active:hover,.intro-save:hover,.template-save:hover,
.mat-save:hover,.pkg-save:hover{
  background:linear-gradient(135deg,#ea580c,#be123c)!important;
  transform:translateY(-1px);
}

/* ── 次要按钮 / 复制卡：描边态更精致 ── */
.copy-btn,.copy-mini,.seg-card-actions button,.template-action-btn,
.seg-view-btn{border-radius:9px;transition:all .15s ease;}
.copy-btn:hover,.copy-mini:hover,.template-action-btn:hover{
  border-color:var(--brand);color:var(--brand);
  box-shadow:inset 0 0 0 1px rgba(225,29,72,.35);
}

/* ── 积分芯片（复用横排选择）：选中态加高亮描边 ── */
.pts-chip{border-radius:11px;transition:all .14s ease;}
.pts-chip:hover{border-color:#fdc8d0;box-shadow:0 3px 10px -4px rgba(225,29,72,.16);}
.pts-chip.active{
  border-color:var(--brand);
  background:linear-gradient(135deg,#fff7ed,#fff1f2);
  box-shadow:0 5px 14px -7px rgba(225,29,72,.5);
}
.pts-chip.active .pts-pts{color:var(--brand-deep);}
.pts-stepper button{border-radius:6px;transition:all .14s ease;}
.pts-stepper button:hover{border-color:var(--brand);color:var(--brand);}

/* ── 表格：表头 sticky + 分区着色 + 行 hover ── */
.month-table,.product-table,.rf-table,.fu-table,.cb-product-table,
.col-chart-panel .chart-table{
  border-radius:14px;overflow:hidden;border-color:var(--ui-panel-border);
}
.month-table th,.product-table th,.rf-table th,.fu-table th,.cb-pt-head{
  background:var(--ui-th-bg);
  position:sticky;top:0;z-index:2;
  font-weight:700;color:#5b4a4a;
}
.month-table td,.product-table td,.rf-table td,.fu-table td,.cb-pt-row{
  transition:background .14s ease;
}
.month-table tbody tr:hover td,
.product-table tbody tr:hover td,
.rf-table tbody tr:hover td,
.fu-table tbody tr:hover td,
.cb-pt-row:hover td{
  background:var(--ui-hover-row);
}
/* 表头排序/指北箭头保留 */
.month-table th:first-child,.product-table th:first-child,
.rf-table th:first-child,.fu-table th:first-child{border-radius:0;}

/* ── 横屏分段卡片：hover 轻微上浮 ── */
.seg-card,.jt-plan-preview,.cb-pkg-card,.package-card,.mall-card,
.gallery-card,.kpi,.card,.mat-card,.intro-card,.template-card{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.seg-card:hover,.jt-plan-preview:hover,.cb-pkg-card:hover,
.package-card:hover,.mat-card:hover,.intro-card:hover,.template-card:hover{
  transform:translateY(-3px);
  border-color:#fdc8d0;
  box-shadow:var(--ui-card-hover-shadow);
}
.kpi:hover,.card:hover{
  box-shadow:var(--ui-card-hover-shadow);
}

/* ── KPI / 指标卡：左上角色条更鲜明 ── */
.kpi{border-color:var(--ui-panel-border);border-radius:16px;}
.kpi .val{letter-spacing:-.5px;font-weight:750;}

/* ── 弹窗（积分商城/积分兑换/素材预览）── */
.pts-modal,.mat-modal,.benefit-picker{
  border-radius:18px;
  box-shadow:0 1px 2px rgba(16,24,40,.06),0 40px 90px -24px rgba(15,23,42,.45);
}
.pts-modal-mask,.mat-modal-mask{backdrop-filter:blur(3px) saturate(120%);}
.pts-modal-head,.mat-modal-head,.benefit-picker .head{
  border-bottom:1px solid var(--ui-panel-border);
  background:linear-gradient(135deg,#fff7ed,#fff1f2);
  border-radius:18px 18px 0 0;
}
.modal-beta-panel,.pts-modal-ok,.mat-modal-ok{
  background:linear-gradient(135deg,#f97316,#e11d48);
  box-shadow:0 8px 20px -8px rgba(225,29,72,.6);
}
.modal-beta-panel:hover,.pts-modal-ok:hover,.mat-modal-ok:hover{
  background:linear-gradient(135deg,#ea580c,#be123c);
}

/* ── 侧栏（SHELL 内联定义，此处精修 active/悬浮态）── */
.sidebar-btn{transition:all .16s ease;}
.sidebar-btn:hover{background:#fff6f4;color:var(--brand);}
.sidebar-btn.active{
  background:linear-gradient(135deg,#fff7ed,#fff1f2);
  border-color:rgba(249,115,22,.22);
}
.body.shell-ready .sidebar-btn.active::before{opacity:1;}

/* ── 顶栏 / 用户胶囊：更柔的投影 ── */
.topbar{box-shadow:0 1px 0 rgba(225,29,72,.06),0 12px 30px -18px rgba(225,29,72,.18);}
.topbar-title{letter-spacing:-.3px;}
.topbar-user,.topbar-exit{transition:all .16s ease;}

/* ── 滚动条：细而协调（仅浅色模式）─ */
@media (pointer:fine){
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-thumb{background:#e7d6d6;border-radius:999px;border:2px solid transparent;background-clip:content-box;}
  ::-webkit-scrollbar-thumb:hover{background:#d9bebe;background-clip:content-box;}
  ::-webkit-scrollbar-track{background:transparent;}
}

/* ── 现代清爽细节：区块标题字距 + 折叠/收起按钮 ── */
.section-title,.section-sub,.panel-title,.jt-panel-title,.jt-section-title,
.cb-section-title,.fu-section-title,.rf-section-title{margin-bottom:2px;}
.section-title{letter-spacing:-.3px;}
.section-sub,.jt-panel-title span,.cb-section-desc{color:#8a7780;}
.month-section-title,.fu-section-title,.rf-section-title{border-left:3px solid #e11d48;}

/* ── 登录卡片：保持渐变，微调圆角与投影 ── */
.login-card{border-radius:20px;box-shadow:0 1px 2px rgba(16,24,40,.06),0 0 0 1px rgba(225,29,72,.06),0 32px 80px -24px rgba(225,29,72,.28);}
.login-submit{border-radius:13px;}

/* ═══════════════ 深色模式适配：在既有 dark 规则上补充 ═══════════════ */
body[data-theme="dark"]{
  --ui-bg: radial-gradient(1100px 600px at 12% -8%, rgba(249,115,22,.10) 0%, rgba(249,115,22,0) 55%),
            radial-gradient(1000px 520px at 108% 4%, rgba(225,29,72,.10) 0%, rgba(225,29,72,0) 52%),
            #0a0f1c;
  --ui-panel-border: rgba(148,163,184,.16);
  --ui-panel-shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -14px rgba(0,0,0,.5);
  --ui-card-hover-shadow: 0 2px 4px rgba(0,0,0,.45), 0 20px 44px -18px rgba(225,29,72,.3);
  --ui-th-bg: rgba(148,163,184,.10);
  --ui-hover-row: rgba(251,113,133,.08);
}
body[data-theme="dark"]:not(.shell-ready) .app,
body[data-theme="dark"] .shell .workspace{background:var(--ui-bg);}
body[data-theme="dark"] .panel,
:is(#panel-upgrade,#panel-combo) .panel{
  border-color:var(--ui-panel-border);
  box-shadow:var(--ui-panel-shadow);
}
body[data-theme="dark"] .cat-btn.active,
body[data-theme="dark"] .seg-view-btn.active,
body[data-theme="dark"] .qt-tab.active,
body[data-theme="dark"] .package-tab.active,
body[data-theme="dark"] .cb-tab.active,
body[data-theme="dark"] .fu-view-switch .active,
body[data-theme="dark"] .qt-board-tab.active{box-shadow:0 5px 16px -6px rgba(225,29,72,.6);}
body[data-theme="dark"] .month-table th,
body[data-theme="dark"] .product-table th,
body[data-theme="dark"] .rf-table th,
body[data-theme="dark"] .fu-table th,
body[data-theme="dark"] .cb-pt-head{color:#cdd5e0;background:rgba(148,163,184,.08);}
body[data-theme="dark"] .month-table tbody tr:hover td,
body[data-theme="dark"] .product-table tbody tr:hover td,
body[data-theme="dark"] .rf-table tbody tr:hover td,
body[data-theme="dark"] .fu-table tbody tr:hover td,
body[data-theme="dark"] .cb-pt-row:hover td{background:var(--ui-hover-row);}
body[data-theme="dark"] .sidebar-btn.active{
  background:linear-gradient(135deg,rgba(249,115,22,.18),rgba(225,29,72,.22));
  border-color:rgba(251,146,60,.4);
}
body[data-theme="dark"] .kpi .val{letter-spacing:-.5px;}
body[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#2a3140;background-clip:content-box;}

/* ═══ 2026-09-09 目标套餐档位卡紧凑化（方案A：横排小卡，补差/免单 与 双品联报 同步生效） ═══ */
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-list{
  grid-template-columns:repeat(auto-fill,minmax(164px,1fr))!important;
  gap:8px!important;
}
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-card{
  aspect-ratio:auto!important;
  min-height:54px!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:none!important;
  align-content:center!important;
  gap:10px!important;
  padding:7px 10px!important;
  border-radius:8px!important;
}
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-card-main{
  gap:2px!important;
  align-content:center!important;
  min-width:0!important;
}
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-card-title{
  font-size:13.5px!important;
  line-height:1.3!important;
  letter-spacing:.2px!important;
  padding-right:0!important;
  color:#111827!important;
  font-weight:700!important;
}
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-card-meta{
  display:none!important;
  min-height:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  -webkit-line-clamp:initial!important;
  font-size:11px!important;
  line-height:1.4!important;
  margin:0!important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .target-package-panel .package-card-title{
  color:#f8fafc!important;
}
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-card-price{
  align-self:center!important;
  font-size:13.5px!important;
  white-space:nowrap!important;
  padding-right:24px!important;
}
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-card-badge{
  top:4px!important;right:4px!important;bottom:auto!important;left:auto!important;
  min-width:0!important;min-height:0!important;
  padding:2px 6px!important;
  border-bottom-left-radius:6px!important;
  font-size:9px!important;line-height:1.2!important;
}
:is(#panel-upgrade,#panel-combo) .target-package-panel .package-card-check{
  right:6px!important;bottom:6px!important;
  width:16px!important;height:16px!important;
  font-size:10px!important;
}

/* ═══════════════ 顶部「今日营业中」呼吸灯 → 绿色 ═══════════════ */
.topbar-pill{color:#15803d;}
body[data-theme="dark"] .topbar-pill{color:#4ade80;}
.topbar-pill::before{
  background:#22c55e;
  box-shadow:0 0 0 4px rgba(34,197,94,.14),0 0 14px rgba(34,197,94,.5);
}
@keyframes statusGlowPulse{
  0%,100%{transform:scale(.94);box-shadow:0 0 0 4px rgba(34,197,94,.12),0 0 12px rgba(34,197,94,.45);}
  50%{transform:scale(1.18);box-shadow:0 0 0 7px rgba(34,197,94,.16),0 0 22px rgba(34,197,94,.7);}
}

/* ═══════════════ 顶部导航：常驻固定（2026-09-25 定版，取代原「自动隐藏」） ═══════════════
   原机制：默认 transform:translateY(-105%) + opacity:0 + visibility:hidden + pointer-events:none，
   鼠标滑到屏幕最上方才由 JS 加 body.topbar-show 唤出。
   2026-09-22 用户把口径改成「顶栏常驻悬浮」后，这套规则并没有删，只是被文件末尾悬浮段的一串
   !important 强行压住 —— 属于「两套互斥规则打架」，一旦 CSS 版本不一致（浏览器缓存陈旧、
   部署未更新、或新增规则覆盖不全），顶栏就会退回「隐藏 → 随滚动滑走」的状态。
   用户 2026-09-25 反馈的「向下滑动时导航栏也跟着动」正是这个症状。
   → 整体删除，顶栏不再有任何位移 / 隐藏声明，position:fixed 由 styles 基础规则 + 末尾悬浮段保证。
   ⚠️ body.topbar-auto 这个类名仍由 index.html 末段 JS 添加：它驱动下方 .shell::before 遮缝条
      与 .workspace 的 padding-top 让位，**不要一并删掉**。
   要回退到自动隐藏：从 git 历史取回本段 + index.html 末段的 mousemove 监听即可。 */
body.topbar-auto .workspace{padding-top:96px;}
@media (prefers-reduced-motion:reduce){
  body.topbar-auto .topbar,body.topbar-auto .workspace{transition:none!important;}
}

/* ═══ 2026-09-09 首笔订单详情 与 目标套餐 等宽并排（宽屏双列布局下，两框一样大） ═══ */
@media (min-width:1281px){
  :is(#panel-upgrade,#panel-combo) .shell.pkg-shell{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  :is(#panel-upgrade,#panel-combo) .pkg-shell .first-order-panel,
  :is(#panel-upgrade,#panel-combo) .pkg-shell .target-package-panel{
    align-self:stretch!important;
  }
  :is(#panel-upgrade,#panel-combo) .pkg-shell .target-package-panel{
    display:flex!important;
    flex-direction:column!important;
  }
  :is(#panel-upgrade,#panel-combo) .pkg-shell .target-package-panel .package-list{
    flex:1 1 auto!important;
    align-content:flex-start!important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   ═══ 2026-09-09 退款计算：订单编号输入框统一 + 区块标题去左装饰条 ═══
   · 订单编号是 input[type=text]，未命中全局 input[type=number]/select 样式 → 补齐
   · 「订单信息 / 实时结果 / 产品扣费 / 赠品折算」标题左侧 3px 橙竖条去掉（仅退款面板）
   · 平台规则 / 满额阈值 提示卡、右侧实时结果卡顶部橙条按需保留
   · 回退：删除本块即可
   ═════════════════════════════════════════════════════════════════════ */
#panel-refund .rf-form input[type="text"]{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:15px;
  font-family:inherit;
  background:#fff;
  color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(16,24,40,.04);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
#panel-refund .rf-form input[type="text"]::placeholder{color:#9ca3af;}
#panel-refund .rf-form input[type="text"]:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:var(--ui-ring);
}
#panel-refund .rf-section-title{border-left:none!important;}

/* ═════════════════════════════════════════════════════════════════════
   ═══ 2026-09-09 深色模式整体修复：工作台可操作面板统一变暗 ═══
   覆盖：套餐管理(month) / 退款计算(refund) / 回访日期(followup) /
        素材库(materials) / 胶原(collagen)
   说明：补差(upgrade)/报ABC(joint)/双品联报(combo) 已有独立深色适配，不重复覆盖。
   手段：面板内作用域 CSS 变量 → 内部 var(--ink/--ink2/--soft2/…)
        自动切换亮色文字；再把字面量浅色表面(#fff/#f9fafb/…)逐类覆盖成深色。
   另：深色模式下隐藏侧栏「胶原流失」入口（CSS 隐藏即无法再导航进入；
       若切深色前已停留在该面板，样式层也已兜底变暗，不会刺眼）。
   回退：删除本块即可。
   ═════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] #panel-month,
html[data-theme="dark"] #panel-refund,
html[data-theme="dark"] #panel-followup,
html[data-theme="dark"] #panel-materials,
html[data-theme="dark"] #panel-collagen{
  --ink:#e2e8f0; --ink-soft:#94a3b8; --ink2:#eef2f7; --muted2:#94a3b8;
  /* --muted 与 --ink-soft 同源（styles.css :root 里也是同值），跟着一起翻深 */
  --muted:#94a3b8;
  --line:rgba(148,163,184,.26); --line2:rgba(148,163,184,.26);
  --soft2:#151f33; --canvas:#0f172a;
  --brand2-light:rgba(249,115,22,.15); --brand2-border:rgba(251,146,60,.38);
  background:#0f172a;
  color-scheme:dark;
}

/* ── 深色：面板内全部输入/选择控件 ── */
html[data-theme="dark"] :is(#panel-month,#panel-refund,#panel-followup,#panel-materials,#panel-collagen)
:is(input[type="number"],input[type="text"],input[type="date"],input[type="search"],select,textarea){
  background:#0f172a;
  color:#e2e8f0;
  border-color:rgba(148,163,184,.34);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
html[data-theme="dark"] :is(#panel-month,#panel-refund,#panel-followup,#panel-materials,#panel-collagen)
:is(input,textarea)::placeholder{color:#64748b;}
html[data-theme="dark"] :is(#panel-month,#panel-refund,#panel-followup,#panel-materials,#panel-collagen)
.cat-btn:not(.active):hover{background:rgba(251,113,133,.10);border-color:rgba(251,113,133,.4);}

/* ── 深色：套餐管理（当月套餐 / 积分商城 / 活动配图） ── */
html[data-theme="dark"] #panel-month .month-subtabs{
  background:#1e293b;border-color:rgba(148,163,184,.3);
}
/* 2026-09-29：又一处漏 :not(.active)。styles.css 的 `.month-subtab.active{background:var(--brand);color:#fff}`
   是设计稿的选中态，却被本条(0,1,3,1)压成 #cbd5e1 → 压在品牌红上只有 **3.16:1**（浅色同元素 4.7:1）。 */
html[data-theme="dark"] #panel-month .month-subtab:not(.active){color:#cbd5e1;}
html[data-theme="dark"] #panel-month .month-subtab:not(.active):hover{color:#fda4af;}
html[data-theme="dark"] #panel-month .cat-btn{
  background:#1e293b;border-color:rgba(148,163,184,.3);color:#cbd5e1;
}
html[data-theme="dark"] #panel-month .month-banner{
  background:linear-gradient(135deg,rgba(225,29,72,.18),rgba(15,23,42,.25));
  border-color:rgba(251,146,60,.35);
}
html[data-theme="dark"] #panel-month .mb-head{color:#fda4af;}
html[data-theme="dark"] #panel-month .mb-sub{color:#94a3b8;}
html[data-theme="dark"] #panel-month .mb-notice{
  background:rgba(249,115,22,.14);border-color:rgba(251,146,60,.4);color:#fdba74;
}
html[data-theme="dark"] #panel-month .mb-prizes li{
  background:rgba(15,23,42,.55);border-color:rgba(251,146,60,.35);color:#fdba74;
}
html[data-theme="dark"] #panel-month .mb-prizes li em{background:#f97316;color:#fff;}
html[data-theme="dark"] #panel-month .mb-rule{color:#fdba74;}
html[data-theme="dark"] #panel-month .month-table{
  background:#0f172a;border-color:rgba(148,163,184,.26);
}
html[data-theme="dark"] #panel-month .month-table th,
html[data-theme="dark"] #panel-month .month-table td{border-color:rgba(148,163,184,.22);}
html[data-theme="dark"] #panel-month .month-table td{color:#cbd5e1;}
html[data-theme="dark"] #panel-month .month-table .mc-product{background:#151f33;color:#eef2f7;}
html[data-theme="dark"] #panel-month .month-table .mc-product-img{background:#1e293b;}
html[data-theme="dark"] #panel-month .month-table .mc-original{color:#94a3b8;}
html[data-theme="dark"] #panel-month .month-table .mc-price{color:#fb7185;}
html[data-theme="dark"] #panel-month .month-table .mc-bonus{background:rgba(249,115,22,.16);color:#fdba74;}
html[data-theme="dark"] #panel-month .month-table .mc-discount{background:rgba(34,197,94,.16);color:#86efac;}
html[data-theme="dark"] #panel-month .month-table.level-table th{background:rgba(139,92,246,.18);color:#ddd6fe;}
html[data-theme="dark"] #panel-month .month-rules{background:#111a2e;border-color:rgba(148,163,184,.26);}
html[data-theme="dark"] #panel-month .month-empty{background:#151f33;color:#94a3b8;}
html[data-theme="dark"] #panel-month .copy-mini{background:#1e293b;border-color:rgba(251,146,60,.38);color:#fda4af;}
html[data-theme="dark"] #panel-month .copy-mini:hover{background:rgba(249,115,22,.14);}

/* ── 深色：退款计算 ── */
html[data-theme="dark"] #panel-refund .rf-form,
html[data-theme="dark"] #panel-refund .rf-summary,
html[data-theme="dark"] #panel-refund .rf-platform-group{
  background:#1e293b;border-color:rgba(148,163,184,.28);
}
html[data-theme="dark"] #panel-refund .rf-pill{color:#cbd5e1;}
html[data-theme="dark"] #panel-refund .rf-pill.active{color:#fff;}
html[data-theme="dark"] #panel-refund .rf-platform-rule,
html[data-theme="dark"] #panel-refund .rf-rule-strip{
  background:rgba(249,115,22,.14);color:#fdba74;
}
html[data-theme="dark"] #panel-refund .rf-platform-rule strong{color:#fed7aa;}
html[data-theme="dark"] #panel-refund .rf-details{border-color:rgba(148,163,184,.28);}
html[data-theme="dark"] #panel-refund .rf-details summary{color:#eef2f7;}
html[data-theme="dark"] #panel-refund .rf-details summary:hover{background:rgba(148,163,184,.08);}
html[data-theme="dark"] #panel-refund .rf-details-body{border-color:rgba(148,163,184,.2);}
html[data-theme="dark"] #panel-refund .rf-detail-card{
  background:rgba(148,163,184,.08);border-color:rgba(148,163,184,.2);
}
html[data-theme="dark"] #panel-refund .rf-tag.green{background:rgba(34,197,94,.16);color:#86efac;}
html[data-theme="dark"] #panel-refund .rf-tag.gray{background:rgba(148,163,184,.18);color:#cbd5e1;}
html[data-theme="dark"] #panel-refund .rf-tag.red{background:rgba(239,68,68,.16);color:#fca5a5;}
html[data-theme="dark"] #panel-refund .rf-tag.blue{background:rgba(56,189,248,.16);color:#7dd3fc;}
html[data-theme="dark"] #panel-refund .rf-price-dyn{color:#7dd3fc;}
/* 2026-09-15：深色下 .rf-table td 没有字号色规则，会继承 body 的浅色主题深灰(#1f2937)，
   导致产品/赠品表「产品名 / 单价 / 折算盒数 / 扣费」整体黑底黑字看不见。显式补亮色。 */
html[data-theme="dark"] #panel-refund .rf-table td,
html[data-theme="dark"] #panel-refund .rf-table td.money{color:#e2e8f0;}
html[data-theme="dark"] #panel-refund .rf-table td .rf-price-dyn{color:#7dd3fc;}
html[data-theme="dark"] #panel-refund .rf-tmall-box{
  background:rgba(249,115,22,.12);border-color:rgba(251,146,60,.4);
}
html[data-theme="dark"] #panel-refund .rf-tmall-title{color:#fb923c;}
html[data-theme="dark"] #panel-refund .rf-tmall-note,
html[data-theme="dark"] #panel-refund .rf-hint{color:#94a3b8;}
html[data-theme="dark"] #panel-refund .rf-readonly-value{
  background:#0f172a;color:#fb923c;border-color:rgba(251,146,60,.45);
}
html[data-theme="dark"] #panel-refund .rf-result{
  background:#0f172a;color:#cbd5e1;border-color:rgba(148,163,184,.24);
}
html[data-theme="dark"] #panel-refund .rf-warning{color:#fdba74;}
html[data-theme="dark"] #panel-refund .rf-copy-note{color:#94a3b8;}
html[data-theme="dark"] #panel-refund .rf-metric span{color:#94a3b8;}
html[data-theme="dark"] #panel-refund .rf-metric strong{color:#eef2f7;}
html[data-theme="dark"] #panel-refund .rf-summary{border-top-color:#fb923c;}
html[data-theme="dark"] #panel-refund .rf-note{color:#94a3b8;}

/* ── 深色：回访日期 ── */
html[data-theme="dark"] #panel-followup .fu-view-switch{
  background:#1e293b;border-color:rgba(251,146,60,.38);
}
/* 2026-09-29：原先漏了 :not(.active)，本条权重(0,1,3,1)压过
   styles.css `.fu-view-switch button.active{background:var(--brand2);color:#fff}`(0,0,2,1)，
   把选中态的白字改成了 #cbd5e1 → 橙底(#f97316)上只有 **1.89:1**，选中项反而最难看清。
   排除 .active 后选中态恢复设计稿的 #fff（2.8:1，与浅色一致）。 */
html[data-theme="dark"] #panel-followup .fu-view-switch button:not(.active){color:#cbd5e1;}
html[data-theme="dark"] #panel-followup .fu-view-switch button:hover{color:#fdba74;}
html[data-theme="dark"] #panel-followup .fu-tools-panel{
  background:#1e293b;border-color:rgba(251,146,60,.3);
}
html[data-theme="dark"] #panel-followup .fu-tools-panel input[type="date"]{
  border-color:rgba(251,146,60,.42);
}
html[data-theme="dark"] #panel-followup .fu-date-chip{color:#e2e8f0;}
html[data-theme="dark"] #panel-followup .fu-date-chip button{color:#fdba74;}
/* 2026-10-09：新增日期多选日历浮层（深色） */
html[data-theme="dark"] #panel-followup .fu-cal-pop{
  background:#1e293b;border-color:rgba(251,146,60,.38);box-shadow:0 16px 36px rgba(0,0,0,.45);
}
html[data-theme="dark"] #panel-followup .fu-cal-quick{background:#0f172a;color:#fdba74;}
html[data-theme="dark"] #panel-followup .fu-cal-today{color:#fdba74;}
html[data-theme="dark"] #panel-followup .fu-cal-day.is-base{background:rgba(148,163,184,.18);}
html[data-theme="dark"] #panel-followup .fu-timeline-node{
  background:#1e293b;border-color:rgba(251,146,60,.3);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
html[data-theme="dark"] #panel-followup .fu-timeline-node:hover{
  background:rgba(249,115,22,.12);border-color:#fb923c;
}
html[data-theme="dark"] #panel-followup .fu-timeline-day{color:#eef2f7;}
html[data-theme="dark"] #panel-followup .fu-timeline-date{color:#fb923c;}
html[data-theme="dark"] #panel-followup .fu-table-title{color:#eef2f7;}
html[data-theme="dark"] #panel-followup .fu-table th,
html[data-theme="dark"] #panel-followup .fu-table td{border-color:rgba(251,146,60,.32);}
html[data-theme="dark"] #panel-followup .fu-table th{
  background:rgba(249,115,22,.2);color:#fdba74;
}
html[data-theme="dark"] #panel-followup .fu-table tbody tr:nth-child(odd) td{background:rgba(148,163,184,.05);}
html[data-theme="dark"] #panel-followup .fu-table tbody tr:nth-child(even) td{background:rgba(249,115,22,.07);}
html[data-theme="dark"] #panel-followup .fu-table .fu-day-cell{color:#eef2f7;}
html[data-theme="dark"] #panel-followup .fu-table .fu-require-cell{color:#cbd5e1;}
html[data-theme="dark"] #panel-followup .fu-table .fu-date-copy{color:#fb923c;}
/* 2026-09-29：回访内容列原先是个**无类名**的 <td>，全站没有任何 color 规则命中它
   → 继承 body 的 --ink(#1f2937)，暗色下压在 #0a0f1c 上只有 **1.3:1**，整列等于隐形
   （截图 verify-output/dark-panel-followup.png 已确认）。
   修法：在 app-new.js 给它挂上 .fu-content-cell，这里补色，与「要求」列同色。 */
html[data-theme="dark"] #panel-followup .fu-table .fu-content-cell{color:#cbd5e1;}
html[data-theme="dark"] #panel-followup .fu-timeline-node.is-selected,
html[data-theme="dark"] #panel-followup .fu-table .fu-date-copy.is-selected,
html[data-theme="dark"] #panel-followup .fu-finishing-date.is-selected{
  background:linear-gradient(135deg,rgba(249,115,22,.2),rgba(236,72,153,.22))!important;
  border-color:rgba(236,72,153,.65)!important;
  color:#f9a8d4!important;
  box-shadow:0 10px 22px rgba(0,0,0,.3),0 0 0 3px rgba(249,115,22,.14)!important;
}
html[data-theme="dark"] #panel-followup .fu-image-preview{
  background:#151f33;border-color:rgba(148,163,184,.3);color:#eef2f7;
}
html[data-theme="dark"] #panel-followup .fu-image-preview img{
  border-color:rgba(148,163,184,.3);background:#0f172a;
}
html[data-theme="dark"] #panel-followup .fu-finishing-head strong{color:#eef2f7;}
html[data-theme="dark"] #panel-followup .fu-finishing-head span{color:#94a3b8;}
html[data-theme="dark"] #panel-followup .fu-finishing-table th,
html[data-theme="dark"] #panel-followup .fu-finishing-table td{border-color:rgba(251,146,60,.32);}
html[data-theme="dark"] #panel-followup .fu-finishing-group-1{background:rgba(168,85,247,.16);}
html[data-theme="dark"] #panel-followup .fu-finishing-group-2{background:rgba(245,158,11,.13);}
html[data-theme="dark"] #panel-followup .fu-finishing-group-3{background:rgba(244,63,94,.14);}
html[data-theme="dark"] #panel-followup .fu-finishing-date{color:#e2e8f0;}
html[data-theme="dark"] #panel-followup .fu-finishing-date:hover{
  background:rgba(249,115,22,.16);color:#fdba74;outline-color:rgba(251,146,60,.5);
}
html[data-theme="dark"] #panel-followup .fu-extra-divider{background:rgba(148,163,184,.4);}

/* ── 深色：素材库（复刻案例库整层） ── */
html[data-theme="dark"] #panel-materials .library-head,
html[data-theme="dark"] #panel-materials .material-group,
html[data-theme="dark"] #panel-materials .state-panel{border-color:rgba(148,163,184,.24);}
html[data-theme="dark"] #panel-materials .library-head h1,
html[data-theme="dark"] #panel-materials .group-head h2,
html[data-theme="dark"] #panel-materials .result-bar strong,
html[data-theme="dark"] #panel-materials .material-card h3,
html[data-theme="dark"] #panel-materials .state-panel strong,
html[data-theme="dark"] #panel-materials .modal-head strong,
html[data-theme="dark"] #panel-materials .modal-body p{color:#eef2f7;}
html[data-theme="dark"] #panel-materials .eyebrow,
html[data-theme="dark"] #panel-materials .library-count strong{color:#fb923c;}
html[data-theme="dark"] #panel-materials .library-summary,
html[data-theme="dark"] #panel-materials .library-count span,
html[data-theme="dark"] #panel-materials .filter-band label,
html[data-theme="dark"] #panel-materials .group-head span,
html[data-theme="dark"] #panel-materials .result-bar,
html[data-theme="dark"] #panel-materials .image-error,
html[data-theme="dark"] #panel-materials .load-more,
html[data-theme="dark"] #panel-materials .state-panel{color:#94a3b8;}
html[data-theme="dark"] #panel-materials .filter-band select,
html[data-theme="dark"] #panel-materials .filter-band input{background:#0f172a;}
html[data-theme="dark"] #panel-materials .clear-button,
html[data-theme="dark"] #panel-materials .view-switch,
html[data-theme="dark"] #panel-materials .material-card,
html[data-theme="dark"] #panel-materials .modal-panel{background:#1e293b;border-color:rgba(148,163,184,.3);}
html[data-theme="dark"] #panel-materials .clear-button,
html[data-theme="dark"] #panel-materials .card-actions button,
html[data-theme="dark"] #panel-materials .load-more button,
html[data-theme="dark"] #panel-materials .modal-head button{color:#cbd5e1;background:#0f172a;border-color:rgba(148,163,184,.32);}
html[data-theme="dark"] #panel-materials .clear-button:hover,
html[data-theme="dark"] #panel-materials .card-actions button:hover,
html[data-theme="dark"] #panel-materials .load-more button:hover{border-color:#fb923c;color:#fb923c;}
/* 2026-09-29：漏了 :not(.active) —— 本条(0,1,2,2)压过 styles.css
   `#panel-materials .view-switch button.active{color:#fff;background:linear-gradient(...)}`(0,1,2,1)，
   选中项「全部」被改成 #94a3b8 压在橙渐变上 = **1.09:1**，比不选中还难看清。
   探针：verify-output/scan-btn-ink.js（会把渐变两端当候选背景，故能抓到这类漏报）。 */
html[data-theme="dark"] #panel-materials .view-switch button:not(.active){color:#94a3b8;}
html[data-theme="dark"] #panel-materials .view-switch button:hover{color:#fb923c;background:rgba(249,115,22,.14);}
html[data-theme="dark"] #panel-materials .material-image-button{background:#182136;}
html[data-theme="dark"] #panel-materials .modal-body img{background:#182136;}
html[data-theme="dark"] #panel-materials .material-card .material-tags span,
html[data-theme="dark"] #panel-materials .modal-tags span{
  background:rgba(249,115,22,.16);border-color:rgba(251,146,60,.42);color:#fdba74;
}
/* 2026-09-29：原条只改了字色、**没改底色** —— 浅色规则给的底色是 rgba(255,255,255,.94)，
   于是暗色下成了 #cbd5e1 压近白底 = **1.48:1**，「收藏」按钮整个看不清。
   这里把表面也翻深；并显式重申 hover / 已收藏两态（本块权重会压过 styles.css 的浅色规则）。 */
html[data-theme="dark"] #panel-materials .favorite-button{
  color:#cbd5e1;background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.34);
  box-shadow:0 5px 16px rgba(0,0,0,.32);
}
html[data-theme="dark"] #panel-materials .favorite-button:hover{color:#fdba74;}
html[data-theme="dark"] #panel-materials .favorite-button.active{
  color:#fff;border-color:#fb923c;background:linear-gradient(135deg,#f97316,#e11d48);
}
html[data-theme="dark"] #panel-materials .modal-head,
html[data-theme="dark"] #panel-materials .modal-actions{border-color:rgba(148,163,184,.24);}
html[data-theme="dark"] #panel-materials .load-more button{min-width:132px;}
html[data-theme="dark"] #panel-materials .card-actions .primary,
html[data-theme="dark"] #panel-materials .modal-actions .primary{color:#fff;}

/* ── 深色：胶原流失（保险兜底：入口虽隐藏，面板若残留仍不刺眼） ── */
html[data-theme="dark"] #panel-collagen{
  background:linear-gradient(135deg,rgba(46,25,61,.97),rgba(30,22,54,.97) 48%,rgba(24,20,44,.97));
}
html[data-theme="dark"] #panel-collagen{
  --col-card:rgba(28,23,46,.72);--col-border:rgba(255,255,255,.13);
  --col-text:#efe6fb;--col-muted:#bfaed6;
  /* 2026-09-29：--col-violet 浅色值是 #5d247c（深紫），压在深色 .col-stat 上只有 1.83:1。
     它只被 .col-value.violet 用到，深色下换成亮紫即可（其余三个强调色在深底上够亮，实测未报）。 */
  --col-violet:#c4b5fd;
}
html[data-theme="dark"] #panel-collagen .col-hero,
html[data-theme="dark"] #panel-collagen .col-stat,
html[data-theme="dark"] #panel-collagen .col-panel,
html[data-theme="dark"] #panel-collagen .col-controls,
html[data-theme="dark"] #panel-collagen .col-result-card,
html[data-theme="dark"] #panel-collagen .col-comparison,
html[data-theme="dark"] #panel-collagen .col-mini,
html[data-theme="dark"] #panel-collagen .col-talking-card,
html[data-theme="dark"] #panel-collagen .col-note{
  background:rgba(22,17,40,.62);border-color:rgba(255,255,255,.13);
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
html[data-theme="dark"] #panel-collagen .col-chart-box{
  background:linear-gradient(180deg,rgba(32,26,52,.85),rgba(22,16,40,.78));
  border-color:rgba(255,255,255,.12);
}
html[data-theme="dark"] #panel-collagen .col-copy-btn{color:#cdb9e0;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.08);}
html[data-theme="dark"] #panel-collagen .col-copy-btn:hover{color:#efe6fb;background:rgba(255,255,255,.16);}
html[data-theme="dark"] #panel-collagen .col-age-input{background:#120e24;color:#f3e8ff;box-shadow:inset 0 0 0 1px rgba(223,184,231,.35);}
html[data-theme="dark"] #panel-collagen .col-age-unit{color:#d9c6ea;}
html[data-theme="dark"] #panel-collagen .col-result-title{color:#c3b0d8;}
html[data-theme="dark"] #panel-collagen .col-main-rate .col-rate-unit,
html[data-theme="dark"] #panel-collagen .col-mini-v small{color:#bfaed6;}
html[data-theme="dark"] #panel-collagen .col-comparison p,
html[data-theme="dark"] #panel-collagen .col-talking-card p{color:#d7c8e4;}
html[data-theme="dark"] #panel-collagen .col-mini-k{color:#bfaed6;}
html[data-theme="dark"] #panel-collagen .col-mini-v{color:#efe6fb;}
html[data-theme="dark"] #panel-collagen .col-tag{background:rgba(230,70,154,.2);color:#f9a8d4;}
html[data-theme="dark"] #panel-collagen .col-range-labels{color:#a08fb5;}
/* 2026-09-29：① .col-hero h1 没有任何 color 规则 → 继承 body 的 #1f2937，
   压在深色 .col-hero 上只有 1.3:1，标题「胶原流失」等于隐形；
   ② #col-svg 里的坐标轴刻度/轴名/数据点标签是 JS 写死的 `fill` **表现属性**
   （#947fa0 / #6f557e / #4e315f），CSS 的 fill 能盖过表现属性，所以纯 CSS 即可修，
   不必像排行榜走势图那样加「主题变化重绘」。 */
html[data-theme="dark"] #panel-collagen .col-hero h1{color:var(--col-text);}
html[data-theme="dark"] #panel-collagen #col-svg text{fill:#c9b6dd;}

/* ── 深色：侧栏隐藏「胶原流失」入口（用户指定） ── */
html[data-theme="dark"] .sidebar-btn[data-nav="collagen"]{display:none;}

/* ═════════════════════════════════════════════════════════════════════
   ═══ 2026-09-29 深色：「报价模板 & 介绍管理」/「套餐管理」文字不可见 ═══
   这两块**不在上面 :is(...) 的变量作用域列表里**，所以暗色下有两类问题：
     ① 变量仍是浅色值 → var(--ink) 的模板名、var(--muted) 的提示语压在 #0a0f1c 上（≈1.3:1）；
     ② .qt-board-tab / .pm-tab 只写了 `background:#fff`、**没写 color**，
        而本文件后面的 !important 块给 html 设了 `color-scheme:dark`，
        UA 会把没写 color 的 <button> 判成 ButtonText = **白色** → 白字压白底（1:1，整块消失）。
   这里只做「能看清」的最小修补（作用域变量 + 未选中页签的表面），不重做整套配色。
   回退：删除本块即可。
   ═════════════════════════════════════════════════════════════════════ */
/* ⚠️ 只给「报价模板」翻转变量：它的列表/编辑器都是透明底（衬在 #0a0f1c 上）。
   「套餐管理」不行 —— 它自带 .pm-card{background:#fff} 这类**浅色实底**，
   一并翻转 --ink-soft 会把卡片副标题压成 2.56:1（实测），所以那边只修 .pm-tab。 */
html[data-theme="dark"] #panel-quoteTemplates{
  --ink:#e2e8f0; --ink-soft:#94a3b8; --muted:#94a3b8; --muted2:#94a3b8;
  --line:rgba(148,163,184,.26); --line2:rgba(148,163,184,.26);
}
/* 「套餐管理」只翻 --muted（图库里的「暂无图片 / 💡 上传的图片…」提示语）。
   --ink-soft 必须保持浅色值：.pm-card{background:#fff} 是浅色实底，翻了反而压坏卡片副标题。 */
html[data-theme="dark"] #panel-pkgManager{--muted:#94a3b8;}
html[data-theme="dark"] #panel-quoteTemplates .qt-list-item:hover{background:rgba(148,163,184,.10);}
html[data-theme="dark"] #panel-quoteTemplates .qt-list-item.active{
  background:rgba(225,29,72,.18);border-left-color:#fb7185;
}
/* 未选中页签：补深色表面 + 亮色文字（选中态由 .active 的橙色渐变负责，故排除） */
html[data-theme="dark"] #panel-quoteTemplates .qt-board-tab:not(.active),
html[data-theme="dark"] #panel-pkgManager .pm-tab:not(.active){
  background:#1e293b;color:#e2e8f0;border-color:rgba(148,163,184,.32);
}
html[data-theme="dark"] #panel-quoteTemplates .qt-board-tab:not(.active):hover,
html[data-theme="dark"] #panel-pkgManager .pm-tab:not(.active):hover{
  background:#263449;color:#fdba74;border-color:rgba(251,146,60,.5);
}

/* ═════════════════════════════════════════════════════════════════════
   ═══ 2026-09-09 深色补充：双品联报(combo)组合区字面量浅色漏网 ═══
   覆盖 pkg-calc.css 后置追加的组合选择说明/预设/主副品切换/组合摘要/
   已选标签（写死 #fff7ed/#fff/#fed7aa 等，未走变量，深色下刺眼）。
   回退：删除本块即可。
   ═════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-builder-guide,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-presets{
  background:rgba(249,115,22,.14)!important;
  border-color:rgba(251,146,60,.4)!important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-builder-guide strong,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-presets-head strong{color:#fdba74!important;}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-builder-guide>span,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-presets-head span,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-preset span{color:#94a3b8!important;}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-role-btn,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-preset,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-presets-badge{
  color:#fdba74!important;
  background:#1e293b!important;
  border-color:rgba(251,146,60,.42)!important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-role-btn:hover,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-preset:hover{
  background:rgba(249,115,22,.16)!important;border-color:#fb923c!important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-role-btn.active{
  background:linear-gradient(135deg,#f97316,#e11d48)!important;
  border-color:#f97316!important;color:#fff!important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .combo-preset strong{color:#eef2f7!important;}
html[data-theme="dark"] #panel-combo .combo-summary{
  background:rgba(249,115,22,.14)!important;border-color:rgba(251,146,60,.4)!important;
}
html[data-theme="dark"] #panel-combo .combo-summary strong,
html[data-theme="dark"] #panel-combo .addon-head{color:#fdba74!important;}
html[data-theme="dark"] #panel-combo .combo-summary>div>span{color:#94a3b8!important;}
html[data-theme="dark"] #panel-combo .combo-selected-list span{
  background:#1e293b!important;color:#e2e8f0!important;border-color:rgba(148,163,184,.34)!important;
}

/* ═══ 2026-09-09 深色收尾：补差/免单、报ABC、双品联报 残留浅色边缘修补 ═══
   覆盖 pkg-calc.css 后置追加的 .quote-action-panel .advanced-title 底边浅线
   (rgba(226,232,240,.95))、joint-calc.css 未随主题切换的
   .panel-title/.result-title/.joint-advanced-title/.joint-action-title 底边浅线，
   以及 styles.css #panel-upgrade .seg-tpl-cats 白底分段胶囊(.cat-btn)。
   .active 选中态仍保留原有渐变/白字（此处不含 .active）。
   回退：删除本块即可。
   ═════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .advanced-title{
  border-bottom-color: rgba(148,163,184,.30) !important;
}
html[data-theme="dark"] #panel-joint .panel-title,
html[data-theme="dark"] #panel-joint .joint-advanced-title,
html[data-theme="dark"] #panel-joint .joint-action-title{
  border-bottom-color: rgba(148,163,184,.28) !important;
}
html[data-theme="dark"] #panel-upgrade .seg-tpl-cats .cat-btn{
  background:#1e293b !important;
  border-color:#334155 !important;
  color:#cbd5e1 !important;
}
/* ═══ 2026-09-09 深色模式：#panel-upgrade/.combo/.joint .panel 容器自身根修 ═══
   问题：之前多轮修补都只补了面板内部元素(advanced-title/panel-title/cat-btn)
   与最外层 html/body/.shell,但中间的 section#panel-upgrade.panel.panel-flush.active
   (1100×1462 几乎占满整个工作台)容器自身的白底 rgba(248,250,252) 与 1px
   浅灰边框 rgb(229,231,235) 完全没被压过，导致深色下"工作台外围一圈白"
   看起来像是容器边缘泛白。
   原因：pkg-calc.css:858 / :877 等 .panel 浅色规则用 :is(...) 选择器+!important，
   之前 pkg-calc.css:870 等 html[data-theme="dark"] 深色规则特异性偶发被绕过，
   UI 实际生效的仍是浅色。
   修复：直接用最高特异性 ID + class.active + !important，把 #panel-upgrade/.combo/.joint
   的 .panel 容器强制染深，从根源消除白边。
   回退：删除本块即可。 */
html[data-theme="dark"] #panel-upgrade.panel.panel-flush.active,
html[data-theme="dark"] #panel-combo.panel.panel-flush.active,
html[data-theme="dark"] #panel-joint.panel.panel-flush{
  background: linear-gradient(160deg, rgba(30,41,59,.55) 0%, rgba(15,23,42,.40) 42%, rgba(30,41,59,.50) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .05) !important;
  color: #f8fafc !important;
}
html[data-theme="dark"] #panel-joint .panel-title,
html[data-theme="dark"] #panel-joint .joint-advanced-title,
html[data-theme="dark"] #panel-joint .joint-action-title{
  border-bottom-color: rgba(148, 163, 184, 0.28) !important;
}


/* ═══ 2026-09-09 深色模式：工作台最外围透白根修 ═══
   问题：页面最外层 html/body 底色在深色下从未被设黑，默认浅色，
   从 .shell 与内部 sidebar/workspace 的缝隙、边缘留白处透出，
   形成「工作台外围一圈白 + 侧栏与内容区间白隙」。
   修复：把深色下最外层 html/body/.shell/.workspace/.topbar 底色统一染深，
   让任何缝隙露出的都是深色，从根源消除透白。回退：删除本块即可。 */
html[data-theme="dark"],
html[data-theme="dark"] body,
body.shell-ready[data-theme="dark"]{
  background:#0a0f1c !important;
  color-scheme:dark;
}
html[data-theme="dark"] .shell{
  background:#0a0f1c !important;
}
html[data-theme="dark"] body.shell-ready .workspace{
  background:var(--ui-bg) !important;
}

/* 2026-09-09 深色：套餐管理产品名字色 + 三面板结果区白底白边
   选择器都比 styles.css/pkg-calc.css 具更高特异性，可覆盖其 `!important`
   受影响元素（实测计算样式）：
     - #panel-month .month-section-title        字色 rgb(31,41,55)
     - #panel-upgrade/#panel-combo .result .script  大白底
     - #panel-upgrade/#panel-combo .copy-btn    白底白边
     - .seg-view-btn 未选态                    白底
     - .script-head (top/bottom 边)             rgb(255,247,247) 浅
     - #panel-joint .script-head                 rgb(248,250,252) 浅
   保留原选中态/激活态样式不动 */
html[data-theme="dark"] #panel-month .month-section-title,
html[data-theme="dark"] #panel-month .month-section-title span{
  color:#f8fafc !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .result .script,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .result .seg-card,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .result .img-block{
  background:rgba(15,23,42,.78) !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.30) !important;
  box-shadow:none !important;
}
/* 2026-09-10 晚：修深色下段卡正文仍是浅色主题 --ink(#1f2937) 导致「深字压深底」看不清 */
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card .seg-card-content{
  color:#f1f5f9 !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card .seg-card-extra-content,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card .seg-card-caption{
  color:#cbd5e1 !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .copy-btn,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card .copy-btn,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card-actions button,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .img-actions button{
  background:rgba(30,41,59,.85) !important;
  color:#e2e8f0 !important;
  border:1px solid rgba(148,163,184,.34) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .copy-btn:hover,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card .copy-btn:hover,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card-actions button:hover{
  background:rgba(251,146,60,.18) !important;
  border-color:rgba(251,146,60,.55) !important;
  color:#fdba74 !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-view-btn{
  background:rgba(30,41,59,.85) !important;
  color:#cbd5e1 !important;
  border:1px solid rgba(148,163,184,.28) !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-view-btn.active{
  /* 保留 ui-refresh 73-77 行的 brand 渐变；这里再覆一层深色渐变以配深色面板 */
  background:linear-gradient(135deg,#f97316,#e11d48) !important;
  color:#fff !important;
  border-color:transparent !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .script-head{
  background:rgba(15,23,42,.55) !important;
  border-top-color:rgba(148,163,184,.28) !important;
  border-bottom-color:rgba(148,163,184,.28) !important;
  color:#f8fafc !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .script-head b,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .script-head strong{
  color:#f8fafc !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-row-actions > button:not(.active){
  background:rgba(30,41,59,.85) !important;
  color:#cbd5e1 !important;
  border-color:rgba(148,163,184,.30) !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-up,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-down,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-del{
  background:rgba(30,41,59,.85) !important;
  color:#cbd5e1 !important;
  border:1px solid rgba(148,163,184,.34) !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-up:hover,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-down:hover{
  background:rgba(251,146,60,.18) !important;
  border-color:rgba(251,146,60,.55) !important;
  color:#fdba74 !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-del:hover{
  background:rgba(239,68,68,.18) !important;
  border-color:rgba(239,68,68,.55) !important;
  color:#fca5a5 !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .script-divider,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .script-divider::before,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .script-divider::after{
  border-color:rgba(148,163,184,.22) !important;
  color:#cbd5e1 !important;
  background:transparent !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .sd-label{
  color:#cbd5e1 !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-card-num{
  background:rgba(225,29,72,.16) !important;
  color:#fda4af !important;
  border:1px solid rgba(225,29,72,.4) !important;
}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .script-extra,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .seg-extra-text{
  background:transparent !important;
  color:#e2e8f0 !important;
  border-color:rgba(148,163,184,.22) !important;
}

/* 联报(joint)：结果脚本头深色边 + 复制按钮白底 */
html[data-theme="dark"] #panel-joint .script-head{
  border-top-color:rgba(148,163,184,.28) !important;
  border-bottom-color:rgba(148,163,184,.28) !important;
  background:rgba(15,23,42,.55) !important;
  color:#f8fafc !important;
}
html[data-theme="dark"] #panel-joint .script-card{
  background:rgba(15,23,42,.65) !important;
  border-color:rgba(148,163,184,.26) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] #panel-joint .script-text{
  background:rgba(2,6,23,.72) !important;
  border-color:rgba(148,163,184,.28) !important;
  color:#e5e7eb !important;
}
html[data-theme="dark"] #panel-joint .copy-btn{
  background:rgba(30,41,59,.85) !important;
  color:#e2e8f0 !important;
  border:1px solid rgba(148,163,184,.34) !important;
}
html[data-theme="dark"] #panel-joint .copy-btn:hover{
  background:rgba(251,146,60,.18) !important;
  border-color:rgba(251,146,60,.55) !important;
  color:#fdba74 !important;
}
html[data-theme="dark"] #panel-joint #jt-empty{
  background:rgba(15,23,42,.65) !important;
  border-color:rgba(148,163,184,.26) !important;
  color:#cbd5e1 !important;
}

/* 2026-09-10 合并回访视图(按天合并,用量档徽标多枚)
    设计:整行不再染色,行底色交给原表格交替白/浅橙;
    「用量档」列通过徽标圆点 + 文字区分一个月/三个月;
    同天两档合并成一行时,该列同时显示两个徽标,自然表达「双档覆盖」 */
#panel-followup .fu-source-cell{
  white-space:nowrap;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
#panel-followup .fu-source-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:22px;padding:1px 10px 1px 6px;border-radius:11px;
  font-size:12px;font-weight:700;white-space:nowrap;border:1px solid transparent;
}
#panel-followup .fu-source-badge .fu-source-dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px;
  box-shadow:0 0 0 1.5px currentColor;opacity:.85;
}
/* 一个月量徽标:紫色系 */
#panel-followup .fu-source-badge.fu-source-month1{
  background:#ede9fe;color:#6b21a8;border-color:#c4b5fd;
}
#panel-followup .fu-source-badge.fu-source-month1 .fu-source-dot{ background:#8b5cf6; }
/* 三个月量徽标:橙色系 */
#panel-followup .fu-source-badge.fu-source-month3{
  background:#ffedd5;color:#9a3412;border-color:#fed7aa;
}
#panel-followup .fu-source-badge.fu-source-month3 .fu-source-dot{ background:#f97316; }
/* 深色模式:徽标半透明,圆点亮度提升 */
html[data-theme="dark"] #panel-followup .fu-source-badge.fu-source-month1{
  background:rgba(168,85,247,.22);color:#e9d5ff;border-color:rgba(168,85,247,.55);
}
html[data-theme="dark"] #panel-followup .fu-source-badge.fu-source-month1 .fu-source-dot{ background:#c084fc; }
html[data-theme="dark"] #panel-followup .fu-source-badge.fu-source-month3{
  background:rgba(251,146,60,.22);color:#fed7aa;border-color:rgba(251,146,60,.55);
}
html[data-theme="dark"] #panel-followup .fu-source-badge.fu-source-month3 .fu-source-dot{ background:#fdba74; }
/* 合并视图下保持原表格交替白/浅橙节奏,不再叠加整行染色;
   这里故意留空,避免后续误以为还有旧版紫/橙/红行背景 */


/* ═══ 2026-09-14 深色模式：#panel-upquote 容器根修（同 #panel-upgrade 套路） ═══ */
html[data-theme="dark"] #panel-upquote.panel.panel-flush.active{
  background: linear-gradient(160deg, rgba(30,41,59,.55) 0%, rgba(15,23,42,.40) 42%, rgba(30,41,59,.50) 100%) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  box-shadow: 0 26px 60px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .05) !important;
  color: #f8fafc !important;
}

/* ═══ 账号管理重设计（2026-09-16）· 深色 ═══ */
html[data-theme="dark"] #panel-accounts .acct-title,
html[data-theme="dark"] #panel-accounts .acct-card-title{color:#eef2f7;}
html[data-theme="dark"] #panel-accounts .acct-sub,
html[data-theme="dark"] #panel-accounts .acct-card-hint,
html[data-theme="dark"] #panel-accounts .acct-note{color:#94a3b8;}
html[data-theme="dark"] #panel-accounts .acct-stat{background:rgba(225,29,72,.10);border-color:rgba(251,113,133,.30);}
html[data-theme="dark"] #panel-accounts .acct-stat b{color:#fda4af;}
html[data-theme="dark"] #panel-accounts .acct-stat span{color:#cbd5e1;}
html[data-theme="dark"] #panel-accounts .acct-stat.is-ok,
html[data-theme="dark"] #panel-accounts .acct-stat.is-live{background:rgba(34,197,94,.10);border-color:rgba(74,222,128,.32);}
html[data-theme="dark"] #panel-accounts .acct-stat.is-ok b,
html[data-theme="dark"] #panel-accounts .acct-stat.is-live b{color:#4ade80;}
html[data-theme="dark"] #panel-accounts .acct-refresh{background:#0f172a;border-color:rgba(148,163,184,.32);color:#fdba74;}
html[data-theme="dark"] #panel-accounts .acct-refresh:hover{border-color:#fb923c;}
html[data-theme="dark"] #panel-accounts .acct-card{background:#131c2b;border-color:rgba(148,163,184,.22);}
html[data-theme="dark"] #panel-accounts .acct-field{color:#cbd5e1;}
html[data-theme="dark"] #panel-accounts .acct-field input,
html[data-theme="dark"] #panel-accounts .acct-search{background:#0f172a;border-color:rgba(148,163,184,.30);color:#e2e8f0;}
html[data-theme="dark"] #panel-accounts .acct-field input:focus,
html[data-theme="dark"] #panel-accounts .acct-search:focus{border-color:#fb923c;background:#0f172a;}
html[data-theme="dark"] #panel-accounts .acct-btn-ghost{background:#0f172a;color:#cbd5e1;border-color:rgba(148,163,184,.30);}
html[data-theme="dark"] #panel-accounts .acct-btn-ghost:hover{border-color:#fb923c;color:#fdba74;}
html[data-theme="dark"] #panel-accounts .acct-divider{background:rgba(148,163,184,.2);}
html[data-theme="dark"] #panel-accounts .acct-table th{color:#94a3b8;border-bottom-color:rgba(251,146,60,.35);}
html[data-theme="dark"] #panel-accounts .acct-table td{border-bottom-color:rgba(148,163,184,.14);}
html[data-theme="dark"] #panel-accounts .acct-table tbody tr:hover td{background:rgba(251,146,60,.08);}
html[data-theme="dark"] #panel-accounts .acct-id-txt b{color:#eef2f7;}
html[data-theme="dark"] #panel-accounts .acct-id-txt small{color:#64748b;}
html[data-theme="dark"] #panel-accounts .acct-active-line{color:#cbd5e1;}
html[data-theme="dark"] #panel-accounts .acct-pill.on{color:#4ade80;background:rgba(34,197,94,.12);border-color:rgba(74,222,128,.4);}
html[data-theme="dark"] #panel-accounts .acct-pill.off{color:#f87171;background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.4);}
html[data-theme="dark"] #panel-accounts .acct-actions button{background:#0f172a;color:#cbd5e1;border-color:rgba(148,163,184,.30);}
html[data-theme="dark"] #panel-accounts .acct-actions button:hover{border-color:#fb923c;color:#fdba74;}
html[data-theme="dark"] #panel-accounts .acct-actions button.is-del{color:#f87171;}
html[data-theme="dark"] #panel-accounts .acct-empty{color:#94a3b8;}

/* ═══════════════ 2026-09-17 生成结果弹窗化 + 工作台固定高度 ═══════════════
   ① 补差/免单(#up-result) 与 报ABC(#jt-result) 生成结果改为居中弹窗（同主品报价/积分弹窗视觉）
   ② 两个工作台面板锁定视口高度，内容内部滚动，页面不再向下延伸 */

/* ── 遮罩 ── */
.rt-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:2900;}
body.rt-modal-open{overflow:hidden;}

/* ── 结果容器 → 居中弹窗卡片 ── */
body.rt-modal-open #up-result.rt-modal,
body.rt-modal-open #jt-result.rt-modal{
  position:fixed;z-index:3000;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(960px,94vw);max-height:88vh;display:flex;flex-direction:column;
  margin:0;padding:0;background:#fff;border:1px solid #eef2f7;border-radius:16px;
  box-shadow:0 24px 64px rgba(15,23,42,.35);overflow:hidden;
  pointer-events:auto!important;   /* 修复：#jt-resultPanel 的 pointer-events:none 会继承给弹窗，导致点击穿透到遮罩、一点就关 */
}
/* 弹窗顶栏：标题 + 复制全部(仅报ABC) + 关闭 */
.rt-modal .rt-modal-head{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:14px 20px;
  border-bottom:1px solid #eef2f7;background:#fff;
}
.rt-modal .rt-modal-head strong{font-size:15.5px;font-weight:800;color:#111827;}
.rt-modal .rt-modal-head em{font-style:normal;font-weight:700;color:#64748b;font-size:12.5px;}
.rt-modal .rt-modal-head .copy-btn{margin-left:auto;}
.rt-modal .rt-modal-close{
  width:32px;height:32px;border-radius:8px;border:1px solid #e5e7eb;background:#f8fafc;color:#64748b;
  font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.rt-modal .rt-modal-close:hover{background:#fff;color:#111827;border-color:#cbd5e1;}
/* 弹窗体：原结果内容放进可滚动区（顶栏以下是原有子节点） */
.rt-modal .rt-modal-body{overflow-y:auto;padding:16px 20px 20px;flex:1;min-height:0;}
.rt-modal .seg-view-switch,.rt-modal .result-grid,.rt-modal .seg-grid{margin-top:0;}
/* 复制全部按钮常显（进弹窗时由 JS 移入顶栏） */
body.rt-modal-open #jt-copy-all-btn{margin-left:auto;}
html[data-theme="dark"] .rt-modal .rt-modal-head{background:#131c2b;border-color:rgba(148,163,184,.2);}
html[data-theme="dark"] .rt-modal .rt-modal-head strong{color:#f1f5f9;}
html[data-theme="dark"] body.rt-modal-open #up-result.rt-modal,
html[data-theme="dark"] body.rt-modal-open #jt-result.rt-modal{background:#0f172a;border-color:rgba(148,163,184,.24);}

/* ── 2026-09-17 傍晚反馈：取消补差/免单 + 报ABC 的一屏固定框架 ──
   用户反映固定一屏导致补差"上面需要滑动"，恢复为自然延伸、整页外层滚动。
   2026-09-25 用户指令：取消结果弹窗、改回内嵌向下自然展示 ——
   原把 #jt-resultPanel 移出视口的规则（position:absolute;left:-9999px）已删除，
   联报计算「生成结果」面板回归正常文档流，与双品联报的内嵌结果区一致。 */

/* ── 2026-09-17 报ABC 弹窗加大：三段话术完整呈现 ──
   弹窗更宽更高；弹窗内话术卡取消内部滚动（max-height:360px 那条），
   每段完整展开，超出部分由弹窗体统一滚动 */
body.rt-modal-open #jt-result.rt-modal,
body.rt-modal-open #up-result.rt-modal{
  width:min(1320px,96vw);
  max-height:93vh;
}
body.rt-modal-open #jt-result.rt-modal .rt-modal-body{padding:18px 22px 22px;}
body.rt-modal-open #jt-result.rt-modal .script-card-option .script-text,
body.rt-modal-open #jt-result.rt-modal .script-text{
  max-height:none!important;min-height:0!important;overflow:visible!important;
}
body.rt-modal-open #jt-result.rt-modal .script-card-option{min-height:0!important;}

/* ═══════════════ 2026-09-23：补差/免单生成结果弹窗 · 苹果半透明玻璃版（二轮：再降不透明度） ═══════════════
   一轮全白用户反馈"太白、字体不明显"，二轮改为苹果 frosted 风：
   壳 .64~.82 + blur(56px)、段卡 .55 + blur(18px)，透出底下页面内容有层次；
   文字整体加深一档（正文 #0f172a / 次要 #334155）保证半透明底上的对比。
   布局（hero 超大数字 / Bento 段卡 / 竖屏视图）与原版一致。 */

/* ── 1. 弹窗壳：半透明白玻璃（苹果 frosted 风：高 blur + saturate，透出底下页面） ── */
body.rt-modal-open #up-result.rt-modal{
  background:
    linear-gradient(158deg, rgba(255,255,255,.78) 0%, rgba(255,255,255,.64) 46%, rgba(255,255,255,.82) 100%) !important;
  backdrop-filter:blur(56px) saturate(180%);-webkit-backdrop-filter:blur(56px) saturate(180%);
  border:1px solid rgba(255,255,255,.65) !important;
  box-shadow:0 32px 90px rgba(15,23,42,.22), 0 4px 18px rgba(15,23,42,.12),
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(148,163,184,.22) !important;
}
/* 顶部高光光线：光从上方打在玻璃边缘（白壳上弱化） */
body.rt-modal-open #up-result.rt-modal::before{
  content:"";position:absolute;top:0;left:6%;right:6%;height:1px;z-index:3;pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%);
}
/* 对角镜面光泽：白壳上只留极淡的一层 */
body.rt-modal-open #up-result.rt-modal::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 40%);
}
/* 遮罩用全局默认（浅灰蓝 + blur），不再特殊加深/减淡 */
body.rt-glass .rt-mask{background:rgba(15,23,42,.38);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
/* 弹窗顶栏：更透的毛玻璃条 */
#up-result.rt-modal .rt-modal-head{background:rgba(255,255,255,.42);border-bottom:1px solid rgba(255,255,255,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
#up-result.rt-modal .rt-modal-head strong{color:#0f172a;letter-spacing:.01em;}
#up-result.rt-modal .rt-modal-head em{color:#475569;}
#up-result.rt-modal .rt-modal-close{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.75);color:#475569;}
#up-result.rt-modal .rt-modal-close:hover{background:rgba(255,255,255,.85);color:#0f172a;border-color:#cbd5e1;}
#up-result.rt-modal .rt-modal-body{padding:18px 24px 24px;}
#up-result.rt-modal .copy-btn{
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);color:#334155;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
#up-result.rt-modal .copy-btn:hover{background:rgba(255,255,255,.9);color:#0f172a;}
#up-result.rt-modal .seg-view-btn{background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.7);color:#475569;}
#up-result.rt-modal .seg-view-btn.active{background:rgba(219,234,254,.75);border-color:#93c5fd;color:#1d4ed8;}
#up-result .script-head b{color:#0f172a;font-weight:800;}
#up-result .script-head b .seg-en{display:inline-block;margin-left:10px;font-size:10.5px;font-weight:700;letter-spacing:.22em;color:rgba(29,110,245,.65);vertical-align:2px;}

/* ── 2. Hero：半透明白玻璃卡 + 蓝色渐变数字 ── */
#up-result .seg-hero{
  display:flex;flex-wrap:wrap;align-items:center;gap:22px 36px;
  padding:18px 22px;margin:0 0 16px;border-radius:20px;
  background:linear-gradient(120deg, rgba(255,255,255,.55), rgba(255,255,255,.3) 60%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 6px 20px rgba(15,23,42,.06), inset 0 1px 0 rgba(255,255,255,.85);
}
#up-result .seg-hero-main{display:flex;flex-direction:column;gap:2px;min-width:220px;}
#up-result .seg-hero-label{font-size:13px;font-weight:700;color:#334155;letter-spacing:.04em;}
#up-result .seg-hero-label i{font-style:normal;font-size:10px;letter-spacing:.24em;color:rgba(29,110,245,.6);margin-left:8px;}
#up-result .seg-hero-num{
  font-size:clamp(46px,4.6vw,72px);font-weight:800;line-height:1.05;letter-spacing:-.02em;
  background:linear-gradient(180deg, #0ea5e9, #1d4ed8);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#1d4ed8;
}
#up-result .seg-hero-num i{font-style:normal;font-size:.42em;font-weight:700;margin-right:4px;opacity:.85;}
#up-result .seg-hero-side{display:flex;flex-direction:column;gap:8px;margin-left:auto;min-width:250px;}
#up-result .seg-hero-kv span{display:block;font-size:11px;color:#64748b;letter-spacing:.05em;}
#up-result .seg-hero-kv span i{font-style:normal;font-size:9px;letter-spacing:.2em;color:rgba(29,110,245,.55);margin-left:6px;}
#up-result .seg-hero-kv b{font-size:15px;font-weight:800;color:#0f172a;}
#up-result .seg-hero-spark{width:150px;height:40px;color:#1d4ed8;opacity:.85;margin-top:2px;}

/* ── 3. 段卡：半透明白玻璃卡（文字加深保证对比） ── */
#up-result .seg-card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:all .35s cubic-bezier(.175,.885,.32,2.2);
}
/* 折射扭曲层保留质感 */
#up-result .seg-card::before{
  content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;
  filter:url(#glass-distortion);pointer-events:none;
}
/* 光泽层：左上角一道淡高光 */
#up-result .seg-card::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  background:linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 34%);
}
#up-result .seg-card > *{position:relative;z-index:1;}
#up-result .seg-card:hover{
  transform:translateY(-3px);border-radius:21px;
  background:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.95);
  box-shadow:0 16px 40px rgba(15,23,42,.13), inset 0 1px 0 rgba(255,255,255,.95);
}
#up-result .seg-card-head{padding-bottom:2px;}
#up-result .seg-card-num{
  display:inline-flex;align-items:baseline;gap:3px;
  padding:3px 10px;border-radius:999px;
  background:rgba(219,234,254,.8);border:1px solid #93c5fd;
  color:#1e40af;font-size:13px;font-weight:800;
}
#up-result .seg-card-num i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.18em;color:rgba(30,64,175,.65);}
#up-result .seg-card-content{color:#0f172a;line-height:1.75;}
#up-result .seg-card-caption{color:#64748b;}
#up-result .seg-card-img-el{border-radius:12px;}
#up-result .seg-card-divider{
  position:relative;overflow:hidden;background:rgba(255,255,255,.45);border:1px dashed #cbd5e1;border-radius:14px;color:#475569;
}
/* 编辑中的文本框保持高可读 */
#up-result .seg-card .seg-content,
#up-result .seg-inline-edit textarea{
  background:rgba(255,255,255,.95);color:#111827;border-radius:10px;border:1px solid #e2e8f0;
}

/* ── 4. 竖屏视图（整段式报价）适配：半透明玻璃同款质感 ── */
#up-result .script{
  position:relative;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.65);border-radius:16px;
  padding:16px 18px;color:#0f172a;
  box-shadow:0 8px 24px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.85);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
}
#up-result .img-block{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.65);border-radius:16px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
#up-result .img-block .img-head b{color:#0f172a;}
#up-result .img-note{color:#64748b;}
#up-result .script-divider .sd-label,
#up-result .seg-extra-text{color:#334155;}
#up-result .seg-type-tag{background:rgba(219,234,254,.8);border-color:#93c5fd;color:#1e40af;}

/* ── 5. 大屏适配（1920px+：hero 数字与卡片同步放大） ── */
@media (min-width:1600px){
  #up-result .seg-hero-num{font-size:clamp(60px,3.6vw,84px);}
  #up-result .seg-hero{padding:22px 26px;}
}

/* ═══════════════ 2026-09-17 晚二轮：左侧导航栏 · iOS 26 液态玻璃悬浮板 ═══════════════
   参照 App 资源库玻璃件：整块半透明白玻璃 + backdrop blur+saturate 透出底下内容、
   1px 亮边框、顶部高光/底部补光（inset）、大 U 型四角（32px 圆角）。
   侧栏从"贴边满高"改为四边悬浮（四周留 14px 缝），宽度相应减去 gap，
   topbar/workspace 仍按原 --sidebar-w 让位，无需改动布局变量。 */

:root{--sidebar-gap:14px;}

body.shell-ready .sidebar{
  left:var(--sidebar-gap);top:var(--sidebar-gap);bottom:var(--sidebar-gap);
  width:calc(var(--sidebar-w,180px) - var(--sidebar-gap));
  border:1px solid rgba(255,255,255,.68);
  border-radius:32px;
  background:linear-gradient(150deg,
    rgba(255,255,255,.64) 0%, rgba(255,255,255,.32) 40%,
    rgba(255,255,255,.16) 62%, rgba(255,255,255,.44) 100%);
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 22px 55px rgba(31,38,135,.16), 0 4px 14px rgba(31,38,135,.10),
    inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(255,255,255,.40);
}
/* 收起态：更窄的竖条玻璃 */
.shell.collapsed .sidebar{width:calc(var(--sidebar-collapsed-w,82px) - var(--sidebar-gap));border-radius:28px;}
@media (max-width:768px){
  body.shell-ready .sidebar{width:calc(var(--sidebar-collapsed-w,82px) - var(--sidebar-gap));border-radius:28px;}
}

/* 玻璃板上的行按钮：圆角略放大、悬停改为玻璃白 */
body.shell-ready .sidebar-btn,body.shell-ready .sidebar-toggle-btn,body.shell-ready .theme-btn{border-radius:14px;}
body.shell-ready .sidebar-btn:hover{background:rgba(255,255,255,.58);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
body.shell-ready .sidebar-btn.active{
  background:linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,247,237,.55));
  border-color:rgba(255,255,255,.9);
  box-shadow:0 10px 24px rgba(225,29,72,.12), inset 0 1px 0 rgba(255,255,255,.95);
}

/* 深色模式：烟蓝玻璃 */
body[data-theme="dark"].shell-ready .sidebar{
  background:linear-gradient(150deg,
    rgba(51,65,85,.58) 0%, rgba(15,23,42,.40) 45%, rgba(30,41,59,.52) 100%);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 22px 55px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.06);
}
body[data-theme="dark"].shell-ready .sidebar-btn:hover{background:rgba(255,255,255,.08);}

/* ═══════════════ 2026-09-17 晚：精致通知（苹果风玻璃 Toast，全局 toast() 的新皮肤） ═══════════════
   参照 deepseek 精致通知示例：右上角滑入玻璃卡（rotateY 入场）、彩色图标、标题/正文、
   底部倒计时进度条（悬停暂停）、× 手动关闭、同屏最多 5 条。
   深色跟随应用内主题切换（html[data-theme]），非系统偏好；z-index 高于结果弹窗（3000）。

   ── 2026-09-29 用户指令：「右上角的提示更快结束，不要太抢眼」───────────────────────
   两处收口：
     ① 时长（在 app.js 的 qtNotify 里）：error 3500→2600 / warning 2800→1800 / info·success 2000→1400
        （历史：2026-09-24 已从 3800/5000/6000 提速过一次，这次再收一档）
     ② 观感降权（本节）：
        · 卡片瘦一圈：min-width 280→232、max-width 380→320、padding 14/16/16→11/13/12、radius 14→11
        · 字号降一档：14→13，正文 13→12.5，标题 14→13
        · 图标 32→26（svg 18→14）
        · 玻璃与投影都收：blur 20→16 saturate 180%→150%；阴影从 24px/10% 收到 14px/7%
        · **入场动画去掉 3D 翻转**：原来 translateX(120%)+rotateY(-12deg)+scale(.92) 太"炸"，
          改成 translateX(26px)+scale(.98) 的轻推入，.45s→.26s
        · 容器 top/right 24→20、条目间距 12→9
   ⚠️ 改时长在 app.js 的 qtNotify()，改观感在本节 —— 两处要一起改才叫"更快更淡"。 */

#qt-notify{
  --nbg-card:rgba(255,255,255,.85);
  --ntext-main:#1f2329;--ntext-sub:#8a9099;
  --nborder:rgba(0,0,0,.06);
  --nshadow:0 4px 14px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.03);
  position:fixed;top:20px;right:20px;z-index:9999;
  display:flex;flex-direction:column;gap:9px;pointer-events:none;perspective:1000px;
}
html[data-theme="dark"] #qt-notify{
  --nbg-card:rgba(38,40,46,.88);
  --ntext-main:#f2f3f5;--ntext-sub:#9aa0a8;
  --nborder:rgba(255,255,255,.10);
  --nshadow:0 4px 14px rgba(0,0,0,.34),0 1px 3px rgba(0,0,0,.2);
}
/* 旧 #toast 已被新通知取代，彻底隐藏避免万一的双弹 */
#toast{display:none!important;}

.toast-wrapper{
  overflow:hidden;pointer-events:auto;will-change:height;
  transition:height .26s cubic-bezier(.22,1,.36,1),opacity .22s ease;
}
.toast-card{
  position:relative;min-width:232px;max-width:320px;
  padding:11px 13px 12px;border-radius:11px;
  background:var(--nbg-card);
  backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid var(--nborder);box-shadow:var(--nshadow);
  display:flex;align-items:flex-start;font-size:13px;color:var(--ntext-main);overflow:hidden;
  transform:translateX(26px) scale(.98);opacity:0;transform-origin:right center;
  transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .22s ease;
}
.toast-card.show{transform:translateX(0) scale(1);opacity:1;}
.toast-card.hide{transform:translateX(14px) scale(.98);opacity:0;transition:transform .18s ease,opacity .16s ease;}

.toast-icon{width:26px;height:26px;flex-shrink:0;margin-right:10px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.toast-icon svg{width:14px;height:14px;}
.toast-success .toast-icon{background:rgba(52,199,89,.15);}
.toast-warning .toast-icon{background:rgba(255,159,10,.15);}
.toast-error   .toast-icon{background:rgba(255,69,58,.15);}
.toast-info    .toast-icon{background:rgba(10,132,255,.15);}

.toast-body{flex:1;min-width:0;padding-top:1px;}
.toast-title{font-weight:600;font-size:13px;margin-bottom:2px;color:var(--ntext-main);}
.toast-success .toast-title{color:#34c759;}
.toast-warning .toast-title{color:#ff9f0a;}
.toast-error   .toast-title{color:#ff453a;}
.toast-info    .toast-title{color:#0a84ff;}
.toast-message{font-size:12.5px;line-height:1.45;color:var(--ntext-sub);word-break:break-word;}

.toast-close{
  flex-shrink:0;width:20px;height:20px;margin-left:6px;border:none;background:transparent;
  color:var(--ntext-sub);font-size:15px;line-height:1;cursor:pointer;padding:0;border-radius:6px;
  opacity:0;transition:opacity .2s,background .2s,color .2s;
}
.toast-card:hover .toast-close{opacity:1;}
.toast-close:hover{background:var(--nborder);color:var(--ntext-main);}

.toast-progress{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  transform-origin:left center;border-radius:0 0 11px 11px;
}
.toast-success .toast-progress{background:#34c759;}
.toast-warning .toast-progress{background:#ff9f0a;}
.toast-error   .toast-progress{background:#ff453a;}
.toast-info    .toast-progress{background:#0a84ff;}
.toast-progress.running{animation:qtToastShrink linear forwards;}
@keyframes qtToastShrink{from{transform:scaleX(1);}to{transform:scaleX(0);}}
@media (prefers-reduced-motion:reduce){
  .toast-card,.toast-wrapper,.toast-progress{transition:none!important;animation:none!important;}
}
@media (max-width:640px){
  #qt-notify{top:12px;right:12px;left:12px;align-items:stretch;}
  .toast-card{min-width:0;max-width:none;width:100%;}
}

/* ═══════════════ 2026-09-17 晚三轮：各板块工作台 · 液态玻璃悬浮板（同左侧导航栏语言） ═══════════════
   每个工作台 section（.workspace > .panel）从贴底大块改为四边悬浮玻璃板：
   半透明渐变 + backdrop blur/saturate + 1px 亮边 + 顶部高光/底部补光 + 30px U 型四角。
   工作区背景补两团环境光斑（蓝/橙），让大玻璃板"透"出色彩层次而不发灰。
   关键防回归：玻璃板的 backdrop-filter 会成为 fixed 后代的包含块，
   弹窗打开期间必须中和（见本块末尾），否则补差/免单弹窗会定位回原点。 */

/* ── 1. 工作区环境光：原 --ui-bg 基础上补蓝/橙/绿三团柔光（后声明覆盖同 token） ── */
:root{
  --ui-bg:
    radial-gradient(1200px 600px at 12% -8%, #fff7f0 0%, rgba(255,247,240,0) 55%),
    radial-gradient(1000px 520px at 108% 4%, #fff1f2 0%, rgba(255,241,242,0) 52%),
    radial-gradient(1000px 560px at 86% 78%, rgba(10,132,255,.11) 0%, rgba(10,132,255,0) 60%),
    radial-gradient(900px 540px at 3% 88%, rgba(249,115,22,.12) 0%, rgba(249,115,22,0) 60%),
    radial-gradient(820px 480px at 52% 108%, rgba(52,199,89,.07) 0%, rgba(52,199,89,0) 60%),
    #f5f0f2;
}
body[data-theme="dark"]{
  --ui-bg:
    radial-gradient(1100px 600px at 12% -8%, rgba(249,115,22,.10) 0%, rgba(249,115,22,0) 55%),
    radial-gradient(1000px 520px at 108% 4%, rgba(225,29,72,.10) 0%, rgba(225,29,72,0) 52%),
    radial-gradient(1000px 560px at 86% 78%, rgba(10,132,255,.12) 0%, rgba(10,132,255,0) 60%),
    #0a0f1c;
}

/* ── 2. 浅色：工作台玻璃板（> 只命中 section 层，不碰内部 .panel 小卡） ── */
body.shell-ready .workspace > .panel{
  margin:0 22px 26px 36px;
  background:linear-gradient(160deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.34) 42%, rgba(255,255,255,.46) 100%) !important;
  backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
  border:1px solid rgba(255,255,255,.64) !important;
  border-radius:30px !important;
  box-shadow:0 26px 60px rgba(31,38,135,.12), 0 4px 16px rgba(31,38,135,.07),
    inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.35) !important;
}
/* ── 3. 深色：烟蓝玻璃（四个 flush 面板的 ID 级深色规则已同步改为玻璃值） ── */
html[data-theme="dark"] body.shell-ready .workspace > .panel{
  background:linear-gradient(160deg, rgba(30,41,59,.55) 0%, rgba(15,23,42,.40) 42%, rgba(30,41,59,.50) 100%) !important;
  border-color:rgba(255,255,255,.15) !important;
  box-shadow:0 26px 60px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.05) !important;
}

/* ── 4. 防回归：结果弹窗打开期间中和玻璃板的 backdrop-filter（fixed 包含块问题） ── */
body.rt-modal-open .workspace > .panel{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* ── 5. 窄屏：缩边距保内容宽度 ── */
@media (max-width:768px){
  body.shell-ready .workspace > .panel{margin:0 10px 16px 16px;border-radius:24px!important;}
}

/* ═══════════════ 2026-09-17 晚四轮：顶部导航栏 · 液态玻璃悬浮板（同左侧导航栏语言） ═══════════════
   顶栏从通栏贴顶改为悬浮玻璃条：上留 14px 缝、左右与工作台玻璃板对齐（左=侧栏让位+36px、右=22px）、
   22px 圆角、半透明渐变 + blur/saturate + 亮边 + 顶光/底光。
   唤出时把工作区推到 padding-top:96px（14 缝 + ~64 栏高 + 18 缝），玻璃条与工作台之间始终有呼吸距离。
   隐藏位移改为 -130%，确保连 14px 上缝一起收干净。 */

body.shell-ready .topbar{
  top:14px;
  left:calc(var(--sidebar-w,180px) + 36px);
  right:22px;
  min-height:64px;
  padding:8px 20px;
  border:1px solid rgba(255,255,255,.68) !important;
  border-radius:22px !important;
  background:linear-gradient(150deg,
    rgba(255,255,255,.64) 0%, rgba(255,255,255,.32) 40%,
    rgba(255,255,255,.16) 62%, rgba(255,255,255,.44) 100%) !important;
  backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 22px 55px rgba(31,38,135,.14), 0 4px 14px rgba(31,38,135,.08),
    inset 0 1px 0 rgba(255,255,255,.90), inset 0 -1px 0 rgba(255,255,255,.40) !important;
}
.shell.collapsed .topbar{left:calc(var(--sidebar-collapsed-w,82px) + 36px);}

/* 2026-09-25：此处原有「自动唤出模式」残留两条 ——
   body.topbar-auto .topbar{transform:translateY(-130%);}
   body.topbar-auto.topbar-show .workspace{padding-top:96px;}
   这是「自动隐藏」机制的第二份拷贝（第一份已在本文件顶部整体删除）。
   它本身没有 !important，平时被末尾悬浮段的 transform:none 压住而看不出问题；
   但一旦 CSS 版本不一致（缓存陈旧 / 部署未更新）就会立刻生效 → 顶栏被推高 130% 随滚动滑走，
   正是用户 2026-09-25 反馈的症状。故一并删除，彻底消除隐患。
   （工作区让位 padding-top 由末尾悬浮段统一负责，此处删除不影响布局。） */

/* 深色：烟蓝玻璃（同侧栏深色配方） */
body[data-theme="dark"].shell-ready .topbar{
  background:linear-gradient(150deg,
    rgba(51,65,85,.58) 0%, rgba(15,23,42,.40) 45%, rgba(30,41,59,.52) 100%) !important;
  border-color:rgba(255,255,255,.16) !important;
  box-shadow:0 22px 55px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(255,255,255,.06) !important;
}

/* 窄屏：小缝小圆角 */
@media (max-width:768px){
  body.shell-ready .topbar{
    top:10px;left:calc(var(--sidebar-collapsed-w,82px) + 16px);right:10px;
    border-radius:18px !important;min-height:56px;
  }
  /* 2026-09-25：原 body.topbar-auto.topbar-show .workspace{padding-top:84px;} 属自动隐藏残留，
     已删除；窄屏让位由末尾悬浮段的 64px 规则统一负责。 */
}

/* ═════════════════════════════════════════════════════════════════════
   ═══ 2026-09-18 侧栏分组导航 + 主品补差面板 ═══
   1) .sidebar-group/.sidebar-parent/.sidebar-sub：两级导航（套餐计算 / 主品补差）
   2) .upd-*：主品补差（预计算话术）工作台
   ═════════════════════════════════════════════════════════════════════ */

/* ── 1. 侧栏分组导航 ── */
.sidebar-group{display:flex;flex-direction:column;gap:4px;}
.sidebar-btn.sidebar-parent{font-weight:800;}
.sidebar-btn.sidebar-parent .sidebar-caret{
  margin-left:auto;flex:0 0 auto;width:16px;height:16px;position:relative;opacity:.6;
  transition:transform .18s ease,opacity .18s ease;
}
.sidebar-btn.sidebar-parent .sidebar-caret::before{
  content:"";position:absolute;inset:0;
  background:currentColor;opacity:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4-1.4L14.6 12 9.3 6.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.3 5.3a1 1 0 0 1 1.4 0l6 6a1 1 0 0 1 0 1.4l-6 6a1 1 0 0 1-1.4-1.4L14.6 12 9.3 6.7a1 1 0 0 1 0-1.4Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.sidebar-group.open > .sidebar-btn.sidebar-parent .sidebar-caret{transform:rotate(90deg);opacity:.9;}
.sidebar-group.has-active > .sidebar-btn.sidebar-parent{color:#e11d48;}
body[data-theme="dark"] .sidebar-group.has-active > .sidebar-btn.sidebar-parent{color:#fdba74;}
/* 子项：缩进 + 无右侧呼吸灯，避免与父项抢视线 */
.sidebar-subitems{display:none;flex-direction:column;gap:3px;padding-left:14px;margin-left:11px;border-left:1px solid rgba(249,115,22,.2);}
.sidebar-group.open > .sidebar-subitems{display:flex;}
body[data-theme="dark"] .sidebar-subitems{border-left-color:rgba(251,146,60,.24);}
.sidebar-btn.sidebar-sub{min-height:38px;font-size:13.5px;font-weight:700;padding:7px 11px;}
.sidebar-btn.sidebar-sub::before{width:17px;height:17px;opacity:.7;}
.sidebar-btn.sidebar-sub.active::after{width:6px;height:6px;right:8px;}
/* 收起态：隐藏子项与箭头，父项只留图标 */
.shell.collapsed .sidebar-subitems{display:none !important;}
.shell.collapsed .sidebar-btn.sidebar-parent .sidebar-caret{display:none;}

/* ── 2. 主品补差面板 ── */
/* 2026-09-25：作用域由 #panel-updiff 改为工作台容器 #qp-updiff-content（5→1 整合后 <main> 已搬走） */
#qp-updiff-content .upd-shell{max-width:1800px;margin:0 auto;padding:26px 22px 10px;display:flex;flex-direction:column;gap:14px;}
.upd-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.upd-switch{display:inline-flex;padding:4px;gap:4px;border:1px solid #fed7aa;border-radius:12px;background:#fff7ed;}
.upd-switch-btn{border:1px solid transparent;border-radius:9px;background:transparent;color:#9a3412;font:inherit;font-size:14px;font-weight:800;padding:8px 24px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;font-family:inherit;}
.upd-switch-btn:hover{color:#c2410c;}
.upd-switch-btn.active{background:#fff;border-color:#fdba74;color:#c2410c;box-shadow:0 4px 12px -6px rgba(234,88,12,.5);}
.upd-summary{font-size:13px;font-weight:700;color:#64748b;}
.upd-summary strong{color:#c2410c;font-weight:900;}
/* ═══ 补差 / 免单 · 左右分栏版式（2026-09-30 用户指令第八轮） ═══
   用户原话：「把补差和免单都做成和联报一样，左右分区」→ 与 #qp-jointquote 同一套框架，
   只是左栏走**240px 紧凑版**（用户选定；右栏给话术卡留最大宽度 —— 补差/免单结果是**多卡并排**，
   左栏越宽每张卡越窄）。
   左栏 = 配置区（① 产品选择 → ② 首单金额 + 概要），右栏 = 结果区（档位卡）。
   ⚠️ 纯版式改造：口径 / 话术文案 / is-single 触发逻辑（app-updiff.js `tiers.length===1`）一行未动。
   ⚠️ 左栏 sticky 吸顶 top 必须让开**固定顶栏**（top:14 + 高 64 → 底边 78px → 用 88px，同联报）。
   ⚠️ 左栏**不加 overflow**（页面本身在滚，加了会出两条滚动条）。 */
#qp-updiff-content .ud-split{
  display:grid;
  /* 列宽 240→260（2026-10-08：放大产品选择）。⚠️ 上限卡在 260px 是**硬的**：
     updiff-verify 在 1500 视口断言「补差 4 张档位卡每张 ≥220px」，板宽 = 1216−左栏−18，
     260 → 板宽 938 → 每卡 222px（留 2px 余量）。再宽 1 档就会掉到 219px 而挂回归。 */
  grid-template-columns:minmax(236px,260px) minmax(0,1fr);
  gap:18px;align-items:start;
}
.ud-left{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px;min-width:0;}
.ud-sec{border:1px solid #eef2f7;border-radius:16px;background:#fff;padding:13px 13px 15px;box-shadow:0 10px 24px -20px rgba(15,23,42,.4);}
.ud-sec-hd{display:flex;align-items:center;gap:8px;margin-bottom:11px;}
.ud-sec-ico{
  flex:0 0 auto;width:24px;height:24px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
  background:#fff1e6;border:1px solid #fed7aa;
}
.ud-sec-tt{font-size:13.5px;font-weight:900;color:#0f172a;letter-spacing:.01em;}
/* 2026-10-08 用户指令：第一眼视线落点＝「产品选择」（高频操作区）→ 主区头部加粗放大、
   次要区块（首单金额 / 套餐配置）保持常规，形成主次层级。 */
.ud-left .ud-sec:first-child .ud-sec-tt,.jp-left .jp-sec:first-child .jp-sec-tt{font-size:15px;}
.ud-left .ud-sec:first-child .ud-sec-ico,.jp-left .jp-sec:first-child .jp-sec-ico{background:#ffedd5;border-color:#fdba74;}
/* 左栏紧凑版：主品 2 列、金额 chips 2 列网格（2026-10-08：列宽 240→276，卡与芯片放大一档） */
.ud-left .upd-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.ud-left .upd-prod{padding:11px 8px 10px;gap:6px;border-radius:13px;min-height:104px;}
.ud-left .upd-prod-media{height:58px;}
.ud-left .upd-prod-name{font-size:12.6px;}
/* ⚠️ 金额芯片改用 **2 列网格**：原 flex `calc(50% - Npx)` 在 7 档奇数时最后一片会被拉满整行
   （补差/免单的 1573 实测就是整行独占），网格可保持等宽半行、上下对齐。 */
.ud-left .upd-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.ud-left .upd-amt{min-width:0;width:100%;padding:9px 10px;border-radius:11px;}
.ud-left .upd-amt b{font-size:14.5px;}
.ud-left .upd-amt i{font-size:11px;}
.ud-sec .upd-summary{margin-top:10px;font-size:12.5px;line-height:1.55;}
.ud-right{display:flex;flex-direction:column;gap:12px;min-width:0;
  /* 容器查询上下文：给 .upd-segs 的「福利配图」跨格数判断用（见下方 @container） */
  container-type:inline-size;container-name:udright;}
/* 暗色 */
body[data-theme="dark"] .ud-sec{background:rgba(17,24,39,.82);border-color:rgba(148,163,184,.22);box-shadow:none;}
body[data-theme="dark"] .ud-sec-tt{color:#f1f5f9;}
body[data-theme="dark"] .ud-sec-ico{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.35);}
/* 窄屏：折成单栏（左栏两个配置区**横排**在结果上方，省纵向空间），左栏取消吸顶。
   断点取 1480px（比联报的 1180px 早得多）—— 补差/免单右栏是**多卡并排**：
   3 张卡要 ~930px 才不挤，视口 <1472 时「左栏 240px + 3 卡」必然把卡片压到 <300px
   （实测 1366 屏：3 卡仅 265px，正文换行到没法看）。宁可折单栏，也不出窄卡。 */
@media (max-width:1480px){
  #qp-updiff-content .ud-split{grid-template-columns:1fr;}
  .ud-left{position:static;flex-direction:row;flex-wrap:wrap;}
  .ud-left .ud-sec{flex:1 1 320px;}
  .ud-left .upd-products{grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;}
  /* 折单栏后左栏变宽 → 金额芯片从固定 2 列改为按宽度自适应（仍是网格，尾片不拉满整行） */
  .ud-left .upd-amounts{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
  .ud-left .upd-amt{min-width:0;width:100%;padding:9px 13px;}
  .ud-left .upd-amt b{font-size:15px;}
  .ud-left .upd-amt i{font-size:11.5px;}
}
/* ═══ 「联报」独立面板（2026-09-28 用户指令第三轮） ═══
   ⚠️ 用户要求「原来的补差和免单不动」→ 联报不再内嵌 #panel-updiff，
      改为报价表顶栏独立入口 + 独立 pane（#qp-joint），panel 源在 index.html。
   面板结构复用补差/免单的 .upd-* 视觉（全局类），卡体复用完整套餐直出卡 .uq-card-board。 */
#qp-jointquote-content .upd-shell{max-width:1800px;margin:0 auto;padding:26px 22px 10px;display:flex;flex-direction:column;gap:14px;}
/* ═══ 联报 · 左右分栏版式（2026-09-30 用户指令第七轮） ═══
   左栏 = 配置区（① 产品选择 → ② 首单金额 → ③ 套餐配置/AB选择），右栏 = 结果区（话术分段）。
   ⚠️ 纯版式改造：口径 / 话术文案 / 计算方式一行未动（仍全部来自 window._qtJoint）。
   ⚠️ 左栏 sticky（吸顶），右栏随页面滚 —— 左栏**不加 overflow**，避免出现两条滚动条。
   2026-09-30 用户指令（第九轮）：「联报的左侧的选项也和补差还有免单一样，窄点」
   → 左栏由 `minmax(330px,430px)` 收成 **240px 紧凑版**（与 #qp-updiff-content .ud-left 同宽同风格）：
     主品 2 列、金额 chips 每行 2 个、字号整体下调一档。 */
#qp-jointquote-content .jp-split{
  display:grid;
  /* 列宽沿革：160→240（2026-09-30 第九轮「窄点」）→ 276（2026-10-08 放大产品选择）
     → **384（2026-10-08 第二轮：用户反馈「左侧过窄不易点选」）**。
     276 时产品卡只有 119px 宽，9 个主品排 2 列后点击热区偏小；384 时每卡约 170px，
     热区明显变大，且长名（「白密码饮品」「双肽黑松露PQQ」）不再折行。
     ⚠️ 加宽**只动这一处**：产品/金额芯片全部是 `minmax(0,1fr)` 等分，自动跟随，无需改别处。
     ⚠️ 与补差/免单的 260 上限无关 —— 那是 updiff-verify「档位卡 ≥220px」回归的硬约束，
        本模块（联报）不在该断言范围内，故可放心加宽。
     ⚠️ 上限受 .jp-left 的 max-height(100vh-108) + overflow 约束，超出的部分左栏内部滚动
        （与排行榜 .rk2-left 同手法），不影响右侧话术栏。 */
  grid-template-columns:minmax(320px,384px) minmax(0,1fr);
  gap:18px;align-items:start;
}
/* ⚠️ 左栏吸顶的 top 必须让开**固定的悬浮顶栏**（top:14 + 高 64 → 底边 78px），
   否则滚动时第一排产品卡会被顶栏压住。88 = 78 + 10px 呼吸缝。
   2026-09-30（第九轮）：左栏收窄到 240px 后，9 个主品从 3 列变 2 列 → 左栏高 **1066px**，
   超过「视口 − 88」的可用高度（1100 屏超 54px、820 屏超 334px）→ 吸顶后**底部的
   「套餐配置」永远滚不到**。故补 `max-height + overflow-y:auto` 自滚动兜底：
   内容装得下时不会出现滚动条，装不下时只滚左栏（与排行榜 .rk2-left 同一手法）。
   ⚠️ 注意：第七轮「别给 .jp-left 加 overflow」的前提是左栏 ~880px 装得下，现已不成立。 */
.jp-left{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px;min-width:0;
  max-height:calc(100vh - 108px);overflow-y:auto;overscroll-behavior:contain;}
.jp-sec{
  border:1px solid #eef2f7;border-radius:16px;background:#fff;padding:13px 14px 15px;
  box-shadow:0 10px 24px -20px rgba(15,23,42,.4);
}
.jp-sec-hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px;}
.jp-sec-ico{
  flex:0 0 auto;width:24px;height:24px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;line-height:1;
  background:#fff1e6;border:1px solid #fed7aa;
}
.jp-sec-tt{font-size:14px;font-weight:900;color:#0f172a;letter-spacing:.01em;}
/* 2026-10-08：区块说明是「次要信息」→ 弱化（更浅更小），把注意力让给选择控件本身 */
.jp-sec-hint{margin-left:auto;font-size:11px;font-weight:600;color:#94a3b8;text-align:right;}
/* 左栏主品卡（2026-10-08 第二轮：列宽 276→384，卡片跟着再放大一档 ——
   用户反馈「左侧过窄不易点选」，加宽后每卡约 170×112px，整卡可点，热区充足） */
.jp-left .upd-products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.jp-left .upd-prod{padding:12px 11px 11px;gap:7px;border-radius:14px;min-height:112px;}
.jp-left .upd-prod-media{height:66px;}
.jp-left .upd-prod-name{font-size:13.4px;}
/* 联报左栏有 9 个主品 + 7 档金额 + 套餐勾选，纵向本来就吃紧（原 240px 时已 1066px > 可用高度，
   故 .jp-left 自带 max-height + 内滚动）→ 金额 / 勾选芯片走 2 列网格，省掉 odd 尾片占整行的高度。 */
.jp-left .upd-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.jp-left .upd-amt{min-width:0;width:100%;padding:9px 10px;border-radius:11px;}
.jp-left .upd-amt b{font-size:14.5px;}
.jp-left .upd-amt i{font-size:11px;}
/* 选中主品右上角勾选角标（借参考截图的卡片样式）
   2026-10-08 用户指令：「让产品名称、价格、选中状态更醒目」→ 由「只作用于联报」扩到
   **补差 / 免单 / 联报三处一致**（同款勾选角标 + 同款橙色描边），选中态一眼可辨。 */
:is(#qp-updiff-content,#qp-jointquote-content) .upd-prod{position:relative;}
:is(#qp-updiff-content,#qp-jointquote-content) .upd-prod.active::after{
  content:"✓";position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;line-height:1;
  color:#fff;background:#ea580c;box-shadow:0 2px 7px -2px rgba(234,88,12,.85);
}
.jp-sec .upd-summary{margin-top:10px;line-height:1.6;}
.jp-sec #jp-picks .upd-amounts-empty{padding:11px 13px;font-size:12.5px;}
/* 双品/三品联报（2026-10-12 双品 / 2026-10-13 三品 / 2026-10-12 二轮：用户截图反馈
   「过于紧凑、产品信息之间缺少间距与呼吸感、层次不够分明」）→ 把商品 A / B / C 各封成一张
   **子卡片**：淡底 #f8fafc + 14px 圆角 + 内边距，卡片之间 12px 呼吸；卡片内「区块头 → 产品芯片
   → 档位芯片」按 10px 纵向间距分段；档位走 2 列网格并把内边距放大一档，点选热区更舒服。
   产品名长短不一（「麦角硫因NAD+」）→ 产品芯片仍是自适应 flex 换行，不吃 2 列网格。
   ⚠️ 芯片宽度必须写 `width:auto`（下面用 (0,3,0) 的 `.jp-left .jp-dual-chips` 压过
      `.jp-left .upd-amt{width:100%}`，否则每个产品名都被撑成单列整行）。 */
.jp-dual-side{
  display:flex;flex-direction:column;gap:10px;
  border:1px solid #eef2f7;border-radius:14px;background:#f8fafc;padding:12px 13px 14px;
}
.jp-dual-side + .jp-dual-side{margin-top:12px;}
.jp-dual-side .jp-sec-hd{margin-bottom:0;}
.jp-dual-chips{display:flex;flex-wrap:wrap;gap:9px;}
.jp-left .jp-dual-chips .upd-amt{min-width:0;width:auto;flex:0 1 auto;padding:9px 13px;border-radius:11px;}
.jp-left .jp-dual-chips .upd-amt b{font-size:13.5px;}
/* 档位芯片：2 列网格 + 更大的间距/内边距（层次分明、好点） */
.jp-dual-side .upd-amounts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.jp-dual-side .upd-amounts .upd-amt{padding:12px;border-radius:12px;}
.jp-dual-side .upd-amounts .upd-amt b{font-size:15px;}
.jp-dual-side .upd-amounts .upd-amt i{font-size:11.5px;margin-top:4px;color:#64748b;}
/* 右栏：状态条 + 结果卡 */
.jp-right{display:flex;flex-direction:column;gap:12px;min-width:0;}
.jp-syncbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid #bbf7d0;border-radius:14px;padding:10px 14px;
  background:linear-gradient(135deg,#f0fdf4,#ffffff);
}
.jp-sync-badge{
  flex:0 0 auto;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:900;
  color:#fff;background:#15803d;
}
.jp-sync-badge.is-idle{background:#64748b;}
.jp-sync-text{font-size:12.5px;font-weight:700;color:#15803d;}
.jp-sync-badge.is-idle + .jp-sync-text{color:#64748b;}
.jp-copy-all{margin-left:auto;flex:0 0 auto;}
.jp-copy-all[disabled]{opacity:.5;cursor:not-allowed;}
/* 暗色 */
body[data-theme="dark"] .jp-sec{background:rgba(17,24,39,.82);border-color:rgba(148,163,184,.22);box-shadow:none;}
body[data-theme="dark"] .jp-sec-tt{color:#f1f5f9;}
body[data-theme="dark"] .jp-sec-hint{color:#94a3b8;}
body[data-theme="dark"] .jp-sec-ico{background:rgba(251,146,60,.14);border-color:rgba(251,146,60,.35);}
/* 组合子卡片（2026-10-12 二轮）：深色下用比 .jp-sec 略亮的一层，保持「卡片内嵌卡片」的层次；
   档位芯片的盒数注脚在浅色下压深一档（#64748b），深色下回到 #94a3b8 才够亮。 */
body[data-theme="dark"] .jp-dual-side{background:rgba(30,41,59,.55);border-color:rgba(148,163,184,.22);}
body[data-theme="dark"] .jp-dual-side .upd-amounts .upd-amt i{color:#94a3b8;}
body[data-theme="dark"] .jp-syncbar{background:rgba(22,163,74,.13);border-color:rgba(34,197,94,.34);}
body[data-theme="dark"] .jp-sync-text{color:#86efac;}
body[data-theme="dark"] .jp-sync-badge{background:#166534;}
body[data-theme="dark"] .jp-sync-badge.is-idle{background:#475569;}
body[data-theme="dark"] .jp-sync-badge.is-idle + .jp-sync-text{color:#94a3b8;}
/* 窄屏：折成单栏，左栏取消吸顶（否则会和页面滚动打架）；
   左栏三个配置区**横排**在结果上方，省纵向空间（同补差/免单的 .ud-left 手法）。 */
/* 1181~1400 的中等屏：左栏上限收到 340（2026-10-08 加宽到 384 后，1181px 时右栏只剩 ~495px，
   话术行过短）—— 只在窄区间让步，宽屏仍是 384 的舒适热区。 */
@media (min-width:1181px) and (max-width:1400px){
  #qp-jointquote-content .jp-split{grid-template-columns:minmax(300px,340px) minmax(0,1fr);}
}
@media (max-width:1180px){
  #qp-jointquote-content .jp-split{grid-template-columns:1fr;}
  .jp-left{position:static;max-height:none;overflow:visible;flex-direction:row;flex-wrap:wrap;}
  .jp-left .jp-sec{flex:1 1 320px;}
  .jp-left .upd-products{grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px;}
  .jp-left .upd-amounts{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
  .jp-left .upd-amt{min-width:0;width:100%;padding:9px 13px;}
  .jp-left .upd-amt b{font-size:15px;}
  .jp-left .upd-amt i{font-size:11.5px;}
}
.jp-board{display:block;}
.jp-card{border-color:#fdba74;}
/* 档位不足 2 个（或无可升级方案）时的原因行 —— 说清"为什么没有联报" */
.jp-empty{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px dashed #fed7aa;border-radius:14px;padding:12px 16px;background:linear-gradient(135deg,#fff7ed,#fff);}
.jp-empty b{font-size:13.5px;font-weight:900;color:#c2410c;white-space:nowrap;}
.jp-empty span{font-size:12.5px;font-weight:600;color:#9a3412;line-height:1.65;}
.jp-empty span strong{color:#c2410c;font-weight:900;}
body[data-theme="dark"] .jp-card{border-color:rgba(251,146,60,.42);}
body[data-theme="dark"] .jp-empty{background:rgba(234,88,12,.12);border-color:rgba(251,146,60,.35);}
body[data-theme="dark"] .jp-empty b,body[data-theme="dark"] .jp-empty span{color:#fdba74;}
/* 联报：候选档位自由勾选（2026-09-30 用户指令 —— AB / ABC / BC / AC）。
   复用 .upd-amounts / .upd-amt 芯片视觉，只补外层标签与说明文字。 */
.jp-picks{margin:0 0 12px;}
.jp-picks-label{font-size:12.5px;font-weight:800;color:#64748b;letter-spacing:.02em;}
.jp-picks-hint{font-size:11.5px;font-weight:700;color:#64748b;}
.jp-picks-hint.is-warn{color:#c2410c;}
body[data-theme="dark"] .jp-picks-label,body[data-theme="dark"] .jp-picks-hint{color:#94a3b8;}
body[data-theme="dark"] .jp-picks-hint.is-warn{color:#fdba74;}
@media (max-width:768px){ #qp-jointquote-content .upd-shell{padding:18px 14px 10px;} }
/* 主品选择（横向卡）—— 2026-10-08 用户指令：整体放大、名称加深、选中更醒目 */
.upd-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;}
.upd-prod{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 9px 11px;border:1.5px solid #e2e8f0;border-radius:14px;background:#fff;font:inherit;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;}
.upd-prod:hover{border-color:#fdba74;background:#fffbf7;transform:translateY(-1px);}
.upd-prod.active{border-color:#ea580c;background:#fff7ed;box-shadow:0 10px 22px -14px rgba(234,88,12,.6);}
.upd-prod-media{width:100%;height:70px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.upd-prod-media img{max-width:100%;max-height:100%;object-fit:contain;}
.upd-prod-name{font-size:13px;font-weight:800;color:#334155;text-align:center;line-height:1.35;}
.upd-prod.active .upd-prod-name{color:#c2410c;font-weight:900;}
/* 首单金额选择 */
.upd-amounts{display:flex;flex-wrap:wrap;gap:8px;}
.upd-amt{display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:76px;padding:8px 12px;border:1.5px solid #e2e8f0;border-radius:11px;background:#fff;font:inherit;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;}
.upd-amt b{font-size:14px;font-weight:900;color:#334155;font-variant-numeric:tabular-nums;line-height:1.2;}
.upd-amt i{font-size:11px;font-style:normal;font-weight:700;color:#94a3b8;line-height:1.2;}
.upd-amt:hover{border-color:#fdba74;background:#fffbf7;}
.upd-amt:hover b{color:#c2410c;}
.upd-amt.active{border-color:#ea580c;background:#fff7ed;box-shadow:0 8px 18px -14px rgba(234,88,12,.75);}
.upd-amt.active b{color:#c2410c;}
.upd-amt.active i{color:#ea580c;}
.upd-amounts-empty{padding:12px 14px;border:1px dashed #e2e8f0;border-radius:11px;color:#94a3b8;font-size:13px;font-weight:700;background:#fafafa;}
/* 拼团 / 秒杀面板的「进线金额」选择条（2026-09-23）
   复用补差面板的 .upd-amounts / .upd-amt 视觉，只补一层带标签的外层与对齐 */
.uq-inline-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;width:100%;margin:0 0 16px;}
.uq-inline-bar-label{flex:none;font-size:12.5px;font-weight:800;color:#94a3b8;letter-spacing:.02em;}
body[data-theme="dark"] .uq-inline-bar-label{color:#64748b;}
/* 2026-09-22 用户指令：拼团 / 秒杀面板要和「免单 / 补差」一样铺满工作台。
   原来这两个面板的 .library-shell 没有内边距、板子又走 auto-fill（1160px 内 4 列轨只放 3 张卡），
   卡片只有 278px 且右侧空一列，看着细长。这里把外壳对齐 #qp-upquote / #qp-updiff-content，
   板子改成「卡片数 = 列数、等分铺满一行」（同 .uq-board.is-flat / .upd-board）。
   2026-09-25：作用域由 #panel-pintuan / #panel-miaosha 改为工作台容器 #qp-promo-content
   —— 5→1 整合后两棵 <main> 都搬进了 #qp-promo-content，旧 ID 选择器全部失效。 */
#qp-promo-content .library-shell{max-width:1800px;margin:0 auto;padding:26px 22px 10px;}
#qp-promo-content .uq-board{
  grid-template-columns:none;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  max-width:none;
}
/* 话术卡 */
/* 2026-09-20 用户指令：补差/免单档位卡与「完整套餐」同宽 —— 卡片数=列数、等分铺满一行（同 #panel-upquote .uq-board.is-flat） */
.upd-board{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(0,1fr);gap:16px;align-items:start;padding-bottom:28px;}
/* 2026-09-28 用户指令（第四轮）：「补差和免单 1000 以上的金额太宽了，宽度调整得合理一点，
   不一定非要一直向下去，横着来也可以，只要标清楚第几段、按这个复制。」
   → 只有一张卡时（首单 ≥1000 → 只剩最高档）卡片横向铺满，段落改**横向多列网格**。
   2026-09-28 用户指令（第五轮，现行）：「横屏的位置那样不太合理，我的建议是横屏横着 4 段…
   简单的说，就整两排，1 排 4 个框」→ 固定 **4 列**、共 **两排**：
     · 不用 auto-fit（它按 340px 起算，1600 视口只排 3 列 → 第 3 排只剩 3 个框，不对称）；
     · 块的 DOM 顺序 = 发送顺序：第1段 / 第2段 / **福利配图** / **会员日催单句** / 第3段 / 第4段 / 第5段
       （2026-09-28 用户指令：配图回到「第 2 段之后」，会员日那句紧随配图之后）；
     · 「福利配图」块（.is-attach：两张图并排）占 **2 格** → 7 个块正好铺成 4 + 4：
         第 1 排 = 第1段 第2段 福利配图(2格)；第 2 排 = 会员日句 第3段 第4段 第5段。
   ⚠️ 只在 .is-single（单卡）时生效：多档并排时每张卡仅 ~560px 宽，横向分格会挤成一团。
   2026-09-30 用户指令（第八轮）：补差/免单改左右分栏后右栏变窄，**固定 4 列**已放不下
   （240px 左栏下 1500 屏右栏仅 ~960px → 4 列每列 ~230px）。
   用户选定 → **自适应列数**：`auto-fit` + 最小列宽 268px，容器宽就多排、窄就少排。
   实测（左栏 240px）：1500 屏 → 3 列（~301px/列）；1600 屏 → 3 列（~343px）；1920 屏 → 4 列（~328px）。
   ⚠️ 不再强求「两排 4 格」（第五轮口径由本轮用户指令覆盖）：1920 屏仍是 4 列 × 2 排，
      1500/1600 屏排成 3 列 → 第 1 排 2 格（第1段/第2段），福利配图（占 2 格）落到第 2 排。
   ⚠️ 顺序仍是发送顺序（第1段 / 第2段 / 福利配图 / 会员日句 / 第3段…），**不要加 `dense`**，
      dense 会把后面的块回填到前排的空位、把发送顺序打乱。 */
.upd-board.is-single .upd-segs{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:12px;align-items:stretch;}
/* 「福利配图」跨格数**跟着列数走**（否则会留空洞）：
   · 4 列（右栏 ≥1146px，≈1920 屏）→ 跨 2 格：7 格正好 = 第1排 4 格 + 第2排 3 格；
   · 3 列（右栏 <1146px，≈1500/1600 屏）→ 只跨 1 格：6 个块正好 3 + 3 = **整两排、零空洞**
     （跨 2 格时它会挤到第 2 排，第 1 排右端空一格、第 3 排又只剩 2 个）。
   判据用**容器查询**（量 .ud-right 真实宽度）而不是视口媒体查询 —— 侧栏可收起、宽度会变。
   ⚠️ 用 `.uq-block.is-attach` 的后代选择器时注意 `.upd-segs >` 直系，别误伤卡内其它块。 */
.upd-board.is-single .upd-segs > .uq-block.is-attach{grid-column:span 1;}
@container udright (min-width:1146px){
  .upd-board.is-single .upd-segs > .uq-block.is-attach{grid-column:span 2;}
}
/* 2026-09-30（第九轮）：补差场景补了「📌 给您最终汇总」收尾段后，单卡块数 6 → **7**：
   · 4 列（≥1146px）：第1段+第2段+福利配图(2格) = 4 格 ／ 第3~6段 = 4 格 → 正好 4×2，无需干预；
   · 3 列（<1146px）：7 个块排成 3+3+**1**，末排孤零零一个块、右边空 2/3，很难看。
   → 非 4 列时让**末块（给您最终汇总）通栏**：3 列 6+3=9 格 = 3×3；2 列 6+2=8 格 = 4×2；
     1 列本来就是通栏。三种情形都刚好铺满、零空洞，收尾那句也更醒目。
   ⚠️ 依赖「末块 = 给您最终汇总」这一事实（补差 withSum / 免单模板自带）。
      若日后段序调整导致末块不是汇总句，这条规则要跟着改。 */
@container udright (max-width:1145px){
  .upd-board.is-single .upd-segs > .uq-block:last-child{grid-column:1/-1;}
}
@media (max-width:720px){
  .upd-board.is-single .upd-segs{grid-template-columns:1fr;}
}
/* 2026-09-28 用户指令：段落编号做成**左上角的圆圈**（原来只是「第N段」文字，顺序不够醒目）：
   「标注段落的，可以在左上角做一个圆圈，然后写第一段，这样更清楚顺序怎么发」。
   ⚠️ 只作用于补差/免单板子（.upd-board）—— 完整套餐 / 拼团 / 秒杀 / 联报的区块头保持原样。
   ⚠️ 「福利配图」块故意不带 .is-seq（它不是要发的第几段）。 */
.upd-board .uq-block-label.is-seq{flex:0 0 auto;width:46px;height:46px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:900;
  letter-spacing:-.2px;color:#fff;background:linear-gradient(135deg,#f97316,#e11d48);
  box-shadow:0 7px 16px -8px rgba(225,29,72,.75);}
/* 2026-09-20 用户指令：卡体整体复用完整套餐直出卡框架（.uq-card-board/.uqc-*/.uq-block/.uq-btn，见 joint-calc.css），
   这里只保留补差/免单特有的状态徽章、meta 与提示样式 */
.upd-board .uq-card-board.is-off{opacity:.75;}
.upd-board .uq-card-board.is-off:hover{opacity:1;}
.upd-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:900;border:1px solid transparent;white-space:nowrap;}
.upd-tag.is-ok{background:#ecfdf5;border-color:#a7f3d0;color:#047857;}
.upd-tag.is-off{background:#f1f5f9;border-color:#e2e8f0;color:#64748b;}
.upd-tag.is-free{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;}
.upd-tag.is-full{background:#f5f3ff;border-color:#ddd6fe;color:#6d28d9;}
.upd-meta-text{font-size:12px;font-weight:700;color:#64748b;}
.upd-meta-text b{color:#c2410c;font-weight:900;}
.upd-segs{display:flex;flex-direction:column;gap:10px;}
.upd-card-note{padding:12px;border:1px dashed #e2e8f0;border-radius:10px;color:#94a3b8;font-size:12.5px;font-weight:700;text-align:center;}
.upd-empty{grid-column:1/-1;padding:40px 0;text-align:center;color:#94a3b8;font-size:13.5px;font-weight:700;}

/* 主品补差 · 深色主题 */
body[data-theme="dark"] .upd-switch{background:rgba(234,88,12,.12);border-color:rgba(251,146,60,.35);}
body[data-theme="dark"] .upd-switch-btn{color:#fdba74;}
body[data-theme="dark"] .upd-switch-btn:hover{color:#ffedd5;}
body[data-theme="dark"] .upd-switch-btn.active{background:#1e293b;border-color:rgba(251,146,60,.5);color:#fdba74;box-shadow:none;}
body[data-theme="dark"] .upd-summary{color:#94a3b8;}
body[data-theme="dark"] .upd-summary strong{color:#fdba74;}
body[data-theme="dark"] .upd-prod{background:rgba(17,24,39,.82);border-color:rgba(148,163,184,.22);}
body[data-theme="dark"] .upd-prod:hover{border-color:rgba(251,146,60,.5);background:rgba(251,146,60,.1);}
body[data-theme="dark"] .upd-prod.active{border-color:#ea580c;background:rgba(234,88,12,.18);}
body[data-theme="dark"] .upd-prod-name{color:#cbd5e1;}
body[data-theme="dark"] .upd-prod.active .upd-prod-name{color:#fdba74;}
body[data-theme="dark"] .upd-amt{background:#0f172a;border-color:rgba(148,163,184,.22);}
body[data-theme="dark"] .upd-amt b{color:#cbd5e1;}
body[data-theme="dark"] .upd-amt i{color:#64748b;}
body[data-theme="dark"] .upd-amt:hover{border-color:rgba(251,146,60,.5);background:rgba(251,146,60,.1);}
body[data-theme="dark"] .upd-amt:hover b,body[data-theme="dark"] .upd-amt.active b{color:#fdba74;}
body[data-theme="dark"] .upd-amt.active{border-color:#ea580c;background:rgba(234,88,12,.18);}
body[data-theme="dark"] .upd-amt.active i{color:#fdba74;}
body[data-theme="dark"] .upd-amounts-empty{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.22);color:#64748b;}
body[data-theme="dark"] .upd-tag.is-ok{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.4);color:#6ee7b7;}
body[data-theme="dark"] .upd-tag.is-off{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.25);color:#94a3b8;}
body[data-theme="dark"] .upd-tag.is-free{background:rgba(59,130,246,.16);border-color:rgba(96,165,250,.4);color:#93c5fd;}
body[data-theme="dark"] .upd-tag.is-full{background:rgba(139,92,246,.16);border-color:rgba(167,139,250,.4);color:#c4b5fd;}
body[data-theme="dark"] .upd-meta-text{color:#94a3b8;}
body[data-theme="dark"] .upd-meta-text b{color:#fdba74;}
body[data-theme="dark"] .upd-card-note{border-color:rgba(148,163,184,.22);color:#64748b;}
body[data-theme="dark"] .upd-empty{color:#64748b;}

@media(max-width:900px){
  /* 窄屏回退单列，断点与完整套餐直出卡一致 */
  .upd-board{grid-auto-flow:row;grid-template-columns:1fr;}
  #qp-promo-content .uq-board{grid-auto-flow:row;grid-template-columns:1fr;}
}
@media(max-width:768px){
  #qp-updiff-content .upd-shell{padding:18px 14px 10px;}
  #qp-promo-content .library-shell{padding:18px 14px 10px;}
}

/* ═══════════ 主页（panel-home · 2026-09-22 按设计稿重做） ═══════════
   4 张浅色 tinted 分区，每张分区是带描边的圆角面板，内部白色卡片网格（3/5/2/2 列）。
   卡片左色块图标（mask 复用侧栏 SVG）+ 标题 + 双行 desc + 右侧箭头；hover 上浮 + 描边变深。 */
#panel-home.active{display:flex;flex-direction:column;gap:16px;}
/* 2026-09-22 用户指令：主页分区铺满工作台 —— 对齐 library-shell / upd-shell 的 max-width:1800 口径 */
.home-sections{display:grid;gap:16px;max-width:1800px;width:100%;margin:0 auto;}

/* 单个分区：圆角浅色面板 */
.home-section{border-radius:18px;padding:18px 20px 20px;border:1px solid transparent;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.03);}
.home-section[data-tone="blue"]  {background:linear-gradient(180deg,#F1F5FE 0%,#EEF3FF 100%);border-color:rgba(59,130,246,.18);}
.home-section[data-tone="orange"]{background:linear-gradient(180deg,#FFF6EC 0%,#FFEFDF 100%);border-color:rgba(249,115,22,.20);}
.home-section[data-tone="green"] {background:linear-gradient(180deg,#EFFAF2 0%,#E8F6ED 100%);border-color:rgba(22,163,74,.18);}
.home-section[data-tone="purple"]{background:linear-gradient(180deg,#F3EEFE 0%,#EEE6FB 100%);border-color:rgba(124,58,237,.18);}

/* 分区头：色块图标 + 标题副标题 + 右侧标签 */
.home-section-head{display:flex;align-items:center;gap:12px;min-width:0;}
.home-section-icon{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;
  box-shadow:0 4px 10px -2px rgba(15,23,42,.15);}
.home-section-icon svg{width:20px;height:20px;display:block;}
.home-section[data-tone="blue"]   .home-section-icon{background:linear-gradient(135deg,#4F7CFF,#7BA1FF);}
.home-section[data-tone="orange"] .home-section-icon{background:linear-gradient(135deg,#F97316,#FB7185);}
.home-section[data-tone="green"]  .home-section-icon{background:linear-gradient(135deg,#22C55E,#14B8A6);}
.home-section[data-tone="purple"] .home-section-icon{background:linear-gradient(135deg,#8B5CF6,#6366F1);}
.home-section-titles{display:flex;flex-direction:column;gap:2px;min-width:0;}
.home-section-titles strong{font-size:16px;font-weight:800;color:#111827;letter-spacing:.01em;line-height:1.25;}
.home-section-titles i{font-style:normal;font-size:12.5px;font-weight:500;color:#6b7280;line-height:1.4;}
.home-section-badge{margin-left:auto;flex:0 0 auto;padding:5px 11px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.02em;
  border:1px solid transparent;display:inline-flex;align-items:center;gap:5px;line-height:1;}
.home-section-badge svg{width:12px;height:12px;display:block;}
.home-section-badge span{line-height:1;}
.home-section[data-tone="blue"]   .home-section-badge{background:rgba(59,130,246,.12);color:#2563eb;border-color:rgba(59,130,246,.22);}
.home-section[data-tone="orange"] .home-section-badge{background:rgba(249,115,22,.14);color:#c2410c;border-color:rgba(249,115,22,.24);}
.home-section[data-tone="green"]  .home-section-badge{background:rgba(22,163,74,.14);color:#15803d;border-color:rgba(22,163,74,.24);}
.home-section[data-tone="purple"] .home-section-badge{background:rgba(124,58,237,.14);color:#6d28d9;border-color:rgba(124,58,237,.22);}

/* 卡片网格：按 cols 设列数 */
.home-section-cards{display:grid;gap:12px;}
.home-section-cards[data-cols="3"]{grid-template-columns:repeat(3,minmax(0,1fr));}
.home-section-cards[data-cols="5"]{grid-template-columns:repeat(5,minmax(0,1fr));}
.home-section-cards[data-cols="2"]{grid-template-columns:repeat(2,minmax(0,1fr));}
.home-section-cards[data-cols="4"]{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:980px){
  .home-section-cards[data-cols="5"]{grid-template-columns:repeat(3,minmax(0,1fr));}
  .home-section-cards[data-cols="3"]{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .home-section-cards[data-cols="5"]{grid-template-columns:repeat(2,minmax(0,1fr));}
  .home-section-cards[data-cols="3"],.home-section-cards[data-cols="2"]{grid-template-columns:1fr;}
}

/* 卡片：白底 + 彩色方形图标 + 标题 + 双行 desc + 箭头 */
.home-card{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:12px;
  border:1px solid rgba(15,23,42,.07);background:#fff;cursor:pointer;font:inherit;text-align:left;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  box-shadow:0 1px 2px rgba(15,23,42,.03);}
.home-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(15,23,42,.18);}
.home-section[data-tone="blue"]   .home-card:hover{border-color:rgba(59,130,246,.5);}
.home-section[data-tone="orange"] .home-card:hover{border-color:rgba(249,115,22,.5);}
.home-section[data-tone="green"]  .home-card:hover{border-color:rgba(22,163,74,.5);}
.home-section[data-tone="purple"] .home-card:hover{border-color:rgba(124,58,237,.5);}

/* 卡片左色块图标：彩色渐变 + 内嵌白色 SVG（mask） */
.home-ic{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  background:linear-gradient(135deg,#5b8def,#7c5cf0);}
.home-ic::before{content:"";position:absolute;inset:10px;background:#fff;opacity:.96;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;}
.home-card[data-tone="blue"]   .home-ic{background:linear-gradient(135deg,#4F7CFF,#7C9BFF);}
.home-card[data-tone="indigo"] .home-ic{background:linear-gradient(135deg,#6366F1,#8B5CF6);}
.home-card[data-tone="teal"]   .home-ic{background:linear-gradient(135deg,#0EA5E9,#14B8A6);}
.home-card[data-tone="orange"] .home-ic{background:linear-gradient(135deg,#F97316,#FB923C);}
.home-card[data-tone="rose"]   .home-ic{background:linear-gradient(135deg,#F43F5E,#FB7185);}
.home-card[data-tone="red"]    .home-ic{background:linear-gradient(135deg,#DC2626,#F43F5E);}
.home-card[data-tone="green"]  .home-ic{background:linear-gradient(135deg,#16A34A,#22C55E);}
.home-card[data-tone="purple"] .home-ic{background:linear-gradient(135deg,#7C3AED,#A855F7);}

.home-card-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto;}
.home-card-text strong{font-size:14px;font-weight:800;color:#111827;line-height:1.3;}
.home-card-text i{font-style:normal;font-size:11.5px;line-height:1.55;color:#6b7280;font-weight:500;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.home-arrow{margin-left:auto;flex:0 0 auto;color:#cbd5e1;font-size:22px;font-weight:500;line-height:1;
  transition:transform .16s ease,color .16s ease;font-family:system-ui,sans-serif;}
.home-card:hover .home-arrow{transform:translateX(3px);}
.home-section[data-tone="blue"]   .home-card:hover .home-arrow{color:#2563eb;}
.home-section[data-tone="orange"] .home-card:hover .home-arrow{color:#ea580c;}
.home-section[data-tone="green"]  .home-card:hover .home-arrow{color:#15803d;}
.home-section[data-tone="purple"] .home-card:hover .home-arrow{color:#7c3aed;}

/* 主页 · 深色主题 */
body[data-theme="dark"] .home-section{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.18);box-shadow:none;}
body[data-theme="dark"] .home-section-titles strong{color:#f1f5f9;}
body[data-theme="dark"] .home-section-titles i{color:#94a3b8;}
body[data-theme="dark"] .home-section-icon{box-shadow:0 4px 12px -2px rgba(0,0,0,.5);}
body[data-theme="dark"] .home-card{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.18);box-shadow:none;}
body[data-theme="dark"] .home-card:hover{box-shadow:0 14px 28px -10px rgba(0,0,0,.6);}
body[data-theme="dark"] .home-card-text strong{color:#f1f5f9;}
body[data-theme="dark"] .home-card-text i{color:#94a3b8;}
body[data-theme="dark"] .home-arrow{color:#475569;}
body[data-theme="dark"] .home-section[data-tone="blue"]   .home-card:hover{border-color:rgba(96,165,250,.55);}
body[data-theme="dark"] .home-section[data-tone="orange"] .home-card:hover{border-color:rgba(251,146,60,.55);}
body[data-theme="dark"] .home-section[data-tone="green"]  .home-card:hover{border-color:rgba(74,222,128,.55);}
body[data-theme="dark"] .home-section[data-tone="purple"] .home-card:hover{border-color:rgba(167,139,250,.55);}

/* ═══════════ 账号功能权限（2026-09-19） ═══════════ */
/* 未授权侧栏项：按钮/整组隐藏（applyPerms() 加 .perm-off） */
.sidebar-btn.perm-off,.sidebar-group.perm-off{display:none!important;}

/* 账号管理 · 权限标签与下拉 */
.acct-perm-tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700;color:#7c3aed;background:rgba(124,58,237,.08);border:1px solid rgba(124,58,237,.22);white-space:nowrap;}
.acct-field select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;color:#111827;font:inherit;font-size:13px;font-weight:600;outline:none;transition:border-color .15s ease,box-shadow .15s ease;}
.acct-field select:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249,115,22,.15);}

/* 权限编辑弹窗 */
.perm-mask{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:2900;}
/* ── 2026-09-28 晚整体改版：弹窗加宽、组卡单列全宽、勾选项变芯片网格 ──
   修 bug：原来 .perm-grid 两列 auto-fill 把组卡压到 ~270px 窄宽，而组说明
   white-space:nowrap 又不换行，把组名（flex 可收缩项）挤到 0 宽 → 中文竖排一字一行。
   改版后组卡永远全宽一行一张，说明独立成行，组名整行独占不会再被挤压。 */
#permModal .perm-dialog{position:fixed;z-index:2901;top:50%;left:50%;transform:translate(-50%,-50%);width:min(640px,94vw);max-height:86vh;overflow:auto;background:#fff;border:1px solid rgba(249,115,22,.2);border-radius:18px;padding:24px 26px;box-shadow:0 24px 60px rgba(17,24,39,.25);}
.perm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
.perm-head strong{font-size:17px;font-weight:800;color:#111827;}
.perm-close{border:none;background:transparent;font-size:15px;color:#9ca3af;cursor:pointer;padding:4px 8px;border-radius:8px;}
.perm-close:hover{color:#e11d48;background:#fff1f2;}
.perm-sub{margin:0 0 16px;font-size:12.5px;line-height:1.6;color:#6b7280;}
.perm-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;}
.perm-preset{padding:8px 16px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font:inherit;font-size:12.5px;font-weight:700;color:#4b5563;cursor:pointer;transition:all .15s ease;}
.perm-preset:hover{border-color:rgba(249,115,22,.4);color:#c2410c;background:#fff7ed;}
.perm-preset.active{color:#fff;background:linear-gradient(135deg,#f97316,#e11d48);border-color:transparent;box-shadow:0 8px 20px rgba(225,29,72,.22);}
/* 单列：组卡一张占满一行，杜绝窄列挤压 */
.perm-grid{display:flex;flex-direction:column;gap:12px;}
.perm-group{padding:13px 16px 14px;border-radius:14px;border:1px solid #eceef2;background:#fafbfc;}
.perm-group-name{font-size:13px;font-weight:800;color:#9ca3af;letter-spacing:.02em;}
/* 2026-09-28 用户指令：权限按组给 → 每组标题前一个「整组」勾选框（勾一下整组选中，部分勾选显示半选）
   ⚠️ 组标题用的是 <label> 包住控件，「点标题」等价于点勾选框 —— 管理员不需要精准点小方框。
   ⚠️ 组名整行独占 + nowrap：说明文字已挪出标题行（见 perm-group-note），不会再被挤成竖排。 */
.perm-group-head{display:flex;align-items:center;gap:9px;cursor:pointer;line-height:1.4;}
.perm-group-head input{accent-color:#e11d48;width:17px;height:17px;flex:0 0 auto;cursor:pointer;}
.perm-group-head .perm-group-name{font-size:14.5px;font-weight:800;color:#c2410c;letter-spacing:.01em;white-space:nowrap;}
.perm-group-note{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:#9ca3af;line-height:1.55;margin:3px 0 9px 26px;}
/* 勾选项改芯片网格：全宽组卡内自动分 2~3 列，点整个芯片即选中 */
.perm-group-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:6px 10px;}
.perm-check{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#374151;cursor:pointer;padding:7px 10px;border-radius:9px;border:1px solid transparent;transition:background .12s ease,border-color .12s ease;}
.perm-check:hover{background:#fff;border-color:#e5e7eb;}
.perm-check input{accent-color:#e11d48;width:15px;height:15px;flex:0 0 auto;cursor:pointer;}
/* 2026-09-21：「默认关闭」面板（排行榜）——员工默认不显示，需单独勾选授权 */
.perm-check--optin{position:relative;}
.perm-optin-tag{margin-left:auto;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.02em;
  color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:6px;padding:1px 6px;white-space:nowrap;}
.perm-foot{display:flex;gap:10px;margin-top:18px;}
.perm-foot .acct-btn-primary{flex:1;}
/* 2026-09-28 顺手修一处挤压：.acct-btn-ghost 是账号表单用的「整宽块级」按钮
   （styles.css 里 width:100% + display:block + margin-top:8px），塞进 .perm-foot 这个 flex 行里
   会把「保存权限」挤成竖排文字。只覆盖弹窗底部的这两个按钮，不动账号表单里的既有用法。 */
.perm-foot .acct-btn-ghost{width:auto;flex:0 0 auto;margin-top:0;padding:10px 20px;display:inline-block;}

/* 权限 · 深色主题 */
body[data-theme="dark"] .acct-perm-tag{color:#c4b5fd;background:rgba(139,92,246,.14);border-color:rgba(167,139,250,.35);}
body[data-theme="dark"] .acct-field select{background:rgba(17,24,39,.82);border-color:rgba(148,163,184,.22);color:#f1f5f9;}
body[data-theme="dark"] #permModal .perm-dialog{background:rgba(17,24,39,.96);border-color:rgba(251,146,60,.3);}
body[data-theme="dark"] .perm-head strong{color:#f1f5f9;}
body[data-theme="dark"] .perm-close{color:#64748b;}
body[data-theme="dark"] .perm-close:hover{color:#fda4af;background:rgba(225,29,72,.14);}
body[data-theme="dark"] .perm-sub{color:#94a3b8;}
body[data-theme="dark"] .perm-preset{background:rgba(17,24,39,.7);border-color:rgba(148,163,184,.22);color:#cbd5e1;}
body[data-theme="dark"] .perm-preset:hover{border-color:rgba(251,146,60,.5);color:#fdba74;background:rgba(234,88,12,.12);}
body[data-theme="dark"] .perm-preset.active{color:#fff;border-color:transparent;
  background:linear-gradient(135deg,#f97316,#e11d48);   /* 2026-09-28：补上渐变——深色 .perm-preset 底色(0,2,1) 会压过 .active(0,2,0)，高亮态变白底 */
  box-shadow:0 8px 20px rgba(225,29,72,.28);}
body[data-theme="dark"] .perm-group{background:rgba(15,23,42,.6);border-color:rgba(148,163,184,.16);}
body[data-theme="dark"] .perm-group-name{color:#64748b;}
body[data-theme="dark"] .perm-group-head .perm-group-name{color:#fdba74;}
body[data-theme="dark"] .perm-group-note{color:#64748b;}
body[data-theme="dark"] .perm-check{color:#cbd5e1;}
body[data-theme="dark"] .perm-check:hover{background:rgba(30,41,59,.85);border-color:rgba(148,163,184,.22);}
body[data-theme="dark"] .perm-optin-tag{color:#fdba74;background:rgba(234,88,12,.14);border-color:rgba(251,146,60,.34);}

/* ═══════════════ 2026-09-22 用户指令：顶部导航栏改成悬浮玻璃卡片 ═══════════════
   第三版（也是用户最终要的版本）：仿照 #panel-month（套餐管理）的悬浮卡片风格。
   顶栏改为距顶 14px 的悬浮玻璃卡：左=侧栏让位 + 28px、右=16px、圆角 22px、上下左右都有细描边；
   玻璃渐变 + blur(28px) saturate(170%) + 顶部内高光/底部内光 + 柔和下投影；
   底沿 2px 橙→玫红品牌渐变细线（::after）——贴顶通栏版用的是全宽线，悬浮版改成只占中部 92% 宽；
   workspace 重新让出 96px（14 缝 + 64 栏 + 18 缝）；
   上面 14px 缝用 .shell::before 纯色短条覆盖（防滚动内容从缝里漏出来）。
   要回退：删本段 + 删 .shell::before 即可。 */
body.shell-ready .topbar,
body.topbar-auto .topbar{
  position:fixed !important;   /* 2026-09-25：显式声明，不再依赖「压住自动隐藏」的隐式继承 */
  top:14px !important;
  left:calc(var(--sidebar-w,180px) + 28px) !important;
  right:16px !important;
  border-radius:22px !important;
  border:1px solid rgba(15,23,42,.08) !important;
  border-top:1px solid rgba(255,255,255,.95) !important;
  min-height:64px;
  /* 2026-09-25：原「自动隐藏」规则（translateY(-105%)/opacity:0/visibility:hidden）已整体删除，
     这里不再需要 !important 对抗；保留 transform/opacity 归一化以防未来又有人加位移规则。 */
  transform:none;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.shell.collapsed .topbar{left:calc(var(--sidebar-collapsed-w,82px) + 28px) !important;}
body.topbar-auto .workspace,
body.topbar-auto.topbar-show .workspace{padding-top:96px;}

/* 悬浮顶栏上方 14px 缝隙的遮缝条：滚动内容不会从缝里漏出来。纯色 + 短渐隐最稳。 */
body.topbar-auto .shell::before{
  content:"";position:fixed;top:0;left:var(--sidebar-w,180px);right:0;height:14px;
  z-index:46;pointer-events:none;
  background:#f6f2f3;
}
body[data-theme="dark"].topbar-auto .shell::before{background:#0a0f1c;}

/* 玻璃渐变 + 内高光 + 柔投影：恢复悬浮玻璃卡质感 */
body.topbar-auto .topbar,
body.shell-ready .topbar{
  background:linear-gradient(168deg,
    rgba(255,255,255,.97) 0%, rgba(255,255,255,.94) 42%,
    rgba(255,255,255,.93) 68%, rgba(255,255,255,.96) 100%) !important;
  backdrop-filter:blur(28px) saturate(170%);
  -webkit-backdrop-filter:blur(28px) saturate(170%);
  box-shadow:
    0 14px 34px -16px rgba(31,38,135,.22),
    0 3px 10px -6px rgba(31,38,135,.10),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(255,255,255,.50) !important;
}
/* 底部品牌渐变细线：悬浮卡只占中段宽度更协调 */
body.shell-ready .topbar::after{
  content:"";position:absolute;left:4%;right:4%;bottom:-1px;height:2px;
  background:linear-gradient(90deg, rgba(249,115,22,0) 0%, rgba(249,115,22,.92) 18%, rgba(225,29,72,.78) 60%, rgba(249,115,22,0) 100%);
  pointer-events:none;border-radius:0 0 22px 22px;
}
body[data-theme="dark"].topbar-auto .topbar,
html[data-theme="dark"] body.shell-ready .topbar{
  background:linear-gradient(168deg,
    rgba(30,41,59,.97) 0%, rgba(15,23,42,.95) 45%,
    rgba(23,32,51,.94) 70%, rgba(30,41,59,.96) 100%) !important;
  border:1px solid rgba(148,163,184,.22) !important;
  border-top:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 14px 34px -16px rgba(0,0,0,.55),
    0 3px 10px -6px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(255,255,255,.05) !important;
}
body[data-theme="dark"] .topbar::after,
html[data-theme="dark"] body.shell-ready .topbar::after{
  background:linear-gradient(90deg, rgba(251,146,60,0) 0%, rgba(251,146,60,.85) 18%, rgba(251,113,133,.70) 60%, rgba(251,146,60,0) 100%);
}

@media (max-width:768px){
  /* 窄屏：顶栏 min-height:56，workspace padding 留 64px */
  body.topbar-auto .workspace,
  body.topbar-auto.topbar-show .workspace{padding-top:64px;}
}

/* ═══════════════ 2026-09-22 用户指令：补差/免单/拼团/秒杀面板圆角对齐套餐管理 ═══════════════
   参照 #panel-month（套餐管理）的圆角风格：页签/筛选 chip 一律胶囊 999px、卡片 16px 大圆角。
   补差面板原值偏小（页签容器 12 / 页签 9 / 产品卡 13 / 金额 chip 10 / 操作按钮 8），显得生硬。
   只动圆角与内边距，不动配色与布局。 */
.upd-switch{border-radius:999px;padding:5px;gap:5px;}
.upd-switch-btn{border-radius:999px;}
.upd-prod{border-radius:16px;}
.upd-amt{border-radius:999px;padding:8px 14px;}
.upd-card-note{border-radius:14px;}
.upd-board .uq-card-board,
#qp-promo-content .uq-card-board{border-radius:18px;}
.upd-board .uq-block,
#qp-promo-content .uq-block{border-radius:14px;}
.upd-board .uq-btn,
#qp-promo-content .uq-btn{border-radius:999px;padding:6px 14px;}
.upd-board .uq-block-img,
#qp-promo-content .uq-block-img{border-radius:12px;}

/* ── 2026-09-24：补差/免单页「前端订单金额必填首笔订单产品盒数」提醒 ── */
.first-boxes-warn{
  margin:10px 0 0;
  padding:10px 14px;
  border-radius:14px;
  font-size:13px;
  font-weight:600;
  color:#b91c1c;
  background:rgba(254,226,226,.75);
  border:1px solid rgba(248,113,113,.45);
  backdrop-filter:blur(8px);
}
html[data-theme="dark"] .first-boxes-warn{
  color:#fecaca;
  background:rgba(127,29,29,.35);
  border-color:rgba(248,113,113,.35);
}
@keyframes qtNeedBoxesShake{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)}
  45%{transform:translateX(-5px)}
  60%{transform:translateX(4px)}
  75%{transform:translateX(-3px)}
}
.product-table.need-boxes{
  animation:qtNeedBoxesShake .7s ease;
  outline:2px solid rgba(239,68,68,.55);
  outline-offset:3px;
  border-radius:12px;
}

/* ═══════════════ 2026-09-24：报价表工作台（5 个独立面板 → 1 工作台 + 顶栏 3 tab） ═══════════════
   把完整套餐 / 补差 / 免单 / 拼团 / 秒杀 5 个面板合并为 1 个 panel-quote 工作台：
   · 顶栏 .scene-tabs 3 个胶囊按钮（完整套餐 / 补差·免单 / 拼团·秒杀），仅在工作台激活时显示
   · 工作台内 .quote-toolbar 镜像一份同款 tabs 提供冗余入口
   · 内部 mini-tabs（upd-scene-tabs / promo-scene-tabs）做补差↔免单、拼团↔秒杀二选一
   · 侧栏 5 入口 .data-quote-merged 直接隐藏（保留 PERM 与 data-nav 用于 JS 路由）
   视觉对齐已有 .upd-switch 玻璃暖橙风（border-radius 999px 胶囊 + brand 渐变激活态） */

/* 侧栏 5 入口隐藏（data-nav 仍保留用于 PERM / JS 路由判定） */
.sidebar-btn.data-quote-merged{display:none !important;}
/* 2026-09-28 用户指令：首单计算 / 联报计算 / 双品联报 / 退款计算 四合一为「计算器」——
   同款做法：侧栏 4 入口隐藏，data-nav / PERM key / 主页卡片全部保留（统一由 showPanel 路由进 #panel-calc）。 */
.sidebar-btn.data-calc-merged{display:none !important;}
/* 2026-09-24：报价表工作台启动后，原 4 个 panel 容器（panel-upquote/updiff/pintuan/miaosha）永久隐藏（保留 PERM / ID），其 <main> 子树已搬到 panel-quote 的对应 pane。 */
.panel.quote-merged-hidden{display:none !important;}

/* 顶栏 scene-tabs · 工作台激活时才显示 */
.scene-tabs{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px;
  margin:2px 0 0;
  border:1px solid rgba(249,115,22,.18);
  border-radius:999px;
  background:rgba(255,247,237,.72);
  backdrop-filter:blur(10px);
  width:max-content;
  max-width:100%;
  box-shadow:0 6px 18px -10px rgba(225,29,72,.22);
}
.scene-tabs[hidden]{display:none !important;}
.scene-tab{
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:#9a3412;
  font:inherit;
  font-size:13px;
  font-weight:700;
  padding:5px 14px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.scene-tab:hover{color:#c2410c;}
.scene-tab.active{
  background:linear-gradient(135deg,#f97316,#e11d48);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(225,29,72,.6);
}
html[data-theme="dark"] .scene-tabs{background:rgba(30,41,59,.72);border-color:rgba(148,163,184,.22);}
html[data-theme="dark"] .scene-tab{color:#fdba74;}
html[data-theme="dark"] .scene-tab:hover{color:#fff7ed;}
html[data-theme="dark"] .scene-tab.active{box-shadow:0 8px 20px -8px rgba(251,113,133,.55);}

/* 工作台 toolbar（冗余 tab，跟顶栏 tab 同步） */
.quote-toolbar{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 24px 10px;
  background:rgba(255,255,255,.62);
  border-bottom:1px solid rgba(249,115,22,.14);
  backdrop-filter:blur(12px);
}
.quote-toolbar-label{font-size:12px;font-weight:700;color:#9a3412;letter-spacing:.5px;text-transform:uppercase;}
.quote-tabs{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px;
  border:1px solid rgba(249,115,22,.18);
  border-radius:999px;
  background:rgba(255,247,237,.85);
}
.quote-tab{
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:#9a3412;
  font:inherit;
  font-size:14px;
  font-weight:800;
  padding:7px 18px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s;
}
.quote-tab:hover{color:#c2410c;}
.quote-tab.active{
  background:linear-gradient(135deg,#f97316,#e11d48);
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(225,29,72,.55);
}
html[data-theme="dark"] .quote-toolbar{background:rgba(15,23,42,.62);border-color:rgba(148,163,184,.18);}
html[data-theme="dark"] .quote-tabs{background:rgba(30,41,59,.85);border-color:rgba(148,163,184,.22);}
html[data-theme="dark"] .quote-tab{color:#fdba74;}
html[data-theme="dark"] .quote-tab:hover{color:#fff7ed;}

/* pane 容器（一个显示其他 hidden） */
.quote-panes{position:relative;}
.quote-pane{display:none;min-height:600px;}
.quote-pane.active{display:block;}
.quote-pane-content{padding:0;}
/* 2026-09-25 用户反馈修复：拼团 / 秒杀两棵 <main> 都搬进了同一个 #qp-promo-content，
   之前没有任何显隐控制 → 两块内容纵向堆叠（滚下去会看到另一块，看着像重复）。
   现在由 JS 给两棵 <main> 打 .qp-promo-main[data-promo] 标记，
   _quoteApplyPromoVisibility() 按当前 _quotePromoScene 加 .is-on，同一时刻只显示一棵。 */
#qp-promo-content > .qp-promo-main{display:none;}
#qp-promo-content > .qp-promo-main.is-on{display:block;}
/* 2026-09-24：悬浮顶栏（top14 + 标题 + scene-tabs + 描述）比 workspace 的 96px padding 高，
   面板内容整体下移避让，防止 quote-toolbar 被顶栏盖住一半 */
#panel-quote{padding-top:40px;}

/* 内层 mini-tab · 补差↔免单 / 拼团↔秒杀 */
.upd-scene-tabs,.promo-scene-tabs{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px;
  margin:14px 24px 0;
  border:1px solid rgba(249,115,22,.16);
  border-radius:999px;
  background:rgba(255,247,237,.72);
  width:max-content;
  max-width:calc(100% - 48px);
}
.upd-scene-tab,.promo-scene-tab{
  border:1px solid transparent;
  border-radius:999px;
  background:transparent;
  color:#9a3412;
  font:inherit;
  font-size:13px;
  font-weight:700;
  padding:5px 16px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,color .15s,border-color .15s;
}
.upd-scene-tab:hover,.promo-scene-tab:hover{color:#c2410c;}
.upd-scene-tab.active,.promo-scene-tab.active{
  background:#fff;
  border-color:rgba(249,115,22,.35);
  color:#c2410c;
  box-shadow:0 6px 14px -8px rgba(234,88,12,.4);
}
html[data-theme="dark"] .upd-scene-tabs,html[data-theme="dark"] .promo-scene-tabs{background:rgba(30,41,59,.72);border-color:rgba(148,163,184,.22);}
html[data-theme="dark"] .upd-scene-tab,html[data-theme="dark"] .promo-scene-tab{color:#fdba74;}
html[data-theme="dark"] .upd-scene-tab:hover,html[data-theme="dark"] .promo-scene-tab:hover{color:#fff7ed;}
html[data-theme="dark"] .upd-scene-tab.active,html[data-theme="dark"] .promo-scene-tab.active{background:rgba(251,146,60,.18);border-color:rgba(251,146,60,.4);color:#fff7ed;}

/* ═══════════════ 2026-09-25 用户指令：报价表顶栏单行化 + 5 个独立场景按钮 ═══════════════
   问题 1：顶栏原为 3 行（标题 / 3 个场景 tab / 说明小字），高约 118px，显得太长。
   问题 2：3 个场景 tab 挤在同一个胶囊里（补差·免单 / 拼团·秒杀 两两合并），
           且 quoteInit 打开后不再收起 —— 切到套餐管理等其他面板时仍然显示。
   改法：
   · .topbar.is-quote 时 .topbar-left 横向排布 → 标题 + 5 个按钮同一排（顶栏压回 1 行 ~64px）
   · .scene-tabs 去掉胶囊外框（border/background/backdrop 全清），5 个按钮各自独立成 pill
   · 报价表不再显示顶栏说明小字（topbarDesc 置空 + :empty 折叠）
   · 面板内重复的 .quote-toolbar 已在 index.html 删除，故 #panel-quote 不再需要额外 40px 让位 */

/* 1) 顶栏左侧：报价表激活时横向排（标题 + 场景按钮同排）；其他面板维持原来的两行 grid */
.topbar.is-quote .topbar-left{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
  min-width:0;
}
/* 说明小字为空时彻底折叠，不留占位 */
.topbar-desc:empty{display:none !important;}

/* 2) 场景按钮容器：不再是一个胶囊，只是 5 个按钮的横排容器 */
.scene-tabs{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0;
  margin:0;
  border:0;
  border-radius:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  box-shadow:none;
  width:max-content;
  max-width:100%;
  flex-wrap:wrap;
}
html[data-theme="dark"] .scene-tabs{background:none;border:0;box-shadow:none;}

/* 3) 单个场景按钮：各自独立成 pill */
.scene-tab{
  border:1px solid rgba(249,115,22,.30);
  border-radius:999px;
  background:#fff;
  color:#9a3412;
  font:inherit;
  font-size:13px;
  font-weight:700;
  padding:6px 16px;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 2px 8px -6px rgba(225,29,72,.45);
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.scene-tab:hover{color:#c2410c;border-color:rgba(249,115,22,.55);background:#fff7ed;}
.scene-tab.active{
  background:linear-gradient(135deg,#f97316,#e11d48);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(225,29,72,.6);
}
html[data-theme="dark"] .scene-tab{background:rgba(30,41,59,.92);border-color:rgba(148,163,184,.28);color:#fdba74;}
html[data-theme="dark"] .scene-tab:hover{background:rgba(51,65,85,.92);color:#fff7ed;}
html[data-theme="dark"] .scene-tab.active{background:linear-gradient(135deg,#f97316,#e11d48);border-color:transparent;color:#fff;}

/* 4) 顶栏压回 1 行后，面板内容不再需要额外让位（workspace 的 96px padding 已够） */
#panel-quote{padding-top:0;}

/* 5) 窄屏：标题与按钮自动换行，按钮缩小一档 */
@media (max-width:900px){
  .topbar.is-quote .topbar-left{gap:12px;}
  .scene-tab{font-size:12px;padding:5px 12px;}
}

/* ═══════════════ 2026-09-25 用户指令：顶栏 5 个场景按钮居中 + 去掉工作台内层切换 ═══════════════
   1) 5 个按钮放到顶栏「正中间」：绝对居中（与左侧标题、右侧用户区互不挤压）
   2) 工作台内原 .upd-scene-tabs（补差/免单）与 .promo-scene-tabs（拼团/秒杀）两个
      mini-tab 已从 index.html 删除 —— 场景一律由顶栏按钮切换，页面里不再重复切换。
      ⚠️ 下方 2006~2041 行那组 .upd-scene-tabs/.promo-scene-tabs 样式现已无引用，
         但按项目惯例（2026-09-16 死 CSS 裁剪误杀教训）**不删**，留着不影响渲染。 */

.topbar.is-quote .scene-tabs{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}
/* 窄屏放不下绝对居中 → 回落到标题右侧的内联排布（避免与标题/用户区重叠）。
   实测：顶栏可视宽 = 视口 − 224；按钮半宽 179、标题宽 247，故 视口 ≥1160 时左间隙 ≥40px，
   低于该值即换行回落。 */
@media (max-width:1160px){
  .topbar.is-quote .scene-tabs{position:static;left:auto;top:auto;transform:none;}
  .topbar.is-quote .topbar-left{flex-wrap:wrap;row-gap:8px;}
}

/* ═══════════════ 2026-09-25：分段式 hero 内嵌化后的深色适配 ═══════════════
   .seg-hero（补差升级·本次实付 那张大数字卡）此前只出现在弹窗里，弹窗外壳自带深色底，
   所以没有单独的深色规则；现在结果内嵌到面板中，浅色半透明底在深色主题下会发白，
   这里补一组深色覆盖，与 .seg-card / .script 的深色配方（rgba(15,23,42,.78)）保持一致。 */
html[data-theme="dark"] #up-result .seg-hero{
  background:linear-gradient(120deg, rgba(30,41,59,.86), rgba(15,23,42,.72) 60%) !important;
  border-color:rgba(148,163,184,.28) !important;
  box-shadow:none !important;
}
html[data-theme="dark"] #up-result .seg-hero-label{color:#cbd5e1 !important;}
html[data-theme="dark"] #up-result .seg-hero-label i{color:rgba(125,180,255,.72) !important;}
html[data-theme="dark"] #up-result .seg-hero-kv span{color:#94a3b8 !important;}
html[data-theme="dark"] #up-result .seg-hero-kv span i{color:rgba(125,180,255,.6) !important;}
html[data-theme="dark"] #up-result .seg-hero-kv b{color:#f1f5f9 !important;}
html[data-theme="dark"] #up-result .seg-hero-spark{color:#60a5fa;opacity:.9;}

/* ═══════════════ 2026-09-25：触摸设备顶栏防抖（fixed + backdrop-filter 合成层缺陷） ═══════════════
   背景：用户反馈「向下滑动时上方导航栏也跟着动了」。桌面 Chromium 全矩阵无法复现
   （11 档宽度 × 14 个面板/场景 × 深滚动 × iPhone/Pixel/iPad 仿真 × 本地/线上，Δ 全为 0），
   唯一能解释该症状的，是移动端 WebKit/Blink webview（微信 / 企业微信内置浏览器等）里
   「position:fixed 元素叠加 backdrop-filter」时的合成层缺陷 —— 滚动过程中固定元素被
   并入滚动层一起移动，松手后才回弹。
   处置：触摸设备上摘掉固定顶栏的 backdrop-filter（改高不透明纯色背景，可读性反而更好），
   并给一个独立合成层提示。桌面端玻璃质感与所有既有规则保持不变。
   ⚠️ 不加 transform:translateZ(0)：顶栏自身已有 backdrop-filter（本就是 fixed 后代的包含块），
      再叠 transform 只会扩大影响面，收益不明。 */
@media (hover:none),(pointer:coarse){
  body.shell-ready .topbar,
  body.topbar-auto .topbar{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:linear-gradient(168deg,
      rgba(255,255,255,.985) 0%, rgba(255,255,255,.975) 45%,
      rgba(255,255,255,.965) 70%, rgba(255,255,255,.985) 100%) !important;
  }
  body[data-theme="dark"].topbar-auto .topbar,
  html[data-theme="dark"] body.shell-ready .topbar{
    background:linear-gradient(168deg,
      rgba(30,41,59,.985) 0%, rgba(15,23,42,.975) 45%,
      rgba(23,32,51,.97) 70%, rgba(30,41,59,.985) 100%) !important;
  }
}

/* ═══════════════ 主页 · 业绩数据总览（2026-09-26） ═══════════════
   员工端主页顶部数据卡：指标 + Top5 榜（数据来自排行榜，授权制可见）。
   配色沿用 home-section 的 tone 渐变语言（rose 对齐品牌色）。 */
.home-rank{border-radius:18px;padding:18px 20px 20px;border:1px solid rgba(225,29,72,.20);
  background:linear-gradient(180deg,#FFF1F3 0%,#FFE9EC 100%);}
.home-rank-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.home-rank-head strong{font-size:17px;font-weight:800;color:#9f1239;letter-spacing:.3px;}
.home-rank-head i{font-style:normal;font-size:12px;color:#be123c;opacity:.66;}
.home-rank-more{margin-left:auto;border:1px solid rgba(225,29,72,.30);background:rgba(255,255,255,.75);
  color:#be123c;font:inherit;font-size:13px;font-weight:700;padding:7px 14px;border-radius:10px;cursor:pointer;transition:.15s;}
.home-rank-more:hover{background:#e11d48;color:#fff;border-color:#e11d48;transform:translateY(-1px);}
/* 2026-09-27 用户指令：刷新入口统一到「主页 · 数据总览」——
   主页仪表盘头部新增「⟳ 刷新」主按钮（点击 = 立即全量同步：拉腾讯文档 → 写云端 →
   刷本页排行榜 + 本页数据总览）。排行榜面板内的「刷新 / 立即同步」按钮已一并删除。 */
.home-dash-refresh{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;cursor:pointer;
  border:0;border-radius:999px;padding:7px 17px;font:inherit;font-size:12.5px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,#f97316,#e11d48);
  box-shadow:0 6px 16px rgba(225,29,72,.28);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;}
.home-dash-refresh:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 9px 20px rgba(225,29,72,.36);}
.home-dash-refresh:active:not(:disabled){transform:translateY(0);}
.home-dash-refresh:disabled{opacity:.62;cursor:default;box-shadow:none;}
body[data-theme="dark"] .home-dash-refresh{background:linear-gradient(135deg,#be123c,#e11d48);}
.home-rank-stats{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}
.home-rank-stat{flex:1 1 150px;display:flex;flex-direction:column;gap:2px;padding:12px 16px;
  background:rgba(255,255,255,.78);border:1px solid rgba(225,29,72,.14);border-radius:13px;}
.home-rank-stat i{font-style:normal;font-size:12px;color:#9f1239;opacity:.62;}
.home-rank-stat b{font-size:19px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums;}
.home-rank-stat b.up{color:#16a34a;}
.home-rank-stat b.down{color:#e11d48;}
.home-rank-top{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.home-rank-row{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;
  background:rgba(255,255,255,.72);border:1px solid rgba(225,29,72,.10);border-radius:12px;transition:.15s;}
.home-rank-row:hover{background:#fff;border-color:rgba(225,29,72,.35);transform:translateX(3px);}
.home-rank-medal{flex:0 0 26px;text-align:center;font-weight:800;color:#9f1239;font-size:14px;}
.home-rank-name{flex:0 0 128px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:700;color:#0f172a;font-size:14px;}
.home-rank-bar{flex:1 1 auto;height:10px;border-radius:999px;background:rgba(225,29,72,.10);overflow:hidden;}
.home-rank-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#f97316,#e11d48);transition:width .3s;}
.home-rank-val{flex:0 0 96px;text-align:right;font-weight:800;color:#9f1239;font-size:14px;font-variant-numeric:tabular-nums;}
.home-rank-ord{flex:0 0 56px;text-align:right;font-size:12.5px;font-weight:700;color:#64748b;}
/* 深色模式（对齐 home-section 深色处理） */
body[data-theme="dark"] .home-rank{background:rgba(15,23,42,.55);border-color:rgba(148,163,184,.18);box-shadow:none;}
body[data-theme="dark"] .home-rank-head strong{color:#fda4af;}
body[data-theme="dark"] .home-rank-head i{color:#94a3b8;opacity:1;}
body[data-theme="dark"] .home-rank-more{background:rgba(15,23,42,.78);color:#fda4af;border-color:rgba(148,163,184,.25);}
body[data-theme="dark"] .home-rank-more:hover{background:#e11d48;color:#fff;border-color:#e11d48;}
body[data-theme="dark"] .home-rank-stat{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.16);}
body[data-theme="dark"] .home-rank-stat i{color:#94a3b8;opacity:1;}
body[data-theme="dark"] .home-rank-stat b{color:#f1f5f9;}
body[data-theme="dark"] .home-rank-row{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.14);}
body[data-theme="dark"] .home-rank-row:hover{background:rgba(30,41,59,.9);border-color:rgba(251,113,133,.45);}
body[data-theme="dark"] .home-rank-medal{color:#fda4af;}
body[data-theme="dark"] .home-rank-name{color:#f1f5f9;}
body[data-theme="dark"] .home-rank-bar{background:rgba(148,163,184,.16);}
body[data-theme="dark"] .home-rank-val{color:#fda4af;}
body[data-theme="dark"] .home-rank-ord{color:#94a3b8;}

/* ═══════════════ 2026-09-26 用户指令：排行榜指标切换进顶栏（报价表场景按钮同款） ═══════════════
   #rankTabs 复用 .scene-tabs/.scene-tab 样式；进「排行榜」时 .topbar.is-rank：
   标题 + 5 个指标按钮同一排，按钮绝对居中；离开面板自动收起（showPanel 控制）。 */
.topbar.is-rank .topbar-left{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
  min-width:0;
}
.topbar.is-rank .scene-tabs{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}
@media (max-width:1160px){
  .topbar.is-rank .scene-tabs{position:static;left:auto;top:auto;transform:none;}
  .topbar.is-rank .topbar-left{flex-wrap:wrap;row-gap:8px;}
}

/* ═══════════════ 2026-09-26 用户指令：主页完全重做成「数据总览」仪表盘 ═══════════════
   形态对照「独立信息」工作台：指标卡 / 每日GMV柱图 / 用户分层 / 大区对比 / 产品TOP8 / 顾问排名表。
   数据来自在线表格自动同步（qt_dash_v1）。纯 CSS 图表，无任何图表库。 */
.home-dash-wrap{max-width:1800px;width:100%;margin:0 auto;}
.home-dash{display:grid;gap:14px;}
.dash-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.dash-head strong{font-size:18px;font-weight:800;color:#9f1239;}
.dash-range{font-size:12.5px;font-weight:700;color:#64748b;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:4px 12px;}
.dash-chips{display:flex;gap:4px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:3px;}
.dash-chip{border:none;background:transparent;border-radius:999px;font:inherit;font-size:12.5px;font-weight:700;color:#64748b;padding:5px 13px;cursor:pointer;transition:.15s;}
.dash-chip:hover{color:#e11d48;}
.dash-chip.active{background:linear-gradient(135deg,#f97316,#e11d48);color:#fff;}
.dash-updated{font-style:normal;font-size:12px;color:#9ca3af;margin-left:auto;}
.home-dash .home-rank-more{margin-left:0;}

.dash-cards{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;}
.dash-card{background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:13px;padding:13px 15px;display:grid;gap:3px;box-shadow:0 1px 2px rgba(16,24,40,.04);}
.dash-card i{font-style:normal;font-size:12px;color:#64748b;}
.dash-card b{font-size:21px;font-weight:800;color:#111827;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.dash-card span{font-size:11.5px;color:#9ca3af;}

.dash-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.dash-panel{background:#fff;border:1px solid var(--line,#e6e8ee);border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(16,24,40,.04);}
.dash-panel h3{font-size:14.5px;font-weight:800;color:#111827;margin:0 0 12px;}
.dash-panel h3 span{font-size:11.5px;font-weight:600;color:#9ca3af;margin-left:6px;}
.dash-panel-trend{grid-column:span 4;}
.dash-panel-tiers{grid-column:span 2;}
.dash-panel-regions{grid-column:span 3;}
.dash-panel-products{grid-column:span 3;}

.dash-panel-trend{display:flex;flex-direction:column;}
.dash-panel-trend h3{flex:0 0 auto;}
.dash-trend-box{flex:1 1 auto;min-height:170px;display:flex;align-items:flex-end;gap:3px;}
.dash-trend-cols{display:flex;align-items:flex-end;gap:3px;width:100%;height:100%;}
.dash-col{flex:1 1 0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0;}
.dash-col i{display:block;width:100%;max-width:26px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#60a5fa,#1d4ed8);transition:height .25s;}
.dash-col span{font-size:9.5px;color:#9ca3af;margin-top:4px;white-space:nowrap;}
.dash-empty{font-size:13px;color:#9ca3af;padding:16px 0;}

.dash-bar-row{display:flex;align-items:center;gap:10px;padding:4.5px 0;}
.dash-bar-name{flex:0 0 118px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:#374151;text-align:right;}
.dash-bar-track{flex:1 1 auto;height:12px;border-radius:999px;background:#f1f5f9;overflow:hidden;}
.dash-bar-track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#3b82f6,#1d4ed8);}
/* 2026-09-27 修复（改动前就坏的老问题）：.dash-bar-track 靠父级 flex 撑开（flex:1 1 auto），
   但放进 <td> 后父级是 display:table-cell，flex 完全失效 → 横条被算成 0×0，
   「谁出单了」和顾问档案「账号」表的占比列整列空白。
   表格里给一个确定的尺寸；.dash-bar-row 里的横条仍是 flex，不受影响。 */
.dash-table td .dash-bar-track{display:block;width:100%;min-width:64px;height:9px;}
.dash-bar-val{flex:0 0 auto;font-size:12px;font-weight:700;color:#334155;font-variant-numeric:tabular-nums;}
.dash-bar-val i{font-style:normal;font-weight:600;color:#94a3b8;}

.dash-table-scroll{max-height:430px;overflow:auto;border:1px solid #f1f5f9;border-radius:10px;}
.dash-table{width:100%;border-collapse:collapse;font-size:13px;}
.dash-table th{position:sticky;top:0;background:#f8fafc;color:#64748b;font-size:11.5px;font-weight:700;text-align:left;padding:9px 12px;border-bottom:1px solid #eef1f5;white-space:nowrap;z-index:1;}
.dash-table td{padding:8px 12px;border-bottom:1px solid #f6f8fa;color:#334155;font-variant-numeric:tabular-nums;white-space:nowrap;}
.dash-table td.dash-c-name{font-weight:700;color:#111827;}
.dash-table tbody tr{cursor:pointer;transition:background .12s;}
.dash-table tbody tr:hover{background:#fff7ed;}
.dash-panel-wide{grid-column:1 / -1;}

/* 深色模式（对齐全站暗色配方） */
body[data-theme="dark"] .dash-head strong{color:#fda4af;}
body[data-theme="dark"] .dash-range{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.22);color:#cbd5e1;}
body[data-theme="dark"] .dash-chips{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.22);}
body[data-theme="dark"] .dash-chip{color:#94a3b8;}
body[data-theme="dark"] .dash-chip.active{color:#fff;}
body[data-theme="dark"] .dash-card{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.18);box-shadow:none;}
body[data-theme="dark"] .dash-card i{color:#94a3b8;}
body[data-theme="dark"] .dash-card b{color:#f1f5f9;}
body[data-theme="dark"] .dash-card span{color:#64748b;}
body[data-theme="dark"] .dash-panel{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.18);box-shadow:none;}
body[data-theme="dark"] .dash-panel h3{color:#f1f5f9;}
body[data-theme="dark"] .dash-panel h3 span{color:#64748b;}
body[data-theme="dark"] .dash-col i{background:linear-gradient(180deg,#3b82f6,#1e40af);}
body[data-theme="dark"] .dash-col span{color:#64748b;}
body[data-theme="dark"] .dash-bar-name{color:#cbd5e1;}
body[data-theme="dark"] .dash-bar-track{background:rgba(148,163,184,.16);}
/* 2026-09-29：原深端 #1e40af 压在半透明轨道上只有 1.72:1（进度条右段等于消失）→ 换 #60a5fa。
   实测见 verify-output/probe-dark-svg.js（主页横条与排行榜达成率条同一处样式） */
body[data-theme="dark"] .dash-bar-track i{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
body[data-theme="dark"] .dash-bar-val{color:#e2e8f0;}
body[data-theme="dark"] .dash-bar-val i{color:#64748b;}
body[data-theme="dark"] .dash-table th{background:rgba(30,41,59,.92);color:#94a3b8;border-bottom-color:rgba(148,163,184,.16);}
body[data-theme="dark"] .dash-table td{color:#cbd5e1;border-bottom-color:rgba(148,163,184,.10);}
body[data-theme="dark"] .dash-table td.dash-c-name{color:#f1f5f9;}
body[data-theme="dark"] .dash-table tbody tr:hover{background:rgba(51,65,85,.5);}

/* 窄屏：指标卡换行、网格变单列 */
@media (max-width:1400px){.dash-cards{grid-template-columns:repeat(4,1fr);}}
@media (max-width:1100px){
  .dash-cards{grid-template-columns:repeat(2,1fr);}
  .dash-grid{grid-template-columns:1fr;}
}

/* ═══════════════ 2026-09-26 追加：今日出单视图 + 个人分析弹窗 ═══════════════ */
.dash-viewtabs{display:flex;gap:4px;background:#fff;border:1px solid #e5e7eb;border-radius:999px;padding:3px;}
.dash-viewtabs .dash-chip{font-size:13px;padding:6px 16px;}
.dash-datepick{border:1px solid #e5e7eb;border-radius:10px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;color:#334155;background:#fff;}
/* 2026-09-27 追加：今日出单默认跟今天走；选了历史日期时出现「回到今天」 */
.dash-today-btn{border:1px solid #e5e7eb;border-radius:10px;padding:7px 12px;font:inherit;font-size:13px;font-weight:700;color:#be123c;background:#fff;cursor:pointer;transition:.15s;}
.dash-today-btn:hover{background:#fff1f2;border-color:rgba(225,29,72,.35);}
.dash-cards-6{grid-template-columns:repeat(6,1fr);}
.dash-tag{display:inline-block;background:#eef2ff;color:#3b5bdb;border-radius:6px;padding:1.5px 7px;font-size:11.5px;font-weight:600;white-space:nowrap;}
.dash-ok{color:#16a34a;}
.hpm-copy{cursor:pointer;border-bottom:1px dashed #94a3b8;}
.hpm-copy:hover{color:#e11d48;border-color:#e11d48;}

/* 个人分析弹窗 */
.hpm-overlay{position:fixed;inset:0;z-index:2000;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);
  display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow:auto;}
.hpm-modal{width:min(1180px,100%);background:#F5F7FA;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;}
/* 2026-10-05 用户指令：头部橙红渐变横幅与工作台语言冲突 → 改 L1 弹窗头淡玫红底
   （--rk-brand-bg 是 ranking.css 的全局 token，深浅主题自动映射），标题深色、副行中性。 */
.hpm-head{display:flex;align-items:center;gap:12px;padding:15px 22px;
  background:var(--rk-brand-bg,#fff1f2);border-bottom:1px solid var(--rk-line,#f1f5f9);}
.hpm-head strong{color:var(--ink,#111827);font-size:16.5px;letter-spacing:.2px;}
.hpm-head span{color:#64748b;font-size:12.5px;font-weight:700;}
.hpm-close{margin-left:auto;border:1px solid var(--line,#e5e7eb);background:#fff;color:#64748b;
  width:32px;height:32px;border-radius:9px;cursor:pointer;font-size:14px;transition:.15s;}
.hpm-close:hover{color:#e11d48;border-color:#f9a8b8;background:#fff7f9;}
.hpm-body{padding:18px 20px;display:grid;gap:14px;max-height:calc(100vh - 190px);overflow:auto;}
.hpm-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.hpm-note{font-size:12.5px;color:#334155;margin:6px 0 0;}
.hpm-ai p{margin:0 0 8px;font-size:13.5px;line-height:1.8;color:#374151;}
.hpm-foot{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px;background:#fff;border-top:1px solid #e5e7eb;}
/* 2026-10-05：主次按钮对齐 rk-btn 体系 —— 有价值的下一步（查看全部）= 实心玫红主按钮；
   关闭降为中性 ghost（原来两个都往橙红渐变上靠，主次不分且与全站脱节）。 */
.hpm-allbtn{border:1px solid transparent;background:var(--rk-brand,#e11d48);color:#fff;font:inherit;font-size:13.5px;
  font-weight:800;padding:9px 16px;border-radius:10px;cursor:pointer;box-shadow:0 8px 18px rgba(225,29,72,.22);transition:.15s;}
.hpm-allbtn:hover{filter:brightness(1.06);}
.hpm-allbtn:active{transform:translateY(1px);}
.hpm-closebtn{border:1px solid var(--line,#e5e7eb);background:#fff;color:#64748b;font:inherit;font-size:13.5px;
  font-weight:700;padding:9px 20px;border-radius:10px;cursor:pointer;transition:.15s;}
.hpm-closebtn:hover{color:#e11d48;border-color:#f9a8b8;background:#fff7f9;}
/* 低对比小字加深（对齐 .impeccable.md 对比度底线：白底说明文字最低 #64748b） */
.hpm-body .dash-card span{color:#64748b;}
.hpm-body .dash-panel h3 span{color:#64748b;}
.hpm-split{height:14px;border-radius:999px;background:#f59e0b;overflow:hidden;}
.hpm-split i{display:block;height:100%;background:linear-gradient(90deg,#10b981,#059669);}

/* 深色模式 */
body[data-theme="dark"] .dash-viewtabs{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.22);}
body[data-theme="dark"] .dash-datepick{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.22);color:#e2e8f0;}
body[data-theme="dark"] .dash-today-btn{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.22);color:#fda4af;}
body[data-theme="dark"] .dash-today-btn:hover{background:rgba(76,5,25,.5);}
body[data-theme="dark"] .dash-tag{background:rgba(59,91,219,.22);color:#93b4ff;}
body[data-theme="dark"] .hpm-overlay{background:rgba(2,6,23,.7);}
body[data-theme="dark"] .hpm-modal{background:#0f172a;}
/* 2026-10-05：头部换 L1 淡玫红底（--rk-brand-bg 深色自动映射）后，标题/副行/关闭钮补深色规则 */
body[data-theme="dark"] .hpm-head strong{color:#e5e7eb;}
body[data-theme="dark"] .hpm-head span{color:#94a3b8;}
body[data-theme="dark"] .hpm-close{background:rgba(148,163,184,.12);border-color:rgba(148,163,184,.22);color:#cbd5e1;}
body[data-theme="dark"] .hpm-close:hover{color:#fda4af;border-color:rgba(251,113,133,.45);background:rgba(249,115,22,.14);}
body[data-theme="dark"] .hpm-body .dash-panel{background:rgba(15,23,42,.78);border-color:rgba(148,163,184,.18);}
body[data-theme="dark"] .hpm-body .dash-card{background:rgba(30,41,59,.9);border-color:rgba(148,163,184,.18);}
body[data-theme="dark"] .hpm-note{color:#cbd5e1;}
body[data-theme="dark"] .hpm-ai p{color:#cbd5e1;}
body[data-theme="dark"] .hpm-foot{background:#0f172a;border-top-color:rgba(148,163,184,.16);}
/* 主按钮深色下保持实心玫红（与浅色同语言）；关闭 ghost 换深底 */
body[data-theme="dark"] .hpm-allbtn{background:var(--rk-brand,#e11d48);border-color:transparent;color:#fff;box-shadow:none;}
body[data-theme="dark"] .hpm-closebtn{background:rgba(148,163,184,.1);border-color:rgba(148,163,184,.22);color:#94a3b8;}
body[data-theme="dark"] .hpm-closebtn:hover{color:#fda4af;border-color:rgba(251,113,133,.45);background:rgba(249,115,22,.14);}
body[data-theme="dark"] .hpm-split{background:rgba(245,158,11,.5);}
@media (max-width:1400px){.dash-cards-6{grid-template-columns:repeat(3,1fr);}}
@media (max-width:1100px){.dash-cards-6{grid-template-columns:repeat(2,1fr);}.hpm-cols{grid-template-columns:1fr;}}
@keyframes hpmFade{from{opacity:0;}to{opacity:1;}}
@keyframes hpmIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}
.hpm-overlay{animation:hpmFade .18s ease;}
.hpm-modal{animation:hpmIn .22s ease;}

/* 2026-09-26 追加：个人档案弹窗（入职时间行 + 三列分布面板） */
.dash-infoline{background:#fff7ed;border:1px solid rgba(249,115,22,.22);border-radius:12px;padding:11px 16px;font-size:13px;color:#9a3412;}
.dash-infoline b{color:#c2410c;}
.hpm-cols-3{grid-template-columns:1fr 1fr 1fr;}
body[data-theme="dark"] .dash-infoline{background:rgba(251,146,60,.10);border-color:rgba(251,146,60,.25);color:#fdba74;}
body[data-theme="dark"] .dash-infoline b{color:#fed7aa;}
@media (max-width:1100px){.hpm-cols-3{grid-template-columns:1fr;}}

/* 2026-09-26 追加：个人档案 = 独立全屏界面（点当日分析弹窗的「查看该顾问全部数据」出现）
   ⚠️ 2026-09-27 起已被下面「工作台内档案」取代，openHomeProfile 不再生成 .hpm-full。
      规则保留不删（项目约定：死 CSS 不删），仅作历史口径参考。 */
.hpm-overlay.hpm-full{align-items:stretch;padding:0;}
.hpm-overlay.hpm-full .hpm-modal{width:100%;max-width:none;border-radius:0;height:100vh;overflow:auto;animation:hpmFade .2s ease;}
.hpm-overlay.hpm-full .hpm-body{max-height:none;}
.hpm-overlay.hpm-full .hpm-head{position:sticky;top:0;z-index:5;}

/* ═══════════════ 顾问档案 · 工作台内面板（2026-09-27 用户指令） ═══════════════
   用户要求：「查看该顾问全部信息要建立在保留左侧导航栏与上方导航栏的情况下，
   这个信息就在工作台当中显示」。所以档案从全屏覆盖层改为 #panel-profile 面板，
   这里只补面板内的返回按钮 / 标题与栅格间距；卡片与图表复用 .dash-* / .hpm-cols
   （它们的响应式断点已就绪，无需重复）。 */
.pf-shell{display:grid;gap:14px;}
.pf-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.pf-back{border:1px solid var(--line,#e6e8ee);background:#fff;color:#be123c;font:inherit;
  font-size:13px;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.15s;}
.pf-back:hover{background:#fff1f2;border-color:rgba(225,29,72,.35);}
.pf-back:active{transform:scale(.98);}
.pf-head-t{display:flex;flex-direction:column;gap:2px;min-width:0;}
.pf-head-t strong{font-size:16.5px;font-weight:800;color:#111827;}
.pf-head-t span{font-size:12.5px;font-weight:600;color:#6b7280;}
.pf-body{display:grid;gap:14px;}
body[data-theme="dark"] .pf-back{background:rgba(30,41,59,.85);border-color:rgba(148,163,184,.25);color:#fda4af;}
body[data-theme="dark"] .pf-back:hover{background:rgba(225,29,72,.18);border-color:rgba(253,164,175,.4);}
body[data-theme="dark"] .pf-head-t strong{color:#e5e7eb;}
body[data-theme="dark"] .pf-head-t span{color:#94a3b8;}

/* 主页「首次同步中」状态条（无总览数据时的回落提示） */
.home-seed-banner{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fffbeb,#fef3c7);
  border:1px solid rgba(245,158,11,.35);border-radius:14px;padding:14px 18px;}
.home-seed-banner .hsb-ic{font-size:20px;}
.home-seed-banner .hsb-tx{flex:1;font-size:13px;color:#78350f;line-height:1.6;}
.home-seed-banner .hsb-tx b{color:#92400e;margin-right:8px;}
.home-seed-banner .hsb-btn{border:1px solid rgba(180,83,9,.4);background:#fff;color:#b45309;font:inherit;font-size:13px;font-weight:700;padding:8px 16px;border-radius:10px;cursor:pointer;}
.home-seed-banner .hsb-btn:hover{background:#f59e0b;color:#fff;}
body[data-theme="dark"] .home-seed-banner{background:rgba(245,158,11,.10);border-color:rgba(245,158,11,.30);}
body[data-theme="dark"] .home-seed-banner .hsb-tx{color:#fcd34d;}
body[data-theme="dark"] .home-seed-banner .hsb-tx b{color:#fde68a;}
body[data-theme="dark"] .home-seed-banner .hsb-btn{background:rgba(15,23,42,.8);color:#fcd34d;border-color:rgba(245,158,11,.35);}

/* ═══════════ 2026-09-27 用户指令：大屏自适应（27 寸显示器下工作台内容贴近边沿） ═══════════
   原 1800px 顶宽是按 1440/1920 屏定的；2560 宽屏下两侧留白过大。
   ≥1920px 视口时放开各主内容壳的顶宽 → 内容铺满玻璃板内容区，
   「贴近工作台边上」由玻璃板自身 margin（22/36px）与壳内既有 padding 兜底，
   中小屏（<1920px）完全不受影响。带 !important 的两条用于压过 pkg-calc.css 的同值顶宽。 */
@media (min-width: 1920px){
  body .rk-shell,
  .home-sections,
  .home-dash-wrap,
  #qp-updiff-content .upd-shell,
  #qp-promo-content .library-shell,
  #qp-upquote .library-shell,
  #panel-accounts{ max-width: none; }
  :is(#panel-upgrade,#panel-combo) .shell{ max-width: none !important; }
}

/* ═══ 完整套餐 · 去掉「外层介绍层」（2026-09-30 用户指令第九轮） ═══
   用户原话：「完整套餐的话术UI框简单一些，不需要外面那一层介绍。
             比如说套餐介绍，先让客户看清套餐本身。这种的」
   现状：每张话术卡（.uq-card-board）的正文是 4 个 .uq-group，每个 group 头顶一层 .uq-group-head
   ——「① 步骤号 + 组标题（套餐介绍）+ 组描述（先让客户看清套餐本身）」；
   而紧挨着的 .uq-block 自己又有一个同名 .uq-block-label（也是「套餐介绍」）→ 同一个词连着出现两遍，
   卡片 428×2460px，视觉噪音主要来自这 4 层组头。
   → 完整套餐面板隐藏 .uq-group-head，正文直接由各段的 .uq-block（自带段标签 + 复制按钮）构成。
   ⚠️ 作用域只写 #qp-upquote：`.uq-group` 目前**只有完整套餐**在用 ——
      `uqGroupHtml()` 的唯一调用点是 `app-new.js uqBoardCardHtml()`（拼团/秒杀自己建卡，无 .uq-group，
      实测 #qp-promo-content 里 .uq-group 数量 = 0）。写 #qp-upquote 属**防御性作用域**：
      万一日后别处复用 uqGroupHtml，不会被这条规则误伤。
   ⚠️ 组头里的「复制本组文字」按钮当前数量为 0（各组的 copyInBlock 均为 true，按钮在段内），
      所以隐藏组头**不丢任何复制入口**；日后改 data.js 的 group meta（copyInBlock / hot）要重新确认。
   ⚠️ 隐藏后「成交关键」徽标（.uq-group-hot）也一并消失。若日后想保留步骤感，
      改成只隐藏 .uq-group-step / .uq-group-title / .uq-group-desc 三条即可（保留 hot 徽标）。
   ⚠️ 用 display:none 而不是改 uqGroupHtml —— DOM 不变，upquote-verify.js 里按
      .uq-group-title / .uq-group-desc 取的断言全部照旧，且随时可回退。
   ⚠️ 只隐藏组头还不够（2026-09-30 用户截图反馈「为什么这里有两个框框」）：
      .uq-group 自己还带一层玻璃框 —— liquid-glass.css §5 把
      `.uq-block / .uq-card-board / .uq-img-cell / .uq-group` 统一加了背景面 + 边缘
      （`!important`，特异性 (1,1,2)），于是「组框（radius 14 / padding 10）+ 段框（radius 12）」
      叠成两个同心圆角框，组头一隐就成了没有标签的空壳。
      处理：给 .uq-group 设 `display:contents` —— 该元素**不产生盒子**，
      任何 !important 背景 / 边框 / 内距都不再渲染；段块升为 .uqc-body（flex column, gap:12px）
      的直接子项 → 间距均匀，视觉上只剩每段自己的框。
      ⚠️ 仍然 DOM 不变，`.uq-group[data-uq-group="pkg"] .uq-block` 这类**后代选择器**照旧生效。
      ⚠️ 副作用：.uq-group--hot 的橙色底纹也随之消失（组头已隐，底纹本就成了无标签的色块）。 */
#qp-upquote .uq-group-head{display:none;}
#qp-upquote .uq-group{display:contents;}

/* ═══════════════ 2026-09-28 用户指令：计算器工作台（首单计算 / 联报计算 / 双品联报 / 退款计算 四合一）═══
   用户原话：「把首单计算，联报计算，双品联报，退款计算，像报价表一样，把这三个选项放在最上方的导航栏，
   然后四合一做成 计算器，放在左侧导航栏里。不要影响整体的使用」
   做法与「报价表 5→1」完全对齐（见上面 .data-quote-merged / .panel.quote-merged-hidden 那段）：
     · #panel-calc 容器里 4 个 .calc-pane，各装一棵**整棵搬进来的**原 <section class="panel">
       （calcInit 用 appendChild 移节点 → ID / 事件绑定 / 各面板 Init 全部不动）
     · `.calc-pane > .panel` 必须改回 display:block：.panel 默认 display:none，
       不覆盖的话搬进去的四个面板一个都看不见（这是与报价表唯一的实现差异 ——
       报价表搬的是 <main>，这里面板的根就是 <section class="panel">） */
#panel-calc{padding-top:10px;}
/* 2026-09-28 用户反馈：计算器工作台「背景多重叠加」—— 搬进来的原 <section class="panel">
   自带了 styles.css 的卡片描边/底色/阴影/圆角/内边距，叠在外层 #panel-calc 的玻璃卡里就成了「好几条线」。
   → 把这些原面板当成纯内容壳：剥掉它自带的卡片 chrome，只留一条外层轮廓。
   ⚠️ 2026-09-28 修正：原来这里假设「内层 .shell / .page / .rf-layout 各自带 padding，剥掉 .panel 的不会顶边」——
      对 upgrade/joint/combo 成立（.shell.pkg-shell 有 margin:0 14px、main.page 有 margin:0 5px），
      但 **.rf-layout 的 padding 与 margin 都是 0**，退款面板的留白原本全靠 #panel-refund 自己的
      padding（styles.css: `28px 30px 32px`）。剥掉后 .rf-form / .rf-summary 的边框直接贴住玻璃板边框
      （实测只差 1px）→ 用户报「退款计算的工作台叠加了一层」。见下方 .calc-pane > #panel-refund 补回。 */
.calc-pane > .panel{
  display:block !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
/* 2026-09-28 用户反馈：「计算器里面的退款计算，工作台叠加了一层」。
   根因：退款面板的内层 .rf-layout 自身没有留白（margin/padding 皆 0），
        上面的 padding:0!important 把 #panel-refund 原来的 28px 30px 32px 一并剥掉后，
        .rf-form / .rf-summary 两个白卡就贴到了玻璃板边框上 → 两层边框相邻（差 1px）像叠加。
   修法：只给退款补回留白，取值与 upgrade/combo 的 .shell.pkg-shell（margin:0 14px + padding-bottom:40px）对齐，
        这样 4 个场景的视觉留白一致（内层容器自带的上/下 padding 由 .rf-form 的 padding:18px 20px 承担）。
   ⚠️ 用 #panel-refund 提升特异性（1,1,0 > 0,2,0）压过上面的 .calc-pane > .panel{padding:0!important}。 */
.calc-pane > #panel-refund{
  padding:0 14px 40px !important;
}
/* ⚠️ 2026-09-28 连带修：**深色下搬进来的面板会重新长出 chrome**。
   文件上方「深色模式：#panel-upgrade/.combo/.joint .panel 容器自身根修」那组规则
   （`html[data-theme="dark"] #panel-joint.panel.panel-flush{ background:linear-gradient(…)!important; border:1px solid rgba(255,255,255,.15)!important; box-shadow:…!important }`）
   特异性 (1,3,1)，**高于**上面 `.calc-pane > .panel` 的 (0,2,0)；两者都带 !important 时高特异性胜
   → 深色下「联报计算」的内层面板又把渐变底 + 1px 白边 + 阴影染了回来，重现「双层框」。
   （`#panel-upgrade` / `#panel-combo` 那两条要求 `.active`，而搬进 pane 的面板永远没有 `.active`
     —— `showPanel` 会先把所有 `.panel` 的 `.active` 摘掉再加给 `#panel-calc` —— 所以只有 joint 中招。
     但那两条是"碰巧"没中，不可依赖，这里一并覆盖。）
   修法：加一条**深色专用**的重剥规则，特异性 (1,4,2) 压过 (1,4,1)/(1,3,1)。
   注意 **故意不设 padding** —— 退款的留白由上面 `.calc-pane > #panel-refund` 提供，
   否则会被这条高特异性规则连同 padding 一起清掉。 */
html[data-theme="dark"] body #panel-calc .calc-pane > .panel,
html[data-theme="dark"] body #panel-calc .calc-pane > .panel.panel-flush{
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
/* 顶栏：标题 + 4 个场景按钮同一排（照抄 .topbar.is-quote / .topbar.is-rank 那两段） */
.topbar.is-calc .topbar-left{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:20px;
  min-width:0;
}
.topbar.is-calc .scene-tabs{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
}
@media (max-width:1160px){
  .topbar.is-calc .scene-tabs{position:static;left:auto;top:auto;transform:none;}
  .topbar.is-calc .topbar-left{flex-wrap:wrap;row-gap:8px;}
}

/* ═══════════════ 2026-09-28 用户指令：顶栏选项做成「灯管导航」（tubelight navbar）══════════════
   用户给了一份 React 组件参考（tubelight-navbar），要点：一条悬浮圆角胶囊（半透明白 + 细描边 + 毛玻璃），
   当前项上方一根发光的「灯管」指示条 + 光晕，选中态是**浅色底 + 主色文字**（不是之前的实心渐变块）。
   ⚠️ 只改顶栏那一排 `.scene-tabs`（报价表 / 排行榜 / 计算器 三处共用），不动面板内任何东西。
   纯 CSS 复刻（不引 framer-motion）：灯管用 active 项的 ::after 短条 + box-shadow 光晕实现。

   ── 2026-09-29 用户参考图校准（本段是顶栏页签的唯一权威，别处不许再覆盖）───────────
   用户给了一张顶栏参考图，要求「最顶部的按照这个来」。逐像素取色/量几何后确认：
     · 容器     白色胶囊（999px）+ 浅描边 `rgba(148,163,184,.30)` + 柔投影        ← 本来就对
     · 未选中   无底无框，文字 `rgba(15,23,42,.72)`（实测 #525865，完全吻合）      ← 本来就对
     · hover    `rgba(225,29,72,.05)` + `#e11d48`                                ← 本来就对
     · 选中底   浅粉 `rgba(225,29,72,.10)`（实测 #fce7eb ≈ 理论 #fce8ed）         ← 本来就对
     · 选中字   `#be123c`（实测最暗像素 #bf133b）                                  ← 本来就对
     · 灯管     `linear-gradient(90deg,#f97316,#e11d48)` + 三层光晕，坐在容器上沿外 4px ← 本来就对
     · 选中块形 **圆角矩形 r≈10px**（不是胶囊）                                    ← ✗ 已按参考图改
     · 尺寸     块高 ~34px（padding 5px 16px）                                     ← ✗ 已按参考图改
   ⛔ 教训：本段一度被 liquid-glass.css 的 .scene-tab 规则整段推翻（选中态变实心红渐变块），
      见 liquid-glass.css §2/§7 的撤回注释。**顶栏页签的视觉只归本段负责。** */
.topbar .scene-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  padding:5px;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.30);
  background:rgba(255,255,255,.42);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 12px 30px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.7);
  width:max-content;
  max-width:100%;
  flex-wrap:wrap;
}
.topbar .scene-tab{
  position:relative;
  /* 2026-09-29 按用户参考图校准（原 7px 18px / 999px）：
     参考图实测 —— 容器高 ~45.5px、选中块高 ~34px、选中块圆角 ~10px（**圆角矩形**，
     不是全胶囊：胶囊 r=h/2≈17，实测顶部平直段 42/60 远超胶囊的 26/60）。
     改后 5+22.9+5+2 ≈ 34.9px 高，容器 5*2+2+34.9 ≈ 46.9px，与参考图对齐。 */
  padding:5px 16px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:rgba(15,23,42,.72);
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:none;
  transition:color .16s ease, background .16s ease;
}
.topbar .scene-tab:hover{color:#e11d48;background:rgba(225,29,72,.05);}
.topbar .scene-tab.active{
  color:#be123c;
  background:rgba(225,29,72,.10);
}
/* 灯管：当前项顶部一根发光短条 + 两层光晕（对应参考组件里的 w-8 h-1 灯管 + blur 光球） */
.topbar .scene-tab.active::after{
  content:"";
  position:absolute;
  top:-9px; left:50%; transform:translateX(-50%);
  width:28px; height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#f97316,#e11d48);
  box-shadow:0 0 7px 1px rgba(225,29,72,.65),
             0 0 18px 5px rgba(225,29,72,.30),
             0 0 30px 9px rgba(249,115,22,.18);
}
html[data-theme="dark"] .topbar .scene-tabs{
  border-color:rgba(148,163,184,.26);
  background:rgba(17,24,39,.40);
  box-shadow:0 12px 30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="dark"] .topbar .scene-tab{color:rgba(203,213,225,.78);}
html[data-theme="dark"] .topbar .scene-tab:hover{color:#fda4af;background:rgba(225,29,72,.12);}
html[data-theme="dark"] .topbar .scene-tab.active{color:#fda4af;background:rgba(225,29,72,.18);}
html[data-theme="dark"] .topbar .scene-tab.active::after{
  background:linear-gradient(90deg,#fb923c,#f43f5e);
  box-shadow:0 0 7px 1px rgba(251,113,133,.7),
             0 0 18px 5px rgba(251,113,133,.35);
}

/* ═══ 完整套餐档位卡「无券 / 京东券」模板切换（2026-09-28）═══
   卡头标题行旁的小胶囊开关：选京东券 = 含「原价/【京东券】后实付」价格链；
   无券 = 实付原价口径。状态全局共享，样式对齐顶栏灯管导航的胶囊语言。 */
.uq-coupon-toggle{
  display:inline-flex; align-items:center; gap:2px; padding:3px;
  border-radius:999px;
  background:rgba(24,24,27,.045);
  border:1px solid rgba(24,24,27,.12);
}
.uq-coupon-toggle .uq-ct-btn{
  border:0; background:transparent; cursor:pointer;
  padding:4px 12px; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1.4; white-space:nowrap;
  color:#78716c;
  transition:color .15s, background .15s, box-shadow .15s;
}
.uq-coupon-toggle .uq-ct-btn:hover{color:#0f172a;}
.uq-coupon-toggle .uq-ct-btn.active{
  background:#fff; color:#c2410c;
  box-shadow:0 1px 5px rgba(15,23,42,.14);
}
/* 深色 */
html[data-theme="dark"] .uq-coupon-toggle{
  background:rgba(255,255,255,.05);
  border-color:rgba(148,163,184,.22);
}
html[data-theme="dark"] .uq-coupon-toggle .uq-ct-btn{color:#a1a1aa;}
html[data-theme="dark"] .uq-coupon-toggle .uq-ct-btn:hover{color:#e4e4e7;}
html[data-theme="dark"] .uq-coupon-toggle .uq-ct-btn.active{
  background:rgba(249,115,22,.18); color:#fdba74; box-shadow:none;
}

/* ═══ 2026-09-29 深色第二批：首页徽标 / 套餐卡角标 ═══
   对**全部 21 个面板**跑了一次暗色低对比全扫（verify-output/diag-ink-path.js），
   下面这些是「浅色合格、暗色掉线」的真回归 —— 每条都用
   verify-output/diag-theme-diff.js 量过浅/暗两侧的数，不是靠猜。
   回退：删除本块即可。 */

/* ① 首页分区徽标（「管理员」「N 项」）—— 四个色调只写了浅色值。
      暗色下 #6d28d9 压在深底上只有 **2.06:1**（同元素浅色 5.87:1）。
      徽标底是 rgba(…,.14) 半透明色，深色下合成后仍是深底，故换成亮色系即可。 */
html[data-theme="dark"] .home-section[data-tone="blue"]   .home-section-badge{color:#93c5fd;}
html[data-theme="dark"] .home-section[data-tone="orange"] .home-section-badge{color:#fdba74;}
html[data-theme="dark"] .home-section[data-tone="green"]  .home-section-badge{color:#86efac;}
html[data-theme="dark"] .home-section[data-tone="purple"] .home-section-badge{color:#c4b5fd;}

/* ② 套餐卡右上角标「推荐」/ 右下勾选「✓」——
      pkg-calc.css 里那条 `.package-card span{color:#cbd5e1!important}`（权重 1,2,2）高过
      `.package-card-badge{color:#ea580c}`（1,1,0），把角标字色一起改成了浅灰：
        角标 = #cbd5e1 压 #ffedd5（浅桃底）→ **1.3:1**
        勾选 = #cbd5e1 压 #f97316（橙底）  → **1.89:1**
      这里恢复它们各自的设计色（正好等于已登记的例外：橙字压浅桃 3.11、白字压橙 2.8）。
      ⚠️ `.package-card.package-card` 重复类名是**故意**的 —— 把权重顶到 (1,4,1) 才压得过
         pkg-calc.css 的 (1,2,2)；第二条镜像 pkg-calc.css 里
         `.target-package-panel .package-card.active span` 的 (1,4,2)。别当成笔误删掉。 */
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .package-card.package-card .package-card-badge,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .target-package-panel .package-card.active .package-card-badge{color:#ea580c!important;}
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .package-card.package-card .package-card-check,
html[data-theme="dark"] :is(#panel-upgrade,#panel-combo) .target-package-panel .package-card.active .package-card-check{color:#fff!important;}

/* 顺带：勾选「✓」在**浅色**下同样只有 **1.7:1** —— 同一条宽规则把它从设计稿的 #fff 改成了
   #64748b，而它坐在 #f97316 实心橙圆上。这里一并恢复（白字压橙 = 已登记的 2.8 例外）。
   ⚠️ 这是本批**唯一**影响浅色的改动；角标「推荐」浅色下是 4.15:1（可读），故保持原样不动。 */
html:not([data-theme="dark"]) :is(#panel-upgrade,#panel-combo) .package-card.package-card .package-card-check,
html:not([data-theme="dark"]) :is(#panel-upgrade,#panel-combo) .target-package-panel .package-card.active .package-card-check{color:#fff!important;}

/* ═══════════════ 2026-10-08 用户指令：报价计算器 UI 优化（布局 / 层级 / 对比） ═══════════════
   三项诉求：
     ① 报价表「补差 / 免单 / 联报」三区：按第一眼视线落点重排优先级与间距、弱化次要信息、
        突出高频操作区，并整体放大产品选择板块（名称 / 价格 / 选中态更醒目更好点）；
     ② 点「计算器」入口默认停在「首单计算」（纯 JS，见 app-new.js showPanel 的 calc 分支）；
     ③ 点「报价」后的结果界面背景过白、层次不清 → 换带对比度的分区底 + 卡片式分区，
        强化「金额 / 明细 / 合计」层级。
   ⚠️ 只动 **布局 / 层级 / 视觉对比**：业务口径、话术文案、计算逻辑一行未改。
   ⚠️ 类名与 DOM 结构（.ud-split / .jp-split / .upd-prod / #up-result）全部保留 —— 回归脚本依赖。 */

/* ── ① 选中态夺回 ──────────────────────────────────────────────────────────
   liquid-glass.css 第 266 行用 `html body :is(#panel-quote,#panel-calc,#panel-ranking)
   :is(.uq-pcard,.upd-prod){border-color:var(--lg-edge)!important}`（特异性 1,1,2）把
   .upd-prod 的边框强行刷成玻璃白（--lg-edge = rgba(255,255,255,.95)），
   于是 `.upd-prod.active{border-color:#ea580c}` 失效 —— 选中态只剩浅橙底，辨识度低。
   这里用更高特异性（1,3,2）+ !important 夺回橙色描边与光晕，三处（补差/免单/联报）统一。 */
html body #panel-quote :is(.ud-left,.jp-left) .upd-prod:hover{
  border-color:#fdba74 !important;
  box-shadow:0 0 0 1px rgba(253,186,116,.55),0 10px 22px -16px rgba(234,88,12,.5) !important;
}
html body #panel-quote :is(.ud-left,.jp-left) .upd-prod.active{
  border-color:#ea580c !important;
  background:linear-gradient(160deg,#fff7ed 0%,#ffffff 76%) !important;
  box-shadow:0 0 0 3px rgba(234,88,12,.15),0 14px 28px -18px rgba(234,88,12,.85) !important;
}
html body #panel-quote :is(.ud-left,.jp-left) .upd-prod.active .upd-prod-name{color:#c2410c !important;font-weight:900 !important;}
/* 金额芯片选中态同步加重（首单金额 = 第二高频操作） */
html body #panel-quote :is(.ud-left,.jp-left) .upd-amt.active{
  border-color:#ea580c !important;
  background:#fff7ed !important;
  box-shadow:0 0 0 3px rgba(234,88,12,.13),0 10px 20px -16px rgba(234,88,12,.8) !important;
}
/* 暗色：描边换亮橙，底色回到深色渐变（保留玻璃投影 token） */
html[data-theme="dark"] body #panel-quote :is(.ud-left,.jp-left) .upd-prod.active{
  border-color:#fb923c !important;
  background:linear-gradient(160deg,rgba(234,88,12,.22) 0%,rgba(17,24,39,.82) 76%) !important;
  box-shadow:0 0 0 3px rgba(251,146,60,.2),var(--lg-lift) !important;
}
html[data-theme="dark"] body #panel-quote :is(.ud-left,.jp-left) .upd-prod.active .upd-prod-name{color:#fdba74 !important;}
html[data-theme="dark"] body #panel-quote :is(.ud-left,.jp-left) .upd-amt.active{border-color:#fb923c !important;background:rgba(234,88,12,.18) !important;}

/* ── ③ 结果区：带对比度的分区底（白面板里不再「一片白」） ────────────────────
   pkg-calc.css 把 .result 的底色 !important 写成了 rgba(255,255,255,.82)（浅色）/
   rgba(17,24,39,.78)（深色）—— 在白面板上等于没有分区，用户反馈「背景过白、层次不清」。
   这里覆盖成浅蓝分区底（与结果区既有的蓝色金额渐变同色系，不引入新配色）。 */
html body :is(#panel-upgrade,#panel-combo,#panel-joint) .result.show{
  background:linear-gradient(162deg,#eaf1fe 0%,#e3ecfb 52%,#edf3fe 100%) !important;
  border:1px solid #cfdff7 !important;
  border-radius:20px !important;
  padding:20px !important;
  box-shadow:0 26px 60px -42px rgba(15,23,42,.55),inset 0 1px 0 #fff !important;
}
html[data-theme="dark"] body :is(#panel-upgrade,#panel-combo,#panel-joint) .result.show{
  background:linear-gradient(162deg,#111c31 0%,#0d1626 52%,#121e35 100%) !important;
  border-color:rgba(96,165,250,.26) !important;
  box-shadow:0 26px 60px -42px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Hero：半透明玻璃 → 实心白卡（浅蓝底上边界清晰），左侧竖条强调「本次实付 = 合计」 */
#up-result .seg-hero{
  gap:18px 30px;padding:20px 24px;border-radius:18px;
  background:#fff;border:1px solid #d9e5f8;
  box-shadow:0 16px 34px -28px rgba(15,23,42,.6),inset 0 1px 0 #fff;
}
#up-result .seg-hero-main{position:relative;padding-left:16px;gap:4px;}
#up-result .seg-hero-main::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:5px;border-radius:999px;
  background:linear-gradient(180deg,#38bdf8,#1d4ed8);
}
#up-result .seg-hero-label{font-size:12.5px;font-weight:800;color:#475569;}
#up-result .seg-hero-num{font-size:clamp(50px,4.8vw,76px);}
/* 明细算式：把「目标套餐 − 首单已付 = 合计」一眼写清（明细层） */
#up-result .seg-hero-formula{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:6px;
  padding:6px 12px;border-radius:999px;
  background:#eef4ff;border:1px solid #d7e4fb;color:#1e3a8a;
  font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;
}
#up-result .seg-hero-formula i{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.16em;color:#60a5fa;}
#up-result .seg-hero-formula b{font-weight:900;color:#1d4ed8;}
/* 明细表：右侧内嵌白卡，标签靠左 / 数值靠右（表格化 = 层次清楚） */
#up-result .seg-hero-side{
  display:flex;flex-direction:column;gap:0;margin-left:auto;min-width:300px;
  padding:10px 16px;border:1px solid #e1eafa;border-radius:14px;background:#f8fbff;
}
#up-result .seg-hero-kv{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 0;}
#up-result .seg-hero-kv + .seg-hero-kv{border-top:1px dashed #dbe6f8;}
#up-result .seg-hero-kv span{display:block;font-size:11.5px;color:#64748b;letter-spacing:.04em;}
#up-result .seg-hero-kv b{font-size:15px;font-weight:800;color:#0f172a;font-variant-numeric:tabular-nums;}
#up-result .seg-hero-spark{width:118px;height:32px;opacity:.7;margin-top:6px;}
/* 段卡：半透明玻璃 → 实心白卡（浅蓝分区底上形成清晰「卡片式分区」） */
#up-result .seg-grid{gap:16px;margin-top:14px;}
#up-result .seg-card{
  background:#fff;border:1px solid #dbe6f8;
  box-shadow:0 14px 30px -26px rgba(15,23,42,.62);
}
#up-result .seg-card:hover{
  transform:translateY(-2px);border-radius:18px;
  background:#fff;border-color:#bfd6f5;
  box-shadow:0 20px 40px -28px rgba(15,23,42,.6);
}
#up-result .seg-card-divider{background:#fff;border-color:#cfdff7;}
#up-result .script,#up-result .img-block{background:#fff;border:1px solid #dbe6f8;box-shadow:0 14px 30px -26px rgba(15,23,42,.62);}
#up-result .script-head{margin-bottom:12px;}
#up-result .script-head b{font-size:15px;}
#up-result .seg-card-num{background:#e0eaff;border-color:#a9c8fb;color:#1d4ed8;}
/* 深色：hero/段卡换深面，文字保持浅色可读 */
html[data-theme="dark"] #up-result .seg-hero,
html[data-theme="dark"] #up-result .seg-card,
html[data-theme="dark"] #up-result .script,
html[data-theme="dark"] #up-result .img-block{
  background:rgba(15,23,42,.66);border-color:rgba(148,163,184,.26);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05);
}
html[data-theme="dark"] #up-result .seg-card:hover{background:rgba(30,41,59,.74);border-color:rgba(96,165,250,.4);}
html[data-theme="dark"] #up-result .seg-hero{background:rgba(15,23,42,.72);}
html[data-theme="dark"] #up-result .seg-hero-side{background:rgba(15,23,42,.5);border-color:rgba(148,163,184,.24);}
html[data-theme="dark"] #up-result .seg-hero-kv + .seg-hero-kv{border-top-color:rgba(148,163,184,.26);}
html[data-theme="dark"] #up-result .seg-hero-kv span{color:#94a3b8;}
html[data-theme="dark"] #up-result .seg-hero-kv b{color:#f1f5f9;}
html[data-theme="dark"] #up-result .seg-hero-label{color:#cbd5e1;}
html[data-theme="dark"] #up-result .seg-hero-formula{background:rgba(30,58,138,.32);border-color:rgba(96,165,250,.4);color:#bfdbfe;}
html[data-theme="dark"] #up-result .seg-hero-formula b{color:#93c5fd;}
html[data-theme="dark"] #up-result .seg-card-num{background:rgba(30,58,138,.4);border-color:rgba(96,165,250,.45);color:#bfdbfe;}

/* ── 移动端 / 窄屏适配（结果区与配置列同步收口） ── */
@media (max-width:768px){
  html body :is(#panel-upgrade,#panel-combo,#panel-joint) .result.show{padding:14px !important;border-radius:16px !important;}
  #up-result .seg-hero{flex-direction:column;align-items:stretch;gap:14px;padding:16px;}
  #up-result .seg-hero-main{padding-left:13px;}
  #up-result .seg-hero-side{min-width:0;width:100%;margin-left:0;}
  #up-result .seg-hero-num{font-size:clamp(42px,13vw,60px);}
  #up-result .script-head b{font-size:14px;}
}

/* ── ①-b 联报左栏密度调整（2026-10-08） ─────────────────────────────────────
   联报左栏要装 9 个主品 + 7 档金额 + 套餐勾选条，纵向本来就吃紧
   （代码注释记载：240px 版已 1066px > 1100 屏的可用高度，故 .jp-left 自带内滚动）。
   产品选择按用户要求放大后，若金额/勾选仍是 2 列，整栏会再长 ~250px、把「套餐配置」压到
   更深处 → 这里把**联报的**金额与勾选芯片收成 3 列，把省下的高度全部让给产品选择板块。
   ⚠️ 补差 / 免单内容少（4~6 个主品），保持 2 列大芯片 —— 更好点，符合「更易于点击」。 */
#qp-jointquote-content .jp-left #jp-amounts,
#qp-jointquote-content .jp-left #jp-picks .upd-amounts{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;}
#qp-jointquote-content .jp-left #jp-amounts .upd-amt,
#qp-jointquote-content .jp-left #jp-picks .upd-amt{padding:8px 6px;}
#qp-jointquote-content .jp-left #jp-amounts .upd-amt b,
#qp-jointquote-content .jp-left #jp-picks .upd-amt b{font-size:13.5px;}
@media (max-width:1180px){
  #qp-jointquote-content .jp-left #jp-amounts,
  #qp-jointquote-content .jp-left #jp-picks .upd-amounts{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));}
}

/* ── 移动端：报价操作区不再并排（2026-10-08） ───────────────────────────────────
   pkg-calc.css 给 `.quote-action-panel` 写死了两列 `minmax(0,1fr) minmax(220px,280px)`，
   在 430px 视口下（左侧栏占 180px → 内容仅 ~250px）必然横向溢出：
   实测 #up-action clientWidth 298 / scrollWidth 402 → 生成的结果区 #up-result 被撑到 370px、
   直接顶出视口，右侧一列数值看着像被裁掉。窄屏收成一列即可（礼品选项在上、按钮在下，
   点击区域反而更大，操作步骤不变）。⚠️ `.actions` 的 grid-column:2 要一并归位，
   否则 1 列模板下会生成隐式第二列、继续溢出。 */
@media (max-width:768px){
  html body #panel-upgrade .quote-action-panel{grid-template-columns:minmax(0,1fr)!important;}
  html body #panel-upgrade .quote-action-panel .advanced,
  html body #panel-upgrade .quote-action-panel .actions{grid-column:1!important;}
}

/* 移动端：段卡网格不能再用 minmax(340px,1fr)（430 屏内容仅 ~264px → 每卡 340 会横向溢出） */
@media (max-width:768px){
  #up-result .seg-grid{grid-template-columns:minmax(0,1fr);}
}