/*
 * Shared product UI foundation.
 * This layer intentionally sits after the legacy theme styles. It owns visual
 * hierarchy only; application routes, Bootstrap hooks and AJAX selectors stay
 * in their existing templates.
 */

/*
 * Product typography floor.
 * Keep relative small-print hierarchy where the parent is large, while never
 * allowing rendered helper text to fall below the shared 12px floor.
 */
body.ui-app small,
body.ui-app .small {
  font-size: max(var(--ui-font-size-min), 0.8em);
}

/* Customer-owned second-level service taxonomy. */
.ui-app .ui-service-group-heading th {
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-ink);
  font-size: var(--ui-text-12);
  font-weight: 700;
  letter-spacing: 0.025em;
  padding: 0.72rem 1rem;
  text-transform: uppercase;
}

.ui-app .ui-service-group-heading-mobile {
  color: var(--ui-color-ink);
  font-size: 0.82rem;
  font-weight: 700;
  margin: 1rem 0 0.45rem;
}

body.ui-app .badge {
  font-size: max(var(--ui-font-size-min), 0.85em);
}

body.ui-app .text-subheader,
body.ui-app .avatar-sm,
body.ui-app .ticket-contents .item .content .username .time,
body.ui-app .datepicker .cw,
body.ui-app .jqstooltip,
body.ui-app .jvectormap-tip,
body.ui-app .c3-axis text,
body.ui-app .c3-legend-item text,
body.ui-app .elfinder-preference-theme button.elfinder-preference-theme-default,
body.ui-app .elfinder .elfinder-contextmenu-header span,
body.ui-app .elfinder-place-drag,
body.ui-app .elfinder .elfinder-button-search-menu,
body.ui-app .elfinder-workzone-path .elfinder-path {
  font-size: var(--ui-font-size-min);
}

body.ui-app a {
  color: inherit;
}

body.ui-app a:focus-visible,
body.ui-app button:focus-visible,
body.ui-app [tabindex]:focus-visible {
  border-radius: var(--ui-radius-control);
  box-shadow: var(--ui-shadow-focus);
  outline: 2px solid var(--ui-color-primary);
  outline-offset: 2px;
}

body.ui-app input:focus-visible,
body.ui-app select:focus-visible,
body.ui-app textarea:focus-visible {
  outline: 0;
}


/* Utility page heading */



/* Order flow: a focused service-selection workspace with a persistent inspector. */
.ui-order-workspace {
  display: grid;
  gap: 20px;
}

.ui-flow-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.ui-flow-title {
  margin: 0;
  color: var(--ui-color-ink);
  font-size: clamp(23px, 2vw, 29px);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.ui-app .ui-order-panel > .card-header {
  min-height: 62px;
  padding: 0 20px;
}






.ui-app .ui-order-catalog__eyebrow,
.ui-app .ui-order-form-intro__eyebrow {
  margin: 0 0 2px;
  color: var(--ui-color-muted-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 780;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}


.ui-app .ui-order-catalog .card-title i {
  margin-right: 5px;
  color: var(--ui-color-primary);
}



.ui-app .ui-order-catalog .brand-category {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ui-system-color-013);
  border-radius: var(--ui-system-radius-002);
  background: var(--ui-system-color-011);
  color: var(--ui-system-color-014);
  font-size: 12px;
  font-weight: 690;
  text-align: left;
  box-shadow: var(--ui-system-shadow-001);
}

.ui-app .ui-order-catalog .brand-category i,
.ui-app .ui-order-catalog .brand-category .icon {
  display: inline-flex;
  width: 25px;
  height: 25px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-system-radius-003);
  background: var(--ui-system-color-015);
  color: var(--ui-system-color-016);
  font-size: 13px;
}

.ui-app .ui-order-catalog .brand-category:hover,
.ui-app .ui-order-catalog .brand-category:focus,
.ui-app .ui-order-catalog .brand-category.active,
.ui-app .ui-order-catalog .brand-category.ui-is-selected {
  border-color: var(--ui-system-color-017);
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary-strong);
  box-shadow: var(--ui-system-shadow-001);
}

.ui-app .ui-order-catalog .brand-category.active i,
.ui-app .ui-order-catalog .brand-category.ui-is-selected i,
.ui-app .ui-order-catalog .brand-category.active .icon,
.ui-app .ui-order-catalog .brand-category.ui-is-selected .icon {
  background: var(--ui-color-primary);
  color: var(--ui-system-color-011);
}

.ui-app .ui-order-panel .content-header-title h4 {
  margin: 0 0 20px;
  color: var(--ui-color-ink);
  font-size: 16px;
  font-weight: 730;
}



.ui-app .ui-order-panel .ui-order-form-intro h2 i {
  margin-right: 5px;
  color: var(--ui-color-primary);
}


.ui-app .ui-order-panel .ui-order-selector-stack .form-group:last-child,
.ui-app .ui-order-panel .ui-order-input-stack .form-group:last-child {
  margin-bottom: 0;
}

.ui-app .ui-order-panel .ui-order-input-stack:has(.order-default-link.d-none):has(.order-default-quantity.d-none) {
  display: none;
}





.ui-app .ui-order-panel .custom-control-label {
  color: var(--ui-system-color-018);
  font-size: 12px;
  font-weight: 680;
}





.ui-app .ui-order-panel .ui-order-submit:focus {
	border: 0;
	background-image: var(--ui-action-primary-background-hover);
	box-shadow: var(--ui-system-shadow-004);
}

.ui-app .ui-order-panel .ui-order-submit:disabled,
.ui-app .ui-order-panel .ui-order-submit.disabled {
	border: 0;
	background-color: var(--ui-action-primary-disabled);
	background-image: none;
	box-shadow: var(--ui-system-shadow-001);
	cursor: not-allowed;
}




.ui-app .ui-order-summary__eyebrow i {
  margin-right: 4px;
  color: var(--ui-color-primary);
}


.ui-app .ui-order-summary .service-title {
  margin: 0 0 16px;
}







