:root{
  --bg:#0b1020;
  --card:#101a33;
  --card2:#0f1730;
  --border:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --shadow: 0 14px 34px rgba(0,0,0,.40);
  --r:18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background: radial-gradient(1200px 600px at 20% -20%, rgba(94,234,212,.16), transparent 60%),
              radial-gradient(1000px 600px at 110% 0%, rgba(59,130,246,.12), transparent 55%),
              var(--bg);
  color:var(--text);
}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background: rgba(11,16,32,.85);
  backdrop-filter: blur(10px);
}
.brand{display:flex; gap:12px; align-items:center}
.logo{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.titles .h1{font-weight:700;font-size:14px}
.titles .h2{font-size:12px;color:var(--muted);margin-top:2px}
.actions{display:flex; flex-wrap:wrap; gap:10px; justify-content:flex-end; align-items:center}
.sep{width:1px;height:26px;background:rgba(255,255,255,.12);margin:0 6px}

.grid{
  max-width: 1320px;
  margin:0 auto;
  padding:16px;
  display:grid;
  grid-template-columns: 380px 1fr;
  gap:16px;
}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.sidebar{display:flex; flex-direction:column; min-height: calc(100vh - 110px)}
.cardhead{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; gap:10px;
}
.cardtitle{font-weight:700;font-size:13px}
.toggles{display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; color:var(--muted); font-size:12px}
.toggles input{transform:translateY(1px); margin-right:6px}

.dropzone{
  margin:12px;
  padding:12px;
  border-radius: 14px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
  color: rgba(255,255,255,.75);
  font-size:12px;
}
.dropzone.dragover{
  border-color: rgba(94,234,212,.75);
  background: rgba(94,234,212,.10);
  color: rgba(255,255,255,.92);
}
.list{padding:12px; display:flex; flex-direction:column; gap:8px; overflow:auto; flex:1}
.item{
  display:flex; gap:10px; align-items:center;
  padding:10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.12);
  cursor:pointer;
  user-select:none;
}
.item:hover{border-color:rgba(255,255,255,.18)}
.item.active{
  border-color: rgba(94,234,212,.65);
  background: rgba(94,234,212,.10);
}
.item .drag{font-family:var(--mono); color: rgba(255,255,255,.45)}
.item .meta{flex:1; min-width:0}
.item .name{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .sub{font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.item .x{
  width:28px;height:28px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: var(--muted);
}
.item .x:hover{border-color:rgba(251,113,133,.55); color: rgba(255,255,255,.92)}
.cardfoot{
  padding:10px 14px;
  border-top:1px solid var(--border);
}
.small{font-size:12px}
.dim{color:var(--muted)}

.player{padding:14px}
.np{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:10px}
.npTitle{font-size:15px; font-weight:700}
.npMeta{font-size:12px; color:var(--muted); margin-top:2px; max-width: 760px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.badge{
  font-size:11px; border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  padding:6px 10px;
  border-radius:999px;
}
.mediaWrap{display:grid; gap:10px}
#media{
  width:100%;
  max-height: 420px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.55);
}
#media.audioOnly{display:none}
#viz{
  width:100%;
  height:240px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.25);
}

.controls{
  margin-top:12px;
  padding:12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.14);
}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.time{display:flex; align-items:center; gap:10px; flex:1; min-width: 280px}
.time span{font-family:var(--mono); font-size:12px; color:var(--muted); width:58px; text-align:center}
#seek{flex:1}
.vol{display:flex; align-items:center; gap:8px}
.vol input{width:140px}
.opt{display:flex; flex-direction:column; gap:6px}
select{
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding:10px 10px;
  border-radius: 14px;
  font-size:12px;
}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background: rgba(255,255,255,.07);
  color: var(--text);
  padding:10px 12px;
  border-radius: 14px;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  font-size:12px;
}
.btn:hover{border-color:rgba(255,255,255,.20)}
.btn:active{transform: translateY(1px)}
.btn-ghost{background: rgba(0,0,0,.16)}
.btn-danger{background: rgba(251,113,133,.16); border-color: rgba(251,113,133,.35)}
.btn-primary{background: rgba(94,234,212,.18); border-color: rgba(94,234,212,.35)}
.btn-icon{width:44px;height:44px;padding:0; display:grid; place-items:center; font-size:16px}

