@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/outfit/Outfit-400.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/outfit/Outfit-500.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/outfit/Outfit-600.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/outfit/Outfit-700.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/outfit/Outfit-800.ttf") format("truetype");
}

@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/outfit/Outfit-900.ttf") format("truetype");
}

:root {
  --hub-shell-bg: rgba(255, 255, 255, 0.92);
  --hub-shell-surface: rgba(251, 249, 255, 0.86);
  --hub-shell-surface-strong: #ffffff;
  --hub-shell-ink: #19142a;
  --hub-shell-muted: #625a82;
  --hub-shell-line: rgba(83, 53, 145, 0.14);
  --hub-shell-accent: #6b4dff;
  --hub-shell-accent-strong: #4528d6;
  --hub-control-focus-border: rgba(107, 77, 255, 0.45);
  --hub-control-focus-shadow: 0 0 0 3px rgba(107, 77, 255, 0.1);
  --hub-shell-shadow: 0 24px 60px rgba(76, 55, 166, 0.14);
  --hub-shell-sticky-top: 96px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.has-hub-shell {
  --bg: #f5f2ff;
  --surface: rgba(251, 249, 255, 0.86);
  --surface-soft: rgba(249, 247, 255, 0.84);
  --surface-strong: #ffffff;
  --ink: #19142a;
  --text: #19142a;
  --muted: #625a82;
  --line: rgba(83, 53, 145, 0.14);
  --line-strong: rgba(107, 77, 255, 0.24);
  --primary: #6b4dff;
  --primary-dark: #4528d6;
  --primary-strong: #4528d6;
  --primary-soft: rgba(131, 102, 255, 0.2);
  --accent: #6b4dff;
  --accent-strong: #4528d6;
  --accent-soft: rgba(131, 102, 255, 0.2);
  --hub-control-focus-border: rgba(107, 77, 255, 0.45);
  --hub-control-focus-shadow: 0 0 0 3px rgba(107, 77, 255, 0.1);
  --violet: #6b4dff;
  --success: #166a74;
  --success-soft: rgba(39, 140, 143, 0.1);
  --warning: #a15c07;
  --warning-soft: rgba(244, 195, 109, 0.14);
  --danger: #a13363;
  --danger-soft: rgba(175, 64, 110, 0.1);
  --shadow: 0 24px 60px rgba(76, 55, 166, 0.14);
  --hub-shell-sticky-top: 96px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
}

html:not([data-hub-theme="dark"]) body.has-hub-shell {
  background:
    radial-gradient(circle at top left, rgba(129, 95, 255, 0.28), transparent 28%),
    radial-gradient(circle at top right, rgba(79, 212, 255, 0.18), transparent 24%),
    linear-gradient(180deg, #fbf9ff 0%, #efeaff 48%, #e8f0ff 100%) !important;
}

body.has-hub-shell.hub-shell-chrome-hidden {
  --hub-shell-sticky-top: 16px;
}

.hub-module-layout {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.hub-module-page {
  width: min(1760px, calc(100% - 24px));
  min-height: calc(100vh - 80px);
  margin: 0 auto;
  padding: 18px 0 32px;
}

.hub-module-sidebar {
  position: sticky;
  top: var(--hub-shell-sticky-top, 96px);
  display: grid;
  gap: 8px;
  align-self: start;
  max-height: calc(100vh - var(--hub-shell-sticky-top, 96px) - 16px);
  overflow: visible;
  transition: top 180ms ease, max-height 180ms ease;
}

body.has-hub-shell.hub-shell-chrome-hidden .hub-module-sidebar {
  top: var(--hub-shell-sticky-top, 16px);
  max-height: calc(100vh - var(--hub-shell-sticky-top, 16px) - 16px);
}

.hub-module-menu-heading,
.hub-module-sidebar-heading {
  display: grid;
  gap: 5px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--line, var(--hub-shell-line));
}

.hub-module-menu-heading span,
.hub-module-menu-heading .section-label,
.hub-module-sidebar-heading span,
.hub-module-sidebar-heading .section-label {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
}

.hub-module-menu-heading strong,
.hub-module-sidebar-heading strong {
  color: var(--ink, var(--hub-shell-text));
  font-size: 1rem;
  font-weight: 800;
}

.hub-module-sidebar-card small {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.hub-module-sidebar-card {
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(251, 249, 255, 0.72)),
    var(--surface-strong, var(--hub-shell-surface-strong));
  box-shadow: var(--shadow, var(--hub-shell-shadow));
  backdrop-filter: blur(18px);
}

.hub-module-sidebar-card {
  padding: 10px;
}

.hub-module-sidebar-card p {
  margin: 8px 0 0;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.88rem;
  line-height: 1.42;
}

.hub-module-menu {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.hub-module-menu-list {
  display: grid;
  gap: 6px;
}

.hub-module-menu-group {
  margin: 8px 2px 2px;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hub-module-menu-group:first-child {
  margin-top: 0;
}

.hub-module-nav-item {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 31px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--muted, var(--hub-shell-muted));
  background: transparent;
  text-align: left;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
  overflow: visible;
}

.hub-module-nav-item span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-module-nav-item:hover,
.hub-module-nav-item.active {
  border-color: rgba(111, 75, 216, 0.22);
  color: var(--accent-strong, var(--hub-shell-accent-strong));
  background: #f1efff;
}

.hub-module-nav-item:disabled {
  cursor: default;
  opacity: 0.48;
}

.hub-module-nav-item:disabled:hover {
  border-color: transparent;
  color: var(--muted, var(--hub-shell-muted));
  background: transparent;
}

.hub-module-nav-item small {
  display: inline-grid;
  min-width: 34px;
  min-height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 999px;
  color: inherit;
  background: rgba(255, 255, 255, 0.7);
  font-size: 0.68rem;
  font-weight: 700;
}

.hub-module-menu-back {
  box-sizing: border-box;
  min-height: 30px;
  width: fit-content;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--accent-strong, var(--hub-shell-accent-strong));
  background: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.hub-module-menu-heading .hub-module-menu-back {
  margin-top: 2px;
  text-decoration: none;
}

.hub-module-context {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.hub-module-context-kicker {
  margin: 0 0 8px;
  color: var(--accent, var(--hub-shell-accent));
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hub-module-context-kicker--breadcrumb,
.hub-module-context-kicker[data-hub-context-kind="breadcrumb"] {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 760;
}

.hub-module-context-title,
.hub-module-context h1,
.hub-module-context h2 {
  margin: 0;
  color: var(--ink, var(--hub-shell-text));
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.05;
}

.hub-module-context-copy {
  max-width: 860px;
  margin: 8px 0 0;
  color: var(--muted, var(--hub-shell-muted));
  line-height: 1.5;
}

.hub-module-context-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.hub-module-section-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.hub-module-section-heading h2,
.hub-module-section-heading h3 {
  margin: 0;
}

.hub-module-section-heading p {
  margin: 6px 0 0;
  color: var(--muted, var(--hub-shell-muted));
}

.hub-module-filter-area {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
  gap: 8px;
  max-width: 100%;
}

.hub-module-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 3px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.hub-ui-tab-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 34px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
}

.hub-module-filter-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--muted, var(--hub-shell-muted));
  background: transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  overflow: visible;
}

.hub-ui-counter-badge,
.hub-module-filter-count {
  position: relative;
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  padding: 0 5px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent, #6b4dff), var(--accent-strong, #4528d6));
  box-shadow: 0 6px 14px rgba(107, 77, 255, 0.26);
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
}

.hub-ui-counter-badge--floating {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
}

.hub-module-filter-button:hover,
.hub-module-filter-button.active {
  color: var(--accent-strong, var(--hub-shell-accent-strong));
  background: var(--accent-soft, rgba(131, 102, 255, 0.14));
}

.hub-module-filter-note {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.76rem;
  font-weight: 650;
}

.hub-module-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

/* Shared operational UI primitives.
   Hub modules should compose these instead of rebuilding local variants. */
[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.hub-ui-list-item.is-dragging {
  border-color: color-mix(in srgb, var(--hub-shell-primary, #7047ff) 44%, var(--hub-shell-border, #ded8f5));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--hub-shell-primary, #7047ff) 10%, transparent), transparent 58%),
    var(--hub-shell-card, #fff);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--hub-shell-primary, #7047ff) 15%, transparent);
}

.hub-module-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.hub-ui-section-stack {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.hub-ui-fill-viewport {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  align-content: stretch;
  min-height: max(360px, calc(100dvh - var(--hub-ui-fill-viewport-offset, 212px)));
}

.hub-ui-fill-body,
.hub-ui-fill-viewport > .hub-ui-fill-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.hub-ui-fill-viewport .hub-ui-list--empty,
.hub-ui-fill-viewport .hub-ui-card-grid--empty {
  flex: 1 1 auto;
  min-height: 100%;
}

.hub-ui-list--empty > .hub-ui-empty-page,
.hub-ui-card-grid--empty > .hub-ui-empty-page {
  min-height: 100%;
}

.hub-ui-card-grid--empty > .hub-ui-empty-page {
  grid-column: 1 / -1;
}

.hub-ui-status-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  width: min(100%, var(--hub-ui-operational-max, 1327px));
  max-width: var(--hub-ui-operational-max, 1327px);
  margin-bottom: 14px;
  min-width: 0;
  box-sizing: border-box;
}

.hub-ui-status-grid--dynamic {
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
}

.hub-ui-status-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  aspect-ratio: 1 / 1;
  min-height: 0;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(251, 249, 255, 0.54)),
    var(--surface, var(--hub-shell-surface));
  box-shadow: var(--shadow, var(--hub-shell-shadow));
  color: var(--ink, var(--hub-shell-text));
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hub-ui-status-card:hover,
.hub-ui-status-card.active {
  border-color: rgba(124, 58, 237, 0.42);
  background: rgba(124, 58, 237, 0.1);
  box-shadow: 0 18px 46px rgba(124, 58, 237, 0.16);
  transform: translateY(-1px);
}

.hub-ui-status-card span {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.hub-ui-status-card strong {
  color: var(--ink, var(--hub-shell-text));
  font-size: 2rem;
  line-height: 1;
}

.hub-ui-status-card small {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  line-height: 1.28;
}

.hub-ui-status-card.has-signal.signal-warning:not(:hover, .active) {
  border-color: rgba(181, 71, 8, 0.12);
  background: rgba(245, 158, 11, 0.035);
}

.hub-ui-status-card.has-signal.signal-danger:not(:hover, .active) {
  border-color: rgba(180, 35, 82, 0.12);
  background: rgba(244, 63, 94, 0.035);
}

.hub-ui-status-card.has-signal.signal-violet:not(:hover, .active) {
  border-color: rgba(124, 58, 237, 0.12);
  background: rgba(124, 58, 237, 0.045);
}

.hub-ui-status-card--loading,
.hub-ui-status-card[aria-busy="true"] {
  cursor: default;
  pointer-events: none;
}

.hub-ui-status-card--loading strong,
.hub-ui-status-card--loading small,
.hub-ui-status-card--loading span {
  position: relative;
  overflow: hidden;
  color: transparent;
  border-radius: 999px;
  background: rgba(107, 77, 255, 0.12);
}

.hub-ui-status-card--loading span {
  width: min(86px, 70%);
  min-height: 0.78rem;
}

.hub-ui-status-card--loading strong {
  width: min(72px, 62%);
  min-height: 2rem;
}

.hub-ui-status-card--loading small {
  width: min(112px, 84%);
  min-height: 0.78rem;
}

.hub-ui-status-card--loading span::after,
.hub-ui-status-card--loading strong::after,
.hub-ui-status-card--loading small::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.58), transparent);
  animation: hub-ui-skeleton-shimmer 1200ms ease-in-out infinite;
}

@keyframes hub-ui-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.hub-ui-filter-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  align-items: end;
  gap: 12px;
  width: min(100%, var(--hub-ui-operational-max, 1327px));
  max-width: var(--hub-ui-operational-max, 1327px);
  margin-bottom: 14px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: var(--surface, var(--hub-shell-surface));
  box-shadow: var(--shadow, var(--hub-shell-shadow));
  padding: 14px;
}

.hub-ui-filter-toolbar--with-view .hub-ui-icon-switch,
.hub-ui-filter-toolbar__view {
  align-self: end;
  justify-self: start;
}

.hub-ui-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.84rem;
  font-weight: 800;
}

.hub-ui-field select,
.hub-ui-field input,
.hub-ui-input {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: var(--surface, var(--hub-shell-surface));
  color: var(--ink, var(--hub-shell-text));
  font-weight: 500;
  padding: 0 10px;
}

.hub-ui-field select:focus,
.hub-ui-field input:focus,
.hub-ui-input:focus {
  border-color: var(--hub-control-focus-border);
  box-shadow: var(--hub-control-focus-shadow);
  outline: 0;
}

/* Native select: theme the closed control (custom chevron, no OS arrow) and
   let the OS option list follow the active theme via color-scheme. The open
   list itself is the browser's widget — this control is reserved for scrolling
   drawers where a themed absolute menu would clip. */
.hub-ui-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23625a82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

.hub-ui-field select option {
  background: var(--surface-strong, #ffffff);
  color: var(--ink, #1c1033);
}

html[data-hub-theme="dark"] .hub-ui-field select {
  color-scheme: dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239a93b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}

.hub-ui-form-section {
  display: grid;
  gap: 8px;
}

.hub-ui-form-section h3 {
  margin: 0;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hub-ui-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.hub-ui-form-grid label,
.hub-ui-form-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.84rem;
  font-weight: 750;
}

.hub-ui-form-grid label.full-width,
.hub-ui-form-field.full-width {
  grid-column: 1 / -1;
}

.hub-ui-form-grid input,
.hub-ui-form-grid select,
.hub-ui-form-grid textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 7px;
  background: var(--surface, var(--hub-shell-surface));
  color: var(--ink, var(--hub-shell-text));
  padding: 8px 10px;
  font-weight: 500;
}

.hub-ui-footer-action {
  position: relative;
  z-index: 8;
  margin-top: 12px;
}

.hub-ui-footer-action.is-sticky-enabled {
  position: sticky;
  bottom: 14px;
  z-index: 30;
}

.hub-ui-footer-action__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
}

.hub-ui-footer-action__copy {
  min-width: 0;
}

.hub-ui-footer-action__copy h2,
.hub-ui-footer-action__copy h3,
.hub-ui-footer-action__copy strong {
  margin: 0;
}

.hub-ui-footer-action__copy p,
.hub-ui-footer-action__copy small {
  margin: 4px 0 0;
}

.hub-ui-footer-action__controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.hub-ui-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  color: var(--muted, var(--hub-shell-muted));
  padding: 0 10px;
}

