/*
 * Linear-inspired authenticated workbench relayout.
 *
 * Visual-only layer.  The authenticated shell is the only surface that
 * contains .brand-lockup, so this file never targets the login branch.  No
 * markup, state, handlers, API paths, or WebSocket contracts are changed.
 */

/* -------------------------------------------------------------------------- */
/* Token layer                                                                */
/* -------------------------------------------------------------------------- */
html body:has(.brand-lockup) {
  --lin-canvas: #010102;
  --lin-surface-1: #0f1011;
  --lin-surface-2: #141516;
  --lin-surface-3: #18191a;
  --lin-surface-4: #1d1e20;
  --lin-line: #23252a;
  --lin-line-strong: #34343a;
  --lin-line-soft: rgba(255, 255, 255, .07);
  --lin-ink: #f7f8f8;
  --lin-ink-muted: #d0d6e0;
  --lin-ink-subtle: #8a8f98;
  --lin-ink-tertiary: #62666d;
  --lin-accent: #5e6ad2;
  --lin-accent-hover: #828fff;
  --lin-accent-soft: rgba(94, 106, 210, .14);
  --lin-success: #27a644;
  --lin-warning: #d9a441;
  --lin-danger: #d65b6b;
  --lin-radius-xs: 4px;
  --lin-radius-sm: 6px;
  --lin-radius-md: 8px;
  --lin-radius-lg: 12px;
  --lin-shadow: 0 18px 40px rgba(0, 0, 0, .22);
  background: var(--lin-canvas) !important;
  color: var(--lin-ink-muted) !important;
  font-family: Inter, "SF Pro Display", "SF Pro Text", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Microsoft YaHei", sans-serif !important;
}

html body:has(.brand-lockup) #root,
html body:has(.brand-lockup) #root > .ant-app,
html body:has(.brand-lockup) #root > .ant-layout,
html body:has(.brand-lockup) #root > .ant-app > .ant-layout,
html body:has(.brand-lockup) .ant-layout,
html body:has(.brand-lockup) .ant-layout-content {
  color: var(--lin-ink-muted) !important;
  background: var(--lin-canvas) !important;
}

html body:has(.brand-lockup) *,
html body:has(.brand-lockup) *::before,
html body:has(.brand-lockup) *::after {
  box-sizing: border-box;
}

html body:has(.brand-lockup) a {
  color: var(--lin-accent-hover) !important;
}

html body:has(.brand-lockup) ::selection {
  color: #fff !important;
  background: rgba(94, 106, 210, .45) !important;
}

/* -------------------------------------------------------------------------- */
/* Shell: narrow rail + utility bar                                           */
/* -------------------------------------------------------------------------- */
html body:has(.brand-lockup) #root > .ant-layout,
html body:has(.brand-lockup) #root > .ant-app > .ant-layout {
  min-height: 100vh !important;
  overflow: hidden !important;
}

html body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header,
html 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 22px !important;
  background: rgba(1, 1, 2, .96) !important;
  border-bottom: 1px solid var(--lin-line) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .15) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header::after,
html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout-header::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 128px !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--lin-accent), transparent) !important;
  pointer-events: none !important;
}

html body:has(.brand-lockup) .ant-layout-header > div {
  min-width: 0 !important;
}

html body:has(.brand-lockup) .ant-layout-header > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
}

html body:has(.brand-lockup) .ant-layout-header > div:first-child::before {
  content: "CONTROL PLANE" !important;
  display: inline-flex !important;
  align-items: center !important;
  height: 24px !important;
  padding: 0 8px !important;
  border: 1px solid var(--lin-line-strong) !important;
  border-radius: var(--lin-radius-xs) !important;
  color: var(--lin-ink-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}

/* The compact header no longer needs the decorative prompt or clock cluster.
   Hide the source node itself so its pseudo-label cannot reappear or overlap
   the live status controls. */
html body:has(.brand-lockup) .ant-layout-header > div:first-child {
  display: none !important;
}

html body:has(.brand-lockup) .ant-layout-header > div:nth-child(2) {
  margin-left: auto !important;
}

/* Fallback without :has() for cached/embedded shell variants. */
.ant-layout-header > div:first-child {
  display: none !important;
}
.ant-layout-header > div:first-child::before {
  content: none !important;
  display: none !important;
}
.ant-layout-header > div:nth-child(2) {
  margin-left: auto !important;
}

html body:has(.brand-lockup) .ant-layout-header > div:nth-child(2) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  min-width: 0 !important;
  color: var(--lin-ink-subtle) !important;
}

html body:has(.brand-lockup) .ant-layout-header span,
html body:has(.brand-lockup) .ant-layout-header label,
html body:has(.brand-lockup) .ant-layout-header .ant-select-selection-item {
  color: var(--lin-ink-muted) !important;
  font-size: 12px !important;
}

