/* ==========================================================================
 * 店铺运营统计 v0.4 · 星空主题
 * 深色 · 青色星光 · 大字体 · 多处动效
 * ========================================================================== */

:root {
  /* 深空背景 */
  --space-0:   #050816;
  --space-1:   #0a0e1f;
  --space-2:   #0f1530;
  --space-3:   #131a3a;

  /* 卡片 */
  --panel:     #0f1530;
  --panel-2:   #131c40;
  --card:      rgba(15, 21, 48, .85);
  --card-hi:   rgba(19, 28, 64, .95);

  /* 边框 */
  --border:    #1c2548;
  --border-2:  #2a3568;
  --border-c:  rgba(79, 195, 247, .3);

  /* 文字 */
  --text:      #e8f0ff;
  --text-2:    #aab5d8;
  --text-3:    #6b7694;
  --text-dim:  #4a5476;

  /* 强调色 */
  --cyan:      #4fc3f7;
  --cyan-2:    #29b6f6;
  --cyan-3:    #0288d1;
  --green:     #66bb6a;
  --green-2:   #43a047;
  --amber:     #ffa726;
  --amber-2:   #ff9800;
  --purple:    #ab47bc;
  --purple-2:  #8e24aa;
  --pink:      #ec407a;
  --red:       #ef5350;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--space-0);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  font-size: 15px;       /* 全局基础字号上调 */
  line-height: 1.6;
  min-height: 100vh;
  color-scheme: dark;     /* native 控件（日期/select）也走深色主题 */
}

