/* ============================================================================
 * NUART 能耗平台 · 视觉设计语言 v2（design-system-v2）
 * ----------------------------------------------------------------------------
 * 全站唯一权威视觉层，构建时最后加载，覆盖旧补丁层（app/gemini/nuart-premium/
 * daisyui/ui-hardening/ui-overrides）对同名令牌与组件的冲突定义。
 *
 * 设计原则（与画布稿一致）：
 *   1. 单一强调色：靛蓝 #6366F1，其余一律中性灰阶
 *   2. 发丝线优先：卡片 = 白底 + 1px 描边 + 留白，不依赖重阴影
 *   3. 渐变仅一次：只出现在品牌顶栏（靛蓝 → 紫，两段收敛）
 *   4. 数据可扫读：数字等宽、负字距；中文系统字体
 *   5. 密度统一：中密度；状态色语义统一（成功绿 / 警告橙 / 危险红）
 *
 * 本文件只改颜色 / 背景 / 字体 / 描边 / 阴影，不动布局、交互与业务功能。
 * ========================================================================== */

/* ======================= 设计令牌（明） ======================= */
:root {
  /* 品牌色（低饱和靛蓝，克制） */
  --brand-primary: #5E68C9 !important;
  --brand-primary-hover: #4E57B5 !important;
  --brand-primary-soft: #F0F1F8 !important;
  --brand-primary-glow: rgba(94, 104, 201, 0.24) !important;
  --brand-blue: #5E68C9 !important;
  --brand-blue-soft: #F0F1F8 !important;
  --brand-blue-glow: rgba(94, 104, 201, 0.24) !important;
  --brand-indigo: #4A51A8 !important;
  --brand-indigo-soft: #F0F1F8 !important;
  --brand-purple: #5E5A9E !important;
  --color-accent: #5E68C9 !important;
  --color-accent-ink: #FFFFFF !important;
  --color-focus: #5E68C9 !important;
  --color-focus-soft: #F0F1F8 !important;

  /* 品牌顶栏：平涂深中性色（去渐变，简单低饱和） */
  --brand-gradient: #2B2C3A !important;
  --brand-gradient-soft: #F4F4F8 !important;

  /* 中性灰阶（Apple 式） */
  --color-ink: #1D1D1F !important;
  --color-ink-2: #3F3F46 !important;
  --color-neutral: #6E6E73 !important;
  --color-muted: #A8A8AE !important;
  --color-rule: #E5E5EA !important;
  --color-rule-subtle: #F2F2F7 !important;
  --color-rule-strong: #D4D4DA !important;
  --color-paper: #FFFFFF !important;
  --color-paper-2: #FAFAFC !important;
  --color-paper-3: #F2F2F7 !important;

  /* 画布与表面 */
  --bg-page: #F5F5F7 !important;
  --bg-mesh: none !important;           /* 去掉光晕，回归干净画布 */
  --bg-surface: #FFFFFF !important;
  --bg-surface-raised: #FFFFFF !important;
  --bg-surface-sunken: #F2F2F7 !important;
  --bg-hover: #F2F2F7 !important;
  --bg-active: #F0F1F8 !important;
  --surface-base: #FFFFFF !important;
  --surface-card: #FFFFFF !important;
  --surface-card-hover: #FAFAFC !important;
  --surface-elevated: #FFFFFF !important;
  --surface-glass: rgba(255, 255, 255, 0.92) !important;
  --surface-glass-border: #E5E5EA !important;

  /* 语义色 */
  --color-success: #248A3D !important;
  --color-success-soft: #E8F7ED !important;
  --color-warning: #B25000 !important;
  --color-warning-soft: #FBF1E4 !important;
  --color-danger: #D70015 !important;
  --color-danger-soft: #FDECEF !important;
  --status-on-bg: #E8F7ED !important;
  --status-on-fg: #248A3D !important;
  --status-on-border: #BDE8C9 !important;
  --status-wait-bg: #FBF1E4 !important;
  --status-wait-fg: #B25000 !important;
  --status-wait-border: #F2D9BC !important;
  --status-off-bg: #F2F2F7 !important;
  --status-off-fg: #6E6E73 !important;
  --status-off-border: #E5E5EA !important;
  --status-fault-bg: #FDECEF !important;
  --status-fault-fg: #D70015 !important;
  --status-fault-border: #F6C4CB !important;

  /* 图表色阶：低饱和主序列 → 次序列 → 弱化 → 底纹 */
  --chart-1: #5E68C9 !important;
  --chart-2: #8A93D8 !important;
  --chart-3: #B3B9E4 !important;
  --chart-4: #D5D8EE !important;
  --chart-5: #5FA98A !important;
  --chart-6: #C9A46B !important;
  --chart-7: #C98AA0 !important;
  --chart-8: #6FB3C4 !important;
  --chart-9: #C98F8F !important;
  --chart-10: #C9A468 !important;
  --chart-11: #9AA0AD !important;
  --chart-12: #A69AC9 !important;

  /* 字体 */
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif !important;
  --font-mono: "SF Mono", ui-monospace, Menlo, Monaco, Consolas, monospace !important;

  /* 圆角 */
  --radius-card: 12px !important;
  --radius-control: 8px !important;
  --radius-tag: 6px !important;

  /* 阴影：发丝线优先，重阴影仅用于模态 */
  --shadow-card: 0 0 0 1px var(--color-rule) !important;
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--color-rule-strong) !important;
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--color-rule) !important;
}

