/* 主页特定样式 */

/* 历史记录和设置按钮定位样式 */
.top-corner-button {
    position: fixed;
    z-index: 10;
    background: #222;
    border: 1px solid #333;
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    transition: all 0.2s ease;
}

.top-corner-button:hover {
    background: #333;
    border-color: white;
}

/* 搜索区域样式 */
.search-box {
    height: 3.5rem;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: stretch;
}

.search-button {
    width: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: black;
    font-weight: 500;
    transition: background-color 0.2s;
}

.search-button:hover {
    background: #f0f0f0;
}

.search-input {
    flex: 1;
    background: #111;
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    color: white;
    padding: 0 1.5rem;
    font-size: 1rem;
    outline: none;
    transition: background-color 0.2s;
}

.search-input:focus {
    background: #191919;
}

/* 最近搜索记录样式 */
.recent-search-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin: 0.25rem;
    background: rgba(255, 156, 72, 0.10);
    border: 1px solid rgba(255, 156, 72, 0.25);
    border-radius: 0.5rem;
    color: #e5e7eb;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.recent-search-tag:hover {
    background: rgba(255, 156, 72, 0.25);
    border-color: rgba(255, 156, 72, 0.45);
}

/* 豆瓣区域样式 */
.douban-container {
    margin: 2rem auto;
    max-width: 1280px;
    padding: 0 0.5rem;
}

.douban-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.douban-toggle {
    display: flex;
    align-items: center;
    background: #222;
    border-radius: 9999px;
    padding: 0.25rem;
}

.douban-toggle-button {
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 9999px;
}

.douban-toggle-button.active {
    background: #ff9c48;
    color: white;
}

.douban-toggle-button:not(.active) {
    color: #9ca3af;
}

.douban-toggle-button:not(.active):hover {
    color: white;
}

