* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #24272d;
  color: #f3f4f6;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

button,
input,
select,
textarea {
  font-family: Arial, sans-serif;
}

.app {
  position: fixed;
  inset: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #24272d;
  border: 1px solid #4b5563;
  border-radius: 14px;
  box-shadow: 0 25px 80px rgba(0,0,0,.55);
}

.topbar {
  min-height: 52px;
  padding: 8px 12px;
  background: #2c3037;
  border-bottom: 1px solid #4b5563;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 14px;
  font-weight: 900;
  color: #f9fafb;
}

.subtitle {
  margin-top: 3px;
  color: #9ca3af;
  font-size: 12px;
}

.top-actions {
  display: flex;
  gap: 10px;
}

.layout {
  flex: 1;
  min-height: 0;
  padding: 14px;
  display: grid;
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}

.left,
.right {
  min-height: 0;
}

.right {
  display: grid;
  gap: 14px;
  align-content: start;
  overflow: auto;
  padding-right: 2px;
}

.card {
  background: #2c3037;
  border: 1px solid #4b5563;
  border-radius: 12px;
  padding: 12px;
}

.full-height {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

h2 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
  color: #f9fafb;
}

.muted {
  color: #d1d5db;
  font-size: 12px;
  font-weight: 900;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.routes-list {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #1b1d22;
  border: 1px solid #4b5563;
  border-radius: 10px;
  padding: 8px;
}

.route-item {
  padding: 5px 10px;
  border: 1px solid #3f4650;
  background: #252930;
  border-radius: 10px;
  margin-bottom: 8px;
}

.route-item:hover {
  border-color: #8b949e;
  background: #2f343c;
}

.routes-list-paging {
  display: grid;
  gap: 8px;
  padding: 10px 0 2px;
}

.routes-list-paging-status {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 800;
}

.routes-show-more-btn,
.routes-show-more-btn:hover,
.routes-show-more-btn:active,
.routes-show-more-btn:focus,
.routes-show-more-btn:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}

body.theme-light .routes-list-paging-status {
  color: #526174 !important;
}

body.theme-light #routesShowMoreBtn.routes-show-more-btn {
  background: #dbe3ec !important;
  background-color: #dbe3ec !important;
  color: #172033 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}

body.theme-light #routesShowMoreBtn.routes-show-more-btn:hover {
  background: #d4dde8 !important;
  background-color: #d4dde8 !important;
  color: #172033 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}

body.theme-light #routesShowMoreBtn.routes-show-more-btn:active {
  background: #ccd7e4 !important;
  background-color: #ccd7e4 !important;
  color: #172033 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}

body.theme-light #routesShowMoreBtn.routes-show-more-btn:focus,
body.theme-light #routesShowMoreBtn.routes-show-more-btn:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}

body.theme-light #routesShowAllBtn.routes-show-more-btn {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  color: #1e293b !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 18px !important;
}

body.theme-light #routesShowAllBtn.routes-show-more-btn:hover {
  background: #dbe4ee !important;
  background-color: #dbe4ee !important;
  color: #1e293b !important;
}

body.theme-light #routesShowAllBtn.routes-show-more-btn:active {
  background: #d3deea !important;
  background-color: #d3deea !important;
  color: #1e293b !important;
}

body.theme-light #routesShowAllBtn.routes-show-more-btn:focus,
body.theme-light #routesShowAllBtn.routes-show-more-btn:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.route-title {
  color: #f9fafb;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.route-meta {
  color: #9ca3af;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 4px;
  word-break: break-all;
  font-family: monospace;
}

.route-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.route-status-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  flex: 0 0 auto;
  background: currentColor;
}

.route-status-active {
  color: #22c55e;
}

.route-status-active .route-status-dot {
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.52);
}

.route-status-inactive {
  color: #ef4444;
}

.route-status-inactive .route-status-dot {
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.48);
}

.route-changes {
  margin-top: 4px;
  padding: 2px 8px;
  background: #1f2329;
  border: 1px solid #3f4650;
  border-radius: 8px;
}

.change-line {
  color: #e5e7eb;
  font-size: 11px;
  line-height: 1.4;
  margin-bottom: 5px;
}

.change-line b {
  color: #facc15;
}

.tabs,
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button {
  padding: 9px 12px;
  border: 1px solid #626b76;
  border-radius: 8px;
  background: #454b55;
  color: #f3f4f6;
  cursor: pointer;
  font-weight: 800;
  font-size: 13px;
}

button:hover {
  background: #565f6b;
}

button:disabled {
  opacity: .55;
  cursor: not-allowed;
}

button.active,
.tab.active {
  background: #5b6470;
  border-color: #8b949e;
}

button.danger {
  background: #6b3f3f;
  border-color: #8f5555;
}

label {
  display: block;
  color: #d1d5db;
  font-size: 12px;
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  margin-top: 5px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #1f2329;
  color: #f3f4f6;
  border: 1px solid #5b6470;
  outline: none;
  font-size: 13px;
}

textarea {
  min-height: 130px;
  resize: vertical;
  line-height: 1.45;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #a3aab3;
  box-shadow: 0 0 0 2px rgba(163,170,179,.22);
}

option {
  background: #1f2329;
  color: #f3f4f6;
}

.grid {
  display: grid;
  gap: 10px;
}

.grid.two {
  grid-template-columns: 1fr 1fr;
}

.grid.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.field-block {
  margin-top: 10px;
}

.filter-exclusion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.filter-exclusion-chips:empty { display: none; }

.filter-exclusion-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 7px 5px 9px;
  border: 0;
  outline: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  box-shadow: none;
  color: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
}

.filter-exclusion-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-exclusion-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: inherit;
  font: 700 17px/1 system-ui;
  cursor: pointer;
  opacity: .72;
}

.filter-exclusion-chip-remove:hover {
  background: rgba(127,127,127,.18);
  opacity: 1;
}

body.theme-light .filter-exclusion-chip {
  border: 0;
  outline: 0;
  background: #eef2f7;
  box-shadow: none;
  color: #172033;
}

@media (max-width: 980px) {
  .filter-exclusion-chips { gap: 6px; }
  .filter-exclusion-chip {
    max-width: 100%;
    padding: 5px 6px 5px 8px;
    font-size: 12px;
  }
}

.hidden {
  display: none !important;
}

.action-box,
.tab-content {
  display: none;
  margin-top: 10px;
}

.action-box.active,
.tab-content.active {
  display: block;
}

.warning {
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.45;
  background: #3a352d;
  border: 1px solid #6b5f48;
  padding: 10px;
  border-radius: 8px;
  margin-top: 10px;
}

.log {
  height: 210px;
  min-height: 210px;
  max-height: 210px;
  overflow: auto;
  background: #1b1d22;
  border: 1px solid #4b5563;
  border-radius: 10px;
  padding: 8px;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.45;
}

.log div {
  font-family: monospace;
  word-break: break-word;
  margin-bottom: 5px;
}

.log-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.log-controls button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.log-status {
  color: #9ca3af;
  font-size: 12px;
  font-weight: 800;
}