html body:has(.brand-lockup) .ant-layout-header .ant-select-selector,
html body:has(.brand-lockup) .ant-layout-header .ant-input,
html body:has(.brand-lockup) .ant-layout-header .ant-input-affix-wrapper {
  min-height: 30px !important;
  background: var(--lin-surface-1) !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-sm) !important;
  color: var(--lin-ink-muted) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .ant-layout-header button,
html body:has(.brand-lockup) .ant-layout-header .ant-btn {
  min-height: 30px !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-surface-1) !important;
  color: var(--lin-ink-muted) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, color .16s ease, background .16s ease !important;
}

html body:has(.brand-lockup) .ant-layout-header button:hover,
html body:has(.brand-lockup) .ant-layout-header .ant-btn:hover {
  border-color: var(--lin-accent) !important;
  color: var(--lin-ink) !important;
  background: var(--lin-surface-2) !important;
}

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

html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-sider,
html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-sider {
  width: 212px !important;
  min-width: 212px !important;
  max-width: 212px !important;
  flex: 0 0 212px !important;
  height: auto !important;
  background: var(--lin-surface-1) !important;
  border-right: 1px solid var(--lin-line) !important;
  overflow: hidden !important;
}

html body:has(.brand-lockup) .ant-layout-sider-children {
  min-height: 100% !important;
  background: var(--lin-surface-1) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-color: var(--lin-line-strong) transparent !important;
  scrollbar-width: thin !important;
}

/* compact brand lockup */
html body:has(.brand-lockup) .brand-lockup {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  min-height: 72px !important;
  margin: 0 !important;
  padding: 16px 16px 15px !important;
  border-bottom: 1px solid var(--lin-line) !important;
  background: var(--lin-surface-1) !important;
}

html body:has(.brand-lockup) .brand-lockup::after {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  right: 16px !important;
  bottom: -1px !important;
  height: 1px !important;
  background: linear-gradient(90deg, var(--lin-accent), transparent) !important;
  opacity: .7 !important;
}

html body:has(.brand-lockup) .brand-lockup-logo {
  grid-row: 1 / span 2 !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 7px !important;
  object-fit: contain !important;
  box-shadow: 0 0 0 1px rgba(94, 106, 210, .45), 0 8px 18px rgba(94, 106, 210, .22) !important;
  filter: saturate(.9) brightness(1.08) !important;
}

html body:has(.brand-lockup) .brand-lockup-name {
  min-width: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  color: var(--lin-ink) !important;
  font-family: Inter, "SF Pro Display", -apple-system, sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body:has(.brand-lockup) .brand-lockup-sub {
  min-width: 0 !important;
  margin: 3px 0 0 !important;
  overflow: hidden !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !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: var(--lin-ink-subtle) !important;
}

html body:has(.brand-lockup) .ant-menu-item,
html body:has(.brand-lockup) .ant-menu-submenu-title {
  height: 34px !important;
  line-height: 34px !important;
  margin: 3px 0 !important;
  padding: 0 10px !important;
  border-radius: var(--lin-radius-sm) !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: background .14s ease, color .14s ease !important;
}

html body:has(.brand-lockup) .ant-menu-item .anticon,
html body:has(.brand-lockup) .ant-menu-submenu-title .anticon {
  color: var(--lin-ink-tertiary) !important;
  font-size: 14px !important;
}

html body:has(.brand-lockup) .ant-menu-item:hover,
html body:has(.brand-lockup) .ant-menu-submenu-title:hover {
  color: var(--lin-ink) !important;
  background: var(--lin-surface-2) !important;
}

html body:has(.brand-lockup) .ant-menu-item:hover .anticon,
html body:has(.brand-lockup) .ant-menu-submenu-title:hover .anticon {
  color: var(--lin-ink-muted) !important;
}

html body:has(.brand-lockup) .ant-menu-item-selected {
  color: var(--lin-ink) !important;
  background: var(--lin-accent-soft) !important;
  box-shadow: inset 2px 0 0 var(--lin-accent) !important;
}

html body:has(.brand-lockup) .ant-menu-item-selected .anticon {
  color: var(--lin-accent-hover) !important;
}

html body:has(.brand-lockup) .ant-menu-item-selected::after {
  display: none !important;
}

html body:has(.brand-lockup) .ant-menu-submenu .ant-menu {
  margin: 2px 0 6px !important;
  padding: 2px 0 2px 14px !important;
  border-left: 1px solid var(--lin-line-strong) !important;
}

html body:has(.brand-lockup) .ant-menu-submenu .ant-menu-item {
  height: 30px !important;
  line-height: 30px !important;
  margin: 2px 0 !important;
  font-size: 11px !important;
}

/* -------------------------------------------------------------------------- */
/* Main canvas and shared form primitives                                     */
/* -------------------------------------------------------------------------- */
html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content,
html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content {
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  overflow: auto !important;
  padding: 28px 32px 44px !important;
  background: var(--lin-canvas) !important;
  scrollbar-color: var(--lin-line-strong) transparent !important;
  scrollbar-width: thin !important;
}

html body:has(.brand-lockup) .ant-layout-content h1,
html body:has(.brand-lockup) .ant-layout-content h2,
html body:has(.brand-lockup) .ant-layout-content h3,
html body:has(.brand-lockup) .ant-layout-content h4,
html body:has(.brand-lockup) .ant-layout-content strong,
html body:has(.brand-lockup) .ant-layout-content b {
  color: var(--lin-ink) !important;
}

html body:has(.brand-lockup) .ant-layout-content input:not([type="checkbox"]):not([type="radio"]),
html body:has(.brand-lockup) .ant-layout-content select,
html body:has(.brand-lockup) .ant-layout-content textarea,
html body:has(.brand-lockup) .ant-layout-content .ant-input,
html body:has(.brand-lockup) .ant-layout-content .ant-input-affix-wrapper,
html body:has(.brand-lockup) .ant-layout-content .ant-select-selector {
  min-height: 36px !important;
  border: 1px solid var(--lin-line-strong) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-surface-1) !important;
  color: var(--lin-ink-muted) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease !important;
}

