/* ============================================================================
   search.css —— 全站搜索（导航常驻胶囊 / 移动搜索条 / 建议卡 / 结果页）

   三套作用域：
     · `.nav-search`：桌面 ≥651 的导航胶囊，宿主是首页/个人页。
     · `.search-suggest` / `.search-mobile-bar`：body 级建议卡与移动搜索条。
     · `.search-page`：/search/ 结果页（只加载 tag.css + 本文件，没有 dialog.css）。

   🔴 结果页规则不得引用 `--dlg-*`（该页不加载 dialog.css，未定义会让整条声明静默失效）。
   🔴 输入框必须显式写 user-select/touch-action：首页有 `*{user-select:none}`、
      body 有 `touch-action:none`；个人页也有全局 user-select:none。
   🔴 注释里不得出现裸的「url 加左括号」—— collectstatic 的正则不剥注释。
   ============================================================================ */

:root {
    /* 颜色 */
    --search-brand: #98e0ac;
    --search-on-brand: #173a22;
    --search-ink: #1d2731;
    --search-text: #334455;
    --search-muted: #6a7c8d;
    --search-muted-strong: #5f6f68;
    --search-hairline: rgba(23, 58, 34, 0.08);
    --search-line: rgba(143, 179, 154, 0.24);
    --search-card: #ffffff;
    --search-page-bg: #f7f8f7;
    --search-input-bg: #fafafa;
    --search-input-border: #e0e0e0;
    --search-placeholder: #8a8f8c;
    --search-focus-ring: 0 0 0 3px rgba(152, 224, 172, 0.28);
    --search-focus-ring-neutral: 0 0 0 3px rgba(23, 58, 34, 0.12);
    --search-focus-ring-neutral-inverse: 0 0 0 3px rgba(255, 255, 255, 0.16);

    /* 尺寸 */
    --search-nav-w: 240px;
    --search-nav-w-profile: 240px;
    --search-nav-h: 39px; /* 与 ≥651 档 .nav-tabs 实测同高 */
    --search-bar-h: 50px;
    --search-panel-w: 420px;
    --search-pill-h: 32px;

    /* 移动端浮动胶囊：顶部留白 / 左右 gutter / 与建议卡的间距。
       全部由 safe-area 托底 —— 胶囊与建议卡共用同一套变量，几何不会漂移。 */
    --search-bar-top: calc(8px + env(safe-area-inset-top, 0px));
    --search-bar-gutter-x: 12px;
    --search-bar-gap: 8px;
    --search-bar-bottom-edge: calc(var(--search-bar-top) + var(--search-bar-h));
    --search-panel-top: calc(var(--search-bar-bottom-edge) + var(--search-bar-gap));

    /* 层级：高于导航 10 / 个人页 sticky 20，低于查看器 900 / 遮罩 1000 */
    --search-z-popover: 30;
    --search-z-bar: 32;

    /* 动效 */
    --search-dur: 0.18s;
    --search-ease: cubic-bezier(0.32, 0.72, 0, 1);
}

/* 项目被「hidden 撞 display」咬过多次：三套作用域各一条成组兜底。
   ⚠️ 面板/搜索条自身也设了 display:flex ⇒ 必须同时覆盖 `[hidden]` 本体，
      否则 JS 切 hidden 时它们仍然显示。 */
.nav-search [hidden],
.search-suggest[hidden],
.search-suggest [hidden],
.search-mobile-bar[hidden],
.search-mobile-bar [hidden],
.search-page [hidden] {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   桌面临航搜索胶囊（≥651）
   ---------------------------------------------------------------------------- */

.nav-search {
    position: relative;
    display: none; /* <651 隐藏；≥651 打开 */
    align-items: center;
    flex: 0 0 auto;
    width: var(--search-nav-w);
    height: var(--search-nav-h);
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.012);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    transition: background-color var(--search-dur) ease,
        box-shadow var(--search-dur) ease;
}

/* 首页：放在 .navbar-main 里 tabs 之后，吃掉剩余空档。 */
.navbar-main > .nav-search {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 280px;
}

/* 个人页：没有 tabs，放在动作组里，固定 240px。 */
.navbar-actions > .nav-search {
    width: var(--search-nav-w-profile);
    flex: 0 0 auto;
}

/* 无 backdrop-filter 的兜底：保持 0.72 白 + 纯白聚焦，深色字在暗头像区仍可读。
   近全透只放在下面的 @supports 里 —— 不能把 0.02 白写进基础规则。 */
