/* ===== 页面样式: 门店实况 ===== */

/* ============================================================
   MartFlow — 品牌设计 Token
   依据：设计方案 §5.2 色彩体系 / §5.3 字体规范 / §5.4 间距栅格 / §5.8 阴影层级
   品牌前缀：rm
   ============================================================ */

/* ---------- 深色模式（默认） ---------- */
:root {
  /* 背景层 */
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;

  /* 边框 */
  --rm-line: #334155;

  /* 文字 */
  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;

  /* 品牌色（单一主色） */
  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;

  /* 状态色（仅语义状态使用） */
  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;

  /* 告警严重度（工程配置、时间流和实时通知统一使用） */
  --rm-severity-critical: #EF4444;
  --rm-severity-high: #F97316;
  --rm-severity-medium: #F59E0B;
  --rm-severity-low: #3B82F6;

  /* 数据可视化 */
  --rm-chart-flow: #00D4FF;
  --rm-chart-flow-2: #0EA5E9;
  --rm-chart-temp: #F59E0B;
  --rm-chart-temp-2: #EF4444;

  /* 阴影层级（静态阴影 alpha<=0.05，浮动层阴影用于 modal/popover/dropdown） */
  --rm-shadow-1: 0 1px 3px rgba(0,0,0,0.05);
  --rm-shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --rm-shadow-3: 0 8px 32px rgba(0,0,0,0.12);
  --rm-shadow-alert: 0 0 16px rgba(239,68,68,0.08);
  --rm-shadow-ai: 0 0 12px rgba(0,212,255,0.05);

  /* ---- 语义别名（apply-html-head-contract.mjs 要求） ---- */
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
  --rm-radius-small: 6px;
  --rm-radius-medium: 12px;
  --rm-radius-large: 16px;
}

