:root{
    --brand:#4349CC; --accent:#8C91F0;
    --wash:linear-gradient(180deg, rgba(67,73,204,.34) 0%, rgba(6,10,45,.78) 100%);
    --glow:radial-gradient(circle, rgba(67,73,204,.40) 0%, transparent 65%);
    --orb:radial-gradient(circle at 34% 30%, #C7CAFA 0%, #7A80EB 34%, #343AA8 72%, #12164F 100%);
    --orbGlow:0 0 70px rgba(67,73,204,.50);
    --ringStrong:rgba(199,202,250,.78); --ringSoft:rgba(122,128,235,.45);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{margin:0; padding:0; background:#070B1E}
  body{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
    padding:48px 24px 64px; gap:40px;
    background:radial-gradient(120% 80% at 50% 0%, #1C2350 0%, #070B1E 70%);
    font-family:Cairo,"Noto Sans",sans-serif;
  }
  @keyframes zspin{to{transform:rotate(360deg)}}
  @keyframes zspin-r{to{transform:rotate(-360deg)}}
  @keyframes zbreathe{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.04);opacity:1}}
  .zscroll::-webkit-scrollbar{display:none}
  .zscroll{scrollbar-width:none}

  .phone{
    position:relative; width:375px; height:812px; border-radius:44px; overflow:hidden;
    background:linear-gradient(180deg,#171E44 0%,#1B2350 42%,#0B0F26 100%);
    box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
  }
  .layer{position:absolute; inset:0; pointer-events:none}
  .wash{background:var(--wash)}
  .mesh{
    opacity:.07;
    background-image:repeating-linear-gradient(45deg, rgba(255,255,255,.9) 0 1px, transparent 1px 26px),
                     repeating-linear-gradient(-45deg, rgba(255,255,255,.9) 0 1px, transparent 1px 26px);
  }
  .glow{position:absolute; top:-90px; inset-inline-end:-70px; width:320px; height:320px; border-radius:50%; background:var(--glow); pointer-events:none}

  .content{position:relative; height:100%; display:flex; flex-direction:column}
  .top{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column}

  .toolbar{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:22px 20px 0}
  .pill{
    flex:0 0 auto; display:flex; align-items:center; gap:6px; height:38px; padding:0 11px;
    border-radius:19px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
    cursor:pointer; color:#fff; font-family:Cairo,sans-serif; font-weight:700; font-size:11px; letter-spacing:.4px;
  }
  .pill:hover{background:rgba(255,255,255,.20)}
  .channel{
    flex:1; font-family:Cairo,sans-serif; font-weight:600; font-size:11px; letter-spacing:1.6px;
    color:rgba(255,255,255,.82); text-align:center; cursor:pointer; border:0; background:transparent;
  }
  .sq{
    flex:0 0 auto; width:38px; height:38px; border-radius:13px;
    background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16);
    display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;
  }
  .sq:hover{background:rgba(255,255,255,.20)}

  .orbwrap{position:relative; flex:1 1 auto; min-height:170px; display:flex; align-items:center; justify-content:center}
  .ring1{position:absolute; width:176px; height:176px; border-radius:50%; border:1.5px solid transparent;
         border-top-color:var(--ringStrong); border-left-color:var(--ringSoft); animation:zspin 26s linear infinite}
  .ring2{position:absolute; width:154px; height:154px; border-radius:50%; border:1px solid transparent;
         border-bottom-color:var(--ringSoft); animation:zspin-r 34s linear infinite}
  .orb{position:relative; width:134px; height:134px; animation:zbreathe 7s ease-in-out infinite}
  .orb .core{position:absolute; inset:0; border-radius:50%; background:var(--orb); box-shadow:var(--orbGlow)}
  .orb .geo{position:absolute; inset:22px}
  .orb .geo i{position:absolute; inset:0; border:1px solid rgba(255,255,255,.42); display:block}
  .orb .geo i:first-child{background:rgba(255,255,255,.20); transform:rotate(45deg)}
  .orb .geo i:last-child{background:rgba(255,255,255,.14)}
  .orb .dot{position:absolute; inset:43px; border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(12,40,20,.18)}

  .titles{text-align:center; padding:0 32px}
  .title{font-family:Zain,Cairo,"Noto Sans",sans-serif; font-weight:700; font-size:25px; color:#fff; line-height:1.2}
  .subtitle{font-family:Cairo,sans-serif; font-size:12px; color:rgba(255,255,255,.58); margin-top:3px; min-height:18px}

  .controls{display:flex; justify-content:center; align-items:center; gap:20px; margin-top:12px}
  .round{
    width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center;
    cursor:pointer; flex-direction:column; gap:3px;
  }
  .round:hover{background:rgba(255,255,255,.20)}
  .round i{width:16px; height:1.6px; background:#fff; border-radius:2px; display:block}
  .round i.short{width:10px}
  .heart{position:relative; width:22px; height:20px}
  .heart b,.heart u{position:absolute; background:rgba(255,255,255,.85); display:block}
  .heart b{top:0; width:12px; height:12px; border-radius:50%}
  .heart b.l{left:0} .heart b.r{right:0}
  .heart u{top:4px; left:5px; width:12px; height:12px; transform:rotate(45deg); border-radius:2px}
  .playbtn{
    width:84px; height:84px; border-radius:26px; background:#fff; display:flex; align-items:center;
    justify-content:center; cursor:pointer; box-shadow:0 14px 30px rgba(0,0,0,.34); border:0;
  }
  .playbtn:hover{background:#EEF0FB}
  .playbtn:disabled{opacity:.6; cursor:progress}
  .pause-ico{display:flex; gap:7px}
  .pause-ico i{width:7px; height:30px; background:#1C2050; border-radius:3px; display:block}
  /* سهم التشغيل يشير لليمين دائماً في الاتجاهين */
  .play-ico{width:0; height:0; border-style:solid; border-width:15px 0 15px 22px; border-color:transparent transparent transparent #1C2050}


  /* شريط الصوت */
  .vol{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:14px; padding:0 34px}
  .vol.hidden{display:none}
  .vol .spk{
    background:none; border:0; padding:0; cursor:pointer; width:26px; height:26px; flex:none;
    display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.82);
  }
  .vol .spk:hover{color:#fff}
  .vol input[type=range]{
    -webkit-appearance:none; appearance:none; flex:1; max-width:190px; height:4px; border-radius:3px;
    background:rgba(255,255,255,.22); outline:none; cursor:pointer; direction:ltr;
  }
  .vol input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:15px; height:15px; border-radius:50%;
    background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer;
  }
  .vol input[type=range]::-moz-range-thumb{
    width:15px; height:15px; border:0; border-radius:50%; background:#fff;
    box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer;
  }
  .vol .pct{font-family:Cairo,sans-serif; font-size:10.5px; color:rgba(255,255,255,.5); width:30px; text-align:center; flex:none}

  .wave{display:flex; align-items:center; justify-content:center; gap:3px; height:36px; padding:0 26px; margin-top:10px}  .wave span{width:3px; border-radius:2px; background:rgba(255,255,255,.16); transition:height .28s ease, background .28s linear}
  .times{display:flex; justify-content:space-between; padding:0 30px 12px; font-size:11px; color:rgba(255,255,255,.5); font-family:Cairo,sans-serif}

  .sheet{flex:0 0 auto; background:#FAFAFA; border-radius:26px 26px 0 0; padding:16px 20px 22px; box-shadow:0 -14px 40px rgba(0,0,0,.30)}
  .handle{display:flex; justify-content:center; padding:0 0 10px; cursor:pointer}
  .handle i{width:44px; height:4px; border-radius:2px; background:#DEDEDE; display:block}
  .sheet-head{display:flex; align-items:center; justify-content:space-between; cursor:pointer}
  .sheet-title{font-family:Zain,Cairo,"Noto Sans",sans-serif; font-weight:700; font-size:19px; color:#333}
  .sheet-tools{display:flex; align-items:center; gap:12px}
  .count{font-size:11px; color:var(--brand); font-family:Cairo,"Noto Sans",sans-serif}
  .chev{width:18px; height:12px; position:relative; transition:transform 180ms ease-out}
  .chev i{position:absolute; top:5px; width:11px; height:1.8px; background:#5F5F5F; border-radius:2px; display:block}
  .chev i:first-child{left:0; transform:rotate(45deg)}
  .chev i:last-child{left:7px; transform:rotate(-45deg)}

  .qaris{display:flex; flex-direction:column; max-height:300px; overflow-y:auto; margin-top:2px}
  .qari{
    display:flex; align-items:center; gap:11px; width:100%; text-align:start; cursor:pointer;
    background:none; border:0; border-bottom:1px solid #EFEFEF; padding:9px 4px;
  }
  .qari:hover{background:#F2F3FA}
  .qari .ava{width:58px; height:58px; border-radius:19px; padding:2px; border:2px solid transparent; flex:none}
  .qari.on .ava{border-color:var(--brand)}
  .pic{
    position:relative; width:100%; height:100%; border-radius:15px; background:#E8EDE4; overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    font-family:Zain,Cairo,"Noto Sans",sans-serif; font-weight:700; font-size:22px; color:#AAA;
    box-shadow:0 2px 6px rgba(0,0,0,.10);
  }
  .pic img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s ease}
  .pic img.ready{opacity:1}
  .qari .meta{display:flex; flex-direction:column; gap:2px; min-width:0}
  .qari .name{font-family:Cairo,"Noto Sans",sans-serif; font-size:13.5px; font-weight:600; color:#333; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .qari .sub{font-family:Cairo,"Noto Sans",sans-serif; font-size:10.5px; color:#A0A0A0}
  .qari .fav{margin-inline-start:auto; color:var(--brand); display:flex; align-items:center}
  .channel-row .ava .pic.live{background:linear-gradient(135deg,#5A60DE,#2A3080)}
  .channel-row .live-tag{
    margin-inline-start:auto; font-family:Cairo,"Noto Sans",sans-serif; font-size:9.5px; font-weight:700;
    color:#fff; background:var(--brand); border-radius:999px; padding:3px 8px; letter-spacing:.4px;
  }
  .list .qari{border-bottom:1px solid #EFEFEF}

  .themes{display:flex; flex-direction:column; gap:7px; margin-top:10px}
  .themes>span{font-family:Cairo,sans-serif; font-size:11px; font-weight:600; color:#5F5F5F}
  .swatches{display:flex; flex-wrap:wrap; gap:9px}
  .sw{width:24px; height:24px; border-radius:50%; padding:2px; border:2px solid transparent; cursor:pointer; background:none}
  .sw div{width:100%; height:100%; border-radius:50%}

  /* الطبقات المنبثقة */
  .modal{position:absolute; inset:0; background:rgba(6,14,9,.62); backdrop-filter:blur(3px); display:none; z-index:5}
  .modal.on{display:flex; align-items:flex-end}
  .modal-card{width:100%; max-height:78%; background:#FAFAFA; border-radius:26px 26px 0 0; padding:16px 18px 20px; display:flex; flex-direction:column}
  .modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
  .modal-title{font-family:Zain,Cairo,"Noto Sans",sans-serif; font-weight:700; font-size:19px; color:#333}
  .modal-close{border:0; background:#EFEFEF; color:#555; border-radius:10px; padding:7px 12px; font-family:Cairo,sans-serif; font-size:11px; font-weight:600; cursor:pointer}
  .field{width:100%; padding:10px 13px; border-radius:12px; border:1px solid #E6E6E6; background:#fff; font-family:Cairo,"Noto Sans",sans-serif; font-size:13px; margin-bottom:8px}
  .list{overflow:auto; flex:1}
  .list button{
    width:100%; text-align:start; background:none; border:0; border-bottom:1px solid #EFEFEF; padding:11px 4px;
    font-family:Cairo,"Noto Sans",sans-serif; font-size:13.5px; color:#333; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
  }
  .list button:hover{background:#F2F3FA}
  .list button.on{color:var(--brand); font-weight:700}
  .list .star{color:var(--brand); font-size:12px}
  .lang-row{display:flex; align-items:center; gap:10px}
  .lang-row svg{box-shadow:0 0 0 1px rgba(0,0,0,.08)}
  .empty{font-family:Cairo,sans-serif; font-size:12px; color:#999; padding:14px 4px}
  .chips{display:flex; gap:8px; margin:6px 0 8px}
  .chip{border:1px solid #E6E6E6; background:#fff; border-radius:999px; padding:7px 13px; font-family:Cairo,"Noto Sans",sans-serif; font-size:11.5px; color:#555; cursor:pointer}
  .chip.on{background:var(--brand); border-color:var(--brand); color:#fff; font-weight:700}

  /* نسخة سطح المكتب: مشغل بعرض كامل وقائمة ثابتة على الجانب */
  @media (min-width:900px){
    body{padding:36px 24px 64px}
    .phone{width:min(1060px,94vw); height:min(690px,86vh); border-radius:30px}
    .content{display:grid; grid-template-columns:1fr 380px}
    .top{min-height:0}
    .orbwrap{min-height:230px}
    .title{font-size:31px}
    .wave{height:46px; gap:4px}
    .sheet{
      border-radius:0; padding:22px 22px 20px; overflow:hidden;
      box-shadow:-16px 0 44px rgba(0,0,0,.30);
      display:flex; flex-direction:column;
    }
    [dir=ltr] .sheet{box-shadow:16px 0 44px rgba(0,0,0,.30)}
    .handle, .chev{display:none}
    .sheet-head{cursor:default; margin-bottom:2px}
    #sheetBody{display:flex !important; flex-direction:column; flex:1; min-height:0}
    .qaris{max-height:none; flex:1}
    .themes{margin-top:14px}
    .modal-card{max-width:520px; margin:0 auto; border-radius:26px; max-height:70%}
    .modal.on{align-items:center}
  }

  /* المحتوى النصي المفهرس */
  .seo{max-width:720px; width:100%; color:rgba(255,255,255,.72); line-height:1.9; font-size:14.5px}
  .seo h1{font-family:Zain,Cairo,sans-serif; font-size:26px; color:#fff; margin:0 0 10px; line-height:1.35}
  .seo h2{font-family:Zain,Cairo,sans-serif; font-size:19px; color:#fff; margin:26px 0 8px}
  .seo h3{font-family:Cairo,sans-serif; font-size:14.5px; color:rgba(255,255,255,.92); margin:16px 0 4px; font-weight:600}
  .seo p{margin:0 0 10px}
  .seo ul{margin:0 0 10px; padding-inline-start:20px}
  .seo li{margin-bottom:5px}
  .seo a{color:var(--accent)}
  .seo .langnav{font-size:13px; line-height:2.2}
  .seo .langnav strong{color:#fff}
  .seo footer{margin-top:26px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12); font-size:12.5px; color:rgba(255,255,255,.5)}

  @media (max-width:520px){
    body{padding:0 0 40px; gap:26px}
    .phone{width:100vw; height:100dvh; border-radius:0}
    .toolbar{padding-top:calc(22px + env(safe-area-inset-top))}
    .sheet{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
    .modal-card{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
    .seo{padding:0 20px}
  }
  @media (prefers-reduced-motion:reduce){
    .ring1,.ring2,.orb{animation:none !important}
    .wave span{transition:none}
  }