.hub-ui-search:focus-within {
  border-color: var(--hub-control-focus-border);
  box-shadow: var(--hub-control-focus-shadow);
}

.hub-ui-search svg,
.hub-ui-icon-switch svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-ui-search input {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink, var(--hub-shell-text)) !important;
  font-weight: 500;
  padding: 0;
  box-shadow: none !important;
  outline: 0;
}

.hub-autocomplete {
  position: relative;
  display: block;
}

.hub-autocomplete-menu {
  position: absolute;
  z-index: 45;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  max-height: 300px;
  overflow: auto;
  padding: 7px;
  border: 1px solid rgba(111, 75, 216, 0.24);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(250, 248, 255, 0.98), rgba(255, 255, 255, 0.98)),
    #ffffff;
  box-shadow: 0 22px 55px rgba(42, 31, 82, 0.2);
}

.hub-autocomplete-menu[hidden] {
  display: none;
}

.hub-autocomplete-option {
  display: grid;
  gap: 2px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 9px 10px;
  color: var(--ink, var(--hub-shell-text));
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.hub-autocomplete-option span {
  font-size: 0.94rem;
  font-weight: 750;
}

.hub-autocomplete-option small,
.hub-autocomplete-empty {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 650;
}

.hub-autocomplete-option:hover,
.hub-autocomplete-option.is-active {
  color: #4f31d7;
  background: rgba(111, 75, 216, 0.1);
}

.hub-autocomplete-option:hover small,
.hub-autocomplete-option.is-active small {
  color: #6650b8;
}

.hub-autocomplete-empty {
  display: block;
  padding: 10px;
}

body.has-hub-shell input::placeholder,
body.has-hub-shell textarea::placeholder {
  color: color-mix(in srgb, var(--muted, var(--hub-shell-muted)) 44%, transparent);
  font-weight: 800;
  opacity: 1;
}

.hub-ui-icon-switch {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  width: 72px;
  min-height: 34px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft, #f6f8fd) 82%, var(--surface, #fff) 18%);
  color: var(--muted, var(--hub-shell-muted));
  padding: 3px;
}

.hub-ui-icon-switch::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--surface, #fff);
  box-shadow: 0 4px 14px rgba(18, 25, 56, 0.1);
  transition: transform 180ms ease, background 180ms ease;
}

.hub-ui-icon-switch:has(button:last-child.active)::before {
  transform: translateX(100%);
  background: var(--primary-soft, rgba(124, 58, 237, 0.14));
}

.hub-ui-icon-switch button {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: 0;
  min-height: 26px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  padding: 0;
}

.hub-ui-icon-switch button:hover,
.hub-ui-icon-switch button.active {
  color: var(--primary, var(--hub-shell-accent));
}

.hub-ui-panel {
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(251, 249, 255, 0.54)),
    var(--surface, var(--hub-shell-surface));
  box-shadow: var(--shadow, var(--hub-shell-shadow));
  padding: 16px;
}

.hub-ui-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.hub-ui-panel-header h2,
.hub-ui-panel-header h3 {
  margin: 0;
  color: var(--ink, var(--hub-shell-text));
}

.hub-ui-panel-header p {
  margin: 4px 0 0;
  color: var(--muted, var(--hub-shell-muted));
  line-height: 1.42;
}

.hub-ui-grid {
  display: grid;
  gap: 14px;
  width: min(100%, var(--hub-ui-operational-max, 1327px));
  max-width: var(--hub-ui-operational-max, 1327px);
  min-width: 0;
  box-sizing: border-box;
}

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

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

.hub-ui-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 10px;
  width: min(100%, var(--hub-ui-operational-max, 1327px));
  max-width: var(--hub-ui-operational-max, 1327px);
  min-width: 0;
  box-sizing: border-box;
}

.hub-ui-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-ui-thumb-picker {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.hub-ui-thumb-picker--compact {
  gap: 10px;
}

.hub-ui-thumb-group {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.hub-ui-thumb-group-title {
  margin: 0;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hub-ui-thumb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr));
  gap: 10px;
  min-width: 0;
}

.hub-ui-thumb-picker--compact .hub-ui-thumb-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 112px), 1fr));
  gap: 8px;
}

.hub-ui-thumb {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(251, 249, 255, 0.58)),
    var(--surface, var(--hub-shell-surface));
  color: var(--ink, var(--hub-shell-text));
  padding: 8px;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.hub-ui-thumb:hover,
.hub-ui-thumb:focus-visible,
.hub-ui-thumb.active,
.hub-ui-thumb[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--accent-strong, #6d4dff) 42%, transparent);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(245, 241, 255, 0.82)),
    color-mix(in srgb, var(--surface, #ffffff) 86%, var(--accent-soft, rgba(131, 102, 255, 0.11)) 14%);
  box-shadow: 0 18px 44px rgba(83, 62, 163, 0.12);
  outline: 0;
  transform: translateY(-1px);
}

.hub-ui-thumb-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 114, 255, 0.12), transparent 42%),
    color-mix(in srgb, var(--surface-strong, #fff) 84%, var(--surface-soft, #f6f8fd) 16%);
}

.hub-ui-thumb-frame > * {
  width: var(--hub-ui-thumb-natural-width, 320px);
  min-height: var(--hub-ui-thumb-natural-height, 200px);
  transform: scale(var(--hub-ui-thumb-scale, 0.44));
  transform-origin: top left;
  pointer-events: none;
}

.hub-ui-thumb-picker--compact .hub-ui-thumb-frame > * {
  transform: scale(var(--hub-ui-thumb-scale, 0.34));
}

.hub-ui-thumb-label {
  min-width: 0;
  color: var(--ink, var(--hub-shell-text));
  font-size: 0.84rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-ui-live-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: clamp(360px, 68vh, 820px);
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(251, 249, 255, 0.54)),
    var(--surface, var(--hub-shell-surface));
  box-shadow: var(--shadow, var(--hub-shell-shadow));
  overflow: hidden;
}

.hub-ui-live-preview--sticky {
  position: sticky;
  top: var(--hub-shell-sticky-top, 96px);
  max-height: calc(100vh - var(--hub-shell-sticky-top, 96px) - 16px);
}

