/*
 * Admin UI V2 — compact operations console.
 * This is an isolated presentation layer. Existing business modules, selectors,
 * requests and event handlers remain owned by their original files.
 */

:root {
  color-scheme: light;
  --admin-v2-primary: #1677ff;
  --admin-v2-primary-strong: #0958d9;
  --admin-v2-primary-soft: #eaf3ff;
  --admin-v2-primary-faint: #f4f8ff;
  --admin-v2-canvas: #f5f7fa;
  --admin-v2-surface: #ffffff;
  --admin-v2-surface-soft: #f8fafc;
  --admin-v2-text: #111827;
  --admin-v2-text-soft: #1f2937;
  --admin-v2-muted: #64748b;
  --admin-v2-muted-strong: #475569;
  --admin-v2-border: #d8dee8;
  --admin-v2-border-soft: #e7ebf1;
  --admin-v2-success: #168247;
  --admin-v2-warning: #d97706;
  --admin-v2-danger: #dc2626;
  --admin-v2-radius: 8px;
  --admin-v2-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .045);
  --admin-v2-topbar-height: 56px;
  --admin-v2-sidebar-width: 216px;
  --admin-v2-page-gap: 12px;
  --admin-v2-control-height: 34px;
  --syc-admin-primary: var(--admin-v2-primary);
  --syc-admin-primary-strong: var(--admin-v2-primary-strong);
  --syc-admin-workspace: var(--admin-v2-canvas);
  --syc-admin-surface: var(--admin-v2-surface);
  --syc-admin-surface-soft: var(--admin-v2-surface-soft);
  --syc-admin-text: var(--admin-v2-text);
  --syc-admin-text-soft: var(--admin-v2-text-soft);
  --syc-admin-muted: var(--admin-v2-muted);
  --syc-admin-muted-strong: var(--admin-v2-muted-strong);
  --syc-admin-border: var(--admin-v2-border);
  --syc-admin-border-strong: var(--admin-v2-border);
  --syc-admin-border-soft: var(--admin-v2-border-soft);
  --syc-admin-shadow: var(--admin-v2-shadow);
}

html,
body,
#admin-root {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--admin-v2-canvas) !important;
}

body {
  color: var(--admin-v2-text);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"],
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

:where(button, [role="button"], a, input, select, textarea):focus-visible {
  outline: 2px solid var(--admin-v2-primary) !important;
  outline-offset: 2px;
}

:where(button, input, select, textarea):disabled {
  opacity: .5;
  cursor: not-allowed !important;
}

/* Global shell */
:root .adminShell,
:root[data-ui-theme="light"] .adminShell,
:root[data-ui-theme="dark"] .adminShell {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--admin-v2-sidebar-width) minmax(0, 1fr);
  overflow: hidden;
  background: var(--admin-v2-canvas) !important;
  color: var(--admin-v2-text) !important;
}

:root .adminMain,
:root[data-ui-theme="light"] .adminMain,
:root[data-ui-theme="dark"] .adminMain {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--admin-v2-topbar-height) minmax(0, 1fr);
  overflow: hidden;
  background: var(--admin-v2-canvas) !important;
  box-shadow: none !important;
}

:root .adminTopbar,
:root[data-ui-theme="light"] .adminTopbar,
:root[data-ui-theme="dark"] .adminTopbar {
  position: relative;
  z-index: 40;
  min-width: 0;
  min-height: var(--admin-v2-topbar-height);
  height: var(--admin-v2-topbar-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 16px;
  border: 0 !important;
  border-bottom: 1px solid var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

.adminTopbarContext {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.adminTopbarTitle {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--admin-v2-text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminRuntimeStatus {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--admin-v2-border-soft);
  border-radius: 7px;
  background: var(--admin-v2-surface-soft);
  color: var(--admin-v2-muted-strong);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.adminRuntimeStatus::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--admin-v2-success);
  content: "";
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-v2-success) 14%, transparent);
}

:root .adminTopbar .profileMenu {
  flex: 0 0 auto;
  margin-left: auto;
}

:root .adminProfile,
:root[data-ui-theme="light"] .adminProfile,
:root[data-ui-theme="dark"] .adminProfile {
  min-height: 34px;
  height: 34px;
  gap: 8px;
  padding: 0 10px 0 4px;
  border: 1px solid transparent !important;
  border-radius: 7px;
  background: transparent !important;
  color: var(--admin-v2-text-soft) !important;
  box-shadow: none !important;
}

:root .adminProfile:hover,
:root .adminProfile[aria-expanded="true"] {
  border-color: var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface-soft) !important;
}

:root .adminProfile > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--admin-v2-primary-soft) !important;
  color: var(--admin-v2-primary) !important;
}

:root .profileDropdown,
:root[data-ui-theme="light"] .profileDropdown,
:root[data-ui-theme="dark"] .profileDropdown {
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  overflow: hidden;
  border: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: var(--admin-v2-radius) !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text) !important;
  box-shadow: var(--admin-v2-shadow) !important;
}

:root .adminNotice {
  position: fixed;
  z-index: 2147483590;
  top: 7px;
  left: 50%;
  right: auto;
  max-width: min(480px, calc(100vw - 32px));
  margin: 0 !important;
  transform: translateX(-50%);
}

.adminUiRequestError {
  position: fixed;
  z-index: 2147483600;
  top: 18px;
  left: 50%;
  display: flex;
  max-width: min(560px, calc(100vw - 32px));
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border: 1px solid #fecaca;
  border-radius: 8px;
  background: #fff1f2;
  color: #991b1b;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  transform: translateX(-50%);
  font-size: 14px;
}

.adminUiRequestError button {
  flex: 0 0 auto;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid #fca5a5;
  border-radius: 6px;
  background: #fff;
  color: #991b1b;
  cursor: pointer;
}

/* Compact sidebar */
:root .adminSidebar,
:root[data-ui-theme="light"] .adminSidebar,
:root[data-ui-theme="dark"] .adminSidebar {
  position: relative;
  z-index: 80;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 9px 12px;
  overflow: hidden;
  border: 0 !important;
  border-right: 1px solid var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

:root .adminBrand,
:root[data-ui-theme="light"] .adminBrand,
:root[data-ui-theme="dark"] .adminBrand {
  min-width: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 5px;
}

:root .adminBrand img {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  object-fit: contain;
}

:root .adminBrand strong,
:root[data-ui-theme="light"] .adminBrand strong,
:root[data-ui-theme="dark"] .adminBrand strong {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-v2-text) !important;
  font-size: 16px;
  font-weight: 820;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root .adminSidebar nav,
:root .adminSidebar nav.adminSidebarGrouped {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-content: stretch;
  gap: 2px !important;
  padding: 2px 0 10px;
  overflow: auto;
  scrollbar-width: thin;
}

:root .adminSidebarGroup {
  display: grid;
  gap: 1px;
}

:root .adminSidebar nav button,
:root .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupHeader,
:root .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupItems > button,
:root[data-ui-theme="light"] .adminSidebar nav button,
:root[data-ui-theme="dark"] .adminSidebar nav button {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 0;
  padding: 0 11px;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--admin-v2-muted-strong) !important;
  font-size: 14px;
  font-weight: 680;
  line-height: 1;
  text-align: left;
  box-shadow: none !important;
}

:root .adminSidebar nav button:hover,
:root .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupHeader:hover,
:root .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupItems > button:hover {
  background: var(--admin-v2-surface-soft) !important;
  color: var(--admin-v2-text-soft) !important;
}

:root .adminSidebar nav button.active,
:root .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupHeader.active,
:root .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupItems > button.active {
  background: var(--admin-v2-primary-soft) !important;
  color: var(--admin-v2-primary-strong) !important;
  box-shadow: inset 3px 0 0 var(--admin-v2-primary) !important;
}

:root .adminSidebar nav button svg,
:root .adminSidebarGroupIcon,
:root .adminSidebarGroupItems > button svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
  color: currentColor !important;
  stroke-width: 1.8;
}

:root .adminSidebarGroupHeader > span,
:root .adminSidebarGroupItems > button > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root .adminSidebarGroupChevron {
  width: 14px !important;
  height: 14px !important;
  margin-left: auto;
  opacity: .72;
}

:root .adminSidebarGroupItems {
  display: grid;
  gap: 1px;
  padding: 1px 0 3px;
}

:root .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupItems > button {
  min-height: 34px;
  height: 34px;
  padding-left: 34px;
  font-size: 13px;
  font-weight: 620;
}

:root .adminSidebarFoot,
:root[data-ui-theme="light"] .adminSidebarFoot,
:root[data-ui-theme="dark"] .adminSidebarFoot {
  gap: 3px;
  padding: 10px 7px 0;
  border-top: 1px solid var(--admin-v2-border-soft) !important;
  color: var(--admin-v2-muted) !important;
}

:root .adminSidebarFoot span {
  color: var(--admin-v2-primary-strong) !important;
  font-size: 12px;
}

:root .adminSidebarFoot small {
  color: var(--admin-v2-muted) !important;
  font-size: 11px;
}

.adminUiSidebarCollapse {
  width: 100%;
  min-height: 30px;
  margin-top: 5px;
  border: 1px solid var(--admin-v2-border-soft);
  border-radius: 7px;
  background: var(--admin-v2-surface-soft);
  color: var(--admin-v2-muted-strong);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
}

.adminUiSidebarCollapse:hover {
  border-color: color-mix(in srgb, var(--admin-v2-primary) 34%, var(--admin-v2-border));
  color: var(--admin-v2-primary-strong);
}