html body:has(.brand-lockup) .ant-layout-content textarea {
  min-height: 84px !important;
  padding: 9px 10px !important;
  resize: vertical !important;
}

html body:has(.brand-lockup) .ant-layout-content input::placeholder,
html body:has(.brand-lockup) .ant-layout-content textarea::placeholder {
  color: var(--lin-ink-tertiary) !important;
  opacity: 1 !important;
}

html body:has(.brand-lockup) .ant-layout-content input:focus,
html body:has(.brand-lockup) .ant-layout-content select:focus,
html body:has(.brand-lockup) .ant-layout-content textarea:focus,
html body:has(.brand-lockup) .ant-layout-content .ant-input:focus,
html body:has(.brand-lockup) .ant-layout-content .ant-input-affix-wrapper-focused,
html body:has(.brand-lockup) .ant-layout-content .ant-select-focused .ant-select-selector {
  border-color: var(--lin-accent) !important;
  background: var(--lin-surface-2) !important;
  box-shadow: 0 0 0 3px rgba(94, 106, 210, .16) !important;
}

html body:has(.brand-lockup) .ant-layout-content button,
html body:has(.brand-lockup) .ant-layout-content .ant-btn {
  min-height: 34px !important;
  border-radius: var(--lin-radius-sm) !important;
  border: 1px solid var(--lin-line-strong) !important;
  background: var(--lin-surface-1) !important;
  color: var(--lin-ink-muted) !important;
  box-shadow: none !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease !important;
}

html body:has(.brand-lockup) .ant-layout-content button:hover,
html body:has(.brand-lockup) .ant-layout-content .ant-btn:hover {
  color: var(--lin-ink) !important;
  border-color: var(--lin-accent) !important;
  background: var(--lin-surface-2) !important;
}

html body:has(.brand-lockup) .ant-layout-content button:active,
html body:has(.brand-lockup) .ant-layout-content .ant-btn:active {
  transform: translateY(1px) !important;
}

html body:has(.brand-lockup) .ant-layout-content button.ant-btn-primary,
html body:has(.brand-lockup) .ant-layout-content button[type="submit"],
html body:has(.brand-lockup) .ant-layout-content .ant-btn-primary {
  background: var(--lin-accent) !important;
  border-color: var(--lin-accent) !important;
  color: #fff !important;
}

html body:has(.brand-lockup) .ant-layout-content button.ant-btn-primary:hover,
html body:has(.brand-lockup) .ant-layout-content button[type="submit"]:hover,
html body:has(.brand-lockup) .ant-layout-content .ant-btn-primary:hover {
  background: var(--lin-accent-hover) !important;
  border-color: var(--lin-accent-hover) !important;
}

html body:has(.brand-lockup) .ant-layout-content button:disabled,
html body:has(.brand-lockup) .ant-layout-content .ant-btn-disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
}

/* -------------------------------------------------------------------------- */
/* Overview: ledger composition                                               */
/* -------------------------------------------------------------------------- */
html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero),
html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 248px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "hero metrics" "workspace metrics" !important;
  align-content: start !important;
  align-items: start !important;
  column-gap: 20px !important;
  row-gap: 18px !important;
}

html body:has(.brand-lockup) .dashboard-hero {
  position: relative !important;
  grid-area: hero !important;
  min-height: 148px !important;
  margin: 0 !important;
  padding: 28px 30px !important;
  overflow: hidden !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-lg) !important;
  background: var(--lin-surface-1) !important;
  box-shadow: var(--lin-shadow) !important;
}

html body:has(.brand-lockup) .dashboard-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image: linear-gradient(90deg, rgba(94, 106, 210, .13) 1px, transparent 1px),
    linear-gradient(rgba(94, 106, 210, .08) 1px, transparent 1px) !important;
  background-size: 32px 32px !important;
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, .7), transparent 74%) !important;
  opacity: .4 !important;
}

