/* ======================================
   SETTINGS PAGE DEEPNOTES
   ====================================== */

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--color-border);
}

.settings-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-on-surface);
  margin: 0 0 0.5rem 0;
}

.settings-subtitle {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.settings-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-section {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.settings-section-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border);
}

.settings-section-header i {
  font-size: 1.25rem;
  color: var(--color-button);
}

.settings-section-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-on-surface);
  margin: 0;
}

.settings-options {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.settings-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.settings-option:hover {
  border-color: var(--color-button);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.option-info {
  flex: 1;
}

.option-info h4 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-on-surface);
  margin: 0 0 0.25rem 0;
}

.option-info p {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
  line-height: 1.4;
}

/* Settings Select */
.settings-select {
  padding: 0.75rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-on-surface);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 200px;
}

.settings-select:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-button);
}

.settings-select:focus {
  outline: none;
  border-color: var(--color-button);
  box-shadow: 0 0 0 3px rgba(var(--color-button-rgb), 0.1);
}

/* Toggle Switch */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 32px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--color-surface-alt);
  border: 2px solid var(--color-border);
  transition: 0.3s;
  border-radius: 32px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 24px;
  width: 24px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-text-secondary);
  transition: 0.3s;
  border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--color-button);
  border-color: var(--color-button);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(28px);
  background-color: white;
}

.toggle-switch input:focus + .toggle-slider {
  box-shadow: 0 0 0 3px rgba(var(--color-button-rgb), 0.2);
}

/* Theme Selector in Settings */
.theme-selector-settings {
  position: relative;
}

.theme-selector-btn {
  padding: 0.75rem 1.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text-on-surface);
  font-size: 0.875rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.theme-selector-btn:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-button);
}

.theme-selector-btn i {
  font-size: 0.75rem;
}

/* Deck cards layout for theme options in settings (inspired by deck_cards.css) */
/* 5 decks organized by categories - displayed in 2 columns */
.theme-grid-settings {
  width: 100%;
  min-height: 1400px;
  position: relative;
  padding: 2rem 0;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Create 3 decks horizontally */
.theme-option-settings {
  position: absolute;
  height: 180px;
  width: 120px;
  background-color: var(--color-surface);
  border: 4px solid var(--color-border);
  border-bottom: 30px solid var(--color-border);
  border-radius: 8%;
  box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.15);
  transform-origin: bottom center;
  scale: 1;
  transition-duration: 200ms;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  box-sizing: border-box;
}

