body.hub-app-page[data-ui-design="new"] {
  --transaction-page: #f5f9fc;
  --transaction-panel: #ffffff;
  --transaction-panel-muted: #edf4f8;
  --transaction-ink: #10263a;
  --transaction-muted: #61778a;
  --transaction-line: #c8d7e2;
  --transaction-line-strong: #8ca4b6;
  --transaction-accent: #0f9f7a;
  --transaction-accent-soft: rgba(15, 159, 122, 0.12);
  --transaction-danger: #d83d5d;
  --transaction-focus: rgba(15, 159, 122, 0.2);
  --transaction-button-depth: #102c42;
  --transaction-logo-shadow: 0 5px 0 #102c42, 0 13px 24px rgba(16, 44, 66, 0.2);
  --transaction-panel-shadow: 0 14px 36px rgba(25, 55, 78, 0.09);
  --transaction-radius: 8px;
  isolation: isolate;
  background-color: var(--transaction-page);
  background-image: none;
  color: var(--transaction-ink);
}

.dark body.hub-app-page[data-ui-design="new"] {
  --transaction-page: #081520;
  --transaction-panel: #0e2030;
  --transaction-panel-muted: #132a3d;
  --transaction-ink: #eef7ff;
  --transaction-muted: #9bb0c2;
  --transaction-line: #244158;
  --transaction-line-strong: #4e7089;
  --transaction-accent: #31d3ad;
  --transaction-accent-soft: rgba(49, 211, 173, 0.13);
  --transaction-danger: #ff6b83;
  --transaction-focus: rgba(49, 211, 173, 0.22);
  --transaction-button-depth: #06101a;
  --transaction-logo-shadow: 0 5px 0 #06101a, 0 13px 24px rgba(0, 0, 0, 0.32);
  --transaction-panel-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
  background-image: none;
}

body.hub-app-page[data-ui-design="new"]::before {
  content: none;
}

.dark body.hub-app-page[data-ui-design="new"]::before {
  content: none;
}

body.hub-app-page[data-ui-design="new"] [class*="tracking-"] {
  letter-spacing: 0 !important;
}

body.hub-app-page[data-ui-design="new"] > main:not(.error-shell) {
  padding-top: clamp(2rem, 4vw, 3rem) !important;
  padding-bottom: clamp(2.5rem, 5vw, 4rem) !important;
}

body.hub-app-page[data-ui-design="new"] h1:not(.error-message) {
  color: var(--transaction-ink) !important;
  font-size: 3rem !important;
  letter-spacing: 0 !important;
  line-height: 1.05;
}

body.hub-app-page[data-ui-design="new"] .hub-flat-header {
  min-height: 4.75rem;
  border-bottom: 1px solid #243c56;
  background: #0c1622;
  box-shadow: none;
  backdrop-filter: none;
}

.dark body.hub-app-page[data-ui-design="new"] .hub-flat-header {
  background: #0c1622;
}

body.hub-app-page[data-ui-design="new"] header.sticky > div {
  height: 4.75rem !important;
}

