/* 搜索互动 Banner 覆盖旧主题的 table/固定高度布局，让展开内容自然撑开。 */
#masthead {
        --search-pink: #ff4d9a;
        --search-violet: #7c5cff;
        position: relative;
        display: block !important;
        box-sizing: border-box;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        padding: 56px 20px 52px;
        background: linear-gradient(180deg, #333 0%, #2b2b2b 55%, #262626 100%);
        border-bottom: 1px solid #1c1c1c;
        color: #f3f3f3;
        overflow: hidden;
}

#masthead::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(24, 24, 24, .34), rgba(23, 23, 23, .66));
}

#masthead .blog-background {
        z-index: 1;
}

    /* 标题行承载收起后的圆形图标，并保留各页面原有标题变量。 */
#masthead .hero-inner,
#masthead .masthead-search-shell {
        display: block !important;
        position: relative;
        z-index: 10;
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        background-color: transparent !important;
        text-align: center;
}

#masthead .inner {
        display: block !important;
        width: 100%;
        left: 0;
        background-color: transparent !important;
}

/* 搜索页面覆盖旧主题的断点容器宽度和内边距，保证整个模块以 masthead 中线居中。 */
#masthead .inner > .container {
        box-sizing: border-box;
        width: 100%;
        max-width: 980px !important;
        margin-right: auto;
        margin-left: auto;
        padding-right: 0 !important;
        padding-left: 0 !important;
}

#masthead .masthead-search-container {
        width: 100%;
        max-width: 980px;
        margin: 0 auto;
        padding: 0;
}

#masthead .title-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        min-height: 52px;
        max-width: 980px;
        margin: 0 auto;
}

/* 页面自动弹出规则判断完成前隐藏整个模块，避免首页分页或已有 Cookie 时闪现展开内容。 */
#masthead .masthead-search-shell[hidden] {
        display: none !important;
}

/* 分类标题等待脚本完成状态判断时同步隐藏副标题，避免标题行尚未出现而文案先闪现。 */
#masthead .category-search-title-row[hidden] + .blog-description {
        display: none !important;
}

#masthead .site-title {
        max-width: 100%;
        margin: 0;
        color: #fff;
        font-size: clamp(22px, 4.2vw, 40px);
        font-weight: 700;
        letter-spacing: .02em;
        line-height: 1.3;
        text-align: left;
        text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

