:root{
  --bar-bg:#2b2b2b;
  --fg:#ffffff;
  --muted:#cfcfcf;
  --ghost:#3a3a3a;
  --line:#444;
  --accent:#ffffff;
  --radius:12px;
  --h:42px;
  --z-pop: 1000;
}

.np-tts-bar{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bar-bg);
  color:var(--fg);
  border-radius:var(--radius);
  padding:6px 10px 14px; /* timeline space */
  margin:0 0 16px 0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  /* fixed height feel (no layout jump) */
  min-height: calc(var(--h) + 14px);
}

.np-tts-left,.np-tts-center,.np-tts-right{ display:flex; align-items:center; }
.np-tts-left{ min-width:0; }
.np-tts-label{
  font-weight:600; color:#e9e9e9;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.np-tts-center{ gap:8px; margin-left:8px; }

.np-tts-ctrl{
  height:var(--h); min-width:var(--h);
  padding:0 10px; border:0; border-radius:50px;
  background:var(--ghost); color:var(--fg);
  cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:700;
  transition:filter .15s ease, transform .05s ease, background .15s ease;
}
.np-tts-ctrl:hover{ filter:brightness(1.1); }
.np-tts-ctrl:active{ transform:translateY(1px); }

.np-tts-play,.np-tts-pause,.np-tts-resume{
  background:#ffffff; color:#111111;
  width:var(--h); min-width:var(--h);
  border-radius:50%;
}
.np-tts-stop{ width:var(--h); min-width:var(--h); }
.np-tts-ctrl small{ font-size:10px; margin-left:4px; opacity:.85; font-weight:800; }

.np-tts-right{ gap:10px; margin-left:auto; }
.np-tts-time{
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  font-size:13px;
}

/* thin timeline under the bar */
.np-tts-timeline{
  position:absolute; left:10px; right:10px; bottom:7px;
  height:4px; border-radius:999px; background:var(--line); cursor:pointer;
}
.np-tts-timeline-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%;
  background:var(--accent); border-radius:999px;
}

/* SPEED POPOVER (absolute -> no height change) */
.np-tts-speed{ position:relative; }
.np-tts-speed-btn{ width:var(--h); min-width:var(--h); }

.np-tts-speed-pop{
  position:absolute; right:0; top:calc(100% + 8px);
  background:#1f1f1f; color:#fff;
  border:1px solid #333; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  padding:8px;
  display:none;  /* toggled via JS */
  z-index:var(--z-pop);
  min-width:140px;
}
.np-speed-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 4px; border-radius:8px;
}
.np-speed-row:hover{ background:#2a2a2a; }
.np-speed-row input{ accent-color:#fff; width:16px; height:16px; }
.np-speed-row label{ cursor:pointer; font-size:14px; }

.np-tts-speed.open .np-tts-speed-pop{ display:block; }

/* mobile */
@media (max-width:520px){
  .np-tts-label{ max-width:120px; }
  :root{ --h:38px; }
  .np-tts-ctrl{ font-size:16px; }
  .np-tts-ctrl small{ font-size:9px; }
  .np-tts-time{ font-size:12px; }
}