@charset "utf-8";

@font-face {
font-family: 'Anaheim';
src: url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.woff2') format('woff2'), url('https://www.connexo.org/schrift/anaheim-v7-latin-regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}


@font-face {
font-family: 'Assistant';
src: url('https://www.connexo.org/schrift/assistant-v18-latin-800.woff2') format('woff2'),  url('https://www.connexo.org/schrift/assistant-v18-latin-800.woff') format('woff');
font-weight: 800;
font-style: normal;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Anaheim', sans-serif;
/* background: linear-gradient(135deg, #ccccdb 0%, #dbdbea 100%); */
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}


.player-container {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 100%;
}

h1 {
font-family: 'Assistant', sans-serif;
text-align: center;
color: #333;
margin-bottom: 30px;
font-size: 28px;
}

.now-playing {
text-align: center;
margin-bottom: 20px;
min-height: 60px;
}

.track-title {
font-size: 18px;
font-weight: bold;
color: #667eea;
margin-bottom: 5px;
}

.track-info {
font-size: 14px;
color: #666;
}

.progress-container {
margin: 20px 0;
}

.progress-bar {
width: 100%;
height: 6px;
background: #e0e0e0;
border-radius: 3px;
cursor: pointer;
position: relative;
}

.progress {
height: 100%;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 3px;
width: 0%;
transition: width 0.1s;
}

.time-display {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #666;
margin-top: 5px;
}

.controls {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin: 30px 0;
}

.control-btn {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border-radius: 50%;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
  box-sizing: border-box;
  color: #3c4043;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: "Assistant",Roboto,Arial,sans-serif;
  font-size: 20px;
  font-weight: 800;
  height: 48px;
  justify-content: center;
  letter-spacing: .25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 48px;
  will-change: transform,opacity;
  z-index: 0;
}

.control-btn:hover {
  background: #F6F9FE;
  color: #174ea6;
}

.control-btn:active {
  box-shadow: 0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%);
  outline: none;
}

.control-btn:focus {
  outline: none;
  border: 2px solid #4285f4;
}

.button-17:not(:disabled) {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.control-btn:not(:disabled):hover {
  box-shadow: rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px;
}

.control-btn:not(:disabled):focus {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.control-btn:not(:disabled):active {
  box-shadow: rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px;
}

.control-btn:disabled {
  box-shadow: rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px;
}

.play-pause-btn {
  align-items: center;
  appearance: none;
  background-color: #fff;
  border-radius: 50%;
  border-style: none;
  box-shadow: rgba(0, 0, 0, .2) 0 3px 5px -1px,rgba(0, 0, 0, .14) 0 6px 10px 0,rgba(0, 0, 0, .12) 0 1px 18px 0;
  box-sizing: border-box;
  color: #3c4043;
  cursor: pointer;
  display: inline-flex;
  fill: currentcolor;
  font-family: "Assistant",Roboto,Arial,sans-serif;
  font-size: 20px;
  font-weight: 800;
  height: 70px;
  justify-content: center;
  letter-spacing: .25px;
  line-height: normal;
  max-width: 100%;
  overflow: visible;
  padding: 2px 24px;
  position: relative;
  text-align: center;
  text-transform: none;
  transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1),opacity 15ms linear 30ms,transform 270ms cubic-bezier(0, 0, .2, 1) 0ms;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: 70px;
  will-change: transform,opacity;
  z-index: 0;
}

.playlist {
max-height: 300px;
overflow-y: auto;
margin-top: 20px;
border-top: 2px solid #e0e0e0;
padding-top: 20px;
}

.playlist-item {
padding: 12px;
margin: 5px 0;
background: #f5f5f5;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 10px;
}

.playlist-item:hover {
background: #e8e8e8;
transform: translateX(5px);
}

.playlist-item.active {
background: linear-gradient(135deg, #bbbbbb 0%, #9797a6 100%);
color: white;
}

.playlist-item-number {
font-weight: bold;
min-width: 30px;
}

.loop-indicator {
text-align: center;
margin-top: 15px;
font-size: 16px;
color: #575748;
}