/* ========================================
   搜索UI优化样式（精致化终极版 - 修复版）
   版本：2.2
   说明：修复重叠问题，适配原网站结构，修复移动端显示问题
   ======================================== */

/* ========== 全局防护：防止水平溢出和显示问题 ========== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
}

/* 确保背景光晕不会影响布局 */
html body::before {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* 确保搜索框容器不会导致溢出 */
html body .search-box-wrapper,
html body #app .search-box-wrapper {
    overflow: visible !important;
}

/* ========== 隐藏原网站的历史搜索（避免重复） ========== */
/* 提高选择器优先级，确保能覆盖原网站的样式 */
html body .search-history,
html body #searchHistory.search-history,
html body #history-search-section,
html body #searchHistory,
html body .search-history-header,
html body .search-history-list-container,
html body .search-history-list {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ========== 搜索框容器（一体化设计） ========== */
/* 使用最高优先级选择器，实现pansou1风格的一体化搜索框 */
html body .search-box-wrapper,
html body #app .search-box-wrapper {
    position: relative !important;
    z-index: 1000;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* 一体化搜索框背景层（只覆盖第一行，不包裹大家都在搜） */
html body .search-box-wrapper::before,
html body #app .search-box-wrapper::before {
    content: '' !important;
    position: absolute !important;
    /* 上下左右各移7.5px，更精致的间距，对齐pansou1的比例 */
    top: -7.5px !important;
    left: -7.5px !important;
    right: -7.5px !important;
    /* 总高度67px，和pansou1一致（52px内容 + 7.5px*2 上下间距） */
    height: 67px !important;
    /* 背景渐变更微妙：上下色差极小，几乎看不见但又确实存在，更通透更高级 */
    background: linear-gradient(180deg, rgba(30, 30, 48, 0.92), rgba(26, 26, 42, 0.94)) !important;
    backdrop-filter: blur(16px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
    /* 边框更淡更隐形，几乎看不见，只有仔细看才会发现，极克制 */
    border: 1px solid rgba(255, 255, 255, 0.035) !important;
    border-radius: 12px !important; /* 圆角稍微收一点，更精致 */
    /* 阴影更柔和更自然：内发光极淡细腻，外阴影柔和有悬浮感，层次感干净 */
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.02) inset, /* 内发光极淡，似有若无 */
        0 12px 36px rgba(0, 0, 0, 0.38), /* 主阴影柔和 */
        0 2px 8px rgba(0, 0, 0, 0.2) !important; /* 底层阴影增加深度感 */
    /* 去掉padding，用定位来实现间距效果 */
    padding: 0 !important;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

/* Hover状态：整体容器背景层 - 更微妙更克制，似有若无的变化 */
html body .search-box-wrapper:hover::before,
html body #app .search-box-wrapper:hover::before {
    /* 边框变化极淡，几乎看不见但确实有变化，更克制 */
    border-color: rgba(102, 126, 234, 0.1) !important;
    /* 阴影变化也很微妙，只是稍微深一点，更自然 */
    box-shadow: 
        0 0 0 1px rgba(255, 255, 255, 0.025) inset,
        0 14px 40px rgba(0, 0, 0, 0.42),
        0 3px 10px rgba(0, 0, 0, 0.22) !important;
    /* 背景极轻微变亮，几乎察觉不到，似有若无 */
    background: linear-gradient(180deg, rgba(32, 32, 50, 0.93), rgba(28, 28, 44, 0.95)) !important;
}

/* Focus状态：整体容器背景层 - 两层发光效果，更柔和扩散、更透气，像光晕一样 */
html body .search-box-wrapper:focus-within::before,
html body #app .search-box-wrapper:focus-within::before {
    /* 边框颜色更淡，不那么突兀，更融入 */
    border-color: rgba(102, 126, 234, 0.35) !important;
    /* 背景稍微变亮，但保持通透 */
    background: linear-gradient(180deg, rgba(34, 34, 52, 0.94), rgba(28, 28, 44, 0.95)) !important;
    /* 两层发光效果更柔和，边缘过渡更自然，像光晕一样散开，更透气不闷 */
    box-shadow: 
        0 0 0 1px rgba(102, 126, 234, 0.25), /* 第一层：细发光，更淡更柔和 */
        0 0 0 14px rgba(102, 126, 234, 0.06), /* 第二层：粗发光，更淡更扩散，光晕感更强 */
        0 16px 44px rgba(0, 0, 0, 0.38),
        0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 确保搜索框和按钮在背景层上面 */
html body .search-input-box,
html body #app .search-input-box,
html body .search-btn,
html body #app .search-btn {
    position: relative !important;
    z-index: 1 !important;
}

/* ========== 搜索框样式（一体化设计） ========== */
/* 使用最高优先级选择器，彻底覆盖原网站样式 */
html body .search-input-box,
html body #app .search-input-box {
    position: relative !important;
    flex: 1 !important;
    /* 彻底清除原网站的所有视觉样式，避免重叠 */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
    height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
}

/* 彻底清除focus-within的样式 */
html body .search-input-box:focus-within,
html body #app .search-input-box:focus-within {
    background: transparent !important;
    background-color: transparent !important;
    border-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ========== 下拉面板定位和层级修复 ========== */

/* 确保搜索框容器有relative定位 */
html body .search-input-box,
html body #app .search-input-box {
    position: relative !important;
    z-index: 1 !important;
}

/* 下拉面板基础样式 - 最高优先级 */
html body .search-dropdown-panel,
html body #app .search-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-8px) scale(0.98) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 280px !important;
    background: rgba(26, 26, 36, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6) !important;
    padding: 16px 0 !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* 下拉面板展开状态 */
html body .search-dropdown-panel.show,
html body #app .search-dropdown-panel.show {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* ========== 桌面端精致化优化：参考pansou1比例，改小更精致 ========== */

/* Hero区域整体改小 - 使用最高优先级选择器 */
html body #app .home-container,
html body .home-container {
    max-width: 1050px !important; /* 从1200px改小，更精致 */
    padding-top: 60px !important; /* 从80px改小 */
    padding-bottom: 40px !important; /* 从60px改小 */
}

/* 主标题改小，字重减轻 - 使用最高优先级选择器 */
html body #app .search-section .hero-title-main,
html body .search-section .hero-title-main,
html body #app .hero-title-main,
html body .hero-title-main {
    font-size: 32px !important; /* 从40px改小 */
    font-weight: 600 !important; /* 字重减轻 */
    margin-bottom: 12px !important; /* 调整间距 */
}

