:root{ --glass: rgba(255,255,255,.6); --shadow: 0 10px 30px rgba(0,0,0,.08); --ring: rgba(13,110,253,.35); }
.glass-nav{ backdrop-filter: blur(8px); background: var(--glass); }
.gradient-card{ background: linear-gradient(135deg, rgba(13,110,253,.06), rgba(111,66,193,.06)); border: 1px solid rgba(13,110,253,.1); }
.hover-card { transition: transform .08s ease-in-out, box-shadow .08s ease-in-out; box-shadow: var(--shadow); }
.hover-card:hover { transform: translateY(-2px); box-shadow: 0 1rem 2rem rgba(0,0,0,.12); }
.ayah.arabic { font-family: 'Scheherazade New', 'Amiri', serif; line-height: 2; font-size: 1.5rem; direction: rtl; text-align: right; }
.modern-list .list-group-item{ border-radius: .75rem; margin-bottom:.5rem; border:1px solid rgba(0,0,0,.06); box-shadow: var(--shadow); }

.fancy-player{ border:1px solid rgba(13,110,253,.25); border-radius: 1rem; padding:.75rem; background: linear-gradient(135deg, rgba(13,110,253,.06), rgba(111,66,193,.06)); box-shadow: var(--shadow); }
.fancy-player .fp-inner{ display:flex; align-items:center; gap:.75rem; }
.fancy-player .fp-btn{ border:none; border-radius: 999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:#0d6efd; color:white; box-shadow: 0 6px 16px rgba(13,110,253,.3); }
.fancy-player .fp-btn:focus{ outline: 3px solid var(--ring); }
.fancy-player .fp-meta{ flex: 1; }
.fancy-player .fp-title{ font-weight: 600; }
.fancy-player .fp-progress{ width: 100%; accent-color: #0d6efd; }
.fancy-player .fp-time{ font-size:.8rem; color:#6c757d; }
.fancy-player .fp-actions{ display:flex; align-items:center; gap:.5rem; }

.mini-player{ border:1px solid rgba(108,117,125,.25); border-radius: .75rem; padding:.35rem .6rem; background: rgba(0,0,0,.03); display:inline-flex; align-items:center; gap:.5rem; box-shadow: var(--shadow); }
.mini-player .mp-btn{ border:none; background:#0d6efd; color:white; width:34px; height:34px; border-radius: 999px; display:flex; align-items:center; justify-content:center; }
.mini-player .mp-time{ font-size:.8rem; color:#6c757d; min-width: 70px; text-align:center; }
.mini-player .mp-progress{ width:140px; accent-color: #0d6efd; }
@media (max-width: 576px){ .mini-player .mp-progress{ width: 100px; } }

.loader{ position: fixed; inset: 0; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.8); backdrop-filter: blur(6px); z-index: 2000; opacity:0; pointer-events:none; transition: opacity .2s ease; }
.loader .loader-inner{ text-align:center; }
.loader.shown{ opacity:1; pointer-events:auto; }

@media (prefers-color-scheme: dark) {
  :root{ --glass: rgba(23,23,23,.6); --shadow: 0 10px 30px rgba(0,0,0,.35); }
  body { background: #0d0f12; color: #e9ecef; }
  .card, .list-group-item, .navbar { background: #151922; border-color: rgba(255,255,255,.06); }
  .gradient-card{ background: linear-gradient(135deg, rgba(13,110,253,.09), rgba(111,66,193,.12)); }
  .loader{ background: rgba(13,17,23,.6); }
  .mini-player{ background: rgba(255,255,255,.04); }
}

.fancy-player .fp-dl{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:.5rem; border:1px solid rgba(108,117,125,.35); color:inherit; }

.fancy-player .fp-btn i, .mini-player .mp-btn i{ font-size: 1.1rem; }