main.wrap { position: relative; isolation: isolate; }
.detail-topbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; padding: 28px 0 34px; }
.detail-topbar .back-link { margin: 0; flex-shrink: 0; }
#title-genres { min-width: 0; margin-left: auto; }
.detail-genres { text-align: right; }
.detail-genres ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 0; padding: 0; list-style: none; }
.detail-genres li { padding: 6px 12px; border: 1px solid #a5bc7855; border-radius: 6px; background: #17201be6; color: var(--text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; backdrop-filter: blur(12px); }
.detail-genres small { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
@media (max-width: 580px) {
    .detail-topbar { flex-wrap: wrap; padding: 23px 0 26px; }
    .detail-genres li { font-size: 11px; padding: 5px 9px; }
}
.film-backdrop { position: absolute; top: 0; left: 0; right: 0; height: 570px; z-index: -1; overflow: hidden; pointer-events: none; border-radius: 0 0 24px 24px; }
.film-backdrop img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.film-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #11131390, #11131310), linear-gradient(0deg, #111313 1%, transparent 90%); }
.title-detail { margin-bottom: 42px; }
.rating { background: #111313b8; backdrop-filter: blur(6px); }
.details-notice { color: var(--muted); padding: 16px 20px; background: #202824; border-radius: 9px; font-size: 14px; line-height: 1.6; }
.film-information { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; padding: 35px 0 45px; border-top: 1px solid var(--line); }
#title-details h2 { font-size: 24px; font-weight: 500; letter-spacing: -.4px; margin: 12px 0 24px; }
.film-synopsis > p:not(.eyebrow) { font-size: 16px; line-height: 1.85; color: #c7cdc5; white-space: pre-line; }
.film-synopsis blockquote { margin: 25px 0 0; border-left: 2px solid var(--accent); padding-left: 18px; color: var(--accent); font-style: italic; line-height: 1.7; }
.film-facts dl { margin: 0; }
.film-facts dl > div { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid #2b3030; font-size: 14px; line-height: 1.55; }
.film-facts dt { color: var(--muted); }
.film-facts dd { margin: 0; }
.film-facts small { color: var(--muted); }
.people-section, .related-section { border-top: 1px solid var(--line); padding: 35px 0 42px; }
#title-details .section-heading { margin-bottom: 20px; gap: 20px; }
#title-details .section-heading h2 { margin: 0; }
.cast-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 20px; }
.local-image { overflow: hidden; }
.person-photo, .related-poster { aspect-ratio: 2 / 3; background: linear-gradient(150deg, #34463c, #1b2320); border-radius: 9px; display: grid; place-items: center; }
.person-photo img, .related-poster img { width: 100%; height: 100%; object-fit: cover; }
.local-image > span { font: 64px Georgia, serif; color: #ffffff30; }
.person-card h3, .related-card h3 { margin: 13px 0 7px; font-size: 15px; line-height: 1.4; font-weight: 500; }
.person-card p, .related-card p { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.person-card:hover h3, .related-card:hover h3, .crew-grid a:hover { color: var(--accent); }
.crew-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 25px 35px; }
.crew-grid p { margin: 8px 0 0; font-size: 15px; line-height: 1.7; }
.related-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 20px; }
.metadata-source { font-size: 12px; color: var(--muted); line-height: 1.7; }
.metadata-source a { color: var(--accent); }
@media (max-width: 900px) {
    .film-information { gap: 30px; grid-template-columns: 1fr 1fr; }
    .film-facts dl > div { grid-template-columns: 110px 1fr; gap: 12px; }
    .cast-grid, .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .film-information { grid-template-columns: 1fr; gap: 25px; }
    .film-backdrop { height: 420px; }
    .film-facts dl > div { grid-template-columns: 130px 1fr; }
    .cast-grid, .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
    .crew-grid { grid-template-columns: 1fr 1fr; gap: 23px; }
    #title-details h2 { font-size: 21px; }
    #title-details .section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .person-card h3, .related-card h3 { font-size: 13px; }
    .film-synopsis > p:not(.eyebrow) { font-size: 15px; }
}