/* ==========================================================================
       现代顶尖 SaaS 设计系统 (Linear / Stripe / Supabase / Vercel 灵感规范)
       核心原则：克制、高信息密度、精细微边框、极低视觉噪音、等宽数字对齐
       ========================================================================== */
    :root {
      /* 色彩体系：品牌 + 中性 + 语义 */
      --bg-base: #f6f7f9;
      --bg-surface: #ffffff;
      --bg-subtle: #f1f3f5;
      --bg-hover: #f8fafc;
      --border-subtle: #e5e7eb;
      --border-strong: #d3d8e0;
      --text-primary: #111827;
      --text-secondary: #4b5563;
      --text-muted: #9ca3af;
      --accent-brand: #4f46e5;
      --accent-brand-hover: #4338ca;
      --accent-brand-light: #eef2ff;
      --brand-grad: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
      --success: #059669; --success-soft: #ecfdf5; --success-border: #d1fae5;
      --warning: #d97706; --warning-soft: #fffbeb; --warning-border: #fde68a;
      --danger: #dc2626;  --danger-soft: #fef2f2;  --danger-border: #fecaca;
      --info: #2563eb;    --info-soft: #eff6ff;    --info-border: #dbeafe;
      /* 语义色板：状态芯片与描边（与 dark 主题对称补齐） */
      --accent-brand-subtle: rgba(79, 70, 229, 0.08);
      --accent-brand-border: rgba(79, 70, 229, 0.22);
      --status-emerald-bg: rgba(5, 150, 105, 0.09);
      --status-emerald-border: rgba(5, 150, 105, 0.28);
      --status-emerald: #059669;
      --status-amber-bg: rgba(217, 119, 6, 0.10);
      --status-amber-border: rgba(217, 119, 6, 0.30);
      --status-amber: #d97706;
      --status-rose-bg: rgba(225, 29, 72, 0.09);
      --status-rose-border: rgba(225, 29, 72, 0.30);
      --status-rose: #e11d48;
      --status-slate-bg: rgba(100, 116, 139, 0.09);
      --status-slate-border: rgba(100, 116, 139, 0.26);
      --status-slate: #64748b;
      /* 阴影阶：哑光、低噪 */
      --shadow-xs: 0 1px 2px 0 rgba(17, 24, 39, 0.04);
      --shadow-sm: 0 1px 2px 0 rgba(17, 24, 39, 0.04), 0 1px 3px 0 rgba(17, 24, 39, 0.03);
      --shadow-md: 0 2px 4px -1px rgba(17, 24, 39, 0.05), 0 6px 16px -4px rgba(17, 24, 39, 0.07);
      --shadow-lg: 0 8px 24px -6px rgba(17, 24, 39, 0.10), 0 2px 6px -2px rgba(17, 24, 39, 0.05);
      --shadow-card: 0 1px 2px 0 rgba(17, 24, 39, 0.04);
      --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.14);
      /* 圆角阶 */
      --radius-sm: 6px;
      --radius-md: 8px;
      --radius-btn: 8px;
      --radius-card: 12px;
      --radius-pill: 999px;
      /* 字体 */
      --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      background-color: var(--bg-base) !important;
      color: var(--text-primary) !important;
      font-family: var(--font-sans);
      font-size: 13.5px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      letter-spacing: -0.011em;
    }

    ::selection {
      background: rgba(79, 70, 229, 0.16);
      color: inherit;
    }

    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 999px;
      border: 2.5px solid var(--bg-base);
    }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

    :focus-visible {
      outline: none;
      box-shadow: var(--shadow-focus);
      border-radius: var(--radius-sm);
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    /* Tab 切换：卡片级错峰入场 (v-show display 翻转时动画自动重播) */
    .page-body > .row-cards > [class*="col"],
    .page-body > .card { animation: cardIn 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
    .page-body > .row-cards > [class*="col"]:nth-child(2) { animation-delay: 40ms; }
    .page-body > .row-cards > [class*="col"]:nth-child(3) { animation-delay: 80ms; }
    .page-body > .row-cards > [class*="col"]:nth-child(4) { animation-delay: 120ms; }
    .page-body > .row-cards > [class*="col"]:nth-child(5) { animation-delay: 160ms; }
    .page-body > .row-cards > [class*="col"]:nth-child(6) { animation-delay: 200ms; }
    .page-body > .row-cards > [class*="col"]:nth-child(7) { animation-delay: 240ms; }
    .page-body > .row-cards > [class*="col"]:nth-child(8) { animation-delay: 280ms; }
    @keyframes cardIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: none; }
    }
    /* Tabbar 激活图标弹跳 */
    .mobile-tabbar .tab-item.active i { animation: tabPop 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
    @keyframes tabPop {
      0% { transform: translateY(0) scale(0.8); }
      55% { transform: translateY(-2px) scale(1.15); }
      100% { transform: translateY(-1px) scale(1); }
    }

    /* 等宽与数据展示字体 */
    .mono-num {
      font-family: var(--font-mono) !important;
      font-variant-numeric: tabular-nums !important;
      letter-spacing: -0.02em !important;
    }

    /* 顶栏 Header：毛玻璃 + 品牌渐变底线 + 56px 高度 */
    .navbar {
      height: 56px !important;
      min-height: 56px !important;
      max-height: 56px !important;
      background: rgba(255, 255, 255, 0.82) !important;
      backdrop-filter: blur(18px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
      border-bottom: 1px solid var(--border-subtle) !important;
      padding: 0 1.25rem !important;
      z-index: 1020;
    }
    .navbar::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.25) 30%, rgba(124, 58, 237, 0.25) 70%, transparent);
      pointer-events: none;
    }

    .navbar-brand-title {
      font-size: 14.5px !important;
      font-weight: 650 !important;
      letter-spacing: -0.02em;
      color: var(--text-primary) !important;
    }

    .site-title {
      font-size: 14.5px;
      font-weight: 700;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

    .navbar-brand { white-space: nowrap; }

    /* 导航区溢出时允许横向滚动而非换行 */
    .desktop-nav {
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .desktop-nav::-webkit-scrollbar { display: none; }
    .desktop-nav .navbar-nav { flex-wrap: nowrap; }

    .brain-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 8px;
      background: var(--brand-grad);
      color: #ffffff;
      margin-right: 9px;
      box-shadow: 0 2px 8px -1px rgba(79, 70, 229, 0.4), inset 0 1px 0 rgba(255,255,255,0.22);
    }
    .brain-logo i {
      font-size: 17px;
    }

    .brand-badge {
      font-size: 10px !important;
      font-weight: 700 !important;
      padding: 1.5px 6px !important;
      border-radius: var(--radius-pill) !important;
      background: var(--accent-brand-light) !important;
      color: var(--accent-brand) !important;
      border: 1px solid #e0e7ff !important;
      letter-spacing: 0.02em;
    }

    /* 顶部导航 Tabs：胶囊式交互，active 为深色底 */
    .navbar-nav .nav-link {
      font-size: 13px !important;
      font-weight: 500 !important;
      padding: 0.4rem 0.8rem !important;
      border-radius: var(--radius-btn) !important;
      color: var(--text-secondary) !important;
      transition: all 0.16s ease !important;
      position: relative;
      white-space: nowrap;
    }
    .navbar-nav .nav-link:hover {
      color: var(--text-primary) !important;
      background-color: rgba(17, 24, 39, 0.05) !important;
    }
    .navbar-nav .nav-link:active {
      transform: scale(0.97);
    }
    .navbar-nav .nav-item.active .nav-link {
      color: #ffffff !important;
      background: #1f2937 !important;
      font-weight: 600 !important;
      box-shadow: 0 2px 6px rgba(17, 24, 39, 0.22) !important;
    }
    .navbar-nav .nav-item.active .nav-link .nav-count-pill {
      background: rgba(255, 255, 255, 0.22);
      box-shadow: none;
    }

    /* 卡片体系：分层 elevation、圆角升级、hover 抬升 */
    .card {
      background-color: var(--bg-surface) !important;
      border: 1px solid var(--border-subtle) !important;
      border-radius: var(--radius-card) !important;
      box-shadow: var(--shadow-sm) !important;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .card:hover {
      border-color: var(--border-strong) !important;
      box-shadow: var(--shadow-md) !important;
    }
    .card-header {
      background-color: transparent !important;
      border-bottom: 1px solid var(--border-subtle) !important;
      padding: 0.9rem 1.25rem !important;
    }
    .card-title {
      font-size: 13.5px !important;
      font-weight: 650 !important;
      color: var(--text-primary) !important;
      letter-spacing: -0.01em !important;
      margin: 0 !important;
      display: inline-flex;
      align-items: center;
    }
    .card-title i {
      font-size: 16px;
    }
    .card-body {
      padding: 1.25rem !important;
    }

    /* KPI 卡片：图标芯片 + 数值阶梯 + hover 品牌描边 */
    .kpi-card {
      padding: 1.1rem 1.2rem !important;
      position: relative;
      overflow: hidden;
      transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .kpi-card:hover {
      transform: translateY(-2px);
      border-color: var(--border-strong) !important;
      box-shadow: var(--shadow-md);
    }
    .kpi-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--accent-brand), #7c3aed, transparent);
      opacity: 0;
      transition: opacity 0.25s ease;
      pointer-events: none;
    }
    .kpi-card:hover::before { opacity: 1; }
    .kpi-label {
      font-size: 12px;
      font-weight: 550;
      color: var(--text-secondary);
      letter-spacing: 0.01em;
      margin-bottom: 0.5rem;
    }
    .kpi-label i {
      font-size: 15px;
      opacity: 0.75;
    }
    .kpi-value {
      font-size: 26px;
      font-weight: 750;
      line-height: 1.1;
      color: var(--text-primary);
      letter-spacing: -0.035em;
      font-variant-numeric: tabular-nums;
    }
    .kpi-sub {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-top: 0.45rem;
      display: flex;
      align-items: center;
      gap: 5px;
      line-height: 1.4;
    }

    /* 状态指示点与微型呼吸灯 */
    .status-pulse-green {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--success);
      box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55);
      animation: pulse-green 2s infinite cubic-bezier(0.66, 0, 0, 1);
      margin-right: 6px;
      vertical-align: middle;
      flex-shrink: 0;
    }
    @keyframes pulse-green {
      0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.55); }
      70% { box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
      100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
    }

    .status-dot-amber {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--warning);
      margin-right: 6px;
      vertical-align: middle;
      flex-shrink: 0;
    }
    .status-dot-red {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--danger);
      margin-right: 6px;
      vertical-align: middle;
      flex-shrink: 0;
    }

    /* 状态徽章：dot + 语义色板（soft 底 + 描边） */
    .status-badge-dot {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11.5px;
      font-weight: 550;
      padding: 2.5px 9px;
      border-radius: var(--radius-pill);
      line-height: 1.3;
      white-space: nowrap;
    }
    .status-badge-dot .dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .status-badge-dot.signed {
      background: var(--success-soft);
      color: #047857;
      border: 1px solid var(--success-border);
    }
    .status-badge-dot.signed .dot { background: var(--success); }
    .status-badge-dot.transit {
      background: var(--warning-soft);
      color: #b45309;
      border: 1px solid var(--warning-border);
    }
    .status-badge-dot.transit .dot { background: var(--warning); }
    .status-badge-dot.pending {
      background: var(--bg-subtle);
      color: var(--text-secondary);
      border: 1px solid var(--border-subtle);
    }
    .status-badge-dot.pending .dot { background: var(--text-muted); }

    /* 业务场景标签：语义化双色 */
    .tag-scene {
      display: inline-block;
      font-size: 11px;
      font-weight: 550;
      padding: 1.5px 8px;
      border-radius: var(--radius-sm);
      line-height: 1.45;
      letter-spacing: 0.01em;
    }
    .tag-scene.install {
      background: var(--info-soft);
      color: #1d4ed8;
      border: 1px solid var(--info-border);
    }
    .tag-scene.withdraw {
      background: var(--bg-subtle);
      color: var(--text-secondary);
      border: 1px solid var(--border-subtle);
    }

    /* 表格控制栏 */
    .table-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 0.8rem 1.25rem;
      border-bottom: 1px solid var(--border-subtle);
    }

    /* 快捷过滤切片：分段控件 */
    .filter-pill-group {
      display: inline-flex;
      align-items: center;
      background: var(--bg-subtle);
      padding: 3px;
      border-radius: var(--radius-btn);
      border: 1px solid var(--border-subtle);
      gap: 2px;
    }
    .filter-pill-btn {
      border: none;
      background: transparent;
      padding: 4px 11px;
      border-radius: 6px;
      font-size: 11.5px;
      font-weight: 500;
      color: var(--text-secondary);
      cursor: pointer;
      transition: all 0.14s ease;
      display: flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }
    .filter-pill-btn:hover {
      color: var(--text-primary);
    }
    .filter-pill-btn.active {
      background: var(--bg-surface);
      color: var(--text-primary);
      font-weight: 650;
      box-shadow: 0 1px 3px rgba(17, 24, 39, 0.1), 0 0 0 1px rgba(17, 24, 39, 0.04);
    }
    .filter-pill-btn .count {
      font-size: 10.5px;
      padding: 0 5px;
      border-radius: var(--radius-pill);
      background: var(--border-subtle);
      color: var(--text-secondary);
      font-variant-numeric: tabular-nums;
      line-height: 1.6;
    }
    .filter-pill-btn.active .count {
      background: var(--accent-brand-light);
      color: var(--accent-brand);
    }

    /* 搜索框：聚焦环 + kbd 提示 */
    .search-input-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .search-input-wrap i.search-icon {
      position: absolute;
      left: 10px;
      color: var(--text-muted);
      font-size: 14px;
      pointer-events: none;
      transition: color 0.15s ease;
    }
    .search-input-wrap .form-control {
      padding-left: 30px !important;
      padding-right: 32px !important;
      height: 32px !important;
      font-size: 12.5px !important;
      border: 1px solid var(--border-strong) !important;
      border-radius: var(--radius-btn) !important;
      background: var(--bg-surface) !important;
      box-shadow: var(--shadow-xs) !important;
      transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    }
    .search-input-wrap .form-control:hover {
      border-color: #9ca3af !important;
    }
    .search-input-wrap .form-control:focus {
      border-color: var(--accent-brand) !important;
      box-shadow: var(--shadow-focus) !important;
    }
    .search-input-wrap .form-control:focus ~ i.search-icon,
    .search-input-wrap:focus-within i.search-icon {
      color: var(--accent-brand);
    }
    .search-kbd {
      position: absolute;
      right: 8px;
      font-size: 10px;
      font-family: var(--font-mono);
      padding: 1px 5px;
      border-radius: 4px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-bottom-width: 2px;
      color: var(--text-secondary);
      pointer-events: none;
      line-height: 1.3;
    }

    /* 数据表格：粘性表头 + 行悬浮 + 斑马微层 */
    .wf-table {
      margin-bottom: 0 !important;
    }
    .wf-table th {
      background: var(--bg-subtle) !important;
      color: var(--text-secondary) !important;
      font-size: 11.5px !important;
      font-weight: 600 !important;
      text-transform: none !important;
      letter-spacing: 0.03em !important;
      padding: 0.65rem 1rem !important;
      border-bottom: 1px solid var(--border-subtle) !important;
      white-space: nowrap;
      position: sticky;
      top: 0;
      z-index: 5;
    }
    .wf-table td {
      padding: 0.8rem 1rem !important;
      font-size: 12.5px !important;
      color: var(--text-primary) !important;
      border-bottom: 1px solid var(--bg-subtle) !important;
      vertical-align: middle !important;
    }
    .wf-table tbody tr {
      transition: background-color 0.14s ease;
    }
    .wf-table tbody tr:hover td {
      background-color: var(--bg-hover) !important;
    }
    .wf-table tbody tr:last-child td {
      border-bottom: none !important;
    }

    /* 运单单号微交互：品牌色链接感 */
    .waybill-link {
      font-weight: 600;
      color: var(--text-primary);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 0.14s ease;
      border-bottom: 1px dashed transparent;
    }
    .waybill-link:hover {
      color: var(--accent-brand);
      border-bottom-color: var(--accent-brand);
    }

    /* 行内操作按钮 */
    .action-btn-subtle {
      border: 1px solid var(--border-subtle);
      background: var(--bg-surface);
      color: var(--text-secondary);
      padding: 3px 10px;
      border-radius: var(--radius-sm);
      font-size: 12px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.14s ease;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: var(--shadow-xs);
    }
    .action-btn-subtle:hover {
      background: var(--accent-brand-light);
      border-color: #c7d2fe;
      color: var(--accent-brand);
      box-shadow: var(--shadow-xs);
    }

    /* 图表卡片质感 */
    .chart-card .card-header {
      padding: 0.85rem 1.25rem !important;
    }

    /* 轨迹时间线：品牌化节点 */
    .track-timeline {
      list-style: none;
      margin: 0;
      padding: 0.25rem 0 0.25rem 6px;
      position: relative;
    }
    .track-timeline li {
      position: relative;
      padding: 0 0 1.15rem 26px;
    }
    .track-timeline li::before {
      content: '';
      position: absolute;
      left: 7px;
      top: 17px;
      bottom: -2px;
      width: 2px;
      background: var(--border-subtle);
    }
    .track-timeline li:last-child::before {
      display: none;
    }
    .tl-dot {
      position: absolute;
      left: 2px;
      top: 4px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--bg-surface);
      border: 2px solid var(--border-strong);
      z-index: 1;
    }
    .tl-dot.is-latest {
      border-color: var(--success);
      background: var(--success);
      box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.16);
    }
    .tl-time {
      font-size: 11.5px;
      color: var(--text-muted);
      margin-bottom: 2px;
      font-variant-numeric: tabular-nums;
    }
    .tl-text {
      color: var(--text-secondary);
      font-size: 13px;
      line-height: 1.5;
    }
    .track-timeline li.is-latest .tl-text {
      color: var(--text-primary);
      font-weight: 600;
    }

    /* 售后微服务说明条 Callout */
    .callout-clean {
      background: linear-gradient(to right, var(--info-soft), var(--bg-surface) 40%);
      border-left: 3px solid var(--accent-brand);
      border-radius: var(--radius-btn);
      padding: 13px 17px;
      border-top: 1px solid var(--border-subtle);
      border-right: 1px solid var(--border-subtle);
      border-bottom: 1px solid var(--border-subtle);
      box-shadow: var(--shadow-xs);
    }

    /* 售后 SOP 列表项 */
    .aftersales-list-item {
      padding: 11px 15px;
      background: var(--bg-subtle);
      border-radius: var(--radius-btn);
      border: 1px solid transparent;
      font-size: 12.5px;
      display: flex;
      align-items: center;
      transition: all 0.16s ease;
    }
    .aftersales-list-item:hover {
      background: var(--bg-surface);
      border-color: var(--border-strong);
      box-shadow: var(--shadow-sm);
      transform: translateX(2px);
    }

    /* 消息条目 */
    .msg-item {
      padding: 12px 16px !important;
      border-bottom: 1px solid var(--bg-subtle) !important;
      transition: background-color 0.14s ease;
    }
    .msg-item:hover {
      background-color: var(--bg-hover) !important;
    }
    .msg-bubble-modern {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 2px 10px 10px 10px;
      padding: 8px 12px;
      font-size: 12.5px;
      line-height: 1.55;
      color: var(--text-primary);
      margin-top: 5px;
    }

    /* 移动端悬浮导航：毛玻璃 + 激活胶囊指示 */
    .mobile-tabbar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1030;
      background: rgba(255, 255, 255, 0.94) !important;
      backdrop-filter: blur(20px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
      border-top: 1px solid var(--border-subtle) !important;
      display: flex;
      justify-content: flex-start;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      height: 58px;
      padding-bottom: env(safe-area-inset-bottom);
      box-shadow: 0 -4px 20px rgba(17, 24, 39, 0.05);
    }
    .mobile-tabbar::-webkit-scrollbar {
      display: none;
    }
    .mobile-tabbar .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      text-decoration: none;
      flex: 0 0 14.28%;
      min-width: 58px;
      height: 100%;
      position: relative;
      transition: color 0.15s ease;
    }
    .mobile-tabbar .tab-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: 22px;
      height: 3px;
      border-radius: 0 0 3px 3px;
      background: var(--accent-brand);
      transition: transform 0.2s ease;
    }
    .mobile-tabbar .tab-item i {
      font-size: 19px;
      margin-bottom: 1px;
      line-height: 1;
      transition: transform 0.18s ease;
    }
    .mobile-tabbar .tab-item span {
      font-size: 10.5px;
      font-weight: 500;
      line-height: 1.1;
      margin-top: 3px;
    }
    .mobile-tabbar .tab-item.active {
      color: var(--accent-brand) !important;
      font-weight: 650;
    }
    .mobile-tabbar .tab-item.active::before {
      transform: translateX(-50%) scaleX(1);
    }
    .mobile-tabbar .tab-item.active i {
      transform: translateY(-1px);
    }
    .mobile-tabbar .tab-item:active i {
      transform: scale(0.88);
    }

    @media (min-width: 992px) {
      .mobile-tabbar { display: none !important; }
      .mobile-card-view { display: none !important; }
      .desktop-table-view { display: block !important; }
      .desktop-nav { display: flex !important; }
      .page-wrapper { padding: 1.25rem 0 3rem 0; }
    }
    @media (max-width: 991.98px) {
      .page-wrapper { padding: 0.75rem 0 calc(58px + env(safe-area-inset-bottom, 0px) + 12px) 0; }
      .desktop-nav { display: none !important; }
      .desktop-table-view { display: none !important; }
      .mobile-card-view { display: block !important; }
      /* 末位元素去底距，消除底部多余空白 */
      .page-body { margin-bottom: 0 !important; }
      .page-body > .container-xl > :last-child { margin-bottom: 0 !important; }
      .page-body > .container-xl > :last-child > [class*="col"] { margin-bottom: 0 !important; }
      .page-body > .container-xl > :last-child .card { margin-bottom: 0 !important; }
    }

    /* 深色模式：高对比炭黑体系（令牌驱动，全组件覆盖） */
    .theme-dark {
      --bg-base: #0a0b0e;
      --bg-surface: #12141a;
      --bg-subtle: #1a1d24;
      --bg-hover: #1f232c;
      --border-subtle: #262a33;
      --border-strong: #363c48;
      --text-primary: #f3f4f6;
      --text-secondary: #9ca3af;
      --text-muted: #6b7280;
      --accent-brand: #818cf8;
      --accent-brand-hover: #6366f1;
      --accent-brand-light: rgba(99, 102, 241, 0.14);
      --success-soft: rgba(5, 150, 105, 0.14); --success-border: rgba(5, 150, 105, 0.3); --success: #34d399;
      --warning-soft: rgba(217, 119, 6, 0.14); --warning-border: rgba(217, 119, 6, 0.3); --warning: #fbbf24;
      --danger-soft: rgba(220, 38, 38, 0.14);  --danger-border: rgba(220, 38, 38, 0.3);  --danger: #f87171;
      --info-soft: rgba(59, 130, 246, 0.14);   --info-border: rgba(59, 130, 246, 0.3);   --info: #60a5fa;
      --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
      --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.22);
    }
    body.theme-dark {
      background-color: var(--bg-base) !important;
      color: var(--text-primary) !important;
    }
    .theme-dark .navbar {
      background: rgba(18, 20, 26, 0.82) !important;
      border-bottom-color: var(--border-subtle) !important;
    }
    .theme-dark .navbar::after {
      background: linear-gradient(90deg, transparent, rgba(129, 140, 248, 0.3) 30%, rgba(167, 139, 250, 0.3) 70%, transparent);
    }
    .theme-dark .card {
      background-color: var(--bg-surface) !important;
      border-color: var(--border-subtle) !important;
    }
    .theme-dark .card-header {
      border-bottom-color: var(--border-subtle) !important;
    }
    .theme-dark .navbar-nav .nav-link:hover {
      background-color: rgba(255, 255, 255, 0.06) !important;
    }
    .theme-dark .navbar-nav .nav-item.active .nav-link {
      background: #e5e7eb !important;
      color: #111827 !important;
    }
    .theme-dark .navbar-nav .nav-item.active .nav-link .nav-count-pill {
      background: rgba(17, 24, 39, 0.14);
    }
    .theme-dark .wf-table th {
      background: var(--bg-subtle) !important;
      color: var(--text-secondary) !important;
      border-bottom-color: var(--border-subtle) !important;
    }
    .theme-dark .wf-table td {
      border-bottom-color: var(--bg-subtle) !important;
      color: var(--text-primary) !important;
    }
    .theme-dark .wf-table tbody tr:hover td {
      background-color: var(--bg-hover) !important;
    }
    .theme-dark .filter-pill-group {
      background: var(--bg-subtle);
      border-color: var(--border-subtle);
    }
    .theme-dark .filter-pill-btn {
      color: var(--text-secondary);
    }
    .theme-dark .filter-pill-btn.active {
      background: var(--bg-hover);
      color: var(--text-primary);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    .theme-dark .filter-pill-btn .count {
      background: var(--border-subtle);
      color: var(--text-secondary);
    }
    .theme-dark .filter-pill-btn.active .count {
      background: var(--accent-brand-light);
      color: var(--accent-brand);
    }
    .theme-dark .search-input-wrap .form-control {
      background: var(--bg-subtle) !important;
      border-color: var(--border-strong) !important;
      color: var(--text-primary) !important;
    }
    .theme-dark .search-input-wrap .form-control:hover {
      border-color: #4b5563 !important;
    }
    .theme-dark .search-kbd {
      background: var(--bg-hover);
      border-color: var(--border-strong);
      color: var(--text-secondary);
    }
    .theme-dark .waybill-link {
      color: var(--text-primary);
    }
    .theme-dark .waybill-link:hover {
      color: var(--accent-brand);
      border-bottom-color: var(--accent-brand);
    }
    .theme-dark .action-btn-subtle {
      background: var(--bg-subtle);
      border-color: var(--border-subtle);
      color: var(--text-secondary);
    }
    .theme-dark .action-btn-subtle:hover {
      background: var(--accent-brand-light);
      border-color: rgba(129, 140, 248, 0.4);
      color: var(--accent-brand);
    }
    .theme-dark .mobile-tabbar {
      background: rgba(18, 20, 26, 0.9) !important;
      border-top-color: var(--border-subtle) !important;
      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    }
    .theme-dark .status-badge-dot.signed { color: #6ee7b7; }
    .theme-dark .status-badge-dot.transit { color: #fcd34d; }
    .theme-dark .status-badge-dot.pending { color: #9ca3af; }
    .theme-dark .tag-scene.install { color: #93c5fd; }
    .theme-dark .tag-scene.withdraw { color: var(--text-secondary); }
    .theme-dark .msg-bubble-modern {
      background: var(--bg-subtle);
      border-color: var(--border-subtle);
      color: var(--text-primary);
    }
    .theme-dark .callout-clean {
      background: linear-gradient(to right, var(--info-soft), var(--bg-surface) 40%);
      border-color: var(--border-subtle);
      border-left-color: var(--accent-brand);
    }
    .theme-dark .aftersales-list-item {
      background: var(--bg-subtle);
      border-color: transparent;
      color: var(--text-primary);
    }
    .theme-dark .aftersales-list-item:hover {
      background: var(--bg-hover);
      border-color: var(--border-strong);
    }
    .theme-dark .tl-dot {
      background: var(--bg-surface);
      border-color: var(--border-strong);
    }
    .theme-dark .modal-content {
      background: var(--bg-surface) !important;
      border-color: var(--border-subtle) !important;
      color: var(--text-primary) !important;
    }
    .theme-dark ::-webkit-scrollbar-thumb {
      background: #363c48;
      border-color: var(--bg-base);
    }
    .theme-dark ::selection {
      background: rgba(129, 140, 248, 0.28);
    }

    [v-cloak] { display: none; }

    /* 业务流转中枢步骤点阵 (12-Phase / 11-Phase) */
    .step-matrix {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 4px 7px;
      background: var(--bg-subtle);
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
    }
    .step-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--border-strong);
      display: inline-block;
      transition: transform 0.15s ease;
    }
    .step-dot:hover {
      transform: scale(1.45);
    }
    .step-dot.completed { background: var(--success); }
    .step-dot.failed { background: var(--danger); }
    .step-dot.blocked { background: var(--warning); }
    .step-dot.running { background: var(--info); animation: pulse 1.5s infinite; }
    .step-dot.pending { background: var(--border-strong); }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45); }
      50% { box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0); }
    }

    /* 渠道看板卡片网格 */
    .channel-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }
    .channel-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-card);
      padding: 15px 17px;
      transition: all 0.18s ease;
      cursor: pointer;
      position: relative;
      box-shadow: var(--shadow-xs);
    }
    .channel-card:hover {
      border-color: var(--accent-brand);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
    .channel-card.active {
      border-color: var(--accent-brand);
      background: var(--accent-brand-light);
      box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
    }

    /* 设备全息弹窗 */
    .device-holo-header {
      background: linear-gradient(135deg, var(--accent-brand-light), var(--success-soft));
      border-bottom: 1px solid var(--border-subtle);
      padding: 16px 20px;
    }
    .holo-badge-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
      gap: 8px;
    }
    .holo-badge-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-btn);
      padding: 9px 12px;
      transition: border-color 0.15s ease;
    }
    .holo-badge-card:hover { border-color: var(--border-strong); }
    .holo-badge-card .title {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 2px;
    }
    .holo-badge-card .value {
      font-size: 13px;
      font-weight: 650;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }

    /* ==========================================================================
       组件补齐层：原模板引用但从未定义的样式（全新构建）
       ========================================================================== */

    /* 导航角标：品牌渐变计数胶囊 */
    .nav-count-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 18px;
      height: 18px;
      padding: 0 6px;
      margin-left: 5px;
      border-radius: var(--radius-pill);
      background: var(--brand-grad);
      color: #fff;
      font-size: 11px;
      font-weight: 650;
      line-height: 1;
      font-variant-numeric: tabular-nums;
      box-shadow: 0 1px 3px rgba(79, 70, 229, 0.35);
    }
    .theme-dark .nav-count-pill {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    /* 语义徽章染色板 badge-tint-* */
    .badge-tint-green {
      background: var(--success-soft);
      color: #047857;
      border: 1px solid var(--success-border);
    }
    .badge-tint-amber {
      background: var(--warning-soft);
      color: #b45309;
      border: 1px solid var(--warning-border);
    }
    .badge-tint-red {
      background: var(--danger-soft);
      color: #b91c1c;
      border: 1px solid var(--danger-border);
    }
    .badge-tint-blue {
      background: var(--info-soft);
      color: #1d4ed8;
      border: 1px solid var(--info-border);
    }
    .badge-tint-gray {
      background: var(--bg-subtle);
      color: var(--text-secondary);
      border: 1px solid var(--border-subtle);
    }
    .badge-tint-green, .badge-tint-amber, .badge-tint-red, .badge-tint-blue, .badge-tint-gray {
      font-weight: 550;
      font-size: 11px;
      padding: 2.5px 9px;
      border-radius: var(--radius-pill);
      white-space: nowrap;
    }
    .theme-dark .badge-tint-green { color: #6ee7b7; }
    .theme-dark .badge-tint-amber { color: #fcd34d; }
    .theme-dark .badge-tint-red { color: #fca5a5; }
    .theme-dark .badge-tint-blue { color: #93c5fd; }
    .theme-dark .badge-tint-gray { color: var(--text-secondary); }

    .badge-soft-blue {
      background: var(--info-soft);
      color: var(--info);
      border: none;
      font-weight: 550;
    }
    .badge-subtle-gray {
      background: var(--bg-subtle);
      color: var(--text-secondary);
      border: 1px solid var(--border-subtle);
      font-weight: 500;
    }

    /* 头像体系：渐变首字芯片 */
    .avatar, .msg-avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--brand-grad);
      color: #fff;
      font-size: 12px;
      font-weight: 650;
      flex-shrink: 0;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 1px 3px rgba(79, 70, 229, 0.25);
      user-select: none;
    }
    .avatar-sm { width: 24px; height: 24px; font-size: 10.5px; }
    .avatar-md { width: 34px; height: 34px; font-size: 13px; }
    .msg-avatar { width: 32px; height: 32px; }

    /* 数据总线：状态栅格（桌面 4 列 / 移动 2 列，dot + 文本横向排列） */
    .bus-status-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .bus-status-item {
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-btn);
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      transition: all 0.16s ease;
    }
    .bus-status-item:hover {
      background: var(--bg-surface);
      border-color: var(--border-strong);
      box-shadow: var(--shadow-sm);
    }
    .bus-status-item .bus-text { min-width: 0; }
    .bus-status-item .title {
      font-size: 12.5px;
      font-weight: 600;
      color: var(--text-primary);
      line-height: 1.3;
    }
    .bus-status-item .sub {
      font-size: 11px;
      color: var(--text-muted);
      white-space: nowrap;
      line-height: 1.45;
    }
    /* 蓝色脉动点：服务型组件（售后底座等） */
    .status-pulse-blue {
      display: inline-block;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background-color: var(--accent-brand);
      box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5);
      animation: pulse-blue 2s infinite cubic-bezier(0.66, 0, 0, 1);
      margin-right: 6px;
      vertical-align: middle;
      flex-shrink: 0;
    }
    @keyframes pulse-blue {
      0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.5); }
      70% { box-shadow: 0 0 0 6px rgba(37, 99, 235, 0); }
      100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
    }

    /* 状态点徽章 */
    .badge-status-dot {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-weight: 550;
      white-space: nowrap;
    }
    .badge-status-dot::before {
      content: "";
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      flex-shrink: 0;
    }

    /* 紧凑分页器 */
    .compact-pager {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: var(--text-secondary);
    }
    .compact-pager .btn,
    .compact-pager button {
      min-width: 28px;
      height: 28px;
      border-radius: var(--radius-sm);
      border: 1px solid var(--border-subtle);
      background: var(--bg-surface);
      color: var(--text-secondary);
      font-size: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.14s ease;
      cursor: pointer;
    }
    .compact-pager .btn:hover,
    .compact-pager button:hover {
      border-color: var(--accent-brand);
      color: var(--accent-brand);
      background: var(--accent-brand-light);
    }

    /* 物流轨迹弹窗摘要 */
    .track-summary {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 12px 16px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-btn);
      margin-bottom: 14px;
    }
    .track-summary-state {
      font-weight: 650;
      color: var(--text-primary);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .track-summary-latest {
      font-size: 12px;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .track-modal-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--accent-brand-light);
      color: var(--accent-brand);
      font-size: 19px;
      flex-shrink: 0;
    }
    .tl-content { min-width: 0; }
    .progress-sm { height: 6px; border-radius: var(--radius-pill); }
    .progress {
      background: var(--bg-subtle);
      border-radius: var(--radius-pill);
      overflow: hidden;
    }

    /* 页头：每个业务模块的标题层级 */
    .page-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 1.1rem;
    }
    .page-head .ph-title {
      font-size: 19px;
      font-weight: 750;
      letter-spacing: -0.02em;
      color: var(--text-primary);
      line-height: 1.25;
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
    }
    .page-head .ph-title i {
      font-size: 20px;
      color: var(--accent-brand);
    }
    .page-head .ph-desc {
      font-size: 12.5px;
      color: var(--text-muted);
      margin-top: 3px;
      line-height: 1.5;
    }

    /* 图表加载态：shimmer 占位 */
    #chart-sales-trend:empty,
    #chart-category-pie:empty,
    /* 落地流程全景：阶梯漏斗（纯 CSS，自适应移动端，含逐级转化率） */
    .funnel-wrap { display: flex; flex-direction: column; padding: 2px 0; }
    .funnel-stage { display: flex; flex-direction: column; gap: 6px; }
    .funnel-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
    .funnel-name {
      font-size: 12.5px; font-weight: 600; color: var(--text-primary);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .funnel-count { font-size: 12.5px; font-weight: 650; color: var(--text-secondary); flex-shrink: 0; }
    .funnel-bar {
      height: 24px;
      border-radius: 6px;
      min-width: 10%;
      box-shadow: inset 0 -8px 14px rgba(0, 0, 0, 0.08);
      transform-origin: left center;
      animation: funnelGrow 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
      transition: filter 0.15s ease;
    }
    .funnel-bar:hover { filter: brightness(1.07); }
    @keyframes funnelGrow { from { transform: scaleX(0); } }
    .funnel-conv {
      display: flex;
      align-items: center;
      gap: 5px;
      margin: 5px 0 9px 2px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .funnel-conv .conv-pill {
      background: var(--bg-subtle);
      border-radius: 99px;
      padding: 1px 8px;
      font-variant-numeric: tabular-nums;
    }
    .theme-dark .funnel-conv .conv-pill { background: var(--bg-hover); }

    #chart-funnel:empty,
    #chart-device-status:empty {
      position: relative;
      min-height: 220px;
      background: linear-gradient(100deg, var(--bg-subtle) 40%, var(--bg-surface) 50%, var(--bg-subtle) 60%);
      background-size: 200% 100%;
      animation: chart-shimmer 1.4s infinite linear;
      border-radius: var(--radius-btn);
    }
    @keyframes chart-shimmer {
      0% { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }

    /* 空状态 */
    .empty-state {
      text-align: center;
      padding: 2.5rem 1rem;
      color: var(--text-muted);
    }
    .empty-state i {
      font-size: 34px;
      opacity: 0.4;
      margin-bottom: 8px;
      display: block;
    }

    /* ==========================================================================
       控制台布局层：左侧边栏 + 主工作区（桌面端）
       ========================================================================== */
    .app-shell {
      display: flex;
      min-height: 100vh;
    }
    .side-nav {
      width: 224px;
      flex-shrink: 0;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      z-index: 1025;
      display: flex;
      flex-direction: column;
      background: var(--bg-surface);
      border-right: 1px solid var(--border-subtle);
      padding: 14px 10px 12px;
    }
    .side-brand {
      display: flex;
      align-items: center;
      padding: 4px 10px 16px;
      border-bottom: 1px solid var(--bg-subtle);
      margin-bottom: 10px;
    }
    .side-nav-group-label {
      font-size: 10.5px;
      font-weight: 650;
      letter-spacing: 0.06em;
      color: var(--text-muted);
      padding: 8px 12px 5px;
      user-select: none;
    }
    .side-nav .navbar-nav {
      display: flex;
      flex-direction: column;
      gap: 2px;
      width: 100%;
    }
    .side-nav .nav-item { width: 100%; }
    .side-nav .nav-link {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 0.5rem 0.75rem !important;
      border-radius: var(--radius-btn) !important;
      font-size: 13px !important;
      font-weight: 500 !important;
      color: var(--text-secondary) !important;
      transition: all 0.15s ease !important;
      position: relative;
      white-space: nowrap;
    }
    .side-nav .nav-link i {
      font-size: 17px;
      margin-right: 9px;
      width: 20px;
      text-align: center;
      opacity: 0.85;
    }
    .side-nav .nav-link:hover {
      color: var(--text-primary) !important;
      background: var(--bg-subtle) !important;
    }
    .side-nav .nav-link:active { transform: scale(0.98); }
    .side-nav .nav-item.active .nav-link {
      background: var(--accent-brand-light) !important;
      color: var(--accent-brand) !important;
      font-weight: 650 !important;
      box-shadow: none !important;
    }
    .side-nav .nav-item.active .nav-link::before {
      content: "";
      position: absolute;
      left: -10px;
      top: 20%;
      bottom: 20%;
      width: 3px;
      border-radius: 0 3px 3px 0;
      background: var(--accent-brand);
    }
    .side-nav .nav-item.active .nav-link i { opacity: 1; }
    .side-nav .nav-count-pill { margin-left: auto; }
    .side-nav-footer {
      margin-top: auto;
      padding: 10px 12px 2px;
      border-top: 1px solid var(--bg-subtle);
      font-size: 11px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    /* 主工作区列 */
    .main-col {
      flex: 1;
      min-width: 0;
      margin-left: 224px;
      display: flex;
      flex-direction: column;
    }
    /* 顶栏降为内容工具栏：透明融入背景 */
    .app-shell .navbar {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-bottom: none !important;
      height: 52px !important;
      min-height: 52px !important;
      padding: 0 1.5rem !important;
    }
    .app-shell .navbar::after { display: none; }
    .app-shell .navbar { transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
    /* 滚动后顶栏浮现毛玻璃，避免内容穿透 */
    body.is-scrolled .app-shell .navbar {
      background: rgba(255, 255, 255, 0.86) !important;
      backdrop-filter: blur(18px) saturate(180%) !important;
      -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
      border-bottom: 1px solid var(--border-subtle) !important;
      box-shadow: 0 6px 20px -10px rgba(17, 24, 39, 0.12);
    }
    body.theme-dark.is-scrolled .app-shell .navbar {
      background: rgba(18, 20, 26, 0.86) !important;
    }
    .topbar-crumb {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--text-muted);
      min-width: 0;
    }
    .topbar-crumb .crumb-root {
      color: var(--text-muted);
      font-weight: 500;
    }
    .topbar-crumb .crumb-sep { opacity: 0.5; }
    .topbar-crumb .crumb-current {
      color: var(--text-primary);
      font-weight: 650;
      font-size: 13.5px;
      white-space: nowrap;
    }

    /* 深色模式：边栏与顶栏 */
    .theme-dark .side-nav {
      background: var(--bg-surface);
      border-right-color: var(--border-subtle);
    }
    .theme-dark .side-brand { border-bottom-color: var(--bg-subtle); }
    .theme-dark .side-nav .nav-link:hover { background: var(--bg-subtle) !important; }
    .theme-dark .side-nav-footer { border-top-color: var(--bg-subtle); }

    /* 移动端：隐藏边栏，顶栏恢复毛玻璃与品牌 */
    @media (max-width: 991.98px) {
      .side-nav { display: none; }
      .main-col { margin-left: 0; }
      .app-shell .navbar {
        background: rgba(255, 255, 255, 0.88) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border-bottom: 1px solid var(--border-subtle) !important;
      }
      .theme-dark .app-shell .navbar {
        background: rgba(18, 20, 26, 0.9) !important;
      }
      .topbar-crumb { display: none; }
    }

    /* ==========================================================================
       移动端系统级精修 (≤767px)
       原则：指尖触摸目标 ≥34px、iOS 防聚焦缩放、排版节奏收紧、按压反馈替代悬停
       ========================================================================== */
    @media (max-width: 767.98px) {
      /* —— 全局触感与防缩放 —— */
      * { -webkit-tap-highlight-color: transparent; }
      html { -webkit-text-size-adjust: 100%; }
      input, textarea, select { font-size: 16px !important; } /* iOS <16px 聚焦自动放大页面 */
      .container-xl { padding-left: 12px !important; padding-right: 12px !important; }

      /* —— 页头排版节奏 —— */
      .page-head { margin-bottom: 0.85rem; }
      .page-head .ph-title { font-size: 17.5px; gap: 7px; }
      .page-head .ph-title i { font-size: 18px; }
      .page-head .ph-desc { font-size: 12px; margin-top: 2px; }

      /* —— 卡片栅格：紧凑间距 —— */
      .row-cards { --tblr-gutter-x: 0.625rem; --tblr-gutter-y: 0.625rem; }
      .row.g-3 { --tblr-gutter-x: 0.625rem !important; --tblr-gutter-y: 0.625rem !important; }
      .row-cards.mb-4, .row-cards.mb-3 { margin-bottom: 0.75rem !important; }
      .card { border-radius: 10px; }

      /* —— KPI 卡：紧凑 + 指尖按压反馈 —— */
      .kpi-card { padding: 0.8rem 0.9rem !important; }
      .kpi-card:hover { transform: none; box-shadow: var(--shadow-xs); border-color: var(--border-subtle) !important; }
      .kpi-card:active { transform: scale(0.975); transition-duration: 0.06s; border-color: var(--border-strong) !important; }
      .kpi-card::before { display: none; }
      .kpi-label { font-size: 11.5px; margin-bottom: 0.3rem; }
      .kpi-sub { font-size: 11px; margin-top: 0.3rem; }
      /* 移动端 KPI 数值：长数字自适应防溢出 */
      .kpi-value {
        font-size: 21px !important;
        overflow-wrap: anywhere;
        white-space: normal;
        line-height: 1.15;
        letter-spacing: -0.03em;
      }
      /* 长标识型数值（账号/编码）：缩小字号保证单行 */
      .kpi-value-id {
        font-size: 16px !important;
        white-space: nowrap !important;
        letter-spacing: -0.03em !important;
      }

      /* —— 表格工具栏：纵向堆叠，杜绝标题挤压竖排 —— */
      .table-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 0.7rem 0.875rem;
      }
      .table-toolbar > .d-flex {
        flex-wrap: wrap;
        gap: 8px;
      }
      .table-toolbar .card-title {
        white-space: nowrap;
        flex-shrink: 0;
        width: 100%;
        font-size: 13.5px;
      }
      .table-toolbar .filter-pill-group {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .table-toolbar .filter-pill-group::-webkit-scrollbar { display: none; }
      .table-toolbar .filter-pill-btn {
        flex: 1;
        justify-content: center;
        min-height: 32px;
        padding: 5px 10px;
      }
      .table-toolbar .search-input-wrap {
        flex: 1 1 auto;
        min-width: 0;
      }
      /* 搜索框：全宽 + 38px 触摸目标 */
      .table-toolbar .search-input-wrap .form-control,
      .search-input-wrap .form-control {
        width: 100% !important;
        height: 38px !important;
        border-radius: 10px !important;
      }
      .table-toolbar .btn-icon { width: 38px; height: 38px; flex-shrink: 0; }

      /* —— 移动端数据卡片精修 —— */
      .mobile-card-view { padding: 0.625rem !important; }
      .mobile-card-view .card { border-radius: 10px !important; }
      .mobile-card-view .card-body { padding: 0.75rem 0.875rem !important; }
      .status-badge-dot { font-size: 11px; white-space: nowrap; }

      /* —— 分页器：触摸目标 —— */
      .compact-pager { padding: 10px 14px; }
      .compact-pager .btn, .compact-pager button { min-height: 34px; }

      /* —— 消息流：气泡层级与节奏 —— */
      .msg-item { padding: 0.75rem 0.875rem; }
      .msg-avatar { width: 34px !important; height: 34px !important; font-size: 13px; }
      .msg-bubble-modern { font-size: 12.5px; line-height: 1.65; }

      /* —— 渠道卡：单列 + 按压反馈 —— */
      .channel-card-grid { grid-template-columns: 1fr; gap: 10px; }
      .channel-card { padding: 13px 15px; border-radius: 10px; }
      .channel-card:hover { transform: none; }
      .channel-card:active { transform: scale(0.985); transition-duration: 0.06s; }

      /* —— 图表卡：紧凑 header，绘图区让位 —— */
      .chart-card .card-header { padding: 0.7rem 0.875rem; }
      .chart-card .card-body { padding: 0.5rem 0.375rem 0.75rem; }
      .chart-card .card-title { font-size: 13.5px; }

      /* —— 售后页 —— */
      .callout-clean { padding: 11px 14px; border-radius: 10px; }
      .aftersales-list-item { padding: 10px 12px; }

      /* —— 数据总线状态栅格：2×2 紧凑布局 —— */
      .bus-status-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
      .bus-status-item { padding: 9px 11px; }
      .bus-status-item .title { font-size: 12px; }
      .bus-status-item .sub { font-size: 10.5px; letter-spacing: -0.01em; }

      /* —— 模态框：底部安全区 —— */
      .modal-footer, .modal-body { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }

      /* —— 空态 —— */
      .mobile-card-view .py-4 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
    }

    /* 触摸设备全局禁用悬停位移（杜绝粘性 hover 残留态） */
    @media (hover: none) {
      .kpi-card:hover, .channel-card:hover, .aftersales-list-item:hover { transform: none; }
      .msg-item:hover { background: transparent; }
    }
    /* 长标识型数值通用字号（桌面端） */
    .kpi-value-id {
      font-size: 20px;
      letter-spacing: -0.02em;
      white-space: nowrap;
    }

  
    /* ==========================================================================
       深度工业级优化 (Seline / Stripe / Linear 风格深度融合)
       1. 明暗双主题严格合规与高对比度微阴影
       2. 运单行内微流向胶囊与快捷复制体验
       3. 步骤点阵流线型光斑微交互与防挤压排版
       4. 渠道责任制卡片悬浮升起与三色平滑进度条
       ========================================================================== */

    /* 暗色主题深度修复：彻底杜绝白底孤岛与文字灰度过低 */
    .theme-dark {
      --bg-base: #090a0d !important;
      --bg-surface: #111318 !important;
      --bg-subtle: #181b22 !important;
      --bg-hover: #1f232c !important;
      --border-subtle: #232731 !important;
      --border-strong: #323846 !important;
      --text-primary: #f1f5f9 !important;
      --text-secondary: #94a3b8 !important;
      --text-muted: #64748b !important;

      --accent-brand: #3b82f6 !important;
      --accent-brand-subtle: rgba(59, 130, 246, 0.12) !important;
      --accent-brand-border: rgba(59, 130, 246, 0.3) !important;

      --status-emerald-bg: rgba(5, 150, 105, 0.15) !important;
      --status-emerald-border: rgba(5, 150, 105, 0.35) !important;
      --status-emerald: #34d399 !important;

      --status-amber-bg: rgba(217, 119, 6, 0.15) !important;
      --status-amber-border: rgba(217, 119, 6, 0.35) !important;
      --status-amber: #fbbf24 !important;

      --status-rose-bg: rgba(225, 29, 72, 0.15) !important;
      --status-rose-border: rgba(225, 29, 72, 0.35) !important;
      --status-rose: #fb7185 !important;

      --status-slate-bg: rgba(100, 116, 139, 0.15) !important;
      --status-slate-border: rgba(100, 116, 139, 0.3) !important;
      --status-slate: #94a3b8 !important;
    }

    .theme-dark body, body.theme-dark {
      background-color: var(--bg-base) !important;
      color: var(--text-primary) !important;
    }

    .theme-dark .navbar {
      background: rgba(17, 19, 24, 0.88) !important;
      border-bottom-color: var(--border-subtle) !important;
    }

    .theme-dark .card, 
    .theme-dark .kpi-card, 
    .theme-dark .channel-card, 
    .theme-dark .aftersales-list-item {
      background-color: var(--bg-surface) !important;
      border-color: var(--border-subtle) !important;
      color: var(--text-primary) !important;
    }

    /* 修复左侧导航在暗黑模式下的纯白突兀 */
    .theme-dark .navbar-nav .nav-item.active .nav-link {
      background: rgba(59, 130, 246, 0.16) !important;
      color: #60a5fa !important;
      border: 1px solid rgba(59, 130, 246, 0.3) !important;
    }

    .theme-dark .navbar-nav .nav-link {
      color: var(--text-secondary) !important;
    }
    .theme-dark .navbar-nav .nav-link:hover {
      background: var(--bg-subtle) !important;
      color: var(--text-primary) !important;
    }

    .theme-dark .table-toolbar, 
    .theme-dark .table-pagination-footer {
      background-color: var(--bg-surface) !important;
      border-color: var(--border-subtle) !important;
    }

    .theme-dark .card-table thead th {
      background: var(--bg-subtle) !important;
      color: var(--text-secondary) !important;
      border-bottom-color: var(--border-subtle) !important;
    }

    .theme-dark .card-table tbody td {
      border-bottom-color: var(--border-subtle) !important;
      color: var(--text-primary) !important;
    }

    .theme-dark .card-table tbody tr:hover td {
      background-color: var(--bg-hover) !important;
    }

    .theme-dark .page-btn {
      background-color: var(--bg-surface) !important;
      border-color: var(--border-subtle) !important;
      color: var(--text-secondary) !important;
    }
    .theme-dark .page-btn:hover:not(:disabled) {
      background-color: var(--bg-hover) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-strong) !important;
    }
    .theme-dark .page-btn.active {
      background-color: var(--accent-brand) !important;
      color: #ffffff !important;
      border-color: var(--accent-brand) !important;
    }

    .theme-dark .tag-channel, .theme-dark .pagination-size-select {
      background-color: var(--bg-subtle) !important;
      border-color: var(--border-subtle) !important;
      color: var(--text-primary) !important;
    }

    /* 快捷复制与 Toast 浮层 */
    .copy-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      padding: 1px 5px;
      border-radius: 4px;
      transition: background 0.15s;
    }
    .copy-chip:hover {
      background: rgba(59, 130, 246, 0.1);
      color: var(--accent-brand);
    }
    .copy-chip .copy-icon {
      font-size: 11px;
      opacity: 0.5;
      transition: opacity 0.15s;
    }
    .copy-chip:hover .copy-icon {
      opacity: 1;
    }

    /* 现代运单行内履约节点微胶囊 (Stripe 风格) */
    .waybill-route-flow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      color: var(--text-secondary);
      max-width: 380px;
    }
    .waybill-route-hub {
      font-weight: 500;
      color: var(--text-primary);
      padding: 1px 6px;
      background: var(--bg-subtle);
      border: 1px solid var(--border-subtle);
      border-radius: 4px;
      font-size: 11px;
    }

    /* 渠道卡片现代强化 (Seline / Stripe 微卡片升起) */
    .channel-card-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 0.85rem;
    }
    .channel-card {
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-card);
      padding: 0.9rem 1.1rem;
      cursor: pointer;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
      box-shadow: var(--shadow-card);
    }
    .channel-card:hover {
      transform: translateY(-2px);
      border-color: var(--accent-brand-border);
      box-shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.08);
    }
    .channel-card.active {
      border-color: var(--accent-brand);
      box-shadow: 0 0 0 2px var(--accent-brand-subtle);
      background: var(--bg-surface);
    }

    /* 业务流转中枢步骤点阵 (Linear 紧凑对齐，杜绝错位) */
    .step-dots-container {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 3px 0;
    }
    .step-dot-item {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      flex-shrink: 0;
      transition: transform 0.15s;
      cursor: help;
      position: relative;
    }
    .step-dot-item:hover {
      transform: scale(1.4);
    }
    .step-dot-item.done {
      background-color: var(--status-emerald);
      box-shadow: 0 0 0 1px var(--status-emerald-border);
    }
    .step-dot-item.active {
      background-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
      animation: pulse-active-dot 1.8s infinite;
    }
    .step-dot-item.blocked {
      background-color: #e11d48;
      box-shadow: 0 0 0 2px rgba(225, 29, 72, 0.3);
    }
    .step-dot-item.pending {
      background-color: var(--border-strong);
      opacity: 0.6;
    }

    @keyframes pulse-active-dot {
      0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
      70% { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(59, 130, 246, 0); }
      100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
    }

    /* 轻量 Toast 反馈 */
    .sys-toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      z-index: 2050;
      background: rgba(15, 23, 42, 0.92);
      color: #ffffff;
      padding: 8px 14px;
      border-radius: 8px;
      font-size: 12.5px;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25);
      backdrop-filter: blur(8px);
      animation: toast-in 0.2s ease-out;
    }
    @keyframes toast-in {
      from { transform: translateY(12px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

/* ==========================================================================
   v2.1 统一精修层 (2026-09-15)
   1. 补齐历史死代码组件：kpi-icon-wrap / skeleton / status-badge-dot 变体
   2. 设计语言升级：图标芯片 KPI、微标表头、侧栏精修、卡片层级
   ========================================================================== */

/* ---------- KPI 图标芯片：30px 圆角方块 + 语义染色 ---------- */
.kpi-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent-brand-subtle);
  border: 1px solid var(--accent-brand-border);
  color: var(--accent-brand);
  font-size: 15px;
  flex-shrink: 0;
}
.kpi-icon-wrap i { font-size: 15px; line-height: 1; }
.kpi-icon-wrap.is-emerald { background: var(--status-emerald-bg); border-color: var(--status-emerald-border); color: var(--status-emerald); }
.kpi-icon-wrap.is-amber   { background: var(--status-amber-bg);   border-color: var(--status-amber-border);   color: var(--status-amber); }
.kpi-icon-wrap.is-rose    { background: var(--status-rose-bg);    border-color: var(--status-rose-border);    color: var(--status-rose); }
.kpi-icon-wrap.is-slate   { background: var(--status-slate-bg);   border-color: var(--status-slate-border);   color: var(--status-slate); }

/* ---------- 骨架屏： shimmer 占位 ---------- */
.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, var(--bg-subtle) 40%, var(--bg-hover) 50%, var(--bg-subtle) 60%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s infinite linear;
}
.skeleton-text { border-radius: 4px; }
@keyframes skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---------- 状态徽章补齐变体：online / danger / offline ---------- */
.status-badge-dot.online {
  background: var(--success-soft);
  color: #047857;
  border: 1px solid var(--success-border);
}
.status-badge-dot.online .dot { background: var(--success); }
.status-badge-dot.danger {
  background: var(--danger-soft);
  color: #b91c1c;
  border: 1px solid var(--danger-border);
}
.status-badge-dot.danger .dot { background: var(--danger); }
.status-badge-dot.offline {
  background: var(--status-slate-bg);
  color: var(--text-secondary);
  border: 1px solid var(--status-slate-border);
}
.status-badge-dot.offline .dot { background: var(--status-slate); }
.theme-dark .status-badge-dot.online { color: #6ee7b7; }
.theme-dark .status-badge-dot.danger { color: #fca5a5; }

/* ---------- 表头微标：大写 + 宽字距，工业级数据表气质 ---------- */
.wf-table th {
  font-size: 10.5px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.055em !important;
  font-weight: 650 !important;
  color: var(--text-muted) !important;
}

/* ---------- 侧栏精修：分区标签大写化、导航项间距节奏 ---------- */
.side-nav-group-label {
  text-transform: uppercase;
  font-size: 10px !important;
  letter-spacing: 0.08em;
}
.side-nav .nav-link { font-weight: 500 !important; }
.side-nav .nav-item.active .nav-link {
  background: var(--accent-brand-light) !important;
  color: var(--accent-brand) !important;
}
.theme-dark .side-nav .nav-item.active .nav-link {
  background: var(--accent-brand-subtle) !important;
  color: var(--accent-brand) !important;
  border: none !important;
}

/* ---------- KPI 卡精修：顶部细描边改左侧语义色条（警告/危险卡常驻） ---------- */
.kpi-card.tone-danger { border-left: 3px solid var(--status-rose) !important; }
.kpi-card.tone-warning { border-left: 3px solid var(--status-amber) !important; }
.kpi-card.tone-success { border-left: 3px solid var(--status-emerald) !important; }
.kpi-card.tone-brand { border-left: 3px solid var(--accent-brand) !important; }

/* ---------- 卡片标题前置图标统一样式 ---------- */
.card-title > i { color: var(--accent-brand); opacity: 0.9; }

/* ---------- 渠道卡进度条：圆角平滑 ---------- */
.channel-card .progress { height: 5px; }

/* ---------- 页脚品牌区：版本徽标对齐 ---------- */
.brand-badge { letter-spacing: 0.04em; }


/* ---------- 固定布局表格：列宽严格按表头分配，杜绝内容撑破 ---------- */
.table-fixed {
  table-layout: fixed !important;
  width: 100% !important;
}
.table-fixed td, .table-fixed th {
  overflow: hidden;
}