/* ============================================
   抖音风格影视模板 - Douyin Video Template
   设计理念：简洁、沉浸、竖屏优先、短视频风格
   ============================================ */

*{padding:0;margin:0;box-sizing:border-box;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
ul,ol,dl,li{list-style:none;}
input,textarea,select{font-family:inherit;font-size:inherit;}
input{outline:none;border:none;background:none;}
textarea{resize:none;}
img{max-width:100%;border:0;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;}

/* ---------- 变量 ---------- */
:root{
    --primary:#fe2c55;
    --primary-dark:#e61e45;
    --secondary:#25f4ee;
    --success:#52c41a;
    --warning:#faad14;
    --text:#fff;
    --text-secondary:rgba(255,255,255,0.6);
    --text-muted:rgba(255,255,255,0.3);
    --bg:#121212;
    --bg-card:#1e1e1e;
    --bg-hover:#2a2a2a;
    --border:rgba(255,255,255,0.1);
    --shadow:0 2px 8px rgba(0,0,0,0.3);
    --radius:12px;
    --radius-sm:8px;
    --radius-lg:16px;
}

/* ---------- 全局 ---------- */
html,body{
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    font-size:14px;
    color:var(--text);
    background:var(--bg);
    line-height:1.6;
    overflow-x:hidden;
}
body{padding-bottom:60px;}
.container{max-width:100%;padding:0 12px;}

/* ---------- 顶部导航 ---------- */
.header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    height:50px;
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    display:flex;
    align-items:center;
    justify-content:center;
}
.header-inner{
    width:100%;
    max-width:600px;
    padding:0 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.header-title{
    font-size:17px;
    font-weight:600;
}
.header-back,.header-action{
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:18px;
}

/* ---------- 底部导航 ---------- */
.tab-bar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
    height:56px;
    background:rgba(0,0,0,0.95);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-around;
}
.tab-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:var(--text-secondary);
    font-size:10px;
    transition:var(--transition);
    -webkit-tap-highlight-color:transparent;
}
.tab-item i{font-size:22px;}
.tab-item.active{color:var(--primary);}
.tab-item.tab-plus{
    position:relative;
}
.tab-plus-btn{
    width:44px;
    height:32px;
    background:linear-gradient(135deg,var(--primary),#ff6b6b);
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    font-weight:bold;
    margin-top:-8px;
    box-shadow:0 4px 12px rgba(254,44,85,0.4);
}
.tab-item.tab-center{
    flex:0.8;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ---------- 首页轮播 ---------- */
.home-banner{
    position:relative;
    height:calc(100vh - 106px);
    overflow:hidden;
    background:#000;
}
.banner-slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity 0.5s ease;
}
.banner-slide.active{opacity:1;}
.banner-slide video,
.banner-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.banner-content{
    position:absolute;
    bottom:80px;
    left:16px;
    right:60px;
    color:#fff;
}
.banner-title{
    font-size:18px;
    font-weight:bold;
    margin-bottom:8px;
    text-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.banner-info{
    font-size:13px;
    color:rgba(255,255,255,0.8);
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}
.banner-actions{
    position:absolute;
    right:16px;
    bottom:80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
}
.banner-action-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:4px;
    color:#fff;
}
.banner-action-btn i{font-size:28px;}
.banner-action-btn span{font-size:11px;opacity:0.9;}
.banner-avatar{
    width:48px;
    height:48px;
    border-radius:50%;
    border:2px solid var(--primary);
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    font-size:18px;
    font-weight:bold;
    color:#fff;
}

/* ---------- 首页推荐列表 ---------- */
.home-section{
    padding:20px 0;
}
.section-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
}
.section-title{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:16px;
    font-weight:600;
}
.section-title::before{
    content:"";
    width:3px;
    height:16px;
    background:var(--primary);
    border-radius:2px;
}