@media (min-width: 901px) {
  body.adminUiSidebarCollapsed {
    --admin-v2-sidebar-width: 68px;
  }

  body.adminUiSidebarCollapsed .adminSidebar {
    padding-inline: 8px;
  }

  body.adminUiSidebarCollapsed .adminBrand {
    justify-content: center;
    padding-inline: 0;
  }

  body.adminUiSidebarCollapsed .adminBrand strong,
  body.adminUiSidebarCollapsed .adminSidebar nav button > span,
  body.adminUiSidebarCollapsed .adminSidebarGroupHeader > span,
  body.adminUiSidebarCollapsed .adminSidebarGroupChevron,
  body.adminUiSidebarCollapsed .adminSidebarGroupItems,
  body.adminUiSidebarCollapsed .adminSidebarFoot > :not(.adminUiSidebarCollapse) {
    display: none !important;
  }

  body.adminUiSidebarCollapsed .adminSidebar nav button,
  body.adminUiSidebarCollapsed .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupHeader {
    justify-content: center;
    padding-inline: 0;
  }
}

/* Global page density */
:root .adminMain > .adminPage,
:root .adminMain > :is(
  .productTaskCenterAdminPage,
  .productCatalogAdminPage,
  .productCollectionAdminPage,
  .productAssetsAdminPage,
  .exportTemplateAdminPage,
  .exportRecordsAdminPage,
  .aiCreditsPage,
  .batchEditLibraryPage,
  .infringementLibraryPage,
  .fbmPricingPage
) {
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  gap: var(--admin-v2-page-gap) !important;
  padding: 14px 16px 20px !important;
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--admin-v2-canvas) !important;
}

:root .adminMain > .adminPage > .pageTitle {
  display: none !important;
}

:root .pageTitle h1,
:root :is(
  .productTaskCenterTitle,
  .productCatalogTitle,
  .productCollectionTitle,
  .productAssetsTitle,
  .exportTemplateTitle,
  .exportRecordsTitle,
  .aiCreditsHero,
  .batchEditLibraryHero,
  .infringementLibraryHero,
  .fbmPricingHero
) h1 {
  margin: 0;
  color: var(--admin-v2-text) !important;
  font-size: 22px !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em;
}

:root .pageTitle p,
:root :is(
  .productTaskCenterTitle,
  .productCatalogTitle,
  .productCollectionTitle,
  .productAssetsTitle,
  .exportTemplateTitle,
  .exportRecordsTitle,
  .aiCreditsHero,
  .batchEditLibraryHero,
  .infringementLibraryHero,
  .fbmPricingHero
) p {
  margin: 4px 0 0;
  color: var(--admin-v2-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

:root :is(
  .metricCard,
  .activityPanel,
  .adminTable,
  .resourcePanel,
  .resourceGpuPool,
  .resourceGpuPanel,
  .licensePanel,
  .deviceTools,
  .deviceAuthTable,
  .licenseRecordTable,
  .productTaskCenterHero,
  .productTaskCenterToolbar,
  .productTaskCenterNotice,
  .productTaskCenterPanel,
  .productCatalogHero,
  .productCatalogToolbar,
  .productCatalogPanel,
  .productCollectionHero,
  .productCollectionToolbar,
  .productCollectionPanel,
  .productAssetsHero,
  .productAssetsToolbar,
  .productAssetsPanel,
  .exportTemplateHero,
  .exportTemplateToolbar,
  .exportTemplatePanel,
  .exportRecordsHero,
  .exportRecordsToolbar,
  .exportRecordsPanel,
  .aiCreditsPanel,
  .batchEditLibraryPanel,
  .infringementLibraryPanel,
  .fbmPricingPanel
) {
  border-color: var(--admin-v2-border-soft) !important;
  border-radius: var(--admin-v2-radius) !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text) !important;
  box-shadow: var(--admin-v2-shadow) !important;
}

:root :is(
  .tableTools,
  .sessionFilterBar,
  .productTaskCenterToolbar,
  .productCatalogToolbar,
  .productCollectionToolbar,
  .productAssetsToolbar,
  .exportTemplateToolbar,
  .exportRecordsToolbar,
  .aiCreditsToolbar,
  .batchEditLibraryToolbar,
  .infringementLibraryToolbar,
  .fbmPricingToolbar
) {
  min-height: 44px;
  gap: 8px !important;
  padding: 6px 10px !important;
  border: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: var(--admin-v2-radius) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

:root :is(input, select, textarea),
:root :is(.adminSearch, .tableTools label) {
  border-color: var(--admin-v2-border) !important;
  border-radius: 7px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text) !important;
  box-shadow: none !important;
}

:root :is(input, select):not([type="checkbox"]):not([type="radio"]),
:root :is(.tableTools label, .adminSearch) {
  min-height: var(--admin-v2-control-height);
  height: var(--admin-v2-control-height);
}

:root :is(input, select, textarea):focus {
  border-color: var(--admin-v2-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-v2-primary) 16%, transparent) !important;
}

:root :is(
  .adminExportButton,
  .outlineAction,
  .tableTools > button,
  .rowActions button,
  .resourceToolbar button,
  .productTaskCenterAdminPage button,
  .productCatalogAdminPage button,
  .productCollectionAdminPage button,
  .productAssetsAdminPage button,
  .exportTemplateAdminPage button,
  .exportRecordsAdminPage button
) {
  min-height: var(--admin-v2-control-height);
  border-radius: 7px !important;
  box-shadow: none !important;
}

:root :is(.adminExportButton, .primaryAction, button.primary) {
  border-color: var(--admin-v2-primary) !important;
  background: var(--admin-v2-primary) !important;
  color: #fff !important;
}

:root :is(.adminExportButton, .primaryAction, button.primary):hover:not(:disabled) {
  border-color: var(--admin-v2-primary-strong) !important;
  background: var(--admin-v2-primary-strong) !important;
}

:root :is(.activityRow, .adminTableRow, .infoTableRow) {
  min-height: 48px;
  border-bottom-color: var(--admin-v2-border-soft) !important;
  color: var(--admin-v2-text-soft) !important;
  font-size: 13px;
}

:root :is(.activityRow.header, .adminTableRow.header, .infoTableRow.header) {
  min-height: 38px;
  background: var(--admin-v2-surface-soft) !important;
  color: var(--admin-v2-muted-strong) !important;
  font-size: 12px;
  box-shadow: inset 0 -1px 0 var(--admin-v2-border-soft) !important;
}

:root table {
  border-collapse: separate;
  border-spacing: 0;
}

:root table th {
  height: 38px;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  background: var(--admin-v2-surface-soft) !important;
  color: var(--admin-v2-muted-strong) !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}

:root table td {
  min-height: 46px;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
  border-color: var(--admin-v2-border-soft) !important;
  color: var(--admin-v2-text-soft) !important;
  font-size: 13px !important;
}

/* N04-N06: dense page families without changing business structures. */
:root .adminMain > :is(
  .productTaskCenterAdminPage,
  .productCatalogAdminPage,
  .productCollectionAdminPage,
  .productAssetsAdminPage,
  .exportTemplateAdminPage,
  .exportRecordsAdminPage,
  .aiCreditsPage,
  .batchEditLibraryPage,
  .infringementLibraryPage,
  .fbmPricingPage
) {
  width: 100%;
  height: 100% !important;
  max-height: 100%;
  box-sizing: border-box;
}

