/* ============================================================
   运营效率大脑 · 视觉收敛与克制层 (custom.css)
   基于俊哥 UI 设计法典重构：
   1. 默认收敛、克制、常规，信息密度优先；
   2. 杜绝重色块、大圆角、厚边框、强阴影、装饰性渐变与营销页式发光；
   3. 优先以位置、分组、轻微颜色、hover 与细分隔线表达层级；
   4. 辅助入口与按钮不抢视觉中心。
   ============================================================ */

/* ---------- 主题变量(亮色 · 极简冷静灰蓝) ---------- */
:root{
  --canvas:#f8f9fb;
  --surface-card:#ffffff;
  --surface-soft:#f1f3f7;
  --surface-cream:#eef1f6;
  --ink:#111827;
  --body:#374151;
  --muted:#6b7280;
  --muted-soft:#9ca3af;
  --hairline:#e5e7eb;
  --hairline-soft:#f3f4f6;
  --primary:#4f46e5;
  --primary-active:#4338ca;
  --primary-strong:#3730a3;
  --primary-soft:#4f46e512;
  --primary-grad:#4f46e5; /* 彻底去除渐变，采用克制纯色 */
  --success:#059669;
  --error:#dc2626;
  --danger:#dc2626;
  --danger-soft:#dc262614;
  --info:#2563eb;
  --info-soft:#2563eb14;
  --amber:#d97706;
  --shadow-sm:0 1px 2px #0000000a;
  --shadow-md:0 2px 6px #0000000f;
  --shadow-lift:0 4px 12px #00000014;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:10px;
}

/* ---------- 主题变量(暗色 · 深邃克制黑灰) ---------- */
:root[data-theme="dark"]{
  --canvas:#0b0c10;
  --surface-card:#13151b;
  --surface-soft:#1a1d26;
  --surface-cream:#222634;
  --ink:#f3f4f6;
  --body:#d1d5db;
  --muted:#9ca3af;
  --muted-soft:#6b7280;
  --hairline:#232734;
  --hairline-soft:#1b1e29;
  --primary:#6366f1;
  --primary-active:#818cf8;
  --primary-strong:#a5b4fc;
  --primary-soft:#6366f11a;
  --primary-grad:#6366f1;
  --success:#10b981;
  --error:#ef4444;
  --danger:#ef4444;
  --danger-soft:#ef44441a;
  --info:#3b82f6;
  --info-soft:#3b82f61a;
  --amber:#f59e0b;
  --shadow-sm:0 1px 2px #00000040;
  --shadow-md:0 2px 8px #00000050;
  --shadow-lift:0 4px 14px #00000060;
}

/* ---------- 基础背景 (去除1200px大径向发光) ---------- */
body{
  background:var(--canvas) !important;
  color:var(--body);
  transition:background .15s ease;
}