/* 副标题加大，层次更分明 - 使用最高优先级选择器 */
html body #app .search-section .hero-title-sub,
html body .search-section .hero-title-sub,
html body #app .hero-title-sub,
html body .hero-title-sub {
    font-size: 46px !important; /* 从40px改大 */
    font-weight: 800 !important; /* 保持粗体 */
    margin-bottom: 20px !important; /* 调整间距 */
}

/* 搜索框宽度调整，更精致 - 使用最高优先级选择器 */
html body #app .search-section .search-box-wrapper,
html body .search-section .search-box-wrapper,
html body #app .search-box-wrapper,
html body .search-box-wrapper {
    max-width: 650px !important; /* 调整到650px，精致不笨重 */
}

/* 移动端下拉面板适配 */
@media (max-width: 768px) {
    html body .search-dropdown-panel,
    html body #app .search-dropdown-panel {
        top: 75px !important; /* 增加间距，视觉更舒适 */
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        border-radius: 14px !important;
        max-height: 60vh !important;
        margin: 0 !important;
        transform: translateX(0) translateY(-8px) scale(0.98) !important;
    }
}

/* 小屏移动端下拉面板适配 */
@media (max-width: 480px) {
    html body .search-dropdown-panel,
    html body #app .search-dropdown-panel {
        top: 56px !important; /* 搜索框高度48px + 间距8px，确保在搜索框下面 */
        border-radius: 12px !important;
        max-height: 55vh !important;
    }
}

/* 确保搜索图标容器没有背景，避免重叠 */
html body .search-input-box .input-search-icon,
html body #app .search-input-box .input-search-icon {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* 隐藏放大镜图标 */
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* 确保清除按钮容器没有背景，避免重叠 */
html body .search-input-box .search-clear-btn,
html body #app .search-input-box .search-clear-btn {
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    box-shadow: none !important;
}

.search-input-box input {
    width: 100%;
    height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
    /* 适配：左边图标已隐藏，右边有清除按钮 */
    padding: 0 48px 0 18px !important;
    font-size: 16px !important; /* 对齐pansou1字体大小 */
    color: #e0e0e0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    transition: all 0.16s ease !important;
    box-shadow: none !important;
}

/* 原网站的搜索图标样式优化 */
.search-input-box .input-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    z-index: 2;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Focus时图标变亮 */
.search-input-box:focus-within .input-search-icon {
    color: #667eea;
    transform: translateY(-50%) scale(1.1);
}

/* 清除按钮样式优化 */
.search-input-box .search-clear-btn {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.25s ease !important;
    z-index: 2 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding: 0 !important;
}

/* 有内容时显示清除按钮 */
.search-input-box input:not(:placeholder-shown) ~ .search-clear-btn,
.search-input-box input:focus ~ .search-clear-btn {
    opacity: 1 !important;
    visibility: visible !important;
}

.search-input-box .search-clear-btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.1) !important;
}

/* Hover状态 */
.search-input-box input:hover {
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 
        0 6px 32px rgba(102, 126, 234, 0.15),
        0 4px 24px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Focus状态 */
.search-input-box input:focus {
    border-color: transparent !important;
    background: rgba(26, 26, 36, 0.95) !important;
    box-shadow: 
        0 0 0 2px rgba(102, 126, 234, 0.4),
        0 8px 40px rgba(102, 126, 234, 0.25),
        0 4px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Placeholder样式 */
.search-input-box input::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 15px !important;
}

.search-input-box input::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 15px !important;
}

.search-input-box input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 15px !important;
}

/* ========== 下拉面板 ========== */
.search-dropdown-panel {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px) scale(0.98);
    width: 100%;
    max-width: 600px;
    max-height: 480px;
    background: rgba(26, 26, 36, 0.92);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 16px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 8px 24px rgba(102, 126, 234, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 9999;
}

/* 展开状态 */
.search-dropdown-panel.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* 面板顶部渐变装饰线 */
.search-dropdown-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #00d4ff, #667eea);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
    opacity: 0.8;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* ========== 分区样式 ========== */
.dropdown-section {
    padding: 16px 20px;
}

.dropdown-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dropdown-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dropdown-section-title .section-icon {
    font-size: 14px;
}

.dropdown-section-action {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: all 0.2s ease;
    user-select: none;
}

.dropdown-section-action:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

/* 分隔线 */
.dropdown-divider {
    height: 1px;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(102, 126, 234, 0.2), 
        transparent
    );
    margin: 0 20px;
}

/* ========== 历史标签容器 ========== */
.history-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 140px;
    overflow-y: auto;
    padding-right: 4px;
}

/* 滚动条样式 */
.history-tags-container::-webkit-scrollbar {
    width: 4px;
}

.history-tags-container::-webkit-scrollbar-track {
    background: transparent;
}

.history-tags-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

.history-tags-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* 历史标签 */
.history-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.history-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(102, 126, 234, 0.1), 
        transparent
    );
    transition: left 0.5s ease;
}

.history-tag:hover {
    background: rgba(102, 126, 234, 0.15);
    border: none;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

.history-tag:hover::before {
    left: 100%;
}

/* 选中状态（键盘选择） */
.history-tag.active {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(0, 212, 255, 0.2));
    border-color: rgba(102, 126, 234, 0.5);
    color: #fff;
    box-shadow: 
        0 4px 16px rgba(102, 126, 234, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.history-tag .tag-icon {
    font-size: 12px;
    opacity: 0.7;
}

/* 删除按钮 */
.history-tag .history-delete-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
}

.history-tag:hover .history-delete-btn {
    opacity: 1;
    visibility: visible;
}

.history-tag .history-delete-btn:hover {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    transform: scale(1.2);
}

/* 关键词高亮 */
.history-tag .highlight {
    background: linear-gradient(135deg, #667eea, #00d4ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* 空状态 */
.history-empty {
    width: 100%;
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
}

/* ========== 猜你想搜标签 ========== */
.hot-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hot-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.15), 
        rgba(0, 212, 255, 0.1)
    );
    border: none;
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.hot-tag::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.3), 
        rgba(0, 212, 255, 0.2)
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.hot-tag:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(102, 126, 234, 0.3),
        0 2px 8px rgba(0, 212, 255, 0.2);
    border: none;
    color: #fff;
}

.hot-tag:hover::after {
    opacity: 1;
}

