:root { --bg: #0a0a0d; --surface: #15131a; --text: #f5f3f7; --muted: #9c96a3; --line: rgba(255,255,255,.1); --accent: #ed215b; --accent-bright: #ff6792; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 76% -12%, #2a1025, transparent 31rem), var(--bg); font-family: "Outfit", "Microsoft YaHei", sans-serif; }
a { color: inherit; text-decoration: none; }
.detail-header, .detail-shell, .detail-footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.detail-header { height: 78px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 800; letter-spacing: -.06em; }.brand > span:last-child > span { color: var(--accent); }.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: linear-gradient(135deg, var(--accent-bright), #b30944); font-size: 17px; font-style: italic; }
.back-link { color: #bdb6c2; font-size: 13px; }.back-link span { margin-right: 7px; color: var(--accent-bright); font-size: 17px; }.back-link:hover { color: #fff; }
.detail-hero { display: grid; grid-template-columns: minmax(330px, 1fr) 1fr; gap: clamp(35px, 7vw, 90px); align-items: center; padding: 60px 0 78px; }
.hero-art { min-height: 370px; position: relative; overflow: hidden; display: flex; align-items: end; padding: 28px; background: linear-gradient(140deg, #3c1838, #14131c 70%); box-shadow: 0 24px 54px rgba(0,0,0,.38); }.hero-art::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 70% 24%, rgba(255,106,157,.67), transparent 25%), linear-gradient(0deg, rgba(8,7,10,.83), transparent 65%), repeating-linear-gradient(110deg, transparent 0 28px, rgba(255,255,255,.035) 29px 30px); }.hero-art.is-two { background: linear-gradient(140deg, #20284b, #11121b 70%); }.hero-art.is-three { background: linear-gradient(140deg, #48222a, #151017 70%); }.hero-art.is-four { background: linear-gradient(140deg, #4b3721, #171116 70%); }.hero-index { z-index: 1; color: rgba(255,255,255,.85); font: 80px "DM Mono", monospace; letter-spacing: -.12em; }.hero-hd { position: absolute; z-index: 1; top: 20px; right: 20px; padding: 4px 7px; background: var(--accent); font: 11px "DM Mono", monospace; }
.eyebrow { margin: 0 0 13px; color: var(--accent-bright); font: 11px "DM Mono", monospace; letter-spacing: .15em; }.hero-copy h1 { margin: 0 0 17px; font-size: clamp(33px, 4vw, 50px); letter-spacing: -.055em; line-height: 1.05; }.meta-row { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 13px; }.meta-row span:not(:last-child)::after { content: "•"; margin-left: 12px; color: #514c57; }.meta-row .quality::after { display: none; }.quality { padding: 3px 6px; color: #fff; background: var(--accent); font: 10px "DM Mono", monospace; }.description { max-width: 460px; margin: 24px 0; color: #ada7b1; font-size: 15px; line-height: 1.85; }.actions { display: flex; flex-wrap: wrap; gap: 12px; }.watch-button, .outline-button { min-height: 48px; padding: 0 19px; display: inline-flex; align-items: center; gap: 9px; border-radius: 3px; font-size: 14px; font-weight: 600; }.watch-button { background: linear-gradient(100deg, #de1450, #a52bcf); box-shadow: 0 10px 24px rgba(225,29,93,.25); }.outline-button { border: 1px solid var(--line); color: #ded9e1; }.play-triangle { width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #fff; }
.detail-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; padding-bottom: 80px; }.detail-card { padding: 31px; border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }.detail-card h2 { margin: 0 0 17px; font-size: 24px; letter-spacing: -.035em; }.detail-card > p:not(.eyebrow) { max-width: 630px; margin: 0; color: #aaa4ae; font-size: 14px; line-height: 1.85; }.tags { display: flex; gap: 8px; margin-top: 23px; }.tags span { padding: 6px 10px; border: 1px solid var(--line); color: #aaa3ae; font-size: 12px; }.info-list { margin: 0; }.info-list div { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; }.info-list div:last-child { border: 0; }.info-list dt { color: #8e8793; }.info-list dd { margin: 0; color: #e0d9e3; }
.detail-footer { padding: 25px 0 36px; border-top: 1px solid var(--line); color: #746e79; font-size: 11px; text-align: center; }
@media (max-width: 760px) { .detail-header, .detail-shell, .detail-footer { width: min(100% - 32px, 580px); }.detail-header { height: 66px; }.detail-hero, .detail-grid { grid-template-columns: 1fr; }.detail-hero { gap: 31px; padding: 35px 0 55px; }.hero-art { min-height: 280px; }.detail-grid { padding-bottom: 58px; }.detail-card { padding: 24px 22px; } }