.dark {
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;
  --rm-line: #334155;
  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;
  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;
  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

/* ---------- 高对比度模式（浅色，§5.2 评审决议 R-04） ---------- */
.light {
  --rm-bg: #F8FAFC;
  --rm-surface: #FFFFFF;
  --rm-surface-2: #F1F5F9;

  --rm-line: #CBD5E1;

  --rm-ink: #0F172A;
  --rm-ink-2: #475569;
  --rm-ink-3: #94A3B8;

  --rm-brand: #0284C7;
  --rm-brand-hover: #0369A1;
  --rm-brand-active: #075985;
  --rm-brand-ink: #FFFFFF;

  --rm-state-success: #059669;
  --rm-state-warning: #D97706;
  --rm-state-error: #DC2626;
  --rm-state-info: #7C3AED;

  --rm-shadow-1: 0 1px 3px rgba(15,23,42,0.05);
  --rm-shadow-2: 0 4px 12px rgba(15,23,42,0.08);
  --rm-shadow-3: 0 8px 32px rgba(15,23,42,0.12);
  --rm-shadow-alert: 0 0 16px rgba(220,38,38,0.05);
  --rm-shadow-ai: 0 0 12px rgba(2,132,199,0.05);

  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

/* ============================================================
   字体系统（§5.3）
   ============================================================ */
@font-face {
  font-family: "MartFlow UI";
  src: url("./fonts/opposans20/OPPOSans20-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3000-303F, U+31C0-31EF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
}

@font-face {
  font-family: "MartFlow UI";
  src: url("./fonts/opposans20/OPPOSans20-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3000-303F, U+31C0-31EF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
}

@font-face {
  font-family: "MartFlow UI";
  src: url("./fonts/opposans20/OPPOSans20-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  unicode-range: U+2E80-2EFF, U+3000-303F, U+31C0-31EF, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FE10-FE1F, U+FE30-FE4F, U+FF00-FFEF, U+20000-2FA1F;
}

@font-face {
  font-family: "MartFlow UI";
  src: url("./fonts/montserrat/Montserrat-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-02AF, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2190-21FF, U+2212-2215, U+FEFF;
}

@font-face {
  font-family: "MartFlow UI";
  src: url("./fonts/montserrat/Montserrat-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-02AF, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2190-21FF, U+2212-2215, U+FEFF;
}

@font-face {
  font-family: "MartFlow UI";
  src: url("./fonts/montserrat/Montserrat-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-02AF, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2190-21FF, U+2212-2215, U+FEFF;
}

@font-face {
  font-family: "MartFlow UI";
  src: url("./fonts/montserrat/Montserrat-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  unicode-range: U+0000-02AF, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2122, U+2190-21FF, U+2212-2215, U+FEFF;
}

@font-face {
  font-family: "MartFlow Numbers";
  src: url("./fonts/montserrat/Montserrat-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "MartFlow Numbers";
  src: url("./fonts/montserrat/Montserrat-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "MartFlow Numbers";
  src: url("./fonts/montserrat/Montserrat-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

/* 中文界面不按字符拆分回退，数字与中文都使用 OPPO Sans。 */
@font-face {
  font-family: "MartFlow Chinese UI";
  src: url("./fonts/opposans20/OPPOSans20-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: optional;
}

@font-face {
  font-family: "MartFlow Chinese UI";
  src: url("./fonts/opposans20/OPPOSans20-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500 600;
  font-display: optional;
}

@font-face {
  font-family: "MartFlow Chinese UI";
  src: url("./fonts/opposans20/OPPOSans20-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700 900;
  font-display: optional;
}

:root {
  --rm-font-sans: "MartFlow UI", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --rm-font-mono: "MartFlow Numbers", "Montserrat", "DIN Alternate", "Roboto Mono", "JetBrains Mono", monospace;
}

html[lang^="zh"] {
  --rm-font-sans: "MartFlow Chinese UI", "OPPO Sans", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --rm-font-mono: "MartFlow Chinese UI", "OPPO Sans", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

/* 字体角色类 */
.rm-text-display {
  font-family: var(--rm-font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.rm-text-card-title {
  font-family: var(--rm-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.rm-text-body-strong {
  font-family: var(--rm-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.rm-text-body {
  font-family: var(--rm-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.rm-text-caption {
  font-family: var(--rm-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.rm-text-data-lg {
  font-family: var(--rm-font-mono);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.rm-text-data-md {
  font-family: var(--rm-font-mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.rm-text-llm {
  font-family: var(--rm-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================================
   间距体系（§5.4，8px 基准）
   ============================================================ */
:root {
  --rm-space-xs: 4px;
  --rm-space-sm: 8px;
  --rm-space-md: 16px;
  --rm-space-lg: 24px;
  --rm-space-xl: 32px;
  --rm-space-2xl: 48px;
}

/* ============================================================
   圆角体系（§5.4）
   ============================================================ */
:root {
  --rm-radius-sm: 6px;
  --rm-radius-md: 12px;
  --rm-radius-lg: 16px;
  --rm-radius-full: 9999px;
}

/* ============================================================
   布局尺寸（§5.4 / §5.6）
   ============================================================ */
:root {
  --rm-layout-header-h: 56px;
  --rm-layout-sidebar-w: 220px;
  --rm-layout-sidebar-collapsed-w: 64px;
  --rm-layout-ai-bar-h: 72px;
  --rm-layout-ai-bar-expanded-h: 320px;
  --rm-layout-card-min-h: 120px;
  --rm-layout-card-padding: 16px;
  --rm-layout-grid-cols: 12;
  --rm-layout-grid-gap: 24px;
  --rm-layout-max-w: 1920px;
  --rm-layout-content-padding: 32px;
}

/* ============================================================
   组件状态规范（§7.5）
   ============================================================ */

/* 按钮基础 */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-space-xs);
  height: 40px;
  padding: 0 24px;
  border-radius: var(--rm-radius-sm);
  font-family: var(--rm-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.2,.8,.2,1),
              border-color 150ms cubic-bezier(.2,.8,.2,1),
              transform 120ms cubic-bezier(.2,.8,.2,1);
  border: none;
  outline: none;
  white-space: nowrap;
  user-select: none;
}

.rm-btn:active {
  transform: scale(0.98);
}

.rm-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand);
}

/* 主按钮 */
.rm-btn-primary {
  background-color: var(--rm-brand);
  color: var(--rm-brand-ink);
}
.rm-btn-primary:hover {
  background-color: var(--rm-brand-hover);
}

/* 次按钮 */
.rm-btn-secondary {
  background-color: transparent;
  border: 1px solid var(--rm-line);
  color: var(--rm-ink);
}
.rm-btn-secondary:hover {
  border-color: var(--rm-brand);
}

/* 危险按钮 */
.rm-btn-danger {
  background-color: var(--rm-state-error);
  color: #FFFFFF;
}
.rm-btn-danger:hover {
  background-color: #DC2626;
}

/* 禁用态 */
.rm-btn:disabled,
.rm-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 紧凑尺寸 */
.rm-btn-sm {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
}

/* 大号尺寸 */
.rm-btn-lg {
  height: 48px;
  padding: 0 32px;
  font-size: 16px;
}

/* ============================================================
   卡片基础（§5.8 阴影与层级）
   ============================================================ */
.rm-card {
  background-color: var(--rm-surface);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-md);
  padding: var(--rm-layout-card-padding);
  min-height: var(--rm-layout-card-min-h);
  transition: box-shadow 150ms cubic-bezier(.2,.8,.2,1),
              border-color 150ms cubic-bezier(.2,.8,.2,1);
}

.rm-card:hover {
  box-shadow: var(--rm-shadow-2);
}

/* 告警卡片 */
.rm-card-alert {
  border-color: var(--rm-state-error);
  box-shadow: var(--rm-shadow-alert);
  animation: rm-pulse-alert 1.5s ease-in-out infinite;
}

@keyframes rm-pulse-alert {
  0%, 100% { box-shadow: 0 0 16px rgba(239,68,68,0.3); }
  50% { box-shadow: 0 0 24px rgba(239,68,68,0.5); }
}

/* AI 卡片微光 */
.rm-card-ai {
  box-shadow: var(--rm-shadow-ai);
}

/* ============================================================
   骨架屏 shimmer（§5.5）
   ============================================================ */
.rm-skeleton {
  background: linear-gradient(
    90deg,
    var(--rm-surface) 0%,
    var(--rm-surface-2) 50%,
    var(--rm-surface) 100%
  );
  background-size: 200% 100%;
  animation: rm-shimmer 1.5s linear infinite;
  border-radius: var(--rm-radius-sm);
}

@keyframes rm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   AI 光球动画（§5.5）
   ============================================================ */
.rm-ai-orb {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: var(--rm-radius-full);
  background: radial-gradient(circle at 35% 35%, var(--rm-brand) 0%, var(--rm-brand-active) 60%, transparent 100%);
  box-shadow: 0 0 16px rgba(0,212,255,0.3);
  animation: rm-orb-breathe 3s ease-in-out infinite;
}

.rm-ai-orb--thinking {
  animation: rm-orb-rotate 2s linear infinite;
}

.rm-ai-orb--offline {
  background: radial-gradient(circle at 35% 35%, var(--rm-ink-3) 0%, var(--rm-ink-3) 60%, transparent 100%);
  box-shadow: none;
  animation: none;
  opacity: 0.5;
}

@keyframes rm-orb-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 16px rgba(0,212,255,0.3); }
  50% { transform: scale(1.05); box-shadow: 0 0 24px rgba(0,212,255,0.5); }
}

@keyframes rm-orb-rotate {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.05); }
  100% { transform: rotate(360deg) scale(1); }
}

/* ============================================================
   状态点（§5.2）
   ============================================================ */
.rm-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--rm-radius-full);
  flex-shrink: 0;
}

.rm-status-dot--success { background-color: var(--rm-state-success); box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.rm-status-dot--warning { background-color: var(--rm-state-warning); box-shadow: 0 0 8px rgba(245,158,11,0.3); }
.rm-status-dot--error { background-color: var(--rm-state-error); box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.rm-status-dot--info { background-color: var(--rm-state-info); }
.rm-status-dot--brand { background-color: var(--rm-brand); }

/* ============================================================
   全局重置
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--rm-font-sans);
  font-size: 14px;
  color: var(--rm-ink);
  background-color: var(--rm-bg);
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--rm-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--rm-line);
  border-radius: var(--rm-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rm-ink-3);
}

/* 选中文本 */
::selection {
  background-color: rgba(0,212,255,0.25);
  color: var(--rm-ink);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* @theme removed for v3 compat */

    td, th { /* @apply removed */ word-break: break-all; word-break: auto-phrase; }
    th { /* @apply removed */ }
.bg-background { background-color: var(--rm-background); }
      .text-background { color: var(--rm-background); }
      .border-background { border-color: var(--rm-background); }
      .ring-background { --tw-ring-color: var(--rm-background); }
      .bg-foreground { background-color: var(--rm-foreground); }
      .text-foreground { color: var(--rm-foreground); }
      .border-foreground { border-color: var(--rm-foreground); }
      .ring-foreground { --tw-ring-color: var(--rm-foreground); }
      .bg-card { background-color: var(--rm-card); }
      .text-card { color: var(--rm-card); }
      .border-card { border-color: var(--rm-card); }
      .ring-card { --tw-ring-color: var(--rm-card); }
      .bg-card-foreground { background-color: var(--rm-card-foreground); }
      .text-card-foreground { color: var(--rm-card-foreground); }
      .border-card-foreground { border-color: var(--rm-card-foreground); }
      .ring-card-foreground { --tw-ring-color: var(--rm-card-foreground); }
      .bg-popover { background-color: var(--rm-popover); }
      .text-popover { color: var(--rm-popover); }
      .border-popover { border-color: var(--rm-popover); }
      .ring-popover { --tw-ring-color: var(--rm-popover); }
      .bg-popover-foreground { background-color: var(--rm-popover-foreground); }
      .text-popover-foreground { color: var(--rm-popover-foreground); }
      .border-popover-foreground { border-color: var(--rm-popover-foreground); }
      .ring-popover-foreground { --tw-ring-color: var(--rm-popover-foreground); }
      .bg-primary { background-color: var(--rm-primary); }
      .text-primary { color: var(--rm-primary); }
      .border-primary { border-color: var(--rm-primary); }
      .ring-primary { --tw-ring-color: var(--rm-primary); }
      .bg-primary-foreground { background-color: var(--rm-primary-foreground); }
      .text-primary-foreground { color: var(--rm-primary-foreground); }
      .border-primary-foreground { border-color: var(--rm-primary-foreground); }
      .ring-primary-foreground { --tw-ring-color: var(--rm-primary-foreground); }
      .bg-muted { background-color: var(--rm-muted); }
      .text-muted { color: var(--rm-muted); }
      .border-muted { border-color: var(--rm-muted); }
      .ring-muted { --tw-ring-color: var(--rm-muted); }
      .bg-muted-foreground { background-color: var(--rm-muted-foreground); }
      .text-muted-foreground { color: var(--rm-muted-foreground); }
      .border-muted-foreground { border-color: var(--rm-muted-foreground); }
      .ring-muted-foreground { --tw-ring-color: var(--rm-muted-foreground); }
      .bg-border { background-color: var(--rm-border); }
      .text-border { color: var(--rm-border); }
      .border-border { border-color: var(--rm-border); }
      .ring-border { --tw-ring-color: var(--rm-border); }
      .bg-input { background-color: var(--rm-input); }
      .text-input { color: var(--rm-input); }
      .border-input { border-color: var(--rm-input); }
      .ring-input { --tw-ring-color: var(--rm-input); }
      .bg-ring { background-color: var(--rm-ring); }
      .text-ring { color: var(--rm-ring); }
      .border-ring { border-color: var(--rm-ring); }
      .ring-ring { --tw-ring-color: var(--rm-ring); }
.no-scrollbar::-webkit-scrollbar { display: none; }
      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      [data-icon] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: currentColor;
      }
/* ====== 应用框架布局：无左侧菜单，顶部通栏 + 主内容区 ====== */
    .rm-app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: var(--rm-bg);
      overflow: hidden;
    }

    /* 顶部状态栏 */
    .rm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--rm-layout-header-h);
      padding: 0 var(--rm-layout-content-padding);
      background-color: var(--rm-surface);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
      z-index: 100;
    }

    .rm-header__left {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
    }

    .rm-header__logo {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-header__logo-icon {
      width: 28px;
      height: 28px;
      border-radius: var(--rm-radius-sm);
      background: linear-gradient(135deg, var(--rm-brand) 0%, var(--rm-brand-active) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--rm-brand-ink);
    }

    .rm-header__title {
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-header__right {
      display: flex;
      align-items: center;
      gap: var(--rm-space-lg);
    }

    .rm-header__status {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-header__status-value {
      color: var(--rm-state-success);
      font-weight: 600;
    }

    .rm-header__actions {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-header__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: var(--rm-radius-sm);
      border: 1px solid transparent;
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-header__btn:hover {
      background-color: var(--rm-surface-2);
      color: var(--rm-ink);
      border-color: var(--rm-line);
    }

    .rm-header__btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .page-store-live .rm-header__btn,
    .page-history .rm-header__btn,
    .page-settings .rm-header__btn {
      width: auto;
      padding: 0 10px;
      gap: 6px;
      white-space: nowrap;
    }

    .page-store-live .rm-header__btn-label,
    .page-history .rm-header__btn-label,
    .page-settings .rm-header__btn-label {
      font-size: 13px;
      font-weight: 500;
    }

    .rm-header__btn.rm-header__btn--active,
    .rm-header__btn.rm-header__btn--active:hover {
      color: var(--rm-brand);
      background-color: rgba(0, 212, 255, 0.12);
      border-color: rgba(0, 212, 255, 0.4);
    }

    .rm-header__btn--active .rm-header__btn-label {
      font-weight: 600;
    }

    /* 主内容区 */
    .rm-body {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .rm-content {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: var(--rm-layout-content-padding);
      background-color: var(--rm-bg);
    }

    .rm-content__inner {
      max-width: var(--rm-layout-max-w);
      margin: 0 auto;
      height: 100%;
    }

    /* 智能问答抽屉（左侧展开，宽度满足对话窗口） */
    .rm-ai-drawer {
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      width: 50vw;
      max-width: 90vw;
      background-color: var(--rm-surface);
      border-right: 1px solid var(--rm-line);
      box-shadow: var(--rm-shadow-3);
      transform: translateX(-100%);
      transition: transform 250ms cubic-bezier(.3,0,0,1);
      will-change: transform;
      backface-visibility: hidden;
      z-index: 150;
      display: flex;
      flex-direction: column;
    }

    .rm-ai-drawer[data-open="true"] {
      transform: translateX(0);
    }

    .rm-ai-drawer__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
    }

    .rm-ai-drawer__title {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    /* AI抽屉模态遮罩 */
    .rm-ai-drawer__overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: opacity 250ms cubic-bezier(.3,0,0,1);
      will-change: opacity;
      z-index: 140;
    }
    .rm-ai-drawer__overlay[data-open="true"] {
      opacity: 1;
      pointer-events: auto;
    }

    /* 收起按钮：纯图标方形按钮，紧凑居中 */
    .rm-ai-drawer__close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      padding: 0;
      border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-brand);
      background-color: transparent;
      color: var(--rm-brand);
      cursor: pointer;
      transition: background-color 150ms cubic-bezier(.2,.8,.2,1), color 150ms;
    }
    .rm-ai-drawer__close:hover {
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink);
    }
    .rm-ai-drawer__close svg {
      transition: transform 150ms ease;
    }
    .rm-ai-drawer__close:hover svg {
      transform: translateX(-2px);
    }

    .rm-ai-drawer__body {
      flex: 1;
      overflow-y: auto;
      padding: var(--rm-space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
    }

    .rm-ai-drawer__footer {
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-top: 1px solid var(--rm-line);
      flex-shrink: 0;
    }

    .rm-ai-drawer__input-wrapper {
      display: flex;
      align-items: flex-end;
      gap: var(--rm-space-sm);
      background-color: var(--rm-ai-input-bg, var(--rm-surface-2));
      border: 1px solid var(--rm-ai-input-border, var(--rm-line));
      border-radius: var(--rm-radius-md);
      padding: var(--rm-space-sm) var(--rm-space-md);
      box-shadow: var(--rm-ai-input-shadow, none);
      transition: border-color 150ms cubic-bezier(.2,.8,.2,1), box-shadow 150ms cubic-bezier(.2,.8,.2,1), background-color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-ai-drawer__input-wrapper:focus-within {
      border-color: var(--rm-brand);
      background-color: var(--rm-ai-input-focus-bg, var(--rm-ai-input-bg, var(--rm-surface-2)));
      box-shadow: 0 0 0 3px var(--rm-ai-input-focus-ring, rgba(0,212,255,0.12));
    }

    .rm-ai-drawer__textarea {
      flex: 1;
      background: none;
      border: none;
      outline: none;
      resize: none;
      overflow-y: auto;
      color: var(--rm-ink);
      font-family: var(--rm-font-sans);
      font-size: 14px;
      line-height: 1.5;
      min-height: 44px;
      max-height: 120px;
    }

    .rm-ai-drawer__textarea::placeholder {
      color: var(--rm-ai-input-placeholder, var(--rm-ink-3));
      opacity: 1;
    }

    .rm-ai-drawer__send {
      width: 36px;
      height: 36px;
      border-radius: var(--rm-radius-full);
      border: none;
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 4px 12px var(--rm-ai-send-shadow, rgba(0,212,255,0.2));
      transition: background-color 150ms cubic-bezier(.2,.8,.2,1), box-shadow 150ms cubic-bezier(.2,.8,.2,1), transform 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-ai-drawer__send:hover {
      background-color: var(--rm-brand-hover);
      box-shadow: 0 6px 16px var(--rm-ai-send-shadow-hover, rgba(0,212,255,0.3));
      transform: translateY(-1px);
    }

    .rm-ai-drawer__send:active {
      background-color: var(--rm-brand-active);
      box-shadow: 0 2px 8px var(--rm-ai-send-shadow, rgba(0,212,255,0.2));
      transform: translateY(0);
    }

    .rm-ai-drawer__send:focus-visible {
      outline: 2px solid var(--rm-brand);
      outline-offset: 2px;
    }

    .rm-ai-drawer__send svg {
      fill: none;
      stroke: #fff;
      stroke-width: 2;
    }

    /* 历史报表侧边抽屉 */
    .rm-history-drawer {
      position: fixed;
      right: 0;
      top: var(--rm-layout-header-h);
      bottom: 0;
      width: 520px;
      max-width: 90vw;
      background-color: var(--rm-surface);
      border-left: 1px solid var(--rm-line);
      box-shadow: var(--rm-shadow-3);
      transform: translateX(100%);
      transition: transform 250ms cubic-bezier(.3,0,0,1);
      z-index: 140;
      display: flex;
      flex-direction: column;
    }

    .rm-history-drawer[data-open="true"] {
      transform: translateX(0);
    }

    /* ====== 智能问答侧滑入口（与设备控制拉手按钮样式统一） ====== */
    .rm-qa-trigger {
      position: fixed;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 8999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 60px;
      height: 82px;
      padding: 0 10px 0 8px;
      box-sizing: border-box;
      border: 1px solid var(--rm-brand);
      border-left: none;
      border-radius: 0 18px 18px 0;
      background: linear-gradient(135deg, var(--rm-surface, #1a2332) 0%, var(--rm-bg-2, #0f1828) 100%);
      color: var(--rm-brand);
      cursor: pointer;
      box-shadow:
        inset 0 0 18px color-mix(in srgb, var(--rm-brand) 9%, transparent),
        3px 0 18px color-mix(in srgb, var(--rm-brand) 22%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: background 200ms cubic-bezier(.2, .8, .2, 1),
                  box-shadow 200ms cubic-bezier(.2, .8, .2, 1),
                  transform 200ms cubic-bezier(.2, .8, .2, 1);
    }

    .rm-qa-trigger:hover {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 212, 255, 0.04) 100%);
      box-shadow:
        inset 0 0 22px color-mix(in srgb, var(--rm-brand) 16%, transparent),
        4px 0 24px color-mix(in srgb, var(--rm-brand) 34%, transparent);
    }

    .rm-qa-trigger svg {
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
    }

    .rm-qa-trigger:hover svg {
      transform: scale(1.1);
    }

    .rm-qa-trigger__label {
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.08em;
      color: var(--rm-brand);
      line-height: 1;
    }

    .rm-qa-trigger:focus-visible {
      outline: 2px solid var(--rm-brand);
      outline-offset: 3px;
    }

    /* 抽屉打开时隐藏拉手按钮，与右侧拉手隐藏机制一致 */
    .rm-qa-trigger[data-hidden="true"] {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) translateX(-100%);
    }

    /* 响应式 */
    @media (max-width: 1279px) {
      .rm-header {
        padding: 0 var(--rm-space-md);
      }
      .rm-content {
        padding: var(--rm-space-md);
      }
    }

    @media (max-width: 767px) {
      .rm-header__title {
        display: none;
      }
      .rm-ai-drawer {
        width: 100vw;
        max-width: 100vw;
      }
      .page-store-live .rm-ai-drawer__header {
        justify-content: flex-start;
        gap: var(--rm-space-md);
      }
      .page-store-live .rm-ai-drawer__close {
        order: -1;
        flex: 0 0 auto;
      }
      .page-store-live .rm-ai-drawer__title {
        min-width: 0;
      }
      .page-store-live .rm-qa-suggested-tag {
        max-width: 100%;
        justify-content: flex-start;
        text-align: left;
      }
      .page-store-live .rm-ai-drawer__textarea {
        box-sizing: border-box;
        font-size: 16px;
      }
      .rm-history-drawer {
        width: 100vw;
        max-width: 100vw;
      }
      .rm-qa-trigger {
        width: 52px;
        height: 72px;
        padding: 0 8px 0 6px;
        border-radius: 0 16px 16px 0;
      }
      .rm-qa-trigger__label {
        font-size: 13px;
      }
    }

    /* ====== 区域卡片重构样式 ====== */
    .rm-region-card {
      display: grid;
      grid-template-areas:
        "header header"
        "flow trend"
        "metrics metrics"
        "devices devices";
      grid-template-columns: auto 1fr;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-md);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      cursor: pointer;
      transition: transform 150ms cubic-bezier(.2,.8,.2,1),
                  box-shadow 150ms cubic-bezier(.2,.8,.2,1),
                  border-color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-region-card__header { grid-area: header; }
    .rm-region-card__flow { grid-area: flow; }
    .rm-mini-trend { grid-area: trend; }
    .rm-region-card__metrics { grid-area: metrics; }
    .rm-region-card__devices-data { grid-area: devices; }

    .rm-region-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--rm-shadow-2);
      border-color: var(--rm-brand);
    }

    .rm-region-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 22px;
      min-width: 0;
    }

    .rm-region-card__alerts {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
      flex-wrap: wrap;
    }

    .rm-region-card__alert {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: var(--rm-radius-full);
      font-size: 11px;
      font-weight: 600;
      line-height: 1.4;
    }

    .rm-region-card__alert--error {
      background-color: rgba(239, 68, 68, 0.15);
      color: var(--rm-state-error);
      border: 1px solid rgba(239, 68, 68, 0.3);
    }

    .rm-region-card__alert--warning {
      background-color: rgba(245, 158, 11, 0.15);
      color: var(--rm-state-warning);
      border: 1px solid rgba(245, 158, 11, 0.3);
    }

    .rm-region-card__header-right {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
      min-width: 0;
      max-width: 100%;
    }

    .rm-region-card__name {
      font-size: 15px;
      font-weight: 600;
      color: var(--rm-ink);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-region-card__flow {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: var(--rm-space-sm);
    }

    .rm-region-card__flow-main {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .rm-region-card__flow-label {
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-region-card__flow-value {
      font-family: var(--rm-font-mono);
      font-size: 32px;
      font-weight: 700;
      color: var(--rm-brand);
      line-height: 1.1;
    }

    .rm-region-card__compare {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 6px;
      background-color: transparent;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      color: var(--rm-ink-2);
      cursor: pointer;
      align-self: flex-start;
      transition: border-color 150ms cubic-bezier(.2,.8,.2,1),
                  background-color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-region-card__compare:hover {
      border-color: var(--rm-brand);
      background-color: var(--rm-surface-2);
    }

    .rm-region-card__compare-arrow {
      font-size: 9px;
      line-height: 1;
    }

    .rm-region-card__compare-value {
      font-family: var(--rm-font-mono);
      font-size: 12px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-region-card__compare-value--up {
      color: var(--rm-state-success);
    }

    .rm-region-card__compare-value--down {
      color: var(--rm-state-error);
    }

    .rm-region-card__compare-label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
    }

    .rm-mini-trend {
      position: relative;
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .rm-mini-trend__svg {
      width: 100%;
      height: 44px;
      overflow: visible;
      flex-shrink: 0;
    }

    .rm-mini-trend__labels {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 9px;
      font-family: var(--rm-font-mono);
      color: var(--rm-ink-3);
      line-height: 1;
      margin-top: 2px;
      gap: var(--rm-space-xs);
    }

    .rm-mini-trend__max {
      color: var(--rm-brand);
      font-weight: 600;
    }

    .rm-mini-trend__legend {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      font-size: 10px;
      color: var(--rm-ink-3);
      margin-top: 2px;
    }

    .rm-mini-trend__legend-item {
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }

    .rm-mini-trend__legend-line {
      display: inline-block;
      width: 16px;
      height: 0;
      border-top: 1px solid var(--rm-brand);
    }

    .rm-mini-trend__legend-line--ref {
      border-top: 1px dashed var(--rm-ink-2);
      opacity: 0.7;
    }

    .rm-mini-trend__legend-line--lastweek {
      border-top: 1.5px dotted var(--rm-state-info);
      opacity: 0.95;
    }

    .rm-mini-trend--empty {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    .rm-region-card__metrics--3col {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--rm-space-xs);
      padding: var(--rm-space-sm);
      background-color: var(--rm-surface-2);
      border-radius: var(--rm-radius-sm);
    }

    .rm-region-card__metrics--2col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--rm-space-xs);
      padding: var(--rm-space-sm);
      background-color: var(--rm-surface-2);
      border-radius: var(--rm-radius-sm);
    }

    .rm-region-card__metrics--2col .rm-region-card__metric {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 0 var(--rm-space-xs);
      border-right: 1px solid var(--rm-line);
    }

    .rm-region-card__metrics--2col .rm-region-card__metric:last-child {
      border-right: none;
    }

    .rm-region-card__metrics--3col .rm-region-card__metric {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 0 var(--rm-space-xs);
      border-right: 1px solid var(--rm-line);
    }

    .rm-region-card__metrics--3col .rm-region-card__metric:last-child {
      border-right: none;
    }

    .rm-region-card__metric-label {
      font-size: 11px;
      color: var(--rm-ink-3);
      line-height: 1.3;
    }

    .rm-region-card__metric-value {
      font-family: var(--rm-font-mono);
      font-size: 14px;
      font-weight: 600;
      color: var(--rm-ink);
      line-height: 1.3;
    }

    .rm-region-card__environment-values {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }

    .rm-region-card__environment-value-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 4px;
      min-width: 0;
    }

    .rm-environment-alert-tag {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      padding: 1px 5px;
      border: 1px solid rgba(249, 115, 22, .34);
      border-radius: var(--rm-radius-full);
      background: rgba(249, 115, 22, .14);
      color: #fb923c;
      font-family: var(--rm-font-sans);
      font-size: 9px;
      font-weight: 700;
      line-height: 1.35;
      white-space: nowrap;
    }

    .rm-region-card__metric-time {
      font-size: 10px;
      line-height: 1.2;
      color: var(--rm-ink-3);
    }

    .rm-region-card__metric-delta {
      font-size: 11px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--rm-ink-2);
    }

    .rm-region-card__metric-delta--up {
      color: var(--rm-state-success);
    }

    .rm-region-card__metric-delta--down {
      color: var(--rm-state-error);
    }

    .rm-region-card__metric-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      color: var(--rm-ink-2);
    }

    .rm-region-card__metric-status .rm-status-dot {
      width: 6px;
      height: 6px;
    }

    .rm-region-card__devices-data {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding-top: var(--rm-space-xs);
      border-top: 1px solid var(--rm-line);
    }

    .rm-region-grid__empty,
    .rm-region-detail__empty,
    .rm-region-card__empty {
      color: var(--rm-ink-3);
      font-size: 12px;
    }

    .rm-region-grid__empty {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      border: 1px dashed var(--rm-line);
      border-radius: var(--rm-radius-md);
    }

    .rm-region-detail__empty {
      list-style: none;
      padding: var(--rm-space-lg);
      text-align: center;
      border: 1px dashed var(--rm-line);
      border-radius: var(--rm-radius-sm);
    }

    /* ====== 区域详情页重构样式 ====== */
    .rm-region-detail__header {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
    }

    .rm-region-detail__status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
      padding: 4px 10px;
      background-color: var(--rm-surface-2);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-full);
      font-size: 12px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-region-detail__status .rm-status-dot {
      width: 7px;
      height: 7px;
    }

    .rm-detail-metrics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--rm-space-sm);
    }

    .rm-detail-metric {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-xs);
      padding: var(--rm-space-sm) var(--rm-space-md);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      min-width: 0;
    }

    .rm-detail-metric[hidden] {
      display: none;
    }

    .rm-detail-metric__label {
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-detail-metric__value {
      font-family: var(--rm-font-mono);
      font-size: 24px;
      font-weight: 700;
      color: var(--rm-ink);
      line-height: 1.2;
      word-break: break-all;
    }

    .rm-detail-metric__delta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 4px;
      font-size: 12px;
      color: var(--rm-state-success);
    }

    .rm-detail-metric__delta span:first-child.rm-region-card__metric-delta--down,
    .rm-detail-metric__delta span:first-child[style*="color"] {
      color: var(--rm-state-error);
    }

    .rm-detail-metric__tag {
      padding: 2px 6px;
      background-color: var(--rm-surface-2);
      border-radius: var(--rm-radius-full);
      font-size: 10px;
      color: var(--rm-ink-3);
    }

    .rm-detail-metric__environment-alerts {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 4px;
    }

    .rm-detail-metric__environment-alerts .rm-environment-alert-tag {
      padding: 2px 7px;
      font-size: 10px;
    }

    .rm-detail-metric__environment-meta {
      display: flex;
      flex-direction: column;
      gap: 2px;
      font-size: 11px;
      line-height: 1.4;
      color: var(--rm-ink-3);
    }

    .rm-card-trend .rm-report-section {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
    }

    .rm-trend-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      flex-wrap: wrap;
    }

    .rm-trend-tabs {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      background-color: var(--rm-surface-2);
      border-radius: var(--rm-radius-sm);
    }

    .rm-trend-tab {
      padding: 5px 12px;
      background-color: transparent;
      border: none;
      border-radius: var(--rm-radius-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-trend-tab:hover {
      color: var(--rm-ink);
    }

    .rm-trend-tab--active {
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink) !important;
      font-weight: 600;
    }

    .rm-trend-chart {
      position: relative;
      width: 100%;
      height: clamp(240px, 18vw, 320px);
      min-height: 240px;
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      overflow: hidden;
    }

    .rm-trend-chart svg {
      width: 100%;
      height: 100%;
    }

    .rm-trend-chart__point {
      cursor: pointer;
      transition: r 120ms ease;
    }

    .rm-trend-chart__point:hover {
      r: 6;
    }

    .rm-trend-chart__tooltip {
      position: absolute;
      display: none;
      padding: 6px 10px;
      background-color: var(--rm-surface-2);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      font-size: 12px;
      color: var(--rm-ink);
      pointer-events: none;
      box-shadow: var(--rm-shadow-2);
      z-index: 10;
      white-space: nowrap;
    }

    .rm-trend-legend {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--rm-space-md);
      width: 100%;
      font-size: 12px;
      color: var(--rm-ink-2);
    }

    .rm-trend-legend__item {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .rm-trend-legend__line {
      width: 20px;
      height: 3px;
      border-radius: 2px;
    }

    .rm-trend-legend__line--today {
      background-color: var(--rm-brand);
    }

    .rm-trend-legend__line--yesterday {
      background-color: var(--rm-ink-2);
      background-image: linear-gradient(90deg, var(--rm-ink-2) 50%, transparent 50%);
      background-size: 8px 100%;
    }

    .rm-trend-legend__line--lastweek {
      background-color: var(--rm-state-info);
      background-image: linear-gradient(90deg, var(--rm-state-info) 50%, transparent 50%);
      background-size: 4px 100%;
    }

    .rm-insights-header {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    #detail-insights-card .rm-report-section {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-insights-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-insights-item {
      position: relative;
      padding-left: 16px;
      font-size: 14px;
      line-height: 1.6;
      color: var(--rm-ink);
    }

    .rm-insights-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 6px;
      height: 6px;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-brand);
    }

    .rm-insights-source {
      margin-top: var(--rm-space-sm);
      font-size: 11px;
      color: var(--rm-ink-3);
    }

    .rm-device-detail-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-device-detail-item {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      align-items: center;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-sm) var(--rm-space-md);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      font-size: 13px;
    }

    .rm-device-detail-item__name {
      display: inline-flex;
      align-items: center;
      gap: var(--rm-space-sm);
      color: var(--rm-ink);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-device-detail-item__type,
    .rm-device-chip__type {
      flex: 0 0 auto;
      padding: 1px 6px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-surface);
      color: var(--rm-ink-2);
      font-size: 10px;
      line-height: 1.4;
      white-space: nowrap;
    }

    .rm-device-detail-item__text {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .rm-device-detail-item__data {
      color: var(--rm-brand);
      font-weight: 600;
      justify-self: start;
      text-align: left;
    }

    .rm-device-detail-item__sync {
      color: var(--rm-ink-3);
      font-size: 12px;
      white-space: nowrap;
      justify-self: end;
      text-align: right;
    }

    .rm-event-timeline {
      --rm-event-timeline-axis-x: 52px;
      list-style: none;
      position: relative;
      padding-left: 0;
    }

    .rm-event-timeline::before {
      content: "";
      position: absolute;
      left: var(--rm-event-timeline-axis-x);
      top: 8px;
      bottom: 8px;
      width: 1px;
      background-color: var(--rm-line);
      transform: translateX(-50%);
    }

    .rm-event-timeline__item {
      position: relative;
      display: grid;
      grid-template-columns: 70px 1fr auto;
      align-items: flex-start;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-sm) 0;
      min-width: 0;
    }

    .rm-event-timeline__item::before {
      content: "";
      position: absolute;
      left: var(--rm-event-timeline-axis-x);
      top: 17px;
      width: 10px;
      height: 10px;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-surface);
      border: 2px solid var(--rm-brand);
      transform: translate(-50%, -50%);
      z-index: 1;
    }

    .rm-event-timeline__time {
      font-family: var(--rm-font-mono);
      font-size: 12px;
      color: var(--rm-ink-2);
      text-align: right;
      padding-right: 30px;
      line-height: 18px;
    }

    .rm-event-timeline__content {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .rm-event-timeline__text {
      font-size: 13px;
      color: var(--rm-ink);
    }

    .rm-event-timeline__impact {
      font-size: 11px;
      color: var(--rm-ink-3);
    }

    .rm-event-timeline__picture {
      display: block;
      width: min(240px, 100%);
      margin-top: var(--rm-space-xs);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      overflow: hidden;
      background-color: var(--rm-bg);
    }

    .rm-event-timeline__picture img {
      display: block;
      width: 100%;
      max-height: 160px;
      object-fit: cover;
    }

    .rm-event-timeline__status {
      padding: 2px 8px;
      border-radius: var(--rm-radius-full);
      font-size: 11px;
      font-weight: 600;
      white-space: nowrap;
    }

    .rm-event-timeline__status--resolved {
      background-color: rgba(16, 185, 129, 0.12);
      color: var(--rm-state-success);
    }

    .rm-event-timeline__status--pending {
      background-color: rgba(245, 158, 11, 0.12);
      color: var(--rm-state-warning);
    }

    .rm-event-timeline__status--processing {
      background-color: rgba(37, 99, 235, 0.12);
      color: #2563EB;
    }

    .rm-event-timeline__status--ignored {
      background-color: var(--rm-surface-2);
      color: var(--rm-ink-3);
    }

    @media (max-width: 1200px) {
      .rm-detail-metrics {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      }
    }

    @media (max-width: 768px) {
      .rm-detail-metrics {
        grid-template-columns: 1fr;
      }
      .rm-device-detail-item {
        grid-template-columns: 1fr;
        gap: var(--rm-space-xs);
      }
      .rm-event-timeline__item {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: var(--rm-space-sm);
      }
      .rm-event-timeline {
        --rm-event-timeline-axis-x: 68px;
      }
      .rm-event-timeline__time {
        padding-right: 32px;
        white-space: nowrap;
      }
      .rm-event-timeline__content {
        min-width: 0;
      }
      .rm-event-timeline__text {
        overflow-wrap: anywhere;
      }
      .rm-event-timeline__status {
        grid-column: 2;
        justify-self: flex-start;
      }
      .rm-trend-chart {
        height: 160px;
      }
    }
/* ====== 首页主布局：左侧AI报告 + 右侧门店实况 ====== */
    .rm-home-layout {
      display: flex;
      flex-direction: row;
      gap: var(--rm-space-lg);
      height: 100%;
      min-height: 0;
    }

    .rm-ai-report {
      flex: 1.2;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
      overflow-y: auto;
    }

    .rm-store-live {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
      overflow: hidden;
    }

    /* 门店实况 Tab 切换（按钮式，居中） */
    .rm-live-tabs {
      display: flex;
      align-items: center;
      gap: 4px;
      background-color: var(--rm-bg-2, rgba(255,255,255,0.04));
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-full, 999px);
      padding: 3px;
      flex-shrink: 0;
    }

    .rm-live-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px 16px;
      background: none;
      border: none;
      border-radius: var(--rm-radius-full, 999px);
      color: var(--rm-ink-2);
      font-family: var(--rm-font-sans);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 200ms cubic-bezier(.2,.8,.2,1);
      white-space: nowrap;
    }

    .rm-live-tab svg {
      flex-shrink: 0;
    }

    .rm-live-tab:hover {
      color: var(--rm-ink);
    }

    .rm-live-tab[data-active="true"] {
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink, #0f1419);
      font-weight: 600;
    }

    /* 面板容器：填满剩余空间，无滚动条 */
    .rm-live-panel {
      display: none;
      flex: 1;
      min-height: 0;
      flex-direction: column;
      gap: var(--rm-space-md);
      overflow: hidden;
    }

    .rm-live-panel[data-active="true"] {
      display: flex;
    }

    /* 视频翻页视口：新页在后台取得首帧后再覆盖旧页。 */
    .rm-video-grid-viewport {
      position: relative;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    /* 视频网格：自适应列数，16:9 比例卡片 */
    .rm-video-grid {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: repeat(var(--rm-video-cols, 3), 1fr);
      grid-template-rows: repeat(var(--rm-video-rows, 1), minmax(0, 1fr));
      grid-auto-rows: minmax(0, 1fr);
      align-content: stretch;
      gap: var(--rm-space-md);
      flex: 1;
      min-height: 0;
      overflow: hidden;
      padding: 4px 2px;
      margin: -4px -2px;
    }

    .rm-video-grid--incoming {
      opacity: 0;
      pointer-events: none;
    }

    .rm-video-grid--incoming-ready {
      opacity: 1;
      pointer-events: auto;
      transition: opacity 180ms ease;
      z-index: 2;
    }

    .rm-video-grid--outgoing {
      opacity: 1;
      z-index: 1;
    }

    .rm-video-grid--outgoing-retiring {
      opacity: 0;
      pointer-events: none;
      transition: opacity 180ms ease;
    }

    .rm-video-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 0;
      aspect-ratio: auto;
      border-radius: var(--rm-radius-md);
      border: 1px solid var(--rm-line);
      background-color: #0f172a;
      overflow: hidden;
      cursor: pointer;
      transition: border-color 150ms cubic-bezier(.2,.8,.2,1),
                  box-shadow 150ms cubic-bezier(.2,.8,.2,1);
    }

    /* 三路：首路通栏，底部两路并排，避免留下半行空白。 */
    .rm-video-grid[data-tile-count="3"] .rm-video-tile:first-child {
      grid-column: 1 / -1;
    }

    .rm-video-tile:hover {
      border-color: var(--rm-brand);
      box-shadow: var(--rm-shadow-2);
    }

    /* 全屏按钮 */
    .rm-video-tile__fullscreen {
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: var(--rm-radius-sm);
      border: none;
      background-color: rgba(0, 0, 0, 0.5);
      color: rgba(255, 255, 255, 0.8);
      cursor: pointer;
      opacity: 0;
      transition: opacity 150ms ease, background-color 150ms ease;
    }

    .rm-video-tile:hover .rm-video-tile__fullscreen {
      opacity: 1;
    }

    .rm-video-tile__fullscreen:hover {
      background-color: rgba(0, 212, 255, 0.3);
      color: #fff;
    }

    /* 全屏覆盖层 */
    .rm-video-fullscreen-layer {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 9999;
      background-color: #000;
      align-items: center;
      justify-content: center;
      padding: var(--rm-space-lg);
    }

    .rm-video-fullscreen-layer[data-active="true"] {
      display: flex;
    }

    .rm-video-fullscreen-layer__inner {
      position: relative;
      width: 100%;
      height: 100%;
      max-width: 100vw;
      max-height: 100vh;
      aspect-ratio: 16 / 9;
      margin: auto;
    }

    .rm-video-fullscreen-layer__close {
      position: absolute;
      top: 16px;
      right: 16px;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: var(--rm-radius-full, 999px);
      border: none;
      background-color: rgba(255, 255, 255, 0.15);
      color: #fff;
      cursor: pointer;
      transition: background-color 150ms ease;
    }

    .rm-video-fullscreen-layer__close:hover {
      background-color: rgba(239, 68, 68, 0.6);
    }

    .rm-video-tile__stream {
      position: relative;
      display: flex;
      flex: 1;
      min-height: 0;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    }

    .rm-video-tile__placeholder {
      color: rgba(148, 163, 184, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .rm-video-tile__placeholder-label {
      color: var(--rm-ink-3);
      font-size: 12px;
      line-height: 1;
    }

    /* 扫描线动画：模拟实时视频效果 */
    .rm-video-tile__scanline {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.4), transparent);
      animation: rm-scanline 3s linear infinite;
    }

    @keyframes rm-scanline {
      0% { top: 0; opacity: 0; }
      10% { opacity: 1; }
      90% { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    .rm-video-tile__overlay {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--rm-space-sm) var(--rm-space-md);
      background: #020617;
      z-index: 2;
    }

    .rm-video-tile__footer {
      flex: 0 0 auto;
      z-index: 2;
      background: #020617;
    }

    .rm-video-tile__rtsp-ready {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 8px;
      border-top: 1px solid rgba(148, 163, 184, 0.16);
      background: #020617;
    }

    .rm-video-tile__info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .rm-video-tile__name {
      font-size: 13px;
      font-weight: 600;
      color: #f1f5f9;
      transition: color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-video-tile__region {
      font-size: 11px;
      color: rgba(148, 163, 184, 0.9);
    }

    .rm-video-tile__live {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: #4ade80;
      font-family: var(--rm-font-mono);
      letter-spacing: 0.5px;
    }

    /* ====== 设备控制浮动拉手按钮 ====== */
    .rm-device-fab {
      position: fixed;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 8999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 82px;
      padding: 0 8px 0 10px;
      box-sizing: border-box;
      border: 1px solid var(--rm-brand);
      border-right: none;
      border-radius: 18px 0 0 18px;
      background: linear-gradient(135deg, var(--rm-surface, #1a2332) 0%, var(--rm-bg-2, #0f1828) 100%);
      color: var(--rm-brand);
      cursor: pointer;
      box-shadow:
        inset 0 0 18px color-mix(in srgb, var(--rm-brand) 9%, transparent),
        -3px 0 18px color-mix(in srgb, var(--rm-brand) 22%, transparent);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: background 200ms cubic-bezier(.2, .8, .2, 1),
                  box-shadow 200ms cubic-bezier(.2, .8, .2, 1),
                  transform 200ms cubic-bezier(.2, .8, .2, 1);
    }

    .rm-device-fab:hover {
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(0, 212, 255, 0.04) 100%);
      box-shadow:
        inset 0 0 22px color-mix(in srgb, var(--rm-brand) 16%, transparent),
        -4px 0 24px color-mix(in srgb, var(--rm-brand) 34%, transparent);
    }

    .rm-device-fab svg {
      flex-shrink: 0;
      transition: transform 300ms cubic-bezier(.2, .8, .2, 1);
    }

    .rm-device-fab:hover svg {
      transform: scale(1.1);
    }

    .rm-device-fab:focus-visible {
      outline: 2px solid var(--rm-brand);
      outline-offset: 3px;
    }

    /* 抽屉打开时隐藏拉手按钮 */
    .rm-device-fab[data-hidden="true"] {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) translateX(100%);
    }

    @media (max-width: 767px) {
      .rm-device-fab {
        width: 52px;
        height: 72px;
        padding: 0 6px 0 8px;
        border-radius: 16px 0 0 16px;
      }
    }

    /* ====== 设备控制抽屉 ====== */
    .rm-device-drawer__overlay {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
    }

    .rm-device-drawer__overlay[data-active="true"] {
      opacity: 1;
      pointer-events: auto;
    }

    .rm-device-drawer {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 460px;
      max-width: 92vw;
      background-color: var(--rm-surface, #1a2332);
      border-left: 1px solid var(--rm-line);
      box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
      z-index: 9001;
      display: flex;
      flex-direction: column;
      transform: translateX(100%);
      transition: transform 300ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-device-drawer[data-active="true"] {
      transform: translateX(0);
    }

    .rm-device-drawer__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
    }

    .rm-device-drawer__title {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-device-drawer__title svg {
      color: var(--rm-brand);
    }

    .rm-device-drawer__close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line);
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms ease;
    }

    .rm-device-drawer__close:hover {
      border-color: var(--rm-state-error);
      color: var(--rm-state-error);
    }

    .rm-device-drawer__body {
      flex: 1;
      overflow-y: auto;
      padding: var(--rm-space-md) var(--rm-space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
    }

    /* 设备分组 */
    .rm-device-group {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: var(--rm-space-sm) 0;
    }

    .rm-device-group--master {
      background-color: rgba(0, 212, 255, 0.04);
      border: 1px solid rgba(0, 212, 255, 0.15);
      border-radius: var(--rm-radius-md);
      padding: var(--rm-space-sm) var(--rm-space-md);
    }

    .rm-device-group__header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: var(--rm-space-xs) 0;
      color: var(--rm-ink-2);
    }

    .rm-device-group__header svg {
      color: var(--rm-ink-3);
    }

    .rm-device-group__title {
      font-size: 12px;
      font-weight: 600;
      color: var(--rm-ink-3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    /* 设备控制行 */
    .rm-device-control {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      padding: 10px 0;
      border-bottom: 1px solid var(--rm-line);
    }

    .rm-device-control:last-child {
      border-bottom: none;
    }

    .rm-device-control--slider {
      flex-direction: column;
      align-items: stretch;
      gap: var(--rm-space-sm);
    }

    .rm-device-control__info {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      flex: 1;
      min-width: 0;
    }

    .rm-device-control__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: var(--rm-radius-sm);
      background-color: var(--rm-bg-2, rgba(255,255,255,0.04));
      color: var(--rm-ink-2);
      flex-shrink: 0;
    }

    .rm-device-control__icon--master {
      background-color: rgba(0, 212, 255, 0.1);
      color: var(--rm-brand);
    }

    .rm-device-control__text {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
      overflow: hidden;
    }

    .rm-device-control__name {
      font-size: 14px;
      font-weight: 500;
      color: var(--rm-ink);
      overflow-wrap: anywhere;
    }

    .rm-device-control__desc {
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    .rm-device-control__status {
      font-size: 12px;
      color: var(--rm-ink-2);
      overflow-wrap: anywhere;
    }

    .rm-device-control__status--error {
      color: var(--rm-state-error);
      font-weight: 500;
    }

    .rm-device-control__status--warning {
      color: var(--rm-state-warning, #f59e0b);
      font-weight: 500;
    }

    /* 开关组件 */
    .rm-switch {
      position: relative;
      display: inline-block;
      cursor: pointer;
      flex-shrink: 0;
    }

    .rm-switch input {
      opacity: 0;
      position: absolute;
      width: 0;
      height: 0;
    }

    .rm-switch__track {
      display: flex;
      align-items: center;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background-color: var(--rm-line);
      transition: background-color 200ms cubic-bezier(.2,.8,.2,1);
      padding: 2px;
    }

    .rm-switch__thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
      transition: transform 200ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-switch input:checked + .rm-switch__track {
      background-color: var(--rm-brand);
    }

    .rm-switch input:checked + .rm-switch__track .rm-switch__thumb {
      transform: translateX(20px);
    }

    .rm-switch--large .rm-switch__track {
      width: 52px;
      height: 28px;
      border-radius: 14px;
    }

    .rm-switch--large .rm-switch__thumb {
      width: 24px;
      height: 24px;
    }

    .rm-switch--large input:checked + .rm-switch__track .rm-switch__thumb {
      transform: translateX(24px);
    }

    /* 温度滑块 */
    .rm-device-slider {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .rm-device-slider input[type="range"] {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      background: var(--rm-line);
      -webkit-appearance: none;
      appearance: none;
      outline: none;
    }

    .rm-device-slider input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--rm-brand);
      cursor: pointer;
      border: 2px solid #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    }

    .rm-device-slider input[type="range"]::-moz-range-thumb {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--rm-brand);
      cursor: pointer;
      border: 2px solid #fff;
    }

    .rm-device-slider__labels {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      color: var(--rm-ink-3);
    }

    /* ====== 设备控制面板增强样式 ====== */

    /* 场景模式按钮容器（2列网格） */
    .rm-device-scenes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 4px;
    }

    /* 场景按钮 */
    .rm-device-scene {
      padding: 10px 12px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background-color: transparent;
      color: var(--rm-ink-2);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 150ms ease;
      text-align: center;
    }

    .rm-device-scene:hover {
      border-color: var(--rm-brand);
      color: var(--rm-ink);
    }

    /* 激活场景按钮 */
    .rm-device-scene--active {
      border-color: var(--rm-brand);
      background-color: rgba(0, 212, 255, 0.1);
      color: var(--rm-brand);
    }

    /* 危险场景按钮（全部关闭，红色边框） */
    .rm-device-scene--danger {
      border-color: rgba(248, 113, 113, 0.3);
      color: var(--rm-state-error);
    }

    .rm-device-scene--danger:hover {
      border-color: var(--rm-state-error);
      background-color: rgba(248, 113, 113, 0.08);
    }

    .rm-device-scene--danger.rm-device-scene--active {
      border-color: var(--rm-state-error);
      background-color: rgba(248, 113, 113, 0.12);
      color: var(--rm-state-error);
    }

    /* 可折叠组标题增强 */
    .rm-device-group__header {
      cursor: pointer;
      user-select: none;
    }

    .rm-device-group__header:hover {
      color: var(--rm-ink);
    }

    /* 组开启数量统计 */
    .rm-device-group__count {
      margin-left: auto;
      font-size: 11px;
      color: var(--rm-ink-3);
      font-family: var(--rm-font-mono);
      letter-spacing: 0.3px;
    }

    /* 展开箭头（旋转动画） */
    .rm-device-group__arrow {
      color: var(--rm-ink-3);
      transition: transform 200ms ease;
      flex-shrink: 0;
    }

    .rm-device-group--collapsed .rm-device-group__arrow {
      transform: rotate(-90deg);
    }

    /* 组内容容器 */
    .rm-device-group__body {
      display: flex;
      flex-direction: column;
    }

    /* 收起状态隐藏内容 */
    .rm-device-group--collapsed .rm-device-group__body {
      display: none;
    }

    /* 可展开设备行（纵向排列行+展开区） */
    .rm-device-control--expandable {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: 0;
    }

    /* 设备行（toggle行） */
    .rm-device-control__row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: var(--rm-space-md);
      width: 100%;
      padding: 10px 0;
    }

    /* 展开内容区域 */
    .rm-device-control__expand {
      padding: 0 0 10px 44px;
    }

    /* 模式/风速按钮容器 */
    .rm-device-modes {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }

    .rm-device-modes__label {
      font-size: 12px;
      color: var(--rm-ink-3);
      margin-right: 4px;
    }

    /* 模式按钮 */
    .rm-device-mode {
      padding: 4px 12px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background-color: transparent;
      color: var(--rm-ink-2);
      font-size: 12px;
      cursor: pointer;
      transition: all 150ms ease;
    }

    .rm-device-mode:hover {
      border-color: var(--rm-brand);
      color: var(--rm-ink);
    }

    /* 激活模式按钮 */
    .rm-device-mode--active {
      border-color: var(--rm-brand);
      background-color: rgba(0, 212, 255, 0.1);
      color: var(--rm-brand);
    }

    /* 滑块标题行（标签+当前值） */
    .rm-device-slider__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .rm-device-slider__header span:first-child {
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    /* 滑块当前值 */
    .rm-device-slider__value {
      font-size: 13px;
      font-weight: 600;
      color: var(--rm-brand);
      font-family: var(--rm-font-mono);
    }

    /* 禁用状态（主电源关闭时） */
    .rm-device-control--disabled {
      opacity: 0.35;
      pointer-events: none;
    }

    /* 确认对话框遮罩 */
    .rm-device-confirm {
      position: fixed;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.6);
      z-index: 9100;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease;
    }

    .rm-device-confirm[data-active="true"] {
      opacity: 1;
      pointer-events: auto;
    }

    /* 对话框 */
    .rm-device-confirm__dialog {
      width: 320px;
      max-width: 90vw;
      background-color: var(--rm-surface, #1a2332);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      padding: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .rm-device-confirm__msg {
      font-size: 14px;
      color: var(--rm-ink);
      line-height: 1.6;
      margin-bottom: 18px;
    }

    .rm-device-confirm__actions {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }

    .rm-device-confirm__btn {
      padding: 6px 16px;
      border-radius: var(--rm-radius-sm);
      font-size: 13px;
      cursor: pointer;
      transition: all 150ms ease;
      border: 1px solid var(--rm-line);
    }

    .rm-device-confirm__btn--cancel {
      background-color: transparent;
      color: var(--rm-ink-2);
    }

    .rm-device-confirm__btn--cancel:hover {
      color: var(--rm-ink);
      border-color: var(--rm-ink-3);
    }

    .rm-device-confirm__btn--ok {
      background-color: var(--rm-brand);
      border-color: var(--rm-brand);
      color: #0a1929;
      font-weight: 600;
    }

    .rm-device-confirm__btn--ok:hover {
      filter: brightness(1.1);
    }

    /* Toast提示（抽屉底部浮动） */
    .rm-device-toast {
      position: absolute;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%) translateY(20px);
      padding: 8px 16px;
      background-color: var(--rm-surface-2);
      border: 1px solid var(--rm-line);
      border-left: 3px solid var(--rm-brand);
      border-radius: var(--rm-radius-sm);
      color: var(--rm-ink);
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 200ms ease, transform 200ms ease;
      z-index: 10;
    }

    /* Toast显示状态 */
    .rm-device-toast--show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    /* 报告 Tab 切换 */
    .rm-report-tabs {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
    }

    .rm-report-tab {
      position: relative;
      padding: var(--rm-space-sm) 0;
      background: none;
      border: none;
      color: var(--rm-ink-2);
      font-family: var(--rm-font-sans);
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      transition: color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-report-tab:hover {
      color: var(--rm-ink);
    }

    .rm-report-tab[data-active="true"] {
      color: var(--rm-brand);
      font-weight: 600;
    }

    .rm-report-tab[data-active="true"]::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -1px;
      height: 2px;
      background-color: var(--rm-brand);
      border-radius: 2px 2px 0 0;
    }

    /* 报告内容面板 */
    .rm-report-panels {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
    }

    .rm-report-panel {
      display: none;
      flex-direction: column;
      gap: var(--rm-space-md);
    }

    .rm-report-panel[data-active="true"] {
      display: flex;
    }

    .rm-report-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
    }

    .rm-report-header__title {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-report-header__date {
      color: var(--rm-ink-2);
      font-size: 13px;
    }

    .rm-report-section {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-report-section__title {
      font-size: 14px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-bullet-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-bullet-list li {
      position: relative;
      padding-left: 18px;
      color: var(--rm-ink-2);
      font-size: 14px;
      line-height: 1.6;
    }

    .rm-bullet-list li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 9px;
      width: 6px;
      height: 6px;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-brand);
    }

    .rm-security-card {
      border-left: 3px solid var(--rm-state-warning);
    }

    .rm-security-card p {
      color: var(--rm-ink-2);
      font-size: 14px;
      line-height: 1.6;
    }

    .rm-security-card p + p {
      margin-top: var(--rm-space-sm);
    }

    /* 数据对比卡片 */
    .rm-compare-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--rm-space-md);
    }

    .rm-compare-card {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-xs);
    }

    .rm-compare-card__label {
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-compare-card__value {
      display: flex;
      align-items: baseline;
      gap: var(--rm-space-sm);
    }

    .rm-compare-card__number {
      font-family: var(--rm-font-mono);
      font-size: 24px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-compare-card__delta {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      font-size: 13px;
      font-weight: 600;
      color: var(--rm-state-success);
    }

    .rm-compare-card__delta svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2.5;
    }

    /* AI 分析段落 */
    .rm-ai-analysis {
      border: 1px solid var(--rm-line);
    }

    .rm-ai-analysis p {
      color: var(--rm-ink-2);
      font-size: 15px;
      line-height: 1.7;
    }

    /* 数据表格 */
    .rm-data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    .rm-data-table th,
    .rm-data-table td {
      padding: var(--rm-space-sm) var(--rm-space-md);
      text-align: left;
      border-bottom: 1px solid var(--rm-line);
    }

    .rm-data-table th {
      color: var(--rm-ink-2);
      font-weight: 500;
      background-color: var(--rm-surface-2);
    }

    .rm-data-table td {
      color: var(--rm-ink);
    }

    .rm-data-table__delta {
      color: var(--rm-state-success);
      font-weight: 600;
    }

    /* 建议标签 */
    .rm-suggestion-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-suggestion-list li {
      display: flex;
      align-items: flex-start;
      gap: var(--rm-space-sm);
      color: var(--rm-ink-2);
      font-size: 14px;
      line-height: 1.6;
    }

    .rm-priority-tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: var(--rm-radius-sm);
      font-size: 12px;
      font-weight: 600;
      flex-shrink: 0;
    }

    .rm-priority-tag--high {
      background-color: rgba(239, 68, 68, 0.15);
      color: var(--rm-state-error);
    }

    .rm-priority-tag--medium {
      background-color: rgba(245, 158, 11, 0.15);
      color: var(--rm-state-warning);
    }

    .rm-priority-tag--low {
      background-color: rgba(16, 185, 129, 0.15);
      color: var(--rm-state-success);
    }

    /* 待处理事项 */
    .rm-todo-card {
      flex-shrink: 0;
    }

    .rm-todo-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: var(--rm-space-md);
    }

    .rm-todo-header__title {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 22px;
      height: 22px;
      padding: 0 6px;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink);
      font-size: 12px;
      font-weight: 700;
    }

    .rm-todo-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-todo-item {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
      padding: var(--rm-space-sm) 0;
      border-bottom: 1px solid var(--rm-line);
    }

    .rm-todo-item:last-child {
      border-bottom: none;
    }

    .rm-todo-item__bar {
      width: 3px;
      height: 36px;
      border-radius: 2px;
      flex-shrink: 0;
    }

    .rm-todo-item__bar--high { background-color: var(--rm-state-error); }
    .rm-todo-item__bar--medium { background-color: var(--rm-state-warning); }
    .rm-todo-item__bar--low { background-color: var(--rm-state-success); }

    .rm-todo-item__content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }

    .rm-todo-item__desc {
      color: var(--rm-ink);
      font-size: 14px;
      font-weight: 500;
    }

    .rm-todo-item__meta {
      color: var(--rm-ink-3);
      font-size: 12px;
    }

    .rm-todo-item__action {
      flex-shrink: 0;
    }

    /* 门店实况 */
    .rm-live-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      flex-shrink: 0;
    }

    .rm-live-header__title {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      font-size: 18px;
      font-weight: 600;
      color: var(--rm-ink);
      flex-shrink: 0;
    }

    .rm-live-header__actions {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      flex-shrink: 0;
    }

    .rm-live-header__clock {
      color: var(--rm-ink-2);
      font-size: 14px;
      font-family: var(--rm-font-mono);
    }

    .rm-live-header__icon-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line);
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-live-header__icon-btn:hover {
      border-color: var(--rm-brand);
      color: var(--rm-brand);
    }

    .rm-live-header__icon-btn svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* 区域卡片网格：列数按宽度自适应，高度不足时纵向滚动 */
    .rm-region-grid {
      display: grid;
      grid-template-columns: repeat(var(--rm-grid-cols, 2), minmax(0, 1fr));
      grid-auto-rows: max-content;
      align-content: start;
      gap: var(--rm-space-md);
      flex: 1;
      min-height: 0;
      /* 为卡片 hover 上移与阴影留出空间；顶部不能用负 margin，否则会被面板裁剪 */
      padding: 4px 6px 4px 2px;
      margin: 0 -2px -4px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }

    @media (min-width: 1025px) {
      .page-store-live .rm-region-grid {
        gap: var(--rm-space-lg);
      }
    }

    .rm-region-card {
      display: grid;
      grid-template-areas:
        "header header"
        "flow trend"
        "metrics metrics"
        "devices devices";
      grid-template-columns: auto 1fr;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-md);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      cursor: pointer;
      min-height: 0;
      overflow: hidden;
      transition: transform 150ms cubic-bezier(.2,.8,.2,1),
                  box-shadow 150ms cubic-bezier(.2,.8,.2,1),
                  border-color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-region-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--rm-shadow-2);
      border-color: var(--rm-brand);
    }

    .rm-region-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .rm-region-card__name {
      font-size: 15px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-region-card__flow {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      min-width: 80px;
    }

    .rm-region-card__flow-label {
      font-size: 11px;
      color: var(--rm-ink-2);
      white-space: nowrap;
    }

    .rm-region-card__flow-value {
      font-family: var(--rm-font-mono);
      font-size: 30px;
      font-weight: 700;
      color: var(--rm-brand);
      line-height: 1.1;
    }

    .rm-mini-trend {
      align-self: stretch;
      min-width: 0;
      justify-content: center;
    }

    .rm-region-card__metrics {
      display: flex;
      flex-wrap: wrap;
      gap: var(--rm-space-sm);
    }

    .rm-region-card__metric {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--rm-ink-2);
    }

    .rm-region-card__metric svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .rm-region-card__footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: auto;
      padding-top: var(--rm-space-sm);
      border-top: 1px solid var(--rm-line);
    }

    .rm-region-card__devices {
      font-size: 12px;
      color: var(--rm-ink-2);
    }

    /* 区域展开态 */
    .rm-region-detail {
      display: none;
      flex-direction: column;
      gap: var(--rm-space-md);
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 4px 2px;
      margin: -4px -2px;
    }

    .rm-region-detail[data-active="true"] {
      display: flex;
    }

    /* 详情内容超出可视区时由外层滚动，避免卡片被 flex 压缩后内容溢出 */
    .rm-region-detail > * {
      flex-shrink: 0;
    }

    .rm-region-detail__header {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
    }

    .rm-region-detail__back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line);
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-region-detail__back:hover {
      border-color: var(--rm-brand);
      color: var(--rm-brand);
    }

    .rm-region-detail__back svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    .rm-region-detail__title {
      font-size: 18px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-region-detail__hero {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--rm-space-md);
    }

    .rm-region-detail__metric {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-xs);
      padding: var(--rm-space-md);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
    }

    .rm-region-detail__metric-label {
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-region-detail__metric-value {
      font-family: var(--rm-font-mono);
      font-size: 32px;
      font-weight: 700;
      color: var(--rm-ink);
    }

    .rm-region-detail__metric-sub {
      font-size: 12px;
      color: var(--rm-state-success);
    }

    /* 迷你柱状图 */
    .rm-mini-chart {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      height: 40px;
    }

    .rm-mini-chart__bar {
      flex: 1;
      border-radius: 2px 2px 0 0;
      background-color: var(--rm-brand);
      opacity: 0.7;
    }

    .rm-mini-chart__bar:nth-child(odd) {
      opacity: 0.9;
    }

    /* 温湿度曲线示意 */
    .rm-temp-curve {
      height: 80px;
      padding: var(--rm-space-sm);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      position: relative;
      overflow: hidden;
    }

    .rm-temp-curve svg {
      width: 100%;
      height: 100%;
    }

    /* 设备列表 */
    .rm-device-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-device-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--rm-space-sm) var(--rm-space-md);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
    }

    .rm-device-item__name {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      font-size: 14px;
      color: var(--rm-ink);
    }

    .rm-device-item__status {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
      font-size: 12px;
      color: var(--rm-ink-2);
    }

    /* 时间轴 */
    .rm-timeline {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
      position: relative;
      padding-left: 16px;
    }

    .rm-timeline::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 6px;
      bottom: 6px;
      width: 2px;
      background-color: var(--rm-line);
    }

    .rm-timeline__item {
      position: relative;
      padding-left: var(--rm-space-md);
    }

    .rm-timeline__item::before {
      content: "";
      position: absolute;
      left: -11px;
      top: 5px;
      width: 8px;
      height: 8px;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-brand);
    }

    .rm-timeline__time {
      font-family: var(--rm-font-mono);
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    .rm-timeline__text {
      font-size: 13px;
      color: var(--rm-ink-2);
      line-height: 1.5;
    }

    /* AI 对话气泡 */
    .rm-chat-message {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-xs);
      max-width: 85%;
    }

    .rm-chat-message--user {
      align-self: flex-end;
    }

    .rm-chat-message--ai {
      align-self: flex-start;
    }

    .rm-chat-message__bubble {
      padding: var(--rm-space-sm) var(--rm-space-md);
      border-radius: var(--rm-radius-md);
      font-size: 14px;
      line-height: 1.6;
    }

    .rm-chat-message--user .rm-chat-message__bubble {
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink);
      border-bottom-right-radius: var(--rm-radius-sm);
    }

    .rm-chat-message--ai .rm-chat-message__bubble {
      background-color: var(--rm-surface-2);
      color: var(--rm-ink);
      border: 1px solid var(--rm-brand);
      border-bottom-left-radius: var(--rm-radius-sm);
    }

    .rm-chat-message__time {
      font-size: 11px;
      color: var(--rm-ink-3);
    }

    .rm-chat-suggestions {
      display: flex;
      flex-wrap: wrap;
      gap: var(--rm-space-sm);
      margin-top: var(--rm-space-sm);
    }

    .rm-chat-suggestion {
      padding: var(--rm-space-xs) var(--rm-space-sm);
      border-radius: var(--rm-radius-full);
      border: 1px solid var(--rm-line);
      background-color: transparent;
      color: var(--rm-ink-2);
      font-size: 13px;
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-chat-suggestion:hover {
      border-color: var(--rm-brand);
      color: var(--rm-brand);
    }

    /* 历史报表抽屉内容 */
    .rm-history-header {
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-bottom: 1px solid var(--rm-line);
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-history-list {
      flex: 1;
      overflow-y: auto;
      padding: var(--rm-space-md) var(--rm-space-lg);
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-history-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--rm-space-md);
      background-color: var(--rm-surface-2);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      cursor: pointer;
      transition: border-color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-history-item:hover {
      border-color: var(--rm-brand);
    }

    .rm-history-item__title {
      font-size: 14px;
      font-weight: 500;
      color: var(--rm-ink);
    }

    .rm-history-item__date {
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    /* 响应式：MD 以下改为上下堆叠；视频 Tab 仍须优先占满可视区。 */
    @media (max-width: 1024px) {
      .rm-home-layout {
        flex-direction: column;
      }

      .rm-ai-report,
      .rm-store-live {
        flex: none;
        width: 100%;
        overflow: visible;
      }

      .rm-live-panel {
        overflow: visible;
        flex: none;
      }

      .rm-region-grid {
        grid-template-columns: repeat(var(--rm-grid-cols, 2), 1fr);
      }

      .rm-video-grid {
        min-height: 400px;
      }

      .rm-video-grid-viewport {
        min-height: 400px;
      }

      .rm-home-layout[data-video-mode] {
        height: 100%;
        min-height: 0;
      }

      .rm-home-layout[data-video-mode] .rm-ai-report,
      .rm-home-layout[data-video-mode] .rm-divider {
        display: none;
      }

      .rm-home-layout[data-video-mode] .rm-store-live,
      .rm-home-layout[data-video-mode] .rm-live-panel[data-panel="video"] {
        flex: 1;
        min-height: 0;
        overflow: hidden;
      }

      .rm-home-layout[data-video-mode] .rm-video-grid {
        grid-template-rows: repeat(var(--rm-video-rows, 1), minmax(0, 1fr));
        grid-auto-rows: minmax(0, 1fr);
        align-content: stretch;
        min-height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
      }

      .rm-home-layout[data-video-mode] .rm-video-grid-viewport {
        min-height: 0;
      }

      .rm-home-layout[data-video-mode] .rm-video-tile {
        min-height: 0;
        aspect-ratio: auto;
      }
    }

    @media (max-width: 767px) {
      .rm-compare-grid,
      .rm-region-detail__hero {
        grid-template-columns: 1fr;
      }
    }
/* 可拖拽分栏：AI 报告 25%（1 份），门店实况 75%（3 份） */
    .rm-home-layout {
      gap: 0;
    }

    .rm-ai-report {
      flex: none;
      width: 25%;
      min-width: 280px;
      max-width: 60%;
      overflow: hidden;
      padding-right: var(--rm-space-sm);
    }

    .rm-store-live {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      padding-left: var(--rm-space-sm);
    }

    .rm-divider {
      width: 10px;
      flex-shrink: 0;
      cursor: col-resize;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 5;
    }

    .rm-divider::after {
      content: "";
      width: 2px;
      height: 48px;
      border-radius: 1px;
      background-color: var(--rm-line);
      transition: background-color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-divider:hover::after,
    .rm-divider:active::after {
      background-color: var(--rm-brand);
    }

    /* 左侧 AI 报告大卡片 */
    .rm-ai-report-card {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      padding: 0;
    }

    .rm-ai-report-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
    }

    .rm-ai-report-card__title {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-ai-report-card__date {
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-ai-report-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
      padding: 8px var(--rm-space-lg);
      border-bottom: 1px solid var(--rm-line);
      background: var(--rm-surface);
      flex-shrink: 0;
    }

    .rm-ai-report-tab {
      min-width: 0;
      height: 32px;
      border: 1px solid transparent;
      border-radius: var(--rm-radius-sm);
      background: transparent;
      color: var(--rm-ink-2);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    }

    .rm-ai-report-tab:hover {
      color: var(--rm-ink);
      background: rgba(0, 212, 255, 0.06);
    }

    .rm-ai-report-tab--active {
      color: var(--rm-brand);
      background: rgba(0, 212, 255, 0.12);
      border-color: rgba(0, 212, 255, 0.35);
    }

    .rm-ai-report-tab:focus-visible {
      outline: 2px solid var(--rm-brand);
      outline-offset: 2px;
    }

    /* 时间流式混排 */
    .rm-feed {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: var(--rm-space-md) var(--rm-space-lg);
      display: flex;
      flex-direction: column;
      gap: 0;
    }

    .rm-feed-item {
      position: relative;
      padding-left: var(--rm-space-lg);
      padding-bottom: var(--rm-space-md);
      border-left: 2px solid var(--rm-line);
    }

    .rm-feed-item:last-child {
      padding-bottom: 0;
    }

    .rm-feed-item::before {
      content: "";
      position: absolute;
      left: -7px;
      top: 4px;
      width: 12px;
      height: 12px;
      box-sizing: border-box;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-brand);
      border: 2px solid var(--rm-surface);
    }

    .rm-feed-item--alert::before {
      background-color: var(--rm-state-error);
    }

    .rm-feed-item--severity-critical::before { background-color: var(--rm-severity-critical); }
    .rm-feed-item--severity-high::before { background-color: var(--rm-severity-high); }
    .rm-feed-item--severity-medium::before { background-color: var(--rm-severity-medium); }
    .rm-feed-item--severity-low::before { background-color: var(--rm-severity-low); }

    .rm-feed-item__meta {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      margin-bottom: var(--rm-space-xs);
    }

    .rm-feed-item__time {
      font-family: var(--rm-font-mono);
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    .rm-feed-item__badge {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: var(--rm-radius-sm);
      font-size: 11px;
      font-weight: 600;
    }

    .rm-feed-item__badge--morning {
      background-color: rgba(0, 212, 255, 0.12);
      color: var(--rm-brand);
    }

    .rm-feed-item__badge--noon {
      background-color: rgba(245, 158, 11, 0.12);
      color: var(--rm-state-warning);
    }

    .rm-feed-item__badge--evening {
      background-color: rgba(139, 92, 246, 0.12);
      color: var(--rm-state-info);
    }

    .rm-feed-item__badge--alert {
      background-color: rgba(239, 68, 68, 0.15);
      color: var(--rm-state-error);
    }

    .rm-feed-item__badge--severity-critical {
      background-color: rgba(239, 68, 68, 0.15);
      color: var(--rm-severity-critical);
    }

    .rm-feed-item__badge--severity-high {
      background-color: rgba(249, 115, 22, 0.15);
      color: var(--rm-severity-high);
    }

    .rm-feed-item__badge--severity-medium {
      background-color: rgba(245, 158, 11, 0.15);
      color: var(--rm-severity-medium);
    }

    .rm-feed-item__badge--severity-low {
      background-color: rgba(59, 130, 246, 0.15);
      color: var(--rm-severity-low);
    }

    .rm-feed-item__badge--advice {
      background-color: rgba(16, 185, 129, 0.15);
      color: var(--rm-state-success);
    }

    .rm-feed-item__title {
      font-size: 15px;
      font-weight: 600;
      color: var(--rm-ink);
      margin-bottom: var(--rm-space-sm);
    }

    /* 报告卡片：概要/详细模式切换 */
    .rm-feed-item__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--rm-space-sm);
    }
    .rm-feed-item__head .rm-feed-item__title {
      flex: 1;
      min-width: 0;
      margin-bottom: 0;
    }
    .rm-feed-item__head--topology-anomaly {
      flex-direction: column;
    }
    .rm-feed-item__head--topology-anomaly .rm-feed-item__title {
      flex: none;
      width: 100%;
    }
    .rm-feed-item__head--topology-anomaly .rm-feed-item__head-actions {
      align-self: flex-end;
    }
    .rm-feed-item--alert .rm-feed-item__body {
      padding: var(--rm-space-sm);
      border: 1px solid rgba(248, 113, 113, 0.28);
      border-radius: var(--rm-radius-md);
      background: rgba(127, 29, 29, 0.11);
    }
    .rm-feed-item--severity-critical .rm-feed-item__body,
    .rm-feed-item--severity-high .rm-feed-item__body,
    .rm-feed-item--severity-medium .rm-feed-item__body,
    .rm-feed-item--severity-low .rm-feed-item__body {
      padding: var(--rm-space-sm);
      border-radius: var(--rm-radius-md);
    }
    .rm-feed-item--severity-critical .rm-feed-item__body {
      border: 1px solid rgba(248, 113, 113, 0.28);
      background: rgba(127, 29, 29, 0.11);
    }
    .rm-feed-item--severity-high .rm-feed-item__body {
      border: 1px solid rgba(249, 115, 22, 0.30);
      background: rgba(154, 52, 18, 0.10);
    }
    .rm-feed-item--severity-medium .rm-feed-item__body {
      border: 1px solid rgba(245, 158, 11, 0.32);
      background: rgba(120, 53, 15, 0.11);
    }
    .rm-feed-item--severity-low .rm-feed-item__body {
      border: 1px solid rgba(59, 130, 246, 0.28);
      background: rgba(30, 64, 175, 0.09);
    }
    .rm-feed-item--alert .rm-feed-item__title,
    .rm-feed-item--severity-critical .rm-feed-item__title,
    .rm-feed-item--severity-high .rm-feed-item__title,
    .rm-feed-item--severity-medium .rm-feed-item__title,
    .rm-feed-item--severity-low .rm-feed-item__title { font-size: 16px; }
    .rm-feed-item__toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: border-color 150ms ease, color 150ms ease;
    }
    .rm-feed-item__toggle:hover {
      border-color: var(--rm-brand);
      color: var(--rm-brand);
    }
    .rm-feed-item__toggle svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      transition: transform 200ms ease;
    }
    .rm-feed-item[data-expanded="true"] .rm-feed-item__toggle svg {
      transform: rotate(180deg);
    }
    /* 概要模式：显示 summary，隐藏 detail */
    .rm-feed-item:not([data-expanded="true"]) .rm-feed-item__detail { display: none; }
    .rm-feed-item:not([data-expanded="true"]) .rm-feed-item__detail--ai-insight { display: block; }
    .rm-feed-item:not([data-expanded="true"]) .rm-feed-item__summary { display: block; }
    /* 详细模式：显示 detail，隐藏 summary */
    .rm-feed-item[data-expanded="true"] .rm-feed-item__summary { display: none; }
    .rm-feed-item[data-expanded="true"] .rm-feed-item__detail { display: block; }
    .rm-feed-item__summary {
      font-size: 14px;
      color: var(--rm-ink-2);
      line-height: 1.6;
    }

    .rm-feed-item__event-overview {
      margin-top: var(--rm-space-sm);
    }

    .rm-feed-item__event-overview--with-picture {
      display: flex;
      align-items: flex-start;
      gap: var(--rm-space-sm);
    }

    .rm-feed-item__event-overview .rm-feed-item__summary {
      flex: 1;
      min-width: 0;
      margin: 0;
    }

    .rm-feed-item__event-picture {
      position: relative;
      display: block;
      flex: 0 0 96px;
      width: 96px;
      height: 64px;
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background: var(--rm-surface-2);
      font: inherit;
      cursor: zoom-in;
    }

    .rm-feed-item__event-picture img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 180ms ease;
    }

    .rm-feed-item__event-picture:hover img {
      transform: scale(1.03);
    }

    .rm-feed-item__event-picture:focus-visible {
      outline: 2px solid var(--rm-brand);
      outline-offset: 2px;
    }

    .rm-feed-item__event-picture-label {
      position: absolute;
      right: 4px;
      bottom: 4px;
      padding: 2px 4px;
      border-radius: 3px;
      background: rgba(15, 23, 42, 0.72);
      color: #fff;
      font-size: 10px;
      line-height: 1.2;
    }

    /* 门店实况时间流卡片：按事件、AI 分析和运营报告建立稳定的信息层级 */
    .rm-feed-item__receipt {
      font-family: var(--rm-font-mono);
      font-size: 11px;
      color: var(--rm-ink-3);
    }

    .rm-feed-item__head-actions {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    .rm-feed-item__urgency {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      padding: 3px 8px;
      border: 1px solid transparent;
      border-radius: var(--rm-radius-sm);
      font-size: 11px;
      font-weight: 750;
      line-height: 1;
      white-space: nowrap;
    }

    .rm-feed-item__urgency--critical {
      border-color: rgba(239, 68, 68, .46);
      background: rgba(239, 68, 68, .22);
      color: #fca5a5;
      box-shadow: 0 0 0 1px rgba(239, 68, 68, .08), 0 0 16px rgba(239, 68, 68, .14);
    }

    .rm-feed-item__urgency--high {
      border-color: rgba(249, 115, 22, .4);
      background: rgba(249, 115, 22, .18);
      color: #fdba74;
    }

    .rm-feed-item--event .rm-feed-item__body,
    .rm-feed-item--insight .rm-feed-item__body,
    .rm-feed-item--advice .rm-feed-item__body,
    .rm-feed-item--report .rm-feed-item__body {
      position: relative;
      padding: 14px;
      border: 1px solid var(--rm-line);
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 44%), var(--rm-surface);
      box-shadow: 0 8px 24px rgba(2,8,23,.14);
      overflow: hidden;
    }

    .rm-feed-item--event .rm-feed-item__body {
      border-left-width: 3px;
    }
    .rm-feed-item--event.rm-feed-item--severity-critical .rm-feed-item__body { border-color: rgba(239,68,68,.42); border-left-color: var(--rm-severity-critical); }
    .rm-feed-item--event.rm-feed-item--severity-high .rm-feed-item__body { border-color: rgba(249,115,22,.4); border-left-color: var(--rm-severity-high); }
    .rm-feed-item--event.rm-feed-item--severity-medium .rm-feed-item__body { border-color: rgba(245,158,11,.4); border-left-color: var(--rm-severity-medium); }
    .rm-feed-item--event.rm-feed-item--severity-low .rm-feed-item__body { border-color: rgba(59,130,246,.38); border-left-color: var(--rm-severity-low); }