.hot-tag .tag-fire {
    font-size: 12px;
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* 标签逐个出现动画 */
.search-dropdown-panel.show .hot-tag {
    animation: tagFadeIn 0.4s ease forwards;
    opacity: 0;
    transform: translateY(10px);
}

.search-dropdown-panel.show .hot-tag:nth-child(1) { animation-delay: 0.05s; }
.search-dropdown-panel.show .hot-tag:nth-child(2) { animation-delay: 0.1s; }
.search-dropdown-panel.show .hot-tag:nth-child(3) { animation-delay: 0.15s; }
.search-dropdown-panel.show .hot-tag:nth-child(4) { animation-delay: 0.2s; }
.search-dropdown-panel.show .hot-tag:nth-child(5) { animation-delay: 0.25s; }
.search-dropdown-panel.show .hot-tag:nth-child(6) { animation-delay: 0.3s; }

@keyframes tagFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== 搜索按钮样式优化（一体化设计 - 更克制更融入） ========== */
.search-btn {
    height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
    padding: 0 28px !important; /* 从32px收窄到28px，更精致 */
    font-size: 15px !important; /* 对齐pansou1字体大小 */
    font-weight: 600 !important;
    /* 渐变更柔和更暗，不那么刺眼，更克制更高级 */
    background: linear-gradient(135deg, rgba(92, 116, 224, 0.92), rgba(0, 192, 235, 0.88)) !important;
    border: none !important;
    border-radius: 10px !important; /* 对齐pansou1圆角 */
    color: #fff !important;
    cursor: pointer !important;
    transition: all 0.16s ease !important;
    /* 阴影更淡更柔和，不突兀，更融入整体，更有深度感 */
    box-shadow: 
        0 2px 8px rgba(102, 126, 234, 0.2),
        0 1px 3px rgba(0, 212, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.search-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    /* 高光更淡更柔和，更细腻 */
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.12), 
        transparent
    );
    transition: left 0.6s ease;
}

.search-btn:hover {
    /* hover阴影更淡，变化更微妙，似有若无 */
    box-shadow: 
        0 3px 10px rgba(102, 126, 234, 0.25),
        0 1px 4px rgba(0, 212, 255, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    filter: brightness(1.02) !important; /* 亮度变化更微妙，几乎察觉不到 */
}

.search-btn:hover::before {
    left: 100%;
}

.search-btn:active {
    transform: scale(0.99) !important; /* 缩放更微妙 */
    box-shadow: 
        0 1px 4px rgba(102, 126, 234, 0.22),
        0 1px 2px rgba(0, 212, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    filter: brightness(0.99) !important; /* 亮度变化更微妙 */
}

/* ========== 移动端适配（768px以下） ========== */
@media (max-width: 768px) {
    /* Hero区域移动端优化 - 增加间距，更大气更有冲击力 */
    html body .hero-title,
    html body #app .hero-title {
        margin-bottom: 32px !important; /* 从24px增加到32px，和搜索框间距更大 */
    }
    
    /* 顶部小标签移动端 - 增加底部间距 */
    html body .hero-badge,
    html body #app .hero-badge {
        margin-bottom: 20px !important; /* 从16px增加到20px，和主标题间距更大 */
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    
    html body .hero-badge span,
    html body #app .hero-badge span {
        padding: 4px 14px !important;
        font-size: 11px !important;
        background: rgba(102, 126, 234, 0.12) !important;
        border-radius: 999px !important;
        color: rgb(167, 139, 250) !important;
    }
    
    /* 主标题移动端 - 增加底部间距 */
    html body .hero-title-main,
    html body #app .hero-title-main {
        font-size: 32px !important; /* 改大，对齐pansou1比例 */
        font-weight: 500 !important; /* 保持中等字重 */
        margin-bottom: 12px !important; /* 从8px增加到12px，和副标题间距更大 */
        letter-spacing: 0.3px !important;
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* 副标题移动端 - 增加底部间距 */
    html body .hero-title-sub,
    html body #app .hero-title-sub {
        font-size: 32px !important; /* 和主标题一样大，对齐pansou1比例 */
        font-weight: 600 !important; /* 字重改细，更精致 */
        margin-bottom: 20px !important; /* 从16px增加到20px，和描述间距更大 */
        letter-spacing: 0.3px !important;
    }
    
    /* 描述文字移动端 - 增加底部间距 */
    html body .hero-desc,
    html body #app .hero-desc {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important; /* 增加底部间距，和搜索框距离更大 */
    }
    
    /* 搜索框容器改为上下排列 - 增加两边留白，更精致 */
    html body .search-box-wrapper,
    html body #app .search-box-wrapper {
        flex-direction: column !important;
        gap: 6px !important; /* 减小间距，让按钮更靠上 */
        padding: 8px 8px 6px 8px !important; /* 底部padding小一点，让按钮更靠下但在框内 */
        margin: 0 auto !important; /* 保持居中 */
        width: calc(100% - 2px) !important; /* 两边各1px留白，总宽度减2px，几乎顶边但留一点点距离 */
        max-width: none !important; /* 移除最大宽度限制 */
    }
    
    /* 确保输入框在上面，按钮在下面 */
    html body .search-input-box,
    html body #app .search-input-box {
        order: -1 !important;
    }
    
    html body .search-btn,
    html body #app .search-btn {
        order: 0 !important;
        margin-bottom: 0 !important; /* 确保按钮底部没有额外margin */
        position: relative !important;
        top: -18px !important; /* 按钮往上移动18px，确保完全在包裹框内，底部留间隔 */
    }
    
    /* 移动端保留一体化背景层，元素上下排列 - 质感同步桌面端，更精致 */
    html body .search-box-wrapper::before,
    html body #app .search-box-wrapper::before {
        display: block !important;
        height: auto !important;
        min-height: 100px !important; /* 保持原来的高度 */
        border-radius: 12px !important; /* 移动端圆角小一点 */
        padding: 8px !important;
        top: -8px !important; /* 保持原来的位置 */
        left: -8px !important;
        right: -8px !important;
        /* 背景渐变更微妙：上下色差极小，几乎看不见但又确实存在，更通透更高级 */
        background: linear-gradient(180deg, rgba(30, 30, 48, 0.92), rgba(26, 26, 42, 0.94)) !important;
        backdrop-filter: blur(16px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
        /* 边框更淡更隐形，几乎看不见，只有仔细看才会发现，极克制 */
        border: 1px solid rgba(255, 255, 255, 0.035) !important;
        /* 阴影更柔和更自然：内发光极淡细腻，外阴影柔和有悬浮感，层次感干净 */
        box-shadow: 
            0 0 0 1px rgba(255, 255, 255, 0.02) inset, /* 内发光极淡，似有若无 */
            0 12px 36px rgba(0, 0, 0, 0.38), /* 主阴影柔和 */
            0 2px 8px rgba(0, 0, 0, 0.2) !important; /* 底层阴影增加深度感 */
        transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease !important;
    }
    
    /* 输入框容器全宽 */
    html body .search-input-box,
    html body #app .search-input-box {
        width: 100% !important;
        flex: none !important;
        height: 42px !important; /* 对齐pansou1移动端比例 */
        /* 输入框本身透明，背景由外层容器提供 */
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        transition: all 0.16s ease !important;
    }
    
    /* 输入框hover状态 */
    html body .search-input-box:hover,
    html body #app .search-input-box:hover {
        border-color: transparent !important;
        box-shadow: none !important;
    }
    
    /* 输入框focus状态 */
    html body .search-input-box:focus-within,
    html body #app .search-input-box:focus-within {
        border-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* 移动端按钮全宽 */
    html body .search-btn,
    html body #app .search-btn {
        width: 100% !important;
        height: 48px !important;
        justify-content: center !important;
    }
            0 0 0 2px rgba(102, 126, 234, 0.25),
            0 8px 32px rgba(102, 126, 234, 0.12),
            0 4px 16px rgba(0, 0, 0, 0.18),
            inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
    }
    
    /* 输入框文字 */
    .search-input-box input {
        height: 42px !important; /* 对齐pansou1移动端比例 */
        padding: 0 48px 0 18px !important;
        font-size: 15px !important; /* 对齐pansou1移动端字体大小 */
    }
    
    /* 隐藏的搜索图标，确保不占空间 */
    .search-input-box .input-search-icon {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* 清除按钮移动端适配 */
    .search-input-box .search-clear-btn {
        right: 16px !important;
        width: 24px !important;
        height: 24px !important;
    }
    
    /* 按钮全宽，在输入框下面 */
    .search-btn {
        width: 100% !important;
        height: 44px !important; /* 对齐pansou1移动端按钮比例 */
        padding: 0 24px !important;
        font-size: 15px !important; /* 对齐pansou1移动端按钮字体大小 */
        font-weight: 600 !important;
        border-radius: 10px !important; /* 对齐pansou1圆角比例 */
        box-shadow: 
            0 2px 8px rgba(102, 126, 234, 0.25),
            0 1px 3px rgba(0, 212, 255, 0.15) !important;
    }
    
    /* 按钮hover状态 - 更克制 */
    .search-btn:hover {
        box-shadow: 
            0 4px 14px rgba(102, 126, 234, 0.35),
            0 2px 6px rgba(0, 212, 255, 0.25) !important;
    }
    
    /* 下拉面板移动端适配 */
    .search-dropdown-panel {
        top: calc(52px + 12px); /* 输入框高度 + 间距，确保在输入框下面 */
        max-height: 60vh;
        border-radius: 14px;
    }
    
    .dropdown-section {
        padding: 14px 16px;
    }
    
    .dropdown-section-header {
        margin-bottom: 10px;
    }
    
    .dropdown-section-title {
        font-size: 12px;
    }
    
    .history-tag,
    .hot-tag {
        padding: 7px 12px;
        font-size: 12px;
    }
    
    .hot-tags-container {
        gap: 8px;
    }
    
    .history-tags-container {
        gap: 6px;
        max-height: 120px;
    }
}

