/* 搜索互动 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 {
        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 {
        flex: 1;
        min-width: 0;
        padding: 10px 4px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #fff;
        font-size: 15px;
    }

    #masthead .search-bar input::placeholder {
        color: #8a8a8a;
    }

    #masthead .search-bar .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;
        transition: max-height .35s ease, opacity .25s ease, margin .25s ease;
    }

    #masthead .chips.is-open {
        max-height: 160px;
        margin-top: 12px;
        opacity: 1;
    }

    #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;
    }

    /* 手机端缩小留白并改为左对齐，保持标题和搜索控件在一屏内。 */
    @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; }
    }

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