/* Secret Gear - ekran urzadzenia (pasek zakladek + podglad), styl launcher.mysecret.store */

#max-box[data-v-0d5235ca] {
  padding: 0;
  row-gap: 0;
  background: #1a1a1a url("/assets/images/bg.webp") center / cover no-repeat;
}

/* pasek gorny */
#max-box[data-v-0d5235ca] header {
  height: auto;
  padding: 0 60px;
  background-color: #222;
  border-bottom: 1px solid #444;
}

#max-box[data-v-0d5235ca] header > .flex {
  position: absolute;
  top: 12px;
  right: 20px;
  z-index: 2;
}

#max-box[data-v-0d5235ca] header .close {
  font-size: 26px;
  color: #999;
}

#max-box[data-v-0d5235ca] header .close:hover {
  color: #000;
  background-color: #dae342;
}

#max-box[data-v-0d5235ca] header .tabs {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

#max-box[data-v-0d5235ca] header .tabs .logo {
  width: 220px;
  height: 80px;
  flex-shrink: 0;
  background: url("/assets/images/secretgear.webp") left center / contain no-repeat;
}

/* zakladki z podpisami */
#max-box[data-v-0d5235ca] header .tabs .ul li {
  width: auto;
  height: auto;
  min-width: 84px;
  margin: 0 2px;
  padding: 22px 10px 16px;
  flex-direction: column;
  row-gap: 8px;
  border-bottom: 3px solid transparent;
}

/* podkreslenie zakladki (aktywnej i po najechaniu) lezy na linii paska */
#max-box[data-v-0d5235ca] header .tabs {
  align-items: stretch;
}

#max-box[data-v-0d5235ca] header .tabs .logo,
#max-box[data-v-0d5235ca] header .tabs .battery-wrap {
  align-self: center;
}

#max-box[data-v-0d5235ca] header .tabs .ul {
  align-items: stretch;
  margin-bottom: -1px;
}

#max-box[data-v-0d5235ca] header .tabs .ul li {
  justify-content: center;
}

#max-box[data-v-0d5235ca] header .tabs .ul li.active {
  border-bottom: 3px solid #dae342;
}

#max-box[data-v-0d5235ca] header .tabs .ul li:after {
  height: 3px;
  bottom: -3px;
  left: 0;
}

#max-box[data-v-0d5235ca] header .tabs .ul li i {
  font-size: 28px !important;
  color: #8a8a8a;
}

#max-box[data-v-0d5235ca] header .tabs .ul li.active i,
#max-box[data-v-0d5235ca] header .tabs .ul li:hover i {
  color: #dae342;
}

#max-box[data-v-0d5235ca] header .tabs .ul li::before {
  order: 2;
  font-size: 12px;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: #8a8a8a;
  transition: color 0.2s;
}

#max-box[data-v-0d5235ca] header .tabs .ul li.active::before,
#max-box[data-v-0d5235ca] header .tabs .ul li:hover::before {
  color: #fff;
}

html[lang="pl"] #max-box header .tabs .ul li:has(.icon-yulan)::before { content: "Podgląd"; }
html[lang="pl"] #max-box header .tabs .ul li:has(.icon-main)::before { content: "Przyciski"; }
html[lang="pl"] #max-box header .tabs .ul li:has(.icon-sensor)::before { content: "Sensor"; }
html[lang="pl"] #max-box header .tabs .ul li:has(.icon-macro)::before { content: "Makra"; }
html[lang="pl"] #max-box header .tabs .ul li:has(.icon-light)::before { content: "Podświetlenie"; }
html[lang="pl"] #max-box header .tabs .ul li:has(.icon-gaojishezhi)::before { content: "Zaawansowane"; }
html[lang="pl"] #max-box header .tabs .ul li:has(.icon-setting)::before { content: "Ustawienia"; }

html[lang="en"] #max-box header .tabs .ul li:has(.icon-yulan)::before { content: "Overview"; }
html[lang="en"] #max-box header .tabs .ul li:has(.icon-main)::before { content: "Buttons"; }
html[lang="en"] #max-box header .tabs .ul li:has(.icon-sensor)::before { content: "Sensor"; }
html[lang="en"] #max-box header .tabs .ul li:has(.icon-macro)::before { content: "Macros"; }
html[lang="en"] #max-box header .tabs .ul li:has(.icon-light)::before { content: "Lighting"; }
html[lang="en"] #max-box header .tabs .ul li:has(.icon-gaojishezhi)::before { content: "Advanced"; }
html[lang="en"] #max-box header .tabs .ul li:has(.icon-setting)::before { content: "Settings"; }

#max-box[data-v-0d5235ca] header .tabs .battery-wrap i {
  font-size: 26px !important;
}

#max-box[data-v-0d5235ca] .center-wrap {
  top: 125px;
}

/* bateria: procent obok ikony zamiast bialego napisu na zielonym pasku */
#max-box[data-v-0d5235ca] header .tabs .battery-wrap {
  padding-right: 58px;
}

#max-box[data-v-0d5235ca] header .tabs .battery-wrap .battery {
  width: 44px !important;
  height: 22px !important;
  margin: 0 0 0 14px !important;
  padding: 2px;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  background: none !important;
  border: 2px solid #9a9a92;
  border-radius: 6px;
}

#max-box[data-v-0d5235ca] header .tabs .battery-wrap .battery::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -6px;
  width: 3px;
  height: 9px;
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
  background: #9a9a92;
}

#max-box[data-v-0d5235ca] header .tabs .battery-wrap .battery .show-num {
  height: auto !important;
  max-width: 100%;
  border-radius: 3px;
}

#max-box[data-v-0d5235ca] header .tabs .battery-wrap .battery .charging_img {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  z-index: 1;
}

#max-box[data-v-0d5235ca] header .tabs .battery-wrap .battery > span {
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #fff !important;
}

