/* ============================================================================
 * premium_theme_2026.css
 * ----------------------------------------------------------------------------
 * 神州科技 · Fisher 设备管理系统 — 2026 Premium Dark SaaS 主题
 *
 * 设计方向（2025-2026 高端 Admin Dashboard 趋势）：
 *   - 灵感来源：Linear / Vercel / Resend / Raycast / Attio 的“精密暗色”语言
 *   - 深色中性画布（近黑，微冷调），分层式表面高程（Surface 1~4）
 *   - 主色：靛蓝→紫罗兰微渐变（#6366f1 → #8b5cf6），替代旧的高饱和纯蓝
 *   - 8px 网格圆角系统（6/8/10/14/18/999）、分层柔和阴影、1px 内高光描边
 *   - Inter / SF Pro / Segoe UI 字体栈 + 等宽数字，160~220ms 缓动过渡
 *
 * 本文件为【新增覆盖层】：只增不改、不删任何既有 CSS/JS，可随时回滚。
 * 通过 html:root 高优先级重定义 --fc-* 设计令牌 + 组件级 !important 规则，
 * 统一此前多层主题（白蓝 / Linear / miaoda 紫 / 深空蓝 HUD）造成的冲突。
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 * 1. DESIGN TOKENS —— 覆盖主包 --fc-* 令牌（html:root 优先级高于 :root）
 * ------------------------------------------------------------------------- */
html:root {
  /* 画布与表面高程 */
  --fc-bg:            #0b0c0e !important;
  --fc-bg-body:       #0b0c0e !important;
  --fc-bg-root:       #0b0c0e !important;
  --fc-bg-shell:      #0b0c0e !important;
  --fc-bg-page:       #0b0c0e !important;
  --fc-bg-deep:       #070708 !important;
  --fc-bg-panel:      #131317 !important;
  --fc-bg-sidebar:    #0e0e11 !important;
  --fc-bg-topbar:     rgba(13,13,16,.86) !important;
  --fc-surface:       #131317 !important;
  --fc-surface-hi:    #1a1a1f !important;
  --fc-elevated:      #1c1c21 !important;
  --fc-overlay:       rgba(4,4,6,.62) !important;
  --fc-input-bg:      #111114 !important;
  --fc-th-bg:         #141419 !important;
  --fc-hover-bg:      rgba(255,255,255,.045) !important;
  --fc-toast-bg:      #17171c !important;
  --fc-toast-border:  rgba(255,255,255,.1) !important;
  --fc-toast-text:    #e8e9ec !important;

  /* 描边 */
  --fc-border:        rgba(255,255,255,.08) !important;
  --fc-border-soft:   rgba(255,255,255,.05) !important;
  --fc-border-hi:     rgba(255,255,255,.15) !important;
  --fc-border-focus:  #6366f1 !important;
  --fc-table-row-border: rgba(255,255,255,.05) !important;

  /* 文本 */
  --fc-text:            #e4e5e9 !important;
  --fc-text-hi:         #f7f7f8 !important;
  --fc-text-secondary:  #c7cad2 !important;
  --fc-text-muted:      #8b9098 !important;
  --fc-text-mute:       #8b9098 !important;
  --fc-text-lo:         #5f646d !important;
  --fc-text-topbar:     #d5d7dd !important;
  --fc-text-topbar-muted:#8b9098 !important;
  --fc-text-on-primary: #ffffff !important;
  --fc-form-label:      #c7cad2 !important;
  --fc-form-hint:       #8b9098 !important;
  --fc-link:            #818cf8 !important;

  /* 主色：靛蓝 → 紫罗兰 */
  --fc-primary:        #6366f1 !important;
  --fc-primary-hi:     #818cf8 !important;
  --fc-primary-lo:     #4f46e5 !important;
  --fc-primary-border: rgba(129,140,248,.55) !important;
  --fc-primary-soft:   rgba(99,102,241,.15) !important;
  --fc-primary-glow:   rgba(99,102,241,.42) !important;
  --fc-accent:         #6366f1 !important;
  --fc-accent-hi:      #818cf8 !important;
  --fc-accent-soft:    rgba(99,102,241,.15) !important;
  --fc-accent-blue:    #6366f1 !important;
  --fc-accent-purple:  #8b5cf6 !important;
  --fc-blue:           #818cf8 !important;
  --fc-blue-soft:      rgba(129,140,248,.16) !important;
  --fc-blue-border:    rgba(129,140,248,.4) !important;
  --fc-grad-accent:    linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  --fc-grad-primary:   linear-gradient(135deg,#6366f1,#8b5cf6) !important;
  --fc-grad-surface:   linear-gradient(180deg,#16161b,#101013) !important;
  --fc-grad-hero:      linear-gradient(135deg,rgba(99,102,241,.16),rgba(139,92,246,.08) 60%,transparent) !important;

  /* 语义色 */
  --fc-success:       #34d399 !important;
  --fc-success-soft:  rgba(52,211,153,.14) !important;
  --fc-success-border:rgba(52,211,153,.4) !important;
  --fc-warn:          #fbbf24 !important;
  --fc-warn-soft:     rgba(251,191,36,.14) !important;
  --fc-danger:        #f87171 !important;
  --fc-danger-soft:   rgba(248,113,113,.14) !important;
  --fc-danger-border: rgba(248,113,113,.4) !important;
  --fc-info:          #38bdf8 !important;
  --fc-info-soft:     rgba(56,189,248,.14) !important;

  /* 圆角系统（8px 网格） */
  --fc-radius-xs:   6px  !important;
  --fc-radius-sm:   8px  !important;
  --fc-radius-md:   10px !important;
  --fc-radius-lg:   14px !important;
  --fc-radius-xl:   18px !important;
  --fc-radius-pill: 999px !important;
  --fc-radius:      10px !important;

  /* 阴影（分层柔和） */
  --fc-shadow-xs:   0 1px 2px rgba(0,0,0,.4) !important;
  --fc-shadow-sm:   0 2px 8px rgba(0,0,0,.38) !important;
  --fc-shadow:      0 8px 24px rgba(0,0,0,.38) !important;
  --fc-shadow-lg:   0 18px 44px rgba(0,0,0,.46) !important;
  --fc-shadow-xl:   0 28px 64px rgba(0,0,0,.55) !important;
  --fc-shadow-focus: 0 0 0 3px rgba(99,102,241,.28) !important;

  /* 字体与排版 */
  --fc-font-sans: "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  --fc-font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace,
                  "Cascadia Code", Consolas, monospace !important;
  --fc-weight-normal: 400 !important;
  --fc-weight-medium: 500 !important;
  --fc-weight-semibold: 600 !important;
  --fc-weight-bold: 650 !important;
  --fc-leading-tight: 1.2 !important;
  --fc-leading-snug: 1.35 !important;
  --fc-leading: 1.5 !important;
  --fc-leading-loose: 1.65 !important;

  /* 动效 */
  --fc-duration-fast: 140ms !important;
  --fc-duration: 180ms !important;
  --fc-duration-slow: 260ms !important;
  --fc-ease: cubic-bezier(.4,0,.2,1) !important;
  --fc-ease-in: cubic-bezier(.4,0,1,1) !important;
  --fc-ease-out: cubic-bezier(0,0,.2,1) !important;
  --fc-ease-spring: cubic-bezier(.34,1.56,.64,1) !important;

  /* 侧栏导航 */
  --fc-sidebar-nav:       #9aa0ac !important;
  --fc-sidebar-nav-hover: #e8e9ec !important;
  --fc-sidebar-active-bg: rgba(99,102,241,.14) !important;
  --fc-sidebar-active-border: #6366f1 !important;

  /* 滚动条 */
  --fc-scrollbar-track: transparent !important;
  --fc-scrollbar-thumb: rgba(255,255,255,.12) !important;
  --fc-scrollbar-thumb-hi: rgba(255,255,255,.2) !important;
  --fc-scrollbar: rgba(255,255,255,.12) !important;

  /* 选区 */
  --fc-selection-bg: rgba(99,102,241,.42) !important;
  --fc-selection-text: #ffffff !important;

  /* 统一 z-index 标尺（所有 sticky 保持在 Ant 弹层 1000 之下） */
  --fc-z-base: 0 !important;
  --fc-z-sticky: 30 !important;
  --fc-z-fixed: 80 !important;
  --fc-z-dropdown: 100 !important;
  --fc-z-modal: 1000 !important;
  --fc-z-toast: 1010 !important;
  --fc-z-tooltip: 1070 !important;
}

/* ---------------------------------------------------------------------------
 * 2. GLOBAL RESET —— box-sizing 与滚动修复（重叠问题的根本修复）
 * ------------------------------------------------------------------------- */
html body *,
html body *::before,
html body *::after {
  box-sizing: border-box !important;
}

html, body, #root {
  max-width: 100% !important;
  min-width: 0 !important;
}

html body {
  background: #0b0c0e !important;
  color: #e4e5e9 !important;
  font-family: var(--fc-font-sans) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
  overflow-x: hidden !important;
}

html body ::selection {
  background: rgba(99,102,241,.42) !important;
  color: #fff !important;
}

/* 统一滚动条外观 */
html body ::-webkit-scrollbar { width: 10px; height: 10px; }
html body ::-webkit-scrollbar-track { background: transparent; }
html body ::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html body ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); background-clip: content-box; }
html body * { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.16) transparent; }

