/* ==========================================================================
   item.css — کشوی عمومی (موبایل: از پایین / کامپیوتر: از کنار) + صفحه‌ی اختصاصی اثر
   فقط از متغیرهای style.css استفاده می‌کند؛ پس با همه‌ی رنگ‌ها و حالت شب/روز هماهنگ است
   ========================================================================== */

/* ---------- کشو ---------- */
dialog.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; height: auto;
  max-height: 82vh; max-height: 82dvh; overflow: auto; padding: 0;
  background: var(--dlg); color: var(--text);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 50px rgba(var(--vrgb), 0.28);
}
dialog.sheet[open] { animation: shUp 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
dialog.sheet::backdrop { background: rgba(2, 1, 6, 0.6); backdrop-filter: blur(3px); }
@keyframes shUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes shSide { from { transform: translateX(-100%); } to { transform: none; } }

.sh-grab { width: 42px; height: 4px; border-radius: 9px; background: var(--line); margin: 0.6rem auto 0.2rem; }
.sh-in { padding: 0.4rem 1rem 1.3rem; }
.sh-t { font-size: 1rem; color: var(--soft); margin: 0.3rem 0.2rem 0.7rem; font-weight: 700; }
.sh-row {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: right;
  font: inherit; color: var(--text); background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.9rem; margin: 0 0 0.5rem;
  cursor: pointer; transition: 0.2s; text-decoration: none;
}
.sh-row:hover { border-color: var(--violet); }
.sh-row[hidden] { display: none; }
.sh-row i { font-style: normal; font-size: 1.25rem; flex: none; }
.sh-row span { display: flex; flex-direction: column; line-height: 1.5; min-width: 0; }
.sh-row small { color: var(--muted); font-size: 0.76rem; }
.sh-row.danger { color: #ff9aab; border-color: rgba(255, 95, 122, 0.4); }
.sh-row:disabled { opacity: 0.6; cursor: wait; }
.sh-lyr { white-space: pre-wrap; line-height: 2; font-size: 0.98rem; padding: 0.2rem 0.3rem 0.6rem; }

@media (min-width: 760px) {
  dialog.sheet {
    inset: 0 auto 0 0; width: 380px; height: 100vh; height: 100dvh; max-height: none;
    border: 1px solid var(--line); border-left: 0; border-radius: 0 22px 22px 0;
    box-shadow: 10px 0 50px rgba(var(--vrgb), 0.25);
  }
  dialog.sheet[open] { animation-name: shSide; }
  .sh-grab { display: none; }
  .sh-in { padding-top: 1.2rem; }
}

/* ---------- صفحه‌ی اثر ---------- */
.ip { max-width: 880px; margin: 0 auto; }
.ip .top { padding-bottom: 0.7rem; }
.ip-card { border: 1px solid var(--line); border-radius: 22px; background: var(--dlg); }
.ip-card .mh { padding: 0.9rem 0.9rem 0; }
.ip-card .mh img { max-height: 72vh; margin: 0 auto; }
.ip-card .db { padding: 1.1rem 1.4rem 1.6rem; }
.ip-card .db h1 { font-size: 1.6rem; line-height: 1.5; }
.ip-card .db p { line-height: 2; }
.ip-ph { display: grid; place-items: center; font-size: 4.5rem; padding: 2.6rem 0 0.6rem; }
.ip-rate { color: var(--ratec); margin-top: 0.5rem; font-size: 1.05rem; }

/* پخش‌کننده‌ی ساده */
.ipl {
  display: flex; align-items: center; gap: 0.7rem; margin: 0.9rem 0 0.3rem; padding: 0.55rem 0.7rem;
  border: 1px solid var(--line); border-radius: 16px; background: var(--card);
}
.ipl input[type=range] { flex: 1; min-width: 0; accent-color: var(--violet); }
.ipl output { font-size: 0.78rem; color: var(--muted); white-space: nowrap; direction: ltr; }
.ipl .chip { flex: none; }

/* آثار مشابه (از کلاس‌های .sim و .sm خود style.css استفاده می‌شود) */
.ip-card .sim { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }

.ip-end { text-align: center; margin: 1.4rem 0 0; }