/*
 * Authenticated dashboard visual draft.
 *
 * This file is intentionally standalone. It does not change component markup,
 * handlers, navigation, API calls, or inline data. The scope is anchored to
 * .brand-lockup, which only exists in the authenticated Fisher shell.
 */

html[data-theme="dark"] body:has(.brand-lockup) {
  --dash-bg: #070b12;
  --dash-bg-deep: #05080d;
  --dash-surface: #0d131c;
  --dash-surface-raised: #111a26;
  --dash-surface-hover: #162337;
  --dash-card: rgba(14, 22, 33, .94);
  --dash-card-soft: rgba(17, 28, 43, .78);
  --dash-border: #233346;
  --dash-border-strong: #334b67;
  --dash-ink: #edf5ff;
  --dash-text: #c5d3e4;
  --dash-muted: #8397ae;
  --dash-faint: #5d7087;
  --dash-blue: #4da3ff;
  --dash-blue-strong: #2d7eea;
  --dash-cyan: #67d5ff;
  --dash-green: #4bd39b;
  --dash-amber: #e6b15d;
  --dash-red: #ff7d91;
  --dash-radius: 16px;
  --dash-shadow: 0 18px 42px rgba(0, 0, 0, .28);
  background: var(--dash-bg) !important;
  color: var(--dash-ink) !important;
}

/* The authenticated shell is an Ant Layout with no dashboard-root class. */
html[data-theme="dark"] body:has(.brand-lockup) #root,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content {
  background: var(--dash-bg) !important;
  color: var(--dash-text) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-layout {
  min-height: 100vh !important;
}