/* ---------------------------------------------------------------------------
 * 2.5 NORMALIZATION —— 竞争主题变量归一化（关键！）
 * ---------------------------------------------------------------------------
 * 14 个层叠来源里存在多套完整竞争主题，各自定义了自己的 --x-* 变量，
 * 且它们的组件选择器比本文件更具体（含 #root > .ant-layout > ... 全路径）。
 * 通过在同一锚点上、用更高优先级（html:root 前缀）重定义这些变量，
 * 无论哪套主题的组件规则最终胜出，var(--x-*) 都会解析为本文件的统一值，
 * 从而从根上消除白蓝 / Linear / miaoda 紫 / 深空蓝 的配色打架。
 * ------------------------------------------------------------------------- */

/* --lin-*（dashboard_relayout_v3.css，源顺序胜出的深紫主题） */
html:root body:has(.brand-lockup) {
  --lin-canvas: #0b0c0e !important;
  --lin-surface-1: #131317 !important;
  --lin-surface-2: #16161b !important;
  --lin-surface-3: #1a1a1f !important;
  --lin-surface-4: #202025 !important;
  --lin-line: rgba(255,255,255,.08) !important;
  --lin-line-strong: rgba(255,255,255,.15) !important;
  --lin-line-soft: rgba(255,255,255,.05) !important;
  --lin-ink: #f7f7f8 !important;
  --lin-ink-muted: #c7cad2 !important;
  --lin-ink-subtle: #8b9098 !important;
  --lin-ink-tertiary: #5f646d !important;
  --lin-accent: #6366f1 !important;
  --lin-accent-hover: #818cf8 !important;
  --lin-accent-soft: rgba(99,102,241,.14) !important;
  --lin-success: #34d399 !important;
  --lin-warning: #fbbf24 !important;
  --lin-danger: #f87171 !important;
  --lin-radius-xs: 6px !important;
  --lin-radius-sm: 8px !important;
  --lin-radius-md: 10px !important;
  --lin-radius-lg: 14px !important;
  --lin-shadow: 0 18px 40px rgba(0,0,0,.32) !important;
}

