/* ==========================================================================
   v3.11.0 前端全面升级层  fe-upgrade.css
   加载顺序：app.css → fe-upgrade.css（本文件覆盖前者同名规则）
   设计原则：
     ① 不动业务逻辑，不改动 app.js 的渲染结构
     ② 只用样式层驱动，可随时删掉本文件一键回退
     ③ 内联样式（app.js 里 5606 处）通过属性选择器定向覆盖，不用 !important 横扫
   ========================================================================== */

/* ==========================================================================
   ① 设计 token 补全（app.css 的 :root 只定义了基础色，这里补全体系）
   ========================================================================== */
:root {
  /* —— 主色阶（在 app.css 单色基础上补全 50~900，供浅色/深色各取所需） —— */
  --ti-primary-50:#eff6ff; --ti-primary-100:#dbeafe; --ti-primary-200:#bfdbfe;
  --ti-primary-300:#93c5fd; --ti-primary-400:#60a5fa; --ti-primary-500:#1989fa;
  --ti-primary-600:#096dd9; --ti-primary-700:#1d4ed8; --ti-primary-800:#1e40af;
  /* 语义色：success / warning / danger / info 的浅底与深字 */
  --ti-success-bg:#e8f7ee; --ti-success-text:#0a8a4a;
  --ti-warning-bg:#fff4e5; --ti-warning-text:#b25e00;
  --ti-danger-bg:#ffeceb;  --ti-danger-text:#c93025;
  --ti-info-bg:#e3f2fd;    --ti-info-text:#0b5ec7;

  /* —— 表面（surface）层级：深色模式只需换这一组 —— */
  --ti-bg-page:#f5f6fa;        /* 页面底 */
  --ti-bg-elevated:#ffffff;    /* 卡片/弹窗/栏 */
  --ti-bg-sunken:#f0f2f5;      /* 内嵌凹槽（表头、代码块） */
  --ti-bg-hover:#f5f7fa;       /* 悬停 */
  --ti-bg-mask:rgba(0,0,0,.5);

  /* —— 文本层级 —— */
  --ti-text-1:#1f2d3d; --ti-text-2:#333333; --ti-text-3:#666666;
  --ti-text-4:#999999; --ti-text-disabled:#bbbbbb; --ti-text-inverse:#ffffff;

  /* —— 描边 —— */
  --ti-border:#dddddd; --ti-border-light:#eeeeee; --ti-border-strong:#c8ced6;

  /* —— 圆角（4 级，收敛 app.css 里 6/8/10/12/14/16/18/20 的随意取值） —— */
  --ti-radius-xs:4px; --ti-radius-sm:6px; --ti-radius:8px;
  --ti-radius-lg:12px; --ti-radius-xl:16px; --ti-radius-pill:999px;

  /* —— 阴影（3 级 elevation，替代散落的 rgba 硬编码） —— */
  --ti-shadow-1:0 1px 3px rgba(16,24,40,.06), 0 1px 2px rgba(16,24,40,.04);
  --ti-shadow-2:0 4px 12px rgba(16,24,40,.08);
  --ti-shadow-3:0 12px 32px rgba(16,24,40,.14);
  --ti-shadow-focus:0 0 0 3px rgba(25,137,250,.16);

  /* —— 间距（4px 基准） —— */
  --ti-space-1:4px; --ti-space-2:8px; --ti-space-3:12px;
  --ti-space-4:16px; --ti-space-5:24px; --ti-space-6:32px;

  /* —— 动效 —— */
  --ti-dur-fast:.15s; --ti-dur:.2s; --ti-dur-slow:.32s;
  --ti-ease:cubic-bezier(.4,0,.2,1);

  /* —— 层级（统一 z-index，避免散落的 50/60/61/200/1000/99999） —— */
  --ti-z-sticky:50; --ti-z-float:60; --ti-z-drawer:1000;
  --ti-z-modal:9998; --ti-z-toast:10001;

  /* —— 视口高度：解决移动端地址栏收放导致 100vh 跳动 —— */
  --app-100vh:100vh;
  /* —— 安全区 —— */
  --ti-safe-b:env(safe-area-inset-bottom, 0px);
  --ti-safe-t:env(safe-area-inset-top, 0px);

  color-scheme: light;
}
@supports (height: 100dvh) { :root { --app-100vh:100dvh; } }