/* ========== 小屏移动端适配（480px以下） ========== */
@media (max-width: 480px) {
    /* Hero区域小屏优化 */
    html body .hero-title,
    html body #app .hero-title {
        margin-bottom: 20px !important;
    }
    
    /* 顶部小标签小屏 */
    html body .hero-badge,
    html body #app .hero-badge {
        margin-bottom: 14px !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }
    
    html body .hero-badge span,
    html body #app .hero-badge span {
        padding: 4px 12px !important;
        font-size: 10px !important;
        background: rgba(102, 126, 234, 0.12) !important;
        border-radius: 999px !important;
        color: rgb(167, 139, 250) !important;
    }
    
    /* 主标题小屏 */
    html body .hero-title-main,
    html body #app .hero-title-main {
        font-size: 26px !important; /* 改大，对齐pansou1比例 */
        font-weight: 500 !important; /* 保持中等字重 */
        margin-bottom: 6px !important; /* 保持间距 */
        color: rgba(255, 255, 255, 0.9) !important;
    }
    
    /* 副标题小屏 */
    html body .hero-title-sub,
    html body #app .hero-title-sub {
        font-size: 26px !important; /* 和主标题一样大，对齐pansou1比例 */
        font-weight: 600 !important; /* 字重改细，更精致 */
        margin-bottom: 12px !important; /* 保持间距 */
    }
    
    /* 描述文字小屏 */
    html body .hero-desc,
    html body #app .hero-desc {
        font-size: 12px !important;
    }
    
    /* 搜索框容器上下排列间距调整 */
    html body .search-box-wrapper,
    html body #app .search-box-wrapper {
        gap: 10px !important;
    }
    
    /* 输入框小屏适配 */
    html body .search-input-box,
    html body #app .search-input-box {
        height: 48px !important;
        border-radius: 10px !important;
    }
    
    .search-input-box input {
        height: 48px !important;
        padding: 0 44px 0 18px !important;
        font-size: 16px !important;
    }
    
    /* 隐藏的搜索图标 */
    .search-input-box .input-search-icon {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* 清除按钮小屏适配 */
    .search-input-box .search-clear-btn {
        right: 14px !important;
        width: 22px !important;
        height: 22px !important;
    }
    
    /* 按钮小屏适配 */
    .search-btn {
        height: 48px !important;
        padding: 0 20px !important;
        font-size: 16px !important;
        border-radius: 10px !important;
    }
    
    /* 下拉面板小屏适配 */
    .search-dropdown-panel {
        top: calc(48px + 12px); /* 输入框高度 + 间距 */
    }
    
    .dropdown-section {
        padding: 12px 14px;
    }
    
    .history-tag,
    .hot-tag {
        padding: 6px 10px;
        font-size: 11px;
    }
}

/* ========== 无障碍优化 ========== */
.search-input-box input:focus-visible {
    outline: none !important;
}