.eq{
  margin-top:12px;
  padding:12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.10);
}
.eq summary{cursor:pointer; font-weight:700}
.eqGrid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap:10px;
}
.band{display:flex; flex-direction:column; gap:8px; align-items:center}
.band label{font-size:11px; color:var(--muted)}
.band input[type="range"]{
  writing-mode: bt-lr;
  -webkit-appearance: slider-vertical;
  width: 22px;
  height: 170px;
}
.band .val{font-family:var(--mono); font-size:11px; color: rgba(255,255,255,.75)}
.eqPresets{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}

dialog{
  border:none;
  border-radius: 18px;
  padding:0;
  background: rgba(16,26,51,.98);
  color: var(--text);
  box-shadow: var(--shadow);
  border:1px solid var(--border);
}
dialog::backdrop{background: rgba(0,0,0,.55)}
.dialog{padding:14px; min-width:min(720px, 92vw)}
.dialog h3{margin:0 0 10px 0}
.dialog input{
  width:100%;
  margin-top:6px;
  margin-bottom:12px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(0,0,0,.16);
  color: var(--text);
}
.dlgActions{display:flex; justify-content:flex-end; gap:10px}

.errBox{
  margin-top:12px;
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid rgba(251,113,133,.35);
  background: rgba(251,113,133,.12);
  color: rgba(255,255,255,.92);
  font-size:12px;
  white-space:pre-wrap;
}

@media (max-width: 980px){
  .grid{grid-template-columns: 1fr}
  .sidebar{min-height: 320px}
  .eqGrid{grid-template-columns: repeat(5, 1fr)}
}


/* v7.x additions: hint + file pick lists */
.hint{
  margin:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.12);
  color: rgba(255,255,255,.78);
  font-size:12px;
}
.pickList{
  margin-top:12px;
  max-height: 52vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(0,0,0,.10);
}
.pickRow{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pickRow:last-child{border-bottom:none}
.pickRow input{transform: translateY(2px)}
.pickRow .pname{font-size:12px; line-height:1.25; word-break:break-word}

/* Visualizer height reduced (50%) */
#viz{
  height:120px;
}

#media{ max-height: 380px; }


/* v7.3: prettier pick dialogs */
.btn-small{ padding:8px 10px; border-radius:12px; font-size:12px; }
.pickToolbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
}
.pickSearch{
  flex:1;
  min-width: 220px;
  padding:12px 12px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.92);
}
.pickBtns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }

.pickList{
  margin-top:10px;
}
.pickRow{
  align-items:center;
}
.pickRow:hover{
  background: rgba(255,255,255,.04);
}
.pickRow input[type="checkbox"], .pickRow input[type="radio"]{
  width:18px; height:18px;
}
.pickRow .pname{
  font-size:12px;
  color: rgba(255,255,255,.88);
}
.pickRow .pmeta{
  font-size:11px;
  color: rgba(255,255,255,.62);
  margin-top:2px;
}
.pickItem{
  display:flex;
  flex-direction:column;
  gap:2px;
}


/* v7.5: keep playlist scrollable and active visible */
.list{
  max-height: calc(100vh - 220px);
  overflow: auto;
  padding-right: 6px;
}

/* icons in rows */
.icon{
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
  flex: 0 0 auto;
}

/* counts in pick toolbars */
.pickCount{
  font-size: 12px;
  color: rgba(255,255,255,.75);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  white-space: nowrap;
}

/* v7.8 Dark brushed-metal + blue accents (minimal-risk theme overrides) */
:root{
  --v78-bg0:#050812;
  --v78-bg1:#070c19;
  --v78-bg2:#0b1330;
  --v78-panel1: rgba(12,18,40,.86);
  --v78-panel2: rgba(8,12,26,.86);
  --v78-stroke: rgba(255,255,255,.10);
  --v78-blue: #2f81f7;
  --v78-blue2:#60a5fa;
  --v78-text:#e8eefc;
  --v78-muted:rgba(232,238,252,.72);
}

body{
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(96,165,250,.18) 0%, rgba(5,8,18,0) 55%),
    radial-gradient(900px 600px at 80% 20%, rgba(47,129,247,.14) 0%, rgba(5,8,18,0) 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 6px, rgba(0,0,0,.02) 6px 12px),
    linear-gradient(180deg, var(--v78-bg2) 0%, var(--v78-bg0) 70%, #03040a 100%) !important;
  color: var(--v78-text) !important;
}

.topbar, header{
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 8px, rgba(0,0,0,.03) 8px 16px),
    linear-gradient(180deg, rgba(16,26,54,.92) 0%, rgba(9,14,30,.92) 100%) !important;
  border-bottom: 1px solid rgba(96,165,250,.25) !important;
  box-shadow: 0 14px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.card, .panel{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 7px, rgba(0,0,0,.02) 7px 14px),
    linear-gradient(180deg, var(--v78-panel1) 0%, var(--v78-panel2) 100%) !important;
  border: 1px solid var(--v78-stroke) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.50), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