#masthead .site-desc {
        max-width: 820px;
        margin: 14px auto 0;
        color: #cfcfcf;
        font-size: 14px;
        line-height: 1.8;
}

    /* 圆形按钮只在收起或主动展开时出现，开场动画期间保持隐藏。 */
    #masthead .search-fab {
        display: grid;
        flex: 0 0 auto;
        place-items: center;
        width: 48px;
        height: 48px;
        padding: 0;
        border: 1px solid #5a5a5a;
        border-radius: 999px;
        background: #1a1a1a;
        color: #ddd;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
        cursor: pointer;
        opacity: 0;
        transform: scale(.85);
        pointer-events: none;
        touch-action: manipulation;
        transition: opacity .35s ease, transform .35s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    #masthead .search-fab.is-visible {
        opacity: 1;
        transform: scale(1);
        pointer-events: auto;
    }

    #masthead .search-fab:hover,
    #masthead .search-fab.is-active {
        border-color: #8b6cff;
        background: #1c1830;
        box-shadow: 0 0 0 3px rgba(124, 92, 255, .2), 0 10px 28px rgba(0, 0, 0, .35);
    }

    /* 搜索面板使用高度、透明度和位移共同完成展开与收起动画。 */
    #masthead .search-panel {
        width: min(720px, 100%);
        max-height: 0;
        margin: 0 auto;
        opacity: 0;
        overflow: hidden;
        transform: translateY(-10px) scale(.98);
        pointer-events: none;
        transition: max-height .5s cubic-bezier(.22, .8, .24, 1), opacity .35s ease, transform .5s cubic-bezier(.22, .8, .24, 1), margin .35s ease;
    }

    #masthead .search-panel.is-open {
        max-height: 130px;
        margin-top: 18px;
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* 页头与浮动表单共用输入框样式，保持搜索外观一致。 */
    #masthead .search-bar,
    .masthead-search-float-panel .search-bar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 8px 8px 16px;
        border: 1px solid #4a4a4a;
        border-radius: 999px;
        background: #1a1a1a;
        box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    }

    #masthead .search-panel.is-open .search-bar {
        border-color: #8b6cff;
        box-shadow: 0 0 0 3px rgba(124, 92, 255, .16), 0 16px 40px rgba(0, 0, 0, .4);
        animation: masthead-search-pop .45s cubic-bezier(.22, .8, .24, 1);
    }

    @keyframes masthead-search-pop {
        from { transform: translateY(-6px); filter: brightness(1.08); }
        to { transform: none; filter: none; }
    }

    /* 浮动表单沿用弹性输入宽度，兼容窄屏和长关键词。 */
    #masthead .search-bar input,
    .masthead-search-float-panel input {
        flex: 1;
        min-width: 0;
        padding: 10px 4px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #fff;
        font-size: 15px;
    }

    /* 两个入口使用相同的占位文字颜色。 */
    #masthead .search-bar input::placeholder,
    .masthead-search-float-panel input::placeholder {
        color: #8a8a8a;
    }

    /* 复用提交按钮配色，浮动面板提供相同的主题变量。 */
    #masthead .search-bar .go,
    .masthead-search-float-panel .go {
        padding: 11px 20px;
        border: 0;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--search-pink), var(--search-violet));
        color: #fff;
        font-weight: 800;
        cursor: pointer;
    }

    /* 后台 JSON 标签随面板一起展开，链接使用标签 slug 进入对应归档页。 */
    #masthead .chips {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        max-height: 0;
        margin-top: 0;
        opacity: 0;
        overflow: hidden;
        /* 收起动画立即停止响应鼠标，避免标签经过静止指针时重新触发展开。 */
        pointer-events: none;
        transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
    }

    #masthead .chips.is-open {
        max-height: 160px;
        margin-top: 12px;
        opacity: 1;
        /* 展开后恢复标签的悬停和点击能力。 */
        pointer-events: auto;
    }

    #masthead .chips a {
        display: inline-block;
        padding: 6px 12px;
        border: 1px solid #4a4a4a;
        border-radius: 999px;
        background: #333;
        color: #ddd;
        font-size: 12px;
        cursor: pointer;
        text-decoration: none;
        user-select: none;
    }

    #masthead .chips a:hover,
    #masthead .chips a:focus-visible {
        border-color: #8b6cff;
        color: #fff;
        outline: 0;
    }

    /* 浮动入口默认隐藏，桌面端即使脚本尚未更新状态也不会显示。 */
    .masthead-search-float,
    .masthead-search-float-panel {
        display: none;
    }

    /* 手机端缩小留白并改为左对齐，保持标题和搜索控件在一屏内。 */
    @media (max-width: 640px) {
        #masthead { padding: 38px 16px 36px; }
        #masthead .title-row { justify-content: flex-start; padding: 0 4px; text-align: left; }
        #masthead .site-title { font-size: 20px; }
        #masthead .site-desc { padding: 0 4px; text-align: left; }
        #masthead .search-fab { width: 42px; height: 42px; }
        #masthead .search-bar .go { padding-right: 16px; padding-left: 16px; }

        /* 分类页沿用独立入口的位置与样式。 */
        .masthead-search-float:not(.is-home):not([hidden]) {
            position: fixed;
            right: 18px;
            bottom: calc(84px + env(safe-area-inset-bottom, 0px));
            z-index: 890;
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            padding: 0;
            border: 1px solid #5a5a5a;
            border-radius: 50%;
            background: #1a1a1a;
            color: #ddd;
            box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
            cursor: pointer;
            touch-action: manipulation;
        }

        /* 分类页键盘焦点沿用搜索组件的紫色提示。 */
        .masthead-search-float:not(.is-home):focus-visible {
            outline: 2px solid #8b6cff;
            outline-offset: 3px;
        }

        /* 搜索框在浮动按钮上方展开，软键盘弹出时按可视区域抬高。 */
        .masthead-search-float-panel:not([hidden]) {
            --search-pink: #ff4d9a;
            --search-violet: #7c5cff;
            --search-panel-offset: 144px;
            position: fixed;
            right: 18px;
            bottom: calc(max(var(--search-panel-offset), var(--search-keyboard-offset, 0px)) + env(safe-area-inset-bottom, 0px));
            z-index: 900;
            display: block;
            width: min(360px, calc(100% - 36px));
        }

        /* 使用 16 像素字号避免 iPhone 聚焦时自动放大页面，边框标明当前输入区域。 */
        .masthead-search-float-panel input {
            font-size: 16px;
        }

        .masthead-search-float-panel .search-bar {
            border-color: #8b6cff;
            box-shadow: 0 0 0 3px rgba(124, 92, 255, .16), 0 16px 40px rgba(0, 0, 0, .4);
        }

        /* 首页两个浮动按钮之间留出 12 像素，面板使用相同间距。 */
        .masthead-search-float.is-home,
        .masthead-search-float-panel.is-home {
            --floating-button-step: calc(var(--floating-button-size) + 12px);
        }

        /* 首页入口在置顶按钮后方缩小淡出，收回结束后再隐藏。 */
        .masthead-search-float.is-home {
            z-index: 898;
            display: grid;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            transform: translateY(0) scale(.35);
            transform-origin: center bottom;
            transition:
                transform .48s cubic-bezier(.22, 1.15, .36, 1),
                opacity .32s ease,
                visibility 0s .48s,
                background .2s ease,
                border-color .2s ease,
                box-shadow .25s ease;
        }

        /* 向上弹出并停在置顶按钮正上方，按下时轻微缩小。 */
        .masthead-search-float.is-home.is-in {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
            transform: translateY(calc(-1 * var(--floating-button-step))) scale(1);
            transition-delay: 0s;
        }

        .masthead-search-float.is-home.is-in:active {
            transform: translateY(calc(-1 * var(--floating-button-step))) scale(.94);
            transition-duration: .12s;
        }

        /* 首页搜索框贴齐按钮右边，外框和提交按钮使用示例的蓝紫配色。 */
        .masthead-search-float-panel.is-home:not([hidden]) {
            --search-panel-offset: calc(var(--floating-button-offset) + 2 * var(--floating-button-step));
            right: var(--floating-button-offset);
            width: min(360px, calc(100% - 2 * var(--floating-button-offset)));
        }

        .masthead-search-float-panel.is-home .search-bar {
            border-color: #40a0f0;
            box-shadow: 0 0 0 3px rgba(64, 160, 240, .18), 0 16px 40px rgba(0, 0, 0, .4);
        }

        .masthead-search-float-panel.is-home .go {
            background: linear-gradient(135deg, #40a0f0, #9070f0 50%, #e050f0);
        }
    }

    /* 系统要求减少动画时保留状态切换但去掉可见过渡。 */
    @media (prefers-reduced-motion: reduce) {
        #masthead .search-fab,
        #masthead .search-panel,
        #masthead .chips {
            transition-duration: .01ms !important;
            animation-duration: .01ms !important;
        }

        /* 保留浮动入口位置和可见状态，关闭搜索弹出动画。 */
        .masthead-search-float.is-home {
            transition: none;
        }
    }

    /* 打印手机页面时隐藏浮动搜索控件。 */
    @media print {
        .masthead-search-float.is-home,
        .masthead-search-float-panel.is-home:not([hidden]) {
            display: none;
        }
    }