.history-tag:focus-visible,
.hot-tag:focus-visible {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* ========== 减少动画（尊重用户偏好） ========== */
@media (prefers-reduced-motion: reduce) {
    .search-dropdown-panel,
    .history-tag,
    .hot-tag,
    .search-btn,
    .search-input-box input {
        transition: none !important;
        animation: none !important;
    }
    
    .search-dropdown-panel.show .hot-tag {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========== 标题渐变效果（精致化提升） ========== */
/* Hero区域整体容器 */
html body .hero-title,
html body #app .hero-title {
    text-align: center !important;
    margin-bottom: 28px !important;
}

/* 顶部小标签 */
html body .hero-badge,
html body #app .hero-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

html body .hero-badge span,
html body #app .hero-badge span {
    display: inline-block !important;
    padding: 4px 14px !important;
    background: rgba(102, 126, 234, 0.12) !important;
    border: 1px solid rgba(102, 126, 234, 0.3) !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgb(167, 139, 250) !important;
    letter-spacing: 0.5px !important;
}

/* 主标题 - 第一行：想看的影视 */
html body .hero-title-main,
html body #app .hero-title-main {
    display: block !important;
    font-size: 28px !important; /* 从32px减小，让层次更分明 */
    font-weight: 500 !important; /* 从600减轻，更优雅 */
    color: rgba(255, 255, 255, 0.9) !important; /* 稍微淡一点，不抢风头 */
    margin: 0 0 10px 0 !important; /* 从8px增加，呼吸感更强 */
    line-height: 1.3 !important;
    letter-spacing: 0.5px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 副标题 - 第二行：这里都能找到 - 渐变效果 */
html body .hero-title-sub,
html body #app .hero-title-sub {
    display: block !important;
    font-size: 46px !important; /* 从40px加大，更突出更有冲击力 */
    font-weight: 800 !important; /* 从700加重，更有力量感 */
    margin: 0 0 20px 0 !important; /* 从16px增加，呼吸感更强 */
    line-height: 1.2 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #667eea 0%, #00d4ff 50%, #667eea 100%) !important;
    background-size: 200% auto !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    animation: titleGradient 6s ease infinite !important;
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes titleGradient {
    0%, 100% { background-position: 0% center; }
    50% { background-position: 100% center; }
}

/* 描述文字 */
html body .hero-desc,
html body #app .hero-desc {
    display: block !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.6) !important;
    margin: 0 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hero区域副标题样式优化（兼容旧类名） */
.hero-subtitle,
.banner-subtitle,
.search-hero-subtitle,
.index-banner-subtitle,
.home-subtitle {
    color: rgba(255, 255, 255, 0.6) !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
}

/* 搜索区域整体间距优化 */
.search-box-wrapper {
    margin-top: 24px !important;
    margin-bottom: 20px !important;
}

/* 大家都在搜模块样式优化 */
.hot-keywords,
.hot-search,
.popular-keywords {
    margin-top: 20px !important;
}

.hot-keywords-label,
.hot-search-label,
.popular-keywords-label {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
}

.hot-keyword,
.hot-search-item,
.popular-keyword {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.hot-keyword:hover,
.hot-search-item:hover,
.popular-keyword:hover {
    color: #667eea !important;
    transform: translateY(-1px) !important;
}
/* ========== 强制搜索框大小永久不变（最高优先级） ========== */
/* 不管有没有search-focused类，大小都固定，彻底解决缩小问题 */

/* 桌面端：强制输入框大小 */
html body .search-input-box input,
html body #app .search-input-box input,
html body * .search-input-box input {
    height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
    min-height: 52px !important;
    max-height: 52px !important;
    font-size: 16px !important; /* 对齐pansou1字体大小 */
    line-height: 1.5 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    scale: 1 !important;
    box-sizing: border-box !important;
}

/* 桌面端：强制按钮大小 */
html body .search-btn,
html body #app .search-btn,
html body * .search-btn {
    height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
    min-height: 52px !important;
    max-height: 52px !important;
    font-size: 15px !important; /* 对齐pansou1字体大小 */
    line-height: 52px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    scale: 1 !important;
    box-sizing: border-box !important;
}

/* 桌面端：强制容器大小 */
html body .search-input-box,
html body #app .search-input-box {
    min-height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
    height: auto !important;
}

/* 移动端：强制输入框大小 */
@media (max-width: 768px) {
    html body .search-input-box input,
    html body #app .search-input-box input,
    html body * .search-input-box input {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        font-size: 16px !important;
    }
    
    html body .search-btn,
    html body #app .search-btn,
    html body * .search-btn {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        font-size: 16px !important;
        line-height: 52px !important;
    }
    
    html body .search-input-box,
    html body #app .search-input-box {
        min-height: 52px !important;
    }
}

/* 小屏移动端 */
@media (max-width: 480px) {
    html body .search-input-box input,
    html body #app .search-input-box input {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    
    html body .search-btn,
    html body #app .search-btn {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        line-height: 48px !important;
    }
    
    html body .search-input-box,
    html body #app .search-input-box {
        min-height: 48px !important;
    }
}


/* ========== 修复search-focused类导致的缩小问题 ========== */
/* 原网站在搜索框获得焦点时会给body添加search-focused类，导致样式变化 */

/* 桌面端：确保搜索框和按钮大小不变 */
html body.search-focused .search-input-box input,
html body #app.search-focused .search-input-box input {
    height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
    font-size: 16px !important;
}

html body.search-focused .search-btn,
html body #app.search-focused .search-btn {
    height: 52px !important; /* 从49px加高到52px，更接近pansou1比例 */
    font-size: 15px !important;
}

/* 移动端：确保搜索框和按钮大小不变 */
@media (max-width: 768px) {
    html body.search-focused .search-input-box input,
    html body #app.search-focused .search-input-box input {
        height: 52px !important;
        font-size: 16px !important;
    }
    
    html body.search-focused .search-btn,
    html body #app.search-focused .search-btn {
        height: 52px !important;
        font-size: 16px !important;
    }
}

/* 小屏移动端 */
@media (max-width: 480px) {
    html body.search-focused .search-input-box input,
    html body #app.search-focused .search-input-box input {
        height: 48px !important;
        font-size: 16px !important;
    }
    
    html body.search-focused .search-btn,
    html body #app.search-focused .search-btn {
        height: 48px !important;
        font-size: 16px !important;
    }
}

/* 同时确保搜索框容器大小不变 */
html body.search-focused .search-input-box,
html body #app.search-focused .search-input-box {
    height: auto !important;
    min-height: 46px !important;
}

@media (max-width: 768px) {
    html body.search-focused .search-input-box,
    html body #app.search-focused .search-input-box {
        min-height: 52px !important;
    }
}