/* ==========================================================================
   ② 深色模式（默认跟随系统；data-theme 可强制；localStorage 持久化）
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ti-bg-page:#0f172a; --ti-bg-elevated:#182234; --ti-bg-sunken:#111c2e;
    --ti-bg-hover:#1e2a3d; --ti-bg-mask:rgba(0,0,0,.66);
    --ti-text-1:#e8edf5; --ti-text-2:#d5dcea; --ti-text-3:#a3b0c4;
    --ti-text-4:#7c8ba3; --ti-text-disabled:#5a6779; --ti-text-inverse:#0f172a;
    --ti-border:#2c3a4f; --ti-border-light:#243149; --ti-border-strong:#3d4d66;
    --ti-primary:#4da3ff; --ti-primary-dark:#7cc0ff; --ti-primary-light:#2b8cf5;
    --ti-primary-deep:#6ab4ff; --ti-primary-alt:#5aa9ff;
    --ti-white:#182234;                     /* 老代码拿 --ti-white 当"表面色"用 */
    --ti-grad-primary:linear-gradient(135deg,#3d8ef7,#1d6fd8);
    --ti-grad-primary-bright:linear-gradient(135deg,#5aa9ff,#3d8ef7);
    --ti-grad-hero:linear-gradient(135deg,#0b3f8f,#1565d8);
    --ti-grad-hero2:linear-gradient(135deg,#1565d8 0%,#0b3f8f 100%);
    --ti-shadow-1:0 1px 3px rgba(0,0,0,.4);
    --ti-shadow-2:0 4px 14px rgba(0,0,0,.45);
    --ti-shadow-3:0 14px 36px rgba(0,0,0,.55);
    --ti-shadow-focus:0 0 0 3px rgba(77,163,255,.24);
    --ti-success-bg:#123024; --ti-success-text:#4ade80;
    --ti-warning-bg:#33240d; --ti-warning-text:#fbbf24;
    --ti-danger-bg:#3a1512;  --ti-danger-text:#f87171;
    --ti-info-bg:#12253d;    --ti-info-text:#7cc0ff;
    --ti-info-bg2:#12253d;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ti-bg-page:#0f172a; --ti-bg-elevated:#182234; --ti-bg-sunken:#111c2e;
  --ti-bg-hover:#1e2a3d; --ti-bg-mask:rgba(0,0,0,.66);
  --ti-text-1:#e8edf5; --ti-text-2:#d5dcea; --ti-text-3:#a3b0c4;
  --ti-text-4:#7c8ba3; --ti-text-disabled:#5a6779; --ti-text-inverse:#0f172a;
  --ti-border:#2c3a4f; --ti-border-light:#243149; --ti-border-strong:#3d4d66;
  --ti-primary:#4da3ff; --ti-primary-dark:#7cc0ff; --ti-primary-light:#2b8cf5;
  --ti-primary-deep:#6ab4ff; --ti-primary-alt:#5aa9ff;
  --ti-white:#182234;
  --ti-grad-primary:linear-gradient(135deg,#3d8ef7,#1d6fd8);
  --ti-grad-primary-bright:linear-gradient(135deg,#5aa9ff,#3d8ef7);
  --ti-grad-hero:linear-gradient(135deg,#0b3f8f,#1565d8);
  --ti-grad-hero2:linear-gradient(135deg,#1565d8 0%,#0b3f8f 100%);
  --ti-shadow-1:0 1px 3px rgba(0,0,0,.4);
  --ti-shadow-2:0 4px 14px rgba(0,0,0,.45);
  --ti-shadow-3:0 14px 36px rgba(0,0,0,.55);
  --ti-shadow-focus:0 0 0 3px rgba(77,163,255,.24);
  --ti-success-bg:#123024; --ti-success-text:#4ade80;
  --ti-warning-bg:#33240d; --ti-warning-text:#fbbf24;
  --ti-danger-bg:#3a1512;  --ti-danger-text:#f87171;
  --ti-info-bg:#12253d;    --ti-info-text:#7cc0ff;
}

/* —— 深色模式下把"写死颜色"的内联样式定向拉回 token（仅命中这几种常见写法） —— */
:root[data-theme="dark"] [style*="background:#fff"],
:root[data-theme="dark"] [style*="background: #fff"],
:root[data-theme="dark"] [style*="background:#ffffff"] { background: var(--ti-bg-elevated) !important; }
:root[data-theme="dark"] [style*="background:#f5f"],
:root[data-theme="dark"] [style*="background:#f0f"] { background: var(--ti-bg-sunken) !important; }
:root[data-theme="dark"] [style*="color:#333"],
:root[data-theme="dark"] [style*="color:#666"] { color: var(--ti-text-2) !important; }
:root[data-theme="dark"] [style*="color:#999"] { color: var(--ti-text-4) !important; }
:root[data-theme="dark"] [style*="border:1px solid #ddd"],
:root[data-theme="dark"] [style*="border:1px solid #eee"] { border-color: var(--ti-border) !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [style*="background:#fff"],
  :root:not([data-theme="light"]) [style*="background: #fff"],
  :root:not([data-theme="light"]) [style*="background:#ffffff"] { background: var(--ti-bg-elevated) !important; }
  :root:not([data-theme="light"]) [style*="background:#f5f"],
  :root:not([data-theme="light"]) [style*="background:#f0f"] { background: var(--ti-bg-sunken) !important; }
  :root:not([data-theme="light"]) [style*="color:#333"],
  :root:not([data-theme="light"]) [style*="color:#666"] { color: var(--ti-text-2) !important; }
  :root:not([data-theme="light"]) [style*="color:#999"] { color: var(--ti-text-4) !important; }
  :root:not([data-theme="light"]) [style*="border:1px solid #ddd"],
  :root:not([data-theme="light"]) [style*="border:1px solid #eee"] { border-color: var(--ti-border) !important; }
}

/* ==========================================================================
   ③ 基础层（reset 补全 / 焦点环 / 滚动条 / 动效偏好）
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body {
  margin:0;
  background: var(--ti-bg-page);
  color: var(--ti-text-2);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
               'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition: background-color var(--ti-dur) var(--ti-ease), color var(--ti-dur) var(--ti-ease);
}
img, svg, video { max-width:100%; }
img { border-style:none; }

/* 键盘焦点环：只在键盘导航时出现，鼠标点击不显示（无障碍 WCAG 2.4.7） */
:where(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"]), [onclick]):focus-visible {
  outline: 2px solid var(--ti-primary);
  outline-offset: 2px;
  border-radius: var(--ti-radius-sm);
}
/* 可点击的 div 补手型（存量大量 <div onclick>） */
[onclick] { cursor: pointer; }

/* 滚动条：细轨 + 圆角，深色模式跟随 */
* { scrollbar-width: thin; scrollbar-color: var(--ti-border-strong) transparent; }
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--ti-border-strong); border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background:var(--ti-text-4); }
::selection { background:var(--ti-primary-100); color:var(--ti-text-1); }

/* 尊重系统「减弱动效」设置（前庭功能障碍友好，WCAG 2.3.3） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   ④ 流式排版（字号随视口平滑过渡，替代固定 px）
   ========================================================================== */
.fe-h1 { font-size:clamp(20px, 1.2vw + 16px, 28px); font-weight:700; line-height:1.3; }
.fe-h2 { font-size:clamp(17px, .9vw + 14px, 22px); font-weight:600; line-height:1.35; }
.fe-h3 { font-size:clamp(15px, .5vw + 13px, 18px); font-weight:600; line-height:1.4; }
.fe-num { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   ⑤ 断点体系
      xs ≤480 手机竖屏 · sm 481-768 大屏手机/竖平板 · md 769-1024 平板/小笔电
      lg 1025-1440 笔电/台式 · xl ≥1441 大屏
   ========================================================================== */

/* —— md 平板：管理端侧栏收窄，内容区不再被挤压 —— */
@media (min-width:769px) and (max-width:1024px) {
  .admin-sidebar { width:168px; }
  .admin-content { margin-left:168px; padding:14px; }
  .admin-menu-item { padding:9px 10px; font-size:13px; margin:2px 6px; }
  .admin-menu-item .menu-icon { margin-right:6px; }
}
/* —— xl 大屏：侧栏加宽、内容居中限宽，避免行长过长 —— */
@media (min-width:1441px) {
  .admin-sidebar { width:224px; }
  .admin-content { margin-left:224px; padding:24px 32px; }
  .admin-content > * { max-width:1600px; }
}

/* —— 统计卡片网格：流式列数，不再硬切 4/3/2 —— */
.grid.grid-cols-4, .grid.grid-cols-3 { gap:12px; }
@media (min-width:769px) {
  .grid.grid-cols-4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .grid.grid-cols-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:768px) {
  .grid.grid-cols-4 { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px; }
  .grid.grid-cols-3 { grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:8px; }
}
@media (max-width:400px) {
  /* 超窄屏（iPhone SE 等）单列更可读 */
  .grid.grid-cols-4 { grid-template-columns:repeat(1, minmax(0,1fr)) !important; }
}

/* ==========================================================================
   ⑥ PC 端（≥1024）客户端/师傅端：底部 tab-bar → 顶部胶囊横向导航 + 内容居中
      由 fe-upgrade.js 给 #app 打上 .fe-pc-shell 标记后生效（不依赖 :has()）
   ========================================================================== */
@media (min-width:1024px) {
  #app.fe-pc-shell {
    display:flex; flex-direction:column;
    min-height:100vh; min-height:var(--app-100vh);
    background:var(--ti-bg-page);
  }
  /* 导航：从固定底栏变顶部吸顶导航条 */
  #app.fe-pc-shell > .tab-bar {
    order:-1;
    position:sticky; top:0; bottom:auto; left:auto; right:auto;
    width:100%; max-width:1200px; margin:0 auto;
    background:var(--ti-bg-elevated);
    border-top:none;
    border-bottom:1px solid var(--ti-border-light);
    border-radius:0 0 var(--ti-radius-lg) var(--ti-radius-lg);
    box-shadow:var(--ti-shadow-1);
    padding:0 var(--ti-space-4);
    display:flex; align-items:center; gap:var(--ti-space-1);
    overflow-x:visible; overflow-y:visible;
    z-index:var(--ti-z-sticky);
  }
  #app.fe-pc-shell > .tab-bar .tab-item {
    flex:0 0 auto; min-width:0;
    padding:14px 18px; font-size:14px;
    border-radius:var(--ti-radius);
    transition:background var(--ti-dur-fast) var(--ti-ease), color var(--ti-dur-fast) var(--ti-ease);
    position:relative;
  }
  #app.fe-pc-shell > .tab-bar .tab-item:hover { background:var(--ti-bg-hover); color:var(--ti-primary); }
  #app.fe-pc-shell > .tab-bar .tab-item.active { color:var(--ti-primary); font-weight:600; background:var(--ti-info-bg); }
  #app.fe-pc-shell > .tab-bar .tab-item.active::after {
    content:''; position:absolute; left:14px; right:14px; bottom:6px;
    height:2px; border-radius:2px; background:var(--ti-primary);
  }
  /* 图标在 PC 上转为行内，与文字同一行 */
  #app.fe-pc-shell > .tab-bar .tab-item .icon { display:inline-block; font-size:16px; margin:0 6px 0 0; vertical-align:-2px; }
  /* 内容容器：居中限宽，去掉移动端为底栏预留的 padding-bottom */
  #app.fe-pc-shell > .pb-20 {
    width:100%; max-width:1200px; margin:0 auto;
    padding-bottom:var(--ti-space-5) !important;
    flex:1 1 auto;
  }
  /* 顶栏（logo 行）同步居中限宽 */
  #app.fe-pc-shell > .pb-20 > .bg-white:first-child {
    border-radius:0 0 var(--ti-radius-lg) var(--ti-radius-lg);
    box-shadow:var(--ti-shadow-1);
  }
  /* 悬浮条/操作条在 PC 上跟随容器限宽 */
  .live-strip, .od-actionbar { width:min(92vw, 1200px); }
}
/* —— 平板竖屏（769~1023）：tab-bar 保持底部但居中限宽，不做形态转换 —— */
@media (min-width:769px) and (max-width:1023px) {
  .tab-bar { max-width:720px; margin:0 auto; border-radius:var(--ti-radius-lg) var(--ti-radius-lg) 0 0; box-shadow:0 -2px 12px rgba(16,24,40,.08); }
}

