:root{ --brand:#0f8b6b; --bg:#f7faf7; }
body { font-family: 'Tajawal', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); }
.surah-card { min-height:120px; display:flex; flex-direction:column; justify-content:space-between; }
.qc-player {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 14px; width: calc(100% - 32px); max-width:1024px;
  background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(16,24,40,0.08);
  display:flex; gap:16px; padding:12px 16px; align-items:center; z-index:9999;
}
.qc-left { display:flex; gap:12px; align-items:center; flex:1; }
.qc-cover { width:56px; height:56px; border-radius:8px; background:linear-gradient(135deg,#e6fff7,#eafaf1); display:flex; align-items:center; justify-content:center; font-size:22px; }
.qc-title { font-weight:700; }
.qc-meta { color:#6b7280; font-size:12px; }
.qc-controls { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.qc-btn { background:transparent; border:none; font-size:18px; padding:6px; cursor:pointer; }
.qc-progress input[type=range] { width:420px; max-width:40vw; }
@media (max-width: 768px){ .qc-progress input[type=range]{ width:200px; } .qc-player{ padding:10px; } }