/* JukeBox CSS v4.17.2 — history.css. Generated from the consolidated presentation state. */

.history-filters .hf-select {
  width: auto !important;
  min-width: max-content !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  field-sizing: content;
}

.playlist-badge-dot {
  display: none !important;
}

.hf-search:hover {
  border-color: rgba(255,255,255,.17) !important;
}

.hf-select:hover {
  border-color: rgba(255,255,255,.17) !important;
}

.hf-search:focus {
  color: var(--ui-text) !important;
  background: #0f1319 !important;
  border-color: color-mix(in srgb, var(--accent) 68%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.075) !important;
}

.hf-select:focus {
  color: var(--ui-text) !important;
  background: #0f1319 !important;
  border-color: color-mix(in srgb, var(--accent) 68%, transparent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.075) !important;
}

.hf-btn:hover {
  background: rgba(255,255,255,.065) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
}

.hf-bl-toggle:hover {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.065) !important;
  border-color: var(--ui-border-strong) !important;
}

.queue-item.playlist-item {
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--playlist-color) 7%, rgba(255,255,255,.018)) 0%,
      rgba(255,255,255,.018) 52%) !important;
  border-color: color-mix(in srgb, var(--playlist-color) 18%, var(--ui-border)) !important;
  border-left: 2px solid color-mix(in srgb, var(--playlist-color) 58%, var(--ui-border)) !important;
}

.queue-item.playlist-item:hover {
  border-color: color-mix(in srgb, var(--playlist-color) 38%, rgba(255,255,255,.13)) !important;
  border-left-color: var(--playlist-color) !important;
  background: linear-gradient(90deg,
      color-mix(in srgb, var(--playlist-color) 9%, rgba(255,255,255,.035)) 0%,
      rgba(255,255,255,.035) 55%) !important;
}

.playlist-badge {
  display: inline-flex !important;
  align-items: center !important;
  max-width: 220px !important;
  padding: 3px 7px !important;
  color: color-mix(in srgb, var(--playlist-color) 68%, white 32%) !important;
  background: color-mix(in srgb, var(--playlist-color) 8%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--playlist-color) 18%, transparent) !important;
  border-radius: 999px !important;
  font-size: .68rem !important;
  font-weight: 620 !important;
}

.playlist-badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-toggle {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 80 !important;
  min-width: 96px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 9px 14px !important;
  color: var(--ui-text-soft) !important;
  background: rgba(17,21,28,.94) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 12px !important;
  box-shadow: var(--ui-shadow) !important;
  backdrop-filter: blur(14px) !important;
  font-family: var(--ui-font) !important;
  font-size: .8rem !important;
  font-weight: 680 !important;
  letter-spacing: 0 !important;
  writing-mode: horizontal-tb !important;
}

.history-toggle:hover {
  color: var(--ui-text) !important;
  background: var(--ui-surface-2) !important;
}

.history-sidebar.history-sidebar-right {
  right: -50vw !important;
  left: auto !important;
  border-radius: 18px 0 0 18px !important;
  border-right: 0 !important;
  box-shadow: -24px 0 80px rgba(0,0,0,.38) !important;
}

.history-sidebar.history-sidebar-right.open {
  right: 0 !important;
}

.history-sidebar.history-sidebar-left {
  left: -50vw !important;
  right: auto !important;
  border-radius: 0 18px 18px 0 !important;
  border-left: 0 !important;
  box-shadow: 24px 0 80px rgba(0,0,0,.38) !important;
}

.history-sidebar.history-sidebar-left.open {
  left: 0 !important;
}

.history-header {
  border-bottom-color: rgba(255,255,255,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

.history-header h3 {
  line-height: 1.2 !important;
  font-size: 1rem !important;
  letter-spacing: -.018em !important;
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-weight: 720 !important;
}

.history-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.history-close {
  place-items: center !important;
  min-height: 40px !important;
  font-family: var(--ui-font) !important;
  font-weight: 680 !important;
  letter-spacing: -.008em !important;
  text-transform: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
  display: inline-flex !important;
  line-height: 1.1 !important;
  font-size: .82rem !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255,255,255,.035) !important;
  color: var(--ui-text-soft) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  flex: 0 0 46px !important;
  position: relative !important;
}

.history-close-x {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  position: relative !important;
}

.history-close-x::before {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 1px !important;
  width: 2px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(45deg) !important;
}

.history-close-x::after {
  content: "" !important;
  position: absolute !important;
  left: 8px !important;
  top: 1px !important;
  width: 2px !important;
  height: 16px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: rotate(-45deg) !important;
}

.history-filters {
  gap: 9px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,.012) !important;
}

.hf-row {
  gap: 8px !important;
  display: flex !important;
  align-items: center !important;
}

.hf-search {
  width: 100%;
  padding: 10px 12px !important;
  color: var(--ui-text) !important;
  background: var(--ui-bg-elevated) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  font-family: var(--ui-font) !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
  min-height: 40px !important;
  flex: 1 1 260px !important;
  min-width: 0 !important;
}

.hf-select {
  color: var(--ui-text) !important;
  background: var(--ui-bg-elevated) !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.018) !important;
  font-family: var(--ui-font) !important;
  font-size: .9rem !important;
  line-height: 1.35 !important;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease !important;
  min-height: 40px !important;
  width: auto !important;
  padding: 8px 30px 8px 11px !important;
  min-width: 110px !important;
}

.hf-btn {
  border-radius: 10px !important;
  font-family: var(--ui-font) !important;
  font-weight: 680 !important;
  letter-spacing: -.008em !important;
  text-transform: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: .82rem !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  cursor: pointer;
  background: rgba(255,255,255,.035) !important;
  color: var(--ui-text-soft) !important;
  border: 1px solid var(--ui-border) !important;
  min-height: 34px !important;
  padding: 7px 10px !important;
}

.hf-btn.active {
  background: rgba(var(--accent-rgb),.075) !important;
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb),.22) !important;
}

.hf-bl-toggle {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 13px !important;
  border-radius: 10px !important;
  font-family: var(--ui-font) !important;
  font-size: .82rem !important;
  font-weight: 680 !important;
  line-height: 1.1 !important;
  letter-spacing: -.008em !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
  color: var(--ui-text-soft) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--ui-border) !important;
  min-width: 108px !important;
}

.hf-row-actions {
  align-items: flex-start !important;
}

.hf-actions-cluster {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.hf-group {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  padding: 7px 10px 9px !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.018) !important;
}

.hf-group-label {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-height: 18px !important;
  padding: 0 2px 6px !important;
  margin-bottom: 2px !important;
  color: var(--ui-muted) !important;
  border-bottom: 1px solid var(--ui-border) !important;
  font-size: .72rem !important;
  font-weight: 720 !important;
  letter-spacing: .03em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.hf-group-buttons {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.history-multi-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.hf-bl-under-toggle {
  min-width: 0 !important;
  width: auto !important;
  align-self: flex-start !important;
}

.history-list {
  gap: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 20px 26px !important;
}

.history-item:hover {
  background: rgba(255,255,255,.032) !important;
  border-color: var(--ui-border-strong) !important;
}

.history-thumb {
  background: var(--surface2);
  border-radius: 8px !important;
  border: 1px solid var(--ui-border) !important;
  width: 68px !important;
  height: 44px !important;
  object-fit: cover !important;
}

.history-info {
  min-width: 0 !important;
}

.history-title {
  color: var(--ui-text) !important;
  display: block !important;
  overflow: hidden !important;
  font-size: .83rem !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.history-title:hover {
  color: var(--accent) !important;
}

.history-meta {
  color: var(--ui-muted) !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 4px !important;
  font-size: .68rem !important;
  line-height: 1.3 !important;
}

.history-meta-user {
  display: inline-flex !important;
  align-items: center !important;
  gap: .2rem !important;
}

.history-meta-chip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 20px !important;
  padding: 2px 6px !important;
  color: var(--ui-muted) !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

.history-chip-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  line-height: 1 !important;
}

.history-chip-icon-duration {
  font-size: .84rem !important;
  margin-right: 5px !important;
}

.history-chip-icon-clock {
  font-size: 1.12rem !important;
  margin-right: 7px !important;
}

.history-meta-datetime {
  gap: 0 !important;
}

.history-meta-date {
  margin-right: 10px !important;
}

.history-meta-dot {
  margin-right: 10px !important;
  opacity: .65 !important;
  user-select: none !important;
}

.history-meta-sep {
  margin: 0 3px !important;
  color: var(--ui-muted) !important;
  opacity: .55 !important;
  user-select: none !important;
}

.history-plays {
  color: var(--ui-info) !important;
}

.history-empty {
  padding: 28px !important;
  color: var(--ui-muted) !important;
  font-size: .84rem !important;
  text-align: center !important;
}

.history-action-box {
  border-color: rgba(255,255,255,.07) !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  width: auto !important;
  height: auto !important;
  align-self: center !important;
}

.history-action-box.history-bl-box {
  display: none !important;
}

.history-list.bl-mode-on .history-action-box.history-bl-box {
  display: flex !important;
}

.history-action-box .history-blacklist {
  width: auto !important;
  height: 34px !important;
}

.hf-bl-toggle.active {
  color: #f4a4b4 !important;
  background: rgba(240,141,160,.07) !important;
  border-color: rgba(240,141,160,.18) !important;
}

.history-item {
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease, transform .15s ease !important;
  background: rgba(255,255,255,.017) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  display: grid !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 78px !important;
  padding: 9px 10px !important;
  grid-template-columns: 40px 40px 68px minmax(0,1fr) auto !important;
}

.history-readd {
  font-family: var(--ui-font) !important;
  letter-spacing: -.008em !important;
  text-transform: none !important;
  gap: 6px !important;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ui-muted) !important;
  border-radius: 9px !important;
  min-height: 38px !important;
  font-weight: 700 !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  min-width: 38px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--ui-border) !important;
  width: 38px !important;
  height: 38px !important;
}

.history-star {
  font-family: var(--ui-font) !important;
  letter-spacing: -.008em !important;
  text-transform: none !important;
  gap: 6px !important;
  white-space: nowrap;
  cursor: pointer;
  color: var(--ui-muted) !important;
  border-radius: 9px !important;
  min-height: 38px !important;
  font-weight: 700 !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
  min-width: 38px !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--ui-border) !important;
  width: 38px !important;
  height: 38px !important;
}

.history-action-box .history-star {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.025) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
}

.history-action-box .history-readd {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.025) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
}

.history-star:hover {
  color: var(--ui-warning) !important;
  background: rgba(230,200,117,.08) !important;
  border-color: rgba(230,200,117,.28) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.history-star.fav {
  color: var(--ui-warning) !important;
  background: rgba(230,200,117,.08) !important;
  border-color: rgba(230,200,117,.2) !important;
}

.history-readd:hover {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.08) !important;
  border-color: rgba(var(--accent-rgb),.28) !important;
  transform: translateY(-1px) scale(1.04) !important;
}

.history-first-option {
  padding: 0 !important;
  margin-left: 4px !important;
  padding-left: 0 !important;
}

.history-close:hover {
  background: rgba(255,92,112,.10) !important;
  border-color: rgba(255,92,112,.34) !important;
  color: #ff7d8c !important;
}

.history-multi-option {
  margin-left: 4px !important;
}

.history-multi-bar.show {
  display: flex !important;
}

.history-multi-count {
  color: var(--ui-muted) !important;
  font-size: .72rem !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}

.history-multi-select-all {
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  color: var(--ui-text-soft) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  font-family: var(--ui-font) !important;
  font-size: .73rem !important;
  font-weight: 680 !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
  box-sizing: border-box !important;
}

.history-multi-action {
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--ui-text-soft) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  font-family: var(--ui-font) !important;
  font-size: .73rem !important;
  font-weight: 680 !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
  box-sizing: border-box !important;
  padding: 7px 10px !important;
  min-width: 40px !important;
}