.douban-refresh-button {
    font-size: 0.875rem;
    padding: 0.25rem 0.75rem;
    background: #ff9c48;
    color: white;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.douban-refresh-button:hover {
    background: #ffb36f;
}

.douban-tags-container {
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.douban-tags {
    display: flex;
    gap: 0.5rem;
    min-width: max-content;
}

.douban-tag {
    padding: 0.25rem 0.75rem;
    background: rgba(255, 156, 72, 0.10);
    border: 1px solid rgba(255, 156, 72, 0.25);
    border-radius: 0.5rem;
    color: #ffcf9e;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.douban-tag:hover {
    background: rgba(255, 156, 72, 0.25);
    border-color: rgba(255, 156, 72, 0.45);
}

.douban-tag.active {
    background: #ff9c48;
    border-color: #ff9c48;
    color: white;
}

/* 搜索结果样式 */
.search-results-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.search-result-stats {
    text-align: right;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-bottom: 1rem;
}

/* 响应式网格布局 */
.search-results-grid {
    display: grid;
    gap: 1rem;
}

@media (max-width: 640px) {
    .search-results-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 641px) and (max-width: 768px) {
    .search-results-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .search-results-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1025px) {
    .search-results-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== App 顶栏（搜索胶囊 + 频道 tab）===== */
.app-header {
    /* ★ 覆盖层化：fixed 而不是 sticky。
       原来 sticky 时顶栏在文档流里实打实占 ~99px 高度，滚动隐藏只是
       translateY 把它「移走」，这 99px 没人回收 → 顶部露出 body 背景
       （#121212 近黑），就是「导航隐藏了、下面仍留一条黑色遮罩」
       （排行榜/豆瓣/我的同理，因为共用这一个顶栏）。
       改成 fixed 后它脱离文档流：隐藏/复位只是纯位移动画，零布局变化，
       任何页面都不会再露黑。内容让位交给 --app-header-h（见下方规则）。 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 25;
    /* ★ 半透明玻璃底 + 底部渐隐：
       旧值 rgba(18,18,18,0.94) 是近纯黑块，卡片滑到顶栏下方被整块黑遮住、
       留一大片黑区。降到 0.62 明显半透明，并把底部约 30px 渐变到透明，
       黑边自然融进内容，不再是硬黑边；backdrop-filter 保留作毛玻璃增强
       （Android WebView 不生效也只是退化为半透明底，可接受）。 */
    background: linear-gradient(to bottom,
                rgba(18, 18, 18, 0.62) 0%,
                rgba(18, 18, 18, 0.62) calc(100% - 30px),
                rgba(18, 18, 18, 0) 100%);
    /* ⚠️ backdrop-filter 故意不写在这里：见文件末尾的桌面专用媒体查询。
       顶栏是固定层、底下是不断滚动的卡片，每帧重做一次全宽高斯模糊
       是 Android WebView 上最贵的一笔；手机端关掉后视觉退化成
       上面这条半透明渐变底（本来就是为「模糊不生效」准备的兜底），几乎无差。 */
    padding: 10px 14px 0;
}

/* ★ 顶栏 = fixed 覆盖层；内容【整屏铺满、从 y=0 起】，让位交给各滚动容器
   自己的 padding-top。这样顶栏收起/回来只是纯 transform 位移：
   不碰任何布局属性 → 不重排 → 不跟手/顶卡片的问题从根上消失。

   为什么原来会晃：上一版让内容靠 #viewHome 的 padding-top 做 0.3s 过渡让位，
   等于每帧重排整棵子树（还是 4000+ 卡片的子树），手机上必然掉帧；
   而且顶栏回来时卡片被整体推下去一截，观感就是「被顶了一下」。

   #viewHome 定为「相对定位 + 100vh + 裁掉溢出」，四个区容器绝对定位铺满：
   它们的尺寸不再参与文档流，页面高度恒定，就绝不会出现滚动条抖动；
   同时滚动区天然从 y=0 开始，顶栏收起时底下本来就是内容。 */
#viewHome {
    position: relative;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}
#hotArea,
#rankArea,
#doubanArea,
#mineArea {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
/* 榜单页顶部那排 tab：绝对定位浮在内容之上（内容从 y=0 起、由 padding 让位），
   否则它会被顶栏压住；给个与页面同色的底，滚动时不会和卡片串色。 */
#rankTabs,
#doubanTabs {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 5;
    background: var(--bg, #121212);
    /* ★ 顶栏收起时这排 tab 跟着上滑到顶。
       用 transform 让位、不用 top —— 改 top 每帧都要重排子元素，
       改 transform 只走合成器（和顶栏同一条时间线、同一条曲线）。
       为负值时被 #viewHome 的 overflow:hidden 裁掉，不会外溢。 */
    transform: translateY(var(--app-header-h, 96px));
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
html.bars-hidden #rankTabs,
html.bars-hidden #doubanTabs {
    transform: translateY(0);
}

/* ★ 毛玻璃只在桌面（有 hover + 精细指针）保留；
   手机 / Android WebView 一律关掉 —— 固定层每帧对滚动的卡片重做全宽模糊
   是滚动期最大的一笔 GPU 开销，关掉后只是退化成上面的半透明渐变底。 */
@media (hover: hover) and (pointer: fine) {
    .app-header,
    .bottom-nav {
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }
}
/* 搜索页是文档级滚动，静态让位即可（顶栏收起时下方内容本来就已铺过去） */
#viewSearch {
    padding-top: var(--app-header-h, 96px);
}

.ah-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.search-pill {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 12px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color 0.2s;
    position: relative;   /* 作为最近搜索下拉浮层的定位基准 */
}

/* ── 最近搜索：点搜索框弹出的纵向下拉框（浏览器搜索建议风格）──────
   点击搜索框弹出，宽度和搜索框同宽，每条记录一行：
   [🔍 词条                        ×] */
.recent-searches {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: none;             /* 默认隐藏，聚焦时由 JS 加 .open 显示 */
    flex-direction: column;
    padding: 6px;
    background: #1b1b1b;
    border: 1px solid #33312e;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    z-index: 70;
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.recent-searches.open { display: flex; }
.recent-searches .rs-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px 4px;
    font-size: 12px;
}
/* 下拉行：图标 + 词条 + 删除 */
.rs-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 14px;
    color: #e5e7eb;
    cursor: pointer;
}
.rs-item:active { background: #242321; }
.rs-item-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: #8a867f;
}
.rs-item-icon svg { width: 100%; height: 100%; display: block; }
.rs-item-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rs-item-del {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    padding: 4px;
    margin-right: -4px;
    color: #8a867f;
    border-radius: 50%;
}
.rs-item-del svg { width: 100%; height: 100%; display: block; }
.rs-item-del:active { color: #ff6b6b; }
.search-pill:focus-within {
    border-color: rgba(255, 156, 72, 0.55);
}
.sp-icon {
    width: 18px;
    height: 18px;
    color: var(--muted);
    flex-shrink: 0;
}
.search-pill input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    /* ★ 搜索框文字 15→16 */
    font-size: 16px;
}
.search-pill input::placeholder { color: var(--muted); }
/* 覆盖 styles.css 的全局 input:focus 青色边框/光晕（rgba(0,204,255) 就是
   用户看到的「绿框」，青色偏绿）。搜索胶囊本身已有橙色聚焦边框，input 无需
   再有任何边框/阴影。 */
