.atmosphere-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  background: #071419;
  transition: opacity 280ms ease, visibility 280ms ease;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .atmosphere-background {
  opacity: 1;
  visibility: visible;
}

.atmosphere-background__video,
.atmosphere-background__overlay,
.atmosphere-background__warm-light,
.atmosphere-background__vignette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.atmosphere-background__video {
  object-fit: cover;
  object-position: center center;
  opacity: 0;
  transition: opacity 320ms ease;
}

.atmosphere-background[data-media-state="ready"] .atmosphere-background__video {
  opacity: 1;
}

.atmosphere-background[data-media-state="fallback"] .atmosphere-background__video,
.atmosphere-background[data-reduced-motion="true"] .atmosphere-background__video {
  display: none;
}

.atmosphere-background__overlay {
  background: rgba(3, 10, 14, 0.03);
}

.atmosphere-background__warm-light {
  background: transparent;
}

.atmosphere-background__vignette {
  background:
    linear-gradient(180deg, rgba(2, 8, 12, 0.05) 0, transparent 18%, transparent 78%, rgba(2, 8, 12, 0.05) 100%),
    radial-gradient(ellipse at center, transparent 58%, rgba(2, 8, 12, 0.04) 100%);
}

.atmosphere-toggle {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 152px;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  flex: 0 0 auto;
  width: 168px;
}

.atmosphere-toggle__button {
  min-width: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.atmosphere-toggle__button.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(23, 33, 43, 0.14);
}

.atmosphere-toggle__button:focus-visible {
  outline: 2px solid #d49a4a;
  outline-offset: 2px;
}

.atmosphere-background-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 3px 4px 3px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  flex: 0 0 auto;
}

.atmosphere-background-select[hidden] {
  display: none;
}

.atmosphere-background-select__caption {
  font-size: 10px;
  font-weight: 600;
}

