/* ============================================================
   视频站 全站样式
   原则：版面干净，首屏只有入口，不铺分类墙
   ============================================================ */

:root{
    --bg:#12141a;
    --bg-2:#181b23;
    --bg-3:#22262f;
    --line:#2c313c;
    --fg:#e8eaf0;
    --fg-2:#a3a9b8;
    --fg-3:#6f7684;
    --brand:#ff6a2b;
    --brand-2:#ff8a55;
    --radius:10px;
    --wrap:1180px;
}

*{box-sizing:border-box}

/* [hidden] 是浏览器自带的一条普通规则，优先级很低：
   我们自己写的 display（.btn 的 inline-block、.vdp 的 flex）会把它盖掉，
   结果"被藏起来"的元素照样显示。
   ★ 这条放最前面加 !important，一次管住全站，免得每加一个带 display 的组件就再踩一次。
   踩过的坑：向导最后一步同时冒出「下一步」和「确定找」，点「下一步」还没反应。 */
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%}

body{
    margin:0;
    background:var(--bg);
    color:var(--fg);
    font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--brand-2)}
img{display:block;max-width:100%}
code{background:var(--bg-3);padding:2px 6px;border-radius:4px;font-size:13px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 16px}

/* ---------------- 顶栏 ---------------- */
.hd{
    position:sticky;top:0;z-index:30;
    background:rgba(18,20,26,.92);
    backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
}
.hd-inner{display:flex;align-items:center;gap:16px;height:60px}

/* logo：vdvd + .net。字母是 SVG 线条，两个 d 的圆环就是眼眶 */
.logo{display:inline-flex;align-items:flex-end;gap:3px;flex:none;color:var(--brand)}
/* 尺寸必须跟着 SVG 的 viewBox 比例走（125:41），比例不对 SVG 会自己缩放留白，
   字就变小了；加粗后笔画占的地方也变多，盒子要够大才不会被裁。
   ★ 改 SVG 的 viewBox 宽度时这里要跟着算：宽 = 高 × 125 ÷ 41 */
.logo-mark{width:91px;height:30px;display:block}
.logo-suffix{font-size:14px;font-weight:700;line-height:1;letter-spacing:.3px;color:var(--fg-3);padding-bottom:3px}

/* 眨眼：把眼白+瞳孔整体压扁。transform-box 用 view-box，
   这样 transform-origin 就是 viewBox 坐标，能精确对准各自的眼眶中心 */
.logo-eye{
    transform-box:view-box;transform-origin:45px 23px;
    animation:logo-blink 4.6s ease-in-out infinite;
}
/* 两个 d 的圆环中心，跟着 SVG 里的 cx/cy 走，对不上眨眼就会跑偏 */
.logo-eye-2{transform-origin:110.2px 23px}
@keyframes logo-blink{
    0%,88%   {transform:scaleY(1)}
    92%      {transform:scaleY(.06)}
    96%,100% {transform:scaleY(1)}
}

/* 顶栏引导语：楷体（正楷）+ 一只戳向搜索框的手指。
   字体栈是"楷书优先、黑体兜底"：装了楷体的机器出楷书笔锋，没装的退到黑体（SimHei），
   再没有就退到雅黑，最后 sans-serif 保命。
   想改成纯黑体：把前面那串楷体系字体删掉，让 SimHei 顶到第一位即可。 */
.hd-hint{
    display:flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
    font-family:"KaiTi","楷体","楷体_GB2312","STKaiti","华文楷体","SimHei","黑体","Microsoft YaHei",sans-serif;
    font-size:14px;color:var(--fg-2);
}
/* 尺寸配 SVG 的 viewBox 28:18。白色，跟旁边的灰字区分开 */
.hd-finger{
    width:25px;height:16px;flex:none;color:#fff;
    animation:finger-poke 1.15s ease-in-out infinite;
}
@keyframes finger-poke{
    0%,100%{transform:translateX(0)}
    50%    {transform:translateX(6px)}
}

.hd-nav{display:flex;gap:16px;flex:none;font-size:14px;color:var(--fg-2);margin-left:auto}