.rm-feed-item--insight .rm-feed-item__body {
  border-top: 0;
  border-left: 3px solid #22d3ee;
      background: linear-gradient(155deg, rgba(34,211,238,.08), transparent 42%), var(--rm-surface);
    }
.rm-feed-item--advice .rm-feed-item__body {
  border-top: 0;
  border-left: 3px solid #60a5fa;
      background: linear-gradient(155deg, rgba(96,165,250,.08), transparent 42%), var(--rm-surface);
    }
.rm-feed-item--report .rm-feed-item__body {
  border-top: 0;
  border-left: 3px solid #60a5fa;
      background: linear-gradient(155deg, rgba(96,165,250,.08), transparent 42%), var(--rm-surface);
    }

    .rm-feed-item--event .rm-feed-item__title,
    .rm-feed-item--insight .rm-feed-item__title,
    .rm-feed-item--advice .rm-feed-item__title,
    .rm-feed-item--report .rm-feed-item__title {
      font-size: 16px;
      font-weight: 700;
      line-height: 1.45;
      letter-spacing: .1px;
    }

    .rm-feed-item--event .rm-feed-item__event-overview {
      margin-top: 10px;
    }
    .rm-feed-item--event .rm-feed-item__event-overview--with-picture {
      align-items: stretch;
      gap: 10px;
    }
    .rm-feed-item__event-copy {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 9px;
    }
    .rm-feed-item__event-metrics {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .rm-feed-item__event-metric {
      min-width: 0;
      padding: 9px 10px;
      border: 0;
      border-radius: 8px;
      background: rgba(14, 165, 233, .09);
    }
    .rm-feed-item__event-metric span {
      display: block;
      margin-bottom: 3px;
      overflow: hidden;
      color: var(--rm-ink-3);
      font-size: 10px;
      font-weight: 400;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rm-feed-item__event-metric strong {
      display: block;
      color: var(--rm-ink);
      font-family: var(--rm-font-mono);
      font-size: 19px;
      font-weight: 750;
      line-height: 1.25;
    }
    .rm-alarm-value-line {
      display: flex !important;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 8px;
      row-gap: 3px;
      min-width: 0;
    }
    .rm-feed-item__event-metric .rm-alarm-current-value {
      display: inline;
      margin-bottom: 0;
      overflow: visible;
      color: inherit;
      font-family: inherit;
      font-size: inherit;
      font-weight: inherit;
      line-height: inherit;
    }
    .rm-alarm-compare {
      flex-shrink: 0;
      font-family: var(--rm-font-sans);
      font-size: 12px;
      font-weight: 750;
      line-height: 1;
      white-space: nowrap;
    }
    .rm-alarm-compare--up { color: #fb7185; }
    .rm-alarm-compare--down { color: #fb7185; }
    .rm-feed-item__event-source {
      min-width: 0;
      padding: 8px 10px;
      border-radius: 8px;
      background: transparent;
    }
    .rm-feed-item__event-source span {
      display: block;
      margin-bottom: 2px;
      color: var(--rm-ink-3);
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0;
    }
    .rm-feed-item__event-source strong {
      display: block;
      overflow: hidden;
      color: var(--rm-ink);
      font-size: 13px;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rm-feed-item__event-times {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      flex-wrap: wrap;
    }
    .rm-feed-item__event-times > span {
      display: flex;
      flex-direction: column;
      gap: 1px;
    }
    .rm-feed-item__event-times small {
      color: var(--rm-ink-3);
      font-size: 10px;
    }
    .rm-feed-item__event-times strong {
      color: var(--rm-ink);
      font-family: var(--rm-font-mono);
      font-size: 12px;
      font-weight: 700;
      font-variant-numeric: tabular-nums;
    }
    .rm-feed-item__event-desc,
    .rm-feed-item__event-detail {
      color: var(--rm-ink-2);
      font-size: 12px;
      line-height: 1.55;
    }
    .rm-feed-item--event .rm-feed-item__event-picture {
      flex: 0 0 112px;
      width: 112px;
      height: 78px;
      border-radius: 9px;
      box-shadow: 0 4px 12px rgba(2,8,23,.18);
    }
    .rm-feed-item__event-action {
      margin-top: 10px;
      padding: 10px;
      border-radius: 8px;
      background: rgba(245,158,11,.09);
      border: 1px solid rgba(245,158,11,.18);
    }
    .rm-feed-item__event-action > span {
      display: block;
      margin-bottom: 4px;
      color: var(--rm-state-warning);
      font-size: 11px;
      font-weight: 700;
    }
    .rm-feed-item__event-action p {
      margin: 0;
      color: var(--rm-ink-2);
      font-size: 12px;
      line-height: 1.55;
    }

    .rm-ai-analysis {
      margin-top: 10px;
    }
    .rm-ai-analysis__label {
      display: inline-flex;
      align-items: center;
      height: 24px;
      margin-bottom: 9px;
      padding: 0 10px;
      border-radius: 999px;
      color: #22d3ee;
      background: rgba(34,211,238,.11);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .3px;
    }
    .rm-ai-analysis--advice .rm-ai-analysis__label {
      color: #60a5fa;
      background: rgba(96,165,250,.12);
    }
    .rm-ai-analysis__sections {
      display: grid;
      gap: 8px;
    }
    .rm-ai-analysis__section {
      padding: 10px 11px;
      border: 1px solid var(--rm-line);
      border-radius: 9px;
      background: rgba(2,8,23,.12);
    }
    .rm-ai-analysis__section-label {
      display: block;
      margin-bottom: 4px;
      color: var(--rm-brand);
      font-size: 11px;
      font-weight: 700;
    }
    .rm-ai-analysis--advice .rm-ai-analysis__section-label { color: #60a5fa; }
    .rm-ai-analysis__section p {
      margin: 0;
      color: var(--rm-ink-2);
      font-size: 13px;
      line-height: 1.65;
    }

    .rm-report-sections {
      display: grid;
      gap: 8px;
      margin-top: 10px;
    }
    .rm-report-section {
      display: grid;
      grid-template-columns: 28px minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      padding: 10px;
      border: 1px solid var(--rm-line);
      border-radius: 9px;
      background: rgba(2,8,23,.1);
    }
    .rm-report-section__index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      color: #93c5fd;
      background: rgba(96,165,250,.14);
      font-family: var(--rm-font-mono);
      font-size: 11px;
      font-weight: 700;
    }
    .rm-report-section p {
      margin: 0;
      color: var(--rm-ink-2);
      font-size: 13px;
      line-height: 1.65;
    }
    .rm-feed-item--report .rm-feed-item__summary {
      margin-top: 10px;
      padding: 10px 11px;
      border-radius: 9px;
      background: var(--rm-surface-2);
      font-size: 13px;
      line-height: 1.65;
    }

    .rm-advice-priority--critical {
      color: var(--rm-severity-critical);
      background: rgba(239,68,68,.13);
    }

    @media (max-width: 460px) {
      .rm-feed-item--event .rm-feed-item__event-picture {
        flex-basis: 96px;
        width: 96px;
        height: 70px;
      }
      .rm-feed-item__event-times { gap: 8px 12px; }
      .rm-report-section { grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
      .rm-report-section__index { width: 24px; height: 24px; }
    }

    .rm-ai-picture-viewer {
      position: fixed;
      inset: 0;
      z-index: 100001;
      overflow: hidden;
      background: rgba(0, 0, 0, 0.52);
    }

    .rm-ai-picture-viewer__toolbar {
      position: absolute;
      bottom: 30px;
      left: 50%;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 14px;
      height: 44px;
      padding: 0 20px;
      border-radius: 22px;
      background: rgba(0, 0, 0, 0.55);
      color: #fff;
      transform: translateX(-50%);
      box-sizing: border-box;
    }

    .rm-ai-picture-viewer__toolbar button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px;
      height: 30px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: #fff;
      cursor: pointer;
    }

    .rm-ai-picture-viewer__toolbar button:hover {
      background: rgba(255, 255, 255, 0.16);
    }

    .rm-ai-picture-viewer__toolbar svg {
      width: 21px;
      height: 21px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .rm-ai-picture-viewer__toolbar button:focus-visible,
    .rm-ai-picture-viewer__nav:focus-visible,
    .rm-ai-picture-viewer__close:focus-visible {
      outline: 2px solid var(--rm-brand);
      outline-offset: 2px;
    }

    .rm-ai-picture-viewer__toolbar button:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .rm-ai-picture-viewer__divider {
      width: 1px;
      height: 20px;
      background: rgba(255, 255, 255, 0.35);
    }

    .rm-ai-picture-viewer__stage {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      touch-action: none;
    }

    .rm-ai-picture-viewer__stage img {
      display: block;
      max-width: none;
      max-height: none;
      cursor: grab;
      user-select: none;
      transition: transform 180ms ease;
      will-change: transform;
    }

    .rm-ai-picture-viewer__stage img.is-dragging {
      cursor: grabbing;
      transition: none;
    }

    .rm-ai-picture-viewer__error {
      position: absolute;
      top: 50%;
      left: 50%;
      color: rgba(255, 255, 255, 0.7);
      font-size: 14px;
      transform: translate(-50%, -50%);
    }

    .rm-ai-picture-viewer__nav {
      position: absolute;
      top: 50%;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.35);
      color: #fff;
      cursor: pointer;
      transform: translateY(-50%);
    }

    .rm-ai-picture-viewer__nav:hover {
      background: rgba(0, 0, 0, 0.55);
    }

    .rm-ai-picture-viewer__nav[hidden] {
      display: none;
    }

    .rm-ai-picture-viewer__nav svg {
      width: 26px;
      height: 26px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .rm-ai-picture-viewer__nav--previous {
      left: 40px;
    }

    .rm-ai-picture-viewer__nav--next {
      right: 40px;
    }

    .rm-ai-picture-viewer__close {
      position: absolute;
      top: 40px;
      right: 40px;
      z-index: 2;
      width: 40px;
      height: 40px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font: inherit;
      font-size: 28px;
      line-height: 38px;
      cursor: pointer;
    }

    .rm-ai-picture-viewer__close:hover {
      background: rgba(0, 0, 0, 0.68);
    }

    @media (max-width: 640px) {
      .rm-feed-item__event-picture {
        flex-basis: 80px;
        width: 80px;
        height: 56px;
      }

      .rm-ai-picture-viewer__toolbar {
        bottom: 20px;
        gap: 8px;
        padding: 0 14px;
      }

      .rm-ai-picture-viewer__close {
        top: 16px;
        right: 16px;
      }

      .rm-ai-picture-viewer__nav--previous {
        left: 16px;
      }

      .rm-ai-picture-viewer__nav--next {
        right: 16px;
      }
    }

    .rm-feed-item__content {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
    }

    .rm-feed-section__title {
      font-size: 13px;
      font-weight: 600;
      color: var(--rm-ink-2);
      margin-bottom: var(--rm-space-xs);
    }

    .rm-feed-section p {
      color: var(--rm-ink-2);
      font-size: 14px;
      line-height: 1.6;
    }

    .rm-feed-section p + p {
      margin-top: var(--rm-space-sm);
    }

    /* 时间流内部紧凑对比网格 */
    .rm-compare-grid--compact {
      grid-template-columns: repeat(3, 1fr);
      gap: var(--rm-space-sm);
    }

    .rm-compare-grid--compact .rm-compare-card__number {
      font-size: 18px;
    }

    .rm-compare-grid--compact .rm-compare-card__delta {
      font-size: 12px;
    }

    /* 嵌入大卡片内的待处理事项 */
    .rm-ai-report-card .rm-todo-card {
      border-top: 1px solid var(--rm-line);
      border-radius: 0;
      background-color: transparent;
      border-left: none;
      border-right: none;
      border-bottom: none;
      flex-shrink: 0;
      padding: var(--rm-space-md) var(--rm-space-lg);
    }

    /* ====== AI 建议卡片（时间流内嵌） ====== */

    /* 时间线优先级圆点 */
    .rm-feed-item--advice-high::before { background-color: var(--rm-state-error); }
    .rm-feed-item--advice-medium::before { background-color: var(--rm-state-warning); }
    .rm-feed-item--advice-low::before { background-color: var(--rm-brand); }

    /* feed-item__head 在建议卡片中：标题 + ID 右对齐 */
    .rm-feed-item--advice-high .rm-feed-item__head,
    .rm-feed-item--advice-medium .rm-feed-item__head,
    .rm-feed-item--advice-low .rm-feed-item__head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--rm-space-sm);
    }

    .rm-feed-item--advice-high .rm-feed-item__title,
    .rm-feed-item--advice-medium .rm-feed-item__title,
    .rm-feed-item--advice-low .rm-feed-item__title {
      font-size: 15px;
      font-weight: 600;
      color: var(--rm-ink);
      margin-bottom: 0;
      flex: 1;
      min-width: 0;
    }

    /* 优先级标签 */
    .rm-advice-priority {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px var(--rm-space-sm);
      border-radius: var(--rm-radius-full);
      font-size: 11px;
      font-weight: 600;
      font-family: var(--rm-font-sans);
    }
    .rm-advice-priority--high { background-color: rgba(249,115,22,0.15); color: var(--rm-severity-high); }
    .rm-advice-priority--medium { background-color: rgba(245,158,11,0.15); color: var(--rm-severity-medium); }
    .rm-advice-priority--low { background-color: rgba(59,130,246,0.15); color: var(--rm-severity-low); }

    /* 建议编号 */
    .rm-advice-card__id {
      font-family: var(--rm-font-mono);
      font-size: 12px;
      color: var(--rm-ink-3);
      flex-shrink: 0;
    }

    /* AI 解读区 */
    .rm-advice-insight {
      background-color: rgba(0,212,255,0.04);
      border: 1px solid rgba(0,212,255,0.18);
      border-radius: var(--rm-radius-sm);
      padding: var(--rm-space-md);
      display: flex;
      gap: var(--rm-space-md);
      box-shadow: var(--rm-shadow-ai);
      margin-top: var(--rm-space-sm);
    }
    .rm-advice-insight__icon {
      width: 28px;
      height: 28px;
      flex-shrink: 0;
      border-radius: var(--rm-radius-sm);
      background: radial-gradient(circle at 35% 35%, var(--rm-brand) 0%, var(--rm-brand-active) 70%, transparent 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 0 10px rgba(0,212,255,0.35);
    }
    .rm-advice-insight__icon svg {
      width: 16px;
      height: 16px;
      stroke: var(--rm-brand-ink);
      fill: none;
      stroke-width: 2.2;
    }
    .rm-advice-insight__body { flex: 1; min-width: 0; }
    .rm-advice-insight__body--no-icon { padding-left: 0; }
    .rm-advice-insight__label {
      font-size: 12px;
      font-weight: 600;
      color: var(--rm-brand);
      margin-bottom: 6px;
      font-family: var(--rm-font-sans);
    }
    .rm-advice-insight__text { color: var(--rm-ink); }

    /* 概要/详细模式切换 */
    .rm-advice-insight__text--summary { display: block; }
    .rm-advice-insight__text--detail { display: none; }
    .rm-feed-item[data-expanded="true"] .rm-advice-insight__text--summary { display: none; }
    .rm-feed-item[data-expanded="true"] .rm-advice-insight__text--detail { display: block; }

    /* 展开收起按钮 */
    .rm-advice-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-top: 8px;
      padding: 2px 0;
      border: none;
      background: none;
      color: var(--rm-brand);
      font-family: var(--rm-font-sans);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 150ms ease;
    }
    .rm-advice-toggle:hover { opacity: 0.8; }
    .rm-advice-toggle svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      transition: transform 200ms ease;
    }
    .rm-feed-item[data-expanded="true"] .rm-advice-toggle svg {
      transform: rotate(180deg);
    }

    /* 底部信息行 */
    .rm-advice-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      flex-wrap: wrap;
      margin-top: var(--rm-space-sm);
    }
    .rm-advice-meta__left {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
      flex-wrap: wrap;
      flex: 1;
      min-width: 0;
    }
    .rm-advice-meta__tags {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      flex-wrap: wrap;
    }
    .rm-channel-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px var(--rm-space-sm);
      border-radius: var(--rm-radius-sm);
      font-size: 11px;
      font-weight: 600;
      font-family: var(--rm-font-sans);
    }
    .rm-channel-tag--safe {
      background-color: rgba(139,92,246,0.15);
      color: var(--rm-state-info);
      border: 1px solid rgba(139,92,246,0.3);
    }
    .rm-channel-tag--ops {
      background-color: rgba(0,212,255,0.12);
      color: var(--rm-brand);
      border: 1px solid rgba(0,212,255,0.3);
    }
    .rm-advice-meta__stat {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      color: var(--rm-ink-2);
      font-family: var(--rm-font-sans);
    }
    .rm-advice-meta__stat-value {
      font-family: var(--rm-font-mono);
      font-weight: 600;
      color: var(--rm-ink);
    }
    .rm-advice-meta__time {
      font-size: 12px;
      color: var(--rm-ink-3);
    }
    .rm-advice-actions {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      flex-shrink: 0;
    }

    /* 忽略按钮：纯文字风格 */
    .rm-advice-btn-ignore {
      border: none !important;
      background: none !important;
      color: var(--rm-ink-3) !important;
      padding: 0 4px !important;
      height: 28px;
    }
    .rm-advice-btn-ignore:hover {
      color: var(--rm-state-error) !important;
      background: none !important;
      border: none !important;
    }

    /* 门店实况重点提醒消息框 */
    .rm-live-alert {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
      padding: var(--rm-space-md) var(--rm-space-lg);
      background-color: rgba(239, 68, 68, 0.08);
      border: 1px solid rgba(239, 68, 68, 0.35);
      border-radius: var(--rm-radius-md);
      position: relative;
      animation: rm-pulse-alert 1.5s ease-in-out infinite;
    }

    .rm-live-alert__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      border-radius: var(--rm-radius-full);
      background-color: rgba(239, 68, 68, 0.15);
      color: var(--rm-state-error);
    }

    .rm-live-alert__content {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-xs);
    }

    .rm-live-alert__title {
      font-size: 14px;
      font-weight: 600;
      color: var(--rm-state-error);
    }

    .rm-live-alert__text {
      font-size: 13px;
      color: var(--rm-ink-2);
      line-height: 1.5;
    }

    .rm-live-alert__time {
      font-size: 12px;
      color: var(--rm-ink-3);
      flex-shrink: 0;
    }

    .rm-live-alert__close {
      width: 24px;
      height: 24px;
      border-radius: var(--rm-radius-sm);
      border: none;
      background-color: transparent;
      color: var(--rm-ink-3);
      font-size: 18px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .rm-live-alert__close:hover {
      background-color: rgba(239, 68, 68, 0.15);
      color: var(--rm-state-error);
    }

    /* 响应式：中屏以下取消拖拽，恢复上下堆叠 */
    @media (max-width: 1024px) {
      .rm-ai-report {
        width: 100% !important;
        min-width: 0;
        max-width: none;
        padding-right: 0;
      }

      .rm-store-live {
        flex: none;
        width: 100%;
        overflow: visible;
        padding-left: 0;
      }

      .rm-divider {
        display: none;
      }
    }

    /* ====== AI助手富对话样式（移植自 qa-panel） ====== */
    .rm-qa-conversation {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-lg);
      padding-bottom: var(--rm-space-md);
    }
    .rm-qa-turn {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }
    .rm-qa-msg--user {
      align-self: flex-end;
      max-width: 80%;
      background-color: var(--rm-surface-2);
      border-radius: var(--rm-radius-lg) var(--rm-radius-lg) var(--rm-radius-sm) var(--rm-radius-lg);
      padding: 10px 14px;
      color: var(--rm-ink);
      font-size: 14px;
      line-height: 1.5;
      box-shadow: var(--rm-shadow-1);
    }
    .rm-qa-msg--ai {
      align-self: flex-start;
      max-width: 92%;
    }
    .rm-qa-ai-bubble {
      background-color: var(--rm-surface);
      border-left: 3px solid var(--rm-brand);
      border-radius: var(--rm-radius-sm) var(--rm-radius-md) var(--rm-radius-md) var(--rm-radius-md);
      padding: 14px 16px;
      box-shadow: var(--rm-shadow-ai);
      color: var(--rm-ink);
      font-family: var(--rm-font-sans);
      font-size: 14px;
      line-height: 1.6;
    }
    .rm-qa-ai-bubble p { margin: 0; }
    .rm-qa-ai-bubble p + p { margin-top: 8px; }
    .rm-qa-data-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--rm-space-sm);
      margin: 10px 0;
    }
    .rm-qa-data-item {
      background-color: var(--rm-surface-2);
      border-radius: var(--rm-radius-sm);
      padding: 8px 10px;
    }
    .rm-qa-data-label {
      font-size: 11px;
      color: var(--rm-ink-2);
      line-height: 1.4;
    }
    .rm-qa-data-value {
      font-family: var(--rm-font-mono);
      font-size: 18px;
      font-weight: 600;
      color: var(--rm-ink);
      margin-top: 2px;
      line-height: 1.2;
    }
    .rm-qa-data-value--up { color: var(--rm-state-success); }
    .rm-qa-data-value--down { color: var(--rm-state-error); }
    .rm-qa-data-value--warn { color: var(--rm-state-warning); }
    .rm-qa-table {
      width: 100%;
      border-collapse: collapse;
      margin: 10px 0;
      font-size: 13px;
    }
    .rm-qa-table th {
      text-align: left;
      padding: 6px 8px;
      background-color: var(--rm-surface-2);
      color: var(--rm-ink-2);
      font-weight: 600;
      border-bottom: 1px solid var(--rm-line);
      white-space: nowrap;
    }
    .rm-qa-table td {
      padding: 6px 8px;
      border-bottom: 1px solid var(--rm-line);
      color: var(--rm-ink);
    }
    .rm-qa-table td.rm-is-num {
      font-family: var(--rm-font-mono);
      text-align: right;
    }
    .rm-qa-table tr.rm-is-highlight td {
      color: var(--rm-brand);
      font-weight: 600;
      background-color: rgba(0,212,255,0.06);
    }
    .rm-qa-num {
      font-family: var(--rm-font-mono);
      font-weight: 600;
    }
    .rm-qa-num--up { color: var(--rm-state-success); }
    .rm-qa-num--warn { color: var(--rm-state-warning); }
    .rm-qa-num--danger { color: var(--rm-state-error); }
    .rm-qa-action-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--rm-brand);
      font-size: 13px;
      font-weight: 500;
      text-decoration: none;
      margin-top: 8px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      font-family: var(--rm-font-sans);
    }
    .rm-qa-action-link:hover {
      color: var(--rm-brand-hover);
      text-decoration: underline;
    }
    .rm-qa-action-link svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }
    .rm-qa-meta {
      font-size: 11px;
      color: var(--rm-ink-3);
      margin-top: 4px;
    }
    .rm-qa-meta--user { text-align: right; }
    .rm-qa-suggested {
      padding: var(--rm-space-md) 0 var(--rm-space-sm);
      border-top: 1px solid var(--rm-line);
    }
    .rm-qa-suggested__title {
      font-size: 13px;
      font-weight: 600;
      color: var(--rm-ink-2);
      margin-bottom: var(--rm-space-sm);
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
    }
    .rm-qa-suggested__title svg {
      width: 14px;
      height: 14px;
      stroke: var(--rm-brand);
      fill: none;
      stroke-width: 2;
    }
    .rm-qa-suggested__tags {
      display: flex;
      flex-wrap: wrap;
      gap: var(--rm-space-sm);
    }
    .rm-qa-suggested-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-full);
      color: var(--rm-ink);
      font-size: 12px;
      cursor: pointer;
      transition: border-color 150ms cubic-bezier(.2,.8,.2,1), color 150ms cubic-bezier(.2,.8,.2,1), background-color 150ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-qa-suggested-tag:hover {
      border-color: var(--rm-brand);
      color: var(--rm-brand);
      background-color: rgba(0,212,255,0.08);
    }
    .rm-qa-suggested-tag svg {
      width: 12px;
      height: 12px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }
    /* 抽屉内对话区域滚动优化 */
    .rm-ai-drawer__body {
      flex: 1;
      overflow-y: auto;
      padding: var(--rm-space-md) var(--rm-space-lg);
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
    }

    /* ====== 操作按钮：忽略左对齐 + 采纳/处理右对齐 ====== */
    .rm-mini-advice-card__actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      margin-top: var(--rm-space-sm);
    }
    .rm-feed-item__actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      margin-top: var(--rm-space-sm);
    }
    /* 忽略按钮：纯文字风格，无边框无竖线 */
    .rm-mini-advice-card__actions .rm-btn-secondary,
    .rm-feed-item__actions .rm-btn-secondary {
      border: none;
      background: none;
      color: var(--rm-ink-3);
      padding: 0 4px;
      height: 28px;
    }
    .rm-mini-advice-card__actions .rm-btn-secondary:hover,
    .rm-feed-item__actions .rm-btn-secondary:hover {
      color: var(--rm-state-error);
      background: none;
      border: none;
    }

    /* ====== 区域卡片设备-数据关联 ====== */
    .rm-region-card__devices-data {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: var(--rm-space-xs) 0;
      max-height: 89px;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .rm-device-chip {
      display: inline-flex;
      align-items: center;
      flex: 0 0 24px;
      height: 24px;
      min-height: 24px;
      gap: 6px;
      padding: 3px 10px;
      background-color: var(--rm-surface-2);
      border-radius: var(--rm-radius-full);
      font-size: 11px;
      color: var(--rm-ink-2);
      line-height: 1.4;
    }
    .rm-device-chip .rm-status-dot {
      width: 6px;
      height: 6px;
    }
    .rm-device-chip__name {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow-wrap: normal;
    }
    .rm-device-chip__arrow {
      color: var(--rm-ink-3);
    }
    .rm-device-chip__data {
      color: var(--rm-brand);
      font-weight: 600;
    }

    /* ====== AI 智能图标（六边形芯片 + 神经网络 + 发光核心） ====== */
    .rm-ai-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .rm-ai-icon svg {
      width: 100%;
      height: 100%;
      display: block;
    }
    .rm-ai-icon--sm { width: 28px; height: 28px; }
    .rm-ai-icon--xs { width: 24px; height: 24px; }
    .rm-ai-icon--lg { width: 40px; height: 40px; }

    /* 外环旋转 */
    .rm-ai-icon__ring {
      transform-box: view-box;
      transform-origin: center;
      animation: rm-ai-spin 8s linear infinite;
    }
    /* 六边形脉冲 */
    .rm-ai-icon__hex {
      transform-box: view-box;
      transform-origin: center;
      animation: rm-ai-hex-pulse 3s ease-in-out infinite;
    }
    /* 中心核心呼吸 */
    .rm-ai-icon__core {
      transform-box: view-box;
      transform-origin: center;
      animation: rm-ai-breathe 2s ease-in-out infinite;
    }
    /* 神经节点闪烁 */
    .rm-ai-icon__node {
      animation: rm-ai-blink 1.5s ease-in-out infinite;
    }
    .rm-ai-icon__node:nth-child(2) { animation-delay: 0.3s; }
    .rm-ai-icon__node:nth-child(3) { animation-delay: 0.6s; }
    .rm-ai-icon__node:nth-child(4) { animation-delay: 0.9s; }
    /* 光晕呼吸 */
    .rm-ai-icon__glow {
      transform-box: view-box;
      transform-origin: center;
      animation: rm-ai-glow 2.5s ease-in-out infinite;
    }

    @keyframes rm-ai-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    @keyframes rm-ai-hex-pulse {
      0%, 100% { opacity: 0.6; }
      50% { opacity: 1; }
    }
    @keyframes rm-ai-breathe {
      0%, 100% { opacity: 0.7; transform: scale(0.85); }
      50% { opacity: 1; transform: scale(1.15); }
    }
    @keyframes rm-ai-blink {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
    }
    @keyframes rm-ai-glow {
      0%, 100% { opacity: 0.5; transform: scale(0.95); }
      50% { opacity: 1; transform: scale(1.1); }
    }

    /* ====== 锁屏浮层 ====== */
    .rm-lock-fab {
      position: fixed;
      right: 24px;
      bottom: 24px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink);
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(0, 212, 255, 0.25), 0 8px 24px rgba(0, 0, 0, 0.2);
      z-index: 9998;
      transition: transform 150ms ease, box-shadow 150ms ease;
    }
    .rm-lock-fab:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 212, 255, 0.35), 0 10px 28px rgba(0, 0, 0, 0.25);
    }
    .rm-lock-fab svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    /* 设备控制抽屉打开时，锁屏按钮移到抽屉下方且不遮挡 */
    body.rm-device-drawer-open .rm-lock-fab {
      right: calc(50% - 480px);
      z-index: 8999;
      transition: right 300ms cubic-bezier(.2,.8,.2,1), z-index 0s;
    }
    @media (max-width: 1024px) {
      body.rm-device-drawer-open .rm-lock-fab {
        right: 50%;
        transform: translateX(50%);
      }
    }
    #lockScreenOverlay,
    .rm-lock-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background-color: rgba(15, 23, 42, 0.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      z-index: 100001;
    }
    #lockScreenOverlay[data-active="true"],
    .rm-lock-overlay[data-active="true"] {
      display: flex;
    }
    .rm-lock-overlay__content {
      width: 100%;
      max-width: 360px;
      margin: 20px;
      padding: 40px 32px;
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-large);
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
      text-align: center;
    }
    .rm-lock-overlay__icon {
      width: 64px;
      height: 64px;
      margin: 0 auto 20px;
      color: var(--rm-brand);
    }
    .rm-lock-overlay__icon svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
    }
    .rm-lock-overlay__title {
      margin: 0 0 24px;
      font-size: 20px;
      font-weight: 600;
      color: var(--rm-ink);
      letter-spacing: 0.5px;
    }
    .rm-lock-overlay__input {
      width: 100%;
      height: 44px;
      padding: 0 14px;
      background-color: var(--rm-bg);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-medium);
      color: var(--rm-ink);
      font-size: 14px;
      outline: none;
      box-sizing: border-box;
      transition: border-color 150ms ease, box-shadow 150ms ease;
    }
    .rm-lock-overlay__input:focus {
      border-color: var(--rm-brand);
      box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.12);
    }
    .rm-lock-overlay__error {
      min-height: 20px;
      margin: 10px 0 24px;
      font-size: 12px;
      color: var(--rm-state-error);
      text-align: left;
      opacity: 0;
      transition: opacity 150ms ease;
    }
    .rm-lock-overlay__error[data-visible="true"] {
      opacity: 1;
    }
    .rm-lock-overlay__unlock-btn {
      width: 100%;
      height: 44px;
      border: none;
      border-radius: var(--rm-radius-medium);
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink);
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 150ms ease, transform 150ms ease;
    }
    .rm-lock-overlay__unlock-btn:hover {
      background-color: var(--rm-brand-hover);
    }
    .rm-lock-overlay__unlock-btn:active {
      transform: scale(0.98);
    }