/* font launchera (pliki na serwerze, poprawny format) */
@font-face { font-family: "Work Sans"; src: url("/assets/fonts/WorkSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/assets/fonts/WorkSans-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/assets/fonts/WorkSans-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/assets/fonts/WorkSans-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

#app,
.el-overlay,
.el-popper {
  font-family: "Work Sans", Arial, sans-serif;
}

#main[data-v-43926afd] main h1,
#max-box .title-header > span,
#max-box .title-header span.fs-18,
#Preview[data-v-aeed31f4] .right-wrap::before {
  font-weight: 600 !important;
}

#max-box .mouse-btn,
#main[data-v-43926afd] main .maxs-btn,
#main[data-v-43926afd] footer .inner-box .left-box div {
  font-weight: 500 !important;
}

/* kafel zapamietanej myszy: nazwa lzejsza, etykiety zamiast ikonek */
#main[data-v-43926afd] main .history_devices .history_device .demo_product_name {
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

#main[data-v-43926afd] main .history_devices .history_device .img-btn {
  top: 18px !important;
  width: auto !important;
  height: 26px !important;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #4a4a4a;
  background: rgba(0, 0, 0, 0.45) !important;
  font-size: 0 !important;
  color: transparent;
}

#main[data-v-43926afd] main .history_devices .history_device .reportRate_img { left: 18px !important; }
#main[data-v-43926afd] main .history_devices .history_device .isWired_img { right: 18px !important; }

#main[data-v-43926afd] main .history_devices .history_device .img-btn::before {
  display: none;
}

#main[data-v-43926afd] main .history_devices .history_device .img-btn::after {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #d6d6d6;
}

#main[data-v-43926afd] main .history_devices .history_device .reportRate_img::after { color: #dae342; }
#main[data-v-43926afd] main .history_devices .history_device .reportRate_img[style*="8000.png"]::after { content: "8000 Hz"; }
#main[data-v-43926afd] main .history_devices .history_device .reportRate_img[style*="4000.png"]::after { content: "4000 Hz"; }
#main[data-v-43926afd] main .history_devices .history_device .reportRate_img[style*="2000.png"]::after { content: "2000 Hz"; }
#main[data-v-43926afd] main .history_devices .history_device .reportRate_img:not([style*="000.png"]) { display: none; }

html[lang="pl"] #main .history_device .isWired_img.icon-wifi::after { content: "Bezprzewodowa"; }
html[lang="pl"] #main .history_device .isWired_img:not(.icon-wifi)::after { content: "Przewodowa"; }
html[lang="en"] #main .history_device .isWired_img.icon-wifi::after { content: "Wireless"; }
html[lang="en"] #main .history_device .isWired_img:not(.icon-wifi)::after { content: "Wired"; }

/* ekran powitalny: kafel zapamietanej myszy przy lewej krawedzi, jak reszta tresci */
#main[data-v-43926afd] main .history_devices {
  justify-content: flex-start !important;
  margin: 24px 0 40px;
}

#main[data-v-43926afd] main .history_devices .history_device {
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 20px !important;
  background-color: rgba(40, 40, 40, 0.5) !important;
  transition: border-color 0.2s, background-color 0.2s;
}

#main[data-v-43926afd] main .history_devices .history_device:hover {
  border-color: rgba(218, 227, 66, 0.35) !important;
  background-color: rgba(52, 52, 52, 0.6) !important;
}

#main[data-v-43926afd] main .history_devices .history_device .mack {
  background: rgba(0, 0, 0, 0.25) !important;
  border-radius: 20px !important;
}

#main[data-v-43926afd] main .history_devices .history_device .device-image-container {
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  background-origin: content-box !important;
  padding: 58px 36px 6px;
  margin: 0;
}

#config .ul-sensor span,
#config .ul-sensor .el-checkbox__label {
  font-size: 15px !important;
}

/* listy rozwijane (select, cascader, dropdown) - wstawiane do body, kolory ze zmiennych motywu */
.el-popper {
  --theme-color: #222;
  --hover-color: #333;
  --font-color: #d6d6d6;
  --font-fixed-color: #d6d6d6;
  --border-color: #444;
}

.el-popper.is-light,
.el-popper.el-select__popper,
.el-popper.el-cascader__dropdown,
.el-popper.el-dropdown__popper {
  background: #222 !important;
  border: 1px solid #444 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55) !important;
  overflow: hidden;
}

.el-popper .el-popper__arrow::before {
  background: #222 !important;
  border-color: #444 !important;
}

.el-cascader-menu {
  background: #222 !important;
  border-color: #3a3a3a !important;
  color: #d6d6d6 !important;
}

.el-cascader-node,
.el-select-dropdown__item,
.el-dropdown-menu__item {
  color: #d6d6d6 !important;
  font-weight: 400 !important;
  border-radius: 8px;
}

/* odstepy w menu: pozycje nie stykaja sie ze soba ani z krawedzia */
.el-cascader-menu__list,
.el-select-dropdown__list,
.el-dropdown-menu {
  padding: 6px !important;
}

.el-cascader-menu {
  min-width: 200px;
}

.el-cascader-node,
.el-select-dropdown__item {
  position: relative;
  height: 36px !important;
  min-height: 36px;
  line-height: 36px !important;
  margin: 0 0 2px !important;
  padding: 0 34px 0 34px !important;
  font-size: 14px !important;
}

.el-cascader-node:last-child,
.el-select-dropdown__item:last-child {
  margin-bottom: 0 !important;
}