/* ===== 星空背景 ===== */
body {
  background:
    radial-gradient(ellipse at 20% 0%,   rgba(79, 195, 247, .12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(40, 53, 104, .4), transparent 60%),
    radial-gradient(ellipse at 50% 50%,  var(--space-1),  var(--space-0));
}

/* 第一层星空：大量小点（CSS 模拟） */
.stars-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-repeat: repeat;
  background-size: 240px 240px;
}
.stars-layer.s1 {
  background-image:
    radial-gradient(1px 1px at 20px 30px,  var(--cyan), transparent),
    radial-gradient(1px 1px at 60px 80px,  #fff,        transparent),
    radial-gradient(1px 1px at 100px 40px, var(--cyan), transparent),
    radial-gradient(1px 1px at 140px 110px,#fff,        transparent),
    radial-gradient(1px 1px at 180px 60px, var(--cyan), transparent),
    radial-gradient(1px 1px at 220px 200px,#fff,        transparent);
  opacity: .8;
  animation: drift 240s linear infinite;
}
.stars-layer.s2 {
  background-image:
    radial-gradient(1.5px 1.5px at 30px 60px,  #fff,        transparent),
    radial-gradient(1px 1px at 90px 130px,    var(--cyan), transparent),
    radial-gradient(1px 1px at 150px 30px,    #fff,        transparent),
    radial-gradient(1.5px 1.5px at 210px 80px,var(--cyan), transparent),
    radial-gradient(1px 1px at 50px 200px,     #fff,        transparent);
  opacity: .5;
  animation: drift 360s linear infinite;
}
/* 大颗星 */
.stars-layer.s3 {
  background-image:
    radial-gradient(2px 2px at 80px 120px,   var(--cyan), transparent),
    radial-gradient(2px 2px at 200px 160px,  #fff,        transparent),
    radial-gradient(2px 2px at 40px 220px,   var(--cyan), transparent);
  opacity: .9;
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes drift  { from { transform: translateY(0); } to { transform: translateY(-240px); } }
@keyframes twinkle { 0%,100% { opacity: .9; } 50% { opacity: .3; } }

/* JS 动态生成的星星 */
.star-js {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: starTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes starTwinkle {
  0%, 100% { opacity: var(--max-op, .9); transform: scale(1); }
  50%      { opacity: var(--min-op, .1); transform: scale(.6); }
}

/* 流星 */
.shooting-star {
  position: fixed; pointer-events: none; z-index: 0;
  width: 2px; height: 2px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 6px 2px rgba(255,255,255,.6);
  animation: shoot var(--shoot-dur, 8s) linear infinite;
  animation-delay: var(--shoot-delay, 0s);
}
.shooting-star::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, #fff, transparent);
  transform: translateY(0.5px);
}
@keyframes shoot {
  0%   { transform: translate(0,0);   opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate(-400px, 300px); opacity: 0; }
}

/* ===== 通用 ===== */
.panel, .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: relative;
  box-shadow: 0 4px 24px -8px rgba(0,0,0,.4);
}
.card {
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.card:hover {
  border-color: var(--border-2);
  box-shadow: 0 8px 32px -8px rgba(79,195,247,.18), 0 0 0 1px rgba(79,195,247,.05);
  transform: translateY(-2px);
}
.card-glow { box-shadow: 0 0 0 1px rgba(79,195,247,.2), 0 8px 32px -8px rgba(79,195,247,.18); }

/* 顶部光带（每个卡片顶部一条青色细线） */
.card-top-line {
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .55;
}

/* ===== 标题（大字号） ===== */
.title-xl {
  font-size: 38px; font-weight: 700; color: #fff; letter-spacing: 4px;
  margin: 0;
  text-shadow: 0 0 24px rgba(79,195,247,.3);
}
.title-lg {
  font-size: 24px; font-weight: 600; color: #fff; letter-spacing: 1px;
  margin: 0;
}
.title-md {
  font-size: 16px; color: var(--text-2); letter-spacing: 1px;
}
.text-dim { color: var(--text-3); }

/* ===== 输入框 ===== */
.input, input.input, select.input {
  background: rgba(5, 8, 22, .6);
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 15px;
  outline: none;
  width: 100%;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.input:hover, .input:focus,
input[type="text"]:hover, input[type="text"]:focus,
input[type="password"]:hover, input[type="password"]:focus,
input[type="date"]:hover, input[type="date"]:focus,
input[type="number"]:hover, input[type="number"]:focus {
  border-color: var(--cyan);
  background: rgba(5, 8, 22, .9);
  box-shadow: 0 0 0 3px rgba(79,195,247,.15), 0 0 12px rgba(79,195,247,.1);
}
.input::placeholder { color: var(--text-dim); }
/* v0.6.2: 登录页输入框使用更淡的 placeholder（默认 text-dim #4a5476 已经偏暗，但用户要求"再淡一点"。这里用 0.55 透明度的灰） */
.input.input-soft::placeholder,
.input-soft::placeholder {
  color: rgba(170, 181, 216, 0.42);
  font-weight: 400;
}
.input.input-soft:focus::placeholder,
.input-soft:focus::placeholder {
  color: rgba(170, 181, 216, 0.28);  /* 聚焦时进一步淡化，避免抢焦 */
}
/* 必填校验失败高亮（红框 + 轻微红光晕） */
.input.field-error,
input[type="text"].field-error,
input[type="date"].field-error,
input[type="number"].field-error {
  border-color: #ff5252 !important;
  box-shadow: 0 0 0 3px rgba(255,82,82,.18), 0 0 12px rgba(255,82,82,.18) !important;
  animation: fieldShake .35s ease;
}
@keyframes fieldShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.input[type="date"], input[type="date"] {
  position: relative;
  z-index: 20;
  min-height: 36px;
}
.input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
  opacity: .8;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* 让整个 input 都响应点击（不局限于右侧小图标） */
.input[type="date"] { position: relative; min-height: 36px; }
.input[type="date"]::-webkit-inner-spin-button,
.input[type="date"]::-webkit-clear-button { display: none; }

input[type="file"] {
  background: rgba(5, 8, 22, .6);
  color: var(--text-2);
  border: 1px dashed var(--border-2);
  border-radius: 6px;
  padding: 8px;
  font-size: 14px;
  width: 100%;
}

/* ===== 按钮（大、发光） ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--cyan);
  color: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 15px; font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 16px -4px rgba(79,195,247,.5), inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .15s, box-shadow .2s, background .2s;
}
.btn:hover  { background: var(--cyan-2); box-shadow: 0 6px 24px -4px rgba(79,195,247,.7), inset 0 1px 0 rgba(255,255,255,.2); transform: translateY(-1px); }
.btn:active { background: var(--cyan-3); transform: translateY(0); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-2);
  box-shadow: none;
}
.btn-ghost:hover { background: rgba(79,195,247,.08); color: var(--cyan); border-color: var(--cyan); }

.btn-cyan   { background: var(--cyan); }
.btn-green  { background: var(--green);  box-shadow: 0 4px 16px -4px rgba(102,187,106,.5); }
.btn-green:hover  { background: var(--green-2); box-shadow: 0 6px 24px -4px rgba(102,187,106,.7); }
.btn-amber  { background: var(--amber);  box-shadow: 0 4px 16px -4px rgba(255,167,38,.5); }
.btn-amber:hover  { background: var(--amber-2); box-shadow: 0 6px 24px -4px rgba(255,167,38,.7); }
.btn-purple { background: var(--purple); box-shadow: 0 4px 16px -4px rgba(171,71,188,.5); }
.btn-purple:hover { background: var(--purple-2); box-shadow: 0 6px 24px -4px rgba(171,71,188,.7); }
.btn-red    { background: var(--red);    box-shadow: 0 4px 16px -4px rgba(239,83,80,.5); }
.btn-red:hover    { background: #d32f2f; box-shadow: 0 6px 24px -4px rgba(239,83,80,.7); }

/* ===== 顶部 / 侧栏 ===== */
.app-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(10, 14, 31, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(79,195,247,.1);
}
.app-aside {
  background: rgba(5, 8, 22, .6);
  border-right: 1px solid var(--border);
  backdrop-filter: blur(8px);
}

.menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px;
  color: var(--text-2);
  border-left: 3px solid transparent;
  text-decoration: none;
  font-size: 17px;            /* 调大：15px → 17px */
  font-weight: 500;
  letter-spacing: 1.2px;
  transition: all .15s;
  border-radius: 0 6px 6px 0;
}
.menu-item .menu-icon-svg {
  width: 22px; height: 22px; flex-shrink: 0;
  color: var(--text-2);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 0 transparent);
  transition: color .2s, filter .2s;
}
.menu-item:hover {
  background: rgba(79,195,247,.05);
  color: var(--text);
  border-left-color: var(--border-2);
}
.menu-item:hover .menu-icon-svg {
  color: var(--cyan);
  filter: drop-shadow(0 0 6px rgba(79,195,247,.55));
}
.menu-item.active {
  background: linear-gradient(90deg, rgba(79,195,247,.18), rgba(79,195,247,.02));
  color: var(--cyan);
  border-left-color: var(--cyan);
  box-shadow: 0 0 12px rgba(79,195,247,.15);
}
.menu-item.active .menu-icon-svg {
  color: var(--cyan);
  filter: drop-shadow(0 0 8px rgba(79,195,247,.7));
}
.menu-section-title {
  padding: 20px 20px 6px;
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 4px;
}

/* ===== 表格 ===== */
/* 整页滚动：去掉 max-height，内部不滚动；数据多时整个页面跟着滚 */
.table-wrap { overflow-x: auto; }
.table-wrap.scroll-x { overflow-x: auto; }
.table-wrap table { width: 100%; }

table.stats {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
table.stats th {
  background: linear-gradient(180deg, rgba(19,28,64,.9), rgba(15,21,48,.9));
  color: var(--cyan);
  padding: 12px 6px;                       /* 调小水平内边距，让列更紧凑 */
  text-align: center;            /* 表头居中 */
  border-bottom: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
  font-weight: 600;
  letter-spacing: 1px;
  position: sticky; top: 0; z-index: 2;
  white-space: nowrap;
}
table.stats th:last-child { border-right: none; }
table.stats td {
  padding: 10px 6px;                        /* 调小水平内边距 */
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);   /* 列分隔线 */
  color: var(--text);
  text-align: center;            /* 表格数据居中 */
  vertical-align: middle;        /* 垂直居中 */
}
table.stats td:last-child { border-right: none; }
/* 备注列：加宽列宽、左对齐，让备注文字能完整阅读 */
table.stats td[data-key="remark"],
table.stats th[data-key="remark"] {
  min-width: 200px;
  padding-left: 14px;
  padding-right: 14px;
  text-align: left;
}
/* v0.5.46: 日期列精度升级到时分秒（YYYY-MM-DD HH:mm:ss = 19 字符），
   加 min-width 让含秒的数字不被折行；white-space:nowrap 防止被压缩 */
table.stats td[data-key="date"],
table.stats th[data-key="date"] {
  min-width: 168px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* 等宽数字，避免 1 与 8 视觉宽度差 */
}
table.stats tbody tr {
  background: rgba(15,21,48,.4);
  transition: background .15s;
}
table.stats tbody tr:nth-child(even) { background: rgba(19,28,64,.4); }
/* v0.5.49: 多 SKU 订单合并显示在首行（`order_no`/`date`/邮费等 rowspan 跨行），
   鼠标悬停时 tr:hover 只亮当前 tr，跨行合并下来的单元格所在 tr 不会变亮，
   视觉上「订单组」的下半部分有阴影、上半部分没阴影看着像断了。
   修法：JS 给同 order_no 的所有 tr 同时加 .row-hover（事件代理 + dataset.orderNo 匹配） */
table.stats tbody tr:hover,
table.stats tbody tr.row-hover { background: rgba(79,195,247,.06); }
table.stats .num { font-variant-numeric: tabular-nums; }   /* 数字等宽，保留居中 */
table.stats .yellow-row { background: rgba(255,167,38,.12) !important; }
/* 合并统计：勾选行高亮 */
table.stats tbody tr.selected-row,
table.stats tbody tr.selected-row.row-hover { background: rgba(79, 195, 247, .12) !important; }
table.stats tbody tr.selected-row:hover { background: rgba(79, 195, 247, .18) !important; }
table.stats .red-row    { background: rgba(239,83,80,.15) !important; }
.editing-cell input {
  width: 100%; border: 1px solid var(--cyan); border-radius: 4px;
  padding: 3px 6px; font-size: 13px; background: rgba(5,8,22,.9); color: var(--text);
}

/* ===== 状态徽章 ===== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  border: 1px solid var(--border-2);
  background: rgba(19,28,64,.6);
  color: var(--text-2);
}
.badge-pending  { background: rgba(255,167,38,.15);  color: var(--amber);  border-color: rgba(255,167,38,.4); }
.badge-approved { background: rgba(102,187,106,.15);  color: var(--green);  border-color: rgba(102,187,106,.4); }
.badge-rejected { background: rgba(239,83,80,.15);    color: var(--red);    border-color: rgba(239,83,80,.4); }
.badge-used     { background: rgba(79,195,247,.15);   color: var(--cyan);   border-color: rgba(79,195,247,.4); }
.badge-expired  { background: rgba(107,118,148,.15);  color: var(--text-3); border-color: var(--border-2); }
.role-admin    { background: rgba(239,83,80,.15);    color: var(--red);    border-color: rgba(239,83,80,.4); }
.role-partner  { background: rgba(255,167,38,.15);   color: var(--amber);  border-color: rgba(255,167,38,.4); }
.role-employee { background: rgba(79,195,247,.15);   color: var(--cyan);   border-color: rgba(79,195,247,.4); }
.role-disabled { background: rgba(107,118,148,.15);  color: var(--text-3); border-color: var(--border-2); }

/* sku 缩略图：hover 不再放大（v0.5.9），仅保留轻量高亮提示 */
.sku-thumb:hover { border-color: var(--cyan); box-shadow: 0 0 8px rgba(79,195,247,.35); }
.sku-thumb { transform: none; }

/* ===== 权限管理：开关式 checkbox ===== */
.perm-switch {
  display: inline-block; position: relative; cursor: pointer;
  width: 38px; height: 22px;
}
.perm-switch input { opacity: 0; width: 0; height: 0; }
.perm-switch span {
  position: absolute; inset: 0;
  background: rgba(107,118,148,.4);
  border-radius: 22px;
  transition: background .18s, box-shadow .18s;
}
.perm-switch span::before {
  content: ''; position: absolute;
  left: 3px; top: 3px;
  width: 16px; height: 16px;
  background: #f5f5f5;
  border-radius: 50%;
  transition: transform .18s, background .18s;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.perm-switch input:checked + span {
  background: linear-gradient(90deg, #4fc3f7, #66bb6a);
  box-shadow: 0 0 8px rgba(79,195,247,.4);
}
.perm-switch input:checked + span::before {
  transform: translateX(16px);
  background: #fff;
}
.perm-switch.dirty input:checked + span {
  background: linear-gradient(90deg, #ffa726, #ff7043);
  box-shadow: 0 0 12px rgba(255,167,38,.5);
}

/* 权限管理：左侧用户列表项 */
.perm-user-item {
  transition: background .12s, border-color .12s;
  color: var(--text);
  text-decoration: none;
}
.perm-user-item:not(.selected):hover {
  background: rgba(79,195,247,.06);
  border-left-color: rgba(79,195,247,.3) !important;
}
.perm-user-item.selected {
  background: linear-gradient(90deg, rgba(79,195,247,.18), rgba(79,195,247,.04));
  border-left-color: var(--cyan) !important;
  color: var(--text);
  box-shadow: 0 0 12px rgba(79,195,247,.15);
}

/* ===== 弹窗 ===== */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(4px);
  z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}

/* 图片灯箱（独立样式，初始隐藏） */
.img-lightbox-bg {
  display: none;                /* 默认隐藏 */
  position: fixed; inset: 0;
  z-index: 60;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.modal-card {
  background: var(--card-hi);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(79,195,247,.1);
  width: 100%; max-width: 720px;
  /* 整页滚动：去掉 max-height 和 overflow，弹窗内容随高度自然撑开 */
  max-height: 96vh;
  backdrop-filter: blur(16px);
}
.modal-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  color: #fff;
  letter-spacing: 2px;
  font-size: 16px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
}
.modal-head::after {
  content: '';
  position: absolute; left: 24px; right: 24px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .5;
}
.modal-body { padding: 16px 20px; }
.modal-foot {
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; justify-content: flex-end;
}

/* ===== Toast =====
   v0.6.60: 从**右上角**改到**靠上居中**。
   原因：右上角那一条是「世界时钟 / 工厂发货时间 / 店铺切换 / 主管理员」的所在地，
   提示弹在那里会把按钮盖住（看不清、也点不到）——用户截图反馈的正是这个。
   而「店铺切换」和提示是**同一动作的两端**（切一次就弹一次），所以严重到"点不了下一次"。

   ⚠⚠ 为什么是 top:92px（顶栏**下方**）而不是顶栏内部（原 top:24px）：
     顶栏是 `justify-content:space-between`，右侧那一组是**右对齐**的，宽度还随内容变
     （实测 1600px 时 493px 宽、left=1000；1200px 时 left 只有 686）。
     也就是说"顶栏中部的空隙"**不是一个固定宽度**，纯 CSS 无法知道它有多宽 ——
     1600px 上居中不挡、1200px 上就会压到时钟（真实浏览器实测抓到的就是这个）。
     唯一与宽度无关的稳做法：**挪出顶栏**。顶栏高 80px（`.app-header` padding 16×2 + logo 48），
     再留 12px 呼吸，即 top:92px —— 既仍然"靠上"，也永远不会碰到顶栏里的任何控件。
   顶栏是 `position:sticky`，所以滚动时提示相对顶栏的位置保持不变。

   ⚠ 居中是靠 left:50% + translateX(-50%) 实现的，所以**入场动画不能再动 translateX**
     （两个 transform 作用在同一元素上会互相覆盖），改为从上方滑入（translateY）。
   ⚠ 容器设成 flex 纵向 + align-items:center 后，「每条提示各自收缩到内容宽度」，
     于是多条提示叠在一起时也是逐条居中的，不会因为最长那条而把短的全部拉宽。
   ⚠ pointer-events 分两层：容器不拦截点击（提示之间的空隙可以点到底下的东西），
     单条提示自身可交互（要能选中/复制错误原因）。
*/
.toast {
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  min-width: 280px;
  /* 不越到屏幕右半边；560px 上限让长文案在中间换行，不会横穿到右侧控件那一列。
     视口 < 632px 时 min-width 会压过它，本项目是桌面端应用（实际视口 ≥1000px），不为这个极端宽度再加复杂度。 */
  max-width: min(560px, calc(50vw - 16px));
}
.toast-item {
  background: var(--card-hi);
  color: var(--text);
  border: 1px solid var(--border-2);
  border-left: 3px solid var(--cyan);
  border-radius: 6px;
  padding: 12px 16px;
  max-width: 100%;
  pointer-events: auto;          /* 见上：容器 none、条目 auto */
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  font-size: 14px;
  animation: toastIn .3s ease-out;
}
@keyframes toastIn {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.toast-item.toast-error   { border-left-color: var(--red); }
.toast-item.toast-success { border-left-color: var(--green); }
.toast-item.toast-warn    { border-left-color: var(--amber); }

/* ===== 滚动条 ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--space-0); }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-3); }

/* ===== 星空风格光标系统 =====
   4 类：默认(火箭) / 链接手形 / 文本 I 形 / 加载等待圆环
   每类都带青色光晕 + 金色星点，与整体星空主题统一
   ========================================================================== */

/* --- 1. 默认：斜着 45° 的火箭（头朝左上，hotspot 对准头部） --- */
html, body {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><g transform='rotate(-135 16 16)'><ellipse cx='16' cy='16' rx='10' ry='3.5' fill='%23e0f7ff' stroke='%234fc3f7' stroke-width='.6'/><circle cx='26' cy='16' r='2.8' fill='%234fc3f7'/><circle cx='26' cy='16' r='1.4' fill='%23fff'/><circle cx='6' cy='16' r='2.6' fill='%230288d1'/><circle cx='19' cy='16' r='1.7' fill='%23fff' opacity='.95'/><circle cx='19' cy='16' r='.85' fill='%234fc3f7'/><path d='M11 12.5 L7.5 9 L11 11 Z' fill='%234fc3f7' opacity='.75'/><path d='M11 19.5 L7.5 23 L11 21 Z' fill='%234fc3f7' opacity='.75'/><path d='M6 13.5 L1.5 16 L6 18.5 Z' fill='%23ffd54f'/><path d='M4 14.8 L0.5 16 L4 17.2 Z' fill='%23ff7043'/></g><circle cx='7' cy='4' r='.9' fill='%23fff' opacity='.95'/><circle cx='4' cy='7' r='.6' fill='%234fc3f7'/><circle cx='10' cy='3' r='.5' fill='%23ffd54f'/></svg>") 9 9, auto;
}

/* --- 2. 链接 / 按钮 / 卡片：精致星空指针手（深蓝主体 + 食指白光 + 手心金色宝石 + 6 颗装饰星） --- */
a, button, .menu-item, .card, .link-cyan, [onclick], [data-page],
input[type="button"], input[type="submit"], input[type="file"], label, summary, details {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'><path d='M15 9 C15 7.5 15.8 6.4 17.2 6.4 C18.6 6.4 19.4 7.5 19.4 9 L19.4 17 L20.4 17 L20.4 13 C20.4 11.5 21.2 10.4 22.6 10.4 C24 10.4 24.8 11.5 24.8 13 L24.8 17 L25.8 17 L25.8 14 C25.8 12.5 26.6 11.4 28 11.4 C29.4 11.4 30.2 12.5 30.2 14 L30.2 22 C30.2 26.4 26.7 30 22.4 30 L17.5 30 C13.5 30 10.6 27 10.6 23 L10.6 19 C10.6 17.5 11.7 16.4 13.2 16.4 C13.6 16.4 14 16.5 14.3 16.7 L15 17.4 L15 9 Z' fill='%230288d1' stroke='%234fc3f7' stroke-width='1.2' stroke-linejoin='round'/><path d='M16 9 L16 17 L18.5 17 L18.5 9 C18.5 8 18 7.4 17.2 7.4 C16.4 7.4 16 8 16 9 Z' fill='%23e0f7ff'/><circle cx='17.2' cy='7' r='1.2' fill='%23fff'/><circle cx='17.2' cy='7' r='.5' fill='%234fc3f7'/><circle cx='22' cy='23' r='2.2' fill='%23ffd54f'/><circle cx='22' cy='23' r='1.2' fill='%23fff'/><path d='M21.4 22.3 L22 21.4 L22.6 22.3 L22 23.2 Z' fill='%23fff' opacity='.8'/><circle cx='30' cy='5' r='1.6' fill='%23ffd54f'/><circle cx='30' cy='5' r='.8' fill='%23fff'/><path d='M28 4 L30 2.5 L30 4.5 L32 5 L30 5.5 L30 7.5 Z' fill='%23ffd54f' opacity='.6'/><circle cx='4' cy='6' r='1.3' fill='%23fff' opacity='.95'/><circle cx='3' cy='4' r='.6' fill='%234fc3f7'/><circle cx='33' cy='30' r='1' fill='%234fc3f7'/><circle cx='31' cy='32' r='.5' fill='%23fff'/><circle cx='4' cy='32' r='.8' fill='%23ff7043'/><circle cx='6' cy='30' r='.4' fill='%23fff'/></svg>") 17 7, pointer;
}

/* --- 3. 文本输入：星空 I 形（hotspot 在 I 形中心） --- */
input:not([type="button"]):not([type="submit"]):not([type="file"]):not([type="checkbox"]):not([type="radio"]),
textarea, [contenteditable="true"], .editable, .num {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='12' y='5' width='8' height='2.6' rx='1.3' fill='%234fc3f7'/><rect x='12' y='24.4' width='8' height='2.6' rx='1.3' fill='%234fc3f7'/><rect x='14.2' y='5' width='3.6' height='22' rx='1.2' fill='%230288d1'/><rect x='14.8' y='5.6' width='2.4' height='20.8' rx='1' fill='%234fc3f7'/><rect x='15.3' y='6' width='1.4' height='20' rx='.7' fill='%23e0f7ff'/><circle cx='6' cy='9' r='1.3' fill='%23ffd54f'/><circle cx='26' cy='23' r='1.1' fill='%23fff' opacity='.9'/><circle cx='7' cy='24' r='.8' fill='%234fc3f7'/><circle cx='25' cy='8' r='.7' fill='%23ff7043'/></svg>") 16 16, text;
}

/* --- 4. 加载等待：星空轨道圆环（hotspot 中心） --- */
body.cursor-busy, body.cursor-busy *,
.cursor-wait, .cursor-wait *,
.waiting, .waiting * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='11' fill='none' stroke='%231c2548' stroke-width='3.2'/><path d='M16 5 A11 11 0 1 1 5.5 20.5' fill='none' stroke='%234fc3f7' stroke-width='3.2' stroke-linecap='round'/><circle cx='16' cy='5' r='2.8' fill='%23ffd54f'/><circle cx='16' cy='5' r='1.3' fill='%23fff'/><circle cx='16' cy='16' r='4' fill='%234fc3f7' opacity='.25'/><circle cx='16' cy='16' r='2.2' fill='%234fc3f7'/><circle cx='16' cy='16' r='.9' fill='%23fff'/><circle cx='28' cy='7' r='1.1' fill='%23fff' opacity='.9'/><circle cx='4' cy='26' r='.9' fill='%234fc3f7'/><circle cx='27' cy='27' r='.7' fill='%23ffd54f'/></svg>") 16 16, progress !important;
}

/* 拖拽/禁用态保持系统语义 */
input:disabled, button:disabled, .btn:disabled { cursor: not-allowed; }

.cursor-star {
  position: fixed;
  width: 4px; height: 4px;
  background: radial-gradient(circle, #fff 0%, rgba(79,195,247,.8) 40%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  box-shadow: 0 0 6px #fff, 0 0 12px rgba(79,195,247,.6);
  animation: cursorStarFade .8s ease-out forwards;
}
@keyframes cursorStarFade {
  0%   { opacity: 1; transform: scale(1) translateY(0); }
  100% { opacity: 0; transform: scale(.3) translateY(-16px); }
}

/* ===== 工具 ===== */
.divider { border-top: 1px solid var(--border); margin: 16px 0; }
.link-cyan { color: var(--cyan); text-decoration: underline; cursor: pointer; }
.link-cyan:hover { color: #fff; }

/* ===== 子菜单（v0.6.42: 选择器从 id 改成通用 class —— 「设置」和「运营分析」两个分组共用） ===== */
.menu-arrow { color: var(--text-3); }                       /* 收起态箭头颜色（展开态见下一条） */
.menu-toggle.open .menu-arrow { transform: rotate(180deg); color: var(--cyan); }
.menu-subitem { padding-left: 36px !important; font-size: 14.5px !important; }
/* 分组里有子项被选中 → 父行也跟着亮（只亮子项的话看不出"整组在哪"） */
.menu-toggle.menu-group-active { color: var(--cyan); border-left-color: rgba(79,195,247,.45); }
.menu-toggle.menu-group-active .menu-label { color: var(--cyan); }
.menu-toggle.menu-group-active .menu-icon-svg { color: var(--cyan); filter: drop-shadow(0 0 6px rgba(79,195,247,.5)); }

/* ===== 侧栏手动折叠态（240px → 60px） ===== */
.app-aside.collapsed { width: 60px !important; overflow: visible !important; }
.app-aside.collapsed .menu-section-title,
.app-aside.collapsed .menu-label,
.app-aside.collapsed .menu-arrow,
.app-aside.collapsed #menuCollapseBtn > span:first-child { display: none !important; }
.app-aside.collapsed .menu-item {
  padding: 14px 0 !important; font-size: 20px !important;
  text-align: center; justify-content: center;
  border-left-width: 2px;
}
.app-aside.collapsed .menu-toggle { justify-content: center !important; }
.app-aside.collapsed .menu-toggle > span:first-child { font-size: 22px; }
.app-aside.collapsed .menu-submenu {
  display: none !important;     /* 折叠态强制隐藏子菜单，避免层叠错位 */
  position: absolute; left: 60px; top: 0;
  background: var(--card-hi);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 6px 0; min-width: 160px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5); z-index: 50;
}
.app-aside.collapsed .menu-submenu .menu-item {
  padding: 10px 16px !important; font-size: 14px !important; text-align: left;
  border-left: none !important; border-radius: 0;
}
.app-aside.collapsed .menu-subitem { padding-left: 16px !important; }
.app-aside.collapsed #menuCollapseIcon { transform: rotate(180deg) !important; }

/* ===== 响应式：浏览器缩小 → 字号缩小 ===== */
@media (max-width: 1200px) {
  .app-aside:not(.collapsed) { width: 200px !important; }
  .app-aside:not(.collapsed) .menu-item { padding: 12px 16px !important; font-size: 13px !important; }
  .menu-subitem { padding-left: 28px !important; }
  .app-header > div { padding: 14px 20px !important; }
  main { padding: 14px 16px !important; }
}

@media (max-width: 1000px) {
  /* 自动应用折叠样式（屏幕宽度触发） */
  .app-aside:not(.collapsed) { width: 60px !important; overflow: visible !important; }
  .app-aside:not(.collapsed) .menu-section-title,
  .app-aside:not(.collapsed) .menu-label,
  .app-aside:not(.collapsed) .menu-arrow,
  .app-aside:not(.collapsed) #menuCollapseBtn > span:first-child { display: none !important; }
  .app-aside:not(.collapsed) .menu-item {
    padding: 14px 0 !important; font-size: 20px !important; text-align: center; justify-content: center; border-left-width: 2px;
  }
  .app-aside:not(.collapsed) .menu-toggle { justify-content: center !important; }
  .app-aside:not(.collapsed) .menu-toggle > span:first-child { font-size: 22px; }
  .app-aside:not(.collapsed) .menu-submenu {
    display: none; position: absolute; left: 60px; top: 0;
    background: var(--card-hi); border: 1px solid var(--border-2);
    border-radius: 8px; padding: 6px 0; min-width: 160px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5); z-index: 50;
  }
  .app-aside:not(.collapsed) .menu-submenu .menu-item {
    padding: 10px 16px !important; font-size: 14px !important; text-align: left; border-left: none !important;
  }
  .app-aside:not(.collapsed) .menu-subitem { padding-left: 16px !important; }
  /* 缩小卡片 */
  .title-xl { font-size: 30px !important; }
  .title-lg { font-size: 22px !important; }
}

@media (max-width: 768px) {
  .app-header > div { padding: 12px 14px !important; }
  .app-header > div > div:first-child > div:first-child { width: 40px !important; height: 40px !important; }
  .app-header > div > div:first-child > div:first-child svg { width: 22px !important; height: 22px !important; }
  /* ⚠ v0.6.65：这三条原来写的是位置选择器
     `.app-header > div > div:first-child > div:last-child > div:last-child`，
     本意是「品牌文字块 #brandText 的第 1 / 第 2 个子 div」。但 v0.6.65 把世界时钟
     挪成了品牌行的**最后一个子元素**，于是 `div:last-child` 变成了 #worldClocks，
     最后一条 display:none 直接把时钟藏了（元素存在、内容也在，但 0×0 不可见）。
     这里改成按 id 作用域，语义不变、以后再加/挪元素也不会误伤。 */
  #brandText > div:first-child { font-size: 16px !important; }
  #brandText > div:last-child { font-size: 11px !important; }
  #userName { display: none; }
  #summary .card { padding: 12px !important; }
  #summary .card > div:first-child > div:first-child { font-size: 13px !important; }
  #summary .card > div:last-child { font-size: 24px !important; }
  #summary .card .stat-icon { width: 30px !important; height: 30px !important; font-size: 16px !important; }
  main > section > div:nth-child(2) > div { flex-wrap: wrap !important; }
  main > section > div:nth-child(2) > div > div:nth-child(4) { flex-basis: 100% !important; min-width: 0 !important; }
  .table-wrap.scroll-x { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 560px) {
  /* v0.6.62: 这里原有 `.app-aside { display: none; }`（把侧栏整个隐藏）。
     它正是「手机上完全没有导航」的原因，而且会连带把 v0.6.62 新做的抽屉一起抹掉
     —— 抽屉样式在文件末尾用 #appAside.app-aside{display:block!important} 覆盖了它，
     但留着这条只会让以后调试的人困惑，直接删掉。手机上的导航改由抽屉提供。 */
  /* 顶栏再压一层：手机顶栏两行原本约 151px（吃掉 1/5 屏），这里砍掉装饰性的副标题，
     并把「工厂发货时间」从两行压成一行 —— 实测可降到 120px 上下。 */
  /* ⚠ v0.6.65：同样从位置选择器改成 #brandText 作用域 —— 否则会命中新挪进来的世界时钟 */
  #brandText > div:last-child { display: none !important; }
  /* 顶栏第二行 = 时钟 + 发货时间 + 用户菜单。
     v0.6.65：这里**不再隐藏世界时钟** —— 手机端由 JS 把它挪进品牌行右侧（见 index.html
     的 mobiPlaceClock），顶栏不增高也能看到默认的 TX 得州时间。 */
  .ship-notice { padding: 4px 9px !important; }
  .ship-notice .ship-text { flex-direction: row !important; align-items: center; gap: 4px; }
  /* 发货时间卡里的文字不折行（否则 375px 上会多出一行、顶栏又变高），
     真的放不下时由第二行的横向滑动兜底 */
  .ship-notice .ship-label, .ship-notice .ship-val { white-space: nowrap; }
  /* 用户菜单里的角色标签不许折成两行（「管理员」被压成「管理/员」） */
  #userBadge, #userMenuBtn { white-space: nowrap; }

  main { padding: 10px !important; }
  .title-xl { font-size: 24px !important; }
  .title-lg { font-size: 20px !important; }
  #summary { grid-template-columns: 1fr !important; }
  #summary .card > div:last-child { font-size: 22px !important; }
}

/* ===== 世界时钟（v0.5.68 顶部头部横向紧凑卡，v0.5.69 改成只显示一张 + 点击循环切换） ===== */
.world-clock {
  background: linear-gradient(135deg, rgba(15,21,48,.65), rgba(19,28,64,.65));
  border: 1px solid var(--border-2);
  border-radius: 6px;
  padding: 4px 10px;
  position: relative;
  overflow: hidden;
  min-width: 78px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.world-clock::before {
  content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity: .55;
}
.world-clock .clock-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.world-clock .clock-short {
  display: inline-block; padding: 1px 6px;
  background: rgba(79,195,247,.15);
  border: 1px solid rgba(79,195,247,.3);
  border-radius: 3px;
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 1px;
  font-family: "SF Mono", Consolas, monospace;
}
.world-clock .clock-time {
  font-size: 14px; font-weight: 700;
  color: var(--cyan); letter-spacing: 1px;
  font-family: "SF Mono", Consolas, "Courier New", monospace;
  line-height: 1.1;
  text-shadow: 0 0 8px rgba(79,195,247,.4);
}
.world-clock .clock-label {
  font-size: 10px; color: var(--text-3);
  letter-spacing: 1px; margin-top: 2px;
  white-space: nowrap;
}
/* v0.5.69: 可点击循环的时钟卡 —— 鼠标移上去给个轻微的高亮 + 按下反馈 */
.world-clock.world-clock-cycle:hover {
  border-color: rgba(79,195,247,.6);
  box-shadow: 0 0 14px -2px rgba(79,195,247,.45);
  transform: translateY(-1px);
}
.world-clock.world-clock-cycle:active { transform: translateY(0); }

/* ===== 用户下拉菜单（顶部右侧） ===== */
/* v0.5.52: 把基础样式抽到此处 → 店铺下拉的 .user-menu-btn 复用同一套皮肤 */
.user-menu-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(15,21,48,.6);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  transition: border-color .2s, background .2s;
}
.user-menu-btn:hover { border-color: var(--cyan); background: rgba(79,195,247,.08); }
.user-menu-btn:hover .user-menu-arrow { color: var(--cyan); }

/* hover 信息卡（不点击也展示身份） */
.user-hover-card {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 240px;
  background: var(--card-hi);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 90;
  pointer-events: auto;
}
.user-hover-card::before {
  content: ''; position: absolute; top: -6px; right: 24px;
  width: 10px; height: 10px;
  background: var(--card-hi);
  border-left: 1px solid var(--border-2);
  border-top: 1px solid var(--border-2);
  transform: rotate(45deg);
}
.user-hover-card .hover-line {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text-2);
}
.user-hover-card .hover-line .hk { color: var(--text-3); }
.user-hover-card .hover-line span:last-child { color: var(--text); font-weight: 500; }

/* click 下拉操作 */
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 220px;
  background: var(--card-hi);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  z-index: 100;
  padding: 6px 0;
  animation: userDropdownIn .18s ease-out;
}
@keyframes userDropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.user-dropdown-info {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.user-dropdown-divider { height: 1px; background: var(--border); margin: 4px 0; }
.user-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  color: var(--text-2); text-decoration: none;
  font-size: 13px;
  cursor: pointer;
}
.user-dropdown-item:hover { background: rgba(79,195,247,.08); color: var(--cyan); }
.user-dropdown-item.text-danger:hover { color: #ef5350; background: rgba(239,83,80,.08); }
.user-dropdown-item span:first-child { font-size: 14px; width: 18px; text-align: center; }

/* ============================================================
 * v0.6.43: 页面级店铺选择器（.pstore）
 *   原来顶栏那个「全局店铺下拉」（.store-menu / .store-dropdown*）已随顶栏一起下线，
 *   改为每个页面自带一个（共 5 个）：店铺运营 / 订单同步 / 退罚事项 / 快速搜图 / 图表统计。
 *   每个页面各切各的（完全隔离），互不影响。
 *   视觉沿用旧下拉（深色卡 + 青色高亮 + 主店铺徽章），但收在页面工具条里，
 *   所以按钮做成与旁边 .btn 同高（32px）的小尺寸版本。
 *   ⚠ 下拉用 position:absolute + right:0，父级 .pstore 是 position:relative ——
 *     不要给 .pstore 加 overflow:hidden，否则下拉会被裁掉。
 * ============================================================ */
.pstore { position: relative; display: inline-flex; flex: 0 0 auto; }
.pstore-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(79,195,247,.10), rgba(79,195,247,.02));
  color: var(--text);
  font-size: 13px; font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  max-width: 260px;
  transition: border-color .2s, box-shadow .2s;
}
.pstore-btn:hover {
  border-color: rgba(79,195,247,.55);
  box-shadow: 0 0 0 1px rgba(79,195,247,.18), 0 0 14px rgba(79,195,247,.12);
}
.pstore-ico { font-size: 13px; line-height: 1; }
.pstore-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; font-weight: 500; }
.pstore-badge {
  font-size: 9px; line-height: 1.4; padding: 1px 5px; border-radius: 3px; letter-spacing: .5px;
  background: rgba(79,195,247,.22); color: var(--cyan);
}
.pstore-arrow { font-size: 10px; color: var(--text-3); transition: transform .2s; }

.pstore-drop {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 252px; max-height: 320px; overflow: auto;
  padding: 4px 0;
  background: var(--card-hi);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  z-index: 60;
}
.pdi {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px; margin: 1px 4px; border-radius: 4px;
  cursor: pointer; font-size: 13px; color: var(--text);
  transition: background .15s;
}
.pdi:hover { background: rgba(79,195,247,.16); color: var(--cyan); }
.pdi.is-current { background: rgba(79,195,247,.10); }
.pdi.is-disabled { cursor: not-allowed; color: var(--text-3); }
.pdi.is-disabled:hover { background: transparent; color: var(--text-3); }
.pdi-main { min-width: 0; }
.pdi-name { display: flex; align-items: center; gap: 6px; }
.pdi-name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.pdi-meta { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.pdi-tag { font-size: 9px; padding: 1px 5px; border-radius: 3px; letter-spacing: .5px; flex-shrink: 0; }
.pdi-tag.primary { background: rgba(79,195,247,.25); color: var(--cyan); }
.pdi-tag.all { background: rgba(167,139,250,.25); color: #c4b5fd; }
.pdi-check { font-size: 13px; color: var(--cyan); flex-shrink: 0; }
.pdi-sep { height: 1px; background: var(--border); margin: 5px 10px; }
.pdi-group-title { padding: 6px 14px 2px; font-size: 11px; color: var(--text-3); letter-spacing: 1px; }

/* ============================================================
 * v0.6.43: 图表统计 —— 两级区块（上：公司级 / 下：店铺级）
 * ============================================================ */
.ana-scope-title { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; flex-wrap: wrap; }
.ana-scope-title > span:first-child {
  font-size: 13px; font-weight: 600; letter-spacing: 2px; color: var(--cyan);
  padding-left: 10px; border-left: 3px solid var(--cyan); line-height: 1.25;
}
.ana-scope-title.ana-scope-title-sub { margin-top: 22px; }
.ana-scope-title.ana-scope-title-sub > span:first-child { color: #c4b5fd; border-left-color: #a78bfa; }
.ana-scope-sub { font-size: 12px; color: var(--text-3); }
.ana-store-block { margin-bottom: 18px; }
.ana-store-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.ana-store-name { font-size: 14px; font-weight: 600; color: var(--text); }
.ana-store-tag {
  font-size: 10px; padding: 1px 6px; border-radius: 3px;
  background: rgba(79,195,247,.2); color: var(--cyan);
}
.ana-store-meta { font-size: 12px; color: var(--text-3); }
.ana-store-sum {
  margin-top: 8px; font-size: 12px; color: var(--text-3);
  display: flex; gap: 14px; flex-wrap: wrap;
}

/* ===== 数字徽章（汇总卡片用） ===== */
.stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(79,195,247,.12);
  color: var(--cyan);
  font-size: 22px;
}
.stat-icon.green  { background: rgba(102,187,106,.12);  color: var(--green);  }
.stat-icon.amber  { background: rgba(255,167,38,.12);  color: var(--amber);  }
.stat-icon.purple { background: rgba(171,71,188,.12);  color: var(--purple); }
.stat-icon.red    { background: rgba(239,83,80,.12);    color: var(--red);    }

/* ===== 装饰带（左上/右下渐变光晕） ===== */
.glow-cyan {
  background: radial-gradient(circle, rgba(79,195,247,.2), transparent 70%);
}

/* ===== v0.5.25 分页「每页 N 条」下拉：透明底 + 主题青色 + 自定义箭头 ===== */
.pager-size-sel {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(79, 195, 247, .08);  /* 接近透明，仅微青色 */
  color: var(--text);
  border: 1px solid var(--border-c);
  border-radius: 6px;
  padding: 5px 28px 5px 12px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%234fc3f7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.pager-size-sel:hover {
  background-color: rgba(79, 195, 247, .15);
  border-color: var(--cyan);
}
.pager-size-sel:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, .18);
}
/* 不同浏览器对 option 样式支持度不同：Safari/Firefox/新版 Chrome 生效，PC Chrome 下拉面板仍走系统样式
   ——但触发器（select 框）已统一主题色，整体视觉与星空风一致 */
.pager-size-sel option {
  background-color: #0f1530;
  color: var(--text);
  padding: 6px 10px;
}
.pager-size-sel option:checked {
  background-color: rgba(79, 195, 247, .35);
  color: var(--cyan);
}

/* ============================================================
 * AI 设置页表单控件（v0.6.24.2）
 *
 * 背景：这几个控件原先误用了项目里不存在的 CSS 变量（--bg / --bg-2 / --text-1，
 * 本项目实际叫 --space-1 / --panel-2 / --text），导致 background/color 全部解析失败，
 * 退化成浏览器默认样式 —— 最直观的症状就是原生 <select> 展开后是系统亮色面板，
 * 白底 + 浅字，选项「看不见」。
 *
 * 这里统一收口成 .ai-input / .ai-select 两个类：半透明深空底色 + 主题文字色，
 * 并把展开面板（option）也钉成深色，跟星空风格一致。
 * ============================================================ */
.ai-input, .ai-select {
  width: 100%;
  padding: 9px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
  background-color: rgba(10, 14, 31, .55);      /* 半透明深空色，透出卡片底纹 */
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  color-scheme: dark;                            /* 原生下拉面板也走深色 */
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.ai-input::placeholder { color: var(--text-dim); }
.ai-input:hover, .ai-select:hover { border-color: var(--border-2); }
.ai-input:focus, .ai-select:focus {
  border-color: var(--cyan);
  background-color: rgba(10, 14, 31, .82);
  box-shadow: 0 0 0 3px rgba(79, 195, 247, .16);
}
/* 已配置的 Key：只读 + 青色掩码，一眼看出"这个 Key 存过了" */
.ai-input[readonly] {
  color: var(--cyan);
  background-color: rgba(19, 28, 64, .38);
  cursor: default;
}
.ai-input[readonly]:focus { box-shadow: none; border-color: var(--border); }

/* 下拉触发器：去掉系统箭头，自绘主题色箭头 */
.ai-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%234fc3f7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px 6px;
}
/* 展开的原生下拉面板：深色半透明 + 亮字，选中项高亮 */
.ai-select option {
  background-color: rgba(10, 14, 31, .92);
  color: var(--text);
  padding: 8px 10px;
}
.ai-select option:checked,
.ai-select option:hover {
  background-color: rgba(79, 195, 247, .3);
  color: #ffffff;
}

/* ============================================================
 * 快速搜图 —— 双列卡片式网格（v0.5.65）
 * 把原本单列的表格改成 2 列 × N 行的卡片网格，每个卡片占 5 个子格：
 *   勾选 | 序号 | SKU货号 | 预览图 | 规格1内容
 * 头部一行 5 列与卡片共享同一套网格模板，确保列对齐。
 * 5 列总宽占比：勾选 38px + 序号 60px + 货号 1fr + 预览图 80px + 规格 1.4fr
 * ============================================================ */
/* 头部一行 2 列（与卡片 2 列对应），每列内部 5 子列与卡片共用模板，确保列对齐。
 * v0.5.66: 改为 2 列 head 子网格，对齐左右两张卡片的 5 个子列
 * ============================================================ */
.skulib-grid-wrap {
  margin: 0;
  border-top: 1px solid var(--border);
}
.skulib-grid-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}
.skulib-grid-head-col {
  display: grid;
  grid-template-columns: 38px 60px 1fr 80px 1.4fr;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;        /* v0.5.66: 与 .skulib-card 同 padding，列基线对齐 */
  background: linear-gradient(180deg, rgba(19,28,64,.9), rgba(15,21,48,.9));
  color: var(--cyan);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}
.skulib-grid-head-col-mirror { background: linear-gradient(180deg, rgba(19,28,64,.9), rgba(15,21,48,.9)); }   /* v0.5.67: 与左半对称，列名已填上 */
.skulib-grid-head .skulib-cb-cell   { text-align: center; }
.skulib-grid-head .skulib-cb-cell:empty { background: transparent; }   /* v0.5.67: 右半占位的 cb 单元格不要填充渐变，避免看起来像有内容 */
.skulib-grid-head .skulib-seq-cell  { text-align: center; }
.skulib-grid-head .skulib-sku-cell  { text-align: left; }
.skulib-grid-head .skulib-pic-cell  { text-align: center; }
.skulib-grid-head .skulib-spec-cell { text-align: left; }

/* 卡片网格容器：2 列等宽 */
.skulib-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
}

/* 每张卡片 */
.skulib-card {
  display: grid;
  grid-template-columns: 38px 60px 1fr 80px 1.4fr;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(15,21,48,.4);
  font-size: 13px;
  min-height: 64px;
  transition: background .15s;
}
.skulib-card:hover { background: rgba(79,195,247,.07); }
.skulib-card:nth-child(4n+2),
.skulib-card:nth-child(4n+3) { background: rgba(19,28,64,.5); }
.skulib-card:nth-child(4n+2):hover,
.skulib-card:nth-child(4n+3):hover { background: rgba(79,195,247,.09); }

.skulib-card .skulib-cb-cell   { text-align: center; }
.skulib-card .skulib-seq-cell  { text-align: center; color: var(--text-3); font-variant-numeric: tabular-nums; }
.skulib-card .skulib-sku-cell  { text-align: left;  color: var(--cyan); font-weight: 600; word-break: break-all; }
.skulib-card .skulib-pic-cell  { text-align: center; }
.skulib-card .skulib-spec-cell { text-align: left;  color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.skulib-card .skulib-pic-cell img {
  display: block;
  margin: 0 auto;        /* v0.5.65: 图居中（外层 td 也 text-align:center，双保险） */
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--border-2);
  cursor: pointer;
  background: rgba(255,255,255,.04);
}
.skulib-card .skulib-row-cb,
.skulib-grid-head #skulibSelAll {
  cursor: pointer;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

/* 行高很窄（<600px 窗口）允许压缩高度 */
@media (max-width: 720px) {
  .skulib-grid-head-col,
  .skulib-card {
    grid-template-columns: 32px 44px 1fr 70px 1fr;
    gap: 6px;
    padding: 8px 10px;
  }
}
/* ==========================================================================
 * v0.6.25 · AI 分析结果 Markdown 排版
 * AI 返回的是「## 小节标题 / - 列表 / **加粗** / `代码` / > 引用」结构，
 * 之前用 white-space:pre-wrap 直接平铺，字挤在一起很难读。这里给出层级与留白。
 * ========================================================================== */
.ai-md { font-size: 14px; line-height: 1.8; color: var(--text); word-break: break-word; }
.ai-md > *:first-child { margin-top: 0; }
.ai-md > *:last-child  { margin-bottom: 0; }

.ai-md h2, .ai-md h3, .ai-md h4 {
  margin: 16px 0 8px;
  padding-left: 9px;
  border-left: 3px solid var(--cyan);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .5px;
}
.ai-md h2:first-child, .ai-md h3:first-child { margin-top: 2px; }
.ai-md h2 { border-left-color: var(--cyan); }
.ai-md h3 { border-left-color: var(--purple); }
.ai-md h4 { border-left-color: var(--border-2); color: var(--text-2); }

.ai-md p { margin: 7px 0; }

.ai-md ul, .ai-md ol { margin: 7px 0; padding-left: 22px; }
.ai-md li { margin: 4px 0; }
.ai-md ul > li { list-style: none; position: relative; padding-left: 12px; }
.ai-md ul > li::before {
  content: '';
  position: absolute;
  left: 0; top: .72em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: .75;
}
.ai-md ol { list-style: decimal; }
.ai-md ol > li::marker { color: var(--cyan); font-weight: 600; }
.ai-md li > b { color: var(--cyan); }

.ai-md b, .ai-md strong { color: var(--cyan); font-weight: 600; }
.ai-md i, .ai-md em { color: var(--text-2); font-style: normal; }

.ai-md code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(79, 195, 247, .1);
  border: 1px solid rgba(79, 195, 247, .18);
  color: var(--cyan);
}

.ai-md blockquote {
  margin: 8px 0;
  padding: 7px 12px;
  border-left: 3px solid var(--red);
  background: rgba(239, 83, 80, .07);
  border-radius: 0 5px 5px 0;
  color: var(--text-2);
}

.ai-md hr { margin: 14px 0; border: none; border-top: 1px dashed var(--border-2); }

/* 历史记录里的紧凑版 */
.ai-md-sm { font-size: 12.5px; line-height: 1.7; color: var(--text-2); }
.ai-md-sm h2, .ai-md-sm h3, .ai-md-sm h4 { margin: 9px 0 4px; font-size: 13px; }
.ai-md-sm ul, .ai-md-sm ol { margin: 4px 0; padding-left: 18px; }
.ai-md-sm li { margin: 2px 0; }

/* ============================================================
 * v0.6.27: 退罚事项 —— 退款订单选择器候选项
 *   hover 时高亮，让"点一条即选中"的交互可感知
 * ============================================================ */
.rp-order-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.rp-order-item:last-child { border-bottom: none; }
.rp-order-item:hover { background: rgba(79, 195, 247, .10); }

/* ============================================================
 * v0.6.38: 「所有店铺汇总」面板 —— 公司级 HUD 风格
 *   布局：外框满铺 + 内容居中 + 指标放大（数值 30px，此前 22px）
 *   特效：旋转光环边框 / 纵向扫描线 / 四角 HUD 括号 / 网格底纹
 *         / 数值滚动 / 呼吸指示灯 / 指标卡底部频谱条
 *   说明：动效全是纯装饰，disable 后不影响读数；
 *         prefers-reduced-motion 下全部关闭（无障碍）。
 * v0.6.39: 外框改满铺 —— 去掉 max-width:1120px 与 auto 外边距，
 *   让面板左右边缘与下方顶卡 / 表格**严格对齐**（三者同为同一父容器的
 *   100% 宽）。原先的"整体居中"改由**内部内容**居中承担：
 *   `.cs-head` / `.cs-grid` / `.cs-foot` / 展开按钮各自居中，
 *   所以外框变宽后视觉重心仍在中间。
 * ============================================================ */
.cs-panel {
  position: relative;
  margin: 0 0 14px;             /* v0.6.39: 不带 auto → width:auto = 父容器 100%，满铺 */
  padding: 1px;                 /* 这 1px 就是旋转光环的可见厚度 */
  border-radius: 15px;
  overflow: hidden;             /* 裁掉旋转方块的溢出 */
  isolation: isolate;
  background: rgba(10, 14, 31, .6);
  box-shadow: 0 12px 44px -16px rgba(79, 195, 247, .4), 0 0 0 1px rgba(79, 195, 247, .10);
}
/* 旋转光环：conic-gradient 铺满外层，被 .cs-inner 盖住后只剩边缘那一圈彗尾 */
.cs-panel::before {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 160%; padding-bottom: 160%;   /* 正方形，保证长条面板四角都被扫到 */
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0 58%,
    rgba(79, 195, 247, .12) 68%,
    rgba(79, 195, 247, .95) 79%,
    rgba(171, 71, 188, .8)  88%,
    transparent 97%);
  animation: csSpin 7.5s linear infinite;
}
@keyframes csSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.cs-inner {
  position: relative; z-index: 1;
  border-radius: 14px;
  padding: 20px 28px 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%,    rgba(79, 195, 247, .13), transparent 58%),
    radial-gradient(ellipse at 50% 120%,  rgba(171, 71, 188, .10), transparent 55%),
    linear-gradient(180deg, rgba(19, 28, 64, .97), rgba(8, 12, 30, .98));
}
/* 网格底纹（中心亮、四周淡出，避免整块面板变"花"） */
.cs-inner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(79, 195, 247, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 195, 247, .055) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 42%, #000 8%, transparent 76%);
          mask-image: radial-gradient(ellipse at 50% 42%, #000 8%, transparent 76%);
}
/* 纵向扫描线：用 background-position 动画，与面板高度解耦 */
.cs-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg,
    transparent 0%, rgba(79, 195, 247, .07) 42%,
    rgba(79, 195, 247, .16) 50%, rgba(79, 195, 247, .07) 58%, transparent 100%);
  background-size: 100% 42%;
  background-repeat: no-repeat;
  animation: csScan 6.5s linear infinite;
  opacity: .75;
}
@keyframes csScan {
  0%   { background-position: 0 -55%; }
  100% { background-position: 0 165%; }
}
/* 四角 HUD 括号：8 层 linear-gradient 拼出 4 个直角，无需额外 DOM */
.cs-corners {
  position: absolute; inset: 9px; pointer-events: none; z-index: 2;
  --c: var(--cyan);
  background:
    linear-gradient(var(--c), var(--c)) left  top    / 15px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left  top    / 2px 15px no-repeat,
    linear-gradient(var(--c), var(--c)) right top    / 15px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right top    / 2px 15px no-repeat,
    linear-gradient(var(--c), var(--c)) left  bottom / 15px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) left  bottom / 2px 15px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 15px 2px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 2px 15px no-repeat;
  opacity: .5;
  filter: drop-shadow(0 0 4px rgba(79, 195, 247, .85));
}