/* ===== 页面样式: 设置中心 ===== */

/* ============================================================
   MartFlow — 品牌设计 Token
   依据：设计方案 §5.2 色彩体系 / §5.3 字体规范 / §5.4 间距栅格 / §5.8 阴影层级
   品牌前缀：rm
   ============================================================ */

/* ---------- 深色模式（默认） ---------- */
:root {
  /* 背景层 */
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;

  /* 边框 */
  --rm-line: #334155;

  /* 文字 */
  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;

  /* 品牌色（单一主色） */
  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;

  /* 状态色（仅语义状态使用） */
  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;

  /* 数据可视化 */
  --rm-chart-flow: #00D4FF;
  --rm-chart-flow-2: #0EA5E9;
  --rm-chart-temp: #F59E0B;
  --rm-chart-temp-2: #EF4444;

  /* 阴影层级（静态阴影 alpha<=0.05，浮动层阴影用于 modal/popover/dropdown） */
  --rm-shadow-1: 0 1px 3px rgba(0,0,0,0.05);
  --rm-shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --rm-shadow-3: 0 8px 32px rgba(0,0,0,0.12);
  --rm-shadow-alert: 0 0 16px rgba(239,68,68,0.08);
  --rm-shadow-ai: 0 0 12px rgba(0,212,255,0.05);

  /* ---- 语义别名（apply-html-head-contract.mjs 要求） ---- */
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
  --rm-radius-small: 6px;
  --rm-radius-medium: 12px;
  --rm-radius-large: 16px;
}

.dark {
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;
  --rm-line: #334155;
  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;
  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;
  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

/* ---------- 高对比度模式（浅色，§5.2 评审决议 R-04） ---------- */
.light {
  --rm-bg: #F8FAFC;
  --rm-surface: #FFFFFF;
  --rm-surface-2: #F1F5F9;

  --rm-line: #CBD5E1;

  --rm-ink: #0F172A;
  --rm-ink-2: #475569;
  --rm-ink-3: #94A3B8;

  --rm-brand: #0284C7;
  --rm-brand-hover: #0369A1;
  --rm-brand-active: #075985;
  --rm-brand-ink: #FFFFFF;

  --rm-state-success: #059669;
  --rm-state-warning: #D97706;
  --rm-state-error: #DC2626;
  --rm-state-info: #7C3AED;

  --rm-shadow-1: 0 1px 3px rgba(15,23,42,0.05);
  --rm-shadow-2: 0 4px 12px rgba(15,23,42,0.08);
  --rm-shadow-3: 0 8px 32px rgba(15,23,42,0.12);
  --rm-shadow-alert: 0 0 16px rgba(220,38,38,0.05);
  --rm-shadow-ai: 0 0 12px rgba(2,132,199,0.05);

  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

/* ============================================================
   字体系统（§5.3）
   ============================================================ */
:root {
  --rm-font-sans: "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --rm-font-mono: "DIN Alternate", "Roboto Mono", "JetBrains Mono", monospace;
}

/* 字体角色类 */
.rm-text-display {
  font-family: var(--rm-font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.rm-text-card-title {
  font-family: var(--rm-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.rm-text-body-strong {
  font-family: var(--rm-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.rm-text-body {
  font-family: var(--rm-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.rm-text-caption {
  font-family: var(--rm-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.rm-text-data-lg {
  font-family: var(--rm-font-mono);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.rm-text-data-md {
  font-family: var(--rm-font-mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.rm-text-llm {
  font-family: var(--rm-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================================
   间距体系（§5.4，8px 基准）
   ============================================================ */
:root {
  --rm-space-xs: 4px;
  --rm-space-sm: 8px;
  --rm-space-md: 16px;
  --rm-space-lg: 24px;
  --rm-space-xl: 32px;
  --rm-space-2xl: 48px;
}

/* ============================================================
   圆角体系（§5.4）
   ============================================================ */
:root {
  --rm-radius-sm: 6px;
  --rm-radius-md: 12px;
  --rm-radius-lg: 16px;
  --rm-radius-full: 9999px;
}

/* ============================================================
   布局尺寸（§5.4 / §5.6）
   ============================================================ */
:root {
  --rm-layout-header-h: 56px;
  --rm-layout-sidebar-w: 220px;
  --rm-layout-sidebar-collapsed-w: 64px;
  --rm-layout-ai-bar-h: 72px;
  --rm-layout-ai-bar-expanded-h: 320px;
  --rm-layout-card-min-h: 120px;
  --rm-layout-card-padding: 16px;
  --rm-layout-grid-cols: 12;
  --rm-layout-grid-gap: 24px;
  --rm-layout-max-w: 1920px;
  --rm-layout-content-padding: 32px;
}

/* ============================================================
   组件状态规范（§7.5）
   ============================================================ */

/* 按钮基础 */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-space-xs);
  height: 40px;
  padding: 0 24px;
  border-radius: var(--rm-radius-sm);
  font-family: var(--rm-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.2,.8,.2,1),
              border-color 150ms cubic-bezier(.2,.8,.2,1),
              transform 120ms cubic-bezier(.2,.8,.2,1);
  border: none;
  outline: none;
  white-space: nowrap;
  user-select: none;
}

.rm-btn:active {
  transform: scale(0.98);
}

.rm-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand);
}

/* 主按钮 */
.rm-btn-primary {
  background-color: var(--rm-brand);
  color: var(--rm-brand-ink);
}
.rm-btn-primary:hover {
  background-color: var(--rm-brand-hover);
}

/* 次按钮 */
.rm-btn-secondary {
  background-color: transparent;
  border: 1px solid var(--rm-line);
  color: var(--rm-ink);
}
.rm-btn-secondary:hover {
  border-color: var(--rm-brand);
}

/* 危险按钮 */
.rm-btn-danger {
  background-color: var(--rm-state-error);
  color: #FFFFFF;
}
.rm-btn-danger:hover {
  background-color: #DC2626;
}

/* 禁用态 */
.rm-btn:disabled,
.rm-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 紧凑尺寸 */
.rm-btn-sm {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
}

/* 大号尺寸 */
.rm-btn-lg {
  height: 48px;
  padding: 0 32px;
  font-size: 16px;
}

/* ============================================================
   卡片基础（§5.8 阴影与层级）
   ============================================================ */
.rm-card {
  background-color: var(--rm-surface);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-md);
  padding: var(--rm-layout-card-padding);
  min-height: var(--rm-layout-card-min-h);
  transition: box-shadow 150ms cubic-bezier(.2,.8,.2,1),
              border-color 150ms cubic-bezier(.2,.8,.2,1);
}

.rm-card:hover {
  box-shadow: var(--rm-shadow-2);
}

/* 告警卡片 */
.rm-card-alert {
  border-color: var(--rm-state-error);
  box-shadow: var(--rm-shadow-alert);
  animation: rm-pulse-alert 1.5s ease-in-out infinite;
}

@keyframes rm-pulse-alert {
  0%, 100% { box-shadow: 0 0 16px rgba(239,68,68,0.3); }
  50% { box-shadow: 0 0 24px rgba(239,68,68,0.5); }
}

/* ============================================================
   骨架屏 shimmer（§5.5）
   ============================================================ */
.rm-skeleton {
  background: linear-gradient(
    90deg,
    var(--rm-surface) 0%,
    var(--rm-surface-2) 50%,
    var(--rm-surface) 100%
  );
  background-size: 200% 100%;
  animation: rm-shimmer 1.5s linear infinite;
  border-radius: var(--rm-radius-sm);
}

@keyframes rm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   状态点（§5.2）
   ============================================================ */
.rm-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--rm-radius-full);
  flex-shrink: 0;
}

.rm-status-dot--success { background-color: var(--rm-state-success); box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.rm-status-dot--warning { background-color: var(--rm-state-warning); box-shadow: 0 0 8px rgba(245,158,11,0.3); }
.rm-status-dot--error { background-color: var(--rm-state-error); box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.rm-status-dot--info { background-color: var(--rm-state-info); }
.rm-status-dot--brand { background-color: var(--rm-brand); }

/* ============================================================
   全局重置
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--rm-font-sans);
  font-size: 14px;
  color: var(--rm-ink);
  background-color: var(--rm-bg);
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--rm-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--rm-line);
  border-radius: var(--rm-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rm-ink-3);
}

/* 选中文本 */
::selection {
  background-color: rgba(0,212,255,0.25);
  color: var(--rm-ink);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* @theme removed for v3 compat */

    td, th { /* @apply removed */ word-break: break-all; word-break: auto-phrase; }
    th { /* @apply removed */ }
  }
.bg-background { background-color: var(--rm-background); }
      .text-background { color: var(--rm-background); }
      .border-background { border-color: var(--rm-background); }
      .ring-background { --tw-ring-color: var(--rm-background); }
      .bg-foreground { background-color: var(--rm-foreground); }
      .text-foreground { color: var(--rm-foreground); }
      .border-foreground { border-color: var(--rm-foreground); }
      .ring-foreground { --tw-ring-color: var(--rm-foreground); }
      .bg-card { background-color: var(--rm-card); }
      .text-card { color: var(--rm-card); }
      .border-card { border-color: var(--rm-card); }
      .ring-card { --tw-ring-color: var(--rm-card); }
      .bg-card-foreground { background-color: var(--rm-card-foreground); }
      .text-card-foreground { color: var(--rm-card-foreground); }
      .border-card-foreground { border-color: var(--rm-card-foreground); }
      .ring-card-foreground { --tw-ring-color: var(--rm-card-foreground); }
      .bg-popover { background-color: var(--rm-popover); }
      .text-popover { color: var(--rm-popover); }
      .border-popover { border-color: var(--rm-popover); }
      .ring-popover { --tw-ring-color: var(--rm-popover); }
      .bg-popover-foreground { background-color: var(--rm-popover-foreground); }
      .text-popover-foreground { color: var(--rm-popover-foreground); }
      .border-popover-foreground { border-color: var(--rm-popover-foreground); }
      .ring-popover-foreground { --tw-ring-color: var(--rm-popover-foreground); }
      .bg-primary { background-color: var(--rm-primary); }
      .text-primary { color: var(--rm-primary); }
      .border-primary { border-color: var(--rm-primary); }
      .ring-primary { --tw-ring-color: var(--rm-primary); }
      .bg-primary-foreground { background-color: var(--rm-primary-foreground); }
      .text-primary-foreground { color: var(--rm-primary-foreground); }
      .border-primary-foreground { border-color: var(--rm-primary-foreground); }
      .ring-primary-foreground { --tw-ring-color: var(--rm-primary-foreground); }
      .bg-muted { background-color: var(--rm-muted); }
      .text-muted { color: var(--rm-muted); }
      .border-muted { border-color: var(--rm-muted); }
      .ring-muted { --tw-ring-color: var(--rm-muted); }
      .bg-muted-foreground { background-color: var(--rm-muted-foreground); }
      .text-muted-foreground { color: var(--rm-muted-foreground); }
      .border-muted-foreground { border-color: var(--rm-muted-foreground); }
      .ring-muted-foreground { --tw-ring-color: var(--rm-muted-foreground); }
      .bg-border { background-color: var(--rm-border); }
      .text-border { color: var(--rm-border); }
      .border-border { border-color: var(--rm-border); }
      .ring-border { --tw-ring-color: var(--rm-border); }
      .bg-input { background-color: var(--rm-input); }
      .text-input { color: var(--rm-input); }
      .border-input { border-color: var(--rm-input); }
      .ring-input { --tw-ring-color: var(--rm-input); }
      .bg-ring { background-color: var(--rm-ring); }
      .text-ring { color: var(--rm-ring); }
      .border-ring { border-color: var(--rm-ring); }
      .ring-ring { --tw-ring-color: var(--rm-ring); }
.no-scrollbar::-webkit-scrollbar { display: none; }
      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      [data-icon] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: currentColor;
      }
/* ====== 应用框架布局：无左侧菜单，顶部通栏 + 主内容区 ====== */
    .rm-app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: var(--rm-bg);
      overflow: hidden;
    }

    /* 顶部状态栏 */
    .rm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--rm-layout-header-h);
      padding: 0 var(--rm-layout-content-padding);
      background-color: var(--rm-surface);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
      z-index: 100;
    }

    .rm-header__left {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
    }

    .rm-header__logo {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-header__logo-icon {
      width: 28px;
      height: 28px;
      border-radius: var(--rm-radius-sm);
      background: linear-gradient(135deg, var(--rm-brand) 0%, var(--rm-brand-active) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--rm-brand-ink);
    }

    .rm-header__title {
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-header__right {
      display: flex;
      align-items: center;
      gap: var(--rm-space-lg);
    }

    .rm-header__status {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-header__status-value {
      color: var(--rm-state-success);
      font-weight: 600;
    }

    .rm-header__actions {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-header__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: var(--rm-radius-sm);
      border: 1px solid transparent;
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-header__btn:hover {
      background-color: var(--rm-surface-2);
      color: var(--rm-ink);
      border-color: var(--rm-line);
    }

    .rm-header__btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* 主内容区 */
    .rm-body {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .rm-content {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: var(--rm-layout-content-padding);
      background-color: var(--rm-bg);
    }

    .rm-content__inner {
      max-width: var(--rm-layout-max-w);
      margin: 0 auto;
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    /* ====== 设置中心页面关键布局 ====== */

    /* 页面标题区 */
    .rm-config-header {
      display: flex;
      align-items: center;
      gap: var(--rm-space-lg);
      margin-bottom: var(--rm-space-xl);
    }

    .rm-back-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--rm-space-xs);
      height: 36px;
      padding: 0 16px;
      border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line);
      background-color: transparent;
      color: var(--rm-ink-2);
      font-family: var(--rm-font-sans);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
      flex-shrink: 0;
    }

    .rm-back-btn:hover {
      border-color: var(--rm-brand);
      color: var(--rm-brand);
      background-color: rgba(0, 212, 255, 0.06);
    }

    .rm-back-btn:focus-visible {
      box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand);
      outline: none;
    }

    .rm-back-btn svg {
      stroke: currentColor;
    }

    .rm-config-header__text {
      flex: 1;
      min-width: 0;
    }

    .rm-config-header__title {
      font-size: 24px;
      font-weight: 700;
      color: var(--rm-ink);
      letter-spacing: -0.01em;
      line-height: 1.3;
    }

    .rm-config-header__subtitle {
      font-size: 13px;
      color: var(--rm-ink-2);
      margin-top: 4px;
    }

    /* 设置入口卡片网格 */
    .rm-settings-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--rm-space-lg);
      flex: 1;
      align-content: flex-start;
    }

    .rm-setting-card {
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      padding: var(--rm-space-lg);
      cursor: pointer;
      transition: box-shadow 150ms cubic-bezier(.2,.8,.2,1),
                  border-color 150ms cubic-bezier(.2,.8,.2,1),
                  transform 120ms cubic-bezier(.2,.8,.2,1);
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
      position: relative;
    }

    .rm-setting-card:hover {
      box-shadow: var(--rm-shadow-2);
      border-color: var(--rm-brand);
    }

    .rm-setting-card:active {
      transform: scale(0.99);
    }

    .rm-setting-card:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand);
    }

    .rm-setting-card--warning {
      border-color: rgba(245, 158, 11, 0.4);
    }

    .rm-setting-card--warning:hover {
      border-color: var(--rm-state-warning);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.12);
    }

    .rm-setting-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-sm);
      margin-bottom: 4px;
    }

    .rm-setting-card__icon {
      width: 40px;
      height: 40px;
      border-radius: var(--rm-radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--rm-ink);
      flex-shrink: 0;
    }

    .rm-setting-card__icon--cyan {
      background-color: rgba(0, 212, 255, 0.12);
      color: var(--rm-brand);
    }

    .rm-setting-card__icon--brand {
      background-color: rgba(139, 92, 246, 0.12);
      color: var(--rm-state-info);
    }

    .rm-setting-card__icon--warning {
      background-color: rgba(245, 158, 11, 0.12);
      color: var(--rm-state-warning);
    }

    .rm-setting-card__title {
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-setting-card__desc {
      font-size: 13px;
      color: var(--rm-ink-2);
      line-height: 1.5;
    }

    .rm-setting-card__lang {
      font-size: 12px;
      color: var(--rm-ink-3);
      font-weight: 500;
    }

    /* 状态徽章 */
    .rm-status-badge {
      display: inline-flex;
      align-items: center;
      padding: 3px 10px;
      border-radius: var(--rm-radius-full);
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      flex-shrink: 0;
    }

    .rm-status-badge--muted {
      background-color: rgba(100, 116, 139, 0.2);
      color: var(--rm-ink-2);
    }

    .rm-status-badge--success {
      background-color: rgba(16, 185, 129, 0.15);
      color: var(--rm-state-success);
    }

    .rm-status-badge--warning {
      background-color: rgba(245, 158, 11, 0.15);
      color: var(--rm-state-warning);
    }

    /* 底部信息栏 */
    .rm-config-footer {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--rm-space-xl);
      margin-top: var(--rm-space-xl);
      padding-top: var(--rm-space-md);
      border-top: 1px solid var(--rm-line);
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    .rm-config-footer__item {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
    }

    .rm-config-footer__label {
      color: var(--rm-ink-3);
    }

    .rm-config-footer__value {
      color: var(--rm-ink-2);
      font-weight: 500;
    }

    /* ====== 模态框 ====== */
    .page-settings .rm-modal {
      position: fixed;
      inset: 0;
      width: auto;
      max-width: none;
      max-height: none;
      z-index: 1000;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      padding: var(--rm-space-md);
      background: transparent;
      border: 0;
      border-radius: 0;
      box-shadow: none;
      overflow: visible;
      transform: none;
      opacity: 0;
      visibility: hidden;
      transition: opacity 180ms cubic-bezier(.2,.8,.2,1),
                  visibility 180ms cubic-bezier(.2,.8,.2,1);
    }

    .page-settings .rm-modal.is-open {
      opacity: 1;
      visibility: visible;
    }

    .rm-modal__backdrop {
      position: absolute;
      inset: 0;
      background-color: rgba(15, 23, 42, 0.72);
      cursor: pointer;
    }

    .rm-modal__dialog {
      position: relative;
      width: 100%;
      max-width: 420px;
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      box-shadow: var(--rm-shadow-3);
      display: flex;
      flex-direction: column;
      transform: translateY(8px);
      transition: transform 180ms cubic-bezier(.2,.8,.2,1);
      max-height: calc(100vh - var(--rm-space-lg) * 2);
      overflow: hidden;
    }

    .page-settings .rm-modal.is-open .rm-modal__dialog {
      transform: translateY(0);
    }

    .rm-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-bottom: 1px solid var(--rm-line);
    }

    .rm-modal__title {
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-modal__close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--rm-radius-sm);
      border: none;
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
      flex-shrink: 0;
    }

    .rm-modal__close:hover {
      background-color: var(--rm-surface-2);
      color: var(--rm-ink);
    }

    .rm-modal__close:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand);
    }

    .rm-modal__body {
      padding: var(--rm-space-lg);
      overflow-y: auto;
    }

    .rm-modal__footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-top: 1px solid var(--rm-line);
    }

    /* 表单字段 */
    .rm-form-field {
      margin-bottom: var(--rm-space-md);
    }

    .rm-form-field:last-child {
      margin-bottom: 0;
    }

    .rm-form-field__label {
      display: block;
      font-size: 13px;
      color: var(--rm-ink-2);
      margin-bottom: 6px;
      font-weight: 500;
    }

    .rm-form-field__input {
      width: 100%;
      height: 40px;
      background-color: var(--rm-bg);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      color: var(--rm-ink);
      padding: 0 var(--rm-space-sm);
      font-size: 14px;
      font-family: var(--rm-font-sans);
      transition: border-color 150ms cubic-bezier(.2,.8,.2,1),
                  box-shadow 150ms cubic-bezier(.2,.8,.2,1);
      outline: none;
    }

    .rm-form-field__input::placeholder {
      color: var(--rm-ink-3);
    }

    .rm-form-field__input:focus {
      border-color: var(--rm-brand);
      box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.1);
    }

    /* 语言选项列表 */
    .rm-language-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-language-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-md);
      background-color: var(--rm-bg);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-language-option:hover {
      border-color: var(--rm-brand);
      background-color: rgba(0, 212, 255, 0.04);
    }

    .rm-language-option:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand);
    }

    .rm-language-option.is-selected {
      border-color: var(--rm-brand);
      background-color: rgba(0, 212, 255, 0.08);
    }

    .rm-language-option__label {
      font-size: 14px;
      color: var(--rm-ink);
      font-weight: 500;
    }

    .rm-language-option__check {
      width: 20px;
      height: 20px;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-brand);
      color: var(--rm-brand-ink);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transform: scale(0.8);
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-language-option.is-selected .rm-language-option__check {
      opacity: 1;
      transform: scale(1);
    }

    /* QR 占位区 */
    .rm-qr-placeholder {
      width: 160px;
      height: 160px;
      margin: 0 auto var(--rm-space-lg);
      border: 1px dashed var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background-color: var(--rm-bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--rm-space-sm);
      color: var(--rm-ink-3);
    }

    .rm-qr-placeholder__text {
      font-size: 12px;
      color: var(--rm-ink-3);
      text-align: center;
    }

    .rm-engineering-actions {
      margin-top: var(--rm-space-md);
    }

    .rm-engineering-actions__entry {
      width: 100%;
    }

    /* Toast */
    .rm-toast {
      position: fixed;
      top: var(--rm-space-lg);
      left: 50%;
      transform: translateX(-50%) translateY(-16px);
      z-index: 1100;
      display: inline-flex;
      align-items: center;
      gap: var(--rm-space-sm);
      padding: 12px 20px;
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      box-shadow: var(--rm-shadow-3);
      color: var(--rm-ink);
      font-size: 14px;
      opacity: 0;
      visibility: hidden;
      transition: opacity 180ms cubic-bezier(.2,.8,.2,1),
                  transform 180ms cubic-bezier(.2,.8,.2,1),
                  visibility 180ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-toast.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0);
    }

    .rm-toast__icon {
      width: 20px;
      height: 20px;
      border-radius: var(--rm-radius-full);
      background-color: rgba(16, 185, 129, 0.15);
      color: var(--rm-state-success);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .rm-toast__text {
      white-space: nowrap;
    }

    /* 响应式 */
    @media (max-width: 1279px) {
      .rm-header {
        padding: 0 var(--rm-space-md);
      }
      .rm-content {
        padding: var(--rm-space-md);
      }
      .rm-settings-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 767px),
           (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
      .rm-header__title {
        display: none;
      }
      .rm-config-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--rm-space-md);
      }
      .rm-settings-grid {
        grid-template-columns: 1fr;
      }
      .page-settings .rm-setting-card:not([data-dom-id="card-language"]):not([data-dom-id="card-ai-operations-language"]):not([data-dom-id="card-theme"]) {
        display: none;
      }
      .rm-config-footer {
        gap: var(--rm-space-md);
      }
      .rm-modal__dialog {
        max-width: 100%;
      }
      .rm-modal__footer {
        flex-direction: column-reverse;
      }
      .rm-modal__footer .rm-btn {
        width: 100%;
      }
    }

/* ===== 页面样式: 工程模式 ===== */

/* ============================================================
   MartFlow — 品牌设计 Token
   依据：设计方案 §5.2 色彩体系 / §5.3 字体规范 / §5.4 间距栅格 / §5.8 阴影层级
   品牌前缀：rm
   ============================================================ */

/* ---------- 深色模式（默认） ---------- */
:root {
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;

  --rm-line: #334155;

  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;

  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;

  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;

  --rm-chart-flow: #00D4FF;
  --rm-chart-flow-2: #0EA5E9;
  --rm-chart-temp: #F59E0B;
  --rm-chart-temp-2: #EF4444;

  --rm-shadow-1: 0 1px 3px rgba(0,0,0,0.05);
  --rm-shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --rm-shadow-3: 0 8px 32px rgba(0,0,0,0.12);
  --rm-shadow-alert: 0 0 16px rgba(239,68,68,0.08);
  --rm-shadow-ai: 0 0 12px rgba(0,212,255,0.05);

  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
  --rm-radius-small: 6px;
  --rm-radius-medium: 12px;
  --rm-radius-large: 16px;
}

.dark {
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;
  --rm-line: #334155;
  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;
  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;
  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

.light {
  --rm-bg: #F8FAFC;
  --rm-surface: #FFFFFF;
  --rm-surface-2: #F1F5F9;

  --rm-line: #CBD5E1;

  --rm-ink: #0F172A;
  --rm-ink-2: #475569;
  --rm-ink-3: #94A3B8;

  --rm-brand: #0284C7;
  --rm-brand-hover: #0369A1;
  --rm-brand-active: #075985;
  --rm-brand-ink: #FFFFFF;

  --rm-state-success: #059669;
  --rm-state-warning: #D97706;
  --rm-state-error: #DC2626;
  --rm-state-info: #7C3AED;

  --rm-shadow-1: 0 1px 3px rgba(15,23,42,0.05);
  --rm-shadow-2: 0 4px 12px rgba(15,23,42,0.08);
  --rm-shadow-3: 0 8px 32px rgba(15,23,42,0.12);
  --rm-shadow-alert: 0 0 16px rgba(220,38,38,0.05);
  --rm-shadow-ai: 0 0 12px rgba(2,132,199,0.05);

  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

:root {
  --rm-font-sans: "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --rm-font-mono: "DIN Alternate", "Roboto Mono", "JetBrains Mono", monospace;
}

:root {
  --rm-space-xs: 4px;
  --rm-space-sm: 8px;
  --rm-space-md: 16px;
  --rm-space-lg: 24px;
  --rm-space-xl: 32px;
  --rm-space-2xl: 48px;
}

:root {
  --rm-radius-sm: 6px;
  --rm-radius-md: 12px;
  --rm-radius-lg: 16px;
  --rm-radius-full: 9999px;
}

:root {
  --rm-layout-header-h: 56px;
  --rm-layout-sidebar-w: 220px;
  --rm-layout-sidebar-collapsed-w: 64px;
  --rm-layout-ai-bar-h: 72px;
  --rm-layout-ai-bar-expanded-h: 320px;
  --rm-layout-card-min-h: 120px;
  --rm-layout-card-padding: 16px;
  --rm-layout-grid-cols: 12;
  --rm-layout-grid-gap: 24px;
  --rm-layout-max-w: 1920px;
  --rm-layout-content-padding: 32px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-family: var(--rm-font-sans); font-size: 14px; color: var(--rm-ink); background-color: var(--rm-bg); }
body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--rm-bg); }
::-webkit-scrollbar-thumb { background: var(--rm-line); border-radius: var(--rm-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--rm-ink-3); }