.search-pill input:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.sp-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--muted);
    border-radius: 50%;
    flex-shrink: 0;
}
.sp-clear:hover { color: var(--text-color); }
.sp-go {
    flex-shrink: 0;
    height: 30px;
    padding: 0 15px;
    border-radius: 999px;
    background: var(--accent);
    color: #121212;
    /* ★ 搜索按钮 13→14 且加粗到 700 */
    font-size: 14px;
    font-weight: 700;
}
.sp-go:hover { background: var(--accent-hover); }
.ah-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--muted);
    border: 1px solid var(--line);
    background: transparent;
}
.ah-icon:hover { color: var(--text-color); border-color: #4a4640; }

/* 频道 tab（一级分类，大师兄式文字 tab） */
.channel-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    margin-top: 8px;
    position: relative;
}
.channel-tabs::-webkit-scrollbar { display: none; }
.ct-tab {
    flex-shrink: 0;
    position: relative;
    padding: 9px 13px 12px;
    /* ★ 顶部频道 tab：字号 15→17、全量加粗到 700（本站中文只有 400/700 两档，
       设 500/600 会被映射回 400，看着没变化）。选中态不再靠字重区分，
       改由「纯白文字 + 橙色跟手光标」表达，未选中用偏亮灰保证加粗后不糊。 */
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #b8b4ad;
    white-space: nowrap;
    /* ⚠️ 只过渡颜色：font-weight 过渡会触发文字重排（每帧量一遍宽度），
       何况现在所有 tab 都是 700，本来也没有字重变化。 */
    transition: color 0.18s ease;
}
.ct-tab:hover { color: var(--text-color); }
.ct-tab.ct-on,
.ct-tab.ct-near {
    color: var(--text-color);
    font-weight: 700;
}

/* ══════════ 跟手光标 ══════════
   单个绝对定位元素，位置由 hot.js 每帧写 --cursor-cx / --cursor-half，
   手指滑到一半光标就走到两 tab 之间；勾选态（.ct-on）不再画自己的下划线。 */
.channel-tabs.follow-on::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 0;
    width: calc(var(--cursor-half, 10px) * 2);
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    transform: translate3d(calc(var(--cursor-cx, 0px) - var(--cursor-half, 10px)), 0, 0);
    /* 拖动时跟手要「零延迟」，松手后由 JS 切换为平滑收尾 */
    transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.3, 1),
                width 0.26s cubic-bezier(0.22, 0.9, 0.3, 1);
    will-change: transform, width;
    pointer-events: none;
}
.channel-tabs.follow-on.dragging::after {
    transition: none;
}

/* ===== 底部导航 ===== */
.bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    display: flex;
    background: rgba(18, 18, 18, 0.96);
    /* 同 .app-header：毛玻璃挪到桌面媒体查询里 */
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
}
.bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 7px;
    color: var(--muted);
    font-size: 11.5px;
    transition: color 0.2s;
}
.bn-item svg {
    width: 22px;
    height: 22px;
}
.bn-item:active { transform: scale(0.94); }
.bn-item.on { color: var(--accent); }
.bn-item.on span { color: var(--text-color); font-weight: 600; }

/* ===== 横向翻页容器（scroll-snap ViewPager）===== */
/* 页序：推荐分区 + 高分/电视剧/电影/动漫/综艺/其他 六个分类页。
   每页 width:100% + scroll-snap-align:start，容器 mandatory 吸附，
   浏览器原生跟手翻书转场；页内 .page-scroll 独立纵向滚动。 */
