/* ---------- detail overlay ---------- */
.detail-screen{
  position:absolute; inset:0; z-index:20;
  background:var(--bg);
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .28s ease;
}
.detail-screen.open{ transform:translateY(0); }
.detail-header{
  display:flex; align-items:center; gap:12px;
  padding:22px 20px 10px; flex-shrink:0;
}
.detail-back{
  width:38px; height:38px; border-radius:12px; flex-shrink:0;
  background:var(--card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-1); cursor:pointer;
}
.detail-back svg{ width:18px; height:18px; transform:rotate(180deg); }
.detail-header span{ font-size:14px; font-weight:700; color:var(--text-2); }
.detail-body{ flex:1; overflow-y:auto; padding:4px 20px 28px; -ms-overflow-style:none; scrollbar-width:none; }
.detail-body::-webkit-scrollbar{ display:none; }
.detail-cover{
  border-radius:var(--radius-lg); min-height:180px; padding:16px;
  display:flex; flex-direction:column; justify-content:flex-end; position:relative; overflow:hidden;
}
.detail-cover::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(5,5,8,.75) 0%, transparent 60%);
  pointer-events:none;
}
.detail-cover .tag{ position:relative; z-index:1; align-self:flex-start; background:rgba(255,255,255,.2); color:#fff; }
.detail-title{ position:relative; z-index:1; font-size:20px; margin-top:10px; }
.detail-meta{ margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.detail-meta .meta-row{ font-size:13px; margin-top:0; }
.detail-meta .meta-row svg{ width:15px; height:15px; }
.detail-desc{ margin-top:16px; font-size:12.5px; line-height:1.7; color:var(--text-2); }
.detail-footer{
  display:flex; align-items:center; gap:14px; margin-top:22px;
  padding-top:18px; border-top:1px solid var(--border);
}
.detail-price{ flex:1; }
.detail-price span{ display:block; font-size:11px; color:var(--text-2); }
.detail-price b{ font-size:20px; font-weight:800; }
.detail-price b.free{ color:var(--green); }