.el-cascader-node .el-cascader-node__label {
  padding: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-cascader-node .el-cascader-node__prefix {
  position: absolute !important;
  left: 12px !important;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #dae342 !important;
}

.el-cascader-node .el-cascader-node__postfix {
  position: absolute !important;
  right: 12px !important;
  top: 50%;
  transform: translateY(-50%);
}

.el-select-dropdown__item.is-selected::after {
  right: 12px !important;
}

.el-cascader-node:not(.is-disabled):hover,
.el-cascader-node:not(.is-disabled):focus,
.el-select-dropdown__item.is-hovering,
.el-select-dropdown__item:hover,
.el-dropdown-menu__item:not(.is-disabled):hover {
  width: auto !important;
  background: #333 !important;
  color: #fff !important;
}

.el-cascader-node.in-active-path,
.el-cascader-node.is-active,
.el-cascader-node.is-selectable.in-checked-path,
.el-select-dropdown__item.is-selected {
  background: rgba(218, 227, 66, 0.12) !important;
  color: #dae342 !important;
  font-weight: 600 !important;
}

.el-cascader-node .el-icon,
.el-select-dropdown__item .el-icon {
  color: inherit !important;
}

.el-popper span {
  color: inherit !important;
}

/* okna aplikacji (np. „Trwa aktualizacja ustawien”) - wstawiane do body */
.el-overlay .el-dialog,
.el-overlay .el-message-box {
  background: #222 !important;
  border: 1px solid #444 !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
}

.el-overlay .el-dialog__headerbtn:hover .el-dialog__close {
  color: #dae342 !important;
}

/* ===== zakladki opcji: wspolna warstwa ===== */

/* limonkowe elementy dostaja ciemny tekst */
#max-box[data-v-0d5235ca] {
  --font-fixed-color: #111;
}

/* ta sama kolumna 1200 px co reszta launchera */
#mouseKey[data-v-12d81a0c],
#config[data-v-9dbb8966],
#macro[data-v-49695a8c],
#lighting[data-v-9ce4ef3f],
#advancedSet[data-v-6b43e8a5],
#setting[data-v-820fa41f] {
  padding: 36px max(60px, calc((100% - 1200px) / 2)) 40px;
}

#config[data-v-9dbb8966],
#lighting[data-v-9ce4ef3f],
#advancedSet[data-v-6b43e8a5],
#setting[data-v-820fa41f] {
  row-gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}

#config > .item-wrap,
#lighting > div,
#advancedSet > div {
  min-width: 0;
}

#macro > .wrap-item:last-child {
  width: auto;
  min-width: 360px;
}

#setting #setup {
  row-gap: 20px;
}

/* sekcje jako karty */
#config > .item-wrap,
#lighting > div,
#advancedSet > div,
#setting #setup > .item-wrap,
#macro > .wrap-item:last-child {
  padding: 24px 28px;
  background: rgba(40, 40, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

#lighting > div:empty,
#advancedSet > div:empty {
  display: none;
}

/* tytuly sekcji: kreska zamiast ikony */
#max-box .title-header {
  margin-bottom: 18px !important;
}

#max-box .title-header .icon-title {
  width: 4px;
  height: 18px;
  font-size: 0 !important;
  border-radius: 2px;
  background: #dae342;
}

#max-box .title-header > span,
#max-box .title-header span.fs-18 {
  margin-left: 12px !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #fff !important;
}

/* przyciski: spokojne, limonka tylko dla glownej akcji */
#max-box .mouse-btn,
#main[data-v-43926afd] footer .inner-box .left-box div {
  min-height: 38px;
  height: auto !important;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #454545 !important;
  border-radius: 10px !important;
  background: #2a2a2a !important;
  color: #ececec !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 0.15s, border-color 0.15s;
}

#max-box .mouse-btn span {
  color: inherit !important;
  transform: none !important;
}

#max-box .mouse-btn:hover,
#main[data-v-43926afd] footer .inner-box .left-box div:hover {
  background: #333 !important;
  border-color: #5c5c5c !important;
  color: #fff !important;
  transform: none !important;
}

/* glowne akcje: Zapisz (makra), Podlacz mysz (ekran powitalny) */
#macro .mouse-btn.Save-btn,
#main[data-v-43926afd] main .maxs-btn {
  border-color: #dae342 !important;
  background: #dae342 !important;
  color: #111 !important;
  font-weight: 600 !important;
}

#macro .mouse-btn.Save-btn:hover,
#main[data-v-43926afd] main .maxs-btn:hover {
  border-color: #e4ec6a !important;
  background: #e4ec6a !important;
  color: #111 !important;
  transform: none !important;
}

#main[data-v-43926afd] main .maxs-btn {
  min-height: 42px;
  padding: 0 24px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

#main[data-v-43926afd] footer .inner-box .left-box div {
  font-size: 15px !important;
  letter-spacing: 0.01em;
  text-transform: none !important;
}

/* listy rozwijane i pola */
#max-box .el-select__wrapper,
#max-box .el-input .el-input__wrapper {
  border: 1px solid #4a4a4a !important;
  border-radius: 10px !important;
  background-color: rgba(0, 0, 0, 0.3) !important;
}

#max-box .el-select__wrapper:hover,
#max-box .el-input .el-input__wrapper:hover {
  border-color: #dae342 !important;
}

/* Przyciski: numerowane kolka i listy */
#mouseKey .left-box .top-box .nums {
  border-radius: 50% !important;
  border-color: transparent !important;
  font-weight: 700;
}

/* Sensor: poziomy DPI i czestotliwosc */
#Sensor .item-wrap .ul-color li {
  border-radius: 12px !important;
  border-color: #4a4a4a !important;
  background: rgba(0, 0, 0, 0.3);
}

/* Sensor (#config): rzedy wypelniaja karte, zaokraglone przyciski */
#config > .item-wrap > *,
#config .slider-wrap,
#config .ul-color,
#config .ul-reporting-rate {
  width: auto !important;
  max-width: 100%;
}

#config .ul-color li {
  border-radius: 12px !important;
  border-color: #4a4a4a !important;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

#config .ul-reporting-rate {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start !important;
}

