/* 基本样式（移动优先） */
:root{
    --bg:#f6f7fb;
    --card:#fff;
    --accent:#ff5b5b;
    --muted:#888;
    --nav:#fff;
    --topbar-height:120px;
}
*{box-sizing:border-box}
html,body,#app{height:100%}
body{
    margin:0;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial;
    background:var(--bg);
    color:#222;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:none;
}

/* 顶栏：分类按钮与搜索（固定到顶部） */
.topbar{
    position:fixed;
    top:0;
    left:0;
    right:0;
    padding:12px;
    background:var(--bg);
    z-index:100;
    box-shadow:0 1px 6px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    gap:8px;
}

/* categories 与 search-row 都在固定的 topbar 中 */
.categories{
    display:flex;
    gap:8px;
    overflow:auto;
    padding:6px 4px;
    -webkit-overflow-scrolling:touch;
}
.categories button{
    background:#fff;
    border:1px solid #eee;
    padding:6px 10px;
    border-radius:16px;
    font-size:13px;
    white-space:nowrap;
}
.categories button.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}

.search-row{
    display:flex;
    gap:8px;
    margin-top:0;
}
.search-row input{
    flex:1;
    padding:8px 10px;
    border-radius:8px;
    border:1px solid #e3e6ee;
    background:#fff;
}
.search-row button{
    padding:8px 12px;
    background:var(--accent);
    color:#fff;
    border:none;
    border-radius:8px;
}

/* 主区域和页面（预留 topbar 空间） */
main{
    padding: calc(var(--topbar-height) + 8px) 12px 72px 12px;
    min-height:calc(100vh - 120px);
}
.page{display:none}
.page.active{display:block}

/* 首页网格（两列） */
.video-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
.card{
    background:var(--card);
    border-radius:8px;
    overflow:hidden;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.thumb{
    position:relative;
    width:100%;
    aspect-ratio:16/9;
    background:#ddd;
    display:block;
    overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-body{padding:8px}
.card-title{font-size:14px;line-height:1.2;margin-bottom:6px}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}

/* 列表（收藏/历史） 单列 */
.list{display:flex;flex-direction:column;gap:10px}
.list .card{display:flex;gap:10px}
.list .thumb{flex:0 0 40%;height:auto;aspect-ratio:16/9;border-radius:6px}
.list .card-body{flex:1;padding:8px}

/* 底部导航 */
.bottom-nav{
    position:fixed;
    left:0;right:0;bottom:0;
    height:56px;
    background:var(--nav);
    display:flex;
    justify-content:space-around;
    align-items:center;
    border-top:1px solid #eee;
    z-index:101;
}
.bottom-nav .nav-btn{
    background:transparent;
    border:0;
    font-size:14px;
    padding:6px 10px;
}
.bottom-nav .nav-btn.active{color:var(--accent)}

/* 我的页 */
#meArea{background:var(--card);padding:12px;border-radius:8px}
.me-row{display:flex;align-items:center;gap:12px}
.avatar{width:64px;height:64px;border-radius:50%;background:#ddd;flex:0 0 64px}
.me-info{flex:1}
.login-form{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.login-form input{padding:8px;border-radius:6px;border:1px solid #e3e6ee}
.btn{display:inline-block;padding:8px 12px;border-radius:6px;border:0;background:var(--accent);color:#fff}
.btn.secondary{background:#eee;color:#333}
.muted{background:transparent;border:0;color:var(--muted);padding:8px}

/* 播放弹层 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,0.6);display:flex;justify-content:center;align-items:center;padding:12px;z-index:999}
.modal.hidden{display:none}
/* 默认 modal-inner 样式（可复用） */
.modal-inner{background:#000;padding:8px;border-radius:8px;max-width:960px;width:100%}
.modal-inner video{width:100%;max-height:70vh;background:#000;border-radius:6px}
.close{position:absolute;right:14px;top:12px;background:transparent;border:0;color:#fff;font-size:20px}
.player-title{color:#fff;margin-top:8px;font-size:14px}

/* VIP 弹窗专用样式：让 modal 在窄屏上有左右内边距，并让封面图片撑满弹窗宽度 */
#vipModal .modal-inner{
    max-width:480px;
    width: calc(100% - 24px); /* 保证左右有 12px 间距 */
    padding:12px;
    background:#000;
}
#vipModalContent{
    background:#fff;
    padding:12px;
    border-radius:6px;
    color:#222;
    max-height:60vh;
    overflow:auto;
    display:flex;
    flex-direction:column;
    gap:12px;
}
/* 视频预览区域，封面图全宽 */
#vipVideoPreview{
    display:block;
    width:100%;
    box-sizing:border-box;
}
#vipVideoPreview img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
    border-radius:6px;
}
#vipVideoPreview > div{
    margin-top:8px;
    color:#333;
}

/* 购买方式弹层样式 */
#purchaseModal .modal-inner{
    max-width:420px;
    width: calc(100% - 24px);
    padding:12px;
    background:#000;
}
#purchaseMethodsContent{
    background:#fff;
    padding:12px;
    border-radius:6px;
    color:#222;
}

/* small responsiveness */
@media(min-width:640px){
    .video-grid{grid-template-columns:repeat(3,1fr)}
    :root { --topbar-height:100px; } /* 桌面时减小顶部留白 */
}