/* ---- 标题区（居中） ---- */
.cs-head { position: relative; z-index: 2; text-align: center; margin-bottom: 16px; }
.cs-title {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 700; letter-spacing: 4px; color: #fff;
  text-shadow: 0 0 20px rgba(79, 195, 247, .6), 0 0 42px rgba(79, 195, 247, .25);
}
.cs-live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: csPulse 1.9s ease-in-out infinite;
}
@keyframes csPulse {
  0%, 100% { opacity: 1;  transform: scale(1); }
  50%      { opacity: .3; transform: scale(.68); }
}
.cs-tag {
  font-size: 11px; font-weight: 500; letter-spacing: 2px;
  padding: 2px 8px; border-radius: 20px;
  color: var(--cyan);
  background: rgba(79, 195, 247, .12);
  border: 1px solid rgba(79, 195, 247, .3);
  text-shadow: none;
}
.cs-sub { margin-top: 7px; font-size: 12.5px; color: var(--text-2); letter-spacing: .5px; }

/* ---- 指标区：flex 居中 + 每卡等宽 ---- */
.cs-grid {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.cs-tile {
  position: relative;
  /* v0.6.39: max-width 252px → 420px —— 外框满铺后若仍卡 252px，
     卡会缩在中间、两侧留出大片空白；放开后一行正好铺满面板。
     v0.6.49: 指标卡 4 张 → 5 张，flex-basis 220px → 195px、min-width 186px → 165px。
     ⚠ 换行是按 **flex-basis** 算的、与 max-width 无关：5×220 + 4×14 = 1156px，
     内容区一旦窄于 1156（约 1366 屏）第 5 张就被挤到第二行、整个面板高了一截；
     收到 195px 后阈值降到 5×195 + 56 = 1031px，常见视口下 5 张仍是一行。
     max-width 保持 420px 不动（宽屏靠它铺满，改小会让面板两侧重新空出来）。 */
  flex: 1 1 195px; min-width: 165px; max-width: 420px;
  padding: 13px 16px 11px;
  border-radius: 12px;
  border: 1px solid rgba(79, 195, 247, .16);
  background: linear-gradient(160deg, rgba(79, 195, 247, .10), rgba(79, 195, 247, .02) 58%, transparent);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.cs-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(79, 195, 247, .5);
  box-shadow: 0 12px 28px -12px var(--tg), inset 0 0 24px rgba(79, 195, 247, .07);
}
/* 顶部强调线：颜色随各卡主题色（--tc） */
.cs-tile::before {
  content: ''; position: absolute; top: 0; left: 16%; right: 16%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--tc), transparent);
  opacity: .9;
}
.cs-tile-label {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; letter-spacing: 2px; color: var(--text-3);
}
.cs-tile-label svg { color: var(--tc); opacity: .8; }
.cs-tile-val {
  margin-top: 6px;
  font-size: 30px; font-weight: 800; line-height: 1.12; text-align: center;
  color: var(--tc);
  font-variant-numeric: tabular-nums;   /* 滚动时不跳动 */
  letter-spacing: .5px;
  text-shadow: 0 0 22px var(--tg);
}
/* 底部频谱条：纯装饰（scaleY 动画走合成层，比 height 动画省） */
.cs-bars {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
  height: 15px; margin-top: 8px; opacity: .4;
}
.cs-bars i {
  width: 3px; border-radius: 1px; background: var(--tc);
  transform-origin: bottom;
  animation: csBar 1.9s ease-in-out infinite;
}
@keyframes csBar {
  0%, 100% { transform: scaleY(.3); }
  50%      { transform: scaleY(1); }
}