/* ---------- 顶栏 (保持清爽通透) ---------- */
.topbar{
  background:var(--surface-card) !important;
  border-bottom:1px solid var(--hairline) !important;
  box-shadow:var(--shadow-sm) !important;
}
.brand-mark{
  background:var(--primary) !important;
  color:#fff !important;
  border-radius:var(--radius-sm) !important;
  box-shadow:none !important;
}
.nav-item{
  border-radius:var(--radius-sm) !important;
  font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.nav-item:hover{background:var(--surface-soft);color:var(--ink)}
.nav-item.active{
  background:var(--primary-soft) !important;
  color:var(--primary) !important;
  font-weight:600;
  box-shadow:none !important;
}
.live-pill{
  background:var(--surface-soft) !important;
  color:var(--success) !important;
  border:1px solid color-mix(in srgb, var(--success) 20%, transparent);
}
.refresh-btn{
  border-radius:var(--radius-sm) !important;
  border:1px solid var(--hairline) !important;
  transition:background .15s ease, border-color .15s ease;
}
.refresh-btn:hover{
  background:var(--surface-soft) !important;
  border-color:var(--muted-soft) !important;
  transform:none !important;
  box-shadow:none !important;
}

/* ---------- KPI 卡片 (去除顶部渐变亮条与浮夸悬浮) ---------- */
.kpi-card{
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-lg) !important;
  background:var(--surface-card) !important;
  box-shadow:var(--shadow-sm) !important;
  transition:border-color .15s ease, box-shadow .15s ease;
  position:relative;
  overflow:hidden;
}
.kpi-card::before{
  display:none !important; /* 彻底去除顶部3px装饰亮条 */
}
.kpi-card:hover{
  transform:none !important; /* 杜绝上浮弹跳 */
  box-shadow:var(--shadow-md) !important;
  border-color:color-mix(in srgb, var(--primary) 30%, var(--hairline)) !important;
}
.kpi-icon{
  background:var(--primary-soft) !important;
  color:var(--primary) !important;
  border-radius:var(--radius-md) !important;
  box-shadow:none !important;
}
.kpi-value{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* ---------- 面板 / 图表 / 业务卡片 ---------- */
.panel, .chart-card, .channel-card, .device-card, .week-card, .wf-card{
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-lg) !important;
  background:var(--surface-card) !important;
  box-shadow:var(--shadow-sm) !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.panel:hover, .chart-card:hover, .channel-card:hover, .device-card:hover, .week-card:hover, .wf-card:hover{
  box-shadow:var(--shadow-md) !important;
  border-color:color-mix(in srgb, var(--primary) 25%, var(--hairline)) !important;
  transform:none !important;
}
.panel-head{
  border-bottom:1px solid var(--hairline) !important;
}
.panel-title, .section-title{
  font-weight:600 !important;
  color:var(--ink) !important;
  letter-spacing:-.01em;
}
.section-title::before{
  content:""; display:inline-block; width:3px; height:12px;
  border-radius:2px; background:var(--primary);
  margin-right:8px; vertical-align:-1px;
}

/* ---------- 搜索 / 筛选 ---------- */
.search-shell{
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-md) !important;
  background:var(--surface-card) !important;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.search-shell:focus-within{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 2px var(--primary-soft) !important;
}
.seg-btn{
  border-radius:var(--radius-sm) !important;
  font-size:13px;
  transition:all .15s ease;
}
.seg-btn.active, .seg-btn.this{
  background:var(--primary) !important;
  color:#fff !important;
  box-shadow:none !important;
}

/* ---------- 表格与数据列表 ---------- */
.channel-table th{
  background:var(--surface-soft) !important;
  color:var(--muted) !important;
  font-weight:600 !important;
  border-bottom:1px solid var(--hairline) !important;
  font-size:12px;
}
.channel-table td{
  border-bottom:1px solid var(--hairline-soft) !important;
  font-size:13px;
}
.channel-table tr:hover td{
  background:var(--surface-soft) !important;
}

/* ---------- 徽章 / 状态药丸 ---------- */
.pill, .pill-tag, .delta-pill{
  border-radius:4px !important;
  font-weight:500 !important;
  font-size:11px;
  padding:2px 6px;
}
.delta-pill.up{color:var(--success) !important}
.delta-pill.down{color:var(--danger) !important}
.dot.success{background:var(--success) !important}
.dot.danger{background:var(--danger) !important}
.dot.amber{background:var(--amber) !important}

/* ---------- 主按钮与操作按钮 ---------- */
.primary, .card-action, .card-action--alert{
  border-radius:var(--radius-md) !important;
  font-weight:500 !important;
  transition:background .15s ease, opacity .15s ease;
}
.primary{
  background:var(--primary) !important;
  color:#fff !important;
  box-shadow:none !important;
  border:none !important;
}
.primary:hover{
  opacity:.9;
  transform:none !important;
  filter:none !important;
}
.card-action:hover, .card-action--alert:hover{
  transform:none !important;
}

/* ---------- 分页器 ---------- */
.pager-bar .page-cur, .pager .page-cur{
  background:var(--primary) !important;
  color:#fff !important;
  border-radius:var(--radius-sm) !important;
}

/* ---------- 登录页 (收敛克制登录框) ---------- */
.login-page{
  background:var(--canvas) !important;
}
.login-card{
  background:var(--surface-card) !important;
  border:1px solid var(--hairline) !important;
  border-radius:var(--radius-xl) !important;
  box-shadow:var(--shadow-md) !important;
  color:var(--ink) !important;
}
.login-card .brand h1{color:var(--ink) !important}
.login-card .brand p{color:var(--muted) !important}
.login-card .mark{filter:none !important}
.login-card input{
  background:var(--surface-soft) !important;
  border:1px solid var(--hairline) !important;
  color:var(--ink) !important;
  border-radius:var(--radius-md) !important;
}
.login-card input::placeholder{color:var(--muted-soft) !important}
.login-card input:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 2px var(--primary-soft) !important;
  outline:none;
}
.login-card .submit{
  background:var(--primary) !important;
  border:none !important;
  border-radius:var(--radius-md) !important;
  box-shadow:none !important;
  font-weight:600 !important;
  letter-spacing:1px;
  transition:opacity .15s ease;
}
.login-card .submit:hover{
  opacity:.92;
  transform:none !important;
  filter:none !important;
}
.login-card label span{color:var(--muted) !important}

