/* =========================================================================
   mobile.css —— 移动端统一覆盖层
   -------------------------------------------------------------------------
   为什么单独一个文件：
   style.css（index.html 用）与 css/styles.css（tojav.html 用）是两份高度重复的
   92KB / 125KB 单体样式，历史上已经出现过漂移（同一断点下 .modal-close 一个是
   44px、一个是 34px）。移动端改动若分别写进两份文件，必然再次漂移。
   因此把「移动端增量」集中在本文件，由两个页面在各自的主样式 *之后* 引入，
   同特异性下后者覆盖前者 —— 桌面（> 各断点）完全不受影响。

   统一断点（单一来源，两个页面与 JS 共用同一套语义）：
     1024 —— 平板横屏 / 小笔电（hero、Hero 轮播、搜索框收起）
      768 —— 主断点：手机横竖屏分界，绝大部分移动端改造在此
      480 —— 超窄屏（≤414 的 iPhone SE / 老安卓）
   ========================================================================= */

/* ============ A. 全局兜底（与视口无关，所有设备生效） ============ */

/* A1 禁止 iOS 横屏时自动放大字号导致的布局错乱（配合下面 16px 输入框） */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* A2 兜住任何意外的横向溢出。
   注意用 overflow-x: clip 而不是 hidden —— hidden 会让元素成为滚动容器，
   从而破坏内部 position: sticky（弹窗头部是 sticky 的）；不支持 clip 的
   老浏览器回退到 hidden，只是少一点点 sticky 能力，不会错版。 */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

@supports (overflow: clip) {

    html,
    body {
        overflow-x: clip;
    }
}

/* A3 去掉移动端常见的 300ms 点击延迟 / 双击缩放歧义 */
a,
button,
input,
select,
textarea,
label,
[role="button"] {
    touch-action: manipulation;
}

/* A4 键盘可达性（移动端外接键盘 / 无障碍） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* A5 所有自带滚动的抽屉 / 弹层禁止滚动链穿透（滚到顶带着 body 一起动） */
.sidebar-nav,
.mobile-nav,
.admin-container,
.search-popup-panel,
.modal-thumb-strip,
.table-container {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}


/* ============ B. 输入框统一 16px —— 消除 iOS 聚焦自动缩放 ============ */
/* iOS Safari 对 font-size < 16px 的表单控件会在聚焦瞬间整页放大且不自动还原。
   这里按「窄屏 + 触屏」两个条件命中所有出现过的输入框。 */