#config .ul-reporting-rate li {
  margin: 0 !important;
  padding: 0 18px;
  border-radius: 999px !important;
  border-color: #4a4a4a !important;
}

#config .ul-reporting-rate li:hover {
  border-color: #dae342 !important;
  box-shadow: none !important;
}

#config .ul-reporting-rate .active-rate {
  color: #111 !important;
  border-color: #dae342 !important;
}

/* Makra: trzy kolumny, listy w kartach */
#macro[data-v-49695a8c] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 540px;
  column-gap: 24px;
  align-items: start;
  height: auto;
}

#macro > .wrap-item {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}

#macro .wrap-item .wrap-roll {
  height: 480px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 16px;
  background: rgba(40, 40, 40, 0.5);
  overflow: hidden;
}

#macro .wrap-item .btn-box {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

#macro .wrap-item .btn-box .mouse-btn {
  width: auto !important;
  margin: 0 !important;
}

#macro > .wrap-item:last-child > *,
#macro > .wrap-item:last-child .mouse-btn,
#macro > .wrap-item:last-child .max-input,
#macro > .wrap-item:last-child .min-width,
#macro > .wrap-item:last-child .el-select {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

#macro > .wrap-item:last-child .el-radio__label,
#macro > .wrap-item:last-child .el-checkbox__label,
#macro > .wrap-item:last-child span {
  font-size: 15px !important;
}

#config > .item-wrap {
  box-sizing: border-box;
  width: auto !important;
  max-width: 100%;
}

#macro .wrap-item > span.mb-16 {
  font-size: 17px !important;
  font-weight: 700;
  color: #fff;
}

#macro .wrap-item .wrap-roll ul .li-active,
#macro .wrap-item .wrap-roll ul .li-actives {
  color: #111;
}

/* suwaki, przelaczniki, wybor */
#max-box .el-slider__runway {
  background-color: #3a3a3a !important;
}

#max-box .el-switch__core {
  border-color: #4a4a4a !important;
  background-color: #3a3a3a !important;
}

#max-box .el-switch.is-checked .el-switch__core {
  border-color: #dae342 !important;
  background-color: #dae342 !important;
}

#max-box .el-checkbox__inner,
#max-box .el-radio__inner {
  border-color: #6a6a6a !important;
}

/* podglad: obrazek + karta z danymi */
#Preview[data-v-aeed31f4] {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 40px;
  grid-template-columns: 1fr 440px;
  column-gap: 60px;
  align-items: center;
}

#Preview[data-v-aeed31f4] .left-wrap {
  height: 100%;
}

#Preview[data-v-aeed31f4] .left-wrap .mouse {
  width: 90%;
  height: 80%;
}

#Preview[data-v-aeed31f4] .right-wrap {
  align-items: stretch;
  padding: 26px 30px 0;
  background: rgba(40, 40, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

#Preview[data-v-aeed31f4] .right-wrap::before,
#Preview[data-v-aeed31f4] .right-wrap .mt-30::before {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

#Preview[data-v-aeed31f4] .right-wrap .mt-30::before {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #8a8a8a;
}

html[lang="pl"] #Preview .right-wrap::before { content: "Aktualne ustawienia"; }
html[lang="en"] #Preview .right-wrap::before { content: "Current settings"; }
html[lang="pl"] #Preview .right-wrap .mt-30::before { content: "Oprogramowanie"; }
html[lang="en"] #Preview .right-wrap .mt-30::before { content: "Firmware"; }

#Preview[data-v-aeed31f4] .right-wrap .item-li {
  height: auto;
  margin: 0;
  padding: 15px 0;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#Preview[data-v-aeed31f4] .right-wrap > .item-li:nth-child(5),
#Preview[data-v-aeed31f4] .right-wrap .mt-30 .item-li:last-child {
  border-bottom: 0;
}

#Preview[data-v-aeed31f4] .right-wrap .item-li .title {
  color: #a9a9a9;
}

#Preview[data-v-aeed31f4] .right-wrap .item-li .text-value {
  width: auto;
  height: auto;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background-color: transparent;
  border-radius: 0;
}

#Preview[data-v-aeed31f4] .right-wrap .item-li:first-child .text-value {
  color: #dae342;
}

#Preview[data-v-aeed31f4] .right-wrap .mt-30 {
  margin: 10px -30px 0 !important;
  padding: 20px 30px 8px;
  background: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#Preview[data-v-aeed31f4] .right-wrap .mt-30 .item-li {
  padding: 10px 0;
  font-size: 14px;
}

#Preview[data-v-aeed31f4] .right-wrap .mt-30 .item-li .text-value {
  font-size: 14px;
  font-weight: 600;
  color: #d6d6d6;
}

/* Zapisz nieaktywny, dopoki nie wybrano makra */
#macro .mouse-btn.Save-btn.no-click,
#macro .mouse-btn.Save-btn.no-click:hover {
  opacity: 0.4;
  cursor: not-allowed !important;
  border-color: #dae342 !important;
  background: #dae342 !important;
}

/* menu: sciezka neutralnie, limonka tylko przy zaznaczonej pozycji; kolumna bez ucinania */
.el-cascader-node.in-active-path:not(.is-active) {
  background: #2e2e2e !important;
  color: #fff !important;
  font-weight: 500 !important;
}

.el-cascader-menu__wrap.el-scrollbar__wrap {
  height: auto !important;
  max-height: 320px;
}

.el-cascader-menu {
  height: auto !important;
}

/* Sensor: poziomy DPI - spokojne kafelki, cienki pasek koloru diody */
#config .ul-color {
  gap: 12px;
}

#config .ul-color li,
#config .ul-color li.active-li {
  width: 96px !important;
  min-width: 96px !important;
  height: 56px !important;
  margin: 0 !important;
  border: 1px solid #454545 !important;
  border-radius: 10px !important;
  background: #2a2a2a !important;
  transition: border-color 0.15s, background-color 0.15s;
}

