/* درج الشيلات — راديو خشبي بنسيج سدو */
.shelat-open.pill {
  height: 44px; padding: 0 14px; border-radius: 22px; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(27, 22, 18, 0.82); color: #efe4cc; border: 1px solid #d8ab4c;
  font: 700 15px var(--ui); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  pointer-events: auto; transition: transform 0.12s;
}
.shelat-open.pill:active { transform: scale(0.95); }
.shelat-open.pill:focus-visible { outline: 3px solid #f0be5c; outline-offset: 2px; }
.shelat-open .eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.shelat-open .eq i { width: 3px; height: 4px; background: #d8ab4c; border-radius: 2px; }
.shelat-open.on .eq i { animation: eq 0.9s ease-in-out infinite; }
.shelat-open.on .eq i:nth-child(2) { animation-delay: 0.2s; }
.shelat-open.on .eq i:nth-child(3) { animation-delay: 0.45s; }
.shelat-open.working { box-shadow: 0 0 0 0 rgba(216, 171, 76, 0.7); animation: pulseRing 1.1s ease-in-out infinite; }
#shelatHud { position: absolute; top: calc(64px + var(--safe-t)); right: 10px; }
#menu .shelat-open.pill, #end .shelat-open.pill { position: absolute; top: calc(14px + var(--safe-t)); right: 14px; z-index: 2; }

#shelat {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; width: min(100%, 520px); z-index: 6;
  max-height: 46vh; overflow-y: auto; padding: 0 14px 14px; border-radius: 22px 22px 0 0;
  background: #1b1612; color: #efe4cc; border: 1px solid #d8ab4c; border-bottom: 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
  transform: translateY(105%); transition: transform 0.22s ease-out; touch-action: pan-y;
}
#shelat.in { transform: none; }
@media (max-height: 520px) { #shelat { max-height: 72vh; } }
.sh-sadu {
  height: 10px; margin: 0 -14px 8px;
  background:
    linear-gradient(135deg, transparent 33%, #efe4cc 33%, #efe4cc 50%, transparent 50%) 0 0 / 14px 10px,
    linear-gradient(225deg, transparent 33%, #efe4cc 33%, #efe4cc 50%, transparent 50%) 0 0 / 14px 10px,
    linear-gradient(180deg, #141010 0 2px, #b5321f 2px 8px, #141010 8px);
}
.sh-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sh-head h3 { margin: 0; font: 700 21px var(--kufi); color: #d8ab4c; }
.sh-ai { display: inline-block; margin-top: 2px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(216, 171, 76, 0.16); color: #f0cf84; border: 1px solid rgba(216, 171, 76, 0.5); }
.sh-x { width: 44px; height: 44px; border-radius: 50%; background: #2a211a; color: #efe4cc; font-size: 17px; border: 1px solid rgba(216, 171, 76, 0.5); }
#shelatList { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sh-row {
  width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 6px 10px; text-align: start;
  border-radius: 14px; background: #261d16; color: #efe4cc; border: 1px solid rgba(239, 228, 204, 0.14);
}
.sh-row.cur { border-color: #d8ab4c; background: #34261a; }
.sh-row.bad { border-color: #b5321f; }
.sh-row:disabled { opacity: 0.85; }
.sh-row.busy .sh-ico { animation: pulse 0.9s ease-in-out infinite; }
.sh-row:focus-visible, .sh-x:focus-visible { outline: 3px solid #f0be5c; outline-offset: 2px; }
.sh-ico {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 900;
  background: radial-gradient(circle at 35% 30%, #f0cf84, #b98a2c); color: #241406; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.sh-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sh-txt b { font-size: 17px; }
.sh-txt small { font-size: 12.5px; opacity: 0.8; line-height: 1.4; }
.sh-tag { flex: none; padding: 2px 8px; border-radius: 8px; font-size: 11px; font-weight: 900; background: #d8ab4c; color: #241406; }
#shelatMsg { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: rgba(216, 171, 76, 0.14); font-size: 14px; }
#shelatErr { margin-top: 8px; padding: 10px; border-radius: 12px; background: rgba(181, 50, 31, 0.22); border: 1px solid rgba(255, 130, 100, 0.5); }
#shelatErr p { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.sh-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sh-btn { min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 800; font-size: 15px; background: #d8ab4c; color: #241406; }
.sh-btn.alt { background: #2a211a; color: #efe4cc; border: 1px solid rgba(216, 171, 76, 0.5); }
.sh-vol { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(239, 228, 204, 0.12); }
.sh-vol button { flex: none; width: 44px; height: 44px; border-radius: 50%; font-size: 19px; background: #2a211a; color: #efe4cc; border: 1px solid rgba(216, 171, 76, 0.5); }
.sh-vol .sh-stop { width: auto; padding: 0 14px; border-radius: 22px; font-size: 14px; font-weight: 800; }
#shelatVol { flex: 1; min-width: 0; height: 44px; accent-color: #d8ab4c; touch-action: pan-x; direction: ltr; background: transparent; }

#shelatConfirm { position: fixed; inset: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(10, 6, 3, 0.7); }
.sh-card { width: min(100%, 380px); padding: 20px 18px; border-radius: 20px; text-align: center; background: #1b1612; color: #efe4cc; border: 1px solid #d8ab4c; }
.sh-card h4 { margin: 0 0 8px; font: 700 22px var(--kufi); color: #d8ab4c; }
.sh-price { font-size: 30px; font-weight: 900; color: #f0cf84; margin: 6px 0; }
.sh-card p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; opacity: 0.9; }
.sh-card .sh-btns { justify-content: center; }
.sh-card .sh-btn { flex: 1; }

@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@media (prefers-reduced-motion: reduce) { #shelat { transition: none; } }