:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --surface:#f8fafc;
  --accent:#2563eb;

  --table-row-hover:rgba(0,0,0,.04);

  /* Player (light) */
  --player-bg:#e8eefc;
  --player-border:#c7d2fe;
  --player-hover:#dbe6ff;
  --player-text:#0b1a3a;

  /* Brand/CTA (light) */
  --brand-green:#1FAD6D;
  --cta-bg:#E6F7F0;
  --cta-border:#BFE9D6;
  --cta-hover:#D9F2E8;
  --cta-press:#CDEBDD;
  --cta-text:#0b1a3a;
  --cta-shadow:0 10px 30px rgba(31,173,109,.20);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b0b10;
    --text:#e7e7e9;
    --muted:#9aa0a6;
    --surface:#12121a;
    --accent:#60a5fa;

    --table-row-hover:rgba(255,255,255,.06);

    /* Player (dark) */
    --player-bg:#1a2233;
    --player-border:#2a3550;
    --player-hover:#22304a;
    --player-text:#e7eefc;

    /* CTA (dark) */
    --cta-bg:#143A2B;
    --cta-border:#1F5D43;
    --cta-hover:#184533;
    --cta-press:#113124;
    --cta-text:#E7E7E9;
    --cta-shadow:0 8px 24px rgba(31,173,109,.35);
  }
}

html,body{background:var(--bg);color:var(--text);}
.table{background:var(--surface);}
.table tr:hover{background:var(--table-row-hover);}

/* Audio buttons (generic) */
.audio-btn{
  background:var(--player-bg);
  border:1px solid var(--player-border);
  color:var(--player-text);
  border-radius:.6rem;
  padding:.5rem .75rem;
  transition:background .15s ease, transform .05s ease, box-shadow .2s ease;
  cursor:pointer;
}
.audio-btn:hover{background:var(--player-hover);}
.audio-btn:active{transform:translateY(1px);}

/* Focus outline */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* Screen-reader helper */
.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

/* CTA stronger specificity + important to beat defaults */
.btn-cta,
.btn.btn-cta,
a.btn-cta,
button.btn-cta,
.btn-primary.btn-cta {
  background:var(--cta-bg) !important;
  color:var(--cta-text) !important;
  border:1px solid var(--cta-border) !important;
  border-radius:.75rem;
  padding:.75rem 1.1rem;
  font-weight:600;
  box-shadow:var(--cta-shadow);
  transition:background .15s ease, transform .05s ease, box-shadow .2s ease;
}
.btn-cta:hover{ background:var(--cta-hover) !important; box-shadow:0 12px 36px rgba(31,173,109,.25); }
.btn-cta:active{ background:var(--cta-press) !important; transform:translateY(1px); }
.btn-cta svg{ fill: currentColor; }