@media (max-width: 480px) {
    html body.search-focused .search-input-box,
    html body #app.search-focused .search-input-box {
        min-height: 48px !important;
    }
}

/* ========== 终极兜底：搜索框大小绝对不变 ========== */
/* 用最高优先级选择器，确保任何情况下都不会缩小 */

/* 桌面端：输入框 */
html body .search-input-box input,
html body #app .search-input-box input,
html body * .search-input-box input,
html body.search-focused .search-input-box input,
html body.search-focused #app .search-input-box input {
    height: 50px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    scale: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* 桌面端：按钮 */
html body .search-btn,
html body #app .search-btn,
html body * .search-btn,
html body.search-focused .search-btn,
html body.search-focused #app .search-btn {
    height: 50px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    font-size: 14px !important;
    line-height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    scale: 1 !important;
    box-sizing: border-box !important;
}

/* 桌面端：容器 */
html body .search-input-box,
html body #app .search-input-box,
html body.search-focused .search-input-box,
html body.search-focused #app .search-input-box {
    min-height: 46px !important;
    height: auto !important;
    transform: none !important;
    scale: 1 !important;
}

/* 移动端：输入框 */
@media (max-width: 768px) {
    html body .search-input-box input,
    html body #app .search-input-box input,
    html body * .search-input-box input,
    html body.search-focused .search-input-box input,
    html body.search-focused #app .search-input-box input {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        font-size: 16px !important;
    }
    
    html body .search-btn,
    html body #app .search-btn,
    html body * .search-btn,
    html body.search-focused .search-btn,
    html body.search-focused #app .search-btn {
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        font-size: 16px !important;
        line-height: 52px !important;
    }
    
    html body .search-input-box,
    html body #app .search-input-box {
        min-height: 52px !important;
    }
}

/* 小屏移动端 */
@media (max-width: 480px) {
    html body .search-input-box input,
    html body #app .search-input-box input {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
    }
    
    html body .search-btn,
    html body #app .search-btn {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        line-height: 48px !important;
    }
    
    html body .search-input-box,
    html body #app .search-input-box {
        min-height: 48px !important;
    }
}

/* 外层容器也不能变形 */
html body .search-box-wrapper,
html body #app .search-box-wrapper,
html body.search-focused .search-box-wrapper,
html body.search-focused #app .search-box-wrapper {
    transform: none !important;
    scale: 1 !important;
}

/* ========================================
   标题区域背景光晕优化
   优化点：扩大范围、柔化边缘、增加深度、降低饱和度、优化过渡
   ======================================== */

/* 桌面端：优化背景光晕 - 更精致、更有氛围感 */
html body::before {
    background: 
        /* 左上角紫色光晕 - 扩大范围、柔化边缘、降低饱和度 */
        radial-gradient(ellipse 100% 75% at 0% 0%, 
            rgba(102, 126, 234, 0.14) 0%, 
            rgba(102, 126, 234, 0.07) 25%, 
            rgba(102, 126, 234, 0.03) 50%, 
            rgba(102, 126, 234, 0.01) 70%, 
            transparent 85%),
        /* 右上角青色光晕 - 扩大范围、柔化边缘、降低饱和度 */
        radial-gradient(ellipse 100% 75% at 100% 0%, 
            rgba(0, 212, 255, 0.12) 0%, 
            rgba(0, 212, 255, 0.06) 25%, 
            rgba(0, 212, 255, 0.025) 50%, 
            rgba(0, 212, 255, 0.008) 70%, 
            transparent 85%),
        /* 底部中间淡紫色光晕 - 增加深度感和整体氛围感 */
        radial-gradient(ellipse 90% 60% at 50% 100%, 
            rgba(102, 126, 234, 0.04) 0%, 
            rgba(102, 126, 234, 0.015) 40%, 
            transparent 70%) !important;
}

/* 移动端：优化背景光晕 - 扩大范围、降低饱和度、延伸到导航栏后、增加深度感 */
@media (max-width: 768px) {
    html body::before {
        background: 
            /* 顶部左侧紫色光晕 - 大幅扩大范围、降低饱和度、更柔和高级 */
            radial-gradient(ellipse 150% 100% at 20% -20%, 
                rgba(102, 126, 234, 0.12) 0%, 
                rgba(102, 126, 234, 0.06) 30%, 
                rgba(102, 126, 234, 0.02) 55%, 
                rgba(102, 126, 234, 0.008) 75%,
                transparent 90%),
            /* 顶部右侧青色光晕 - 大幅扩大范围、降低饱和度、更柔和高级 */
            radial-gradient(ellipse 150% 95% at 80% -20%, 
                rgba(0, 212, 255, 0.10) 0%, 
                rgba(0, 212, 255, 0.05) 30%, 
                rgba(0, 212, 255, 0.018) 55%, 
                rgba(0, 212, 255, 0.006) 75%,
                transparent 90%),
            /* 中间过渡层 - 增加深度感，让光晕更有层次 */
            radial-gradient(ellipse 80% 40% at 50% 30%, 
                rgba(102, 126, 234, 0.02) 0%, 
                transparent 60%),
            /* 底部淡紫色光晕 - 增加深度感和整体氛围感 */
            radial-gradient(ellipse 120% 60% at 50% 110%, 
                rgba(102, 126, 234, 0.04) 0%, 
                rgba(102, 126, 234, 0.015) 40%, 
                transparent 75%) !important;
    }
}

/* 小屏移动端 */
@media (max-width: 480px) {
    html body::before {
        background: 
            /* 顶部主光晕 - 小屏调整，更集中但更柔和 */
            radial-gradient(ellipse 150% 55% at 50% 0%, 
                rgba(102, 126, 234, 0.18) 0%, 
                rgba(102, 126, 234, 0.09) 20%, 
                rgba(102, 126, 234, 0.03) 45%, 
                transparent 70%),
            /* 底部淡光晕 - 增加深度感 */
            radial-gradient(ellipse 120% 45% at 50% 100%, 
                rgba(0, 212, 255, 0.06) 0%, 
                rgba(0, 212, 255, 0.02) 40%, 
                transparent 65%) !important;
    }
}

/* ========================================
   Hero区域优化 - 参考pansou1的大气感
   优化点：增加宽度、增加内边距、添加底部边框、整体更大气
   ======================================== */

/* 桌面端：Hero容器优化 */
html body .home-container,
html body #app .home-container {
    max-width: 1200px !important; /* 从900px增加到1200px，更大气 */
    padding: 80px 20px 60px 20px !important; /* 上80px，下60px，更有呼吸感 */
    margin: 0 auto !important;
    position: relative !important;
    /* 添加底部边框，和下面内容区分更清晰 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* 桌面端：搜索框容器加宽 */