/* ==========================================================================
   ⑦ 移动端安全区与视口高度（全面补齐，原先仅 7 处）
   ========================================================================== */
@media (max-width:768px) {
  .tab-bar { padding-bottom:calc(var(--ti-space-1) + var(--ti-safe-b)); }
  .mall-tabbar { padding-bottom:calc(6px + var(--ti-safe-b)); }
  .od-actionbar { bottom:calc(56px + var(--ti-safe-b)); }
  .live-strip { bottom:calc(56px + var(--ti-safe-b)); }
  .part-detail-footer { padding-bottom:calc(8px + var(--ti-safe-b)) !important; }
  /* 页面底部统一留出底栏空间，避免最后一条内容被压住 */
  .pb-20 { padding-bottom:calc(5rem + var(--ti-safe-b)); }
}

/* ==========================================================================
   ⑧ 表格：通用移动端卡片化（data-label 驱动，替代逐列硬编码 ::before）
      fe-upgrade.js 会遍历带 <thead> 的表格自动补齐 data-label
   ========================================================================== */
@media (max-width:768px) {
  table.fe-cards, table.fe-cards tbody, table.fe-cards tr,
  .admin-mobile-body table.fe-cards, .admin-mobile-body table.fe-cards tbody {
    display:block; width:100%;
  }
  table.fe-cards thead { display:none; }
  table.fe-cards tr {
    display:block;
    background:var(--ti-bg-elevated);
    border:1px solid var(--ti-border-light);
    border-radius:var(--ti-radius-lg);
    padding:var(--ti-space-3);
    margin-bottom:var(--ti-space-2);
    box-shadow:var(--ti-shadow-1);
  }
  table.fe-cards td {
    display:flex; align-items:flex-start; gap:var(--ti-space-2);
    padding:4px 0 !important; border:none !important;
    text-align:left !important; white-space:normal !important;
    font-size:13px; overflow-wrap:break-word;
  }
  /* 有 data-label 的单元格才用属性渲染标签；没有的沿用存量硬编码规则，不会被清空 */
  table.fe-cards td[data-label]::before {
    content:attr(data-label);
    flex:0 0 76px; color:var(--ti-text-4); font-size:11px;
    padding-top:2px; font-weight:400;
  }
  table.fe-cards td[data-label] > * { flex:1 1 auto; min-width:0; }
  /* 操作列独占一行 */
  table.fe-cards td:last-child {
    flex-wrap:wrap; gap:6px 10px; margin-top:6px; padding-top:8px !important;
    border-top:1px dashed var(--ti-border-light) !important;
  }
  table.fe-cards td:last-child::before { flex:0 0 76px; }
}

