@ozdao/martyrs 0.2.491 → 0.2.493

package/dist/style.css

@@ -62,14 +62,6 @@
 }
 .background-div {
   flex-grow: 1;
-}.tab-selector {
-  position: absolute;
-  width: 50%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  z-index: 0;
-  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 input[data-v-69b12b85],
 textarea[data-v-69b12b85],
@@ -88,7 +80,15 @@ input[type="time"][data-v-69b12b85]::-webkit-calendar-picker-indicator {
   opacity: 1;
   color: inherit;
 }
-
+.tab-selector {
+  position: absolute;
+  width: 50%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  z-index: 0;
+  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
 .circular-loader-centered {
   top: calc(50% - 1rem);
   left: calc(50% - 1rem);
@@ -694,75 +694,75 @@ ul li[data-v-849e5dfe] {
     left: 100%;
 }
 }
-.calendar[aria-disabled=true][data-v-5b68ada8] {
+.calendar[aria-disabled=true][data-v-2ba40647] {
   cursor: not-allowed;
 }
-.calendar[aria-disabled=true][data-v-5b68ada8] * {
+.calendar[aria-disabled=true][data-v-2ba40647] * {
   pointer-events: none;
 }
-.calendar__week[data-v-5b68ada8] {
+.calendar__week[data-v-2ba40647] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 5px;
   margin-bottom: 10px;
 }
-.calendar__weekday[data-v-5b68ada8] {
+.calendar__weekday[data-v-2ba40647] {
   text-align: center;
 }
-.calendar__dates[data-v-5b68ada8] {
+.calendar__dates[data-v-2ba40647] {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-auto-rows: 1fr;
 }
-.calendar__dates[data-v-5b68ada8]::before {
+.calendar__dates[data-v-2ba40647]::before {
   content: "";
   width: 0;
   padding-bottom: 100%;
   grid-row: 1/1;
   grid-column: 1/1;
 }
-.calendar__dates[data-v-5b68ada8] > *:first-child {
+.calendar__dates[data-v-2ba40647] > *:first-child {
   grid-row: 1/1;
   grid-column: 1/1;
 }
-.calendar__date--today[data-v-5b68ada8] {
+.calendar__date--today[data-v-2ba40647] {
   background-color: rgb(var(--main)) !important;
   font-weight: bold;
 }
-.calendar__date--in-other-month[data-v-5b68ada8] {
+.calendar__date--in-other-month[data-v-2ba40647] {
   color: #aaaaaa; /* Grey text color for dates from adjacent months */
 }
-.calendar__date--selected[data-v-5b68ada8] {
+.calendar__date--selected[data-v-2ba40647] {
   background-color: #007bff !important;
   color: #fff;
 }
-.calendar__date--range[data-v-5b68ada8] {
+.calendar__date--range[data-v-2ba40647] {
   background-color: #1c6ab8 !important;
 }
-.calendar__date--disabled[data-v-5b68ada8], .calendar__date--unavailable[data-v-5b68ada8] {
+.calendar__date--disabled[data-v-2ba40647], .calendar__date--unavailable[data-v-2ba40647] {
   color: #ccc;
   cursor: not-allowed;
   text-decoration: line-through;
   opacity: 0.5;
 }
-.calendar__date--low-availability[data-v-5b68ada8] {
+.calendar__date--low-availability[data-v-2ba40647] {
   position: relative;
   background-color: #f0f0f0;
   /*  border: 1px solid #fff3cd;*/
   /*  background-color: #fff3cd;*/
 }
-.availability-indicator[data-v-5b68ada8] {
+.availability-indicator[data-v-2ba40647] {
   position: absolute;
   bottom: 2px;
   right: 2px;
   font-size: 8px;
   color: #6c757d;
 }
-button[data-v-5b68ada8]:disabled {
+button[data-v-2ba40647]:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
-.calendar-tooltip[data-v-5b68ada8] {
+.calendar-tooltip[data-v-2ba40647] {
   position: fixed;
   background-color: #333;
   color: white;
@@ -956,6 +956,9 @@ button[data-v-5b68ada8]:disabled {
   opacity: 0;
   left: 0;
   top: 0;
+}input[data-v-efdb42f1], span[data-v-efdb42f1] {
+  line-height: 1;
+  color: inherit;
 }.constructor-iframe iframe {
   width: 100% !important;
   height: 100% !important;
@@ -1002,9 +1005,6 @@ button[data-v-5b68ada8]:disabled {
 }
 .formatting-bar button:active {
   background-color: #d0d0d0;
-}input[data-v-efdb42f1], span[data-v-efdb42f1] {
-  line-height: 1;
-  color: inherit;
 }
 .draggable-container {
   display: flex;
@@ -2074,6 +2074,92 @@ to {
 }.bg-white-overlay[data-v-0f5877fc] {
   background: linear-gradient(0deg, rgba(var(--white), 1) 0%, rgba(var(--white), 0) 100%);
 }
+.icon-search-popup[data-v-1763f3da] {
+  min-height: 500px;
+}
+.icon-grid[data-v-1763f3da] {
+  min-height: 400px;
+}
+.icon-item[data-v-1763f3da] {
+  transition: all 0.2s ease;
+}
+.icon-item[data-v-1763f3da]:hover {
+  background-color: rgb(var(--light-hover));
+  transform: scale(1.05);
+}
+.icon-preview[data-v-1763f3da] {
+  background: rgb(var(--light));
+  border-radius: 8px;
+}
+.icon-svg[data-v-1763f3da] {
+  filter: none;
+}
+.w-max-800[data-v-1763f3da] {
+  max-width: 800px;
+  width: 90vw;
+}
+[data-v-1763f3da] .feed-enter-active,[data-v-1763f3da] .feed-leave-active {
+  transition: all 0.3s ease;
+}
+[data-v-1763f3da] .feed-enter-from,[data-v-1763f3da] .feed-leave-to {
+  opacity: 0;
+  transform: scale(0.9);
+}
+.eye[data-v-8ec01df7] {
+  animation: rotateEye-8ec01df7 10s linear infinite;
+  transform-origin: center 55%;
+}
+.mouth[data-v-8ec01df7] {
+  animation: rotateMouth-8ec01df7 20s ease-in-out infinite;
+  transform-origin: center 55%;
+}
+@keyframes rotateEye-8ec01df7 {
+from {
+    transform: rotate(0deg);
+}
+to {
+    transform: rotate(360deg);
+}
+}
+@keyframes rotateMouth-8ec01df7 {
+0% {
+    transform: rotate(0deg);
+}
+50% {
+    transform: rotate(180deg);
+}
+100% {
+    transform: rotate(360deg);
+}
+}
+.h-60[data-v-1228d04d] {
+  height: 60%;
+}
+.notification[data-v-1228d04d] {
+  z-index: 100;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  animation: fadeIn-1228d04d 0.3s;
+}
+@keyframes fadeIn-1228d04d {
+from { opacity: 0; transform: translateY(20px);
+}
+to { opacity: 1; transform: translateY(0);
+}
+}
+.icon-card .replace-btn[data-v-1228d04d] {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+.icon-card:hover .replace-btn[data-v-1228d04d] {
+  opacity: 1;
+}
+.flex-between[data-v-1228d04d] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
   /* Existing styles can stay unchanged */
 
 #eventPage {
@@ -2319,6 +2405,19 @@ to {
 }
 
 /* Add your styles here */
+.custom-table[data-v-b85cde7e] {
+  border-collapse: collapse;
+}
+.custom-table td[data-v-b85cde7e] {
+  vertical-align: middle;
+}
+.border-b[data-v-ac527817] {
+  border-bottom: 1px solid rgba(var(--black), 0.1);
+}
+
+.bg-orange {
+  background-color: rgb(var(--orange));
+}
 .grid-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -2491,11 +2590,6 @@ to {
 .custom-scroll[data-v-148fd4a9]::-webkit-scrollbar {
   width: 0px; /* Hide scrollbar for Chrome and Safari */
   height: 0px;
-}.custom-table[data-v-b85cde7e] {
-  border-collapse: collapse;
-}
-.custom-table td[data-v-b85cde7e] {
-  vertical-align: middle;
 }
 .status-badge[data-v-d9bc23ad] {
   padding: 4px 8px;
@@ -2504,92 +2598,6 @@ to {
   color: white;
   display: inline-block;
 }
-
-.icon-search-popup[data-v-1763f3da] {
-  min-height: 500px;
-}
-.icon-grid[data-v-1763f3da] {
-  min-height: 400px;
-}
-.icon-item[data-v-1763f3da] {
-  transition: all 0.2s ease;
-}
-.icon-item[data-v-1763f3da]:hover {
-  background-color: rgb(var(--light-hover));
-  transform: scale(1.05);
-}
-.icon-preview[data-v-1763f3da] {
-  background: rgb(var(--light));
-  border-radius: 8px;
-}
-.icon-svg[data-v-1763f3da] {
-  filter: none;
-}
-.w-max-800[data-v-1763f3da] {
-  max-width: 800px;
-  width: 90vw;
-}
-[data-v-1763f3da] .feed-enter-active,[data-v-1763f3da] .feed-leave-active {
-  transition: all 0.3s ease;
-}
-[data-v-1763f3da] .feed-enter-from,[data-v-1763f3da] .feed-leave-to {
-  opacity: 0;
-  transform: scale(0.9);
-}
-.eye[data-v-8ec01df7] {
-  animation: rotateEye-8ec01df7 10s linear infinite;
-  transform-origin: center 55%;
-}
-.mouth[data-v-8ec01df7] {
-  animation: rotateMouth-8ec01df7 20s ease-in-out infinite;
-  transform-origin: center 55%;
-}
-@keyframes rotateEye-8ec01df7 {
-from {
-    transform: rotate(0deg);
-}
-to {
-    transform: rotate(360deg);
-}
-}
-@keyframes rotateMouth-8ec01df7 {
-0% {
-    transform: rotate(0deg);
-}
-50% {
-    transform: rotate(180deg);
-}
-100% {
-    transform: rotate(360deg);
-}
-}
-.h-60[data-v-1228d04d] {
-  height: 60%;
-}
-.notification[data-v-1228d04d] {
-  z-index: 100;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transition: all 0.3s ease;
-  animation: fadeIn-1228d04d 0.3s;
-}
-@keyframes fadeIn-1228d04d {
-from { opacity: 0; transform: translateY(20px);
-}
-to { opacity: 1; transform: translateY(0);
-}
-}
-.icon-card .replace-btn[data-v-1228d04d] {
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-.icon-card:hover .replace-btn[data-v-1228d04d] {
-  opacity: 1;
-}
-.flex-between[data-v-1228d04d] {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
 .blink[data-v-b6c8ad09] {
   animation: blink-animation-b6c8ad09 1s ease infinite;
 }
@@ -2624,14 +2632,14 @@ to { opacity: 1; transform: translateY(0);
 }
 .vue-select-header {
   height: 3rem;
+}.shop-cart-item[data-v-926e65ca]:first-of-type {
+  padding-top: 0;
 }
 /* Добавляем стиль для текста "просрочено" */
 .t-red[data-v-df82a9d0] {
   color: red;
 }
-.shop-cart-item[data-v-926e65ca]:first-of-type {
-  padding-top: 0;
-}#map[data-v-4c5385a2]:focus {
+#map[data-v-4c5385a2]:focus {
   outline: none;
 }
   /* Add styles for the user card component here */
@@ -2694,346 +2702,483 @@ input[data-v-cca87f09] {
   padding: 0.75rem 1.5rem;
   margin: 0;
 }
-.gantt-chart-container[data-v-6f6bbefe] {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  font-size: 14px;
+.gantt-bar {
+  max-height: 20px;
+  line-height: 20px;
 }
-.gantt-chart[data-v-6f6bbefe] {
-  position: relative;
+
+.gantt-container {
+  --cell-width: 60px;
   height: 500px;
-  overflow: auto;
-  border: 1px solid #eee;
-}
-.gantt-header[data-v-6f6bbefe] {
-  position: sticky;
-  top: 0;
-  z-index: 2;
-/*  background-color: #f8f9fa;*/
-/*  box-shadow: 0 2px 4px rgba(0,0,0,0.05);*/
-}
-.gantt-header-row[data-v-6f6bbefe] {
-  display: flex;
   position: relative;
 }
-.gantt-timeline-header[data-v-6f6bbefe] {
-  display: flex;
-  position: sticky;
-  left: 200px;
+.gantt-content {
+  width: fit-content;
+  min-width: 100%;
+}
+.gantt-header {
+  height: 60px;
 }
-.product-column[data-v-6f6bbefe] {
+.gantt-product-col {
   width: 200px;
   min-width: 200px;
-  position: sticky;
-  left: 0;
-/*  z-index: 1;*/
-  background-color: #f8f9fa;
-  border-right: 1px solid #eee;
-  padding: 8px;
+  flex-shrink: 0;
 }
-.gantt-header-cell[data-v-6f6bbefe] {
-  min-width: var(--cell-width, 60px);
-  width: var(--cell-width, 60px);
-  border-right: 1px solid #eee;
-  text-align: center;
-  padding: 8px 4px;
-  overflow: hidden;
+.gantt-timeline {
+  position: relative;
+  min-width: fit-content;
 }
-.gantt-header-cell.is-weekend[data-v-6f6bbefe] {
-  background-color: #f1f3f5;
+.gantt-cell {
+  min-width: var(--cell-width);
+  flex-shrink: 0;
 }
-.gantt-header-cell.is-today[data-v-6f6bbefe] {
-  background-color: #e3f2fd;
+.gantt-row {
+  position: relative;
 }
-.gantt-header-cell.is-month-start[data-v-6f6bbefe] {
-  border-left: 2px solid #adb5bd;
+.gantt-cells,
+.gantt-bars {
+  width: fit-content;
+  left: 0;
 }
-.date-label[data-v-6f6bbefe] {
+.round-stat {
+  padding: 1rem;
+  border-radius: 5rem;
+  width: 3rem;
+  height: 3rem;
   display: flex;
-  flex-direction: column;
+  justify-content: center;
   align-items: center;
+  border: 1px solid rgba(0, 0, 0, 0.1);
 }
-.month-label[data-v-6f6bbefe] {
-  font-weight: bold;
-  font-size: 12px;
+/* Progress Section */
+.progress-section[data-v-0bee7510] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   width: 100%;
 }
-.day-number[data-v-6f6bbefe] {
-  font-weight: bold;
-  font-size: 16px;
+.time-current[data-v-0bee7510],
+.time-total[data-v-0bee7510] {
+  font-size: 11px;
+  color: rgb(var(--grey));
+  font-weight: 400;
+  min-width: 32px;
+  text-align: center;
 }
-.day-name[data-v-6f6bbefe] {
-  font-size: 12px;
-  color: #6c757d;
+.progress-bar[data-v-0bee7510] {
+  flex: 1;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 0;
 }
-.gantt-body[data-v-6f6bbefe] {
+.progress-track[data-v-0bee7510] {
   position: relative;
+  width: 100%;
+  height: 4px;
+  background: rgb(79, 79, 79);
+  border-radius: 2px;
+  overflow: hidden;
+  transition: height 0.2s ease;
 }
-.gantt-row[data-v-6f6bbefe] {
-  display: flex;
-  border-bottom: 1px solid #eee;
+.progress-fill[data-v-0bee7510] {
+  height: 100%;
+  background: rgb(var(--white));
+  border-radius: 2px;
+  transition: width 0.1s ease;
 }
-.gantt-row.is-even .gantt-timeline-row[data-v-6f6bbefe] {
-   background-color: #f8f9fa;
+.progress-thumb[data-v-0bee7510] {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: rgb(var(--white));
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: opacity 0.2s ease;
 }
-.gantt-row-item[data-v-6f6bbefe] {
-  padding: 8px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+.progress-bar:hover .progress-thumb[data-v-0bee7510] {
+  opacity: 1;
 }
-.product-title[data-v-6f6bbefe] {
-  font-weight: bold;
-  margin-bottom: 4px;
-  text-wrap-mode: nowrap;
+.progress-bar:hover .progress-track[data-v-0bee7510] {
+  height: 6px;
+}
+.progress-bar:hover .progress-fill[data-v-0bee7510] {
+  background: rgb(var(--main));
+}
+
+.volume-control[data-v-a6e8eccb] {
   width: 100%;
-  overflow: hidden;
 }
-.product-status[data-v-6f6bbefe] {
-  font-size: 12px;
-  padding: 2px 6px;
-  border-radius: 4px;
-  display: inline-block;
+.volume-bar-container[data-v-a6e8eccb] {
+  width: 100%;
+  height: 12px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px 0;
 }
-.status-active[data-v-6f6bbefe] {
-  background-color: #d1e7dd;
-  color: #0f5132;
+.volume-track[data-v-a6e8eccb] {
+  position: relative;
+  width: 100%;
+  height: 4px;
+  border-radius: 2px;
+  transition: height 0.2s ease;
 }
-.status-completed[data-v-6f6bbefe] {
-  background-color: #cff4fc;
-  color: #055160;
+.volume-thumb[data-v-a6e8eccb] {
+  position: absolute;
+  top: 50%;
+  width: 12px;
+  height: 12px;
+  background: rgb(var(--white));
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.2s ease;
+  opacity: 0;
 }
-.status-canceled[data-v-6f6bbefe] {
-  background-color: #f8d7da;
-  color: #842029;
+.volume-bar-container:hover .volume-track[data-v-a6e8eccb] {
+  height: 6px;
 }
-.status-default[data-v-6f6bbefe] {
-  background-color: #e2e3e5;
-  color: #41464b;
+.volume-bar-container:hover .volume-thumb[data-v-a6e8eccb] {
+  opacity: 1 !important;
 }
-.gantt-timeline-row[data-v-6f6bbefe] {
-  display: flex;
-  position: relative;
-  height: 60px;
-  flex-grow: 1;
+
+/* Muted state */
+.volume-track.muted[data-v-a6e8eccb] {
+  opacity: 0.5;
 }
-.gantt-cell[data-v-6f6bbefe] {
-  min-width: var(--cell-width, 60px);
-  width: var(--cell-width, 60px);
-  border-right: 1px solid #eee;
-  height: 100%;
+
+.player-container[data-v-8c2c90fa] {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: linear-gradient(135deg, rgb(24, 24, 24) 0%, rgb(18, 18, 18) 100%);
+  border-top: 1px solid rgb(40, 40, 40);
+  backdrop-filter: blur(10px);
 }
-.gantt-cell.is-weekend[data-v-6f6bbefe] {
-  background-color: #f1f3f5;
+.player[data-v-8c2c90fa] {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  align-items: center;
+  padding: 12px 16px;
+  gap: 16px;
+  height: 90px;
+  max-width: 100%;
 }
-.gantt-cell.is-today[data-v-6f6bbefe] {
-  background-color: #e3f2fd;
+
+/* Track Info Section */
+.track-info[data-v-8c2c90fa] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
 }
-.gantt-bar[data-v-6f6bbefe] {
-  position: absolute;
-  height: 40px;
-  top: 10px;
+.track-image[data-v-8c2c90fa] {
+  width: 56px;
+  height: 56px;
   border-radius: 4px;
-  background-color: #4dabf7;
-  color: white;
-  cursor: pointer;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 4px 8px;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-  transition: box-shadow 0.2s, transform 0.1s;
+  flex-shrink: 0;
 }
-.gantt-bar[data-v-6f6bbefe]:hover {
-  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-  transform: translateY(-2px);
+.track-image-media[data-v-8c2c90fa] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
 }
-.gantt-bar-active[data-v-6f6bbefe] {
-  background-color: #4dabf7;
+.track-image:hover .track-image-media[data-v-8c2c90fa] {
+  transform: scale(1.05);
 }
-.gantt-bar-completed[data-v-6f6bbefe] {
-  background-color: #20c997;
+.track-details[data-v-8c2c90fa] {
+  min-width: 0;
+  flex: 1;
 }
-.gantt-bar-canceled[data-v-6f6bbefe] {
-  background-color: #fa5252;
-  text-decoration: line-through;
+.track-title[data-v-8c2c90fa] {
+  font-size: 14px;
+  font-weight: 600;
+  color: rgb(var(--white));
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
 }
-.gantt-bar-label[data-v-6f6bbefe] {
+.track-artist[data-v-8c2c90fa] {
   font-size: 12px;
-  font-weight: bold;
+  color: rgb(var(--grey));
+  margin: 2px 0 0 0;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.view-controls button[data-v-6f6bbefe], 
-.date-controls button[data-v-6f6bbefe],
-.date-controls select[data-v-6f6bbefe] {
-  border: 1px solid #dee2e6;
-  background-color: white;
+.like-btn[data-v-8c2c90fa] {
+  background: none;
+  border: none;
+  color: rgb(var(--grey));
   cursor: pointer;
-  transition: background-color 0.2s;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.view-controls button[data-v-6f6bbefe]:hover, 
-.date-controls button[data-v-6f6bbefe]:hover,
-.date-controls select[data-v-6f6bbefe]:hover {
-  background-color: #e9ecef;
+.like-icon[data-v-8c2c90fa] {
+  width: 16px;
+  height: 16px;
+}
+.like-btn[data-v-8c2c90fa]:hover {
+  color: rgb(var(--white));
+  background: rgba(255, 255, 255, 0.1);
+}
+.like-btn.liked[data-v-8c2c90fa] {
+  color: rgb(var(--main));
+}
+.like-btn.liked .like-icon[data-v-8c2c90fa] {
+  fill: rgb(var(--main));
 }
-.flex-v-center[data-v-6f6bbefe] {
+.like-btn.liked[data-v-8c2c90fa]:hover {
+  color: rgb(var(--main));
+  opacity: 0.8;
+}
+
+/* Controls Section */
+.controls[data-v-8c2c90fa] {
   display: flex;
+  flex-direction: column;
   align-items: center;
+  gap: 8px;
+  width: 100%;
 }
-
-/* Set cell width based on current view */
-[data-v-6f6bbefe]:root {
-  --cell-width: var(--2f86075a);
+.control-buttons[data-v-8c2c90fa] {
+  display: flex;
+  align-items: center;
+  gap: 16px;
 }
-.round-stat {
-  padding: 1rem;
-  border-radius: 5rem;
-  width: 3rem;
-  height: 3rem;
+.control-btn[data-v-8c2c90fa] {
+  background: none;
+  border: none;
+  color: rgb(var(--grey));
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
   display: flex;
-  justify-content: center;
   align-items: center;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  justify-content: center;
 }
-.progress-bar-container:hover .progress-bar[data-v-4326ac71] {
-  background-color: rgb(var(--main));
+.control-icon[data-v-8c2c90fa] {
+  width: 16px;
+  height: 16px;
 }
-.progress-handle[data-v-4326ac71] {
-  display: none;
+.control-btn.primary[data-v-8c2c90fa] {
+  background: rgb(var(--white));
+  color: rgb(var(--black));
+  width: 32px;
+  height: 32px;
 }
-.progress-bar-container:hover .progress-handle[data-v-4326ac71] {
-  display: block;
-  transform: translateY(-50%) scale(1.3);
+.play-icon[data-v-8c2c90fa] {
+  width: 14px;
+  height: 14px;
+  fill: rgb(var(--black));
 }
-
-.volume-bar-container:hover .volume-bar[data-v-08586594]:not(.muted) {
-  background-color: rgb(var(--main));
+.control-btn.primary[data-v-8c2c90fa]:hover {
+  background: rgb(240, 240, 240);
+  transform: scale(1.06);
 }
-.volume-handle[data-v-08586594] {
-  display: none;
+.control-btn.secondary[data-v-8c2c90fa]:hover {
+  color: rgb(var(--white));
+  background: rgba(255, 255, 255, 0.1);
 }
-.volume-bar-container:hover .volume-handle[data-v-08586594] {
-  display: block;
+.control-btn.secondary:hover .control-icon[data-v-8c2c90fa] {
+  fill: rgb(var(--white));
 }
-.muted[data-v-08586594] {
-  opacity: 0.5;
+.control-btn.active[data-v-8c2c90fa] {
+  color: rgb(var(--main));
+}
+.control-btn.active .control-icon[data-v-8c2c90fa] {
+  fill: rgb(var(--main));
+}
+.control-btn.active[data-v-8c2c90fa]:hover {
+  color: rgb(var(--main));
+  opacity: 0.8;
 }
 
-.play-pause-btn[data-v-f19b93ab] {
-  width: 32px;
-  height: 32px;
-  transition: transform 0.2s ease;
+/* Progress Section */
+.progress-section[data-v-8c2c90fa] {
+  width: 100%;
+  max-width: 600px;
 }
-.play-pause-btn[data-v-f19b93ab]:hover {
-  transform: scale(1.1);
+
+/* Volume Section */
+.volume-section[data-v-8c2c90fa] {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  justify-content: flex-end;
+}
+.volume-btn[data-v-8c2c90fa] {
+  background: none;
+  border: none;
+  color: rgb(var(--grey));
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.volume-icon[data-v-8c2c90fa] {
+  width: 16px;
+  height: 16px;
+}
+.volume-btn[data-v-8c2c90fa]:hover {
+  color: rgb(var(--white));
+  background: rgba(255, 255, 255, 0.1);
+}
+.volume-btn:hover .volume-icon[data-v-8c2c90fa] {
+  fill: rgb(var(--white));
+}
+.volume-slider[data-v-8c2c90fa] {
+  width: 100px;
 }
 
-.search-form[data-v-5d37fb17] {
-  transition: background-color 0.2s ease;
+/* Responsive Design */
+@media (max-width: 768px) {
+.player[data-v-8c2c90fa] {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto auto auto;
+    height: auto;
+    padding: 8px 12px 12px;
+    gap: 12px;
+}
+.track-info[data-v-8c2c90fa] {
+    order: 1;
 }
-.search-form[data-v-5d37fb17]:focus-within {
-  background-color: rgba(var(--dark), 0.8);
+.controls[data-v-8c2c90fa] {
+    order: 2;
 }
-input[data-v-5d37fb17]::placeholder {
-  color: rgba(var(--grey), 0.8);
+.volume-section[data-v-8c2c90fa] {
+    order: 3;
+    justify-content: center;
+}
+.volume-slider[data-v-8c2c90fa] {
+    width: 120px;
+}
+.progress-section[data-v-8c2c90fa] {
+    max-width: 100%;
 }
-input[data-v-5d37fb17]:focus {
-  outline: none;
 }
 
-.track-card[data-v-4db48be7] {
-  transition: background-color 0.3s ease;
+/* Animations */
+@keyframes fadeIn-8c2c90fa {
+from {
+    opacity: 0;
+    transform: translateY(20px);
 }
-.track-card[data-v-4db48be7]:hover {
-  background-color: rgba(var(--dark), 0.4);
+to {
+    opacity: 1;
+    transform: translateY(0);
 }
-.track-play[data-v-4db48be7] {
-  opacity: 0;
-  transition: opacity 0.3s ease;
 }
-.track-card:hover .track-play[data-v-4db48be7] {
-  opacity: 1;
+.player-container[data-v-8c2c90fa] {
+  animation: fadeIn-8c2c90fa 0.3s ease-out;
 }
-.play-button[data-v-4db48be7] {
-  transform: scale(0.8);
-  transition: transform 0.3s ease;
+@keyframes pulse-8c2c90fa {
+0% {
+    transform: scale(1);
 }
-.track-card:hover .play-button[data-v-4db48be7] {
-  transform: scale(1);
+50% {
+    transform: scale(1.05);
+}
+100% {
+    transform: scale(1);
+}
+}
+.control-btn.primary[data-v-8c2c90fa]:active {
+  animation: pulse-8c2c90fa 0.3s ease;
 }
 
-.album-card[data-v-6163e3e6] {
+.album-card[data-v-faf7f060] {
   transition: transform 0.3s ease;
 }
-.album-card[data-v-6163e3e6]:hover {
+.album-card[data-v-faf7f060]:hover {
   transform: translateY(-5px);
 }
-.album-overlay[data-v-6163e3e6] {
+.album-overlay[data-v-faf7f060] {
   background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
-.album-card:hover .album-overlay[data-v-6163e3e6] {
+.album-card:hover .album-overlay[data-v-faf7f060] {
   opacity: 1;
 }
-.play-button[data-v-6163e3e6] {
-  width: 48px;
-  height: 48px;
+.play-button[data-v-faf7f060] {
   transform: scale(0.8);
   transition: transform 0.3s ease;
 }
-.album-card:hover .play-button[data-v-6163e3e6] {
+.album-card:hover .play-button[data-v-faf7f060] {
   transform: scale(1);
 }
 
-.album-cover[data-v-ecbc3f9a] {
-  box-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
-}
-
-.playlist-card[data-v-238f47e7] {
+.playlist-card[data-v-be2a71af] {
   transition: transform 0.3s ease;
 }
-.playlist-card[data-v-238f47e7]:hover {
+.playlist-card[data-v-be2a71af]:hover {
   transform: translateY(-5px);
 }
-.playlist-overlay[data-v-238f47e7] {
+.playlist-overlay[data-v-be2a71af] {
   background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity 0.3s ease;
 }
-.playlist-card:hover .playlist-overlay[data-v-238f47e7] {
+.playlist-card:hover .playlist-overlay[data-v-be2a71af] {
   opacity: 1;
 }
-.play-button[data-v-238f47e7] {
+.play-button[data-v-be2a71af] {
   width: 48px;
   height: 48px;
   transform: scale(0.8);
   transition: transform 0.3s ease;
 }
-.playlist-card:hover .play-button[data-v-238f47e7] {
+.playlist-card:hover .play-button[data-v-be2a71af] {
   transform: scale(1);
 }
 
-.artist-card[data-v-c2372a41] {
+.artist-card[data-v-648ab17c] {
   border: 1px solid rgba(var(--grey), 0.2);
   transition: transform 0.2s ease;
 }
-.hover-scale-1[data-v-c2372a41]:hover {
+.hover-scale-1[data-v-648ab17c]:hover {
   transform: scale(1.02);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.bg-gradient-dark[data-v-14a77aad] {
+.bg-gradient-dark[data-v-82023828] {
   background: linear-gradient(to bottom, rgba(var(--dark), 0.8), rgba(var(--black), 0.9));
 }
 
-.bg-gradient-color[data-v-d2f0de62] {
-    background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));
+.bg-gradient-color[data-v-464383f0] {
+  background: var(--gradient-color, linear-gradient(135deg, #1DB954, #1ED760));
+}
+
+.search-form[data-v-405341b8] {
+  transition: background-color 0.2s ease;
 }
-  
+.search-form[data-v-405341b8]:focus-within {
+  background-color: rgba(var(--dark), 0.8);
+}
+input[data-v-405341b8]::placeholder {
+  color: rgba(var(--grey), 0.8);
+}
+input[data-v-405341b8]:focus {
+  outline: none;
+}
+
 .notifications-list-container[data-v-5af8a2ed] {
   width: 100%;
   max-width: 800px;