@media (max-width: 1024px),
(hover: none) and (pointer: coarse) {

    input:not([type="button"]):not([type="submit"]):not([type="reset"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* 页码跳转框和管理面板的「新增用户」原为 0.9rem（≈14.4px），是主要踩坑点 */
    .page-input,
    .admin-add-form input,
    .header-search-input,
    .search-input,
    .search-form-popup input,
    .login-form-group input {
        font-size: 16px;
    }
}


/* ============ C. ≤1024px：平板 / 小屏笔电 ============ */
@media (max-width: 1024px) {
    .hero {
        height: 55vh;
        height: 55dvh;
    }
}


/* ============ D. ≤768px：主移动端断点 ============ */
@media (max-width: 768px) {

    /* ---------- D1 视口高度塌陷：vh → dvh ----------
       移动浏览器的地址栏会伸缩，100vh 按「地址栏收起」的大视口计算，
       于是抽屉底部的登录/登出按钮会被浏览器工具栏压住。
       先写 vh 再写 dvh：不支持 dvh 的浏览器自动回退到第一行。 */
    body {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .sidebar-nav {
        height: 100vh;
        height: 100dvh;
    }

    .mobile-nav {
        height: 100vh;
        height: 100dvh;
    }

    .search-popup-panel,
    .admin-container,
    .hero-picker-dialog {
        max-height: 85vh;
        max-height: 85dvh;
    }

    .modal-content {
        max-height: 65vh;
        max-height: 65dvh;
    }

    .modal-stack {
        height: 70vh;
        height: 70dvh;
    }

    .hero {
        height: 45vh;
        height: 45dvh;
        min-height: 280px;
    }

    /* 表格卡片化后不再需要撑高的占位高度 */
    .table-container {
        min-height: 0;
    }


    /* ---------- D2 表格视图 → 卡片堆叠 ----------
       桌面是 8 列 table-layout: fixed；390px 下每列只有约 48px，
       表头还有 white-space: nowrap，内容互相重叠无法阅读。
       这里在移动端把行拆成「一张卡片一行字段」的两列式布局，
       字段标题用 ::before 生成（各 td 有稳定的 .td-* 类名，无需改模板）。 */
    .table-container {
        padding: 0 8px;
        overflow-x: visible;
        /* contain: layout style 会约束内部布局，卡片化后不再需要 */
        contain: none;
    }

    .data-table {
        display: block;
        width: 100%;
        background: transparent;
        border-radius: 0;
        overflow: visible;
    }

    .data-table thead {
        display: none;
    }

    .data-table tbody {
        display: block;
    }

    .data-table tbody tr {
        display: block;
        margin: 0 0 10px;
        padding: 10px 12px;
        background: rgba(30, 30, 50, 0.6);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
    }

    .data-table tbody tr:hover {
        background: rgba(102, 126, 234, 0.1);
    }

    /* 列出 1~8 是为了压过原有 .data-table td:nth-child(n) 的百分比宽度
       （同特异性，靠本文件加载在后来胜出） */
    .data-table td:nth-child(1),
    .data-table td:nth-child(2),
    .data-table td:nth-child(3),
    .data-table td:nth-child(4),
    .data-table td:nth-child(5),
    .data-table td:nth-child(6),
    .data-table td:nth-child(7),
    .data-table td:nth-child(8) {
        display: flex;
        align-items: center;
        gap: 10px;
        box-sizing: border-box;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 7px 0;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    .data-table tbody tr td:last-child {
        border-bottom: 0;
    }

    /* 空字段（没有来源 / 没有种子名）直接不占位 */
    .data-table td:empty {
        display: none;
    }

    .data-table td::before {
        flex: 0 0 60px;
        color: #a5b4fc;
        font-size: 0.75rem;
        font-weight: 600;
        letter-spacing: 0.04em;
    }

    .td-source::before {
        content: '来源';
    }

    .td-title::before {
        content: '名称';
    }

    .td-format::before {
        content: '格式';
    }

    .td-size::before {
        content: '大小';
    }

    .td-coded::before {
        content: '类型';
    }

    .td-seed::before {
        content: '种子';
    }

    .td-time::before {
        content: '时间';
    }

    .td-magnet::before {
        content: '链接';
    }

    /* 标题允许换行而不是截断；登录锁定占位同理 */
    .data-table .title-link,
    .data-table .table-data-locked {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: anywhere;
        white-space: normal;
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* 表格来源徽章 / 磁力按钮的移动端尺寸已并入 tags.css（统一标签组件） */


    /* ---------- D3 触控目标：统一补到 ≥44px ----------
       style.css 的 768 块已经处理了一批（分页、抽屉项、右侧悬浮面板），
       这里补齐剩下几处遗漏、以及被 styles.css 在窄屏反向缩小的地方。 */

    /* 图片弹窗关闭按钮：styles.css 在 768 断点把它缩到 34px，这里拉回 44px，
       与另一份 style.css 的取值保持一致 */
    .modal-close {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        top: calc(12px + env(safe-area-inset-top, 0px));
        right: calc(12px + env(safe-area-inset-right, 0px));
    }

    .modal-thumb-item {
        width: 48px;
        height: 36px;
    }

    /* 瀑布流：容器改单列后按钮仍是桌面尺寸（磁力按钮已并入 tags.css） */
    .wf-source-link {
        min-height: 44px;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 16px;
        font-size: 0.82rem;
    }

    /* tojav 头部：放大镜按钮原 30×30，≤768px 时它是展开搜索的唯一入口 */
    .header-actions .search-box button,
    .header-actions .header-search-btn {
        width: 44px;
        height: 44px;
        box-sizing: border-box;
    }

    /* 放大镜按钮：去掉 styles.css 给的圆形底（rgba(102,126,234,.25) + 同色边框）。
       ≤768px 下它只是进入全屏搜索层的入口，不需要靠一圈底色表明“可点”，
       44×44 的触控面积仍在（上面那条规则），去掉后头部更干净。 */
    .header-actions .search-box button {
        background: transparent;
        border-color: transparent;
    }

    /* 图标从 14×14 放大到 22×22，与 ☰ 菜单按钮里三条横杠的 svg 尺寸一致
       —— 两个按钮在 header 里并排，图标一大一小会很扎眼。 */
    .header-actions .search-box button svg {
        width: 22px;
        height: 22px;
    }

    /* 悬停同样对齐 ☰：菜单按钮的 hover 只是「变白 + 底色微亮」，没有紫色高亮、
       没有发光、图标也不转（styles.css 里给放大镜的是紫底 + box-shadow +
       rotate(-15deg) scale(1.1)，两个按钮并排时反馈形式完全不一样）。
       放大镜已经没有底色了，所以这里只把图标提亮，保持无底、无位移。 */
    .header-actions .search-box button:hover {
        background: transparent;
        border-color: transparent;
        color: #fff;
        box-shadow: none;
    }

    .header-actions .search-box button:hover svg,
    .header-actions .search-box button:active svg {
        transform: none;
    }

    /* ☰ 菜单按钮、回到顶部 */
    .mobile-menu-btn,
    .back-to-top {
        min-width: 44px;
        min-height: 44px;
        box-sizing: border-box;
    }

    /* ☰ 只要图标，不要「菜单」二字：按钮上已有 aria-label="打开菜单"，文字是
       冗余的，而且它和放大镜并排时会把 header 挤得更满。
       styles.css 只在 ≤480 隐藏这个 label，481~768 这段仍会露出来，所以这里在
       ≤768 统一去掉；padding/gap 一并收到只剩图标的尺寸（沿用 ≤480 的取值），
       否则空掉的文字位会留一圈多余留白。 */
    .mobile-menu-label {
        display: none;
    }

    .mobile-menu-btn {
        padding: 8px 10px;
        gap: 0;
    }

    /* ---------- 回到顶部：缩小 + 贴底 ----------
       原来 54×54、bottom: 200px：尺寸比触控下限大 23%，位置更麻烦——200px
       相当于 390×844 屏高的 24%，按钮跑到内容区中部，实测 elementFromPoint
       命中 H3.item-name，压住的是条目标题。
       移动端单手操作时拇指的自然范围是屏幕下半部靠边，所以改成右下角贴底；
       贴底后压的是内容底部边缘，不再挡正经内容。
       44×44 是触控下限，不能再小，所以「变小」主要靠去掉那行 10px 的 TOP
       小字（低于可读字号，且逼着按钮必须更高）和贴底来实现。 */
    .back-to-top {
        width: 44px;
        height: 44px;
        right: 16px;
        /* 安全区：避开 iPhone 底部横条。距底按需求翻倍到 32px */
        bottom: calc(32px + env(safe-area-inset-bottom, 0px));
        border-radius: 12px;
    }

    .back-to-top .back-to-top-label {
        display: none;
    }

    .back-to-top svg {
        width: 20px;
        height: 20px;
    }

    /* 评分星：原约 18px，点星极易点偏 */
    .rating-star {
        min-width: 34px;
        min-height: 34px;
        padding: 6px 4px;
        font-size: 0.95rem;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 视图切换（卡片 / 表格 / 瀑布流） */
    .view-btn {
        min-height: 44px;
        padding: 8px 16px;
        box-sizing: border-box;
    }


    /* ---------- D4 弹层宽度：不允许超出视口 ---------- */
    /* .search-form-popup 基础值是 min-width: 550px，min-width 优先级高于
       max-width，一旦脱离 .search-popup-panel 上下文就必然溢出 */
    .search-form-popup,
    .search-popup-panel .search-form-popup {
        min-width: 0;
        width: auto;
        max-width: 100%;
    }

    .search-popup-panel,
    .admin-container,
    .login-container,
    .modal-content,
    .hero-picker-dialog {
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
        box-sizing: border-box;
    }


    /* ---------- D5 安全区（刘海 / 底部横条 / 横屏） ---------- */
    /* 原先只适配了抽屉底部与右侧悬浮面板顶部，这里补齐其余边界 */
    .header-container {
        padding-left: calc(14px + env(safe-area-inset-left, 0px));
        padding-right: calc(14px + env(safe-area-inset-right, 0px));
    }

    .right-sidebar-panel {
        top: calc(14px + env(safe-area-inset-top, 0px));
        right: calc(14px + env(safe-area-inset-right, 0px));
    }

    .sidebar-footer,
    .mobile-nav-footer {
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .grid-container,
    .waterfall-container,
    .table-container,
    .pagination {
        padding-left: max(12px, env(safe-area-inset-left, 0px));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
    }

    /* ---------- 卡片：竖排改横排（左封面 / 右上标题两行省略 / 右下标签组） ----------
       这就是精选区那套「新布局」，现在推广到**所有分类**，替代原先两列竖排的
       「卡片组」模式：网格单列、每张卡横排铺满宽度。DOM 各分区共用（_cards.html），
       不动结构、纯靠 grid 定位，所以这里去掉 .featured-section 前缀即可全覆盖。

       .video-section .grid-container 必须一起写：tojav 的分类区（精选与各分类）都在
       .video-section 内，而 styles.css 的 768 断点有同名规则
       `.video-section .grid-container{ repeat(2, minmax(0,1fr)) }`（特异性 0,2,0），
       只写无前缀的 .grid-container（0,1,0）压不过它，tojav 侧会仍是两列竖排。
       两条同特异性、mobile.css 后加载，所以这里能覆盖。 */
    .grid-container,
    .video-section .grid-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        max-width: 100%;
    }

    .media-card {
        display: grid;
        /* 两列：左封面 / 右内容。徽章不在移动端显示（见下），所以不再给它留一列，
           右侧 1fr 全给标题与标签组（评分控件由 rating.js 注入 .ntags 内部，跟着走）。 */
        grid-template-columns: 118px minmax(0, 1fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 6px;
        padding: 8px;
        align-items: start;
    }

    .media-card .image-container {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 118px;
        /* 封面高度跟随卡片内容高度：卡片用了 align-items: start，封面默认不拉伸，
           只按 aspect-ratio 3/2 得到 78.7px 固定高。标题双行时右侧内容（约 86px）
           高于封面，就会把标签挤出封面下沿、卡片被撑高、封面下方还空一块
           （实测双行卡高 102px、标签超出封面底 7.3px，单行时是 -2.9px 正常）。
           stretch 后封面与右侧内容等高，图片仍 object-fit: cover 裁切填充。
           min-height 让标题单行、内容偏矮时封面不至于压得太扁。 */
        align-self: stretch;
        height: auto;
        aspect-ratio: 3 / 2;
        min-height: 78px;
        border-radius: 8px;
    }

    /* 影片名称：右上，背景去除（桌面 .card-header 带 0.05 白底 + 1px 下边框，
       横排后这条横杠把每张卡顶得发闷）。 */
    .media-card .card-header {
        grid-column: 2;
        grid-row: 1;
        padding: 0;
        background: transparent;
        border-bottom: none;
    }

    /* 最多两行、超出省略：桌面是单行截断（-webkit-line-clamp: 1），横排右侧约 250px
       放得下两行，单行会把长番号整条切掉、读不出片名。.item-name 本身已是
       -webkit-box + vertical，这里只放行数。 */
    .media-card .item-name {
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .media-card .ntags {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        min-height: 0;
    }

    /* 来源徽章不在移动端显示：它默认 absolute 浮在封面左上角，小封面上被它盖住、
       与新布局冲突；DOM 保留，桌面端照常显示（本轮优化只针对移动端）。 */
    .media-card .ntag--source {
        display: none;
    }

    .footer {
        padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    }

    .update-toast {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }


    /* ---------- D6 hover 依赖的兜底 ----------
       触屏没有hover，原先「hover 才显示」的交互统一改成常显 / 可点 */
    .tojav-page .card-actions,
    .tojav-page .video-actions,
    .tojav-page .overlay-actions {
        opacity: 1;
        transform: none;
    }


    /* ---------- D7 toJAV 头部：☰ 菜单 | logo | 搜索 同一水平线 ----------
       原来三者分两行：logo 占一行，.header-actions（菜单 + 搜索）因为 width: 100%
       被挤到第二行、再靠 space-between 撑到两端。
       现在模板里已把 ☰ 按钮提到 .logo 之前，三者同为 .header-container 的直接
       子元素，这里只需：不换行 + logo 吃掉剩余空间并居中，搜索自然留在右侧。 */
    .header-container {
        flex-wrap: nowrap;
        gap: 10px;
        align-items: center;
    }

    .logo {
        flex: 1 1 auto;
        min-width: 0;      /* flex item 默认 min-width: auto，搜索展开时会被顶出视口 */
        text-align: center;
    }

    .logo a {
        display: inline-flex;
        align-items: center;
        line-height: 1.2;
        /* logo 现在是「双击回顶部」的手势目标（已不带 href）：关掉文本选中与
           长按菜单，免得双击被识别成选中文字、长按弹出「拷贝链接」。 */
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
        cursor: pointer;
    }

    /* 覆盖 ≤768 断点里的 width: 100% —— 它正是把操作区挤到第二行的原因 */
    .header-actions {
        width: auto;
        justify-content: flex-end;
    }

    /* 展开搜索框时不再需要把 search-wrapper 推到最右（logo 的 flex 已吃掉剩余空间） */
    .header-search-wrapper {
        margin-left: 0;
    }

    /* 登录入口在移动端统一放在 ☰ 抽屉底部，header 里的用户区隐藏后不再占 gap */
    .header-user {
        display: none;
    }

    /* ---------- D9 彻底废掉 header 里「输入框行内展开」这条旧路径 ----------
       ≤768px 搜索改走全屏层后，这里的展开已经没有用途，但原样留着会露馅：
       点（甚至只是按住）放大镜会让按钮拿到焦点，styles.css 的
       .search-box:focus-within input { width: 110px } 随即命中，配上
       transition: width .35s，输入框又自己撑开了。
       所以必须连 :focus-within 一起按住，而不只是忽略 .open。 */
    .header-actions .search-box input,
    .header-actions .search-box.open input,
    .header-actions .search-box:focus-within input {
        width: 0;
        padding: 0;
        opacity: 0;
        pointer-events: none;
        transition: none;
    }

    /* 容器本身也要收干净：input 已经被压成 0 宽，只清边框不清底色的话，
       会剩一个 52×56 的半透明白圆角矩形空壳（比 44px 的按钮宽 8px，
       正好是残留的 padding-right），看起来就是一块凭空的背景。
       放大镜按钮自带 rgba(102,126,234,.25) 的圆形底，去掉容器底色后
       依然是清晰的 44×44 触控目标。 */
    .header-actions .search-box,
    .header-actions .search-box.open,
    .header-actions .search-box:focus-within {
        padding-left: 0;
        padding-right: 0;
        gap: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }
}


/* ============ D8. toJAV 移动端全屏搜索层（App 式「新窗口」搜索） ============ */
/* ≤768px 点击放大镜后进入：全屏固定层 + 自动唤起软键盘 + History API 造页面栈，
   使返回键/手势返回只关闭搜索而不退出站点（对应 openMobileSearch / popstate）。
   打开/关闭由 hidden 属性直接切换，不做任何进出场动画。 */
.mobile-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: none;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: #0d0d1a;
    padding-top: env(safe-area-inset-top, 0px);
}

.mobile-search-overlay:not([hidden]) {
    display: flex;
}

/* 收起：反向播放同一套圆形揭示，播完由 JS 真正 hidden */

.mobile-search-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mobile-search-back {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    box-sizing: border-box;
}

.mobile-search-back svg {
    width: 22px;
    height: 22px;
}

.mobile-search-back:active {
    background: rgba(255, 255, 255, 0.08);
}

.mobile-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    /* ≥16px 才能避免 iOS 聚焦时整页放大 */
    font-size: 16px;
    /* 去掉 type=search 在 WebKit 下的原生清除按钮，改用自定义的 clear */
    -webkit-appearance: none;
    appearance: none;
}

.mobile-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.mobile-search-input:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.12);
}

.mobile-search-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px));
}

/* ---------- 搜索结果：两列卡片组 ----------
   桌面（header 下拉）是「左小图 + 右文字」的横条列表，那套基础样式在 styles.css
   里，保持不动。移动端全屏层内改成两列卡片：封面在上、标题在下。
   容器层 .search-result-grid 由 tojav.js **只在写入全屏层时**包一层，
   所以下面这些规则也只影响移动端，桌面下拉不受牵连。 */
.mobile-search-results .search-result-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.mobile-search-results .search-result-item {
    display: flex;
    flex-direction: column;
    /* 基础样式 .search-result-item 是桌面横条，带 align-items: center（小图与
       文字垂直居中）。这里改成 column 后若不重置，它管的就是水平方向了：
       子项不再撑满卡片宽度，而是按内容收缩并居中 —— 实测短标题卡片的
       .search-result-info 只有 86px 而不是 176px，标题和标签挤在中间，
       meta 里两个标签还会在窄容器里折行，看着就是「标签显示不完全」。
       拉回 stretch 让内容区占满卡片，标签就能正常排在一行。 */
    align-items: stretch;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
}

/* 基础样式里末项会去掉下边框，卡片模式下要保留一圈完整边框 */
.mobile-search-results .search-result-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mobile-search-results .search-result-item:active {
    background: rgba(102, 126, 234, 0.16);
}

.mobile-search-results .search-result-img {
    /* 固定缩略图尺寸 150×100（横排卡片的封面统一大小，不再随卡片宽度拉伸）。
       img 仍是 100%/100% + object-fit: cover，所以不论原图比例都能铺满不畸变。 */
    width: 150px;
    height: 100px;
    flex-shrink: 0;
    /* 列布局里固定宽比卡片内容区窄，居中避免靠左留白 */
    align-self: center;
    border-radius: 0;
    overflow: hidden;
    background: #1a1a2e;
}

.mobile-search-results .search-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-search-results .search-result-info {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 10px 10px;
}

/* 基础样式里标题是单行省略；卡片里给两行再截断，长番号才不会挤成一团 */
.mobile-search-results .search-result-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 6px;
    overflow-wrap: anywhere;
}