/* 搜索框紧跟在引导语和手指后面 —— 手指就指着它左边缘。
   撑开剩余空间的是导航（margin-left:auto），空白落在搜索框和导航之间，
   这样手指不会隔着几百像素指着空气 */
.hd-search{
    position:relative;
    display:flex;flex:1;min-width:0;max-width:460px;
    background:var(--bg-3);border:1px solid var(--line);border-radius:999px;
    padding:2px 2px 2px 14px;
}
.hd-search input{
    flex:1;min-width:0;border:0;background:transparent;color:var(--fg);
    font-size:14px;outline:none;padding:8px 0;
}
.hd-search input::placeholder{color:var(--fg-3)}
.hd-search button{
    flex:none;border:0;border-radius:999px;cursor:pointer;
    background:var(--brand);color:#fff;font-size:14px;padding:7px 18px;
}
.hd-search button:hover{background:var(--brand-2)}

.sug{
    position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:40;
    background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;box-shadow:0 12px 32px rgba(0,0,0,.45);
}
.sug a{display:block;padding:9px 14px;font-size:14px;border-bottom:1px solid var(--line)}
.sug a:last-child{border-bottom:0}
.sug a:hover{background:var(--bg-3)}

.main{min-height:60vh;padding-bottom:56px}

/* ---------------- 搜索框（搜索结果页用 .inline） ---------------- */
.hero-search{
    display:flex;gap:8px;max-width:560px;margin:0 auto;
    background:var(--bg-3);border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 18px;
}
.hero-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font-size:15px;outline:none}
.hero-search input::placeholder{color:var(--fg-3)}
.hero-search button{
    flex:none;border:0;border-radius:999px;cursor:pointer;
    background:var(--brand);color:#fff;font-size:15px;padding:10px 26px;
}
.hero-search button:hover{background:var(--brand-2)}
.hero-search.inline{max-width:100%;margin:0 0 22px}