html body .search-box-wrapper,
html body #app .search-box-wrapper {
    max-width: 650px !important; /* 从600px增加到650px，更醒目 */
}

/* 桌面端：大家都在搜模块调整 - 和搜索框宽度一致 */
html body .hot-keywords,
html body #app .hot-keywords {
    max-width: 650px !important; /* 和搜索框宽度一致 */
    margin: 24px auto 0 auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 移动端：Hero容器优化 - 增加高度和间距，更大气更有冲击力 */
@media (max-width: 768px) {
    html body .home-container,
    html body #app .home-container {
        max-width: 100% !important; /* 移动端全屏宽 */
        padding: 0px 16px 50px 16px !important; /* 上0px，下50px（从30px增加到50px），底部更多留白 */
        margin-top: -34px !important; /* 负margin让整个区域再往上移动34px，保持顶部位置 */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
    
    /* 移动端搜索框宽度保持全宽 */
    html body .search-box-wrapper,
    html body #app .search-box-wrapper {
        max-width: 100% !important;
    }
    
    /* 移动端大家都在搜 - 和搜索框宽度一致，两边各1px边距 */
    html body .hot-keywords,
    html body #app .hot-keywords {
        max-width: none !important;
        width: calc(100% - 2px) !important; /* 两边各1px留白，和搜索框对齐 */
        margin: -14px auto 0 auto !important; /* 往上移动约38px（一厘米），从24px改成-14px */
        box-sizing: border-box !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 3px !important; /* 标签间距再缩短一点，更紧凑 */
    }
    
    /* 移动端大家都在搜标题居中 */
    html body .hot-keywords-label,
    html body #app .hot-keywords-label,
    html body .hot-search-label,
    html body #app .hot-search-label {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin-top: 6px !important; /* 标题往下移动一点点 */
    }
    
    /* 移动端大家都在搜标签样式优化 */
    html body .hot-keyword,
    html body #app .hot-keyword {
        padding: 6px 12px !important; /* 保持标签内边距 */
        font-size: 12px !important; /* 保持合适的字体大小 */
        line-height: 1.4 !important;
        margin: 0 !important; /* 清除原有的margin，用gap控制间距 */
        white-space: nowrap !important; /* 防止文字换行，确保每个标签作为整体 */
        flex-shrink: 0 !important; /* 防止标签被压缩 */
    }
}

/* 小屏移动端：Hero容器优化 */
@media (max-width: 480px) {
    html body .home-container,
    html body #app .home-container {
        padding: 25px 14px 32px 14px !important; /* 顶部内边距从50px减到25px，内容整体上移 */
    }
}

/* ========================================
   每日更新列表优化样式
   版本：1.0
   说明：卡片式设计、精致化排名标签、虚线分割、日期显示等
   ======================================== */

/* 整体卡片容器 */
html body .latest-section.daily-update-section {
    background: rgba(26, 26, 36, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    margin-bottom: 32px;
    transition: all 0.2s ease;
}

/* 头部区域 */
html body .daily-update-header {
    margin-bottom: 20px;
}

/* 标题样式 */
html body .daily-update-title {
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8px;
}

html body .daily-update-title::before {
    content: '⚡';
    font-size: 18px;
}

/* 分类标签容器 */
html body .daily-update-tabs {
    display: flex;
    gap: 8px;
}

/* 分类标签 - 默认状态 */
html body .daily-update-tab {
    padding: 6px 16px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

html body .daily-update-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(102, 126, 234, 0.3);
}

/* 分类标签 - 选中状态（渐变胶囊） */
html body .daily-update-tab.active {
    color: #ffffff;
    background: linear-gradient(135deg, #667eea 0%, #00d4ff 100%);
    border: none;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.35);
    font-weight: 500;
}

/* 列表容器 */
html body .daily-update-list {
    margin-bottom: 20px;
}

/* 列表项 */
html body .daily-update-item {
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease;
    position: relative;
}

html body .daily-update-item:last-child {
    border-bottom: none;
}

/* 列表项hover效果 */
html body .daily-update-item:hover {
    background: rgba(102, 126, 234, 0.06);
    border-radius: 8px;
}

/* 排名标签 */
html body .item-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 前3名排名标签 - 橙色渐变 */
html body .daily-update-item:nth-child(1) .item-index,
html body .daily-update-item:nth-child(2) .item-index,
html body .daily-update-item:nth-child(3) .item-index {
    color: #ffffff;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
}

/* 第1名特殊样式 */
html body .daily-update-item:nth-child(1) .item-index {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
}

/* 标题链接 */
html body .item-title {
    flex: 1;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s ease;
}

html body .item-title:hover {
    color: #667eea;
}

/* 日期显示 */
html body .item-date {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
    margin-left: 12px;
    font-family: 'Courier New', monospace;
}

/* 底部区域 */
html body .daily-update-footer {
    text-align: center;
    padding-top: 8px;
}

/* 查看更多按钮 */
html body .daily-update-more-btn {
    display: inline-block;
    padding: 10px 32px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

html body .daily-update-more-btn:hover {
    color: #ffffff;
    background: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.4);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}

/* ========================================
   每日更新列表 - 移动端适配
   ======================================== */

@media (max-width: 768px) {
    /* 使用最高优先级选择器，确保能覆盖桌面端的48px样式 */
    html body #app .latest-section.daily-update-section,
    html body #app #latestSection.latest-section.daily-update-section,
    html body .latest-section.daily-update-section,
    html body #latestSection.latest-section.daily-update-section {
        padding: 16px !important;
        border-radius: 12px !important;
        margin-bottom: 24px !important;
        margin-top: -10px !important; /* 继续往上移动，用负margin，最高优先级确保生效 */
    }
    
    html body .daily-update-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
        margin-bottom: 16px;
    }
    
    html body .daily-update-title {
        font-size: 18px;
    }
    
    html body .daily-update-tabs {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    
    html body .daily-update-tab {
        padding: 5px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
    
    html body .daily-update-item {
        padding: 10px 4px;
    }
    
    html body .item-index {
        min-width: 24px;
        height: 20px;
        font-size: 11px;
        margin-right: 10px;
    }
    
    html body .item-title {
        font-size: 14px;
    }
    
    html body .item-date {
        font-size: 12px;
        margin-left: 8px;
    }
    
    html body .daily-update-more-btn {
        padding: 8px 28px;
        font-size: 13px;
    }
}

/* 小屏移动端 */
@media (max-width: 480px) {
    html body .latest-section.daily-update-section {
        padding: 14px;
    }
    
    html body .daily-update-title {
        font-size: 16px;
    }
    
    html body .item-title {
        font-size: 13px;
    }
    
    html body .item-date {
        font-size: 11px;
    }
}


/* ========================================
   每日更新列表 - 强制覆盖样式（优先级加强）
   ======================================== */

/* 强制虚线分割线 */
html body #dailyUpdateList .daily-update-item {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
}