.ui-app .ui-order-summary__metric img {
  width: 34px;
  height: 34px;
  margin-right: 10px;
  padding: 7px;
  background: var(--ui-color-primary-soft);
  object-fit: contain;
}


.ui-app .ui-order-summary__metric .badge {
  padding: 4px 6px;
  background: var(--ui-system-color-025);
  color: var(--ui-system-color-026);
  font-size: var(--ui-font-size-min);
}




.ui-app .ui-order-guide details {
  overflow: hidden;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-raised);
}

.ui-app .ui-order-guide summary {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  color: var(--ui-color-text);
  cursor: pointer;
  list-style: none;
}

.ui-app .ui-order-guide summary::-webkit-details-marker {
  display: none;
}

.ui-app .ui-order-guide__heading {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 13px;
}

.ui-app .ui-order-guide__heading > .fe {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-system-radius-002);
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary-strong);
  font-size: 17px;
}

.ui-app .ui-order-guide__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--ui-color-muted-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ui-app .ui-order-guide h2 {
  margin: 0;
  color: var(--ui-color-text);
  font-size: 16px;
  font-weight: 740;
}

.ui-app .ui-order-guide__toggle::before {
  color: var(--ui-color-primary-strong);
  font-family: feather;
  font-size: 18px;
  content: "\e92e";
}

.ui-app .ui-order-guide details[open] .ui-order-guide__toggle {
  transform: rotate(180deg);
}

.ui-app .ui-order-guide__content {
  padding: 20px;
  border-top: 1px solid var(--ui-border-subtle);
  color: var(--ui-color-muted-strong);
  line-height: 1.7;
}

/* Secondary user workspaces share the same operational rhythm. */
.ui-app .ui-services-header .form-group,
.ui-app .ui-tickets-header .form-group {
  margin-bottom: 0;
}

.ui-app .ui-services-header {
  justify-content: space-between;
  gap: 16px;
}

.ui-app .ui-services-header .ui-services-filters {
  display: grid;
  width: min(100%, 700px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-left: auto;
}

.ui-app .ui-service-catalog {
  gap: 16px 0;
}

.ui-app .ui-service-catalog .service-category {
  overflow: hidden;
  margin-bottom: 16px;
}

.ui-app .ui-service-catalog .service-category .card-header {
  min-height: 56px;
}

.ui-app .ui-service-catalog .favorite-icon {
  color: var(--ui-color-primary);
}

.ui-app .ui-service-card-list {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--ui-surface-subtle);
}

.ui-app .ui-service-card {
  min-width: 0;
  padding: 15px;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel-mobile);
  background: var(--ui-surface-raised);
}

.ui-app .ui-service-card__topline,
.ui-app .ui-service-card__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ui-app .ui-service-card__meta {
  color: var(--ui-color-muted-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 700;
}

.ui-app .ui-service-card__name,
.ui-app .ui-service-card__name-full {
  margin: 11px 0 14px;
  color: var(--ui-color-text);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ui-app .ui-service-card__name-details {
  margin: 11px 0 14px;
}

.ui-app .ui-service-card__name-details summary {
  display: block;
  color: var(--ui-color-text);
  cursor: pointer;
  list-style: none;
}

.ui-app .ui-service-card__name-details summary::-webkit-details-marker {
  display: none;
}

.ui-app .ui-service-card__name-preview {
  display: -webkit-box;
  overflow: hidden;
  font-size: 14px;
  font-weight: 720;
  line-height: 1.5;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.ui-app .ui-service-card__name-action {
  display: inline-flex;
  margin-top: 7px;
  color: var(--ui-color-primary-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 700;
}

.ui-app .ui-service-card__name-close {
  display: none;
}

.ui-app .ui-service-card__name-details[open] .ui-service-card__name-preview,
.ui-app .ui-service-card__name-details[open] .ui-service-card__name-open {
  display: none;
}

.ui-app .ui-service-card__name-details[open] .ui-service-card__name-close {
  display: inline;
}

.ui-app .ui-service-card__name-details[open] .ui-service-card__name-full {
  margin-bottom: 0;
}

.ui-app .ui-service-card__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 14px;
}

.ui-app .ui-service-card__facts > div {
  min-width: 0;
  padding: 10px;
  border-radius: var(--ui-system-radius-001);
  background: var(--ui-surface-subtle);
}

.ui-app .ui-service-card__facts dt {
  margin: 0 0 4px;
  color: var(--ui-color-muted-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 680;
}

.ui-app .ui-service-card__facts dd {
  margin: 0;
  color: var(--ui-color-text);
  font-size: 13px;
  font-weight: 740;
  overflow-wrap: anywhere;
}

.ui-app .ui-service-card__actions {
  justify-content: flex-end;
  padding-top: 13px;
  border-top: 1px solid var(--ui-border-subtle);
}

.ui-app .ui-service-card__details-action {
  margin-right: auto;
}

.ui-app .ui-service-card__order {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.ui-app .ui-funds-page {
  margin-top: 0;
}

.ui-app .ui-funds-header {
  align-items: flex-end;
  margin-bottom: 18px;
}

.ui-app .ui-flow-description {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--ui-color-muted-strong);
  line-height: 1.6;
}


.ui-app .ui-payment-panel .card-header {
  min-height: 62px;
  padding: 0 20px;
}




.ui-app .ui-payment-panel .for-group.text-center {
  margin-bottom: 6px;
  padding: 16px;
  border-radius: var(--ui-system-radius-002);
  background: var(--ui-surface-subtle);
}

.ui-app .ui-payment-panel .for-group img {
  max-width: 116px;
  max-height: 40px;
}

.ui-app .ui-currency-input .input-group-text {
  min-width: 62px;
  justify-content: center;
  border-color: var(--ui-border-default);
  background: var(--ui-surface-subtle);
  color: var(--ui-color-text);
  font-weight: 740;
}

.ui-app .ui-payment-panel .form-group > ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 14px 14px 14px 32px;
  border-radius: var(--ui-system-radius-005);
  background: var(--ui-surface-subtle);
  color: var(--ui-color-muted-strong);
  font-size: 12px;
}


.ui-app .ui-payment-panel .StripeElement--focus {
  border-color: var(--ui-color-primary);
  box-shadow: var(--ui-system-shadow-005);
}

.ui-app .ui-payment-panel .StripeElement--invalid {
  border-color: var(--ui-color-danger);
}



.ui-app .ui-funds-manual .content {
  padding: 22px;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-raised);
}

.ui-app .ui-funds-manual .ui-page-header h2 {
  margin: 0;
  color: var(--ui-color-text);
  font-size: 20px;
  font-weight: 750;
}


.ui-app .ui-tickets-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.ui-app .ui-tickets-header .page-title {
  gap: 11px;
}

.ui-app .ui-tickets-title__icon {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-system-radius-005);
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary-strong);
  font-size: 19px;
  line-height: 1;
}