.mobile-search-results .search-result-meta {
    gap: 4px;
}


/* 「搜索中…」不是一条结果，不该套卡片外框。
   上面的卡片规则是按 .search-result-item 命中的，loading 项也会被套上
   底色 + 1px 描边 + 圆角，看着像一张空卡片；padding 还被压成 0（卡片的留白
   在内部 .search-result-info 上），spinner 和文字挤在一起。
   这里还原成纯粹的一行提示：无底无框、恢复原本的 20px 内边距和横排居中，
   并让它横跨整行 —— 它是整层的状态提示，不该只占网格半格。 */
.mobile-search-results .search-result-item.search-loading {
    grid-column: 1 / -1;
    background: transparent;
    border: none;
    border-radius: 0;
    flex-direction: row;
    align-content: center;
    padding: 20px;
}

/* ---------- 进出场动画：已全部移除 ----------
   先后试过三版，都没有保留：
     1) View Transitions —— 要为整页截快照，首帧停顿 133ms、平均 37fps；
     2) 从放大镜做圆形 clip-path 扩散 —— 全屏尺寸下观感偏"撑开"；
     3) 整层淡入 + 轻微上移 —— 观感仍然不自然。
   现在直接由 hidden 属性开关，不做任何补间，进出都是瞬时完成。 */