.history-multi-fav {
  font-size: 1rem !important;
}

.history-multi-add {
  font-size: 1.15rem !important;
}

.history-multi-select-all:hover {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.065) !important;
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.history-multi-action:hover:not(:disabled) {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.065) !important;
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.history-multi-playlist-select:hover:not(:disabled) {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.065) !important;
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.history-multi-playlist-select:focus-visible {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.065) !important;
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px) !important;
  outline: none !important;
}

.history-multi-fav:hover:not(:disabled) {
  color: var(--ui-warning) !important;
  background: rgba(230,200,117,.08) !important;
  border-color: rgba(230,200,117,.25) !important;
}

.history-multi-add:hover:not(:disabled) {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.08) !important;
  border-color: rgba(var(--accent-rgb),.28) !important;
}

.history-multi-block:hover:not(:disabled) {
  color: #f4a4b4 !important;
  background: rgba(240,141,160,.07) !important;
  border-color: rgba(240,141,160,.2) !important;
}

.history-multi-action:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
}

.history-multi-playlist-select:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
}

.history-item.multi-selected {
  background: rgba(var(--accent-rgb),.04) !important;
  border-color: rgba(var(--accent-rgb),.25) !important;
}

.history-select-box {
  width: 34px !important;
  min-width: 34px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  cursor: pointer !important;
}

.history-select-box:focus-visible {
  outline: 2px solid rgba(var(--accent-rgb),.55) !important;
  outline-offset: 2px !important;
}

.history-select-mark {
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.025) !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}

.history-select-box.is-selected .history-select-mark {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08) !important;
}

.history-select-box.is-selected .history-select-mark::after {
  content: "" !important;
  width: 8px !important;
  height: 4px !important;
  border-left: 2px solid var(--accent-ink) !important;
  border-bottom: 2px solid var(--accent-ink) !important;
  transform: translateY(-1px) rotate(-45deg) !important;
}

.hf-toggle-cluster {
  display: flex !important;
  padding-left: 2px !important;
  align-items: flex-start !important;
  gap: 7px !important;
  flex-wrap: nowrap !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.hf-toggle-cluster .add-first-option {
  margin: 0 !important;
}

.history-edge-text {
  writing-mode: vertical-rl !important;
  transform: rotate(180deg) !important;
  font-family: var(--ui-font) !important;
  font-size: .72rem !important;
  font-weight: 760 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

.history-edge-side-left .history-edge-text {
  writing-mode: vertical-lr !important;
  transform: none !important;
}

.history-edge-side-right.is-closed .history-edge-triangle-top {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 7px solid currentColor !important;
}

.history-edge-side-right.is-closed .history-edge-triangle-bottom {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 7px solid currentColor !important;
}

.history-edge-side-right.is-open .history-edge-triangle-top {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-right: 7px solid currentColor !important;
}

.history-edge-side-right.is-open .history-edge-triangle-bottom {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-right: 7px solid currentColor !important;
}

.history-edge-side-left.is-closed .history-edge-triangle-top {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-right: 7px solid currentColor !important;
}

.history-edge-side-left.is-closed .history-edge-triangle-bottom {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-right: 7px solid currentColor !important;
}

.history-edge-side-left.is-open .history-edge-triangle-top {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 7px solid currentColor !important;
}

.history-edge-side-left.is-open .history-edge-triangle-bottom {
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 7px solid currentColor !important;
}

.history-edge-top {
  top: 116px !important;
}

.history-edge-middle {
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.history-edge-bottom {
  bottom: 54px !important;
}

.activity-log-filters {
  display: none !important;
}

.activity-log-list {
  display: none !important;
}

.history-sidebar.is-log-view .history-filters {
  display: none !important;
}

.history-sidebar.is-log-view .history-multi-bar {
  display: none !important;
}

.history-sidebar.is-log-view .history-list {
  display: none !important;
}

.activity-log-assigned {
  align-self: flex-end !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 9px !important;
  color: var(--ui-muted) !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  font-size: .69rem !important;
  white-space: nowrap !important;
}

.activity-log-entry:hover {
  background: rgba(255,255,255,.032) !important;
  border-color: var(--ui-border-strong) !important;
}

.activity-log-entry.is-new {
  animation: activityLogReveal .52s cubic-bezier(.2,.75,.25,1) both !important;
}

.activity-log-bot-filter {
  display: none !important;
}

.history-sidebar.is-admin-log-view .activity-log-bot-filter {
  display: block !important;
}

.history-sidebar.is-admin-log-view .activity-log-assigned {
  display: none !important;
}

.history-edge-triangle {
  width: 0 !important;
  height: 0 !important;
  flex: 0 0 auto !important;
  opacity: .8 !important;
  transition: transform .16s ease, opacity .16s ease !important;
  display: none !important;
}

body.history-embed {
  display: block !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.history-embed > .app {
  display: none !important;
}

body.history-embed > .history-edge-toggle {
  display: none !important;
}

body.history-embed > .queue-recovery-modal {
  display: none !important;
}

body.history-embed > .toast {
  display: none !important;
}

body.history-embed > #discord-modal {
  display: none !important;
}

body.history-embed .history-resize-handle {
  display: none !important;
}

body.history-embed:not(.history-drawer-embed) .history-close {
  display: none !important;
}

.history-view-btn:hover {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.035) !important;
}

.history-view-btn.active {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), .12) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .12) !important;
  border-color: rgba(var(--accent-rgb), .22) !important;
}

.history-view-btn {
  font: inherit !important;
  cursor: pointer !important;
  color: var(--ui-text-soft) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  min-height: 38px !important;
  padding: 7px 12px !important;
  border-radius: 10px !important;
  font-size: .86rem !important;
  font-weight: 680 !important;
  min-width: 98px !important;
  height: 38px !important;
}

.history-blacklist {
  font-family: var(--ui-font) !important;
  font-weight: 680 !important;
  letter-spacing: -.008em !important;
  text-transform: none !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease !important;
  gap: 6px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 9px !important;
  min-height: 34px !important;
  font-size: .69rem !important;
  background: rgba(255,255,255,.025) !important;
  border: 1px solid var(--ui-border) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  min-width: 40px !important;
  color: #f08da0 !important;
  width: 40px !important;
  height: 36px !important;
}

.history-blacklist-symbol {
  position: relative !important;
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  border: 2px solid currentColor !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
}

.history-blacklist-symbol::after {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  right: 2px !important;
  top: 50% !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: currentColor !important;
  transform: translateY(-50%) rotate(-45deg) !important;
  transform-origin: center !important;
}

.history-blacklist:hover {
  color: #ffafbf !important;
  background: rgba(240,141,160,.09) !important;
  border-color: rgba(240,141,160,.24) !important;
}

.history-blacklist.is-blocked {
  color: #ff8fa7 !important;
  background: rgba(240,141,160,.14) !important;
  border-color: rgba(240,141,160,.28) !important;
  box-shadow: inset 0 0 0 1px rgba(240,141,160,.06) !important;
}

.history-blacklist.is-blocked .history-blacklist-symbol {
  background: rgba(240,141,160,.08) !important;
}

#history-view-title {
  display: none !important;
}

.history-header-main {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  justify-content: flex-start !important;
}

.history-blacklist-option {
  margin-left: 0 !important;
}

.history-blacklist-option.is-active .add-first-text {
  color: var(--ui-text) !important;
}

#history-view-admin-log {
  min-width: 82px !important;
}

.history-view-btn-subtle {
  min-width: 82px !important;
  padding-inline: 12px !important;
  color: var(--ui-text-dim) !important;
}

.history-view-btn-subtle:hover {
  color: var(--ui-text) !important;
}

.history-view-btn-subtle.active {
  color: var(--accent) !important;
}

.history-admin-toggle {
  font-size: .82rem !important;
  font-weight: 670 !important;
  line-height: 1 !important;
  transition: color .18s ease, background .18s ease, border-color .18s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  background: rgba(255,255,255,.022) !important;
  color: var(--ui-text-dim) !important;
  justify-content: center !important;
  min-width: 46px !important;
  width: 46px !important;
  box-shadow: none !important;
}

.history-admin-toggle:hover {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.history-admin-toggle.active {
  color: #ff6f8b !important;
  background: rgba(255, 88, 116, .12) !important;
  border-color: rgba(255, 88, 116, .28) !important;
}

.history-admin-toggle-track {
  position: relative !important;
  border-radius: 999px !important;
  transition: background .18s ease, box-shadow .18s ease !important;
  flex: 0 0 auto !important;
  width: 28px !important;
  height: 16px !important;
  background: rgba(255,255,255,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.history-admin-toggle-thumb {
  position: absolute !important;
  border-radius: 50% !important;
  transition: transform .18s ease, background .18s ease !important;
  top: 2px !important;
  left: 2px !important;
  width: 12px !important;
  height: 12px !important;
  background: #c7cfdb !important;
}

.history-admin-toggle.active .history-admin-toggle-track {
  background: rgba(255, 88, 116, .30) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 88, 116, .20) !important;
}

.history-admin-toggle.active .history-admin-toggle-thumb {
  transform: translateX(12px) !important;
  background: #ff6f8b !important;
}

.history-admin-toggle-label {
  white-space: nowrap !important;
  display: none !important;
}

#hist-user {
  min-width: 220px !important;
  width: 220px !important;
}

#activity-log-user {
  min-width: 220px !important;
  width: 220px !important;
}

.hf-group-filter .hf-group-buttons {
  align-items: stretch !important;
}

.hf-group-sort .hf-group-buttons {
  align-items: stretch !important;
}

.hf-group-filter .hf-btn {
  width: 118px !important;
  min-width: 118px !important;
  flex: 0 0 118px !important;
  justify-content: center !important;
  text-align: center !important;
}

.hf-group-sort .hf-btn {
  width: 118px !important;
  min-width: 118px !important;
  flex: 0 0 118px !important;
  justify-content: center !important;
  text-align: center !important;
}

.history-header-view-controls {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin-left: -6px !important;
}

.activity-log-filter-actions {
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}

.activity-log-category-group {
  flex: 1 1 100% !important;
  max-width: 100% !important;
}

.activity-log-category-group .hf-group-buttons {
  align-items: stretch !important;
}

.activity-log-category-group .hf-btn {
  width: 118px !important;
  min-width: 118px !important;
  flex: 0 0 118px !important;
  justify-content: center !important;
  text-align: center !important;
}

.activity-log-assigned-inline {
  color: var(--ui-muted) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.activity-log-entry {
  overflow: hidden !important;
  border: 1px solid var(--ui-border) !important;
  transform-origin: top !important;
  padding: 13px 14px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.022), rgba(255,255,255,.014)) !important;
  border-radius: 14px !important;
  max-height: none !important;
  min-height: 74px !important;
}

.activity-log-entry-head {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 8px !important;
  margin-bottom: 8px !important;
  flex-wrap: wrap !important;
}

.activity-log-message {
  color: var(--ui-text-soft) !important;
  font-size: .86rem !important;
  line-height: 1.5 !important;
  display: grid !important;
  grid-template-columns: 64px minmax(0, 1fr) auto !important;
  align-items: center !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
}

.activity-log-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}

.activity-log-avatar .uav {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  min-height: 56px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
}

.activity-log-avatar .uav img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.activity-log-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 8px !important;
}

.activity-log-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

.activity-log-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  min-width: 0 !important;
  text-align: left !important;
}

.activity-log-category {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--ui-border) !important;
  line-height: 1.2 !important;
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.055) !important;
  border-color: rgba(var(--accent-rgb),.14) !important;
  font-weight: 700 !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: .69rem !important;
}

.activity-log-bot {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--ui-border) !important;
  line-height: 1.2 !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: .69rem !important;
  color: var(--ui-muted) !important;
}

.activity-log-user {
  align-items: center !important;
  gap: .28rem !important;
  display: inline !important;
  font-weight: 760 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.2 !important;
}

