/* Fleexy CRM polished operator theme.
   This file intentionally overrides the older glass-heavy layer with a quieter,
   denser CRM interface built for daily work. */
@font-face {
  font-family: "Geometria";
  src: url("/fonts/geometria/Geometria.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geometria";
  src: url("/fonts/geometria/Geometria-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geometria";
  src: url("/fonts/geometria/Geometria-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/fonts/gilroy/Gilroy-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --app-font-family: "Geometria", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --primary: #ef4444;
  --primary-rgb: 239 68 68;
  --primary-hover: #dc2626;
  --primary-light: #fee2e2;
  --primary-soft: rgb(var(--primary-rgb) / 0.14);
  --primary-muted: rgb(var(--primary-rgb) / 0.22);
  --primary-border: rgb(var(--primary-rgb) / 0.42);
  --primary-contrast: #ffffff;
  --surface: #ffffff;
  --surface-muted: #f6f7f2;
  --page-bg: #f2f3ee;
  --ink: #1f211f;
  --ink-muted: #73766f;
  --border: #e1e3dc;
  --ring: rgba(31, 33, 31, 0.1);
  --nav-active-bg: #1f211f;
  --nav-active-text: #ffffff;
  --control-bg: #ffffff;
  --control-hover: #f0f1ec;
  --button-primary-bg: #1f211f;
  --button-primary-hover: #343733;
  --button-primary-text: #ffffff;
  --table-head: #f8f8f5;
  --table-row-hover: #fbfbf8;
  --selected-row: var(--primary-soft);
  --selection-bg: var(--primary-soft);
  --selection-border: var(--primary-border);
  --code-bg: #f7f7f3;
  --overlay: rgba(20, 21, 20, 0.42);
  --success: #177245;
  --success-bg: #e8f5ee;
  --danger: #b42318;
  --danger-bg: #fee9e7;
  --warning: var(--primary-hover);
  --warning-bg: var(--primary-soft);
  --info: #255f99;
  --info-bg: #e8f1fb;
}

@media (max-width: 900px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
  .crm-rail {
    position: sticky;
    top: 0;
    flex-direction: row;
    width: 100%;
    height: 58px;
    padding: 8px 12px;
  }
  .crm-rail-logo,
  .crm-rail-button {
    width: 38px;
    height: 38px;
  }
  .crm-rail-divider,
  .crm-sidebar-org,
  .crm-sidebar-user {
    display: none;
  }
  .crm-rail-spacer {
    flex: 1 1 auto;
  }
  .crm-sidebar {
    position: sticky;
    top: 58px;
    height: auto;
    max-height: 44vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .crm-nav-search {
    margin: 12px;
  }
  .crm-sidebar-nav {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px 12px;
  }
  .crm-nav-section {
    min-width: 220px;
    margin-bottom: 0;
  }
  .main-content {
    padding: 16px 12px 88px;
  }
  .route-builder-head,
  .rule-step-title-row,
  .route-builder-id {
    display: block;
  }
  .route-builder-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
  .rule-step {
    grid-template-columns: minmax(0, 1fr);
  }
  .rule-grid,
  .rule-grid-3,
  .rule-grid-base {
    grid-template-columns: minmax(0, 1fr);
  }
}
html,
body {
  min-height: 100%;
  font-family: var(--app-font-family);
  overflow-x: hidden;
}

body {
  margin: 0;
  font-family: var(--app-font-family);
  background: var(--page-bg) !important;
  color: var(--ink);
}

button,
input,
select,
textarea {
  font-family: var(--app-font-family);
}

.relative {
  position: relative;
}

body::before,
body::after,
.app-layout::after {
  display: none !important;
}

.app-layout {
  min-height: 100vh;
  background: var(--page-bg);
}

.main-content {
  box-sizing: border-box;
  width: 100%;
  padding: 22px 28px 88px;
}

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

.app-layout {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
}

.crm-rail {
  display: none;
}

.crm-sidebar-brand {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  margin: 18px 16px 12px;
}

.crm-sidebar-logo {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  background: transparent;
  color: var(--primary);
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 12px 26px rgb(var(--primary-rgb)/0.23), 0 1px 0 rgba(255, 255, 255, 0.16) inset;
}

.crm-sidebar-logo-mark {
  display: block;
  width: 100%;
  height: 100%;
}

.crm-sidebar-brand-text span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.crm-sidebar-brand-text strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.crm-sidebar-collapse {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  background: var(--control-bg) !important;
  color: var(--ink-muted);
}

.crm-sidebar-collapse:hover {
  background: var(--control-hover) !important;
  color: var(--ink);
}

.crm-sidebar {
  position: sticky;
  top: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  height: 100vh;
  border-right: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 1px 0 0 rgba(31, 33, 31, 0.03);
}

.crm-nav-collapsed .app-layout {
  grid-template-columns: 76px minmax(0, 1fr);
}

.crm-nav-collapsed .crm-sidebar {
  width: 76px;
  min-width: 76px;
  overflow: visible;
}

.crm-nav-collapsed .crm-sidebar {
  align-items: center;
}

.crm-nav-collapsed .crm-sidebar-brand {
  grid-template-columns: 42px;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  margin: 18px 0 0;
}

.crm-nav-collapsed .crm-sidebar-brand-text,
.crm-nav-collapsed .crm-sidebar-org,
.crm-nav-collapsed .crm-nav-search,
.crm-nav-collapsed .crm-nav-section-toggle,
.crm-nav-collapsed .crm-nav-link span,
.crm-nav-collapsed .crm-sidebar-user-text,
.crm-nav-collapsed .crm-sidebar-user-button > i {
  display: none;
}

.crm-nav-collapsed .crm-sidebar-collapse {
  position: absolute;
  top: 76px;
  left: calc(50% - 17px);
}

.crm-nav-collapsed .crm-sidebar-nav {
  width: 100%;
  padding: 76px 10px 12px;
}

.crm-nav-collapsed .crm-nav-section {
  width: 100%;
  margin-bottom: 17px;
}

.crm-nav-collapsed .crm-nav-section-items {
  justify-items: center;
  gap: 8px;
}

.crm-nav-collapsed .crm-nav-link {
  width: 56px;
  justify-content: center;
  min-height: 42px;
  padding: 0;
}

.crm-nav-collapsed .crm-nav-link i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.crm-nav-collapsed .crm-sidebar-user {
  width: 100%;
  margin: 0 10px 14px;
}

.crm-nav-collapsed .crm-sidebar-footer {
  grid-template-columns: 42px;
  justify-content: center;
  gap: 12px;
  margin: 0 0 14px;
  padding-top: 16px;
}

.crm-nav-collapsed .crm-sidebar-footer-action {
  width: 42px;
  height: 42px;
}

.crm-nav-collapsed .crm-sidebar-footer-action i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

.crm-nav-collapsed .crm-sidebar-message-popover {
  left: calc(100% + 10px);
  bottom: 0;
}

.crm-nav-collapsed .crm-sidebar-user-button {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  min-height: 42px;
  padding: 3px;
}

.crm-nav-collapsed .crm-sidebar-avatar {
  width: 34px;
  height: 34px;
  justify-self: center;
}

.crm-nav-collapsed .crm-sidebar-menu {
  left: 66px;
  right: auto;
  bottom: 0;
  width: 190px;
}

.crm-sidebar-org {
  display: grid;
  gap: 10px;
  margin: 20px 18px 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--surface-muted);
}

.crm-sidebar-org span,
.crm-nav-section h2,
.crm-sidebar-user-button small {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: uppercase;
}

.crm-sidebar-org strong {
  display: none;
}

.crm-current-time {
  display: grid;
  gap: 3px;
  margin-top: 8px;
}

.crm-current-time strong {
  display: block;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 18px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: 0;
}

.crm-sidebar-org .crm-current-time span,
.crm-current-time span,
.crm-current-time small {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.crm-current-time small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-current-time-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 700;
}

.crm-nav-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 18px 18px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink-muted);
}

.crm-nav-search input {
  width: 100%;
  min-height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.crm-nav-search input:focus {
  box-shadow: none !important;
}

.crm-nav-search button {
  display: grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink-muted);
}

.crm-nav-search-results {
  display: grid;
  gap: 8px;
}

.crm-nav-search-result {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.crm-nav-search-result:hover,
.crm-nav-search-result-active {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--border));
  background: var(--primary-soft);
}

.crm-nav-search-result i {
  color: var(--ink-muted);
  text-align: center;
}

.crm-nav-search-result-active i,
.crm-nav-search-result:hover i {
  color: var(--primary);
}

.crm-nav-search-result span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.crm-nav-search-result strong,
.crm-nav-search-result small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-nav-search-result strong {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.15;
}

.crm-nav-search-result small {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

.crm-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 14px 16px;
  scrollbar-width: thin;
}

.crm-nav-section {
  margin-bottom: 14px;
}

.crm-nav-section-toggle {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--ink-muted);
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
  text-align: left;
  text-transform: uppercase;
}

.crm-nav-section-toggle span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.crm-nav-section-toggle i {
  width: 16px;
  flex: 0 0 16px;
  text-align: center;
}

.crm-nav-section-toggle:hover {
  background: var(--surface-muted) !important;
  color: var(--ink);
}

.crm-nav-section-items {
  display: grid;
  gap: 3px;
  margin-top: 4px;
}

.crm-nav-section-items-collapsed {
  display: none;
}

.crm-nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  border-radius: 8px;
  padding: 9px 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.15;
}

.crm-nav-dashboard-link {
  margin-bottom: 12px;
}

.crm-nav-link i {
  width: 18px;
  color: #2f342d;
  text-align: center;
}

.crm-nav-link:hover {
  background: var(--surface-muted);
}

.crm-nav-link-active {
  background: var(--primary-soft);
  color: var(--ink);
}

.crm-nav-link-active i {
  color: var(--primary);
}

.crm-nav-link-muted {
  color: var(--ink-muted);
}

.crm-nav-link-muted i {
  color: var(--ink-muted);
}

.crm-nav-empty {
  margin: 10px 4px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--ink-muted);
  font-size: 13px;
}

.crm-sidebar-user {
  position: relative;
  margin: 0 14px 16px;
}

.crm-sidebar-user-button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface-muted) !important;
  padding: 8px 10px;
  color: var(--ink);
  text-align: left;
}

.crm-sidebar-avatar {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary);
  color: var(--button-primary-text);
  font-weight: 800;
}

.crm-sidebar-user-button strong,
.crm-sidebar-user-button small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-sidebar-user-button strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.crm-sidebar-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 46px rgba(31, 33, 31, 0.16);
}

.crm-sidebar-menu a,
.crm-sidebar-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 12px;
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  font-size: 13px;
  font-weight: 650;
}

.crm-sidebar-menu a:hover,
.crm-sidebar-menu button:hover {
  background: var(--surface-muted) !important;
}

.crm-sidebar-footer {
  position: relative;
  display: grid;
  grid-template-columns: 38px 38px 38px 38px;
  gap: 8px;
  margin: 0 16px 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.crm-sidebar-footer-action {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--control-bg) !important;
  color: var(--ink-muted);
  text-decoration: none;
}

.crm-sidebar-footer-action:hover {
  background: var(--control-hover) !important;
  color: var(--ink);
}

.crm-sidebar-notifications {
  position: relative;
}

.crm-sidebar-message-button {
  position: relative;
}

.crm-mobile-menu-toggle {
  display: none;
}

.crm-sidebar-message-button > span {
  position: absolute;
  right: -4px;
  top: -5px;
  display: grid;
  min-width: 17px;
  height: 17px;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast);
  font-size: 10px;
  font-weight: 820;
  line-height: 1;
}

.crm-sidebar-message-popover {
  position: absolute;
  left: -46px;
  bottom: calc(100% + 10px);
  z-index: 60;
  display: grid;
  width: min(330px, 100vw - 28px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 22px 58px rgba(31, 33, 31, 0.18);
}

.crm-sidebar-message-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding: 10px 10px 9px 12px;
}

.crm-sidebar-message-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-sidebar-message-head button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  cursor: pointer;
}

.crm-sidebar-message-list {
  display: grid;
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding: 10px;
}

.crm-sidebar-message {
  display: grid;
  gap: 5px;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.crm-sidebar-message-info {
  border-left-color: #3b82f6;
}

.crm-sidebar-message-warning {
  border-left-color: #d97706;
}

.crm-sidebar-message-success {
  border-left-color: #16a34a;
}

.crm-sidebar-message strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.crm-sidebar-message p,
.crm-sidebar-message-empty {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.42;
}

.crm-sidebar-message-popover > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-top: 1px solid var(--border);
  color: var(--primary);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.crm-sidebar-message-popover > a:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

@media (max-width: 760px) {
  .crm-sidebar-message-popover,
  .crm-nav-collapsed .crm-sidebar-message-popover {
    right: 0;
    left: auto;
    bottom: calc(100% + 10px);
    width: min(320px, 100vw - 18px);
  }
}
.dark .crm-sidebar {
  background: #121510;
  border-right-color: var(--border);
}

.dark .crm-sidebar-org,
.dark .crm-nav-search,
.dark .crm-sidebar-user-button {
  background: var(--surface-muted) !important;
}

.dark .crm-nav-link i {
  color: var(--ink-muted);
}

.dark .crm-nav-link-active {
  background: color-mix(in srgb, var(--primary) 18%, #171b1e) !important;
  color: var(--primary);
}

.dark .crm-nav-link-active i {
  color: var(--primary);
}

.dark .crm-sidebar-menu {
  background: var(--surface);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42);
}

.dark .crm-sidebar-footer-action {
  background: var(--surface-muted) !important;
}

.page-container,
.leads-page {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.boxes-page > * + *,
.integration-command + *,
.queue-command + *,
.queue-attention + *,
.queue-mobile-list + *,
.users-simple-head + *,
.users-secret-panel + *,
.users-filter-panel + *,
.logs-command + *,
.logs-filter-panel + *,
.logs-error + *,
.health-command + *,
.health-snapshot + * {
  margin-top: 18px;
}

.lead-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
  padding: 2px 2px 0;
}

.lead-list-head > div:first-child {
  min-width: 0;
}

.lead-list-head span {
  display: block;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.lead-list-head h1 {
  margin: 4px 0 4px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.1;
}

.lead-list-head p {
  max-width: 760px;
  color: var(--ink-muted);
  font-size: 14px;
}

.lead-page-size {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.lead-page-size > span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.15;
  text-transform: uppercase;
}

.lead-page-size .custom-select-trigger {
  min-height: 42px;
  border-radius: 10px;
}

.lead-table-footer {
  display: grid;
  grid-template-columns: minmax(180px, max-content) minmax(220px, 1fr) minmax(260px, max-content);
  align-items: end;
  gap: 12px;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px;
}

.lead-table-footer-count {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
}

.lead-table-footer-count span,
.lead-table-footer-count em {
  color: var(--ink-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 780;
  line-height: 1;
  text-transform: uppercase;
}

.lead-table-footer-count strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 820;
  line-height: 1;
}

.lead-table-pagination {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 1px;
  scrollbar-width: none;
}

.lead-table-pagination::-webkit-scrollbar {
  display: none;
}

.lead-page-button-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lead-page-gap {
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 800;
  padding: 0 2px;
}

.lead-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 780;
  line-height: 1;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.lead-page-button:hover:not(:disabled),
.lead-page-button.is-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.lead-page-button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.lead-table-footer-actions {
  display: inline-flex;
  grid-column: 3;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
  justify-self: end;
  min-width: 0;
}

.lead-load-more {
  min-height: 42px;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .lead-table-footer {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .lead-table-footer-count,
  .lead-table-pagination,
  .lead-table-footer-actions {
    justify-self: stretch;
  }
  .lead-table-pagination {
    justify-content: flex-start;
  }
  .lead-table-footer-actions {
    grid-column: auto;
    justify-content: space-between;
  }
}
@media (max-width: 760px) {
  .lead-list-head {
    display: grid;
    align-items: stretch;
  }
  .lead-page-size {
    width: 100%;
    min-width: 0;
  }
  .lead-table-footer-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .lead-table-pagination {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .lead-load-more {
    width: 100%;
  }
}
.lead-filter-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
  max-width: 100%;
}

.lead-filter-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lead-filter-search-wrap {
  position: relative;
  flex: 1 1 420px;
  min-width: 260px;
}

.lead-filter-search {
  display: block;
  width: 100%;
  min-width: 0;
}

.lead-filter-search,
.lead-filter-grid .crm-select,
.lead-filter-date-grid input {
  height: 34px !important;
}

.lead-filter-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lead-columns-menu {
  position: relative;
  display: inline-flex;
}

.lead-toolbar-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 720;
  white-space: nowrap;
}

.lead-toolbar-button:hover:not(:disabled),
.lead-toolbar-button-active {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  background: var(--surface-raised);
}

.lead-toolbar-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.lead-toolbar-button-primary,
.lead-toolbar-button-primary:hover:not(:disabled) {
  border-color: var(--button-primary-bg) !important;
  background: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
}

.lead-toolbar-button-loading {
  cursor: wait;
  opacity: 0.82;
}

.lead-filter-body {
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.lead-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.lead-filter-head h3 {
  flex: 0 0 auto;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.lead-filter-head-main {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
}

.lead-date-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-bottom: 0;
}

.lead-date-presets-label {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
}

.lead-date-presets .crm-select {
  width: min(260px, 100%);
}

.lead-date-presets.lead-date-presets-mobile {
  display: none;
}

.lead-date-presets-scroll {
  display: flex;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.lead-date-preset {
  display: inline-flex;
  min-height: 30px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
}

.lead-date-preset:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  background: var(--surface-raised);
}

.lead-date-preset-active {
  border-color: color-mix(in srgb, var(--button-primary-bg) 72%, var(--border));
  background: var(--selection-bg);
  color: var(--danger);
}

.lead-filter-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.lead-filter-advanced {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 720;
}

.lead-filter-advanced:hover,
.lead-filter-advanced-active {
  border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
  background: var(--selection-bg);
}

.lead-filter-reset {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--border));
  border-radius: 8px !important;
  background: var(--danger-bg);
  color: var(--danger);
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 720;
}

.lead-filter-reset:hover {
  background: color-mix(in srgb, var(--danger-bg) 82%, var(--danger));
}

.lead-filter-reset svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
}

.lead-filter-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 10px;
}

.table-container {
  max-width: 100%;
  min-width: 0;
}

.lead-table-container {
  margin-top: 18px;
}

.table-container.has-selection-panel {
  padding-bottom: 96px;
}

.leads-page.has-selection-panel {
  padding-bottom: 96px;
}

.table-container .card {
  max-width: 100%;
  overflow: hidden;
}

.table-container .overflow-x-auto {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: visible;
}

.leads-table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
}

.leads-table .cb {
  position: relative;
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  vertical-align: middle;
}

.leads-table .cb input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0;
  cursor: pointer;
  opacity: 0;
}

.leads-table .cb .mark {
  display: block;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--border-strong, var(--border));
  border-radius: 5px;
  background: var(--surface-muted);
}

.leads-table .cb input:checked + .mark {
  border-color: var(--primary);
  background: linear-gradient(135deg, transparent 43%, var(--button-primary-text) 43% 57%, transparent 57%) 42% 57%/55% 55% no-repeat, var(--primary);
}

.leads-table-selectable th:first-child,
.leads-table-selectable td:first-child {
  width: 46px;
  min-width: 46px;
  max-width: 46px;
  text-align: center;
}

.leads-table thead th.lead-column-header {
  position: relative;
  padding-right: 20px !important;
  user-select: none;
}

.lead-column-head {
  display: flex;
  align-items: center;
  min-width: 0;
}

.lead-column-sort {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  gap: 7px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.lead-column-sort:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary) 55%, transparent);
  outline-offset: 3px;
  border-radius: 6px;
}

.lead-column-drag-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 10px;
  color: var(--ink-muted);
  opacity: 0.52;
  cursor: grab;
}

.lead-column-drag-icon svg {
  display: block;
  width: 10px;
  height: 14px;
  fill: currentColor;
}

.lead-column-label {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-column-header:active .lead-column-drag-icon {
  cursor: grabbing;
}

.lead-column-dragging {
  opacity: 0.62;
}

.lead-column-drop-target {
  box-shadow: inset 2px 0 0 var(--primary);
}

.lead-column-resize-handle {
  position: absolute;
  top: 7px;
  right: 0;
  bottom: 7px;
  width: 12px;
  min-width: 12px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: col-resize;
}

.lead-column-resize-handle::after {
  position: absolute;
  top: 1px;
  right: 5px;
  bottom: 1px;
  width: 2px;
  border-radius: 999px;
  background: transparent;
  content: "";
  transition: background 0.16s ease, opacity 0.16s ease;
}

.lead-column-resize-handle:hover::after,
.lead-column-resize-handle-active::after {
  background: color-mix(in srgb, var(--primary) 72%, transparent);
}

.lead-country-cell {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 7px;
  font-weight: 650;
}

.lead-country-flag {
  display: inline-grid;
  flex: 0 0 auto;
  width: 24px;
  height: 17px;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 5px;
  background: var(--surface-muted);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow, #000) 10%, transparent);
}

.lead-country-flag img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lead-country-flag-fallback img {
  display: none;
}

.lead-country-flag-fallback::after {
  color: var(--ink-muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  content: attr(data-country);
}

.lead-filter-grid-advanced {
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  margin-top: 10px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.lead-filter-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 720;
}

.lead-filter-dates {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.lead-filter-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.reports-page {
  display: grid;
  gap: 16px;
}

.reports-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
}

.reports-head > * {
  min-width: 0;
}

.reports-head span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 780;
  text-transform: uppercase;
}

.reports-head h1 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: clamp(32px, 4vw, 52px);
  line-height: 0.95;
  letter-spacing: 0;
}

.reports-head p {
  max-width: 620px;
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: 15px;
}

.reports-head-actions,
.reports-export-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.reports-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

.reports-card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.reports-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.reports-card-head > div {
  min-width: 0;
}

.reports-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 780;
}

.reports-card-head p,
.reports-note {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.reports-card-head > span {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 740;
}

.reports-subhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.reports-subhead-spaced {
  margin-top: 14px;
}

.reports-subhead > span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.docs-page {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.docs-head {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.14), transparent 34%), linear-gradient(315deg, rgba(37, 95, 153, 0.07), transparent 32%), var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
  padding: 16px;
}

.docs-head > div:first-child {
  min-width: 0;
}

.docs-head span,
.docs-panel > span,
.docs-panel-head span,
.docs-key-pill span,
.docs-subscription-card span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.docs-head h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.12;
  font-weight: 780;
  letter-spacing: 0;
}

.docs-head p {
  max-width: 760px;
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.docs-head-card {
  display: grid;
  align-content: center;
  min-width: 240px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgb(var(--primary-rgb)/0.06);
  padding: 12px;
}

.docs-head-card strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-head-card small {
  overflow: hidden;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 4px;
}

.docs-nav a {
  display: inline-flex;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink-muted);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.docs-nav a:hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  color: var(--ink);
}

.docs-nav a.active {
  border-color: color-mix(in srgb, var(--primary) 46%, var(--border));
  background: var(--surface);
  color: var(--primary);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.05);
}

.docs-nav i {
  flex: 0 0 auto;
  font-size: 12px;
}

.docs-nav span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.docs-panel {
  align-self: start;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
  padding: 13px;
}

.docs-panel-wide {
  grid-column: 1/-1;
}

.docs-search-panel {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.docs-search-panel > i {
  color: var(--ink-muted);
  font-size: 13px;
}

.docs-search-panel input {
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  outline: 0;
}

.docs-search-panel input::placeholder {
  color: var(--ink-muted);
}

.docs-search-panel button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  cursor: pointer;
}

.docs-wiki-layout {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.docs-toc-panel {
  position: sticky;
  top: 16px;
}

.docs-toc-panel nav {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.docs-toc-panel a {
  display: block;
  overflow: hidden;
  border-radius: 7px;
  color: var(--ink-muted);
  padding: 8px 9px;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-toc-panel a:hover {
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  color: var(--ink);
}

.docs-topic-stack {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.docs-topic-card h2,
.docs-faq-panel h2 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 780;
  letter-spacing: 0;
}

.docs-topic-card p,
.docs-panel > p,
.docs-muted-copy {
  margin: 7px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.docs-topic-card ol {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.docs-topic-card li::marker {
  color: var(--primary);
  font-weight: 780;
}

.docs-topic-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.docs-faq-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.docs-faq-list details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 0;
}

.docs-faq-list summary {
  cursor: pointer;
  color: var(--ink);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.3;
}

.docs-faq-list p {
  margin: 0;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  padding: 10px 12px 12px;
  font-size: 14px;
  line-height: 1.45;
}

.docs-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 34%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
  padding: 10px 12px;
}

.docs-warning i {
  margin-top: 2px;
  color: var(--primary);
}

.docs-warning p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.docs-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.docs-fields-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: var(--surface);
}

.docs-fields-table th,
.docs-fields-table td {
  border-bottom: 1px solid var(--border);
  padding: 9px 10px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  vertical-align: top;
}

.docs-fields-table th {
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

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

.docs-fields-table code,
.docs-inline-code {
  overflow-wrap: anywhere;
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 2px 5px;
  font-size: 12px;
}

.docs-example-tabs {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.docs-example-tabs details {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.docs-example-tabs summary {
  cursor: pointer;
  color: var(--ink);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 780;
  text-transform: capitalize;
}

.docs-example-tabs pre {
  max-height: 520px;
  margin: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 20px 20px;
  overflow: auto;
  background: var(--surface-strong);
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
  tab-size: 2;
}

.docs-error-list li {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 8px;
}

.docs-error-list strong {
  color: var(--primary);
}

.messages-page {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: none;
}

.messages-toolbar {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 180px)) auto auto;
  gap: 10px;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.messages-toolbar > div {
  display: grid;
  align-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 12px;
}

.messages-toolbar span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

.messages-toolbar strong {
  color: var(--ink);
  font-size: 22px;
  line-height: 1.1;
}

.messages-toolbar button {
  align-self: center;
  min-height: 40px;
}

.messages-list {
  display: grid;
  gap: 12px;
}

.messages-card,
.messages-empty {
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.messages-card-info {
  border-left-color: #3b82f6;
}

.messages-card-warning {
  border-left-color: #d97706;
}

.messages-card-success {
  border-left-color: #16a34a;
}

.messages-card-read {
  opacity: 0.72;
}

.messages-card details {
  padding: 0;
}

.messages-card summary {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  padding: 15px 16px;
}

.messages-card summary span,
.messages-card summary em {
  color: var(--ink-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.messages-card summary strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  font-weight: 820;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messages-card p {
  margin: 0;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  padding: 14px 16px 0;
  font-size: 15px;
  line-height: 1.5;
}

.messages-card ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 16px 0 36px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

.messages-card li::marker {
  color: var(--primary);
}

.messages-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 15px 16px 16px;
}

.messages-empty {
  display: grid;
  gap: 6px;
  border-left-color: var(--border);
  padding: 18px;
}

.messages-empty strong {
  color: var(--ink);
  font-size: 18px;
}

.messages-empty p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
}

.docs-license-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  align-items: stretch;
}

.docs-license-grid .docs-panel {
  display: grid;
  align-self: stretch;
  align-content: start;
}

.docs-license-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.docs-license-summary {
  display: grid;
  gap: 12px;
}

.docs-license-summary .docs-panel-head {
  margin-bottom: 0;
}

.docs-license-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.docs-license-summary-grid .docs-subscription-card {
  margin-top: 0;
}

.docs-action-link {
  flex: 0 0 auto;
  min-height: 38px;
  text-decoration: none;
}

.docs-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 12px;
}

.docs-panel h2,
.docs-panel-head h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 780;
  line-height: 1.2;
}

.docs-panel p,
.docs-panel-head p,
.docs-message-list p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.docs-key-pill {
  flex: 0 0 auto;
  min-width: 210px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.docs-key-pill code,
.docs-inline-code {
  display: inline-flex;
  max-width: 100%;
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--ink);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.3;
}

.docs-key-pill code {
  overflow: hidden;
  margin-top: 6px;
  padding: 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-inline-code {
  padding: 10px 12px;
}

.docs-postman-link-card {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  min-width: 0;
}

.docs-postman-link-card span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
}

.docs-postman-link-card code {
  display: block;
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
  padding: 11px 12px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: nowrap;
}

.docs-code-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: 9px 10px;
  min-width: 0;
}

.docs-code-full {
  grid-column: 1/-1;
}

.docs-code-grid label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.docs-code-grid pre {
  max-height: 260px;
  min-height: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-strong);
  color: var(--ink);
  margin: 0;
  padding: 9px 10px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.docs-request-panel .docs-code-grid {
  grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1.38fr);
}

.docs-api-response-panel .docs-code-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.docs-api-response-panel .docs-code-grid pre {
  max-height: 210px;
}

.docs-api-response-panel .docs-code-full {
  grid-column: auto;
}

.docs-list {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.docs-api-rules-panel .docs-list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.docs-list li,
.docs-message-list div,
.docs-subscription-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 12px;
}

.docs-list li {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.docs-subscription-card {
  margin-top: 12px;
}

.docs-license-grid .docs-subscription-card,
.docs-license-grid .docs-message-list {
  margin-top: auto;
}

.docs-subscription-card strong {
  display: block;
  margin-top: 5px;
  color: var(--success);
  font-size: 18px;
  line-height: 1.15;
}

.docs-subscription-card small {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 13px;
}

.docs-license-status strong {
  color: var(--success);
}

.docs-license-status-warning strong,
.docs-license-status-unconfigured strong {
  color: var(--warning);
}

.docs-license-status-expired strong,
.docs-license-status-suspended strong {
  color: var(--danger);
}

.docs-license-facts,
.docs-license-usage-grid {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.docs-license-facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 8px;
}

.docs-license-facts div,
.docs-license-usage-grid div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 12px;
}

.docs-license-facts span,
.docs-license-usage-grid span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.docs-license-facts strong,
.docs-license-usage-grid strong {
  display: block;
  overflow: hidden;
  margin-top: 5px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-license-usage-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.docs-license-usage-grid small {
  display: block;
  overflow: hidden;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.docs-message-list {
  display: grid;
  gap: 8px;
}

.docs-message-list strong {
  color: var(--ink);
  font-size: 15px;
}

.health-docs-page .health-command + .docs-nav {
  margin-top: 0;
}

.reports-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.reports-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  min-width: 0;
  margin-top: 14px;
}

.reports-period-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
  min-width: 0;
  margin-top: 14px;
}

.reports-period-grid .relative,
.reports-period-grid .crm-select {
  width: 100%;
}

.reports-period-reset {
  min-height: 36px;
  white-space: nowrap;
}

.reports-filter-grid .input {
  width: 100%;
  min-height: 36px;
}

.reports-filter-grid .relative,
.reports-filter-grid .crm-select {
  width: 100%;
}

.reports-attr-filter > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
}

.reports-controls-dates .input {
  width: 100%;
  min-height: 36px;
}

.reports-export-actions {
  justify-content: flex-start;
  margin-top: 14px;
}

.reports-export-actions .lead-toolbar-button {
  min-width: 138px;
}

.reports-template-panel {
  container-type: inline-size;
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.reports-template-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 780;
}

.reports-template-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.reports-template-save {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 8px;
  min-width: 0;
}

.reports-template-save .input {
  grid-column: 1/-1;
  width: 100%;
  min-height: 38px;
}

.reports-template-save .lead-toolbar-button {
  width: 100%;
  min-height: 38px;
  justify-content: center;
  white-space: normal;
}

.reports-template-save-note {
  grid-column: 1/-1;
  margin: -2px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.reports-template-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

@container (max-width: 430px) {
  .reports-template-save {
    grid-template-columns: minmax(0, 1fr);
  }
}
.reports-template-row {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.reports-template-row-active {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface-muted));
}

.reports-template-row-dirty {
  border-color: color-mix(in srgb, #f59e0b 48%, var(--border));
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), transparent 38%), var(--surface-muted);
}

.reports-template-row strong,
.reports-template-row small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reports-template-row strong {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.reports-template-row strong em {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, currentColor 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, var(--surface));
  color: var(--primary);
  padding: 3px 7px;
  font-size: 10px;
  font-style: normal;
  font-weight: 820;
  line-height: 1;
  text-transform: uppercase;
}

.reports-template-row-dirty strong em {
  color: #d97706;
}

.reports-template-row span,
.reports-template-row small,
.reports-template-empty {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.reports-template-row small {
  margin-top: 6px;
  font-weight: 760;
  text-transform: uppercase;
}

.reports-template-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
  min-width: 0;
}

.reports-template-chips span {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-template-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.reports-template-action-icon {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  min-width: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.reports-template-action-icon:hover:not(:disabled) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-1px);
}

.reports-template-action-icon:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
}

.reports-template-action-icon span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.reports-template-action-danger {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  background: var(--danger-bg);
  color: var(--danger);
}

.reports-template-action-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--border));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
}

.reports-template-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px;
}

.reports-columns-head-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.reports-columns-head-actions > span {
  margin-right: 2px;
}

.reports-columns-count {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 740;
}

.reports-columns-head-actions button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.reports-columns-head-actions button:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-1px);
}

.reports-columns-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  min-width: 0;
}

.reports-column-row {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 7px 8px;
}

.reports-column-row-active {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: var(--surface-muted);
}

.reports-column-row label {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
}

.reports-column-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.reports-column-row label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reports-column-row > div {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
}

.reports-column-row button {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-muted);
}

.reports-column-row button:disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.reports-preview {
  min-width: 0;
}

.reports-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--ink-muted);
  font-size: 14px;
}

.reports-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.reports-table th,
.reports-table td {
  border-bottom: 1px solid var(--border);
  padding: 9px 11px;
  color: var(--ink);
  font-size: 12px;
  text-align: left;
  white-space: nowrap;
}

.reports-table th {
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-weight: 780;
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .lead-filter-toolbar,
  .reports-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .reports-head h1,
  .reports-head p {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  .lead-filter-actions,
  .lead-filter-head,
  .reports-head-actions {
    justify-content: stretch;
  }
  .lead-filter-head,
  .lead-filter-head-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .lead-filter-actions > *,
  .lead-toolbar-button,
  .reports-head-actions .lead-toolbar-button {
    width: 100%;
  }
  .lead-filter-grid,
  .lead-filter-date-grid,
  .reports-layout,
  .reports-controls,
  .reports-period-grid,
  .reports-filter-grid,
  .reports-attr-filter > div {
    grid-template-columns: 1fr;
  }
  .reports-template-save {
    grid-template-columns: minmax(0, 1fr);
  }
  .reports-columns-head-actions {
    justify-content: flex-start;
  }
  .reports-subhead {
    align-items: stretch;
    flex-direction: column;
  }
  .lead-date-presets.lead-date-presets-desktop {
    display: none;
  }
  .lead-date-presets.lead-date-presets-mobile {
    display: grid;
    align-items: stretch;
  }
  .lead-date-presets .crm-select {
    width: 100%;
  }
  .lead-date-presets-scroll {
    margin-inline: -2px;
    padding-bottom: 6px;
  }
}
@media (max-width: 1500px) {
  .reports-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .reports-template-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .reports-template-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}
@media (max-width: 720px) {
  .table-container .overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 8px;
  }
  .leads-table,
  .leads-table thead,
  .leads-table tbody,
  .leads-table tr,
  .leads-table td {
    display: revert;
    width: auto;
  }
  .leads-table {
    width: max-content;
    min-width: max(980px, 250vw);
    table-layout: fixed;
  }
  .leads-table thead {
    display: table-header-group;
  }
  .leads-table tbody {
    display: table-row-group;
  }
  .leads-table tbody tr {
    display: table-row;
    background: var(--surface);
  }
  .leads-table thead th,
  .leads-table tbody td {
    display: table-cell;
    min-width: 132px;
    max-width: 190px;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .leads-table tbody td::before {
    content: none;
  }
  .leads-table-selectable th:first-child,
  .leads-table-selectable td:first-child {
    position: sticky;
    left: 0;
    z-index: 4;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .leads-table-selectable thead th:first-child {
    z-index: 7;
    background: var(--table-head);
  }
  .leads-table-selectable th:nth-child(2),
  .leads-table-selectable td:nth-child(2) {
    position: sticky;
    left: 46px;
    z-index: 3;
    width: 154px;
    min-width: 154px;
    max-width: 154px;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .leads-table-selectable thead th:nth-child(2) {
    z-index: 6;
    background: var(--table-head);
  }
  .leads-table:not(.leads-table-selectable) th:first-child,
  .leads-table:not(.leads-table-selectable) td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 154px;
    min-width: 154px;
    max-width: 154px;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--border);
  }
  .leads-table:not(.leads-table-selectable) thead th:first-child {
    z-index: 6;
    background: var(--table-head);
  }
  .leads-table tbody td[colspan] {
    display: table-cell;
    min-width: 320px;
    text-align: center;
  }
  .leads-table .badge,
  .leads-table .status-indicator,
  .leads-table .brand-status-value,
  .leads-table .crm-status-badge {
    max-width: 150px;
  }
}
.crm-select {
  display: flex;
  width: 100%;
  height: 36px;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--control-bg, var(--surface));
  color: var(--ink);
  padding: 7px 10px;
  text-align: left;
  outline: none !important;
  box-shadow: none !important;
}

.crm-select:hover,
.crm-select-open {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border));
  background: var(--surface-raised);
}

.crm-select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.crm-select-value,
.crm-select-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-select-value > span:last-child,
.crm-select-placeholder > span:last-child,
.crm-select-option-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-select-value-icon,
.crm-select-option-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
}

.crm-select-value-icon .lead-country-cell,
.crm-select-option-icon .lead-country-cell {
  gap: 5px;
}

.crm-select-value-icon .lead-country-flag,
.crm-select-option-icon .lead-country-flag {
  width: 22px;
  height: 16px;
  border-radius: 4px;
}

.crm-select-placeholder {
  color: var(--ink-muted);
}

.crm-select-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  transition: transform 140ms ease;
}

.crm-select-open .crm-select-icon {
  transform: rotate(180deg);
}

.crm-select-menu {
  position: fixed;
  z-index: 20000;
  top: auto;
  left: auto;
  max-height: 260px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 86%, var(--ink) 7%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
  padding: 4px;
}

.crm-select-menu-up {
  top: auto;
  bottom: auto;
}

.crm-select-option {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  min-height: 30px;
  border-radius: 7px;
  color: var(--ink);
  cursor: pointer;
  overflow: hidden;
  padding: 6px 8px;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-select-option i,
.crm-select-option-spacer {
  display: inline-flex;
  width: 9px;
  flex: 0 0 9px;
  justify-content: center;
  color: var(--primary);
  font-size: 11px;
}

.crm-select-option-spacer {
  display: none;
  width: 0;
  flex-basis: 0;
}

.crm-select-option-label {
  flex: 1 1 auto;
  text-align: left;
}

.crm-select-option:hover,
.crm-select-option-active {
  background: color-mix(in srgb, var(--selection-bg) 78%, var(--surface) 22%);
  color: var(--ink);
}

.crm-select-option-active {
  font-weight: 720;
}

.dark .crm-select-menu {
  border-color: color-mix(in srgb, var(--border) 78%, #ffffff 12%);
  background: color-mix(in srgb, var(--surface-raised) 82%, #ffffff 7%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
}

.dark .crm-select-option:hover,
.dark .crm-select-option-active {
  background: color-mix(in srgb, var(--selection-bg) 68%, #ffffff 8%);
}

.column-picker-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  width: min(760px, 100vw - 24px);
  max-height: min(590px, 100dvh - 232px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 0;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.3);
}

.column-picker-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.column-picker-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 780;
  line-height: 1.2;
}

.column-picker-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.column-picker-head-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  max-width: 390px;
}

.column-picker-head-actions span,
.column-picker-head-actions button {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.column-picker-head-actions span {
  color: var(--ink-muted);
}

.column-picker-head-actions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.column-picker-head-actions .column-picker-close {
  justify-content: center;
  width: 30px;
  padding: 0;
}

.column-picker-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1 1 auto;
  gap: 12px;
  min-height: 0;
  padding: 14px;
}

.column-picker-list {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.column-picker-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.column-picker-title button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 720;
}

.column-picker-title button:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
}

.column-picker-title button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}

.column-picker-search {
  margin-bottom: 10px;
}

.column-picker-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.column-picker-row {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  padding: 9px 10px;
}

.column-picker-row:last-child {
  border-bottom: 0;
}

.column-picker-row:hover,
.column-picker-row-selected {
  background: var(--selection-bg);
}

.column-picker-row-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.column-picker-row-main > span:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
}

.column-picker-row-main strong,
.column-picker-row-main em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.column-picker-row-main strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.column-picker-row-main em {
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
}

.column-picker-row-icon,
.column-picker-handle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  color: var(--ink-muted);
  font-size: 12px;
}

.column-picker-handle {
  cursor: grab;
}

.column-picker-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--surface-muted);
  color: var(--primary);
  font-size: 12px;
  font-weight: 760;
}

.column-picker-icon:hover {
  border-color: var(--primary-border);
  background: var(--selection-bg);
}

.column-picker-icon-danger {
  color: var(--danger);
}

.column-picker-empty {
  padding: 18px 12px;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(250, 250, 247, 0.94) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(31, 33, 31, 0.04) !important;
  backdrop-filter: blur(18px);
}

.header-container {
  max-width: 1440px;
  padding: 0 28px;
}

.header-content {
  height: 62px;
  gap: 22px;
}

.header-left,
.header-right {
  flex: 0 0 auto;
}

.header-nav {
  justify-content: flex-start;
  overflow-x: auto;
  scrollbar-width: none;
}

.header-nav::-webkit-scrollbar {
  display: none;
}

.logo-text {
  font-size: 1.18rem;
  letter-spacing: 0;
  color: var(--ink);
}

.nav-item {
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--ink-muted);
  white-space: nowrap;
  font-size: 13px;
  line-height: 1;
}

.nav-item-active {
  background: var(--nav-active-bg);
  color: var(--nav-active-text);
  box-shadow: none;
}

.nav-item-inactive:hover {
  background: rgba(31, 33, 31, 0.07);
  color: var(--ink);
}

.header-time {
  color: var(--ink-muted);
  font-size: 12px;
}

.user-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
}

.card,
.page-title,
.table-wrapper,
.bg-white {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04) !important;
  backdrop-filter: none !important;
}

.card:hover {
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04) !important;
}

.p-6 {
  padding: 18px !important;
}

h1.text-2xl,
.page-title h1 {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 680;
  color: var(--ink);
  letter-spacing: 0;
}

h2.text-lg {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 650;
  color: var(--ink);
}

.text-gray-500,
.text-gray-600,
.text-gray-700 {
  color: var(--ink-muted) !important;
}

.text-gray-900 {
  color: var(--ink) !important;
}

.theme-warning-surface {
  border-color: var(--primary-border) !important;
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
}

.theme-warning-fill {
  border-color: var(--warning) !important;
  background: var(--warning) !important;
  color: var(--primary-contrast) !important;
}

.theme-warning-dot {
  background: var(--warning) !important;
}

input[type=text],
input[type=email],
input[type=password],
input[type=number],
input:not([type]),
select,
textarea {
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: 38px;
}

textarea {
  min-height: auto;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

label {
  color: var(--ink);
}

button,
.btn-primary,
.btn-secondary,
.btn-danger,
.action-btn {
  border-radius: 8px !important;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
  transform: none !important;
}

.btn-primary,
.action-btn-primary {
  background: var(--button-primary-bg) !important;
  border: 1px solid var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
  box-shadow: none !important;
}

.btn-primary:hover,
.action-btn-primary:hover:not(:disabled) {
  background: var(--button-primary-hover) !important;
  border-color: var(--button-primary-hover) !important;
  box-shadow: none !important;
}

.bg-yellow-400,
.bg-yellow-500,
.bg-yellow-600,
.hover\:bg-yellow-600:hover {
  background: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
}

.bg-yellow-500:hover,
.bg-yellow-600:hover {
  background: var(--button-primary-hover) !important;
  border-color: var(--button-primary-hover) !important;
  color: var(--button-primary-text) !important;
}

.bg-yellow-50,
.bg-yellow-100,
.hover\:bg-yellow-50:hover,
.hover\:bg-yellow-100:hover,
.hover\:bg-yellow-200:hover {
  background: var(--primary-soft) !important;
}

.border-yellow-200,
.border-yellow-300,
.border-yellow-500 {
  border-color: var(--primary-border) !important;
}

.text-yellow-500,
.text-yellow-600,
.text-yellow-700,
.text-yellow-800 {
  color: var(--primary) !important;
}

.ring-yellow-300,
.ring-yellow-500,
.focus\:ring-yellow-300:focus,
.focus\:ring-yellow-500:focus {
  --tw-ring-color: var(--ring) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

.focus\:border-yellow-300:focus,
.focus\:border-yellow-500:focus {
  border-color: var(--primary) !important;
}

.btn-secondary,
.action-btn-secondary {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.btn-secondary:hover,
.action-btn-secondary:hover:not(:disabled) {
  background: var(--surface-muted) !important;
}

.btn-danger,
.action-btn-danger {
  background: var(--danger-bg) !important;
  border: 1px solid #f2b8b3 !important;
  color: var(--danger) !important;
  box-shadow: none !important;
}

.btn-danger:hover,
.action-btn-danger:hover:not(:disabled) {
  background: #fbd5d1 !important;
}

.badge,
.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: uppercase;
}

.badge-sent,
.status-sent,
.status-accepted {
  background: var(--success-bg) !important;
  border-color: #c5e7d4 !important;
  color: var(--success) !important;
}

.badge-failed,
.status-failed,
.status-rejected,
.status-unsent {
  background: var(--danger-bg) !important;
  border-color: #f4c4bf !important;
  color: var(--danger) !important;
}

.badge-pending,
.status-new,
.status-queued {
  background: var(--warning-bg) !important;
  border-color: var(--primary-border) !important;
  color: var(--warning) !important;
}

.status-new-lead {
  background: color-mix(in srgb, var(--info-bg) 72%, var(--success-bg)) !important;
  border-color: color-mix(in srgb, var(--info) 42%, var(--border)) !important;
  color: color-mix(in srgb, var(--info) 72%, var(--success)) !important;
}

.status-dot {
  width: 6px;
  height: 6px;
}

.brand-status-value {
  display: inline-flex;
  align-items: center;
  max-width: 220px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-status-value:disabled {
  color: var(--ink-muted);
  cursor: default;
}

.brand-status-value-clickable {
  cursor: pointer;
}

.brand-status-value-clickable:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.crm-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.crm-status-badge span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 999px;
}

.lead-type-text {
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.lead-type-text-new {
  color: #8bdcff;
}

.lead-type-text-sent {
  color: #74e4ac;
}

.lead-type-text-held {
  color: #ffb35c;
}

.lead-type-text-failed {
  color: #ff8f8f;
}

.deposit-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.deposit-pill-yes {
  background: var(--success-bg);
  border-color: #c5e7d4;
  color: var(--success);
}

.deposit-pill-no {
  background: var(--surface-muted);
  color: var(--ink-muted);
}

.sort-arrows {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  margin-left: 2px;
}

.sort-arrow {
  width: 12px;
  height: 12px;
  fill: var(--ink-muted);
  opacity: 0.42;
}

.sort-arrow + .sort-arrow {
  margin-top: -7px;
}

.sort-arrow-active {
  fill: var(--ink);
  opacity: 1;
}

.lead-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.lead-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.16), transparent 34%), var(--surface);
}

.lead-command-kicker,
.lead-next-action span,
.lead-command-strip span,
.issue-board-head span,
.issue-column-head span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.lead-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.lead-command p {
  max-width: 720px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.lead-next-action {
  align-self: stretch;
  border: 1px solid var(--selection-border);
  border-radius: 8px;
  background: var(--selection-bg);
  padding: 14px;
}

.lead-next-action strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.lead-next-action p {
  display: -webkit-box;
  max-width: 100%;
  margin-top: 6px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.lead-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.lead-next-action-calm {
  border-color: var(--border);
  background: var(--surface-muted);
}

.lead-command-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.lead-command-strip div {
  padding: 13px 18px;
  border-right: 1px solid var(--border);
}

.lead-command-strip div:last-child {
  border-right: 0;
}

.lead-command-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.lead-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.lead-summary-card {
  display: flex;
  min-width: 0;
  min-height: 116px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 16px 18px;
  text-align: left;
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.lead-summary-card-button {
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.lead-summary-card-button:hover {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border));
  background: var(--surface-muted);
  transform: translateY(-1px);
}

.lead-summary-card-active {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.lead-summary-label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: uppercase;
}

.lead-summary-value {
  display: block;
  color: var(--ink);
  font-size: 28px;
  font-weight: 780;
  line-height: 1;
}

.lead-summary-hint {
  display: block;
  max-width: 100%;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lead-summary-hint-success {
  color: var(--success);
}

.lead-summary-hint-warning {
  color: var(--warning);
}

.lead-summary-hint-danger {
  color: var(--danger);
}

.lead-summary-hint-info {
  color: var(--info);
}

@media (min-width: 1280px) {
  .lead-summary-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media (min-width: 768px) and (max-width: 1279px) {
  .lead-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .lead-summary-grid {
    grid-template-columns: 1fr;
  }
}
.lead-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.lead-active-filters > span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 720;
}

.lead-active-filters button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px !important;
  background: var(--surface);
  color: var(--ink);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 620;
}

.lead-active-filters button:hover {
  background: var(--surface-muted);
}

.lead-active-filters svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.issue-board {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.issue-board-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.issue-board-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.issue-board-head p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.issue-board-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.issue-column {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.issue-column-warning {
  box-shadow: inset 3px 0 0 var(--warning);
}

.issue-column-danger {
  box-shadow: inset 3px 0 0 var(--danger);
}

.issue-column-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.issue-column-head h3 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}

.issue-column-head p {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.issue-list {
  display: grid;
  gap: 8px;
}

.issue-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.issue-row-active {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--ring);
}

.issue-row-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 10px 12px;
  text-align: left;
}

.issue-row-main:hover {
  background: var(--surface-muted);
}

.issue-count {
  grid-row: span 2;
  align-self: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 760;
}

.issue-reason {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.issue-hint {
  color: var(--ink-muted);
  font-size: 11px;
}

.issue-recover {
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 !important;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 720;
}

.issue-recover:hover:not(:disabled) {
  background: var(--selection-bg);
  color: var(--ink);
}

.distribution-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.distribution-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(157, 204, 255, 0.14), transparent 36%), var(--surface);
}

.distribution-kicker,
.distribution-next span,
.distribution-strip span,
.route-attention-head span,
.route-attention-row span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.distribution-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.distribution-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.distribution-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.route-tool-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.route-tool-button i {
  color: var(--ink-muted);
  font-size: 13px;
}

.route-tool-button strong {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: var(--button-primary-text);
  font-size: 12px;
  line-height: 1;
}

.distribution-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.distribution-next-alert {
  border-color: var(--selection-border);
  background: var(--selection-bg);
}

.distribution-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.distribution-next p {
  display: -webkit-box;
  margin: 7px 0 13px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.distribution-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.distribution-strip div {
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.distribution-strip div:last-child {
  border-right: 0;
}

.distribution-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.route-attention {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.route-attention-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.route-attention-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.route-attention-head p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.route-attention-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.route-attention-row {
  display: block;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--surface-muted);
  padding: 12px;
  color: var(--ink);
  text-align: left;
}

.route-attention-row:hover {
  background: var(--surface);
}

.route-attention-row strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.route-attention-row p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.route-attention-warning {
  box-shadow: inset 3px 0 0 var(--warning);
}

.route-attention-danger {
  box-shadow: inset 3px 0 0 var(--danger);
}

.route-tool-modal {
  position: fixed;
  inset: 0 0 0 292px;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 22px;
}

.crm-nav-collapsed .route-tool-modal {
  left: 76px;
}

.route-tool-backdrop {
  position: absolute;
  inset: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--overlay) !important;
  cursor: default;
}

.route-tool-card {
  position: relative;
  z-index: 1;
  width: min(980px, 100vw - 44px);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(15, 17, 16, 0.32);
}

.route-tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.route-tool-head span,
.route-simulator-result-head span,
.route-simulator-facts span,
.route-simulator-skipped span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.route-tool-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.15;
  font-weight: 780;
}

.route-tool-head p {
  margin: 7px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.route-tool-close {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--control-bg) !important;
  color: var(--ink-muted);
}

.route-tool-close:hover {
  background: var(--control-hover) !important;
  color: var(--ink);
}

.route-tool-card.route-attention {
  padding: 0;
}

.route-tool-card .route-attention-list {
  padding: 18px 20px 20px;
}

.route-tool-empty {
  display: grid;
  min-height: 220px;
  place-items: center;
  padding: 28px;
  text-align: center;
}

.route-tool-empty strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
}

.route-tool-empty p {
  max-width: 360px;
  margin-top: 7px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.route-simulator-panel {
  padding: 0;
}

.route-simulator-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr);
  gap: 16px;
  padding: 18px 20px 20px;
}

.route-simulator-form {
  display: grid;
  gap: 12px;
  align-content: start;
}

.route-simulator-form .btn-primary {
  min-height: 36px;
}

.route-simulator-attrs textarea {
  min-height: 92px;
  resize: vertical;
}

.route-simulator-attrs small {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.route-simulator-result {
  min-height: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  padding: 16px;
}

.route-simulator-result-ok {
  border-color: color-mix(in srgb, var(--success) 34%, var(--border));
  background: color-mix(in srgb, var(--success-bg) 48%, var(--surface));
}

.route-simulator-result-warn {
  border-color: color-mix(in srgb, var(--warning) 34%, var(--border));
  background: color-mix(in srgb, var(--warning-bg) 44%, var(--surface));
}

.route-simulator-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.route-simulator-result-head h3 {
  margin-top: 4px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.route-simulator-result-head > strong {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 6px 10px;
  font-size: 12px;
}

.route-simulator-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.route-simulator-facts > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px !important;
  background: var(--surface);
  padding: 12px;
}

.route-simulator-facts > div:last-child {
  grid-column: 1/-1;
}

.route-simulator-facts strong,
.route-simulator-facts p {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.4;
}

.route-simulator-facts code {
  display: inline-flex;
  max-width: 100%;
  margin-top: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 4px 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-simulator-skipped {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.route-simulator-skipped div {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.route-simulator-skipped p {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.35;
}

.route-simulator-date {
  color: var(--ink-muted);
  font-size: 12px;
}

.integration-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.integration-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(124, 219, 172, 0.13), transparent 36%), var(--surface);
}

.integration-kicker,
.integration-next span,
.integration-strip span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.integration-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.integration-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.integration-actions,
.integration-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.integration-actions a,
.integration-next-actions a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.integration-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.integration-next-alert {
  border-color: var(--selection-border);
  background: var(--selection-bg);
}

.integration-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.integration-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.integration-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.integration-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.integration-strip div:last-child {
  border-right: 0;
}

.integration-strip strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  padding: 16px;
}

.integration-editor-form {
  display: grid;
  align-content: start;
  gap: 16px;
}

.integration-editor-form label span {
  margin-bottom: 6px !important;
}

.integration-code-textarea {
  min-height: 82px !important;
  max-height: 190px;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.integration-editor-form .rounded-lg.border {
  border-radius: 10px !important;
}

.integration-editor-card {
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.integration-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
}

.integration-editor-head h2,
.integration-editor-panel h3 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 760;
}

.integration-editor-head p,
.integration-editor-panel p,
.integration-empty-note {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.integration-editor-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  align-items: start;
  gap: 18px;
  overflow: visible;
  padding: 18px 20px 20px;
}

.integration-editor-form,
.integration-editor-side,
.integration-form-stack {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
}

.integration-editor-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  padding: 14px;
}

.integration-field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.integration-field-label {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.25;
}

.integration-form-grid {
  display: grid;
  min-width: 0;
  gap: 12px;
}

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

.integration-identity-grid {
  margin-bottom: 12px;
}

.integration-request-shape-panel {
  margin-bottom: 14px;
}

.integration-request-shape-panel-locked {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.08), transparent 34%), var(--surface-muted);
}

.integration-lock-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 26px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 780;
  line-height: 1;
  white-space: nowrap;
}

.integration-request-shape-panel-locked .input[readonly],
.integration-request-shape-panel-locked textarea[readonly],
.integration-request-shape-panel-locked .crm-select:disabled {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--border));
  background: color-mix(in srgb, var(--surface) 76%, var(--surface-muted));
  color: var(--ink-muted);
  cursor: default;
}

.integration-request-shape-panel-locked textarea[readonly] {
  resize: vertical;
}

.integration-template-shape {
  display: grid;
  grid-template-columns: minmax(150px, 0.3fr) minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
}

.integration-template-shape-pull {
  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1fr);
}

.integration-readonly-value,
.integration-readonly-code {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 80%, var(--surface-muted));
}

.integration-readonly-value {
  display: grid;
  gap: 7px;
  align-content: start;
  min-height: 66px;
  padding: 10px 12px;
}

.integration-readonly-wide,
.integration-readonly-code {
  grid-column: span 2;
}

.integration-readonly-value span,
.integration-readonly-code h4 {
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
  text-transform: uppercase;
}

.integration-readonly-value strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-readonly-code {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.integration-readonly-code pre {
  max-height: 180px;
  min-height: 54px;
  overflow: auto;
  margin: 0;
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 10px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.integration-request-grid {
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
}

.integration-panel-head-compact {
  margin-bottom: 12px;
}

.integration-pull-panel {
  display: grid;
  gap: 14px;
}

.integration-pull-toggle {
  width: 100%;
  min-height: 46px;
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px 12px;
}

.integration-pull-stack {
  gap: 12px;
}

.integration-pull-grid {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(160px, 220px);
  align-items: end;
}

.integration-pull-grid .integration-field {
  height: 100%;
}

.integration-pull-grid .integration-field > :not(.integration-field-label) {
  min-height: 44px;
}

.integration-pull-grid .integration-field:nth-child(2) {
  min-width: 0;
}

.integration-pull-stack .integration-form-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.integration-pull-stack .integration-code-textarea {
  min-height: 108px !important;
}

.integration-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.integration-param-add {
  display: grid;
  grid-template-columns: minmax(150px, 190px) auto;
  align-items: end;
  gap: 8px;
  min-width: min(100%, 300px);
}

.integration-param-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  min-width: 0;
}

.integration-param-remove {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  color: var(--danger);
}

.integration-param-remove:hover:not(:disabled) {
  border-color: var(--danger);
  background: var(--danger-bg);
  color: var(--danger);
}

.integration-install-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.integration-install-field {
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.integration-install-field-required {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-muted));
}

.integration-install-field-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.integration-install-field-head > span {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.2;
}

.integration-install-field-head em {
  border: 1px solid color-mix(in srgb, var(--primary) 44%, var(--border));
  border-radius: 999px;
  background: var(--primary-soft);
  color: var(--primary);
  padding: 2px 6px;
  font-style: normal;
  font-size: 10px;
  font-weight: 780;
  line-height: 1.1;
  text-transform: uppercase;
}

.integration-install-field-head code {
  flex: 0 0 auto;
  max-width: 42%;
  overflow: hidden;
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--ink-muted);
  padding: 3px 6px;
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-param-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 9px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

.integration-checkbox {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 680;
  line-height: 1.25;
}

.integration-checkbox-strong {
  margin-bottom: 12px;
  font-weight: 740;
}

.integration-checkbox input {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.integration-macro-list,
.integration-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.integration-macro-list {
  margin-top: 10px;
}

.integration-macro-list code {
  display: inline-flex;
  max-width: 100%;
  min-height: 24px;
  align-items: center;
  overflow: hidden;
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 3px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-editor-actions {
  align-items: center;
  position: sticky;
  bottom: 14px;
  z-index: 30;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--surface));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 12px 28px rgba(31, 33, 31, 0.14);
  padding: 10px;
  backdrop-filter: blur(14px);
}

.integration-editor-actions .btn-primary,
.integration-editor-actions .btn-secondary {
  min-height: 38px;
  flex: 1 1 130px;
  justify-content: center;
}

.integration-editor-card .crm-select-menu {
  z-index: 700;
}

.integration-editor-card .input,
.integration-editor-card input,
.integration-editor-card textarea,
.integration-editor-card .crm-select {
  max-width: 100%;
}

.integration-template-picker-note {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

@media (max-width: 1180px) {
  .integration-editor-grid,
  .integration-form-grid-two,
  .integration-request-grid,
  .integration-pull-grid,
  .integration-install-fields,
  .integration-template-shape,
  .integration-template-shape-pull {
    grid-template-columns: minmax(0, 1fr);
  }
  .integration-readonly-wide,
  .integration-readonly-code {
    grid-column: auto;
  }
  .integration-pull-stack .integration-form-grid-two {
    grid-template-columns: minmax(0, 1fr);
  }
  .integration-panel-head {
    display: grid;
  }
  .integration-param-add {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}
.queue-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.queue-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(157, 204, 255, 0.14), transparent 36%), var(--surface);
}

.queue-kicker,
.queue-next span,
.queue-strip span,
.queue-attention-head span,
.queue-attention-row span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.queue-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.queue-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.queue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.queue-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 620;
}

.queue-toggle input {
  width: 16px;
  height: 16px;
}

.queue-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.queue-next-alert {
  border-color: rgba(255, 155, 147, 0.34);
  background: var(--danger-bg);
}

.queue-next strong {
  display: block;
  margin-top: 8px;
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.queue-next p {
  display: -webkit-box;
  margin: 7px 0 13px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.queue-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.queue-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.queue-strip div:last-child {
  border-right: 0;
}

.queue-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.queue-attention {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.queue-attention-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.queue-attention-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.queue-attention-head p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.queue-attention-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.queue-attention-row {
  display: block;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--surface-muted);
  padding: 12px;
  color: var(--ink);
  text-align: left;
}

.queue-attention-row:hover {
  background: var(--surface);
}

.queue-attention-row strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.queue-attention-row p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.queue-attention-info {
  box-shadow: inset 3px 0 0 var(--info);
}

.queue-attention-warning {
  box-shadow: inset 3px 0 0 var(--warning);
}

.queue-attention-danger {
  box-shadow: inset 3px 0 0 var(--danger);
}

.queue-mobile-list {
  display: none;
}

.queue-mobile-item,
.queue-mobile-empty {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.queue-mobile-item {
  padding: 14px;
}

.queue-mobile-empty {
  padding: 24px;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
}

.queue-mobile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.queue-mobile-head span:not(.inline-flex),
.queue-mobile-meta span {
  display: block;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.queue-mobile-head a {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.2;
  word-break: break-word;
}

.queue-mobile-head p {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.queue-mobile-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.queue-mobile-meta div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 9px 10px;
}

.queue-mobile-meta strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 680;
  overflow-wrap: anywhere;
}

.queue-mobile-message {
  margin: 11px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.queue-mobile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.queue-mobile-tags span {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 3px 7px;
  font-size: 11px;
}

.queue-mobile-cancel,
.queue-mobile-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 12px;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 680;
}

.queue-mobile-cancel {
  border: 1px solid rgba(255, 155, 147, 0.34);
  background: var(--danger-bg);
  color: var(--danger);
}

.queue-mobile-done {
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--ink-muted);
}

.queue-table-shell {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.queue-table-shell table {
  width: 100%;
  min-width: 980px;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--ink);
  font-size: 13px;
}

.queue-table-shell thead {
  background: var(--surface-muted);
}

.queue-table-shell th,
.queue-table-shell td {
  border-bottom: 1px solid var(--border);
  padding: 12px 14px;
  vertical-align: top;
}

.queue-table-shell th {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.queue-table-shell tbody tr:last-child td {
  border-bottom: 0;
}

.queue-table-shell tbody tr:hover {
  background: var(--surface-muted);
}

.queue-table-shell a {
  color: var(--primary);
}

.queue-table-shell code,
.queue-table-shell .rounded {
  display: inline-flex;
  max-width: 100%;
  border-color: var(--border) !important;
  background: var(--surface-muted) !important;
  color: var(--ink-muted) !important;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.queue-table-shell .font-mono {
  overflow-wrap: anywhere;
  white-space: normal;
}

.queue-table-shell .text-gray-700,
.queue-table-shell .text-gray-900 {
  color: var(--ink) !important;
}

.queue-table-shell .text-gray-500 {
  color: var(--ink-muted) !important;
}

.mapping-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.mapping-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.13), transparent 36%), var(--surface);
}

.mapping-kicker,
.mapping-next span,
.mapping-strip span,
.mapping-editor-head span,
.mapping-panel-head span,
.mapping-preview span,
.mapping-coverage span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.mapping-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.mapping-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.mapping-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.mapping-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.mapping-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.mapping-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.mapping-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.mapping-next-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
}

.mapping-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.mapping-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.mapping-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.mapping-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.mapping-strip div:last-child {
  border-right: 0;
}

.mapping-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.mapping-strip em {
  display: inline-flex;
  max-width: 100%;
  margin-top: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  font-weight: 660;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(150px, 0.8fr) minmax(180px, 0.9fr) auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.mapping-filters label,
.mapping-editor label {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.mapping-filters input,
.mapping-filters select,
.mapping-editor input,
.mapping-editor select,
.mapping-editor textarea {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
}

.mapping-checkbox {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 0 12px;
}

.mapping-checkbox input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.mapping-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.mapping-editor,
.mapping-list-panel,
.mapping-coverage {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.mapping-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.mapping-editor-head,
.mapping-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.mapping-editor-head h2,
.mapping-panel-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.mapping-editor-head p,
.mapping-panel-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

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

.mapping-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.mapping-preview strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-preview p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.mapping-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mapping-switches label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.mapping-switches input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.mapping-main {
  display: grid;
  gap: 16px;
}

.mapping-list-panel {
  padding: 16px;
}

.mapping-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.mapping-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.mapping-row-paused {
  opacity: 0.78;
}

.mapping-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.mapping-row-title strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.mapping-row-main p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.mapping-row-main b {
  color: var(--ink);
}

.mapping-row-meta {
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 11px;
}

.mapping-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.mapping-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.mapping-empty strong {
  color: var(--ink);
}

.mapping-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.mapping-coverage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 16px;
}

.mapping-coverage div div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 9px;
}

.mapping-coverage b {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 650;
}

.status-board-page {
  display: grid;
  gap: 18px;
}

.status-board-header,
.status-board-toolbar,
.status-board-table,
.status-board-unassigned {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.status-board-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  padding: 22px;
}

.status-board-header span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.status-board-header h1 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.status-board-header p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.status-board-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.status-board-header-actions button,
.status-board-unassigned > button {
  gap: 8px;
}

.status-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.status-board-toolbar label {
  position: relative;
  flex: 1 1 420px;
  min-width: 220px;
  display: block;
}

.status-board-toolbar i {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  font-size: 13px;
  pointer-events: none;
  z-index: 1;
}

.status-board-toolbar label input {
  width: 100%;
  padding-left: 44px !important;
}

.status-board-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.status-board-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 650;
}

.status-board-stats b {
  color: var(--ink);
}

.status-board-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--primary-soft);
  color: var(--ink);
  padding: 10px 12px;
}

.status-board-selection-bar span {
  font-size: 13px;
  font-weight: 720;
}

.status-board-selection-bar button {
  min-height: 32px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--primary);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
}

.status-board-selection-bar button:hover {
  background: var(--primary);
  color: var(--primary-contrast);
}

.status-board-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items: start;
}

.status-board-table {
  overflow: hidden;
}

.status-board-table-head,
.status-board-row {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
}

.status-board-table-head {
  background: var(--table-head);
  border-bottom: 1px solid var(--border);
}

.status-board-table-head span {
  padding: 13px 16px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 760;
}

.status-board-table-head span:first-child,
.status-board-group-cell {
  border-right: 1px solid var(--border);
}

.status-board-row {
  min-height: 58px;
  border-bottom: 1px solid var(--border);
  transition: background 0.16s ease, box-shadow 0.16s ease;
}

.status-board-row:last-child {
  border-bottom: 0;
}

.status-board-row-muted {
  opacity: 0.62;
}

.status-board-row-drop-active {
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 2px var(--primary-border);
}

.status-board-row-drop-active .status-board-status-cell {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.status-board-group-cell,
.status-board-status-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 11px 14px;
}

.status-board-group-cell {
  gap: 10px;
}

.status-board-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);
}

.status-board-group-cell div {
  min-width: 0;
  flex: 1 1 auto;
}

.status-board-group-cell strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 740;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-board-group-cell small {
  display: block;
  margin-top: 3px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 650;
}

.status-board-status-cell {
  gap: 10px;
}

.status-board-status-cell-clickable {
  cursor: copy;
}

.status-board-status-cell-clickable:hover {
  background: var(--primary-soft);
}

.status-board-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 730;
}

.status-board-count:hover {
  color: var(--primary);
}

.status-board-chip-list,
.status-board-unassigned-list,
.status-board-selected-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.status-board-chip,
.status-board-unassigned-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 680;
  line-height: 1.2;
}

.status-board-chip:hover,
.status-board-unassigned-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.status-board-chip[data-status-draggable=true],
.status-board-unassigned-chip[data-status-draggable=true] {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.status-board-chip[data-status-draggable=true]:active,
.status-board-unassigned-chip[data-status-draggable=true]:active {
  cursor: grabbing;
}

.status-board-chip-dragging {
  border-color: color-mix(in srgb, var(--primary) 72%, transparent);
  background: color-mix(in srgb, var(--primary) 16%, var(--surface-muted));
  color: var(--ink);
  opacity: 0.72;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 18%, transparent);
}

.status-board-chip[data-status-draggable=true] i,
.status-board-unassigned-chip[data-status-draggable=true] i {
  pointer-events: none;
}

.status-board-chip i,
.status-board-unassigned-chip i {
  color: var(--ink-muted);
  font-size: 11px;
}

.status-board-chip span,
.status-board-unassigned-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-board-chip em,
.status-board-unassigned-chip em {
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
}

.status-board-chip-muted {
  opacity: 0.55;
}

.status-board-drag-preview {
  position: fixed;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 260px;
  border: 1px solid var(--primary-border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 9px;
  pointer-events: none;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
}

.status-board-drag-preview i {
  color: var(--primary);
  font-size: 11px;
}

.status-board-drag-preview span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-board-drag-preview em {
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 650;
}

.status-board-empty-inline {
  color: var(--ink-muted);
  font-size: 12px;
}

.status-board-drop-hint {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 9px;
  min-width: min(100%, 260px);
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  padding: 8px 10px;
  color: var(--ink-muted);
}

.status-board-drop-hint i {
  grid-row: span 2;
  color: var(--primary);
  font-size: 12px;
}

.status-board-drop-hint span {
  overflow: hidden;
  color: var(--ink);
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-board-drop-hint em {
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 640;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-board-row-drop-active .status-board-drop-hint {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted));
}

.status-board-unassigned {
  display: grid;
  position: sticky;
  top: 18px;
  align-self: start;
  gap: 14px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 16px;
}

.status-board-side-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.status-board-select-all {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  justify-self: end;
  align-self: start;
  gap: 6px;
  width: auto;
  min-height: 32px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 720;
  line-height: 1;
  white-space: nowrap;
}

.status-board-select-all i {
  color: var(--primary);
  font-size: 11px;
}

.status-board-select-all:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.status-board-side-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 760;
}

.status-board-side-head p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.status-board-unassigned-list {
  align-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  min-height: 120px;
}

.status-board-unassigned-chip {
  width: auto;
  min-width: min(100%, 190px);
  max-width: 100%;
  justify-content: flex-start;
  overflow: hidden;
  padding: 8px 10px;
  white-space: nowrap;
}

.status-board-unassigned-chip i,
.status-board-unassigned-chip em {
  flex: 0 0 auto;
}

.status-board-unassigned-chip span {
  min-width: 0;
  flex: 1 1 auto;
}

.status-board-unassigned-chip-active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.status-board-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.status-board-empty.compact {
  width: 100%;
  padding: 14px;
}

.status-board-empty strong {
  color: var(--ink);
}

.status-board-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.status-board-modal {
  width: min(720px, 100vw - 32px);
  max-width: 720px;
  overflow: hidden;
}

.status-board-modal .postback-modal-head {
  padding: 26px 28px 22px;
  border-bottom: 1px solid var(--border);
}

.status-board-modal .postback-modal-head h2 {
  margin: 0;
  line-height: 1.15;
}

.status-board-modal .postback-modal-head p {
  max-width: 560px;
  margin-top: 10px;
}

.status-board-modal-body {
  display: grid;
  gap: 18px;
  padding: 22px 28px 8px;
}

.status-board-modal-body label {
  display: grid;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}

.status-board-modal-body label small {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 560;
  line-height: 1.35;
}

.status-board-modal-body input,
.status-board-modal-body select,
.status-board-modal-body textarea {
  width: 100%;
  min-height: 36px;
  border-radius: 8px !important;
}

.status-board-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.status-board-validity-field {
  display: grid;
  gap: 9px;
}

.status-board-validity-field > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}

.status-board-validity-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.status-board-validity-options button {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
}

.status-board-validity-options button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.status-board-validity-options button.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.status-board-selected-list {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.status-board-selected-list > span {
  flex-basis: 100%;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.status-board-selected-list b {
  margin-top: 8px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 690;
}

.status-board-selected-list p {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.status-board-color-grid {
  display: grid;
  gap: 10px;
  padding-top: 2px;
}

.status-board-color-grid > span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}

.status-board-color-grid div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.status-board-color-grid button,
.status-board-color-picker {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-radius: 999px;
}

.status-board-color-picker {
  position: relative;
  display: grid;
  padding: 3px;
  background: var(--surface-muted);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.status-board-color-picker:hover,
.status-board-color-picker:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb)/0.16);
  transform: translateY(-1px);
}

.status-board-color-picker > span {
  display: block;
  min-width: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
}

.status-board-color-picker input[type=color] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.status-board-color-grid button.active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--surface-muted);
}

.status-board-switch {
  display: inline-flex !important;
  grid-template-columns: auto 1fr;
  gap: 10px !important;
  align-items: center;
  width: fit-content;
}

.status-board-switch input {
  width: 16px;
  height: 16px;
}

.status-board-modal .postback-modal-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(128px, max-content));
  justify-content: end;
  gap: 10px;
  margin-top: 0;
  padding: 18px 28px 28px;
}

.status-board-modal .postback-modal-actions .btn-primary,
.status-board-modal .postback-modal-actions .btn-secondary {
  min-height: 36px;
  justify-content: center;
  padding-inline: 14px;
}

.danger-text {
  color: var(--danger) !important;
}

.icon-button,
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-weight: 700;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.icon-button {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  padding: 0;
}

.link-button {
  min-height: 34px;
  padding: 0 10px;
  color: var(--primary);
  font-size: 12px;
}

.icon-button:hover,
.link-button:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.icon-button:disabled,
.link-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.postback-page {
  display: grid;
  gap: 16px;
}

.postback-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.13), transparent 36%), var(--surface);
  padding: 18px;
}

.postback-page-head h1 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.postback-page-head p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.postback-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.postback-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(72, 187, 120, 0.12), transparent 36%), var(--surface);
}

.postback-kicker,
.postback-next span,
.postback-strip span,
.postback-panel-head span,
.postback-editor-head span,
.postback-preview span,
.postback-macros span,
.postback-attention-row span,
.postback-attempt-metrics span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.postback-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.postback-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.postback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.postback-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.postback-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.postback-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.postback-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.postback-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.postback-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.postback-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.postback-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.postback-strip div:last-child {
  border-right: 0;
}

.postback-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.postback-strip em {
  display: inline-flex;
  max-width: 100%;
  margin-top: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  font-weight: 660;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-attention,
.postback-editor,
.postback-list-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.postback-attention,
.postback-list-panel {
  padding: 16px;
}

.postback-panel-head,
.postback-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.postback-panel-head h2,
.postback-editor-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.postback-panel-head p,
.postback-editor-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.postback-attention-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.postback-attention-row {
  display: block;
  min-width: 0;
  border: 1px solid rgba(180, 35, 24, 0.24);
  border-radius: 8px;
  background: var(--danger-bg);
  padding: 12px;
  text-align: left;
}

.postback-attention-row strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-attention-row p {
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-workspace {
  display: grid;
  grid-template-columns: minmax(340px, 440px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.postback-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.postback-editor label {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.postback-editor input,
.postback-editor select,
.postback-editor textarea {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
}

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

.postback-method-grid {
  grid-template-columns: 110px minmax(0, 1fr);
}

.postback-preview,
.postback-macros {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.postback-preview-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.postback-preview strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-preview p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.postback-macros div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.postback-macros b,
.postback-row-tags span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 650;
}

.postback-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.postback-switch input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.postback-main {
  display: grid;
  gap: 16px;
}

.postback-rule-list,
.postback-attempt-cards {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.postback-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.postback-row-paused {
  opacity: 0.78;
}

.postback-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.postback-row-title strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.postback-rule-main p {
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.postback-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.postback-row-action-danger {
  color: var(--danger);
}

.postback-attempt-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(180px, 0.8fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
  color: var(--ink);
  text-align: left;
}

.postback-attempt-card:hover,
.postback-rule-row:hover {
  background: var(--surface);
}

.postback-attempt-card strong,
.postback-attempt-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-attempt-card strong {
  color: var(--ink);
  font-size: 14px;
}

.postback-attempt-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.postback-attempt-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.postback-attempt-card div span {
  color: var(--ink-muted);
  font-size: 11px;
}

.postback-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.postback-empty strong {
  color: var(--ink);
}

.postback-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.postback-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.postback-empty-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.postback-empty-action {
  display: grid;
  min-height: 76px;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
  text-align: left;
}

.postback-empty-action:hover {
  border-color: color-mix(in srgb, var(--primary) 52%, var(--border)) !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.postback-empty-action i {
  grid-row: span 2;
  color: var(--primary);
  font-size: 15px;
}

.postback-empty-action span {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-empty-action em {
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 680;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.postback-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  padding: 16px;
}

.postback-modal-card {
  width: min(960px, 100%);
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.postback-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 16px;
}

.postback-modal-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 740;
}

.postback-modal-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.postback-modal-body {
  max-height: calc(90vh - 82px);
  overflow-y: auto;
  padding: 16px;
}

.postback-attempt-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.postback-attempt-metrics div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 11px;
}

.postback-attempt-metrics strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-debug-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.postback-debug-grid h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
}

.postback-debug-grid pre {
  max-height: 240px;
  margin: 0 0 10px;
  overflow: auto;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
}

.postback-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.postback-toolbar {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.postback-toolbar input {
  width: 100%;
  padding: 10px 12px;
}

.postback-compact-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.postback-compact-strip div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 12px;
}

.postback-compact-strip span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.postback-compact-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.1;
}

.postback-compact-strip em {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  font-weight: 680;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .postback-page-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .postback-compact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .postback-empty-actions-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .postback-compact-strip,
  .postback-attention-list,
  .postback-form-grid,
  .postback-event-grid {
    grid-template-columns: 1fr;
  }
}
.postback-wizard-card {
  width: min(1040px, 100%);
}

.postback-wizard-body,
.postback-wizard-section {
  display: grid;
  gap: 14px;
}

.postback-wizard-section {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.postback-wizard-section > span,
.postback-advanced summary {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

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

.postback-event-card {
  min-height: 118px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 14px;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.postback-event-card:hover,
.postback-event-card-active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.postback-event-card strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.postback-event-card p {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.postback-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.postback-option-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 650;
}

.postback-option-pill input {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

.postback-wizard-section label:not(.postback-option-pill),
.postback-advanced label {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.postback-wizard-section input,
.postback-wizard-section select,
.postback-advanced textarea {
  width: 100%;
  margin-top: 6px;
  padding: 10px 11px;
}

.postback-source-grid {
  margin-top: 2px;
}

.postback-advanced {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.postback-advanced summary {
  cursor: pointer;
}

.postback-advanced[open] summary {
  margin-bottom: 12px;
}

.postback-wizard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

/* Postback wizard normalization: same modal and form language as the rest of CRM. */
.postback-modal {
  inset: 0 0 0 292px;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.crm-nav-collapsed .postback-modal {
  left: 76px;
}

.postback-modal-card {
  width: min(980px, 100vw - 336px);
  max-height: calc(100vh - 44px);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(15, 17, 16, 0.32);
}

.postback-wizard-card {
  width: min(1040px, 100vw - 336px);
}

.postback-modal-head {
  align-items: flex-start;
  gap: 18px;
  padding: 18px 20px;
}

.postback-modal-head h2 {
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 780;
}

.postback-modal-head p {
  max-width: 760px;
  margin-top: 7px;
  font-size: 13px;
  line-height: 1.45;
}

.postback-modal-head .btn-secondary {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  padding-inline: 16px !important;
}

.postback-modal-body {
  max-height: calc(100vh - 148px);
  padding: 18px 20px 20px;
}

.postback-wizard-body {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 34%), var(--surface);
}

.postback-wizard-steps {
  position: sticky;
  top: 0;
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-muted);
  padding: 10px;
}

.postback-wizard-step {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  border-radius: 9px;
  color: var(--ink-muted);
  padding: 7px;
}

.postback-wizard-step b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: var(--primary);
  font-size: 12px;
}

.postback-wizard-step span {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: normal;
}

.postback-wizard-flow {
  display: grid;
  min-width: 0;
  gap: 12px;
}

.postback-wizard-section,
.postback-advanced,
.postback-preview {
  border-radius: 12px;
  background: var(--surface-muted);
  padding: 14px;
}

.postback-wizard-section > span,
.postback-advanced summary,
.postback-preview span {
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
}

.postback-event-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.postback-event-card {
  min-height: 96px;
  border-radius: 10px !important;
  background: var(--surface);
  padding: 14px 16px;
}

.postback-event-card-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 56%, transparent);
}

.postback-event-card:hover {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.postback-event-card strong {
  font-size: 15px;
  line-height: 1.2;
}

.postback-event-card p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.38;
}

.postback-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(156px, 1fr));
  gap: 8px;
}

.postback-condition-block {
  display: grid;
  gap: 10px;
}

.postback-condition-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3px;
}

.postback-condition-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 780;
}

.postback-condition-head p,
.postback-status-empty {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.postback-condition-tools {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.postback-condition-tools button {
  min-height: 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 730;
  line-height: 1;
}

.postback-condition-tools button:hover {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
}

.postback-status-empty {
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px 14px;
}

.postback-aff-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.postback-aff-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.2;
  text-align: left;
}

.postback-aff-choice i {
  width: 16px;
  margin-right: 8px;
  color: var(--ink-muted);
}

.postback-aff-choice span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-aff-choice:hover {
  border-color: color-mix(in srgb, var(--primary) 44%, var(--border));
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

.postback-aff-choice-active {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--ink);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 44%, transparent);
}

.postback-aff-choice-active i {
  color: var(--primary);
}

.postback-manual-aff {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 10px 12px;
}

.postback-manual-aff summary {
  cursor: pointer;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 720;
}

.postback-manual-aff[open] summary {
  margin-bottom: 10px;
  color: var(--ink);
}

.postback-brand-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.postback-source-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

.postback-option-pill {
  display: grid;
  grid-template-columns: 18px auto minmax(0, 1fr);
  gap: 8px;
  min-height: 42px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.2;
}

.postback-option-pill:has(input:checked) {
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--ink);
}

.postback-option-pill > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-option-pill input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

.postback-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.postback-manual-statuses {
  margin-top: 2px;
}

.postback-form-grid {
  gap: 12px;
}

.postback-method-grid {
  grid-template-columns: minmax(128px, 0.28fr) minmax(0, 1fr);
}

.postback-target-grid {
  grid-template-columns: minmax(220px, 0.42fr) minmax(0, 1fr);
}

.postback-url-field {
  grid-column: 1/-1;
}

.postback-url-example {
  display: grid;
  gap: 5px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  padding: 8px 10px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 640;
}

.postback-url-example em {
  color: var(--ink-muted);
  font-style: normal;
  font-weight: 760;
  text-transform: uppercase;
}

.postback-url-example code {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.postback-aff-select {
  max-width: 420px;
}

.postback-wizard-section label:not(.postback-option-pill),
.postback-advanced label {
  display: grid;
  gap: 7px;
  font-size: 13px;
  font-weight: 720;
}

.postback-wizard-section input,
.postback-wizard-section select,
.postback-advanced textarea {
  width: 100%;
  margin-top: 0;
}

.postback-preview strong {
  margin-top: 7px;
  font-size: 14px;
}

.postback-preview p {
  font-size: 13px;
}

.postback-macros-compact {
  padding: 10px;
}

.postback-advanced .postback-form-grid + .postback-macros {
  margin-top: 14px;
}

.postback-advanced .postback-macros {
  padding: 14px 16px 16px;
}

.postback-macros b {
  cursor: help;
}

.postback-advanced summary {
  list-style: none;
}

.postback-advanced summary::-webkit-details-marker {
  display: none;
}

.postback-advanced summary::after {
  content: "+";
  float: right;
  color: var(--ink-muted);
  font-size: 16px;
  line-height: 1;
}

.postback-advanced[open] summary::after {
  content: "-";
}

.postback-wizard-actions {
  position: sticky;
  bottom: -20px;
  z-index: 2;
  margin: 0;
  border-top: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 4%);
  padding: 14px;
  box-shadow: 0 -14px 24px color-mix(in srgb, var(--surface) 72%, transparent);
  backdrop-filter: blur(8px);
}

.postback-wizard-actions .btn-primary {
  min-height: 36px;
  padding-inline: 14px !important;
}

.postback-switch {
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 0 10px;
  font-weight: 720;
}

.postback-switch input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
}

@media (max-width: 980px) {
  .postback-wizard-body {
    grid-template-columns: 1fr;
  }
  .postback-wizard-steps {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .postback-wizard-steps,
  .postback-event-grid,
  .postback-source-grid,
  .postback-form-grid,
  .postback-method-grid {
    grid-template-columns: 1fr;
  }
  .postback-wizard-actions {
    bottom: -20px;
  }
}
.health-command {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.health-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 14px;
  border-radius: 7px 7px 0 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(37, 95, 153, 0.13), transparent 36%), var(--surface);
}

.health-kicker,
.health-next span,
.health-strip span,
.health-snapshot span,
.health-check-head span,
.health-counts span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.health-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.health-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.health-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.health-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.health-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.health-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.health-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.health-next-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
}

.health-next strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.health-next p {
  display: -webkit-box;
  margin: 6px 0 10px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.health-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-radius: 0 0 7px 7px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.health-strip div {
  min-width: 0;
  padding: 8px 10px;
  border-right: 1px solid var(--border);
}

.health-strip div:last-child {
  border-right: 0;
}

.health-strip strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.health-strip em {
  display: block;
  max-width: 100%;
  margin-top: 4px;
  border-radius: 0;
  background: transparent !important;
  padding: 0;
  font-size: 11px;
  font-style: normal;
  font-weight: 660;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.health-snapshot div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 13px;
}

.health-snapshot strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.health-check {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
  box-shadow: inset 3px 0 0 var(--info);
}

.health-check-ok {
  box-shadow: inset 3px 0 0 var(--success);
}

.health-check-warning {
  box-shadow: inset 3px 0 0 var(--warning);
}

.health-check-danger {
  box-shadow: inset 3px 0 0 var(--danger);
}

.health-check-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.health-check-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 760;
  text-transform: uppercase;
}

.health-check-head p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.health-status-pill,
.health-check-foot span {
  display: inline-flex;
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.health-response {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.health-error {
  margin: 12px 0 0;
  overflow: auto;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--danger);
  padding: 12px;
  font-size: 12px;
}

.health-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.health-counts div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 9px;
}

.health-counts strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
}

.health-check-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.health-check-foot a {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.health-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.health-empty strong {
  color: var(--ink);
}

.health-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.logs-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.logs-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(156, 126, 255, 0.11), transparent 36%), var(--surface);
}

.logs-kicker,
.logs-next span,
.logs-strip span,
.logs-feed-head span,
.logs-detail-grid span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.logs-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.logs-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.logs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.logs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 620;
}

.logs-toggle input {
  width: 16px;
  height: 16px;
}

.logs-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.logs-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.logs-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.logs-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.logs-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.logs-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.logs-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.logs-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.logs-strip div:last-child {
  border-right: 0;
}

.logs-strip strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.logs-strip em {
  display: inline-flex;
  max-width: 100%;
  margin-top: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  font-weight: 660;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.logs-filter-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.logs-filter-panel label {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.logs-filter-panel input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
}

.logs-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
  overflow: visible;
  scrollbar-width: none;
}

.logs-category-tabs::-webkit-scrollbar {
  display: none;
}

.logs-category-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.logs-category-tabs .logs-category-active {
  border-color: rgb(var(--primary-rgb)/0.42);
  background: var(--selection-bg);
  color: var(--ink);
}

.logs-category-tabs b,
.logs-row-tags span,
.logs-row-time b {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.logs-error {
  border: 1px solid rgba(180, 35, 24, 0.28);
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  padding: 12px;
  font-size: 13px;
}

.logs-feed {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.logs-feed-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.logs-feed-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 740;
  line-height: 1.25;
}

.logs-feed-head p {
  margin: 2px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.logs-list {
  display: grid;
  gap: 9px;
  margin-top: 13px;
  max-height: 68vh;
  overflow: auto;
  padding-right: 2px;
}

.logs-row {
  display: grid;
  grid-template-columns: minmax(150px, 180px) minmax(0, 1fr);
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
  color: var(--ink);
  text-align: left;
}

.logs-row:hover {
  background: var(--surface);
}

.logs-row-error {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.logs-row-time span {
  display: block;
  color: var(--ink-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.35;
}

.logs-row-time b {
  display: inline-flex;
  margin-top: 8px;
}

.logs-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.logs-row-main p {
  display: -webkit-box;
  margin: 8px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.logs-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.logs-empty strong {
  color: var(--ink);
}

.logs-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.logs-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  padding: 16px;
}

.logs-modal-card {
  width: min(820px, 100%);
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}

.logs-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding: 16px;
}

.logs-modal-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 740;
}

.logs-modal-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.logs-modal-body {
  max-height: calc(90vh - 82px);
  overflow-y: auto;
  padding: 16px;
}

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

.logs-detail-grid div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 11px;
}

.logs-detail-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
}

.logs-modal-body pre {
  margin: 0;
  overflow: auto;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.keys-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.keys-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(255, 155, 147, 0.11), transparent 36%), var(--surface);
}

.keys-kicker,
.keys-next span,
.keys-strip span,
.keys-secret-head span,
.keys-filters label,
.keys-editor-head span,
.keys-preview span,
.keys-list-head span,
.keys-row-key span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.keys-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.keys-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.keys-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.keys-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.keys-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.keys-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.keys-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.keys-next-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
}

.keys-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.keys-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.keys-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.keys-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.keys-strip div:last-child {
  border-right: 0;
}

.keys-strip strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keys-strip em {
  display: inline-flex;
  max-width: 100%;
  margin-top: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  overflow: hidden;
  font-size: 11px;
  font-style: normal;
  font-weight: 660;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keys-secret-panel {
  border: 1px solid rgba(153, 104, 15, 0.28);
  border-radius: 8px;
  background: var(--warning-bg);
  padding: 16px;
}

.keys-secret-head,
.keys-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.keys-secret-head h2,
.keys-list-head h2,
.keys-editor-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.keys-secret-head p,
.keys-list-head p,
.keys-editor-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.keys-secret-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 13px;
}

.keys-secret-copy code {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px;
  font-size: 13px;
}

.keys-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.keys-filters input,
.keys-editor input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
}

.keys-checkbox,
.keys-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 620;
}

.keys-checkbox input,
.keys-switch input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.keys-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.keys-editor,
.keys-list-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.keys-editor {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.keys-editor label {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.keys-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.keys-preview strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keys-preview p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.keys-list-panel {
  padding: 16px;
}

.keys-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.keys-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.keys-row-paused {
  opacity: 0.78;
}

.keys-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.keys-row-title strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.keys-row-key {
  margin-top: 10px;
}

.keys-row-key code {
  display: inline-flex;
  max-width: 100%;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.keys-row-main p {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.keys-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  justify-content: flex-end;
}

.keys-row-actions button {
  min-height: 36px;
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.keys-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.keys-empty strong {
  color: var(--ink);
}

.keys-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.users-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.users-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.16), transparent 34%), linear-gradient(315deg, rgba(37, 95, 153, 0.08), transparent 34%), var(--surface);
}

.users-kicker,
.users-next span,
.users-strip span,
.users-secret-head span,
.users-filter-panel label,
.users-editor-head span,
.users-list-head span,
.users-row-key span,
.users-key-preview span,
.users-modal-head span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.users-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.users-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.users-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.users-simple-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.13), transparent 36%), var(--surface);
  padding: 18px;
}

.users-simple-head h1 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.12;
  font-weight: 780;
  letter-spacing: 0;
}

.users-simple-head p {
  max-width: 760px;
  margin: 7px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.users-simple-head .users-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.users-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.users-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.users-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.users-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.users-next-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
}

.users-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.users-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.users-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.users-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.users-strip div:last-child {
  border-right: 0;
}

.users-strip strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-secret-panel,
.users-filter-panel,
.users-editor,
.users-list-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.users-secret-panel {
  margin-top: 18px;
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
  padding: 16px;
}

.users-secret-head,
.users-list-head,
.users-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.users-secret-head h2,
.users-list-head h2,
.users-editor-head h2,
.users-modal-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.users-secret-head p,
.users-list-head p,
.users-editor-head p,
.users-modal-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.users-secret-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 13px;
}

.users-secret-copy code,
.users-key-preview code,
.users-row-key code {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-secret-copy code {
  overflow: auto;
  padding: 10px;
  white-space: normal;
  word-break: break-all;
}

.users-filter-panel {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(160px, 220px) minmax(160px, 220px);
  gap: 10px;
  align-items: end;
  margin-top: 18px;
  padding: 14px;
}

.users-filter-compact {
  margin-top: 12px;
}

.users-filter-panel input,
.users-filter-panel select,
.users-form input,
.users-form select,
.users-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
}

.users-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
}

.users-table-panel {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.users-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.users-table-head span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.users-table-head h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.users-table-wrap {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  min-width: 1240px;
}

.users-table th {
  white-space: nowrap;
}

.users-table th:last-child,
.users-table td:last-child {
  width: 176px;
  min-width: 176px;
}

.users-table td {
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: 13px;
  vertical-align: middle;
}

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

.users-table tbody tr:hover td {
  background: var(--surface-muted);
}

.users-table td:first-child strong {
  display: block;
  color: var(--ink);
  font-weight: 760;
}

.users-table td:first-child span {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 12px;
}

.users-table code {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 5px 7px;
  font-size: 12px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.users-table-inactive {
  opacity: 0.64;
}

.users-table-groups-cell {
  display: grid;
  gap: 7px;
  min-width: 132px;
}

.users-table-groups-cell > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 740;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.users-inline-action {
  width: fit-content;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-muted) 84%, var(--ink) 6%);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 7px 10px;
  text-decoration: none;
  transition: background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.users-inline-action:hover {
  background: color-mix(in srgb, var(--accent) 16%, var(--surface-muted) 84%);
  color: var(--accent);
  transform: translateY(-1px);
}

.users-table-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  max-width: 170px;
  min-width: 0;
  margin-inline: auto;
}

.users-table-actions .btn-secondary,
.users-table-actions .btn-danger {
  min-height: 30px;
  justify-content: center;
  padding: 7px;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.users-editor,
.users-list-panel {
  padding: 16px;
}

.users-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.users-form label,
.users-editor label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.users-form label em {
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 620;
}

.users-password-row,
.users-form-actions,
.users-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.users-password-row input {
  flex: 1 1 180px;
}

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

.users-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 38px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 620;
}

.users-switch input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.users-key-preview,
.users-editor-empty,
.users-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.users-key-preview {
  display: grid;
  gap: 8px;
  border-style: solid;
}

.users-key-preview code {
  display: block;
  padding: 8px 10px;
}

.users-groups-inline {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.users-inline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.users-inline-head span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.users-inline-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 740;
}

.users-inline-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.users-inline-head a {
  flex: 0 0 auto;
  text-decoration: none;
}

.users-editor-empty {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.users-editor-empty strong,
.users-empty strong {
  color: var(--ink);
}

.users-editor-empty p,
.users-empty p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.users-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.users-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.users-row-paused {
  opacity: 0.78;
}

.users-row-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.users-row-title strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.users-row-main p {
  margin: 7px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-muted);
  font-size: 12px;
}

.users-row-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.users-row-meta span {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.25;
}

.users-row-meta strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.users-row-key {
  margin-top: 10px;
}

.users-row-key code {
  display: inline-flex;
  max-width: 100%;
  margin-top: 5px;
  padding: 5px 8px;
}

.users-group-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.users-group-tags span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 650;
}

.users-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
  align-content: flex-start;
  max-width: 250px;
}

.users-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.users-pill-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
  color: var(--success);
}

.users-pill-danger,
.users-pill-danger.users-pill {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
  color: var(--danger);
}

.users-pill-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
  color: var(--warning);
}

.users-pill-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
  color: var(--info);
}

.users-loading {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 650;
}

.users-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  padding: 18px;
}

.users-modal {
  width: min(900px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(31, 33, 31, 0.18);
  padding: 16px;
}

.users-modal-small {
  width: min(560px, 100%);
}

.users-permission-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.users-permission-grid-sections {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.users-permission-grid-sections .users-switch {
  width: 100%;
  justify-content: flex-start;
}

.users-permission-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.users-permission-card strong {
  color: var(--ink);
  font-size: 13px;
}

.users-permission-card label {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink);
  font-size: 13px;
}

.users-permission-card input {
  flex: 0 0 auto;
  margin-top: 1px;
}

.users-permission-card em {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

.users-modal-switch,
.users-modal-actions {
  margin-top: 14px;
}

.users-permissions-modal {
  padding-bottom: 0;
}

.users-permissions-modal .users-modal-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
  justify-content: flex-end;
  margin: 16px -16px 0;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 12px 16px 16px;
  box-shadow: 0 -14px 30px color-mix(in srgb, var(--shadow) 18%, transparent);
  backdrop-filter: blur(14px);
}

.users-permissions-modal .users-modal-actions .btn-primary,
.users-permissions-modal .users-modal-actions .btn-secondary {
  min-height: 38px;
  justify-content: center;
}

.users-visible-leads {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.visible-columns-editor {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.visible-columns-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.visible-columns-editor-head strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 780;
}

.visible-columns-editor-head p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.35;
}

.visible-columns-editor-head > span {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 760;
}

.visible-columns-editor-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  gap: 8px;
}

.visible-columns-editor-actions input {
  min-width: 0;
}

.visible-columns-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.visible-columns-editor-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 9px 10px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.visible-columns-editor-row.active {
  border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-muted));
}

.visible-columns-editor-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.visible-columns-editor-row span,
.visible-columns-editor-row strong,
.visible-columns-editor-row em {
  display: block;
  min-width: 0;
}

.visible-columns-editor-row strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.visible-columns-editor-row em {
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .visible-columns-editor-head,
  .visible-columns-editor-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .visible-columns-editor-head {
    display: grid;
  }
  .visible-columns-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.users-visible-leads-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.users-visible-leads-head strong {
  color: var(--ink);
  font-size: 13px;
}

.users-visible-leads-head p {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.users-visible-leads-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.users-visible-leads-count {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.users-segmented {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
  padding: 8px;
}

.users-segmented button {
  position: relative;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, white), var(--surface-muted));
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), 0 8px 16px color-mix(in srgb, var(--shadow) 8%, transparent);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.users-segmented button:hover,
.users-segmented button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 10%, transparent), 0 10px 20px color-mix(in srgb, var(--shadow) 12%, transparent);
}

.users-segmented button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}

.users-segmented button:active {
  transform: translateY(1px);
}

.users-segmented button.active {
  border-color: color-mix(in srgb, var(--accent) 78%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
  color: var(--accent-contrast);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 18%, transparent), 0 12px 24px color-mix(in srgb, var(--accent) 22%, transparent);
}

.users-visible-leads-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.users-visible-leads-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.users-visible-leads-row input {
  flex: 0 0 auto;
  margin-top: 2px;
}

.users-visible-leads-row span {
  min-width: 0;
}

.users-visible-leads-row strong,
.users-visible-leads-row em {
  display: block;
  overflow-wrap: anywhere;
}

.users-visible-leads-row strong {
  color: var(--ink);
  font-size: 13px;
}

.users-visible-leads-row em {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
}

.users-group-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.users-group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.users-groups-inline .users-group-list {
  margin-top: 0;
}

.users-groups-inline .users-empty {
  background: var(--surface);
}

.users-group-row-active {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.users-group-row > div {
  min-width: 0;
}

.users-group-row .btn-secondary {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
}

.users-group-row strong {
  color: var(--ink);
  font-size: 14px;
}

.users-group-row p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.templates-command {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.templates-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 18px;
  padding: 22px;
  background: linear-gradient(135deg, rgba(37, 95, 153, 0.11), transparent 35%), linear-gradient(315deg, rgb(var(--primary-rgb)/0.12), transparent 32%), var(--surface);
}

.templates-kicker,
.templates-next span,
.templates-strip span,
.templates-panel-head span,
.templates-search,
.templates-preview-box > span,
.templates-row-url span,
.templates-modal-head span,
.templates-preview-metrics span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.templates-command h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.templates-command p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.templates-actions,
.templates-form-actions,
.templates-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.templates-actions {
  margin-top: 16px;
}

.templates-actions a,
.templates-form-actions a,
.templates-row-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
}

.templates-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.templates-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.templates-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.templates-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.templates-next-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
}

.templates-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.templates-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.templates-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.templates-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.templates-strip div:last-child {
  border-right: 0;
}

.templates-strip strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.templates-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
  min-width: 0;
}

.templates-workspace-editor {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.templates-library,
.templates-catalog,
.templates-install,
.templates-installed {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.templates-catalog {
  margin-top: 18px;
}

.templates-installed {
  margin-top: 18px;
}

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

.templates-panel-head h2,
.templates-modal-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.templates-panel-head p,
.templates-modal-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.templates-restore-hidden {
  flex: 0 0 auto;
  min-height: 34px;
  padding-inline: 12px;
  white-space: nowrap;
}

.templates-search {
  margin-top: 14px;
}

.templates-search input,
.templates-form input {
  width: 100%;
  margin-top: 6px;
  padding: 9px 10px;
}

.templates-template-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.templates-template-list-wide .templates-template-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.templates-template-card-main {
  min-width: 0;
}

.templates-template-list-wide .templates-row-actions {
  flex-wrap: nowrap;
  align-self: center;
}

.templates-template-action-icon {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 38px;
  min-width: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}

.templates-template-action-icon:hover:not(:disabled) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
}

.templates-template-action-icon:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.templates-template-action-icon span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.templates-template-action-danger {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border));
  background: var(--danger-bg);
  color: var(--danger);
}

.templates-template-action-danger:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--danger) 58%, var(--border));
  background: color-mix(in srgb, var(--danger) 14%, var(--surface));
  color: var(--danger);
}

.templates-template-action-muted {
  border-color: color-mix(in srgb, var(--ink-muted) 26%, var(--border));
  background: var(--surface-muted);
  color: var(--ink-muted);
}

.templates-template-action-muted:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface));
  color: var(--primary);
}

.templates-template-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
  text-align: left;
}

.templates-template-card-active {
  border-color: rgb(var(--primary-rgb)/0.55);
  background: var(--selection-bg);
}

.templates-template-card-head,
.templates-installed-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.templates-template-card strong,
.templates-installed-title strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.templates-template-card p,
.templates-installed-main p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.templates-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.templates-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.templates-pill-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
  color: var(--success);
}

.templates-pill-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
  color: var(--danger);
}

.templates-pill-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
  color: var(--warning);
}

.templates-pill-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
  color: var(--info);
}

.templates-install-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.95fr);
  gap: 16px;
  margin-top: 14px;
}

.templates-form {
  display: grid;
  gap: 12px;
}

.templates-form label {
  display: block;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.templates-form label em {
  display: block;
  margin-top: 5px;
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.35;
}

.templates-form label strong {
  display: inline-flex;
  margin-left: 6px;
  color: var(--warning);
  font-size: 10px;
  font-weight: 760;
  text-transform: uppercase;
}

.templates-builder {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.templates-builder-section {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 16px;
}

.templates-builder-section label,
.templates-field-row label,
.templates-password-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 720;
}

.templates-builder-title {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.templates-request-grid {
  display: grid;
  grid-template-columns: minmax(190px, 260px) minmax(0, 1fr);
  gap: 12px;
}

.templates-pull-section {
  gap: 14px;
}

.templates-pull-section .templates-request-grid {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) minmax(160px, 220px);
  align-items: end;
}

.templates-pull-section .templates-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.templates-builder-section .integration-code-textarea {
  min-height: 112px;
}

.templates-field-head {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.templates-field-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.templates-field-list {
  display: grid;
  gap: 10px;
}

.templates-field-row {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.templates-field-row-title {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 12px;
}

.templates-field-row-title div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.templates-field-row-title span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.templates-field-row-title code {
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.templates-field-row-grid {
  display: grid;
  grid-template-columns: minmax(200px, 1.05fr) minmax(200px, 1.05fr) minmax(150px, 0.7fr) minmax(200px, 1fr);
  gap: 12px;
  align-items: start;
  min-width: 0;
}

.templates-field-row-grid label > span,
.templates-password-grid label > span {
  color: var(--ink);
}

.templates-field-row-grid label > small {
  min-height: 28px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 520;
  line-height: 1.35;
}

.templates-field-row-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
}

.templates-field-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.templates-remove-button {
  min-height: 38px;
  flex: 0 0 auto;
  color: var(--danger) !important;
}

.templates-password-section {
  gap: 16px;
}

.templates-password-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
}

.templates-password-mode {
  align-self: start;
}

.templates-password-head p,
.templates-password-static p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.templates-password-grid {
  display: grid;
  grid-template-columns: minmax(130px, 220px) minmax(480px, 1fr) minmax(220px, 320px);
  gap: 12px;
  align-items: end;
}

.templates-password-rules {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  align-items: stretch;
  min-width: 0;
}

.templates-password-length,
.templates-password-chars {
  align-self: end;
}

.templates-password-static {
  display: grid;
  gap: 8px;
  max-width: 560px;
}

.templates-pull-toggle {
  width: 100% !important;
  justify-content: flex-start;
  min-height: 46px;
  border-radius: 8px;
  background: var(--surface);
}

.templates-builder-side {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  grid-template-areas: "head head" "json macros" "actions macros";
  gap: 12px;
  align-items: start;
  padding: 16px;
}

.templates-builder-side .templates-panel-head {
  grid-area: head;
  grid-column: 1/-1;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}

.templates-builder-side .templates-json-preview {
  grid-area: json;
}

.templates-builder-side .templates-form-actions {
  grid-area: actions;
}

.templates-builder-side .templates-macros {
  grid-area: macros;
}

.templates-json-preview {
  max-height: 360px;
  min-height: 260px;
  margin: 0;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.templates-form-grid,
.templates-param-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.templates-switch {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 9px !important;
  width: fit-content;
  min-height: 38px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 720;
  line-height: 1.1;
  cursor: pointer;
}

.templates-switch input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
}

.templates-switch span {
  min-width: 0;
}

.templates-password-rules .templates-switch {
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
}

.templates-preview-box,
.templates-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.templates-preview-box {
  display: grid;
  gap: 10px;
  min-width: 0;
  border-style: solid;
}

.templates-preview-box > *,
.templates-url-preview,
.templates-preview-box details {
  min-width: 0;
}

.templates-url-preview {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.templates-url-preview strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.templates-url-preview code,
.templates-row-url code {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 7px 8px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.templates-url-preview em {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
}

.templates-preview-box details {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
}

.templates-preview-box summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.templates-preview-box pre,
.templates-preview-grid pre {
  margin: 10px 0 0;
  overflow: auto;
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 10px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.templates-macros {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.templates-macros-preview {
  background: var(--surface);
}

.templates-macros span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 720;
}

.templates-macros div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.templates-macros b {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: help;
  padding: 4px 7px;
  font-size: 11px;
  font-weight: 650;
}

.templates-installed-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.templates-installed-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.templates-installed-row-paused {
  opacity: 0.78;
}

.templates-installed-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.templates-installed-meta span {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 7px 8px;
  font-size: 11px;
  line-height: 1.25;
}

.templates-installed-meta strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.templates-row-url {
  margin-top: 10px;
}

.templates-row-actions {
  justify-content: flex-end;
  align-content: flex-start;
  max-width: 250px;
}

.templates-empty strong {
  color: var(--ink);
}

.templates-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.templates-modal-wrap {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  padding: 18px;
}

.templates-modal {
  width: min(980px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(31, 33, 31, 0.18);
  padding: 16px;
}

.templates-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.templates-preview-error {
  margin-top: 14px;
  border: 1px solid rgba(180, 35, 24, 0.28);
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  padding: 10px;
  font-size: 13px;
}

.templates-preview-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.templates-preview-metrics div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px;
}

.templates-preview-metrics strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.templates-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.templates-preview-grid h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 740;
}

.templates-preview-wide {
  grid-column: 1/-1;
}

.groups-command {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.groups-page {
  max-width: none;
}

.groups-command-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(23, 114, 69, 0.12), transparent 34%), linear-gradient(315deg, rgb(var(--primary-rgb)/0.1), transparent 32%), var(--surface);
}

.groups-kicker,
.groups-next span,
.groups-strip span,
.groups-panel-head span,
.groups-filter-panel label,
.groups-visibility-card span,
.groups-member-add label {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.groups-command h1 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 25px;
  line-height: 1.12;
  font-weight: 780;
  letter-spacing: 0;
}

.groups-command p {
  max-width: 960px;
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.38;
}

.groups-actions,
.groups-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.groups-actions {
  margin-top: 10px;
}

.groups-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  text-decoration: none;
}

.groups-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 9px 10px;
}

.groups-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.groups-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.groups-next-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.groups-next-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
}

.groups-next strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.groups-next p {
  display: -webkit-box;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.groups-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.groups-strip div {
  min-width: 0;
  padding: 6px 10px;
  border-right: 1px solid var(--border);
}

.groups-strip div:last-child {
  border-right: 0;
}

.groups-strip strong {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.groups-workspace {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-top: 12px;
  min-width: 0;
}

.groups-workspace-draft {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
}

.groups-workspace-draft .groups-editor-panel {
  order: -1;
}

.groups-workspace-draft .groups-list-panel {
  order: 2;
}

.groups-list-panel,
.groups-editor-panel,
.groups-members-panel {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.groups-members-panel {
  margin-top: 14px;
}

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

.groups-panel-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.groups-panel-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.groups-filter-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, 240px);
  gap: 10px;
  align-items: end;
  margin-top: 12px;
}

.groups-filter-panel label {
  display: grid;
  gap: 6px;
  align-content: start;
}

.groups-filter-panel input,
.groups-form input,
.groups-form textarea,
.groups-member-add input {
  width: 100%;
  padding: 9px 10px;
}

.groups-filter-panel input {
  height: 42px;
  min-height: 42px;
}

.groups-filter-panel .relative,
.groups-filter-panel .crm-select {
  width: 100%;
}

.groups-filter-panel .crm-select {
  min-height: 42px;
}

.groups-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.groups-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 11px 12px;
  text-align: left;
}

.groups-card-active {
  border-color: rgb(var(--primary-rgb)/0.55);
  background: var(--selection-bg);
}

.groups-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.groups-card-head strong,
.groups-member-row strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.groups-card p,
.groups-member-row p {
  margin: 8px 0 0;
  overflow-wrap: anywhere;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.groups-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.groups-card-meta span,
.groups-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.groups-meta-danger,
.groups-pill-danger {
  border-color: rgba(180, 35, 24, 0.28) !important;
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.groups-pill-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
  color: var(--success);
}

.groups-form {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.groups-form label:not(.groups-switch) {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.groups-form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.groups-switch {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: fit-content;
  min-height: 38px;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 620;
}

.groups-switch input {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  margin: 0;
}

.groups-visibility-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.groups-visibility-card {
  display: grid;
  grid-template-columns: minmax(96px, 0.6fr) minmax(150px, 0.9fr) minmax(0, 1.2fr);
  gap: 8px;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 8px 10px;
}

.groups-form .relative,
.groups-member-add .relative,
.groups-visibility-card .relative {
  width: 100%;
  margin-top: 0;
}

.groups-visibility-success {
  border-color: rgba(23, 114, 69, 0.24);
}

.groups-visibility-danger {
  border-color: rgba(180, 35, 24, 0.28);
  background: var(--danger-bg);
}

.groups-visibility-info {
  border-color: rgba(37, 95, 153, 0.24);
}

.groups-visibility-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.3;
}

.groups-editor-actions {
  margin-top: 2px;
  justify-content: flex-end;
}

.groups-editor-actions .btn-primary {
  min-width: 176px;
}

.groups-editor-actions span {
  color: var(--ink-muted);
  font-size: 12px;
}

.groups-members-inline {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.groups-member-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-top: 10px;
}

.groups-member-add label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.groups-member-add .btn-secondary {
  min-height: 38px;
  white-space: nowrap;
}

.groups-member-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.groups-member-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 11px 12px;
}

.groups-member-row .btn-secondary {
  min-height: 32px;
  padding: 6px 10px;
}

.groups-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.groups-empty strong {
  color: var(--ink);
}

.groups-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.settings-simple-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 20px;
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.settings-kicker,
.settings-next span,
.settings-strip span,
.settings-panel-head span,
.settings-segment span,
.settings-scope-card span,
.settings-preview-body span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.settings-simple-head h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.12;
  font-weight: 780;
  letter-spacing: 0;
}

.settings-simple-head p {
  max-width: 560px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.settings-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.settings-status-row span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 720;
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.settings-saved {
  color: var(--success);
  font-size: 13px;
  font-weight: 700;
}

.settings-next {
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.settings-next-success {
  border-color: rgba(23, 114, 69, 0.28);
  background: var(--success-bg);
}

.settings-next-warning {
  border-color: rgba(153, 104, 15, 0.28);
  background: var(--warning-bg);
}

.settings-next-info {
  border-color: rgba(37, 95, 153, 0.24);
  background: var(--info-bg);
}

.settings-next strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.settings-next p {
  display: -webkit-box;
  margin: 7px 0 0;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 13px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.settings-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.settings-strip div {
  min-width: 0;
  padding: 13px 16px;
  border-right: 1px solid var(--border);
}

.settings-strip div:last-child {
  border-right: 0;
}

.settings-strip strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

.settings-workspace {
  display: grid;
  grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr);
  gap: 18px;
  align-items: start;
  margin-top: 18px;
  min-width: 0;
}

.settings-column {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.settings-editor,
.settings-preview {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.settings-panel-head h2 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 740;
}

.settings-panel-head p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.settings-form {
  display: grid;
  gap: 22px;
  margin-top: 18px;
}

.settings-form label,
.settings-card label,
.settings-account-card label,
.settings-security-card label {
  display: grid;
  gap: 9px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 620;
}

.settings-form select,
.settings-form input[type=email],
.settings-form input[type=password],
.settings-form input[type=text],
.settings-card input[type=email],
.settings-card input[type=password],
.settings-card input[type=text],
.settings-account-card input[type=email],
.settings-account-card input[type=password],
.settings-account-card input[type=text],
.settings-security-card input[type=email],
.settings-security-card input[type=password],
.settings-security-card input[type=text] {
  width: 100%;
  padding: 9px 10px;
}

.settings-segment {
  display: grid;
  gap: 10px;
}

.settings-segment > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.settings-segment button {
  min-height: 38px;
  border: 1px solid var(--border);
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.settings-segment button.settings-segment-active {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--button-primary-text);
}

.settings-color-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.settings-color-picker {
  position: relative;
  display: grid;
  width: 48px;
  height: 42px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 5px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.settings-color-picker:hover {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb)/0.14);
  transform: translateY(-1px);
}

.settings-color-picker:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.settings-color-picker > span {
  display: block;
  min-width: 0;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

.settings-color-picker input[type=color] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.settings-swatches {
  display: grid;
  grid-template-columns: repeat(6, 32px);
  gap: 8px;
}

.settings-swatches button {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border);
  border-radius: 8px;
}

.settings-swatches button.settings-swatch-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(var(--primary-rgb)/0.22);
}

.settings-card,
.settings-account-card,
.settings-security-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.settings-card > div:first-child,
.settings-account-card > div:first-child,
.settings-security-card > div:first-child {
  display: grid;
  gap: 4px;
}

.settings-card > div:first-child {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.settings-card > div:first-child p {
  grid-column: 1/-1;
}

.settings-card > div:first-child strong {
  justify-self: end;
  max-width: 100%;
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-card > div:first-child > span {
  align-self: center;
}

.settings-card > div:first-child strong:only-child {
  justify-self: start;
  text-align: left;
}

.settings-card > div:first-child + label,
.settings-card > div:first-child + .settings-segment {
  margin-top: 2px;
}

.settings-card > div:first-child + .settings-swatches {
  margin-top: 0;
}

.settings-card > div:first-child + label .settings-field-note {
  margin-top: 0;
}

.settings-card > div:first-child + label > .crm-select {
  min-width: 0;
}

.settings-account-card span,
.settings-card > div:first-child span,
.settings-security-card span,
.settings-security-status span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.settings-account-card strong,
.settings-card > div:first-child strong,
.settings-security-card strong,
.settings-security-status strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 760;
}

.settings-account-card p,
.settings-card p,
.settings-security-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.settings-field-note {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 620;
  line-height: 1.4;
}

.settings-account-card input:disabled,
.settings-account-card input[readonly] {
  opacity: 0.78;
  cursor: not-allowed;
}

.settings-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 12px;
  row-gap: 8px;
  align-items: start;
}

.settings-password-grid label {
  align-self: start;
}

.settings-password-note {
  grid-column: 2;
  margin-top: -2px;
}

.settings-password-button {
  width: fit-content;
  gap: 8px;
}

.settings-security-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.settings-security-toggle {
  margin: 0;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
}

.settings-security-toggle div {
  display: grid;
  gap: 3px;
}

.settings-telegram-link {
  display: grid;
  gap: 10px;
}

.settings-telegram-link-button {
  width: fit-content;
  gap: 8px;
}

.settings-telegram-link-panel {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgb(var(--primary-rgb)/0.34);
  border-radius: 8px;
  background: rgb(var(--primary-rgb)/0.08);
}

.settings-telegram-link-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-telegram-link-panel > div > strong {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid rgb(var(--primary-rgb)/0.32);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 16px;
  letter-spacing: 0;
}

.settings-telegram-link-panel button {
  min-height: 34px;
  padding: 0 10px;
  gap: 7px;
}

.settings-telegram-link-panel small {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 680;
}

.settings-preview-card,
.settings-scope-card {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.settings-preview-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-preview-nav strong {
  color: var(--ink);
  font-size: 17px;
}

.settings-preview-nav span {
  border-radius: 999px;
  color: var(--button-primary-text);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
}

.settings-preview-body {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.settings-preview-body strong,
.settings-scope-card strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
}

.settings-preview-body p,
.settings-scope-card p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
}

.settings-params-panel,
.settings-dedupe-panel {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 16px;
}

.settings-params-panel .settings-panel-head,
.settings-dedupe-panel .settings-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.settings-dedupe-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.8fr);
  gap: 12px;
  margin-top: 14px;
}

.settings-dedupe-grid > label {
  display: grid;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.settings-toggle-card {
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
  cursor: pointer;
}

.settings-toggle-card input {
  margin: 0;
  width: 18px;
  height: 18px;
  align-self: center;
  accent-color: var(--primary);
}

.settings-toggle-card > span,
.settings-toggle-card > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-toggle-card strong,
.settings-dedupe-fields strong {
  color: var(--ink);
}

.settings-toggle-card small {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
}

.settings-dedupe-fields {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.settings-dedupe-fields label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 11px;
}

.settings-dedupe-fields label:has(input:disabled) {
  opacity: 0.58;
}

.settings-dedupe-field-active {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border)) !important;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-muted)) !important;
}

.settings-dedupe-fields span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.settings-dedupe-fields code {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 700;
}

.settings-param-create {
  display: grid;
  grid-template-columns: minmax(110px, 0.75fr) minmax(130px, 0.95fr) minmax(120px, 0.7fr) minmax(180px, 1.25fr) minmax(150px, auto) minmax(150px, auto);
  gap: 12px;
  align-items: end;
  margin-top: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.settings-param-create label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.settings-param-create input,
.settings-param-create select {
  width: 100%;
}

.settings-param-hint {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.settings-param-hint-danger {
  color: var(--danger);
}

.settings-param-required {
  min-height: 36px;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  align-self: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
}

.settings-param-required input {
  width: 16px;
  height: 16px;
  accent-color: var(--button-primary-bg);
}

.settings-param-required span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 760;
}

.settings-param-list {
  display: grid;
  gap: 10px;
  margin-top: 0;
}

.settings-param-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.settings-param-toolbar input {
  width: 100%;
}

.settings-param-toolbar span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.settings-param-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.settings-param-main {
  min-width: 0;
}

.settings-param-list strong {
  display: inline-flex;
  align-items: center;
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  padding: 5px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 760;
}

.settings-param-list span {
  display: inline-flex;
  margin-left: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.settings-param-list p {
  margin: 7px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.settings-param-list em {
  justify-self: start;
  border-radius: 999px;
  background: var(--info-bg);
  color: var(--info);
  padding: 5px 8px;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.settings-param-list small {
  justify-self: start;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-muted);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 760;
}

.settings-param-list small.settings-param-required-badge {
  border-color: color-mix(in srgb, var(--danger) 44%, var(--border));
  background: var(--danger-bg);
  color: var(--danger);
}

.settings-param-badges,
.settings-param-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.settings-param-actions {
  min-width: 310px;
}

.settings-param-muted {
  opacity: 0.62;
}

.settings-param-empty {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 18px;
}

.settings-param-empty strong {
  color: var(--ink);
}

.settings-param-empty p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.lead-params-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.lead-params-hero,
.lead-params-create-card,
.lead-params-list-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 0;
}

.lead-params-hero .settings-panel-head {
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.lead-params-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.lead-params-summary > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.lead-params-summary span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
}

.lead-params-summary strong {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 26px;
  font-weight: 840;
  line-height: 1;
}

.lead-params-system-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 8px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 48%), var(--surface-muted);
  padding: 12px;
}

.lead-params-system-note span {
  display: block;
  color: var(--primary);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.15;
  text-transform: uppercase;
}

.lead-params-system-note strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 820;
  line-height: 1.25;
}

.lead-params-system-note p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.lead-params-system-note-tags {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.lead-params-system-note-tags code {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 5px 8px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 760;
  line-height: 1;
}

.lead-params-section-head {
  margin-bottom: 14px;
}

.lead-params-section-head h2 {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: 22px;
  font-weight: 820;
}

@media (max-width: 760px) {
  .lead-params-page {
    gap: 12px;
  }
  .lead-params-hero .settings-panel-head {
    display: grid;
    gap: 12px;
  }
  .lead-params-hero .settings-panel-head .btn-secondary {
    width: 100%;
  }
  .lead-params-system-note {
    display: grid;
    gap: 10px;
  }
  .lead-params-system-note-tags {
    justify-content: flex-start;
  }
  .settings-param-create {
    padding: 12px;
  }
  .settings-param-toolbar {
    align-items: stretch;
  }
  .settings-param-toolbar span {
    justify-self: start;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-muted);
    padding: 7px 10px;
  }
  .settings-param-list {
    gap: 8px;
  }
  .settings-param-list article {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }
  .settings-param-main {
    display: grid;
    gap: 5px;
  }
  .settings-param-list strong,
  .settings-param-list span {
    display: block;
    width: fit-content;
    margin-left: 0;
  }
  .settings-param-badges,
  .settings-param-actions {
    justify-content: flex-start;
  }
  .settings-param-actions {
    display: grid;
    grid-template-columns: 1fr;
    min-width: 0;
  }
  .settings-param-actions .btn-secondary {
    width: 100%;
    min-height: 38px;
    justify-content: center;
    white-space: normal;
  }
}
table {
  border-collapse: separate;
  border-spacing: 0;
}

thead,
.leads-table thead {
  background: var(--table-head) !important;
  border-bottom: 1px solid var(--border) !important;
}

th,
.leads-table thead th {
  padding: 11px 14px !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

td,
.leads-table tbody td {
  padding: 12px 14px !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  vertical-align: middle;
}

.leads-table thead th,
.leads-table tbody td {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leads-table tbody td:nth-child(6),
.leads-table tbody td:nth-child(7) {
  max-width: 260px;
}

.leads-table a,
.leads-table .link {
  color: color-mix(in srgb, var(--ink) 84%, var(--primary)) !important;
  text-decoration: none !important;
  text-underline-offset: 0;
  font-weight: 560;
}

.leads-table a:visited,
.leads-table .link:visited {
  color: color-mix(in srgb, var(--ink) 84%, var(--primary)) !important;
}

.leads-table a:hover,
.leads-table .link:hover {
  color: var(--primary) !important;
  text-decoration: none !important;
}

.leads-table a:focus-visible,
.leads-table .link:focus-visible {
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--ring) !important;
}

.leads-table .badge,
.leads-table .status-indicator,
.leads-table .brand-status-value,
.leads-table .crm-status-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leads-table .lead-column-type,
.leads-table .lead-cell-type {
  width: 112px;
  min-width: 112px;
  max-width: 112px;
}

.leads-table .lead-column-type .lead-column-head,
.leads-table .lead-column-type .lead-column-sort {
  justify-content: center;
}

.leads-table .lead-cell-type {
  text-align: center;
}

tbody tr,
.leads-table tbody tr {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

tbody tr:hover,
.leads-table tbody tr:hover {
  background: var(--table-row-hover) !important;
  box-shadow: none !important;
}

.leads-table tbody tr.is-selected {
  background: var(--selected-row) !important;
  border-left: 3px solid var(--primary) !important;
}

.bulkbar {
  background: var(--selection-bg) !important;
  border: 1px solid var(--selection-border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 28px rgba(31, 33, 31, 0.12) !important;
  backdrop-filter: none !important;
}

.selection-panel {
  --selection-sidebar-width: 292px;
  --selection-page-padding: clamp(12px, 1.1vw, 18px);
  position: fixed;
  z-index: 120;
  left: calc(var(--selection-sidebar-width) + var(--selection-page-padding));
  right: var(--selection-page-padding);
  bottom: max(16px, env(safe-area-inset-bottom));
  width: auto;
  margin: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface-raised) 94%, var(--primary)) !important;
  box-shadow: 0 18px 42px rgba(18, 20, 20, 0.18) !important;
  color: var(--ink);
}

.crm-nav-collapsed .selection-panel {
  --selection-sidebar-width: 76px;
}

.selection-content {
  display: grid;
  grid-template-columns: minmax(140px, max-content) minmax(0, 1fr);
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
}

.selection-left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.selection-text {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.selection-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.selection-count,
.bulkbar__count {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  padding: 0 9px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 820;
}

.selection-clear {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--selection-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  color: var(--ink-muted);
}

.selection-clear:hover {
  background: var(--surface);
  color: var(--ink);
}

.selection-clear svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.selection-panel .action-btn {
  min-height: 34px;
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 760;
  white-space: nowrap;
}

.selection-panel .action-btn i {
  width: 15px;
  text-align: center;
}

.status-history-trigger {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.status-history-trigger .badge {
  text-decoration: none !important;
}

.status-history-layer {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  justify-content: flex-end;
}

.status-history-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--overlay);
  cursor: pointer;
}

.status-history-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 460px);
  height: 100%;
  padding: 22px;
  border-left: 1px solid var(--border);
  background: var(--surface);
  box-shadow: -18px 0 56px rgba(31, 33, 31, 0.18);
  overflow-y: auto;
}

.status-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.status-history-header h2 {
  margin: 0 0 5px;
  font-size: 18px;
  font-weight: 760;
  color: var(--ink);
}

.status-history-header p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.icon-close {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
}

.icon-close:hover {
  background: var(--control-hover);
  color: var(--ink);
}

.icon-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.status-history-list {
  display: grid;
  gap: 10px;
  padding-top: 18px;
}

.status-history-item {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.status-history-transition {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.status-history-arrow {
  color: var(--ink-muted);
  font-size: 14px;
}

.status-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
  color: var(--ink-muted);
  font-size: 11px;
}

.status-history-empty {
  padding: 28px 0;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
}

.border,
.border-gray-200,
.border-gray-300 {
  border-color: var(--border) !important;
}

.rounded-xl,
.rounded-lg {
  border-radius: 8px !important;
}

.bg-gray-50,
.bg-gray-100 {
  background-color: var(--surface-muted) !important;
}

.fixed.inset-0 {
  background: var(--overlay) !important;
}

pre {
  background: var(--code-bg) !important;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  color: var(--ink);
}

.overflow-x-auto {
  scrollbar-width: thin;
  scrollbar-color: #c8cac2 transparent;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: radial-gradient(circle at 18% 16%, rgb(var(--primary-rgb)/0.18), transparent 34%), radial-gradient(circle at 82% 22%, rgba(23, 114, 69, 0.08), transparent 30%), var(--page-bg);
  color: var(--ink);
}

.login-card {
  width: min(100%, 430px);
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 18px 60px rgba(31, 33, 31, 0.12);
  backdrop-filter: blur(16px);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.login-brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-size: 15px;
  font-weight: 800;
}

.login-brand-name {
  color: var(--ink);
  font-size: 17px;
  font-weight: 760;
  line-height: 1.15;
}

.login-brand-subtitle {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.25;
}

.login-heading {
  margin-bottom: 24px;
}

.login-heading h1 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 760;
  letter-spacing: 0;
}

.login-heading p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.5;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-field {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.login-field input,
.login-field select {
  width: 100%;
  padding: 11px 12px;
}

.login-field select {
  min-height: 47px;
}

.invite-card {
  max-width: 620px;
  min-height: 278px;
  contain: layout paint;
}

.invite-status-copy {
  min-height: 44px;
  display: grid;
  align-content: start;
}

.invite-status-copy small {
  display: block;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.4;
}

.invite-skeleton {
  display: grid;
  gap: 12px;
  min-height: 144px;
}

.invite-skeleton span {
  display: block;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(148, 163, 184, 0.12), rgba(148, 163, 184, 0.22), rgba(148, 163, 184, 0.12));
  background-size: 220% 100%;
  animation: invite-skeleton-pulse 1.4s ease-in-out infinite;
}

.invite-error-actions {
  display: grid;
  gap: 10px;
}

.login-submit-secondary {
  background: var(--control-bg);
  border-color: var(--border);
  color: var(--ink);
}

.login-submit-secondary:hover {
  background: var(--control-hover);
  color: var(--ink);
}

@keyframes invite-skeleton-pulse {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.login-password-control {
  position: relative;
}

.login-password-control input {
  padding-right: 46px;
}

.login-password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  transform: translateY(-50%) !important;
  cursor: pointer;
}

.login-password-toggle:hover {
  background: var(--control-hover);
  color: var(--ink);
}

.login-password-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-submit {
  width: 100%;
  min-height: 38px;
  margin-top: 4px;
  border: 1px solid var(--button-primary-bg);
  border-radius: 8px;
  background: var(--button-primary-bg);
  color: var(--button-primary-text);
  font-size: 14px;
  font-weight: 760;
  cursor: pointer;
  box-shadow: none;
}

.login-submit:hover:not(:disabled) {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-hover);
}

.login-submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.login-secondary {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.login-secondary:disabled {
  cursor: wait;
  opacity: 0.68;
}

.login-2fa-panel {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.login-2fa-panel span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.login-2fa-panel strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 780;
}

.login-2fa-panel p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.auth-gate-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--page-bg);
  color: var(--ink);
}

.auth-gate-card {
  box-sizing: border-box;
  width: min(100%, 420px);
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 12px 44px rgba(31, 33, 31, 0.1);
}

.auth-gate-card h1 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.2;
  font-weight: 760;
  letter-spacing: 0;
}

.auth-gate-card p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

@media (max-width: 520px) {
  .auth-gate-shell {
    min-height: 100svh;
    padding: 12px;
  }
  .auth-gate-card {
    width: 100%;
    max-width: calc(100vw - 24px);
    gap: 12px;
    padding: 16px;
  }
  .auth-gate-card h1 {
    font-size: 18px;
  }
  .auth-gate-card p {
    font-size: 13px;
  }
}
.auth-gate-action {
  margin-top: 16px;
}

.dark {
  color-scheme: dark;
  --surface: #25292d;
  --surface-muted: #2e3338;
  --page-bg: #1a1d20;
  --ink: #f4f6f7;
  --ink-muted: #b8c0c7;
  --border: #454c54;
  --ring: rgb(var(--primary-rgb) / 0.22);
  --nav-active-bg: var(--primary);
  --nav-active-text: #17160f;
  --control-bg: #30353b;
  --control-hover: #3a4148;
  --button-primary-bg: var(--primary);
  --button-primary-hover: var(--primary-hover);
  --button-primary-text: #17160f;
  --table-head: #333941;
  --table-row-hover: #303740;
  --selected-row: rgb(var(--primary-rgb) / 0.18);
  --selection-bg: rgb(var(--primary-rgb) / 0.18);
  --selection-border: rgb(var(--primary-rgb) / 0.55);
  --code-bg: #20242a;
  --overlay: rgba(6, 8, 10, 0.62);
  --success: #7cdbac;
  --success-bg: rgba(35, 134, 85, 0.22);
  --danger: #ff9b93;
  --danger-bg: rgba(180, 35, 24, 0.23);
  --warning: var(--primary);
  --warning-bg: var(--primary-soft);
  --info: #9dccff;
  --info-bg: rgba(67, 126, 190, 0.24);
}

.dark body,
.dark .app-layout,
.dark .min-h-screen,
.dark .bg-gray-50 {
  background: var(--page-bg) !important;
  color: var(--ink) !important;
}

.dark .app-header {
  background: rgba(18, 20, 16, 0.95) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.dark .logo-text,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark .text-gray-100,
.dark .text-gray-200,
.dark .text-gray-300,
.dark .text-gray-800,
.dark .text-gray-900,
.dark .dark\:text-gray-300 {
  color: var(--ink) !important;
}

.dark .text-gray-400,
.dark .text-gray-500,
.dark .text-gray-600,
.dark .text-gray-700,
.dark .text-neutral-400,
.dark .text-neutral-500,
.dark .text-neutral-600,
.dark .text-neutral-700,
.dark .text-neutral-800,
.dark .text-neutral-900,
.dark .text-slate-400,
.dark .text-slate-500,
.dark .text-slate-600,
.dark .text-slate-700,
.dark .text-slate-800,
.dark .text-slate-900,
.dark .text-zinc-400,
.dark .text-zinc-500,
.dark .text-zinc-600,
.dark .text-zinc-700,
.dark .text-zinc-800,
.dark .text-zinc-900,
.dark .placeholder-gray-500::placeholder {
  color: var(--ink-muted) !important;
}

.dark .nav-item-inactive:hover {
  background: var(--control-hover);
  color: var(--ink);
}

.dark .user-icon,
.dark .card,
.dark .page-title,
.dark .table-wrapper,
.dark .bg-white,
.dark .bg-white\/90,
.dark .bg-white\/95,
.dark .absolute.bg-white,
.dark .relative.bg-white {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22) !important;
}

.dark .border,
.dark .border-t,
.dark .border-b,
.dark .border-l,
.dark .border-r,
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300,
.dark .border-green-200,
.dark .border-red-200 {
  border-color: var(--border) !important;
}

.dark input[type=text],
.dark input[type=email],
.dark input[type=password],
.dark input[type=number],
.dark input[type=date],
.dark input[type=datetime-local],
.dark input[type=search],
.dark input[type=tel],
.dark input[type=url],
.dark input[type=color],
.dark input:not([type]),
.dark select,
.dark textarea {
  background: var(--control-bg) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled,
.dark .disabled\:bg-gray-100:disabled {
  background: #292e33 !important;
  color: #8d969e !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #8d969e !important;
}

.dark option {
  background: var(--surface-raised);
  color: var(--ink);
}

.dark .btn-secondary,
.dark .action-btn-secondary,
.dark .bg-gray-100,
.dark .bg-gray-200,
.dark .bg-gray-300,
.dark .bg-gray-400,
.dark .bg-gray-500,
.dark .bg-gray-600,
.dark .bg-gray-700,
.dark .bg-gray-800,
.dark .bg-gray-900,
.dark .bg-neutral-100,
.dark .bg-neutral-200,
.dark .bg-neutral-300,
.dark .bg-neutral-400,
.dark .bg-neutral-500,
.dark .bg-neutral-600,
.dark .bg-neutral-700,
.dark .bg-neutral-800,
.dark .bg-neutral-900,
.dark .bg-slate-100,
.dark .bg-slate-200,
.dark .bg-slate-300,
.dark .bg-slate-400,
.dark .bg-slate-500,
.dark .bg-slate-600,
.dark .bg-slate-700,
.dark .bg-slate-800,
.dark .bg-slate-900,
.dark .bg-zinc-100,
.dark .bg-zinc-200,
.dark .bg-zinc-300,
.dark .bg-zinc-400,
.dark .bg-zinc-500,
.dark .bg-zinc-600,
.dark .bg-zinc-700,
.dark .bg-zinc-800,
.dark .bg-zinc-900 {
  background: var(--control-bg) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

.dark .btn-primary,
.dark .action-btn-primary,
.dark .login-submit,
.dark .auth-gate-action,
.dark .bg-yellow-400,
.dark .bg-yellow-500,
.dark .bg-yellow-600,
.dark .hover\:bg-yellow-600:hover {
  background: var(--button-primary-bg) !important;
  border-color: var(--button-primary-bg) !important;
  color: var(--button-primary-text) !important;
}

.dark .btn-primary:hover,
.dark .action-btn-primary:hover:not(:disabled),
.dark .login-submit:hover,
.dark .auth-gate-action:hover,
.dark .bg-yellow-500:hover,
.dark .bg-yellow-600:hover {
  background: var(--button-primary-hover) !important;
  border-color: var(--button-primary-hover) !important;
  color: var(--button-primary-text) !important;
}

.dark .bg-blue-600,
.dark .bg-blue-700,
.dark .hover\:bg-blue-700:hover {
  background: #7fb7ff !important;
  border-color: #7fb7ff !important;
  color: #071522 !important;
}

.dark .bg-red-600,
.dark .bg-red-700,
.dark .hover\:bg-red-700:hover {
  background: #ff8f86 !important;
  border-color: #ff8f86 !important;
  color: #220806 !important;
}

.dark .btn-secondary:hover,
.dark .action-btn-secondary:hover:not(:disabled),
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-gray-200:hover,
.dark .hover\:bg-gray-600:hover,
.dark .hover\:bg-gray-700:hover,
.dark .hover\:bg-gray-800:hover {
  background: var(--control-hover) !important;
  color: var(--ink) !important;
}

.dark thead,
.dark .leads-table thead,
.dark .bg-gray-50,
.dark .bg-gray-100 {
  background: var(--table-head) !important;
}

.dark tbody tr,
.dark .leads-table tbody tr {
  background: var(--surface) !important;
  border-bottom-color: var(--border) !important;
}

.dark tbody tr:nth-child(even),
.dark .leads-table tbody tr:nth-child(even) {
  background: #292e33 !important;
}

.dark tbody tr:hover,
.dark .leads-table tbody tr:hover {
  background: var(--table-row-hover) !important;
}

.dark th,
.dark .leads-table thead th {
  color: #d7dde2 !important;
}

.dark td,
.dark .leads-table tbody td {
  color: var(--ink) !important;
}

.dark .badge,
.dark .status-indicator {
  background: var(--surface-muted);
  border-color: var(--border);
  color: var(--ink-muted);
}

.dark .badge-sent,
.dark .status-sent,
.dark .status-accepted,
.dark .bg-green-50,
.dark .bg-green-100 {
  background: var(--success-bg) !important;
  border-color: rgba(124, 219, 172, 0.26) !important;
  color: var(--success) !important;
}

.dark .badge-failed,
.dark .status-failed,
.dark .status-rejected,
.dark .status-unsent,
.dark .bg-red-100 {
  background: var(--danger-bg) !important;
  border-color: rgba(255, 155, 147, 0.26) !important;
  color: var(--danger) !important;
}

.dark .badge-pending,
.dark .status-new,
.dark .status-queued,
.dark .bg-yellow-50,
.dark .bg-yellow-100 {
  background: var(--warning-bg) !important;
  border-color: rgb(var(--primary-rgb)/0.32) !important;
  color: var(--warning) !important;
}

.dark .bg-blue-50,
.dark .bg-blue-100 {
  background: var(--info-bg) !important;
  color: var(--info) !important;
}

.dark .deposit-pill-yes {
  border-color: rgba(124, 219, 172, 0.26);
}

.dark .selection-clear {
  background: rgba(48, 53, 59, 0.8);
}

.dark .selection-panel {
  background: color-mix(in srgb, var(--surface-raised) 93%, var(--primary)) !important;
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border)) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.42) !important;
}

.dark code,
.dark pre {
  background: var(--code-bg) !important;
  border-color: var(--border) !important;
  color: #e7e9df !important;
}

.dark .shadow-lg,
.dark .shadow-xl,
.dark .shadow-sm {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important;
}

.dark .overflow-x-auto {
  scrollbar-color: #444a41 transparent;
}

.dark .login-card {
  background: rgba(37, 41, 45, 0.94);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.dark .auth-gate-card {
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

/* Theme hardening for legacy Tailwind-heavy screens. */
:root {
  --surface-raised: #ffffff;
  --surface-subtle: #fbfbf7;
  --text-danger: #b42318;
  --text-warning: var(--primary-hover);
  --text-success: #177245;
  --text-info: #255f99;
  --crm-line: var(--border);
  --crm-elevated: var(--surface);
  --crm-text: var(--ink);
  --crm-text-soft: var(--ink-muted);
  --crm-muted: var(--ink-muted);
}

.dark {
  --surface-raised: #30353b;
  --surface-subtle: #20242a;
  --text-danger: #ff9b93;
  --text-warning: var(--primary);
  --text-success: #7cdbac;
  --text-info: #9dccff;
}

.bg-gray-50,
.bg-gray-100,
.bg-gray-200 {
  border-color: var(--border) !important;
}

.dark .bg-gray-50,
.dark .bg-gray-100,
.dark .bg-gray-200,
.dark .bg-gray-300,
.dark .bg-gray-400,
.dark .bg-gray-500,
.dark .bg-gray-600,
.dark .bg-gray-700,
.dark .bg-gray-800,
.dark .bg-gray-900,
.dark .bg-neutral-50,
.dark .bg-neutral-100,
.dark .bg-neutral-200,
.dark .bg-neutral-300,
.dark .bg-neutral-400,
.dark .bg-neutral-500,
.dark .bg-neutral-600,
.dark .bg-neutral-700,
.dark .bg-neutral-800,
.dark .bg-neutral-900,
.dark .bg-slate-50,
.dark .bg-slate-100,
.dark .bg-slate-200,
.dark .bg-slate-300,
.dark .bg-slate-400,
.dark .bg-slate-500,
.dark .bg-slate-600,
.dark .bg-slate-700,
.dark .bg-slate-800,
.dark .bg-slate-900,
.dark .bg-zinc-50,
.dark .bg-zinc-100,
.dark .bg-zinc-200,
.dark .bg-zinc-300,
.dark .bg-zinc-400,
.dark .bg-zinc-500,
.dark .bg-zinc-600,
.dark .bg-zinc-700,
.dark .bg-zinc-800,
.dark .bg-zinc-900,
.dark .hover\:bg-gray-50:hover,
.dark .hover\:bg-gray-100:hover,
.dark .hover\:bg-gray-200:hover,
.dark .hover\:bg-gray-600:hover,
.dark .hover\:bg-gray-700:hover,
.dark .hover\:bg-gray-800:hover,
.dark .hover\:bg-neutral-50:hover,
.dark .hover\:bg-neutral-100:hover,
.dark .hover\:bg-neutral-200:hover,
.dark .hover\:bg-slate-50:hover,
.dark .hover\:bg-slate-100:hover,
.dark .hover\:bg-slate-200:hover,
.dark .hover\:bg-zinc-50:hover,
.dark .hover\:bg-zinc-100:hover,
.dark .hover\:bg-zinc-200:hover {
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
}

.dark .bg-red-50,
.dark .hover\:bg-red-50:hover,
.dark .hover\:bg-red-100:hover,
.dark .hover\:bg-red-200:hover {
  background: var(--danger-bg) !important;
  border-color: rgba(255, 155, 147, 0.26) !important;
  color: var(--text-danger) !important;
}

.dark .bg-green-50,
.dark .hover\:bg-green-50:hover,
.dark .hover\:bg-green-100:hover {
  background: var(--success-bg) !important;
  border-color: rgba(124, 219, 172, 0.26) !important;
  color: var(--text-success) !important;
}

.dark .bg-yellow-50,
.dark .hover\:bg-yellow-50:hover,
.dark .hover\:bg-yellow-100:hover {
  background: var(--warning-bg) !important;
  border-color: rgb(var(--primary-rgb)/0.32) !important;
  color: var(--primary) !important;
}

.dark .bg-blue-50,
.dark .hover\:bg-blue-50:hover,
.dark .hover\:bg-blue-100:hover {
  background: var(--info-bg) !important;
  border-color: rgba(157, 204, 255, 0.25) !important;
  color: var(--text-info) !important;
}

.dark .text-red-500,
.dark .text-red-600,
.dark .text-red-700,
.dark .text-red-800 {
  color: var(--text-danger) !important;
}

.dark .text-green-500,
.dark .text-green-600,
.dark .text-green-700,
.dark .text-green-800 {
  color: var(--text-success) !important;
}

.dark .text-yellow-500,
.dark .text-yellow-600,
.dark .text-yellow-700,
.dark .text-yellow-800 {
  color: var(--primary) !important;
}

.dark .text-blue-500,
.dark .text-blue-600,
.dark .text-blue-700,
.dark .text-blue-800 {
  color: var(--text-info) !important;
}

.dark .text-neutral-100,
.dark .text-neutral-200,
.dark .text-neutral-300,
.dark .text-slate-100,
.dark .text-slate-200,
.dark .text-slate-300,
.dark .text-zinc-100,
.dark .text-zinc-200,
.dark .text-zinc-300 {
  color: var(--ink) !important;
}

.dark .border-gray-400,
.dark .border-gray-500,
.dark .border-gray-600,
.dark .border-gray-700,
.dark .border-gray-800,
.dark .border-gray-900,
.dark .border-neutral-50,
.dark .border-neutral-100,
.dark .border-neutral-200,
.dark .border-neutral-300,
.dark .border-neutral-400,
.dark .border-neutral-500,
.dark .border-neutral-600,
.dark .border-neutral-700,
.dark .border-neutral-800,
.dark .border-neutral-900,
.dark .border-slate-50,
.dark .border-slate-100,
.dark .border-slate-200,
.dark .border-slate-300,
.dark .border-slate-400,
.dark .border-slate-500,
.dark .border-slate-600,
.dark .border-slate-700,
.dark .border-slate-800,
.dark .border-slate-900,
.dark .border-zinc-50,
.dark .border-zinc-100,
.dark .border-zinc-200,
.dark .border-zinc-300,
.dark .border-zinc-400,
.dark .border-zinc-500,
.dark .border-zinc-600,
.dark .border-zinc-700,
.dark .border-zinc-800,
.dark .border-zinc-900 {
  border-color: var(--border) !important;
}

.dark .divide-gray-100 > * + *,
.dark .divide-gray-200 > * + *,
.dark .divide-gray-300 > * + *,
.dark .divide-neutral-100 > * + *,
.dark .divide-neutral-200 > * + *,
.dark .divide-neutral-300 > * + *,
.dark .divide-slate-100 > * + *,
.dark .divide-slate-200 > * + *,
.dark .divide-slate-300 > * + *,
.dark .divide-zinc-100 > * + *,
.dark .divide-zinc-200 > * + *,
.dark .divide-zinc-300 > * + * {
  border-color: var(--border) !important;
}

.dark .ring-gray-200,
.dark .ring-gray-300,
.dark .ring-blue-500,
.dark .focus\:ring-blue-500:focus {
  --tw-ring-color: var(--border) !important;
}

.dark .ring-yellow-300,
.dark .ring-yellow-500,
.dark .focus\:ring-yellow-300:focus,
.dark .focus\:ring-yellow-500:focus {
  --tw-ring-color: var(--ring) !important;
  box-shadow: 0 0 0 3px var(--ring) !important;
}

.dark [role=dialog] .bg-white,
.dark .modal,
.dark .dropdown-menu,
.dark .popover,
.dark .absolute.z-50,
.dark .fixed.z-50 .bg-white {
  background: var(--surface-raised) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

.dark .bg-black,
.dark .bg-black\/40,
.dark .bg-black\/50,
.dark .bg-black\/60,
.dark .bg-opacity-50 {
  background-color: var(--overlay) !important;
}

.dark .stroke-gray-400,
.dark .stroke-gray-500,
.dark .stroke-gray-600,
.dark .stroke-slate-400,
.dark .stroke-slate-500,
.dark .stroke-zinc-400,
.dark .stroke-zinc-500 {
  stroke: var(--ink-muted) !important;
}

.dark .fill-gray-400,
.dark .fill-gray-500,
.dark .fill-gray-600,
.dark .fill-slate-400,
.dark .fill-slate-500,
.dark .fill-zinc-400,
.dark .fill-zinc-500 {
  fill: var(--ink-muted) !important;
}

.dark button:disabled,
.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.dark input[type=checkbox],
.dark input[type=radio] {
  accent-color: var(--primary);
  background-color: var(--control-bg) !important;
  border-color: var(--border) !important;
}

.dark ::selection {
  background: rgb(var(--primary-rgb)/0.28);
  color: var(--ink);
}

@media (max-width: 900px) {
  .main-content {
    padding: 16px 14px 84px;
  }
  .header-container {
    padding: 0 14px;
  }
  .header-content {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .header-left {
    width: 100%;
    justify-content: space-between;
  }
  .header-nav {
    order: 3;
    width: 100%;
  }
  .p-6 {
    padding: 14px !important;
  }
  .lead-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .lead-command h1 {
    font-size: 25px;
  }
  .lead-command-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lead-command-strip div:nth-child(2) {
    border-right: 0;
  }
  .lead-command-strip div:nth-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }
  .issue-board-grid {
    grid-template-columns: 1fr;
  }
  .issue-row {
    grid-template-columns: 1fr;
  }
  .table-container.has-selection-panel {
    padding-bottom: 178px;
  }
  .leads-page.has-selection-panel {
    padding-bottom: 178px;
  }
  .selection-panel {
    left: 14px;
    right: 14px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    padding: 10px;
    border-radius: 10px !important;
  }
  .crm-nav-collapsed .selection-panel {
    left: 14px;
  }
  .selection-content {
    align-items: stretch;
    grid-template-columns: minmax(0, 1fr);
  }
  .selection-left {
    justify-content: space-between;
  }
  .selection-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .selection-panel .action-btn {
    width: 100%;
    justify-content: center;
    min-height: 38px;
    white-space: normal;
    line-height: 1.15;
  }
  .issue-recover {
    min-height: 36px;
    border-top: 1px solid var(--border);
    border-left: 0;
  }
  .distribution-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .distribution-command h1 {
    font-size: 25px;
  }
  .distribution-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .distribution-strip div {
    border-bottom: 1px solid var(--border);
  }
  .distribution-strip div:nth-child(2n) {
    border-right: 0;
  }
  .distribution-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .route-attention-head {
    display: block;
  }
  .route-attention-list {
    grid-template-columns: 1fr;
  }
  .route-tool-modal,
  .crm-nav-collapsed .route-tool-modal {
    inset: 0;
    padding: 10px;
  }
  .route-tool-card {
    width: 100%;
    max-height: calc(100vh - 20px);
  }
  .route-simulator-grid {
    grid-template-columns: 1fr;
  }
  .queue-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .queue-command h1 {
    font-size: 25px;
  }
  .queue-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .queue-strip div {
    border-bottom: 1px solid var(--border);
  }
  .queue-strip div:nth-child(2n) {
    border-right: 0;
  }
  .queue-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .queue-attention-head {
    display: block;
  }
  .queue-attention-list {
    grid-template-columns: 1fr;
  }
  .queue-mobile-list {
    display: grid;
    gap: 10px;
  }
  .queue-table-shell {
    display: none;
  }
  .mapping-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .mapping-command h1 {
    font-size: 25px;
  }
  .mapping-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mapping-strip div {
    border-bottom: 1px solid var(--border);
  }
  .mapping-strip div:nth-child(2n) {
    border-right: 0;
  }
  .mapping-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .mapping-filters,
  .mapping-workspace,
  .mapping-row,
  .mapping-coverage {
    grid-template-columns: 1fr;
  }
  .mapping-row-actions {
    justify-content: flex-start;
  }
  .mapping-form-grid {
    grid-template-columns: 1fr;
  }
  .status-board-header,
  .status-board-toolbar,
  .status-board-side-head {
    display: grid;
    justify-content: stretch;
  }
  .status-board-header h1 {
    font-size: 25px;
  }
  .status-board-header-actions,
  .status-board-stats {
    justify-content: flex-start;
  }
  .status-board-layout,
  .status-board-table-head,
  .status-board-row,
  .status-board-form-grid {
    grid-template-columns: 1fr;
  }
  .status-board-unassigned {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .status-board-table-head span:first-child,
  .status-board-group-cell {
    border-right: 0;
  }
  .status-board-table-head span:last-child {
    display: none;
  }
  .status-board-status-cell {
    align-items: flex-start;
    border-top: 1px solid var(--border);
  }
  .postback-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .postback-command h1 {
    font-size: 25px;
  }
  .postback-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .postback-strip div {
    border-bottom: 1px solid var(--border);
  }
  .postback-strip div:nth-child(2n) {
    border-right: 0;
  }
  .postback-strip div:last-child {
    border-right: 1px solid var(--border);
  }
  .postback-attention-list,
  .postback-workspace,
  .postback-rule-row,
  .postback-attempt-card,
  .postback-attempt-metrics,
  .postback-debug-grid {
    grid-template-columns: 1fr;
  }
  .postback-form-grid,
  .postback-method-grid {
    grid-template-columns: 1fr;
  }
  .postback-row-actions,
  .postback-attempt-card div {
    justify-content: flex-start;
  }
  .postback-modal {
    align-items: flex-end;
    padding: 10px;
  }
  .health-command-main {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }
  .health-command h1 {
    font-size: 22px;
  }
  .health-command p {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .health-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }
  .health-actions .btn-secondary {
    min-height: 32px;
    padding: 0 8px;
    font-size: 11px;
    white-space: nowrap;
  }
  .health-next {
    padding: 9px;
  }
  .health-next strong {
    margin-top: 4px;
    font-size: 14px;
  }
  .health-next p {
    margin: 4px 0 8px;
    -webkit-line-clamp: 2;
  }
  .health-next .btn-secondary {
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
  .health-strip {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .health-strip::-webkit-scrollbar {
    display: none;
  }
  .health-strip div {
    flex: 0 0 min(170px, 48vw);
    padding: 8px 10px;
  }
  .health-strip div:last-child {
    border-right: 0;
  }
  .health-snapshot,
  .health-grid,
  .health-counts {
    grid-template-columns: 1fr;
  }
  .health-check-head,
  .health-check-foot {
    display: block;
  }
  .health-status-pill,
  .health-check-foot a {
    margin-top: 10px;
  }
  .logs-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .logs-command h1 {
    font-size: 25px;
  }
  .logs-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .logs-strip div {
    border-bottom: 1px solid var(--border);
  }
  .logs-strip div:nth-child(2n) {
    border-right: 0;
  }
  .logs-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .logs-filter-panel,
  .logs-row,
  .logs-detail-grid {
    grid-template-columns: 1fr;
  }
  .logs-feed-head {
    display: block;
  }
  .logs-list {
    max-height: none;
  }
  .logs-modal {
    align-items: flex-end;
    padding: 10px;
  }
  .keys-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .keys-command h1 {
    font-size: 25px;
  }
  .keys-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .keys-strip div {
    border-bottom: 1px solid var(--border);
  }
  .keys-strip div:nth-child(2n) {
    border-right: 0;
  }
  .keys-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .keys-secret-copy,
  .keys-filters,
  .keys-workspace,
  .keys-row {
    grid-template-columns: 1fr;
  }
  .keys-secret-head,
  .keys-list-head {
    display: block;
  }
  .keys-row-actions {
    justify-content: flex-start;
  }
  .users-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .users-command h1 {
    font-size: 25px;
  }
  .users-simple-head {
    display: block;
  }
  .users-simple-head h1 {
    font-size: 25px;
  }
  .users-simple-head .users-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
  .users-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .users-strip div {
    border-bottom: 1px solid var(--border);
  }
  .users-strip div:nth-child(2n) {
    border-right: 0;
  }
  .users-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .users-secret-copy,
  .users-filter-panel,
  .users-workspace,
  .users-row,
  .users-row-meta,
  .users-form-grid,
  .users-permission-grid,
  .users-segmented,
  .users-visible-leads-list {
    grid-template-columns: 1fr;
  }
  .users-secret-head,
  .users-list-head,
  .users-modal-head,
  .users-visible-leads-head,
  .users-inline-head {
    display: block;
  }
  .users-visible-leads-actions {
    justify-content: flex-start;
    margin-top: 10px;
  }
  .users-visible-leads-count {
    justify-content: center;
  }
  .users-row-actions {
    justify-content: flex-start;
    max-width: none;
  }
  .users-modal-wrap {
    align-items: flex-end;
    padding: 10px;
  }
  .users-group-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .users-inline-head a,
  .users-group-row .btn-secondary {
    width: 100%;
    margin-top: 10px;
  }
  .templates-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .templates-command h1 {
    font-size: 25px;
  }
  .templates-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .templates-strip div {
    border-bottom: 1px solid var(--border);
  }
  .templates-strip div:nth-child(2n) {
    border-right: 0;
  }
  .templates-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .templates-workspace,
  .templates-install-grid,
  .templates-form-grid,
  .templates-param-grid,
  .templates-request-grid,
  .templates-field-row,
  .templates-field-row-grid,
  .templates-password-head,
  .templates-password-grid,
  .templates-builder-side,
  .templates-installed-row,
  .templates-installed-meta,
  .templates-preview-metrics,
  .templates-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .templates-builder-side {
    position: static;
    grid-template-areas: "head" "json" "actions" "macros";
  }
  .templates-field-head {
    display: grid;
  }
  .templates-field-row-title {
    display: grid;
    align-items: stretch;
  }
  .templates-field-row-title div {
    display: grid;
    gap: 6px;
  }
  .templates-field-switches {
    grid-column: auto;
    padding-bottom: 0;
  }
  .templates-field-row-footer {
    align-items: stretch;
    flex-direction: column;
  }
  .templates-remove-button {
    width: 100%;
  }
  .templates-password-rules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .templates-remove-button {
    width: 100%;
  }
  .templates-panel-head,
  .templates-modal-head {
    display: block;
  }
  .templates-row-actions {
    justify-content: flex-start;
    max-width: none;
  }
  .templates-template-list-wide .templates-template-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .templates-template-list-wide .templates-row-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .templates-template-list-wide .templates-row-actions button:not(.templates-template-action-icon) {
    flex: 1 1 150px;
  }
  .templates-modal-wrap {
    align-items: flex-end;
    padding: 10px;
  }
  .groups-command-main {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }
  .groups-command h1 {
    font-size: 21px;
  }
  .groups-command p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .groups-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
  }
  .groups-actions .btn-primary,
  .groups-actions .btn-secondary,
  .groups-actions a {
    width: 100%;
    min-height: 32px;
    padding: 0 8px;
    font-size: 11px;
    white-space: normal;
  }
  .groups-next {
    padding: 7px 9px;
  }
  .groups-next strong {
    margin-top: 3px;
    font-size: 13px;
  }
  .groups-next p {
    margin-top: 3px;
    font-size: 12px;
    -webkit-line-clamp: 1;
  }
  .groups-strip {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .groups-strip div {
    padding: 5px;
    border-bottom: 0;
  }
  .groups-strip span {
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .groups-strip strong {
    margin-top: 2px;
    font-size: 13px;
  }
  .groups-strip div:nth-child(6n) {
    border-right: 0;
  }
  .groups-strip div:nth-child(3n) {
    border-right: 1px solid var(--border);
  }
  .groups-filter-panel {
    margin-top: 10px;
  }
  .groups-list {
    margin-top: 10px;
  }
  .groups-form {
    gap: 10px;
    margin-top: 10px;
  }
  .groups-form textarea {
    min-height: 78px;
  }
  .groups-workspace,
  .groups-filter-panel,
  .groups-form-grid,
  .groups-visibility-grid,
  .groups-member-add,
  .groups-member-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .groups-visibility-card {
    grid-template-columns: minmax(72px, 0.45fr) minmax(0, 1fr);
    align-items: center;
    padding: 8px;
  }
  .groups-visibility-card p {
    grid-column: 1/-1;
  }
  .groups-panel-head {
    display: block;
  }
  .groups-editor-actions {
    justify-content: flex-start;
  }
  .settings-simple-head {
    display: block;
    padding: 18px;
  }
  .settings-simple-head h1 {
    font-size: 25px;
  }
  .settings-simple-head .settings-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
  .settings-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .settings-strip div {
    border-bottom: 1px solid var(--border);
  }
  .settings-strip div:nth-child(2n) {
    border-right: 0;
  }
  .settings-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .settings-workspace,
  .settings-color-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-card > div:first-child {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-card > div:first-child strong {
    justify-self: start;
    text-align: left;
  }
  .settings-password-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-password-note {
    grid-column: 1;
    margin-top: 0;
  }
  .settings-params-panel .settings-panel-head,
  .settings-dedupe-panel .settings-panel-head {
    display: block;
  }
  .settings-dedupe-grid,
  .settings-dedupe-fields,
  .settings-param-create,
  .settings-param-toolbar,
  .settings-param-list article,
  .lead-params-summary {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-param-list em,
  .settings-param-list small {
    justify-self: flex-start;
  }
  .settings-param-badges,
  .settings-param-actions {
    justify-content: flex-start;
  }
  .settings-param-actions {
    min-width: 0;
  }
  .settings-swatches {
    grid-template-columns: repeat(6, minmax(0, 32px));
  }
  .integration-command-main {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .integration-editor-grid {
    grid-template-columns: 1fr;
  }
  .integration-editor-actions {
    position: static;
    box-shadow: none;
    backdrop-filter: none;
  }
  .integration-command h1 {
    font-size: 25px;
  }
  .integration-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .integration-strip div {
    border-bottom: 1px solid var(--border);
  }
  .integration-strip div:nth-child(2n) {
    border-right: 0;
  }
  .integration-strip div:nth-last-child(-n+2) {
    border-bottom: 0;
  }
  .login-shell {
    padding: 16px;
  }
  .login-card {
    padding: 22px;
  }
}
.route-builder {
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  overflow: visible;
}

.route-builder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, var(--primary) 8%), var(--panel));
}

.route-builder-head span,
.rule-step-title p,
.route-rule-section-title p {
  color: var(--muted);
}

.route-builder-head h2,
.rule-step-title h3 {
  margin: 4px 0;
  color: var(--text);
}

.route-builder-head p {
  max-width: 780px;
  color: var(--muted);
}

.route-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.route-builder-id {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 18px 22px 0;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 42%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary) 10%, var(--panel));
}

.route-builder-id span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.route-builder-id code,
.route-rule-tags code {
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  padding: 4px 8px;
}

.rule-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  border-top: 1px solid var(--border);
}

.route-builder-id + .rule-step {
  border-top: 0;
}

.rule-step-index {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast);
  font-weight: 800;
}

.rule-step-body {
  min-width: 0;
  overflow: visible;
}

.rule-step-title {
  margin-bottom: 16px;
}

.rule-step-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.route-add-menu {
  position: relative;
  z-index: 12;
  flex: 0 0 auto;
}

.route-add-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  min-width: 132px;
  padding: 8px 13px;
  white-space: nowrap;
}

.route-add-menu-trigger i:last-child {
  color: var(--muted);
  font-size: 11px;
  transition: transform 0.16s ease;
}

.route-add-menu-trigger-open i:last-child {
  transform: rotate(180deg);
}

.route-add-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 4px;
  width: max-content;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 16px 42px color-mix(in srgb, #000 30%, transparent);
}

.route-add-menu-list button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 38px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
}

.route-add-menu-list button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.route-add-menu-list button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.route-add-menu-list i {
  color: var(--primary);
  text-align: center;
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

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

.rule-grid-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 720px;
}

.rule-grid-base {
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.45fr);
  align-items: end;
}

.rule-field,
.rule-switch {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rule-field > span,
.rule-switch > span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.rule-field input,
.rule-field textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--control-bg, var(--surface));
  color: var(--text);
  padding: 7px 10px;
}

.route-box-active-toggle {
  min-height: 36px;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--control-bg, var(--surface));
  padding: 8px 10px;
}

.route-box-active-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
}

.route-box-active-toggle > span {
  display: grid;
  gap: 2px;
  min-width: 0;
  color: var(--text);
  text-transform: none;
}

.route-box-active-toggle strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.2;
}

.route-box-active-toggle small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}

.country-select {
  position: relative;
  width: 100%;
}

.country-select .country-select-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 8px !important;
  background: var(--control-bg, var(--surface));
  color: var(--ink);
  padding: 0 10px;
  text-align: left;
}

.rule-field .country-select .country-select-control {
  border-color: var(--border);
  background: var(--control-bg, var(--surface));
  box-shadow: none;
}

.route-rule-card,
.route-rule-section,
.route-rule-section .relative {
  overflow: visible;
}

.route-builder .crm-select-menu {
  z-index: 980;
}

.country-select-control:hover,
.country-select-control-open {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
}

.country-select-control:focus,
.country-select-control:focus-visible {
  outline: none;
  box-shadow: none;
}

.country-select-control .country-select-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
  min-height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.country-select-control strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 720;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-control span {
  flex: 0 0 auto;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 640;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-control i {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 12px;
}

.country-select-popover {
  position: fixed;
  z-index: 20000;
  top: auto;
  left: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.country-select-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
}

.country-select-tools label {
  position: relative;
  display: block;
}

.country-select-tools input {
  width: 100%;
  min-height: 38px !important;
  padding-left: 12px !important;
}

.country-select-tools > button,
.country-select-footer button {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 720;
}

.country-select-tools > button:hover,
.country-select-footer button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.country-select-all-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 20px);
  min-height: 54px;
  margin: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  padding: 9px 11px;
  text-align: left;
}

.country-select-all-row:hover {
  border-color: var(--primary);
  background: var(--surface-muted);
}

.country-select-all-row-active {
  border-color: color-mix(in srgb, var(--primary) 62%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
}

.country-select-all-row span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.country-select-all-row strong,
.country-select-all-row em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-all-row strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.country-select-all-row em {
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 640;
}

.country-select-all-row i {
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 12px;
}

.country-select-exclusions {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.country-select-exclusions > span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  text-transform: uppercase;
}

.country-select-exclusions div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.country-select-exclusions button,
.country-select-exclusions em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 5px 8px;
  font-size: 12px;
  font-style: normal;
  font-weight: 680;
}

.country-select-exclusions button:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.country-select-list {
  display: grid;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
}

.country-select-list button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 18px;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  padding: 0 9px;
  text-align: left;
}

.country-select-list button:hover {
  background: var(--surface-muted);
}

.country-select-list button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-select-list button em {
  color: var(--ink-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
}

.country-select-list button i {
  color: var(--ink-muted);
  font-size: 12px;
  text-align: center;
}

.country-select-list .country-select-option-active i {
  color: var(--primary);
}

.country-select-empty {
  color: var(--ink-muted);
  padding: 14px;
  font-size: 13px;
}

.country-select-footer {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.boxes-directory-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin: 18px 0 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.boxes-directory-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.boxes-directory-head h2 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.15;
}

.boxes-directory-head p {
  margin: 6px 0 0;
  max-width: 760px;
  color: var(--ink-muted);
}

.boxes-directory-head .btn-primary {
  flex: 0 0 auto;
  min-height: 42px;
  gap: 8px;
  white-space: nowrap;
}

.box-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.box-empty {
  color: var(--ink-muted);
  padding: 28px 12px;
  text-align: center;
}

.box-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.box-card:hover {
  border-color: color-mix(in srgb, var(--primary) 26%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, var(--primary) 4%);
}

.box-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 14px;
}

.box-card-main {
  min-width: 0;
}

.box-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.box-card-title-row h3 {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 17px;
  font-weight: 780;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-card-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 26px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 730;
  line-height: 1;
  padding: 4px 9px;
  white-space: nowrap;
}

.box-card-copy:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-muted));
  color: var(--primary);
}

.box-card-meta {
  margin-top: 8px;
}

.box-card-meta code,
.box-route-line code,
.box-route-index {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 2px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  font-weight: 720;
}

.box-card-countries {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.box-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: min(520px, 100%);
}

.box-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12px;
  font-weight: 760;
  line-height: 1.2;
  white-space: nowrap;
}

.box-pill-success {
  border-color: color-mix(in srgb, #43b883 42%, transparent);
  background: color-mix(in srgb, #43b883 16%, var(--surface));
  color: color-mix(in srgb, #43b883 78%, var(--ink));
}

.box-pill-info {
  border-color: color-mix(in srgb, var(--primary) 42%, transparent);
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
  color: color-mix(in srgb, var(--primary) 78%, var(--ink));
}

.box-pill-warning {
  border-color: color-mix(in srgb, var(--primary) 44%, transparent);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  color: color-mix(in srgb, var(--primary) 82%, var(--ink));
}

.box-pill-danger {
  border-color: color-mix(in srgb, #ef6f64 46%, transparent);
  background: color-mix(in srgb, #ef6f64 15%, var(--surface));
  color: color-mix(in srgb, #ef6f64 84%, var(--ink));
}

.box-pill-muted {
  border-color: var(--border);
  background: var(--surface-muted);
  color: var(--ink-muted);
}

.box-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 13px;
  font-weight: 760;
}

.box-action-edit {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface-muted) 74%, var(--surface));
  color: var(--ink);
}

.box-action-delete {
  border: 1px solid color-mix(in srgb, #ef6f64 34%, var(--border));
  background: color-mix(in srgb, #ef6f64 11%, var(--surface));
  color: color-mix(in srgb, #ef6f64 82%, var(--ink));
}

.box-action-tree {
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  background: color-mix(in srgb, var(--primary) 9%, var(--surface-muted));
  color: var(--ink);
}

.box-action-tree i {
  color: var(--primary);
  font-size: 12px;
}

.box-action:hover {
  filter: brightness(1.05);
}

.box-plan {
  border-top: 1px solid var(--border);
  padding: 14px 18px 16px;
}

.box-plan-tree {
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, transparent), transparent 30%), color-mix(in srgb, var(--surface) 94%, var(--surface-muted));
}

.box-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.box-plan-head p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
}

.box-plan-head div {
  color: var(--ink-muted);
  font-size: 12px;
  text-align: right;
}

.box-route-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-raised);
  padding: 12px;
}

.box-route-row + .box-route-row {
  margin-top: 8px;
}

.box-route-rule-group {
  display: grid;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-muted));
  padding: 10px;
}

.box-route-tree-folder {
  position: relative;
  padding-left: 42px;
}

.box-route-tree-folder::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 18px;
  bottom: 16px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 36%, var(--border));
}

.box-route-tree-folder .box-route-rule-head::before {
  content: "";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface));
}

.box-route-tree-folder .box-route-rule-head {
  position: relative;
}

.box-route-tree-folder .box-route-rule-head::after {
  content: "\f07b";
  position: absolute;
  left: 8px;
  top: 7px;
  color: var(--primary);
  font-family: "Font Awesome 6 Free";
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
}

.box-route-rule-group + .box-route-rule-group {
  margin-top: 10px;
}

.box-route-rule-group .box-route-row {
  border-style: dashed;
}

.box-route-rule-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.box-route-rule-head span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.box-route-rule-head strong {
  color: var(--ink);
}

.box-route-rule-head small {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 760;
}

.box-route-tree-children {
  display: grid;
  gap: 8px;
}

.box-route-tree-brand {
  position: relative;
  margin-left: 0;
}

.box-route-tree-brand::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 24px;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 36%, var(--border));
}

.box-route-rule-filters {
  margin-top: 0;
}

.box-route-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink-muted);
  font-size: 13px;
}

.box-route-line strong {
  color: var(--ink);
  font-size: 14px;
}

.box-route-note {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
}

.box-route-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.box-route-summary > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  padding: 9px 10px;
}

.box-route-summary span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0;
  text-transform: uppercase;
}

.box-route-summary strong {
  display: block;
  margin-top: 3px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.3;
}

.box-route-summary small {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.35;
}

.box-route-summary-danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border)) !important;
  background: color-mix(in srgb, var(--danger-bg) 42%, var(--surface-muted)) !important;
}

.box-route-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.box-route-filters span {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 680;
}

@media (max-width: 900px) {
  .box-card-head,
  .box-plan-head {
    flex-direction: column;
  }
  .box-card-actions {
    justify-content: flex-start;
    min-width: 0;
  }
  .box-plan-head div {
    text-align: left;
  }
  .box-route-summary {
    grid-template-columns: 1fr;
  }
  .boxes-directory-head {
    display: grid;
    align-items: stretch;
  }
  .boxes-directory-head .btn-primary {
    justify-content: center;
    width: 100%;
  }
  .route-rule-head,
  .route-rule-head-actions,
  .route-rule-section-title-row {
    align-items: stretch;
    flex-direction: column;
  }
  .route-brand-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .route-brand-remove {
    justify-self: flex-start;
    margin-bottom: 0;
  }
}
@media (max-width: 1300px) {
  .distribution-command-main {
    grid-template-columns: minmax(0, 1fr);
  }
  .distribution-actions {
    max-width: none;
  }
}
.rule-switch {
  justify-content: flex-start;
  min-height: 42px;
  flex-direction: row;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--panel) 88%, var(--text) 4%);
}

.route-delivery-toggle {
  align-items: flex-start;
  gap: 10px;
}

.route-delivery-toggle input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 3px;
}

.route-delivery-toggle > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.route-delivery-toggle strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.route-delivery-toggle small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.rule-grid-limits {
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(136px, 0.6fr));
}

.rule-empty,
.future-filter-panel {
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--text) 4%);
  color: var(--muted);
  padding: 16px;
}

.route-rules-empty {
  display: grid;
  gap: 10px;
}

.route-rules-empty strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.25;
}

.route-rules-empty p {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.route-rules-empty div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

.route-rules-empty span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.route-card-list {
  display: grid;
  gap: 12px;
}

.route-rule-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 96%, var(--text) 2%);
  overflow: visible;
}

.route-rule-card::before {
  content: none;
  display: none;
}

.route-folder-settings,
.route-brand-settings {
  display: block;
  min-width: 0;
}

.route-settings-toggle {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--panel));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  color: var(--text);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.route-settings-toggle:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-muted));
}

.route-settings-toggle > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
  white-space: nowrap;
}

.route-settings-toggle > small {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-settings-toggle > i:last-child {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  transition: transform 0.16s ease;
}

.route-settings-toggle-open > i:last-child {
  transform: rotate(180deg);
}

.route-folder-settings > .route-settings-toggle {
  margin: 12px 16px;
  width: calc(100% - 32px);
}

.route-settings-body {
  display: grid;
  min-width: 0;
}

.route-folder-settings > summary,
.route-brand-settings > summary {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.route-folder-settings > summary::-webkit-details-marker,
.route-brand-settings > summary::-webkit-details-marker {
  display: none;
}

.route-folder-settings > summary {
  margin: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--panel));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent);
  padding: 10px 12px;
}

.route-folder-settings > summary:hover,
.route-brand-settings > summary:hover {
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  background: color-mix(in srgb, var(--primary) 7%, var(--surface-muted));
}

.route-folder-settings > summary span,
.route-brand-settings > summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 820;
}

.route-folder-settings > summary small,
.route-brand-settings > summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-folder-settings > summary > i:last-child,
.route-brand-settings > summary > i:last-child {
  color: var(--muted);
  font-size: 12px;
  transition: transform 0.16s ease;
}

.route-folder-settings[open] > summary > i:last-child,
.route-brand-settings[open] > summary > i:last-child {
  transform: rotate(180deg);
}

.route-folder-settings[open] > summary {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.route-rule-card-error {
  border-color: color-mix(in srgb, #ef4444 65%, var(--border));
}

.route-rule-head,
.route-rule-section {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}

.route-rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: color-mix(in srgb, var(--panel) 88%, var(--primary) 6%);
  min-height: 64px;
}

.route-rule-card-dragging,
.route-brand-row-dragging {
  opacity: 0.62;
}

.route-drag-handle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--panel));
  border-radius: 10px;
  background: color-mix(in srgb, var(--control-bg, var(--surface)) 88%, var(--text) 4%);
  color: var(--muted);
  cursor: grab;
}

.route-drag-handle:active {
  cursor: grabbing;
}

.route-drag-handle:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  color: var(--text);
}

.route-rule-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.route-rule-head strong {
  color: var(--text);
}

.route-rule-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.route-rule-head-actions,
.route-rule-section-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.route-rule-head-actions .btn-secondary,
.route-rule-section-title-row .btn-secondary {
  min-height: 34px;
  padding: 7px 12px;
}

.route-rule-remove {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, #ef4444 35%, var(--border));
  border-radius: 10px;
  color: #ef4444;
  background: color-mix(in srgb, #ef4444 9%, var(--panel));
}

.route-rule-section:last-child {
  border-bottom: 0;
}

.route-rule-section-title {
  margin-bottom: 12px;
}

.route-rule-section-title span {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-weight: 800;
}

.route-rule-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

.route-rule-tags strong {
  border-radius: 999px;
  background: color-mix(in srgb, #ef4444 14%, var(--panel));
  color: #ef4444;
  padding: 4px 8px;
}

.route-brand-list {
  position: relative;
  display: grid;
  gap: 10px;
  padding-left: 34px;
}

.route-brand-add {
  justify-self: start;
  min-width: 220px;
}

.route-brand-row {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(220px, 1fr) minmax(88px, 120px) minmax(110px, 140px) 36px;
  align-items: end;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--panel));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent);
  padding: 12px;
}

.route-brand-row::before {
  content: "";
  position: absolute;
  left: -24px;
  top: 31px;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 32%, var(--border));
}

.route-brand-row .route-brand-settings {
  grid-column: 1/-1;
}

.route-brand-settings > summary {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--panel));
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 90%, var(--text) 3%);
  padding: 8px 10px;
}

.route-brand-settings[open] > summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.route-brand-drag-handle {
  align-self: end;
  margin-bottom: 1px;
}

.route-priority-pill {
  display: grid;
  align-content: center;
  min-height: 42px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 90%, var(--primary) 4%);
  padding: 7px 10px;
}

.route-priority-pill span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.route-priority-pill strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.1;
}

.route-brand-remove {
  align-self: end;
  margin-bottom: 1px;
}

.route-brand-tags {
  grid-column: 1/-1;
  margin-top: 0;
}

.route-brand-conditions {
  grid-column: 1/-1;
  border: 1px solid color-mix(in srgb, var(--border) 78%, var(--panel));
  border-top: 0;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background: color-mix(in srgb, var(--panel) 88%, var(--text) 3%);
  padding: 12px;
}

.route-brand-cap-grid {
  grid-template-columns: minmax(180px, 0.9fr) minmax(150px, 0.7fr) minmax(180px, 0.9fr) minmax(220px, 1fr) repeat(3, minmax(128px, 0.6fr));
  margin-bottom: 12px;
}

.route-brand-delivery-toggle {
  min-height: 52px;
}

.route-brand-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px dashed color-mix(in srgb, var(--border) 86%, var(--panel));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-muted) 62%, transparent);
  padding: 14px;
  color: var(--muted);
}

.future-filter-panel {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.future-filter-panel i {
  color: var(--primary);
  margin-top: 4px;
}

.future-filter-panel strong {
  color: var(--text);
}

.future-filter-panel p {
  margin-top: 4px;
}

.route-value-picker,
.route-funnel-editor,
.route-parameter-editor {
  display: grid;
  gap: 10px;
}

.route-condition-stack {
  display: grid;
  gap: 12px;
}

.route-condition-group {
  display: grid;
  gap: 10px;
}

.route-condition-group-body {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 92%, var(--text) 3%);
  padding: 12px;
}

.route-condition-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.route-condition-head strong,
.route-condition-head span {
  display: block;
}

.route-condition-head strong {
  color: var(--text);
  font-size: 14px;
}

.route-condition-head span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.route-condition-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.route-condition-or::before,
.route-condition-or::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: color-mix(in srgb, var(--primary) 34%, var(--border));
}

.route-condition-remove,
.route-condition-add {
  min-height: 34px;
  padding: 7px 12px;
}

.route-condition-remove:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.route-condition-add {
  justify-self: start;
}

.route-picker-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.route-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.route-chip-list button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--control-bg, var(--surface)) 86%, var(--text) 4%);
  color: var(--text);
  padding: 4px 9px 4px 10px;
  font-size: 12px;
  font-weight: 720;
}

.route-chip-list button:hover {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: color-mix(in srgb, var(--primary) 12%, var(--control-bg, var(--surface)));
}

.route-chip-list span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.route-chip-list i {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 11px;
}

.route-parameter-value-picker {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.route-parameter-value-chips {
  gap: 5px;
}

.route-parameter-value-chips button {
  max-width: 140px;
}

.route-funnel-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, 0.55fr) minmax(170px, auto);
  gap: 12px;
  align-items: end;
}

.route-funnel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.route-funnel-actions .btn-secondary {
  min-height: 34px;
  padding: 7px 12px;
}

.route-danger-soft {
  border-color: color-mix(in srgb, var(--danger) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--danger-bg) 38%, var(--control-bg, var(--surface))) !important;
  color: var(--text-danger) !important;
}

.route-funnel-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.route-funnel-lists > div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--text) 3%);
  padding: 10px;
}

.route-funnel-lists > div > span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.route-parameter-list {
  display: grid;
  gap: 10px;
}

.route-parameter-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(160px, 1fr) minmax(180px, 1.15fr) minmax(150px, 0.85fr) minmax(100px, auto) 40px;
  gap: 10px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, var(--text) 3%);
  padding: 10px;
}

.route-parameter-row .rule-field {
  min-width: 0;
}

.route-parameter-case {
  min-height: 42px;
  justify-content: center;
}

.route-parameter-remove {
  align-self: end;
  width: 40px;
  height: 42px;
}

.route-parameter-add {
  justify-self: start;
  min-height: 34px;
  padding: 7px 12px;
}

.route-mini-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 88%, var(--text) 4%);
  color: var(--text);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 720;
}

.route-mini-switch input {
  width: 16px;
  height: 16px;
}

@media (max-width: 980px) {
  .rule-grid-limits,
  .route-funnel-grid,
  .route-funnel-lists,
  .route-parameter-row {
    grid-template-columns: 1fr;
  }
  .route-parameter-remove {
    width: 100%;
  }
}
/* Form controls: one clean baseline for CRM inputs, without Tailwind focus rings. */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=date],
input[type=datetime-local],
input[type=search],
input[type=tel],
input[type=url],
input:not([type]),
select,
textarea {
  width: 100%;
  min-height: 36px !important;
  padding: 7px 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--control-bg, var(--surface)) !important;
  color: var(--ink) !important;
  font-family: var(--app-font-family) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

select {
  padding-right: 32px !important;
}

textarea {
  min-height: 76px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  resize: vertical;
}

input[type=color] {
  min-height: auto !important;
  padding: 3px !important;
  box-shadow: none !important;
  outline: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

input:focus,
select:focus,
textarea:focus,
input[class*="focus:ring"]:focus,
select[class*="focus:ring"]:focus,
textarea[class*="focus:ring"]:focus {
  outline: none !important;
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border)) !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.crm-nav-search {
  min-height: 38px;
  border-radius: 8px;
}

.crm-nav-search:focus-within {
  border-color: color-mix(in srgb, var(--primary) 70%, var(--border));
  box-shadow: none;
}

.crm-nav-search input,
.crm-nav-search input:focus {
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  --tw-ring-color: transparent !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-offset-shadow: 0 0 #0000 !important;
}

.settings-form select,
.settings-form input[type=text],
.settings-param-create input,
.settings-param-create select,
.settings-param-toolbar input {
  min-height: 36px !important;
  padding: 7px 10px !important;
}

.settings-param-create {
  grid-template-columns: minmax(110px, 0.8fr) minmax(130px, 1fr) minmax(120px, 0.7fr) minmax(180px, 1.4fr) minmax(150px, auto);
  gap: 12px;
  padding: 14px 16px 16px;
}

.settings-param-create button {
  min-height: 36px;
  padding-right: 14px;
  padding-left: 14px;
  white-space: nowrap;
}

/* Final CRM polish layer: keep legacy utility-heavy screens aligned with the new shell. */
:root {
  --panel: var(--surface);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --border-strong: var(--border);
}

.dark {
  --panel: var(--surface);
  --text: var(--ink);
  --muted: var(--ink-muted);
  --border-strong: var(--border);
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[role=button]:focus {
  outline: none !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role=button]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 2px var(--ring) !important;
}

.btn-primary,
.btn-secondary,
.btn-danger,
.action-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 7px 12px;
  font-weight: 720;
  line-height: 1.2;
}

.distribution-command-main,
.integration-command-main,
.queue-command-main,
.lead-command-main,
.mapping-command-main,
.postback-command-main,
.health-command-main,
.logs-command-main,
.keys-command-main,
.users-command-main,
.templates-command-main,
.groups-command-main {
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.13), transparent 36%), var(--surface) !important;
}

.crm-nav-section-toggle[aria-expanded=true] {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--ink) 4%) !important;
  color: var(--ink);
}

.crm-nav-section-items {
  gap: 3px;
  margin-top: 5px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-muted) 88%, #000000 4%) !important;
}

.dark .crm-nav-section-toggle[aria-expanded=true] {
  background: color-mix(in srgb, var(--surface-muted) 80%, #000000 20%) !important;
}

.dark .crm-nav-section-items {
  border-color: color-mix(in srgb, var(--border) 78%, #ffffff 6%);
  background: color-mix(in srgb, var(--surface-muted) 78%, #000000 22%) !important;
}

.status-indicator,
.badge,
.deposit-pill,
.brand-status-value,
.crm-status-badge {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
  text-transform: uppercase;
}

.status-indicator,
.badge {
  min-height: 24px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
}

.status-indicator span,
.badge span,
.deposit-pill span,
.crm-status-badge span {
  line-height: inherit;
}

.status-dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  border-radius: 50% !important;
}

.lead-detail-page {
  max-width: none;
  margin: 0 auto;
}

.lead-detail-page .page-container {
  max-width: none;
}

.lead-detail-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  padding: 18px;
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.lead-detail-title-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lead-detail-title-row h1 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.15;
  font-weight: 780;
}

.lead-detail-title-row > span {
  display: inline-flex;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
  white-space: normal;
}

.lead-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 8px;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.35;
}

.lead-detail-statuses {
  display: flex;
  max-width: 520px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.lead-detail-statuses .badge,
.lead-detail-statuses .status-indicator,
.lead-detail-statuses .deposit-pill {
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 12px !important;
}

.lead-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: 18px;
}

.lead-detail-primary,
.lead-detail-sidebar {
  display: grid;
  align-content: start;
  gap: 18px;
  min-width: 0;
}

.lead-detail-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.lead-detail-section-title h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 760;
}

.lead-detail-section-title p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.4;
}

.lead-detail-note {
  max-width: 520px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 8px 10px;
  font-size: 13px;
  line-height: 1.35;
}

.lead-detail-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.lead-detail-field {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 12px;
}

.lead-detail-field-wide {
  grid-column: span 2;
}

.lead-detail-field-label {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-transform: uppercase;
}

.lead-detail-field-label i {
  display: inline-grid;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 72%, var(--surface-muted));
  color: color-mix(in srgb, var(--primary) 78%, var(--ink-muted));
  font-size: 10px;
  line-height: 1;
}

.lead-detail-field-label span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-detail-field-value {
  min-width: 0;
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.lead-detail-page .card {
  overflow: hidden;
}

.lead-detail-page pre {
  border: 1px solid var(--border);
  background: var(--code-bg) !important;
  color: var(--ink) !important;
}

.lead-detail-single {
  display: grid;
  gap: 16px;
}

.lead-detail-card {
  overflow: hidden;
}

.lead-replay-card {
  background: color-mix(in srgb, var(--surface) 92%, var(--primary) 8%);
}

.lead-replay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.lead-replay-actions .btn-secondary {
  min-height: 42px;
}

.lead-replay-actions .btn-secondary i {
  margin-right: 8px;
}

.lead-replay-actions > span {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 650;
}

.lead-replay-note {
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  padding: 12px 14px;
}

.lead-edit-card {
  background: color-mix(in srgb, var(--surface) 94%, var(--control-bg) 6%);
}

.lead-edit-card .btn-secondary i,
.lead-edit-card .btn-primary i {
  margin-right: 8px;
}

.lead-edit-form {
  display: grid;
  gap: 14px;
}

.lead-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.lead-edit-field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.lead-edit-field-wide {
  grid-column: 1/-1;
}

.lead-edit-field > span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.25;
}

.lead-edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.lead-edit-readonly {
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
}

.lead-detail-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.lead-detail-section-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.lead-detail-section-title-row > span {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.2;
}

.lead-detail-field a {
  color: var(--primary);
  text-decoration: none !important;
}

.lead-code-stack {
  display: grid;
  gap: 10px;
}

.lead-code-panel {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.lead-code-panel > span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-transform: uppercase;
}

.lead-code-pre {
  max-height: 320px;
  margin: 0;
  overflow: auto;
  border-radius: 8px;
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.lead-code-pre-compact {
  max-height: 190px;
}

.lead-route-list,
.lead-attempt-list,
.lead-timeline-list,
.lead-status-history {
  display: grid;
  gap: 10px;
}

.lead-route-card,
.lead-attempt-card,
.lead-timeline-card,
.lead-status-history-row {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  padding: 12px;
}

.lead-route-head,
.lead-attempt-head,
.lead-timeline-title,
.lead-status-history-badges {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.lead-route-head,
.lead-attempt-head {
  justify-content: space-between;
  margin-bottom: 8px;
}

.lead-route-head > span:not(.lead-chip),
.lead-attempt-head span,
.lead-status-history-row p {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.lead-route-card > strong,
.lead-attempt-head h3,
.lead-timeline-title h3 {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.lead-route-meta,
.lead-attempt-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.lead-route-meta span,
.lead-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-muted);
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.15;
}

.lead-tone-success {
  border-color: color-mix(in srgb, var(--success) 38%, var(--border)) !important;
  background: var(--success-bg) !important;
  color: var(--success) !important;
}

.lead-tone-warning {
  border-color: color-mix(in srgb, var(--warning) 38%, var(--border)) !important;
  background: var(--warning-bg) !important;
  color: var(--warning) !important;
}

.lead-tone-danger {
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border)) !important;
  background: var(--danger-bg) !important;
  color: var(--danger) !important;
}

.lead-tone-info {
  border-color: color-mix(in srgb, var(--info) 38%, var(--border)) !important;
  background: var(--info-bg) !important;
  color: var(--info) !important;
}

.lead-tone-neutral {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--ink-muted) !important;
}

.lead-skipped-routes {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.lead-skipped-routes b {
  color: var(--ink-muted);
  font-size: 12px;
}

.lead-skipped-routes div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 7px 9px;
  color: var(--ink-muted);
  font-size: 12px;
}

.lead-skipped-routes div strong {
  color: var(--danger);
  font-weight: 700;
}

.lead-route-card p,
.lead-timeline-card p,
.lead-attempt-error {
  margin: 8px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.lead-debug-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.lead-timeline-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
}

.lead-timeline-card time {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.45;
}

.lead-empty {
  margin: 0;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 14px;
  font-size: 13px;
  line-height: 1.4;
}

.lead-status-modal {
  width: min(760px, 100vw - 32px);
  max-height: 82vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px;
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.32);
}

.lead-status-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.lead-status-modal-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 760;
}

.lead-status-modal-head button {
  min-width: 84px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 0 10px;
  font-weight: 760;
}

@media (max-width: 980px) {
  .lead-detail-two-col,
  .lead-debug-grid {
    grid-template-columns: 1fr;
  }
  .lead-timeline-card {
    grid-template-columns: 1fr;
  }
}
.lead-actions-card {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.lead-actions-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
}

.lead-actions-head .btn-secondary {
  min-width: 118px;
  white-space: nowrap;
}

.lead-actions-alert,
.lead-replay-panel,
.lead-actions-message {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.lead-actions-alert {
  padding: 9px 11px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.lead-replay-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
}

.lead-replay-copy h3 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  font-weight: 760;
}

.lead-replay-copy p {
  margin: 4px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.lead-actions-message {
  padding: 9px 11px;
  font-size: 13px;
  line-height: 1.35;
}

.lead-actions-message-success {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: var(--success-bg);
  color: var(--success);
}

.lead-actions-message-error {
  border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
  background: var(--danger-bg);
  color: var(--danger);
}

.lead-actions-form {
  display: grid;
  gap: 12px;
}

.lead-actions-field {
  display: grid;
  gap: 6px;
}

.lead-actions-field span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.2;
}

.lead-actions-field textarea {
  min-height: 92px !important;
}

.integration-list-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
  overflow: hidden;
}

.integration-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  background: var(--surface-muted);
}

.integration-list-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 760;
}

.integration-list-head span,
.integration-row-meta,
.integration-row-url {
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.integration-empty {
  padding: 34px 16px;
  color: var(--ink-muted);
  font-size: 13px;
  text-align: center;
}

.integration-list {
  display: grid;
}

.integration-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  border-bottom: 1px solid var(--border);
  padding: 15px 16px;
}

.integration-row:last-child {
  border-bottom: 0;
}

.integration-row:hover {
  background: var(--surface-muted);
}

.integration-row-main {
  min-width: 0;
}

.integration-row-title {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.integration-row-title h3 {
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.25;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  text-transform: uppercase;
}

.integration-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 8px;
}

.integration-row-url {
  max-width: 900px;
  margin-top: 8px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-row-template-state {
  max-width: 900px;
  margin-top: 6px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.integration-row-actions {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.integration-action-icon {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  min-width: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 13px;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.integration-action-icon:hover:not(:disabled) {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-1px);
}

.integration-action-icon:disabled {
  cursor: not-allowed;
  opacity: 0.46;
  transform: none;
}

.integration-action-icon span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.integration-action-pull {
  border-color: color-mix(in srgb, var(--info) 34%, var(--border));
  background: color-mix(in srgb, var(--info) 10%, var(--surface-muted));
  color: var(--info);
}

.integration-action-pull:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--info) 62%, var(--border));
  background: color-mix(in srgb, var(--info) 16%, var(--surface-muted));
  color: var(--info);
}

.integration-action-sync {
  border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
  background: color-mix(in srgb, var(--warning) 10%, var(--surface-muted));
  color: var(--warning);
}

.integration-action-sync:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--warning) 66%, var(--border));
  background: color-mix(in srgb, var(--warning) 16%, var(--surface-muted));
  color: var(--warning);
}

.integration-action-danger {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: var(--danger-bg);
  color: var(--danger);
}

.integration-action-danger:hover:not(:disabled) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-bg) 78%, var(--danger) 12%);
  color: var(--danger);
}

.integration-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  padding: 18px;
}

.integration-preview-modal {
  display: grid;
  width: min(980px, 100%);
  max-height: min(90vh, 820px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 22px 64px rgba(0, 0, 0, 0.32);
}

.integration-preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  padding: 16px;
}

.integration-preview-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.2;
}

.integration-preview-head p {
  margin: 5px 0 0;
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.35;
}

.integration-preview-head .btn-secondary,
.integration-preview-head .btn-primary {
  min-height: 34px;
  flex: 0 0 auto;
  padding: 7px 12px;
}

.integration-preview-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.integration-preview-geo-select {
  display: grid;
  gap: 6px;
  min-width: 150px;
}

.integration-preview-geo-select > span {
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 820;
  line-height: 1;
  text-transform: uppercase;
}

.integration-preview-geo-select .crm-select {
  min-height: 34px;
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
}

.integration-preview-body {
  display: grid;
  gap: 14px;
  max-height: calc(min(90vh, 820px) - 68px);
  overflow-y: auto;
  padding: 16px;
}

.integration-preview-error {
  border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--border));
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.35;
}

.integration-preview-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.integration-preview-metrics div {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 10px 12px;
}

.integration-preview-metrics span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.integration-preview-metrics strong {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.integration-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.integration-preview-wide {
  grid-column: 1/-1;
}

.integration-preview-block {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.integration-preview-block h3 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 780;
  line-height: 1.2;
}

.integration-preview-code {
  min-height: 88px;
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--code-bg);
  color: var(--ink);
  padding: 11px 12px;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.integration-preview-code-tall {
  min-height: 180px;
}

.integration-preview-result {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.integration-preview-result-ok {
  border-color: color-mix(in srgb, var(--success) 42%, var(--border));
  background: color-mix(in srgb, var(--success-bg) 54%, var(--surface));
}

.integration-preview-result-warn {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--border));
  background: color-mix(in srgb, var(--warning-bg) 54%, var(--surface));
}

.integration-preview-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.integration-preview-result-head span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 820;
  line-height: 1.1;
  text-transform: uppercase;
}

.integration-preview-result-head h3 {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 780;
  line-height: 1.2;
}

.integration-preview-result-head strong {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.1;
}

@media (max-width: 720px) {
  .integration-preview-overlay {
    align-items: flex-end;
    padding: 10px;
  }
  .integration-preview-modal {
    max-height: 92vh;
  }
  .integration-preview-head {
    display: grid;
  }
  .integration-preview-actions {
    display: grid;
    width: 100%;
  }
  .integration-preview-geo-select {
    width: 100%;
  }
  .integration-preview-head .btn-secondary,
  .integration-preview-head .btn-primary {
    width: 100%;
  }
  .integration-preview-result-head {
    display: grid;
  }
  .integration-preview-metrics,
  .integration-preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.payouts-page > * + * {
  margin-top: 18px;
}

.payouts-command,
.payouts-panel {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.payouts-command {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
}

.payouts-command span,
.payouts-panel-head span {
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 820;
  text-transform: uppercase;
}

.payouts-command h1 {
  margin: 6px 0;
  color: var(--ink);
  font-size: 32px;
  line-height: 1.1;
}

.payouts-command p,
.payouts-panel-head p,
.payouts-rule-preview p {
  max-width: 760px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.payouts-panel {
  padding: 18px;
}

.payouts-panel-head h2 {
  margin: 6px 0;
  color: var(--ink);
  font-size: 18px;
}

.payouts-rule-preview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.payouts-rule-preview > div {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.payouts-rule-preview strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 15px;
}

.payouts-rule-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.payouts-rule-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.payouts-rule-main {
  display: grid;
  min-width: 0;
  gap: 9px;
}

.payouts-rule-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.payouts-rule-title strong {
  color: var(--ink);
  font-size: 15px;
}

.payouts-rule-badge {
  border-radius: 999px;
  background: var(--selection-bg);
  color: var(--primary);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.payouts-rule-badge-active {
  background: rgba(59, 130, 91, 0.16);
  color: var(--success);
}

.payouts-rule-amount {
  color: var(--ink);
  font-size: 19px;
  font-weight: 820;
  line-height: 1.1;
}

.payouts-rule-scope {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.payouts-rule-chip {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  padding: 6px 9px;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.15;
}

.payouts-rule-chip b {
  flex: 0 0 auto;
  color: var(--ink-soft);
  font-size: 10px;
  font-weight: 820;
  text-transform: uppercase;
}

.payouts-rule-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.payouts-rule-country-list {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.payouts-rule-country-list .flag-value {
  max-width: 82px;
}

.payouts-rule-country-list em {
  color: var(--ink-muted);
  font-style: normal;
  font-weight: 760;
}

.payouts-rule-delete {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--danger) 32%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger-bg) 74%, var(--surface));
  color: var(--danger);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.payouts-rule-delete:hover {
  border-color: color-mix(in srgb, var(--danger) 54%, var(--border));
  background: color-mix(in srgb, var(--danger-bg) 82%, var(--danger) 10%);
  transform: translateY(-1px);
}

.payouts-modal-card {
  width: min(920px, 100vw - 32px);
  overflow: visible;
}

.payouts-modal-card .postback-modal-body {
  max-height: none;
  overflow: visible;
}

.payouts-modal-card .crm-select-menu {
  z-index: 140;
}

.postback-modal-card .country-select-popover,
.payouts-modal-card .country-select-popover {
  display: flex;
  flex-direction: column;
  max-height: min(360px, 100vh - 48px);
  z-index: 145;
}

.postback-modal-card .country-select-list,
.payouts-modal-card .country-select-list {
  max-height: 150px;
}

.payouts-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.payouts-form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
}

.payouts-form-grid input {
  width: 100%;
}

.payouts-form-grid .country-select {
  width: 100%;
}

.payouts-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-self: end;
}

.payouts-check {
  display: flex !important;
  min-height: 36px;
  align-items: center;
  gap: 9px !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 7px 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650 !important;
}

.payouts-check input {
  width: 16px !important;
  height: 16px !important;
  min-height: 16px !important;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.payouts-check span {
  min-width: 0;
}

.postback-modal-actions {
  gap: 10px;
}

@media (max-width: 760px) {
  .payouts-command,
  .payouts-rule-row {
    flex-direction: column;
    align-items: stretch;
  }
  .payouts-rule-delete {
    width: 100%;
  }
  .payouts-rule-preview,
  .payouts-form-grid {
    grid-template-columns: 1fr;
  }
}
.traffic-settings-page {
  display: grid;
  gap: 14px;
}

.traffic-settings-shell,
.traffic-settings-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.traffic-settings-shell {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.traffic-settings-header,
.traffic-settings-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
}

.traffic-settings-header {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.traffic-settings-header span,
.traffic-settings-detail-head span,
.traffic-settings-entry span {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: 0;
  text-transform: uppercase;
}

.traffic-settings-header h1 {
  margin: 6px 0 8px;
  color: var(--ink);
  font-size: clamp(34px, 4vw, 44px);
  line-height: 1;
}

.traffic-settings-header p,
.traffic-settings-detail-head p,
.traffic-settings-entry p,
.traffic-autologin-note p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.traffic-settings-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.traffic-settings-entry {
  display: grid;
  min-height: 178px;
  gap: 10px;
  align-content: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: inherit;
  padding: 16px;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.traffic-settings-entry:hover {
  border-color: color-mix(in srgb, var(--button-primary-bg) 42%, var(--border));
  background: color-mix(in srgb, var(--button-primary-bg) 7%, var(--surface-muted));
  transform: translateY(-1px);
}

.traffic-settings-entry strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.05;
}

.traffic-settings-entry em {
  justify-self: start;
  align-self: end;
  border: 1px solid color-mix(in srgb, var(--button-primary-bg) 34%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--button-primary-bg) 10%, var(--surface-muted));
  color: var(--ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  padding: 8px 10px;
}

.traffic-settings-detail {
  display: grid;
  gap: 12px;
}

.traffic-settings-back {
  justify-self: start;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--control-bg);
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
  line-height: 1;
  padding: 10px 12px;
  cursor: pointer;
}

.traffic-settings-panel {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.traffic-settings-detail-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.traffic-settings-detail-head h2 {
  margin: 5px 0 7px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.05;
}

.traffic-settings-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.1fr) minmax(240px, 0.9fr);
  gap: 12px;
}

.traffic-dedupe-toggle,
.traffic-match-select,
.traffic-field-card,
.traffic-autologin-toggle {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.traffic-dedupe-toggle,
.traffic-autologin-toggle {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  cursor: pointer;
}

.traffic-dedupe-toggle input,
.traffic-autologin-toggle input,
.traffic-field-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.traffic-toggle-mark,
.traffic-field-check {
  display: grid;
  place-items: center;
  border: 1.5px solid color-mix(in srgb, var(--ink-muted) 72%, var(--border));
  border-radius: 6px;
  background: var(--control-bg);
}

.traffic-toggle-mark {
  width: 24px;
  height: 24px;
}

.traffic-field-check {
  width: 20px;
  height: 20px;
}

.traffic-dedupe-toggle-active .traffic-toggle-mark,
.traffic-autologin-toggle-active .traffic-toggle-mark,
.traffic-field-card-active .traffic-field-check {
  border-color: var(--button-primary-bg);
  background: var(--button-primary-bg);
}

.traffic-dedupe-toggle-active .traffic-toggle-mark::after,
.traffic-autologin-toggle-active .traffic-toggle-mark::after,
.traffic-field-card-active .traffic-field-check::after {
  content: "";
  width: 8px;
  height: 12px;
  margin-top: -2px;
  border-right: 2px solid var(--button-primary-text);
  border-bottom: 2px solid var(--button-primary-text);
  transform: rotate(45deg);
}

.traffic-dedupe-toggle strong,
.traffic-autologin-toggle strong,
.traffic-field-card strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.traffic-dedupe-toggle small,
.traffic-autologin-toggle small {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}

.traffic-match-select {
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 12px;
}

.traffic-match-select .relative,
.traffic-match-select .crm-select {
  min-width: 0;
}

.traffic-match-select .crm-select {
  overflow: hidden;
}

.traffic-match-select > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 780;
}

.traffic-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.traffic-field-card {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.traffic-field-card-active {
  border-color: color-mix(in srgb, var(--button-primary-bg) 64%, var(--border));
  background: color-mix(in srgb, var(--button-primary-bg) 9%, var(--surface-muted));
}

.traffic-field-card:has(input:disabled) {
  opacity: 0.58;
  cursor: default;
}

.traffic-field-card code {
  display: block;
  width: 100%;
  margin-top: 4px;
  border-radius: 5px;
  background: var(--code-bg);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.3;
  padding: 3px 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.traffic-param-create,
.traffic-param-toolbar {
  display: grid;
  gap: 10px;
}

.traffic-param-create {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.traffic-param-create label,
.traffic-param-toolbar {
  min-width: 0;
}

.traffic-param-create label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.traffic-param-create input,
.traffic-param-toolbar input {
  width: 100%;
  min-width: 0;
}

.traffic-param-required {
  display: flex !important;
  align-items: center;
  gap: 9px !important;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--control-bg);
  padding: 0 12px;
  cursor: pointer;
}

.traffic-param-required input {
  margin: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--primary);
}

.traffic-param-toolbar {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.traffic-param-toolbar span {
  color: var(--ink-muted);
  font-size: 13px;
  font-weight: 780;
}

.traffic-param-list {
  display: grid;
  gap: 8px;
}

.traffic-param-list article {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 12px;
}

.traffic-param-muted {
  opacity: 0.58;
}

.traffic-param-main {
  min-width: 0;
}

.traffic-param-main strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}

.traffic-param-main code {
  display: inline-block;
  margin-top: 5px;
  border-radius: 5px;
  background: var(--code-bg);
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  padding: 3px 6px;
}

.traffic-param-main p {
  margin: 6px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.traffic-param-badges,
.traffic-param-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

.traffic-param-badges em,
.traffic-param-badges small {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--control-bg);
  color: var(--ink-muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  padding: 7px 9px;
}

.traffic-param-required-badge {
  border-color: color-mix(in srgb, var(--button-primary-bg) 45%, var(--border)) !important;
  color: var(--ink) !important;
}

.traffic-param-actions .btn-secondary {
  min-height: 36px;
  padding: 0 11px;
}

.traffic-autologin-toggle {
  max-width: 760px;
}

.traffic-autologin-note {
  display: grid;
  gap: 6px;
  max-width: 760px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px;
}

.traffic-autologin-note strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.reports-head,
.payouts-command,
.status-board-header,
.traffic-settings-header,
.settings-simple-head {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: linear-gradient(135deg, rgb(var(--primary-rgb)/0.14), transparent 34%), linear-gradient(315deg, rgba(37, 95, 153, 0.07), transparent 32%), var(--surface);
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

.reports-head,
.payouts-command,
.status-board-header,
.traffic-settings-header,
.settings-simple-head {
  min-width: 0;
  padding: 22px;
}

.traffic-settings-shell {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.traffic-settings-header {
  border-bottom: 0;
}

.traffic-settings-overview-grid,
.traffic-settings-detail {
  padding: 0;
}

.reports-head span,
.payouts-command span,
.status-board-header span,
.traffic-settings-header span,
.settings-kicker {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.reports-head h1,
.payouts-command h1,
.status-board-header h1,
.traffic-settings-header h1,
.settings-simple-head h1 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.08;
  font-weight: 780;
  letter-spacing: 0;
}

.reports-head p,
.payouts-command p,
.status-board-header p,
.traffic-settings-header p,
.settings-simple-head p {
  max-width: 760px;
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.reports-card,
.payouts-panel,
.status-board-toolbar,
.status-board-table,
.status-board-unassigned,
.traffic-settings-panel,
.settings-editor,
.settings-preview {
  box-shadow: 0 1px 2px rgba(31, 33, 31, 0.04);
}

@media (max-width: 1180px) {
  .traffic-settings-overview-grid,
  .traffic-settings-form-grid,
  .traffic-param-create {
    grid-template-columns: minmax(0, 1fr);
  }
  .traffic-param-list article {
    grid-template-columns: minmax(0, 1fr);
  }
  .traffic-param-badges,
  .traffic-param-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .docs-page {
    gap: 12px;
  }
  .docs-head,
  .docs-panel-head {
    flex-direction: column;
    gap: 10px;
  }
  .docs-head {
    padding: 12px;
  }
  .docs-head h1 {
    font-size: 23px;
  }
  .docs-head p,
  .docs-panel p,
  .docs-panel-head p,
  .docs-message-list p {
    font-size: 13px;
  }
  .docs-head p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .docs-head-card,
  .docs-key-pill {
    width: 100%;
    min-width: 0;
    padding: 10px;
  }
  .docs-head-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .docs-head-card strong {
    min-width: 0;
    font-size: 15px;
  }
  .docs-head-card small {
    flex: 0 1 auto;
    max-width: 48%;
    margin-top: 0;
    font-size: 11px;
  }
  .docs-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .docs-nav a {
    min-height: 34px;
    padding: 0 8px;
    font-size: 12px;
  }
  .docs-panel {
    padding: 12px;
  }
  .docs-panel h2,
  .docs-panel-head h2 {
    font-size: 18px;
  }
  .docs-grid,
  .docs-wiki-layout,
  .docs-license-grid,
  .docs-license-facts,
  .docs-license-usage-grid,
  .docs-code-grid,
  .docs-request-panel .docs-code-grid,
  .docs-api-response-panel .docs-code-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .docs-code-grid pre {
    max-height: 220px;
    padding: 9px;
    font-size: 11px;
    line-height: 1.4;
  }
  .docs-example-tabs pre {
    max-height: 420px;
    padding: 14px 16px 16px;
    font-size: 12px;
    line-height: 1.55;
  }
  .docs-api-response-panel .docs-code-grid pre {
    max-height: 170px;
  }
  .docs-code-full {
    grid-column: auto;
  }
  .docs-api-response-panel .docs-code-full {
    grid-column: auto;
  }
  .docs-search-panel {
    grid-template-columns: 16px minmax(0, 1fr) 32px;
    gap: 8px;
    padding: 8px 10px;
  }
  .docs-toc-panel {
    position: static;
  }
  .docs-toc-panel nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .docs-topic-card h2,
  .docs-faq-panel h2 {
    font-size: 18px;
  }
  .docs-topic-card ol {
    padding-left: 20px;
    font-size: 13px;
  }
  .docs-fields-table {
    min-width: 660px;
  }
  .docs-error-list li {
    grid-template-columns: minmax(0, 1fr);
  }
  .messages-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .messages-toolbar button {
    width: 100%;
  }
  .messages-card summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .messages-card summary strong {
    white-space: normal;
  }
  .traffic-settings-shell,
  .traffic-settings-panel {
    padding: 0;
  }
  .traffic-settings-panel {
    padding: 14px;
  }
  .reports-head,
  .payouts-command,
  .status-board-header,
  .traffic-settings-header,
  .settings-simple-head {
    padding: 18px;
  }
  .traffic-settings-overview-grid,
  .traffic-settings-detail {
    padding: 0;
  }
  .traffic-settings-header,
  .traffic-settings-detail-head {
    flex-direction: column;
  }
  .traffic-settings-header .btn-secondary,
  .traffic-settings-detail-head .btn-primary,
  .traffic-settings-detail-head .btn-secondary,
  .traffic-param-create .btn-primary {
    width: 100%;
  }
  .traffic-settings-entry {
    min-height: 150px;
  }
  .traffic-param-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 1180px) {
  .lead-detail-layout,
  .integration-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .lead-detail-statuses,
  .integration-row-actions {
    justify-content: flex-start;
  }
  .lead-detail-hero,
  .lead-detail-card-head {
    flex-direction: column;
  }
  .lead-detail-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .lead-detail-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lead-edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .lead-edit-actions {
    justify-content: stretch;
  }
  .lead-edit-actions .btn-primary,
  .lead-edit-actions .btn-secondary {
    width: 100%;
    justify-content: center;
  }
  .lead-detail-field-wide {
    grid-column: auto;
  }
  .lead-edit-field-wide {
    grid-column: auto;
  }
}
@media (max-width: 900px) {
  .app-layout {
    grid-template-columns: 1fr;
  }
  .crm-rail {
    position: sticky;
    top: 0;
    flex-direction: row;
    width: 100%;
    height: 58px;
    padding: 8px 12px;
  }
  .crm-rail-logo,
  .crm-rail-button {
    width: 38px;
    height: 38px;
  }
  .crm-rail-divider,
  .crm-sidebar-org,
  .crm-sidebar-user {
    display: none;
  }
  .crm-rail-spacer {
    flex: 1 1 auto;
  }
  .crm-sidebar {
    position: sticky;
    top: 58px;
    height: auto;
    max-height: 44vh;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .crm-nav-search {
    margin: 12px;
  }
  .crm-sidebar-nav {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 12px 12px;
  }
  .crm-nav-section {
    min-width: 220px;
    margin-bottom: 0;
  }
  .main-content {
    padding: 16px 12px 88px;
  }
}
/* Final navigation shape: one original CRM sidebar, no iRev-like dark rail. */
.app-layout {
  grid-template-columns: 292px minmax(0, 1fr);
}

.crm-rail {
  display: none !important;
}

.crm-nav-collapsed .app-layout {
  grid-template-columns: 76px minmax(0, 1fr);
}

@media (max-width: 900px) {
  .app-layout,
  .crm-nav-collapsed .app-layout {
    grid-template-columns: 1fr;
  }
  .crm-sidebar,
  .crm-nav-collapsed .crm-sidebar {
    top: 0;
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }
  .crm-nav-collapsed .crm-sidebar-brand {
    grid-template-columns: 38px minmax(0, 1fr) 34px;
    justify-content: stretch;
    margin: 10px 12px;
  }
  .crm-nav-collapsed .crm-sidebar-brand-text,
  .crm-nav-collapsed .crm-nav-search,
  .crm-nav-collapsed .crm-nav-section-toggle,
  .crm-nav-collapsed .crm-nav-link span {
    display: flex;
  }
  .crm-nav-collapsed .crm-sidebar-collapse {
    position: static;
    transform: none;
  }
  .crm-nav-collapsed .crm-sidebar-nav {
    padding: 0 12px 12px;
  }
  .crm-nav-collapsed .crm-nav-link {
    justify-content: flex-start;
    min-height: 38px;
    padding: 9px 11px;
  }
}
/* App scrolling model: sidebar and workspace scroll independently. */
html,
body {
  height: 100%;
}

body:has(.app-layout) {
  overflow: hidden;
}

.app-layout,
.crm-nav-collapsed .app-layout {
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
}

.main-content {
  min-width: 0;
  min-height: 0;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.crm-sidebar,
.crm-nav-collapsed .crm-sidebar {
  position: relative;
  top: auto;
  min-height: 0;
  max-height: 100vh;
}

.crm-sidebar-nav,
.crm-nav-collapsed .crm-sidebar-nav {
  min-height: 0;
  overscroll-behavior: contain;
}

@media (max-width: 900px) {
  body:has(.app-layout) {
    overflow: auto;
  }
  .app-layout,
  .crm-nav-collapsed .app-layout {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
  .main-content {
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  .crm-sidebar,
  .crm-nav-collapsed .crm-sidebar {
    position: sticky;
    top: 0;
    max-height: 44vh;
  }
}
/* Modal normalization: every popup must cover the full viewport, not only the content column. */
.app-modal-layer,
.confirm-dialog-layer,
.route-tool-modal,
.crm-nav-collapsed .route-tool-modal,
.postback-modal,
.crm-nav-collapsed .postback-modal,
.logs-modal,
.users-modal-wrap,
.templates-modal-wrap,
.status-history-layer {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  min-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
}

.app-modal-layer,
.confirm-dialog-layer {
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 42px);
  background: var(--overlay);
  backdrop-filter: blur(6px);
}

.confirm-dialog-backdrop {
  position: absolute;
  inset: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: default;
}

.app-modal-card,
.confirm-dialog-card {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
}

.app-modal-card {
  padding: 18px;
}

.app-modal-card-sm {
  width: min(420px, 100%);
}

.app-modal-title,
.confirm-dialog-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 780;
  line-height: 1.2;
}

.app-modal-form {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.app-field-label {
  display: block;
  margin: 0 0 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 720;
}

.app-input {
  width: 100%;
}

.app-modal-actions,
.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.app-modal-actions {
  margin-top: 4px;
}

.app-modal-actions > button,
.confirm-dialog-actions > button {
  min-width: 112px;
}

.confirm-dialog-card {
  padding: 0;
  overflow: hidden;
}

.confirm-dialog-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 18px 18px 14px;
}

.confirm-dialog-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 999px;
}

.confirm-dialog-icon svg {
  width: 22px;
  height: 22px;
}

.confirm-dialog-body {
  padding: 0 18px 18px;
}

.confirm-dialog-body p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 14px;
  line-height: 1.45;
}

.confirm-dialog-actions {
  padding: 14px 18px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}

.confirm-dialog-confirm {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
}

.postback-modal-card,
.postback-wizard-card {
  width: min(1040px, 100vw - 44px) !important;
}

.postback-modal-card.status-board-modal {
  width: min(720px, 100vw - 32px) !important;
  max-width: 720px;
}

.postback-modal-card.status-board-assign-modal {
  width: min(680px, 100vw - 32px) !important;
  max-width: 680px;
}

.status-board-assign-modal .postback-modal-head {
  padding: 18px 20px 16px;
}

.status-board-assign-modal .postback-modal-head p {
  max-width: 520px;
  margin-top: 7px;
}

.status-board-assign-modal .status-board-modal-body {
  gap: 14px;
  padding: 16px 20px 8px;
}

.status-board-assign-modal .status-board-form-grid {
  grid-template-columns: 1fr;
}

.status-board-assign-modal .postback-modal-actions {
  grid-template-columns: repeat(2, minmax(128px, max-content));
  padding: 14px 20px 20px;
}

.status-board-assign-modal .status-board-selected-list {
  max-height: 132px;
  overflow: auto;
}

.route-tool-card,
.logs-modal-card,
.users-modal,
.templates-modal,
.status-board-dialog {
  max-width: calc(100vw - 44px);
}

@media (max-width: 640px) {
  .app-modal-layer,
  .confirm-dialog-layer {
    align-items: end;
    padding: 10px;
  }
  .app-modal-card,
  .confirm-dialog-card {
    width: 100%;
  }
  .app-modal-actions,
  .confirm-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
  .app-modal-actions > button,
  .confirm-dialog-actions > button {
    width: 100%;
  }
}
@media (max-width: 900px) {
  html,
  body,
  body:has(.app-layout) {
    max-width: 100%;
    overflow-x: hidden;
  }
  .app-layout,
  .crm-nav-collapsed .app-layout {
    display: block;
    min-width: 0;
    overflow-x: hidden;
  }
  .crm-sidebar,
  .crm-nav-collapsed .crm-sidebar {
    position: sticky;
    top: 0;
    z-index: 85;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 8px;
    max-height: none;
    overflow: hidden;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 10px 6px;
  }
  .crm-sidebar-brand,
  .crm-nav-collapsed .crm-sidebar-brand {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
    margin: 0;
  }
  .crm-sidebar-brand-text span,
  .crm-sidebar-brand-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .crm-sidebar-logo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
  }
  .crm-sidebar-brand-text span {
    font-size: 9px;
    line-height: 1.05;
  }
  .crm-sidebar-brand-text strong {
    font-size: 14px;
    line-height: 1.05;
  }
  .crm-sidebar-collapse {
    display: none;
  }
  .crm-sidebar-org,
  .crm-nav-search {
    display: none !important;
  }
  .crm-sidebar-footer,
  .crm-nav-collapsed .crm-sidebar-footer {
    display: flex !important;
    grid-template-columns: none;
    gap: 7px;
    justify-self: end;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    border-top: 0;
    scrollbar-width: none;
  }
  .crm-sidebar-footer::-webkit-scrollbar {
    display: none;
  }
  .crm-sidebar-footer-action,
  .crm-nav-collapsed .crm-sidebar-footer-action,
  .crm-sidebar-avatar,
  .crm-nav-collapsed .crm-sidebar-avatar {
    width: 34px;
    min-width: 34px;
    height: 34px;
  }
  .crm-sidebar-nav,
  .crm-nav-collapsed .crm-sidebar-nav {
    grid-column: 1/-1;
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: calc(100% + 20px);
    max-width: 100vw;
    min-width: 0;
    contain: layout paint;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    margin: 8px -10px 0;
    padding: 0 10px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .crm-sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .crm-nav-section {
    min-width: max-content;
    margin: 0;
  }
  .crm-nav-section-toggle {
    display: none !important;
  }
  .crm-nav-section-items,
  .crm-nav-collapsed .crm-nav-section-items {
    display: flex !important;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .crm-nav-link,
  .crm-nav-collapsed .crm-nav-link,
  .crm-nav-dashboard-link {
    width: auto;
    height: 34px;
    min-height: 34px;
    max-height: 34px;
    flex: 0 0 auto;
    align-self: flex-start;
    gap: 7px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-muted);
    padding: 7px 9px;
    font-size: 12px;
    font-weight: 760;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .crm-nav-dashboard-link {
    margin-bottom: 0;
  }
  .crm-nav-link i,
  .crm-nav-collapsed .crm-nav-link i {
    width: 14px;
    min-width: 14px;
    font-size: 13px;
  }
  .main-content,
  .crm-nav-collapsed .main-content {
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
    padding: 10px 10px 72px;
  }
}
/* Release polish: containment, mobile navigation, and compact data surfaces. */
* {
  min-width: 0;
}

.app-layout,
.main-content,
.card,
.table-wrapper,
.table-container,
.users-table-panel,
.reports-card,
.settings-panel,
.settings-preview,
.lead-params-hero,
.lead-params-create-card,
.lead-params-list-card {
  max-width: 100%;
}

.main-content > .page-container,
.main-content > .leads-page {
  width: 100%;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0;
}

body:has(.app-layout) .main-content > :is(.page-container, .leads-page, .lead-detail-page) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

body:has(.app-layout) .lead-detail-page > .page-container {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

.table-container .card,
.users-table-panel {
  overflow: hidden;
}

.table-container .overflow-x-auto,
.users-table-wrap,
.reports-preview .overflow-x-auto,
.overflow-x-auto {
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.users-table-panel,
.users-table-wrap {
  contain: layout paint;
}

.users-table-wrap {
  width: 100%;
  overscroll-behavior-x: contain;
}

.lead-list-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.users-table-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(128px, 1fr));
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.users-table-actions .btn-secondary,
.users-table-actions .btn-danger {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  justify-content: center;
  padding: 7px 9px;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
}

.users-table {
  min-width: 1080px;
}

.users-table th:last-child,
.users-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
  width: 340px;
  min-width: 340px;
  background: var(--surface);
  box-shadow: -1px 0 0 var(--border);
}

.users-table th:last-child {
  z-index: 3;
  background: var(--table-head);
}

.reports-column-row {
  min-width: 0;
}

.reports-column-row label {
  flex: 1 1 auto;
}

.reports-aggregation-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
}

.reports-aggregation-actions strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
}

.reports-aggregation-actions p {
  margin: 3px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.35;
}

.reports-aggregation-card {
  margin-top: 16px;
}

.reports-aggregation-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.reports-aggregation-table {
  min-width: 760px;
}

.reports-aggregation-table td:not(:first-child),
.reports-aggregation-table th:not(:first-child) {
  text-align: right;
}

.reports-money-positive {
  color: var(--success);
  font-weight: 800;
}

.reports-money-negative {
  color: var(--danger);
  font-weight: 800;
}

.settings-param-actions {
  min-width: 0;
}

@media (max-width: 900px) {
  html,
  body,
  body:has(.app-layout) {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .app-layout,
  .crm-nav-collapsed .app-layout {
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: hidden;
  }
  .crm-sidebar,
  .crm-nav-collapsed .crm-sidebar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    max-height: none;
    overflow: hidden;
  }
  .crm-sidebar-brand,
  .crm-nav-collapsed .crm-sidebar-brand {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    margin: 9px 10px 8px;
  }
  .crm-sidebar-nav,
  .crm-nav-collapsed .crm-sidebar-nav {
    display: flex;
    width: 100%;
    max-width: 100%;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 10px 9px;
    contain: layout paint;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .crm-sidebar-nav::-webkit-scrollbar {
    display: none;
  }
  .crm-nav-section,
  .crm-nav-collapsed .crm-nav-section,
  .crm-nav-section-items,
  .crm-nav-collapsed .crm-nav-section-items {
    display: contents !important;
  }
  .crm-nav-section-toggle {
    display: none !important;
  }
  .crm-nav-link,
  .crm-nav-collapsed .crm-nav-link,
  .crm-nav-dashboard-link {
    display: inline-flex;
    width: auto;
    min-width: max-content;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    border-radius: 10px !important;
    background: var(--surface-muted);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 780;
    line-height: 1;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .crm-nav-dashboard-link {
    margin: 0;
  }
  .crm-nav-link i,
  .crm-nav-collapsed .crm-nav-link i {
    width: 16px;
    min-width: 16px;
    font-size: 14px;
  }
  .main-content {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 14px 10px 72px;
  }
  .lead-list-head {
    display: grid;
    gap: 12px;
    align-items: stretch;
  }
  .lead-list-head h1 {
    font-size: 34px;
  }
  .lead-filter-panel {
    padding: 12px;
  }
  .lead-filter-toolbar,
  .lead-filter-head,
  .lead-filter-head-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .lead-filter-search-wrap {
    min-width: 0;
  }
  .lead-filter-actions,
  .lead-filter-head-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
  .lead-filter-actions > *,
  .lead-filter-head-actions > *,
  .lead-toolbar-button,
  .lead-filter-advanced,
  .lead-filter-reset {
    width: 100%;
  }
  .lead-date-presets {
    display: grid;
    gap: 8px;
  }
  .lead-date-presets .crm-select {
    width: 100%;
  }
  .lead-date-presets-scroll {
    max-width: 100%;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .reports-period-grid {
    display: grid;
    grid-template-columns: 1fr;
  }
  .reports-aggregation-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .leads-table {
    min-width: max(760px, 200vw);
  }
  .leads-table thead th,
  .leads-table tbody td {
    min-width: 116px;
    max-width: 164px;
    padding: 9px 10px !important;
  }
  .leads-table thead th.lead-column-header {
    padding-right: 10px !important;
  }
  .leads-table-selectable th:first-child,
  .leads-table-selectable td:first-child {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
  }
  .leads-table-selectable th:nth-child(2),
  .leads-table-selectable td:nth-child(2) {
    position: static;
    left: auto;
    z-index: auto;
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    background: inherit;
    box-shadow: none;
  }
  .leads-table-selectable thead th:nth-child(2) {
    background: var(--table-head);
  }
  .leads-table.leads-table-selectable th:nth-child(2),
  .leads-table.leads-table-selectable td:nth-child(2) {
    position: static !important;
    left: auto !important;
    z-index: auto !important;
    width: 146px;
    min-width: 146px;
    max-width: 146px;
    box-shadow: none;
  }
  .lead-column-drag-icon,
  .lead-column-resize-handle {
    display: none;
  }
  .lead-column-sort {
    gap: 5px;
  }
  .users-table-wrap {
    padding-bottom: 8px;
  }
  .users-table {
    min-width: 980px;
  }
  .users-table th:first-child,
  .users-table td:first-child {
    width: 240px;
    min-width: 240px;
  }
  .users-table td:first-child span {
    max-width: 220px;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
  }
  .users-table th:last-child,
  .users-table td:last-child {
    position: static;
    width: 176px;
    min-width: 176px;
    box-shadow: none;
  }
  .users-table-actions {
    justify-content: flex-start;
  }
}
@media (max-width: 640px) {
  .lead-list-head h1 {
    font-size: 32px;
  }
  .reports-columns-card .reports-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .reports-columns-head-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
  }
  .reports-columns-count {
    display: inline-flex;
    grid-column: 1/-1;
    justify-content: center;
    width: 100%;
  }
  .reports-columns-head-actions button {
    justify-content: center;
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
  }
  .reports-columns-list {
    grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
    max-height: min(560px, 66vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
  }
  .reports-column-row {
    align-items: stretch;
  }
  .reports-column-row > div {
    justify-content: flex-end;
  }
  .users-table {
    min-width: 980px;
  }
  .users-table th:last-child,
  .users-table td:last-child {
    width: 176px;
    min-width: 176px;
  }
  .users-permissions-modal .users-modal-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    justify-content: stretch;
  }
  .users-permissions-modal .users-modal-actions .btn-primary,
  .users-permissions-modal .users-modal-actions .btn-secondary {
    width: 100%;
  }
  .logs-filter-panel {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .logs-category-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    overflow: visible;
    padding-bottom: 0;
  }
  .logs-category-tabs button {
    width: 100%;
    min-width: 0;
    max-width: none;
    justify-content: space-between;
    padding: 0 12px;
  }
  .settings-param-create {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch;
  }
  .settings-param-create > * {
    width: 100%;
  }
  .settings-param-required {
    min-height: 40px;
  }
}
/* Keep user table actions stable after responsive table overrides. */
.users-table {
  min-width: 1088px;
}

.users-table th:last-child,
.users-table td:last-child {
  width: 140px;
  min-width: 140px;
  padding-left: 8px;
  padding-right: 8px;
}

.users-table-actions {
  display: flex !important;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center !important;
  gap: 5px !important;
  width: 100%;
  max-width: 150px;
  margin-inline: auto;
}

.users-action-icon {
  display: inline-flex;
  position: relative;
  width: 26px;
  height: 26px;
  min-width: 26px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-muted);
  color: var(--ink);
  font-size: 10px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 7%, transparent);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.users-action-icon:hover {
  border-color: var(--primary-border);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 8px 16px color-mix(in srgb, var(--shadow) 16%, transparent);
  transform: translateY(-1px);
}

.users-action-icon:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.users-action-icon span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.users-action-permissions {
  border-color: color-mix(in srgb, var(--info) 48%, var(--border));
  background: color-mix(in srgb, var(--info) 16%, var(--surface-muted));
  color: var(--info);
}

.users-action-permissions:hover {
  border-color: color-mix(in srgb, var(--info) 72%, var(--border));
  background: color-mix(in srgb, var(--info) 22%, var(--surface-muted));
  color: var(--info);
}

.users-action-key {
  border-color: color-mix(in srgb, #f59e0b 60%, var(--border));
  background: color-mix(in srgb, #f59e0b 20%, var(--surface-muted));
  color: #fbbf24;
}

.users-action-key i {
  transform: rotate(-12deg);
}

.users-action-key:hover {
  border-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 28%, var(--surface-muted));
  color: #fde68a;
}

.users-action-toggle-enable {
  border-color: color-mix(in srgb, var(--success) 30%, var(--border));
  background: color-mix(in srgb, var(--success-bg) 72%, var(--surface-muted));
  color: var(--success);
}

.users-action-toggle-enable:hover {
  border-color: color-mix(in srgb, var(--success) 58%, var(--border));
  background: color-mix(in srgb, var(--success-bg) 58%, var(--surface-muted));
  color: var(--success);
}

.users-action-toggle-disable {
  border-color: color-mix(in srgb, #f59e0b 34%, var(--border));
  background: color-mix(in srgb, #f59e0b 10%, var(--surface-muted));
  color: #b45309;
}

.users-action-toggle-disable:hover {
  border-color: color-mix(in srgb, #d97706 60%, var(--border));
  background: color-mix(in srgb, #f59e0b 16%, var(--surface-muted));
  color: #92400e;
}

.users-action-danger {
  border-color: color-mix(in srgb, var(--danger) 28%, var(--border));
  background: var(--danger-bg);
  color: var(--danger);
}

.users-action-danger:hover {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger-bg) 78%, var(--danger) 12%);
  color: var(--danger);
}

.users-key-action,
.users-permission-action {
  gap: 8px;
}

.users-key-preview-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  gap: 8px;
}

.users-key-preview-actions:empty {
  display: none;
}

.users-key-preview-actions .btn-secondary {
  min-height: 34px;
  padding-inline: 11px;
  border-radius: 8px;
  font-weight: 820;
  white-space: nowrap;
}

.users-key-preview-actions .btn-secondary i {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 6px;
}

.users-key-preview-actions .users-key-action {
  border-color: color-mix(in srgb, #d97706 38%, var(--border)) !important;
  background: linear-gradient(90deg, color-mix(in srgb, #f59e0b 16%, transparent), transparent 54%), color-mix(in srgb, #f59e0b 7%, var(--surface)) !important;
  color: #b45309 !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #f59e0b 7%, transparent) !important;
}

.users-key-preview-actions .users-key-action i {
  background: color-mix(in srgb, #f59e0b 22%, var(--surface));
}

.users-key-preview-actions .users-permission-action {
  border-color: color-mix(in srgb, var(--info) 70%, var(--border)) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--info) 20%, transparent), transparent 56%), color-mix(in srgb, var(--info) 15%, var(--surface)) !important;
  color: var(--info) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--info) 13%, transparent) !important;
}

.users-key-preview-actions .users-permission-action i {
  background: color-mix(in srgb, var(--info) 15%, var(--surface));
}

@media (max-width: 760px) {
  .users-table {
    min-width: 1088px;
  }
  .users-table th:last-child,
  .users-table td:last-child {
    width: 140px;
    min-width: 140px;
  }
  .users-key-preview-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-content: stretch;
  }
}
/* Mobile must scroll as one document. Desktop keeps independent panes, but
   phone viewports break if any late rule pins the layout to 100vh. */
@media (max-width: 900px) {
  html,
  body,
  body:has(.app-layout) {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .app-layout,
  .crm-nav-collapsed .app-layout {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
  }
  .main-content {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
  }
  .crm-sidebar,
  .crm-nav-collapsed .crm-sidebar {
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    max-height: none !important;
  }
}
@media (max-width: 900px) {
  .crm-sidebar,
  .crm-nav-collapsed .crm-sidebar {
    position: sticky !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: center;
    gap: 8px;
    padding: 8px 10px !important;
  }
  .crm-sidebar-brand,
  .crm-nav-collapsed .crm-sidebar-brand {
    grid-template-columns: 34px minmax(0, 1fr);
    margin: 0 !important;
  }
  .crm-sidebar-footer,
  .crm-nav-collapsed .crm-sidebar-footer {
    display: flex !important;
    justify-self: end;
    gap: 7px;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 0;
  }
  .crm-mobile-menu-toggle {
    display: grid !important;
  }
  .crm-sidebar-nav,
  .crm-nav-collapsed .crm-sidebar-nav {
    display: none !important;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-sidebar-nav,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-sidebar-nav {
    position: absolute !important;
    z-index: 160;
    top: calc(100% + 8px);
    left: 10px;
    right: 10px;
    display: grid !important;
    width: auto;
    max-width: none;
    max-height: min(70vh, 520px);
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface) 96%, var(--control-bg) 4%);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
    padding: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scroll-snap-type: none;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-sidebar-nav::-webkit-scrollbar {
    width: 6px;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-section,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-section {
    display: grid !important;
    min-width: 0;
    width: 100%;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-section + .crm-nav-section,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-section + .crm-nav-section {
    margin-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    padding-top: 6px;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-section-toggle,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-section-toggle {
    display: flex !important;
    min-height: 30px;
    margin: 0 0 4px;
    padding: 4px 6px;
    pointer-events: none;
    color: var(--ink-muted);
    font-size: 11px;
    text-transform: uppercase;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-section-toggle > i,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-section-toggle > i {
    display: none;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-section-items,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-section-items,
  .crm-sidebar.crm-mobile-nav-open .crm-nav-section-items-collapsed,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-section-items-collapsed {
    display: grid !important;
    width: 100%;
    gap: 6px;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-link,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-link,
  .crm-sidebar.crm-mobile-nav-open .crm-nav-dashboard-link,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-dashboard-link,
  .crm-sidebar.crm-mobile-nav-open .crm-nav-search-result,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-search-result {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    justify-content: flex-start;
    border-radius: 10px;
    padding: 9px 10px;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-link span,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-link span,
  .crm-sidebar.crm-mobile-nav-open .crm-nav-search-result span,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-search-result span {
    display: block !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .crm-sidebar.crm-mobile-nav-open .crm-nav-search-results,
  .crm-nav-collapsed .crm-sidebar.crm-mobile-nav-open .crm-nav-search-results {
    display: grid !important;
    gap: 6px;
    width: 100%;
  }
}
/* Desktop collapsed sidebar: keep icon-only groups centered inside the rail. */
@media (min-width: 901px) {
  .crm-nav-collapsed .crm-sidebar-nav {
    display: grid;
    justify-items: center;
    width: 100%;
    padding-inline: 10px;
  }
  .crm-nav-collapsed .crm-nav-section {
    display: grid;
    justify-items: center;
    width: 100%;
  }
  .crm-nav-collapsed .crm-nav-section:has(.crm-nav-section-items-collapsed) {
    display: none;
  }
  .crm-nav-collapsed .crm-nav-section-items {
    display: grid;
    justify-items: center;
    width: 58px;
    gap: 8px;
    margin-inline: auto;
    padding: 7px 0;
    overflow: visible;
  }
  .crm-nav-collapsed .crm-nav-link,
  .crm-nav-collapsed .crm-nav-dashboard-link {
    display: grid;
    width: 48px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    place-items: center;
    margin-inline: auto;
    padding: 0;
    gap: 0;
    border-radius: 8px !important;
  }
  .crm-nav-collapsed .crm-nav-link i,
  .crm-nav-collapsed .crm-nav-dashboard-link i {
    display: grid;
    width: 24px;
    min-width: 24px;
    height: 24px;
    place-items: center;
    margin: 0;
    font-size: 18px;
    line-height: 1;
  }
}
/* Keep workspace pages flush with the available content rail on desktop.
   This intentionally lives at the end so older page-level max-width rules cannot win. */
body:has(.app-layout) .app-layout,
.crm-nav-collapsed body:has(.app-layout) .app-layout {
  grid-template-columns: 292px minmax(0, 1fr) !important;
  inline-size: 100vw !important;
  width: 100% !important;
  max-width: none !important;
  justify-items: stretch !important;
}

.crm-nav-collapsed body:has(.app-layout) .app-layout {
  grid-template-columns: 76px minmax(0, 1fr) !important;
}

body:has(.app-layout) .main-content {
  display: block !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  padding-left: clamp(12px, 1.1vw, 18px) !important;
  padding-right: clamp(12px, 1.1vw, 18px) !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

body:has(.app-layout) .main-content > *,
body:has(.app-layout) .main-content > :is(.page-container, .leads-page, .lead-detail-page) {
  box-sizing: border-box;
  display: block !important;
  flex: 1 1 auto !important;
  inline-size: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
  justify-self: stretch !important;
  align-self: stretch !important;
}

body:has(.app-layout) .status-board-page > * + * {
  margin-top: 18px !important;
}

body:has(.app-layout) .main-content > :is(.page-container,
.docs-page,
.reports-page,
.status-board-page,
.payouts-page,
.boxes-page,
.groups-page,
.lead-params-page,
.traffic-settings-page) {
  display: grid !important;
  row-gap: 18px !important;
  align-content: start !important;
}

body:has(.app-layout) .main-content > :is(.page-container,
.docs-page,
.reports-page,
.status-board-page,
.payouts-page,
.boxes-page,
.groups-page,
.lead-params-page,
.traffic-settings-page) > * + * {
  margin-top: 0 !important;
}

body:has(.app-layout) .main-content > :is(.docs-page, .reports-page) > * + * {
  margin-top: 18px !important;
}

@media (max-width: 900px) {
  body:has(.app-layout) .app-layout,
  .crm-nav-collapsed body:has(.app-layout) .app-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    inline-size: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  body:has(.app-layout) .crm-sidebar,
  .crm-nav-collapsed body:has(.app-layout) .crm-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  body:has(.app-layout) .main-content {
    inline-size: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-results-collapsed {
  display: grid !important;
  width: 58px !important;
  min-width: 58px !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 8px !important;
  margin-inline: auto !important;
  overflow: visible !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-result {
  display: grid !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  grid-template-columns: 1fr !important;
  place-items: center !important;
  padding: 0 !important;
  gap: 0 !important;
  border-radius: 8px !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-result span {
  display: none !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-result i {
  width: 24px !important;
  min-width: 24px !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-compact-clear,
.crm-nav-collapsed body:has(.app-layout) .crm-nav-empty-collapsed {
  display: grid !important;
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  max-height: 48px !important;
  place-items: center !important;
  margin: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  background: var(--surface) !important;
  color: var(--ink-muted) !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-compact-clear {
  position: relative !important;
  background: var(--surface-muted) !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-compact-clear i:first-child,
.crm-nav-collapsed body:has(.app-layout) .crm-nav-empty-collapsed i {
  font-size: 17px !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-compact-clear i:last-child {
  position: absolute !important;
  right: 8px !important;
  top: 7px !important;
  font-size: 11px !important;
  color: var(--primary) !important;
}

.crm-nav-collapsed body:has(.app-layout) .crm-nav-search-compact-clear:hover,
.crm-nav-collapsed body:has(.app-layout) .crm-nav-empty-collapsed:hover {
  border-color: color-mix(in srgb, var(--primary) 58%, var(--border)) !important;
  background: var(--primary-soft) !important;
  color: var(--ink) !important;
}

/* Final docs spacing guard: docs pages are stacked cards, not joined panels. */
body:has(.app-layout) .main-content > .docs-page {
  display: flex !important;
  flex-direction: column !important;
  gap: 18px !important;
  row-gap: 18px !important;
}

body:has(.app-layout) .main-content > .docs-page > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Box route tree editor polish. Keep details rows looking like CRM controls, not native summary text. */
body:has(.app-layout) .route-builder .route-rule-card {
  overflow: visible !important;
}

body:has(.app-layout) .route-builder :is(.route-folder-settings, .route-brand-settings) {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

body:has(.app-layout) .route-builder :is(.route-folder-settings, .route-brand-settings) > summary {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  list-style: none !important;
  cursor: pointer !important;
}

body:has(.app-layout) .route-builder :is(.route-folder-settings, .route-brand-settings) > summary::marker {
  content: "" !important;
  font-size: 0 !important;
}

body:has(.app-layout) .route-builder :is(.route-folder-settings, .route-brand-settings) > summary::-webkit-details-marker {
  display: none !important;
}

body:has(.app-layout) .route-builder :is(.route-folder-settings, .route-brand-settings) > summary > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}

body:has(.app-layout) .route-builder :is(.route-folder-settings, .route-brand-settings) > summary > small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body:has(.app-layout) .route-builder .route-folder-settings > summary {
  margin: 12px 16px !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--panel)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent) !important;
  padding: 10px 12px !important;
}

body:has(.app-layout) .route-builder .route-brand-row {
  grid-template-columns: 36px minmax(240px, 1fr) minmax(86px, 120px) minmax(112px, 150px) 36px !important;
  align-items: end !important;
}

body:has(.app-layout) .route-builder .route-brand-row > :is(.route-brand-tags, .route-brand-settings) {
  grid-column: 1/-1 !important;
}

body:has(.app-layout) .route-builder .route-brand-settings > summary {
  min-height: 40px !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--panel)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--panel) 90%, var(--text) 3%) !important;
  padding: 8px 10px !important;
}

body:has(.app-layout) .route-builder .route-brand-conditions {
  width: 100% !important;
  min-width: 0 !important;
}

body:has(.app-layout) .box-card-actions .box-action-tree {
  gap: 8px !important;
  border-color: var(--border) !important;
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
}

body:has(.app-layout) .box-card-actions .box-action-tree i {
  flex: 0 0 auto !important;
  color: var(--primary) !important;
}

body:has(.app-layout) .route-builder .route-settings-toggle {
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

body:has(.app-layout) .route-builder .route-folder-settings > .route-settings-toggle {
  width: calc(100% - 32px) !important;
  margin: 12px 16px !important;
}

body:has(.app-layout) .route-builder .route-settings-toggle > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

body:has(.app-layout) .route-builder .route-settings-toggle > small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Browser-safe final overrides. These intentionally avoid :has(), because this file is served as
   compiled public CSS and these fixes must apply even in older WebKit/Chromium edge cases. */
.main-content > .docs-page {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.main-content > .docs-page > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.main-content > .docs-page > * + * {
  margin-top: 18px !important;
}

.main-content > .docs-page > .docs-head + * {
  margin-top: 18px !important;
}

.route-builder .route-rule-card {
  overflow: visible !important;
}

.route-builder .route-rule-card::before {
  content: none !important;
  display: none !important;
}

.route-builder .route-folder-settings,
.route-builder .route-brand-settings {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
}

.route-builder .route-settings-toggle {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: max-content minmax(0, 1fr) 18px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--panel)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent) !important;
  color: var(--text) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  white-space: normal !important;
  cursor: pointer !important;
}

.route-builder .route-folder-settings > .route-settings-toggle {
  width: calc(100% - 32px) !important;
  margin: 12px 16px !important;
}

.route-builder .route-settings-toggle > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  color: var(--text) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.route-builder .route-settings-toggle > small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-builder .route-settings-toggle > i:last-child {
  justify-self: end !important;
  color: var(--muted) !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.route-builder .route-brand-row {
  grid-template-columns: 36px minmax(240px, 1fr) minmax(86px, 120px) minmax(112px, 150px) 36px !important;
  align-items: end !important;
}

.route-builder .route-brand-row > .route-brand-tags,
.route-builder .route-brand-row > .route-brand-settings {
  grid-column: 1/-1 !important;
}

.route-builder .route-brand-settings > .route-settings-toggle {
  min-height: 40px !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--panel) 90%, var(--text) 3%) !important;
  padding: 8px 10px !important;
}

.route-builder .route-brand-conditions {
  width: 100% !important;
  min-width: 0 !important;
}

.box-card-actions .box-action-tree {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  min-width: 0 !important;
  padding: 7px 12px !important;
  border-color: var(--border) !important;
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.box-card-actions .box-action-tree i {
  flex: 0 0 auto !important;
  width: 16px !important;
  min-width: 16px !important;
  margin: 0 !important;
  color: var(--primary) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

@media (max-width: 900px) {
  .route-builder .route-brand-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .route-builder .route-brand-row > * {
    grid-column: 1/-1 !important;
  }
}
/* Compact iRev-like box tree preview. */
.box-rotation-panel {
  overflow: hidden !important;
  padding: 12px 18px 16px !important;
}

.box-rotation-head {
  align-items: center !important;
  margin-bottom: 12px !important;
}

.box-rotation-head > div:first-child {
  min-width: 0;
}

.box-rotation-head span {
  display: block;
  overflow: hidden;
  max-width: 980px;
  color: var(--ink-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-rotation-tools {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}

.box-rotation-toggle,
.box-rotation-cap,
.box-rotation-icon-btn,
.box-rotation-index,
.box-rotation-condition-line span {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-muted) 82%, var(--surface));
}

.box-rotation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  color: var(--ink-muted);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.box-rotation-toggle span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--ink-muted);
}

.box-rotation-toggle-on {
  border-color: color-mix(in srgb, #43b883 42%, var(--border));
  background: color-mix(in srgb, #43b883 13%, var(--surface));
  color: color-mix(in srgb, #43b883 78%, var(--ink));
}

.box-rotation-toggle-on span {
  background: #43b883;
}

.box-rotation-cap {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: var(--ink-muted);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 820;
  white-space: nowrap;
}

.box-rotation-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--ink-muted);
  padding: 0;
}

.box-rotation-icon-btn:hover {
  border-color: color-mix(in srgb, var(--primary) 42%, var(--border));
  color: var(--primary);
}

.box-rotation-tree {
  display: grid;
  gap: 8px;
}

.box-rotation-folder {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, var(--surface));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-muted) 55%, var(--surface));
  padding: 8px;
}

.box-rotation-folder-row {
  display: grid;
  grid-template-columns: 32px minmax(170px, 0.42fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
}

.box-rotation-folder-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--primary) 36%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 13%, var(--surface));
  color: var(--primary);
}

.box-rotation-node-title {
  min-width: 0;
}

.box-rotation-node-title span {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.box-rotation-node-title strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-rotation-condition-line {
  display: flex;
  min-width: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.box-rotation-condition-line span {
  overflow: hidden;
  min-width: 0;
  max-width: 270px;
  color: var(--ink-muted);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-rotation-folder-meta {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.box-rotation-folder-meta > span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 780;
  white-space: nowrap;
}

.box-rotation-brand-list {
  display: grid;
  gap: 5px;
  padding-left: 40px;
}

.box-rotation-brand-row {
  display: grid;
  grid-template-columns: minmax(250px, 0.9fr) minmax(220px, 0.85fr) minmax(210px, 0.7fr) 30px;
  align-items: center;
  gap: 8px;
  border: 1px dashed color-mix(in srgb, var(--border) 86%, var(--surface));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-muted));
  min-height: 44px;
  padding: 6px 8px;
}

.box-rotation-brand-main {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}

.box-rotation-brand-main strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-rotation-brand-main code {
  max-width: 120px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 76%, var(--ink) 5%);
  color: var(--ink);
  padding: 3px 7px;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-rotation-brand-main .box-pill {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 10px;
}

.box-rotation-index {
  flex: 0 0 auto;
  color: var(--ink-muted);
  padding: 3px 7px;
  font-size: 11px;
  font-weight: 820;
  line-height: 1.2;
}

.box-rotation-brand-conditions span {
  max-width: 180px;
}

.box-rotation-metrics {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(72px, 0.7fr) minmax(110px, 1fr);
  gap: 6px;
}

.box-rotation-metrics span {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--ink-muted);
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box-rotation-metrics .box-rotation-cap-text {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  padding-inline: 0;
}

.route-condition-and {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0;
  color: var(--primary);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.route-condition-and::before,
.route-condition-and::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: color-mix(in srgb, var(--primary) 28%, var(--border));
}

.route-condition-and span {
  border: 1px solid color-mix(in srgb, var(--primary) 38%, var(--border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface));
  color: var(--primary);
  padding: 3px 10px;
}

/* Fleexy distribution tree source of truth. Keep this block last for boxes, route modals and page rhythm. */
.login-error-panel {
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--danger) 58%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-muted));
  color: var(--ink);
  padding: 12px 14px;
}

.login-error-panel strong {
  color: color-mix(in srgb, var(--danger) 82%, #fff);
  font-size: 14px;
  font-weight: 860;
}

.login-error-panel span {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.35;
}

.main-content > .docs-page,
.main-content > .reports-page,
.main-content > .boxes-page,
.main-content > .groups-page,
.main-content > .status-board-page,
.main-content > .payouts-page,
.main-content > .lead-params-page,
.main-content > .traffic-settings-page {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  align-content: start !important;
  gap: 18px !important;
}

.main-content > .docs-page > *,
.main-content > .reports-page > *,
.main-content > .boxes-page > *,
.main-content > .groups-page > *,
.main-content > .status-board-page > *,
.main-content > .payouts-page > *,
.main-content > .lead-params-page > *,
.main-content > .traffic-settings-page > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.main-content > .reports-page {
  gap: 18px !important;
}

.integration-editor-actions,
.integration-macro-actions,
.macro-editor-actions {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

.boxes-page,
.boxes-page *,
.route-builder-compact,
.route-builder-compact *,
.route-rule-modal,
.route-rule-modal * {
  box-sizing: border-box;
}

.boxes-page,
.route-builder-compact,
.route-builder-modal-card,
.route-rule-modal-card,
.route-rule-modal-body {
  min-width: 0;
}

.boxes-page-editing .distribution-command {
  display: none !important;
}

.box-card-actions .box-action-tree {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  border-color: var(--border) !important;
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
  white-space: nowrap !important;
}

.box-card-actions .box-action-tree i {
  color: var(--primary) !important;
}

.box-card-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 10px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.route-builder-modal.route-builder-inline,
.route-builder-modal {
  position: static !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.route-builder-modal-backdrop {
  display: none !important;
}

.route-builder-compact.route-builder-modal-card,
.route-builder-modal-card {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--panel) 96%, var(--surface-muted)) !important;
  box-shadow: none !important;
}

.route-builder-compact .route-builder-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 18px !important;
  align-items: start !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--border) !important;
}

.route-builder-compact .route-builder-head h2 {
  margin: 4px 0 6px !important;
  font-size: clamp(24px, 2.1vw, 36px) !important;
  line-height: 1.05 !important;
}

.route-builder-compact .route-builder-head p {
  max-width: 940px !important;
  color: var(--ink-muted) !important;
  line-height: 1.35 !important;
}

.route-builder-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 260px !important;
}

.route-builder-compact .rule-step {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) !important;
  gap: 18px !important;
  padding: 18px 20px !important;
}

.route-builder-compact .rule-step + .rule-step {
  border-top: 1px solid var(--border) !important;
}

.route-builder-compact .rule-step-index {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: var(--primary) !important;
  color: white !important;
  font-weight: 880 !important;
}

.route-builder-compact .rule-step-title,
.route-builder-compact .rule-step-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 14px !important;
  align-items: start !important;
  margin: 0 0 14px !important;
}

.route-builder-compact .rule-step-title h3 {
  margin: 0 0 4px !important;
  font-size: 21px !important;
  line-height: 1.15 !important;
}

.route-builder-compact .rule-step-title p {
  margin: 0 !important;
  color: var(--ink-muted) !important;
  line-height: 1.35 !important;
}

.route-add-menu {
  position: relative !important;
  justify-self: end !important;
}

.route-add-menu-trigger,
.route-brand-add,
.route-rules-empty .btn-secondary {
  min-height: 38px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
}

.route-add-menu-list,
.route-add-menu-panel {
  position: absolute !important;
  z-index: 30 !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  display: grid !important;
  width: 240px !important;
  gap: 6px !important;
  padding: 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--panel) !important;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28) !important;
}

.route-add-menu-list button,
.route-add-menu-panel button {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: var(--ink) !important;
  text-align: left !important;
}

.route-add-menu-list button:hover:not(:disabled),
.route-add-menu-panel button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted)) !important;
}

.route-builder-compact .rule-grid-base,
.route-builder-compact .rule-grid-limits {
  display: grid !important;
  grid-template-columns: minmax(260px, 1.6fr) minmax(220px, 0.9fr) minmax(160px, 0.7fr) minmax(220px, 0.9fr) !important;
  gap: 12px !important;
  align-items: end !important;
}

.route-card-list,
.route-brand-list {
  display: grid !important;
  gap: 12px !important;
}

.route-rule-card {
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--panel) 94%, var(--surface-muted)) !important;
}

.route-rule-card::before,
.route-brand-row::before,
.box-rotation-folder::before,
.box-rotation-brand-row::before {
  content: none !important;
  display: none !important;
}

.route-rule-head {
  display: grid !important;
  grid-template-columns: 40px 34px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 62%) !important;
}

.route-rule-card-collapsed .route-rule-head {
  border-bottom: 0 !important;
}

.route-rule-card-plain .route-rule-head {
  background: color-mix(in srgb, var(--surface-muted) 70%, transparent) !important;
}

.route-rule-card-plain .route-rule-section {
  padding-top: 12px !important;
}

.route-rule-card-plain .route-brand-row {
  border-style: solid !important;
}

.route-rule-head > div:nth-child(3) {
  min-width: 0 !important;
}

.route-rule-collapse {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface-muted) 86%, transparent) !important;
  color: var(--ink-muted) !important;
  padding: 0 !important;
}

.route-rule-collapse:hover {
  border-color: color-mix(in srgb, var(--primary) 48%, var(--border)) !important;
  color: var(--ink) !important;
}

.route-rule-head strong {
  display: block !important;
  overflow: hidden !important;
  color: var(--ink) !important;
  font-size: 18px !important;
  font-weight: 880 !important;
  line-height: 1.18 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-rule-head small {
  display: block !important;
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
}

.route-rule-head-actions,
.route-builder-footer-actions,
.box-rotation-tools,
.box-rotation-folder-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.route-drag-handle,
.route-icon-action,
.route-rule-remove,
.box-rotation-icon-btn,
.box-rotation-collapse-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--surface-muted) !important;
  color: var(--ink-muted) !important;
  padding: 0 !important;
}

.route-rule-remove,
.route-brand-remove {
  border-color: color-mix(in srgb, var(--danger) 50%, var(--border)) !important;
  background: color-mix(in srgb, var(--danger) 12%, var(--surface-muted)) !important;
  color: var(--danger) !important;
}

.route-folder-settings {
  padding: 14px 16px !important;
  border-bottom: 1px solid var(--border) !important;
}

.route-settings-toggle {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 24px !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 42px !important;
  gap: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 84%, var(--panel)) !important;
  color: var(--ink) !important;
  padding: 8px 12px !important;
  text-align: left !important;
}

.route-settings-toggle > span,
.route-settings-toggle > small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-settings-toggle > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 14px !important;
  font-weight: 840 !important;
}

.route-settings-toggle > small {
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
}

.route-rule-section {
  padding: 16px !important;
}

.route-rule-section + .route-rule-section {
  border-top: 1px solid var(--border) !important;
}

.route-rule-section-title {
  display: grid !important;
  gap: 4px !important;
  margin-bottom: 12px !important;
}

.route-rule-section-title span {
  color: var(--ink) !important;
  font-size: 15px !important;
  font-weight: 860 !important;
}

.route-rule-section-title p {
  margin: 0 !important;
  color: var(--ink-muted) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.route-brand-row {
  --route-control-height: 40px;
  display: grid !important;
  grid-template-columns: 38px minmax(240px, 1fr) 82px 92px minmax(96px, 180px) 58px 38px 38px !important;
  gap: 10px !important;
  align-items: end !important;
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 72%, transparent) !important;
  padding: 12px !important;
  overflow: visible !important;
}

body:has(.app-layout) .route-builder-compact .route-brand-row,
body:has(.app-layout) .route-builder .route-brand-row {
  grid-template-columns: 38px minmax(240px, 1fr) 82px 92px minmax(96px, 180px) 58px 38px 38px !important;
}

.route-brand-row > .route-brand-drag-handle {
  grid-column: 1 !important;
}

.route-brand-row > label.rule-field:first-of-type {
  grid-column: 2 !important;
}

.route-brand-row > .route-priority-pill {
  grid-column: 3 !important;
}

.route-brand-row > label.rule-field:nth-of-type(2) {
  grid-column: 4 !important;
}

.route-brand-row > .route-brand-summary {
  grid-column: 5 !important;
  grid-row: 1 !important;
}

.route-brand-row > .route-brand-active-toggle {
  grid-column: 6 !important;
  grid-row: 1 !important;
}

.route-brand-row > .route-brand-edit-action {
  grid-column: 7 !important;
  grid-row: 1 !important;
}

.route-brand-row > .route-brand-remove {
  grid-column: 8 !important;
  grid-row: 1 !important;
}

.route-brand-row .rule-field,
.route-brand-row .route-priority-pill,
.route-brand-modal-main-grid .rule-field,
.route-brand-modal-main-grid .route-priority-pill {
  display: grid !important;
  align-content: end !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.route-brand-row .rule-field > span,
.route-brand-row .route-priority-pill > span,
.route-brand-modal-main-grid .rule-field > span,
.route-brand-modal-main-grid .route-priority-pill > span,
.route-brand-modal-limits-grid .rule-field > span,
.route-rule-modal-body .rule-field > span {
  height: 14px !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 14px !important;
  text-transform: uppercase !important;
}

.route-rule-modal-body .custom-select-trigger,
.route-rule-modal-body .crm-select,
.route-rule-modal-body .country-select-control,
.route-rule-modal-body .country-select-control .country-select-summary,
.route-rule-modal-body input,
.route-rule-modal-body .route-priority-pill > strong,
.route-rule-modal-body .route-inline-toggle,
.route-rule-modal-body .route-mini-switch,
.route-rule-modal-body .route-parameter-case {
  height: var(--route-control-height, 40px) !important;
  min-height: var(--route-control-height, 40px) !important;
}

.route-rule-modal-body .custom-select-trigger,
.route-rule-modal-body .crm-select,
.route-rule-modal-body .country-select-control {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.route-rule-modal-body .country-select-control {
  justify-content: space-between !important;
}

.route-rule-modal-body .country-select-control .country-select-summary,
.route-rule-modal-body .crm-select-value,
.route-rule-modal-body .crm-select-placeholder {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.route-brand-row .custom-select-trigger,
.route-brand-row input,
.route-brand-row .route-priority-pill > strong,
.route-brand-row .route-brand-active-toggle,
.route-brand-row .route-brand-edit-action,
.route-brand-row .route-brand-remove,
.route-brand-row .route-brand-drag-handle {
  height: var(--route-control-height) !important;
  min-height: var(--route-control-height) !important;
  max-height: var(--route-control-height) !important;
}

.route-priority-pill {
  align-self: stretch !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.route-priority-pill > strong {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: var(--route-control-height, 40px) !important;
  min-height: var(--route-control-height, 40px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--panel) 90%, var(--primary) 4%) !important;
  color: var(--ink) !important;
  padding: 0 11px !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.route-inline-toggle,
.box-rotation-toggle {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  min-width: 64px !important;
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 11px !important;
  background: var(--surface-muted) !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.route-inline-toggle > span,
.box-rotation-toggle > span {
  position: relative !important;
  display: block !important;
  width: 38px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--ink-muted) 30%, var(--surface)) !important;
  margin: 0 !important;
  transition: background 0.16s ease !important;
}

.route-inline-toggle > span::after,
.box-rotation-toggle > span::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: var(--ink-muted) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.16s ease, background 0.16s ease !important;
}

.route-inline-toggle-on > span,
.box-rotation-toggle-on > span {
  background: color-mix(in srgb, var(--success) 38%, var(--surface-muted)) !important;
}

.route-inline-toggle-on > span::after,
.box-rotation-toggle-on > span::after {
  transform: translateX(18px) !important;
  background: var(--success) !important;
}

.route-brand-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  align-self: end !important;
  align-items: center !important;
  height: var(--route-control-height) !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.route-brand-summary span,
.box-rotation-condition-line span,
.box-rotation-cap,
.box-pill {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 260px !important;
  min-height: 22px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-muted) 74%, var(--surface)) !important;
  color: var(--ink-muted) !important;
  padding: 2px 8px !important;
  font-size: 11px !important;
  font-weight: 780 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-brand-empty,
.route-rules-empty {
  border: 1px dashed var(--border) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 60%, transparent) !important;
  padding: 14px !important;
}

.route-builder-footer {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  gap: 14px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  border-top: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--panel) 96%, var(--surface-muted)) !important;
  padding: 16px 20px !important;
  transform: none !important;
}

.route-builder-footer-active {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: var(--ink) !important;
  font-weight: 820 !important;
}

.route-builder-footer-actions .btn-primary,
.route-builder-footer-actions .btn-secondary {
  min-width: 160px !important;
  min-height: 42px !important;
}

.route-rule-modal {
  position: fixed !important;
  z-index: 120 !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  background: rgba(0, 0, 0, 0.52) !important;
}

.route-rule-modal-backdrop {
  position: fixed !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

.route-rule-modal-card,
.route-brand-modal-card {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(1060px, 100vw - 44px) !important;
  max-width: 1060px !important;
  max-height: calc(100dvh - 44px) !important;
  border: 1px solid var(--border) !important;
  border-radius: 20px !important;
  background: color-mix(in srgb, var(--panel) 98%, var(--surface-muted)) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42) !important;
  overflow: hidden !important;
}

.route-brand-modal-card {
  width: min(1040px, 100vw - 44px) !important;
}

.route-rule-modal-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 16px !important;
  align-items: start !important;
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent), transparent 72%) !important;
  padding: 22px 24px !important;
}

.route-rule-modal-head h3 {
  margin: 4px 0 6px !important;
  overflow: hidden !important;
  font-size: clamp(26px, 2vw, 40px) !important;
  line-height: 1.05 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-rule-modal-head p {
  max-width: 900px !important;
  margin: 0 !important;
  color: var(--ink-muted) !important;
  line-height: 1.35 !important;
}

.route-tool-close {
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: var(--surface-muted) !important;
  color: var(--ink-muted) !important;
}

.route-rule-modal-body {
  display: grid !important;
  align-content: start !important;
  gap: 14px !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 18px !important;
}

.route-rule-modal-body .route-rule-section {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface-muted) 52%, transparent) !important;
  padding: 16px !important;
}

.route-rule-modal-body .route-rule-section + .route-rule-section {
  border-top: 1px solid var(--border) !important;
}

.route-rule-modal-body .route-rule-compact-details {
  padding: 0 !important;
  overflow: hidden !important;
}

.route-rule-modal-body .route-rule-compact-details > summary {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 12px 14px !important;
  cursor: pointer !important;
  list-style: none !important;
}

.route-rule-modal-body .route-rule-compact-details > summary::-webkit-details-marker {
  display: none !important;
}

.route-rule-modal-body .route-rule-compact-details > summary::after {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid var(--ink-muted) !important;
  border-bottom: 2px solid var(--ink-muted) !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform 0.16s ease, border-color 0.16s ease !important;
}

.route-rule-modal-body .route-rule-compact-details[open] > summary {
  border-bottom: 1px solid var(--border) !important;
}

.route-rule-modal-body .route-rule-compact-details[open] > summary::after {
  border-color: var(--ink) !important;
  transform: rotate(-135deg) translate(-1px, -1px) !important;
}

.route-rule-modal-body .route-rule-compact-details > summary span,
.route-rule-modal-body .route-rule-compact-details > summary p {
  min-width: 0 !important;
}

.route-rule-modal-body .route-rule-compact-details > summary span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-rule-modal-body .route-rule-compact-details > summary p {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-rule-modal-body .route-rule-compact-details > .rule-grid,
.route-rule-modal-body .route-rule-compact-details > .funnel-rule-editor {
  padding: 14px !important;
}

.route-rule-modal-body .rule-grid,
.route-brand-modal-main-grid,
.route-brand-modal-limits-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}

.route-brand-modal-main-grid {
  grid-template-columns: minmax(280px, 1fr) 92px 110px 74px !important;
}

.route-brand-modal-limits-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.route-brand-delivery-toggle {
  min-width: 0 !important;
}

.route-brand-modal-code {
  display: none !important;
}

.route-condition-stack,
.route-parameter-list,
.route-parameter-editor {
  display: grid !important;
  gap: 10px !important;
}

.route-condition-group-body {
  display: grid !important;
  gap: 10px !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--panel) 82%, transparent) !important;
  padding: 12px !important;
}

.route-condition-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

.route-condition-head strong,
.route-condition-head span {
  display: block !important;
  min-width: 0 !important;
}

.route-condition-head span {
  color: var(--ink-muted) !important;
  font-size: 12px !important;
}

.route-rule-modal-body .route-condition-remove,
.route-rule-modal-body .btn-ghost.small.route-condition-remove {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  border: 1px solid color-mix(in srgb, var(--danger) 36%, var(--border)) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--danger) 8%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--danger) 78%, var(--ink)) !important;
  font-size: 12px !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.route-rule-modal-body .route-condition-remove:disabled,
.route-rule-modal-body .btn-ghost.small.route-condition-remove:disabled {
  opacity: 0.5 !important;
}

.route-condition-or,
.route-condition-and {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 2px 0 !important;
}

.route-condition-or::before,
.route-condition-or::after,
.route-condition-and::before,
.route-condition-and::after {
  content: "" !important;
  height: 1px !important;
  background: color-mix(in srgb, var(--primary) 38%, var(--border)) !important;
}

.route-condition-or span,
.route-condition-and span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  min-height: 24px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 56%, var(--border)) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted)) !important;
  color: var(--primary) !important;
  font-size: 12px !important;
  font-weight: 860 !important;
}

.route-parameter-row {
  display: grid !important;
  grid-template-columns: minmax(110px, 0.72fr) minmax(180px, 1.15fr) minmax(150px, 0.95fr) minmax(190px, 1.15fr) minmax(96px, auto) 38px !important;
  gap: 10px !important;
  align-items: end !important;
}

.route-mini-switch,
.route-parameter-case {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: var(--surface-muted) !important;
  color: var(--ink) !important;
  padding: 0 10px !important;
  white-space: nowrap !important;
}

.route-parameter-remove {
  align-self: end !important;
}

.box-rotation-panel {
  display: grid !important;
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--panel) 96%, var(--surface-muted)) !important;
}

.box-rotation-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 14px 16px !important;
}

.box-rotation-tree {
  display: grid !important;
  gap: 10px !important;
  padding: 14px !important;
}

.box-rotation-folder {
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 58%, transparent) !important;
}

.box-rotation-folder-row {
  display: grid !important;
  grid-template-columns: 34px 34px minmax(170px, 0.42fr) minmax(180px, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 12px !important;
}

.box-rotation-folder-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted)) !important;
  color: var(--primary) !important;
}

.box-rotation-node-title,
.box-rotation-condition-line,
.box-rotation-metrics {
  min-width: 0 !important;
}

.box-rotation-node-title strong {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.box-rotation-condition-line {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.box-rotation-brand-list {
  display: grid !important;
  gap: 8px !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 12px 12px 58px !important;
}

.box-rotation-brand-row {
  display: grid !important;
  grid-template-columns: minmax(160px, 0.5fr) minmax(160px, 1fr) minmax(120px, auto) 38px !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 42px !important;
  border: 1px dashed color-mix(in srgb, var(--border) 78%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--panel) 68%, transparent) !important;
  padding: 8px 10px !important;
}

.box-rotation-brand-main {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 8px !important;
}

.box-rotation-brand-main strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.box-rotation-metrics {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  font-weight: 780 !important;
}

@media (max-width: 1500px) {
  body:has(.app-layout) .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder .route-brand-row,
  .route-brand-row {
    grid-template-columns: 38px minmax(200px, 1fr) 78px 84px minmax(82px, 130px) 54px 36px 36px !important;
  }
  .route-brand-modal-limits-grid,
  .route-parameter-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .route-parameter-remove {
    width: 100% !important;
  }
}
@media (max-width: 1100px) {
  .route-builder-compact .route-builder-head,
  .route-builder-compact .rule-step-title,
  .route-builder-compact .rule-step-title-row,
  .route-builder-footer,
  .box-rotation-head,
  .box-rotation-folder-row,
  .box-rotation-brand-row,
  .route-builder-compact .rule-grid-base,
  .route-builder-compact .rule-grid-limits,
  .route-brand-row,
  .route-rule-modal-body .rule-grid,
  .route-brand-modal-main-grid,
  .route-brand-modal-limits-grid,
  .route-parameter-row,
  .route-condition-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .route-builder-meta,
  .route-rule-head-actions,
  .route-builder-footer-actions,
  .box-rotation-tools,
  .box-rotation-folder-meta {
    justify-content: flex-start !important;
  }
  .route-brand-summary,
  .box-rotation-folder-row > *,
  .box-rotation-brand-row > * {
    grid-column: 1/-1 !important;
  }
  .route-condition-head .route-condition-remove,
  .route-rule-modal-body .route-condition-remove,
  .route-rule-modal-body .btn-ghost.small.route-condition-remove,
  .route-parameter-remove {
    justify-self: start !important;
    width: auto !important;
    min-width: 38px !important;
  }
  .route-builder-compact .rule-step {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .route-builder-compact .rule-step-index {
    width: 32px !important;
    height: 32px !important;
  }
  .route-rule-modal {
    padding: 12px !important;
  }
  .route-rule-modal-card,
  .route-brand-modal-card {
    width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }
}
/* Distribution tree final polish: the tree itself is a compact route list;
   all heavy editing lives in modals. */
.route-builder-compact .route-rule-head {
  grid-template-columns: 38px 34px 38px minmax(170px, 0.65fr) minmax(240px, 1.2fr) auto auto !important;
  min-height: 62px !important;
  padding: 10px 14px !important;
}

.route-node-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted)) !important;
  color: var(--primary) !important;
}

.route-node-icon-brand {
  background: color-mix(in srgb, var(--info) 14%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--info) 76%, var(--ink)) !important;
}

.route-node-main,
.route-node-summary,
.route-node-meta {
  min-width: 0 !important;
}

.route-node-main {
  display: grid !important;
  gap: 3px !important;
}

.route-node-summary,
.route-node-meta,
.route-brand-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  overflow: hidden !important;
}

.route-node-summary span,
.route-node-meta span,
.route-brand-weight,
.route-brand-summary span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  max-width: 260px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--panel)) !important;
  color: var(--ink-muted) !important;
  padding: 2px 9px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-rule-head-actions {
  flex-wrap: nowrap !important;
}

.route-rule-head-actions .route-inline-toggle,
.route-brand-row .route-inline-toggle {
  width: 56px !important;
  min-width: 56px !important;
  height: 38px !important;
  min-height: 38px !important;
}

.route-brand-row {
  --route-control-height: 38px;
  grid-template-columns: 38px minmax(180px, 0.8fr) minmax(220px, 1.15fr) 68px 68px 56px 38px 38px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 9px 10px !important;
  border-style: solid !important;
}

body:has(.app-layout) .route-builder-compact .route-brand-row,
body:has(.app-layout) .route-builder .route-brand-row {
  grid-template-columns: 38px minmax(180px, 0.8fr) minmax(220px, 1.15fr) 68px 68px 56px 38px 38px !important;
}

.route-brand-row > .route-brand-drag-handle {
  grid-column: 1 !important;
}

.route-brand-row > .route-brand-main {
  grid-column: 2 !important;
}

.route-brand-row > .route-brand-summary {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.route-brand-row > .route-priority-pill {
  grid-column: 4 !important;
}

.route-brand-row > .route-brand-weight {
  grid-column: 5 !important;
}

.route-brand-row > .route-brand-active-toggle {
  grid-column: 6 !important;
}

.route-brand-row > .route-brand-edit-action {
  grid-column: 7 !important;
}

.route-brand-row > .route-brand-remove {
  grid-column: 8 !important;
}

.route-brand-main {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  height: 38px !important;
  min-width: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: 0 !important;
  text-align: left !important;
}

.route-brand-main strong {
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: 14px !important;
  font-weight: 860 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.route-brand-main em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--danger) 78%, var(--ink)) !important;
  padding: 2px 8px !important;
  font-style: normal !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

.route-brand-row .route-priority-pill {
  align-self: center !important;
  display: block !important;
  height: 38px !important;
}

.route-brand-row .route-priority-pill > span,
.route-brand-weight > span {
  display: none !important;
}

.route-brand-row .route-priority-pill > strong,
.route-brand-weight > strong {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 38px !important;
  min-height: 38px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--panel) 90%, var(--primary) 4%) !important;
  color: var(--ink) !important;
  padding: 0 10px !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
}

.route-brand-weight {
  max-width: none !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.route-builder-compact .route-rule-section {
  padding: 12px 14px 14px !important;
}

.route-builder-compact .route-rule-section-title {
  display: none !important;
}

.route-brand-add {
  justify-self: start !important;
  min-width: 190px !important;
}

@media (max-width: 1500px) {
  .route-builder-compact .route-rule-head {
    grid-template-columns: 38px 34px 38px minmax(150px, 0.8fr) minmax(170px, 1fr) auto !important;
  }
  .route-builder-compact .route-rule-head .route-node-meta {
    display: none !important;
  }
  body:has(.app-layout) .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder .route-brand-row,
  .route-brand-row {
    grid-template-columns: 38px minmax(160px, 0.9fr) minmax(160px, 1fr) 60px 60px 56px 38px 38px !important;
  }
}
@media (max-width: 1100px) {
  .route-builder-compact .route-rule-head,
  body:has(.app-layout) .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder .route-brand-row,
  .route-brand-row {
    grid-template-columns: 38px minmax(0, 1fr) auto auto !important;
  }
  .route-builder-compact .route-rule-head .route-rule-collapse,
  .route-builder-compact .route-rule-head .route-node-icon,
  .route-builder-compact .route-rule-head .route-node-summary,
  .route-builder-compact .route-rule-head .route-node-meta {
    display: none !important;
  }
  .route-builder-compact .route-rule-head .route-rule-head-actions {
    grid-column: 4 !important;
  }
  .route-brand-row > .route-brand-drag-handle {
    grid-column: 1 !important;
  }
  .route-brand-row > .route-brand-main {
    grid-column: 2 !important;
  }
  .route-brand-row > .route-brand-summary,
  .route-brand-row > .route-priority-pill,
  .route-brand-row > .route-brand-weight {
    display: none !important;
  }
  .route-brand-row > .route-brand-active-toggle {
    grid-column: 3 !important;
  }
  .route-brand-row > .route-brand-edit-action,
  .route-brand-row > .route-brand-remove {
    grid-column: 4 !important;
  }
}
/* Final distribution tree tightening. This must remain after older boxes rules. */
.route-builder-compact .route-builder-head,
.route-builder-compact .rule-step,
.route-builder-footer,
.box-rotation-panel,
.box-rotation-folder,
.route-rule-card,
.route-brand-row {
  min-width: 0 !important;
}

.route-builder-compact .rule-grid-base {
  grid-template-columns: minmax(360px, 1fr) max-content !important;
  align-items: end !important;
}

.route-box-active-toggle {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-self: end !important;
  min-height: 40px !important;
  min-width: 190px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 7px 0 !important;
}

.route-box-active-toggle input {
  position: relative !important;
  appearance: none !important;
  width: 42px !important;
  height: 22px !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--ink-muted) 28%, var(--surface)) !important;
  cursor: pointer !important;
  transition: background 0.16s ease, border-color 0.16s ease !important;
}

.route-box-active-toggle input::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 999px !important;
  background: var(--ink-muted) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.16s ease, background 0.16s ease !important;
}

.route-box-active-toggle input:checked {
  border-color: color-mix(in srgb, var(--success) 46%, var(--border)) !important;
  background: color-mix(in srgb, var(--success) 38%, var(--surface-muted)) !important;
}

.route-box-active-toggle input:checked::after {
  transform: translateX(20px) !important;
  background: var(--success) !important;
}

.route-box-active-toggle > span {
  overflow: hidden !important;
}

.route-box-active-toggle small,
.route-box-active-toggle strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.box-cap-disclosure {
  display: grid !important;
  gap: 10px !important;
  margin-top: 12px !important;
  min-width: 0 !important;
}

.box-cap-disclosure-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto 34px !important;
  align-items: center !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 48px !important;
  padding: 9px 12px !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 10px !important;
  background: color-mix(in srgb, var(--surface-muted) 46%, transparent) !important;
  color: var(--ink) !important;
  text-align: left !important;
}

.box-cap-disclosure-head > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.box-cap-disclosure-head > span i {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--primary) 18%, var(--surface-muted)) !important;
  color: var(--primary) !important;
  font-size: 12px !important;
}

.box-cap-disclosure-head strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 14px !important;
  font-weight: 880 !important;
}

.box-cap-disclosure-head em {
  color: var(--ink-muted) !important;
  font-style: normal !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.box-cap-disclosure-head > i:last-child {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  color: var(--ink-muted) !important;
}

.box-cap-grid {
  grid-template-columns: 90px minmax(220px, 1fr) 180px 112px 112px 64px !important;
  align-items: end !important;
  gap: 10px !important;
  padding: 0 !important;
}

.route-builder-compact .route-rule-head {
  grid-template-columns: 38px 34px 38px minmax(150px, 0.55fr) minmax(160px, 1fr) auto auto !important;
}

.route-node-summary,
.route-brand-summary,
.box-rotation-condition-line {
  min-width: 0 !important;
  max-width: 100% !important;
}

.route-node-summary span,
.route-brand-summary span,
.box-rotation-condition-line span {
  max-width: 100% !important;
}

.route-node-meta,
.route-rule-head-actions,
.box-rotation-tools,
.box-rotation-folder-meta,
.box-rotation-metrics {
  flex: 0 0 auto !important;
  flex-wrap: nowrap !important;
  min-width: max-content !important;
}

.box-rotation-condition-line {
  flex-wrap: nowrap !important;
}

.box-rotation-folder-row {
  grid-template-columns: 34px 34px minmax(150px, 0.38fr) minmax(170px, 1fr) auto !important;
}

.box-rotation-brand-row {
  grid-template-columns: minmax(150px, 0.55fr) minmax(160px, 1fr) minmax(120px, auto) 38px !important;
}

.box-rotation-brand-main code {
  display: none !important;
}

.route-rule-head-actions .route-inline-toggle,
.route-brand-row .route-inline-toggle,
.box-rotation-tools .box-rotation-toggle {
  flex: 0 0 56px !important;
}

.route-icon-action,
.route-rule-remove,
.route-drag-handle,
.box-rotation-icon-btn,
.box-rotation-collapse-btn {
  flex: 0 0 auto !important;
}

@media (max-width: 1280px) {
  .route-builder-compact .rule-step-title,
  .route-builder-compact .rule-step-title-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
  }
  .route-builder-compact .rule-grid-base {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .route-builder-compact .rule-grid-base > * {
    min-width: 0 !important;
  }
}
@media (max-width: 1100px) {
  .route-builder-compact .rule-grid-base {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .route-builder-compact .route-builder-head,
  .route-builder-compact .rule-step {
    padding-inline: 14px !important;
  }
}
/* Final modal/tree guardrails. Keep this at the end so compact tree rules never leak into modals. */
.route-rule-modal .route-rule-section-title,
.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title {
  display: grid !important;
  visibility: visible !important;
}

.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title {
  grid-template-columns: 28px minmax(0, 1fr) 18px !important;
  grid-template-rows: auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
}

.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title::before {
  grid-column: 1 !important;
  grid-row: 1/span 2 !important;
  align-self: center !important;
  content: "\f1de" !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-muted)) !important;
  color: var(--primary) !important;
  font: var(--fa-font-solid) !important;
  font-size: 12px !important;
}

.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title span,
.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  grid-column: 2 !important;
  display: block !important;
  visibility: visible !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title span {
  grid-row: 1 !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 860 !important;
  line-height: 1.15 !important;
}

.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  grid-row: 2 !important;
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1.25 !important;
}

.route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title::after {
  grid-column: 3 !important;
  grid-row: 1/span 2 !important;
  align-self: center !important;
  justify-self: end !important;
}

.route-rule-modal .route-builder-footer,
.route-rule-modal .route-builder-footer-actions {
  position: static !important;
}

/* Box distribution QA guardrails. These final rules intentionally live last:
   the boxes page has several historical layout passes, so the production view
   must end with one compact, predictable grid for cards, tree rows, and modals. */
.box-card-head {
  display: grid !important;
  grid-template-columns: minmax(360px, 1fr) max-content !important;
  gap: 16px !important;
  align-items: start !important;
}

.box-card-main {
  min-width: 0 !important;
}

.box-card-title-row,
.box-card-countries {
  min-width: 0 !important;
  max-width: 980px !important;
}

.box-card-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  align-content: flex-start !important;
  min-width: 0 !important;
  max-width: 760px !important;
}

.box-card-actions .box-action {
  min-height: 40px !important;
  white-space: nowrap !important;
}

.route-builder-compact .route-brand-row,
body:has(.app-layout) .route-builder-compact .route-brand-row,
body:has(.app-layout) .route-builder .route-brand-row {
  grid-template-columns: 38px minmax(220px, 0.9fr) minmax(260px, 1.2fr) 56px 38px 38px !important;
  align-items: center !important;
  min-height: 56px !important;
}

.route-builder-compact .route-brand-row > .route-brand-drag-handle {
  grid-column: 1 !important;
}

.route-builder-compact .route-brand-row > .route-brand-main {
  grid-column: 2 !important;
}

.route-builder-compact .route-brand-row > .route-brand-summary {
  grid-column: 3 !important;
}

.route-builder-compact .route-brand-row > .route-brand-active-toggle {
  grid-column: 4 !important;
}

.route-builder-compact .route-brand-row > .route-brand-edit-action {
  grid-column: 5 !important;
}

.route-builder-compact .route-brand-row > .route-brand-remove {
  grid-column: 6 !important;
}

.route-builder-compact .route-brand-row > .route-priority-pill,
.route-builder-compact .route-brand-row > .route-brand-weight {
  display: none !important;
}

.route-builder-compact .route-brand-row::before,
.route-brand-list::before {
  display: none !important;
}

.route-builder-compact .route-brand-list {
  padding-left: 0 !important;
}

.route-builder-compact .route-rule-head {
  grid-template-columns: 38px 34px 38px minmax(220px, 0.8fr) minmax(280px, 1.1fr) auto auto !important;
}

.route-rule-modal-card,
.route-brand-modal-card {
  width: min(1120px, 100vw - 44px) !important;
  max-width: 1120px !important;
}

.route-rule-modal-body,
.route-rule-modal-body * {
  box-sizing: border-box !important;
}

.route-rule-modal-body .rule-grid > *,
.route-rule-modal-body .route-parameter-row > *,
.route-brand-modal-main-grid > *,
.route-brand-modal-limits-grid > * {
  min-width: 0 !important;
}

.route-brand-modal-main-grid {
  grid-template-columns: minmax(260px, 1fr) 96px 120px 78px !important;
}

.route-brand-modal-limits-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.route-parameter-row {
  grid-template-columns: minmax(116px, 0.7fr) minmax(170px, 1fr) minmax(150px, 0.9fr) minmax(180px, 1.1fr) minmax(104px, auto) 40px !important;
}

.boxes-page .route-parameter-value-picker,
.boxes-page .route-parameter-value-picker > .relative {
  min-width: 0 !important;
}

.boxes-page .route-parameter-value-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.boxes-page .route-parameter-value-chips button {
  max-width: 128px !important;
  min-height: 26px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
}

.route-rule-modal-body .route-condition-remove,
.route-rule-modal-body .btn-ghost.small.route-condition-remove,
.route-parameter-remove,
.route-rule-modal-body .route-rule-remove {
  min-width: 40px !important;
}

.route-rule-modal .route-builder-footer,
.route-rule-modal .route-builder-footer-actions,
.route-builder-footer {
  position: static !important;
  inset: auto !important;
  transform: none !important;
}

@media (max-width: 1380px) {
  .box-card-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .box-card-actions {
    justify-content: flex-start !important;
    max-width: 100% !important;
  }
  .route-builder-compact .route-rule-head {
    grid-template-columns: 38px 34px 38px minmax(180px, 1fr) auto auto !important;
  }
  .route-builder-compact .route-rule-head .route-node-summary {
    display: none !important;
  }
  .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder .route-brand-row {
    grid-template-columns: 38px minmax(180px, 1fr) minmax(180px, 1fr) 56px 38px 38px !important;
  }
}
@media (max-width: 1100px) {
  .route-rule-modal-card,
  .route-brand-modal-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
  .route-brand-modal-main-grid,
  .route-brand-modal-limits-grid,
  .route-parameter-row,
  .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder .route-brand-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Modal accordion rescue: older compact-tree rules can hide the summary copy
   because the edit modal is rendered inside the builder. Keep the modal rows
   explicit and self-contained. */
.route-rule-modal .route-rule-modal-body .route-rule-compact-details {
  display: block !important;
  min-height: 58px !important;
  padding: 0 !important;
  overflow: visible !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr) 18px !important;
  grid-template-rows: 17px 17px !important;
  column-gap: 10px !important;
  row-gap: 2px !important;
  align-items: center !important;
  min-height: 58px !important;
  height: 58px !important;
  margin: 0 !important;
  padding: 11px 14px !important;
  overflow: hidden !important;
  list-style: none !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title span,
.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  overflow: hidden !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title span {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: var(--ink) !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  grid-column: 2 !important;
  grid-row: 2 !important;
  color: var(--ink-muted) !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title::before {
  grid-column: 1 !important;
  grid-row: 1/span 2 !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title::after {
  grid-column: 3 !important;
  grid-row: 1/span 2 !important;
}

/* Final boxes editor polish. Keep after historical box rules: the tree editor
   is dense and must not inherit the older wide/table-like layouts. */
.route-builder-compact .route-brand-list {
  gap: 8px !important;
  padding-left: 0 !important;
}

.route-builder-compact .route-brand-list::before,
.route-builder-compact .route-brand-row::before,
.route-brand-list::before,
.route-brand-row::before {
  content: none !important;
  display: none !important;
}

.route-builder-compact .route-brand-row,
body:has(.app-layout) .route-builder-compact .route-brand-row,
body:has(.app-layout) .route-builder .route-brand-row {
  grid-template-columns: 38px minmax(200px, 0.82fr) minmax(260px, 1.18fr) 56px 38px 38px !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
}

.route-builder-compact .route-brand-row > .route-brand-main {
  min-width: 0 !important;
}

.route-builder-compact .route-brand-row > .route-brand-summary {
  min-width: 0 !important;
  justify-self: stretch !important;
}

.route-builder-compact .route-brand-row > .route-brand-active-toggle {
  justify-self: center !important;
}

.route-builder-compact .route-brand-row > .route-brand-edit-action,
.route-builder-compact .route-brand-row > .route-brand-remove {
  justify-self: center !important;
}

.route-builder-compact .route-brand-main {
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  gap: 8px !important;
  height: 36px !important;
}

.route-builder-compact .route-brand-main .route-node-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
}

.route-builder-compact .route-brand-summary {
  height: 36px !important;
}

.route-builder-compact .route-brand-summary span {
  max-width: 100% !important;
}

.route-rule-head-actions .route-inline-toggle,
.route-brand-row .route-inline-toggle,
.box-rotation-tools .box-rotation-toggle {
  width: 54px !important;
  min-width: 54px !important;
  height: 36px !important;
  min-height: 36px !important;
}

.route-inline-toggle > span,
.box-rotation-toggle > span {
  width: 36px !important;
  height: 20px !important;
}

.route-inline-toggle-on > span::after,
.box-rotation-toggle-on > span::after {
  transform: translateX(16px) !important;
}

.route-rule-modal.route-folder-modal,
.route-rule-modal.route-brand-modal {
  align-items: center !important;
  justify-items: center !important;
  padding: 18px !important;
}

.route-folder-modal-card,
.route-rule-modal-card.route-folder-modal-card {
  width: min(780px, 100vw - 36px) !important;
  max-width: 780px !important;
}

.route-brand-modal-card,
.route-rule-modal-card.route-brand-modal-card {
  width: min(960px, 100vw - 36px) !important;
  max-width: 960px !important;
}

.route-folder-modal-card,
.route-brand-modal-card {
  overflow: hidden !important;
  border-radius: 18px !important;
}

.route-folder-modal-body,
.route-brand-modal-body {
  --route-control-height: 42px;
  display: grid !important;
  gap: 10px !important;
  max-height: calc(100dvh - 152px) !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.route-folder-modal-body .route-rule-section,
.route-brand-modal-body .route-rule-section {
  padding: 14px !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--surface-muted) 58%, transparent) !important;
}

.route-folder-modal-body .route-rule-section + .route-rule-section,
.route-brand-modal-body .route-rule-section + .route-rule-section {
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
}

.route-folder-modal-body .route-rule-section-title,
.route-brand-modal-body .route-rule-section-title {
  margin-bottom: 10px !important;
}

.route-folder-modal-body .route-rule-section-title span,
.route-brand-modal-body .route-rule-section-title span {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.route-folder-modal-body .route-rule-section-title p,
.route-brand-modal-body .route-rule-section-title p {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.route-folder-modal-body .route-rule-compact-details > summary.route-rule-section-title p,
.route-brand-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  display: none !important;
  white-space: normal !important;
}

.route-folder-modal-body p,
.route-brand-modal-body p {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

.route-folder-modal-body .rule-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.route-folder-modal-body .route-inline-toggle-field {
  max-width: 96px !important;
}

.route-builder-compact .rule-step .route-inline-toggle-field {
  max-width: 180px !important;
}

.route-builder-compact .rule-step .route-inline-toggle-field small {
  display: none !important;
}

.route-builder-compact .route-inline-toggle-field small,
.route-builder-compact .rule-field small,
.route-builder-compact .route-box-active-toggle small {
  display: none !important;
}

.route-brand-modal-main-grid {
  grid-template-columns: minmax(240px, 1fr) 92px 120px 72px !important;
  gap: 10px !important;
  align-items: end !important;
}

.route-brand-modal-limits-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
}

.route-brand-modal-body .route-delivery-toggle {
  grid-column: span 1 !important;
  min-height: var(--route-control-height) !important;
}

.route-folder-modal-body .route-inline-toggle,
.route-brand-modal-body .route-inline-toggle,
.route-brand-modal-body .route-priority-pill > strong,
.route-folder-modal-body input,
.route-brand-modal-body input,
.route-folder-modal-body .custom-select-trigger,
.route-brand-modal-body .custom-select-trigger,
.route-folder-modal-body .crm-select,
.route-brand-modal-body .crm-select,
.route-folder-modal-body .country-select-control,
.route-brand-modal-body .country-select-control,
.route-folder-modal-body .route-parameter-case,
.route-brand-modal-body .route-parameter-case {
  height: var(--route-control-height) !important;
  min-height: var(--route-control-height) !important;
}

.route-brand-modal-body .route-priority-pill {
  height: auto !important;
  align-self: end !important;
}

.route-brand-modal-body .route-priority-pill > strong {
  justify-content: flex-start !important;
}

.route-folder-modal-body .route-condition-group-body,
.route-brand-modal-body .route-condition-group-body {
  padding: 10px !important;
  border-radius: 12px !important;
}

.route-folder-modal-body .route-condition-head,
.route-brand-modal-body .route-condition-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.route-folder-modal-body .route-condition-head span,
.route-brand-modal-body .route-condition-head span {
  display: none !important;
}

.route-folder-modal-body .route-parameter-list,
.route-brand-modal-body .route-parameter-list {
  display: grid !important;
  gap: 8px !important;
}

.route-folder-modal-body .route-parameter-row,
.route-brand-modal-body .route-parameter-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 8px !important;
  align-items: end !important;
  min-width: 0 !important;
  padding: 0 !important;
}

.route-folder-modal-body .route-parameter-row > .rule-field,
.route-brand-modal-body .route-parameter-row > .rule-field {
  min-width: 0 !important;
}

.route-folder-modal-body .route-parameter-case,
.route-brand-modal-body .route-parameter-case {
  justify-self: start !important;
  width: auto !important;
  min-width: 150px !important;
  padding-inline: 12px !important;
}

.route-folder-modal-body .route-parameter-remove,
.route-brand-modal-body .route-parameter-remove {
  width: 40px !important;
  height: var(--route-control-height) !important;
  min-width: 40px !important;
  min-height: var(--route-control-height) !important;
  justify-self: end !important;
}

.route-folder-modal-body .route-condition-and,
.route-brand-modal-body .route-condition-and,
.route-folder-modal-body .route-condition-or,
.route-brand-modal-body .route-condition-or {
  margin: 8px 0 !important;
}

.route-folder-modal-body .route-condition-add,
.route-brand-modal-body .route-condition-add,
.route-folder-modal-body .route-parameter-add,
.route-brand-modal-body .route-parameter-add {
  justify-self: start !important;
  min-height: 38px !important;
}

.route-folder-modal-body .route-rule-compact-details {
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--surface-muted) 58%, transparent) !important;
  overflow: hidden !important;
}

.route-folder-modal-body .route-rule-compact-details > summary.route-rule-section-title {
  height: auto !important;
  min-height: 50px !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
}

.route-rule-modal .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  display: none !important;
}

.route-builder-footer {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  box-shadow: none !important;
}

@media (max-width: 1380px) {
  .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder-compact .route-brand-row,
  body:has(.app-layout) .route-builder .route-brand-row {
    grid-template-columns: 38px minmax(180px, 1fr) minmax(180px, 1fr) 54px 38px 38px !important;
  }
}
@media (max-width: 980px) {
  .route-folder-modal-body .rule-grid,
  .route-brand-modal-main-grid,
  .route-brand-modal-limits-grid,
  .route-folder-modal-body .route-parameter-row,
  .route-brand-modal-body .route-parameter-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .route-folder-modal-body .route-inline-toggle-field {
    max-width: none !important;
  }
  .route-folder-modal-body .route-condition-head,
  .route-brand-modal-body .route-condition-head {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Boxes legacy route-card normalization.
   The active tree/editor rules are consolidated in the reset block below. */
.boxes-page .route-builder-compact,
.boxes-page .route-builder-compact *,
.boxes-page .route-rule-modal,
.boxes-page .route-rule-modal * {
  box-sizing: border-box !important;
}

.boxes-page .route-builder-compact,
.boxes-page .route-card-list,
.boxes-page .route-rule-card,
.boxes-page .route-rule-head,
.boxes-page .route-brand-list,
.boxes-page .route-brand-row,
.boxes-page .route-rule-modal-card,
.boxes-page .route-rule-modal-body {
  min-width: 0 !important;
}

.boxes-page .route-builder-modal.route-builder-inline {
  position: static !important;
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
}

.boxes-page .route-builder-compact.route-builder-modal-card {
  width: 100% !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--panel) 96%, var(--surface-muted)) !important;
  box-shadow: none !important;
}

.boxes-page .route-builder-compact .route-builder-head,
.boxes-page .route-builder-compact .rule-step,
.boxes-page .route-builder-footer {
  border-radius: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}

.boxes-page .route-builder-compact .rule-step + .rule-step {
  border-top: 1px solid var(--border) !important;
}

.boxes-page .route-builder-footer {
  position: static !important;
  inset: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px 20px !important;
  border-top: 1px solid var(--border) !important;
  background: color-mix(in srgb, var(--panel) 96%, var(--surface-muted)) !important;
  box-shadow: none !important;
  transform: none !important;
}

.boxes-page .route-builder-footer-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  width: auto !important;
}

.boxes-page .route-builder-footer-actions .btn-primary,
.boxes-page .route-builder-footer-actions .btn-secondary {
  min-width: 170px !important;
  min-height: 44px !important;
}

.boxes-page .route-card-list {
  display: grid !important;
  gap: 12px !important;
}

.boxes-page .route-rule-card {
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--surface-muted) 52%, transparent) !important;
}

.boxes-page .route-rule-card-plain {
  background: color-mix(in srgb, var(--surface-muted) 46%, transparent) !important;
}

.boxes-page .route-rule-card-plain .route-rule-head {
  background: color-mix(in srgb, var(--surface-muted) 68%, var(--panel)) !important;
}

.boxes-page .route-rule-head {
  display: grid !important;
  grid-template-columns: 38px 34px 34px minmax(180px, 0.72fr) minmax(220px, 1fr) auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  min-height: 58px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 82%, var(--surface-muted)) !important;
}

.boxes-page .route-rule-card-collapsed .route-rule-head {
  border-bottom: 0 !important;
}

.boxes-page .route-rule-head > .route-drag-handle {
  grid-column: 1 !important;
}

.boxes-page .route-rule-head > .route-rule-collapse {
  grid-column: 2 !important;
}

.boxes-page .route-rule-head > .route-node-icon {
  grid-column: 3 !important;
}

.boxes-page .route-rule-head > .route-node-main {
  grid-column: 4 !important;
}

.boxes-page .route-rule-head > .route-node-summary {
  grid-column: 5 !important;
}

.boxes-page .route-rule-head > .route-node-meta {
  grid-column: 6 !important;
}

.boxes-page .route-rule-head > .route-rule-head-actions {
  grid-column: 7 !important;
}

.boxes-page .route-node-main {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.boxes-page .route-node-main strong,
.boxes-page .route-brand-main strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-node-main small {
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.boxes-page .route-node-icon {
  display: inline-grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border: 1px solid var(--border) !important;
  border-radius: 9px !important;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface-muted)) !important;
  color: var(--primary) !important;
}

.boxes-page .route-node-icon-brand {
  background: color-mix(in srgb, var(--info) 14%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--info) 78%, var(--ink)) !important;
}

.boxes-page .route-node-summary,
.boxes-page .route-node-meta,
.boxes-page .route-brand-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.boxes-page .route-node-summary span,
.boxes-page .route-node-meta span,
.boxes-page .route-brand-summary span {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 24px !important;
  padding: 2px 9px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--panel)) !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-rule-head-actions {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content !important;
}

.boxes-page .route-drag-handle,
.boxes-page .route-rule-collapse,
.boxes-page .route-icon-action,
.boxes-page .route-rule-remove,
.boxes-page .route-tool-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
}

.boxes-page .route-rule-collapse {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

.boxes-page .route-inline-toggle,
.boxes-page .box-rotation-toggle {
  position: relative !important;
  display: inline-grid !important;
  align-self: center !important;
  justify-self: center !important;
  place-items: center !important;
  width: 54px !important;
  height: 36px !important;
  min-width: 54px !important;
  min-height: 36px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -999px !important;
  white-space: nowrap !important;
}

.boxes-page .route-inline-toggle > span,
.boxes-page .box-rotation-toggle > span {
  position: relative !important;
  display: block !important;
  width: 36px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

.boxes-page .route-inline-toggle > span::after,
.boxes-page .box-rotation-toggle > span::after {
  width: 16px !important;
  height: 16px !important;
}

.boxes-page .route-inline-toggle-on > span::after,
.boxes-page .box-rotation-toggle-on > span::after {
  transform: translateX(16px) !important;
}

.boxes-page .route-brand-list {
  display: grid !important;
  gap: 8px !important;
  padding: 12px 14px 14px !important;
  padding-left: 14px !important;
}

.boxes-page .route-brand-list::before,
.boxes-page .route-brand-row::before {
  content: none !important;
  display: none !important;
}

.boxes-page .route-rule-section {
  padding: 0 !important;
  border-top: 0 !important;
}

.boxes-page .route-builder-compact > .route-rule-section-title,
.boxes-page .route-builder-compact .route-rule-card > .route-rule-section > .route-rule-section-title {
  display: none !important;
}

.boxes-page .route-brand-row,
body:has(.app-layout) .boxes-page .route-builder-compact .route-brand-row,
body:has(.app-layout) .boxes-page .route-builder .route-brand-row {
  display: grid !important;
  grid-template-columns: 38px minmax(220px, 0.9fr) minmax(220px, 1fr) 54px 38px 38px !important;
  gap: 9px !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 64%, transparent) !important;
}

.boxes-page .route-brand-row > .route-brand-drag-handle {
  grid-column: 1 !important;
}

.boxes-page .route-brand-row > .route-brand-main {
  grid-column: 2 !important;
}

.boxes-page .route-brand-row > .route-brand-summary {
  grid-column: 3 !important;
}

.boxes-page .route-brand-row > .route-brand-active-toggle {
  grid-column: 4 !important;
  justify-self: center !important;
  align-self: center !important;
}

.boxes-page .route-brand-row > .route-brand-edit-action {
  grid-column: 5 !important;
  justify-self: center !important;
}

.boxes-page .route-brand-row > .route-brand-remove {
  grid-column: 6 !important;
  justify-self: center !important;
}

.boxes-page .route-brand-row > .route-priority-pill,
.boxes-page .route-brand-row > .route-brand-weight,
.boxes-page .route-brand-row > label.rule-field {
  display: none !important;
}

.boxes-page .route-brand-main {
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 36px !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
  text-align: left !important;
}

.boxes-page .route-brand-main em {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 22px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--danger) 10%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--danger) 78%, var(--ink)) !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 820 !important;
  white-space: nowrap !important;
}

.boxes-page .route-brand-add {
  justify-self: start !important;
  min-width: 190px !important;
  min-height: 40px !important;
  margin-top: 0 !important;
}

.boxes-page .route-plain-brand-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  padding: 10px 14px 12px !important;
}

.boxes-page .route-root-brand-details {
  grid-template-columns: 92px 92px minmax(180px, 0.85fr) minmax(260px, 1fr) !important;
  align-items: stretch !important;
}

.boxes-page .route-root-brand-stat {
  display: grid !important;
  align-content: center !important;
  gap: 2px !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 7px 10px !important;
  overflow: hidden !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 68%, transparent) !important;
  color: var(--ink) !important;
  text-align: left !important;
}

.boxes-page .route-root-brand-stat span {
  display: block !important;
  overflow: hidden !important;
  color: var(--ink-muted) !important;
  font-size: 10px !important;
  font-weight: 840 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-root-brand-stat strong {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 860 !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-plain-brand-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 8px 10px !important;
  overflow: hidden !important;
  border: 1px dashed color-mix(in srgb, var(--border) 82%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--panel) 62%, transparent) !important;
}

.boxes-page .route-plain-brand-summary span {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 100% !important;
  min-height: 24px !important;
  padding: 2px 9px !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--panel)) !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 820 !important;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-plain-brand-edit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 40px !important;
  white-space: nowrap !important;
}

.boxes-page .route-rule-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 120 !important;
  display: grid !important;
  place-items: center !important;
  padding: 18px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.55) !important;
}

.boxes-page .route-rule-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.boxes-page .route-rule-modal-card {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  width: min(960px, 100vw - 36px) !important;
  max-width: 960px !important;
  max-height: calc(100dvh - 36px) !important;
  overflow: hidden !important;
  border: 1px solid var(--border) !important;
  border-radius: 18px !important;
  background: var(--panel) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45) !important;
}

.boxes-page .route-folder-modal-card {
  width: min(860px, 100vw - 36px) !important;
  max-width: 860px !important;
}

.boxes-page .route-rule-modal-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: linear-gradient(110deg, color-mix(in srgb, var(--primary) 10%, var(--panel)), var(--panel)) !important;
}

.boxes-page .route-rule-modal-head h3,
.boxes-page .route-rule-modal-head p {
  min-width: 0 !important;
  max-width: 100% !important;
}

.boxes-page .route-rule-modal-body {
  --route-control-height: 42px;
  display: grid !important;
  gap: 12px !important;
  max-height: none !important;
  padding: 14px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.boxes-page .route-rule-modal-body .route-rule-section,
.boxes-page .route-rule-modal-body .route-rule-compact-details {
  display: block !important;
  padding: 14px !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--surface-muted) 58%, transparent) !important;
}

.boxes-page .route-rule-modal-body .route-rule-section + .route-rule-section,
.boxes-page .route-rule-modal-body .route-rule-compact-details + .route-rule-compact-details {
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
}

.boxes-page .route-rule-modal-body .route-rule-section-title,
.boxes-page .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title {
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  gap: 2px 10px !important;
  align-items: center !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  overflow: visible !important;
  list-style: none !important;
}

.boxes-page .route-rule-modal-body .route-rule-section-title::before,
.boxes-page .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title::before {
  grid-column: 1 !important;
  grid-row: 1/span 2 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-muted)) !important;
  color: var(--primary) !important;
  font: var(--fa-font-solid) !important;
  font-size: 11px !important;
  content: "\f1de" !important;
}

.boxes-page .route-rule-modal-body .route-rule-section-title span,
.boxes-page .route-rule-modal-body .route-rule-section-title p,
.boxes-page .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title span,
.boxes-page .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  grid-column: 2 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: auto !important;
  clip-path: none !important;
  opacity: 1 !important;
  text-indent: 0 !important;
  transform: none !important;
  white-space: normal !important;
}

.boxes-page .route-rule-modal-body .route-rule-section-title span,
.boxes-page .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title span {
  grid-row: 1 !important;
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 860 !important;
  line-height: 1.2 !important;
}

.boxes-page .route-rule-modal-body .route-rule-section-title p,
.boxes-page .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title p {
  grid-row: 2 !important;
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.boxes-page .route-rule-modal-body .route-rule-compact-details > summary.route-rule-section-title::after {
  grid-column: 3 !important;
  grid-row: 1/span 2 !important;
  justify-self: end !important;
}

.boxes-page .route-rule-modal-body .rule-grid,
.boxes-page .route-brand-modal-main-grid,
.boxes-page .route-brand-modal-limits-grid {
  display: grid !important;
  gap: 10px !important;
  align-items: end !important;
}

.boxes-page .route-folder-modal-body .rule-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.boxes-page .route-brand-modal-main-grid {
  grid-template-columns: minmax(260px, 1fr) 92px 120px 76px !important;
}

.boxes-page .route-brand-modal-limits-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.boxes-page .route-rule-modal-body .rule-grid > *,
.boxes-page .route-rule-modal-body .route-parameter-row > *,
.boxes-page .route-brand-modal-main-grid > *,
.boxes-page .route-brand-modal-limits-grid > * {
  min-width: 0 !important;
}

.boxes-page .route-rule-modal-body .rule-field > span,
.boxes-page .route-rule-modal-body .route-priority-pill > span {
  min-height: 17px !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
}

.boxes-page .route-rule-modal-body input,
.boxes-page .route-rule-modal-body .custom-select-trigger,
.boxes-page .route-rule-modal-body .crm-select,
.boxes-page .route-rule-modal-body .country-select-control,
.boxes-page .route-rule-modal-body .route-inline-toggle,
.boxes-page .route-rule-modal-body .route-mini-switch,
.boxes-page .route-rule-modal-body .route-parameter-case,
.boxes-page .route-rule-modal-body .route-priority-pill > strong {
  height: var(--route-control-height) !important;
  min-height: var(--route-control-height) !important;
}

.boxes-page .route-rule-modal-body .route-priority-pill {
  height: auto !important;
  align-self: end !important;
}

.boxes-page .route-rule-modal-body .route-priority-pill > strong {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding-inline: 12px !important;
}

.boxes-page .route-condition-stack,
.boxes-page .route-parameter-editor,
.boxes-page .route-parameter-list {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.boxes-page .route-condition-group-body {
  padding: 16px !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--panel) 72%, transparent) !important;
}

.boxes-page .route-condition-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 10px !important;
  align-items: center !important;
  margin-bottom: 10px !important;
}

.boxes-page .route-condition-head span {
  display: none !important;
}

.boxes-page .route-condition-and,
.boxes-page .route-condition-or {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 8px 0 !important;
}

.boxes-page .route-condition-and::before,
.boxes-page .route-condition-and::after,
.boxes-page .route-condition-or::before,
.boxes-page .route-condition-or::after {
  content: "" !important;
  height: 1px !important;
  background: color-mix(in srgb, var(--danger) 45%, var(--border)) !important;
}

.boxes-page .route-condition-and span,
.boxes-page .route-condition-or span {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 24px !important;
  padding: 2px 10px !important;
  border: 1px solid color-mix(in srgb, var(--danger) 62%, var(--border)) !important;
  border-radius: 999px !important;
  color: color-mix(in srgb, var(--danger) 88%, var(--ink)) !important;
  font-size: 11px !important;
  font-weight: 860 !important;
  line-height: 1 !important;
}

.boxes-page .route-parameter-row {
  display: grid !important;
  grid-template-columns: minmax(108px, 0.72fr) minmax(150px, 1fr) minmax(140px, 0.88fr) minmax(160px, 1fr) minmax(96px, auto) 40px !important;
  gap: 8px !important;
  align-items: end !important;
  min-width: 0 !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 58%, transparent) !important;
}

.boxes-page .route-rule-modal-body .route-condition-group-body {
  padding: 18px 18px 16px !important;
}

.boxes-page .route-rule-modal-body .route-parameter-list {
  gap: 12px !important;
}

.boxes-page .route-rule-modal-body .route-parameter-row {
  gap: 10px !important;
  padding: 12px !important;
}

.boxes-page .route-rule-modal-body .route-parameter-row .rule-field {
  display: grid !important;
  gap: 7px !important;
}

.boxes-page .route-rule-modal-body .route-parameter-row .rule-field > span {
  display: block !important;
  min-height: 16px !important;
  overflow: hidden !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  text-transform: uppercase !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-parameter-case {
  justify-self: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  padding-inline: 10px !important;
}

.boxes-page .route-parameter-remove {
  align-self: end !important;
  justify-self: end !important;
  width: 40px !important;
  height: var(--route-control-height) !important;
  min-width: 40px !important;
  min-height: var(--route-control-height) !important;
}

.boxes-page .route-condition-add,
.boxes-page .route-parameter-add {
  justify-self: start !important;
  min-height: 38px !important;
}

.boxes-page .box-rotation-brand-main code {
  display: none !important;
}

@media (max-width: 1380px) {
  .boxes-page .route-rule-head {
    grid-template-columns: 38px 34px 34px minmax(180px, 1fr) auto auto !important;
  }
  .boxes-page .route-rule-head > .route-node-summary {
    display: none !important;
  }
  .boxes-page .route-brand-row,
  body:has(.app-layout) .boxes-page .route-builder-compact .route-brand-row,
  body:has(.app-layout) .boxes-page .route-builder .route-brand-row {
    grid-template-columns: 38px minmax(180px, 1fr) minmax(180px, 1fr) 54px 38px 38px !important;
  }
  .boxes-page .route-parameter-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 40px !important;
  }
  .boxes-page .route-root-brand-details {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 980px) {
  .boxes-page .route-rule-head,
  .boxes-page .route-brand-row,
  body:has(.app-layout) .boxes-page .route-builder-compact .route-brand-row,
  body:has(.app-layout) .boxes-page .route-builder .route-brand-row,
  .boxes-page .route-folder-modal-body .rule-grid,
  .boxes-page .route-brand-modal-main-grid,
  .boxes-page .route-brand-modal-limits-grid,
  .boxes-page .route-parameter-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .boxes-page .route-rule-head > *,
  .boxes-page .route-brand-row > * {
    grid-column: auto !important;
  }
  .boxes-page .route-rule-head,
  .boxes-page .route-brand-row {
    gap: 8px !important;
  }
  .boxes-page .route-root-brand-details {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .boxes-page .route-rule-head-actions {
    justify-content: flex-start !important;
  }
}
/* Boxes route preview: remove legacy nested-border artifacts in the live box card. */
.boxes-page .box-plan-tree.box-rotation-panel {
  gap: 12px !important;
  overflow: visible !important;
  padding: 14px 18px 18px !important;
  border-radius: 14px !important;
}

.boxes-page .box-plan-tree .box-rotation-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 0 12px !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
}

.boxes-page .box-plan-tree .box-rotation-head > div:first-child {
  display: grid !important;
  justify-items: start !important;
  gap: 3px !important;
  min-width: 0 !important;
  text-align: left !important;
}

.boxes-page .box-plan-tree .box-rotation-head p,
.boxes-page .box-plan-tree .box-rotation-head span {
  max-width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
}

.boxes-page .box-plan-tree .box-rotation-tools {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-content: flex-end !important;
  min-width: max-content !important;
}

.boxes-page .box-plan-tree .box-rotation-tree {
  gap: 10px !important;
  padding: 0 !important;
}

.boxes-page .box-plan-tree .box-rotation-folder {
  overflow: visible !important;
  padding: 0 !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 13px !important;
  background: color-mix(in srgb, var(--surface-muted) 46%, transparent) !important;
  box-shadow: none !important;
}

.boxes-page .box-plan-tree .box-rotation-standalone-brand {
  display: grid !important;
}

.boxes-page .box-plan-tree .box-rotation-standalone-brand .box-rotation-brand-row {
  min-height: 58px !important;
  border-style: solid !important;
}

.boxes-page .box-plan-tree .box-rotation-folder-row {
  display: grid !important;
  grid-template-columns: 34px 34px minmax(180px, 0.42fr) minmax(260px, 1fr) max-content !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 58px !important;
  padding: 12px 14px !important;
}

.boxes-page .box-plan-tree .box-rotation-folder-icon,
.boxes-page .box-plan-tree .box-rotation-collapse-btn,
.boxes-page .box-plan-tree .box-rotation-icon-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
}

.boxes-page .box-plan-tree .box-rotation-brand-list {
  display: grid !important;
  gap: 8px !important;
  padding: 12px 14px 14px 58px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent) !important;
}

.boxes-page .box-plan-tree .box-rotation-brand-row {
  display: grid !important;
  grid-template-columns: minmax(180px, 0.48fr) minmax(240px, 1fr) minmax(190px, 0.58fr) 34px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  padding: 7px 8px !important;
  border-style: solid !important;
  border-color: color-mix(in srgb, var(--border) 80%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 72%, transparent) !important;
}

.boxes-page .box-plan-tree .box-rotation-condition-line {
  justify-content: flex-start !important;
}

.boxes-page .box-plan-tree .box-rotation-folder-meta,
.boxes-page .box-plan-tree .box-rotation-metrics {
  justify-content: flex-end !important;
}

.boxes-page .box-plan-tree .box-rotation-folder-meta {
  display: inline-flex !important;
  min-width: max-content !important;
}

.boxes-page .box-plan-tree .box-rotation-metrics {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}

.boxes-page .box-plan-tree .box-rotation-brand-list:empty {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.boxes-page .box-plan-tree .box-rotation-folder-collapsed .box-rotation-brand-list {
  display: none !important;
}

.boxes-page .box-plan-tree .box-rotation-folder::before,
.boxes-page .box-plan-tree .box-rotation-brand-row::before,
.boxes-page .box-plan-tree .box-rotation-tree::before,
.boxes-page .box-plan-tree .box-rotation-brand-list::before {
  content: none !important;
  display: none !important;
}

/* Boxes final reset: single source of truth for the iRev-style tree/editor. */
body:has(.app-layout) {
  overflow-x: hidden !important;
}

body:has(.app-layout) .app-layout {
  grid-template-columns: var(--crm-sidebar-width, 312px) minmax(0, 1fr) !important;
  overflow-x: hidden !important;
}

.crm-nav-collapsed body:has(.app-layout) .app-layout {
  grid-template-columns: var(--crm-sidebar-collapsed-width, 92px) minmax(0, 1fr) !important;
}

body:has(.app-layout) .main-content {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

body:has(.app-layout) .main-content > .boxes-page {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

.boxes-page,
.boxes-page * {
  box-sizing: border-box !important;
}

.boxes-page :is(.distribution-command, .command-card, .box-card, .route-builder-compact, .route-builder-modal-card) {
  max-width: 100% !important;
}

.boxes-page .distribution-command {
  overflow: visible !important;
}

.boxes-page .box-card {
  overflow: hidden !important;
}

.boxes-page .box-card > * {
  min-width: 0 !important;
}

.boxes-page .box-card-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.boxes-page .box-card-actions :is(button, .btn-secondary, .btn-danger, .box-action-tree) {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.boxes-page .route-builder-modal.route-builder-inline {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
}

.boxes-page .route-builder-compact.route-builder-modal-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent) !important;
  border-radius: 16px !important;
  background: var(--panel) !important;
}

.boxes-page .route-builder-compact .route-builder-head,
.boxes-page .route-builder-compact .rule-step,
.boxes-page .route-builder-footer {
  margin: 0 !important;
  border-right: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

.boxes-page .route-builder-compact .route-builder-head {
  border-top: 0 !important;
  border-radius: 16px 16px 0 0 !important;
}

.boxes-page .route-builder-footer {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 72px !important;
  padding: 12px 18px !important;
  border-bottom: 0 !important;
  border-radius: 0 0 16px 16px !important;
  background: color-mix(in srgb, var(--panel) 94%, var(--surface-muted)) !important;
  box-shadow: none !important;
}

.boxes-page .route-builder-footer-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.boxes-page .route-card-list-tree {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: visible !important;
  padding: 0 !important;
}

.boxes-page .route-tree-grid-head {
  display: grid !important;
  grid-template-columns: 34px 34px 36px 38px minmax(170px, 0.82fr) minmax(250px, 1.18fr) minmax(144px, 0.54fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
}

.boxes-page .route-card-list-legacy {
  display: none !important;
}

.boxes-page .route-tree-node {
  --tree-depth: 0;
  position: relative !important;
  display: grid !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - var(--tree-depth) * 12px) !important;
  margin: 0 0 0 calc(var(--tree-depth) * 12px) !important;
  overflow: visible !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--surface-muted) 46%, var(--panel)) !important;
}

.boxes-page .route-tree-node::before,
.boxes-page .route-tree-children::before,
.boxes-page .route-tree-empty::before {
  content: none !important;
  display: none !important;
}

.boxes-page .route-tree-node-folder {
  background: color-mix(in srgb, var(--surface-muted) 54%, var(--panel)) !important;
}

.boxes-page .route-tree-node-brand {
  background: color-mix(in srgb, var(--panel) 78%, var(--surface-muted)) !important;
}

.boxes-page .route-tree-node-dragging {
  opacity: 0.72 !important;
  outline: 1px solid var(--primary) !important;
}

.boxes-page .route-tree-node-head {
  display: grid !important;
  grid-template-columns: 34px 34px 36px 38px minmax(170px, 0.82fr) minmax(250px, 1.18fr) minmax(144px, 0.54fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  min-height: 56px !important;
  padding: 8px 12px !important;
  overflow: visible !important;
  border: 0 !important;
}

.boxes-page .route-tree-node-brand > .route-tree-node-head {
  grid-template-columns: 34px 36px 38px minmax(170px, 0.82fr) minmax(250px, 1.18fr) minmax(144px, 0.54fr) auto !important;
}

.boxes-page .route-tree-node-title,
.boxes-page .route-tree-node-summary,
.boxes-page .route-tree-node-meta {
  min-width: 0 !important;
}

.boxes-page .route-tree-node-title {
  display: grid !important;
  gap: 2px !important;
}

.boxes-page .route-tree-node-head > .route-node-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)) !important;
  border-radius: 6px !important;
  background: color-mix(in srgb, var(--primary) 14%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--primary) 82%, var(--ink)) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.boxes-page .route-tree-node-head > .route-node-icon-brand {
  border-color: color-mix(in srgb, var(--info) 24%, var(--border)) !important;
  background: color-mix(in srgb, var(--info) 14%, var(--surface-muted)) !important;
  color: color-mix(in srgb, var(--info) 84%, var(--ink)) !important;
}

.boxes-page .route-tree-node-title strong,
.boxes-page .route-tree-node-title small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-tree-node-title strong {
  color: var(--ink) !important;
  font-size: 17px !important;
  font-weight: 880 !important;
  line-height: 1.12 !important;
}

.boxes-page .route-tree-node-title small {
  color: var(--ink-muted) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

.boxes-page .route-tree-order {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  color: var(--ink-muted) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.boxes-page .route-tree-node-summary {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  max-height: 34px !important;
  overflow: hidden !important;
}

.boxes-page .route-tree-node-summary span {
  min-width: 0 !important;
  max-width: min(280px, 100%) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-tree-node-summary span:last-child:not(:first-child) {
  flex: 0 0 auto !important;
}

.boxes-page .route-tree-node-meta {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: 190px !important;
}

.boxes-page .route-tree-percent-field {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  width: 74px !important;
  height: 34px !important;
  min-width: 74px !important;
  padding: 0 11px !important;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--panel)) !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.boxes-page .route-tree-percent-field input {
  width: 40px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 28px !important;
  max-height: 28px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  appearance: textfield !important;
  background: transparent !important;
  color: inherit !important;
  font: inherit !important;
  line-height: 1 !important;
  text-align: right !important;
}

.boxes-page .route-tree-percent-field:focus,
.boxes-page .route-tree-percent-field:focus-within,
.boxes-page .route-tree-percent-field input:focus,
.boxes-page .route-tree-percent-field input:focus-visible {
  border-color: color-mix(in srgb, var(--border) 88%, transparent) !important;
  outline: 0 !important;
  box-shadow: none !important;
}

.boxes-page .route-tree-percent-field > span {
  display: inline !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--ink-muted) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

.boxes-page .route-tree-percent-field input::-webkit-outer-spin-button,
.boxes-page .route-tree-percent-field input::-webkit-inner-spin-button {
  margin: 0 !important;
  appearance: none !important;
}

.boxes-page .route-tree-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: max-content !important;
}

.boxes-page .route-tree-drag,
.boxes-page .route-tree-collapse,
.boxes-page .route-tree-actions .route-icon-action,
.boxes-page .route-tree-actions .route-rule-remove {
  display: inline-grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

.boxes-page .route-tree-actions .route-inline-toggle {
  width: 54px !important;
  min-width: 54px !important;
  max-width: 54px !important;
  height: 34px !important;
  align-self: center !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
}

.boxes-page .route-tree-actions .route-inline-toggle > span {
  margin: 0 !important;
}

.boxes-page .route-tree-children {
  display: grid !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  padding: 8px 8px 10px 26px !important;
  overflow: visible !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent) !important;
}

.boxes-page .route-tree-empty,
.boxes-page .route-tree-node .rule-empty {
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px dashed color-mix(in srgb, var(--border) 88%, transparent) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--surface-muted) 44%, transparent) !important;
}

.boxes-page .route-tree-add-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow: visible !important;
  padding: 0 !important;
}

.boxes-page .route-tree-title-actions {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.boxes-page .route-rebalance-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  white-space: nowrap !important;
}

.boxes-page .route-rebalance-btn i {
  font-size: 11px !important;
}

.boxes-page .route-add-menu {
  position: relative !important;
  overflow: visible !important;
  width: auto !important;
  max-width: 100% !important;
}

.boxes-page .route-add-menu-list {
  z-index: 1000 !important;
  min-width: 220px !important;
}

.route-add-menu-list-portal {
  position: fixed !important;
  top: var(--route-menu-top) !important;
  right: auto !important;
  left: var(--route-menu-left) !important;
  z-index: 50000 !important;
  width: var(--route-menu-width) !important;
  min-width: 0 !important;
  max-height: min(260px, 100dvh - 20px) !important;
  overflow: auto !important;
}

.boxes-page .route-rule-modal {
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  overflow: hidden !important;
}

.boxes-page .route-rule-modal-card {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  width: min(1180px, 100vw - 40px) !important;
  max-width: min(1180px, 100vw - 40px) !important;
  max-height: calc(100dvh - 40px) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.boxes-page .route-node-editor-card {
  width: min(1120px, 100vw - 40px) !important;
  max-width: min(1120px, 100vw - 40px) !important;
}

.boxes-page .route-rule-modal-head {
  padding: 18px 22px !important;
}

.boxes-page .route-rule-modal-body {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 16px !important;
}

.boxes-page .route-rule-modal-body .route-rule-section,
.boxes-page .route-rule-modal-body .route-rule-compact-details,
.boxes-page .route-condition-group,
.boxes-page .route-condition-group-body {
  min-width: 0 !important;
  overflow: visible !important;
}

.boxes-page .route-brand-modal-main-grid,
.boxes-page .route-brand-modal-limits-grid,
.boxes-page .route-node-editor-grid {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
  align-items: end !important;
}

.boxes-page .route-node-editor-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(120px, 160px) minmax(84px, 100px) !important;
}

.boxes-page .route-node-editor-limits-grid {
  grid-template-columns: 78px minmax(170px, 1fr) minmax(210px, 1.08fr) minmax(150px, 0.8fr) minmax(96px, 112px) minmax(96px, 112px) 64px !important;
  align-items: end !important;
  margin-top: 14px !important;
  width: 100% !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

.boxes-page .route-limits-disclosure {
  display: grid !important;
  gap: 10px !important;
}

.boxes-page .route-limits-disclosure-head {
  margin: 0 !important;
}

.boxes-page .route-limits-status-field {
  width: 64px !important;
  min-width: 64px !important;
  align-self: end !important;
  justify-self: end !important;
  display: grid !important;
  grid-template-rows: auto 36px !important;
  gap: 8px !important;
  align-items: start !important;
  justify-items: center !important;
}

.boxes-page .route-limits-status-field .route-inline-toggle {
  position: static !important;
  align-self: center !important;
  justify-self: center !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 28px !important;
  min-height: 28px !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-size: 0 !important;
  text-indent: -999px !important;
  transform: none !important;
}

.boxes-page .route-limits-status-field > span {
  width: 64px !important;
  text-align: center !important;
}

.boxes-page .route-node-editor-limits-grid input:disabled,
.boxes-page .route-node-editor-limits-grid .custom-select-disabled,
.boxes-page .box-cap-grid input:disabled,
.boxes-page .box-cap-grid .custom-select-disabled {
  opacity: 0.52 !important;
}

.boxes-page .route-node-editor-limits-grid > .rule-field:first-child {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

.boxes-page .route-node-editor-limits-grid .rule-field:first-child input {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding-inline: 8px !important;
  text-align: right !important;
}

.boxes-page .route-node-editor-limits-grid .route-delivery-toggle {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 10px !important;
  width: 260px !important;
  min-width: 0 !important;
  max-width: 260px !important;
  min-height: 42px !important;
  height: 42px !important;
  align-self: end !important;
  align-items: center !important;
  top: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.boxes-page .route-node-editor-limits-grid .route-delivery-toggle input {
  align-self: center !important;
  margin: 0 !important;
}

.boxes-page .route-node-editor-limits-grid .route-delivery-toggle > span {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.boxes-page .route-node-editor-limits-grid .route-delivery-toggle strong,
.boxes-page .route-node-editor-limits-grid .route-delivery-toggle small {
  overflow: hidden !important;
  line-height: 1.15 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.boxes-page .route-brand-modal-main-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(120px, 160px) minmax(84px, 100px) !important;
}

.boxes-page .route-brand-modal-limits-grid {
  grid-template-columns: 78px minmax(210px, 1fr) minmax(220px, 1.1fr) minmax(170px, 0.9fr) minmax(120px, 0.7fr) minmax(120px, 0.7fr) !important;
}

.boxes-page .route-brand-modal-limits-grid > .rule-field:first-child {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
}

.boxes-page .route-brand-modal-limits-grid > .rule-field:first-child input {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  padding-inline: 8px !important;
  text-align: right !important;
}

.boxes-page .route-condition-group-body {
  padding: 16px !important;
}

.boxes-page .route-parameter-list {
  display: grid !important;
  gap: 10px !important;
}

.boxes-page .route-parameter-row,
.boxes-page .route-folder-modal-body .route-parameter-row,
.boxes-page .route-brand-modal-body .route-parameter-row {
  display: grid !important;
  grid-template-columns: minmax(128px, 0.72fr) minmax(180px, 1fr) minmax(170px, 0.9fr) minmax(240px, 1.25fr) 132px 48px !important;
  align-items: start !important;
  gap: 10px !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 14px !important;
}

.boxes-page .route-parameter-row > *,
.boxes-page .route-rule-modal-body .route-parameter-row > * {
  min-width: 0 !important;
}

.boxes-page .route-parameter-row .rule-field {
  align-self: start !important;
  min-width: 0 !important;
}

.boxes-page .route-parameter-case,
.boxes-page .route-parameter-remove {
  align-self: start !important;
  width: 48px !important;
  height: 44px !important;
  min-width: 48px !important;
  min-height: 44px !important;
  margin: 25px 0 0 !important;
}

.boxes-page .route-parameter-case {
  width: 132px !important;
  min-width: 132px !important;
}

.boxes-page .route-node-editor-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  border-top: 1px solid color-mix(in srgb, var(--border) 76%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 94%, var(--surface-muted)) !important;
}

.boxes-page .route-node-editor-footer .btn-primary,
.boxes-page .route-node-editor-footer .btn-secondary {
  min-width: 128px !important;
  justify-content: center !important;
}

.boxes-page .route-parameter-value-picker {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: start !important;
  align-content: start !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.boxes-page .route-parameter-value-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-height: 104px !important;
  min-height: 0 !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 0 2px 2px 0 !important;
  scrollbar-width: thin !important;
}

.boxes-page .route-parameter-value-chips button {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  min-height: 30px !important;
}

.boxes-page .route-parameter-value-chips button span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.crm-select-menu-portal,
.crm-select-menu {
  z-index: 60000 !important;
  max-width: min(420px, 100vw - 20px) !important;
  overflow-x: hidden !important;
}

.crm-select-menu-portal .crm-select-option,
.crm-select-menu .crm-select-option {
  display: flex !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
  text-align: left !important;
}

.crm-select-menu-portal .crm-select-option-spacer,
.crm-select-menu .crm-select-option-spacer {
  display: none !important;
}

.crm-select-menu-portal .crm-select-option-label,
.crm-select-menu .crm-select-option-label {
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1600px) {
  .boxes-page .route-tree-grid-head,
  .boxes-page .route-tree-node-head {
    grid-template-columns: 34px 34px 36px 38px minmax(150px, 0.8fr) minmax(170px, 1fr) minmax(112px, auto) auto !important;
  }
  .boxes-page .route-tree-node-meta {
    max-width: 180px !important;
  }
  .boxes-page .route-brand-modal-limits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 1280px) {
  .boxes-page .route-tree-node {
    max-width: 100% !important;
    margin-left: 0 !important;
  }
  .boxes-page .route-tree-grid-head,
  .boxes-page .route-tree-node-head,
  .boxes-page .route-parameter-row,
  .boxes-page .route-folder-modal-body .route-parameter-row,
  .boxes-page .route-brand-modal-body .route-parameter-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .boxes-page .route-tree-children {
    padding-left: 14px !important;
  }
  .boxes-page .route-tree-actions,
  .boxes-page .route-tree-node-meta {
    justify-content: flex-start !important;
  }
  .boxes-page .route-brand-modal-main-grid,
  .boxes-page .route-brand-modal-limits-grid,
  .boxes-page .route-node-editor-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* Final active toggle alignment: keep switches visible, unframed, and at row end. */
.boxes-page .route-box-active-toggle {
  align-self: center !important;
  justify-self: end !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.boxes-page .route-box-active-toggle input {
  align-self: center !important;
  border: 0 !important;
  box-shadow: none !important;
}

.boxes-page .route-delivery-toggle,
.boxes-page .route-inline-toggle-field {
  align-self: center !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.boxes-page .route-builder-compact .rule-grid.rule-grid-base {
  grid-template-columns: minmax(420px, 1fr) max-content !important;
  align-items: end !important;
}

.boxes-page .route-builder-compact .rule-grid.rule-grid-base > .route-box-active-toggle {
  align-self: end !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}

.boxes-page .box-rotation-tools {
  display: inline-flex !important;
  align-items: center !important;
  align-self: center !important;
}

.boxes-page .box-rotation-tools .box-rotation-toggle {
  display: inline-grid !important;
  grid-template-columns: 42px auto !important;
  align-items: center !important;
  justify-content: end !important;
  justify-self: end !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  width: auto !important;
  min-width: 92px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-indent: 0 !important;
  white-space: nowrap !important;
}

.boxes-page .box-rotation-tools .box-rotation-toggle > span {
  width: 38px !important;
  height: 22px !important;
}

.boxes-page .box-rotation-tools .box-rotation-toggle > span::after {
  width: 16px !important;
  height: 16px !important;
}

.boxes-page .box-rotation-tools .box-rotation-toggle-on > span::after {
  transform: translateX(16px) !important;
}

/* Keep the distribution tree compact on desktop-width CRM workspaces. */
@media (min-width: 960px) and (max-width: 1280px) {
  .boxes-page .route-tree-grid-head,
  .boxes-page .route-tree-node-head {
    grid-template-columns: 34px 34px 36px 38px minmax(128px, 0.78fr) minmax(150px, 1fr) minmax(74px, auto) auto !important;
    align-items: center !important;
  }
  .boxes-page .route-tree-actions,
  .boxes-page .route-tree-node-meta {
    justify-content: flex-end !important;
  }
  .boxes-page .route-tree-children {
    padding-left: 26px !important;
  }
  .boxes-page .route-parameter-row,
  .boxes-page .route-folder-modal-body .route-parameter-row,
  .boxes-page .route-brand-modal-body .route-parameter-row {
    grid-template-columns: minmax(112px, 0.7fr) minmax(150px, 1fr) minmax(144px, 0.88fr) minmax(190px, 1.18fr) 112px 44px !important;
    align-items: start !important;
    gap: 8px !important;
  }
  .boxes-page .route-node-editor-limits-grid {
    grid-template-columns: 76px minmax(150px, 1fr) minmax(180px, 1fr) minmax(132px, 0.8fr) 96px 96px 56px !important;
    align-items: end !important;
  }
  .boxes-page .route-limits-status-field,
  .boxes-page .route-limits-status-field .route-inline-toggle {
    width: 56px !important;
    min-width: 56px !important;
  }
  .boxes-page .route-node-editor-limits-grid > .rule-field:first-child,
  .boxes-page .route-node-editor-limits-grid .rule-field:first-child input {
    width: 76px !important;
    min-width: 76px !important;
    max-width: 76px !important;
  }
  .boxes-page .route-node-editor-limits-grid .route-delivery-toggle {
    width: 220px !important;
    max-width: 220px !important;
  }
  .boxes-page .route-parameter-case {
    width: 112px !important;
    min-width: 112px !important;
  }
  .boxes-page .route-parameter-remove {
    width: 44px !important;
    min-width: 44px !important;
  }
}