body { --rap-cyan: #00e9e9; }
.rap-player {
  position: relative;
  width: min(100%, 500px);
  margin: 1.5rem auto;
  padding: 0 0 1px;
  color: #080808;
  background: #111;
  box-shadow: 0 25px 22px -20px rgba(0,0,0,.7);
  box-sizing: border-box;
  font-family: Roboto, Arial, sans-serif;
  overflow: hidden;
}
.rap-player * { box-sizing: border-box; }
.rap-header {
  height: 54px;
  padding: 18px 30px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  color: #050505;
  font-size: 18px;
}
.rap-menu, .rap-brand { line-height: 1; font-weight: 700; }
.rap-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 32px 12px;
  min-height: 190px;
}
.rap-art {
  width: 176px;
  height: 176px;
  flex: 0 1 176px;
  min-width: 0;
  padding: 8px;
  background: #050505;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.rap-art img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
.rap-record {
  width: 100%; height: 100%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #171717 0 3px, #242424 4px 5px, #0b0b0b 6px 8px);
  display: grid; place-items: center; color: #00dede; font-size: 35px;
  border: 1px solid #292929;
}
.rap-record span { width: 54px; height: 54px; border-radius: 50%; background: #101010; display:grid; place-items:center; border: 1px solid #333; }
.rap-controls {
  position: relative;
  width: 178px; height: 178px; flex: 0 0 178px;
  border-radius: 50%;
  background: linear-gradient(0deg, #222, #111);
  border: 2px solid #050505;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.15), 0 4px 2px rgba(0,0,0,.25);
}
.rap-control {
  position: absolute; display: grid; place-items: center; padding: 0;
  color: #030303; background: transparent; border: 0; cursor: pointer;
  transition: color .18s ease, filter .18s ease;
}
.rap-control svg { width: 20px; height: 20px; fill: currentColor; }
.rap-control:hover, .rap-control:focus-visible { color: var(--rap-cyan); filter: drop-shadow(0 0 3px var(--rap-cyan)); outline: none; }
.rap-toggle {
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 90px; height: 90px; border-radius: 50%;
  border: 2px solid #050505;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.15), 0 0 8px rgba(0,0,0,.6);
  background: linear-gradient(0deg,#111,#222);
}
.rap-toggle svg { width: 24px; height: 24px; }
.rap-repeat { top: 7%; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; }
.rap-prev { top: 50%; left: 5%; transform: translateY(-50%); width: 30px; height: 30px; }
.rap-next { top: 50%; right: 4%; transform: translateY(-50%); width: 30px; height: 30px; }
.rap-shuffle { bottom: 4%; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; }
.rap-control.is-active { color: var(--rap-cyan); }
.rap-footer { padding: 12px 32px 22px; color: #999; text-shadow: 1px 1px #111; }
.rap-title { text-align: center; padding: 0 0 8px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.rap-tracker {
  display: flex; align-items: center; gap: 9px; padding-top: 8px;
  border-top: 1px solid #050505; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.rap-seek {
  appearance: none; -webkit-appearance: none; flex: 1; width: 1%; height: 8px;
  border-radius: 10px; cursor: pointer; background: #080808;
  border: 1px solid #333; box-shadow: inset 0 -1px 1px rgba(255,255,255,.18);
  accent-color: var(--rap-cyan);
}
.rap-seek::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none; width: 10%; min-width: 8px; max-width: 45px; height: 6px;
  border-radius: 8px; background: var(--rap-cyan); box-shadow: 0 0 3px var(--rap-cyan);
}
.rap-seek::-moz-range-thumb { width: 10%; min-width: 8px; max-width: 45px; height: 6px; border: 0; border-radius: 8px; background: var(--rap-cyan); box-shadow: 0 0 3px var(--rap-cyan); }
.rap-time { flex: 0 0 auto; font-size: 14px; line-height: 2rem; white-space: nowrap; text-shadow: none; }
.rap-native-audio { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; }
.rap-error .rap-time { color: #ff8d8d; font-size: 12px; }
.rap-shuffle-hint .rap-shuffle { color: var(--rap-cyan); }
@media (max-width: 480px) {
  .rap-main { padding: 8px 18px 10px; gap: 10px; min-height: 0; }
  .rap-header { padding-left: 18px; padding-right: 18px; }
  .rap-art { width: min(38vw, 145px); height: min(38vw, 145px); flex-basis: min(38vw, 145px); padding: 6px; }
  .rap-controls { width: min(39vw, 150px); height: min(39vw, 150px); flex-basis: min(39vw, 150px); }
  .rap-toggle { width: 51%; height: 51%; }
  .rap-control svg { width: 17px; height: 17px; }
  .rap-toggle svg { width: 22px; height: 22px; }
  .rap-footer { padding: 10px 18px 18px; }
  .rap-time { font-size: 12px; }
}

/* Force LTR layout for player internals regardless of theme direction (RTL-safe) */
.rap-player,
.rap-player * { direction: ltr !important; }
.rap-seek,
.rap-tracker { direction: ltr !important; }