.media-player[hidden]{display:none}.media-player{position:fixed;right:1rem;bottom:max(1rem,env(safe-area-inset-bottom));width:min(420px,calc(100vw - 2rem));z-index:30;background:#062e27;color:#fff;border:1px solid #478173;border-radius:16px;padding:1rem;box-shadow:0 10px 40px #0005}.media-player video{width:100%;max-height:32vh;background:#000;display:block;border-radius:8px;margin:.7rem 0}.media-player.audio-player video{height:54px;background:transparent}.media-player.collapsed video{height:0;margin:0;overflow:hidden}.player-heading{display:flex;align-items:start;justify-content:space-between;gap:.75rem}.player-heading strong{overflow-wrap:anywhere;min-width:0}.player-heading>div{display:flex;gap:.5rem;flex-shrink:0}.media-player button,.media-player select{font:inherit;font-size:.875rem;padding:.55rem;border:1px solid #93b8ab;border-radius:7px;background:#fff;color:#063a2d;cursor:pointer;min-height:40px}.player-options{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}.media-player p{color:#e0f0e9;font-size:.875rem;margin:.5rem 0 0}.media-player p:empty{display:none}.has-player{padding-bottom:170px}.upload-panel{margin-top:1.5rem}.upload-panel form{display:grid;gap:1rem}.upload-panel progress{width:100%}.taleem-card button.button{border:0;font:inherit;cursor:pointer}.media-player.collapsed{width:min(420px,calc(100vw - 2rem))}@media(max-width:500px){.media-player{right:.75rem;width:calc(100vw - 1.5rem);padding:.8rem}.player-heading{flex-wrap:wrap}}

[data-file-fields][hidden],[data-youtube-fields][hidden],.media-player iframe[hidden],.media-player video[hidden],.media-player .player-options[hidden],.media-player button[hidden]{display:none!important}.media-player iframe{width:100%;height:236px;min-height:200px;border:0;margin:.7rem 0;background:#000}.media-player [data-youtube-link]{display:none;color:white;padding:.5rem 0}.media-player.youtube-player [data-youtube-link]{display:block}.save-results{max-height:18rem;overflow:auto;padding-left:1.4rem;overflow-wrap:anywhere}.admin-form progress{width:100%}.admin-form input[type=file]{max-width:100%;font:inherit}

.saved-recording{margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:10px;background:#f3f7f5}.saved-recording audio,.saved-recording video{width:100%;max-height:340px}.delete-link{color:#a12720;margin-left:.75rem}.danger-button{background:#a12720;color:white;border:0;border-radius:8px;min-height:48px;padding:.75rem 1rem;font:inherit;cursor:pointer}

/* PREMIUM PLAYER V13 START */

.media-player[hidden],
.media-player [hidden] {
  display: none !important;
}

.media-player.px-player {
  position: fixed;
  z-index: 500;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom, 18px));
  width: min(520px, calc(100vw - 36px));
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(13, 62, 48, 0.16);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.985);
  color: #123d32;
  box-shadow:
    0 28px 70px rgba(5, 40, 31, 0.24),
    0 5px 18px rgba(5, 40, 31, 0.1);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  transition:
    width 180ms ease,
    transform 180ms ease;
}

.px-player-header {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 69px;
  padding: 11px 13px;
  border-bottom: 1px solid #e0e7e1;
  background:
    linear-gradient(135deg, #f8faf7, #eff5eb);
}

.px-player-symbol {
  display: grid;
  place-items: center;
  width: 41px;
  height: 41px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #0a503e;
  color: #e0f2a9;
}

.px-player-symbol svg {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.px-player-heading {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.px-player-heading small {
  color: #6b8075;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.11em;
}

.px-player-heading strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-player-heading > span {
  overflow: hidden;
  color: #6a7a72;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-player-window-actions {
  display: flex;
  gap: 5px;
  flex: 0 0 auto;
}

.media-player .px-player-icon-button {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  min-height: 35px;
  padding: 0;
  border: 1px solid #dbe4dc;
  border-radius: 10px;
  background: #fff;
  color: #315a4c;
}

.px-player-icon-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.px-player-body {
  background: #081f19;
}

.media-player video {
  display: block;
  width: 100%;
  max-height: min(52vh, 380px);
  margin: 0;
  border-radius: 0;
  background: #020806;
  object-fit: contain;
  aspect-ratio: 16 / 9;
}

.media-player audio {
  display: block;
  width: calc(100% - 24px);
  height: 48px;
  margin: 0 12px 13px;
}

.px-youtube-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #020806;
}

.px-youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  border: 0;
}

.px-audio-visual {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 122px;
  padding: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 15%, rgba(202, 232, 132, 0.2), transparent 115px),
    linear-gradient(135deg, #073d30, #0d5a44);
  color: white;
}

.px-audio-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(255,255,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.2) 1px, transparent 1px);
  background-size: 24px 24px;
}