.ui-app .ui-tickets-header__actions .search-area {
  width: min(100%, 360px);
}

.ui-app .ui-ticket-workspace > [class*='col-'] {
  margin-bottom: 16px;
}

.ui-app .ui-ticket-compose .card-body,
.ui-app .ui-ticket-list-panel .card-body {
  height: auto;
  max-height: min(68vh, 700px);
  padding: 16px 20px;
}

.ui-app .ticket-lists .item {
  min-height: 68px;
  padding: 13px 6px;
  border-color: var(--ui-border-subtle);
  transition: background var(--ui-duration-fast) ease;
}

.ui-app .ticket-lists .item:hover {
  background: var(--ui-system-color-029);
}

.ui-app .ticket-lists .item .content .subject {
  color: var(--ui-color-ink);
  font-size: 14px;
  font-weight: 700;
}

.ui-app .ticket-lists .item .action .btn {
  min-height: 28px;
  padding: 4px 8px;
  border-radius: var(--ui-system-radius-007);
  font-size: var(--ui-font-size-min);
}

.ui-app .ui-profile-workspace > [class*='col-'] {
  margin-bottom: 16px;
}

.ui-app .ui-settings-card .card-body {
  padding: 22px;
}

.ui-app .ui-settings-card .form-actions {
  margin-top: 8px;
}


/* Component contracts used by the dashboard and list templates. */
.ui-dashboard {
  display: grid;
  gap: 24px;
}

.ui-dashboard-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(280px, 5fr);
  gap: 20px;
}

.ui-dashboard-hero__primary,
.ui-dashboard-hero__account {
  min-height: 174px;
  padding: 24px;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-raised);
}

.ui-dashboard-hero__primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ui-system-color-011) 0%, var(--ui-system-color-030) 60%, var(--ui-system-color-031) 100%);
}

.ui-dashboard-hero__primary::after {
  position: absolute;
  right: -42px;
  bottom: -66px;
  width: 170px;
  height: 170px;
  border: 28px solid var(--ui-system-color-007);
  border-radius: var(--ui-system-radius-004);
  content: "";
}

.ui-dashboard-eyebrow {
  margin: 0 0 8px;
  color: var(--ui-color-primary-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-dashboard-title {
  max-width: 560px;
  margin: 0;
  color: var(--ui-color-ink);
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 760;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.ui-dashboard-copy {
  max-width: 510px;
  margin: 10px 0 18px;
  color: var(--ui-color-muted);
}

.ui-dashboard-hero__account {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ui-account-label {
  color: var(--ui-color-muted);
  font-size: var(--ui-font-size-min);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ui-account-name {
  margin: 5px 0 2px;
  color: var(--ui-color-ink);
  font-size: 19px;
  font-weight: 730;
}

.ui-account-meta {
  color: var(--ui-color-muted);
  font-size: 13px;
}

.ui-account-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.ui-account-balance {
  color: var(--ui-color-primary-strong);
  font-size: 18px;
  font-weight: 760;
}

.ui-metric-grid,
.ui-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.ui-metric-card,
.ui-status-card {
  min-height: 132px;
  padding: 19px;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-raised);
  transition: transform var(--ui-duration-fast) ease, box-shadow var(--ui-duration-fast) ease;
}

.ui-metric-card:hover,
.ui-status-card:hover {
  box-shadow: var(--ui-system-shadow-006);
  transform: translateY(-2px);
}

.ui-metric-card__icon,
.ui-status-card__icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-system-radius-010);
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary-strong);
  font-size: 18px;
}

.ui-metric-card__value,
.ui-status-card__value {
  margin: 17px 0 2px;
  color: var(--ui-color-ink);
  font-size: 23px;
  font-weight: 760;
  letter-spacing: -0.025em;
  line-height: 1;
}

.ui-metric-card__label,
.ui-status-card__label {
  color: var(--ui-color-muted);
  font-size: 12px;
  font-weight: 600;
}

.ui-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(290px, 1fr);
  gap: 20px;
}

.ui-chart-card {
  min-height: 360px;
  padding: 20px;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background: var(--ui-surface-raised);
}

.ui-dashboard-zero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, auto);
  align-items: center;
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  background:
    radial-gradient(circle at 12% 18%, var(--ui-system-color-033), transparent 30%),
    linear-gradient(135deg, var(--ui-surface-raised) 0%, var(--ui-system-color-034) 100%);
}

.ui-dashboard-zero__icon {
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-system-color-035);
  border-radius: var(--ui-system-radius-011);
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary-strong);
  font-size: 23px;
}

.ui-dashboard-zero__content h2 {
  margin: 0;
  color: var(--ui-color-ink);
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.025em;
}

.ui-dashboard-zero__content > p:not(.ui-dashboard-eyebrow) {
  max-width: 570px;
  margin: 7px 0 17px;
  color: var(--ui-color-muted-strong);
  line-height: 1.6;
}

.ui-dashboard-zero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ui-dashboard-quick-links {
  display: grid;
  min-width: 190px;
  gap: 5px;
  padding-left: 22px;
  border-left: 1px solid var(--ui-border-subtle);
}

