:root{
  --bg:#000; --fg:#f9f6ef; --muted:#d4af37; --card:#101316;
  --accent:#d4af37; --border:#23262d; --glass:rgba(255,255,255,.06);
  --fgOnAccent:#111;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;font-family:"Cairo",system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{background:var(--bg);color:var(--fg);display:flex;flex-direction:column}

/* خلفيات */
.bg-night{
  background:
    radial-gradient(1000px 600px at 50% -200px, rgba(212,175,55,.12), transparent 60%),
    #000;
}
.bg-dawn{
  background:linear-gradient(180deg,#1b1308 0%, #3a2c10 45%, #0b0b0b 100%);
}
/* نجوم متلألئة */
.bg-stars{background:#000; position:relative; overflow-x:hidden}
.bg-stars::before,
.bg-stars::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 70% 10%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 40% 80%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 10% 60%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 85% 50%, rgba(255,255,255,.75) 50%, transparent 51%);
  animation:twinkle 3.2s ease-in-out infinite;
}
.bg-stars::after{
  opacity:.6;
  filter:blur(0.6px);
  animation-duration:4.6s;
  animation-direction:reverse;
}
@keyframes twinkle{
  0%,100%{opacity:.35}
  50%{opacity:.9}
}

/* Splash */
.splash{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:99}
.splash-logo{display:flex;flex-direction:column;align-items:center;gap:12px;animation:fadeIn .6s}
.splash-title{color:var(--accent);font-weight:800;font-size:20px}
@keyframes fadeIn{from{opacity:.2;transform:translateY(6px)}to{opacity:1;transform:none}}
.splash.hide{opacity:0;pointer-events:none;transition:.4s}

/* رأس */
.topbar{position:relative;display:flex;align-items:center;justify-content:center;padding:calc(10px + env(safe-area-inset-top)) 16px 6px}
.logoWrap{display:flex;flex-direction:column;align-items:center;gap:6px; position:relative; z-index:1}
.moon{width:66px;height:66px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6))}
.appTitle{color:var(--accent);font-weight:800;font-size:20px}

/* زر الإعدادات يسار */
.iconBtn{
  position:absolute;left:calc(10px + env(safe-area-inset-left));
  top:calc(10px + env(safe-area-inset-top));
  background:rgba(255,255,255,.08);color:var(--accent);
  border:1px solid rgba(212,175,55,.4);border-radius:999px;padding:8px 12px; z-index:2;
}

/* زر التثبيت يمين */
.installFab{
  position:absolute;right:calc(10px + env(safe-area-inset-right));
  top:calc(10px + env(safe-area-inset-top));
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(212,175,55,.55);
  background:radial-gradient(circle at 50% 45%, rgba(212,175,55,.30), rgba(212,175,55,.12));
  box-shadow:0 6px 16px rgba(0,0,0,.45);
}
@media (display-mode: standalone){ .installFab{display:none!important} }

.centerWrap{width:100%;max-width:760px;margin:8px auto;padding:0 16px; position:relative; z-index:1}
.glass{background:var(--glass);border:1px solid var(--border);backdrop-filter:blur(10px);box-shadow:0 12px 30px rgba(0,0,0,.45);border-radius:16px}

/* بطاقة المشغّل */
#playerCard{padding:14px}
.track-meta{text-align:center;margin-bottom:8px}
#trackTitle{font-size:22px;color:var(--accent);font-weight:800}
#trackSub{font-size:14px;color:var(--muted)}