.activity-log-text {
  display: inline !important;
  margin: 0 !important;
  color: var(--ui-text-soft) !important;
  font-size: .94rem !important;
  line-height: 1.35 !important;
  word-break: break-word !important;
}

.activity-log-time {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid var(--ui-border) !important;
  line-height: 1.2 !important;
  color: var(--ui-muted) !important;
  background: rgba(255,255,255,.018) !important;
  min-height: 24px !important;
  padding: 4px 8px !important;
  border-radius: 8px !important;
  font-size: .69rem !important;
  margin-left: 12px !important;
  white-space: nowrap !important;
  justify-self: end !important;
  align-self: start !important;
}

.history-sidebar.is-log-view .activity-log-entry {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  min-height: 0 !important;
  padding: 10px 12px !important;
}

.history-sidebar.is-log-view .activity-log-message {
  min-height: 56px !important;
}

.my-playlists-panel {
  display: none !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.history-sidebar.is-playlists-view .history-list {
  display: none !important;
}

.history-sidebar.is-playlists-view .activity-log-filters {
  display: none !important;
}

.history-sidebar.is-playlists-view .activity-log-list {
  display: none !important;
}

.history-view-switch {
  display: grid !important;
  align-items: center !important;
  background: rgba(18, 22, 30, 0.92) !important;
  border: 1px solid var(--ui-border) !important;
  grid-auto-flow: column !important;
  box-shadow: none !important;
  gap: 4px !important;
  padding: 5px !important;
  border-radius: 14px !important;
  min-height: 48px !important;
  grid-auto-columns: max-content !important;
}

.my-playlists-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,.012) !important;
}

#my-playlist-select {
  flex: 1 1 260px !important;
  min-width: 180px !important;
  max-width: none !important;
}

.my-playlist-toolbar-btn {
  min-height: 40px !important;
  padding: 8px 13px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  color: var(--ui-text-soft) !important;
  background: rgba(255,255,255,.028) !important;
  font-size: .78rem !important;
  font-weight: 720 !important;
  cursor: pointer !important;
  transition: .18s ease !important;
}

.my-playlist-toolbar-btn:hover:not(:disabled) {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.055) !important;
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px) !important;
}

.my-playlist-toolbar-btn.primary {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.075) !important;
  border-color: rgba(var(--accent-rgb),.22) !important;
}

.my-playlist-toolbar-btn.queue {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.075) !important;
  border-color: rgba(var(--accent-rgb),.22) !important;
}

.my-playlist-toolbar-btn.danger {
  color: #eeb0bd !important;
  background: rgba(240,141,160,.055) !important;
  border-color: rgba(240,141,160,.17) !important;
}

.my-playlist-toolbar-btn:disabled {
  opacity: .35 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.my-playlists-summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 48px !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-muted) !important;
  font-size: .75rem !important;
}

.my-playlists-summary strong {
  color: var(--ui-text) !important;
  font-size: .86rem !important;
}

.my-playlist-song-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 20px 26px !important;
}

.my-playlist-song:hover {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--ui-border-strong) !important;
}

.my-playlist-song-thumb {
  width: 62px !important;
  height: 46px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  background: #090d14 !important;
}

.my-playlist-song-info {
  min-width: 0 !important;
}

.my-playlist-song-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--ui-text) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
}

.my-playlist-song-meta {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin-top: 5px !important;
  color: var(--ui-muted) !important;
  font-size: .68rem !important;
}

.my-playlist-song-actions button {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  color: var(--ui-muted) !important;
  background: rgba(255,255,255,.025) !important;
  cursor: pointer !important;
}

.my-playlist-song-actions button:hover:not(:disabled) {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.06) !important;
}

.my-playlist-song-actions button.queue:hover {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb),.25) !important;
}

.my-playlist-song-actions button.danger:hover {
  color: #f4a4b4 !important;
  border-color: rgba(240,141,160,.2) !important;
}

.my-playlist-song-actions button:disabled {
  opacity: .25 !important;
  cursor: not-allowed !important;
}

.history-multi-playlist {
  min-width: 46px !important;
  font-size: .84rem !important;
  letter-spacing: -.04em !important;
}

.history-multi-playlist:hover:not(:disabled) {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.08) !important;
  border-color: rgba(var(--accent-rgb),.28) !important;
}

.playlist-target-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 26000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  background: rgba(3,8,18,.34) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: .2s ease !important;
}

.playlist-target-modal.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.playlist-target-header {
  padding: 18px 20px 13px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

.playlist-target-header h3 {
  margin: 0 !important;
  color: var(--ui-text) !important;
  font-size: 1rem !important;
}

.playlist-target-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 18px 20px !important;
}

.playlist-target-body p {
  margin: 0 !important;
  color: var(--ui-muted) !important;
  font-size: .78rem !important;
}

#playlist-target-select {
  width: 100% !important;
  max-width: none !important;
}

.playlist-target-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 0 20px 20px !important;
}

.history-multi-create-playlist:hover:not(:disabled) {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.065) !important;
  border-color: var(--ui-border-strong) !important;
  transform: translateY(-1px) !important;
}

.history-multi-create-playlist:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
}

.history-multi-playlist-icon {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.history-multi-playlist-btn:hover:not(:disabled) {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.08) !important;
  border-color: rgba(var(--accent-rgb),.28) !important;
}

.history-multi-bar {
  display: none !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: rgba(var(--accent-rgb),.025) !important;
  gap: 16px !important;
}

.history-multi-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  min-width: 0 !important;
}

.history-multi-left {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.history-multi-separator {
  width: 1px !important;
  height: 22px !important;
  background: var(--ui-border) !important;
  border-radius: 999px !important;
  margin-inline: 14px !important;
  flex: 0 0 auto !important;
}

.history-multi-create-playlist {
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 12px !important;
  color: var(--ui-text-soft) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  font-family: var(--ui-font) !important;
  font-size: .73rem !important;
  font-weight: 680 !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
  min-width: 122px !important;
  flex: 0 0 auto !important;
  order: 0 !important;
}

.history-multi-playlist-select {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 10px !important;
  color: var(--ui-text-soft) !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 9px !important;
  font-family: var(--ui-font) !important;
  font-size: .73rem !important;
  font-weight: 680 !important;
  cursor: pointer !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease !important;
  padding-right: 34px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: linear-gradient(45deg, transparent 50%, var(--ui-muted) 50%), linear-gradient(135deg, var(--ui-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 16px, calc(100% - 10px) 16px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  min-width: 168px !important;
  max-width: 168px !important;
  flex: 0 0 168px !important;
  order: 1 !important;
}

.history-multi-playlist-btn {
  padding-inline: 14px !important;
  font-size: .74rem !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  min-width: 40px !important;
  width: 40px !important;
  padding: 0 !important;
  flex: 0 0 40px !important;
  order: 2 !important;
  margin-left: 2px !important;
}

.history-sidebar.is-playlists-view .history-filters {
  display: flex !important;
}

.history-sidebar.is-playlists-view .history-multi-bar.show {
  display: flex !important;
}

#my-playlist-song-list.multi-mode .my-playlist-song {
  grid-template-columns: 34px 62px minmax(0,1fr) auto !important;
}

#my-playlist-song-list.multi-mode .history-select-box {
  align-self: center !important;
}

.history-multi-remove-playlist {
  display: none !important;
  width: 40px !important;
  min-width: 40px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  color: #f08da0 !important;
  background: rgba(255,79,123,.08) !important;
  border: 1px solid rgba(240,141,160,.22) !important;
}

.history-multi-remove-playlist:hover:not(:disabled) {
  color: #ffd5dd !important;
  background: rgba(255,79,123,.14) !important;
  border-color: rgba(240,141,160,.34) !important;
}

.history-multi-remove-playlist:disabled {
  opacity: .38 !important;
  cursor: not-allowed !important;
}

.history-sidebar.is-playlists-view .history-multi-remove-playlist {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.my-playlist-song {
  display: grid !important;
  align-items: center !important;
  min-height: 72px !important;
  padding: 8px 10px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.017) !important;
  grid-template-columns: 52px 62px minmax(0,1fr) auto !important;
  gap: 12px !important;
}

.my-playlist-song.with-select {
  grid-template-columns: 36px 52px 62px minmax(0,1fr) auto !important;
}

.my-playlist-pos-input {
  justify-self: start !important;
}

.my-playlist-pos-readonly {
  justify-self: start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  background: rgba(255,255,255,.02) !important;
}

.my-playlist-song-actions {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  justify-self: end !important;
}

.my-playlist-song.can-drag {
  cursor: grab !important;
}

.my-playlist-song.can-drag .my-playlist-song-thumb {
  cursor: grab !important;
}

.my-playlist-song.dragging {
  opacity: .58 !important;
  border-color: rgba(var(--accent-rgb), .38) !important;
  background: rgba(var(--accent-rgb), .06) !important;
}

.my-playlist-song.drag-over {
  background: rgba(var(--accent-rgb), .08) !important;
  border-color: rgba(var(--accent-rgb), .52) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .08) !important;
}

.my-playlist-song.drag-over:hover {
  background: rgba(var(--accent-rgb), .08) !important;
  border-color: rgba(var(--accent-rgb), .52) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .08) !important;
}

#my-playlist-song-list .my-playlist-song {
  grid-template-columns: 52px 62px minmax(0,1fr) 158px !important;
}

#my-playlist-song-list .my-playlist-song.with-select {
  grid-template-columns: 36px 52px 62px minmax(0,1fr) 158px !important;
}

#my-playlist-song-list .my-playlist-song-info {
  min-width: 0 !important;
  overflow: hidden !important;
}

#my-playlist-song-list .my-playlist-song-actions {
  width: 158px !important;
  min-width: 158px !important;
  justify-self: end !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
}

#my-playlist-song-list .my-playlist-song.multi-selected {
  background: rgba(var(--accent-rgb), .04) !important;
  border-color: rgba(var(--accent-rgb), .25) !important;
  box-shadow: none !important;
}

#my-playlist-song-list .my-playlist-song.multi-selected:hover {
  background: rgba(var(--accent-rgb), .04) !important;
  border-color: rgba(var(--accent-rgb), .25) !important;
  box-shadow: none !important;
}

.history-list.multi-mode .history-item {
  grid-template-columns: 34px 40px 40px 68px minmax(0,1fr) auto !important;
  align-items: center !important;
}

.history-list.multi-mode .history-select-box {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.history-list.multi-mode .history-fav-box {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.history-list.multi-mode .history-add-box {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.history-list.multi-mode .history-thumb-link {
  grid-column: 4 !important;
  grid-row: 1 !important;
}

.history-list.multi-mode .history-info {
  grid-column: 5 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.history-list.multi-mode .history-bl-box {
  grid-column: 6 !important;
  grid-row: 1 !important;
  justify-self: end !important;
}

.history-sidebar.is-admin-log-view #history-view-log.active {
  color: #ff6f8b !important;
  background: rgba(255, 88, 116, .12) !important;
  border-color: rgba(255, 88, 116, .28) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 88, 116, .12) !important;
}

.history-edge-toggle:hover {
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.28), rgba(22,25,33,.99) 20%, rgba(22,25,33,1)) !important;
  border-color: rgba(var(--accent-rgb),.45) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28), 0 0 0 1px rgba(var(--accent-rgb),.14) inset, 0 0 22px rgba(var(--accent-rgb),.14) !important;
  color: var(--ui-text-soft) !important;
  width: 64px !important;
  min-width: 64px !important;
  box-sizing: border-box !important;
}