:root :is(
  .productTaskCenterHero,
  .productCatalogHero,
  .productCollectionHero,
  .productAssetsHero,
  .exportTemplateHero,
  .exportRecordsHeader,
  .aiCreditsHero,
  .batchEditLibraryHero,
  .infringementLibraryHero,
  .fbmPricingHero
) {
  min-height: 36px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root :is(
  .productTaskCenterTitle,
  .productCatalogTitle,
  .productCollectionTitle,
  .productAssetsTitle,
  .exportTemplateTitle,
  .exportRecordsTitle
) {
  display: none !important;
}

:root :is(
  .aiCreditsHero,
  .batchEditLibraryHero,
  .infringementLibraryHero,
  .fbmPricingHero
) > :first-child:has(h1) {
  display: none !important;
}

:root :is(
  .productTaskCenterActions,
  .productCatalogActions,
  .productCollectionActions,
  .productAssetsPageActions,
  .exportTemplateActions,
  .exportRecordsActions,
  .aiCreditsHeroActions,
  .batchEditLibraryHeroActions,
  .infringementLibraryHeroActions,
  .fbmPricingHeroActions
) {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px !important;
  margin: 0 !important;
}

:root :is(
  .metricGrid,
  .sessionSummaryStrip,
  .deviceSummaryStrip,
  .productTaskCenterMetrics,
  .productCatalogMetrics,
  .productCollectionMetrics,
  .productAssetsMetrics,
  .exportTemplateMetrics,
  .exportRecordsMetrics
) {
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

:root :is(
  .sessionSummaryStrip article,
  .deviceSummaryStrip article,
  .productTaskCenterMetric,
  .productCatalogMetric,
  .productCollectionMetric,
  .productAssetsMetric,
  .exportTemplateMetric,
  .exportRecordsMetric
) {
  min-height: 58px !important;
  gap: 3px !important;
  padding: 9px 11px !important;
  border: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: var(--admin-v2-radius) !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text) !important;
  box-shadow: none !important;
}

:root :is(
  .sessionSummaryStrip article,
  .deviceSummaryStrip article,
  .productTaskCenterMetric,
  .productCatalogMetric,
  .productCollectionMetric,
  .productAssetsMetric,
  .exportTemplateMetric,
  .exportRecordsMetric
) :is(span, small, p) {
  color: var(--admin-v2-muted) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

:root :is(
  .sessionSummaryStrip article,
  .deviceSummaryStrip article,
  .productTaskCenterMetric,
  .productCatalogMetric,
  .productCollectionMetric,
  .productAssetsMetric,
  .exportTemplateMetric,
  .exportRecordsMetric
) :is(strong, b) {
  color: var(--admin-v2-text) !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
}

:root :is(
  .productTaskCenterPanel,
  .productCatalogPanel,
  .productCollectionPanel,
  .productAssetsPanel,
  .exportTemplatePanel,
  .exportRecordsPanel
) {
  min-height: 240px;
  flex: 1 1 auto;
  overflow: hidden !important;
}

:root :is(
  .productTaskCenterTableScroller,
  .productCatalogTableScroller,
  .productCollectionTableScroller,
  .productAssetsTableScroller,
  .exportTemplateTableScroller,
  .exportRecordsTableScroller,
  .sessionsTable
) {
  min-width: 0;
  min-height: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
}

:root :is(
  .productTaskCenterTable,
  .productCatalogTable,
  .productCollectionTable,
  .productAssetsTable,
  .exportTemplateTable,
  .exportRecordsTable
) th {
  position: sticky;
  z-index: 3;
  top: 0;
  box-shadow: inset 0 -1px 0 var(--admin-v2-border-soft);
}

:root :is(
  .productTaskCenterPagination,
  .productCatalogPagination,
  .productCollectionPagination,
  .productAssetsPagination,
  .exportTemplatePagination,
  .exportRecordsPagination,
  .sessionPaginationBar,
  .batchEditLibraryPager,
  .infringementLibraryPager
) {
  min-height: 42px !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  border: 0 !important;
  border-top: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: 0 !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-muted) !important;
  box-shadow: none !important;
}

:root .sessionFilterBar {
  margin: 0 !important;
}

:root .sessionsTable {
  max-height: none !important;
  border-radius: var(--admin-v2-radius) !important;
}

/* Forms, configuration cards and modal forms share the same dense rhythm. */
:root :is(
  .resourceAdminPage,
  .permissionRoleDesignerPage,
  .deviceAuthPage,
  .aiCreditsPage,
  .batchEditLibraryPage,
  .infringementLibraryPage,
  .fbmPricingPage
) :is(label, .field, [class*="Field"]) {
  color: var(--admin-v2-muted-strong) !important;
  font-size: 12px;
}

:root :is(
  .resourcePanel,
  .resourceGpuPool,
  .resourceGpuPanel,
  .licensePanel,
  .aiCreditsPanel,
  .batchEditLibraryPanel,
  .infringementLibraryPanel,
  .fbmPricingPanel
) {
  gap: 10px !important;
  padding: 14px !important;
}

:root :is(
  .userModal,
  .guideModal,
  [class*="ModalPanel"],
  [class$="Dialog"]
) :is(header, footer) {
  min-height: 48px;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  border-color: var(--admin-v2-border-soft) !important;
}

:root :is(
  .userModal,
  .guideModal,
  [class*="ModalPanel"],
  [class$="Dialog"]
) :is(.modalBody, form, [class*="Form"], [class*="Body"]) {
  gap: 10px !important;
}

:root :is(.statusPill, [class*="Badge"], [class*="Status"]):not([class*="Cell"]):not([class*="Row"]) {
  border-radius: 6px !important;
}

:root input[type="checkbox"],
:root input[type="radio"] {
  accent-color: var(--admin-v2-primary);
}

:root :is(
  .aiCreditsTabs,
  .batchEditLibraryTabs,
  .infringementLibraryTabs,
  .fbmPricingTabs,
  [class*="Tabs"]
) {
  gap: 4px !important;
  padding: 3px !important;
  border-color: var(--admin-v2-border-soft) !important;
  border-radius: 8px !important;
  background: var(--admin-v2-surface-soft) !important;
}

:root :is(
  .aiCreditsTabs,
  .batchEditLibraryTabs,
  .infringementLibraryTabs,
  .fbmPricingTabs,
  [class*="Tabs"]
) button {
  min-height: 32px;
  border-color: transparent !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--admin-v2-muted-strong) !important;
  box-shadow: none !important;
}

:root :is(
  .aiCreditsTabs,
  .batchEditLibraryTabs,
  .infringementLibraryTabs,
  .fbmPricingTabs,
  [class*="Tabs"]
) button.active {
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-primary-strong) !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08) !important;
}

:root .adminThemeToggle,
:root[data-ui-theme="light"] .adminThemeToggle,
:root[data-ui-theme="dark"] .adminThemeToggle {
  border-color: var(--admin-v2-border-soft) !important;
  border-radius: 7px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-muted-strong) !important;
  box-shadow: none !important;
}

/* Login belongs to the same product instead of the former purple microsite. */
:root .adminLogin,
:root[data-ui-theme="light"] .adminLogin,
:root[data-ui-theme="dark"] .adminLogin {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  padding: 24px;
  background: var(--admin-v2-canvas) !important;
  color: var(--admin-v2-text) !important;
}

:root .adminLogin .loginBrand {
  justify-self: center;
  color: var(--admin-v2-text) !important;
}

:root .adminLogin .loginBrand strong {
  color: var(--admin-v2-text) !important;
}

:root .loginCard,
:root[data-ui-theme="light"] .loginCard,
:root[data-ui-theme="dark"] .loginCard {
  width: min(390px, calc(100vw - 32px));
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: 10px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text) !important;
  box-shadow: var(--admin-v2-shadow) !important;
}

:root .loginCard h1 {
  color: var(--admin-v2-text) !important;
  font-size: 22px;
}

:root .loginCard :is(p, label, .loginOptions) {
  color: var(--admin-v2-muted-strong) !important;
}

:root .loginAvatar {
  background: var(--admin-v2-primary-soft) !important;
  color: var(--admin-v2-primary) !important;
  box-shadow: none !important;
}

:root .loginCard button[type="submit"] {
  min-height: 40px;
  border: 1px solid var(--admin-v2-primary) !important;
  border-radius: 7px !important;
  background: var(--admin-v2-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
}

:root .loginCard button[type="submit"]:hover:not(:disabled) {
  border-color: var(--admin-v2-primary-strong) !important;
  background: var(--admin-v2-primary-strong) !important;
}

@media (max-width: 1180px) {
  :root :is(
    .productTaskCenterMetrics,
    .productCatalogMetrics,
    .productCollectionMetrics,
    .productAssetsMetrics,
    .exportTemplateMetrics,
    .exportRecordsMetrics
  ) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Dashboard top controls */
:root .adminDashboardV2 .pageTitle,
:root .adminDashboardV2 > .metricGrid,
:root .adminDashboardV2 > .dashboardCountStrip {
  display: none !important;
}

:root .adminDashboardV2 > .dashboardActions {
  position: fixed;
  z-index: 55;
  top: 10px;
  right: 16px;
  min-width: 0;
  height: 36px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex-wrap: nowrap !important;
  gap: 8px;
  margin: 0;
}

:root body:has(.adminDashboardV2) .adminTopbar {
  padding-right: 610px;
}

.adminDashboardUpdatedAt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--admin-v2-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.adminDashboardUpdatedAt::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--admin-v2-primary);
  content: "";
}

:root .adminDashboardV2 .adminDateRangeTrigger,
:root .adminDashboardV2 .adminExportButton {
  min-height: 34px;
  height: 34px;
  border-radius: 7px !important;
}

:root .adminDashboardV2 .adminExportButton {
  min-width: 108px;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Dashboard V2 */
.adminUiDashboardGrid {
  min-width: 0;
  display: grid;
  gap: 12px;
}

.adminUiKpiGrid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.adminUiKpiCard,
.adminUiTrendPanel,
.adminUiPipelinePanel {
  min-width: 0;
  border: 1px solid var(--admin-v2-border-soft);
  border-radius: var(--admin-v2-radius);
  background: var(--admin-v2-surface);
  box-shadow: var(--admin-v2-shadow);
}

.adminUiTrendPanel {
  position: relative;
  overflow: hidden;
}

.adminUiKpiCard {
  min-height: 150px;
  display: grid;
  grid-template-rows: auto auto auto minmax(34px, 1fr);
  gap: 5px;
  padding: 14px 16px 11px;
}

.adminUiKpiHeading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.adminUiKpiHeading h2 {
  margin: 0;
  color: var(--admin-v2-text-soft);
  font-size: 14px;
  font-weight: 780;
}

.adminUiKpiHeading i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--admin-v2-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--admin-v2-primary) 11%, transparent);
}

.adminUiKpiValue {
  margin: 0;
  color: var(--admin-v2-text);
  font-size: clamp(26px, 2vw, 34px);
  font-weight: 820;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.adminUiKpiValueRow {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.adminUiKpiValueAside {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-v2-muted);
  font-size: 9.5px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminUiKpiValueAside[hidden] { display: none; }

.adminUiKpiMeta {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--admin-v2-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminUiKpiCanvas {
  width: 100%;
  height: 42px;
  align-self: end;
  display: block;
}

.adminUiDashboardBody {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(300px, .92fr);
  gap: 12px;
}

.adminUiTrendPanel,
.adminUiPipelinePanel {
  min-height: 300px;
  padding: 14px 16px 12px;
}

.adminUiPanelHeader {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.adminUiPanelHeader h2 {
  margin: 0;
  color: var(--admin-v2-text);
  font-size: 16px;
  font-weight: 820;
}

.adminUiPanelHeader span {
  color: var(--admin-v2-muted);
  font-size: 12px;
  white-space: nowrap;
}

.adminUiTrendCanvas {
  width: 100%;
  height: 220px;
  display: block;
  cursor: crosshair;
}

.adminUiTrendTooltip {
  position: absolute;
  z-index: 4;
  width: 196px;
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--admin-v2-primary) 22%, var(--admin-v2-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--admin-v2-surface) 94%, transparent);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  color: var(--admin-v2-text-soft);
  backdrop-filter: blur(8px);
}

.adminUiTrendTooltip[hidden] { display: none !important; }
.adminUiTrendTooltip strong { font-size: 11px; color: var(--admin-v2-text); }
.adminUiTrendTooltip span {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 10px;
}
.adminUiTrendTooltip span i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tooltip-color);
}
.adminUiTrendTooltip span b { color: var(--admin-v2-text); font-size: 10px; }

.adminUiTrendLegend {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 8px 16px;
  margin: 7px auto 0;
  padding-inline: 8px;
  box-sizing: border-box;
  text-align: center;
  color: var(--admin-v2-muted-strong);
  font-size: 11px;
}

