/* ===== التخطيط: الشريط العلوي، الحاويات، المشغل ===== */
.container{position:relative;z-index:1;width:min(1180px,100%);margin:0 auto;
  padding:calc(74px + var(--sp)) var(--sp) 150px}
.navbar{position:fixed;top:0;inset-inline:0;z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:10px clamp(12px,2.4vw,26px);
  background:var(--bg-2);
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--border);
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease);
}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand-mark{display:grid;place-items:center;filter:drop-shadow(0 6px 16px rgba(14,107,82,.35));
  transition:transform var(--t) var(--ease)}
.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.05)}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-family:var(--font-head);font-size:1.34rem;letter-spacing:.5px;
  background:linear-gradient(100deg,var(--accent),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand-text small{font-size:.7rem;color:var(--muted);font-weight:500}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav-link{display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-full);
  font-size:.92rem;font-weight:500;color:var(--text-2);position:relative;
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.nav-link svg{width:18px;height:18px;stroke-width:1.75}
.nav-link:hover{color:var(--text);background:var(--surface-2);transform:translateY(-1px)}
.nav-link.is-active{color:var(--accent-ink);background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent)}
.nav-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto}
.nav-actions+.nav-actions{margin-inline-start:0}

/* تصحيح: توسيط التنقل */
.nav{margin-inline:auto}
.nav-actions{margin-inline-start:0;flex-shrink:0}

/* ===== المشغل السفلي ===== */
.player{position:fixed;inset-inline:0;bottom:0;z-index:70;padding:0 clamp(8px,1.6vw,18px) 12px}
.player-inner{width:min(1180px,100%);margin:0 auto;display:flex;align-items:center;gap:14px;
  padding:10px 14px;border-radius:var(--r-lg);
  background:var(--surface-solid);
  background:color-mix(in srgb,var(--surface-solid) 82%,transparent);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border:1px solid var(--border);box-shadow:var(--shadow-lg);
  animation:fadeUp .45s var(--ease) both}
.p-left{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.p-play{width:50px;height:50px;border-radius:var(--r-full);display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--accent-ink);
  box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 42%,transparent);flex-shrink:0;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.p-play svg{width:22px;height:22px;stroke-width:2}
.p-play:hover{transform:scale(1.07) translateY(-1px)}
.p-play.is-playing{animation:pulseGlow 2.4s var(--ease) infinite}
.p-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.p-ayah{font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-surah{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-center{flex:1;display:flex;flex-direction:column;gap:6px;min-width:150px}
.p-seek{display:flex;align-items:center;gap:10px}
.p-seek input[type=range]{flex:1;height:6px;border-radius:var(--r-full);appearance:none;
  background:var(--surface-2);border:1px solid var(--border);cursor:pointer}
.p-seek input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2px solid var(--surface-solid);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.p-seek input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--surface-solid)}
.p-time{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:38px;text-align:center}
.p-ctrls{display:flex;align-items:center;justify-content:center;gap:6px}
.p-right{display:flex;align-items:center;gap:8px;flex:0 1 auto}

/* ===== استجابة الشاشات ===== */
@media (max-width:900px){
  .p-right .field.compact{display:none}
}
@media (max-width:760px){
  .nav{position:fixed;top:60px;inset-inline:8px;flex-direction:column;align-items:stretch;gap:4px;
    padding:10px;border-radius:var(--r);background:var(--surface-solid);
    background:color-mix(in srgb,var(--surface-solid) 94%,transparent);
    backdrop-filter:blur(18px);border:1px solid var(--border);box-shadow:var(--shadow-lg);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--t) var(--ease),transform var(--t) var(--ease),visibility var(--t)}
  .navbar.is-open .nav{opacity:1;visibility:visible;transform:none}
  .nav-link{padding:12px 14px;border-radius:var(--r-sm);font-size:1rem}
  .brand-text small{display:none}
  .menu-btn{display:grid !important}
  .container{padding-top:calc(66px + var(--sp));padding-bottom:190px}
  .player-inner{flex-wrap:wrap;gap:10px;padding:10px}
  .p-left{order:1;flex:1 1 auto}
  .p-right{order:2}
  .p-center{order:3;flex:1 1 100%}
  .p-ctrls{gap:10px}
}
@media (min-width:761px){.menu-btn{display:none !important}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}