/* ======================= 设计令牌（暗） ======================= */
html[data-theme="dark"] {
  --brand-primary: #9AA3E6 !important;
  --brand-primary-hover: #AFB6EC !important;
  --brand-primary-soft: #26273C !important;
  --brand-primary-glow: rgba(154, 163, 230, 0.30) !important;
  --brand-blue: #9AA3E6 !important;
  --brand-blue-soft: #26273C !important;
  --brand-blue-glow: rgba(154, 163, 230, 0.30) !important;
  --brand-indigo: #5A5F9E !important;
  --brand-indigo-soft: #26273C !important;
  --brand-purple: #6C669E !important;
  --color-accent: #9AA3E6 !important;
  --color-accent-ink: #1D1E2B !important;
  --color-focus: #9AA3E6 !important;
  --color-focus-soft: #26273C !important;
  --brand-gradient: #17171C !important;

  --color-ink: #F5F5F7 !important;
  --color-ink-2: #D4D4DA !important;
  --color-neutral: #B6B6BE !important;
  --color-muted: #6E6E73 !important;
  --color-rule: #3A3A3E !important;
  --color-rule-subtle: #2C2C2E !important;
  --color-rule-strong: #48484D !important;
  --color-paper: #1C1C1E !important;
  --color-paper-2: #232326 !important;
  --color-paper-3: #2C2C2E !important;

  --bg-page: #121214 !important;
  --bg-mesh: none !important;
  --bg-surface: #1C1C1E !important;
  --bg-surface-raised: #232326 !important;
  --bg-surface-sunken: #2C2C2E !important;
  --bg-hover: rgba(255, 255, 255, 0.06) !important;
  --bg-active: #26273C !important;
  --surface-base: #1C1C1E !important;
  --surface-card: #1C1C1E !important;
  --surface-card-hover: #232326 !important;
  --surface-elevated: #232326 !important;
  --surface-glass: rgba(28, 28, 30, 0.88) !important;
  --surface-glass-border: #3A3A3E !important;

  --color-success: #4ADE80 !important;
  --color-success-soft: rgba(74, 222, 128, 0.14) !important;
  --color-warning: #FBBF24 !important;
  --color-warning-soft: rgba(251, 191, 36, 0.14) !important;
  --color-danger: #F87171 !important;
  --color-danger-soft: rgba(248, 113, 113, 0.14) !important;
  --status-on-bg: rgba(74, 222, 128, 0.14) !important;
  --status-on-fg: #4ADE80 !important;
  --status-on-border: rgba(74, 222, 128, 0.32) !important;
  --status-wait-bg: rgba(251, 191, 36, 0.14) !important;
  --status-wait-fg: #FBBF24 !important;
  --status-wait-border: rgba(251, 191, 36, 0.32) !important;
  --status-off-bg: rgba(182, 182, 190, 0.10) !important;
  --status-off-fg: #B6B6BE !important;
  --status-off-border: #3A3A3E !important;
  --status-fault-bg: rgba(248, 113, 113, 0.16) !important;
  --status-fault-fg: #F87171 !important;
  --status-fault-border: rgba(248, 113, 113, 0.36) !important;

  --chart-1: #9AA3E6 !important;
  --chart-2: #B4BAEC !important;
  --chart-3: #CDD1F2 !important;
  --chart-4: #6FB89A !important;
  --chart-5: #D3B472 !important;
  --chart-6: #D39BB0 !important;
  --chart-7: #7FC1D1 !important;
  --chart-8: #D39F9F !important;
  --chart-9: #D3B274 !important;
  --chart-10: #9AA0AD !important;
  --chart-11: #B4A9D3 !important;
  --chart-12: #E0E0E6 !important;

  --shadow-card: 0 0 0 1px var(--color-rule) !important;
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px var(--color-rule-strong) !important;
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px var(--color-rule) !important;
}