#config .ul-color li:hover {
  border-color: #5c5c5c !important;
  background: #333 !important;
}

#config .ul-color li.active-li {
  border-color: rgba(218, 227, 66, 0.7) !important;
  background: rgba(218, 227, 66, 0.08) !important;
}

#config .ul-color li span {
  top: 40% !important;
  font-size: 15px !important;
  font-weight: 500;
  color: #ececec !important;
}

#config .ul-color li.active-li span {
  color: #fff !important;
  font-weight: 600;
}

#config .ul-color li #color-li {
  left: 14px !important;
  right: 14px !important;
  bottom: 0 !important;
  width: auto !important;
  height: 14px !important;
  padding: 8px 0 3px;
  box-sizing: border-box;
  background-clip: content-box !important;
  border-radius: 2px;
  transform: none !important;
}

#config .ul-color li .current {
  display: none !important;
}

/* Sensor: czestotliwosc raportowania jak zwykle przyciski */
#config .ul-reporting-rate {
  gap: 10px !important;
}

#config .ul-reporting-rate li {
  width: auto !important;
  min-width: 84px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border: 1px solid #454545 !important;
  border-radius: 10px !important;
  background: #2a2a2a !important;
  color: #ececec !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  transform: none !important;
}

#config .ul-reporting-rate li:hover {
  border-color: #5c5c5c !important;
  background: #333 !important;
  box-shadow: none !important;
  transform: none !important;
}

#config .ul-reporting-rate li.active-rate {
  border-color: rgba(218, 227, 66, 0.7) !important;
  background: rgba(218, 227, 66, 0.08) !important;
  color: #dae342 !important;
  font-weight: 600 !important;
}

/* ===== Sensor: poziomy DPI v2 - karty z podpisem, wartoscia i probka koloru ===== */

/* naglowek: tytul po lewej, liczba poziomow po prawej */
#config > .item-wrap > .flex-start-center.mb-10 {
  display: flex !important;
  align-items: center !important;
  margin-bottom: 22px !important;
}

#config > .item-wrap > .flex-start-center.mb-10 .title-header {
  margin-bottom: 0 !important;
}

#config > .item-wrap > .flex-start-center.mb-10 .el-select {
  position: relative;
  width: 88px !important;
  margin-left: auto !important;
}

#config > .item-wrap > .flex-start-center.mb-10 .el-select::before {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #9a9a92;
  white-space: nowrap;
}

html[lang="pl"] #config > .item-wrap > .flex-start-center.mb-10 .el-select::before { content: "Liczba poziomów"; }
html[lang="en"] #config > .item-wrap > .flex-start-center.mb-10 .el-select::before { content: "Number of levels"; }

/* suwak */
#config .slider-wrap {
  margin-bottom: 22px !important;
}

#config .slider-wrap .el-slider__runway {
  height: 4px !important;
  border-radius: 2px !important;
  background-color: #3a3a3a !important;
}

#config .slider-wrap .el-slider__bar {
  height: 4px !important;
  border-radius: 2px !important;
  background-color: #dae342 !important;
}

#config .slider-wrap .el-slider__button {
  width: 18px !important;
  height: 18px !important;
  border: 3px solid #1a1a1a !important;
  background: #dae342 !important;
  box-shadow: 0 0 0 1px rgba(218, 227, 66, 0.6) !important;
}

/* karty poziomow */
#config .ul-color {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px !important;
  width: 100% !important;
  counter-reset: sg-dpi;
}

#config .ul-color li,
#config .ul-color li.active-li {
  counter-increment: sg-dpi;
  position: relative;
  width: auto !important;
  min-width: 0 !important;
  height: 92px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  justify-content: space-between;
  text-align: left !important;
  border: 1px solid #3f3f3f !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #2c2c2c 0%, #262626 100%) !important;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

#config .ul-color li:hover {
  border-color: #595959 !important;
  background: #2f2f2f !important;
}

/* podpis „Poziom N” */
#config .ul-color li::before {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #8f8f88;
}

html[lang="pl"] #config .ul-color li::before { content: "Poziom " counter(sg-dpi); }
html[lang="en"] #config .ul-color li::before { content: "Level " counter(sg-dpi); }

/* wartosc DPI */
#config .ul-color li span,
#config .ul-color li span.dpiVal {
  position: static !important;
  transform: none !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: #f2f2f2 !important;
}

#config .ul-color li span::after {
  content: " DPI";
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #8f8f88;
}

/* probka koloru diody w prawym gornym rogu (klikalna jak wczesniej) */
#config .ul-color li #color-li {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  width: 22px !important;
  height: 22px !important;
  padding: 4px !important;
  box-sizing: border-box;
  border-radius: 50% !important;
  background-clip: content-box !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: none !important;
  cursor: pointer;
}

#config .ul-color li #color-li:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

/* wybrany poziom */
#config .ul-color li.active-li {
  border-color: rgba(218, 227, 66, 0.75) !important;
  background: linear-gradient(180deg, rgba(218, 227, 66, 0.1) 0%, rgba(218, 227, 66, 0.04) 100%) !important;
}

#config .ul-color li.active-li::before {
  color: #dae342;
}

#config .ul-color li.active-li span {
  color: #dae342 !important;
}

#config .ul-color li .current {
  display: none !important;
}

/* ===== suwaki (poziome) we wszystkich zakladkach ===== */
#max-box .el-slider:not(.is-vertical) .el-slider__runway {
  height: 4px !important;
  border-radius: 2px !important;
  background-color: #3a3a3a !important;
}

#max-box .el-slider:not(.is-vertical) .el-slider__bar {
  height: 4px !important;
  border-radius: 2px !important;
  background-color: #dae342 !important;
}

#max-box .el-slider:not(.is-vertical) .el-slider__button {
  width: 16px !important;
  height: 16px !important;
  border: 3px solid #1a1a1a !important;
  background: #dae342 !important;
  box-shadow: 0 0 0 1px rgba(218, 227, 66, 0.6) !important;
}