/* 只给读屏和爬虫看的标题 */
.sr-only{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------------- 按钮 ---------------- */
.btn{
    display:inline-block;border:1px solid var(--brand);border-radius:999px;
    background:var(--brand);color:#fff;font-size:14px;line-height:1;
    padding:11px 22px;cursor:pointer;transition:.15s;
}
.btn:hover{background:var(--brand-2);border-color:var(--brand-2);color:#fff}
.btn.ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn.ghost:hover{background:var(--bg-3);color:var(--fg);border-color:var(--fg-3)}
.btn.tiny{padding:6px 14px;font-size:13px}

/* ---------------- 内容区块 ---------------- */
.block{margin:38px 0}
.block-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.block-title{margin:0;font-size:19px;font-weight:600}
.block-hint{color:var(--fg-3);font-size:13px;flex:1}
.block-head .more{margin-left:auto;color:var(--fg-2);font-size:14px}
.block-head .btn{margin-left:auto}

.grid{
    display:grid;gap:18px 14px;
    grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
}

/* ---------------- 卡片 ---------------- */
.card{display:block;overflow:hidden}
.card-pic{
    position:relative;display:block;
    aspect-ratio:5/7;border-radius:var(--radius);overflow:hidden;
    background:var(--bg-3);
}
.card-pic img{width:100%;height:100%;object-fit:cover;transition:.2s}
.card:hover .card-pic img{transform:scale(1.05);opacity:.85}
.card-badge{
    position:absolute;right:6px;top:6px;font-style:normal;font-size:12px;
    background:rgba(0,0,0,.66);color:#fff;padding:2px 7px;border-radius:5px;
    max-width:82%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-title{
    display:block;margin-top:8px;font-size:14px;line-height:1.4;
    overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
    -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.card-meta{display:block;margin-top:3px;color:var(--fg-3);font-size:12px}

/* ---------------- 页面标题 ---------------- */
.page-head{display:flex;align-items:baseline;gap:12px;margin:30px 0 18px;flex-wrap:wrap}
.page-title{margin:0;font-size:22px}
.page-sub{color:var(--fg-3);font-size:14px}
.page-head .btn{margin-left:auto}

.linkrow{margin:0 0 10px;line-height:2.1;color:var(--fg-2);font-size:14px}
.linkrow b{color:var(--fg);margin-right:10px;font-weight:600}
.linkrow a{
    display:inline-block;margin:0 6px 6px 0;padding:3px 12px;
    background:var(--bg-3);border:1px solid var(--line);border-radius:999px;font-size:13px;
}
.linkrow a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.linkrow.refine span{color:var(--fg);margin-right:12px}
.index-links{padding-top:26px;border-top:1px solid var(--line)}

.empty{color:var(--fg-3);font-size:14px}

/* ---------------- 提示 / 空状态 ---------------- */
.notice{
    margin:26px 0;padding:22px;text-align:center;
    background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);color:var(--fg-2);
}
.notice p{margin:0 0 8px}
.notice-actions{margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.blank{padding:80px 0;text-align:center}
.blank h1{font-size:22px;margin:0 0 12px}
.blank p{color:var(--fg-2);margin:0 0 8px}
.blank-actions{margin-top:20px;display:flex;gap:12px;justify-content:center}

/* ---------------- 分页 ---------------- */
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:34px 0 0;font-size:14px}
.pager a,.pager .cur,.pager .gap{
    min-width:36px;height:36px;padding:0 12px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--bg-3);border:1px solid var(--line);
}
.pager a:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.pager .cur{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pager .gap{border-color:transparent;background:transparent;color:var(--fg-3)}

/* ---------------- 向导 ---------------- */
.guide{max-width:820px}
.guide-form{margin-top:22px}
.guide-step{
    background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);
    padding:20px;margin-bottom:16px;
}
.guide-step h2{margin:0 0 14px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px}
.step-no{
    width:22px;height:22px;flex:none;border-radius:50%;background:var(--brand);color:#fff;
    font-size:13px;display:inline-flex;align-items:center;justify-content:center;
}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips + .chips{margin-top:12px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{
    display:inline-block;padding:7px 15px;border-radius:999px;font-size:14px;
    background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2);transition:.15s;
}
.chip:hover span{border-color:var(--fg-3);color:var(--fg)}
.chip input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.chip input:focus-visible + span{outline:2px solid var(--brand-2);outline-offset:2px}

.guide-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}

/* 无 JS 时三条同时展开；有 JS 时按 data-step 分步 */
.guide.js-step .guide-step{display:none}
.guide.js-step .guide-step.on{display:block}

/* ---------------- 留言板（/guide 页底部） ----------------
   顶层留言按正常字号排；回复缩进一层、底色压暗，站长那条再套一层品牌色区分。
   ★ 正文来自访客，长度和形状都不可控，所以一律 overflow-wrap:anywhere ——
     不然一条两百字不带空格的串就能把整页撑出横向滚动条。 */
.board{margin-top:38px;padding-top:28px;border-top:1px solid var(--line)}
.board-title{margin:0 0 6px;font-size:19px;font-weight:600}
.board-sub{margin:0 0 18px;color:var(--fg-3);font-size:14px}

.board-alert{margin:0 0 14px;padding:10px 14px;border-radius:var(--radius);font-size:14px}
.board-alert.ok{background:rgba(70,190,130,.12);border:1px solid rgba(70,190,130,.45);color:#79d8a6}
.board-alert.err{background:rgba(255,106,43,.1);border:1px solid rgba(255,106,43,.45);color:var(--brand-2)}

.board-form,.board-replybox form{
    background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px;
}
/* 蜜罐：真人看不见，Tab 也停不到；脚本爱填就让它填 */
.board-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;margin:0}
.board-nick,.board-text{
    width:100%;background:var(--bg-3);border:1px solid var(--line);border-radius:8px;
    color:var(--fg);font:inherit;font-size:14px;padding:9px 12px;outline:none;transition:.15s;
}
.board-nick{max-width:220px}
.board-text{display:block;margin-top:10px;line-height:1.6;resize:vertical}
.board-nick:focus,.board-text:focus{border-color:var(--brand)}
.board-nick::placeholder,.board-text::placeholder{color:var(--fg-3)}

.board-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin:12px 0 0}
.board-tip{color:var(--fg-3);font-size:13px}

