/* 前台公共样式（抖音风格） */
*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;}
body{background:#000;color:#fff;max-width:480px;margin:0 auto;min-height:100vh;}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* 顶部导航 */
.top-nav{position:relative;height:44px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;z-index:9;}
.nav-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,0.3);color:#fff;font-size:18px;}

/* 顶部背景图 */
.backdrop-wrap{height:260px;position:relative;margin-top:-44px;background:#222;}
.backdrop-img{width:100%;height:100%;object-fit:cover;}
.avatar-box{position:absolute;left:16px;bottom:-60px;width:110px;height:110px;border-radius:50%;border:3px solid #000;overflow:hidden;background:#333;}
.avatar-img{width:100%;height:100%;object-fit:cover;}

/* 用户信息区 */
.user-info{padding:70px 16px 16px;}
.nickname{font-size:28px;font-weight:bold;margin-bottom:6px;display:flex;align-items:center;gap:8px;}
.vip-badge{font-size:11px;background:linear-gradient(135deg,#ff5b8a,#fe2c55);color:#fff;padding:3px 8px;border-radius:10px;font-weight:600;letter-spacing:1px;}
.douyin-id{color:#aaa;font-size:14px;margin-bottom:20px;}

.data-row{display:flex;gap:32px;margin-bottom:20px;}
.data-item .num{font-size:22px;font-weight:bold;}
.data-item .text{font-size:14px;color:#ccc;}

.bio-text{font-size:15px;line-height:1.6;margin-bottom:12px;white-space:pre-line;}
.ip-tag{background:#222;color:#aaa;font-size:13px;padding:4px 8px;border-radius:4px;display:inline-block;margin-bottom:24px;}

/* 按钮组 */
.action-row{display:flex;gap:10px;margin-bottom:24px;}
.btn-primary{flex:1;height:48px;background:#fe2c55;border:none;border-radius:8px;color:#fff;font-size:17px;font-weight:500;cursor:pointer;}
.btn-vip{flex:1;height:48px;background:linear-gradient(135deg,#ff5b8a,#fe2c55);border:none;border-radius:8px;color:#fff;font-size:17px;font-weight:600;cursor:pointer;}
.btn-secondary{flex:1;height:48px;background:#2a2a2e;border:none;border-radius:8px;color:#fff;font-size:15px;cursor:pointer;}

/* 作品 */
.work-title{display:flex;align-items:center;gap:6px;font-size:20px;padding:0 0 12px;}
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.work-item{position:relative;aspect-ratio:9/16;overflow:hidden;background:#111;}
.work-item.locked::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(2px);}
.work-item .lock-tag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;font-size:12px;background:rgba(255,91,138,.95);color:#000;padding:4px 10px;border-radius:12px;font-weight:600;display:none;}
.work-item.locked .lock-tag{display:inline-flex;align-items:center;gap:4px;}
.work-cover{width:100%;height:100%;object-fit:cover;}
.work-like{position:absolute;left:8px;bottom:8px;font-size:14px;display:flex;align-items:center;gap:4px;z-index:3;text-shadow:0 1px 2px rgba(0,0,0,.6);}

/* 弹窗 */
.modal-mask{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99;display:none;align-items:flex-end;justify-content:center;}
.modal-mask.show{display:flex;}
.modal{background:#1a1a1d;width:100%;max-width:480px;border-radius:16px 16px 0 0;padding:20px 16px 32px;}
.modal h3{font-size:18px;margin-bottom:14px;}
.modal .close{position:absolute;right:14px;top:14px;font-size:20px;color:#888;cursor:pointer;background:none;border:none;}
.plan-list{display:grid;grid-template-columns:1fr;gap:10px;margin:10px 0 16px;}
.plan-card{border:1px solid #2a2a2e;border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:space-between;background:#0f0f10;}
.plan-card .name{font-weight:600;font-size:15px;}
.plan-card .price{color:#fe2c55;font-size:18px;font-weight:700;}
.plan-card .price del{color:#666;font-size:13px;margin-left:6px;font-weight:400;}
.plan-card .days{color:#888;font-size:12px;margin-top:2px;}
.plan-card .desc{color:#aaa;font-size:12px;margin-top:4px;}

/* 视频播放页 - 大屏布局：视频占满大屏，底部按钮始终可见 */
.play-wrap{max-width:480px;margin:0 auto;background:#000;color:#fff;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;}
.video-box{position:relative;width:100%;flex:1;min-height:0;background:#000;overflow:hidden;}
.video-box video{width:100%;height:100%;object-fit:contain;display:block;}
.video-overlay{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;padding:0;background:transparent;pointer-events:none;z-index:5;}
.video-overlay[style*="flex"]{display:flex !important;}
.video-overlay.show{display:flex !important;}
.video-overlay .vip-hint-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:10px 14px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.78) 35%,rgba(0,0,0,.88) 100%);backdrop-filter:blur(8px);pointer-events:auto;border-top:1px solid rgba(254,44,85,.4);box-sizing:border-box;}
.video-overlay .vip-hint-text{color:#fff;font-size:13px;font-weight:500;flex:1;}
.video-overlay .vip-hint-btn{display:inline-block;padding:6px 14px;background:linear-gradient(135deg,#fe2c55,#ff5b8a);color:#fff;border-radius:16px;font-size:12px;font-weight:600;text-decoration:none;flex-shrink:0;white-space:nowrap;}
.play-info{padding:10px 14px 14px;background:#0a0a0a;border-top:1px solid #1a1a1d;flex-shrink:0;max-height:130px;}
.play-info h2{font-size:15px;margin:0 0 2px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.play-info .meta{color:#888;font-size:11px;margin-bottom:4px;}
.play-info .desc{color:#bbb;font-size:12px;line-height:1.4;white-space:pre-line;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;}
.play-actions{display:flex;gap:8px;}
.play-actions .btn-vip,.play-actions .btn-secondary{flex:1;display:block;text-align:center;padding:10px;text-decoration:none;font-size:13px;font-weight:600;border-radius:20px;}

/* 提示 */
.toast{position:fixed;left:50%;top:30%;transform:translateX(-50%);background:rgba(0,0,0,.85);color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;z-index:999;display:none;}
.toast.show{display:block;}

/* 小工具 */
.text-center{text-align:center;}
.muted{color:#888;}
.row{display:flex;gap:10px;align-items:center;}
.spacer{height:24px;}