/* ============================================================
   stui_upgrade.css — 全站前台视觉升级层
   原则：只覆盖观感(字体/配色/间距/卡片/状态)，不改 stui 栅格与浮动结构。
   加载顺序在 stui_*.css 与 theme.css 之后，用于覆盖。
   ============================================================ */

/* ---- 字体：拉丁/数字用 Outfit(有性格、现代)，中文回退到系统黑体 ---- */
@font-face{font-family:"Outfit";font-style:normal;font-weight:400;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/outfit@5.1.0/files/outfit-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:600;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/outfit@5.1.0/files/outfit-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Outfit";font-style:normal;font-weight:800;font-display:swap;src:url("https://cdn.jsdelivr.net/npm/@fontsource/outfit@5.1.0/files/outfit-latin-800-normal.woff2") format("woff2");}

:root{
  --accent:#ff7a18;          /* 主强调色：比原荧光橙更醇厚 */
  --accent-700:#e85f00;
  --ink:#161821;             /* 主文字 */
  --ink-2:#565d6b;           /* 次文字 */
  --ink-3:#9aa0ad;           /* 辅助文字 */
  --line:#edeff3;            /* 分隔线 */
  --page:#f5f6f8;            /* 页面底色 */
  --card:#ffffff;
  --font-sans:"Outfit","PingFang SC","HarmonyOS Sans SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html,body{background:var(--page)!important;color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
body a{font-family:inherit;}
.text-muted{color:var(--ink-3)!important;}

/* ---- 顶栏：影院感深色 + 橙做点缀 ---- */
.stui-header__top{background:linear-gradient(180deg,#1b1e25,#15171c)!important;box-shadow:0 6px 24px rgba(0,0,0,.18)!important;}
/* 2026-07-06教训第三发：此处选择器必须保持一级(0,1,1)——曾写成 .logo-h1 a span(0,2,1) 压死
   白头包的 .stui-header__logo span(0,1,1) 深字覆盖 → 子页站名白字白底不可见(首页h1被包的三级选择器救了)。
   基础层永远用最低特异度，包层等特异度后加载取胜。 */
.stui-header__logo span{color:#fff!important;font-weight:800;letter-spacing:.5px;}
/* SEO(2026-07-04审查)：内页 logo 从 h1 降级为 div.logo-h1，补齐与 stock h1 一致的字号/行高/边距，视觉零变化 */
.stui-header__logo .logo-h1{font-size:22px;line-height:28px;margin:10px 0;padding:0;font-weight:normal;}
@media (max-width:767px){.stui-header__logo .logo-h1{font-size:20px;line-height:24px;}}
.stui-header__menu li,.stui-header__menu li.active{background:transparent!important;}
.stui-header__menu li a{color:#c7ccd4!important;background:transparent!important;font-weight:500;font-size:15px;transition:color .15s,border-color .15s;border-bottom:2px solid transparent;}
.stui-header__menu li a:hover{color:#fff!important;}
.stui-header__menu li.active a{color:#fff!important;border-bottom-color:var(--accent)!important;}
/* 2026-07-06：选择器从两级降为一级——原 .stui-header__search .mac_input 特异度(0,2,0)把
   设计包一级 .mac_wd 规则全部压死，白色头部的包(editorial/airy)输入文字变白字白底不可见(用户截图)。
   降级后各包自己的输入框配色恢复生效；无包规则的暗头站保持本条白字默认。 */
.mac_input{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.14)!important;color:#fff!important;border-radius:22px!important;}
.stui-header__search .mac_input::placeholder{color:#8b909a!important;}
.stui-header__search .submit{color:var(--accent)!important;}
.stui-header__user > li > a{color:#c7ccd4!important;}
.stui-header__user > li > a:hover{color:#fff!important;}

/* ---- 区块容器：白色圆角卡片 + 柔和暖阴影 + 呼吸 ---- */
.container .stui-pannel{background:var(--card);border:0;border-radius:16px;padding:18px 22px 20px;margin-bottom:22px;box-shadow:0 2px 18px rgba(24,18,12,.05);}
.container .stui-pannel-bg{background:var(--card);}

/* ---- 区块标题：分量感；隐藏旧 icon 图，换色条 ---- */
.stui-pannel__head{border:0!important;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)!important;}
.stui-pannel__head .title{font-size:21px;font-weight:700;letter-spacing:.2px;color:var(--ink);line-height:1.2;}
.stui-pannel__head .title img{display:none;}
.stui-pannel__head .title::before{content:"";display:inline-block;width:5px;height:19px;border-radius:3px;background:var(--accent);vertical-align:-3px;margin-right:10px;}
.stui-pannel__head .title a{color:inherit;text-decoration:none;}
.stui-pannel__head .more{color:var(--ink-3);font-weight:600;font-size:13px;text-decoration:none;}
.stui-pannel__head .more:hover{color:var(--accent);}
.stui-pannel__head .nav-text a{color:var(--ink-3);transition:color .15s;text-decoration:none;font-size:13.5px;}
.stui-pannel__head .nav-text a:hover{color:var(--accent);}
.stui-pannel__head .split-line{background:var(--line);}

/* ---- 海报更大：桌面端 6 列→5 列(仅改 float 宽度%，不引入 grid，避免错位) ----
   stui 用 box-sizing:border-box，20%×5=100% 刚好不溢出；海报高度 padding-top:150% 随宽度等比放大 */
@media(min-width:992px){.stui-vodlist > li.col-md-6{width:20%!important;}}

/* ---- 海报卡：圆角 + 暖阴影 + 悬浮抬升 + 渐变遮罩 ---- */
.stui-vodlist__box{position:relative;}
.stui-vodlist > li{margin-bottom:18px;}
.stui-vodlist__thumb1{border-radius:12px;overflow:hidden;box-shadow:0 6px 16px rgba(24,18,12,.10);transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s;}
.stui-vodlist__box:hover .stui-vodlist__thumb1{transform:translateY(-6px);box-shadow:0 18px 32px rgba(24,18,12,.22);}
.stui-vodlist__thumb1::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.46),rgba(0,0,0,0) 44%);pointer-events:none;}
.stui-vodlist__thumb1 .pic-text{background:rgba(0,0,0,.62)!important;color:#fff!important;border-radius:20px;padding:2px 9px;font-size:11.5px;font-weight:600;z-index:2;}
.stui-vodlist__thumb1 .play{z-index:2;}

/* ---- 片名 / 演员：层级 ---- */
.stui-vodlist__detail{padding-top:9px;}
.stui-vodlist__detail .title{margin:0;line-height:1.35;}
.stui-vodlist__detail .title a{color:var(--ink);font-weight:600;font-size:14.5px;transition:color .15s;text-decoration:none;}
.stui-vodlist__detail .title a:hover{color:var(--accent);}
.stui-vodlist__detail .text{color:var(--ink-3);font-size:12.5px;margin-top:3px;}

/* 2026-07-06：侧栏「详细榜单」标题(如 2025日本恐怖惊悚电影日榜单)会折行——stock 把面板头
   固定 height:40px、bottom-line 横线绝对定位在 40px 底边，第二行标题被线穿过(用户截图)。
   侧栏面板头改自适应高度：线永远画在完整标题下方；单行标题(min-height:40px)视觉零变化。 */
.col-lg-wide-25 .stui-pannel__head.active{height:auto;min-height:40px;}
.col-lg-wide-25 .stui-pannel__head.active .title{float:none;display:block;margin:0 0 6px;}

/* 2026-07-14 手机版：主栏面板头(月榜🔥/详情页云播放/最新X)同理——stock 把头固定 height:30px，
   而标题 float+行高更高，2px bottom-line 被标题底压住(用户截图:排行榜/云播放标题被线条遮挡)。
   手机端头改自适应高度、标题不浮动，横线永远画在完整标题下方；单行标题视觉零变化。 */
@media (max-width:767px){
  .stui-pannel__head.active{height:auto!important;min-height:32px;overflow:hidden;}
  .stui-pannel__head.active .title{float:none;display:inline-block;}
}

/* ---- 周/月榜单 + 文字列表 ---- */
/* 2026-07-04审查：片名过长省略「全局规则」——此前只在首页月榜/右栏/排行榜按页面打补丁，
   筛选页侧栏/详情页侧栏/播放页侧栏/搜索侧栏/综艺页/首页左栏全部会折行错位。基础类统一收口，一处管所有。 */
.stui-vodlist__text li a{color:var(--ink-2);transition:color .15s;text-decoration:none;line-height:1.9;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.stui-vodlist__text li a:hover{color:var(--accent);}
.stui-vodlist__text .text-muted{color:var(--ink-3)!important;font-variant-numeric:tabular-nums;}
/* 榜单序号：前三名金/银/铜徽章，其余灰 */
.stui-vodlist__text li a > span:not(.text-muted){display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;margin-right:9px;font-family:"Outfit",sans-serif;font-size:12px;font-weight:800;color:#fff;background:#c9ced6;vertical-align:1px;}
.stui-vodlist__text li:nth-child(1) a > span:not(.text-muted){background:linear-gradient(135deg,#ffb43d,#ff7a00);}
.stui-vodlist__text li:nth-child(2) a > span:not(.text-muted){background:linear-gradient(135deg,#9fb3c8,#6b7d92);}
.stui-vodlist__text li:nth-child(3) a > span:not(.text-muted){background:linear-gradient(135deg,#e0a679,#c07c42);}

/* ---- 列表页：筛选条(按剧情/按地区/按年份) ---- */
.stui-screen__list{margin:0 0 6px;padding:10px 0;border:0!important;}
.stui-screen__list li{margin:4px 8px 4px 0;}
.stui-screen__list li > span.text-muted{font-weight:600;color:var(--ink-2)!important;margin-right:4px;}
.stui-screen__list li a{display:inline-block;padding:4px 13px;border-radius:18px;color:var(--ink-2);font-size:13.5px;text-decoration:none;transition:background .15s,color .15s;}
.stui-screen__list li a:hover{background:#fff3ea;color:var(--accent-700);}
/* 2026-07-06：主色当底的文字一律用 --accent-ink(按主色明度自动深/白)——浅主色站选中项不再被淹没 */
.stui-screen__list li.active a{background:var(--accent);color:var(--accent-ink,#fff);font-weight:600;}

/* ---- 列表页：排序条(最新/最热/高分/飙升) ---- */
.nav.nav-head{display:flex;gap:6px;}
.nav.nav-head li{margin:0;}
.nav.nav-head li a{display:inline-block;padding:6px 16px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:14px;text-decoration:none;transition:background .15s,color .15s;}
.nav.nav-head li a:hover{background:#f1f2f5;color:var(--ink);}
.nav.nav-head li.active a{background:var(--accent);color:var(--accent-ink,#fff);}

/* ---- 列表页：分页 ---- */
.stui-page{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:8px 0 4px;}
.stui-page li{margin:0;list-style:none;}
.stui-page li a,.stui-page li span{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:10px;background:#fff;border:1px solid var(--line);color:var(--ink-2);font-family:"Outfit",sans-serif;font-weight:600;font-size:14px;text-decoration:none;transition:all .15s;}
.stui-page li a:hover{border-color:var(--accent);color:var(--accent);}
.stui-page li.active a,.stui-page li.active span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink,#fff);}

/* img+alt 化(2026-07-02): 经典系海报改真 <img class="vpic">，绝对定位铺满原 bg 容器；
   容器(stui thumb / v-thumb)本就 position:relative+overflow:hidden，此处兜底补齐 */
.stui-vodlist__thumb,.stui-vodlist__thumb1,.v-thumb{position:relative;overflow:hidden;}
.stui-vodlist__thumb img.vpic,.stui-vodlist__thumb1 img.vpic,.v-thumb img.vpic{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;}