::selection { background-color: rgba(0,212,255,0.25); color: var(--rm-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* @theme removed for v3 compat */

    td, th { /* @apply removed */ word-break: break-all; word-break: auto-phrase; }
    th { /* @apply removed */ }
  }
.bg-background { background-color: var(--rm-background); }
      .text-background { color: var(--rm-background); }
      .border-background { border-color: var(--rm-background); }
      .ring-background { --tw-ring-color: var(--rm-background); }
      .bg-foreground { background-color: var(--rm-foreground); }
      .text-foreground { color: var(--rm-foreground); }
      .border-foreground { border-color: var(--rm-foreground); }
      .ring-foreground { --tw-ring-color: var(--rm-foreground); }
      .bg-card { background-color: var(--rm-card); }
      .text-card { color: var(--rm-card); }
      .border-card { border-color: var(--rm-card); }
      .ring-card { --tw-ring-color: var(--rm-card); }
      .bg-card-foreground { background-color: var(--rm-card-foreground); }
      .text-card-foreground { color: var(--rm-card-foreground); }
      .border-card-foreground { border-color: var(--rm-card-foreground); }
      .ring-card-foreground { --tw-ring-color: var(--rm-card-foreground); }
      .bg-popover { background-color: var(--rm-popover); }
      .text-popover { color: var(--rm-popover); }
      .border-popover { border-color: var(--rm-popover); }
      .ring-popover { --tw-ring-color: var(--rm-popover); }
      .bg-popover-foreground { background-color: var(--rm-popover-foreground); }
      .text-popover-foreground { color: var(--rm-popover-foreground); }
      .border-popover-foreground { border-color: var(--rm-popover-foreground); }
      .ring-popover-foreground { --tw-ring-color: var(--rm-popover-foreground); }
      .bg-primary { background-color: var(--rm-primary); }
      .text-primary { color: var(--rm-primary); }
      .border-primary { border-color: var(--rm-primary); }
      .ring-primary { --tw-ring-color: var(--rm-primary); }
      .bg-primary-foreground { background-color: var(--rm-primary-foreground); }
      .text-primary-foreground { color: var(--rm-primary-foreground); }
      .border-primary-foreground { border-color: var(--rm-primary-foreground); }
      .ring-primary-foreground { --tw-ring-color: var(--rm-primary-foreground); }
      .bg-muted { background-color: var(--rm-muted); }
      .text-muted { color: var(--rm-muted); }
      .border-muted { border-color: var(--rm-muted); }
      .ring-muted { --tw-ring-color: var(--rm-muted); }
      .bg-muted-foreground { background-color: var(--rm-muted-foreground); }
      .text-muted-foreground { color: var(--rm-muted-foreground); }
      .border-muted-foreground { border-color: var(--rm-muted-foreground); }
      .ring-muted-foreground { --tw-ring-color: var(--rm-muted-foreground); }
      .bg-border { background-color: var(--rm-border); }
      .text-border { color: var(--rm-border); }
      .border-border { border-color: var(--rm-border); }
      .ring-border { --tw-ring-color: var(--rm-border); }
      .bg-input { background-color: var(--rm-input); }
      .text-input { color: var(--rm-input); }
      .border-input { border-color: var(--rm-input); }
      .ring-input { --tw-ring-color: var(--rm-input); }
      .bg-ring { background-color: var(--rm-ring); }
      .text-ring { color: var(--rm-ring); }
      .border-ring { border-color: var(--rm-ring); }
      .ring-ring { --tw-ring-color: var(--rm-ring); }
/* ====== 应用框架布局 ====== */
    .rm-app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: var(--rm-bg);
      overflow: hidden;
    }

    /* 顶部状态栏 */
    .rm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--rm-layout-header-h);
      padding: 0 var(--rm-layout-content-padding);
      background-color: var(--rm-surface);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
      z-index: 100;
    }

    .rm-header__left {
      display: flex;
      align-items: center;
      gap: var(--rm-space-md);
    }

    .rm-header__logo {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-header__logo-icon {
      width: 28px;
      height: 28px;
      border-radius: var(--rm-radius-sm);
      background: linear-gradient(135deg, var(--rm-brand) 0%, var(--rm-brand-active) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-weight: 700;
      color: var(--rm-brand-ink);
    }

    .rm-header__title {
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-header__right {
      display: flex;
      align-items: center;
      gap: var(--rm-space-lg);
    }

    .rm-header__status {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-header__status-value {
      color: var(--rm-state-success);
      font-weight: 600;
    }

    .rm-header__actions {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
    }

    .rm-header__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: var(--rm-radius-sm);
      border: 1px solid transparent;
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-header__btn:hover {
      background-color: var(--rm-surface-2);
      color: var(--rm-ink);
      border-color: var(--rm-line);
    }

    .rm-header__btn svg {
      width: 18px;
      height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
    }

    /* 主内容区 */
    .rm-body {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    .rm-content {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      padding: var(--rm-layout-content-padding);
      background-color: var(--rm-bg);
    }

    .rm-content__inner {
      max-width: var(--rm-layout-max-w);
      margin: 0 auto;
    }

    /* 页面标题区 */
    .rm-engineering-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--rm-space-md);
      margin-bottom: var(--rm-space-lg);
    }

    .rm-engineering-header__title {
      font-size: 24px;
      font-weight: 700;
      color: var(--rm-ink);
      letter-spacing: -0.01em;
    }

    .rm-engineering-header__subtitle {
      font-size: 13px;
      color: var(--rm-ink-2);
      margin-top: 4px;
    }

    .rm-engineering-header__back {
      display: inline-flex;
      align-items: center;
      gap: var(--rm-space-xs);
    }

    /* 警告横幅 */
    .rm-warning-banner {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-md) var(--rm-space-lg);
      margin-bottom: var(--rm-space-lg);
      background-color: rgba(245,158,11,0.1);
      border: 1px solid rgba(245,158,11,0.35);
      border-radius: var(--rm-radius-md);
      color: var(--rm-state-warning);
    }

    .rm-warning-banner__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    .rm-warning-banner__icon svg {
      width: 20px;
      height: 20px;
    }

    .rm-warning-banner__text {
      font-size: 14px;
      font-weight: 600;
    }

    /* 工程操作卡片网格（静态 CSS，不依赖 Tailwind） */
    .rm-engineering-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--rm-space-lg);
      margin-bottom: var(--rm-space-xl);
    }

    .rm-engineering-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      padding: var(--rm-space-lg);
      min-height: 200px;
      transition: box-shadow 150ms cubic-bezier(.2,.8,.2,1), border-color 150ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-engineering-card:hover {
      box-shadow: var(--rm-shadow-2);
      border-color: rgba(0,212,255,0.25);
    }

    .rm-engineering-card__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: var(--rm-radius-md);
      margin-bottom: var(--rm-space-md);
    }

    .rm-engineering-card__icon svg {
      width: 24px;
      height: 24px;
    }

    .rm-engineering-card__icon--brand { background-color: rgba(0,212,255,0.12); color: var(--rm-brand); }
    .rm-engineering-card__icon--warning { background-color: rgba(245,158,11,0.12); color: var(--rm-state-warning); }
    .rm-engineering-card__icon--success { background-color: rgba(16,185,129,0.12); color: var(--rm-state-success); }
    .rm-engineering-card__icon--info { background-color: rgba(139,92,246,0.12); color: var(--rm-state-info); }
    .rm-engineering-card__icon--muted { background-color: rgba(100,116,139,0.15); color: var(--rm-ink-2); }

    .rm-engineering-card__title {
      font-size: 17px;
      font-weight: 600;
      color: var(--rm-ink);
      margin-bottom: var(--rm-space-xs);
    }

    .rm-engineering-card__desc {
      font-size: 13px;
      color: var(--rm-ink-2);
      line-height: 1.5;
      margin-bottom: var(--rm-space-md);
      flex: 1;
    }

    .rm-engineering-card__btn {
      width: 100%;
      margin-top: auto;
    }

    /* 底部信息栏 */
    .rm-engineering-footer {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--rm-space-xl);
      padding-top: var(--rm-space-md);
      border-top: 1px solid var(--rm-line);
      font-size: 12px;
      color: var(--rm-ink-3);
    }

    .rm-engineering-footer__item {
      display: flex;
      align-items: center;
      gap: var(--rm-space-xs);
    }

    .rm-engineering-footer__value {
      color: var(--rm-ink-2);
      font-weight: 500;
    }

    /* ====== 按钮组件 ====== */
    .rm-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--rm-space-xs);
      height: 40px;
      padding: 0 24px;
      border-radius: var(--rm-radius-sm);
      font-family: var(--rm-font-sans);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 150ms cubic-bezier(.2,.8,.2,1), border-color 150ms cubic-bezier(.2,.8,.2,1), transform 120ms cubic-bezier(.2,.8,.2,1);
      border: none;
      outline: none;
      white-space: nowrap;
      user-select: none;
    }

    .rm-btn:active { transform: scale(0.98); }
    .rm-btn:focus-visible { box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand); }

    .rm-btn-primary { background-color: var(--rm-brand); color: var(--rm-brand-ink); }
    .rm-btn-primary:hover { background-color: var(--rm-brand-hover); }

    .rm-btn-secondary { background-color: transparent; border: 1px solid var(--rm-line); color: var(--rm-ink); }
    .rm-btn-secondary:hover { border-color: var(--rm-brand); }

    .rm-btn-danger { background-color: var(--rm-state-error); color: #FFFFFF; }
    .rm-btn-danger:hover { background-color: #DC2626; }

    .rm-btn:disabled, .rm-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

    .rm-btn-sm { height: 32px; padding: 0 16px; font-size: 13px; }

    /* ====== 模态框 ====== */
    .rm-modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--rm-space-md);
      background-color: rgba(15,23,42,0.7);
      opacity: 0;
      visibility: hidden;
      transition: opacity 200ms cubic-bezier(.2,.8,.2,1), visibility 200ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-modal-backdrop[data-visible="true"] {
      opacity: 1;
      visibility: visible;
    }

    .page-engineering .rm-modal {
      width: 100%;
      max-width: 640px;
      max-height: calc(100vh - var(--rm-space-lg) * 2);
      background-color: var(--rm-surface);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      box-shadow: var(--rm-shadow-3);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transform: translateY(12px);
      transition: transform 200ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-modal-backdrop[data-visible="true"] .rm-modal {
      transform: translateY(0);
    }

    .rm-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rm-space-md);
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
    }

    .rm-modal__title {
      font-size: 16px;
      font-weight: 600;
      color: var(--rm-ink);
    }

    .rm-modal__close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: var(--rm-radius-sm);
      border: none;
      background-color: transparent;
      color: var(--rm-ink-2);
      cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
      flex-shrink: 0;
    }

    .rm-modal__close:hover {
      background-color: var(--rm-surface-2);
      color: var(--rm-ink);
    }

    .rm-modal__close svg {
      width: 18px;
      height: 18px;
    }

    .rm-modal__body {
      padding: var(--rm-space-lg);
      overflow-y: auto;
      flex: 1;
    }

    .rm-modal__footer {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: var(--rm-space-sm);
      padding: var(--rm-space-md) var(--rm-space-lg);
      border-top: 1px solid var(--rm-line);
      flex-shrink: 0;
    }

    /* 模态框内通用样式 */
    .rm-modal__text {
      font-size: 14px;
      color: var(--rm-ink-2);
      line-height: 1.6;
      margin-bottom: var(--rm-space-md);
    }

    .rm-modal__text:last-child { margin-bottom: 0; }

    /* 进度条 */
    .rm-progress {
      width: 100%;
      height: 8px;
      background-color: var(--rm-bg);
      border-radius: var(--rm-radius-full);
      overflow: hidden;
      margin-bottom: var(--rm-space-md);
    }

    .rm-progress__bar {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--rm-brand) 0%, var(--rm-brand-hover) 100%);
      border-radius: var(--rm-radius-full);
      transition: width 300ms cubic-bezier(.2,.8,.2,1);
    }

    .rm-progress__steps {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-sm);
    }

    .rm-progress__step {
      display: flex;
      align-items: center;
      gap: var(--rm-space-sm);
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-progress__step[data-active="true"] {
      color: var(--rm-ink);
      font-weight: 500;
    }

    .rm-progress__step[data-done="true"] {
      color: var(--rm-state-success);
    }

    .rm-progress__dot {
      width: 8px;
      height: 8px;
      border-radius: var(--rm-radius-full);
      background-color: var(--rm-line);
      flex-shrink: 0;
    }

    .rm-progress__step[data-active="true"] .rm-progress__dot {
      background-color: var(--rm-brand);
      box-shadow: 0 0 8px rgba(0,212,255,0.4);
    }

    .rm-progress__step[data-done="true"] .rm-progress__dot {
      background-color: var(--rm-state-success);
    }

    /* 数据表格 */
    .rm-data-table-wrapper {
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
      overflow: hidden;
    }

    .rm-data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    .rm-data-table th,
    .rm-data-table td {
      padding: 12px var(--rm-space-md);
      text-align: left;
      border-bottom: 1px solid var(--rm-line);
      vertical-align: middle;
    }

    .rm-data-table thead th {
      font-weight: 600;
      color: var(--rm-ink-2);
      background-color: var(--rm-surface-2);
      font-size: 13px;
    }

    .rm-data-table tbody tr:nth-child(even) {
      background-color: rgba(0,0,0,0.05);
    }

    .rm-data-table tbody tr:last-child td {
      border-bottom: none;
    }

    .rm-data-table__status {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
    }

    .rm-data-table__dot {
      width: 8px;
      height: 8px;
      border-radius: var(--rm-radius-full);
    }

    .rm-data-table__dot--online { background-color: var(--rm-state-success); box-shadow: 0 0 6px rgba(16,185,129,0.4); }
    .rm-data-table__dot--offline { background-color: var(--rm-state-error); box-shadow: 0 0 6px rgba(239,68,68,0.4); }
    .rm-data-table__dot--warning { background-color: var(--rm-state-warning); box-shadow: 0 0 6px rgba(245,158,11,0.4); }

    .rm-data-table__action {
      background: none;
      border: none;
      color: var(--rm-brand);
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      padding: 0;
      font-family: var(--rm-font-sans);
    }

    .rm-data-table__action:hover { color: var(--rm-brand-hover); text-decoration: underline; }

    /* 日志列表 */
    .rm-log-list {
      display: flex;
      flex-direction: column;
      gap: var(--rm-space-md);
    }

    .rm-log-item {
      display: flex;
      gap: var(--rm-space-md);
      padding: var(--rm-space-md);
      background-color: var(--rm-bg);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
    }

    .rm-log-item__time {
      font-family: var(--rm-font-mono);
      font-size: 12px;
      color: var(--rm-ink-3);
      white-space: nowrap;
      flex-shrink: 0;
      min-width: 130px;
    }

    .rm-log-item__content {
      flex: 1;
    }

    .rm-log-item__title {
      font-size: 14px;
      font-weight: 600;
      color: var(--rm-ink);
      margin-bottom: 2px;
    }

    .rm-log-item__desc {
      font-size: 13px;
      color: var(--rm-ink-2);
    }

    .rm-log-item__tag {
      display: inline-flex;
      align-items: center;
      padding: 2px 8px;
      border-radius: var(--rm-radius-sm);
      font-size: 11px;
      font-weight: 600;
      flex-shrink: 0;
      align-self: flex-start;
    }

    .rm-log-item__tag--init { background-color: rgba(0,212,255,0.12); color: var(--rm-brand); }
    .rm-log-item__tag--device { background-color: rgba(139,92,246,0.12); color: var(--rm-state-info); }
    .rm-log-item__tag--maintain { background-color: rgba(100,116,139,0.15); color: var(--rm-ink-2); }

    /* 确认框 */
    .rm-confirm-box {
      display: flex;
      align-items: flex-start;
      gap: var(--rm-space-md);
      padding: var(--rm-space-md);
      background-color: rgba(239,68,68,0.08);
      border: 1px solid rgba(239,68,68,0.25);
      border-radius: var(--rm-radius-sm);
      margin-bottom: var(--rm-space-md);
    }

    .rm-confirm-box__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      color: var(--rm-state-error);
      flex-shrink: 0;
    }

    .rm-confirm-box__icon svg { width: 24px; height: 24px; }

    .rm-confirm-box__text {
      font-size: 14px;
      color: var(--rm-ink);
      line-height: 1.5;
    }

    /* 响应式 */
    @media (max-width: 1279px) {
      .rm-header { padding: 0 var(--rm-space-md); }
      .rm-content { padding: var(--rm-space-md); }
      .rm-engineering-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 767px) {
      .rm-engineering-grid { grid-template-columns: 1fr; }
      .rm-engineering-header { flex-direction: column; align-items: flex-start; }
      .rm-engineering-header__back { width: 100%; justify-content: center; }
      .rm-header__title { display: none; }
      .page-engineering .rm-modal { max-height: calc(100vh - var(--rm-space-md) * 2); }
      .rm-data-table-wrapper { overflow-x: auto; }
      .rm-data-table { min-width: 520px; }
      .rm-log-item { flex-direction: column; gap: var(--rm-space-sm); }
      .rm-log-item__time { min-width: auto; }
    }

/* ===== 页面样式: 历史报表 ===== */

/* ============================================================
   MartFlow — 品牌设计 Token
   依据：设计方案 §5.2 色彩体系 / §5.3 字体规范 / §5.4 间距栅格 / §5.8 阴影层级
   品牌前缀：rm
   ============================================================ */

/* ---------- 深色模式（默认） ---------- */
:root {
  /* 背景层 */
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;

  /* 边框 */
  --rm-line: #334155;

  /* 文字 */
  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;

  /* 品牌色（单一主色） */
  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;

  /* 状态色（仅语义状态使用） */
  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;

  /* 数据可视化 */
  --rm-chart-flow: #00D4FF;
  --rm-chart-flow-2: #0EA5E9;
  --rm-chart-temp: #F59E0B;
  --rm-chart-temp-2: #EF4444;

  /* 阴影层级（静态阴影 alpha<=0.05，浮动层阴影用于 modal/popover/dropdown） */
  --rm-shadow-1: 0 1px 3px rgba(0,0,0,0.05);
  --rm-shadow-2: 0 4px 12px rgba(0,0,0,0.08);
  --rm-shadow-3: 0 8px 32px rgba(0,0,0,0.12);
  --rm-shadow-alert: 0 0 16px rgba(239,68,68,0.08);
  --rm-shadow-ai: 0 0 12px rgba(0,212,255,0.05);

  /* ---- 语义别名（apply-html-head-contract.mjs 要求） ---- */
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
  --rm-radius-small: 6px;
  --rm-radius-medium: 12px;
  --rm-radius-large: 16px;
}

.dark {
  --rm-bg: #1E293B;
  --rm-surface: #243447;
  --rm-surface-2: #2D3F56;
  --rm-line: #334155;
  --rm-ink: #F1F5F9;
  --rm-ink-2: #94A3B8;
  --rm-ink-3: #64748B;
  --rm-brand: #00D4FF;
  --rm-brand-hover: #0EA5E9;
  --rm-brand-active: #0284C7;
  --rm-brand-ink: #0F172A;
  --rm-state-success: #10B981;
  --rm-state-warning: #F59E0B;
  --rm-state-error: #EF4444;
  --rm-state-info: #8B5CF6;
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

/* ---------- 高对比度模式（浅色，§5.2 评审决议 R-04） ---------- */
.light {
  --rm-bg: #F8FAFC;
  --rm-surface: #FFFFFF;
  --rm-surface-2: #F1F5F9;

  --rm-line: #CBD5E1;

  --rm-ink: #0F172A;
  --rm-ink-2: #475569;
  --rm-ink-3: #94A3B8;

  --rm-brand: #0284C7;
  --rm-brand-hover: #0369A1;
  --rm-brand-active: #075985;
  --rm-brand-ink: #FFFFFF;

  --rm-state-success: #059669;
  --rm-state-warning: #D97706;
  --rm-state-error: #DC2626;
  --rm-state-info: #7C3AED;

  --rm-shadow-1: 0 1px 3px rgba(15,23,42,0.05);
  --rm-shadow-2: 0 4px 12px rgba(15,23,42,0.08);
  --rm-shadow-3: 0 8px 32px rgba(15,23,42,0.12);
  --rm-shadow-alert: 0 0 16px rgba(220,38,38,0.05);
  --rm-shadow-ai: 0 0 12px rgba(2,132,199,0.05);

  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface-2);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
}

/* ============================================================
   字体系统（§5.3）
   ============================================================ */
:root {
  --rm-font-sans: "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --rm-font-mono: "DIN Alternate", "Roboto Mono", "JetBrains Mono", monospace;
}