.ui-dashboard-quick-links__label {
  margin-bottom: 3px;
  color: var(--ui-color-muted-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 760;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ui-dashboard-quick-links a {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  border-radius: var(--ui-system-radius-005);
  color: var(--ui-color-text);
  font-weight: 680;
}

.ui-dashboard-quick-links a:hover {
  color: var(--ui-color-primary-strong);
}

.ui-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 14px;
}

.ui-section-heading h2,
.ui-section-heading h3 {
  margin: 0;
  color: var(--ui-color-ink);
  font-size: 15px;
  font-weight: 730;
}

.ui-status-grid {
  margin-top: 16px;
}

.ui-dashboard-statuses {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.ui-dashboard-statuses > .ui-status-grid {
  margin-top: 0;
}

.ui-status-more {
  border-top: 1px solid var(--ui-border-subtle);
}

.ui-status-more summary {
  display: flex;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  color: var(--ui-color-primary-strong);
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
  list-style: none;
}

.ui-status-more summary::-webkit-details-marker {
  display: none;
}

.ui-status-more summary::after {
  font-family: feather;
  content: "\e92e";
}

.ui-status-more[open] summary::after {
  transform: rotate(180deg);
}

.ui-status-more__grid {
  margin-top: 0;
}

.ui-status-card {
  min-height: 96px;
  padding: 16px;
}

.ui-status-card__value {
  margin-top: 12px;
  font-size: 20px;
}

.ui-service-admin-workspace {
  display: grid;
  gap: var(--ui-gap-component);
}

.ui-service-admin-workspace .ui-page-header {
  margin-bottom: 0;
}

.ui-service-admin-toolbar__actions,
.ui-service-admin-toolbar__filters,
.ui-service-admin-toolbar__bulk {
  display: flex;
  align-items: center;
  gap: var(--ui-gap-control);
}

.ui-service-admin-toolbar__filters {
  justify-content: flex-end;
  min-width: 0;
}

.ui-service-admin-toolbar .form-group {
  margin: 0;
}

.ui-service-admin-toolbar__search {
  width: min(100%, 370px);
}

.ui-service-admin-toolbar__search .input-group {
  flex-wrap: nowrap;
}

.ui-service-admin-toolbar__search .form-control {
  min-width: 0;
}

.ui-service-admin-toolbar__search select.form-control {
  flex: 0 0 108px;
  border-radius: var(--ui-system-radius-012);
}

.ui-service-admin-toolbar__category .form-select {
  width: auto;
  min-width: 128px;
}

.ui-admin-service-catalog {
  row-gap: var(--ui-gap-component);
}

.ui-admin-service-catalog .items-by-category {
  display: grid;
  gap: var(--ui-gap-component);
}

.ui-admin-service-catalog .ui-service-category {
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-radius-panel);
  box-shadow: var(--ui-system-shadow-001);
}

.ui-admin-service-catalog .ui-service-category .card-header {
  min-height: 56px;
  padding: 14px 16px;
  border-bottom-color: var(--ui-border-subtle);
  background: var(--ui-surface-raised);
}

.ui-admin-service-catalog .ui-service-category .card-title {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--ui-color-ink);
  font-size: 14px;
  font-weight: 720;
}

.ui-admin-service-catalog .ui-service-category__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-admin-service-catalog .ui-service-category__edit {
  display: inline-flex;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ui-system-color-036);
  border-radius: var(--ui-system-radius-003);
  background: var(--ui-system-color-037);
  color: var(--ui-color-primary-strong);
  text-decoration: none;
  box-shadow: var(--ui-system-shadow-001);
  transition:
    border-color var(--ui-duration-fast) ease,
    background-color var(--ui-duration-fast) ease,
    color var(--ui-duration-fast) ease,
    box-shadow var(--ui-duration-fast) ease;
}

.ui-admin-service-catalog .ui-service-category__edit:hover {
  border-color: var(--ui-color-primary-bright);
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary-deep);
  text-decoration: none;
}

.ui-admin-service-catalog .ui-service-category__edit:focus-visible {
  border-color: var(--ui-color-primary);
  color: var(--ui-color-primary-deep);
  text-decoration: none;
  outline: 0;
  box-shadow: var(--ui-shadow-focus);
}

.ui-admin-service-catalog .ui-service-category__edit:active {
  border-color: var(--ui-color-primary);
  background: var(--ui-system-color-038);
  color: var(--ui-color-primary-deep);
}

.ui-admin-service-catalog .ui-service-category__edit .fe {
  font-size: 13px;
  line-height: 1;
}

.ui-admin-service-catalog .ui-service-category .table-responsive {
  margin: 0;
}

@keyframes ui-content-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1279px) {





  /* The fixed topbar already carries the brand on tablet/mobile. Keeping the
     desktop lockup inside the drawer duplicated the logo and delayed access to
     navigation. */







  .ui-dashboard-hero {
    grid-template-columns: 1fr;
  }

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




}

