/* ============================================================
   titan-shell.css — TitanTV 独立页统一外壳样式（与 cards.php 视觉一致）
   提供：整页滚动解锁 / 字体 / 切角 / 控制台 / chip / 按钮 / 标签色
   另含：视频页网格与播放弹窗、会员页尊贵风点缀
   ============================================================ */

/* 整页滚动解锁（全局 style.css 将 body 锁定为整屏 SPA） */
body.cards-page, body.video-page, body.archive-page, body.author-page,
body.member-page, body.shop-page { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; min-height: 100vh; }

.font-lcd { font-family: 'Digital7Mono', 'Digital7', 'Zpix', monospace; }
.font-mono { font-family: 'SF TransRobotics', 'Zpix', sans-serif; }

/* 切角 */
.gl-clip { clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px); }
.gl-clip-sm { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }

/* 控制台面板 */
.cyber-panel { position: relative; background: rgba(8,10,14,.72); border: 1px solid rgb(var(--color-main) /  .28);
    box-shadow: 0 0 30px rgba(0,0,0,.5), inset 0 0 40px rgb(var(--color-main) /  .04); backdrop-filter: blur(6px); }
.cyber-input { background: rgba(0,0,0,.55); border:1px solid rgb(var(--color-main) /  .3); color:#fff;
    padding: 9px 14px; border-radius:8px; width:100%; transition: all .3s ease; font-family:'SF TransRobotics','Zpix',sans-serif; }
.cyber-input:focus { border-color: rgb(var(--color-main)); box-shadow: 0 0 15px rgb(var(--color-main) /  .2); outline:none; }

/* 筛选 chip（与 cards.php 同款） */
.chip { display:inline-flex; align-items:center; gap:6px; padding: 7px 13px; cursor:pointer; white-space:nowrap;
    font-family:'SF TransRobotics','Zpix',sans-serif; font-size:11px; letter-spacing:1px;
    color: rgba(var(--cc, var(--color-main)), .85); background: rgba(0,0,0,.5);
    border:1px solid rgba(var(--cc, var(--color-main)), .28);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: all .25s cubic-bezier(.2,.8,.2,1); }
