:root{
  --bg:#0b0f14; --panel:#0f1620; --text:#e6edf3; --muted:#9fb0c0;
  --line:#1f2a37; --btn:#162232; --btn2:#1a2f46; --accent:#67e8f9;
  --sel:rgba(103,232,249,.18);
}
*{box-sizing:border-box;}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--text);}
.wrap{max-width:980px; margin:0 auto; padding:20px 14px 40px;}
h1{font-size:18px; margin:6px 0 14px;}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0;}
button{
  background:var(--btn); color:var(--text); border:1px solid var(--line);
  padding:10px 12px; border-radius:12px; cursor:pointer; user-select:none;
}
button:hover{background:var(--btn2);}
button:disabled{opacity:.5; cursor:not-allowed;}
input[type="number"]{
  background:#0b1220; color:var(--text); border:1px solid var(--line);
  border-radius:12px; padding:10px 10px; width:130px;
}
input[type="range"]{width:240px;}
label{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px;}
audio{width:100%;}
.status{font-size:12px; color:var(--muted);}
a.dl{color:var(--accent); text-decoration:none; font-weight:600;}
.mono{font-size:12px; color:var(--muted);}
.progress{height:8px; background:#0b1220; border:1px solid var(--line); border-radius:999px; overflow:hidden; width:240px;}
.bar{height:100%; width:0%; background:var(--accent);}
.pill{font-size:12px; color:var(--muted); border:1px solid var(--line); padding:6px 10px; border-radius:999px;}

.waveWrap{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#070b10;
}
#wave{display:block; width:100%; height:180px;}
.waveHelp{padding:8px 10px; font-size:12px; color:var(--muted); border-top:1px solid var(--line);}