html body:has(.brand-lockup) .dashboard-hero::after {
  content: "" !important;
  position: absolute !important;
  top: 20px !important;
  right: 26px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--lin-accent) !important;
  box-shadow: 0 0 0 5px rgba(94, 106, 210, .14), 0 0 18px rgba(94, 106, 210, .6) !important;
}

html body:has(.brand-lockup) .dashboard-hero > * {
  position: relative !important;
  z-index: 1 !important;
}

html body:has(.brand-lockup) .dashboard-hero .hero-kicker {
  color: var(--lin-accent-hover) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body:has(.brand-lockup) .dashboard-hero h1 {
  margin: 10px 0 6px !important;
  color: var(--lin-ink) !important;
  font-family: Inter, "SF Pro Display", -apple-system, sans-serif !important;
  font-size: 38px !important;
  font-weight: 600 !important;
  line-height: 1.08 !important;
  letter-spacing: 0 !important;
}

html body:has(.brand-lockup) .dashboard-hero p,
html body:has(.brand-lockup) .dashboard-hero span:not(.hero-kicker) {
  color: var(--lin-ink-subtle) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* Stats become a right-hand ledger, deliberately unlike a horizontal card row. */
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"],
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="marginBottom"] {
  grid-area: metrics !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] > div,
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="marginBottom"] > div {
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] > div > div,
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="marginBottom"] > div > div {
  position: relative !important;
  min-height: 80px !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  padding: 12px 13px !important;
  overflow: hidden !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-md) !important;
  background: var(--lin-surface-1) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] > div > div::after,
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="marginBottom"] > div > div::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  background: var(--lin-accent) !important;
  opacity: .7 !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] > div > div > div[style*="border-radius"],
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="marginBottom"] > div > div > div[style*="border-radius"] {
  grid-row: 1 / span 2 !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(94, 106, 210, .35) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-accent-soft) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] span:first-child,
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="marginBottom"] span:first-child {
  align-self: end !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] span:nth-child(2),
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="marginBottom"] span:nth-child(2) {
  align-self: start !important;
  color: var(--lin-ink) !important;
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: 0 !important;
}