.chip:hover { background: rgba(var(--cc, var(--color-main)), .14); border-color: rgb(var(--cc, var(--color-main))); color:#fff; }
.chip.on { background: rgb(var(--cc, var(--color-main))); color:#050505; border-color: rgb(var(--cc, var(--color-main)));
    box-shadow: 0 0 14px rgba(var(--cc, var(--color-main)), .6); font-weight:bold; }
.chip .dot { width:7px; height:7px; border-radius:50%; background: rgb(var(--cc, var(--color-main))); box-shadow: 0 0 6px rgb(var(--cc, var(--color-main))); }

/* 通用按钮 */
.cv-btn, .tt-btn { display:inline-flex; align-items:center; gap:7px; padding: 9px 15px; cursor:pointer;
    font-family:'SF TransRobotics','Zpix',sans-serif; font-size:12px; letter-spacing:1px; color: rgb(var(--cvr, var(--color-main)));
    background: rgba(0,0,0,.6); border:1px solid rgba(var(--cvr, var(--color-main)), .5);
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    transition: all .25s; white-space:nowrap; text-decoration:none; }
.cv-btn:hover, .tt-btn:hover { background: rgba(var(--cvr, var(--color-main)), .16); box-shadow: 0 0 16px rgba(var(--cvr, var(--color-main)), .5); color:#fff; }
.cv-btn:disabled { opacity:.3; cursor:not-allowed; box-shadow:none; }

/* 稀有度标签色（图鉴/档案共用） */
.tag-ur { background-color:#ff55ff; color:#000; }
.tag-ssr { background-color:#ffcc00; color:#000; }
.tag-ss { background-color:#ff4444; color:#000; }
.tag-s { background-color:#00ffff; color:#000; }
.tag-r { background-color:#cccccc; color:#000; }

/* ============================================================
   视频页（video.php）
   ============================================================ */
.vid-grid { display:grid; gap:31px; grid-template-columns: repeat(2, minmax(0,1fr)); perspective:1500px; }
@media (min-width: 768px) { .vid-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap:37px; } }

/* 视频控制台：吸顶 + 分区竖排（分类 / 合集 / 控件 各自独立成行，互不遮挡，便于后续新增） */
#video-filter-bar { display:flex; flex-direction:column; gap:12px; padding:14px 16px; margin-bottom:22px; position:sticky; top:76px; z-index:60; }
#video-filter-bar .vf-rail { display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap; }
#video-filter-bar .vf-ctls { display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap; }
@media (min-width: 768px) { #video-filter-bar .vf-ctls { justify-content:flex-end; } }
/* 手机 / 平板：分类横向滑动 + 控件单行，避免吸顶面板换行占高 */
@media (max-width: 1023px) {
  #video-filter-bar { padding:10px 12px; gap:8px; top:64px; }
  #video-filter-bar .vf-rail { flex-wrap:nowrap; overflow-x:auto; }
  /* 控件行不换行：排序收窄 + 博主自适应 + 刷新按钮固定，整体只占一行 */
  #video-filter-bar .vf-ctls { flex-wrap:nowrap; gap:6px; }
  #video-filter-bar .vf-ctls > div:first-child { width:96px !important; }
  #video-filter-bar .vf-ctls > div:nth-child(2) { min-width:0; flex:1 1 auto; }
  #video-filter-bar .vf-ctl { padding-left:9px; padding-right:9px; }
  #video-filter-bar .vf-ctls select { height:36px; font-size:11px; }
}
#video-filter-bar select { height:40px; }
#video-collection-bar { display:flex; align-items:center; gap:8px; width:100%; flex-wrap:wrap; }
@media (max-width: 1023px) { #video-collection-bar { flex-wrap:nowrap; overflow-x:auto; } }
#video-collection-bar .chip { font-size:11px; }

/* 视频卡片：卡片页卡面语言（切角/扫光/角框/稀有度式发光边框） */
.vfx-card { border-width:2px !important; background:#060606; transform-style:preserve-3d; will-change:transform; transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s, filter .45s; box-shadow:0 14px 30px rgba(0,0,0,.7), 0 4px 10px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05); }
.vfx-card .vfx-shot { position:relative; overflow:hidden; aspect-ratio:3 / 4; }   /* 封面 3:4 竖屏 */
.vfx-card::before { content:''; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity .35s; mix-blend-mode:screen;
    background: radial-gradient(220px 220px at 50% 0%, rgb(var(--color-main) / .28), transparent 70%); }
.vfx-card:hover { transform: translateY(-12px) rotateX(4deg) rotateY(-2deg) scale(1.03); box-shadow: 0 34px 60px rgba(0,0,0,.85), 0 0 34px rgb(var(--color-main) / .45), 0 6px 16px rgba(0,0,0,.7); }
.vfx-card:hover::before { opacity:1; }
.vfx-card img { transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .5s; }
.vfx-card:hover img { transform: scale(1.06); }
.vfx-card .vfx-corners { position:absolute; inset:9px; z-index:6; pointer-events:none; opacity:.22; transition:opacity .3s;
    background:
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) left 0 top 0/14px 2px,
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) left 0 top 0/2px 14px,
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) right 0 top 0/14px 2px,
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) right 0 top 0/2px 14px,
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) left 0 bottom 0/14px 2px,
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) left 0 bottom 0/2px 14px,
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) right 0 bottom 0/14px 2px,
        linear-gradient(rgb(var(--color-main)),rgb(var(--color-main))) right 0 bottom 0/2px 14px;
    background-repeat:no-repeat; filter: drop-shadow(0 0 5px rgb(var(--color-main) / .8)); }
.vfx-card:hover .vfx-corners { opacity:.95; }
/* 卡片标题条：14px 中文标题、单行不折行、超长自动隐藏；半透明底 + 上下左右留白 + 装饰角标 */
.vfx-card .vfx-meta { position:relative; padding:12px 18px 13px 15px; overflow:hidden;
    background:rgba(8,10,14,.72); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
    border-top:1px solid rgb(var(--color-main) / .28); }
/* 左侧竖向霓虹饰条 */
.vfx-card .vfx-meta::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg, rgb(var(--color-main)), rgb(var(--color-main) / 0)); box-shadow:0 0 9px rgb(var(--color-main) / .7); }
/* 右上切角括号饰标 */
.vfx-card .vfx-meta::after { content:''; position:absolute; right:9px; top:8px; width:10px; height:10px; pointer-events:none;
    border-top:2px solid rgb(var(--color-main) / .7); border-right:2px solid rgb(var(--color-main) / .7); opacity:.75; }