@media (max-width: 767px) {






















  .ui-dashboard,
  .ui-dashboard-hero {
    gap: 14px;
  }

  .ui-dashboard-hero__primary,
  .ui-dashboard-hero__account,
  .ui-metric-card,
  .ui-chart-card,
  .ui-status-card,
  .ui-dashboard-zero {
    padding: 16px;
    border-radius: var(--ui-radius-panel-mobile);
  }

  .ui-dashboard-title {
    font-size: 25px;
  }

  .ui-chart-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ui-metric-grid,
  .ui-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ui-metric-card {
    min-height: 106px;
  }

  .ui-status-card {
    min-height: 90px;
  }

  .ui-metric-card__icon,
  .ui-status-card__icon {
    width: 34px;
    height: 34px;
    border-radius: var(--ui-system-radius-005);
    font-size: 16px;
  }

  .ui-metric-card__value,
  .ui-status-card__value {
    margin-top: 13px;
    font-size: 19px;
  }

  .ui-chart-card {
    min-height: 300px;
  }

  .ui-dashboard-zero {
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }

  .ui-dashboard-zero__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--ui-system-radius-013);
    font-size: 19px;
  }

  .ui-dashboard-zero__content h2 {
    font-size: 19px;
  }

  .ui-dashboard-zero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ui-dashboard-zero__actions .btn {
    width: 100%;
  }


  .ui-app .ui-order-guide details {
    border-radius: var(--ui-radius-panel-mobile);
  }

  .ui-app .ui-order-guide summary {
    min-height: 68px;
    padding: 13px 14px;
  }

  .ui-app .ui-order-guide__content {
    padding: 16px;
  }

  .ui-app .ui-funds-header {
    align-items: stretch;
  }

  .ui-app .ui-funds-header .btn {
    width: 100%;
  }

  .ui-app .ui-payment-panel .card-header {
    padding-right: 14px;
    padding-left: 14px;
  }

  .ui-app .ui-payment-panel .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .ui-app .ui-tickets-header__actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: stretch;
    margin-top: 12px;
  }

  .ui-app .ui-tickets-header__actions .search-area,
  .ui-app .ui-tickets-header__actions .btn {
    width: 100%;
  }

  .ui-app .ui-tickets-header__actions .btn {
    justify-content: center;
  }


  .ui-app .ui-content-header > .btn {
    width: 100%;
  }














  .ui-app .ui-faq-category-admin .ui-page-header,
  .ui-app .ui-faq-category-admin .ui-page-actions {
    display: grid;
    gap: 10px;
  }

  .ui-app .ui-faq-category-admin .ui-page-actions .btn {
    width: 100%;
  }







  .ui-dashboard-quick-links {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--ui-border-subtle);
    border-left: 0;
  }

  .ui-dashboard-quick-links__label {
    grid-column: 1 / -1;
  }

  .ui-status-more summary {
    min-height: 44px;
  }





  .ui-service-admin-toolbar__actions,
  .ui-service-admin-toolbar__filters,
  .ui-service-admin-toolbar__bulk,
  .ui-service-admin-toolbar__search {
    width: 100%;
  }

  .ui-service-admin-toolbar__filters {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .ui-service-admin-toolbar__search .input-group {
    width: 100%;
  }

  .ui-service-admin-toolbar__category .form-select {
    width: 100%;
  }


  /* Wide data sets remain horizontally scrollable instead of squeezing every
     column into a 360px card and turning e-mail addresses/actions vertical. */


  body.ui-app[data-area="admin"] .ui-admin-service-catalog .table-responsive table {
    min-width: 840px;
  }


  .ui-app .ui-settings-content > .card.content > .card-body,
  .ui-app .ui-settings-content > .card.content > .card-footer {
    padding-right: 16px;
    padding-left: 16px;
  }




  .ui-app .ui-order-catalog .brand-category {
    min-height: 44px;
    padding: 9px 10px;
    font-size: var(--ui-font-size-min);
  }



}

@media (max-width: 359.98px) {





}

@media (max-width: 479.98px) {

}

/* UI 2.1: a denser, image-led SaaS workspace with quieter component chrome. */







@media (max-width: 767.98px) {
  .ui-app .ui-services-header {
    align-items: stretch;
    flex-direction: column;
  }

  .ui-app .ui-services-header .ui-services-filters {
    width: 100%;
    grid-template-columns: 1fr;
    margin-left: 0;
  }
}

.ui-app .ui-flow-header:not(.ui-legal-hero) {
  position: relative;
  min-height: 76px;
  align-items: center;
  padding: 14px 17px 14px 20px;
  border: 1px solid var(--ui-system-color-042);
  border-radius: var(--ui-system-radius-014);
  background:
    linear-gradient(105deg, var(--ui-system-color-003) 0%, var(--ui-system-color-043) 100%);
  box-shadow: var(--ui-system-shadow-007);
}

.ui-app .ui-flow-header:not(.ui-legal-hero)::before {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 9px;
  width: 3px;
  border-radius: var(--ui-system-radius-007);
  background: var(--ui-action-primary-background);
  content: "";
}

.ui-app .ui-refund-ledger-note {
  border: 1px solid var(--ui-system-color-052);
  border-radius: var(--ui-radius-panel);
  background:
    linear-gradient(105deg, var(--ui-color-primary-soft) 0%, var(--ui-system-color-043) 100%);
  color: var(--ui-color-primary-deep);
  box-shadow: var(--ui-system-shadow-001);
}

.ui-app .ui-refund-ledger-note > i {
  color: var(--ui-color-primary);
}

.ui-app .ui-refund-ledger-note strong {
  color: var(--ui-color-primary-strong);
}

.ui-app .ui-refund-service-name {
  max-width: 320px;
}

@supports selector(table:has(.ui-empty-row)) {
  @media (max-width: 767px) {


  }
}

.ui-app .ui-settings-card,
.ui-app .ui-ticket-compose,
.ui-app .ui-ticket-list-panel,
.ui-app .ui-service-catalog .service-category {
  box-shadow: var(--ui-system-shadow-008);
}

.ui-app .ui-settings-card .card-header,
.ui-app .ui-ticket-compose .card-header,
.ui-app .ui-ticket-list-panel .card-header {
  background: linear-gradient(180deg, var(--ui-system-color-011) 0%, var(--ui-system-color-046) 100%);
}

.ui-app .ui-settings-card .form-actions > div,
.ui-app .ui-settings-card .form-actions.left > div {
  padding-left: 0;
}

