:root {
  --bg: #191722;
  --surface: rgba(255, 255, 255, 0.76);
  --surface-solid: #fbfbff;
  --surface-soft: rgba(255, 255, 255, 0.46);
  --ink: #090811;
  --muted: #756f86;
  --line: rgba(255, 255, 255, 0.58);
  --line-strong: rgba(88, 66, 139, 0.18);
  --green: #b8fa18;
  --green-dark: #537007;
  --green-soft: #edffb7;
  --purple: #7542d9;
  --purple-dark: #4f27ba;
  --purple-soft: #eadfff;
  --progress-track: rgba(117, 66, 217, 0.15);
  --progress-fill: var(--purple);
  --accent: #090811;
  --blue: #2f6fcc;
  --blue-soft: #e6f0ff;
  --coral: #c75268;
  --coral-soft: #ffe4eb;
  --amber: #886321;
  --amber-soft: #fff0c9;
  --shadow: 0 24px 70px rgba(24, 18, 42, 0.16);
  --soft-shadow: 0 14px 34px rgba(47, 29, 84, 0.1);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #191722;
}

body {
  margin: 0;
  min-height: 100vh;
  min-width: 320px;
  background:
    radial-gradient(circle at 48% -12%, rgba(255, 255, 255, 0.08), transparent 34%),
    linear-gradient(135deg, #191722 0%, #1c1a26 46%, #15141d 100%);
  color: var(--ink);
  font-family: Inter, "SF Pro Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  padding: 28px;
}

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

button {
  cursor: pointer;
}

.app-shell {
  min-height: calc(100vh - 56px);
  max-width: 1760px;
  margin: 0 auto;
  overflow: clip;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 28px;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.24), transparent 30%),
    radial-gradient(circle at 58% 105%, rgba(255, 255, 255, 0.16), transparent 28%),
    linear-gradient(135deg, rgba(244, 243, 248, 0.98) 0%, rgba(224, 222, 232, 0.98) 48%, rgba(204, 202, 214, 0.98) 100%);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.42);
}

.topbar {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(240px, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 20px 24px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  background: #222;
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(22px) saturate(1.12);
}

.topbar-search {
  position: relative;
  display: block;
  width: 100%;
  max-width: 640px;
  min-width: 0;
  justify-self: start;
}

.topbar-search-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  display: inline-flex;
  width: 42px;
  height: 42px;
  color: #fff;
  border-radius: 999px;
  background: #020106;
  pointer-events: none;
  transform: translateY(-50%);
  z-index: 1;
  align-items: center;
  justify-content: center;
}

.topbar-search-icon svg {
  display: block;
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.topbar-search input {
  min-height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 249, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  padding-left: 66px;
  font-size: 14px;
  font-weight: 650;
}

.topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
  justify-self: end;
  margin-right: 0;
  min-width: 0;
}

.topbar-health-widget {
  display: none;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  padding: 8px 10px;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.topbar-health-widget:hover,
.topbar-health-widget:focus-visible {
  border-color: rgba(184, 250, 24, 0.64);
  background: rgba(184, 250, 24, 0.12);
  color: #fff;
  outline: none;
}

.topbar-health-widget:focus-visible {
  outline: 2px solid rgba(184, 250, 24, 0.72);
  outline-offset: 2px;
}

.topbar-health-widget-score {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--green);
  color: #090811;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 950;
  line-height: 1;
}

.topbar-health-widget-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.topbar-health-widget-copy strong {
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.topbar-health-widget-copy span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-health-widget-pill {
  display: inline-flex;
  min-width: 42px;
  min-height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: currentColor;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.topbar-health-widget.is-warning .topbar-health-widget-score,
.topbar-health-widget.is-warning .topbar-health-widget-pill {
  background: var(--amber);
  color: #090811;
}

.topbar-health-widget.is-danger .topbar-health-widget-score,
.topbar-health-widget.is-danger .topbar-health-widget-pill {
  background: var(--coral);
  color: #fff;
}

body.contentds-site-auth-locked .topbar-health-widget {
  display: none;
}

@media (max-width: 900px) {
  .topbar-health-widget {
    display: none;
  }
}

.topbar-actions .topbar-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: 0;
  padding-inline: 18px;
  white-space: nowrap;
  font-weight: 750;
}

.topbar-actions .topbar-action-button + .topbar-action-button {
  box-shadow: inset 1px 0 rgba(255, 255, 255, 0.16);
}

.topbar-actions #siteExchange {
  border-radius: 0 8px 8px 0;
  background: #090811;
  color: #fff;
}

.topbar-actions #siteExchange {
  transition: background 160ms ease, color 160ms ease;
}

.topbar-actions #siteExchange:hover,
.topbar-actions #siteExchange:focus-visible {
  background: #12101d;
  color: #fff;
  transform: none;
  box-shadow: none;
}

.topbar-actions #siteExchange:active {
  transform: none;
}

.topbar-settings {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  min-height: 56px;
}

.topbar-settings-button {
  display: inline-flex;
  width: 44px;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.topbar-settings-button:hover,
.topbar-settings-button:focus-visible,
.topbar-settings-button[aria-expanded="true"] {
  background: transparent;
  color: #fff;
}

.topbar-settings-button:focus-visible {
  outline: 2px solid rgba(204, 204, 204, 0.7);
  outline-offset: 2px;
}

.topbar-settings-button svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.topbar-icon-button {
  display: inline-flex;
  width: 44px;
  min-height: 56px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.topbar-icon-button:hover,
.topbar-icon-button:focus-visible {
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
}

.topbar-icon-button:focus-visible {
  outline: 2px solid rgba(204, 204, 204, 0.7);
  outline-offset: 2px;
}

.topbar-icon-button svg {
  display: block;
  width: 25.3px;
  height: 25.3px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.topbar-admin-switch-button[hidden] {
  display: none !important;
}

/* codex-contentds-room-dsd-orange-topbar-20260531 */
@media (min-width: 901px) {
  body:has(#roomView:not(.is-hidden)) .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    background: #ff5a00;
    backdrop-filter: none;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-search input {
    border-color: #fff;
    background: #f9f9f9;
    color: #bbb;
    font-weight: 500;
    box-shadow: none;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-search input:focus {
    border-color: #fff;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-search input::placeholder {
    color: #bbb;
    font-weight: 500;
    opacity: 1;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-search-icon {
    background: #ff5a00;
    color: #fff;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-settings-button,
  body:has(#roomView:not(.is-hidden)) .topbar-icon-button,
  body:has(#roomView:not(.is-hidden)) .topbar-settings-button:hover,
  body:has(#roomView:not(.is-hidden)) .topbar-settings-button:focus-visible,
  body:has(#roomView:not(.is-hidden)) .topbar-settings-button[aria-expanded="true"],
  body:has(#roomView:not(.is-hidden)) .topbar-icon-button:hover,
  body:has(#roomView:not(.is-hidden)) .topbar-icon-button:focus-visible {
    color: #fff;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-settings-button svg,
  body:has(#roomView:not(.is-hidden)) .topbar-icon-button svg {
    width: 25.3px;
    height: 25.3px;
  }

  /* codex-contentds-room-auth-avatar-desktop-20260603 */
  body:has(#roomView:not(.is-hidden)) .topbar-login-button {
    display: inline-flex;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-login-button:hover,
  body:has(#roomView:not(.is-hidden)) .topbar-login-button:focus-visible {
    color: rgba(255, 255, 255, 0.78);
  }

  body:has(#roomView:not(.is-hidden)) .topbar-login-button:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.72);
    outline-offset: 2px;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-login-button.is-authenticated {
    width: 56px;
    padding: 0 7px;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-user-avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 17px;
    font-weight: 760;
    line-height: 1;
  }

  body:has(#roomView:not(.is-hidden)) .topbar-user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* codex-contentds-crm-muted-dark-navy-topbar-20260612 */
  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .topbar {
    background: #273658;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .topbar-search-icon {
    background: #273658;
  }
}

.topbar-login-button {
  display: none;
}

.topbar-catalog-button,
.topbar-kanban-add-column-button,
.topbar-column-filter-button,
.topbar-automation-button {
  display: none;
}

.settings-menu {
  position: fixed;
  top: 113px;
  right: max(53px, calc((100vw - 1760px) / 2 + 25px));
  z-index: 20;
  min-width: 250px;
  border: 1px solid rgba(17, 16, 26, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 249, 0.96);
  padding: 6px;
  box-shadow: 0 18px 46px rgba(20, 17, 32, 0.2);
}

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

.settings-menu-separator {
  display: block;
  height: 1px;
  margin: 4px 6px;
  background: rgba(17, 16, 26, 0.1);
}

.settings-menu-item {
  display: flex;
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  padding: 10px 12px;
  font: inherit;
  font-weight: 750;
  align-items: center;
  text-align: left;
  text-decoration: none;
}

.settings-menu-item:hover,
.settings-menu-item:focus-visible {
  background: rgba(99, 48, 213, 0.1);
  color: var(--purple);
  outline: none;
}

.auth-modal {
  width: min(420px, calc(100vw - 32px));
  max-width: 100%;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  padding: 0;
}

.auth-modal::backdrop {
  background: rgba(9, 8, 17, 0.58);
  backdrop-filter: blur(8px);
}

.auth-modal-card {
  position: relative;
  display: grid;
  gap: 16px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 18px;
  background: rgba(255, 255, 249, 0.98);
  box-shadow: 0 28px 74px rgba(9, 8, 17, 0.32);
  padding: 34px;
}

.auth-modal-card h2 {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 850;
}

.auth-field {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.auth-field input {
  min-height: 48px;
  border: 1px solid rgba(88, 66, 139, 0.18);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 650;
}

.auth-field input:focus {
  border-color: var(--purple);
  outline: 2px solid rgba(118, 67, 255, 0.2);
  outline-offset: 0;
}

.auth-status {
  min-height: 18px;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.auth-status.is-error {
  color: #c85567;
}

.auth-status.is-success {
  color: #15803d;
}

.auth-submit {
  min-height: 48px;
  border-radius: 8px;
  font-weight: 820;
}

.auth-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: rgba(9, 8, 17, 0.08);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
}

.auth-modal-close:hover,
.auth-modal-close:focus-visible {
  background: var(--ink);
  color: #fff;
}

.auth-modal-close:focus-visible {
  outline: 2px solid rgba(118, 67, 255, 0.35);
  outline-offset: 2px;
}

/* codex-contentds-site-auth-gate-20260619 */
body.contentds-site-auth-locked {
  min-height: 100vh;
  background: #f6f7f3;
}

body.contentds-site-auth-locked .app-shell {
  min-height: 100vh;
}

body.contentds-site-auth-locked .topbar {
  border-bottom: 1px solid rgba(9, 8, 17, 0.08);
  background: rgba(255, 255, 249, 0.96);
  color: #090811;
}

body.contentds-site-auth-locked .topbar-search,
body.contentds-site-auth-locked .topbar-catalog-button,
body.contentds-site-auth-locked .topbar-boards-button,
body.contentds-site-auth-locked .topbar-kanban-add-column-button,
body.contentds-site-auth-locked .topbar-column-filter-button,
body.contentds-site-auth-locked .topbar-automation-button,
body.contentds-site-auth-locked .topbar-settings,
body.contentds-site-auth-locked .topbar-front-button,
body.contentds-site-auth-locked .topbar-sync-card,
body.contentds-site-auth-locked #createProduct,
body.contentds-site-auth-locked #siteExchange,
body.contentds-site-auth-locked #siteExchangeFilterButton {
  display: none !important;
}

body.contentds-site-auth-locked .topbar-login-button {
  display: inline-flex;
  min-height: 46px;
  border: 1px solid rgba(9, 8, 17, 0.16);
  border-radius: 8px;
  background: #090811;
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 760;
  line-height: 1;
}

body.contentds-site-auth-locked .topbar-login-button:hover,
body.contentds-site-auth-locked .topbar-login-button:focus-visible {
  background: #23222a;
}

body.contentds-site-auth-locked .topbar-login-button:focus-visible {
  outline: 2px solid rgba(9, 8, 17, 0.28);
  outline-offset: 2px;
}

.contentds-site-auth-gate[hidden] {
  display: none !important;
}

.contentds-site-auth-gate {
  display: grid;
  min-height: calc(100vh - 92px);
  place-items: center;
  padding: 56px 24px;
}

.contentds-site-auth-gate-card {
  display: grid;
  width: min(420px, 100%);
  gap: 18px;
  justify-items: start;
  border: 1px solid rgba(9, 8, 17, 0.1);
  border-radius: 8px;
  background: #fffff9;
  padding: 34px;
}

.contentds-site-auth-gate-card span {
  color: rgba(9, 8, 17, 0.54);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.contentds-site-auth-gate-card h2 {
  margin: 0;
  color: #090811;
  font-size: 30px;
  line-height: 1.1;
}

.contentds-site-auth-gate-card p {
  margin: 0;
  color: rgba(9, 8, 17, 0.66);
  font-size: 15px;
  font-weight: 650;
}

.topbar-brand {
  display: grid;
  position: relative;
  z-index: 60;
  justify-items: start;
  min-width: 0;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0;
  font-weight: 750;
}

.topbar-caption {
  margin: 6px 0 0;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
}

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

.topbar-logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: min(195px, 100%);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.topbar-logo-wordmark {
  display: inline-flex;
  color: #fff;
  font-size: 34px;
  font-weight: 850;
  line-height: 1;
}

.topbar-logo--text {
  display: none;
}

.topbar-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 27px;
  object-fit: contain;
}

.topbar-logo:hover {
  opacity: 0.86;
}

.topbar-logo[aria-expanded="true"] {
  opacity: 1;
}

.topbar-logo:focus-visible {
  border-radius: 6px;
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

/* codex-kanban-logo-only-board-desktop-20260521 */
@media (min-width: 901px) {
  .topbar-brand.is-kanban-logo-mode .topbar-logo--image {
    display: none;
  }

  .topbar-brand.is-kanban-logo-mode .topbar-logo--text {
    display: inline-flex;
    color: var(--ink);
    font-size: 34px;
    font-weight: 850;
    line-height: 1;
  }
}

/* codex-kanban-topbar-purple-white-trello-desktop-20260521 */
.topbar-boards-button {
  display: none;
}

@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .app-shell {
    border-color: #555;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
    box-shadow: 0 18px 46px rgba(79, 39, 186, 0.28);
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-brand.is-kanban-logo-mode .topbar-logo--text {
    color: #fff;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-brand.is-kanban-logo-mode {
    min-height: 56px;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-catalog-button {
    display: none;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-boards-button {
    position: absolute;
    top: 50%;
    left: clamp(200px, 18vw, 365px);
    display: inline-flex;
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateY(-50%);
    transition: color 0.18s ease, opacity 0.18s ease;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-boards-button:hover,
  body:has(#kanbanView:not(.is-hidden)) .topbar-boards-button:focus-visible {
    color: var(--green);
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-boards-button:focus-visible {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 2px;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-boards-button svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-logo:focus-visible {
    outline-color: #fff;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-settings-button {
    color: #fff;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-settings-button:hover,
  body:has(#kanbanView:not(.is-hidden)) .topbar-settings-button:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .topbar-settings-button[aria-expanded="true"] {
    color: #ccc;
  }
}

/* codex-root-catalog-launcher-20260525 */
@media (min-width: 901px) {
  /* codex-catalog-button-all-pages-20260526 */
  .topbar-brand {
    min-height: 56px;
  }

  .topbar-catalog-button {
    position: absolute;
    top: 50%;
    left: 200px;
    display: inline-flex;
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateY(-50%);
    transition: color 0.18s ease, opacity 0.18s ease;
  }

  .topbar-catalog-button:hover,
  .topbar-catalog-button:focus-visible {
    color: var(--green);
  }

  .topbar-catalog-button:focus-visible {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 2px;
  }

  .topbar-catalog-button svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  body:has(#catalogView:not(.is-hidden)) .topbar-brand {
    min-height: 56px;
  }

  body:has(#catalogView:not(.is-hidden)) .topbar-catalog-button {
    position: absolute;
    top: 50%;
    left: 200px;
    display: inline-flex;
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transform: translateY(-50%);
    transition: color 0.18s ease, opacity 0.18s ease;
  }

  body:has(#catalogView:not(.is-hidden)) .topbar-catalog-button:hover,
  body:has(#catalogView:not(.is-hidden)) .topbar-catalog-button:focus-visible {
    color: var(--green);
  }

  body:has(#catalogView:not(.is-hidden)) .topbar-catalog-button:focus-visible {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 2px;
  }

  body:has(#catalogView:not(.is-hidden)) .topbar-catalog-button svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
}







.catalog-modal {
  width: 70vw;
  height: 70vh;
  max-width: calc(100vw - 96px);
  max-height: calc(100vh - 128px);
  margin: auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 22px;
  background: #222;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.48);
  color: #fff;
  overflow: auto;
  padding: clamp(30px, 3.4vw, 44px);
  outline: none;
}

.catalog-modal::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.catalog-modal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.2vw, 30px);
  justify-content: start;
  align-content: start;
}

.catalog-modal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: clamp(116px, 15vh, 176px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: #2d2d2d;
  color: rgba(255, 255, 255, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 42px rgba(0, 0, 0, 0.22);
  padding: 22px;
  text-align: center;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.catalog-modal-card:hover,
.catalog-modal-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 22px 54px rgba(0, 0, 0, 0.28);
  transform: translateY(-1px);
}

.catalog-modal-card:focus-visible {
  outline: 2px solid rgba(184, 250, 24, 0.72);
  outline-offset: 3px;
}

.catalog-modal-card--trello {
  border-color: rgba(196, 163, 255, 0.28);
  background: #7542d9;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 22px 56px rgba(79, 39, 186, 0.34);
}

.catalog-modal-card--content,
.catalog-modal-card--content:hover,
.catalog-modal-card--content:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #000;
  box-shadow: none;
}

.catalog-modal-card--content:hover,
.catalog-modal-card--content:focus-visible {
  transform: none;
}

.catalog-modal-card--marketing {
  border-color: rgba(255, 122, 184, 0.42);
  background: #f04f9f;
  color: #fff;
}

.catalog-modal-card--marketing:hover,
.catalog-modal-card--marketing:focus-visible {
  border-color: rgba(255, 255, 255, 0.38);
  background: #ff61ad;
}

.catalog-modal-card--health {
  border-color: rgba(184, 250, 24, 0.46);
  background: #b8fa18;
  color: #090811;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    0 22px 56px rgba(184, 250, 24, 0.22);
}

.catalog-modal-card--health:hover,
.catalog-modal-card--health:focus-visible {
  border-color: rgba(255, 255, 255, 0.52);
  background: #c6ff34;
}

.catalog-modal-card--b2b {
  border-color: rgba(255, 255, 255, 0.18);
  background: #ff5a00;
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 22px 56px rgba(255, 90, 0, 0.28);
}

.catalog-modal-card--b2b:hover,
.catalog-modal-card--b2b:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 24px 62px rgba(255, 90, 0, 0.36);
}

.catalog-modal-card--dsd {
  padding: 0;
  overflow: hidden;
}

.catalog-modal-card--dsd:focus-within {
  border-color: rgba(255, 255, 255, 0.34);
}

.catalog-modal-card-main {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  color: inherit;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.catalog-modal-card-main:focus-visible {
  outline: 2px solid rgba(184, 250, 24, 0.72);
  outline-offset: -5px;
}

.catalog-modal-admin-link {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(9, 8, 17, 0.18);
  color: #fff;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.catalog-modal-admin-link:hover,
.catalog-modal-admin-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.18);
}

.catalog-modal-admin-link:focus-visible {
  outline: 2px solid rgba(184, 250, 24, 0.72);
  outline-offset: 3px;
}

.catalog-modal-admin-link svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.catalog-modal-card-title {
  display: block;
  max-width: 100%;
  color: currentColor;
  font-size: 20px;
  font-weight: 850;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.catalog-modal-card-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
  align-items: center;
  justify-content: center;
}

.catalog-modal-card-icon svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.menu-settings-modal::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

@media (min-width: 901px) {
  .menu-settings-modal {
    position: fixed;
    inset: var(--menu-settings-modal-top, 28px) auto auto var(--menu-settings-modal-left, 28px);
    width: var(--menu-settings-modal-width, min(1760px, calc(100vw - 56px)));
    height: var(--menu-settings-modal-height, calc(100vh - 56px));
    max-width: none;
    max-height: none;
    margin: 0;
    border: 1px solid rgba(9, 8, 17, 0.12);
    border-radius: 28px 28px 0 0;
    background: #eee;
    color: #090811;
    overflow: hidden;
    padding: 0;
    outline: none;
  }

  .menu-settings-modal-surface {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    height: 100%;
    padding: 34px 30px 24px;
    overflow: hidden;
  }

  .menu-settings-modal-head {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
  }

  .menu-settings-modal-head h3 {
    flex: 0 0 auto;
    margin: 0;
    color: #090811;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.16;
  }

  .menu-settings-head-device-tabs {
    flex: 0 0 auto;
    margin-left: 56px;
  }

  .menu-settings-modal-head-actions {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-left: auto;
  }

  .menu-builder-action-status {
    max-width: 260px;
    overflow: hidden;
    color: rgba(9, 8, 17, 0.56);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-action-status[data-tone="pending"] {
    color: #6e43d2;
  }

  .menu-builder-action-status[data-tone="success"] {
    color: #257c45;
  }

  .menu-builder-action-status[data-tone="error"] {
    color: #b42318;
  }

  .menu-settings-modal-close {
    display: grid;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border: 1px solid #090811;
    border-radius: 999px;
    background: #090811;
    color: #fff;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    place-items: center;
  }

  .menu-settings-modal-close svg {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  .menu-settings-modal-close:hover,
  .menu-settings-modal-close:focus-visible {
    border-color: #090811;
    background: #191722;
    color: #fff;
    outline: none;
  }

  /* codex-discounts-modal-dark-empty-20260529 */
  .discounts-modal {
    border-color: rgba(255, 255, 255, 0.12);
    background: #222;
    color: #fff;
  }

  .discounts-modal .menu-settings-modal-surface {
    grid-template-rows: auto minmax(0, 1fr);
    gap: 28px;
    padding: 34px 30px 24px;
  }

  .discounts-modal .menu-settings-modal-head {
    width: 100%;
    justify-content: space-between;
  }

  .discounts-modal .menu-settings-modal-head h3 {
    color: #fff;
  }

  .discounts-modal .menu-settings-modal-close {
    margin-left: auto;
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
  }

  .discounts-modal .menu-settings-modal-close:hover,
  .discounts-modal .menu-settings-modal-close:focus-visible {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .discounts-modal-grid {
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    color: #fff;
    overflow: hidden;
  }

  .discounts-modal-column {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    align-content: start;
    padding: 2px 28px 0;
  }

  .discounts-modal-column:first-child {
    padding-left: 0;
  }

  .discounts-modal-column:last-child {
    padding-right: 0;
  }

  .discounts-modal-column + .discounts-modal-column {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .discounts-modal-column-head {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .discounts-modal-column-head h4 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .discounts-modal-add-name {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .discounts-modal-add-name:hover,
  .discounts-modal-add-name:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(110, 67, 210, 0.9);
    outline: none;
  }

  .discounts-modal-add-name:active {
    transform: translateY(1px);
  }

  .discounts-modal-add-name svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .discounts-name-list,
  .discounts-filter-list,
  .discounts-rule-list {
    display: grid;
    min-width: 0;
    align-content: start;
  }

  .discounts-name-list {
    gap: 8px;
    overflow: auto;
    padding-right: 4px;
  }

  .discounts-name-list::-webkit-scrollbar {
    width: 8px;
  }

  .discounts-name-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .discounts-name-item {
    position: relative;
    display: block;
    min-width: 0;
  }

  .discounts-name-item[draggable="true"] .discounts-name-button {
    cursor: grab;
  }

  .discounts-name-item[draggable="true"] .discounts-name-button:active {
    cursor: grabbing;
  }

  .discounts-name-delete {
    position: absolute;
    top: 50%;
    right: 8px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    min-height: 26px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity 0.16s ease, color 0.16s ease, background 0.16s ease;
  }

  .discounts-name-item:hover .discounts-name-delete,
  .discounts-name-item:focus-within .discounts-name-delete {
    opacity: 1;
    pointer-events: auto;
  }

  .discounts-name-delete:hover,
  .discounts-name-delete:focus-visible {
    background: rgba(255, 87, 87, 0.14);
    color: #ff8f8f;
    outline: none;
  }

  .discounts-name-delete svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    min-width: 0;
  }

  .discounts-name-item.is-dragging {
    opacity: 0.54;
  }

  .discounts-name-item.is-drop-before::before,
  .discounts-name-item.is-drop-after::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 999px;
    background: #6e43d2;
    pointer-events: none;
  }

  .discounts-name-item.is-drop-before::before {
    top: -5px;
  }

  .discounts-name-item.is-drop-after::after {
    bottom: -5px;
  }

  .discounts-field,
  .discounts-rule-row {
    display: grid;
    min-width: 0;
    gap: 6px;
  }

  .discounts-filter-list {
    gap: 30px;
    overflow: visible;
  }

  .discounts-filter-area {
    /* codex-discounts-inline-filter-20260530 */
    display: grid;
    min-width: 0;
    align-content: start;
  }

  .discounts-rule-list {
    gap: 12px;
  }

  .discounts-rule-block-title {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }

  .discounts-rule-block-label {
    min-width: 0;
  }

  .discounts-period-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;
  }

  .discounts-period-toggle-control {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 22px;
    flex: 0 0 auto;
  }

  .discounts-period-toggle input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .discounts-period-toggle-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: #1c1c1c;
    transition: background 0.18s ease, border-color 0.18s ease;
  }

  .discounts-period-toggle-track::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    transition: transform 0.18s ease, background 0.18s ease;
  }

  .discounts-period-toggle input:checked + .discounts-period-toggle-track {
    border-color: #6e43d2;
    background: #6e43d2;
  }

  .discounts-period-toggle input:checked + .discounts-period-toggle-track::before {
    transform: translateX(20px);
    background: #fff;
  }

  .discounts-period-toggle input:focus-visible + .discounts-period-toggle-track {
    outline: 2px solid rgba(110, 67, 210, 0.7);
    outline-offset: 3px;
  }

  .discounts-rule-row {
    grid-template-columns: minmax(92px, 0.42fr) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  .discounts-field span,
  .discounts-rule-row span {
    min-width: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .discounts-rule-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .discounts-name-button,
  .discounts-name-input,
  .discounts-field select,
  .discounts-rule-row input {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    text-align: left;
    cursor: pointer;
    color-scheme: dark;
  }

  .discounts-name-input {
    cursor: text;
  }

  .discounts-rule-row input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.72;
    filter: invert(1);
  }

  .discounts-field select {
    appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.72) 50%, transparent 50%);
    background-position:
      calc(100% - 17px) 15px,
      calc(100% - 11px) 15px;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    padding-right: 34px;
  }

  .discounts-field > div,
  .discounts-filter-combobox {
    min-width: 0;
  }

  .discounts-field .site-exchange-filter-select-button {
    min-height: 36px;
  }

  .discounts-field .site-exchange-filter-combobox.is-open {
    z-index: 60;
  }

  .discounts-field .site-exchange-filter-select-panel {
    max-height: min(300px, 42vh);
    box-shadow: none;
  }

  .discounts-field .site-exchange-filter-select-options {
    max-height: 198px;
  }

  .discounts-field .discounts-filter-selected-badges {
    min-height: 0;
    gap: 6px;
    padding-top: 8px;
  }

  .discounts-field .discounts-filter-selected-badge {
    min-height: 26px;
    max-width: 100%;
    border-radius: 7px;
    background: rgba(110, 67, 210, 0.84);
    padding: 0 7px 0 9px;
    font-size: 12px;
    font-weight: 600;
  }

  .discounts-field .discounts-filter-selected-badge span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .discounts-rule-row input::placeholder {
    color: rgba(255, 255, 255, 0.36);
  }

  .discounts-name-button:hover,
  .discounts-name-button:focus-visible,
  .discounts-name-input:focus,
  .discounts-field select:focus,
  .discounts-rule-row input:focus {
    border-color: rgba(255, 255, 255, 0.34);
    background: #242424;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  }

  .discounts-name-button.is-active {
    border-color: rgba(255, 255, 255, 0.48);
    background: #242424;
    color: #fff;
  }

  .discounts-name-button {
    padding-right: 42px;
  }
}

.logo-menu {
  position: absolute;
  top: -8px;
  left: 209px;
  z-index: 80;
  display: grid;
  gap: 4px;
  width: min(270px, calc(100vw - 48px));
  border: 1px solid rgba(17, 16, 26, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 249, 0.97);
  box-shadow: 0 22px 56px rgba(20, 17, 32, 0.24);
  padding: 8px;
  animation: logoMenuSlideIn 180ms ease-out both;
  backdrop-filter: blur(18px);
}

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

.logo-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  padding: 10px 12px;
  font-weight: 780;
  line-height: 1.2;
  text-align: left;
}

.logo-menu-item:hover,
.logo-menu-item:focus-visible {
  background: rgba(9, 8, 17, 0.08);
  outline: none;
}

@keyframes logoMenuSlideIn {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

h2 {
  margin-bottom: 0;
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 720;
  line-height: 1.05;
}

h3 {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 760;
}

.topbar-actions,
.status-controls,
.publish-actions,
.danger-actions,
.view-tabs,
.bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-actions {
  position: relative;
  align-items: stretch;
  gap: 0;
  flex-wrap: nowrap;
}

.topbar-actions.has-site-exchange-progress {
  min-height: 56px;
}

.topbar-actions.has-site-exchange-progress .topbar-sync-card,
.topbar-actions.has-site-exchange-progress #createProduct,
.topbar-actions.has-site-exchange-progress #siteExchange,
.topbar-actions.has-site-exchange-progress #siteExchangeFilterButton {
  visibility: hidden;
}

.site-exchange-progress {
  position: absolute;
  top: 0;
  right: 56px;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 5px;
  align-content: center;
  min-width: 0;
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 8px;
  background: rgba(255, 255, 249, 0.88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 14px 30px rgba(24, 18, 42, 0.1);
  padding: 7px 12px 8px;
  color: var(--ink);
  backdrop-filter: blur(14px);
  pointer-events: none;
}

.site-exchange-progress[hidden] {
  display: none;
}

.site-exchange-progress-head,
.site-exchange-progress-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.site-exchange-progress-head span,
.site-exchange-progress-meta span {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-exchange-progress-head strong {
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.site-exchange-progress-track {
  overflow: hidden;
  height: 4px;
  border-radius: 999px;
  background: rgba(9, 8, 17, 0.12);
}

.site-exchange-progress-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: #ff4d2d;
  box-shadow: 0 0 16px rgba(255, 77, 45, 0.38);
  transition: width 240ms ease, background 180ms ease, box-shadow 180ms ease;
}

.site-exchange-progress.is-running .site-exchange-progress-track span {
  background: linear-gradient(90deg, #ff4d2d 0%, #ff7b36 100%);
}

.site-exchange-progress.is-success .site-exchange-progress-track span {
  background: #22c55e;
  box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
}

.site-exchange-progress.is-warning .site-exchange-progress-track span {
  background: #d98a12;
  box-shadow: 0 0 16px rgba(217, 138, 18, 0.28);
}

.site-exchange-progress.is-error .site-exchange-progress-track span {
  background: var(--coral);
  box-shadow: 0 0 16px rgba(199, 82, 104, 0.28);
}

.view-tabs {
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px;
  background: var(--surface);
}

.view-tab {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 7px 13px;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
}

.view-tab.active {
  background: var(--ink);
  color: #fff;
}

.sync-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sync-indicator.online {
  border-color: rgba(45, 106, 79, 0.2);
  background: var(--green-soft);
  color: var(--green);
}

.sync-indicator.warning {
  border-color: rgba(139, 104, 40, 0.22);
  background: var(--amber-soft);
  color: var(--amber);
}

.button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  font-weight: 720;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 10px 22px rgba(51, 33, 84, 0.12);
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.button-primary {
  border-color: rgba(7, 5, 13, 0.86);
  background: var(--ink);
  color: #fff;
}

.button-secondary {
  background: var(--green);
  color: #142000;
  border-color: rgba(112, 154, 10, 0.28);
}

.button-danger {
  background: var(--coral-soft);
  color: var(--coral);
  border-color: rgba(185, 93, 79, 0.2);
}

#deleteCurrentProduct {
  background: transparent;
  border-color: transparent;
  color: var(--coral);
  box-shadow: none;
  font-weight: 500;
}

#deleteCurrentProduct:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  transform: none;
}

.button-ghost {
  background: transparent;
  border-color: var(--line);
}

.app-main {
  min-height: calc(100vh - 124px);
}

.is-hidden {
  display: none !important;
}

.catalog-view {
  padding: 22px 24px 24px;
}

.dashboard-view {
  padding: 22px 24px 24px;
}

.dashboard-page {
  display: grid;
  gap: 12px;
}

.bfi-view {
  padding: 22px 24px 24px;
}

.bfi-page {
  display: grid;
  gap: 12px;
}

.bfi-refresh-button {
  min-width: 132px;
}

.bfi-panel {
  display: grid;
  gap: 12px;
}

.bfi-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.bfi-panel-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
}

.bfi-panel-head p,
.bfi-status,
.bfi-updated {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.bfi-status.is-error {
  color: var(--coral);
}

.bfi-updated {
  margin-top: 0;
  white-space: nowrap;
}

.bfi-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bfi-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.bfi-table th,
.bfi-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  vertical-align: top;
}

.bfi-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.bfi-table tr:last-child td {
  border-bottom: 0;
}

.bfi-table code {
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}

.bfi-stock-value {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bfi-raw-value {
  display: block;
  max-width: 520px;
  color: var(--muted);
  line-height: 1.45;
  white-space: normal;
}

.bfi-product-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.bfi-product-cell strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}

.bfi-product-cell span {
  color: var(--muted);
  font-size: 12px;
}

.bfi-empty-cell {
  min-height: 64px;
  color: var(--muted) !important;
  text-align: center !important;
}

.dashboard-toolbar {
  display: flex;
  min-height: 30px;
  align-items: center;
  justify-content: flex-start;
}

.dashboard-period-filter {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(117, 111, 134, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: 0 18px 42px rgba(17, 16, 26, 0.07);
}

.dashboard-period-filter button {
  min-height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  padding: 0 14px;
  font: inherit;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
}

.dashboard-period-filter button:hover,
.dashboard-period-filter button:focus-visible {
  background: rgba(17, 16, 26, 0.06);
  color: var(--ink);
  outline: none;
}

.dashboard-period-filter button.is-active {
  background: var(--ink);
  color: #fff;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.dashboard-card {
  display: grid;
  align-content: space-between;
  gap: 20px;
  min-height: 196px;
  padding: 22px;
  overflow: hidden;
}

.dashboard-revenue-card {
  background:
    linear-gradient(135deg, rgba(184, 250, 24, 0.22), rgba(255, 255, 255, 0.62) 46%, rgba(255, 255, 255, 0.86)),
    rgba(255, 255, 255, 0.66);
}

.dashboard-card-head,
.dashboard-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.dashboard-card-head span {
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.08;
}

.dashboard-card-head strong,
.dashboard-card-foot strong {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.dashboard-card-value {
  color: var(--ink);
  font-size: 42px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  white-space: nowrap;
}

.dashboard-card-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dashboard-card-details > div {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(17, 16, 26, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.dashboard-card-details span {
  display: block;
  color: var(--ink);
  font-size: 17px;
  font-weight: 850;
  line-height: 1.1;
}

.dashboard-card-details p,
.dashboard-card-foot span {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.dashboard-card-foot span {
  min-width: 0;
}

@media (max-width: 1500px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
  }
}

.site-health-page {
  gap: 14px;
}

.site-health-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 26px;
  border: 1px solid rgba(17, 16, 26, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.site-health-hero-copy {
  min-width: 0;
}

.site-health-eyebrow {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.site-health-hero h2 {
  margin: 8px 0 0;
  color: var(--ink);
  font-size: 32px;
  font-weight: 900;
  line-height: 1.05;
}

.site-health-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.site-health-hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 132px;
  height: 132px;
  border: 1px solid rgba(17, 16, 26, 0.1);
  border-radius: 8px;
  background: var(--green);
  color: var(--ink);
}

.site-health-hero-score span {
  font-size: 42px;
  font-weight: 950;
  line-height: 1;
}

.site-health-hero-score p {
  max-width: 88px;
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

.site-health-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.site-health-toolbar .dashboard-period-filter {
  border: 1px solid rgba(17, 16, 26, 0.1);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: none;
}

.site-health-tabs {
  max-width: 100%;
  overflow-x: auto;
}

.site-health-tabs button,
.site-health-periods button {
  border-radius: 6px;
}

.site-health-panel {
  display: grid;
  gap: 14px;
}

.site-health-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.site-health-kpi,
.site-health-card,
.site-health-resource {
  border: 1px solid rgba(17, 16, 26, 0.08);
  background: rgba(255, 255, 255, 0.72);
}

.site-health-kpi {
  display: grid;
  gap: 12px;
  min-height: 156px;
  padding: 18px;
}

.site-health-kpi-head,
.site-health-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.site-health-kpi-head strong,
.site-health-card-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
}

.site-health-card-head span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.site-health-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green-dark);
}

.site-health-kpi--warn .site-health-status-dot {
  background: var(--amber);
}

.site-health-kpi--danger .site-health-status-dot {
  background: var(--coral);
}

.site-health-kpi--info .site-health-status-dot {
  background: var(--blue);
}

.site-health-kpi-value {
  color: var(--ink);
  font-size: 34px;
  font-weight: 950;
  line-height: 1;
}

.site-health-kpi p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}

.site-health-overview-grid,
.site-health-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.55fr);
  gap: 14px;
  align-items: stretch;
}

.site-health-card {
  display: grid;
  gap: 18px;
  min-height: 260px;
  padding: 20px;
  overflow: hidden;
}

.site-health-card--wide {
  min-height: 320px;
}

.site-health-score-row {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.site-health-ring {
  display: grid;
  place-items: center;
  width: 178px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--value) * 1%), rgba(17, 16, 26, 0.08) 0);
}

.site-health-ring::before {
  content: "";
  grid-area: 1 / 1;
  width: 126px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}

.site-health-ring span {
  grid-area: 1 / 1;
  position: relative;
  color: var(--ink);
  font-size: 42px;
  font-weight: 950;
}

.site-health-score-breakdown {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.site-health-score-breakdown div,
.site-health-resource,
.site-health-funnel div {
  display: grid;
  gap: 7px;
}

.site-health-score-breakdown div {
  grid-template-columns: minmax(90px, 0.25fr) auto;
  align-items: center;
}

.site-health-score-breakdown span,
.site-health-service-list span,
.site-health-table span,
.site-health-check-table span,
.site-health-resource span,
.site-health-metrika-grid span,
.site-health-seo-grid span,
.site-health-funnel span,
.site-health-task-list span,
.site-health-event-list span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.25;
}

.site-health-score-breakdown strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.site-health-score-breakdown i,
.site-health-resource i {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--green)) 0 / var(--w) 100% no-repeat, rgba(17, 16, 26, 0.08);
}

.site-health-service-list,
.site-health-table,
.site-health-check-table,
.site-health-event-list,
.site-health-task-list {
  display: grid;
  gap: 8px;
}

.site-health-service-list div,
.site-health-table div,
.site-health-check-table div,
.site-health-event-list div,
.site-health-task-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 9px 10px;
  border: 1px solid rgba(17, 16, 26, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.site-health-service-list strong,
.site-health-table strong,
.site-health-check-table strong,
.site-health-resource strong,
.site-health-event-list strong,
.site-health-task-list strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
}

.site-health-table em,
.site-health-check-table em,
.site-health-card-head em,
.site-health-event-list strong.is-ok,
.site-health-event-list strong.is-warn,
.site-health-event-list strong.is-danger,
.site-health-event-list strong.is-info {
  min-width: 52px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  text-align: center;
}

.site-health-table em.is-ok,
.site-health-check-table em.is-ok,
.site-health-card-head em.is-ok,
.site-health-event-list strong.is-ok {
  background: var(--green-soft);
  color: var(--green-dark);
}

.site-health-table em.is-warn,
.site-health-check-table em.is-warn,
.site-health-card-head em.is-warn,
.site-health-event-list strong.is-warn {
  background: var(--amber-soft);
  color: var(--amber);
}

.site-health-table em.is-danger,
.site-health-check-table em.is-danger,
.site-health-card-head em.is-danger,
.site-health-event-list strong.is-danger {
  background: rgba(255, 86, 86, 0.14);
  color: var(--coral);
}

.site-health-table em.is-info,
.site-health-check-table em.is-info,
.site-health-card-head em.is-info,
.site-health-event-list strong.is-info {
  background: rgba(47, 111, 204, 0.12);
  color: var(--blue);
}

.site-health-line-chart {
  width: 100%;
  min-height: 220px;
}

.site-health-chart-grid {
  fill: none;
  stroke: rgba(17, 16, 26, 0.08);
  stroke-width: 1;
}

.site-health-chart-line {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.site-health-chart-line--blue {
  stroke: var(--blue);
}

.site-health-chart-line--green {
  stroke: var(--green-dark);
}

.site-health-chart-line--coral {
  stroke: var(--coral);
}

.site-health-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.site-health-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-health-legend-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.site-health-legend-dot.is-blue {
  background: var(--blue);
}

.site-health-legend-dot.is-green {
  background: var(--green-dark);
}

.site-health-legend-dot.is-coral {
  background: var(--coral);
}

.site-health-bar-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-height: 238px;
}

.site-health-bar-chart div {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  height: 100%;
}

.site-health-bar-chart i {
  display: block;
  min-height: 6px;
  height: var(--h);
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, var(--coral), var(--amber));
}

.site-health-bar-chart--speed i {
  background: linear-gradient(180deg, var(--blue), var(--green-dark));
}

.site-health-bar-chart span,
.site-health-bar-chart strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.site-health-event-list div {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.site-health-event-list time {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.site-health-event-list small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}

.site-health-sync-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.site-health-sync-card {
  display: grid;
  gap: 14px;
  min-height: 292px;
  padding: 18px;
  border: 1px solid rgba(17, 16, 26, 0.08);
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.site-health-sync-card--is-ok {
  border-color: rgba(30, 167, 112, 0.22);
}

.site-health-sync-card--is-warn {
  border-color: rgba(244, 162, 97, 0.28);
}

.site-health-sync-card--is-danger {
  border-color: rgba(255, 86, 86, 0.28);
}

.site-health-sync-card--is-info {
  border-color: rgba(47, 111, 204, 0.22);
}

.site-health-sync-runline,
.site-health-sync-metrics {
  display: grid;
  gap: 8px;
}

.site-health-sync-runline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.site-health-sync-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-health-sync-runline div,
.site-health-sync-metrics div,
.site-health-sync-metric-button {
  display: grid;
  gap: 5px;
  min-width: 0;
  min-height: 70px;
  padding: 11px;
  border: 1px solid rgba(17, 16, 26, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.site-health-sync-metric-button {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.site-health-sync-metric-button:hover,
.site-health-sync-metric-button:focus-visible {
  border-color: rgba(17, 16, 26, 0.18);
  background: rgba(255, 255, 255, 0.76);
  outline: none;
}

.site-health-sync-metric-button:disabled {
  cursor: default;
}

.site-health-sync-metric-button:disabled:hover,
.site-health-sync-metric-button:disabled:focus-visible {
  border-color: rgba(17, 16, 26, 0.08);
  background: rgba(255, 255, 255, 0.5);
}

.site-health-sync-runline strong,
.site-health-sync-metrics strong {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.site-health-sync-runline span,
.site-health-sync-metrics span,
.site-health-sync-schedule span,
.site-health-check-table--sync span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
}

.site-health-sync-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

.site-health-sync-schedule strong {
  color: var(--ink);
  font-weight: 900;
}

.site-health-sync-card p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.35;
}

.site-health-event-list--sync div {
  min-height: 52px;
}

.site-health-state p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

.site-health-kpi-grid--server {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.site-health-resource {
  min-height: 116px;
  padding: 16px;
}

.site-health-resource strong {
  font-size: 28px;
}

.site-health-resource i {
  height: 10px;
}

.site-health-metrika-grid,
.site-health-seo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.site-health-metrika-grid div,
.site-health-seo-grid div {
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 16px;
  border: 1px solid rgba(17, 16, 26, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
}

.site-health-metrika-grid strong,
.site-health-seo-grid strong {
  color: var(--ink);
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

.site-health-metrika-grid i {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.site-health-funnel {
  display: grid;
  gap: 10px;
}

.site-health-funnel div {
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(47, 111, 204, 0.16) var(--w), rgba(255, 255, 255, 0.5) 0);
  border: 1px solid rgba(17, 16, 26, 0.08);
}

.site-health-funnel strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.site-health-task-list div {
  grid-template-columns: auto minmax(0, 1fr);
}

.site-health-task-list strong {
  min-width: 32px;
  padding: 4px 7px;
  border-radius: 6px;
  background: var(--purple-soft);
  color: var(--purple-dark);
  text-align: center;
}

@media (max-width: 1500px) {
  .site-health-kpi-grid,
  .site-health-kpi-grid--server,
  .site-health-sync-grid,
  .site-health-metrika-grid,
  .site-health-seo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-health-overview-grid,
  .site-health-main-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .site-health-hero,
  .site-health-score-row,
  .site-health-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-health-toolbar {
    display: grid;
  }

  .site-health-kpi-grid,
  .site-health-kpi-grid--server,
  .site-health-sync-grid,
  .site-health-metrika-grid,
  .site-health-seo-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-health-hero-score,
  .site-health-ring {
    width: 128px;
  }
}

.kanban-view {
  padding: 22px 24px 24px;
}

/* codex-kanban-background-222-20260521 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .app-main {
    background: #222;
  }
}

.settings-view {
  padding: 22px 24px 24px;
}

.integrations-view {
  padding: 22px 24px 24px;
}

.mail-view {
  padding: 22px 24px 24px;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

@media (min-width: 901px) {
  .menu-builder-shell {
    min-height: 0;
    height: 100%;
  }

  .menu-builder-toolbar {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(260px, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    background: #fff;
    padding: 12px;
    min-width: 0;
  }

  .menu-builder-device-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, 50px);
    width: max-content;
    border: 1px solid rgba(9, 8, 17, 0.12);
    border-radius: 999px;
    background: #f7f7f7;
    padding: 3px;
    gap: 3px;
  }

  .menu-builder-device-tab {
    display: grid;
    width: 50px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(9, 8, 17, 0.52);
    padding: 0;
    line-height: 0;
    place-items: center;
  }

  .menu-builder-device-tab svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .menu-builder-device-tab.is-active {
    border-color: rgba(9, 8, 17, 0.14);
    background: #fff;
    color: #090811;
    box-shadow: 0 6px 16px rgba(9, 8, 17, 0.08);
  }

  .menu-builder-device-tab:hover,
  .menu-builder-device-tab:focus-visible {
    color: #090811;
    outline: none;
  }

  .menu-builder-toolbar-copy,
  .menu-builder-toolbar-status {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .menu-builder-toolbar-copy span,
  .menu-builder-toolbar-status span {
    overflow: hidden;
    color: rgba(9, 8, 17, 0.52);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-toolbar-copy strong {
    overflow: hidden;
    color: #090811;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-toolbar-actions {
    display: flex;
    gap: 8px;
    justify-content: end;
    min-width: 0;
  }

  .menu-builder-button {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(9, 8, 17, 0.14);
    border-radius: 8px;
    background: #f7f7f7;
    color: #090811;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.1;
    white-space: nowrap;
  }

  .menu-builder-button.is-primary {
    border-color: #090811;
    background: #090811;
    color: #fff;
  }

  .menu-builder-button:hover,
  .menu-builder-button:focus-visible {
    border-color: #090811;
    outline: none;
  }

  .menu-builder-button:disabled {
    cursor: wait;
    opacity: 0.58;
  }

  .menu-builder-server-unavailable {
    display: grid;
    min-height: 420px;
    align-content: center;
    justify-items: center;
    gap: 10px;
    border: 1px solid rgba(9, 8, 17, 0.12);
    border-radius: 8px;
    background: #fff;
    color: rgba(9, 8, 17, 0.62);
    padding: 32px;
    text-align: center;
  }

  .menu-builder-server-unavailable strong {
    color: #090811;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.2;
  }

  .menu-builder-server-unavailable span {
    max-width: 560px;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.45;
  }

  .menu-builder-layout {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
    height: 100%;
  }

  .menu-builder-panel {
    display: grid;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    background: #f9f9f9;
    box-shadow: 0 12px 28px rgba(9, 8, 17, 0.04);
    overflow: hidden;
  }

  .menu-builder-panel--sources,
  .menu-builder-panel--sidebar,
  .menu-builder-panel--structure,
  .menu-builder-panel--properties {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .menu-builder-panel--preview {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .menu-builder-panel--desktop-preview {
    align-self: start;
    align-content: start;
    grid-template-rows: auto auto;
    background: #fff;
    overflow: auto;
  }

  .menu-builder-panel--desktop-preview .menu-builder-panel-head {
    display: none;
  }

  .menu-builder-panel--mobile-preview {
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr);
    background: #fff;
  }

  .menu-builder-panel--mobile-preview .menu-builder-panel-head {
    display: none;
  }

  .menu-builder-panel-head,
  .menu-builder-version-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid rgba(9, 8, 17, 0.08);
    background: #fff;
    padding: 12px 14px;
  }

  .menu-builder-version-head {
    border-top: 1px solid rgba(9, 8, 17, 0.08);
  }

  .menu-builder-panel-head h4,
  .menu-builder-version-head h4 {
    margin: 0;
    overflow: hidden;
    color: #090811;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-panel-head span {
    flex: 0 0 auto;
    color: rgba(9, 8, 17, 0.45);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.1;
  }

  /* codex-menu-builder-tabs-two-columns-20260529 */
  .menu-builder-panel-head--tabs {
    display: block;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .menu-builder-sidebar-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: stretch;
    width: 100%;
    min-width: 0;
  }

  .menu-builder-sidebar-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 46px;
    border: 0;
    border-right: 1px solid rgba(9, 8, 17, 0.08);
    background: transparent;
    color: rgba(9, 8, 17, 0.62);
    padding: 0 13px;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
  }

  .menu-builder-sidebar-tab:last-child {
    border-right: 0;
  }

  .menu-builder-sidebar-tab.is-active {
    color: #090811;
    box-shadow: inset 0 -2px 0 #090811;
  }

  .menu-builder-sidebar-tab:hover,
  .menu-builder-sidebar-tab:focus-visible {
    color: #090811;
    outline: none;
  }

  .menu-builder-source-list,
  .menu-builder-structure,
  .menu-builder-properties,
  .menu-builder-version-list {
    min-height: 0;
    overflow: auto;
  }

  .menu-builder-source-list {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px;
  }

  .menu-builder-source-card {
    display: grid;
    min-height: 76px;
    align-content: center;
    gap: 5px;
    border: 1px solid rgba(9, 8, 17, 0.1);
    border-radius: 8px;
    background: #fff;
    color: #090811;
    padding: 12px;
    text-align: left;
  }

  .menu-builder-source-card[draggable="true"] {
    cursor: grab;
    user-select: none;
  }

  .menu-builder-source-card.is-dragging {
    cursor: grabbing;
    opacity: 0.48;
  }

  .menu-builder-source-card:hover,
  .menu-builder-source-card:focus-visible {
    border-color: #090811;
    outline: none;
  }

  .menu-builder-source-card strong,
  .menu-builder-source-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-source-card strong {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.15;
  }

  .menu-builder-source-card span {
    color: rgba(9, 8, 17, 0.5);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
  }

  .menu-builder-structure {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 12px;
  }

  .menu-builder-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 50px;
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    background: #fff;
    padding: 6px 8px 6px max(8px, calc(8px + (var(--menu-level, 0) * 22px)));
  }

  .menu-builder-row.is-selected {
    border-color: #090811;
    box-shadow: inset 0 0 0 1px #090811;
  }

  .menu-builder-row.is-hidden {
    opacity: 0.48;
  }

  .menu-builder-row.is-highlighted .menu-builder-row-branch {
    background: #ff5b2e;
  }

  .menu-builder-row-main {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
  }

  .menu-builder-row-branch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(9, 8, 17, 0.22);
  }

  .menu-builder-row-copy {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .menu-builder-row-copy strong,
  .menu-builder-row-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-row-copy strong {
    color: #090811;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.12;
  }

  .menu-builder-row-copy span {
    color: rgba(9, 8, 17, 0.47);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
  }

  .menu-builder-property-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex: 0 0 auto;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid rgba(9, 8, 17, 0.08);
  }

  .menu-builder-highlight-action {
    margin-right: auto;
  }

  .menu-builder-highlight-action.is-active {
    border-color: rgba(110, 67, 210, 0.52);
    background: rgba(110, 67, 210, 0.12);
    color: #6e43d2;
  }

  .menu-builder-visibility-action {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
  }

  .menu-builder-visibility-action.is-active {
    border-color: rgba(110, 67, 210, 0.52);
    background: rgba(110, 67, 210, 0.12);
    color: #6e43d2;
  }

  .menu-builder-property-actions button,
  .menu-builder-version button {
    display: grid;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(9, 8, 17, 0.1);
    border-radius: 999px;
    background: #f3f3f3;
    color: #090811;
    padding: 0;
    place-items: center;
  }

  .menu-builder-property-actions button:disabled {
    cursor: default;
    opacity: 0.32;
  }

  .menu-builder-property-actions button:not(:disabled):hover,
  .menu-builder-property-actions button:not(:disabled):focus-visible,
  .menu-builder-version button:hover,
  .menu-builder-version button:focus-visible {
    border-color: #090811;
    background: #fff;
    outline: none;
  }

  .menu-builder-property-actions svg,
  .menu-builder-version svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  .menu-builder-highlight-action.is-active svg {
    fill: currentColor;
  }

  .menu-builder-visibility-action.is-active svg {
    fill: none;
  }

  .menu-builder-properties {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    min-height: 100%;
    padding: 12px;
  }

  .menu-builder-field {
    display: grid;
    gap: 6px;
  }

  .menu-builder-field span,
  .menu-builder-check span {
    color: rgba(9, 8, 17, 0.54);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
  }

  .menu-builder-field input,
  .menu-builder-field select,
  .menu-builder-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(9, 8, 17, 0.12);
    border-radius: 8px;
    background: #fff;
    color: #090811;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
  }

  .menu-builder-field input,
  .menu-builder-field select {
    height: 42px;
  }

  .menu-builder-field textarea {
    min-height: 82px;
    padding-top: 10px;
    padding-bottom: 10px;
    resize: vertical;
  }

  .menu-builder-redirect-list {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .menu-builder-field input:focus,
  .menu-builder-field select:focus,
  .menu-builder-field textarea:focus {
    border-color: #090811;
    outline: none;
  }

  .menu-builder-field--static strong {
    color: #090811;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
  }

  .menu-builder-photo-upload-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px;
    align-items: center;
    gap: 8px;
  }

  .menu-builder-photo-upload-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(9, 8, 17, 0.14);
    border-radius: 8px;
    background: #fff;
    color: #090811;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
  }

  .menu-builder-photo-thumb-button {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-color: rgba(9, 8, 17, 0.16);
    background: rgba(9, 8, 17, 0.04);
  }

  .menu-builder-photo-thumb-button.has-image {
    background: #111;
  }

  .menu-builder-photo-upload-button:hover,
  .menu-builder-photo-upload-button:focus-within {
    border-color: rgba(9, 8, 17, 0.32);
    box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.1);
  }

  .menu-builder-photo-upload-button.is-uploading {
    color: rgba(9, 8, 17, 0.42);
    cursor: wait;
  }

  .menu-builder-photo-upload-button span {
    position: relative;
    width: 16px;
    height: 16px;
    color: inherit;
  }

  .menu-builder-photo-upload-button span::before,
  .menu-builder-photo-upload-button span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%);
  }

  .menu-builder-photo-upload-button span::after {
    width: 2px;
    height: 16px;
  }

  .menu-builder-photo-thumb-button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-builder-photo-upload-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    opacity: 0;
    padding: 0;
    cursor: inherit;
  }

  .menu-builder-photo-upload-status {
    min-height: 14px;
    color: rgba(9, 8, 17, 0.48);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
  }

  .menu-builder-photo-upload-status:empty {
    display: none;
  }

  .menu-builder-photo-upload-status.is-error {
    color: #c62828;
  }

  .menu-builder-photo-upload-status.is-success {
    color: #27703a;
  }

  .menu-builder-photo-file-tools {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .menu-builder-photo-file-block {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    border: 1px solid rgba(9, 8, 17, 0.12);
    border-radius: 8px;
    background: rgba(9, 8, 17, 0.025);
    padding: 8px;
  }

  .menu-builder-photo-file-content {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .menu-builder-photo-file-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: rgba(9, 8, 17, 0.54);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }

  .menu-builder-photo-file-meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-photo-file-meta span:first-child {
    color: rgba(9, 8, 17, 0.7);
  }

  .menu-builder-photo-file-meta.is-empty,
  .menu-builder-photo-file-meta.is-error {
    display: block;
  }

  .menu-builder-photo-file-meta.is-error {
    color: #c62828;
  }

  .menu-builder-photo-tool-status {
    min-height: 14px;
    color: rgba(9, 8, 17, 0.48);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.25;
  }

  .menu-builder-photo-tool-status.is-error {
    color: #c62828;
  }

  .menu-builder-photo-tool-status.is-success {
    color: #27703a;
  }

  .menu-builder-photo-tool-status.is-loading {
    color: rgba(9, 8, 17, 0.64);
  }

  .menu-builder-photo-optimize-button {
    width: 100%;
    height: 34px;
    border: 1px solid rgba(9, 8, 17, 0.14);
    border-radius: 8px;
    background: #fff;
    color: #090811;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
  }

  .menu-builder-photo-optimize-button:not(:disabled):hover,
  .menu-builder-photo-optimize-button:not(:disabled):focus-visible {
    border-color: rgba(9, 8, 17, 0.32);
    outline: none;
  }

  .menu-builder-photo-optimize-button:disabled {
    color: rgba(9, 8, 17, 0.36);
    cursor: not-allowed;
  }

  .menu-builder-check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 36px;
  }

  .menu-builder-check input {
    width: 18px;
    height: 18px;
    accent-color: #090811;
  }

  .menu-builder-filter-stack {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .menu-builder-filter-panel {
    display: grid;
    gap: 12px;
    border: 1px solid rgba(9, 8, 17, 0.12);
    border-radius: 8px;
    background: rgba(9, 8, 17, 0.03);
    padding: 10px;
  }

  .menu-builder-filter-title,
  .menu-builder-filter-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .menu-builder-filter-title span,
  .menu-builder-filter-group-head span {
    color: rgba(9, 8, 17, 0.7);
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
  }

  .menu-builder-filter-title small,
  .menu-builder-filter-group-head small,
  .menu-builder-filter-option small,
  .menu-builder-filter-empty {
    color: rgba(9, 8, 17, 0.48);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
  }

  .menu-builder-filter-selection-summary {
    min-width: 0;
    max-width: 170px;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-filter-source,
  .menu-builder-filter-option {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
  }

  .menu-builder-filter-source {
    align-items: center;
    min-height: 34px;
    border: 1px solid rgba(9, 8, 17, 0.1);
    border-radius: 8px;
    background: #fff;
    padding: 0 9px;
  }

  .menu-builder-filter-source--panel {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }

  .menu-builder-filter-source-label {
    min-width: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    overflow-wrap: anywhere;
    color: #090811;
    padding: 0;
    text-align: left;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
    cursor: pointer;
  }

  .menu-builder-filter-source-label:hover,
  .menu-builder-filter-source-label:focus-visible {
    color: var(--purple);
    outline: 0;
  }

  .menu-builder-filter-source-label:focus-visible {
    box-shadow: 0 0 0 2px rgba(117, 66, 217, 0.35);
  }

  .menu-builder-filter-source-label.is-disabled {
    cursor: default;
  }

  .menu-builder-filter-source-label.is-disabled:hover,
  .menu-builder-filter-source-label.is-disabled:focus-visible {
    color: #090811;
    box-shadow: none;
  }

  .menu-builder-filter-source input,
  .menu-builder-filter-option input {
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: #090811;
  }

  .menu-builder-filter-group {
    display: grid;
    gap: 8px;
  }

  .menu-builder-filter-group--picker {
    min-width: 0;
  }

  .menu-builder-filter-picker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .menu-builder-filter-picker-button {
    min-height: 36px;
    border: 1px solid rgba(9, 8, 17, 0.12);
    border-radius: 8px;
    background: #fff;
    color: #090811;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 900;
  }

  .menu-builder-filter-picker-button:hover,
  .menu-builder-filter-picker-button:focus-visible {
    border-color: rgba(9, 8, 17, 0.28);
    background: #f7f7f8;
  }

  .menu-builder-filter-summary {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    border: 0;
    background: transparent;
    font: inherit;
    overflow: visible;
    padding: 0;
    text-align: left;
    cursor: pointer;
  }

  .menu-builder-filter-summary-chip,
  .menu-builder-filter-summary-more,
  .menu-builder-filter-summary-empty {
    min-width: 0;
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    background: #fff;
    color: rgba(9, 8, 17, 0.72);
    padding: 5px 7px;
    font-size: 11px;
    font-weight: 850;
    line-height: 1.1;
  }

  .menu-builder-filter-summary-chip {
    border-color: var(--purple);
    background: var(--purple);
    color: #fff;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .menu-builder-filter-summary-empty {
    color: rgba(9, 8, 17, 0.46);
  }

  .menu-builder-filter-options {
    display: grid;
    gap: 6px;
    max-height: 172px;
    overflow: auto;
    padding-right: 4px;
  }

  .menu-builder-filter-option {
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    background: #fff;
    padding: 8px;
  }

  .menu-builder-filter-option span {
    display: grid;
    min-width: 0;
    gap: 3px;
  }

  .menu-builder-filter-option strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #090811;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.2;
  }

  .menu-builder-filter-empty {
    border: 1px dashed rgba(9, 8, 17, 0.14);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
  }

  .menu-builder-choice-modal {
    position: fixed;
    z-index: 30;
    inset: var(--menu-builder-choice-modal-top, var(--menu-settings-modal-top, 28px)) auto auto var(--menu-builder-choice-modal-left, var(--menu-settings-modal-left, 28px));
    display: grid;
    width: var(--menu-builder-choice-modal-width, var(--menu-settings-modal-width, min(1760px, calc(100vw - 56px))));
    height: var(--menu-builder-choice-modal-height, var(--menu-settings-modal-height, calc(100vh - 56px)));
    border-radius: 28px;
    background: rgba(0, 0, 0, 0.62);
    overflow: hidden;
    padding: 0;
  }

  .menu-builder-choice-card {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 28px;
    background: #222;
    color: #fff;
    overflow: hidden;
  }

  .menu-builder-choice-card--with-roots {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .menu-builder-choice-card--with-roots.menu-builder-choice-card--with-parents {
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }

  .menu-builder-choice-head {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(220px, 1fr);
    min-width: 0;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 20px 16px;
  }

  .menu-builder-choice-title {
    display: grid;
    min-width: 0;
    justify-self: start;
    gap: 4px;
  }

  .menu-builder-choice-head h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1.16;
  }

  .menu-builder-choice-title > span,
  .menu-builder-choice-search span,
  .menu-builder-choice-toolbar small,
  .menu-builder-choice-fourth-head small,
  .menu-builder-choice-empty,
  .menu-builder-choice-option small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
  }

  .menu-builder-choice-head-actions {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 14px;
    margin-left: 0;
  }

  .menu-builder-choice-selected-badges {
    display: flex;
    min-width: 0;
    max-width: 100%;
    max-height: 72px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    flex-wrap: wrap;
    gap: 6px;
    overflow: auto;
  }

  .menu-builder-choice-selected-badges.is-empty {
    min-height: 0;
  }

  .menu-builder-choice-selected-badge {
    display: inline-flex;
    max-width: 220px;
    min-width: 0;
    min-height: 30px;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(184, 250, 24, 0.88);
    border-radius: 8px;
    background: var(--green);
    color: var(--ink);
    padding: 0 6px 0 10px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
  }

  .menu-builder-choice-selected-badge > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-choice-selected-badge button {
    display: grid;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(9, 8, 17, 0.12);
    color: var(--ink);
    padding: 0;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
  }

  .menu-builder-choice-selected-badge button:hover,
  .menu-builder-choice-selected-badge button:focus-visible {
    background: rgba(9, 8, 17, 0.2);
  }

  .menu-builder-choice-close {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
    font-size: 28px;
    line-height: 1;
  }

  .menu-builder-choice-close:hover,
  .menu-builder-choice-close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
  }

  .menu-builder-choice-search {
    display: grid;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 16px 20px;
  }

  .menu-builder-choice-search input {
    width: 100%;
    min-height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 650;
    outline: none;
    box-shadow: none;
  }

  .menu-builder-choice-search input:focus {
    border-color: rgba(255, 255, 255, 0.36);
    background: #242424;
  }

  .menu-builder-choice-search input::placeholder {
    color: rgba(255, 255, 255, 0.36);
  }

  .menu-builder-choice-roots,
  .menu-builder-choice-parents {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 20px;
  }

  .menu-builder-choice-parents {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .menu-builder-choice-root,
  .menu-builder-choice-parent {
    display: inline-flex;
    max-width: 100%;
    min-height: 34px;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    padding: 0 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 850;
  }

  .menu-builder-choice-roots .menu-builder-choice-root input,
  .menu-builder-choice-parents .menu-builder-choice-parent input {
    position: static;
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    accent-color: #ffffff;
  }

  .menu-builder-choice-root span,
  .menu-builder-choice-parent span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-choice-root small,
  .menu-builder-choice-parent small {
    color: rgba(255, 255, 255, 0.46);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
  }

  .menu-builder-choice-root:hover,
  .menu-builder-choice-root:focus-visible,
  .menu-builder-choice-parent:hover,
  .menu-builder-choice-parent:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
  }

  .menu-builder-choice-root.is-active,
  .menu-builder-choice-parent.is-active {
    border-color: rgba(110, 67, 210, 0.9);
    background: #6e43d2;
    color: #fff;
  }

  .menu-builder-choice-root.is-active small,
  .menu-builder-choice-parent.is-active small {
    color: rgba(255, 255, 255, 0.72);
  }

  .menu-builder-choice-root.is-selected,
  .menu-builder-choice-root:has(input:checked),
  .menu-builder-choice-parent.is-selected,
  .menu-builder-choice-parent:has(input:checked) {
    border-color: rgba(184, 250, 24, 0.88);
    background: var(--green);
    color: var(--ink);
  }

  .menu-builder-choice-root.is-selected small,
  .menu-builder-choice-root:has(input:checked) small,
  .menu-builder-choice-parent.is-selected small,
  .menu-builder-choice-parent:has(input:checked) small {
    color: rgba(9, 8, 17, 0.62);
  }

  .menu-builder-choice-toolbar {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 0;
  }

  .menu-builder-choice-toolbar span {
    min-width: 0;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  .menu-builder-choice-toolbar button {
    min-height: 34px;
    min-width: 120px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 850;
  }

  .menu-builder-choice-toolbar button:hover,
  .menu-builder-choice-toolbar button:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .menu-builder-choice-toolbar button:disabled {
    opacity: 0.52;
  }

  .menu-builder-choice-list {
    display: grid;
    align-content: start;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 8px;
    min-height: 0;
    overflow: auto;
    padding: 18px 20px 24px;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 16px 20px 24px;
  }

  .menu-builder-choice-option {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    gap: 10px;
    min-height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #242424;
    color: #fff;
    padding: 10px;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    min-height: 34px;
    width: auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    padding: 0 12px 0 10px;
    font-size: 12px;
    font-weight: 850;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="brand"] .menu-builder-choice-option {
    align-items: center;
    min-height: 46px;
  }

  .menu-builder-choice-option:hover,
  .menu-builder-choice-option:focus-within {
    border-color: rgba(255, 255, 255, 0.32);
    background: #282828;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option:hover,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option:focus-within {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
  }

  /* codex-menu-choice-subcategory-sand-outline-corners-20260623 */
  .menu-builder-choice-root.has-subcategories,
  .menu-builder-choice-parent.has-subcategories,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.has-subcategories {
    border-color: rgba(224, 190, 125, 0.72);
    color: #ead6ad;
  }

  .menu-builder-choice-root.has-subcategories:hover,
  .menu-builder-choice-root.has-subcategories:focus-visible,
  .menu-builder-choice-parent.has-subcategories:hover,
  .menu-builder-choice-parent.has-subcategories:focus-visible,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.has-subcategories:hover,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.has-subcategories:focus-within {
    border-color: rgba(238, 209, 151, 0.86);
    color: #fff0ce;
  }

  .menu-builder-choice-option.has-fourth-level {
    cursor: pointer;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.is-fourth-active {
    border-color: rgba(110, 67, 210, 0.9);
    background: #6e43d2;
    color: #fff;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.is-selected,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option:has(input:checked) {
    border-color: rgba(184, 250, 24, 0.88);
    background: var(--green);
    color: var(--ink);
  }

  .menu-builder-choice-root.has-subcategories.is-active,
  .menu-builder-choice-parent.has-subcategories.is-active,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.has-subcategories.is-fourth-active,
  .menu-builder-choice-root.has-subcategories.is-selected,
  .menu-builder-choice-root.has-subcategories:has(input:checked),
  .menu-builder-choice-parent.has-subcategories.is-selected,
  .menu-builder-choice-parent.has-subcategories:has(input:checked),
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.has-subcategories.is-selected,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.has-subcategories:has(input:checked) {
    border-color: rgba(238, 203, 137, 0.9);
  }

  .menu-builder-choice-root.has-subcategories.is-active,
  .menu-builder-choice-parent.has-subcategories.is-active {
    color: #fff;
  }

  .menu-builder-choice-root.has-subcategories.is-selected,
  .menu-builder-choice-root.has-subcategories:has(input:checked),
  .menu-builder-choice-parent.has-subcategories.is-selected,
  .menu-builder-choice-parent.has-subcategories:has(input:checked) {
    color: var(--ink);
  }

  .menu-builder-choice-option input {
    width: 18px;
    min-width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #6e43d2;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option input {
    position: static;
    width: 14px;
    min-width: 14px;
    height: 14px;
    margin: 0;
    opacity: 1;
    pointer-events: auto;
    cursor: pointer;
    accent-color: #ffffff;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="brand"] .menu-builder-choice-option input {
    margin-top: 0;
  }

  .menu-builder-choice-option span {
    display: grid;
    min-width: 0;
    gap: 4px;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option span {
    display: inline-flex;
    align-items: center;
    gap: 0;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"].menu-builder-choice-list--search .menu-builder-choice-option span {
    display: grid;
    align-items: start;
    gap: 3px;
  }

  .menu-builder-choice-option strong {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option strong {
    overflow: hidden;
    color: currentColor;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"].menu-builder-choice-list--search .menu-builder-choice-option strong {
    white-space: normal;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"].menu-builder-choice-list--search .menu-builder-choice-option small {
    color: rgba(255, 255, 255, 0.48);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.15;
  }

  .menu-builder-choice-option-count {
    display: inline-grid;
    min-width: 22px;
    height: 22px;
    margin-left: auto;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.68);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option-count {
    display: inline;
    min-width: 0;
    height: auto;
    margin-left: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.46);
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.is-fourth-active .menu-builder-choice-option-count {
    color: rgba(255, 255, 255, 0.72);
  }

  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option.is-selected .menu-builder-choice-option-count,
  .menu-builder-choice-list[data-menu-builder-choice-list="category"] .menu-builder-choice-option:has(input:checked) .menu-builder-choice-option-count {
    color: rgba(9, 8, 17, 0.62);
  }

  .menu-builder-choice-fourth-block {
    display: flex;
    flex: 0 0 100%;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 14px;
    padding-top: 16px;
  }

  .menu-builder-choice-fourth-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .menu-builder-choice-empty {
    grid-column: 1 / -1;
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 18px;
    text-align: center;
  }

  .menu-builder-photo-layout-field {
    gap: 8px;
  }

  .menu-builder-photo-layout-field--header {
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: end;
    gap: 10px;
    margin: 0;
  }

  .menu-builder-photo-layout-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .menu-builder-photo-layout-button {
    display: grid;
    place-items: center;
    width: 86px;
    height: 44px;
    border: 1px solid rgba(9, 8, 17, 0.14);
    border-radius: 8px;
    background: #fff;
    color: rgba(9, 8, 17, 0.44);
    padding: 0;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease;
  }

  .menu-builder-photo-layout-button:hover,
  .menu-builder-photo-layout-button:focus-visible {
    border-color: rgba(9, 8, 17, 0.32);
    color: #090811;
    outline: none;
  }

  .menu-builder-photo-layout-button.is-active {
    border-color: #090811;
    box-shadow: inset 0 0 0 1px #090811;
    color: #090811;
  }

  .menu-builder-photo-layout-icon {
    display: grid;
    width: 58px;
    height: 26px;
    gap: 5px;
  }

  .menu-builder-photo-layout-icon--single {
    grid-template-columns: 1fr;
  }

  .menu-builder-photo-layout-icon--portrait {
    place-items: center;
  }

  .menu-builder-photo-layout-icon--portrait span {
    width: 18px;
    height: 26px;
  }

  .menu-builder-photo-layout-icon--double {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-builder-photo-layout-icon--triple,
  .menu-builder-photo-layout-icon--quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .menu-builder-photo-layout-icon--triple span:first-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .menu-builder-photo-layout-icon--triple span:nth-child(2) {
    grid-column: 1;
    grid-row: 1;
  }

  .menu-builder-photo-layout-icon--triple span:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .menu-builder-photo-layout-icon span {
    min-width: 0;
    min-height: 0;
    border: 2px solid currentColor;
    background: #fff;
  }

  .menu-builder-photo-settings-panel {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    min-width: 0;
    height: 360px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(9, 8, 17, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: #090811;
    padding: 14px;
  }

  .menu-builder-photo-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
  }

  .menu-builder-photo-settings-title {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .menu-builder-photo-settings-actions {
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
    overflow-x: auto;
  }

  .menu-builder-photo-settings-actions .menu-builder-field {
    width: auto;
  }

  .menu-builder-photo-settings-actions .menu-builder-photo-layout-options {
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .menu-builder-photo-settings-actions .menu-builder-photo-layout-button {
    width: 68px;
    height: 38px;
  }

  .menu-builder-photo-settings-actions .menu-builder-photo-layout-icon {
    width: 44px;
    height: 22px;
    gap: 4px;
  }

  .menu-builder-photo-settings-actions .menu-builder-photo-layout-icon--portrait span {
    width: 16px;
    height: 22px;
  }

  .menu-builder-photo-settings-head h4 {
    margin: 0;
    overflow: hidden;
    color: #090811;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-photo-settings-title > span {
    overflow: hidden;
    color: rgba(9, 8, 17, 0.54);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-photo-settings-body {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    gap: 0;
    min-height: 0;
    overflow: auto;
  }

  .menu-builder-photo-settings-slot {
    display: grid;
    gap: 10px;
    min-width: 0;
    border-left: 1px solid rgba(9, 8, 17, 0.1);
    background: transparent;
    padding: 0 12px;
  }

  .menu-builder-photo-settings-slot:first-child {
    border-left: 0;
    padding-left: 0;
  }

  .menu-builder-photo-settings-slot:last-child {
    padding-right: 0;
  }

  .menu-builder-photo-settings-slot.is-empty {
    pointer-events: none;
  }

  .menu-builder-photo-settings-body > .menu-builder-photo-layout-field {
    grid-column: 1 / -1;
  }

  .menu-builder-preview-frame {
    display: grid;
    gap: 10px;
    border-bottom: 1px solid rgba(9, 8, 17, 0.08);
    background: #fff;
    padding: 12px;
  }

  .menu-builder-preview-topline {
    display: grid;
    gap: 8px;
    min-width: 0;
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    padding: 10px;
  }

  .menu-builder-preview-topline strong {
    overflow: hidden;
    color: #090811;
    font-size: 14px;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-preview-topline nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    overflow: hidden;
  }

  .menu-builder-preview-link {
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(9, 8, 17, 0.09);
    border-radius: 999px;
    color: #090811;
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.1;
    text-decoration: none;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-preview-link.is-highlighted {
    border-color: rgba(255, 91, 46, 0.45);
    background: #fff0eb;
    color: #be3109;
  }

  .menu-builder-preview-dropdown {
    display: grid;
    gap: 4px;
    max-height: 214px;
    overflow: auto;
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    background: #fafafa;
    padding: 8px;
  }

  .menu-builder-preview-tree-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    min-height: 28px;
    border-radius: 6px;
    padding: 4px 6px 4px max(6px, calc(6px + (var(--preview-level, 0) * 16px)));
  }

  .menu-builder-preview-tree-row.is-highlighted {
    background: #fff0eb;
  }

  .menu-builder-preview-tree-row span,
  .menu-builder-preview-tree-row small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-preview-tree-row span {
    color: #090811;
    font-size: 12px;
    font-weight: 850;
    line-height: 1.1;
  }

  .menu-builder-preview-tree-row small {
    color: rgba(9, 8, 17, 0.44);
    font-size: 10px;
    font-weight: 900;
    line-height: 1.1;
  }

  .menu-builder-version-list {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 12px;
  }

  .menu-builder-version {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid rgba(9, 8, 17, 0.08);
    border-radius: 8px;
    background: #fff;
    padding: 10px;
  }

  .menu-builder-version.is-published {
    border-color: rgba(32, 128, 84, 0.32);
    background: #f0fbf5;
  }

  .menu-builder-version div {
    display: grid;
    gap: 3px;
    min-width: 0;
  }

  .menu-builder-version strong,
  .menu-builder-version span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-version strong {
    color: #090811;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
  }

  .menu-builder-version span {
    color: rgba(9, 8, 17, 0.48);
    font-size: 11px;
    font-weight: 850;
    line-height: 1.2;
  }

  .menu-builder-empty,
  .menu-builder-version-empty {
    display: grid;
    min-height: 120px;
    place-items: center;
    border: 1px dashed rgba(9, 8, 17, 0.14);
    border-radius: 8px;
    color: rgba(9, 8, 17, 0.46);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
  }

  .menu-builder-version-empty {
    min-height: 76px;
    background: #fff;
  }

  /* codex-menu-builder-preview-full-container-20260616 */
  .menu-builder-desktop-preview {
    box-sizing: border-box;
    container-type: inline-size;
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 0;
    background: #fff;
  }

  /* codex-menu-builder-double-sports-top-nav-20260607 */
  .menu-builder-desktop-preview-topbar {
    box-sizing: border-box;
    display: grid;
    align-items: center;
    width: 100%;
    min-width: 0;
    min-height: min(96px, 4.7cqw);
    border-bottom: 1px solid rgba(9, 8, 17, 0.1);
    background: #fff;
    padding: 0 3.18cqw;
  }

  .menu-builder-desktop-preview-topnav {
    display: flex;
    align-items: center;
    gap: 2.15cqw;
    min-width: 0;
    overflow: hidden;
  }

  .menu-builder-desktop-preview-top-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #090811;
    font-family: inherit;
    font-size: min(20px, 0.98cqw);
    font-weight: 300 !important;
    letter-spacing: 0;
    line-height: 1.22;
    padding: 0;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }

  .menu-builder-desktop-preview-top-link.is-active {
    color: #090811;
    font-weight: 700 !important;
  }

  /* codex-menu-builder-spacer-button-20260621 */
  .menu-builder-desktop-preview-spacer {
    appearance: none;
    display: block;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  .menu-builder-desktop-preview-spacer--top-link {
    width: 2.8cqw;
    height: min(20px, 0.98cqw);
    flex: 0 0 2.8cqw;
  }

  .menu-builder-desktop-preview-spacer--category,
  .menu-builder-desktop-preview-spacer--detail,
  .menu-builder-desktop-preview-spacer--brand {
    width: 100%;
    min-height: min(20px, 1.05cqw);
  }

  .menu-builder-desktop-preview-spacer:hover,
  .menu-builder-desktop-preview-spacer:focus-visible,
  .menu-builder-desktop-preview-spacer.is-selected {
    background: rgba(9, 8, 17, 0.04);
    box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.24);
    outline: none;
  }

  .menu-builder-desktop-preview-spacer.is-hidden {
    opacity: 0.38;
  }

  /* codex-menu-builder-preview-13-items-height-20260620 */
  .menu-builder-desktop-preview-grid {
    container-type: inline-size;
    display: grid;
    grid-template-columns: 19.2% 19% 22.3% 39.5%;
    width: 100%;
    min-width: 0;
    aspect-ratio: 2048 / 650;
    min-height: 0;
    overflow: hidden;
  }

  /* codex-menu-builder-brands-next-to-portrait-photo-20260617 */
  .menu-builder-desktop-preview-grid:has(.menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--portrait) {
    grid-template-columns: 19.2% 41.5% 22.3% 17%;
  }

  .menu-builder-desktop-preview-column {
    display: grid;
    align-content: start;
    gap: 1.16cqw;
    min-width: 0;
    padding: 1.3cqw 2.1cqw 1.3cqw 3.18cqw;
  }

  /* codex-menu-builder-drag-source-columns-20260529 */
  .menu-builder-desktop-preview [data-menu-builder-drop-role] {
    position: relative;
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
  }

  .menu-builder-desktop-preview [data-menu-builder-drop-role]::after {
    position: absolute;
    inset: 12px;
    border: 1px dashed transparent;
    border-radius: 8px;
    content: "";
    pointer-events: none;
    transition: border-color 0.16s ease;
  }

  .menu-builder-desktop-preview [data-menu-builder-drop-role].is-drop-active {
    background: #f7f7f7;
    box-shadow: inset 0 0 0 2px rgba(9, 8, 17, 0.12);
  }

  .menu-builder-desktop-preview [data-menu-builder-drop-role].is-drop-active::after {
    border-color: rgba(9, 8, 17, 0.32);
  }

  .menu-builder-desktop-preview-column--details {
    gap: 1.08cqw;
    padding: 3.55cqw 2cqw 1.3cqw 1.76cqw;
  }

  .menu-builder-desktop-preview-column--brands {
    border-left: 1px solid rgba(9, 8, 17, 0.1);
    padding-left: 2.05cqw;
  }

  /* codex-menu-builder-preview-dropdown-font-16px-20260621 */
  .menu-builder-desktop-preview-title {
    margin: 0;
    color: #18171d;
    font-size: min(16px, 0.98cqw);
    font-weight: 800 !important;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .menu-builder-desktop-preview-nav,
  .menu-builder-desktop-preview-stack {
    display: grid;
    align-content: start;
    gap: 0.76cqw;
    min-width: 0;
  }

  .menu-builder-desktop-preview-link,
  .menu-builder-desktop-preview-text-link,
  .menu-builder-desktop-preview-all {
    color: #1c1b20;
    font-size: min(16px, 0.98cqw);
    line-height: 1.14;
    text-decoration: none;
  }

  .menu-builder-desktop-preview-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0.88cqw;
    align-items: center;
    gap: 0.49cqw;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
  }

  .menu-builder-desktop-preview-column[data-menu-builder-drop-role="category"] .menu-builder-desktop-preview-link {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu-builder-desktop-preview-link span:first-child,
  .menu-builder-desktop-preview-text-link,
  .menu-builder-desktop-preview-all {
    overflow-wrap: anywhere;
  }

  .menu-builder-desktop-preview-link.is-active .menu-builder-desktop-preview-arrow {
    color: #18171d;
  }

  .menu-builder-desktop-preview-arrow {
    color: rgba(9, 8, 17, 0.32);
    font-size: min(32px, 1.56cqw);
    font-weight: 700 !important;
    line-height: 0.8;
  }

  .menu-builder-desktop-preview-column[data-menu-builder-drop-role="category"] .menu-builder-desktop-preview-arrow {
    display: none;
  }

  .menu-builder-desktop-preview-copy {
    max-width: 14.9cqw;
    margin: 0;
    color: rgba(9, 8, 17, 0.58);
    font-size: min(16px, 0.96cqw);
    line-height: 1.34;
  }

  .menu-builder-desktop-preview-all {
    max-width: 15.2cqw;
    font-weight: 700 !important;
  }

  .menu-settings-modal .menu-builder-desktop-preview-title {
    font-weight: 800 !important;
  }

  .menu-settings-modal .menu-builder-desktop-preview-all,
  .menu-settings-modal .menu-builder-desktop-preview-arrow {
    font-weight: 700 !important;
  }

  .menu-builder-desktop-preview-media {
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-width: 0;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
    background: #fff;
    padding: 0;
  }

  .menu-builder-desktop-preview-media img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    transform: none;
  }

  /* codex-menu-builder-photo-source-20260530 */
  .menu-builder-desktop-preview-photo {
    display: grid;
    min-width: 0;
    border: 0;
    background: transparent;
    color: #1c1b20;
    font-family: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
  }

  .discounts-rule-row input:disabled {
    border-color: rgba(255, 255, 255, 0.08);
    background: #191919;
    color: rgba(255, 255, 255, 0.48);
    cursor: not-allowed;
  }

  .discounts-period-field:has(input:disabled) span {
    color: rgba(255, 255, 255, 0.38);
  }

  .menu-builder-desktop-preview-photo--inline {
    gap: 8px;
  }

  .menu-builder-desktop-preview-photo-slot {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: min(8px, 0.39cqw);
    min-width: 0;
    min-height: 0;
    overflow: visible;
    background: #fff;
  }

  .menu-builder-desktop-preview-photo-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    min-width: 0;
    gap: 4px;
    background: #fff;
  }

  .menu-builder-desktop-preview-photo--triple .menu-builder-desktop-preview-photo-slots,
  .menu-builder-desktop-preview-photo--quad .menu-builder-desktop-preview-photo-slots {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .menu-builder-desktop-preview-photo--triple [data-menu-builder-photo-slot="primary"] {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .menu-builder-desktop-preview-photo--triple [data-menu-builder-photo-slot="secondary"] {
    grid-column: 1;
    grid-row: 1;
  }

  .menu-builder-desktop-preview-photo--triple [data-menu-builder-photo-slot="tertiary"] {
    grid-column: 1;
    grid-row: 2;
  }

  .menu-builder-desktop-preview-photo--inline.menu-builder-desktop-preview-photo--single .menu-builder-desktop-preview-photo-slot,
  .menu-builder-desktop-preview-photo--inline .menu-builder-desktop-preview-photo-slots {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
  }

  .menu-builder-desktop-preview-photo--inline.menu-builder-desktop-preview-photo--portrait .menu-builder-desktop-preview-photo-slot {
    width: min(100%, 92px);
    aspect-ratio: 3 / 4;
    border-radius: 6px;
    justify-self: end;
  }

  .menu-builder-desktop-preview-photo-image-frame {
    display: grid;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: #f6f6f6;
  }

  .menu-builder-desktop-preview-photo-image-frame img,
  .menu-builder-desktop-preview-photo-image-frame .menu-builder-desktop-preview-photo-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
    background: #f6f6f6;
    object-fit: cover;
  }

  .menu-builder-desktop-preview-photo-placeholder {
    display: grid;
    place-items: center;
    color: rgba(9, 8, 17, 0.42);
    font-size: 12px;
    font-weight: 850;
  }

  .menu-builder-desktop-preview-photo-label {
    overflow: hidden;
    color: inherit;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-desktop-preview-photo-caption {
    box-sizing: border-box;
    display: block;
    min-width: 0;
    min-height: 24px;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(9, 8, 17, 0.14);
    border-radius: 0;
    background: #fff;
    color: rgba(9, 8, 17, 0.72);
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
    padding: 4px 6px;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    outline: none;
  }

  .menu-builder-desktop-preview-photo-caption.is-empty {
    color: rgba(9, 8, 17, 0.34);
    font-weight: 600;
  }

  .menu-builder-desktop-preview-photo-caption.is-caption-drop-active,
  .menu-builder-desktop-preview-photo-caption:focus {
    border-color: rgba(9, 8, 17, 0.48);
    background: #fff;
    color: #090811;
  }

  /* codex-menu-builder-preview-drag-reorder-move-20260617 */
  .menu-builder-desktop-preview [data-menu-builder-preview-drag] {
    cursor: grab;
  }

  .menu-builder-desktop-preview [data-menu-builder-preview-drag]:active,
  .menu-builder-desktop-preview [data-menu-builder-preview-drag].is-preview-dragging {
    cursor: grabbing;
  }

  .menu-builder-desktop-preview .is-preview-dragging {
    opacity: 0.45;
  }

  .menu-builder-desktop-preview .is-preview-drop-before,
  .menu-builder-desktop-preview .is-preview-drop-after,
  .menu-builder-desktop-preview .is-preview-drop-inside {
    color: #090811;
  }

  .menu-builder-desktop-preview .is-preview-drop-before {
    box-shadow: 0 -2px 0 #090811;
  }

  .menu-builder-desktop-preview .is-preview-drop-after {
    box-shadow: 0 2px 0 #090811;
  }

  .menu-builder-desktop-preview-top-link.is-preview-drop-before {
    box-shadow: -3px 0 0 #090811;
  }

  .menu-builder-desktop-preview-top-link.is-preview-drop-after {
    box-shadow: 3px 0 0 #090811;
  }

  .menu-builder-desktop-preview .is-preview-drop-inside {
    background: rgba(9, 8, 17, 0.06);
    box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.2);
  }

  .menu-builder-desktop-preview-photo.menu-builder-desktop-preview-photo--media {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0 10px 40px 0;
    background: #fff;
  }

  .menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--single .menu-builder-desktop-preview-photo-slot,
  .menu-builder-desktop-preview-photo--media .menu-builder-desktop-preview-photo-slots {
    width: 100%;
    height: 100%;
  }

  .menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--portrait {
    justify-items: end;
  }

  .menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--portrait .menu-builder-desktop-preview-photo-slot {
    width: min(42%, 320px);
    height: 100%;
  }

  .menu-builder-desktop-preview-grid:has(.menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--portrait) .menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--portrait .menu-builder-desktop-preview-photo-slot {
    width: 100%;
  }

  /* codex-menu-builder-quad-equal-rectangles-desktop-20260614 */
  .menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--quad .menu-builder-desktop-preview-photo-slots {
    align-items: stretch;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .menu-builder-desktop-preview-photo--media.menu-builder-desktop-preview-photo--quad .menu-builder-desktop-preview-photo-slot {
    height: auto;
  }

  .menu-builder-desktop-preview-photo--media .menu-builder-desktop-preview-photo-slot {
    height: auto;
    background: #fff;
  }

  .menu-builder-desktop-preview-photo--media .menu-builder-desktop-preview-photo-image-frame {
    background: #eee8df;
  }

  .menu-builder-desktop-preview-photo--media .menu-builder-desktop-preview-photo-image-frame img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    object-position: center;
    transform: none;
  }

  .menu-builder-desktop-preview-photo--media .menu-builder-desktop-preview-photo-caption {
    min-height: 28px;
    font-size: 13px;
    padding: 5px 8px;
  }

  .menu-builder-desktop-preview-photo--media .menu-builder-desktop-preview-photo-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .menu-builder-desktop-preview-media-empty {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 100%;
    color: rgba(9, 8, 17, 0.38);
    font-size: 13px;
    font-weight: 850;
  }

  /* codex-menu-builder-preview-click-properties-20260529 */
  button.menu-builder-desktop-preview-title,
  button.menu-builder-desktop-preview-top-link,
  button.menu-builder-desktop-preview-text-link,
  button.menu-builder-desktop-preview-all,
  button.menu-builder-desktop-preview-copy,
  button.menu-builder-desktop-preview-spacer,
  button.menu-builder-desktop-preview-photo,
  div.menu-builder-desktop-preview-photo {
    appearance: none;
    border: 0;
    background: transparent;
    font-family: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
  }

  .menu-builder-desktop-preview-link,
  .menu-builder-desktop-preview-top-link,
  .menu-builder-desktop-preview-text-link,
  .menu-builder-desktop-preview-all,
  .menu-builder-desktop-preview-copy,
  .menu-builder-desktop-preview-spacer,
  .menu-builder-desktop-preview-photo,
  .menu-builder-desktop-preview-title {
    border-radius: 4px;
    outline: none;
    outline-offset: 0;
    transition: color 0.16s ease, opacity 0.16s ease, font-weight 0.16s ease;
  }

  .menu-builder-desktop-preview-link:hover,
  .menu-builder-desktop-preview-top-link:hover,
  .menu-builder-desktop-preview-text-link:hover,
  .menu-builder-desktop-preview-all:hover,
  .menu-builder-desktop-preview-copy:hover,
  .menu-builder-desktop-preview-photo:hover,
  .menu-builder-desktop-preview-title:hover {
    color: #090811;
    font-weight: 700 !important;
  }

  .menu-builder-desktop-preview-link:focus-visible,
  .menu-builder-desktop-preview-top-link:focus-visible,
  .menu-builder-desktop-preview-text-link:focus-visible,
  .menu-builder-desktop-preview-all:focus-visible,
  .menu-builder-desktop-preview-copy:focus-visible,
  .menu-builder-desktop-preview-photo:focus-visible,
  .menu-builder-desktop-preview-title:focus-visible,
  .menu-builder-desktop-preview-link.is-selected,
  .menu-builder-desktop-preview-top-link.is-selected,
  .menu-builder-desktop-preview-text-link.is-selected,
  .menu-builder-desktop-preview-all.is-selected,
  .menu-builder-desktop-preview-copy.is-selected,
  .menu-builder-desktop-preview-photo.is-selected,
  .menu-builder-desktop-preview-title.is-selected {
    outline: none;
    font-weight: 700 !important;
  }

  .menu-builder-desktop-preview-link.is-hidden,
  .menu-builder-desktop-preview-top-link.is-hidden,
  .menu-builder-desktop-preview-text-link.is-hidden,
  .menu-builder-desktop-preview-all.is-hidden,
  .menu-builder-desktop-preview-copy.is-hidden,
  .menu-builder-desktop-preview-photo.is-hidden,
  .menu-builder-desktop-preview-title.is-hidden {
    opacity: 0.38;
  }

  .menu-builder-desktop-preview-link.is-highlighted,
  .menu-builder-desktop-preview-top-link.is-highlighted,
  .menu-builder-desktop-preview-text-link.is-highlighted,
  .menu-builder-desktop-preview-all.is-highlighted,
  .menu-builder-desktop-preview-copy.is-highlighted,
  .menu-builder-desktop-preview-photo.is-highlighted,
  .menu-builder-desktop-preview-title.is-highlighted {
    color: #f36b3f;
    font-weight: 700 !important;
  }

  .menu-builder-brand-weight-panel {
    box-sizing: border-box;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    width: 100%;
    min-width: 0;
    height: 360px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(9, 8, 17, 0.1);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: #090811;
    padding: 14px;
  }

  /* codex-menu-builder-brand-weight-detached-panel-20260616 */
  /* codex-menu-builder-photo-selection-layout-20260616 */
  .menu-builder-layout--desktop-preview {
    grid-template-rows: max-content minmax(0, 360px);
    row-gap: 18px;
  }

  .menu-builder-layout--desktop-preview .menu-builder-panel--sidebar {
    min-height: 0;
    contain: size;
    grid-row: 1 / span 2;
  }

  .menu-builder-layout--desktop-preview .menu-builder-panel--desktop-preview {
    grid-row: 1;
  }

  .menu-builder-layout--desktop-preview .menu-builder-brand-weight-panel--detached {
    grid-column: 2;
    grid-row: 2;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    align-self: start;
  }

  .menu-builder-layout--desktop-preview .menu-builder-brand-weight-panel--detached .menu-builder-brand-weight-head {
    display: none;
  }

  .menu-builder-layout--desktop-preview .menu-builder-photo-settings-panel {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .menu-builder-brand-weight-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    min-width: 0;
  }

  .menu-builder-brand-weight-head div {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .menu-builder-brand-weight-head h4 {
    margin: 0;
    color: inherit;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.15;
  }

  .menu-builder-brand-weight-head span,
  .menu-builder-brand-weight-head strong {
    overflow: hidden;
    color: rgba(9, 8, 17, 0.54);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-brand-weight-head strong {
    flex: 0 0 auto;
    color: rgba(9, 8, 17, 0.62);
  }

  .menu-builder-brand-weight-table {
    display: block;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    scrollbar-gutter: stable;
  }

  /* codex-menu-builder-brand-three-columns-no-column-bg-20260616 */
  .menu-builder-brand-weight-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-width: 0;
    min-height: 100%;
    padding: 0;
    background: transparent;
  }

  .menu-builder-brand-weight-column {
    min-width: 0;
    border-left: 1px solid rgba(9, 8, 17, 0.1);
    background: transparent;
  }

  .menu-builder-brand-weight-column:first-child {
    border-left: 0;
  }

  .menu-builder-brand-weight-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    min-width: 0;
    min-height: 42px;
    break-inside: avoid;
    border-top: 0;
    background: transparent;
  }

  .menu-builder-brand-weight-row[draggable="true"] {
    cursor: grab;
  }

  .menu-builder-brand-weight-row.is-dragging {
    opacity: 0.48;
  }

  .menu-builder-brand-weight-row.is-drop-before::before,
  .menu-builder-brand-weight-row.is-drop-after::after {
    content: "";
    position: absolute;
    right: 8px;
    left: 8px;
    z-index: 2;
    height: 2px;
    border-radius: 999px;
    background: #6e43d2;
    box-shadow: 0 0 0 1px rgba(110, 67, 210, 0.22);
  }

  .menu-builder-brand-weight-row.is-drop-before::before {
    top: -1px;
  }

  .menu-builder-brand-weight-row.is-drop-after::after {
    bottom: -1px;
  }

  .menu-builder-brand-weight-row:first-child {
    border-top: 0;
  }

  .menu-builder-brand-weight-row.is-selected {
    background: rgba(110, 67, 210, 0.1);
    box-shadow: inset 2px 0 0 #6e43d2;
  }

  .menu-builder-brand-weight-row > span,
  .menu-builder-brand-weight-name {
    min-width: 0;
    padding: 0 10px;
  }

  .menu-builder-brand-weight-row > span:nth-child(2) {
    padding: 0 8px;
  }

  .menu-builder-brand-weight-name {
    display: block;
    width: 100%;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.15;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: inherit;
  }

  .menu-builder-brand-weight-name:hover,
  .menu-builder-brand-weight-name:focus-visible {
    color: #6e43d2;
    outline: none;
  }

  .menu-builder-brand-weight-count {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: flex-end;
    color: rgba(9, 8, 17, 0.7);
    font-size: 13px;
    font-weight: 850;
    line-height: 1.15;
    text-align: right;
  }

  .menu-builder-brand-weight-empty {
    display: grid;
    min-height: 68px;
    place-items: center;
    color: rgba(9, 8, 17, 0.5);
    font-size: 13px;
    font-weight: 850;
  }

  /* codex-menu-builder-mobile-iphone-editor-20260530 */
  .menu-builder-mobile-preview {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: auto;
    background: #fff;
    padding: 18px 10px 10px 0;
  }

  .menu-builder-mobile-preview-devices {
    display: flex;
    min-width: max-content;
    align-items: center;
    justify-content: center;
    gap: 24px;
  }

  .menu-builder-mobile-phone {
    position: relative;
    flex: 0 0 clamp(258px, 18vw, 390px);
    width: clamp(258px, 18vw, 390px);
    max-width: none;
    aspect-ratio: 390 / 844;
    border-radius: 56px;
    background: #ccc;
    padding: 12px;
    box-shadow: 0 30px 70px rgba(9, 8, 17, 0.18), inset 0 0 0 1px rgba(9, 8, 17, 0.08);
  }

  .menu-builder-mobile-phone-button {
    position: absolute;
    z-index: 0;
    width: 3px;
    border-radius: 999px;
    background: #b8b8b8;
  }

  .menu-builder-mobile-phone-button--left {
    top: 132px;
    left: -3px;
    height: 72px;
  }

  .menu-builder-mobile-phone-button--right {
    top: 184px;
    right: -3px;
    height: 96px;
  }

  .menu-builder-mobile-phone-bezel {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: hidden;
    border-radius: 44px;
    background: #ccc;
    padding: 4px;
  }

  .menu-builder-mobile-screen {
    position: relative;
    height: 100%;
    overflow: hidden;
    border-radius: 40px;
    background: #f3f3f3;
  }

  .menu-builder-mobile-island {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 50%;
    width: 92px;
    height: 27px;
    border-radius: 999px;
    background: #070708;
    transform: translateX(-50%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    pointer-events: none;
  }

  .menu-builder-mobile-page {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #f3f3f3;
  }

  .menu-builder-mobile-drawer {
    container-type: inline-size;
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    display: grid;
    width: 86.3%;
    grid-template-rows: auto auto minmax(0, 1fr);
    overflow: hidden;
    background: #fff;
    color: #454545;
  }

  .menu-builder-mobile-submenu-drawer {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .menu-builder-mobile-drawer-top {
    display: grid;
    height: 66px;
    grid-template-columns: minmax(0, 1fr) 48px;
    align-items: center;
    background: #020203;
    padding: 0 20px 0 18px;
  }

  .menu-builder-mobile-drawer-close {
    position: relative;
    display: block;
    width: 33px;
    height: 33px;
  }

  .menu-builder-mobile-drawer-close::before,
  .menu-builder-mobile-drawer-close::after {
    position: absolute;
    top: 15px;
    left: 0;
    width: 33px;
    height: 3px;
    border-radius: 999px;
    background: #fff;
    content: "";
  }

  .menu-builder-mobile-drawer-close::before {
    transform: rotate(45deg);
  }

  .menu-builder-mobile-drawer-close::after {
    transform: rotate(-45deg);
  }

  .menu-builder-mobile-submenu-top {
    display: grid;
    height: 66px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 4px;
    background: #020203;
    color: #fff;
    padding: 0 10px;
  }

  .menu-builder-mobile-submenu-title {
    min-width: 0;
    overflow: hidden;
    font-size: min(21px, 6.1cqw);
    line-height: 1.1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-mobile-submenu-back {
    position: relative;
    display: block;
    width: 31px;
    height: 31px;
  }

  .menu-builder-mobile-submenu-back::before {
    position: absolute;
    top: 3px;
    left: 8px;
    width: 21px;
    height: 21px;
    border-top: 3px solid currentColor;
    border-left: 3px solid currentColor;
    content: "";
    transform: rotate(-45deg);
  }

  .menu-builder-mobile-submenu-top .menu-builder-mobile-drawer-close {
    justify-self: end;
    width: 28px;
    height: 28px;
  }

  .menu-builder-mobile-submenu-top .menu-builder-mobile-drawer-close::before,
  .menu-builder-mobile-submenu-top .menu-builder-mobile-drawer-close::after {
    top: 13px;
    width: 28px;
  }

  /* codex-menu-builder-mobile-drag-source-visual-20260530 */
  .menu-builder-mobile-drawer[data-menu-builder-drop-role] {
    transition: background-color 0.16s ease, box-shadow 0.16s ease;
  }

  .menu-builder-mobile-drawer[data-menu-builder-drop-role]::after {
    position: absolute;
    z-index: 3;
    inset: 8px;
    border: 1px dashed transparent;
    border-radius: 12px;
    content: "";
    pointer-events: none;
    transition: border-color 0.16s ease;
  }

  .menu-builder-mobile-drawer[data-menu-builder-drop-role].is-drop-active {
    background: #f8f8f8;
    box-shadow: inset 0 0 0 2px rgba(9, 8, 17, 0.1);
  }

  .menu-builder-mobile-drawer[data-menu-builder-drop-role].is-drop-active::after {
    border-color: rgba(9, 8, 17, 0.3);
  }

  .menu-builder-mobile-preview-list {
    position: relative;
    display: grid;
    align-content: start;
    min-height: 0;
    background: #fff;
  }

  .menu-builder-mobile-preview-list::after {
    position: absolute;
    inset: 8px;
    border: 1px dashed transparent;
    border-radius: 12px;
    content: "";
    pointer-events: none;
    transition: border-color 0.16s ease;
  }

  .menu-builder-mobile-preview-list.is-drop-active {
    background: #f8f8f8;
    box-shadow: inset 0 0 0 2px rgba(9, 8, 17, 0.1);
  }

  .menu-builder-mobile-preview-list.is-drop-active::after {
    border-color: rgba(9, 8, 17, 0.3);
  }

  .menu-builder-mobile-preview-row {
    appearance: none;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    border: 0;
    border-bottom: 1px solid #e2e2e2;
    border-radius: 0;
    background: #fff;
    color: #454545;
    font-family: inherit;
    font-size: min(20px, 6.25cqw);
    line-height: 1.18;
    padding: 0 16px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
  }

  .menu-builder-mobile-preview-row-label {
    min-width: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-builder-mobile-preview-row-icon {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #000;
  }

  .menu-builder-mobile-preview-row-icon--chevron {
    font-size: min(42px, 13cqw);
    line-height: 0.7;
  }

  .menu-builder-mobile-preview-row-icon--pin svg {
    display: block;
    width: 23px;
    height: 23px;
    fill: currentColor;
  }

  .menu-builder-mobile-preview-row-icon--empty {
    visibility: hidden;
  }

  .menu-builder-mobile-preview-row:hover,
  .menu-builder-mobile-preview-row:focus-visible {
    background: #f7f7f7;
    color: #090811;
    outline: none;
  }

  .menu-builder-mobile-preview-row.is-selected {
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 0 2px #090811;
  }

  .menu-builder-mobile-preview-row.is-hidden {
    opacity: 0.38;
  }

  .menu-builder-mobile-preview-row.is-highlighted {
    color: #f36b3f;
  }

  .menu-builder-mobile-submenu-row {
    font-size: min(18px, 5.4cqw);
    min-height: 50px;
  }

  .menu-builder-mobile-preview-plane {
    position: absolute;
    right: 35px;
    bottom: 8px;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    color: #000;
    transform: rotate(-4deg);
    pointer-events: none;
  }

  .menu-builder-mobile-preview-plane svg {
    display: block;
    width: 34px;
    height: 34px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.8;
  }

  @media (max-width: 1500px) and (min-width: 901px) {
    .menu-builder-layout {
      grid-template-columns: 286px minmax(0, 1fr);
    }

    .menu-builder-desktop-preview-grid {
      grid-template-columns: 19.2% 19% 22.3% 39.5%;
    }

    .menu-builder-desktop-preview-column {
      gap: 1.16cqw;
      padding: 1.3cqw 2.1cqw 1.3cqw 3.18cqw;
    }

    .menu-builder-desktop-preview-column--details {
      gap: 1.08cqw;
      padding: 3.55cqw 2cqw 1.3cqw 1.76cqw;
    }

    .menu-builder-desktop-preview-column--brands {
      padding-left: 2.05cqw;
    }

    .menu-builder-desktop-preview-link,
    .menu-builder-desktop-preview-text-link,
    .menu-builder-desktop-preview-all {
      font-size: min(16px, 0.98cqw);
    }

    .menu-builder-desktop-preview-copy {
      font-size: min(16px, 0.96cqw);
    }
  }

  /* codex-menu-builder-normal-weight-20260529 */
  .menu-settings-modal,
  .menu-settings-modal * {
    font-weight: 400 !important;
  }

  .menu-settings-modal .menu-builder-desktop-preview-top-link {
    font-weight: 300 !important;
  }

  .menu-settings-modal .menu-builder-desktop-preview-top-link:is(:hover, :focus-visible, .is-active, .is-selected, .is-highlighted) {
    font-weight: 700 !important;
  }

  .menu-settings-modal .menu-builder-desktop-preview-link:is(.is-active, .is-selected, .is-highlighted),
  .menu-settings-modal .menu-builder-desktop-preview-text-link:is(.is-active, .is-selected, .is-highlighted),
  .menu-settings-modal .menu-builder-desktop-preview-all:is(.is-active, .is-selected, .is-highlighted),
  .menu-settings-modal .menu-builder-desktop-preview-copy:is(.is-active, .is-selected, .is-highlighted) {
    font-weight: 700 !important;
  }

  .menu-settings-modal .menu-builder-desktop-preview-link:is(:hover, :focus-visible, .is-active, .is-selected, .is-highlighted) > span:first-child {
    font-weight: 700 !important;
  }
}

/* codex-settings-menu-sizes-only-20260520 */
.settings-view.settings-view-has-category-menu .settings-layout {
  grid-template-columns: minmax(210px, 250px) minmax(250px, 300px) minmax(250px, 300px) minmax(0, 1fr);
}

.integrations-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.mail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.mail-empty-panel {
  min-height: calc(100vh - 172px);
}

.mail-empty-surface {
  min-height: 420px;
}

.mail-panel {
  display: grid;
  gap: 14px;
}

.mail-panel-title {
  min-width: 0;
  margin-bottom: 2px;
}

.mail-panel-title p {
  min-width: 0;
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 650;
}

.mail-panel-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.mail-compose-open-button,
.mail-refresh-button {
  inline-size: 132px;
  flex: 0 0 132px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 8px;
  padding-inline: 16px;
  white-space: nowrap;
}

.mail-status {
  min-height: 22px;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  font-weight: 650;
}

.mail-status.is-error {
  color: #ffb7aa;
}

.mail-message-list {
  display: grid;
  gap: 8px;
  align-content: start;
  transition: opacity 120ms ease;
}

.mail-message-list.is-loading {
  opacity: 0.58;
  pointer-events: none;
}

.mail-bulk-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.mail-bulk-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 760;
}

.mail-bulk-select-all input,
.mail-message-select input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #b3ff00;
}

.mail-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  min-width: 0;
}

.mail-bulk-action,
.mail-bulk-clear,
.mail-bulk-label-select {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.84);
  font: inherit;
  font-size: 12px;
  font-weight: 740;
}

.mail-bulk-action,
.mail-bulk-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  cursor: pointer;
}

.mail-bulk-label-select {
  max-width: 180px;
  padding: 0 30px 0 10px;
  color-scheme: dark;
}

.mail-bulk-action:hover,
.mail-bulk-action:focus-visible,
.mail-bulk-clear:hover,
.mail-bulk-clear:focus-visible,
.mail-bulk-label-select:hover,
.mail-bulk-label-select:focus-visible {
  border-color: rgba(179, 255, 0, 0.46);
  background: rgba(179, 255, 0, 0.1);
  outline: none;
}

.mail-bulk-action:disabled,
.mail-bulk-clear:disabled,
.mail-bulk-label-select:disabled {
  cursor: default;
  opacity: 0.56;
}

.mail-bulk-action--danger {
  border-color: rgba(255, 116, 93, 0.34);
  color: #ffd5cf;
}

.mail-bulk-status {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
}

.mail-bulk-status.is-success {
  color: #c7ff4a;
}

.mail-bulk-status.is-error {
  color: #ffb7aa;
}

.mail-content {
  display: grid;
  grid-template-columns: minmax(168px, 220px) minmax(280px, 0.95fr) minmax(420px, 1.45fr);
  gap: 14px;
  align-items: start;
}

.mail-folder-panel {
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  background: rgba(34, 34, 34, 0.72);
  color: rgba(255, 255, 255, 0.92);
}

.mail-folder-item {
  width: 100%;
  display: flex;
  align-items: center;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.74);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.mail-folder-item.is-active {
  pointer-events: none;
}

.mail-folder-item.is-active {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.96);
}

.mail-folder-item:hover,
.mail-folder-item:focus-visible {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.mail-folder-item:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.34);
  outline-offset: 2px;
}

.mail-sidebar-section {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mail-sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mail-sidebar-section-title {
  color: rgba(255, 255, 255, 0.54);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mail-sidebar-control-list,
.mail-rule-list {
  display: grid;
  gap: 6px;
}

.mail-sidebar-control {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.mail-sidebar-control span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-sidebar-control small {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.44);
  font-size: 11px;
  font-weight: 760;
}

.mail-sidebar-control.is-active small,
.mail-sidebar-control:hover small,
.mail-sidebar-control:focus-visible small {
  color: rgba(255, 255, 255, 0.72);
}

.mail-smart-section-list {
  margin-bottom: 4px;
}

.mail-sidebar-control:hover,
.mail-sidebar-control:focus-visible,
.mail-sidebar-control.is-active {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.94);
  outline: none;
}

.mail-sidebar-control.is-active {
  pointer-events: none;
}

.mail-sidebar-label-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}

.mail-saved-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}

.mail-saved-filter-row.is-custom {
  grid-template-columns: minmax(0, 1fr) 28px;
}

.mail-saved-filter {
  min-height: 40px;
}

.mail-saved-filter small {
  max-width: 86px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-sidebar-label-row .mail-sidebar-label {
  min-width: 0;
}

.mail-sidebar-label::before,
.mail-label-add-button::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--mail-label-color, #8fd14f);
}

.mail-sidebar-label-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-sidebar-label-count {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.62);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.35;
}

.mail-sidebar-label-actions {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.mail-sidebar-label-actions button,
.mail-saved-filter-row > button:not(.mail-saved-filter),
.mail-sidebar-small-button,
.mail-rule-item button,
.mail-label-badge button,
.mail-detail-label-tools-head button,
.mail-label-add-button {
  min-height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 12px;
  font-weight: 720;
  cursor: pointer;
}

.mail-sidebar-label-actions button {
  display: inline-grid;
  width: 28px;
  min-width: 28px;
  padding: 0;
  place-items: center;
  font-size: 13px;
  line-height: 1;
}

.mail-saved-filter-row > button:not(.mail-saved-filter) {
  display: inline-grid;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  font-size: 13px;
  line-height: 1;
}

.mail-sidebar-label-actions [data-mail-label-color] span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mail-label-color, #8fd14f);
}

.mail-sidebar-label-row.is-favorite [data-mail-label-favorite] {
  border-color: rgba(179, 255, 0, 0.42);
  background: rgba(179, 255, 0, 0.1);
  color: #b3ff00;
}

.mail-sidebar-small-button {
  padding: 0 9px;
}

.mail-sidebar-label-actions button:hover,
.mail-sidebar-label-actions button:focus-visible,
.mail-saved-filter-row > button:not(.mail-saved-filter):hover,
.mail-saved-filter-row > button:not(.mail-saved-filter):focus-visible,
.mail-sidebar-small-button:hover,
.mail-sidebar-small-button:focus-visible,
.mail-rule-item button:hover,
.mail-rule-item button:focus-visible,
.mail-label-badge button:hover,
.mail-label-badge button:focus-visible,
.mail-detail-label-tools-head button:hover,
.mail-detail-label-tools-head button:focus-visible,
.mail-label-add-button:hover,
.mail-label-add-button:focus-visible {
  border-color: rgba(179, 255, 0, 0.62);
  background: rgba(179, 255, 0, 0.1);
  color: #fff;
  outline: none;
}

.mail-sidebar-label-actions button:disabled,
.mail-saved-filter-row > button:not(.mail-saved-filter):disabled,
.mail-sidebar-small-button:disabled,
.mail-rule-item button:disabled,
.mail-detail-label-tools-head button:disabled,
.mail-label-add-button:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.mail-sidebar-empty,
.mail-sidebar-error {
  margin: 0;
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.mail-sidebar-error {
  color: #ffb7aa;
}

.mail-rule-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 6px;
  align-items: center;
  min-height: 40px;
  padding: 6px 0 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.mail-rule-item span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.mail-rule-item strong,
.mail-rule-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-rule-item strong {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 740;
}

.mail-rule-item small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 11px;
  font-weight: 650;
}

.mail-rule-item button {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
}

.mail-message {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(34, 34, 34, 0.8);
  color: inherit;
  font: inherit;
  text-align: left;
}

.mail-message.is-unread {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(34, 34, 34, 0.72);
}

.mail-message.is-active {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(34, 34, 34, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mail-message.is-selected {
  border-color: rgba(179, 255, 0, 0.46);
  background: rgba(179, 255, 0, 0.08);
}

.mail-message:hover,
.mail-message:focus-within {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(34, 34, 34, 0.72);
}

.mail-message:focus-within {
  outline: 2px solid rgba(255, 255, 255, 0.34);
  outline-offset: 2px;
}

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

.mail-message-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-height: 24px;
}

.mail-message-open {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mail-message-open:focus-visible {
  outline: none;
}

.mail-smart-group {
  display: grid;
  gap: 8px;
}

.mail-smart-group + .mail-smart-group {
  margin-top: 6px;
}

.mail-smart-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.56);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mail-smart-group-head small {
  color: rgba(255, 255, 255, 0.42);
  font-size: 11px;
  font-weight: 760;
}

.mail-smart-group-list {
  display: grid;
  gap: 8px;
}

.mail-message-main {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.mail-message-sender,
.mail-message-email,
.mail-message-date {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 650;
}

.mail-message-sender,
.mail-message-subject,
.mail-message-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-message-subject {
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  font-weight: 760;
}

.mail-message-date {
  align-self: start;
  white-space: nowrap;
}

.mail-detail {
  min-height: 420px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 18px;
  background: rgba(34, 34, 34, 0.72);
  color: rgba(255, 255, 255, 0.92);
  transition: opacity 120ms ease;
}

.mail-detail.is-loading {
  opacity: 0.72;
  pointer-events: none;
}

@media (min-width: 1101px) {
  .app-shell.is-mail-view-active {
    overflow: visible;
  }

  .mail-view:not(.is-hidden) .mail-detail {
    position: sticky;
    top: 96px;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .app-shell.is-mail-view-active.has-mail-detail-actions .mail-detail {
    padding-bottom: 138px;
  }

  .mail-detail-actions--dock {
    position: fixed;
    bottom: 18px;
    z-index: 80;
    box-sizing: border-box;
    margin-top: 0;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(34, 34, 34, 0.96);
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(10px);
  }
}

.mail-detail-empty,
.mail-detail-loading,
.mail-detail-error {
  display: grid;
  place-items: center;
  min-height: 360px;
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}

.mail-detail-error {
  color: #ffb7aa;
}

.mail-detail-header {
  display: grid;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mail-detail-subject {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: 20px;
  font-weight: 780;
  line-height: 1.25;
}

.mail-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 650;
}

.mail-label-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.mail-message .mail-label-badges {
  margin-top: 4px;
}

.mail-label-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--mail-label-color, #8fd14f) 58%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--mail-label-color, #8fd14f) 16%, transparent);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 760;
}

.mail-label-badge span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-label-badge button {
  width: 18px;
  min-height: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  font-size: 13px;
  line-height: 1;
}

.mail-detail-label-tools {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.mail-detail-label-tools-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 760;
}

.mail-detail-label-tools-head div,
.mail-detail-label-add-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mail-detail-label-tools-head button {
  padding: 0 10px;
}

.mail-detail-label-current {
  min-height: 24px;
}

.mail-detail-label-empty {
  color: rgba(255, 255, 255, 0.46);
  font-size: 12px;
  font-weight: 650;
}

.mail-label-add-button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
}

.mail-conversation {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.mail-conversation-item {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.mail-conversation-item.is-selected {
  border-color: rgba(179, 255, 0, 0.42);
  background: rgba(179, 255, 0, 0.055);
}

.mail-conversation-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.mail-conversation-author {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.mail-conversation-author strong,
.mail-conversation-author span,
.mail-conversation-meta,
.mail-conversation-subject {
  overflow-wrap: anywhere;
}

.mail-conversation-author strong {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  font-weight: 760;
}

.mail-conversation-author span,
.mail-conversation-meta,
.mail-conversation-empty {
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 650;
}

.mail-conversation-meta {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
}

.mail-conversation-selected {
  color: #c7ff4a;
}

.mail-conversation-subject {
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: 13px;
  font-weight: 740;
  line-height: 1.35;
}

.mail-conversation-empty {
  margin: 0;
}

.mail-conversation-item .mail-detail-body {
  margin-top: 0;
}

.mail-conversation-item .mail-detail-body--html {
  padding: 16px;
}

.mail-conversation-item .mail-detail-attachments {
  margin-top: 4px;
}

.mail-detail-body {
  margin: 18px 0 0;
  max-height: none;
  overflow: visible;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.88);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
}

.mail-detail-body--plain {
  white-space: pre-wrap;
}

.mail-detail-body--html {
  max-height: none;
  padding: 22px;
  border-radius: 8px;
  background: #fff;
  color: #202124;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: normal;
}

.mail-detail-body--html * {
  box-sizing: border-box;
  max-width: 100%;
}

.mail-detail-body--html p {
  margin: 0 0 12px;
}

.mail-detail-body--html blockquote {
  margin: 14px 0 0 14px;
  padding-left: 12px;
  border-left: 2px solid #dadce0;
}

.mail-detail-body--html table {
  width: auto;
  max-width: 100% !important;
  border-collapse: separate;
  border-spacing: 0;
  color: inherit;
  background: transparent;
}

.mail-detail-body--html table[width="100%"] {
  width: 100% !important;
}

.mail-detail-body--html table[align="center"] {
  margin-left: auto;
  margin-right: auto;
}

.mail-detail-body--html table[align="right"] {
  margin-left: auto;
  margin-right: 0;
}

.mail-detail-body--html table[align="left"] {
  margin-left: 0;
  margin-right: auto;
}

.mail-detail-body--html th,
.mail-detail-body--html td {
  max-width: 100%;
  vertical-align: top;
}

.mail-detail-body--html img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

.mail-detail-body--html table[border]:not([border="0"]) {
  border-collapse: collapse;
}

.mail-detail-body--html table[border]:not([border="0"]) th,
.mail-detail-body--html table[border]:not([border="0"]) td {
  padding: 6px 8px;
  border: 1px solid #cfcfcf;
}

.mail-detail-body--html a {
  color: #0b57d0;
}

.mail-detail-attachments {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.mail-detail-attachments-title,
.mail-detail-attachment {
  color: rgba(255, 255, 255, 0.64);
  font-size: 12px;
  font-weight: 650;
}

.mail-detail-attachment {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}

.mail-detail-attachment:hover,
.mail-detail-attachment:focus-visible {
  border-color: rgba(179, 255, 0, 0.58);
  color: rgba(255, 255, 255, 0.92);
  outline: none;
}

.mail-detail-attachment span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-detail-attachment small {
  color: rgba(255, 255, 255, 0.48);
  font: inherit;
}

.mail-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.mail-detail-actions--inline-hidden {
  display: none;
}

.mail-detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.mail-detail-action:hover,
.mail-detail-action:focus-visible {
  border-color: rgba(179, 255, 0, 0.82);
  background: rgba(179, 255, 0, 0.12);
  color: #fff;
}

.mail-detail-action--danger {
  border-color: rgba(255, 116, 93, 0.48);
  color: #ffd5cf;
}

.mail-detail-action--danger:hover,
.mail-detail-action--danger:focus-visible {
  border-color: rgba(255, 116, 93, 0.86);
  background: rgba(255, 116, 93, 0.12);
}

.mail-detail-action.is-disabled {
  opacity: 0.44;
  pointer-events: none;
}

.mail-detail-action:disabled {
  cursor: default;
}

.mail-detail-actions-separator {
  width: 1px;
  height: 24px;
  background: rgba(255, 255, 255, 0.14);
}

.mail-action-status {
  flex-basis: 100%;
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 650;
}

.mail-action-status.is-success {
  color: #c7ff4a;
}

.mail-action-status.is-error {
  color: #ffb7aa;
}

.mail-compose-form {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.34);
}

.mail-compose-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mail-compose-head h5 {
  margin: 0;
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
  font-weight: 760;
}

.mail-compose-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 18px;
  cursor: pointer;
}

.mail-compose-field {
  display: grid;
  gap: 6px;
}

.mail-compose-field span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 700;
}

.mail-compose-field input,
.mail-compose-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  font: inherit;
  font-size: 14px;
  line-height: 1.45;
}

.mail-compose-field input {
  min-height: 38px;
  padding: 0 12px;
}

.mail-compose-field textarea {
  min-height: 150px;
  padding: 10px 12px;
  resize: vertical;
}

.mail-compose-field input:focus,
.mail-compose-field textarea:focus {
  outline: none;
  border-color: rgba(179, 255, 0, 0.72);
}

.mail-compose-field input:disabled,
.mail-compose-field textarea:disabled {
  opacity: 0.68;
}

.mail-compose-address-wrap {
  position: relative;
}

.mail-compose-suggest {
  position: absolute;
  z-index: 18;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  gap: 4px;
  max-height: 236px;
  overflow: auto;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(20, 20, 20, 0.98);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
}

.mail-compose-suggest-item {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 10px;
  min-height: 34px;
  width: 100%;
  padding: 0 9px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.mail-compose-suggest-item:hover,
.mail-compose-suggest-item:focus-visible,
.mail-compose-suggest-item.is-active {
  background: rgba(179, 255, 0, 0.14);
  color: rgba(255, 255, 255, 0.96);
  outline: none;
}

.mail-compose-suggest-item span,
.mail-compose-suggest-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-compose-field .mail-compose-suggest-item span {
  color: inherit;
  font-size: inherit;
  font-weight: 750;
}

.mail-compose-suggest-item small {
  color: rgba(255, 255, 255, 0.54);
  font: inherit;
  font-size: 12px;
}

.mail-compose-attachments {
  display: grid;
  gap: 8px;
}

.mail-compose-file-button {
  position: relative;
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.mail-compose-file-button:hover,
.mail-compose-file-button:focus-within {
  border-color: rgba(179, 255, 0, 0.58);
}

.mail-compose-file-button input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.mail-compose-attachment-hint {
  color: rgba(255, 255, 255, 0.48);
  font-size: 12px;
  font-weight: 650;
}

.mail-compose-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mail-compose-attachment {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 8px 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 650;
}

.mail-compose-attachment > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-compose-attachment small {
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.48);
  font: inherit;
}

.mail-compose-attachment button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  cursor: pointer;
}

.mail-compose-attachment button:hover,
.mail-compose-attachment button:focus-visible {
  background: rgba(255, 116, 93, 0.18);
  color: #ffd5cf;
  outline: none;
}

.mail-compose-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mail-compose-submit {
  border-color: rgba(179, 255, 0, 0.84);
}

.mail-compose-status {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 650;
}

.mail-compose-status.is-success {
  color: #c7ff4a;
}

.mail-compose-status.is-error {
  color: #ffb7aa;
}

@media (max-width: 1100px) {
  .mail-content {
    grid-template-columns: minmax(0, 1fr);
  }

  .mail-folder-panel {
    min-height: 0;
  }

  .mail-detail {
    min-height: 320px;
  }
}

@media (max-width: 900px) {
  .mail-view {
    min-width: 0;
    overflow-x: hidden;
    padding-left: 12px;
    padding-right: 12px;
  }

  .mail-panel-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .mail-panel-title p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .mail-panel-actions {
    width: 100%;
  }

  .mail-compose-open-button,
  .mail-refresh-button {
    flex: 1 1 130px;
    inline-size: auto;
  }

  .mail-content,
  .mail-message-list,
  .mail-bulk-toolbar,
  .mail-message,
  .mail-message-open {
    max-width: 100%;
    min-width: 0;
  }

  .mail-content,
  .mail-message-list {
    width: calc(100vw - 64px);
    max-width: calc(100vw - 64px);
  }

  .mail-bulk-toolbar {
    align-items: stretch;
  }

  .mail-bulk-actions {
    flex: 1 1 100%;
  }

  .mail-bulk-action,
  .mail-bulk-clear,
  .mail-bulk-label-select {
    flex: 1 1 auto;
    min-width: 0;
  }

  .mail-bulk-label-select {
    max-width: none;
  }

  .mail-message-open {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .mail-message-date {
    justify-self: start;
  }
}

/* codex-mail-client-dark-design-system-20260524 */
@media (min-width: 901px) {
  body:has(#mailView:not(.is-hidden)) .app-shell {
    border-color: rgba(255, 255, 255, 0.12);
    background: #222;
    box-shadow: 0 34px 120px rgba(0, 0, 0, 0.48);
  }

  body:has(#mailView:not(.is-hidden)) .app-main,
  body:has(#mailView:not(.is-hidden)) .mail-view {
    background: #222;
  }

  body:has(#mailView:not(.is-hidden)) .topbar {
    grid-template-columns: minmax(250px, 300px) minmax(360px, 680px) auto;
    align-items: center;
    border-bottom-color: rgba(255, 255, 255, 0.12);
    background: #14213d;
    box-shadow:
      0 18px 46px rgba(6, 13, 28, 0.38),
      inset 0 -1px rgba(255, 255, 255, 0.08);
  }

  body:has(#mailView:not(.is-hidden)) .topbar-logo--image img {
    filter: brightness(0) invert(1);
    opacity: 0.96;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-logo:focus-visible {
    outline-color: #fff;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-search {
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: none;
    margin-left: 0;
    justify-self: stretch;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-search-icon {
    background: transparent;
    color: #fff;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-search input {
    border-color: rgba(255, 255, 255, 0.9);
    background: transparent;
    box-shadow: none;
    color: #fff;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-search input:focus {
    border-color: #fff;
    outline: none;
    box-shadow: none;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-search input::placeholder {
    color: rgba(255, 255, 255, 0.68);
  }

  body:has(#mailView:not(.is-hidden)) .topbar-actions {
    grid-column: 3;
    grid-row: 1;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-sync-card,
  body:has(#mailView:not(.is-hidden)) .topbar-actions #createProduct,
  body:has(#mailView:not(.is-hidden)) .topbar-actions #siteExchange,
  body:has(#mailView:not(.is-hidden)) .topbar-actions #siteExchangeFilterButton,
  body:has(#mailView:not(.is-hidden)) .site-exchange-progress,
  body:has(#mailView:not(.is-hidden)) .topbar-kanban-add-column-button,
  body:has(#mailView:not(.is-hidden)) .topbar-column-filter-button,
  body:has(#mailView:not(.is-hidden)) .topbar-automation-button,
  body:has(#mailView:not(.is-hidden)) .topbar-login-button {
    display: none;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-settings {
    margin-left: 0;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-settings-button {
    color: #fff;
  }

  body:has(#mailView:not(.is-hidden)) .topbar-settings-button:hover,
  body:has(#mailView:not(.is-hidden)) .topbar-settings-button:focus-visible,
  body:has(#mailView:not(.is-hidden)) .topbar-settings-button[aria-expanded="true"] {
    color: var(--green);
  }

  body:has(#mailView:not(.is-hidden)) .topbar-settings-button:focus-visible {
    outline-color: rgba(184, 250, 24, 0.7);
  }

  body:has(#mailView:not(.is-hidden)) .mail-empty-panel {
    min-height: calc(100vh - 172px);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: #333;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  }

  body:has(#mailView:not(.is-hidden)) .mail-empty-panel .panel-title {
    color: rgba(255, 255, 255, 0.92);
  }

  body:has(#mailView:not(.is-hidden)) .mail-empty-surface {
    min-height: 420px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
}

.kanban-page {
  display: grid;
  gap: 12px;
}

.kanban-control-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
  align-items: center;
  gap: 18px;
}

.kanban-title-block {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.kanban-kicker {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.kanban-title-block h2 {
  margin: 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.05;
}

.kanban-create-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.5fr) minmax(180px, 0.8fr) auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.kanban-create-form input,
.kanban-create-form select,
.kanban-create-form textarea {
  width: 100%;
  border: 1px solid rgba(117, 111, 134, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  outline: none;
}

.kanban-create-form input,
.kanban-create-form select,
.kanban-create-form textarea {
  min-height: 48px;
  padding: 12px 13px;
  font-size: 14px;
  font-weight: 650;
}

.kanban-create-form textarea {
  resize: none;
}

.kanban-create-form input:focus,
.kanban-create-form select:focus,
.kanban-create-form textarea:focus {
  border-color: rgba(117, 66, 217, 0.48);
  box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.12);
}

.kanban-create-form .button {
  min-height: 48px;
  border-radius: 8px;
}

.kanban-summary {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(120px, 1fr)) minmax(170px, 1fr);
  align-items: center;
  justify-content: stretch;
  gap: 8px;
}

.kanban-summary > div,
.kanban-save-status {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
  padding: 8px 12px;
}

.kanban-summary span {
  display: block;
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
}

.kanban-summary p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.kanban-save-status {
  display: inline-flex;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kanban-save-status.online {
  background: var(--green-soft);
  color: var(--green-dark);
}

.kanban-save-status.warning {
  background: var(--amber-soft);
  color: var(--amber);
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 12px;
  align-items: start;
}

.kanban-auth-gate {
  grid-column: 1 / -1;
  min-height: min(520px, calc(100vh - 190px));
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #333;
  padding: 40px;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
}

.kanban-auth-gate span {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.kanban-auth-gate h2 {
  margin: 0;
  color: #fff;
  font-size: 30px;
  line-height: 1.1;
}

.kanban-auth-gate p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 15px;
  font-weight: 650;
}

.kanban-auth-gate-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kanban-auth-gate-actions .button {
  min-width: 132px;
}

/* codex-kanban-six-columns-desktop-20260521 */
@media (min-width: 1360px) {
  .kanban-board {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.kanban-column {
  position: relative;
  display: grid;
  gap: 14px;
  min-height: 520px;
  overflow: visible;
  padding: 14px;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.kanban-column.has-custom-background {
  background: var(--kanban-column-bg);
  border-color: rgba(89, 71, 132, 0.14);
}

.kanban-column.has-dark-background .kanban-column-head h3,
.kanban-column.has-dark-background .kanban-column-title-button {
  color: #fff;
}

.kanban-column.has-dark-background .kanban-column-head strong {
  color: rgba(255, 255, 255, 0.72);
}

.kanban-column.has-dark-background .kanban-column-title-button:hover,
.kanban-column.has-dark-background .kanban-column-title-button:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.kanban-column.has-custom-text .kanban-column-head h3,
.kanban-column.has-custom-text .kanban-column-title-button,
.kanban-column.has-custom-text .kanban-column-head strong,
.kanban-column.has-custom-text .kanban-quick-add {
  color: var(--kanban-column-text);
}

.kanban-column.has-custom-text .kanban-column-title-button:hover,
.kanban-column.has-custom-text .kanban-column-title-button:focus-visible {
  color: var(--kanban-column-text);
  text-decoration: underline;
}

.kanban-column.has-custom-text .kanban-quick-add:hover,
.kanban-column.has-custom-text .kanban-quick-add:focus-visible {
  color: var(--kanban-column-text);
}

.kanban-column.has-open-card-menu {
  z-index: 70;
}

.kanban-column.is-over {
  border-color: rgba(184, 250, 24, 0.95);
  background: rgba(255, 255, 255, 0.68);
  transform: translateY(-2px);
}

.kanban-column.has-custom-background.is-over {
  background: var(--kanban-column-bg);
}

.kanban-column-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.kanban-column-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.1;
}

.kanban-column-title-button {
  appearance: none;
  max-width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.kanban-column-title-button:hover,
.kanban-column-title-button:focus-visible {
  color: var(--purple);
  outline: none;
}

.kanban-column-head strong {
  color: var(--muted);
  font-size: 14px;
}

.kanban-column-head-actions {
  position: relative;
  display: inline-flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.kanban-column-action {
  display: inline-flex;
  width: 32px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.kanban-column.has-custom-text .kanban-column-action {
  color: var(--kanban-column-text);
}

.kanban-column-action:hover,
.kanban-column-action:focus-visible,
.kanban-column-action[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--ink);
  outline: none;
}

.kanban-column.has-custom-text .kanban-column-action:hover,
.kanban-column.has-custom-text .kanban-column-action:focus-visible,
.kanban-column.has-custom-text .kanban-column-action[aria-expanded="true"] {
  color: var(--kanban-column-text);
}

.kanban-column-action svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.kanban-column-action-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 7px;
  width: min(240px, calc(100vw - 48px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(9, 8, 18, 0.88);
  box-shadow: 0 20px 48px rgba(9, 8, 18, 0.34);
  padding: 8px;
  backdrop-filter: blur(18px);
}

.kanban-column-body {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 440px;
  overflow: visible;
}

.kanban-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: 120px;
  overflow: visible;
  border: 1px solid rgba(117, 111, 134, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--soft-shadow);
  padding: 12px;
  cursor: grab;
}

.kanban-card-member-list,
.kanban-card-member-avatar {
  display: none;
}

.kanban-card-column-text {
  display: none;
}

.kanban-card.has-action-menu {
  z-index: 40;
}

.kanban-card.is-dragging {
  opacity: 0.52;
  cursor: grabbing;
}

.kanban-card-head {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding-right: 26px;
}

.kanban-card-head strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
}

.kanban-card-head.is-title-empty {
  margin-bottom: -4px;
}

.kanban-card-title-placeholder {
  min-width: 0;
}

.kanban-card > .kanban-card-action {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #090811;
  color: #fff;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(9, 8, 17, 0.18);
  transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.kanban-card:not(.has-image) .kanban-card-action {
  transform: none;
}

.kanban-card-action:hover,
.kanban-card-action:focus-visible,
.kanban-card-action[aria-expanded="true"] {
  color: #fff;
  opacity: 0.9;
  outline: none;
}

.kanban-card-action:focus-visible {
  box-shadow: 0 0 0 3px rgba(9, 8, 17, 0.18), 0 8px 18px rgba(9, 8, 17, 0.18);
}

.kanban-card-action svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.kanban-card-action svg path {
  fill: none;
  stroke: currentColor;
}

.kanban-card > .kanban-card-action-menu {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  z-index: 80;
  display: grid;
  gap: 7px;
  width: min(240px, calc(100vw - 48px));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(9, 8, 18, 0.88);
  box-shadow: 0 20px 48px rgba(9, 8, 18, 0.34);
  padding: 8px;
  backdrop-filter: blur(18px);
}

.kanban-card > .kanban-card-action-menu.is-member-menu {
  top: calc(100% - 40px);
  right: auto;
  bottom: auto;
  left: calc(100% + 8px);
}

.kanban-card-action-item {
  display: flex;
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  align-items: center;
  text-align: left;
}

.kanban-card-action-item:hover,
.kanban-card-action-item:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  outline: none;
}

.kanban-card-title-form {
  display: grid;
  gap: 9px;
}

.kanban-card-title-form label {
  color: rgba(255, 255, 255, 0.72);
}

.kanban-card-title-form input {
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.96);
  padding: 9px 10px;
}

.kanban-card-title-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.kanban-card-title-actions .button {
  min-height: 34px;
  padding: 7px 9px;
  font-size: 12px;
}

.kanban-card-title-actions .button:hover {
  transform: none;
}

.kanban-card-details {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.kanban-card-details.is-primary {
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  -webkit-line-clamp: 4;
}

body.kanban-modal-open,
body.automation-modal-open,
body.site-exchange-filter-modal-open,
body.loader-modal-open,
body.settings-category-specs-modal-open,
body.settings-category-woo-selector-modal-open,
body.site-health-sync-detail-modal-open,
body.room-order-modal-open,
body.room-dealer-modal-open,
body.settings-modal-open,
body.kanban-column-filter-modal-open,
body.catalog-modal-open,
body.variant-id-modal-open,
body.category-create-modal-open,
body.menu-settings-modal-open {
  overflow: hidden;
}

.kanban-card-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(9, 8, 18, 0.42);
  padding: 24px;
}

.kanban-card-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(70vw, 1120px);
  height: min(70vh, 820px);
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid rgba(117, 111, 134, 0.18);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(9, 8, 18, 0.28);
}

.kanban-card-modal-side {
  display: none;
}

.category-create-modal-backdrop {
  z-index: 132;
  background: rgba(9, 8, 18, 0.58);
}

.category-create-modal {
  grid-template-rows: auto auto;
  width: min(460px, calc(100vw - 40px));
  height: auto;
  max-height: calc(100vh - 48px);
  border-color: rgba(255, 255, 255, 0.14);
  background: #202020;
  color: #fff;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
}

.category-create-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 22px 24px 16px;
}

.category-create-modal-kicker {
  margin: 0 0 6px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.category-create-modal h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  font-weight: 850;
  line-height: 1.18;
}

.category-create-modal-close {
  display: inline-grid;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
}

.category-create-modal-close:hover,
.category-create-modal-close:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  outline: none;
}

.category-create-modal-form {
  display: grid;
  gap: 14px;
  padding: 20px 24px 24px;
}

.category-create-modal-field {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
  font-weight: 700;
}

.category-create-modal-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  padding: 0 14px;
  outline: none;
}

.category-create-modal-input:focus {
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow: 0 0 0 3px rgba(110, 67, 210, 0.26);
}

.category-create-modal-error {
  margin: -2px 0 0;
  color: #ff8f8f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.category-create-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 2px;
}

.category-create-modal .button {
  min-height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.category-create-modal .button:hover,
.category-create-modal .button:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.1);
  outline: none;
}

.category-create-modal .button-primary {
  border-color: #7044d5;
  background: #7044d5;
}

.category-create-modal .button-primary:hover,
.category-create-modal .button-primary:focus-visible {
  border-color: #8052ea;
  background: #8052ea;
}

.kanban-card-comments-list {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
}

.kanban-card-comment {
  display: grid;
  position: relative;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  border: 1px solid rgba(117, 111, 134, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 38px 26px 11px;
}

.kanban-card-comment.is-system {
  grid-template-columns: minmax(0, 1fr);
  padding-left: 14px;
}

.kanban-card-comment.has-author-card-background {
  border-color: color-mix(in srgb, var(--kanban-comment-bg) 72%, #ffffff);
  background: var(--kanban-comment-bg);
}

.kanban-card-comment-avatar {
  display: inline-flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(117, 111, 134, 0.24);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(117, 66, 217, 0.96), rgba(88, 48, 176, 0.96));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 5px 12px rgba(8, 7, 16, 0.12);
}

.kanban-card-comment-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kanban-card-comment-body {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.kanban-card-comment-head {
  display: block;
  align-items: baseline;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.kanban-card-comment-author {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-comment.has-author-card-background .kanban-card-comment-author,
.kanban-card-comment.has-author-card-background .kanban-card-comment-text {
  color: var(--kanban-comment-text);
}

.kanban-card-comment.has-author-card-background .kanban-card-comment-time {
  color: color-mix(in srgb, var(--kanban-comment-text) 68%, transparent);
}

.kanban-card-comment.has-author-card-background .kanban-card-comment-delete {
  color: color-mix(in srgb, var(--kanban-comment-text) 72%, transparent);
}

.kanban-card-comment-time {
  position: absolute;
  right: 11px;
  bottom: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
}

.kanban-card-comment-delete {
  display: inline-flex;
  position: absolute;
  top: 7px;
  right: 7px;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #ccc;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, background-color 0.16s ease;
}

.kanban-card-comment-delete svg {
  display: block;
  width: 15px;
  height: 15px;
}

.kanban-card-comment:hover .kanban-card-comment-delete,
.kanban-card-comment:focus-within .kanban-card-comment-delete {
  opacity: 1;
  pointer-events: auto;
}

.kanban-card-comment-delete:hover,
.kanban-card-comment-delete:focus-visible {
  background: rgba(9, 8, 18, 0.06);
  outline: none;
}

.kanban-card-comment-text {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.42;
  white-space: pre-wrap;
  word-break: break-word;
}

.kanban-card-comment.is-system .kanban-card-comment-body {
  gap: 0;
}

.kanban-card-comment.is-system .kanban-card-comment-text {
  font-size: 14px;
}

.kanban-card-comments-empty {
  margin: 0;
  border: 1px dashed rgba(117, 111, 134, 0.24);
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  padding: 12px;
}

.kanban-card-comment-form {
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(117, 111, 134, 0.14);
  padding-top: 10px;
}

.kanban-card-comment-input-shell {
  position: relative;
  width: 100%;
  min-height: 104px;
  border: 1px solid rgba(117, 111, 134, 0.22);
  border-radius: 8px;
  background: #fff;
}

.kanban-card-comment-form-avatar {
  display: inline-flex;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(117, 111, 134, 0.22);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(117, 66, 217, 0.96), rgba(88, 48, 176, 0.96));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(8, 7, 16, 0.14);
}

.kanban-card-comment-form-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kanban-card-comment-textarea {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  outline: none;
}

.kanban-card-comment-textarea {
  min-height: 102px;
  max-height: 160px;
  padding: 14px 10px 10px 62px;
  resize: vertical;
}

.kanban-card-comment-textarea:focus {
  box-shadow: none;
}

.kanban-card-comment-input-shell:focus-within {
  border-color: rgba(117, 66, 217, 0.48);
  box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.12);
}

.kanban-card-comment-submit {
  justify-self: end;
  min-height: 34px;
  padding: 8px 14px;
}

.kanban-card-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto minmax(160px, 260px) auto;
  align-items: start;
  gap: 18px;
  border-bottom: 1px solid rgba(117, 111, 134, 0.14);
  padding: 18px 20px 16px;
}

.kanban-card-modal-heading > span,
.kanban-card-modal-field span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.kanban-card-modal-heading {
  min-width: 0;
}

.kanban-card-modal-head-meta {
  display: none;
}

.kanban-card-modal-members {
  position: relative;
  display: flex;
  min-width: 40px;
  min-height: 40px;
  align-self: center;
  justify-self: center;
  align-items: center;
  justify-content: center;
  z-index: 8;
}

.kanban-card-modal-member-list {
  display: inline-flex;
  max-width: 188px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px 0;
}

.kanban-card-modal-member-avatar,
.kanban-card-modal-member-add,
.kanban-card-modal-member-picker-avatar,
.kanban-card-modal-member-remove {
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(117, 66, 217, 0.96), rgba(88, 48, 176, 0.96));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(8, 7, 16, 0.22);
  cursor: pointer;
}

.kanban-card-modal-member-avatar + .kanban-card-modal-member-avatar {
  margin-left: -7px;
}

.kanban-card-modal-member-avatar img,
.kanban-card-modal-member-picker-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kanban-card-modal-member-add,
.kanban-card-modal-member-picker-avatar,
.kanban-card-modal-member-remove {
  padding: 0;
  text-decoration: none;
}

.kanban-card-modal-member-add {
  border-color: rgba(117, 111, 134, 0.38);
  background: rgba(255, 255, 255, 0.72);
  color: rgba(9, 8, 18, 0.78);
  box-shadow: none;
}

.kanban-card-modal-member-add svg {
  display: block;
  width: 17px;
  height: 17px;
}

.kanban-card-modal-member-remove {
  border-color: rgba(255, 255, 255, 0.14);
  background: #222;
  color: #fff;
  box-shadow: none;
}

.kanban-card-modal-member-remove svg {
  display: block;
  width: 15px;
  height: 15px;
}

.kanban-card-modal-member-add:hover,
.kanban-card-modal-member-add:focus-visible,
.kanban-card-modal-member-avatar:hover,
.kanban-card-modal-member-avatar:focus-visible,
.kanban-card-modal-member-picker-avatar:hover,
.kanban-card-modal-member-picker-avatar:focus-visible,
.kanban-card-modal-member-remove:hover,
.kanban-card-modal-member-remove:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.24), 0 8px 18px rgba(8, 7, 16, 0.2);
}

.kanban-card-modal-member-picker {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  max-width: min(236px, calc(100vw - 56px));
  border: 1px solid rgba(117, 111, 134, 0.18);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(9, 8, 18, 0.24);
  padding: 10px;
  transform: translateX(-50%);
}

.kanban-card-modal-member-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 34px);
  gap: 8px;
}

.kanban-card-modal-member-picker-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.kanban-card-checklist-button {
  display: inline-flex;
  align-items: center;
  justify-self: end;
  align-self: center;
  gap: 8px;
  min-height: 36px;
  border: 1px solid rgba(117, 111, 134, 0.2);
  border-radius: 8px;
  background: rgba(117, 66, 217, 0.08);
  color: var(--ink);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  padding: 0 12px;
  white-space: nowrap;
  cursor: pointer;
}

.kanban-card-checklist-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.kanban-card-checklist-button:hover,
.kanban-card-checklist-button:focus-visible {
  border-color: rgba(117, 66, 217, 0.34);
  background: rgba(117, 66, 217, 0.14);
}

.kanban-card-checklist {
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0 0 2px;
}

.kanban-card-checklist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 34px;
  border: 1px solid rgba(117, 111, 134, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.7);
  padding: 0 12px 0 10px;
}

.kanban-card-checklist-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: #7542d9;
}

.kanban-card-checklist-row input[type="text"] {
  min-width: 0;
  flex: 1 1 auto;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0;
  padding: 0;
  outline: none;
  box-shadow: none;
}

.kanban-card-checklist-links {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 170px;
  overflow: hidden;
}

.kanban-card-checklist-link {
  display: inline-flex;
  align-items: center;
  height: 24px;
  max-width: 82px;
  padding: 0 8px;
  border: 1px solid rgba(117, 66, 217, 0.24);
  border-radius: 6px;
  background: rgba(117, 66, 217, 0.08);
  color: #4e249f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kanban-card-checklist-link:hover,
.kanban-card-checklist-link:focus-visible {
  border-color: rgba(117, 66, 217, 0.48);
  background: rgba(117, 66, 217, 0.14);
  color: #35137d;
  outline: none;
}

.kanban-text-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-word;
}

.kanban-text-link:hover,
.kanban-text-link:focus-visible {
  color: var(--green);
  outline: none;
}

.kanban-card-modal-field .kanban-card-checklist-row input[type="text"],
.kanban-card-modal-field .kanban-card-checklist-row input[type="text"]:focus {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  box-shadow: none;
}

.kanban-card-checklist-row:focus-within {
  border-color: rgba(117, 66, 217, 0.48);
  box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.12);
}

.kanban-card-modal-head h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.12;
}

.kanban-card-modal-title {
  display: inline-block;
  max-width: 100%;
  min-height: 1.16em;
  overflow-wrap: anywhere;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 2px 4px;
  margin-left: -5px;
  cursor: text;
  outline: none;
}

.kanban-card-modal-title:focus {
  border-color: rgba(117, 66, 217, 0.48);
  background: rgba(117, 66, 217, 0.1);
  box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.12);
}

.kanban-card-modal-head-column {
  width: min(260px, 100%);
}

.kanban-card-modal-close {
  display: inline-flex;
  position: relative;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(9, 8, 18, 0.08);
  color: #eee;
  font-size: 0;
  line-height: 0;
  align-items: center;
  justify-content: center;
}

.kanban-card-modal-close::before,
.kanban-card-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.kanban-card-modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.kanban-card-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.kanban-card-modal-close:hover,
.kanban-card-modal-close:focus-visible {
  background: rgba(9, 8, 18, 0.13);
  outline: none;
}

.kanban-card-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.kanban-card-modal-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: start;
  gap: 16px;
  min-width: 0;
}

.kanban-card-modal-top.no-images {
  grid-template-columns: minmax(0, 1fr);
}

.kanban-card-modal-fields {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.kanban-card-modal-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.kanban-card-modal-field.wide {
  grid-column: 1 / -1;
}

.kanban-card-modal-field input,
.kanban-card-modal-field select,
.kanban-card-modal-field textarea {
  width: 100%;
  border: 1px solid rgba(117, 111, 134, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  padding: 11px 12px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  outline: none;
}

.kanban-card-modal-field input:focus,
.kanban-card-modal-field select:focus,
.kanban-card-modal-field textarea:focus {
  border-color: rgba(117, 66, 217, 0.48);
  box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.12);
}

.kanban-card-modal-field textarea {
  min-height: 300px;
  font-size: 15px;
  resize: vertical;
  white-space: pre-wrap;
}

.kanban-card-modal-images {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.kanban-card-modal-image {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(117, 111, 134, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.kanban-card-modal-image-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: zoom-in;
  font: inherit;
  text-align: inherit;
}

.kanban-card-modal-image-button:focus-visible {
  outline: 3px solid rgba(117, 66, 217, 0.32);
  outline-offset: -3px;
}

.kanban-card-modal-file-tile {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.kanban-card-modal-file-tile:focus-visible {
  outline: 3px solid rgba(117, 66, 217, 0.32);
  outline-offset: -3px;
}

.kanban-card-modal-image img {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.kanban-card-modal-file-preview {
  display: flex;
  width: 100%;
  height: 120px;
  align-items: center;
  justify-content: center;
  background: var(--green);
}

.kanban-card-modal-file-icon {
  display: inline-flex;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

.kanban-card-modal-image.is-cover img {
  height: 188px;
}

.kanban-card-modal-image figcaption {
  padding: 7px 8px;
  border-top: 1px solid rgba(117, 111, 134, 0.12);
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.kanban-card-modal-attachment-file figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  text-transform: none;
}

.kanban-card-modal-attachment-file figcaption span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-modal-attachment-file figcaption em {
  color: inherit;
  font-style: normal;
  font-weight: 400;
  opacity: 0.68;
}

.kanban-card-modal-meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
}

@media (min-width: 901px) {
  .kanban-card-modal-backdrop {
    background: rgba(8, 8, 10, 0.72);
  }

  .kanban-card-modal {
    width: min(86vw, 1780px);
    height: min(78vh, 900px);
    max-width: calc(100vw - 96px);
    max-height: calc(100vh - 128px);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    background: #222;
    box-shadow: 0 34px 120px rgba(0, 0, 0, 0.48);
  }

  .kanban-card-modal-head {
    grid-template-columns: minmax(0, 1fr) auto auto minmax(220px, auto) minmax(180px, 260px) auto;
    border-bottom-color: rgba(255, 255, 255, 0.1);
    padding: 20px 24px 18px;
  }

  .kanban-card-modal-member-add {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(232, 229, 240, 0.82);
  }

  .kanban-card-modal-member-add:hover,
  .kanban-card-modal-member-add:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.12);
  }

  .kanban-card-modal-member-picker {
    border-color: rgba(255, 255, 255, 0.14);
    background: #2f2f2f;
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34);
  }

  .kanban-card-modal-member-remove {
    border-color: rgba(255, 255, 255, 0.16);
    background: #222;
  }

  .kanban-card-modal-member-picker-empty {
    color: rgba(232, 229, 240, 0.68);
  }

  .kanban-card-modal-heading > span,
  .kanban-card-modal-field span,
  .kanban-card-modal-meta {
    color: rgba(232, 229, 240, 0.74);
  }

  .kanban-card-modal-head-meta {
    display: flex;
    align-self: center;
    justify-self: center;
    max-width: clamp(220px, 22vw, 380px);
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 12px;
    color: rgba(232, 229, 240, 0.62);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
  }

  .kanban-card-modal-head-meta em {
    font-style: normal;
    font-weight: 400;
  }

  .kanban-card-checklist-button {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
  }

  .kanban-card-checklist-button:hover,
  .kanban-card-checklist-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.14);
  }

  .kanban-card-checklist-row {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
  }

  .kanban-card-checklist-row input[type="text"] {
    background: transparent;
    color: #fff;
    box-shadow: none;
  }

  .kanban-card-checklist-row input[type="text"]::placeholder {
    color: rgba(232, 229, 240, 0.46);
  }

  .kanban-card-checklist-link {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .kanban-card-checklist-link:hover,
  .kanban-card-checklist-link:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
  }

  .kanban-card-checklist-row:focus-within {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  }

  .kanban-card-modal-head h2 {
    margin-top: 0;
    color: #fff;
  }

  .kanban-card-modal-title:focus {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  }

  .kanban-card-modal-close {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #eee;
  }

  .kanban-card-modal-close:hover,
  .kanban-card-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
  }

  .kanban-card-modal-field input,
  .kanban-card-modal-field select,
  .kanban-card-modal-field textarea,
  .kanban-card-comment-input-shell {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #333;
    color: #fff;
    box-shadow: none;
    color-scheme: dark;
  }

  .kanban-card-modal-field input::placeholder,
  .kanban-card-modal-field textarea::placeholder,
  .kanban-card-comment-textarea::placeholder {
    color: rgba(232, 229, 240, 0.62);
  }

  .kanban-card-modal-field input:focus,
  .kanban-card-modal-field select:focus,
  .kanban-card-modal-field textarea:focus,
  .kanban-card-comment-input-shell:focus-within {
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
  }

  .kanban-card-comment-textarea {
    background: transparent;
    color: #fff;
    box-shadow: none;
  }

  .kanban-card-modal-body.has-side {
    grid-template-columns: minmax(0, 1fr) clamp(400px, 31.25%, 540px);
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    align-items: stretch;
    gap: 16px;
    overflow: hidden;
    padding-right: 24px;
  }

  .kanban-card-modal-top,
  .kanban-card-modal-top.no-images {
    grid-template-columns: minmax(180px, 20%) minmax(0, 1fr);
  }

  .kanban-card-modal-body.has-side .kanban-card-modal-top,
  .kanban-card-modal-body.has-side .kanban-card-modal-top.no-images {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(180px, 20%) minmax(0, 1fr);
  }

  .kanban-card-modal-body.has-side .kanban-card-checklist {
    grid-column: 1;
    grid-row: 1;
  }

  .kanban-card-modal-body.has-side .kanban-card-modal-field.wide {
    grid-column: 1;
    grid-row: 2;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }

  .kanban-card-modal-body.has-side .kanban-card-modal-images-inline {
    grid-column: 1;
    grid-row: 3;
  }

  .kanban-card-modal-body.has-side .kanban-card-modal-meta {
    grid-column: 1;
    grid-row: 4;
    display: none;
  }

  .kanban-card-modal-body.has-side:not(:has(.kanban-card-checklist)) .kanban-card-modal-field.wide {
    grid-row: 1;
  }

  .kanban-card-modal-body.has-side:not(:has(.kanban-card-checklist)) .kanban-card-modal-images-inline {
    grid-row: 2;
  }

  .kanban-card-modal-body.has-side:not(:has(.kanban-card-checklist)) .kanban-card-modal-meta {
    grid-row: 3;
  }

  .kanban-card-modal-body.has-side:not(:has(.kanban-card-checklist)) .kanban-card-modal-side {
    grid-row: 1 / 4;
  }

  .kanban-card-modal-body.has-side .kanban-card-modal-field.wide textarea {
    height: 100%;
    min-height: 0;
  }

  .kanban-card-modal-side {
    grid-column: 2;
    grid-row: 1 / 5;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 12px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: #333;
    padding: 14px;
  }

  .kanban-card-comments-title {
    color: rgba(232, 229, 240, 0.74);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .kanban-card-comments-empty {
    border-color: rgba(255, 255, 255, 0.16);
    border-radius: 16px;
    color: rgba(232, 229, 240, 0.72);
  }

  .kanban-card-comment-form {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .kanban-card-comment-submit {
    min-height: 36px;
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    font-weight: 600;
    box-shadow: none;
  }

  .kanban-card-comment-submit:hover,
  .kanban-card-comment-submit:focus-visible {
    border-color: rgba(117, 66, 217, 0.42);
    background: rgba(117, 66, 217, 0.22);
    box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.12);
  }

  .kanban-card-comment {
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(34, 34, 34, 0.72);
  }

  .kanban-card-comment-delete:hover,
  .kanban-card-comment-delete:focus-visible {
    background: rgba(255, 255, 255, 0.08);
  }

  .kanban-card-comment-author,
  .kanban-card-comment-text {
    color: #fff;
  }

  .kanban-card-comment-time {
    color: rgba(232, 229, 240, 0.66);
  }

  .kanban-card-modal-images {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 6px 0;
  }

  .kanban-card-modal-side .kanban-card-modal-images {
    min-height: 0;
    align-content: start;
    padding: 0 0 8px;
  }

  .kanban-card-modal-image {
    flex: 0 0 clamp(190px, 24%, 300px);
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #333;
    scroll-snap-align: start;
  }

  .kanban-card-modal-image figcaption {
    border-top-color: rgba(255, 255, 255, 0.1);
    background: #333;
    color: rgba(232, 229, 240, 0.72);
    font-weight: 400;
  }

  .kanban-card-modal-head-column {
    align-self: center;
  }

  .kanban-card-modal-image img,
  .kanban-card-modal-image.is-cover img,
  .kanban-card-modal-file-preview {
    height: 100px;
  }

  .kanban-image-lightbox-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(9, 8, 18, 0.72);
    padding: 42px;
  }

  .kanban-image-lightbox {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: #0f0e18;
    box-shadow: 0 32px 110px rgba(9, 8, 18, 0.46);
  }

  .kanban-image-lightbox img {
    display: block;
    width: min(88vw, 1700px);
    height: min(78vh, 900px);
    object-fit: contain;
    background: #111019;
  }

  .kanban-image-lightbox figcaption {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.2;
    padding: 10px 14px;
    text-transform: uppercase;
  }

  .kanban-image-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f0e18;
    font-size: 28px;
    line-height: 1;
  }

  .kanban-image-lightbox-close:hover,
  .kanban-image-lightbox-close:focus-visible {
    background: #fff;
    outline: none;
  }
}

/* codex-settings-site-exchange-modal-20260531 */
@media (min-width: 901px) {
  .settings-modal-view {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: block;
    padding: 0;
  }

  .settings-modal-view.is-hidden {
    display: none !important;
  }

  .settings-modal {
    width: min(91vw, calc(100vw - 96px));
    height: min(91vh, calc(100vh - 96px));
    max-height: calc(100vh - 96px);
    grid-template-rows: auto minmax(0, 1fr);
    border-color: rgba(255, 255, 255, 0.12);
    background: #222;
  }

  .settings-modal-tabs {
    width: min(100%, 1120px);
  }

  .settings-section-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .settings-section-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-section-tab {
    min-width: max-content;
    padding-inline: 18px;
  }

  .settings-modal-body {
    min-height: 0;
    overflow: hidden;
    padding: 18px 20px 20px;
    background: #222;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-modal-body {
    padding-top: 0;
  }

  .settings-modal-layout-wrap,
  .settings-modal-section {
    height: 100%;
    min-height: 0;
  }

  .settings-modal-section {
    padding: 0;
    overflow: hidden;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-modal-section {
    padding-top: 0;
  }

  .settings-modal .settings-layout {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 0;
    align-items: stretch;
  }

  .settings-modal-view.settings-view-has-category-menu .settings-layout {
    grid-template-columns: minmax(190px, 230px) minmax(220px, 260px) minmax(0, 1fr);
  }

  /* codex-settings-category-mirror-choice-20260620 */
  .settings-modal-view.settings-view-has-category-choice .settings-layout {
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
    transition: grid-template-columns 180ms ease;
  }

  .settings-modal .category-menu,
  .settings-modal .settings-main-panel {
    min-height: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .settings-modal .category-menu {
    align-content: start;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 14px;
    overflow: hidden;
  }

  .settings-modal-view.settings-view-has-category-choice .category-menu {
    padding-top: 0;
  }

  .settings-modal .settings-main-panel {
    display: grid;
    position: relative;
    grid-template-rows: auto auto minmax(0, 1fr);
    align-content: start;
    gap: 14px;
    padding: 20px 24px;
    overflow: auto;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
    scrollbar-width: thin;
  }

  .settings-category-panel-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 4;
    display: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.74);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-category-panel-toggle:not([hidden]) {
    display: grid;
  }

  .settings-category-panel-toggle::before {
    content: "";
    width: 9px;
    height: 9px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }

  .settings-category-panel-toggle:hover,
  .settings-category-panel-toggle:focus-visible {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    outline: none;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-main-panel > .panel-title {
    padding-right: 52px;
  }

  .settings-modal-view.settings-view-has-category-choice.settings-view-category-panel-collapsed .settings-layout {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  .settings-modal-view.settings-view-has-category-choice.settings-view-category-panel-collapsed .settings-main-panel {
    overflow: hidden;
    padding-left: 8px;
    padding-right: 8px;
  }

  .settings-modal-view.settings-view-has-category-choice.settings-view-category-panel-collapsed .settings-main-panel > :not(.settings-category-panel-toggle) {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }

  .settings-modal-view.settings-view-has-category-choice.settings-view-category-panel-collapsed .settings-category-panel-toggle {
    right: 9px;
  }

  .settings-modal-view.settings-view-has-category-choice.settings-view-category-panel-collapsed .settings-category-panel-toggle::before {
    transform: rotate(225deg);
  }

  .settings-modal .category-menu-list {
    min-height: 0;
    max-height: none;
    height: 100%;
    align-content: start;
    overflow: auto;
    margin-right: -10px;
    padding-right: 10px;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
  }

  .settings-modal .settings-category-menu .category-menu-list,
  .settings-modal .settings-catalog-category-menu .category-menu-list {
    min-height: 0;
    max-height: none;
  }

  .settings-modal .settings-values-list.settings-category-choice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    align-content: start;
    padding-right: 10px;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-values-menu {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-category-product-preview {
    display: grid;
    gap: 10px;
    min-height: 118px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 12px;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-category-product-preview.is-hidden {
    display: none;
  }

  .settings-category-product-preview-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
  }

  .settings-category-product-preview-head strong {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
  }

  .settings-category-product-preview-head span {
    color: rgba(255, 255, 255, 0.52);
    white-space: nowrap;
  }

  .settings-category-product-preview-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
  }

  .settings-category-product-preview-card {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    min-width: 0;
    min-height: 72px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
  }

  .settings-category-product-preview-card img {
    width: 62px;
    height: 72px;
    background: rgba(255, 255, 255, 0.08);
    object-fit: cover;
    object-position: center;
  }

  .settings-category-product-preview-copy {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 4px;
    padding: 8px 8px 8px 9px;
  }

  .settings-category-product-preview-copy strong,
  .settings-category-product-preview-copy span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .settings-category-product-preview-copy strong {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1.15;
    white-space: nowrap;
  }

  .settings-category-product-preview-copy span {
    display: -webkit-box;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 750;
    line-height: 1.2;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .settings-category-product-preview-empty {
    display: grid;
    min-height: 72px;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    margin: 0;
    text-align: center;
  }

  .settings-modal .settings-category-choice .menu-builder-choice-roots,
  .settings-modal .settings-category-choice .menu-builder-choice-parents {
    margin-right: -10px;
    padding-left: 0;
    padding-right: 10px;
  }

  /* codex-settings-category-search-toolbar-top20-20260620 */
  .settings-modal .settings-category-choice-toolbar {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(180px, 40%) minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-right: -10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 10px 12px 0;
  }

  .settings-modal .settings-category-choice .settings-category-choice-search {
    display: block;
    position: relative;
    min-width: 0;
    margin-right: 0;
    border-bottom: 0;
    padding: 0;
  }

  .settings-modal .settings-category-choice-search input {
    padding-left: 44px;
  }

  .settings-modal .settings-category-choice-search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    display: grid;
    width: 18px;
    height: 18px;
    place-items: center;
    color: rgba(255, 255, 255, 0.42);
    pointer-events: none;
    transform: translateY(-50%);
  }

  .settings-modal .settings-category-choice-search-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .settings-modal .settings-category-choice-block {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin-right: -10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-right: 10px;
  }

  .settings-modal .settings-category-choice-block .menu-builder-choice-roots,
  .settings-modal .settings-category-choice-block .menu-builder-choice-parents {
    margin-right: 0;
    border-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .settings-modal .settings-category-choice-block-cards .settings-category-choice-list {
    padding: 20px 0 20px 0;
  }

  /* codex-settings-category-fourth-level-empty-20260620 */
  .settings-modal .settings-category-choice-block-fourth {
    min-height: 330px;
    border-bottom: 0;
  }

  .settings-modal .settings-category-choice-level-spacer {
    width: 24px;
    height: 34px;
    justify-self: center;
    margin-top: 20px;
  }

  .settings-modal .settings-category-choice-fourth-empty {
    min-height: 318px;
    padding: 20px 10px 20px 0;
  }

  .settings-modal .settings-category-choice .settings-category-choice-fourth-list {
    padding: 0;
  }

  .settings-modal .settings-category-choice-fourth-empty.settings-category-drop-over {
    background: rgba(255, 255, 255, 0.06);
    outline: 1px dashed rgba(255, 255, 255, 0.32);
    outline-offset: -1px;
  }

  .settings-modal .settings-category-choice-level-add {
    display: grid;
    width: 24px;
    height: 34px;
    place-items: center;
    justify-self: center;
    margin-top: 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.58);
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
  }

  .settings-modal .settings-category-choice-block-cards .settings-category-choice-level-add {
    margin-top: 20px;
  }

  .settings-modal .settings-category-choice-level-add:hover,
  .settings-modal .settings-category-choice-level-add:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
  }

  .settings-modal .settings-category-choice-root-item {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: stretch;
  }

  .settings-modal .settings-category-choice-summary {
    display: flex;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-right: 0;
    border-bottom: 0;
    padding: 0;
  }

  .settings-modal .settings-category-choice-summary span {
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .settings-modal .settings-category-choice-summary small {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 800;
  }

  .settings-modal .settings-category-choice-summary button {
    min-height: 30px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.8);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 850;
  }

  .settings-modal .settings-category-choice-summary button:not(:disabled):hover,
  .settings-modal .settings-category-choice-summary button:not(:disabled):focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
  }

  .settings-modal .settings-category-choice-summary button:disabled {
    opacity: 0.44;
    cursor: default;
  }

  .settings-modal .settings-category-choice-list {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 20px 10px 2px 0;
  }

  .settings-modal .settings-category-choice-card {
    display: inline-flex;
    max-width: 100%;
    min-height: 34px;
    min-width: 0;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.82);
    padding: 0 12px;
    font-size: 12px;
    font-weight: 400;
    text-align: left;
  }

  .settings-modal .settings-category-choice-card:hover,
  .settings-modal .settings-category-choice-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
  }

  .settings-modal .settings-category-choice-card.active {
    border-color: rgba(110, 67, 210, 0.9);
    background: rgba(110, 67, 210, 0.9);
    color: #fff;
  }

  /* codex-settings-category-virtual-folder-outline-badges-20260620 */
  .settings-modal .settings-category-choice .menu-builder-choice-root.is-virtual-folder,
  .settings-modal .settings-category-choice .menu-builder-choice-parent.is-virtual-folder,
  .settings-modal .settings-category-choice-card.is-virtual-folder {
    border-color: rgba(224, 190, 125, 0.72);
    color: #ead6ad;
  }

  .settings-modal .settings-category-choice .menu-builder-choice-root.is-virtual-folder:hover,
  .settings-modal .settings-category-choice .menu-builder-choice-root.is-virtual-folder:focus-visible,
  .settings-modal .settings-category-choice .menu-builder-choice-parent.is-virtual-folder:hover,
  .settings-modal .settings-category-choice .menu-builder-choice-parent.is-virtual-folder:focus-visible,
  .settings-modal .settings-category-choice-card.is-virtual-folder:hover,
  .settings-modal .settings-category-choice-card.is-virtual-folder:focus-visible {
    border-color: rgba(238, 209, 151, 0.86);
    color: #fff0ce;
  }

  .settings-modal .settings-category-choice .menu-builder-choice-root.is-virtual-folder.is-active,
  .settings-modal .settings-category-choice .menu-builder-choice-parent.is-virtual-folder.is-active,
  .settings-modal .settings-category-choice-card.is-virtual-folder.active {
    border-color: rgba(238, 203, 137, 0.9);
    background: rgba(110, 67, 210, 0.9);
    color: #fff;
  }

  .settings-modal .settings-category-choice [draggable="true"] {
    cursor: grab;
  }

  .settings-modal .settings-category-choice .settings-category-dragging {
    cursor: grabbing;
    opacity: 0.54;
  }

  .settings-modal .settings-category-choice .settings-category-drop-over {
    border-color: rgba(255, 255, 255, 0.38);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .settings-modal .settings-category-choice .settings-category-choice-card {
    font-weight: 400;
  }

  .settings-modal .settings-category-choice .settings-category-choice-card.is-grandchild {
    padding-left: 12px;
  }

  .settings-modal .settings-category-choice-card .category-menu-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-modal .settings-category-choice-card > .category-menu-count {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.46);
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
  }

  .settings-modal .settings-category-choice .menu-builder-choice-root,
  .settings-modal .settings-category-choice .menu-builder-choice-parent {
    font-weight: 400;
  }

  .settings-modal .settings-category-choice .menu-builder-choice-root small,
  .settings-modal .settings-category-choice .menu-builder-choice-parent small,
  .settings-modal .settings-category-choice-card > .category-menu-count {
    font-weight: 400;
  }

  .settings-modal .settings-category-choice-card.active .category-menu-count {
    color: rgba(255, 255, 255, 0.72);
  }

  .settings-modal .settings-category-choice-empty {
    min-height: 110px;
    grid-column: 1 / -1;
    align-content: center;
    justify-items: center;
    text-align: center;
  }

  /* codex-settings-category-font-12-tabs-16-20260620 */
  .settings-modal-view.settings-view-has-category-choice {
    --settings-category-content-font-size: 12px;
    --settings-category-header-tab-font-size: 16px;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-section-tab {
    font-size: var(--settings-category-header-tab-font-size);
  }

  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-search span,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-search input,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-root,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-root span,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-root small,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-parent,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-parent span,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-parent small,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-root-add,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-level-add,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-summary span,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-summary small,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-summary button,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-card,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-card .category-menu-name,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-card > .category-menu-count,
  .settings-modal-view.settings-view-has-category-choice .settings-category-choice-empty,
  .settings-modal-view.settings-view-has-category-choice .settings-main-panel .panel-title h3,
  .settings-modal-view.settings-view-has-category-choice .settings-main-panel .field-grid label > span,
  .settings-modal-view.settings-view-has-category-choice .settings-main-panel .field-grid input,
  .settings-modal-view.settings-view-has-category-choice .settings-main-panel .field-grid textarea,
  .settings-modal-view.settings-view-has-category-choice .settings-category-woo-meta,
  .settings-modal-view.settings-view-has-category-choice .settings-category-woo-open,
  .settings-modal-view.settings-view-has-category-choice .settings-category-description summary,
  .settings-modal-view.settings-view-has-category-choice .settings-category-spec-groups summary,
  .settings-modal-view.settings-view-has-category-choice .settings-category-spec-group-row,
  .settings-modal-view.settings-view-has-category-choice .settings-category-spec-group-row span,
  .settings-modal-view.settings-view-has-category-choice .settings-category-spec-field-row {
    font-size: var(--settings-category-content-font-size);
  }

  .settings-modal-view.settings-view-has-category-choice .settings-category-choice .menu-builder-choice-search input::placeholder,
  .settings-modal-view.settings-view-has-category-choice .settings-main-panel .field-grid input::placeholder,
  .settings-modal-view.settings-view-has-category-choice .settings-main-panel .field-grid textarea::placeholder {
    font-size: var(--settings-category-content-font-size);
  }

  .settings-modal .category-menu-item,
  .settings-modal .settings-values-list:not(.is-category-tree) .settings-value-item {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    font-weight: 650;
  }

  .settings-modal .category-menu-item:hover,
  .settings-modal .settings-values-list:not(.is-category-tree) .settings-value-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .settings-modal .category-menu-item.active,
  .settings-modal .settings-values-list:not(.is-category-tree) .settings-value-item.active {
    border-left-color: #fff;
    background: rgba(110, 67, 210, 0.9);
    color: #fff;
    box-shadow: none;
  }

  .settings-modal .category-menu-count,
  .settings-modal .settings-values-list:not(.is-category-tree) .settings-value-item.has-size-filter,
  .settings-modal .settings-values-list:not(.is-category-tree) .settings-value-item.has-size-filter .category-menu-count {
    color: rgba(255, 255, 255, 0.58);
  }

  .settings-modal .panel-title {
    min-height: 40px;
    margin-bottom: 0;
  }

  .settings-modal .panel-title h3,
  .settings-modal .settings-users-title,
  .settings-modal .settings-user-login,
  .settings-modal .settings-brand-favorite-title {
    color: #fff;
  }

  /* codex-settings-category-contentds-title-link-20260620 */
  .settings-modal .settings-category-title-row {
    display: inline-flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }

  .settings-modal .settings-category-title-text {
    color: inherit;
  }

  .settings-modal .settings-category-title-link {
    color: inherit;
    text-decoration: none;
  }

  .settings-modal .settings-category-contentds-link {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .settings-modal .settings-category-title-link:hover,
  .settings-modal .settings-category-title-link:focus-visible,
  .settings-modal .settings-category-contentds-link:hover,
  .settings-modal .settings-category-contentds-link:focus-visible {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .settings-modal .settings-main-empty,
  .settings-modal .settings-category-note,
  .settings-modal .settings-brand-logo-hint,
  .settings-modal .settings-users-note,
  .settings-modal .settings-user-status,
  .settings-modal .settings-users-empty,
  .settings-modal .settings-user-form label > span,
  .settings-modal .settings-user-roles legend,
  .settings-modal .settings-user-column-field > span,
  .settings-modal .settings-kanban-column-grid label > span,
  .settings-modal .settings-kanban-color-field > span,
  .settings-modal .settings-size-filter-grid label > span,
  .settings-modal .settings-category-woo-field > span,
  .settings-modal .settings-category-woo-meta,
  .settings-modal .settings-category-description summary,
  .settings-modal .settings-category-spec-groups summary,
  .settings-modal .settings-category-spec-group-row span,
  .settings-modal .settings-category-spec-field-row,
  .settings-modal .settings-category-spec-settings-button,
  .settings-modal .settings-brand-logo-meta-row span,
  .settings-modal .settings-brand-favorite-row span {
    color: rgba(255, 255, 255, 0.58);
  }

  .settings-modal .settings-brand-panel {
    --settings-brand-logo-size: 156px;
    grid-template-columns: var(--settings-brand-logo-size) minmax(0, 1fr) minmax(190px, 230px);
    gap: 14px;
  }

  .settings-modal .settings-brand-logo-preview,
  .settings-modal .settings-brand-logo-meta,
  .settings-modal .settings-brand-favorite-block,
  .settings-modal .settings-brand-landing-block,
  .settings-modal .settings-users-card,
  .settings-modal .settings-user-avatar-card,
  .settings-modal .settings-user-column-card,
  .settings-modal .settings-users-list,
  .settings-modal .settings-category-description,
  .settings-modal .settings-category-spec-groups,
  .settings-modal .settings-main-empty {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
  }

  .settings-modal .settings-brand-logo-meta-row strong,
  .settings-modal .settings-brand-favorite-row,
  .settings-modal .settings-category-spec-group-row,
  .settings-modal .settings-category-woo-open,
  .settings-modal .settings-brand-landing-row,
  .settings-modal .settings-brand-landing-title {
    color: #fff;
  }

  .settings-modal .settings-category-spec-group {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  .settings-modal .settings-category-spec-field-row {
    border-top-color: rgba(255, 255, 255, 0.1);
  }

  .settings-modal .settings-category-woo-open {
    border-color: rgba(255, 255, 255, 0.22);
    background: transparent;
  }

  .settings-modal .settings-category-woo-card {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.03);
  }

  .settings-modal .settings-category-woo-name {
    color: #fff;
  }

  .settings-modal .settings-category-woo-button {
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
  }

  .settings-modal .settings-category-woo-clear {
    color: rgba(255, 255, 255, 0.68);
  }

  .settings-modal .settings-category-woo-open:hover,
  .settings-modal .settings-category-woo-open:focus-visible,
  .settings-modal .settings-category-woo-button:hover,
  .settings-modal .settings-category-woo-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
  }

  .settings-modal .settings-category-spec-settings-button {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
  }

  .settings-modal .settings-category-spec-settings-button:hover,
  .settings-modal .settings-category-spec-settings-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
  }

  .settings-modal-view.settings-view-has-category-choice .settings-category-panel {
    height: 100%;
    grid-template-rows: auto auto minmax(38px, 1fr);
  }

  .settings-modal .settings-category-delete-button {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.58);
  }

  .settings-modal .settings-category-delete-button:hover,
  .settings-modal .settings-category-delete-button:focus-visible {
    border-color: rgba(214, 91, 91, 0.58);
    background: rgba(214, 91, 91, 0.12);
    color: #ffb2b2;
  }

  .settings-modal input,
  .settings-modal select,
  .settings-modal textarea,
  .settings-modal .settings-user-form input[type="text"],
  .settings-modal .settings-user-form input[type="password"],
  .settings-modal .settings-user-column-field select,
  .settings-modal .settings-brand-landing-row input[type="url"] {
    border-color: rgba(255, 255, 255, 0.16);
    background-color: #1c1c1c;
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .settings-modal input:focus,
  .settings-modal select:focus,
  .settings-modal textarea:focus,
  .settings-modal .settings-user-form input[type="text"]:focus,
  .settings-modal .settings-user-form input[type="password"]:focus,
  .settings-modal .settings-user-column-field select:focus,
  .settings-modal .settings-brand-landing-row input[type="url"]:focus {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
  }

  .settings-modal input::placeholder,
  .settings-modal textarea::placeholder,
  .settings-modal .settings-brand-landing-title::placeholder {
    color: rgba(255, 255, 255, 0.45);
  }

  .settings-modal .button,
  .settings-modal .settings-logout-button,
  .settings-modal .settings-user-actions .button-primary,
  .settings-modal .settings-user-avatar-upload,
  .settings-modal .settings-user-avatar-remove {
    border-color: rgba(255, 255, 255, 0.68);
    background: transparent;
    color: #fff;
    box-shadow: none;
  }

  .settings-modal .button:hover,
  .settings-modal .button:focus-visible,
  .settings-modal .settings-logout-button:hover,
  .settings-modal .settings-logout-button:focus-visible,
  .settings-modal .settings-user-actions .button-primary:hover,
  .settings-modal .settings-user-actions .button-primary:focus-visible,
  .settings-modal .settings-user-avatar-upload:hover,
  .settings-modal .settings-user-avatar-upload:focus-visible,
  .settings-modal .settings-user-avatar-remove:hover,
  .settings-modal .settings-user-avatar-remove:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    transform: none;
  }

  .settings-modal .settings-users-panel {
    max-width: none;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 230px);
    align-items: start;
    gap: 28px;
  }

  .settings-modal .settings-users-card {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .settings-modal .settings-user-avatar-card {
    grid-column: 2;
    grid-row: 1;
  }

  .settings-modal .settings-user-column-card {
    grid-column: 2;
    grid-row: 2;
  }

  .settings-modal .settings-users-list--main {
    display: none;
  }

  .settings-modal .settings-users-card,
  .settings-modal .settings-user-avatar-card,
  .settings-modal .settings-user-column-card {
    position: relative;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .settings-modal .settings-user-avatar-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -14px;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .settings-modal .settings-user-role-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-modal .settings-user-form .settings-user-role {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.03);
  }

  .settings-modal .settings-user-form .settings-user-role > span {
    color: #fff;
  }

  .settings-modal .settings-user-row {
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
    color: #fff;
  }

  .settings-modal .settings-user-row:hover,
  .settings-modal .settings-user-row.active {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
  }

  .settings-modal .settings-user-role-pill {
    background: rgba(110, 67, 210, 0.22);
    color: #cdbdff;
  }

  .settings-modal .settings-user-column-pill,
  .settings-modal .settings-user-password-pill {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
  }

  .settings-modal .settings-user-avatar-preview {
    width: 104px;
    height: 104px;
    border-color: rgba(255, 255, 255, 0.14);
    background: #1c1c1c;
    color: rgba(255, 255, 255, 0.58);
  }

  .settings-modal .settings-user-avatar-card,
  .settings-modal .settings-user-column-card {
    gap: 10px;
  }

  .settings-modal .settings-kanban-color-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: none;
  }

  .settings-modal .kanban-column-color-tile {
    border-color: rgba(255, 255, 255, 0.16);
    color: #fff;
  }
}

@media (max-width: 900px) {
  .kanban-card-modal-backdrop {
    padding: 12px;
  }

  .kanban-card-modal {
    width: calc(100vw - 24px);
    height: min(86vh, 820px);
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .kanban-card-modal-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .kanban-card-modal-members {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: start;
  }

  .kanban-card-checklist-button {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
  }

  .kanban-card-modal-head-column {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .kanban-card-modal-top {
    grid-template-columns: 1fr;
  }

  .kanban-card-modal-images {
    grid-column: auto;
  }

  .kanban-card-modal-field textarea {
    min-height: 260px;
  }
}

.kanban-card-image {
  margin: 2px 0 8px;
  overflow: hidden;
  border: 1px solid rgba(117, 111, 134, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.kanban-card-image img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
}

@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-background .kanban-card {
    background: var(--kanban-card-bg);
    border-color: rgba(89, 71, 132, 0.16);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-text .kanban-card-head strong,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-text .kanban-card-details,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-text .kanban-card-details.is-primary,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-text .kanban-card-column-text {
    color: var(--kanban-card-text);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-column-text {
    display: block;
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .panel.kanban-column {
    padding-left: 6px;
    padding-right: 6px;
  }

  .kanban-card.has-image {
    position: relative;
  }

  .kanban-card.has-image .kanban-card-image {
    order: 1;
    margin: -12px -12px 0;
    border-width: 0 0 1px;
    border-radius: 8px 8px 0 0;
    background: transparent;
  }

  .kanban-card.has-image .kanban-card-head {
    order: 2;
    position: static;
    grid-template-columns: minmax(0, 1fr);
  }

  .kanban-card.has-image .kanban-card-head.is-title-empty {
    margin-bottom: 0;
  }

  .kanban-card.has-image > .kanban-card-details {
    order: 4;
  }

  .kanban-card.has-image .kanban-card-files-badge {
    order: 5;
    align-self: end;
  }

  .kanban-card.has-image .kanban-card-column-text {
    order: 3;
    margin-top: -4px;
  }

  .kanban-card.has-image .kanban-card-action {
    top: 8px;
    right: 8px;
  }

  .kanban-card.has-image .kanban-card-action-menu {
    top: 8px;
  }
}

.kanban-quick-add {
  display: flex;
  min-height: 66px;
  width: 100%;
  border: 1px dashed rgba(117, 111, 134, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.34);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  cursor: pointer;
}

.kanban-quick-add:hover,
.kanban-quick-add:focus-visible,
.kanban-quick-add.is-file-over {
  color: color-mix(in srgb, var(--muted) 64%, #ffffff);
  outline: none;
}

.kanban-quick-form {
  display: grid;
  gap: 6px;
}

.kanban-quick-form textarea {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(117, 111, 134, 0.24);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  padding: 11px 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  resize: none;
  outline: none;
}

.kanban-quick-form textarea:focus {
  border-color: rgba(117, 66, 217, 0.48);
  box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.12);
}

.kanban-quick-voice-row {
  display: flex;
  justify-content: flex-end;
  padding-right: 8px;
}

.kanban-quick-voice {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(9, 8, 18, 0.92);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(9, 8, 17, 0.18);
}

.kanban-quick-voice svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kanban-quick-voice:hover,
.kanban-quick-voice:focus-visible,
.kanban-quick-voice.is-listening {
  background: var(--purple);
  outline: none;
}

.kanban-quick-voice:disabled {
  cursor: default;
  opacity: 0.38;
}

.kanban-quick-attachment {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(117, 111, 134, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.kanban-quick-attachment img {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
}

.kanban-quick-attachment.is-file-list {
  padding: 10px;
}

.kanban-quick-file-list {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.kanban-file-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  color: #f7f3ff;
  font-size: 12px;
  font-weight: 700;
}

.kanban-file-chip-icon {
  display: inline-flex;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--purple);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.kanban-file-chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-file-chip-size {
  color: rgba(247, 243, 255, 0.62);
  font-size: 11px;
  white-space: nowrap;
}

.kanban-quick-attachment-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: rgba(9, 8, 18, 0.82);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  align-items: center;
  justify-content: center;
}

.kanban-card-files-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  background: var(--green);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  align-items: center;
  justify-self: start;
  text-decoration: none;
  cursor: pointer;
}

.kanban-card-files-badge:hover,
.kanban-card-files-badge:focus-visible {
  color: var(--ink);
  outline: none;
  filter: brightness(1.05);
}

.kanban-card-files-badge:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.24);
}

.kanban-card-modal-files {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.kanban-card-modal-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: #333;
  color: #f7f3ff;
  text-decoration: none;
}

.kanban-card-modal-file:hover,
.kanban-card-modal-file:focus-visible {
  border-color: rgba(168, 85, 247, 0.62);
  outline: none;
}

.kanban-card-modal-file-name {
  overflow: hidden;
  color: inherit;
  font-size: 13px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-card-modal-file-size {
  color: rgba(247, 243, 255, 0.58);
  font-size: 12px;
  white-space: nowrap;
}

.catalog-head {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) auto;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.catalog-head-title {
  align-self: end;
  min-width: 0;
}

.content-layer-title {
  align-self: start;
  align-content: start;
}

.content-layer-title .eyebrow {
  margin-bottom: 0;
}

.catalog-head-actions {
  display: grid;
  grid-column: 3;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  align-items: stretch;
  justify-content: flex-end;
  justify-self: end;
  gap: 8px;
}

.metric-strip {
  display: grid;
  grid-template-columns: repeat(1, minmax(120px, 1fr));
  gap: 10px;
}

.catalog-head-actions .metric-strip {
  display: contents;
}

@media (min-width: 1241px) {
  .catalog-head {
    grid-template-columns: minmax(250px, 300px) repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }

  .catalog-head .sync-panel,
  .catalog-head-actions,
  .catalog-head-actions .metric-strip {
    display: contents;
  }

  .catalog-head .sync-panel > :first-child {
    grid-column: 2;
  }

  .catalog-head .sync-panel > *,
  .catalog-head-actions .metric-card,
  .catalog-head-actions .sync-filter-card {
    min-width: 0;
    min-height: 110px;
  }
}

.metric-card {
  min-width: 126px;
  border: 1px solid rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--soft-shadow);
  padding: 14px 15px;
  backdrop-filter: blur(16px);
}

.metric-card span {
  display: block;
  font-size: 30px;
  font-weight: 760;
  line-height: 1;
}

.metric-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.metric-filter-card {
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.metric-filter-card:hover,
.metric-filter-card:focus-visible,
.metric-filter-card:active,
.metric-filter-card.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(9, 8, 17, 0.18), var(--soft-shadow);
  outline: none;
}

.metric-filter-card:hover p,
.metric-filter-card:focus-visible p,
.metric-filter-card:active p,
.metric-filter-card.is-active p {
  color: rgba(255, 255, 255, 0.74);
}

.metric-filter-card:hover span,
.metric-filter-card:focus-visible span,
.metric-filter-card:active span,
.metric-filter-card.is-active span {
  color: #fff;
}

.archive-filter-card {
  display: none;
}

@media (min-width: 1241px) {
  .archive-filter-card {
    display: block;
  }
}

.topbar-metrics {
  flex: 0 0 auto;
  grid-template-columns: repeat(3, minmax(82px, 94px));
  gap: 8px;
}

.topbar-metrics .metric-card {
  min-width: 0;
  padding: 8px 10px;
}

.topbar-metrics .metric-card span {
  font-size: 21px;
}

.topbar-metrics .metric-card p {
  margin-top: 4px;
  font-size: 11px;
}

.topbar-sync-card {
  flex: 0 0 220px;
  display: grid;
  align-content: center;
  min-width: 0;
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background: rgba(255, 255, 249, 0.72);
  padding: 8px 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.topbar-sync-card span,
.topbar-sync-card strong {
  display: block;
}

.topbar-sync-card span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.topbar-sync-card strong {
  overflow: hidden;
  margin-top: 5px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

.catalog-head .sync-panel {
  grid-column: 2;
  align-self: stretch;
  min-width: 0;
}

.sync-panel > div,
.sync-panel > button,
.sync-filter-card {
  display: grid;
  align-content: start;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: var(--soft-shadow);
  padding: 12px 14px;
  backdrop-filter: blur(16px);
}

.sync-panel > button,
.sync-filter-card {
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sync-panel > button:hover,
.sync-panel > button:focus-visible,
.sync-panel > button:active,
.sync-panel > button.is-active,
.sync-filter-card:hover,
.sync-filter-card:focus-visible,
.sync-filter-card:active,
.sync-filter-card.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(9, 8, 17, 0.18), var(--soft-shadow);
  outline: none;
}

.sync-panel > button:hover span,
.sync-panel > button:focus-visible span,
.sync-panel > button:active span,
.sync-panel > button.is-active span,
.sync-filter-card:hover span,
.sync-filter-card:focus-visible span,
.sync-filter-card:active span,
.sync-filter-card.is-active span {
  color: rgba(255, 255, 255, 0.74);
}

.sync-panel > button:hover strong,
.sync-panel > button:focus-visible strong,
.sync-panel > button:active strong,
.sync-panel > button.is-active strong,
.sync-filter-card:hover strong,
.sync-filter-card:focus-visible strong,
.sync-filter-card:active strong,
.sync-filter-card.is-active strong {
  color: #fff;
}

.sync-panel span,
.sync-panel strong,
.sync-filter-card span,
.sync-filter-card strong {
  display: block;
}

.sync-panel span,
.sync-filter-card span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}

.sync-panel strong,
.sync-filter-card strong {
  overflow: hidden;
  font-size: 30px;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-filter-card span {
  margin-top: 6px;
}

.catalog-head .sync-filter-card,
.catalog-head .metric-card,
.catalog-head-actions .metric-card {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.catalog-layout {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.catalog-sidebar {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.catalog-sidebar-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.catalog-sidebar-metrics .metric-card {
  display: grid;
  min-width: 0;
  min-height: 110px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.category-menu {
  display: grid;
  position: sticky;
  top: 112px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.45);
  box-shadow: var(--soft-shadow);
  padding: 16px;
  backdrop-filter: blur(18px);
}

@media (min-width: 901px) {
  .catalog-sidebar {
    --catalog-sidebar-sticky-top: 179px;
    --catalog-sidebar-bottom-gap: 8px;
    position: sticky;
    top: var(--catalog-sidebar-sticky-top);
    align-self: start;
    height: calc(100vh - var(--catalog-sidebar-sticky-top) - var(--catalog-sidebar-bottom-gap));
    max-height: calc(100vh - var(--catalog-sidebar-sticky-top) - var(--catalog-sidebar-bottom-gap));
    min-height: 0;
    align-content: space-between;
  }

  .catalog-sidebar .category-menu {
    position: static;
    max-height: calc(100vh - var(--catalog-sidebar-sticky-top) - 130px);
    overflow: hidden;
  }

  .catalog-sidebar .category-menu-list {
    max-height: calc(100vh - var(--catalog-sidebar-sticky-top) - 164px);
  }

  .catalog-sidebar-metrics {
    align-self: end;
  }
}

@media (min-width: 1741px) {
  .catalog-sidebar {
    --catalog-sidebar-sticky-top: 107px;
  }
}

.category-menu-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
  max-height: calc(100vh - 220px);
  overflow: auto;
  margin-right: -20px;
  padding-right: 20px;
  scrollbar-color: #111111 rgba(0, 0, 0, 0.08);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.category-menu-list::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.category-menu-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}

.category-menu-list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: #111111;
}

.category-menu-list::-webkit-scrollbar-thumb:hover {
  background: #000000;
}

.settings-category-menu {
  position: static;
}

.settings-catalog-category-menu {
  position: static;
}

.settings-category-menu .category-menu-list {
  min-height: 400px;
  max-height: 400px;
  align-content: start;
  overflow: hidden;
  margin-right: 0;
  padding-right: 0;
}

.settings-catalog-category-menu .category-menu-list {
  min-height: 400px;
  align-content: start;
}

.settings-values-menu {
  width: 100%;
  position: static;
}

.settings-values-menu .category-menu-list {
  min-height: 400px;
  max-height: calc(100vh - 220px);
  align-content: start;
}

.settings-main-panel {
  min-height: 400px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.settings-main-panel > .panel-title {
  min-height: 48px;
}

.settings-logout-button {
  appearance: none;
  min-height: 38px;
  border: 1px solid rgba(9, 8, 17, 0.16);
  border-radius: 8px;
  background: #090811;
  color: #fff;
  padding: 9px 18px;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.settings-logout-button[hidden] {
  display: none;
}

.settings-logout-button:hover,
.settings-logout-button:focus-visible {
  background: #1b1825;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px rgba(51, 33, 84, 0.12);
  transform: translateY(-1px);
}

.settings-logout-button:focus-visible {
  outline: 2px solid rgba(117, 66, 217, 0.18);
  outline-offset: 2px;
}

.settings-logout-button:active {
  transform: translateY(0);
}

@media (max-width: 1500px) and (min-width: 1101px) {
  .settings-view.settings-view-has-category-menu .settings-layout {
    grid-template-columns: minmax(180px, 220px) minmax(220px, 260px) minmax(0, 1fr);
  }

  .settings-modal-view.settings-view-has-category-choice .settings-layout {
    grid-template-columns: minmax(0, 7fr) minmax(300px, 3fr);
  }
}

.settings-main-empty {
  border: 1px dashed rgba(89, 71, 132, 0.24);
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  font-size: 13px;
}

.settings-brand-panel {
  --settings-brand-logo-size: 176px;
  display: grid;
  grid-template-columns: var(--settings-brand-logo-size) minmax(280px, 420px) minmax(200px, 240px);
  align-items: start;
  gap: 14px;
}

.settings-category-panel {
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
}

.settings-category-delete-row {
  display: flex;
  min-height: 38px;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: auto;
}

.settings-category-delete-button {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(89, 71, 132, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.5);
  color: rgba(69, 55, 104, 0.68);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.settings-category-delete-button svg {
  display: block;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-category-delete-button:hover,
.settings-category-delete-button:focus-visible {
  border-color: rgba(190, 65, 65, 0.46);
  background: rgba(190, 65, 65, 0.1);
  color: #be4141;
  outline: none;
}

.settings-category-delete-button:disabled {
  opacity: 0.54;
  cursor: progress;
}

.settings-category-spec-groups {
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  padding: 14px;
}

.settings-category-description {
  display: grid;
  gap: 10px;
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  padding: 12px;
}

.settings-category-description summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.settings-category-description textarea {
  min-height: 160px;
}

.settings-category-woo-field {
  display: grid;
  gap: 8px;
}

.settings-category-woo-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.02);
}

.settings-category-woo-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.settings-category-woo-name {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-category-woo-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.settings-category-woo-button,
.settings-category-woo-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(89, 71, 132, 0.28);
  border-radius: 8px;
  background: transparent;
  padding: 0 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.settings-category-woo-open {
  cursor: pointer;
}

.settings-category-woo-button:hover,
.settings-category-woo-button:focus-visible,
.settings-category-woo-open:hover,
.settings-category-woo-open:focus-visible {
  border-color: rgba(111, 66, 193, 0.55);
  color: var(--purple);
}

.settings-category-woo-open.is-disabled {
  pointer-events: none;
  opacity: 0.48;
}

.settings-category-woo-clear {
  color: var(--muted);
}

.settings-category-woo-meta {
  min-height: 16px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-category-spec-groups summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  list-style: none;
}

.settings-category-spec-groups summary::-webkit-details-marker {
  display: none;
}

.settings-category-spec-summary {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-category-spec-summary-title {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.settings-category-spec-summary-title::before {
  content: "▸";
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
}

.settings-category-spec-groups[open] .settings-category-spec-summary-title::before {
  content: "▾";
}

.settings-category-spec-settings-button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  border: 1px solid rgba(89, 71, 132, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.44);
  color: var(--muted);
  padding: 0;
  cursor: pointer;
}

.settings-category-spec-settings-button svg {
  width: 15px;
  height: 15px;
}

.settings-category-spec-settings-button:hover,
.settings-category-spec-settings-button:focus-visible {
  border-color: rgba(111, 66, 193, 0.48);
  color: var(--purple);
  outline: none;
}

.settings-category-spec-group-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.settings-category-spec-group {
  display: grid;
  gap: 8px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(89, 71, 132, 0.12);
}

.settings-category-spec-group:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.settings-category-spec-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

.settings-category-spec-group-row span {
  color: var(--muted);
}

.settings-category-spec-group-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.settings-category-spec-field-list {
  display: grid;
  gap: 0;
  padding-left: 0;
}

.settings-category-spec-field-row {
  min-height: 30px;
  display: flex;
  align-items: center;
  border-top: 1px solid rgba(89, 71, 132, 0.1);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.settings-category-spec-group:not(.is-selected) .settings-category-spec-field-row {
  opacity: 0.54;
}

.settings-category-specs-modal-backdrop {
  z-index: 134;
  background: rgba(9, 8, 18, 0.58);
}

.settings-category-specs-modal-head {
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}

/* codex-settings-category-woo-selector-desktop-20260629 */
@media (min-width: 768px) {
  .settings-category-woo-selector-backdrop {
    z-index: 135;
    background: rgba(9, 8, 18, 0.58);
  }

  .settings-category-woo-selector-modal {
    width: min(960px, calc(100vw - 96px));
    height: min(760px, calc(100vh - 96px));
  }

  .settings-category-woo-selector-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .settings-category-woo-selector-tabs {
    width: min(100%, 360px);
  }

  .site-exchange-filter-modal-body.settings-category-woo-selector-body {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: 12px;
    min-height: 0;
  }

  .settings-category-woo-selector-current {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 8px 10px;
  }

  .settings-category-woo-selector-current span,
  .settings-category-woo-selector-current small {
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    font-weight: 700;
  }

  .settings-category-woo-selector-current strong,
  .settings-category-woo-selector-current small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-category-woo-selector-current strong {
    color: #fff;
    font-size: 14px;
    font-weight: 850;
  }

  .settings-category-woo-selector-search input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    outline: none;
  }

  .settings-category-woo-selector-search input:focus {
    border-color: rgba(111, 66, 193, 0.68);
  }

  .settings-category-woo-selector-results {
    min-height: 0;
    overflow: auto;
    padding-right: 6px;
  }

  .settings-category-woo-selector-section {
    display: grid;
    gap: 8px;
  }

  .settings-category-woo-selector-section + .settings-category-woo-selector-section {
    margin-top: 18px;
  }

  .settings-category-woo-selector-section h3 {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    font-weight: 850;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .settings-category-woo-selector-list {
    display: grid;
    gap: 6px;
  }

  .settings-category-woo-option {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    cursor: pointer;
  }

  .settings-category-woo-option:hover,
  .settings-category-woo-option:focus-visible {
    border-color: rgba(111, 66, 193, 0.62);
    background: rgba(111, 66, 193, 0.16);
    outline: none;
  }

  .settings-category-woo-option.is-selected {
    border-color: rgba(111, 66, 193, 0.84);
    background: rgba(111, 66, 193, 0.22);
  }

  .settings-category-woo-option-main,
  .settings-category-woo-option-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  .settings-category-woo-option-main strong,
  .settings-category-woo-option-main small,
  .settings-category-woo-option-meta span,
  .settings-category-woo-option-meta em {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .settings-category-woo-option-main strong {
    color: #fff;
    font-size: 14px;
    font-weight: 850;
  }

  .settings-category-woo-option-main small,
  .settings-category-woo-option-meta span {
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    font-style: normal;
    font-weight: 650;
  }

  .settings-category-woo-option-meta em {
    color: #d8b46c;
    font-size: 12px;
    font-style: normal;
    font-weight: 750;
  }

  .settings-category-woo-option-action {
    min-width: 82px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.78);
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 850;
    line-height: 1;
    text-align: center;
  }

  .settings-category-woo-selector-status {
    margin: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
  }

  .settings-category-woo-selector-status.is-error {
    color: #ffb2b2;
  }
}

.settings-category-spec-add-button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.86);
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
}

.settings-category-spec-add-button:hover,
.settings-category-spec-add-button:focus-visible {
  border-color: rgba(111, 66, 193, 0.62);
  background: rgba(111, 66, 193, 0.24);
  color: #fff;
  outline: none;
}

.settings-category-specs-modal-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
}

.settings-category-specs-modal-heading {
  display: grid;
  gap: 4px;
}

.settings-category-specs-modal-list-wrap {
  min-height: 0;
  overflow: auto;
  padding-right: 6px;
}

.settings-category-specs-modal-list {
  margin-top: 0;
}

.settings-category-specs-modal .settings-category-spec-group {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.settings-category-specs-modal .settings-category-spec-group-row {
  color: #fff;
}

.settings-category-specs-modal .settings-category-spec-group-row span,
.settings-category-specs-modal .settings-category-spec-field-row {
  color: rgba(255, 255, 255, 0.62);
}

.settings-category-specs-modal .settings-category-spec-field-row {
  border-top-color: rgba(255, 255, 255, 0.1);
}

.settings-category-custom-spec-edit-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-category-custom-spec-input {
  width: 100%;
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  outline: none;
}

.settings-category-custom-spec-input::placeholder {
  color: rgba(255, 255, 255, 0.38);
}

.settings-category-custom-spec-input:focus {
  border-color: rgba(111, 66, 193, 0.68);
  box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.18);
}

.settings-category-custom-spec-remove {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.66);
  padding: 0;
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.settings-category-custom-spec-remove:hover,
.settings-category-custom-spec-remove:focus-visible {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
  outline: none;
}

@media (max-width: 720px) {
  .settings-category-specs-modal-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .settings-category-spec-add-button {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.settings-users-panel {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.settings-users-card,
.settings-user-avatar-card,
.settings-user-column-card,
.settings-users-list {
  display: grid;
  gap: 14px;
  border: 1px solid rgba(89, 71, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 249, 0.72);
  padding: 16px;
}

.settings-users-head {
  display: grid;
  gap: 4px;
}

.settings-users-title {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
}

.settings-users-note,
.settings-user-status,
.settings-users-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.settings-user-form {
  display: grid;
  gap: 12px;
}

.settings-user-form label {
  display: grid;
  gap: 8px;
}

.settings-user-form label > span,
.settings-user-roles legend {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-user-form input[type="text"],
.settings-user-form input[type="password"],
.settings-user-column-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  padding: 0 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.settings-user-form input[type="text"]:focus,
.settings-user-form input[type="password"]:focus,
.settings-user-column-field select:focus {
  border-color: rgba(117, 66, 217, 0.42);
  outline: 2px solid rgba(117, 66, 217, 0.14);
  outline-offset: 0;
}

.settings-user-column-card {
  gap: 12px;
}

.settings-user-column-field {
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.settings-user-column-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-user-column-field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(89, 71, 132, 0.72) 50%),
    linear-gradient(135deg, rgba(89, 71, 132, 0.72) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}

.settings-user-roles {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.settings-user-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.settings-user-form .settings-user-role {
  display: flex;
  min-height: 36px;
  border: 1px solid rgba(89, 71, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.58);
  padding: 8px 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  align-items: center;
  gap: 8px;
}

.settings-user-form .settings-user-role > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.settings-user-form .settings-user-role input {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  accent-color: var(--purple);
}

.settings-user-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-user-status.is-error {
  color: var(--coral);
}

.settings-user-status.is-success {
  color: var(--green-dark);
}

.settings-users-list-items {
  display: grid;
  gap: 8px;
}

.settings-user-avatar-card {
  display: none;
}

.settings-user-avatar-preview {
  display: grid;
  width: 128px;
  height: 128px;
  border: 1px solid rgba(89, 71, 132, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-size: 34px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.settings-user-avatar-preview img,
.settings-user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.settings-user-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.settings-user-avatar-upload,
.settings-user-avatar-remove {
  min-height: 36px;
  padding-left: 14px;
  padding-right: 14px;
  white-space: nowrap;
}

.settings-user-avatar {
  display: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(117, 66, 217, 0.1);
  color: var(--purple);
  font-size: 13px;
  font-weight: 750;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.settings-users-values-wrap,
.settings-users-list--values {
  display: none;
}

.settings-user-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(140px, 0.4fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(89, 71, 132, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.54);
  margin: 0;
  padding: 10px 12px;
  color: inherit;
  font: inherit;
  text-align: left;
  appearance: none;
  cursor: pointer;
}

.settings-user-row:hover,
.settings-user-row.active {
  border-color: rgba(117, 66, 217, 0.28);
  background: rgba(117, 66, 217, 0.08);
}

.settings-user-row:focus-visible {
  outline: 2px solid rgba(117, 66, 217, 0.18);
  outline-offset: 2px;
}

.settings-user-login {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.settings-user-roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-user-role-pill,
.settings-user-column-pill,
.settings-user-password-pill {
  display: inline-flex;
  min-height: 24px;
  border-radius: 999px;
  background: rgba(117, 66, 217, 0.1);
  color: var(--purple);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 750;
  align-items: center;
}

.settings-user-password-pill {
  background: rgba(83, 112, 7, 0.11);
  color: var(--green-dark);
  white-space: nowrap;
}

.settings-user-column-pill {
  background: rgba(9, 8, 17, 0.08);
  color: var(--ink);
  white-space: nowrap;
}

/* codex-desktop-users-list-in-values-menu-20260522 */
@media (min-width: 901px) {
  .settings-user-contact-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .settings-user-contact-row label {
    min-width: 0;
  }

  .settings-users-panel {
    grid-template-columns: minmax(0, 1fr) 280px;
    align-items: start;
    max-width: none;
  }

  .settings-users-card {
    min-width: 0;
  }

  .settings-user-avatar-card {
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 232px;
  }

  .settings-user-column-card {
    grid-column: 1 / -1;
  }

  .settings-user-avatar {
    display: inline-grid;
  }

  .settings-users-panel .settings-users-list--main {
    display: none;
  }

  .settings-users-values-wrap {
    display: grid;
    margin-top: 10px;
  }

  .settings-users-list--values {
    display: grid;
    gap: 12px;
    padding: 12px;
  }

  .settings-users-list--values .settings-user-row {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 10px;
  }

  .settings-users-list--values .settings-user-roles-list,
  .settings-users-list--values .settings-user-column-pill,
  .settings-users-list--values .settings-user-password-pill {
    grid-column: 2;
  }

  .settings-users-list--values .settings-user-login {
    font-size: 13px;
  }

  .settings-users-list--values .settings-user-roles-list {
    gap: 5px;
  }

  .settings-users-list--values .settings-user-password-pill {
    justify-self: start;
  }

  .settings-users-list--values .settings-user-column-pill {
    justify-self: start;
  }
}

/* codex-settings-size-filter-select-20260520 */
.settings-kanban-column-grid label,
.settings-size-filter-grid label {
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.settings-kanban-color-field {
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.settings-kanban-order-field {
  width: min(100%, 350px);
}

.settings-kanban-order-field input[type="number"] {
  appearance: textfield;
}

.settings-kanban-order-field input[type="number"]::-webkit-outer-spin-button,
.settings-kanban-order-field input[type="number"]::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.settings-kanban-color-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  width: min(100%, 1220px);
  max-width: 1220px;
}

.settings-kanban-column-grid label > span,
.settings-kanban-color-field > span,
.settings-size-filter-grid label > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.kanban-column-color-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 420px;
}

.kanban-column-color-reset {
  appearance: none;
  height: 30px;
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  min-width: 88px;
  padding: 0 10px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.kanban-column-color-native {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.kanban-column-color-native input[type="color"] {
  appearance: none;
  width: 38px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.kanban-column-color-native input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 3px;
}

.kanban-column-color-native input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 5px;
}

.kanban-column-color-native input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 5px;
}

.kanban-column-color-reset:hover,
.kanban-column-color-reset:focus-visible,
.kanban-column-color-native input[type="color"]:hover,
.kanban-column-color-native input[type="color"]:focus-visible {
  border-color: var(--purple);
  outline: none;
}

.kanban-column-color-reset.is-active {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(117, 66, 217, 0.2);
}

.kanban-column-color-tile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  padding: 10px 14px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
  background: var(--kanban-color-tile-bg, #fff);
  box-shadow: 0 0 0 1px rgba(89, 71, 132, 0.14);
  overflow: hidden;
}

.settings-kanban-column-grid .kanban-column-color-tile > span {
  position: relative;
  z-index: 1;
  color: var(--kanban-color-tile-text, var(--ink));
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}

.kanban-column-color-tile input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  opacity: 0;
  cursor: pointer;
}

.kanban-column-color-tile:hover,
.kanban-column-color-tile:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 2px rgba(117, 66, 217, 0.2);
}

/* codex-brand-logo-compact-row-20260520 */
.settings-brand-logo-preview {
  grid-column: 1;
  grid-row: 1;
  width: var(--settings-brand-logo-size);
  height: var(--settings-brand-logo-size);
  min-height: 0;
  align-self: start;
  display: grid;
  place-items: center;
  border: 1px solid rgba(89, 71, 132, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.64);
  padding: 12px;
}

.settings-brand-logo-image {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.settings-brand-logo-placeholder {
  padding: 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  overflow-wrap: anywhere;
}

.settings-brand-logo-actions {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  gap: 10px;
  min-width: 0;
}

/* codex-brand-logo-actions-align-20260520 */
.settings-brand-logo-actions .button {
  display: inline-flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

/* codex-brand-logo-meta-side-20260520 */
.settings-brand-logo-meta {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: var(--settings-brand-logo-size);
  min-width: 0;
  max-width: none;
  margin: 0;
  align-self: start;
  align-content: center;
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.settings-brand-logo-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}

.settings-brand-logo-meta-row span {
  color: var(--muted);
}

.settings-brand-logo-meta-row strong {
  color: var(--ink);
  font-weight: 700;
}

.settings-upload-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.settings-brand-logo-hint,
.settings-category-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-brand-logo-hint {
  grid-column: 1 / -1;
  grid-row: 2;
}

.settings-brand-logo-hint.is-error {
  color: var(--coral);
}

.settings-brand-logo-hint.is-success {
  color: #1d6f34;
}

.integrations-panel {
  min-height: 400px;
  display: grid;
  gap: 14px;
  align-content: start;
}

.integration-panel-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.integration-card {
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  padding: 14px;
  display: grid;
  gap: 14px;
}

.integration-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.integration-card-head-copy {
  display: grid;
  gap: 6px;
}

.integration-card-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.integration-card-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.integration-card-subtitle code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

.integration-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border-radius: 999px;
  padding: 6px 12px;
  background: rgba(89, 71, 132, 0.12);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.integration-state-badge.is-success {
  background: var(--green-soft);
  color: #1d6f34;
}

.integration-state-badge.is-error {
  background: var(--coral-soft);
  color: var(--coral);
}

.integration-meta {
  margin: 0;
  display: grid;
  gap: 8px;
}

.integration-meta-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.integration-meta dt {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.integration-meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.integration-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.integration-run-status {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.integration-run-status.is-error {
  color: var(--coral);
}

.integration-run-status.is-success {
  color: #1d6f34;
}

@media (max-width: 900px) {
  .integration-card-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .integration-meta-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* codex-brand-favorite-separate-block-20260520 */
.settings-brand-favorite-block {
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.settings-brand-favorite-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.settings-brand-favorite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

.settings-brand-favorite-row span {
  color: var(--muted);
}

.settings-brand-favorite-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.settings-brand-landing-block {
  grid-column: 1 / -1;
  grid-row: 3;
  border: 1px solid rgba(89, 71, 132, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.46);
  padding: 14px;
  display: grid;
  gap: 10px;
}

.settings-brand-landing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-brand-landing-header .settings-brand-favorite-title {
  margin: 0;
}

.settings-brand-landing-add {
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 8px;
  font-size: 28px;
  line-height: 1;
}

.settings-brand-landing-list {
  display: grid;
  gap: 10px;
}

.settings-brand-landing-row {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.settings-brand-landing-title {
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  cursor: text;
}

.settings-brand-landing-title:focus {
  outline: none;
  border: 0;
  box-shadow: none;
  background: transparent;
}

.settings-brand-landing-title::placeholder {
  color: var(--ink);
  opacity: 1;
}

.settings-brand-landing-row input[type="url"] {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(89, 71, 132, 0.2);
  border-radius: 8px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.3;
}

.settings-brand-landing-row input[type="url"]:focus {
  outline: none;
  border-color: rgba(9, 8, 17, 0.44);
  box-shadow: 0 0 0 2px rgba(9, 8, 17, 0.08);
}

.settings-brand-landing-remove {
  min-width: 90px;
}

@media (min-width: 1700px) {
  .settings-brand-panel {
    grid-template-columns: var(--settings-brand-logo-size) minmax(280px, 420px) minmax(200px, 240px);
  }

  .settings-brand-logo-hint {
    grid-row: 2;
  }

  .settings-brand-landing-block {
    grid-row: 3;
  }
}

@media (max-width: 1600px) {
  .settings-brand-panel {
    grid-template-columns: var(--settings-brand-logo-size) minmax(0, 1fr);
  }

  .settings-brand-logo-actions {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .settings-brand-logo-hint {
    grid-row: 3;
  }

  .settings-brand-landing-block {
    grid-row: 4;
  }
}

@media (max-width: 900px) {
  .settings-brand-logo-actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .settings-brand-panel {
    grid-template-columns: 1fr;
  }

  .settings-brand-logo-preview,
  .settings-brand-logo-meta,
  .settings-brand-logo-actions,
  .settings-brand-logo-hint,
  .settings-brand-favorite-block,
  .settings-brand-landing-block {
    grid-column: 1;
    grid-row: auto;
  }

  .settings-brand-logo-preview {
    width: min(176px, 100%);
    height: min(176px, calc(100vw - 88px));
  }

  .settings-brand-logo-meta {
    height: auto;
    min-height: var(--settings-brand-logo-size);
  }
}

.settings-values-list.is-category-tree .category-menu-group-toggle,
.settings-values-list.is-category-tree .category-menu-item,
.settings-values-list.is-category-tree .category-menu-count-action {
  cursor: pointer;
  pointer-events: auto;
}


.settings-values-list:not(.is-category-tree) .settings-value-item {
  cursor: pointer;
}

.settings-values-list:not(.is-category-tree) .settings-value-item:hover {
  background: rgba(255, 255, 255, 0.58);
}

.settings-values-list:not(.is-category-tree) .settings-value-item.active {
  border-left-color: var(--ink);
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.08);
}

/* codex-size-filter-green-20260520 */
.settings-values-list:not(.is-category-tree) .settings-value-item.has-size-filter {
  color: #15803d;
}

.settings-values-list:not(.is-category-tree) .settings-value-item.has-size-filter .category-menu-count {
  color: #15803d;
}

.category-menu-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 6px;
  padding: 8px 10px 8px 11px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.category-menu-item:hover {
  background: rgba(255, 255, 255, 0.58);
}

.category-menu-item.active {
  border-left-color: transparent;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.08);
}

.category-menu-item.is-child {
  padding-left: 28px;
}

.category-menu-item.is-branch {
  padding-left: 28px;
}

.category-menu-item.is-grandchild {
  min-height: 34px;
  padding-left: 44px;
}

.category-menu-item.is-fourth-level {
  min-height: 32px;
  padding-left: 60px;
}

.category-menu-nested {
  display: grid;
  gap: 1px;
}

.category-menu-nested.has-active > .category-menu-item.is-branch {
  background: rgba(255, 255, 255, 0.48);
}

.category-menu-grandchildren {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition:
    grid-template-rows 320ms cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: grid-template-rows, opacity, transform;
}

.category-menu-grandchildren.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.category-menu-grandchildren.is-opening {
  animation: category-menu-grandchildren-open 320ms cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.category-menu-grandchildren.is-closing {
  pointer-events: none;
  animation: category-menu-grandchildren-close 320ms cubic-bezier(0.45, 0, 0.55, 1) both;
}

.category-menu-grandchildren-inner {
  display: grid;
  gap: 1px;
  min-height: 0;
  overflow: hidden;
}

@keyframes category-menu-grandchildren-open {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes category-menu-grandchildren-close {
  from {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
  }

  to {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-menu-grandchildren {
    transition: none;
    transform: none;
  }

  .category-menu-grandchildren.is-opening,
  .category-menu-grandchildren.is-closing {
    animation: none;
  }
}

.category-menu-item.dragging {
  cursor: grabbing;
  opacity: 0.52;
}

.category-menu-group.drag-over > .category-menu-group-toggle {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.16);
}

.category-menu-item.parent-drag-over {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.16);
}

.category-menu-name {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.category-menu-name.is-editing,
.category-menu-group-name.is-editing {
  min-width: 0;
  margin: -2px -4px;
  border-radius: 5px;
  padding: 2px 4px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.22);
  cursor: text;
  outline: none;
  text-overflow: clip;
}

.category-menu-count {
  min-width: 28px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  text-align: right;
}

.category-menu-count-action {
  cursor: pointer;
}

.category-menu-count-action:hover,
.category-menu-count-action:focus-visible {
  color: var(--ink);
  outline: none;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.category-menu-item.settings-active,
.category-menu-group-toggle.settings-active {
  border-left-color: transparent;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 0 0 1px rgba(9, 8, 17, 0.08);
}

.category-menu-group {
  display: grid;
  gap: 2px;
}

.category-menu-group-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.category-menu-group-toggle:hover {
  background: rgba(255, 255, 255, 0.58);
}

.category-menu-root-add {
  position: absolute;
  top: 50%;
  left: -8px;
  z-index: 1;
  flex: none;
  display: inline-grid;
  width: 18px;
  height: 18px;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
  user-select: none;
}

.category-menu-root-add:hover,
.category-menu-root-add:focus-visible {
  color: var(--ink);
  outline: none;
}

.category-menu-group.has-active > .category-menu-group-toggle {
  color: var(--ink);
}

.category-menu-group-name {
  flex: 1;
  overflow: hidden;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* codex-settings-category-root-headings-white-20260620 */
.settings-modal .settings-values-list.is-category-tree .category-menu-group-toggle {
  color: #fff;
}

/* codex-desktop-catalog-category-menu-regular-plus-1px-20260526 */
@media (min-width: 901px) {
  .catalog-view .category-menu-name,
  .catalog-view .category-menu-count,
  #editorView .category-menu-name,
  #editorView .category-menu-count {
    font-size: 14px;
    font-weight: 400;
  }

  .catalog-view .category-menu-group-name,
  #editorView .category-menu-group-name {
    font-size: 15px;
    font-weight: 700;
  }

  .catalog-view .category-menu-group-toggle > .category-menu-count,
  #editorView .category-menu-group-toggle > .category-menu-count {
    display: none;
  }
}

.category-menu-children {
  display: grid;
  gap: 1px;
  padding-bottom: 4px;
}

.category-menu-empty {
  margin: 0;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
  font-size: 13px;
}

.catalog-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.catalog-panel > * {
  min-width: 0;
}

.catalog-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}

.catalog-hidden-controls {
  display: none;
}

.bulk-bar,
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.bulk-bar {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
}

.bulk-actions select {
  min-width: 150px;
}

.catalog-product-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-left: 132px;
}

.catalog-product-head > span {
  flex: 0 0 auto;
}

.table-delete-selected,
.table-process-first-photo {
  min-height: 32px;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.catalog-table-wrap {
  overflow: auto;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #f9f9f9;
}

.catalog-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  background: #fff;
}

.catalog-table th,
.catalog-table td {
  border-bottom: 1px solid #f9f9f9;
  padding: 12px;
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

.catalog-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.catalog-filter-head {
  width: 152px;
  min-width: 152px;
}

.catalog-filter-head--readiness {
  width: 172px;
  min-width: 172px;
}

.catalog-filter-head:not(.catalog-filter-head--readiness) .catalog-head-filter-button {
  margin-left: 10px;
}

.catalog-head-filter-button {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  min-width: 0;
}

.catalog-head-filter-button:hover,
.catalog-head-filter-button:focus-visible {
  color: #4c4862;
}

.catalog-head-filter-button:focus-visible {
  outline: 2px solid rgba(117, 66, 217, 0.24);
  outline-offset: 2px;
  border-radius: 4px;
}

.catalog-table tbody td {
  border-bottom-color: #f1f1f1;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* codex-catalog-table-row-bg-f9f9f9-20260526 */
.catalog-table tbody tr {
  background: #f9f9f9;
}

.catalog-table tr:last-child td {
  border-bottom: 0;
}

.catalog-table tr.clickable-row {
  cursor: pointer;
}

.catalog-table tr.clickable-row:hover {
  background: #faf9fd;
}

.catalog-table tr.clickable-row:focus-visible {
  outline: 3px solid rgba(45, 106, 79, 0.2);
  outline-offset: -3px;
}

.catalog-price-cell {
  white-space: nowrap;
}

.catalog-price-value,
.catalog-price-base,
.catalog-price-current {
  color: var(--ink);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  text-decoration: none;
}

.catalog-price-stack {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  line-height: 1.15;
}

.catalog-price-base {
  text-decoration-line: none;
  text-decoration-color: currentColor;
  text-decoration-thickness: auto;
  text-decoration-skip-ink: auto;
}

.catalog-price-current {
  text-decoration: none;
}

.catalog-select-cell {
  width: 72px;
  min-width: 72px;
  cursor: pointer;
}

.catalog-table thead th:first-child input {
  margin-left: 16px;
}

.catalog-select-hitbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 52px;
  margin: -10px 0;
  border-radius: 8px;
}

.catalog-select-hitbox:hover {
  background: rgba(9, 8, 17, 0.06);
}

.table-product {
  display: grid;
  grid-template-columns: 118px minmax(210px, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 78px;
}

.table-product strong,
.table-product span {
  display: block;
}

.table-product strong {
  max-width: 360px;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-product span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.table-product .product-variants-line {
  max-width: 360px;
  overflow: hidden;
  color: var(--accent);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-thumb {
  width: 118px;
  height: 76px;
  border-radius: 0;
  object-fit: contain;
  background: transparent;
}

.table-readiness {
  display: grid;
  min-width: 130px;
  --progress-track: rgba(117, 66, 217, 0.14);
  gap: 6px;
}

.table-readiness span {
  color: var(--ink);
  font-weight: 800;
}

.table-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.table-action {
  min-height: 34px;
  padding: 7px 11px;
}

.empty-cell {
  height: 140px;
  color: var(--muted);
  text-align: center !important;
}

.catalog-initial-load {
  width: min(460px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 10px;
  justify-items: stretch;
  color: var(--muted);
  text-align: left;
}

.catalog-initial-load strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

.catalog-initial-load span {
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}

.catalog-initial-load progress {
  height: 8px;
}

.catalog-initial-load--error {
  justify-items: center;
}

.catalog-initial-load--error span {
  max-width: 360px;
}

.catalog-initial-load--error .button {
  min-height: 32px;
  padding: 7px 14px;
}

.pagination {
  justify-content: flex-end;
  color: var(--muted);
  font-size: 13px;
}

/* codex-catalog-infinite-load-20260609 */
.catalog-load-more {
  min-height: 48px;
  padding: 0 0 6px;
}

.catalog-load-more #catalogPageInfo {
  font-weight: 600;
}

.catalog-load-more #catalogNext {
  min-width: 150px;
}

.catalog-load-more #catalogNext:disabled {
  cursor: default;
  opacity: 0.45;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 12px;
  min-height: calc(100vh - 124px);
  padding: 0 24px;
}

.product-sidebar {
  border-right: 0;
  padding: 18px 0;
}

.product-sidebar-categories {
  padding: 22px 0 18px;
}

.editor-catalog-title {
  display: grid;
  align-content: end;
  min-height: 84.390625px;
  margin-bottom: 12px;
  padding-bottom: 2px;
}

.editor-catalog-title.content-layer-title {
  align-content: start;
}

.editor-category-menu {
  top: 112px;
  padding: 16px;
}

.editor-category-menu .category-menu-list {
  max-height: calc(100vh - 192px);
}

.toolbar {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
}

.field-stack {
  display: grid;
  gap: 7px;
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.field-label-row > span {
  min-width: 0;
}

.field-action-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
}

.description-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.description-format-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(88, 66, 139, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.52);
}

.description-format-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
}

.description-format-button:hover,
.description-format-button:focus-visible {
  background: rgba(9, 8, 17, 0.08);
  outline: none;
}

.description-format-button:disabled {
  color: rgba(112, 106, 135, 0.62);
  cursor: not-allowed;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid rgba(88, 66, 139, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  padding: 11px 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  accent-color: var(--ink);
}

textarea {
  resize: vertical;
  line-height: 1.45;
}

#description {
  min-height: 390px;
  overflow-y: hidden;
  resize: vertical;
  line-height: 1.4;
}

#gptPromptInstructions {
  min-height: 156px;
}

#gptPromptTask {
  min-height: 210px;
  font-family: inherit;
}

.gpt-prompt-grid {
  align-items: start;
}

.gpt-prompt-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gpt-prompt-status {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.description-mode-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid rgba(88, 66, 139, 0.13);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
}

.description-mode-tab {
  min-height: 30px;
  border: 0;
  border-radius: 6px;
  padding: 6px 10px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
}

.description-mode-tab.active {
  background: #090811;
  color: #fff;
}

.description-editor-panels {
  min-width: 0;
}

.description-editor-panel {
  min-width: 0;
}

.description-preview {
  min-height: 390px;
  border: 1px solid rgba(88, 66, 139, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  padding: 18px 20px;
  box-shadow: none;
  cursor: text;
  font-size: 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.description-preview.is-empty {
  color: var(--muted);
}

.description-preview[contenteditable="true"].is-empty::before {
  content: attr(data-placeholder);
  pointer-events: none;
}

.description-preview:focus {
  border-color: rgba(9, 8, 17, 0.42);
  outline: none;
}

.description-preview > :first-child {
  margin-top: 0;
}

.description-preview > :last-child {
  margin-bottom: 0;
}

.description-preview p,
.description-preview ul,
.description-preview ol {
  margin: 0 0 14px;
}

.description-preview ul,
.description-preview ol {
  padding-left: 22px;
}

.description-preview li + li {
  margin-top: 6px;
}

.description-preview h2,
.description-preview h3,
.description-preview h4 {
  margin: 20px 0 10px;
  color: var(--ink);
  line-height: 1.18;
}

.description-preview a {
  color: #3f2f8f;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(9, 8, 17, 0.42);
  box-shadow: 0 0 0 3px rgba(9, 8, 17, 0.08);
}

input:disabled {
  color: #4d5450;
  background: rgba(255, 255, 255, 0.38);
}

.product-list {
  display: grid;
  gap: 10px;
}

.product-item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.52);
  text-align: left;
}

.product-item.active {
  border-color: rgba(9, 8, 17, 0.24);
  box-shadow: var(--shadow);
}

.product-thumb {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  background: linear-gradient(135deg, rgba(246, 245, 253, 0.95), rgba(218, 211, 240, 0.7));
}

.photo-thumb {
  display: block;
  aspect-ratio: 3 / 2;
  width: calc(100% + 20px);
  max-width: none;
  margin: -10px -10px 0;
  border-radius: 8px;
  box-sizing: border-box;
  padding: 0;
  object-fit: contain;
  object-position: center;
  background: rgba(255, 255, 255, 0.92);
}

.product-meta {
  min-width: 0;
}

.product-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-subline {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
}

.status-dot.ready,
.status-dot.published {
  background: var(--green-dark);
}

.status-dot.review {
  background: var(--amber);
}

.status-dot.error {
  background: var(--coral);
}

.editor-area {
  padding: 22px 0 24px;
  min-width: 0;
}

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

.editor-header > div:first-child {
  min-width: 0;
}

.editor-source-updated {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
}

.editor-back-button {
  white-space: nowrap;
}

.status-pill,
.owner-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.status-pill.ready,
.status-pill.published {
  background: var(--green-soft);
  color: var(--green-dark);
}

.status-pill.status-pill-link {
  cursor: pointer;
  text-decoration: none;
}

.status-pill.status-pill-link:hover {
  box-shadow: inset 0 0 0 1px rgba(117, 140, 57, 0.24);
}

.status-pill.status-pill-link:focus-visible {
  outline: 2px solid rgba(117, 140, 57, 0.38);
  outline-offset: 2px;
}

.status-pill.review {
  background: var(--amber-soft);
  color: var(--amber);
}

.status-pill.error {
  background: var(--coral-soft);
  color: var(--coral);
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.65fr);
  gap: 12px;
  align-items: start;
}

.editor-grid.category-settings-mode {
  grid-template-columns: minmax(0, 1fr);
}

.editor-main-stack {
  grid-column: 1;
  display: grid;
  min-width: 0;
  gap: 12px;
}

.category-settings-panel {
  grid-column: 1;
}

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

#categorySettingsDescription {
  min-height: 260px;
}

.panel {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.56);
  box-shadow: var(--shadow);
  padding: 18px;
  backdrop-filter: blur(18px);
}

.product-overview-panel {
  display: grid;
  gap: 28px;
}

.product-overview-panel .accounting-heading {
  margin-bottom: 0;
}

@media (min-width: 901px) {
  .product-overview-panel .accounting-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-flag-spec-table {
    margin-bottom: 0;
  }

  .product-flag-spec-row {
    align-items: center;
  }

  .product-flag-spec-value {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
  }

  .product-flag-switch {
    display: inline-flex;
    min-height: 20px;
    align-items: center;
    gap: 0;
    color: #090811;
    cursor: pointer;
    line-height: 1;
    user-select: none;
  }

  .product-flag-switch-control {
    position: relative;
    display: inline-flex;
    width: 37px;
    height: 20px;
    flex: 0 0 auto;
  }

  .product-flag-switch-control input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .product-flag-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(9, 8, 17, 0.1);
    border-radius: 999px;
    background: #f1f1f1;
    box-shadow: inset 0 1px 2px rgba(9, 8, 17, 0.08);
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  }

  .product-flag-switch-thumb {
    position: absolute;
    top: 1px;
    left: 2px;
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(9, 8, 17, 0.18);
    transition: transform 0.18s ease;
  }

  .product-flag-switch-control input:checked + .product-flag-switch-track {
    border-color: #2f3036;
    background: #2f3036;
  }

  .product-flag-switch-control input:checked + .product-flag-switch-track .product-flag-switch-thumb {
    transform: translateX(16px);
  }

  .product-flag-switch-control input:focus-visible + .product-flag-switch-track {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 3px;
  }

  .product-flag-switch-control input:disabled {
    cursor: not-allowed;
  }

  .product-flag-switch-control input:disabled + .product-flag-switch-track {
    opacity: 0.52;
  }
}

.product-overview-sizes {
  display: grid;
  min-width: 0;
  gap: 14px;
}

.variant-summary-panel.product-overview-sizes {
  align-items: stretch;
  border: 0;
  gap: 0;
  overflow: hidden;
  padding: 0;
}

.variant-summary-panel.product-overview-sizes .variant-table {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.variant-summary-panel.product-overview-sizes .variant-row {
  padding-inline: 18px;
}

.variant-summary-panel,
.geometry-panel,
.spec-summary-panel,
.spec-details-panel,
.content-panel,
.media-panel,
.competitor-price-panel {
  grid-column: 1;
}

.spec-summary-panel {
  position: relative;
  z-index: 2;
}

.spec-summary-panel:has(.primary-color-picker.is-open) {
  z-index: 90;
}

.competitor-price-panel {
  min-height: 82px;
}

.competitor-price-panel .panel-title {
  margin-bottom: 0;
}

.validation-stack {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 112px;
  display: grid;
  gap: 12px;
  align-self: start;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

@media (max-width: 900px) {
  .panel-title.mail-panel-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .panel-title.mail-panel-title .mail-panel-actions {
    width: 100%;
    justify-self: stretch;
  }
}

.spec-details-category {
  display: none;
}

@media (min-width: 921px) {
  .spec-details-category:not([hidden]) {
    display: block;
    flex: 0 0 auto;
    width: max-content;
    max-width: min(44vw, 520px);
    margin-left: auto;
    overflow: hidden;
    color: #090811;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.settings-kanban-column-delete {
  appearance: none;
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #090811;
  cursor: pointer;
  transition: color 0.16s ease, opacity 0.16s ease, transform 0.16s ease;
}

.settings-kanban-column-delete[hidden] {
  display: none;
}

.settings-kanban-column-delete:hover,
.settings-kanban-column-delete:focus-visible {
  background: transparent;
  color: #2a2734;
  outline: none;
}

.settings-kanban-column-delete:focus-visible {
  box-shadow: none;
}

.settings-kanban-column-delete:active {
  transform: translateY(1px);
}

.settings-kanban-column-delete:disabled {
  cursor: not-allowed;
  opacity: 0.34;
  transform: none;
}

.settings-kanban-column-delete svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.owner-content {
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
}

.owner-check {
  background: var(--green-soft);
  color: var(--green-dark);
}

.spec-gpt-button {
  flex: 0 0 auto;
  max-width: 100%;
}

.content-tabs-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.content-left-controls {
  display: flex;
  align-items: center;
  flex: 1 1 430px;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.content-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border: 1px solid rgba(88, 66, 139, 0.13);
  border-radius: 8px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.42);
}

.content-tab,
.content-tabs .description-mode-tab {
  min-height: 34px;
  border: 0;
  border-radius: 6px;
  padding: 7px 11px;
  background: transparent;
  color: var(--muted);
  font-size: inherit;
  font-weight: 800;
  line-height: 1.2;
}

.content-tab.active,
.content-tabs .description-mode-tab.active {
  background: #090811;
  color: #fff;
}

.content-tab-panel {
  min-width: 0;
}

.content-description-actions {
  flex: 0 1 auto;
  margin-left: auto;
}

.content-feature-block {
  display: grid;
  gap: 8px;
}

.geometry-panel {
  display: grid;
  gap: 14px;
  border-color: rgba(255, 255, 255, 0.62);
  background: #fff;
  color: var(--ink);
}

.geometry-panel .panel-title {
  margin-bottom: 0;
}

.geometry-panel .panel-title h3 {
  color: var(--ink);
}

.geometry-refresh-button {
  min-height: auto;
  padding: 4px 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.geometry-refresh-button:hover {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink);
  transform: none;
}

.geometry-status {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.geometry-status a {
  color: var(--ink);
  text-decoration-color: rgba(9, 8, 17, 0.42);
}

.geometry-content {
  display: grid;
  gap: 12px;
}

.geometry-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(88, 66, 139, 0.24);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
}

.geometry-head {
  display: flex;
  justify-content: flex-end;
}

.geometry-source {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.geometry-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.geometry-size-picker {
  min-width: 160px;
  border-color: rgba(88, 66, 139, 0.18);
  background: #fff;
  color: var(--ink);
}

.geometry-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.95fr) minmax(0, 1.05fr);
  gap: 12px;
  align-items: stretch;
}

.geometry-visual {
  min-width: 0;
  min-height: 100%;
  border: 1px solid rgba(88, 66, 139, 0.14);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.geometry-diagram {
  min-width: 0;
  aspect-ratio: 1280 / 789;
  background: #fff;
}

.geometry-diagram svg,
.geometry-diagram img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.geometry-table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid rgba(88, 66, 139, 0.14);
  border-radius: 8px;
  background: #fff;
}

.geometry-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.geometry-table td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(88, 66, 139, 0.12);
}

.geometry-table tr:last-child td {
  border-bottom: 0;
}

.geometry-table td:first-child {
  color: var(--muted);
}

.geometry-table td:last-child {
  text-align: right;
  color: var(--ink);
  font-weight: 800;
  white-space: nowrap;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

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

.description-field-stack {
  gap: 10px;
}

.description-editor-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.description-editor-head > span {
  min-width: 0;
}

.variant-panel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid rgba(88, 66, 139, 0.14);
  padding-top: 12px;
}

.variant-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.variant-panel-head h4 {
  margin: 0;
  font-size: 14px;
}

.variant-panel-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.variant-table {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-self: stretch;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(88, 66, 139, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.38);
}

.variant-row {
  display: grid;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns:
    minmax(50px, 0.42fr)
    minmax(112px, 1fr)
    minmax(112px, 0.86fr)
    minmax(112px, 0.86fr)
    minmax(82px, 0.62fr)
    minmax(42px, 0.36fr)
    minmax(50px, 0.4fr)
    minmax(42px, 0.36fr)
    minmax(48px, 0.38fr)
    minmax(42px, 0.36fr)
    minmax(58px, 0.46fr)
    minmax(52px, 0.4fr);
  gap: 8px;
  align-items: center;
  border-top: 1px solid rgba(88, 66, 139, 0.12);
  background: transparent;
  padding: 8px 10px;
  font-size: 12px;
}

.variant-row:first-child {
  border-top: 0;
}

.variant-row span,
.variant-row b {
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
}

.variant-row strong,
.variant-row em,
.variant-row .variant-onec-id,
.variant-row .variant-barcode,
.variant-row .variant-base-price,
.variant-row .variant-warehouse-stock {
  min-width: 0;
  overflow-wrap: anywhere;
  font-style: normal;
}

.variant-row strong {
  color: var(--muted);
  font-weight: 700;
}

.variant-sku-cell {
  min-width: 0;
}

.variant-sku-button {
  appearance: none;
  display: inline;
  max-width: 100%;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  letter-spacing: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: rgba(117, 66, 217, 0.36);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.variant-sku-button:hover,
.variant-sku-button:focus-visible {
  color: #7542d9;
  text-decoration-color: currentColor;
}

.variant-sku-button:focus-visible {
  outline: 2px solid rgba(117, 66, 217, 0.32);
  outline-offset: 3px;
}

.variant-row .variant-onec-id {
  color: var(--muted);
  font-weight: 700;
}

.variant-row .variant-barcode {
  color: var(--muted);
  font-weight: 700;
}

.variant-row .variant-base-price {
  color: var(--muted);
  font-weight: 700;
}

.variant-row .variant-warehouse-stock {
  color: var(--muted);
  font-weight: 700;
}

.variant-row-head {
  background: rgba(24, 28, 35, 0.06);
  border-color: rgba(24, 28, 35, 0.08);
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0;
  padding-bottom: 16px;
  text-transform: uppercase;
}

.variant-row-head + .variant-row {
  padding-top: 16px;
}

.variant-row-head strong,
.variant-row-head em,
.variant-row-head .variant-onec-id,
.variant-row-head .variant-barcode,
.variant-row-head .variant-base-price,
.variant-row-head .variant-warehouse-stock,
.variant-row-head b {
  color: var(--muted);
}

@media (min-width: 901px) {
  .variant-row {
    gap: 6px;
    padding-inline: 8px;
  }

  .variant-row strong,
  .variant-row .variant-barcode {
    font-size: 11px;
    line-height: 1.15;
  }

  /* codex-variant-table-plain-text-labels-20260609 */
  .variant-panel,
  .variant-panel-head h4,
  .variant-panel-head span,
  .variant-table,
  .variant-row,
  .variant-row span,
  .variant-row strong,
  .variant-row em,
  .variant-row b,
  .variant-row .variant-onec-id,
  .variant-row .variant-barcode,
  .variant-row .variant-base-price,
  .variant-row .variant-warehouse-stock,
  .variant-row-head,
  .variant-row-head strong,
  .variant-row-head em,
  .variant-row-head .variant-onec-id,
  .variant-row-head .variant-barcode,
  .variant-row-head .variant-base-price,
  .variant-row-head .variant-warehouse-stock,
  .variant-row-head b,
  .product-overview-sizes .button {
    color: #222;
    font-weight: 400;
  }

  /* codex-variant-stock-values-center-no-unit-20260609 */
  .variant-row .variant-warehouse-stock,
  .variant-row > b {
    justify-self: stretch;
    text-align: center;
  }

  /* codex-desktop-variant-id-barcode-in-article-modal-20260610 */
  .variant-row .variant-onec-id,
  .variant-row .variant-barcode {
    display: none;
  }
}

.variant-summary-panel.product-overview-sizes .variant-row-head {
  min-height: 50.4px;
  align-items: center;
  border: 0;
  background: #f9f9f9;
  color: #222;
  padding-block: 0;
}

.variant-summary-panel.product-overview-sizes .variant-row-head span,
.variant-summary-panel.product-overview-sizes .variant-row-head strong,
.variant-summary-panel.product-overview-sizes .variant-row-head em,
.variant-summary-panel.product-overview-sizes .variant-row-head .variant-onec-id,
.variant-summary-panel.product-overview-sizes .variant-row-head .variant-barcode,
.variant-summary-panel.product-overview-sizes .variant-row-head .variant-base-price,
.variant-summary-panel.product-overview-sizes .variant-row-head .variant-warehouse-stock,
.variant-summary-panel.product-overview-sizes .variant-row-head b {
  color: #222;
  line-height: 1.1;
}

.variant-show-all-sizes {
  display: flex;
  justify-content: center;
  border-top: 1px solid rgba(88, 66, 139, 0.12);
  padding: 13px 18px 15px;
}

.variant-show-all-sizes-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: #222;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  padding: 0;
  text-align: center;
}

.variant-show-all-sizes-button:hover,
.variant-show-all-sizes-button:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.variant-show-all-sizes-button:focus-visible {
  outline: 2px solid rgba(117, 66, 217, 0.32);
  outline-offset: 4px;
}

.variant-empty {
  color: var(--muted);
  font-size: 13px;
}

.variant-id-modal {
  width: min(430px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
}

.variant-id-modal::backdrop {
  background: rgba(0, 0, 0, 0.38);
}

.variant-id-modal-card {
  overflow: hidden;
  border: 1px solid rgba(24, 28, 35, 0.14);
  border-radius: 8px;
  background: #fff;
}

.variant-id-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid rgba(24, 28, 35, 0.1);
  padding: 20px 22px 16px;
}

.variant-id-modal-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
}

.variant-id-modal-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.variant-id-modal-close {
  appearance: none;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(24, 28, 35, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.variant-id-modal-close:hover,
.variant-id-modal-close:focus-visible {
  border-color: rgba(117, 66, 217, 0.38);
  color: #7542d9;
}

.variant-id-modal-close:focus-visible {
  outline: 2px solid rgba(117, 66, 217, 0.22);
  outline-offset: 2px;
}

.variant-id-modal-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.variant-id-modal-list > div {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  border-top: 1px solid rgba(24, 28, 35, 0.08);
  padding: 16px 22px;
}

.variant-id-modal-list > div:first-child {
  border-top: 0;
}

.variant-id-modal-list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.variant-id-modal-list dd {
  margin: 0;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.spec-table {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.spec-table-primary,
.spec-table-details,
.spec-table-content {
  gap: 0;
  margin-top: 0;
}

.spec-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(88, 66, 139, 0.13);
  padding: 8px 0;
  color: var(--muted);
  font-size: 13px;
}

.spec-subheading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  min-height: 0;
  margin: 8px 0 0;
  padding: 2px 0 2px;
  color: #080816;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.spec-table-details .spec-subheading:not(:first-child) {
  margin-top: 28px;
}

.spec-details-empty {
  border-top: 1px solid rgba(88, 66, 139, 0.13);
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
}

@media (max-width: 1360px) {
  .spec-subheading {
    min-height: 0;
    font-size: 14px;
  }
}

@media (max-width: 920px) {
  .spec-subheading {
    min-height: 0;
    font-size: 14px;
  }
}

.spec-row strong {
  color: var(--ink);
  font-weight: 700;
}

.spec-value-editable,
.spec-value-static {
  min-width: 0;
  overflow-wrap: anywhere;
}

.spec-value-editable {
  margin: -2px -4px;
  padding: 2px 4px;
  border-radius: 6px;
  cursor: text;
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.spec-value-editable.is-empty {
  display: block;
  width: min(100%, 520px);
  min-height: 28px;
  background: rgba(9, 8, 17, 0.035);
  box-shadow: inset 0 0 0 1px rgba(88, 66, 139, 0.13);
}

.spec-value-editable:hover,
.spec-value-editable:focus-visible {
  background: rgba(9, 8, 17, 0.05);
  box-shadow: 0 0 0 2px rgba(9, 8, 17, 0.08);
  outline: none;
}

.spec-value-input {
  min-height: 34px;
  padding: 5px 8px;
  border-radius: 6px;
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  resize: none;
  overflow: hidden;
}

.spec-value-select {
  width: fit-content;
  min-width: 180px;
  max-width: 100%;
  min-height: 0;
  margin: -2px -4px;
  padding: 2px 26px 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.spec-value-select:focus-visible {
  outline: 2px solid rgba(9, 8, 17, 0.14);
  outline-offset: 1px;
}

.spec-row-color-picker {
  align-items: center;
  overflow: visible;
}

.primary-color-picker {
  position: relative;
  display: inline-flex;
  width: min(100%, 370px);
  min-width: 0;
  align-items: stretch;
}

.primary-color-picker.is-open {
  z-index: 91;
}

.primary-color-dropdown-button {
  display: inline-flex;
  width: 100%;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  padding: 2px 30px 2px 0;
  text-align: left;
  transition: color 0.16s ease, opacity 0.16s ease;
}

.primary-color-dropdown-button:hover,
.primary-color-dropdown-button:focus-visible,
.primary-color-picker.is-open .primary-color-dropdown-button {
  background: transparent;
  box-shadow: none;
  outline: none;
}

.primary-color-dropdown-button:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.primary-color-selected-swatches {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 18px;
}

.primary-color-selected-swatches .primary-color-swatch {
  margin-left: -5px;
}

.primary-color-selected-swatches .primary-color-swatch:first-child {
  margin-left: 0;
}

.primary-color-dropdown-label {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-color-dropdown-arrow {
  position: absolute;
  right: 13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.58;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.16s ease;
}

.primary-color-picker.is-open .primary-color-dropdown-arrow {
  transform: translateY(2px) rotate(225deg);
}

.primary-color-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 92;
  width: min(340px, calc(100vw - 48px));
  border: 1px solid rgba(88, 66, 139, 0.16);
  border-radius: 8px;
  background: rgba(252, 251, 255, 0.98);
  box-shadow: 0 18px 42px rgba(30, 24, 56, 0.18);
  padding: 8px;
}

.primary-color-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px;
}

.primary-color-option,
.primary-color-clear {
  min-height: 32px;
  border-radius: 8px;
  font: inherit;
  font-size: 12px;
  line-height: 1;
}

.primary-color-option {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(88, 66, 139, 0.14);
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
  padding: 6px 8px 6px 7px;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.primary-color-option:hover,
.primary-color-option:focus-visible {
  border-color: rgba(9, 8, 17, 0.28);
  background: rgba(255, 255, 255, 0.94);
  outline: none;
}

.primary-color-option.is-selected {
  border-color: rgba(132, 241, 32, 0.78);
  background: rgba(240, 255, 214, 0.9);
  box-shadow: 0 0 0 2px rgba(132, 241, 32, 0.18);
}

.primary-color-swatch {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 1px solid rgba(9, 8, 17, 0.2);
  border-radius: 999px;
  background: var(--chip-color);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.primary-color-option span:nth-child(2) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.primary-color-option-mark {
  width: 7px;
  height: 7px;
  margin-left: auto;
  flex: 0 0 7px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
}

.primary-color-option.is-selected .primary-color-option-mark {
  opacity: 0.76;
}

.primary-color-clear {
  margin-top: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 5px 8px;
  font-weight: 600;
  cursor: pointer;
}

.primary-color-clear:hover,
.primary-color-clear:focus-visible {
  border-color: rgba(88, 66, 139, 0.14);
  background: rgba(255, 255, 255, 0.74);
  color: var(--ink);
  outline: none;
}

@media (max-width: 640px) {
  .primary-color-picker,
  .primary-color-dropdown {
    width: 100%;
  }

  .primary-color-options {
    grid-template-columns: 1fr;
  }
}

.spec-table-primary .spec-row:first-child,
.spec-table-details .spec-row:first-child,
.spec-table-content .spec-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.spec-summary-panel .product-flag-spec-table .spec-row:first-child,
.spec-summary-panel .product-flag-spec-table + .spec-table-primary .spec-row:first-child {
  border-top: 1px solid rgba(88, 66, 139, 0.13);
  padding-top: 8px;
}

.media-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.9fr);
  gap: 14px;
  align-items: stretch;
}

.upload-zone {
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(9, 8, 17, 0.28);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.48);
  color: var(--ink);
  text-align: center;
  padding: 16px;
}

.upload-zone input {
  display: none;
}

.upload-zone.dragging {
  background: rgba(255, 255, 255, 0.72);
}

.optimizer-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.optimizer-controls .quality-control {
  grid-column: 1 / -1;
}

.optimizer-controls label {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.optimizer-controls strong {
  justify-self: end;
  min-width: 48px;
  color: var(--ink);
  text-align: right;
}

.optimizer-controls input,
.optimizer-controls select {
  grid-column: 1 / -1;
}

.optimizer-controls .quality-control {
  grid-template-columns: max-content minmax(120px, 1fr) auto;
  gap: 12px;
}

.optimizer-controls .quality-control span {
  grid-column: 1;
  white-space: nowrap;
}

.optimizer-controls .quality-control input {
  grid-column: 2;
  grid-row: 1;
}

.optimizer-controls .quality-control strong {
  grid-column: 3;
  grid-row: 1;
}

.media-panel .panel-title .optimize-all-button {
  flex: 0 0 auto;
  width: fit-content;
  min-width: 0;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
}

.media-panel .panel-title .optimize-all-button:hover {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.photo-card {
  position: relative;
  border: 1px solid rgba(88, 66, 139, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  padding: 10px;
  cursor: grab;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 140ms ease,
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.photo-grid.drag-sorting {
  user-select: none;
}

.photo-grid.drag-sorting .photo-card {
  will-change: transform;
}

.photo-card:active {
  cursor: grabbing;
}

.photo-card.dragging {
  opacity: 1;
  transform: none;
  box-shadow: 0 10px 20px rgba(17, 24, 39, 0.1);
  z-index: 2;
}

.photo-card.drop-before,
.photo-card.drop-after {
  border-color: var(--ink);
  background: rgba(255, 255, 255, 0.75);
}

.photo-card.drop-before::before,
.photo-card.drop-after::before {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 4px;
  border-radius: 999px;
  background: var(--ink);
}

.photo-card.drop-before::before {
  top: -8px;
}

.photo-card.drop-after::before {
  bottom: -8px;
}

.photo-card input {
  margin-top: 8px;
  cursor: text;
}

.photo-card input[data-photo-alt] {
  min-height: 24px;
  padding: 0;
  border-color: transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
}

.photo-card input[data-photo-alt]:focus {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.photo-stats {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  min-height: 42px;
  padding-right: 48px;
  color: var(--muted);
  font-size: 12px;
}

.photo-actions {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
  z-index: 1;
}

.photo-actions-left,
.photo-actions-right {
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.photo-actions-left {
  margin-right: auto;
}

.icon-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(88, 66, 139, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--ink);
}

.photo-actions .icon-button {
  border-color: rgba(88, 66, 139, 0.12);
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
  color: rgba(9, 8, 17, 0.72);
  opacity: 0.78;
  pointer-events: auto;
  backdrop-filter: blur(6px);
}

.photo-actions .icon-button:hover,
.photo-actions .icon-button:focus-visible {
  background: rgba(255, 255, 255, 0.74);
  color: rgba(9, 8, 17, 0.88);
  opacity: 1;
}

.photo-optimize-button {
  position: absolute;
  right: 12px;
  bottom: 12px;
  border-color: rgba(88, 66, 139, 0.12);
  background: rgba(255, 255, 255, 0.54);
  color: rgba(9, 8, 17, 0.72);
  opacity: 0.82;
  backdrop-filter: blur(6px);
}

.photo-optimize-button:hover,
.photo-optimize-button:focus-visible {
  background: rgba(255, 255, 255, 0.78);
  color: rgba(9, 8, 17, 0.9);
  opacity: 1;
}

.photo-card--optimizing .photo-optimize-button {
  opacity: 0.5;
}

.icon-button svg {
  width: 17px;
  height: 17px;
  stroke-width: 2;
}

.photo-copy-button {
  color: var(--ink);
}

.photo-download-original-button {
  color: var(--ink);
  text-decoration: none;
}

/* codex-photo-lightbox-modal-desktop-20260524 */
@media (min-width: 901px) {
  body.photo-lightbox-open {
    overflow: hidden;
  }

  .photo-thumb {
    cursor: zoom-in;
  }

  .photo-lightbox {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: grid;
    place-items: center;
    padding: 40px;
    background: rgba(9, 8, 17, 0.78);
  }

  .photo-lightbox-stage {
    position: relative;
    display: grid;
    place-items: center;
    max-width: 96vw;
    max-height: 92vh;
  }

  .photo-lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    object-fit: contain;
  }

  .photo-lightbox-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 999px;
    outline: 0;
    background: rgba(0, 0, 0, 0.46);
    box-shadow: none;
    color: transparent;
    font-size: 0;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .photo-lightbox-close::before,
  .photo-lightbox-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 4px;
    border-radius: 999px;
    background: rgba(229, 231, 235, 0.74);
    transform-origin: center;
  }

  .photo-lightbox-close::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .photo-lightbox-close::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .photo-lightbox-close:hover,
  .photo-lightbox-close:focus-visible {
    background: rgba(0, 0, 0, 0.62);
    outline: 0;
    box-shadow: none;
  }

  .photo-lightbox-close:hover::before,
  .photo-lightbox-close:hover::after,
  .photo-lightbox-close:focus-visible::before,
  .photo-lightbox-close:focus-visible::after {
    background: rgba(243, 244, 246, 0.86);
  }
}

.readiness-score {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.readiness-score span {
  display: block;
  font-size: 42px;
  font-weight: 760;
  line-height: 1;
}

.readiness-score p {
  margin-bottom: 0;
  color: var(--muted);
}

progress {
  width: 100%;
  height: 10px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--progress-track);
  accent-color: var(--purple);
  box-shadow: inset 0 0 0 1px rgba(117, 66, 217, 0.08);
}

progress::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--progress-track);
}

progress::-webkit-progress-value {
  border-radius: inherit;
  background: var(--progress-fill);
}

progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--progress-fill);
}

.check-list {
  display: grid;
  gap: 9px;
  margin-bottom: 16px;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}

.check-item::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-top: 1px;
  border: 1px solid rgba(88, 66, 139, 0.18);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.62);
}

.check-item.ok {
  color: var(--ink);
}

.check-item.ok::before {
  border-color: var(--green);
  background: var(--green);
}

.danger-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.event-log {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.event-log:empty {
  display: none;
}

.event-log-detached {
  margin-top: 2px;
  padding: 2px 4px 0;
}

.event-log p {
  margin-bottom: 0;
  border-left: 3px solid rgba(9, 8, 17, 0.14);
  padding-left: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.accounting-panel {
  background: rgba(255, 255, 255, 0.62);
}

.accounting-heading {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.accounting-heading .editor-source-updated {
  margin: 0;
}

.accounting-heading h2 {
  overflow-wrap: anywhere;
  font-size: 32px;
  line-height: 1.08;
}

/* codex-product-archive-title-badge-20260526 */
.accounting-heading h2 .product-title-line {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.accounting-heading h2 .product-title-main,
.accounting-heading h2 .product-title-meta {
  display: block;
  overflow-wrap: anywhere;
}

.accounting-heading h2 .product-title-line .product-title-main {
  min-width: 0;
}

.accounting-heading h2 .product-title-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.14em;
}

.accounting-heading h2 .product-title-link:hover,
.accounting-heading h2 .product-title-link:focus-visible {
  text-decoration: underline;
}

.accounting-heading h2 .product-site-link-button {
  display: none;
}

@media (min-width: 901px) {
  .accounting-heading h2 .product-site-link-button {
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border-radius: 8px;
    background: #fff;
    color: #090811;
    text-decoration: none;
    transition: background 0.16s ease, color 0.16s ease;
  }

  .accounting-heading h2 .product-site-link-button:hover,
  .accounting-heading h2 .product-site-link-button:focus-visible {
    background: #090811;
    color: #fff;
    outline: none;
  }

  .accounting-heading h2 .product-site-link-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(184, 250, 24, 0.7);
  }

  .accounting-heading h2 .product-site-link-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
}

.accounting-heading h2 .product-title-meta {
  margin-top: 2px;
}

.product-title-archive-badge {
  display: inline-flex;
  min-height: 28px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #090811;
  color: #fff;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.validation-panel {
  border-color: rgba(255, 255, 255, 0.2);
  background:
    linear-gradient(135deg, rgba(111, 58, 214, 0.96), rgba(93, 45, 199, 0.98)),
    var(--purple);
  color: #fff;
  padding-bottom: 32px;
  box-shadow: 0 22px 54px rgba(65, 32, 151, 0.32);
}

.validation-panel .panel-title h3,
.validation-panel .readiness-score span,
.validation-panel .readiness-score p,
.validation-panel .check-item,
.validation-panel .check-item.ok,
.validation-panel .event-log p {
  color: #fff;
}

.validation-panel .owner-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.validation-panel progress,
.validation-panel progress::-webkit-progress-bar {
  background: rgba(255, 255, 255, 0.2);
}

.validation-panel progress::-webkit-progress-value {
  background: var(--green);
}

.validation-panel .check-item::before {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
}

.validation-panel .check-item.ok::before {
  border-color: var(--green);
  background: var(--green);
}

.validation-panel .button-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: var(--purple-dark);
}

.validation-panel .publish-actions {
  margin-top: 18px;
}

.validation-panel .button-primary {
  border-color: rgba(184, 250, 24, 0.42);
  background: var(--green);
  color: #142000;
}

.validation-panel .publish-all-data-toggle {
  display: inline-grid;
  margin-top: 16px;
  grid-template-columns: minmax(0, auto) 42px;
  gap: 12px;
  align-items: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

.validation-panel .publish-all-data-toggle-label {
  min-width: 0;
}

.validation-panel .publish-all-data-toggle-control {
  position: relative;
  display: inline-flex;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}

.validation-panel .publish-all-data-toggle-control input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.validation-panel .publish-all-data-toggle-track {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.14);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.validation-panel .publish-all-data-toggle-track::before {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  content: "";
  transition: transform 0.18s ease;
}

.validation-panel .publish-all-data-toggle-control input:checked + .publish-all-data-toggle-track {
  background: var(--green);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.36);
}

.validation-panel .publish-all-data-toggle-control input:checked + .publish-all-data-toggle-track::before {
  transform: translateX(18px);
}

.validation-panel .publish-all-data-toggle-control input:focus-visible + .publish-all-data-toggle-track {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.28);
}

@media (min-width: 768px) {
  .validation-panel .publish-actions {
    justify-content: center;
  }

  .validation-panel #publishProduct {
    width: min(100%, 292px);
    border-radius: 999px;
  }

  .validation-panel .publish-all-data-toggle {
    display: grid;
    width: min(100%, 292px);
    margin-inline: auto;
  }
}

@media (max-width: 1740px) and (min-width: 1101px) {
  .topbar {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .topbar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: calc(100% - 316px);
    margin-left: 316px;
    justify-self: start;
  }

  .topbar-actions {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (max-width: 1240px) and (min-width: 1101px) {
  .catalog-head {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  }

  .catalog-head .sync-panel {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-head-actions {
    grid-column: 2;
    grid-row: 2;
    justify-self: stretch;
  }
}

@media (max-width: 1100px) {
  body {
    padding: 18px;
  }

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

  .dashboard-period-filter {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .dashboard-period-filter button {
    padding-left: 8px;
    padding-right: 8px;
  }

  .dashboard-card-value {
    font-size: 38px;
  }

  .app-shell {
    min-height: calc(100vh - 36px);
  }

  .topbar {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .topbar-search {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin-left: 0;
    max-width: none;
    justify-self: stretch;
  }

  .topbar-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .view-tabs {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }

  .catalog-head {
    align-items: stretch;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .catalog-head .sync-panel {
    grid-column: 2;
  }

  .catalog-head-actions {
    grid-column: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    justify-content: flex-start;
    justify-self: stretch;
  }

  .catalog-head-actions .metric-card {
    min-width: 0;
  }

  .catalog-head-actions .sync-filter-card {
    min-width: 0;
  }

  .catalog-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .settings-layout {
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  }

  .settings-view.settings-view-has-category-menu .settings-layout {
    grid-template-columns: minmax(180px, 220px) minmax(220px, 260px) minmax(0, 1fr);
  }

  .kanban-control-panel {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .kanban-create-form {
    grid-template-columns: minmax(0, 1fr) minmax(150px, 0.45fr) minmax(0, 1fr) auto;
  }

  .kanban-summary {
    justify-content: stretch;
  }

  .kanban-board {
    overflow-x: auto;
    padding-bottom: 6px;
    grid-template-columns: repeat(5, minmax(240px, 1fr));
  }

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

  .sync-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .workspace {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .product-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
    padding: 16px;
  }

  .editor-area {
    padding: 22px 16px 24px;
  }

  .editor-category-menu {
    position: static;
  }

  .product-sidebar-categories {
    padding: 12px 16px 0;
  }

  .product-list {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .editor-grid {
    grid-template-columns: 1fr;
  }

  .validation-stack,
  .variant-summary-panel,
  .geometry-panel,
  .spec-summary-panel,
  .spec-details-panel,
  .content-panel,
  .media-panel,
  .competitor-price-panel {
    grid-column: auto;
    grid-row: auto;
    position: static;
  }
}

/* codex-trello-hide-topbar-controls-desktop-20260522 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .topbar {
    grid-template-columns: minmax(250px, 1fr) auto;
    align-items: center;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-search {
    display: none;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-actions {
    grid-column: 2;
    grid-row: 1;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-sync-card {
    display: none;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-actions #createProduct,
  body:has(#kanbanView:not(.is-hidden)) .topbar-actions #siteExchange,
  body:has(#kanbanView:not(.is-hidden)) .topbar-actions #siteExchangeFilterButton,
  body:has(#kanbanView:not(.is-hidden)) .site-exchange-progress {
    display: none;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-actions.has-site-exchange-progress {
    padding-bottom: 0;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-automation-button {
    display: inline-flex;
    min-width: clamp(190px, 18vw, 350px);
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-automation-button:hover,
  body:has(#kanbanView:not(.is-hidden)) .topbar-automation-button:focus-visible {
    color: var(--green);
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-automation-button:focus-visible {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 2px;
  }

  body:has(#kanbanView:not(.is-hidden)) .automation-modal-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-login-button {
    display: inline-flex;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-login-button:hover,
  body:has(#kanbanView:not(.is-hidden)) .topbar-login-button:focus-visible {
    color: var(--green);
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-login-button:focus-visible {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 2px;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-login-button.is-authenticated {
    width: 56px;
    padding: 0 7px;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-user-avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 17px;
    font-weight: 760;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(8, 7, 16, 0.18);
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-settings {
    margin-left: 0;
  }
}

/* codex-settings-panel-full-height-controls-desktop-20260522 */
@media (min-width: 901px) {
  body:has(#settingsMenu:not([hidden]))::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(6, 5, 9, 0.56);
    backdrop-filter: blur(2px);
  }

  body:has(#settingsMenu:not([hidden])) .topbar {
    background:
      linear-gradient(90deg, transparent 0 calc(100% - 400px), #333 calc(100% - 400px) 100%),
      rgba(235, 232, 247, 0.54);
  }

  body:has(#kanbanView:not(.is-hidden)):has(#settingsMenu:not([hidden])) .topbar {
    background:
      linear-gradient(90deg, transparent 0 calc(100% - 400px), #333 calc(100% - 400px) 100%),
      linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  }

  .settings-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    display: grid;
    width: min(400px, 100vw);
    min-width: 0;
    align-content: start;
    gap: 8px;
    border: 1px solid rgba(249, 249, 249, 0.16);
    border-left-color: rgba(249, 249, 249, 0.1);
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    background: #333;
    color: #f9f9f9;
    box-shadow: -24px 0 58px rgba(0, 0, 0, 0.28);
    overflow-y: auto;
    padding: 104px 30px 32px;
  }

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

  .settings-menu-controls {
    position: absolute;
    top: 26px;
    left: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
  }

  .settings-menu-control {
    display: inline-flex;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #f9f9f9;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    transition: color 0.18s ease, background 0.18s ease;
  }

  .settings-menu-control:hover,
  .settings-menu-control:focus-visible {
    background: rgba(249, 249, 249, 0.1);
    color: #ccc;
    outline: none;
  }

  .settings-menu-control:focus-visible {
    outline: 2px solid rgba(204, 204, 204, 0.72);
    outline-offset: 2px;
  }

  .settings-menu-close {
    font-size: 36px;
    font-weight: 300;
    line-height: 1;
  }

  .settings-menu-gear svg {
    display: block;
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .settings-menu-separator {
    height: 1px;
    margin: 4px 0;
    background: rgba(249, 249, 249, 0.22);
  }

  .settings-menu-item {
    min-height: 46px;
    border-radius: 8px;
    color: #f9f9f9;
    padding: 12px 18px;
    font-weight: 750;
  }

  .settings-menu-item:hover,
  .settings-menu-item:focus-visible {
    background: rgba(249, 249, 249, 0.12);
    color: #f9f9f9;
  }
}

/* codex-trello-compact-transparent-quick-add-desktop-20260522 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add {
    min-height: 33px;
    border: 0;
    background: transparent;
    font-weight: 500;
    gap: 0.5em;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add-plus {
    display: inline-block;
    font-size: 1.4em;
    line-height: 1;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add.is-file-over {
    color: rgba(255, 255, 255, 0.84);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add {
    color: var(--kanban-column-text);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add.is-file-over {
    color: color-mix(in srgb, var(--kanban-column-text) 72%, #ffffff);
  }
}

/* codex-kanban-board-design-system-222-333-desktop-20260522 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .app-shell {
    border-color: rgba(255, 255, 255, 0.12);
    background: #222;
    box-shadow: 0 34px 120px rgba(0, 0, 0, 0.48);
  }

  body:has(#kanbanView:not(.is-hidden)) .app-main,
  body:has(#kanbanView:not(.is-hidden)) .kanban-view {
    background: #222;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar {
    border-bottom-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 46px rgba(79, 39, 186, 0.28);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-board {
    gap: 14px;
  }

  body:has(#kanbanView:not(.is-hidden)) .panel.kanban-column {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    background: #333;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26);
  }

  body:has(#kanbanView:not(.is-hidden)) .panel.kanban-column.has-custom-background {
    background: var(--kanban-column-bg);
    border-color: rgba(255, 255, 255, 0.12);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.is-over {
    border-color: rgba(117, 66, 217, 0.74);
    box-shadow: 0 26px 76px rgba(117, 66, 217, 0.24);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-text) .kanban-column-head h3,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-text) .kanban-column-title-button {
    color: rgba(255, 255, 255, 0.92);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-text) .kanban-column-title-button:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-text) .kanban-column-title-button:focus-visible {
    color: var(--purple-soft);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-text) .kanban-column-head strong {
    color: rgba(255, 255, 255, 0.62);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-card-background) .kanban-card {
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: #222;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-background .kanban-card {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.2);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-background:not(.has-custom-card-text) .kanban-card-head strong,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-background:not(.has-custom-card-text) .kanban-card-details.is-primary {
    color: #090811;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-background:not(.has-custom-card-text) .kanban-card-details,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-background:not(.has-custom-card-text) .kanban-card-column-text {
    color: rgba(9, 8, 17, 0.68);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-background {
    background: var(--kanban-card-bg);
    border-color: rgba(255, 255, 255, 0.12);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-background:not(.has-custom-card-text) .kanban-card-head strong,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-background:not(.has-custom-card-text) .kanban-card-details.is-primary {
    color: #090811;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-background:not(.has-custom-card-text) .kanban-card-details,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-background:not(.has-custom-card-text) .kanban-card-column-text {
    color: rgba(9, 8, 17, 0.68);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card {
    isolation: isolate;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0);
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
    pointer-events: none;
    transition:
      background-color 0.16s ease,
      box-shadow 0.16s ease;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card > * {
    position: relative;
    z-index: 1;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card > .kanban-card-action {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card > .kanban-card-action-menu {
    position: absolute;
    z-index: 80;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card > .kanban-card-action-menu.is-member-menu {
    top: calc(100% - 40px);
    right: auto;
    bottom: auto;
    left: calc(100% + 8px);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-card:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-card.is-keyboard-active {
    outline: none;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card:hover::before,
  body:has(#kanbanView:not(.is-hidden)) .kanban-card:focus-visible::before,
  body:has(#kanbanView:not(.is-hidden)) .kanban-card.is-keyboard-active::before {
    background: rgba(255, 255, 255, 0.28);
    box-shadow: inset 0 0 0 1px var(--kanban-column-text, var(--kanban-card-text, rgba(255, 255, 255, 0.88)));
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-hover-background .kanban-card:hover::before,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-hover-background .kanban-card:focus-visible::before,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-card-hover-background .kanban-card.is-keyboard-active::before {
    background: var(--kanban-card-hover-bg);
  }

  body:has(#kanbanView:not(.is-hidden)) #kanbanBoard.is-keyboard-navigating .kanban-card:hover:not(.is-keyboard-active)::before {
    background: rgba(255, 255, 255, 0);
    box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card.has-member {
    padding-bottom: 44px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-member-list {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    display: flex;
    max-width: calc(100% - 20px);
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    pointer-events: auto;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-member-list .kanban-card-member-avatar {
    position: static;
    display: inline-flex;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(117, 66, 217, 0.96), rgba(88, 48, 176, 0.96));
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 8px 18px rgba(8, 7, 16, 0.22);
    cursor: pointer;
    pointer-events: auto;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-member-list .kanban-card-member-avatar:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-card-member-list .kanban-card-member-avatar:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-card-member-list .kanban-card-member-avatar[aria-expanded="true"] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.28), 0 8px 18px rgba(8, 7, 16, 0.22);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-member-list .kanban-card-member-avatar + .kanban-card-member-avatar {
    margin-left: -7px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-member-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-card-text) .kanban-card-head strong,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-card-text) .kanban-card-details.is-primary {
    color: rgba(255, 255, 255, 0.92);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-card-text) .kanban-card-details,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column:not(.has-custom-card-text) .kanban-card-column-text {
    color: rgba(255, 255, 255, 0.62);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-text .kanban-card-head strong,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-text .kanban-card-details,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-text .kanban-card-details.is-primary,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column .kanban-card.has-custom-card-text .kanban-card-column-text {
    color: var(--kanban-card-text);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card.has-image .kanban-card-image {
    border-color: rgba(255, 255, 255, 0.1);
    border-radius: 16px 16px 0 0;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-action {
    background: #090811;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.26);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-action:focus-visible {
    box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.34), 0 10px 22px rgba(0, 0, 0, 0.26);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-action {
    color: rgba(255, 255, 255, 0.72);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-action:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column-action:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column-action[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.18);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-action-menu,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column-action-menu {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: rgba(34, 34, 34, 0.94);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-card-title-form input,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form textarea {
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #222;
    color: #fff;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.54);
    font-weight: 400;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form textarea:focus {
    border-color: rgba(117, 66, 217, 0.58);
    box-shadow: 0 0 0 3px rgba(117, 66, 217, 0.16);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add {
    color: rgba(255, 255, 255, 0.58);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add.is-file-over {
    color: rgba(255, 255, 255, 0.84);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-body {
    padding-bottom: 62px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add {
    color: var(--kanban-column-text);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-column.has-custom-text .kanban-quick-add.is-file-over {
    color: color-mix(in srgb, var(--kanban-column-text) 72%, #ffffff);
  }
}

/* codex-kanban-quick-image-description-bottom-desktop-20260523 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form:has(.kanban-quick-attachment) {
    gap: 0;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form:has(.kanban-quick-attachment):focus-within {
    border-radius: 16px;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanban-card-bg, #222) 28%, transparent);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form:has(.kanban-quick-attachment) .kanban-quick-attachment {
    order: 1;
    border-color: var(--kanban-card-bg, #222);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    background: #222;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form:has(.kanban-quick-attachment) .kanban-quick-attachment img {
    max-height: 220px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form:has(.kanban-quick-attachment) textarea {
    order: 2;
    min-height: 76px;
    border-color: var(--kanban-card-bg, #222);
    border-top-color: var(--kanban-card-bg, #222);
    border-radius: 0 0 16px 16px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form:has(.kanban-quick-attachment) .kanban-quick-voice-row {
    order: 3;
    padding-top: 6px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form:has(.kanban-quick-attachment) textarea:focus {
    box-shadow: none;
  }
}

/* codex-kanban-quick-add-placeholder-polish-desktop-20260523 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form textarea {
    border-color: var(--kanban-card-bg, #222);
    border-radius: 16px;
    font-weight: 400;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form textarea:focus {
    border-color: var(--kanban-card-bg, #222);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--kanban-card-bg, #222) 28%, transparent);
  }
}

/* codex-kanban-quick-add-voice-input-desktop-20260523 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-voice-row {
    min-height: 0;
    align-items: center;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:has([data-kanban-quick-form]) {
    min-height: 0;
    padding-bottom: 15px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column:has([data-kanban-quick-form]) .kanban-column-body {
    min-height: 0;
    padding-bottom: 0;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-voice {
    background: #090811;
    color: #fff;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-voice:hover,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-voice:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-voice.is-listening {
    background: var(--purple);
  }
}

/* codex-kanban-column-bottom-gap-shorter-desktop-20260523 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .panel.kanban-column {
    min-height: auto;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-body {
    min-height: auto;
    padding-bottom: 0;
  }
}

/* codex-kanban-column-filter-modal-20260523 */
@media (min-width: 901px) {
  body:has(#kanbanView:not(.is-hidden)) .kanban-board {
    grid-template-columns: none;
    grid-auto-flow: column;
    /* codex-milio-six-columns-desktop-20260612 */
    grid-auto-columns: clamp(276px, 15.3525vw, 313.95px);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    padding-bottom: 10px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-board:has(.kanban-card.has-action-menu) {
    overflow: visible;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-board::-webkit-scrollbar {
    height: 6px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-board::-webkit-scrollbar-track {
    background: transparent;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-board::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-board::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.42);
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-kanban-add-column-button,
  body:has(#kanbanView:not(.is-hidden)) .topbar-column-filter-button {
    display: inline-flex;
    width: 56px;
    min-width: 56px;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: color 0.18s ease, background 0.18s ease, opacity 0.18s ease;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-kanban-add-column-button {
    margin-right: 4px;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-column-filter-button {
    margin-right: 2px;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-kanban-add-column-button:hover,
  body:has(#kanbanView:not(.is-hidden)) .topbar-kanban-add-column-button:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .topbar-column-filter-button:hover,
  body:has(#kanbanView:not(.is-hidden)) .topbar-column-filter-button:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .topbar-column-filter-button.is-active {
    color: var(--green);
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar-kanban-add-column-button:focus-visible,
  body:has(#kanbanView:not(.is-hidden)) .topbar-column-filter-button:focus-visible {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 2px;
  }

  .topbar-kanban-add-column-button svg,
  .topbar-column-filter-button svg {
    display: block;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .kanban-column-filter-modal {
    width: min(520px, calc(100vw - 96px));
    height: auto;
    max-height: calc(100vh - 128px);
    grid-template-rows: auto minmax(0, 1fr);
    background: #222;
  }

  .kanban-column-filter-modal-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .kanban-column-filter-modal-head h2 {
    margin: 0;
  }

  .kanban-column-filter-modal-body {
    overflow: auto;
    padding: 18px;
  }

  .kanban-column-filter-list {
    display: grid;
    gap: 10px;
  }

  .kanban-column-filter-row {
    display: flex;
    min-height: 64px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    background: #333;
    color: #fff;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 16px 0 20px;
  }

  .kanban-column-filter-name {
    min-width: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .kanban-column-filter-switch {
    position: relative;
    display: inline-flex;
    width: 74px;
    height: 40px;
    flex: 0 0 auto;
  }

  .kanban-column-filter-switch input {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .kanban-column-filter-switch-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: #444;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
  }

  .kanban-column-filter-switch-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f7f7f7;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease;
  }

  .kanban-column-filter-switch input:checked + .kanban-column-filter-switch-track {
    border-color: rgba(117, 66, 217, 0.86);
    background: linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%);
  }

  .kanban-column-filter-switch input:checked + .kanban-column-filter-switch-track .kanban-column-filter-switch-thumb {
    transform: translateX(34px);
  }

  .kanban-column-filter-switch input:focus-visible + .kanban-column-filter-switch-track {
    outline: 2px solid rgba(184, 250, 24, 0.7);
    outline-offset: 3px;
  }

  .kanban-column-filter-switch input:disabled {
    cursor: not-allowed;
  }

  .kanban-column-filter-switch input:disabled + .kanban-column-filter-switch-track {
    opacity: 0.62;
  }
}

/* codex-kanban-column-scroll-desktop-20260611 */
@media (min-width: 901px) {
  html:has(#kanbanView:not(.is-hidden)),
  body:has(#kanbanView:not(.is-hidden)) {
    height: 100%;
    overflow: hidden;
  }

  body:has(#kanbanView:not(.is-hidden)) {
    min-height: 100vh;
  }

  body:has(#kanbanView:not(.is-hidden)) .app-shell {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    min-height: 0;
  }

  body:has(#kanbanView:not(.is-hidden)) .topbar {
    flex: 0 0 auto;
  }

  body:has(#kanbanView:not(.is-hidden)) .app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-view,
  body:has(#kanbanView:not(.is-hidden)) .kanban-page {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-board {
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }

  body:has(#kanbanView:not(.is-hidden)) .panel.kanban-column {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-head {
    flex: 0 0 auto;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
    padding-bottom: 0;
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
    scrollbar-width: thin;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-body::-webkit-scrollbar {
    width: 8px;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-body::-webkit-scrollbar-track {
    background: transparent;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-body::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.26);
    background-clip: padding-box;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-column-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.42);
    background-clip: padding-box;
  }

  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-add,
  body:has(#kanbanView:not(.is-hidden)) .kanban-quick-form {
    flex: 0 0 auto;
  }
}

/* codex-site-exchange-filter-modal-20260526 */
@media (min-width: 901px) {
  .site-exchange-filter-modal {
    width: min(91vw, calc(100vw - 96px));
    height: min(91vh, calc(100vh - 96px));
    max-height: calc(100vh - 96px);
    grid-template-rows: auto minmax(0, 1fr);
    border-color: rgba(255, 255, 255, 0.12);
    background: #222;
  }

  .site-exchange-filter-modal-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .site-exchange-filter-tabs {
    display: inline-flex;
    width: min(100%, 900px);
    align-items: center;
    gap: 2px;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px;
  }

  .marketing-modal .site-exchange-filter-tabs {
    width: min(100%, 1180px);
  }

  .site-exchange-filter-tab {
    display: inline-flex;
    flex: 1 1 0;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
  }

  .site-exchange-filter-tab:hover,
  .site-exchange-filter-tab:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    outline: none;
  }

  .site-exchange-filter-tab.is-active {
    background: rgba(110, 67, 210, 0.9);
    color: #fff;
  }

  .site-exchange-filter-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
  }

  .site-exchange-filter-modal-close:hover,
  .site-exchange-filter-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
  }

  .site-exchange-filter-modal-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
    padding: 18px 20px 20px;
    background: #222;
  }

  .site-exchange-filter-layout {
    display: grid;
    height: 100%;
    min-height: 100%;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .site-exchange-filter-section.is-hidden,
  .site-exchange-filter-logs-wrap.is-hidden {
    display: none;
  }

  .site-exchange-filter-logs-wrap {
    min-height: 0;
    overflow: hidden;
  }

  .site-exchange-filter-section {
    height: 100%;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 20px 24px;
    overflow: hidden;
  }

  .site-exchange-filter-section h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }

  .site-exchange-filter-section--point {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    height: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
    overflow: hidden;
  }

  .site-exchange-filter-point-grid {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(200px, 0.72fr) minmax(260px, 0.95fr) minmax(300px, 1.08fr) minmax(300px, 1.1fr);
    gap: 24px;
    align-items: stretch;
  }

  .site-exchange-filter-column--point-names {
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    align-content: stretch;
    overflow: hidden;
  }

  .site-exchange-quick-filter {
    display: grid;
    min-height: 0;
    align-content: start;
    gap: 16px;
    overflow: auto;
    padding-right: 4px;
  }

  .site-exchange-quick-filter-group {
    display: grid;
    min-width: 0;
    gap: 8px;
    margin: 0;
    border: 0;
    padding: 0;
  }

  .site-exchange-quick-filter-group legend {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
  }

  .site-exchange-quick-filter-switches {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .site-exchange-filter-switch--quick-filter {
    min-width: 0;
  }

  .site-exchange-filter-switch--quick-filter span:first-child {
    min-width: 0;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    text-overflow: clip;
    white-space: normal;
  }

  .site-exchange-quick-filter-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .site-exchange-filter-column--point-filter {
    gap: 14px;
    position: relative;
    overflow: visible;
  }

  .site-exchange-filter-column--point-brands,
  .site-exchange-filter-column--point-category {
    gap: 16px;
    position: relative;
    overflow: visible;
  }

  .site-exchange-filter-point-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    overflow: visible;
  }

  .site-exchange-filter-point-fields .site-exchange-filter-selected-badges {
    min-height: 34px;
    padding-top: 10px;
  }

  .site-exchange-filter-column--point-logs {
    min-height: 0;
    position: relative;
    overflow: hidden;
  }

  .site-exchange-filter-column--point-brands::before,
  .site-exchange-filter-column--point-category::before,
  .site-exchange-filter-column--point-logs::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -12px;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .site-exchange-filter-names-head {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .site-exchange-filter-names-head h3 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-filter-name-add {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 0;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  }

  .site-exchange-filter-name-add:hover,
  .site-exchange-filter-name-add:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(110, 67, 210, 0.9);
    outline: none;
  }

  .site-exchange-filter-name-add:active {
    transform: translateY(1px);
  }

  .site-exchange-filter-name-add svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .site-exchange-filter-name-list {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .site-exchange-filter-name-item {
    display: block;
    min-width: 0;
  }

  .site-exchange-filter-name-item input {
    width: 100%;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    outline: none;
  }

  .site-exchange-filter-name-item input:focus {
    border-color: rgba(255, 255, 255, 0.36);
    background: #242424;
    box-shadow: 0 0 0 3px rgba(110, 67, 210, 0.18);
  }

  .site-exchange-filter-name-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.46);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
  }

  .site-exchange-filter-actions,
  .site-exchange-filter-point-actions {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .site-exchange-filter-actions {
    justify-content: flex-end;
  }

  .site-exchange-filter-point-actions {
    justify-content: space-between;
  }

  .site-exchange-filter-actions.has-site-exchange-progress {
    justify-content: flex-end;
  }

  .site-exchange-filter-point-actions.has-site-exchange-progress {
    display: grid;
    grid-template-columns: minmax(clamp(560px, 45vw, 830px), 0.95fr) minmax(0, 1fr) auto;
    gap: 16px 28px;
  }

  .site-exchange-filter-point-actions.has-site-exchange-progress .site-exchange-filter-point-count {
    display: none;
  }

  .site-exchange-filter-point-actions.has-site-exchange-progress .site-exchange-filter-progress.site-exchange-progress {
    grid-column: 2;
  }

  .site-exchange-filter-point-actions.has-site-exchange-progress .site-exchange-filter-run-button {
    grid-column: 3;
  }

  .site-exchange-filter-point-count {
    min-width: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
  }

  .site-exchange-filter-columns {
    display: grid;
    min-height: 100%;
    grid-template-columns: minmax(220px, 0.95fr) minmax(220px, 0.95fr) minmax(320px, 1.1fr);
    gap: 20px 28px;
    align-items: start;
  }

  .site-exchange-filter-column {
    display: grid;
    min-width: 0;
    gap: 12px;
    align-content: start;
    overflow: visible;
  }

  .site-exchange-filter-column.site-exchange-filter-column--point-filter {
    gap: 14px;
  }

  .site-exchange-filter-columns--point {
    overflow: visible;
  }

  .site-exchange-filter-columns--point .site-exchange-filter-column--middle,
  .site-exchange-filter-columns--point .site-exchange-filter-column--switches {
    padding-top: 0;
  }

  .site-exchange-filter-columns--auto .site-exchange-filter-column--switches {
    padding-top: 0;
  }

  .site-exchange-filter-switches--point {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
  }

  .site-exchange-filter-switches--point legend {
    grid-column: 1 / -1;
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .site-exchange-filter-run-button {
    display: inline-flex;
    min-height: 38px;
    justify-self: end;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 999px;
    background: transparent;
    color: #eee;
    padding: 0 22px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }

  .site-exchange-filter-run-button:hover,
  .site-exchange-filter-run-button:focus-visible {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
  }

  .site-exchange-filter-run-button:active {
    transform: translateY(1px);
  }

  .site-exchange-filter-progress.site-exchange-progress {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    min-height: 46px;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: rgba(255, 255, 255, 0.72);
    backdrop-filter: none;
  }

  .site-exchange-filter-progress .site-exchange-progress-head span,
  .site-exchange-filter-progress .site-exchange-progress-meta span,
  .site-exchange-filter-progress .site-exchange-progress-head strong {
    font-weight: 400;
  }

  .site-exchange-filter-progress .site-exchange-progress-head span,
  .site-exchange-filter-progress .site-exchange-progress-meta span {
    color: rgba(255, 255, 255, 0.58);
  }

  .site-exchange-filter-progress .site-exchange-progress-head strong {
    color: rgba(255, 255, 255, 0.88);
  }

  .site-exchange-filter-progress .site-exchange-progress-track {
    background: rgba(255, 255, 255, 0.16);
  }

  .site-exchange-filter-section--auto {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    border-top: 0;
    padding-top: 20px;
  }

  .site-exchange-filter-section--channel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-content: stretch;
  }

  .site-exchange-filter-section--onec {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 18px;
    border-top: 0;
    padding-top: 20px;
  }

  /* codex-marketing-discounts-tab-20260530 */
  .marketing-modal .marketing-discounts-panel {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    align-content: stretch;
    padding: 20px 24px;
  }

  .marketing-discounts-panel-mount {
    display: grid;
    min-width: 0;
    min-height: 0;
    height: 100%;
  }

  .marketing-discounts-panel .discounts-modal-grid {
    height: 100%;
  }

  .marketing-modal .marketing-promocodes-panel {
    display: grid;
    min-height: 0;
    grid-template-columns: 304px minmax(0, 1fr);
    column-gap: 58px;
    align-content: stretch;
    padding: 44px 36px 20px 24px;
  }

  .marketing-channel-menu {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 10px;
  }

  .marketing-channel-menu-button {
    display: flex;
    width: 100%;
    min-width: 0;
    height: 44px;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.78);
    padding: 0 18px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  .marketing-channel-menu-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marketing-channel-menu-button:hover,
  .marketing-channel-menu-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
  }

  .marketing-channel-menu-button.is-active {
    border-color: #6e43d2;
    background: #6e43d2;
    color: #fff;
  }

  .marketing-channel-body {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 324px minmax(0, 1fr);
    gap: 36px;
  }

  .marketing-promocode-list-block,
  .marketing-promocode-settings-block {
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-content: stretch;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    padding: 20px;
  }

  .marketing-promocode-block-head {
    display: flex;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .marketing-promocode-block-head h4 {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marketing-promocode-add-button {
    display: inline-flex;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 0;
    cursor: pointer;
  }

  .marketing-promocode-add-button:hover,
  .marketing-promocode-add-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(110, 67, 210, 0.9);
    outline: none;
  }

  .marketing-promocode-add-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 2;
  }

  .marketing-promocode-name-list {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 8px;
    overflow: auto;
    padding-top: 16px;
    padding-right: 4px;
  }

  .marketing-promocode-name-list::-webkit-scrollbar {
    width: 8px;
  }

  .marketing-promocode-name-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .marketing-promocode-name-button {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: rgba(255, 255, 255, 0.82);
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
  }

  .marketing-promocode-name-button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marketing-promocode-name-button:hover,
  .marketing-promocode-name-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    outline: none;
  }

  .marketing-promocode-name-button.is-active {
    border-color: #6e43d2;
    background: rgba(110, 67, 210, 0.92);
    color: #fff;
  }

  .marketing-promocode-empty,
  .marketing-promocode-settings-empty {
    min-width: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
  }

  .marketing-promocode-empty {
    padding-top: 16px;
  }

  .marketing-promocode-settings-empty {
    display: flex;
    align-items: flex-start;
    padding-top: 18px;
  }

  .marketing-promocode-active-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
  }

  .marketing-promocode-active-toggle input {
    width: 16px;
    height: 16px;
    accent-color: #6e43d2;
  }

  .marketing-promocode-settings-grid {
    display: grid;
    min-width: 0;
    align-content: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    overflow: auto;
    padding-top: 16px;
    padding-right: 4px;
  }

  .marketing-promocode-settings-grid::-webkit-scrollbar {
    width: 8px;
  }

  .marketing-promocode-settings-grid::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .marketing-promocode-field {
    display: grid;
    min-width: 0;
    gap: 6px;
  }

  .marketing-promocode-field--wide {
    grid-column: 1 / -1;
  }

  .marketing-promocode-field > span {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .marketing-promocode-field input,
  .marketing-promocode-field textarea {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    outline: none;
    color-scheme: dark;
  }

  .marketing-promocode-field input {
    min-height: 36px;
  }

  .marketing-promocode-field textarea {
    min-height: 74px;
    resize: vertical;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .marketing-promocode-field input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0.72;
    filter: invert(1);
  }

  .marketing-promocode-field input::placeholder,
  .marketing-promocode-field textarea::placeholder {
    color: rgba(255, 255, 255, 0.34);
  }

  .marketing-promocode-field input:focus,
  .marketing-promocode-field textarea:focus {
    border-color: rgba(110, 67, 210, 0.78);
  }

  .marketing-promocode-discount-mode {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .marketing-promocode-discount-mode button {
    min-width: 0;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: rgba(255, 255, 255, 0.76);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  .marketing-promocode-discount-mode button:hover,
  .marketing-promocode-discount-mode button:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
    outline: none;
  }

  .marketing-promocode-discount-mode button.is-active {
    border-color: #6e43d2;
    background: #6e43d2;
    color: #fff;
  }

  .site-exchange-filter-channel-spacer {
    min-height: 0;
  }

  .site-exchange-filter-columns--auto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    align-items: stretch;
    overflow: hidden;
  }

  .site-exchange-filter-columns--onec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    height: 100%;
    min-height: 0;
  }

  .site-exchange-filter-columns--auto > .site-exchange-filter-column,
  .site-exchange-filter-columns--onec > .site-exchange-filter-column {
    height: 100%;
    min-height: 0;
    padding: 0 28px;
  }

  .site-exchange-filter-columns--auto > .site-exchange-filter-column:first-child,
  .site-exchange-filter-columns--onec > .site-exchange-filter-column:first-child {
    padding-left: 0;
  }

  .site-exchange-filter-columns--auto > .site-exchange-filter-column:last-child,
  .site-exchange-filter-columns--onec > .site-exchange-filter-column:last-child {
    padding-right: 0;
  }

  .site-exchange-filter-columns--auto > .site-exchange-filter-column + .site-exchange-filter-column,
  .site-exchange-filter-columns--onec > .site-exchange-filter-column + .site-exchange-filter-column {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-exchange-filter-auto-controls,
  .site-exchange-filter-auto-targets {
    display: grid;
    gap: 12px;
    min-width: 0;
  }

  .site-exchange-filter-auto-targets {
    gap: 30px;
  }

  .site-exchange-filter-period {
    display: grid;
    gap: 10px;
  }

  .site-exchange-filter-switch--auto-enabled {
    width: 100%;
    max-width: 360px;
    min-height: 36px;
    margin: 2px 0 2px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 12px;
  }

  .site-exchange-filter-auto-status {
    display: grid;
    gap: 4px;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .site-exchange-filter-column--filters {
    gap: 30px;
  }

  .site-exchange-filter-column--auto-logs,
  .site-exchange-filter-column--onec-logs {
    height: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    align-content: stretch;
    overflow: hidden;
  }

  .site-exchange-filter-columns--auto > .site-exchange-filter-column--auto-logs,
  .site-exchange-filter-columns--onec > .site-exchange-filter-column--onec-logs {
    min-height: 0;
  }

  .site-exchange-filter-column--auto-logs .site-exchange-logs-panel,
  .site-exchange-filter-column--onec-logs .site-exchange-logs-panel {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .site-exchange-filter-column--auto-logs .site-exchange-logs-list,
  .site-exchange-filter-column--onec-logs .site-exchange-logs-list {
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .site-exchange-filter-column--filters .site-exchange-filter-switches--auto {
    margin-top: 0;
  }

  .site-exchange-logs-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 30px;
    min-height: 100%;
    color: #fff;
    padding: 18px 24px 22px;
  }

  .site-exchange-logs-panel--compact {
    gap: 30px;
    padding: 0;
  }

  .site-exchange-logs-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 18px;
  }

  .site-exchange-logs-head h3 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }

  .site-exchange-logs-panel--compact .site-exchange-logs-head h3 {
    font-size: 20px;
  }

  .site-exchange-logs-head p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .site-exchange-logs-refresh {
    display: inline-flex;
    width: 40px;
    height: 40px;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    padding: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
  }

  .site-exchange-logs-refresh-icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .site-exchange-logs-refresh:hover,
  .site-exchange-logs-refresh:focus-visible {
    border-color: transparent;
    background: transparent;
    outline: none;
  }

  .site-exchange-logs-refresh:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.28);
    outline-offset: 3px;
  }

  .site-exchange-logs-refresh:disabled {
    cursor: default;
    opacity: 0.58;
  }

  .site-exchange-logs-state {
    margin: 0;
    align-self: start;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.62);
    padding: 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
  }

  .site-exchange-logs-state--error {
    border-color: rgba(255, 118, 118, 0.3);
    color: #ffb1b1;
  }

  .site-exchange-logs-list {
    display: grid;
    align-content: start;
    gap: 10px;
    min-height: 0;
    max-height: 100%;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }

  .site-exchange-filter-column--point-logs .site-exchange-logs-list {
    padding-right: 0;
  }

  .site-exchange-logs-list::-webkit-scrollbar {
    width: 8px;
  }

  .site-exchange-logs-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .site-exchange-log-card {
    display: grid;
    gap: 7px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left-color: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    padding: 12px 14px 13px;
  }

  .site-exchange-log-card:hover,
  .site-exchange-log-card:focus-visible {
    border-color: rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.03);
    outline: none;
  }

  .site-exchange-log-card--success {
    border-left-color: rgba(255, 255, 255, 0.12);
  }

  .site-exchange-log-card--queued,
  .site-exchange-log-card--running {
    border-left-color: #8f6dff;
  }

  .site-exchange-log-card--warning {
    border-left-color: #f0c96a;
  }

  .site-exchange-log-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .site-exchange-log-card-head--with-price-list {
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto;
  }

  .site-exchange-log-card-badges {
    display: inline-flex;
    max-width: 190px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  .site-exchange-log-card h4 {
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-log-price-list-date {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-log-status {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    padding: 0 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
  }

  .site-exchange-log-source {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    padding: 0 9px;
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
  }

  .site-exchange-log-source--automatic {
    background: rgba(143, 109, 255, 0.2);
    color: #d6caff;
  }

  .site-exchange-log-source--manual {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
  }

  .site-exchange-log-source--incoming {
    background: rgba(88, 196, 255, 0.16);
    color: #a7ddff;
  }

  .site-exchange-log-source--manual-edit {
    background: rgba(240, 201, 106, 0.14);
    color: #ffe0a0;
  }

  .site-exchange-log-status-button {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
  }

  .site-exchange-log-status-button:hover,
  .site-exchange-log-status-button:focus-visible {
    filter: brightness(1.16);
    outline: none;
  }

  .site-exchange-log-status-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(255, 177, 177, 0.22);
  }

  .site-exchange-log-status-button:disabled {
    cursor: default;
    opacity: 0.72;
  }

  .site-exchange-log-card--success .site-exchange-log-status {
    background: #b8fa18;
    color: #222;
  }

  .site-exchange-log-card--queued .site-exchange-log-status,
  .site-exchange-log-card--running .site-exchange-log-status {
    background: rgba(143, 109, 255, 0.18);
    color: #d6caff;
  }

  .site-exchange-log-card--warning .site-exchange-log-status {
    background: rgba(240, 201, 106, 0.16);
    color: #ffe0a0;
  }

  .site-exchange-log-card--error .site-exchange-log-status {
    background: rgba(255, 107, 107, 0.16);
    color: #ffb1b1;
  }

  .site-exchange-log-summary {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
  }

  .site-exchange-log-metrics,
  .site-exchange-log-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }

  .site-exchange-log-metrics span {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    padding: 0 8px;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
  }

  .site-exchange-log-meta span {
    color: rgba(255, 255, 255, 0.46);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .site-exchange-log-meta .site-exchange-log-duration {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.62);
    font-weight: 650;
  }

  .site-exchange-log-meta span:not(:last-child)::after {
    content: "·";
    margin-left: 6px;
    color: rgba(255, 255, 255, 0.28);
  }

  .site-exchange-log-errors {
    display: grid;
    gap: 5px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
  }

  .site-exchange-log-errors li {
    display: grid;
    grid-template-columns: minmax(160px, 0.45fr) minmax(80px, 0.18fr) minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    border-radius: 7px;
    background: rgba(255, 107, 107, 0.08);
    padding: 8px 10px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 12px;
    line-height: 1.3;
  }

  .site-exchange-log-errors li.site-exchange-log-errors-onec {
    grid-template-columns: minmax(80px, 0.2fr) minmax(0, 1fr);
  }

  .site-exchange-log-errors strong,
  .site-exchange-log-errors span,
  .site-exchange-log-errors em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-log-errors strong {
    color: #fff;
    font-weight: 700;
  }

  .site-exchange-log-errors span {
    color: rgba(255, 255, 255, 0.52);
  }

  .site-exchange-log-errors em {
    color: #ffb1b1;
    font-style: normal;
  }

  .site-exchange-log-errors .site-exchange-log-errors-more {
    display: block;
    color: rgba(255, 255, 255, 0.56);
  }

  .site-exchange-log-detail-backdrop {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34, 34, 34, 0.96);
    padding: 48px;
  }

  .site-exchange-log-detail-modal {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: min(91vw, calc(100vw - 96px));
    height: min(91vh, calc(100vh - 96px));
    max-height: calc(100vh - 96px);
    min-height: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #222;
  }

  .site-exchange-log-detail-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 16px;
    align-items: start;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 20px 24px 18px;
  }

  .site-exchange-log-detail-head h2 {
    margin: 8px 0 0;
    color: #fff;
    font-size: 26px;
    font-weight: 750;
    line-height: 1.12;
  }

  .site-exchange-log-detail-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.78);
    padding: 0 11px;
    font-size: 12px;
    font-weight: 750;
  }

  .site-exchange-log-detail-status--success {
    background: #b8fa18;
    color: #222;
  }

  .site-exchange-log-detail-status--error {
    background: rgba(255, 107, 107, 0.16);
    color: #ffb1b1;
  }

  .site-exchange-log-detail-status--warning {
    background: rgba(240, 201, 106, 0.16);
    color: #ffe0a0;
  }

  .site-exchange-log-milio-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
  }

  .site-exchange-log-milio-avatar {
    appearance: none;
    display: inline-flex;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    background: #303134;
    color: #fff;
    padding: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
  }

  .site-exchange-log-milio-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .site-exchange-log-milio-avatar:hover,
  .site-exchange-log-milio-avatar:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    background: #3a3b3e;
    outline: none;
  }

  .site-exchange-log-milio-avatar:focus-visible {
    outline: 2px solid rgba(184, 250, 24, 0.56);
    outline-offset: 2px;
  }

  .site-exchange-log-milio-avatar.is-loading {
    opacity: 0.72;
    cursor: progress;
  }

  .site-exchange-log-milio-avatar:disabled {
    opacity: 0.62;
    cursor: default;
  }

  .site-exchange-log-detail-close {
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 28px;
    line-height: 1;
  }

  .site-exchange-log-detail-close:hover,
  .site-exchange-log-detail-close:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    outline: none;
  }

  .site-exchange-log-detail-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow: hidden;
    padding: 18px 20px 20px;
  }

  .site-exchange-log-detail-section {
    display: grid;
    gap: 10px;
    min-width: 0;
  }

  .site-exchange-log-detail-section h3,
  .site-exchange-log-detail-section-head h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.25;
  }

  .site-exchange-log-detail-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .site-exchange-log-detail-section-head span {
    color: rgba(255, 255, 255, 0.54);
    font-size: 13px;
    font-weight: 650;
  }

  .site-exchange-log-detail-summary,
  .site-exchange-log-detail-job-error,
  .site-exchange-log-detail-note,
  .site-exchange-log-detail-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
  }

  .site-exchange-log-detail-job-error,
  .site-exchange-log-detail-note {
    color: #ffb1b1;
  }

  .site-exchange-log-detail-metrics,
  .site-exchange-log-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .site-exchange-log-detail-metrics span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.78);
    padding: 0 9px;
    font-size: 12px;
    font-weight: 700;
  }

  .site-exchange-log-detail-meta span {
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .site-exchange-log-detail-section--errors {
    min-height: 0;
    flex: 1 1 0;
  }

  .site-exchange-log-detail-section--skipped {
    min-height: 0;
    flex: 1 1 0;
  }

  .site-exchange-log-detail-section--compact {
    flex: 0 0 auto;
  }

  .site-exchange-log-detail-errors {
    display: grid;
    gap: 6px;
    min-height: 0;
    overflow: auto;
    margin: 0;
    padding: 0 6px 0 0;
    list-style: none;
  }

  .site-exchange-log-detail-error-item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid rgba(255, 107, 107, 0.12);
    border-radius: 6px;
    background: rgba(255, 107, 107, 0.045);
    padding: 10px 12px;
  }

  .site-exchange-log-detail-skipped-item {
    border-color: rgba(240, 201, 106, 0.18);
    background: rgba(240, 201, 106, 0.045);
  }

  .site-exchange-log-detail-skipped-item .site-exchange-log-detail-error-main p {
    color: rgba(255, 224, 160, 0.88);
  }

  .site-exchange-log-detail-error-index {
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    font-weight: 750;
  }

  .site-exchange-log-detail-error-main {
    display: grid;
    gap: 6px;
    min-width: 0;
  }

  .site-exchange-log-detail-error-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
  }

  .site-exchange-log-detail-error-head strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-log-detail-error-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .site-exchange-log-detail-error-meta span,
  .site-exchange-log-detail-product-missing {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 500;
  }

  .site-exchange-log-detail-error-main p {
    margin: 0;
    color: #ffb1b1;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
  }

  .site-exchange-log-detail-product-link {
    color: #b8fa18;
    font-size: 12px;
    font-weight: 750;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  .site-health-sync-detail-backdrop {
    position: fixed;
    z-index: 140;
  }

  .site-health-sync-detail-modal .site-exchange-log-detail-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-health-sync-detail-list {
    padding-right: 8px;
  }

  .site-health-sync-detail-error-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .site-health-sync-detail-links {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
  }

  .site-health-sync-detail-site-link {
    color: #f4d35e;
  }

  .site-health-sync-detail-summary {
    display: block;
    margin: 0;
    color: rgba(255, 255, 255, 0.48);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .site-health-sync-detail-diagnostic {
    display: block;
    margin: -2px 0 4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .site-exchange-filter-field {
    display: grid;
    gap: 6px;
  }

  .site-exchange-filter-field span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .site-exchange-filter-field input,
  .site-exchange-filter-field select {
    appearance: none;
    min-height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    outline: none;
  }

  .site-exchange-filter-field select {
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.72) 50%, transparent 50%);
    background-position:
      calc(100% - 17px) 15px,
      calc(100% - 11px) 15px;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    padding-right: 34px;
  }

  .site-exchange-filter-field input:focus,
  .site-exchange-filter-field select:focus {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
  }

  .site-exchange-filter-combobox {
    position: relative;
    z-index: 1;
  }

  .site-exchange-filter-combobox.is-open {
    z-index: 40;
  }

  .site-exchange-filter-select-button {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 10px 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }

  .site-exchange-filter-select-button:hover,
  .site-exchange-filter-select-button:focus-visible,
  .site-exchange-filter-combobox.is-open .site-exchange-filter-select-button {
    border-color: rgba(255, 255, 255, 0.34);
    background: #242424;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
    outline: none;
  }

  .site-exchange-filter-select-button span {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-filter-select-button svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    stroke: rgba(255, 255, 255, 0.78);
    stroke-width: 2;
    fill: none;
    transition: transform 0.18s ease;
  }

  .site-exchange-filter-combobox.is-open .site-exchange-filter-select-button svg {
    transform: rotate(180deg);
  }

  .site-exchange-filter-select-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: grid;
    gap: 8px;
    max-height: min(340px, 44vh);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #181818;
    padding: 8px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
    overflow: hidden;
    transform-origin: top;
    animation: site-exchange-filter-dropdown-in 0.14s ease-out;
  }

  .site-exchange-filter-select-search {
    display: block;
  }

  .site-exchange-filter-select-search input {
    width: 100%;
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #222;
    color: #fff;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    outline: none;
  }

  .site-exchange-filter-select-search input::placeholder {
    color: rgba(255, 255, 255, 0.42);
  }

  .site-exchange-filter-select-search input:focus {
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow: 0 0 0 3px rgba(110, 67, 210, 0.18);
  }

  .site-exchange-filter-select-options {
    display: grid;
    gap: 2px;
    max-height: 252px;
    overflow: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
  }

  .site-exchange-filter-select-options::-webkit-scrollbar {
    width: 8px;
  }

  .site-exchange-filter-select-options::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .site-exchange-filter-select-option {
    display: flex;
    min-height: 34px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }

  .site-exchange-filter-select-option[hidden],
  .site-exchange-filter-select-empty[hidden] {
    display: none;
  }

  .site-exchange-filter-select-option:hover,
  .site-exchange-filter-select-option:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
  }

  .site-exchange-filter-select-option.is-selected {
    background: rgba(110, 67, 210, 0.86);
    color: #fff;
  }

  .site-exchange-filter-select-option span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-filter-select-empty {
    margin: 0;
    padding: 11px 10px 10px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 500;
  }

  .site-exchange-filter-selected-badges {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px;
    min-height: 126px;
    padding-top: 14px;
  }

  .site-exchange-filter-selected-badge {
    display: inline-flex;
    max-width: 100%;
    min-height: 30px;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--purple);
    color: #fff;
    padding: 0 8px 0 11px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, opacity 0.18s ease;
  }

  .site-exchange-filter-selected-badge:hover,
  .site-exchange-filter-selected-badge:focus-visible {
    background: var(--purple);
    opacity: 0.9;
    outline: none;
  }

  .site-exchange-filter-selected-badge span:first-child {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .site-exchange-filter-selected-badge .site-exchange-filter-selected-badge-close {
    display: inline-grid;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
  }

  .site-exchange-brand-filter-badges {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px 12px;
    min-height: 132px;
    padding-top: 4px;
  }

  .site-exchange-brand-filter-badge {
    appearance: none;
    display: inline-flex;
    max-width: 100%;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: #303030;
    color: rgba(255, 255, 255, 0.78);
    padding: 0 18px;
    font: inherit;
    font-size: 17px;
    font-weight: 650;
    line-height: 1.1;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
  }

  .site-exchange-brand-filter-badge:hover,
  .site-exchange-brand-filter-badge:focus-visible {
    border-color: rgba(255, 255, 255, 0.22);
    background: #3a3a3a;
    color: #fff;
    outline: none;
  }

  .site-exchange-brand-filter-badge:focus-visible {
    box-shadow: 0 0 0 3px rgba(110, 67, 210, 0.24);
  }

  .site-exchange-brand-filter-badge.is-active {
    border-color: transparent;
    background: #5b448e;
    color: #fff;
  }

  .site-exchange-brand-filter-badge.is-active:hover,
  .site-exchange-brand-filter-badge.is-active:focus-visible {
    background: #644ba0;
  }

  .site-exchange-brand-filter-badge:disabled {
    cursor: default;
    opacity: 0.64;
  }

  .site-exchange-brand-filter-badge span {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @keyframes site-exchange-filter-dropdown-in {
    from {
      opacity: 0;
      transform: translateY(-4px) scaleY(0.98);
    }

    to {
      opacity: 1;
      transform: translateY(0) scaleY(1);
    }
  }

  .site-exchange-filter-switches {
    display: grid;
    gap: 4px;
  }

  .site-exchange-filter-switch {
    display: grid;
    min-height: 30px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 12px;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
  }

  .site-exchange-filter-switch--point {
    min-width: 230px;
  }

  .site-exchange-filter-switch--point-mode {
    width: 100%;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 12px;
  }

  .site-exchange-filter-switch.site-exchange-filter-switch--quick-filter {
    gap: 12px;
  }

  .site-exchange-filter-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .site-exchange-filter-switch-track {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12);
    transition: background 0.18s ease, box-shadow 0.18s ease;
  }

  .site-exchange-filter-switch-track::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.34);
    content: "";
    transition: transform 0.18s ease;
  }

  .site-exchange-filter-switch input:checked + .site-exchange-filter-switch-track {
    background: rgba(110, 67, 210, 0.84);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16);
  }

  .site-exchange-filter-switch input:checked + .site-exchange-filter-switch-track::before {
    transform: translateX(18px);
  }

  .site-exchange-filter-switch input:focus-visible + .site-exchange-filter-switch-track {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  }

  /* codex-dark-modal-flat-fields-20260529 */
  .discounts-name-button,
  .discounts-name-input,
  .discounts-field select,
  .discounts-rule-row input,
  .discounts-modal-add-name,
  .site-exchange-filter-name-item input,
  .site-exchange-filter-name-add,
  .site-exchange-filter-field input,
  .site-exchange-filter-field select,
  .site-exchange-filter-select-button,
  .site-exchange-filter-select-search input {
    border-width: 1px;
    box-shadow: none;
    background-clip: padding-box;
  }

  .discounts-name-button:hover,
  .discounts-name-button:focus-visible,
  .discounts-name-input:focus,
  .discounts-field select:focus,
  .discounts-rule-row input:focus,
  .discounts-modal-add-name:focus-visible,
  .site-exchange-filter-name-item input:focus,
  .site-exchange-filter-name-add:focus-visible,
  .site-exchange-filter-field input:focus,
  .site-exchange-filter-field select:focus,
  .site-exchange-filter-select-button:hover,
  .site-exchange-filter-select-button:focus-visible,
  .site-exchange-filter-combobox.is-open .site-exchange-filter-select-button,
  .site-exchange-filter-select-search input:focus {
    border-width: 1px;
    box-shadow: none;
  }

  @media (max-width: 1200px) {
    .site-exchange-filter-tabs {
      width: min(100%, 760px);
    }

    .site-exchange-filter-tab {
      padding: 0 8px;
      font-size: 12px;
    }

    .site-exchange-filter-columns {
      grid-template-columns: 1fr;
    }

    .site-exchange-filter-columns--auto,
    .site-exchange-filter-columns--onec {
      height: auto;
      max-height: none;
      align-items: start;
      overflow: visible;
    }

    .site-exchange-filter-point-grid {
      grid-template-columns: 1fr;
    }

    .site-exchange-filter-column--point-brands::before,
    .site-exchange-filter-column--point-category::before,
    .site-exchange-filter-column--point-logs::before {
      top: -9px;
      bottom: auto;
      left: 0;
      width: 100%;
      height: 1px;
    }

    .site-exchange-filter-columns--point .site-exchange-filter-column--middle,
    .site-exchange-filter-columns--point .site-exchange-filter-column--switches,
    .site-exchange-filter-columns--auto .site-exchange-filter-column--switches {
      padding-top: 0;
    }

    .site-exchange-filter-section {
      overflow: auto;
    }

    .site-exchange-filter-columns--auto > .site-exchange-filter-column,
    .site-exchange-filter-columns--onec > .site-exchange-filter-column {
      height: auto;
      min-height: 0;
      padding: 0;
    }

    .site-exchange-filter-columns--auto > .site-exchange-filter-column + .site-exchange-filter-column,
    .site-exchange-filter-columns--onec > .site-exchange-filter-column + .site-exchange-filter-column {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      border-left: 0;
      padding-top: 18px;
    }

    .site-exchange-log-errors li {
      grid-template-columns: 1fr;
    }

    .site-exchange-log-errors strong,
    .site-exchange-log-errors span,
    .site-exchange-log-errors em {
      white-space: normal;
    }

    .site-exchange-log-detail-backdrop {
      padding: 18px;
    }

    .site-exchange-log-detail-head {
      padding: 18px 20px;
    }

    .site-exchange-log-detail-head h2 {
      font-size: 22px;
    }

    .site-exchange-log-detail-body {
      padding: 18px 20px 20px;
    }

    .site-exchange-log-detail-error-head {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .site-exchange-log-detail-error-head strong {
      white-space: normal;
    }
  }

  @media (max-height: 800px) {
    .site-exchange-filter-layout {
      grid-template-rows: minmax(0, 1fr);
      gap: 0;
    }

    .site-exchange-filter-columns--auto .site-exchange-filter-column--switches {
      padding-top: 0;
    }

    .site-exchange-filter-switches {
      gap: 4px;
    }

    .site-exchange-filter-switches--point {
      grid-template-columns: 1fr;
      gap: 4px 8px;
    }

    .site-exchange-filter-switch {
      min-height: 28px;
    }

    .site-exchange-filter-switch--point-mode {
      gap: 8px;
      font-size: 13px;
    }
  }
}

/* codex-content-loader-receipt-import-20260604 */
.loader-receipt-layout {
  display: grid;
  min-height: 0;
  color: #fff;
}

.loader-receipt-panel {
  min-width: 0;
  min-height: 0;
}

.loader-receipt-upload {
  display: grid;
  gap: 10px;
}

.loader-receipt-file-input {
  display: none;
}

.loader-receipt-file {
  display: grid;
  gap: 5px;
  min-height: 60px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #1c1c1c;
  padding: 14px;
}

.loader-receipt-file strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loader-receipt-file span,
.loader-receipt-status,
.loader-receipt-empty span,
.loader-receipt-table-empty span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.loader-receipt-actions,
.loader-receipt-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}

.loader-receipt-actions {
  flex-wrap: wrap;
}

.loader-receipt-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #eee;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.loader-receipt-button:hover,
.loader-receipt-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.32);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  outline: none;
}

.loader-receipt-button.is-primary {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(110, 67, 210, 0.9);
  color: #fff;
}

.loader-receipt-button.is-primary:hover,
.loader-receipt-button.is-primary:focus-visible {
  background: rgba(124, 78, 224, 0.95);
}

.loader-receipt-button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.loader-receipt-status {
  min-height: 20px;
  margin: 0;
}

.loader-receipt-status.is-error {
  color: #ffb1b1;
}

.loader-receipt-status.is-success {
  color: #8ce7b6;
}

.loader-receipt-status.is-busy {
  color: #f4d58a;
}

.loader-receipt-fields {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.loader-receipt-field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.loader-receipt-switch {
  margin-top: 2px;
}

.loader-receipt-empty,
.loader-receipt-table-empty {
  display: grid;
  gap: 6px;
  min-height: 76px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #1c1c1c;
  padding: 14px;
}

.loader-receipt-empty strong {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.loader-receipt-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.loader-receipt-summary > div {
  display: grid;
  gap: 5px;
  min-height: 66px;
  align-content: center;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #1c1c1c;
  padding: 10px 12px;
}

.loader-receipt-summary span {
  min-width: 0;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loader-receipt-summary strong {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loader-receipt-summary-state.is-ready strong {
  color: #8ce7b6;
}

.loader-receipt-summary-state.is-warning strong {
  color: #f4d58a;
}

.loader-receipt-messages {
  display: grid;
  gap: 6px;
  margin: 0;
  border: 1px solid rgba(244, 213, 138, 0.22);
  border-radius: 8px;
  background: rgba(244, 213, 138, 0.08);
  padding: 10px 12px 10px 28px;
  color: #f4d58a;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
}

.loader-receipt-table-wrap {
  min-height: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: #1c1c1c;
  overflow: auto;
}

.loader-receipt-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  color: #fff;
  font-size: 13px;
}

.loader-receipt-table th,
.loader-receipt-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.loader-receipt-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #242424;
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 700;
}

.loader-receipt-table td:first-child,
.loader-receipt-table th:first-child {
  width: 48px;
  text-align: right;
}

.loader-receipt-table td:nth-child(4),
.loader-receipt-table td:nth-child(5),
.loader-receipt-table td:nth-child(6),
.loader-receipt-table th:nth-child(4),
.loader-receipt-table th:nth-child(5),
.loader-receipt-table th:nth-child(6) {
  text-align: right;
  white-space: nowrap;
}

.loader-receipt-table tr:last-child td {
  border-bottom: 0;
}

.loader-receipt-table strong,
.loader-receipt-table span {
  display: block;
  max-width: 100%;
}

.loader-receipt-table strong {
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
}

.loader-receipt-table span {
  margin-top: 3px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.loader-receipt-table tr.is-warning td:last-child strong,
.loader-receipt-table tr.is-warning td:first-child {
  color: #f4d58a;
}

.loader-receipt-table tr.is-matched td:last-child strong {
  color: #8ce7b6;
}

.loader-receipt-footer {
  justify-content: flex-end;
}

@media (min-width: 901px) {
  .loader-modal .site-exchange-filter-tabs {
    width: min(100%, 360px);
  }

  .loader-modal-body {
    padding: 0;
  }

  .loader-bfi-layout {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    overflow: hidden;
    padding: 16px 20px 20px;
    color: #fff;
  }

  .loader-modal .loader-bfi-panel {
    min-height: 0;
    grid-template-rows: auto auto minmax(0, 1fr);
    border: 0;
    background: transparent;
    padding: 0;
    overflow: hidden;
  }

  .loader-modal .bfi-panel-head h3,
  .loader-modal .bfi-table td,
  .loader-modal .bfi-table code,
  .loader-modal .bfi-stock-value {
    color: #fff;
  }

  .loader-modal .bfi-panel-head p,
  .loader-modal .bfi-status,
  .loader-modal .bfi-updated,
  .loader-modal .bfi-table th,
  .loader-modal .bfi-raw-value {
    color: rgba(255, 255, 255, 0.58);
  }

  .loader-bfi-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  .loader-modal .bfi-refresh-button {
    min-width: 112px;
    min-height: 36px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
  }

  .loader-modal .bfi-refresh-button:hover,
  .loader-modal .bfi-refresh-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .loader-modal .bfi-refresh-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
  }

  .loader-modal .bfi-table-wrap {
    min-height: 0;
    border-color: rgba(255, 255, 255, 0.12);
    background: #1c1c1c;
  }

  .loader-modal .bfi-table {
    min-width: 900px;
  }

  .loader-modal .bfi-table th,
  .loader-modal .bfi-table td {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    padding: 10px 12px;
  }

  .loader-modal .bfi-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #242424;
  }

  .loader-receipt-layout {
    height: 100%;
    min-height: 100%;
    grid-template-columns: minmax(300px, 370px) minmax(0, 1fr);
  }

  .loader-receipt-panel {
    overflow: auto;
    padding: 16px 20px;
  }

  .loader-receipt-panel--setup {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }

  .loader-receipt-panel--result {
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    gap: 14px;
    overflow: hidden;
  }
}

@media (max-width: 900px) {
  .loader-modal-backdrop {
    padding: 12px;
  }

  .loader-modal {
    width: min(100%, calc(100vw - 24px));
    height: min(92vh, calc(100vh - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    grid-template-rows: auto minmax(0, 1fr);
    border-color: rgba(255, 255, 255, 0.12);
    background: #222;
    color: #fff;
  }

  .loader-modal-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #222;
    padding: 14px 16px 12px;
  }

  .loader-modal .site-exchange-filter-tabs {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 2px;
    min-height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px;
  }

  .loader-modal .site-exchange-filter-tab {
    display: inline-flex;
    min-height: 32px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.62);
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
  }

  .loader-modal .site-exchange-filter-tab.is-active {
    background: rgba(110, 67, 210, 0.9);
    color: #fff;
  }

  .loader-modal-close {
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
  }

  .loader-modal-body {
    display: block;
    min-height: 0;
    overflow: auto;
    background: #222;
    padding: 16px 20px 20px;
  }

  .loader-receipt-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    height: auto;
    min-height: 0;
    align-content: start;
    overflow: visible;
  }

  .loader-receipt-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0;
  }

  .loader-receipt-panel--result {
    display: grid;
    gap: 12px;
  }

  .loader-receipt-field-row,
  .loader-receipt-summary {
    grid-template-columns: 1fr;
  }

  .loader-receipt-actions,
  .loader-receipt-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .loader-receipt-button {
    width: 100%;
  }

  .loader-modal .site-exchange-filter-field {
    display: grid;
    gap: 6px;
  }

  .loader-modal .site-exchange-filter-field span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .loader-modal .site-exchange-filter-field input,
  .loader-modal .site-exchange-filter-field select {
    appearance: none;
    min-height: 36px;
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    outline: none;
  }

  .loader-modal .site-exchange-filter-field select {
    background-image:
      linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, 0.72) 50%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.72) 50%, transparent 50%);
    background-position:
      calc(100% - 17px) 15px,
      calc(100% - 11px) 15px;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    padding-right: 34px;
  }

  .loader-modal .site-exchange-filter-field input:focus,
  .loader-modal .site-exchange-filter-field select:focus {
    border-color: rgba(255, 255, 255, 0.34);
  }

  .loader-receipt-switch {
    display: grid;
    min-height: 30px;
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 12px;
    align-items: center;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
  }

  .loader-receipt-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .loader-receipt-switch .site-exchange-filter-switch-track {
    position: relative;
    display: block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
  }

  .loader-receipt-switch .site-exchange-filter-switch-track::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    content: "";
    transition: transform 0.18s ease;
  }

  .loader-receipt-switch input:checked + .site-exchange-filter-switch-track {
    background: rgba(110, 67, 210, 0.84);
  }

  .loader-receipt-switch input:checked + .site-exchange-filter-switch-track::before {
    transform: translateX(18px);
  }
}

/* codex-contentds-menu-modal-dark-shell-20260602 */
.menu-settings-modal--site-shell:not([open]) {
  display: none;
}

@media (min-width: 901px) {
  .menu-settings-modal--site-shell {
    position: fixed;
    inset: 0;
    width: min(91vw, calc(100vw - 96px));
    height: min(91vh, calc(100vh - 96px));
    max-width: calc(100vw - 96px);
    max-height: calc(100vh - 96px);
    margin: auto;
    border-color: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #222;
    color: #fff;
    overflow: hidden;
    padding: 0;
  }

  .menu-settings-modal--site-shell::backdrop {
    background: rgba(9, 8, 18, 0.42);
  }

  .menu-settings-modal--site-shell .menu-settings-modal-head {
    display: grid;
    grid-template-columns: minmax(190px, 360px) auto auto auto minmax(0, 1fr) auto;
    min-height: 0;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 18px 20px 16px;
  }

  .menu-settings-modal--site-shell .menu-settings-title-tabs {
    width: min(100%, 360px);
  }

  .menu-settings-modal--site-shell .menu-settings-head-device-tabs {
    flex: 0 0 auto;
    margin-left: 0;
  }

  .menu-settings-modal--site-shell .menu-settings-modal-head-actions {
    margin-left: 0;
  }

  .menu-settings-modal--site-shell .menu-builder-action-status {
    max-width: 340px;
    color: rgba(255, 255, 255, 0.6);
  }

  .menu-settings-modal--site-shell .menu-builder-action-status[data-tone="pending"] {
    color: #cdbdff;
  }

  .menu-settings-modal--site-shell .menu-builder-action-status[data-tone="success"] {
    color: #8be0ad;
  }

  .menu-settings-modal--site-shell .menu-builder-action-status[data-tone="error"] {
    color: #ffb4a8;
  }

  .menu-settings-modal--site-shell .menu-settings-modal-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
  }

  .menu-settings-modal--site-shell .menu-settings-modal-close:hover,
  .menu-settings-modal--site-shell .menu-settings-modal-close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
  }

  .menu-settings-modal--site-shell .menu-settings-modal-body {
    min-height: 0;
    padding: 18px 20px 20px;
    background: #222;
  }

  .menu-settings-modal--site-shell .menu-builder-shell {
    min-height: 0;
    height: 100%;
  }

  .menu-settings-modal--site-shell .menu-builder-layout {
    gap: 18px;
  }

  .menu-settings-modal--site-shell .menu-builder-device-tabs {
    grid-template-columns: repeat(2, 46px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px;
  }

  .menu-settings-modal--site-shell .menu-builder-device-tab {
    width: 46px;
    height: 32px;
    border: 0;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.62);
  }

  .menu-settings-modal--site-shell .menu-builder-device-tab.is-active {
    background: rgba(110, 67, 210, 0.9);
    color: #fff;
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-device-tab:hover,
  .menu-settings-modal--site-shell .menu-builder-device-tab:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-button {
    min-height: 38px;
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
    font-weight: 650;
  }

  .menu-settings-modal--site-shell .menu-builder-button.is-primary {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(110, 67, 210, 0.9);
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-button:hover,
  .menu-settings-modal--site-shell .menu-builder-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.36);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-button.is-primary:hover,
  .menu-settings-modal--site-shell .menu-builder-button.is-primary:focus-visible {
    background: rgba(124, 78, 224, 0.95);
  }

  .menu-settings-modal--site-shell .menu-builder-button:disabled {
    opacity: 0.52;
  }

  .menu-settings-modal--site-shell .menu-builder-add-item-button {
    display: inline-flex;
    min-width: 152px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    justify-self: start;
    border-color: rgba(255, 255, 255, 0.26);
    background: transparent;
    color: #fff;
    text-transform: none;
    cursor: grab;
  }

  .menu-settings-modal--site-shell .menu-builder-spacer-item-button {
    min-width: 126px;
  }

  .menu-settings-modal--site-shell .menu-builder-add-item-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .menu-settings-modal--site-shell .menu-builder-add-item-button:hover,
  .menu-settings-modal--site-shell .menu-builder-add-item-button:focus-visible {
    border-color: rgba(150, 112, 240, 0.78);
    background: rgba(255, 255, 255, 0.06);
  }

  .menu-settings-modal--site-shell .menu-builder-add-item-button.is-dragging {
    cursor: grabbing;
    opacity: 0.72;
  }

  .menu-settings-modal--site-shell .menu-builder-panel,
  .menu-settings-modal--site-shell .menu-builder-toolbar {
    border-color: rgba(255, 255, 255, 0.12);
    background: #1c1c1c;
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-panel--desktop-preview,
  .menu-settings-modal--site-shell .menu-builder-panel--mobile-preview {
    background: #181818;
  }

  .menu-settings-modal--site-shell .menu-builder-panel-head,
  .menu-settings-modal--site-shell .menu-builder-version-head {
    border-color: rgba(255, 255, 255, 0.12);
    background: #242424;
  }

  .menu-settings-modal--site-shell .menu-builder-panel-head h4,
  .menu-settings-modal--site-shell .menu-builder-version-head h4,
  .menu-settings-modal--site-shell .menu-builder-source-card strong,
  .menu-settings-modal--site-shell .menu-builder-row-copy strong,
  .menu-settings-modal--site-shell .menu-builder-version strong {
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-panel-head span,
  .menu-settings-modal--site-shell .menu-builder-source-card span,
  .menu-settings-modal--site-shell .menu-builder-row-copy span,
  .menu-settings-modal--site-shell .menu-builder-version span,
  .menu-settings-modal--site-shell .menu-builder-field span,
  .menu-settings-modal--site-shell .menu-builder-check span,
  .menu-settings-modal--site-shell .menu-builder-filter-title small,
  .menu-settings-modal--site-shell .menu-builder-filter-group-head small,
  .menu-settings-modal--site-shell .menu-builder-filter-option small,
  .menu-settings-modal--site-shell .menu-builder-filter-empty {
    color: rgba(255, 255, 255, 0.58);
  }

  .menu-settings-modal--site-shell .menu-builder-filter-title span,
  .menu-settings-modal--site-shell .menu-builder-filter-group-head span,
  .menu-settings-modal--site-shell .menu-builder-filter-source-label,
  .menu-settings-modal--site-shell .menu-builder-filter-option strong {
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-sidebar-tab {
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.62);
  }

  .menu-settings-modal--site-shell .menu-builder-sidebar-tab.is-active {
    color: #fff;
    box-shadow: inset 0 -2px 0 rgba(110, 67, 210, 0.95);
  }

  .menu-settings-modal--site-shell .menu-builder-sidebar-tab:hover,
  .menu-settings-modal--site-shell .menu-builder-sidebar-tab:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-source-card,
  .menu-settings-modal--site-shell .menu-builder-row,
  .menu-settings-modal--site-shell .menu-builder-version,
  .menu-settings-modal--site-shell .menu-builder-version-empty,
  .menu-settings-modal--site-shell .menu-builder-filter-panel,
  .menu-settings-modal--site-shell .menu-builder-filter-source,
  .menu-settings-modal--site-shell .menu-builder-filter-picker-button,
  .menu-settings-modal--site-shell .menu-builder-filter-summary-chip,
  .menu-settings-modal--site-shell .menu-builder-filter-summary-more,
  .menu-settings-modal--site-shell .menu-builder-filter-summary-empty,
  .menu-settings-modal--site-shell .menu-builder-filter-option,
  .menu-settings-modal--site-shell .menu-builder-filter-empty {
    border-color: rgba(255, 255, 255, 0.12);
    background: #242424;
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-filter-summary-chip,
  .menu-settings-modal--site-shell .menu-builder-filter-summary-more {
    border-color: var(--purple);
    background: var(--purple);
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-source-card:hover,
  .menu-settings-modal--site-shell .menu-builder-source-card:focus-visible,
  .menu-settings-modal--site-shell .menu-builder-filter-picker-button:hover,
  .menu-settings-modal--site-shell .menu-builder-filter-picker-button:focus-visible,
  .menu-settings-modal--site-shell .menu-builder-row.is-selected,
  .menu-settings-modal--site-shell .menu-builder-version button:hover,
  .menu-settings-modal--site-shell .menu-builder-version button:focus-visible {
    border-color: rgba(255, 255, 255, 0.36);
    background: #282828;
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-filter-source-label:hover,
  .menu-settings-modal--site-shell .menu-builder-filter-source-label:focus-visible {
    color: #cdbcff;
  }

  .menu-settings-modal--site-shell .menu-builder-filter-source-label.is-disabled:hover,
  .menu-settings-modal--site-shell .menu-builder-filter-source-label.is-disabled:focus-visible {
    color: #fff;
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-filter-source--panel {
    border: 0;
    background: transparent;
  }

  .menu-settings-modal--site-shell .menu-builder-row.is-selected {
    background: #2a2638;
  }

  .menu-settings-modal--site-shell .menu-builder-row-branch {
    background: rgba(255, 255, 255, 0.32);
  }

  .menu-settings-modal--site-shell .menu-builder-field input,
  .menu-settings-modal--site-shell .menu-builder-field select,
  .menu-settings-modal--site-shell .menu-builder-field textarea {
    border-color: rgba(255, 255, 255, 0.14);
    background: #1c1c1c;
    color: #fff;
    font-weight: 500;
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-field--static strong {
    color: #fff;
    font-weight: 600;
  }

  .menu-settings-modal--site-shell .menu-builder-field input:focus,
  .menu-settings-modal--site-shell .menu-builder-field select:focus,
  .menu-settings-modal--site-shell .menu-builder-field textarea:focus {
    border-color: rgba(255, 255, 255, 0.36);
    background: #242424;
  }

  .menu-settings-modal--site-shell .menu-builder-desktop-preview-photo-caption.is-caption-drop-active,
  .menu-settings-modal--site-shell .menu-builder-desktop-preview-photo-caption:focus {
    border-color: rgba(255, 255, 255, 0.48);
    background: #fff;
    color: #090811;
  }

  .menu-settings-modal--site-shell .menu-builder-check input {
    accent-color: #6e43d2;
  }

  .menu-settings-modal--site-shell .menu-builder-filter-source input,
  .menu-settings-modal--site-shell .menu-builder-filter-option input {
    accent-color: #6e43d2;
  }

  .menu-settings-modal--site-shell .menu-builder-property-actions {
    border-color: rgba(255, 255, 255, 0.12);
  }

  .menu-settings-modal--site-shell .menu-builder-property-actions button,
  .menu-settings-modal--site-shell .menu-builder-version button {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #eee;
  }

  .menu-settings-modal--site-shell .menu-builder-property-actions .menu-builder-highlight-action.is-active {
    border-color: rgba(110, 67, 210, 0.64);
    background: rgba(110, 67, 210, 0.18);
    color: #8e66f0;
  }

  .menu-settings-modal--site-shell .menu-builder-property-actions .menu-builder-visibility-action.is-active {
    border-color: rgba(110, 67, 210, 0.64);
    background: rgba(110, 67, 210, 0.18);
    color: #8e66f0;
  }

  .menu-settings-modal--site-shell .menu-builder-property-actions button:not(:disabled):hover,
  .menu-settings-modal--site-shell .menu-builder-property-actions button:not(:disabled):focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-property-actions .menu-builder-highlight-action.is-active:not(:disabled):hover,
  .menu-settings-modal--site-shell .menu-builder-property-actions .menu-builder-highlight-action.is-active:not(:disabled):focus-visible,
  .menu-settings-modal--site-shell .menu-builder-property-actions .menu-builder-visibility-action.is-active:not(:disabled):hover,
  .menu-settings-modal--site-shell .menu-builder-property-actions .menu-builder-visibility-action.is-active:not(:disabled):focus-visible {
    border-color: rgba(110, 67, 210, 0.86);
    background: rgba(110, 67, 210, 0.24);
    color: #a98cff;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-layout-button {
    border-color: rgba(255, 255, 255, 0.14);
    background: #242424;
    color: rgba(255, 255, 255, 0.58);
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-layout-button:hover,
  .menu-settings-modal--site-shell .menu-builder-photo-layout-button:focus-visible,
  .menu-settings-modal--site-shell .menu-builder-photo-layout-button.is-active {
    border-color: rgba(255, 255, 255, 0.36);
    color: #fff;
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-settings-panel {
    border-color: rgba(255, 255, 255, 0.14);
    background: #202020;
    box-shadow: none;
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-settings-head h4 {
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-settings-title > span {
    color: rgba(255, 255, 255, 0.58);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-settings-slot {
    border-color: rgba(255, 255, 255, 0.12);
    background: transparent;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-file-block {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-thumb-button {
    border-color: rgba(255, 255, 255, 0.14);
    background: #151515;
    color: rgba(255, 255, 255, 0.72);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-thumb-button:hover,
  .menu-settings-modal--site-shell .menu-builder-photo-thumb-button:focus-within {
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-file-meta {
    color: rgba(255, 255, 255, 0.5);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-file-meta span:first-child {
    color: rgba(255, 255, 255, 0.72);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-file-meta.is-error,
  .menu-settings-modal--site-shell .menu-builder-photo-tool-status.is-error {
    color: #ff8a80;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-tool-status {
    color: rgba(255, 255, 255, 0.5);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-tool-status.is-success {
    color: #8fd9a8;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-tool-status.is-loading {
    color: rgba(255, 255, 255, 0.68);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-optimize-button {
    border-color: rgba(255, 255, 255, 0.14);
    background: #242424;
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-photo-optimize-button:not(:disabled):hover,
  .menu-settings-modal--site-shell .menu-builder-photo-optimize-button:not(:disabled):focus-visible {
    border-color: rgba(255, 255, 255, 0.32);
  }

  .menu-settings-modal--site-shell .menu-builder-photo-optimize-button:disabled {
    color: rgba(255, 255, 255, 0.32);
  }

  .menu-settings-modal--site-shell .menu-builder-version.is-published {
    border-color: rgba(72, 181, 126, 0.38);
    background: #1e2c25;
  }

  .menu-settings-modal--site-shell .menu-builder-empty,
  .menu-settings-modal--site-shell .menu-builder-version-empty {
    border-color: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.52);
  }

  .menu-settings-modal--site-shell .menu-builder-preview-frame,
  .menu-settings-modal--site-shell .menu-builder-preview-topline,
  .menu-settings-modal--site-shell .menu-builder-preview-dropdown {
    border-color: rgba(255, 255, 255, 0.12);
    background: #242424;
  }

  .menu-settings-modal--site-shell .menu-builder-preview-topline strong,
  .menu-settings-modal--site-shell .menu-builder-preview-link,
  .menu-settings-modal--site-shell .menu-builder-preview-tree-row span {
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-preview-tree-row small {
    color: rgba(255, 255, 255, 0.48);
  }

  .menu-settings-modal--site-shell .menu-builder-desktop-preview,
  .menu-settings-modal--site-shell .menu-builder-mobile-preview {
    background: #181818;
  }

  .menu-settings-modal--site-shell .menu-builder-desktop-preview-grid {
    background: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-brand-weight-panel {
    border-color: rgba(255, 255, 255, 0.14);
    background: #202020;
    box-shadow: none;
    color: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-brand-weight-head span,
  .menu-settings-modal--site-shell .menu-builder-brand-weight-head strong,
  .menu-settings-modal--site-shell .menu-builder-brand-weight-count,
  .menu-settings-modal--site-shell .menu-builder-brand-weight-empty {
    color: rgba(255, 255, 255, 0.58);
  }

  .menu-settings-modal--site-shell .menu-builder-brand-weight-table {
    border-color: transparent;
    box-shadow: none;
  }

  .menu-settings-modal--site-shell .menu-builder-brand-weight-columns {
    background: transparent;
  }

  .menu-settings-modal--site-shell .menu-builder-brand-weight-column {
    border-left-color: rgba(255, 255, 255, 0.16);
  }

  .menu-settings-modal--site-shell .menu-builder-brand-weight-row {
    border-color: transparent;
    background: transparent;
  }

  .menu-settings-modal--site-shell .menu-builder-brand-weight-row.is-selected {
    background: rgba(110, 67, 210, 0.18);
  }

  .menu-settings-modal--site-shell .menu-builder-desktop-preview-topbar {
    background: #fff;
  }

  .menu-settings-modal--site-shell .menu-builder-desktop-preview-topnav {
    color: #090811;
  }

  .menu-settings-modal--site-shell .menu-builder-mobile-preview-devices {
    padding: 0 10px 10px;
  }

  .menu-settings-modal--site-shell :is(
    .menu-builder-source-list,
    .menu-builder-structure,
    .menu-builder-properties,
    .menu-builder-version-list,
    .menu-builder-desktop-preview,
    .menu-builder-mobile-preview
  )::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  .menu-settings-modal--site-shell :is(
    .menu-builder-source-list,
    .menu-builder-structure,
    .menu-builder-properties,
    .menu-builder-version-list,
    .menu-builder-desktop-preview,
    .menu-builder-mobile-preview
  )::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.24);
  }
}

@media (max-width: 900px) {
  body {
    padding: 0;
  }

  .app-shell {
    min-height: 100vh;
    border-radius: 0;
  }

  .topbar,
  .editor-header,
  .media-controls,
  .optimizer-controls,
  .bulk-bar {
    grid-template-columns: 1fr;
    display: grid;
  }

  .topbar,
  .editor-area,
  .product-sidebar,
  .catalog-view,
  .dashboard-view,
  .bfi-view,
  .kanban-view {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar {
    padding-top: 16px;
  }

  .metric-strip,
  .catalog-head,
  .catalog-layout,
  .settings-layout,
  .catalog-filters,
  .kanban-control-panel,
  .kanban-create-form,
  .kanban-summary,
  .kanban-board {
    grid-template-columns: 1fr;
  }

  .kanban-title-block h2 {
    font-size: 26px;
  }

  .kanban-column {
    min-height: 0;
  }

  .kanban-column-body {
    min-height: 120px;
  }

  .settings-view.settings-view-has-category-menu .settings-layout {
    grid-template-columns: 1fr;
  }

  .catalog-head .sync-panel {
    grid-column: auto;
  }

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

  .catalog-head-actions {
    display: grid;
    grid-column: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .metric-card,
  .sync-filter-card {
    min-width: 0;
    padding: 13px 14px;
  }

  .topbar-actions {
    grid-column: auto;
    grid-row: auto;
    justify-self: start;
    margin-right: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    column-gap: 12px;
    row-gap: 0;
    width: 100%;
    align-items: stretch;
  }

  .topbar-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .topbar-sync-card {
    flex-basis: auto;
    border-right: 1px solid rgba(255, 255, 255, 0.68);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    width: 100%;
  }

  .topbar-actions .topbar-action-button {
    border-radius: 0;
    width: 100%;
  }

  .topbar-actions #createProduct,
  .topbar-sync-card {
    grid-column: 1 / -1;
  }

  .topbar-actions #siteExchange {
    grid-column: 1;
    border-radius: 0 0 8px 8px;
  }

  .topbar-actions #siteExchangeFilterButton {
    display: none;
  }

  .topbar-actions .topbar-action-button + .topbar-action-button {
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
  }

  .topbar-settings {
    grid-column: 2;
    justify-self: end;
    margin-left: 0;
    min-height: 56px;
    width: 44px;
  }

  .topbar-settings-button {
    width: 44px;
    height: 100%;
  }

  .settings-menu {
    width: min(270px, calc(100vw - 32px));
    min-width: 0;
  }

  .logo-menu {
    top: calc(100% + 10px);
    left: 0;
    width: min(270px, calc(100vw - 32px));
  }

  .category-menu {
    position: static;
  }

  .category-menu-list {
    grid-template-columns: 1fr;
    max-height: 360px;
  }

  .accounting-heading h2 {
    font-size: 27px;
  }

  .bulk-actions {
    align-items: stretch;
    display: grid;
  }

  .field-grid,
  .field-grid.compact,
  .geometry-layout {
    grid-template-columns: 1fr;
  }

  .media-panel .panel-title {
    align-items: stretch;
    flex-direction: column;
  }

  .media-panel .panel-title .optimize-all-button {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  .geometry-size-picker {
    width: 100%;
  }

  .geometry-panel .panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .geometry-refresh-button {
    width: auto;
  }

  .variant-summary-panel .panel-title,
  .spec-details-panel .panel-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .spec-gpt-button {
    width: fit-content;
  }

  .field-label-row {
    align-items: stretch;
    flex-direction: column;
  }

  .content-tabs-row,
  .content-left-controls,
  .description-editor-head {
    align-items: stretch;
    flex-direction: column;
  }

  .content-tabs,
  .content-left-controls {
    width: 100%;
  }

  .content-left-controls {
    flex: 0 1 auto;
  }

  .content-description-actions {
    margin-left: 0;
  }

  .description-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .description-format-toolbar,
  .description-mode-tabs {
    width: 100%;
  }

  .description-format-button,
  .description-mode-tab {
    flex: 1;
  }

  .description-preview {
    padding: 14px 15px;
    font-size: 15px;
  }

  .field-action-button {
    width: 100%;
  }

  .gpt-prompt-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .gpt-prompt-status {
    text-align: left;
  }

  .variant-panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .variant-row {
    grid-template-columns: minmax(42px, 0.35fr) minmax(0, 1fr);
  }

  .variant-row-head {
    display: none;
  }

  .variant-row-head + .variant-row {
    border-top: 0;
    padding-top: 8px;
  }

  .variant-row .variant-barcode,
  .variant-row .variant-onec-id,
  .variant-row .variant-base-price,
  .variant-row em,
  .variant-row b {
    grid-column: 2;
  }

  .variant-row .variant-onec-id {
    display: none;
  }

  .variant-row .variant-warehouse-stock {
    grid-column: 2;
  }

  .variant-row .variant-warehouse-stock.is-empty {
    display: none;
  }

  .variant-row .variant-warehouse-stock::before {
    content: attr(data-label) " ";
    color: var(--muted);
    font-weight: 600;
  }

  .wide {
    grid-column: auto;
  }
}

/* codex-catalog-menu-align-top-20260525 */
@media (min-width: 1241px) {
  body:has(#catalogView:not(.is-hidden)) .catalog-layout {
    margin-top: -122px;
  }

  body:has(#catalogView:not(.is-hidden)) .catalog-panel {
    margin-top: 122px;
  }
}

/* codex-catalog-panel-flat-container-20260526 */
@media (min-width: 901px) {
  body:has(#catalogView:not(.is-hidden)) .catalog-panel {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    backdrop-filter: none;
  }
}

/* codex-shared-catalog-editor-topbar-20260526 */
@media (min-width: 901px) {
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar {
    grid-template-columns: minmax(250px, 300px) minmax(340px, 1fr) minmax(230px, 320px) auto;
    border-bottom-color: rgba(9, 8, 17, 0.12);
    background: #fff;
    box-shadow: 0 14px 34px rgba(9, 8, 17, 0.08);
    align-items: center;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-brand {
    grid-column: 1;
    grid-row: 1;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-search {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: 640px;
    margin-left: 0;
    justify-self: start;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget {
    grid-column: 3;
    grid-row: 1;
    justify-self: stretch;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions {
    grid-column: 4;
    grid-row: 1;
    display: inline-flex;
    width: auto;
    justify-self: end;
    align-items: center;
    flex-wrap: nowrap;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-logo-wordmark {
    color: #090811;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-catalog-button {
    color: #090811;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-catalog-button:hover,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-catalog-button:focus-visible {
    color: #090811;
    opacity: 0.72;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-catalog-button:focus-visible {
    outline: 2px solid rgba(9, 8, 17, 0.42);
    outline-offset: 2px;
  }

  /* codex-contentds-light-topbar-icons-black-20260531 */
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) :is(
    .topbar-catalog-button,
    .topbar-kanban-add-column-button,
    .topbar-column-filter-button,
    .topbar-settings-button,
    .topbar-icon-button
  ),
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) :is(
    .topbar-catalog-button,
    .topbar-kanban-add-column-button,
    .topbar-column-filter-button,
    .topbar-settings-button,
    .topbar-icon-button
  ):is(:hover, :focus-visible, .is-active, [aria-expanded="true"]) {
    color: #090811;
  }

  /* codex-contentds-light-topbar-auth-avatar-desktop-20260531 */
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-login-button {
    display: inline-flex;
    min-height: 56px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #090811;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.18s ease, opacity 0.18s ease;
    white-space: nowrap;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-login-button:hover,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-login-button:focus-visible {
    color: rgba(9, 8, 17, 0.72);
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-login-button:focus-visible {
    outline: 2px solid rgba(9, 8, 17, 0.42);
    outline-offset: 2px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-login-button.is-authenticated {
    width: 56px;
    padding: 0 7px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-user-avatar {
    display: inline-flex;
    width: 42px;
    height: 42px;
    border: 2px solid rgba(9, 8, 17, 0.42);
    border-radius: 50%;
    background: rgba(9, 8, 17, 0.06);
    color: #090811;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 17px;
    font-weight: 760;
    line-height: 1;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-user-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* codex-topbar-search-white-normal-desktop-20260530 */
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-search input {
    /* codex-topbar-search-border-ccc-desktop-20260530 */
    border-color: #ccc;
    background: #fff;
    font-weight: 400;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-search input:focus {
    border-color: #ccc;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-search input::placeholder {
    font-weight: 400;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget {
    display: grid;
    border-color: #e2e2e7;
    background: #f6f6f7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    color: #090811;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget:hover,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget:focus-visible {
    border-color: #d6d6dc;
    background: #f1f1f4;
    color: #090811;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget:focus-visible {
    outline: 2px solid rgba(9, 8, 17, 0.42);
    outline-offset: 2px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget-copy span {
    color: rgba(9, 8, 17, 0.58);
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget-pill {
    background: #ececef;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-sync-card {
    border-color: #e2e2e7;
    border-right: 0;
    background: #f6f6f7;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #createProduct {
    border-color: #dedee4;
    background: #ececef;
    color: #090811;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74);
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #createProduct:hover,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #createProduct:focus-visible {
    background: #f4f4f6;
    color: #090811;
    transform: none;
    box-shadow: none;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #createProduct:focus-visible {
    outline: 2px solid rgba(9, 8, 17, 0.24);
    outline-offset: 2px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchange,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchangeFilterButton {
    border-color: #090811;
    background: #090811;
    color: #fff;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchange:hover,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchange:focus-visible,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchangeFilterButton:hover,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchangeFilterButton:focus-visible {
    background: #12101d;
    color: #fff;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchange:focus-visible,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions #siteExchangeFilterButton:focus-visible {
    outline: 2px solid rgba(9, 8, 17, 0.24);
    outline-offset: 2px;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar {
    grid-template-columns: minmax(180px, 230px) minmax(260px, 1fr) minmax(168px, 220px) auto;
    gap: 10px;
    padding-right: 18px;
    padding-left: 18px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-search input {
    min-height: 48px;
    padding-left: 58px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-search-icon {
    left: 8px;
    width: 38px;
    height: 38px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    min-height: 48px;
    padding: 7px 8px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget-score {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget-copy strong {
    font-size: 12px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget-copy span {
    font-size: 10px;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-health-widget-pill {
    display: none;
  }

  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar-actions {
    gap: 0;
    min-width: max-content;
  }
}

/* codex-content-blocks-white-20260526 */
@media (min-width: 901px) {
  body:has(#catalogView:not(.is-hidden)) .category-menu,
  body:has(#catalogView:not(.is-hidden)) .metric-card,
  body:has(#catalogView:not(.is-hidden)) .sync-panel > div,
  body:has(#catalogView:not(.is-hidden)) .sync-panel > button,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card {
    background: #fff;
  }

  body:has(#catalogView:not(.is-hidden)) .catalog-table tbody tr {
    background: #fff;
  }

  body:has(#editorView:not(.is-hidden)) .panel:not(.geometry-panel):not(.validation-panel) {
    background: #fff;
  }
}

/* codex-content-underlay-eee-20260526 */
@media (min-width: 901px) {
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .app-main {
    background: #eee;
  }

  body:has(#catalogView:not(.is-hidden)) .catalog-table-wrap,
  body:has(#catalogView:not(.is-hidden)) .catalog-table,
  body:has(#catalogView:not(.is-hidden)) .catalog-table tbody,
  body:has(#catalogView:not(.is-hidden)) .catalog-table tbody tr {
    background: #f9f9f9;
  }

  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:hover,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:focus-visible,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:active,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card.is-active,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:hover,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:focus-visible,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:active,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card.is-active {
    background: #090811;
    border-color: #090811;
    color: #fff;
  }

  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:hover span,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:focus-visible span,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:active span,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card.is-active span,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:hover p,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:focus-visible p,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:active p,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card.is-active p {
    color: rgba(255, 255, 255, 0.74);
  }

  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:hover strong,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:focus-visible strong,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card:active strong,
  body:has(#catalogView:not(.is-hidden)) .sync-filter-card.is-active strong,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:hover span,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:focus-visible span,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card:active span,
  body:has(#catalogView:not(.is-hidden)) .metric-filter-card.is-active span {
    color: #fff;
  }
}

/* codex-product-validation-purple-20260526 */
@media (min-width: 901px) {
  body:has(#editorView:not(.is-hidden)) .validation-panel {
    border-color: rgba(255, 255, 255, 0.2);
    background:
      linear-gradient(135deg, var(--purple) 0%, var(--purple-dark) 100%),
      var(--purple);
    color: #fff;
    box-shadow: 0 22px 54px rgba(65, 32, 151, 0.32);
  }
}

/* codex-contentds-no-shadows-20260526 */
@media (min-width: 901px) {
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .app-main,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .app-main *,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar,
  body:has(:is(#catalogView, #editorView):not(.is-hidden)) .topbar * {
    box-shadow: none !important;
  }
}

@media (min-width: 901px) {
  /* codex-contentds-dsd-room-admin-desktop-20260530 */
  body:has(#roomView:not(.is-hidden)) .app-main {
    background: #eeeeee;
    padding: 0;
  }

  body:has(#roomView:not(.is-hidden)) .app-shell {
    border: 0;
  }

  .room-view {
    min-height: calc(100vh - 88px);
  }

  .room-page {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    min-height: calc(100vh - 88px);
    color: #202124;
  }

  /* codex-contentds-crm-contained-scroll-desktop-20260617 */
  body.is-crm-view-active:has(#roomView:not(.is-hidden)) {
    --contentds-room-topbar-height: 95px;
    overflow: hidden;
  }

  @media (max-width: 1740px) {
    body.is-crm-view-active:has(#roomView:not(.is-hidden)) {
      --contentds-room-topbar-height: 167px;
    }
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .app-shell {
    height: calc(100vh - 56px);
    overflow: hidden;
    border-radius: 0;
    box-shadow: none;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .app-main {
    height: calc(100% - var(--contentds-room-topbar-height, 95px));
    min-height: 0;
    overflow: hidden;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-view,
  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-page,
  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-main {
    height: 100%;
    min-height: 0;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-page,
  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-main {
    overflow: hidden;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-sidebar {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-main-page {
    height: 100%;
    min-height: 0;
    overflow-y: auto;
  }

  .room-sidebar {
    position: sticky;
    top: 28px;
    align-self: start;
    min-height: calc(100vh - 88px);
    padding: 24px 18px;
    background: #1c1d20;
    color: #ffffff;
  }

  .room-sidebar-brand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px 28px;
    text-transform: lowercase;
  }

  .room-sidebar-brand span {
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
  }

  .room-sidebar-brand strong {
    color: #ff5a00;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
  }

  .room-nav {
    display: grid;
    gap: 0;
  }

  .room-nav button,
  .room-site-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.76);
    font: inherit;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .room-nav button + button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
  }

  .room-nav button.is-active {
    background: transparent;
    color: #ffffff;
  }

  .room-nav button:hover:not(.is-active),
  .room-nav button:focus-visible:not(.is-active),
  .room-site-link:hover,
  .room-site-link:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    outline: none;
  }

  .room-site-link {
    margin-top: 12px;
  }

  .room-main {
    min-width: 0;
    padding: 26px 28px 36px;
    background: #202124;
    color: #f4f5f7;
  }

  .room-main-page {
    min-width: 0;
    background: #202124;
    color: #f4f5f7;
  }

  .room-main-page--empty {
    min-height: calc(100vh - 150px);
  }

  /* codex-contentds-crm-schedule-old-ui-desktop-20260617 */
  body:has(#roomView:not(.is-hidden) .room-main-page[data-room-page="schedule"]:not(.is-hidden)) .room-main {
    padding: 0;
    background: #202124;
  }

  .crm-schedule-page {
    min-height: calc(100vh - 88px);
  }

  .crm-schedule-shell {
    min-height: calc(100vh - 88px);
    padding: 24px 26px 30px;
    background: #202124;
    color: #f4f5f7;
  }

  .crm-schedule-toolbar,
  .crm-schedule-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }

  .crm-schedule-toolbar {
    margin-bottom: 16px;
  }

  .crm-schedule-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: #ff5a00;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .crm-schedule-toolbar h2 {
    margin: 0;
    color: #ffffff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.1;
  }

  .crm-schedule-month-controls,
  .crm-schedule-mode-group {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    background: #272727;
  }

  .crm-schedule-nav-button,
  .crm-schedule-mode-button {
    min-height: 36px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    background: transparent;
    color: #f4f5f7;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }

  .crm-schedule-nav-button {
    min-width: 42px;
    padding: 0 12px;
    font-size: 20px;
    line-height: 1;
  }

  .crm-schedule-nav-button[data-crm-schedule-nav="today"] {
    min-width: 88px;
    font-size: 13px;
  }

  .crm-schedule-mode-button {
    padding: 0 14px;
  }

  .crm-schedule-nav-button:last-child,
  .crm-schedule-mode-button:last-child {
    border-right: 0;
  }

  .crm-schedule-nav-button:hover,
  .crm-schedule-nav-button:focus-visible,
  .crm-schedule-mode-button:hover,
  .crm-schedule-mode-button:focus-visible,
  .crm-schedule-mode-button.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    outline: none;
  }

  .crm-schedule-mode-button.is-active {
    box-shadow: inset 0 -2px 0 #ff5a00;
  }

  .crm-schedule-controls {
    margin-bottom: 14px;
  }

  .crm-schedule-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(244, 245, 247, 0.72);
    font-size: 13px;
    font-weight: 700;
  }

  .crm-schedule-filter select {
    width: 220px;
    min-height: 36px;
    padding: 0 34px 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 4px;
    background: #272727;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
  }

  .crm-schedule-filter-note {
    min-width: 260px;
    color: rgba(244, 245, 247, 0.6);
    font-size: 13px;
    text-align: right;
  }

  .crm-schedule-legend {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 12px;
    color: rgba(244, 245, 247, 0.72);
    font-size: 12px;
    font-weight: 700;
  }

  .crm-schedule-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }

  .crm-schedule-legend i {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: #ffffff;
  }

  .crm-schedule-legend i.is-work {
    color: #84bb01;
  }

  .crm-schedule-legend i.is-off {
    color: #eb5757;
  }

  .crm-schedule-legend i.is-vacation {
    color: #2f80ed;
  }

  .crm-schedule-legend i.is-sickday {
    color: #f2c94c;
  }

  .crm-schedule-legend i.is-home {
    color: #84bb01;
    background: #84bb01;
  }

  .crm-schedule-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #272727;
  }

  .crm-schedule-weekday {
    min-height: 34px;
    padding: 10px 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(244, 245, 247, 0.68);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .crm-schedule-weekday:nth-child(7n) {
    border-right: 0;
  }

  .crm-schedule-day {
    position: relative;
    min-height: 136px;
    padding: 10px 10px 9px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: #202124;
  }

  .crm-schedule-day:nth-child(7n) {
    border-right: 0;
  }

  .crm-schedule-day--empty {
    background: #242528;
  }

  .crm-schedule-day.is-today {
    background: #242a24;
  }

  .crm-schedule-day.is-work {
    background: rgba(132, 187, 1, 0.14);
  }

  .crm-schedule-day.is-off {
    background: rgba(235, 87, 87, 0.12);
  }

  .crm-schedule-day.is-vacation {
    background: rgba(47, 128, 237, 0.14);
  }

  .crm-schedule-day.is-sickday {
    background: rgba(242, 201, 76, 0.14);
  }

  .crm-schedule-day.is-home {
    background: rgba(132, 187, 1, 0.18);
  }

  .crm-schedule-day-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
  }

  .crm-schedule-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: rgba(244, 245, 247, 0.92);
    font-size: 13px;
    font-weight: 800;
  }

  .crm-schedule-day.is-today .crm-schedule-day-number {
    background: #84bb01;
    color: #101214;
  }

  .crm-schedule-workers {
    display: grid;
    gap: 7px;
  }

  .crm-schedule-worker {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-height: 35px;
  }

  .crm-schedule-worker-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    padding: 0;
    border: 2px solid #eb5757;
    border-radius: 50%;
    background-color: var(--crm-schedule-worker-color, #ffffff);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #111111;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
  }

  .crm-schedule-worker.is-work .crm-schedule-worker-avatar {
    border-color: #84bb01;
  }

  .crm-schedule-worker.is-home .crm-schedule-worker-avatar {
    border-color: #84bb01;
  }

  .crm-schedule-worker.is-home .crm-schedule-worker-avatar::after {
    content: "⌂";
    position: absolute;
    right: -5px;
    bottom: -7px;
    color: #84bb01;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
  }

  .crm-schedule-worker.is-off .crm-schedule-worker-avatar {
    border-color: #eb5757;
  }

  .crm-schedule-worker.is-vacation .crm-schedule-worker-avatar {
    border-color: #2f80ed;
  }

  .crm-schedule-worker.is-sickday .crm-schedule-worker-avatar {
    border-color: #f2c94c;
  }

  .crm-schedule-worker-avatar:hover,
  .crm-schedule-worker-avatar:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.42);
    outline-offset: 2px;
  }

  .crm-schedule-worker-meta {
    display: grid;
    min-width: 0;
    gap: 1px;
  }

  .crm-schedule-worker-name,
  .crm-schedule-worker-time,
  .crm-schedule-worker-label,
  .crm-schedule-worker-extra {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .crm-schedule-worker-name {
    color: #f4f5f7;
    font-size: 12px;
    font-weight: 700;
  }

  .crm-schedule-worker-time {
    color: rgba(244, 245, 247, 0.64);
    font-size: 11px;
    font-weight: 700;
  }

  .crm-schedule-worker-label {
    color: rgba(244, 245, 247, 0.5);
    font-size: 11px;
    font-weight: 700;
  }

  .crm-schedule-worker.is-work .crm-schedule-worker-time,
  .crm-schedule-worker.is-home .crm-schedule-worker-time {
    color: #84bb01;
  }

  .crm-schedule-worker.is-vacation .crm-schedule-worker-label {
    color: #80b5ff;
  }

  .crm-schedule-worker.is-sickday .crm-schedule-worker-label {
    color: #f2c94c;
  }

  .crm-schedule-worker-extra {
    color: rgba(244, 245, 247, 0.44);
    font-size: 10px;
    font-weight: 700;
  }

  .room-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
  }

  .room-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #ff5a00;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .room-header h2 {
    margin: 0;
    color: #f4f5f7;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
  }

  .room-header p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
  }

  .room-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
  }

  .room-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #2b2d31;
    color: #f4f5f7;
    cursor: pointer;
  }

  .room-icon-button svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .room-icon-button:hover,
  .room-icon-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    outline: none;
  }

  .room-action-primary {
    min-height: 42px;
    border-radius: 8px;
    background: #ff5a00;
    color: #ffffff;
  }

  .room-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 12px;
  }

  .room-kpi-card,
  .room-panel {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1c1d20;
  }

  .room-kpi-card {
    min-height: 138px;
    padding: 18px;
  }

  .room-kpi-card span,
  .room-panel-head span,
  .room-status-grid span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .room-kpi-card strong {
    display: block;
    margin-top: 18px;
    color: #f4f5f7;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
  }

  .room-kpi-card p {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
  }

  .room-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
    gap: 12px;
  }

  .room-panel {
    min-width: 0;
    padding: 18px;
  }

  .room-panel--wide {
    grid-column: 1 / -1;
  }

  .room-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
  }

  .room-panel-head h3 {
    margin: 6px 0 0;
    color: #f4f5f7;
    font-size: 18px;
    line-height: 1.2;
  }

  .room-status-badge {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: #2b2d31;
    color: #f4f5f7;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }

  .room-status-badge.is-success {
    background: #e5f5eb;
    color: #166534;
  }

  .room-status-badge.is-error {
    background: #fff0ed;
    color: #b42318;
  }

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

  .room-status-grid div {
    min-height: 96px;
    padding: 14px;
    border-radius: 8px;
    background: #2b2d31;
  }

  .room-status-grid strong {
    display: block;
    margin-top: 12px;
    color: #f4f5f7;
    font-size: 18px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .room-brand-list,
  .room-log-list {
    display: grid;
    gap: 8px;
  }

  .room-brand-row,
  .room-log-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #2b2d31;
  }

  .room-brand-row {
    width: 100%;
    color: #f4f5f7;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .room-brand-row:hover,
  .room-brand-row:focus-visible {
    border-color: #ff5a00;
    outline: none;
  }

  .room-brand-row span {
    min-width: 0;
    overflow: hidden;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-brand-row strong {
    font-size: 16px;
  }

  .room-brand-row em {
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    font-style: normal;
  }

  .room-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .room-control-grid button {
    min-height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #2b2d31;
    color: #f4f5f7;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
  }

  .room-control-grid button:hover,
  .room-control-grid button:focus-visible {
    border-color: rgba(255, 255, 255, 0.28);
    background: #313338;
    outline: none;
  }

  .room-log-item {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
  }

  .room-log-item strong,
  .room-log-item p {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-log-item strong {
    display: block;
    color: #f4f5f7;
    font-size: 14px;
  }

  .room-log-item p {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
  }

  .room-log-item > span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    white-space: nowrap;
  }

  .room-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
  }

  /* codex-contentds-room-orders-main-container-desktop-20260601 */
  body:has(#roomView:not(.is-hidden) .room-main-page[data-room-page="orders"]:not(.is-hidden)) .room-main {
    padding: 0;
    background: #202124;
  }

  /* codex-contentds-room-orders-sticky-header-desktop-20260601 */
  body:has(#roomView:not(.is-hidden) .room-main-page[data-room-page="orders"]:not(.is-hidden)) {
    --contentds-room-topbar-height: 95px;
  }

  @media (max-width: 1740px) {
    body:has(#roomView:not(.is-hidden) .room-main-page[data-room-page="orders"]:not(.is-hidden)) {
      --contentds-room-topbar-height: 167px;
    }
  }

  .room-main-page--orders,
  .room-main-page[data-room-page="orders"] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-height: calc(100vh - 150px);
    overflow: hidden;
    padding: 0 32px 36px;
    background: #202124;
    color: #f4f5f7;
  }

  .room-orders-shell {
    display: contents;
  }

  .room-orders-status {
    min-height: 20px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
  }

  .room-orders-status:empty {
    display: none;
  }

  .room-orders-status.is-error {
    color: #ffb4a8;
  }

  .room-orders-list {
    display: grid;
    gap: 0;
    min-height: 0;
    margin-right: -32px;
    margin-left: -32px;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
    --contentds-room-orders-column-count: 13;
    --contentds-room-orders-column-width: 7.6923076923%;
    --contentds-room-orders-number-width: 5.3846153846%;
    --contentds-room-orders-organization-width: 11.5384615385%;
    --contentds-room-orders-status-width: 10%;
    --contentds-room-orders-products-width: 3.8461538462%;
    --contentds-room-orders-min-width: 1274px;
    --contentds-room-orders-grid:
      minmax(0, var(--contentds-room-orders-number-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-organization-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-status-width))
      minmax(0, var(--contentds-room-orders-products-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-column-width))
      minmax(0, var(--contentds-room-orders-column-width));
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-orders-list {
    --contentds-room-orders-min-width: 920px;
    --contentds-room-orders-grid:
      minmax(82px, 0.7fr)
      minmax(150px, 1.45fr)
      minmax(134px, 1.2fr)
      minmax(78px, 0.65fr)
      minmax(86px, 0.72fr)
      minmax(132px, 1.15fr)
      minmax(124px, 1fr);
  }

  /* codex-contentds-room-orders-wide-tail-full-lines-desktop-20260602 */
  /* codex-contentds-room-orders-no-top-gap-full-lines-desktop-20260602 */
  /* codex-contentds-room-orders-center-align-font-desktop-20260602 */
  .room-orders-table-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: var(--contentds-room-orders-grid);
    align-items: center;
    gap: 0;
    min-width: calc(var(--contentds-room-orders-min-width) + 23px);
    min-height: 34px;
    padding: 0 23px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #202124;
    box-shadow: none;
  }

  .room-orders-table-head::before,
  .room-order-card-row::before {
    content: none;
    position: absolute;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
    background-repeat: no-repeat;
    background-size:
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%;
    background-position:
      5.3846153846% 0,
      13.0769230769% 0,
      24.6153846154% 0,
      32.3076923077% 0,
      40% 0,
      47.6923076923% 0,
      55.3846153846% 0,
      63.0769230769% 0,
      73.0769230769% 0,
      76.9230769231% 0,
      84.6153846154% 0,
      92.3076923077% 0;
  }

  .room-orders-table-head::before {
    top: 0;
    right: 23px;
    bottom: 0;
    left: 0;
  }

  .room-orders-table-head > span {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: center;
    min-width: 0;
    padding: 0 4px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.58);
    font-size: 11px;
    font-weight: 800;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
  }

  .room-orders-table-head > span:first-child {
    padding-left: 0;
  }

  .room-orders-table-head > span:nth-child(1),
  .room-orders-table-head > span:nth-child(2),
  .room-orders-table-head > span:nth-child(3),
  .room-orders-table-head > span:nth-child(4),
  .room-orders-table-head > span:nth-child(5),
  .room-orders-table-head > span:nth-child(6),
  .room-orders-table-head > span:nth-child(7),
  .room-orders-table-head > span:nth-child(8),
  .room-orders-table-head > span:nth-child(9),
  .room-orders-table-head > span:nth-child(10),
  .room-orders-table-head > span:nth-child(11),
  .room-orders-table-head > span:nth-child(12),
  .room-orders-table-head > span:nth-child(13) {
    justify-content: center;
    text-align: center;
  }

  .room-orders-table-head > span:nth-child(13) {
    justify-content: flex-end;
    padding-right: 0;
    text-align: right;
  }

  .room-orders-table-head > span:nth-child(10) {
    padding-right: 1px;
    padding-left: 1px;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-orders-table-head > span:nth-child(7) {
    justify-content: flex-end;
    padding-right: 0;
    text-align: right;
  }

  body.is-crm-view-active:has(#roomView:not(.is-hidden)) .room-orders-table-head > span:nth-child(4) {
    padding-right: 1px;
    padding-left: 1px;
  }

  .room-orders-table-head > span:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .room-orders-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: #202124;
    color: rgba(255, 255, 255, 0.58);
    font-weight: 700;
  }

  .room-orders-empty[hidden] {
    display: none;
  }

  /* codex-contentds-room-dealers-table-desktop-20260603 */
  body:has(#roomView:not(.is-hidden) .room-main-page[data-room-page="dealers"]:not(.is-hidden)) .room-main {
    padding: 0;
    background: #202124;
  }

  body:has(#roomView:not(.is-hidden) .room-main-page[data-room-page="dealers"]:not(.is-hidden)) {
    --contentds-room-topbar-height: 95px;
  }

  @media (max-width: 1740px) {
    body:has(#roomView:not(.is-hidden) .room-main-page[data-room-page="dealers"]:not(.is-hidden)) {
      --contentds-room-topbar-height: 167px;
    }
  }

  .room-main-page--dealers,
  .room-main-page[data-room-page="dealers"] {
    min-height: calc(100vh - 150px);
    padding: 0 32px 36px;
    background: #202124;
    color: #f4f5f7;
  }

  .room-dealers-status {
    min-height: 20px;
    margin-bottom: 12px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
  }

  .room-dealers-status:empty {
    display: none;
  }

  .room-dealers-status.is-error {
    color: #ffb4a8;
  }

  .room-dealers-list {
    display: grid;
    gap: 0;
    margin-right: -32px;
    margin-left: -32px;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
  }

  .room-dealers-table-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns:
      72px
      minmax(150px, 1.05fr)
      minmax(130px, 0.9fr)
      minmax(72px, 90px)
      minmax(132px, 0.9fr)
      minmax(118px, 126px)
      minmax(150px, 1fr)
      minmax(148px, 1fr);
    align-items: center;
    gap: 0;
    min-width: 0;
    min-height: 34px;
    padding: 0 23px 0 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: #202124;
    box-shadow: none;
  }

  .room-dealers-table-head > span {
    position: relative;
    display: flex;
    align-self: stretch;
    align-items: center;
    min-width: 0;
    padding: 0 6px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 800;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
  }

  .room-dealers-table-head > span:first-child {
    justify-content: center;
    padding-left: 0;
    text-align: center;
  }

  .room-dealers-table-head > span:nth-child(2),
  .room-dealers-table-head > span:nth-child(3),
  .room-dealers-table-head > span:nth-child(5),
  .room-dealers-table-head > span:nth-child(7),
  .room-dealers-table-head > span:nth-child(8) {
    padding-left: 18px;
  }

  .room-dealers-table-head > span:nth-child(4),
  .room-dealers-table-head > span:nth-child(6) {
    justify-content: center;
    text-align: center;
  }

  .room-dealers-empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: #202124;
    color: rgba(255, 255, 255, 0.58);
    font-weight: 700;
  }

  .room-dealers-empty[hidden] {
    display: none;
  }

  .room-dealer-card {
    position: relative;
    display: grid;
    gap: 12px;
    padding: 14px 23px 14px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.16s ease, transform 0.16s ease;
  }

  .room-dealer-card:hover,
  .room-dealer-card:focus-visible {
    background: rgba(255, 255, 255, 0.03);
    outline: none;
  }

  .room-dealer-card:active {
    transform: translateY(1px);
  }

  .room-dealer-card:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .room-dealer-card + .room-dealer-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .room-dealer-card-row {
    position: relative;
    display: grid;
    grid-template-columns:
      72px
      minmax(150px, 1.05fr)
      minmax(130px, 0.9fr)
      minmax(72px, 90px)
      minmax(132px, 0.9fr)
      minmax(118px, 126px)
      minmax(150px, 1fr)
      minmax(148px, 1fr);
    align-items: stretch;
    gap: 0;
    min-width: 0;
  }

  .room-dealers-table-head > span:not(:first-child)::before,
  .room-dealer-card-row > :not(:first-child)::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .room-dealer-card-row > * {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 20px;
    padding: 0 6px;
    overflow: hidden;
    color: #f4f5f7;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
  }

  .room-dealer-card-row > :first-child {
    padding-left: 0;
  }

  .room-dealer-card-cell--logo {
    justify-content: center;
    min-height: 44px;
    padding-right: 12px;
  }

  .room-dealer-card-logo {
    display: inline-grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #f4f5f7;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    overflow: hidden;
  }

  .room-dealer-card-logo.has-image {
    background: #000;
  }

  .room-dealer-card-logo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }

  .room-dealer-card-cell--company,
  .room-dealer-card-cell--store,
  .room-dealer-card-cell--contact,
  .room-dealer-card-cell--email,
  .room-dealer-card-cell--website {
    padding-left: 18px;
    text-align: left;
  }

  .room-dealer-card-cell--city,
  .room-dealer-card-cell--phone {
    justify-content: center;
    text-align: center;
  }

  /* codex-contentds-room-dealer-modal-desktop-20260603 */
  .room-dealer-modal .site-exchange-filter-tabs {
    width: min(100%, 760px);
  }

  .room-dealer-modal-body {
    background: #222;
  }

  .room-dealer-modal-section {
    display: grid;
    height: 100%;
    min-height: 0;
    align-content: start;
    gap: 18px;
    padding: 20px 24px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  .room-dealer-modal-section::-webkit-scrollbar {
    width: 8px;
  }

  .room-dealer-modal-section::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .room-dealer-modal-section--card {
    align-content: stretch;
    overflow: hidden;
    padding: 16px 24px 20px;
  }

  .room-dealer-modal-card-form {
    display: grid;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    overflow: auto;
    padding-right: 4px;
    scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06);
    scrollbar-width: thin;
  }

  .room-dealer-modal-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(230px, 280px);
    gap: 14px 20px;
    align-items: start;
    min-height: 0;
  }

  .room-dealer-modal .dealer-card-fields {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .room-dealer-modal .site-exchange-filter-field {
    display: grid;
    gap: 4px;
  }

  .room-dealer-modal .site-exchange-filter-field span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
  }

  .room-dealer-modal-panel,
  .room-dealer-modal-condition-column {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 16px;
  }

  .room-dealer-modal-panel h4,
  .room-dealer-modal-condition-column h4 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }

  .room-dealer-modal-detail-list,
  .room-dealer-modal-condition-list {
    display: grid;
    gap: 8px;
    min-width: 0;
  }

  .room-dealer-modal-detail-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .room-dealer-modal-detail-row,
  .room-dealer-modal-condition-row {
    display: grid;
    min-width: 0;
    gap: 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 12px;
  }

  .room-dealer-modal-detail-row span,
  .room-dealer-modal-condition-row span,
  .room-dealer-modal-status-stack span,
  .room-dealer-modal-status-stack em,
  .room-dealer-modal-metric span,
  .room-dealer-modal-note {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .room-dealer-modal-detail-row strong,
  .room-dealer-modal-condition-row strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-dealer-modal-status-stack {
    display: grid;
    gap: 10px;
  }

  .room-dealer-modal-status-stack span {
    display: inline-flex;
    width: fit-content;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    padding: 0 11px;
    font-weight: 800;
  }

  .room-dealer-modal-status-stack strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-dealer-modal-status-stack em {
    min-width: 0;
    overflow: hidden;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-dealer-modal-field-value {
    display: flex;
    width: 100%;
    min-height: 32px;
    min-width: 0;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* codex-contentds-room-dealer-card-editable-livebase-v50-desktop-20260604 */
  .room-dealer-modal-field-control {
    display: block;
    width: 100%;
    min-height: 32px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    padding: 0 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    outline: none;
  }

  .room-dealer-modal-field-control:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
  }

  .room-dealer-modal-field-control::placeholder {
    color: rgba(255, 255, 255, 0.34);
  }

  .room-dealer-modal .dealer-card-logo-card {
    display: grid;
    gap: 12px;
    min-width: 0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    padding: 14px;
  }

  .room-dealer-modal .dealer-card-logo-preview {
    display: flex;
    aspect-ratio: 1;
    width: 100%;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: #1c1c1c;
    color: rgba(255, 255, 255, 0.46);
    font-size: 13px;
    font-weight: 650;
    line-height: 1.2;
  }

  .room-dealer-modal .dealer-card-logo-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
  }

  .room-dealer-modal .dealer-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 16px;
  }

  .room-dealer-modal-card-status {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 4px;
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
  }

  .room-dealer-modal-card-status strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-dealer-modal-card-status span {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.58);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-dealer-modal-card-status.is-success strong {
    color: #9be7b1;
  }

  .room-dealer-modal-card-status.is-error strong {
    color: #ffb4a8;
  }

  .room-dealer-modal-save {
    min-height: 36px;
    border-radius: 8px;
    padding: 0 18px;
    white-space: nowrap;
  }

  .room-dealer-modal-conditions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    min-height: 0;
  }

  .room-dealer-modal-analytics {
    display: grid;
    gap: 16px;
  }

  .room-dealer-modal-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
  }

  .room-dealer-modal-metric {
    display: grid;
    min-width: 0;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1c1c1c;
    padding: 16px;
  }

  .room-dealer-modal-metric strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-dealer-modal-note {
    margin: 0;
  }

  .room-dealer-modal-note--error {
    color: #ffb4a8;
  }

  @media (min-width: 901px) and (max-width: 1200px) {
    .room-dealer-modal-card-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .room-dealer-modal .dealer-card-logo-card {
      grid-column: 1 / -1;
      grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
      align-items: center;
    }
  }

  .room-order-card {
    position: relative;
    display: grid;
    gap: 0;
    min-width: var(--contentds-room-orders-min-width);
    padding: 14px 23px 14px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    transition: transform 0.16s ease;
  }

  .room-order-card::after {
    content: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: max(calc(100% - 23px), var(--contentds-room-orders-min-width));
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12)),
      linear-gradient(rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.12));
    background-position:
      5.3846153846% 0,
      13.0769230769% 0,
      24.6153846154% 0,
      32.3076923077% 0,
      40% 0,
      47.6923076923% 0,
      55.3846153846% 0,
      63.0769230769% 0,
      73.0769230769% 0,
      76.9230769231% 0,
      84.6153846154% 0,
      92.3076923077% 0;
    background-repeat: no-repeat;
    background-size:
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%,
      1px 100%;
    pointer-events: none;
  }

  .room-order-card:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .room-order-card + .room-order-card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .room-order-card:last-child::after {
    content: none;
  }

  .room-order-card:hover,
  .room-order-card:focus-visible {
    outline: none;
  }

  .room-order-card:active {
    transform: translateY(1px);
  }

  .room-order-card:has(.room-order-items-accordion.is-open) {
    gap: 0;
    padding-bottom: 0;
  }

  /* codex-contentds-room-order-row-separators-font-13-desktop-20260601 */
  .room-order-card-row {
    position: relative;
    display: grid;
    grid-template-columns: var(--contentds-room-orders-grid);
    align-items: stretch;
    gap: 0;
    min-width: var(--contentds-room-orders-min-width);
  }

  .room-order-card-row::before {
    top: -14px;
    right: 0;
    bottom: -26px;
    left: 0;
  }

  .room-order-card-row > * {
    position: relative;
    display: flex;
    align-items: center;
    align-self: stretch;
    min-height: 20px;
    padding: 0 6px;
    color: #f4f5f7;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    z-index: 1;
  }

  .room-order-card-row > :first-child {
    padding-left: 0;
  }

  .room-order-card-row > :not(:first-child)::before {
    content: none;
    position: absolute;
    top: -14px;
    bottom: -26px;
    left: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .room-order-card-cell,
  .room-order-card-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-field-cell {
    justify-content: stretch;
  }

  .room-order-text-field-cell {
    justify-content: stretch;
  }

  .room-order-field-dropdown-cell:has(.room-order-field-dropdown-control.is-open) {
    overflow: visible;
    z-index: 24;
  }

  .room-order-field-dropdown-control {
    position: relative;
    display: grid;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .room-order-field-dropdown-control.is-open {
    z-index: 25;
  }

  .room-order-field-dropdown-trigger {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #f4f5f7;
    padding: 0 7px;
    font: inherit;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
  }

  .room-order-field-dropdown-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-field-dropdown-trigger:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 1px;
  }

  .room-order-field-dropdown-control.is-saving .room-order-field-dropdown-trigger {
    opacity: 0.65;
    cursor: progress;
  }

  .room-order-field-dropdown-menu {
    text-align: left;
  }

  .room-order-field-select,
  .room-order-text-input {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 32px;
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    color: #f4f5f7;
    font: inherit;
    font-size: 12px;
    line-height: 18px;
  }

  .room-order-field-select {
    padding: 0 7px;
    text-align: center;
    text-align-last: center;
  }

  .room-order-field-select::-ms-expand {
    display: none;
  }

  .room-order-text-input {
    padding: 0 7px;
    text-align: center;
  }

  .room-order-text-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }

  .room-order-field-select:focus,
  .room-order-text-input:focus {
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 1px;
    border-color: transparent;
    box-shadow: none;
  }

  .room-order-field-cell.is-saving .room-order-field-select,
  .room-order-text-field-cell.is-saving .room-order-text-input,
  .room-order-date-trigger.is-saving {
    opacity: 0.65;
  }

  .room-order-card-cell--amount {
    justify-content: center;
    text-align: center;
  }

  .room-order-card-cell--number,
  .room-order-card-cell--onec,
  .room-order-card-cell--realization,
  .room-order-card-cell--payment-date,
  .room-order-card-cell--edo,
  .room-order-card-cell--invoice,
  .room-order-card-cell--paid,
  .room-order-card-status,
  .room-order-card-cell--items,
  .room-order-card-cell--amount,
  .room-order-card-cell--date {
    justify-content: center;
    text-align: center;
  }

  .room-order-card-cell--shipping-place {
    padding-left: 18px;
    text-align: left;
  }

  .room-order-card-cell--shipping-place.room-order-field-cell {
    padding-left: 6px;
    text-align: center;
  }

  .room-order-card-cell--items,
  .room-order-card-cell--amount,
  .room-order-card-cell--paid,
  .room-order-card-cell--payment-date,
  .room-order-card-cell--date {
    box-sizing: border-box;
    width: 100%;
  }

  .room-order-card-cell--items {
    justify-content: center;
  }

  .room-order-card-cell--date {
    display: grid;
    justify-self: stretch;
    align-content: center;
    justify-content: end;
    justify-items: end;
    gap: 0;
    min-height: 34px;
    padding-right: 0;
    text-align: right;
    white-space: normal;
  }

  .room-order-card-cell--payment-date.room-order-date-trigger {
    display: grid;
    justify-self: stretch;
    align-content: center;
    justify-content: center;
    justify-items: center;
    min-height: 34px;
    text-align: center;
  }

  .room-order-card-cell--date span {
    display: block;
    min-width: 0;
    overflow: hidden;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-card-cell--payment-date.room-order-date-trigger span {
    display: block;
    min-width: 0;
    overflow: hidden;
    line-height: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-date-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    color: #f4f5f7;
    cursor: pointer;
    font: inherit;
  }

  .room-order-date-trigger:hover,
  .room-order-date-trigger:focus-visible {
    color: #ff5a00;
    outline: none;
  }

  .room-order-date-trigger:disabled {
    cursor: default;
  }

  .room-order-card-status {
    justify-self: stretch;
    max-width: 100%;
    border-radius: 0;
    background: transparent;
  }

  .room-order-card-head,
  .room-order-card-meta,
  .room-order-item {
    display: grid;
    align-items: center;
    gap: 12px;
  }

  .room-order-card-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .room-order-card-head span,
  .room-order-card-meta em,
  .room-order-item span {
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-style: normal;
  }

  .room-order-card-head h4 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 18px;
    line-height: 1.2;
  }

  .room-order-card-head strong {
    color: #fff;
    font-size: 20px;
    white-space: nowrap;
  }

  .room-order-card-meta {
    grid-template-columns: auto minmax(0, 0.7fr) minmax(0, 1fr);
  }

  .room-order-card-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255, 90, 0, 0.16);
    color: #ffb47f;
    font-size: 12px;
    font-weight: 800;
  }

  .room-order-card-meta b,
  .room-order-card-meta em {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-items {
    display: grid;
    gap: 6px;
  }

  /* codex-contentds-room-order-items-accordion-desktop-20260601 */
  .room-order-items-accordion {
    display: grid;
  }

  .room-order-items-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 38px;
    padding: 6px 0 0;
    border: 0;
    border-top: 1px solid #eceef1;
    background: transparent;
    color: #202124;
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
  }

  .room-order-card-row .room-order-items-toggle {
    grid-template-columns: auto;
    justify-content: center;
    gap: 0;
    width: 100%;
    min-height: 20px;
    padding: 0 6px;
    border-top: 0;
    line-height: 20px;
    text-align: center;
  }

  .room-order-card-row .room-order-items-toggle span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-items-toggle:hover span,
  .room-order-items-toggle:focus-visible span {
    color: #ff5a00;
  }

  .room-order-items-toggle:focus-visible {
    outline: 2px solid rgba(255, 90, 0, 0.35);
    outline-offset: 3px;
  }

  .room-order-items-toggle-icon {
    position: relative;
    display: inline-grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: #68706b;
  }

  .room-order-card-row .room-order-items-toggle-icon {
    display: none;
  }

  .room-order-items-toggle-icon::before {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform 0.2s ease;
  }

  .room-order-items-accordion.is-open .room-order-items-toggle-icon::before {
    transform: rotate(-135deg) translate(-1px, -1px);
  }

  .room-order-items-panel {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: grid-template-rows 0.22s ease, opacity 0.18s ease, transform 0.22s ease;
  }

  .room-order-items-panel[aria-hidden="true"] {
    pointer-events: none;
  }

  .room-order-items-accordion.is-open .room-order-items-panel {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
  }

  .room-order-items-list {
    display: grid;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    padding-top: 0;
    transition: padding-top 0.22s ease;
  }

  .room-order-items-accordion.is-open .room-order-items-list {
    padding-top: 0;
  }

  .room-order-item {
    grid-template-columns: var(--contentds-room-orders-grid);
    gap: 0;
    min-width: var(--contentds-room-orders-min-width);
    min-height: 48px;
    padding: 8px 0;
    border-top: 1px solid #3c3d40;
    background: #202124;
  }

  .room-order-item-thumb {
    display: block;
    grid-column: 1;
    justify-self: center;
    align-self: center;
    width: 36px;
    height: 36px;
    border: 1px solid #eceef1;
    border-radius: 25%;
    background: #fff;
    object-fit: contain;
  }

  .room-order-item-thumb--empty {
    background: #f7f7f7;
  }

  .room-order-item-main {
    display: grid;
    grid-column: 2 / 10;
    min-width: 0;
    gap: 3px;
    padding: 0 6px;
  }

  .room-order-item-line {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
  }

  .room-order-item-title,
  .room-order-item-note {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-item-title {
    flex: 0 1 auto;
  }

  .room-order-item-category,
  .room-order-item-detail,
  .room-order-item-quantity {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .room-order-item > .room-order-item-quantity {
    grid-column: 10;
    justify-self: center;
    font-style: normal;
    text-align: center;
  }

  .room-order-item b {
    grid-column: 12 / 14;
    justify-self: end;
    font-style: normal;
    text-align: right;
    white-space: nowrap;
  }

  .room-order-more,
  .room-order-items-empty {
    margin: 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
  }

  .room-order-card :is(button, span, strong, b, em, p) {
    color: #f4f5f7;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
  }

  .room-order-card .room-order-card-cell--date span {
    font-size: 13px;
    line-height: 16.25px;
  }

  .room-order-card :is(b, em) {
    font-style: normal;
  }

  .room-order-card .room-order-items-toggle {
    color: #f4f5f7;
    font-weight: 400;
  }

  .room-order-card .room-order-items-toggle:hover span,
  .room-order-card .room-order-items-toggle:focus-visible span {
    color: #ff5a00;
  }

  /* codex-contentds-room-order-field-hover-orange-desktop-20260604 */
  .room-order-card-row > :is(.room-order-card-cell, .room-order-card-status-cell):hover,
  .room-order-card-row > :is(.room-order-card-cell, .room-order-card-status-cell):focus-within {
    color: #ff5a00;
  }

  .room-order-card-row > :is(.room-order-card-cell, .room-order-card-status-cell):hover :is(span, strong, b, em, p, button, input, select),
  .room-order-card-row > :is(.room-order-card-cell, .room-order-card-status-cell):focus-within :is(span, strong, b, em, p, button, input, select) {
    color: #ff5a00;
  }

  .room-order-card-row > :is(.room-order-card-cell, .room-order-card-status-cell):hover input::placeholder,
  .room-order-card-row > :is(.room-order-card-cell, .room-order-card-status-cell):focus-within input::placeholder {
    color: rgba(255, 90, 0, 0.62);
  }

  .room-order-card-row .room-order-date-trigger:hover,
  .room-order-card-row .room-order-date-trigger:focus-visible,
  .room-order-card-row .room-order-status-trigger:hover,
  .room-order-card-row .room-order-status-trigger:focus-visible,
  .room-order-card-row .room-order-status-control.is-open .room-order-status-trigger,
  .room-order-card-row .room-order-field-dropdown-trigger:hover,
  .room-order-card-row .room-order-field-dropdown-trigger:focus-visible,
  .room-order-card-row .room-order-field-dropdown-control.is-open .room-order-field-dropdown-trigger {
    border-color: transparent;
    color: #ff5a00;
    outline: none;
  }

  .room-order-card-row .room-order-status-trigger:hover span,
  .room-order-card-row .room-order-status-trigger:focus-visible span,
  .room-order-card-row .room-order-status-control.is-open .room-order-status-trigger span,
  .room-order-card-row .room-order-field-dropdown-trigger:hover span,
  .room-order-card-row .room-order-field-dropdown-trigger:focus-visible span,
  .room-order-card-row .room-order-field-dropdown-control.is-open .room-order-field-dropdown-trigger span {
    color: #ff5a00;
  }

  .room-order-item > :is(.room-order-item-main, .room-order-item-quantity, b):hover,
  .room-order-item > :is(.room-order-item-main, .room-order-item-quantity, b):focus-within {
    color: #ff5a00;
  }

  .room-order-item > :is(.room-order-item-main, .room-order-item-quantity, b):hover :is(strong, span, b, em),
  .room-order-item > :is(.room-order-item-main, .room-order-item-quantity, b):focus-within :is(strong, span, b, em) {
    color: #ff5a00;
  }

  .room-order-card .room-order-item :is(strong, span, b, em) {
    color: #f4f5f7;
    font-size: 13px;
    line-height: 1.25;
  }

  .room-order-card .room-order-item :is(strong, b) {
    font-weight: 700;
  }

  /* codex-contentds-room-order-modal-date-head-desktop-20260601 */
  .room-order-modal-head {
    grid-template-columns: minmax(0, 1fr) auto auto auto auto;
    column-gap: 18px;
  }

  .room-order-modal-heading {
    display: grid;
    min-width: 0;
    color: #fff;
  }

  .room-order-modal-heading h2 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  /* codex-contentds-room-order-send-invoice-button-desktop-20260603 */
  .room-order-modal-invoice-button {
    display: inline-flex;
    min-width: 176px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    border: 1px solid #ff5a00;
    border-radius: 8px;
    background: #ff5a00;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 18px;
    cursor: pointer;
  }

  .room-order-modal-invoice-button:hover,
  .room-order-modal-invoice-button:focus-visible {
    border-color: #ff6b1a;
    background: #ff6b1a;
    color: #fff;
    outline: none;
  }

  .room-order-modal-cdek-button {
    background: transparent;
    color: #fff;
  }

  .room-order-modal-cdek-button:hover,
  .room-order-modal-cdek-button:focus-visible {
    border-color: #ff6b1a;
    background: transparent;
    color: #ff6b1a;
  }

  .room-order-modal-invoice-button:disabled,
  .room-order-modal-invoice-button[aria-disabled="true"] {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.44);
    cursor: not-allowed;
  }

  .room-order-modal-head-date {
    margin-right: 30px;
    color: rgba(255, 255, 255, 0.54);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .room-order-modal-body {
    background: #222;
  }

  .room-order-date-modal {
    width: min(440px, calc(100vw - 48px));
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 80px);
    grid-template-rows: auto auto;
    box-shadow: none;
  }

  .room-order-date-modal-head h2 {
    margin: 0;
    color: #f4f5f7;
    font-size: 18px;
    line-height: 24px;
  }

  .room-order-date-modal-body {
    display: grid;
    gap: 16px;
    padding: 24px;
  }

  .room-order-date-calendar {
    display: grid;
    gap: 10px;
  }

  .room-order-date-calendar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    color: #f4f5f7;
    font-size: 14px;
    font-weight: 800;
    line-height: 20px;
  }

  .room-order-date-calendar-weekdays,
  .room-order-date-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .room-order-date-calendar-weekdays span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 18px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
  }

  .room-order-date-calendar-empty,
  .room-order-date-calendar-day {
    min-width: 0;
    aspect-ratio: 1;
  }

  .room-order-date-calendar-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0;
    background: #202124;
    color: rgba(255, 255, 255, 0.82);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
  }

  .room-order-date-calendar-day:hover,
  .room-order-date-calendar-day:focus-visible {
    border-color: rgba(255, 255, 255, 0.36);
    background: #2b2c30;
    outline: none;
  }

  .room-order-date-calendar-day.is-today {
    border-color: rgba(255, 255, 255, 0.52);
    color: #fff;
  }

  .room-order-date-calendar-day.is-selected {
    border-color: #f4f5f7;
    background: #f4f5f7;
    color: #202124;
  }

  .room-order-date-calendar-day:disabled {
    cursor: not-allowed;
    opacity: 0.58;
  }

  .room-order-date-field {
    display: grid;
    gap: 8px;
  }

  .room-order-date-field span {
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
  }

  .room-order-date-field input {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0;
    background: #202124;
    color: #f4f5f7;
    font: inherit;
    font-size: 14px;
  }

  .room-order-date-field input:focus {
    outline: 2px solid rgba(255, 255, 255, 0.2);
    outline-offset: 1px;
    border-color: rgba(255, 255, 255, 0.35);
  }

  .room-order-date-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 0;
  }

  .room-order-date-status {
    min-height: 18px;
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 12px;
    line-height: 18px;
  }

  .room-order-date-status.is-error {
    color: #ffb4a8;
  }

  .room-order-modal-section {
    display: grid;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 18px;
    padding: 20px 24px 24px;
    overflow: hidden;
  }

  .room-order-modal-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: end;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .room-order-modal-title {
    min-width: 0;
  }

  .room-order-modal-total span,
  .room-order-modal-total em {
    color: rgba(255, 255, 255, 0.54);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
  }

  .room-order-modal-total {
    display: grid;
    justify-items: end;
    gap: 5px;
    text-align: right;
  }

  .room-order-modal-total span {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    padding: 0 11px;
    font-weight: 800;
  }

  .room-order-modal-total strong {
    color: #fff;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }

  .room-order-modal-total em {
    font-style: normal;
  }

  .room-order-modal-grid {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(220px, 0.36fr) minmax(340px, 0.72fr) minmax(270px, 0.42fr);
    gap: 28px;
  }

  .room-order-modal-panel {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    align-content: start;
    gap: 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    padding: 16px;
    overflow: visible;
  }

  .room-order-modal-panel + .room-order-modal-panel::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -14px;
    width: 1px;
    background: rgba(255, 255, 255, 0.12);
    pointer-events: none;
  }

  .room-order-modal-panel h4,
  .room-order-modal-items-head h4 {
    margin: 0;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }

  .room-order-modal-details {
    display: grid;
    gap: 0;
  }

  .room-order-modal-detail-row {
    display: grid;
    gap: 4px;
    border-radius: 0;
    background: transparent;
    padding: 11px 0;
  }

  .room-order-modal-detail-row + .room-order-modal-detail-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .room-order-modal-detail-row span,
  .room-order-modal-item-main span,
  .room-order-modal-items-head span,
  .room-order-modal-empty {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
  }

  .room-order-modal-detail-row strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-modal-source {
    display: inline-flex;
    min-height: 36px;
    width: fit-content;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    color: #eee;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
  }

  .room-order-modal-source:hover,
  .room-order-modal-source:focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    outline: none;
  }

  .room-order-modal-panel--items {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .room-order-modal-items-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .room-order-modal-items {
    display: grid;
    align-content: start;
    gap: 0;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  .room-order-modal-items::-webkit-scrollbar {
    width: 8px;
  }

  .room-order-modal-items::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .room-order-modal-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 74px 112px 130px;
    gap: 12px;
    align-items: center;
    min-height: 58px;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 12px 0;
  }

  .room-order-modal-item + .room-order-modal-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .room-order-modal-item-main {
    min-width: 0;
  }

  .room-order-modal-item-main strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-modal-item-main span {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-modal-item-main .room-order-modal-item-onec {
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
  }

  .room-order-modal-item > em,
  .room-order-modal-item > span,
  .room-order-modal-item > b {
    min-width: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-style: normal;
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
  }

  .room-order-modal-item b {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
  }

  .room-order-modal-empty {
    margin: 0;
  }

  /* codex-contentds-room-order-status-onec-workflow-desktop-20260603 */
  .room-order-card-status-cell {
    justify-self: stretch;
    align-self: stretch;
    min-width: 0;
    padding: 0 6px;
  }

  .room-order-card:has(.room-order-status-control.is-open) {
    z-index: 6;
  }

  .room-order-card:has(.room-order-field-dropdown-control.is-open) {
    z-index: 6;
  }

  .room-order-card-status-cell:has(.room-order-status-control.is-open) {
    z-index: 24;
  }

  .room-order-status-control {
    position: relative;
    display: grid;
    align-items: center;
    width: 100%;
    min-width: 0;
  }

  .room-order-status-trigger {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #f4f5f7;
    padding: 0 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
  }

  .room-order-status-trigger span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-status-trigger:hover,
  .room-order-status-trigger:focus-visible,
  .room-order-status-control.is-open .room-order-status-trigger {
    border-color: transparent;
    color: #fff;
    outline: none;
  }

  .room-order-status-control.is-saving .room-order-status-trigger {
    opacity: 0.64;
    cursor: progress;
  }

  .room-order-status-control.is-open {
    z-index: 25;
  }

  .room-order-status-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    z-index: 20;
    display: grid;
    width: max-content;
    min-width: min(220px, calc(100vw - 48px));
    max-width: 280px;
    gap: 2px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: #2b2d31;
    padding: 5px;
    transform: translateX(-50%);
  }

  .room-order-status-menu[hidden] {
    display: none;
  }

  .room-orders-list:has(.room-order-status-control.is-open) {
    padding-bottom: 340px;
  }

  .room-orders-list:has(.room-order-field-dropdown-control.is-open) {
    padding-bottom: 340px;
  }

  .room-order-status-option {
    display: flex;
    min-height: 30px;
    align-items: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
  }

  .room-order-status-option:hover,
  .room-order-status-option:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    outline: none;
  }

  .room-order-status-option.is-selected {
    background: rgba(255, 90, 0, 0.18);
    color: #fff;
  }

  .room-order-status-menu-separator {
    height: 1px;
    margin: 4px 2px;
    background: rgba(255, 255, 255, 0.12);
  }

  .room-order-modal-panel--workflow {
    grid-template-rows: auto auto auto minmax(0, 1fr);
  }

  .room-order-workflow-head {
    display: grid;
    grid-template-columns: minmax(0, 64px) minmax(0, 1fr);
    gap: 10px;
    align-items: center;
  }

  .room-order-workflow-head > span {
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
  }

  .room-order-modal .room-order-status-trigger {
    min-height: 34px;
    justify-content: flex-start;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 0 10px;
    text-align: left;
  }

  .room-order-modal .room-order-status-trigger:hover,
  .room-order-modal .room-order-status-trigger:focus-visible,
  .room-order-modal .room-order-status-control.is-open .room-order-status-trigger {
    border-color: #ff5a00;
    color: #fff;
  }

  .room-order-modal .room-order-status-menu {
    left: 0;
    min-width: 100%;
    max-width: min(280px, 100%);
    border-color: rgba(255, 255, 255, 0.14);
    background: #262626;
    transform: none;
  }

  .room-order-modal .room-order-status-option {
    color: rgba(255, 255, 255, 0.82);
  }

  .room-order-modal .room-order-status-option:hover,
  .room-order-modal .room-order-status-option:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }

  .room-order-modal .room-order-status-option.is-selected {
    background: rgba(255, 90, 0, 0.18);
    color: #fff;
  }

  .room-order-modal .room-order-status-menu-separator {
    background: rgba(255, 255, 255, 0.12);
  }

  .room-order-workflow-status {
    display: grid;
    gap: 0;
    min-width: 0;
  }

  .room-order-workflow-status-row,
  .room-order-workflow-log-row {
    display: grid;
    min-width: 0;
    gap: 4px;
    border-radius: 0;
    background: transparent;
    padding: 10px 0;
  }

  .room-order-workflow-status-row + .room-order-workflow-status-row,
  .room-order-workflow-log-row + .room-order-workflow-log-row {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .room-order-workflow-status-row span,
  .room-order-workflow-log-row span,
  .room-order-workflow-log-row em {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.52);
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-workflow-status-row strong,
  .room-order-workflow-log-row strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-workflow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .room-order-workflow-actions--modal-footer {
    width: 100%;
    align-self: end;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 10px;
  }

  .room-order-workflow-action {
    display: inline-flex;
    min-width: 0;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    padding: 0 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
  }

  .room-order-workflow-actions--modal-footer .room-order-workflow-action {
    min-height: 44px;
  }

  .room-order-workflow-action span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .room-order-workflow-action:hover,
  .room-order-workflow-action:focus-visible {
    border-color: #ff5a00;
    background: rgba(255, 90, 0, 0.12);
    outline: none;
  }

  .room-order-workflow-action.is-done {
    border-color: rgba(93, 214, 148, 0.34);
    background: rgba(93, 214, 148, 0.12);
    color: #d8f7e4;
  }

  .room-order-workflow-action:disabled {
    opacity: 0.54;
    cursor: not-allowed;
  }

  .room-order-workflow-log {
    display: grid;
    align-content: start;
    gap: 0;
    min-height: 0;
    overflow: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }

  .room-order-workflow-log::-webkit-scrollbar {
    width: 8px;
  }

  .room-order-workflow-log::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .catalog-modal-card--admin {
    background: #202124;
    color: #ffffff;
  }

  .catalog-modal-card--admin:hover,
  .catalog-modal-card--admin:focus-visible {
    background: #ff5a00;
    color: #ffffff;
  }
}

/* codex-contentds-search-page-menu-card-20260531 */
.catalog-modal-card--search {
  border-color: rgba(50, 129, 255, 0.36);
  background: #1f67d9;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 22px 56px rgba(31, 103, 217, 0.28);
}

.catalog-modal-card--search:hover,
.catalog-modal-card--search:focus-visible {
  border-color: rgba(255, 255, 255, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 24px 62px rgba(31, 103, 217, 0.36);
}

/* codex-contentds-catalog-modal-flat-borders-desktop-20260601 */
.catalog-modal {
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

.catalog-modal-card,
.catalog-modal-card:hover,
.catalog-modal-card:focus-visible,
.catalog-modal-card--trello,
.catalog-modal-card--b2b,
.catalog-modal-card--b2b:hover,
.catalog-modal-card--b2b:focus-visible,
.catalog-modal-card--search,
.catalog-modal-card--search:hover,
.catalog-modal-card--search:focus-visible,
.catalog-modal-card--admin,
.catalog-modal-card--admin:hover,
.catalog-modal-card--admin:focus-visible {
  box-shadow: none;
}

.catalog-modal-card {
  border-color: rgba(255, 255, 255, 0.16);
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.catalog-modal-card:hover,
.catalog-modal-card:focus-visible {
  border-color: rgba(255, 255, 255, 0.34);
  transform: none;
}

.catalog-modal-card--content,
.catalog-modal-card--content:hover,
.catalog-modal-card--content:focus-visible {
  border-color: #fff;
  box-shadow: none;
}

.catalog-modal-card--loader {
  border-color: rgba(183, 220, 191, 0.32);
  background: #123c2c;
  color: #ffffff;
}

.catalog-modal-card--loader:hover,
.catalog-modal-card--loader:focus-visible {
  border-color: rgba(218, 244, 224, 0.52);
  background: #174a38;
  color: #ffffff;
}

.search-view {
  color: #202124;
}

.search-page {
  min-height: calc(100vh - 88px);
  padding: 26px 28px 36px;
}

.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.search-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: #1f67d9;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.search-header h2 {
  margin: 0;
  color: #202124;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.05;
}

.search-section-tabs {
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid #dfe1e4;
  border-radius: 8px;
  background: #ffffff;
}

.search-section-tab-list {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}

.search-section-tab {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #68706b;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
  white-space: nowrap;
}

.search-section-tab:hover,
.search-section-tab:focus-visible {
  border-color: #dfe1e4;
  background: #f7f8f9;
  color: #202124;
  outline: none;
}

.search-section-tab.is-active {
  border-color: #1f67d9;
  background: #1f67d9;
  color: #ffffff;
}

.search-tab-panels,
.search-tab-panel {
  min-width: 0;
}

.search-tab-panel[hidden] {
  display: none !important;
}

.search-status-pill,
.search-panel-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 8px;
  white-space: nowrap;
}

.search-status-pill {
  gap: 10px;
  padding: 0 12px;
  border: 1px solid #dfe1e4;
  background: #ffffff;
}

.search-status-pill span,
.search-kpi-card span,
.search-panel-head span,
.search-field span,
.search-alias-toggle span,
.search-rule-list span {
  color: #68706b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.search-status-pill strong {
  color: #b42318;
  font-size: 13px;
}

.search-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.search-kpi-card,
.search-panel {
  border: 1px solid #dfe1e4;
  border-radius: 8px;
  background: #ffffff;
}

.search-kpi-card {
  min-height: 138px;
  padding: 18px;
}

.search-kpi-card strong {
  display: block;
  margin-top: 18px;
  color: #202124;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.search-kpi-card p {
  margin: 12px 0 0;
  color: #68706b;
  font-size: 13px;
}

.search-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  gap: 12px;
}

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

.search-panel {
  min-width: 0;
  padding: 18px;
}

.search-panel--wide {
  grid-column: 1 / -1;
}

.search-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.search-panel-head h3 {
  margin: 6px 0 0;
  color: #202124;
  font-size: 18px;
  line-height: 1.2;
}

.search-panel-badge {
  padding: 0 10px;
  background: #edf4ff;
  color: #1f67d9;
  font-size: 13px;
  font-weight: 800;
}

.search-settings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.search-field {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.search-field input,
.search-field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid #dfe1e4;
  border-radius: 8px;
  background: #f7f8f9;
  color: #202124;
  font: inherit;
  font-weight: 700;
  padding: 0 12px;
}

.search-action-list,
.search-alias-list,
.search-rule-list,
.search-log-list {
  display: grid;
  gap: 8px;
}

.search-action-list button {
  min-height: 44px;
  border: 1px solid #dfe1e4;
  border-radius: 8px;
  background: #f7f8f9;
  color: #68706b;
  font: inherit;
  font-weight: 800;
}

.search-alias-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.search-alias-status {
  min-height: 20px;
  margin: -4px 0 12px;
  color: #68706b;
  font-size: 13px;
  font-weight: 600;
}

.search-alias-status.is-error {
  color: #b42318;
}

.search-alias-status.is-dirty {
  color: #9a5b00;
}

.search-secondary-button,
.search-icon-button {
  border: 1px solid #dfe1e4;
  border-radius: 8px;
  background: #f7f8f9;
  color: #202124;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.search-secondary-button {
  min-height: 34px;
  padding: 0 14px;
}

.search-icon-button {
  width: 38px;
  min-width: 38px;
  height: 42px;
  padding: 0;
}

.search-secondary-button:disabled,
.search-icon-button:disabled {
  cursor: default;
  opacity: 0.58;
}

.search-alias-row {
  display: grid;
  grid-template-columns: 74px minmax(220px, 1fr) minmax(180px, 0.75fr) 120px 132px 38px;
  align-items: end;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  background: #ffffff;
}

.search-alias-toggle {
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 66px;
}

.search-alias-toggle input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #1f67d9;
}

.search-weight-summary {
  margin-bottom: 16px;
  color: #68706b;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.search-weight-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.search-weight-group {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.search-weight-group h4 {
  margin: 0;
  color: #202124;
  font-size: 15px;
  font-weight: 800;
}

.search-weight-list {
  display: grid;
  gap: 8px;
}

.search-weight-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(140px, 0.55fr) 86px;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  background: #ffffff;
}

.search-weight-row > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  color: #202124;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.search-weight-row small {
  min-width: 0;
  overflow: hidden;
  color: #68706b;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-weight-range {
  width: 100%;
  min-height: 36px;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  accent-color: #1f67d9;
}

.search-weight-range:focus {
  box-shadow: none;
  outline: none;
}

.search-weight-number {
  width: 100%;
  min-height: 36px;
  border: 1px solid #dfe1e4;
  border-radius: 8px;
  background: #f7f8f9;
  color: #202124;
  font: inherit;
  font-weight: 800;
  padding: 0 8px;
}

.search-weight-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.search-weight-actions .search-query-meta {
  margin-top: 0;
}

.search-rule-list div,
.search-log-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #e6e8eb;
  border-radius: 8px;
  background: #ffffff;
}

.search-rule-list strong,
.search-log-list strong {
  min-width: 0;
  color: #202124;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-log-list span {
  color: #68706b;
  font-size: 12px;
  white-space: nowrap;
}

body:has(#searchView:not(.is-hidden)) .app-main {
  background: #eeeeee;
  padding: 0;
}

body:has(#searchView:not(.is-hidden)) .app-shell {
  border: 0;
}

/* codex-contentds-search-page-blue-site-exchange-style-20260531 */
body:has(#searchView:not(.is-hidden)) {
  background: #222;
}

body:has(#searchView:not(.is-hidden)) .app-shell {
  background: #222;
  box-shadow: none;
}

body:has(#searchView:not(.is-hidden)) .app-main {
  background: #222;
  padding: 0;
}

body:has(#searchView:not(.is-hidden)) .topbar {
  border-bottom-color: rgba(255, 255, 255, 0.18);
  background: #1f67d9;
  backdrop-filter: none;
}

body:has(#searchView:not(.is-hidden)) .topbar-search-icon {
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #1f67d9;
  color: #fff;
  box-shadow: none;
}

body:has(#searchView:not(.is-hidden)) .topbar-search input {
  border-color: rgba(255, 255, 255, 0.34);
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-weight: 400;
}

body:has(#searchView:not(.is-hidden)) .topbar-search input:focus {
  border-color: rgba(255, 255, 255, 0.72);
  outline: none;
}

body:has(#searchView:not(.is-hidden)) .topbar-search input::placeholder {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 400;
  opacity: 1;
}

/* codex-contentds-search-page-white-input-desktop-20260531 */
@media (min-width: 901px) {
  body:has(#searchView:not(.is-hidden)) .topbar-search input {
    border-color: #fff;
    background: #fff;
    box-shadow: none;
    color: #202124;
  }

  body:has(#searchView:not(.is-hidden)) .topbar-search input:focus {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
  }

  body:has(#searchView:not(.is-hidden)) .topbar-search input::placeholder {
    color: #68706b;
  }
}

body:has(#searchView:not(.is-hidden)) .topbar-settings-button,
body:has(#searchView:not(.is-hidden)) .topbar-settings-button:hover,
body:has(#searchView:not(.is-hidden)) .topbar-settings-button:focus-visible,
body:has(#searchView:not(.is-hidden)) .topbar-settings-button[aria-expanded="true"] {
  color: #fff;
}

/* codex-contentds-panel-icons-no-active-ring-20260608 */
:is(
  .topbar-catalog-button,
  .topbar-boards-button,
  .topbar-kanban-add-column-button,
  .topbar-column-filter-button,
  .topbar-settings-button,
  .topbar-icon-button,
  .catalog-modal-admin-link
):is(:focus-visible, .is-active, [aria-expanded="true"]) {
  outline: none !important;
  box-shadow: none !important;
}

body:has(#searchView:not(.is-hidden)) .search-view {
  min-height: calc(100vh - 88px);
  background: #222;
  color: #fff;
}

body:has(#searchView:not(.is-hidden)) .search-page {
  min-height: calc(100vh - 88px);
  background: #222;
  color: #fff;
  padding: 18px 24px 24px;
}

body:has(#searchView:not(.is-hidden)) .search-header {
  min-height: 58px;
  align-items: center;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 8px 10px 8px 16px;
}

body:has(#searchView:not(.is-hidden)) .search-section-tabs {
  margin-bottom: 18px;
  padding: 6px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}

body:has(#searchView:not(.is-hidden)) .search-section-tab-list {
  gap: 4px;
}

body:has(#searchView:not(.is-hidden)) .search-section-tab {
  color: rgba(255, 255, 255, 0.68);
  font-weight: 600;
}

body:has(#searchView:not(.is-hidden)) .search-section-tab:hover,
body:has(#searchView:not(.is-hidden)) .search-section-tab:focus-visible {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

body:has(#searchView:not(.is-hidden)) .search-section-tab.is-active {
  border-color: #fff;
  background: #fff;
  color: #202124;
}

body:has(#searchView:not(.is-hidden)) .search-eyebrow {
  margin-bottom: 4px;
  color: rgba(255, 255, 255, 0.58);
  font-weight: 500;
  letter-spacing: 0;
}

body:has(#searchView:not(.is-hidden)) .search-header h2 {
  color: #fff;
  font-size: 22px;
  font-weight: 600;
}

body:has(#searchView:not(.is-hidden)) .search-status-pill {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
}

body:has(#searchView:not(.is-hidden)) .search-status-pill span,
body:has(#searchView:not(.is-hidden)) .search-kpi-card span,
body:has(#searchView:not(.is-hidden)) .search-panel-head span,
body:has(#searchView:not(.is-hidden)) .search-field span,
body:has(#searchView:not(.is-hidden)) .search-alias-toggle span,
body:has(#searchView:not(.is-hidden)) .search-rule-list span {
  color: rgba(255, 255, 255, 0.58);
  font-weight: 500;
}

body:has(#searchView:not(.is-hidden)) .search-status-pill strong {
  color: #ffb1b1;
  font-weight: 650;
}

body:has(#searchView:not(.is-hidden)) .search-kpi-grid {
  gap: 0;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

body:has(#searchView:not(.is-hidden)) .search-kpi-card,
body:has(#searchView:not(.is-hidden)) .search-panel {
  border-color: rgba(255, 255, 255, 0.1);
  background: transparent;
}

body:has(#searchView:not(.is-hidden)) .search-kpi-card {
  border: 0;
  border-radius: 0;
  padding: 18px 20px;
}

body:has(#searchView:not(.is-hidden)) .search-kpi-card + .search-kpi-card {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

body:has(#searchView:not(.is-hidden)) .search-kpi-card strong {
  color: #fff;
  font-weight: 600;
}

body:has(#searchView:not(.is-hidden)) .search-kpi-card p {
  color: rgba(255, 255, 255, 0.52);
  font-weight: 500;
}

body:has(#searchView:not(.is-hidden)) .search-grid {
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

body:has(#searchView:not(.is-hidden)) .search-grid--single {
  grid-template-columns: minmax(0, 1fr);
}

body:has(#searchView:not(.is-hidden)) .search-panel {
  border-width: 0;
  border-radius: 0;
  padding: 20px 24px;
}

body:has(#searchView:not(.is-hidden)) .search-panel--wide,
body:has(#searchView:not(.is-hidden)) .search-grid--single .search-panel--wide:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body:has(#searchView:not(.is-hidden)) .search-grid--single .search-panel--wide:last-child {
  border-bottom: 0;
}

body:has(#searchView:not(.is-hidden)) .search-panel:not(.search-panel--wide) + .search-panel {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

body:has(#searchView:not(.is-hidden)) .search-panel-head h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

body:has(#searchView:not(.is-hidden)) .search-panel-badge {
  background: rgba(31, 103, 217, 0.16);
  color: #9bc2ff;
  font-weight: 650;
}

body:has(#searchView:not(.is-hidden)) .search-field input,
body:has(#searchView:not(.is-hidden)) .search-field select {
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  box-shadow: none;
  color: #fff;
  font-weight: 500;
}

body:has(#searchView:not(.is-hidden)) .search-field input:focus,
body:has(#searchView:not(.is-hidden)) .search-field select:focus {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
  outline: none;
}

body:has(#searchView:not(.is-hidden)) .search-action-list button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
}

body:has(#searchView:not(.is-hidden)) .search-alias-status {
  color: rgba(255, 255, 255, 0.58);
  font-weight: 500;
}

body:has(#searchView:not(.is-hidden)) .search-alias-status.is-error {
  color: #ffb1b1;
}

body:has(#searchView:not(.is-hidden)) .search-alias-status.is-dirty {
  color: #ffd48a;
}

body:has(#searchView:not(.is-hidden)) .search-secondary-button,
body:has(#searchView:not(.is-hidden)) .search-icon-button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-weight: 650;
}

body:has(#searchView:not(.is-hidden)) .search-secondary-button:hover,
body:has(#searchView:not(.is-hidden)) .search-secondary-button:focus-visible,
body:has(#searchView:not(.is-hidden)) .search-icon-button:hover,
body:has(#searchView:not(.is-hidden)) .search-icon-button:focus-visible {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

body:has(#searchView:not(.is-hidden)) .search-alias-row {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

body:has(#searchView:not(.is-hidden)) .search-weight-summary {
  color: rgba(255, 255, 255, 0.58);
}

body:has(#searchView:not(.is-hidden)) .search-weight-group h4 {
  color: #ffffff;
  font-weight: 650;
}

body:has(#searchView:not(.is-hidden)) .search-weight-row {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

body:has(#searchView:not(.is-hidden)) .search-weight-row > span {
  color: #ffffff;
  font-weight: 650;
}

body:has(#searchView:not(.is-hidden)) .search-weight-row small {
  color: rgba(255, 255, 255, 0.46);
}

body:has(#searchView:not(.is-hidden)) .search-weight-number {
  border-color: rgba(255, 255, 255, 0.18);
  background: transparent;
  box-shadow: none;
  color: #ffffff;
  font-weight: 650;
}

body:has(#searchView:not(.is-hidden)) .search-weight-number:focus {
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: none;
  outline: none;
}

body:has(#searchView:not(.is-hidden)) .search-weight-range {
  background: transparent;
  box-shadow: none;
  accent-color: #9bc2ff;
}

body:has(#searchView:not(.is-hidden)) .search-rule-list div,
body:has(#searchView:not(.is-hidden)) .search-log-list div {
  border-color: rgba(255, 255, 255, 0.12);
  background: transparent;
}

body:has(#searchView:not(.is-hidden)) .search-rule-list strong,
body:has(#searchView:not(.is-hidden)) .search-log-list strong {
  color: #fff;
  font-weight: 650;
}

body:has(#searchView:not(.is-hidden)) .search-log-list span {
  color: rgba(255, 255, 255, 0.52);
}

@media (min-width: 901px) {
  /* codex-contentds-search-admin-backend-ui-desktop-20260531 */
  body:has(#searchView:not(.is-hidden)) .search-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
  }

  body:has(#searchView:not(.is-hidden)) .search-refresh-button,
  body:has(#searchView:not(.is-hidden)) .search-run-button {
    min-height: 34px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    padding: 0 14px;
    cursor: pointer;
  }

  body:has(#searchView:not(.is-hidden)) .search-refresh-button:hover,
  body:has(#searchView:not(.is-hidden)) .search-refresh-button:focus-visible,
  body:has(#searchView:not(.is-hidden)) .search-run-button:hover,
  body:has(#searchView:not(.is-hidden)) .search-run-button:focus-visible {
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.14);
    outline: none;
  }

  body:has(#searchView:not(.is-hidden)) .search-refresh-button:disabled,
  body:has(#searchView:not(.is-hidden)) .search-run-button:disabled {
    cursor: default;
    opacity: 0.58;
  }

  body:has(#searchView:not(.is-hidden)) .search-status-pill.is-ready strong {
    color: #9fe2b0;
  }

  body:has(#searchView:not(.is-hidden)) .search-status-pill.is-error strong {
    color: #ffb1b1;
  }

  body:has(#searchView:not(.is-hidden)) .search-field--wide {
    grid-column: span 2;
  }

  body:has(#searchView:not(.is-hidden)) .search-query-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 12px;
  }

  body:has(#searchView:not(.is-hidden)) .search-query-row .search-field {
    gap: 8px;
  }

  body:has(#searchView:not(.is-hidden)) .search-run-button {
    min-height: 42px;
    min-width: 120px;
    background: #1f67d9;
    border-color: #1f67d9;
  }

  body:has(#searchView:not(.is-hidden)) .search-query-meta {
    min-height: 20px;
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    font-weight: 500;
  }

  body:has(#searchView:not(.is-hidden)) .search-result-list,
  body:has(#searchView:not(.is-hidden)) .search-preview-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
  }

  body:has(#searchView:not(.is-hidden)) .search-preview-list {
    margin-top: 0;
  }

  body:has(#searchView:not(.is-hidden)) .search-product-row {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) minmax(150px, auto);
    align-items: center;
    gap: 12px;
    min-height: 74px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
  }

  body:has(#searchView:not(.is-hidden)) .search-product-thumb {
    width: 58px;
    height: 58px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    object-fit: contain;
  }

  body:has(#searchView:not(.is-hidden)) .search-product-thumb--empty {
    display: block;
  }

  body:has(#searchView:not(.is-hidden)) .search-product-main,
  body:has(#searchView:not(.is-hidden)) .search-product-meta {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  body:has(#searchView:not(.is-hidden)) .search-product-main strong,
  body:has(#searchView:not(.is-hidden)) .search-product-meta strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(#searchView:not(.is-hidden)) .search-product-main span,
  body:has(#searchView:not(.is-hidden)) .search-product-meta span,
  body:has(#searchView:not(.is-hidden)) .search-product-meta a {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(#searchView:not(.is-hidden)) .search-product-meta {
    justify-items: end;
    text-align: right;
  }

  body:has(#searchView:not(.is-hidden)) .search-product-meta a {
    color: #9bc2ff;
    text-decoration: none;
  }

  body:has(#searchView:not(.is-hidden)) .search-empty {
    margin: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
  }
}

@media (max-width: 900px) {
  .search-page {
    padding: 20px 16px 28px;
  }

  .search-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .search-kpi-grid,
  .search-grid,
  .search-settings-grid,
  .search-alias-row {
    grid-template-columns: 1fr;
  }

  .search-panel--wide {
    grid-column: auto;
  }

  body:has(#searchView:not(.is-hidden)) .search-kpi-card + .search-kpi-card,
  body:has(#searchView:not(.is-hidden)) .search-panel:not(.search-panel--wide) + .search-panel {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 0;
  }
}

/* codex-contentds-banners-library-modal-20260617 */
@media (min-width: 901px) {
  .menu-settings-modal--site-shell.banners-modal .banners-modal-head {
    grid-template-columns: minmax(220px, 420px) minmax(0, 1fr) auto;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-tabs {
    width: min(100%, 420px);
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-status {
    justify-self: end;
    min-width: 0;
    max-width: 520px;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.58);
    font-size: 13px;
    font-weight: 600 !important;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-status[data-tone="success"] {
    color: #8fd9a8;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-status[data-tone="error"] {
    color: #ff9a8f;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-body {
    overflow: auto;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-root,
  .menu-settings-modal--site-shell.banners-modal .banners-panel {
    min-height: 0;
    height: 100%;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-toolbar,
  .menu-settings-modal--site-shell.banners-modal .banners-library-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-toolbar strong,
  .menu-settings-modal--site-shell.banners-modal .banners-library-toolbar strong,
  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-copy strong,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-title strong {
    min-width: 0;
    overflow: hidden;
    color: #fff;
    font-weight: 700 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-toolbar strong,
  .menu-settings-modal--site-shell.banners-modal .banners-library-toolbar strong {
    display: block;
    font-size: 18px;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-copy strong,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-title strong {
    font-size: 14px;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-toolbar span,
  .menu-settings-modal--site-shell.banners-modal .banners-library-toolbar span,
  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-copy span,
  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-copy small,
  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-copy em,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-title span,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-meta span,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-refs {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.56);
    font-size: 12px;
    font-style: normal;
    font-weight: 600 !important;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-toolbar span,
  .menu-settings-modal--site-shell.banners-modal .banners-library-toolbar span {
    display: block;
    margin-top: 3px;
    font-size: 13px;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-content: start;
    min-height: 0;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1c1c1c;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-width: 0;
    min-height: 132px;
    padding: 14px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: #fff;
    text-align: left;
    cursor: pointer;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot:nth-child(4n+1) {
    border-left: 0;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot:nth-child(n+5) {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot:hover,
  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot:focus-visible,
  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot.is-selected {
    background: #242424;
    outline: none;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot.is-selected {
    box-shadow: inset 0 0 0 2px rgba(110, 67, 210, 0.88);
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-thumb,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-media {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #111;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-thumb {
    aspect-ratio: 4 / 3;
    width: 94px;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-thumb img,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-thumb span,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-media span {
    color: rgba(255, 255, 255, 0.42);
    font-size: 12px;
    font-weight: 700 !important;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-menu-slot-copy,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-title,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-meta {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: max-content;
    align-content: start;
    align-items: start;
    gap: 12px;
    min-height: 0;
    overflow: auto;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card {
    display: grid;
    grid-template-rows: auto auto;
    align-self: start;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1c1c1c;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card.is-used {
    border-color: rgba(143, 217, 168, 0.32);
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-media {
    aspect-ratio: 3 / 2;
    border-width: 0 0 1px;
    border-radius: 0;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-body {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: start;
    gap: 8px;
    min-width: 0;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-delete-button {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-delete-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-delete-button:not(:disabled):hover,
  .menu-settings-modal--site-shell.banners-modal .banners-library-delete-button:not(:disabled):focus-visible {
    border-color: rgba(255, 119, 105, 0.62);
    color: #ff8f84;
    outline: none;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-delete-button:disabled {
    cursor: default;
    opacity: 0.38;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 700 !important;
    line-height: 1.3;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-status span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-status.is-used {
    color: #8fd9a8;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-status.is-used span {
    background: #8fd9a8;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-status.is-free {
    color: rgba(255, 255, 255, 0.68);
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-badges,
  .menu-settings-modal--site-shell.banners-modal .banners-library-card-actions {
    display: flex;
    gap: 6px;
    min-width: 0;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-badges {
    flex-wrap: wrap;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-badges span {
    min-height: 22px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 11px;
    font-weight: 700 !important;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-card-badges .is-used {
    border-color: rgba(143, 217, 168, 0.34);
    color: #8fd9a8;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-button {
    min-height: 38px;
    min-width: 0;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #242424;
    color: #fff;
    font-size: 14px;
    font-weight: 700 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-button.is-primary {
    border-color: rgba(110, 67, 210, 0.65);
    background: rgba(110, 67, 210, 0.9);
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-button.is-danger {
    color: #ffb0a8;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-button:not(:disabled):hover,
  .menu-settings-modal--site-shell.banners-modal .banners-modal-button:not(:disabled):focus-visible {
    border-color: rgba(255, 255, 255, 0.34);
    outline: none;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-modal-button:disabled {
    opacity: 0.45;
    cursor: default;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-empty,
  .menu-settings-modal--site-shell.banners-modal .banners-library-error {
    margin: 0;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    background: #1c1c1c;
    color: rgba(255, 255, 255, 0.58);
    font-size: 14px;
    font-weight: 600 !important;
  }

  .menu-settings-modal--site-shell.banners-modal .banners-library-error {
    color: #ff9a8f;
  }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .menu-settings-modal--site-shell .menu-settings-modal-head {
    grid-template-columns: minmax(130px, 1fr) auto auto auto auto auto;
    gap: 8px;
    padding-right: 16px;
    padding-left: 16px;
  }

  .menu-settings-modal--site-shell .menu-settings-title-tabs {
    width: 100%;
    min-width: 0;
  }

  .menu-settings-modal--site-shell .menu-builder-device-tabs {
    grid-template-columns: repeat(2, 40px);
  }

  .menu-settings-modal--site-shell .menu-builder-device-tab {
    width: 40px;
  }

  .menu-settings-modal--site-shell .menu-builder-add-item-button {
    min-width: 136px;
    gap: 6px;
  }

  .menu-settings-modal--site-shell .menu-builder-spacer-item-button {
    min-width: 108px;
  }

  .menu-settings-modal--site-shell .menu-builder-add-item-icon {
    width: 15px;
    height: 15px;
  }

  .menu-settings-modal--site-shell .menu-settings-modal-head-actions {
    gap: 6px;
  }

  .menu-settings-modal--site-shell .menu-builder-action-status {
    display: none;
  }

  .menu-settings-modal--site-shell .menu-builder-button {
    padding-right: 10px;
    padding-left: 10px;
    font-size: 12px;
  }
}

/* codex-category-create-modal-compact-20260619 */
.category-create-modal-backdrop.category-create-modal-backdrop {
  align-items: center;
  padding: 24px;
}

.category-create-modal.category-create-modal {
  grid-template-rows: auto auto;
  width: min(460px, calc(100vw - 40px));
  height: auto;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 48px);
  border-radius: 8px;
}

@media (max-width: 900px) {
  .category-create-modal-backdrop.category-create-modal-backdrop {
    padding: 16px;
  }

  .category-create-modal.category-create-modal {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 32px);
  }
}