:root{--bg:#f5f5f5;--ink:#222;--muted:#8a8a8a;--line:#e5e5e5;--dark:#151515;--red:#f22635;--card:#fff}*{box-sizing:border-box}html{background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--ink);font:14px/1.4 Arial,Helvetica,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}.app{width:100%;min-height:100dvh;padding-bottom:70px}.top{position:sticky;top:0;z-index:8;background:var(--dark);color:#fff;box-shadow:0 2px 8px #0002}.head{height:55px;display:flex;align-items:center;gap:12px;padding:0 14px}.logo{flex:none;display:flex;align-items:center;gap:7px;font-size:19px;font-weight:750;letter-spacing:.02em;color:#fff;text-decoration:none}.logo-mark{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;padding-left:2px;background:var(--red);color:#fff;font-size:11px}.head-right{margin-left:auto;display:flex;align-items:center;gap:9px}.language{max-width:92px;height:31px;padding:0 5px;border-radius:5px;border:1px solid #4a4a4a;background:#252525;color:#fff;font-size:11px}.menu-button{width:34px;height:34px;border-radius:5px;background:#262626;color:#fff;font-size:18px}.searchbar{height:46px;padding:0 13px 10px;display:flex;gap:7px}.searchbar input{flex:1;min-width:0;border:0;border-radius:5px;background:#2a2a2a;color:#fff;padding:0 12px;outline:none;font-size:13px}.searchbar input::placeholder{color:#a9a9a9}.searchbar button{width:45px;border-radius:5px;background:var(--red);color:#fff;font-size:17px}.categories{display:flex;gap:7px;overflow:auto;padding:11px 13px;background:#fff;border-bottom:1px solid var(--line);scrollbar-width:none}.categories::-webkit-scrollbar{display:none}.cat{flex:none;padding:7px 12px;border-radius:18px;background:#f1f1f1;color:#565656;font-size:12px;font-weight:650;white-space:nowrap}.cat.active{background:#242424;color:#fff}.page{max-width:1080px;margin:0 auto;padding:0 12px}.section-head{display:flex;align-items:center;justify-content:space-between;margin:5px 1px 10px}.section-title{font-size:17px;font-weight:750;letter-spacing:-.3px}.sort{border:1px solid #e2e2e2;border-radius:5px;background:#fff;padding:7px 9px;color:#666;font-size:11px}.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px}.video-card{min-width:0;background:#fff;border-radius:6px;overflow:hidden;cursor:pointer;box-shadow:0 1px 3px #0000000d}.thumb{width:100%;aspect-ratio:16/10;position:relative;overflow:hidden;background:linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d)}.thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,#0008)}.thumb .shape{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#ffffff96;text-shadow:0 2px 10px #0004}.thumb .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#1119;color:#fff;font-size:15px;padding-left:2px;border:1px solid #ffffff88;opacity:.92}.thumb .duration{position:absolute;right:6px;bottom:6px;border-radius:3px;padding:2px 5px;background:#000b;color:#fff;font-size:10px}.thumb.t2{background:linear-gradient(135deg,#252138,#8e738e 55%,#e4bd9b)}.thumb.t3{background:linear-gradient(135deg,#173b39,#4b9a86 52%,#d4d190)}.thumb.t4{background:linear-gradient(135deg,#2e2936,#9675a5 54%,#e8a1a7)}.thumb.t5{background:linear-gradient(135deg,#23495a,#51a4bd 54%,#e6d9a3)}.thumb.t6{background:linear-gradient(135deg,#48412f,#a89059 55%,#d3c5aa)}.thumb.t7{background:linear-gradient(135deg,#222a31,#697d8c 55%,#bcc7ce)}.video-info{padding:8px 8px 9px}.video-title{font-size:12px;line-height:1.35;font-weight:650;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px}.video-meta{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:6px;color:#929292;font-size:10px}.meta-left{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty{display:none;text-align:center;padding:36px 12px;color:#888;font-size:13px}.toast{position:fixed;z-index:20;left:50%;bottom:75px;transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:.18s;padding:9px 13px;background:#222;color:#fff;border-radius:7px;font-size:12px;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.overlay{display:none;position:fixed;inset:0;z-index:15;background:#0009;padding:20px;align-items:center;justify-content:center}.overlay.open{display:flex}.dialog{position:relative;background:#fff;border-radius:9px;width:min(100%,420px);padding:18px}.dialog-close{position:absolute;right:8px;top:6px;border:0;background:#f1f1f1;border-radius:50%;width:30px;height:30px;font-size:20px;color:#777}.dialog h3{font-size:16px;margin:3px 32px 9px 0}.dialog p{font-size:12px;color:#777;margin:0}.dialog-thumb{margin-top:13px;aspect-ratio:16/9;border-radius:5px;background:linear-gradient(135deg,#222e3a,#7394a6,#dca080);display:grid;place-items:center;color:#fff}.dialog-thumb span{background:#0008;padding:10px;border-radius:25px;font-size:20px}.footer-note{margin:18px 0;color:#999;font-size:10px;text-align:center}
@media(min-width:620px){.head{max-width:1080px;margin:auto}.searchbar{max-width:1080px;margin:auto}.categories{padding-left:max(13px,calc((100% - 1080px)/2));padding-right:max(13px,calc((100% - 1080px)/2))}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.video-title{font-size:13px}.app{padding-bottom:30px}}@media(min-width:900px){.video-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* =========================================================
   封面图替换位置
   将图片放到 outputs/images/ 文件夹，然后把下面的文件名
   换成自己的图片名，例如 url("images/my-cover.jpg")。
   每张卡片对应 t1 到 t27；页面会保留渐变作为图片加载失败时的底色。
   ========================================================= */
.thumb.t1 { background: url("images/9efff62edb8223bec3f8c091b66ab17b.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t2 { background: url("images/178a9a8aca12ce5e33214a66034d650e.gif") center / cover no-repeat, linear-gradient(135deg,#252138,#8e738e 55%,#e4bd9b); }
.thumb.t3 { background: url("images/7711fd2a3ac90bb37da10a1fe86ca9d2.gif") center / cover no-repeat, linear-gradient(135deg,#173b39,#4b9a86 52%,#d4d190); }
.thumb.t4 { background: url("images/541750373c388630174054f936d2f89c.jpg") center / cover no-repeat, linear-gradient(135deg,#2e2936,#9675a5 54%,#e8a1a7); }
.thumb.t5 { background: url("images/ea6b15310942e331852357ba572e461a.jpg") center / cover no-repeat, linear-gradient(135deg,#23495a,#51a4bd 54%,#e6d9a3); }
.thumb.t6 { background: url("images/ff5eeebc2ed33167a5d21edc80608d77.jpg") center / cover no-repeat, linear-gradient(135deg,#48412f,#a89059 55%,#d3c5aa); }
.thumb.t7 { background: url("images/ff5eeebc2ed33167a5d21edc80608d77.jpg") center / cover no-repeat, linear-gradient(135deg,#222a31,#697d8c 55%,#bcc7ce); }

.thumb.t8 { background: url("images/photo_1_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t9 { background: url("images/photo_1_2026-10-26_22-42-56.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t10 { background: url("images/photo_2_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t11 { background: url("images/photo_2_2026-10-26_22-42-56.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t12 { background: url("images/photo_3_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t13 { background: url("images/photo_3_2026-10-26_22-42-56.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t14 { background: url("images/photo_4_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t15 { background: url("images/photo_4_2026-10-26_22-42-56.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t16 { background: url("images/photo_5_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t17 { background: url("images/photo_6_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t18 { background: url("images/photo_7_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t19 { background: url("images/photo_8_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t20 { background: url("images/photo_9_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t21 { background: url("images/photo_10_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t22 { background: url("images/photo_11_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t23 { background: url("images/photo_12_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t24 { background: url("images/photo_13_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t25 { background: url("images/photo_14_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t26 { background: url("images/photo_15_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }
.thumb.t27 { background: url("images/photo_16_2026-10-26_22-42-09.jpg") center / cover no-repeat, linear-gradient(140deg,#243646,#7193a7 52%,#e0a37d); }.dialog-loading{display:none;position:absolute;inset:0;place-items:center;background:#0003}.dialog-thumb.is-loading .dialog-loading{display:grid}.dialog-thumb.is-loading .dialog-play{display:none}.dialog-loading i{width:42px;height:42px;border:4px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:dialog-spin .8s linear infinite}@keyframes dialog-spin{to{transform:rotate(360deg)}}/* M3U8 player dialog */
.dialog{width:min(100%,760px)}.m3u8-player{display:block;width:100%;aspect-ratio:16/9;max-height:65vh;background:#080808;border-radius:6px;object-fit:contain}.dialog-close{z-index:1}@media(max-width:480px){.overlay{padding:10px}.dialog{padding:14px}}


.player-shell{position:relative}.player-loading{display:none;position:absolute;inset:0;z-index:2;place-items:center;background:#0009;border-radius:6px}.player-loading.is-active{display:grid}.player-loading i{width:46px;height:46px;border:4px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:player-spin .8s linear infinite}@keyframes player-spin{to{transform:rotate(360deg)}}.register-dialog{position:relative;width:min(100%,380px);padding:32px 24px 26px;border-radius:12px;background:#fff;text-align:center;box-shadow:0 18px 60px #0005}.register-dialog .dialog-close{top:10px;right:10px}.register-icon{width:52px;height:52px;margin:0 auto 14px;display:grid;place-items:center;padding-left:3px;border-radius:15px;background:var(--red);color:white;font-size:21px}.register-dialog h3{margin:0 20px 8px;font-size:22px}.register-dialog p{margin:0 0 20px;color:#777;font-size:14px}.register-action{display:block;padding:12px 16px;border-radius:7px;background:var(--red);color:white;text-decoration:none;font-weight:700}.register-action:hover{filter:brightness(.94)}
.register-form{position:relative;display:grid;gap:10px;text-align:left}.register-form>input,.captcha-row input{width:100%;height:44px;padding:0 12px;border:1px solid #ddd;border-radius:7px;background:#fff;color:#222;font:14px Arial,sans-serif;outline:none}.register-form>input:focus,.captcha-row input:focus{border-color:var(--red);box-shadow:0 0 0 2px #f2263520}.captcha-row{display:grid;grid-template-columns:100px 40px 1fr;gap:7px;align-items:center}.captcha-code{height:40px;display:grid;place-items:center;border-radius:6px;background:repeating-linear-gradient(135deg,#f3e7e7 0 5px,#fff 5px 10px);color:#252525;font:bold italic 21px Georgia,serif;letter-spacing:5px;text-decoration:line-through;user-select:none}.captcha-refresh{height:40px;border:1px solid #ddd;border-radius:6px;background:#fff;color:#555;font-size:22px;cursor:pointer}.captcha-row input{height:40px;min-width:0}.register-form .register-action{width:100%;border:0;font-size:15px;cursor:pointer}.register-form .register-action:disabled{opacity:.6;cursor:wait}.register-message{min-height:0;margin:0!important;color:#c22!important;font-size:12px!important}.register-submit-loading{display:none;position:absolute;inset:0;z-index:3;place-items:center;border-radius:8px;background:#fffffff0}.register-submit-loading.is-active{display:grid}.register-submit-loading i{width:40px;height:40px;border:4px solid #ddd;border-top-color:var(--red);border-radius:50%;animation:player-spin .8s linear infinite}
/* Dark registration modal theme */
.register-dialog{background:#202124;color:#f3f3f3;box-shadow:0 20px 70px #000b;border:1px solid #393a3d}.register-dialog .dialog-close{background:#34363a;color:#ddd}.register-dialog p{color:#aaa}.register-form>input,.captcha-row input{background:#2b2d31;border-color:#45474c;color:#f5f5f5}.register-form>input::placeholder,.captcha-row input::placeholder{color:#a4a6aa}.register-form>input:focus,.captcha-row input:focus{border-color:var(--red);box-shadow:0 0 0 2px #f2263530}.captcha-code{background:repeating-linear-gradient(135deg,#33353a 0 5px,#292b2f 5px 10px);color:#fff}.captcha-refresh{background:#303237;border-color:#494b50;color:#eee}.register-submit-loading{background:#202124ed}