/* ======================= 画布与页面底 ======================= */
body {
  background: var(--bg-page) !important;
  color: var(--color-ink) !important;
  font-family: var(--font-body) !important;
}
#main-area,
.main-canvas,
.workspace {
  background: transparent !important;
}

/* 数据区域数字统一等宽可扫读 */
.page-head h2,
[class*="kpi"],
[class*="stat"],
[class*="trend"],
[class*="meter"],
[class*="panel"] {
  font-variant-numeric: tabular-nums;
}

/* ======================= 品牌顶栏：唯一渐变处 ======================= */
header.hd,
.hd,
banner,
[class*="topbar"],
[class*="navbar"],
[class*="app-bar"] {
  background: var(--brand-gradient) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}
.hd .brand-code,
.hd [class*="brand"] {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* ======================= 页面内容头：干净画布，无底色 ======================= */
#main-area[data-page] .page-head,
.main-canvas .page-head,
.page-head {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.page-head h2,
.page-head h1 {
  color: var(--color-ink) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}
.page-head p,
.page-head [class*="meta"],
.page-head [id*="count"] {
  color: var(--color-neutral) !important;
}

/* ======================= 卡片：白底 + 发丝线，无重阴影 ======================= */
.card-b,
.bento-card-b,
.meter-card,
.card,
.panel,
.pn,
[class*="card-b"],
[class*="bento"],
[class*="panel-card"],
[class*="chart-panel"] {
  background: var(--surface-card) !important;
  border: 1px solid var(--color-rule) !important;
  box-shadow: none !important;
  border-radius: var(--radius-card) !important;
}
.card-b:hover,
.bento-card-b:hover,
.meter-card:hover {
  box-shadow: var(--shadow-card-hover) !important;
}

/* bento KPI 卡：压过 nuart-premium 的紫色半透明底 */
.bento-kpi-grid .bento-metric-card,
.bento-metric-card {
  background: #FFFFFF !important;
  border: 1px solid var(--color-rule) !important;
  box-shadow: none !important;
  border-radius: var(--radius-card) !important;
}
html[data-theme="dark"] .bento-metric-card {
  background: var(--surface-card) !important;
}

/* 仪表盘面板：统一 12px 圆角 + 发丝线（AI 浮层除外） */
[class*="panel"]:not(.ai-panel) {
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
}

/* 顶部导航：非激活中性灰，激活主色 */
.nav-link,
.nav-tab,
[class*="nav-tab"] {
  color: var(--color-neutral) !important;
}
.nav-link.active,
.nav-link.on,
.nav-tab.active,
.nav-tab.on {
  color: var(--brand-primary) !important;
}

/* 顶部导航精确覆盖（ui-hardening 用了 1,3,0 特异性硬编码 #315f87） */
#nav-bar.site-nav.nav-wrap {
  background: #FFFFFF !important;
  border-bottom: 1px solid var(--color-rule) !important;
}
#nav-bar.site-nav .nav-visible-items > .nav-tab {
  color: var(--color-neutral) !important;
  font-weight: 500 !important;
  background: transparent !important;
}
#nav-bar.site-nav .nav-visible-items > .nav-tab:hover {
  color: var(--color-ink) !important;
  background: var(--bg-hover) !important;
}
#nav-bar.site-nav .nav-visible-items > .nav-tab.on,
#nav-bar.site-nav .nav-visible-items > .nav-tab.active,
#nav-bar.site-nav .nav-visible-items > .nav-tab[aria-current="page"] {
  color: var(--brand-primary) !important;
  background: var(--brand-primary-soft) !important;
  font-weight: 600 !important;
  box-shadow: inset 0 -2px 0 var(--brand-primary) !important;
}
.hd-btn.sec:hover {
  background: var(--brand-primary-soft) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}