#max-box .el-slider__runway.is-disabled .el-slider__bar {
  background-color: #5c5c5c !important;
}

#max-box .el-slider__runway.is-disabled .el-slider__button {
  background: #7a7a7a !important;
  box-shadow: 0 0 0 1px #5c5c5c !important;
}

/* ===== Podswietlenie: efekty diody DPI ===== */
#DpiLight .ul-sensor {
  display: grid !important;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr) !important;
  column-gap: 56px !important;
  align-items: start !important;
}

#DpiLight .ul-sensor > li {
  font-size: 14px !important;
}

#DpiLight .ul-sensor > li:first-child {
  display: flex !important;
  flex-direction: column;
  gap: 8px;
}

#DpiLight .ul-sensor > li:first-child::before {
  font-size: 13px;
  color: #9a9a92;
}

html[lang="pl"] #DpiLight .ul-sensor > li:first-child::before { content: "Efekt"; }
html[lang="en"] #DpiLight .ul-sensor > li:first-child::before { content: "Effect"; }

#DpiLight .ul-sensor li .max-width {
  width: 100% !important;
}

#DpiLight .ul-sensor > li:last-child {
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  gap: 16px;
  padding-top: 26px;
}

#DpiLight .ul-sensor > li:last-child > div {
  display: grid !important;
  grid-template-columns: 96px minmax(0, 1fr) 44px;
  align-items: center;
  column-gap: 16px;
  margin: 0 !important;
}

#DpiLight .ul-sensor li .slider {
  width: auto !important;
  margin: 0 !important;
}

#DpiLight .ul-sensor li .span-left {
  width: auto !important;
  font-size: 14px !important;
  color: #d6d6d0 !important;
}

#DpiLight .ul-sensor > li:last-child > div > span:last-child {
  display: block !important;
  padding: 4px 0;
  border: 1px solid #3f3f3f;
  border-radius: 8px;
  background: #262626;
  text-align: center;
  font-size: 13px !important;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #ececec !important;
}

/* przygaszony tylko ten suwak, ktorego efekt nie obsluguje */
#DpiLight .ul-sensor > li:last-child > div:has(.is-disabled) {
  opacity: 0.4;
}

/* podpowiedz tylko gdy oba suwaki sa wylaczone (efekt „Wyl”) */
#DpiLight .ul-sensor > li:last-child:has(> div:first-child .is-disabled):has(> div:last-child .is-disabled)::after {
  font-size: 12.5px;
  color: #9a9a92;
}

html[lang="pl"] #DpiLight .ul-sensor > li:last-child:has(> div:first-child .is-disabled):has(> div:last-child .is-disabled)::after { content: "Wybierz efekt, aby ustawić jasność i prędkość."; }
html[lang="en"] #DpiLight .ul-sensor > li:last-child:has(> div:first-child .is-disabled):has(> div:last-child .is-disabled)::after { content: "Choose an effect to adjust brightness and speed."; }

/* lista efektow: tekst do lewej jak reszta sekcji */
#DpiLight .el-select__selection,
#DpiLight .el-select__placeholder,
#DpiLight .el-select__placeholder span {
  justify-content: flex-start !important;
  text-align: left !important;
}

#DpiLight .el-select__wrapper {
  padding-left: 14px !important;
}

/* karty sygnalizacji LED rowne wysokoscia */
#lighting #receiverStatus .el-radio-group {
  align-items: stretch !important;
}

/* ===== Podswietlenie: sygnalizacja LED odbiornika jako karty wyboru ===== */
#lighting #receiverStatus .el-radio-group {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  width: 100%;
}

#lighting #receiverStatus .el-radio-group > div {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid #3f3f3f;
  border-radius: 12px;
  background: #262626;
  transition: border-color 0.15s, background-color 0.15s;
}

#lighting #receiverStatus .el-radio-group > div:hover {
  border-color: #595959;
  background: #2c2c2c;
}

#lighting #receiverStatus .el-radio-group > div:has(.el-radio.is-checked) {
  border-color: rgba(218, 227, 66, 0.75);
  background: rgba(218, 227, 66, 0.07);
}

/* cala karta klika przelacznik */
#lighting #receiverStatus .el-radio-group .el-radio {
  position: static !important;
  height: auto !important;
  margin: 0 !important;
}

#lighting #receiverStatus .el-radio-group .el-radio::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  cursor: pointer;
}

#lighting #receiverStatus .el-radio-group .el-radio__label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f2f2f2 !important;
}

#lighting #receiverStatus .el-radio-group .el-radio.is-checked .el-radio__label {
  color: #dae342 !important;
}

#lighting #receiverStatus .el-radio-group > div > span {
  padding-left: 22px;
  font-size: 13px !important;
  line-height: 1.55;
  color: #a3a39a !important;
}

/* ===== spojnosc z karta „Aktualne ustawienia” ===== */

/* tytuly sekcji: bez limonkowej kreski, jak w Podgladzie */
#max-box .title-header .icon-title {
  display: none !important;
}

#max-box .title-header > span,
#max-box .title-header span.fs-18 {
  margin-left: 0 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
}

/* Ustawienia i Zaawansowane: jedna karta z wierszami „nazwa - kontrolka” */
#setting #setup,
#advancedSet[data-v-6b43e8a5] {
  row-gap: 0 !important;
}

#setting #setup {
  box-sizing: border-box;
  width: 100% !important;
  padding: 26px 30px 8px;
  background: rgba(40, 40, 40, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

#advancedSet[data-v-6b43e8a5]::before,
#setting #setup::before {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}

html[lang="pl"] #setting #setup::before { content: "Ustawienia urządzenia"; }
html[lang="en"] #setting #setup::before { content: "Device settings"; }
html[lang="pl"] #advancedSet[data-v-6b43e8a5]::before { content: "Ustawienia zaawansowane"; }
html[lang="en"] #advancedSet[data-v-6b43e8a5]::before { content: "Advanced settings"; }

/* Zaawansowane: karta skladana z naglowka (::before) i wierszy */
#advancedSet[data-v-6b43e8a5] {
  align-content: start;
}