/* 字体角色类 */
.rm-text-display {
  font-family: var(--rm-font-sans);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.rm-text-card-title {
  font-family: var(--rm-font-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.rm-text-body-strong {
  font-family: var(--rm-font-sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.rm-text-body {
  font-family: var(--rm-font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
}

.rm-text-caption {
  font-family: var(--rm-font-sans);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.rm-text-data-lg {
  font-family: var(--rm-font-mono);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.rm-text-data-md {
  font-family: var(--rm-font-mono);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

.rm-text-llm {
  font-family: var(--rm-font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================================
   间距体系（§5.4，8px 基准）
   ============================================================ */
:root {
  --rm-space-xs: 4px;
  --rm-space-sm: 8px;
  --rm-space-md: 16px;
  --rm-space-lg: 24px;
  --rm-space-xl: 32px;
  --rm-space-2xl: 48px;
}

/* ============================================================
   圆角体系（§5.4）
   ============================================================ */
:root {
  --rm-radius-sm: 6px;
  --rm-radius-md: 12px;
  --rm-radius-lg: 16px;
  --rm-radius-full: 9999px;
}

/* ============================================================
   布局尺寸（§5.4 / §5.6）
   ============================================================ */
:root {
  --rm-layout-header-h: 56px;
  --rm-layout-sidebar-w: 220px;
  --rm-layout-sidebar-collapsed-w: 64px;
  --rm-layout-ai-bar-h: 72px;
  --rm-layout-ai-bar-expanded-h: 320px;
  --rm-layout-card-min-h: 120px;
  --rm-layout-card-padding: 16px;
  --rm-layout-grid-cols: 12;
  --rm-layout-grid-gap: 24px;
  --rm-layout-max-w: 1920px;
  --rm-layout-content-padding: 32px;
}

/* ============================================================
   组件状态规范（§7.5）
   ============================================================ */

/* 按钮基础 */
.rm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-space-xs);
  height: 40px;
  padding: 0 24px;
  border-radius: var(--rm-radius-sm);
  font-family: var(--rm-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(.2,.8,.2,1),
              border-color 150ms cubic-bezier(.2,.8,.2,1),
              transform 120ms cubic-bezier(.2,.8,.2,1);
  border: none;
  outline: none;
  white-space: nowrap;
  user-select: none;
}

.rm-btn:active {
  transform: scale(0.98);
}

.rm-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand);
}

/* 主按钮 */
.rm-btn-primary {
  background-color: var(--rm-brand);
  color: var(--rm-brand-ink);
}
.rm-btn-primary:hover {
  background-color: var(--rm-brand-hover);
}

/* 次按钮 */
.rm-btn-secondary {
  background-color: transparent;
  border: 1px solid var(--rm-line);
  color: var(--rm-ink);
}
.rm-btn-secondary:hover {
  border-color: var(--rm-brand);
}

/* 危险按钮 */
.rm-btn-danger {
  background-color: var(--rm-state-error);
  color: #FFFFFF;
}
.rm-btn-danger:hover {
  background-color: #DC2626;
}

/* 禁用态 */
.rm-btn:disabled,
.rm-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 紧凑尺寸 */
.rm-btn-sm {
  height: 32px;
  padding: 0 16px;
  font-size: 13px;
}

/* 大号尺寸 */
.rm-btn-lg {
  height: 48px;
  padding: 0 32px;
  font-size: 16px;
}

/* ============================================================
   卡片基础（§5.8 阴影与层级）
   ============================================================ */
.rm-card {
  background-color: var(--rm-surface);
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-md);
  padding: var(--rm-layout-card-padding);
  min-height: var(--rm-layout-card-min-h);
  transition: box-shadow 150ms cubic-bezier(.2,.8,.2,1),
              border-color 150ms cubic-bezier(.2,.8,.2,1);
}

.rm-card:hover {
  box-shadow: var(--rm-shadow-2);
}

/* 告警卡片 */
.rm-card-alert {
  border-color: var(--rm-state-error);
  box-shadow: var(--rm-shadow-alert);
  animation: rm-pulse-alert 1.5s ease-in-out infinite;
}

@keyframes rm-pulse-alert {
  0%, 100% { box-shadow: 0 0 16px rgba(239,68,68,0.3); }
  50% { box-shadow: 0 0 24px rgba(239,68,68,0.5); }
}

/* ============================================================
   骨架屏 shimmer（§5.5）
   ============================================================ */
.rm-skeleton {
  background: linear-gradient(
    90deg,
    var(--rm-surface) 0%,
    var(--rm-surface-2) 50%,
    var(--rm-surface) 100%
  );
  background-size: 200% 100%;
  animation: rm-shimmer 1.5s linear infinite;
  border-radius: var(--rm-radius-sm);
}

@keyframes rm-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   状态点（§5.2）
   ============================================================ */
.rm-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--rm-radius-full);
  flex-shrink: 0;
}

.rm-status-dot--success { background-color: var(--rm-state-success); box-shadow: 0 0 8px rgba(16,185,129,0.3); }
.rm-status-dot--warning { background-color: var(--rm-state-warning); box-shadow: 0 0 8px rgba(245,158,11,0.3); }
.rm-status-dot--error { background-color: var(--rm-state-error); box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.rm-status-dot--info { background-color: var(--rm-state-info); }
.rm-status-dot--brand { background-color: var(--rm-brand); }

/* ============================================================
   全局重置
   ============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: var(--rm-font-sans);
  font-size: 14px;
  color: var(--rm-ink);
  background-color: var(--rm-bg);
}

body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--rm-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--rm-line);
  border-radius: var(--rm-radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--rm-ink-3);
}

/* 选中文本 */
::selection {
  background-color: rgba(0,212,255,0.25);
  color: var(--rm-ink);
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* @theme removed for v3 compat */

    td, th { /* @apply removed */ word-break: break-all; word-break: auto-phrase; }
    th { /* @apply removed */ }
  }
.bg-background { background-color: var(--rm-background); }
      .text-background { color: var(--rm-background); }
      .border-background { border-color: var(--rm-background); }
      .ring-background { --tw-ring-color: var(--rm-background); }
      .bg-foreground { background-color: var(--rm-foreground); }
      .text-foreground { color: var(--rm-foreground); }
      .border-foreground { border-color: var(--rm-foreground); }
      .ring-foreground { --tw-ring-color: var(--rm-foreground); }
      .bg-card { background-color: var(--rm-card); }
      .text-card { color: var(--rm-card); }
      .border-card { border-color: var(--rm-card); }
      .ring-card { --tw-ring-color: var(--rm-card); }
      .bg-card-foreground { background-color: var(--rm-card-foreground); }
      .text-card-foreground { color: var(--rm-card-foreground); }
      .border-card-foreground { border-color: var(--rm-card-foreground); }
      .ring-card-foreground { --tw-ring-color: var(--rm-card-foreground); }
      .bg-popover { background-color: var(--rm-popover); }
      .text-popover { color: var(--rm-popover); }
      .border-popover { border-color: var(--rm-popover); }
      .ring-popover { --tw-ring-color: var(--rm-popover); }
      .bg-popover-foreground { background-color: var(--rm-popover-foreground); }
      .text-popover-foreground { color: var(--rm-popover-foreground); }
      .border-popover-foreground { border-color: var(--rm-popover-foreground); }
      .ring-popover-foreground { --tw-ring-color: var(--rm-popover-foreground); }
      .bg-primary { background-color: var(--rm-primary); }
      .text-primary { color: var(--rm-primary); }
      .border-primary { border-color: var(--rm-primary); }
      .ring-primary { --tw-ring-color: var(--rm-primary); }
      .bg-primary-foreground { background-color: var(--rm-primary-foreground); }
      .text-primary-foreground { color: var(--rm-primary-foreground); }
      .border-primary-foreground { border-color: var(--rm-primary-foreground); }
      .ring-primary-foreground { --tw-ring-color: var(--rm-primary-foreground); }
      .bg-muted { background-color: var(--rm-muted); }
      .text-muted { color: var(--rm-muted); }
      .border-muted { border-color: var(--rm-muted); }
      .ring-muted { --tw-ring-color: var(--rm-muted); }
      .bg-muted-foreground { background-color: var(--rm-muted-foreground); }
      .text-muted-foreground { color: var(--rm-muted-foreground); }
      .border-muted-foreground { border-color: var(--rm-muted-foreground); }
      .ring-muted-foreground { --tw-ring-color: var(--rm-muted-foreground); }
      .bg-border { background-color: var(--rm-border); }
      .text-border { color: var(--rm-border); }
      .border-border { border-color: var(--rm-border); }
      .ring-border { --tw-ring-color: var(--rm-border); }
      .bg-input { background-color: var(--rm-input); }
      .text-input { color: var(--rm-input); }
      .border-input { border-color: var(--rm-input); }
      .ring-input { --tw-ring-color: var(--rm-input); }
      .bg-ring { background-color: var(--rm-ring); }
      .text-ring { color: var(--rm-ring); }
      .border-ring { border-color: var(--rm-ring); }
      .ring-ring { --tw-ring-color: var(--rm-ring); }
.no-scrollbar::-webkit-scrollbar { display: none; }
      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
      [data-icon] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        background-color: currentColor;
      }
/* ====== 应用框架布局 ====== */
    .rm-app {
      display: flex;
      flex-direction: column;
      height: 100vh;
      background-color: var(--rm-bg);
      overflow: hidden;
    }

    /* 顶部状态栏 */
    .rm-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--rm-layout-header-h);
      padding: 0 var(--rm-layout-content-padding);
      background-color: var(--rm-surface);
      border-bottom: 1px solid var(--rm-line);
      flex-shrink: 0;
      z-index: 100;
    }
    .rm-header__left { display: flex; align-items: center; gap: var(--rm-space-md); }
    .rm-header__logo { display: flex; align-items: center; gap: var(--rm-space-sm); }
    .rm-header__logo-icon {
      width: 28px; height: 28px; border-radius: var(--rm-radius-sm);
      background: linear-gradient(135deg, var(--rm-brand) 0%, var(--rm-brand-active) 100%);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; font-weight: 700; color: var(--rm-brand-ink);
    }
    .rm-header__title { font-size: 16px; font-weight: 600; color: var(--rm-ink); }
    .rm-header__right { display: flex; align-items: center; gap: var(--rm-space-lg); }
    .rm-header__status { display: flex; align-items: center; gap: var(--rm-space-xs); font-size: 13px; color: var(--rm-ink-2); }
    .rm-header__status-value { color: var(--rm-state-success); font-weight: 600; }
    .rm-header__actions { display: flex; align-items: center; gap: var(--rm-space-sm); }
    .rm-header__btn {
      display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: var(--rm-radius-sm);
      border: 1px solid transparent; background-color: transparent;
      color: var(--rm-ink-2); cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-header__btn:hover { background-color: var(--rm-surface-2); color: var(--rm-ink); border-color: var(--rm-line); }
    .rm-header__btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

    /* 主内容区 */
    .rm-body { flex: 1; overflow: hidden; position: relative; display: flex; }
    .rm-content {
      flex: 1; height: 100%; overflow-y: auto; padding: var(--rm-layout-content-padding);
      background-color: var(--rm-bg);
    }
    .rm-content__inner { max-width: var(--rm-layout-max-w); margin: 0 auto; min-height: 100%; }
    .page-history .rm-content__inner { display: block; box-sizing: border-box; height: auto; padding-bottom: 40px; }

    /* ====== 页面标题 ====== */
    .rm-page-title {
      display: flex; align-items: flex-start; justify-content: space-between;
      flex-wrap: wrap; gap: var(--rm-space-md); margin-bottom: var(--rm-space-xl);
    }
    .rm-page-title__left { display: flex; align-items: center; gap: var(--rm-space-md); }
    .rm-back-btn {
      display: inline-flex; align-items: center; justify-content: center; gap: var(--rm-space-xs);
      height: 36px; padding: 0 16px; border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line); background-color: transparent;
      color: var(--rm-ink-2); font-family: var(--rm-font-sans); font-size: 13px; font-weight: 500; cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1); flex-shrink: 0;
    }
    .rm-back-btn:hover { border-color: var(--rm-brand); color: var(--rm-brand); background-color: rgba(0, 212, 255, 0.06); }
    .rm-back-btn:focus-visible { box-shadow: 0 0 0 2px var(--rm-bg), 0 0 0 4px var(--rm-brand); outline: none; }
    .rm-back-btn svg { stroke: currentColor; }
    .rm-page-title__h1 { font-size: 22px; font-weight: 700; color: var(--rm-ink); line-height: 1.3; }
    .rm-page-title__sub { font-size: 13px; color: var(--rm-ink-2); margin-top: var(--rm-space-xs); }

    /* 状态演示 */
    .rm-state-demo { position: relative; display: inline-flex; align-items: center; gap: var(--rm-space-xs); }
    .rm-state-demo__tip {
      position: absolute; top: calc(100% + 8px); right: 0; z-index: 110;
      width: 280px; max-width: calc(100vw - 32px);
      background-color: var(--rm-surface-2); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md); padding: var(--rm-space-sm);
      box-shadow: var(--rm-shadow-3); font-size: 12px; line-height: 1.5;
      color: var(--rm-ink-2); opacity: 0; visibility: hidden;
      transition: opacity 150ms ease, visibility 150ms ease;
    }
    .rm-state-demo:hover .rm-state-demo__tip,
    .rm-state-demo__tip:hover { opacity: 1; visibility: visible; }
    .rm-state-demo__tip strong { color: var(--rm-ink); }
    .rm-state-demo__badge {
      display: inline-flex; align-items: center; height: 20px; padding: 0 8px;
      border-radius: var(--rm-radius-sm); background-color: var(--rm-brand);
      color: var(--rm-brand-ink); font-size: 11px; font-weight: 600;
    }

    /* ====== 全局查询栏 ====== */
    .rm-query-bar { margin-bottom: var(--rm-space-lg); padding: var(--rm-space-md); }
    .rm-query-row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--rm-space-md); }
    .rm-query-row--primary {
      display: grid;
      grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.2fr) minmax(260px, 1fr);
      align-items: end;
      gap: var(--rm-space-md);
      grid-template-areas: "sources time search";
    }
    /* 为每个查询字段指定grid-area，用于后续响应式重排 */
    .rm-query-field--sources { grid-area: sources; }
    .rm-query-field--time    { grid-area: time; }
    .rm-query-field--search  { grid-area: search; }

    .rm-query-field { display: flex; flex-direction: column; gap: var(--rm-space-xs); min-width: 0; }
    .rm-query-field__label { font-size: 12px; color: var(--rm-ink-2); font-weight: 500; }
    /* 两组筛选项的最小宽度仅覆盖一行按钮，避免挤压搜索和操作区 */
    .rm-query-field--sources { min-width: 360px; }
    .rm-query-field--time { min-width: 480px; position: relative; }
    .rm-query-field--search { min-width: 220px; position: relative; }
    .rm-query-actions { display: flex; gap: 6px; }
    .rm-query-actions .rm-btn { min-width: 0; padding-inline: 12px; }
    .rm-export-menu { position: relative; }
    .rm-export-menu > summary { list-style: none; cursor: pointer; user-select: none; }
    .rm-export-menu > summary::-webkit-details-marker { display: none; }
    .rm-export-menu__chevron { transition: transform 150ms cubic-bezier(.2,.8,.2,1); }
    .rm-export-menu[open] .rm-export-menu__chevron { transform: rotate(180deg); }
    .rm-export-menu__options {
      position: absolute;
      z-index: 120;
      top: calc(100% + 6px);
      right: 0;
      min-width: 132px;
      padding: 5px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background: var(--rm-surface);
      box-shadow: var(--rm-shadow-2);
    }
    .rm-export-menu__options button {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      height: 34px;
      padding: 0 10px;
      border: 0;
      border-radius: var(--rm-radius-sm);
      background: transparent;
      color: var(--rm-ink);
      font: inherit;
      cursor: pointer;
    }
    .rm-export-menu__options button:hover,
    .rm-export-menu__options button:focus-visible { background: var(--rm-surface-2); outline: none; }
    .rm-query-footer { display: flex; justify-content: flex-end; margin-top: 14px; }
    .rm-query-grid {
      display: grid;
      grid-template-columns: minmax(370px, 1.7fr) minmax(330px, 1.35fr) minmax(180px, 1fr) minmax(180px, 0.8fr) repeat(3, minmax(100px, 0.42fr));
      align-items: end;
      gap: 12px;
    }
    .rm-query-grid .rm-query-field--sources,
    .rm-query-grid .rm-query-field--time,
    .rm-query-grid .rm-query-field--search { grid-area: auto; min-width: 0; }
    @media (max-width: 1599px) {
      .rm-query-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 1279px) {
      .rm-query-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .rm-query-grid { grid-template-columns: 1fr; }
    }

    /* ===== 响应式断点（三档）===== */
    /* (1) 宽屏 >=1400px：四列单行布局 */
    @media (min-width: 1400px) {
      .rm-query-row--primary {
        grid-template-columns: minmax(360px, 0.9fr) minmax(480px, 1.2fr) minmax(260px, 1fr);
        grid-template-areas: "sources time search";
      }
    }
    /* (2) 中等屏幕 680~1399px：两列布局，两个筛选组仍各自单行 */
    @media (max-width: 1399px) and (min-width: 680px) {
      .rm-query-row--primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas:
          "sources time"
          "search  search";
      }
      .rm-query-field--sources,
      .rm-query-field--time { min-width: 0; }
    }
    /* (3) 窄屏 <680px：单列堆叠，按钮铺满 */
    @media (max-width: 679px) {
      .rm-query-row--primary {
        grid-template-columns: 1fr;
        grid-template-areas:
          "sources"
          "time"
          "search";
      }
      .rm-query-field--sources { min-width: 0; }
      .rm-query-field--time    { min-width: 0; }
      .rm-query-field--search  { min-width: 0; }
      .rm-query-footer { justify-content: stretch; }
      .rm-query-actions { width: 100%; }
      .rm-query-actions .rm-btn { flex: 1; }
    }

    /* 数据源切换 */
    .rm-source-chips { display: flex; flex-wrap: nowrap; gap: var(--rm-space-xs); }
    .rm-source-chip {
      display: inline-flex; align-items: center; gap: var(--rm-space-xs);
      height: 36px; padding: 0 10px; border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line); background-color: transparent;
      color: var(--rm-ink-2); font-size: 13px; font-weight: 600; cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-source-chip:hover { border-color: var(--rm-brand); color: var(--rm-ink); }
    .rm-source-chip--active { background-color: var(--rm-brand); border-color: var(--rm-brand); color: var(--rm-brand-ink); }

    .page-history .rm-query-bar {
      border: 1px solid rgba(148, 163, 184, 0.16);
      background: linear-gradient(180deg, rgba(42, 61, 82, 0.98), rgba(36, 54, 74, 0.98));
      box-shadow: 0 10px 30px rgba(7, 16, 30, 0.12);
    }
    .page-history .rm-header__logo[data-navigate] {
      color: inherit;
      text-decoration: none;
      cursor: pointer;
      border-radius: var(--rm-radius-sm);
    }
    .page-history .rm-header__logo[data-navigate]:focus-visible {
      outline: 2px solid var(--rm-brand);
      outline-offset: 4px;
    }
    .page-history .rm-source-chips { width: 100%; }
    .page-history .rm-source-chip {
      flex: 1 1 auto;
      justify-content: center;
      min-width: 0;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .page-history .rm-source-chips {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .page-history .rm-source-chip:last-child { grid-column: 1 / -1; }
    }

    .rm-time-range-search {
      position: relative;
      min-width: 0;
    }
    .rm-date-range-input {
      width: 100%;
      height: 36px;
      padding: 0 10px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: var(--rm-radius-sm);
      background: rgba(19, 31, 49, 0.7);
      color: var(--rm-ink-2);
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }
    .rm-date-range-input:hover,
    .rm-date-range-input:focus-visible {
      border-color: var(--rm-brand);
      outline: none;
    }
    .rm-date-range-input__value {
      display: none;
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 12px;
    }
    html[lang^="zh"] .rm-date-range-input__value[data-language="zh"],
    html[lang^="en"] .rm-date-range-input__value[data-language="en"],
    html[lang^="ms"] .rm-date-range-input__value[data-language="ms"] { display: block; }
    .rm-date-range-input__chevron { flex: 0 0 auto; }
    .rm-date-range-input[aria-expanded="true"] .rm-date-range-input__chevron { transform: rotate(180deg); }
    .rm-localized-date-picker__range-tabs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .rm-localized-date-picker__range-tab {
      min-width: 0;
      padding: 7px 8px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background: var(--rm-surface);
      color: var(--rm-ink-2);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      cursor: pointer;
    }
    .rm-localized-date-picker__range-tab span { font-size: 11px; }
    .rm-localized-date-picker__range-tab strong {
      max-width: 100%;
      overflow: hidden;
      color: var(--rm-ink);
      font-size: 11px;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rm-localized-date-picker__range-tab--active {
      border-color: var(--rm-brand);
      background: rgba(0, 212, 255, 0.08);
    }
    .rm-time-range-search > .rm-localized-date-picker {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 130;
      width: 420px;
      max-width: calc(100vw - 48px);
      margin-top: 0;
      background: var(--rm-surface-2);
      box-shadow: var(--rm-shadow-3);
    }

    .rm-query-row--filters {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      align-items: end;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid rgba(148, 163, 184, 0.14);
    }
    .rm-multi-select { position: relative; min-width: 0; }
    .rm-multi-select > summary {
      height: 36px;
      padding: 0 12px;
      border: 1px solid rgba(148, 163, 184, 0.22);
      border-radius: var(--rm-radius-sm);
      background: rgba(19, 31, 49, 0.7);
      color: var(--rm-ink-2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      list-style: none;
      font-size: 13px;
    }
    .rm-multi-select > summary::-webkit-details-marker { display: none; }
    .rm-multi-select > summary:hover,
    .rm-multi-select[open] > summary { border-color: var(--rm-brand); color: var(--rm-ink); }
    .rm-multi-select > summary [data-multi-select-label] {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rm-multi-select__actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; }
    .rm-multi-select__clear {
      display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center;
      padding: 0; border: 0; border-radius: 50%; background: transparent;
      color: var(--rm-ink-3); font-size: 17px; line-height: 1; cursor: pointer;
    }
    .rm-multi-select__clear[hidden] { display: none; }
    .rm-multi-select__clear:hover { background: var(--rm-surface); color: var(--rm-ink); }
    .rm-multi-select > summary svg { flex: 0 0 auto; transition: transform 150ms ease; }
    .rm-multi-select[open] > summary svg { transform: rotate(180deg); }
    .rm-multi-select__menu {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      right: 0;
      z-index: 120;
      padding: 6px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background: var(--rm-surface-2);
      box-shadow: var(--rm-shadow-3);
    }
    .rm-multi-select__menu label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 34px;
      padding: 6px 8px;
      border-radius: 5px;
      color: var(--rm-ink-2);
      font-size: 12.5px;
      cursor: pointer;
    }
    .rm-multi-select__menu label:hover { background: var(--rm-surface); color: var(--rm-ink); }
    .rm-multi-select__menu input { accent-color: var(--rm-brand); }
    @media (max-width: 900px) {
      .rm-query-row--filters { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .rm-time-range-search { grid-template-columns: 1fr; }
      .rm-time-range-search__sep { display: none; }
      .rm-time-range-search > .rm-localized-date-picker { width: 100%; }
    }

    /* 时间范围 */
    .rm-date-range {
      display: inline-flex; align-items: center; flex-wrap: nowrap;
      background-color: var(--rm-bg);
      border: 1px solid var(--rm-line); border-radius: var(--rm-radius-sm); overflow: hidden;
    }
    .rm-date-range__btn {
      height: 34px; padding: 0 9px; border: none; background-color: transparent;
      color: var(--rm-ink-2); font-size: 12px; font-weight: 500; cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1); white-space: nowrap;
    }
    .rm-date-range__btn:hover { background-color: var(--rm-surface-2); color: var(--rm-ink); }
    .rm-date-range__btn--active { background-color: var(--rm-brand); color: var(--rm-brand-ink); }
    .rm-date-range__btn--active:hover { background-color: var(--rm-brand-hover); color: var(--rm-brand-ink); }
    .rm-date-range__btn--custom { border-left: 1px solid var(--rm-line); }

    /* 自定义时间范围面板 */
    .rm-custom-date {
      position: absolute; top: calc(100% + 6px); left: 0; z-index: 100;
      width: 440px; max-width: calc(100vw - 32px);
      background-color: var(--rm-surface-2); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md); padding: var(--rm-space-md);
      box-shadow: var(--rm-shadow-3);
    }
    .rm-custom-date__head {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: var(--rm-space-sm);
    }
    .rm-custom-date__title { font-size: 13px; font-weight: 600; color: var(--rm-ink); }
    .rm-custom-date__close {
      display: inline-flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border: none; border-radius: var(--rm-radius-sm);
      background: transparent; color: var(--rm-ink-2); cursor: pointer;
    }
    .rm-custom-date__close:hover { background-color: var(--rm-surface); color: var(--rm-ink); }
    .rm-custom-date__row { display: flex; align-items: flex-end; gap: var(--rm-space-xs); margin-bottom: var(--rm-space-sm); }
    .rm-custom-date__field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
    .rm-custom-date__field .rm-input { min-width: 0; }
    .rm-custom-date__field label { font-size: 11px; color: var(--rm-ink-2); }
    .rm-localized-datetime { position: relative; min-width: 0; }
    .rm-localized-datetime .rm-input { width: 100%; }
    .rm-localized-datetime__placeholder {
      position: absolute; top: 50%; left: 12px; z-index: 1;
      max-width: calc(100% - 52px); overflow: hidden; transform: translateY(-50%);
      color: var(--rm-ink-2); font-size: 13px; line-height: 1; white-space: nowrap;
      display: none; pointer-events: none;
    }
    html[lang^="zh"] .rm-localized-datetime__placeholder[data-language="zh"],
    html[lang^="en"] .rm-localized-datetime__placeholder[data-language="en"],
    html[lang^="ms"] .rm-localized-datetime__placeholder[data-language="ms"] { display: block; }
    .rm-localized-datetime > .rm-localized-datetime__input {
      color: transparent !important;
      -webkit-text-fill-color: transparent;
      caret-color: transparent;
      font-size: 0;
      cursor: pointer;
    }
    .rm-localized-datetime__input::-webkit-datetime-edit { color: transparent; }
    .rm-localized-datetime__input::-webkit-datetime-edit-fields-wrapper { visibility: hidden; }
    .rm-custom-date__sep { padding-bottom: 8px; font-size: 12px; color: var(--rm-ink-3); }
    .rm-custom-date__actions { display: flex; justify-content: flex-end; gap: var(--rm-space-xs); }
    .rm-localized-date-picker {
      margin-top: var(--rm-space-sm);
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      padding: var(--rm-space-sm);
      background-color: var(--rm-bg);
    }
    .rm-localized-date-picker__head,
    .rm-localized-date-picker__time,
    .rm-localized-date-picker__actions { display: flex; align-items: center; }
    .rm-localized-date-picker__head { justify-content: space-between; margin-bottom: 8px; }
    .rm-localized-date-picker__head strong { font-size: 13px; color: var(--rm-ink); }
    .rm-localized-date-picker__nav,
    .rm-localized-date-picker__actions button {
      border: 0;
      background: transparent;
      color: var(--rm-brand);
      font: inherit;
      cursor: pointer;
    }
    .rm-localized-date-picker__nav { width: 28px; height: 28px; font-size: 24px; line-height: 1; }
    .rm-localized-date-picker__weekdays,
    .rm-localized-date-picker__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
    .rm-localized-date-picker__weekdays { margin-bottom: 4px; color: var(--rm-ink-3); font-size: 11px; }
    .rm-localized-date-picker__days { gap: 2px; }
    .rm-localized-date-picker__day {
      height: 30px;
      border: 0;
      border-radius: var(--rm-radius-sm);
      background: transparent;
      color: var(--rm-ink);
      font: inherit;
      font-size: 12px;
      cursor: pointer;
    }
    .rm-localized-date-picker__day:hover:not(.rm-localized-date-picker__day--selected) {
      background-color: rgba(0, 212, 255, 0.1);
      color: var(--rm-ink);
    }
    .rm-localized-date-picker__day--outside { color: var(--rm-ink-3); }
    .rm-localized-date-picker__day--selected { background-color: var(--rm-brand); color: var(--rm-brand-ink); font-weight: 700; }
    .rm-localized-date-picker__time { justify-content: center; gap: 6px; margin-top: 8px; color: var(--rm-ink-2); font-size: 12px; }
    .rm-localized-date-picker__time-picker { position: relative; }
    .rm-localized-date-picker__time-trigger {
      display: inline-flex;
      min-width: 48px;
      height: 28px;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      padding: 0 7px;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background: var(--rm-surface);
      color: var(--rm-ink);
      font: inherit;
      cursor: pointer;
    }
    .rm-localized-date-picker__time-trigger:hover,
    .rm-localized-date-picker__time-trigger:focus-visible,
    .rm-localized-date-picker__time-trigger[aria-expanded="true"] {
      border-color: var(--rm-brand);
      outline: none;
    }
    .rm-localized-date-picker__time-caret { color: var(--rm-ink-3); line-height: 1; }
    .rm-localized-date-picker__time-menu {
      position: absolute;
      bottom: calc(100% + 5px);
      left: 50%;
      z-index: 4;
      width: 54px;
      max-height: 156px;
      padding: 4px;
      overflow-y: auto;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background: var(--rm-surface);
      box-shadow: var(--rm-shadow-2);
      transform: translateX(-50%);
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    .rm-localized-date-picker__time-menu[hidden] { display: none; }
    .rm-localized-date-picker__time-option {
      display: block;
      width: 100%;
      min-height: 28px;
      padding: 3px 6px;
      border: 0;
      border-radius: calc(var(--rm-radius-sm) - 2px);
      background: transparent;
      color: var(--rm-ink);
      font: inherit;
      text-align: center;
      cursor: pointer;
    }
    .rm-localized-date-picker__time-option:hover,
    .rm-localized-date-picker__time-option:focus-visible {
      background: var(--rm-surface-2);
      color: var(--rm-ink);
      outline: none;
    }
    .rm-localized-date-picker__time-option[aria-selected="true"] {
      background: var(--rm-brand);
      color: var(--rm-brand-ink);
      font-weight: 700;
    }
    .rm-localized-date-picker__actions { justify-content: space-between; margin-top: 8px; font-size: 12px; }
    @media (max-width: 768px) {
      .rm-custom-date { left: auto; right: 0; width: calc(100vw - 32px); }
      .rm-custom-date__row { flex-direction: column; align-items: stretch; }
      .rm-custom-date__sep { text-align: center; padding: 4px 0; }
    }

    /* 搜索框 */
    .rm-search-box {
      display: flex; align-items: center; gap: var(--rm-space-xs);
      height: 36px; padding: 0 12px; border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line); background-color: var(--rm-bg);
      min-width: 260px;
    }
    .rm-search-box__icon { color: var(--rm-ink-3); }
    .rm-search-box__input {
      flex: 1; border: none; background: transparent; color: var(--rm-ink); font-size: 13px; outline: none;
    }
    .rm-search-box__input::placeholder { color: var(--rm-ink-3); }
    .rm-search-box__history {
      display: flex; align-items: center; justify-content: center;
      width: 24px; height: 24px; border-radius: var(--rm-radius-sm);
      border: none; background: transparent; color: var(--rm-ink-2); cursor: pointer;
      order: 1;
    }
    .rm-search-box__history:hover { color: var(--rm-brand); }
    .rm-search-box__clear {
      display: flex; align-items: center; justify-content: center;
      width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
      background: transparent; color: var(--rm-ink-3); font-size: 16px; line-height: 1; cursor: pointer;
      order: 2;
    }
    .rm-search-box__clear:hover { background: var(--rm-surface-2); color: var(--rm-ink); }

    /* 搜索历史占位 */
    .rm-search-history {
      position: absolute; top: calc(100% + 4px); left: 0; right: 0;
      background-color: var(--rm-surface-2); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm); padding: var(--rm-space-sm);
      box-shadow: var(--rm-shadow-3); z-index: 90; display: none;
    }
    .rm-search-history__title { font-size: 12px; color: var(--rm-ink-3); margin-bottom: var(--rm-space-xs); }
    .rm-search-history__item {
      padding: 6px 8px; border-radius: var(--rm-radius-sm); color: var(--rm-ink); font-size: 13px;
      cursor: pointer;
    }
    .rm-search-history__item:hover { background-color: var(--rm-surface); color: var(--rm-brand); }

    /* 高级筛选面板 */
    .rm-advanced-panel {
      display: grid; grid-template-rows: 0fr; overflow: hidden;
      margin-top: 0; padding-top: 0; border-top: 1px solid transparent;
      transition: grid-template-rows 250ms cubic-bezier(.2,.8,.2,1),
                  margin-top 250ms cubic-bezier(.2,.8,.2,1),
                  padding-top 250ms cubic-bezier(.2,.8,.2,1),
                  border-color 250ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-advanced-panel--open {
      grid-template-rows: 1fr; border-top-color: var(--rm-line); margin-top: var(--rm-space-md); padding-top: var(--rm-space-md);
    }
    .rm-advanced-panel__grid {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      min-height: 0; overflow: hidden; opacity: 0; transform: translateY(-4px);
      gap: var(--rm-space-md); pointer-events: none;
      transition: opacity 180ms ease, transform 250ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-advanced-panel--open .rm-advanced-panel__grid { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .rm-btn--active { border-color: var(--rm-brand); color: var(--rm-brand); }

    /* ====== 左侧筛选面板 ====== */
    .rm-filter-panel {
      width: var(--rm-layout-sidebar-w); flex-shrink: 0;
      background-color: var(--rm-surface); border-right: 1px solid var(--rm-line);
      display: flex; flex-direction: column;
      transition: transform 250ms ease;
    }
    .rm-filter-panel__header {
      display: flex; align-items: center; justify-content: space-between;
      padding: var(--rm-space-md) var(--rm-space-lg); border-bottom: 1px solid var(--rm-line);
    }
    .rm-filter-panel__title { font-size: 15px; font-weight: 600; color: var(--rm-ink); }
    .rm-filter-panel__close {
      display: none; align-items: center; justify-content: center;
      width: 28px; height: 28px; border-radius: var(--rm-radius-sm);
      border: none; background: transparent; color: var(--rm-ink-2); cursor: pointer;
    }
    .rm-filter-panel__body { flex: 1; overflow-y: auto; padding: var(--rm-space-md) var(--rm-space-lg); }
    .rm-filter-panel__footer {
      display: flex; flex-direction: column; gap: var(--rm-space-sm);
      padding: var(--rm-space-md) var(--rm-space-lg); border-top: 1px solid var(--rm-line);
    }
    .w-full { width: 100%; }

    .rm-filter-group { margin-bottom: var(--rm-space-lg); }
    .rm-filter-group__label { font-size: 13px; font-weight: 600; color: var(--rm-ink); margin-bottom: var(--rm-space-sm); }
    .rm-filter-group__options { display: flex; flex-wrap: wrap; gap: var(--rm-space-xs); }
    .rm-filter-group__options--inline { justify-content: flex-end; }
    .rm-check-chip {
      display: inline-flex; align-items: center; gap: var(--rm-space-xs);
      height: 28px; padding: 0 10px; border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line); background-color: transparent;
      color: var(--rm-ink-2); font-size: 12px; cursor: pointer;
      transition: all 150ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-check-chip:hover { border-color: var(--rm-brand); color: var(--rm-ink); }
    .rm-check-chip input { accent-color: var(--rm-brand); cursor: pointer; }
    .rm-check-chip--ghost { background-color: var(--rm-bg); }
    .rm-check-chip--p0 { border-color: rgba(239,68,68,0.4); color: var(--rm-severity-critical); }
    .rm-check-chip--p1 { border-color: rgba(249,115,22,0.4); color: var(--rm-severity-high); }
    .rm-check-chip--p2 { border-color: rgba(245,158,11,0.4); color: var(--rm-severity-medium); }
    .rm-check-chip--p3 { border-color: rgba(59,130,246,0.4); color: var(--rm-severity-low); }
    .rm-check-chip--info { border-color: rgba(0,212,255,0.4); color: var(--rm-brand); }

    .rm-range-inputs { display: flex; align-items: center; gap: var(--rm-space-xs); }
    .rm-range-inputs__sep { color: var(--rm-ink-3); }
    .rm-input {
      height: 36px; padding: 0 12px; border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line); background-color: var(--rm-bg);
      color: var(--rm-ink); font-size: 13px; outline: none; width: 100%;
    }
    .rm-input--sm { height: 32px; font-size: 12px; }
    .rm-input:focus { border-color: var(--rm-brand); }
    .mt-2 { margin-top: var(--rm-space-sm); }
    .mt-4 { margin-top: var(--rm-space-md); }
    .mt-6 { margin-top: var(--rm-space-lg); }

    /* ====== 统计摘要卡片 ====== */
    .rm-summary-cards {
      display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--rm-space-lg);
      margin-bottom: var(--rm-space-xl);
    }
    .rm-summary-card {
      background-color: var(--rm-surface); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md); padding: var(--rm-space-lg);
      transition: box-shadow 150ms ease;
    }
    .rm-summary-card:hover { box-shadow: var(--rm-shadow-2); }
    .rm-summary-card__label { font-size: 13px; color: var(--rm-ink-2); margin-bottom: var(--rm-space-sm); }
    .rm-summary-card__value {
      font-family: var(--rm-font-mono); font-size: 28px; font-weight: 700;
      color: var(--rm-ink); margin-bottom: var(--rm-space-xs);
    }
    .rm-summary-card__change { display: inline-flex; align-items: center; gap: var(--rm-space-xs); font-size: 12px; color: var(--rm-ink-2); }
    .rm-summary-card--alert { border-left: 3px solid var(--rm-state-error); }
    .rm-summary-card--pending { border-left: 3px solid var(--rm-state-warning); }
    .rm-summary-card--resolved { border-left: 3px solid var(--rm-state-success); }

    .page-history .rm-summary-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-bottom: var(--rm-space-sm);
    }
    .page-history .rm-summary-refresh {
      background-color: var(--rm-surface-2);
    }
    .page-history .rm-summary-refresh svg {
      width: 16px;
      height: 16px;
      flex: 0 0 auto;
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2;
    }
    .page-history .rm-summary-refresh--loading svg { animation: rm-summary-refresh-spin 800ms linear infinite; }
    @keyframes rm-summary-refresh-spin { to { transform: rotate(360deg); } }

    /* ====== 视图 Tab ====== */
    .rm-view-tabs {
      display: flex; align-items: center; gap: var(--rm-space-xs);
      margin-bottom: var(--rm-space-xl); border-bottom: 1px solid var(--rm-line);
      padding-bottom: var(--rm-space-sm);
    }
    .rm-view-tabs__btn {
      display: inline-flex; align-items: center; gap: var(--rm-space-xs);
      height: 40px; padding: 0 18px; border: none; border-radius: var(--rm-radius-sm);
      background-color: transparent; color: var(--rm-ink-2); font-size: 14px;
      font-weight: 600; cursor: pointer; transition: all 150ms cubic-bezier(.2,.8,.2,1);
      position: relative;
    }
    .rm-view-tabs__btn:hover { background-color: var(--rm-surface); color: var(--rm-ink); }
    .rm-view-tabs__btn--active { background-color: var(--rm-surface); color: var(--rm-brand); }
    .rm-view-tabs__btn--active::after {
      content: ''; position: absolute; left: 12px; right: 12px; bottom: -9px;
      height: 2px; background-color: var(--rm-brand); border-radius: 1px;
    }

    /* ====== 视图面板 ====== */
    .rm-view-panel { display: none; }
    .rm-view-panel--active { display: block; animation: rm-fade-in 200ms ease-out; }
    @keyframes rm-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

    .rm-panel-toolbar {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: var(--rm-space-md); margin-bottom: var(--rm-space-lg);
    }
    .rm-panel-toolbar__left { display: flex; align-items: center; gap: var(--rm-space-sm); }
    .rm-panel-toolbar__title { font-size: 15px; font-weight: 600; color: var(--rm-ink); }
    .rm-panel-toolbar__count { font-size: 13px; color: var(--rm-ink-3); }
    .rm-panel-toolbar__right { display: flex; align-items: center; gap: var(--rm-space-xs); flex-wrap: wrap; }

    /* ====== 通用状态占位 ====== */
    .rm-state {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: var(--rm-space-md); padding: var(--rm-space-2xl); color: var(--rm-ink-3);
      text-align: center; background-color: var(--rm-surface); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md);
    }
    .rm-state--compact { padding: var(--rm-space-xl); }
    .rm-state__title { font-size: 16px; font-weight: 600; color: var(--rm-ink); }
    .rm-state__desc { font-size: 13px; color: var(--rm-ink-2); max-width: 480px; }
    .rm-state--error .rm-state__title { color: var(--rm-state-error); }
    .rm-state--boundary .rm-state__title { color: var(--rm-state-warning); }

    /* ====== 综合时间轴 ====== */
    .rm-timeline { position: relative; padding-left: 28px; }
    .rm-timeline::before {
      content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
      width: 2px; background-color: var(--rm-line); border-radius: 1px;
    }
    .rm-timeline__group { margin-bottom: var(--rm-space-xl); }
    .rm-timeline__date {
      font-family: var(--rm-font-mono); font-size: 13px; font-weight: 600;
      color: var(--rm-ink); margin-bottom: var(--rm-space-md); margin-left: -28px;
    }
    .rm-timeline__items { display: flex; flex-direction: column; gap: var(--rm-space-lg); }
    .rm-timeline__item { position: relative; cursor: pointer; }
    .rm-timeline__dot {
      position: absolute; left: -24px; top: 14px; width: 12px; height: 12px;
      border-radius: var(--rm-radius-full); background-color: var(--rm-surface);
      border: 2px solid var(--rm-line); z-index: 1;
    }
    .rm-timeline--compact .rm-timeline__dot { left: -26px; }
    .rm-timeline__item--operation .rm-timeline__dot { border-color: var(--rm-brand); background-color: var(--rm-brand); }
    .rm-timeline__item--cv .rm-timeline__dot { border-color: var(--rm-state-info); background-color: var(--rm-state-info); }
    .rm-timeline__item--iot .rm-timeline__dot { border-color: var(--rm-state-warning); background-color: var(--rm-state-warning); }
    /* AI运营报告时间轴点：紫色标识 */
    .rm-timeline__item--aireport .rm-timeline__dot { border-color: #8b5cf6; background-color: #8b5cf6; }
    .rm-timeline__item--alert .rm-timeline__card { border-color: var(--rm-state-error); box-shadow: var(--rm-shadow-alert); }
    .rm-timeline__card {
      background-color: var(--rm-surface); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md); padding: var(--rm-space-md);
      transition: box-shadow 150ms ease, border-color 150ms ease;
    }
    .rm-timeline__item:hover .rm-timeline__card { box-shadow: var(--rm-shadow-2); border-color: var(--rm-brand); }
    .rm-timeline__header {
      display: flex; align-items: center; gap: var(--rm-space-sm); flex-wrap: wrap;
      margin-bottom: var(--rm-space-sm);
    }
    .rm-timeline__source {
      display: inline-flex; align-items: center; gap: var(--rm-space-xs);
      font-size: 12px; font-weight: 600; color: var(--rm-ink-2);
    }
    .rm-timeline__time { font-family: var(--rm-font-mono); font-size: 12px; color: var(--rm-ink-3); }
    .rm-timeline__title { font-size: 15px; font-weight: 600; color: var(--rm-ink); margin-bottom: var(--rm-space-xs); }
    .rm-timeline__desc { font-size: 13px; color: var(--rm-ink-2); line-height: 1.6; }

    /* ====== 数据表格 ====== */
    .rm-table-wrap { background-color: var(--rm-surface); border: 1px solid var(--rm-line); border-radius: var(--rm-radius-md); overflow: hidden; }
    .rm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .rm-table th, .rm-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rm-line); }
    .rm-table th { background-color: var(--rm-surface-2); color: var(--rm-ink-2); font-weight: 600; }
    .rm-table tr:last-child td { border-bottom: none; }
    .rm-table td { color: var(--rm-ink); }
    .rm-table tr:hover td { background-color: rgba(0,212,255,0.04); }
    .rm-table__num { font-family: var(--rm-font-mono); font-variant-numeric: tabular-nums; }
    .rm-table__mono { font-family: var(--rm-font-mono); }
    .rm-table__check { width: 40px; text-align: center; }
    .rm-table__actions { display: flex; align-items: center; gap: var(--rm-space-xs); }
    .rm-table__actions .rm-btn-sm { height: 28px; padding: 0 12px; font-size: 12px; }
    .rm-table__ellipsis {
      max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .rm-table__row--alert { background-color: rgba(239,68,68,0.06); }

    /* ====== 标签徽章 ====== */
    .rm-badge {
      display: inline-flex; align-items: center; gap: var(--rm-space-xs);
      height: 22px; padding: 0 10px; border-radius: var(--rm-radius-full);
      font-size: 12px; font-weight: 500;
    }
    .rm-badge--p0 { background-color: rgba(239,68,68,0.15); color: var(--rm-severity-critical); }
    .rm-badge--p1 { background-color: rgba(249,115,22,0.15); color: var(--rm-severity-high); }
    .rm-badge--p2 { background-color: rgba(245,158,11,0.15); color: var(--rm-severity-medium); }
    .rm-badge--p3 { background-color: rgba(59,130,246,0.15); color: var(--rm-severity-low); }
    .rm-badge--info { background-color: rgba(0,212,255,0.15); color: var(--rm-brand); }
    .rm-badge--status { background-color: var(--rm-surface-2); color: var(--rm-ink-2); }
    .rm-badge--error { background-color: rgba(239,68,68,0.15); color: var(--rm-state-error); }
    .rm-source-tag {
      display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
      border-radius: var(--rm-radius-sm); font-size: 12px; font-weight: 600;
    }
    .rm-source-tag--operation { background-color: rgba(0,212,255,0.12); color: var(--rm-brand); }
    .rm-source-tag--cv { background-color: rgba(37,99,235,0.12); color: #2563eb; } /* 深蓝（避免和原AI报告紫色撞色） */
    .rm-source-tag--iot { background-color: rgba(245,158,11,0.12); color: var(--rm-state-warning); }
    /* ====== 新增五分类独立颜色：AI报告=靛青 / AI建议与分析=粉紫 ====== */
    .rm-source-tag--aireport { background-color: rgba(139,92,246,0.12); color: #8b5cf6; } /* 兼容旧类：紫 */
    .rm-source-tag--ai-report { background-color: rgba(99,102,241,0.12); color: #6366f1; } /* AI报告（周期）：靛青 */
    .rm-source-tag--ai-advice { background-color: rgba(236,72,153,0.12); color: #ec4899; } /* AI建议与分析（实时）：粉紫 */

    .page-history .rm-table--list th,
    .page-history .rm-table--list .rm-badge,
    .page-history .rm-table--list .rm-source-tag {
      white-space: nowrap;
      word-break: keep-all;
    }

    /* ====== 分页 ====== */
    .rm-pagination {
      display: flex; align-items: center; justify-content: space-between;
      flex-wrap: wrap; gap: var(--rm-space-md); margin: var(--rm-space-lg) 0 36px;
    }
    .rm-pagination__info { font-size: 13px; color: var(--rm-ink-2); }
    .rm-pagination__size { display: flex; align-items: center; gap: var(--rm-space-xs); font-size: 13px; color: var(--rm-ink-2); }
    .page-history .rm-pagination__size .rm-select {
      width: 64px;
      height: 32px;
      padding: 0 28px 0 10px;
      appearance: none;
      border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-sm);
      background-color: var(--rm-surface);
      background-image: linear-gradient(45deg, transparent 50%, var(--rm-ink-2) 50%), linear-gradient(135deg, var(--rm-ink-2) 50%, transparent 50%);
      background-position: calc(100% - 14px) 13px, calc(100% - 10px) 13px;
      background-repeat: no-repeat;
      background-size: 4px 4px, 4px 4px;
      color: var(--rm-ink);
      font: inherit;
      cursor: pointer;
    }
    .page-history .rm-pagination__size .rm-select:hover,
    .page-history .rm-pagination__size .rm-select:focus {
      border-color: var(--rm-brand);
      outline: none;
    }
    .page-history .rm-pagination__size .rm-select option { background: var(--rm-surface); color: var(--rm-ink); }
    .rm-pagination__pages { display: flex; align-items: center; gap: var(--rm-space-xs); }
    .rm-pagination__btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line); background-color: var(--rm-surface);
      color: var(--rm-ink); font-size: 13px; cursor: pointer;
    }
    .rm-pagination__btn:hover:not(:disabled) { border-color: var(--rm-brand); color: var(--rm-brand); }
    .rm-pagination__btn--active { background-color: var(--rm-brand); border-color: var(--rm-brand); color: var(--rm-brand-ink); }
    .rm-pagination__btn--nav { color: #fff; }
    .rm-pagination__btn--nav svg {
      width: 16px; height: 16px; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    }
    .rm-pagination__btn--nav:hover:not(:disabled) { color: #fff; }
    .rm-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .rm-pagination__ellipsis { color: var(--rm-ink-3); padding: 0 4px; }

    /* ====== 经营趋势 ====== */
    .rm-trend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rm-space-lg); margin-bottom: var(--rm-space-xl); }
    .rm-trend-card {
      background-color: var(--rm-surface); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md); padding: var(--rm-space-lg);
    }
    .rm-trend-card__label { font-size: 13px; color: var(--rm-ink-2); margin-bottom: var(--rm-space-sm); }
    .rm-trend-card__value { font-family: var(--rm-font-mono); font-size: 28px; font-weight: 700; color: var(--rm-ink); margin-bottom: var(--rm-space-xs); }
    .rm-trend-card__change { display: inline-flex; align-items: center; gap: var(--rm-space-xs); font-size: 13px; font-weight: 500; }
    .rm-trend-card__change--up { color: var(--rm-state-success); }
    .rm-trend-card__change--down { color: var(--rm-state-error); }

    .rm-metric-config { display: flex; flex-wrap: wrap; gap: var(--rm-space-xs); }
    .rm-chart-type { display: flex; gap: var(--rm-space-xs); }
    .rm-chart-type__btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; border-radius: var(--rm-radius-sm);
      border: 1px solid var(--rm-line); background-color: var(--rm-surface);
      color: var(--rm-ink-2); cursor: pointer;
    }
    .rm-chart-type__btn:hover { border-color: var(--rm-brand); color: var(--rm-brand); }
    .rm-chart-type__btn--active { background-color: var(--rm-brand); border-color: var(--rm-brand); color: var(--rm-brand-ink); }

    .rm-chart-card__header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--rm-space-md);
    }
    .rm-chart-card__title { font-size: 14px; font-weight: 600; color: var(--rm-ink); }
    .rm-chart-card__hint { font-size: 12px; color: var(--rm-ink-3); }
    .rm-chart-placeholder {
      position: relative; height: 240px; background-color: var(--rm-bg);
      border-radius: var(--rm-radius-sm); overflow: hidden;
      display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .rm-chart-placeholder__svg {
      position: absolute; inset: 0; width: 100%; height: 100%;
    }
    .rm-chart-placeholder__legend {
      position: relative; z-index: 1; display: flex; gap: var(--rm-space-lg);
      background-color: rgba(30,41,59,0.85); padding: 6px 14px;
      border-radius: var(--rm-radius-full); font-size: 12px; color: var(--rm-ink-2);
    }
    .rm-chart-placeholder__legend span { display: inline-flex; align-items: center; gap: var(--rm-space-xs); }

    /* ====== CV 事件 ====== */
    .rm-cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--rm-space-lg); }
    .rm-cv-card { display: flex; flex-direction: column; cursor: pointer; }
    .rm-cv-card__thumb {
      position: relative; height: 160px; background-color: var(--rm-bg);
      border-radius: var(--rm-radius-sm); display: flex; align-items: center;
      justify-content: center; color: var(--rm-ink-3); margin-bottom: var(--rm-space-md);
      border: 1px dashed var(--rm-line);
    }
    .rm-cv-card__badge {
      position: absolute; top: 10px; right: 10px;
      height: 24px; padding: 0 10px; border-radius: var(--rm-radius-full);
      background-color: var(--rm-state-warning); color: var(--rm-brand-ink);
      font-size: 12px; font-weight: 600; display: inline-flex; align-items: center;
    }
    .rm-cv-card__badge--resolved { background-color: var(--rm-state-success); color: #fff; }
    .rm-cv-card__body { flex: 1; margin-bottom: var(--rm-space-md); }
    .rm-cv-card__meta { display: flex; align-items: center; gap: var(--rm-space-sm); margin-bottom: var(--rm-space-xs); }
    .rm-cv-card__time { font-family: var(--rm-font-mono); font-size: 12px; color: var(--rm-ink-3); }
    .rm-cv-card__title { font-size: 15px; font-weight: 600; color: var(--rm-ink); margin-bottom: var(--rm-space-xs); }
    .rm-cv-card__desc { font-size: 13px; color: var(--rm-ink-2); }
    .rm-cv-card__actions { display: flex; gap: var(--rm-space-xs); }

    /* 视频回放占位 */
    .rm-video-player__header {
      display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--rm-space-md);
    }
    .rm-video-player__title { font-size: 14px; font-weight: 600; color: var(--rm-ink); }
    .rm-video-player__hint { font-size: 12px; color: var(--rm-ink-3); }
    .rm-video-player__screen {
      height: 320px; background: linear-gradient(135deg, var(--rm-surface-2) 0%, var(--rm-bg) 100%);
      border-radius: var(--rm-radius-sm); display: flex; flex-direction: column;
      align-items: center; justify-content: center; gap: var(--rm-space-md); color: var(--rm-ink-3);
    }

    /* ====== IoT 异常高亮 ====== */
    .rm-table__row--alert td { background-color: rgba(239,68,68,0.06); }
    .rm-table__row--alert:hover td { background-color: rgba(239,68,68,0.1); }

    /* ====== 详情抽屉 ====== */
    .rm-drawer-overlay {
      position: fixed; inset: 0; background-color: rgba(2, 8, 23, 0.66);
      backdrop-filter: blur(2px);
      opacity: 0; visibility: hidden; transition: all 250ms ease; z-index: 150;
    }
    .rm-drawer-overlay--open { opacity: 1; visibility: visible; }
    .rm-drawer {
      position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, calc(100vw - 48px));
      background-color: var(--rm-surface); border-left: 1px solid var(--rm-line);
      box-shadow: -24px 0 64px rgba(2, 8, 23, 0.34); z-index: 160;
      display: flex; flex-direction: column;
      transform: translateX(100%); transition: transform 300ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-drawer--open { transform: translateX(0); }
    .rm-drawer-header {
      display: flex; align-items: center; justify-content: space-between;
      min-height: 68px; padding: 16px 24px;
      border-bottom: 1px solid var(--rm-line); flex-shrink: 0;
    }
    .rm-drawer-header__left {
      display: flex; align-items: center; gap: 10px; min-width: 0;
      flex: 1 1 auto; overflow: hidden;
    }
    .rm-drawer-header__left > .rm-badge {
      flex: 0 0 auto;
      min-width: max-content;
      white-space: nowrap;
    }
    .rm-drawer-header__title {
      display: block; min-width: 0; flex: 1 1 auto;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      font-size: 17px; font-weight: 650; line-height: 1.4; color: var(--rm-ink);
      cursor: help;
    }
    .rm-drawer-header__close {
      display: flex; align-items: center; justify-content: center;
      flex: 0 0 auto; min-width: 52px; height: 34px; margin-left: 12px; padding: 0 10px;
      border: 1px solid transparent; border-radius: var(--rm-radius-sm);
      background: transparent; color: var(--rm-ink-2); font-size: 12px; font-weight: 500; cursor: pointer;
    }
    .rm-drawer-header__close:hover { background-color: var(--rm-surface-2); border-color: var(--rm-line); color: var(--rm-ink); }
    .rm-drawer-body {
      flex: 1; overflow-y: auto; overscroll-behavior: contain;
      padding: 24px 28px 32px; scrollbar-gutter: stable;
    }
    .rm-drawer-section {
      margin-bottom: 26px; padding-bottom: 26px; border-bottom: 1px solid var(--rm-line);
    }
    .rm-drawer-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
    .rm-drawer-section__title {
      margin-bottom: 12px; color: var(--rm-ink);
      font-size: 14px; font-weight: 650; line-height: 1.5; letter-spacing: 0.01em;
    }
    .rm-drawer-kv {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 17px 24px; padding: 18px;
      background-color: var(--rm-bg); border: 1px solid rgba(148, 163, 184, 0.1);
      border-radius: var(--rm-radius-md);
    }
    .rm-drawer-kv__item { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
    .rm-drawer-kv__item--wide { grid-column: 1 / -1; }
    .rm-drawer-kv__label { font-size: 11px; line-height: 1.35; color: var(--rm-ink-3); }
    .rm-drawer-kv__value {
      min-width: 0; color: var(--rm-ink); font-size: 14px; font-weight: 500; line-height: 1.45;
      overflow-wrap: anywhere; word-break: break-word;
    }
    .rm-drawer-kv__value--mono { font-family: var(--rm-font-mono); }
    .rm-drawer-desc {
      margin-top: 12px; padding: 14px 16px;
      background-color: rgba(15, 23, 42, 0.34); border: 1px solid rgba(148, 163, 184, 0.08);
      border-radius: var(--rm-radius-md);
    }
    .rm-drawer-desc__label { margin-bottom: 5px; color: var(--rm-ink-3); font-size: 11px; }
    .rm-drawer-desc__text { color: var(--rm-ink-2); font-size: 13px; line-height: 1.72; white-space: pre-wrap; overflow-wrap: anywhere; }
    .rm-drawer-metrics {
      display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px;
    }
    .rm-drawer-metric {
      min-height: 82px; padding: 15px 12px; text-align: center;
      background-color: var(--rm-bg); border: 1px solid rgba(148, 163, 184, 0.1); border-radius: var(--rm-radius-md);
    }
    .rm-drawer-metric__label { margin-bottom: 5px; color: var(--rm-ink-3); font-size: 11px; line-height: 1.35; }
    .rm-drawer-metric__value { color: var(--rm-ink); font-family: var(--rm-font-mono); font-size: 20px; font-weight: 650; line-height: 1.35; }
    .rm-drawer-media {
      position: relative; overflow: hidden; background-color: var(--rm-bg);
      border: 1px solid rgba(148, 163, 184, 0.14); border-radius: var(--rm-radius-md);
    }
    .rm-drawer-media__link {
      position: relative; display: block; min-height: 220px; aspect-ratio: 16 / 9;
      width: 100%; padding: 0; border: 0; overflow: hidden; background-color: #09111f;
      color: var(--rm-ink); cursor: zoom-in;
    }
    .rm-drawer-media__link img {
      display: block; width: 100%; height: 100%; object-fit: contain;
      transition: transform 180ms ease, opacity 180ms ease;
    }
    .rm-drawer-media__link:hover img { transform: scale(1.012); opacity: 0.94; }
    .rm-drawer-media__link:focus-visible { outline: 2px solid var(--rm-brand); outline-offset: -2px; }
    .rm-drawer-media__action {
      position: absolute; right: 10px; bottom: 10px; padding: 5px 9px;
      border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--rm-radius-full);
      background-color: rgba(2, 8, 23, 0.76); color: #f8fafc; font-size: 11px; line-height: 1.2;
    }
    .rm-drawer-media__empty {
      display: flex; min-height: 220px; align-items: center; justify-content: center; flex-direction: column;
      gap: 10px; color: var(--rm-ink-3); font-size: 13px;
    }
    .rm-drawer-picture-viewer {
      position: fixed; inset: 0; z-index: 180; display: flex; align-items: center; justify-content: center;
      padding: 24px; background-color: rgba(2, 8, 23, 0.84); cursor: zoom-out;
    }
    .rm-drawer-picture-viewer img {
      display: block; max-width: min(1200px, 100%); max-height: 100%; object-fit: contain; cursor: default;
    }
    .rm-drawer-picture-viewer__close {
      position: absolute; top: 20px; right: 24px; min-width: 52px; height: 34px; padding: 0 10px;
      border: 1px solid rgba(255, 255, 255, 0.22); border-radius: var(--rm-radius-sm);
      background-color: rgba(2, 8, 23, 0.7); color: #f8fafc; cursor: pointer;
    }
    .rm-drawer-picture-viewer__error { color: #f8fafc; font-size: 14px; }
    .rm-drawer .rm-timeline--compact { padding-left: 14px; }
    .rm-drawer .rm-timeline--compact .rm-timeline__card {
      padding: 14px 16px; background-color: rgba(15, 23, 42, 0.34);
      border: 1px solid rgba(148, 163, 184, 0.1); border-radius: var(--rm-radius-md);
    }
    .rm-drawer-footer {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 16px 24px; border-top: 1px solid var(--rm-line); flex-shrink: 0;
      background-color: var(--rm-surface); box-shadow: 0 -14px 30px rgba(2, 8, 23, 0.16);
    }
    .rm-drawer-footer .rm-btn { flex: 1; min-width: 80px; }
    .rm-drawer-footer--export-only .rm-btn { flex: 0 0 auto; }
    .rm-drawer-footer .rm-btn[hidden] { display: none; }

    .page-history .rm-event-handle-modal {
      position: fixed; inset: 0; z-index: 1000; display: none;
      align-items: center; justify-content: center; padding: var(--rm-space-md);
    }
    .page-history .rm-event-handle-modal.is-open { display: flex; }
    .rm-event-handle-modal .rm-modal__dialog { max-width: 520px; }
    .rm-form-field__textarea {
      width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px;
      border: 1px solid var(--rm-line); border-radius: var(--rm-radius-sm);
      background-color: var(--rm-bg); color: var(--rm-ink);
      font: 14px/1.6 var(--rm-font-sans); outline: none;
    }
    .rm-form-field__textarea:focus { border-color: var(--rm-brand); }
    .rm-form-field__textarea::placeholder { color: var(--rm-ink-3); }
    .rm-form-field__error {
      margin: 8px 0 0; color: var(--rm-state-error);
      font-size: 12px; line-height: 1.5;
    }

    /* ====== 批量操作栏 ====== */
    .rm-batch-bar {
      position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(calc(100% + 48px));
      display: flex; align-items: center; justify-content: space-between;
      gap: var(--rm-space-md); flex-wrap: wrap;
      max-width: 960px; width: calc(100% - var(--rm-space-xl));
      padding: var(--rm-space-md) var(--rm-space-lg);
      background-color: var(--rm-surface-2); border: 1px solid var(--rm-line);
      border-radius: var(--rm-radius-md); box-shadow: var(--rm-shadow-3);
      z-index: 140; transition: transform 300ms cubic-bezier(.2,.8,.2,1);
    }
    .rm-batch-bar--visible { transform: translateX(-50%) translateY(0); }
    .rm-batch-bar__left { display: flex; align-items: center; gap: var(--rm-space-md); }
    .rm-batch-bar__count { font-size: 14px; color: var(--rm-ink); }
    .rm-batch-bar__clear { font-size: 13px; color: var(--rm-ink-3); background: transparent; border: none; cursor: pointer; }
    .rm-batch-bar__clear:hover { color: var(--rm-brand); }
    .rm-batch-bar__right { display: flex; flex-wrap: wrap; gap: var(--rm-space-xs); }

    /* ====== 移动端底部 Tab ====== */
    .rm-mobile-tabs {
      display: none; position: fixed; left: 0; right: 0; bottom: 0;
      height: 60px; background-color: var(--rm-surface); border-top: 1px solid var(--rm-line);
      z-index: 130;
    }
    .rm-mobile-tabs__btn {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 2px; border: none; background: transparent; color: var(--rm-ink-3); font-size: 11px; cursor: pointer;
    }
    .rm-mobile-tabs__btn--active { color: var(--rm-brand); }

    /* ====== AI 光球动画 ====== */
    .rm-ai-orb {
      display: inline-block; width: 48px; height: 48px; border-radius: var(--rm-radius-full);
      background: radial-gradient(circle at 35% 35%, var(--rm-brand) 0%, var(--rm-brand-active) 60%, transparent 100%);
      box-shadow: 0 0 16px rgba(0,212,255,0.3); animation: rm-orb-breathe 3s ease-in-out infinite;
    }
    @keyframes rm-orb-breathe {
      0%, 100% { transform: scale(1); box-shadow: 0 0 16px rgba(0,212,255,0.3); }
      50% { transform: scale(1.05); box-shadow: 0 0 24px rgba(0,212,255,0.5); }
    }

    /* ====== 响应式断点 ====== */
    /* 1280-1439px：筛选面板可折叠，表格列默认隐藏次要列 */
    @media (max-width: 1439px) {
      .rm-filter-panel { position: fixed; left: 0; top: var(--rm-layout-header-h); bottom: 0; z-index: 120; transform: translateX(-100%); }
      .rm-filter-panel--open { transform: translateX(0); }
      .rm-filter-panel__close { display: flex; }
      .rm-table__col-secondary { display: none; }
    }

    /* ≥1440px 显示左侧筛选面板 */
    @media (min-width: 1440px) {
      .rm-filter-panel { position: relative; top: auto; transform: none; }
      .rm-filter-panel__close { display: none; }
    }

    /* 768-1279px：筛选面板顶部抽屉/折叠，时间轴单列，表格横向滚动 */
    @media (max-width: 1279px) {
      .rm-content { padding: var(--rm-space-md); }
      .rm-header { padding: 0 var(--rm-space-md); }
      .rm-page-title { margin-bottom: var(--rm-space-lg); }
      .rm-summary-cards { grid-template-columns: repeat(2, 1fr); }
      .rm-query-row { flex-direction: column; align-items: stretch; }
      .rm-query-field--time { overflow-x: auto; }
      .rm-date-range { width: max-content; }
      .rm-trend-grid { grid-template-columns: repeat(2, 1fr); }
      .rm-table-wrap { overflow-x: auto; }
      .rm-table--list { min-width: 900px; }
      .rm-panel-toolbar__right { width: 100%; justify-content: flex-start; }
    }

    /* <768px：顶部简化筛选，视图切换为底部 Tab，详情抽屉全屏 */
    @media (max-width: 767px) {
      .rm-header__title { display: none; }
      .rm-page-title__h1 { font-size: 18px; }
      .rm-page-title__right { display: none; }
      .rm-summary-cards { grid-template-columns: repeat(2, 1fr); gap: var(--rm-space-sm); }
      .rm-summary-card { padding: var(--rm-space-md); }
      .rm-summary-card__value { font-size: 22px; }
      .rm-view-tabs { display: none; }
      .rm-mobile-tabs { display: flex; }
      .rm-content { padding-bottom: calc(var(--rm-space-md) + 60px); }
      .rm-timeline { padding-left: 0; }
      .rm-timeline::before { display: none; }
      .rm-timeline__date { margin-left: 0; }
      .rm-timeline__item::before { display: none; }
      .rm-timeline__dot { position: static; margin-bottom: var(--rm-space-xs); }
      .rm-trend-grid { grid-template-columns: 1fr; }
      .rm-cv-grid { grid-template-columns: 1fr; }
      .rm-drawer { width: 100%; }
      .rm-drawer-body { padding: 20px 20px 28px; }
      .rm-drawer-header { padding-inline: 20px; }
      .rm-drawer-footer { padding-inline: 20px; }
      .rm-batch-bar {
        left: var(--rm-space-sm); right: var(--rm-space-sm); bottom: 72px;
        transform: translateY(calc(100% + 80px)); width: auto; max-width: none;
      }
      .rm-batch-bar--visible { transform: translateY(0); }
      .rm-batch-bar__left, .rm-batch-bar__right { width: 100%; }
      .rm-batch-bar__right .rm-btn { flex: 1; }
      .rm-panel-toolbar { flex-direction: column; align-items: flex-start; }
      .rm-panel-toolbar__right { flex-wrap: wrap; }
      .rm-filter-group__options--inline { justify-content: flex-start; }
    }

    /* 1023px 以下趋势卡片单列 */
    @media (max-width: 1023px) {
      .rm-trend-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 479px) {
      .rm-drawer-body { padding: 18px 16px 24px; }
      .rm-drawer-kv { grid-template-columns: 1fr; padding: 16px; }
      .rm-drawer-kv__item--wide { grid-column: auto; }
      .rm-drawer-media__link,
      .rm-drawer-media__empty { min-height: 180px; }
      .rm-drawer-footer { padding-inline: 16px; }
    }

/* ===== 冲突修复：历史报表页面隐藏多余的 ::before 时间轴圆点 ===== */
.page-history .rm-timeline__item::before { display: none !important; }

@media (max-width: 767px) {
  .page-history .rm-drawer .rm-timeline--compact,
  .page-history .rm-drawer .rm-timeline--compact .rm-timeline__item {
    padding-left: 0;
  }

  .page-history .rm-drawer .rm-timeline--compact .rm-timeline__dot {
    display: none;
  }
}

/* 浏览器缩小会扩大 CSS 视口；门店实况不可继承全局 1920px 内容上限，
   否则双栏会居中收窄并在两侧留下大面积空白。 */
.page-store-live .rm-content__inner {
  max-width: none;
}

/* 详情的设备清单与事件时间轴使用窄标题列；标题可换行，列表始终保留可伸缩内容列。 */
.page-store-live .rm-report-section--side-title {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr);
  align-items: start;
  gap: var(--rm-space-md);
}