.px-audio-disc,
.px-audio-copy,
.px-sound-bars {
  position: relative;
  z-index: 1;
}

.px-audio-disc {
  display: grid;
  place-items: center;
  width: 57px;
  height: 57px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #dcf0a6;
  color: #074432;
  box-shadow: 0 9px 25px rgba(0,0,0,0.17);
}

.px-audio-disc svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.px-audio-copy {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 5px;
}

.px-audio-copy small {
  color: #cfe0d3;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.px-audio-copy strong {
  overflow: hidden;
  font-size: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.px-sound-bars {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 38px;
}

.px-sound-bars i {
  display: block;
  width: 4px;
  border-radius: 999px;
  background: #d9ef99;
}

.px-sound-bars i:nth-child(1) { height: 13px; }
.px-sound-bars i:nth-child(2) { height: 28px; }
.px-sound-bars i:nth-child(3) { height: 20px; }
.px-sound-bars i:nth-child(4) { height: 35px; }
.px-sound-bars i:nth-child(5) { height: 17px; }

.px-player.is-playing .px-sound-bars i {
  animation: pxSound 850ms ease-in-out infinite alternate;
}

.px-player.is-playing .px-sound-bars i:nth-child(2) {
  animation-delay: -250ms;
}

.px-player.is-playing .px-sound-bars i:nth-child(3) {
  animation-delay: -500ms;
}

.px-player.is-playing .px-sound-bars i:nth-child(4) {
  animation-delay: -150ms;
}

@keyframes pxSound {
  to {
    height: 8px;
    opacity: 0.55;
  }
}

.px-youtube-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 39px;
  padding: 8px 12px;
  background: #0b392e;
  color: #e9f5e9 !important;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
}

.px-player-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 9px 12px;
  background: #fff;
}

.media-player .px-player-controls button,
.media-player .px-player-controls select {
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid #d8e2da;
  border-radius: 10px;
  background: #f5f8f3;
  color: #153f33;
  font-size: 11px;
  font-weight: 650;
}

.media-player .px-player-controls > button:first-child {
  border-color: #0a4a39;
  background: #0a4a39;
  color: white;
}

.px-player-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #667a70;
  font-size: 9px;
}

.px-player-controls p {
  min-width: 0;
  flex: 1;
  margin: 0;
  color: #6b7d74;
  font-size: 9px;
  line-height: 1.35;
  text-align: right;
}

.px-player-controls p:empty {
  display: none;
}

.media-player.px-player.collapsed {
  width: min(370px, calc(100vw - 28px));
}

.media-player.collapsed .px-player-body,
.media-player.collapsed .px-player-controls {
  display: none !important;
}

.media-player.collapsed .px-player-header {
  border-bottom: 0;
}

.media-player.collapsed [data-player-collapse] svg {
  transform: rotate(180deg);
}

body.has-player {
  padding-bottom: 92px;
}

@media (max-width: 720px) {
  .media-player.px-player {
    right: 10px;
    bottom: calc(75px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 20px);
    border-radius: 17px;
  }

  .media-player.px-player.collapsed {
    width: calc(100vw - 20px);
  }

  .px-player-header {
    min-height: 62px;
    padding: 9px 10px;
  }

  .px-player-symbol {
    width: 38px;
    height: 38px;
  }

  .px-player-heading strong {
    font-size: 13px;
  }

  .px-audio-visual {
    min-height: 105px;
    padding: 16px;
  }

  .px-player-controls {
    flex-wrap: wrap;
  }

  .px-player-controls p {
    width: 100%;
    flex-basis: 100%;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .px-player.is-playing .px-sound-bars i {
    animation: none;
  }
}

/* Preserve existing upload/admin media helpers */

[data-file-fields][hidden],
[data-youtube-fields][hidden],
.media-player button[hidden] {
  display: none !important;
}

.upload-panel {
  margin-top: 1.5rem;
}

.upload-panel form {
  display: grid;
  gap: 1rem;
}

.upload-panel progress,
.admin-form progress {
  width: 100%;
}

.admin-form input[type="file"] {
  max-width: 100%;
  font: inherit;
}

.saved-recording {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f3f7f5;
}

.saved-recording audio,
.saved-recording video {
  width: 100%;
  max-height: 340px;
}

.delete-link {
  margin-left: 0.75rem;
  color: #a12720;
}

.danger-button {
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 8px;
  background: #a12720;
  color: white;
  font: inherit;
  cursor: pointer;
}

/* PREMIUM PLAYER V13 END */