/* ---- 底部说明（居中） ---- */
.cs-foot {
  position: relative; z-index: 2;
  margin-top: 14px; text-align: center;
  font-size: 11.5px; color: var(--text-dim); line-height: 1.7;
}
.cs-foot .cs-sep { color: rgba(79, 195, 247, .45); margin: 0 8px; }

/* ---- 明细展开按钮 ---- */
.cs-toggle-wrap { position: relative; z-index: 2; text-align: center; margin-top: 13px; }
.cs-toggle {
  padding: 5px 18px; font-size: 12.5px; letter-spacing: 1.5px;
  color: var(--cyan); cursor: pointer;
  background: rgba(79, 195, 247, .08);
  border: 1px solid rgba(79, 195, 247, .3);
  border-radius: 20px;
  transition: background .18s, box-shadow .18s, border-color .18s;
}
.cs-toggle:hover {
  background: rgba(79, 195, 247, .18);
  border-color: var(--cyan);
  box-shadow: 0 0 18px -4px rgba(79, 195, 247, .8);
}

/* ---- 分店铺明细 ---- */
.cs-detail {
  position: relative; z-index: 2;
  margin-top: 14px; padding-top: 13px;
  border-top: 1px dashed rgba(79, 195, 247, .22);
}
.cs-detail table {
  /* v0.6.39: 去掉 max-width:940px —— 明细表跟着外框铺满，
     首列贴左边、末列贴右边，与上方指标卡的外沿对齐 */
  width: 100%; border-collapse: collapse;
}
.cs-detail th {
  font-size: 11px; font-weight: 500; letter-spacing: 1px; color: var(--text-3);
  padding: 0 12px 6px;
}
.cs-detail th:first-child { text-align: left; padding-left: 0; }
.cs-detail th:last-child  { text-align: right; padding-right: 0; }
.cs-detail th:not(:first-child) { text-align: right; }
.cs-detail td {
  font-size: 13px; padding: 7px 12px; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.cs-detail td:first-child { text-align: left; padding-left: 0; }
.cs-detail td:not(:first-child) { text-align: right; }
.cs-detail td:last-child { padding-right: 0; }
.cs-detail tbody tr {
  border-top: 1px solid rgba(79, 195, 247, .09);
  transition: background .15s;
}
.cs-detail tbody tr:hover { background: rgba(79, 195, 247, .07); }
.cs-detail .cs-primary {
  margin-left: 7px; font-size: 10.5px; letter-spacing: 1px;
  padding: 1px 6px; border-radius: 10px;
  color: var(--amber); background: rgba(255, 167, 38, .12);
  border: 1px solid rgba(255, 167, 38, .3);
}

/* 无障碍：系统开启「减少动态效果」时关掉全部动画 */
@media (prefers-reduced-motion: reduce) {
  .cs-panel::before, .cs-live, .cs-scan, .cs-bars i { animation: none; }
  .cs-scan { opacity: 0; }
  .cs-panel::before { background: rgba(79, 195, 247, .5); }
}

/* ============================================================
 * v0.6.40: 顶部条「工厂发货时间」常驻提示
 *   位置：世界时钟卡与【店铺切换】之间（用户指定的位置）
 *   内容：固定文案，纯静态 HTML（无接口、无权限、无 JS）
 *   风格：与 .world-clock 同族（1px 顶部扫光 + 琥珀色边框），
 *         琥珀色 = 提醒/时效，跟页面其它"青蓝色数据卡"区分开
 * ============================================================ */
.ship-notice {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 4px 12px 5px;          /* 与 .world-clock 同高（38px），顶部条不会被这两块里更高的一块决定 */
  border: 1px solid rgba(255, 167, 38, .32);
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(255, 167, 38, .12), rgba(255, 167, 38, .03) 62%);
  overflow: hidden;
  white-space: nowrap;            /* 文案不许折行 —— 折行会把顶部条撑高 */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ship-notice::before {
  content: ''; position: absolute; top: 0; left: 28%; right: 28%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity: .55;
}
.ship-notice:hover {
  border-color: rgba(255, 167, 38, .6);
  box-shadow: 0 0 18px -8px var(--amber);
}
.ship-notice .ship-ico {
  width: 15px; height: 15px; flex: none;
  color: var(--amber);
  filter: drop-shadow(0 0 5px rgba(255, 167, 38, .5));
}
.ship-notice .ship-text { display: flex; flex-direction: column; gap: 1px; }
.ship-notice .ship-label {
  font-size: 10px; letter-spacing: 1.5px; line-height: 1.1;
  color: var(--amber); opacity: .9;
}
.ship-notice .ship-val { font-size: 12.5px; line-height: 1.2; color: var(--text-2); }
.ship-notice .ship-batch { font-size: 11px; color: var(--text-3); margin-right: 3px; }   /* 与后面的时间留一点缝，别贴成"第一批19:00" */
.ship-notice .ship-time {
  font-weight: 600; color: var(--text);
  font-family: "SF Mono", Consolas, "Courier New", monospace;
  letter-spacing: .3px;
}
.ship-notice .ship-comma { color: var(--text-dim); margin: 0 1px; }   /* 中文逗号自身带字距，再加 5px 会显得断开 */

/* 窄屏（顶部条本来就会横向滚动）：只把「第一批/第二批」这几个字收掉，保留标签+时间，
   宽度从 ~230px 降到 ~150px，语义不丢（标签在、时间在、卡车图标在） */
@media (max-width: 1360px) {
  .ship-notice .ship-batch { display: none; }
  .ship-notice .ship-val { font-size: 12px; }
}

/* ============================================================
 * v0.6.50: 其他成本 —— 「事项」组合控件（可自由输入 + 可下拉选预设）
 *   ⚠ 刻意**不复用** .pstore-drop / .pdi：
 *     `_closeAllPstoreDrops()` 是按 `.pstore-drop` 选择器把页面上所有下拉收起来的，
 *     而这个下拉长在弹窗里，点 ▼ 的同一拍（事件冒泡到 document）就会被它关回去 ——
 *     表现是"点 ▼ 没反应"。类名分开之后两套下拉互不干扰。
 *   · 容器 left/right:0 → 宽度跟输入框一致；z-index 与 .pstore-drop 同层，
 *     它在弹窗内部，只需盖住同一个弹窗里的表单元素即可。
 * ============================================================ */
.ec-combo-drop {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 190px; overflow: auto;
  padding: 4px 0;
  background: var(--card-hi);
  border: 1px solid var(--border-2);
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  z-index: 60;
}
.ec-combo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 14px; margin: 1px 4px; border-radius: 4px;
  cursor: pointer; font-size: 13px; color: var(--text);
  transition: background .15s;
}
.ec-combo-item:hover { background: rgba(255,167,38,.16); color: var(--amber); }
.ec-combo-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-combo-empty { padding: 8px 14px; font-size: 12px; color: var(--text-3); }