/* 卡片迷你趋势线（meter-spark）：主色数据线 */
.meter-spark path.spark-line {
  stroke: var(--brand-primary) !important;
}
.meter-spark path.spark-area {
  fill: var(--brand-primary-soft) !important;
}

/* ======================= 按钮：主按钮平涂、次按钮描边 ======================= */
.btn-primary,
.luxury-btn,
.hd-btn,
[class*="btn-primary"],
button.primary {
  background: var(--brand-primary) !important;
  border-color: transparent !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.luxury-btn:hover,
.hd-btn:hover,
[class*="btn-primary"]:hover,
button.primary:hover {
  background: var(--brand-primary-hover) !important;
  filter: none !important;
}
.btn,
.btn-secondary,
[class*="btn-outline"],
button:not([class*="primary"]):not(.luxury-btn):not(.hd-btn) {
  border-color: var(--color-rule) !important;
}

/* 激活 / 选中态：浅底 + 主色字，无发光描边 */
.is-active,
[aria-selected="true"] {
  box-shadow: none !important;
}
.bg-active,
[class*="active-bg"] {
  background: var(--bg-active) !important;
}

/* ======================= 视图分段控件（用能设备/计量链路/配电拓扑） ======================= */
.dashboard-object-tabs {
  background: var(--color-rule-subtle) !important;
  border-radius: var(--radius-control) !important;
  padding: 3px !important;
  gap: 2px !important;
}
.dashboard-object-tab {
  background: transparent !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: var(--color-neutral) !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}
.dashboard-object-tab.is-active {
  background: #FFFFFF !important;
  color: var(--color-ink) !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="dark"] .dashboard-object-tab.is-active {
  background: var(--surface-elevated) !important;
}

/* ======================= 搜索与输入：白底 + 发丝线 ======================= */
.live-search,
input[type="search"],
[class*="search"] input,
.sidebar-search-dock input {
  background: #FFFFFF !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .live-search,
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] [class*="search"] input {
  background: var(--surface-card) !important;
}

/* ======================= 侧栏：白底 + 发丝线分隔 ======================= */
.side,
.sidebar,
[class*="sidebar"] {
  background: var(--surface-card) !important;
  border-color: var(--color-rule) !important;
  box-shadow: none !important;
}

/* ======================= 链接与强调 ======================= */
a,
.link,
.text-primary,
[class*="accent"] {
  color: var(--brand-primary);
}

/* ======================= 表格：发丝线分隔 ======================= */
[class*="table"] tr,
[class*="table"] [class*="row"],
.card-b [class*="row"] {
  border-color: var(--color-rule) !important;
}

/* ======================= 卡片信息层级：更清楚 ======================= */
.meter-card {
  padding: 18px !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 0 0 1px var(--color-rule) !important;
}
.meter-card-head {
  margin-bottom: 12px !important;
}
.meter-card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  color: var(--color-ink) !important;
}
.meter-card-sub {
  margin-top: 4px !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--color-neutral) !important;
}
.meter-main {
  gap: 4px !important;
  padding: 10px 0 !important;
  border-top: 1px solid var(--color-rule-subtle) !important;
}
.meter-main .value {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: -0.4px !important;
  color: var(--color-ink) !important;
}
.meter-main .unit {
  font-size: 12px !important;
  color: var(--color-neutral) !important;
}
.meter-subline {
  font-size: 12px !important;
  line-height: 1.7 !important;
  color: var(--color-neutral) !important;
}
.meter-subline strong {
  color: var(--color-ink) !important;
  font-weight: 600 !important;
}
.meter-stats {
  gap: 12px !important;
  padding-top: 10px !important;
  margin-top: 8px !important;
  border-top: 1px solid var(--color-rule-subtle) !important;
}
.meter-stats dt {
  font-size: 11px !important;
  color: var(--color-muted) !important;
  margin-bottom: 2px !important;
}
.meter-stats dd {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
}
/* 角色徽标中性化 */
.meter-card-role,
[class*="role-badge"],
[class*="device-role"] {
  background: var(--color-rule-subtle) !important;
  color: var(--color-neutral) !important;
  border: 0 !important;
}
/* bento 指标卡 */
.bento-card-label {
  font-size: 12px !important;
  color: var(--color-neutral) !important;
}
.bento-metric-value {
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
  color: var(--color-ink) !important;
}
.bento-metric-unit {
  font-size: 12px !important;
  color: var(--color-muted) !important;
}