#advancedSet #AngularMode {
  border-radius: 0 0 20px 20px !important;
}

#advancedSet[data-v-6b43e8a5]::before {
  padding: 26px 30px 8px;
  margin-bottom: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  background: rgba(40, 40, 40, 0.5);
}

/* wiersze */
#setting #setup > .item-wrap,
#advancedSet[data-v-6b43e8a5] > div:not([style*="display: none"]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  row-gap: 8px;
  margin: 0 !important;
  padding: 16px 0 !important;
  background: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

#advancedSet[data-v-6b43e8a5] > div:not([style*="display: none"]) {
  padding: 16px 30px !important;
  border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(40, 40, 40, 0.5) !important;
}

#advancedSet[data-v-6b43e8a5] > div:has(+ div[style*="display: none"]),
#advancedSet[data-v-6b43e8a5] > div:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#setting #setup > .item-wrap:last-child {
  border-bottom: 0 !important;
}

/* zawartosc w wierszu: nazwa po lewej, kontrolka po prawej */
#advancedSet[data-v-6b43e8a5] > div > .wrap {
  display: contents !important;
}

#setting #setup > .item-wrap > .title-header,
#advancedSet[data-v-6b43e8a5] > div .title-header {
  grid-column: 1;
  margin: 0 !important;
}

#setting #setup > .item-wrap > .title-header > span,
#advancedSet[data-v-6b43e8a5] > div .title-header > span {
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: #a9a9a9 !important;
}

#setting #setup > .item-wrap > :not(.title-header),
#advancedSet[data-v-6b43e8a5] > div > .wrap > :not(.title-header) {
  grid-column: 2;
  justify-self: end;
  margin: 0 !important;
}

/* informacje o urzadzeniu: wersje po prawej, jak w Podgladzie */
#setting #setup > .item-wrap:not(:has(.el-select)):not(:has(.mouse-btn)) > :not(.title-header),
#setting #setup > .item-wrap:not(:has(.el-select)):not(:has(.mouse-btn)) > :not(.title-header) * {
  font-size: 14px !important;
  font-weight: 600;
  color: #f2f2f2 !important;
  text-align: right;
}

#setting #setup .mouse-btn {
  min-width: 160px;
}

/* daleki zasieg i korekcja kata: tresc pod nazwa, na cala szerokosc */
#advancedSet #LongMode,
#advancedSet #AngularMode {
  grid-template-columns: minmax(0, 1fr) !important;
}

#advancedSet #LongMode .wrap > :not(.title-header),
#advancedSet #AngularMode .wrap > :not(.title-header) {
  grid-column: 1 !important;
  justify-self: start !important;
}

#advancedSet #AngularMode .wrap > :not(.title-header) {
  width: 260px !important;
  min-width: 260px;
}

#setting #setup .device-info,
#setting #setup .device-info * {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.9;
  color: #f2f2f2 !important;
  text-align: right;
}

/* ===== Ekran powitalny: zapamietana mysz jako poziomy pasek na cala kolumne ===== */
#main[data-v-43926afd] main .history_devices {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  width: auto !important;
  margin: 24px 0 36px !important;
}

#main[data-v-43926afd] main .history_devices .history_device {
  position: relative;
  width: auto !important;
  height: 140px !important;
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 24px;
  padding: 0 28px 0 0 !important;
  box-sizing: border-box;
  border-radius: 20px !important;
  overflow: hidden;
}

/* obrazek po lewej; etykiety kotwicza sie do calego paska */
#main[data-v-43926afd] main .history_devices .history_device .device-image-container {
  position: static !important;
  grid-column: 1;
  height: 140px !important;
  padding: 0 !important;
  box-sizing: border-box;
  background-origin: border-box !important;
  background-size: auto 125% !important;
  background-position: 50% 50% !important;
}

/* nazwa i podpis w srodku */
#main[data-v-43926afd] main .history_devices .history_device .device-name-container {
  grid-column: 2;
  height: auto !important;
  padding: 0 0 34px !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 4px;
}

#main[data-v-43926afd] main .history_devices .history_device .device-name-container::before {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f8f88;
}

html[lang="pl"] #main .history_device .device-name-container::before { content: "Ostatnio podłączona"; }
html[lang="en"] #main .history_device .device-name-container::before { content: "Last connected"; }

#main[data-v-43926afd] main .history_devices .history_device .demo_product_name {
  width: auto !important;
  text-align: left !important;
  font-size: 22px !important;
  font-weight: 600 !important;
}

/* etykiety pod nazwa */
#main[data-v-43926afd] main .history_devices .history_device .img-btn {
  top: auto !important;
  bottom: 30px !important;
}

#main[data-v-43926afd] main .history_devices .history_device .reportRate_img {
  left: 264px !important;
  right: auto !important;
}

#main[data-v-43926afd] main .history_devices .history_device .isWired_img {
  left: 356px !important;
  right: auto !important;
}

/* akcja po prawej (klik trafia w caly pasek, jak dotad) */
#main[data-v-43926afd] main .history_devices .history_device::after {
  grid-column: 3;
  padding: 10px 18px;
  border-radius: 10px;
  background: #dae342;
  color: #111;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

html[lang="pl"] #main .history_devices .history_device::after { content: "Otwórz ustawienia →"; }
html[lang="en"] #main .history_devices .history_device::after { content: "Open settings →"; }

#main[data-v-43926afd] main .history_devices .history_device:hover::after {
  background: #e4ec6a;
}