/* ---------- 视频卡片（竖屏风格） ---------- */
.video-card-v{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--bg-card);
    cursor:pointer;
}
.video-card-v .cover{
    position:relative;
    padding-top:133%;
    background:#000;
    overflow:hidden;
}
.video-card-v .cover img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.3s ease;
}
.video-card-v:hover .cover img{transform:scale(1.05);}
.video-card-v .duration{
    position:absolute;
    bottom:8px;
    right:8px;
    padding:2px 6px;
    background:rgba(0,0,0,0.7);
    color:#fff;
    font-size:11px;
    border-radius:4px;
}
.video-card-v .tag{
    position:absolute;
    top:8px;
    left:8px;
    padding:2px 8px;
    background:var(--primary);
    color:#fff;
    font-size:10px;
    border-radius:4px;
}
.video-card-v .info{
    padding:12px;
}
.video-card-v .title{
    font-size:14px;
    font-weight:500;
    margin-bottom:8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.4;
}
.video-card-v .meta{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:12px;
    color:var(--text-secondary);
}
.video-card-v .meta span{display:flex;align-items:center;gap:4px;}

/* ---------- 片库页面 ---------- */
.warehouse{
    padding-top:50px;
    min-height:100vh;
}
.warehouse-header{
    position:fixed;
    top:50px;
    left:0;
    right:0;
    z-index:90;
    background:var(--bg);
    padding:12px 0;
}
.warehouse-cate{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:0 12px;
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.warehouse-cate::-webkit-scrollbar{display:none;}
.cate-btn{
    flex-shrink:0;
    padding:6px 16px;
    background:var(--bg-card);
    color:var(--text-secondary);
    font-size:13px;
    border-radius:16px;
    transition:var(--transition);
    white-space:nowrap;
}
.cate-btn:hover{color:var(--text);}
.cate-btn.active{background:var(--primary);color:#fff;}

.warehouse-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    padding:80px 12px 20px;
}
.warehouse-card{
    position:relative;
    border-radius:var(--radius);
    overflow:hidden;
    background:var(--bg-card);
}
.warehouse-card .cover{
    position:relative;
    padding-top:133%;
    background:#000;
}
.warehouse-card .cover img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
}
.warehouse-card .duration{
    position:absolute;
    bottom:6px;
    right:6px;
    padding:2px 5px;
    background:rgba(0,0,0,0.8);
    color:#fff;
    font-size:10px;
    border-radius:3px;
}
.warehouse-card .score{
    position:absolute;
    top:6px;
    right:6px;
    padding:2px 6px;
    background:linear-gradient(135deg,var(--primary),#ff6b6b);
    color:#fff;
    font-size:10px;
    font-weight:bold;
    border-radius:3px;
}
.warehouse-card .info{padding:10px;}
.warehouse-card .title{
    font-size:13px;
    font-weight:500;
    margin-bottom:4px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.warehouse-card .meta{
    font-size:11px;
    color:var(--text-muted);
}

/* ---------- 收藏页面 ---------- */
.favorite-page{
    padding-top:50px;
    min-height:100vh;
}
.favorite-list{
    padding:70px 12px 20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.favorite-item{
    display:flex;
    gap:12px;
    padding:12px;
    background:var(--bg-card);
    border-radius:var(--radius);
}
.favorite-item .cover{
    width:100px;
    height:60px;
    border-radius:var(--radius-sm);
    overflow:hidden;
    flex-shrink:0;
}
.favorite-item .cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.favorite-item .info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.favorite-item .title{
    font-size:14px;
    font-weight:500;
    margin-bottom:4px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.favorite-item .meta{
    font-size:12px;
    color:var(--text-secondary);
}
.favorite-item .actions{
    display:flex;
    align-items:center;
    gap:8px;
}
.favorite-item .actions span{
    padding:4px 10px;
    background:var(--bg-hover);
    color:var(--text-secondary);
    font-size:12px;
    border-radius:4px;
    cursor:pointer;
}
.favorite-item .actions span:hover{color:var(--primary);}

/* ---------- 我的页面 ---------- */
.mine-page{
    min-height:100vh;
    padding-bottom:70px;
}
.mine-header{
    position:relative;
    padding:60px 20px 30px;
    background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);
    text-align:center;
}
.mine-avatar{
    width:70px;
    height:70px;
    border-radius:50%;
    border:3px solid var(--primary);
    margin:0 auto 12px;
    overflow:hidden;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:bold;
    color:#fff;
}
.mine-name{
    font-size:18px;
    font-weight:600;
    margin-bottom:4px;
}
.mine-id{
    font-size:12px;
    color:var(--text-secondary);
}
.mine-vip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    padding:6px 14px;
    background:linear-gradient(135deg,var(--primary),#ff6b6b);
    border-radius:14px;
    font-size:12px;
    font-weight:500;
}
.mine-vip i{font-size:14px;}

.mine-stats{
    display:flex;
    justify-content:center;
    gap:40px;
    padding:20px;
    background:var(--bg-card);
    border-radius:var(--radius);
    margin:0 12px;
}
.stat-item{
    text-align:center;
}
.stat-value{
    font-size:20px;
    font-weight:bold;
    color:var(--primary);
}
.stat-label{
    font-size:11px;
    color:var(--text-secondary);
    margin-top:2px;
}

.mine-section{
    margin:16px 12px;
}
.mine-section-title{
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
    padding-left:8px;
    border-left:3px solid var(--primary);
}
.mine-menu{
    background:var(--bg-card);
    border-radius:var(--radius);
    overflow:hidden;
}
.menu-item{
    display:flex;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid var(--border);
    transition:var(--transition);
}
.menu-item:last-child{border-bottom:none;}
.menu-item:hover{background:var(--bg-hover);}
.menu-item i{
    width:24px;
    font-size:18px;
    color:var(--primary);
    margin-right:12px;
}
.menu-item .icon-bg{
    width:32px;
    height:32px;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:12px;
    font-size:16px;
    color:#fff;
}
.menu-item .text{flex:1;}
.menu-item .title{font-size:14px;}
.menu-item .desc{font-size:11px;color:var(--text-secondary);margin-top:2px;}
.menu-item .arrow{
    color:var(--text-muted);
    font-size:14px;
}
.menu-item .value{
    font-size:14px;
    color:var(--text-secondary);
    margin-right:8px;
}

/* ---------- VIP页面 ---------- */
.vip-page{
    padding-top:50px;
    min-height:100vh;
}
.vip-header{
    position:relative;
    padding:40px 20px;
    background:linear-gradient(135deg,var(--primary) 0%,#ff6b6b 100%);
    text-align:center;
    border-radius:0 0 30px 30px;
}
.vip-icon{
    width:60px;
    height:60px;
    background:rgba(255,255,255,0.2);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 12px;
}
.vip-icon i{font-size:28px;color:#fff;}
.vip-title{
    font-size:22px;
    font-weight:bold;
    color:#fff;
    margin-bottom:4px;
}
.vip-subtitle{
    font-size:13px;
    color:rgba(255,255,255,0.8);
}

.vip-packages{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    padding:20px 12px;
    margin-top:-30px;
}
.vip-package{
    background:var(--bg-card);
    border:2px solid var(--border);
    border-radius:var(--radius);
    padding:16px 8px;
    text-align:center;
    cursor:pointer;
    transition:var(--transition);
}
.vip-package:hover,.vip-package.active{border-color:var(--primary);}
.vip-package.active{background:rgba(254,44,85,0.1);}
.vip-package .tag{
    display:inline-block;
    padding:2px 8px;
    background:var(--primary);
    color:#fff;
    font-size:10px;
    border-radius:8px;
    margin-bottom:8px;
}
.vip-package .price{
    font-size:22px;
    font-weight:bold;
    color:var(--primary);
}
.vip-package .price span{font-size:12px;font-weight:normal;}
.vip-package .original{
    font-size:11px;
    color:var(--text-muted);
    text-decoration:line-through;
    margin-top:2px;
}
.vip-package .name{
    font-size:13px;
    font-weight:500;
    margin-top:6px;
}
.vip-package .desc{
    font-size:10px;
    color:var(--text-secondary);
    margin-top:4px;
}

.vip-privileges{
    margin:20px 12px;
}
.vip-privileges h3{
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
}
.privilege-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:10px;
}
.privilege-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    background:var(--bg-card);
    border-radius:var(--radius-sm);
}
.privilege-item i{
    font-size:20px;
    color:var(--primary);
}
.privilege-item span{font-size:12px;}

.vip-pay{
    padding:20px 12px;
}
.vip-pay h3{
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
}
.pay-methods{
    display:flex;
    gap:12px;
}
.pay-method{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px;
    background:var(--bg-card);
    border:2px solid var(--border);
    border-radius:var(--radius);
    cursor:pointer;
    transition:var(--transition);
}
.pay-method:hover,.pay-method.active{border-color:var(--primary);}
.pay-method i{font-size:20px;}
.pay-method span{font-size:13px;}
.pay-method.alipay i{color:#1677ff;}
.pay-method.wechat i{color:#07c160;}

.vip-submit{
    padding:20px 12px;
}
.vip-submit button{
    width:100%;
    height:48px;
    background:linear-gradient(135deg,var(--primary),#ff6b6b);
    color:#fff;
    font-size:16px;
    font-weight:600;
    border-radius:var(--radius);
    border:none;
    cursor:pointer;
}

/* ---------- 分享页面 ---------- */
.share-card{
    margin:20px 12px;
    padding:20px;
    background:var(--bg-card);
    border-radius:var(--radius);
    text-align:center;
}
.share-code{
    width:160px;
    height:160px;
    margin:0 auto 16px;
    background:#fff;
    border-radius:var(--radius);
    display:flex;
    align-items:center;
    justify-content:center;
}
.share-code img{width:140px;height:140px;}
.share-link{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    background:var(--bg);
    border-radius:var(--radius-sm);
    margin-bottom:16px;
}
.share-link input{
    flex:1;
    background:none;
    border:none;
    color:var(--text-secondary);
    font-size:12px;
}
.share-link button{
    padding:6px 12px;
    background:var(--primary);
    color:#fff;
    font-size:12px;
    border-radius:4px;
}
.share-btns{
    display:flex;
    justify-content:center;
    gap:16px;
}
.share-btn{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--text-secondary);
    font-size:11px;
}
.share-btn i{
    width:40px;
    height:40px;
    border-radius:50%;
    background:var(--bg);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}
.share-btn:hover{color:var(--primary);}

.invite-stats{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin:16px 12px;
}
.invite-stat{
    padding:16px;
    background:var(--bg-card);
    border-radius:var(--radius);
    text-align:center;
}
.invite-stat .value{
    font-size:24px;
    font-weight:bold;
    color:var(--primary);
}
.invite-stat .label{
    font-size:12px;
    color:var(--text-secondary);
    margin-top:4px;
}

/* ---------- 佣金明细 ---------- */
.commission-list{
    margin:70px 0 20px;
}
.commission-item{
    display:flex;
    align-items:center;
    padding:14px 16px;
    background:var(--bg-card);
    border-bottom:1px solid var(--border);
}
.commission-item:last-child{border-bottom:none;}
.commission-info{flex:1;}
.commission-title{font-size:14px;margin-bottom:4px;}
.commission-time{font-size:11px;color:var(--text-secondary);}
.commission-amount{
    font-size:16px;
    font-weight:600;
    color:var(--success);
}

/* ---------- 搜索页 ---------- */
.search-page{
    padding-top:50px;
    min-height:100vh;
}
.search-bar{
    position:fixed;
    top:50px;
    left:0;
    right:0;
    z-index:90;
    padding:12px;
    background:var(--bg);
}
.search-input-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:var(--bg-card);
    border-radius:20px;
}
.search-input-wrap i{color:var(--text-secondary);}
.search-input-wrap input{
    flex:1;
    background:none;
    border:none;
    color:#fff;
    font-size:14px;
}
.search-input-wrap input::placeholder{color:var(--text-muted);}
.search-history{
    padding:16px 12px;
}
.search-history h3{
    font-size:14px;
    font-weight:500;
    margin-bottom:12px;
    color:var(--text-secondary);
}
.search-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.search-tag{
    padding:6px 14px;
    background:var(--bg-card);
    border-radius:14px;
    font-size:13px;
    color:var(--text-secondary);
}
.search-tag:hover{color:var(--primary);}

/* ---------- 视频详情页 ---------- */
.detail-page{
    min-height:100vh;
    padding-bottom:80px;
}
.detail-cover{
    position:relative;
    height:60vh;
    background:#000;
}
.detail-cover img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.detail-cover::after{
    content:"";
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:100px;
    background:linear-gradient(transparent,var(--bg));
}
.detail-content{
    position:relative;
    margin-top:-60px;
    padding:0 16px;
    z-index:10;
}
.detail-title{
    font-size:20px;
    font-weight:bold;
    margin-bottom:12px;
}
.detail-meta{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    font-size:13px;
    color:var(--text-secondary);
    margin-bottom:16px;
}
.detail-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:20px;
}
.detail-tag{
    padding:4px 12px;
    background(var(--bg-card));
    font-size:12px;
    border-radius:12px;
}
.detail-desc{
    font-size:14px;
    line-height:1.7;
    color:var(--text-secondary);
    margin-bottom:24px;
}
.detail-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
    margin-bottom:24px;
}
.detail-action{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:14px;
    background:var(--bg-card);
    border-radius:var(--radius);
}
.detail-action i{font-size:22px;}
.detail-action span{font-size:12px;color:var(--text-secondary);}

.detail-episode{
    margin-top:20px;
}
.detail-episode h3{
    font-size:15px;
    font-weight:600;
    margin-bottom:12px;
}
.episode-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}
.episode-item{
    padding:10px;
    background:var(--bg-card);
    text-align:center;
    font-size:13px;
    border-radius:var(--radius-sm);
}
.episode-item:hover,.episode-item.active{background:var(--primary);}

/* ---------- 播放器 ---------- */
.player-page{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:#000;
    z-index:200;
}
.player-video{
    width:100%;
    height:100%;
    object-fit:contain;
}
.player-controls{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    padding:20px;
    background:linear-gradient(transparent,rgba(0,0,0,0.8));
}
.player-progress{
    width:100%;
    height:4px;
    background:rgba(255,255,255,0.3);
    border-radius:2px;
    margin-bottom:16px;
    cursor:pointer;
}
.player-progress-bar{
    height:100%;
    background:var(--primary);
    border-radius:2px;
    width:35%;
}
.player-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:48px;
    height:48px;
    background:rgba(255,255,255,0.2);
    border-radius:50%;
    color:#fff;
    font-size:20px;
}
.player-info{
    position:absolute;
    top:50px;
    left:16px;
    right:60px;
}
.player-title{font-size:16px;font-weight:500;margin-bottom:4px;}
.player-episode{font-size:13px;color:rgba(255,255,255,0.7);}
.player-close{
    position:absolute;
    top:50px;
    right:16px;
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:20px;
}