body.hub-app-page[data-ui-design="new"] .hub-flat-header > .hub-flat-header-inner {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.hub-app-page[data-ui-design="new"] header nav {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

body.hub-app-page[data-ui-design="new"] header nav > a {
  min-height: 2.25rem;
  border-radius: 5px !important;
  padding: 0.55rem 0.9rem !important;
}

body.hub-app-page[data-ui-design="new"] .hub-brand-icon {
  overflow: visible !important;
  width: 2.75rem !important;
  height: 2.75rem !important;
  border: 1px solid #59758b;
  border-radius: var(--transaction-radius) !important;
  background: #365268;
  box-shadow: var(--transaction-logo-shadow);
  transform: translateY(-2px);
}

body.hub-app-page[data-ui-design="new"] .hub-brand-icon img {
  border-radius: calc(var(--transaction-radius) - 1px);
}

body.hub-app-page[data-ui-design="new"] .brand img {
  border-radius: var(--transaction-radius);
  box-shadow: var(--transaction-logo-shadow);
}

body.hub-app-page[data-ui-design="new"] :is(
  form[class*="bg-"],
  form[class*="border"],
  [class*="bg-slate-50"][class*="border"],
  [class*="bg-white"][class*="border"][class*="shadow-"],
  [class*="mt-5"][class*="rounded-"][class*="border"]
) {
  border-color: var(--transaction-line) !important;
  border-radius: var(--transaction-radius) !important;
  background: var(--transaction-panel) !important;
  box-shadow: var(--transaction-panel-shadow) !important;
}

body.hub-app-page[data-ui-design="new"] form[class*="bg-"],
body.hub-app-page[data-ui-design="new"] form[class*="border"] {
  padding: clamp(1.25rem, 2.5vw, 2rem) !important;
}

body.hub-app-page[data-ui-design="new"] [id$="-modal"] > div {
  max-height: min(88vh, 52rem);
  border: 1px solid var(--transaction-line) !important;
  border-radius: var(--transaction-radius) !important;
  background: var(--transaction-panel) !important;
  box-shadow: 0 22px 60px rgba(2, 12, 20, 0.3) !important;
}

body.hub-app-page[data-ui-design="new"] .transaction-danger-button {
  border: 1px solid var(--transaction-danger) !important;
  border-radius: 6px !important;
  background: var(--transaction-danger) !important;
  color: #fff !important;
  box-shadow: 0 4px 0 var(--transaction-button-depth) !important;
}

body.hub-app-page[data-ui-design="new"] .transaction-danger-button:hover,
body.hub-app-page[data-ui-design="new"] .transaction-danger-button:focus-visible {
  background: var(--transaction-danger) !important;
  filter: brightness(0.92);
  transform: translateY(-1px);
}

body.hub-app-page[data-ui-design="new"] .transaction-danger-button:active {
  box-shadow: 0 1px 0 var(--transaction-button-depth) !important;
  transform: translateY(3px);
}

body.hub-app-page[data-ui-design="new"] input:not([type="checkbox"]):not([type="radio"]),
body.hub-app-page[data-ui-design="new"] select,
body.hub-app-page[data-ui-design="new"] textarea {
  min-height: 2.75rem;
  border: 1px solid var(--transaction-line-strong) !important;
  border-radius: var(--transaction-radius) !important;
  background: var(--transaction-panel) !important;
  color: var(--transaction-ink) !important;
  padding: 0.65rem 0.85rem !important;
  box-shadow: inset 0 1px 2px rgba(16, 38, 58, 0.06);
}

body.hub-app-page[data-ui-design="new"] textarea {
  min-height: 6rem;
  resize: vertical;
}

body.hub-app-page[data-ui-design="new"] input::placeholder,
body.hub-app-page[data-ui-design="new"] textarea::placeholder {
  color: var(--transaction-muted) !important;
  opacity: 0.72;
}

body.hub-app-page[data-ui-design="new"] input:focus,
body.hub-app-page[data-ui-design="new"] select:focus,
body.hub-app-page[data-ui-design="new"] textarea:focus {
  border-color: var(--transaction-accent) !important;
  outline: 3px solid var(--transaction-focus) !important;
  outline-offset: 1px;
  box-shadow: none !important;
}

body.hub-app-page[data-ui-design="new"] label {
  color: var(--transaction-muted) !important;
  letter-spacing: 0 !important;
}

body.hub-app-page[data-ui-design="new"] :is(
  button,
  a,
  input,
  select,
  textarea
):focus-visible {
  outline: 3px solid var(--transaction-focus) !important;
  outline-offset: 2px;
}

body.hub-app-page[data-ui-design="new"] :disabled,
body.hub-app-page[data-ui-design="new"] [aria-disabled="true"] {
  cursor: not-allowed;
  box-shadow: none !important;
  filter: saturate(0.45);
  opacity: 0.58;
  transform: none !important;
}

body.hub-app-page[data-ui-design="new"] .overflow-x-auto {
  border-color: var(--transaction-line) !important;
  border-radius: var(--transaction-radius) !important;
}

body.hub-app-page[data-ui-design="new"] table {
  width: 100%;
  border-collapse: collapse;
  background: var(--transaction-panel);
  color: var(--transaction-ink);
  font-size: 0.8125rem;
}

body.hub-app-page[data-ui-design="new"] thead {
  background: var(--transaction-panel-muted) !important;
}

body.hub-app-page[data-ui-design="new"] th,
body.hub-app-page[data-ui-design="new"] td {
  border-color: var(--transaction-line) !important;
  padding: 0.65rem 0.75rem !important;
  text-align: left;
  vertical-align: middle;
}

body.hub-app-page[data-ui-design="new"] th {
  color: var(--transaction-muted) !important;
  font-size: 0.6875rem;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

body.hub-app-page[data-ui-design="new"] tbody tr:hover {
  background: var(--transaction-accent-soft);
}

body.hub-app-page[data-ui-design="new"] .flash-message,
body.hub-app-page[data-ui-design="new"] .toast-alert {
  border: 1px solid currentColor !important;
  border-radius: var(--transaction-radius) !important;
  padding: 0.75rem 1rem !important;
  box-shadow: 0 8px 22px rgba(16, 38, 58, 0.1);
  font-size: 0.8125rem;
  line-height: 1.45;
}

body.hub-app-page[data-ui-design="new"] .transaction-pagination {
  border: 1px solid var(--transaction-line);
  border-radius: var(--transaction-radius);
  background: var(--transaction-panel);
  padding: 0.75rem;
}

body.hub-app-page[data-ui-design="new"] .transaction-pagination > div {
  width: 100%;
}

body.hub-app-page[data-ui-design="new"] .transaction-pagination button {
  min-width: 7.5rem;
  border-radius: 6px !important;
}

body.hub-app-page[data-ui-design="new"] .listreg-filter-bar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto auto auto auto;
  gap: 0.75rem;
  align-items: end;
  border-color: var(--transaction-line) !important;
  border-radius: var(--transaction-radius) var(--transaction-radius) 0 0 !important;
  background: var(--transaction-panel-muted) !important;
  padding: 0.75rem !important;
}

body.hub-app-page[data-ui-design="new"] .listreg-filter-bar > .listreg-filter-controls {
  display: contents;
}

body.hub-app-page[data-ui-design="new"] .listreg-filter-bar label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.75rem;
}

body.hub-app-page[data-ui-design="new"] .listreg-detail-link {
  border: 0;
  background: transparent;
  color: var(--transaction-muted);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.22em;
  box-shadow: none !important;
}

body.hub-app-page[data-ui-design="new"] .listreg-detail-link:hover,
body.hub-app-page[data-ui-design="new"] .listreg-detail-link:focus-visible {
  color: var(--transaction-accent);
  text-decoration-color: currentColor;
}

body.hub-app-page[data-ui-design="new"] .listreg-action-button {
  width: 2.875rem;
  height: 2.875rem;
  border: 1px solid var(--transaction-line-strong) !important;
  border-radius: var(--transaction-radius) !important;
  background: var(--transaction-panel-muted) !important;
  color: var(--transaction-ink) !important;
  box-shadow: none !important;
}

body.hub-app-page[data-ui-design="new"] .listreg-action-button:hover,
body.hub-app-page[data-ui-design="new"] .listreg-action-button:focus-visible {
  border-color: var(--transaction-accent) !important;
  background: var(--transaction-accent) !important;
  color: #fff !important;
}

body.hub-app-page[data-ui-design="new"] pre,
body.hub-app-page[data-ui-design="new"] code {
  border-radius: var(--transaction-radius) !important;
}

@media (max-width: 768px) {
  body.hub-app-page[data-ui-design="new"] {
    background-size: 32px 32px;
  }

  body.hub-app-page[data-ui-design="new"]::before {
    inset: 4.25rem 0 auto;
    height: 2.75rem;
    padding-inline: 1rem;
    font-size: 8px;
  }

  body.hub-app-page[data-ui-design="new"].p-8 {
    padding: 1rem !important;
  }

  body.hub-app-page[data-ui-design="new"] header.sticky {
    min-height: 4.25rem;
  }

  body.hub-app-page[data-ui-design="new"] .listreg-filter-bar {
    grid-template-columns: minmax(220px, 1fr) auto auto;
  }

  body.hub-app-page[data-ui-design="new"] header.sticky > div {
    height: auto !important;
    min-height: 4.25rem;
    gap: 0.75rem;
    padding-block: 0.65rem !important;
  }

  body.hub-app-page[data-ui-design="new"] header nav {
    max-width: 48vw;
    overflow-x: auto;
  }

  body.hub-app-page[data-ui-design="new"] header nav > a {
    flex: 0 0 auto;
    padding-inline: 0.65rem !important;
  }

  body.hub-app-page[data-ui-design="new"] .hub-brand-text {
    display: none !important;
  }

  body.hub-app-page[data-ui-design="new"] > main:not(.error-shell) {
    padding-inline: 1rem !important;
    padding-top: 2rem !important;
  }

  body.hub-app-page[data-ui-design="new"] h1:not(.error-message) {
    font-size: 2rem !important;
  }

  body.hub-app-page[data-ui-design="new"] form[class*="bg-"],
  body.hub-app-page[data-ui-design="new"] form[class*="border"],
  body.hub-app-page[data-ui-design="new"] [id$="-modal"] > div {
    padding: 1rem !important;
  }

  body.hub-app-page[data-ui-design="new"] [id$="-modal"] {
    align-items: flex-start !important;
    overflow-y: auto;
    padding: 1rem !important;
  }

  body.hub-app-page[data-ui-design="new"] table {
    min-width: 42rem;
  }

  body.hub-app-page[data-ui-design="new"] .transaction-pagination > div {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  body.hub-app-page[data-ui-design="new"] .transaction-pagination form {
    width: 100%;
    flex-direction: column;
  }

  body.hub-app-page[data-ui-design="new"] .transaction-pagination button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  body.hub-app-page[data-ui-design="new"] header.sticky > div:has(> nav) {
    grid-template-areas: "brand controls" "nav nav";
  }

  body.hub-app-page[data-ui-design="new"] header nav {
    width: 100%;
    max-width: none;
  }

  body.hub-app-page[data-ui-design="new"] .listreg-filter-bar {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.hub-app-page[data-ui-design="new"],
  body.hub-app-page[data-ui-design="new"]::before,
  body.hub-app-page[data-ui-design="new"] *,
  body.hub-app-page[data-ui-design="new"] *::before,
  body.hub-app-page[data-ui-design="new"] *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  body.hub-app-page[data-ui-design="new"] :is(button, a) {
    transform: none !important;
  }
}