/* 后台有自定义样式颜色值等的修改，每个变量已经规定，否则不能再后台修改、只定义一次，无重复。此注释永久保留。 */

/* ============================================================
 * 搜索/工具栏/面包屑样式（从 style.css 迁移）
 * ============================================================ */

.res-toolbar {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 16px; padding: 0 0 12px; margin-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
/* 工具栏右侧：视图切换（分类筛选由全站左栏承担） */
.res-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}
.view-switch { display: flex; gap: 4px; }
.view-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background: var(--color-bg-page-soft);
    color: var(--color-text-dim);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.view-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.view-btn.active { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
/* 深色模式：金色底元素统一深色字体（兜底规则，与 member.css / right.css 一致） */
[data-theme="dark"] .view-btn.active,
[data-theme="dark"] .game-tab.active,
[data-theme="dark"] .grid-card-cat { color: var(--color-accent-ink); }
/* 仅列表分类：禁用网格按钮（is-disabled 由 main.js initViewToggle 注入）；
   变灰 + 禁用指针，hover 不抬色，明确传达「该分类不可用网格」 */
.view-btn.is-disabled { opacity:.45; cursor:not-allowed; color:var(--color-text-dim); background:var(--color-bg-page-soft); border-color:var(--color-border); }
.view-btn.is-disabled:hover { border-color:var(--color-border); color:var(--color-text-dim); }
/* documents 页网格容器：默认 grid 布局（视图切换控制显隐） */
/* 列数由 responsive.css 按统一断点给出（子页 4→3→3→2→1），不再用 auto-fill 跳列 */
/* align-items:start（2026-10-01）：**禁止同一行卡片互相拉高**。
   搜索结果页是横版游戏（封面 460/215）与竖版影视（封面 2/3）混排，默认的
   stretch 会把整行按最高的竖版卡撑开，横版游戏卡被拉得很高、内容区留白过多。
   改 start 后每张卡按自身内容高度排布：横版矮卡、竖版高卡，行底会有高矮差。 */
.res-grid { display:grid; gap:16px; align-items:start; }
/* 视图切换显隐（与 document.js / 模板首屏的 doc-view-* 防闪烁类配合）：
   · doc-view-list：显示列表、隐藏网格
   · doc-view-grid：显示网格（.res-grid 基础 display:grid）、隐藏列表 */
.doc-view-list .res-list { display:flex; }
.doc-view-list .res-grid { display:none; }
.doc-view-grid .res-list { display:none; }
.res-search-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 18px;
    margin-bottom: 16px;
    background: var(--color-accent-soft);
    border: 1px solid var(--color-accent);
    border-radius: 10px;
    font-size: 13px;
    color: var(--color-text-primary);
}
.res-search-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
}
.res-search-count strong {
    color: var(--color-text-title);
    font-weight: 700;
}
.res-search-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 640px;
}
/* 输入框 + 放大镜按钮同处一个框内：用 .res-search-field 做相对定位容器，
   input 占满、右侧留 46px 给内嵌按钮；按钮绝对定位到右侧居中。 */
.res-search-field {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.res-search-input {
    width: 100%;
    height: 52px;
    padding: 0 46px 0 18px;
    font-size: 15px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}
.res-search-input::placeholder { color: var(--color-text-dim); }
.res-search-input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent-soft);
}
/* 内嵌放大镜提交按钮：绝对定位在输入框右侧，透明底 + 强调色图标，hover 显形强调底 */
.res-search-submit {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    color: var(--color-accent);
    background: transparent;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.res-search-submit:hover {
    color: var(--color-text-invert);
    background: var(--color-accent);
}
.res-search-submit svg { display: block; }