.adminUiTrendLegend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--legend-color, var(--admin-v2-muted-strong));
  cursor: pointer;
}

.adminUiTrendLegend i {
  position: relative;
  width: 18px;
  height: 0;
  border-top: 2px solid var(--legend-color, var(--admin-v2-primary));
}

.adminUiTrendLegend i::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--admin-v2-surface);
  border: 2px solid var(--legend-color, var(--admin-v2-primary));
  box-shadow: 0 0 7px color-mix(in srgb, var(--legend-color, var(--admin-v2-primary)) 62%, transparent);
}

.adminUiPipelineList {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.adminUiPipelineItem {
  min-width: 0;
  min-height: 42px;
  display: grid;
  grid-template-columns: 28px minmax(78px, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid var(--admin-v2-border-soft);
  border-radius: 7px;
  background: var(--admin-v2-surface);
}

.adminUiPipelineIcon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--admin-v2-primary) 24%, var(--admin-v2-border-soft));
  border-radius: 50%;
  background: var(--admin-v2-primary-faint);
  color: var(--admin-v2-primary-strong);
}

.adminUiPipelineIcon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.8;
}

.adminUiPipelineName {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-v2-text-soft);
  font-size: 13px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminUiPipelineStatus {
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--admin-v2-success) 22%, var(--admin-v2-border-soft));
  border-radius: 6px;
  background: color-mix(in srgb, var(--admin-v2-success) 7%, var(--admin-v2-surface));
  color: var(--admin-v2-success);
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
}

.adminUiPipelineStatus.pending {
  border-color: color-mix(in srgb, var(--admin-v2-warning) 24%, var(--admin-v2-border-soft));
  background: color-mix(in srgb, var(--admin-v2-warning) 8%, var(--admin-v2-surface));
  color: var(--admin-v2-warning);
}

.adminUiPipelineValue {
  min-width: 34px;
  color: var(--admin-v2-text);
  font-size: 15px;
  font-weight: 820;
  text-align: right;
}

:root .adminDashboardV2 > .activityPanel {
  gap: 8px;
  padding: 0 14px 8px;
  box-shadow: var(--admin-v2-shadow) !important;
}

:root .adminDashboardV2 > .activityPanel > header {
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 1px solid var(--admin-v2-border-soft);
}

:root .adminDashboardV2 .activityPanel h2 {
  font-size: 16px;
}

:root .adminDashboardV2 .activityPanel header button {
  border: 0 !important;
  background: transparent !important;
  color: var(--admin-v2-primary) !important;
}

/* Modals and layered surfaces */
:root :is(.modalLayer, .guideModalLayer, .adminExportModal, [class*="ModalLayer"], [class*="ModalBackdrop"]) {
  background: rgba(15, 23, 42, .48) !important;
  backdrop-filter: blur(2px);
}

:root :is(.userModal, .guideModal, [class*="ModalPanel"], [class$="Modal"]) {
  border-color: var(--admin-v2-border-soft) !important;
  border-radius: 10px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text) !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .22) !important;
}

/* Scrollbars */
:root * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--admin-v2-primary) 32%, transparent) transparent !important;
}

:root *::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

:root *::-webkit-scrollbar-track {
  background: transparent !important;
}

:root *::-webkit-scrollbar-thumb {
  border: 2px solid transparent !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--admin-v2-primary) 30%, transparent) !important;
  background-clip: padding-box !important;
}

.adminUiMobileMenu,
.adminUiSidebarBackdrop {
  display: none;
}

.adminUiTableOverflow {
  max-width: 100%;
  overflow: auto;
  overscroll-behavior: contain;
}

@media (max-width: 1500px) {
  :root body:has(.adminDashboardV2) .adminTopbar {
    padding-right: 540px;
  }

  .adminUiKpiCard {
    padding-inline: 13px;
  }

  .adminUiKpiMeta {
    font-size: 11px;
  }
}

@media (max-width: 1240px) {
  :root {
    --admin-v2-sidebar-width: 196px;
  }

  .adminUiKpiGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .adminUiDashboardBody {
    grid-template-columns: minmax(0, 1fr);
  }

  .adminUiPipelineList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :root body:has(.adminDashboardV2) .adminTopbar {
    padding-right: 430px;
  }

  .adminDashboardUpdatedAt {
    display: none;
  }
}

@media (max-width: 620px) {
  :root .adminDashboardV2 > .dashboardActions {
    width: 100%;
    min-height: 148px;
    height: auto !important;
    padding: 0 10px 8px !important;
    box-sizing: border-box;
  }

  .adminUiDashboardPeriod {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
  }

  .adminUiPeriodToday,
  .adminUiPeriodHint {
    grid-column: 1 / -1;
  }

  .adminUiPeriodHint {
    text-align: center;
  }
}

@media (max-width: 900px) {
  :root {
    --admin-v2-topbar-height: 52px;
  }

  :root .adminShell,
  :root[data-ui-theme="light"] .adminShell,
  :root[data-ui-theme="dark"] .adminShell {
    grid-template-columns: minmax(0, 1fr);
  }

  :root .adminSidebar,
  :root[data-ui-theme="light"] .adminSidebar,
  :root[data-ui-theme="dark"] .adminSidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 120;
    width: min(82vw, 286px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 52px minmax(0, 1fr) auto;
    align-items: stretch;
    justify-items: stretch;
    transform: translateX(-102%);
    transition: transform .2s ease;
    box-shadow: 18px 0 42px rgba(15, 23, 42, .18) !important;
  }

  :root .adminSidebar nav,
  :root .adminSidebar nav.adminSidebarGrouped {
    width: 100%;
    justify-self: stretch;
    justify-content: flex-start;
  }

  .adminUiSidebarCollapse {
    display: none;
  }

  body.adminUiSidebarMobileExpanded .adminBrand strong,
  body.adminUiSidebarMobileExpanded .adminSidebar nav button > span,
  body.adminUiSidebarMobileExpanded .adminSidebarGroupHeader > span,
  body.adminUiSidebarMobileExpanded .adminSidebarGroupChevron,
  body.adminUiSidebarMobileExpanded .adminSidebarGroupItems,
  body.adminUiSidebarMobileExpanded .adminSidebarFoot > :not(.adminUiSidebarCollapse) {
    display: revert !important;
  }

  body.adminUiSidebarMobileExpanded .adminSidebar nav button,
  body.adminUiSidebarMobileExpanded .adminSidebar nav.adminSidebarGrouped .adminSidebarGroupHeader {
    justify-content: flex-start !important;
    padding-inline: 11px !important;
  }

  body.adminUiSidebarOpen .adminSidebar {
    transform: translateX(0) !important;
  }

  .adminUiSidebarBackdrop {
    position: fixed;
    z-index: 110;
    inset: 0;
    display: block;
    border: 0;
    background: rgba(15, 23, 42, .42);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }

  body.adminUiSidebarOpen .adminUiSidebarBackdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .adminUiMobileMenu {
    min-width: 48px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid var(--admin-v2-border-soft);
    border-radius: 7px;
    background: var(--admin-v2-surface);
    color: var(--admin-v2-text-soft);
    font-size: 13px;
    font-weight: 720;
  }

  .adminRuntimeStatus {
    display: none;
  }

  :root body:has(.adminDashboardV2) .adminTopbar {
    padding-right: 16px;
  }

  :root .adminDashboardV2 > .dashboardActions {
    position: static;
    height: auto;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: wrap !important;
    grid-row: auto;
  }

  .adminDashboardUpdatedAt {
    display: inline-flex;
    margin-right: auto;
  }

  .adminUiKpiGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .adminUiPipelineList {
    grid-template-columns: minmax(0, 1fr);
  }

  :root .adminMain > .adminPage,
  :root .adminMain > :is(
    .productTaskCenterAdminPage,
    .productCatalogAdminPage,
    .productCollectionAdminPage,
    .productAssetsAdminPage,
    .exportTemplateAdminPage,
    .exportRecordsAdminPage,
    .aiCreditsPage,
    .batchEditLibraryPage,
    .infringementLibraryPage,
    .fbmPricingPage
  ) {
    padding: 10px 10px 16px !important;
  }
}