.ui-app .ui-service-table .btn-sm {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.ui-app .ui-currency-input .input-group-append {
  display: flex;
}

.ui-app .ui-currency-input .input-group-text {
  min-width: 64px;
  height: 44px;
  border-color: var(--ui-border-strong);
  border-top-right-radius: var(--ui-radius-control);
  border-bottom-right-radius: var(--ui-radius-control);
  background: var(--ui-system-color-047);
  color: var(--ui-color-primary-deep);
}

.ui-app .ui-tickets-header__actions .input-group {
  flex-wrap: nowrap;
}

.ui-app .ui-tickets-header__actions .btn-search {
  width: 44px;
  height: 44px;
  min-height: 44px;
}

.ui-dashboard {
  gap: 20px;
}

.ui-dashboard > * {
  min-width: 0;
}

.ui-dashboard-hero {
  position: relative;
  display: grid;
  grid-template-areas:
    "copy visual"
    "account account";
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
  min-height: 330px;
  gap: 18px 24px;
  overflow: hidden;
  padding: 30px;
  border: 1px solid var(--ui-system-color-028);
  border-radius: var(--ui-system-radius-015);
  background:
    radial-gradient(circle at 86% 22%, var(--ui-system-color-048), transparent 22rem),
    linear-gradient(125deg, var(--ui-system-color-049) 0%, var(--ui-system-color-030) 48%, var(--ui-system-color-050) 100%);
  box-shadow: var(--ui-system-shadow-009);
}

.ui-dashboard-hero::before {
  position: absolute;
  top: -86px;
  right: 18%;
  width: 220px;
  height: 220px;
  border: 1px solid var(--ui-system-color-052);
  border-radius: var(--ui-system-radius-004);
  content: "";
}

.ui-dashboard-hero__content {
  position: relative;
  z-index: 2;
  grid-area: copy;
  align-self: center;
  max-width: 620px;
}

.ui-dashboard-hero__visual {
  position: relative;
  z-index: 1;
  display: flex;
  grid-area: visual;
  align-self: stretch;
  align-items: flex-end;
  justify-content: flex-end;
  min-width: 0;
  margin: 0 -12px -18px 0;
}

.ui-dashboard-hero__visual img {
  width: min(100%, 560px);
  max-height: 270px;
  object-fit: contain;
  object-position: right bottom;
}

.ui-dashboard-title {
  max-width: 620px;
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 790;
  line-height: 1.08;
}

.ui-dashboard-copy {
  max-width: 560px;
  margin: 13px 0 20px;
  color: var(--ui-color-muted-strong);
  font-size: 14px;
  line-height: 1.68;
}

.ui-dashboard-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ui-dashboard-account {
  position: relative;
  z-index: 2;
  display: flex;
  grid-area: account;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 14px 16px;
  border: 1px solid var(--ui-system-color-053);
  border-radius: var(--ui-system-radius-016);
  background: var(--ui-system-color-054);
  box-shadow: var(--ui-system-shadow-010);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

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

.ui-dashboard-account__identity > span:last-child {
  display: grid;
  min-width: 0;
}

.ui-dashboard-account__avatar {
  display: inline-flex;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--ui-system-radius-013);
  background: var(--ui-action-primary-background);
  color: var(--ui-system-color-011);
  font-size: 16px;
  font-weight: 780;
  box-shadow: var(--ui-system-shadow-011);
}

.ui-account-name,
.ui-account-meta {
  display: block;
}

.ui-account-name {
  margin: 1px 0 0;
  font-size: 14px;
}

.ui-account-meta {
  overflow: hidden;
  font-size: var(--ui-font-size-min);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-account-actions {
  min-width: 250px;
  margin: 0;
}

.ui-account-actions > span {
  display: grid;
  gap: 1px;
}

.ui-account-actions small {
  color: var(--ui-color-muted);
  font-size: var(--ui-font-size-min);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ui-account-balance {
  font-size: 17px;
}

.ui-metric-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-system-radius-011);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-system-shadow-012);
}

.ui-metric-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 116px;
  align-content: center;
  gap: 3px 13px;
  padding: 20px;
  border: 0;
  border-left: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-system-radius-012);
  background: transparent;
}

.ui-metric-card:first-child {
  border-left: 0;
}

.ui-metric-card:hover {
  background: var(--ui-system-color-012);
  box-shadow: var(--ui-system-shadow-001);
  transform: none;
}

.ui-metric-card__icon {
  grid-row: 1 / 3;
  align-self: center;
  width: 42px;
  height: 42px;
  border-radius: var(--ui-system-radius-009);
  background: linear-gradient(145deg, var(--ui-system-color-057) 0%, var(--ui-system-color-058) 100%);
}

.ui-metric-card:nth-child(2) .ui-metric-card__icon {
  background: var(--ui-system-color-059);
  color: var(--ui-system-color-060);
}

.ui-metric-card:nth-child(3) .ui-metric-card__icon {
  background: var(--ui-system-color-061);
  color: var(--ui-system-color-062);
}

.ui-metric-card:nth-child(4) .ui-metric-card__icon {
  background: var(--ui-system-color-063);
  color: var(--ui-system-color-064);
}

.ui-metric-card__value {
  margin: 0;
  font-size: 22px;
}

.ui-metric-card__label {
  font-size: var(--ui-font-size-min);
}

.ui-chart-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.72fr);
  gap: 16px;
}

.ui-chart-card {
  position: relative;
  min-height: 318px;
  overflow: hidden;
  padding: 20px 22px;
  border-color: var(--ui-system-color-052);
  border-radius: var(--ui-system-radius-011);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-system-shadow-013);
}

.ui-chart-card--trend::after,
.ui-chart-card--trend::before {
  display: none;
}