.atmosphere-background-select__control {
  width: 132px;
  min-width: 0;
  height: 24px;
  padding: 0 24px 0 7px;
  border: 0;
  border-radius: 4px;
  background-color: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

.atmosphere-background-select__control:focus-visible {
  outline: 2px solid #d49a4a;
  outline-offset: 1px;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) {
  --surface-page: transparent;
  --surface-shell: rgba(8, 12, 8, 0.24);
  --surface-panel: rgba(8, 12, 8, 0.5);
  --surface-panel-strong: rgba(8, 12, 8, 0.24);
  --surface-card: rgba(8, 12, 8, 0.15);
  --surface-card-strong: rgba(8, 12, 8, 0.18);
  --surface-row: rgba(8, 12, 8, 0.30);
  --surface-row-hover: rgba(8, 12, 8, 0.6);
  --surface-input: rgba(8, 12, 8, 0.18);
  --surface-popover: rgba(8, 12, 8, 0.42);
  --surface-modal: rgba(13, 20, 16, 0.96);
  --border-subtle: rgba(205, 184, 139, 0.24);
  --border-glass: rgba(244, 240, 231, 0.12);
  --border-strong: rgba(211, 158, 78, 0.42);
  --text-primary: #f4f0e7;
  --text-secondary: #d3ccb9;
  --text-muted: #aaa895;
  --shadow-panel: 0 10px 22px rgba(2, 6, 4, 0.1), inset 0 1px 0 rgba(244, 240, 231, 0.1);
  --shadow-floating: 0 18px 42px rgba(2, 6, 4, 0.22);
  --backdrop-panel: blur(2px) saturate(104%);
  --backdrop-card: none;
  --button-surface: rgba(8, 12, 8, 0.26);
  --button-surface-hover: rgba(103, 111, 65, 0.24);
  --button-surface-pressed: rgba(8, 12, 8, 0.34);
  --button-border: rgba(244, 240, 231, 0.16);
  --button-border-hover: rgba(211, 158, 78, 0.46);
  --button-focus-ring: rgba(211, 158, 78, 0.34);
  --button-shadow: 0 8px 18px rgba(2, 6, 4, 0.14), inset 0 1px 0 rgba(244, 240, 231, 0.1);
  --button-shadow-hover: 0 10px 22px rgba(2, 6, 4, 0.18), 0 0 0 1px rgba(211, 158, 78, 0.18), inset 0 1px 0 rgba(244, 240, 231, 0.12);
  --button-shadow-active: 0 4px 12px rgba(2, 6, 4, 0.16), inset 0 1px 0 rgba(244, 240, 231, 0.08);
  --filter-surface: rgba(8, 12, 8, 0.34);
  --filter-border: var(--border-glass);
  --filter-shadow: 0 18px 42px rgba(2, 6, 4, 0.24), inset 0 1px 0 rgba(244, 240, 231, 0.08);
  --filter-active: rgba(188, 130, 57, 0.24);
  --bg: transparent;
  --surface: var(--surface-panel);
  --surface-soft: rgba(8, 12, 8, 0.14);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --muted-strong: var(--text-secondary);
  --border: var(--border-subtle);
  --accent: #d49a4a;
  --accent-soft: rgba(188, 130, 57, 0.17);
  --dark: rgba(8, 12, 8, 0.24);
  --shadow-card: var(--shadow-panel);
  color: var(--text-primary);
  background: transparent;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) > .clean-sidebar,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) > .clean-main {
  position: relative;
  z-index: 10;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-sidebar {
  background: rgba(8, 12, 8, 0.34);
  border-right: 1px solid var(--border-glass);
  backdrop-filter: blur(1px) saturate(104%);
  -webkit-backdrop-filter: blur(1px) saturate(104%);
  box-shadow: inset -1px 0 0 rgba(244, 240, 231, 0.05);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-menu-link {
  color: #d8d7ca;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-menu-link.active,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-menu-link:hover {
  background: rgba(103, 111, 65, 0.18);
  color: #fffaf0;
  box-shadow: inset 2px 0 #d49a4a;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-main,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-route-fullwidth .clean-main,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-route-requests .clean-main,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page {
  background: transparent;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-topbar {
  position: relative;
  z-index: 20;
  background: rgba(8, 12, 8, 0.22);
  border-color: var(--border-glass);
  color: var(--text-primary);
  backdrop-filter: blur(1px) saturate(104%);
  -webkit-backdrop-filter: blur(1px) saturate(104%);
  box-shadow: 0 8px 24px rgba(3, 7, 5, 0.14), inset 0 1px 0 rgba(244, 240, 231, 0.08);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-topbar small,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-auth-user__text small {
  color: var(--text-muted);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-auth-user,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-auth-logout,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-button,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .atmosphere-toggle,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .atmosphere-background-select {
  border-color: var(--button-border);
  background: var(--button-surface);
  color: var(--text-primary);
  backdrop-filter: var(--backdrop-card);
  -webkit-backdrop-filter: var(--backdrop-card);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .clean-button,
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
):not(.ol-control button) {
  border-color: var(--button-border);
  box-shadow: var(--button-shadow);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(.clean-button-secondary, .head-btn, .flt-date-btn, .flt-icon, .flt-btn-reset) {
  background: var(--button-surface);
  color: var(--text-primary);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(.clean-button-primary, .flt-btn-apply) {
  background: color-mix(in srgb, var(--accent) 34%, var(--button-surface));
  border-color: var(--button-border-hover);
  color: #fff6e4;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .clean-button,
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
):hover:not(:disabled):not([aria-disabled="true"]):not(.ol-control button) {
  border-color: var(--button-border-hover);
  background-color: var(--button-surface-hover);
  box-shadow: var(--button-shadow-hover);
  filter: none;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .clean-button,
  .head-btn,
  .btn-create-toggle,
  .flt-icon,
  .flt-btn-reset,
  .flt-btn-apply,
  .flt-date-btn,
  .seg-btn,
  .type-btn,
  .co-btn,
  .u-btn,
  .rs-btn,
  .drv-btn,
  .st-btn-primary,
  .st-btn-secondary,
  .planner-day-act-btn,
  .planner-confirm-btn,
  .planner-modal-btn,
  .planner-map-mode-btn,
  .request-object-add-btn,
  .request-object-remove-btn,
  .fl-act-btn,
  .journal-reset
):active:not(:disabled):not([aria-disabled="true"]):not(.ol-control button) {
  background-color: var(--button-surface-pressed);
  box-shadow: var(--button-shadow-active);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .atmosphere-toggle__button.is-active {
  background: rgba(110, 91, 55, 0.22);
  color: #fff6e4;
  box-shadow: inset 0 0 0 1px rgba(222, 169, 89, 0.35);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .dashboard-page,
  .clients-objects-page,
  .schedule-live-page,
  .planner-live-page,
  .dispatcher-live-page,
  .route-sheets-live-page,
  .users-live-page,
  .fleet-live-page,
  .journal-live-page,
  .settings-page,
  .clean-page[data-page-id="requests"]
) {
  --color-background-primary: var(--surface-card-strong);
  --color-background-secondary: rgb(8 12 8 / 20%);
  --color-background-tertiary: rgba(39, 48, 38, 0.16);
  --color-background-info: rgba(34, 69, 77, 0.24);
  --color-background-success: rgba(38, 70, 43, 0.22);
  --color-background-warning: rgba(88, 62, 28, 0.24);
  --color-background-danger: rgba(83, 37, 34, 0.24);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-muted);
  --color-text-info: #a9d8e7;
  --color-text-success: #b9d9aa;
  --color-text-warning: #f2c47f;
  --color-text-danger: #f0aaa4;
  --color-border-primary: var(--border-subtle);
  --color-border-secondary: var(--border-strong);
  --color-border-tertiary: rgba(205, 184, 139, 0.14);
  --color-border-info: rgba(125, 190, 213, 0.58);
  --color-border-success: rgba(144, 190, 116, 0.58);
  --color-border-warning: rgba(218, 161, 83, 0.64);
  --color-border-danger: rgba(217, 105, 96, 0.64);
  --surface: var(--surface-panel);
  --surface-soft: rgba(8, 12, 8, 0.14);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --border: var(--border-subtle);
  color: var(--text-primary);
  background: transparent !important;
}

/* Dispatcher owns a nested token scope, so it needs the atmosphere palette locally. */
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .dispatcher-live-page .dispatcher-page {
  --bg: transparent;
  --surface: var(--surface-panel);
  --surface-soft: rgba(8, 12, 8, 0.14);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --muted-strong: var(--text-secondary);
  --border: var(--border-subtle);
  --border-strong: var(--border-strong);
  --accent: #d49a4a;
  --accent-soft: rgba(188, 130, 57, 0.17);
  --dark: rgba(8, 12, 8, 0.24);
  --danger: #f0aaa4;
  --shadow-card: var(--shadow-panel);
  --color-background-primary: var(--surface-card-strong);
  --color-background-secondary: rgb(8 12 8 / 20%);
  --color-background-tertiary: rgba(39, 48, 38, 0.16);
  --color-background-info: rgba(34, 69, 77, 0.24);
  --color-background-success: rgba(38, 70, 43, 0.22);
  --color-background-warning: rgba(88, 62, 28, 0.24);
  --color-background-danger: rgba(83, 37, 34, 0.24);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-tertiary: var(--text-muted);
  --color-text-info: #a9d8e7;
  --color-text-success: #b9d9aa;
  --color-text-warning: #f2c47f;
  --color-text-danger: #f0aaa4;
  --color-border-primary: var(--border-subtle);
  --color-border-secondary: var(--border-strong);
  --color-border-tertiary: rgba(205, 184, 139, 0.14);
  --color-border-info: rgba(125, 190, 213, 0.58);
  --color-border-success: rgba(144, 190, 116, 0.58);
  --color-border-warning: rgba(218, 161, 83, 0.64);
  --color-border-danger: rgba(217, 105, 96, 0.64);
  color: var(--text-primary);
  background: transparent;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-topbar h1 {
  font-size: 22px;
  font-weight: 750;
  line-height: 1.2;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .crm-card__title,
  .exp-head-title,
  .sch-exp-title,
  .u-exp-title,
  .fl-exp-section-title
) {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .crm-card__id,
  .exp-head-id,
  .sch-exp-id
) {
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .list-table,
  .dispatch-table,
  .co-table,
  .u-table,
  .fl-table,
  .rs-table,
  .journal-table
) th {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  vertical-align: middle;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .list-table,
  .dispatch-table,
  .co-table,
  .u-table,
  .fl-table,
  .rs-table,
  .journal-table
) td {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  vertical-align: middle;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .request-number {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 750;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .list-row.open > td {
  color: #fffaf0;
  font-size: 13px;
  font-weight: 550;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .list-row.open td:nth-child(4) {
  font-size: 14px;
  font-weight: 700;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .list-row.open td .client-sub {
  color: #efe8d8;
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(2, 6, 4, 0.45);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .date-open .mgr-initials {
  margin-top: -10px;
  padding-left: 8px;
  color: var(--text-primary);
  font-size: 64px;
  font-weight: 100;
  line-height: 1;
  opacity: 0.75;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .dp-field label {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 650;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .drv-name {
  font-size: 15px;
  font-weight: 700;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .dispatcher-page .dispatch-table th {
  font-size: 12px;
  font-weight: 650;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .dispatcher-page .dispatch-table td {
  font-size: 13px;
  font-weight: 500;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .dispatcher-page .dispatch-cell-date strong {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 750;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .dispatcher-page .dispatch-cell-date small {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .dispatcher-page .dispatch-row--dimmed td {
  opacity: 0.56;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .dispatcher-page .dispatch-row--dimmed:hover td {
  background: var(--surface-row-hover);
  opacity: 0.8;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .list-table,
  .dispatch-table,
  .co-table,
  .u-table,
  .fl-table,
  .rs-table,
  .journal-table,
  .planner-table
) {
  background: transparent;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .list-table thead th,
  .dispatch-table thead th,
  .co-table thead th,
  .u-table thead th,
  .fl-table thead th,
  .rs-table thead th,
  .journal-table-head
) {
  border-color: var(--border-glass);
  background: rgba(8, 12, 8, 0.12);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .list-row,
  .dispatch-row,
  .co-row,
  .u-row,
  .fl-row,
  .rs-row,
  .journal-table-row
) > :is(td, div),
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(.journal-table-row) {
  border-color: rgba(205, 184, 139, 0.13);
  background: var(--surface-row);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .list-row:hover,
  .dispatch-row:hover,
  .co-row:hover,
  .u-row:hover,
  .fl-row:hover,
  .rs-row:hover,
  .journal-table-row:hover
) > :is(td, div),
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .journal-table-row:hover {
  background: var(--surface-row-hover);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] .list-row.open > td,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .u-row--expanded,
  .fl-row--expanded,
  .journal-table-row.selected
) > :is(td, div) {
  background: rgba(20, 40, 24, 0.24);
  border-color: var(--border-glass);
  backdrop-filter: var(--backdrop-card);
  -webkit-backdrop-filter: var(--backdrop-card);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] :is(
  [data-st="new"],
  [data-st="sent_to_schedule"]
) {
  --row-bg: var(--color-background-info);
  --row-border: var(--color-border-info);
  --row-dash: rgba(125, 190, 213, 0.42);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] :is(
  [data-st="disp"],
  [data-st="awaiting_confirm"],
  [data-st="pause"]
) {
  --row-bg: var(--color-background-warning);
  --row-border: var(--color-border-warning);
  --row-dash: rgba(218, 161, 83, 0.44);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] [data-st="active"] {
  --row-bg: var(--color-background-success);
  --row-border: var(--color-border-success);
  --row-dash: rgba(144, 190, 116, 0.42);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] [data-st="cancel"] {
  --row-bg: var(--color-background-danger);
  --row-border: var(--color-border-danger);
  --row-dash: rgba(217, 105, 96, 0.42);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-page[data-page-id="requests"] [data-st="done"] {
  --row-bg: var(--color-background-tertiary);
  --row-border: var(--color-border-secondary);
  --row-dash: rgba(205, 184, 139, 0.3);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .list-row.open,
  .u-row--expanded,
  .fl-row--expanded,
  .journal-table-row.selected
) > td {
  color: var(--color-text-primary);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .expand-content,
  .sch-expand-layout,
  .journal-event-expanded,
  .planner-block-dropdown,
  .planner-obj-detail
),
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .u-row-expanded > td,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .fl-row-expanded > td {
  border-color: var(--border-glass);
  background-color: rgba(8, 12, 8, 0.18);
  color: var(--color-text-primary);
  backdrop-filter: var(--backdrop-card);
  -webkit-backdrop-filter: var(--backdrop-card);
  box-shadow: inset 0 1px 0 rgba(244, 240, 231, 0.06);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .exp-block,
  .sch-exp-block,
  .u-exp-card,
  .fl-exp-card,
  .journal-expanded-meta-item,
  .journal-change-block
) {
  border-color: var(--border-subtle);
  background-color: var(--surface-card);
  color: var(--text-primary);
  backdrop-filter: var(--backdrop-card);
  -webkit-backdrop-filter: var(--backdrop-card);
  box-shadow: inset 0 1px 0 rgba(244, 240, 231, 0.06);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .card,
  .clean-card,
  .db-card,
  .co-card,
  .u-content,
  .u-toolbar,
  .u-tab-bar,
  .sch-panel,
  .dispatch-panel,
  .planner-panel,
  .rs-panel,
  .fl-panel,
  .journal-card,
  .settings-card,
  [class$="-card"],
  [class*="-card "]
) {
  border-color: var(--border-glass);
  background-color: var(--surface-panel);
  box-shadow: var(--shadow-panel);
  backdrop-filter: var(--backdrop-panel);
  -webkit-backdrop-filter: var(--backdrop-panel);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .filter-row,
  .filters-row,
  .filter-panel,
  .co-filter-panel,
  .co-toolbar,
  .journal-filters-body,
  .planner-controls,
  .planner-map-tools,
  .dispatch-filters,
  .rs-toolbar,
  .fl-filter-row
) {
  border-color: var(--border-glass);
  background: rgba(8, 12, 8, 0.16);
  backdrop-filter: var(--backdrop-card);
  -webkit-backdrop-filter: var(--backdrop-card);
  box-shadow: inset 0 1px 0 rgba(244, 240, 231, 0.06);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .driver-schedule-card,
  .driver-schedule-panel,
  .planner-map-panel,
  .map-card,
  .map-panel,
  .confirm-card,
  .confirmation-card,
  .request-confirmation-card
) {
  border-color: var(--border-glass);
  background-color: rgba(8, 12, 8, 0.22);
  backdrop-filter: var(--backdrop-panel);
  -webkit-backdrop-filter: var(--backdrop-panel);
  box-shadow: var(--shadow-panel);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(input, select, textarea) {
  border-color: var(--border-glass);
  background-color: var(--surface-input);
  color: var(--text-primary);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(244, 240, 231, 0.06);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(input, textarea)::placeholder {
  color: var(--text-muted);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(input, select, textarea, button, a):focus-visible {
  outline: 2px solid #d49a4a;
  outline-offset: 2px;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .co-flt-drop,
  .co-search-suggest,
  .filter-popover,
  .dispatch-filter-popover,
  .flt-pop,
  .flt-popover,
  [class*="popover"],
  [class*="dropdown"]
) {
  z-index: 30;
  border-color: var(--filter-border);
  background-color: var(--filter-surface);
  color: var(--text-primary);
  box-shadow: var(--filter-shadow);
  backdrop-filter: blur(2px) saturate(104%);
  -webkit-backdrop-filter: blur(2px) saturate(104%);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .co-flt-drop,
  .co-search-suggest,
  .filter-popover,
  .dispatch-filter-popover,
  .flt-pop,
  .flt-popover,
  [class*="popover"],
  [class*="dropdown"]
) :is(input, select, textarea) {
  background-color: var(--surface-input);
  border-color: var(--border-glass);
  color: var(--text-primary);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(.flt-date-btn.on, .flt-chip.active, .active-filter, .filter-chip.is-active) {
  background: var(--filter-active);
  border-color: var(--button-border-hover);
  color: #fff6e4;
}

html[data-ui-mode="atmosphere"] #flt-pop {
  border-color: rgba(219, 166, 83, .30);
  background: rgba(26, 28, 16, .92);
  color: #fff7e6;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 210, 124, .08);
  backdrop-filter: blur(8px) saturate(112%);
  -webkit-backdrop-filter: blur(8px) saturate(112%);
}

html[data-ui-mode="atmosphere"] #flt-pop .flt-pop-foot {
  border-top-color: rgba(219, 166, 83, .22);
  background: rgba(18, 20, 12, .58);
}

html[data-ui-mode="atmosphere"] #flt-pop .flt-search,
html[data-ui-mode="atmosphere"] #flt-pop .flt-range-field input {
  border-color: rgba(219, 166, 83, .34);
  background: rgba(255, 248, 224, .08);
  color: #fff7e6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

html[data-ui-mode="atmosphere"] #flt-pop .flt-search::placeholder {
  color: rgba(255, 247, 230, .54);
}

html[data-ui-mode="atmosphere"] #flt-pop :is(.flt-list-item, .flt-date-btn, .flt-btn-reset, .flt-hint, .flt-range-field label, .flt-sep) {
  color: rgba(255, 247, 230, .72);
}

html[data-ui-mode="atmosphere"] #flt-pop :is(.flt-list-item:hover, .flt-date-btn:hover) {
  background: rgba(255, 208, 116, .12);
  color: #fff7e6;
}

html[data-ui-mode="atmosphere"] #flt-pop :is(.flt-list-item.on, .flt-date-btn.on) {
  border-color: rgba(255, 201, 104, .44);
  background: rgba(219, 151, 61, .24);
  color: #fff6e4;
}

html[data-ui-mode="atmosphere"] #flt-pop .flt-btn-apply {
  border-color: rgba(255, 201, 104, .48);
  background: rgba(202, 137, 45, .30);
  color: #fff6e4;
}

html[data-ui-mode="atmosphere"] #flt-pop .flt-btn-apply:hover {
  background: rgba(219, 151, 61, .38);
}

html[data-ui-mode="atmosphere"] #flt-pop .flt-btn-reset:hover {
  color: #fff7e6;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .co-flt-drop,
  .co-search-suggest,
  .filter-popover,
  .dispatch-filter-popover,
  .flt-pop,
  .flt-popover,
  [class*="popover"],
  [class*="dropdown"]
) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .co-flt-drop,
  .co-search-suggest,
  .filter-popover,
  .dispatch-filter-popover,
  .flt-pop,
  .flt-popover,
  [class*="popover"],
  [class*="dropdown"]
) ::-webkit-scrollbar-thumb {
  background: rgba(211, 158, 78, 0.32);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .u-modal,
  .co-modal,
  .sch-modal,
  .rs-modal,
  [role="dialog"]
) {
  z-index: 50;
  border-color: var(--border-strong);
  background-color: var(--surface-modal);
  color: var(--text-primary);
  box-shadow: var(--shadow-floating);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(
  .u-modal-overlay,
  .co-modal-overlay,
  .sch-modal-overlay,
  .rs-modal-overlay
) {
  z-index: 40;
  background: rgba(3, 7, 5, 0.2);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(.ol-viewport, .ol-layer, .ol-layer canvas, .ol-layer img) {
  backdrop-filter: none;
  filter: none;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) :is(.ol-control button, .ol-zoom button, .ol-attribution button) {
  background: initial;
  border-color: initial;
  box-shadow: initial;
  transform: none;
  transition: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  filter: none;
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-route-loader-block,
#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]) .clean-block-loader {
  border-color: var(--border-subtle);
  background: var(--surface-panel);
}

@media (max-aspect-ratio: 4 / 3) {
  .atmosphere-background__video {
    object-position: 52% center;
  }
}

@media (max-width: 900px) {
  .atmosphere-background__video {
    object-position: 57% center;
  }

  .atmosphere-toggle {
    width: 152px;
  }

  .atmosphere-background-select__control {
    width: 118px;
  }
}

@media (max-width: 640px) {
  .atmosphere-background__video {
    object-position: 61% center;
  }

  .atmosphere-toggle {
    width: 144px;
  }

  .atmosphere-toggle__button {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere-background,
  .atmosphere-background__video {
    transition: none;
  }
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root .clean-login-page {
  position: relative;
  z-index: 10;
  background: transparent;
  color: var(--text-primary);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root .clean-login-panel {
  border-color: var(--border-glass);
  background: rgba(8, 12, 8, 0.56);
  box-shadow: var(--shadow-floating), inset 0 1px 0 rgba(244, 240, 231, 0.1);
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root .clean-login-brand {
  border-color: var(--border-glass);
  background: rgba(8, 12, 8, 0.24);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root :is(.clean-login-brand h1, .clean-login-form h2) {
  color: var(--text-primary);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root :is(.clean-login-brand p, .clean-login-field) {
  color: var(--text-secondary);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root .clean-login-field input {
  border-color: var(--border-glass);
  background: rgba(8, 12, 8, 0.34);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 rgba(244, 240, 231, 0.04);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root .clean-login-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--button-focus-ring);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root .clean-login-submit {
  border-color: var(--button-border-hover);
  background: rgba(188, 130, 57, 0.28);
  color: #fffaf0;
  box-shadow: var(--button-shadow);
}

#cleanCrmApp:is([data-ui-mode="atmosphere"], [data-ui-mode="watersphere"]).clean-login-root .clean-login-submit:hover:not(:disabled) {
  background: rgba(188, 130, 57, 0.38);
  box-shadow: var(--button-shadow-hover);
}