.van-material-detail { position: fixed; z-index: 3000; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--van-gray-2); }
.van-material-detail__banner { position: absolute; top: 0; right: 0; left: 0; height: 320px; overflow: hidden; background: var(--van-gray-8); }
.van-material-detail__swipe { height: 320px; touch-action: pan-y; }
.van-material-detail__image { width: 100%; height: 310px; }
.van-material-detail__dots { position: absolute; z-index: 2; top: 226px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); }
.van-material-detail__dots > i { width: 6px; height: 6px; background: rgb(255 255 255 / 55%); border-radius: 50%; }
.van-material-detail__dot--active { background: var(--van-white) !important; }
.van-material-detail__close { position: absolute; z-index: 1; top: 56px; left: var(--van-padding-md); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--van-gray-9); background: var(--van-gray-3); border: 0; border-radius: 50%; box-shadow: 0 2px 5px rgb(27 33 41 / 10%); }
.van-material-detail__content { position: relative; z-index: 1; display: flex; flex: 1; flex-direction: column; box-sizing: border-box; min-height: 0; margin-top: 246px; padding-top: var(--van-padding-sm); overflow: hidden; background: var(--van-white); border-radius: 16px 16px 0 0; }
.van-material-detail__body { flex: 1; min-height: 0; padding: var(--van-padding-md) var(--van-padding-md) 24px; overflow-y: auto; }
.van-material-detail__section + .van-material-detail__section { margin-top: 24px; }
.van-material-detail__section .van-blue-mark-header { margin-bottom: 8px; padding: 0; }
.van-material-detail__card { padding: 8px 12px; color: var(--van-gray-9); font-size: var(--van-font-size-md); line-height: var(--van-line-height-lg); background: linear-gradient(90deg, var(--van-gray-2), rgb(241 244 246 / 20%)); border-radius: 8px; }
.van-material-detail__info-rows { display: flex; flex-direction: column; gap: 8px; }
.van-material-detail-enter-active { transition: transform var(--van-animation-duration-fast) var(--van-animation-timing-function-enter); will-change: transform; }
.van-material-detail-leave-active { transition: transform var(--van-animation-duration-fast) var(--van-animation-timing-function-leave); will-change: transform; }
.van-material-detail-enter-from, .van-material-detail-leave-to { transform: translateY(100%); }
.van-material-detail-section-enter-active, .van-material-detail-section-leave-active { overflow: hidden; transition: max-height .2s ease, opacity .2s ease; }
.van-material-detail-section-enter-from, .van-material-detail-section-leave-to { max-height: 0; opacity: 0; }
.van-material-detail-section-enter-to, .van-material-detail-section-leave-from { max-height: 480px; opacity: 1; }