/* UK Boost — Figma New Order layout (shared by Twig + static HTML) */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700&family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600&family=Poppins:wght@600&family=Manrope:wght@400;600&family=Hanken+Grotesk:wght@400&display=swap");
:root {
  --ukb-teal: #21bacb;
  --ukb-teal-dark: #0d6872;
  --ukb-teal-soft: rgba(33, 186, 203, 0.1);
  --ukb-teal-soft-2: rgba(33, 186, 203, 0.2);
  --ukb-bg: #f6f6f6;
  --ukb-card: #ffffff;
  --ukb-text: #181818;
  --ukb-text-2: #404040;
  --ukb-muted: #a0a0a0;
  --ukb-border: #e8e8e3;
  --ukb-input: #eeeeee;
  --ukb-sidebar-w: 370px;
  --ukb-radius: 16px;
  --ukb-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --ukb-grad: radial-gradient(
    circle at 30% 20%,
    #21bacb 0%,
    #17919f 50%,
    #0d6872 100%
  );
  --ukb-community-facebook-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 287.45 100.33' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.0000020016 14.332 -40.712 -7.5955 143.73 -37.623)'%3E%3Cstop stop-color='rgba(122,180,253,1)' offset='0'/%3E%3Cstop stop-color='rgba(79,138,217,1)' offset='0.5'/%3E%3Cstop stop-color='rgba(57,117,199,1)' offset='0.75'/%3E%3Cstop stop-color='rgba(35,96,181,1)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  --ukb-community-whatsapp-bg: url("data:image/svg+xml,%3Csvg viewBox='0 0 287.45 100.33' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)'/%3E%3Cdefs%3E%3CradialGradient id='grad' gradientUnits='userSpaceOnUse' cx='0' cy='0' r='10' gradientTransform='matrix(0.0000020016 14.332 -40.712 -7.5955 143.73 -37.623)'%3E%3Cstop stop-color='rgba(115,213,138,1)' offset='0'/%3E%3Cstop stop-color='rgba(70,182,101,1)' offset='0.5'/%3E%3Cstop stop-color='rgba(47,167,83,1)' offset='0.75'/%3E%3Cstop stop-color='rgba(24,152,64,1)' offset='1'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E");
  --ukb-button-grad: radial-gradient(
    160.6% 142.86% at 50% -37.5%,
    #21bacb 0%,
    #0d6872 100%
  );
  --ukb-topbar-control-h: 42px;
  --ukb-topbar-control-pad: 4px;
  --ukb-topbar-control-inner: calc(
    var(--ukb-topbar-control-h) - var(--ukb-topbar-control-pad) * 2
  );
  --ukb-shell-surface: #ffffff;
  --ukb-topbar-bg: #ffffff;
  --ukb-search-bg: #f7f8f9;
  --ukb-chip-bg: #ffffff;
  --ukb-chip-border: #dfe0e4;
  --ukb-notify-bg: #f7f8f9;
  --ukb-sidebar-surface: #ffffff;
  --ukb-brand-divider: #e8e8e3;
  --ukb-brand-text: #020618;
  --ukb-nav-hover-bg: #f7f8f9;
  --ukb-date-text: #2b2b22;
  --ukb-kbd-bg: #ffffff;
  --ukb-topbar-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  --ukb-alert-success-bg: #f0fdf4;
  --ukb-alert-success-border: #86efac;
  --ukb-alert-success-text: #166534;
  --ukb-alert-danger-bg: #fef2f2;
  --ukb-alert-danger-border: #fecaca;
  --ukb-alert-danger-text: #991b1b;
}

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

/* No click focus ring / link underline site-wide */
*,
*::before,
*::after {
  outline: none !important;
}

*:focus,
*:focus-visible,
*:active {
  outline: none !important;
  outline-offset: 0 !important;
}

a,
a:link,
a:visited,
a:hover,
a:focus,
a:focus-visible,
a:active {
  text-decoration: none !important;
}

html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

body.ukb-body {
  margin: 0;
  min-height: 100%;
  background: var(--ukb-bg);
  color: var(--ukb-text);
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.ukb-body.ukb-auth .navbar {
  display: none;
}

body.ukb-body.ukb-auth {
  height: 100%;
  overflow: hidden;
}

/* ——— Shell (sidebar + topbar connected, soft outer shadow) ——— */
.ukb-shell {
  --ukb-header-h: 100px;
  --ukb-float-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  position: relative;
  z-index: auto;
  display: flex;
  gap: 0;
  margin: 30px 30px 0;
  padding: 0;
  height: calc(100vh - 30px);
  max-height: calc(100vh - 30px);
  min-height: calc(100vh - 30px);
  align-items: stretch;
  background: var(--ukb-shell-surface);
  border-radius: 25px;
  box-shadow: none;
  overflow: visible;
}

/* Shadow on left / top / bottom only — right edge clipped */
.ukb-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--ukb-float-shadow);
  clip-path: inset(-40px 0 -40px -40px);
  pointer-events: none;
  z-index: -1;
}

.ukb-sidebar {
  width: var(--ukb-sidebar-w);
  flex-shrink: 0;
  position: relative;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--ukb-sidebar-surface);
  border-radius: 25px 0 0 0;
  border: 0;
  padding: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition:
    width 0.28s ease,
    opacity 0.22s ease,
    min-width 0.28s ease;
}

/* Brand + topbar share one header band */
.ukb-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: var(--ukb-header-h);
  min-height: var(--ukb-header-h);
  padding: 0 25px;
  border: 0;
  background: var(--ukb-sidebar-surface);
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.ukb-brand::after {
  content: "";
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 0;
  height: 1px;
  background: var(--ukb-brand-divider);
  pointer-events: none;
}

.ukb-brand__name {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 42px;
  flex-shrink: 0;
}

.ukb-brand__logo {
  display: block;
  width: 179px;
  max-width: 100%;
  height: 42px;
  object-fit: contain;
  object-position: left center;
}

html:not([data-ukb-theme="dark"]) .ukb-brand__logo--dark-theme {
  display: none;
}

html[data-ukb-theme="dark"] .ukb-brand__logo--light-theme {
  display: none;
}

.ukb-brand__toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 30px;
  height: 26px;
  border: 0;
  border-radius: 4px;
  background: var(--ukb-grad);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ukb-brand__toggle svg {
  position: relative;
  z-index: 1;
}

.ukb-sidebar__divider {
  display: none;
}

.ukb-sidebar__body {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 25px;
  flex: 1;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
  background: var(--ukb-sidebar-surface);
  box-shadow: var(--ukb-topbar-shadow);
  position: relative;
  z-index: 1;
}

.ukb-sidebar__scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 8px 16px;
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ukb-sidebar__scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Profile card */
.ukb-profile {
  border: 1.5px solid #0b8da1;
  border-radius: 12px;
  padding: 31px 20px 24px;
  background: linear-gradient(
    132.5deg,
    rgba(165, 246, 255, 0.4),
    rgba(27, 158, 173, 0.4)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

.ukb-profile__avatar {
  width: 60px;
  height: 60px;
  border-radius: 32px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.ukb-profile__name {
  margin: 0 0 5px;
  font-weight: 600;
  font-size: 18px;
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

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

.ukb-profile__balance {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--ukb-grad);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
}

.ukb-profile__add {
  width: 54px;
  height: 32px;
  border-radius: 50px;
  border: 2px solid var(--ukb-teal);
  background: linear-gradient(#fff, #ccc);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ukb-teal-dark);
  text-decoration: none;
  font-size: 18px;
  line-height: 1;
}

/* Nav sections */
.ukb-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ukb-nav-section {
  width: 100%;
}

.ukb-nav-section__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #aaa;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

.ukb-nav-section:not(.is-collapsed) > .ukb-nav-section__title {
  margin-bottom: 16px;
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ukb-nav-section.is-collapsed > .ukb-nav-section__title {
  margin-bottom: 0;
}

/* Space after last link (or collapsed header) before the next section title */
.ukb-nav-section + .ukb-nav-section > .ukb-nav-section__title {
  margin-top: 20px;
}

.ukb-nav-section__title .caret-icon {
  width: 10px;
  height: 6px;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.ukb-nav-section.is-collapsed .ukb-nav-list {
  display: none;
}

.ukb-nav-section.is-collapsed .caret-icon {
  transform: rotate(180deg);
}

.ukb-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ukb-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  padding: 0 12px;
  border: 1.5px solid transparent;
  border-radius: 12px;
  color: var(--ukb-text-2);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition:
    background 0.15s,
    color 0.15s;
}

.ukb-nav-link:hover {
  background: var(--ukb-nav-hover-bg);
  color: var(--ukb-text);
  text-decoration: none;
}

.ukb-nav-link.active {
  gap: 12px;
  padding: 0 12px;
  color: #fff;
  font-weight: 700;
  background: var(--ukb-grad);
  border-color: rgba(252, 252, 252, 0.7);
  box-shadow:
    0 -1px 0 1px #3f6289,
    0 16px 24px -8px rgba(24, 27, 37, 0.1),
    inset 0 -2px 4px #0e121b,
    inset 0 2px 6px rgba(255, 255, 255, 0.2);
}

/* Panel menu / topbar notification counts (overrides inline orange .badge) */
.ukb-nav-link .badge,
.ukb-notify__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: #ef4444 !important;
  color: #fff !important;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  border: 2px solid #fff;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
}

.ukb-nav-link .badge {
  flex-shrink: 0;
  margin: 0 0 0 6px;
  vertical-align: middle;
}

.ukb-nav-link.active .badge {
  background-color: #fff !important;
  color: #b91c1c !important;
  border-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

.ukb-nav-link__icon {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  background: #f7f8f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
  color: var(--ukb-teal-dark);
}

.ukb-nav-link__icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
  filter: none;
  opacity: 1;
}

/* Inactive: gray silhouette from solid-black SVG assets */
.ukb-nav-link:not(.active)
  .ukb-nav-link__icon-img:not(.ukb-nav-link__icon-img--new-order):not(
    .ukb-nav-link__icon-img--logout
  ) {
  filter: brightness(0);
  opacity: 0.5;
}

/* New Order: same cart asset (white SVG) tinted gray when inactive */
.ukb-nav-link:not(.active) .ukb-nav-link__icon-img--new-order {
  filter: brightness(0);
  opacity: 0.5;
}

.ukb-nav-link.active .ukb-nav-link__icon {
  width: 32px;
  height: 32px;
  background: transparent;
  color: #fff;
}

/* Active: match New Order white — native white SVGs, invert others */
.ukb-nav-link.active
  .ukb-nav-link__icon-img--force-white:not(
    .ukb-nav-link__icon-img--native-white
  ) {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.ukb-nav-link.active .ukb-nav-link__icon-img--native-white {
  filter: none;
  opacity: 1;
}

.ukb-nav-link.active .ukb-nav-link__icon-img--logout {
  filter: none;
  opacity: 1;
}

/* Static previews / legacy solid-white class */
.ukb-nav-link.active
  .ukb-nav-link__icon-img--solid-white:not(
    .ukb-nav-link__icon-img--native-white
  ):not(.ukb-nav-link__icon-img--new-order) {
  filter: brightness(0) saturate(100%) invert(1);
  opacity: 1;
}

.ukb-nav-link.active
  .ukb-nav-link__icon-img--solid-white.ukb-nav-link__icon-img--new-order {
  filter: none;
  opacity: 1;
}

/* Support card */
.ukb-support {
  position: relative;
  flex: 0 0 auto;
  margin-top: 16px;
  z-index: 2;
  overflow: hidden;
  border-radius: 24px;
  padding: 14px 16px 16px;
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 10px;
  row-gap: 10px;
  align-items: start;
  background-color: #fbfbfb;
  background-image: radial-gradient(
    ellipse 130% 90% at 0% 0%,
    rgba(196, 239, 186, 0.45) 0%,
    rgba(255, 252, 230, 0.2) 40%,
    transparent 72%
  );
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

.ukb-support__icon {
  grid-column: 1;
  grid-row: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ukb-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ukb-support__icon-img {
  width: 16px;
  height: 16px;
  display: block;
  object-fit: contain;
}

.ukb-support__copy {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ukb-support__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ukb-text);
}

.ukb-support__text {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ukb-muted);
}

.ukb-support__btn {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 100px;
  background: var(--ukb-grad);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 500;
  border: 0;
  width: 100%;
  margin-top: 0;
  box-shadow:
    0 2px 8px rgba(13, 104, 114, 0.32),
    0 1px 2px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.ukb-support__btn:hover {
  color: #fff !important;
  transform: translateY(-2px);
  filter: brightness(1.1) saturate(1.08);
  box-shadow:
    0 8px 22px rgba(33, 186, 203, 0.48),
    0 3px 8px rgba(13, 104, 114, 0.35);
}

.ukb-support__btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
  box-shadow:
    0 2px 6px rgba(13, 104, 114, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.12);
}

.ukb-support__btn:focus-visible {
  outline: 2px solid var(--ukb-teal);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .ukb-support__btn {
    transition:
      box-shadow 0.2s ease,
      filter 0.2s ease;
  }

  .ukb-support__btn:hover,
  .ukb-support__btn:active {
    transform: none;
  }
}

/* ——— Main ——— */
.ukb-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Gray shows through topbar's bottom-right radius cutout */
  background: var(--ukb-bg);
  border-radius: 0 25px 25px 0;
  overflow: hidden;
}

.ukb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--ukb-topbar-bg);
  border-radius: 0 18px 18px 0;
  border: 0;
  box-shadow: var(--ukb-topbar-shadow);
  padding: 0 30px;
  height: var(--ukb-header-h);
  min-height: var(--ukb-header-h);
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;
  position: relative;
  z-index: 1040;
  overflow: visible;
  isolation: isolate;
}

.ukb-topbar__left {
  display: flex;
  align-items: center;
  gap: 25px;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.ukb-topbar__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
}

.ukb-date-pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--ukb-border);
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ukb-date-text);
  white-space: nowrap;
}

.ukb-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
  max-width: 100%;
  font-family: Poppins, sans-serif;
  font-weight: 600;
  font-size: 24px;
}

.ukb-page-title__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ukb-page-title__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}

/* White nav icons → brand teal on light topbar (no background) */
.ukb-page-title__icon--teal {
  filter: brightness(0) saturate(100%) invert(44%) sepia(79%) saturate(557%)
    hue-rotate(145deg) brightness(94%) contrast(92%);
}

.ukb-page-title i {
  color: var(--ukb-teal);
  -webkit-text-fill-color: var(--ukb-teal);
}

.ukb-search {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--ukb-search-bg);
  border-radius: 50px;
  padding: 0 16px;
  height: var(--ukb-topbar-control-h);
  min-width: 140px;
  flex: 1 1 280px;
  max-width: 320px;
  box-sizing: border-box;
}

.ukb-search > svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ukb-search input {
  border: 0;
  background: transparent;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: var(--ukb-text);
}

.ukb-search input::placeholder {
  color: var(--ukb-muted);
}

.ukb-search__kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ukb-muted);
  font-size: 12px;
}

.ukb-search__kbd[data-ukb-topbar-orders-search-kbd] {
  cursor: pointer;
  user-select: none;
}

.ukb-search__kbd span {
  background: var(--ukb-kbd-bg);
  border-radius: 4px;
  padding: 2px 4px;
  min-width: 20px;
  text-align: center;
}

.ukb-search__kbd-mod {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.ukb-search__kbd-mod-icon {
  display: none;
  width: 16px;
  height: 16px;
}

.ukb-search__kbd-mod--meta .ukb-search__kbd-mod-icon {
  display: none;
}

.ukb-search__kbd-mod--ctrl .ukb-search__kbd-mod-text {
  display: none;
}

.ukb-search__kbd-mod--ctrl .ukb-search__kbd-mod-icon {
  display: block;
}

.ukb-wallet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ukb-topbar-control-h);
  padding: var(--ukb-topbar-control-pad);
  border: 1.2px solid var(--ukb-chip-border);
  border-radius: 50px;
  background: var(--ukb-chip-bg);
  text-decoration: none;
  color: var(--ukb-text);
  box-sizing: border-box;
  flex-shrink: 0;
  font: inherit;
  cursor: pointer;
}

.ukb-wallet:focus {
  outline: none;
}

.ukb-wallet:focus-visible {
  outline: 2px solid var(--ukb-teal-soft);
  outline-offset: 2px;
}

.ukb-wallet__icon {
  width: var(--ukb-topbar-control-inner);
  height: var(--ukb-topbar-control-inner);
  border-radius: 50%;
  background: var(--ukb-grad);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.ukb-wallet__icon-img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}

.ukb-wallet__amount {
  font-size: 16px;
  font-weight: 500;
  margin-right: 2px;
  white-space: nowrap;
}

.ukb-theme-toggle {
  --ukb-theme-toggle-w: 62px;
  --ukb-theme-toggle-h: 36px;
  --ukb-theme-toggle-pad: 3px;
  --ukb-theme-toggle-thumb: 28px;
  --ukb-theme-toggle-icon: 15px;
  --ukb-theme-toggle-travel: calc(
    var(--ukb-theme-toggle-w) - var(--ukb-theme-toggle-thumb) -
      (var(--ukb-theme-toggle-pad) * 2) - 2px
  );
  --ukb-theme-toggle-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ukb-theme-toggle-dur: 320ms;
  position: relative;
  width: var(--ukb-theme-toggle-w);
  min-width: var(--ukb-theme-toggle-w);
  max-width: var(--ukb-theme-toggle-w);
  height: var(--ukb-theme-toggle-h);
  min-height: var(--ukb-theme-toggle-h);
  max-height: var(--ukb-theme-toggle-h);
  padding: 0;
  border: 1px solid rgba(24, 24, 24, 0.08);
  border-radius: 999px;
  background: var(--ukb-chip-bg, var(--ukb-notify-bg));
  color: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ukb-theme-toggle-w);
  flex-shrink: 0;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  contain: layout style;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    background var(--ukb-theme-toggle-dur) var(--ukb-theme-toggle-ease),
    border-color var(--ukb-theme-toggle-dur) var(--ukb-theme-toggle-ease),
    box-shadow var(--ukb-theme-toggle-dur) var(--ukb-theme-toggle-ease);
}

.ukb-theme-toggle:hover {
  border-color: rgba(24, 24, 24, 0.14);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.04),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

.ukb-theme-toggle:active .ukb-theme-toggle__thumb {
  filter: brightness(0.97);
}

.ukb-theme-toggle:focus {
  outline: none;
}

.ukb-theme-toggle:focus-visible {
  outline: 2px solid var(--ukb-teal, #21bacb);
  outline-offset: 2px;
}

.ukb-theme-toggle__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  contain: layout style;
}

.ukb-theme-toggle__icon {
  position: absolute;
  top: calc((var(--ukb-theme-toggle-h) - var(--ukb-theme-toggle-icon)) / 2);
  z-index: 3;
  width: var(--ukb-theme-toggle-icon);
  height: var(--ukb-theme-toggle-icon);
  margin: 0;
  padding: 0;
  transform: none;
  opacity: 0.5;
  color: currentColor;
  pointer-events: none;
  transition: none;
  backface-visibility: hidden;
}

.ukb-theme-toggle__icon--sun {
  left: 9px;
}

.ukb-theme-toggle__icon--moon {
  right: 9px;
}

.ukb-theme-toggle__thumb {
  position: absolute;
  top: var(--ukb-theme-toggle-pad);
  left: var(--ukb-theme-toggle-pad);
  width: var(--ukb-theme-toggle-thumb);
  height: var(--ukb-theme-toggle-thumb);
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 1px 3px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  transform: translateX(0);
  transition:
    transform var(--ukb-theme-toggle-dur) var(--ukb-theme-toggle-ease),
    background var(--ukb-theme-toggle-dur) var(--ukb-theme-toggle-ease),
    box-shadow var(--ukb-theme-toggle-dur) var(--ukb-theme-toggle-ease),
    filter 120ms var(--ukb-theme-toggle-ease);
  z-index: 1;
}

html[data-ukb-theme="dark"] .ukb-theme-toggle__thumb,
html[data-theme="dark"] .ukb-theme-toggle__thumb {
  transform: translateX(var(--ukb-theme-toggle-travel));
  background: #232529;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .ukb-theme-toggle,
  .ukb-theme-toggle__icon,
  .ukb-theme-toggle__thumb {
    transition: none;
  }

  .ukb-theme-toggle:active .ukb-theme-toggle__thumb {
    filter: none;
  }
}

@media (max-width: 768px) {
  .ukb-theme-toggle {
    --ukb-theme-toggle-w: 56px;
    --ukb-theme-toggle-h: 32px;
    --ukb-theme-toggle-thumb: 26px;
    flex-basis: var(--ukb-theme-toggle-w);
    min-width: var(--ukb-theme-toggle-w);
    max-width: var(--ukb-theme-toggle-w);
    min-height: var(--ukb-theme-toggle-h);
    max-height: var(--ukb-theme-toggle-h);
  }

  .ukb-theme-toggle {
    --ukb-theme-toggle-icon: 14px;
  }
}

.ukb-notify {
  position: relative;
  width: var(--ukb-topbar-control-h);
  height: var(--ukb-topbar-control-h);
  border-radius: 50%;
  background: var(--ukb-notify-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ukb-text-2);
  text-decoration: none;
  font-size: 20px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.ukb-notify__icon {
  width: 20px;
  height: 20px;
  display: block;
  object-fit: contain;
}

.ukb-notify__badge {
  position: absolute;
  top: -5px;
  right: -6px;
  z-index: 1;
  margin: 0;
  pointer-events: none;
}

.ukb-notify__badge[hidden] {
  display: none !important;
}

.ukb-userchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--ukb-topbar-control-h);
  padding: var(--ukb-topbar-control-pad);
  border: 1.2px solid var(--ukb-chip-border);
  border-radius: 50px;
  background: var(--ukb-chip-bg);
  text-decoration: none;
  color: var(--ukb-text);
  box-sizing: border-box;
  flex-shrink: 0;
}

.ukb-userchip__avatar {
  width: var(--ukb-topbar-control-inner);
  height: var(--ukb-topbar-control-inner);
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.ukb-chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ukb-text);
}

.ukb-user-menu {
  position: relative;
  flex-shrink: 0;
}

.ukb-user-menu .ukb-chevron {
  transition: transform 0.15s ease;
}

.ukb-user-menu.open .ukb-chevron,
.ukb-user-menu.show .ukb-chevron {
  transform: rotate(180deg);
}

.ukb-user-menu .ukb-user-menu__list {
  min-width: 200px;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--ukb-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  list-style: none;
  z-index: 1060;
}

.ukb-user-menu .ukb-user-menu__list > li + li {
  margin-top: 2px;
}

.ukb-user-menu .ukb-user-menu__list .ukb-user-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ukb-text);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

.ukb-user-menu .ukb-user-menu__list .ukb-user-menu__item:hover,
.ukb-user-menu .ukb-user-menu__list .ukb-user-menu__item:focus-visible {
  background: var(--ukb-teal-soft);
  color: var(--ukb-text);
  text-decoration: none;
}

.ukb-user-menu .ukb-user-menu__list .ukb-user-menu__item--logout {
  margin-top: 4px;
  border-top: 1px dashed var(--ukb-border);
  border-radius: 0 0 8px 8px;
  color: #d92d20;
}

.ukb-user-menu .ukb-user-menu__list .ukb-user-menu__item--logout:hover,
.ukb-user-menu .ukb-user-menu__list .ukb-user-menu__item--logout:focus-visible {
  background: rgba(217, 45, 32, 0.08);
  color: #d92d20;
}

.ukb-user-menu__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

body.rtl .ukb-user-menu .dropdown-menu-right {
  right: auto;
  left: 0;
}

.ukb-user-menu .ukb-user-menu__empty {
  display: block;
  max-width: 220px;
  padding: 10px 12px;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ukb-muted);
  text-align: center;
  white-space: normal;
}

.ukb-currency-menu .ukb-currency-item__symbol {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ukb-teal-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}

.ukb-currency-menu .ukb-user-menu__list > li.active > .ukb-currency-item,
.ukb-currency-menu .ukb-user-menu__list > li.active > .ukb-currency-item:hover,
.ukb-currency-menu .ukb-user-menu__list > li.active > .ukb-currency-item:focus {
  background: var(--ukb-teal-soft);
  color: var(--ukb-text);
}

.ukb-currency-menu .ukb-user-menu__list > li.active .ukb-currency-item__symbol {
  background: var(--ukb-grad);
  color: #fff;
}

.ukb-currency-menu > .ukb-user-menu__list {
  max-height: min(320px, calc(100vh - 120px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 transparent;
}

.ukb-currency-menu > .ukb-user-menu__list::-webkit-scrollbar {
  width: 6px;
}

.ukb-currency-menu > .ukb-user-menu__list::-webkit-scrollbar-track {
  background: transparent;
}

.ukb-currency-menu > .ukb-user-menu__list::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

.ukb-chevron path {
  stroke: currentColor;
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ukb-topbar__sep {
  width: 1px;
  height: 15px;
  background: #ddd;
}

.ukb-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--ukb-grad);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  text-align: center;
}

.ukb-content-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 transparent;
  box-sizing: border-box;
}

.ukb-content-scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.ukb-content-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ukb-content-scroll::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

.ukb-content-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.ukb-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 30px 0 40px 30px;
  background: transparent;
  overflow: visible;
  min-width: 0;
  max-width: 100%;
  border-radius: 0;
  position: relative;
  z-index: 0;
}

/* ——— New order page ——— */
.ukb-hero-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  overflow: visible;
}

.ukb-welcome {
  flex: 1;
  min-width: 0;
  min-height: 205px;
  border-radius: 24px;
  padding: 30px;
  position: relative;
  overflow: visible;
  color: #fff;
  display: flex;
  align-items: center;
}

.ukb-welcome__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.ukb-welcome__copy {
  position: relative;
  z-index: 1;
  max-width: 520px;
}

.ukb-welcome__title {
  margin: 0 0 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.56px;
  line-height: 1.4;
  color: #fff;
}

.ukb-welcome__sub {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}

.ukb-welcome__user {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 500;
}

.ukb-welcome__art {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 190px;
  height: 140px;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.ukb-welcome__art--character {
  right: 24px;
  bottom: 0;
  top: auto;
  transform: none;
  width: 164px;
  height: 231px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  object-position: bottom right;
  z-index: 2;
}

@media (min-width: 1601px) {
  .ukb-welcome__art--character {
    right: 80px;
  }
}

/* Same rendered frame as New Order (fill 164×231; avoids smaller look with wide assets) */
.ukb-welcome--giveaway .ukb-welcome__art--character,
.ukb-welcome--ai-recommended .ukb-welcome__art--character {
  width: 164px;
  height: 231px;
  object-fit: cover;
  object-position: bottom right;
}

@media (max-width: 992px) {
  .ukb-welcome--giveaway .ukb-welcome__art--character,
  .ukb-welcome--ai-recommended .ukb-welcome__art--character {
    width: 130px;
    height: 200px;
  }
}

@media (max-width: 576px) {
  .ukb-welcome--giveaway .ukb-welcome__art--character,
  .ukb-welcome--ai-recommended .ukb-welcome__art--character {
    width: 120px;
    height: 168px;
  }
}

.ukb-community {
  width: 351px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 17px;
  overflow: hidden;
}

.ukb-community__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}

.ukb-community__head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: #0d0d12;
  font-family: Inter, sans-serif;
}

.ukb-community__next {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 50%;
  transition:
    transform 0.22s ease,
    filter 0.22s ease;
}

.ukb-community__next:hover {
  transform: scale(1.08);
  filter: brightness(0.96);
}

.ukb-community__next:active {
  transform: scale(0.96);
}

.ukb-community__next:focus-visible {
  outline: 2px solid #21bacb;
  outline-offset: 2px;
}

.ukb-community__next.is-animating .ukb-community__head-icon {
  transform: rotate(90deg);
}

.ukb-community__head-icon {
  display: block;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.ukb-community__deck {
  position: relative;
  width: 100%;
  height: 124px;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
}

.ukb-community__layer {
  position: absolute;
  border-radius: 16px;
  pointer-events: none;
  z-index: 1;
}

.ukb-community__layer--1 {
  top: 0;
  left: 16.05%;
  width: 83.95%;
  height: 114.6px;
  background: #f6f6f6;
}

.ukb-community__layer--2 {
  top: 11.27px;
  left: 7.97%;
  width: 87.08%;
  height: 109.9px;
  background: #ececec;
  z-index: 2;
}

.ukb-community__slides {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
}

.ukb-community__slide {
  position: absolute;
  top: 23.67px;
  left: 0;
  width: 90.11%;
  height: 100.33px;
  border-radius: 16px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  background: var(--ukb-grad);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ukb-community__slide--layout-snap {
  transition: none !important;
}

.ukb-community__slide--flip-anim {
  transition: transform 0.76s cubic-bezier(0.33, 1, 0.22, 1) !important;
}

/* Full-color cards — exact slot sizes (same as gray deck shapes) */
.ukb-community__slide.is-slot-back {
  top: 0;
  left: 16.05%;
  width: 83.95%;
  height: 114.6px;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.ukb-community__slide.is-slot-mid {
  top: 11.27px;
  left: 7.97%;
  width: 87.08%;
  height: 109.9px;
  opacity: 1;
  visibility: visible;
  z-index: 3;
}

.ukb-community__slide.is-slot-front,
.ukb-community__slide.is-slot-front.is-active {
  top: 23.67px;
  left: 0;
  width: 90.11%;
  height: 100.33px;
  opacity: 1;
  visibility: visible;
  z-index: 4;
  pointer-events: auto;
}

.ukb-community__slide-inner {
  height: 100%;
  min-height: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--ukb-grad);
}

.ukb-community__slide--facebook,
.ukb-community__slide--facebook .ukb-community__slide-inner {
  background-color: #2360b5;
  background-image: var(--ukb-community-facebook-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.ukb-community__slide--whatsapp,
.ukb-community__slide--whatsapp .ukb-community__slide-inner {
  background-color: #189840;
  background-image: var(--ukb-community-whatsapp-bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.ukb-community__slide-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 138px;
  min-width: 0;
}

.ukb-community__slide-copy h4 {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 15.78px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.32px;
  color: #fff;
  text-transform: capitalize;
}

.ukb-community__slide-copy p {
  margin: 2px 0 0;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: -0.27px;
  color: rgba(255, 255, 255, 0.5);
  font-family: Manrope, sans-serif;
}

.ukb-community__join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4.5px;
  width: 100%;
  height: 25px;
  margin-top: 16px;
  padding: 0 10px;
  border-radius: 16px;
  background: #21bacb;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.27px;
  font-family: Manrope, sans-serif;
}

.ukb-community__join img {
  display: block;
  flex-shrink: 0;
}

.ukb-community__icon {
  width: 36px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.91);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 6px;
}

.ukb-community__icon img {
  display: block;
  object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
  .ukb-community__slide {
    transition: none;
  }
}

/* Stats */
.ukb-stats {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ukb-stat {
  background: #fff;
  border-radius: 15px;
  padding: 24px;
  overflow: hidden;
  min-width: 0;
}

.ukb-stat__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.ukb-stat__label {
  margin: 0;
  color: #666d80;
  font-size: clamp(13px, 1.2vw, 16px);
  font-family: Manrope, sans-serif;
  letter-spacing: -0.48px;
  min-width: 0;
}

.ukb-stat__icon {
  width: 36px;
  height: 36px;
  border-radius: 99px;
  background: var(--ukb-teal-soft-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ukb-teal);
  font-size: 14px;
}

.ukb-stat__icon img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.ukb-stat__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.ukb-stat__value {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.56px;
  color: #000;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ukb-stat__chart {
  width: min(165px, 48%);
  max-width: 165px;
  min-width: 72px;
  height: auto;
  aspect-ratio: 165 / 30;
  flex: 0 1 auto;
  display: block;
}

/* Stat equalizer — idle breathe when paused; classic bounce when .playing */
.ukb-equalizer {
  overflow: visible;
  --ukb-eq-bar: #21bacb;
  --ukb-eq-bar-bright: #5ed4e3;
}

.ukb-equalizer__bar {
  transform-box: fill-box;
  transform-origin: bottom center;
  backface-visibility: hidden;
}

@keyframes ukb-equalizer-breathe {
  0%,
  100% {
    transform: scaleY(0.96);
  }

  50% {
    transform: scaleY(1);
  }
}

@keyframes ukb-equalizer-bounce {
  0%,
  100% {
    transform: scaleY(var(--eq-min, 0.52));
  }

  35% {
    transform: scaleY(calc((var(--eq-min, 0.52) + var(--eq-max, 1)) * 0.55));
  }

  50% {
    transform: scaleY(var(--eq-max, 1));
  }

  65% {
    transform: scaleY(calc((var(--eq-min, 0.52) + var(--eq-max, 1)) * 0.55));
  }
}

.ukb-equalizer:not(.playing) .ukb-equalizer__bar {
  animation: ukb-equalizer-breathe 4.2s cubic-bezier(0.45, 0.05, 0.55, 0.95)
    infinite;
  animation-delay: calc(var(--eq-i, 0) * 0.1s);
}

.ukb-equalizer.playing .ukb-equalizer__bar {
  animation-name: ukb-equalizer-bounce;
  animation-duration: calc(var(--eq-dur, 1.1s) + 0.25s);
  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  animation-iteration-count: infinite;
  animation-delay: var(--eq-delay, 0s);
  will-change: transform;
}

.ukb-equalizer.ukb-equalizer--js .ukb-equalizer__bar {
  animation: none !important;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ukb-equalizer .ukb-equalizer__bar {
    animation: none !important;
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Platforms */
.ukb-platforms {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
}

.ukb-platform {
  flex: none;
  min-width: 0;
  max-width: none;
  width: 100%;
  height: 64px;
  border: 1px solid var(--ukb-border);
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    transform 0.15s,
    background 0.15s;
}

.ukb-platform img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.ukb-platform:hover {
  transform: translateY(-2px);
}

.ukb-platform.is-active {
  background: var(--ukb-grad);
  border: none;
  box-shadow: none;
}

/* Order grid */
.ukb-order-grid {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.ukb-order-grid > .ukb-order-form-card,
.ukb-order-grid > .ukb-service-details {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ukb-order-grid > .ukb-order-form-card > .ukb-card-body,
.ukb-order-grid > .ukb-service-details > .ukb-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ukb-order-form-card,
.ukb-service-details {
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: var(--ukb-radius);
  overflow: hidden;
}

.ukb-order-form-card {
  flex: 1;
  min-width: 0;
  --ukb-order-select-h: 58px;
  --ukb-order-input-h: 56px;
  --ukb-order-form-gap: 24px;
  --ukb-order-field-label-gap: 10px;
}

.ukb-order-form-card .ukb-form-stack {
  gap: var(--ukb-order-form-gap);
}

.ukb-order-form-card .ukb-form-stack > .form-group {
  margin-bottom: 0;
}

.ukb-order-form-card .ukb-field label {
  margin-bottom: var(--ukb-order-field-label-gap);
}

.ukb-order-form-card .ukb-field .control-label {
  margin: 20px 0;
  color: #000000;
}

.ukb-service-details {
  width: 42%;
  max-width: 619px;
  flex-shrink: 0;
}

.ukb-card-head {
  position: relative;
  padding: 16px 32px;
  min-height: 72px;
  display: flex;
  align-items: center;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ukb-order-grid .ukb-card-head {
  min-height: 84px;
  box-sizing: border-box;
}

.ukb-tabs {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 8px;
  padding: 8px;
  background: #fff;
  border: 0.4px solid rgba(96, 96, 171, 0.5);
  border-radius: 12px;
}

.ukb-tab {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none !important;
  color: #020618 !important;
  background: #f3f3f3;
  border: 0;
}

.ukb-tab.is-active {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--ukb-teal);
  color: #fff !important;
}

.ukb-tab.is-active::before,
.ukb-brand__toggle::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -20%;
  width: 60%;
  height: 120%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 70%
  );
  transform: translateX(-100%) skewX(-15deg);
  pointer-events: none;
  animation: ukb-shine-sweep 2.4s ease-in-out infinite;
}

@keyframes ukb-shine-sweep {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }

  100% {
    transform: translateX(400%) skewX(-15deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ukb-tab.is-active::before,
  .ukb-brand__toggle::before {
    animation: none;
  }

  .ukb-dashboard-progress__bar.is-intro-animating
    .ukb-dashboard-progress__fill {
    transition: none;
  }
}

.ukb-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--ukb-teal);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
}

.ukb-card-body {
  padding: 32px;
}

.ukb-form-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ukb-field label,
.ukb-field .control-label {
  display: block;
  margin-bottom: 12px;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #080808;
}

.ukb-field .form-control,
.ukb-input-like,
.ukb-order-form-card .form-control,
.ukb-order-form-card select.form-control,
.ukb-order-form-card input.form-control {
  height: 56px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--ukb-input) !important;
  box-shadow: none !important;
  padding: 16px 18px !important;
  font-size: 16px !important;
  color: #3a3a3a !important;
  font-family: Outfit, sans-serif;
}

.ukb-order-form-card select.form-control {
  height: var(--ukb-order-select-h) !important;
}

.ukb-order-form-card input.form-control,
.ukb-order-form-card .form-control:not(select):not(textarea) {
  height: var(--ukb-order-input-h) !important;
}

.ukb-order-form-card .ukb-search-field .form-control,
.ukb-order-form-card
  .ukb-search-field
  .search-dropdown
  .select2-selection--single,
.ukb-order-form-card
  .ukb-search-field
  .search-dropdown
  input.select2-selection {
  height: var(--ukb-order-input-h) !important;
  min-height: var(--ukb-order-input-h) !important;
}

.ukb-search-field {
  position: relative;
}

.ukb-search-field .input-wrapper__prepend {
  display: none !important;
}

.ukb-search-field .form-control,
.ukb-search-field .search-dropdown .select2-selection--single,
.ukb-search-field .search-dropdown input.select2-selection {
  transition:
    padding 0.15s ease,
    background 0.15s ease;
}

.ukb-search-field:not(.is-active) .form-control,
.ukb-search-field:not(.is-active) .search-dropdown .select2-selection--single,
.ukb-search-field:not(.is-active) .search-dropdown input.select2-selection {
  padding-left: 48px !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%233a3a3a' stroke-width='2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='%233a3a3a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 18px center !important;
  background-color: var(--ukb-input) !important;
}

.ukb-search-field.is-active .form-control,
.ukb-search-field.is-active .search-dropdown .select2-selection--single,
.ukb-search-field.is-active .search-dropdown input.select2-selection {
  padding-left: 18px !important;
  background-image: none !important;
}

.ukb-search-field .search-dropdown .select2-selection__arrow,
.ukb-search-field .search-dropdown .select2-selection__clear {
  display: none !important;
}

.ukb-field--select .select2-container {
  display: block;
  width: 100% !important;
}

.ukb-category-select-row {
  display: block;
  width: 100%;
}

.ukb-category-select-row .select2-container {
  width: 100% !important;
}

.ukb-field--select.ukb-field--category-filtered {
  position: relative;
}

.ukb-field--select.ukb-field--category-filtered > .control-label,
.ukb-field--select.ukb-field--category-filtered > label {
  display: block;
  padding-right: 7.5rem;
}

.ukb-category-clear-filter {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ukb-teal);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.ukb-category-clear-filter:hover {
  color: var(--ukb-teal-dark, #007a6e);
}

.ukb-category-clear-filter:focus-visible {
  outline: 2px solid var(--ukb-teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.ukb-field--select .select2-container .select2-selection--single {
  display: flex;
  align-items: center;
}

.ukb-charge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  border-radius: 16px;
  background: var(--ukb-teal-soft);
  border: 0.5px solid var(--ukb-teal);
  font-weight: 600;
}

.ukb-charge label {
  margin: 0;
  font-size: 18px;
  color: #080808;
}

.ukb-charge input,
.ukb-charge #charge,
.ukb-order-form-card .ukb-charge input.form-control,
.ukb-order-form-card .ukb-charge #charge {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right;
  font-size: 20px !important;
  font-weight: 600;
  color: #080808 !important;
  width: auto;
  max-width: 50%;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

.ukb-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 12px;
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 1.35px 4px rgba(14, 35, 22, 0.2);
  box-shadow: none !important;
}

.ukb-submit:hover,
.ukb-submit:focus {
  color: #fff !important;
  opacity: 0.95;
}

.ukb-detail-box {
  background: var(--ukb-input);
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
  min-width: 0;
}

.ukb-detail-box__label {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 16px;
  color: #181818;
}

.ukb-detail-box__value {
  margin: 0;
  font-size: 16px;
  color: #404040;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ukb-detail-box__value img {
  flex-shrink: 0;
  vertical-align: middle;
}

.ukb-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}

.ukb-meta-card {
  background: var(--ukb-input);
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 16px 18px;
}

.ukb-meta-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 16px;
  color: #181818;
}

.ukb-meta-card__title i,
.ukb-meta-card__title img {
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ukb-meta-card__title i {
  color: var(--ukb-teal);
}

.ukb-meta-card__value {
  margin: 0;
  font-size: 16px;
  color: #404040;
}

.ukb-desc-box {
  background: var(--ukb-input);
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  padding: 14px 18px;
}

.ukb-desc-box__title {
  margin: 0 0 10px;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
}

.ukb-desc-box .panel-body,
.ukb-desc-box__body {
  padding: 0;
  border: 0;
  font-size: 16px;
  color: #3a3a3a;
  line-height: 1.5;
}

.ukb-service-details .ukb-desc-box__body > label.control-label,
.ukb-service-details .ukb-desc-box__body label[for="service_description"] {
  display: none !important;
}

.ukb-service-details .ukb-desc-box__body .panel-body,
.ukb-service-details .ukb-desc-box__body .border-solid,
.ukb-service-details .ukb-desc-box__body .border-rounded {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}

.ukb-card-head__lead {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}

.ukb-card-head__lead img {
  width: 35px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.ukb-card-head__lead-title {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.ukb-form-stack--mass {
  gap: 32px;
  flex: 1 1 auto;
  min-height: 0;
}

.ukb-form-stack--mass > .ukb-field {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.ukb-order-form-card .ukb-mass-textarea.form-control {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 320px;
  resize: vertical;
  line-height: 1.5;
  border: 0.5px solid var(--ukb-border) !important;
}

.ukb-order-grid > .ukb-service-details > .ukb-card-body > .ukb-desc-box {
  flex: 1 1 auto;
  min-height: 0;
}

/* Mass order — Figma node 468:36892 (equal columns, shared padding) */
.ukb-order-grid--mass {
  gap: 24px;
  align-items: stretch;
}

.ukb-order-grid--mass > .ukb-order-form-card,
.ukb-order-grid--mass > .ukb-service-details {
  align-self: stretch;
}

.ukb-order-grid--mass > .ukb-order-form-card > .ukb-card-body,
.ukb-order-grid--mass > .ukb-service-details > .ukb-card-body {
  padding: 32px;
  flex: 1 1 auto;
}

.ukb-order-grid--mass
  > .ukb-order-form-card
  > .ukb-card-body
  > .ukb-form-stack--mass {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

.ukb-order-grid--mass .ukb-form-stack--mass > .ukb-field .control-label,
.ukb-order-grid--mass .ukb-form-stack--mass > .ukb-field label {
  margin: 0 0 12px;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: #000000;
}

.ukb-order-grid--mass .ukb-order-form-card .ukb-mass-textarea.form-control {
  min-height: 0;
  flex: 1 1 auto;
}

.ukb-order-grid--mass .ukb-service-details > .ukb-card-body > .ukb-desc-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.ukb-order-grid--mass .ukb-service-details .ukb-desc-box__title {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.ukb-order-grid--mass .ukb-service-details .ukb-desc-box__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--ukb-input);
  border: 0;
  border-radius: 12px;
  padding: 14px 18px;
}

.ukb-order-grid--mass .ukb-service-details .ukb-desc-box__body p {
  margin: 0 0 12px;
}

.ukb-order-grid--mass .ukb-service-details .ukb-desc-box__body p:last-child,
.ukb-order-grid--mass .ukb-service-details .ukb-desc-box__body ul:last-child {
  margin-bottom: 0;
}

.ukb-desc-box__body .ukb-text-link {
  color: var(--ukb-teal);
  font-weight: 500;
  text-decoration: none;
}

.ukb-desc-box__body .ukb-text-link:hover {
  text-decoration: underline;
}

.ukb-desc-box__body ul {
  margin: 0;
  padding-left: 1.25rem;
}

.ukb-order-form-card .alert {
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 0;
  flex-shrink: 0;
}

.ukb-order-form-card .alert .ukb-alert-message {
  margin: 0;
}

.alert.alert-success a {
  color: var(--ukb-alert-success-text);
  font-weight: 600;
  text-decoration: underline;
}

.alert.alert-danger a {
  color: var(--ukb-alert-danger-text);
  font-weight: 600;
  text-decoration: underline;
}

/* BS5 dismiss — panel button resets can hide .btn-close background image */
.alert.alert-dismissible {
  position: relative;
  padding-right: 3rem;
}

.alert.alert-dismissible .btn-close {
  position: absolute;
  top: 50%;
  right: 0.85rem;
  transform: translateY(-50%);
  z-index: 2;
  display: block;
  box-sizing: content-box;
  width: 1rem;
  height: 1rem;
  padding: 0.35rem;
  margin: 0;
  border: 0 !important;
  border-radius: 0.375rem;
  box-shadow: none !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231a1a1a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1rem auto !important;
  opacity: 0.65;
  cursor: pointer;
}

.alert.alert-dismissible .btn-close:hover,
.alert.alert-dismissible .btn-close:focus {
  opacity: 1;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(0, 168, 150, 0.25) !important;
}

.rtl-alert.alert-dismissible {
  padding-right: 1rem;
  padding-left: 3rem;
}

/* Success feedback — same green treatment in light and dark (panel forms, account, etc.) */
.alert.alert-success {
  background-color: var(--ukb-alert-success-bg);
  border: 1px solid var(--ukb-alert-success-border);
  color: var(--ukb-alert-success-text);
  border-radius: 12px;
}

.alert.alert-success .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23166534'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.65;
}

.alert.alert-success .btn-close:hover,
.alert.alert-success .btn-close:focus {
  opacity: 1;
  box-shadow: 0 0 0 0.2rem rgba(22, 101, 52, 0.2) !important;
}

.alert.alert-danger {
  background-color: var(--ukb-alert-danger-bg);
  border: 1px solid var(--ukb-alert-danger-border);
  color: var(--ukb-alert-danger-text);
  border-radius: 12px;
}

.alert.alert-danger .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23991b1b'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.65;
}

.alert.alert-danger .btn-close:hover,
.alert.alert-danger .btn-close:focus {
  opacity: 1;
  box-shadow: 0 0 0 0.2rem rgba(153, 27, 27, 0.2) !important;
}

.ukb-form-stack--mass > .alert {
  flex: 0 0 auto;
}

.ukb-order-form-card .alert.alert-danger h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

.rtl-alert.alert-dismissible .btn-close {
  right: auto;
  left: 0.85rem;
}

.ukb-order-form-card .terms {
  font-weight: 400;
  font-size: 14px;
}

/* Add funds */
.ukb-addfunds-grid,
.ukb-service-request-grid {
  margin-top: 32px;
}

.ukb-form-stack--service-request {
  gap: 32px;
}

.ukb-form-stack--service-request .ukb-field .control-label {
  font-family: Geist, Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #202020;
}

.ukb-form-stack--service-request .form-control:not(.ukb-service-request-note) {
  height: 64px !important;
  border: 0.5px solid var(--ukb-border) !important;
}

.ukb-order-form-card .ukb-service-request-note.form-control {
  height: auto !important;
  min-height: 176px;
  resize: vertical;
  line-height: 1.35;
  border: 0.5px solid var(--ukb-border) !important;
}

.ukb-order-form-card > .ukb-service-request-panel.is-hidden {
  display: none;
}

.ukb-form-stack--addfunds {
  gap: 32px;
}

/* Perfect Panel injects payment instructions into #instruction_* (AJAX). Keep copy black in all themes. */
.ukb-form-stack--addfunds [id^="instruction_"],
.ukb-form-stack--addfunds [id^="instruction_"] .panel-body,
.ukb-form-stack--addfunds [id^="instruction_"] .border-solid,
.ukb-form-stack--addfunds [id^="instruction_"] .border-rounded,
.ukb-form-stack--addfunds [id^="instruction_"] p,
.ukb-form-stack--addfunds [id^="instruction_"] span,
.ukb-form-stack--addfunds [id^="instruction_"] label,
.ukb-form-stack--addfunds [id^="instruction_"] a,
.ukb-form-stack--addfunds [id^="instruction_"] li {
  color: #000000 !important;
}

.ukb-form-stack--addfunds [id^="instruction_"] .panel-body,
.ukb-form-stack--addfunds [id^="instruction_"] .border-solid.border-rounded {
  background: #ffffff !important;
}

.ukb-field--quick .ukb-field__heading,
.ukb-field--method .control-label {
  display: block;
  margin-bottom: 12px;
  font-family: Geist, Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #202020;
}

.ukb-pay-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.ukb-pay-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px;
  border: 1px solid var(--ukb-border);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  user-select: none;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.ukb-pay-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 0.5px solid var(--ukb-border);
  border-radius: 8px;
  background: #fff;
}

.ukb-pay-tile__icon img {
  display: block;
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}

.ukb-pay-tile__icon--card img {
  max-width: 28px;
  max-height: 17px;
}

/* Cryptomus dark icon well: scoped in html[data-ukb-theme="dark"] Add Funds rules only. */

.ukb-pay-tile__label {
  font-family: Geist, Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #202020;
  line-height: 1.5;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.ukb-welcome--addfunds .ukb-welcome__art--add-fund {
  width: 127px;
  height: 128px;
  object-fit: contain;
}

.ukb-video-embed {
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
}

.ukb-video-embed__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.ukb-addfunds-aside .ukb-video-embed {
  min-height: 220px;
}

@media (min-width: 1025px) {
  .ukb-addfunds-aside .ukb-video-embed {
    min-height: 260px;
  }
}

@media (max-width: 1600px) {
  .ukb-pay-tile {
    gap: 8px;
    padding: 10px;
    min-height: 56px;
  }

  .ukb-pay-tile__label {
    font-size: 13px;
    line-height: 1.25;
  }
}

.ukb-pay-tile.is-active {
  border: none;
  background: var(--ukb-button-grad);
}

.ukb-pay-tile.is-active .ukb-pay-tile__icon {
  border: none;
}

.ukb-pay-tile.is-active .ukb-pay-tile__label {
  color: #fff;
}

.ukb-quick-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ukb-quick-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  user-select: none;
  flex: 1 1 0;
  min-width: 52px;
  height: 36px;
  padding: 0 8px;
  border: 0.5px solid var(--ukb-border);
  border-radius: 12px;
  background: #f3f3f3;
  font-family: "Bricolage Grotesque", Outfit, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ukb-teal);
  cursor: pointer;
}

.ukb-quick-amount:hover,
.ukb-quick-amount:focus-visible,
.ukb-quick-amount.is-active {
  background: rgba(33, 186, 203, 0.12);
}

.ukb-method-select {
  position: relative;
  display: flex;
  align-items: center;
}

.ukb-method-select__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

.ukb-method-select .form-control {
  padding-left: 48px !important;
  padding-right: 40px !important;
  appearance: none;
  -webkit-appearance: none;
}

.ukb-method-select__caret {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #2b2b22;
  border-bottom: 2px solid #2b2b22;
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.ukb-method-select .select2-container {
  display: block;
  width: 100% !important;
}

.ukb-method-select.is-select2 .ukb-method-select__caret {
  display: none;
}

.ukb-order-form-card
  .ukb-method-select
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  padding-left: 48px !important;
}

.ukb-method-option {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ukb-method-option__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}
.ukb-addfunds-total__value {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #080808;
}

.ukb-order-form-card > .ukb-addfunds-panel {
  display: none;
}

.ukb-order-form-card > .ukb-addfunds-panel.is-active {
  display: block;
}

.ukb-order-form-card > .ukb-addfunds-panel.is-hidden {
  display: none !important;
}

.ukb-order-form-card > .ukb-addfunds-panel--history.is-active {
  display: flex;
  flex-direction: column;
}

.ukb-tabs button.ukb-tab {
  cursor: pointer;
  font: inherit;
}

@media (max-width: 1250px) {
  .ukb-tabs.ukb-tabs--aside button.ukb-tab {
    padding: 5px 7px;
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
  }
}

.ukb-instruction-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ukb-instruction-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.35;
  color: #2b2b22;
}

.ukb-instruction-list__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: block;
  object-fit: contain;
}

.ukb-addfunds-page-content {
  margin-top: 16px;
}

.ukb-addfunds-aside-panel.is-active {
  display: block;
}

.ukb-addfunds-aside-panel:not(.is-active) {
  display: none;
}

.ukb-addfunds-panel--history {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ukb-addfunds-history {
  width: 100%;
}

.ukb-addfunds-history__table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.ukb-addfunds-history__head,
.ukb-addfunds-history__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(
      0,
      1fr
    );
  gap: 20px;
  align-items: center;
  padding: 12px;
}

.ukb-addfunds-history__head {
  background: var(--ukb-button-grad);
  border-radius: 8px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}

.ukb-addfunds-history__col-center {
  text-align: center;
}

.ukb-addfunds-history__row {
  padding: 15px 12px;
  border-bottom: 0.5px solid rgba(43, 43, 43, 0.2);
  font-family: Geist, Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #323232;
}

.ukb-addfunds-history:not(.is-expanded) .ukb-addfunds-history__row--more {
  display: none;
}

.ukb-addfunds-history__date {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ukb-addfunds-history__date span {
  display: block;
}

.ukb-addfunds-history__invoice {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

.ukb-addfunds-history__empty {
  margin: 16px 0 0;
  padding: 12px;
  text-align: center;
  color: #323232;
  font-size: 14px;
}

.ukb-addfunds-history__more {
  margin-top: 24px;
  height: 56px;
  min-height: 56px;
  flex-shrink: 0;
  text-decoration: none !important;
}

.ukb-addfunds-history--request {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ukb-service-request-history.ukb-addfunds-history--request {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-x: visible;
  overflow-y: visible;
  width: 100%;
}

.ukb-service-request-history__table-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ukb-addfunds-history--request .ukb-addfunds-history__table {
  min-width: 720px;
}

.ukb-service-request-history__table-scroll .ukb-addfunds-history__table {
  min-width: 720px;
}

.ukb-addfunds-history--request .ukb-addfunds-history__head,
.ukb-addfunds-history--request .ukb-addfunds-history__row {
  grid-template-columns:
    minmax(44px, 0.5fr)
    minmax(72px, 0.85fr)
    minmax(96px, 1.3fr)
    minmax(72px, 0.9fr)
    minmax(108px, 1.35fr)
    minmax(84px, 0.95fr);
  align-items: start;
}

.ukb-addfunds-history--request .ukb-addfunds-history__head > *,
.ukb-addfunds-history--request .ukb-addfunds-history__row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ukb-service-request-history .ukb-addfunds-history__head > :first-child {
  max-width: 56px;
}

.ukb-service-request-history .ukb-addfunds-history__head > * {
  white-space: nowrap;
}

.ukb-service-request-history
  .ukb-addfunds-history__row
  > .ukb-addfunds-history__cell {
  overflow: hidden;
  text-overflow: unset;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  word-break: break-word;
  line-height: 1.35;
}

.ukb-service-request-history .ukb-addfunds-history__cell--id {
  max-width: 56px;
}

.ukb-addfunds-history__row--alt {
  background: #f8fafc;
}

.ukb-service-request-panel--history {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ukb-service-request-history .ukb-addfunds-history__table {
  border-radius: 8px;
  overflow: hidden;
}

.ukb-service-request-history .ukb-addfunds-history__head {
  border-radius: 8px 8px 0 0;
  padding: 14px 16px;
  font-weight: 700;
}

.ukb-service-request-history .ukb-addfunds-history__head > *,
.ukb-service-request-history .ukb-addfunds-history__row > * {
  text-align: left;
}

.ukb-service-request-history .ukb-addfunds-history__row {
  padding: 14px 16px;
}

.ukb-service-request-history .ukb-addfunds-history__more {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 56px;
  min-height: 56px;
  flex-shrink: 0;
}

.ukb-service-request-history .ukb-addfunds-history__more[hidden] {
  display: none !important;
}

.ukb-addfunds-pagination {
  margin-top: 24px;
}

.ukb-addfunds-pagination--sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1200px) {
  .ukb-pay-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ukb-pay-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    justify-items: center;
  }

  .ukb-pay-tile {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 64px;
    padding: 6px;
    min-height: 0;
    gap: 0;
    aspect-ratio: 1;
  }

  .ukb-pay-tile__icon {
    width: 32px;
    height: 32px;
  }

  .ukb-pay-tile__icon img {
    max-width: 20px;
    max-height: 20px;
  }

  .ukb-pay-tile__icon--card img {
    max-width: 22px;
    max-height: 14px;
  }

  .ukb-pay-tile__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ukb-quick-amount {
    flex: 1 1 calc(25% - 8px);
  }
}

/* Services page */
.ukb-services-panel {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: 20px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  max-width: 100%;
}

.ukb-services-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 0;
  width: 100%;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: 24px;
  box-sizing: border-box;
}

.ukb-services-toolbar__filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.ukb-svc-filter__btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 4px 16px 4px 4px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500;
  box-shadow: none !important;
}

.ukb-svc-filter__btn.dropdown-toggle::after {
  display: none !important;
}

.ukb-svc-filter__caret {
  display: block;
  flex-shrink: 0;
  width: 13px;
  height: 8px;
}

.ukb-svc-filter__btn > img:first-of-type {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.ukb-svc-filter {
  position: relative;
}

.ukb-svc-filter:not(.open):not(.show) > .dropdown-menu {
  display: none !important;
  pointer-events: none !important;
}

.ukb-svc-filter .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1050;
  float: none;
  width: 340px;
  min-width: 340px;
  max-width: 340px;
  height: 400px;
  max-height: 400px;
  margin: 8px 0 0;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid var(--ukb-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--ukb-shadow);
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 transparent;
}

.ukb-svc-filter .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.ukb-svc-filter .dropdown-menu::-webkit-scrollbar-track {
  background: transparent;
}

.ukb-svc-filter .dropdown-menu::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

.ukb-svc-filter .dropdown-menu > li {
  margin: 0;
}

.ukb-svc-filter .dropdown-menu .dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ukb-text);
  text-decoration: none;
  box-sizing: border-box;
}

.ukb-svc-filter .dropdown-menu .dropdown-item:hover,
.ukb-svc-filter .dropdown-menu .dropdown-item:focus {
  background: rgba(0, 168, 150, 0.1);
  color: var(--ukb-text);
}

.ukb-svc-filter .dropdown-menu .dropdown-item:active {
  background: rgba(0, 168, 150, 0.16);
  color: var(--ukb-text);
}

.ukb-svc-filter .dropdown-menu .dropdown-item img,
.ukb-svc-filter .dropdown-menu .dropdown-item .fas,
.ukb-svc-filter .dropdown-menu .dropdown-item .far {
  flex-shrink: 0;
  margin-top: 2px;
}

.ukb-svc-filter .dropdown-menu .dropdown-item > span:last-child,
.ukb-svc-filter .dropdown-menu .dropdown-item > span:not(:first-child) {
  flex: 1;
  min-width: 0;
}

.ukb-svc-filter__btn [data-filter-active-category] {
  flex: 1;
  min-width: 0;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.ukb-services-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 297px;
  width: 297px;
  max-width: 100%;
  min-width: 200px;
  height: 48px;
  padding: 0 20px 0 44px;
  border: 1px solid var(--ukb-border);
  border-radius: 12px;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.ukb-services-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.ukb-services-search .form-control {
  height: 100% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px !important;
}

.ukb-services-search__btn {
  display: none;
}

.ukb-platforms.ukb-platforms--services {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 0;
  overflow-x: visible;
  width: 100%;
}

.ukb-platforms--services .ukb-platform {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ukb-platforms--services .ukb-platform:hover {
  transform: none;
  background: rgba(0, 168, 150, 0.1);
  border-color: rgba(0, 168, 150, 0.35);
  box-shadow: 0 2px 8px rgba(0, 168, 150, 0.12);
}

.ukb-platforms--services .ukb-platform.is-active:hover {
  transform: none;
  filter: none;
  background: var(--ukb-grad);
  border: none;
  box-shadow: none;
}

.ukb-services-empty {
  margin: 0;
  padding: 32px 28px;
  text-align: center;
  color: #404040;
  font-family: Outfit, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

.ukb-services-panel.is-search-empty .ukb-services-table-wrap {
  display: none;
}

.ukb-services-panel.is-search-empty .ukb-services-empty {
  margin-top: -16px;
  padding: 0 28px 8px;
}

.ukb-services-empty__message {
  margin: 0;
}

.ukb-services-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 transparent;
}

.ukb-services-table-wrap::-webkit-scrollbar {
  height: 6px;
}

.ukb-services-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.ukb-services-table-wrap::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

.ukb-services-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.ukb-services-table {
  width: max-content;
  min-width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

#service-table.ukb-services-table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  table-layout: auto !important;
}

.ukb-svc-spacer__cell {
  height: 20px;
  padding: 0 !important;
  border: 0 !important;
  line-height: 0;
  font-size: 0;
  background: transparent !important;
}

.ukb-services-table tbody tr.ukb-svc-row td {
  display: table-cell !important;
  box-sizing: border-box;
  border: 0;
  border-bottom: 0.5px solid #dfe0e4;
  padding: 15px 28px;
  vertical-align: middle !important;
  font-size: 16px;
  line-height: 1.5;
  color: #3c3c3c;
  background: #fff;
  height: auto;
}

.ukb-svc-group.is-open tr.ukb-svc-row td:first-child {
  border-left: 1px solid #dfe0e4;
}

.ukb-svc-group.is-open tr.ukb-svc-row td:last-child {
  border-right: 1px solid #dfe0e4;
}

.ukb-svc-group.is-open tr.ukb-svc-row:last-child td {
  border-bottom: 1px solid #dfe0e4;
}

.ukb-svc-group.is-open tr.ukb-svc-row:last-child td:first-child {
  border-bottom-left-radius: 12px;
}

.ukb-svc-group.is-open tr.ukb-svc-row:last-child td:last-child {
  border-bottom-right-radius: 12px;
}

tbody.ukb-svc-group.ukb-svc-group--platform-hidden,
tbody.ukb-svc-group.ukb-svc-group--category-hidden,
tbody.ukb-svc-spacer.ukb-svc-spacer--hidden {
  display: none !important;
}

.ukb-services-table tbody tr.ukb-svc-row.ukb-svc-row--category-hidden {
  display: none !important;
}

#service-table.ukb-services-table > tbody.ukb-svc-group > tr.ukb-svc-cat-row {
  display: table-row !important;
}

#service-table.ukb-services-table
  > tbody.ukb-svc-group.is-open
  > tr.ukb-svc-columns-head,
#service-table.ukb-services-table
  > tbody.ukb-svc-group.is-open
  > tr.ukb-svc-row:not(.ukb-svc-row--category-hidden) {
  display: table-row !important;
}

.ukb-services-table tbody tr.ukb-svc-cat-row td {
  border: 0 !important;
  padding: 0;
  background: transparent;
}

.ukb-svc-group.is-open .ukb-svc-cat-row td {
  border: 1px solid #dfe0e4 !important;
  border-bottom: 0 !important;
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

.ukb-svc-group.is-collapsed .ukb-svc-cat-row td {
  border: 1px solid #dfe0e4 !important;
  border-radius: 12px;
  overflow: hidden;
}

.ukb-svc-group.is-collapsed .ukb-svc-columns-head,
.ukb-svc-group.is-collapsed .ukb-svc-row {
  display: none !important;
}

.ukb-svc-columns-head th,
.ukb-svc-columns-head td {
  border: 0 !important;
  border-bottom: 0.5px solid #dfe0e4 !important;
  padding: 10px 28px !important;
  height: 42px;
  vertical-align: middle !important;
  background: #fff !important;
  font-weight: 400 !important;
  text-align: left;
}

.ukb-svc-group.is-open .ukb-svc-columns-head th:first-child,
.ukb-svc-group.is-open .ukb-svc-columns-head td:first-child {
  border-left: 1px solid #dfe0e4 !important;
}

.ukb-svc-group.is-open .ukb-svc-columns-head th:last-child,
.ukb-svc-group.is-open .ukb-svc-columns-head td:last-child {
  border-right: 1px solid #dfe0e4 !important;
}

.ukb-svc-col-head {
  white-space: nowrap;
}

.ukb-svc-col-head__label {
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  color: #0d6872;
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ukb-svc-col-head__label {
    color: var(--ukb-teal);
    background: none;
    -webkit-text-fill-color: currentColor;
  }
}

.ukb-svc-col-head--action {
  text-align: center !important;
}

.ukb-svc-col-head--action .ukb-svc-col-head__label {
  text-align: center;
}

.ukb-svc-col-head--id {
  text-align: left !important;
}

.ukb-svc-col-head--id .ukb-svc-col-head__label {
  display: block;
  width: 100%;
  text-align: left !important;
  margin: 0;
}

#service-table.ukb-services-table
  > tbody
  > tr.ukb-svc-columns-head
  > th.ukb-svc-col-head--id {
  text-align: left !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 6px !important;
  padding-right: 0px !important;
}

#service-table.ukb-services-table
  > tbody
  > tr.ukb-svc-columns-head
  > th.ukb-svc-col-head--id
  .ukb-svc-col-head__label {
  display: inline-block;
  width: auto;
  text-align: left !important;
  margin: 0;
}

#service-table.ukb-services-table > tbody > tr.ukb-svc-row > td.ukb-svc-id {
  text-align: left !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  padding-left: 6px !important;
  padding-right: 4px !important;
}

#service-table.ukb-services-table
  > tbody
  > tr.ukb-svc-columns-head
  > th.ukb-svc-th-fav {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  padding-left: 20px !important;
  padding-right: 4px !important;
}

#service-table.ukb-services-table > tbody > tr.ukb-svc-row > td.ukb-svc-fav {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  padding-left: 20px !important;
  padding-right: 4px !important;
}

/* Override Perfect Panel default #service-table row/cell chrome */
#service-table.ukb-services-table > tbody > tr.ukb-svc-columns-head > th,
#service-table.ukb-services-table > tbody > tr.ukb-svc-row > td {
  background-color: #fff !important;
  color: #3c3c3c !important;
  box-shadow: none !important;
}

#service-table.ukb-services-table > tbody > tr.ukb-svc-row > td.service-name,
#service-table.ukb-services-table > tbody > tr.ukb-svc-row > td.ukb-svc-name {
  display: table-cell !important;
}

#service-table.ukb-services-table .width-service-name {
  width: auto !important;
  min-width: 260px !important;
  max-width: 360px !important;
}

#service-table.ukb-services-table > tbody > tr:nth-child(odd) > td,
#service-table.ukb-services-table > tbody > tr:nth-child(even) > td,
#service-table.ukb-services-table > tbody > tr:nth-child(odd) > th,
#service-table.ukb-services-table > tbody > tr:nth-child(even) > th {
  background-color: #fff !important;
}

#service-table.ukb-services-table > tbody > tr > td + td,
#service-table.ukb-services-table > tbody > tr > th + th {
  border-left: 0 !important;
}

.ukb-svc-cat-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 72px;
  padding: 20px;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  background: var(--ukb-grad);
  color: #fff;
  box-sizing: border-box;
}

.ukb-svc-group.is-collapsed .ukb-svc-cat-toggle {
  background: #fff;
  color: #404040;
}

.ukb-svc-cat-toggle__main {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.ukb-svc-cat-toggle__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ukb-svc-cat-toggle__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.ukb-svc-cat-toggle__title {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.ukb-svc-cat-toggle__chev {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background: #fff;
  transition: transform 0.25s ease;
}

.ukb-svc-cat-toggle__chev img {
  width: 22px;
  height: 22px;
}

.ukb-svc-group.is-open .ukb-svc-cat-toggle__chev img {
  transform: rotate(0deg);
  filter: none;
}

.ukb-svc-group.is-collapsed .ukb-svc-cat-toggle__chev img {
  transform: rotate(180deg);
  filter: brightness(0);
}

.ukb-svc-col-head--id,
.ukb-svc-id {
  min-width: 72px;
  white-space: nowrap;
}

.ukb-svc-id {
  font-size: 18px;
  font-family: Inter, sans-serif;
}

.ukb-svc-fav,
.ukb-svc-th-fav {
  min-width: 36px;
  width: 36px;
  max-width: 36px;
  text-align: right !important;
  padding-left: 20px !important;
  padding-right: 8px !important;
}

.ukb-svc-fav > span[role="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  padding-right: 8px !important;
  line-height: 1;
  cursor: pointer;
}

.ukb-svc-fav [data-favorite-icon] {
  font-size: 18px;
  line-height: 1;
  color: var(--ukb-muted);
  transition:
    color 0.15s ease,
    transform 0.15s ease;
}

.ukb-svc-fav > span[role="button"]:hover [data-favorite-icon].far {
  color: var(--ukb-teal);
}

.ukb-svc-fav > span[role="button"].favorite-active [data-favorite-icon],
.ukb-svc-fav [data-favorite-icon].fas.fa-star {
  background: var(--ukb-button-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ukb-svc-col-head--name,
.ukb-svc-name {
  min-width: 260px;
  max-width: 420px;
}

.ukb-svc-name {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
}

.ukb-svc-rate,
.ukb-svc-minmax,
.ukb-svc-refill,
.ukb-svc-avg {
  min-width: 110px;
  white-space: nowrap;
}

.ukb-svc-minmax {
  font-size: 16px;
  line-height: 1.5;
  white-space: nowrap;
}

.ukb-svc-avg {
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

.ukb-svc-avg__line {
  display: block;
  white-space: nowrap;
}

.ukb-svc-col-head--action,
.ukb-svc-actions {
  min-width: 248px;
  text-align: right;
  white-space: nowrap;
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.ukb-svc-rate__inner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.ukb-svc-rate__order {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  line-height: 0;
  text-decoration: none;
  transition:
    background 0.15s ease,
    opacity 0.15s ease;
}

.ukb-svc-rate__order img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.ukb-svc-rate__order:hover {
  background: rgba(0, 168, 150, 0.12);
}

.ukb-svc-rate__order:focus-visible {
  outline: 2px solid var(--ukb-teal);
  outline-offset: 2px;
}

.ukb-svc-refill-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 20px;
  border: 1px solid #21bacb;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ukb-teal);
  background: rgba(255, 255, 255, 0.04);
  white-space: nowrap;
}

.ukb-svc-refill-pill--empty {
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #3c3c3c;
  font-size: 16px;
  line-height: 1.5;
}

.ukb-svc-actions__inner {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  max-width: 100%;
  vertical-align: middle;
  box-sizing: border-box;
}

#service-table.ukb-services-table
  > tbody
  > tr.ukb-svc-row
  > td.ukb-svc-actions {
  display: table-cell !important;
}

.ukb-svc-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  min-width: 100px;
  max-width: 100px;
  height: 40px;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5;
  box-shadow: none !important;
}

.ukb-svc-btn--outline {
  border: 1px solid var(--ukb-teal) !important;
  background: #fff !important;
  color: var(--ukb-teal) !important;
}

.ukb-svc-btn--fill {
  border: 0 !important;
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  min-width: 112px;
  max-width: none;
  flex: 0 1 auto;
}

.ukb-services-footnote {
  margin-top: 24px;
  padding: 24px 32px;
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: 16px;
}

/* Services page — custom service detail modal (not Perfect Panel bootstrap modal) */
body:has(#service-table) .service-description-modal {
  display: none !important;
}

.ukb-svc-detail-modal-host {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.ukb-svc-detail-modal-host[hidden] {
  display: none !important;
}

.ukb-svc-detail-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 24, 0.45);
}

/* Panel payment modal (e.g. Binance QR) uses Bootstrap 3 `.in` and often has no visible backdrop. */
#binance-qr-modal.modal.in,
#binance-qr-modal.modal.show,
.modal.binance-modal.in,
.modal.binance-modal.show {
  background-color: rgba(0, 0, 0, 0.6) !important;
  z-index: 1060 !important;
}

body.modal-open .modal-backdrop,
body.modal-open .modal-backdrop.fade,
body.modal-open .modal-backdrop.fade.in,
body.modal-open .modal-backdrop.show {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1055 !important;
  background-color: #000 !important;
  opacity: 0.6 !important;
}

.ukb-svc-detail-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 2rem);
}

.ukb-svc-detail-modal-host .ukb-svc-detail-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 2rem);
  border-radius: 16px;
  overflow: hidden;
  background: var(--ukb-card);
  box-shadow: var(--ukb-shadow);
}

body.ukb-svc-detail-modal-open {
  overflow: hidden;
}

.ukb-svc-detail-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--ukb-grad);
  color: #fff;
}

.ukb-svc-detail-modal__title {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.ukb-svc-detail-modal__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 3;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}

.ukb-svc-detail-modal__dismiss span {
  pointer-events: none;
}

.ukb-svc-detail-modal__dismiss:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.55);
}

.ukb-svc-detail-modal__body {
  padding: 24px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.ukb-svc-detail-modal__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ukb-svc-detail-modal__stat {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--ukb-border);
  border-radius: 12px;
  background: var(--ukb-card);
}

.ukb-svc-detail-modal__stat-label,
.ukb-svc-detail-modal__desc-label {
  margin: 0 0 8px;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ukb-muted);
}

.ukb-svc-detail-modal__stat-value {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ukb-text);
  word-break: break-word;
}

.ukb-svc-detail-modal__desc {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  border: 1px solid var(--ukb-border);
  border-radius: 12px;
  background: var(--ukb-card);
}

.ukb-svc-detail-modal__desc-label {
  flex: 0 0 auto;
}

.ukb-svc-detail-modal__desc-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(280px, 40vh);
  margin-top: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ukb-text-2);
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--ukb-teal) var(--ukb-input);
}

.ukb-svc-detail-modal__desc-body::-webkit-scrollbar {
  width: 6px;
}

.ukb-svc-detail-modal__desc-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--ukb-teal);
}

.ukb-svc-detail-modal__desc-body::-webkit-scrollbar-track {
  border-radius: 999px;
  background: var(--ukb-input);
}

.ukb-svc-detail-modal__desc-body p {
  margin: 0 0 12px;
}

.ukb-svc-detail-modal__desc-body p:last-child {
  margin-bottom: 0;
}

.ukb-svc-detail-modal__empty {
  margin: 0;
  color: var(--ukb-muted);
}

.ukb-svc-detail-modal__desc-body ul,
.ukb-svc-detail-modal__desc-body ol {
  margin: 0 0 12px;
  padding-left: 1.25rem;
}

.ukb-svc-detail-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 24px 24px;
}

.ukb-svc-detail-modal__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  height: 44px;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-family: Outfit, sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4;
  text-decoration: none !important;
  box-shadow: none !important;
}

.ukb-svc-detail-modal__btn--close {
  border: 0 !important;
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
}

.ukb-svc-detail-modal__btn--close:hover {
  color: #fff !important;
  filter: brightness(1.05);
}

.ukb-svc-detail-modal__btn--order {
  border: 1px solid var(--ukb-teal) !important;
  background: var(--ukb-teal-soft) !important;
  color: var(--ukb-teal-dark) !important;
}

.ukb-svc-detail-modal__btn--order:hover {
  background: var(--ukb-teal-soft-2) !important;
  color: var(--ukb-teal-dark) !important;
}

@media (max-width: 576px) {
  .ukb-svc-detail-modal__body {
    padding: 16px;
  }

  .ukb-svc-detail-modal__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
  }

  .ukb-svc-detail-modal__stat {
    padding: 12px 10px;
  }

  .ukb-svc-detail-modal__stat-label {
    margin-bottom: 6px;
    font-size: 12px;
    line-height: 1.35;
  }

  .ukb-svc-detail-modal__stat-value {
    font-size: 15px;
    line-height: 1.35;
  }

  .ukb-svc-detail-modal__foot {
    flex-wrap: nowrap;
    padding: 0 16px 16px;
  }

  .ukb-svc-detail-modal__btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* Large screens: keep the action buttons inside the panel. */
@media (min-width: 993px) {
  .ukb-services-table-wrap {
    overflow-x: hidden;
  }

  .ukb-services-table,
  #service-table.ukb-services-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .ukb-svc-table-cols-6 col.ukb-svc-col--id { width: 7%; }
  .ukb-svc-table-cols-6 col.ukb-svc-col--name { width: 36%; }
  .ukb-svc-table-cols-6 col.ukb-svc-col--rate { width: 14%; }
  .ukb-svc-table-cols-6 col.ukb-svc-col--minmax { width: 13%; }
  .ukb-svc-table-cols-6 col.ukb-svc-col--refill { width: 10%; }
  .ukb-svc-table-cols-6 col.ukb-svc-col--action { width: 20%; }

  .ukb-svc-table-cols-7:not(:has(col.ukb-svc-col--avg)) col.ukb-svc-col--fav { width: 4%; }
  .ukb-svc-table-cols-7:not(:has(col.ukb-svc-col--avg)) col.ukb-svc-col--id { width: 6%; }
  .ukb-svc-table-cols-7:not(:has(col.ukb-svc-col--avg)) col.ukb-svc-col--name { width: 32%; }
  .ukb-svc-table-cols-7:not(:has(col.ukb-svc-col--avg)) col.ukb-svc-col--rate { width: 13%; }
  .ukb-svc-table-cols-7:not(:has(col.ukb-svc-col--avg)) col.ukb-svc-col--minmax { width: 12%; }
  .ukb-svc-table-cols-7:not(:has(col.ukb-svc-col--avg)) col.ukb-svc-col--refill { width: 10%; }
  .ukb-svc-table-cols-7:not(:has(col.ukb-svc-col--avg)) col.ukb-svc-col--action { width: 23%; }

  .ukb-svc-table-cols-7:has(col.ukb-svc-col--avg) col.ukb-svc-col--id { width: 6%; }
  .ukb-svc-table-cols-7:has(col.ukb-svc-col--avg) col.ukb-svc-col--name { width: 28%; }
  .ukb-svc-table-cols-7:has(col.ukb-svc-col--avg) col.ukb-svc-col--rate { width: 13%; }
  .ukb-svc-table-cols-7:has(col.ukb-svc-col--avg) col.ukb-svc-col--minmax { width: 12%; }
  .ukb-svc-table-cols-7:has(col.ukb-svc-col--avg) col.ukb-svc-col--refill { width: 9%; }
  .ukb-svc-table-cols-7:has(col.ukb-svc-col--avg) col.ukb-svc-col--avg { width: 12%; }
  .ukb-svc-table-cols-7:has(col.ukb-svc-col--avg) col.ukb-svc-col--action { width: 20%; }

  .ukb-svc-table-cols-8 col.ukb-svc-col--fav { width: 4%; }
  .ukb-svc-table-cols-8 col.ukb-svc-col--id { width: 5%; }
  .ukb-svc-table-cols-8 col.ukb-svc-col--name { width: 26%; }
  .ukb-svc-table-cols-8 col.ukb-svc-col--rate { width: 12%; }
  .ukb-svc-table-cols-8 col.ukb-svc-col--minmax { width: 11%; }
  .ukb-svc-table-cols-8 col.ukb-svc-col--refill { width: 8%; }
  .ukb-svc-table-cols-8 col.ukb-svc-col--avg { width: 12%; }
  .ukb-svc-table-cols-8 col.ukb-svc-col--action { width: 22%; }

  #service-table.ukb-services-table .width-service-name,
  .ukb-svc-col-head--name,
  .ukb-svc-name {
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
  }

  .ukb-svc-rate,
  .ukb-svc-minmax,
  .ukb-svc-refill,
  .ukb-svc-avg {
    min-width: 0;
  }

  .ukb-services-table tbody tr.ukb-svc-row td,
  .ukb-svc-columns-head th,
  .ukb-svc-columns-head td {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ukb-svc-columns-head th.ukb-svc-col-head {
    height: auto;
    min-height: 44px;
    overflow: hidden;
    white-space: normal !important;
  }

  .ukb-svc-columns-head .ukb-svc-col-head__label {
    display: block;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .ukb-svc-col-head--action,
  .ukb-svc-actions {
    min-width: 0;
    width: auto;
    white-space: normal;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .ukb-svc-actions__inner {
    display: flex;
    width: 100%;
    gap: 8px;
  }

  .ukb-svc-btn {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: auto;
    height: 36px;
    padding: 6px 8px !important;
    font-size: 13px !important;
  }
}

@media (max-width: 992px) {
  .ukb-services-panel {
    padding: 0;
    border: none;
    background: transparent;
    gap: 20px;
  }

  .ukb-services-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ukb-services-toolbar__filters {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .ukb-svc-filter {
    width: 100%;
  }

  .ukb-svc-filter__btn {
    width: 100%;
    justify-content: flex-start;
  }

  .ukb-svc-filter__btn [data-filter-active-category] {
    max-width: none;
    text-align: left;
  }

  .ukb-svc-filter__caret {
    margin-left: auto;
  }

  .ukb-services-search {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    box-sizing: border-box;
  }

  .ukb-services-search .form-control {
    height: 100% !important;
    min-height: 0 !important;
    line-height: normal;
  }

  .ukb-svc-filter .dropdown-menu {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    left: 0;
    right: 0;
  }

  .ukb-svc-filter:not(.open):not(.show) > .dropdown-menu {
    display: none !important;
    pointer-events: none !important;
  }

  .ukb-services-table-wrap {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .ukb-svc-cat-toggle {
    min-height: 60px;
    padding: 12px 14px 12px 20px;
  }

  .ukb-svc-cat-toggle__title {
    font-size: 15px;
    line-height: 1.4;
  }

  .ukb-svc-cat-toggle__icon {
    width: 30px;
    height: 30px;
  }

  .ukb-svc-cat-toggle__icon img {
    width: 28px;
    height: 28px;
  }

  .ukb-svc-cat-toggle__chev {
    width: 28px;
    height: 28px;
  }

  .ukb-svc-cat-toggle__chev img {
    width: 20px;
    height: 20px;
  }

  .ukb-svc-col-head__label {
    font-size: 15px;
  }

  .ukb-svc-columns-head th,
  .ukb-svc-columns-head td {
    padding: 8px 12px !important;
    height: 38px;
  }

  #service-table.ukb-services-table
    > tbody
    > tr.ukb-svc-columns-head
    > th.ukb-svc-col-head--id {
    padding-left: 6px !important;
    padding-right: 0 !important;
  }

  #service-table.ukb-services-table > tbody > tr.ukb-svc-row > td.ukb-svc-id {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 6px !important;
    padding-right: 4px !important;
  }

  .ukb-services-table tbody tr.ukb-svc-row td {
    padding: 10px 12px !important;
    font-size: 14px;
  }

  #service-table.ukb-services-table > tbody > tr.ukb-svc-row > td.ukb-svc-id {
    font-size: 14px;
  }

  .ukb-svc-id {
    min-width: 56px;
  }

  .ukb-svc-col-head--id {
    min-width: 56px;
  }

  .ukb-svc-col-head--name,
  .ukb-svc-name {
    min-width: 180px;
    max-width: 280px;
  }

  #service-table.ukb-services-table .width-service-name {
    min-width: 180px !important;
    max-width: 280px !important;
  }

  .ukb-svc-name {
    font-size: 13px;
    line-height: 1.45;
  }

  .ukb-svc-rate,
  .ukb-svc-minmax,
  .ukb-svc-refill,
  .ukb-svc-avg {
    min-width: 88px;
  }

  .ukb-svc-minmax {
    font-size: 13px;
  }

  .ukb-svc-avg {
    font-size: 11px;
    line-height: 1.2;
  }

  .ukb-svc-rate__inner {
    gap: 8px;
  }

  .ukb-svc-col-head--action,
  .ukb-svc-actions {
    min-width: 148px;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .ukb-svc-actions__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .ukb-svc-btn {
    flex: 0 0 auto;
    min-width: 72px;
    max-width: 88px;
    width: auto;
    height: 36px;
    padding: 6px 10px !important;
    font-size: 13px !important;
    line-height: 1.2;
  }

  .ukb-svc-btn--fill {
    min-width: 80px;
    max-width: 96px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .ukb-svc-refill-pill {
    height: 34px;
    padding: 0 10px;
    font-size: 12px;
  }

  .ukb-svc-refill-pill--empty {
    font-size: 13px;
  }

  .ukb-svc-fav,
  .ukb-svc-th-fav {
    min-width: 36px;
    width: 36px;
    max-width: 36px;
    padding-left: 20px !important;
    padding-right: 4px !important;
  }

  #service-table.ukb-services-table
    > tbody
    > tr.ukb-svc-columns-head
    > th.ukb-svc-th-fav {
    padding-left: 20px !important;
    padding-right: 4px !important;
  }

  #service-table.ukb-services-table > tbody > tr.ukb-svc-row > td.ukb-svc-fav {
    padding-left: 20px !important;
    padding-right: 4px !important;
  }
}

@media (max-width: 576px) {
  .ukb-svc-actions__inner {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
  }

  .ukb-svc-btn {
    max-width: 88px;
    width: auto;
    height: 36px;
  }
}

/* Orders page */
.ukb-welcome--orders .ukb-welcome__art--orders {
  width: 185px;
  max-height: 185px;
  object-fit: contain;
}

.ukb-orders-panel {
  margin-top: 32px;
  padding: 24px 24px 0 24px;
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
  max-width: 100%;
}

.ukb-orders-toolbar {
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: 24px;
}

.ukb-orders-toolbar__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ukb-orders-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
}

.ukb-orders-filter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  max-width: 100%;
  height: 48px;
  padding: 4px 16px 4px 4px;
  border-radius: 12px;
  border: 1px solid #f2f2f2;
  background: #f7f8f9;
  color: #404040;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none !important;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.ukb-orders-filter:hover {
  color: #404040;
  border-color: rgba(33, 186, 203, 0.35);
}

.ukb-orders-filter.is-active,
.ukb-orders-filter.is-active:hover {
  border: none;
  background: var(--ukb-button-grad);
  color: #fff;
}

.ukb-orders-filter__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

.ukb-orders-filter__icon img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ukb-orders-filter:not(.is-active) .ukb-orders-filter__icon img {
  filter: brightness(0);
  opacity: 0.85;
}

.ukb-orders-filter.is-active .ukb-orders-filter__icon img {
  filter: brightness(0) invert(1);
  opacity: 1;
}

.ukb-orders-search.ukb-services-search {
  flex: 0 0 297px;
  height: 48px;
  min-height: 48px;
  box-sizing: border-box;
}

.ukb-orders-search__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.ukb-orders-table-card {
  border: 1px solid var(--ukb-border);
  border-radius: 16px;
  background: #fff;
  min-width: 0;
  overflow: hidden;
}

.ukb-orders-table-wrap {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

table.ukb-orders-table {
  width: max-content !important;
  min-width: 100% !important;
  max-width: none !important;
  margin-bottom: 0 !important;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

table.ukb-orders-table > thead > tr > th,
table.ukb-orders-table > tbody > tr > td {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  vertical-align: middle;
}

table.ukb-orders-table > thead > tr > th {
  padding: 16px 8px;
  background: var(--ukb-button-grad) !important;
  border-bottom: 1px solid #e6f3ff !important;
  border-top: 0 !important;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: none !important;
}

table.ukb-orders-table > thead > tr > th:first-child {
  padding-left: 16px;
  border-radius: 16px 0 0 0;
}

table.ukb-orders-table > thead > tr > th:last-child {
  padding-right: 16px;
  border-radius: 0 16px 0 0;
}

table.ukb-orders-table > tbody > tr > td {
  padding: 12px 8px;
  border: none !important;
  border-bottom: 0.5px solid rgba(199, 199, 199, 0.5) !important;
  font-size: 14px;
  line-height: 1.5;
  color: #000;
  background: #fff !important;
  box-shadow: none !important;
}

table.ukb-orders-table.table > tbody > tr > td,
table.ukb-orders-table.table > tbody > tr > th {
  border-color: rgba(199, 199, 199, 0.5) !important;
}

table.ukb-orders-table > tbody > tr > td:first-child {
  padding-left: 16px;
}

table.ukb-orders-table > tbody > tr > td:last-child {
  padding-right: 16px;
}

table.ukb-orders-table > tbody > tr.ukb-orders-table__row--alt > td {
  background: #f8fafc !important;
}

.ukb-orders-id-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ukb-orders-id-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ukb-orders-table__id {
  flex-shrink: 0;
}

.ukb-orders-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  opacity: 0.35;
  transition:
    opacity 0.15s ease,
    background 0.15s ease;
}

.ukb-orders-copy:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

.ukb-orders-copy.is-active {
  opacity: 1;
}

.ukb-orders-copy.is-active:hover,
.ukb-orders-copy--row.is-active:hover {
  background: rgba(33, 186, 203, 0.12);
}

.ukb-orders-copy img {
  display: block;
  width: 18px;
  height: 18px;
}

.ukb-orders-copy__check {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #404040;
}

.ukb-orders-copy.is-copied img {
  display: none;
}

.ukb-orders-copy.is-copied .ukb-orders-copy__check {
  display: block;
}

table.ukb-orders-table thead .ukb-orders-copy img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

table.ukb-orders-table thead .ukb-orders-copy.is-active img {
  opacity: 1;
}

table.ukb-orders-table thead .ukb-orders-copy__check {
  color: #fff;
}

html[data-ukb-theme="dark"]
  table.ukb-orders-table
  tbody
  .ukb-orders-copy__check {
  color: #fff;
}

.ukb-orders-copy__tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  bottom: auto;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: #181818;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  z-index: 20;
}

.ukb-orders-copy.is-copied .ukb-orders-copy__tooltip {
  opacity: 1;
  visibility: visible;
}

.ukb-orders-table > tbody > tr:last-child .ukb-orders-copy__tooltip {
  top: auto;
  bottom: calc(100% + 6px);
}

.ukb-orders-table th.ukb-orders-table__cell--id,
.ukb-orders-table td.ukb-orders-table__cell--id {
  width: 88px;
  min-width: 88px;
}

.ukb-orders-table th.ukb-orders-table__cell--date,
.ukb-orders-table td.ukb-orders-table__cell--date {
  width: 96px;
  min-width: 96px;
}

.ukb-orders-table th.ukb-orders-table__cell--link,
.ukb-orders-table td.ukb-orders-table__cell--link {
  width: 160px;
  min-width: 160px;
}

.ukb-orders-table th.ukb-orders-table__cell--link-compact,
.ukb-orders-table td.ukb-orders-table__cell--link-compact {
  width: 120px;
  max-width: 120px;
  min-width: 120px;
  overflow: hidden;
}

.ukb-orders-link--lines-2,
a.ukb-orders-link.ukb-orders-link--lines-2,
span.ukb-orders-link.ukb-orders-link--lines-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  line-height: 1.35;
  max-width: 100%;
}

.ukb-orders-table th.ukb-orders-table__cell--charge,
.ukb-orders-table td.ukb-orders-table__cell--charge {
  width: 68px;
  min-width: 68px;
}

.ukb-orders-table th.ukb-orders-table__cell--start,
.ukb-orders-table td.ukb-orders-table__cell--start {
  width: 96px;
  min-width: 96px;
}

.ukb-orders-table th.ukb-orders-table__cell--qty,
.ukb-orders-table td.ukb-orders-table__cell--qty {
  width: 80px;
  min-width: 80px;
}

.ukb-orders-table th.ukb-orders-table__cell--service,
.ukb-orders-table td.ukb-orders-table__cell--service {
  width: 180px;
  min-width: 140px;
}

.ukb-orders-table th.ukb-orders-table__cell--service-compact,
.ukb-orders-table td.ukb-orders-table__cell--service-compact {
  width: 168px;
  max-width: 168px;
  min-width: 168px;
  white-space: normal;
}

.ukb-orders-table
  td.ukb-orders-table__cell--service-compact
  .ukb-orders-service {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  line-height: 1.35;
  max-width: 100%;
}

.ukb-orders-service.ukb-orders-service--truncated {
  cursor: default;
}

.ukb-orders-service-tooltip {
  position: fixed;
  z-index: 10060;
  max-width: min(360px, calc(100vw - 24px));
  padding: 10px 12px;
  border-radius: 10px;
  background: #1f2937;
  color: #fff;
  font-family: Outfit, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.ukb-orders-table th.ukb-orders-table__cell--remains,
.ukb-orders-table td.ukb-orders-table__cell--remains {
  width: 72px;
  min-width: 72px;
}

.ukb-orders-table th.ukb-orders-table__cell--status,
.ukb-orders-table td.ukb-orders-table__cell--status {
  width: 92px;
  min-width: 92px;
}

.ukb-orders-table--recent-completed th.ukb-orders-table__cell--service-compact,
.ukb-orders-table--recent-completed td.ukb-orders-table__cell--service-compact {
  width: 200px;
  max-width: 220px;
  min-width: 180px;
}

.ukb-orders-table th.ukb-orders-table__cell--action,
.ukb-orders-table td.ukb-orders-table__cell--action {
  width: 100px;
  min-width: 100px;
}

.ukb-orders-table__head-label {
  font-weight: 700;
}

.ukb-orders-table th.ukb-orders-table__cell--status,
.ukb-orders-table td.ukb-orders-table__cell--status,
.ukb-orders-table th.ukb-orders-table__cell--action,
.ukb-orders-table td.ukb-orders-table__cell--action {
  text-align: center;
}

.ukb-orders-panel--recent-completed,
.ukb-updates-panel {
  gap: 0;
  padding: 24px;
}

.ukb-orders-panel-search-bar,
.ukb-recently-completed-search-bar {
  width: 100%;
  min-width: 0;
  margin: 0;
}

.ukb-orders-panel--recent-completed .ukb-orders-panel-search-bar,
.ukb-orders-panel--recent-completed .ukb-recently-completed-search-bar,
.ukb-updates-panel .ukb-orders-panel-search-bar {
  margin-bottom: 10px;
}

.ukb-orders-panel--recent-completed .ukb-orders-panel-search-bar .ukb-orders-search,
.ukb-orders-panel--recent-completed
  .ukb-recently-completed-search-bar
  .ukb-orders-search,
.ukb-updates-panel .ukb-orders-panel-search-bar .ukb-orders-search {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}

.ukb-updates-filters-row {
  width: 100%;
  min-width: 0;
  margin-bottom: 10px;
}

.ukb-updates-panel > .ukb-orders-panel-search-bar .ukb-orders-search,
.ukb-updates-panel > .ukb-updates-search-bar .ukb-orders-search {
  flex: 1 1 100%;
  width: 100% !important;
  max-width: 100%;
}

.ukb-orders-panel--recent-completed > .ukb-orders-pagination,
.ukb-updates-panel > .ukb-orders-pagination {
  margin-top: 24px;
}

.ukb-orders-toolbar--recent .ukb-orders-filters {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ukb-orders-toolbar--recent .ukb-orders-filters .ukb-orders-filter {
  flex-shrink: 0;
  cursor: pointer;
  font-family: inherit;
}

.ukb-orders-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.ukb-orders-date {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ukb-orders-link:not(.ukb-orders-link--lines-2) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ukb-orders-table__cell--link a.ukb-orders-link,
.ukb-orders-table__cell--link-compact a.ukb-orders-link {
  color: var(--ukb-teal);
  text-decoration: none;
}

.ukb-orders-link {
  color: inherit;
  text-decoration: none;
}

a.ukb-orders-link,
a.ukb-orders-link:visited,
a.ukb-orders-link:hover,
a.ukb-orders-link:focus-visible,
a.ukb-orders-link:active {
  color: var(--ukb-teal);
}

a.ukb-orders-link:hover,
a.ukb-orders-link:focus-visible {
  text-decoration: underline;
}

.ukb-orders-table__cell--service {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ukb-orders-details-link {
  margin-left: 6px;
}

.ukb-orders-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  cursor: pointer;
}

.ukb-orders-check__input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}

.ukb-orders-check__box {
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #000;
  border-radius: 2px;
  background: #fff;
  pointer-events: none;
}

.ukb-orders-check__tick {
  display: none;
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
}

.ukb-orders-check__input:checked + .ukb-orders-check__box {
  display: none;
}

.ukb-orders-check__input:checked ~ .ukb-orders-check__tick {
  display: block;
}

table.ukb-orders-table thead .ukb-orders-check__box {
  border-color: #fff;
  background: transparent;
}

.ukb-orders-status {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 92px;
  min-height: 34px;
  margin: 0 auto;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.25;
  white-space: normal;
  word-break: break-word;
}

.ukb-orders-status--completed {
  background: #33af75;
}

.ukb-orders-status--pending {
  background: #de700c;
}

.ukb-orders-status--inprogress {
  background: #0084ff;
  font-size: 11px;
  padding: 6px 4px;
}

.ukb-orders-status--partial {
  background: #5522ab;
}

.ukb-orders-status--processing {
  background: #d4a11f;
}

.ukb-orders-status--canceled {
  background: #f24545;
}

.ukb-orders-status--default {
  background: #6b7280;
}

.ukb-orders-reorder {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 96px;
  min-height: 38px;
  padding: 0 10px !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: 8px !important;
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: none !important;
}

.ukb-orders-reorder:hover,
.ukb-orders-reorder:focus {
  color: #fff !important;
  opacity: 0.95;
}

.ukb-orders-task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.ukb-orders-empty {
  margin: 0;
  padding: 32px 28px;
  text-align: center;
  color: #404040;
  font-size: 16px;
}

.ukb-orders-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ukb-orders-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 39px;
  height: 36px;
  padding: 8px 16px;
  border: 1px solid rgba(33, 186, 203, 0.4);
  border-radius: 8px;
  background: #fff;
  color: #181818;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none !important;
}

.ukb-orders-page:hover {
  border-color: #21bacb;
  color: #181818;
}

.ukb-orders-page.is-active,
.ukb-orders-page.is-active:hover {
  border: none;
  background: var(--ukb-button-grad);
  color: #fff;
}

.ukb-orders-page--nav {
  padding-left: 10px;
  padding-right: 16px;
  border-color: #21bacb;
  background: #fff;
  color: #0d6868;
}

.ukb-orders-page--next,
.ukb-orders-page--next:hover {
  padding-left: 16px;
  padding-right: 10px;
  border: none;
  background: var(--ukb-button-grad);
}

.ukb-orders-page--next span {
  -webkit-text-fill-color: #fff;
  color: #fff;
  background: none;
}

.ukb-orders-page--ellipsis {
  min-width: auto;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: #181818;
  pointer-events: none;
  cursor: default;
}

.ukb-orders-page--next img {
  filter: brightness(0) invert(1);
}

@media (max-width: 992px) {
  .ukb-orders-panel {
    margin-top: 16px;
    padding: 0;
    border: none;
    background: transparent;
    gap: 20px;
  }

  .ukb-orders-toolbar__row {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .ukb-orders-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    flex: none;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    padding-bottom: 0;
  }

  .ukb-orders-filter {
    width: 100%;
    min-width: 0;
    flex-shrink: 1;
  }

  .ukb-orders-toolbar--recent .ukb-orders-filters {
    display: flex;
    grid-template-columns: unset;
    width: auto;
    max-width: 100%;
  }

  .ukb-orders-toolbar--recent .ukb-orders-filter {
    width: auto;
  }

  .ukb-orders-toolbar--recent .ukb-orders-search {
    width: 100%;
    max-width: 100%;
  }

  .ukb-orders-filter__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .ukb-orders-search.ukb-services-search {
    flex: none;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px;
    align-self: stretch;
  }

  .ukb-orders-search.ukb-services-search .form-control {
    height: 48px !important;
    min-height: 48px !important;
    line-height: normal !important;
  }
}

.ukb-guest-wrap {
  max-width: 480px;
  margin: 80px auto;
  padding: 40px;
  background: #fff;
  border-radius: 24px;
  box-shadow: var(--ukb-shadow);
}

.ukb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1040;
}

.ukb-overlay.is-open {
  display: block;
}

/* Select2 / panel overrides inside form */
.ukb-order-form-card .select2-container .select2-selection--single,
.ukb-order-form-card
  .select2-container
  .select2-selection--single.form-control {
  height: var(--ukb-order-select-h) !important;
  min-height: var(--ukb-order-select-h) !important;
  /* Transparent 1px keeps box model stable; avoids focus flash of Select2/Bootstrap borders */
  border: 1px solid transparent !important;
  border-radius: 12px !important;
  background: var(--ukb-input) !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Kill Select2 default black / Bootstrap form-control focus flash on open */
.ukb-order-form-card
  .select2-container--default.select2-container--focus
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--default.select2-container--open
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--default.select2-container--focus
  .select2-selection--single.form-control,
.ukb-order-form-card
  .select2-container--default.select2-container--open
  .select2-selection--single.form-control,
.ukb-order-form-card .select2-selection--single.form-control:focus,
.ukb-order-form-card .select2-selection--single:focus {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35 !important;
  padding: 0 36px 0 16px !important;
  margin-left: 0 !important;
  color: #3a3a3a !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  > span,
.ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  > img {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered
  img {
  margin-right: 8px;
}

.ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  width: 18px !important;
  height: var(--ukb-order-select-h) !important;
  top: 0;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow
  b {
  display: none !important;
}

.ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23181818' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  transition: transform 0.15s ease;
}

.ukb-order-form-card
  .select2-container--open
  .select2-selection--single
  .select2-selection__arrow::after {
  transform: rotate(180deg);
}

/* Open field + list read as one attached control with a continuous border.
   Apply on --open immediately (before --below/--above) so Select2's default black border never flashes. */
.ukb-order-form-card .select2-container--open .select2-selection--single,
.ukb-order-form-card
  .select2-container--open
  .select2-selection--single.form-control,
.ukb-order-form-card
  .select2-container--default.select2-container--open
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--default.select2-container--focus.select2-container--open
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--default.select2-container--open
  .select2-selection--single.form-control,
.ukb-order-form-card
  .select2-container--default.select2-container--focus.select2-container--open
  .select2-selection--single.form-control {
  border: 1px solid var(--ukb-border) !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

.ukb-order-form-card
  .select2-container--open.select2-container--below
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--open.select2-container--below
  .select2-selection--single.form-control,
.ukb-order-form-card
  .select2-container--default.select2-container--open.select2-container--below
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--default.select2-container--focus.select2-container--open.select2-container--below
  .select2-selection--single {
  border: 1px solid var(--ukb-border) !important;
  border-bottom: 0 none transparent !important;
  border-bottom-width: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.ukb-order-form-card
  .select2-container--open.select2-container--above
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--open.select2-container--above
  .select2-selection--single.form-control,
.ukb-order-form-card
  .select2-container--default.select2-container--open.select2-container--above
  .select2-selection--single,
.ukb-order-form-card
  .select2-container--default.select2-container--focus.select2-container--open.select2-container--above
  .select2-selection--single {
  border: 1px solid var(--ukb-border) !important;
  border-top: 0 none transparent !important;
  border-top-width: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

/* Select2 open list — order form category / service */
body.ukb-auth .select2-dropdown.dropdown-menu,
body.ukb-auth .select2-dropdown.ukb-select2-dropdown {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0;
  background: var(--ukb-card) !important;
  border: 1px solid var(--ukb-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  z-index: 1030;
  box-sizing: border-box !important;
}

body.ukb-auth .select2-dropdown.select2-dropdown--below {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

body.ukb-auth .select2-dropdown.select2-dropdown--above {
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}

body.ukb-auth .select2-dropdown .select2-search--dropdown {
  padding: 12px 12px 8px;
}

body.ukb-auth .select2-dropdown .select2-search__field {
  height: 44px !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ukb-border) !important;
  border-radius: 10px !important;
  background: var(--ukb-input) !important;
  font-family: Outfit, sans-serif;
  font-size: 15px;
  color: #3a3a3a;
}

body.ukb-auth .select2-dropdown .select2-results {
  padding: 0;
}

/* Category/service: options list is the scroller */
body.ukb-auth .select2-dropdown .select2-results__options {
  max-height: min(320px, calc(100vh - 180px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 0 4px !important;
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 transparent;
}

body.ukb-auth .select2-dropdown .select2-results__options::-webkit-scrollbar {
  width: 4px;
}

body.ukb-auth
  .select2-dropdown
  .select2-results__options::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

/*
 * Search dropdown (Perfect Panel): wraps options in an extra div with its own
 * overflow + a huge padding-bottom. That created 2 scrollbars and empty space.
 * Keep the wrap as the only scroller; neutralize the inner list.
 */
body.ukb-auth .select2-dropdown .select2-results > div {
  max-height: min(320px, calc(100vh - 180px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  pointer-events: auto !important;
  scrollbar-width: thin;
  scrollbar-color: #c8c8c8 transparent;
}

body.ukb-auth .select2-dropdown .select2-results > div::-webkit-scrollbar {
  width: 4px;
}

body.ukb-auth
  .select2-dropdown
  .select2-results
  > div::-webkit-scrollbar-thumb {
  background: #c8c8c8;
  border-radius: 4px;
}

body.ukb-auth
  .select2-dropdown
  .select2-results
  > div
  > .select2-results__options {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding: 0 !important;
  padding-bottom: 0 !important;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option {
  margin: 0;
  padding: 3px 10px;
  border: 0;
  border-bottom: 1px dashed var(--ukb-border);
  border-radius: 0;
  background: transparent !important;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ukb-text-2) !important;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option:last-child {
  border-bottom: none;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option
  a {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent !important;
  font: inherit;
  color: inherit !important;
  text-decoration: none !important;
  box-sizing: border-box;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option--highlighted:not([aria-selected="true"]):not(
    .active
  ) {
  background: var(--ukb-teal-soft) !important;
  color: var(--ukb-text) !important;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option--highlighted:not([aria-selected="true"]):not(.active)
  a {
  background: transparent !important;
  color: inherit !important;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option[aria-selected="true"],
body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option.active {
  background: var(--ukb-grad) !important;
  color: #fff !important;
  font-weight: 400;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option--highlighted[aria-selected="true"],
body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option.active.select2-results__option--highlighted {
  background: var(--ukb-grad) !important;
  color: #fff !important;
}

body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option[aria-selected="true"]
  a,
body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option.active
  a,
body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option--highlighted[aria-selected="true"]
  a,
body.ukb-auth
  .select2-container--default
  .select2-dropdown
  .select2-results__option.active.select2-results__option--highlighted
  a {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit;
}

/* Let wheel pass through dropdown chrome; list + search stay interactive */
body.ukb-auth .select2-dropdown {
  pointer-events: none;
}

body.ukb-auth .select2-dropdown .select2-search,
body.ukb-auth .select2-dropdown .select2-search--dropdown,
body.ukb-auth .select2-dropdown .select2-search__field,
body.ukb-auth .select2-dropdown .select2-results > div,
body.ukb-auth .select2-dropdown .select2-results__options,
body.ukb-auth .select2-dropdown .select2-results__option,
body.ukb-auth .select2-dropdown .select2-results__option a {
  pointer-events: auto;
}

/* Panel injects description here; sidebar reads it via JS — keep in DOM, hide in form */
#order-form #service_description {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0);
  position: absolute;
  width: 1px;
  pointer-events: none;
}

#notify-wrapper {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.ukb-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10050;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 14px 14px 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--ukb-border);
  background: var(--ukb-card);
  box-shadow: var(--ukb-shadow);
  font-family: Outfit, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--ukb-text);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.ukb-toast__message {
  flex: 1;
  margin: 0;
  padding-right: 4px;
}

.ukb-toast__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -2px -2px 0 0;
  padding: 4px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ukb-muted, #6b7280);
  cursor: pointer;
  line-height: 0;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}

.ukb-toast__close:hover {
  color: var(--ukb-text);
  background: var(--ukb-teal-soft, rgba(0, 168, 150, 0.12));
}

.ukb-toast__close:focus-visible {
  outline: 2px solid var(--ukb-teal);
  outline-offset: 2px;
}

.ukb-toast--visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ukb-toast--success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #166534;
}

.ukb-toast--error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

html[data-ukb-theme="dark"] .ukb-toast--success {
  border-color: #166534;
  background: #14532d;
  color: #bbf7d0;
}

html[data-ukb-theme="dark"] .ukb-toast--error {
  border-color: #991b1b;
  background: #450a0a;
  color: #fecaca;
}

/* ——— Responsive ——— */
@media (max-width: 1600px) {
  :root {
    --ukb-sidebar-w: 300px;
    --ukb-topbar-control-h: 38px;
    --ukb-topbar-control-pad: 3px;
  }

  .ukb-brand {
    padding: 0 20px;
  }

  .ukb-brand::after {
    left: 20px;
    right: 20px;
  }

  .ukb-brand__name {
    font-size: 28px;
    letter-spacing: -0.56px;
  }

  .ukb-sidebar__body {
    padding: 20px;
  }

  .ukb-sidebar__scroll {
    gap: 20px;
    padding: 0 6px 16px;
  }

  .ukb-profile {
    padding: 22px 14px 18px;
    gap: 18px;
  }

  .ukb-profile__avatar {
    width: 68px;
    height: 44px;
  }

  .ukb-profile__name {
    font-size: 16px;
  }

  .ukb-profile__add {
    width: 48px;
    height: 28px;
    font-size: 16px;
  }

  .ukb-nav-section:not(.is-collapsed) > .ukb-nav-section__title {
    margin-bottom: 14px;
    font-size: 15px;
  }

  .ukb-nav-section + .ukb-nav-section > .ukb-nav-section__title {
    margin-top: 16px;
  }

  .ukb-nav-section__title .caret-icon {
    width: 10px;
    height: 6px;
  }

  .ukb-nav-list {
    gap: 6px;
  }

  .ukb-nav-link {
    gap: 10px;
    padding: 0 10px;
    font-size: 15px;
  }

  .ukb-nav-link.active {
    gap: 10px;
    padding: 0 10px;
  }

  .ukb-nav-link__icon {
    width: 30px;
    height: 30px;
    border-radius: 30px;
  }

  .ukb-nav-link__icon-img {
    width: 18px;
    height: 18px;
  }

  .ukb-nav-link.active .ukb-nav-link__icon {
    width: 30px;
    height: 30px;
  }

  .ukb-support {
    margin-top: 12px;
    padding: 12px 14px 14px;
    column-gap: 8px;
    row-gap: 8px;
  }

  .ukb-support__icon {
    width: 28px;
    height: 28px;
  }

  .ukb-support__icon-img {
    width: 14px;
    height: 14px;
  }

  .ukb-support__title {
    font-size: 14px;
  }

  .ukb-support__text {
    font-size: 11px;
  }

  .ukb-support__btn {
    height: 36px;
    font-size: 14px;
  }

  .ukb-topbar {
    padding: 0 20px;
    gap: 12px;
  }

  .ukb-topbar__left {
    gap: 14px;
  }

  .ukb-topbar__right {
    gap: 10px;
  }

  .ukb-date-pill {
    height: 32px;
    padding: 4px 10px;
    font-size: 13px;
  }

  .ukb-page-title {
    font-size: 20px;
    gap: 8px;
  }

  .ukb-page-title__icon {
    width: 24px;
    height: 24px;
  }

  .ukb-search {
    flex: 1 1 220px;
    max-width: 260px;
    min-width: 160px;
    padding: 0 12px;
    gap: 8px;
  }

  .ukb-search input {
    font-size: 14px;
  }

  .ukb-search__kbd {
    display: none;
  }

  .ukb-wallet__amount {
    font-size: 15px;
  }

  .ukb-content {
    padding: 26px 0 40px 26px;
    gap: 28px;
  }
}

@media (max-width: 1400px) {
  .ukb-topbar {
    padding: 0 18px;
    gap: 10px;
    z-index: 1040;
  }

  .ukb-topbar__left {
    gap: 12px;
  }

  .ukb-topbar__right {
    gap: 8px;
  }

  .ukb-date-pill {
    display: none;
  }

  .ukb-page-title {
    font-size: 18px;
  }

  .ukb-search {
    flex: 1 1 200px;
    max-width: 260px;
    min-width: 180px;
    padding: 0 12px;
  }

  .ukb-wallet__amount {
    font-size: 15px;
  }

  .ukb-topbar__sep {
    display: none;
  }

  .ukb-order-grid {
    gap: 16px;
  }

  .ukb-service-details {
    width: 40%;
    max-width: none;
    min-width: 0;
    flex-shrink: 1;
  }

  .ukb-card-head {
    padding: 14px 20px;
    min-height: 64px;
  }

  .ukb-order-grid .ukb-card-head {
    min-height: 76px;
  }

  .ukb-card-body {
    padding: 24px 20px;
  }

  .ukb-tabs {
    gap: 6px;
    padding: 6px;
  }

  .ukb-tab {
    padding: 5px 10px;
    font-size: 15px;
  }

  .ukb-chip {
    padding: 6px 14px;
    font-size: 15px;
  }

  .ukb-form-stack {
    gap: 20px;
  }

  .ukb-field label,
  .ukb-field .control-label {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .ukb-field .form-control,
  .ukb-input-like,
  .ukb-order-form-card .form-control,
  .ukb-order-form-card select.form-control,
  .ukb-order-form-card input.form-control {
    height: 52px !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  .ukb-order-form-card {
    --ukb-order-select-h: 52px;
    --ukb-order-input-h: 52px;
    --ukb-order-form-gap: 14px;
    --ukb-order-field-label-gap: 6px;
  }

  .ukb-order-form-card input.form-control,
  .ukb-order-form-card .form-control:not(select):not(textarea),
  .ukb-order-form-card select.form-control,
  .ukb-order-form-card .ukb-search-field .form-control,
  .ukb-order-form-card
    .ukb-search-field
    .search-dropdown
    .select2-selection--single,
  .ukb-order-form-card
    .ukb-search-field
    .search-dropdown
    input.select2-selection {
    height: var(--ukb-order-input-h) !important;
    min-height: var(--ukb-order-input-h) !important;
  }

  .ukb-order-form-card select.form-control,
  .ukb-order-form-card .select2-container .select2-selection--single,
  .ukb-order-form-card
    .select2-container
    .select2-selection--single.form-control {
    height: var(--ukb-order-select-h) !important;
    min-height: var(--ukb-order-select-h) !important;
  }

  .ukb-platforms {
    gap: 10px;
  }

  .ukb-platform {
    min-width: 0;
    max-width: none;
    height: 56px;
  }

  .ukb-platform img {
    width: 28px;
    height: 28px;
  }

  .ukb-charge {
    padding: 16px 20px;
  }

  .ukb-charge label {
    font-size: 16px;
  }

  .ukb-charge input,
  .ukb-charge #charge {
    font-size: 18px !important;
  }

  .ukb-submit {
    height: 52px;
    font-size: 17px;
  }

  .ukb-detail-box {
    padding: 14px 16px;
    margin-bottom: 20px;
  }

  .ukb-detail-box__label,
  .ukb-detail-box__value {
    font-size: 15px;
  }

  .ukb-meta-grid {
    gap: 10px;
    margin-bottom: 20px;
  }

  .ukb-meta-card {
    padding: 14px 16px;
  }

  .ukb-meta-card__title,
  .ukb-meta-card__value {
    font-size: 15px;
  }

  .ukb-desc-box {
    padding: 12px 16px;
  }

  .ukb-desc-box__title {
    font-size: 16px;
  }

  .ukb-desc-box .panel-body,
  .ukb-desc-box__body {
    font-size: 15px;
  }

  .ukb-instruction-list li,
  .ukb-instruction-list li span {
    font-size: 14px;
  }

  .ukb-instruction-list__check {
    width: 20px;
    height: 20px;
  }

  .ukb-community {
    width: 300px;
  }

  .ukb-welcome__art {
    right: 16px;
    width: 150px;
  }
}

@media (max-width: 1024px) {
  .ukb-order-grid {
    flex-direction: column;
    gap: 20px;
  }

  .ukb-order-form-card,
  .ukb-service-details {
    width: 100%;
    max-width: none;
  }

  .ukb-service-details {
    flex-shrink: 1;
  }
}

@media (max-width: 1300px) {
  .ukb-welcome {
    padding: 22px 20px;
  }

  .ukb-welcome__copy {
    max-width: calc(100% - 100px);
  }

  .ukb-welcome__title {
    margin-bottom: 8px;
    font-size: 22px;
    letter-spacing: -0.44px;
    line-height: 1.35;
  }

  .ukb-welcome__sub,
  .ukb-welcome__user {
    font-size: 14px;
    line-height: 1.4;
  }

  .ukb-welcome__art:not(.ukb-welcome__art--character) {
    width: 140px;
    height: auto;
    right: 10px;
  }

  .ukb-welcome__art--character {
    width: 164px;
    height: 231px;
    right: 24px;
    bottom: 0;
    top: auto;
    transform: none;
    object-fit: contain;
    object-position: bottom right;
  }

  .ukb-community {
    width: 300px;
    flex-shrink: 0;
  }
}

@media (max-width: 1200px) {
  :root {
    --ukb-topbar-control-h: 36px;
    --ukb-topbar-control-pad: 3px;
  }

  .ukb-topbar {
    padding: 0 16px;
    gap: 8px;
  }

  .ukb-page-title {
    font-size: 17px;
  }

  .ukb-page-title__icon {
    width: 22px;
    height: 22px;
  }

  .ukb-search {
    flex: 1 1 180px;
    max-width: 220px;
    min-width: 140px;
  }

  .ukb-search input {
    font-size: 13px;
  }
}

@media (max-width: 992px) {
  body.ukb-body.ukb-auth {
    height: auto;
    min-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    padding-bottom: 20px;
  }

  body.ukb-sidebar-open {
    overflow: hidden;
  }

  .ukb-shell {
    --ukb-header-h: 72px;
    margin: 16px 16px 0;
    padding: 0;
    gap: 0;
    flex-direction: column;
    border-radius: 0;
    height: auto;
    max-height: none;
    min-height: calc(100vh - 16px);
    overflow: visible;
    background: transparent;
    box-shadow: none;
    z-index: auto;
  }

  .ukb-overlay {
    z-index: 1050;
  }

  .ukb-shell::before {
    content: none;
    display: none;
  }

  .ukb-sidebar {
    height: 100vh;
    max-height: none;
  }

  .ukb-main {
    height: auto;
    min-height: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .ukb-content-scroll {
    overflow-y: visible;
    background: transparent;
  }

  .ukb-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: min(370px, 88vw);
    max-height: none;
    height: 100vh;
    height: 100dvh;
    z-index: 1060;
    background: #fff;
    border: 0;
    border-radius: 0 25px 25px 0;
    transform: translateX(-110%);
    transition: transform 0.25s ease;
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    min-height: 0;
    pointer-events: auto;
  }

  .ukb-sidebar.is-open {
    transform: translateX(0);
  }

  .ukb-sidebar .ukb-sidebar__body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .ukb-sidebar .ukb-sidebar__scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .ukb-topbar {
    position: sticky;
    top: 16px;
    z-index: 1040;
    height: var(--ukb-header-h);
    min-height: var(--ukb-header-h);
    padding: 8px 12px 8px 14px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    border-radius: 18px;
    box-shadow: var(--ukb-topbar-shadow);
    overflow: visible;
    background: var(--ukb-topbar-bg);
  }

  .ukb-topbar__left {
    flex: 1 1 0;
    min-width: 0;
    gap: 10px;
    overflow: visible;
  }

  .ukb-topbar__right {
    flex: 0 0 auto;
    justify-content: flex-end;
    min-width: 0;
    gap: 6px;
    flex-wrap: nowrap;
  }

  /*
   * Currency list: sit below topbar (shell inset), compact width — not full-bleed.
   * Bootstrap dropdown-menu-right otherwise sits off-screen on the left.
   */
  .ukb-topbar .ukb-currency-menu > .ukb-user-menu__list.dropdown-menu {
    position: fixed;
    left: auto;
    right: 16px;
    width: max-content;
    min-width: 200px;
    max-width: min(280px, calc(100vw - 32px));
    margin-top: 0;
    top: calc(16px + var(--ukb-header-h) + 8px);
    transform: none !important;
  }

  body.rtl .ukb-topbar .ukb-currency-menu > .ukb-user-menu__list.dropdown-menu {
    left: 16px;
    right: auto;
  }

  .ukb-topbar .ukb-date-pill {
    display: none;
  }

  .ukb-topbar__sep {
    display: none;
  }

  .ukb-mobile-toggle {
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 26px;
    line-height: 1;
    padding-top: 5px;
    box-sizing: border-box;
  }

  .ukb-page-title {
    display: none;
  }

  .ukb-page-title__icon {
    width: 24px;
    height: 24px;
  }

  .ukb-wallet,
  .ukb-userchip {
    padding: 3px 6px 3px 3px;
    gap: 2px;
  }

  .ukb-wallet .ukb-chevron,
  .ukb-userchip .ukb-chevron {
    width: 14px;
    height: 14px;
  }

  body.rtl .ukb-wallet,
  body.rtl .ukb-userchip {
    padding: 3px 3px 3px 6px;
  }

  /* Tablet: welcome + community stay 2 columns */
  .ukb-hero-row {
    flex-direction: row;
    align-items: stretch;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard) {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 176px;
    padding: 20px 16px;
    align-items: center;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard) .ukb-welcome__copy {
    max-width: calc(100% - 88px);
    text-align: left;
  }

  .ukb-welcome__copy {
    max-width: calc(100% - 88px);
  }

  .ukb-welcome:not(.ukb-welcome--dashboard)
    .ukb-welcome__art:not(.ukb-welcome__art--character) {
    display: block;
    width: 108px;
    height: auto;
    max-height: 112px;
    right: 8px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    object-fit: contain;
  }

  .ukb-welcome__art--character {
    display: block;
    right: 8px;
    width: 130px;
    height: 200px;
    max-width: none;
    max-height: none;
    bottom: 0;
    top: auto;
    transform: none;
    object-fit: contain;
    object-position: bottom right;
  }

  .ukb-community {
    width: min(280px, 38%);
    flex: 0 1 280px;
    max-width: 38%;
  }

  .ukb-platforms {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .ukb-platforms.ukb-platforms--services {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
  }

  .ukb-platform {
    flex: none;
    min-width: 0;
    max-width: none;
    width: 100%;
    height: 52px;
  }

  .ukb-platform img {
    width: 28px;
    height: 28px;
  }

  .ukb-platforms--strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
  }

  .ukb-platforms--strip .ukb-platform {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 48px;
    padding: 6px 4px;
  }

  .ukb-platforms--strip .ukb-platform img {
    width: 24px;
    height: 24px;
  }

  .ukb-card-head .ukb-tabs {
    width: auto;
    max-width: 100%;
    display: inline-flex;
    flex-wrap: nowrap;
  }

  .ukb-brand {
    height: 72px;
    min-height: 72px;
  }

  .ukb-content {
    padding: 16px 0 40px;
    background: transparent;
  }

  .ukb-search {
    display: none;
  }

  /* Light mode: lift community + stat cards off the page bg */
  html:not([data-ukb-theme="dark"]) .ukb-community,
  html:not([data-ukb-theme="dark"]) .ukb-stat {
    background: #eeeeee;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  }
}

@media (max-width: 1280px) {
  .ukb-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ukb-stat {
    padding: 20px;
  }

  .ukb-stat__top {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .ukb-affiliates-page .ukb-stats--affiliates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: horizontal stat cards (peek + scroll-snap) */
@media (max-width: 768px) {
  .ukb-stats-scroll {
    width: 100%;
    min-width: 0;
  }

  .ukb-stats-scroll__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .ukb-stats-scroll__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #d4d4d4;
    cursor: pointer;
    transition:
      width 0.2s ease,
      background 0.2s ease;
  }

  .ukb-stats-scroll__dot.is-active {
    width: 22px;
    background: var(--ukb-teal);
  }

  .ukb-stats-scroll__dot:focus-visible {
    outline: 2px solid var(--ukb-teal);
    outline-offset: 2px;
  }

  /* Stats (new order / services / etc.): 2-column grid above 450px */
  .ukb-stats:not(.ukb-stats--affiliates):not(.ukb-stats--dashboard) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 8px;
    overflow: visible;
  }

  .ukb-stats:not(.ukb-stats--affiliates):not(.ukb-stats--dashboard)
    > .ukb-stat {
    flex: unset;
    min-width: 0;
    max-width: none;
    scroll-snap-align: unset;
  }

  /* Dashboard stats: 2-column grid (no carousel) above 450px */
  .ukb-stats--dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 8px;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .ukb-stats--dashboard > .ukb-stat--dashboard {
    flex: unset;
    min-width: 0;
    max-width: none;
    scroll-snap-align: unset;
  }

  .ukb-dashboard-top .ukb-stats-scroll {
    min-width: 0;
    width: 100%;
    margin-bottom: 4px;
  }

  .ukb-dashboard-top .ukb-stats-scroll__dots {
    margin-bottom: 16px;
  }
}

/* Stats carousel only on very small screens (≤450px) */
@media (max-width: 450px) {
  .ukb-dashboard:has(.ukb-stats-scroll) {
    gap: 24px;
  }

  .ukb-dashboard-top .ukb-stats-scroll {
    margin-bottom: 12px;
  }

  .ukb-dashboard-top .ukb-stats-scroll__dots {
    margin-bottom: 20px;
  }

  .ukb-stats:not(.ukb-stats--affiliates):not(.ukb-stats--dashboard),
  .ukb-stats--dashboard {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    grid-template-columns: unset;
    grid-template-rows: unset;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }

  .ukb-stats:not(.ukb-stats--affiliates):not(
      .ukb-stats--dashboard
    )::-webkit-scrollbar,
  .ukb-stats--dashboard::-webkit-scrollbar {
    display: none;
  }

  .ukb-stats:not(.ukb-stats--affiliates):not(.ukb-stats--dashboard) > .ukb-stat,
  .ukb-stats--dashboard > .ukb-stat--dashboard {
    flex: 0 0 calc(100% - 36px);
    min-width: calc(100% - 36px);
    max-width: calc(100% - 36px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
}

@media (min-width: 769px) {
  .ukb-stats-scroll__dots {
    display: none;
  }
}

@media (max-width: 576px) {
  /* Mobile only: welcome + community stack to 1 column */
  .ukb-hero-row {
    flex-direction: column;
  }

  .ukb-community {
    width: 100%;
    max-width: none;
    flex: none;
  }

  .ukb-topbar {
    padding: 8px 10px;
    gap: 6px;
  }

  .ukb-stat {
    padding: 16px 18px;
  }

  .ukb-stat__top {
    margin-bottom: 20px;
  }

  .ukb-stat__chart {
    width: min(140px, 42%);
    min-width: 64px;
  }

  .ukb-meta-grid {
    grid-template-columns: 1fr;
  }

  .ukb-card-body {
    padding: 18px 16px;
  }

  .ukb-card-head {
    padding: 12px 16px;
  }

  .ukb-tabs {
    width: auto;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .ukb-platform {
    height: 48px;
  }

  .ukb-platform img {
    width: 26px;
    height: 26px;
  }

  .ukb-order-form-card {
    --ukb-order-select-h: 48px;
    --ukb-order-input-h: 48px;
    --ukb-order-form-gap: 12px;
    --ukb-order-field-label-gap: 6px;
  }

  .ukb-order-form-card .form-control,
  .ukb-order-form-card input.form-control,
  .ukb-order-form-card .form-control:not(select):not(textarea),
  .ukb-order-form-card select.form-control,
  .ukb-order-form-card .ukb-search-field .form-control,
  .ukb-order-form-card
    .ukb-search-field
    .search-dropdown
    .select2-selection--single,
  .ukb-order-form-card
    .ukb-search-field
    .search-dropdown
    input.select2-selection,
  .ukb-order-form-card .select2-container .select2-selection--single,
  .ukb-order-form-card
    .select2-container
    .select2-selection--single.form-control {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .ukb-order-form-card
    .select2-container--default
    .select2-selection--single
    .select2-selection__arrow {
    height: 48px !important;
  }

  .ukb-order-form-card .ukb-charge {
    padding: 12px 16px;
    border-radius: 12px;
    min-height: 48px;
  }

  .ukb-order-form-card .ukb-charge label {
    font-size: 15px;
  }

  .ukb-order-form-card .ukb-charge input.form-control,
  .ukb-order-form-card .ukb-charge #charge {
    font-size: 16px !important;
    line-height: 1.25;
  }

  .ukb-service-details .ukb-detail-box {
    padding: 12px 14px;
    margin-bottom: 16px;
  }

  .ukb-service-details .ukb-detail-box__label {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .ukb-service-details .ukb-detail-box__value {
    font-size: 14px;
    line-height: 1.35;
  }

  .ukb-service-details .ukb-meta-grid {
    gap: 8px;
    margin-bottom: 16px;
  }

  .ukb-service-details .ukb-meta-card {
    padding: 12px 14px;
  }

  .ukb-service-details .ukb-meta-card__title {
    font-size: 14px;
    gap: 6px;
    margin-bottom: 2px;
  }

  .ukb-service-details .ukb-meta-card__title img {
    width: 20px;
    height: 20px;
  }

  .ukb-service-details .ukb-meta-card__value {
    font-size: 14px;
    line-height: 1.35;
  }

  .ukb-service-details .ukb-desc-box {
    padding: 12px 14px;
  }

  .ukb-service-details .ukb-desc-box__title {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .ukb-service-details .ukb-desc-box__body {
    font-size: 14px;
    line-height: 1.45;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard) {
    min-height: 168px;
    padding: 16px 14px 14px;
    border-radius: 18px;
    align-items: center;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard) .ukb-welcome__title {
    margin-bottom: 6px;
    font-size: 18px;
    letter-spacing: -0.36px;
    line-height: 1.3;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard) .ukb-welcome__sub,
  .ukb-welcome:not(.ukb-welcome--dashboard) .ukb-welcome__user {
    font-size: 14px;
    line-height: 1.4;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard) .ukb-welcome__user {
    margin-top: 4px;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard)
    .ukb-welcome__art:not(.ukb-welcome__art--character) {
    width: 92px;
    max-height: 96px;
    right: 6px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .ukb-welcome__art--character {
    width: 120px;
    height: 168px;
    max-width: none;
    right: 4px;
    bottom: 0;
    top: auto;
    transform: none;
    object-fit: contain;
    object-position: bottom right;
  }

  .ukb-welcome:not(.ukb-welcome--dashboard) .ukb-welcome__copy {
    max-width: calc(100% - 76px);
    text-align: left;
  }

  .ukb-wallet__amount {
    display: none;
  }

  .ukb-form-stack--service-request {
    gap: 24px;
  }

  .ukb-form-stack--service-request .ukb-field .control-label {
    margin-bottom: 8px;
    font-size: 16px;
  }

  .ukb-form-stack--service-request
    .form-control:not(.ukb-service-request-note) {
    height: 52px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
  }

  .ukb-order-form-card .ukb-service-request-note.form-control {
    min-height: 140px;
  }
}

/* Desktop sidebar collapse — icon rail (not topbar ☰) */
@media (min-width: 993px) {
  body.ukb-sidebar-collapsed {
    --ukb-sidebar-w: 80px;
  }

  body.ukb-sidebar-collapsed .ukb-sidebar {
    width: var(--ukb-sidebar-w) !important;
    min-width: var(--ukb-sidebar-w) !important;
    max-width: var(--ukb-sidebar-w) !important;
    flex: 0 0 var(--ukb-sidebar-w) !important;
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
  }

  body.ukb-sidebar-collapsed .ukb-brand {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    height: auto;
    min-height: var(--ukb-header-h);
    padding: 18px 8px 14px;
  }

  body.ukb-sidebar-collapsed .ukb-brand::after {
    left: 10px;
    right: 10px;
  }

  body.ukb-sidebar-collapsed .ukb-brand__name {
    display: none;
  }

  body.ukb-sidebar-collapsed .ukb-brand__toggle svg {
    transform: rotate(180deg);
    transition: transform 0.25s ease;
  }

  body.ukb-sidebar-collapsed .ukb-sidebar__body {
    padding: 8px 6px 12px;
  }

  body.ukb-sidebar-collapsed .ukb-sidebar__scroll {
    padding: 0 2px 16px;
    gap: 12px;
    align-items: center;
  }

  body.ukb-sidebar-collapsed .ukb-profile {
    width: 100%;
    padding: 10px 6px;
    gap: 0;
    border-width: 1px;
  }

  body.ukb-sidebar-collapsed .ukb-profile > div {
    display: none;
  }

  body.ukb-sidebar-collapsed .ukb-profile__avatar {
    width: 44px;
    height: 44px;
  }

  body.ukb-sidebar-collapsed .ukb-nav {
    width: 100%;
    align-items: center;
  }

  body.ukb-sidebar-collapsed .ukb-nav-section__title {
    display: none;
  }

  body.ukb-sidebar-collapsed .ukb-nav-section.is-collapsed .ukb-nav-list {
    display: flex;
  }

  body.ukb-sidebar-collapsed
    .ukb-nav-section
    + .ukb-nav-section
    > .ukb-nav-section__title {
    margin-top: 0;
  }

  body.ukb-sidebar-collapsed .ukb-nav-list {
    width: 100%;
    align-items: center;
    gap: 6px;
  }

  body.ukb-sidebar-collapsed .ukb-nav-list > li {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  body.ukb-sidebar-collapsed .ukb-nav-link {
    justify-content: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    padding: 0;
    gap: 0;
  }

  body.ukb-sidebar-collapsed .ukb-nav-link > span:not(.ukb-nav-link__icon) {
    display: none;
  }

  body.ukb-sidebar-collapsed .ukb-nav-link.active {
    width: 48px;
    padding: 0;
    gap: 0;
  }

  body.ukb-sidebar-collapsed .ukb-support {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 6px 14px;
    margin-top: auto;
    grid-template-columns: none;
    row-gap: 0;
    column-gap: 0;
  }

  body.ukb-sidebar-collapsed .ukb-support__copy,
  body.ukb-sidebar-collapsed .ukb-support__btn {
    display: none;
  }

  body.ukb-sidebar-collapsed .ukb-support__icon {
    margin: 0;
  }

  body.ukb-sidebar-collapsed .ukb-mobile-toggle {
    display: none !important;
  }
}

/* RTL */
.rtl-navbar .ukb-shell,
body.rtl .ukb-shell {
  direction: rtl;
}

body.rtl .ukb-shell {
  direction: rtl;
}

body.rtl .ukb-sidebar {
  border: 0;
}

body.rtl .ukb-search-field:not(.is-active) .form-control,
body.rtl
  .ukb-search-field:not(.is-active)
  .search-dropdown
  .select2-selection--single,
body.rtl
  .ukb-search-field:not(.is-active)
  .search-dropdown
  input.select2-selection {
  padding-left: 18px !important;
  padding-right: 48px !important;
  background-position: right 18px center !important;
}

body.rtl .ukb-search-field.is-active .form-control,
body.rtl
  .ukb-search-field.is-active
  .search-dropdown
  .select2-selection--single,
body.rtl .ukb-search-field.is-active .search-dropdown input.select2-selection {
  padding-right: 18px !important;
}

/* AI Recommended Services */
.ukb-platforms--strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-top: 32px;
}

.ukb-platforms--strip .ukb-platform {
  flex: none;
  min-width: 0;
  max-width: none;
  width: 100%;
  height: 64px;
  padding: 16px 12px;
  border-radius: 12px;
  background: #f8fafc;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
}

.ukb-platforms--strip .ukb-platform img {
  width: 32px;
  height: 32px;
}

.ukb-platforms--strip .ukb-platform.is-active {
  background: var(--ukb-grad);
  border: none;
  box-shadow: none;
}

.ukb-ai-layout {
  display: grid;
  grid-template-columns: minmax(0, 55fr) minmax(0, 45fr);
  align-items: start;
  gap: 24px;
  margin-top: 32px;
  width: 100%;
  min-width: 0;
}

.ukb-ai-card {
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: 16px;
  overflow: hidden;
  min-width: 0;
}

.ukb-ai-card--recommended,
.ukb-ai-card--bestsale {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 0;
  align-self: start;
}

.ukb-ai-card__head {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 72px;
  padding: 16px 32px;
}

.ukb-ai-card__title {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.ukb-ai-card__body {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  max-height: 900px;
  padding: 32px;
}

.ukb-ai-card.is-empty .ukb-ai-card__body {
  min-height: 280px;
  max-height: 340px;
}

.ukb-ai-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
}

.ukb-ai-table__head,
.ukb-ai-table__row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 120px 100px;
  gap: 20px;
  align-items: center;
  padding: 12px;
}

.ukb-ai-table__head {
  flex-shrink: 0;
  background: var(--ukb-button-grad);
  border-radius: 8px;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.ukb-ai-table__head .ukb-ai-table__col--rate,
.ukb-ai-table__head .ukb-ai-table__col--action {
  text-align: center;
}

.ukb-ai-table__row {
  padding: 15px 12px;
  border-bottom: 0.5px solid rgba(43, 43, 43, 0.2);
  font-family: Geist, Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #323232;
}

.ukb-ai-table__row.is-hidden {
  display: none;
}

.ukb-ai-table__col--rate,
.ukb-ai-table__col--action {
  display: flex;
  justify-content: center;
}

.ukb-ai-rate {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ukb-ai-rate__icon {
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.ukb-ai-rate__value {
  font-family: Parkinsans, Outfit, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #01d86b;
}

.ukb-ai-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 20px;
  border: 1px solid #21bacb;
  border-radius: 8px;
  background: var(--ukb-button-grad);
  color: #fff !important;
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none !important;
  white-space: nowrap;
}

.ukb-ai-best {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 0 1 auto;
  min-height: 0;
  height: auto;
}

.ukb-ai-best__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 100px;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--ukb-button-grad);
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.ukb-ai-best__head span:nth-child(2),
.ukb-ai-best__head span:nth-child(3) {
  text-align: center;
}

.ukb-ai-best__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ukb-ai-best__list--scroll {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 780px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 186, 203, 0.45) transparent;
}

.ukb-ai-best__list--scroll:focus-visible {
  outline: 2px solid rgba(33, 186, 203, 0.45);
  outline-offset: 2px;
}

.ukb-ai-best__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px 100px;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(43, 43, 43, 0.2);
}

.ukb-ai-best__item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ukb-ai-best__item.is-hidden {
  display: none;
}

.ukb-ai-best__service {
  min-width: 0;
}

.ukb-ai-best__name {
  margin: 0;
  font-family: Geist, Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--ukb-button-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ukb-ai-best__orders {
  margin: 0;
  font-family: Geist, Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #323232;
}

.ukb-ai-rate--best {
  width: 120px;
  justify-content: center;
  flex-shrink: 0;
}

.ukb-ai-best__action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  flex-shrink: 0;
}

.ukb-ai-table__scroll {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 780px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(33, 186, 203, 0.45) transparent;
}

.ukb-ai-table__scroll:focus-visible {
  outline: 2px solid rgba(33, 186, 203, 0.45);
  outline-offset: 2px;
}

.ukb-ai-table__scroll::-webkit-scrollbar,
.ukb-ai-best__list--scroll::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.ukb-ai-table__scroll::-webkit-scrollbar-track,
.ukb-ai-best__list--scroll::-webkit-scrollbar-track {
  background: transparent;
}

.ukb-ai-table__scroll::-webkit-scrollbar-thumb,
.ukb-ai-best__list--scroll::-webkit-scrollbar-thumb {
  background: rgba(33, 186, 203, 0.45);
  border-radius: 999px;
}

.ukb-ai-table__scroll::-webkit-scrollbar-thumb:hover,
.ukb-ai-best__list--scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(33, 186, 203, 0.7);
}

.ukb-ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex: 1 1 auto;
  min-height: 180px;
  height: 100%;
  width: 100%;
  padding: 24px 20px;
  text-align: center;
  box-sizing: border-box;
}

.ukb-ai-card.is-empty .ukb-ai-empty {
  min-height: 0;
  padding: 16px 12px;
}

.ukb-ai-card.is-empty .ukb-ai-table__scroll,
.ukb-ai-card.is-empty .ukb-ai-best__list--scroll {
  max-height: none;
}

.ukb-ai-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: linear-gradient(
    135deg,
    rgba(33, 186, 203, 0.12),
    rgba(11, 141, 161, 0.08)
  );
  border: 1px solid rgba(33, 186, 203, 0.22);
}

.ukb-ai-empty__icon img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.ukb-ai-empty__text {
  margin: 0;
  max-width: 260px;
  font-family: Outfit, Geist, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: #6b7280;
}

/* Affiliates */
.ukb-affiliates-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.ukb-affiliates-referral-card {
  display: flex;
  gap: 32px;
  align-items: stretch;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: 20px;
}

.ukb-affiliates-referral {
  flex: 1 1 0;
  min-width: 0;
}

.ukb-affiliates-referral__title {
  margin: 0 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: #000;
}

.ukb-affiliates-referral__sub {
  margin: 0 0 16px;
  font-family: Geist, Outfit, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #666d80;
}

.ukb-affiliates-referral__field {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 16px;
}

.ukb-affiliates-referral__input-box {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  min-height: 50px;
  border-radius: 12px;
  background: rgba(33, 186, 203, 0.08);
  border: 1px solid rgba(33, 186, 203, 0.35);
}

.ukb-affiliates-referral__field-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ukb-affiliates-referral__input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: 48px !important;
  padding: 0 !important;
  font-size: 14px !important;
  color: #323232;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ukb-affiliates-referral__copy.ukb-submit {
  width: auto;
  height: 50px;
  min-height: 50px;
  flex-shrink: 0;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 500;
  text-shadow: none;
}

.ukb-affiliates-referral__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  border-radius: 12px;
  white-space: nowrap;
}

.ukb-affiliates-referral__copy img {
  filter: brightness(0) invert(1);
}

.ukb-affiliates-referral__check {
  display: none;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: #fff;
}

.ukb-affiliates-referral__copy.is-copied .ukb-affiliates-referral__copy-icon {
  display: none;
}

.ukb-affiliates-referral__copy.is-copied .ukb-affiliates-referral__check {
  display: block;
}

.ukb-affiliates-referral__share.is-copied {
  opacity: 0.85;
}

.ukb-affiliates-referral__share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  min-height: 50px;
  padding: 12px 20px;
  border-radius: 12px;
  border: 1px solid var(--ukb-teal);
  background: #fff;
  font-family: Geist, Outfit, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ukb-teal);
  cursor: pointer;
  white-space: nowrap;
}

.ukb-affiliates-referral__share:hover,
.ukb-affiliates-referral__share:focus {
  border-color: var(--ukb-teal);
  background: rgba(33, 186, 203, 0.06);
  color: var(--ukb-teal);
}

.ukb-affiliates-referral__note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: #666d80;
}

.ukb-affiliates-highlights {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  min-width: 0;
}

.ukb-affiliates-highlights .ukb-stat__top {
  margin-bottom: 16px;
}

.ukb-stat--bordered {
  border: 1px solid var(--ukb-border);
}

.ukb-affiliates-layout {
  display: flex;
  gap: 24px;
  align-items: stretch;
  min-height: 0;
}

.ukb-affiliates-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ukb-stats--affiliates {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
}

.ukb-affiliates-layout .ukb-service-details.ukb-affiliates-faq {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  min-width: 0;
}

.ukb-affiliates-payout-cta {
  display: flex;
  justify-content: flex-start;
}

.ukb-affiliates-payouts__title {
  margin: 0 0 16px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.ukb-addfunds-history--affiliates .ukb-addfunds-history__head,
.ukb-addfunds-history--affiliates .ukb-addfunds-history__row {
  grid-template-columns: 1.2fr 1fr 1fr;
}

.ukb-affiliate-faq__body {
  padding: 24px 32px 32px;
}

.ukb-affiliate-faq__list {
  display: flex;
  flex-direction: column;
}

.ukb-affiliate-faq__item {
  border-bottom: 1px solid var(--ukb-border);
}

.ukb-affiliate-faq__item:last-child {
  border-bottom: 0;
}

.ukb-affiliate-faq__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  font-family: Geist, Outfit, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #020618;
}

.ukb-affiliate-faq__summary::-webkit-details-marker {
  display: none;
}

.ukb-affiliate-faq__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.ukb-affiliate-faq__item[open] .ukb-affiliate-faq__chevron {
  transform: rotate(180deg);
}

.ukb-affiliate-faq__panel {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #666d80;
}

.ukb-affiliate-faq__panel p {
  margin: 0;
}

@media (max-width: 1600px) {
  .ukb-affiliates-page {
    gap: 24px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral-card {
    padding: 24px;
    gap: 20px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__title {
    font-size: 19px;
    margin-bottom: 8px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__sub {
    font-size: 14px;
    margin-bottom: 14px;
    line-height: 1.45;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__field {
    gap: 10px;
    margin-bottom: 14px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__input-box {
    padding: 0 14px;
    min-height: 48px;
    gap: 10px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__field-icon img {
    width: 22px;
    height: 22px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__input {
    font-size: 13px !important;
    height: 46px !important;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__copy.ukb-submit {
    height: 48px;
    min-height: 48px;
    padding: 0 18px;
    font-size: 15px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__copy img,
  .ukb-affiliates-page .ukb-affiliates-referral__share img {
    width: 17px;
    height: 17px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__share {
    min-height: 48px;
    padding: 11px 18px;
    font-size: 15px;
    gap: 8px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__note {
    font-size: 13px;
    gap: 8px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral__note img {
    width: 19px;
    height: 19px;
  }

  .ukb-affiliates-page .ukb-affiliates-highlights {
    gap: 12px;
  }

  .ukb-affiliates-page .ukb-affiliates-layout {
    gap: 20px;
  }

  .ukb-affiliates-page .ukb-affiliates-main {
    gap: 20px;
  }

  .ukb-affiliates-page .ukb-stats--affiliates {
    gap: 8px;
  }

  .ukb-affiliates-page .ukb-stat {
    padding: 20px 18px;
    border-radius: 14px;
  }

  .ukb-affiliates-page .ukb-stat__top {
    margin-bottom: 16px;
    align-items: flex-start;
    gap: 8px;
  }

  .ukb-affiliates-page .ukb-stat__label {
    font-size: 13px;
    letter-spacing: -0.36px;
    line-height: 1.3;
    white-space: normal;
  }

  .ukb-affiliates-page .ukb-stat__icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
  }

  .ukb-affiliates-page .ukb-stat__icon img {
    width: 20px;
    height: 20px;
  }

  .ukb-affiliates-page .ukb-stat__bottom {
    gap: 8px;
    align-items: flex-end;
  }

  .ukb-affiliates-page .ukb-stat__value {
    font-size: clamp(18px, 1.75vw, 26px);
    letter-spacing: -0.48px;
  }

  .ukb-affiliates-page .ukb-stat__chart {
    width: min(130px, 44%);
    max-width: 130px;
    min-width: 64px;
  }

  .ukb-affiliates-page .ukb-affiliates-highlights .ukb-stat__top {
    margin-bottom: 14px;
  }

  .ukb-affiliates-page .ukb-affiliate-faq__body {
    padding: 22px 24px 28px;
  }

  .ukb-affiliates-page .ukb-affiliate-faq__summary {
    font-size: 15px;
    padding: 14px 0;
    gap: 12px;
  }

  .ukb-affiliates-page .ukb-affiliate-faq__chevron {
    width: 22px;
    height: 22px;
  }

  .ukb-affiliates-page .ukb-affiliate-faq__panel {
    font-size: 14px;
    padding-bottom: 14px;
  }

  .ukb-affiliates-page .ukb-card-head {
    padding: 15px 24px;
    min-height: 68px;
  }

  .ukb-affiliates-page .ukb-card-head__lead-title {
    font-size: 17px;
  }
}

@media (max-width: 1400px) {
  .ukb-affiliates-page .ukb-stat__value {
    font-size: clamp(17px, 1.55vw, 24px);
  }

  .ukb-affiliates-page .ukb-stat__label {
    font-size: 12px;
  }

  .ukb-affiliates-page .ukb-stat__chart {
    width: min(115px, 42%);
    max-width: 115px;
    min-width: 56px;
  }

  .ukb-affiliates-page .ukb-stat {
    padding: 18px 16px;
  }
}

@media (max-width: 992px) {
  .ukb-affiliates-referral-card {
    flex-direction: column;
  }

  .ukb-affiliates-referral,
  .ukb-affiliates-highlights {
    flex: 1 1 auto;
    width: 100%;
  }

  .ukb-affiliates-layout {
    flex-direction: column;
  }

  .ukb-affiliates-layout .ukb-affiliates-main {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }

  .ukb-affiliates-layout .ukb-service-details.ukb-affiliates-faq {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
  }

  .ukb-affiliates-page .ukb-stats--affiliates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ukb-affiliates-page .ukb-affiliates-referral-card {
    padding: 18px 16px;
    gap: 20px;
  }

  .ukb-affiliates-page .ukb-affiliates-highlights {
    gap: 10px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral-card .ukb-stat {
    padding: 14px 12px;
  }
}

@media (max-width: 520px) {
  .ukb-affiliates-referral__field {
    flex-wrap: wrap;
  }

  .ukb-affiliates-referral__input-box {
    flex: 1 1 100%;
  }

  .ukb-affiliates-referral__copy.ukb-submit,
  .ukb-affiliates-referral__share {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }
}

@media (max-width: 1200px) {
  .ukb-ai-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .ukb-ai-card__body {
    height: auto;
    max-height: none;
    min-height: 0;
  }

  .ukb-ai-card.is-empty .ukb-ai-card__body {
    height: auto;
    min-height: 260px;
    max-height: none;
  }

  .ukb-ai-table__scroll,
  .ukb-ai-best__list--scroll {
    flex: 0 1 auto;
    max-height: 560px;
  }

  .ukb-ai-card.is-empty .ukb-ai-table__scroll,
  .ukb-ai-card.is-empty .ukb-ai-best__list--scroll {
    max-height: none;
  }
}

@media (max-width: 768px) {
  .ukb-ai-card__body {
    padding: 16px;
  }

  .ukb-ai-table__head {
    display: none;
  }

  .ukb-ai-table__row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .ukb-ai-table__col--id::before {
    content: "Id: ";
    font-weight: 600;
  }

  .ukb-ai-table__col--rate,
  .ukb-ai-table__col--action {
    justify-content: flex-start;
  }

  .ukb-platforms--strip {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 5px;
    margin-top: 20px;
  }

  .ukb-platforms--strip .ukb-platform {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    height: 36px;
    padding: 4px 2px;
    border-radius: 8px;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.06);
  }

  .ukb-platforms--strip .ukb-platform img {
    width: 20px;
    height: 20px;
  }

  .ukb-form-stack--service-request {
    gap: 16px;
  }

  .ukb-form-stack--service-request .ukb-field .control-label {
    margin-bottom: 6px;
    font-size: 15px;
  }

  .ukb-form-stack--service-request
    .form-control:not(.ukb-service-request-note) {
    height: 48px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  .ukb-affiliates-page .ukb-affiliates-referral-card {
    flex-direction: column;
    padding: 18px 14px;
    gap: 18px;
  }

  .ukb-affiliates-page .ukb-affiliates-highlights {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ukb-affiliates-page .ukb-affiliates-referral-card .ukb-stat {
    padding: 14px 10px;
  }

  .ukb-affiliates-layout {
    flex-direction: column;
  }

  .ukb-affiliates-layout .ukb-affiliates-main {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    min-height: 0;
  }

  .ukb-affiliates-layout .ukb-service-details.ukb-affiliates-faq {
    order: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 0;
    display: block;
    visibility: visible;
  }

  .ukb-affiliates-page .ukb-stats--affiliates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .ukb-affiliates-page .ukb-stat__top {
    margin-bottom: 10px;
  }

  .ukb-affiliates-page .ukb-stat__chart {
    width: min(72px, 36%);
    max-width: 72px;
    min-width: 40px;
  }

  .ukb-order-form-card .ukb-service-request-note.form-control {
    min-height: 112px;
    padding: 12px 14px !important;
  }

  .ukb-child-panel-page .ukb-order-form-card .ukb-card-body,
  .ukb-child-panel-page .ukb-child-panel-aside__body {
    padding: 20px 16px;
  }

  .ukb-child-panel-passwords {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Child panel */
.ukb-child-panel-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.ukb-child-panel-grid {
  margin-top: 32px;
}

.ukb-card-head--panel-title {
  min-height: 72px;
}

.ukb-card-head__title-only {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.ukb-card-head__lead--pill {
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--ukb-teal);
}

.ukb-form-stack--child-panel {
  gap: 24px;
}

.ukb-form-stack--child-panel .ukb-field .control-label {
  font-family: Geist, Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #181818;
}

.ukb-form-stack--child-panel .form-control {
  height: 64px !important;
  border: 1px solid #f2f2f2 !important;
  background: #eee !important;
}

.ukb-form-stack--child-panel select.form-control {
  height: 64px !important;
}

.ukb-child-panel-passwords {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.ukb-child-panel-passwords .ukb-field {
  margin-bottom: 0;
}

.ukb-child-panel-aside__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.ukb-child-panel-ns {
  padding: 14px 18px;
  border-radius: 12px;
  background: #eee;
  border: 1px solid #f2f2f2;
}

.ukb-child-panel-ns__title {
  margin: 0 0 4px;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #181818;
}

.ukb-child-panel-ns__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}

.ukb-child-panel-ns__row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ukb-child-panel-ns__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.ukb-child-panel-ns__copy {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--ukb-button-grad);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 104, 114, 0.2);
}

.ukb-child-panel-ns__copy img {
  display: block;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.ukb-child-panel-ns__check {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #fff;
}

.ukb-child-panel-ns__copy.is-copied img {
  display: none;
}

.ukb-child-panel-ns__copy.is-copied .ukb-child-panel-ns__check {
  display: block;
}

.ukb-child-panel-ns__copy-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: 6px;
  background: #181818;
  color: #fff;
  font-family: Geist, Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  z-index: 5;
}

.ukb-child-panel-ns__copy.is-copied .ukb-child-panel-ns__copy-tip {
  opacity: 1;
  visibility: visible;
}

.ukb-child-panel-ns__copy:hover,
.ukb-child-panel-ns__copy:focus-visible {
  opacity: 0.92;
}

.ukb-child-panel-copy {
  padding: 14px 18px;
  border-radius: 12px;
  background: #eee;
  border: 1px solid #f2f2f2;
}

.ukb-child-panel-copy__heading {
  margin: 0 0 12px;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #181818;
}

.ukb-child-panel-copy__subheading {
  margin: 12px 0;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #181818;
}

.ukb-child-panel-copy__list {
  margin: 0;
  padding-left: 1.25rem;
  color: #3c3c3c;
  font-size: 16px;
  line-height: 1.5;
}

.ukb-child-panel-copy__list a,
.ukb-child-panel-copy__list a.ukb-text-link {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  text-decoration: none;
  pointer-events: none;
  cursor: text;
}

.ukb-child-panel-copy__list--features {
  list-style: none;
  padding-left: 0;
}

.ukb-child-panel-copy__list--features li {
  position: relative;
  padding-left: 0;
  margin-bottom: 0;
}

.ukb-child-panel-copy__list--features li::before {
  content: "⭐";
  margin-right: 6px;
}

.ukb-child-panel-copy .ukb-desc-box__body p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.5;
  color: #404040;
}

.ukb-addfunds-history--child-panel .ukb-addfunds-history__head,
.ukb-addfunds-history--child-panel .ukb-addfunds-history__row {
  grid-template-columns: 1.2fr 0.8fr 1fr 1fr 1fr;
}

@media (max-width: 1600px) {
  .ukb-form-stack--child-panel .ukb-field .control-label {
    font-size: 16px;
  }

  .ukb-form-stack--child-panel .form-control,
  .ukb-form-stack--child-panel select.form-control {
    height: 56px !important;
    font-size: 15px !important;
  }
}

@media (max-width: 992px) {
  .ukb-child-panel-page .ukb-child-panel-grid {
    flex-direction: column;
  }

  .ukb-child-panel-page .ukb-child-panel-aside {
    width: 100%;
    max-width: none;
  }
}

@media (max-width: 768px) {
  .ukb-child-panel-passwords {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ukb-form-stack--child-panel .form-control,
  .ukb-form-stack--child-panel select.form-control {
    height: 52px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  .ukb-form-stack--child-panel .ukb-field .control-label {
    font-size: 15px;
  }

  .ukb-addfunds-history--child-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ukb-addfunds-history--child-panel .ukb-addfunds-history__table {
    min-width: 600px;
  }

  .ukb-addfunds-history--child-panel .ukb-addfunds-history__head,
  .ukb-addfunds-history--child-panel .ukb-addfunds-history__row {
    gap: 12px;
  }

  .ukb-addfunds-history--child-panel .ukb-addfunds-history__cell {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ukb-child-panel-page {
    gap: 24px;
  }

  .ukb-child-panel-grid {
    margin-top: 0;
  }

  .ukb-child-panel-ns,
  .ukb-child-panel-copy {
    padding: 12px 14px;
  }

  .ukb-child-panel-ns__list a,
  .ukb-child-panel-ns__value,
  .ukb-child-panel-copy a {
    overflow-wrap: anywhere;
  }

  .ukb-child-panel-copy__heading,
  .ukb-child-panel-copy__subheading {
    font-size: 16px;
  }

  .ukb-child-panel-copy__list,
  .ukb-child-panel-copy .ukb-desc-box__body p {
    font-size: 14px;
  }

  .ukb-addfunds-history--affiliates .ukb-addfunds-history__head,
  .ukb-addfunds-history--affiliates .ukb-addfunds-history__row {
    gap: 10px;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }

  .ukb-addfunds-history--affiliates .ukb-addfunds-history__cell {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ukb-affiliates-main .pagination {
    flex-wrap: wrap;
    gap: 4px;
  }
}

/* Create invoice — Figma 674:17586 (spacing + equal card height) */
.ukb-create-invoice-grid.ukb-order-grid {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 16px;
  margin-top: 24px;
  max-width: 100%;
  min-width: 0;
}

.ukb-create-invoice-grid.ukb-order-grid > .ukb-order-form-card,
.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-create-invoice-aside.ukb-service-details {
  align-self: stretch;
  height: auto;
  min-height: 0;
}

.ukb-create-invoice-grid.ukb-order-grid > .ukb-order-form-card {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-create-invoice-aside.ukb-service-details {
  flex: 0 0 38%;
  width: 38%;
  max-width: 611px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ukb-create-invoice-grid.ukb-order-grid > .ukb-order-form-card > .ukb-card-head,
.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-create-invoice-aside.ukb-service-details
  > .ukb-card-head {
  flex: 0 0 auto;
  box-sizing: border-box;
}

.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-order-form-card
  > .ukb-create-invoice-panels {
  flex: 0 0 auto;
  min-height: 0;
}

.ukb-create-invoice-panels {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-areas: "stack";
  align-content: start;
  align-items: start;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  isolation: isolate;
}

.ukb-create-invoice-panels > .ukb-card-body.ukb-create-invoice-panel {
  flex: 0 0 auto;
}

.ukb-create-invoice-panels > .ukb-create-invoice-panel {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 16px;
  box-sizing: border-box;
  overflow-x: clip;
}

.ukb-create-invoice-panels > .ukb-create-invoice-panel.is-hidden {
  pointer-events: none;
  user-select: none;
}

.ukb-create-invoice-panels > .ukb-create-invoice-panel.is-active {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}

.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-create-invoice-aside
  > .ukb-card-body.ukb-create-invoice-aside__body {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px;
  box-sizing: border-box;
}

.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-create-invoice-aside
  > .ukb-card-body.ukb-create-invoice-aside__body
  > .ukb-create-invoice-instruction.ukb-desc-box {
  flex: 0 0 auto;
  align-self: flex-start;
  width: 100%;
  height: auto;
  min-height: 0;
}

.ukb-create-invoice-grid .ukb-form-stack.ukb-form-stack--create-invoice {
  gap: 16px;
  flex: 0 0 auto;
  width: 100%;
}

.ukb-create-invoice-grid .ukb-order-form-card .ukb-field .control-label,
.ukb-create-invoice-grid
  .ukb-form-stack--create-invoice
  .ukb-field
  .control-label {
  margin: 0 0 8px;
}

.ukb-form-stack--create-invoice .ukb-field .control-label {
  font-family: Outfit, Geist, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  color: #080808;
}

.ukb-form-stack--create-invoice > .ukb-submit {
  margin-top: 0;
  height: 44px;
  min-height: 44px;
  font-size: 16px;
}

.ukb-form-stack--create-invoice .form-control {
  height: 42px !important;
  min-height: 42px !important;
  padding: 8px 14px !important;
  border: 0 !important;
  background: #eee !important;
  border-radius: 12px !important;
  font-family: Outfit, Inter, sans-serif;
  font-size: 16px;
  color: #3a3a3a;
}

.ukb-create-invoice-api-alert:not([hidden]) {
  margin-bottom: 16px;
}

.ukb-form-stack--create-invoice .ukb-create-invoice-api-alert.alert {
  width: 100%;
}

.ukb-create-invoice-history-alert:not([hidden]) {
  margin-bottom: 16px;
}

.ukb-create-invoice-fields-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
}

.ukb-card-head--create-invoice {
  min-height: 64px;
}

.ukb-card-head__lead-title--on-gradient {
  color: #fff;
}

.ukb-create-invoice-aside__icon {
  display: block;
  width: 35px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.ukb-create-invoice-instruction.ukb-desc-box {
  flex: 0 0 auto;
  display: block;
  align-self: flex-start;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #eee;
  border: 1px solid #f2f2f2;
  box-sizing: border-box;
}

.ukb-create-invoice-instruction .ukb-desc-box__title {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.25;
}

.ukb-instruction-list--create-invoice {
  gap: 12px;
}

.ukb-instruction-list--create-invoice li {
  align-items: flex-start;
  gap: 8px;
  color: #2b2b22;
  font-size: 14px;
  line-height: 1.35;
}

.ukb-instruction-list--create-invoice .ukb-instruction-list__check {
  width: 20px;
  height: 20px;
}

.ukb-create-invoice-history.ukb-addfunds-history--invoice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: visible;
}

.ukb-create-invoice-history__table-scroll {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.ukb-addfunds-history--invoice .ukb-addfunds-history__table {
  width: 100%;
  min-width: 720px;
  box-sizing: border-box;
}

.ukb-create-invoice-history__table-scroll .ukb-addfunds-history__table {
  width: 100%;
  min-width: 720px;
  box-sizing: border-box;
}

.ukb-create-invoice-history .ukb-addfunds-history__more {
  display: flex;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  height: 56px;
  min-height: 56px;
  flex-shrink: 0;
}

.ukb-create-invoice-history .ukb-addfunds-history__more[hidden] {
  display: none !important;
}

.ukb-addfunds-history--invoice .ukb-addfunds-history__head,
.ukb-addfunds-history--invoice .ukb-addfunds-history__row {
  grid-template-columns:
    minmax(56px, 0.75fr) minmax(80px, 1.15fr) minmax(72px, 1fr)
    minmax(88px, 1fr) minmax(72px, 1fr) minmax(96px, 0.95fr);
  gap: 20px;
}

.ukb-addfunds-history--invoice .ukb-addfunds-history__head > :first-child,
.ukb-addfunds-history--invoice .ukb-addfunds-history__row > :first-child {
  min-width: 56px;
}

.ukb-addfunds-history--invoice .ukb-addfunds-history__head > *,
.ukb-addfunds-history--invoice .ukb-addfunds-history__row > * {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ukb-addfunds-history--invoice
  .ukb-addfunds-history__row
  > .ukb-invoice-history__action {
  overflow: visible;
  white-space: nowrap;
}

.ukb-addfunds-history--invoice .ukb-addfunds-history__head,
.ukb-addfunds-history--invoice .ukb-addfunds-history__row {
  width: 100%;
  box-sizing: border-box;
}

.ukb-addfunds-history--invoice .ukb-addfunds-history__row {
  border-bottom: 0.5px solid rgba(43, 43, 43, 0.2);
  background: transparent;
}

.ukb-invoice-history__status--completed {
  color: #01d86b;
}

.ukb-invoice-history__status--pending {
  color: #e6a700;
}

.ukb-invoice-history__action {
  display: flex;
  justify-content: center;
}

.ukb-invoice-history__download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  padding: 6px 20px;
  border-radius: 8px;
  border: 1px solid #21bacb;
  background: var(--ukb-button-grad);
  color: #fff !important;
  font-family: Outfit, Geist, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none !important;
  white-space: nowrap;
}

/* Desktop: equal card height + form panel keeps row height when History is open */
@media (min-width: 1024px) {
  .ukb-create-invoice-grid.ukb-order-grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }

  /* History must not stay in flow on Create Invoice tab (loaded rows were inflating card height) */
  .ukb-create-invoice-panels
    > .ukb-create-invoice-panel.ukb-create-invoice-panel--history.is-hidden,
  .ukb-create-invoice-panels
    > .ukb-create-invoice-panel.is-hidden[data-ukb-create-invoice-panel="history"] {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
  }

  /* Form stays in flow while History is visible so height does not jump */
  .ukb-create-invoice-panels
    > .ukb-create-invoice-panel.ukb-create-invoice-panel--form.is-hidden,
  .ukb-create-invoice-panels
    > .ukb-create-invoice-panel.is-hidden[data-ukb-create-invoice-panel="form"] {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
    z-index: 0;
  }
}

@media (max-width: 1023px) {
  .ukb-create-invoice-grid.ukb-order-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .ukb-create-invoice-grid.ukb-order-grid
    > .ukb-create-invoice-aside.ukb-service-details {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .ukb-create-invoice-panels > .ukb-create-invoice-panel.is-hidden,
  .ukb-create-invoice-panels > .ukb-create-invoice-panel[hidden] {
    display: none !important;
  }
}

@media (max-width: 992px) {
  .ukb-create-invoice-fields-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 768px) {
  .ukb-create-invoice-grid .ukb-form-stack.ukb-form-stack--create-invoice {
    gap: 16px;
  }

  .ukb-form-stack--create-invoice .ukb-field .control-label {
    font-size: 16px;
  }

  .ukb-form-stack--create-invoice .form-control {
    height: 42px !important;
    min-height: 42px !important;
    padding: 8px 12px !important;
    font-size: 15px;
  }

  .ukb-instruction-list--create-invoice {
    gap: 10px;
  }

  .ukb-create-invoice-history__table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Giveaway */
.ukb-giveaway-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ukb-text-gradient {
  background: var(--ukb-button-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ukb-giveaway-tasks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.ukb-giveaway-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  min-height: 280px;
  padding: 32px;
  border: 0.5px solid var(--ukb-border);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
}

.ukb-giveaway-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
}

.ukb-giveaway-card__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 160px;
  max-height: 48px;
  min-height: 28px;
  object-fit: contain;
}

.ukb-giveaway-card__logo-wrap--wide .ukb-giveaway-card__logo {
  width: 100%;
  max-width: 136px;
  max-height: 42px;
}

html:not([data-ukb-theme="dark"])
  .ukb-giveaway-page
  .ukb-giveaway-card__logo--theme-dark {
  display: none;
}

html[data-ukb-theme="dark"]
  .ukb-giveaway-page
  .ukb-giveaway-card__logo-wrap:has(.ukb-giveaway-card__logo--theme-dark)
  .ukb-giveaway-card__logo--theme-light {
  display: none;
}

.ukb-giveaway-card__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.ukb-giveaway-card__title {
  margin: 0;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #292929;
}

.ukb-giveaway-card__reward {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.ukb-giveaway-card__btn {
  width: 100%;
  min-height: 48px;
  height: 48px;
  margin-top: auto;
  padding: 12px 24px;
  border: 0 !important;
  border-radius: 12px;
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
  font-family: Geist, Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: none;
  text-shadow: 0 1.35px 4px rgba(14, 35, 22, 0.2);
  box-shadow:
    0 24.721px 16.129px rgba(0, 0, 0, 0.08),
    0 2px 3px rgba(0, 0, 0, 0.2) !important;
}

.ukb-giveaway-card__btn:hover,
.ukb-giveaway-card__btn:focus {
  color: #fff !important;
  background: var(--ukb-button-grad) !important;
  opacity: 0.95;
}

.ukb-giveaway-modal-host {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.ukb-giveaway-modal-host[hidden] {
  display: none !important;
}

.ukb-giveaway-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(24, 24, 24, 0.45);
}

.ukb-giveaway-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 2rem);
}

.ukb-giveaway-modal {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: calc(100vh - 2rem);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--ukb-shadow);
}

body.ukb-giveaway-modal-open {
  overflow: hidden;
}

.ukb-giveaway-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--ukb-grad);
  color: #fff;
}

.ukb-giveaway-modal__title {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.35;
}

.ukb-giveaway-modal__dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.ukb-giveaway-modal__dismiss:hover,
.ukb-giveaway-modal__dismiss:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.ukb-giveaway-modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  overflow: auto;
}

.ukb-giveaway-modal__reward {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.ukb-giveaway-modal__info {
  margin: 0;
  font-family: Geist, Inter, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  color: #404040;
}

.ukb-giveaway-modal__foot {
  padding: 0 24px 24px;
}

.ukb-giveaway-modal__tickets {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border: 0 !important;
  border-radius: 12px;
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
  font-family: Geist, Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none !important;
}

.ukb-giveaway-participate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 60px;
  border: 0.5px solid var(--ukb-teal);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
}

.ukb-giveaway-participate__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 416px;
  text-align: center;
}

.ukb-giveaway-participate__title {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

.ukb-giveaway-participate__sub {
  margin: 0;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #292929;
}

.ukb-giveaway-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 1100px;
}

.ukb-giveaway-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--ukb-teal);
  border-radius: 15px;
  background: #fff;
}

.ukb-giveaway-step__icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 32px;
  padding: 12px;
  border: 0.75px solid #c8083d;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.5);
}

.ukb-giveaway-step__icon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.ukb-giveaway-step__title {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}

.ukb-giveaway-flow__arrow {
  position: relative;
  flex: 0 0 44px;
  align-self: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ukb-giveaway-flow__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background-color: #0d6872;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 6l6 6-6 6' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    var(--ukb-button-grad);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size:
    18px 18px,
    100% 100%;
  box-shadow:
    0 4px 14px rgba(13, 104, 114, 0.28),
    0 0 0 4px #fff,
    0 0 0 5px rgba(33, 186, 203, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.ukb-giveaway-rules-card {
  width: 100%;
}

.ukb-card-head--giveaway-rules {
  min-height: 84px;
}

.ukb-giveaway-rules-card__head-icon {
  display: block;
  width: 35px;
  height: 40px;
  object-fit: contain;
}

.ukb-giveaway-rules-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 30px 20px;
  border: 0.5px solid var(--ukb-teal);
  border-radius: 12px;
  background: #f8fafc;
}

.ukb-giveaway-rules-panel__copy {
  flex: 1 1 0;
  min-width: 0;
  max-width: 680px;
  overflow: visible;
}

.ukb-giveaway-rules-panel__title {
  margin: 0 0 12px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.48px;
  text-transform: capitalize;
}

.ukb-giveaway-rules-panel__lead {
  margin: 0 0 12px;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #292929;
}

.ukb-giveaway-rules-list {
  margin: 0;
  padding-left: 1.25rem;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #292929;
}

.ukb-giveaway-rules-list li {
  margin-bottom: 0.35em;
}

.ukb-giveaway-rules-list li:last-child {
  margin-bottom: 0;
}

.ukb-giveaway-rules-panel__art {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  max-width: 50%;
}

.ukb-giveaway-rules-panel__art img {
  display: block;
  width: auto;
  max-width: min(100%, 500px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
}

@media (max-width: 1400px) {
  .ukb-giveaway-tasks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .ukb-giveaway-participate {
    padding: 40px 24px;
  }

  .ukb-giveaway-flow {
    flex-direction: column;
    gap: 8px;
    max-width: 100%;
  }

  .ukb-giveaway-flow__arrow {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 4px 0;
  }

  .ukb-giveaway-flow__arrow::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .ukb-giveaway-step {
    width: 100%;
  }

  .ukb-giveaway-rules-panel {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 20px 16px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .ukb-giveaway-rules-panel__art {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    order: -1;
  }

  .ukb-giveaway-rules-panel__art img {
    max-width: min(100%, 320px);
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .ukb-giveaway-page {
    gap: 24px;
  }

  .ukb-giveaway-tasks {
    grid-template-columns: 1fr;
  }

  .ukb-giveaway-card {
    min-height: 0;
    padding: 24px;
    gap: 24px;
  }

  .ukb-giveaway-participate {
    padding: 32px 16px;
    gap: 28px;
  }

  .ukb-giveaway-rules-panel {
    gap: 12px;
    padding: 12px 0 0;
  }

  .ukb-giveaway-rules-panel__art img {
    max-width: min(100%, 280px);
  }

  .ukb-giveaway-rules-panel__copy {
    padding-top: 0;
  }

  .ukb-giveaway-rules-panel__title {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .ukb-giveaway-rules-panel__lead {
    margin-bottom: 8px;
  }
}

/* —— API page —— */
.ukb-api-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.ukb-api-doc-card {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 100%;
  padding: 32px;
  border: 1px solid #e8e8e3;
  border-radius: 24px;
  background: #fff;
}

.ukb-api-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ukb-api-section__head {
  display: flex;
  align-items: center;
  min-height: 72px;
  margin: 0;
  padding: 21px 32px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}

.ukb-api-section__head--split {
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.ukb-api-kv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.ukb-api-kv {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 32px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.ukb-api-kv--label {
  background: #fff;
  color: #020618;
  font-size: 16px;
}

.ukb-api-kv--value {
  background: #f3f3f3;
}

.ukb-api-kv--value-url {
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ukb-api-url-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  word-break: break-all;
}

.ukb-api-url-copy {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--ukb-button-grad);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 104, 114, 0.25);
}

.ukb-api-url-copy__tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  bottom: auto;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: #181818;
  color: #fff;
  font-family: Geist, Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  z-index: 5;
}

.ukb-api-url-copy.is-copied .ukb-api-url-copy__tooltip {
  opacity: 1;
  visibility: visible;
}

.ukb-api-url-copy:hover,
.ukb-api-url-copy:focus {
  opacity: 0.92;
}

.ukb-api-url-copy img {
  display: block;
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

.ukb-api-kv--head {
  background: #f3f3f3;
  color: #020618;
  font-size: 16px;
}

.ukb-api-kv--param {
  background: #fff;
}

.ukb-api-kv--desc {
  background: #fff;
}

.ukb-api-service-type {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 602px;
  width: 100%;
}

.ukb-api-service-type__label {
  margin: 0;
  font-family: Geist, Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #111;
}

.ukb-api-service-type__select-wrap {
  position: relative;
  width: 100%;
}

.ukb-api-service-type__select {
  width: 100%;
  height: 48px;
  padding: 12px 44px 12px 20px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  background-color: #f8fafc;
  font-size: 14px;
  color: #2b2b22;
  appearance: none;
  -webkit-appearance: none;
}

.ukb-api-service-type__caret {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23404040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.ukb-api-key-text {
  display: block;
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  overflow-wrap: anywhere;
}

.ukb-api-kv--value-key {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}

.ukb-api-empty {
  margin: 0;
  padding: 16px 20px;
  border: 1px dashed #e8e8e3;
  border-radius: 12px;
  font-size: 15px;
  color: #404040;
  text-align: center;
}

.ukb-welcome--api {
  min-height: 205px;
}

.ukb-api-type-panel {
  width: 100%;
}

.ukb-api-example {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ukb-api-copy-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 32px;
  border: 1.5px solid var(--ukb-teal);
  border-radius: 12px;
  background: #fff;
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.5);
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ukb-teal);
  cursor: pointer;
}

.ukb-api-copy-code img {
  display: block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(44%) sepia(79%) saturate(557%)
    hue-rotate(145deg) brightness(94%) contrast(92%);
}

.ukb-api-code {
  margin: 0;
  padding: 40px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  background: #f3f3f3;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
  white-space: pre-wrap;
  word-break: break-word;
}

.ukb-api-php-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--ukb-button-grad);
  font-family: Geist, Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none !important;
}

.ukb-api-php-link:hover,
.ukb-api-php-link:focus {
  color: #fff !important;
  opacity: 0.95;
}

@media (max-width: 992px) {
  .ukb-api-doc-card {
    padding: 24px 16px;
    gap: 28px;
  }

  .ukb-api-section__head {
    min-height: 64px;
    padding: 16px 20px;
    font-size: 18px;
  }

  .ukb-api-kv {
    padding: 14px 16px;
    min-height: 48px;
  }

  .ukb-api-kv--label {
    font-size: 15px;
  }

  .ukb-api-code {
    padding: 24px 16px;
    font-size: 13px;
  }
}

@media (max-width: 768px) {
  .ukb-api-page {
    gap: 24px;
  }

  .ukb-api-page .ukb-welcome--api {
    min-height: 176px;
    padding: 20px 16px;
  }

  .ukb-api-page .ukb-welcome--api .ukb-welcome__art--character {
    width: 120px;
    height: 169px;
    right: 8px;
  }

  .ukb-api-doc-card {
    padding: 16px 12px;
    gap: 24px;
    border-radius: 16px;
  }

  .ukb-api-kv-grid {
    grid-template-columns: 1fr;
  }

  .ukb-api-kv-grid--info .ukb-api-kv--label {
    min-height: 44px;
    padding-bottom: 8px;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }

  .ukb-api-kv-grid--info .ukb-api-kv--value {
    margin-top: -12px;
    border-radius: 0 0 12px 12px;
  }

  .ukb-api-kv--value-url {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .ukb-api-url-copy {
    align-self: flex-start;
  }

  .ukb-api-kv-grid--params .ukb-api-kv--head:first-of-type {
    border-radius: 12px 12px 0 0;
  }

  .ukb-api-kv-grid--params .ukb-api-kv--head:last-of-type {
    margin-top: -12px;
    border-radius: 0;
  }

  .ukb-api-kv-grid--params .ukb-api-kv--desc {
    border-radius: 0;
    border-bottom: none;
    min-height: auto;
    padding-bottom: 4px;
    font-size: 13px;
    color: #020618;
    font-weight: 600;
  }

  .ukb-api-kv-grid--params .ukb-api-kv--param {
    margin-top: -12px;
    margin-bottom: 4px;
    border-radius: 0 0 12px 12px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .ukb-api-section__head--split {
    flex-direction: column;
    align-items: stretch;
  }

  .ukb-api-copy-code {
    justify-content: center;
    width: 100%;
  }

  .ukb-api-service-type {
    max-width: 100%;
  }

  .ukb-api-php-link {
    width: 100%;
    justify-content: center;
  }

  .ukb-api-code {
    padding: 20px 12px;
    font-size: 12px;
    line-height: 1.45;
  }
}

/* Drip Feed — extends orders table */
.ukb-orders-table--dripfeed {
  min-width: 1180px;
}

.ukb-orders-table--dripfeed th.ukb-orders-table__cell--runs,
.ukb-orders-table--dripfeed td.ukb-orders-table__cell--runs {
  width: 80px;
  min-width: 80px;
}

.ukb-orders-table--dripfeed th.ukb-orders-table__cell--interval,
.ukb-orders-table--dripfeed td.ukb-orders-table__cell--interval {
  width: 72px;
  min-width: 72px;
}

.ukb-orders-table--dripfeed th.ukb-orders-table__cell--total-qty,
.ukb-orders-table--dripfeed td.ukb-orders-table__cell--total-qty {
  width: 88px;
  min-width: 88px;
}

.ukb-dripfeed-panel .ukb-orders-filters {
  flex-wrap: wrap;
}

.ukb-dripfeed-cancel {
  display: inline-block;
  margin-top: 8px;
  border-radius: 8px !important;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.ukb-orders-table--dripfeed th.ukb-orders-table__cell--status,
.ukb-orders-table--dripfeed td.ukb-orders-table__cell--status {
  width: 108px;
  min-width: 108px;
  white-space: normal;
}

.ukb-orders-table--dripfeed .ukb-orders-status {
  display: inline-flex;
  width: auto;
  max-width: none;
  margin: 0 auto;
  padding: 6px 10px;
  white-space: nowrap;
  word-break: normal;
}

.ukb-orders-table--dripfeed .ukb-orders-status--inprogress {
  font-size: 12px;
}

/* Refunds — compact orders table */
.ukb-orders-table--refunds {
  min-width: 720px;
}

.ukb-refunds-panel .ukb-orders-filters {
  flex-wrap: wrap;
}

.ukb-refunds-alert {
  margin: 0 0 16px;
  border-radius: 12px;
  border: 1px solid rgba(0, 163, 181, 0.25);
  background: rgba(0, 163, 181, 0.08);
  color: var(--ukb-text, #1a1a1a);
  font-size: 14px;
  line-height: 1.45;
}

.ukb-refunds-alert .close {
  opacity: 0.55;
}

.ukb-refunds-order-link {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}

.ukb-refunds-order-link:hover {
  color: var(--ukb-teal, #00a3b5);
  text-decoration: underline;
}

.ukb-orders-table--refunds th.ukb-orders-table__cell--charge,
.ukb-orders-table--refunds td.ukb-orders-table__cell--charge {
  min-width: 100px;
}

.ukb-orders-table--refunds th.ukb-orders-table__cell--status,
.ukb-orders-table--refunds td.ukb-orders-table__cell--status {
  min-width: 120px;
}

/* Updates — extends orders table */
.ukb-orders-table--updates {
  min-width: 860px;
}

.ukb-updates-panel .ukb-orders-filters {
  flex-wrap: wrap;
}

.ukb-orders-table--updates th.ukb-orders-table__cell--updates-service,
.ukb-orders-table--updates td.ukb-orders-table__cell--updates-service {
  width: 340px;
  min-width: 220px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.ukb-orders-table--updates
  td.ukb-orders-table__cell--updates-service
  .ukb-orders-service {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.ukb-orders-table--updates th.ukb-orders-table__cell--update,
.ukb-orders-table--updates td.ukb-orders-table__cell--update {
  width: 300px;
  min-width: 220px;
  white-space: normal;
}

.ukb-updates-change {
  display: inline-block;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: rgba(107, 114, 128, 0.1);
  color: #4b5563;
}

.ukb-updates-change--new {
  background: rgba(0, 132, 255, 0.1);
  color: #0070d9;
}

.ukb-updates-change--decreased,
.ukb-updates-change--enabled {
  background: rgba(51, 175, 117, 0.12);
  color: #23875a;
}

.ukb-updates-change--increased {
  background: rgba(222, 112, 12, 0.12);
  color: #b85c08;
}

.ukb-updates-change--disabled {
  background: rgba(242, 69, 69, 0.1);
  color: #d63232;
}

@media (max-width: 768px) {
  .ukb-orders-table--updates {
    min-width: 680px;
  }

  .ukb-orders-table--updates th.ukb-orders-table__cell--updates-service,
  .ukb-orders-table--updates td.ukb-orders-table__cell--updates-service {
    width: 240px;
  }

  .ukb-orders-table--updates th.ukb-orders-table__cell--update,
  .ukb-orders-table--updates td.ukb-orders-table__cell--update {
    width: 240px;
  }

  .ukb-updates-change {
    font-size: 12px;
  }
}

/* Refill — extends orders table */
table.ukb-orders-table.ukb-orders-table--refill {
  width: 100% !important;
  min-width: 960px !important;
  table-layout: auto;
}

.ukb-refill-panel .ukb-orders-filters--refill {
  flex-wrap: wrap;
  gap: 8px;
}

.ukb-refill-order-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ukb-refill-order-link:hover {
  color: var(--ukb-teal, #00a3b5);
  text-decoration: underline;
}

.ukb-orders-table--refill th.ukb-orders-table__cell--order-id,
.ukb-orders-table--refill td.ukb-orders-table__cell--order-id {
  width: 108px;
  max-width: 108px;
  min-width: 88px;
  white-space: nowrap;
  padding-right: 8px;
}

.ukb-orders-table--refill th.ukb-orders-table__cell--link,
.ukb-orders-table--refill td.ukb-orders-table__cell--link {
  min-width: 140px;
  max-width: 220px;
}

.ukb-orders-table--refill th.ukb-orders-table__cell--service,
.ukb-orders-table--refill td.ukb-orders-table__cell--service {
  min-width: 160px;
  white-space: normal;
}

.ukb-orders-table--refill
  td.ukb-orders-table__cell--service
  .ukb-orders-service,
.ukb-orders-table--refill td.ukb-orders-table__cell--link .ukb-orders-link {
  max-width: 240px;
}

.ukb-orders-table--refill th.ukb-orders-table__cell--status,
.ukb-orders-table--refill td.ukb-orders-table__cell--status {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.ukb-orders-table--refill .ukb-orders-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  min-width: 0;
  margin: 0 auto;
  padding: 6px 10px;
  white-space: nowrap;
  word-break: normal;
  hyphens: none;
  font-size: 12px;
  line-height: 1.2;
}

.ukb-orders-status--rejected {
  background: #e11d48;
}

.ukb-orders-status--error {
  background: #b45309;
}

/* Dashboard */
.ukb-dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.ukb-dashboard-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

.ukb-welcome--dashboard {
  min-height: 268px;
  border-radius: 24px;
}

.ukb-welcome__copy--dashboard .ukb-welcome__title {
  margin-bottom: 32px;
}

.ukb-welcome__copy--dashboard .ukb-welcome__user {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.ukb-welcome__copy--dashboard .ukb-welcome__user span {
  font-size: 18px;
}

.ukb-welcome__art--dashboard {
  position: absolute;
  right: 24px;
  bottom: 0;
  width: min(249px, 42%);
  height: auto;
  max-height: 140px;
  object-fit: contain;
  pointer-events: none;
}

/* Dashboard top row: hide character when welcome shares a row with stats (<1400px desktop); keep on tablet/mobile */
@media (min-width: 993px) and (max-width: 1399px) {
  .ukb-welcome--dashboard .ukb-welcome__art--character {
    display: none;
  }

  .ukb-welcome--dashboard .ukb-welcome__copy--dashboard {
    max-width: none;
  }
}

@media (min-width: 1400px) and (max-width: 1600px) {
  .ukb-welcome--dashboard .ukb-welcome__art--character {
    width: 142px;
    height: 200px;
    max-height: 200px;
    object-fit: contain;
    right: 4px;
    object-position: bottom right;
  }
}

@media (min-width: 1601px) {
  .ukb-welcome--dashboard .ukb-welcome__art--character {
    width: 178px;
    height: 250px;
    right: 34px;
    max-height: 250px;
    object-fit: contain;
    object-position: bottom right;
  }
}

.ukb-stats--dashboard {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: stretch;
  height: 100%;
  min-height: 268px;
}

.ukb-stat--dashboard {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 24px;
  border-radius: 20px;
  min-height: 0;
}

.ukb-stat--dashboard .ukb-stat__top {
  margin-bottom: 20px;
  align-items: flex-start;
  gap: 12px;
}

.ukb-stat--dashboard .ukb-stat__label {
  font-size: 15px;
  letter-spacing: -0.48px;
  line-height: 1.35;
  white-space: normal;
}

.ukb-stat__icon--dashboard {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(33, 186, 203, 0.28);
  flex-shrink: 0;
}

.ukb-stat__icon--dashboard img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ukb-stat--dashboard .ukb-stat__bottom {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-width: 0;
  width: 100%;
}

.ukb-stat--dashboard .ukb-stat__value {
  flex: 0 0 auto;
  min-width: auto;
  overflow: visible;
  text-overflow: clip;
  font-size: 19px;
  letter-spacing: -0.44px;
  white-space: nowrap;
}

.ukb-stat--dashboard .ukb-stat__spark,
.ukb-stat--dashboard .ukb-stat__chart {
  width: 76px;
  max-width: none;
  min-width: 76px;
  flex: 0 0 auto;
  margin-left: auto;
  object-fit: contain;
  aspect-ratio: 165 / 30;
  height: auto;
  display: block;
}

.ukb-dashboard-progress {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
}

.ukb-dashboard-progress__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.ukb-dashboard-progress__level {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ukb-dashboard-progress__badge {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.ukb-dashboard-progress__label {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #666d80;
}

.ukb-dashboard-progress__name {
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #000;
}

.ukb-dashboard-progress__next {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #666d80;
}

.ukb-dashboard-progress__next > img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
  filter: brightness(0);
  opacity: 0.45;
}

.ukb-dashboard-progress__next-level {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #000;
}

.ukb-dashboard-progress__next-level img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ukb-dashboard-progress__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666d80;
}

.ukb-dashboard-progress__meta p {
  margin: 0;
}

.ukb-dashboard-progress__bar {
  position: relative;
  height: 36px;
  border-radius: 99px;
  background: #e8edf2;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
}

.ukb-dashboard-progress__fill {
  position: relative;
  z-index: 1;
  height: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 99px;
  background: var(--ukb-button-grad);
  overflow: hidden;
  box-sizing: border-box;
  width: 0;
  transition: none;
}

.ukb-dashboard-progress__bar.is-intro-animating .ukb-dashboard-progress__fill {
  transition: width 1.15s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}

.ukb-dashboard-progress__pill {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 4px;
  left: auto;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-height: calc(100% - 8px);
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  pointer-events: none;
  box-sizing: border-box;
}

.ukb-dashboard-progress__pill img {
  width: 24px;
  height: 14px;
  object-fit: contain;
  flex-shrink: 0;
}

.ukb-dashboard-progress__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  font-size: 14px;
  color: #666d80;
}

.ukb-dashboard-middle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.ukb-dashboard-middle:has(.ukb-dashboard-logins) {
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
}

.ukb-dashboard-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px 24px;
  min-width: 0;
}

.ukb-dashboard-card.ukb-dashboard-status {
  border: 0.5px solid rgba(33, 186, 203, 0.4);
  border-radius: 28px;
  padding: 28px 20px 24px;
  min-height: 493px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ukb-dashboard-status__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.ukb-dashboard-status__user {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.ukb-dashboard-status__user > div:not(.ukb-dashboard-status__avatar-wrap) {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.ukb-dashboard-status__avatar-wrap {
  flex-shrink: 0;
}

.ukb-dashboard-status__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 0;
}

.ukb-dashboard-status__name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ukb-dashboard-status__name-row h3 {
  margin: 0;
  font-family: Inter, Manrope, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  background: linear-gradient(126deg, #1a8b56 12%, #0c633a 97%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ukb-dashboard-status__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 12px;
  border-radius: 8px;
  background: linear-gradient(180deg, #ff8b4d 0%, #b03b18 100%);
  color: #fff;
  font-family: Monda, Manrope, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  box-shadow: inset 0 4px 4px rgba(255, 255, 255, 0.12);
}

.ukb-dashboard-status__spent {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #3c3c3c;
}

.ukb-dashboard-status__badge {
  width: 42px;
  height: 44px;
  object-fit: contain;
  flex-shrink: 0;
}

.ukb-dashboard-status-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid #21bacb;
  border-radius: 14px;
  background: #fff;
}

.ukb-dashboard-status-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.ukb-dashboard-status-table col.ukb-dashboard-status-table__col-status {
  width: 32%;
}

.ukb-dashboard-status-table col.ukb-dashboard-status-table__col-spend {
  width: 22%;
}

.ukb-dashboard-status-table col.ukb-dashboard-status-table__col-discount {
  width: 26%;
}

.ukb-dashboard-status-table col.ukb-dashboard-status-table__col-support {
  width: 20%;
}

.ukb-dashboard-status-table thead tr {
  background: radial-gradient(
    ellipse 120% 180% at 50% 0%,
    #21bacb 0%,
    #17919f 50%,
    #0d6872 100%
  );
}

.ukb-dashboard-status-table thead th {
  padding: 12px 14px;
  background: transparent;
  font-family: Inter, Manrope, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  text-align: left;
  border: 0;
}

.ukb-dashboard-status-table tbody td {
  padding: 16px 14px;
  border-bottom: 0;
  font-family: Inter, Manrope, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #3c3c3c;
  vertical-align: middle;
  background: #fff;
}

.ukb-dashboard-status-table tbody tr:first-child td {
  border-top: 12px solid #fff;
}

.ukb-dashboard-status-table tbody tr.ukb-dashboard-status-table__row--dash td {
  border-bottom: 1px dashed #404a60;
}

.ukb-dashboard-status-table__support {
  width: 20%;
}

.ukb-dashboard-status-table__support img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ukb-dashboard-status-table tbody tr.is-current td {
  background: rgba(33, 186, 203, 0.4);
}

.ukb-dashboard-status-table tbody tr.is-current td:first-child {
  box-shadow: inset 6px 0 0 0 var(--ukb-teal-dark);
}

.ukb-dashboard-card.ukb-dashboard-logins {
  padding: 24px;
  border: 1px solid rgba(33, 186, 203, 0.4);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ukb-dashboard-logins__title {
  margin: 0;
  display: flex;
  align-items: center;
  min-height: 72px;
  padding: 8px 24px;
  font-family:
    "Bricolage Grotesque",
    Hanken Grotesk,
    sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background: radial-gradient(
    ellipse 120% 180% at 50% 0%,
    #21bacb 0%,
    #17919f 50%,
    #0d6872 100%
  );
  border-radius: 12px;
}

.ukb-dashboard-logins__lead {
  margin: 0;
  font-family: Inter, Manrope, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #3c3c3c;
}

.ukb-dashboard-logins__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-radius: 12px;
}

.ukb-dashboard-login {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed #21bacb;
}

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

.ukb-dashboard-login__ip {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #3c3c3c;
}

.ukb-dashboard-login__country {
  margin: 0;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: #3c3c3c;
}

.ukb-dashboard-login__date {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  background: linear-gradient(90deg, #21bacb 0%, #0d6872 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ukb-dashboard-login__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 116px;
  flex-shrink: 0;
  text-align: left;
}

.ukb-dashboard-login__side a {
  color: rgba(243, 85, 85, 0.86);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}

.ukb-dashboard-login__side a:hover {
  text-decoration: underline;
}

.ukb-dashboard-levels__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ukb-dashboard-levels__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 14px;
  padding-bottom: 4px;
}

.ukb-dashboard-levels__grid {
  --ukb-levels-row-h: 48px;
  display: grid;
  grid-template-columns: 268px repeat(5, minmax(200px, 1fr));
  grid-template-rows: auto repeat(8, minmax(var(--ukb-levels-row-h), auto));
  column-gap: 16px;
  row-gap: 0;
  min-width: min(100%, 1200px);
  align-items: stretch;
}

.ukb-dashboard-levels__features,
.ukb-dashboard-levels__col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / -1;
  gap: 0;
  box-sizing: border-box;
}

.ukb-dashboard-levels__features {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
}

.ukb-dashboard-levels__features-head {
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  align-self: stretch;
  margin: 0;
  padding: 8px 16px;
  border-radius: 12px;
  background: radial-gradient(
    ellipse 120% 180% at 50% 0%,
    #21bacb 0%,
    #17919f 50%,
    #0d6872 100%
  );
}

.ukb-dashboard-levels__features-head-label {
  font-family:
    "Bricolage Grotesque",
    Hanken Grotesk,
    sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
}

.ukb-dashboard-levels__features-head-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
  box-sizing: border-box;
}

.ukb-dashboard-levels__feature-list,
.ukb-dashboard-levels__checks {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ukb-dashboard-levels__feature-list li {
  display: flex;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  min-height: var(--ukb-levels-row-h);
  height: 100%;
  padding: 6px 0;
  border-bottom: 1px solid rgba(199, 199, 199, 0.35);
  font-size: 14px;
  line-height: 1.35;
}

.ukb-dashboard-levels__feature-list li:nth-child(1) {
  grid-row: 2;
}
.ukb-dashboard-levels__feature-list li:nth-child(2) {
  grid-row: 3;
}
.ukb-dashboard-levels__feature-list li:nth-child(3) {
  grid-row: 4;
}
.ukb-dashboard-levels__feature-list li:nth-child(4) {
  grid-row: 5;
}
.ukb-dashboard-levels__feature-list li:nth-child(5) {
  grid-row: 6;
}
.ukb-dashboard-levels__feature-list li:nth-child(6) {
  grid-row: 7;
}
.ukb-dashboard-levels__feature-list li:nth-child(7) {
  grid-row: 8;
}
.ukb-dashboard-levels__feature-list li:nth-child(8) {
  grid-row: 9;
}

.ukb-dashboard-levels__col {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  min-width: 0;
  border: 2px solid transparent;
}

.ukb-dashboard-levels__col.is-current {
  margin-top: 0;
  padding: 20px;
  border-color: var(--ukb-teal);
  box-shadow: 0 0 0 1px rgba(33, 186, 203, 0.2);
}

.ukb-dashboard-levels__current-badge {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  padding: 6px 14px;
  border-radius: 99px;
  background: var(--ukb-button-grad);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ukb-dashboard-levels__checks img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.ukb-dashboard-levels__col-head {
  grid-row: 1;
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 8px 8px 8px;
  border-bottom: 1px solid rgba(199, 199, 199, 0.35);
  overflow: hidden;
}

.ukb-dashboard-levels__col-head-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

.ukb-dashboard-levels__col-badge-wrap {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin: 0;
  padding: 2px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid rgba(199, 199, 199, 0.55);
  border-radius: 12px;
}

.ukb-dashboard-levels__col-badge {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 31px;
  max-height: 31px;
  object-fit: contain;
}

.ukb-dashboard-levels__col-name {
  margin: 0 0 6px;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}

.ukb-dashboard-levels__col-range {
  margin: 0 0 6px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ukb-teal, #21bacb);
}

.ukb-dashboard-levels__col-bonus {
  margin: 0;
  font-size: 12px;
  line-height: 1.2;
  color: #666d80;
  white-space: nowrap;
}

.ukb-dashboard-levels__checks li {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  box-sizing: border-box;
  min-height: var(--ukb-levels-row-h);
  height: 100%;
  padding: 6px 0;
  border-bottom: 1px solid rgba(199, 199, 199, 0.35);
}

.ukb-dashboard-levels__checks li:nth-child(1) {
  grid-row: 2;
}
.ukb-dashboard-levels__checks li:nth-child(2) {
  grid-row: 3;
}
.ukb-dashboard-levels__checks li:nth-child(3) {
  grid-row: 4;
}
.ukb-dashboard-levels__checks li:nth-child(4) {
  grid-row: 5;
}
.ukb-dashboard-levels__checks li:nth-child(5) {
  grid-row: 6;
}
.ukb-dashboard-levels__checks li:nth-child(6) {
  grid-row: 7;
}
.ukb-dashboard-levels__checks li:nth-child(7) {
  grid-row: 8;
}
.ukb-dashboard-levels__checks li:nth-child(8) {
  grid-row: 9;
}

.ukb-dashboard-levels__mobile-benefits {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 1400px) {
  .ukb-dashboard-levels__grid {
    grid-template-columns: 220px repeat(5, minmax(168px, 1fr));
    column-gap: 12px;
    --ukb-levels-row-h: 44px;
  }

  .ukb-dashboard-levels__features {
    padding: 14px 12px;
  }

  .ukb-dashboard-levels__col,
  .ukb-dashboard-levels__col.is-current {
    padding: 14px 12px;
  }

  .ukb-dashboard-levels__features-head-label {
    font-size: 17px;
  }

  .ukb-dashboard-levels__feature-list li {
    font-size: 13px;
    line-height: 1.3;
  }

  .ukb-dashboard-levels__col-head {
    padding: 6px 34px 6px 4px;
    overflow: visible;
  }

  .ukb-dashboard-levels__col-badge-wrap {
    width: 32px;
    height: 32px;
    border-radius: 10px;
  }

  .ukb-dashboard-levels__col-badge {
    max-width: 28px;
    max-height: 28px;
  }

  .ukb-dashboard-levels__col-head-copy {
    width: 100%;
    max-width: 100%;
  }

  .ukb-dashboard-levels__col-name {
    font-size: 14px;
    margin-bottom: 4px;
  }

  .ukb-dashboard-levels__col-range {
    font-size: 15px;
    margin-bottom: 4px;
    line-height: 1.15;
  }

  .ukb-dashboard-levels__col-bonus {
    font-size: 10px;
    line-height: 1.2;
  }
}

@media (max-width: 1600px) {
  .ukb-dashboard-top {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }

  .ukb-welcome__copy--dashboard .ukb-welcome__title {
    font-size: 22px;
    letter-spacing: -0.44px;
    line-height: 1.35;
    margin-bottom: 24px;
  }

  .ukb-welcome__copy--dashboard .ukb-welcome__user,
  .ukb-welcome__copy--dashboard .ukb-welcome__user span {
    font-size: 15px;
  }

  .ukb-stat--dashboard {
    padding: 16px 18px;
  }

  .ukb-stat--dashboard .ukb-stat__top {
    margin-bottom: 14px;
  }

  .ukb-stat--dashboard .ukb-stat__label {
    font-size: 14px;
    letter-spacing: -0.42px;
  }

  .ukb-stat--dashboard .ukb-stat__value {
    font-size: clamp(16px, 1.45vw, 20px);
    letter-spacing: -0.4px;
  }

  .ukb-stat--dashboard .ukb-stat__spark,
  .ukb-stat--dashboard .ukb-stat__chart {
    width: 68px;
    min-width: 68px;
  }
}

@media (max-width: 1280px) {
  .ukb-dashboard-middle {
    grid-template-columns: 1fr;
  }

  .ukb-dashboard-card.ukb-dashboard-status {
    min-height: 0;
  }

  .ukb-stats--dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    min-height: 0;
  }

  .ukb-dashboard-levels__grid {
    grid-template-columns: 220px repeat(5, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .ukb-dashboard-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ukb-welcome--dashboard {
    min-height: 0;
    padding-bottom: 24px;
  }

  .ukb-welcome__copy--dashboard .ukb-welcome__title {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .ukb-dashboard-middle {
    gap: 16px;
  }

  .ukb-dashboard-card.ukb-dashboard-status {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .ukb-dashboard-card.ukb-dashboard-logins {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .ukb-dashboard-status__head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .ukb-dashboard-status__badge {
    width: 36px;
    height: 36px;
  }

  .ukb-dashboard-status-table thead th {
    padding: 10px 8px;
    font-size: 15px;
  }

  .ukb-dashboard-status-table tbody td {
    padding: 12px 8px;
    font-size: 13px;
  }

  .ukb-dashboard-status-table tbody tr:first-child td {
    border-top-width: 8px;
  }

  .ukb-dashboard-status-table__support img {
    width: 20px;
    height: 20px;
  }

  .ukb-dashboard-logins__title {
    min-height: 56px;
    padding: 8px 16px;
    font-size: 18px;
  }

  .ukb-dashboard-progress {
    padding: 16px;
  }

  .ukb-dashboard-progress__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
  }

  .ukb-dashboard-progress__next {
    flex-wrap: wrap;
    font-size: 14px;
  }

  .ukb-dashboard-progress__name {
    font-size: 20px;
  }

  .ukb-dashboard-progress__bar {
    height: 32px;
  }

  .ukb-dashboard-progress__pill {
    font-size: 12px;
    padding: 3px 8px;
  }

  .ukb-dashboard-progress__meta {
    flex-wrap: wrap;
    font-size: 13px;
  }

  .ukb-dashboard-levels__scroll {
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .ukb-dashboard-levels__grid {
    grid-template-columns: minmax(168px, 200px) repeat(5, minmax(148px, 1fr));
    column-gap: 12px;
    min-width: 0;
  }

  .ukb-dashboard-levels__features {
    position: sticky;
    left: 0;
    z-index: 2;
    padding: 16px;
    box-shadow: 6px 0 16px rgba(0, 0, 0, 0.06);
  }

  .ukb-dashboard-levels__features-head {
    padding: 8px 12px;
  }

  .ukb-dashboard-levels__features-head-label {
    font-size: 18px;
  }

  .ukb-dashboard-levels__col {
    padding: 16px 12px;
  }

  .ukb-dashboard-levels__col.is-current {
    padding: 16px 12px;
  }
}

/* Phone: stacked tier cards (desktop/tablet horizontal grid unchanged above 767px) */
@media (max-width: 767px) {
  .ukb-dashboard-levels__scroll {
    overflow-x: visible;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 0 8px;
  }

  .ukb-dashboard-levels__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
    grid-template-columns: unset;
    grid-template-rows: unset;
  }

  .ukb-dashboard-levels__features {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
    grid-row: auto;
    width: 100%;
    max-width: none;
    padding: 16px;
    box-shadow: none;
    position: static;
  }

  .ukb-dashboard-levels__feature-list {
    display: none;
  }

  .ukb-dashboard-levels__features-head {
    margin-bottom: 0;
    min-height: 56px;
  }

  .ukb-dashboard-levels__col {
    display: flex;
    flex-direction: column;
    grid-template-rows: unset;
    grid-row: auto;
    width: 100%;
    max-width: none;
  }

  .ukb-dashboard-levels__checks {
    display: none;
  }

  .ukb-dashboard-levels__mobile-benefits {
    display: flex;
    flex-direction: column;
  }

  .ukb-dashboard-levels__mobile-benefits-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(199, 199, 199, 0.35);
    font-size: 13px;
    line-height: 1.35;
    color: #3c3c3c;
  }

  .ukb-dashboard-levels__mobile-benefits-row span {
    flex: 1;
    min-width: 0;
  }

  .ukb-dashboard-levels__mobile-benefits-row img {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    object-fit: contain;
  }

  .ukb-dashboard-levels__col {
    padding: 16px;
    box-shadow: none;
  }

  .ukb-dashboard-levels__col.is-current {
    padding: 24px 16px 16px;
  }

  .ukb-dashboard-levels__col-head {
    padding: 8px 40px 12px 4px;
    overflow: visible;
  }

  .ukb-dashboard-levels__col-name {
    font-size: 16px;
  }

  .ukb-dashboard-levels__col-range {
    font-size: 18px;
  }

  .ukb-dashboard-levels__col-bonus {
    font-size: 11px;
    white-space: normal;
  }

  .ukb-dashboard-levels__current-badge {
    font-size: 10px;
    padding: 5px 12px;
  }
}

@media (max-width: 576px) {
  .ukb-dashboard {
    gap: 16px;
  }

  .ukb-dashboard-card,
  .ukb-dashboard-progress {
    padding: 16px;
  }

  .ukb-dashboard-card.ukb-dashboard-status {
    padding: 16px 12px;
  }

  .ukb-dashboard-card.ukb-dashboard-logins {
    padding: 16px 12px;
  }

  .ukb-stat--dashboard {
    min-height: 0;
    padding: 16px;
  }

  .ukb-stat--dashboard .ukb-stat__value {
    font-size: 18px;
    white-space: normal;
  }

  .ukb-stat--dashboard .ukb-stat__spark,
  .ukb-stat--dashboard .ukb-stat__chart {
    width: 56px;
    min-width: 56px;
  }

  .ukb-dashboard-status__user {
    gap: 12px;
  }

  .ukb-dashboard-status__avatar {
    width: 52px;
    height: 52px;
  }

  .ukb-dashboard-status__name-row h3 {
    font-size: 16px;
  }

  .ukb-dashboard-status__pill {
    font-size: 14px;
    padding: 2px 10px;
  }

  .ukb-dashboard-status__spent {
    font-size: 13px;
  }

  .ukb-dashboard-status-table-wrap {
    border-radius: 12px;
    margin-left: -2px;
    margin-right: -2px;
  }

  .ukb-dashboard-status-table thead th {
    padding: 8px 6px;
    font-size: 13px;
    line-height: 1.35;
  }

  .ukb-dashboard-status-table tbody td {
    padding: 10px 6px;
    font-size: 12px;
  }

  .ukb-dashboard-status-table tbody tr:first-child td {
    border-top-width: 8px;
  }

  .ukb-dashboard-logins__lead {
    font-size: 13px;
    line-height: 1.5;
  }

  .ukb-dashboard-login {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 0;
  }

  .ukb-dashboard-login__side {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  .ukb-dashboard-login__side a {
    font-size: 13px;
    white-space: normal;
    text-align: right;
  }

  .ukb-dashboard-progress__level {
    gap: 12px;
  }

  .ukb-dashboard-progress__badge {
    width: 36px;
    height: 36px;
  }

  .ukb-dashboard-progress__bar {
    height: 28px;
  }

  .ukb-dashboard-progress__pill img {
    width: 20px;
    height: 12px;
  }

  .ukb-dashboard-levels__col {
    padding: 14px;
    border-radius: 16px;
  }

  .ukb-dashboard-levels__mobile-benefits-row {
    font-size: 12px;
    min-height: 40px;
    padding: 6px 0;
  }
}

@media (max-width: 400px) {
  .ukb-stats--dashboard {
    gap: 6px;
  }

  .ukb-stat--dashboard {
    padding: 14px;
  }

  .ukb-stat--dashboard .ukb-stat__label {
    font-size: 13px;
  }

  .ukb-dashboard-status__name-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ukb-dashboard-status-table col.ukb-dashboard-status-table__col-status {
    width: 30%;
  }

  .ukb-dashboard-status-table col.ukb-dashboard-status-table__col-spend {
    width: 22%;
  }

  .ukb-dashboard-status-table col.ukb-dashboard-status-table__col-discount {
    width: 24%;
  }

  .ukb-dashboard-status-table col.ukb-dashboard-status-table__col-support {
    width: 24%;
  }
}

/* Tickets */
.ukb-tickets-grid {
  gap: 30px;
  align-items: flex-start;
}

.ukb-tickets-form-card {
  flex: 1.34;
  min-width: 0;
}

.ukb-tickets-history {
  width: 38%;
  max-width: 611px;
  min-width: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: var(--ukb-radius);
  overflow: hidden;
}

.ukb-form-stack--tickets {
  gap: 16px;
}

.ukb-form-stack--tickets .form-group {
  margin-bottom: 0;
}

.ukb-form-stack--tickets .ukb-field .control-label,
.ukb-form-stack--tickets #ticket-fields .control-label,
.ukb-form-stack--tickets #ticket-subcategory-fields .control-label {
  margin-bottom: 8px;
  font-family: Inter, Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #181818;
}

.ukb-form-stack--tickets
  .form-control:not(.ukb-viewticket-reply__input):not(textarea),
.ukb-form-stack--tickets select.form-control,
.ukb-form-stack--tickets #ticket-fields .form-control:not(textarea),
.ukb-form-stack--tickets
  #ticket-subcategory-fields
  .form-control:not(textarea) {
  height: 56px !important;
  min-height: 56px !important;
  border: 1px solid #f2f2f2 !important;
  background-color: #eee !important;
  color: #404040 !important;
}

.ukb-form-stack--tickets select.form-control,
.ukb-form-stack--tickets #ticket-category-field,
.ukb-form-stack--tickets #ticket-fields select.form-control,
.ukb-form-stack--tickets #ticket-subcategory-fields select.form-control {
  height: 56px !important;
  appearance: none;
  -webkit-appearance: none;
  background-color: #eee !important;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23404040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 8px !important;
  padding-right: 44px !important;
}

.ukb-tickets-select {
  position: relative;
  width: 100%;
}

.ukb-tickets-select__caret {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 12px;
  height: 8px;
  transform: translateY(-50%);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23404040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.ukb-tickets-select select.form-control {
  width: 100%;
  padding-right: 44px !important;
  appearance: none;
  -webkit-appearance: none;
  background-image: none !important;
}

.ukb-form-stack--tickets .ukb-tickets-message.form-control,
.ukb-form-stack--tickets textarea.ukb-tickets-message {
  height: auto !important;
  min-height: 160px !important;
  resize: vertical;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  line-height: 1.5;
}

.ukb-tickets-dynamic-fields,
.ukb-form-stack--tickets #ticket-subcategory-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.ukb-tickets-dynamic-fields .form-group,
.ukb-form-stack--tickets #ticket-subcategory-fields .form-group {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ukb-tickets-dynamic-fields .control-label {
  display: block;
  margin: 0 0 8px;
  font-family: Inter, Outfit, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #181818;
}

.ukb-tickets-dynamic-fields .form-control {
  margin: 0;
}

.ukb-tickets-attach-field {
  margin-bottom: 0;
}

.ukb-tickets-uploader {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 0;
  border-radius: 16px;
  border: 1.5px dashed #d9edff;
  background: rgba(33, 186, 203, 0.1);
  box-sizing: border-box;
}

.ukb-tickets-uploader > .files-wrapper {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0;
  min-height: 56px;
}

.ukb-tickets-uploader > .files-wrapper:has(.files-item) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  min-height: 56px;
  padding: 10px 16px 10px 20px;
  box-sizing: border-box;
}

.ukb-tickets-uploader #uploader-button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: auto !important;
  gap: 8px;
  width: 100% !important;
  height: 56px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}

.ukb-tickets-uploader #uploader-button .paperclip,
.ukb-tickets-uploader #uploader-button a.paperclip {
  display: inline-flex !important;
  align-items: center;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  text-decoration: none !important;
}

.ukb-tickets-uploader #uploader-button .paperclip svg,
.ukb-tickets-uploader #uploader-button a.paperclip svg {
  display: block;
  width: 24px;
  height: 24px;
  color: #21bacb;
  fill: #21bacb;
}

.ukb-tickets-uploader > .files-wrapper:has(.files-item) #uploader-button {
  position: static;
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  margin-right: 4px !important;
  justify-content: flex-start !important;
}

.ukb-tickets-uploader > .files-wrapper:not(:has(.files-item)) #uploader-button {
  inset: 0;
  height: 100% !important;
  min-height: 56px;
}

.ukb-tickets-uploader .files-item {
  position: relative;
  z-index: 3;
  flex: 0 1 auto;
  max-width: 100%;
  margin: 0;
  padding: 4px 0;
  border-radius: 0;
  background: transparent;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ukb-tickets-uploader .files-label {
  margin: 0 !important;
  display: inline-block;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  vertical-align: middle;
  background: var(--ukb-button-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

.ukb-tickets-uploader .btn,
.ukb-tickets-uploader label,
.ukb-tickets-uploader a {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ukb-teal-dark) !important;
  text-decoration: none;
}

.ukb-tickets-uploader #uploader-button::before {
  display: none;
  content: none;
}

.ukb-tickets-uploader .btn::before,
.ukb-tickets-uploader label::before {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("../images/tickets/attach.svg") center / contain no-repeat;
}

.ukb-tickets-uploader:has(.files-item) {
  min-height: auto;
  padding-bottom: 4px;
}

/* Center loader inside attach dropzone (not viewport) */
.ukb-tickets-uploader
  > .files-wrapper:has(.files-loader):not(:has(.files-item)) {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 0;
}

.ukb-tickets-uploader
  > .files-wrapper:has(.files-loader):not(:has(.files-item))
  #uploader-button {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100% !important;
  height: 100% !important;
  min-height: 56px;
  opacity: 0;
  pointer-events: none;
}

.ukb-tickets-uploader
  > .files-wrapper:has(.files-loader):not(:has(.files-item))
  .files-loader {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5;
  margin: 0 !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
}

.ukb-tickets-uploader
  > .files-wrapper:has(.files-loader):not(:has(.files-item))
  #uploader-button
  .files-loader {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.ukb-tickets-uploader > .files-wrapper:has(.files-item):has(.files-loader) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
}

.ukb-tickets-uploader > .files-wrapper:has(.files-item) .files-loader {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  order: 2;
  align-self: center;
  margin: 0 !important;
}

.ukb-form-stack--tickets .ukb-submit {
  position: relative;
  z-index: 1;
}

.ukb-tickets-history__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 32px 32px;
}

.ukb-tickets-history__toolbar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ukb-tickets-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ukb-tickets-search__field {
  position: relative;
}

.ukb-tickets-search__icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 2;
}

.ukb-tickets-search__field .form-control {
  height: 48px !important;
  padding: 14px 20px 14px 48px !important;
  border: 1px solid #e6f3ff !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-size: 14px !important;
  color: #3c3c3c !important;
  box-shadow: none !important;
}

.ukb-tickets-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.ukb-tickets-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border: 0;
  border-radius: 8px;
  background: #e6f3ff;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: #181818;
  cursor: pointer;
}

.ukb-tickets-filter.is-active {
  background: var(--ukb-button-grad);
  color: #fff;
}

.ukb-tickets-history__list {
  --ukb-tickets-visible-rows: 6.5;
  --ukb-tickets-row-size: 80px;
  --ukb-tickets-row-gap: 16px;
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--ukb-tickets-row-gap);
  height: calc(
    (var(--ukb-tickets-row-size) * var(--ukb-tickets-visible-rows)) +
      (var(--ukb-tickets-row-gap) * (var(--ukb-tickets-visible-rows) - 1))
  );
  max-height: calc(
    (var(--ukb-tickets-row-size) * var(--ukb-tickets-visible-rows)) +
      (var(--ukb-tickets-row-gap) * (var(--ukb-tickets-visible-rows) - 1))
  );
  overflow-x: hidden;
  overflow-y: auto;
  flex-shrink: 0;
}

.ukb-tickets-history__item.is-hidden {
  display: none;
}

.ukb-tickets-history__item {
  flex: 0 0 auto;
  min-height: var(--ukb-tickets-row-size);
}

.ukb-tickets-history__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--ukb-tickets-row-size);
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: #eee;
  text-decoration: none !important;
  color: inherit;
  transition: background 0.15s ease;
}

.ukb-tickets-history__row:hover {
  background: #e4e4e4;
}

.ukb-tickets-history__row.is-unread {
  position: relative;
  z-index: 0;
  overflow: visible;
  background: #fff;
  border: 1px solid rgba(33, 186, 203, 0.28);
  box-shadow: 0 2px 8px rgba(24, 27, 37, 0.06);
}

.ukb-tickets-history__row.is-unread:hover {
  background: #fafafa;
}

.ukb-tickets-history__unread-label {
  position: absolute;
  top: 0;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: #ef4444;
  color: #fff;
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
  transform: translateY(-50%);
  white-space: nowrap;
}

.ukb-tickets-history__avatar {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ukb-tickets-history__avatar img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.65;
}

.ukb-tickets-history__copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ukb-tickets-history__title {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #181818;
}

.ukb-tickets-history__title.is-unread {
  color: #0d6872;
  font-weight: 700;
}

.ukb-tickets-history__meta {
  font-size: 12px;
  line-height: 1.5;
  color: #404040;
}

.ukb-tickets-history__subject {
  font-size: 12px;
  line-height: 1.4;
  color: #636363;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ukb-tickets-history__status {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 16px;
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-size: 10px;
  line-height: 1.5;
  text-transform: capitalize;
  white-space: nowrap;
}

.ukb-tickets-history__status--closed {
  background: #dedede;
  color: #636363;
}

.ukb-tickets-history__status--pending {
  background: #fc5523;
  color: #fff;
}

.ukb-tickets-history__status--answered {
  background: #e6f3ff;
  color: #181818;
}

.ukb-tickets-history__empty {
  margin: 0;
  padding: 24px 16px;
  text-align: center;
  font-size: 14px;
  color: #636363;
}

.ukb-tickets-pagination {
  margin-top: 12px;
  justify-content: center;
  width: 100%;
}

.ukb-tickets-page-note {
  margin-top: 24px;
}

.ukb-tickets-page-note .ukb-desc-box {
  background: #fff;
  border: 1px solid var(--ukb-border);
  border-radius: var(--ukb-radius);
  padding: 24px 32px;
}

@media (max-width: 1280px) {
  .ukb-tickets-history {
    width: 42%;
    max-width: none;
  }
}

@media (max-width: 992px) {
  .ukb-tickets-grid {
    flex-direction: column;
    gap: 24px;
  }

  .ukb-tickets-form-card,
  .ukb-tickets-history {
    width: 100%;
    max-width: none;
    flex: none;
  }

  .ukb-tickets-history__list {
    --ukb-tickets-visible-rows: 5;
    --ukb-tickets-row-size: 76px;
  }
}

@media (max-width: 576px) {
  .ukb-tickets-history__body,
  .ukb-tickets-form-card .ukb-card-body {
    padding: 20px 16px;
  }

  .ukb-form-stack--tickets {
    gap: 12px;
  }

  .ukb-tickets-dynamic-fields,
  .ukb-form-stack--tickets #ticket-subcategory-fields {
    gap: 12px;
  }

  .ukb-form-stack--tickets .ukb-field .control-label,
  .ukb-form-stack--tickets #ticket-fields .control-label,
  .ukb-form-stack--tickets #ticket-subcategory-fields .control-label,
  .ukb-tickets-dynamic-fields .control-label {
    margin-bottom: 6px;
    font-size: 16px;
  }

  .ukb-form-stack--tickets input.form-control:not(.ukb-viewticket-reply__input),
  .ukb-form-stack--tickets select.form-control,
  .ukb-form-stack--tickets #ticket-category-field,
  .ukb-tickets-select select.form-control,
  .ukb-form-stack--tickets #ticket-fields input.form-control,
  .ukb-form-stack--tickets #ticket-fields select.form-control,
  .ukb-form-stack--tickets #ticket-subcategory,
  .ukb-form-stack--tickets #ticket-subcategory-fields input.form-control,
  .ukb-form-stack--tickets #ticket-subcategory-fields select.form-control {
    height: 48px !important;
    min-height: 48px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-size: 15px !important;
  }

  .ukb-form-stack--tickets .ukb-tickets-message.form-control {
    height: auto !important;
    min-height: 140px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    font-size: 15px !important;
  }

  .ukb-viewticket-reply__compose .ukb-viewticket-reply__input.form-control {
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    font-size: 16px !important;
  }

  .ukb-tickets-filters {
    gap: 8px;
  }

  .ukb-tickets-filter {
    padding: 6px 12px;
  }

  .ukb-tickets-history__row {
    padding: 10px 12px;
    gap: 10px;
  }

  .ukb-tickets-history__status {
    font-size: 9px;
    padding: 3px 6px;
  }
}

/* View ticket */
.ukb-viewticket-back {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 0;
  text-decoration: none !important;
  color: #000;
}

.ukb-viewticket-back__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ukb-button-grad);
}

.ukb-viewticket-back__icon img {
  display: block;
  filter: brightness(0) invert(1);
}

.ukb-viewticket-back__label {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: #000;
}

.ukb-viewticket-grid {
  align-items: flex-start;
  margin-top: -12px;
  flex-wrap: wrap;
  container-type: inline-size;
  container-name: viewticket;
}

.ukb-viewticket-main {
  flex: 1.34;
  min-width: 0;
}

.ukb-viewticket-card {
  background: #fff;
  border: 0.5px solid #b0d9ff;
  border-radius: 28px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ukb-viewticket-thread {
  display: flex;
  flex-direction: column;
  max-height: min(480px, 52vh);
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ukb-viewticket-thread::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.ukb-viewticket-thread__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: min-content;
}

.ukb-viewticket-msg {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  max-width: 100%;
}

.ukb-viewticket-msg--user {
  justify-content: flex-end;
}

.ukb-viewticket-msg__avatar {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}

.ukb-viewticket-msg__avatar--support {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ukb-button-grad);
}

.ukb-viewticket-msg__avatar--support img {
  width: 28px;
  height: 28px;
  filter: brightness(0) invert(1);
}

.ukb-viewticket-msg__avatar--user {
  border: 1px solid #0084ff;
}

.ukb-viewticket-msg__avatar--user img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ukb-viewticket-msg__content {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(500px, 100%);
}

.ukb-viewticket-msg--user .ukb-viewticket-msg__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.ukb-viewticket-msg__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.ukb-viewticket-msg__meta--user {
  justify-content: flex-end;
}

.ukb-viewticket-msg__author {
  font-family: Outfit, "Hanken Grotesk", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.ukb-viewticket-msg__time {
  font-family: Outfit, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #404040;
}

.ukb-viewticket-msg__bubble {
  padding: 20px;
  border-radius: 12px;
  font-family: Geist, Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #3c3c3c;
  width: 100%;
  box-sizing: border-box;
}

.ukb-viewticket-msg__bubble--support {
  background: #eee;
  border: 0.2px solid #f2f2f2;
}

.ukb-viewticket-msg__bubble--user {
  background: #d9edff;
  border: 1px solid #b0d9ff;
}

.ukb-viewticket-msg__text {
  white-space: pre-wrap;
  word-break: break-word;
}

.ukb-viewticket-msg__files {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.ukb-viewticket-msg__files a {
  color: var(--ukb-teal-dark);
  font-size: 14px;
}

.ukb-viewticket-reply {
  gap: 20px;
}

.ukb-viewticket-reply__compose {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  min-height: 220px;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid #b0d9ff;
  background: #f5feff;
  box-sizing: border-box;
}

.ukb-viewticket-reply__compose .ukb-viewticket-reply__input.form-control {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0 !important;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  resize: none;
  font-size: 16px !important;
  color: #3c3c3c !important;
  box-sizing: border-box;
}

.ukb-viewticket-reply__compose .ukb-viewticket-reply__input.form-control:focus {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

.ukb-viewticket-reply__attach {
  flex: 0 0 auto;
  width: 100%;
  text-align: left;
}

.ukb-viewticket-reply__compose .ukb-viewticket-reply__input::placeholder {
  background: var(--ukb-button-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 1;
}

.ukb-viewticket-reply__attach .ukb-tickets-uploader {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.ukb-viewticket-reply__attach .ukb-tickets-uploader > .files-wrapper {
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px 12px;
}

.ukb-viewticket-reply__attach
  .ukb-tickets-uploader
  > .files-wrapper:has(.files-item) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  align-content: flex-start;
  min-height: 0;
  padding: 0;
  width: 100%;
}

.ukb-viewticket-reply__attach
  .ukb-tickets-uploader
  > .files-wrapper:has(.files-item)
  #uploader-button {
  margin-right: 0 !important;
  order: 0;
}

.ukb-viewticket-reply__attach .ukb-tickets-uploader .files-item {
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0 !important;
  text-align: left;
  order: 1;
}

.ukb-viewticket-reply__attach .ukb-tickets-uploader #uploader-button,
.ukb-viewticket-reply__attach
  .ukb-tickets-uploader
  > .files-wrapper:not(:has(.files-item))
  #uploader-button {
  position: static;
  inset: auto;
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  min-height: 0;
  justify-content: flex-start !important;
  align-self: flex-start !important;
}

.ukb-viewticket-reply__attach
  .ukb-tickets-uploader
  > .files-wrapper
  .files-loader {
  position: static !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  align-self: flex-start;
  order: 2;
}

.ukb-viewticket-aside {
  width: 38%;
  max-width: 611px;
  min-width: 0;
  flex-shrink: 0;
  align-self: flex-start;
}

.ukb-viewticket-details {
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: #fff;
  border-radius: 24px;
  padding: 32px;
}

.ukb-viewticket-details__title {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #2c3545;
}

.ukb-viewticket-details__list {
  margin: 0;
  padding: 14px 20px;
  border-radius: 12px;
  border: 0.5px solid #21bacb;
  background: #f8fafc;
}

.ukb-viewticket-details__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 0.5px solid #575757;
}

.ukb-viewticket-details__row--last {
  border-bottom: 0;
  padding-bottom: 0;
}

.ukb-viewticket-details__row dt {
  margin: 0;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: #020618;
  flex-shrink: 0;
}

.ukb-viewticket-details__row dd {
  margin: 0;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  word-break: break-word;
}

.ukb-viewticket-details__subject {
  max-width: 60%;
}

@container viewticket (max-width: 1320px) {
  .ukb-viewticket-main,
  .ukb-viewticket-aside {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .ukb-viewticket-details__subject {
    max-width: none;
  }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1440px) {
    .ukb-viewticket-grid {
      flex-direction: column;
      gap: 24px;
    }

    .ukb-viewticket-main,
    .ukb-viewticket-aside {
      width: 100%;
      max-width: none;
      flex: none;
    }

    .ukb-viewticket-details__subject {
      max-width: none;
    }
  }
}

.ukb-viewticket-notice {
  margin: 0;
  padding: 20px 24px;
  border-radius: 16px;
  background: #fff5f5;
  border: 1px solid #ffd4d4;
}

.ukb-viewticket-notice__title {
  margin: 0 0 8px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #b42318;
}

.ukb-viewticket-notice__text {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #7a271a;
}

@media (max-width: 992px) {
  .ukb-viewticket-back__label {
    font-size: 20px;
  }
}

@media (max-width: 576px) {
  .ukb-viewticket-card {
    padding: 16px;
    border-radius: 20px;
    gap: 20px;
  }

  .ukb-viewticket-thread {
    max-height: min(360px, 45vh);
    min-height: 0;
  }

  .ukb-viewticket-msg {
    gap: 10px;
  }

  .ukb-viewticket-msg__avatar {
    width: 44px;
    height: 44px;
  }

  .ukb-viewticket-msg__content {
    max-width: calc(100% - 54px);
  }

  .ukb-viewticket-msg__bubble {
    padding: 14px;
    font-size: 15px;
  }

  .ukb-viewticket-details {
    padding: 20px 16px;
    gap: 20px;
  }

  .ukb-viewticket-reply__compose {
    min-height: 200px;
    padding: 16px;
  }
}

/* ——— Account page ——— */
.ukb-account-page {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.ukb-welcome--account {
  min-height: 205px;
  border-radius: 24px;
}

.ukb-account-tabs-wrap {
  align-self: flex-start;
  max-width: 100%;
  background: #fff;
  border: 1px solid rgba(33, 186, 203, 0.5);
  border-radius: 20px;
  padding: 20px;
}

.ukb-account-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ukb-account-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #f3f3f3;
  color: #020618;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.ukb-account-tab:hover,
.ukb-account-tab:focus-visible {
  color: #020618;
  background: #e8e8e8;
  text-decoration: none;
}

.ukb-account-tab.is-active,
.ukb-account-tab.is-active:hover,
.ukb-account-tab.is-active:focus-visible {
  background: var(--ukb-teal);
  color: #fff;
  text-decoration: none;
}

.ukb-account-tab--link.is-active {
  background: #f3f3f3;
  color: #020618;
}

.ukb-account-alerts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

.ukb-account-alerts[hidden] {
  display: none !important;
}

.ukb-account-alerts .alert {
  display: block;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  text-align: start;
}

.ukb-account-card {
  background: #fff;
  border-radius: 30px;
  padding: 32px;
  width: 100%;
}

.ukb-account-panel.is-hidden {
  display: none;
}

.ukb-form-stack--account {
  gap: 30px;
}

.ukb-form-stack--account .ukb-field .control-label,
.ukb-form-stack--account .ukb-field label,
.ukb-account-field__label-static {
  margin-bottom: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: #181818;
}

.ukb-form-stack--account > .form-group > .form-control,
.ukb-form-stack--account > .ukb-account-field > .form-control,
.ukb-form-stack--account .ukb-account-select > .form-control,
.ukb-form-stack--account .ukb-account-textarea.form-control {
  height: 56px !important;
  border: 1px solid #f2f2f2 !important;
  border-radius: 12px !important;
  background: #f7f8f9 !important;
  color: #404040 !important;
  font-family: Inter, sans-serif;
  font-size: 16px;
  box-shadow: none !important;
}

.ukb-account-avatar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 30px;
}

.ukb-account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 120px;
  border: 1.5px solid var(--ukb-teal);
  border-radius: 19.5px;
  background: #fff;
  flex-shrink: 0;
}

.ukb-account-avatar__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 17px;
}

.ukb-account-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--ukb-teal);
  border-radius: 7px;
  background: transparent;
  background-image: none;
  font-family: Archivo, sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ukb-teal);
  cursor: pointer;
  opacity: 0.85;
}

.ukb-account-upload-btn::before,
.ukb-account-upload-btn::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

.ukb-account-upload-btn:hover,
.ukb-account-upload-btn:focus,
.ukb-account-upload-btn:focus-visible,
.ukb-account-upload-btn:active {
  border-color: var(--ukb-teal);
  background: transparent;
  background-image: none;
  color: var(--ukb-teal);
  opacity: 1;
  box-shadow: none;
}

.ukb-account-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
}

.ukb-account-input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid #f2f2f2;
  border-radius: 12px;
  background: #f7f8f9;
}

.ukb-account-input--static {
  justify-content: space-between;
}

.ukb-account-input--api-key {
  padding-right: 12px;
}

.ukb-account-api-key-copy {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--ukb-button-grad);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(13, 104, 114, 0.2);
}

.ukb-account-api-key-copy img {
  display: block;
  width: 18px;
  height: 18px;
  filter: brightness(0) invert(1);
}

.ukb-account-api-key-copy__tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: #181818;
  color: #fff;
  font-family: Geist, Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s ease,
    visibility 0.15s ease;
  z-index: 5;
}

.ukb-account-api-key-copy.is-copied .ukb-account-api-key-copy__tooltip {
  opacity: 1;
  visibility: visible;
}

.ukb-account-api-key-copy:hover,
.ukb-account-api-key-copy:focus-visible {
  opacity: 0.92;
}

.ukb-account-api-key-copy:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ukb-account-input__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.ukb-account-input__icon img,
.ukb-account-input__svg {
  display: block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.ukb-account-input .form-control {
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ukb-account-input__value {
  flex: 1 1 auto;
  font-family: Inter, sans-serif;
  font-size: 16px;
  color: #404040;
}

.ukb-account-select {
  position: relative;
  overflow: visible;
  border-radius: 12px;
}

.ukb-account-select .form-control {
  appearance: none;
  padding-right: 48px !important;
  width: 100%;
}

.ukb-account-select .ukb-account-select__chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  overflow: visible;
  pointer-events: none;
  color: #404040;
  z-index: 2;
}

.ukb-account-select .ukb-account-select__chevron path {
  stroke-width: 2.25;
}

.ukb-account-input--static {
  position: relative;
}

.ukb-account-input--static .ukb-account-select__chevron {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.ukb-account-field__label-static {
  margin: 0 0 16px;
}

.ukb-account-textarea.form-control {
  height: auto !important;
  min-height: 120px;
  padding: 16px 18px !important;
  resize: vertical;
}

.ukb-account-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

.ukb-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px 48px;
  border-radius: 12px;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  border: 0;
}

.ukb-form-stack--account > .ukb-account-btn {
  width: auto;
  align-self: flex-start;
}

.ukb-account-btn--cancel {
  background: #eee;
  color: #404040;
}

.ukb-account-btn--save {
  min-width: 139px;
  background: var(--ukb-button-grad) !important;
  border: 0 !important;
  color: #fff !important;
  text-shadow: 0 1.35px 4px rgba(14, 35, 22, 0.2);
  box-shadow: none !important;
}

.ukb-account-btn--save:hover,
.ukb-account-btn--save:focus,
.ukb-account-btn--save:active {
  background: var(--ukb-button-grad) !important;
  color: #fff !important;
  opacity: 0.95;
}

.ukb-account-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
  width: 100%;
}

.ukb-account-password-grid__alerts {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  position: relative;
  z-index: 2;
}

.ukb-account-password-grid__alerts .alert {
  width: 100%;
  text-align: start;
}

.ukb-account-page .ukb-notifications-card > .alert.alert-success {
  text-align: start;
}

.ukb-account-card--split {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  min-height: 0;
}

.ukb-account-section-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ukb-account-section-head__title {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  color: #000;
}

.ukb-account-section-head__lead {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #aaa;
}

.ukb-account-password-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 100%;
}

.ukb-account-password-fields .form-group,
.ukb-account-password-fields .ukb-account-field {
  width: 100%;
  min-width: 0;
}

.ukb-account-password-form,
.ukb-account-email-form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  min-height: 0;
}

.ukb-account-input--password,
.ukb-account-input--email {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: 12px;
  padding: 0 16px;
  box-sizing: border-box;
}

.ukb-form-stack--account .ukb-account-input--password .form-control,
.ukb-form-stack--account .ukb-account-input--email .form-control {
  display: block !important;
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  height: 24px !important;
  min-height: 24px !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  color: #404040 !important;
  box-shadow: none !important;
  font-family: Inter, sans-serif !important;
}

.ukb-account-input--password .form-control::placeholder,
.ukb-account-input--email .form-control::placeholder {
  color: #404040;
  opacity: 1;
}

.ukb-account-input__icon--password img {
  width: 21px;
  height: 21px;
}

.ukb-account-password-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ukb-account-password-toggle__icon {
  display: block;
  width: 21px;
  height: 21px;
}

.ukb-account-password-toggle__icon.is-hidden {
  display: none;
}

@media (max-width: 1400px) {
  .ukb-account-page {
    gap: 24px;
  }

  .ukb-account-tabs-wrap {
    padding: 16px;
    border-radius: 16px;
  }

  .ukb-account-tab {
    padding: 8px 14px;
    font-size: 14px;
  }

  .ukb-account-card {
    padding: 24px 20px;
    border-radius: 24px;
  }

  .ukb-account-card--split {
    gap: 24px;
  }

  .ukb-form-stack--account {
    gap: 22px;
  }

  .ukb-form-stack--account .ukb-field .control-label,
  .ukb-form-stack--account .ukb-field label,
  .ukb-account-field__label-static {
    margin-bottom: 12px;
    font-size: 16px;
  }

  .ukb-form-stack--account > .form-group > .form-control,
  .ukb-form-stack--account > .ukb-account-field > .form-control,
  .ukb-form-stack--account .ukb-account-select > .form-control,
  .ukb-form-stack--account .ukb-account-textarea.form-control {
    height: 48px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
  }

  .ukb-account-section-head {
    gap: 6px;
  }

  .ukb-account-section-head__title {
    font-size: 18px;
  }

  .ukb-account-section-head__lead {
    font-size: 14px;
    line-height: 1.45;
  }

  .ukb-account-password-grid {
    gap: 20px;
  }

  .ukb-account-password-fields {
    gap: 12px;
  }

  .ukb-account-password-form,
  .ukb-account-email-form {
    gap: 24px;
  }

  .ukb-account-input {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 10px;
    gap: 10px;
  }

  .ukb-form-stack--account .ukb-account-input--password .form-control,
  .ukb-form-stack--account .ukb-account-input--email .form-control {
    height: 22px !important;
    min-height: 22px !important;
    font-size: 15px !important;
  }

  .ukb-account-input__icon--password img,
  .ukb-account-password-toggle__icon {
    width: 18px;
    height: 18px;
  }

  .ukb-account-input__icon img,
  .ukb-account-input__svg {
    width: 20px;
    height: 20px;
  }

  .ukb-account-password-toggle {
    width: 24px;
    height: 24px;
  }

  .ukb-account-btn {
    min-height: 48px;
    padding: 8px 32px;
    font-size: 16px;
    border-radius: 10px;
  }

  .ukb-account-btn--save {
    min-width: 120px;
  }

  .ukb-account-actions {
    gap: 12px;
  }

  .ukb-account-avatar {
    width: 100px;
    height: 100px;
    border-radius: 16px;
  }

  .ukb-account-avatar__img {
    border-radius: 14px;
  }

  .ukb-account-upload-btn {
    min-height: 36px;
    padding: 6px 14px;
    font-size: 14px;
  }

  .ukb-account-field-row {
    gap: 20px;
  }

  .ukb-account-textarea.form-control {
    min-height: 100px;
    font-size: 15px !important;
  }
}

@media (max-width: 992px) {
  .ukb-account-password-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.ukb-account-muted,
.ukb-account-help {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #666d80;
}

.ukb-account-help {
  margin: 20px 0 0 0;
}

.ukb-account-2fa-lead {
  margin: 0 0 8px;
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #181818;
}

/* ——— Toggle switch ——— */
.ukb-switch {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: 55px;
  height: 32px;
  margin: 0;
  cursor: pointer;
}

.ukb-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 1;
}

.ukb-switch__track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background: #e5e7eb;
  transition: background 0.2s ease;
}

.ukb-switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.ukb-switch__input:checked + .ukb-switch__track {
  background: radial-gradient(
    ellipse 140% 145% at 50% -30%,
    #21bacb 0%,
    #0d6872 100%
  );
}

.ukb-switch__input:checked + .ukb-switch__track::after {
  transform: translateX(23px);
}

.ukb-switch__input:focus-visible + .ukb-switch__track {
  outline: 2px solid rgba(33, 186, 203, 0.5);
  outline-offset: 2px;
}

.ukb-switch.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.rtl-content .ukb-switch__track::after {
  left: auto;
  right: 2px;
}

.rtl-content .ukb-switch__input:checked + .ukb-switch__track::after {
  transform: translateX(-23px);
}

/* ——— Notifications page ——— */
.ukb-notifications-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 50px 29px;
}

.ukb-notifications-card .alert.hidden {
  display: none !important;
}

.ukb-notifications-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ukb-notifications-table {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.ukb-notifications-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0;
  border-bottom: 0.5px solid #f2f2f2;
}

.ukb-notifications-row--head {
  padding: 0;
  border-bottom: 0;
  font-family: Outfit, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  color: #000;
}

.ukb-notifications-cell {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.ukb-notifications-cell--name {
  font-family: "Hanken Grotesk", Inter, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000;
  word-break: break-word;
}

@media (max-width: 1400px) {
  .ukb-notifications-card {
    padding: 36px 24px;
  }

  .ukb-notifications-row--head {
    font-size: 16px;
  }
}

@media (max-width: 992px) {
  .ukb-account-field-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .ukb-account-page {
    gap: 24px;
  }

  .ukb-account-tabs-wrap {
    align-self: stretch;
    padding: 16px;
    border-radius: 16px;
  }

  .ukb-account-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }

  .ukb-account-tabs > #ukb-account-tab-2fa {
    grid-column: 1 / -1;
  }

  .ukb-account-tab {
    width: 100%;
    min-width: 0;
    padding: 8px 14px;
    font-size: 14px;
    text-align: center;
  }

  .ukb-account-card {
    padding: 20px 16px;
    border-radius: 20px;
  }

  .ukb-welcome__art--character {
    width: 110px;
    height: 168px;
    max-width: none;
    right: 0;
    bottom: 0;
    object-fit: contain;
    object-position: bottom right;
  }

  .ukb-account-btn,
  .ukb-form-stack--account > .ukb-account-btn {
    width: 100%;
    align-self: stretch;
    padding-left: 24px;
    padding-right: 24px;
  }

  .ukb-account-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .ukb-notifications-card {
    padding: 24px 16px;
    gap: 20px;
  }

  .ukb-notifications-form {
    gap: 24px;
  }

  .ukb-notifications-table {
    gap: 4px;
  }

  .ukb-notifications-row {
    padding: 12px 0;
  }

  .ukb-notifications-row--head {
    padding: 0;
    font-size: 16px;
  }

  .ukb-notifications-cell--name {
    font-size: 15px;
  }
}

/* Dark theme — Figma New Order Page (node 468:35693). Colors only; no layout changes. */

html[data-ukb-theme="dark"] {
  color-scheme: dark;
  background-color: #040102 !important;
  --ukb-bg: #040102;
  --ukb-card: #181818;
  --ukb-text: #ffffff;
  --ukb-text-2: rgba(255, 255, 255, 0.92);
  --ukb-muted: #a0a0a0;
  --ukb-border: rgba(33, 186, 203, 0.5);
  --ukb-input: #282828;
  --ukb-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  --ukb-shell-surface: #040102;
  --ukb-topbar-bg: #0d0c10;
  --ukb-search-bg: #232529;
  --ukb-chip-bg: #232529;
  --ukb-chip-border: #21bacb;
  --ukb-notify-bg: #232529;
  --ukb-sidebar-surface: transparent;
  --ukb-sidebar-bg-grad: linear-gradient(
    180deg,
    #0d0c10 3.49%,
    #0d0c10 29.11%,
    #1895a3 103.68%
  );
  --ukb-sidebar-edge: #21bacb;
  --ukb-brand-divider: rgba(255, 255, 255, 0.5);
  --ukb-brand-text: #ffffff;
  --ukb-nav-hover-bg: rgba(255, 255, 255, 0.08);
  --ukb-nav-icon-bg: rgba(255, 255, 255, 0.2);
  --ukb-profile-card-grad: linear-gradient(
    132.53deg,
    rgba(165, 246, 255, 0.1) 0%,
    rgba(27, 158, 173, 0.1) 100%
  );
  --ukb-support-surface: #000000;
  --ukb-date-text: #ffffff;
  --ukb-kbd-bg: #ffffff;
  --ukb-topbar-shadow: none;
}

html[data-ukb-theme="dark"] body.ukb-body {
  background-color: #040102 !important;
  color: #ffffff;
}

html[data-ukb-theme="dark"] body.ukb-body.ukb-auth {
  background-color: #040102 !important;
}

html[data-ukb-theme="dark"] body.ukb-body.ukb-auth .ukb-shell {
  background-color: #040102 !important;
}

html[data-ukb-theme="dark"] body.ukb-body.ukb-auth .ukb-main {
  background-color: #040102 !important;
}

html[data-ukb-theme="dark"] .ukb-content-scroll {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

html[data-ukb-theme="dark"] .ukb-content-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
}

html[data-ukb-theme="dark"] .ukb-sidebar {
  background: transparent;
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.28);
}

html[data-ukb-theme="dark"] .ukb-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-right: 0;
  border-radius: 25px 0 0 0;
  background: var(--ukb-sidebar-bg-grad);
}

html[data-ukb-theme="dark"] .ukb-brand,
html[data-ukb-theme="dark"] .ukb-sidebar__body {
  background: transparent;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-sidebar__body {
  border-right: 1px solid #21bacb;
}

html[data-ukb-theme="dark"] .ukb-brand::after {
  background: var(--ukb-brand-divider);
}

html[data-ukb-theme="dark"] .ukb-profile {
  background: var(--ukb-profile-card-grad);
  border-color: #0b8da1;
}

html[data-ukb-theme="dark"] .ukb-profile__name {
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-ukb-theme="dark"] .ukb-nav-link {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-nav-link:hover {
  background: var(--ukb-nav-hover-bg);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-nav-link:not(.active) .ukb-nav-link__icon {
  background: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-nav-link.active .ukb-nav-link__icon {
  background: transparent;
}

html[data-ukb-theme="dark"]
  .ukb-nav-link
  .ukb-nav-link__icon-img:not(.ukb-nav-link__icon-img--native-white):not(
    .ukb-nav-link__icon-img--logout
  ) {
  filter: brightness(0) invert(1);
  opacity: 1;
}

html[data-ukb-theme="dark"] .ukb-nav-link .ukb-nav-link__icon-img--native-white,
html[data-ukb-theme="dark"] .ukb-nav-link .ukb-nav-link__icon-img--logout {
  filter: none;
  opacity: 1;
}

html[data-ukb-theme="dark"] .ukb-nav-link.active {
  background: var(--ukb-grad);
  border-color: rgba(252, 252, 252, 0.7);
  box-shadow:
    0 -1px 0 1px #3f6289,
    0 16px 24px -8px rgba(24, 27, 37, 0.1),
    inset 0 -2px 4px #0e121b,
    inset 0 2px 6px rgba(255, 255, 255, 0.2);
}

/* Expanded section header — same teal gradient as light theme (all accordion sections) */
html[data-ukb-theme="dark"]
  .ukb-nav-section:not(.is-collapsed)
  > .ukb-nav-section__title {
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-ukb-theme="dark"]
  .ukb-nav-section.is-collapsed
  > .ukb-nav-section__title {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-nav-section__title .caret-icon {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

html[data-ukb-theme="dark"] .ukb-support {
  position: relative;
  isolation: isolate;
  background-color: var(--ukb-support-surface);
  background-image: none;
  border-radius: 32px;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-support::before {
  content: "";
  position: absolute;
  left: -47px;
  top: -18px;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(33, 186, 203, 0.55) 0%,
    rgba(33, 186, 203, 0.15) 45%,
    transparent 72%
  );
  pointer-events: none;
  z-index: 0;
}

html[data-ukb-theme="dark"] .ukb-support__icon,
html[data-ukb-theme="dark"] .ukb-support__copy,
html[data-ukb-theme="dark"] .ukb-support__btn {
  position: relative;
  z-index: 1;
}

html[data-ukb-theme="dark"] .ukb-support__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-support__text {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-support__btn {
  background: var(--ukb-grad);
  box-shadow:
    0 2px 12px rgba(33, 186, 203, 0.28),
    0 1px 4px rgba(0, 0, 0, 0.45);
}

html[data-ukb-theme="dark"] .ukb-support__btn:hover {
  filter: brightness(1.14) saturate(1.12);
  box-shadow:
    0 10px 28px rgba(33, 186, 203, 0.58),
    0 0 0 1px rgba(33, 186, 203, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

html[data-ukb-theme="dark"] .ukb-support__btn:active {
  filter: brightness(0.94);
  box-shadow:
    0 2px 8px rgba(33, 186, 203, 0.22),
    0 1px 3px rgba(0, 0, 0, 0.4);
}

html[data-ukb-theme="dark"] .ukb-support__btn:focus-visible {
  outline-color: #5ee0ed;
}

@media (max-width: 992px) {
  html[data-ukb-theme="dark"] .ukb-sidebar {
    background: transparent;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.28);
  }

  html[data-ukb-theme="dark"] .ukb-sidebar::before {
    border-radius: 0 25px 25px 0;
    border-right: 0;
    border-left: 0;
  }
}

html[data-ukb-theme="dark"] .ukb-topbar__sep {
  background: rgba(255, 255, 255, 0.24);
}

html[data-ukb-theme="dark"] .ukb-topbar {
  background: var(--ukb-topbar-bg);
  box-shadow: var(--ukb-topbar-shadow);
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-search input {
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-search__kbd {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-search__kbd span {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-wallet {
  border-color: var(--ukb-chip-border);
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-theme-toggle {
  color: #ffffff;
  background: #232529;
  border-color: rgba(33, 186, 203, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

html[data-ukb-theme="dark"] .ukb-theme-toggle:hover {
  border-color: rgba(33, 186, 203, 0.55);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.2);
}

html[data-ukb-theme="dark"] .ukb-notify {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-nav-link .badge,
html[data-ukb-theme="dark"] .ukb-notify__badge {
  border-color: var(--ukb-sidebar-surface, var(--ukb-notify-bg));
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

html[data-ukb-theme="dark"] .ukb-nav-link.active .badge {
  border-color: rgba(255, 255, 255, 0.95) !important;
}

html[data-ukb-theme="dark"] .ukb-date-pill {
  border-color: var(--ukb-border);
  color: var(--ukb-date-text);
}

html[data-ukb-theme="dark"] .ukb-page-title__text {
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-ukb-theme="dark"] .ukb-page-title__icon {
  filter: brightness(0) saturate(100%) invert(44%) sepia(79%) saturate(557%)
    hue-rotate(145deg) brightness(94%) contrast(92%);
}

html[data-ukb-theme="dark"] .ukb-notify__icon {
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"] .ukb-userchip {
  border: 0;
}

html[data-ukb-theme="dark"] .ukb-search > svg circle,
html[data-ukb-theme="dark"] .ukb-search > svg path {
  stroke: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-chevron path {
  stroke: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-wallet__amount {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-stat,
html[data-ukb-theme="dark"] .ukb-community,
html[data-ukb-theme="dark"] .ukb-order-form-card,
html[data-ukb-theme="dark"] .ukb-service-details,
html[data-ukb-theme="dark"] .ukb-orders-panel,
html[data-ukb-theme="dark"] .ukb-orders-table-card,
html[data-ukb-theme="dark"] .ukb-account-card,
html[data-ukb-theme="dark"] .ukb-notifications-card,
html[data-ukb-theme="dark"] .ukb-ai-card,
html[data-ukb-theme="dark"] .ukb-giveaway-card,
html[data-ukb-theme="dark"] .ukb-giveaway-participate,
html[data-ukb-theme="dark"] .ukb-giveaway-rules-panel,
html[data-ukb-theme="dark"] .ukb-api-panel,
html[data-ukb-theme="dark"] .ukb-api-doc-card,
html[data-ukb-theme="dark"] .ukb-dashboard-panel,
html[data-ukb-theme="dark"] .ukb-account-tabs-wrap,
html[data-ukb-theme="dark"] .ukb-tickets-history {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-stat__label,
html[data-ukb-theme="dark"] .ukb-stat__value,
html[data-ukb-theme="dark"] .ukb-community__head h3 {
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-community__slide-copy h4 {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-community__slide-copy p {
  color: rgba(255, 255, 255, 0.5);
}

html[data-ukb-theme="dark"] .ukb-community__layer--1 {
  background: rgba(246, 246, 246, 0.1);
}

html[data-ukb-theme="dark"] .ukb-community__layer--2 {
  background: rgba(236, 236, 236, 0.2);
}

html[data-ukb-theme="dark"] .ukb-community__next {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  background: none;
  border: 1px solid var(--ukb-border);
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.0526 16H16M16 16H10.9473M16 16V10.9474M16 16V21.0526' stroke='%2321BACB' stroke-width='1.26316' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 32px 32px;
}

html[data-ukb-theme="dark"] .ukb-community__next:hover {
  filter: none;
  border-color: #21bacb;
}

html[data-ukb-theme="dark"] .ukb-community__next .ukb-community__head-icon {
  display: none;
}

html[data-ukb-theme="dark"] .ukb-card-head {
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-card-body {
  background: var(--ukb-card);
}

html[data-ukb-theme="dark"] .ukb-field .form-control,
html[data-ukb-theme="dark"] .ukb-input-like,
html[data-ukb-theme="dark"] .ukb-order-form-card .form-control,
html[data-ukb-theme="dark"] .ukb-order-form-card select.form-control,
html[data-ukb-theme="dark"] .ukb-order-form-card input.form-control,
html[data-ukb-theme="dark"] .ukb-orders-search input {
  background: var(--ukb-input) !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* Native <select> lists — dark popup + readable options (account, orders, tickets, etc.) */
html[data-ukb-theme="dark"] select.form-control {
  color-scheme: dark;
}

html[data-ukb-theme="dark"] select.form-control option,
html[data-ukb-theme="dark"] select.form-control optgroup {
  background-color: #282828;
  color: #ffffff;
}

html[data-ukb-theme="dark"] select.form-control option:checked,
html[data-ukb-theme="dark"] select.form-control option:hover,
html[data-ukb-theme="dark"] select.form-control option:focus {
  background-color: #0d6872;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-order-form-card .ukb-field label,
html[data-ukb-theme="dark"] .ukb-order-form-card .ukb-field .control-label {
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-order-form-card .help-block,
html[data-ukb-theme="dark"] .ukb-order-form-card .help-block.min-max {
  color: rgba(255, 255, 255, 0.78);
}

html[data-ukb-theme="dark"] .ukb-field .form-control::placeholder,
html[data-ukb-theme="dark"] .ukb-search input::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-platform {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-platform.is-active {
  background: var(--ukb-grad);
  border: none;
}

html[data-ukb-theme="dark"] .ukb-tabs {
  background: #ffffff;
  border: 0.4px solid rgba(96, 96, 171, 0.5);
}

html[data-ukb-theme="dark"] .ukb-tab {
  color: #020618 !important;
  background: #f3f3f3;
}

html[data-ukb-theme="dark"] .ukb-tab.is-active {
  background: var(--ukb-teal);
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-tab:not(.is-active) {
  background: #f3f3f3;
  color: #020618 !important;
}

html[data-ukb-theme="dark"] .ukb-card-head .ukb-chip {
  background: var(--ukb-teal);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-meta-card,
html[data-ukb-theme="dark"] .ukb-detail-box,
html[data-ukb-theme="dark"] .ukb-desc-box {
  background: var(--ukb-input);
  border-color: transparent;
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-detail-box__label,
html[data-ukb-theme="dark"] .ukb-meta-card__title,
html[data-ukb-theme="dark"] .ukb-desc-box__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-detail-box__value,
html[data-ukb-theme="dark"] .ukb-meta-card__value,
html[data-ukb-theme="dark"] .ukb-desc-box .panel-body,
html[data-ukb-theme="dark"] .ukb-desc-box__body,
html[data-ukb-theme="dark"] .ukb-desc-box__body p {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-charge {
  background: rgba(33, 186, 203, 0.1);
  border: 0.5px solid #21bacb73;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-charge label,
html[data-ukb-theme="dark"] .ukb-charge input,
html[data-ukb-theme="dark"] .ukb-charge #charge,
html[data-ukb-theme="dark"] .ukb-order-form-card .ukb-charge input.form-control,
html[data-ukb-theme="dark"] .ukb-order-form-card .ukb-charge #charge {
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container
  .select2-selection--single.form-control,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--focus
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--focus
  .select2-selection--single.form-control {
  background: var(--ukb-input) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow::after {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-search-field:not(.is-active)
  .form-control,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-search-field:not(.is-active)
  .search-dropdown
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-search-field:not(.is-active)
  .search-dropdown
  input.select2-selection {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%23ffffff' stroke-width='2'/%3E%3Cpath d='M20 20l-3.5-3.5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-color: var(--ukb-input) !important;
}

/* Select2 list (category/service) — dark panel; open dropdown gets .ukb-select2-dropdown--dark via JS */
html[data-ukb-theme="dark"] .select2-dropdown.dropdown-menu,
html[data-ukb-theme="dark"] .select2-dropdown.ukb-select2-dropdown,
.ukb-select2-dropdown--dark.dropdown-menu,
.ukb-select2-dropdown--dark {
  background: #181818 !important;
  background-color: #181818 !important;
  border: 1px solid rgba(33, 186, 203, 0.5) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35) !important;
}

/* Must re-declare full border — dark closed rule uses transparent border; open needs teal immediately */
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--open
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--open
  .select2-selection--single.form-control,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--open
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--focus.select2-container--open
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--open
  .select2-selection--single.form-control,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--focus.select2-container--open
  .select2-selection--single.form-control {
  border: 1px solid rgba(33, 186, 203, 0.5) !important;
  box-shadow: none !important;
  outline: none !important;
  box-sizing: border-box !important;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--open.select2-container--below
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--open.select2-container--below
  .select2-selection--single.form-control,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--open.select2-container--below
  .select2-selection--single {
  border: 1px solid rgba(33, 186, 203, 0.5) !important;
  border-bottom: 0 none transparent !important;
  border-bottom-width: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--open.select2-container--above
  .select2-selection--single,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--open.select2-container--above
  .select2-selection--single.form-control,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .select2-container--default.select2-container--open.select2-container--above
  .select2-selection--single {
  border: 1px solid rgba(33, 186, 203, 0.5) !important;
  border-top: 0 none transparent !important;
  border-top-width: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

html[data-ukb-theme="dark"] .select2-dropdown.select2-dropdown--below,
html[data-ukb-theme="dark"]
  .select2-dropdown.dropdown-menu.select2-dropdown--below,
.ukb-select2-dropdown--dark.select2-dropdown--below,
.ukb-select2-dropdown--dark.dropdown-menu.select2-dropdown--below {
  border: 1px solid rgba(33, 186, 203, 0.5) !important;
  border-top: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  box-sizing: border-box !important;
}

html[data-ukb-theme="dark"] .select2-dropdown.select2-dropdown--above,
html[data-ukb-theme="dark"]
  .select2-dropdown.dropdown-menu.select2-dropdown--above,
.ukb-select2-dropdown--dark.select2-dropdown--above,
.ukb-select2-dropdown--dark.dropdown-menu.select2-dropdown--above {
  border: 1px solid rgba(33, 186, 203, 0.5) !important;
  border-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  box-sizing: border-box !important;
}

html[data-ukb-theme="dark"] .select2-dropdown .select2-search__field,
.ukb-select2-dropdown--dark .select2-search__field {
  color: #ffffff !important;
  background: #282828 !important;
  background-color: #282828 !important;
  border: 1px solid rgba(33, 186, 203, 0.5) !important;
}

html[data-ukb-theme="dark"] .select2-dropdown .select2-results,
html[data-ukb-theme="dark"] .select2-dropdown .select2-results__options,
.ukb-select2-dropdown--dark .select2-results,
.ukb-select2-dropdown--dark .select2-results__options {
  background: #181818 !important;
  background-color: #181818 !important;
}

html[data-ukb-theme="dark"] .select2-dropdown .select2-results__options,
.ukb-select2-dropdown--dark .select2-results__options,
html[data-ukb-theme="dark"] .select2-dropdown .select2-results > div,
.ukb-select2-dropdown--dark .select2-results > div {
  scrollbar-color: #4a4a4a transparent;
}

html[data-ukb-theme="dark"] .select2-dropdown .select2-results__group strong,
.ukb-select2-dropdown--dark .select2-results__group strong {
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__options::-webkit-scrollbar-thumb,
.ukb-select2-dropdown--dark .select2-results__options::-webkit-scrollbar-thumb,
html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results
  > div::-webkit-scrollbar-thumb,
.ukb-select2-dropdown--dark .select2-results > div::-webkit-scrollbar-thumb {
  background: #4a4a4a;
}

html[data-ukb-theme="dark"] .select2-dropdown .select2-results__option,
html[data-ukb-theme="dark"]
  .select2-container--default
  .select2-results__option,
.ukb-select2-dropdown--dark .select2-results__option {
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px dashed rgba(33, 186, 203, 0.5) !important;
  background: transparent !important;
  background-color: transparent !important;
}

html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option:last-child,
html[data-ukb-theme="dark"]
  .select2-container--default
  .select2-results__option:last-child,
.ukb-select2-dropdown--dark .select2-results__option:last-child {
  border-bottom: none !important;
}

html[data-ukb-theme="dark"] .select2-dropdown .select2-results__option a,
.ukb-select2-dropdown--dark .select2-results__option a {
  color: inherit !important;
  background: transparent !important;
}

/* Hover / keyboard focus — PP uses .active and --highlighted for focus, not selection */
html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option--highlighted,
html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option.active:not([aria-selected="true"]),
html[data-ukb-theme="dark"]
  .select2-container--default
  .select2-results__option--highlighted,
html[data-ukb-theme="dark"]
  .select2-container--default
  .select2-results__option.active:not([aria-selected="true"]),
.ukb-select2-dropdown--dark .select2-results__option--highlighted,
.ukb-select2-dropdown--dark
  .select2-results__option.active:not([aria-selected="true"]) {
  background: rgba(33, 186, 203, 0.1) !important;
  background-color: rgba(33, 186, 203, 0.1) !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option--highlighted
  a,
html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option.active:not([aria-selected="true"])
  a,
.ukb-select2-dropdown--dark .select2-results__option--highlighted a,
.ukb-select2-dropdown--dark
  .select2-results__option.active:not([aria-selected="true"])
  a {
  background: transparent !important;
  color: inherit !important;
}

/* Selected row — teal gradient (aria-selected only; not .active alone) */
html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option[aria-selected="true"],
html[data-ukb-theme="dark"]
  .select2-container--default
  .select2-results__option[aria-selected="true"],
.ukb-select2-dropdown--dark .select2-results__option[aria-selected="true"] {
  background: var(--ukb-grad) !important;
  background-image: var(--ukb-grad) !important;
  color: #fff !important;
  font-weight: 500;
}

html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option--highlighted[aria-selected="true"],
html[data-ukb-theme="dark"]
  .select2-container--default
  .select2-results__option--highlighted[aria-selected="true"],
.ukb-select2-dropdown--dark
  .select2-results__option--highlighted[aria-selected="true"] {
  background: var(--ukb-grad) !important;
  background-image: var(--ukb-grad) !important;
  color: #fff !important;
}

html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option[aria-selected="true"]
  a,
html[data-ukb-theme="dark"]
  .select2-dropdown
  .select2-results__option--highlighted[aria-selected="true"]
  a,
.ukb-select2-dropdown--dark .select2-results__option[aria-selected="true"] a,
.ukb-select2-dropdown--dark
  .select2-results__option--highlighted[aria-selected="true"]
  a {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit;
}

html[data-ukb-theme="dark"] .ukb-user-menu__list {
  background: #232529;
  border: 1px solid #4a4a4a;
}

html[data-ukb-theme="dark"] .ukb-currency-menu > .ukb-user-menu__list {
  scrollbar-color: #4a4a4a transparent;
}

html[data-ukb-theme="dark"] .ukb-currency-menu > .ukb-user-menu__list::-webkit-scrollbar-thumb {
  background: #4a4a4a;
}

html[data-ukb-theme="dark"]
  .ukb-user-menu
  .ukb-user-menu__list
  .ukb-user-menu__item--logout {
  border-top-color: #4a4a4a;
}

html[data-ukb-theme="dark"]
  .ukb-user-menu__item:not(.ukb-user-menu__item--logout)
  .ukb-user-menu__icon {
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"] .ukb-user-menu__item {
  color: var(--ukb-text);
}

html[data-ukb-theme="dark"] .ukb-user-menu__item:hover {
  background: rgba(255, 255, 255, 0.06);
}

html[data-ukb-theme="dark"] .ukb-orders-table th,
html[data-ukb-theme="dark"] .ukb-orders-table td {
  color: var(--ukb-text-2);
  border-color: rgba(255, 255, 255, 0.08);
}

html[data-ukb-theme="dark"] .ukb-orders-table__row--alt {
  background: rgba(255, 255, 255, 0.03);
}

html[data-ukb-theme="dark"] .ukb-welcome__sub,
html[data-ukb-theme="dark"] .ukb-welcome__user {
  color: rgba(255, 255, 255, 0.92);
}

html[data-ukb-theme="dark"] .ukb-overlay.is-open {
  background: rgba(0, 0, 0, 0.65);
}

/* Dark theme — Figma Mass Order Page (node 468:36757). Colors only; no layout changes. */

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-mass-textarea.form-control {
  border: 0 !important;
  background: var(--ukb-input) !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-form-stack--mass
  .ukb-field
  .control-label,
html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-form-stack--mass
  .ukb-field
  label {
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-service-details .ukb-desc-box,
html[data-ukb-theme="dark"]
  .ukb-order-grid--mass
  .ukb-service-details
  > .ukb-card-body
  > .ukb-desc-box {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html[data-ukb-theme="dark"] .ukb-service-details .ukb-desc-box__title {
  margin: 0;
  font-weight: 600;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-service-details .ukb-desc-box__body {
  background: var(--ukb-input);
  border: 0;
  border-radius: 12px;
  padding: 14px 18px;
}

html[data-ukb-theme="dark"] .ukb-desc-box__body .ukb-text-link {
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 400;
}

html[data-ukb-theme="dark"] .ukb-desc-box__body .ukb-text-link:hover {
  text-decoration: none;
  opacity: 0.92;
}

html[data-ukb-theme="dark"] .ukb-desc-box__body ul,
html[data-ukb-theme="dark"] .ukb-desc-box__body li {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(
    .alert-info
  ),
html[data-ukb-theme="dark"]
  .ukb-service-details
  .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(
    .alert-info
  ) {
  background: var(--ukb-input);
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(
    .alert-info
  )
  a,
html[data-ukb-theme="dark"]
  .ukb-service-details
  .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(
    .alert-info
  )
  a {
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(
    .alert-info
  )
  .btn-close,
html[data-ukb-theme="dark"]
  .ukb-service-details
  .alert:not(.alert-success):not(.alert-danger):not(.alert-warning):not(
    .alert-info
  )
  .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

/* Dark theme — Figma Services Page (node 468:38121). Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-services-panel,
html[data-ukb-theme="dark"] .ukb-services-footnote {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-services-toolbar {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-services-search {
  background: var(--ukb-input);
  border: 1px solid var(--ukb-border) !important;
}

html[data-ukb-theme="dark"] .ukb-services-search .form-control,
html[data-ukb-theme="dark"] .ukb-services-search input.form-control {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-ukb-theme="dark"] .ukb-services-search .form-control::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-services-search__icon circle,
html[data-ukb-theme="dark"] .ukb-services-search__icon path {
  stroke: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-svc-filter .dropdown-menu {
  background: #181818;
  border-color: var(--ukb-border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  scrollbar-color: #4a4a4a transparent;
}

html[data-ukb-theme="dark"]
  .ukb-svc-filter
  .dropdown-menu::-webkit-scrollbar-thumb {
  background: #4a4a4a;
}

html[data-ukb-theme="dark"] .ukb-svc-filter .dropdown-menu .dropdown-item {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-svc-filter .dropdown-menu .dropdown-item:hover,
html[data-ukb-theme="dark"]
  .ukb-svc-filter
  .dropdown-menu
  .dropdown-item:focus {
  background: rgba(33, 186, 203, 0.1);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-svc-filter
  .dropdown-menu
  .dropdown-item:active {
  background: rgba(33, 186, 203, 0.16);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-platforms--services .ukb-platform:hover {
  background: rgba(33, 186, 203, 0.1);
  border-color: var(--ukb-border);
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-services-empty {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-services-table-wrap {
  scrollbar-color: #4a4a4a transparent;
}

html[data-ukb-theme="dark"] .ukb-services-table-wrap::-webkit-scrollbar-thumb {
  background: #4a4a4a;
}

html[data-ukb-theme="dark"]
  .ukb-services-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #5a5a5a;
}

html[data-ukb-theme="dark"] .ukb-svc-group.is-collapsed .ukb-svc-cat-toggle {
  background: var(--ukb-card);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-svc-group.is-collapsed .ukb-svc-cat-row td {
  border-color: var(--ukb-border) !important;
}

html[data-ukb-theme="dark"]
  .ukb-svc-group.is-collapsed
  .ukb-svc-cat-toggle__chev {
  background: var(--ukb-input);
}

html[data-ukb-theme="dark"]
  .ukb-svc-group.is-collapsed
  .ukb-svc-cat-toggle__chev
  img {
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"] .ukb-svc-group.is-open .ukb-svc-cat-row td {
  border-color: var(--ukb-border) !important;
}

html[data-ukb-theme="dark"]
  .ukb-svc-group.is-open
  tr.ukb-svc-row
  td:first-child {
  border-left-color: var(--ukb-border) !important;
}

html[data-ukb-theme="dark"]
  .ukb-svc-group.is-open
  tr.ukb-svc-row
  td:last-child {
  border-right-color: var(--ukb-border) !important;
}

html[data-ukb-theme="dark"]
  .ukb-svc-group.is-open
  tr.ukb-svc-row:last-child
  td {
  border-bottom-color: var(--ukb-border) !important;
}

html[data-ukb-theme="dark"]
  .ukb-svc-group.is-open
  .ukb-svc-columns-head
  th:first-child {
  border-left-color: var(--ukb-border) !important;
}

html[data-ukb-theme="dark"]
  .ukb-svc-group.is-open
  .ukb-svc-columns-head
  th:last-child {
  border-right-color: var(--ukb-border) !important;
}

html[data-ukb-theme="dark"] .ukb-services-table tbody tr.ukb-svc-row td {
  background: var(--ukb-card);
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-svc-columns-head th,
html[data-ukb-theme="dark"] .ukb-svc-columns-head td {
  background: var(--ukb-card) !important;
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-ukb-theme="dark"]
  #service-table.ukb-services-table
  > tbody
  > tr.ukb-svc-columns-head
  > th,
html[data-ukb-theme="dark"]
  #service-table.ukb-services-table
  > tbody
  > tr.ukb-svc-row
  > td {
  background-color: var(--ukb-card) !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  #service-table.ukb-services-table
  > tbody
  > tr:nth-child(odd)
  > td,
html[data-ukb-theme="dark"]
  #service-table.ukb-services-table
  > tbody
  > tr:nth-child(even)
  > td,
html[data-ukb-theme="dark"]
  #service-table.ukb-services-table
  > tbody
  > tr:nth-child(odd)
  > th,
html[data-ukb-theme="dark"]
  #service-table.ukb-services-table
  > tbody
  > tr:nth-child(even)
  > th {
  background-color: var(--ukb-card) !important;
}

html[data-ukb-theme="dark"] .ukb-svc-id,
html[data-ukb-theme="dark"] .ukb-svc-name,
html[data-ukb-theme="dark"] .ukb-svc-minmax,
html[data-ukb-theme="dark"] .ukb-svc-avg,
html[data-ukb-theme="dark"] .ukb-svc-rate {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-svc-refill-pill:not(.ukb-svc-refill-pill--empty) {
  background: var(--ukb-card);
  border-color: #21bacb;
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"] .ukb-svc-refill-pill--empty {
  color: rgba(255, 255, 255, 0.55);
}

html[data-ukb-theme="dark"] .ukb-svc-btn--outline {
  background: var(--ukb-card) !important;
  border-color: #21bacb !important;
  color: var(--ukb-teal) !important;
}

html[data-ukb-theme="dark"] .ukb-svc-rate__order:hover {
  background: rgba(33, 186, 203, 0.12);
}

html[data-ukb-theme="dark"] .ukb-svc-fav [data-favorite-icon].far {
  color: rgba(255, 255, 255, 0.45);
}

html[data-ukb-theme="dark"] .ukb-svc-detail-modal-backdrop {
  background: rgba(0, 0, 0, 0.65);
}

html[data-ukb-theme="dark"] .ukb-svc-detail-modal-host .ukb-svc-detail-modal {
  background: var(--ukb-card);
  border: 1px solid var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-svc-detail-modal__stat {
  background: var(--ukb-input);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-svc-detail-modal__stat-label,
html[data-ukb-theme="dark"] .ukb-svc-detail-modal__desc-label {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-svc-detail-modal__stat-value,
html[data-ukb-theme="dark"] .ukb-svc-detail-modal__desc-body,
html[data-ukb-theme="dark"] .ukb-svc-detail-modal__desc {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-svc-detail-modal__desc {
  background: var(--ukb-input);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-svc-detail-modal__btn--order,
html[data-ukb-theme="dark"] .ukb-svc-detail-modal__btn--order:hover {
  color: #ffffff !important;
}

/* Dark theme — Figma Orders Page (node 468:39513). Shared by orders, drip_feed, updates, refill, refunds. */

html[data-ukb-theme="dark"] .ukb-orders-panel {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-orders-toolbar {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-orders-filter:not(.is-active) {
  background: var(--ukb-input);
  border-color: transparent;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-orders-filter:not(.is-active):hover {
  color: #ffffff;
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"]
  .ukb-orders-filter:not(.is-active)
  .ukb-orders-filter__icon
  img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

html[data-ukb-theme="dark"] .ukb-orders-search.ukb-services-search {
  background: var(--ukb-input);
  border: 1px solid var(--ukb-border) !important;
}

html[data-ukb-theme="dark"] .ukb-orders-search .form-control {
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-orders-search .form-control::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-orders-search__icon {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

html[data-ukb-theme="dark"] .ukb-orders-table-card {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-orders-table-wrap {
  scrollbar-color: #4a4a4a transparent;
}

html[data-ukb-theme="dark"] .ukb-orders-table-wrap::-webkit-scrollbar-thumb {
  background: #4a4a4a;
}

html[data-ukb-theme="dark"] table.ukb-orders-table > thead > tr > th {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] table.ukb-orders-table > tbody > tr > td {
  background: var(--ukb-card) !important;
  color: #ffffff !important;
  border-bottom-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-ukb-theme="dark"] table.ukb-orders-table.table > tbody > tr > td,
html[data-ukb-theme="dark"] table.ukb-orders-table.table > tbody > tr > th {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

html[data-ukb-theme="dark"]
  table.ukb-orders-table
  > tbody
  > tr.ukb-orders-table__row--alt
  > td {
  background: rgba(255, 255, 255, 0.03) !important;
}

html[data-ukb-theme="dark"]
  table.ukb-orders-table
  tbody
  .ukb-orders-check__box {
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
}

html[data-ukb-theme="dark"] table.ukb-orders-table tbody .ukb-orders-copy img {
  filter: brightness(0) invert(1);
  opacity: 0.75;
}

html[data-ukb-theme="dark"]
  table.ukb-orders-table
  tbody
  .ukb-orders-copy.is-active
  img {
  opacity: 1;
}

html[data-ukb-theme="dark"] .ukb-orders-date,
html[data-ukb-theme="dark"] .ukb-orders-table__id,
html[data-ukb-theme="dark"] .ukb-orders-service {
  color: #ffffff;
}

html[data-ukb-theme="dark"] span.ukb-orders-link {
  color: #ffffff;
}

html[data-ukb-theme="dark"] a.ukb-orders-link,
html[data-ukb-theme="dark"] a.ukb-orders-link:visited,
html[data-ukb-theme="dark"] a.ukb-orders-link:hover,
html[data-ukb-theme="dark"] a.ukb-orders-link:focus-visible,
html[data-ukb-theme="dark"] a.ukb-orders-link:active {
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"] .ukb-orders-service-tooltip {
  background: #232529;
  border: 1px solid var(--ukb-border);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-orders-empty {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-orders-page {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-orders-page:hover {
  border-color: #21bacb;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-orders-page--nav:not(.ukb-orders-page--next) {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-orders-page--nav:not(.ukb-orders-page--next)
  img {
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"] .ukb-orders-page.is-active,
html[data-ukb-theme="dark"] .ukb-orders-page.is-active:hover {
  border: none;
  background: var(--ukb-button-grad);
  color: #fff;
}

html[data-ukb-theme="dark"] .ukb-orders-page--ellipsis {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
}

html[data-ukb-theme="dark"] .ukb-orders-page--next,
html[data-ukb-theme="dark"] .ukb-orders-page--next:hover {
  border: none;
  background: var(--ukb-button-grad);
  color: #fff;
}

/* Dark theme — orders-layout pages: drip_feed, updates, refill, refunds (extends block above). */

html[data-ukb-theme="dark"] .ukb-dripfeed-panel,
html[data-ukb-theme="dark"] .ukb-updates-panel,
html[data-ukb-theme="dark"] .ukb-refill-panel,
html[data-ukb-theme="dark"] .ukb-refunds-panel {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] table.ukb-orders-table td.ukb-orders-empty {
  background: var(--ukb-card) !important;
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-ukb-theme="dark"] .ukb-refunds-alert.alert-info {
  background: rgba(33, 186, 203, 0.12);
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-refunds-alert .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

html[data-ukb-theme="dark"] a.ukb-refill-order-link,
html[data-ukb-theme="dark"] a.ukb-refunds-order-link {
  color: #ffffff;
}

html[data-ukb-theme="dark"] a.ukb-refill-order-link:hover,
html[data-ukb-theme="dark"] a.ukb-refunds-order-link:hover {
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"] .ukb-dripfeed-cancel.btn-default {
  background: var(--ukb-input) !important;
  border: 1px solid #21bacb !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-dripfeed-cancel.btn-default:hover,
html[data-ukb-theme="dark"] .ukb-dripfeed-cancel.btn-default:focus {
  background: rgba(33, 186, 203, 0.15) !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-updates-change {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.88);
}

html[data-ukb-theme="dark"] .ukb-updates-change--new {
  background: rgba(0, 132, 255, 0.22);
  color: #9fd4ff;
}

html[data-ukb-theme="dark"] .ukb-updates-change--decreased,
html[data-ukb-theme="dark"] .ukb-updates-change--enabled {
  background: rgba(51, 175, 117, 0.22);
  color: #8ee4b8;
}

html[data-ukb-theme="dark"] .ukb-updates-change--increased {
  background: rgba(222, 112, 12, 0.22);
  color: #ffc98a;
}

html[data-ukb-theme="dark"] .ukb-updates-change--disabled {
  background: rgba(242, 69, 69, 0.2);
  color: #ffb4b4;
}

/* Dark theme — Figma Add Funds Page (node 468:41229). Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-addfunds-grid .ukb-order-form-card,
html[data-ukb-theme="dark"] .ukb-addfunds-aside.ukb-service-details {
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-form-stack--addfunds .ukb-field__heading,
html[data-ukb-theme="dark"]
  .ukb-form-stack--addfunds
  .ukb-field--method
  .control-label,
html[data-ukb-theme="dark"] .ukb-form-stack--addfunds .ukb-field label,
html[data-ukb-theme="dark"] .ukb-form-stack--addfunds .ukb-charge label {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-addfunds-total__value {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-pay-tile:not(.is-active) {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-pay-tile:not(.is-active) .ukb-pay-tile__label {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-pay-tile:not(.is-active) .ukb-pay-tile__icon {
  background: var(--ukb-input);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"]
  .ukb-pay-tile:not(.is-active)
  .ukb-pay-tile__icon--cryptomus {
  background: #202020;
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-ukb-theme="dark"] .ukb-pay-tile.is-active .ukb-pay-tile__icon {
  background: var(--ukb-input);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"]
  .ukb-pay-tile.is-active
  .ukb-pay-tile__icon--cryptomus {
  background: #202020;
  border-color: rgba(255, 255, 255, 0.12);
}

/* Phone: icon wells use gray border in dark mode; tile border stays teal */
@media (max-width: 640px) {
  html[data-ukb-theme="dark"] .ukb-pay-tile:not(.is-active) .ukb-pay-tile__icon,
  html[data-ukb-theme="dark"]
    .ukb-pay-tile:not(.is-active)
    .ukb-pay-tile__icon--cryptomus {
    border-color: #4a4a4a;
  }
}

html[data-ukb-theme="dark"] .ukb-quick-amount {
  background: var(--ukb-input);
  border-color: var(--ukb-border);
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"] .ukb-quick-amount:hover,
html[data-ukb-theme="dark"] .ukb-quick-amount:focus-visible,
html[data-ukb-theme="dark"] .ukb-quick-amount.is-active {
  background: rgba(33, 186, 203, 0.15);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-method-select__caret {
  border-color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-addfunds-history__row {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-addfunds-history__row--alt {
  background: rgba(255, 255, 255, 0.03);
}

html[data-ukb-theme="dark"] .ukb-addfunds-history__empty {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-addfunds-history__invoice.ukb-text-link {
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-ukb-theme="dark"] .ukb-instruction-list li,
html[data-ukb-theme="dark"] .ukb-instruction-list li span {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-addfunds-page-content,
html[data-ukb-theme="dark"] .ukb-addfunds-page-content p {
  color: rgba(255, 255, 255, 0.92);
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-form-stack--addfunds
  .alert {
  background: var(--ukb-input);
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .ukb-form-stack--addfunds
  .alert
  .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

html[data-ukb-theme="dark"] .ukb-addfunds-pagination .pagination > li > a,
html[data-ukb-theme="dark"] .ukb-addfunds-pagination .pagination > li > span {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-addfunds-pagination
  .pagination
  > li.active
  > a,
html[data-ukb-theme="dark"]
  .ukb-addfunds-pagination
  .pagination
  > li.active
  > span {
  background: var(--ukb-grad);
  border-color: transparent;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-addfunds-pagination .pagination > li > a:hover,
html[data-ukb-theme="dark"]
  .ukb-addfunds-pagination
  .pagination
  > li
  > a:focus {
  background: rgba(33, 186, 203, 0.12);
  color: #ffffff;
}

/* Add funds pay tiles — light theme keeps original white icon wells (dark styling is dark-only above). */

html:not([data-ukb-theme="dark"])
  .ukb-addfunds-grid
  .ukb-pay-tile:not(.is-active) {
  background: #fff;
  border: 1px solid var(--ukb-border);
}

html:not([data-ukb-theme="dark"])
  .ukb-addfunds-grid
  .ukb-pay-tile:not(.is-active)
  .ukb-pay-tile__label {
  color: #202020;
}

html:not([data-ukb-theme="dark"])
  .ukb-addfunds-grid
  .ukb-pay-tile
  .ukb-pay-tile__icon {
  background: #fff;
  border: 0.5px solid var(--ukb-border);
}

html:not([data-ukb-theme="dark"])
  .ukb-addfunds-grid
  .ukb-pay-tile.is-active
  .ukb-pay-tile__icon {
  background: #fff;
  border: none;
}

html:not([data-ukb-theme="dark"])
  .ukb-addfunds-grid
  .ukb-pay-tile
  .ukb-pay-tile__icon--cryptomus {
  background: #fff;
  border: 0.5px solid var(--ukb-border);
}

html:not([data-ukb-theme="dark"])
  .ukb-addfunds-grid
  .ukb-pay-tile.is-active
  .ukb-pay-tile__icon--cryptomus {
  background: #fff;
  border: none;
}

/* Dark theme — Figma Tickets Page (node 468:42535). Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-tickets-form-card.ukb-order-form-card {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-form-stack--tickets .ukb-field .control-label,
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-fields
  .control-label,
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-subcategory-fields
  .control-label,
html[data-ukb-theme="dark"] .ukb-tickets-dynamic-fields .control-label {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  .form-control:not(.ukb-viewticket-reply__input):not(textarea),
html[data-ukb-theme="dark"] .ukb-form-stack--tickets select.form-control,
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-fields
  .form-control:not(textarea),
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-subcategory-fields
  .form-control:not(textarea),
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  .ukb-tickets-message.form-control,
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  textarea.ukb-tickets-message {
  background-color: var(--ukb-input) !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* ID + nested selects — beats light `.ukb-form-stack--tickets #ticket-category-field` (#eee !important). */
html[data-ukb-theme="dark"] .ukb-form-stack--tickets #ticket-category-field,
html[data-ukb-theme="dark"] .ukb-tickets-select #ticket-category-field,
html[data-ukb-theme="dark"] .ukb-form-stack--tickets select.form-control,
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-fields
  select.form-control,
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-subcategory-fields
  select.form-control,
html[data-ukb-theme="dark"] .ukb-form-stack--tickets #ticket-subcategory,
html[data-ukb-theme="dark"] .ukb-tickets-select select.form-control {
  background-color: var(--ukb-input) !important;
  border: 0 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

/* Category — caret is `.ukb-tickets-select__caret`, not background on the select */
html[data-ukb-theme="dark"] .ukb-form-stack--tickets #ticket-category-field,
html[data-ukb-theme="dark"] .ukb-tickets-select #ticket-category-field,
html[data-ukb-theme="dark"] .ukb-tickets-select select.form-control {
  background-image: none !important;
}

/* Dynamic subcategory / ticket-fields selects — no wrapper caret */
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-fields
  select.form-control,
html[data-ukb-theme="dark"]
  .ukb-form-stack--tickets
  #ticket-subcategory-fields
  select.form-control,
html[data-ukb-theme="dark"] .ukb-form-stack--tickets #ticket-subcategory {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 8px !important;
  padding-right: 44px !important;
}

html[data-ukb-theme="dark"] .ukb-tickets-select__caret {
  background: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

html[data-ukb-theme="dark"] .ukb-tickets-uploader {
  border: 1.5px dashed rgba(33, 186, 203, 0.5);
  background: rgba(33, 186, 203, 0.1);
}

html[data-ukb-theme="dark"] .ukb-tickets-uploader .files-item {
  color: rgba(255, 255, 255, 0.85);
}

html[data-ukb-theme="dark"]
  .ukb-tickets-uploader
  #uploader-button
  .paperclip
  svg,
html[data-ukb-theme="dark"]
  .ukb-tickets-uploader
  #uploader-button
  a.paperclip
  svg {
  color: #21bacb;
  fill: #21bacb;
}

html[data-ukb-theme="dark"] .ukb-tickets-form-card .alert,
html[data-ukb-theme="dark"] .ukb-form-stack--tickets .alert {
  background: var(--ukb-input);
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-tickets-form-card .alert .btn-close,
html[data-ukb-theme="dark"] .ukb-form-stack--tickets .alert .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

html[data-ukb-theme="dark"] .ukb-tickets-search__field .form-control {
  background: var(--ukb-input) !important;
  border: 1px solid var(--ukb-border) !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-tickets-search__field
  .form-control::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-tickets-search__icon {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

html[data-ukb-theme="dark"] .ukb-tickets-filter {
  background: var(--ukb-input);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-tickets-filter.is-active {
  background: var(--ukb-button-grad);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-tickets-history__row {
  background: var(--ukb-input);
}

html[data-ukb-theme="dark"] .ukb-tickets-history__row:hover {
  background: #323232;
}

html[data-ukb-theme="dark"] .ukb-tickets-history__row.is-unread {
  background: var(--ukb-card);
  border-color: rgba(33, 186, 203, 0.4);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

html[data-ukb-theme="dark"] .ukb-tickets-history__row.is-unread:hover {
  background: #2a2d32;
}

html[data-ukb-theme="dark"] .ukb-tickets-history__avatar {
  background: var(--ukb-card);
}

html[data-ukb-theme="dark"] .ukb-tickets-history__avatar img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"] .ukb-tickets-history__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-tickets-history__title.is-unread {
  color: #21bacb;
}

html[data-ukb-theme="dark"] .ukb-tickets-history__unread-label {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

html[data-ukb-theme="dark"] .ukb-tickets-history__meta,
html[data-ukb-theme="dark"] .ukb-tickets-history__subject {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-tickets-history__status--closed,
html[data-ukb-theme="dark"] .ukb-tickets-history__status--answered {
  background: var(--ukb-card);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-tickets-history__status--pending {
  background: #fc5523;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-tickets-history__empty {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-tickets-page-note .ukb-desc-box {
  background: var(--ukb-input);
  border-color: transparent;
  color: #ffffff;
}

/* Dark theme — Figma View Ticket Page (node 468:43522). Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-viewticket-back {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-back__label {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-card {
  background: var(--ukb-card);
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-viewticket-msg__time {
  color: #fafafb;
}

html[data-ukb-theme="dark"] .ukb-viewticket-msg__bubble--support {
  background: var(--ukb-input);
  border-color: transparent;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-msg__bubble--user {
  background: rgba(33, 186, 203, 0.1);
  border-color: transparent;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-msg__text {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-msg__files a {
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"] .ukb-viewticket-reply__compose {
  background: rgba(33, 186, 203, 0.1);
  border-color: rgba(33, 186, 203, 0.5);
}

html[data-ukb-theme="dark"]
  .ukb-viewticket-reply__compose
  .ukb-viewticket-reply__input.form-control,
html[data-ukb-theme="dark"]
  .ukb-viewticket-reply__compose
  .ukb-viewticket-reply__input.form-control:focus {
  color: #ffffff !important;
  background: transparent !important;
}

html[data-ukb-theme="dark"] .ukb-viewticket-reply .alert {
  background: var(--ukb-input);
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-reply .alert .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

html[data-ukb-theme="dark"]
  .ukb-viewticket-reply__attach
  .ukb-tickets-uploader {
  border: 0;
  background: transparent;
}

html[data-ukb-theme="dark"] .ukb-viewticket-details {
  background: var(--ukb-card);
  border: 1px solid var(--ukb-border);
  border-radius: 24px;
}

html[data-ukb-theme="dark"] .ukb-viewticket-details__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-details__list {
  background: var(--ukb-input);
  border-color: #21bacb50;
}

html[data-ukb-theme="dark"] .ukb-viewticket-details__row {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-viewticket-details__row dt {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-notice {
  border: 0.5px solid #c8083d50;
  background: linear-gradient(
    115.1deg,
    rgba(200, 8, 61, 0.15) 2.35%,
    rgba(255, 52, 93, 0.15) 75%
  );
}

html[data-ukb-theme="dark"] .ukb-viewticket-notice__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-viewticket-notice__text {
  background: linear-gradient(153.64deg, #c8083d 2.35%, #ff345d 75%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dark theme — Figma Dashboard Page (node 468:46193). Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-dashboard .ukb-stat--dashboard {
  background: var(--ukb-card);
  border: 1px solid var(--ukb-border);
}

html[data-ukb-theme="dark"]
  .ukb-dashboard
  .ukb-stat--dashboard
  .ukb-stat__label,
html[data-ukb-theme="dark"]
  .ukb-dashboard
  .ukb-stat--dashboard
  .ukb-stat__value {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-dashboard .ukb-stat__icon--dashboard {
  background: var(--ukb-input);
  border-color: rgba(33, 186, 203, 0.45);
}

html[data-ukb-theme="dark"] .ukb-dashboard-progress,
html[data-ukb-theme="dark"] .ukb-dashboard .ukb-dashboard-card {
  background: var(--ukb-card);
  border: 1px solid var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-dashboard-card.ukb-dashboard-status,
html[data-ukb-theme="dark"] .ukb-dashboard-card.ukb-dashboard-logins {
  border-color: var(--ukb-border);
}

html[data-ukb-theme="dark"] .ukb-dashboard-progress__label,
html[data-ukb-theme="dark"] .ukb-dashboard-progress__next,
html[data-ukb-theme="dark"] .ukb-dashboard-progress__meta,
html[data-ukb-theme="dark"] .ukb-dashboard-progress__meta p,
html[data-ukb-theme="dark"] .ukb-dashboard-progress__foot {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-dashboard-progress__name,
html[data-ukb-theme="dark"] .ukb-dashboard-progress__next-level {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-dashboard-progress__next > img {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

html[data-ukb-theme="dark"] .ukb-dashboard-progress__next-level img {
  filter: none;
  opacity: 1;
}

html[data-ukb-theme="dark"] .ukb-dashboard-progress__bar {
  background: var(--ukb-input);
}

html[data-ukb-theme="dark"] .ukb-dashboard-progress__pill {
  background: rgba(255, 255, 255, 0.95);
  color: #000000;
}

html[data-ukb-theme="dark"] .ukb-dashboard-status__spent {
  color: rgba(255, 255, 255, 0.85);
}

html[data-ukb-theme="dark"] .ukb-dashboard-status-table-wrap {
  background: var(--ukb-input);
  border-color: #21bacb50;
}

html[data-ukb-theme="dark"] .ukb-dashboard-status-table tbody td {
  background: var(--ukb-card);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-dashboard-status-table
  tbody
  tr:first-child
  td {
  border-top-color: var(--ukb-card);
}

html[data-ukb-theme="dark"]
  .ukb-dashboard-status-table
  tbody
  tr.ukb-dashboard-status-table__row--dash
  td {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-dashboard-status-table tbody tr.is-current td {
  background: rgba(33, 186, 203, 0.35);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-dashboard-logins__lead {
  color: rgba(255, 255, 255, 0.85);
}

html[data-ukb-theme="dark"] .ukb-dashboard-login {
  border-bottom-color: rgba(33, 186, 203, 0.45);
}

html[data-ukb-theme="dark"] .ukb-dashboard-login__ip,
html[data-ukb-theme="dark"] .ukb-dashboard-login__country {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__features,
html[data-ukb-theme="dark"] .ukb-dashboard-levels__col {
  background: var(--ukb-card);
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__col:not(.is-current) {
  border: 2px solid transparent;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__col.is-current {
  border-color: var(--ukb-teal);
  box-shadow: 0 0 0 1px rgba(33, 186, 203, 0.35);
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__features-head-icon,
html[data-ukb-theme="dark"] .ukb-dashboard-levels__col-badge-wrap {
  background: var(--ukb-input);
  border-color: rgba(33, 186, 203, 0.35);
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__feature-list li,
html[data-ukb-theme="dark"] .ukb-dashboard-levels__checks li,
html[data-ukb-theme="dark"] .ukb-dashboard-levels__col-head {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__feature-list li {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__col-name {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__col-bonus {
  color: rgba(255, 255, 255, 0.65);
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__mobile-benefits-row {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-dashboard-levels__mobile-benefits-row span {
  color: #ffffff;
}

/* Dark theme — AI Recommended page. Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-stat__icon:not(.ukb-stat__icon--dashboard) {
  background: var(--ukb-input);
  box-shadow: inset 0 0 0 1px rgba(33, 186, 203, 0.35);
}

html[data-ukb-theme="dark"] .ukb-ai-card__body {
  background: var(--ukb-card);
}

html[data-ukb-theme="dark"] .ukb-ai-table__row {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-ai-rate__value {
  color: #01d86b;
}

html[data-ukb-theme="dark"] .ukb-ai-best__orders {
  color: rgba(255, 255, 255, 0.72);
}

html[data-ukb-theme="dark"] .ukb-ai-best__item {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-ai-empty__icon {
  background: linear-gradient(
    135deg,
    rgba(33, 186, 203, 0.18),
    rgba(11, 141, 161, 0.1)
  );
  border-color: rgba(33, 186, 203, 0.35);
}

html[data-ukb-theme="dark"] .ukb-ai-empty__text {
  color: rgba(255, 255, 255, 0.65);
}

html[data-ukb-theme="dark"] .ukb-ai-buy {
  border-color: transparent;
}

/* Dark theme — Service Request page. Colors only; no layout changes. */

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-form-stack--service-request
  .ukb-field
  .control-label {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-form-stack--service-request
  .form-control,
html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-order-form-card
  .ukb-service-request-note.form-control {
  background: var(--ukb-input) !important;
  border: 0 !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-form-stack--service-request
  .form-control::placeholder,
html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-service-request-note.form-control::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-form-stack--service-request
  .alert {
  background: var(--ukb-input);
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-form-stack--service-request
  .alert
  .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-addfunds-history__head {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-service-request-history
  .ukb-addfunds-history__row {
  color: rgba(255, 255, 255, 0.88);
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

html[data-ukb-theme="dark"]
  .ukb-service-request-grid
  .ukb-service-request-history
  .ukb-addfunds-history__row:last-child {
  border-bottom: 0;
}

/* Dark theme — Create Invoice page (Figma 674:17536). Colors + spacing tokens only. */

html[data-ukb-theme="dark"] .ukb-create-invoice-grid .ukb-order-form-card,
html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-create-invoice-aside.ukb-service-details {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
  border-radius: 16px;
}

html[data-ukb-theme="dark"] .ukb-create-invoice-grid .ukb-card-body,
html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-create-invoice-panel--history {
  background: #181818;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-form-stack.ukb-form-stack--create-invoice {
  gap: 16px;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-form-stack--create-invoice
  > .ukb-submit {
  margin-top: 0;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-form-stack--create-invoice
  .ukb-field
  .control-label {
  margin-bottom: 8px;
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-form-stack--create-invoice
  .form-control {
  background: #282828 !important;
  border: 0 !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-form-stack--create-invoice
  .form-control::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-form-stack--create-invoice
  .alert {
  background: #282828;
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-form-stack--create-invoice
  .alert
  .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

html[data-ukb-theme="dark"] .ukb-create-invoice-instruction.ukb-desc-box {
  background: #282828;
  border-color: transparent;
  padding: 12px 14px;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-instruction
  .ukb-desc-box__title {
  color: #ffffff;
  font-size: 18px;
}

html[data-ukb-theme="dark"] .ukb-instruction-list--create-invoice li,
html[data-ukb-theme="dark"] .ukb-instruction-list--create-invoice li span {
  color: #ffffff;
  font-family: Geist, Inter, sans-serif;
  font-size: 14px;
  line-height: 1.35;
}

html[data-ukb-theme="dark"]
  .ukb-instruction-list--create-invoice
  .ukb-instruction-list__check {
  box-sizing: border-box;
  background-color: #282828;
  border-radius: 50%;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-addfunds-history__head {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-addfunds-history--invoice
  .ukb-addfunds-history__row {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"]
  .ukb-create-invoice-grid
  .ukb-addfunds-history__empty {
  color: rgba(255, 255, 255, 0.72);
}

/* Dark theme — Giveaway page (Figma 674:17068). Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-giveaway-modal {
  background: #282828;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-giveaway-modal__info {
  color: rgba(255, 255, 255, 0.88);
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-card {
  background: #181818;
  border-color: transparent;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-card__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-giveaway-page
  .ukb-giveaway-card__logo--theme-dark {
  mix-blend-mode: screen;
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-participate {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.12);
}

html[data-ukb-theme="dark"]
  .ukb-giveaway-page
  .ukb-giveaway-participate__title.ukb-text-gradient {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #21bacb;
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-participate__sub {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-step {
  background: #282828;
  border-color: transparent;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-step__icon-wrap {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-step__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-giveaway-page
  .ukb-giveaway-flow__arrow::after {
  width: 36px;
  height: 36px;
  background-size:
    16px 16px,
    100% 100%;
  box-shadow:
    0 4px 14px rgba(13, 104, 114, 0.28),
    0 0 0 4px rgba(24, 24, 24, 1),
    0 0 0 5px rgba(33, 186, 203, 0.35);
}

html[data-ukb-theme="dark"]
  .ukb-giveaway-page
  .ukb-giveaway-rules-card.ukb-order-form-card {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
  border-radius: 16px;
}

html[data-ukb-theme="dark"]
  .ukb-giveaway-page
  .ukb-giveaway-rules-card
  .ukb-card-body {
  background: #181818;
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-panel {
  background: #282828;
  border: 0.5px solid #21bacb50;
}

/* Mobile: match light mode — no border / transparent panel */
@media (max-width: 992px) {
  html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-panel {
    background: transparent;
    border: none;
    border-radius: 0;
  }
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-panel__lead,
html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-list,
html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-list li,
html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-panel__body {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-panel__lead {
  font-size: 14px;
  font-weight: 400;
}

html[data-ukb-theme="dark"] .ukb-giveaway-page .ukb-giveaway-rules-list li {
  font-size: 14px;
  line-height: 1.5;
}

html[data-ukb-theme="dark"]
  .ukb-giveaway-page
  .ukb-giveaway-rules-card
  .ukb-card-head__lead-title {
  color: #ffffff;
}

/* Dark theme — API page. Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-api-kv {
  border: 0;
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-api-kv--label {
  background: var(--ukb-input);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-api-kv--value,
html[data-ukb-theme="dark"] .ukb-api-kv--param,
html[data-ukb-theme="dark"] .ukb-api-kv--desc {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-api-kv--head {
  background: var(--ukb-button-grad);
  color: #ffffff;
  border-color: transparent;
}

html[data-ukb-theme="dark"] .ukb-api-kv--value-key a {
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"] .ukb-api-kv--value.ukb-api-kv--value-key {
  background: var(--ukb-input);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-api-kv--value-key .ukb-api-key-text,
html[data-ukb-theme="dark"]
  .ukb-api-page
  .ukb-api-kv--value-key
  code.ukb-api-key-text {
  color: #ffffff !important;
  background: transparent !important;
}

html[data-ukb-theme="dark"] .ukb-api-service-type__label {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-api-service-type__select {
  background: var(--ukb-input) !important;
  border: 0 !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-api-service-type__caret {
  border-color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-api-code {
  background: var(--ukb-input);
  border: 0;
  color: #ffffff;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-api-copy-code {
  background: var(--ukb-input);
  border: 0;
  color: #ffffff;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-api-copy-code img {
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"] .ukb-api-empty {
  color: rgba(255, 255, 255, 0.72);
}

/* Dark theme — Account page (Figma 674:24638). Colors only; no layout changes. */

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-tabs-wrap {
  background: #181818;
  border: 1px solid rgba(33, 186, 203, 0.5);
  border-radius: 20px;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-tab:not(.is-active) {
  background: #282828;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-tab:hover:not(.is-active),
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-tab:focus-visible:not(.is-active),
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-tab--link:hover:not(.is-active),
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-tab--link:focus-visible:not(.is-active) {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-tab.is-active,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-tab.is-active:hover,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-tab.is-active:focus-visible,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-tab--link.is-active,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-tab--link.is-active:hover,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-tab--link.is-active:focus-visible {
  background: var(--ukb-teal);
  color: #ffffff !important;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-card,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-card--split {
  background: #181818;
  border-color: transparent;
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  .ukb-field
  .control-label,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  .ukb-field
  label,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-field__label-static {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  > .form-group
  > .form-control,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  > .ukb-account-field
  > .form-control,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  .ukb-account-textarea.form-control {
  background: #282828 !important;
  border: 0 !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  .ukb-account-select
  > .form-control {
  background-color: var(--ukb-input) !important;
  border: 0 !important;
  color: #ffffff !important;
  color-scheme: dark;
  -webkit-text-fill-color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-select {
  background: #282828;
  border: 0;
  overflow: visible;
  min-height: 56px;
  border-radius: 12px;
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-select
  .ukb-account-select__chevron {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-input {
  background: #282828;
  border: 0;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-input .form-control,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  .ukb-account-input--password
  .form-control,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  .ukb-account-input--email
  .form-control {
  color: #ffffff !important;
  background: transparent !important;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-input__value {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-input--password
  .form-control::placeholder,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-input--email
  .form-control::placeholder,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-form-stack--account
  .form-control::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-input__svg path {
  fill: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-input__icon img,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-password-toggle__icon {
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-select__chevron
  path {
  stroke: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-avatar {
  background: #181818;
  border-color: #21bacb;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-upload-btn,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-upload-btn:hover,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-upload-btn:focus,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-upload-btn:focus-visible,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-upload-btn:active {
  border: 1px solid #21bacb;
  background: transparent;
  background-image: none;
  color: #21bacb;
  -webkit-text-fill-color: #21bacb;
  background-clip: border-box;
  -webkit-background-clip: border-box;
  opacity: 1;
  box-shadow: none;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-upload-btn::before,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-upload-btn::after {
  content: none !important;
  display: none !important;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-btn--cancel {
  background: #eee;
  color: #404040;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-section-head__title,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-2fa-lead {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-section-head__lead,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-muted,
html[data-ukb-theme="dark"] .ukb-account-page .ukb-account-help {
  color: rgba(255, 255, 255, 0.65);
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .alert:not(.alert-success):not(.alert-danger):not(.alert-info):not(
    .alert-warning
  ),
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-alerts
  .alert:not(.alert-success):not(.alert-danger):not(.alert-info):not(
    .alert-warning
  ) {
  background: #282828;
  border: 0;
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-account-page
  .alert:not(.alert-success):not(.alert-danger):not(.alert-info):not(
    .alert-warning
  )
  .btn-close,
html[data-ukb-theme="dark"]
  .ukb-account-page
  .ukb-account-alerts
  .alert:not(.alert-success):not(.alert-danger):not(.alert-info):not(
    .alert-warning
  )
  .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

/* Dark theme — Child Panel page (Figma 674:15914). */

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-grid
  .ukb-order-form-card,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-aside.ukb-service-details {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
  border-radius: 16px;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-order-form-card
  .ukb-card-body,
html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-child-panel-aside__body {
  background: #181818;
}

html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-card-head__lead--pill {
  background: var(--ukb-teal);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-form-stack--child-panel
  .ukb-field
  .control-label {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-form-stack--child-panel
  .form-control,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-form-stack--child-panel
  select.form-control {
  background-color: #282828 !important;
  border: 0 !important;
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-form-stack--child-panel
  select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 12px 8px !important;
  padding-right: 44px !important;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-form-stack--child-panel
  .form-control::placeholder {
  color: var(--ukb-muted);
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-order-form-card
  .ukb-form-stack--child-panel
  .alert,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-order-form-card
  .ukb-card-body
  > .alert {
  background: #282828;
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-order-form-card
  .ukb-form-stack--child-panel
  .alert
  .btn-close,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-order-form-card
  .ukb-card-body
  > .alert
  .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.75;
}

html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-child-panel-ns {
  background: #282828;
  border-color: transparent;
}

html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-child-panel-ns__title,
html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-child-panel-ns__list,
html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-child-panel-ns__list a {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-copy.ukb-desc-box {
  background: #282828;
  border-color: transparent;
}

html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-child-panel-copy__list a,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-copy__list
  a.ukb-text-link {
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-weight: inherit;
  opacity: 1;
  text-decoration: none;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-copy__heading,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-copy__subheading,
html[data-ukb-theme="dark"] .ukb-child-panel-page .ukb-child-panel-copy__list,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-copy
  .ukb-desc-box__body
  p,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-copy
  .ukb-desc-box__body
  li,
html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-child-panel-copy
  .ukb-desc-box__body
  ol {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-addfunds-history--child-panel
  .ukb-addfunds-history__head {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-addfunds-history--child-panel
  .ukb-addfunds-history__row {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"]
  .ukb-child-panel-page
  .ukb-addfunds-history--child-panel
  .btn-default {
  background: #282828;
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

/* Dark theme — Affiliates page (Figma 674:15048). */

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliates-referral-card {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__title,
html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliates-referral__sub,
html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliates-referral__note,
html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__note
  span {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__input-box {
  background: rgba(33, 186, 203, 0.2);
  border: 1.5px solid rgba(33, 186, 203, 0.6);
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__input {
  color: #ffffff !important;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__share {
  background: transparent;
  border: 1.5px solid #21bacb;
  color: var(--ukb-teal);
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__share
  span {
  background: var(--ukb-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__share:hover,
html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral__share:focus {
  background: rgba(33, 186, 203, 0.1);
  border-color: #21bacb;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral-card
  .ukb-stat--bordered {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral-card
  .ukb-stat__label,
html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-referral-card
  .ukb-stat__value,
html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-stats--affiliates
  .ukb-stat__label,
html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-stats--affiliates
  .ukb-stat__value {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-stats--affiliates
  .ukb-stat {
  background: #181818;
  border: 0;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-stats--affiliates
  .ukb-stat__icon {
  background: rgba(33, 186, 203, 0.2);
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-payouts.ukb-order-form-card {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
  border-radius: 16px;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-payouts
  .ukb-card-body {
  background: #181818;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-payouts__title {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-addfunds-history--affiliates
  .ukb-addfunds-history__head {
  color: #ffffff;
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-addfunds-history--affiliates
  .ukb-addfunds-history__row {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .ukb-affiliates-faq.ukb-service-details {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
  border-radius: 16px;
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliate-faq__body {
  background: #181818;
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliate-faq__list {
  gap: 8px;
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliate-faq__item {
  border-bottom: 0;
  background: #282828;
  border-radius: 12px;
  overflow: hidden;
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliate-faq__summary {
  color: #ffffff;
  padding: 16px 20px;
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliate-faq__panel {
  color: rgba(255, 255, 255, 0.85);
  padding: 0 20px 16px;
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliate-faq__panel p {
  color: rgba(255, 255, 255, 0.85);
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .ukb-affiliate-faq__chevron {
  filter: brightness(0) invert(1);
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .pagination > li > a,
html[data-ukb-theme="dark"] .ukb-affiliates-page .pagination > li > span {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-affiliates-page .pagination > li.active > a,
html[data-ukb-theme="dark"]
  .ukb-affiliates-page
  .pagination
  > li.active
  > span {
  background: var(--ukb-teal);
  border-color: var(--ukb-teal);
  color: #ffffff;
}

/* Dark theme — Notifications (shares .ukb-account-page shell). */

html[data-ukb-theme="dark"] .ukb-account-page .ukb-notifications-card {
  background: #181818;
  border-color: rgba(33, 186, 203, 0.5);
}

html[data-ukb-theme="dark"] .ukb-notifications-row {
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-notifications-row--head,
html[data-ukb-theme="dark"] .ukb-notifications-cell--name {
  color: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-switch__track {
  background: rgba(255, 255, 255, 0.2);
}

html[data-ukb-theme="dark"] .ukb-switch__track::after {
  background: #ffffff;
}

/* Sign up — Figma 164:4344 */
body.ukb-body.ukb-signup-body {
  margin: 0;
  background: #ffffff;
  overflow-x: hidden;
  min-height: 100dvh;
  height: 100dvh;
  overflow-y: hidden;
  padding-bottom: 0px;
}

body.ukb-body.ukb-signup-body .ukb-signup-page {
  height: 100%;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.ukb-signup-page {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100dvh;
  background: #ffffff;
}

.ukb-signup-page__showcase {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  padding: 12px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.ukb-signup-showcase {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  padding: 32px 24px 24px;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(143deg, #21bacb 0%, #000000 100%);
  color: #ffffff;
}

.ukb-signup-showcase__brand {
  position: relative;
  z-index: 3;
  margin: 0;
  line-height: 0;
}

.ukb-signup-showcase__brand-logo {
  display: block;
  width: auto;
  height: 42px;
  max-width: min(100%, 179px);
}

.ukb-signup-showcase__hero {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.ukb-signup-showcase__hero-img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: block;
  width: auto;
  max-width: min(100%, 520px);
  height: auto;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.ukb-signup-showcase__footer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.ukb-signup-showcase__intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.ukb-signup-showcase__title {
  flex: 0 0 auto;
  max-width: 46%;
  margin: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.ukb-signup-showcase__sub {
  flex: 0 1 auto;
  max-width: 240px;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
}

.ukb-signup-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ukb-signup-steps__item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 104px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid transparent;
  box-sizing: border-box;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

@media (hover: hover) and (pointer: fine) {
  .ukb-signup-steps__item {
    cursor: default;
  }

  .ukb-signup-steps__item:hover {
    background: #ffffff;
    border-color: rgba(255, 255, 255, 0.24);
    color: #020618;
  }

  .ukb-signup-steps__item:hover .ukb-signup-steps__num {
    background: #000000;
    color: #ffffff;
  }

  .ukb-signup-steps__item:hover .ukb-signup-steps__text {
    color: #020618;
  }
}

.ukb-signup-steps__item--active {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #020618;
}

.ukb-signup-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.ukb-signup-steps__item--active .ukb-signup-steps__num {
  background: #000000;
  color: #ffffff;
}

.ukb-signup-steps__text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
  display: block;
  max-width: 100%;
}

/* Desktop showcase: keep step labels on two lines (not one wide line on large screens) */
@media (min-width: 993px) {
  .ukb-signup-steps__text {
    max-width: 118px;
    min-height: calc(2 * 1.35 * 1em);
  }
}

.ukb-signup-steps__item--active .ukb-signup-steps__text {
  color: #020618;
}

@media (min-width: 1650px) {
  .ukb-signup-steps {
    gap: 10px;
  }

  .ukb-signup-steps__item {
    min-height: 124px;
    padding: 16px 20px;
    gap: 24px;
  }

  .ukb-signup-steps__text {
    font-size: 16px;
    line-height: 1.5;
    max-width: 118px;
    min-height: calc(2 * 1.5 * 1em);
  }
}

.ukb-signup-page__form-wrap {
  flex: 1 1 50%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 32px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.ukb-signup-page__form-wrap::before,
.ukb-signup-page__form-wrap::after {
  content: "";
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  pointer-events: none;
}

.ukb-signup-panel {
  width: 100%;
  max-width: 436px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 48px;
}

.ukb-signup-panel__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.ukb-signup-panel__stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
}

.ukb-signup-panel__title {
  margin: 0 0 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.56px;
  color: #020618;
  text-transform: capitalize;
}

.ukb-signup-panel__sub {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2b2b22;
}

.ukb-signup-alert {
  margin: 0;
  width: 100%;
}

.ukb-signup-google,
.ukb-signup-google-wrap {
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  background: #ffffff;
}

.ukb-signup-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
  cursor: pointer;
}

.ukb-signup-google:disabled {
  opacity: 1;
  cursor: default;
}

.ukb-signup-google-wrap {
  position: relative;
  width: 100%;
  height: 52px;
  min-height: 52px;
  padding: 0;
  overflow: hidden;
}

.ukb-signup-google-wrap > #g_id_onload {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  z-index: 0;
}

/* Custom label (behind); default GIS iframe on top — full-area clicks */
.ukb-signup-google--visual {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
  user-select: none;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #2b2b22;
}

.ukb-signup-google-wrap .g_id_signin,
.ukb-signup-google-wrap .ukb-signup-google-widget {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0 !important;
  pointer-events: auto;
}

.ukb-signup-google-wrap .g_id_signin > div,
.ukb-signup-google-wrap .ukb-signup-google-widget > div {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ukb-signup-google-wrap iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0.01 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.ukb-signup-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #111111;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.ukb-signup-divider::before,
.ukb-signup-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e8e8e3;
}

.ukb-signup-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
  width: 100%;
  margin: 0;
}

.ukb-signup-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.ukb-signup-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ukb-signup-field--half {
  min-width: 0;
}

.ukb-signup-field--password.ukb-signup-field--half {
  align-self: stretch;
}

.ukb-signup-field--full {
  grid-column: 1 / -1;
}

.ukb-signup-field__label {
  display: block;
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #111111;
}

.ukb-signup-input {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid #e8e8e3;
  border-radius: 12px;
  background: #f8fafc;
  box-sizing: border-box;
}

.ukb-signup-input--password {
  gap: 10px;
}

.ukb-signup-input__control {
  flex: 1 1 auto;
  min-width: 0;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #2b2b22 !important;
}

.ukb-signup-input__control::placeholder {
  color: #2b2b22;
  opacity: 1;
}

.ukb-signup-input__control:read-only {
  cursor: default;
}

.ukb-signup-input--readonly .ukb-signup-input__control {
  background: #f8fafc;
}

.ukb-signup-password-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ukb-signup-password-toggle__icon {
  display: block;
  width: 20px;
  height: 20px;
}

.ukb-signup-password-toggle__icon.is-hidden {
  display: none;
}

.ukb-signup-hint {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #2b2b22;
}

.ukb-signup-agreement {
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b22;
}

.ukb-signup-agreement__label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.ukb-signup-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 6px 32px;
  border: 0;
  border-radius: 12px;
  background: var(--ukb-button-grad);
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.5);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
  cursor: pointer;
}

.ukb-signup-submit__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 4px;
  border-radius: 999px;
  background: #ffffff;
  box-sizing: border-box;
}

.ukb-signup-submit__icon img {
  display: block;
  width: 12px;
  height: 12px;
}

.ukb-signup-footnote {
  margin: 0;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #2b2b22;
}

.ukb-signup-footnote a {
  font-weight: 600;
  background: var(--ukb-button-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: none;
}

.ukb-signup-footnote--center {
  width: 100%;
  text-align: center;
}

.ukb-signup-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.ukb-signup-field__label-row .ukb-signup-field__label {
  margin: 0;
}

.ukb-signup-forgot {
  flex-shrink: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: #21bacb;
  text-decoration: none;
}

.ukb-signup-forgot:hover {
  text-decoration: underline;
}

.ukb-signin-auth-text {
  padding: 0 16px 32px;
  box-sizing: border-box;
}

.ukb-signin-auth-text__inner {
  max-width: 436px;
  margin: 0 auto;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #e8e8e3;
  background: #f8fafc;
  font-family: Inter, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #2b2b22;
}

.ukb-2fa-code {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.ukb-2fa-code__box {
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #e8e8e3 !important;
  border-radius: 12px !important;
  background: #f8fafc !important;
  box-shadow: none !important;
  font-family: Inter, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  text-align: center !important;
  color: #2b2b22 !important;
  caret-color: #21bacb;
}

.ukb-2fa-code__box:focus {
  outline: none;
  border-color: #21bacb !important;
  box-shadow: 0 0 0 2px rgba(33, 186, 203, 0.2) !important;
}

@media (max-width: 992px) {
  body.ukb-body.ukb-signup-body {
    height: auto;
    min-height: 100dvh;
    overflow-y: auto;
  }

  body.ukb-body.ukb-signup-body .ukb-signup-page {
    height: auto;
    max-height: none;
    min-height: 100dvh;
    overflow: hidden;
  }

  .ukb-signup-page {
    flex-direction: column;
    min-height: 100dvh;
  }

  .ukb-signup-page__showcase {
    display: none;
  }

  .ukb-signup-page__form-wrap {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    padding: 24px 16px;
    box-sizing: border-box;
  }

  .ukb-signup-panel {
    gap: 32px;
  }
}

@media (max-width: 576px) {
  .ukb-signup-fields {
    grid-template-columns: 1fr;
  }

  .ukb-signup-field--half {
    grid-column: 1 / -1;
  }

  .ukb-signup-page__form-wrap {
    padding: 20px 16px;
  }
}

html[data-ukb-theme="dark"] body.ukb-body.ukb-signup-body {
  background: #ffffff;
}

html[data-ukb-theme="dark"] body.ukb-body.ukb-signup-body .ukb-signup-page {
  background: #ffffff;
}

html[data-ukb-theme="dark"] .ukb-signup-page .ukb-signup-google-wrap,
html[data-ukb-theme="dark"]
  .ukb-signup-page
  .ukb-signup-google:not(.ukb-signup-google--visual),
html[data-ukb-theme="dark"] .ukb-signup-page .ukb-signup-input {
  border-color: #e8e8e3 !important;
}

html[data-ukb-theme="dark"] .ukb-signup-page .ukb-signup-divider::before,
html[data-ukb-theme="dark"] .ukb-signup-page .ukb-signup-divider::after {
  background: #e8e8e3 !important;
}

.ukb-order-form-card .alert.fade.show {
  opacity: 1;
}

.ukb-order-grid > .ukb-order-form-card > .ukb-card-head,
.ukb-order-grid > .ukb-service-details > .ukb-card-head {
  height: 84px;
  min-height: 84px;
  box-sizing: border-box;
}

/* Create invoice — Figma 674:17658 / 674:17663 (header + instruction card; not global 84px body stretch) */
.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-create-invoice-aside.ukb-service-details
  > .ukb-card-head.ukb-card-head--create-invoice {
  height: auto;
  min-height: 64px;
  padding: 12px 16px;
}

.ukb-create-invoice-grid.ukb-order-grid
  > .ukb-order-form-card
  > .ukb-card-head:has(.ukb-tabs) {
  height: auto;
  min-height: 64px;
  padding: 12px 16px;
}

/* Success alerts — preserve green surface under page-specific dark .alert rules */
html[data-ukb-theme="dark"] .alert.alert-success {
  background-color: var(--ukb-alert-success-bg) !important;
  border: 1px solid var(--ukb-alert-success-border) !important;
  color: var(--ukb-alert-success-text) !important;
}

html[data-ukb-theme="dark"] .alert.alert-danger {
  background-color: rgba(127, 29, 29, 0.35) !important;
  border: 1px solid rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}

html[data-ukb-theme="dark"] .alert.alert-danger .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fecaca'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

html[data-ukb-theme="dark"] .ukb-order-form-card .alert.alert-danger,
html[data-ukb-theme="dark"] .ukb-service-details .alert.alert-danger {
  background-color: rgba(127, 29, 29, 0.35) !important;
  border-color: rgba(248, 113, 113, 0.45) !important;
  color: #fecaca !important;
}

html[data-ukb-theme="dark"] .ukb-order-form-card .alert.alert-success,
html[data-ukb-theme="dark"] .ukb-service-details .alert.alert-success {
  background-color: rgba(22, 101, 52, 0.35) !important;
  border-color: rgba(134, 239, 172, 0.45) !important;
  color: #bbf7d0 !important;
}

html[data-ukb-theme="dark"] .ukb-order-form-card .alert.alert-success a,
html[data-ukb-theme="dark"] .ukb-service-details .alert.alert-success a {
  color: #86efac !important;
}

html[data-ukb-theme="dark"] .ukb-order-form-card .alert.alert-danger a,
html[data-ukb-theme="dark"] .ukb-service-details .alert.alert-danger a {
  color: #fca5a5 !important;
}

html[data-ukb-theme="dark"]
  .ukb-order-form-card
  .alert.alert-success
  .btn-close,
html[data-ukb-theme="dark"]
  .ukb-service-details
  .alert.alert-success
  .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23bbf7d0'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
}

html[data-ukb-theme="dark"] .alert.alert-success .btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23166534'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
  filter: none;
  opacity: 0.65;
}