/* --dash-*（dashboard_override_final.css，data-theme=dark 时才生效的蓝色主题） */
html:root body:has(.brand-lockup) {
  --dash-bg: #0b0c0e !important;
  --dash-bg-deep: #070708 !important;
  --dash-surface: #131317 !important;
  --dash-surface-raised: #1a1a1f !important;
  --dash-surface-hover: #1c1c21 !important;
  --dash-card: rgba(19,19,23,.94) !important;
  --dash-card-soft: rgba(19,19,23,.78) !important;
  --dash-border: rgba(255,255,255,.08) !important;
  --dash-border-strong: rgba(255,255,255,.15) !important;
  --dash-ink: #f7f7f8 !important;
  --dash-text: #c7cad2 !important;
  --dash-muted: #8b9098 !important;
  --dash-faint: #5f646d !important;
  --dash-blue: #818cf8 !important;
  --dash-blue-strong: #6366f1 !important;
  --dash-cyan: #38bdf8 !important;
  --dash-green: #34d399 !important;
  --dash-amber: #fbbf24 !important;
  --dash-red: #f87171 !important;
  --dash-radius: 14px !important;
  --dash-shadow: 0 18px 42px rgba(0,0,0,.36) !important;
}

/* --linear-*（ui_white_blue_override.css 内的 Linear 复刻） */
html:root body:has(.brand-lockup) {
  --linear-canvas: #0b0c0e !important;
  --linear-surface-1: #131317 !important;
  --linear-surface-2: #16161b !important;
  --linear-surface-3: #1a1a1f !important;
  --linear-border: rgba(255,255,255,.08) !important;
  --linear-border-strong: rgba(255,255,255,.15) !important;
  --linear-ink: #f7f7f8 !important;
  --linear-muted: #c7cad2 !important;
  --linear-subtle: #8b9098 !important;
  --linear-tertiary: #5f646d !important;
  --linear-primary: #6366f1 !important;
  --linear-primary-hover: #818cf8 !important;
  --linear-primary-pressed: #4f46e5 !important;
}

/* --miaoda-*（ui_white_blue_override.css 内的紫罗兰主题） */
html:root body:has(.brand-lockup) {
  --miaoda-bg: #0b0c0e !important;
  --miaoda-bg-soft: #0e0e11 !important;
  --miaoda-surface: rgba(19,19,23,.78) !important;
  --miaoda-surface-solid: #131317 !important;
  --miaoda-surface-raised: rgba(26,26,31,.86) !important;
  --miaoda-border: rgba(255,255,255,.08) !important;
  --miaoda-border-strong: rgba(99,102,241,.42) !important;
  --miaoda-ink: #f7f7f8 !important;
  --miaoda-muted: #c7cad2 !important;
  --miaoda-subtle: #8b9098 !important;
  --miaoda-blue: #6366f1 !important;
  --miaoda-blue-hover: #818cf8 !important;
  --miaoda-violet: #8b5cf6 !important;
  --miaoda-cyan: #38bdf8 !important;
  --miaoda-success: #34d399 !important;
  --miaoda-shadow: 0 20px 60px rgba(0,0,0,.4) !important;
}

/* --lg-control-*（control_ui_harmonize.css 的控制台蓝色 HUD） */
html:root body .control-page {
  --lg-control-canvas: #0b0c0e !important;
  --lg-control-surface: rgba(19,19,23,.92) !important;
  --lg-control-surface-2: rgba(26,26,31,.9) !important;
  --lg-control-border: rgba(255,255,255,.08) !important;
  --lg-control-border-strong: rgba(129,140,248,.5) !important;
  --lg-control-ink: #e4e5e9 !important;
  --lg-control-muted: #8b9098 !important;
  --lg-control-blue: #6366f1 !important;
  --lg-control-blue-hi: #818cf8 !important;
}

/* --lg-*（login_backend_relayout.css 的登录页蓝色） */
html:root body:has(.login-page) {
  --lg-canvas: #0b0c0e !important;
  --lg-surface: #131317 !important;
  --lg-surface-2: #16161b !important;
  --lg-surface-3: #131317 !important;
  --lg-line: rgba(255,255,255,.08) !important;
  --lg-line-soft: rgba(255,255,255,.05) !important;
  --lg-text: #f7f7f8 !important;
  --lg-text-muted: #c7cad2 !important;
  --lg-text-subtle: #8b9098 !important;
  --lg-blue: #6366f1 !important;
  --lg-blue-bright: #818cf8 !important;
  --lg-blue-deep: #4f46e5 !important;
}

/* ---------------------------------------------------------------------------
 * 3. SHELL —— 顶栏 / 侧栏 / 内容区
 * ------------------------------------------------------------------------- */

/* 3.1 顶层布局：侧栏 + 内容，避免宽度挤压 */
html body:has(.brand-lockup) #root > .ant-app > .ant-layout,
html body:has(.brand-lockup) #root > .ant-layout {
  min-height: 100dvh !important;
  background: #0b0c0e !important;
}

html:root body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout,
html:root body:has(.brand-lockup) #root > .ant-layout > .ant-layout {
  display: grid !important;
  grid-template-columns: 216px minmax(0, 1fr) !important;
  min-height: calc(100dvh - 56px) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}

/* 3.2 顶栏：统一 56px 尺寸 + z-index 80（低于 Ant 弹层），覆盖两套竞争主题
 *     （--dash header 68px vs --lin header 56px 的尺寸打架在此终结） */