.ui-section-kicker {
  margin: 0 0 4px;
  color: var(--ui-color-muted);
  font-size: var(--ui-font-size-min);
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ui-chart-card__metric {
  display: grid;
  justify-items: end;
  gap: 3px;
}

.ui-chart-card__metric strong {
  color: var(--ui-color-ink);
  font-size: 24px;
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ui-chart-card__metric span {
  color: var(--ui-color-muted);
  font-size: var(--ui-font-size-min);
  font-weight: 650;
  line-height: 1;
}

.ui-chart-canvas {
  position: relative;
  z-index: 1;
  height: 232px;
}

.ui-chart-card .c3 svg {
  font-family: inherit;
}

.ui-chart-card .c3-axis-x path,
.ui-chart-card .c3-axis-x line,
.ui-chart-card .c3-axis-y path,
.ui-chart-card .c3-axis-y line {
  stroke: transparent;
}

.ui-chart-card .c3-grid line {
  stroke: var(--ui-chart-grid);
  stroke-dasharray: 2 7;
  stroke-linecap: round;
}

.ui-chart-card .c3-axis text,
.ui-chart-card .c3-legend-item text {
  fill: var(--ui-color-muted);
  font-size: var(--ui-font-size-min);
}

.ui-chart-card .c3-axis text {
  font-variant-numeric: tabular-nums;
  font-weight: 560;
}

.ui-chart-card .c3-legend-item {
  cursor: pointer;
}

.ui-chart-card .c3-legend-item text {
  fill: var(--ui-color-muted-strong);
  font-weight: 650;
}

.ui-chart-card .c3-legend-item-tile {
  stroke-linecap: round;
  stroke-width: 6px;
}

.ui-chart-card .c3-line {
  stroke-width: 2.6px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-chart-card .c3-target {
  transition: opacity var(--ui-duration-normal) var(--ui-ease-standard);
}

.ui-chart-card .c3-target.c3-defocused {
  opacity: 0.16;
}

.ui-chart-card .c3-target.c3-focused .c3-line {
  stroke-width: 3.2px;
}

.ui-chart-card .c3-circle {
  stroke: none;
  stroke-width: 0;
}

.ui-chart-card .c3-circle._expanded_ {
  stroke: var(--ui-surface-raised);
  stroke-width: 2.5px;
}

.ui-chart-card .c3-xgrid-focus line {
  stroke: var(--ui-chart-focus-line);
  stroke-dasharray: 0;
}

.ui-chart-card .c3-tooltip {
  overflow: hidden;
  border: 1px solid var(--ui-border-subtle);
  border-radius: var(--ui-system-radius-006);
  background: var(--ui-surface-raised);
  box-shadow: var(--ui-shadow-dropdown);
  color: var(--ui-color-text);
  line-height: 1.35;
}

.ui-chart-card .c3-tooltip th {
  padding: 9px 11px;
  border-bottom: 1px solid var(--ui-border-subtle);
  background: var(--ui-surface-subtle);
  color: var(--ui-color-ink);
  font-size: var(--ui-font-size-min);
  font-weight: 720;
}

.ui-chart-card .c3-tooltip td {
  padding: 7px 11px;
  border: 0;
  background: var(--ui-surface-raised);
  color: var(--ui-color-muted-strong);
  font-size: var(--ui-font-size-min);
  font-weight: 620;
}

.ui-chart-card .c3-tooltip td.value {
  color: var(--ui-color-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 740;
}

.ui-chart-card .c3-tooltip td > span {
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: var(--ui-radius-circle);
}

.ui-chart-card .c3-texts text {
  fill: var(--ui-color-ink);
  font-size: var(--ui-font-size-min);
  font-weight: 720;
}

.ui-chart-card .c3-bar {
  opacity: 0.88;
  transition: opacity var(--ui-duration-fast) ease;
}

.ui-chart-card .c3-bar:hover {
  opacity: 1;
}

.ui-chart-card--admin-status {
  display: flex;
  flex-direction: column;
}

.ui-admin-status-chart {
  display: grid;
  flex: 1;
  grid-template-rows: 284px 18px;
  gap: 10px;
  align-content: start;
}

.ui-admin-status-chart__visual {
  position: relative;
  min-height: 284px;
}

.ui-admin-status-chart__visual #orders_chart_pie,
.ui-admin-status-chart__visual #orders_chart_pie > svg {
  width: 100%;
  height: 284px;
}

.ui-admin-status-chart__visual .c3-chart-arcs-title {
  display: none;
}

.ui-admin-status-chart__visual .c3-chart-arc text {
  display: none;
}

.ui-admin-status-chart__visual .c3-chart-arc path {
  stroke: var(--ui-surface-raised);
  stroke-width: 2px;
  transition:
    filter var(--ui-duration-fast) ease,
    opacity var(--ui-duration-fast) ease;
}

.ui-admin-status-chart__visual .c3-chart-arc path:hover {
  filter: saturate(1.08) brightness(1.03);
}

.ui-admin-status-chart__center {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  width: 94px;
  height: 94px;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--ui-system-color-007);
  border-radius: var(--ui-system-radius-004);
  background: var(--ui-system-color-066);
  box-shadow: var(--ui-system-shadow-014);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.ui-admin-status-chart__center strong {
  color: var(--ui-color-ink);
  font-size: 27px;
  font-weight: 790;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ui-admin-status-chart__center span {
  color: var(--ui-color-muted);
  font-size: var(--ui-font-size-min);
  font-weight: 680;
  line-height: 1.2;
  text-align: center;
}

.ui-admin-status-legend {
  display: flex;
  min-width: 0;
  min-height: 18px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.ui-admin-status-legend::-webkit-scrollbar {
  display: none;
}

.ui-admin-status-legend__item {
  --ui-status-color: var(--ui-color-primary);
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ui-color-text);
  font-size: var(--ui-font-size-min);
  font-weight: 650;
  white-space: nowrap;
}

.ui-admin-status-legend__swatch {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--ui-system-radius-017);
  background: var(--ui-status-color);
}

.ui-status-distribution {
  display: grid;
  gap: 12px;
  margin-top: 13px;
}

.ui-status-distribution__item {
  --ui-status-color: var(--ui-color-primary);
  display: grid;
  gap: 7px;
  padding: 2px 0;
  transition: transform var(--ui-duration-fast) ease;
}

.ui-status-distribution__item:hover {
  transform: translateX(2px);
}

.ui-status-distribution__meta,
.ui-status-distribution__name,
.ui-status-distribution__value {
  display: flex;
  align-items: center;
}

.ui-status-distribution__meta {
  justify-content: space-between;
  gap: 12px;
}

.ui-status-distribution__name {
  min-width: 0;
  gap: 8px;
  color: var(--ui-color-text);
  font-size: 12px;
  font-weight: 680;
}

.ui-status-distribution__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: var(--ui-system-radius-004);
  background: var(--ui-status-color);
}

.ui-status-distribution__value {
  flex: 0 0 auto;
  gap: 7px;
}

.ui-status-distribution__value strong {
  min-width: 20px;
  color: var(--ui-color-ink);
  font-size: 13px;
  font-weight: 760;
  text-align: right;
}

.ui-status-distribution__value small {
  min-width: 38px;
  color: var(--ui-color-muted);
  font-size: var(--ui-font-size-min);
  font-weight: 650;
  text-align: right;
}

.ui-status-distribution__track {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: var(--ui-system-radius-007);
  background: var(--ui-system-color-068);
}

.ui-status-distribution__fill {
  display: block;
  width: var(--ui-status-share);
  height: 100%;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-status-color);
  transform: scaleX(0);
  transform-origin: left center;
  animation: ui-status-share-reveal 420ms ease-out forwards;
}

.ui-status-distribution__item--completed {
  --ui-status-color: var(--ui-system-color-069);
}

.ui-status-distribution__item--processing {
  --ui-status-color: var(--ui-system-color-070);
}

.ui-status-distribution__item--inprogress {
  --ui-status-color: var(--ui-system-color-071);
}

.ui-status-distribution__item--pending {
  --ui-status-color: var(--ui-system-color-072);
}

.ui-status-distribution__item--partial {
  --ui-status-color: var(--ui-system-color-073);
}

.ui-status-distribution__item--canceled {
  --ui-status-color: var(--ui-system-color-074);
}

.ui-status-distribution__item--refunded {
  --ui-status-color: var(--ui-system-color-075);
}

.ui-status-distribution-empty {
  display: grid;
  min-height: 230px;
  place-content: center;
  justify-items: center;
  gap: 6px;
  color: var(--ui-color-muted);
}

.ui-status-distribution-empty > .fe {
  display: grid;
  width: 42px;
  height: 42px;
  margin-bottom: 4px;
  place-items: center;
  border-radius: var(--ui-system-radius-002);
  background: var(--ui-color-primary-soft);
  color: var(--ui-color-primary-strong);
  font-size: 18px;
}

.ui-status-distribution-empty strong {
  color: var(--ui-color-ink);
  font-size: 24px;
  line-height: 1;
}

.ui-status-distribution-empty small {
  font-size: var(--ui-font-size-min);
}

@keyframes ui-status-share-reveal {
  to {
    transform: scaleX(1);
  }
}

.ui-chart-empty-pie {
  display: grid;
  min-height: 300px;
  place-items: center;
}

.ui-chart-empty-pie__ring {
  position: relative;
  display: grid;
  width: 158px;
  height: 158px;
  place-items: center;
  border-radius: var(--ui-system-radius-004);
  background: var(--ui-system-color-052);
  box-shadow:
    var(--ui-system-shadow-015);
}

.ui-chart-empty-pie__ring::after {
  position: absolute;
  inset: 17px;
  border-radius: var(--ui-radius-pill);
  border: 1px solid var(--ui-system-color-078);
  background: var(--ui-surface-raised);
  content: "";
}

.ui-chart-empty-pie__center {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 5px;
}

.ui-chart-empty-pie strong {
  color: var(--ui-color-ink);
  font-size: 28px;
  font-weight: 780;
  letter-spacing: -0.04em;
  line-height: 1;
}

.ui-chart-empty-pie small {
  color: var(--ui-color-muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1;
}

.ui-dashboard-zero {
  grid-template-columns: auto minmax(0, 1fr) minmax(190px, auto);
  padding: 23px 24px;
  border-color: var(--ui-system-color-052);
  border-radius: var(--ui-system-radius-011);
  background:
    radial-gradient(circle at 12% 22%, var(--ui-system-color-033), transparent 15rem),
    linear-gradient(135deg, var(--ui-system-color-011) 0%, var(--ui-system-color-012) 100%);
  box-shadow: var(--ui-system-shadow-016);
}

.ui-dashboard-zero__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--ui-system-radius-014);
}