/* Utility bar: restrained, dense, and separated from the work surface. */
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
  height: 64px !important;
  padding: 0 28px !important;
  display: flex !important;
  align-items: center !important;
  background: rgba(8, 13, 21, .88) !important;
  border-bottom: 1px solid var(--dash-border) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header > div {
  min-width: 0 !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header span,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header .ant-select-selection-item {
  color: var(--dash-text) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header .ant-select-selector,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header .ant-input,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header .ant-input-affix-wrapper {
  background: rgba(14, 24, 37, .8) !important;
  border-color: var(--dash-border) !important;
  color: var(--dash-text) !important;
  box-shadow: none !important;
}

/* Left rail. Keep the full labels visible so every existing action remains
 * discoverable and keyboard/click targets are unchanged. */
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-sider,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-sider-children {
  background: rgba(10, 16, 25, .94) !important;
  border-right: 1px solid var(--dash-border) !important;
  box-shadow: 10px 0 28px rgba(0, 0, 0, .14) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup {
  padding: 28px 24px 22px !important;
  margin-bottom: 6px !important;
  border-bottom: 1px solid var(--dash-border) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-logo {
  width: 34px !important;
  height: 34px !important;
  margin-bottom: 16px !important;
  object-fit: contain !important;
  filter: saturate(.8) brightness(1.15) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-name {
  color: var(--dash-ink) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-sub {
  margin-top: 5px !important;
  color: var(--dash-muted) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-menu,
html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-dark,
html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-dark .ant-menu-sub {
  padding: 10px 10px 18px !important;
  background: transparent !important;
  color: var(--dash-muted) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item,
html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-submenu-title {
  height: 40px !important;
  line-height: 40px !important;
  margin: 4px 0 !important;
  padding-inline: 13px !important;
  border-radius: 10px !important;
  color: var(--dash-muted) !important;
  transition: background .18s ease, color .18s ease, transform .18s ease !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item:hover,
html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-submenu-title:hover {
  color: var(--dash-ink) !important;
  background: var(--dash-surface-hover) !important;
  transform: translateX(2px) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item-selected {
  color: #fff !important;
  background: linear-gradient(100deg, rgba(45, 126, 234, .92), rgba(77, 163, 255, .72)) !important;
  box-shadow: 0 8px 20px rgba(45, 126, 234, .2) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-item-selected::after {
  display: none !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-menu-submenu .ant-menu {
  margin: 2px 0 7px !important;
  padding: 2px 0 2px 12px !important;
  border-left: 1px solid var(--dash-border-strong) !important;
}

/* Content canvas and editorial hero. */
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content {
  min-width: 0 !important;
  padding: 30px 34px 42px !important;
  overflow: auto !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero,
html[data-theme="dark"] body:has(.brand-lockup) .rc-header,
html[data-theme="dark"] body:has(.brand-lockup) .rc-header-elevated {
  position: relative !important;
  min-height: 156px !important;
  margin: 0 0 20px !important;
  padding: 28px 32px !important;
  display: flex !important;
  align-items: flex-end !important;
  overflow: hidden !important;
  background:
    linear-gradient(115deg, rgba(21, 51, 84, .58), rgba(11, 18, 29, .92) 58%),
    var(--dash-surface) !important;
  border: 1px solid var(--dash-border-strong) !important;
  border-radius: 20px !important;
  box-shadow: var(--dash-shadow) !important;
  color: var(--dash-ink) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 0 58% !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(135deg, rgba(103, 213, 255, .08) 0 1px, transparent 1px 18px) !important;
  mask-image: linear-gradient(90deg, transparent, #000) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero > div,
html[data-theme="dark"] body:has(.brand-lockup) .rc-header > *,
html[data-theme="dark"] body:has(.brand-lockup) .rc-header-elevated > * {
  position: relative !important;
  z-index: 1 !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero h1 {
  margin: 8px 0 0 !important;
  color: var(--dash-ink) !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  line-height: 1.08 !important;
  font-weight: 560 !important;
  letter-spacing: .01em !important;
  text-shadow: 0 4px 24px rgba(0, 0, 0, .28) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .hero-kicker {
  color: var(--dash-cyan) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .22em !important;
}

/* Metric rail. The row and tile wrappers are anonymous, so use the stable
 * hero sibling relationship instead of relying on generated class names. */
html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(112px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 20px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] > div {
  min-width: 0 !important;
  flex: none !important;
}

html[data-theme="dark"] 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: var(--dash-card) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] > div > div > div[style*="border-radius"] {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  background: rgba(77, 163, 255, .1) !important;
  border: 1px solid rgba(103, 213, 255, .28) !important;
  border-radius: 9px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] span:first-child {
  color: var(--dash-muted) !important;
  font-size: 11px !important;
  letter-spacing: .02em !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] span:nth-child(2) {
  color: var(--dash-ink) !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

/* Device workspace: toolbar, status rail, and list surface. */
html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] {
  gap: 14px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child {
  position: sticky !important;
  top: 76px !important;
  z-index: 25 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px !important;
  background: rgba(11, 18, 29, .86) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .18) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child input,
html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child select {
  height: 38px !important;
  box-sizing: border-box !important;
  background: var(--dash-surface-raised) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 9px !important;
  color: var(--dash-text) !important;
  outline: none !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child input:focus,
html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child select:focus {
  border-color: var(--dash-blue) !important;
  box-shadow: 0 0 0 3px rgba(77, 163, 255, .14) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child button {
  min-height: 38px !important;
  padding: 0 12px !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 9px !important;
  background: var(--dash-surface-raised) !important;
  color: var(--dash-text) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child button:hover {
  border-color: var(--dash-blue) !important;
  color: var(--dash-ink) !important;
  background: var(--dash-surface-hover) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:nth-child(2) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 2px !important;
  border-top: 0 !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:nth-child(2) button {
  min-height: 32px !important;
  padding: 0 11px !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--dash-muted) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:nth-child(2) button:hover {
  border-color: var(--dash-blue) !important;
  color: var(--dash-ink) !important;
  background: rgba(77, 163, 255, .1) !important;
}

/* Grid view. cue() intentionally has no class, so the grid's inline track
 * declaration is the stable hook. */
html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 14px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div {
  min-width: 0 !important;
  overflow: hidden !important;
  background: var(--dash-card) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  box-shadow: var(--dash-shadow) !important;
  transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div:hover {
  background: var(--dash-card-soft) !important;
  border-color: var(--dash-border-strong) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 22px 46px rgba(0, 0, 0, .34) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div > div[style*="border-bottom"] {
  background: transparent !important;
  border-color: var(--dash-border) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div > div[style*="flex-wrap"] {
  background: rgba(77, 163, 255, .04) !important;
  border-top: 1px solid var(--dash-border) !important;
  border-bottom: 1px solid var(--dash-border) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div p {
  color: var(--dash-text) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div > div[style*="border-bottom"] p {
  color: var(--dash-text) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div > div[style*="border-bottom"] button:hover {
  background: rgba(77, 163, 255, .1) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] > div input {
  color: var(--dash-text) !important;
}

/* Table view and pagination share the same surface as the grid. */
html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="overflow-x"] {
  overflow-x: auto !important;
  background: var(--dash-card) !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: var(--dash-radius) !important;
  box-shadow: var(--dash-shadow) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="overflow-x"] table {
  min-width: 1060px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="overflow-x"] th {
  padding: 12px 13px !important;
  background: var(--dash-surface-raised) !important;
  border-bottom: 1px solid var(--dash-border) !important;
  color: var(--dash-muted) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="overflow-x"] td {
  padding: 13px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(35, 51, 70, .7) !important;
  color: var(--dash-text) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="overflow-x"] tr:hover td {
  background: rgba(77, 163, 255, .06) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="justify-content: space-between"][style*="margin-top"] {
  padding: 2px 4px !important;
  color: var(--dash-muted) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="justify-content: space-between"][style*="margin-top"] button,
html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="justify-content: space-between"][style*="margin-top"] select {
  min-height: 32px !important;
  border: 1px solid var(--dash-border) !important;
  border-radius: 8px !important;
  background: var(--dash-surface-raised) !important;
  color: var(--dash-text) !important;
}

/* Shared overlays and feedback retain the dark glass language. */
html[data-theme="dark"] body:has(.brand-lockup) .ant-modal-content,
html[data-theme="dark"] body:has(.brand-lockup) .ant-drawer-content,
html[data-theme="dark"] body:has(.brand-lockup) .ant-dropdown-menu,
html[data-theme="dark"] body:has(.brand-lockup) .ant-select-dropdown {
  background: var(--dash-surface-raised) !important;
  border: 1px solid var(--dash-border-strong) !important;
  border-radius: 14px !important;
  color: var(--dash-text) !important;
  box-shadow: var(--dash-shadow) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-modal-mask,
html[data-theme="dark"] body:has(.brand-lockup) .ant-drawer-mask {
  background: rgba(2, 5, 10, .72) !important;
  backdrop-filter: blur(8px) !important;
}

/* Responsive rules preserve the same ordering and all existing controls. */
@media (max-width: 1180px) {
  html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content { padding: 24px 22px 36px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] {
    grid-template-columns: repeat(4, minmax(130px, 1fr)) !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header { padding: 0 20px !important; }
}

@media (max-width: 820px) {
  html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-header {
    height: auto !important;
    min-height: 58px !important;
    padding: 10px 14px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content { padding: 18px 14px 28px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero { min-height: 132px !important; padding: 24px 22px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero h1 { font-size: 30px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div:first-child {
    position: static !important;
    flex-wrap: wrap !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-direction: column"][style*="gap: 16px"] > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Keep narrow-screen utility controls inside the viewport.  Ant Space uses
 * max-content sizing for the currency and account groups, so the desktop
 * widths can otherwise expand the document even when the header itself is
 * responsive. */
@media (max-width: 820px) {
  html[data-theme="dark"] body:has(.brand-lockup),
  html[data-theme="dark"] body:has(.brand-lockup) #root,
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app {
    overflow-x: hidden !important;
  }

  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header,
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header > div:last-child,
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header > div:last-child {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    row-gap: 4px !important;
    overflow: hidden !important;
  }

  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header > div:last-child > *,
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header > div:last-child > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header > div:last-child > div:nth-child(4),
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header > div:last-child > div:nth-child(4) {
    flex: 1 1 210px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 560px) {
  html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup { padding: 20px 17px 16px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-name { font-size: 19px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero { border-radius: 14px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] { gap: 8px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero ~ div[style*="display: flex"][style*="flex-wrap: wrap"] > div > div { min-height: 92px !important; padding: 12px !important; }
}

/* Final composition pass: the overview is intentionally re-ordered into a
 * command workspace.  These rules only affect presentation; React state,
 * event handlers, and all existing controls remain untouched. */
html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-height: calc(100vh - 64px) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-sider {
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
  flex: 0 0 248px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 26px 30px 44px !important;
  overflow: auto !important;
}

/* Add a quiet product marker to the utility bar without changing its DOM. */
html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header {
  position: relative !important;
  height: 68px !important;
  padding-left: 280px !important;
  background: rgba(5, 10, 17, .92) !important;
  border-bottom-color: rgba(103, 213, 255, .16) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header::before {
  content: "LIGUAN / CONTROL PLANE" !important;
  position: absolute !important;
  left: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--dash-cyan) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  white-space: nowrap !important;
  opacity: .86 !important;
  pointer-events: none !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header > div:last-child {
  gap: 12px !important;
}

/* Compact brand lockup and a slightly more editorial navigation rhythm. */
html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 12px !important;
  align-items: center !important;
  padding: 24px 22px 22px !important;
  text-align: left !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-logo {
  grid-row: 1 / span 2 !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  border-radius: 12px !important;
  filter: saturate(.86) brightness(1.12) !important;
  box-shadow: 0 0 0 1px rgba(103, 213, 255, .22), 0 10px 24px rgba(45, 126, 234, .22) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-name {
  align-self: end !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  letter-spacing: .12em !important;
  margin: 0 !important;
  color: var(--dash-ink) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-sub {
  align-self: start !important;
  margin: 4px 0 0 !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  color: var(--dash-muted) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-menu {
  padding: 12px 11px 20px !important;
}

/* Overview grid: hero first, device workspace left, metrics rail right. */
html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 252px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "hero hero" "workspace metrics" !important;
  align-content: start !important;
  align-items: start !important;
  gap: 18px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > .dashboard-hero {
  grid-area: hero !important;
  margin: 0 !important;
  min-height: 142px !important;
  padding: 26px 30px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"] {
  grid-area: metrics !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: auto !important;
  margin: 0 !important;
  align-self: start !important;
}

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

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > .toast {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

/* Metric cards become a narrow operational rail rather than a seven-card
 * banner, which materially changes scan order while preserving their values. */
html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"] > div > div {
  min-height: 86px !important;
  padding: 13px 14px !important;
  border-radius: 13px !important;
  background: linear-gradient(145deg, rgba(17, 29, 45, .96), rgba(10, 18, 28, .96)) !important;
  border-color: rgba(103, 213, 255, .15) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .18) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"] > div > div > div[style*="border-radius"] {
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(77, 163, 255, .12) !important;
  border-color: rgba(103, 213, 255, .26) !important;
}

/* Device workspace panel treatment. */
html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child {
  position: sticky !important;
  top: 86px !important;
  z-index: 25 !important;
  padding: 11px !important;
  border: 1px solid rgba(103, 213, 255, .16) !important;
  border-radius: 14px !important;
  background: rgba(8, 15, 24, .91) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:nth-child(2) {
  padding: 0 2px !important;
  border-top: 0 !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 13px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div {
  border-radius: 17px !important;
  background: linear-gradient(155deg, rgba(16, 28, 43, .98), rgba(8, 15, 24, .98)) !important;
  border: 1px solid rgba(103, 213, 255, .14) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(103, 213, 255, .42) !important;
  box-shadow: 0 22px 42px rgba(0, 0, 0, .34), 0 0 0 1px rgba(77, 163, 255, .1) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div > div[style*="border-bottom"] {
  border-color: rgba(103, 213, 255, .13) !important;
  background: transparent !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div > div[style*="flex-wrap"] {
  border-top-color: rgba(103, 213, 255, .1) !important;
  border-bottom-color: rgba(103, 213, 255, .1) !important;
  background: rgba(77, 163, 255, .045) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div button {
  border-radius: 8px !important;
}

/* The table view has a different anonymous wrapper in the bundle; target the
 * actual table rather than the historical rc-table-wrap class. */
html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:has(> table) {
  overflow-x: auto !important;
  border: 1px solid rgba(103, 213, 255, .15) !important;
  border-radius: 16px !important;
  background: rgba(12, 21, 32, .92) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:has(> table) table {
  min-width: 920px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:has(> table) th {
  padding: 12px 13px !important;
  background: rgba(17, 29, 45, .92) !important;
  border-bottom: 1px solid rgba(103, 213, 255, .14) !important;
  color: var(--dash-cyan) !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
}

html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:has(> table) td {
  padding: 13px !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(35, 51, 70, .72) !important;
  color: var(--dash-text) !important;
}

/* Unified non-overview page headers and surfaces. */
html[data-theme="dark"] body:has(.brand-lockup) .rc-header,
html[data-theme="dark"] body:has(.brand-lockup) .rc-header-elevated {
  min-height: 82px !important;
  align-items: center !important;
  padding: 20px 24px !important;
  margin: 0 0 18px !important;
  border-radius: 16px !important;
  background: linear-gradient(120deg, rgba(18, 42, 67, .78), rgba(10, 18, 28, .96)) !important;
  border: 1px solid rgba(103, 213, 255, .16) !important;
  color: var(--dash-ink) !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .panel,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .ctrl-tab-panel,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .ctrl-tab-content,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .admin-add-form,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .inj-panel,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .fc-panel,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .log-panel,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .account-panel,
html[data-theme="dark"] body:has(.brand-lockup) .ant-layout-content .telegram-panel {
  background: rgba(12, 21, 32, .82) !important;
  border-color: rgba(103, 213, 255, .14) !important;
  border-radius: 16px !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .18) !important;
}

/* Responsive reflow: preserve touch targets and expose all navigation items. */
@media (max-width: 1120px) {
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content {
    padding: 22px 20px 34px !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
    grid-template-columns: minmax(0, 1fr) 220px !important;
    gap: 14px !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content {
    padding: 18px 14px 28px !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > .dashboard-hero { order: 1 !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"] { order: 2 !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) { order: 3 !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header { height: auto !important; min-height: 58px !important; padding: 10px 14px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header::before { display: none !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout-header > div:first-child { margin-left: 0 !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child { position: static !important; }
}

@media (max-width: 820px) {
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-sider {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-sider .ant-layout-sider-children {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 10 !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup {
    flex: 0 0 auto !important;
    grid-template-columns: 32px minmax(0, 1fr) !important;
    padding: 12px 14px !important;
    border-bottom: 0 !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-logo { width: 32px !important; height: 32px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-name { font-size: 16px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .brand-lockup-sub { display: none !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-menu.ant-menu-inline {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 7px 8px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    white-space: nowrap !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-menu.ant-menu-inline > .ant-menu-item,
  html[data-theme="dark"] body:has(.brand-lockup) .ant-menu.ant-menu-inline > .ant-menu-submenu { flex: 0 0 auto !important; display: inline-flex !important; margin: 0 3px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-menu.ant-menu-inline .ant-menu-sub { white-space: normal !important; }
}

/* Ant App wrapper compatibility.  Recent Ant builds place the authenticated
 * Layout below #root > .ant-app; keep the same composition on that stable
 * wrapper so the shell remains responsive across bundle variants. */
html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout {
  display: grid !important;
  grid-template-columns: 248px minmax(0, 1fr) !important;
  align-items: stretch !important;
  min-height: calc(100vh - 68px) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-sider {
  width: 248px !important;
  min-width: 248px !important;
  max-width: 248px !important;
  flex: 0 0 248px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content {
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 26px 30px 44px !important;
  overflow: auto !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header {
  position: relative !important;
  height: 68px !important;
  padding-left: 280px !important;
  background: rgba(5, 10, 17, .92) !important;
  border-bottom-color: rgba(103, 213, 255, .16) !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header::before {
  content: "LIGUAN / CONTROL PLANE" !important;
  position: absolute !important;
  left: 30px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--dash-cyan) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  white-space: nowrap !important;
  opacity: .86 !important;
  pointer-events: none !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 252px !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  grid-template-areas: "hero hero" "workspace metrics" !important;
  align-content: start !important;
  align-items: start !important;
  gap: 18px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > .dashboard-hero {
  grid-area: hero !important;
  margin: 0 !important;
}

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

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .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[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) {
  grid-area: workspace !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > .toast {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] {
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)) !important;
  gap: 13px !important;
}

html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div[style*="grid-template-columns"] > div {
  border-radius: 17px !important;
  background: linear-gradient(155deg, rgba(16, 28, 43, .98), rgba(8, 15, 24, .98)) !important;
  border: 1px solid rgba(103, 213, 255, .14) !important;
  box-shadow: 0 16px 32px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

@media (max-width: 900px) {
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header {
    height: auto !important;
    min-height: 58px !important;
    padding: 10px 14px !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout-header::before { display: none !important; }
}

@media (max-width: 820px) {
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .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;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-sider .ant-layout-sider-children {
    overflow: visible !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: stretch !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
    grid-template-columns: none !important;
  }
}

@media (max-width: 560px) {
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero { min-height: 122px !important; padding: 22px 20px !important; border-radius: 14px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) .dashboard-hero h1 { font-size: 27px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"] { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"] > div > div { min-height: 78px !important; padding: 11px !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child { overflow-x: auto !important; }
  html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) > div:first-child > * { flex: 0 0 auto !important; }
}

/* Ant Layout assigns width: 0 to direct children of a has-sider layout so
 * its normal flex layout can negotiate widths. The dashboard shell switches
 * that row to grid/flex, so the main content must explicitly stretch into
 * the second track on both current (.ant-app) and legacy (#root) shells. */
html[data-theme="dark"] body:has(.brand-lockup) #root > .ant-layout > .ant-layout.ant-layout-has-sider > .ant-layout-content,
html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout.ant-layout-has-sider > .ant-layout-content {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) {
    align-items: stretch !important;
  }
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > .dashboard-hero,
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div[style*="flex-wrap"][style*="margin-bottom"],
  html[data-theme="dark"] body:has(.brand-lockup) .ant-app > .ant-layout > .ant-layout > .ant-layout-content:has(> .dashboard-hero) > div:has(> div:first-child input[placeholder*="搜索设备"]) {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }
}