.pf-page .navbar .nav-search {
    background: rgba(255, 255, 255, 0.72);
    box-shadow: inset 0 0 0 1px rgba(23, 58, 34, 0.06);
}

/* 聚焦：首页用激活 tab 的玻璃；个人页用白底 + 中性细边。都不用绿色。 */
.nav-search:focus-within {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.pf-page .navbar .nav-search:focus-within {
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(23, 58, 34, 0.14),
        0 0 0 3px rgba(23, 58, 34, 0.05);
}

/* 个人页支持 blur 时：轻磨砂 —— band 的渐变/头像仍透出，但搜索框明显是一块浅色磨砂。
   无 blur 的浏览器继续用上面的 0.72/纯白兜底。 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .pf-page .navbar .nav-search {
        background: rgba(255, 255, 255, 0.36);
        -webkit-backdrop-filter: blur(18px) saturate(1.12);
        backdrop-filter: blur(18px) saturate(1.12);
        box-shadow:
            inset 0 0 0 1px rgba(23, 58, 34, 0.10),
            inset 0 1px 0 rgba(255, 255, 255, 0.50);
    }

    .pf-page .navbar .nav-search:focus-within {
        background: rgba(255, 255, 255, 0.48);
        box-shadow:
            inset 0 0 0 1px rgba(23, 58, 34, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.55),
            0 0 0 3px rgba(23, 58, 34, 0.05);
    }
}

.nav-search-input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0 38px 0 14px; /* 右侧只留提交放大镜 */
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    font-size: 13px;
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    user-select: text;
    -webkit-user-select: text;
    touch-action: auto;
}

.nav-search-input::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

.pf-page .navbar .nav-search-input {
    color: var(--search-text);
}

.pf-page .navbar .nav-search-input::placeholder {
    /* 轻磨砂上 placeholder 不能再用浅灰；加深一档保住可读性。 */
    color: var(--search-muted-strong);
}

/* 右侧放大镜 = 提交按钮；有文字时变品牌绿实心圆。 */
.nav-search-submit {
    position: absolute;
    right: 3px;
    top: 50%;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    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;
    transition: background-color var(--search-dur) ease,
        color var(--search-dur) ease, transform var(--search-dur) ease;
}

.pf-page .navbar .nav-search-submit {
    color: var(--search-muted);
}

.nav-search-input:not(:placeholder-shown) ~ .nav-search-submit {
    background: var(--search-brand);
    color: var(--search-on-brand);
}

.nav-search-submit:active {
    transform: scale(0.94);
}

@media (hover: hover) {
    .nav-search-submit:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .nav-search-input:not(:placeholder-shown) ~ .nav-search-submit:hover {
        background: #44c67d;
    }

    .pf-page .navbar .nav-search-submit:hover {
        background: rgba(23, 58, 34, 0.06);
    }

    .pf-page .navbar .nav-search-input:not(:placeholder-shown) ~ .nav-search-submit:hover {
        background: #44c67d;
    }
}

/* 原生 search ✕：三处统一压制（用户要求只保留右侧提交放大镜）。
   🔴 绝不能把 ::-webkit-* 与 ::-moz-* 写进同一条选择器列表：Chromium 不认识
      ::-moz-*，会把整条规则判为无效，WebKit 的压制会一起失效（2026-10-23 实测：
      CSSOM 里该规则 0 条，首页/移动条/结果页三处原生 ✕ 全部复现）。 */
.nav-search-input::-webkit-search-cancel-button,
.nav-search-input::-webkit-search-decoration,
.search-mobile-input::-webkit-search-cancel-button,
.search-mobile-input::-webkit-search-decoration,
.search-page-input::-webkit-search-cancel-button,
.search-page-input::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Gecko 单独成条：不支持时只丢这一条，不影响上面的 WebKit 规则。 */
.nav-search-input::-moz-search-clear-button,
.search-mobile-input::-moz-search-clear-button,
.search-page-input::-moz-search-clear-button {
    display: none;
}

.search-trigger {
    /* 移动端才显示；桌面端由 search_nav.html 的胶囊替代 */
    display: inline-flex;
}

@media only screen and (min-width: 651px) {
    .nav-search {
        display: flex;
    }

    .search-trigger {
        display: none;
    }
}