.ui-status-grid {
  gap: 12px;
}

.ui-status-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-height: 88px;
  align-content: center;
  gap: 2px 11px;
  padding: 15px;
  border-color: var(--ui-system-color-042);
  border-radius: var(--ui-system-radius-013);
}

.ui-status-card:hover {
  box-shadow: var(--ui-system-shadow-017);
}

.ui-status-card__icon {
  grid-row: 1 / 3;
  align-self: center;
  width: 38px;
  height: 38px;
}

.ui-status-card__value {
  margin: 0;
  font-size: 19px;
}

.ui-status-more {
  border-top: 0;
}

.ui-status-more summary {
  width: fit-content;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--ui-system-radius-007);
  background: var(--ui-color-primary-soft);
}


@media (max-width: 1279px) {
  .ui-dashboard-hero {
    grid-template-areas:
      "copy visual"
      "account account";
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  }

  .ui-dashboard-hero__visual img {
    max-height: 210px;
  }

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

  .ui-metric-card:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--ui-border-subtle);
  }

  .ui-metric-card:nth-child(4) {
    border-top: 1px solid var(--ui-border-subtle);
  }
}

@media (max-width: 767px) {
  .ui-dashboard-hero {
    grid-template-areas:
      "copy"
      "visual"
      "account";
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 20px 16px 16px;
    border-radius: var(--ui-system-radius-014);
  }

  .ui-dashboard-hero__visual {
    min-height: 156px;
    justify-content: center;
    margin: 0 0 -8px;
  }

  .ui-dashboard-hero__visual img {
    width: min(100%, 360px);
    max-height: 200px;
    object-position: center bottom;
  }

  .ui-dashboard-title {
    font-size: 28px;
  }

  .ui-dashboard-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ui-dashboard-account {
    align-items: stretch;
    flex-direction: column;
    padding: 13px;
  }

  .ui-account-actions {
    min-width: 0;
  }

  .ui-metric-grid {
    grid-template-columns: 1fr;
    border-radius: var(--ui-system-radius-013);
  }

  .ui-metric-card {
    min-height: 94px;
    border-top: 1px solid var(--ui-border-subtle);
    border-left: 0;
  }

  .ui-metric-card:first-child {
    border-top: 0;
  }

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

  .ui-chart-card {
    min-height: 300px;
    padding: 16px;
    border-radius: var(--ui-system-radius-013);
  }

  .ui-chart-canvas {
    height: 220px;
  }

  .ui-chart-card__metric strong {
    font-size: 21px;
  }

  .ui-status-distribution {
    gap: 11px;
  }

  .ui-dashboard-zero {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 18px 16px;
  }

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









}

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