/* device workspace */
html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]),
html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]),
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] {
  grid-area: workspace !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:first-child,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child {
  position: sticky !important;
  top: 68px !important;
  z-index: 35 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 8px !important;
  overflow-x: auto !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-lg) !important;
  background: rgba(15, 16, 17, .94) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .2) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:first-child > *,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child > * {
  flex: 0 0 auto !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:first-child input,
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:first-child select,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child input,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child select {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 10px !important;
  border-color: var(--lin-line-strong) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-surface-2) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:first-child button,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child button {
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 11px !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-surface-2) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:nth-child(2),
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:nth-child(2) {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  padding: 0 2px !important;
  border: 0 !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:nth-child(2) button,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:nth-child(2) button {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: var(--lin-radius-xs) !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 11px !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:nth-child(2) button:hover,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:nth-child(2) button:hover {
  color: var(--lin-ink) !important;
  border-color: var(--lin-line-strong) !important;
  background: var(--lin-surface-2) !important;
}

/* Grid view cards */
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div[style*="grid-template-columns"],
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div[style*="grid-template-columns"] > div,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div {
  position: relative !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-lg) !important;
  background: var(--lin-surface-1) !important;
  box-shadow: none !important;
  transition: border-color .16s ease, background .16s ease, transform .16s ease !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div[style*="grid-template-columns"] > div:hover,
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div:hover {
  border-color: var(--lin-line-strong) !important;
  background: var(--lin-surface-2) !important;
  transform: translateY(-1px) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div::before,
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div::after {
  pointer-events: none !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div > div[style*="border-bottom"] {
  min-height: 52px !important;
  padding: 12px 14px !important;
  background: transparent !important;
  border-color: var(--lin-line) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div > div[style*="flex-wrap"] {
  padding: 8px 14px !important;
  background: var(--lin-surface-2) !important;
  border-top: 1px solid var(--lin-line) !important;
  border-bottom: 1px solid var(--lin-line) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div p {
  color: var(--lin-ink-muted) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div button {
  min-height: 28px !important;
  border-radius: var(--lin-radius-xs) !important;
  font-size: 11px !important;
}

/* Keep status semantics visible while using the new neutral card shell. */
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div[class*="online"] {
  border-color: rgba(39, 166, 68, .34) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div[class*="sleeping"],
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div[class*="connecting"] {
  border-color: rgba(94, 106, 210, .45) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div[class*="offline"] {
  border-color: rgba(98, 102, 109, .46) !important;
}

/* Table view */
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"][style*="gap"] > div:has(> table),
html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:has(> table) {
  min-width: 0 !important;
  overflow-x: auto !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-lg) !important;
  background: var(--lin-surface-1) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div:has(> table) table {
  min-width: 900px !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div:has(> table) th {
  padding: 11px 13px !important;
  background: var(--lin-surface-2) !important;
  border-bottom: 1px solid var(--lin-line) !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div:has(> table) td {
  padding: 12px 13px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lin-line) !important;
  color: var(--lin-ink-muted) !important;
  font-size: 12px !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div:has(> table) tr:hover td {
  background: var(--lin-surface-2) !important;
}

html body:has(.brand-lockup) .dashboard-hero ~ div[style*="justify-content: space-between"][style*="margin-top"],
html body:has(.brand-lockup) .dashboard-hero ~ div[style*="justify-content:space-between"][style*="marginTop"] {
  min-height: 42px !important;
  margin-top: 0 !important;
  padding: 4px 2px !important;
  color: var(--lin-ink-subtle) !important;
}

/* -------------------------------------------------------------------------- */
/* Non-overview pages: one-line header + quiet surfaces                        */
/* -------------------------------------------------------------------------- */
html body:has(.brand-lockup) .ant-layout-content > .rc-header,
html body:has(.brand-lockup) .ant-layout-content > .rc-header-elevated {
  position: relative !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 16px !important;
  padding: 0 2px 14px !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid var(--lin-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--lin-ink) !important;
}

html body:has(.brand-lockup) .ant-layout-content > .rc-header::after,
html body:has(.brand-lockup) .ant-layout-content > .rc-header-elevated::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -1px !important;
  width: 56px !important;
  height: 2px !important;
  background: var(--lin-accent) !important;
}

html body:has(.brand-lockup) .rc-header h1,
html body:has(.brand-lockup) .rc-header h2,
html body:has(.brand-lockup) .rc-header h3,
html body:has(.brand-lockup) .rc-header-elevated h1,
html body:has(.brand-lockup) .rc-header-elevated h2,
html body:has(.brand-lockup) .rc-header-elevated h3 {
  margin: 0 !important;
  color: var(--lin-ink) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
}

html body:has(.brand-lockup) .rc-header p,
html body:has(.brand-lockup) .rc-header-elevated p {
  margin: 2px 0 0 !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 12px !important;
}

html body:has(.brand-lockup) .ant-layout-content .panel,
html body:has(.brand-lockup) .ant-layout-content .ctrl-tab-panel,
html body:has(.brand-lockup) .ant-layout-content .ctrl-tab-content,
html body:has(.brand-lockup) .ant-layout-content .admin-section,
html body:has(.brand-lockup) .ant-layout-content .admin-add-form,
html body:has(.brand-lockup) .ant-layout-content .inj-panel,
html body:has(.brand-lockup) .ant-layout-content .fc-panel,
html body:has(.brand-lockup) .ant-layout-content .log-panel,
html body:has(.brand-lockup) .ant-layout-content .account-panel,
html body:has(.brand-lockup) .ant-layout-content .telegram-panel,
html body:has(.brand-lockup) .ant-layout-content .node-panel,
html body:has(.brand-lockup) .ant-layout-content .injection-panel {
  min-width: 0 !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-lg) !important;
  background: var(--lin-surface-1) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .ant-layout-content .panel,
html body:has(.brand-lockup) .ant-layout-content .ctrl-tab-panel,
html body:has(.brand-lockup) .ant-layout-content .admin-add-form,
html body:has(.brand-lockup) .ant-layout-content .inj-panel,
html body:has(.brand-lockup) .ant-layout-content .fc-panel,
html body:has(.brand-lockup) .ant-layout-content .log-panel,
html body:has(.brand-lockup) .ant-layout-content .account-panel,
html body:has(.brand-lockup) .ant-layout-content .telegram-panel,
html body:has(.brand-lockup) .ant-layout-content .node-panel,
html body:has(.brand-lockup) .ant-layout-content .injection-panel {
  padding: 18px !important;
}

html body:has(.brand-lockup) .ctrl-tab-content {
  padding: 0 !important;
  overflow: auto !important;
}

html body:has(.brand-lockup) .ctrl-tab-panel-head,
html body:has(.brand-lockup) .admin-head,
html body:has(.brand-lockup) .ctrl-toolbar,
html body:has(.brand-lockup) .home-tab-topbar {
  min-height: 42px !important;
  padding: 0 0 12px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px solid var(--lin-line) !important;
  background: transparent !important;
}

html body:has(.brand-lockup) .ctrl-tab-panel-head h2,
html body:has(.brand-lockup) .admin-head h3 {
  margin: 0 !important;
  color: var(--lin-ink) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body:has(.brand-lockup) .ctrl-tab-panel-head p,
html body:has(.brand-lockup) .admin-head p {
  color: var(--lin-ink-subtle) !important;
  font-size: 12px !important;
}

html body:has(.brand-lockup) .admin-tabs,
html body:has(.brand-lockup) .ctrl-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

html body:has(.brand-lockup) .admin-tabs button,
html body:has(.brand-lockup) .ctrl-tab {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 10px !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: transparent !important;
  color: var(--lin-ink-subtle) !important;
  font-size: 11px !important;
}

html body:has(.brand-lockup) .admin-tabs button.on,
html body:has(.brand-lockup) .ctrl-tab.active {
  color: var(--lin-ink) !important;
  border-color: rgba(94, 106, 210, .65) !important;
  background: var(--lin-accent-soft) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .ctrl-tab.active::after {
  display: none !important;
}

/* tables across accounts/logs/settings */
html body:has(.brand-lockup) .ant-layout-content table,
html body:has(.brand-lockup) .ant-layout-content .ant-table {
  color: var(--lin-ink-muted) !important;
  background: transparent !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html body:has(.brand-lockup) .ant-layout-content table thead th,
html body:has(.brand-lockup) .ant-layout-content .ant-table-thead > tr > th {
  padding: 10px 12px !important;
  color: var(--lin-ink-subtle) !important;
  background: var(--lin-surface-2) !important;
  border-bottom: 1px solid var(--lin-line) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

html body:has(.brand-lockup) .ant-layout-content table tbody td,
html body:has(.brand-lockup) .ant-layout-content .ant-table-tbody > tr > td {
  padding: 11px 12px !important;
  color: var(--lin-ink-muted) !important;
  background: transparent !important;
  border-bottom: 1px solid var(--lin-line) !important;
  font-size: 12px !important;
}

html body:has(.brand-lockup) .ant-layout-content table tbody tr:hover td,
html body:has(.brand-lockup) .ant-table-tbody > tr:hover > td {
  background: var(--lin-surface-2) !important;
}

html body:has(.brand-lockup) .ant-table-container,
html body:has(.brand-lockup) .ant-table-content {
  border-radius: var(--lin-radius-lg) !important;
  background: var(--lin-surface-1) !important;
}

html body:has(.brand-lockup) .ant-pagination,
html body:has(.brand-lockup) .rc-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  color: var(--lin-ink-subtle) !important;
}

html body:has(.brand-lockup) .ant-pagination-item,
html body:has(.brand-lockup) .ant-pagination-prev,
html body:has(.brand-lockup) .ant-pagination-next {
  min-width: 28px !important;
  height: 28px !important;
  line-height: 26px !important;
  margin: 0 !important;
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-xs) !important;
  background: transparent !important;
}

html body:has(.brand-lockup) .ant-pagination-item a,
html body:has(.brand-lockup) .ant-pagination-prev button,
html body:has(.brand-lockup) .ant-pagination-next button {
  color: var(--lin-ink-subtle) !important;
}

html body:has(.brand-lockup) .ant-pagination-item-active {
  border-color: var(--lin-accent) !important;
  background: var(--lin-accent-soft) !important;
}

/* -------------------------------------------------------------------------- */
/* Control page and dense utility surfaces                                    */
/* -------------------------------------------------------------------------- */
html body:has(.brand-lockup) .control-page {
  color: var(--lin-ink-muted) !important;
  background: var(--lin-canvas) !important;
}

html body:has(.brand-lockup) .control-page .ctrl-header,
html body:has(.brand-lockup) .control-page .ctrl-toolbar,
html body:has(.brand-lockup) .control-page .ctrl-tabs {
  background: var(--lin-surface-1) !important;
  border-color: var(--lin-line) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .control-page .ctrl-header {
  min-height: 52px !important;
}

html body:has(.brand-lockup) .control-page .ctrl-tab-content,
html body:has(.brand-lockup) .control-page .ctrl-body,
html body:has(.brand-lockup) .control-page .ctrl-sidebar,
html body:has(.brand-lockup) .control-page .ctrl-screen-area,
html body:has(.brand-lockup) .control-page .ctrl-quick-panel,
html body:has(.brand-lockup) .control-page .ctrl-sidebar-panel {
  background: var(--lin-canvas) !important;
  border-color: var(--lin-line) !important;
}

html body:has(.brand-lockup) .control-page .ctrl-tab,
html body:has(.brand-lockup) .control-page .ctrl-btn,
html body:has(.brand-lockup) .control-page .sidebar-btn,
html body:has(.brand-lockup) .control-page .sidebar-btn-sm,
html body:has(.brand-lockup) .control-page .ctrl-qbtn {
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-surface-1) !important;
  color: var(--lin-ink-muted) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .control-page .ctrl-tab.active,
html body:has(.brand-lockup) .control-page .ctrl-btn.primary,
html body:has(.brand-lockup) .control-page .ctrl-qbtn.is-on {
  border-color: var(--lin-accent) !important;
  background: var(--lin-accent) !important;
  color: #fff !important;
}

html body:has(.brand-lockup) .control-page .sidebar-card,
html body:has(.brand-lockup) .control-page .ctrl-empty,
html body:has(.brand-lockup) .control-page .ctrl-log-row,
html body:has(.brand-lockup) .control-page .ctrl-phone-frame {
  border: 1px solid var(--lin-line) !important;
  border-radius: var(--lin-radius-md) !important;
  background: var(--lin-surface-1) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .control-page .sidebar-card-head {
  background: var(--lin-surface-2) !important;
  border-color: var(--lin-line) !important;
  color: var(--lin-ink-muted) !important;
}

html body:has(.brand-lockup) .control-page .sidebar-input,
html body:has(.brand-lockup) .control-page .sidebar-textarea,
html body:has(.brand-lockup) .control-page .ctrl-input {
  border-color: var(--lin-line-strong) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-surface-2) !important;
  color: var(--lin-ink-muted) !important;
}

/* -------------------------------------------------------------------------- */
/* Modal / drawer / toast portals                                              */
/* -------------------------------------------------------------------------- */
html body:has(.brand-lockup) .ant-modal-mask,
html body:has(.brand-lockup) .ant-drawer-mask,
html body:has(.brand-lockup) .modal-overlay {
  background: rgba(1, 1, 2, .78) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

html body:has(.brand-lockup) .ant-modal-content,
html body:has(.brand-lockup) .ant-drawer-content,
html body:has(.brand-lockup) .ant-dropdown,
html body:has(.brand-lockup) .ant-dropdown-menu,
html body:has(.brand-lockup) .ant-select-dropdown,
html body:has(.brand-lockup) .modal-box,
html body:has(.brand-lockup) .modal-beautiful {
  border: 1px solid var(--lin-line-strong) !important;
  border-radius: var(--lin-radius-lg) !important;
  background: var(--lin-surface-2) !important;
  color: var(--lin-ink-muted) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58) !important;
}

html body:has(.brand-lockup) .ant-modal-header,
html body:has(.brand-lockup) .ant-modal-footer,
html body:has(.brand-lockup) .modal-head,
html body:has(.brand-lockup) .modal-footer {
  border-color: var(--lin-line) !important;
  background: transparent !important;
}

html body:has(.brand-lockup) .ant-modal-title,
html body:has(.brand-lockup) .modal-head,
html body:has(.brand-lockup) .modal-box h3,
html body:has(.brand-lockup) .modal-box h4 {
  color: var(--lin-ink) !important;
  font-weight: 600 !important;
}

html body:has(.brand-lockup) .ant-modal-close,
html body:has(.brand-lockup) .modal-box button[aria-label*="关闭"] {
  color: var(--lin-ink-subtle) !important;
}

html body:has(.brand-lockup) .ant-modal-body,
html body:has(.brand-lockup) .modal-body {
  color: var(--lin-ink-muted) !important;
}

html body:has(.brand-lockup) .ant-modal input,
html body:has(.brand-lockup) .ant-modal select,
html body:has(.brand-lockup) .ant-modal textarea,
html body:has(.brand-lockup) .modal-box input,
html body:has(.brand-lockup) .modal-box select,
html body:has(.brand-lockup) .modal-box textarea {
  min-height: 36px !important;
  border: 1px solid var(--lin-line-strong) !important;
  border-radius: var(--lin-radius-sm) !important;
  background: var(--lin-surface-1) !important;
  color: var(--lin-ink-muted) !important;
}

html body:has(.brand-lockup) .ant-modal button,
html body:has(.brand-lockup) .modal-box button {
  border-radius: var(--lin-radius-sm) !important;
  box-shadow: none !important;
}

html body:has(.brand-lockup) .toast,
html body:has(.brand-lockup) .fc-center-toast,
html body:has(.brand-lockup) .ant-message-notice-content,
html body:has(.brand-lockup) .ant-notification-notice {
  border: 1px solid var(--lin-line-strong) !important;
  border-radius: var(--lin-radius-md) !important;
  background: var(--lin-surface-2) !important;
  color: var(--lin-ink) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .4) !important;
}

/* -------------------------------------------------------------------------- */
/* Responsive reflow                                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content,
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content {
    padding: 24px 22px 36px !important;
  }

  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero),
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    column-gap: 14px !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div {
    min-width: 0 !important;
  }
}

@media (max-width: 900px) {
  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout,
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-sider,
  html 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: 0 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--lin-line) !important;
  }

  html body:has(.brand-lockup) .ant-layout-sider-children {
    min-height: 0 !important;
    overflow: visible !important;
  }

  html body:has(.brand-lockup) .brand-lockup {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    padding: 12px 16px !important;
    border-bottom: 0 !important;
  }

  html body:has(.brand-lockup) .brand-lockup::after {
    display: none !important;
  }

  html body:has(.brand-lockup) .brand-lockup-logo {
    flex: 0 0 28px !important;
    width: 28px !important;
    height: 28px !important;
  }

  html body:has(.brand-lockup) .brand-lockup-sub {
    display: none !important;
  }

  html body:has(.brand-lockup) .ant-menu.ant-menu-inline {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 5px 10px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
  }

  html body:has(.brand-lockup) .ant-menu.ant-menu-inline > .ant-menu-item,
  html body:has(.brand-lockup) .ant-menu.ant-menu-inline > .ant-menu-submenu {
    flex: 0 0 auto !important;
    margin: 0 3px !important;
  }

  html body:has(.brand-lockup) .ant-menu-item,
  html body:has(.brand-lockup) .ant-menu-submenu-title {
    height: 32px !important;
    line-height: 32px !important;
  }

  html body:has(.brand-lockup) .ant-layout-header,
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout-header {
    height: auto !important;
    min-height: 52px !important;
    padding: 9px 14px !important;
  }

  html body:has(.brand-lockup) .ant-layout-header > div:first-child::before {
    display: none !important;
  }

  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content,
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    padding: 20px 16px 32px !important;
    overflow: auto !important;
  }

  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero),
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  html body:has(.brand-lockup) .dashboard-hero,
  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"],
  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"] {
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-wrap"][style*="margin-bottom"] > div > div {
    min-height: 74px !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"] > div:first-child,
  html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child {
    position: static !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important;
  }
}

@media (max-width: 1440px) and (min-width: 901px) {
  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header,
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout-header {
    padding-inline: 16px !important;
    gap: 12px !important;
  }

  html body:has(.brand-lockup) .ant-layout-header > div:first-child {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 44% !important;
    overflow: hidden !important;
  }

  html body:has(.brand-lockup) .ant-layout-header > div:first-child::before {
    flex: 0 0 auto !important;
  }

  html body:has(.brand-lockup) .ant-layout-header > div:nth-child(2) {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  html body:has(.brand-lockup) .ant-layout-header > div:nth-child(2) > * {
    flex: 0 0 auto !important;
  }
}

@media (max-width: 560px) {
  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header,
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout-header {
    padding: 8px 12px !important;
  }

  html body:has(.brand-lockup) .ant-layout-header > div:nth-child(2) {
    gap: 6px !important;
  }

  html body:has(.brand-lockup) .ant-layout-header > div:nth-child(2) > * {
    max-width: 42vw !important;
  }

  html body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content,
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout > .ant-layout-content {
    padding: 16px 12px 26px !important;
  }

  html body:has(.brand-lockup) .dashboard-hero {
    min-height: 124px !important;
    padding: 22px 20px !important;
    border-radius: var(--lin-radius-md) !important;
  }

  html body:has(.brand-lockup) .dashboard-hero h1 {
    font-size: 28px !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div {
    min-width: 0 !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="flex-direction: column"] > div:first-child,
  html body:has(.brand-lockup) .dashboard-hero ~ div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child {
    margin-right: 0 !important;
    padding: 7px !important;
  }

  html body:has(.brand-lockup) .dashboard-hero ~ div[style*="grid-template-columns"] > div > div[style*="border-bottom"] {
    padding-inline: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body:has(.brand-lockup) *,
  html body:has(.brand-lockup) *::before,
  html body:has(.brand-lockup) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}
/* 20260906: keep overview device metrics above the device workspace. */
@media (min-width: 901px) {
  html body:has(.brand-lockup) .ant-layout-content:has(> .dashboard-hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "metrics" "workspace" !important;
    align-content: start !important;
    align-items: start !important;
    gap: 18px !important;
  }

  html body:has(.brand-lockup) .ant-layout-content:has(> .dashboard-hero)
    > div[style*="flex-wrap"][style*="margin-bottom"] {
    grid-area: metrics !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
  }

  html body:has(.brand-lockup) .ant-layout-content:has(> .dashboard-hero)
    > div[style*="flex-wrap"][style*="margin-bottom"] > div {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
  }

  html body:has(.brand-lockup) .ant-layout-content:has(> .dashboard-hero)
    > div:has(> div:first-child input[placeholder*="搜索设备"]) {
    grid-area: workspace !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}
/* 20260906: final specificity override for the live Ant Layout tree. */
@media (min-width: 901px) {
  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout.ant-layout-has-sider > .ant-layout-content:has(> .dashboard-hero) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    grid-template-areas: "metrics" "workspace" !important;
    gap: 18px !important;
  }

  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout.ant-layout-has-sider > .ant-layout-content:has(> .dashboard-hero)
    > div[style*="flex-wrap"][style*="margin-bottom"] {
    grid-area: metrics !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    width: auto !important;
    margin: 0 !important;
  }

  html body:has(.brand-lockup) #root > .ant-app > .ant-layout > .ant-layout.ant-layout-has-sider > .ant-layout-content:has(> .dashboard-hero)
    > div:has(> div:first-child input[placeholder*="搜索设备"]) {
    grid-area: workspace !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}