html:root body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header,
html:root body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
  height: 56px !important;
  min-height: 56px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 0 20px !important;
  background: rgba(13,13,16,.82) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}

/* 顶栏左侧提示簇已隐藏，右侧状态簇靠右对齐，避免与左侧重叠 */
html body:has(.brand-lockup) #root .ant-layout-header > div {
  min-width: 0 !important;
  max-width: 100% !important;
}
html body:has(.brand-lockup) #root .ant-layout-header > div:nth-child(2) {
  display: flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  margin-left: auto !important;
  min-width: 0 !important;
}
html body:has(.brand-lockup) #root .ant-layout-header span,
html body:has(.brand-lockup) #root .ant-layout-header label {
  color: #c7cad2 !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}

/* 顶栏控件 */
html body:has(.brand-lockup) #root .ant-layout-header button,
html body:has(.brand-lockup) #root .ant-layout-header .ant-btn,
html body:has(.brand-lockup) #root .ant-layout-header .ant-select-selector,
html body:has(.brand-lockup) #root .ant-layout-header .ant-input,
html body:has(.brand-lockup) #root .ant-layout-header .ant-input-affix-wrapper {
  min-height: 32px !important;
  background: #16161b !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  color: #d5d7dd !important;
  box-shadow: none !important;
  transition: border-color var(--fc-duration) var(--fc-ease), background var(--fc-duration) var(--fc-ease) !important;
}
html body:has(.brand-lockup) #root .ant-layout-header button:hover,
html body:has(.brand-lockup) #root .ant-layout-header .ant-btn:hover {
  border-color: #6366f1 !important;
  background: #1a1a1f !important;
  color: #f7f7f8 !important;
}