.history-edge-toggle {
  position: fixed !important;
  right: 0 !important;
  z-index: 90 !important;
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 13px 8px !important;
  border: 1px solid var(--ui-border) !important;
  border-right: 0 !important;
  border-radius: 13px 0 0 13px !important;
  text-decoration: none !important;
  user-select: none !important;
  backdrop-filter: blur(10px) !important;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.20), rgba(18,21,28,.97) 22%, rgba(18,21,28,.985)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24), 0 0 0 1px rgba(var(--accent-rgb),.10) inset, 0 0 18px rgba(var(--accent-rgb),.10) !important;
  border-color: rgba(var(--accent-rgb),.34) !important;
  justify-content: center !important;
  gap: 0 !important;
  color: var(--ui-text-soft) !important;
  width: 64px !important;
  min-width: 64px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.history-edge-toggle > * {
  pointer-events: none !important;
}

body.layout-live-transition .history-edge-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.history-nav-open:not(.history-layout-split):not(.history-embed) > .history-edge-toggle,
body.history-page-drawer-open > .history-edge-toggle {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.history-sidebar .history-blacklist-option {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
}

.activity-log-avatar .activity-bot-uav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  background: rgba(var(--accent-rgb),.12) !important;
  color: var(--accent) !important;
  font-weight: 800 !important;
}

.activity-log-avatar .activity-bot-uav img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.activity-log-avatar .activity-bot-fallback span {
  font-size: .82rem !important;
  line-height: 1 !important;
}

.history-sidebar.is-log-view {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
}

.history-sidebar.is-log-view .activity-log-filters {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: rgba(255,255,255,.012) !important;
  flex: 0 0 auto !important;
}

.history-sidebar.is-log-view .history-header {
  flex: 0 0 auto !important;
}

.history-sidebar.is-log-view .activity-log-list {
  display: flex !important;
  flex-direction: column !important;
  padding: 16px 18px 26px !important;
  align-items: stretch !important;
  gap: 8px !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
}

.history-sidebar .activity-log-list {
  scrollbar-width: thin !important;
  scrollbar-color: var(--border) transparent !important;
}

.history-sidebar .activity-log-list::-webkit-scrollbar {
  width: 4px !important;
}

.history-sidebar .activity-log-list::-webkit-scrollbar-track {
  background: transparent !important;
}

.history-sidebar .activity-log-list::-webkit-scrollbar-thumb {
  background: var(--border) !important;
  border-radius: 2px !important;
}



.history-sidebar .history-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
}

.history-sidebar .history-blacklist-header-option {
  display: inline-flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.history-sidebar.is-log-view .history-blacklist-header-option {
  display: none !important;
}

.history-sidebar.is-admin-log-view .history-blacklist-header-option {
  display: none !important;
}

.history-sidebar.is-playlists-view .history-blacklist-header-option {
  display: none !important;
}

.history-sidebar .history-blacklist-toggle-row {
  min-width: 0 !important;
  margin-top: 1px !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--ui-border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
  overflow: visible !important;
  min-height: 34px !important;
  padding: 0 0 8px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.history-sidebar .history-blacklist-toggle-row .history-blacklist-option {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  align-items: center !important;
  white-space: nowrap !important;
}

.history-sidebar.is-log-view .history-blacklist-toggle-row {
  display: none !important;
}

.history-sidebar.is-admin-log-view .history-blacklist-toggle-row {
  display: none !important;
}

.history-sidebar.is-playlists-view .history-blacklist-toggle-row {
  display: none !important;
}

.history-sidebar .hf-toggle-cluster {
  overflow: visible !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

.history-sidebar .hf-toggle-cluster .history-blacklist-option {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.history-sidebar.is-log-view .hf-toggle-cluster .history-blacklist-option {
  display: none !important;
}

.history-sidebar.is-admin-log-view .hf-toggle-cluster .history-blacklist-option {
  display: none !important;
}

.history-sidebar.is-playlists-view .hf-toggle-cluster .history-blacklist-option {
  display: none !important;
}

.history-page-drawer {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  pointer-events: none !important;
}

.history-page-drawer-backdrop {
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  background: rgba(2,4,8,.66) !important;
  backdrop-filter: blur(7px) !important;
  opacity: 0 !important;
  transition: opacity .3s cubic-bezier(.4,0,.2,1) !important;
}

.history-page-drawer-panel {
  position: absolute !important;
  top: 18px !important;
  bottom: 18px !important;
  width: min(max(var(--history-min-width, 780px), var(--history-standard-width, 50vw)), calc(100vw - 72px)) !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
}

.history-page-drawer-right .history-page-drawer-panel {
  right: 0 !important;
  transform: translateX(100%) !important;
  border-radius: 18px 0 0 18px !important;
}

.history-page-drawer-left .history-page-drawer-panel {
  left: 0 !important;
  transform: translateX(-100%) !important;
  border-radius: 0 18px 18px 0 !important;
}

body.history-drawer-embed.history-drawer-side-right > .history-sidebar {
  border-radius: 18px 0 0 18px !important;
  border-right: 0 !important;
}

body.history-drawer-embed.history-drawer-side-left > .history-sidebar {
  border-radius: 0 18px 18px 0 !important;
  border-left: 0 !important;
}

.history-page-drawer-frame {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  background: transparent !important;
}

.history-page-drawer-panel.is-resizing .history-page-drawer-frame {
  pointer-events: none !important;
}

.history-page-drawer.is-open {
  pointer-events: auto !important;
}

.history-page-drawer.is-open .history-page-drawer-backdrop {
  opacity: 1 !important;
}

.history-page-drawer.is-open .history-page-drawer-panel {
  transform: translateX(0) !important;
}

body:not(.history-embed) {
  padding-bottom: 0 !important;
}

body:not(.page-home):not(.history-layout-split):not(.history-embed) > .history-sidebar {
  display: none !important;
}

body.page-home:not(.history-layout-split):not(.history-embed) > .history-sidebar {
  position: fixed !important;
  z-index: 10001 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

.history-native-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10000 !important;
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: rgba(2,4,8,.66) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .3s cubic-bezier(.4,0,.2,1), visibility .3s linear !important;
}

body.page-home.history-nav-open:not(.history-layout-split):not(.history-embed) > .history-native-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.history-layout-split > .history-edge-toggle {
  display: none !important;
}

body.history-embed > .history-sidebar {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 18px !important;
  box-shadow: var(--ui-shadow) !important;
  transition: none !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
}

.my-playlists-own[hidden] {
  display: none !important;
}

.shared-playlists-view[hidden] {
  display: none !important;
}

.my-playlists-own {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.shared-playlists-view {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.shared-playlist-song-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.shared-playlists-toolbar #shared-playlist-select {
  min-width: 220px !important;
  flex: 1 1 300px !important;
}

.shared-playlist-song {
  grid-template-columns: 34px 62px minmax(0,1fr) !important;
  cursor: default !important;
}

.shared-playlist-song .my-playlist-song-info {
  grid-column: auto !important;
}

.history-sidebar.is-playlists-view .my-playlists-panel {
  display: flex !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.history-sidebar.is-playlists-view #my-playlists-own {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

.history-sidebar.is-playlists-view #my-playlist-song-list {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.history-sidebar .history-filter-primary-row {
  position: relative !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  width: 100% !important;
}

.history-sidebar .history-filter-menu-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  height: 40px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--ui-text-dim) !important;
  font: inherit !important;
  font-size: .76rem !important;
  font-weight: 720 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color .16s ease, border-color .16s ease, background .16s ease !important;
  flex: 0 0 auto !important;
  gap: 8px !important;
  min-width: 94px !important;
  padding: 0 14px !important;
}

.history-sidebar .history-settings-menu-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 40px !important;
  height: 40px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--ui-text-dim) !important;
  font: inherit !important;
  font-size: .76rem !important;
  font-weight: 720 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transition: color .16s ease, border-color .16s ease, background .16s ease !important;
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}

.history-sidebar .history-filter-menu-button svg {
  display: block !important;
  flex: 0 0 auto !important;
  width: 16px !important;
  height: 16px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.history-sidebar .history-settings-menu-button svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
}

.history-sidebar .history-filter-menu-button:hover {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb),.32) !important;
  background: rgba(var(--accent-rgb),.08) !important;
}

.history-sidebar .history-settings-menu-button:hover {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb),.32) !important;
  background: rgba(var(--accent-rgb),.08) !important;
}

.history-sidebar .history-filter-menu-button.is-open {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb),.32) !important;
  background: rgba(var(--accent-rgb),.08) !important;
}

.history-sidebar .history-settings-menu-button.is-open {
  color: var(--accent) !important;
  border-color: rgba(var(--accent-rgb),.32) !important;
  background: rgba(var(--accent-rgb),.08) !important;
}

.history-sidebar .history-settings-menu-wrap {
  position: relative !important;
  flex: 0 0 auto !important;
}

.history-sidebar .history-filter-panel {
  display: block !important;
  width: 100% !important;
}

.history-sidebar .history-filter-panel .hf-row-actions {
  width: 100% !important;
  padding-top: 2px !important;
}

.history-sidebar .history-filter-panel .hf-actions-cluster {
  width: 100% !important;
}

.history-sidebar .history-settings-menu.is-open {
  display: block !important;
}

.history-sidebar .history-settings-menu-title {
  padding: 0 2px 9px !important;
  margin-bottom: 8px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-muted) !important;
  font-size: .7rem !important;
  font-weight: 750 !important;
  letter-spacing: .03em !important;
  text-transform: uppercase !important;
}

.history-sidebar .history-settings-menu .hf-toggle-cluster {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  padding: 0 !important;
}

.history-sidebar .history-settings-menu .add-first-option {
  display: flex !important;
  width: 100% !important;
  min-height: 36px !important;
  margin: 0 !important;
  padding: 5px 4px !important;
  white-space: nowrap !important;
}

.history-sidebar .history-settings-menu .add-first-text {
  display: inline !important;
}

.history-sidebar .history-settings-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  font-size: 17px !important;
  line-height: 1 !important;
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
}

.activity-log-filter-top {
  align-items: center !important;
}

.activity-log-filter-panel {
  display: flex !important;
  width: 100% !important;
}

.activity-log-filter-panel .activity-log-category-group {
  flex: 1 1 100% !important;
}

.playlist-library-switch {
  display: inline-grid !important;
  align-items: center !important;
  gap: 3px !important;
  width: min(392px, 100%) !important;
  padding: 4px !important;
  margin: 0 0 10px 0 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.025) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  max-width: 100% !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.playlist-library-switch-btn {
  min-height: 24px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--ui-muted) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .16s ease,color .16s ease,box-shadow .16s ease !important;
  height: 24px !important;
}

.playlist-library-switch-btn:hover {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.04) !important;
}

.playlist-library-switch-btn.active {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb),.09) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.16) !important;
}

.my-playlist-toolbar {
  gap: 10px !important;
}

.my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 54px !important;
  min-width: 54px !important;
  padding: 0 !important;
}

.my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.85 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.history-sidebar.is-playlists-view .playlist-library-switch-btn:hover {
  color: var(--ui-text) !important;
  background: rgba(255,255,255,.035) !important;
}

.history-sidebar.is-playlists-view .playlist-library-switch-btn.active {
  color: var(--accent) !important;
  background: rgba(var(--accent-rgb), .12) !important;
  border-color: rgba(var(--accent-rgb), .22) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .12) !important;
}

.history-sidebar.is-playlists-view #my-playlists-summary {
  display: none !important;
}

.history-sidebar.is-playlists-view .my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
}

#my-playlists-summary {
  display: none !important;
}

#shared-playlists-summary {
  display: none !important;
}

.history-sidebar.is-playlists-view .my-playlists-toolbar-btn.my-playlist-toolbar-icon-btn {
  position: relative !important;
  width: 48px !important;
  min-width: 48px !important;
}

.history-sidebar.is-playlists-view .my-playlist-toolbar-glyph {
  display: inline-block !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  font-size: 1.08rem !important;
}

.history-sidebar.is-playlists-view #my-playlist-import-youtube .my-playlist-toolbar-glyph {
  font-size: 1rem !important;
}

.history-sidebar.is-playlists-view #my-playlist-rename .my-playlist-toolbar-glyph {
  font-size: 1rem !important;
}