/* ============================================================
 * v0.6.51: 上品跟踪 —— 「日期 × 店铺」矩阵表的可点格子
 *   格子里是「当天该店发布成功」的件数，点开看明细。悬停给个青色底 +
 *   指针，让「这格能点」一眼看出来（纯数字表格不加提示是猜不到的）。
 * ============================================================ */
.pt-cell { transition: background .15s, color .15s; }
.pt-cell:hover { background: rgba(77,208,225,.16); color: #4dd0e1 !important; }

/* 矩阵表首列（日期）与首行（表头）在横向滚动时保持可见 —— 店铺多的时候
   滚到右边还能知道看的是哪一天 */
#m-publish-track table.stats thead th { position: sticky; top: 0; z-index: 2; }

/* ============================================================
 * v0.6.53: 上品跟踪 —— 矩阵表紧凑排版 + 自适应多栏
 *   1) 行高压到最小：原来继承 table.stats 的 12px/10px 内边距，一个整月 30 行要滚好几屏；
 *   2) 窗口够宽时矩阵会拆成 1~3 栏并排（列组由 JS 生成，见 ptBlockCount/ptBlocksNow），
 *      栏与栏之间用 .pt-sep 画一条竖线，避免两块数据糊成一片读错行；
 *   3) 店铺列名改为显示全称、white-space:nowrap（原来 JS 里截成 13 字 + …）。
 *
 * v0.6.55: 字号整体调大 + 分隔线调亮 + 栏数上限由 3 降为 2
 *   1) 用户反馈「这个模块整个页面的数据的字体都放大一点」→ 12px → 14px、内边距同步放宽；
 *   2) 用户反馈「表格的分隔线条颜色明显一点」→ 全局 table.stats 用的是 --border(#1c2548)，
 *      在深底行上几乎看不见；**只在本模块覆盖边框色**，不动全局 table.stats（其他表格不受影响）；
 *   3) 用户定稿「全部数据用两列展示，不需要三列」→ PT_COL.max 由 3 改为 2（见 index.html）。
 * ============================================================ */
#m-publish-track table.pt-table { font-size: 14px; }
#m-publish-track table.pt-table th,
#m-publish-track table.pt-table td {
  padding: 6px 11px;
  line-height: 1.45;
  letter-spacing: 0;
}
#m-publish-track table.pt-table th { padding: 9px 11px; }
#m-publish-track table.pt-table th.pt-date,
#m-publish-track table.pt-table td.pt-date { text-align: left; white-space: nowrap; }
#m-publish-track table.pt-table th.pt-store { text-align: center; white-space: nowrap; }
#m-publish-track table.pt-table th.pt-total,
#m-publish-track table.pt-table td.pt-total,
#m-publish-track table.pt-table td.pt-cell,
#m-publish-track table.pt-table td.pt-blank { text-align: center; font-variant-numeric: tabular-nums; }
#m-publish-track table.pt-table td.pt-blank { color: var(--text-3); }

/* v0.6.55: 分隔线调亮（**只覆盖本模块**，全局 table.stats 保持原样） */
#m-publish-track table.pt-table th {
  border-right-color: rgba(130,175,255,.34);
  border-bottom-color: rgba(130,175,255,.34);
}
#m-publish-track table.pt-table td {
  border-right-color: rgba(130,175,255,.24);
  border-bottom-color: rgba(130,175,255,.24);
}
/* 栏与栏之间的分隔线再亮一档 —— 两块数据并列时要一眼看出「这边是一栏、那边是另一栏」 */
#m-publish-track table.pt-table th.pt-sep,
#m-publish-track table.pt-table td.pt-sep { border-left: 1px solid rgba(130,175,255,.5); }
#m-publish-track table.pt-table tfoot td {
  background: rgba(19,28,64,.6);
  color: #4dd0e1;
  border-bottom-color: rgba(130,175,255,.3);
}

