real-world-css-libraries 1.0.1 → 1.0.3

package/libs/spicetify-bloom-v0.0.0.css

@@ -0,0 +1,2725 @@
+/* https://github.com/nimsandu/spicetify-bloom/blob/main/src/user.css */
+:root {
+  /* Border */
+  --default-border-thickness: 2px;
+  --border-radius-1: 0.75rem;
+  --border-radius-2: 0.5rem;
+  --border-radius-3: 0.5rem;
+
+  --blur-radius: 3rem;
+
+  --card-gap: 0.5rem;
+  --glue-font-weight-normal: 400;
+  --glue-font-weight-bold: 600;
+  --glue-font-weight-black: 700;
+  --scrollbars: unset;
+  --scrollbar-vertical-size: 6px;
+  --filter-brightness: 1;
+  --green: #00ffa1;
+  --ms-motion-timing-decelerate: cubic-bezier(0.1, 0.9, 0.2, 1);
+
+  /* Play Bar */
+  --margin-bottom-now-playing-bar: 0.5rem;
+  --now-playing-bar-height: 5.625rem;
+  --padding-now-playing-bar: 0.25rem;
+  --border-radius-now-playing-bar: 0.5rem;
+
+  /* Shadow Color */
+  --shadow-rgb: rgba(var(--spice-rgb-subtext), 0.125);
+
+  --noise-texture: url("https://nimsandu.github.io/spicetify-bloom/assets/noise/noise.png");
+  --noise-opacity: 7.5%;
+  /* big thanks to CharlieS and harbassan for providing the svg */
+  --equalizer-svg: url("data:image/svg+xml,%3Csvg id='playing-icon' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cdefs%3E%3Cstyle%3E %23playing-icon %7B fill: %2320BC54; %7D @keyframes play %7B 0%25 %7Btransform: scaleY(1);%7D 3.3%25 %7Btransform: scaleY(0.9583);%7D 6.6%25 %7Btransform: scaleY(0.9166);%7D 9.9%25 %7Btransform: scaleY(0.8333);%7D 13.3%25 %7Btransform: scaleY(0.7083);%7D 16.6%25 %7Btransform: scaleY(0.5416);%7D 19.9%25 %7Btransform: scaleY(0.4166);%7D 23.3%25 %7Btransform: scaleY(0.25);%7D 26.6%25 %7Btransform: scaleY(0.1666);%7D 29.9%25 %7Btransform: scaleY(0.125);%7D 33.3%25 %7Btransform: scaleY(0.125);%7D 36.6%25 %7Btransform: scaleY(0.1666);%7D 39.9%25 %7Btransform: scaleY(0.1666);%7D 43.3%25 %7Btransform: scaleY(0.2083);%7D 46.6%25 %7Btransform: scaleY(0.2916);%7D 49.9%25 %7Btransform: scaleY(0.375);%7D 53.3%25 %7Btransform: scaleY(0.5);%7D 56.6%25 %7Btransform: scaleY(0.5833);%7D 59.9%25 %7Btransform: scaleY(0.625);%7D 63.3%25 %7Btransform: scaleY(0.6666);%7D 66.6%25 %7Btransform: scaleY(0.6666);%7D 69.9%25 %7Btransform: scaleY(0.6666);%7D 73.3%25 %7Btransform: scaleY(0.6666);%7D 76.6%25 %7Btransform: scaleY(0.7083);%7D 79.9%25 %7Btransform: scaleY(0.75);%7D 83.3%25 %7Btransform: scaleY(0.8333);%7D 86.6%25 %7Btransform: scaleY(0.875);%7D 89.9%25 %7Btransform: scaleY(0.9166);%7D 93.3%25 %7Btransform: scaleY(0.9583);%7D 96.6%25 %7Btransform: scaleY(1);%7D %7D %23bar1 %7B transform-origin: bottom; animation: play 0.9s -0.51s infinite; %7D %23bar2 %7B transform-origin: bottom; animation: play 0.9s infinite; %7D %23bar3 %7B transform-origin: bottom; animation: play 0.9s -0.15s infinite; %7D %23bar4 %7B transform-origin: bottom; animation: play 0.9s -0.75s infinite; %7D %3C/style%3E%3C/defs%3E%3Ctitle%3Eplaying-icon%3C/title%3E%3Crect id='bar1' class='cls-1' width='4' height='24'/%3E%3Crect id='bar2' class='cls-1' x='6' width='4' height='24'/%3E%3Crect id='bar3' class='cls-1' x='12' width='4' height='24'/%3E%3Crect id='bar4' class='cls-1' x='18' width='4' height='24'/%3E%3C/svg%3E");
+  --text-subdued: var(--spice-subtext);
+}
+
+* {
+  font-family: "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI",
+    "Microsoft Ya Hei", sans-serif !important;
+  /* font-family: 'Segoe UI Variable Display','Segoe UI Variable Text', 'Microsoft Ya Hei', sans-serif !important; */
+  line-height: normal;
+  box-shadow: none !important;
+  /* mask-repeat: no-repeat;*/
+  /* -webkit-mask-repeat: no-repeat;*/
+  /*mask-position: center;*/
+  /*mask-size: contain;*/
+  /*-webkit-mask-position: center;*/
+  /*-webkit-mask-size: contain;*/
+  --text-subdued: rgba(var(--spice-rgb-subtext), 0.7) !important;
+  --section-background-base: var(--spice-card) !important;
+  --lyrics-color-background: rgb(0, 0, 0, 0) !important;
+}
+
+
+/* Fix Overflow off Screen */
+html {
+  max-width: 100vw;
+  max-height: 100vh;
+  overflow: hidden;
+}
+
+.ButtonInner-medium-iconOnly {
+  --background-highlight: var(--spice-accent);
+  --background-press: var(--spice-accent);
+  min-inline-size: 32px;
+  min-block-size: 32px;
+  inline-size: 32px;
+  block-size: 32px;
+}
+
+.encore-light-theme {
+  --background-base: var(--spice-main);
+  --text-base: var(--spice-text);
+}
+
+.Root__main-view {
+  z-index: 0;
+  background-color: var(--spice-main);
+  height: 100%;
+}
+
+.Root__main-view,
+.Root__nav-bar {
+  margin-bottom: calc(var(--now-playing-bar-height) - 2rem);
+
+  .os-scrollbar-track {
+    height: 90%;
+  }
+}
+
+.os-scrollbar {
+  cursor: pointer;
+  display: var(--scrollbars);
+}
+
+.os-scrollbar-handle {
+  border-radius: 99px !important;
+  background: var(--spice-subtext) !important;
+}
+
+.os-scrollbar-vertical {
+  width: 4px !important;
+  margin-right: 5px;
+  transition: width 150ms ease !important;
+}
+
+.os-scrollbar-vertical:hover,
+.os-scrollbar-vertical:active {
+  width: 5px !important;
+}
+
+.os-scrollbar-horizontal {
+  display: none;
+}
+
+.contentSpacing {
+  max-width: 100vw !important;
+  margin-bottom: 0;
+}
+
+.main-home-homeHeader,
+.main-actionBarBackground-background {
+  background-image: none;
+}
+
+.main-actionBarBackground-background,
+.main-home-homeHeader,
+.x-entityHeader-overlay,
+.x-actionBarBackground-background {
+  background-color: var(--spice-main) !important;
+}
+
+.main-topBar-overlay {
+  opacity: 0 !important;
+}
+
+.main-entityHeader-overlay {
+  background-image: linear-gradient(to bottom,
+      rgb(39 39 39 / 0%),
+      var(--spice-main));
+}
+
+.x-actionBarBackground-background,
+.x-entityHeader-overlay,
+.main-actionBarBackground-background {
+  background: none !important;
+}
+
+/* remove dividers */
+
+.main-trackList-trackListHeaderRow,
+.main-trackCreditsModal-header {
+  background-color: var(--spice-card);
+  border-bottom: none;
+}
+
+.now-playing-bar-container,
+._6e96ad0ba78d75ffb2a0156aa1834a21-scss {
+  border-top: none;
+}
+
+.main-rootlist-rootlistDivider,
+.main-contextMenu-dividerBefore::before,
+.main-contextMenu-dividerAfter::after,
+.show-episodeList-divider,
+.main-rootlist-rootlistDividerContainer {
+  display: none;
+}
+
+/* cards */
+
+.main-shelf-shelf {
+  margin-bottom: 0;
+}
+
+.main-shelf-shelfGrid {
+  overflow-y: visible !important;
+  margin-bottom: 16px;
+}
+
+.main-cardImage-image,
+.main-cardImage-imageWrapper,
+.main-card-card img {
+  border-radius: var(--border-radius-2);
+}
+
+.main-card-card,
+.x-heroCategoryCard-HeroCategoryCard,
+.x-categoryCard-CategoryCard,
+.x-categoryCard-image,
+.main-heroCard-card,
+.view-homeShortcutsGrid-draggable {
+  border-radius: var(--border-radius-1);
+}
+
+.main-card-card:hover,
+.x-categoryCard-CategoryCard:hover,
+.main-heroCard-card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 16px rgba(var(--spice-rgb-layer-shadow), 0.5) !important;
+}
+
+.main-card-card:hover::after,
+.x-categoryCard-CategoryCard:hover::after,
+.main-heroCard-card:hover::after {
+  transform: translateY(0px);
+}
+
+.main-card-card:active,
+.x-categoryCard-CategoryCard:active,
+.main-heroCard-card:active {
+  transform: translateY(0px);
+}
+
+.x-categoryCard-backdrop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  filter: blur(60px);
+  background-size: cover;
+  background-blend-mode: luminosity;
+  opacity: 0;
+  animation: scale-in 750ms ease-out forwards;
+  transform-origin: center center;
+}
+
+@keyframes scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.view-homeShortcutsGrid-shortcut {
+  background: transparent;
+  overflow: unset;
+}
+
+.x-searchResultsTracks-root>.main-gridContainer-gridContainer,
+.main-trackList-trackList,
+.main-card-card,
+.main-heroCard-card,
+.main-card-cardContainer,
+.view-homeShortcutsGrid-draggable {
+  background-color: var(--spice-card);
+  border: 1px var(--spice-contour) solid;
+}
+
+.main-tag-container {
+  font-weight: 400;
+  font-size: 10px;
+  color: var(--spice-alt-text) !important;
+  background-color: var(--spice-accent);
+}
+
+.main-heroCardTag-root {
+  height: 24px;
+  padding: 12px;
+  margin-top: 8px;
+}
+
+.x-categoryCard-title,
+.x-heroCategoryCard-heroTitle,
+.collection-collectionEntityHeroCard-likedSongs div {
+  color: white;
+}
+
+/* transitions */
+
+/* .main-card-card {
+  transition: background-color 150ms ease;
+} */
+
+.main-card-card,
+.x-categoryCard-CategoryCard,
+.main-heroCard-card {
+  transition: transform 400ms var(--ms-motion-timing-decelerate),
+    box-shadow 400ms var(--ms-motion-timing-decelerate);
+}
+
+.link-subtle {
+  transition-duration: 150ms;
+}
+
+/* headers */
+
+[dir="ltr"] .queue-tabBar-header,
+.marketplace-tabBar-nav {
+  text-align: center !important;
+}
+
+.lyrics-tabBar-header {
+  justify-content: center;
+}
+
+.Root__top-container:not(:has(.main-topBar-container)) .Root__main-view::after {
+  content: "";
+  top: -64px;
+  left: calc(var(--left-sidebar-width) * -1);
+  position: absolute;
+  width: 100vw;
+  height: 64px;
+  z-index: 1;
+  background-color: rgba(var(--spice-rgb-sidebar), 0.85);
+  backdrop-filter: blur(50px) saturate(2.5);
+}
+
+.global-nav .Root__top-container:not(:has(.main-topBar-container)) .Root__main-view::after {
+  content: none;
+  visibility: none;
+  backdrop-filter: none;
+}
+
+.Root__top-container:has(.lyrics-lyrics-container) .main-topBar-topbarContentWrapper {
+  display: none !important;
+}
+
+.main-topBar-topbarContentWrapper {
+  margin: 0 !important;
+}
+
+/* Top Bar Styles */
+.main-topBar-container>*,
+.main-topBar-topbarContent {
+  -webkit-app-region: drag !important;
+}
+
+.global-nav .main-topBar-container>*,
+.global-nav .main-topBar-topbarContent,
+.main-topBar-topbarContentRight button,
+.main-topBar-topbarContentRight *,
+.main-topBar-historyButtons * {
+  -webkit-app-region: no-drag;
+}
+
+.spotify__container--is-desktop.spotify__os--is-windows .Root__globalNav,
+.spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container {
+  padding-inline: 4vw 10vw;
+}
+
+.spotify__container--is-desktop.spotify__os--is-macos .main-topBar-container {
+  -webkit-padding-start: 80px !important;
+  padding-inline-start: 80px !important;
+}
+
+.spotify__container--is-desktop.spotify__os--is-macos .global-nav .main-topBar-container .spotify__container--is-desktop.spotify__os--is-windows .global-nav .main-topBar-container,
+.global-nav .main-topBar-container {
+  padding-inline: 0 !important;
+}
+
+.main-topBar-container {
+  top: 0;
+  left: 0;
+  right: 0;
+  position: fixed;
+  height: 2.5rem;
+  background: transparent !important;
+}
+
+.artist-artistDiscography-topBar,
+.search-searchCategory-SearchCategory,
+.global-nav .main-home-filterChipsContainer,
+.main-trackList-trackListHeader,
+.marketplace-header,
+.main-home-filterChipsContainer {
+  top: 0 !important;
+}
+
+.artist-artistDiscography-tracklist .main-trackList-trackListHeader {
+  top: 40px !important;
+}
+
+.global-nav .artist-artistDiscography-tracklist .main-trackList-trackListHeader {
+  top: 96px !important;
+}
+
+.global-nav .marketplace-header,
+.global-nav .main-trackList-trackListHeader,
+.global-nav .artist-artistDiscography-topBar {
+  top: 64px !important;
+}
+
+.global-nav .main-topBar-container {
+  position: absolute !important;
+  -webkit-backdrop-filter: none !important;
+  backdrop-filter: none !important;
+}
+
+.global-nav:has(.BeautifulLyricsPage) .main-topBar-container {
+  position: absolute;
+}
+
+.global-nav .main-home-filterChipsContainer,
+.global-nav .main-topBar-background {
+  border-bottom: var(--default-border);
+}
+
+.main-trackCreditsModal-container {
+  max-height: 90vh;
+  width: max-content;
+  max-width: 75vw;
+}
+
+.main-home-homeHeader {
+  background-color: transparent !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+
+.main-topBar-background {
+  background-color: var(--spice-sidebar, #F3F3F3) !important;
+  background: var(--spice-sidebar, #F3F3F3) !important;
+  backdrop-filter: none !important;
+  opacity: 1 !important;
+  border: none !important;
+  box-shadow: none !important;
+  border-bottom: 1px solid var(--spice-light-border, #e0e0e0) !important;
+}
+
+.main-topBar-background::before {
+  background-image: none !important;
+  opacity: 0 !important;
+}
+
+.main-entityHeader-withBackgroundImage {
+  padding: 0 32px 24px;
+}
+
+.main-entityHeader-title {
+  font-size: unset;
+  font-weight: 500;
+  display: contents;
+}
+
+.main-entityHeader-titleInner {
+  overflow: hidden;
+}
+
+h1,
+h2,
+h3,
+.main-shelf-title,
+.main-entityHeader-topbarTitle,
+.main-type-canon,
+.main-type-bass,
+.main-cardHeader-text.main-type-alto,
+.x-searchResultsTracks-title {
+  font-weight: 500;
+  letter-spacing: 0.1px !important;
+  margin-bottom: 4px;
+  white-space: normal;
+}
+
+.main-seeAll-link {
+  margin-bottom: 10px;
+}
+
+.main-topBar-topbarContent {
+  justify-content: center;
+}
+
+.queue-tabBar-header {
+  text-align: center;
+  min-width: 100px;
+}
+
+.queue-tabBar-headerItemLink {
+  transition: background-color ease-out 167ms;
+}
+
+.main-topBar-historyButtons {
+  align-items: center;
+}
+
+.main-topBar-historyButtons>button:nth-child(1) {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_left_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_left_24_filled.svg");
+
+  background-color: var(--spice-text) !important;
+  padding: 5px;
+  width: 24px !important;
+  height: 24px !important;
+}
+
+.main-topBar-historyButtons>button:nth-child(2) {
+  display: inline-flex !important;
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg");
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_right_24_filled.svg");
+  background-color: var(--spice-text) !important;
+  padding: 5px;
+  width: 24px !important;
+  height: 24px !important;
+  margin-right: 0.5rem;
+}
+
+/* --- 3.  Home, What's New, Friend Activity styles --- */
+/*    (bg = --spice-sidebar, circle, 32x32)     */
+button.main-globalNav-navLink[aria-label="Home"],
+button[aria-label="What's New"],
+button[aria-label="Friend Activity"] {
+  background-color: var(--spice-sidebar, #F3F3F3) !important;
+  background: var(--spice-sidebar, #F3F3F3) !important;
+  border: 1px solid var(--spice-light-border, #e0e0e0) !important;
+  border-radius: 50% !important; /* circle */
+  box-shadow: none !important;
+  width: 32px !important;
+  height: 32px !important;
+  min-width: 32px !important;
+  min-height: 32px !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  vertical-align: middle !important;
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+  color: var(--spice-text) !important;
+}
+
+/* Icons in buttons */
+button.main-globalNav-navLink[aria-label="Home"] svg,
+button[aria-label="What's New"] svg,
+button[aria-label="Friend Activity"] svg {
+  fill: currentColor !important;
+  color: currentColor !important;
+  width: 18px !important;
+  height: 18px !important;
+  display: block !important;
+}
+
+/* Inner containers if exist */
+button.main-globalNav-navLink[aria-label="Home"]>*,
+button[aria-label="What's New"]>*,
+button[aria-label="Friend Activity"]>* {
+  background-color: transparent !important;
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* --- 4. Avatar container --- */
+/* Using a general selector for the button on the right that contains an img */
+.main-topBar-topbarContentRight button:has(img),
+button.main-userWidget-box[data-testid="user-widget-link"] /* Adding more specific selector */
+{
+  background-color: var(--spice-sidebar, #F3F3F3) !important; /* ** using var ** */
+  background: var(--spice-sidebar, #F3F3F3) !important;
+  padding: 2px !important; /* padding for img */
+  width: 32px !important;
+  height: 32px !important;
+  min-width: 32px !important;
+  min-height: 32px !important;
+  box-sizing: border-box !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  overflow: hidden !important;
+  border-radius: 50% !important; /* Added for consistency */
+  border: 1px solid var(--spice-light-border, #e0e0e0) !important; /* Added for consistency */
+  box-shadow: none !important; /* Added for consistency */
+}
+
+/* Inner elements and avatar - make transparent */
+.main-topBar-topbarContentRight button:has(img)>*,
+button.main-userWidget-box[data-testid="user-widget-link"]>*,
+.main-avatar-avatar {
+  background-color: transparent !important;
+  border-radius: 50% !important; /* ** ROUNDED CONTAINER/FIGURE ** */
+  border: none !important; /* Remove border from figure */
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  overflow: hidden;
+}
+
+/* The image itself */
+.main-topBar-topbarContentRight button:has(img) img,
+button.main-userWidget-box[data-testid="user-widget-link"] img,
+.main-avatar-image {
+  border-radius: 50% !important; /* ** ROUNDING THE IMAGE ** */
+  width: 100% !important;
+  height: 100% !important;
+  display: block !important;
+  object-fit: cover !important;
+  background-color: transparent !important;
+}
+
+.main-userWidget-displayName,
+.main-userWidget-chevron {
+  display: none !important;
+}
+
+
+/* menus */
+
+/* --- 5. "Create" Button (Plus) - Adaptive Size --- */
+/* Using aria-label and classes to select the button */
+button.main-useDropTarget-base[aria-label="Create"],
+button.l5V7KOO1aHJ4R7jYTQuV[aria-label="Create"] {
+  background-color: var(--spice-sidebar, #F3F3F3) !important; /* ** Background F3F3F3 ** */
+  background: var(--spice-sidebar, #F3F3F3) !important;
+  border: 1px solid var(--spice-light-border, #e0e0e0) !important; /* Thin border */
+  color: var(--spice-text) !important; /* ** Dark color for text and icon ** */
+  box-shadow: none !important;
+
+  /* ** REMOVE fixed sizes and round shape ** */
+  /* width: 32px !important; */
+  /* height: 32px !important; */
+  /* min-width: 32px !important; */
+  /* min-height: 32px !important; */
+  /* border-radius: 50% !important; */
+
+  /* ** Keep default styles or minimal overrides ** */
+  /* padding: DO NOT override, let the theme decide */
+  /* display: DO NOT override */
+  /* align-items: DO NOT override */
+  /* justify-content: DO NOT override */
+  /* vertical-align: DO NOT override */
+  box-sizing: border-box !important; /* Keep just in case */
+  /* overflow: hidden !important; */ /* Remove, might interfere with text */
+}
+
+/* Style for the SVG icon inside the button */
+button.main-useDropTarget-base[aria-label="Create"] svg,
+button.l5V7KOO1aHJ4R7jYTQuV[aria-label="Create"] svg {
+  fill: currentColor !important; /* Inherit color from the button */
+  /* Do not set size rigidly, let the theme decide */
+  /* width: 18px !important; */
+  /* height: 18px !important; */
+  display: inline-block !important; /* SVG is usually inline-block */
+  vertical-align: middle; /* Align vertically with text */
+}
+
+/* Optionally add style for text if it doesn't inherit the color */
+button.main-useDropTarget-base[aria-label="Create"] span, /* If text is in a span */
+button.l5V7KOO1aHJ4R7jYTQuV[aria-label="Create"] span {
+  color: currentColor !important; /* Inherit color from the button */
+}
+
+/* --- End of Section 5 --- */
+
+/* search */
+
+
+/* --- 2. Search Field (Restoring Working Input State) --- */
+/* Container Width */
+.main-topBar-searchBar {
+  flex: 0 1 500px; /* Keep it wide */
+  display: flex;
+  position: relative; /* Set position context for dropdown */
+}
+
+/* Form Styling - NO padding, takes full container width */
+form.e-9812-form-input-icon[role="search"] {
+  background-color: var(--spice-main, #ffffff) !important;
+  border: 1px solid var(--spice-light-border, #cccccc) !important;
+  border-radius: 18px !important;
+  height: 36px !important;
+  display: flex !important;
+  align-items: center !important;
+  padding: 0 !important; /* NO Form Padding */
+  box-sizing: border-box !important;
+  width: 100% !important; /* Fill the .main-topBar-searchBar */
+  margin: 0 !important;
+  position: relative !important; /* Relative for icons */
+}
+
+/* Leading icon container - Margins from edge */
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--leading {
+  flex-shrink: 0;
+  display: flex !important; /* Ensure flex is applied */
+  align-items: center !important; /* Ensure vertical centering */
+  justify-content: center !important; /* Horizontal centering within its box */
+  width: 20px !important;
+  height: 100% !important; /* Take full height for align-items */
+  margin-left: 12px !important; /* Trying 16px (was 18px, then 12px) */
+  margin-right: 8px !important; /* Keep right margin from icon */
+  box-sizing: border-box !important;
+  pointer-events: none;
+  overflow: visible !important;
+  padding: 0 !important;
+  /* Remove margin-top/bottom since we center with flex */
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  position: relative;
+  z-index: 1;
+}
+
+/* Input field - Flex Grow + Min Width, Padding Right only (Corrected) */
+form.e-9812-form-input-icon[role="search"] input.e-9812-form-input {
+  background-color: transparent !important;
+  border: none !important;
+  color: var(--spice-text, #000000) !important;
+  height: 100% !important;
+  /* --- USING FLEX GROW --- */
+  flex-grow: 1 !important;
+  /* --- NO width: 100% --- */
+  /* --- NO PADDING-LEFT - Space created by icon's margin-right --- */
+  padding: 0 55px 0 0 !important; /* T:0 R:55 B:0 L:0 */
+  box-sizing: border-box !important;
+  /* --- KEEP min-width FIX --- */
+  min-width: 340px !important; /* Force minimum width */
+  line-height: 36px !important;
+  font-size: 14px;
+  box-shadow: none !important;
+  caret-color: var(--spice-text, #000000) !important;
+  margin: 0 !important;
+  /* Overflow handling */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+  z-index: 0;
+}
+
+/* Placeholder */
+form.e-9812-form-input-icon[role="search"] input.e-9812-form-input::placeholder { color: var(--spice-subtext, #888888) !important; opacity: 1 !important; }
+/* Focus */
+form.e-9812-form-input-icon[role="search"]:focus-within { border: 1px solid var(--spice-accent, #006bba) !important; box-shadow: 0 0 0 1px var(--spice-accent, #006bba) !important; }
+
+/* --- Other icon styles unchanged --- */
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--leading button.EJttP30F1zYHeAw7ISHb, form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--leading button.EJttP30F1zYHeAw7ISHb svg { display: none !important; position: absolute !important; width: 0 !important; height: 0 !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; border: 0 !important; left: -9999px; }
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--leading svg.M9l40ptEBXPm03dU3X1k { display: block !important; width: 20px !important; height: 20px !important; box-sizing: border-box !important; opacity: 1 !important; visibility: visible !important; fill: var(--spice-subtext, #6d6d6d) !important; mask: none !important; -webkit-mask: none !important; clip-path: none !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--leading svg.M9l40ptEBXPm03dU3X1k path { fill: var(--spice-subtext, #6d6d6d) !important; mask: none !important; -webkit-mask: none !important; clip-path: none !important; stroke: none !important; }
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--trailing {
+  position: absolute !important;
+  right: 12px !important;
+  top: 50% !important;
+  transform: translateY(-50%) !important;
+  z-index: 2;
+  flex-shrink: 0;
+  display: flex !important;
+  align-items: center !important;
+  pointer-events: auto;
+  margin: 0;
+  padding: 0;
+}
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--trailing button.MdMAXXFPalD99eigsBug {
+  margin-right: 3px !important; /* Попробуй 3px */
+}
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--trailing div.BV0jjn_h5TtMMl8YKuZ0 {
+   margin-left: 8px !important; /* Попробуй 3px */
+ }
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--trailing button { background-color: transparent !important; padding: 0 !important; border: none !important; cursor: pointer; display: flex; align-items: center; justify-content: center; }
+form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--trailing button svg { fill: var(--spice-subtext, #555555) !important; width: 16px !important; height: 16px !important; display: block; }
+/*.dM_TEJo05MxBvrLzfNrW { display: none !important; }*/
+/* --- End of Section 2 --- */
+
+/* Fix Window Controls Overlap on Windows when narrow */
+
+
+.spotify__container--is-desktop.spotify__os--is-windows .main-topBar-container {
+  padding-inline-end: max(10vw, 150px) !important;
+}
+
+
+.spotify__container--is-desktop.spotify__os--is-windows .Root__top-container--right-sidebar-visible .main-topBar-container {
+
+  padding-inline-end: max(167px, 180px) !important;
+}
+
+
+.main-topBar-topbarContentRight {
+    flex-shrink: 0; 
+}
+
+/* Style Ctrl+K hint - Absolute Position using LEFT offset */
+
+
+.dM_TEJo05MxBvrLzfNrW {
+  position: absolute !important; 
+  left: 170px !important; 
+  top: 50% !important;
+  transform: translateY(-50%) !important; 
+  z-index: 1 !important; 
+  pointer-events: none !important;
+  display: none !important; 
+  align-items: center !important;
+  opacity: 0.6 !important;
+}
+
+
+form.e-9812-form-input-icon[role="search"] input.e-9812-form-input:focus:placeholder-shown + .dM_TEJo05MxBvrLzfNrW {
+  display: flex !important;
+}
+
+
+.dM_TEJo05MxBvrLzfNrW kbd.xlLQHgpip3xYOwRYpwun {
+  background-color: transparent !important; border: 1px solid var(--spice-subtext, #888888) !important; color: var(--spice-subtext, #888888) !important;
+  padding: 2px 4px !important; border-radius: 3px !important; font-size: 11px !important; margin-left: 4px !important; line-height: 1 !important;
+}
+
+.dM_TEJo05MxBvrLzfNrW span.upGmCR5y3yDImbt6sHOl { display: none !important; }
+/* Span wrapper */
+.dM_TEJo05MxBvrLzfNrW span.IYex0sXu8fnCz1FqFbRe { display: contents !important; }
+
+form.e-9812-form-input-icon[role="search"] input.e-9812-form-input {
+
+    position: relative; 
+    z-index: 0 !important;
+}
+
+/* Style Search Dropdown Background AND POSITION */
+
+#recent-searches-dropdown {
+  background-color: transparent !important;
+  border: none !important;
+  position: absolute !important; 
+  left: 0 !important;
+  top: 100% !important; 
+  margin-top: 8px !important; 
+  width: 100% !important; 
+  z-index: 10; 
+  pointer-events: none; 
+}
+
+
+.GimJ6fo6WOYPyWNVpSr1.ZjfaJlGQZ42nCWjD3FDm {
+  background-color: var(--spice-card) !important;
+  border-radius: var(--border-radius-2) !important;
+  border: 1px solid var(--spice-contour) !important;
+  box-shadow: 0 4px 16px rgba(var(--spice-rgb-layer-shadow), 0.5) !important;
+  width: 100% !important;
+  max-height: 400px; 
+  box-sizing: border-box; 
+  pointer-events: auto; 
+ 
+  transform: none !important;
+
+}
+
+.x-searchInput-searchInputInput {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
+  color: var(--spice-text) !important;
+  border: 1px solid var(--spice-light-border);
+  border-radius: var(--border-radius-2) !important;
+  padding-right: 72px;
+  padding-left: 12px;
+  height: 32px !important;
+  transition: background-color ease-in 167ms;
+}
+
+.x-searchInput-searchInputInput:hover {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+}
+
+.x-searchInput-searchInputInput:focus {
+  background-color: rgba(var(--spice-rgb-main), 0.7) !important;
+  border-bottom: var(--spice-accent) solid 2px;
+}
+
+.x-searchInput-searchInputIconContainer {
+  flex-direction: row-reverse;
+}
+
+.x-searchInput-searchInputSearchIcon {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_search_16_regular.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_search_16_regular.svg");
+  background-color: var(--spice-subtext) !important;
+  flex: 0;
+  transform: scaleX(-1);
+  height: 16px;
+  width: 16px;
+}
+
+.x-searchInput-searchInputSearchIcon path {
+  display: none;
+}
+
+.x-searchInput-searchInputClearButton {
+  margin-left: 5px;
+  margin-right: 12px;
+}
+
+.x-searchInput-searchInputClearButton path {
+  display: block !important;
+}
+
+.x-searchInput-searchInputClearButton svg {
+  fill: var(--spice-subtext);
+  padding: 3px;
+}
+
+.x-searchInput-searchInputSearchIcon,
+.playlist-inlineSearchBox-searchIcon,
+.x-searchInput-searchInputInput::placeholder,
+.playlist-inlineSearchBox-filterInput,
+.x-searchInput-searchInputClearButton {
+  color: var(--spice-text) !important;
+}
+
+
+.x-searchResultsTracks-root .main-gridContainer-gridContainer {
+  padding: 8px;
+}
+
+.main-heroCard-card,
+.x-searchResultsTracks-root .main-gridContainer-gridContainer {
+  background-color: var(--spice-card);
+  border-radius: var(--border-radius-1);
+}
+
+/* error */
+
+path[d="M23 0C10.298 0 0 10.297 0 23c0 12.702 10.298 23 23 23 12.703 0 23-10.298 23-23C46 10.297 35.703 0 23 0zm0 44C11.421 44 2 34.579 2 23S11.42 2 23 2c11.579 0 21 9.42 21 21 0 11.579-9.42 21-21 21zm1.872-32.065l-.8 16.192h-2.144l-.832-16.192h3.776zm-3.968 20.768c0-.576.203-1.072.608-1.488a1.979 1.979 0 011.472-.624c.576 0 1.072.208 1.488.624.416.416.624.912.624 1.488s-.208 1.067-.624 1.472a2.056 2.056 0 01-1.488.608 2.006 2.006 0 01-1.472-.608 2.002 2.002 0 01-.608-1.472z"],
+.spoticon-warning-64::before {
+  color: var(--spice-notification-error);
+}
+
+/* notification */
+
+.notistack-SnackbarContainer {
+  margin-bottom: 95px;
+}
+
+.notistack-MuiContent,
+.RQREWe_yBdtc_g6eC3wQ {
+  color: var(--spice-text);
+}
+
+.RQREWe_yBdtc_g6eC3wQ {
+  background-color: var(--spice-notif-bubble-info);
+}
+
+.notistack-MuiContent-error {
+  background-color: var(--spice-notif-bubble-error);
+}
+
+/* modals */
+
+.GenericModal__overlay {
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.main-trackCreditsModal-header {
+  border-top-right-radius: var(--border-radius-1);
+  border-top-left-radius: var(--border-radius-1);
+}
+
+.GenericModal::before {
+  z-index: -1;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--border-radius-1) !important;
+  background-image: var(--noise-texture);
+  opacity: var(--noise-opacity);
+}
+
+.main-trackCreditsModal-container,
+.main-aboutRecsModal-container,
+.main-playlistEditDetailsModal-container,
+.profile-userEditDetails-container,
+.tJeH2W2to1A7d9tWBRoi,
+.artist-artistAbout-modal,
+.XwNfIrI6_hCa_9_T2cQB,
+.main-embedWidgetGenerator-container,
+.main-trackCreditsModal-header,
+.main-confirmDialog-container {
+  background-color: transparent !important;
+}
+
+.GenericModal {
+  background-color: rgba(var(--spice-rgb-main), 0.8) !important;
+  backdrop-filter: blur(50px) saturate(1.5);
+  border-radius: var(--border-radius-1) !important;
+}
+
+#full-screen-config-container .setting-card,
+.Ifnz1lh1jjvqPqJ4KPo8 {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.4) !important;
+}
+
+.uJjmxe0T11dUVeW6Biz8 {
+  background-color: unset;
+}
+
+.main-playlistEditDetailsModal-titleInput,
+.main-playlistEditDetailsModal-descriptionTextarea,
+.main-playlistEditDetailsModal-titleInput:focus,
+.main-playlistEditDetailsModal-descriptionTextarea:focus,
+.playlist-inlineSearchBox-filterInput {
+  background-color: var(--spice-card);
+}
+
+.profile-userEditDetails-nameInput,
+.profile-userEditDetails-textElement:focus {
+  background: var(--spice-card) !important;
+}
+
+.main-playlistEditDetailsModal-titleInput:focus,
+.main-playlistEditDetailsModal-descriptionTextarea:focus,
+.profile-userEditDetails-textElement:focus,
+.playlist-inlineSearchBox-filterInput:focus {
+  border: 1px solid var(--spice-button-active) !important;
+}
+
+.playlist-inlineSearchBox-filterInput {
+  border: 1px solid var(--spice-card);
+}
+
+.main-playlistEditDetailsModal-titleInput,
+.main-playlistEditDetailsModal-descriptionTextarea,
+.profile-userEditDetails-nameInput,
+.playlist-inlineSearchBox-filterInput {
+  border-radius: var(--border-radius-2) !important;
+}
+
+.profile-userEditDetails-labelText:before {
+  bottom: 8px !important;
+}
+
+.main-playlistEditDetailsModal-titleInput::placeholder,
+.main-playlistEditDetailsModal-descriptionTextarea::placeholder {
+  color: var(--spice-text);
+}
+
+.main-editImageButton-overlay {
+  background-color: rgba(var(--spice-rgb-card), 0.7);
+}
+
+/* dialogs */
+
+.main-deletePlaylistDialog-container,
+.main-deleteFolderDialog-container {
+  background-color: var(--spice-card);
+  color: var(--spice-text);
+  border-radius: var(--border-radius-1);
+}
+
+.main-deletePlaylistDialog-secondaryButton,
+.main-deleteFolderDialog-secondaryButton {
+  color: var(--spice-button);
+}
+
+.main-deletePlaylistDialog-buttonContainer> :last-child,
+.main-deleteFolderDialog-buttonContainer> :last-child {
+  background-color: var(--spice-notification-error);
+}
+
+/* friend activity */
+
+.spotify__container--is-desktop.spotify__os--is-windows .Root__top-container--right-sidebar-visible .main-topBar-container {
+  padding-inline-end: 167px;
+}
+
+.main-connectToFacebook-container {
+  margin-top: 50px;
+}
+
+.main-connectToFacebook-text,
+.main-connectToFacebook-disclaimer,
+.main-connectToFacebook-headerTitle,
+.main-addFriendsView-headerText p {
+  color: var(--spice-text);
+}
+
+.VLKqDIGaQn2bILzJKSZ0 {
+  background-color: var(--spice-card) !important;
+}
+
+.main-addFriendsView-header {
+  margin-top: 16px;
+  border-bottom: 1px solid var(--spice-selected-row) !important;
+}
+
+.main-addFriendsView-facebookIconWrapper {
+  background-color: #008aff !important;
+}
+
+.main-addFriendsView-filterInput {
+  background-color: var(--spice-card) !important;
+  color: var(--spice-text) !important;
+}
+
+.main-addFriendsView-filterInput::placeholder {
+  color: var(--spice-text) !important;
+}
+
+.main-buddyFeed-header {
+  opacity: 1 !important;
+}
+
+.main-buddyFeed-findFriendsIcon,
+.main-buddyFeed-addFriendPlaceholderIcon {
+  color: var(--spice-text) !important;
+}
+
+.main-buddyFeed-username a {
+  color: var(--spice-text) !important;
+}
+
+.main-buddyFeed-artistAndTrackName a,
+.main-buddyFeed-activityMetadata,
+.main-buddyFeed-timestamp,
+.main-buddyFeed-playbackContextLink,
+.b9rqRkvRvhrSY4FYHQVC,
+.xHc_2FQr3NxfCgfDSVhY {
+  color: var(--spice-subtext) !important;
+}
+
+.main-buddyFeed-friendActivity {
+  background-color: var(--spice-card);
+  border-radius: var(--border-radius-1);
+  margin: 8px 0;
+  padding: 8px 12px 8px 12px;
+}
+
+.main-buddyFeed-addFriendsContainer {
+  background-color: var(--spice-main);
+}
+
+.main-buddyFeed-buddyFeedRoot,
+.main-buddyFeed-buddyFeed,
+aside[aria-label="Friend Activity"] {
+  width: 280px;
+  z-index: 0;
+}
+
+.main-buddyFeed-buddyFeedRoot .main-avatar-avatar,
+aside[aria-label="Friend Activity"] .main-avatar-avatar {
+  margin-right: 8px;
+}
+
+.main-buddyFeed-activityMetadata {
+  max-width: 100vw;
+}
+
+/* settings */
+
+.x-settings-equalizerSection {
+  border-radius: var(--border-radius-2);
+  background-color: var(--spice-card);
+}
+
+.x-settings-equalizerPresetsContainer>span>.main-dropDown-dropDown {
+  background-color: var(--spice-selected-row) !important;
+}
+
+.x-settings-crossFadeContainer {
+  padding-right: 10px;
+}
+
+.main-dropDown-dropDown,
+option {
+  color: var(--spice-text);
+}
+
+option {
+  background-color: var(--spice-card);
+}
+
+.main-dropDown-dropDown,
+select {
+  border-radius: var(--border-radius-3) !important;
+}
+
+.x-toggle-indicatorWrapper {
+  background-color: transparent;
+  height: 20px;
+  width: 40px;
+  box-shadow: 0 0 0 1px var(--spice-subtext) !important;
+}
+
+input:hover:not([disabled], :active)~.x-toggle-indicatorWrapper {
+  background-color: var(--spice-selected-row);
+}
+
+input:checked~.x-toggle-indicatorWrapper {
+  background-color: var(--spice-button);
+  box-shadow: none !important;
+}
+
+.x-toggle-indicator {
+  background-color: var(--spice-subtext);
+  height: 12px;
+  width: 12px;
+  top: 4px;
+  left: 3px;
+  transform: scale(1);
+  transition: transform 50ms ease;
+}
+
+input:not([disabled])~.x-toggle-indicatorWrapper:hover .x-toggle-indicator {
+  transform: scale(1.2);
+}
+
+input:checked~.x-toggle-indicatorWrapper .x-toggle-indicator {
+  background-color: var(--spice-main);
+  right: 4px;
+}
+
+.x-settings-facebookButton,
+.main-connectToFacebook-facebookButton {
+  color: var(--spice-shadow);
+}
+
+.x-proxySettings-proxyInput {
+  border-radius: var(--border-radius-2) !important;
+  background-color: var(--spice-card) !important;
+}
+
+.x-proxySettings-proxyInput::placeholder {
+  color: var(--spice-subtext);
+}
+
+.x-proxySettings-proxyInput:focus {
+  border-color: var(--spice-button-active);
+}
+
+.TypeElement-viola-textSubdued-type {
+  color: var(--spice-subtext);
+}
+
+/* connect device menu */
+
+.main-devicePicker-header>.main-devicePicker-nowPlayingActiveIcon[src*="equaliser"] {
+  mask-image: var(--equalizer-svg);
+  -webkit-mask-image: var(--equalizer-svg);
+  background: var(--spice-button);
+  content-visibility: hidden;
+  mask-repeat: no-repeat;
+  -webkit-mask-repeat: no-repeat;
+  scale: 0.8;
+}
+
+.main-devicePicker-troubleshootingItemIcon {
+  fill: var(--spice-text);
+}
+
+.hcuLp8V4uEEfWZ4k6aLV {
+  background-color: rgba(var(--spice-rgb-card), 0.4);
+}
+
+.hcuLp8V4uEEfWZ4k6aLV:hover,
+.hcuLp8V4uEEfWZ4k6aLV:focus {
+  background-color: rgba(var(--spice-rgb-selected-row), 0.5);
+}
+
+/* waking up text */
+.hcuLp8V4uEEfWZ4k6aLV[aria-disabled="true"] ._k3JjF2rHwdYfSPZH09S {
+  color: var(--spice-rgb-subtext);
+}
+
+.hcuLp8V4uEEfWZ4k6aLV[aria-disabled="true"] .main-devicePicker-nowPlayingActiveIcon {
+  fill: var(--spice-rgb-subtext);
+}
+
+.main-connectBar-connectBar {
+  background-color: var(--spice-accent) !important;
+  --text-base: var(--spice-alt-text) !important;
+  --essential-base: var(--spice-alt-text) !important;
+  border-radius: 4px;
+  padding: 8px 16px;
+  position: absolute;
+  right: 0;
+  bottom: calc(var(--now-playing-bar-height) + var(--card-gap));
+  color: var(--spice-alt-text) !important;
+  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important;
+}
+
+.main-connectBar-connectBar::after {
+  border-bottom: none !important;
+}
+
+.main-connectBar-connectBar .icon,
+.main-connectBar-connectBar .hDgDGI {
+  margin: 0px;
+  margin-right: 8px;
+}
+
+.Root__now-playing-bar {
+  margin: 0px 0.5rem 0.5rem 0.5rem;
+  width: calc(100% - (0.5rem * 2));
+  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important;
+  border-radius: var(--border-radius-1);
+  position: fixed;
+  bottom: 0;
+  left: 0;
+}
+
+.now-playing--cover-expanded {
+  transform: translateX(0px) !important;
+  border-radius: var(--border-radius-1) !important;
+}
+
+.x-progressBar-progressBarBg {
+  background-color: rgba(var(--spice-rgb-text), 0.2);
+  background-blend-mode: luminosity;
+}
+
+.playback-bar,
+.progress-bar,
+.progress-bar__fg_wrapper {
+  --fg-color: var(--spice-accent) !important;
+  --is-active-fg-color: var(--spice-accent) !important;
+  --bg-color: var(--spice-player-bar-bg);
+}
+
+.prog-tooltip {
+  width: 140px;
+  display: none;
+}
+
+.progress-bar__slider {
+  visibility: visible;
+  background-color: var(--spice-selected-row) !important;
+  border: 6px solid var(--spice-selected-row);
+  box-shadow: 0 0 3px 0 var(--spice-player-bar-shadow) !important;
+  box-sizing: content-box !important;
+  width: 8px;
+  height: 8px;
+  opacity: 1 !important;
+  display: block;
+  margin-left: -10px;
+}
+
+.progress-bar__slider::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: var(--spice-accent);
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  border-radius: 50%;
+  transition: transform 300ms var(--ms-motion-timing-decelerate);
+}
+
+.progress-bar__slider:hover::after {
+  transform: scale(1.25);
+}
+
+.progress-bar__slider:active::after {
+  transform: scale(0.8);
+}
+
+.playback-bar__progress-time-elapsed {
+  padding-right: 6px;
+}
+
+.main-playbackBarRemainingTime-container {
+  padding-left: 6px;
+}
+
+.main-nowPlayingWidget-nowPlaying>.ellipsis-one-line,
+.main-trackInfo-container {
+  border-radius: var(--border-radius-1) !important;
+}
+
+.cover-art {
+  background-color: transparent !important;
+}
+
+.main-coverSlotExpanded-container,
+.main-coverSlotExpanded-containerExpanding {
+  position: fixed;
+  top: calc(100% - 320px);
+  left: calc(100% - 220px);
+  width: 200px;
+  height: 200px;
+  visibility: hidden;
+  transform-origin: center;
+  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important;
+  animation: 1s coverExpandedIn;
+  animation-fill-mode: forwards;
+  background: none;
+  border-radius: var(--border-radius-1) !important;
+}
+
+.fsd-button {
+  padding-left: 8px !important;
+}
+
+.main-coverSlotExpanded-exitActive {
+  display: none;
+  border-radius: var(--border-radius-1) !important;
+}
+
+@keyframes coverExpandedIn {
+  99% {
+    visibility: hidden;
+  }
+
+  100% {
+    visibility: visible;
+  }
+}
+
+@keyframes coverExpandedOut {
+  99% {
+    visibility: visible;
+  }
+
+  100% {
+    visibility: hidden;
+  }
+}
+
+.main-coverSlotCollapsed-container {
+  top: auto;
+  left: 0px;
+  width: 56px;
+  height: 56px;
+  border-radius: var(--border-radius-1) !important;
+}
+
+.cover-art .cover-art-image,
+.main-coverSlotCollapsed-container {
+  transform-origin: center;
+  transition-timing-function: ease-in;
+  transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.3s, left 0.5s,
+    box-shadow 0.5s;
+  border-radius: var(--border-radius-3) !important;
+  background-color: transparent !important;
+}
+
+.main-coverSlotCollapsed-container[aria-hidden="true"] {
+  left: calc(100vw - 178px);
+  top: -236px;
+  width: 200px;
+  height: 200px;
+  visibility: hidden;
+  box-shadow: 0px 0px 8px 4px rgba(0, 0, 0, 0.25) !important;
+  animation: 1s coverExpandedOut;
+  border-radius: var(--border-radius-1) !important;
+}
+
+.main-coverSlotCollapsed-container[aria-hidden="false"] {
+  transition-timing-function: ease-out !important;
+  transition: width 0.5s 0.2s, height 0.5s 0.2s, top 0.5s 0.1s, left 0.3s,
+    box-shadow 0.5s !important;
+  border-radius: var(--border-radius-1) !important;
+}
+
+.main-coverSlotCollapsed-container[aria-hidden="true"] .cover-art .cover-art-image,
+.main-nowPlayingWidget-coverExpanded .main-coverSlotCollapsed-container .cover-art .cover-art-image {
+  width: 200px;
+  height: 200px;
+  border-radius: var(--border-radius-1) !important;
+}
+
+.CoverSlotExpanded__actionButton,
+.main-coverSlotCollapsed-expandButton,
+.CoverSlotExpanded__actionButton:hover,
+.main-coverSlotCollapsed-expandButton:hover {
+  background-color: var(--spice-card);
+  border-radius: var(--border-radius-1) !important;
+}
+
+.now-playing-bar .cover-art-image {
+  border-radius: var(--border-radius-1);
+}
+
+.playback-bar__progress-time,
+.main-playbackBarRemainingTime-container,
+.playback-bar__progress-time-elapsed {
+  color: var(--spice-text) !important;
+}
+
+.progress-bar--is-active .progress-bar__slider:focus {
+  background-color: var(--spice-accent);
+}
+
+.volume-bar {
+  padding-right: 8px !important;
+}
+
+.volume-bar__icon-button {
+  padding-right: 6px;
+}
+
+.main-skipBackButton-button:hover,
+.main-skipForwardButton-button:hover,
+.main-repeatButton-button[aria-checked="false"]:not([aria-label="Activer jukebox"]):hover,
+.MRfNcNMd_djj3KOg_VOB:hover,
+.XGCdw_LcXQHrxmvpxjwi:hover {
+  background-color: var(--spice-subtext) !important;
+}
+
+.main-skipBackButton-button:focus:not(:focus-visible):not(:hover),
+.main-skipForwardButton-button:focus:not(:focus-visible):not(:hover) {
+  background-color: var(--spice-text) !important;
+}
+
+.main-skipBackButton-button:active,
+.main-skipForwardButton-button:active,
+.MRfNcNMd_djj3KOg_VOB:active,
+.XGCdw_LcXQHrxmvpxjwi:active {
+  transform: scale(0.89);
+  transition: none;
+}
+
+.main-playPauseButton-button,
+.player-controls__buttons button:not(.main-playPauseButton-button) {
+  --button-size: 28px !important;
+}
+
+.main-seekBack15sButton-button,
+.main-seekForward15sButton-button,
+.main-speedControlsButton-button {
+  height: auto;
+  color: var(--spice-button);
+}
+
+.main-playPauseButton-button {
+  border: none;
+  color: var(--spice-text);
+  mask-repeat: no-repeat;
+
+  svg {
+    display: none;
+  }
+}
+
+.player-controls button[aria-label="Pause"],
+.main-playPauseButton-button[aria-label="Pause"] {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTcuMjUgM0EzLjI1IDMuMjUgMCAwIDAgNCA2LjI1djE4LjVBMy4yNSAzLjI1IDAgMCAwIDcuMjUgMjhoMy41QTMuMjUgMy4yNSAwIDAgMCAxNCAyNC43NVY2LjI1QTMuMjUgMy4yNSAwIDAgMCAxMC43NSAzem0xNCAwQTMuMjUgMy4yNSAwIDAgMCAxOCA2LjI1djE4LjVBMy4yNSAzLjI1IDAgMCAwIDIxLjI1IDI4aDMuNUEzLjI1IDMuMjUgMCAwIDAgMjggMjQuNzVWNi4yNUEzLjI1IDMuMjUgMCAwIDAgMjQuNzUgM3oiLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTcuMjUgM0EzLjI1IDMuMjUgMCAwIDAgNCA2LjI1djE4LjVBMy4yNSAzLjI1IDAgMCAwIDcuMjUgMjhoMy41QTMuMjUgMy4yNSAwIDAgMCAxNCAyNC43NVY2LjI1QTMuMjUgMy4yNSAwIDAgMCAxMC43NSAzem0xNCAwQTMuMjUgMy4yNSAwIDAgMCAxOCA2LjI1djE4LjVBMy4yNSAzLjI1IDAgMCAwIDIxLjI1IDI4aDMuNUEzLjI1IDMuMjUgMCAwIDAgMjggMjQuNzVWNi4yNUEzLjI1IDMuMjUgMCAwIDAgMjQuNzUgM3oiLz48L3N2Zz4=");
+  background-color: var(--spice-text);
+  mask-repeat: no-repeat !important;
+  -webkit-mask-repeat: no-repeat !important;
+  mask-position: center center !important; 
+  -webkit-mask-position: center center !important;
+  mask-size: 60% !important; 
+  -webkit-mask-size: 60% !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+
+}
+
+.player-controls button[aria-label="Play"],
+.main-playPauseButton-button[aria-label="Play"] {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEyLjIyNSA0LjQ2MkM5Ljg5IDMuMTQyIDcgNC44MjcgNyA3LjUwOFYyNC41YzAgMi42ODIgMi44OTIgNC4zNjggNS4yMjYgMy4wNDVsMTQuOTk3LTguNDk4YzIuMzY3LTEuMzQxIDIuMzY2LTQuNzUxIDAtNi4wOTF6Ii8+PC9zdmc+");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTEyLjIyNSA0LjQ2MkM5Ljg5IDMuMTQyIDcgNC44MjcgNyA3LjUwOFYyNC41YzAgMi42ODIgMi44OTIgNC4zNjggNS4yMjYgMy4wNDVsMTQuOTk3LTguNDk4YzIuMzY3LTEuMzQxIDIuMzY2LTQuNzUxIDAtNi4wOTF6Ii8+PC9zdmc+");
+  background-color: var(--spice-text);
+  mask-repeat: no-repeat !important;
+  -webkit-mask-repeat: no-repeat !important;
+  mask-position: center center !important; 
+  -webkit-mask-position: center center !important;
+  mask-size: 60% !important; 
+  -webkit-mask-size: 60% !important;
+  background-repeat: no-repeat !important; 
+  background-position: center center !important;
+
+}
+
+.player-controls__buttons {
+  margin-bottom: 8px;
+  align-items: center;
+  gap: 1rem;
+}
+
+.player-controls__left,
+.player-controls__right {
+  align-items: center;
+}
+
+.player-controls__left:nth-child(1) {
+  height: 1.5rem;
+  width: 1.5rem;
+}
+
+.control-button,
+.bxwPwV {
+  color: var(--spice-text);
+  margin-right: 2px;
+}
+
+.control-button--active {
+  color: var(--spice-accent) !important;
+  fill: var(--spice-accent) !important;
+}
+
+.control-button--active-dot::after {
+  background-color: transparent;
+}
+
+.player-controls__right button[aria-label="Next"],
+.player-controls__right button[data-testid="control-button-skip-forward"],
+.main-skipForwardButton-button {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_next_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_next_24_filled.svg");
+  background-color: var(--spice-text) !important;
+  height: 24px !important;
+  mask-repeat: no-repeat !important;
+  -webkit-mask-repeat: no-repeat !important;
+  mask-position: center center !important;
+  -webkit-mask-position: center center !important;
+  mask-size: 80% !important; 
+  -webkit-mask-size: 80% !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+
+}
+
+.player-controls__left button[aria-label="Previous"],
+.player-controls__left button[data-testid="control-button-skip-back"],
+.main-skipBackButton-button {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_previous_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_previous_24_filled.svg");
+  background-color: var(--spice-text) !important;
+  height: 24px !important;
+  mask-repeat: no-repeat !important;
+  -webkit-mask-repeat: no-repeat !important;
+  mask-position: center center !important;
+  -webkit-mask-position: center center !important;
+  mask-size: 80% !important; 
+  -webkit-mask-size: 80% !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+
+}
+
+.MRfNcNMd_djj3KOg_VOB {
+  /* Skip back 15 sec */
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_skip_backward_15_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_skip_backward_15_24_filled.svg");
+  background-color: var(--spice-text) !important;
+  height: 22px !important;
+}
+
+.XGCdw_LcXQHrxmvpxjwi {
+  /* Skip forward 15 sec */
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_skip_forward_15_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_skip_forward_15_24_filled.svg");
+  background-color: var(--spice-text) !important;
+  height: 22px !important;
+}
+
+.Ww5ppB6W74laf1c0H_pR {
+  /* Speed icon for podcasts */
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_top_speed_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_top_speed_24_filled.svg");
+  background-color: var(--spice-text) !important;
+  height: 22px !important;
+}
+
+.volume-percent {
+  padding-left: 15px !important;
+}
+
+.main-repeatButton-button {
+  height: 1.5rem;
+  width: 1.5rem;
+  background-color: var(--spice-subtext);
+
+  svg {
+    display: none;
+  }
+}
+
+.main-repeatButton-button[aria-checked="false"],
+.main-repeatButton-button[aria-checked="true"] {
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTE2LjUgNi42NzFjLjExNiAwIC4yMjMuMDQuMzA4LjEwN2wuMDY3LjA2M2wuMDE3LjAyYTUgNSAwIDAgMS0zLjY3NSA4LjEzNUwxMyAxNUg3YTUgNSAwIDAgMS0uMzAzLS4wMDlsMS42NTcgMS42NTVhLjUuNSAwIDAgMSAuMDU3LjYzOGwtLjA1Ny4wN2EuNS41IDAgMCAxLS42MzguMDU3bC0uMDctLjA1N2wtMi41LTIuNWEuNS41IDAgMCAxLS4wNTctLjYzOGwuMDU3LS4wN2wyLjUtMi41YS41LjUgMCAwIDEgLjc2NS42MzhsLS4wNTcuMDdsLTEuNjM3IDEuNjM2bC4xNC4wMDhMNyAxNGg2YTQgNCAwIDAgMCAzLjExLTYuNTE2YS41LjUgMCAwIDEgLjM5LS44MTJtLTQuODU0LTQuMDI1YS41LjUgMCAwIDEgLjYzOC0uMDU3bC4wNy4wNTdsMi41IDIuNWwuMDU3LjA3YS41LjUgMCAwIDEgMCAuNTY4bC0uMDU3LjA3bC0yLjUgMi41bC0uMDcuMDU3YS41LjUgMCAwIDEtLjU2OCAwbC0uMDctLjA1N2wtLjA1Ny0uMDdhLjUuNSAwIDAgMSAwLS41NjhsLjA1Ny0uMDdsMS42MzctMS42MzZsLS4xNC0uMDA4TDEzIDZIN2E0IDQgMCAwIDAtMy4xMDUgNi41MjJhLjUuNSAwIDEgMS0uODAxLjYwMWE1IDUgMCAwIDEgMy42ODktOC4xMTlMNyA1aDZxLjE1MyAwIC4zMDMuMDA5bC0xLjY1Ny0xLjY1NWwtLjA1Ny0uMDdhLjUuNSAwIDAgMSAuMDU3LS42MzgiLz48L3N2Zz4=");
+}
+
+.main-repeatButton-button[aria-checked="true"],
+.main-repeatButton-button[aria-checked="mixed"] {
+  background-color: var(--spice-accent);
+}
+
+.main-repeatButton-button[aria-checked="mixed"] {
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0ibTE0LjYxIDIuNDdsLS4wNzctLjA2N2EuNzUuNzUgMCAwIDAtLjk4My4wNjdsLS4wNjguMDc4YS43NTUuNzU1IDAgMCAwIC4wNjguOTg3bDEuOTcxIDEuOTc3SDguNWwtLjIzMy4wMDRDNC43ODUgNS42MzkgMiA4LjUxIDIgMTIuMDM2YzAgMS42OS42NCAzLjIzIDEuNjkyIDQuMzlsLjA3Mi4wNjlhLjc1MS43NTEgMCAwIDAgMS4wOC0xLjAzM2wtLjItLjIzMUE1IDUgMCAwIDEgMy41IDEyLjAzNWMwLTIuNzcxIDIuMjM5LTUuMDE4IDUtNS4wMThoNi44ODFsLTEuODMyIDEuODRsLS4wNjcuMDc4YS43NTUuNzU1IDAgMCAwIC4wNjguOTg3YS43NS43NSAwIDAgMCAxLjA2IDBsMy4xODItMy4xOTNsLjA2Ny0uMDc4YS43NTUuNzU1IDAgMCAwLS4wNjctLjk4N3ptNS42MiA1LjEwMWEuNzUxLjc1MSAwIDAgMC0xLjA1IDEuMDY2YTUgNSAwIDAgMSAxLjMxIDMuMDljLjUzOS4yOCAxLjAzMi42MzIgMS40NyAxLjA0NHEuMDQtLjM2My4wNC0uNzM2YTYuNSA2LjUgMCAwIDAtMS42OTctNC4zOTV6TTguNTU4IDE3LjA1NGgyLjQ1N2E2LjYgNi42IDAgMCAwIC4wNyAxLjUwNWgtMi41MmwxLjkgMS45MDZsLjA2Ni4wNzdhLjc1NS43NTUgMCAwIDEtLjA2Ny45ODdhLjc1Ljc1IDAgMCAxLS45NzYuMDczbC0uMDg0LS4wNzNsLTMuMTgyLTMuMTkzbC0uMDY3LS4wNzdhLjc1NS43NTUgMCAwIDEtLjAwNi0uOTAybC4wNzMtLjA4NWwzLjE4Mi0zLjE5NGwuMDc3LS4wNjdhLjc1Ljc1IDAgMCAxIC44OTktLjAwNmwuMDg0LjA3M2wuMDY4LjA3N2EuNzU1Ljc1NSAwIDAgMSAuMDA1LjkwMmwtLjA3My4wODV6TTIzIDE3LjVhNS41IDUuNSAwIDEgMS0xMSAwYTUuNSA1LjUgMCAwIDEgMTEgMG0tNC44ODUtMy40ODdhLjUuNSAwIDAgMC0uNTYyLjI2M2E0LjggNC44IDAgMCAxLS42MTMuODI4Yy0uMzM0LjM3My0uNzQ0LjczOS0xLjE2NC45NDlhLjUuNSAwIDEgMCAuNDQ4Ljg5NGMuNDg5LS4yNDQuOTI2LS42MTYgMS4yNzYtLjk3N3Y0LjUzYS41LjUgMCAwIDAgMSAwdi02YS41LjUgMCAwIDAtLjM4NS0uNDg3Ii8+PC9zdmc+");
+}
+
+/* Shuffle disabled */
+.main-shuffleButton-button {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_shuffle_24_regular.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_shuffle_24_regular.svg");
+  background-color: var(--spice-subtext) !important;
+  height: 24px !important;
+}
+
+/* Shuffle enabled */
+.main-shuffleButton-button[aria-checked="true"] {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_shuffle_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_arrow_shuffle_24_filled.svg");
+  background-color: var(--spice-accent) !important;
+  height: 24px !important;
+}
+
+/* Eternal Jukebox disabled */
+.main-repeatButton-button[aria-label="Activer jukebox"] {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/phosphor-icons/infinity.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/phosphor-icons/infinity.svg");
+  background-color: var(--spice-subtext) !important;
+  height: 22px !important;
+}
+
+/* Eternal Jukebox enabled */
+.main-repeatButton-active[aria-label="Activer jukebox"] {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/phosphor-icons/infinity-bold.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/phosphor-icons/infinity-bold.svg");
+  background-color: var(--spice-accent) !important;
+  height: 22px !important;
+}
+
+/*Like button*/
+.control-button-heart[aria-checked="true"] {
+  color: var(--spice-accent);
+}
+
+.control-button-heart[aria-checked="false"] {
+  color: var(--spice-subtext);
+}
+
+/* Built-in full screen mode fixes */
+.main-playPauseButton-button path,
+.main-skipBackButton-button path,
+.main-skipForwardButton-button path,
+.main-repeatButton-button path,
+.Ww5ppB6W74laf1c0H_pR path,
+.XGCdw_LcXQHrxmvpxjwi path,
+.MRfNcNMd_djj3KOg_VOB path,
+.player-controls button[aria-label="Pause"] path,
+.main-playPauseButton-button[aria-label="Pause"] path,
+.player-controls button[aria-label="Play"] path,
+.main-playPauseButton-button[aria-label="Play"] path,
+.player-controls__right button[aria-label="Next"] path,
+.player-controls__right button[data-testid="control-button-skip-forward"] path,
+.player-controls__left button[aria-label="Previous"] path,
+.player-controls__left button[data-testid="control-button-skip-back"] path {
+  display: none !important;
+}
+
+.npv-header__metadata {
+  color: rgba(var(--spice-rgb-text), 0.6) !important;
+}
+
+.Gw7E7MkWci1ttQhb4EK0,
+.Lgyj1e9c3lrdgVGlMIyV:hover {
+  color: var(--spice-text) !important;
+}
+
+.Gw7E7MkWci1ttQhb4EK0:hover,
+.Lgyj1e9c3lrdgVGlMIyV,
+.npv-exitFullScreenButton-button {
+  color: var(--spice-subtext) !important;
+}
+
+.Lgyj1e9c3lrdgVGlMIyV.main-genericButton-buttonActive {
+  color: var(--spice-accent) !important;
+}
+
+/*Removes download progress bar and icon on playlist*/
+.L3vU7A1LzZSa3DcQcnmK,
+.PJuB4n2TjjZFBiWAW2zx,
+.main-rootlist-statusIcons {
+  display: none !important;
+}
+
+/*Remove gradient in name*/
+.main-trackInfo-overlay::after,
+.main-trackInfo-overlay::before {
+  width: 0 !important;
+}
+
+/* ads */
+
+.main-leaderboardComponent-container,
+.main-billboardComponent-footer,
+.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer {
+  display: none;
+}
+
+.desktoproutes-homepage-takeover-ad-hptoComponent-parentContainer,
+.desktoproutes-homepage-takeover-ad-hptoComponent-container,
+.main-leaderboardComponent-container {
+  display: none !important;
+}
+
+.main-topBar-UpgradeButton {
+  display: none !important;
+}
+
+/* play buttons */
+
+[dir="ltr"] .main-card-PlayButtonContainer {
+  filter: drop-shadow(0 0 5px rgba(0 0 0 / 30%));
+}
+
+.main-card-imageContainer>.main-card-PlayButtonContainer>.main-playButton-PlayButton>button {
+  background-color: white !important;
+}
+
+.main-playButton-button,
+.main-playButton-PlayButton>button,
+.main-trackList-rowPlayPauseButton {
+  background-color: var(--spice-text) !important;
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_play_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_play_24_filled.svg");
+}
+
+.main-playButton-PlayButton:focus,
+.main-playButton-PlayButton:hover {
+  background-color: transparent;
+}
+
+.main-playButton-PlayButton>button {
+  width: 40px;
+  height: 40px;
+}
+
+.main-playButton-PlayButton>button>span {
+  display: none;
+}
+
+/* error content */
+
+.main-pageErrorTemplate-errorBody {
+  min-height: calc((100vh - 64px) - 105px);
+}
+
+.main-pageErrorTemplate-errorBody svg {
+  margin: 0;
+}
+
+/* spicetify */
+
+#spicetify-sidebar-config {
+  flex-direction: column;
+  top: -60px !important;
+}
+
+#spicetify-show-list>* {
+  padding: 0px;
+}
+
+.marketplace-header {
+  padding-top: 8px;
+}
+
+.toggle-module__toggle-input___ceLM4_marketplace:checked~.toggle-module__toggle-indicator-wrapper___6Lcp0_marketplace {
+  background-color: var(--spice-accent);
+}
+
+.toggle-module__toggle-indicator___nCxwE_marketplace {
+  background: var(--spice-card) !important;
+}
+
+.marketplace-card--installed {
+  border: 1px rgba(var(--spice-rgb-accent), 0.7) solid !important;
+}
+
+button.arrow-btn {
+  background-color: var(--spice-selected-row);
+  color: var(--spice-text);
+}
+
+/* eternal-jukebox */
+.main-view-container [class*="container"][class*="eternalDjukebox"]:not([class*="full-size"]):not([class*="empty"]) {
+  padding-top: 8px;
+}
+
+.main-view-container [class*="stats"][class*="eternalDjukebox"] {
+  padding-bottom: 120px;
+}
+
+.main-view-container [class*="ncsDvisualizer"] {
+  bottom: 105px;
+}
+
+/* spicetify extensions */
+
+.main-topBar-button[title="Popup Lyrics"],
+.main-topBar-button[title="Full App Display"],
+.main-topBar-button[title="Bookmark"] {
+  background-color: var(--spice-card) !important;
+}
+
+.a2ruVaZt_DdrdHz3GqgU,
+.x-categoryCard-CategoryCard {
+  color: var(--spice-alt-text);
+}
+
+.UyzJidwrGk3awngSGIwv,
+.main-addButton-button[aria-checked="false"] {
+  color: var(--spice-text);
+}
+
+/* New lyrics style */
+
+:root {
+  --lyrics-text-direction: left;
+}
+
+.main-lyricsCinema-controls {
+  top: 80px !important;
+}
+
+#lyrics-backdrop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+
+#lyrics-backdrop-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: var(--spice-main);
+}
+
+.lyrics-lyrics-background {
+  visibility: hidden !important;
+}
+
+.lyrics-lyrics-container {
+  --lyrics-color-active: rgb(255, 255, 255) !important;
+  --lyrics-color-inactive: rgba(255, 255, 255, 0.35) !important;
+  --lyrics-color-passed: rgba(255, 255, 255, 0.8) !important;
+  --lyrics-color-messaging: rgba(255, 255, 255, 0.45) !important;
+}
+
+.lyrics-lyricsContent-lyric {
+  opacity: 0;
+  visibility: hidden;
+  animation-fill-mode: forwards;
+  margin: 0.3rem 0;
+  text-shadow: none;
+  transition: text-shadow 100ms ease, color 100ms ease;
+}
+
+.lyrics-lyricsContent-text {
+  transform-origin: var(--lyrics-text-direction);
+}
+
+/* lyrics not available message */
+.C3pBU1DsOUJJOAv89ZFT {
+  color: var(--lyrics-color-passed) !important;
+  opacity: 0;
+  animation: reveal 800ms ease forwards;
+}
+
+@keyframes reveal {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.lyrics-lyricsContent-lyric:hover {
+  color: var(--lyrics-color-active) !important;
+}
+
+.lyrics-lyricsContent-active {
+  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
+  max-width: var(--lyrics-active-max-width);
+}
+
+@media (min-width: 1920px) {
+  .lyrics-lyricsContent-lyric {
+    transition: text-shadow 400ms ease, color 50ms ease;
+  }
+
+  .lyrics-lyricsContent-text {
+    transform: scale(1);
+    transition: transform 400ms ease;
+  }
+
+  .lyrics-lyricsContent-active .lyrics-lyricsContent-text {
+    transform: scale(1.1);
+  }
+
+  .lyrics-lyricsContent-isInteractive .lyrics-lyricsContent-text:active {
+    transform: scale(0.9);
+  }
+}
+
+.main-nowPlayingView-section .lyrics-lyricsContent-lyric {
+  opacity: 1;
+  visibility: visible;
+}
+
+.main-nowPlayingView-section .lyrics-lyricsContent-text {
+  transform: unset;
+}
+
+/* New Lyrics Plus style */
+
+.lyrics-lyricsContainer-LyricsBackground {
+  display: none !important;
+}
+
+/* hide horizontal scrollbar */
+.lyrics-lyricsContainer-LyricsContainer,
+.lyrics-lyricsContainer-SyncedLyricsPage {
+  overflow-x: hidden;
+}
+
+.lyrics-lyricsContainer-LyricsContainer {
+  --lyrics-color-active: white !important;
+  --lyrics-color-inactive: rgba(255, 255, 255, 0.5) !important;
+}
+
+.lyrics-lyricsContainer-LyricsLine {
+  text-shadow: none;
+}
+
+.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine {
+  transition-property: transform, color, opacity, text-shadow !important;
+}
+
+.lyrics-lyricsContainer-Karaoke-Word {
+  transition: var(--word-duration) color ease,
+    var(--word-duration) text-shadow ease !important;
+  text-shadow: none;
+}
+
+.lyrics-lyricsContainer-Karaoke-WordActive,
+.lyrics-lyricsContainer-SyncedLyrics .lyrics-lyricsContainer-LyricsLine-active {
+  text-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
+}
+
+.lyrics-lyricsContainer-LyricsUnavailableMessage {
+  color: rgba(255, 255, 255, 0.4) !important;
+}
+
+.lyrics-lyricsContainer-Provider {
+  background: none !important;
+}
+
+/* lyrics pages fix */
+
+.main-lyricsCinema-nonDisplayedArea .main-topBar-topbarContent {
+  display: none;
+}
+
+.lyrics-lyrics-container {
+  margin-top: 0;
+}
+
+.lyrics-lyricsContainer-LyricsBackground {
+  margin-bottom: -110px;
+  margin-top: -10px;
+}
+
+.lyrics-lyricsContainer-Provider {
+  padding-bottom: 40px;
+}
+
+#lyrics-fullscreen-container>.lyrics-lyricsContainer-LyricsContainer:has(.lyrics-lyricsContainer-UnsyncedLyricsPage) .lyrics-lyricsContainer-Provider {
+  padding-bottom: 35px;
+}
+
+.lyrics-lyricsContainer-LyricsUnsyncedPadding {
+  height: 20vh;
+}
+
+.lyrics-config-button-container {
+  bottom: 15px;
+}
+
+#lyrics-fullscreen-container .lyrics-config-button-container {
+  bottom: 10px;
+}
+
+#fad-lyrics-plus-container .lyrics-config-button-container {
+  bottom: 32px;
+}
+
+body:has(#lyrics-fullscreen-container)>#main>.Root>.Root__top-container>*:not(.Root__main-view),
+body:has(#lyrics-fullscreen-container)>#main>.Root>.Root__top-container>.Root__main-view>*:not(.main-view-container),
+body:has(#lyrics-fullscreen-container)>#main>.Root>.Root__top-container>.Root__main-view>.main-view-container>*:not(.under-main-view),
+body:has(#lyrics-fullscreen-container)>#main>.Root>.Root__top-container>.Root__main-view::before {
+  display: none !important;
+}
+
+body:has(#lyrics-fullscreen-container)>#main>.Root {
+  --panel-gap: 0 !important;
+}
+
+.hKccLC {
+  background-color: var(--spice-accent);
+  color: var(--spice-alt-text);
+  border-radius: var(--border-radius-3);
+}
+
+.ksogXh:hover {
+  color: var(--spice-rgb-subtext);
+}
+
+.main-view-container__scroll-node-child,
+.main-yourLibraryX-libraryItemContainer,
+.main-buddyFeed-content,
+.nw2W4ZMdICuBo08Tzxg9 {
+  padding-bottom: 6rem;
+}
+
+.view-homeShortcutsGrid-imageContainer {
+  padding: 6px;
+}
+
+.view-homeShortcutsGrid-shortcut .view-homeShortcutsGrid-image {
+  border-radius: var(--border-radius-3);
+}
+
+.main-trackList-playsHeader {
+  width: 12.8ch;
+}
+
+.main-trackList-durationHeader {
+  margin-left: 30px;
+}
+
+.main-trackList-rowSectionEnd {
+  margin: auto;
+}
+
+.main-trackList-column {
+  padding-left: 10px;
+}
+
+.main-trackList-rowSectionVariable[aria-colindex="3"] .cPwEdQ,
+.main-trackList-rowSectionVariable[aria-colindex="3"] .main-trackList-text {
+  padding-left: 8.5px;
+}
+
+.main-trackList-rowSectionVariable[aria-colindex="4"] .eDbSCl {
+  padding-left: 14.5px;
+}
+
+.main-trackList-rowSectionVariable[aria-colindex="3"] .main-trackList-rowPlayCount {
+  padding-left: 0px;
+}
+
+.SxHlW6byhoJSUJNugaE1 .k6Nq7pavAmiyJlxj52QA {
+  color: var(--spice-alt-text);
+}
+
+.npv-background-image__overlay {
+  background-color: rgba(var(--spice-rgb-layer-shadow), 0.5) !important;
+}
+
+.spotifyinternal-artistnpv .npv-background-image {
+  display: none;
+}
+
+.spotifyinternal-artistnpv .npv-background-image--active {
+  opacity: 0;
+}
+
+.main-rootlist-rootlistItemOverlay {
+  display: none;
+}
+
+/* Fix Spotify moving up caused by lyric page */
+
+.Root__top-container {
+  position: fixed;
+}
+
+/* Fix lyrics get covered by controls */
+.lyrics-lyrics-contentContainer {
+  margin-bottom: 64px;
+  margin-top: 32px;
+}
+
+/* Spicetify power bar */
+
+#power-bar-wrapper::before {
+  z-index: -1;
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: var(--border-radius-1) !important;
+  background-image: var(--noise-texture);
+  opacity: var(--noise-opacity);
+}
+
+#power-bar-wrapper {
+  background-color: rgba(var(--spice-rgb-main), 0.8) !important;
+  backdrop-filter: blur(50px) saturate(1.5);
+  border-radius: var(--border-radius-1) !important;
+}
+
+#power-bar-search.has-suggestions {
+  border-bottom: none !important;
+  width: 100% !important;
+}
+
+#power-bar-search:focus-visible {
+  border-bottom: 2px solid var(--spice-accent) !important;
+  border-radius: var(--border-radius-3) !important;
+}
+
+#suggestions-container h5 {
+  font-size: 1.1em !important;
+  color: var(--spice-subtext) !important;
+}
+
+.suggestions-category {
+  border: none !important;
+  padding-bottom: 0 !important;
+}
+
+.suggestion-item__active {
+  background-color: var(--spice-accent) !important;
+  border-radius: var(--border-radius-3) !important;
+}
+
+.suggestion-item__img {
+  border-radius: 10% !important;
+}
+
+/* Topbar */
+
+.main-topBar-container>*,
+.main-topBar-topbarContent {
+  -webkit-app-region: drag !important;
+}
+
+.main-topBar-topbarContentRight *,
+.main-topBar-historyButtons * {
+  -webkit-app-region: no-drag;
+}
+
+/* Main view */
+
+/* rounded main view container corners */
+.Root__main-view::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  border-radius: var(--border-radius-1);
+  box-shadow: 0 -8px 0 var(--spice-sidebar), 0 8px 0 var(--spice-sidebar);
+  pointer-events: none;
+}
+
+.Root__main-view {
+  border-radius: var(--border-radius-1) !important;
+  overflow: visible;
+}
+
+.main-view-container__scroll-node-child-spacer {
+  height: 0 !important;
+}
+
+.global-nav .main-view-container {
+  margin-top: 0px;
+}
+
+.contentSpacing:not(.artist-artistDiscography-topBar,
+  .search-searchCategory-container,
+  .hV9v6y_uYwdAsoiOHpzk) {
+  padding-top: 8px;
+}
+
+.main-home-home {
+  padding-top: 8px;
+}
+
+/* Left navbar */
+
+.ChipInnerComponent,
+.ChipInnerComponent-secondary {
+  background-color: var(--spice-card);
+  color: var(--spice-text);
+}
+
+.ChipInnerComponent-selected,
+.ChipInnerComponent-selected-secondary {
+  background-color: var(--spice-text);
+  color: var(--spice-card);
+}
+
+.ChipInnerComponent:hover,
+.ChipInnerComponent-selected:hover,
+.ChipInnerComponent-selected-secondary:hover {
+  background-color: var(--spice-selected-row) !important;
+  color: var(--spice-text);
+}
+
+.Root__nav-bar {
+  max-width: unset !important;
+}
+
+.main-yourLibraryX-entryPoints {
+  border-radius: var(--border-radius-1);
+}
+
+.main-yourLibraryX-navItem {
+  padding: 2px 0px !important;
+}
+
+.main-yourLibraryX-navLink {
+  border-radius: var(--border-radius-2);
+  min-height: 50px;
+  min-width: 50px;
+  justify-content: center;
+  transition: all ease 100ms;
+}
+
+.main-yourLibraryX-navLink:has(span) {
+  padding-left: 0.5rem;
+  justify-content: flex-start;
+}
+
+.main-yourLibraryX-navLinkActive.active>svg,
+.main-yourLibraryX-navLinkActive>.search-active-icon {
+  animation: bounce 175ms ease-out forwards;
+}
+
+@keyframes bounce {
+  0% {
+    transform: translate(0, -25%);
+  }
+
+  50% {
+    transform: translate(0, 25%);
+  }
+
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+.main-yourLibraryX-navLinkActive.active {
+  background-color: var(--spice-selected-row);
+}
+
+.main-yourLibraryX-navLink-accent {
+  position: absolute;
+  width: 4px;
+  height: 25px;
+  background-color: var(--spice-accent);
+  border-radius: var(--border-radius-2);
+  left: 12px;
+  display: none;
+}
+
+svg,
+.search-icon {
+  transition: background-color linear 200ms;
+}
+
+.main-yourLibraryX-button path {
+  display: none !important;
+}
+
+.main-yourLibraryX-collapseButton.main-yourLibraryX-collapseButtonIsCollapsed>.main-yourLibraryX-button {
+  color: var(--spice-subtext);
+}
+
+.main-yourLibraryX-collapseButton.main-yourLibraryX-collapseButtonIsCollapsed svg {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_library_24_regular.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_library_24_regular.svg");
+  background-color: var(--spice-subtext);
+}
+
+.main-yourLibraryX-collapseButton>.main-yourLibraryX-button {
+  color: var(--spice-text);
+}
+
+.main-yourLibraryX-collapseButton svg {
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_library_24_filled.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/ic_fluent_library_24_filled.svg");
+  background-color: var(--spice-text);
+}
+
+.main-yourLibraryX-button[aria-haspopup="menu"] {
+  padding: 1px;
+  mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/main/assets/More%20Vertical/SVG/ic_fluent_more_vertical_24_regular.svg");
+  -webkit-mask-image: url("https://nimsandu.github.io/spicetify-bloom/assets/fluentui-system-icons/main/assets/More%20Vertical/SVG/ic_fluent_more_vertical_24_regular.svg");
+  background-color: var(--spice-text);
+}
+
+button.main-yourLibraryX-button[aria-label="Go back"] svg.e-9812-icon { background: none !important; -webkit-mask-image: none !important; mask-image: none !important; fill: currentColor !important; display: block !important; width: 16px !important; height: 16px !important; }
+button.main-yourLibraryX-button[aria-label="Go back"] svg.e-9812-icon path { display: block !important; }
+
+
+.main-rootlist-wrapper {
+  padding-left: unset;
+  padding-right: unset;
+}
+
+.BoxComponent-group-tinted-isInteractive-hasLeadingOrMedia-paddingBlockStart_8px-paddingBlockEnd_8px-minBlockSize_56px-padding_8px.main-yourLibraryX-listItemGroup {
+  background-color: var(--spice-selected-row) !important;
+}
+
+.main-yourLibraryX-libraryContainer {
+  --background-highlight: var(--spice-selected-row) !important;
+  --text-bright-accent: var(--spice-accent) !important;
+}
+
+.main-yourLibraryX-listRowSubtitleLeadingWrapper svg {
+  fill: var(--spice-accent);
+}
+
+.main-yourLibraryX-listRowEntityImage {
+  border-radius: var(--border-radius-2);
+}
+
+/* Player bar */
+
+.main-nowPlayingBar-container {
+  justify-content: center;
+  --background-highlight: rgba(var(--spice-rgb-sidebar), 0.5) !important;
+  height: var(--now-playing-bar-height);
+  width: 100%;
+  position: absolute;
+  border-radius: var(--border-radius-now-playing-bar);
+  padding: var(--padding-now-playing-bar);
+  bottom: var(--margin-bottom-now-playing-bar);
+  border: var(--default-border-thickness) solid var(--shadow-rgb);
+  background-color: rgba(var(--spice-rgb-main), 0.5);
+  backdrop-filter: blur(var(--blur-radius)) saturate(0.5) brightness(100%);
+}
+
+.main-nowPlayingBar-container .GlueDropTarget,
+.main-coverSlotCollapsed-container {
+  max-height: 56px;
+  max-width: 56px;
+}
+
+/* Search */
+
+.x-searchInput-searchInputInput {
+  padding-left: 18px;
+  padding-right: 62px;
+}
+
+/* Right sidebar */
+
+.main-buddyFeed-scrollBarContainer {
+  height: 100%;
+}
+
+.Root__right-sidebar {
+  position: relative;
+}
+
+/* Friends activity */
+
+.main-buddyFeed-container {
+  border-radius: var(--border-radius-1);
+}
+
+.main-buddyFeed-content {
+  margin-top: 0 !important;
+}
+
+/* Lyrics */
+
+.lyrics-lyrics-coverTopBar {
+  padding-top: 0;
+}
+
+/* Lyrics Cinema*/
+.main-lyricsCinema-controls {
+  top: 74px !important;
+}
+
+/* Lyrics Plus */
+
+.lyrics-config-button-container {
+  bottom: 80px;
+}
+
+.lyrics-lyricsContainer-LyricsUnsyncedPadding {
+  height: 15vh;
+}
+
+/* Track list */
+
+.main-trackList-trackListHeaderStuck.main-trackList-trackListHeader {
+  background: transparent;
+}
+
+.search-searchBrowse-SearchBrowse {
+  margin-top: 0;
+}
+
+.fDhpniKuH2iCAIc_ZUeL.rX_OmqCngvY5ZCoYBZgb,
+.fDhpniKuH2iCAIc_ZUeL.rX_OmqCngvY5ZCoYBZgb::after,
+.fDhpniKuH2iCAIc_ZUeL.rX_OmqCngvY5ZCoYBZgb::before,
+.mjZrvVI3CxfHJXu7y0Lg,
+.mjZrvVI3CxfHJXu7y0Lg::after {
+  background: rgba(var(--spice-rgb-player), 0.5) !important;
+  backdrop-filter: blur(50px) saturate(1.5) !important;
+  border-radius: 8px;
+}
+
+.Wrapper-medium-medium-only {
+  top: initial;
+  left: initial;
+}
+
+/* Cards */
+
+.main-gridContainer-gridContainer {
+  gap: 0.5rem;
+
+  a {
+    padding: 0;
+
+    .Vn9yz8P5MjIvDT8c0U6w::before {
+      content: "";
+      height: 100%;
+      width: 100%;
+      display: block;
+      position: absolute;
+      background: linear-gradient(120deg, transparent, var(--spice-main));
+    }
+  }
+}
+
+/* Play | Pause Btn Alignment */
+.Wrapper-medium-only-medium {
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.Wrapper-medium-only-medium {
+  top: 0;
+  left: 0;
+}
+
+.main-genericButton-button {
+  color: var(--spice-subtext);
+}
+
+.gqaWFmQeKNYnYD5gRv3x {
+  margin-bottom: 5rem;
+}
+
+/* FullScreen Styles */
+
+.npv-background-image__overlay {
+}
+
+.npv-main-container,
+.npv-background-color,
+.npv-lyrics__gradient-background {
+  background-color: rgba(var(--spice-rgb-main), 0.75) !important;
+  background-image: none !important;
+  background: none !important;
+}
+
+.npv-track-metadata,
+.npv-up-next {
+  min-width: 6rem;
+  border: 2px solid rgba(var(--spice-rgb-main), var(--bg-color-opacity-homeHeader));
+  padding: 0.5rem;
+  border-radius: var(--card-border-radius);
+  background-color: rgba(var(--spice-rgb-card), 0.75);
+  color: rgba(var(--spice-rgb-subtext), 0.6);
+}
+
+.npv-up-next__info {
+  color: var(--spice-text);
+}
+
+.pO2rsGFqUdaNhpLrif21 a {
+  color: var(--spice-text) !important;
+}
+
+.ellipsis-one-line {
+  color: var(--spice-subtext) !important;
+}
+
+.npv-lyrics__text--credits,
+.npv-track-metadata__creator-name,
+.npv-lyrics__text-wrapper--previous,
+.npv-lyrics__text--credits {
+  color: rgba(var(--spice-rgb-text), 0.5) !important;
+}
+
+::backdrop {
+  backdrop-filter: blur(3rem) saturate(1.3) invert(0.0125) brightness(0.5);
+  background-color: rgba(var(--spice-rgb-main), 0.75);
+}
+
+.desktopmodals-aboutSpotifyModal-container {
+  background-color: rgba(var(--spice-rgb-main), .75);
+  backdrop-filter: blur(4px) brightness(1.5);
+}
+
+.Root__globalNav .main-globalNav-link-icon {
+  background-color: var(--spice-card);
+}
+
+/* --- Responsive Search Bar --- */
+
+/* --- Breakpoint 1: Medium Screens --- */
+@media (max-width: 1000px) { /* Start shrinking around here */
+  .main-topBar-searchBar {
+    flex-basis: 350px !important; /* Reduce base width */
+    flex-shrink: 1 !important; /* Allow shrinking */
+    min-width: 200px !important; /* But not too much */
+  }
+
+  /* You can also reduce min-width of the input if needed */
+  form.e-9812-form-input-icon[role="search"] input.e-9812-form-input {
+      min-width: 200px !important; /* Reduce minimum input width */
+  }
+}
+
+/* --- Breakpoint 2: Narrow Screens --- */
+@media (max-width: 750px) { /* Hide input field around here */
+
+  /* Search bar container becomes very small, like a button */
+  .main-topBar-searchBar {
+    flex: 0 0 auto !important; /* Remove flexibility, fixed size */
+    width: 36px !important;  /* Width = height for round button */
+    min-width: 36px !important;
+    margin-left: 8px !important; /* Add small left margin */
+  }
+
+  /* Form also becomes small and round */
+  form.e-9812-form-input-icon[role="search"] {
+    width: 100% !important;
+    height: 100% !important; /* Takes full height of 36px container */
+    padding: 0 !important;
+    justify-content: center !important; /* Center icon inside */
+    border-radius: 50% !important; /* Make it round */
+    border: 1px solid transparent !important; /* Remove or make border transparent */
+    /* You can add hover background like a button */
+    transition: background-color 150ms ease;
+  }
+  form.e-9812-form-input-icon[role="search"]:hover {
+      background-color: rgba(var(--spice-rgb-selected-row), 0.6) !important;
+  }
+
+
+  /* Hide text field, right icons, and Ctrl+K hint */
+  form.e-9812-form-input-icon[role="search"] input.e-9812-form-input,
+  form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--trailing,
+  .dM_TEJo05MxBvrLzfNrW {
+    display: none !important;
+    visibility: hidden !important;
+    width: 0 !important;
+    opacity: 0 !important;
+  }
+
+  /* Style remaining search icon */
+  form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--leading {
+    margin: 0 !important; /* Remove margins */
+    width: auto !important; /* Size by SVG */
+    height: 100% !important; /* For vertical centering */
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+  }
+  form.e-9812-form-input-icon[role="search"] .e-9812-form-input-icon__icon--leading svg.M9l40ptEBXPm03dU3X1k {
+      width: 18px !important; /* Icon size */
+      height: 18px !important;
+      fill: var(--spice-text) !important; /* Icon color */
+  }
+}
+/* Align Top Bar Items Vertically - Manual Adjustment */
+
+/* Main top bar container - still using align-items */
+.main-topBar-topbarContent {
+  display: flex !important;
+  align-items: center !important; /* Main alignment method */
+  gap: 8px !important;
+  min-height: 36px; /* Set minimum height to the tallest element */
+}
+
+/* --- Left buttons (Home, etc.) --- */
+button.main-globalNav-navLink[aria-label="Home"],
+button[aria-label="What's New"],
+button[aria-label="Friend Activity"] {
+    position: relative; /* Enable relative positioning */
+    top: 2px; /* <<< Move down by (36-32)/2 pixels */
+    margin: 0 !important; /* Remove external margins */
+}
+
+/* --- Search field --- */
+.main-topBar-searchBar {
+  /* No additional offsets needed, it's 36px */
+  display: flex;
+  align-items: center;
+}
+form.e-9812-form-input-icon[role="search"] {
+    /* Height 36px */
+}
+
+/* --- Right button container --- */
+.main-topBar-topbarContentRight {
+  display: flex !important;
+  align-items: center !important; /* Align buttons inside */
+  gap: 8px !important;
+}
+
+/* --- Right buttons (Profile, Bell, etc.) --- */
+.main-topBar-topbarContentRight button:has(img),
+button.main-userWidget-box[data-testid="user-widget-link"],
+/* Add other selectors for right buttons if they are also 32px */
+.main-topBar-topbarContentRight button[aria-label*="Inbox"],
+.main-topBar-topbarContentRight button[aria-label*="Notifications"]
+{
+    position: relative; /* Enable relative positioning */
+    top: 2px; /* <<< Move down by (36-32)/2 pixels */
+    margin: 0 !important; /* Remove external margins */
+}