/* ---------- Toast 提示 ---------- */
.toast{
  border-radius:var(--radius-md) !important;
  box-shadow:var(--shadow-md) !important;
  border:1px solid var(--hairline);
}

/* ---------- 精细化滚动条 ---------- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:var(--muted-soft);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
::-webkit-scrollbar-track{background:transparent}

/* ---------- 交互增强:主题切换按钮 ---------- */
.theme-fab{
  border:1px solid var(--hairline);
  background:var(--surface-card);
  color:var(--muted);
  width:28px;height:28px;
  border-radius:var(--radius-sm);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;cursor:pointer;
  transition:border-color .15s ease, color .15s ease;
}
.theme-fab:hover{
  border-color:var(--muted);
  color:var(--primary);
  transform:none !important;
  box-shadow:none !important;
}

/* ---------- 交互增强:返回顶部 (极简线框化) ---------- */
.back-top{
  position:fixed; right:20px; bottom:20px; z-index:200;
  width:32px;height:32px;
  border-radius:var(--radius-sm);
  background:var(--surface-card);
  border:1px solid var(--hairline);
  color:var(--muted);
  display:grid;place-items:center; font-size:14px;
  box-shadow:var(--shadow-sm); cursor:pointer;
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, border-color .18s ease, color .18s ease;
}
.back-top.show{opacity:1;pointer-events:auto}
.back-top:hover{
  border-color:var(--muted);
  color:var(--primary);
  filter:none !important;
}
@media (max-width:640px){ .back-top{bottom:calc(var(--mobile-nav-h, 64px) + 10px)} }

/* ---------- 空状态 ---------- */
.empty{color:var(--muted-soft)}
.empty-title{color:var(--muted) !important;font-weight:500}

/* ---------- 移动端适配 ---------- */
@media (max-width:640px){
  .topbar{gap:8px;padding:0 12px !important}
  .sync-msg{display:none !important}
  .brand-sub{display:none !important}
}

/* ---------- 彻底禁用弹跳动效 ---------- */
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}
/* 适配第 7 个主导航 Tab (售后中台) 移动端自适应 */
@media (width <= 860px) {
  .mobile-nav[data-v-798d2415] {
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px !important;
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .mobile-nav-item[data-v-798d2415] {
    min-height: 44px !important;
    border-radius: 8px !important;
  }
  .mobile-nav-icon[data-v-798d2415] {
    font-size: 16px !important;
  }
  .mobile-nav-label[data-v-798d2415] {
    font-size: 9px !important;
    letter-spacing: 0 !important;
  }
}

/* 群消息卡片上的售后 Copilot 胶囊卡片 */
.msg-copilot-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  background: var(--surface-card);
  color: var(--primary);
  cursor: pointer;
  transition: all .15s ease;
}
.msg-copilot-badge:hover {
  background: var(--primary-soft);
}
.msg-copilot-panel {
  margin-top: 10px;
  padding: 12px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  font-size: 12px;
}


/* ==================== 2026-09-03 UI 深度收敛与精致化层 ==================== */

/* 1. 顶栏精细化：缩小高度，去除突兀色温与大图标 */
.topbar {
  height: 52px !important;
  padding: 0 16px !important;
}
.brand-mark {
  width: 28px !important;
  height: 28px !important;
  font-size: 14px !important;
  border-radius: 6px !important;
}
.brand-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
.live-pill {
  height: 22px !important;
  padding: 0 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: var(--surface-soft) !important;
  border: 1px solid var(--hairline) !important;
}
.live-pill::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  margin-right: 5px;
}
.theme-toggle, .refresh-btn, .theme-fab {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 6px !important;
  border: 1px solid var(--hairline) !important;
  background: var(--surface-card) !important;
  color: var(--muted) !important;
}
.theme-toggle svg, .refresh-btn svg {
  width: 14px !important;
  height: 14px !important;
}
.user-btn {
  height: 30px !important;
  padding: 0 8px 0 4px !important;
  border-radius: 6px !important;
}
.user-avatar {
  width: 22px !important;
  height: 22px !important;
  font-size: 11px !important;
}