/* ==========================================================================
 * v0.6.64 · 移动端原生重构（真正的手机界面）
 *
 * 目标：手机上是**一套为手机重新设计的界面**，而不是把桌面版压窄。
 * 桌面端（>900px）**一行都不改** —— 除「新元素桌面端默认隐藏」这一条外，
 * 本段所有规则都包在 @media (max-width: 900px) 里。
 *
 * 与 v0.6.62 的关键区别（v0.6.62 是「桌面版 + 媒体查询补丁」）：
 *   ① 导航：v0.6.62 的「左上角汉堡 + 抽屉」**整体废弃**，改成**底部标签栏**
 *      （拇指可达）+「更多」底部面板。
 *      ⚠ 废弃的**真正原因不只是好不好用**：抽屉 #appAside 被关在
 *      `<div style="position:relative; z-index:1">` 这个**层叠上下文**里，
 *      它自己的 z-index:60 只在那个上下文内有效，整体层叠被压到 1 级
 *      → 反而**低于** body 直系的 .mobile-nav-mask（z-index:55）
 *      → 真实手指点菜单命中的是**遮罩**，结果是「抽屉关掉、模块没换」。
 *      （v0.6.62 的回归用程序化 el.click()，**绕过了命中测试**，所以全绿。）
 *      底部标签栏 / 底部面板挂在 <body> 末尾、不在任何带 z-index 的祖先里，
 *      层级关系天然正确，不存在这个坑。
 *   ② 数据展示：宽表（最多 14 列）**改成纵向卡片列表**，一屏一单，不用左右拖。
 *   ③ 表单/弹窗：输入框 16px（避免 iOS 聚焦自动放大）、按钮 ≥44px 触控目标、
 *      弹窗改成**底部弹出面板**（拇指区）。
 *   ④ 安全区：适配刘海屏 / 底部指示条（env(safe-area-inset-*)）。
 * ========================================================================== */

/* ---------- ① 新元素的桌面端形态：一律不显示、不参与布局 ---------- */
.mobi-tabs,
.mobi-sheet,
.mobi-sheet-mask { display: none; }

/* v0.6.64：汉堡按钮与抽屉遮罩在移动端也已废弃（导航改由底部标签栏承担）。
   保留 .mobile-nav-btn / .mobile-nav-mask 的桌面端隐藏规则，避免它们在桌面端露出。 */
.mobile-nav-btn,
.mobile-nav-mask { display: none; }

/* ==========================================================================
 * ② ≤900px：移动端原生界面
 * ========================================================================== */
