:root {
    color-scheme: dark;

    --bg: #0b0d12;
    --panel: #151923;
    --panel-2: #1b2130;

    --text: #f3f5f8;
    --muted: #aab1c0;

    --line: rgba(255,255,255,.1);

    --accent: #6e7cff;
    --success: #55d6a3;
}


* {
    box-sizing:border-box;
}


html,
body {

    margin:0;

    min-height:100%;

    background:var(--bg);

    color:var(--text);

    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

}


body {

    overflow-x:hidden;

}



button,
input,
textarea {

    font:inherit;

}


a {

    color:inherit;

}





/* 主体 */

.page-shell {

    width:min(960px, calc(100% - 28px));

    margin:0 auto;

    padding:22px 0 100px;

}





/* 公告 */

.notice-card {

    background:
        linear-gradient(
            135deg,
            #20263a,
            #171b28
        );

    border:1px solid var(--line);

    border-radius:18px;

    padding:18px;

    box-shadow:
        0 18px 50px rgba(0,0,0,.24);

}



.notice-badge {

    display:inline-flex;

    padding:5px 10px;

    border-radius:999px;

    background:rgba(110,124,255,.18);

    color:#cbd1ff;

    font-weight:700;

    font-size:13px;

}



.notice-content {

    margin-top:12px;

    color:var(--muted);

    line-height:1.75;

    word-break:break-word;

}



.notice-content p {

    margin:.35em 0;

}






/* 标题 */


.hero {

    text-align:center;

    padding:22px 8px 12px;

}



.hero h1 {

    margin:0;

    font-size:
        clamp(28px,6vw,48px);

    letter-spacing:-.03em;

}







/* 视频区域 */


.video-card {

    background:var(--panel);

    border:

        1px solid var(--line);


    border-radius:20px;


    padding:14px;


    box-shadow:

        0 20px 60px rgba(0,0,0,.28);

}



/*
 Bunny播放器容器
*/

.video-wrap {

    width:100%;

    overflow:hidden;

    background:#000;

    border-radius:14px;

}



/*
 Bunny官方响应式比例
*/

.bunny-player {

    position:relative;

    width:100%;

    padding-top:56.25%;

}



/*
 iframe必须铺满
*/

.bunny-player iframe {

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    border:0;

}






/* 如果以后恢复video兼容 */

.video-wrap video {

    display:block;

    width:100%;

    height:auto;

    background:#000;

}







/* 联系客服 */

.contact-float {


    position:fixed;


    right:max(18px, env(safe-area-inset-right));


    bottom:max(18px, env(safe-area-inset-bottom));


    z-index:30;



    max-width:
        min(240px, calc(100vw - 36px));



    padding:

        13px 18px;



    border-radius:999px;



    background:var(--accent);



    color:white;



    text-decoration:none;



    font-weight:800;



    white-space:nowrap;



    overflow:hidden;



    text-overflow:ellipsis;



    box-shadow:

        0 14px 35px rgba(42,55,160,.5);

}





/* 按钮 */

.primary-button,
.secondary-button {

    border:0;

    border-radius:12px;

    padding:12px 18px;

    cursor:pointer;

    font-weight:700;

}


.primary-button {

    width:100%;

    background:var(--accent);

    color:white;

}


.secondary-button {

    background:var(--panel-2);

    color:var(--text);

    border:1px solid var(--line);

}



.unlocked-state {

    color:var(--success);

    font-weight:700;

}




/* 弹窗兼容 */

.modal {

    position:fixed;

    inset:0;

    z-index:50;

    display:grid;

    place-items:center;

    padding:18px;

    background:rgba(0,0,0,.72);

}



.modal-card {

    width:min(420px,100%);

    background:var(--panel);

    border:1px solid var(--line);

    border-radius:20px;

    padding:24px;

}





.hidden {

    display:none!important;

}







/* 手机端 */

@media(max-width:640px){


    .page-shell {

        width:
        min(100% - 20px,960px);

        padding-top:10px;

    }



    .notice-card {

        border-radius:15px;

        padding:15px;

    }



    .video-card {

        padding:8px;

        border-radius:16px;

    }



    .video-wrap {

        border-radius:11px;

    }


}