body.theme-light .log-controls button {
  background: #dbe3ec !important;
  background-color: #dbe3ec !important;
  color: #172033 !important;
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

body.theme-light .log-controls button:hover {
  background: #d4dde8 !important;
  background-color: #d4dde8 !important;
  color: #172033 !important;
}

body.theme-light .log-controls button:active {
  background: #ccd7e4 !important;
  background-color: #ccd7e4 !important;
  color: #172033 !important;
}

body.theme-light .log-controls button:focus,
body.theme-light .log-controls button:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

body.theme-light .log-status {
  color: #526174 !important;
}

.process-errors {
  margin-bottom: 10px;
  background: #2b2426;
  border: 1px solid #7f4b4b;
  border-left: 4px solid #ff8a8a;
  border-radius: 10px;
  padding: 10px;
}

.process-errors-title {
  color: #ffd1d1;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 8px;
}

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

.process-error-item {
  background: rgba(17, 24, 39, .38);
  border: 1px solid rgba(255, 138, 138, .35);
  border-radius: 8px;
  padding: 8px;
  color: #f3f4f6;
  font-size: 12px;
  line-height: 1.45;
}

.process-error-route {
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 4px;
}

.process-error-meta,
.process-error-message {
  color: #f5c2c2;
  font-family: monospace;
  word-break: break-word;
}

.process-error-message {
  margin-top: 4px;
}

@media (max-width: 980px) {
  .app {
    inset: 6px;
  }

  .layout {
    grid-template-columns: 1fr;
    overflow: auto;
  }

  .right {
    overflow: visible;
  }

  .left {
    height: 520px;
    min-height: 520px;
  }

  .grid.two,
  .grid.three {
    grid-template-columns: 1fr;
  }
}


.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-box {
  width: 560px;
  max-width: calc(100vw - 40px);
  background: #2c3037;
  border: 1px solid #626b76;
  border-radius: 14px;
  box-shadow: 0 25px 80px rgba(0,0,0,.6);
  padding: 16px;
}

.modal-title {
  color: #f9fafb;
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 8px;
}

.modal-text {
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
  background: #30343b;
  border: 1px solid #555e69;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.modal-warning {
  color: #e5e7eb;
  font-size: 12px;
  line-height: 1.45;
  background: #3a352d;
  border: 1px solid #6b5f48;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 12px;
}

.modal-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.modal-save {
  background: #56505f;
  border-color: #7a728a;
}

.modal-continue {
  background: #6b3f3f;
  border-color: #8f5555;
}

.modal-cancel {
  background: #454b55;
  border-color: #626b76;
}






.preview-refresh {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: none;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #c9ced6;
  font-size: 26px;
  line-height: 1;
  font-weight: 300;
}

.preview-refresh:hover {
  background: transparent;
  border: none;
  color: #ffffff;
  transform: rotate(18deg);
}

/* CLEAN SIMPLE: блок инструкций внутри основных действий */
.instructions-inline-box {
  margin-top: 12px !important;
}

/* CLEAN: кнопка применения под инструкциями */
.apply-under-instructions {
  margin-top: 12px !important;
  display: inline-flex !important;
}

/* MOBILE ONLY: make routes list block 30% shorter */
@media (max-width: 980px) {
  .left {
    height: 364px !important;
    min-height: 364px !important;
  }

  .left .card.full-height,
  .left .full-height {
    height: 100% !important;
    min-height: 0 !important;
  }

  #routesList,
  .routes-list {
    height: 364px !important;
    min-height: 0 !important;
    max-height: 364px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* UI FIX: move apply button slightly lower */
#applyBtn {
  margin-top: 12px !important;
}

/* UI FIX: smaller gap between filter and actions blocks */
#filterCard {
  margin-bottom: 0 !important;
}

.tab-content[data-content="main"] {
  margin-top: 0 !important;
}

.tab-content[data-content="main"] > .card:first-child {
  margin-top: 0 !important;
}




/* UI FIX: bigger spacing between Settings cards */
.tab-content[data-content="settings"],
.tab-content[data-content="settings"].active {
  gap: 12px !important;
  row-gap: 12px !important;
}

.tab-content[data-content="settings"] > section.card,
.tab-content[data-content="settings"] > .card {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.tab-content[data-content="settings"] > section.card + section.card,
.tab-content[data-content="settings"] > .card + .card {
  margin-top: 12px !important;
}

/* UI FIX: lift only Settings tab content */
@media (min-width: 981px) {
  .tab-content[data-content="settings"] {
    transform: translateY(-10px) !important;
  }
}

/* SETTINGS ONLY: adapt inner layout before global mobile breakpoint */
@media (min-width: 981px) and (max-width: 1180px) {
  .layout:has(.tab-content[data-content="settings"].active) .right,
  section.tab-content[data-content="settings"],
  section.tab-content[data-content="settings"] > section.card,
  section.tab-content[data-content="settings"] > .card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  section.tab-content[data-content="settings"] .grid.two,
  section.tab-content[data-content="settings"] .grid.three,
  section.tab-content[data-content="settings"] #addNewSiteBlock [style*="grid-template-columns"],
  section.tab-content[data-content="settings"] #connectedSitesBlock .connected-site-row {
    grid-template-columns: 1fr !important;
  }

  section.tab-content[data-content="settings"] label,
  section.tab-content[data-content="settings"] input,
  section.tab-content[data-content="settings"] select,
  section.tab-content[data-content="settings"] textarea,
  section.tab-content[data-content="settings"] #logBox,
  section.tab-content[data-content="settings"] .log,
  section.tab-content[data-content="settings"] .process-errors,
  section.tab-content[data-content="settings"] #addNewSiteBlock,
  section.tab-content[data-content="settings"] #connectedSitesBlock,
  section.tab-content[data-content="settings"] #connectedSitesBlock .connected-site-row,
  section.tab-content[data-content="settings"] #connectedSitesBlock .connected-site-row * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  section.tab-content[data-content="settings"] #logBox,
  section.tab-content[data-content="settings"] .log {
    width: 100% !important;
    overflow: auto !important;
  }

  section.tab-content[data-content="settings"] #connectedSitesBlock .connected-site-row * {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* MOBILE ONLY: hide routes list block on Settings page */
@media (max-width: 980px) {
  .layout:has(.tab-content[data-content="settings"].active) .left {
    display: none !important;
  }
}

/* MOBILE ONLY: Settings top gap same as main page */
@media (max-width: 980px) {
  .layout:has(.tab-content[data-content="settings"].active) .right {
    margin-top: 0 !important;
  }

  .layout:has(.tab-content[data-content="settings"].active) .tab-content[data-content="settings"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* MOBILE ONLY: remove top bar background, leave only burger icon */
@media (max-width: 980px) {
  .topbar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 48px !important;
    height: 48px !important;
  }

  .auth-menu-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .auth-menu-btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/* MOBILE ONLY: reduce gap between burger and first block */
@media (max-width: 980px) {
  .topbar {
    height: 36px !important;
    min-height: 36px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .auth-menu-wrap {
    top: 8px !important;
  }

  .layout {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  .right,
  .left {
    margin-top: 0 !important;
  }
}

/* DESKTOP ONLY: remove top bar background, leave only burger icon */
@media (min-width: 981px) {
  .topbar {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .auth-menu-wrap {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .auth-menu-btn {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/* DESKTOP ONLY: reduce gap between burger and main blocks */
@media (min-width: 981px) {
  .topbar {
    height: 44px !important;
    min-height: 44px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .auth-menu-wrap {
    top: 10px !important;
  }

  .layout {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* UI COLOR: slightly darker page background */
html,
body {
  background: #151922 !important;
}

.app {
  background: #151922 !important;
}

/* UI COLOR: burger menu same darker background */
.auth-menu,
.auth-menu-panel,
.auth-dropdown,
#authMenu,
#authMenuPanel {
  background: #151922 !important;
}

.auth-menu-wrap .auth-menu,
.auth-menu-wrap .auth-menu-panel,
.auth-menu-wrap [role="menu"] {
  background: #151922 !important;
}

/* UI FIX: remove red background from logout menu item */
#logoutBtn,
.logout-btn,
.auth-logout,
button[data-action="logout"],
.auth-menu button:last-child,
.auth-menu-wrap button:last-child {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #ffb4b4 !important;
}

#logoutBtn:hover,
.logout-btn:hover,
.auth-logout:hover,
button[data-action="logout"]:hover,
.auth-menu button:last-child:hover,
.auth-menu-wrap button:last-child:hover {
  background: rgba(255,255,255,0.06) !important;
  background-color: rgba(255,255,255,0.06) !important;
}

/* UI COLOR: blue apply button */
#applyBtn {
  background: #315f8f !important;
  border-color: #4f86bd !important;
  color: #ffffff !important;
}

#applyBtn:hover {
  background: #3b73aa !important;
  border-color: #6aa2d8 !important;
}

/* UI COLOR: deeper blue apply button */
#applyBtn {
  background: #1f3f66 !important;
  border-color: #355f8f !important;
  color: #ffffff !important;
}

#applyBtn:hover {
  background: #294f7d !important;
  border-color: #4778ad !important;
}

/* UI COLOR: Facebook blue apply button */
#applyBtn {
  background: #1877F2 !important;
  border-color: #3b8cff !important;
  color: #ffffff !important;
}

#applyBtn:hover {
  background: #166fe5 !important;
  border-color: #5ca0ff !important;
}

/* THEME: light/day mode */
body.theme-light,
html:has(body.theme-light) {
  background: #eef2f7 !important;
  color: #172033 !important;
}

body.theme-light .app {
  background: #eef2f7 !important;
}

body.theme-light .card,
body.theme-light .topbar,
body.theme-light .routes-list,
body.theme-light .log,
body.theme-light .auth-menu,
body.theme-light .auth-menu-panel {
  background: #ffffff !important;
  color: #172033 !important;
  border-color: #c8d1df !important;
}

body.theme-light .process-errors {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
  border-left-color: #dc2626 !important;
}

body.theme-light .process-errors-title {
  color: #991b1b !important;
}

body.theme-light .process-error-item {
  background: #ffffff !important;
  border-color: #fecdd3 !important;
  color: #111827 !important;
}

body.theme-light .process-error-route {
  color: #111827 !important;
}

body.theme-light .process-error-meta,
body.theme-light .process-error-message {
  color: #991b1b !important;
}

body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light label,
body.theme-light .section-head,
body.theme-light .route-title {
  color: #172033 !important;
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea {
  background: #f8fafc !important;
  color: #172033 !important;
  border-color: #b8c2d2 !important;
}

body.theme-light input::placeholder,
body.theme-light textarea::placeholder {
  color: #7b8797 !important;
}

body.theme-light button {
  color: #172033;
}

body.theme-light #applyBtn {
  background: #1877F2 !important;
  border-color: #3b8cff !important;
  color: #ffffff !important;
}

body.theme-light .danger,
body.theme-light #restoreBackupBtn {
  background: #f1d6d6 !important;
  border-color: #d69b9b !important;
  color: #7a2f2f !important;
}

.theme-toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.theme-toggle-title {
  font-weight: 800;
  font-size: 18px;
}

.theme-toggle-subtitle {
  opacity: 0.75;
  margin-top: 4px;
}

#themeToggleBtn {
  min-width: 170px;
}

/* UI THEME: day/night switch */
.theme-toggle-card {
  align-items: center !important;
}

.theme-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  cursor: pointer !important;
  user-select: none !important;
}

.theme-switch input {
  display: none !important;
}

.theme-switch-label {
  font-weight: 800 !important;
  font-size: 15px !important;
  color: inherit !important;
  opacity: 0.85 !important;
}

.theme-switch-slider {
  position: relative !important;
  width: 74px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: #101827 !important;
  border: 1px solid #526174 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04) !important;
  transition: 0.2s ease !important;
}

.theme-switch-slider::before {
  content: "" !important;
  position: absolute !important;
  width: 30px !important;
  height: 30px !important;
  left: 4px !important;
  top: 3px !important;
  border-radius: 50% !important;
  background: #e5e7eb !important;
  transition: 0.2s ease !important;
}

.theme-switch input:checked + .theme-switch-slider {
  background: #1877F2 !important;
  border-color: #3b8cff !important;
}

.theme-switch input:checked + .theme-switch-slider::before {
  transform: translateX(34px) !important;
  background: #ffffff !important;
}

body.theme-light .theme-switch-slider {
  background: #1877F2 !important;
  border-color: #3b8cff !important;
}

@media (max-width: 980px) {
  .theme-toggle-card {
    display: block !important;
  }

  .theme-switch {
    margin-top: 14px !important;
  }
}

/* UI THEME: make day/night switch 40% smaller */
.theme-switch {
  gap: 7px !important;
}

.theme-switch-label {
  font-size: 13px !important;
}

.theme-switch-slider {
  width: 44px !important;
  height: 23px !important;
}

.theme-switch-slider::before {
  width: 18px !important;
  height: 18px !important;
  left: 3px !important;
  top: 2px !important;
}

.theme-switch input:checked + .theme-switch-slider::before {
  transform: translateX(20px) !important;
}

/* UI THEME: moon/sun icons for theme switch */
.theme-switch-label.theme-icon {
  font-size: 16px !important;
  line-height: 1 !important;
  width: 20px !important;
  text-align: center !important;
  opacity: 0.95 !important;
}

/* UI THEME: leave only switch, make title same as card headers */
.theme-toggle-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  color: inherit !important;
}

.theme-toggle-subtitle {
  display: none !important;
}

.theme-switch-label,
.theme-switch-label.theme-icon {
  display: none !important;
}

.theme-switch {
  gap: 0 !important;
}

/* UI THEME: theme title same size as other card headers */
.theme-toggle-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* UI THEME: smaller theme title */
.theme-toggle-title {
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* UI THEME: even smaller theme title */
.theme-toggle-title {
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* UI THEME: theme title 16px */
.theme-toggle-title {
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* UI THEME: theme title 15px */
.theme-toggle-title {
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

/* LIGHT THEME: make top header same as page background */
body.theme-light .topbar {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* LIGHT THEME: make empty routes block same as currency filter fields */
body.theme-light #routesList,
body.theme-light .routes-list {
  background: #f1f4f8 !important;
  background-color: #f1f4f8 !important;
  color: #172033 !important;
  border-color: #c8d1df !important;
}

body.theme-light #routesList > *,
body.theme-light .routes-list > *,
body.theme-light .empty-state,
body.theme-light .empty,
body.theme-light .no-routes,
body.theme-light .routes-empty {
  background: #f8fafc !important;
  background-color: #f8fafc !important;
  color: #172033 !important;
  border-color: #c8d1df !important;
}

body.theme-light #routesList h1,
body.theme-light #routesList h2,
body.theme-light #routesList h3,
body.theme-light #routesList div,
body.theme-light #routesList p,
body.theme-light .routes-list h1,
body.theme-light .routes-list h2,
body.theme-light .routes-list h3,
body.theme-light .routes-list div,
body.theme-light .routes-list p {
  color: #172033 !important;
}

body.theme-light #routesList .muted,
body.theme-light .routes-list .muted {
  color: #6b7280 !important;
}

/* LIGHT THEME: route info / empty state gray background */
body.theme-light #routesList > *,
body.theme-light .routes-list > *,
body.theme-light .empty-state,
body.theme-light .empty,
body.theme-light .no-routes,
body.theme-light .routes-empty {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
}

/* LIGHT THEME: route card on soft routes list background */
body.theme-light #routesList > .route-item,
body.theme-light .routes-list > .route-item {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* LIGHT THEME: log field gray background like route info block */
body.theme-light .log,
body.theme-light #log,
body.theme-light .log-box,
body.theme-light .log-list {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
}

/* LIGHT THEME: stronger log text colors */
body.theme-light .log,
body.theme-light #log,
body.theme-light .log-box,
body.theme-light .log-list {
  color: #111827 !important;
}

body.theme-light .log *,
body.theme-light #log *,
body.theme-light .log-box *,
body.theme-light .log-list * {
  color: #111827 !important;
}

/* Success / green log lines */
body.theme-light .log .success,
body.theme-light #log .success,
body.theme-light .log .ok,
body.theme-light #log .ok,
body.theme-light .log .green,
body.theme-light #log .green {
  color: #16a34a !important;
  font-weight: 800 !important;
}

/* Error / red log lines */
body.theme-light .log .error,
body.theme-light #log .error,
body.theme-light .log .danger,
body.theme-light #log .danger,
body.theme-light .log .red,
body.theme-light #log .red {
  color: #dc2626 !important;
  font-weight: 800 !important;
}

/* Warning / yellow log lines */
body.theme-light .log .warning,
body.theme-light #log .warning,
body.theme-light .log .warn,
body.theme-light #log .warn,
body.theme-light .log .yellow,
body.theme-light #log .yellow {
  color: #d97706 !important;
  font-weight: 800 !important;
}

/* Muted log lines */
body.theme-light .log .muted,
body.theme-light #log .muted {
  color: #6b7280 !important;
}

/* LIGHT THEME: log success/error colors */
body.theme-light .log,
body.theme-light #log,
body.theme-light .log-box,
body.theme-light .log-list {
  color: #111827 !important;
}

/* обычные строки */
body.theme-light .log div,
body.theme-light #log div,
body.theme-light .log p,
body.theme-light #log p,
body.theme-light .log-line {
  color: #111827 !important;
}

/* успешные команды */
body.theme-light .log-success,
body.theme-light .success,
body.theme-light .ok,
body.theme-light .green {
  color: #16a34a !important;
  font-weight: 800 !important;
}

/* ошибки */
body.theme-light .log-error,
body.theme-light .error,
body.theme-light .danger,
body.theme-light .red {
  color: #dc2626 !important;
  font-weight: 800 !important;
}

/* предупреждения */
body.theme-light .log-warning,
body.theme-light .warning,
body.theme-light .warn,
body.theme-light .yellow {
  color: #d97706 !important;
  font-weight: 800 !important;
}

/* LOG: keep dark terminal style even in light theme */
body.theme-light .log,
body.theme-light #log,
body.theme-light .log-box,
body.theme-light .log-list {
  background: #171b22 !important;
  background-color: #171b22 !important;
  border-color: #536173 !important;
  color: #e5e7eb !important;
}

/* обычные строки лога */
body.theme-light .log div,
body.theme-light #log div,
body.theme-light .log p,
body.theme-light #log p,
body.theme-light .log span,
body.theme-light #log span,
body.theme-light .log-line {
  color: #e5e7eb !important;
}

/* успешные строки */
body.theme-light .log-success,
body.theme-light .log .log-success,
body.theme-light #log .log-success,
body.theme-light .success,
body.theme-light .ok,
body.theme-light .green {
  color: #7ee787 !important;
  font-weight: 800 !important;
}

/* ошибки */
body.theme-light .log-error,
body.theme-light .log .log-error,
body.theme-light #log .log-error,
body.theme-light .error,
body.theme-light .danger,
body.theme-light .red {
  color: #ff7b7b !important;
  font-weight: 800 !important;
}

/* предупреждения */
body.theme-light .log-warning,
body.theme-light .log .log-warning,
body.theme-light #log .log-warning,
body.theme-light .warning,
body.theme-light .warn,
body.theme-light .yellow {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}

/* LIGHT THEME: keep log gray background, only fix text colors */
body.theme-light .log,
body.theme-light #log,
body.theme-light .log-box,
body.theme-light .log-list {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-color: #c8d1df !important;
  color: #111827 !important;
}

/* обычный текст */
body.theme-light .log div,
body.theme-light #log div,
body.theme-light .log p,
body.theme-light #log p,
body.theme-light .log span,
body.theme-light #log span,
body.theme-light .log-line {
  color: #111827 !important;
}

/* успешные команды */
body.theme-light .log-success,
body.theme-light .log .log-success,
body.theme-light #log .log-success,
body.theme-light .success,
body.theme-light .ok,
body.theme-light .green {
  color: #15803d !important;
  font-weight: 800 !important;
}

/* ошибки */
body.theme-light .log-error,
body.theme-light .log .log-error,
body.theme-light #log .log-error,
body.theme-light .error,
body.theme-light .danger,
body.theme-light .red {
  color: #dc2626 !important;
  font-weight: 800 !important;
}

/* предупреждения */
body.theme-light .log-warning,
body.theme-light .log .log-warning,
body.theme-light #log .log-warning,
body.theme-light .warning,
body.theme-light .warn,
body.theme-light .yellow {
  color: #d97706 !important;
  font-weight: 800 !important;
}

/* LIGHT THEME: make found routes counter darker */
body.theme-light .muted,
body.theme-light .hint,
body.theme-light .counter,
body.theme-light .routes-count,
body.theme-light #routesCount,
body.theme-light #foundCount,
body.theme-light [data-role="routes-count"] {
  color: #6b7280 !important;
}

/* LIGHT THEME: move found routes counter slightly up */
body.theme-light .counter,
body.theme-light .routes-count,
body.theme-light #routesCount,
body.theme-light #foundCount,
body.theme-light [data-role="routes-count"] {
  position: relative !important;
  top: -4px !important;
}

/* LIGHT THEME: move found routes counter higher */
body.theme-light .counter,
body.theme-light .routes-count,
body.theme-light #routesCount,
body.theme-light #foundCount,
body.theme-light [data-role="routes-count"] {
  position: relative !important;
  top: -8px !important;
}

/* BACKUP BUTTONS: blue like Apply button, dark and light themes */
#uploadBackupBtn,
#clearBackupBtn,
#saveProjectBackupBtn,
#downloadBackupBtn,
button[data-action="upload-backup"],
button[data-action="clear-backup"],
button[data-action="save-project-backup"],
button[data-action="download-backup"] {
  background: #1877F2 !important;
  background-color: #1877F2 !important;
  border-color: #3b8cff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#uploadBackupBtn:hover,
#clearBackupBtn:hover,
#saveProjectBackupBtn:hover,
#downloadBackupBtn:hover,
button[data-action="upload-backup"]:hover,
button[data-action="clear-backup"]:hover,
button[data-action="save-project-backup"]:hover,
button[data-action="download-backup"]:hover {
  background: #166fe5 !important;
  background-color: #166fe5 !important;
  border-color: #5ca0ff !important;
  color: #ffffff !important;
}

body.theme-light #uploadBackupBtn,
body.theme-light #clearBackupBtn,
body.theme-light #saveProjectBackupBtn,
body.theme-light #downloadBackupBtn,
body.theme-light button[data-action="upload-backup"],
body.theme-light button[data-action="clear-backup"],
body.theme-light button[data-action="save-project-backup"],
body.theme-light button[data-action="download-backup"] {
  background: #1877F2 !important;
  background-color: #1877F2 !important;
  border-color: #3b8cff !important;
  color: #ffffff !important;
}

body.theme-light #uploadBackupBtn:hover,
body.theme-light #clearBackupBtn:hover,
body.theme-light #saveProjectBackupBtn:hover,
body.theme-light #downloadBackupBtn:hover,
body.theme-light button[data-action="upload-backup"]:hover,
body.theme-light button[data-action="clear-backup"]:hover,
body.theme-light button[data-action="save-project-backup"]:hover,
body.theme-light button[data-action="download-backup"]:hover {
  background: #166fe5 !important;
  background-color: #166fe5 !important;
  border-color: #5ca0ff !important;
  color: #ffffff !important;
}

/* BACKUP BUTTONS: force all backup buttons blue */
.backup-blue-btn,
body.theme-light .backup-blue-btn {
  background: #1877F2 !important;
  background-color: #1877F2 !important;
  border-color: #3b8cff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.backup-blue-btn:hover,
body.theme-light .backup-blue-btn:hover {
  background: #166fe5 !important;
  background-color: #166fe5 !important;
  border-color: #5ca0ff !important;
  color: #ffffff !important;
}

.backup-blue-btn:active,
body.theme-light .backup-blue-btn:active {
  background: #145fd1 !important;
  background-color: #145fd1 !important;
  border-color: #5ca0ff !important;
  color: #ffffff !important;
}

/* BACKUP: move save project button under restore backup */
.save-project-under-restore-row {
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
}

.save-project-under-restore {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

/* BACKUP: open file row instead of two big buttons */
.backup-hidden-upload-btn {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.backup-open-row-ui {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  width: clamp(360px, 40%, 480px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 14px 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid #526174 !important;
  background: rgba(255,255,255,0.04) !important;
}

@media (max-width: 980px) {
  .backup-open-row-ui {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (min-width: 981px) {
  section.tab-content[data-content="settings"] .buttons:has(> #backupOpenRowUi.backup-open-row-ui) {
    display: block !important;
  }
}

.backup-open-label {
  font-weight: 900 !important;
  color: inherit !important;
}

.backup-open-status {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 0.8 !important;
  font-weight: 700 !important;
  margin-right: 0 !important;
}

.backup-open-row-ui > .backup-open-btn,
.backup-open-row-ui > .backup-cancel-btn {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  white-space: nowrap !important;
}

@media (max-width: 520px) {
  .backup-open-row-ui {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  .backup-open-status {
    grid-column: 1 / -1 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
  }

  .backup-open-row-ui > .backup-open-btn,
  .backup-open-row-ui > .backup-cancel-btn {
    width: 100% !important;
    min-width: 0 !important;
  }
}

.backup-open-btn,
.backup-cancel-btn,
.backup-blue-btn,
body.theme-light .backup-open-btn,
body.theme-light .backup-cancel-btn,
body.theme-light .backup-blue-btn {
  background: #1877F2 !important;
  background-color: #1877F2 !important;
  border-color: #3b8cff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.backup-open-btn:hover,
.backup-cancel-btn:hover,
.backup-blue-btn:hover,
body.theme-light .backup-open-btn:hover,
body.theme-light .backup-cancel-btn:hover,
body.theme-light .backup-blue-btn:hover {
  background: #166fe5 !important;
  background-color: #166fe5 !important;
  border-color: #5ca0ff !important;
  color: #ffffff !important;
}

body.theme-light .backup-open-row-ui {
  background: #eef2f7 !important;
  border-color: #c8d1df !important;
}

.save-project-under-restore-row {
  display: block !important;
  width: 100% !important;
  margin-top: 14px !important;
}

.save-project-under-restore {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

/* BACKUP: make open backup row 2x smaller */
.backup-open-row-ui {
  padding: 6px 10px !important;
  margin: 8px 0 !important;
  border-radius: 12px !important;
  gap: 8px !important;
  min-height: 0 !important;
}

.backup-open-label,
.backup-open-status {
  font-size: 14px !important;
  line-height: 1.2 !important;
}

.backup-open-btn,
.backup-cancel-btn,
body.theme-light .backup-open-btn,
body.theme-light .backup-cancel-btn {
  padding: 6px 12px !important;
  min-height: 0 !important;
  height: 34px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  line-height: 1.1 !important;
}

/* BACKUP: softer blue for Open / Cancel buttons */
.backup-open-btn,
.backup-cancel-btn,
body.theme-light .backup-open-btn,
body.theme-light .backup-cancel-btn {
  background: #2563eb !important;
  background-color: #2563eb !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
}

.backup-open-btn:hover,
.backup-cancel-btn:hover,
body.theme-light .backup-open-btn:hover,
body.theme-light .backup-cancel-btn:hover {
  background: #1d4ed8 !important;
  background-color: #1d4ed8 !important;
  border-color: #60a5fa !important;
  color: #ffffff !important;
}

.backup-open-btn:active,
.backup-cancel-btn:active,
body.theme-light .backup-open-btn:active,
body.theme-light .backup-cancel-btn:active {
  background: #1e40af !important;
  background-color: #1e40af !important;
}

/* BACKUP: gray Open / Cancel buttons */
.backup-open-btn,
.backup-cancel-btn,
body.theme-light .backup-open-btn,
body.theme-light .backup-cancel-btn {
  background: #4b5563 !important;
  background-color: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
}

.backup-open-btn:hover,
.backup-cancel-btn:hover,
body.theme-light .backup-open-btn:hover,
body.theme-light .backup-cancel-btn:hover {
  background: #374151 !important;
  background-color: #374151 !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
}

.backup-open-btn:active,
.backup-cancel-btn:active,
body.theme-light .backup-open-btn:active,
body.theme-light .backup-cancel-btn:active {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
}

/* BACKUP: force gray for Open and Cancel buttons */
.backup-gray-btn,
.backup-open-btn,
.backup-cancel-btn,
body.theme-light .backup-gray-btn,
body.theme-light .backup-open-btn,
body.theme-light .backup-cancel-btn {
  background: #4b5563 !important;
  background-color: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
}

.backup-gray-btn:hover,
.backup-open-btn:hover,
.backup-cancel-btn:hover,
body.theme-light .backup-gray-btn:hover,
body.theme-light .backup-open-btn:hover,
body.theme-light .backup-cancel-btn:hover {
  background: #374151 !important;
  background-color: #374151 !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
}

.backup-gray-btn:active,
.backup-open-btn:active,
.backup-cancel-btn:active,
body.theme-light .backup-gray-btn:active,
body.theme-light .backup-open-btn:active,
body.theme-light .backup-cancel-btn:active {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

/* BACKUP: Open and Cancel buttons same gray color */
#backupOpenBtn,
.backup-open-btn,
.backup-cancel-btn,
.backup-gray-btn,
#backupOpenRowUi button,
body.theme-light #backupOpenBtn,
body.theme-light .backup-open-btn,
body.theme-light .backup-cancel-btn,
body.theme-light .backup-gray-btn,
body.theme-light #backupOpenRowUi button {
  background: #4b5563 !important;
  background-color: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

#backupOpenBtn:hover,
.backup-open-btn:hover,
.backup-cancel-btn:hover,
.backup-gray-btn:hover,
#backupOpenRowUi button:hover,
body.theme-light #backupOpenBtn:hover,
body.theme-light .backup-open-btn:hover,
body.theme-light .backup-cancel-btn:hover,
body.theme-light .backup-gray-btn:hover,
body.theme-light #backupOpenRowUi button:hover {
  background: #374151 !important;
  background-color: #374151 !important;
  border-color: #9ca3af !important;
  color: #ffffff !important;
}

#backupOpenBtn:active,
.backup-open-btn:active,
.backup-cancel-btn:active,
.backup-gray-btn:active,
#backupOpenRowUi button:active,
body.theme-light #backupOpenBtn:active,
body.theme-light .backup-open-btn:active,
body.theme-light .backup-cancel-btn:active,
body.theme-light .backup-gray-btn:active,
body.theme-light #backupOpenRowUi button:active {
  background: #1f2937 !important;
  background-color: #1f2937 !important;
  color: #ffffff !important;
}

/* BACKUP: hide "Backup файл:" label */
.backup-open-label {
  display: none !important;
}

/* BACKUP: loaded backup info before restore button */
.backup-loaded-info-box {
  margin: 14px 0 14px 0 !important;
}

/* BACKUP: stack loaded info above restore button */
.backup-loaded-info-box {
  display: block !important;
  width: 100% !important;
  max-width: 720px !important;
  margin: 14px 0 14px 0 !important;
}

/* Restore backup button should stay normal size */
button {
  flex-shrink: 0;
}

button.restore-backup-normal,
#restoreBackupBtn,
body.theme-light #restoreBackupBtn {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 12px 18px !important;
  border-radius: 12px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Fix if restore button was stretched by layout */
.backup-loaded-info-box + button,
.backup-loaded-info-box + .danger,
.backup-loaded-info-box + #restoreBackupBtn {
  display: inline-flex !important;
  width: auto !important;
  max-width: max-content !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 12px 18px !important;
  margin-top: 0 !important;
}

/* BACKUP DIFF: lighter only in light/day theme */
body.theme-light .backup-diff,
body.theme-light .backup-diff-box,
body.theme-light .backup-preview,
body.theme-light .backup-compare,
body.theme-light .backup-result {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
}

/* Keep dark/night theme unchanged */
body:not(.theme-light) .backup-diff,
body:not(.theme-light) .backup-diff-box,
body:not(.theme-light) .backup-preview,
body:not(.theme-light) .backup-compare,
body:not(.theme-light) .backup-result {
  background: #1f242d !important;
  background-color: #1f242d !important;
  border-color: #526174 !important;
}

/* LIGHT THEME: restore preview text visible */
body.theme-light .backup-restore-preview-box {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
}

body.theme-light .backup-restore-preview-box,
body.theme-light .backup-restore-preview-box * {
  color: #172033 !important;
}

/* выделенная строка внутри блока */
body.theme-light .backup-restore-preview-box b,
body.theme-light .backup-restore-preview-box strong {
  color: #b45309 !important;
}

/* NIGHT THEME: leave dark version as it was */
body:not(.theme-light) .backup-restore-preview-box {
  background: #1f242d !important;
  background-color: #1f242d !important;
  border-color: #526174 !important;
}

body:not(.theme-light) .backup-restore-preview-box b,
body:not(.theme-light) .backup-restore-preview-box strong {
  color: #ffe600 !important;
}

/* LIGHT THEME: make loaded backup info readable */
body.theme-light .backup-loaded-info-box {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
}

body.theme-light .backup-loaded-info-box,
body.theme-light .backup-loaded-info-box * {
  color: #172033 !important;
}

body.theme-light .backup-loaded-info-box b,
body.theme-light .backup-loaded-info-box strong {
  color: #b45309 !important;
}

body.theme-light .backup-loaded-info-box .warning,
body.theme-light .backup-loaded-info-box .warn,
body.theme-light .backup-loaded-info-box .yellow {
  color: #b45309 !important;
}

body.theme-light .backup-loaded-info-box .success,
body.theme-light .backup-loaded-info-box .ok,
body.theme-light .backup-loaded-info-box .green {
  color: #15803d !important;
}

body.theme-light .backup-loaded-info-box .error,
body.theme-light .backup-loaded-info-box .danger,
body.theme-light .backup-loaded-info-box .red {
  color: #dc2626 !important;
}

/* BACKUP: reduce vertical gaps between loaded info, restore and save project */
.backup-loaded-info-box {
  margin-bottom: 8px !important;
}

.backup-loaded-info-box + button,
.backup-loaded-info-box + .danger,
.backup-loaded-info-box + #restoreBackupBtn,
.restore-backup-normal {
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

.save-project-under-restore-row {
  margin-top: 8px !important;
}

/* Light theme same spacing */
body.theme-light .backup-loaded-info-box {
  margin-bottom: 8px !important;
}

body.theme-light .save-project-under-restore-row {
  margin-top: 8px !important;
}

/* LIGHT THEME: burger/auth menu adapted */
body.theme-light .auth-menu,
body.theme-light .auth-menu-panel,
body.theme-light .auth-dropdown,
body.theme-light .user-menu,
body.theme-light .menu-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
}

/* Text inside menu */
body.theme-light .auth-menu *,
body.theme-light .auth-menu-panel *,
body.theme-light .auth-dropdown *,
body.theme-light .user-menu *,
body.theme-light .menu-panel * {
  color: #172033 !important;
}

/* User/admin block */
body.theme-light .auth-menu .muted,
body.theme-light .auth-menu-panel .muted,
body.theme-light .auth-dropdown .muted,
body.theme-light .user-menu .muted,
body.theme-light .menu-panel .muted {
  color: #64748b !important;
}

/* Menu separators */
body.theme-light .auth-menu hr,
body.theme-light .auth-menu-panel hr,
body.theme-light .auth-dropdown hr,
body.theme-light .user-menu hr,
body.theme-light .menu-panel hr {
  border-color: #c8d1df !important;
}

/* Menu buttons except logout */
body.theme-light .auth-menu button:not(#logoutBtn),
body.theme-light .auth-menu-panel button:not(#logoutBtn),
body.theme-light .auth-dropdown button:not(#logoutBtn),
body.theme-light .user-menu button:not(#logoutBtn),
body.theme-light .menu-panel button:not(#logoutBtn) {
  background: transparent !important;
  background-color: transparent !important;
  color: #172033 !important;
  border-color: transparent !important;
}

body.theme-light .auth-menu button:not(#logoutBtn):hover,
body.theme-light .auth-menu-panel button:not(#logoutBtn):hover,
body.theme-light .auth-dropdown button:not(#logoutBtn):hover,
body.theme-light .user-menu button:not(#logoutBtn):hover,
body.theme-light .menu-panel button:not(#logoutBtn):hover {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  color: #172033 !important;
}

/* Logout button in light theme */
body.theme-light #logoutBtn,
body.theme-light .logout-btn,
body.theme-light button[data-action="logout"] {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

body.theme-light #logoutBtn:hover,
body.theme-light .logout-btn:hover,
body.theme-light button[data-action="logout"]:hover {
  background: #fecaca !important;
  background-color: #fecaca !important;
  border-color: #f87171 !important;
  color: #b91c1c !important;
}

/* LIGHT THEME: forced burger menu fix */
body.theme-light .forced-burger-menu {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
}

body.theme-light .forced-burger-menu,
body.theme-light .forced-burger-menu *:not(.forced-burger-logout) {
  color: #172033 !important;
}

body.theme-light .forced-burger-item {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #172033 !important;
}

body.theme-light .forced-burger-item:hover {
  background: #eef2f7 !important;
  background-color: #eef2f7 !important;
  color: #172033 !important;
}

body.theme-light .forced-burger-logout {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

body.theme-light .forced-burger-logout,
body.theme-light .forced-burger-logout * {
  color: #dc2626 !important;
}

body.theme-light .forced-burger-logout:hover {
  background: #fecaca !important;
  background-color: #fecaca !important;
  border-color: #f87171 !important;
  color: #b91c1c !important;
}

/* LIGHT THEME: burger button background same as page */
body.theme-light .auth-menu-btn,
body.theme-light .burger-btn,
body.theme-light .menu-btn,
body.theme-light button[aria-label="menu"],
body.theme-light button[aria-label="Меню"] {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #172033 !important;
}

/* If burger icon has inner wrapper */
body.theme-light .auth-menu-btn *,
body.theme-light .burger-btn *,
body.theme-light .menu-btn * {
  background: transparent !important;
  background-color: transparent !important;
  color: #172033 !important;
}

/* Topbar area stays same as page background */
body.theme-light .topbar,
body.theme-light .topbar *:not(.forced-burger-menu):not(.forced-burger-menu *) {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* LIGHT THEME: force burger icon area transparent */
body.theme-light .forced-burger-bg-clean,
body.theme-light .forced-burger-bg-clean-parent {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.theme-light .forced-burger-bg-clean *,
body.theme-light .forced-burger-bg-clean-parent * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

/* keep only burger lines dark */
body.theme-light .forced-burger-bg-clean {
  color: #172033 !important;
}

/* FIX: do not make burger dropdown transparent */
body.theme-light .forced-burger-menu,
body.theme-light .auth-menu,
body.theme-light .auth-menu-panel,
body.theme-light .auth-dropdown,
body.theme-light .user-menu,
body.theme-light .menu-panel {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18) !important;
}

/* Menu text in light theme */
body.theme-light .forced-burger-menu,
body.theme-light .forced-burger-menu * {
  color: #172033 !important;
}

/* Logout stays red */
body.theme-light .forced-burger-logout,
body.theme-light #logoutBtn,
body.theme-light .logout-btn {
  background: #fee2e2 !important;
  background-color: #fee2e2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}

/* Only burger button area is transparent */
body.theme-light .burger-button-only-clean,
body.theme-light .burger-button-only-wrap {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #172033 !important;
}

/* Cancel old over-wide transparent rule for actual menu */
body.theme-light .forced-burger-menu.forced-burger-bg-clean-parent,
body.theme-light .forced-burger-menu .forced-burger-bg-clean-parent,
body.theme-light .forced-burger-menu .forced-burger-bg-clean {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

/* MENU: remove background from logout button */
#logoutBtn,
.logout-btn,
.forced-burger-logout,
button[data-action="logout"],
body.theme-light #logoutBtn,
body.theme-light .logout-btn,
body.theme-light .forced-burger-logout,
body.theme-light button[data-action="logout"] {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #dc2626 !important;
}

/* Hover also without filled background */
#logoutBtn:hover,
.logout-btn:hover,
.forced-burger-logout:hover,
button[data-action="logout"]:hover,
body.theme-light #logoutBtn:hover,
body.theme-light .logout-btn:hover,
body.theme-light .forced-burger-logout:hover,
body.theme-light button[data-action="logout"]:hover {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #b91c1c !important;
}

/* MOBILE: restore backup button must not go outside card */
@media (max-width: 980px) {
  #restoreBackupBtn,
  .restore-backup-normal,
  .backup-loaded-info-box + button,
  .backup-loaded-info-box + .danger,
  .backup-loaded-info-box + #restoreBackupBtn {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}

/* MOBILE: short restore button text fits inside card */
@media (max-width: 980px) {
  #restoreBackupBtn,
  .restore-backup-normal,
  .backup-loaded-info-box + button,
  .backup-loaded-info-box + .danger,
  .backup-loaded-info-box + #restoreBackupBtn {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
  }
}

/* FEE / LOSS: apply toggles */
.field-apply-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 6px 0 !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  user-select: none !important;
  color: inherit !important;
}

.field-apply-toggle input {
  width: 18px !important;
  height: 18px !important;
  accent-color: #1877F2 !important;
}

.field-disabled-by-toggle {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

body.theme-light .field-apply-toggle {
  color: #172033 !important;
}

/* PATCH: commission/loss apply toggles */
.apply-field-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 6px 0 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  color: inherit !important;
}

.apply-field-toggle input {
  width: 18px !important;
  height: 18px !important;
  accent-color: #1877F2 !important;
}

.apply-field-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* FEE / LOSS: direct toggles */
.fee-apply-toggles {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 10px 0 12px 0 !important;
}

.fee-apply-toggle {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  border: 1px solid #526174 !important;
  background: rgba(255,255,255,0.04) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  user-select: none !important;
}

.fee-apply-toggle input {
  width: 18px !important;
  height: 18px !important;
  accent-color: #1877F2 !important;
}

.fee-field-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

body.theme-light .fee-apply-toggle {
  background: #eef2f7 !important;
  border-color: #c8d1df !important;
  color: #172033 !important;
}

/* FEE / LOSS: make toggle blocks 35% smaller, keep native checkbox */
.fee-apply-toggles {
  gap: 8px !important;
  margin: 7px 0 9px 0 !important;
}

.fee-apply-toggle {
  padding: 5px 9px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  gap: 6px !important;
}

.fee-apply-toggle input {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
}

@media (max-width: 980px) {
  .fee-apply-toggles {
    gap: 6px !important;
  }

  .fee-apply-toggle {
    padding: 5px 8px !important;
    font-size: 12px !important;
  }

  .fee-apply-toggle input {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
}


.change-line .change-boolean-on {
  color: #22c55e !important;
}

.change-line .change-boolean-off {
  color: #ef4444 !important;
}

.change-line .change-arrow {
  color: inherit !important;
}

body.theme-light .change-line .change-boolean-on {
  color: #15803d !important;
}

body.theme-light .change-line .change-boolean-off {
  color: #dc2626 !important;
}

body.theme-light .change-line .change-arrow {
  color: #111827 !important;
}


.backup-current-site-display {
  margin: 12px 0 12px;
  padding: 11px 13px;
  border-radius: 14px;
  background: #2a3039;
  color: #ffffff;
  box-sizing: border-box;
}

.backup-current-site-label {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 900;
  line-height: 17.5px;
}

.backup-current-site-value {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  box-sizing: border-box;
  cursor: default;
  font-size: 13px;
  font-weight: 800;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  white-space: nowrap;
}

body.theme-light .backup-current-site-display {
  background: #ffffff;
  color: #111827;
  box-shadow: none;
}

body.theme-light .backup-current-site-label {
  color: #111827;
}

body.theme-light .backup-current-site-value {
  background: transparent;
  color: #111827;
}


#backupApplyModal .backup-confirm-modal {
  width: 560px;
  max-width: calc(100vw - 40px);
  padding: 16px;
  border: 0;
  outline: none;
  border-radius: 20px;
  background: #2c3037;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .60);
  box-sizing: border-box;
}

#backupApplyModal .backup-confirm-title {
  margin: 0 0 10px;
  background: transparent;
  color: #f9fafb;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
}

#backupApplyModal .backup-confirm-info {
  margin: 0 0 8px;
  padding: 10px;
  border: 0;
  outline: none;
  border-radius: 10px;
  background: #30343b;
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.5;
  box-sizing: border-box;
}

#backupApplyModal .backup-confirm-site {
  margin: 0 0 12px;
  padding: 11px 13px;
  border-radius: 14px;
  border: 0;
  outline: none;
  background: #2a3039;
  color: #ffffff;
  box-sizing: border-box;
}

#backupApplyModal .backup-confirm-site-label {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 900;
  line-height: 17.5px;
}

#backupApplyModal .backup-confirm-site-value {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  box-sizing: border-box;
  cursor: default;
  font-size: 13px;
  font-weight: 800;
  line-height: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: text;
  white-space: nowrap;
}

#backupApplyModal .backup-confirm-actions {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#backupApplyModal .backup-confirm-btn,
#backupApplyModal .backup-confirm-btn:hover,
#backupApplyModal .backup-confirm-btn:focus,
#backupApplyModal .backup-confirm-btn:focus-visible,
#backupApplyModal .backup-confirm-btn:active {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  translate: none !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 9px 14px !important;
  border-width: 0 !important;
  border-style: solid !important;
  border-color: transparent !important;
  border-radius: 18px !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 18px !important;
  text-align: center !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
}

#backupApplyModal .backup-confirm-btn-cancel,
#backupApplyModal .backup-confirm-btn-cancel:hover,
#backupApplyModal .backup-confirm-btn-cancel:focus,
#backupApplyModal .backup-confirm-btn-cancel:focus-visible,
#backupApplyModal .backup-confirm-btn-cancel:active {
  background: #536071 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

#backupApplyModal .backup-confirm-btn-cancel:hover {
  background: #5f6c7e !important;
}

#backupApplyModal .backup-confirm-btn-cancel:active {
  background: #4b5666 !important;
}

#backupApplyModal .backup-confirm-btn-primary,
#backupApplyModal .backup-confirm-btn-primary:hover,
#backupApplyModal .backup-confirm-btn-primary:focus,
#backupApplyModal .backup-confirm-btn-primary:focus-visible,
#backupApplyModal .backup-confirm-btn-primary:active {
  background: #1877f2 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

#backupApplyModal .backup-confirm-btn-primary:hover {
  background: #247ff6 !important;
}

#backupApplyModal .backup-confirm-btn-primary:active {
  background: #1469d8 !important;
}

#backupApplyModal .backup-confirm-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

body.theme-light #backupApplyModal.modal-overlay {
  background: rgba(15, 23, 42, .22);
  backdrop-filter: blur(8px);
}

body.theme-light #backupApplyModal .backup-confirm-modal {
  border: 0;
  background: #f3f7fb;
  color: #111827;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .20);
}

body.theme-light #backupApplyModal .backup-confirm-title {
  color: #111827;
}

body.theme-light #backupApplyModal .backup-confirm-info,
body.theme-light #backupApplyModal .backup-confirm-site {
  border: 0;
  outline: none;
  background: #e4ebf3;
  color: #111827;
}

body.theme-light #backupApplyModal .backup-confirm-site-label,
body.theme-light #backupApplyModal .backup-confirm-site-value {
  color: #111827;
}

body.theme-light #backupApplyModal .backup-confirm-btn-cancel,
body.theme-light #backupApplyModal .backup-confirm-btn-cancel:hover,
body.theme-light #backupApplyModal .backup-confirm-btn-cancel:focus,
body.theme-light #backupApplyModal .backup-confirm-btn-cancel:focus-visible,
body.theme-light #backupApplyModal .backup-confirm-btn-cancel:active {
  background: #6b7280 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

body.theme-light #backupApplyModal .backup-confirm-btn-cancel:hover {
  background: #747c8a !important;
}

body.theme-light #backupApplyModal .backup-confirm-btn-cancel:active {
  background: #5f6774 !important;
}

@media (max-width: 700px) {
  #backupApplyModal.modal-overlay {
    padding: 14px;
  }

  #backupApplyModal .backup-confirm-modal {
    width: 100%;
    max-width: calc(100vw - 28px);
    padding: 14px;
  }

  #backupApplyModal .backup-confirm-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  #backupApplyModal .backup-confirm-btn,
  #backupApplyModal .backup-confirm-btn:hover,
  #backupApplyModal .backup-confirm-btn:focus,
  #backupApplyModal .backup-confirm-btn:focus-visible,
  #backupApplyModal .backup-confirm-btn:active {
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
  }
}