.board-empty{color:var(--fg-3);text-align:center;padding:30px 0 10px;margin:0}
.board-list{list-style:none;margin:10px 0 0;padding:0}
.board-item{border-top:1px solid var(--line);padding:18px 0}
.board-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--fg-3)}
.board-who{color:var(--fg);font-size:14px;font-weight:600}
.board-no{margin-left:auto;font-size:12px}
.board-body{margin-top:8px;font-size:15px;line-height:1.7;overflow-wrap:anywhere}
.board-reply{margin-top:12px;padding:12px 14px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line)}
.board-reply.admin{background:rgba(255,106,43,.07);border-color:rgba(255,106,43,.4)}
.board-badge{background:var(--brand);color:#fff;font-size:12px;line-height:1.7;border-radius:4px;padding:0 6px}
.board-replybox{margin-top:14px}
.board-replybox summary{cursor:pointer;font-size:13px;color:var(--fg-3)}
.board-replybox summary:hover{color:var(--brand-2)}
.board-replybox[open] summary{margin-bottom:10px}

.board-pager{
    display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
    margin-top:20px;color:var(--fg-3);font-size:14px;
}
.board-pager a{border:1px solid var(--line);border-radius:999px;padding:6px 16px;color:var(--fg-2)}
.board-pager a:hover{border-color:var(--fg-3);color:var(--fg)}

/* 入口卡：首页模块末排的最后一格（换一批 / 分类浏览 / 随便来一部）
   高度不能写死成 aspect-ratio:5/7 —— 海报卡是网格项，会被拉伸到"整排最高那张"的高度
   （实测同排 263~282px），而 aspect-ratio 定死的高度不会跟着拉伸，结果入口卡比旁边的
   海报卡矮 50~70px。改成 align-self:stretch 让它跟同排一样高，min-height 兜住
   "这一格独占一行"的极端情况，免得塌成一条。宽度由网格列宽决定，本来就一致。 */
.card-more{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
    align-self:stretch;min-height:213px;padding:10px;
    border:1px dashed var(--line);border-radius:var(--radius);background:var(--bg-2);
    color:var(--fg-2);font:inherit;text-align:center;cursor:pointer;transition:.2s;
}
.card-more b{font-size:15px;font-weight:600;color:var(--fg)}
.card-more span{font-size:12px;line-height:1.5;color:var(--fg-3)}
.card-more:hover{border-color:var(--brand);background:var(--bg-3);color:var(--fg)}
.card-more:hover b{color:var(--brand-2)}

/* ---------------- 详情页 ---------------- */
.detail{margin-top:22px}
.bread{margin-bottom:14px;color:var(--fg-3);font-size:13px}
.bread a:hover{color:var(--brand-2)}
.bread span{margin:0 6px}

.detail-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}