.small, .dim{ color: var(--v78-muted) !important; }
a, .link{ color: var(--v78-blue2) !important; }

.btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, rgba(20,32,66,.85) 0%, rgba(12,19,40,.85) 100%) !important;
  color: var(--v78-text) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.btn:hover{ border-color: rgba(96,165,250,.40) !important; transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); box-shadow: 0 6px 12px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05) !important; }

.btn-primary{
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, var(--v78-blue2) 0%, var(--v78-blue) 100%) !important;
  border: 1px solid rgba(0,0,0,.25) !important;
  box-shadow: 0 14px 24px rgba(47,129,247,.28), inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.mediaBar{ display:flex; justify-content:flex-end; padding-top:8px; }

/* Custom modal overlays */
.modalOverlay{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:18px;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px); z-index:9999; }
.modalOverlay[hidden]{ display:none !important; }
.modalCard{ width:min(560px, 96vw); border-radius:18px;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.02) 0 7px, rgba(0,0,0,.02) 7px 14px),
    linear-gradient(180deg, rgba(20,32,66,.96) 0%, rgba(11,18,38,.96) 100%);
  border: 1px solid rgba(96,165,250,.22);
  box-shadow: 0 30px 70px rgba(0,0,0,.70), inset 0 1px 0 rgba(255,255,255,.06); }
.modalHead{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.modalTitle{ font-weight:700; letter-spacing:.2px; }
.modalX{ width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18); color: var(--v78-text); cursor:pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.modalBody{ padding:14px; color: var(--v78-text); }
.modalActions{ display:flex; gap:10px; justify-content:flex-end; padding:0 14px 14px; }
.modalText{ width:100%; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.20); color: var(--v78-text); outline:none; }
.modalText:focus{ border-color: rgba(96,165,250,.55); box-shadow: 0 0 0 3px rgba(96,165,250,.18); }

/* v7.9 subtle lightening of panels (still dark) */
.card, .panel{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 7px, rgba(0,0,0,.02) 7px 14px),
    linear-gradient(180deg, rgba(18,28,60,.92) 0%, rgba(12,18,40,.92) 100%) !important;
}
.mediaWrap{
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 7px, rgba(0,0,0,.02) 7px 14px),
    linear-gradient(180deg, rgba(14,22,48,.85) 0%, rgba(8,12,28,.85) 100%) !important;
}


/* v8.4: visualizer LEFT, transport/seek/volume panel RIGHT (aligned). */
.vizCtrlRow{
  display:flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 12px;
}
.vizCol{ flex: 0 0 48%; min-width: 340px; }
.ctrlCol{ flex: 1 1 auto; min-width: 340px; }

.vizFrame{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(96,165,250,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, rgba(16,26,54,.70) 0%, rgba(10,16,34,.70) 100%);
  box-shadow: 0 14px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.vizWrap{ width: 100%; }
#viz{ width: 100%; display:block; opacity:.95; }
.mediaBar{ display:flex; justify-content:flex-end; padding-top:8px; }

.controlsSide{ padding: 0; }
.ctrlPanel{ width:100%; display:flex; flex-direction:column; gap:12px; }
.ctrlFrame{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(96,165,250,.20);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(0,0,0,.12) 100%),
    linear-gradient(180deg, rgba(16,26,54,.70) 0%, rgba(10,16,34,.70) 100%);
  box-shadow: 0 14px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.ctrlTransport{ display:flex; gap:12px; align-items:center; }

.ctrlSeek{
  display:grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 10px;
  align-items:center;
}
.timeLabel{
  font-variant-numeric: tabular-nums;
  color: rgba(232,238,252,.85);
}
.ctrlVol{ display:flex; gap:12px; align-items:center; }
.ctrlVol input[type="range"], .ctrlSeek input[type="range"]{ width:100%; }
.hiddenInputs{ display:none; }

@media (max-width: 980px){
  .vizCtrlRow{ flex-direction: column; }
  .vizCol, .ctrlCol{ flex: 1 1 auto; min-width: 0; }
}

/* v8.5 fixes: visible EQ + working visualizer sizing + top alignment */
.vizWrap #viz{ height: 160px !important; }
.vizFrame{ align-items: flex-start; }
.vizCtrlRow{ align-items: flex-start; }
.ctrlPanel{ padding-top: 0 !important; }
.controlsSide{ padding-top: 0 !important; }

/* v8.6: brand logo (silver 3D) */
.topbar .brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.topbar .brand .title{
  font-weight: 900;
  letter-spacing: .6px;
  font-size: 22px;
  line-height: 1.05;
  text-transform: none;
  color: #e8eefc;
  background: linear-gradient(180deg, #ffffff 0%, #d9e0ea 35%, #9fb0c9 70%, #e8eefc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow:
    0 1px 0 rgba(255,255,255,.35),
    0 2px 0 rgba(255,255,255,.18),
    0 6px 14px rgba(0,0,0,.55);
}
.topbar .brand .subtitle{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(232,238,252,.75);
  letter-spacing: .2px;
  text-shadow: 0 6px 14px rgba(0,0,0,.55);
}

/* v8.7: stronger 3D metallic header text */
.topbar .brand .logo{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 30% 30%, rgba(96,165,250,.55), rgba(47,129,247,.15) 45%, rgba(0,0,0,.15) 70%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 8px, rgba(0,0,0,.05) 8px 16px);
  border: 1px solid rgba(96,165,250,.28);
  box-shadow: 0 14px 26px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.10);
}