/* 层铺满之后，底下几十张卡片的骨架屏微光还在逐帧合成纯属浪费，
   而它们被这层不透明背景完全挡住，暂停没有任何可见影响。 */
html.mobile-search-open .image-container::before {
    animation-play-state: paused;
}

/* ---------- 跨端：搜索结果封面加载失败的占位 ----------
   utils.js 的 onSearchThumbError 会隐藏破图、插入 .search-no-img，
   这里让占位撑满 .search-result-img —— 否则它只是一行小字飘在左上角：
   桌面下拉里是小方块，移动端卡片里是 16:10 的大图区域。
   之所以放在本文件而不是 style.css / styles.css：那两份主样式高度重复，
   同一条规则写两遍正是要避免的漂移来源，而这个文件两页都会加载。 */
.search-result-img.is-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a2e;
}

.search-result-img.is-placeholder .search-no-img {
    /* 桌面下拉里 .search-result-img 只有 60px 宽，字号要压到能一行放下；
       移动端卡片是 176px 大图，下面再放大回合适尺寸。 */
    font-size: 0.65rem;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 0 3px;
}

.mobile-search-results .search-result-img.is-placeholder .search-no-img {
    font-size: 0.72rem;
}

/* ---------- 默认面板：搜索历史 + 热门搜索 ---------- */
.search-home-section {
    margin-bottom: 20px;
}