.player-wrap{background:#000;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.player-wrap .dplayer{width:100%;height:100%}
.player-tip{
    margin:10px 0 0;color:var(--fg-3);font-size:13px;
}

.bar{margin-top:14px}
.bar-title{margin:0 0 8px;color:var(--fg-2);font-size:14px}
.bar-title b{color:var(--fg)}
.lines,.eps{display:flex;flex-wrap:wrap;gap:8px;max-height:220px;overflow:auto}
.lines button,.eps button{
    border:1px solid var(--line);background:var(--bg-3);color:var(--fg-2);
    border-radius:8px;padding:6px 14px;font-size:14px;cursor:pointer;transition:.15s;
}
.lines button:hover,.eps button:hover{border-color:var(--fg-3);color:var(--fg)}
.lines button.on,.eps button.on{background:var(--brand);border-color:var(--brand);color:#fff}
.lines button[data-dead="1"]{opacity:.5;text-decoration:line-through}
.eps button{min-width:44px;padding:6px 10px}

.detail-side{min-width:0}
.side-head{display:flex;gap:14px}
.side-pic{width:104px;flex:none;aspect-ratio:5/7;border-radius:8px;overflow:hidden;background:var(--bg-3)}
.side-pic img{width:100%;height:100%;object-fit:cover}
.side-main h1{margin:0 0 6px;font-size:19px;line-height:1.35}
.side-sub{margin:0 0 8px;color:var(--fg-3);font-size:13px}
.side-score{color:var(--brand);font-size:20px;font-weight:700}
.side-score small{color:var(--fg-3);font-size:12px;font-weight:400}
.meta-list{margin:16px 0 0;padding:0;list-style:none;font-size:14px}
.meta-list li{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);color:var(--fg-2)}
.meta-list b{flex:none;width:56px;color:var(--fg-3);font-weight:400}
.meta-list span{min-width:0;word-break:break-word}

.side-acts{margin:16px 0 0;display:flex;gap:10px;flex-wrap:wrap}
.intro{margin:22px 0 0}
.intro h2{margin:0 0 8px;font-size:16px}
.intro p{margin:0 0 8px;color:var(--fg-2);white-space:pre-wrap;word-break:break-word}
.intro p:last-child{margin-bottom:0}

/* ---------------- 全站右下角常驻入口（layout 里，每页都有） ---------------- */
.spot{
    position:fixed;right:22px;bottom:22px;z-index:35;
    display:flex;flex-direction:column;align-items:flex-end;gap:10px;
}
.spot-btn{
    /* 字从上往下竖排。padding 是物理方向、不跟着 writing-mode 转，
       所以竖排后要写成"上下大、左右小"，否则字会顶到按钮两头 */
    writing-mode:vertical-rl;text-orientation:upright;letter-spacing:.1em;
    border:1px solid var(--brand);border-radius:999px;cursor:pointer;
    background:var(--brand);color:#fff;font-size:14px;line-height:1;
    padding:18px 12px;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:.15s;
}
.spot-btn:hover{background:var(--brand-2);border-color:var(--brand-2)}
.spot-btn.ghost{background:var(--bg-2);color:var(--fg);border-color:var(--line)}
.spot-btn.ghost:hover{background:var(--bg-3);color:var(--fg);border-color:var(--fg-3)}

/* 回顶部：滚过一屏才出现（app.js 的 initTop 控制 hidden）。圆钮，宽度跟上面两条竖排对齐 */
.spot-top{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;
    border:1px solid var(--line);border-radius:50%;cursor:pointer;
    background:var(--bg-2);color:var(--fg-2);font-size:17px;line-height:1;
    box-shadow:0 10px 26px rgba(0,0,0,.45);transition:.15s;
}
.spot-top:hover{background:var(--bg-3);color:var(--fg);border-color:var(--fg-3)}

/* ---------------- 弹层 ----------------
   ★ 类名一律用 vdp-（本站专有），不要改回 modal / popup / mask 这类通用词：
     广告拦截插件和国产浏览器的"弹窗广告"检测都是按 class 名认的，
     通用词会让弹层被藏掉（点了浮动按钮没反应）或被弹红色提醒。
     同理，这层 DOM 由 app.js 在点击时才生成，页面源码里不含任何浮层标记。 */
body.vdp-open{overflow:hidden}

.vdp{
    position:fixed;inset:0;z-index:50;
    display:flex;align-items:center;justify-content:center;padding:20px;
}
.vdp-mask{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.vdp-panel{
    position:relative;z-index:1;
    width:100%;max-width:720px;max-height:86vh;overflow:auto;
    background:var(--bg-2);border:1px solid var(--line);border-radius:14px;
    padding:22px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,.6);
    animation:vdp-in .18s ease-out;
}
@keyframes vdp-in{
    from{opacity:0;transform:translateY(10px) scale(.98)}
    to  {opacity:1;transform:none}
}
.vdp-title{margin:0 0 6px;font-size:19px}
.vdp-sub{margin:0 0 18px;color:var(--fg-3);font-size:13px}
.vdp-x{
    position:absolute;right:12px;top:12px;z-index:1;
    width:32px;height:32px;padding:0;line-height:1;border:0;border-radius:50%;cursor:pointer;
    background:transparent;color:var(--fg-3);font-size:22px;
}
.vdp-x:hover{background:var(--bg-3);color:var(--fg)}

/* 向导搬到弹层里之后（表单是点开时才拉的），占位与兜底文字 */
.guide-load .empty{margin:0;padding:4px 0}
.guide-load .empty a{color:var(--brand-2);text-decoration:underline}

/* 向导搬进弹层后，外面已经有一层带边框的卡片了，步骤块不再重复画框 */
.vdp-panel .guide-form{margin-top:0}
.vdp-panel .guide-step{background:transparent;border:0;padding:0;margin-bottom:0}

/* ---------------- 弹层：「随便来一部」单片 ---------------- */
.pick-card{display:flex;gap:18px}
.pick-pic{
    width:132px;flex:none;aspect-ratio:5/7;border-radius:var(--radius);
    overflow:hidden;background:var(--bg-3);
}
.pick-pic img{width:100%;height:100%;object-fit:cover}
.pick-main{min-width:0;display:flex;flex-direction:column}
.pick-title{margin:0 0 8px;font-size:18px;line-height:1.35}
.pick-meta{margin:0 0 10px;color:var(--fg-3);font-size:13px}
.pick-intro{margin:0;color:var(--fg-2);font-size:14px;word-break:break-word}
.pick-acts{margin:auto 0 0;padding-top:16px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------------- 页脚 ---------------- */
.ft{border-top:1px solid var(--line);background:var(--bg-2);padding:26px 0 34px;font-size:13px}
.ft-tags p{margin:0 0 8px;color:var(--fg-3)}
.ft-tags b{color:var(--fg-2);margin-right:10px;font-weight:600}
.ft-tags a{display:inline-block;margin:0 12px 4px 0;color:var(--fg-3)}
.ft-tags a:hover{color:var(--brand-2)}
/* 网站地图那一行：它和版权行是一组，所以分隔线画在它上面，别画在两行中间 */
.ft-more{margin:18px 0 0;color:var(--fg-3);border-top:1px solid var(--line);padding-top:14px}
.ft-more a{color:var(--fg-3)}
.ft-more a:hover{color:var(--brand-2)}
.ft-copy{margin:8px 0 0;color:var(--fg-3)}

/* ---------------- 窄屏 ---------------- */
@media (max-width:860px){
    .detail-top{grid-template-columns:minmax(0,1fr)}
    .detail-side{order:-1}
    .hd-nav{display:none}
    .hd-inner{gap:10px}
    /* 一行塞不下「引导语 + 手指 + 搜索框」三样，手机上先收起引导语。
       搜索框自带的占位提示还在，不至于不知道能搜 */
    .hd-hint{display:none}
}
@media (max-width:520px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:14px 10px}
    .hero-search{flex-direction:column;border-radius:var(--radius);padding:10px}
    .hero-search button{width:100%;padding:11px}
    .side-head{gap:12px}
    .side-pic{width:88px}

    .logo-mark{width:73px;height:24px}
    .logo-suffix{font-size:13px}

    /* 悬浮入口缩小、贴边；弹层改成从底部升起，占满宽度更好点按 */
    .spot{right:12px;bottom:12px;gap:8px}
    /* 竖排的按钮瘦，手机上主要压上下留白，不然两个按钮加起来能占掉小半屏 */
    .spot-btn{padding:14px 10px;font-size:13px}
    /* 上面两条竖排的宽 35px，回顶部的圆钮跟着缩，右边缘才不会参差 */
    .spot-top{width:35px;height:35px;font-size:15px}
    .vdp{padding:0;align-items:flex-end}
    .vdp-panel{
        max-width:none;max-height:90vh;
        border-radius:14px 14px 0 0;padding:18px 16px 22px;
    }

    .pick-card{gap:14px}
    .pick-pic{width:104px}
    .pick-title{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
    .logo-eye,.hd-finger,.vdp-panel{animation:none}
}