@media (max-width: 620px) {
  .adminTopbarTitle {
    max-width: 44vw;
    font-size: 16px;
  }

  :root .adminProfile {
    padding-right: 5px;
    font-size: 0;
  }

  :root .adminProfile svg:last-child {
    display: none;
  }

  .adminUiKpiGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  :root :is(
    .productTaskCenterMetrics,
    .productCatalogMetrics,
    .productCollectionMetrics,
    .productAssetsMetrics,
    .exportTemplateMetrics,
    .exportRecordsMetrics
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .adminUiKpiCard {
    min-height: 128px;
  }

  .adminUiTrendPanel,
  .adminUiPipelinePanel {
    min-height: 0;
    padding: 12px;
  }

  .adminUiTrendCanvas {
    height: 190px;
  }

  :root .adminDashboardV2 > .dashboardActions {
    justify-content: stretch;
  }

  :root .adminDashboardV2 .adminDateRangeTrigger {
    min-width: 0;
    flex: 1 1 220px;
  }

  :root .adminDashboardV2 .adminExportButton {
    flex: 0 0 auto;
  }

  .adminDashboardUpdatedAt {
    width: 100%;
  }

  /* Convert div-based record tables to readable cards on phones. */
  :root :is(.activityTable, .adminTable):not(.permissionTable) {
    display: grid;
    gap: 8px;
    overflow: visible;
    background: transparent !important;
  }

  :root :is(.activityTable, .adminTable):not(.permissionTable) > :is(.activityRow, .adminTableRow).header {
    display: none !important;
  }

  :root :is(.activityTable, .adminTable):not(.permissionTable) > :is(.activityRow, .adminTableRow):not(.header) {
    min-width: 0 !important;
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 10px 11px;
    border: 1px solid var(--admin-v2-border-soft) !important;
    border-radius: 7px;
    background: var(--admin-v2-surface);
  }

  :root :is(.activityRow, .adminTableRow):not(.header) > [data-admin-label] {
    min-width: 0;
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    overflow-wrap: anywhere;
  }

  :root :is(.activityRow, .adminTableRow):not(.header) > [data-admin-label]::before {
    color: var(--admin-v2-muted);
    content: attr(data-admin-label);
    font-size: 11px;
    font-weight: 700;
  }

  .adminUiTableOverflow {
    border: 1px solid var(--admin-v2-border-soft);
    border-radius: var(--admin-v2-radius);
    background: var(--admin-v2-surface);
  }

  .adminUiTableOverflow > table {
    min-width: 760px;
  }

  .adminUiPipelineItem {
    grid-template-columns: 28px minmax(68px, 1fr) auto;
  }

  .adminUiPipelineValue {
    grid-column: 3;
    grid-row: 1;
  }

  .adminUiPipelineStatus {
    display: none;
  }
}

/* N11: stable page grids after compact headers hide legacy hero rows. */
:root body.batchEditLibraryActive .adminMain > .batchEditLibraryPage,
:root body.fbmPricingActive .adminMain > .fbmPricingPage {
  grid-template-rows: minmax(0, 1fr) !important;
}

:root body.infringementLibraryActive .adminMain > .infringementLibraryPage {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

:root :is(.batchEditLibraryPage .batchEditLibraryCard, .infringementLibraryPage .infringementLibraryCard, .fbmPricingPage .fbmPricingCard) {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
}

:root :is(.batchEditLibraryTableWrap, .infringementLibraryTableWrap, .fbmPricingConfigGrid, .fbmPricingShipping, .fbmPricingRecordsLayout) {
  min-height: 0 !important;
}

/* One visual grammar for every first-level tab: transparent rail + blue underline. */
:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) {
  min-width: 0;
  min-height: 40px;
  display: flex !important;
  align-items: stretch !important;
  gap: 18px !important;
  overflow-x: auto;
  padding: 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: thin;
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) > button {
  position: relative;
  min-width: max-content;
  min-height: 40px !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--admin-v2-muted-strong) !important;
  box-shadow: none !important;
  font-weight: 650 !important;
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) > button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: transparent;
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) > button:hover {
  color: var(--admin-v2-primary) !important;
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) > button.active {
  color: var(--admin-v2-primary-strong) !important;
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) > button.active::after {
  background: var(--admin-v2-primary);
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) > button :is(b, small, em) {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: currentColor !important;
  font-size: 11px !important;
  font-style: normal;
  opacity: .72;
}

/* Machine authorization fills the viewport and owns two independent pagers. */
:root .adminMain > .deviceAuthPage {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  grid-template-areas:
    "summary summary"
    "tools tools"
    "table license"
    "pager license"
    "hint hint" !important;
}

:root .deviceAuthPage .deviceAuthTable {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

:root .deviceAuthPage .licensePanel {
  align-self: stretch !important;
  height: 100% !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  overflow: hidden;
}

:root .deviceAuthPage .licenseRecordTable {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
}

.adminUiDevicePager {
  grid-area: pager;
}

.adminUiListPager {
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid var(--admin-v2-border-soft);
  border-radius: 8px;
  background: var(--admin-v2-surface);
  color: var(--admin-v2-muted-strong);
  font-size: 12px;
}

.adminUiLicensePager {
  margin: 0 10px 10px;
}

.adminUiListPager :is(select, button) {
  min-height: 30px !important;
  border: 1px solid var(--admin-v2-border) !important;
  border-radius: 6px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text-soft) !important;
}

.adminUiListPager button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.adminUiPagerRange {
  margin-right: auto;
}

.adminUiPaginatedHidden {
  display: none !important;
}

/* Dashboard date contract: today is live; stored history ends yesterday. */
:root .adminDashboardV2 > .dashboardActions > :not(.adminUiDashboardPeriod) {
  display: none !important;
}

:root .adminDashboardV2 > .dashboardActions {
  top: 7px;
  right: 230px !important;
  width: auto;
  max-width: calc(100vw - 520px);
  height: 42px;
}

.adminUiDashboardPeriod {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
}

.adminUiDashboardPeriod :is(button, input) {
  min-height: 32px !important;
  height: 32px;
  border: 1px solid var(--admin-v2-border) !important;
  border-radius: 6px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text-soft) !important;
  font-size: 12px;
}

.adminUiDashboardPeriod button.active,
.adminUiDashboardPeriod .adminUiPeriodApply.active {
  border-color: var(--admin-v2-primary) !important;
  background: var(--admin-v2-primary) !important;
  color: #fff !important;
}

.adminUiDashboardPeriod .adminUiPeriodExport:not(:disabled) {
  border-color: color-mix(in srgb, var(--admin-v2-primary) 40%, var(--admin-v2-border)) !important;
  color: var(--admin-v2-primary) !important;
}

.adminUiDashboardPeriod button:disabled {
  opacity: .48;
  cursor: not-allowed;
}

.adminUiPeriodHint,
.adminUiPeriodSeparator {
  color: var(--admin-v2-muted);
  white-space: nowrap;
  font-size: 11px;
}

:root .adminDashboardV2 {
  grid-template-rows: auto minmax(280px, 1fr) !important;
  align-content: stretch !important;
}

:root .adminDashboardV2 > .adminUiDashboardGrid {
  grid-row: 1;
}

:root .adminDashboardV2 > .activityPanel {
  grid-row: 2;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 280px;
  overflow: hidden;
}

:root .adminDashboardV2 > .activityPanel .activityTable {
  min-height: 0;
  overflow: auto;
}

:root .adminDashboardV2 > .activityPanel .activityTable.adminUiActivityTableEmpty {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
}

:root .adminDashboardV2 .activityPanel .emptyTableState svg {
  display: none !important;
}

.adminUiActivityEmpty {
  min-height: 180px;
  display: grid;
  place-items: center;
  color: var(--admin-v2-muted);
  font-size: 13px;
}

/* Local page loading masks avoid blank/cropped intermediate frames. */
:root .adminMain > :is(.adminDashboardV2, .deviceAuthPage, .aiCreditsPage, .batchEditLibraryPage, .infringementLibraryPage, .fbmPricingPage, .productTaskCenterAdminPage, .productCatalogAdminPage, .productCollectionAdminPage, .productAssetsAdminPage, .exportTemplateAdminPage, .exportRecordsAdminPage) {
  position: relative;
}

.adminUiDataLoading {
  position: absolute;
  z-index: 80;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  border-radius: var(--admin-v2-radius);
  background: color-mix(in srgb, var(--admin-v2-surface) 88%, transparent);
  color: var(--admin-v2-text-soft);
  backdrop-filter: blur(2px);
}

.adminUiDataLoading strong {
  font-size: 14px;
}

.adminUiDataLoading span {
  color: var(--admin-v2-muted);
  font-size: 12px;
}

.adminUiRouteLoading {
  position: absolute;
  z-index: 120;
  inset: 0;
  display: grid;
  place-content: start center;
  justify-items: center;
  gap: 8px;
  padding-top: min(22vh, 180px);
  background: color-mix(in srgb, var(--admin-v2-surface) 90%, transparent);
  color: var(--admin-v2-text-soft);
  backdrop-filter: blur(2px);
}

.adminUiRouteLoading strong {
  font-size: 15px;
}

.adminUiRouteLoading span:not(.adminUiRouteLoadingSpinner) {
  color: var(--admin-v2-muted);
  font-size: 12px;
}

.adminUiRouteLoadingSpinner {
  width: 30px;
  height: 30px;
  border: 3px solid color-mix(in srgb, var(--admin-v2-primary) 18%, transparent);
  border-top-color: var(--admin-v2-primary);
  border-radius: 50%;
  animation: adminUiRouteLoadingSpin .72s linear infinite;
}

@keyframes adminUiRouteLoadingSpin {
  to { transform: rotate(360deg); }
}

.adminUiLoadingProgress {
  width: 168px;
  height: 4px;
  accent-color: var(--admin-v2-primary);
}

@media (max-width: 1240px) {
  :root .adminDashboardV2 > .dashboardActions {
    position: static;
    max-width: none;
    height: auto;
  }

  .adminUiDashboardPeriod {
    width: 100%;
    flex-wrap: wrap;
  }

  :root .adminMain > .deviceAuthPage {
    grid-template-rows: auto auto minmax(420px, 1fr) auto auto auto !important;
    grid-template-areas: "summary" "tools" "table" "pager" "license" "hint" !important;
  }
}

@media (max-width: 620px) {
  :root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs, .exportTemplateTabs, .resourceGpuTabs) {
    gap: 14px !important;
    padding-inline: 8px !important;
  }

  .adminUiDashboardPeriod :is(.adminUiPeriodDate, .adminUiPeriodApply, .adminUiPeriodReset, .adminUiPeriodExport) {
    flex: 1 1 132px;
  }

  .adminUiPeriodSeparator {
    display: none;
  }

  .adminUiListPager {
    flex-wrap: wrap;
  }

  .adminUiPagerRange {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 20260726-global-consistency-v2: one shell, one toolbar rhythm, one pager edge. */
:root .adminTopbarContext {
  flex: 1 1 auto;
}

:root .adminTopbar .adminUpdateNoticeRoot {
  order: 10;
  margin-left: auto;
}

:root .adminTopbar .profileMenu {
  order: 11;
  margin-left: 0;
}

:root .adminTopbar .adminUpdateBellButton {
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-color: var(--admin-v2-border-soft) !important;
  border-radius: 7px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-primary) !important;
  box-shadow: none !important;
}

:root .adminDashboardV2 > .dashboardActions {
  right: 190px;
}

:root body:has(.adminDashboardV2) .adminTopbar {
  padding-right: 16px !important;
}

:root .adminUiEmptyHero {
  display: none !important;
}