.page-store-live .rm-report-section--side-title .rm-report-section__title {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-store-live .rm-report-section--side-title .rm-device-detail-list,
.page-store-live .rm-report-section--side-title .rm-event-timeline {
  min-width: 0;
}

/* ===== 门店实况 H5 布局 =====
   手机、触控平板和折叠屏使用单视图底部导航；桌面端保留可拖拽双栏与侧边入口。 */
.rm-mobile-store-tabs {
  display: none;
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  html,
  body,
  #root {
    min-width: 0;
    max-width: 100%;
    overflow-x: hidden;
  }

  .page-store-live .rm-app {
    min-height: 100dvh;
    height: auto;
    overflow: visible;
  }

  .page-store-live .rm-body,
  .page-store-live .rm-content,
  .page-store-live .rm-content__inner {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .page-store-live .rm-content {
    padding: 12px 16px calc(84px + env(safe-area-inset-bottom));
  }

  .page-store-live .rm-header {
    height: 56px;
    padding-inline: 16px;
  }

  .page-store-live .rm-header__title {
    display: none;
  }

  .page-store-live .rm-header__status {
    display: none;
  }

  .page-store-live .rm-header__right {
    gap: 8px;
  }

  /* 手机端不提供历史页入口，避免顶栏与底部主视图重复抢占空间。 */
  .page-store-live .rm-header__btn[data-dom-id="btn-history"] {
    display: none;
  }

  .page-store-live .rm-home-layout {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    min-width: 0;
  }

  /* 手机优先展示完整门店实况，AI 运营改为下方连续卡片流。 */
  .page-store-live .rm-store-live,
  .page-store-live .rm-ai-report {
    width: 100% !important;
    min-width: 0;
    max-width: none;
    padding: 0;
    overflow: visible;
  }

  .page-store-live .rm-store-live {
    order: 1;
  }

  .page-store-live .rm-ai-report {
    order: 2;
  }

  .page-store-live .rm-divider,
  .page-store-live .rm-qa-trigger,
  .page-store-live .rm-device-fab,
  .page-store-live .rm-lock-fab {
    display: none !important;
  }

  .page-store-live .rm-live-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }

  .page-store-live .rm-live-header__title {
    min-width: 0;
    font-size: 18px;
  }

  .page-store-live .rm-live-tabs {
    display: none;
  }

  .page-store-live .rm-live-tab {
    flex: 1;
    justify-content: center;
    min-width: 0;
    padding: 8px 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .page-store-live .rm-live-panel {
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  .page-store-live .rm-home-layout[data-video-mode] .rm-store-live,
  .page-store-live .rm-home-layout[data-video-mode] .rm-live-panel[data-panel="video"] {
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  .page-store-live .rm-home-layout[data-video-mode] .rm-video-grid-viewport {
    flex: none;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .page-store-live .rm-home-layout[data-video-mode] .rm-video-grid {
    position: relative;
    inset: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-rows: auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  .page-store-live .rm-home-layout[data-video-mode] .rm-video-grid--incoming {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
  }

  .page-store-live .rm-home-layout[data-video-mode] .rm-video-tile {
    min-height: 0;
    aspect-ratio: auto;
  }

  .page-store-live .rm-home-layout[data-video-mode] .rm-video-tile__stream {
    flex: none;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .page-store-live .rm-region-detail {
    flex: none;
    width: 100%;
    min-width: 0;
    overflow: visible;
  }

  .page-store-live .rm-card-trend,
  .page-store-live .rm-card-trend .rm-report-section {
    min-width: 0;
  }

  .page-store-live .rm-trend-header {
    align-items: flex-start;
  }

  .page-store-live .rm-trend-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .page-store-live .rm-trend-tab {
    min-width: 0;
    padding-inline: 8px;
  }

  .page-store-live .rm-trend-chart {
    height: clamp(240px, 45vw, 320px);
    min-height: 240px;
  }

  .page-store-live .rm-trend-legend {
    gap: 8px 16px;
  }

  .page-store-live .rm-live-alert {
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }

  .page-store-live .rm-live-alert__content {
    overflow-wrap: anywhere;
  }

  .page-store-live .rm-live-alert__time {
    flex-shrink: 1;
    min-width: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .page-store-live .rm-region-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    flex: none;
    min-height: 0;
    margin: 0;
    padding: 2px;
    overflow: visible;
    scrollbar-gutter: auto;
  }

  .page-store-live .rm-region-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    overflow: hidden;
  }


  .page-store-live .rm-region-card__header,
  .page-store-live .rm-region-card__header-right,
  .page-store-live .rm-region-card__flow,
  .page-store-live .rm-region-card__flow-main,
  .page-store-live .rm-region-card__metrics,
  .page-store-live .rm-region-card__metric,
  .page-store-live .rm-region-card__devices-data,
  .page-store-live .rm-device-chip {
    min-width: 0;
  }

  .page-store-live .rm-region-card__name,
  .page-store-live .rm-region-card__flow-label,
  .page-store-live .rm-region-card__metric-label,
  .page-store-live .rm-device-chip {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .page-store-live .rm-region-card__flow {
    min-width: 0;
  }

  .page-store-live .rm-region-card__metrics--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-store-live .rm-region-card__metrics--2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-store-live .rm-ai-report-card {
    flex: none;
    min-height: 0;
    overflow: visible;
  }

  .page-store-live .rm-feed {
    flex: none;
    min-height: 0;
    overflow: visible;
    padding: 14px 0 0;
  }

  .page-store-live .rm-feed-item,
  .page-store-live .rm-feed-item__body,
  .page-store-live .rm-feed-item__head,
  .page-store-live .rm-advice-insight__body,
  .page-store-live .rm-advice-meta,
  .page-store-live .rm-advice-meta__left,
  .page-store-live .rm-advice-meta__tags {
    min-width: 0;
  }

  .page-store-live .rm-feed-item__title,
  .page-store-live .rm-feed-item__summary,
  .page-store-live .rm-advice-insight__text,
  .page-store-live .rm-advice-card__id,
  .page-store-live .rm-channel-tag,
  .page-store-live .rm-advice-meta__stat,
  .page-store-live .rm-advice-meta__time {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  .page-store-live .rm-advice-meta {
    align-items: flex-start;
  }

  .page-store-live .rm-advice-actions {
    flex: 1 1 100%;
  }

  .page-store-live .rm-advice-actions .rm-btn {
    flex: 1;
    min-width: 0;
    padding-inline: 12px;
    white-space: normal;
  }

  .page-store-live .rm-app[data-mobile-view="ai"] .rm-store-live,
  .page-store-live .rm-app[data-mobile-view="data"] .rm-ai-report,
  .page-store-live .rm-app[data-mobile-view="video"] .rm-ai-report {
    display: none;
  }

  /* 默认视频态会保留在内部直播 Tab；切到 AI 时必须由底部视图状态重新显示 AI 区域。 */
  .page-store-live .rm-app[data-mobile-view="ai"] .rm-home-layout[data-video-mode] .rm-ai-report {
    display: flex;
  }

  /* 手机端 AI 运营固定外层，只有时间流在标题和底部导航之间滚动。 */
  .page-store-live .rm-app[data-mobile-view="ai"] {
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }

  .page-store-live .rm-app[data-mobile-view="ai"] :is(
    .rm-body,
    .rm-content,
    .rm-content__inner,
    .rm-home-layout,
    .rm-ai-report
  ) {
    min-height: 0;
    overflow: hidden;
  }

  .page-store-live .rm-app[data-mobile-view="ai"] :is(
    .rm-content,
    .rm-content__inner,
    .rm-home-layout,
    .rm-ai-report
  ) {
    height: 100%;
  }

  .page-store-live .rm-app[data-mobile-view="ai"] .rm-home-layout {
    gap: 0;
  }

  .page-store-live .rm-app[data-mobile-view="ai"] .rm-ai-report-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .page-store-live .rm-app[data-mobile-view="ai"] .rm-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .page-store-live .rm-mobile-store-tabs {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 130;
    display: flex;
    min-height: 64px;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--rm-line);
    background-color: var(--rm-surface);
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.18);
  }

  .page-store-live .rm-mobile-store-tab {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--rm-ink-3);
    font-family: var(--rm-font-sans);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
  }

  .page-store-live .rm-mobile-store-tab svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  .page-store-live .rm-mobile-store-tab[data-active="true"] {
    color: var(--rm-brand);
    font-weight: 700;
  }
}

/* ===== 历史数据 H5 布局 =====
   历史页沿用原查询、导出和分页逻辑；仅在手机端收紧筛选，并将结果表转为可读的记录卡。 */
@media (max-width: 767px) {
  .page-history .rm-header {
    min-height: 56px;
    padding: 0 16px;
  }

  .page-history .rm-header__status {
    display: none;
  }

  .page-history .rm-header__title {
    display: none;
  }

  .page-history .rm-body,
  .page-history .rm-content {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .page-history .rm-content {
    padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
  }

  .page-history .rm-page-title {
    margin-bottom: 18px;
  }

  .page-history .rm-page-title__left {
    align-items: flex-start;
    gap: 12px;
  }

  .page-history .rm-back-btn {
    height: 32px;
    padding: 0 10px;
    font-size: 12px;
  }

  .page-history .rm-page-title__h1 {
    font-size: 20px;
  }

  .page-history .rm-page-title__sub {
    font-size: 12px;
    line-height: 1.45;
  }

  .page-history .rm-query-bar {
    margin-bottom: 14px;
    padding: 16px;
  }

  .page-history .rm-query-row--primary {
    gap: 14px;
  }

  .page-history .rm-source-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .page-history .rm-source-chip {
    width: 100%;
    min-width: 0;
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  .page-history .rm-source-chip:last-child {
    grid-column: 1 / -1;
  }

  .page-history .rm-query-field--time {
    overflow: visible;
  }

  .page-history .rm-date-range {
    display: flex;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page-history .rm-date-range::-webkit-scrollbar {
    display: none;
  }

  .page-history .rm-date-range__btn {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 0 10px;
  }

  .page-history .rm-search-box {
    min-width: 0;
  }

  .page-history .rm-search-history {
    z-index: 110;
  }

  .page-history .rm-advanced-panel__grid {
    grid-template-columns: 1fr;
  }

  .page-history .rm-summary-cards {
    margin-bottom: 18px;
  }

  .page-history .rm-summary-card {
    min-width: 0;
    padding: 14px;
  }

  .page-history .rm-summary-card__label,
  .page-history .rm-summary-card__change {
    line-height: 1.35;
  }

  .page-history .rm-summary-card__value {
    margin-bottom: 0;
  }

  .page-history .rm-mobile-tabs {
    display: none;
  }

  .page-history .rm-table-wrap {
    overflow: visible;
  }

  .page-history .rm-table--list {
    display: block;
    min-width: 0;
    width: 100%;
  }

  .page-history .rm-table--list thead {
    display: none;
  }

  .page-history .rm-table--list tbody {
    display: grid;
    gap: 12px;
  }

  .page-history .rm-table--list tr {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "source time"
      "type type"
      "title title"
      "location device"
      "severity status"
      "action action";
    gap: 8px 12px;
    padding: 14px;
    border: 1px solid var(--rm-line);
    border-radius: var(--rm-radius-md);
    background-color: var(--rm-surface);
  }

  .page-history .rm-table--list td {
    display: none;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--rm-ink-2);
    font-size: 12px;
    line-height: 1.45;
  }

  .page-history .rm-table--list tr:hover td {
    background: transparent;
  }

  .page-history .rm-table--list tr.rm-table__empty-row {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .page-history .rm-table--list tr.rm-table__empty-row td {
    display: block;
    min-height: 160px;
    padding: 0;
    border: 0;
    text-align: center;
  }

  .page-history .rm-table--list tr.rm-table__empty-row .rm-state {
    min-height: 160px;
    margin: 0;
  }

  .page-history .rm-table--list td:nth-child(1) {
    display: block;
    position: absolute;
    top: 15px;
    left: 14px;
    width: auto;
  }

  .page-history .rm-table--list td:nth-child(2) {
    display: block;
    grid-area: source;
    padding-left: 26px;
  }

  .page-history .rm-table--list td:nth-child(3) {
    display: block;
    grid-area: time;
    color: var(--rm-ink-3);
    text-align: right;
    white-space: nowrap;
  }

  .page-history .rm-table--list td:nth-child(4) {
    display: block;
    grid-area: type;
  }

  .page-history .rm-table--list td:nth-child(5) {
    display: block;
    grid-area: title;
    max-width: none;
    overflow: visible;
    color: var(--rm-ink);
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
  }

  .page-history .rm-table--list td:nth-child(6) {
    display: block;
    grid-area: location;
  }

  .page-history .rm-table--list td:nth-child(7) {
    display: block;
    grid-area: device;
    text-align: right;
  }

  .page-history .rm-table--list td:nth-child(8) {
    display: block;
    grid-area: severity;
  }

  .page-history .rm-table--list td:nth-child(9) {
    display: block;
    grid-area: status;
    text-align: right;
  }

  .page-history .rm-table--list td:nth-child(11) {
    display: block;
    grid-area: action;
  }

  .page-history .rm-table--list td:nth-child(11) .rm-btn {
    width: 100%;
    min-height: 34px;
  }

  .page-history .rm-mobile-record__label {
    display: block;
    margin-bottom: 2px;
    color: var(--rm-ink-3);
    font-size: 11px;
    font-weight: 500;
  }

  .page-history .rm-pagination {
    align-items: stretch;
    gap: 10px;
  }

  .page-history .rm-pagination__info {
    width: 100%;
  }

  .page-history .rm-pagination__size,
  .page-history .rm-pagination__pages {
    justify-content: space-between;
  }

  .page-history .rm-pagination__pages {
    flex: 1;
  }

  .page-history .rm-batch-bar {
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .page-history .rm-drawer-footer {
    padding-bottom: calc(var(--rm-space-md) + env(safe-area-inset-bottom));
  }
}

@media (min-width: 768px) {
  .rm-mobile-record__label {
    display: none;
  }
}

@media (max-width: 479px) {
  .page-store-live .rm-header__btn,
  .page-history .rm-header__btn,
  .page-settings .rm-header__btn {
    width: 36px;
    padding: 0;
    gap: 0;
  }

  .page-store-live .rm-header__btn-label,
  .page-history .rm-header__btn-label,
  .page-settings .rm-header__btn-label {
    display: none;
  }
}

/* 工程模式使用浅色界面，选中文字保持黑色以确保可读性。 */
.rm-engineering-mode::selection,
.rm-engineering-mode *::selection {
  color: #000;
}

.rm-engineering-mode::-moz-selection,
.rm-engineering-mode *::-moz-selection {
  color: #000;
}

/* ===== 首页、历史数据与设置中心字号规范 =====
   仅作用于用户端页面；工程后台维持既有字号。 */
:is(.page-store-live, .page-history, .page-settings) {
  --rm-type-explain: 12px;
  --rm-type-body: 14px;
  --rm-type-title: 16px;
  --rm-type-emphasis: 20px;
  --rm-type-number: 24px;
  font-size: var(--rm-type-body);
}

:is(.page-store-live, .page-history, .page-settings) button,
:is(.page-store-live, .page-history, .page-settings) input,
:is(.page-store-live, .page-history, .page-settings) select,
:is(.page-store-live, .page-history, .page-settings) textarea,
:is(.page-store-live, .page-history, .page-settings) table {
  font-size: var(--rm-type-body);
}

/* 说明、时间和状态标签。 */
:is(.page-store-live, .page-history, .page-settings) :is(
  .rm-header__status,
  .rm-feed-item__time,
  .rm-feed-item__meta,
  .rm-feed-item__urgency,
  .rm-feed-item__badge,
  .rm-feed-item__summary,
  .rm-feed-item__detail,
  .rm-feed-item__event-desc,
  .rm-feed-item__event-detail,
  .rm-feed-item__event-times,
  .rm-feed-item__event-times small,
  .rm-feed-item__event-action,
  .rm-advice-card__id,
  .rm-advice-insight__label,
  .rm-advice-insight__text,
  .rm-advice-meta,
  .rm-advice-meta__stat,
  .rm-advice-meta__time,
  .rm-channel-tag,
  .rm-advice-priority,
  .rm-detail-metric__label,
  .rm-detail-metric__environment-meta,
  .rm-detail-metric__tag,
  .rm-compare-card__label,
  .rm-compare-card__delta,
  .rm-ai-analysis__label,
  .rm-ai-analysis__section-label,
  .rm-event-timeline__time,
  .rm-event-timeline__impact,
  .rm-event-timeline__status,
  .rm-region-card__flow-label,
  .rm-region-card__compare-arrow,
  .rm-region-card__metric-label,
  .rm-region-card__metric-delta,
  .rm-region-card__metric-status,
  .rm-region-card__metric-time,
  .rm-mini-trend__legend-item,
  .rm-mini-trend__labels,
  .rm-mini-trend__legend,
  .rm-mini-trend__max,
  .rm-mini-trend__min,
  .rm-environment-alert-tag,
  .rm-device-chip__type,
  .rm-device-chip,
  .rm-status-dot,
  .rm-video-tile__status-label,
  .rm-video-tile__live,
  .rm-device-control__desc,
  .rm-device-control__status,
  .rm-device-group__count,
  .rm-device-slider__labels,
  .rm-device-slider__labels span,
  .rm-device-detail-item__sync,
  .rm-history-item__date,
  .rm-trend-legend,
  .rm-live-header__clock,
  .rm-qa-meta,
  .rm-qa-data-label,
  .rm-qa-suggested__title,
  #ai-thinking-text,
  .rm-mobile-store-tab,
  .rm-query-field__label,
  .rm-search-history__title,
  .rm-summary-card__label,
  .rm-summary-card__change,
  .rm-timeline__time,
  .rm-timeline__desc,
  .rm-drawer-kv__label,
  .rm-drawer-desc__label,
  .rm-drawer-desc__text,
  .rm-drawer-metric__label,
  .rm-drawer-media__action,
  .rm-drawer-media__empty,
  .rm-drawer-picture-viewer__error,
  .rm-mobile-record__label,
  .rm-badge,
  .rm-status-badge,
  .rm-config-footer__label,
  .rm-setting-card__desc,
  .rm-setting-card__lang,
  .rm-form-field__label,
  .rm-qr-placeholder__text,
  .rm-toast__text
) {
  font-size: var(--rm-type-explain);
}

@media (min-width: 1025px) {
  /* 区域详情自身滚动时，标题栏固定在门店实况标题下方。 */
  .page-store-live .rm-region-detail__header {
    position: sticky;
    top: 0;
    z-index: 8;
    padding: 4px 0 8px;
    background-color: var(--rm-bg);
  }
}

/* 时间轴的时间和状态标签采用同一行高，避免视觉基线错位。 */
.page-store-live .rm-feed-item__meta {
  min-height: 24px;
}

.page-store-live .rm-feed-item__meta :is(
  .rm-feed-item__time,
  .rm-feed-item__badge,
  .rm-advice-priority
) {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  line-height: 1;
}

/* 区域详情由外层卡片承载层级，内部清单不再重复描边。 */
.page-store-live .rm-region-detail .rm-report-section--side-title,
.page-store-live .rm-region-detail .rm-device-detail-item,
.page-store-live .rm-region-detail .rm-device-detail-item__type,
.page-store-live .rm-region-detail .rm-region-detail__empty,
.page-store-live .rm-region-detail .rm-event-timeline__picture,
.page-store-live .rm-region-detail .rm-detail-metric,
.page-store-live .rm-region-detail .rm-report-section,
.page-store-live .rm-region-detail .rm-trend-chart,
.page-store-live .rm-region-detail .rm-trend-chart__tooltip {
  border: 0;
}

/* 区域详情的标题与内容纵向排列，避免窄标题列压缩设备和事件正文。 */
.page-store-live .rm-region-detail .rm-report-section--side-title {
  display: flex;
  flex-direction: column;
  gap: var(--rm-space-md);
}

/* 详情趋势图采用单条平滑曲线和轻面积填充，保留读数悬浮交互。 */
.page-store-live .rm-region-detail .rm-trend-chart {
  background: linear-gradient(180deg, rgba(34, 211, 238, .05), transparent 68%);
}

/* AI 运营筛选区不再使用水平分隔线，由卡片留白区分层级。 */
.page-store-live .rm-ai-report-card__header,
.page-store-live .rm-ai-report-tabs {
  border-bottom: 0;
}

/* 用户页面白色系预览：通过 Token 覆盖实现，后续可集中调整色值，工程模式不受影响。 */
:is(.page-store-live, .page-history, .page-settings)[data-rm-theme="light"] {
  color-scheme: light;
  --rm-bg: #f0f1f5;
  --rm-surface: #ffffff;
  --rm-surface-2: #f5f7fc;
  --rm-line: #ebeef5;
  --rm-ink: #303133;
  --rm-ink-2: #606266;
  --rm-ink-3: #909399;
  --rm-brand: #3496d2;
  --rm-brand-hover: #2584bd;
  --rm-brand-active: #1d6d9e;
  --rm-brand-ink: #ffffff;
  --rm-state-success: #20bf6b;
  --rm-state-warning: #e6a23c;
  --rm-state-error: #f56c6c;
  --rm-state-info: #909399;
  --rm-severity-critical: #f56c6c;
  --rm-severity-high: #e6a23c;
  --rm-severity-medium: #e6a23c;
  --rm-severity-low: #409eff;
  --rm-chart-flow: #3496d2;
  --rm-chart-flow-2: #409eff;
  --rm-chart-temp: #e6a23c;
  --rm-chart-temp-2: #f56c6c;
  --rm-shadow-1: 0 1px 3px rgba(31, 35, 41, .05);
  --rm-shadow-2: 0 4px 12px rgba(31, 35, 41, .08);
  --rm-shadow-3: 0 8px 32px rgba(31, 35, 41, .12);
  --rm-shadow-alert: 0 0 16px rgba(245, 108, 108, .12);
  --rm-shadow-ai: 0 0 12px rgba(52, 150, 210, .1);
  --rm-background: var(--rm-bg);
  --rm-foreground: var(--rm-ink);
  --rm-card: var(--rm-surface);
  --rm-card-foreground: var(--rm-ink);
  --rm-popover: var(--rm-surface);
  --rm-popover-foreground: var(--rm-ink);
  --rm-primary: var(--rm-brand);
  --rm-primary-foreground: var(--rm-brand-ink);
  --rm-muted: var(--rm-surface-2);
  --rm-muted-foreground: var(--rm-ink-2);
  --rm-border: var(--rm-line);
  --rm-input: var(--rm-line);
  --rm-ring: var(--rm-brand);
  --rm-ai-input-bg: #f5f7fc;
  --rm-ai-input-focus-bg: #ffffff;
  --rm-ai-input-border: #dfe5ee;
  --rm-ai-input-placeholder: #8a94a3;
  --rm-ai-input-shadow: inset 0 1px 2px rgba(31, 35, 41, .03);
  --rm-ai-input-focus-ring: rgba(52, 150, 210, .14);
  --rm-ai-send-shadow: rgba(52, 150, 210, .22);
  --rm-ai-send-shadow-hover: rgba(52, 150, 210, .32);
}

/* 暗色主题采用中性黑灰层级，保留既有主色与所有状态色。 */
:is(.page-store-live, .page-history, .page-settings)[data-rm-theme="dark"] {
  color-scheme: dark;
  --rm-bg: #0a0a0a;
  --rm-surface: #1d1d1d;
  --rm-surface-2: #252525;
  --rm-line: #333333;
  --rm-ink: #e5eaf3;
  --rm-ink-2: #cfd3dc;
  --rm-ink-3: #a3a6ad;
  --rm-ai-input-bg: #252525;
  --rm-ai-input-focus-bg: #2b2b2b;
  --rm-ai-input-border: #414141;
  --rm-ai-input-placeholder: #8f949d;
  --rm-ai-input-shadow: inset 0 1px 2px rgba(0, 0, 0, .28);
  --rm-ai-input-focus-ring: rgba(0, 212, 255, .16);
  --rm-ai-send-shadow: rgba(0, 212, 255, .18);
  --rm-ai-send-shadow-hover: rgba(0, 212, 255, .28);
}

/* 白色主题门店实况沿用统一页面浅灰底，卡片仍以白色承载内容。 */
.page-store-live[data-rm-theme="light"] {
  --rm-bg: #f0f1f5;
}

:is(.page-store-live, .page-history, .page-settings)[data-rm-theme="light"] :is(
  .rm-feed-item__body,
  .rm-ai-analysis,
  .rm-ai-analysis__section,
  .rm-region-card__metrics,
  .rm-device-chip,
  .rm-device-control,
  .rm-history-empty,
  .rm-an-source-item,
  .rm-an-metric-item
) {
  background-color: var(--rm-surface-2);
}

/* 历史页查询栏原先使用独立深色背景，白色预览中统一为卡片与浅灰输入底色。 */
.page-history[data-rm-theme="light"] .rm-query-bar {
  border-color: var(--rm-line);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-2);
}

.page-history[data-rm-theme="light"] .rm-date-range-input,
.page-history[data-rm-theme="light"] .rm-multi-select > summary {
  border-color: var(--rm-line);
  background: var(--rm-surface-2);
  color: var(--rm-ink-2);
}

.page-history[data-rm-theme="light"] .rm-query-row--filters {
  border-top-color: var(--rm-line);
}

/* AI 分析与建议卡只保留外层状态条，内部分析容器不再重复描边。 */
.page-store-live .rm-ai-analysis,
.page-store-live .rm-ai-analysis__section {
  border: 0;
}

/* 早中晚报由外层时间线卡片承载边界，报告分段不再重复描边。 */
.page-store-live .rm-feed-item--report .rm-report-section {
  border: 0;
}

/* 白色主题由外层时间线卡片承载层级，报告内部不再叠加浅灰信息底。 */
.page-store-live[data-rm-theme="light"] :is(
  .rm-feed-item--insight .rm-feed-item__body,
  .rm-feed-item--advice .rm-feed-item__body,
  .rm-feed-item--report .rm-feed-item__body,
  .rm-feed-item--insight .rm-ai-analysis,
  .rm-feed-item--advice .rm-ai-analysis,
  .rm-feed-item--insight .rm-ai-analysis__section,
  .rm-feed-item--advice .rm-ai-analysis__section,
  .rm-feed-item--report .rm-report-section,
  .rm-feed-item--report .rm-feed-item__summary
) {
  background: transparent;
}

.page-store-live[data-rm-theme="light"] .rm-feed-item--report .rm-report-section__index {
  color: #3496d2;
  background: rgba(52, 150, 210, .1);
}

/* 桌面端区域卡片增加内容留白，避免趋势、指标和设备列表过于紧凑。 */
@media (min-width: 1025px) {
  .page-store-live .rm-region-card {
    gap: 12px;
    padding: 20px;
  }

  .page-store-live .rm-region-card__metrics--2col,
  .page-store-live .rm-region-card__metrics--3col {
    padding: 12px;
  }

  .page-store-live .rm-region-card__devices-data {
    gap: 6px;
    padding-block: 8px;
  }
}

/* 2560×1440 等高分辨率桌面：用户端整体放大，仍保持完整单屏布局。 */
@media (min-width: 2200px) and (min-height: 1200px) {
  :is(.page-store-live, .page-history, .page-settings) .rm-app {
    width: 83.333333vw;
    height: 83.333333vh;
    zoom: 1.2;
  }
}

/* 正文、表单和详情字段。 */
:is(.page-store-live, .page-history, .page-settings) :is(
  .rm-text-llm,
  .rm-feed-item__event-copy,
  .rm-feed-item__event-metric span,
  .rm-feed-item__event-source span,
  .rm-feed-item__event-source,
  .rm-feed-item__event-metric,
  .rm-advice-meta__stat-value,
  .rm-detail-metric__environment-alerts,
  .rm-device-chip__name,
  .rm-device-control__name,
  .rm-device-control__text,
  .rm-device-detail-item__name,
  .rm-device-detail-item__data,
  .rm-history-item__title,
  .rm-qa-conversation,
  .rm-qa-msg--user,
  .rm-qa-ai-bubble,
  .rm-qa-table,
  .rm-qa-action-link,
  .rm-query-field,
  .rm-source-chip,
  .rm-date-range-input,
  .rm-date-range__btn,
  .rm-search-box__input,
  .rm-search-history__item,
  .rm-select,
  .rm-table,
  .rm-pagination,
  .rm-localized-date-picker,
  .rm-drawer-kv__value,
  .rm-config-footer__value,
  .rm-language-option,
  .rm-form-field__input
) {
  font-size: var(--rm-type-body);
}

/* 区块、卡片和详情标题。 */
:is(.page-store-live, .page-history, .page-settings) :is(
  .rm-header__title,
  .rm-live-header__title,
  .rm-ai-report-card__title,
  .rm-report-section__title,
  .rm-feed-section__title,
  .rm-feed-item__title,
  .rm-region-detail__title,
  .rm-device-drawer__title,
  .rm-ai-drawer__title,
  .rm-device-group__title,
  .rm-panel-toolbar__title,
  .rm-state__title,
  .rm-timeline__title,
  .rm-drawer-header__title,
  .rm-drawer-section__title,
  .rm-setting-card__title,
  .rm-modal__title
) {
  font-size: var(--rm-type-title);
}

/* 页面标题和关键指标只保留 18–24px 的强调层级。 */
:is(.page-store-live, .page-history, .page-settings) :is(
  .rm-page-title__h1,
  .rm-region-detail__status,
  .rm-qa-data-value,
  .rm-detail-metric__value,
  .rm-compare-card__value,
  .rm-compare-card__number,
  .rm-region-card__flow-value,
  .rm-drawer-metric__value
) {
  font-size: var(--rm-type-emphasis);
}

:is(.page-store-live, .page-history, .page-settings) :is(
  .rm-text-display,
  .rm-text-data-lg,
  .rm-text-data-md,
  .rm-summary-card__value,
  .rm-trend-card__value
) {
  font-size: var(--rm-type-number);
}

/* 设置页主题切换：主题色由页面根节点变量接管，工程模式不受影响。 */
.rm-theme-picker {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  gap: 4px;
  margin-top: var(--rm-space-md);
  padding: 0;
  border-radius: var(--rm-radius-sm);
  background: transparent;
}

.rm-theme-picker__option {
  min-width: 68px;
  padding: 6px 10px;
  border: 0;
  border-radius: calc(var(--rm-radius-sm) - 2px);
  background: transparent;
  color: var(--rm-ink-2);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.rm-theme-picker__option.is-selected {
  background: var(--rm-surface);
  color: var(--rm-brand);
  box-shadow: var(--rm-shadow-1);
}

/* 浅色主题中，区域详情仅保留外层卡片，消除深色主题遗留的半透明灰底。 */
.page-store-live[data-rm-theme="light"] .rm-region-detail .rm-report-section,
.page-store-live[data-rm-theme="light"] .rm-region-detail .rm-card-trend .rm-report-section {
  background: transparent;
}

/* 深色区域详情沿用浅色主题的无外框分区，仅移除指定内容区的描边。 */
.page-store-live[data-rm-theme="dark"] .rm-region-detail :is(
  .rm-card-trend,
  #detail-insights-card,
  .rm-card-device-details
) {
  border: 0;
  box-shadow: none;
}

/* 白色背景下标题、时间与报告类型保持足够对比度。 */
.page-store-live[data-rm-theme="light"] :is(
  .rm-ai-report-card__title,
  .rm-ai-report-card__title .rm-text-card-title,
  .rm-feed-item__title,
  .rm-feed-item__time,
  .rm-feed-item__receipt
) {
  color: var(--rm-ink);
}

.page-store-live[data-rm-theme="light"] .rm-feed-item__time,
.page-store-live[data-rm-theme="light"] .rm-feed-item__receipt {
  color: var(--rm-ink-2);
}

/* 白色主题的两侧入口采用轻卡片，避免深色玻璃效果割裂页面。 */
.page-store-live[data-rm-theme="light"] :is(.rm-qa-trigger, .rm-device-fab) {
  background: var(--rm-surface);
  border-color: color-mix(in srgb, var(--rm-brand) 46%, var(--rm-line));
  box-shadow: 0 4px 14px rgba(31, 35, 41, .12);
}

.page-store-live[data-rm-theme="light"] .rm-qa-trigger:hover {
  background: #eef6fb;
  box-shadow: 4px 0 18px rgba(52, 150, 210, .2);
}

.page-store-live[data-rm-theme="light"] .rm-device-fab:hover {
  background: #eef6fb;
  box-shadow: -4px 0 18px rgba(52, 150, 210, .2);
}

/* 抽屉未打开时完整移出视口；否则其左侧阴影会残留在浅色页面右边。 */
.page-store-live[data-rm-theme="light"] .rm-device-drawer:not([data-active="true"]),
.page-history[data-rm-theme="light"] .rm-drawer:not(.rm-drawer--open) {
  box-shadow: none;
}

/* 区域卡片统一采用“标题—指标—趋势—设备”层级，两个主题共用同一结构。 */
.page-store-live .rm-region-card {
  grid-template-areas:
    "header"
    "metrics"
    "trend"
    "devices";
  grid-template-columns: minmax(0, 1fr);
}

.page-store-live .rm-region-card__flow {
  display: none;
}

.page-store-live .rm-region-card__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rm-space-md);
  padding: 0;
  background: transparent;
}

.page-store-live .rm-region-card__metrics--3col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.page-store-live[data-rm-theme="light"] .rm-region-card__metrics {
  background: transparent;
}

.page-store-live .rm-region-card__metrics .rm-region-card__metric {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  border: 0;
}

.rm-region-card__metric--flow {
  display: none;
}

.page-store-live .rm-region-card__metric--flow {
  display: flex;
}

.rm-region-card__metric-value-row {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.page-store-live .rm-region-card__metric--environment .rm-region-card__metric-value-row {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  color: var(--rm-ink);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-type-emphasis);
  font-weight: 700;
  line-height: 1.2;
}

.page-store-live .rm-region-card__metric--environment .rm-environment-alert-tag {
  padding: 1px 5px;
  font-size: 9px;
}

/* 两个主题的区域卡片核心数值均与首项实时客流保持同一字号。 */
.page-store-live .rm-region-card__metrics :is(
  .rm-region-card__flow-value,
  .rm-region-card__metric-value
) {
  font-size: var(--rm-type-emphasis);
  line-height: 1.2;
}

/* 实时客流的环比与其他指标一致，统一在数值下方展示。 */
.rm-region-card__metric--flow .rm-region-card__metric-value-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.page-store-live .rm-region-card__compare {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--rm-ink-2);
}

.page-store-live .rm-region-card__compare:hover {
  background: transparent;
  color: var(--rm-brand-active);
}

.page-store-live .rm-region-card__compare-value {
  color: inherit;
}

.page-store-live .rm-mini-trend {
  min-height: 60px;
  padding-top: 4px;
}

.page-store-live .rm-mini-trend__svg {
  height: 60px;
}

.page-store-live[data-rm-theme="light"] .rm-mini-trend__labels {
  display: none;
}

/* 告警指标在浅色模式中保持中性信息底色；告警来源去框后不再保留右侧无效内边距。 */
.page-store-live[data-rm-theme="light"] .rm-feed-item__event-metric {
  background: #f5f7fc;
}

.page-store-live .rm-feed-item__event-source {
  padding-right: 0;
}

/* 浅色顶栏只用文字色表达当前页；数据/视频切换使用白色承载底。 */
:is(.page-store-live, .page-history, .page-settings)[data-rm-theme="light"] .rm-header__btn.rm-header__btn--active,
:is(.page-store-live, .page-history, .page-settings)[data-rm-theme="light"] .rm-header__btn.rm-header__btn--active:hover {
  background: transparent;
  border-color: transparent;
}

.page-store-live[data-rm-theme="light"] .rm-live-tabs {
  background: var(--rm-surface);
}

/* 白色模式下的 AI 标题和事件时间线卡片使用纯白层与深色文字。 */
.page-store-live[data-rm-theme="light"] .rm-ai-report-card__title :is(h1, .rm-text-card-title) {
  color: #303133 !important;
}

.page-store-live[data-rm-theme="light"] .rm-feed-item--event .rm-feed-item__body {
  background: #ffffff;
}

/* 事件卡片只保留左侧严重程度色条；时间轴圆点与标签使用同一分级颜色。 */
.page-store-live .rm-feed-item--event .rm-feed-item__body {
  border: 0;
  border-left: 3px solid var(--rm-severity-low);
}

.page-store-live .rm-feed-item--event.rm-feed-item--severity-critical .rm-feed-item__body {
  border-left-color: var(--rm-severity-critical);
}

.page-store-live .rm-feed-item--event.rm-feed-item--severity-high .rm-feed-item__body {
  border-left-color: var(--rm-severity-high);
}

.page-store-live .rm-feed-item--event.rm-feed-item--severity-medium .rm-feed-item__body {
  border-left-color: var(--rm-severity-medium);
}

.page-store-live .rm-feed-item--event.rm-feed-item--severity-low .rm-feed-item__body {
  border-left-color: var(--rm-severity-low);
}

/* 深色主题的实时推送卡沿用区域卡的中性描边，并保留左侧严重度颜色。 */
.page-store-live[data-rm-theme="dark"] .rm-feed-item--event .rm-feed-item__body {
  border: 1px solid var(--rm-line);
  border-left: 3px solid var(--rm-severity-low);
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item--event.rm-feed-item--severity-critical .rm-feed-item__body {
  border-left-color: var(--rm-severity-critical);
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item--event.rm-feed-item--severity-high .rm-feed-item__body {
  border-left-color: var(--rm-severity-high);
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item--event.rm-feed-item--severity-medium .rm-feed-item__body {
  border-left-color: var(--rm-severity-medium);
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item--event.rm-feed-item--severity-low .rm-feed-item__body {
  border-left-color: var(--rm-severity-low);
}

/* 设备异常属于硬件状态通知，使用独立图标标题区和灰蓝承载层与普通摄像头事件区分。 */
.page-store-live .rm-feed-item__topology-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border: 1px solid #a8b9c9;
  border-radius: 9px;
  background: #dce7f0;
  color: #4f708d;
}

.page-store-live .rm-feed-item__topology-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.page-store-live .rm-feed-item__topology-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.page-store-live .rm-feed-item__topology-kicker {
  display: block;
  margin-bottom: 3px;
  color: #587691;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.2;
}

.page-store-live[data-rm-theme="light"] .rm-feed-item--topology-anomaly .rm-feed-item__body {
  border: 1px solid #9db0c2;
  border-left: 4px solid #5f7f9b;
  background: linear-gradient(135deg, #e7eff6 0%, #f7fafc 76%);
  box-shadow: 0 7px 18px rgba(57, 72, 87, .12);
}

.page-store-live[data-rm-theme="light"] .rm-feed-item--topology-anomaly .rm-feed-item__event-overview {
  padding-top: 12px;
  border-top: 1px solid rgba(95, 127, 155, .24);
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item__topology-icon {
  border-color: rgba(148, 163, 184, .48);
  background: rgba(100, 116, 139, .34);
  color: #c7d8e7;
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item__topology-kicker {
  color: #a9bed0;
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item--topology-anomaly .rm-feed-item__body {
  border: 1px solid rgba(148, 163, 184, .52);
  border-left: 4px solid #7796b1;
  background: linear-gradient(135deg, #263746 0%, #1d2228 78%);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.page-store-live[data-rm-theme="dark"] .rm-feed-item--topology-anomaly .rm-feed-item__event-overview {
  padding-top: 12px;
  border-top: 1px solid rgba(169, 190, 208, .22);
}

/* 深色主题的 AI 推送内容取消内层信息底色，仍保留外层状态条和类型标签。 */
.page-store-live[data-rm-theme="dark"] :is(
  .rm-feed-item--insight .rm-feed-item__body,
  .rm-feed-item--advice .rm-feed-item__body,
  .rm-feed-item--report .rm-feed-item__body,
  .rm-feed-item--insight .rm-ai-analysis,
  .rm-feed-item--advice .rm-ai-analysis,
  .rm-feed-item--insight .rm-ai-analysis__section,
  .rm-feed-item--advice .rm-ai-analysis__section,
  .rm-feed-item--advice .rm-advice-insight,
  .rm-feed-item--report .rm-report-section,
  .rm-feed-item--report .rm-feed-item__summary
) {
  background: transparent;
}

.page-store-live #video-pagination :is(#video-page-prev, #video-page-next) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.page-store-live #video-pagination :is(#video-page-prev, #video-page-next) svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.page-store-live #video-page-mobile-summary {
  display: none;
}

@media (max-width: 767px) {
  .page-store-live #video-pagination {
    width: 100%;
    gap: 14px !important;
    margin-top: 12px !important;
  }

  .page-store-live #video-pagination :is(
    #video-page-numbers,
    label,
    #video-page-jump,
    #video-page-summary
  ) {
    display: none !important;
  }

  .page-store-live #video-pagination :is(#video-page-prev, #video-page-next) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px !important;
    height: 42px;
    padding: 0 !important;
    border-color: var(--rm-line) !important;
    border-radius: 50%;
    background: var(--rm-surface) !important;
    color: var(--rm-ink-2) !important;
  }

  .page-store-live #video-pagination :is(#video-page-prev, #video-page-next) svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .page-store-live .rm-video-pagination__label {
    display: none;
  }

  .page-store-live #video-page-mobile-summary {
    display: inline-flex;
    min-width: 48px;
    justify-content: center;
    color: var(--rm-ink-2);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  .page-store-live #video-pagination :is(#video-page-prev, #video-page-next):disabled {
    border-color: var(--rm-line) !important;
    background: var(--rm-surface-2) !important;
    color: var(--rm-ink-3) !important;
    opacity: .42 !important;
  }
}

/* 当前告警值与同组阈值同属强调数据，比较值仍使用说明字号。 */
.page-store-live .rm-feed-item__event-metric .rm-alarm-current-value {
  font-size: inherit;
  font-weight: inherit;
}

/* 浅色主题中，严重程度标签与实时推送卡同用实底白字，便于快速识别。 */
.page-store-live[data-rm-theme="light"] :is(
  .rm-feed-item--severity-critical .rm-feed-item__badge,
  .rm-feed-item__badge--severity-critical
) {
  color: #ffffff;
  background: var(--rm-severity-critical);
}

.page-store-live[data-rm-theme="light"] :is(
  .rm-feed-item--severity-high .rm-feed-item__badge,
  .rm-feed-item__badge--severity-high
) {
  color: #ffffff;
  background: var(--rm-severity-high);
}

.page-store-live[data-rm-theme="light"] :is(
  .rm-feed-item--severity-medium .rm-feed-item__badge,
  .rm-feed-item__badge--severity-medium
) {
  color: #ffffff;
  background: var(--rm-severity-medium);
}

.page-store-live[data-rm-theme="light"] :is(
  .rm-feed-item--severity-low .rm-feed-item__badge,
  .rm-feed-item__badge--severity-low
) {
  color: #ffffff;
  background: var(--rm-severity-low);
}

/* 事件严重等级统一贴齐标题区最右侧；名称变长时只让名称换行，等级仍在标题区居中。 */
.page-store-live .rm-feed-item--event .rm-feed-item__head,
.page-store-live .rm-feed-item--event .rm-feed-item__head--topology-anomaly {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.page-store-live .rm-feed-item--event .rm-feed-item__head .rm-feed-item__title {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.page-store-live .rm-feed-item--event .rm-feed-item__head .rm-feed-item__head-actions {
  align-self: center;
  margin-left: auto;
}

/* AI 运营筛选使用文字加下划线，和设置页配置 Tab 保持同一层级表达。 */
.page-store-live .rm-ai-report-tabs {
  gap: 0;
  padding: 0 var(--rm-space-lg);
  border-bottom: 1px solid var(--rm-line);
  background: var(--rm-surface);
}

.page-store-live .rm-ai-report-tab {
  position: relative;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.page-store-live .rm-ai-report-tab:hover {
  background: transparent;
}

.page-store-live .rm-ai-report-tab--active {
  background: transparent;
  border-color: transparent;
  font-weight: 600;
}

.page-store-live .rm-ai-report-tab--active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: min(96px, 72%);
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--rm-brand);
  transform: translateX(-50%);
}

/* 时间线元信息的文字和紧急程度标签保持同一视觉基线。 */
.page-store-live .rm-feed-item__meta {
  align-items: center;
  min-height: 24px;
}

.page-store-live .rm-feed-item__meta .rm-advice-priority {
  box-sizing: border-box;
  align-self: center;
  min-height: 24px;
  padding-block: 0;
  line-height: 1;
}

/* 运营时间线只保留类型标签；时间、标签与卡片之间留出稳定间距。 */
.page-store-live .rm-feed-item__meta {
  gap: 12px;
  margin-bottom: 10px;
}

/* 区域卡片统一使用三列指标布局，设备列表仅保留文字信息。 */
@media (min-width: 768px) {
  .page-store-live .rm-region-card__metrics--2col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-store-live .rm-region-card__metrics--3col,
  .page-store-live[data-rm-theme="light"] .rm-region-card__metrics--3col {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 14px;
  }
}

/* 区域卡片不以悬停状态改变边框，首卡与其他卡片保持同一视觉层级。 */
.page-store-live .rm-region-card:hover {
  transform: none;
  border-color: var(--rm-line);
  box-shadow: none;
}

.page-store-live .rm-device-chip {
  padding-inline: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  background-color: transparent !important;
}

/* 设备行保持无底色，类型保留为独立标签，便于快速识别来源。 */
.page-store-live .rm-device-chip__type {
  padding: 1px 6px;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-full);
  background: var(--rm-surface-2) !important;
  background-color: var(--rm-surface-2) !important;
}

/* 区域详情沿用首页设备类型标签，设备行本身仍保持无底色。 */
.page-store-live .rm-region-detail .rm-device-detail-item__type {
  padding: 1px 6px;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-full);
  background: var(--rm-surface-2);
}

/* 浅色控制抽屉不为主电源或设备行叠加信息底色，仅保留必要的状态边界。 */
.page-store-live[data-rm-theme="light"] .rm-device-drawer :is(
  .rm-device-group--master,
  .rm-device-control
) {
  background: transparent;
  background-color: transparent;
}

/* 旧设计片段重复声明 Token；最终字体变量必须指向随前端发布的字库。 */
:root {
  --rm-font-sans: "MartFlow UI", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --rm-font-mono: "MartFlow Numbers", "Montserrat", "DIN Alternate", "Roboto Mono", "JetBrains Mono", monospace;
}

/* 中文门店实况的时间、温湿度和指标值直接使用 OPPO Sans，不保留外文字体的等宽数字特性。 */
html[lang^="zh"] .page-store-live :is(
  .rm-region-card__flow-value,
  .rm-region-card__metric-value,
  .rm-region-card__metric-value-row,
  .rm-feed-item__event-times strong,
  .rm-feed-item__receipt,
  .rm-timeline__time,
  .rm-event-timeline__time
) {
  font-family: "MartFlow Chinese UI", "OPPO Sans", "HarmonyOS Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

/* 区域详情趋势图与卡片小图共用同一套悬浮读数。 */
.page-store-live .rm-trend-chart__tooltip {
  display: none;
  align-items: center;
  gap: 5px;
  min-width: 48px;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: var(--rm-surface);
  box-shadow: 0 5px 14px rgba(31, 45, 61, .14);
}

.page-store-live .rm-trend-chart__tooltip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rm-brand);
}

.page-store-live .rm-trend-chart__tooltip strong {
  color: var(--rm-ink);
  font-family: var(--rm-font-mono);
  font-size: 12px;
}

.page-store-live .rm-trend-chart__hover-point {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rm-brand);
  box-shadow: 0 0 0 2px var(--rm-surface);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 80ms ease;
}

/* 外层卡片小趋势图同步提供定位线、圆点和读数浮层。 */
.page-store-live .rm-mini-trend {
  overflow: visible;
}

.page-store-live .rm-mini-trend__svg {
  height: 72px;
}

.page-store-live .rm-mini-trend {
  min-height: 72px;
}

.page-store-live .rm-mini-trend__tooltip {
  position: absolute;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 5px;
  min-width: 48px;
  padding: 5px 7px;
  border-radius: 6px;
  background: var(--rm-surface);
  box-shadow: 0 5px 14px rgba(31, 45, 61, .14);
  color: var(--rm-ink);
  font-family: var(--rm-font-mono);
  font-size: 12px;
  pointer-events: none;
}

.page-store-live .rm-mini-trend__tooltip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rm-brand);
}

/* 小趋势图的悬浮点使用 CSS 绘制，避免非等比 SVG 把圆点拉成椭圆。 */
.page-store-live .rm-mini-trend__point {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--rm-brand);
  box-shadow: 0 0 0 2px var(--rm-surface);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 80ms ease;
}

/* 浅色模式不得沿用深色模式的低对比标签色。 */
.page-store-live[data-rm-theme="light"] .rm-feed-item__meta {
  color: #606266;
}

.page-store-live[data-rm-theme="light"] .rm-feed-item__time {
  color: #606266;
}

.page-store-live[data-rm-theme="light"] .rm-feed-item__badge {
  background: #f5f7fc;
  color: #606266;
}

.page-store-live[data-rm-theme="light"] .rm-feed-item__badge--morning {
  background: #eaf4fb;
  color: var(--rm-brand-active);
}

.page-store-live[data-rm-theme="light"] .rm-feed-item__badge--noon {
  background: #fff5e6;
  color: #b86b00;
}

.page-store-live[data-rm-theme="light"] .rm-feed-item__badge--evening {
  background: #f3edff;
  color: #6d4ad6;
}

.page-store-live[data-rm-theme="light"] .rm-advice-priority--critical {
  background: #fff0f2;
  color: #d9365d;
}

.page-store-live[data-rm-theme="light"] .rm-advice-priority--high {
  background: #fff5e8;
  color: #b86b00;
}

/* 事件详情的字段统一从卡片内容起点对齐，AI 分析与建议也复用同一节奏。 */
.page-store-live .rm-feed-item--event .rm-feed-item__event-overview,
.page-store-live .rm-feed-item--insight .rm-ai-analysis,
.page-store-live .rm-feed-item--advice .rm-ai-analysis {
  margin-top: 12px;
}

.page-store-live .rm-feed-item--event .rm-feed-item__event-copy {
  gap: 12px;
}

.page-store-live .rm-feed-item--event .rm-feed-item__event-source {
  padding: 0;
}

.page-store-live .rm-feed-item--event .rm-feed-item__event-times {
  margin: 0;
}

/* 事件详情使用常规字重，避免与卡片标题和严重度层级竞争。 */
.page-store-live .rm-feed-item--event :is(
  .rm-feed-item__event-metric strong,
  .rm-feed-item__event-source strong,
  .rm-feed-item__event-times strong
) {
  font-weight: 400;
}

/* 真实事件标题高于详情字段一级，便于时间线快速扫描。 */
.page-store-live .rm-feed-item--event .rm-feed-item__title {
  font-size: 18px;
}

/* 异常事件字段标签与内容值保持清晰的两级字号。 */
.page-store-live .rm-feed-item--event .rm-feed-item__event-source > span {
  font-size: 12px;
}

.page-store-live .rm-feed-item--event .rm-feed-item__event-source > strong {
  font-size: 14px;
}

/* 详情状态是辅助信息，不继承全局重点指标字号。 */
.page-store-live .rm-region-detail__status {
  gap: 8px;
  min-height: 22px;
  padding: 2px 8px;
  font-size: var(--rm-type-explain);
  line-height: 1;
}

.page-store-live .rm-region-detail__status .rm-status-dot {
  width: 6px;
  height: 6px;
}

.page-store-live #detail-temp-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* 浅色视频瓦片选中态使用清晰的蓝色边框和名称，暗色主题保持现有表现。 */
.page-store-live[data-rm-theme="light"] .rm-video-tile:is(:hover, :focus-within, :active) {
  border-color: var(--rm-brand);
  box-shadow: 0 0 0 1px var(--rm-brand), var(--rm-shadow-2);
}

.page-store-live[data-rm-theme="light"] .rm-video-tile:is(:hover, :focus-within, :active) .rm-video-tile__name {
  color: var(--rm-brand);
}

/* 区域详情的空态文本与分区标题共用左侧对齐线。 */
.page-store-live .rm-region-detail .rm-device-detail-list {
  margin: 0;
  padding: 0;
}

.page-store-live .rm-region-detail .rm-event-timeline:has(.rm-region-detail__empty)::before {
  display: none;
}

.page-store-live .rm-region-detail :is(
  .rm-device-detail-list .rm-region-detail__empty,
  .rm-event-timeline .rm-region-detail__empty
) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 84px;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* 浅色模式不继承历史详情抽屉的深色半透明信息底。 */
.page-history[data-rm-theme="light"] :is(
  .rm-drawer-desc,
  .rm-drawer .rm-timeline--compact .rm-timeline__card
) {
  background: #f5f7fc;
  border-color: transparent;
  box-shadow: none;
}

.page-history[data-rm-theme="light"] .rm-drawer .rm-timeline--compact::before {
  background-color: #dfe6ee;
}

.page-history[data-rm-theme="light"] .rm-drawer .rm-timeline--compact .rm-timeline__dot {
  background-color: #ffffff;
  border-color: #b8d5e8;
}

/* 历史详情当前只有一条处理记录，仍保留时间轴圆点和竖线以明确处理过程。 */
.page-history .rm-drawer #drawerProcessSection {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.page-history .rm-drawer #drawerProcessSection .rm-timeline--compact {
  min-height: 104px;
  padding-left: 28px;
}

