
:root{
  --ap-bg:#061c16;
  --ap-bg2:#0a2e24;
  --ap-panel:rgba(10,42,33,.72);
  --ap-border:rgba(232,201,129,.22);
  --ap-gold:#e2c27a;
  --ap-text:#f4fbf7;
  --ap-muted:#b9c9c2;
  --ap-green:#0b6d58;
  --ap-shadow:0 22px 60px rgba(0,0,0,.28);
}
.alnour-player-v2{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(circle at 15% 10%,rgba(213,181,104,.14),transparent 34%),
    radial-gradient(circle at 85% 0%,rgba(14,106,86,.18),transparent 38%),
    linear-gradient(145deg,var(--ap-bg),var(--ap-bg2));
  border:1px solid var(--ap-border);
  box-shadow:var(--ap-shadow);
  color:var(--ap-text);
  font-family:"Tajawal","Segoe UI",Arial,sans-serif;
}
.alnour-player-v2 *{box-sizing:border-box}
.ap-media-stage{position:relative;aspect-ratio:16/9;background:#000;min-height:220px}
.alnour-player-v2.audio .ap-media-stage{aspect-ratio:auto;min-height:250px;background:
  radial-gradient(circle at 50% 15%,rgba(226,194,122,.13),transparent 32%),
  linear-gradient(180deg,#0d382e,#071f19)}
.ap-media-stage video,.ap-media-stage audio{width:100%;height:100%;display:block}
.ap-media-stage audio{height:0}
.ap-poster{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  filter:saturate(.9) brightness(.62);
}
.ap-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.56));
  pointer-events:none;
}
.ap-center{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none
}
.ap-big-play{
  pointer-events:auto;
  width:84px;height:84px;border-radius:50%;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(145deg,rgba(13,112,89,.94),rgba(5,68,55,.94));
  box-shadow:0 12px 36px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.08);
  color:white;font-size:30px;display:grid;place-items:center;cursor:pointer;
  transition:.18s transform,.18s box-shadow
}
.ap-big-play:hover{transform:scale(1.05);box-shadow:0 16px 44px rgba(0,0,0,.38)}
.ap-audio-visual{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:26px
}
.ap-cover{
  width:116px;height:116px;border-radius:24px;object-fit:cover;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 38px rgba(0,0,0,.32)
}
.ap-wave{
  width:min(760px,92%);height:76px;display:flex;align-items:center;gap:3px;opacity:.95
}
.ap-wave span{flex:1;min-width:2px;border-radius:999px;background:linear-gradient(180deg,var(--ap-gold),#8fb9aa)}
.ap-titlebar{padding:18px 20px 6px}
.ap-title{font-size:clamp(1.15rem,2.5vw,1.55rem);font-weight:900;line-height:1.5}
.ap-meta{color:var(--ap-muted);font-size:.94rem;margin-top:4px}
.ap-controls{padding:12px 16px 16px}
.ap-progress-wrap{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.ap-time{font-variant-numeric:tabular-nums;color:var(--ap-muted);font-size:.86rem}
.ap-progress{
  appearance:none;width:100%;height:6px;border-radius:999px;outline:none;
  background:linear-gradient(90deg,var(--ap-gold) var(--ap-progress,0%),rgba(255,255,255,.14) var(--ap-progress,0%));
}
.ap-progress::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:white;border:3px solid var(--ap-green);box-shadow:0 0 0 3px rgba(226,194,122,.16)}
.ap-control-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}
.ap-btn{
  appearance:none;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);color:var(--ap-text);
  min-width:44px;height:44px;border-radius:14px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;font:inherit;font-weight:800;transition:.15s transform,.15s background,.15s border-color
}
.ap-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(226,194,122,.35);transform:translateY(-1px)}
.ap-btn.active{background:linear-gradient(135deg,#0b725c,#075142);border-color:#c9aa62}
.ap-spacer{flex:1}
.ap-volume{width:110px}
.ap-popover{
  position:absolute;z-index:20;min-width:220px;max-width:min(360px,90vw);
  background:rgba(4,26,20,.96);border:1px solid var(--ap-border);border-radius:16px;
  box-shadow:0 18px 45px rgba(0,0,0,.38);padding:8px;display:none
}
.ap-popover.open{display:block}
.ap-menu-item{
  width:100%;border:0;background:transparent;color:var(--ap-text);
  padding:10px 12px;border-radius:10px;text-align:start;cursor:pointer;font:inherit
}
.ap-menu-item:hover,.ap-menu-item.active{background:rgba(255,255,255,.08);color:var(--ap-gold)}
.ap-bottom-grid{
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:16px;padding:0 16px 18px
}
.ap-transcript,.ap-chapters,.ap-related{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden
}
.ap-panel-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.ap-panel-head strong{font-size:1rem}
.ap-search{margin-inline-start:auto;min-width:160px;max-width:260px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.14);color:white;border-radius:12px;padding:8px 10px}
.ap-transcript-list{max-height:360px;overflow:auto;padding:8px}
.ap-line{display:grid;grid-template-columns:64px 1fr;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;line-height:1.65;color:#eaf4ef}
.ap-line:hover,.ap-line.active{background:rgba(226,194,122,.1)}
.ap-line-time{color:var(--ap-gold);font-variant-numeric:tabular-nums;font-size:.84rem}
.ap-chapter-list,.ap-related-list{padding:8px}
.ap-chapter,.ap-related-item{display:block;width:100%;padding:10px 11px;border-radius:10px;color:#eef7f2;text-decoration:none;background:transparent;border:0;text-align:start;cursor:pointer}
.ap-chapter:hover,.ap-related-item:hover,.ap-chapter.active{background:rgba(255,255,255,.07)}
.ap-badge{display:inline-flex;align-items:center;padding:3px 7px;border-radius:999px;background:rgba(226,194,122,.12);color:var(--ap-gold);font-size:.75rem}
.ap-error{display:none;padding:14px 16px;background:rgba(126,25,25,.24);border-top:1px solid rgba(255,255,255,.08)}
.ap-error.show{display:block}
.ap-mini{
  position:fixed!important;right:18px;bottom:18px;width:min(420px,calc(100vw - 24px));z-index:9999;border-radius:20px
}
html[dir="rtl"] .ap-mini{right:auto;left:18px}
.ap-theater{width:100vw;max-width:none;margin-inline:calc(50% - 50vw);border-radius:0}
.ap-settings-sheet{display:none}
@media(max-width:820px){
  .ap-bottom-grid{grid-template-columns:1fr}
  .ap-control-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .ap-control-row::-webkit-scrollbar{display:none}
  .ap-volume{display:none}
  .ap-btn .ap-label{display:none}
  .ap-bottom-grid{padding-inline:10px}
  .ap-controls{padding-inline:10px}
}
@media(prefers-reduced-motion:reduce){
  .ap-btn,.ap-big-play{transition:none}
}