/* ---------- 弹窗/Modal ---------- */
.modal{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background:rgba(0,0,0,0.8);
    z-index:300;
    display:none;
    align-items:flex-end;
    justify-content:center;
}
.modal.active{display:flex;}
.modal-content{
    width:100%;
    max-width:500px;
    max-height:80vh;
    background:var(--bg-card);
    border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding:20px;
    transform:translateY(100%);
    transition:transform 0.3s ease;
}
.modal.active .modal-content{transform:translateY(0);}
.modal-handle{
    width:40px;
    height:4px;
    background:var(--border);
    border-radius:2px;
    margin:0 auto 20px;
}

/* ---------- 空状态 ---------- */
.empty-state{
    padding:80px 40px;
    text-align:center;
}
.empty-state i{
    font-size:60px;
    color:var(--text-muted);
    margin-bottom:16px;
}
.empty-state p{
    font-size:14px;
    color:var(--text-secondary);
}

/* ---------- Toast ---------- */
.toast{
    position:fixed;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    padding:12px 24px;
    background:rgba(0,0,0,0.8);
    color:#fff;
    font-size:14px;
    border-radius:var(--radius);
    z-index:400;
    opacity:0;
    transition:opacity 0.3s ease;
}
.toast.show{opacity:1;}

/* ---------- 加载 ---------- */
.loading{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px;
}
.loading::after{
    content:"";
    width:24px;
    height:24px;
    border:3px solid var(--border);
    border-top-color:var(--primary);
    border-radius:50%;
    animation:spin 0.8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- 响应式 ---------- */
@media (min-width:768px){
    .container{max-width:600px;margin:0 auto;}
    .warehouse-grid{grid-template-columns:repeat(3,1fr);}
    .vip-packages{grid-template-columns:repeat(3,1fr);}
    .privilege-list{grid-template-columns:repeat(4,1fr);}
}
@media (max-width:375px){
    .video-card-v .title{font-size:13px;}
    .mine-stats{gap:20px;}
    .stat-value{font-size:18px;}
}