/* 2. 桌面主导航栏精致化：下划线指示，单色矢量图标 */
.desktop-nav-band {
  border-bottom: 1px solid var(--hairline) !important;
  background: var(--surface-card) !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
}
.desktop-nav {
  gap: 4px !important;
}
.desktop-nav .nav-item {
  height: 34px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  border-radius: 6px !important;
  background: transparent !important;
  border: none !important;
  gap: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: all .15s ease !important;
}
.desktop-nav .nav-item:hover {
  color: var(--ink) !important;
  background: var(--surface-soft) !important;
}
.desktop-nav .nav-item.active {
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  font-weight: 600 !important;
}
.nav-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
}

/* 3. 移动端 4+1 底栏与抽屉体系 (严禁 7 列拥挤) */
@media (max-width: 860px) {
  /* 双选择器拉高特异性：压过构建产物里 .mobile-nav[data-v-798d2415] 的 7 列定义 */
  .mobile-nav[data-v-798d2415],
  .mobile-nav {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)) !important;
    height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--surface-card) !important;
    border-top: 1px solid var(--hairline) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.03) !important;
  }
  .mobile-nav-item {
    min-height: 44px !important;
    border-radius: 6px !important;
    gap: 2px !important;
  }
  .mobile-nav-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
  }
  .mobile-nav-label {
    font-size: 10px !important;
    font-weight: 500 !important;
  }
  .mobile-nav-item.active {
    color: var(--primary) !important;
    background: var(--primary-soft) !important;
  }
  /* 兜底：第 5 项之后的非「更多」子项一律隐藏，即使 custom.js 尚未生效，
     也保证导航不会折行成两排（与 JS 的 4+1 收敛逻辑保持一致） */
  .mobile-nav > .mobile-nav-item:nth-child(n+5):not(.mobile-nav-more-btn) {
    display: none !important;
  }
}

/* 更多抽屉样式 */
.mobile-more-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 210;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.mobile-more-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}
.mobile-more-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--surface-card);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
  z-index: 220;
  padding: 16px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
}
.mobile-more-drawer.active {
  transform: translateY(0);
}
.mobile-more-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
.mobile-more-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--hairline);
  background: var(--surface-soft);
  text-decoration: none;
  color: inherit;
  transition: background .15s ease;
}
.more-item:hover, .more-item:active {
  background: var(--primary-soft);
  border-color: var(--primary);
}
.more-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}
.more-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.more-desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* 4. 分段控件 (7天/30天/异常/正常) 完美对称与等宽 */
.segment {
  display: inline-flex !important;
  background: var(--surface-soft) !important;
  border-radius: 6px !important;
  padding: 2px !important;
  border: 1px solid var(--hairline) !important;
  gap: 2px !important;
}
.seg-btn {
  flex: 1 !important;
  min-width: 54px !important;
  height: 26px !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--muted) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.seg-btn.active, .seg-btn.this {
  background: var(--surface-card) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* 5. 搜索框防折行与微型优化 */
.search-shell.compact {
  height: 30px !important;
  width: 156px !important;
  border-radius: 6px !important;
  padding: 0 8px !important;
}
.search-shell.compact input {
  font-size: 12px !important;
  line-height: normal !important;
}

/* 6. 群消息列表紧凑化与信息密度提升 */
.msg-card {
  padding: 10px 14px !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}
.msg-head {
  margin-bottom: 6px !important;
}
.msg-text {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--ink) !important;
}
.msg-copilot-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 8px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  border-radius: 4px !important;
  border: 1px solid var(--hairline) !important;
  background: var(--surface-card) !important;
  color: var(--primary) !important;
  cursor: pointer !important;
  transition: all .15s ease !important;
}
.msg-copilot-badge:hover {
  background: var(--primary-soft) !important;
}
.msg-copilot-panel {
  margin-top: 8px !important;
  padding: 10px 12px !important;
  border-radius: 6px !important;
  background: var(--surface-soft) !important;
  border: 1px solid var(--hairline) !important;
}