@media (max-width: 900px) {

  /* ---------------------------------------------------------------------
   * 移动端设计令牌
   * ------------------------------------------------------------------- */
  :root {
    --m-tabbar-h: 58px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-safe-t: env(safe-area-inset-top, 0px);
    --m-radius: 14px;
    --m-tap: 44px;                     /* 最小触控目标 */
    --m-card-bg: linear-gradient(135deg, rgba(19,28,64,.74), rgba(11,17,40,.74));
    --m-card-line: 1px solid rgba(130,175,255,.2);
  }

  /* ---------------------------------------------------------------------
   * 顶栏：紧凑单行 + 一条可横滑的信息条
   * ------------------------------------------------------------------- */
  .app-header > div {
    flex-wrap: wrap !important;
    padding: calc(8px + var(--m-safe-t)) 12px 8px !important;
    row-gap: 6px !important;
  }
  /* 第一行：品牌（logo + 名称） */
  .app-header > div > div:first-child { flex: 1 1 auto; min-width: 0; gap: 10px !important; }
  /* 第二行：时钟 / 发货时间 / 用户菜单 —— 整行可横滑，控件不许被压扁 */
  .app-header > div > div:last-child {
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto; overflow-y: hidden;
    gap: 10px !important; padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .app-header > div > div:last-child::-webkit-scrollbar { display: none; }
  /* ⚠ flex 子项默认 flex-shrink:1，会被挤到比自己的文字还窄 —— 「工厂发货时间」胶囊里的
     white-space:nowrap 文字就会溢出边框（实测 375px 下「0:00-1:00」被截成「0:00-」）。
     一律 flex:0 0 auto，放不下就整行横滑。 */
  .app-header > div > div:last-child > * { flex: 0 0 auto; }

  /* 品牌：logo 与字号收敛（桌面端 48px / 20px） */
  #brandMark { width: 34px !important; height: 34px !important; border-radius: 9px !important; }
  #brandMark svg { width: 20px !important; height: 20px !important; }
  #brandText > div:first-child { font-size: 16px !important; letter-spacing: 1px !important; }
  #brandText > div:last-child { display: none !important; }   /* 副标题「✨ 订单滚滚来…」手机上纯占高度 */

  /* 汉堡按钮 / 旧抽屉遮罩：移动端彻底不用 */
  #mobileNavBtn { display: none !important; }
  #mobileNavMask { display: none !important; }

  /* 左侧栏在手机上整体隐藏（导航改由底部标签栏 + 更多面板承担） */
  #appAside.app-aside { display: none !important; }

  /* ---------------------------------------------------------------------
   * 内容区
   * ------------------------------------------------------------------- */
  /* ⚠ min-width:0 是「表格自己横滑而不是把整页撑宽」的根因修复：main 是 flex 子项，
     其 min-width 默认 auto（= 内容最小宽度），表格列宽之和会把它顶到 2000px+，
     里面的 .table-wrap{overflow-x:auto} 就永远不触发。 */
  main {
    min-width: 0 !important;
    padding: 10px 10px calc(var(--m-tabbar-h) + var(--m-safe-b) + 16px) !important;
  }
  /* 页面标题行（h2 + 动作按钮）在窄屏换行，别把按钮挤出去 */
  main section > div[style*="space-between"],
  main section > div > div[style*="space-between"] { flex-wrap: wrap !important; row-gap: 8px !important; }

  /* 卡片：更圆的角、更柔的底（移动端观感） */
  main .card { border-radius: var(--m-radius) !important; }
  /* 统计卡：2 列更省高度（≤560 时再改 1 列） */
  .title-xl { font-size: 22px !important; }
  .title-lg { font-size: 19px !important; }

  /* ---------------------------------------------------------------------
   * 数据表 → 纵向卡片列表
   * 由 JS 的 mobiLabelCells() 把表头文字写到每个 <td data-mobi-label>，
   * 这里只负责把表格「拆」成卡片。桌面端永不进入这个分支。
   * ------------------------------------------------------------------- */
  main table.mobi-cards {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
    border: 0 !important;
    background: none !important;
  }
  main table.mobi-cards > colgroup { display: none !important; }
  main table.mobi-cards > thead { display: none !important; }
  main table.mobi-cards > tbody { display: block !important; }
  main table.mobi-cards > tfoot { display: block !important; }

  main table.mobi-cards > tbody > tr {
    display: block !important;
    background: var(--m-card-bg);
    border: var(--m-card-line);
    border-radius: var(--m-radius);
    padding: 6px 12px;
    margin: 0 0 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
  }
  main table.mobi-cards > tbody > tr:active { border-color: rgba(79,195,247,.45); }

  main table.mobi-cards > tbody > tr > td {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 6px 0 !important;
    border: 0 !important;
    border-bottom: 1px dashed rgba(130,175,255,.14) !important;
    text-align: left !important;
    white-space: normal !important;
    word-break: break-word;
    font-size: 14px;
    line-height: 1.6;
  }
  main table.mobi-cards > tbody > tr > td:last-child { border-bottom: 0 !important; }
  /* 列名（来自表头）。空表头（勾选框列 / 序号列）不显示标签。
     宽度 92px ≈ 6~7 个汉字/行；更长的列名（如「预估邮费成本（美金）」）折成两行，
     用 line-height 1.45 收紧，不再挤成「预估商品成 / 本」那种断得难看的样子。 */
  main table.mobi-cards > tbody > tr > td[data-mobi-label]:not([data-mobi-label=""])::before {
    content: attr(data-mobi-label);
    flex: 0 0 92px;
    color: var(--text-3);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 500;
    word-break: break-word;
  }
  /* 卡片里的图片缩小，别占掉半屏 */
  main table.mobi-cards > tbody > tr > td img { max-width: 92px; max-height: 92px; }
  /* 表尾（合计行）：做成一条独立的窄卡 */
  main table.mobi-cards > tfoot > tr {
    display: block !important;
    background: rgba(19,28,64,.8);
    border: 1px solid rgba(130,175,255,.3);
    border-radius: var(--m-radius);
    padding: 6px 12px;
  }
  main table.mobi-cards > tfoot > tr > td {
    display: flex !important; gap: 10px; padding: 5px 0 !important;
    border: 0 !important; text-align: left !important; font-size: 13px;
  }
  main table.mobi-cards > tfoot > tr > td[data-mobi-label]:not([data-mobi-label=""])::before {
    content: attr(data-mobi-label); flex: 0 0 92px; color: var(--text-3); font-size: 12px;
  }

  /* 没被卡片化的表（含 rowspan 复杂表 / 结构特殊的）：保留横滑，但给个触感 */
  main .table-wrap, #kukuTableScroll { -webkit-overflow-scrolling: touch; }

  /* ---------------------------------------------------------------------
   * 筛选区：手机上排成 2 列以内的紧凑网格，字段不再各自占一行的半边空
   * ------------------------------------------------------------------- */
  main .card div[style*="min-width:"] { min-width: 0 !important; }
  /* 「日期区间」是外壳里的一个 flex 行（起 → 止，两个输入框内联 min-width:120px 不许收缩），
     min-content ≈267px。手机上让它允许换行，容器再窄也只是折成两行，不会顶破整页。 */
  main .card div[style*="min-width:"] > div[style*="display:flex"] { flex-wrap: wrap !important; }
  /* 触控友好的表单控件（16px 同时避免 iOS 聚焦时自动放大页面 —— 这是手机上最烦的一类问题） */
  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea,
  .modal-body input:not([type="checkbox"]):not([type="radio"]),
  .modal-body select,
  .modal-body textarea {
    font-size: 16px !important;
    min-height: var(--m-tap);
  }
  main .btn, .modal-foot .btn { min-height: var(--m-tap); white-space: nowrap; }

  /* ---------------------------------------------------------------------
   * 分页条：手机上「页码 + 每页条数」一行放不下（实测总宽 448px）→ 换行
   * ------------------------------------------------------------------- */
  #pager, #skulibPager, #kukuPager, #rpPager, #ecPager, #ptDetailPager {
    flex-wrap: wrap !important;
    row-gap: 6px !important;
    justify-content: center !important;
  }

  /* ---------------------------------------------------------------------
   * 权限管理：左右分栏 → 上下堆叠（左栏原本写死 240px）
   * ------------------------------------------------------------------- */
  #m-perms > div { flex-direction: column !important; min-height: 0 !important; }
  #m-perms > div > .card { width: 100% !important; flex: 0 0 auto !important; }
  #permUserList { max-height: 40vh !important; }
  #permMatrix { overflow-x: auto; }

  /* ---------------------------------------------------------------------
   * 订单同步：不要锁死视口高度（手机上顶栏更高，calc(100vh-80px) 会算错）
   * ------------------------------------------------------------------- */
  #m-kuku { height: auto !important; }
  #kukuTableScroll { max-height: none !important; }

  /* ---------------------------------------------------------------------
   * 弹窗 → 底部弹出面板（拇指区，圆角顶边）
   * ------------------------------------------------------------------- */
  .modal-bg { padding: 0 !important; align-items: flex-end !important; }
  .modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: 88vh !important;
    border-radius: 18px 18px 0 0 !important;
    margin: 0 !important;
    animation: mobiSheetUp .3s cubic-bezier(.22,1,.36,1);
  }
  .modal-head { padding: 14px 16px !important; font-size: 16px !important; border-radius: 18px 18px 0 0 !important; }
  .modal-body { padding: 14px 16px calc(16px + var(--m-safe-b)) !important; -webkit-overflow-scrolling: touch; }
  .modal-foot { padding: 12px 16px calc(12px + var(--m-safe-b)) !important; flex-wrap: wrap; gap: 10px; }
  .modal-foot .btn { flex: 1 1 120px; }
  @keyframes mobiSheetUp { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

  /* ---------------------------------------------------------------------
   * 提示浮层：顶栏高度由 JS 实时写进 --app-header-h，不再写死
   * ------------------------------------------------------------------- */
  .toast { top: calc(var(--app-header-h, 96px) + 12px) !important; max-width: calc(100vw - 24px); }

  /* =====================================================================
   * 底部标签栏
   * =================================================================== */
  .mobi-tabs {
    display: flex !important;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 20;
    height: calc(var(--m-tabbar-h) + var(--m-safe-b));
    padding-bottom: var(--m-safe-b);
    background: linear-gradient(180deg, rgba(10,14,32,.9), rgba(5,8,20,.99));
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(130,175,255,.22);
    box-shadow: 0 -8px 28px rgba(0,0,0,.55);
  }
  .mobi-tab {
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 0 2px;
    background: none; border: 0; cursor: pointer;
    color: var(--text-3);
    font-size: 11px; letter-spacing: .3px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease;
  }
  .mobi-tab svg { width: 22px; height: 22px; display: block; }
  .mobi-tab .mobi-tab-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .mobi-tab.on { color: var(--cyan); }
  .mobi-tab.on svg { filter: drop-shadow(0 0 7px rgba(79,195,247,.75)); }
  .mobi-tab.on::after {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 26px; height: 2.5px; border-radius: 0 0 3px 3px;
    background: var(--cyan); box-shadow: 0 0 10px rgba(79,195,247,.9);
  }
  .mobi-tab:active { background: rgba(79,195,247,.1); }

  /* =====================================================================
   * 「更多」底部面板
   * ⚠ 两者都是 <body> 直系子节点（不在任何带 z-index 的祖先里），
   *   所以这里的 z-index 就是最终层叠结果 —— 不会重演 v0.6.62 抽屉被遮罩盖住的坑。
   * =================================================================== */
  .mobi-sheet-mask {
    display: block !important;
    position: fixed; inset: 0;
    z-index: 45;
    background: rgba(0,0,0,.62);
    opacity: 0; pointer-events: none;
    transition: opacity .24s ease;
  }
  body.msheet-open .mobi-sheet-mask { opacity: 1; pointer-events: auto; }

  .mobi-sheet {
    display: flex !important; flex-direction: column;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 46;
    max-height: 80vh;
    background: linear-gradient(180deg, rgba(15,21,46,.99), rgba(7,10,24,1));
    border-top: 1px solid rgba(130,175,255,.3);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(0,0,0,.72);
    transform: translateY(103%);
    transition: transform .3s cubic-bezier(.22,1,.36,1);
    padding-bottom: var(--m-safe-b);
    will-change: transform;
  }
  body.msheet-open .mobi-sheet { transform: translateY(0); }
  /* 视觉上的「抓手」，让人一眼知道可以下滑关闭 */
  .mobi-sheet-grab {
    flex: 0 0 auto; width: 40px; height: 4px; border-radius: 3px;
    background: rgba(160,190,255,.35); margin: 8px auto 4px;
  }
  .mobi-sheet-head {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 16px 10px;
    border-bottom: 1px solid rgba(130,175,255,.15);
  }
  .mobi-sheet-title { font-size: 15px; font-weight: 600; color: var(--text); letter-spacing: 1px; }
  .mobi-sheet-close {
    width: 36px; height: 36px; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(79,195,247,.08); border: 1px solid rgba(130,175,255,.25);
    border-radius: 10px; color: var(--text-2); font-size: 15px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobi-sheet-close:active { background: rgba(79,195,247,.22); }
  .mobi-sheet-body {
    flex: 1 1 auto; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(18px + var(--m-safe-b));
  }
  .mobi-sheet-group {
    font-size: 12px; color: var(--text-3); letter-spacing: 2px;
    margin: 4px 4px 10px; font-weight: 500;
  }
  .mobi-sheet-group:not(:first-child) { margin-top: 18px; }
  .mobi-sheet-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mobi-sheet-item {
    display: flex; align-items: center; gap: 10px;
    min-height: var(--m-tap);
    padding: 12px 12px;
    background: var(--m-card-bg);
    border: var(--m-card-line);
    border-radius: 12px;
    color: var(--text-2);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
  }
  .mobi-sheet-item svg { width: 20px; height: 20px; flex: 0 0 auto; }
  .mobi-sheet-item span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobi-sheet-item:active { background: rgba(79,195,247,.14); border-color: rgba(79,195,247,.45); }
  .mobi-sheet-item.on { color: var(--cyan); border-color: rgba(79,195,247,.5); }
}

/* ==========================================================================
 * ③ ≤720px：快速搜图（双列卡片网格）改单列
 * ⚠ 「快速搜图」自 v0.6.51 起已下线（HIDDEN_MODULES=['skulib']），这段当前不生效；
 *   保留是为了它将来的恢复上线（样式无害，且不影响任何在用页面）。
 * ========================================================================== */
@media (max-width: 720px) {
  .skulib-grid-head { display: none !important; }
  .skulib-grid { grid-template-columns: 1fr !important; }
  .skulib-card {
    display: flex !important; flex-wrap: wrap; align-items: center;
    gap: 10px; padding: 10px 12px; min-height: 0;
  }
  .skulib-card .skulib-seq-cell { display: none !important; }
  .skulib-card .skulib-cb-cell { flex: 0 0 auto; width: 20px; }
  .skulib-card .skulib-pic-cell { flex: 0 0 auto; order: 1; }
  .skulib-card .skulib-sku-cell { flex: 1 1 120px; order: 2; min-width: 0; }
  .skulib-card .skulib-spec-cell { flex: 1 1 100%; order: 3; white-space: normal !important; }
  .skulib-card .skulib-pic-cell img { width: 44px; height: 44px; }
  .skulib-card:nth-child(4n+2), .skulib-card:nth-child(4n+3) { background: rgba(15,21,48,.4); }
  .skulib-card:nth-child(even) { background: rgba(19,28,64,.5); }
}

/* ==========================================================================
 * ④ ≤560px：真正的手机宽度 —— 统计卡单列、时钟让位、发货提示再压一行
 * ========================================================================== */
@media (max-width: 560px) {
  /* v0.6.65：世界时钟在手机上不再隐藏 —— 已由 JS 挪进品牌行右侧（顶栏不增高）。
     发货时间仍压成一行。 */
  .ship-notice { padding: 4px 9px !important; }
  .ship-notice .ship-text { flex-direction: row !important; align-items: center; gap: 4px; }
  .ship-notice .ship-label, .ship-notice .ship-val { white-space: nowrap; }
  #userBadge, #userMenuBtn { white-space: nowrap; }
  #userName { display: none; }

  /* ⚠ 这一条是 v0.6.62 就有的、**不能漏**的规则（v0.6.64 重写时漏过一次，导致 320/390 上
     「日期区间」两个输入框把整页撑宽 60~203px）：筛选字段在 ≤560 一律**整行铺满**。
     字段外壳的内联样式是 flex:2 / min-width:280px，不改成整行就会和别的字段挤在一行，
     而里面那对日期输入框（内联 min-width:120px，不许收缩）的 min-content ≈267px，
     一挤就顶破容器 → 整页横向滚动。 */
  main .card div[style*="min-width:"] { flex: 1 1 100% !important; min-width: 0 !important; }
  /* 日期区间那一行（起 → 止）允许换行；输入框可被压到 120px 以下 */
  main .card input[style*="min-width:"] { min-width: 0 !important; flex: 1 1 118px !important; }

  /* v0.6.65：统计卡片的列数 / 字号改由下方 v0.6.65 段统一处理
     （自适应 2~3 列 + 字号收敛）。原来这里是「一律 1 列」+ 一条把「副标题」当值改的
     `div:last-child` 规则 —— 后者对有副标题的卡其实是命中了副标题（11px 被抬到 22px），
     已一并删掉。 */

  main { padding-left: 8px !important; padding-right: 8px !important; }
  .modal-card { max-height: 92vh !important; }

  /* 订单同步「同步预览」右侧那 3 个按钮是不换行的 flex 行（min-content ≈ 423px），
     手机上会把整页撑宽 → 只在手机断点换行 + 允许收缩（元素内联样式一个字没改）。 */
  #m-kuku .card > div[style*="space-between"] > div:last-child { flex-wrap: wrap !important; width: 100%; }
  #m-kuku .card > div[style*="space-between"] > div:last-child > .btn { flex: 1 1 140px; min-width: 0; }
  /* AI 设置的 4 张服务商卡内联 grid 写的是 minmax(320px,1fr)，320px 视口下会被强制撑宽 */
  #ai-providers-list { grid-template-columns: 1fr !important; }
  /* 极窄屏（≤560）列名再收窄一档，把宽度让给值 */
  main table.mobi-cards > tbody > tr > td[data-mobi-label]:not([data-mobi-label=""])::before { flex-basis: 84px; }
}


/* ==========================================================================
 * v0.6.65 · 移动端细节打磨（第二轮：按用户 10 张截图逐条收口）
 *
 * 全部规则只在 ≤900px / ≤560px 生效。桌面端（>900px）唯一的变化是「新元素默认形态」
 * 两条（.pt-tip-toggle 不显示、.pt-tip-more 恒显示）—— 渲染结果与 v0.6.64 一致。
 * ========================================================================== */

/* ---------- 新元素的桌面端形态 ---------- */
/* 「上次同步」提示框：桌面端不显示折叠按钮、详情恒展开（与 v0.6.64 观感一字不差） */
.pt-tip-toggle { display: none; }
.pt-tip-more { display: block; }

/* ==========================================================================
 * ≤900px
 * ========================================================================== */
@media (max-width: 900px) {

  /* ---------------------------------------------------------------------
   * ① 顶栏时钟（默认 TX 得州时间）—— JS 已把它挪进品牌行右侧空位，
   *    这里只负责紧凑外观，保证「加回来但不增高顶栏」。
   * ------------------------------------------------------------------- */
  #worldClocks { display: flex !important; margin-left: auto; flex: 0 0 auto; }
  #worldClocks .world-clock { min-width: 0; padding: 3px 9px; border-radius: 9px; }
  #worldClocks .world-clock .clock-row { gap: 6px; }
  #worldClocks .world-clock .clock-short { font-size: 9px; padding: 0 4px; }
  #worldClocks .world-clock .clock-time { font-size: 13px; letter-spacing: .5px; }
  /* 只留「TX + 时间」一行：标签「得克萨斯州时间」在手机上纯占高度 */
  #worldClocks .world-clock .clock-label { display: none; }

  /* ---------------------------------------------------------------------
   * ④ 分页器：手机版 —— 收成「‹ · 每页 N 条 · 第 X / Y 页 · ›」一行
   *    （原来「首页/上一页 + 5 个页码 + 下一页/末页 + 每页条数」在 390px 上要占 3 行）
   * ------------------------------------------------------------------- */
  #pager, #skulibPager, #kukuPager, #rpPager, #ecPager, #ptDetailPager {
    gap: 6px !important; justify-content: center !important; align-items: center !important;
  }
  #pager [data-nav="first"],  #pager [data-nav="last"],  #pager [data-nav="num"],  #pager .pg-ell,
  #skulibPager [data-nav="first"], #skulibPager [data-nav="last"], #skulibPager [data-nav="num"], #skulibPager .pg-ell,
  #kukuPager [data-nav="first"],   #kukuPager [data-nav="last"],   #kukuPager [data-nav="num"],   #kukuPager .pg-ell,
  #rpPager [data-nav="first"],     #rpPager [data-nav="last"],     #rpPager [data-nav="num"],     #rpPager .pg-ell,
  #ecPager [data-nav="first"],     #ecPager [data-nav="last"],     #ecPager [data-nav="num"],     #ecPager .pg-ell,
  #ptDetailPager [data-nav="first"], #ptDetailPager [data-nav="last"], #ptDetailPager [data-nav="num"], #ptDetailPager .pg-ell {
    display: none !important;
  }
  /* 长标签只留箭头（« 首页 → «，上一页 ‹ → ‹ …） */
  .pg-txt { display: none !important; }
  #pager [data-nav="prev"],  #pager [data-nav="next"],
  #skulibPager [data-nav="prev"], #skulibPager [data-nav="next"],
  #kukuPager [data-nav="prev"],   #kukuPager [data-nav="next"],
  #rpPager [data-nav="prev"],     #rpPager [data-nav="next"],
  #ecPager [data-nav="prev"],     #ecPager [data-nav="next"],
  #ptDetailPager [data-nav="prev"], #ptDetailPager [data-nav="next"] {
    min-width: 44px !important; min-height: 36px !important;
    padding: 0 10px !important; font-size: 16px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  /* 顺序：‹ · 每页条数 · › */
  #pager [data-nav="prev"], #skulibPager [data-nav="prev"], #kukuPager [data-nav="prev"],
  #rpPager [data-nav="prev"], #ecPager [data-nav="prev"], #ptDetailPager [data-nav="prev"] { order: 1; }
  #pager .pg-size, #skulibPager .pg-size, #kukuPager .pg-size,
  #rpPager .pg-size, #ecPager .pg-size, #ptDetailPager .pg-size {
    order: 2; margin-left: 0 !important; font-size: 12px !important;
  }
  #pager [data-nav="next"], #skulibPager [data-nav="next"], #kukuPager [data-nav="next"],
  #rpPager [data-nav="next"], #ecPager [data-nav="next"], #ptDetailPager [data-nav="next"] { order: 3; }
  #pager .pg-size .pager-size-sel, #skulibPager .pg-size .pager-size-sel,
  #kukuPager .pg-size .pager-size-sel, #rpPager .pg-size .pager-size-sel, #ecPager .pg-size .pager-size-sel {
    height: 36px; min-height: 36px !important;
    padding: 4px 24px 4px 10px !important; font-size: 15px !important;
  }

  /* ---------------------------------------------------------------------
   * ⑤ 日期 / 时间 / 月份输入框：原生控件在窄屏会被压「变形」
   *    （截图上日历图标溢出边框、边框内外对不齐）。统一外观 + 固定触控高度。
   * ------------------------------------------------------------------- */
  main input[type="date"], main input[type="datetime-local"],
  main input[type="time"], main input[type="month"] {
    -webkit-appearance: none; appearance: none;
    height: var(--m-tap); min-height: var(--m-tap) !important;
    line-height: normal !important;
    padding: 0 10px !important;
    display: inline-flex; align-items: center;
    overflow: hidden;
  }
  /* appearance:none 会连原生日历图标一起去掉 → 自绘一个，保留「这是日期」的可读性 */
  main input[type="date"], main input[type="datetime-local"], main input[type="month"] {
    padding-right: 34px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9c4e8' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 11h18'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px 15px;
  }
  main input[type="date"]::-webkit-calendar-picker-indicator,
  main input[type="datetime-local"]::-webkit-calendar-picker-indicator,
  main input[type="time"]::-webkit-calendar-picker-indicator,
  main input[type="month"]::-webkit-calendar-picker-indicator {
    width: 16px; height: 16px; flex: 0 0 auto;
    margin: 0 0 0 6px; padding: 0; opacity: .65; cursor: pointer;
  }
  main input[type="date"]::-webkit-datetime-edit,
  main input[type="datetime-local"]::-webkit-datetime-edit,
  main input[type="month"]::-webkit-datetime-edit { padding: 0; }

  /* select：抹掉原生外观差异（各机型自带的箭头尺寸/位置都不一样），自绘箭头
     ⚠ 必须 !important：`.input`（同类元素上的类选择器，特异性 0-1-0）里的
       `background: rgba(5,8,22,.6)` 是**简写**，会把 background-image 重置成 none ——
       只写 `main select`（0-0-2）拼不过它，结果就是「原生箭头被 appearance:none 去掉、
       自绘箭头又被简写清掉」→ 下拉框一个箭头都不剩（v0.6.65 第一版实测）。 */
  main select {
    -webkit-appearance: none; appearance: none;
    height: var(--m-tap); min-height: 0 !important;
    padding: 0 30px 0 10px !important;
    background-image:
      linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
      linear-gradient(135deg, var(--text-3) 50%, transparent 50%) !important;
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50% !important;
    background-size: 5px 5px, 5px 5px !important;
    background-repeat: no-repeat !important;
    line-height: normal !important;
  }
  main select option { background: #0d1330; color: var(--text); }

  /* ---------------------------------------------------------------------
   * ⑥ 店铺选择器（.pstore）：手机上铺满一行，下拉面板跟着同宽
   *    ⚠ 原来 .pstore-drop 是 right:0 + min-width:252px —— 选择器本身只有 ~180px 时，
   *      面板会向左溢出视口，店名只剩右半截（用户截图里的「Craft Home Decor」）。
   *      改成 left:0/right:0 + min-width:0 → 面板宽度 = 选择器宽度，永远不出屏。
   * ------------------------------------------------------------------- */
  .pstore { width: 100% !important; flex: 1 1 100% !important; min-width: 0; }
  .pstore-btn {
    width: 100% !important; max-width: none !important; height: 40px !important;
    justify-content: flex-start !important;
    padding: 0 12px !important; font-size: 14px !important;
  }
  .pstore-name { max-width: none !important; flex: 1 1 auto; text-align: left; font-size: 14px !important; }
  .pstore-arrow { margin-left: auto; }
  .pstore-drop {
    left: 0 !important; right: 0 !important;
    width: auto !important; min-width: 0 !important;
    max-height: 56vh !important;
  }
  .pdi { padding: 10px 12px !important; font-size: 12.5px !important; }
  .pdi-name span:first-child { max-width: none !important; font-size: 12.5px !important; }
  .pdi-meta { font-size: 10.5px !important; }
  .pdi-group-title { font-size: 10.5px !important; }

  /* ---------------------------------------------------------------------
   * ⑩ 「上次同步」提示框：默认只留首行，详情点开看
   * ------------------------------------------------------------------- */
  #ptSyncTip .pt-tip-more { display: none; }
  #ptSyncTip .pt-tip.is-open .pt-tip-more { display: block; }
  #ptSyncTip .pt-tip-head { font-size: 12px !important; line-height: 1.6 !important; }
  .pt-tip-toggle {
    display: inline-flex !important; align-items: center;
    margin-top: 8px; padding: 6px 12px; min-height: 34px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(130,175,255,.25); border-radius: 8px;
    color: var(--text-2); font-size: 12px; font-family: inherit;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .pt-tip-toggle:active { background: rgba(79,195,247,.16); }
}

/* ==========================================================================
 * ≤560px：卡片密度与页头排版（用户截图里的「字号大、占地方、排版杂乱」都在这档）
 * ========================================================================== */
@media (max-width: 560px) {

  /* ---------------------------------------------------------------------
   * ② 公司级汇总（图表统计页顶部「所有店铺汇总」）→ 每行 2 张 + 字号收敛
   *    ⚠ 它是 flex-wrap 不是 grid：换行按 flex-basis 算。桌面端 basis 195px，
   *      195×2 + 14(gap) = 404 > 390 屏的内容宽 → 手机上一直只有 1 列。
   * ------------------------------------------------------------------- */
  .cs-panel .cs-head { margin-bottom: 10px; }
  .cs-panel .cs-title { font-size: 16px !important; letter-spacing: 2px !important; gap: 7px !important; }
  .cs-panel .cs-tag { font-size: 10px !important; padding: 1px 6px !important; }
  .cs-panel .cs-sub { font-size: 11.5px !important; margin-top: 4px !important; line-height: 1.55 !important; }
  .cs-panel .cs-grid { gap: 8px !important; }
  .cs-panel .cs-tile {
    flex: 1 1 calc(50% - 4px) !important;
    min-width: 0 !important; max-width: none !important;
    padding: 9px 10px 8px !important; border-radius: 10px !important;
  }
  .cs-panel .cs-tile-label { font-size: 10.5px !important; letter-spacing: .5px !important; gap: 4px !important; }
  .cs-panel .cs-tile-label svg { width: 11px !important; height: 11px !important; }
  .cs-panel .cs-tile-val { font-size: 19px !important; margin-top: 4px !important; }
  .cs-panel .cs-bars { display: none !important; }        /* 纯装饰频谱条：手机上省高度 */
  .cs-panel .cs-foot { font-size: 11px !important; line-height: 1.6 !important; margin-top: 10px !important; }
  .cs-panel .cs-toggle-wrap { margin-top: 9px !important; }
  .cs-panel .cs-detail table { font-size: 12px !important; }

  /* ---------------------------------------------------------------------
   * ③ 统计卡片（#summary / #ptSummary / #rpSummary / #ecSummary / #ptStoreCards）
   *    → 自适应 2~3 列 + 字号收敛
   *    auto-fill + 104px：390px 上 3 列，320px 上 2 列（正好覆盖用户说的「两列或三列」）
   * ------------------------------------------------------------------- */
  #summary, #ptSummary, #rpSummary, #ecSummary, #ptStoreCards {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    gap: 8px !important;
  }
  #summary .card, #ptSummary .card, #rpSummary .card, #ecSummary .card, #ptStoreCards .card {
    padding: 9px 10px !important; border-radius: 12px !important;
  }
  /* 大数字 */
  #summary .card > div:nth-child(3),
  #ptSummary .card > div:nth-child(3),
  #rpSummary .card > div:nth-child(3),
  #ecSummary .card > div:nth-child(3),
  #ptStoreCards .card > div:nth-child(3) {
    font-size: 17px !important; letter-spacing: 0 !important; line-height: 1.2 !important;
  }
  /* 标题：#summary 在「标题 + 图标」那一行里（child2 > child1）；
     #ptSummary 等标题自己就是 child2 —— 两种结构都覆盖 */
  #summary .card > div:nth-child(2) > div:first-child {
    font-size: 11px !important; letter-spacing: 0 !important; line-height: 1.3 !important;
  }
  #ptSummary .card > div:nth-child(2),
  #rpSummary .card > div:nth-child(2),
  #ecSummary .card > div:nth-child(2),
  #ptStoreCards .card > div:nth-child(2) {
    font-size: 11px !important; letter-spacing: 0 !important;
    min-height: 0 !important; margin-bottom: 4px !important; line-height: 1.35 !important;
  }
  /* 副标题 */
  #summary .card > div:nth-child(4),
  #ptSummary .card > div:nth-child(4),
  #rpSummary .card > div:nth-child(4),
  #ecSummary .card > div:nth-child(4),
  #ptStoreCards .card > div:nth-child(4) {
    font-size: 10px !important; margin-top: 4px !important;
    letter-spacing: 0 !important; line-height: 1.45 !important;
  }
  /* #summary 右上角的飞船图标：36px → 24px，标题行不留大块空白 */
  #summary .card > div:nth-child(2) { margin-bottom: 4px !important; }
  #summary .card > div:nth-child(2) > div:last-child { width: 24px !important; height: 24px !important; }
  #summary .card > div:nth-child(2) > div:last-child svg { width: 24px !important; height: 24px !important; }

  /* ---------------------------------------------------------------------
   * ⑦⑧ 模块页头：标题 / 徽章 / 说明 / 店铺选择器 / 按钮 → 纵向堆叠、字号收敛
   *    （截图上「图表统计」被挤成两行、「上品跟踪」说明与按钮各占一行且零散）
   * ------------------------------------------------------------------- */
  main section.module > div[style*="space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  main section.module > div[style*="space-between"] > div { width: 100% !important; }
  main section.module > div[style*="space-between"] > div:first-child {
    flex-wrap: wrap !important; gap: 8px !important; row-gap: 4px !important;
  }
  main section.module > div[style*="space-between"] > div:last-child {
    flex-direction: column !important; align-items: stretch !important; gap: 6px !important;
  }
  /* 说明文字：⚠ 它不一定在右组里 —— 「上品跟踪」的说明在**左组**（跟着标题走），
     所以除了 `> div:last-child > span`，再按内联字号兜一层（12/13px 的都是说明文字）。
     只靠右组那条会漏掉「上品跟踪」，而它恰恰是用户截图里说「排版杂乱」的那个页面。 */
  main section.module > div[style*="space-between"] > div:last-child > span,
  main section.module > div[style*="space-between"] span[style*="font-size:13px"],
  main section.module > div[style*="space-between"] span[style*="font-size:12px"] {
    font-size: 11.5px !important; line-height: 1.55 !important;
  }
  main section.module > div[style*="space-between"] h2 { white-space: nowrap; }
  main section.module > div[style*="space-between"] .badge {
    font-size: 10px !important; padding: 2px 7px !important; letter-spacing: 1px !important;
  }
  /* 页头右侧那些动作按钮（同步数据 / 全量重扫…）：铺满一行，好点也好认 */
  main section.module > div[style*="space-between"] > div:last-child > .btn { width: 100%; }

  /* ---------------------------------------------------------------------
   * 分页器再收一档：320px 上「‹ · 每页 15 条 · 第 1 / 14 页 · ›」会超出卡片宽度
   * （实测总宽 273px > 可用 272px）→ 折成两行。字号与内边距再降一点即可一行放下。
   * ------------------------------------------------------------------- */
  #pager .pg-size, #skulibPager .pg-size, #kukuPager .pg-size,
  #rpPager .pg-size, #ecPager .pg-size, #ptDetailPager .pg-size { font-size: 11px !important; gap: 4px !important; }
  #pager .pg-size .pager-size-sel, #skulibPager .pg-size .pager-size-sel,
  #kukuPager .pg-size .pager-size-sel, #rpPager .pg-size .pager-size-sel, #ecPager .pg-size .pager-size-sel {
    height: 34px; min-height: 34px !important;
    padding: 2px 22px 2px 8px !important; font-size: 14px !important;
  }
  #pager [data-nav="prev"],  #pager [data-nav="next"],
  #skulibPager [data-nav="prev"], #skulibPager [data-nav="next"],
  #kukuPager [data-nav="prev"],   #kukuPager [data-nav="next"],
  #rpPager [data-nav="prev"],     #rpPager [data-nav="next"],
  #ecPager [data-nav="prev"],     #ecPager [data-nav="next"],
  #ptDetailPager [data-nav="prev"], #ptDetailPager [data-nav="next"] {
    min-width: 38px !important; min-height: 34px !important; padding: 0 8px !important;
  }
}