/* 左下斜切角标（装饰） */
.vfx-card .vfx-corner { position:absolute; left:0; bottom:0; width:56px; height:12px; pointer-events:none; opacity:.85;
    background:linear-gradient(90deg, rgb(var(--color-main) / .85), rgb(var(--color-main) / 0));
    clip-path:polygon(0 100%, 100% 100%, 100% 0); }
/* 标题：仅此处使用 Zpix 像素字（!important 压过全局字体栈）· 单行不换行 · 超长省略 · 水平居中 */
.vfx-card .vfx-title { font-family:'Zpix','Microsoft YaHei',sans-serif !important;
    font-size:14px; line-height:1.35; color:#f2f6ff; font-weight:400; letter-spacing:.05em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
    -webkit-font-smoothing:none; text-shadow:0 1px 2px rgba(0,0,0,.95); }
/* 封面标签：季合集 / 第N集（右上角、时长下方，避开底部日期行；白色大字） */
.vfx-card .vfx-badge { position:absolute; right:9px; top:30px; z-index:6; pointer-events:none;
    font-family:'Digital7Mono','Digital7','Zpix',monospace; font-size:13px; line-height:1; font-weight:900; letter-spacing:.08em;
    padding:6px 13px 6px 11px; color:#fff; background:rgba(0,0,0,.66);
    border:1.5px solid rgb(var(--color-main));
    clip-path:polygon(0 0,100% 0,calc(100% - 9px) 100%,0 100%);
    box-shadow:0 0 16px rgb(var(--color-main) / .8), 0 2px 8px rgba(0,0,0,.75);
    text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 8px rgb(var(--color-main) / .6); }

/* 已过期角标：档案封存戳（左侧危险斜纹 + 斜切尾 + 红色描边，独立于 NEW 的视觉语言；封面转黑白时保留警示色） */
.vfx-card .vfx-expired { position:absolute; left:0; top:0; z-index:10; pointer-events:none;
    display:inline-flex; align-items:center; gap:6px; padding:6px 18px 6px 13px;
    font-family:'Zpix','Microsoft YaHei',sans-serif !important;
    font-size:12px; line-height:1; letter-spacing:.22em; color:#ffd8e2;
    background:linear-gradient(90deg, rgba(62,6,21,.95), rgba(16,6,10,.9));
    border-top:1px solid rgba(255,59,107,.62); border-bottom:1px solid rgba(255,59,107,.4);
    clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%);
    box-shadow:0 6px 18px rgba(0,0,0,.8), 0 0 16px rgba(255,59,107,.3);
    text-shadow:0 0 9px rgba(255,59,107,.55), 0 1px 2px rgba(0,0,0,.95); }