@media only screen and (max-width: 650px) {
    .nav-search {
        display: none;
    }

    .search-trigger {
        display: inline-flex;
    }
}

/* ----------------------------------------------------------------------------
   移动搜索条（≤650，body 级）
   ---------------------------------------------------------------------------- */

.search-mobile-bar {
    position: fixed;
    top: var(--search-bar-top);
    left: calc(var(--search-bar-gutter-x) + env(safe-area-inset-left, 0px));
    right: calc(var(--search-bar-gutter-x) + env(safe-area-inset-right, 0px));
    z-index: var(--search-z-bar);
    height: var(--search-bar-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding: 0 12px;

    /* 浮动胶囊：支持 backdrop-filter 时走 PC 同族的近乎全透玻璃
       （照片几乎原样透出）；兜底背景保持接近原来 0.58 的可读性。 */
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(20, 24, 22, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 1px 2px rgba(0, 0, 0, 0.14),
        0 6px 18px rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* 只测 blur：这层不再依赖 brightness/saturate（它们会把照片压暗，
   用户要的是「像 PC 导航一样几乎全透」）。不支持 blur 时保留 0.60 兜底。 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .search-mobile-bar {
        background: rgba(255, 255, 255, 0.02);
    }
}

.pf-page .search-mobile-bar {
    /* 个人页是浅色上下文：近实心白兜底，保护深色文字。 */
    background: rgba(255, 255, 255, 0.96);
    border-color: rgba(23, 58, 34, 0.1);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 1px 2px rgba(23, 58, 34, 0.06),
        0 8px 24px rgba(23, 58, 34, 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* 放在基础个人页规则之后；同特异性，靠源序胜出。 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .pf-page .search-mobile-bar {
        background: rgba(255, 255, 255, 0.72);
        -webkit-backdrop-filter: blur(20px) saturate(1.15);
        backdrop-filter: blur(20px) saturate(1.15);
    }
}

.search-mobile-bar:not([hidden]) {
    animation: search-bar-in var(--search-dur) var(--search-ease);
}

/* 输入框自动聚焦 ⇒ 这是打开期间的常驻态，只做克制的边缘增亮。
   box-shadow 是整条覆盖，必须把基础三层完整抄一遍（否则浮起阴影静默消失）。 */
.search-mobile-bar:focus-within {
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 1px 2px rgba(0, 0, 0, 0.16),
        0 8px 20px rgba(0, 0, 0, 0.12);
}

.pf-page .search-mobile-bar:focus-within {
    border-color: rgba(23, 58, 34, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 1px 2px rgba(23, 58, 34, 0.08),
        0 10px 28px rgba(23, 58, 34, 0.1);
}

@keyframes search-bar-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.search-mobile-form {
    display: flex;
    align-items: center;
    gap: 10px; /* 提交键 / 输入框 / 取消键的间距，保证 44px 触控命中区不重叠 */
    width: 100%;
    min-width: 0;
    height: 100%;
    margin: 0;
}

.search-mobile-submit {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    transition: background-color var(--search-dur) ease,
        color var(--search-dur) ease, transform var(--search-dur) ease;
}

.pf-page .search-mobile-submit {
    color: var(--search-muted-strong);
}

.search-mobile-icon {
    width: 18px;
    height: 18px;
    /* 近全透玻璃上让白色放大镜在亮照片上仍有轮廓。 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.pf-page .search-mobile-icon {
    filter: none;
}

.search-mobile-form:has(.search-mobile-input:not(:placeholder-shown)) .search-mobile-submit {
    background: var(--search-brand);
    color: var(--search-on-brand);
}

.search-mobile-submit:active {
    transform: scale(0.94);
}

@media (hover: hover) {
    .search-mobile-submit:hover {
        background: rgba(255, 255, 255, 0.08);
    }

    .search-mobile-form:has(.search-mobile-input:not(:placeholder-shown)) .search-mobile-submit:hover {
        background: #44c67d;
    }

    .pf-page .search-mobile-submit:hover {
        background: rgba(23, 58, 34, 0.06);
    }

    .pf-page .search-mobile-form:has(.search-mobile-input:not(:placeholder-shown)) .search-mobile-submit:hover {
        background: #44c67d;
    }
}

.search-mobile-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    font-size: 16px;
    line-height: 1.2;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    user-select: text;
    -webkit-user-select: text;
    touch-action: auto;
}

.search-mobile-input::placeholder {
    color: rgba(255, 255, 255, 0.62);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-size: 14px;
}

.pf-page .search-mobile-input {
    color: var(--search-ink);
    text-shadow: none;
}

.pf-page .search-mobile-input::placeholder {
    color: var(--search-placeholder);
    text-shadow: none;
}

.search-mobile-cancel {
    position: relative;
}

.search-mobile-cancel::before {
    content: '';
    position: absolute;
    inset: -4px; /* 36 + 8 = 44px 命中区 */
}


.search-mobile-cancel {
    flex: 0 0 auto;
    min-width: 36px;
    height: 36px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.96);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.pf-page .search-mobile-cancel {
    color: var(--search-on-brand);
    text-shadow: none;
}

/* 移动搜索期间把原导航藏掉（保留占位、不抽走布局），避免玻璃后透出品牌/feed tab。 */
body.search-mobile-open .navbar {
    visibility: hidden;
}

/* ----------------------------------------------------------------------------
   建议卡（body 级 fixed；桌面挂在胶囊下，移动挂在搜索条下）
   ---------------------------------------------------------------------------- */

.search-suggest {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--search-z-popover);
    width: min(var(--search-panel-w), calc(100vw - 24px));
    max-height: min(60vh, 560px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    background: rgba(250, 251, 249, 0.82);
    -webkit-backdrop-filter: blur(24px) saturate(1.45);
    backdrop-filter: blur(24px) saturate(1.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06),
        0 2px 6px rgba(20, 40, 30, 0.06),
        0 24px 60px rgba(20, 40, 30, 0.16);
    transform-origin: top right;
}

/* 个人页桌面卡片在内容列内居中（JS 用 left 定位），入场从顶部中心缩放。 */
html.pf-page .search-suggest {
    transform-origin: top center;
}

/* 更透的建议卡只在 blur 可用时启用；不支持时保留 0.82 兜底，避免文字压在照片上。
   0.70 叠在近黑照片上时次要文字对比度约 2.4:1（主文字仍约 6.9:1），实看为准。 */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .search-suggest {
        background: rgba(250, 251, 249, 0.70);
    }
}

.search-suggest:not([hidden]) {
    animation: search-suggest-in var(--search-dur) var(--search-ease);
}

@keyframes search-suggest-in {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.search-suggest.is-mobile {
    left: calc(var(--search-bar-gutter-x) + env(safe-area-inset-left, 0px));
    right: calc(var(--search-bar-gutter-x) + env(safe-area-inset-right, 0px));
    width: auto;
    top: var(--search-panel-top);
    max-height: calc(100vh - var(--search-panel-top) - 16px - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - var(--search-panel-top) - 16px - env(safe-area-inset-bottom, 0px));
    border-radius: 16px;
    transform-origin: top center;
}

/* 结果页 page 模式：JS 写 left/width/top；这里只负责动画原点与最大高度。
   max-height 用 topbar 底边（JS 写入 --search-page-panel-top）+ 100dvh，
   软键盘 resizes-content 时自动收缩；比 .is-mobile 的移动条公式更具体。 */
.search-suggest.is-page {
    transform-origin: top center;
}

body.search-page .search-suggest.is-page {
    max-height: min(560px, calc(100vh - var(--search-page-panel-top, 80px) - 16px - env(safe-area-inset-bottom, 0px)));
    max-height: min(560px, calc(100dvh - var(--search-page-panel-top, 80px) - 16px - env(safe-area-inset-bottom, 0px)));
}

.search-suggest-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 10px 4px;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.search-suggest-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 36px;
    padding: 0 16px;
    border-top: 1px solid var(--search-hairline);
    color: var(--search-muted-strong);
    font-size: 11px;
    letter-spacing: 0.02em;
}

.search-suggest.is-mobile .search-suggest-foot {
    display: none;
}

/* ----------------------------------------------------------------------------
   建议卡/结果页共用：分组、预览、chip、状态
   ---------------------------------------------------------------------------- */

.search-section {
    margin: 0 0 12px;
}

.search-section:last-child {
    margin-bottom: 4px;
}

.search-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 6px 4px;
}

.search-section-title {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--search-muted-strong);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-section-count {
    margin-left: 5px;
    color: var(--search-muted-strong);
    font-size: 11px;
    font-weight: 400;
}

.search-section-link {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--search-muted-strong);
    font: inherit;
    font-size: 11px;
    text-decoration: none;
    cursor: pointer;
}

/* 用户预览 */
.search-preview-users {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.search-preview-user {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 4px 8px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.search-preview-avatar {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2ee;
}

.search-preview-user-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.search-preview-name {
    overflow: hidden;
    color: var(--search-ink);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-preview-handle {
    overflow: hidden;
    color: var(--search-muted-strong);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 作品预览：固定 5 列（每组最多 5 条） */
.search-preview-works {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 0 6px;
}

.search-preview-work {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 8px;
    background: #eef2ee;
}

.search-preview-work img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* chip（最近搜索 / 建议卡里的热门标签） */
.search-chips {
    list-style: none;
    margin: 0;
    padding: 0 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.search-chip-item {
    min-width: 0;
    max-width: 100%;
}

.search-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    min-height: var(--search-pill-h);
    padding: 0 10px;
    box-sizing: border-box;
    border: 1px solid rgba(23, 58, 34, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--search-ink);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.search-chip-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-chip-query {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.search-chip-remove {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0 -6px 0 4px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--search-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.search-chip-count {
    flex: 0 0 auto;
    margin-left: 6px;
    color: var(--search-muted-strong);
    font-size: 11px;
    font-weight: 400;
}

/* 状态/错误/零结果 */
.search-status {
    padding: 24px 8px;
    color: var(--search-muted-strong);
    font-size: 13px;
    line-height: 1.65;
    text-align: center;
}

.search-status-title {
    margin: 0 0 4px;
    color: var(--search-ink);
    font-size: 14px;
    font-weight: 600;
}

.search-status-hint {
    margin: 0;
    color: var(--search-muted-strong);
    font-size: 12px;
}

.search-status-retry {
    margin-top: 10px;
    padding: 0 16px;
    min-height: 34px;
    border: 1px solid rgba(23, 58, 34, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--search-ink);
    font-size: 12px;
    cursor: pointer;
}

/* 视觉隐藏、读屏可听（与 profile.css 的 .follow-list-sr 同款）。 */
.search-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.search-spinner-dot {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 2px solid rgba(106, 124, 141, 0.25);
    border-top-color: var(--search-muted);
    border-radius: 50%;
    animation: search-spin 0.7s linear infinite;
}

@keyframes search-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 加载态 spinner 放在提交按钮内部（清空 × 已移除）。 */
.search-submit-spinner {
    display: none;
    align-items: center;
    justify-content: center;
}

.nav-search-submit.is-loading > svg,
.search-mobile-submit.is-loading > svg {
    display: none;
}

.nav-search-submit.is-loading .search-submit-spinner,
.search-mobile-submit.is-loading .search-submit-spinner {
    display: inline-flex;
}

.search-submit-spinner .search-spinner-dot {
    border-color: rgba(23, 58, 34, 0.30);
    border-top-color: var(--search-on-brand);
}

/* ----------------------------------------------------------------------------
   结果页（/search/，无 dialog.css）
   ---------------------------------------------------------------------------- */

.search-page .tag-wrapper {
    background: var(--search-page-bg);
}

.search-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    box-sizing: border-box;
    height: calc(60px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) clamp(10px, 3vw, 16px) 0;
    display: flex;
    align-items: center;
    gap: 8px;
    /* 吸顶必须不透明；与 .search-page 的页面底色一致。 */
    background: var(--search-page-bg);
    border-bottom: 1px solid var(--search-hairline);
}

.search-topbar .search-form {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.search-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-left: -8px;
    border-radius: 50%;
    color: var(--search-muted-strong);
    text-decoration: none;
}

.search-brand {
    flex: 0 0 auto;
    margin: 0;
    color: var(--search-ink);
    font-size: 1.15em;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
}

.search-brand a {
    color: inherit;
    text-decoration: none;
}

.search-field {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.search-page-input {
    width: 100%;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 48px 0 18px;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 999px;
    background: var(--search-card);
    color: var(--search-ink);
    font-size: 16px;
    line-height: 1.2;
    outline: none;
    box-shadow: 0 1px 2px rgba(23, 58, 34, 0.06);
    -webkit-appearance: none;
    appearance: none;
    user-select: text;
    -webkit-user-select: text;
    touch-action: auto;
    transition: border-color var(--search-dur) ease, box-shadow var(--search-dur) ease;
}

.search-page-input::placeholder {
    color: var(--search-placeholder);
    font-size: 14px;
}

.search-page-input:focus {
    border-color: rgba(23, 58, 34, 0.18);
    box-shadow: 0 0 0 3px rgba(23, 58, 34, 0.05), 0 4px 16px rgba(23, 58, 34, 0.04);
}


.search-submit {
    position: absolute;
    right: 6px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--search-muted);
    cursor: pointer;
    transition: background-color var(--search-dur) ease,
        color var(--search-dur) ease, transform var(--search-dur) ease;
}

.search-page-input:not(:placeholder-shown) ~ .search-submit {
    background: var(--search-brand);
    color: var(--search-on-brand);
}

.search-submit:active {
    transform: scale(0.94);
}

@media (hover: hover) {
    .search-submit:hover {
        background: rgba(23, 58, 34, 0.06);
    }

    .search-page-input:not(:placeholder-shown) ~ .search-submit:hover {
        background: #44c67d;
    }
}

/* 下划线 tab */
.search-tabs {
    display: flex;
    align-items: stretch;
    gap: 28px;
    margin-top: 0;
    border-bottom: 1px solid var(--search-hairline);
    overflow-x: auto;
    touch-action: pan-x;
    scrollbar-width: none;
}

.search-tabs::-webkit-scrollbar {
    display: none;
}

.search-tab {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: 0 0 auto;
    padding: 10px 0 9px;
    color: var(--search-muted-strong);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent;
    white-space: nowrap;
}

.search-tab.is-current {
    color: var(--search-on-brand);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--search-brand);
}

.search-tab-count {
    color: var(--search-muted-strong);
    font-size: 11px;
    font-weight: 400;
}

/* 用户：扁平行 + 发丝分隔 */
.search-user-list {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.search-user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 14px 2px;
    border-bottom: 1px solid var(--search-hairline);
    color: inherit;
    text-decoration: none;
}

.search-user-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    background: #eef2ee;
}

.search-user-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-user-name {
    overflow: hidden;
    color: var(--search-ink);
    font-size: 15px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-user-handle,
.search-user-bio {
    overflow: hidden;
    color: var(--search-muted-strong);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-user-chevron {
    flex: 0 0 auto;
    color: #b7c3bb;
}

/* 标签小节 */
.search-results-section-title {
    margin: 18px 2px 10px;
    color: var(--search-muted-strong);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.search-page .tag-pills {
    margin-top: 0;
}

/* 空态/零结果 */
.search-empty {
    padding: 38px 8px 16px;
    text-align: center;
}

.search-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: rgba(152, 224, 172, 0.18);
    color: var(--search-on-brand);
}

.search-empty-title {
    margin: 0 0 6px;
    color: var(--search-ink);
    font-size: 17px;
    font-weight: 600;
}

.search-empty-hint {
    margin: 0 0 18px;
    color: var(--search-muted-strong);
    font-size: 13px;
    line-height: 1.7;
}

.search-empty-section-title {
    margin: 22px 2px 10px;
    color: var(--search-muted-strong);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.search-empty .search-chips,
.search-empty .tag-pills {
    justify-content: center;
}

.search-empty .search-section {
    margin: 18px 0 10px;
}

.search-empty .search-section-head {
    justify-content: center;
    gap: 10px;
    margin: 0 0 8px;
}

.search-tab-empty {
    margin: 28px 3px;
    color: var(--search-muted-strong);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
}

/* 分页：居中胶囊 */
.search-page .tag-pager {
    display: flex;
    justify-content: center;
    margin: 22px 0 6px;
}

.search-page .tag-pager-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 20px;
    border: 1px solid var(--search-hairline);
    border-radius: 999px;
    background: var(--search-card);
    color: var(--search-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: border-color var(--search-dur) ease, background-color var(--search-dur) ease;
}

.search-page .tag-grid {
    margin-top: 12px;
}

/* 结果列表收尾：细线 + 数量，避免稀疏结果像「没加载完」。 */
.search-end {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 22px 0 4px;
    color: var(--search-muted);
    font-size: 12px;
    letter-spacing: 0.04em;
}

.search-end::before,
.search-end::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--search-hairline);
}

/* 结果页里的共用 section 颜色向浅底靠拢 */
.search-page .search-section-title,
.search-page .search-section-count,
.search-page .search-section-link {
    color: var(--search-muted-strong);
}

/* ----------------------------------------------------------------------------
   hover / focus（只在支持 hover 的设备上）
   ---------------------------------------------------------------------------- */

.search-back:focus-visible,
.search-brand a:focus-visible,
.search-tab:focus-visible,
.search-user-row:focus-visible,
.search-page .tag-pager-link:focus-visible {
    outline: none;
    box-shadow: var(--search-focus-ring);
}

/* 搜索控件用中性环：手动聚焦（输入框）已经完全去绿。 */
.search-section-link:focus-visible,
.search-chip-query:focus-visible,
.search-chip-remove:focus-visible,
.search-status-retry:focus-visible,
.search-submit:focus-visible {
    outline: none;
    box-shadow: var(--search-focus-ring-neutral);
}

.nav-search-submit:focus-visible,
.search-mobile-submit:focus-visible,
.search-mobile-cancel:focus-visible {
    outline: none;
    box-shadow: var(--search-focus-ring-neutral-inverse);
}

.pf-page .navbar .nav-search-submit:focus-visible,
.pf-page .search-mobile-submit:focus-visible,
.pf-page .search-mobile-cancel:focus-visible {
    box-shadow: var(--search-focus-ring-neutral);
}

/* 卡片/瓦片类链接用 outline（避免与既有 hover 阴影抢 box-shadow）。 */
.search-preview-user:focus-visible,
.search-preview-work:focus-visible,
.search-chip:focus-visible {
    outline: 2px solid rgba(23, 58, 34, 0.35);
    outline-offset: 2px;
}

.search-page .tag-pill:focus-visible,
.search-page .tag-tile:focus-visible {
    outline: 2px solid rgba(152, 224, 172, 0.85);
    outline-offset: 2px;
}

@media (hover: hover) {
    .search-back:hover,
    .search-brand a:hover {
        color: var(--search-ink);
    }

    .search-preview-user:hover {
        background: rgba(23, 58, 34, 0.05);
    }

    .search-section-link:hover {
        color: var(--search-ink);
        text-decoration: underline;
    }

    .search-chip:hover {
        border-color: var(--search-brand);
        background: rgba(255, 255, 255, 0.9);
    }

    .search-chip-remove:hover {
        background: rgba(0, 0, 0, 0.06);
    }

    .search-user-row:hover {
        border-radius: 10px;
        background: rgba(152, 224, 172, 0.07);
    }

    .search-tab:not(.is-current):hover {
        color: var(--search-ink);
    }

    .search-page .tag-pager-link:hover {
        border-color: var(--search-brand);
        background: #f5faf6;
    }

    .search-status-retry:hover {
        border-color: var(--search-brand);
    }
}

/* ----------------------------------------------------------------------------
   小屏微调
   ---------------------------------------------------------------------------- */

@media only screen and (max-width: 360px) {
    .search-tab {
        gap: 3px;
        font-size: 13px;
    }

    .search-tab-count {
        font-size: 11px;
    }

    .search-tabs {
        gap: 18px;
    }

    .search-user-row {
        gap: 10px;
        padding: 12px 0;
    }

    .search-user-avatar {
        width: 42px;
        height: 42px;
    }

    .search-preview-works {
        gap: 4px;
    }
}

/* ----------------------------------------------------------------------------
   首页导航 320 档：加入搜索图标后，用只收紧间距与 tab 内边距的方式让出位置。
   实测（320×568）：品牌、三枚动作盒、登录文字都不变形，tab 不折行，仍余 6px。
   胶囊只在 ≥651 出现，因此这段只作用于移动端的图标布局。
   ---------------------------------------------------------------------------- */

@media only screen and (max-width: 360px) {
    .navbar--has-search {
        padding-left: 8px;
        padding-right: 8px;
        gap: 4px;
    }

    .navbar--has-search .navbar-actions {
        gap: 4px;
    }

    .navbar--has-search .nav-tabs {
        gap: 0;
    }

    .navbar--has-search .nav-tab {
        padding: 6px 7px;
        font-size: 0.8em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-search,
    .search-page-input,
    .search-page .tag-pager-link,
    .search-preview-user,
    .search-chip,
    .search-user-row {
        transition: none;
    }

    .nav-search-submit,
    .search-submit,
    .search-mobile-submit {
        transition: none;
    }

    .nav-search-submit:active,
    .search-submit:active,
    .search-mobile-submit:active {
        transform: none;
    }

    .search-suggest:not([hidden]),
    .search-mobile-bar:not([hidden]) {
        animation: none;
    }

    .search-spinner-dot {
        animation: none;
    }
}