/* Podswietlenie: tylko „Efekty diody DPI” - opcje sygnalizacji LED odbiornika nie zmieniaja niczego na stacji (test 2026-09-17) */
#lighting #receiverStatus {
  display: none !important;
}

/* ===== Sensor: pole liczby DPI ===== */
#config .slider-wrap .el-input-number {
  width: 164px !important;
  height: 40px !important;
  line-height: 38px !important;
}

#config .slider-wrap .el-input-number .el-input__wrapper {
  height: 40px !important;
  padding: 0 44px !important;
  border: 1px solid #454545 !important;
  border-radius: 10px !important;
  background: #262626 !important;
  box-shadow: none !important;
}

#config .slider-wrap .el-input-number:hover .el-input__wrapper,
#config .slider-wrap .el-input-number .el-input__wrapper.is-focus {
  border-color: #6a6a62 !important;
}

#config .slider-wrap .el-input-number .el-input__inner {
  height: 38px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: #f2f2f2 !important;
  text-align: center !important;
}

#config .slider-wrap .el-input-number__decrease,
#config .slider-wrap .el-input-number__increase {
  top: 1px !important;
  bottom: 1px !important;
  width: 38px !important;
  height: auto !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 0 !important;
  color: #9a9a92 !important;
  font-size: 14px !important;
  transition: background-color 0.15s, color 0.15s;
}

#config .slider-wrap .el-input-number__decrease {
  left: 1px !important;
  border-right: 1px solid #3a3a3a !important;
  border-radius: 9px 0 0 9px !important;
}

#config .slider-wrap .el-input-number__increase {
  right: 1px !important;
  border-left: 1px solid #3a3a3a !important;
  border-radius: 0 9px 9px 0 !important;
}

#config .slider-wrap .el-input-number__decrease:hover,
#config .slider-wrap .el-input-number__increase:hover {
  background: #303030 !important;
  color: #fff !important;
}

#config .slider-wrap .el-input-number__decrease .el-icon,
#config .slider-wrap .el-input-number__increase .el-icon {
  font-size: 14px !important;
  color: inherit !important;
}

#config .slider-wrap .el-input-number__decrease .el-icon svg,
#config .slider-wrap .el-input-number__increase .el-icon svg {
  color: inherit !important;
}

/* ===== okno wyboru koloru diody ===== */
.el-popper.el-color-picker__panel,
.el-color-picker__panel.el-color-dropdown {
  width: 330px !important;
  padding: 14px !important;
  box-sizing: border-box;
  background: #222 !important;
  border: 1px solid #444 !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6) !important;
}

.el-color-dropdown__main-wrapper {
  display: flex;
  flex-direction: row-reverse;
  gap: 12px;
  margin-bottom: 14px !important;
}

.el-color-dropdown__main-wrapper::after {
  display: none !important;
}

.el-color-svpanel {
  flex: 1;
  width: auto !important;
  height: 180px !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.el-color-svpanel__white,
.el-color-svpanel__black {
  border-radius: 10px;
}

.el-color-svpanel__cursor > div {
  width: 14px !important;
  height: 14px !important;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.35), inset 0 0 1px 1px rgba(0, 0, 0, 0.3) !important;
  transform: translate(-7px, -7px) !important;
}

.el-color-hue-slider.is-vertical {
  float: none !important;
  width: 12px !important;
  height: 180px !important;
  padding: 0 !important;
  border-radius: 6px;
  overflow: visible;
}

.el-color-hue-slider__bar {
  border-radius: 6px !important;
}

.el-color-hue-slider__thumb {
  left: -2px !important;
  width: 16px !important;
  height: 8px !important;
  border: 2px solid #fff !important;
  border-radius: 4px !important;
  background: transparent !important;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45) !important;
}

.el-color-dropdown__btns {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  text-align: left !important;
}

.el-color-dropdown__value {
  flex: 1;
  min-width: 130px;
  width: auto !important;
  margin: 0 !important;
}

.el-color-dropdown__value .el-input__wrapper {
  height: 34px !important;
  padding: 0 10px !important;
  border: 1px solid #454545 !important;
  border-radius: 8px !important;
  background: #262626 !important;
  box-shadow: none !important;
}

.el-color-dropdown__value .el-input__inner {
  height: 32px !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
  color: #ececec !important;
  text-align: left !important;
}

.el-color-dropdown__btns .el-button {
  height: 34px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

.el-color-dropdown__btns .el-button span {
  font-size: 0 !important;
}

.el-color-dropdown__btns .el-button::after {
  font-size: 13px;
  font-weight: 600;
}

.el-color-dropdown__link-btn {
  padding: 0 6px !important;
  border: 0 !important;
  background: transparent !important;
}

.el-color-dropdown__link-btn::after {
  color: #9a9a92;
}

.el-color-dropdown__link-btn:hover::after {
  color: #fff;
}

.el-color-dropdown__btn {
  border: 1px solid #dae342 !important;
  background: #dae342 !important;
}

.el-color-dropdown__btn::after {
  color: #111;
}

.el-color-dropdown__btn:hover {
  border-color: #e4ec6a !important;
  background: #e4ec6a !important;
}

html:not([lang="pl"]):not([lang="en"]) .el-color-dropdown__btns .el-button,
html:not([lang="pl"]):not([lang="en"]) .el-color-dropdown__btns .el-button span {
  font-size: 13px !important;
}

html[lang="pl"] .el-color-dropdown__link-btn::after { content: "Wyczyść"; }
html[lang="en"] .el-color-dropdown__link-btn::after { content: "Clear"; }
html[lang="pl"] .el-color-dropdown__btn::after { content: "Zastosuj"; }
html[lang="en"] .el-color-dropdown__btn::after { content: "Apply"; }

#advancedSet #LongMode .el-checkbox__label {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55;
  white-space: normal !important;
  color: #d6d6d0 !important;
}