body { font-family: system-ui, Arial; background:#111; color:#eee; margin:0; }
.wrap { max-width: 720px; margin: 24px auto; padding: 0 16px; }
h1 { font-size: 22px; margin: 0 0 12px; }
a { color:#9bd; }
.card { background:#1b1b1b; border:1px solid #2a2a2a; border-radius:12px; padding:14px; margin: 12px 0; }
.controls { display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap: wrap; }
button { background:#3a2a3a; color:#fff; border:0; border-radius:10px; padding:10px 12px; cursor:pointer; }
button:disabled { opacity:.5; cursor:not-allowed; }

input[type="text"]{
  width: 100%; padding: 10px; border-radius:10px; border:1px solid #333;
  background:#111; color:#fff; margin: 8px 0;
}

.small { opacity:.7; font-size: 12px; }
.badge { display:inline-block; font-size:12px; padding:4px 8px; border-radius:999px; background:#2a2a2a; }

.history { margin-top: 10px; display:flex; flex-direction:column; gap:6px; }

/* --- "Audio slicer" UI --- */
.audio-shell {
  background:#101010;
  border:1px solid #2a2a2a;
  border-radius:12px;
  padding:12px;
  margin-bottom:10px;
}
.audio-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.audio-label { font-size:12px; opacity:.75; }

.audio-bar {
  height:10px;
  border-radius:999px;
  background:#2a2a2a;
  overflow:hidden;
  position:relative;
}
.audio-bar::after {
  content:"";
  position:absolute;
  inset:0;
  width: var(--p, 0%);
  background:#8fd;
}

/* Volume */
.vol {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.85;
}
.vol input[type="range"]{
  width: 140px;
  accent-color: #8fd;
}

/* --- Hide YouTube video but keep it playable --- */
#yt-host {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0.001;      /* not display:none */
  pointer-events:none;
}