.theme-option-settings:hover {
  scale: 1.1;
  border-color: var(--color-button);
  box-shadow: -4px 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Initial positions - stacked in 5 decks vertically */
/* By default, all cards are stacked (transform: rotate(0deg)) */
/* Deck 1: Dark themes - 6 cards (dark-red, dark-green, dark-purple, dark-orange, dark-cyan, dark-yellow) - Colonne gauche */
.theme-option-settings:nth-child(1),
.theme-option-settings:nth-child(2),
.theme-option-settings:nth-child(3),
.theme-option-settings:nth-child(4),
.theme-option-settings:nth-child(5),
.theme-option-settings:nth-child(6) {
  left: 25%;
  top: 150px;
  translate: -50% -50%;
  transform: rotate(0deg) translate(0px, -8px);
  transition: transform 0.3s ease;
}

/* Deck 2: Entreprises - 8 cards (google, meta, nvidia, bnp-paribas, societe-generale, jpmorgan, goldman-sachs, microsoft) - Colonne droite */
.theme-option-settings:nth-child(7),
.theme-option-settings:nth-child(8),
.theme-option-settings:nth-child(9),
.theme-option-settings:nth-child(10),
.theme-option-settings:nth-child(11),
.theme-option-settings:nth-child(12),
.theme-option-settings:nth-child(13),
.theme-option-settings:nth-child(14) {
  left: 75%;
  top: 150px;
  translate: -50% -50%;
  transform: rotate(0deg) translate(0px, -8px);
  transition: transform 0.3s ease;
}

/* Deck 3: Nature - 5 cards (forest, ocean, sunset, desert, aurora) - Colonne gauche */
.theme-option-settings:nth-child(15),
.theme-option-settings:nth-child(16),
.theme-option-settings:nth-child(17),
.theme-option-settings:nth-child(18),
.theme-option-settings:nth-child(19) {
  left: 25%;
  top: 550px;
  translate: -50% -50%;
  transform: rotate(0deg) translate(0px, -8px);
  transition: transform 0.3s ease;
}

/* Deck 4: Matériaux - 6 cards (wood, metal, bloom, flashy, pastel, cyberpunk) - Colonne droite */
.theme-option-settings:nth-child(20),
.theme-option-settings:nth-child(21),
.theme-option-settings:nth-child(22),
.theme-option-settings:nth-child(23),
.theme-option-settings:nth-child(24),
.theme-option-settings:nth-child(25) {
  left: 75%;
  top: 550px;
  translate: -50% -50%;
  transform: rotate(0deg) translate(0px, -8px);
  transition: transform 0.3s ease;
}

/* Deck 5: Reste - 15 cards (default, dark, light, blue, green, red, grayscale, purple, pink, turquoise, yellow, coffee, matrix, terminal, monochrome) - Colonne gauche */
.theme-option-settings:nth-child(26),
.theme-option-settings:nth-child(27),
.theme-option-settings:nth-child(28),
.theme-option-settings:nth-child(29),
.theme-option-settings:nth-child(30),
.theme-option-settings:nth-child(31),
.theme-option-settings:nth-child(32),
.theme-option-settings:nth-child(33),
.theme-option-settings:nth-child(34),
.theme-option-settings:nth-child(35),
.theme-option-settings:nth-child(36),
.theme-option-settings:nth-child(37),
.theme-option-settings:nth-child(38),
.theme-option-settings:nth-child(39),
.theme-option-settings:nth-child(40) {
  left: 25%;
  top: 950px;
  translate: -50% -50%;
  transform: rotate(0deg) translate(0px, -8px);
  transition: transform 0.3s ease;
}

/* Reset all other decks when hovering deck 1 - Keep them stacked */
.theme-grid-settings:has(.theme-option-settings:nth-child(1):hover) .theme-option-settings:nth-child(n+7),
.theme-grid-settings:has(.theme-option-settings:nth-child(2):hover) .theme-option-settings:nth-child(n+7),
.theme-grid-settings:has(.theme-option-settings:nth-child(3):hover) .theme-option-settings:nth-child(n+7),
.theme-grid-settings:has(.theme-option-settings:nth-child(4):hover) .theme-option-settings:nth-child(n+7),
.theme-grid-settings:has(.theme-option-settings:nth-child(5):hover) .theme-option-settings:nth-child(n+7),
.theme-grid-settings:has(.theme-option-settings:nth-child(6):hover) .theme-option-settings:nth-child(n+7) {
  transform: rotate(0deg) translate(0px, -8px);
}

/* Reset all other decks when hovering deck 2 */
.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(-n+6),
.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(n+15),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(n+15),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(n+15),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(n+15),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(n+15),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(n+15),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(n+15),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(n+15) {
  transform: rotate(0deg) translate(0px, -8px);
}

/* Reset all other decks when hovering deck 3 */
.theme-grid-settings:has(.theme-option-settings:nth-child(15):hover) .theme-option-settings:nth-child(-n+14),
.theme-grid-settings:has(.theme-option-settings:nth-child(16):hover) .theme-option-settings:nth-child(-n+14),
.theme-grid-settings:has(.theme-option-settings:nth-child(17):hover) .theme-option-settings:nth-child(-n+14),
.theme-grid-settings:has(.theme-option-settings:nth-child(18):hover) .theme-option-settings:nth-child(-n+14),
.theme-grid-settings:has(.theme-option-settings:nth-child(19):hover) .theme-option-settings:nth-child(-n+14),
.theme-grid-settings:has(.theme-option-settings:nth-child(15):hover) .theme-option-settings:nth-child(n+20),
.theme-grid-settings:has(.theme-option-settings:nth-child(16):hover) .theme-option-settings:nth-child(n+20),
.theme-grid-settings:has(.theme-option-settings:nth-child(17):hover) .theme-option-settings:nth-child(n+20),
.theme-grid-settings:has(.theme-option-settings:nth-child(18):hover) .theme-option-settings:nth-child(n+20),
.theme-grid-settings:has(.theme-option-settings:nth-child(19):hover) .theme-option-settings:nth-child(n+20) {
  transform: rotate(0deg) translate(0px, -8px);
}

/* Reset all other decks when hovering deck 4 */
.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(-n+19),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(-n+19),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(-n+19),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(-n+19),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(-n+19),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(-n+19),
.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(n+26),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(n+26),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(n+26),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(n+26),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(n+26),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(n+26) {
  transform: rotate(0deg) translate(0px, -8px);
}

/* Reset all other decks when hovering deck 5 */
.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(-n+25),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(-n+25) {
  transform: rotate(0deg) translate(0px, -8px);
}

/* Deck 1 spread on hover - Dark themes (6 cards: -45deg to +45deg) - Only when hovering a card from deck 1 */
.theme-grid-settings:has(.theme-option-settings:nth-child(1):hover) .theme-option-settings:nth-child(1),
.theme-grid-settings:has(.theme-option-settings:nth-child(2):hover) .theme-option-settings:nth-child(1),
.theme-grid-settings:has(.theme-option-settings:nth-child(3):hover) .theme-option-settings:nth-child(1),
.theme-grid-settings:has(.theme-option-settings:nth-child(4):hover) .theme-option-settings:nth-child(1),
.theme-grid-settings:has(.theme-option-settings:nth-child(5):hover) .theme-option-settings:nth-child(1),
.theme-grid-settings:has(.theme-option-settings:nth-child(6):hover) .theme-option-settings:nth-child(1) {
  transform: rotate(-45deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(1):hover) .theme-option-settings:nth-child(2),
.theme-grid-settings:has(.theme-option-settings:nth-child(2):hover) .theme-option-settings:nth-child(2),
.theme-grid-settings:has(.theme-option-settings:nth-child(3):hover) .theme-option-settings:nth-child(2),
.theme-grid-settings:has(.theme-option-settings:nth-child(4):hover) .theme-option-settings:nth-child(2),
.theme-grid-settings:has(.theme-option-settings:nth-child(5):hover) .theme-option-settings:nth-child(2),
.theme-grid-settings:has(.theme-option-settings:nth-child(6):hover) .theme-option-settings:nth-child(2) {
  transform: rotate(-27deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(1):hover) .theme-option-settings:nth-child(3),
.theme-grid-settings:has(.theme-option-settings:nth-child(2):hover) .theme-option-settings:nth-child(3),
.theme-grid-settings:has(.theme-option-settings:nth-child(3):hover) .theme-option-settings:nth-child(3),
.theme-grid-settings:has(.theme-option-settings:nth-child(4):hover) .theme-option-settings:nth-child(3),
.theme-grid-settings:has(.theme-option-settings:nth-child(5):hover) .theme-option-settings:nth-child(3),
.theme-grid-settings:has(.theme-option-settings:nth-child(6):hover) .theme-option-settings:nth-child(3) {
  transform: rotate(-9deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(1):hover) .theme-option-settings:nth-child(4),
.theme-grid-settings:has(.theme-option-settings:nth-child(2):hover) .theme-option-settings:nth-child(4),
.theme-grid-settings:has(.theme-option-settings:nth-child(3):hover) .theme-option-settings:nth-child(4),
.theme-grid-settings:has(.theme-option-settings:nth-child(4):hover) .theme-option-settings:nth-child(4),
.theme-grid-settings:has(.theme-option-settings:nth-child(5):hover) .theme-option-settings:nth-child(4),
.theme-grid-settings:has(.theme-option-settings:nth-child(6):hover) .theme-option-settings:nth-child(4) {
  transform: rotate(9deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(1):hover) .theme-option-settings:nth-child(5),
.theme-grid-settings:has(.theme-option-settings:nth-child(2):hover) .theme-option-settings:nth-child(5),
.theme-grid-settings:has(.theme-option-settings:nth-child(3):hover) .theme-option-settings:nth-child(5),
.theme-grid-settings:has(.theme-option-settings:nth-child(4):hover) .theme-option-settings:nth-child(5),
.theme-grid-settings:has(.theme-option-settings:nth-child(5):hover) .theme-option-settings:nth-child(5),
.theme-grid-settings:has(.theme-option-settings:nth-child(6):hover) .theme-option-settings:nth-child(5) {
  transform: rotate(27deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(1):hover) .theme-option-settings:nth-child(6),
.theme-grid-settings:has(.theme-option-settings:nth-child(2):hover) .theme-option-settings:nth-child(6),
.theme-grid-settings:has(.theme-option-settings:nth-child(3):hover) .theme-option-settings:nth-child(6),
.theme-grid-settings:has(.theme-option-settings:nth-child(4):hover) .theme-option-settings:nth-child(6),
.theme-grid-settings:has(.theme-option-settings:nth-child(5):hover) .theme-option-settings:nth-child(6),
.theme-grid-settings:has(.theme-option-settings:nth-child(6):hover) .theme-option-settings:nth-child(6) {
  transform: rotate(45deg) translate(0px, -8px);
}

/* Deck 2 spread on hover - Entreprises (8 cards: -45deg to +45deg) */
.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(7),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(7),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(7),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(7),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(7),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(7),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(7),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(7) {
  transform: rotate(-45deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(8),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(8),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(8),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(8),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(8),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(8),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(8),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(8) {
  transform: rotate(-30deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(9),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(9),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(9),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(9),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(9),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(9),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(9),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(9) {
  transform: rotate(-15deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(10),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(10),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(10),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(10),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(10),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(10),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(10),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(10) {
  transform: rotate(0deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(11),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(11),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(11),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(11),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(11),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(11),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(11),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(11) {
  transform: rotate(15deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(12),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(12),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(12),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(12),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(12),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(12),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(12),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(12) {
  transform: rotate(30deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(13),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(13),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(13),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(13),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(13),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(13),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(13),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(13) {
  transform: rotate(38deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(7):hover) .theme-option-settings:nth-child(14),
.theme-grid-settings:has(.theme-option-settings:nth-child(8):hover) .theme-option-settings:nth-child(14),
.theme-grid-settings:has(.theme-option-settings:nth-child(9):hover) .theme-option-settings:nth-child(14),
.theme-grid-settings:has(.theme-option-settings:nth-child(10):hover) .theme-option-settings:nth-child(14),
.theme-grid-settings:has(.theme-option-settings:nth-child(11):hover) .theme-option-settings:nth-child(14),
.theme-grid-settings:has(.theme-option-settings:nth-child(12):hover) .theme-option-settings:nth-child(14),
.theme-grid-settings:has(.theme-option-settings:nth-child(13):hover) .theme-option-settings:nth-child(14),
.theme-grid-settings:has(.theme-option-settings:nth-child(14):hover) .theme-option-settings:nth-child(14) {
  transform: rotate(45deg) translate(0px, -8px);
}

/* Deck 3 spread on hover - Nature (5 cards: -40deg to +40deg) */
.theme-grid-settings:has(.theme-option-settings:nth-child(15):hover) .theme-option-settings:nth-child(15),
.theme-grid-settings:has(.theme-option-settings:nth-child(16):hover) .theme-option-settings:nth-child(15),
.theme-grid-settings:has(.theme-option-settings:nth-child(17):hover) .theme-option-settings:nth-child(15),
.theme-grid-settings:has(.theme-option-settings:nth-child(18):hover) .theme-option-settings:nth-child(15),
.theme-grid-settings:has(.theme-option-settings:nth-child(19):hover) .theme-option-settings:nth-child(15) {
  transform: rotate(-40deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(15):hover) .theme-option-settings:nth-child(16),
.theme-grid-settings:has(.theme-option-settings:nth-child(16):hover) .theme-option-settings:nth-child(16),
.theme-grid-settings:has(.theme-option-settings:nth-child(17):hover) .theme-option-settings:nth-child(16),
.theme-grid-settings:has(.theme-option-settings:nth-child(18):hover) .theme-option-settings:nth-child(16),
.theme-grid-settings:has(.theme-option-settings:nth-child(19):hover) .theme-option-settings:nth-child(16) {
  transform: rotate(-20deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(15):hover) .theme-option-settings:nth-child(17),
.theme-grid-settings:has(.theme-option-settings:nth-child(16):hover) .theme-option-settings:nth-child(17),
.theme-grid-settings:has(.theme-option-settings:nth-child(17):hover) .theme-option-settings:nth-child(17),
.theme-grid-settings:has(.theme-option-settings:nth-child(18):hover) .theme-option-settings:nth-child(17),
.theme-grid-settings:has(.theme-option-settings:nth-child(19):hover) .theme-option-settings:nth-child(17) {
  transform: rotate(0deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(15):hover) .theme-option-settings:nth-child(18),
.theme-grid-settings:has(.theme-option-settings:nth-child(16):hover) .theme-option-settings:nth-child(18),
.theme-grid-settings:has(.theme-option-settings:nth-child(17):hover) .theme-option-settings:nth-child(18),
.theme-grid-settings:has(.theme-option-settings:nth-child(18):hover) .theme-option-settings:nth-child(18),
.theme-grid-settings:has(.theme-option-settings:nth-child(19):hover) .theme-option-settings:nth-child(18) {
  transform: rotate(20deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(15):hover) .theme-option-settings:nth-child(19),
.theme-grid-settings:has(.theme-option-settings:nth-child(16):hover) .theme-option-settings:nth-child(19),
.theme-grid-settings:has(.theme-option-settings:nth-child(17):hover) .theme-option-settings:nth-child(19),
.theme-grid-settings:has(.theme-option-settings:nth-child(18):hover) .theme-option-settings:nth-child(19),
.theme-grid-settings:has(.theme-option-settings:nth-child(19):hover) .theme-option-settings:nth-child(19) {
  transform: rotate(40deg) translate(0px, -8px);
}

/* Deck 4 spread on hover - Matériaux (6 cards: -45deg to +45deg) */
.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(20),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(20),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(20),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(20),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(20),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(20) {
  transform: rotate(-45deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(21),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(21),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(21),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(21),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(21),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(21) {
  transform: rotate(-27deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(22),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(22),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(22),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(22),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(22),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(22) {
  transform: rotate(-9deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(23),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(23),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(23),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(23),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(23),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(23) {
  transform: rotate(9deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(24),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(24),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(24),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(24),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(24),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(24) {
  transform: rotate(27deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(20):hover) .theme-option-settings:nth-child(25),
.theme-grid-settings:has(.theme-option-settings:nth-child(21):hover) .theme-option-settings:nth-child(25),
.theme-grid-settings:has(.theme-option-settings:nth-child(22):hover) .theme-option-settings:nth-child(25),
.theme-grid-settings:has(.theme-option-settings:nth-child(23):hover) .theme-option-settings:nth-child(25),
.theme-grid-settings:has(.theme-option-settings:nth-child(24):hover) .theme-option-settings:nth-child(25),
.theme-grid-settings:has(.theme-option-settings:nth-child(25):hover) .theme-option-settings:nth-child(25) {
  transform: rotate(45deg) translate(0px, -8px);
}

/* Deck 5 spread on hover - Reste (15 cards: -70deg to +70deg) */
.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(26),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(26) {
  transform: rotate(-70deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(27),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(27) {
  transform: rotate(-60deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(28),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(28) {
  transform: rotate(-50deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(29),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(29) {
  transform: rotate(-40deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(30),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(30) {
  transform: rotate(-30deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(31),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(31) {
  transform: rotate(-20deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(32),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(32) {
  transform: rotate(-10deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(33),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(33) {
  transform: rotate(0deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(34),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(34) {
  transform: rotate(10deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(35),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(35) {
  transform: rotate(20deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(36),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(36) {
  transform: rotate(30deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(37),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(37) {
  transform: rotate(40deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(38),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(38) {
  transform: rotate(50deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(39),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(39) {
  transform: rotate(60deg) translate(0px, -8px);
}

.theme-grid-settings:has(.theme-option-settings:nth-child(26):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(27):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(28):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(29):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(30):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(31):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(32):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(33):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(34):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(35):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(36):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(37):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(38):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(39):hover) .theme-option-settings:nth-child(40),
.theme-grid-settings:has(.theme-option-settings:nth-child(40):hover) .theme-option-settings:nth-child(40) {
  transform: rotate(70deg) translate(0px, -8px);
}

.theme-option-settings.active {
  border-color: var(--color-button);
  background: var(--color-surface-alt);
  box-shadow: -2px 2px 4px rgba(59, 130, 246, 0.3);
}

.theme-option-settings .theme-preview {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
}

.theme-option-settings span {
  font-size: 0.7rem;
  color: var(--color-text-on-surface);
  white-space: nowrap;
  font-weight: 500;
  text-align: center;
}

/* Responsive Design */
@media (max-width: 767px) {
  .settings-header {
    flex-direction: column;
    gap: 1rem;
  }

  .settings-section {
    padding: 1rem;
  }

  .settings-option {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .toggle-switch {
    align-self: flex-start;
  }

  .theme-dropdown-settings {
    position: fixed;
    right: 1rem;
    left: 1rem;
    min-width: auto;
  }
  
  .theme-grid-settings {
    height: 350px;
  }
  
  .theme-option-settings {
    height: 150px;
    width: 100px;
  }
  
  .theme-option-settings .theme-preview {
    width: 32px;
    height: 32px;
  }
  
  .theme-option-settings span {
    font-size: 0.65rem;
  }
}