/* 站内教程视频专用：只影响教程弹窗，不调整兑换页面及后台接口。 */
.tutorial-modal-card.has-local-tutorial {
    width:100%;
    max-width:390px;
    height:auto;
    display:flex;
    flex-direction:column;
    max-height:calc(100vh - 32px);
    max-height:calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
.tutorial-modal-card.has-local-tutorial .tutorial-modal-body {
    flex:0 1 auto;
    min-height:0;
    overflow-y:auto;
    padding:10px;
    -webkit-overflow-scrolling:touch;
}
.tutorial-media.is-local-tutorial {
    aspect-ratio:auto;
    height:auto;
    min-height:0;
    overflow:visible;
    border-radius:12px;
    background:#fff;
}
.local-tutorial-home {
    display:flex;
    flex-direction:column;
    gap:11px;
    border:1px solid #e8eef7;
    padding:14px;
    border-radius:13px;
    background:#fff;
}
.local-tutorial-home[hidden], .local-tutorial-player[hidden],
.local-tutorial-error[hidden] {display:none!important;}
.local-tutorial-intro {display:flex;flex-direction:column;gap:4px;}
.local-tutorial-intro strong {font-size:18px;font-weight:760;color:#17233b;line-height:1.35;}
.local-tutorial-intro span {font-size:12px;color:#73829b;line-height:1.5;}
.local-tutorial-preview {
    position:relative;
    display:block;
    width:100%;
    height:clamp(188px, 54vw, 238px);
    min-height:0;
    overflow:hidden;
    cursor:pointer;
    border:0;
    border-radius:12px;
    background:linear-gradient(150deg,#101928,#1c2f48);
    padding:0;
    -webkit-tap-highlight-color:transparent;
    touch-action:manipulation;
}
.local-tutorial-preview img {width:100%;height:100%;object-fit:contain;display:block;}
.local-tutorial-preview::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.62),transparent 55%);
    pointer-events:none;
}
.local-tutorial-play-icon {
    position:absolute;
    z-index:1;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    display:grid;place-items:center;
    width:58px;height:58px;
    border-radius:50%;
    padding-left:3px;
    background:#269afb;
    box-shadow:0 7px 26px rgba(0,0,0,.28);
    font-size:25px;color:#fff;
}
.local-tutorial-preview-caption {
    position:absolute;
    z-index:1;
    bottom:13px;left:0;right:0;
    font-size:13px;font-weight:670;color:#fff;text-align:center;
}
.local-tutorial-help {font-size:11px;color:#8591a3;text-align:center;line-height:1.5;}
.local-tutorial-player {
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:12px;
    background:#000;
}
.local-tutorial-player video {display:block;width:100%;height:100%;object-fit:contain;background:#000;}
.local-tutorial-error {
    position:absolute;
    bottom:10px;left:10px;right:10px;
    font-size:12px;
    text-align:center;
    line-height:1.5;
    color:#fff;
    background:rgba(30,40,60,.92);
    border-radius:8px;
    padding:9px;
}
@media(max-width:350px){
    .local-tutorial-home {padding:10px;gap:9px;}
    .local-tutorial-intro strong {font-size:16px;}
    .local-tutorial-preview {height:clamp(168px,54vw,215px);}
}
@media (max-height:510px) and (orientation:landscape){
    .tutorial-modal-card.has-local-tutorial .tutorial-modal-body{overflow:auto;}
    .local-tutorial-preview{height:175px;}
    .local-tutorial-player{aspect-ratio:1.65/1;}
}