.hot-pager {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.hot-pager::-webkit-scrollbar { display: none; }
.hot-pager .page {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    overflow: hidden;
}
.page-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    /* ★ 顶栏让位改到「滚动容器内边距」：滚动区从 y=0 起铺满整屏，
       首屏内容仍从顶栏下方开始；滚动后卡片会钻到顶栏底下，
       于是顶栏收起时底下一定是内容 —— 既没有黑带，也不用动布局。 */
    padding: var(--app-header-h, 96px) 12px 110px;
}
.page-home .page-scroll { padding-bottom: 96px; }

/* 推荐页分区（大师兄式多分区流） */
.hb-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 12px 8px;
    cursor: pointer;
}
.hb-head:active .hb-title { color: var(--accent); }
.hb-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 6px;
}
.hb-title::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--accent);
}
.hb-src {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: 0.02em;
}
.hb-grid { padding: 0 12px; }

/* ══════════ 首屏骨架屏 ══════════
   首页卡片要等 4 个分区各拉 2 页数据（全程走 /fwd 代理，通常 1~3 秒）才渲染，
   这段等待原本是一整片纯黑 —— 用户会以为"没加载出来"。
   骨架直接写在 index.html 里，HTML 解析到就能显示；数据到位时
   buildPages() 用 pager.innerHTML 整体替换，无需额外清理。
   尺寸刻意与真实卡片对齐（3 列 / gap 12px / 2:3 海报比例），
   这样替换瞬间不会出现跳动。 */
/* 骨架容器：塞在 #hotPager 里但【不能用 .page 类】——
   buildPagerDom() 的第一行是 `if (!pager || pager.children.length) return;`，
   预置元素会被误判成"分页已生成"而整个首页结构都不再构建（踩过）。
   所以独立类名 + 在 buildPagerDom 里先摘掉它。 */
.ltv-home-skel {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* fitPager() 要等 loadHot 才给 #hotPager 设高度，在此之前父高为 0；
       用 dvh 兜底，保证骨架从 HTML 解析出来那一刻就是满屏可见的。
       内部直接复用 .page-scroll，盒子模型与真实页面完全一致。 */
    min-height: calc(100dvh - var(--app-header-h, 96px));
}
.hb-skel-head { padding: 16px 12px 8px; }
.hb-skel-title {
    display: block;
    width: 92px;
    height: 15px;
    border-radius: 6px;
}
.hb-skel-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 0 12px;
}
@media (min-width: 640px) {
    .hb-skel-grid { grid-template-columns: repeat(4, 1fr); }
}
.hb-skel-card {
    aspect-ratio: 2 / 3;
    border-radius: 10px;
}
.hb-skel-title,
.hb-skel-card {
    position: relative;
    overflow: hidden;
    background: #1d1b19;
}
/* 微光扫过：让"正在加载"这件事可见，而不是几块像坏掉的死灰 */
.hb-skel-title::after,
.hb-skel-card::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(100deg,
                transparent 25%, rgba(255, 255, 255, 0.05) 50%, transparent 75%);
    animation: hbSkelSweep 1.4s ease-in-out infinite;
}
@keyframes hbSkelSweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .hb-skel-title::after,
    .hb-skel-card::after { animation: none; }
}

/* ══════════ 筛选行（分组标签，2026-10） ══════════
   视觉约定：一行里只有一个实心块 —— 选中项。
   · 未选中：纯文字，无底无框，只靠字色深浅区分
   · 选中：橙底胶囊（含默认选中的「全部」）
   这样视线不被一堆人造胶囊框切碎，横滑时也不会整片花花绿绿。 */
.hotSUBbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 2px 0 6px;
}
.hotSUBbar.hidden { display: none; }

.fl-row {
    display: flex;
    align-items: center;
    padding: 1px 0;
    min-height: 34px;
}

/* 容器：横向滚动 + 右端渐隐（暗示右边还有内容，用户自然往右滑） */
.fl-scroll {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* 右端渐隐只做很短的收边（12px）。
       原先 20px 的淡出会把最右那个标签的字压成半透明灰，
       看起来就像「那个字怎么暗一截」，与统一亮度的目标相冲。 */
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 12px), transparent 100%);
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 12px), transparent 100%);
}
.fl-scroll::-webkit-scrollbar { display: none; }

