.settings-header,
.page-top-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 20px;
  min-height: 40px;
}

.settings-back-btn,
.page-back-btn,
.back-btn-squircle,
.back-btn {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--p-white);
  text-decoration: none;
  font-family: inherit;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: none !important;
  box-sizing: border-box;
  margin-bottom: 0;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .settings-back-btn:hover,
  .page-back-btn:hover,
  .back-btn-squircle:hover,
  .back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border: none !important;
    color: var(--p-white);
    transform: translateX(-2px);
    box-shadow: none !important;
  }
}


.settings-back-btn svg,
.page-back-btn svg,
.back-btn-squircle svg,
.back-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  flex-shrink: 0;
}

.settings-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.settings-title,
.page-top-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-800);
  color: var(--p-white);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  display: flex;
  align-items: center;
}

.settings-subtitle,
.page-top-subtitle,
.dr-header-subtitle {
  font-size: var(--text-13);
  color: var(--p-white-a50);
  font-weight: var(--fw-500);
  line-height: var(--leading-base);
  margin: 0;
}

/* ── Brand Hub ── */
.brand-hub-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 4px;
}
.brand-hub-card {
  background: linear-gradient(135deg, var(--p-cosmic-89-a28) 0%, var(--p-bg-0-a38) 50%, var(--p-cosmic-92-a38) 100%);
  border: 1px solid var(--p-white-a8, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  padding: 20px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  box-shadow: 0 8px 24px var(--p-black-a40), inset 0 1px 0 var(--p-white-a8, rgba(255, 255, 255, 0.08));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
  text-decoration: none;
  display: block;
}@media (hover: hover) {
.brand-hub-card:hover {
  transform: scale(1.02);
  border-color: var(--p-purple-a35, rgba(168, 85, 247, 0.35));
  box-shadow: 0 12px 32px var(--p-black-a50), 0 0 20px var(--p-purple-a15, rgba(168, 85, 247, 0.15)), inset 0 1px 0 var(--p-white-a12);
}
}

.brand-hub-card:active {
  transform: scale(0.98);
}
.brand-hub-icon {
  font-size: var(--text-3xl);
  margin-bottom: 8px;
}
.brand-hub-title {
  font-size: var(--text-base);
  font-weight: var(--fw-600);
  color: var(--text-primary, var(--p-white));
  margin-bottom: 4px;
}
.brand-hub-desc {
  font-size: var(--text-13);
  color: var(--text-muted, var(--color-text-muted));
  line-height: var(--leading-normal);
  margin-bottom: 8px;
}
.brand-hub-status {
  font-size: var(--text-sm);
  color: var(--text-muted, var(--color-text-muted));
}

/* ── Brand Style Section ─────────────────────────────────── */
.brand-style-section {
  padding: 0 16px 24px;
  min-height: 100vh;
}
.brand-style-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  position: sticky;
  top: 0;
  background: var(--color-surface-2);
  z-index: 10;
}
.brand-style-header h2 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--fw-600);
  color: var(--color-text);
}
.brand-style-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 40px;
}
.brand-style-preview {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--p-white-a6);
  margin-bottom: 6px;
}
.bsp-img {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.bsp-headline {
  font-size: var(--text-15);
  font-weight: var(--fw-700);
  color: var(--color-text);
  text-align: center;
  text-shadow: 0 1px 4px var(--p-black-a40);
}
.bsp-plate {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bsp-source {
  font-size: var(--text-xs);
  color: var(--p-white-a70);
}

/* Fields */
.brand-style-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bsf-label {
  font-size: var(--text-13);
  color: var(--p-white-a55);
  font-weight: var(--fw-500);
}
.bsf-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--p-white-a5);
  border: 1px solid var(--p-white-a8);
  border-radius: 10px;
  color: var(--color-text);
  font-size: var(--text-md);
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.bsf-input:focus {
  outline: none;
  border-color: var(--color-focus);
}
.bsf-select {
  width: 100%;
  padding: var(--field-padding);
  background: var(--p-white-a5);
  border: 1px solid var(--p-white-a8);
  border-radius: var(--field-radius);
  color: var(--color-text);
  font-size: var(--text-md);
  box-sizing: border-box;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
  background-image: var(--field-select-chevron);
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.bsf-select:focus {
  outline: none;
  border-color: var(--color-focus);
}
.bsf-select option {
  background: var(--color-dropdown);
  color: var(--p-white);
}
/* Searchable Select */
.searchable-select {
  position: relative;
  width: 100%;
  z-index: 10;
}
.searchable-select.open,
.searchable-select:focus-within {
  z-index: 10005 !important;
}
.searchable-select-input {
  width: 100%;
  padding: 12px 38px 12px 16px;
  background: var(--p-white-a4);
  border: 1px solid var(--p-white-a8);
  border-radius: 14px;
  color: var(--p-white);
  font-size: var(--text-md);
  font-weight: var(--fw-700);
  font-family: inherit;
  box-sizing: border-box;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.searchable-select-input:focus {
  outline: none;
  border-color: var(--p-purple-300);
  background: var(--p-white-a6);
  box-shadow: 0 0 0 3px var(--p-purple-a20), 0 4px 16px var(--p-black-a40);
}
.searchable-select-input::placeholder {
  color: var(--p-white-a30);
}
.searchable-select-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--p-cosmic-135-a98);
  border: 1px solid var(--p-purple-a35);
  border-radius: 16px;
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10005 !important;
  box-shadow: 0 16px 40px var(--p-black-a80), 0 0 24px var(--p-purple-300-a25);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-border) transparent;
}
.searchable-select-dropdown.open {
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: customSelectFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.searchable-select-option {
  padding: 10px 14px;
  font-size: var(--text-md);
  color: var(--p-white-a75);
  cursor: pointer;
  border-radius: 10px;
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight; transition-duration: 0.15s; transition-timing-function: ease;
}@media (hover: hover) {
.searchable-select-option:hover {
  background: var(--p-purple-a20);
  color: var(--p-white);
}
}
.searchable-select-option.highlight {
  background: var(--p-purple-a20);
  color: var(--p-white);
}

.searchable-select-option.selected {
  background: linear-gradient(135deg, var(--p-purple-300-a30) 0%, var(--p-pink-500-a30) 100%);
  color: var(--p-white);
  font-weight: var(--fw-700);
}
.searchable-select-option.no-results {
  color: var(--p-white-a35);
  cursor: default;
  padding: 12px 14px;
  text-align: center;
}@media (hover: hover) {
.searchable-select-option.no-results:hover {
  background: transparent;
  color: var(--p-white-a35);
}
}

.bsf-input-sm {
  flex: 1;
  max-width: 140px;
}
.bsf-textarea {
  resize: vertical;
  font-family: inherit;
}
.bsf-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bsf-color-row input[type="color"] {
  width: 40px;
  height: 40px;
  border: 2px solid var(--p-white-a15);
  border-radius: 8px;
  cursor: pointer;
  padding: 2px;
  background: transparent;
}
.bsf-hint {
  font-size: var(--text-xs);
  color: var(--p-white-a35);
}
.bsf-btn-outline {
  padding: 10px 16px;
  background: var(--p-white-a5);
  border: 1px solid var(--p-white-a10);
  border-radius: 10px;
  color: var(--p-white-a80);
  font-size: var(--text-13);
  cursor: pointer;
  width: fit-content;
}
.bsf-btn-primary {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--color-focus), var(--color-accent));
  border: none;
  border-radius: 12px;
  color: var(--color-text);
  font-size: var(--text-15);
  font-weight: var(--fw-600);
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 8px;
}
.bsf-btn-primary:disabled {
  opacity: 0.5;
  cursor: default;
}
.bsf-status {
  text-align: center;
  font-size: var(--text-13);
  min-height: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL LIORIS GLASSMORPHISM & BLUR SYSTEM
   Применяет единое стеклянное размытие, сатурацию, границы и
   световые блики ко всем карточкам, кнопкам и панелям Mini App.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ Apple iOS / macOS Liquid Dark Glass Material Standard ═══ */

.glass-card,
.brand-hub-card,
.settings-card,
.onboarding-card,
.token-package-card,
.tariff-card,
.account-card,
.accounts-header-card,
.analytics-card,
.draft-card,
.ce-toolbar-card,
.ce-card-module,
.ce-size-card,
.ce-sidebar-card,
.ce-preview-card,
.ce-editor-card,
.ch-mode-switcher,
.cal-view-card,
.cal-layer-card,
.cal-day-panel,
.partner-stat-card,
.grid-card,
.partner-hero,
.partner-link-display {
  background: linear-gradient(145deg, var(--p-cosmic-base-a45) 0%, var(--p-cosmic-deep-a60) 100%) !important;
  border: none !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  box-shadow: 0 12px 32px -4px var(--p-black-a55), inset 0 1px 0 0 var(--p-white-a16) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, background 0.25s !important;
}

/* Контент-плитки: сверху свет светит, внизу темно */
.content-tile {
  background: linear-gradient(180deg, var(--p-cosmic-105-a50) 0%, var(--p-cosmic-ink-a70) 100%) !important;
  border: none !important;
  backdrop-filter: blur(16px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(160%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, background 0.25s !important;
}@media (hover: hover) {
/* Ховеры и активные состояния карточек */
.content-tile:hover {
  transform: translateY(-2px) scale(1.01) !important;
  border: none !important;
  background: linear-gradient(180deg, var(--p-cosmic-132-a60) 0%, var(--p-cosmic-74-a80) 100%) !important;
}
}
@media (hover: hover) {
.brand-hub-card:hover,
.token-package-card:hover,
.tariff-card:hover,
.account-card:hover,
.draft-card:hover,
.ce-card-module:hover,
.ce-size-card:hover,
.grid-card:hover {
  transform: translateY(-2px) !important;
  border: none !important;
  background: linear-gradient(145deg, var(--p-cosmic-115-a55) 0%, var(--p-cosmic-116-a70) 100%) !important;
  box-shadow: 0 16px 40px -4px var(--p-black-a70), 0 0 24px var(--p-purple-a15), inset 0 1px 0 0 var(--p-white-a22) !important;
}
}


.content-tile:active,
.brand-hub-card:active,
.token-package-card:active,
.tariff-card:active,
.account-card:active,
.draft-card:active,
.grid-card:active {
  transform: scale(0.98) !important;
  border: none !important;
}

/* Вторичные и вспомогательные кнопки со стеклянным размытием */
.btn-secondary,
.btn-outline,
.bsf-btn-outline,
.ch-custom-template-btn,
.ch-mode-btn,
.draft-action-btn,
.analytics-tab-btn,
.partner-tab,
.partner-how-btn {
  background: linear-gradient(145deg, var(--p-white-a6) 0%, var(--p-white-a2) 100%) !important;
  border: none !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  box-shadow: 0 4px 16px var(--p-black-a35), inset 0 1px 0 0 var(--p-white-a16) !important;
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight !important; transition-duration: 0.25s !important; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Кнопки «Назад» (без обводки) */
.settings-back-btn,
.page-back-btn,
.back-btn-squircle,
.back-btn,
.partner-back-btn {
  background: var(--p-white-a4) !important;
  border: none !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: none !important;
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight !important; transition-duration: 0.25s !important; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}@media (hover: hover) {
.settings-back-btn:hover,
.page-back-btn:hover,
.back-btn-squircle:hover,
.back-btn:hover,
.partner-back-btn:hover {
  background: var(--p-white-a9) !important;
  border: none !important;
  box-shadow: none !important;
  transform: translateX(-2px) !important;
}
}
@media (hover: hover) {
.nav-item:hover {
  border: none !important;
  box-shadow: none !important;
}
}
/* Кнопки нижней панели навигации (без обводок) */
.nav-item,
.nav-item.active {
  border: none !important;
  box-shadow: none !important;
}
@media (hover: hover) {
.btn-secondary:hover,
.btn-outline:hover,
.bsf-btn-outline:hover,
.ch-custom-template-btn:hover,
.ch-mode-btn:hover,
.draft-action-btn:hover,
.analytics-tab-btn:hover,
.partner-how-btn:hover {
  background: var(--p-white-a9) !important;
  border: none !important;
  box-shadow: 0 6px 20px var(--p-black-a45), 0 0 16px var(--p-purple-a15), inset 0 1px 0 0 var(--p-white-a22) !important;
  transform: translateY(-1px) !important;
}
}
@media (hover: hover) {
.partner-tab:hover {
  background: var(--p-white-a9) !important;
  border: none !important;
  box-shadow: 0 4px 16px var(--p-black-a40), 0 0 16px var(--p-purple-a15) !important;
  transform: none !important;
}
}


/* ═══════════════════════════════════════════════════════════════
   УНИВЕРСАЛЬНЫЙ ТЁМНЫЙ СТЕКЛЯННЫЙ ВЫПАДАЮЩИЙ СПИСОК (CUSTOM SELECT)
   ═══════════════════════════════════════════════════════════════ */

.custom-select-wrapper,
.ce-custom-select {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  min-height: 0 !important;
  z-index: 10;
}

.custom-select-wrapper.open,
.ce-custom-select.open {
  z-index: 10005 !important;
}

.custom-select-trigger,
.ce-custom-select-trigger,
.ce-font-select {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(180deg, var(--p-cosmic-58-a85) 0%, var(--p-cosmic-136-a92) 100%) !important;
  border: 1px solid var(--p-white-a12) !important;
  border-top: 1px solid var(--p-white-a28) !important;
  border-bottom: 1px solid var(--p-black-a60) !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  color: var(--p-white) !important;
  font-size: var(--text-md) !important;
  font-weight: var(--fw-600) !important;
  letter-spacing: var(--tracking-tight) !important;
  cursor: pointer;
  outline: none;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight; transition-duration: 0.25s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px var(--p-black-a45), inset 0 1px 0 var(--p-white-a20), inset 0 -1px 0 var(--p-black-a40) !important;
  text-align: left;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  gap: 8px;
}@media (hover: hover) {
.custom-select-trigger:hover,
.ce-custom-select-trigger:hover,
.ce-font-select:hover {
  border-color: var(--p-purple-a50) !important;
  border-top-color: var(--p-white-a35) !important;
  background: linear-gradient(180deg, var(--p-cosmic-59-a90) 0%, var(--p-cosmic-60-a95) 100%) !important;
  box-shadow: 0 10px 30px var(--p-black-a50), 0 0 20px var(--p-purple-300-a25), inset 0 1px 0 var(--p-white-a30) !important;
}
}


.custom-select-wrapper.open .custom-select-trigger,
.ce-custom-select.open .ce-custom-select-trigger {
  border-color: var(--p-purple-300) !important;
  box-shadow: 0 0 0 3px var(--p-purple-300-a25), 0 12px 36px var(--p-black-a60), inset 0 1px 0 var(--p-white-a30) !important;
}

.custom-select-value,
.ce-custom-select-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8px;
  min-width: 0;
  flex: 1 1 0%;
}

.custom-select-arrow,
.ce-custom-select-arrow {
  color: var(--p-white-a50);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  flex-shrink: 0;
}

.custom-select-wrapper.open .custom-select-arrow,
.ce-custom-select.open .ce-custom-select-arrow {
  transform: rotate(180deg);
  color: var(--p-purple-200);
}

.custom-select-menu,
.ce-custom-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  background: var(--p-cosmic-135-a98);
  border: 1px solid var(--p-purple-a35);
  border-radius: 16px;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: 0 16px 40px var(--p-black-a80), 0 0 24px var(--p-purple-300-a25);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  z-index: 10005 !important;
  display: none;
  flex-direction: column;
  gap: 3px;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent-border) transparent;
  animation: customSelectFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes customSelectFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.custom-select-wrapper.open .custom-select-menu,
.ce-custom-select.open .ce-custom-select-menu {
  display: flex;
}

.custom-select-item,
.ce-custom-select-item {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight; transition-duration: 0.18s; transition-timing-function: ease;
  gap: 8px;
  user-select: none;
  font-size: var(--text-md);
  font-weight: var(--fw-600);
  color: var(--p-white-a90);
}@media (hover: hover) {
.custom-select-item:hover,
.ce-custom-select-item:hover {
  background: var(--p-purple-300-a18);
  color: var(--p-white);
}
}


.custom-select-item.active,
.ce-custom-select-item.active {
  background: linear-gradient(135deg, var(--p-purple-300-a30) 0%, var(--p-indigo-500-a30) 100%);
  color: var(--p-white);
  font-weight: var(--fw-700);
}

.custom-select-item .cs-check,
.ce-custom-select-item .ce-font-check {
  font-size: var(--text-13);
  color: var(--p-purple-200);
  font-weight: var(--fw-800);
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.custom-select-item.active .cs-check,
.ce-custom-select-item.active .ce-font-check {
  opacity: 1;
}

/* Скрытие нативных select при подключении кастомного враппера */
select.custom-select-hidden {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Universal Glass iOS Switch Component (Design System)
   ═══════════════════════════════════════════════════════════════════ */
.bd-switch,
.sheet-switch,
.cs-toggle,
.settings-switch-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.bd-switch input,
.sheet-switch input,
.cs-toggle input,
.settings-switch-hidden {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.bd-switch-slider,
.sheet-slider,
.cs-toggle-track,
.settings-switch-track {
  width: 38px !important;
  height: 22px !important;
  background: var(--p-white-a12) !important;
  border: 1px solid var(--p-white-a18) !important;
  border-radius: 22px !important;
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight !important; transition-duration: 0.25s !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  display: block !important;
  box-sizing: border-box !important;
}

.bd-switch-slider:before,
.sheet-slider:before,
.cs-toggle-thumb,
.settings-switch-knob {
  position: absolute !important;
  content: "" !important;
  height: 16px !important;
  width: 16px !important;
  left: 2px !important;
  top: 2px !important;
  bottom: auto !important;
  background: var(--p-white) !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px var(--p-black-a35) !important;
  transition-property: background, border-color, color, box-shadow, transform, opacity, filter, border-radius, text-decoration, letter-spacing, font-weight !important; transition-duration: 0.25s !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bd-switch input:checked + .bd-switch-slider,
.sheet-switch input:checked + .sheet-slider,
.cs-toggle input:checked + .cs-toggle-track,
.settings-switch-hidden:checked + .settings-switch-track {
  background: linear-gradient(135deg, var(--p-purple-300), var(--p-purple-600)) !important;
  border-color: var(--p-purple-300-a60) !important;
  box-shadow: 0 0 12px var(--color-accent-border) !important;
}

.bd-switch input:checked + .bd-switch-slider:before,
.sheet-switch input:checked + .sheet-slider:before,
.cs-toggle input:checked + .cs-toggle-track .cs-toggle-thumb,
.settings-switch-hidden:checked + .settings-switch-track .settings-switch-knob {
  transform: translateX(16px) !important;
  background: var(--p-white) !important;
}