@charset "utf-8";
/* ============================================================
   沃库影视 voku.cc —— 全新皮肤 v1（靛紫 + 青柠 / 浅色卡面）
   仅覆盖本主题自有类；栅格、按钮、工具类由 bootstrap 3.3.5 提供
   ============================================================ */
:root{
  --vk-ink:#1F2340;
  --vk-ink-2:#3A3F5C;
  --vk-muted:#7C8199;
  --vk-line:#E6E8F2;
  --vk-page:#F4F5FA;
  --vk-card:#FFFFFF;
  --vk-brand:#4A3AC8;
  --vk-brand-dk:#241E4E;
  --vk-brand-lt:#6D5BE0;
  --vk-accent:#C8F169;
  --vk-accent-dk:#5C9E1F;
  --vk-radius:16px;
  --vk-shadow:0 1px 2px rgba(31,35,64,.06),0 6px 18px rgba(31,35,64,.04);
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--vk-page);color:var(--vk-ink);
  font:14px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,"Segoe UI",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;transition:color .18s}
a:hover,a:focus{color:var(--vk-brand);text-decoration:none}
img{max-width:100%;border:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,h5{margin:0;font-weight:700;line-height:1.35}
.text-muted{color:var(--vk-muted)}
.text-green{color:var(--vk-accent-dk)}
.text-center{text-align:center}
.col-pd{padding-left:15px;padding-right:15px}
.mb-1{margin-bottom:10px}.mb-2{margin-bottom:20px}
.ml-1{margin-left:10px}
.pb-0{padding-bottom:0!important}.pb-1{padding-bottom:10px}.pt-0{padding-top:0!important}
.hide{display:none}
.clearifx:after{content:"";display:table;clear:both}
.container{max-width:1200px}
main.container{padding-top:4px}

/* ---------------- 顶栏 ---------------- */
.mv-header{position:sticky;top:0;z-index:900;background:linear-gradient(100deg,var(--vk-brand-dk) 0%,#312A8E 52%,var(--vk-brand) 100%);box-shadow:0 2px 14px rgba(20,16,50,.18)}
.mv-header__in{display:flex;align-items:center;gap:16px;height:64px}
.mv-brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.mv-brand__logo{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.1);box-shadow:0 2px 10px rgba(0,0,0,.18)}
.mv-brand__txt{display:flex;flex-direction:column;line-height:1.15}
.mv-brand__name{font-size:18px;font-weight:700;color:#fff;letter-spacing:.5px}
.mv-brand__sub{font-size:10px;color:var(--vk-accent);letter-spacing:2.4px;text-transform:uppercase;font-weight:600}
.mv-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow:visible}
.mv-nav a{padding:8px 13px;border-radius:9px;font-size:14px;color:#D6D7F0;white-space:nowrap}
.mv-nav a:hover{background:rgba(255,255,255,.12);color:#fff}
.mv-nav a.on{background:var(--vk-accent);color:#221E4C;font-weight:700;box-shadow:0 2px 8px rgba(200,241,105,.28)}
.mv-search{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.ff-search{display:flex;align-items:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 4px 3px 14px}
.ff-wd{width:158px;height:26px;background:transparent;border:0;outline:0;color:#fff;font-size:13px}
.ff-wd::placeholder{color:#B6B8DE}
.ff-search .submit{height:28px;padding:0 15px;border:0;border-radius:999px;background:var(--vk-accent);color:#221E4C;font-size:13px;font-weight:700;cursor:pointer}
.ff-search .submit:hover{filter:brightness(1.05)}
.mv-stat{font-size:12px;color:#C4C6E6;white-space:nowrap}
.mv-stat b{color:var(--vk-accent);font-weight:700}
.mv-qr{display:flex;align-items:center;gap:6px;font-size:11px;color:#C4C6E6;white-space:nowrap}
.mv-qr img{width:34px;height:34px;border-radius:8px;background:#fff;padding:2px}

/* ---------------- 首屏 Hero ---------------- */
.mv-hero{position:relative;overflow:hidden;margin:18px 0;padding:34px 32px;border-radius:20px;color:#fff;
  background:radial-gradient(680px 240px at 88% 0%,rgba(200,241,105,.22),transparent 62%),linear-gradient(118deg,var(--vk-brand-dk) 0%,#3B2FA8 58%,var(--vk-brand-lt) 100%);
  box-shadow:0 10px 30px rgba(36,30,78,.20)}
.mv-hero:after{content:"";position:absolute;right:-70px;bottom:-90px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.06)}
.mv-hero h1{margin:0 0 10px;font-size:30px;letter-spacing:.6px}
.mv-hero p{max-width:800px;margin:0 0 18px;font-size:14px;line-height:1.85;color:#DCDBF4}
.mv-hero__tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:10px}
.mv-hero__tags a{padding:7px 15px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);font-size:13px;color:#fff}
.mv-hero__tags a:hover{background:var(--vk-accent);border-color:var(--vk-accent);color:#221E4C;font-weight:600}

/* ---------------- 面板 ---------------- */
.stui-pannel{margin-bottom:18px;padding:2px 18px 16px;border-radius:var(--vk-radius);background:var(--vk-card);box-shadow:var(--vk-shadow)}
.stui-pannel__head{display:flex;align-items:center;justify-content:space-between;padding:14px 0 12px;border-bottom:1px solid var(--vk-line);margin-bottom:14px}
.stui-pannel__head .title{display:flex;align-items:center;justify-content:space-between;width:100%;margin:0;font-size:18px;color:var(--vk-ink)}
.stui-pannel__head .title>span:first-child,.stui-pannel__head .title>a:first-child{position:relative;padding-left:13px}
.stui-pannel__head .title>span:first-child:before,.stui-pannel__head .title>a:first-child:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:17px;border-radius:3px;background:linear-gradient(180deg,var(--vk-brand),var(--vk-accent))}
.stui-pannel__head .title .text-green{font-size:12px;font-weight:500;margin-left:8px;padding:2px 8px;border-radius:6px;background:#F2F9E4}
.stui-pannel__head .pull-right{font-size:13px;font-weight:400;color:var(--vk-muted)}
.stui-pannel__head .pull-right:hover{color:var(--vk-brand)}

/* ---------------- 影片网格 ---------------- */
.stui-vodlist{display:flex;flex-wrap:wrap;margin:0 -8px}
.stui-vodlist__item{position:relative;width:16.6667%;padding:0 8px 18px}
.stui-vodlist1__item{position:relative;width:20%;padding:0 8px 18px}
.stui-vodlist__thumb{position:relative;display:block;overflow:hidden;border-radius:12px;background:#EDEFF8;box-shadow:0 1px 3px rgba(31,35,64,.07)}
.stui-vodlist__thumb img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform .38s ease}
.stui-vodlist__item:hover .stui-vodlist__thumb img,.stui-vodlist1__item:hover .stui-vodlist__thumb img{transform:scale(1.05)}
.stui-vodlist__thumb .play{position:absolute;inset:0;border-radius:12px;background:rgba(36,30,78,.34) url("../Img/play.svg") center/48px no-repeat;opacity:0;transition:opacity .22s}
.stui-vodlist__thumb:hover .play{opacity:1}
.pic-text{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;font-size:12px;color:#fff;background:linear-gradient(180deg,rgba(20,17,45,0),rgba(20,17,45,.86))}
.stui-vodlist__title{margin:8px 0 3px;font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stui-vodlist1__item h2{margin:8px 0 3px;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-text-content{height:36px;margin:0;overflow:hidden;font-size:12px;line-height:1.5;color:var(--vk-muted)}
.card-text-content a{color:inherit}

/* ---------------- 详情页 ---------------- */
.breadcrumb{margin:4px 0 12px;padding:9px 14px;border-radius:10px;background:#fff;box-shadow:var(--vk-shadow);font-size:13px;color:var(--vk-muted)}
.breadcrumb a{color:var(--vk-muted)}
.breadcrumb a:hover{color:var(--vk-brand)}
.breadcrumb>li+li:before{content:"/";color:#C2C6D6;padding:0 6px}
.stui-content{display:flex;flex-wrap:wrap;gap:22px;padding:18px 15px 6px}
.stui-content__thumb{flex:0 0 226px;width:226px;max-width:100%}
.stui-content__thumb .pic{display:block;overflow:hidden;border-radius:14px;background:#EDEFF8;box-shadow:0 6px 18px rgba(31,35,64,.12)}
.stui-content__thumb .pic img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.stui-content__detail{flex:1 1 360px;min-width:0}
.stui-content__detail .title{margin:0 0 12px;font-size:22px;color:var(--vk-ink)}
.stui-content__detail .data{margin:0 0 5px;font-size:13px;line-height:1.95;color:var(--vk-ink-2)}
.stui-content__detail .data a{color:var(--vk-brand);font-weight:500}
.stui-content__detail .data .text-muted{color:var(--vk-muted)}
.split-line{display:inline-block;width:1px;height:11px;margin:0 9px;vertical-align:-1px;background:var(--vk-line)}
.desc{margin:10px 0 0;font-size:13px;line-height:1.85;color:#6B6F88}
.desc .left{display:block;margin-bottom:3px;font-weight:600;color:var(--vk-ink-2)}
.playbtn{margin-top:14px}
.playbtn .btn-primary{padding:9px 26px;border:0;border-radius:10px;background:linear-gradient(96deg,var(--vk-brand),var(--vk-brand-lt));font-weight:600;box-shadow:0 6px 16px rgba(74,58,200,.28)}
.playbtn .btn-primary:hover{filter:brightness(1.07);color:#fff}
.stui-content__ad{margin-top:12px}
.vod-ispay{margin-top:10px;font-size:13px;color:var(--vk-muted)}

/* 播放列表 */
.stui-content__playlist{display:flex;flex-wrap:wrap;margin:0 -6px}
.stui-content__playlist li{width:16.6667%;padding:0 6px 10px}
.stui-content__playlist li a{display:block;padding:9px 6px;border:1px solid var(--vk-line);border-radius:9px;font-size:13px;text-align:center;color:var(--vk-ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#FBFBFE}
.stui-content__playlist li a:hover{border-color:var(--vk-brand);background:#F5F3FF;color:var(--vk-brand);font-weight:600}

/* ---------------- 播放页 ---------------- */
.h1-page{margin:6px 0 14px;font-size:20px;color:var(--vk-ink)}
.h1-site{max-width:1100px;margin:26px auto 10px;padding:0 15px;font-size:15px;font-weight:400;line-height:1.8;text-align:center;color:var(--vk-muted)}
.stui-player{overflow:hidden;padding:0;background:var(--vk-card);border-radius:var(--vk-radius);box-shadow:var(--vk-shadow)}
.stui-player__video{position:relative;background:#0F0D24}
.stui-player__video iframe,.stui-player__video video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.stui-player__detail{padding:14px 18px 18px}
.stui-player__detail .data{margin:0 0 5px;font-size:13px;color:var(--vk-ink-2)}
.stui-player__detail .data .text-muted{color:var(--vk-muted)}
.ffp-slot{min-height:0}
.ff-playurl-error{display:inline-block;margin-bottom:8px;padding:6px 12px;border-radius:8px;background:#FDECEC;color:#C63B3B;font-size:13px}
.ff-ad-slot{margin:12px auto;text-align:center;overflow:hidden}
.embed-responsive.embed-responsive-16by9{padding-bottom:56.25%}
.embed-responsive.embed-responsive-4by3{padding-bottom:75%}

/* ---------------- 列表 / 筛选 / 分页 ---------------- */
.stui-screen__list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0}
.stui-screen__list>li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--vk-line);border-radius:9px;font-size:13px;background:#FBFBFE}
.stui-screen__list>li>a{color:var(--vk-ink-2)}
.stui-screen__list>li.active{border-color:var(--vk-brand);background:#F5F3FF}
.stui-screen__list>li.active>a,.stui-screen__list>li>a:hover{color:var(--vk-brand);font-weight:600}
.stui-screen__list>li>span{color:var(--vk-muted)}
.stui-page{margin:20px 0 6px;text-align:center}
.stui-page li{display:inline-block;margin:0 3px}
.stui-page li a,.stui-page li span{display:inline-block;min-width:36px;padding:7px 11px;border:1px solid var(--vk-line);border-radius:9px;background:#fff;font-size:13px;color:#4A4F6B}
.stui-page li a:hover{border-color:var(--vk-brand);color:var(--vk-brand)}
.stui-page li.active a,.stui-page li.active span{border-color:var(--vk-brand);background:linear-gradient(96deg,var(--vk-brand),var(--vk-brand-lt));color:#fff;font-weight:600}
.stui-link__text{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0}
.stui-link__text li a{display:inline-block;padding:5px 11px;border-radius:8px;background:var(--vk-page);font-size:13px;color:#5B5F7A}
.stui-link__text li a:hover{background:#F5F3FF;color:var(--vk-brand)}
.list-intro{margin-bottom:14px;padding:12px 15px;border-left:3px solid var(--vk-brand);border-radius:10px;background:#fff;box-shadow:var(--vk-shadow);font-size:13px;line-height:1.85;color:#6B6F88}
.map-list{margin:0;padding:0;columns:4;column-gap:18px}
.map-list li{break-inside:avoid;padding:4px 0;font-size:13px}
.more{margin-top:12px;text-align:center}
.ff-bg{background:var(--vk-card);border-radius:var(--vk-radius);box-shadow:var(--vk-shadow)}

/* ---------------- 广告插槽（限高收纳） ---------------- */
.mv-adslot{position:relative;max-width:1200px;max-height:132px;margin:0 auto 18px;overflow:hidden;text-align:center}
.mv-adslot__tag{margin-bottom:4px;font-size:11px;color:#9EA2B8;letter-spacing:.5px}
.mv-adslot iframe,.mv-adslot img{max-width:100%}

/* ---------------- 页脚 ---------------- */
.mv-footer{margin-top:30px;padding-top:30px;background:linear-gradient(180deg,#241E4E,#1B1740);color:#C3C5E0}
.mv-footer__in{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:26px;max-width:1200px;margin:0 auto;padding:0 15px 24px}
.mv-footer__brand{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#fff}
.mv-footer__brand img{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.1)}
.mv-footer__brand b{font-size:16px;letter-spacing:.5px}
.mv-footer h4{margin:0 0 12px;font-size:14px;color:#fff}
.mv-footer ul{margin:0;padding:0}
.mv-footer ul li{margin-bottom:9px}
.mv-footer ul li a{font-size:13px;color:#C3C5E0}
.mv-footer ul li a:hover{color:var(--vk-accent)}
.mv-geo p{margin:0;font-size:12px;line-height:1.95;color:#A7A9CB}
.mv-geo p b{color:#DCDDF0}
.mv-geo a{color:var(--vk-accent)}
.mv-footer__bar{padding:14px 15px;border-top:1px solid rgba(255,255,255,.1);font-size:12px;line-height:1.8;text-align:center;color:#9A9CBE}

/* ---------------- VIP / 用户中心（少量页面用到） ---------------- */
.jumbotron{padding:26px;border-radius:var(--vk-radius);background:#fff;box-shadow:var(--vk-shadow)}
.page-header{margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid var(--vk-line);font-size:18px}
.user-score-card{padding:18px;border-radius:14px;background:#fff;box-shadow:var(--vk-shadow)}
.user-score{font-size:13px;color:var(--vk-ink-2)}
.user-score-upvip,.user-score-payment{display:inline-block;margin:10px 8px 0 0;padding:6px 14px;border-radius:9px;background:var(--vk-accent);color:#221E4C;font-size:13px;font-weight:600}
.user-login-modal{position:fixed;inset:0;z-index:2000;display:none;background:rgba(24,20,52,.55)}
.vod-price{font-size:13px;color:#C63B3B}

/* ---------------- 响应式 ---------------- */
@media (max-width:1199px){
  .stui-vodlist__item{width:20%}
  .mv-nav a{padding:8px 10px;font-size:13px}
  .mv-stat,.mv-qr{display:none}
  .stui-content__playlist li{width:20%}
}
@media (max-width:991px){
  .mv-header__in{height:auto;padding:9px 0;flex-wrap:wrap;gap:8px 12px}
  .mv-nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .mv-nav::-webkit-scrollbar{display:none}
  .mv-search{margin-left:auto}
  .ff-wd{width:120px}
  .mv-hero{padding:26px 20px}
  .mv-hero h1{font-size:23px}
  .stui-vodlist__item,.stui-vodlist1__item{width:25%}
  .stui-content__playlist li{width:25%}
  .mv-footer__in{grid-template-columns:1fr 1fr}
  .map-list{columns:3}
  .stui-content__thumb{flex:0 0 170px;width:170px}
  .stui-content__detail .title{font-size:19px}
}
@media (max-width:767px){
  .container{padding-left:12px;padding-right:12px}
  .mv-brand__name{font-size:16px}
  .mv-brand__sub{display:none}
  .mv-brand__logo{width:32px;height:32px}
  .mv-nav a{padding:7px 9px;font-size:13px}
  .mv-hero{margin:12px 0;padding:22px 16px;border-radius:16px}
  .mv-hero h1{font-size:20px}
  .mv-hero p{font-size:13px}
  .mv-hero__tags a{padding:6px 12px;font-size:12px}
  .stui-pannel{padding:0 12px 12px;border-radius:14px}
  .stui-pannel__head{padding:12px 0 10px}
  .stui-pannel__head .title{font-size:16px}
  .stui-vodlist{margin:0 -5px}
  .stui-vodlist__item,.stui-vodlist1__item{width:33.3333%;padding:0 5px 14px}
  .stui-vodlist__title,.stui-vodlist1__item h2{font-size:13px;margin:6px 0 2px}
  .card-text-content{height:34px;font-size:11px}
  .stui-vodlist__thumb .play{background-size:38px}
  .stui-content{gap:14px;padding:12px 0 4px}
  .stui-content__thumb{flex:0 0 122px;width:122px}
  .stui-content__detail .title{font-size:17px}
  .stui-content__detail .data{font-size:12px}
  .desc{font-size:12px}
  .stui-content__playlist li{width:33.3333%}
  .h1-page{font-size:17px}
  .h1-site{font-size:13px;margin:18px auto 8px}
  .mv-footer__in{grid-template-columns:1fr;gap:18px;padding-bottom:16px}
  .map-list{columns:2}
  .mv-adslot{max-height:112px;margin-bottom:12px}
  .stui-page li a,.stui-page li span{min-width:32px;padding:6px 9px}
}