/* ==========================================================================
   ⑨ 组件视觉统一（旧类复用新 token，不动 JS 调用）
   ========================================================================== */

/* —— 卡片 —— */
.card {
  border-radius:var(--ti-radius-xl);
  box-shadow:var(--ti-shadow-1);
  border:1px solid var(--ti-border-light);
  background:var(--ti-bg-elevated);
  transition:box-shadow var(--ti-dur) var(--ti-ease), transform var(--ti-dur) var(--ti-ease);
}
.ti-card { background:var(--ti-bg-elevated); box-shadow:var(--ti-shadow-1); }

/* —— 按钮：旧 .btn-* 与新 .ti-btn* 拉到同一视觉 —— */
.btn, .ti-btn {
  font-family:inherit; font-weight:500;
  border-radius:var(--ti-radius);
  transition:background var(--ti-dur-fast) var(--ti-ease),
             box-shadow var(--ti-dur-fast) var(--ti-ease),
             transform var(--ti-dur-fast) var(--ti-ease),
             opacity var(--ti-dur-fast) var(--ti-ease);
}
.btn:active, .ti-btn:active { transform:translateY(1px); }
.btn-primary { background:var(--ti-grad-primary); box-shadow:var(--ti-shadow-2); }
.btn-primary:hover { box-shadow:var(--ti-shadow-3); }
.btn-plain { background:var(--ti-bg-elevated); color:var(--ti-text-2); border-color:var(--ti-border); }
.btn-plain:hover { border-color:var(--ti-primary); color:var(--ti-primary); background:var(--ti-bg-hover); }
.btn-success { background:var(--ti-success); }
.btn-danger { background:var(--ti-danger); }
/* 禁用态统一 */
.btn[disabled], .ti-btn[disabled], button[disabled] { opacity:.5; cursor:not-allowed; transform:none !important; }

/* —— 输入框 —— */
.input, .ti-input {
  border-radius:var(--ti-radius);
  border:1px solid var(--ti-border);
  background:var(--ti-bg-elevated);
  color:var(--ti-text-2);
  font-family:inherit;
  transition:border-color var(--ti-dur-fast) var(--ti-ease), box-shadow var(--ti-dur-fast) var(--ti-ease);
}
.input:focus, .ti-input:focus { border-color:var(--ti-primary); box-shadow:var(--ti-shadow-focus); outline:none; }
.input::placeholder, .ti-input::placeholder { color:var(--ti-text-disabled); }
select.input, textarea.input { font-family:inherit; }