.search-home-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 6px 2px 10px;
}

.search-home-title {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
}

.search-home-clear {
    min-height: 32px;
    padding: 6px 10px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: rgba(255, 255, 255, 0.35);
    font-size: 0.75rem;
    cursor: pointer;
}

.search-home-clear:active {
    background: rgba(255, 255, 255, 0.08);
}

.search-home-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 38px 是标签、44px 是按钮的取舍：再高会让默认面板一屏放不下几个词 */
.search-tag {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 38px;
    max-width: 100%;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.82rem;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.search-tag:active {
    background: rgba(102, 126, 234, 0.18);
    border-color: rgba(102, 126, 234, 0.35);
}

.search-home-empty {
    padding: 8px 2px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}


/* ============ E. ≤480px：超窄屏 ============ */
@media (max-width: 480px) {
    .data-table td::before {
        flex: 0 0 52px;
    }

    .data-table tbody tr {
        padding: 8px 10px;
    }

    /* 页码更多时缩小一点，避免换行过猛（桌面 36px / 移动端 44px 的折中） */
    .page-link {
        min-width: 40px;
        padding: 0 10px;
    }

    .hero {
        min-height: 240px;
    }
}


/* ============ F. 锁定滚动时的 body  positioning（配合 JS ScrollLock） ============ */
/* position: fixed 是 iOS Safari 上唯一可靠的禁滚方式（overflow:hidden 拦不住
   惯性滚动）。这里统一把它要用的样式写死，避免 JS 里散落内联样式。 */
body.scroll-locked {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    /* 防止固定后因滚动条消失造成横向跳动 */
    padding-right: 0;
}