/* ============================================================================
 * DMIT 库存监控 · 前端样式（2026-10-13 从 base.html / index.html 内联样式中抽离）
 * 结构：① 通用/主题 ② 首页组件 ③ 桌面端 ④ 移动端（<=700px）⑤ 浅色模式覆盖
 * 移动端方案照搬已验证的搬瓦工监控：紧凑列表 + 详情弹框 + 图标化导航
 * ========================================================================== */

/* ==================== ① 全局与主题补丁 ==================== */

/* lookglass 工具条浅色模式（!important 覆盖 Tailwind 工具类） */
html.light .lookglass-bar { background: rgba(255,255,255,0.95) !important; border-color: #e2e8f0 !important; }
html.light .lookglass-bar * { color: #334155 !important; }
html.light .lookglass-btn { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #334155 !important; }
html.light .lookglass-btn:hover { background: #e2e8e0 !important; }
html.light .lookglass-btn-indigo { background: #dbeafe !important; border-color: #bfdbfe !important; color: #1d4ed8 !important; }
html.light .lookglass-btn-indigo:hover { background: #bfdbfe !important; }

/* 快速筛选工具条浅色模式 */
html.light .bg-slate-800\/80 { background: rgba(255,255,255,0.95) !important; }
html.light .border-slate-700\/50 { border-color: #e2e8f0 !important; }
html.light .quick-filter-section { background: rgba(255,255,255,0.95) !important; border-color: #e2e8f0 !important; }
html.light .quick-filter-section * { color: #334155 !important; }

/* 防止闪屏：主题初始化前隐藏工具条 */
.quick-filter-section { opacity: 0; transition: opacity 0.05s; }
html.light .quick-filter-section, html.dark .quick-filter-section { opacity: 1; }

html.light .quick-filter-btn { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #334155 !important; }
html.light .quick-filter-btn:hover { background: #e2e8e0 !important; }
html.light .quick-filter-btn.active { background: #6366f1 !important; color: white !important; }
html.light .view-toggle-btn { background: rgba(241,245,249,0.8) !important; border-color: #cbd5e1 !important; color: #64748b !important; }
html.light .view-toggle-btn:hover, html.light .view-toggle-btn.active { background: rgba(99,102,241,0.1) !important; color: #6366f1 !important; }
html.light .view-toggle-btn.active { background: #6366f1 !important; color: white !important; }

/* 主题背景/文字 —— 直接作用 body，避免 Tailwind 加载瞬间闪白/闪黑 */
html.dark body { background-color: #0f172a !important; color: #f8fafc !important; }
html.light body { background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%) !important; background-attachment: fixed !important; color: #1f2937 !important; }
html.light, html.light body {
    background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 50%, #f8fafc 100%) !important;
    background-attachment: fixed !important;
    color: #1f2937 !important;
}
html.light .max-w-7xl { background-color: transparent !important; }
html.light .nav-bar, html.light nav { background-color: #ffffff !important; border-bottom-color: #e2e8f0 !important; }
html.light .max-w-7xl.mx-auto { padding-top: 20px; }
html.light .top-cards { gap: 24px !important; padding: 0 0 8px 0 !important; }
html.light .bg-slate-800, html.light .bg-slate-700 { background-color: #f1f5f9 !important; }
html.light .bg-slate-700\/50 { background-color: rgba(241,245,249,0.95) !important; }
html.light .text-white { color: #0f172a !important; }
html.light .text-gray-300 { color: #334155 !important; }
html.light .text-gray-400 { color: #475569 !important; }
html.light .border-slate-700, html.light .border-slate-600 { border-color: #cbd5e1 !important; }
html.light .bg-slate-900 { background-color: #ffffff !important; }
html.light input, html.light select { background-color: #ffffff !important; color: #0f172a !important; border-color: #cbd5e1 !important; }
html.light .stat-card, html.light .top-card { background-color: #ffffff !important; border-color: #e2e8f0 !important; color: #0f172a !important; }
html.light .search-bar { background: #ffffff !important; border-color: #e2e8f0 !important; }
html.light .price { color: #b45309 !important; font-weight: 700; }
html.light .badge-success { background: #dcfce7 !important; color: #15803d !important; }
html.light .badge-danger { background: #fee2e2 !important; color: #dc2626 !important; }
html.light .badge-primary { background: #e0e7ff !important; color: #4338ca !important; }
html.light .config-item { background: #f8fafc !important; }
html.light .config-item span:first-child { color: #64748b !important; }
html.light .config-item span:last-child { color: #0f172a !important; }
html.light .config-item-full { background: #f8fafc !important; }
html.light h1, html.light h2, html.light h3 { color: #0f172a !important; }
html.light a { color: #2563eb !important; }
html.light .section-title { color: #0f172a !important; }
html.light .modal-content { background: #ffffff !important; color: #0f172a !important; border-color: #e2e8f0 !important; }
html.light .modal-title { color: #0f172a !important; }
html.light .modal-body { color: #334155 !important; }
html.light .btn-primary { background: #2563eb !important; color: #ffffff !important; }
html.light .btn-primary:hover { background: #1d4ed8 !important; }
html.light .btn-outline { border-color: #cbd5e1 !important; color: #334155 !important; }
html.light .bg-green-500\/20 { background-color: #dcfce7 !important; }
html.light .text-green-300 { color: #166534 !important; }
html.light .border-green-500\/30 { border-color: #bbf7d0 !important; }
html.light .bg-red-500\/20 { background-color: #fee2e2 !important; }
html.light .text-red-300 { color: #991b1b !important; }
html.light .border-red-500\/30 { border-color: #fecaca !important; }
/* 库存色（有货/缺货）浅色模式要压深：深色模式用的 Tailwind 400 号绿/红直接放白底上只有
   1.6~2.6:1，实测就是"白天模式看不出效果"（2026-10-13 用户反馈）。
   这里覆盖的是"没有自己药丸底色"的用法（顶部统计卡图标、桌面表格的状态列）；
   手机卡片的药丸自带更具体的选择器（见 .view-table ... .stock-cell 那几条），不受影响。 */
html.light .text-green-400 { color: #15803d !important; }   /* 白底 5.0:1，浅绿底 4.6:1 */
html.light .text-red-400 { color: #b91c1c !important; }     /* 白底 6.4:1，浅红底 5.3:1 */

/* 顶部统计卡浅色模式 */
html.light .top-cards { background: transparent !important; }
html.light .top-card { background: rgba(255,255,255,0.95) !important; border-color: #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; }
html.light .top-card .stat-value { color: #0f172a !important; }
html.light .top-card .stat-label { color: #64748b !important; }
html.light .top-card .text-white { color: #0f172a !important; }
html.light .top-card .mini-bar { background: #e2e8f0 !important; }
html.light .top-card .badge-primary { background: #e0e7ff !important; color: #4338ca !important; }

html.light footer { border-color: #e2e8f0 !important; }
html.light footer p { color: #64748b !important; }
html.light footer a { color: #2563eb !important; }

/* 公告弹窗浅色模式 */
html.light #announcementModal .text-gray-300 { color: #334155 !important; }
html.light #announcementModal .border-gray-700 { border-color: #e2e8f0 !important; }
html.light #announcementModal .bg-gray-700 { background: #e2e8f0 !important; }
html.light #announcementModal .text-gray-400 { color: #64748b !important; }

/* 管理后台内容区最小高度撑满屏幕 */
.admin-content { min-height: calc(100vh - 64px); }

/* 滚动条 —— 白天/夜晚统一尺寸，颜色随背景 */
html.light ::-webkit-scrollbar { width: 6px; height: 6px; }
html.light ::-webkit-scrollbar-track { background: rgba(0,0,0,0.06); border-radius: 3px; }
html.light ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 3px; }
html.light ::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
html.light { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.18) rgba(0,0,0,0.06); }

/* 全局兜底：防止任何一处撑破视口造成横向滚动 */
html, body { max-width: 100%; }
body { overflow-x: hidden; }

/* box-sizing 兜底：Tailwind preflight 已经做了 *,::before,::after{box-sizing:border-box}，
   但整站样式不该依赖另一个样式表能否加载成功 —— 它一旦 404，
   搜索框这类 width:100% + padding 的元素会横向溢出（实测溢出 52px）。
   这里只对少数关键控件补一次，不动全局，避免影响 Tailwind 的既有排版。 */
.search-group input, .search-bar select, .search-bar .btn,
.ml-item, .ov-item, .pd-box, .pd-buy, .pd-close,
.quick-filter-btn, .view-toggle-btn, .top-card, .modal-content {
    box-sizing: border-box;
}

/* ==================== ② 首页组件 ==================== */

/* ---- 顶部统计卡 ---- */
.top-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    padding-bottom: 8px;
    position: relative;
    z-index: 50;
}
.top-card {
    background: linear-gradient(145deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 20px 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-width: 0;              /* 关键：允许栅格收缩，否则窄屏溢出 */
}
.top-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), transparent);
}
.top-card:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.15); }
.top-card.clickable { cursor: pointer; }
.top-card.clickable:hover { border-color: #6366f1; }
.top-card.active { border-color: #6366f1; background: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(168,85,247,0.08) 100%); }

.stat-value { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.stat-label { font-size: 13px; color: #94a3b8; margin-top: 8px; text-transform: uppercase; letter-spacing: 0.5px; }

.mini-bar { height: 4px; background: rgba(255,255,255,0.1); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.mini-bar-fill { height: 100%; border-radius: 2px; transition: width 1s ease; }
.mini-bar-indigo .mini-bar-fill { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.mini-bar-green .mini-bar-fill { background: linear-gradient(90deg, #10b981, #34d399); }
.mini-bar-red .mini-bar-fill { background: linear-gradient(90deg, #ef4444, #f87171); }
.mini-bar-purple .mini-bar-fill { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }

.stat-icon {
    position: absolute;
    top: 20px; right: 20px;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    opacity: 0.8;
}

.announcement-preview { max-height: 60px; overflow: hidden; color: #94a3b8; font-size: 13px; margin-top: 8px; }
.announcement-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ---- 公告弹框 ---- */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4px);
}
.modal-overlay.show { display: flex; }

.modal-content {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
}

#modalBody { flex: 1; min-height: 60px; overflow: hidden; position: relative; }
#modalBody.collapsed { max-height: 200px; }
#modalBody.collapsed::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    background: linear-gradient(transparent, #1e293b);
    pointer-events: none;
}
#modalBody.expanded { max-height: none; overflow-y: auto; }
#modalBody .ann-img { max-width: 100%; border-radius: 8px; margin: 12px 0; }
#modalBody blockquote { border-left: 4px solid #6366f1; background: rgba(99,102,241,0.08); padding: 10px 16px; margin: 12px 0; border-radius: 0 8px 8px 0; color: #cbd5e1; }

.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    z-index: 5;
}
.modal-close:hover { background: rgba(255,255,255,0.2); color: white; }

.ann-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    z-index: 10;
}
.ann-nav:hover { background: rgba(99,102,241,0.3); color: #a5b4fc; border-color: rgba(99,102,241,0.4); }
.ann-prev { left: -48px; }
.ann-next { right: -48px; }

/* 公告分类标签 */
.cat-badge-stock { background: rgba(16,185,129,0.15); color: #10b981; }
.cat-badge-official { background: rgba(99,102,241,0.15); color: #818cf8; }
.cat-badge-promo { background: rgba(249,115,22,0.15); color: #fb923c; }
.cat-badge-maintenance { background: rgba(250,204,21,0.15); color: #facc15; }
.cat-badge-other { background: rgba(148,163,184,0.15); color: #94a3b8; }

/* ---- 商品卡片的样式已随"网格视图"一起删除（2026-10-13 第六轮，用户要求）
   .badge* 保留：商品详情弹框（dmit.js 的 pd-badges）还在用 ---- */

.badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.badge-success { background: rgba(16,185,129,0.2); color: #10b981; }
.badge-danger { background: rgba(239,68,68,0.2); color: #ef4444; }
.badge-primary { background: rgba(99,102,241,0.2); color: #818cf8; }

.config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.config-item-full { grid-column: 1 / -1; background: rgba(0,0,0,0.3); padding: 8px 12px; border-radius: 8px; }
.config-item-full span:first-child { color: #94a3b8; font-size: 12px; }
.config-item-full span:last-child { color: #60a5fa; font-weight: 500; display: block; margin-top: 2px; font-size: 13px; }
.config-item { background: rgba(0,0,0,0.3); padding: 8px 12px; border-radius: 8px; }
.config-item span:first-child { color: #94a3b8; font-size: 12px; }
.config-item span:last-child { color: #f1f5f9; font-weight: 500; display: block; margin-top: 2px; }

.price { color: #fbbf24; font-size: 24px; font-weight: 700; }

.btn { padding: 8px 16px; border-radius: 8px; font-weight: 500; transition: all 0.2s; cursor: pointer; }
.btn-primary { background: #6366f1; color: white; border: none; }
.btn-primary:hover { background: #4f46e5; }
.btn-outline { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: #94a3b8; }
.btn-outline:hover { border-color: #6366f1; color: #6366f1; }

/* ---- 搜索筛选区 ---- */
.search-wrapper { margin-bottom: 24px; position: relative; z-index: 5; }
.search-bar {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;
    padding: 20px 28px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.search-group { position: relative; flex: 1; min-width: 200px; max-width: 300px; }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.search-group input {
    width: 100%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 16px 10px 40px;
    color: white;
    font-size: 14px;
}
.search-group input:focus { border-color: #6366f1; outline: none; }
.search-bar select {
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 10px 16px;
    color: white;
    font-size: 14px;
    min-width: 140px;
}
.search-bar select:focus { border-color: #6366f1; outline: none; }

.section-title { color: #f1f5f9; font-size: 18px; font-weight: 600; margin-bottom: 16px; }

/* ---- 浮动商家目录按钮 + 抽屉 ---- */
.toc-fab {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(99,102,241,0.5);
    transition: all 0.3s ease;
    display: flex; align-items: center; justify-content: center;
}
.toc-fab:hover { transform: translateY(-50%) scale(1.1); box-shadow: 0 6px 28px rgba(99,102,241,0.65); }
.toc-fab-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px; height: 20px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 5px;
}

.toc-drawer {
    position: fixed;
    top: 0; right: 0;
    width: 280px;
    height: 100vh;
    background: #1e293b;
    border-left: 1px solid rgba(255,255,255,0.08);
    z-index: 200;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.toc-drawer.open { transform: translateX(0); }
.toc-drawer-header {
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex; justify-content: space-between; align-items: center;
    flex-shrink: 0;
}
.toc-drawer-title { font-size: 16px; font-weight: 700; color: #f1f5f9; }
.toc-drawer-close {
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.05);
    color: #94a3b8;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px;
    transition: all 0.2s;
}
.toc-drawer-close:hover { background: rgba(239,68,68,0.2); color: #f87171; border-color: rgba(239,68,68,0.3); }
.toc-drawer-body { padding: 16px 12px; flex: 1; }
.toc-drawer-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 14px;
    border-radius: 10px;
    color: #94a3b8;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 4px;
    cursor: pointer;
}
.toc-drawer-item:hover { background: rgba(99,102,241,0.15); color: #a5b4fc; }
.toc-drawer-count { font-size: 12px; background: rgba(255,255,255,0.07); padding: 2px 8px; border-radius: 10px; color: #64748b; }
.toc-section-title { font-size: 12px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 14px 6px; }
.toc-section:first-child .toc-section-title { padding-top: 4px; }

.toc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.toc-overlay.open { opacity: 1; pointer-events: auto; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }

/* ---- 快速筛选 / 视图切换 ---- */
.quick-filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 6px 12px;
    background: rgba(30,41,59,0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.quick-filter-btn:hover { background: rgba(30,41,59,1); color: #e2e8f0; border-color: rgba(255,255,255,0.2); }
.quick-filter-btn.active { background: #6366f1 !important; color: white !important; border-color: #6366f1 !important; }

.clear-filter-btn {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(239,68,68,0.15);
    color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.clear-filter-btn:hover { background: rgba(239,68,68,0.25); border-color: rgba(239,68,68,0.5); }

.view-toggle-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: rgba(30,41,59,0.8);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}
.view-toggle-btn:hover, .view-toggle-btn.active { background: rgba(99,102,241,0.2); color: #818cf8; border-color: #6366f1; }
.view-toggle-btn.active { background: #6366f1 !important; color: white !important; }

html.light .quick-filter-btn { background: rgba(241,245,249,0.8) !important; border: 1px solid #cbd5e1 !important; color: #475569 !important; }
html.light .quick-filter-btn:hover { background: rgba(241,245,249,1) !important; color: #334155 !important; border-color: #94a3b8 !important; }
html.light .quick-filter-btn.active { background: #6366f1 !important; color: white !important; border-color: #6366f1 !important; }
html.light .view-toggle-btn { background: rgba(241,245,249,0.8) !important; border: 1px solid #cbd5e1 !important; color: #64748b !important; }
html.light .view-toggle-btn:hover, html.light .view-toggle-btn.active { background: rgba(99,102,241,0.08) !important; color: #6366f1 !important; border-color: #818cf8 !important; }
html.light .view-toggle-btn.active { background: #6366f1 !important; color: white !important; }
html.light .mb-4 .flex.flex-wrap.items-center.justify-center.gap-2 { background: rgba(255,255,255,0.95) !important; border-color: #e2e8f0 !important; }
html.light .mb-4 > div:first-child { background: rgba(241,245,249,0.95) !important; border-color: #e2e8f0 !important; }
html.light .mb-4 .text-gray-300 { color: #64748b !important; }

/* ---- 视图切换：list / table / overview ----
   2026-10-13 第六轮：去掉"网格视图"（PC 上那面 7 行配置的卡片墙），
   它在手机上的表现（分区紧凑列表 .mobile-list）改名 list 保留。
   注意：所有显隐都带上 .view-* 前缀，这样 specificity 才够压过后面的
   移动端媒体查询；用后代选择器比 !important 互殴更好维护。 */
.view-list .mobile-list { display: block; }
.view-list .product-table-wrap { display: none; }
.view-table .mobile-list { display: none; }
.view-table .product-table-wrap { display: block; }
.view-overview .mobile-list,
.view-overview .product-table-wrap { display: none; }
/* 列表视图：桌面那套 #region-* 结构（区域头 + 线路条 + 商家标题 + 表格）整块隐藏。
   坑（2026-10-13 用户反馈）：只藏 .product-table-wrap 是不够的 ——
   表格没了，外面的"区域 / 线路 / 商家 · N 件商品 [介绍]"标题还留着，
   下面就是一堆没有内容的孤儿标题 + 大片空档，观感很差。
   紧凑列表（.mobile-list）自带分区标题，这套留着纯属重复。
   全览视图从第二轮起就是这么处理的（见下面 .view-overview 那条）。 */
.view-list [id^="region-"] { display: none; }
/* 全览视图下把那 16 个"商家介绍"详情区块一并隐藏：
   它们是列表/表格视图的明细（每商家含介绍 + 规格表），全览里重复一遍会变成
   "一屏清单 + 后面几千像素的介绍" —— 观感很差（2026-10-13 用户反馈）。
   商家名与价格在全览条目里已有（条目 title 里也带商家），要看介绍切回列表/表格视图即可 */
.view-overview [id^="region-"] { display: none; }
/* 全览视图里目录抽屉的锚点没有落点（平铺列表，没有分区可跳）：
   入口留着只会"点了没反应"，索性藏掉（2026-10-13 用户确认）。
   列表视图有落点（跳到 #ml-tier-*），所以只在全览里藏。 */
.view-overview .toc-fab { display: none !important; }
/* 全览列表：只有 overview 视图显示 */
.ov-list { display: none; }
.view-overview .ov-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 10px;
}
@media (min-width: 1700px) { .view-overview .ov-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 全览视图的"商家"分组标题（2026-10-14：原来平铺，同一线路下 AS3/AN4/AN5 交错看着乱）。
   占满整行，后面跟着这个商家的套餐；条目一个不少。 */
.ov-head {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 7px;
    margin: 7px 0 1px; padding: 5px 9px;
    font-size: 12.5px; font-weight: 700; color: #cbd5e1;
    background: rgba(148,163,184,0.12);
    border-radius: 8px;
    min-width: 0;
}
.ov-head:first-child { margin-top: 0; }
.ov-head i { color: #818cf8; font-size: 11px; flex: 0 0 auto; }
.ov-head .ov-head-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-head .ov-head-c { margin-left: auto; color: #64748b; font-weight: 500; flex: 0 0 auto; }
html.light .ov-head { background: #eef2f7 !important; color: #334155 !important; }
html.light .ov-head i { color: #4f46e5 !important; }
html.light .ov-head .ov-head-c { color: #64748b !important; }

.ov-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: rgba(30,41,59,0.75);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    padding: 4px 10px;
    font: inherit;
    font-size: 12.5px;
    color: #e2e8f0;
    transition: all 0.12s;
    min-width: 0;
}
.ov-item:hover { border-color: #6366f1; background: #1e293b; }
.ov-item .d { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; }
.ov-item .d.in { background: #10b981; }
.ov-item .d.out { background: #ef4444; }
.ov-item .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ov-item .p { flex: 0 0 auto; color: #818cf8; font-weight: 800; font-variant-numeric: tabular-nums; }
/* 全览条目里的小号"购买"（只有有货且有购买链接才渲染）。
   外层条目是打开详情的按钮，这里用 stopPropagation 阻止冒泡，避免点购买同时弹详情 */
.ov-buy {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 10px;
    border-radius: 6px;
    background: #4f46e5;
    color: #ffffff !important;   /* 与卡片/弹框按钮一致：深底白字 */
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    border: 1px solid transparent;
    position: relative;
}
.ov-buy::after { content: ''; position: absolute; inset: -4px -3px; }   /* 扩大点按热区 */
.ov-buy:hover { background: #4338ca; color: #ffffff !important; }
.ov-buy.out {
    background: transparent;
    border-color: rgba(148,163,184,0.45);
    color: #cbd5e1 !important;   /* 深色底上 #cbd5e1 对比 ≈4.8:1，原来的 #94a3b8 只有 ≈2.2:1 */
    font-weight: 600;
}
.ov-buy.out:hover { background: rgba(148,163,184,0.16); color: #f1f5f9 !important; }
html.light .ov-buy { color: #ffffff !important; }
html.light .ov-buy.out { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #475569 !important; }
html.light .ov-buy.out:hover { background: #e2e8f0 !important; }
html.light .view-overview .ov-list { background: #ffffff !important; border-color: #e2e8f0 !important; }
html.light .ov-item { background: #f8fafc !important; border-color: #e2e8f0 !important; color: #1e293b !important; }
html.light .ov-item:hover { border-color: #6366f1 !important; background: #ffffff !important; }
html.light .ov-item .p { color: #4f46e5 !important; }

/* ---- 商家 / 线路 区块 ---- */
.merchant-desc { color: #94a3b8; }
/* 商家块之间的分隔：2026-10-13 用户反馈"空得太多"，桌面从 32+24 收到和手机一致（18+14），
   视觉间隔约 57px → 33px（还有 1px 分隔线）。第一块（紧跟线路条）另有规则压成 0，见下。 */
.merchant-subsection { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.06); }
.merchant-subsection:first-child { margin-top: 0; padding-top: 0; border-top: none; }
/* 线路条正下方的第一个商家块：线路条自带 mb-4，这里不再叠加 margin/padding
   （原来是 max(16,32) 折叠 + 24 padding = 57px 空档，实测线→商 57px；现约 16px）
   specificity (0,2,1) 高于 @media 里的 .merchant-subsection，手机端同样生效 */
[id^="tier-"] > div:first-child + .merchant-subsection { margin-top: 0; padding-top: 0; border-top: none; }
/* 介绍面板底色是 bg-slate-800/50，压在浅色页面上会变成 rgb(143,148,157) 中灰，
   而字色写死 #94a3b8 → 对比度只有 1.2:1（看不清）。浅色模式显式钉死黑白配。 */
html.light .merchant-desc-panel { background: #f8fafc !important; border-color: #e2e8f0 !important; }
html.light .merchant-desc { color: #475569 !important; }              /* on #f8fafc ≈ 7.2:1 */
html.light .merchant-info-btn { color: #475569 !important; border-color: #cbd5e1 !important; }
html.light .merchant-info-btn:hover { color: #4f46e5 !important; border-color: #818cf8 !important; }

/* ---- Lookglass 工具条 ---- */
.lookglass-btn { white-space: nowrap; }
.lookglass-more-btn { display: none; }

/* ---- 商品详情弹框（移动端紧凑列表点开后打开） ---- */
body.pd-open { overflow: hidden; }
.pd-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(2,6,23,0.72);
    backdrop-filter: blur(3px);
    padding: 16px;
    overflow-y: auto;
}
.pd-modal.show { display: flex; align-items: flex-start; justify-content: center; }
.pd-box {
    position: relative;
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    width: 100%;
    max-width: 600px;
    margin: 6vh auto 0;
    padding: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.55);
    color: #e2e8f0;
}
.pd-x {
    position: absolute;
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: #cbd5e1;
    cursor: pointer;
    display: grid; place-items: center;
    font-size: 15px;
    z-index: 3;
}
.pd-x:hover { background: rgba(239,68,68,0.2); color: #fca5a5; }
.pd-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; padding-right: 44px; }
.pd-name { font-size: 17px; font-weight: 800; margin: 0; line-height: 1.35; color: #f1f5f9; word-break: break-word; }
.pd-sub { color: #94a3b8; font-size: 12.5px; margin: 4px 0 12px; }
.pd-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pd-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 18px; margin: 12px 0; }
.pd-grid > div { display: flex; gap: 8px; font-size: 13.5px; border-bottom: 1px dashed rgba(255,255,255,0.09); padding: 5px 0; min-width: 0; }
.pd-grid b { color: #94a3b8; font-weight: 600; flex: 0 0 62px; }
.pd-grid span { color: #e2e8f0; min-width: 0; word-break: break-word; }
/* 「线路」这类长文本占满整行（2026-10-14）：LAX.EB 的详细线路 123 字，
   和「机房」挤在同一行会被折成 7 行 ✗；整行后约 3 行 ✓ */
.pd-grid > div.wide { grid-column: 1 / -1; }
.pd-h { font-size: 13px; font-weight: 700; margin: 14px 0 6px; color: #cbd5e1; }
.pd-desc { font-size: 13.5px; color: #cbd5e1; line-height: 1.75; white-space: pre-line; word-break: break-word; }
.pd-foot {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
}
.pd-price { color: #fbbf24; font-size: 20px; font-weight: 800; margin-right: auto; }
.pd-price .yearly { color: #f87171; font-size: 13px; font-weight: 600; margin-left: 8px; }
.pd-buy {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px;
    border-radius: 9px;
    background: #6366f1;
    color: #ffffff !important;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none !important;
    border: none;
    cursor: pointer;
    text-shadow: 0 1px 1px rgba(0,0,0,0.18);   /* 兜底：万一 color 被外层 !important 压掉，白字仍有描边感 */
}
.pd-buy:hover { background: #4f46e5; color: #ffffff !important; }
/* 缺货/无链接：不要用"深灰字 + 浅灰底"（低对比看不清）。
   改成描边按钮，深色底 #cbd5e1（≈7:1）、浅色底 #475569（≈7:1） */
.pd-buy.disabled {
    background: transparent;
    border: 1px solid rgba(148,163,184,0.45);
    color: #cbd5e1 !important;
    font-weight: 600;
    cursor: not-allowed;
    text-shadow: none;
}
html.light .pd-buy { background: #2563eb !important; color: #ffffff !important; }
html.light .pd-buy:hover { background: #1d4ed8 !important; }
html.light .pd-buy.disabled {
    background: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}
.pd-close {
    display: none;              /* 桌面端不需要（有右上 ✕ 和 Esc、点蒙层） */
    align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    border-radius: 9px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.pd-close:hover { background: rgba(255,255,255,0.16); }

html.light .pd-box { background: #ffffff !important; border-color: #e2e8f0 !important; color: #1e293b !important; }
html.light .pd-name { color: #0f172a !important; }
html.light .pd-sub { color: #64748b !important; }
html.light .pd-grid > div { border-bottom-color: #e2e8f0 !important; }
html.light .pd-grid b { color: #64748b !important; }
html.light .pd-grid span { color: #1e293b !important; }
html.light .pd-desc { color: #334155 !important; }
html.light .pd-h { color: #475569 !important; }
html.light .pd-foot { border-top-color: #e2e8f0 !important; }
html.light .pd-price { color: #b45309 !important; }
html.light .pd-x { background: #f1f5f9 !important; border-color: #e2e8f0 !important; color: #64748b !important; }
html.light .pd-close { background: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #334155 !important; }

/* ---- 表格视图 ---- */
.product-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 600px; }
.product-table th, .product-table td { padding: 10px 8px; font-size: 13px; white-space: nowrap; }
.product-table th:first-child, .product-table td:first-child { position: sticky; left: 0; z-index: 5; background: inherit; }
.product-table th { background: rgba(30,41,59,0.8); position: sticky; top: 0; z-index: 10; }
.product-table th:first-child { z-index: 15; background: rgba(30,41,59,0.95); }
html.light .product-table th:first-child { background: rgba(241,245,249,0.95) !important; }
.product-table td { border-bottom: 1px solid rgba(255,255,255,0.05); }
html.light .product-table td:first-child { background: inherit; }
html.light .product-table { background: white; }
.in-stock-row td { background: rgba(16,185,129,0.05); }
.in-stock-row td:first-child { background: rgba(16,185,129,0.08); }
html.light .in-stock-row td:first-child { background: rgba(16,185,129,0.06); }
.out-stock-row td { opacity: 0.9; background: rgba(239,68,68,0.05); }
.out-stock-row td:first-child { background: rgba(239,68,68,0.08); }
html.light .out-stock-row td:first-child { background: rgba(239,68,68,0.06); }
.product-table tbody tr { transition: all 0.2s ease; cursor: pointer; border-left: 3px solid transparent; }
.product-table tbody tr:hover td { background: rgba(99,102,241,0.1) !important; transform: scale(1.01); box-shadow: 0 4px 12px rgba(99,102,241,0.2); }
.product-table tbody tr:hover td:first-child { background: rgba(99,102,241,0.15) !important; }
.product-table tbody tr:hover { border-left-color: #6366f1; }
html.light .product-table tbody tr:hover td { background: rgba(99,102,241,0.08) !important; box-shadow: 0 4px 12px rgba(99,102,241,0.15); }
html.light .product-table tbody tr:hover td:first-child { background: rgba(99,102,241,0.1) !important; }
html.light .product-table tbody tr:hover { border-left-color: #6366f1; }
.product-table-wrap { margin-top: 24px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
html.light .product-table { border: 1px solid #e2e8f0 !important; }
html.light .product-table th { background: rgba(241,245,249,0.95) !important; color: #475569 !important; border-bottom: 1px solid #e2e8f0 !important; }
html.light .product-table td { color: #334155 !important; border-bottom: 1px solid #f1f5f9 !important; }
html.light .in-stock-row td { background: rgba(16,185,129,0.04) !important; }
html.light .out-stock-row td { background: rgba(239,68,68,0.04) !important; }
html.light .product-table-wrap { border: 1px solid #e2e8f0 !important; background: white !important; }

/* ---- 分区紧凑列表（列表视图专用；手机主用，宽屏也有一份排版） ---- */
.mobile-list { display: none; }
.ml-region { margin: 0 0 14px; }
.ml-region-head {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 15px; font-weight: 800; color: #f1f5f9;
    margin: 0 0 4px; padding: 0 2px;
}
.ml-region-head .cnt { font-size: 12px; font-weight: 500; color: #64748b; }
.ml-tier-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: #a5b4fc;
    padding: 2px 2px;
}
.ml-tier-head .cnt { font-weight: 500; color: #64748b; margin-left: auto; }
.ml-group {
    background: #1e293b;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 6px;
}
.ml-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #e2e8f0;
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}
.ml-item + .ml-item { border-top: 1px solid rgba(255,255,255,0.05); border-radius: 0; }
.ml-item:hover, .ml-item:active { background: rgba(99,102,241,0.12); border-color: rgba(99,102,241,0.35); border-radius: 8px; }
.ml-item .d { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.ml-item .d.in { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.16); }
.ml-item .d.out { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.14); }
.ml-item .n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ml-item .n .lazy { color: #94a3b8; font-weight: 500; font-size: 12px; margin-left: 4px; }
.ml-item .p { flex: 0 0 auto; color: #fbbf24; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 13px; }
.ml-item .go { flex: 0 0 auto; color: #475569; font-size: 11px; }
/* 紧凑列表里的购买小按钮（只有有货且有购买链接才渲染）。
   列表项本身是打开详情的按钮，点这里要 stopPropagation，别连带弹详情 */
.ml-buy {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    padding: 5px 9px;
    border-radius: 6px;
    background: #4f46e5;
    color: #ffffff !important;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    position: relative;
    border: 1px solid transparent;
}
.ml-buy::after { content: ''; position: absolute; inset: -6px -4px; }   /* 手机点按热区 ≈44px 高 */
.ml-buy:active { background: #4338ca; }
html.light .ml-buy { background: #2563eb !important; color: #ffffff !important; }
.ml-empty { text-align: center; padding: 40px 12px; color: #94a3b8; }
html.light .ml-region-head { color: #0f172a !important; }
html.light .ml-tier-head { color: #4f46e5 !important; }
html.light .ml-group { background: #ffffff !important; border-color: #e2e8f0 !important; }
html.light .ml-item { color: #1e293b !important; }
html.light .ml-item + .ml-item { border-top-color: #f1f5f9 !important; }
html.light .ml-item:hover, html.light .ml-item:active { background: rgba(99,102,241,0.07) !important; }
html.light .ml-item .p { color: #b45309 !important; }
html.light .ml-item .n .lazy { color: #64748b !important; }

/* 移动端专用控件（桌面端隐藏） */
.mobile-only { display: none !important; }

/* ==================== ③ 桌面端小修（间距/对齐） ==================== */
/* 工具条与统计卡在中等屏（<=1200px）不再挤压溢出 */
@media (max-width: 1280px) {
    .top-cards { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
    .search-bar { gap: 12px; padding: 16px 20px; }
}
/* 表格视图在中等屏允许横向滚动而不是撑破布局（作用域限定在表格视图，避免影响其它页） */
.view-table .product-table-wrap { max-width: 100%; }
@media (max-width: 1100px) {
    .view-table .product-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* 手机断点：表格改为卡片化（见下方移动端区块），这里先无条件把横向溢出关进容器，
   保证即使卡片化规则没生效也不会把整页撑宽 */
@media (max-width: 700px) {
    .view-table .product-table-wrap {
        overflow-x: hidden !important;
        overflow-y: visible !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    /* table-layout:fixed 是关键：auto 布局下浏览器按下限内容宽度分配列宽，
       表格会被内容顶到 ~554px；fixed 才会老老实实按 width:100% 收进来 */
    .view-table .product-table {
        table-layout: fixed !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==================== ④ 移动端（<=700px） ==================== */
/* 参考站只是把表格做成横向滚动，手机上要左右拖很别扭；
   这里改成"紧凑卡片列表"：状态点 + 名称 + 价格，点一下看详情弹框。 */
@media (max-width: 700px) {
    /* --- 布局与导航 --- */
    /* 移动端左右留白：2026-10-14 用户反馈"卡片太靠边、看着难受"。
       参考 BuyVM 那套（wrap 12px + 卡片 14px = 文字离屏幕边缘 26px），DMIT 原来是 10px + 10px = 22px。
       这里把容器调到 12px、卡片调到 14px（见下方 tr 的 padding），两边就一致了。 */
    .max-w-7xl.mx-auto.px-4 { padding-left: 12px !important; padding-right: 12px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
    /* 正文容器宽度锁死视口：390px 这类更窄的屏幕（headless Edge 最小窗口约 500px，
       测不到）也不会有绝对宽度元素把文档撑宽；与 body{overflow-x:hidden} 双保险 */
    .mobile-list, .ov-list, .top-cards, .search-wrapper, .quick-filter-section,
    #mainContent { min-width: 0 !important; max-width: 100% !important; }
    .ml-item, .ov-item, .ml-group, .ml-region, .top-card { min-width: 0 !important; }
    nav .max-w-7xl { padding-left: 12px !important; padding-right: 12px !important; }
    nav .h-16 { height: 52px !important; }
    nav a.text-xl { font-size: 15px !important; }
    nav .space-x-4 { gap: 2px !important; }
    nav .space-x-4 > * { margin-left: 0 !important; }
    nav .space-x-4 button, nav .space-x-4 a { padding: 6px 8px !important; }
    nav .space-x-4 .lbl { display: none !important; }   /* 图标化导航：只留图标 */

    /* --- 顶部统计卡：2 列，不破版 --- */
    .top-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px !important;
        padding-bottom: 0 !important;
    }
    .top-card { padding: 10px 12px; border-radius: 12px; }
    .top-card:hover { transform: none; }
    .stat-value { font-size: 26px; letter-spacing: -0.5px; }
    .stat-label { font-size: 11px; margin-top: 3px; letter-spacing: 0.2px; }
    .stat-icon { display: none; }
    .mini-bar { display: none; }
    .top-card .announcement-title { font-size: 11.5px; margin-top: 2px !important; }
    .top-card .text-2xl { font-size: 20px !important; }
    .top-card .badge { padding: 2px 8px; font-size: 10.5px; }
    .top-card .badge-primary { white-space: nowrap; }

    /* --- 筛选区：不占半屏 --- */
    .search-wrapper { margin-bottom: 10px; }
    .search-bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 8px;
        padding: 12px;
        border-radius: 12px;
    }
    .search-group { flex: 1 1 100%; max-width: none; min-width: 0; }
    .search-bar select { flex: 1 1 calc(50% - 4px); min-width: 0; width: auto; padding: 9px 10px; font-size: 16px; }
    .search-bar .btn { flex: 1 1 calc(50% - 4px); display: flex; align-items: center; justify-content: center; padding: 9px 10px; font-size: 13.5px; }
    .search-group input { padding: 10px 12px 10px 38px; font-size: 16px; }

    /* --- 工具条 / 快速筛选：单行横向滚动 --- */
    .quick-filter-section {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start !important;
        gap: 5px !important;
        padding: 8px 10px !important;
        scrollbar-width: none;
        border-radius: 12px !important;
    }
    .quick-filter-section::-webkit-scrollbar { display: none; }
    .quick-filter-section > span:first-child { display: none !important; }
    .quick-filter-btn, .clear-filter-btn { flex-shrink: 0; padding: 6px 10px !important; font-size: 12px !important; min-height: 34px; white-space: nowrap; }
    .quick-filter-section > .w-px.h-4 { display: none !important; }
    .view-toggle-text { display: none !important; }
    .view-toggle-btn { flex-shrink: 0; width: 34px; height: 34px; }

    /* --- Lookglass 节点延迟：折叠 --- */
    .lookglass-bar {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 10px !important;
    }
    .lookglass-bar > i { display: none !important; }
    .lookglass-bar > span:first-of-type { display: block !important; margin-bottom: 2px !important; font-size: 12.5px !important; }
    .lookglass-row { display: flex; flex-wrap: wrap; gap: 6px !important; width: 100%; }
    .lookglass-sep { display: none !important; }
    .lookglass-btn { font-size: 12px !important; padding: 6px 10px !important; min-height: 34px; }
    .lookglass-more-btn {
        display: inline-flex !important;
        align-items: center; gap: 4px;
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 34px;
        background: rgba(99,102,241,0.15) !important;
        border: 1px solid rgba(99,102,241,0.3) !important;
        color: #a5b4fc !important;
        border-radius: 6px !important;
        cursor: pointer;
    }
    .lookglass-collapsed .lookglass-extra { display: none !important; }
    html.light .lookglass-more-btn { background: rgba(99,102,241,0.1) !important; color: #6366f1 !important; }

    /* --- 核心：紧凑列表取代原来的大字卡片 ---
       卡片 7 行 label:value 太高，手机上不用；改用一行 ≈40px 的分区紧凑列表。
       显隐必须带 .view-* 前缀（与桌面端规则保持同一 specificity 层级） */
    .mobile-list { display: none; }                      /* 只有列表视图显示 */
    .view-list .mobile-list { display: block; }
    .view-table .mobile-list { display: none; }          /* 表格视图让位给已卡片化的表格 */
    .view-overview .mobile-list { display: none; }       /* 全览视图用 ov-list */
    .view-overview .ov-list { grid-template-columns: 1fr; padding: 8px; }
    .ov-item { min-height: 34px; }
    /* 全览条目里的「购买」小按钮：手机上一律不显示。
       屏幕就那么宽，"状态点 + 名称 + 价格 + 购买"挤在一起会把名称压到只剩几个字，
       窄屏还会换行变形；点条目本身就能看详情、在弹框里下单，列表留干净更好。
       桌面端每格 660px，按钮留着不挤，所以只在这个断点隐藏。 */
    .view-overview .ov-buy { display: none !important; }

    :root { --ov-row-h: 34px; }
    .pd-grid { grid-template-columns: 1fr; gap: 2px; }
    .pd-name { font-size: 16px; }

    /* --- 公告弹框：留边 + 底部常驻关闭 --- */
    .modal-overlay { padding: 10px; align-items: flex-start; }
    .modal-content {
        width: 100% !important;
        max-height: 88vh !important;
        margin: 5vh auto 0;
        padding: 16px 14px !important;
        border-radius: 14px;
        overflow-y: auto;
    }
    .modal-close { top: 10px; right: 10px; width: 36px; height: 36px; font-size: 16px; }
    .ann-nav { width: 34px; height: 34px; }
    .ann-prev { left: 6px; }
    .ann-next { right: 6px; }
    #modalBody.collapsed { max-height: 160px; }
    #modalBody.collapsed::after { height: 40px; }
    .modal-content h2 { font-size: 17px; padding-right: 40px; }
    #modalBody { font-size: 14px; }
    #modalExpand button { padding: 8px 20px; font-size: 14px; min-height: 40px; }
    .ann-dot { width: 36px !important; height: 36px !important; font-size: 14px !important; }
    .ann-foot {
        position: sticky;
        bottom: -16px;
        background: #1e293b;
        padding: 10px 0 4px;
        margin-top: 14px;
    }
    html.light .ann-foot { background: #ffffff !important; }

    /* --- 商品详情弹框 --- */
    .pd-modal { padding: 10px; }
    .pd-box { margin: 4vh auto 0; max-height: 90vh; overflow-y: auto; padding: 16px 14px; border-radius: 14px; }
    .pd-x { top: 8px; right: 8px; }
    .pd-foot {
        position: sticky;
        bottom: -16px;
        background: #1e293b;
        padding: 10px 0 4px;
        margin-top: 12px;
        gap: 8px;
    }
    html.light .pd-foot { background: #ffffff !important; }
    .pd-close { display: inline-flex !important; flex: 1 1 40%; }
    .pd-buy { flex: 1 1 40%; }
    .pd-price { flex: 1 1 100%; margin-right: 0; font-size: 18px; }

    /* --- 三级标题收紧 --- */
    .merchant-subsection h4 { font-size: 16px; }
    .toc-section-title { font-size: 13px; }
    h2.text-2xl { font-size: 18px !important; }
    .mb-10 { margin-bottom: 18px !important; }
    .mb-6 { margin-bottom: 12px !important; }

/** ==================== 移动端表格视图：卡片式排版 ====================
    参考 stock.bwgyh.com（搬瓦工库存看板）的做法：
    窄屏把表格拆成"一张卡一个套餐" —— 标题行（名称 + 库存徽标）整行，
    其余字段 2 列小格（标签在上、值在下），购买按钮整行居中。
    比原来"一行行 label:value 竖排"清楚得多，也不会再横向拖。 */
@media (max-width: 700px) {
    .view-table .product-table-wrap {
        overflow: visible !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-bottom: 0;
        margin-top: 8px;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
    }
    /* 上面这条压不住浅色/深色模式里那些"桌面表格"的底色与边框 ——
       `html.light .product-table-wrap{background:white;border:...}`（0,2,1）比
       `.view-table .product-table-wrap`（0,2,0）更具体，!important 对 !important 时按具体度取胜 ✗
       结果：手机卡片下面多出一整块白底 + 边框，用户反馈"卡片下层还有个背景，很难看"（2026-10-14）。
       这里显式用同样具体的选择器压回去。 */
    html.light .view-table .product-table-wrap,
    html.dark .view-table .product-table-wrap {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    html.light .view-table .product-table,
    html.dark .view-table .product-table {
        border: 0 !important;
        background: transparent !important;
    }
    .view-table .product-table {
        display: block;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-collapse: separate;
        border-spacing: 0;
        background: transparent !important;
        border: 0 !important;
    }
    .view-table .product-table thead { display: none !important; }
    .view-table .product-table tbody { display: block; width: 100%; }

    /* 一行 = 一张卡。
       grid-auto-flow: dense —— 关键：商品名/配置/操作是整行（grid-column:1/-1），
       稀疏排布会在它们前面留下半格空位（"位置"旁边永远空着，价格被挤到下一行）。
       dense 会让后面的小格回填这些空位，卡片更紧凑、排布也更整齐。 */
    .view-table .product-table tbody tr {
        display: grid !important;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row dense;
        gap: 6px 8px;
        margin: 0 0 10px;
        padding: 14px;                /* 10px → 14px：手机上卡片里太挤（2026-10-14 用户反馈），对齐 BuyVM */
        background: #1e293b;
        border: 1px solid rgba(255,255,255,0.10);
        border-radius: 15px;
        box-shadow: 0 10px 26px rgba(0,0,0,0.25);
        border-left: 0 !important;
        cursor: default;
    }
    .view-table .product-table tbody tr:hover { border-left-color: transparent !important; }

    /* 一列 = 一个小格：标签在上、值在下 */
    .view-table .product-table tbody tr td {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 2px;
        width: 100%;
        min-height: 50px;
        padding: 6px 8px !important;
        margin: 0 !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        border-radius: 11px;
        background: rgba(15,23,42,0.55) !important;
        text-align: left !important;
        color: #e2e8f0 !important;
        font-size: 13px !important;
        line-height: 1.35;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: none !important;
        position: static !important;
        opacity: 1 !important;
        transform: none !important;
        box-shadow: none !important;
    }
    .view-table .product-table tbody tr td::before {
        content: attr(data-label);
        display: block;
        flex: 0 0 auto;
        min-width: 0;
        text-align: left;
        color: #94a3b8 !important;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    /* 商品名整行，兼作卡片标题 */
    .view-table .product-table tbody tr td.product-cell {
        grid-column: 1 / -1;
        display: block !important;
        min-height: 0;
        padding: 0 0 8px !important;
        margin-bottom: 0;
        border: 0 !important;
        border-bottom: 1px dashed rgba(255,255,255,0.14) !important;
        border-radius: 0;
        background: transparent !important;
        font-size: 15px !important;
        font-weight: 800;
        line-height: 1.35;
        color: #f1f5f9 !important;
    }
    .view-table .product-table tbody tr td.product-cell::before { display: none; content: ""; }

    /* 状态列：放进标题行（与名称同排），不再单独占格 */
    .view-table .product-table tbody tr td.stock-cell {
        grid-column: 1 / -1;
        order: -1;
        display: inline-flex !important;
        flex-direction: row;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px;
        min-height: 0;
        padding: 0 0 6px !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
    }
    .view-table .product-table tbody tr td.stock-cell::before { display: none; content: ""; }
    .view-table .product-table tbody tr td.stock-cell > span {
        display: inline-flex;
        align-items: center;
        min-height: 22px;
        padding: 0 8px;
        border-radius: 999px;
        font-size: 11.5px;
        font-weight: 800;
        white-space: nowrap;
    }
    .view-table .product-table tbody tr td.stock-cell .text-green-400 {
        background: rgba(16,185,129,0.18); color: #34d399 !important;
    }
    .view-table .product-table tbody tr td.stock-cell .text-red-400 {
        background: rgba(239,68,68,0.18); color: #f87171 !important;
    }

    /* 价格格：加大加粗；和"位置"共占一行（半宽），避免留下空格子 */
    .view-table .product-table tbody tr td.price-cell {
        justify-content: flex-start;
        min-height: 50px;
        font-size: 16px !important;
        font-weight: 900;
        color: #fbbf24 !important;
    }
    .view-table .product-table tbody tr td.price-cell::before { color: #94a3b8 !important; }

    /* 配置格：整行（内容长，2 列放不下） */
    .view-table .product-table tbody tr td.spec-cell { grid-column: 1 / -1; min-height: 0; }
    /* 「超出后」格：和「配置」一样整行（2026-10-14 新增这一列，对标商家官方表） */
    .view-table .product-table tbody tr td.over-cell { grid-column: 1 / -1; min-height: 0; }

    /* 操作格：整行居中放"购买" */
    .view-table .product-table tbody tr td.buy-cell {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px;
        padding: 2px 0 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
    }
    .view-table .product-table tbody tr td.buy-cell::before { display: none; content: ""; }
    .view-table .product-table tbody tr td.buy-cell .btn {
        width: auto;
        min-width: 96px;
        min-height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 18px;
        border-radius: 10px;
        font-size: 13.5px;
        font-weight: 700;
    }
    /* 表格视图内的购买按钮：白字是唯一正确解，避免被 html.light .text-white 改成深色 */
    .view-table .product-table tbody tr td.buy-cell .btn.btn-primary {
        background: #4f46e5 !important;
        color: #ffffff !important;
        border: 1px solid transparent !important;
    }
    .view-table .product-table tbody tr td.buy-cell .btn.btn-primary:hover { background: #4338ca !important; }

    /* 空状态（该商家暂无商品）也做成整行卡片 */
    .view-table .product-table tbody tr td.table-empty-row {
        grid-column: 1 / -1;
        display: block !important;
        text-align: center !important;
        padding: 28px 12px !important;
        color: #94a3b8 !important;
        background: #1e293b !important;
        border: 1px solid rgba(255,255,255,0.10) !important;
        border-radius: 15px;
    }
    .view-table .product-table tbody tr td.table-empty-row::before { display: none; content: ""; }

    /* 浅色模式：换成参考站那套白卡 + 浅灰小格 */
    html.light .view-table .product-table tbody tr {
        background: #ffffff !important;
        border-color: #e2e8f0 !important;
        box-shadow: 0 10px 26px rgba(15,23,42,0.07) !important;
    }
    html.light .view-table .product-table tbody tr td {
        background: #f8fafc !important;
        border-color: #edf2f7 !important;
        color: #0f172a !important;
    }
    html.light .view-table .product-table tbody tr td::before { color: #64748b !important; }
    html.light .view-table .product-table tbody tr td.product-cell {
        background: transparent !important;
        border-bottom-color: #e2e8f0 !important;
        color: #0f172a !important;
    }
    html.light .view-table .product-table tbody tr td.stock-cell { background: transparent !important; }
    html.light .view-table .product-table tbody tr td.stock-cell .text-green-400 {
        background: #dcfce7 !important; color: #15803d !important;
    }
    html.light .view-table .product-table tbody tr td.stock-cell .text-red-400 {
        background: #fee2e2 !important; color: #b91c1c !important;
    }
    html.light .view-table .product-table tbody tr td.price-cell { color: #b45309 !important; }
    html.light .view-table .product-table tbody tr td.spec-cell { color: #334155 !important; }
    html.light .view-table .product-table tbody tr td.over-cell { color: #334155 !important; }
    html.light .view-table .product-table tbody tr td.buy-cell { background: transparent !important; }
    html.light .view-table .product-table tbody tr td.buy-cell .btn.btn-primary {
        background: #2563eb !important; color: #ffffff !important;
    }
    html.light .view-table .product-table tbody tr td.table-empty-row {
        background: #ffffff !important; border-color: #e2e8f0 !important; color: #64748b !important;
    }
}

    /* --- 全览视图在手机上单列 --- */
    .view-overview .ov-list { grid-template-columns: 1fr; padding: 8px; }
    .ov-item { min-height: 34px; }

    /* --- 浮动按钮：不再压住胶囊行 --- */
    .toc-fab { width: 44px; height: 44px; right: 10px; bottom: 14px; top: auto; transform: none; font-size: 17px; }
    .toc-fab:hover { transform: scale(1.06); }
    #backToTop { width: 42px; height: 42px; bottom: 66px !important; right: 10px !important; }
    .toc-drawer { width: 86vw; }
    body.toc-open .toc-fab { display: none; }

    /* --- 移动端专用控件显形 --- */
    .mobile-only { display: flex !important; }

    /* --- 页脚 --- */
    footer.mt-12 { margin-top: 20px !important; padding: 16px 10px !important; }
    footer .flex-wrap { gap: 10px !important; }
}

/* 极窄屏（<=400px）进一步收紧 */
@media (max-width: 400px) {
    .top-card { padding: 9px 10px; }
    .stat-value { font-size: 23px; }
    .search-bar select { flex: 1 1 100%; }
    .search-bar .btn { flex: 1 1 calc(50% - 4px); }
    .ml-item .n { font-size: 13px; }
    /* 390px 这类窄屏：一行里同时放"名称+价格+购买"太挤，购买只留购物车图标 */
    .ml-buy { padding: 5px 8px; }
    .ml-buy .buy-txt { display: none; }
}

/* 桌面端：移动端专用元素隐藏 + 列表视图的宽屏排版 */
@media (min-width: 701px) {
    .mobile-only { display: none !important; }
    .pd-close { display: none !important; }
    /* 列表视图按约定只在手机上出现在切换按钮里（PC 用 表格 / 全览 两档）；
       但旧 cookie `vps_view=list` 落到桌面时仍要正常渲染，所以只藏按钮、不藏内容 */
    .view-toggle-btn[data-view="list"] { display: none !important; }
    /* 宽屏下紧凑列表一行 44px：状态点 + 名称 + 价格 + 购买，名称占满中间 */
    .ml-region-head { font-size: 17px; margin: 0 0 6px; }
    .ml-tier-head { font-size: 13.5px; }
    /* 窄屏靠 margin-left:auto 把数量顶到右边；宽屏那样会离开标题一千多像素，改成紧贴标题 */
    .ml-tier-head .cnt { margin-left: 8px; }
    .ml-group { padding: 8px; }
    .ml-item { min-height: 44px; font-size: 14.5px; }
    .ml-item .n { font-size: 14.5px; }
}


/* ==================== 分级标题条（Premium / Eyeball / Tier1）2026-10-15 ====================
   用户反馈：黑模式下「⭐ Premium」那行明显能看到一个框、白模式却几乎看不见 ✗（观感不一致）。
   实测根因：模板里用的 Tailwind 类 `from-indigo-900/30` / `border-indigo-700/40` **没进最终 CSS** ✗
   —— computed 是 background:none、边框退回 Tailwind 默认的 #e5e7eb 浅灰 ✓，
   于是浅灰 1px 框在白底上看不见、在深底上却很刺眼 ✗。
   修法：不再依赖那些类，改由 .tier-head 明确配色 —— 深色模式给"有意的"靛蓝/青/石板底 + 同色系边框，
   浅色模式给对应的浅色底 + 浅色边框 ⇒ 两个模式都清晰、且观感一致 ✓。
   用 !important 是因为页面还引着 Tailwind 运行时（它注入的 <style> 更靠后，同优先级会赢 ✗）。 */
.tier-head {
    border: 1px solid rgba(129, 140, 248, 0.38) !important;
    background: linear-gradient(90deg, rgba(49, 46, 129, 0.45), rgba(55, 48, 163, 0.22)) !important;
    border-radius: 12px;
}
.tier-head.tier-eyeball {
    border-color: rgba(34, 211, 238, 0.32) !important;
    background: linear-gradient(90deg, rgba(21, 94, 117, 0.45), rgba(14, 116, 144, 0.22)) !important;
}
.tier-head.tier-tier1,
.tier-head.tier-other {
    border-color: rgba(100, 116, 139, 0.38) !important;
    background: linear-gradient(90deg, rgba(30, 41, 59, 0.55), rgba(51, 65, 85, 0.35)) !important;
}
/* 浅色模式：同样"看得见"，但是浅色系（白底上不再是一片空白 ✗） */
html.light .tier-head {
    border-color: #c7d2fe !important;
    background: linear-gradient(90deg, #eef2ff, #f5f3ff) !important;
}
html.light .tier-head.tier-eyeball {
    border-color: #a5f3fc !important;
    background: linear-gradient(90deg, #ecfeff, #f0fdfa) !important;
}
html.light .tier-head.tier-tier1,
html.light .tier-head.tier-other {
    border-color: #e2e8f0 !important;
    background: linear-gradient(90deg, #f8fafc, #f1f5f9) !important;
}


/* ============ 分级标题条：悬停反馈 + 收起/展开（2026-10-15 用户要求）============
   ① 鼠标移上去要有反馈（原来是死板的静态条 ✗）② 标题右侧加一个收起/展开本分类的入口 ✓
   收起态由 JS 给 #tier-* 容器加 .tier-collapsed ⇒ 这里隐藏标题条以外的所有兄弟节点 ✓ */
.tier-head {
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.tier-head:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    border-color: rgba(165, 180, 252, .60) !important;
    background: linear-gradient(90deg, rgba(67, 56, 202, .55), rgba(79, 70, 229, .32)) !important;
}
.tier-head.tier-eyeball:hover {
    border-color: rgba(103, 232, 249, .55) !important;
    background: linear-gradient(90deg, rgba(21, 94, 117, .60), rgba(14, 116, 144, .34)) !important;
}
.tier-head.tier-tier1:hover,
.tier-head.tier-other:hover {
    border-color: rgba(148, 163, 184, .50) !important;
    background: linear-gradient(90deg, rgba(51, 65, 85, .65), rgba(71, 85, 105, .45)) !important;
}
.tier-head:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; }
html.light .tier-head:hover {
    border-color: #a5b4fc !important;
    background: linear-gradient(90deg, #e0e7ff, #ede9fe) !important;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .12);
}
html.light .tier-head.tier-eyeball:hover {
    border-color: #67e8f9 !important;
    background: linear-gradient(90deg, #cffafe, #ecfeff) !important;
}
html.light .tier-head.tier-tier1:hover,
html.light .tier-head.tier-other:hover {
    border-color: #cbd5e1 !important;
    background: linear-gradient(90deg, #f1f5f9, #e2e8f0) !important;
}
.tier-caret {
    font-size: 12px;
    line-height: 1;
    color: #94a3b8;
    transition: transform .18s ease;
}
.tier-head[aria-expanded="false"] .tier-caret { transform: rotate(-90deg); }
html.light .tier-caret { color: #64748b; }
.tier-collapsed > *:not(.tier-head) { display: none !important; }

/* ml-auto 是 Tailwind 类、没进最终 CSS ✗ ⇒ 箭头贴不到右边（我们自己的规则兜底 ✓）
   只给箭头 auto 外边距：件数徽标保持在标签后面（否则两个 auto 会平分空白、件数跑到中间 ✗） */
.tier-head .tier-caret { margin-left: auto; }

/* ============ 收起/展开箭头：放大 + 上色（2026-10-15 用户报 bug：▾ 太小几乎不可见 ✗）============
   原来是 12px 的文本字形 ▾ + #94a3b8 ⇒ 又小又灰 ✗。改成 26px 圆形底 + fa-chevron-down 图标 ✓ */
.tier-head .tier-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 999px;
    font-size: 14px;
    line-height: 1;
    color: #e2e8f0;
    background: rgba(148, 163, 184, .18);
    margin-left: auto;
    transition: transform .18s ease, background .15s, color .15s;
}
.tier-head .tier-caret i { font-size: 14px; }
.tier-head:hover .tier-caret { background: rgba(165, 180, 252, .34); color: #ffffff; }
.tier-head[aria-expanded="false"] .tier-caret { transform: rotate(-90deg); }
html.light .tier-head .tier-caret { color: #334155; background: rgba(100, 116, 139, .14); }
html.light .tier-head:hover .tier-caret { color: #3730a3; background: rgba(79, 70, 229, .18); }

/* 第 3 版：纯 CSS chevron（不依赖 Font Awesome —— 第 2 版的 fa-chevron-down 在截图里是空的 ✗） */
.tier-head .tier-caret i { display: none; }
.tier-head .tier-caret::after {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
}

/* ============ 移动端卡片：有货/缺货徽标挪到套餐名同一行右侧（2026-10-15 用户要求）============
   上一版我误改成了"价格挪到名称右边" ✗ —— 用户要的是**徽标**（那个绿色药丸 ✓）。
   做法：名称格占满整行、右侧留 92px；徽标格固定在第 1 行并靠右 ⇒ 与名称同排 ✓，
        名字过长时在留白处折行，徽标不会被挤走 ✓。 */
@media (max-width: 700px) {
    .view-table .product-table tbody tr td.product-cell {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-right: 92px !important;
    }
    .view-table .product-table tbody tr td.stock-cell {
        grid-column: 1 / -1;
        grid-row: 1;
        order: 0;
        justify-content: flex-end !important;
        justify-self: end;
        align-self: start;
        padding: 0 0 8px !important;
        background: transparent !important;
        border: 0 !important;
    }
}


/* ============ 全览视图分组标题：悬停反馈（2026-10-15 用户要求）============
   用户："全览视图的标题最好也加个反馈动画效果。但是不需要展开和折叠的效果"
   ⇒ 只做 hover 动效：底色加深 + 轻微右移 + 阴影 + 左侧一条靛蓝指示线（呼应左边的图标 ✓）
   ⇒ 刻意 **不**设置 cursor:pointer、**不**加箭头、**不**加点击逻辑（不暗示可点 ✓） */
.ov-head {
    transition: background .16s ease, box-shadow .16s ease, transform .16s ease, color .16s ease;
}
.ov-head:hover {
    background: rgba(148, 163, 184, .24);
    color: #e2e8f0;
    transform: translateX(2px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .22), inset 2px 0 0 0 #818cf8;
}
html.light .ov-head:hover {
    background: #e3e9f2 !important;
    color: #1e293b !important;
    box-shadow: 0 3px 10px rgba(79, 70, 229, .10), inset 2px 0 0 0 #4f46e5;
}
@media (prefers-reduced-motion: reduce) {
    .ov-head, .ov-head:hover { transition: none; transform: none; }
}


/* ============ 全览视图分组标题：与商品条目拉开主次（2026-10-15 用户反馈）============
   用户："标题和下面的商品字体一样大，主次分得不清楚" ✗
   原来 .ov-head 只有 12.5px，比下面的商品条目（13~14px）还小 ⇒ 现在提到 15px / 800 字重，
   图标与"件数"同步放到 12.5px；移动端收到 14px（窄屏不至于占太宽 ✓）。 */
.ov-head {
    font-size: 15px !important;
    font-weight: 800;
    letter-spacing: 0.01em;
    padding: 7px 10px;
}
.ov-head i { font-size: 12.5px !important; }
.ov-head .ov-head-c { font-size: 12.5px; font-weight: 600; }
html.light .ov-head { font-size: 15px !important; }
@media (max-width: 700px) {
    .ov-head { font-size: 14px !important; padding: 6px 9px; }
    .ov-head i { font-size: 12px !important; }
    .ov-head .ov-head-c { font-size: 12px; }
}


/* ============ 返回顶部按钮：图标颜色（2026-10-15 用户反馈）============
   用户："黑夜模式比较清楚白天模式看不清楚"
   根因：按钮上的 Tailwind 类 text-white **没进最终 CSS** ✗ ⇒ 浅色模式图标继承全局深色文字 ✓
   ⇒ 靛蓝圆底 + 深色箭头看不清 ✗。这里把图标/底色显式写死（图标管 i、svg、纯文字三种写法 ✓）。 */
#backToTop {
    background: #6366f1 !important;
    color: #ffffff !important;
}
#backToTop i,
#backToTop svg,
#backToTop span {
    color: #ffffff !important;
}
#backToTop svg path, #backToTop svg polyline, #backToTop svg line {
    stroke: #ffffff !important;
    fill: none !important;
}
#backToTop:hover { background: #4f46e5 !important; }
html.light #backToTop {
    background: #4f46e5 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(79, 70, 229, .38) !important;
}
html.light #backToTop i,
html.light #backToTop svg,
html.light #backToTop span { color: #ffffff !important; }
html.light #backToTop:hover { background: #4338ca !important; }


/* ============ 全览视图：隐藏"商家目录"浮动按钮（2026-10-15 用户决定）============
   用户："不加吧，我也不太想要，表格视图里还是可以加的。因为网页太长需要这个快速跳转"
   原因：目录面板的条目链接指向 #tier-{区域}-{分级} ✓，而这些锚点**只存在于表格视图** ✗
   ⇒ 全览视图里点了没反应 ✗。与其留个坏按钮，不如按用户意见只在表格视图显示 ✓。 */
.view-overview .toc-fab,
.view-overview .toc-drawer,
.view-overview .toc-overlay {
    display: none !important;
}


/* ============================================================================
   补上"其实没进最终 CSS"的工具类（2026-10-15 扫描结果，按可见影响挑的 ✓）
   背景：模板用了 Tailwind 工具类，但它们不在最终 CSS 里 ✗ ⇒ computed 退回默认值
        （`btn-sm` 190 次、`hover:*` 一批、`ml-auto` 16 次…全都不生效 ✗）
   做法：用**转义选择器**在我们自己的 CSS 里实现 ⇒ 一处生效，所有用到的地方一起修好 ✓（不动模板 ✓）
   注意：Tailwind 的选择器里 `:` `.` `/` 都要转义（`.hover\:text-indigo-400:hover`）✓
   ============================================================================ */
.btn-sm { padding: 4px 10px !important; font-size: 12px !important; line-height: 1.45 !important; }
.py-0\.5 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
.bg-slate-900\/50 { background-color: rgba(15, 23, 42, .5) !important; }
html.light .bg-slate-900\/50 { background-color: #f1f5f9 !important; }

/* 悬停反馈（原来全是死的 ✗） */
.hover\:text-indigo-400:hover { color: #818cf8 !important; }
.hover\:text-indigo-300:hover { color: #a5b4fc !important; }
.hover\:text-indigo-200:hover { color: #c7d2fe !important; }
.hover\:text-white:hover { color: #ffffff !important; }
.hover\:bg-slate-700:hover { background-color: #334155 !important; }
.hover\:bg-slate-700\/50:hover { background-color: rgba(51, 65, 85, .5) !important; }
.hover\:bg-indigo-500\/30:hover { background-color: rgba(99, 102, 241, .3) !important; }
.hover\:bg-indigo-600:hover { background-color: #4f46e5 !important; }
.hover\:bg-blue-500\/30:hover { background-color: rgba(59, 130, 246, .3) !important; }
/* 浅色模式：深色系 hover 文字在白底上看不见 ✗ ⇒ 换成靛蓝 */
html.light .hover\:text-indigo-400:hover { color: #4f46e5 !important; }
html.light .hover\:text-indigo-300:hover { color: #4f46e5 !important; }
html.light .hover\:text-indigo-200:hover { color: #4338ca !important; }
html.light .hover\:bg-slate-700:hover { background-color: #e2e8f0 !important; }
html.light .hover\:bg-slate-700\/50:hover { background-color: rgba(226, 232, 240, .7) !important; }

/* 焦点态 */
.focus\:border-indigo-500:focus { border-color: #6366f1 !important; }
.focus\:outline-none:focus { outline: none !important; }


/* 权重兜底：`html.light .text-gray-300`(0,2,1) 会压住 `.hover\:text-white:hover`(0,2,0) ✗
   ⇒ 补一条 (0,3,0) 的，保证悬停变白（那 5 处元素本身是深底按钮 ⇒ 白字才是对的 ✓） */
html.light .hover\:text-white:hover,
html.dark .hover\:text-white:hover { color: #ffffff !important; }