/* ==========================================================================
 * v0.6.66 · 收尾四项（用户 4 张截图）
 *   ① 外链商品图挂了的占位（破图不留丑图标）
 *   ② 手机端「搜索 / 筛选」默认收起、点开展开
 *   ③ 上品跟踪：三组卡片手机改 2 列 + 新增「今日各店铺」块
 *   ④ 顶栏第二行：发货时间 + 管理员 一屏放下（原来横向溢出、管理员被切掉）
 * ========================================================================== */

/* ---------- ① 图片加载失败的占位 ----------
   ⚠ 这是**新元素**，且桌面端也可能出现（图床挂了与视口无关）→ 写顶层 */
.img-fallback {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  font-size: 11px; color: var(--text-3);
  border: 1px dashed var(--border-2); border-radius: 4px;
}

/* ---------- ② 折叠搜索条：桌面端不显示（节点也会被 JS 移除，双保险） ---------- */
.mobi-filter-bar { display: none; }

@media (max-width: 900px) {

  /* ---------------------------------------------------------------------
   * ② 折叠搜索条 + 筛选卡默认收起
   * ------------------------------------------------------------------- */
  .mobi-filter-bar {
    display: flex !important; align-items: center; gap: 8px;
    width: 100%; min-height: 42px;
    padding: 0 12px; margin-bottom: 8px;
    background: linear-gradient(135deg, rgba(19,28,64,.74), rgba(11,17,40,.74));
    border: 1px solid rgba(130,175,255,.2); border-radius: 12px;
    color: var(--text-2); font-family: inherit; font-size: 13px;
    text-align: left; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobi-filter-bar:active,
  .mobi-filter-bar[aria-expanded="true"] { background: rgba(79,195,247,.12); border-color: rgba(79,195,247,.45); }
  .mobi-filter-ico { font-size: 14px; flex: 0 0 auto; }
  .mobi-filter-txt { flex: 0 0 auto; font-weight: 500; color: var(--text); }
  .mobi-filter-sum { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 11.5px; color: var(--text-3); }
  .mobi-filter-arrow { flex: 0 0 auto; font-size: 11px; color: var(--text-3); }
  /* 搜索 / 筛选区：手机默认收起，加 .is-open 才显示。
     ⚠ 用属性选择器而不是「模块直接子级 .card」—— 因为有的页面筛选区不是整张卡
       （上品跟踪的日期筛选和矩阵表同卡，只能收起里面那一行），目标元素两种形态都要覆盖。
       只写「隐藏」这一条：`.is-open` 时不匹配 → 元素回到它自己的 display，不用再写一遍。 */
  main [data-mobi-filter]:not(.is-open) { display: none !important; }

  /* ---------------------------------------------------------------------
   * ③ 上品跟踪：三组卡片手机统一 2 列
   *    （用户：「这个统计卡片，不要用三列展示，用两列就可以了」——
   *      店铺名很长（Cozynest Craft Home Decor）+ 4 位数，3 列会挤成一团）
   * ------------------------------------------------------------------- */
  #ptSummary, #ptStoreCards, #ptTodayCards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  /* 「今日各店铺」卡的紧凑排布（与 #ptSummary / #ptStoreCards 同规格） */
  #ptTodayCards .card { padding: 9px 10px !important; border-radius: 12px !important; }
  #ptTodayCards .card > div:nth-child(2) {
    font-size: 11px !important; letter-spacing: 0 !important;
    min-height: 0 !important; margin-bottom: 4px !important; line-height: 1.35 !important;
  }
  #ptTodayCards .card > div:nth-child(3) {
    font-size: 17px !important; letter-spacing: 0 !important; line-height: 1.2 !important;
  }
  #ptTodayCards .card > div:nth-child(4) {
    font-size: 10px !important; margin-top: 4px !important;
    letter-spacing: 0 !important; line-height: 1.45 !important;
  }

  /* ---------------------------------------------------------------------
   * ④ 顶栏第二行：让「发货时间 + 管理员」在手机上**一屏放下**
   *    实测 390px 下这一行内容 389px、可用 366px → 溢出 23px，管理员被切掉一角。
   * ------------------------------------------------------------------- */
  .ship-notice { padding: 3px 8px !important; gap: 6px !important; }
  /* 「工厂发货时间：」7 个字太占宽 → 缩成「发货」；卡车图标保留，语义不丢 */
  .ship-notice .ship-label { font-size: 0 !important; }
  .ship-notice .ship-label::after { content: '发货'; font-size: 10px; letter-spacing: 1px; }
  .ship-notice .ship-val { font-size: 12px !important; }
  .ship-notice .ship-comma { margin: 0 !important; }
  #userMenuBtn { padding: 4px 8px !important; gap: 4px !important; }
  #userBadge { font-size: 10px !important; padding: 1px 5px !important; letter-spacing: 0 !important; }
}

/* 极窄屏（≤360）再省一点：发货时间连卡车图标一起收掉（「发货」两个字还在） */
@media (max-width: 360px) {
  .ship-notice .ship-ico { display: none !important; }
  .ship-notice .ship-val { font-size: 11.5px !important; }
  #userBadge { font-size: 9.5px !important; }
}