.topbar .brand .h1{
  font-weight: 950;
  font-size: 28px;
  letter-spacing: .7px;
  line-height: 1.02;
  background: linear-gradient(180deg, #ffffff 0%, #e6edf7 18%, #b5c3d8 45%, #7f93b3 70%, #e8eefc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-stroke: 0.6px rgba(12,18,40,.75);
  text-shadow:
    0 1px 0 rgba(255,255,255,.30),
    0 2px 0 rgba(255,255,255,.12),
    0 10px 22px rgba(0,0,0,.70);
}

.topbar .brand .h2{
  margin-top: 4px;
  font-size: 13px;
  letter-spacing: .25px;
  color: rgba(232,238,252,.82) !important;
  text-shadow: 0 10px 22px rgba(0,0,0,.70);
}

#nowMeta:empty{display:none;}

.vizWrap canvas{ display:block; width:100%; height:220px; }

/* v9.2: VU meters alignment inside the visualizer frame */
.vizWrap{
  padding: 10px;
}
.vizWrap canvas{ display:block; width:100%; height:220px; }

/* v9.3: VU meters fill the visualizer panel better */
.vizWrap{ padding: 8px; }
.vizWrap canvas{ display:block; width:100%; height:220px; }

/* v9.4: VU meters fill their panels more */
.vizWrap{ padding: 6px; }
.vizWrap canvas{ display:block; width:100%; height:220px; }

/* v9.6.4: keep EQ vertical; set VU canvas height */
.vizWrap canvas{ display:block; width:100%; height:220px; }


/* v9.7.4: keep VU meters visible even before playback */
.vizWrap, .vizWrap * { visibility: visible; }
.vizWrap { display:block; }



/* v9.7.5: 3D frame around VU meters area */
.vizWrap{
  position: relative;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(120,170,255,0.28);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.22));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.55),
    0 10px 26px rgba(0,0,0,0.35);
}
.vizWrap::before{
  content:"";
  position:absolute;
  inset: 2px;
  border-radius: 16px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    inset 0 0 24px rgba(30,140,255,0.08);
  pointer-events:none;
}

/* Transport row: fullscreen button in same frame, right aligned */
.transportRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.transportLeft{
  display:flex;
  gap: 10px;
  align-items:center;
}
.transportRight{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-width: 48px;
}



/* v9.7.6: align VU frame and transport frame tops */
.vizCtrlRow .controls{ margin-top: 0; }

/* v9.7.6: show track title only once */
#nowMeta{ display:none; }


/* v9.7.7 */
.isHidden{ display:none !important; }

/* SAFETY FIX: hide buttons without touching JS */
#btnPlSave,
#btnAddUrl {
    display: none !important;
}

/* === Recording === */
.btn-record { color:#ff4d4d; }
.btn-record.recording { background:#c62828; color:#fff; }
.recTimer { margin-left:8px; font-size:12px; font-variant-numeric:tabular-nums; }

/* === Record button final tuning === */
.btn-record {
  margin-left: 10px; /* spacing from previous buttons */
}

.btn-record .rec-dot {
  width: 10px;
  height: 10px;
  background: #ff0000;
  border-radius: 50%;
  opacity: 1;
}

@keyframes recBlink {
  0% { opacity: 1; }
  50% { opacity: 0.25; }
  100% { opacity: 1; }
}

.btn-record.recording .rec-dot {
  animation: recBlink 1s infinite;
}