/* —— 标签 —— */
.tag, .ti-tag { border-radius:var(--ti-radius-sm); font-weight:500; }
.tag-blue, .ti-tag { background:var(--ti-info-bg); color:var(--ti-info-text); }
.tag-green { background:var(--ti-success-bg); color:var(--ti-success-text); }
.tag-orange { background:var(--ti-warning-bg); color:var(--ti-warning-text); }
.tag-red { background:var(--ti-danger-bg); color:var(--ti-danger-text); }
.tag-purple { background:#f3e8ff; color:#7c3aed; }
.tag-gray { background:var(--ti-bg-sunken); color:var(--ti-text-4); }

/* —— 表格（PC 观感升级：表头吸顶、斑马纹弱化、圆角容器） —— */
@media (min-width:769px) {
  .admin-mobile-body table, .admin-content table {
    border-collapse:separate; border-spacing:0;
  }
  .admin-mobile-body thead th, .admin-content table thead th {
    background:var(--ti-bg-sunken);
    color:var(--ti-text-3); font-weight:600; font-size:13px;
    border-bottom:1px solid var(--ti-border);
    position:sticky; top:0; z-index:2;
  }
  .admin-mobile-body tbody tr:hover td, .admin-content table tbody tr:hover td { background:var(--ti-bg-hover); }
  .admin-mobile-body tbody td, .admin-content table tbody td { border-bottom:1px solid var(--ti-border-light); }
}

/* —— 弹窗：PC 上按内容自适应宽度，手机保持全宽底部抽屉手感 —— */
.modal-box {
  border-radius:var(--ti-radius-xl);
  box-shadow:var(--ti-shadow-3);
  background:var(--ti-bg-elevated);
  max-height:86vh; max-height:calc(var(--app-100vh) - 8vh);
}
@media (min-width:769px) { .modal-box { max-width:520px; } }
@media (max-width:768px) {
  .modal-box { width:94%; border-radius:var(--ti-radius-xl); }
  .modal-mask { align-items:flex-end; }
  .modal-box { max-height:88vh; max-height:calc(var(--app-100vh) - 12vh); }
}
.ti-modal-panel { background:var(--ti-bg-elevated); }

/* —— toast / 提示 —— */
.toast, .ti-toast {
  background:rgba(16,24,40,.88);
  border-radius:var(--ti-radius-lg);
  box-shadow:var(--ti-shadow-3);
  font-size:14px; max-width:80vw;
}

/* —— 管理端：侧栏与内容区在深色模式下不割裂 —— */
:root[data-theme="dark"] .admin-sidebar,
:root[data-theme="dark"] .admin-mobile-header,
:root[data-theme="dark"] .admin-mobile-menu {
  background:linear-gradient(180deg,#0b1424 0%,#070f1c 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .admin-sidebar,
  :root:not([data-theme="light"]) .admin-mobile-header,
  :root:not([data-theme="light"]) .admin-mobile-menu {
    background:linear-gradient(180deg,#0b1424 0%,#070f1c 100%);
  }
}
.admin-content { background:var(--ti-bg-page); min-height:100vh; min-height:var(--app-100vh); }

/* ==========================================================================
   ⑩ 外观设置浮标（由 fe-upgrade.js 注入，避开 toast 与底栏）
   ========================================================================== */
.fe-theme-fab {
  position:fixed; right:14px;
  bottom:calc(72px + var(--ti-safe-b));
  z-index:9990;
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--ti-border-light);
  background:var(--ti-bg-elevated);
  box-shadow:var(--ti-shadow-2);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; cursor:pointer; user-select:none;
  transition:transform var(--ti-dur) var(--ti-ease), box-shadow var(--ti-dur) var(--ti-ease);
}
.fe-theme-fab:hover { transform:scale(1.06); box-shadow:var(--ti-shadow-3); }
.fe-theme-fab:active { transform:scale(.94); }
@media (min-width:1024px) { .fe-theme-fab { bottom:24px; right:24px; } }

.fe-theme-panel {
  position:fixed; right:14px;
  bottom:calc(120px + var(--ti-safe-b));
  z-index:9991;
  width:236px; padding:var(--ti-space-4);
  border-radius:var(--ti-radius-xl);
  background:var(--ti-bg-elevated);
  border:1px solid var(--ti-border-light);
  box-shadow:var(--ti-shadow-3);
  font-size:13px; color:var(--ti-text-2);
}
@media (min-width:1024px) { .fe-theme-panel { bottom:72px; right:24px; } }
.fe-theme-panel h4 { margin:0 0 10px; font-size:13px; font-weight:600; color:var(--ti-text-1); }
.fe-theme-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.fe-theme-opt {
  flex:1 1 auto; min-width:60px; text-align:center;
  padding:7px 8px; border-radius:var(--ti-radius);
  border:1px solid var(--ti-border); background:var(--ti-bg-elevated);
  color:var(--ti-text-3); cursor:pointer; font-size:12px;
  transition:all var(--ti-dur-fast) var(--ti-ease);
}
.fe-theme-opt:hover { border-color:var(--ti-primary); color:var(--ti-primary); }
.fe-theme-opt.on { background:var(--ti-info-bg); border-color:var(--ti-primary); color:var(--ti-primary); font-weight:600; }
.fe-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.fe-swatch {
  width:26px; height:26px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; box-shadow:var(--ti-shadow-1);
  transition:transform var(--ti-dur-fast) var(--ti-ease);
}
.fe-swatch:hover { transform:scale(1.12); }
.fe-swatch.on { border-color:var(--ti-text-1); transform:scale(1.12); }
.fe-theme-hint { margin-top:10px; font-size:11px; color:var(--ti-text-4); line-height:1.5; }

/* 打印：隐藏浮标与导航 */
@media print {
  .fe-theme-fab, .fe-theme-panel, .tab-bar, .admin-sidebar, .admin-mobile-header { display:none !important; }
}

/* ==================== v3.18.7 商城高级感改版（mallx-） ==================== */
/* ==================== v3.18.8a 京东红主题（对标京东/淘宝的红色主视觉） ==================== */
/* --- Hero 主视觉：京东红渐变 + 金色光斑 + 细网格纹理 --- */
.mallx-hero {
  position: relative;
  background:
    radial-gradient(900px 340px at 88% -20%, rgba(255,205,90,.38), transparent 62%),
    radial-gradient(640px 280px at -6% 115%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg, #b8480c 0%, #e86818 55%, #f7a35c 100%);
}
.mallx-hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.25));
}
.mallx-hero-title { font-size: 32px; font-weight: 800; letter-spacing: 1px;
  text-shadow: 0 2px 18px rgba(0,0,0,.35); display: flex; align-items: center; gap: 14px; }