:root :is(
  .productTaskCenterToolbar,
  .productCatalogToolbar,
  .productCollectionToolbar,
  .productAssetsToolbar,
  .exportTemplateToolbar,
  .exportRecordsToolbar
) {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap;
}

:root :is(
  .productTaskCenterActions,
  .productCatalogActions,
  .productCollectionActions,
  .productAssetsPageActions,
  .exportTemplateActions,
  .exportRecordsActions
) {
  margin-left: auto !important;
}

/* Search fields use the outer label as their only boundary. */
:root :is(.tableTools, .deviceTools) > label {
  min-width: 0;
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 0 10px !important;
  overflow: hidden;
  border: 1px solid var(--admin-v2-border) !important;
  border-radius: 7px !important;
  background: var(--admin-v2-surface) !important;
}

:root :is(.tableTools, .deviceTools) > label > input {
  min-width: 0;
  flex: 1 1 auto;
  padding-inline: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root :is(.tableTools, .deviceTools) > label:focus-within {
  border-color: var(--admin-v2-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--admin-v2-primary) 14%, transparent) !important;
}

:root .adminPage:has(.accountsTable) > .tableTools {
  display: grid !important;
  grid-template-columns: auto 120px 120px minmax(260px, 1fr) 64px;
  align-items: center;
}

:root .adminPage:has(.accountsTable) > .tableTools .adminUiResetFilters {
  width: 64px;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 8px !important;
  color: var(--admin-v2-muted-strong) !important;
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

:root .adminPage:has(.accountsTable) > .tableTools .adminUiResetFilters > svg {
  display: none !important;
}

:root .adminUiResetLabel {
  font-size: 12px;
  font-weight: 720;
}

:root body:is(.infringementLibraryActive, .batchEditLibraryActive, .aiCreditsActive, .fbmPricingActive) .adminMain {
  grid-template-rows: var(--admin-v2-topbar-height) minmax(0, 1fr) !important;
}

:root body:is(.infringementLibraryActive, .batchEditLibraryActive, .aiCreditsActive, .fbmPricingActive) .adminMain > :is(.infringementLibraryPage, .batchEditLibraryPage, .aiCreditsPage, .fbmPricingPage) {
  grid-row: 2 !important;
}

/* Machine authorization: one content grid and one right-side workbench. */
:root .adminMain > .deviceAuthPage {
  grid-template-columns: minmax(0, 2.15fr) minmax(340px, .95fr) !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  grid-template-areas:
    "summary summary"
    "tools tools"
    "table license"
    "hint hint" !important;
  align-items: start !important;
  gap: 10px 12px !important;
  margin: 0 !important;
  padding: 14px 16px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--admin-v2-canvas) !important;
  box-shadow: none !important;
}

:root .deviceAuthPage > .pageTitle {
  display: none !important;
}

:root .deviceAuthPage .deviceSummaryStrip {
  grid-area: summary;
  gap: 8px !important;
}

:root .deviceAuthPage .deviceSummaryStrip article {
  min-height: 62px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 9px 12px !important;
  border-color: var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

:root .deviceAuthPage .deviceSummaryIcon {
  width: 38px;
  height: 38px;
  border-radius: 7px;
}

:root .deviceAuthPage .deviceSummaryIcon svg {
  width: 21px;
  height: 21px;
}

:root .deviceAuthPage .deviceSummaryStrip article > div > strong {
  margin-top: 2px;
  font-size: 20px !important;
}

:root .deviceAuthPage .deviceTools {
  grid-area: tools;
  display: grid !important;
  grid-template-columns: 168px minmax(0, 1fr) !important;
  gap: 8px !important;
  padding: 5px 8px !important;
  border: 1px solid var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface) !important;
}

:root .deviceAuthPage .deviceAuthTable {
  grid-area: table;
  height: clamp(390px, calc(100vh - 260px), 650px) !important;
  min-height: 390px !important;
  max-height: 650px !important;
  border-color: var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

:root .deviceAuthPage .deviceAuthTable::before,
:root .deviceAuthPage .licenseRecordTable::before {
  height: 42px !important;
  padding-inline: 12px !important;
  border-color: var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface-soft) !important;
  color: var(--admin-v2-text) !important;
  font-size: 14px !important;
}

:root .deviceAuthPage .deviceAuthTable .adminTableRow.header {
  top: 42px !important;
}