.history-sidebar.is-playlists-view #my-playlist-delete .my-playlist-toolbar-glyph {
  font-size: .92rem !important;
}

.history-sidebar.is-playlists-view #my-playlist-add-all .my-playlist-toolbar-glyph {
  font-size: 1.02rem !important;
}

.history-sidebar.is-playlists-view #my-playlist-import-youtube {
  color: #8fc3ff !important;
}

.history-sidebar.is-playlists-view #my-playlist-rename {
  color: #d8c0ff !important;
}

.history-sidebar.is-playlists-view #my-playlist-delete {
  color: #ff9eb1 !important;
}

.history-sidebar.is-playlists-view #my-playlist-add-all {
  color: #9fe870 !important;
}

.history-sidebar.is-playlists-view .playlist-library-switch-btn {
  background: transparent !important;
  color: var(--ui-text-soft) !important;
  text-align: center !important;
  min-width: 0 !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 7px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-size: .86rem !important;
  font-weight: 680 !important;
  line-height: 1 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.history-sidebar.is-playlists-view .my-playlists-toolbar {
  padding-top: 12px !important;
  position: relative !important;
  z-index: 20 !important;
  overflow: visible !important;
}

.history-sidebar.is-playlists-view .my-playlist-song-list {
  position: relative !important;
  z-index: 1 !important;
}

.history-sidebar.is-playlists-view .my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn::after {
  content: attr(data-tip) !important;
  position: absolute !important;
  left: 50% !important;
  padding: 6px 9px !important;
  border-radius: 8px !important;
  background: rgba(9, 13, 19, 0.96) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--ui-text) !important;
  font-size: .69rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.28) !important;
  transition: opacity .14s ease, transform .14s ease !important;
  bottom: auto !important;
  transform: translate(-50%, -6px) !important;
  z-index: 100 !important;
  top: calc(100% + 8px) !important;
}

.history-sidebar.is-playlists-view .my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn:hover::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.history-sidebar.is-playlists-view .my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn:focus-visible::after {
  opacity: 1 !important;
  transform: translate(-50%, 0) !important;
}

.history-sidebar.is-playlists-view .shared-playlists-view {
  border-top: 1px solid var(--ui-border) !important;
}

.history-sidebar.is-playlists-view .shared-playlists-toolbar {
  display: flex !important;
  width: 100% !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  padding: 14px 20px !important;
}

.history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-user-filter {
  flex: 0 0 280px !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

.history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-select {
  flex: 1 1 auto !important;
  min-width: 260px !important;
  max-width: none !important;
  width: auto !important;
}

.history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-copy {
  white-space: nowrap !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

.history-sidebar.is-playlists-view #shared-playlists-summary {
  display: none !important;
}

.history-sidebar.is-playlists-view .playlist-library-switch {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 48px !important;
  padding: 5px !important;
  margin: 18px 20px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: rgba(18, 22, 30, 0.92) !important;
  box-shadow: none !important;
  height: 48px !important;
  box-sizing: border-box !important;
  width: 380px !important;
  max-width: 380px !important;
  min-width: 380px !important;
}

.history-sidebar.is-playlists-view .my-playlists-own {
  border-top: 1px solid var(--ui-border) !important;
}

.history-sidebar.is-playlists-view .my-playlists-own .my-playlists-toolbar {
  padding: 14px 20px !important;
  margin: 0 !important;
  border-top: 0 !important;
}

.hf-search-wrap .hf-search {
  width: 100% !important;
}

.hf-search-wrap input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

.hf-search-wrap input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: none !important;
}

.hf-search-wrap input[type="search"] {
  appearance: none !important;
}

.hf-search.has-clear {
  padding-right: 48px !important;
}

.hf-search-clear {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: background .14s ease, color .14s ease, opacity .14s ease !important;
  right: 9px !important;
  width: 30px !important;
  height: 30px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.035) !important;
  color: #aeb7c5 !important;
  font-size: 24px !important;
  line-height: 26px !important;
  cursor: pointer !important;
  z-index: 20 !important;
  min-width: 30px !important;
  min-height: 30px !important;
  font-weight: 400 !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
}

.hf-search-clear.show {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

.hf-search-clear:hover {
  outline: none !important;
  background: rgba(255,255,255,.085) !important;
  color: var(--ui-text) !important;
  border-color: rgba(255,255,255,.22) !important;
}

.hf-search-clear:focus-visible {
  outline: none !important;
  background: rgba(255,255,255,.085) !important;
  color: var(--ui-text) !important;
  border-color: rgba(255,255,255,.22) !important;
}

.hf-search-wrap {
  flex: 1 1 260px !important;
  min-width: 0 !important;
  position: relative !important;
  isolation: isolate !important;
}

.hf-search-wrap .hf-search-clear:not(.is-empty) {
  opacity: 1 !important;
}

.hf-search-wrap .hf-search-clear {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 50% !important;
  right: 9px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 22px !important;
  line-height: 24px !important;
  transition: opacity .14s ease, color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

.hf-search-wrap .hf-search-clear.show {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 50% !important;
  right: 9px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 22px !important;
  line-height: 24px !important;
  transition: opacity .14s ease, color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

.hf-search-wrap .hf-search-clear.is-empty {
  display: inline-flex !important;
  visibility: visible !important;
  position: absolute !important;
  top: 50% !important;
  right: 9px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  z-index: 30 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: auto !important;
  opacity: .42 !important;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
  font-size: 22px !important;
  line-height: 24px !important;
  transition: opacity .14s ease, color .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease !important;
}

.hf-search-wrap .hf-search-clear:hover {
  color: var(--ui-text) !important;
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.11) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.035) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.hf-search-wrap .hf-search-clear:focus-visible {
  color: var(--ui-text) !important;
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.11) !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.035) !important;
  transform: translateY(-50%) scale(1.06) !important;
}

.hf-search-wrap .hf-search-clear.is-clearing {
  animation: historySearchClearPress .18s ease-out !important;
}

#history-view-history {
  min-width: 122px !important;
  width: 122px !important;
  max-width: 122px !important;
  flex: 0 0 122px !important;
  justify-content: center !important;
  text-align: center !important;
}

#history-view-log {
  min-width: 122px !important;
  width: 122px !important;
  max-width: 122px !important;
  flex: 0 0 122px !important;
  justify-content: center !important;
  text-align: center !important;
}

#history-view-playlists {
  min-width: 122px !important;
  width: 122px !important;
  max-width: 122px !important;
  flex: 0 0 122px !important;
  justify-content: center !important;
  text-align: center !important;
}

#history-view-global {
  width: 122px !important;
  min-width: 122px !important;
  max-width: 122px !important;
  flex: 0 0 122px !important;
  justify-content: center !important;
  text-align: center !important;
}

body.history-global-enabled #history-view-global {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  flex: 0 0 90px !important;
}

body.history-global-enabled #history-view-history {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  flex: 0 0 90px !important;
}

body.history-global-enabled #history-view-playlists {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  flex: 0 0 90px !important;
}

body.history-global-enabled #history-view-log {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  flex: 0 0 90px !important;
}

.history-sidebar .history-filters.history-settings-open {
  z-index: 120 !important;
  overflow: visible !important;
}

.history-sidebar.is-playlists-view .history-filters.history-settings-open {
  z-index: 120 !important;
}

.history-sidebar .history-settings-backdrop {
  display: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 125 !important;
  pointer-events: none !important;
  background: rgba(5, 8, 12, .18) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
}

.history-sidebar .history-settings-menu-wrap.is-open .history-settings-backdrop {
  display: block !important;
}

.history-sidebar .history-settings-menu {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  width: max-content !important;
  min-width: 250px !important;
  padding: 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
  background: #161b23 !important;
  background-color: #161b23 !important;
  background-image: none !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 130 !important;
}

.history-sidebar .history-settings-done {
  width: 100% !important;
  min-height: 36px !important;
  margin: 10px 0 0 !important;
  padding: 0 14px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--ui-text) !important;
  font: inherit !important;
  font-size: .78rem !important;
  font-weight: 720 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.history-sidebar .history-settings-done:hover {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.16) !important;
}

.history-sidebar .history-settings-done:focus-visible {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.16) !important;
  outline: 1px solid rgba(var(--accent-rgb), .45) !important;
  outline-offset: 1px !important;
}

.history-sidebar .history-settings-menu-wrap.history-settings-quick-actions {
  width: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  overflow: visible !important;
}

.history-sidebar .history-settings-menu-wrap.history-settings-quick-actions > .history-settings-menu-button {
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  flex: 0 0 40px !important;
}

.history-sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 72%),
    var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: var(--ui-radius-lg) !important;
  color: var(--ui-text) !important;
  width: 50vw !important;
  max-width: 50vw !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.playlist-target-box {
  width: min(480px,100%) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg,rgba(21,27,43,.98),rgba(15,20,32,.99)) !important;
  box-shadow: none !important;
}

.history-layout-mode-box {
  box-shadow: none !important;
}

