*{margin:0;padding:0}
:root{--primary-color:#141d26;--secondary-color:#4caf50;--accent-color:#e74c3c;--text-color:#0a0b0b;--light-text-color:#7f8c8d;--bg-color:#d6d9da;--container-max-width:1280px;--spacing-unit:1rem;--border-radius:6px;--shadow-light:0 2px 4px rgba(0, 0, 0, 0.08);--shadow-medium:0 8px 16px rgba(0, 0, 0, 0.15);--header-height:70px}
input:-internal-autofill-selected{background-color:transparent!important}
.content-badge{color:#009688}
.logo a{font-weight:800;color:#fff;font-size:1.4rem}
.mobile-toggles{display:none;align-items:center;gap:1rem}
.mobile-header-search{display:none;width:100%;padding:.5rem 0;background-color:var(--primary-color);box-shadow:var(--shadow-light)}
.mobile-header-search.is-visible{display:flex;justify-content:center}
.mobile-header-search form{text-align:center}
.mobile-header-search input[type=search]{border:1px solid rgba(255,255,255,.3);background-color:rgba(255,255,255,.1);color:#fff;padding:.6rem 1rem;border-radius:var(--border-radius);margin-right:.5rem;outline:0;width:77%;}
.mobile-header-search input[type=search]::placeholder{color:rgba(255,255,255,.7)}
.mobile-header-search button{background-color:var(--secondary-color);border:none;color:#fff;padding:.5rem 1rem;border-radius:var(--border-radius);cursor:pointer;transition:background-color .3s ease;border:1px solid}
.mobile-header-search button:hover{background-color:var(--accent-color)}
.mobile-toggles button{background:0 0;border:none;color:#fff;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;transition:color .3s ease}
.mobile-toggles button:hover{color:var(--accent-color)}
.mobile-toggles svg{width:24px;height:24px;stroke:currentColor}
body{font-family:Roboto,'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);line-height:1.6;font-size:15px}
.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--spacing-unit)}
header{background-color:var(--primary-color);color:#fff;padding:0;min-height:var(--header-height);display:flex;align-items:center;border-bottom:3px solid var(--secondary-color);box-shadow:var(--shadow-medium)}
header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;width:100%}
.logo h1{margin:0;font-size:1.4rem;font-weight:700}
.logo a{color:#fff;text-decoration:none;transition:color .3s ease}
.logo a:hover{color:var(--secondary-color)}
nav{display:flex;align-items:center;gap:1.5rem}
nav ul{list-style:none;margin:0;padding:0;display:flex}
nav ul li{margin-left:0}
nav ul li a{color:#fff;text-decoration:none;font-weight:500;padding:.6rem 1rem;transition:background-color .3s ease,color .3s ease;border-radius:1.5rem}
nav ul li a:hover{background-color:var(--secondary-color);color:#fff}
.search-box{display:flex;align-items:center;margin-left:1rem;background-color:rgba(255,255,255,.15);border-radius:var(--border-radius);padding:.2rem;border:1px solid rgba(255,255,255,.2)}
.search-box input[type=search]{border:none;background:0 0;padding:.4rem .7rem;font-size:.85rem;color:#fff;outline:0}
.search-box input[type=search]::placeholder{color:rgba(255,255,255,.6)}
.search-box button{background-color:var(--secondary-color);border:none;border-radius:var(--border-radius);color:#fff;padding:.4rem .9rem;cursor:pointer;transition:background-color .3s ease}
.search-box button:hover{background-color:var(--primary-color)}
main{padding:1rem 0}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #bbbbbb}
.section-title{color:var(--text-color);font-size:1.2rem;font-weight:600;margin:0}
.more-button{display:inline-block;padding:.2rem .6rem;background-color:var(--secondary-color);color:#fff;text-decoration:none;border-radius:var(--border-radius);transition:background-color .3s ease,transform .2s ease;font-size:.9rem}
.more-button:hover{background-color:var(--primary-color);transform:translateY(-2px)}
h2{text-align:left;margin-bottom:2rem;color:var(--text-color);font-size:2rem;font-weight:700}
h3{font-size:1.2rem;margin-bottom:.8rem;color:var(--text-color)}
h4{font-size:1.1rem;margin-bottom:.7rem;color:var(--text-color);border-bottom:1px solid var(--light-text-color);padding-bottom:.4rem;display:inline-block}
.video-grid,.video-list{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
.video-item{background-color:transparent;border:none;border-radius:var(--border-radius);overflow:hidden;text-align:left;transition:transform .3s ease,box-shadow .3s ease}
.video-item:hover{transform:translateY(-5px)}
.video-item .head-body-col{position:relative}
.bar-flex-pop{position:absolute;bottom:5px;right:5px;background-color:rgba(0,0,0,.6);color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500;line-height:1;z-index:1;text-shadow:0 1px 1px rgba(0,0,0,.3)}
.video-item a{text-decoration:none;color:var(--text-color);display:block}
.video-item img{border-radius:var(--border-radius);width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;margin-bottom:.6rem}
.video-item .video-title{font-size:1rem;line-height:1.3;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis}
.video-item p{font-size:.9rem;color:var(--light-text-color);padding:0 .8rem;margin-top:0}
.description-module{color:#4e4e4e;font-size:1rem}
footer{background-color:var(--primary-color);color:#fff;text-align:center;padding:10px 0;margin-top:0.5rem;box-shadow:none}
footer p{margin:0}
.hero-form-btn a{color:#FFEB3B}
.video-player-layout-1,.video-player-layout-3{margin-bottom:3rem}
.video-player-layout-2{display:flex;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.main-video,.main-video-left,.main-video-top{flex:2;min-width:300px}
.side-content-right{flex:1;min-width:250px}
.main-video video,.main-video-left video,.main-video-top video{width:100%;max-width:800px;height:auto;background-color:#000;margin-bottom:1rem}
.video-player-layout-1 .recommended-videos .video-items-grid,.video-player-layout-3 .bottom-content .video-items-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:1rem}
.video-player-layout-2 .side-content-right .video-items-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem;margin-top:1rem}
.video-player-layout-1 .recommended-videos .video-item,.video-player-layout-2 .side-content-right .video-item,.video-player-layout-3 .bottom-content .video-item{display:block}
.video-player-layout-2 .side-content-right,.video-player-layout-3 .bottom-content{background-color:#fff;padding:1.5rem;border-radius:var(--border-radius);box-shadow:var(--shadow-light)}
.video-player-layout-3 .bottom-content h4{margin-top:2rem;border-top:1px solid #eee;padding-top:1rem}
hr{border:0;height:1px;background-color:#bbbbbb;margin:3rem 0}
@media (max-width:768px){header .container{flex-direction:row;justify-content:space-between;align-items:center;text-align:left;position:relative}
.main-nav{display:none}
.search-box{display:none}
.mobile-toggles{display:flex}
.mobile-header-search{display:block}
nav ul{flex-direction:column}
nav ul li{margin:.5rem 0}
h2{font-size:1.8rem}
.video-grid,.video-list{grid-template-columns:repeat(2,1fr);gap:1rem}
.video-item img{height:112px}
.video-player-layout-2{flex-direction:column}
.main-video,.main-video-left,.main-video-top,.side-content-right{flex:none;width:100%}
.video-player-layout-1 .recommended-videos .video-items-grid,.video-player-layout-3 .bottom-content .video-items-grid{grid-template-columns:repeat(2,1fr)}
}
.mobile-drawer{position:fixed;top:0;left:-260px;width:260px;height:100%;background-color:var(--primary-color);box-shadow:var(--shadow-medium);transition:left .3s ease-in-out;z-index:1000;display:flex;flex-direction:column}
.mobile-drawer.is-open{left:0}
.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-unit);border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-drawer .logo a{color:#fff}
.close-drawer{background:0 0;border:none;color:#fff;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;transition:color .3s ease}
.close-drawer:hover{color:var(--accent-color)}
.mobile-drawer nav ul{flex-direction:column;padding:var(--spacing-unit) 0}
.mobile-drawer nav ul li{margin:0}
.mobile-drawer nav ul li a{padding:0.8rem 1rem;width:100%;display:block;border-radius:0}
.mobile-drawer nav ul li a:hover{background-color:var(--secondary-color)}
.mobile-drawer .search-box.mobile-search-box{margin:var(--spacing-unit) calc(var(--spacing-unit) * 1.5);background-color:rgba(255,255,255,.1);border-radius:var(--border-radius);border:1px solid rgba(255,255,255,.2)}
.mobile-drawer .search-box input[type=search]{color:#fff}
.mobile-drawer .search-box input[type=search]::placeholder{color:rgba(255,255,255,.6)}
.mobile-drawer .search-box button{background-color:var(--secondary-color)}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:999;display:none}
.overlay.is-open{display:block}
body.drawer-open{overflow:hidden}
.vodtype-module{display:flex;margin:12px 0}
.diy-label{font-size:1rem;color:var(--text-color)}
@media (min-width:769px){.mobile-drawer,.mobile-header-search,.mobile-toggles,.overlay{display:none!important}
}
.share-box{margin-top:1rem}
.title-module{margin-bottom:1rem}
.title-module .title{margin-top:0;font-size:1.6rem;margin-bottom:.5rem;line-height:1.4}
.meta-info{display:flex;justify-content:space-between;font-size:.9rem;color:var(--light-text-color)}
.popularity{color:#e74c3c;font-weight:700}
.update-time{font-style:italic}
.action-module{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:1rem}
.action-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;color:var(--text-color);font-size:1rem;transition:color .3s}
.action-item:hover{color:var(--secondary-color)}
.playline-box{margin:1rem 0}
.playline-title{margin-bottom:.5rem}
.playline-module{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.playline{background-color:var(--secondary-color);color:#fff;padding:.3rem .8rem;border-radius:4px;text-decoration:none;font-size:.9rem;transition:background-color .3s}
.playline:hover{opacity:.9}
.icon{width:24px;height:24px;margin-bottom:.3rem}
.diy-icon{width:24px;height:24px;background-image:url('../img/diy-icon.png');background-repeat:no-repeat;background-size:cover;margin-bottom:.3rem}
.icon1{background-position:0 -24px}
.icon2{background-position:0 -72px}
.icon3{background-position:0 0}
.icon4{background-position:0 -48px}
.tips{position:fixed;top:60%;left:50%;transform:translate(-50%,-50%);padding:.5rem .8rem;border-radius:var(--border-radius);font-size:1rem;color:#fff;z-index:9999;opacity:.9;box-shadow:var(--shadow-light);transition:opacity .3s ease;width:300px;text-align:center}
.tips.success{background-color:#292929}
.tips.error{background-color:#f44336}
.pagination{display:flex;justify-content:center;align-items:center;gap:.5rem;padding:calc(var(--spacing-unit) * 1.5);max-width:var(--container-max-width);margin:0 auto}
.page-btn,.page-number{padding:.5rem 1rem;font-size:1rem;border:none;border-radius:var(--border-radius);background-color:#c7c7c7;cursor:pointer;transition:background-color .3s,color .3s;text-decoration:none;color:var(--text-color)}
.page-btn:hover,.page-number:hover{background-color:var(--secondary-color);color:#fff}
.page-number.active{background-color:var(--secondary-color);color:#fff;cursor:default}
.page-btn.disabled{opacity:.5;cursor:not-allowed}
.page-btn{font-weight:700}
.share-input{background-color:#bbbbbb;color:#3d3d3d;padding:7px 10px;margin-right:10px;margin-bottom:10px;word-wrap:break-word;word-break:normal;width:calc(100% - 24px)}
.lg-dot-main{background-color:#f39304;color:#232323;border-radius:6px;padding:6px 12px;display:inline-block;cursor:pointer}
#player{width:100%;padding-bottom:60%;position:relative}
#player::after{content:'';display:block;clear:both;height:0;visibility:hidden}
#player iframe{position:absolute;top:0;left:0}
.tag-module{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0;align-items:center}
.tag{color:#3d3d3d;padding:.3rem .9rem;border-radius:var(--border-radius);text-decoration:none;display:inline-block;transition:background-color .3s;background-color:#bbbbbb}
.tag:hover{background-color:var(--secondary-color);color:#fff}
.all-beta-box,.play-beta-box{position:absolute;width:0;height:0;overflow:hidden}
@media (max-width:600px){.pagination{flex-wrap:wrap;gap:.3rem;padding:0;margin-top:1rem}
.page-btn,.page-number{padding:.3rem .8rem;font-size:.9rem}
}
@media only screen and (max-width:768px){
header{min-height:50px}
.section-title{font-size:1rem}
.video-item .video-title{font-size:.9rem}
.title-module .title{font-size:1.2rem}
.description-module{font-size:.9rem}
.action-item{font-size:.9rem}
.lg-dot-main{padding:8px 0;width:100%;text-align:center}
.tag{padding:.2rem .6rem;font-size:.9rem}
.diy-label{font-size:0.9rem}
.meta-info{font-size:0.9rem}
footer{padding:5px 0}
}