: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}

  /* بنر التطبيق: يظهر على iPhone فقط، ويختفي 14 يوماً بعد إغلاقه */
  .appbar{display:flex; align-items:center; gap:10px; margin:12px 14px 0; padding:10px 12px; border-radius:18px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
  .appbar[hidden]{display:none}
  /* البنر يأخذ مسافة شريط الحالة بدل شريط الأدوات تحته */
  .appbar{margin-top:calc(10px + env(safe-area-inset-top))}
  .appbar:not([hidden]) + .toolbar{padding-top:12px !important}
  .appbar .ic{width:42px; height:42px; border-radius:11px; flex:0 0 auto}
  .appbar .t{flex:1; min-width:0; line-height:1.4; color:#fff}
  .appbar .t b{display:block; font-size:13px}
  .appbar .t span{display:block; font-size:11px; color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .appbar a{background:#fff; color:#1C2050; border-radius:12px; padding:8px 14px; font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap}
  .appbar button{background:none; border:0; color:rgba(255,255,255,.62); font-size:20px; line-height:1; cursor:pointer; padding:2px 4px}
  .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; align-items:center; gap:18px; margin-top:12px}
  .cgroup{flex:1 1 0; display:flex; align-items:center; gap:18px; min-width:0}
  .cgroup.start{justify-content:flex-end}
  .cgroup.end{justify-content:flex-start}
  .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}
  /* أثناء الاتصال: دائرة تحميل تدور حول الزر والسهم باهت، والزر لا يستجيب للضغط */
  .playbtn{position:relative}
  .playbtn .busy-ring{position:absolute; inset:-7px; width:calc(100% + 14px); height:calc(100% + 14px);
    pointer-events:none; opacity:0; transition:opacity .2s; overflow:visible}
  .playbtn .busy-ring rect{fill:none; stroke:var(--accent); stroke-width:4; stroke-linecap:round;
    stroke-dasharray:90 260; animation:busyRun 1.1s linear infinite; animation-play-state:paused}
  .playbtn.busy, .playbtn.busy:disabled{opacity:1; background:rgba(255,255,255,.9); cursor:default}
  .playbtn.busy .busy-ring{opacity:1}
  .playbtn.busy .busy-ring rect{animation-play-state:running}
  .playbtn.busy .play-ico{opacity:.35}
  @keyframes busyRun{to{stroke-dashoffset:-350}}
  @media (prefers-reduced-motion: reduce){ .playbtn .busy-ring rect{animation:none} }
  .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}

  .toast{
    position:fixed; inset-inline:0; bottom:26px; margin:auto; width:max-content; max-width:80%;
    background:rgba(12,16,50,.92); color:#fff; border:1px solid rgba(255,255,255,.16);
    border-radius:14px; padding:10px 18px; font-family:Cairo,sans-serif; font-size:12.5px;
    opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s;
    pointer-events:none; z-index:60;
  }
  .toast.on{opacity:1; transform:translateY(0)}
  .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}
  }

  /* أجهزة اللمس الأعرض من الجوال (iPhone Duo مفتوحاً، الآيباد): التطبيق يملأ الشاشة
     بدل إطار الجوال الوهمي المخصص لسطح المكتب، وإلا ظهر إطار داخل الشاشة وقصّ أسفل المشغل. */
  @media (pointer:coarse) and (min-width:521px) and (max-width:1199px){
    body{padding:0 0 40px; gap:26px}
    .phone{width:100vw; height:100dvh; border-radius:0; box-shadow:none}
    .toolbar{padding-top:calc(22px + env(safe-area-inset-top)); padding-inline:max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right))}
    .sheet{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
    .modal-card{padding-bottom:calc(20px + env(safe-area-inset-bottom))}
    .seo{padding:0 24px}
  }

  /* الجوال أفقياً: الارتفاع يضيق فيهبط زر التشغيل خارج الشاشة.
     نصغّر الكرة والعناوين ونخفي الموجة، فيبقى التحكم ظاهراً. */
  @media (orientation:landscape) and (max-height:520px){
    .phone{height:100dvh}
    .toolbar{padding-top:calc(10px + env(safe-area-inset-top))}
    .orbwrap{min-height:0; flex:0 0 auto; margin-top:2px}
    .orb{width:74px; height:74px}
    .ring1,.ring2{display:none}
    .titles{padding:0 20px; margin-top:4px}
    .title{font-size:18px}
    .subtitle{font-size:11px}
    .controls{gap:12px; margin-top:8px}
    .cgroup{gap:12px}
    .playbtn{width:60px; height:60px; border-radius:18px}
    .round{width:42px; height:42px}
    .wave,.times{display:none}
    .vol{margin-top:8px}
    .sheet{padding:10px 20px 14px}
    .qaris{max-height:120px}
  }
  @media (prefers-reduced-motion:reduce){
    .ring1,.ring2,.orb{animation:none !important}
    .wave span{transition:none}
  }