html body #dailyUpdateList .daily-update-item:last-child {
    border-bottom: none !important;
}

/* 强制卡片背景和圆角 */
html body #latestSection.latest-section.daily-update-section {
    background: rgba(26, 26, 36, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* 强制排名标签样式 */
html body #dailyUpdateList .item-index {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 22px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

/* 前3名强制橙色渐变 */
html body #dailyUpdateList .daily-update-item:nth-child(1) .item-index,
html body #dailyUpdateList .daily-update-item:nth-child(2) .item-index,
html body #dailyUpdateList .daily-update-item:nth-child(3) .item-index {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa502 100%) !important;
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3) !important;
}

/* 强制日期样式 */
html body #dailyUpdateList .item-date {
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.4) !important;
    flex-shrink: 0 !important;
    margin-left: 12px !important;
    font-family: 'Courier New', monospace !important;
}

/* 强制列表项hover效果 */
/* ========================================
   桌面端布局优化 - 对齐pansou1的大气感
   版本：1.1
   说明：加大Hero区域、调整间距、减轻字重、加宽内容
   注意：使用高优先级选择器，确保能覆盖原有样式
   ======================================== */

@media (min-width: 769px) {
    /* ===== 1. Hero容器加大 ===== */
    html body #app .home-container,
    html body .home-container {
        max-width: 1300px !important; /* 从1200px加宽到1300px，更舒展 */
        padding: 40px 20px 60px 20px !important; /* 上40px，下60px，顶部再往上移动10px，更接近pansou1 */
    }

    /* ===== 2. 顶部小标签加大 ===== */
    html body #app .search-section .hero-badge,
    html body .search-section .hero-badge,
    html body #app .hero-badge,
    html body .hero-badge {
        margin-bottom: 24px !important; /* 从20px增加到24px */
    }

    html body #app .search-section .hero-badge span,
    html body .search-section .hero-badge span,
    html body #app .hero-badge span,
    html body .hero-badge span {
        padding: 6px 16px !important; /* 从4px 14px加大 */
        font-size: 13px !important; /* 从12px加大到13px */
    }

    /* ===== 3. 主标题加大、字重调整 ===== */
    /* 使用和原样式相同的高优先级选择器，确保能覆盖 */
    html body #app .search-section .hero-title-main,
    html body .search-section .hero-title-main,
    html body #app .hero-title-main,
    html body .hero-title-main {
        font-size: 48px !important; /* 从32px大幅加大，对齐pansou1的大气感 */
        font-weight: 600 !important; /* 从600保持或调整 */
        margin-bottom: 8px !important; /* 从12px减小，主副标题更紧凑 */
        line-height: 1.2 !important; /* 更紧凑 */
    }

    /* ===== 4. 副标题加大、字重减轻 ===== */
    /* 使用和原样式相同的高优先级选择器，确保能覆盖 */
    html body #app .search-section .hero-title-sub,
    html body .search-section .hero-title-sub,
    html body #app .hero-title-sub,
    html body .hero-title-sub {
        font-size: 56px !important; /* 从46px加大到56px，更有冲击力 */
        font-weight: 700 !important; /* 从800减轻到700，更精致不粗笨 */
        margin-bottom: 20px !important; /* 保持20px */
        line-height: 1.1 !important; /* 更紧凑 */
    }

    /* ===== 5. 描述文字加大 ===== */
    html body #app .search-section .hero-desc,
    html body .search-section .hero-desc,
    html body #app .hero-desc,
    html body .hero-desc {
        font-size: 16px !important; /* 从14px加大到16px */
        margin-bottom: 40px !important; /* 增加底部间距，和搜索框距离更大 */
    }

    /* ===== 6. 搜索框加宽 ===== */
    html body #app .search-section .search-box-wrapper,
    html body .search-section .search-box-wrapper,
    html body #app .search-box-wrapper,
    html body .search-box-wrapper {
        max-width: 650px !important; /* 从700px收窄到650px，更精致不笨重 */
    }

    /* ===== 7. 大家都在搜间距调整 ===== */
    html body .hot-keywords,
    html body #app .hot-keywords {
        max-width: 700px !important; /* 和搜索框宽度一致 */
        margin: 28px auto 0 auto !important; /* 增加呼吸感 */
    }
}

/* ===== 8. 每日更新卡片加宽 ===== */
html body .latest-section.daily-update-section,
html body #latestSection.latest-section.daily-update-section {
    max-width: 1300px !important; /* 加宽到1300px，和Hero区域对齐 */
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 28px !important; /* 从24px增加到28px，内边距更大 */
    margin-top: 48px !important; /* 增加顶部间距 */
    margin-bottom: 40px !important; /* 增加底部间距 */
}

/* 每日更新列表项高度增加 */
html body .daily-update-item,
html body #dailyUpdateList .daily-update-item {
    padding: 14px 10px !important; /* 从12px 8px增加，更高更舒展 */
}

html body #dailyUpdateList .daily-update-item:hover {
    background: rgba(102, 126, 234, 0.06) !important;
    border-radius: 8px !important;
}


/* ===== 9. 移动端每日更新容器精致化优化 ===== */
@media (max-width: 768px) {
    /* 整体容器调淡，更通透更克制 */
    html body #app .latest-section.daily-update-section,
    html body #app #latestSection.latest-section.daily-update-section,
    html body .latest-section.daily-update-section,
    html body #latestSection.latest-section.daily-update-section {
        background: rgba(26, 26, 36, 0.45) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        border: 1px solid rgba(255, 255, 255, 0.035) !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    }
}

/* 小屏移动端 */
@media (max-width: 480px) {
    html body #app .latest-section.daily-update-section,
    html body #app #latestSection.latest-section.daily-update-section,
    html body .latest-section.daily-update-section,
    html body #latestSection.latest-section.daily-update-section {
        background: rgba(26, 26, 36, 0.4) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        border: 1px solid rgba(255, 255, 255, 0.03) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
}