.hub-ui-live-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line, var(--hub-shell-line));
  background: color-mix(in srgb, var(--surface-strong, #fff) 78%, transparent);
}

.hub-ui-live-preview-status {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 850;
  text-transform: uppercase;
}

.hub-ui-live-preview-tools {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
}

.hub-ui-live-preview-frame {
  min-height: 0;
  overflow: auto;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 114, 255, 0.12), transparent 42%),
    color-mix(in srgb, var(--surface-soft, #f6f8fd) 80%, var(--surface, #fff) 20%);
}

.hub-ui-live-preview-stage {
  width: min(100%, var(--hub-ui-live-preview-width, 1120px));
  min-height: 100%;
  margin: 0 auto;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: var(--surface-strong, #fff);
  color: var(--ink, var(--hub-shell-text));
  box-shadow: 0 20px 60px rgba(76, 55, 166, 0.14);
  overflow: hidden;
  transition: width 180ms ease, background 180ms ease, color 180ms ease;
}

.hub-ui-live-preview[data-hub-preview-width="mobile"] {
  --hub-ui-live-preview-width: 390px;
}

.hub-ui-live-preview[data-hub-preview-width="tablet"] {
  --hub-ui-live-preview-width: 768px;
}

.hub-ui-live-preview[data-hub-preview-width="full"] {
  --hub-ui-live-preview-width: 1120px;
}

.hub-ui-live-preview[data-hub-preview-theme="dark"] .hub-ui-live-preview-stage {
  background: #12142b;
  color: #f6f4ff;
}

.hub-ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  padding: 6px 11px;
  color: var(--ink, var(--hub-shell-text));
  background: var(--surface-strong, var(--hub-shell-surface-strong));
  font: inherit;
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

.hub-ui-button:hover,
.hub-ui-button:focus {
  border-color: var(--line-strong, rgba(107, 77, 255, 0.24));
  color: var(--accent-strong, var(--hub-shell-accent-strong));
  outline: 0;
}

.hub-ui-button--primary {
  border-color: var(--accent, var(--hub-shell-accent));
  color: #ffffff;
  background: var(--accent, var(--hub-shell-accent));
}

/* Primary needs its own hover: the base hover recolours the text to the
   accent, which on a primary (white-on-accent) would be invisible. Keep
   white text and deepen the button with a filter so it works in both
   themes without fighting the dark-theme background override's specificity. */
.hub-ui-button--primary:hover,
.hub-ui-button--primary:focus {
  color: #ffffff;
  filter: brightness(0.93);
}

.hub-ui-button--compact {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 0.78rem;
}

.hub-ui-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  max-width: 220px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 999px;
  padding: 4px 10px;
  color: var(--muted, var(--hub-shell-muted));
  background: rgba(255, 255, 255, 0.74);
  font-size: 0.76rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-ui-pill--ok {
  border-color: rgba(17, 122, 75, 0.24);
  color: #117a4b;
  background: #eefaf4;
}

.hub-ui-pill--warning {
  border-color: rgba(161, 92, 7, 0.26);
  color: var(--warning, #a15c07);
  background: rgba(244, 195, 109, 0.14);
}

.hub-ui-pill--danger {
  border-color: rgba(180, 35, 24, 0.24);
  color: #b42318;
  background: #fff1f0;
}

.hub-ui-definition-list {
  display: grid;
  grid-template-columns: minmax(110px, 0.45fr) minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.hub-ui-definition-list dt {
  color: var(--muted, var(--hub-shell-muted));
}

.hub-ui-definition-list dd {
  margin: 0;
  min-width: 0;
  color: var(--ink, var(--hub-shell-text));
  font-weight: 700;
  overflow-wrap: anywhere;
}

.hub-ui-list,
.hub-ui-table-list {
  display: grid;
  gap: 8px;
}

.hub-ui-list--empty {
  min-height: clamp(360px, 52vh, 620px);
}

.hub-ui-list-item,
.hub-ui-card-item,
.hub-ui-table-row,
.hub-ui-empty-state {
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft, #f6f8fd) 86%, var(--surface, #fff) 14%);
  padding: 12px;
}

.hub-ui-card-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  min-height: 104px;
  color: var(--text, var(--hub-shell-text));
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.hub-ui-card-item:hover,
.hub-ui-card-item:focus-within,
.hub-ui-card-item.selected,
.hub-ui-card-item.active {
  border-color: color-mix(in srgb, var(--accent-strong, #6d4dff) 42%, transparent);
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--surface, #ffffff) 88%, var(--accent-soft, rgba(131, 102, 255, 0.11)) 12%),
      color-mix(in srgb, var(--surface-soft, #f6f8fd) 82%, var(--accent-soft, rgba(131, 102, 255, 0.11)) 18%)
    ),
    color-mix(in srgb, var(--surface, #ffffff) 84%, var(--accent-soft, rgba(131, 102, 255, 0.11)) 16%);
  box-shadow: 0 18px 44px rgba(83, 62, 163, 0.12);
  transform: translateY(-1px);
}

.hub-ui-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.hub-ui-list-item small,
.hub-ui-table-row small,
.hub-ui-empty-state small {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 650;
}

.hub-ui-list-item strong,
.hub-ui-table-row strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.hub-ui-list-item p,
.hub-ui-empty-state p {
  margin: 4px 0 0;
  color: var(--muted, var(--hub-shell-muted));
}

.hub-ui-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 12px;
  align-items: center;
}

.hub-ui-empty-state {
  border-style: dashed;
  color: var(--muted, var(--hub-shell-muted));
}

.hub-ui-empty-page {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: clamp(360px, 52vh, 620px);
  box-sizing: border-box;
  padding: clamp(28px, 5vw, 58px);
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 114, 255, 0.13), transparent 42%),
    color-mix(in srgb, var(--surface, #ffffff) 68%, var(--surface-soft, #f6f8fd) 32%);
}

.hub-ui-empty-page-card {
  display: grid;
  justify-items: center;
  gap: 13px;
  width: min(100%, 460px);
  text-align: center;
  color: var(--muted, var(--hub-shell-muted));
}

.hub-ui-empty-page-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  color: #ffffff;
  background: linear-gradient(135deg, #315dff 0%, #7f4dff 55%, #c43cd7 100%);
  box-shadow: 0 16px 34px rgba(78, 82, 220, 0.26);
}

.hub-ui-empty-page-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  stroke-width: 1.9;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hub-ui-empty-page-card strong {
  color: var(--ink, var(--hub-shell-text));
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.1;
}

.hub-ui-empty-page-card p {
  margin: 0;
  line-height: 1.55;
}

.hub-ui-empty-page-separator {
  width: min(280px, 100%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 4px auto 0;
  color: var(--muted, var(--hub-shell-muted));
}

.hub-ui-empty-page-separator span {
  height: 1px;
  background: rgba(111, 75, 216, 0.18);
}

.hub-ui-empty-page-separator strong {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.76rem;
  font-weight: 850;
  text-transform: uppercase;
}

.hub-ui-empty-state--fill {
  min-height: clamp(320px, 42vh, 520px);
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(28px, 5vw, 56px);
}

.hub-ui-empty-state--fill strong {
  color: var(--ink, var(--hub-shell-text));
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  line-height: 1.1;
}

.hub-ui-empty-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.hub-ui-callout {
  width: min(100%, var(--hub-ui-operational-max, 1327px));
  max-width: var(--hub-ui-operational-max, 1327px);
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  background: var(--surface, var(--hub-shell-surface));
  color: var(--muted, var(--hub-shell-muted));
  padding: 12px 14px;
  overflow-wrap: anywhere;
}

.hub-ui-callout--warning {
  border-color: rgba(161, 92, 7, 0.26);
  background: rgba(244, 195, 109, 0.12);
  color: var(--warning, #a15c07);
}

html[data-hub-theme="dark"] .hub-module-filter-group,
html[data-hub-theme="dark"] .hub-ui-tab-list {
  border-color: rgba(199, 184, 255, 0.16);
  background: rgba(18, 20, 43, 0.74);
}

html[data-hub-theme="dark"] .hub-module-sidebar-card,
html[data-hub-theme="dark"] .hub-ui-status-card,
html[data-hub-theme="dark"] .hub-ui-filter-toolbar,
html[data-hub-theme="dark"] .hub-ui-panel,
html[data-hub-theme="dark"] .hub-ui-callout {
  color: var(--ink);
  border-color: var(--line);
  background: var(--surface, var(--hub-shell-surface));
}

html[data-hub-theme="dark"] .hub-ui-button,
html[data-hub-theme="dark"] .hub-ui-pill {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(18, 20, 43, 0.72);
}

html[data-hub-theme="dark"] .hub-ui-button--primary {
  color: #ffffff;
  background: var(--accent, var(--hub-shell-accent));
}

html[data-hub-theme="dark"] .hub-ui-pill--ok {
  color: #b9fbff;
  border-color: rgba(185, 251, 255, 0.24);
  background: rgba(45, 174, 181, 0.14);
}

html[data-hub-theme="dark"] .hub-ui-pill--warning {
  color: #f4c36d;
  border-color: rgba(244, 195, 109, 0.26);
  background: rgba(244, 195, 109, 0.14);
}

html[data-hub-theme="dark"] .hub-ui-pill--danger {
  color: #ffc5e1;
  border-color: rgba(255, 197, 225, 0.24);
  background: rgba(188, 81, 138, 0.16);
}

html[data-hub-theme="dark"] .hub-ui-list-item,
html[data-hub-theme="dark"] .hub-ui-card-item,
html[data-hub-theme="dark"] .hub-ui-table-row,
html[data-hub-theme="dark"] .hub-ui-empty-state,
html[data-hub-theme="dark"] .hub-ui-thumb,
html[data-hub-theme="dark"] .hub-ui-live-preview {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(18, 20, 43, 0.72);
}

html[data-hub-theme="dark"] .hub-ui-card-item:hover,
html[data-hub-theme="dark"] .hub-ui-card-item:focus-within,
html[data-hub-theme="dark"] .hub-ui-card-item.selected,
html[data-hub-theme="dark"] .hub-ui-card-item.active,
html[data-hub-theme="dark"] .hub-ui-thumb:hover,
html[data-hub-theme="dark"] .hub-ui-thumb:focus-visible,
html[data-hub-theme="dark"] .hub-ui-thumb.active,
html[data-hub-theme="dark"] .hub-ui-thumb[aria-selected="true"] {
  border-color: rgba(199, 184, 255, 0.34);
  background:
    linear-gradient(145deg, rgba(33, 29, 66, 0.86), rgba(18, 20, 43, 0.82)),
    rgba(139, 114, 255, 0.16);
  box-shadow: 0 18px 44px rgba(7, 9, 28, 0.34);
}

html[data-hub-theme="dark"] .hub-ui-empty-page {
  color: var(--ink);
  border-color: var(--line);
  background:
    radial-gradient(circle at 50% 0%, rgba(139, 114, 255, 0.18), transparent 44%),
    rgba(18, 20, 43, 0.72);
}

html[data-hub-theme="dark"] .hub-ui-search {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(18, 20, 43, 0.72);
}

html[data-hub-theme="dark"] .hub-ui-thumb-frame,
html[data-hub-theme="dark"] .hub-ui-live-preview-stage {
  border-color: var(--line);
  background: rgba(11, 13, 34, 0.82);
}

html[data-hub-theme="dark"] .hub-ui-live-preview-bar {
  border-color: var(--line);
  background: rgba(18, 20, 43, 0.76);
}

html[data-hub-theme="dark"] .hub-autocomplete-menu {
  border-color: rgba(214, 206, 255, 0.34);
  background:
    linear-gradient(180deg, rgba(43, 46, 82, 0.98), rgba(28, 31, 58, 0.98)),
    #25294a;
  box-shadow: 0 22px 55px rgba(4, 6, 20, 0.42);
}

html[data-hub-theme="dark"] .hub-autocomplete-option {
  color: #f7f8ff;
}

html[data-hub-theme="dark"] .hub-autocomplete-option small,
html[data-hub-theme="dark"] .hub-autocomplete-empty {
  color: rgba(218, 222, 255, 0.66);
}

html[data-hub-theme="dark"] .hub-autocomplete-option:hover,
html[data-hub-theme="dark"] .hub-autocomplete-option.is-active {
  color: #ffffff;
  background: rgba(139, 114, 255, 0.24);
}

html[data-hub-theme="dark"] .hub-ui-icon-switch {
  border-color: var(--line);
  background: rgba(18, 20, 43, 0.72);
}

html[data-hub-theme="dark"] .hub-ui-icon-switch::before {
  background: rgba(31, 34, 66, 0.96);
}

html[data-hub-theme="dark"] .hub-module-filter-button:hover,
html[data-hub-theme="dark"] .hub-module-filter-button.active {
  color: #f6f3ff;
  background: rgba(148, 116, 255, 0.2);
}

html[data-hub-theme="dark"] .hub-ui-counter-badge,
html[data-hub-theme="dark"] .hub-module-filter-count {
  color: #ffffff;
  background: linear-gradient(135deg, #8b72ff, #6b4dff);
  box-shadow: 0 6px 16px rgba(139, 114, 255, 0.3);
}

html[data-hub-theme="dark"] .hub-module-nav-item:hover,
html[data-hub-theme="dark"] .hub-module-nav-item.active {
  color: #f6f3ff;
  border-color: rgba(193, 181, 255, 0.24);
  background: rgba(148, 116, 255, 0.2);
}

html[data-hub-theme="dark"] .hub-module-nav-item small {
  border-color: rgba(193, 181, 255, 0.16);
  background: rgba(18, 20, 43, 0.72);
}

html[data-hub-theme="dark"] .hub-module-menu-back {
  color: #f6f3ff;
  border-color: rgba(193, 181, 255, 0.18);
  background: rgba(18, 20, 43, 0.72);
}

@media (max-width: 1180px) {
  .hub-ui-status-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .hub-ui-filter-toolbar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .hub-ui-grid--two,
  .hub-ui-grid--three,
  .hub-ui-card-grid--three {
    grid-template-columns: 1fr;
  }

  .hub-module-layout {
    grid-template-columns: 1fr;
  }

  .hub-module-sidebar {
    position: static;
    max-height: none;
  }

  .hub-module-section-heading {
    flex-direction: column;
    align-items: stretch;
  }

  .hub-module-toolbar {
    margin-left: 0;
    justify-content: flex-start;
  }

  .hub-module-filter-area {
    align-self: flex-end;
    justify-content: flex-end;
    margin-left: auto;
  }

}

@media (max-width: 980px) {
  .hub-ui-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hub-ui-footer-action__copy {
    display: none;
  }

  .hub-ui-footer-action__body {
    justify-content: flex-end;
  }
}

@media (max-width: 680px) {
  .hub-ui-status-grid,
  .hub-ui-filter-toolbar {
    grid-template-columns: 1fr;
  }

  .hub-ui-list-item,
  .hub-ui-table-row {
    grid-template-columns: 1fr;
  }

  .hub-ui-form-grid {
    grid-template-columns: 1fr;
  }

  .hub-ui-status-card {
    aspect-ratio: auto;
    min-height: 112px;
  }
}

body.has-hub-shell,
body.has-hub-shell button,
body.has-hub-shell input,
body.has-hub-shell select,
body.has-hub-shell textarea {
  font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.has-hub-shell input:not([data-hub-search-input]):not([data-hub-control-bare]):focus,
body.has-hub-shell select:not([data-hub-control-bare]):focus,
body.has-hub-shell textarea:not([data-hub-control-bare]):focus {
  border-color: var(--hub-control-focus-border) !important;
  box-shadow: var(--hub-control-focus-shadow) !important;
  outline: 0 !important;
}

html[data-hub-theme="dark"] {
  --bg: #0f1020;
  --surface: rgba(19, 20, 41, 0.84);
  --surface-soft: rgba(20, 22, 46, 0.92);
  --surface-strong: #171931;
  --ink: #edf0ff;
  --text: #edf0ff;
  --muted: #aab0d8;
  --line: rgba(166, 154, 255, 0.16);
  --line-strong: rgba(193, 181, 255, 0.24);
  --primary: #8b72ff;
  --primary-dark: #725cff;
  --primary-strong: #c1b5ff;
  --primary-soft: rgba(139, 114, 255, 0.24);
  --accent: #8b72ff;
  --accent-strong: #c1b5ff;
  --accent-soft: rgba(139, 114, 255, 0.24);
  --hub-control-focus-border: rgba(193, 181, 255, 0.34);
  --hub-control-focus-shadow: 0 0 0 3px rgba(139, 114, 255, 0.14);
  --violet: #8b72ff;
  --success: #b9fbff;
  --success-soft: rgba(45, 174, 181, 0.14);
  --warning: #f4c36d;
  --warning-soft: rgba(244, 195, 109, 0.14);
  --danger: #ffc5e1;
  --danger-soft: rgba(188, 81, 138, 0.16);
  --shadow: 0 26px 60px rgba(4, 6, 20, 0.42);
  --hub-shell-bg: rgba(17, 19, 38, 0.94);
  --hub-shell-surface: rgba(19, 20, 41, 0.84);
  --hub-shell-surface-strong: #171931;
  --hub-shell-ink: #edf0ff;
  --hub-shell-muted: #aab0d8;
  --hub-shell-line: rgba(166, 154, 255, 0.16);
  --hub-shell-accent: #8b72ff;
  --hub-shell-accent-strong: #c1b5ff;
  --hub-shell-shadow: 0 26px 60px rgba(4, 6, 20, 0.42);
}

html[data-hub-theme="dark"] body.has-hub-shell {
  --bg: #0f1020;
  --surface: rgba(19, 20, 41, 0.84);
  --surface-soft: rgba(20, 22, 46, 0.92);
  --surface-strong: #171931;
  --ink: #edf0ff;
  --text: #edf0ff;
  --muted: #aab0d8;
  --line: rgba(166, 154, 255, 0.16);
  --line-strong: rgba(193, 181, 255, 0.24);
  --primary: #8b72ff;
  --primary-dark: #725cff;
  --primary-strong: #c1b5ff;
  --primary-soft: rgba(139, 114, 255, 0.24);
  --accent: #8b72ff;
  --accent-strong: #c1b5ff;
  --accent-soft: rgba(139, 114, 255, 0.24);
  --hub-control-focus-border: rgba(193, 181, 255, 0.34);
  --hub-control-focus-shadow: 0 0 0 3px rgba(139, 114, 255, 0.14);
  --violet: #8b72ff;
  --success: #b9fbff;
  --success-soft: rgba(45, 174, 181, 0.14);
  --warning: #f4c36d;
  --warning-soft: rgba(244, 195, 109, 0.14);
  --danger: #ffc5e1;
  --danger-soft: rgba(188, 81, 138, 0.16);
  --shadow: 0 26px 60px rgba(4, 6, 20, 0.42);
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(139, 114, 255, 0.24), transparent 28%),
    radial-gradient(circle at top right, rgba(80, 213, 255, 0.14), transparent 24%),
    linear-gradient(180deg, #111325 0%, #0c1020 48%, #090b16 100%) !important;
}

html[data-hub-theme="dark"] body.has-hub-shell,
html[data-hub-theme="dark"] .hub-shell-header,
html[data-hub-theme="dark"] .hub-shell-user-menu,
html[data-hub-theme="dark"] .hub-shell-nav-panel,
html[data-hub-theme="dark"] .hub-shell-search-panel,
html[data-hub-theme="dark"] .hub-themed-select__menu,
html[data-hub-theme="dark"] .hub-shell-context-dock {
  color: var(--hub-shell-ink);
}

html[data-hub-theme="dark"] body.has-hub-shell input:not([data-hub-search-input]),
html[data-hub-theme="dark"] body.has-hub-shell select,
html[data-hub-theme="dark"] body.has-hub-shell textarea {
  color: var(--ink);
  border-color: var(--line);
  background: rgba(18, 20, 40, 0.96);
}

html[data-hub-theme="dark"] body.has-hub-shell input:not([data-hub-search-input])::placeholder,
html[data-hub-theme="dark"] body.has-hub-shell textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 48%, transparent);
  font-weight: 800;
  opacity: 1;
}

html[data-hub-theme="dark"] body.has-hub-shell input:not([data-hub-search-input]):not([data-hub-control-bare]):focus,
html[data-hub-theme="dark"] body.has-hub-shell select:not([data-hub-control-bare]):focus,
html[data-hub-theme="dark"] body.has-hub-shell textarea:not([data-hub-control-bare]):focus {
  border-color: var(--hub-control-focus-border);
  box-shadow: var(--hub-control-focus-shadow);
  outline: 0;
}

.hub-shell-mount {
  position: sticky;
  top: 0;
  z-index: 80;
  width: min(1760px, calc(100% - 24px));
  margin: 0 auto;
}

.hub-shell-header {
  display: grid;
  grid-template-columns: minmax(180px, auto) auto minmax(280px, 480px) auto;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 78px;
  padding: 14px clamp(14px, 2vw, 28px);
  border: 1px solid var(--hub-shell-line);
  border-top: 0;
  border-radius: 0 0 18px 18px;
  color: var(--hub-shell-ink);
  background: var(--hub-shell-bg);
  box-shadow: var(--hub-shell-shadow);
  backdrop-filter: blur(18px);
  transition:
    opacity 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.hub-shell-header--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-100% - 18px));
}

.hub-shell-header:focus-within {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.hub-shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.hub-shell-brand-logo {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
}

.hub-shell-logo {
  display: block;
  width: 40px;
  height: 40px;
}

.hub-shell-logo--dark {
  display: none;
}

html[data-hub-theme="dark"] .hub-shell-logo--light {
  display: none;
}

html[data-hub-theme="dark"] .hub-shell-logo--dark {
  display: block;
}

.hub-shell-brand-copy {
  display: grid;
  min-width: 0;
  line-height: 1.05;
}

.hub-shell-brand-copy strong,
.hub-shell-user-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-shell-brand-copy strong {
  font-size: 1rem;
  font-weight: 900;
}

.hub-shell-brand-copy small {
  margin-top: 4px;
  color: var(--hub-shell-muted);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-shell-nav {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 22px);
  min-width: 230px;
}

.hub-shell-nav a {
  color: var(--hub-shell-ink);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 400;
}

.hub-shell-nav a::after {
  content: attr(data-label);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 600;
  visibility: hidden;
}

.hub-shell-nav a:hover,
.hub-shell-nav a.is-active {
  color: var(--hub-shell-accent-strong);
  font-weight: 600;
}

.hub-shell-nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 12px;
  padding: 10px;
  color: var(--hub-shell-ink);
  background: color-mix(in srgb, var(--hub-shell-surface-strong) 80%, transparent);
  cursor: pointer;
}

.hub-shell-nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 999px;
  background: currentColor;
}

.hub-shell-nav-toggle span + span {
  margin-top: 5px;
}

.hub-shell-nav-toggle:hover,
.hub-shell-nav-toggle:focus,
.hub-shell-nav-toggle[aria-expanded="true"] {
  border-color: rgba(111, 75, 216, 0.42);
  color: var(--hub-shell-accent-strong);
  outline: 0;
}

.hub-shell-nav-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 188px;
  z-index: 96;
  display: grid;
  min-width: 220px;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(111, 75, 216, 0.24);
  border-radius: 14px;
  background: var(--hub-shell-surface-strong);
  box-shadow: 0 24px 70px rgba(33, 25, 18, 0.2);
}

.hub-shell-nav-panel[hidden] {
  display: none;
}

.hub-shell-nav-panel a {
  min-height: 38px;
  border-radius: 10px;
  padding: 9px 10px;
  color: var(--hub-shell-ink);
  text-decoration: none;
  font-weight: 400;
}

.hub-shell-nav-panel a:hover,
.hub-shell-nav-panel a:focus,
.hub-shell-nav-panel a.is-active {
  color: var(--hub-shell-accent-strong);
  background: rgba(111, 75, 216, 0.08);
  font-weight: 600;
  outline: 0;
}

.hub-shell-search {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  width: clamp(280px, 32vw, 480px);
  max-width: 480px;
  padding: 0 16px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 14px;
  color: var(--hub-shell-muted);
  background: color-mix(in srgb, var(--hub-shell-surface-strong) 78%, transparent);
}

.hub-shell-search:focus-within {
  border-color: rgba(111, 75, 216, 0.42);
  box-shadow: 0 18px 44px rgba(111, 75, 216, 0.13);
}

.hub-shell-search-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.hub-shell-search input {
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: 0;
  color: var(--hub-shell-ink);
  background: transparent;
  font: inherit;
}

body.has-hub-shell .hub-shell-search input,
html[data-hub-theme="dark"] body.has-hub-shell .hub-shell-search input {
  width: auto;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--hub-shell-ink);
  background: transparent;
  box-shadow: none;
}

body.has-hub-shell .hub-shell-search input:focus {
  border: 0;
  box-shadow: none;
}

.hub-shell-search-panel,
.hub-shell-user-menu {
  position: absolute;
  z-index: 95;
  display: grid;
  gap: 8px;
  border: 1px solid rgba(111, 75, 216, 0.24);
  border-radius: 16px;
  background: var(--hub-shell-surface-strong);
  box-shadow: 0 24px 70px rgba(33, 25, 18, 0.2);
}

.hub-shell-search-panel[hidden],
.hub-shell-user-menu[hidden],
.hub-shell-context-switcher[hidden],
.hub-shell-control-button[hidden] {
  display: none;
}

.hub-shell-search-panel {
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  padding: 10px;
}

.hub-shell-result {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.hub-shell-result:hover,
.hub-shell-result:focus {
  border-color: rgba(111, 75, 216, 0.24);
  background: rgba(111, 75, 216, 0.08);
  outline: 0;
}

.hub-shell-result strong {
  font-size: 0.92rem;
}

.hub-shell-result span,
.hub-shell-empty {
  color: var(--hub-shell-muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.hub-shell-actions {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.hub-shell-status-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hub-shell-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 10px;
  color: var(--hub-shell-muted);
  background: rgba(255, 255, 255, 0.72);
  font-size: 0.78rem;
  font-weight: 850;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-hub-theme="dark"] .hub-shell-pill {
  background: rgba(20, 22, 45, 0.78);
}

html[data-hub-theme="dark"] .hub-shell-pill--ok {
  border-color: rgba(185, 251, 255, 0.24);
  color: #b9fbff;
  background: rgba(45, 174, 181, 0.14);
}

html[data-hub-theme="dark"] .hub-shell-pill--warning {
  border-color: rgba(244, 195, 109, 0.26);
  color: #f4c36d;
  background: rgba(244, 195, 109, 0.14);
}

html[data-hub-theme="dark"] .hub-shell-pill--locked {
  border-color: rgba(255, 197, 225, 0.24);
  color: #ffc5e1;
  background: rgba(188, 81, 138, 0.16);
}

.hub-shell-pill--ok {
  border-color: rgba(17, 122, 75, 0.28);
  color: #117a4b;
  background: #eefaf4;
}

.hub-shell-pill--warning {
  border-color: rgba(161, 92, 7, 0.28);
  color: #a15c07;
  background: #fff7e6;
}

.hub-shell-pill--locked {
  border-color: rgba(180, 35, 24, 0.26);
  color: #b42318;
  background: #fff1f0;
}

.hub-shell-user {
  position: relative;
  min-width: 0;
}

.hub-shell-user::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: -260px;
  height: 22px;
  pointer-events: none;
}

.hub-shell-user:hover::after,
.hub-shell-user.is-open::after {
  pointer-events: auto;
}

.hub-shell-user-button,
.hub-shell-control-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 13px;
  padding: 9px 13px;
  color: var(--hub-shell-ink);
  background: rgba(255, 255, 255, 0.76);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 400;
  cursor: pointer;
}

html[data-hub-theme="dark"] .hub-shell-user-button,
html[data-hub-theme="dark"] .hub-shell-control-button {
  background: rgba(20, 22, 45, 0.78);
}

.hub-shell-user-button {
  gap: 8px;
  max-width: 240px;
}

.hub-shell-user-button:hover,
.hub-shell-control-button:hover {
  background: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}

html[data-hub-theme="dark"] .hub-shell-user-button:hover,
html[data-hub-theme="dark"] .hub-shell-control-button:hover {
  background: rgba(27, 31, 58, 0.96);
}

.hub-shell-user-caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 2px solid var(--hub-shell-muted);
  border-bottom: 2px solid var(--hub-shell-muted);
  transform: translateY(-2px) rotate(45deg);
}

.hub-shell-user-menu {
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  min-width: 280px;
  padding: 10px;
}

.hub-shell-menu-header {
  display: grid;
  gap: 3px;
  padding: 10px 11px;
  border-bottom: 1px solid var(--hub-shell-line);
}

.hub-shell-menu-header strong {
  overflow-wrap: anywhere;
}

.hub-shell-menu-header span {
  color: var(--hub-shell-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.hub-shell-menu-status {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 8px 10px 4px;
}

.hub-shell-theme-switcher {
  display: grid;
  gap: 6px;
  padding: 9px 10px;
  color: var(--hub-shell-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.hub-shell-theme-switcher select {
  min-height: 36px;
  width: 100%;
  border: 1px solid var(--hub-shell-line);
  border-radius: 10px;
  padding: 6px 28px 6px 10px;
  color: var(--hub-shell-ink);
  background: var(--hub-shell-surface-strong);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 800;
}

.hub-shell-menu-item {
  display: flex;
  align-items: center;
  min-height: 38px;
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 9px 10px;
  color: inherit;
  background: transparent;
  text-align: left;
  text-decoration: none;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 400;
  cursor: pointer;
}

.hub-shell-menu-item:hover,
.hub-shell-menu-item:focus {
  color: var(--hub-shell-accent-strong);
  background: rgba(111, 75, 216, 0.08);
  font-weight: 600;
  outline: 0;
}

.hub-shell-menu-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px 10px 4px;
}

.hub-shell-menu-action {
  justify-content: center;
  border: 1px solid var(--hub-shell-line);
  text-align: center;
}

.hub-shell-menu-action--primary {
  border-color: rgba(111, 75, 216, 0.34);
  color: var(--hub-shell-accent-strong);
  background: rgba(111, 75, 216, 0.08);
}

.hub-shell-menu-action--primary:hover,
.hub-shell-menu-action--primary:focus {
  color: #ffffff;
  background: var(--hub-shell-accent);
}

.hub-shell-menu-action--danger {
  border-color: rgba(111, 75, 216, 0.18);
  color: var(--hub-shell-ink);
  background: var(--hub-shell-surface-strong);
}

.hub-shell-menu-action--danger:hover,
.hub-shell-menu-action--danger:focus {
  color: #ffffff;
  background: var(--hub-shell-accent-strong);
}

.hub-shell-context-switcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 220px;
  color: var(--hub-shell-muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.hub-shell-user-menu .hub-shell-context-switcher {
  display: grid;
  align-items: start;
  gap: 6px;
  min-width: 0;
  padding: 9px 10px;
}

.hub-shell-user-menu .hub-shell-context-switcher[hidden] {
  display: none;
}

.hub-shell-user-menu .hub-shell-context-switcher select {
  width: 100%;
}

.hub-shell-context-switcher select {
  min-height: 34px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 10px;
  padding: 6px 28px 6px 10px;
  color: var(--hub-shell-ink);
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
}

html[data-hub-theme="dark"] .hub-shell-context-switcher select {
  background: var(--hub-shell-surface-strong);
}

.hub-themed-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.hub-themed-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.hub-themed-select__button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  width: 100%;
  border: 1px solid var(--hub-shell-line);
  border-radius: 10px;
  padding: 8px 11px;
  color: var(--hub-shell-ink);
  background: var(--hub-shell-surface-strong);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.hub-themed-select__button:hover,
.hub-themed-select__button:focus,
.hub-themed-select.is-open .hub-themed-select__button {
  border-color: rgba(111, 75, 216, 0.42);
  box-shadow: 0 12px 34px rgba(111, 75, 216, 0.12);
  font-weight: 600;
  outline: 0;
}

.hub-themed-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-themed-select__chevron {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--hub-shell-muted);
  border-bottom: 2px solid var(--hub-shell-muted);
  transform: translateY(-2px) rotate(45deg);
}

.hub-themed-select.is-open .hub-themed-select__chevron {
  transform: translateY(2px) rotate(225deg);
}

/* Inline autocomplete combobox */
.hub-themed-combobox { position: relative; }

.hub-themed-select__field {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 10px;
  padding: 8px 34px 8px 12px;
  color: var(--hub-shell-ink);
  background: var(--hub-shell-surface-strong);
  font: inherit;
  font-size: 0.84rem;
}

.hub-themed-combobox .hub-themed-select__chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.hub-themed-combobox.is-open .hub-themed-select__chevron {
  transform: translateY(-35%) rotate(225deg);
}

.hub-themed-combobox.is-open .hub-themed-select__field {
  border-color: rgba(111, 75, 216, 0.42);
  box-shadow: 0 12px 34px rgba(111, 75, 216, 0.12);
  outline: 0;
}

/* Clear (×) button: shown only when the combobox has a value, sits left of
   the chevron. */
.hub-themed-combobox .hub-themed-select__field { padding-right: 52px; }

.hub-themed-select__clear {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--hub-shell-muted);
  background: transparent;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.hub-themed-select__clear:hover,
.hub-themed-select__clear:focus-visible {
  color: var(--hub-shell-ink);
  background: color-mix(in srgb, var(--hub-shell-muted) 18%, transparent);
  outline: 0;
}

.hub-themed-select__option.is-active {
  background: rgba(111, 75, 216, 0.12);
}

.hub-themed-select__empty {
  padding: 9px 10px;
  color: var(--hub-shell-muted);
  font-size: 0.82rem;
}

.hub-themed-select__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 130;
  display: grid;
  gap: 4px;
  max-height: 260px;
  padding: 6px;
  border: 1px solid rgba(111, 75, 216, 0.24);
  border-radius: 12px;
  background: var(--hub-shell-surface-strong);
  box-shadow: 0 22px 54px rgba(33, 25, 18, 0.2);
  overflow: auto;
}

.hub-themed-select__menu[hidden] {
  display: none;
}

.hub-themed-select__search {
  position: sticky;
  top: 0;
  z-index: 1;
  width: 100%;
  margin-bottom: 2px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--hub-shell-ink);
  background: var(--hub-shell-surface-strong);
  font: inherit;
  font-size: 0.82rem;
}

/* The search is data-hub-control-bare (skips the global control focus), so it
   needs its own themed focus instead of the browser's black outline. */
.hub-themed-select__search:focus {
  border-color: var(--hub-control-focus-border);
  box-shadow: var(--hub-control-focus-shadow);
  outline: 0;
}

/* Themed, slim scrollbars for shell scroll surfaces (menus, drawers, lists)
   instead of the chunky grey OS bars. */
.hub-themed-select__menu,
.hub-ui-drawer-body,
.bdg-voci-scroll,
.hub-ui-modal,
.hub-ui-list,
.hub-ui-table-list,
.hub-ui-status-grid {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent, #6b4dff) 38%, transparent) transparent;
}

.hub-themed-select__menu::-webkit-scrollbar,
.hub-ui-drawer-body::-webkit-scrollbar,
.bdg-voci-scroll::-webkit-scrollbar,
.hub-ui-modal::-webkit-scrollbar,
.hub-ui-list::-webkit-scrollbar,
.hub-ui-table-list::-webkit-scrollbar,
.hub-ui-status-grid::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.hub-themed-select__menu::-webkit-scrollbar-thumb,
.hub-ui-drawer-body::-webkit-scrollbar-thumb,
.bdg-voci-scroll::-webkit-scrollbar-thumb,
.hub-ui-modal::-webkit-scrollbar-thumb,
.hub-ui-list::-webkit-scrollbar-thumb,
.hub-ui-table-list::-webkit-scrollbar-thumb,
.hub-ui-status-grid::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent, #6b4dff) 34%, transparent);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}

.hub-themed-select__menu::-webkit-scrollbar-thumb:hover,
.hub-ui-drawer-body::-webkit-scrollbar-thumb:hover,
.bdg-voci-scroll::-webkit-scrollbar-thumb:hover,
.hub-ui-modal::-webkit-scrollbar-thumb:hover,
.hub-ui-list::-webkit-scrollbar-thumb:hover,
.hub-ui-table-list::-webkit-scrollbar-thumb:hover,
.hub-ui-status-grid::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent, #6b4dff) 55%, transparent);
  background-clip: padding-box;
}

.hub-themed-select__menu::-webkit-scrollbar-track,
.hub-ui-drawer-body::-webkit-scrollbar-track,
.bdg-voci-scroll::-webkit-scrollbar-track,
.hub-ui-modal::-webkit-scrollbar-track,
.hub-ui-list::-webkit-scrollbar-track,
.hub-ui-table-list::-webkit-scrollbar-track,
.hub-ui-status-grid::-webkit-scrollbar-track {
  background: transparent;
}

.hub-shell-user-menu .hub-themed-select__menu {
  position: static;
  margin-top: 6px;
}

.hub-themed-select__option {
  min-height: 34px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--hub-shell-ink);
  background: transparent;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 400;
  text-align: left;
  cursor: pointer;
}

.hub-themed-select__option:hover,
.hub-themed-select__option:focus,
.hub-themed-select__option.is-selected {
  color: var(--hub-shell-accent-strong);
  background: rgba(111, 75, 216, 0.08);
  font-weight: 600;
  outline: 0;
}

.hub-themed-select__option:disabled,
.hub-themed-select__button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.crm-sidebar .hub-themed-select__button,
.comm-sidebar .hub-themed-select__button,
.workspace-sidebar .hub-themed-select__button,
.work-sidebar .hub-themed-select__button {
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.crm-sidebar .hub-themed-select__menu,
.comm-sidebar .hub-themed-select__menu,
.workspace-sidebar .hub-themed-select__menu,
.work-sidebar .hub-themed-select__menu {
  color: #ffffff;
  background: #1b2440;
}

body.has-hub-shell .side-link,
body.has-hub-shell .portal-nav-item {
  font-weight: 400 !important;
}

body.has-hub-shell .side-link:hover,
body.has-hub-shell .side-link.active,
body.has-hub-shell .portal-nav-item:hover,
body.has-hub-shell .portal-nav-item.active {
  font-weight: 600 !important;
}

.hub-shell-context-dock {
  position: fixed;
  right: 24px;
  top: var(--hub-shell-sticky-top, 96px);
  z-index: 76;
  display: grid;
  gap: 12px;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 16px;
  color: var(--hub-shell-ink);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 70px rgba(33, 25, 18, 0.18);
  backdrop-filter: blur(16px);
  transition: top 180ms ease;
}

body.has-hub-shell .portal-sidebar,
body.has-hub-shell .hub-module-sidebar,
body.has-hub-shell .workbench-menu-panel,
body.has-hub-shell .beta-workspace-card {
  top: var(--hub-shell-sticky-top, 96px) !important;
  transition: top 180ms ease;
}

html[data-hub-theme="dark"] .hub-shell-context-dock {
  background: rgba(17, 19, 38, 0.94);
}

.hub-shell-context-dock[hidden] {
  display: none;
}

.hub-shell-context-dock--warning {
  border-color: rgba(161, 92, 7, 0.28);
  background: rgba(255, 250, 240, 0.96);
}

.hub-shell-context-dock--critical,
.hub-shell-context-dock--danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: rgba(255, 247, 246, 0.96);
}

.hub-shell-context-dock--success,
.hub-shell-context-dock--ok {
  border-color: rgba(17, 122, 75, 0.28);
  background: rgba(238, 250, 244, 0.96);
}

.hub-shell-context-dock--inline {
  position: static;
  width: min(720px, 100%);
  margin: 12px auto 0;
}

.hub-shell-context-dock__copy {
  display: grid;
  gap: 5px;
}

.hub-shell-context-dock__copy span {
  color: var(--hub-shell-accent-strong);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hub-shell-context-dock__copy strong {
  font-size: 0.98rem;
  line-height: 1.22;
}

.hub-shell-context-dock__copy p {
  margin: 0;
  color: var(--hub-shell-muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.hub-shell-context-dock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hub-shell-context-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--hub-shell-line);
  border-radius: 11px;
  padding: 8px 12px;
  color: var(--hub-shell-ink);
  background: #ffffff;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 850;
  cursor: pointer;
}

html[data-hub-theme="dark"] .hub-shell-context-button {
  background: var(--hub-shell-surface-strong);
}

.hub-shell-context-button--primary {
  border-color: var(--hub-shell-accent);
  color: #ffffff;
  background: var(--hub-shell-accent);
}

.hub-shell-context-button--danger {
  border-color: rgba(180, 35, 24, 0.3);
  color: #b42318;
  background: #fff1f0;
}

.hub-shell-context-button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.hub-shell-mode-focus {
  width: min(100%, calc(100% - 24px));
}

.hub-shell-mode-focus .hub-shell-header {
  min-height: 64px;
  grid-template-columns: minmax(180px, auto) auto minmax(180px, 1fr) auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.hub-shell-mode-focus .hub-shell-brand-logo {
  width: 40px;
  height: 40px;
}

.hub-shell-mode-suite {
  width: min(100%, calc(100% - 16px));
}

.hub-shell-mode-suite .hub-shell-header {
  grid-template-columns: minmax(200px, auto) auto minmax(0, 1fr) auto;
}

.hub-shell-mode-suite .hub-shell-nav {
  display: none;
}

.hub-shell-mode-suite::before {
  content: "";
  display: none;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  width: 72px;
  border-right: 1px solid var(--hub-shell-line);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 14px 0 38px rgba(51, 36, 23, 0.08);
  pointer-events: none;
}

.hub-ui-dropzone {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  min-height: var(--hub-ui-dropzone-min-height, 260px);
  padding: var(--hub-ui-dropzone-padding, 30px);
  border: 1.5px dashed color-mix(in srgb, var(--hub-shell-accent, #6f42ff) 42%, transparent);
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--hub-shell-accent, #6f42ff) 14%, transparent), transparent 52%),
    color-mix(in srgb, var(--hub-shell-panel, #fff) 86%, transparent);
  text-align: center;
  cursor: pointer;
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.hub-ui-dropzone--adaptive {
  min-height: var(--hub-ui-dropzone-min-height, 220px);
  height: clamp(
    var(--hub-ui-dropzone-min-height, 220px),
    var(--hub-ui-dropzone-height, 34vh),
    var(--hub-ui-dropzone-max-height, 380px)
  );
}

.hub-ui-dropzone [data-dropzone-drag] {
  display: none;
}

.hub-ui-dropzone.is-dragging [data-dropzone-idle] {
  display: none;
}

.hub-ui-dropzone.is-dragging [data-dropzone-drag] {
  display: inline;
}

.hub-ui-dropzone:hover,
.hub-ui-dropzone.is-dragging {
  transform: translateY(-1px);
  border-color: var(--hub-shell-accent, #6f42ff);
  box-shadow: 0 22px 42px color-mix(in srgb, var(--hub-shell-accent, #6f42ff) 18%, transparent);
}

.hub-ui-dropzone--compact {
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  justify-items: start;
  min-height: 0;
  height: auto;
  padding: 14px 18px;
  text-align: left;
}

.hub-ui-dropzone__icon {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  color: var(--hub-shell-accent, #6f42ff);
  background: color-mix(in srgb, var(--hub-shell-accent, #6f42ff) 11%, transparent);
}

.hub-ui-dropzone__icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.hub-ui-dropzone--compact .hub-ui-dropzone__icon {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  grid-row: span 2;
}

.hub-ui-dropzone--compact .hub-ui-dropzone__icon svg {
  width: 22px;
  height: 22px;
}

.hub-ui-dropzone strong {
  color: var(--hub-shell-text, #161326);
  font-size: clamp(1.25rem, 2vw, 1.9rem);
  line-height: 1.06;
}

.hub-ui-dropzone--compact strong {
  font-size: 1rem;
}

.hub-ui-dropzone small {
  max-width: 760px;
  color: var(--hub-shell-muted, #6d6684);
  font-size: 0.98rem;
  line-height: 1.5;
}

.hub-ui-dropzone--compact small {
  font-size: 0.84rem;
}

@media (max-width: 700px) {
  .hub-ui-dropzone--adaptive {
    min-height: var(--hub-ui-dropzone-mobile-min-height, 190px);
    height: auto;
    padding: var(--hub-ui-dropzone-mobile-padding, 22px);
  }
}

.hub-ui-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .hub-shell-user.is-open .hub-shell-user-menu,
  .hub-shell-user:hover .hub-shell-user-menu {
    display: grid !important;
  }

  .hub-shell-user:hover .hub-shell-user-button {
    font-weight: 600;
  }
}

@media (max-width: 1120px) {
  .hub-shell-header {
    grid-template-columns: minmax(170px, auto) auto minmax(260px, 420px) auto;
  }

  .hub-shell-nav {
    display: none;
  }

  .hub-shell-nav-toggle {
    display: grid;
  }

  .hub-shell-search {
    width: min(34vw, 420px);
    max-width: 420px;
  }

  .hub-shell-nav-panel {
    left: clamp(12px, 2vw, 28px);
  }
}

@media (max-width: 780px) {
  .hub-shell-mount {
    width: min(100%, calc(100% - 16px));
  }

  .hub-shell-header {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: start;
    gap: 10px;
    padding: 12px;
  }

  .hub-shell-search {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    max-width: none;
  }

  .hub-shell-nav-panel {
    top: calc(100% + 8px);
    right: 8px;
    left: 8px;
  }

  .hub-shell-status-group {
    display: none;
  }

  .hub-shell-context-switcher {
    display: none;
  }

  .hub-shell-context-dock {
    right: 8px;
    bottom: 8px;
    top: auto;
    width: calc(100vw - 16px);
  }
}

/* =====================================================================
   BI / DASHBOARD PRIMITIVES (v0.2)
   Self-contained, dependency-free building blocks for analytics and
   operational dashboards. Every value-bearing element is themeable via
   the shared design tokens, so light/dark inherit automatically.
   Modules compose these; they never rebuild local chart/grid variants.
   ===================================================================== */

/* --- Adaptive & notification status grid ----------------------------
   The base .hub-ui-status-grid uses 7 fixed columns (7 cards fit a 16:9
   desktop at a comfortable size). --dynamic stretches with auto-fit and
   blows the cards up when there are only a few. --adaptive caps each
   card so 4 cards stay the same size as 7 and simply pack to the left.
   --notifications additionally collapses to zero footprint when empty,
   so a "no alerts" dashboard reclaims the vertical space entirely. */
.hub-ui-status-grid--adaptive,
.hub-ui-status-grid--notifications {
  grid-template-columns: repeat(auto-fit, minmax(150px, var(--hub-ui-status-card-max, 188px)));
  justify-content: start;
}

.hub-ui-status-grid--notifications:empty {
  display: none;
  margin: 0;
}

.hub-ui-status-grid--notifications .hub-ui-status-card[hidden],
.hub-ui-status-grid--adaptive .hub-ui-status-card[hidden] {
  display: none;
}

/* Notification card: only "lights up" when it carries a signal. Severity
   accent comes from the shared tokens; a quiet card stays neutral. */
.hub-ui-status-card--notice {
  position: relative;
  aspect-ratio: auto;
  min-height: 92px;
  justify-items: start;
  text-align: left;
  gap: 6px;
}

.hub-ui-status-card--notice::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: var(--accent, var(--hub-shell-accent));
}

.hub-ui-status-card--notice.signal-success::before { background: var(--success); }
.hub-ui-status-card--notice.signal-warning::before { background: var(--warning); }
.hub-ui-status-card--notice.signal-danger::before { background: var(--danger); }
.hub-ui-status-card--notice strong { font-size: 1.5rem; }

/* --- Stat delta (▲ / ▼ with semantic colour) ------------------------ */
.hub-ui-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.4;
  color: var(--muted, var(--hub-shell-muted));
  background: color-mix(in srgb, var(--muted, #625a82) 12%, transparent);
}

.hub-ui-delta::before { content: "→"; font-size: 0.8em; }
.hub-ui-delta--up {
  color: var(--success);
  background: var(--success-soft, rgba(39, 140, 143, 0.12));
}
.hub-ui-delta--up::before { content: "▲"; }
.hub-ui-delta--down {
  color: var(--danger);
  background: var(--danger-soft, rgba(175, 64, 110, 0.12));
}
.hub-ui-delta--down::before { content: "▼"; }

/* --- Metric card (KPI + delta + inline trend) ----------------------- */
.hub-ui-metric {
  display: grid;
  gap: 8px;
  align-content: start;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 12px;
  padding: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(251, 249, 255, 0.5)),
    var(--surface, var(--hub-shell-surface));
  box-shadow: var(--shadow, var(--hub-shell-shadow));
  min-width: 0;
}

.hub-ui-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hub-ui-metric-label {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.hub-ui-metric-value {
  color: var(--ink, var(--hub-shell-ink));
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hub-ui-metric-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
}

/* Compact info box: shorter metric for the "info row" between a page
   title and its grid. Holds a counter, a small trend and a detail line
   without eating vertical space. */
.hub-ui-metric--compact {
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
}

.hub-ui-metric--compact .hub-ui-metric-label { font-size: 0.72rem; }
.hub-ui-metric--compact .hub-ui-metric-value { font-size: 1.5rem; }
.hub-ui-metric--compact .hub-ui-metric-foot { font-size: 0.74rem; }
.hub-ui-metric--compact .hub-ui-chart-svg { height: var(--hub-ui-chart-height, 26px); }

/* --- Charts: shared SVG container ------------------------------------
   The line/area colour is driven by currentColor, so modifier classes
   recolour the whole trend with one token. */
.hub-ui-chart {
  display: block;
  width: 100%;
  color: var(--accent-strong, var(--hub-shell-accent-strong));
  min-width: 0;
}

.hub-ui-chart--up { color: var(--success); }
.hub-ui-chart--down { color: var(--danger); }
.hub-ui-chart--muted { color: var(--muted, var(--hub-shell-muted)); }

.hub-ui-chart-svg {
  display: block;
  width: 100%;
  height: var(--hub-ui-chart-height, 64px);
}

.hub-ui-chart--spark .hub-ui-chart-svg { height: var(--hub-ui-chart-height, 34px); }

.hub-ui-chart-donut-svg {
  display: block;
  width: var(--hub-ui-donut-size, 132px);
  height: var(--hub-ui-donut-size, 132px);
  margin: 0 auto;
}

.hub-ui-chart-frame {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 12px;
  padding: 16px;
  background: var(--surface, var(--hub-shell-surface));
  box-shadow: var(--shadow, var(--hub-shell-shadow));
  min-width: 0;
}

.hub-ui-chart-frame > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.hub-ui-chart-frame > header strong { font-size: 0.96rem; font-weight: 800; }
.hub-ui-chart-frame > header span {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 700;
}

/* --- Vertical bars (column chart, CSS only) ------------------------- */
.hub-ui-bars {
  display: flex;
  align-items: flex-end;
  gap: var(--hub-ui-bars-gap, 6px);
  height: var(--hub-ui-bars-height, 96px);
  min-width: 0;
}

.hub-ui-bar {
  flex: 1 1 0;
  min-width: 4px;
  height: var(--v, 50%);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, var(--accent, #6b4dff), var(--accent-strong, #4528d6));
  transition: height 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hub-ui-bar--success { background: linear-gradient(180deg, color-mix(in srgb, var(--success) 70%, #fff), var(--success)); }
.hub-ui-bar--warning { background: linear-gradient(180deg, color-mix(in srgb, var(--warning) 70%, #fff), var(--warning)); }
.hub-ui-bar--danger { background: linear-gradient(180deg, color-mix(in srgb, var(--danger) 70%, #fff), var(--danger)); }
.hub-ui-bar--muted { background: color-mix(in srgb, var(--muted, #625a82) 26%, transparent); }

/* --- Horizontal bar list (ranking) --------------------------------- */
.hub-ui-barlist { display: grid; gap: 10px; min-width: 0; }

.hub-ui-barlist-row {
  display: grid;
  grid-template-columns: minmax(72px, 0.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.hub-ui-barlist-row > span:first-child {
  color: var(--ink, var(--hub-shell-ink));
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-ui-barlist-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, #625a82) 14%, transparent);
  overflow: hidden;
}

.hub-ui-barlist-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 50%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #6b4dff), var(--accent-strong, #4528d6));
  transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hub-ui-barlist-row > b {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--ink, var(--hub-shell-ink));
}

/* --- Progress + radial gauge --------------------------------------- */
.hub-ui-progress {
  position: relative;
  height: var(--hub-ui-progress-height, 10px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, #625a82) 14%, transparent);
  overflow: hidden;
}

.hub-ui-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 0%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #6b4dff), var(--accent-strong, #4528d6));
  transition: width 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hub-ui-progress--success .hub-ui-progress-fill { background: var(--success); }
.hub-ui-progress--warning .hub-ui-progress-fill { background: var(--warning); }
.hub-ui-progress--danger .hub-ui-progress-fill { background: var(--danger); }

.hub-ui-gauge {
  position: relative;
  width: var(--hub-ui-gauge-size, 120px);
  height: var(--hub-ui-gauge-size, 120px);
  border-radius: 50%;
  background:
    conic-gradient(
      var(--accent-strong, #4528d6) calc(var(--v, 0) * 1%),
      color-mix(in srgb, var(--muted, #625a82) 16%, transparent) 0
    );
  display: grid;
  place-items: center;
}

.hub-ui-gauge::before {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background: var(--surface-strong, #fff);
}

.hub-ui-gauge > span {
  position: relative;
  font-size: 1.3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink, var(--hub-shell-ink));
}

.hub-ui-gauge--success { --accent-strong: var(--success); }
.hub-ui-gauge--warning { --accent-strong: var(--warning); }
.hub-ui-gauge--danger { --accent-strong: var(--danger); }

/* --- Chart legend --------------------------------------------------- */
.hub-ui-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.hub-ui-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 700;
}

.hub-ui-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--accent-strong, #4528d6);
}

/* --- Dashboard widget grid (12-col, responsive spans) -------------- */
.hub-ui-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.hub-ui-widget { grid-column: span 12; min-width: 0; }
.hub-ui-widget--3 { grid-column: span 6; }
.hub-ui-widget--4 { grid-column: span 6; }
.hub-ui-widget--6 { grid-column: span 12; }
.hub-ui-widget--8 { grid-column: span 12; }

@media (min-width: 920px) {
  .hub-ui-widget--3 { grid-column: span 3; }
  .hub-ui-widget--4 { grid-column: span 4; }
  .hub-ui-widget--6 { grid-column: span 6; }
  .hub-ui-widget--8 { grid-column: span 8; }
}

/* --- Sidebar nav counter ------------------------------------------- */
.hub-module-nav-count {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0 6px;
  font-size: 0.66rem;
  font-weight: 850;
  line-height: 1;
  color: var(--accent-strong, var(--hub-shell-accent-strong));
  background: var(--accent-soft, rgba(131, 102, 255, 0.18));
}

.hub-module-nav-count--warning { color: var(--warning); background: var(--warning-soft, rgba(244, 195, 109, 0.16)); }
.hub-module-nav-count--danger {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--danger) 80%, #fff), var(--danger));
}

.hub-module-nav-item.active .hub-module-nav-count {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #6b4dff), var(--accent-strong, #4528d6));
}

/* --- Segmented control / tabs (button styling for hub-ui-tab-list) -- */
.hub-ui-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  border: 0;
  border-radius: 6px;
  padding: 4px 12px;
  color: var(--muted, var(--hub-shell-muted));
  background: transparent;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color 140ms ease, background 140ms ease;
}

.hub-ui-tab:hover { color: var(--accent-strong, var(--hub-shell-accent-strong)); }
.hub-ui-tab.active,
.hub-ui-tab[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, var(--accent, #6b4dff), var(--accent-strong, #4528d6));
  box-shadow: 0 8px 18px rgba(107, 77, 255, 0.24);
}

/* --- Skeleton loaders (reuse shimmer keyframe) --------------------- */
.hub-ui-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--muted, #625a82) 12%, transparent);
}

.hub-ui-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: hub-ui-skeleton-shimmer 1200ms ease-in-out infinite;
}

.hub-ui-skeleton--line { height: 0.82rem; margin: 6px 0; }
.hub-ui-skeleton--line.is-short { width: 56%; }
.hub-ui-skeleton--block { height: 96px; }

/* --- Activity timeline / feed -------------------------------------- */
.hub-ui-timeline { display: grid; gap: 2px; min-width: 0; }

.hub-ui-timeline-item {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 0 0 16px 22px;
}

.hub-ui-timeline-item::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  bottom: -4px;
  width: 2px;
  background: var(--line, var(--hub-shell-line));
}

.hub-ui-timeline-item:last-child::before { bottom: auto; height: 12px; }

.hub-ui-timeline-item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-strong, #4528d6);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #6b4dff) 22%, transparent);
}

.hub-ui-timeline-item.signal-success::after { background: var(--success); }
.hub-ui-timeline-item.signal-warning::after { background: var(--warning); }
.hub-ui-timeline-item.signal-danger::after { background: var(--danger); }

.hub-ui-timeline-item strong { font-size: 0.88rem; }
.hub-ui-timeline-item span,
.hub-ui-timeline-item time {
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.76rem;
}

/* --- Off-canvas drawers (left / right) ----------------------------- */
.hub-ui-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(18, 16, 38, 0.32);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.hub-ui-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.hub-ui-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 81;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(var(--hub-ui-drawer-width, 400px), calc(100vw - 32px));
  border: 1px solid var(--line, var(--hub-shell-line));
  background: var(--surface-strong, #fff);
  box-shadow: 0 24px 70px rgba(33, 25, 60, 0.24);
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Wider drawer for dense editors (e.g. long line-item lists) so labels
   stay on one line and more rows fit per screen. */
.hub-ui-drawer--wide { --hub-ui-drawer-width: 640px; }

.hub-ui-drawer--right { right: 0; border-radius: 16px 0 0 16px; transform: translateX(102%); }
.hub-ui-drawer--left { left: 0; border-radius: 0 16px 16px 0; transform: translateX(-102%); }
.hub-ui-drawer.is-open { transform: translateX(0); }

.hub-ui-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line, var(--hub-shell-line));
}

.hub-ui-drawer-header strong { font-size: 1rem; font-weight: 800; }
.hub-ui-drawer-body { padding: 16px 18px; overflow: auto; }

/* --- Layout variants: no-sidebar & immersive (editor) -------------- */
.hub-module-layout--no-sidebar { grid-template-columns: minmax(0, 1fr); }
.hub-module-layout--no-sidebar .hub-module-sidebar { display: none; }

.hub-module-layout--immersive {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.hub-module-layout--immersive .hub-module-sidebar { display: none; }

body.has-hub-shell.hub-shell-immersive .hub-module-page {
  width: min(100%, calc(100% - 16px));
}

body.has-hub-shell.hub-shell-immersive .hub-shell-header { display: none; }
body.has-hub-shell.hub-shell-immersive { --hub-shell-sticky-top: 16px; }

.hub-ui-fullscreen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: calc(100dvh - var(--hub-shell-sticky-top, 96px) - 24px);
}

/* --- Icon action bar: icon buttons with explanatory tooltips -------
   Preferred over text buttons for dense toolbars and table row actions.
   States: enabled (type-tinted on hover), .is-active (filled toggle),
   .is-disabled / :disabled (kept visible with a dashed type-coloured
   border so the action reads as "exists but unavailable"), and [hidden]
   to remove entirely. Tooltip is opt-in via data-hub-tooltip and also
   works on any element carrying the .hub-ui-tip class.
   Note: to keep the tooltip on a disabled action, use .is-disabled +
   aria-disabled (NOT the disabled attribute, which suppresses :hover). */
.hub-ui-action-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.hub-ui-icon-action {
  --ia-color: var(--accent-strong, #4528d6);
  --ia-soft: var(--accent-soft, rgba(131, 102, 255, 0.18));
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--hub-ui-icon-action-size, 34px);
  height: var(--hub-ui-icon-action-size, 34px);
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 9px;
  padding: 0;
  color: var(--muted, var(--hub-shell-muted));
  background: var(--surface-strong, #fff);
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.hub-ui-icon-action svg { width: 18px; height: 18px; display: block; }

.hub-ui-icon-action--primary { --ia-color: var(--accent-strong, #4528d6); --ia-soft: var(--accent-soft, rgba(131, 102, 255, 0.18)); }
.hub-ui-icon-action--success { --ia-color: var(--success, #166a74); --ia-soft: var(--success-soft, rgba(39, 140, 143, 0.14)); }
.hub-ui-icon-action--warning { --ia-color: var(--warning, #a15c07); --ia-soft: var(--warning-soft, rgba(244, 195, 109, 0.18)); }
.hub-ui-icon-action--danger { --ia-color: var(--danger, #a13363); --ia-soft: var(--danger-soft, rgba(175, 64, 110, 0.14)); }

.hub-ui-icon-action:hover:not(:disabled):not(.is-disabled),
.hub-ui-icon-action:focus-visible {
  color: var(--ia-color);
  border-color: var(--ia-color);
  background: var(--ia-soft);
  transform: translateY(-1px);
  outline: none;
}

.hub-ui-icon-action.is-active {
  color: #fff;
  border-color: var(--ia-color);
  background: var(--ia-color);
}

.hub-ui-icon-action:disabled,
.hub-ui-icon-action.is-disabled {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--ia-color) 52%, var(--muted, #625a82));
  border-color: color-mix(in srgb, var(--ia-color) 44%, transparent);
  border-style: dashed;
  background: transparent;
  transform: none;
}

/* Tooltip (opt-in: data-hub-tooltip on an icon action or any .hub-ui-tip) */
.hub-ui-tip { position: relative; }

.hub-ui-icon-action[data-hub-tooltip]::after,
.hub-ui-tip[data-hub-tooltip]::after {
  content: attr(data-hub-tooltip);
  position: absolute;
  bottom: calc(100% + 9px);
  left: 50%;
  z-index: 90;
  width: max-content;
  max-width: 220px;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #23253f;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  box-shadow: 0 12px 30px rgba(12, 10, 30, 0.32);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
}

.hub-ui-icon-action[data-hub-tooltip]::before,
.hub-ui-tip[data-hub-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  z-index: 90;
  width: 8px;
  height: 8px;
  transform: translateX(-50%) rotate(45deg);
  background: #23253f;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease;
}

.hub-ui-icon-action[data-hub-tooltip]:hover::after,
.hub-ui-icon-action[data-hub-tooltip]:focus-visible::after,
.hub-ui-tip[data-hub-tooltip]:hover::after,
.hub-ui-tip[data-hub-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.hub-ui-icon-action[data-hub-tooltip]:hover::before,
.hub-ui-icon-action[data-hub-tooltip]:focus-visible::before,
.hub-ui-tip[data-hub-tooltip]:hover::before,
.hub-ui-tip[data-hub-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* Tooltip-below modifier for elements near the top edge */
.hub-ui-tip--down[data-hub-tooltip]::after,
.hub-ui-icon-action--tip-down[data-hub-tooltip]::after {
  bottom: auto;
  top: calc(100% + 9px);
  transform: translateX(-50%) translateY(-4px);
}

.hub-ui-tip--down[data-hub-tooltip]:hover::after,
.hub-ui-icon-action--tip-down[data-hub-tooltip]:hover::after,
.hub-ui-tip--down[data-hub-tooltip]:focus-visible::after,
.hub-ui-icon-action--tip-down[data-hub-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

.hub-ui-tip--down[data-hub-tooltip]::before,
.hub-ui-icon-action--tip-down[data-hub-tooltip]::before {
  bottom: auto;
  top: calc(100% + 5px);
}

/* --- Dark-theme tweaks for BI surfaces ----------------------------- */
html[data-hub-theme="dark"] .hub-ui-metric,
html[data-hub-theme="dark"] .hub-ui-chart-frame {
  background: rgba(18, 20, 43, 0.72);
}

html[data-hub-theme="dark"] .hub-ui-gauge::before {
  background: var(--hub-shell-surface-strong, #14162b);
}

html[data-hub-theme="dark"] .hub-ui-drawer {
  background: var(--hub-shell-surface-strong, #14162b);
}

html[data-hub-theme="dark"] .hub-ui-skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
}

@media (max-width: 720px) {
  .hub-ui-barlist-row { grid-template-columns: minmax(60px, 0.5fr) minmax(0, 1fr) auto; }
}

/* =====================================================================
   INTERACTION PRIMITIVES (v0.3): feedback & forms
   Toasts, confirm modals, form validation states, loading buttons and
   pagination - the pieces a real CRUD view needs.
   ===================================================================== */

/* --- Button: danger variant + loading spinner --------------------- */
.hub-ui-button--danger {
  border-color: rgba(180, 35, 24, 0.4);
  color: #b42318;
  background: #fff1f0;
}

html[data-hub-theme="dark"] .hub-ui-button--danger {
  color: #ffc5e1;
  border-color: rgba(255, 197, 225, 0.24);
  background: rgba(175, 64, 110, 0.18);
}

.hub-ui-button--danger:hover,
.hub-ui-button--danger:focus {
  color: #ffffff;
  border-color: var(--danger, #a13363);
  background: var(--danger, #a13363);
}

html[data-hub-theme="dark"] .hub-ui-button--danger:hover,
html[data-hub-theme="dark"] .hub-ui-button--danger:focus {
  color: #171931;
  border-color: #ffc5e1;
  background: #ffc5e1;
}

.hub-ui-button.is-loading {
  pointer-events: none;
  opacity: 0.9;
}

.hub-ui-button.is-loading::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -2px;
  animation: hub-ui-spin 700ms linear infinite;
}

@keyframes hub-ui-spin { to { transform: rotate(360deg); } }

/* --- Form validation states --------------------------------------- */
.hub-ui-field.is-invalid input:not([data-hub-search-input]),
.hub-ui-field.is-invalid select,
.hub-ui-field.is-invalid textarea,
.hub-ui-input--invalid {
  border-color: var(--danger, #a13363) !important;
  box-shadow: 0 0 0 3px var(--danger-soft, rgba(175, 64, 110, 0.12));
}

.hub-ui-field-error {
  display: block;
  margin-top: 4px;
  color: var(--danger, #a13363);
  font-size: 0.74rem;
  font-weight: 700;
}

.hub-ui-field-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.74rem;
}

/* --- Toasts / snackbars ------------------------------------------- */
.hub-ui-toast-host {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 95;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.hub-ui-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-left: 4px solid var(--accent-strong, #4528d6);
  border-radius: 10px;
  background: var(--surface-strong, #fff);
  box-shadow: 0 16px 40px rgba(20, 16, 50, 0.18);
  color: var(--ink, var(--hub-shell-ink));
  pointer-events: auto;
  animation: hub-ui-toast-in 200ms ease;
}

.hub-ui-toast.is-leaving { animation: hub-ui-toast-out 200ms ease forwards; }
.hub-ui-toast--success { border-left-color: var(--success, #166a74); }
.hub-ui-toast--warning { border-left-color: var(--warning, #a15c07); }
.hub-ui-toast--danger { border-left-color: var(--danger, #a13363); }

.hub-ui-toast-msg {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 650;
}

.hub-ui-toast-close {
  flex: 0 0 auto;
  border: 0;
  border-radius: 6px;
  padding: 2px 6px;
  color: var(--muted, var(--hub-shell-muted));
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.hub-ui-toast-close:hover,
.hub-ui-toast-close:focus-visible {
  color: var(--ink, var(--hub-shell-ink));
  background: color-mix(in srgb, var(--muted, #625a82) 16%, transparent);
  outline: 0;
}

@keyframes hub-ui-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hub-ui-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* --- Confirm / generic modal -------------------------------------- */
.hub-ui-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(18, 16, 38, 0.42);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}

/* No visibility gate: the dialog is created on open and removed on close, so
   it never lingers in the tab order. Opacity-only means the OK button is
   focusable the instant it mounts, without waiting on the fade transition. */
.hub-ui-modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.hub-ui-modal {
  width: min(460px, 100%);
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 14px;
  background: var(--surface-strong, #fff);
  box-shadow: 0 30px 80px rgba(20, 16, 50, 0.3);
  transform: translateY(8px);
  transition: transform 200ms ease;
  overflow: hidden;
}

.hub-ui-modal-overlay.is-open .hub-ui-modal { transform: none; }
.hub-ui-modal-header { padding: 18px 18px 0; }
.hub-ui-modal-header strong { font-size: 1.05rem; font-weight: 800; }
.hub-ui-modal--danger .hub-ui-modal-header strong { color: var(--danger, #a13363); }

.hub-ui-modal-body {
  padding: 10px 18px 4px;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.9rem;
  line-height: 1.45;
}

.hub-ui-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 18px;
}

/* --- Pagination ---------------------------------------------------- */
.hub-ui-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.hub-ui-pagination button {
  min-width: 32px;
  height: 32px;
  border: 1px solid var(--line, var(--hub-shell-line));
  border-radius: 8px;
  padding: 0 8px;
  color: var(--muted, var(--hub-shell-muted));
  background: var(--surface-strong, #fff);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.hub-ui-pagination button:hover:not(:disabled) {
  color: var(--accent-strong, var(--hub-shell-accent-strong));
  border-color: var(--accent, var(--hub-shell-accent));
}

.hub-ui-pagination button:focus-visible {
  outline: 2px solid var(--accent, #6b4dff);
  outline-offset: 2px;
}

.hub-ui-pagination button.is-current {
  color: #fff;
  border-color: var(--accent-strong, #4528d6);
  background: var(--accent-strong, #4528d6);
}

.hub-ui-pagination button:disabled { opacity: 0.5; cursor: not-allowed; }
.hub-ui-pagination-info {
  margin: 0 6px;
  color: var(--muted, var(--hub-shell-muted));
  font-size: 0.78rem;
  font-weight: 650;
}

html[data-hub-theme="dark"] .hub-ui-toast,
html[data-hub-theme="dark"] .hub-ui-modal,
html[data-hub-theme="dark"] .hub-ui-pagination button {
  background: var(--hub-shell-surface-strong, #14162b);
}

/* --- Accessibility: honour reduced-motion -------------------------
   Global, future-proof reset scoped to the shell: every animation and
   transition is collapsed to ~0 (not removed, so transitionend still
   fires for code that awaits it). Covers current and future primitives
   without having to enumerate each one. */
@media (prefers-reduced-motion: reduce) {
  body.has-hub-shell *,
  body.has-hub-shell *::before,
  body.has-hub-shell *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}