.page-history .rm-drawer #drawerProcessSection .rm-timeline__item {
  cursor: default;
}

.page-history .rm-drawer #drawerProcessSection .rm-timeline__card {
  min-height: 72px;
  padding: 14px 16px;
  border: 0;
  border-radius: 12px;
  background: var(--rm-surface-2);
  box-shadow: none;
}

.page-history .rm-drawer #drawerProcessSection .rm-timeline__header {
  min-height: 20px;
  margin-bottom: 6px;
  align-items: center;
}

.page-history .rm-drawer #drawerProcessSection .rm-timeline__item:hover .rm-timeline__card {
  border-color: transparent;
  box-shadow: none;
}

.page-store-live[data-rm-theme="light"] .rm-region-detail .rm-trend-chart {
  background: linear-gradient(180deg, rgba(52, 150, 210, .06), transparent 68%);
}

/* 浅色详情的返回按钮需要明确边界，不依赖几乎不可见的全局分隔线。 */
.page-store-live[data-rm-theme="light"] .rm-region-detail__back {
  border-color: #98a6b5;
  background-color: #ffffff;
  color: #51606f;
}

/* 详情页指标卡维持统一的 16px 空隙，不让区域详情的顶部信息被拉散。 */
.page-store-live[data-rm-theme="light"] .rm-region-detail .rm-detail-metrics {
  gap: 16px;
}

@media (max-width: 767px) {
  /* 长区域名在手机端不得挤压状态；返回、标题和状态按两行清晰排列。 */
  .page-store-live[data-rm-theme="light"] .rm-region-detail__header {
    display: grid;
    grid-template-areas:
      "back title"
      "back status";
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 4px 10px;
  }

  .page-store-live[data-rm-theme="light"] .rm-region-detail__back {
    grid-area: back;
  }

  .page-store-live[data-rm-theme="light"] .rm-region-detail__title {
    grid-area: title;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
  }

  .page-store-live[data-rm-theme="light"] .rm-region-detail__status {
    grid-area: status;
    justify-self: start;
    min-height: 24px;
    margin: 0;
    padding: 2px 8px;
    font-size: var(--rm-type-explain);
    line-height: 1;
    white-space: nowrap;
  }
}

/* 外层卡片和区域详情共用同一条客流曲线：单线、轻面积与末端读数。 */
.page-store-live .rm-mini-trend__svg,
.page-store-live .rm-trend-chart svg {
  display: block;
}

.page-store-live[data-rm-theme="light"] .rm-trend-chart {
  background: linear-gradient(180deg, rgba(52, 150, 210, .06), rgba(52, 150, 210, 0) 72%);
}

/* 卡片各行使用固定的内容节奏，带温湿度的区域不会把同排曲线向下挤。 */
@media (min-width: 768px) {
  .page-store-live .rm-region-grid {
    column-gap: 24px;
    row-gap: 16px;
  }

  .page-store-live .rm-region-card__header {
    align-self: start;
    height: 24px;
    min-height: 24px;
  }

  .page-store-live .rm-region-card {
    grid-template-rows: 24px 132px 76px minmax(0, 1fr);
  }

  .page-store-live .rm-region-card__metrics {
    height: 132px;
    min-height: 0;
    align-content: start;
  }

  .page-store-live .rm-mini-trend {
    box-sizing: border-box;
    height: 76px;
    min-height: 76px;
  }

  .page-store-live .rm-mini-trend__svg {
    height: 72px;
  }
}

/* 暗色历史筛选区不再沿用旧蓝灰渐变和纯黑输入底色。 */
.page-history[data-rm-theme="dark"] .rm-query-bar {
  border-color: var(--rm-line);
  background: var(--rm-surface);
  box-shadow: var(--rm-shadow-2);
}

.page-history[data-rm-theme="dark"] :is(
  .rm-date-range-input,
  .rm-multi-select > summary,
  .rm-search-box
) {
  border-color: var(--rm-line);
  background: var(--rm-surface-2);
  color: var(--rm-ink-2);
}

.page-history[data-rm-theme="dark"] .rm-query-row--filters {
  border-top-color: var(--rm-line);
}

@media (max-width: 767px),
       (min-width: 768px) and (max-width: 1366px) and (hover: none) and (pointer: coarse) {
  /* 设置页与首页一样不提供重复的历史入口。 */
  .page-settings .rm-header__btn[data-dom-id="btn-history"] {
    display: none;
  }

  /* 详情趋势图按实际画布尺寸绘制，避免窄屏把曲线纵向拉伸。 */
  .page-store-live .rm-trend-chart {
    height: clamp(184px, 52vw, 210px);
    min-height: 184px;
  }

  /* 详情状态保持紧凑，不让全局强调字号放大成独立标题。 */
  .page-store-live .rm-region-detail__status {
    min-height: 24px;
    padding: 2px 8px;
    font-size: var(--rm-type-explain);
    line-height: 1;
    white-space: nowrap;
  }

  /* 手机端 AI 运营移除时间线占位，释放卡片左侧空间。 */
  .page-store-live .rm-feed-item {
    padding-left: 0;
    border-left: 0;
  }

  .page-store-live .rm-feed-item::before {
    display: none;
  }
}

/* 区域内的真实 CV 指标 */
.page-store-live .rm-region-card--cv {
  grid-template-areas: "header header" "metrics metrics" "trend trend" "period period" "devices devices";
}
.page-store-live .rm-region-card--cv .rm-region-card__cv-status,
.page-store-live .rm-region-card--cv .rm-region-card__cv-period {
  font-size: 11px;
  color: #64748b;
}
.page-store-live .rm-region-card--cv .rm-region-card__cv-period { grid-area: period; }
.page-store-live .rm-region-card--cv .rm-region-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 12px;
}