.history-layout-preview-card {
  box-shadow: none !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host {
  position: fixed !important;
  z-index: 10020 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  min-width: 0 !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host:empty {
  display: none !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .app-top-notice {
  --notice-open-height: 120px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 60px !important;
  max-height: var(--notice-open-height) !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  transition: opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .account-top-notice {
  --notice-open-height: 120px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 60px !important;
  max-height: var(--notice-open-height) !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  transition: opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .msg {
  --notice-open-height: 120px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 60px !important;
  max-height: var(--notice-open-height) !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  transition: opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .flash-message {
  --notice-open-height: 120px;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 60px !important;
  max-height: var(--notice-open-height) !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  opacity: 0 !important;
  transform: translateY(8px) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
  transition: opacity .26s ease, transform .32s cubic-bezier(.22,1,.36,1) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .app-top-notice.notice-ready {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .account-top-notice.notice-ready {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .msg.notice-ready {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .flash-message.notice-ready {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .app-top-notice.is-hiding {
  opacity: 0 !important;
  transform: translateY(8px) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .account-top-notice.is-hiding {
  opacity: 0 !important;
  transform: translateY(8px) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .msg.is-hiding {
  opacity: 0 !important;
  transform: translateY(8px) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .flash-message.is-hiding {
  opacity: 0 !important;
  transform: translateY(8px) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .success {
  color: #8fe3bc !important;
  border-color: rgba(73,205,143,.24) !important;
  background: linear-gradient(90deg, rgba(24,76,55,.48) 0%, rgba(10,24,20,.97) 38%, rgba(10,18,17,.96) 100%) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .info {
  color: #8fe3bc !important;
  border-color: rgba(73,205,143,.24) !important;
  background: linear-gradient(90deg, rgba(24,76,55,.48) 0%, rgba(10,24,20,.97) 38%, rgba(10,18,17,.96) 100%) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .error {
  color: #ffb0bd !important;
  border-color: rgba(235,84,111,.26) !important;
  background: linear-gradient(90deg, rgba(91,29,43,.50) 0%, rgba(28,13,18,.97) 38%, rgba(18,11,14,.96) 100%) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: rgba(233,240,246,.96) !important;
  font-size: .92rem !important;
  line-height: 1.5 !important;
  pointer-events: none !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-timer {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 999px !important;
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .8rem !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  color: inherit !important;
  background: rgba(255,255,255,.045) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  pointer-events: none !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-timer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: conic-gradient(currentColor calc(var(--timer-progress) * 1turn), rgba(255,255,255,.10) 0) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)) !important;
  opacity: .92 !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-timer::after {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  border-radius: inherit !important;
  background: rgba(8,12,20,.90) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045) !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-timer-text {
  position: relative !important;
  z-index: 1 !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-close {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  margin-left: auto !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: rgba(238,242,247,.90) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

:is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-close:hover {
  color: #fff !important;
  background: rgba(255,255,255,.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
}

html body:not(#jb-typography-priority) :is(
  time,
  .item-pos,
  .item-dur,
  .queue-count,
  .history-meta-date,
  .history-meta-datetime,
  .history-plays,
  .activity-log-time,
  .footer-version,
  .mobile-count
) {
  font-variant-numeric: tabular-nums;
}

html body:not(#jb-typography-priority) .playlist-target-header h3 {
  font-size: .96rem !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}



html body:not(#jb-typography-priority) :is(
  input,
  select,
  textarea,
  .url-input,
  .hf-search,
  .hf-select,
  .queue-user-filter,
  .reserve-bot-select,
  .mobile-input,
  .mobile-select
) {
  font-size: var(--jb-type-control) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

html body:not(#jb-typography-priority) :is(
  button,
  .btn,
  .btn-save,
  .btn-ghost,
  .btn-danger,
  .btn-danger-subtle,
  .btn-sm,
  .add-btn,
  .clear-btn,
  .hf-btn,
  .copy-btn,
  .paste-btn,
  .history-close,
  .history-readd,
  .history-star,
  .history-blacklist,
  .remove-btn,
  .mobile-button
) {
  font-size: .82rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

html body:not(#jb-typography-priority) :is(
  .subtitle,
  .box-subtitle,
  .setup-info,
  .privacy-note,
  .settings-help,
  .bot-reservation-sub,
  .bot-reservation-hint,
  .np-author,
  .item-meta,
  .history-meta,
  .my-playlist-song-meta,
  .user-card-email,
  .activity-log-meta,
  .mobile-track-author,
  .mobile-empty,
  .mobile-list-item small
) {
  font-size: var(--jb-type-sm) !important;
  line-height: 1.48 !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

html body:not(#jb-typography-priority) :is(
  .np-title,
  .item-title,
  .history-title,
  .my-playlist-song-title,
  .user-card-name,
  .activity-log-text,
  .mobile-track-title
) {
  font-size: .9rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: -.005em !important;
}

html body:not(#jb-typography-priority) :is(
  .queue-count,
  .badge,
  .status-badge,
  .playlist-badge,
  .np-live-badge,
  .history-meta-chip,
  .activity-log-category,
  .activity-log-bot,
  .activity-log-time,
  .mobile-badge
) {
  font-size: var(--jb-type-xs) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
}

html body:not(#jb-typography-priority) .history-header h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
}

html body:not(#jb-typography-priority) .activity-log-message {
  font-size: .8rem !important;
  line-height: 1.48 !important;
}

html body:not(#jb-typography-priority) .activity-log-line {
  font-size: .8rem !important;
  line-height: 1.48 !important;
}

html body:not(#jb-typography-priority) .activity-log-user {
  font-size: .8rem !important;
  font-weight: 600 !important;
}







































@media (max-width: 1100px) {
  .history-multi-bar {
    flex-wrap: wrap !important;
  }

  .history-multi-actions {
    width: 100% !important;
    justify-content: flex-end !important;
  }

}

@media (max-width: 1180px) {
  .hf-group-filter .hf-btn {
    width: 104px !important;
    min-width: 104px !important;
    flex-basis: 104px !important;
  }

  .hf-group-sort .hf-btn {
    width: 104px !important;
    min-width: 104px !important;
    flex-basis: 104px !important;
  }

  .activity-log-category-group .hf-btn {
    width: 104px !important;
    min-width: 104px !important;
    flex-basis: 104px !important;
  }

}

@media (max-width: 460px) {
  .history-toggle {
    right: 12px !important;
    bottom: 12px !important;
  }

}

@media (max-width: 620px) {
  .history-edge-side-right {
    border-radius: 11px 0 0 11px !important;
  }

  .history-edge-side-left {
    border-radius: 0 11px 11px 0 !important;
  }

  .history-edge-top {
    top: 98px !important;
  }

  .history-edge-bottom {
    bottom: 40px !important;
  }

  .history-resize-handle {
    display: none !important;
  }

  .history-edge-toggle {
    min-height: 132px !important;
    padding: 11px 7px !important;
    width: 38px !important;
    min-width: 38px !important;
  }

  .history-edge-toggle:hover {
    width: 38px !important;
    min-width: 38px !important;
  }

  .history-page-drawer-resize-handle {
    display: none !important;
  }

}

@media (max-width: 720px) {
  .playlist-badge {
    max-width: 150px !important;
  }

  body:not(.history-drawer-embed) .history-sidebar {
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 0 !important;
  }

  body:not(.history-drawer-embed) .history-sidebar.history-sidebar-right {
    right: -100vw !important;
    left: auto !important;
  }

  body:not(.history-drawer-embed) .history-sidebar.history-sidebar-left {
    left: -100vw !important;
    right: auto !important;
  }

  .history-header {
    padding: 14px !important;
  }

  .history-filters {
    padding: 12px 14px !important;
  }

  .history-list {
    padding: 12px 14px 24px !important;
  }

  .hf-row {
    flex-wrap: wrap !important;
  }

  .hf-search {
    flex-basis: 100% !important;
  }

  .history-item {
    grid-template-columns: 62px minmax(0,1fr) !important;
    gap: 9px !important;
  }

  .history-action-box {
    grid-row: 2 !important;
  }

  .history-thumb-link {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .history-info {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .history-bl-box {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .history-star {
    min-width: 76px !important;
  }

  .history-readd {
    min-width: 76px !important;
  }

  .history-blacklist {
    min-width: 76px !important;
  }

  .history-multi-actions {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .history-multi-playlist-select {
    min-width: 150px !important;
    max-width: 100% !important;
    flex: 1 1 180px !important;
  }

  .history-multi-separator {
    margin-inline: 6px !important;
  }

  .history-multi-create-playlist {
    min-width: 108px !important;
  }

  :is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .app-top-notice {
    min-height: 56px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
  }

  :is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .account-top-notice {
    min-height: 56px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
  }

  :is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .msg {
    min-height: 56px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
  }

  :is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host > .flash-message {
    min-height: 56px !important;
    padding: 11px 12px !important;
    gap: 10px !important;
  }

  :is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-timer {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  :is(#app-global-notice-host, #history-panel-notice-host).app-bottom-notice-host .timed-notice-close {
    width: 38px !important;
    height: 38px !important;
    flex-basis: 38px !important;
  }

}

@media (max-width: 760px) {
  body:not(.history-drawer-embed) .history-sidebar {
    width: min(92vw, 430px) !important;
  }

  .history-item {
    grid-template-columns: 40px 40px 62px minmax(0,1fr) !important;
  }

  .history-action-box {
    grid-row: 2 !important;
  }

  .history-action-box:nth-child(1) {
    grid-column: 1 !important;
  }

  .history-action-box:nth-child(2) {
    grid-column: 2 !important;
  }

  .history-thumb-link {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  .history-info {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  .history-bl-box {
    grid-column: 4 !important;
    justify-self: end !important;
  }

  .history-first-option {
    margin-left: 0 !important;
  }

  .history-multi-option {
    margin-left: 0 !important;
  }

  .history-multi-bar {
    align-items: stretch !important;
    flex-direction: column !important;
  }

  .history-multi-left {
    justify-content: space-between !important;
  }

  .history-multi-actions {
    justify-content: space-between !important;
  }

  .activity-log-filter-top .hf-select {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  .activity-log-assigned {
    align-self: stretch !important;
    justify-content: center !important;
  }

  .activity-log-entry-head {
    flex-wrap: wrap !important;
  }

  .activity-log-time {
    margin-left: 0 !important;
  }

  .history-sidebar.is-admin-log-view .activity-log-bot-filter {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
  }

  .history-header-main {
    gap: 10px !important;
  }

  .history-view-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    font-size: .8rem !important;
    padding: 7px 10px !important;
    min-height: 36px !important;
    height: 36px !important;
  }

  #history-view-admin-log {
    font-size: .8rem !important;
    padding: 7px 10px !important;
    min-height: 36px !important;
    height: 36px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .history-view-btn-subtle {
    min-width: 0 !important;
    width: 100% !important;
  }

  .history-view-switch {
    width: 100% !important;
    grid-auto-columns: 1fr !important;
    min-height: 46px !important;
    padding: 4px !important;
    flex: 1 1 auto !important;
  }

  .history-admin-toggle {
    width: 100% !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  #hist-user {
    width: 100% !important;
    min-width: 0 !important;
  }

  #activity-log-user {
    width: 100% !important;
    min-width: 0 !important;
  }

  body:not(.history-drawer-embed) .hf-group-filter .hf-btn {
    width: calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    flex: 1 1 calc(50% - 4px) !important;
  }

  body:not(.history-drawer-embed) .hf-group-sort .hf-btn {
    width: calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    flex: 1 1 calc(50% - 4px) !important;
  }

  .history-header-view-controls {
    width: 100% !important;
    justify-content: space-between !important;
    margin-left: 0 !important;
  }

  .activity-log-category-group .hf-btn {
    width: calc(50% - 4px) !important;
    min-width: calc(50% - 4px) !important;
    flex: 1 1 calc(50% - 4px) !important;
  }

  #my-playlist-song-list.multi-mode .my-playlist-song {
    grid-template-columns: 34px 54px minmax(0,1fr) !important;
  }

  #my-playlist-song-list.multi-mode .my-playlist-song-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
  }

  .history-list.multi-mode .history-item {
    grid-template-columns: 34px 40px 40px 62px minmax(0,1fr) !important;
  }

  .history-list.multi-mode .history-select-box {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .history-list.multi-mode .history-fav-box {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .history-list.multi-mode .history-add-box {
    grid-column: 3 !important;
    grid-row: 2 !important;
  }

  .history-list.multi-mode .history-thumb-link {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  .history-list.multi-mode .history-info {
    grid-column: 5 !important;
    grid-row: 1 !important;
  }

  .history-list.multi-mode .history-bl-box {
    grid-column: 5 !important;
    grid-row: 2 !important;
    justify-self: end !important;
  }

  .history-sidebar .history-filter-primary-row {
    flex-wrap: wrap !important;
  }

  .history-sidebar .history-filter-primary-row .hf-search {
    flex: 1 1 100% !important;
  }

  .history-sidebar .history-filter-primary-row #hist-user {
    flex: 1 1 180px !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .history-sidebar .history-settings-menu {
    right: 0 !important;
    min-width: 230px !important;
  }

  .activity-log-filter-top {
    flex-wrap: wrap !important;
  }

  .activity-log-filter-top .hf-search {
    max-width: none !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  .history-sidebar.is-playlists-view .shared-playlists-toolbar {
    flex-wrap: wrap !important;
  }

  .history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-select {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-copy {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  .history-sidebar.is-playlists-view .playlist-library-switch {
    width: calc(100% - 28px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 28px) !important;
  }

  #history-view-history {
    min-height: 36px !important;
    height: 36px !important;
    font-size: .8rem !important;
    padding: 7px 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  #history-view-log {
    min-height: 36px !important;
    height: 36px !important;
    font-size: .8rem !important;
    padding: 7px 10px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  #history-view-playlists {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  #history-view-global {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  body.history-global-enabled #history-view-global {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  body.history-global-enabled #history-view-history {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  body.history-global-enabled #history-view-playlists {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

  body.history-global-enabled #history-view-log {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 0 !important;
  }

}

@media (max-width: 900px) {
  .history-multi-stack {
    width: 100% !important;
  }

  body:not(.history-drawer-embed) .hf-row-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body:not(.history-drawer-embed) .hf-actions-cluster {
    width: 100% !important;
  }

  body:not(.history-drawer-embed) .hf-group {
    width: 100% !important;
  }

  .history-sidebar {
    width: min(78vw, 680px) !important;
    max-width: min(78vw, 680px) !important;
  }

  .history-sidebar.history-sidebar-right {
    right: min(-78vw, -680px) !important;
  }

  .history-sidebar.history-sidebar-left {
    left: min(-78vw, -680px) !important;
  }

  .activity-log-message {
    grid-template-columns: 56px minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .activity-log-avatar .uav {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
  }

  .activity-log-time {
    grid-column: 2 !important;
    justify-self: start !important;
    align-self: start !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
  }

  .history-sidebar.is-log-view .activity-log-entry {
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  .my-playlist-song {
    grid-template-columns: 52px 54px minmax(0,1fr) !important;
  }

  .my-playlist-song.with-select {
    grid-template-columns: 34px 52px 54px minmax(0,1fr) !important;
  }

  .my-playlist-song-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
  }

  #my-playlist-song-list .my-playlist-song {
    grid-template-columns: 52px 54px minmax(0,1fr) !important;
  }

  #my-playlist-song-list .my-playlist-song.with-select {
    grid-template-columns: 34px 52px 54px minmax(0,1fr) !important;
  }

  #my-playlist-song-list .my-playlist-song-actions {
    width: auto !important;
    min-width: 0 !important;
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
  }

  .history-sidebar.is-playlists-view .shared-playlists-toolbar {
    flex-wrap: wrap !important;
    padding: 14px !important;
  }

  .history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-user-filter {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-select {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  .history-sidebar.is-playlists-view .shared-playlists-toolbar #shared-playlist-copy {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    margin-left: 0 !important;
  }

  .history-sidebar.is-playlists-view .my-playlists-own .my-playlists-toolbar {
    padding: 14px !important;
  }

  

  

}

@media (max-width: 980px) {
  #hist-user {
    min-width: 170px !important;
    width: 170px !important;
  }

  #activity-log-user {
    min-width: 170px !important;
    width: 170px !important;
  }

}

@media (max-width:620px) {
  .history-page-drawer-panel {
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 80vh !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(100%) !important;
  }

  .history-page-drawer.is-open .history-page-drawer-panel {
    transform: translateY(0) !important;
  }

}

@media (max-width:760px) {
  #history-view-playlists {
    min-width: 0 !important;
    width: 100% !important;
  }

  .my-playlists-toolbar {
    align-items: stretch !important;
  }

  #my-playlist-select {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  .my-playlist-song {
    grid-template-columns: 54px minmax(0,1fr) !important;
  }

  .my-playlist-song-thumb {
    width: 54px !important;
    height: 40px !important;
  }

  .my-playlist-song-actions {
    grid-column: 1 / -1 !important;
    justify-content: flex-end !important;
  }

  .playlist-target-actions {
    flex-direction: column-reverse !important;
  }

  .playlist-target-actions .my-playlist-toolbar-btn {
    width: 100% !important;
  }

  .shared-playlist-song {
    grid-template-columns: 30px 54px minmax(0,1fr) !important;
  }

  .playlist-library-switch {
    width: 100% !important;
  }

  .playlist-library-switch-btn {
    flex: 1 1 0 !important;
    min-height: 28px !important;
    height: 28px !important;
  }

  .my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn {
    width: 48px !important;
    min-width: 48px !important;
  }

  .history-sidebar.is-playlists-view .my-playlist-toolbar-btn.my-playlist-toolbar-icon-btn {
    width: 44px !important;
    min-width: 44px !important;
  }

  .history-sidebar.is-playlists-view .playlist-library-switch {
    width: auto !important;
    max-width: calc(100% - 28px) !important;
    margin: 14px !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 4px !important;
  }

  .history-sidebar.is-playlists-view .playlist-library-switch-btn {
    min-height: 36px !important;
    height: 36px !important;
    font-size: .8rem !important;
    padding: 7px 10px !important;
  }

}

@media (min-width: 1051px) and (max-width: 1575px) {
  body.history-layout-split .history-split-shell {
    grid-template-columns: minmax(680px, var(--jb-shell-width)) minmax(0, 1fr) !important;
  }

  body.history-layout-split.history-split-left .history-split-shell {
    grid-template-columns: minmax(0, 1fr) minmax(680px, var(--jb-shell-width)) !important;
  }
}

@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  body.history-layout-split.layout-live-history-pending .history-split-shell > .history-sidebar {
    opacity: 0 !important;
    transition: none !important;
    will-change: transform, opacity !important;
  }

  body.history-layout-split.layout-live-history-pending .history-page-split-shell > .history-split-frame {
    opacity: 0 !important;
    transition: none !important;
    will-change: transform, opacity !important;
  }

  body.history-layout-split.layout-live-history-pending.layout-edge-right .history-split-shell > .history-sidebar {
    transform: translate3d(100%,0,0) !important;
  }

  body.history-layout-split.layout-live-history-pending.layout-edge-right .history-page-split-shell > .history-split-frame {
    transform: translate3d(100%,0,0) !important;
  }

  body.history-layout-split.layout-live-history-pending.layout-edge-left .history-split-shell > .history-sidebar {
    transform: translate3d(-100%,0,0) !important;
  }

  body.history-layout-split.layout-live-history-pending.layout-edge-left .history-page-split-shell > .history-split-frame {
    transform: translate3d(-100%,0,0) !important;
  }

  body.history-layout-split.layout-live-history-pending.layout-live-history-active .history-split-shell > .history-sidebar {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
    transition: transform 1000ms cubic-bezier(.22,.61,.26,1), opacity 760ms ease !important;
  }

  body.history-layout-split.layout-live-history-pending.layout-live-history-active .history-page-split-shell > .history-split-frame {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
    transition: transform 1000ms cubic-bezier(.22,.61,.26,1), opacity 760ms ease !important;
  }

  body.history-layout-split.layout-live-history-out .history-split-shell > .history-sidebar {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
    will-change: transform, opacity !important;
    transition: transform 1000ms cubic-bezier(.22,.61,.26,1), opacity 760ms ease !important;
  }

  body.history-layout-split.layout-live-history-out .history-page-split-shell > .history-split-frame {
    opacity: 1 !important;
    transform: translate3d(0,0,0) !important;
    will-change: transform, opacity !important;
    transition: transform 1000ms cubic-bezier(.22,.61,.26,1), opacity 760ms ease !important;
  }

  body.history-layout-split.layout-live-history-out.layout-live-history-out-active.layout-edge-right .history-split-shell > .history-sidebar {
    opacity: 0 !important;
    transform: translate3d(100%,0,0) !important;
  }

  body.history-layout-split.layout-live-history-out.layout-live-history-out-active.layout-edge-right .history-page-split-shell > .history-split-frame {
    opacity: 0 !important;
    transform: translate3d(100%,0,0) !important;
  }

  body.history-layout-split.layout-live-history-out.layout-live-history-out-active.layout-edge-left .history-split-shell > .history-sidebar {
    opacity: 0 !important;
    transform: translate3d(-100%,0,0) !important;
  }

  body.history-layout-split.layout-live-history-out.layout-live-history-out-active.layout-edge-left .history-page-split-shell > .history-split-frame {
    opacity: 0 !important;
    transform: translate3d(-100%,0,0) !important;
  }

  body.layout-live-transition.layout-live-history-pending .history-split-shell > .history-sidebar {
    visibility: hidden !important;
  }

  body.layout-live-transition.layout-live-history-pending .history-page-split-shell > .history-split-frame {
    visibility: hidden !important;
  }

  body.history-layout-split.layout-live-transition.layout-live-history-pending.layout-live-history-active .history-split-shell > .history-sidebar {
    visibility: visible !important;
  }

  body.history-layout-split.layout-live-transition.layout-live-history-pending.layout-live-history-active .history-page-split-shell > .history-split-frame {
    visibility: visible !important;
  }

}

@media (min-width: 1051px) {
  body.history-layout-split {
    overflow-x: hidden !important;
  }

  body.history-layout-split .history-split-shell {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: var(--jb-shell-width) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }

  body.history-layout-split.history-split-left .history-split-shell {
    margin: 0 auto !important;
    grid-template-columns: minmax(0, 1fr) var(--jb-shell-width) !important;
  }

  body.history-layout-split .history-edge-toggle {
    display: none !important;
  }

  body.history-layout-split .history-close {
    display: none !important;
  }

  body.history-layout-split .history-split-shell .app {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.history-layout-split:not(.history-embed) .site-header {
    margin-bottom: var(--jb-header-content-gap) !important;
  }

  body.history-layout-split .history-split-shell .history-sidebar {
    position: sticky !important;
    inset: auto !important;
    top: 18px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: calc(100vh - 36px) !important;
    max-height: calc(100vh - 36px) !important;
    margin: 0 !important;
    z-index: 20 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    border: 1px solid var(--ui-border-strong) !important;
    border-radius: 18px !important;
    box-shadow: var(--ui-shadow) !important;
    transition: none !important;
  }

  body.history-layout-split.history-split-left .history-split-shell .history-sidebar {
    grid-column: 1 !important;
  }

  body.history-layout-split.history-split-left .history-split-shell .app {
    grid-column: 2 !important;
  }

  body.history-layout-split .history-page-split-shell > .app {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.history-layout-split .history-page-split-shell > .page-wrap {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body.history-layout-split .history-page-split-shell > .history-split-frame {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: calc(100vh - 36px) !important;
    position: sticky !important;
    top: 18px !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    border: 0 !important;
    border-radius: 18px !important;
    background: transparent !important;
  }

  body.history-layout-split.history-split-left .history-page-split-shell > .history-split-frame {
    grid-column: 1 !important;
  }

  body.history-layout-split.history-split-left .history-page-split-shell > .app {
    grid-column: 2 !important;
  }

  body.history-layout-split.history-split-left .history-page-split-shell > .page-wrap {
    grid-column: 2 !important;
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .app::-webkit-scrollbar,
  body.history-layout-split:not(.history-embed) .history-page-split-shell > .app::-webkit-scrollbar,
  body.history-layout-split:not(.history-embed) .history-page-split-shell > .page-wrap::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
  }

  body.history-layout-split:not(.history-embed) > .toast.toast-split-position.show {
    transform: translateX(-50%) translateY(0) !important;
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .history-sidebar {
    height: calc(100vh - 36px) !important;
    max-height: calc(100vh - 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  body.history-embed > .history-sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    overscroll-behavior: contain !important;
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .history-sidebar .history-header {
    flex: 0 0 auto !important;
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .history-sidebar .history-filters {
    flex: 0 0 auto !important;
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .history-sidebar .activity-log-filters {
    flex: 0 0 auto !important;
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .history-sidebar .history-multi-bar {
    flex: 0 0 auto !important;
  }

  body.history-embed > .history-sidebar .history-header {
    flex: 0 0 auto !important;
  }

  body.history-embed > .history-sidebar .history-filters {
    flex: 0 0 auto !important;
  }

  body.history-embed > .history-sidebar .activity-log-filters {
    flex: 0 0 auto !important;
  }

  body.history-embed > .history-sidebar .history-multi-bar {
    flex: 0 0 auto !important;
  }

  body.history-drawer-embed .history-filter-panel .hf-row-actions {
    display: block !important;
    width: 100% !important;
  }

  body.history-drawer-embed .history-filter-panel .hf-actions-cluster {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.history-drawer-embed .history-filter-panel .hf-group {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  body.history-drawer-embed .history-filter-panel .hf-group-buttons {
    flex-wrap: nowrap !important;
    min-width: 0 !important;
  }

  body.history-drawer-embed .history-filter-panel .hf-group-filter .hf-btn,
  body.history-drawer-embed .history-filter-panel .hf-group-sort .hf-btn {
    width: 118px !important;
    min-width: 0 !important;
    max-width: 118px !important;
    flex: 0 1 118px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  @media (max-width: 900px) {
    body.history-drawer-embed .history-filter-panel .hf-group-filter .hf-btn,
    body.history-drawer-embed .history-filter-panel .hf-group-sort .hf-btn {
      width: 104px !important;
      max-width: 104px !important;
      flex-basis: 104px !important;
    }
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .history-sidebar .history-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.history-layout-split:not(.history-embed) .history-split-shell > .history-sidebar .activity-log-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.history-embed > .history-sidebar .history-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.history-embed > .history-sidebar .activity-log-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.history-layout-split:not(.history-embed) .history-page-split-shell > .history-split-frame {
    height: calc(100vh - 36px) !important;
    max-height: calc(100vh - 36px) !important;
    overscroll-behavior: contain !important;
    overflow: hidden !important;
    position: relative !important;
    top: 0 !important;
    align-self: stretch !important;
  }

  html:not(:has(body.history-layout-split:not(.history-embed))) {
    overflow-y: scroll !important;
    scrollbar-gutter: stable !important;
  }

  

  

  body.history-layout-split:not(.history-embed) .history-split-shell {
    height: 100vh !important;
    max-height: 100vh !important;
    align-items: stretch !important;
    overscroll-behavior: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  body.history-layout-split:not(.history-embed) .history-page-split-shell {
    height: 100vh !important;
    max-height: 100vh !important;
    align-items: stretch !important;
    overscroll-behavior: none !important;
    overflow: visible !important;
    box-shadow: none !important;
  }

  

  

  

  body.history-layout-split:not(.history-embed) .nav-history-link {
    display: none !important;
  }

  

  body.history-layout-split:not(.history-embed) {
    height: 100vh !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    padding-bottom: 0 !important;
  }

  body.history-layout-split:not(.history-embed) > .toast.toast-split-position {
    position: fixed !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) translateY(2rem) !important;
    bottom: 88px !important;
    z-index: 10000 !important;
  }

  

  

  

  body.history-layout-split:not(.history-embed) .history-split-shell > .app {
    scrollbar-width: none !important;
    padding-right: 0 !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: none !important;
    position: relative !important;
    isolation: isolate !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
    padding-top: 0 !important;
    scrollbar-gutter: auto !important;
    background: var(--ui-bg) !important;
    background-image: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 0 !important;
  }


  /* During the Standard <-> Split FLIP the shell regions still occupy their
     previous viewport positions via translate. The finished Split app clips
     horizontal overflow, which would crop those translated regions against
     the new grid column and expose the bare page background. Temporarily let
     the moving regions paint outside the final app box; the canonical clip is
     restored automatically when layout-live-transition is removed. */
  body.history-layout-split:not(.history-embed).layout-live-transition .history-split-shell > .app {
    overflow: visible !important;
    z-index: 30 !important;
  }

  body.history-layout-split:not(.history-embed).layout-live-transition .history-split-shell > .history-sidebar,
  body.history-layout-split:not(.history-embed).layout-live-transition .history-page-split-shell > .history-split-frame {
    z-index: 20 !important;
  }

  body.history-layout-split:not(.history-embed) .history-page-split-shell > .app {
    scrollbar-width: none !important;
    padding-right: 0 !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: none !important;
    position: relative !important;
    isolation: isolate !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
    padding-top: 0 !important;
    scrollbar-gutter: auto !important;
    background: var(--ui-bg) !important;
    background-image: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 0 !important;
  }

  body.history-layout-split:not(.history-embed) .history-page-split-shell > .page-wrap {
    scrollbar-width: none !important;
    padding-right: 0 !important;
    overscroll-behavior-y: contain !important;
    overscroll-behavior-x: none !important;
    position: relative !important;
    isolation: isolate !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
    padding-top: 0 !important;
    scrollbar-gutter: auto !important;
    background: var(--ui-bg) !important;
    background-image: none !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 0 !important;
  }

  

}

@media (min-width: 1320px) {
  body.history-layout-split:not(.history-embed) .history-split-shell {
    grid-template-columns: minmax(680px, var(--jb-shell-width)) minmax(560px, 1fr) !important;
  }

  body.history-layout-split.history-split-left:not(.history-embed) .history-split-shell {
    grid-template-columns: minmax(560px, 1fr) minmax(680px, var(--jb-shell-width)) !important;
  }

  body.history-layout-split:not(.history-embed) .history-page-split-shell > .history-split-frame {
    min-width: 560px !important;
  }
}

@media (min-width: 521px) {
  .history-sidebar {
    width: 50vw !important;
    max-width: 50vw !important;
    right: -50vw !important;
  }

  .history-sidebar.open {
    right: 0 !important;
  }

}

@media (min-width: 621px) {
  body:not(.history-layout-split):not(.history-embed) .history-sidebar {
    width: min(max(var(--history-min-width, 780px), var(--history-standard-width, 50vw)), calc(100vw - 72px)) !important;
    max-width: min(max(var(--history-min-width, 780px), var(--history-standard-width, 50vw)), calc(100vw - 72px)) !important;
    top: 18px !important;
    bottom: 18px !important;
    height: calc(100vh - 36px) !important;
    max-height: calc(100vh - 36px) !important;
  }

  body:not(.history-layout-split):not(.history-embed) .history-sidebar.history-sidebar-right {
    right: 0 !important;
    left: auto !important;
    transform: translateX(100%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
  }

  body:not(.history-layout-split):not(.history-embed) .history-sidebar.history-sidebar-right.open {
    transform: translateX(0) !important;
  }

  body:not(.history-layout-split):not(.history-embed) .history-sidebar.history-sidebar-left {
    left: 0 !important;
    right: auto !important;
    transform: translateX(-100%) !important;
    transition: transform .3s cubic-bezier(.4,0,.2,1) !important;
  }

  body:not(.history-layout-split):not(.history-embed) .history-sidebar.history-sidebar-left.open {
    transform: translateX(0) !important;
  }

  .history-resize-handle {
    position: absolute !important;
    top: 50% !important;
    z-index: 230 !important;
    width: 14px !important;
    height: 82px !important;
    transform: translateY(-50%) !important;
    cursor: ew-resize !important;
    touch-action: none !important;
    user-select: none !important;
  }

  .history-resize-handle::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 4px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 999px !important;
    background: rgba(210,216,226,.34) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 6px 18px rgba(0,0,0,.22) !important;
    transition: background .16s ease, height .16s ease !important;
  }

  .history-resize-handle:hover::before {
    height: 58px !important;
    background: rgba(222,227,235,.58) !important;
  }

  .history-sidebar.is-resizing .history-resize-handle::before {
    height: 58px !important;
    background: rgba(222,227,235,.58) !important;
  }

  .history-sidebar-right .history-resize-handle {
    left: 0 !important;
  }

  .history-sidebar-left .history-resize-handle {
    right: 0 !important;
  }

  body.history-is-resizing {
    cursor: ew-resize !important;
    user-select: none !important;
  }

  body.history-is-resizing * {
    cursor: ew-resize !important;
    user-select: none !important;
  }

  body.history-is-resizing .history-sidebar {
    transition: none !important;
  }

  body:not(.history-layout-split) .history-sidebar .history-filters > .history-filter-primary-row {
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) 220px 110px 40px !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }

  body:not(.history-layout-split) .history-sidebar .history-filters > .hf-row:first-child .hf-search {
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    flex-basis: auto !important;
  }

  body:not(.history-layout-split) .history-sidebar #hist-user {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body:not(.history-layout-split) .history-sidebar #hist-display-limit {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body:not(.history-layout-split):not(.history-embed) .history-resize-handle {
    display: block !important;
  }

  body.history-layout-split .history-resize-handle {
    display: none !important;
  }

  body.history-embed .history-resize-handle {
    display: none !important;
  }

  body:not(.history-layout-split):not(.history-embed) .history-page-drawer-resize-handle {
    display: block !important;
  }

  .history-page-drawer-right .history-page-drawer-resize-handle {
    left: 0 !important;
    right: auto !important;
  }

  .history-page-drawer-left .history-page-drawer-resize-handle {
    right: 0 !important;
    left: auto !important;
  }

  .history-page-drawer-panel.is-resizing {
    transition: none !important;
  }

  .history-page-drawer-panel.is-resizing .history-page-drawer-resize-handle::before {
    height: 58px !important;
    background: rgba(222,227,235,.58) !important;
  }

  body.history-page-drawer-open > .history-edge-toggle {
    z-index: 10020 !important;
  }

  body:not(.history-embed) .history-sidebar.history-sidebar-right {
    box-shadow: none !important;
  }

  body:not(.history-embed) .history-sidebar.history-sidebar-left {
    box-shadow: none !important;
  }

  body.history-embed > .history-sidebar {
    box-shadow: none !important;
  }

  .history-sidebar .history-list {
    box-shadow: inset 0 18px 20px -20px rgba(0,0,0,.90),
      inset 0 -18px 20px -20px rgba(0,0,0,.90) !important;
  }

  .history-sidebar .activity-log-list {
    box-shadow: inset 0 18px 20px -20px rgba(0,0,0,.90),
      inset 0 -18px 20px -20px rgba(0,0,0,.90) !important;
  }

  .history-sidebar .my-playlist-song-list {
    box-shadow: inset 0 18px 20px -20px rgba(0,0,0,.90),
      inset 0 -18px 20px -20px rgba(0,0,0,.90) !important;
  }

  .history-sidebar .history-filters {
    position: relative !important;
    z-index: 6 !important;
    box-shadow: none !important;
  }

  .history-sidebar .activity-log-filters {
    position: relative !important;
    z-index: 6 !important;
    box-shadow: none !important;
  }

  .history-sidebar .history-multi-bar {
    position: relative !important;
    z-index: 6 !important;
    box-shadow: none !important;
  }

  .history-sidebar .my-playlists-summary {
    position: relative !important;
    z-index: 6 !important;
    box-shadow: none !important;
  }

  .history-sidebar .history-multi-bar.show {
    box-shadow: none !important;
  }

  .history-sidebar .my-playlists-toolbar {
    box-shadow: none !important;
  }

  .history-sidebar::after {
    content: none !important;
    display: none !important;
    box-shadow: none !important;
  }

  .history-sidebar::before {
    box-shadow: none !important;
  }

}

@media (min-width: 761px) {
  #history-view-title {
    flex: 0 0 112px !important;
    width: 112px !important;
  }

  .history-view-switch {
    margin-left: 8px !important;
  }

  body:not(.history-layout-split) .history-sidebar .history-filter-primary-row .history-filter-menu-button {
    width: 94px !important;
    min-width: 94px !important;
    max-width: 94px !important;
    justify-self: end !important;
  }

  body:not(.history-layout-split) .history-sidebar .history-filter-primary-row .history-settings-menu-wrap {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  body:not(.history-layout-split) .history-sidebar .history-filter-primary-row .history-settings-menu-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
  }

  .history-sidebar #hist-user {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important;
  }

  .history-sidebar #activity-log-user {
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    flex: 0 0 220px !important;
  }

  body:not(.history-layout-split) .history-sidebar .history-filter-primary-row {
    display: grid !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) minmax(96px, 110px) 88px !important;
  }

  body:not(.history-layout-split) .history-sidebar .history-filter-primary-row .history-settings-menu-wrap.history-settings-quick-actions {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    justify-self: end !important;
  }

  .history-sidebar .history-filter-primary-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 220px) minmax(96px, 110px) 40px 40px !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  .history-sidebar .history-filter-primary-row .hf-search-wrap {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .history-sidebar .history-filter-primary-row #hist-user {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .history-sidebar .history-filter-primary-row #hist-display-limit {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .history-sidebar .history-filter-primary-row > .history-filter-reset-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    margin: 0 !important;
  }

  .history-sidebar .history-filter-primary-row > .history-settings-menu-wrap {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    margin: 0 !important;
  }

  .history-sidebar .history-filter-primary-row > .history-settings-menu-wrap > .history-settings-menu-button {
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    margin: 0 !important;
  }

}

@media (min-width: 901px) {
  body.history-layout-split:not(.history-embed) .history-split-shell > .app {
    padding-bottom: 0 !important;
  }

  body.history-layout-split:not(.history-embed) .history-page-split-shell > .app {
    padding-bottom: 0 !important;
  }

  body.history-layout-split:not(.history-embed) .history-page-split-shell > .page-wrap {
    padding-bottom: 0 !important;
  }

  

  

  

}