.controls{display:flex;justify-content:center;gap:14px;margin:8px 0}
.btn{border:none;padding:12px 18px;font-size:18px;border-radius:12px;background:#161a1f;color:var(--fg);cursor:pointer;transition:.2s}
.btn.primary{background:var(--accent);color:var(--fgOnAccent);font-weight:800}
.btn.circle{width:70px;height:70px;border-radius:50%}
.btn.ico{width:60px;height:60px;border-radius:12px}
.btn.wide{width:100%;margin-top:8px}
.btn.outline{background:transparent;border:1px solid var(--accent);color:var(--accent);font-weight:700}

.progress{display:flex;align-items:center;gap:10px;margin:6px 0}
#currentTime,#duration{min-width:52px;text-align:center}
#seek{flex:1;appearance:none;height:12px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%, rgba(255,255,255,.12) 0%)}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.5);border:2px solid rgba(0,0,0,.25)}
#seek::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);border:none}

/* الخيارات */
.toggles{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.row{display:flex;align-items:center;justify-content:space-between;gap:14px}
.glassRow{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--border);backdrop-filter:blur(8px)}
.rowText{display:flex;flex-direction:column}
.rowTitle{font-size:15px;color:var(--fg);font-weight:700}
.rowHint{font-size:12px;color:rgba(212,175,55,.85)}

/* سويتش */
.switch{position:relative;width:66px;height:32px}
.switch input{appearance:none;opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;border-radius:999px;border:1px solid var(--border);background:linear-gradient(180deg,#121519,#0e1115);box-shadow:inset 0 2px 6px rgba(0,0,0,.65);transition:.2s}
.switch .knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,#404852,#2c3239);box-shadow:0 2px 6px rgba(0,0,0,.6);transition:.22s}
.switch input:checked + .track{border-color:rgba(212,175,55,.55);background:linear-gradient(180deg, rgba(212,175,55,.30), rgba(212,175,55,.18))}
.switch input:checked + .track .knob{left:37px;background:linear-gradient(180deg,#f7dc86,#d4af37);box-shadow:0 4px 12px rgba(212,175,55,.35)}

/* Select */
.selectWrap{position:relative;min-width:170px}
.selectWrap select{width:100%;padding:10px 40px 10px 12px;font-size:15px;color:var(--fg);background:linear-gradient(180deg,#0e1216,#0b0e11);border:1px solid var(--border);border-radius:10px;appearance:none}
.selectWrap:after{content:"";position:absolute;right:12px;top:50%;transform:translateY(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid var(--accent)}

/* صوت */
.volRange{width:220px;max-width:60vw;appearance:none;height:10px;border-radius:999px;background:linear-gradient(90deg,var(--accent) 0%, rgba(255,255,255,.12) 0%)}
.volRange::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.5);border:2px solid rgba(0,0,0,.25)}
.volRange::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:none}

/* إظهار شريط الصوت على الحاسوب فقط */
.desktopOnly{display:none}
@media (hover:hover) and (pointer:fine){ .desktopOnly{display:flex} }

/* Accordion */
.accordion{margin:14px 0}
.accordionBtn{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--fg);text-align:center;font-weight:800}
.accordionBody{max-height:0;overflow:hidden;transition:max-height .25s ease}
.accordion.open .accordionBody{max-height:600px}

/* قائمة السور */
#playlist{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.item{background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.item:hover{border-color:rgba(212,175,55,.6)}
.item.active{outline:2px solid var(--accent)}
.item .tit{font-size:16px;color:var(--fg);font-weight:700}
.item .sub{color:var(--muted);font-size:13px}

/* Modal (إعدادات) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100}
.modal.show{display:flex}
.modalCard{width:min(520px,92vw);background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px}
.modalHeader{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modalHeader h3{margin:0;color:var(--accent)}
.modalBody{display:flex;flex-direction:column;gap:10px}
.pref label{display:block;margin-bottom:6px;color:var(--fg);font-weight:700}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.segBtn{padding:8px 12px;border:1px solid var(--border);border-radius:999px;background:rgba(255,255,255,.06);color:var(--fg);cursor:pointer}
.segBtn.active{border-color:var(--accent);color:var(--fgOnAccent);background:var(--accent)}

@supports (padding: env(safe-area-inset-top)) {
  body{ padding-bottom: env(safe-area-inset-bottom); }
}
/* نجوم أوضح وكثيرة مع وميض */
body.bg-stars {
  /* تدرّج خفيف علوي */
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.9) 100%),
    #000;
  position: relative;
  overflow: hidden;
}

/* ثلاث طبقات نجوم عبر عناصر وهمية */
body.bg-stars::before,
body.bg-stars::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 700px 700px;             /* كثافة عالية */
  opacity: .9;
  z-index: 0;
}
/* طبقة نجوم كبيرة متوهّجة */
body.bg-stars::before{
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgba(255,255,200,.95) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 120px 80px, rgba(255,230,140,.9) 50%, transparent 52%),
    radial-gradient(1.8px 1.8px at 260px 160px, rgba(255,255,200,.95) 50%, transparent 52%),
    radial-gradient(1.3px 1.3px at 400px 260px, rgba(255,230,140,.9) 50%, transparent 52%),
    radial-gradient(2.2px 2.2px at 560px 340px, rgba(255,255,220,1) 50%, transparent 52%);
  animation: twinkleA 3.5s ease-in-out infinite;
}
/* طبقة نجوم أصغر وكثيرة */
body.bg-stars::after{
  background-size: 600px 600px;
  background-image:
    radial-gradient(1.2px 1.2px at 40px 40px, rgba(255,255,255,.85) 50%, transparent 52%),
    radial-gradient(1px 1px at 180px 120px, rgba(255,255,255,.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 320px 220px, rgba(255,255,255,.75) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 500px 300px, rgba(255,255,255,.8) 50%, transparent 52%),
    radial-gradient(1px 1px at 620px 420px, rgba(255,255,255,.7) 50%, transparent 52%);
  animation: twinkleB 4.2s ease-in-out infinite;
}

@keyframes twinkleA{
  0%,100%{opacity:.85; transform:translateY(0)}
  50%   {opacity:.55; transform:translateY(-0.5px)}
}
@keyframes twinkleB{
  0%,100%{opacity:.8; transform:translateY(0)}
  50%   {opacity:.45; transform:translateY(.5px)}
}

/* الصندوق الرئيسي يصبح زجاجياً شفافاً لتظهر النجوم من خلفه */
.controlCard, .playerCard, .panel, .card {
  background: rgba(25,25,25,0.38);          /* شفافية بدلاً من الرمادي المصمت */
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* تأكيد طبقات الواجهة فوق النجوم */
.header, main, footer, .controlCard, .playerCard, .panel, .card, .accordion {
  position: relative;
  z-index: 1;
}

/* تباين النص فوق الخلفية */
body.bg-stars .title, body.bg-stars h1, body.bg-stars h2, body.bg-stars .sub {
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* احترام تقليل الحركة */
@media (prefers-reduced-motion: reduce){
  body.bg-stars::before, body.bg-stars::after{ animation: none; }
}