/* ======================= 左侧设备树：干净行距与选中态 ======================= */
.sidebar-search-dock {
  padding: 8px 10px !important;
  border-bottom: 1px solid var(--color-rule) !important;
  background: transparent !important;
}
#tree {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
  padding: 6px 8px 16px !important;
}
.ti {
  min-height: 32px !important;
  gap: 6px !important;
  padding: 0 8px !important;
  border-left: 2px solid transparent !important;
  border-radius: 6px !important;
  color: var(--color-ink-2) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}
.ti:hover {
  background: var(--bg-hover) !important;
  color: var(--color-ink) !important;
}
.ti.on,
.ti.selected {
  border-left-color: var(--brand-primary) !important;
  background: var(--brand-primary-soft) !important;
  color: var(--color-ink) !important;
}
.ti input[type="checkbox"] {
  accent-color: var(--brand-primary) !important;
}
.ti .ta {
  color: var(--color-muted) !important;
  flex: 0 0 16px !important;
  width: 16px !important;
}
.ti .tree-label,
.ti label {
  font-size: 12px !important;
  color: inherit !important;
}
.ti .tp {
  font-size: 11px !important;
  color: var(--color-neutral) !important;
}
.ti .dashboard-device-context {
  font-size: 11px !important;
  color: var(--color-muted) !important;
  font-weight: 400 !important;
}
.ti.tree-group-root .tree-label,
.ti.tree-group-root .node-title-label {
  font-weight: 600 !important;
  color: var(--color-ink) !important;
}
/* 楼层快捷标签：中性小胶囊 */
.floor-tag-btn {
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  color: var(--color-neutral) !important;
  background: transparent !important;
}
.floor-tag-btn:hover {
  background: var(--bg-hover) !important;
}
.floor-tag-btn.active {
  background: var(--brand-primary-soft) !important;
  color: var(--brand-primary) !important;
}
.tree-tools {
  font-size: 12px !important;
  color: var(--color-neutral) !important;
}
.tree-selected {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
}
.tree-actions button {
  border: 1px solid var(--color-rule) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  color: var(--color-neutral) !important;
  background: transparent !important;
}
.tree-actions button:hover {
  background: var(--bg-hover) !important;
  color: var(--color-ink) !important;
}