.mallx-hero-title img { width: 46px; height: 46px; border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 2px rgba(255,255,255,.18); }
.mallx-hero-btn {
  background: #fff !important;
  color: #c25a0f !important;
  box-shadow: 0 6px 16px rgba(120,10,10,.35); letter-spacing: 2px; }
.mallx-hero-btn:hover { filter: brightness(1.06); }
.mallx-hot-tag { display: inline-block; padding: 3px 12px; border-radius: 20px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  cursor: pointer; transition: all .2s; }
.mallx-hot-tag:hover { background: rgba(255,255,255,.22); }
.mallx-hero-emoji { font-size: 110px !important; opacity: .5 !important;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
/* --- 顶栏毛玻璃 --- */
.mallx-topnav { background: rgba(255,255,255,.86) !important;
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(16,42,83,.06) !important; }
/* --- 商品卡：浮起 + 图片缩放 --- */
.mallx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.mallx-card { background: #fff; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid #eef1f6;
  box-shadow: 0 1px 2px rgba(16,42,83,.04), 0 10px 28px -14px rgba(16,42,83,.12);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.mallx-card:hover { transform: translateY(-6px); border-color: #dde7f4;
  box-shadow: 0 6px 14px rgba(16,42,83,.07), 0 24px 48px -16px rgba(16,42,83,.24); }
.mallx-img { height: 158px; background: linear-gradient(160deg, #f8fafd, #eef4fb);
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.mallx-img > img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mallx-card:hover .mallx-img > img { transform: scale(1.06); }
.mallx-badge { position: absolute; top: 10px; font-size: 10px; padding: 3px 10px;
  border-radius: 20px; color: #fff; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.mallx-price { font-size: 20px; font-weight: 800; color: #e86818; font-family: 'DIN Alternate', 'Bahnschrift', sans-serif; }
/* --- 分类侧栏：京东红胶囊高亮 --- */
#mall-category-list > div { border-left: 3px solid transparent !important;
  transition: all .18s ease; border-radius: 0 10px 10px 0; }
#mall-category-list > div:hover { background: #fff5ec; color: #c25a0f; }
#mall-category-list > div.cat-active { background: linear-gradient(135deg, #ffefef, #ffe3e3) !important;
  color: #c25a0f !important; border-left-color: #e86818 !important; font-weight: bold; }
/* --- 右侧 VIP 卡 / 热线卡：京东会员红 --- */
.mallx-vip { background: linear-gradient(150deg, #8a3d06 0%, #c2530f 60%, #e86818 100%);
  border-radius: 16px; color: #fff; position: relative; overflow: hidden; }
.mallx-vip::after { content: ''; position: absolute; right: -34px; top: -34px;
  width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.1); }
.mallx-hotline { background: linear-gradient(135deg, #a8420a, #e86818) !important;
  border-radius: 16px !important; box-shadow: 0 8px 22px -8px rgba(165,15,20,.5) !important; }
/* --- 快捷入口图标放大 --- */
.mallx-quick .ti-qicon { width: 46px; height: 46px; font-size: 22px; border-radius: 14px; margin: 0 auto 8px; }
.mallx-quick > div { border-radius: 14px !important; }
.mallx-card .mallx-share { opacity: 0; }
.mallx-card:hover .mallx-share { opacity: .65; }

/* ==================== v3.18.8 商城京东化 + 我的订单改版 ==================== */
/* 标题两行截断 */
.p2line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* 左侧分类栏吸顶（页面下滚时分类不丢失） */
.mall-aside-cats { position: sticky; top: 76px; }
/* 商品卡「加购」按钮（京东红） */
.mallx-buy { padding: 5px 12px; border-radius: 16px; border: 1px solid #e86818;
  background: #fff5ec; color: #e86818; font-size: 12px; font-weight: bold;
  cursor: pointer; transition: all .2s; white-space: nowrap; }
.mallx-buy:hover { background: #e86818; color: #fff; border-color: #e86818; }
/* --- 我的订单（京东式） --- */
.po-tabs { display: flex; gap: 4px; background: #fff; border-radius: 12px; padding: 6px;
  margin-bottom: 12px; overflow-x: auto; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.po-tab { flex: 1; min-width: 72px; padding: 9px 6px; border: none; border-radius: 8px;
  cursor: pointer; font-size: 13px; white-space: nowrap; background: transparent;
  color: var(--ti-text-2); transition: all .2s; }
.po-tab:hover { background: #fff5ec; }
.po-tab.on { background: linear-gradient(135deg, #f2913c, #e86818); color: #fff; font-weight: bold; }
.po-tab .n { font-size: 11px; color: #f5222d; font-weight: bold; }
.po-tab.on .n { color: #ffe1a8; }
.po-card { background: #fff; border-radius: 12px; margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06); overflow: hidden; cursor: pointer;
  border: 1px solid transparent; transition: box-shadow .2s, transform .2s; }
.po-card:hover { box-shadow: 0 8px 22px rgba(232,104,24,.14); transform: translateY(-2px); }
.po-item-img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover;
  flex-shrink: 0; background: #f5f6f8; }
.po-btn { padding: 7px 16px; background: #fff; border: 1px solid #dcdfe6;
  color: var(--ti-text-3); border-radius: 18px; cursor: pointer; font-size: 12px;
  transition: all .2s; }
.po-btn:hover { border-color: #e86818; color: #e86818; }
.po-btn:disabled { opacity: .4; cursor: not-allowed; }
.po-btn-primary { background: linear-gradient(135deg, #f2913c, #e86818); color: #fff;
  border: none; font-weight: bold; }
.po-btn-primary:hover { filter: brightness(1.08); border-color: transparent; }

/* ==================== v3.18.11 首页楼层（轮播 / 必抢 / 分类楼层） ==================== */
.mallx-banner:hover { box-shadow: 0 10px 26px rgba(184,72,12,.25); }
#mall-banner-slide > div { transition: transform .5s ease; }
#mall-floors > div > div:last-child { scrollbar-width: thin; scrollbar-color: #e8d5bd transparent; }
#mall-floors > div > div:last-child::-webkit-scrollbar { height: 6px; }
#mall-floors > div > div:last-child::-webkit-scrollbar-thumb { background: #e8d5bd; border-radius: 6px; }
#mall-backtop:hover { background: #fff5ec; border-color: #e86818; }

/* ==================== v3.18.17 商城优化（参考联想商城：列表筛选 / 详情结构 / 购物车） ==================== */
/* --- 排序筛选条（PC 胶囊，手机横滑） --- */
#mall-filter-bar { gap: 8px; }
.mf-sort, .mf-stock { font-size: 12px; padding: 5px 12px; border-radius: 16px; cursor: pointer;
  border: 1px solid #eef1f6; background: var(--ti-white); color: var(--ti-text-3);
  white-space: nowrap; transition: all .18s; user-select: none; }
.mf-sort:hover, .mf-stock:hover { border-color: #f2913c; color: #c25a0f; }
.mf-sort.on { background: linear-gradient(135deg, #f2913c, #e86818); color: #fff;
  border-color: transparent; font-weight: bold; }
.mf-stock.on { background: #fff5ec; color: #c25a0f; border-color: #e86818; font-weight: bold; }
/* --- 详情页返回按钮（仅手机显示，PC 用顶部导航） --- */
.pd-back { display: none; }
@media (max-width: 768px) {
  /* 手机端隐藏 PC 文字导航，改由返回按钮承接 */
  .part-detail-topnav { display: none !important; }
  .part-detail-hero { padding: 12px 14px !important; }
  .part-detail-hero-search { display: none !important; }
  .pd-back { display: flex !important; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0; border: none; border-radius: 50%;
    background: rgba(255,255,255,.2); color: #fff; font-size: 17px; cursor: pointer; }
  /* 筛选条横滑，不挤压 */
  #mall-filter-bar { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto;
    padding: 10px !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #mall-filter-bar::-webkit-scrollbar { display: none; }
  #mall-filter-bar > span { flex: 0 0 auto !important; }
  /* 商品卡：手机上分享/加购常显（hover 在触屏无效）
     v3.18.75：分享是「转发到微信/QQ」的正式入口，.45 太淡没人找得到，提到 .8 */
  .mallx-card .mallx-share { opacity: .8 !important; }
  .mallx-card:active { transform: scale(.985); }
  #mall-parts-list .mallx-img { height: 124px !important; }
  #mall-parts-list .mallx-buy { padding: 7px 14px !important; font-size: 13px !important; }
  /* 详情页：描述区留白收紧、参数卡单列更宽松 */
  .mall-detail-main { padding: 12px !important; }
  .mall-detail-bigimg { height: 260px !important; }
  .detail-thumb { width: 56px !important; height: 56px !important; }
  /* TabBar 之上留白，避免最后一行卡片被遮住 */
  .mall-tabbar ~ * { margin-bottom: 0; }
}

/* ==========================================================================
   v3.18.75 手机端商城「统一主色 + 降噪」
   背景：v3.18.8a 给商城单独套了一套「京东橙」（#e86818 / #f2913c / #b8480c …），
   而系统主色是科技蓝（--ti-primary），加上库存三色、商家标签、品牌标签各自为政，
   一屏商品卡能出现 5~6 种颜色 —— 就是用户说的「太乱」。
   本层只作用于 ≤768px（手机端 / APK），统一成系统主色 + 语义色两套，并收紧冗余装饰。
   ⚠️ 商城的 JS 里大量颜色是内联 style，必须用 !important 才能盖住；
      本文件在 app.css 之后加载（index.html 注释有说明），同优先级下天然胜出。
   ========================================================================== */
@media (max-width: 768px) {
  /* ① 金刚区：四色渐变 → 同一支主色的四个明暗层次（有节奏，但不再是四套色） */
  .mallx-quick .qi-green,
  .mallx-quick .qi-red,
  .mallx-quick .qi-blue,
  .mallx-quick .qi-orange {
    background: var(--ti-grad-primary) !important;
    box-shadow: 0 4px 12px rgba(25, 137, 250, .18) !important;
  }
  .mallx-quick .qi-green  { background: var(--ti-grad-primary-bright) !important; }
  .mallx-quick .qi-red    { background: var(--ti-grad-hero2) !important; }
  .mallx-quick .qi-blue   { background: var(--ti-grad-hero) !important; }
  .mallx-quick .qi-orange { background: var(--ti-grad-primary-alt) !important; }

  /* ② Hero / 顶栏 / 结算条：橙渐变 → 系统主色渐变（JS 已同步改 var()，这里兜住旧 CSS） */
  .mallx-hero, .part-detail-hero, #mall-sticky-search {
    background: var(--ti-grad-hero2) !important;
  }
  .mallx-hero::before { opacity: .5; }
  .mallx-hero-btn { color: var(--ti-primary) !important; }
  .mallx-hot-row, .mall-hero .mall-hot-row { display: none !important; }
  #mall-sticky-search { box-shadow: 0 2px 10px rgba(25, 137, 250, .18) !important; }

  /* ③ 价格统一走系统「危险/促销」语义红，不再商城专用橙 */
  .mallx-price { color: var(--ti-danger) !important; }

  /* ④ 商品卡：统一圆角/描边/阴影，去掉悬浮位移动画（触屏上没有 hover） */
  #mall-parts-list .mallx-card {
    border-radius: 12px !important;
    border: 1px solid var(--ti-bg-page-2) !important;
    box-shadow: 0 1px 3px rgba(16, 42, 83, .05) !important;
    transition: transform .12s ease !important;
  }
  #mall-parts-list .mallx-card:hover {
    transform: none !important;
    border-color: var(--ti-bg-page-2) !important;
    box-shadow: 0 1px 3px rgba(16, 42, 83, .05) !important;
  }
  #mall-parts-list .mallx-card:hover .mallx-img > img { transform: none !important; }
  /* 卡片里的分隔虚线改实线淡色，减少"草稿感" */
  #mall-parts-list .mallx-card > div > div[style*="dashed"] { border-top-style: solid !important; }

  /* ⑤ 加购按钮：实心主色胶囊（原来是橙描边+橙淡底，和卡片其它元素抢注意力） */
  #mall-parts-list .mallx-buy {
    background: var(--ti-grad-primary) !important;
    color: #fff !important;
    border-color: transparent !important;
    border-radius: 16px !important;
    padding: 6px 13px !important;
    box-shadow: 0 2px 8px rgba(25, 137, 250, .22) !important;
  }

  /* ⑥ 分类胶囊：选中态走信息蓝，且横向滑动时不换行 */
  #mall-category-list { background: transparent !important; }
  #mall-category-list > div {
    border: 1px solid var(--ti-border-light) !important;
    border-radius: 16px !important;
    background: var(--ti-white) !important;
    color: var(--ti-text-3) !important;
  }
  #mall-category-list > div.cat-active {
    background: var(--ti-info-bg) !important;
    color: var(--ti-primary) !important;
    border-color: var(--ti-primary) !important;
    box-shadow: none !important;
  }

  /* ⑦ 排序/筛选条：橙 pill → 主色 pill */
  .mf-sort, .mf-stock { border-color: var(--ti-border-light) !important; color: var(--ti-text-3) !important; background: var(--ti-white) !important; }
  .mf-sort.on { background: var(--ti-grad-primary) !important; color: #fff !important; border-color: transparent !important; }
  .mf-stock.on { background: var(--ti-info-bg) !important; color: var(--ti-primary) !important; border-color: var(--ti-primary) !important; }

  /* ⑧ 首页标题胶囊（🔥 热销推荐）已改 var()，这里补统一圆角 */
  #mall-parts-list, .mall-body .mallx-grid { border-radius: 12px; }

  /* ⑨ 楼层卡片与大促卡：跟随主色，薄阴影 */
  .mallx-vip, .mallx-hotline { background: var(--ti-grad-hero2) !important; box-shadow: 0 6px 18px -8px rgba(25, 137, 250, .45) !important; }

  /* ⑩ 商城底部 TabBar：选中色跟随主色（已是 var，这里统一字号层级） */
  .mall-tabbar .tab { font-size: 10px !important; }
  .mall-tabbar .tab .t-ico { font-size: 19px !important; }
}

/* v3.19.32 浮标避让：页面存在「师傅报价中·等您选择」浮条（.live-strip，顶部约 106px）且
   用户未拖动过浮标时，自动上移到浮条上方（132px），不再压住浮条右端的「查看进度 ›」。
   拖动过的用户走 localStorage fe-fab-pos 自定义位置，不受此规则影响。 */
.fe-theme-fab.fe-fab-lift { bottom: calc(132px + var(--ti-safe-b, 0px)) !important; }