.tape-player{
  width:100%;
  max-width:440px;
  aspect-ratio:2 / 3;
  background:#eee;
  position:relative;
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.tape-player[data-ratio="3:2"]{ aspect-ratio:3 / 2; }

.tape-deck{ position:relative; width:100%; height:62%; }
.tape-overlay{ position:absolute; inset:0; pointer-events:none; }
.tape-thumb{ position:absolute; inset:0; background-size:cover; background-position:center; }

.tape-now{ padding:10px 12px 2px; text-align:center; }
.tape-now-title{ font-size:16px; font-weight:600; line-height:1.2; min-height:20px; }
.tape-now-artist{ font-size:12px; opacity:.75; min-height:16px; }

.tape-progress{ display:flex; align-items:center; gap:8px; padding:6px 12px 8px; }
.tape-time{ font-size:12px; width:44px; text-align:center; opacity:.75; }
.tape-seek{ flex:1; }

.tape-controls{ display:flex; justify-content:space-around; align-items:center; padding:10px 10px 14px; }
.tape-controls button{ border:0; background:transparent; font-size:18px; cursor:pointer; opacity:.9; }
.tape-controls button.is-on{ opacity:1; transform:scale(1.05); }

.tape-popup-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:20; }

.tape-popup{
  position:absolute; left:12px; right:12px; bottom:12px;
  max-height:60%; background:#fff; border-radius:14px;
  box-shadow:0 12px 35px rgba(0,0,0,.25);
  z-index:30; overflow:hidden;
}
.tape-popup-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08); }
.tape-popup-title{ font-weight:600; }
.tape-popup-close{ border:0; background:transparent; font-size:16px; cursor:pointer; }
.tape-popup-body{ overflow:auto; max-height:calc(60vh - 52px); }

.tape-list-item{ padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.06); cursor:pointer; }
.tape-list-item.is-active{ background:rgba(0,0,0,.06); }
.tape-list-title{ font-weight:600; font-size:14px; }
.tape-list-artist{ font-size:12px; opacity:.75; }

.tape-timer-body{ padding:12px; display:grid; gap:10px; }
.tape-timer-btn, .tape-timer-apply, .tape-timer-cancel{
  padding:10px 12px; border:1px solid rgba(0,0,0,.12);
  background:#fff; border-radius:10px; cursor:pointer;
}
.tape-timer-custom-row{ display:flex; gap:8px; }
.tape-timer-custom{
  flex:1; padding:10px 12px; border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
}


/* v0.4 timer + mini controller */
.tape-timer-badge{
  font-size:12px;
  padding:3px 6px;
  border-radius:999px;
  background:rgba(0,0,0,.12);
  line-height:1;
  opacity:.85;
}

.tape-timer-row{ display:flex; gap:8px; flex-wrap:wrap; }
.tape-timer-remaining{
  font-size:12px;
  opacity:.8;
  padding:2px 2px;
}

.tape-mini{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  max-width:440px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.tape-mini-btn{
  border:0;
  background:rgba(0,0,0,.06);
  border-radius:12px;
  padding:10px 12px;
  font-size:16px;
  cursor:pointer;
}

.tape-mini-meta{ flex:1; min-width:0; }
.tape-mini-title{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tape-mini-artist{ font-size:12px; opacity:.75; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tape-mini-status{ font-size:12px; opacity:.65; margin-top:2px; }
.tape-mini-right{ display:flex; align-items:center; gap:8px; }
.tape-mini-timer{ font-size:12px; opacity:.85; }

/* v0.4.3 play/pause single-SVG toggle */
.tape-pp-svg{ display:inline-block; vertical-align:middle; }
.tape-pp-stop{ display:none; }
.tape-player.is-playing .tape-pp-play{ display:none; }
.tape-player.is-playing .tape-pp-stop{ display:block; }
.tape-mini.is-playing .tape-pp-play{ display:none; }
.tape-mini.is-playing .tape-pp-stop{ display:block; }