.vfx-card .vfx-expired::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
    background:repeating-linear-gradient(135deg,#ff3b6b 0 3px,#150409 3px 6px); box-shadow:0 0 10px rgba(255,59,107,.6); }
.vfx-card .vfx-expired::after { content:''; position:absolute; right:7px; top:50%; width:4px; height:4px; margin-top:-2px;
    background:#ff3b6b; transform:rotate(45deg); box-shadow:0 0 8px rgba(255,59,107,.9); }
.vfx-card .vfx-expired i { font-size:11px; color:#ff5a7d; filter:drop-shadow(0 0 5px rgba(255,59,107,.85)); }

/* 分页 */
#video-pager { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:30px 0 4px; }
#video-pager button { min-width:46px; height:46px; padding:0 16px; border:1px solid rgb(var(--color-main) / .45); background:rgba(0,0,0,.55);
    color:#d3d9e6; font-family:'SF TransRobotics','Zpix',sans-serif; font-size:15px; letter-spacing:.08em; cursor:pointer; transition:all .2s;
    clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
#video-pager button:hover:not(:disabled) { background:rgb(var(--color-main) / .18); color:rgb(var(--color-main)); border-color:rgb(var(--color-main) / .85); }
#video-pager button:disabled { opacity:.35; cursor:not-allowed; }
#video-pager .vf-page-info { font-family:'SF TransRobotics','Zpix',sans-serif; font-size:14px; color:#a9b2c6; letter-spacing:.14em; padding:0 8px; }

/* ============================================================
   精选专辑 · 巨幅海报轮播（FEATURED VAULT · 院线大片风）
   16:9 巨幕 · 直角切角（无圆角）· 主题色硬边框 · 扫描线 + 取景角标
   居中卡放大高亮，两侧压暗缩小；自动轮播，点海报进入对应专辑。
   ============================================================ */
.tt-vault { position:relative; width:100%; margin:1.75rem 0 1.5rem; }
.tt-vault-head { max-width:1280px; margin:0 auto 14px; padding:0 1.25rem; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.tt-vault-title { font-family:'Digital7Mono','Digital7','Zpix',monospace; font-size:12px; letter-spacing:.34em; color:rgba(255,255,255,.5); }
.tt-vault-nav { display:flex; gap:8px; }
.tt-vault-nav button { width:42px; height:38px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:18px;
    color:rgb(var(--color-main)); background:rgb(var(--color-main) / .08); border:1px solid rgb(var(--color-main) / .45); transition:.2s;
    border-radius:0; clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px); }
.tt-vault-nav button:hover { background:rgb(var(--color-main)); color:#04121a; box-shadow:0 0 18px rgb(var(--color-main) / .6); }
.tt-vault-track { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    padding:26px calc(50% - 37vmin) 22px; scrollbar-width:none; -ms-overflow-style:none; }
.tt-vault-track::-webkit-scrollbar { display:none; }

.tt-vault-slide { position:relative; flex:0 0 auto; width:74vmin; max-width:1120px; aspect-ratio:16 / 9;   /* 封面固定 16:9 */
    scroll-snap-align:center; overflow:hidden; cursor:pointer; background:#05070b; border-radius:0;
    border:2px solid rgba(255,255,255,.10);
    clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
    transform:scale(.9); opacity:.55; filter:grayscale(.55) brightness(.68);
    transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .5s, filter .5s, border-color .4s, box-shadow .5s; }
.tt-vault-slide.on { transform:scale(1); opacity:1; filter:none; border-color:rgb(var(--color-main));
    box-shadow:0 30px 80px rgba(0,0,0,.82), 0 0 46px rgb(var(--color-main) / .45); }
.tt-vault-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* 院线级 letterbox 压暗：上下双向渐变 */
.tt-vault-slide::after { content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(2,4,8,.80) 0%, rgba(2,4,8,.12) 22%, rgba(2,4,8,.08) 54%, rgba(2,4,8,.62) 80%, rgba(2,4,8,.96) 100%); }
/* 扫描线质感 */
.tt-vault-scan { position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.15; mix-blend-mode:overlay;
    background:repeating-linear-gradient(to bottom, rgba(255,255,255,.9) 0 1px, rgba(255,255,255,0) 1px 3px); }
/* 顶部霓虹发丝线（仅高亮卡） */
.tt-vault-slide.on::before { content:''; position:absolute; left:0; right:0; top:0; height:2px; z-index:4;
    background:linear-gradient(90deg, rgb(var(--color-main) / 0), rgb(var(--color-main)), rgb(var(--color-main) / 0));
    box-shadow:0 0 14px rgb(var(--color-main) / .9); }
/* 四角取景框角标 */
.tt-vault-frame { position:absolute; inset:0; z-index:3; pointer-events:none; transition:opacity .4s; }
.tt-vault-frame::before,.tt-vault-frame::after { content:''; position:absolute; width:26px; height:26px; border:2px solid rgb(var(--color-main)); opacity:.9; }
.tt-vault-frame::before { left:12px; top:12px; border-right:none; border-bottom:none; }
.tt-vault-frame::after { right:12px; bottom:12px; border-left:none; border-top:none; }
.tt-vault-slide:not(.on) .tt-vault-frame { opacity:.28; }
.tt-vault-no { position:absolute; top:16px; left:24px; z-index:5; font-family:'Digital7Mono','Digital7','Zpix',monospace; font-size:12px; letter-spacing:.34em; color:rgba(255,255,255,.72); }
.tt-vault-body { position:absolute; left:0; right:0; bottom:0; z-index:5; padding:30px 34px 32px; }
.tt-vault-en { font-family:'Digital7Mono','Digital7','Zpix',monospace; font-size:12px; letter-spacing:.42em; color:rgb(var(--color-main));
    text-shadow:0 0 14px rgb(var(--color-main) / .7); margin-bottom:10px; }
.tt-vault-name { font-family:'Digital7Mono','Digital7','Zpix',monospace; font-size:clamp(26px,4.6vmin,56px); font-weight:900; letter-spacing:.02em;
    color:#fff; line-height:1.03; text-shadow:0 3px 26px rgba(0,0,0,.95); }
.tt-vault-tag { font-family:'SF TransRobotics','Zpix',sans-serif; font-size:14px; color:rgba(255,255,255,.85); margin-top:10px; }
.tt-vault-meta { display:flex; align-items:center; gap:16px; margin-top:18px; }
.tt-vault-cta { display:inline-flex; align-items:center; gap:8px; font-family:'Digital7Mono','Digital7','Zpix',monospace; font-size:12px; letter-spacing:.16em;
    color:#04121a; background:rgb(var(--color-main)); padding:10px 22px; border-radius:0; transition:opacity .3s;
    clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%); box-shadow:0 0 22px rgb(var(--color-main) / .6); }
.tt-vault-slide:not(.on) .tt-vault-cta { opacity:0; }
/* 计数：切角平行四边形（非胶囊） */
.tt-vault-count { font-family:'SF TransRobotics','Zpix',sans-serif; font-size:12px; color:rgba(255,255,255,.82);
    border:1px solid rgba(255,255,255,.3); padding:8px 16px; border-radius:0;
    clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%); }
@media (max-width:767px){
  .tt-vault-slide { width:88vw; }
  .tt-vault-track { padding:16px 6vw 14px; gap:14px; }
  .tt-vault-body { padding:20px 20px 22px; }
  .tt-vault-frame::before,.tt-vault-frame::after { width:16px; height:16px; }
}

/* 播放弹窗（#video-modal 由 app.js playVideo 动态构建，此处统一外层与配套元素观感） */
#video-modal { background: radial-gradient(circle at 50% 42%, rgb(var(--color-main) / .08), rgba(0,0,0,.96) 62%) !important; }
#video-modal .cyber-panel, #video-modal > div { border-color: rgb(var(--color-main) /  .35) !important; }

/* ============================================================
   会员页（尊贵风点缀）
   ============================================================ */
.premium-gold { --gold: 255, 205, 90; }
.premium-ring { border-radius:50%; background: conic-gradient(from 0deg, rgba(var(--gold),0) 0 58%, rgba(var(--gold),.95) 76%, #fff 80%, rgba(var(--gold),.95) 84%, rgba(var(--gold),0) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
    animation: spinGold 6s linear infinite; }
@keyframes spinGold { to { transform: rotate(360deg); } }
.premium-frame { border: 1px solid rgba(var(--gold), .5); box-shadow: 0 0 40px rgba(var(--gold), .18), inset 0 0 40px rgba(var(--gold), .05); }
.premium-title { background: linear-gradient(180deg, #fff 0%, #ffe9a8 45%, #d9a441 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ============================================================
   创作者档案 · 官方动态：底部收缩按钮
   ============================================================ */
.news-collapse { display:inline-flex; align-items:center; gap:8px; padding:9px 22px; cursor:pointer;
    font-family:'SF TransRobotics','Zpix',sans-serif; font-size:12px; letter-spacing:.16em; color:rgb(var(--color-main));
    background:rgba(0,0,0,.5); border:1px solid rgb(var(--color-main) / .4);
    clip-path: polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
    transition: all .2s; }
.news-collapse:hover { background:rgb(var(--color-main) / .14); color:#fff; box-shadow:0 0 16px rgb(var(--color-main) / .4); }