/* Compact combined visual-style switch and fresh-theme hue control. */
.interface-style-stack {
  display: flex;
  flex: 0 0 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 76px;
  min-width: 76px;
  height: 38px;
  margin-left: 0;
  padding: 2px 4px 3px;
  gap: 1px;
  border: 1px solid rgba(104, 122, 118, .10);
  border-radius: 11px;
  background: rgba(255, 255, 255, .30);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 2px 7px rgba(71, 89, 84, .05);
  overflow: hidden;
}

#theme-btn.interface-style-toggle {
  flex: 0 0 22px;
  width: 100%;
  min-width: 0;
  height: 22px;
  min-height: 22px;
  justify-content: center;
  margin: 0;
  padding: 0 3px;
  border: 0;
  border-radius: 7px 7px 5px 5px;
  background: transparent;
  box-shadow: none;
}

#theme-btn.interface-style-toggle .interface-style-icon {
  width: 14px;
  text-align: center;
  font-size: 12px;
  line-height: 1;
  transform: none !important;
}

#theme-btn.interface-style-toggle:hover .interface-style-icon,
#theme-btn.interface-style-toggle:active {
  transform: none !important;
}

.fresh-theme-picker {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 10px;
  width: 68px;
  height: 10px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 1px rgba(57, 70, 67, .06);
}

html[data-interface-style="crystal"] .fresh-theme-picker { display: inline-flex; }
html[data-interface-style="online"] .interface-style-stack { height: 30px; padding-block: 3px; }

#fresh-theme-hue {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 60px !important;
  min-width: 60px !important;
  height: 6px !important;
  min-height: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  outline: 0;
  cursor: pointer;
  background: linear-gradient(90deg,
    #ff9da5 0%, #ffc36f 14%, #dcec73 28%, #70e0ad 42%,
    #66dbe8 56%, #86aaf5 69%, #c58cf0 82%, #f58eb9 94%, #ff9da5 100%) !important;
  box-shadow: inset 0 1px 2px rgba(57, 70, 67, .12), 0 1px 0 rgba(255, 255, 255, .76) !important;
}

#fresh-theme-hue::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .94);
  background: hsl(var(--fresh-theme-hue, 158) 64% 66%);
  box-shadow: 0 1px 4px rgba(54, 68, 64, .22), inset 0 1px 0 rgba(255, 255, 255, .66);
}

#fresh-theme-hue::-moz-range-thumb {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .94);
  background: hsl(var(--fresh-theme-hue, 158) 64% 66%);
  box-shadow: 0 1px 4px rgba(54, 68, 64, .22), inset 0 1px 0 rgba(255, 255, 255, .66);
}

#fresh-theme-hue:focus-visible {
  box-shadow: inset 0 1px 2px rgba(57, 70, 67, .10), 0 0 0 2px hsl(var(--fresh-theme-hue, 158) 62% 68% / .24) !important;
}

@media (max-width: 900px) {
  .interface-style-stack { order:8; flex-basis:68px; width:68px; min-width:68px; padding-inline:3px; }
  .fresh-theme-picker { width:62px; padding-inline:4px; }
  #fresh-theme-hue { width:54px !important; min-width:54px !important; }
}