:root .deviceAuthPage .licensePanel {
  grid-area: license;
  align-self: start !important;
  display: grid;
  grid-template-rows: auto auto auto auto !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: var(--admin-v2-radius) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

:root .deviceAuthPage .licensePanel > header,
:root .deviceAuthPage .licenseForm {
  padding: 12px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root .deviceAuthPage .licensePanel > header {
  padding-bottom: 4px !important;
}

:root .deviceAuthPage .licenseForm {
  padding-top: 6px !important;
}

:root .deviceAuthPage .licenseRecordTable {
  min-height: 0 !important;
  max-height: 250px !important;
  margin: 8px 10px 10px !important;
  border-color: var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

:root .deviceAuthPage > .adminHint {
  grid-area: hint;
  margin: 0 !important;
}

/* Pagers stay together on the lower-right across all list pages. */
:root :is(
  .productTaskCenterPagination,
  .productCatalogPagination,
  .productCollectionPagination,
  .productAssetsPagination,
  .exportTemplatePagination,
  .exportRecordsPagination,
  .sessionPaginationBar,
  .aiUsagePager,
  .batchEditLibraryPager,
  .infringementLibraryPager,
  .fbmPricingPager
) {
  width: 100%;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: wrap;
}

:root .sessionPaginationBar > :is(.sessionPageSize, .sessionPaginationRange, .sessionPaginationActions),
:root :is(.productTaskCenterPagination, .productCatalogPagination, .productCollectionPagination, .productAssetsPagination, .exportTemplatePagination, .exportRecordsPagination) > * {
  margin-left: 0 !important;
}

/* AI credits tabs and compact account resources share one top band. */
:root .aiCreditsPage .aiCreditsHero {
  display: none !important;
}

:root .aiCreditsPage .aiCreditsTopBand {
  min-width: 0;
  min-height: 58px;
  display: grid !important;
  grid-template-columns: minmax(390px, 1fr) auto;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 6px 10px !important;
  border: 1px solid var(--admin-v2-border-soft) !important;
  border-radius: var(--admin-v2-radius) !important;
  background: var(--admin-v2-surface) !important;
  box-shadow: none !important;
}

:root .aiCreditsPage .aiCreditsTopBand > .aiCreditsTabs {
  min-width: 0;
  min-height: 46px;
  align-self: stretch;
  margin: 0 !important;
  padding: 0 4px !important;
}

:root .aiCreditsPage .aiCreditsResourceBar {
  min-height: 46px;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root .aiCreditsPage :is(.aiCreditsTrafficCard, .aiCreditsBalanceCard) {
  min-height: 46px !important;
  border-color: var(--admin-v2-border-soft) !important;
  background: var(--admin-v2-surface-soft) !important;
  box-shadow: none !important;
}

:root .aiCreditsPage .aiCreditsTrafficCard {
  width: 286px !important;
  padding: 5px 9px !important;
}

:root .aiCreditsPage .aiCreditsBalanceCard {
  width: 148px !important;
  padding: 5px 9px !important;
}

:root .aiCreditsPage .aiCreditsBalanceCard strong {
  min-width: 0;
  font-size: 18px !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

:root .aiCreditsPage .aiCreditsRechargeButton {
  min-width: 88px !important;
  min-height: 46px !important;
  font-size: 13px !important;
}

:root .aiCreditsPage .aiCreditsResourceBar .aiCreditsHeroActionRow {
  align-items: stretch !important;
  gap: 8px !important;
}

:root .aiCreditsPage .aiCreditsResourceBar .aiCreditsRechargeButton {
  align-self: stretch !important;
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs) button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

:root .adminUiTabIcon {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 auto;
  stroke-width: 1.8;
}

/* Legacy FBM expected a three-row shell; V2 has two rows. */
:root body.fbmPricingActive .adminMain > .fbmPricingPage {
  grid-row: 2 !important;
  align-self: stretch;
}

/* One selected pipeline stage drives KPI, legend and live-chain emphasis. */
:root .adminUiDashboardGrid [data-dashboard-key] {
  cursor: pointer;
  transition: opacity .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

:root .adminUiDashboardGrid [data-dashboard-key].isDimmed {
  opacity: .64;
}

:root :is(.adminUiKpiCard, .adminUiPipelineItem)[data-dashboard-key].isSelected {
  border-color: color-mix(in srgb, var(--admin-v2-primary) 52%, var(--admin-v2-border-soft));
  background: color-mix(in srgb, var(--admin-v2-primary) 4%, var(--admin-v2-surface));
  box-shadow: inset 3px 0 0 var(--admin-v2-primary) !important;
}

:root .adminUiTrendLegend [data-dashboard-key].isSelected {
  color: var(--legend-color, var(--admin-v2-primary-strong));
  font-weight: 760;
}

:root .adminUiDashboardGrid [data-dashboard-key]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--admin-v2-primary) 46%, transparent);
  outline-offset: 2px;
}

@media (max-width: 1360px) {
  :root .adminDashboardV2 > .dashboardActions {
    right: 190px;
  }

  :root .adminDashboardV2 .adminDashboardUpdatedAt {
    display: none;
  }

  :root .aiCreditsPage .aiCreditsTopBand {
    grid-template-columns: minmax(320px, 1fr) auto;
  }

  :root .aiCreditsPage .aiCreditsTrafficCard {
    width: 240px !important;
  }
}

@media (max-width: 980px) {
  :root .adminPage:has(.accountsTable) > .tableTools {
    grid-template-columns: auto minmax(110px, 1fr) minmax(110px, 1fr) 64px;
  }

  :root .adminPage:has(.accountsTable) > .tableTools > label {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  :root .adminMain > .deviceAuthPage {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto auto auto !important;
    grid-template-areas: "summary" "tools" "table" "license" "hint" !important;
  }

  :root .deviceAuthPage .licensePanel {
    width: 100%;
  }

  :root .aiCreditsPage .aiCreditsTopBand {
    height: max-content !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root .aiCreditsPage .aiCreditsResourceBar {
    width: 100%;
    justify-content: flex-end !important;
  }
}

@media (max-width: 900px) {
  :root .adminTopbarContext {
    margin-right: auto;
  }

  :root .adminDashboardV2 > .dashboardActions {
    right: auto;
  }
}

@media (max-width: 620px) {
  :root .adminTopbar {
    gap: 5px;
    padding-inline: 8px;
  }

  :root .adminTopbarTitle {
    max-width: 31vw;
  }

  :root .adminTopbar .adminUpdateBellButton {
    width: 32px;
    min-width: 32px;
  }

  :root .adminPage:has(.accountsTable) > .tableTools {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 64px;
  }

  :root .adminPage:has(.accountsTable) > .tableTools > .primaryAction {
    grid-column: 1 / -1;
  }

  :root .deviceAuthPage .deviceSummaryStrip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root .deviceAuthPage .deviceTools {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root .aiCreditsPage .aiCreditsTopBand,
  :root .aiCreditsPage .aiCreditsResourceBar,
  :root .aiCreditsPage .aiCreditsHeroActionRow {
    width: 100%;
    justify-content: stretch !important;
  }

  :root .aiCreditsPage .aiCreditsResourceBar {
    height: max-content !important;
    min-height: 0 !important;
    flex-wrap: wrap;
  }

  :root .aiCreditsPage .aiCreditsTrafficCard {
    width: 100% !important;
  }

  :root .aiCreditsPage :is(.aiCreditsBalanceCard, .aiCreditsRechargeButton) {
    flex: 1 1 0;
    width: auto !important;
  }
}

/* N11 final precedence: keep compact-page fixes after legacy compatibility rules. */
:root body.batchEditLibraryActive .adminMain > .batchEditLibraryPage,
:root body.fbmPricingActive .adminMain > .fbmPricingPage {
  grid-template-rows: minmax(0, 1fr) !important;
}

:root body.infringementLibraryActive .adminMain > .infringementLibraryPage {
  grid-template-rows: auto minmax(0, 1fr) !important;
}

:root .adminMain > .deviceAuthPage {
  grid-template-rows: auto auto minmax(0, 1fr) auto auto !important;
  grid-template-areas: "summary summary" "tools tools" "table license" "pager license" "hint hint" !important;
}

:root .deviceAuthPage .deviceAuthTable {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

:root .deviceAuthPage .licensePanel {
  align-self: stretch !important;
  height: 100% !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

:root .deviceAuthPage .licenseRecordTable {
  max-height: none !important;
}

@media (max-width: 1240px) {
  :root .adminDashboardV2 {
    grid-template-rows: auto auto minmax(280px, 1fr) !important;
  }

  :root .adminDashboardV2 > .dashboardActions {
    grid-row: 1 !important;
  }

  :root .adminDashboardV2 > .adminUiDashboardGrid {
    grid-row: 2 !important;
  }

  :root .adminDashboardV2 > .activityPanel {
    grid-row: 3 !important;
  }

  :root .adminMain > .deviceAuthPage {
    grid-template-rows: auto auto 420px auto minmax(620px, auto) auto !important;
    grid-template-areas: "summary" "tools" "table" "pager" "license" "hint" !important;
  }

  :root .deviceAuthPage .licensePanel {
    height: auto !important;
    min-height: 620px !important;
  }
}

@media (max-width: 620px) {
  :root .adminDashboardV2 > .dashboardActions {
    width: 100%;
    min-height: 110px;
    height: auto !important;
    padding: 0 10px 8px !important;
    box-sizing: border-box;
  }

  .adminUiDashboardPeriod {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7px;
  }

  .adminUiPeriodExport {
    grid-column: 1 / -1;
  }
}

/* N13: keep compact license record dates inside their four visible columns. */
:root .deviceAuthPage .licenseRecordTable .adminTableRow {
  grid-template-columns: minmax(54px, .62fr) minmax(132px, 1.5fr) 86px 86px;
}

:root .deviceAuthPage .licenseRecordTable .adminTableRow > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:root .deviceAuthPage .licenseRecordTable .adminTableRow:not(.header) > .adminUiLicenseExpires {
  max-width: 86px;
  justify-self: end;
  color: #15803d;
  border-color: #86efac;
  background: #f0fdf4;
  font-weight: 700;
}

:root .deviceAuthPage .licenseRecordTable .adminTableRow:not(.header) > .adminUiLicenseCreated {
  max-width: 86px;
  color: #334155;
  font-weight: 650;
}

/* N14: six-stage real dashboard, one date trigger, compact toolbars and invisible tab rails. */
:root .adminDashboardV2 > .adminUiNativeDashboardActions {
  display: none !important;
}

:root .adminTopbar > .adminUiDashboardPeriod {
  position: relative;
  z-index: 80;
  flex: 0 0 auto;
  margin-left: auto;
  order: 8;
  align-self: center;
  display: flex;
  align-items: center;
  min-height: 32px;
}

:root .adminTopbar > .adminUiDashboardPeriod[hidden],
.adminUiPeriodPopover[hidden] {
  display: none !important;
}

:root .adminUiDashboardPeriod .adminUiPeriodTrigger {
  min-width: 168px;
  min-height: 32px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid var(--admin-v2-border) !important;
  border-radius: 7px !important;
  background: var(--admin-v2-surface) !important;
  color: var(--admin-v2-text-soft) !important;
  font-size: 12px;
  font-weight: 680;
  line-height: 1;
  white-space: nowrap;
}

.adminUiPeriodPopover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(760px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--admin-v2-border-soft);
  border-radius: 12px;
  background: var(--admin-v2-surface);
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
}

.adminUiPeriodQuick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 8px;
  overflow-y: auto;
  border-right: 1px solid var(--admin-v2-border-soft);
  background: var(--admin-v2-surface-soft);
  scrollbar-width: none;
}

.adminUiPeriodQuick::-webkit-scrollbar {
  display: none;
}

.adminUiPeriodQuickButton {
  flex: 0 0 auto;
  width: 100%;
  min-height: 34px !important;
  justify-content: flex-start !important;
  padding: 0 12px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--admin-v2-text-soft) !important;
  font-weight: 620;
}

.adminUiPeriodQuickButton:hover,
.adminUiPeriodQuickButton.active {
  border-color: var(--admin-v2-primary-soft) !important;
  background: var(--admin-v2-primary-faint) !important;
  color: var(--admin-v2-primary) !important;
}

.adminUiPeriodCalendarPanel {
  min-width: 0;
  display: grid;
  grid-template-rows: 48px minmax(0, 1fr) 50px;
}

.adminUiPeriodCalendarHeader {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) 112px;
  align-items: center;
  border-bottom: 1px solid var(--admin-v2-border-soft);
}

.adminUiPeriodCalendarNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.adminUiPeriodCalendarNavButton {
  min-width: 46px;
  min-height: 28px !important;
  padding: 0 7px !important;
  border-color: transparent !important;
  background: transparent !important;
  color: var(--admin-v2-muted) !important;
  font-size: 11px !important;
}

.adminUiPeriodCalendarNavButton:hover:not(:disabled) {
  background: var(--admin-v2-primary-faint) !important;
  color: var(--admin-v2-primary) !important;
}

.adminUiPeriodCalendarNavButton:disabled {
  cursor: not-allowed;
  background: #f3f4f6 !important;
  color: #b6bec9 !important;
  opacity: 1 !important;
}

.adminUiPeriodMonthLabels {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  text-align: center;
}

.adminUiPeriodMonthLabel {
  color: var(--admin-v2-text);
  font-size: 14px;
  font-weight: 760;
}

.adminUiPeriodCalendars {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.adminUiPeriodMonth {
  min-width: 0;
  padding: 10px 12px 12px;
}

.adminUiPeriodMonth + .adminUiPeriodMonth {
  border-left: 1px solid var(--admin-v2-border-soft);
}

.adminUiPeriodWeekdays,
.adminUiPeriodDays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center;
  text-align: center;
}

.adminUiPeriodWeekdays {
  height: 28px;
  color: var(--admin-v2-muted);
  font-size: 11px;
  font-weight: 650;
}

.adminUiPeriodDays {
  row-gap: 2px;
}

.adminUiPeriodDay {
  width: 32px;
  min-width: 0 !important;
  height: 30px !important;
  min-height: 30px !important;
  justify-self: center;
  padding: 0 !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: var(--admin-v2-text-soft) !important;
  font-size: 12px !important;
  font-weight: 620;
}

.adminUiPeriodDay:hover:not(:disabled) {
  border-color: var(--admin-v2-primary-soft) !important;
  background: var(--admin-v2-primary-faint) !important;
  color: var(--admin-v2-primary) !important;
}

.adminUiPeriodDay.isOtherMonth {
  color: var(--admin-v2-muted) !important;
  opacity: .52;
}

.adminUiPeriodDay.isDisabled {
  cursor: not-allowed;
  border-color: transparent !important;
  background: #f3f4f6 !important;
  color: #b8c0cb !important;
  opacity: 1;
}

.adminUiPeriodDay.isInRange {
  border-radius: 0 !important;
  background: var(--admin-v2-primary-faint) !important;
  color: var(--admin-v2-primary) !important;
}

.adminUiPeriodDay.isRangeStart,
.adminUiPeriodDay.isRangeEnd {
  border-color: var(--admin-v2-primary) !important;
  background: var(--admin-v2-primary) !important;
  color: #fff !important;
  font-weight: 760;
}

.adminUiPeriodFooter {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-top: 1px solid var(--admin-v2-border-soft);
}

.adminUiPeriodHint {
  min-width: 0;
  overflow: hidden;
  color: var(--admin-v2-muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminUiPeriodFooterActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

:root .adminUiKpiGrid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
}

:root .adminUiKpiCard {
  min-height: 204px;
  grid-template-rows: auto auto minmax(52px, auto) 32px;
  gap: 7px;
  padding: 14px 15px 10px;
}

:root .adminUiKpiHeading h2 {
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .01em;
}

:root .adminUiKpiValue {
  font-size: clamp(32px, 2.15vw, 40px);
  line-height: 1.05;
}

:root .adminUiKpiValueRow {
  align-items: center;
  gap: 10px;
}

:root .adminUiKpiValueAside {
  overflow: visible;
  color: var(--admin-v2-muted-strong);
  font-size: 11.5px;
  font-weight: 680;
  line-height: 1.4;
  text-overflow: clip;
  white-space: normal;
}

:root .adminUiKpiCard[data-metric-key="infringement"] .adminUiKpiValueRow {
  align-content: flex-start;
  flex-wrap: wrap;
  row-gap: 4px;
}

:root .adminUiKpiCard[data-metric-key="infringement"] .adminUiKpiValueAside {
  flex: 0 0 100%;
  white-space: nowrap;
}

:root .adminUiKpiMeta {
  display: flex;
  align-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  overflow: visible;
  white-space: normal;
}

.adminUiKpiDetail {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--admin-v2-muted-strong);
  font-size: 12.5px;
  font-weight: 620;
  line-height: 1.4;
  white-space: nowrap;
}

.adminUiKpiBreak {
  width: 0;
  height: 0;
  flex: 0 0 100%;
  margin: -2px 0;
  padding: 0;
}

.adminUiKpiDetail small { color: var(--admin-v2-muted-strong); font: inherit; }
.adminUiKpiDetail b { color: var(--admin-v2-text-soft); font-size: 12.5px; font-weight: 760; }
.adminUiKpiDetail.is-danger small,
.adminUiKpiDetail.is-danger b {
  color: #dc2626;
  font-weight: 800;
}

.adminUiKpiCard[data-metric-key="whiteBg"] .adminUiKpiMeta {
  display: block;
  align-self: stretch;
}

.adminUiProviderMetricTable {
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--admin-v2-text-soft);
  font-size: 11.5px;
  line-height: 1.35;
}

:root .adminUiProviderMetricTable :is(th, td) {
  height: 22px !important;
  min-height: 0 !important;
  overflow: hidden;
  padding: 3px 2px !important;
  font-size: 13px !important;
  line-height: 1.3 !important;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminUiProviderMetricTable :is(th, td):first-child {
  width: 22%;
  padding-left: 0;
  text-align: left;
}

.adminUiProviderMetricTable :is(th, td):nth-child(2) { width: 18%; }
.adminUiProviderMetricTable :is(th, td):nth-child(3) { width: 23%; }
.adminUiProviderMetricTable :is(th, td):nth-child(4) { width: 19%; }
.adminUiProviderMetricTable :is(th, td):nth-child(5) { width: 18%; }

:root .adminUiProviderMetricTable thead th {
  border-bottom: 1px solid var(--admin-v2-border-soft);
  color: var(--admin-v2-muted-strong);
  font-size: 12.5px !important;
  font-weight: 720;
}

.adminUiProviderMetricTable tbody th {
  color: var(--admin-v2-text-soft);
  font-weight: 720;
}

.adminUiProviderMetricTable tbody tr + tr > * {
  border-top: 1px solid color-mix(in srgb, var(--admin-v2-border-soft) 68%, transparent);
}

.adminUiProviderMetricTable td.is-danger {
  color: #dc2626;
  font-weight: 800;
}

:root .adminUiKpiCanvas { height: 32px; }

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs) {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
}

:root :is(.aiCreditsTabs, .batchEditLibraryTabs, .infringementLibraryTabs, .fbmPricingTabs)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

:root :is(.batchEditLibraryToolbar, .infringementLibraryToolbar) label {
  display: block !important;
  gap: 0 !important;
}

:root :is(.batchEditLibraryToolbar, .infringementLibraryToolbar) label > span {
  display: none !important;
}

:root .adminPage:has(.accountsTable) > .tableTools {
  grid-template-columns: auto 112px 112px minmax(240px, 420px) 64px !important;
  justify-content: start;
}

:root .adminPage:has(.accountsTable) > .tableTools :is(button, select, input) {
  min-height: 32px !important;
  height: 32px !important;
  line-height: 1 !important;
}

:root .adminPage:has(.accountsTable) > .tableTools button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px;
  white-space: nowrap;
}

@media (max-width: 1800px) {
  :root .adminUiKpiGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root .adminUiKpiGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root .adminTopbar > .adminUiDashboardPeriod { margin-left: auto; }
  .adminUiPeriodTrigger { min-width: 132px; }
  :root .adminPage:has(.accountsTable) > .tableTools {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  :root .adminPage:has(.accountsTable) > .tableTools > label { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  :root .adminUiKpiGrid { grid-template-columns: minmax(0, 1fr); }
  :root .adminTopbar > .adminUiDashboardPeriod {
    width: auto;
    min-height: 0;
    display: flex !important;
    grid-template-columns: none;
  }
  .adminUiPeriodTrigger { min-width: 104px; max-width: 132px; overflow: hidden; text-overflow: ellipsis; }
  .adminUiPeriodPopover {
    position: fixed;
    top: 58px;
    right: 6px;
    left: 6px;
    width: auto;
    max-height: calc(100vh - 68px);
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }
  .adminUiPeriodQuick {
    flex-direction: row;
    padding: 7px;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--admin-v2-border-soft);
  }
  .adminUiPeriodQuickButton { width: auto; padding: 0 10px !important; }
  .adminUiPeriodCalendarHeader { grid-template-columns: 94px minmax(0, 1fr) 94px; }
  .adminUiPeriodCalendarNavButton { min-width: 42px; padding: 0 5px !important; }
  .adminUiPeriodMonthLabels { grid-template-columns: minmax(0, 1fr); }
  .adminUiPeriodMonthLabel:nth-child(2) { display: none; }
  .adminUiPeriodCalendars { grid-template-columns: minmax(0, 1fr); }
  .adminUiPeriodMonth:nth-child(2) { display: none; }
  .adminUiPeriodFooter { align-items: flex-start; flex-direction: column; }
  .adminUiPeriodFooterActions { width: 100%; justify-content: flex-end; }
}

/* N19: compact, centered dashboard calendar and first-load-only page mask. */
:root .adminUiDashboardPeriod .adminUiPeriodTrigger {
  min-width: 150px;
  min-height: 28px !important;
  height: 28px !important;
  box-sizing: border-box;
  padding: 0 10px;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.adminUiPeriodPopover {
  width: min(660px, calc(100vw - 24px));
  grid-template-columns: 104px minmax(0, 1fr);
}

.adminUiPeriodQuick {
  justify-content: center;
  padding: 7px 6px;
}

:root .adminUiDashboardPeriod .adminUiPeriodQuickButton {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 9px !important;
  align-items: center;
}

.adminUiPeriodCalendarPanel {
  grid-template-rows: 42px minmax(0, 1fr) 44px;
}

.adminUiPeriodCalendarHeader,
.adminUiPeriodCalendarNav,
.adminUiPeriodMonthLabels,
.adminUiPeriodWeekdays,
.adminUiPeriodDays,
.adminUiPeriodFooter {
  align-items: center;
}

.adminUiPeriodCalendarHeader {
  grid-template-columns: 98px minmax(0, 1fr) 98px;
}

:root .adminUiDashboardPeriod .adminUiPeriodCalendarNavButton {
  min-width: 42px;
  min-height: 26px !important;
  height: 26px !important;
  box-sizing: border-box;
  padding: 0 5px !important;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.adminUiPeriodMonth {
  padding: 6px 8px 8px;
}

.adminUiPeriodWeekdays {
  height: 24px;
}

:root .adminUiDashboardPeriod .adminUiPeriodDay {
  width: 28px;
  height: 27px !important;
  min-height: 27px !important;
  box-sizing: border-box;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.adminUiPeriodFooter {
  padding: 6px 10px;
}

.adminUiInitialDataLoading {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(248, 250, 252, .82);
  backdrop-filter: blur(2px);
}

.adminUiInitialDataLoadingPanel {
  min-width: min(320px, calc(100vw - 40px));
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 20px 24px;
  border: 1px solid var(--admin-v2-border);
  border-radius: 10px;
  background: var(--admin-v2-surface);
  box-shadow: 0 16px 40px rgba(15, 23, 42, .14);
  color: var(--admin-v2-text);
  text-align: center;
}

.adminUiInitialDataLoadingPanel > span:last-child {
  color: var(--admin-v2-muted);
  font-size: 12px;
}

.adminUiInitialDataSpinner {
  width: 24px;
  height: 24px;
  border: 2px solid #dbeafe;
  border-top-color: var(--admin-v2-primary);
  border-radius: 50%;
  animation: adminUiInitialSpin .72s linear infinite;
}

@keyframes adminUiInitialSpin {
  to { transform: rotate(360deg); }
}

/* Functional progress indicators must keep moving even when decorative motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  :root[data-admin-returning-dashboard="true"] .adminMain::after,
  .adminBootSpinner,
  .adminUiRouteLoadingSpinner,
  .adminUiInitialDataSpinner,
  .aiUsageLoadingLayer > span,
  .aiDonutSyncBadge > i,
  .aiInlineSpinner,
  .aiDetailLoadingText > i,
  .ilSpinner,
  .productTaskCenterDeleteSpinner {
    animation-duration: .9s !important;
    animation-timing-function: linear !important;
    animation-iteration-count: infinite !important;
    animation-play-state: running !important;
  }
}

@media (max-width: 560px) {
  :root .adminUiDashboardPeriod .adminUiPeriodTrigger {
    min-width: 100px;
    height: 28px;
  }

  .adminUiPeriodCalendarHeader {
    grid-template-columns: 88px minmax(0, 1fr) 88px;
  }
}