/* ======================= MQTT 快速配置 ======================= */
.mqtt-quick-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 12px 10px !important;
}
.mqtt-quick-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.mqtt-quick-step {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.mqtt-quick-step strong {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--color-ink) !important;
}
.mqtt-quick-step span {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: var(--color-neutral) !important;
}
.mqtt-quick-defaults {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 10px !important;
  margin: 0 !important;
  border: 1px solid var(--color-rule) !important;
  border-radius: 8px !important;
  background: var(--surface-card) !important;
}
.mqtt-quick-defaults div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
}
.mqtt-quick-defaults dt {
  font-size: 11px !important;
  color: var(--color-muted) !important;
  white-space: nowrap !important;
}
.mqtt-quick-defaults dd {
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  color: var(--color-neutral) !important;
  margin: 0 !important;
}
.mqtt-quick-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
.mqtt-quick-actions .bt {
  width: 100% !important;
  justify-content: center !important;
}
.mqtt-ready-badge {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: var(--color-success-soft) !important;
  color: var(--color-success) !important;
  font-size: 11px !important;
}
.mqtt-pending-badge {
  display: inline-block !important;
  margin-left: 6px !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  background: var(--color-rule-subtle) !important;
  color: var(--color-muted) !important;
  font-size: 11px !important;
}
.comm-focus-row td {
  background: var(--brand-primary-soft) !important;
  box-shadow: inset 3px 0 0 var(--brand-primary) !important;
}
.comm-focus-row td:first-child { position: relative; }
.comm-focus-row .comm-focus-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--brand-primary);
  color: #fff;
  vertical-align: middle;
}
.comm-focus-row .comm-focus-badge::before { content: "📍"; font-size: 10px; line-height: 1; }

/* 左侧 EMQX 跳转卡片 */
.side-emqx-card { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--color-rule); border-radius: 10px; background: var(--surface, #fff); }
.side-emqx-card strong { font-size: 13px; font-weight: 600; color: var(--ink, #1d1d1f); }
.side-emqx-card span { font-size: 12px; color: var(--text-weak, #86868b); line-height: 1.5; }
.side-emqx-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; align-self: flex-start; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 600; color: #fff; background: var(--brand-primary); text-decoration: none; transition: filter .15s ease; }
.side-emqx-link:hover { filter: brightness(1.06); }
.side-emqx-link svg { width: 14px; height: 14px; }

/* 滚动条克制化 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--color-rule-strong);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ======================= 设备目录：实测功率 / 实测电量 ======================= */
.kind-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 6px;
  height: 16px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  vertical-align: middle;
  white-space: nowrap;
  color: var(--brand-primary);
  background: var(--brand-primary-soft);
  border: 1px solid rgba(94,104,201,.25);
}
.kind-badge.kind-allocated { color: #9A6B00; background: #FBF3E0; border-color: rgba(154,107,0,.25); }
.kind-badge.kind-topology { color: #3E6B53; background: #E9F3ED; border-color: rgba(62,107,83,.25); }
.archive-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 0 6px;
  height: 16px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  color: var(--text-weak, #86868b);
  background: #F2F2F4;
  border: 1px solid var(--color-rule);
}
.cell-archive { color: var(--text-weak, #86868b); font-style: italic; }
.cell-muted { color: var(--text-weak, #86868b); }
.device-table td .unit { font-size: 10px; color: var(--text-weak, #86868b); margin-left: 1px; }
.device-table td .win-note { display: block; font-size: 10px; color: var(--text-weak, #86868b); margin-top: 1px; }

/* 电量窗口切换（本小时 / 今日 / 本月） */
.device-energy-head { vertical-align: bottom; }
.device-energy-head .win-toggle {
  display: inline-flex;
  gap: 2px;
  margin-top: 5px;
  padding: 2px;
  border: 1px solid var(--color-rule);
  border-radius: 8px;
  background: var(--brand-primary-soft);
}
.win-opt {
  appearance: none;
  border: 0;
  background: transparent;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-weak, #86868b);
  cursor: pointer;
  line-height: 1.4;
}
.win-opt:hover { color: var(--ink, #1d1d1f); }
.win-opt.on { background: var(--brand-primary); color: #fff; }
.win-opt.on:hover { color: #fff; }

/* 旧版能耗均摊区块改写（只列启用 + 折叠停用） */
.allocation-summary-head p { max-width: 660px; }
.allocation-rule-row.is-disabled { opacity: .55; }
.allocation-rule-row small { color: var(--text-weak, #86868b); }
.allocation-disabled-toggle { margin-top: 6px; }
.allocation-disabled-list { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--color-rule); }