/* ==================== 群消息卡片专业降噪与动线优化 ==================== */

/* 1. 降低列表中大面积实色主按钮的视觉噪音，改为精致次级按钮，Hover 时强化 */
.msg-card .actions button.primary {
  background: var(--surface-card) !important;
  color: var(--primary) !important;
  border: 1px solid var(--hairline) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  height: 26px !important;
  border-radius: 4px !important;
  transition: all .15s ease !important;
}
.msg-card .actions button.primary:hover {
  background: var(--primary-soft) !important;
  border-color: var(--primary) !important;
  color: var(--primary-active) !important;
}
.msg-card .actions button:not(.primary) {
  background: var(--surface-card) !important;
  color: var(--muted) !important;
  border: 1px solid var(--hairline) !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  height: 26px !important;
  border-radius: 4px !important;
}
.msg-card .actions button:not(.primary):hover {
  background: var(--surface-soft) !important;
  color: var(--ink) !important;
}

/* 2. 顶栏右侧功能区增加轻微竖向分割线 */
.topbar-right .theme-toggle {
  margin-left: 2px !important;
}
.topbar-right .user-menu {
  border-left: 1px solid var(--hairline) !important;
  padding-left: 8px !important;
  margin-left: 4px !important;
}

/* 3. 活跃群进度条卡片网格优化：3列2行完美平衡布局，防止孤行 */
.group-bar-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}
@media (max-width: 860px) {
  .group-bar-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 520px) {
  .group-bar-list {
    grid-template-columns: 1fr !important;
  }
}
.group-bar {
  padding: 6px 10px !important;
  border-radius: 6px !important;
}


/* ==================== 2026-09-07 数据卡图标统一与图表配色归一 ==================== */

/* 1. Emoji → 单色线性 SVG 后的图标尺寸与对齐 */
.kpi-icon svg,
.wf-icon svg,
.lab svg,
.panel-title svg,
.degrade-banner svg {
  display: inline-block;
  flex-shrink: 0;
}
.kpi-icon svg {
  width: 18px !important;
  height: 18px !important;
}
.wf-icon svg {
  width: 16px !important;
  height: 16px !important;
}
.biz-card .lab svg {
  width: 13px !important;
  height: 13px !important;
  vertical-align: -1px !important;
  margin-right: 4px !important;
}
.panel-title svg {
  width: 15px !important;
  height: 15px !important;
  vertical-align: -2px !important;
  margin-right: 5px !important;
}
.degrade-banner svg {
  width: 14px !important;
  height: 14px !important;
  vertical-align: -2px !important;
  margin-right: 5px !important;
}

/* 2. 品牌标记脑图标居中 */
.brand-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.brand-mark svg {
  width: 16px !important;
  height: 16px !important;
}

/* 3. /weekly 降级横幅克制化：淡琥珀卡片式，而非刺眼横幅 */
.degrade-banner {
  display: flex !important;
  align-items: center !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  border: 1px solid color-mix(in srgb, var(--amber) 30%, var(--hairline)) !important;
  background: color-mix(in srgb, var(--amber) 7%, var(--surface-card)) !important;
  color: var(--body) !important;
  border-radius: var(--radius-md) !important;
  padding: 8px 12px !important;
  box-shadow: var(--shadow-sm) !important;
}
.degrade-banner svg {
  color: var(--amber) !important;
}
.degrade-banner strong {
  margin-right: 4px !important;
  color: var(--ink) !important;
}

/* 4. 趋势图例小圆点纵向居中对齐 */
.tl-item i {
  vertical-align: -1px !important;
}

/* 5. 移动端底部导航「更多」按钮与 4 个主项视觉完全一致
   （button 默认有 UA 背景/边框/内边距，会导致白色小卡片观感，这里全部归一） */
.mobile-nav-more-btn,
.mobile-nav-more-btn[data-v-798d2415] {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  min-height: 44px !important;
  padding: 4px 0 !important;
  border-radius: 6px !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}
.mobile-nav-more-btn:hover {
  color: var(--ink) !important;
  background: color-mix(in srgb, var(--ink) 6%, transparent) !important;
}
.mobile-nav-more-btn.active,
.mobile-nav-more-btn.active[data-v-798d2415] {
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
}
.mobile-nav-more-btn .mobile-nav-label {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: inherit !important;
}