/* 统一亮度：所有未选中标签都用同一个暖白（--text-color #f6f3ed）。
   原先用 --muted(#aaa7a1) 做默认色、再给排序行单独提亮，导致同一屏里
   出现三种灰阶（#f6f3ed / #c9c5be / #aaa7a1），扫读时忽明忽暗很累眼。
   现在只保留两极：未选中 = 暖白，选中 = 橙底深字。 */
.fl-chip {
    flex: 0 0 auto;
    /* 纯文字默认态：透明底 + 透明边框，只为命中区域留出内边距 */
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: background-color 0.16s ease, color 0.16s ease,
                border-color 0.16s ease, opacity 0.16s ease;
    -webkit-tap-highlight-color: transparent;
}
.fl-chip:hover { color: #ffffff; }

/* 选中态：唯一的实心胶囊 */
.fl-chip.on {
    background: var(--accent);
    border-color: var(--accent);
    color: #121212;
    font-weight: 600;
}

/* 不做「命中/未命中」的视觉区分 —— 整个词表统一同样的亮度。
   原因：压暗态会在同一行里制造两种亮度，一屏几十个标签，
   看起来像随机灰白相间，很乱。命中率交给数据侧解决
   （换更全的源 / 走服务端筛选），UI 层不再表达这个信息。 */

/* 「排序」行是互斥单选，语义上比筛选项更重：只加字重，不再改颜色 */
.fl-row[data-row="sort"] .fl-chip {
    font-size: 13.5px;
    font-weight: 500;
    padding: 6px 12px;
}
.fl-row[data-row="sort"] .fl-chip.on { font-weight: 700; }
/* 排序行视觉上与筛选行拉开：底部留白多一点 */
.fl-row[data-row="sort"] {
    min-height: 38px;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(51, 49, 46, 0.55);
}

/* =========================================================
   我的页（mineArea）：收藏 + 观看记录
   ========================================================= */
.mine-scroll {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* ★ 同 .page-scroll：容器从 y=0 铺满，顶部让位交给 padding */
    padding: var(--app-header-h, 96px) 16px 84px;
}
.mine-section { margin-bottom: 24px; }
.mine-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin-bottom: 8px;
}
.mine-head-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color);
}
.mine-head-count {
    font-size: 12px;
    color: var(--muted);
}
.mine-head-clear {
    margin-left: auto;
    font-size: 12px;
    color: var(--muted);
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
}
.mine-head-clear:active { color: #ff6b6b; border-color: #ff6b6b; }

.mine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 10px;
}
.mine-card {
    cursor: pointer;
    min-width: 0;
}
.mine-card:active { opacity: 0.8; }
.mine-poster {
    position: relative;
    aspect-ratio: 2 / 3;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
}
.mine-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mine-card-title {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-color);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mine-card-sub {
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}
.mine-empty {
    padding: 28px 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

/* =========================================================
   ★ 顶栏 / 底栏：滚动自动隐藏（X/Twitter 风格）
   配合 js/scroll-bars.js：滚动中给两栏加 .bars-hidden，
   停止滚动 debounce 后移除。只过渡 transform/opacity，不动 layout 属性。
   ========================================================= */
.app-header,
.bottom-nav {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
/* 隐藏态：顶栏向上滑出可视区，底栏向下滑出可视区 */
.app-header.bars-hidden {
    /* ★ 位移多退 2px：sticky 顶栏 + 子元素（搜索行/hotCats）撑高，
       纯 -100% 在亚像素下底部边缘可能残留 1~2px；多退 2px 保证整栏完全移出视口。 */
    transform: translateY(calc(-100% - 2px));
    /* ★ 隐藏态强制全透明：收起后零黑残留。
       原 0.62 渐变 + backdrop-filter 在收起动画结束后仍会在顶部留一条暗色
       （backdrop-filter 的模糊层/渐变尾），卡片顶部像被黑条截断。
       隐藏时直接把背景与毛玻璃层关掉 → 顶栏滑走后顶部彻底通透。 */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.bottom-nav.bars-hidden  { transform: translateY(100%); }
/* 播放视图两栏本就 display:none（见 nav.css），此处隐藏态不影响 */