/* 3.3 侧栏：统一 216px 尺寸（覆盖 --lin 212px 与 --dash 248px 的竞争） */
html:root body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-sider,
html:root body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-sider {
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  flex: 0 0 216px !important;
  background: #0e0e11 !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
  overflow: hidden !important;
}
html body:has(.brand-lockup) #root .ant-layout-sider-children {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  background: #0e0e11 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* 品牌锁 */
html body:has(.brand-lockup) .brand-lockup {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 16px 18px 15px !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: #0e0e11 !important;
}
html body:has(.brand-lockup) .brand-lockup::after {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, transparent) !important;
  opacity: .7 !important;
}
html body:has(.brand-lockup) .brand-lockup-logo {
  grid-row: 1 / span 2 !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 9px !important;
  object-fit: contain !important;
  box-shadow: 0 0 0 1px rgba(99,102,241,.45), 0 8px 20px rgba(99,102,241,.24) !important;
  filter: saturate(.95) brightness(1.06) !important;
}
html body:has(.brand-lockup) .brand-lockup-name {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: #f7f7f8 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
html body:has(.brand-lockup) .brand-lockup-sub {
  min-width: 0 !important;
  margin: 3px 0 0 !important;
  overflow: hidden !important;
  color: #8b9098 !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}

/* 导航菜单 */
html body:has(.brand-lockup) .ant-menu,
html body:has(.brand-lockup) .ant-menu-dark,
html body:has(.brand-lockup) .ant-menu-dark .ant-menu-sub {
  padding: 12px 10px 18px !important;
  background: transparent !important;
  color: #9aa0ac !important;
}
html body:has(.brand-lockup) .ant-menu-item,
html body:has(.brand-lockup) .ant-menu-submenu-title {
  height: 36px !important;
  line-height: 36px !important;
  margin: 2px 0 !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: #9aa0ac !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  transition: background var(--fc-duration-fast) var(--fc-ease), color var(--fc-duration-fast) var(--fc-ease) !important;
}
html body:has(.brand-lockup) .ant-menu-item:hover,
html body:has(.brand-lockup) .ant-menu-submenu-title:hover {
  background: rgba(255,255,255,.05) !important;
  color: #e8e9ec !important;
}
html body:has(.brand-lockup) .ant-menu-item-selected,
html body:has(.brand-lockup) .ant-menu-item.ant-menu-item-active:not(.ant-menu-item-selected) {
  background: rgba(99,102,241,.14) !important;
  color: #f7f7f8 !important;
}
html body:has(.brand-lockup) .ant-menu-item-selected::after {
  border-inline-end: 3px solid #6366f1 !important;
}

/* 3.4 内容区 */
html body:has(.brand-lockup) #root .ant-layout-content {
  min-width: 0 !important;
  max-width: 100% !important;
  background: #0b0c0e !important;
  color: #e4e5e9 !important;
  padding: 18px clamp(14px, 2vw, 28px) 24px !important;
}

/* ---------------------------------------------------------------------------
 * 4. SURFACES —— 卡片 / 面板 / 仪表
 * ------------------------------------------------------------------------- */
html body:has(.brand-lockup) .panel,
html body:has(.brand-lockup) .s-card,
html body:has(.brand-lockup) .device-card,
html body:has(.brand-lockup) .sidebar-card,
html body:has(.brand-lockup) .ctrl-tab-panel,
html body:has(.brand-lockup) .ant-layout-content .rc-header-elevated,
html body:has(.brand-lockup) .dashboard-root .panel,
html body:has(.brand-lockup) .dashboard-root .s-card,
html body:has(.brand-lockup) .dashboard-root .device-card {
  background: linear-gradient(180deg, #16161b, #111114) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.32) !important;
  color: #e4e5e9 !important;
}

html body:has(.brand-lockup) .panel:hover,
html body:has(.brand-lockup) .s-card:hover,
html body:has(.brand-lockup) .device-card:hover {
  border-color: rgba(129,140,248,.35) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 32px rgba(0,0,0,.4) !important;
}

/* 卡片标题 */
html body:has(.brand-lockup) .panel h3,
html body:has(.brand-lockup) .panel h4,
html body:has(.brand-lockup) .s-card .s-title,
html body:has(.brand-lockup) .ctrl-tab-panel-head h2 {
  color: #f7f7f8 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

/* 指标卡（metric rail）—— 响应式防溢出 */
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"],
html body:has(.brand-lockup) .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px !important;
  width: auto !important;
  margin: 0 0 18px !important;
}
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] > div > div {
  min-height: 104px !important;
  padding: 16px 15px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  background: linear-gradient(180deg, #16161b, #111114) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

/* ---------------------------------------------------------------------------
 * 5. BUTTONS —— 主/次/危险/幽灵，统一圆角与高度，杜绝文本截断重叠
 * ------------------------------------------------------------------------- */
html body:has(.brand-lockup) button,
html body:has(.brand-lockup) .ant-btn {
  box-sizing: border-box !important;
  min-height: 32px !important;
  height: auto !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  transition: background var(--fc-duration-fast) var(--fc-ease),
              border-color var(--fc-duration-fast) var(--fc-ease),
              color var(--fc-duration-fast) var(--fc-ease),
              box-shadow var(--fc-duration-fast) var(--fc-ease),
              transform var(--fc-duration-fast) var(--fc-ease) !important;
}

/* 主操作按钮：靛蓝→紫罗兰渐变 */
html body:has(.brand-lockup) .ant-btn-primary,
html body:has(.brand-lockup) .login-button,
html body:has(.brand-lockup) .ctrl-tab-action,
html body:has(.brand-lockup) .ctrl-qbtn,
html body:has(.brand-lockup) .sidebar-btn,
html body:has(.brand-lockup) .sidebar-btn-sm {
  background: linear-gradient(135deg, #6366f1, #7c5cf0) !important;
  background-image: linear-gradient(135deg, #6366f1, #7c5cf0) !important;
  border: 1px solid rgba(129,140,248,.5) !important;
  border-radius: 9px !important;
  color: #ffffff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 18px rgba(99,102,241,.28) !important;
}
html body:has(.brand-lockup) .ant-btn-primary:hover,
html body:has(.brand-lockup) .login-button:hover,
html body:has(.brand-lockup) .ctrl-tab-action:hover,
html body:has(.brand-lockup) .ctrl-qbtn:hover,
html body:has(.brand-lockup) .sidebar-btn:hover,
html body:has(.brand-lockup) .sidebar-btn-sm:hover {
  background: linear-gradient(135deg, #7577f4, #8b6bf3) !important;
  background-image: linear-gradient(135deg, #7577f4, #8b6bf3) !important;
  border-color: rgba(165,180,252,.7) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 10px 24px rgba(99,102,241,.36) !important;
  transform: translateY(-1px) !important;
}
html body:has(.brand-lockup) .ant-btn-primary:active,
html body:has(.brand-lockup) .ctrl-tab-action:active,
html body:has(.brand-lockup) .ctrl-qbtn:active,
html body:has(.brand-lockup) .sidebar-btn:active,
html body:has(.brand-lockup) .sidebar-btn-sm:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(99,102,241,.24) !important;
}

/* 次要按钮：中性表面 */
html body:has(.brand-lockup) .ant-btn-default,
html body:has(.brand-lockup) .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):not(.ant-btn-text):not(.ant-btn-link) {
  background: #16161b !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  color: #d5d7dd !important;
  box-shadow: none !important;
}
html body:has(.brand-lockup) .ant-btn-default:hover,
html body:has(.brand-lockup) .ant-btn:not(.ant-btn-primary):not(.ant-btn-danger):not(.ant-btn-text):not(.ant-btn-link):hover {
  background: #1a1a1f !important;
  border-color: rgba(129,140,248,.45) !important;
  color: #f7f7f8 !important;
}

/* 危险按钮 */
html body:has(.brand-lockup) .ant-btn-danger,
html body:has(.brand-lockup) .sidebar-btn.danger,
html body:has(.brand-lockup) .sidebar-btn-sm.danger {
  background: linear-gradient(135deg, #b5455b, #8f3448) !important;
  border-color: rgba(248,113,113,.5) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(181,69,91,.28) !important;
}

/* 修复：侧栏按钮不再强制 100% 宽 + 截断，改为自适应并保留完整标签 */
html body:has(.brand-lockup) .sidebar-btn,
html body:has(.brand-lockup) .sidebar-btn-sm {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 禁用态 */
html body:has(.brand-lockup) button:disabled,
html body:has(.brand-lockup) .ant-btn:disabled,
html body:has(.brand-lockup) .sidebar-btn:disabled,
html body:has(.brand-lockup) .sidebar-btn-sm:disabled {
  background: #141419 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: rgba(255,255,255,.4) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
}

/* ---------------------------------------------------------------------------
 * 6. TABLE —— 表格 / 行悬停 / 表头
 * ------------------------------------------------------------------------- */
html body:has(.brand-lockup) .rc-table-wrap,
html body:has(.brand-lockup) .ant-table-wrapper {
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  background: #131317 !important;
  overflow: hidden !important;
}
html body:has(.brand-lockup) .rc-table-wrap table,
html body:has(.brand-lockup) .rc-table-wrap thead,
html body:has(.brand-lockup) .rc-table-wrap tbody,
html body:has(.brand-lockup) .rc-table-wrap tr,
html body:has(.brand-lockup) .rc-table-wrap td,
html body:has(.brand-lockup) .rc-table-wrap th {
  background: transparent !important;
  border-color: rgba(255,255,255,.05) !important;
  color: #c7cad2 !important;
}
html body:has(.brand-lockup) .rc-table-wrap th {
  background: #141419 !important;
  color: #8b9098 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  padding: 10px 12px !important;
}
html body:has(.brand-lockup) .rc-table-wrap td {
  padding: 10px 12px !important;
  font-variant-numeric: tabular-nums !important;
}
html body:has(.brand-lockup) .rc-table-wrap tbody tr:hover td,
html body:has(.brand-lockup) .rc-table-dense tbody tr:hover td {
  background: rgba(99,102,241,.07) !important;
}

/* ---------------------------------------------------------------------------
 * 7. BADGE / STATUS —— 在线/离线/徽章
 * ------------------------------------------------------------------------- */
html body:has(.brand-lockup) .status-badge,
html body:has(.brand-lockup) .ctrl-device-status,
html body:has(.brand-lockup) .ant-tag {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  min-height: 22px !important;
  padding: 2px 9px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: #c7cad2 !important;
}
html body:has(.brand-lockup) .status-badge.online,
html body:has(.brand-lockup) .ctrl-device-status.online {
  color: #34d399 !important;
  border-color: rgba(52,211,153,.4) !important;
  background: rgba(52,211,153,.12) !important;
}
html body:has(.brand-lockup) .status-badge.offline,
html body:has(.brand-lockup) .ctrl-device-status.offline {
  color: #8b9098 !important;
  border-color: rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
}
html body:has(.brand-lockup) .status-badge.warning,
html body:has(.brand-lockup) .ctrl-device-status.warning {
  color: #fbbf24 !important;
  border-color: rgba(251,191,36,.4) !important;
  background: rgba(251,191,36,.12) !important;
}

/* ---------------------------------------------------------------------------
 * 8. CONTROL PAGE —— 工作台 / Tabs / 工具栏 / 快捷网格
 * ------------------------------------------------------------------------- */
html body .control-page,
html body .dashboard-root {
  background: radial-gradient(900px 500px at 50% -10%, rgba(99,102,241,.1), transparent 70%), #0b0c0e !important;
  color: #e4e5e9 !important;
}

html body .control-page .ctrl-header,
html body .control-page .home-tab-topbar {
  background: rgba(13,13,16,.9) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}

/* 标签页 */
html body:has(.brand-lockup) .ctrl-tabs,
html body:has(.brand-lockup) .ctrl-tab-panel-head {
  background: transparent !important;
  border-color: rgba(255,255,255,.08) !important;
}
html body:has(.brand-lockup) .ctrl-tab,
html body:has(.brand-lockup) .control-page .ctrl-tab {
  min-height: 32px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: 1px solid transparent !important;
  color: #9aa0ac !important;
  white-space: nowrap !important;
  transition: background var(--fc-duration-fast) var(--fc-ease), color var(--fc-duration-fast) var(--fc-ease) !important;
}
html body:has(.brand-lockup) .ctrl-tab:hover {
  background: rgba(255,255,255,.05) !important;
  color: #e8e9ec !important;
}
html body:has(.brand-lockup) .ctrl-tab.active {
  background: rgba(99,102,241,.14) !important;
  border-color: rgba(129,140,248,.4) !important;
  color: #f7f7f8 !important;
}

/* 工具栏：flex + 自动换行，避免按钮横向挤压重叠 */
html body:has(.brand-lockup) .ctrl-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  background: #131317 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
}
html body:has(.brand-lockup) .ctrl-toolbar button,
html body:has(.brand-lockup) .ctrl-toolbar .ctrl-btn {
  flex: 0 0 auto !important;
  min-width: 88px !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 8px !important;
}

/* 操作网格 / 快捷网格：自适应，防重叠 */
html body:has(.brand-lockup) .ctrl-tab-action-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  max-width: none !important;
}
html body:has(.brand-lockup) .ctrl-tab-action {
  min-height: 76px !important;
  height: auto !important;
  padding: 13px !important;
  border-radius: 12px !important;
  justify-content: flex-start !important;
  font-size: 13px !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: hidden !important;
}
html body:has(.brand-lockup) .ctrl-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 9px !important;
}
html body:has(.brand-lockup) .ctrl-qbtn {
  min-height: 74px !important;
  padding: 11px 8px !important;
  border-radius: 12px !important;
  white-space: normal !important;
}
html body:has(.brand-lockup) .ctrl-qbtn .icon { font-size: 20px !important; }

/* 屏幕区 + 右侧栏：flex 不重叠 */
html body .control-page .ctrl-screen-area {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  background: linear-gradient(180deg, #0d0d10, #0a0a0c) !important;
  border-right: 1px solid rgba(255,255,255,.07) !important;
}
html body .control-page .ctrl-sidebar-panel {
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  background: #0e0e11 !important;
  border-left: 1px solid rgba(255,255,255,.08) !important;
}

/* 侧栏卡片体：两列网格，按钮保持完整可点 */
html body:has(.brand-lockup) .sidebar-card-body {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  padding: 10px !important;
}
html body:has(.brand-lockup) .sidebar-card-body > .sidebar-btn.full,
html body:has(.brand-lockup) .sidebar-card-body > textarea,
html body:has(.brand-lockup) .sidebar-card-body > .sidebar-divider,
html body:has(.brand-lockup) .sidebar-card-body > .sidebar-vol-row {
  grid-column: 1 / -1 !important;
}
html body:has(.brand-lockup) .sidebar-card-body > div,
html body:has(.brand-lockup) .sidebar-card-body > .sidebar-btn,
html body:has(.brand-lockup) .sidebar-card-body > .sidebar-btn-sm {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---------------------------------------------------------------------------
 * 9. FORMS / INPUTS
 * ------------------------------------------------------------------------- */
html body:has(.brand-lockup) input,
html body:has(.brand-lockup) textarea,
html body:has(.brand-lockup) select,
html body:has(.brand-lockup) .ant-input,
html body:has(.brand-lockup) .ant-input-affix-wrapper,
html body:has(.brand-lockup) .ant-select-selector {
  background: #111114 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  color: #e4e5e9 !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.2) !important;
  caret-color: #818cf8 !important;
}
html body:has(.brand-lockup) input:focus,
html body:has(.brand-lockup) textarea:focus,
html body:has(.brand-lockup) select:focus,
html body:has(.brand-lockup) .ant-input:focus,
html body:has(.brand-lockup) .ant-input-affix-wrapper:focus-within {
  border-color: #6366f1 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22) !important;
}
html body:has(.brand-lockup) input::placeholder,
html body:has(.brand-lockup) textarea::placeholder {
  color: #5f646d !important;
}

/* ---------------------------------------------------------------------------
 * 10. MODALS / DROPDOWN / TOOLTIP —— 弹层统一，确保盖过 sticky 顶栏
 * ------------------------------------------------------------------------- */
html body:has(.brand-lockup) .ant-modal-content,
html body:has(.brand-lockup) .ant-dropdown-menu,
html body:has(.brand-lockup) .ant-select-dropdown,
html body:has(.brand-lockup) .ant-picker-dropdown {
  background: #17171c !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.05) inset !important;
  color: #e4e5e9 !important;
}
html body:has(.brand-lockup) .ant-modal-header,
html body:has(.brand-lockup) .ant-modal-footer {
  background: transparent !important;
  border-color: rgba(255,255,255,.07) !important;
}
html body:has(.brand-lockup) .ant-modal-title {
  color: #f7f7f8 !important;
  font-weight: 600 !important;
}
html body:has(.brand-lockup) .ant-modal-close-x { color: #8b9098 !important; }
html body:has(.brand-lockup) .ant-dropdown-menu-item {
  color: #c7cad2 !important;
  border-radius: 7px !important;
}
html body:has(.brand-lockup) .ant-dropdown-menu-item:hover {
  background: rgba(99,102,241,.12) !important;
  color: #f7f7f8 !important;
}
html body:has(.brand-lockup) .ant-tooltip-inner {
  background: #1c1c21 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 8px !important;
  color: #e4e5e9 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.5) !important;
}

/* 遮罩 */
html body:has(.brand-lockup) .ant-modal-mask {
  background: rgba(4,4,6,.66) !important;
  backdrop-filter: blur(3px) !important;
}

/* ---------------------------------------------------------------------------
 * 11. LOGIN —— 保持深空玻璃质感，升级为靛紫渐变
 * ------------------------------------------------------------------------- */
html body:has(.login-page) .login-page .login-form-section {
  width: min(392px, calc(100vw - 32px)) !important;
  padding: 34px 28px 26px !important;
  border: 1px solid rgba(129,140,248,.3) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(24,22,40,.5), rgba(7,7,12,.4)) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.2) inset,
              0 0 40px rgba(99,102,241,.08) inset !important;
  backdrop-filter: blur(22px) saturate(140%) !important;
}
html body:has(.login-page) .login-page .login-button {
  height: 50px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #6366f1, #7c5cf0) !important;
  font-size: 14px !important;
  letter-spacing: 3px !important;
  box-shadow: 0 12px 28px rgba(99,102,241,.35), 0 1px 0 rgba(255,255,255,.22) inset !important;
}
html body:has(.login-page) .login-page .login-button:hover {
  background: linear-gradient(135deg, #7577f4, #8b6bf3) !important;
}
html body:has(.login-page) .login-page .ant-input-affix-wrapper {
  height: 50px !important;
  border-radius: 11px !important;
  background: transparent !important;
  border-color: rgba(129,140,248,.25) !important;
}
html body:has(.login-page) .login-page .ant-input-affix-wrapper:focus-within {
  border-color: rgba(129,140,248,.9) !important;
  box-shadow: 0 0 0 3px rgba(99,102,241,.22), 0 0 26px rgba(99,102,241,.2) !important;
}

/* ---------------------------------------------------------------------------
 * 12. OVERLAP FIXES —— 精确覆盖规则（z-index / position / 负 margin / 挤压）
 * ------------------------------------------------------------------------- */
/* 12.1 顶栏 z-index 统一（覆盖旧 40 与 80 的冲突），低于 Ant 弹层 1000 */
html body:has(.brand-lockup) #root .ant-layout-header {
  z-index: 80 !important;
  isolation: isolate !important;
}

/* 12.2 内容区 sticky 工具栏：贴在顶栏下方（56px），z-index 30，带实底防透叠 */
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child {
  position: sticky !important;
  top: 56px !important;
  z-index: 30 !important;
  background: rgba(19,19,23,.94) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.32) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

/* 12.3 设备网格分页：干净的 sticky 底部条，不遮挡最后一行 */
html body:has(.brand-lockup) .ant-layout-content > div:has(> div[style*="repeat(auto-fill"]) > div:last-child {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 20 !important;
  margin-top: 14px !important;
  padding: 10px 12px !important;
  background: rgba(13,13,16,.92) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* 12.4 装饰元素（负 margin / 大偏移）统一裁剪，杜绝横向滚动与遮挡 */
html body:has(.brand-lockup) .deco-circle,
html body:has(.brand-lockup) .brand-corner,
html body:has(.brand-lockup) .ember,
html body:has(.brand-lockup) .deco-circle-2,
html body:has(.brand-lockup) .login-decoration {
  pointer-events: none !important;
  z-index: 0 !important;
  overflow: hidden !important;
}
html body:has(.brand-lockup) .ant-layout-content,
html body:has(.brand-lockup) .control-page,
html body:has(.brand-lockup) .dashboard-root {
  overflow: clip !important;
}

/* 12.5 文本/控件通用防重叠：设置 min-width:0 让 flex/grid 子项可收缩 */
html body:has(.brand-lockup) #root .ant-layout *,
html body:has(.brand-lockup) #root .control-page *,
html body:has(.brand-lockup) #root .dashboard-root * {
  min-width: 0;
}
html body:has(.brand-lockup) #root button,
html body:has(.brand-lockup) #root input,
html body:has(.brand-lockup) #root select,
html body:has(.brand-lockup) #root textarea {
  max-width: 100% !important;
  line-height: 1.35 !important;
}

/* 12.6 注入面板：搜索框与 tab 列表换行，避免窄屏碰撞 */
html body:has(.brand-lockup) .injection-panel { overflow: hidden !important; }
html body:has(.brand-lockup) .injection-panel [role="tablist"],
html body:has(.brand-lockup) .injection-panel .ant-tabs-nav-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-width: 100% !important;
}
html body:has(.brand-lockup) #root .ant-input-search {
  display: flex !important;
  width: min(400px, 100%) !important;
  max-width: 100% !important;
}
html body:has(.brand-lockup) #root .ant-input-search .ant-input-group {
  display: flex !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* 12.7 分段控件 / 标签：横向可滚动，不压扁 */
html body:has(.brand-lockup) #root .ant-segmented {
  max-width: 100% !important;
  overflow-x: auto !important;
}
html body:has(.brand-lockup) #root .ant-tabs-nav-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

/* 12.8 关键修复：.control-page 在 main css 是 position:fixed; inset:0，
 *     会整屏覆盖左侧导航 sider 与顶栏。强制回归 relative 进入内容区流内。 */
html:root body:has(.brand-lockup) .control-page,
html:root body:has(.brand-lockup) .dashboard-root {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
}

/* 12.9 关键修复：.ctrl-body 三列 grid(240px 1fr 380px) 无响应式折叠，
 *     窄屏被挤压。统一为 flex 行布局并锁定三段宽度，窄屏在 13 节降为单列。 */
html:root body:has(.brand-lockup) .control-page .ctrl-body {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  flex: 1 !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: auto !important;
}
html:root body:has(.brand-lockup) .control-page .ctrl-body > .ctrl-sidebar {
  flex: 0 0 240px !important;
  min-width: 240px !important;
  max-width: 240px !important;
}
html:root body:has(.brand-lockup) .control-page .ctrl-body > .ctrl-screen-area {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
html:root body:has(.brand-lockup) .control-page .ctrl-body > .ctrl-sidebar-panel {
  flex: 0 0 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
}

/* 12.10 关键修复：.login-form-section 的 position 在 4 个来源 relative↔absolute
 *     翻转 4 次（login_backend_relayout L260/L554、login_background_remove L188、
 *     内联 lg-layout-final）。在此彻底钉死为 relative 居中，杜绝绝对定位逃逸遮挡。 */
html:root body:has(.login-page) .login-page .login-form-section {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  inset: auto !important;
  transform: none !important;
  margin: 0 auto !important;
}

/* 12.11 z-index 基准重置：钉死 shell 三层，杜绝内层节点逃逸出层叠上下文 */
html:root body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header,
html:root body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout-header { z-index: 80 !important; }
html:root body:has(.brand-lockup) #root .ant-layout-sider { z-index: 1 !important; }
html:root body:has(.brand-lockup) #root .ant-layout-content { z-index: 0 !important; }

/* ---------------------------------------------------------------------------
 * 13. RESPONSIVE —— 窄屏降级
 * ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  html:root body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout,
  html:root body:has(.brand-lockup) #root > .ant-layout > .ant-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html:root body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-sider,
  html:root body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-sider {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
  }
  html:root body:has(.brand-lockup) #root .ant-layout-sider .ant-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  html:root body:has(.brand-lockup) #root .ant-layout-sider .ant-menu-item,
  html:root body:has(.brand-lockup) #root .ant-layout-sider .ant-menu-submenu-title {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
  html:root body:has(.brand-lockup) .ctrl-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html:root body:has(.brand-lockup) .ctrl-tab-action-grid {
    grid-template-columns: 1fr !important;
  }
  html:root body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header,
  html:root body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout-header {
    height: auto !important;
    min-height: 56px !important;
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
  }
  html:root body:has(.brand-lockup) #root .ant-layout-header > div:nth-child(2) {
    flex: 1 1 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }
  /* 控制台三列在窄屏降为单列堆叠，彻底消除挤压 */
  html:root body:has(.brand-lockup) .control-page .ctrl-body {
    flex-direction: column !important;
    overflow: auto !important;
  }
  html:root body:has(.brand-lockup) .control-page .ctrl-body > .ctrl-sidebar,
  html:root body:has(.brand-lockup) .control-page .ctrl-body > .ctrl-screen-area,
  html:root body:has(.brand-lockup) .control-page .ctrl-body > .ctrl-sidebar-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * 14. MICRO-ANIMATION —— 卡片进入 / 焦点脉动
 * ------------------------------------------------------------------------- */
@keyframes pt-fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
html body:has(.brand-lockup) .device-card,
html body:has(.brand-lockup) .s-card,
html body:has(.brand-lockup) .panel {
  animation: pt-fade-up .32s var(--fc-ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
  html body:has(.brand-lockup) *,
  html body:has(.brand-lockup) *::before,
  html body:has(.brand-lockup) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}