/* ========== Mandokin 主题样式 ========== */


/* 紫金配色，深色/浅色模式，毛玻璃卡片 */





:root {


    /* 深色模式（默认） */


    --bg-primary: #1a0a2e;


    --bg-secondary: rgba(45, 27, 78, 0.6);


    --bg-card: rgba(45, 27, 78, 0.5);


    --bg-card-hover: rgba(60, 35, 100, 0.7);


    --bg-sidebar: rgba(26, 10, 46, 0.95);


    --bg-input: rgba(45, 27, 78, 0.6);


    --text-primary: #ffffff;


    --text-secondary: #c4b5fd;


    --text-muted: #9ca3af;


    --border-color: rgba(212, 175, 55, 0.3);


    --border-hover: rgba(212, 175, 55, 0.6);


    --accent-gold: #d4af37;


    --accent-gold-light: #f0d77a;


    --accent-purple: #8b5cf6;


    --accent-purple-light: #a78bfa;


    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);


    --shadow-hover: 0 8px 30px rgba(139, 92, 246, 0.3);


    --radius-card: 12px;


    --radius-btn: 8px;


    --sidebar-width: 220px;


    --transition: all 0.3s ease;


}





[data-theme="light"] {


    --bg-primary: #f5f3ff;


    --bg-secondary: rgba(255, 255, 255, 0.8);


    --bg-card: rgba(255, 255, 255, 0.9);


    --bg-card-hover: rgba(245, 243, 255, 1);


    --bg-sidebar: rgba(255, 255, 255, 0.98);


    --bg-input: rgba(255, 255, 255, 0.9);


    --text-primary: #1f1635;


    --text-secondary: #6d28d9;


    --text-muted: #6b7280;


    --border-color: rgba(139, 92, 246, 0.2);


    --border-hover: rgba(139, 92, 246, 0.5);


    --shadow-card: 0 2px 12px rgba(139, 92, 246, 0.1);


    --shadow-hover: 0 6px 24px rgba(139, 92, 246, 0.2);


}





* { margin: 0; padding: 0; box-sizing: border-box; }





body {


    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;


    background: var(--bg-primary);


    color: var(--text-primary);


    line-height: 1.6;


    transition: var(--transition);


    min-height: 100vh;


}





a { color: inherit; text-decoration: none; transition: var(--transition); }


img { max-width: 100%; display: block; }


button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }





/* 加载进度条 */


#loading-bar {


    position: fixed; top: 0; left: 0; height: 3px; width: 0;


    background: linear-gradient(90deg, var(--accent-gold), var(--accent-purple));


    z-index: 9999; transition: width 0.3s;


}





/* 布局 */


.site-wrapper {


    display: flex; min-height: 100vh;


}





/* ========== 侧边栏 ========== */


.site-sidebar {


    width: var(--sidebar-width);


    background: var(--bg-sidebar);


    backdrop-filter: blur(10px);


    border-right: 1px solid var(--border-color);


    position: fixed; top: 0; left: 0; bottom: 0;


    display: flex; flex-direction: column;


    z-index: 100; transition: var(--transition);


    overflow-y: auto;


}


.site-sidebar::-webkit-scrollbar { width: 4px; }


.site-sidebar::-webkit-scrollbar-thumb { background: var(--accent-purple); border-radius: 2px; }





.sidebar-header {


    padding: 14px 10px; display: flex; align-items: flex-start; justify-content: space-between;


    border-bottom: 1px solid var(--border-color); gap: 6px;


}


.sidebar-logo-wrap { flex: 1; min-width: 0; }


.sidebar-logo { display: flex; align-items: center; gap: 10px; min-width: 0; line-height: 1; }


.logo-img { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; flex-shrink: 0; }


.logo-text-group { display: flex; flex-direction: column; gap: 3px; min-width: 0; }


.logo-text { font-size: 18px; font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--accent-gold), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.logo-subtitle { font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0.5px; }


.sidebar-toggle { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; font-size: 12px; margin-top: 8px; }


.sidebar-toggle:hover { background: var(--bg-card-hover); color: var(--accent-gold); }





.sidebar-nav { flex: 1; padding: 12px 8px; overflow-y: auto; overflow-x: hidden; }


.sidebar-nav::-webkit-scrollbar { width: 4px; }


.sidebar-nav::-webkit-scrollbar-track { background: transparent; }


.sidebar-nav::-webkit-scrollbar-thumb { background: var(--accent-purple); border-radius: 2px; }


.sidebar-nav .nav-item {


    display: flex; align-items: center; gap: 10px;


    padding: 10px 12px; border-radius: 8px; margin-bottom: 4px;


    color: var(--text-secondary); font-size: 14px; transition: var(--transition);


    position: relative; justify-content: flex-start;


}


.sidebar-nav .nav-item i { width: 18px; text-align: center; font-size: 15px; flex-shrink: 0; }


.sidebar-nav .nav-item .nav-custom-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; border-radius: 4px; }


.sidebar-nav .nav-item span { flex: 1; text-align: left; }


.sidebar-nav .nav-count { display: none; }


.sidebar-nav .nav-item:hover { background: var(--bg-card-hover); color: var(--accent-gold); transform: translateX(4px); }


.sidebar-nav .nav-item.active { background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(212, 175, 55, 0.1)); color: var(--accent-gold); border-left: 3px solid var(--accent-gold); }





/* 侧边栏父子分类 */


.nav-group { margin-bottom: 2px; }


.nav-item-wrap { display: flex; align-items: center; }


.nav-item-wrap .nav-item { flex: 1; margin-bottom: 0; }


.nav-expand-btn {


    width: 28px; height: 36px; flex-shrink: 0;


    display: flex; align-items: center; justify-content: center;


    color: var(--text-muted); font-size: 10px;


    border-radius: 0 8px 8px 0; transition: var(--transition);


}


.nav-expand-btn:hover { color: var(--accent-gold); background: var(--bg-card-hover); }


.nav-expand-btn.rotated i { transform: rotate(180deg); }


.sub-nav { display: none; padding-left: 20px; }


.sub-nav.show { display: block; }


.sub-nav-item { font-size: 13px !important; padding: 8px 12px !important; }


.sub-nav-item i { font-size: 13px !important; width: 16px !important; }





.sidebar-footer { padding: 16px; border-top: 1px solid var(--border-color); }


.sidebar-ad { margin-bottom: 12px; }


.sidebar-copyright { font-size: 11px; color: var(--text-muted); text-align: center; line-height: 1.8; }


.sidebar-copyright a { color: var(--accent-purple-light); }





/* 收起状态 */


.site-sidebar.collapsed { width: 64px; }


.site-sidebar.collapsed .logo-text,


.site-sidebar.collapsed .nav-item span,


.site-sidebar.collapsed .nav-count,


.site-sidebar.collapsed .sidebar-copyright,


.site-sidebar.collapsed .sidebar-ad { display: none; }


.site-sidebar.collapsed .sidebar-header { justify-content: center; padding: 20px 8px; }


.site-sidebar.collapsed .nav-item { justify-content: center; padding: 12px; }


.site-sidebar.collapsed + .site-main { margin-left: 64px; }





/* 区块折叠/展开 */


.section-collapse {


    background: transparent; border: none; color: var(--text-muted);


    cursor: pointer; font-size: 14px; padding: 4px 8px; border-radius: 6px;


    transition: all 0.3s ease;


}


.section-collapse:hover { color: var(--accent-gold); background: var(--bg-card-hover); }


.section-collapse.rotated { transform: rotate(180deg); }


.section-content {


    overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease;


    max-height: 5000px; opacity: 1;


}


.section-content.collapsed {


    max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0;


}





/* 移动端 */


.mobile-menu-btn {


    display: none; position: fixed; top: 16px; left: 16px; z-index: 101;


    width: 40px; height: 40px; border-radius: 8px;


    background: var(--bg-card); backdrop-filter: blur(10px);


    border: 1px solid var(--border-color); color: var(--accent-gold);


    font-size: 18px; align-items: center; justify-content: center;


}


.sidebar-overlay {


    display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 99;


}





/* ========== 主内容区 ========== */


.site-main {


    flex: 1; margin-left: var(--sidebar-width);


    padding: 19px 10px 24px 10px; transition: var(--transition);


    min-height: 100vh;


}


.container { max-width: 1400px; margin: 0 auto; }





/* ========== 布局容器 ========== */


.container { width: 100%; max-width: 100%; margin: 0; padding: 0; }





/* ========== 顶部横幅 ========== */


.top-banner {


    width: 100%; height: 114px; margin-bottom: 20px;


    border-radius: 12px; overflow: hidden;


    background: var(--bg-card); border: 1px solid var(--border-color);


    display: flex; align-items: center; justify-content: center;


}


.top-banner img { width: 100%; height: 100%; object-fit: cover; }


.top-banner .banner-placeholder { color: var(--text-muted); font-size: 14px; }





/* ========== 搜索区 ========== */


.search-section { margin-bottom: 140px; position: relative; }


.search-engines {


    display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;


}


.search-engine-btn {


    display: flex; align-items: center; gap: 6px;


    padding: 6px 14px; border-radius: 20px; font-size: 13px;


    background: var(--bg-card); border: 1px solid var(--border-color);


    color: var(--text-secondary); transition: var(--transition);


}


.search-engine-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }


.search-engine-btn.active {


    background: linear-gradient(135deg, var(--accent-purple), var(--accent-gold));


    color: #fff; border-color: transparent;


}


.search-box {


    position: relative; display: flex; align-items: center;


    background: var(--bg-input); border: 1px solid var(--border-color);


    border-radius: 12px; padding: 0 16px; transition: var(--transition);


    width: 25%; margin: 0 auto;


}


.search-box:focus-within { border-color: var(--accent-gold); box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15); }


.search-icon { color: var(--text-muted); margin-right: 10px; font-size: 16px; }


.search-input {


    flex: 1; background: none; border: none; outline: none;


    padding: 14px 0; color: var(--text-primary); font-size: 15px;


}


.search-input::placeholder { color: var(--text-muted); }


.search-submit {


    padding: 8px 24px; border-radius: 8px; font-size: 14px; font-weight: 600;


    background: linear-gradient(135deg, var(--accent-purple), var(--accent-gold));


    color: #fff; transition: var(--transition);


}


.search-submit:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }


.search-history {


    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);


    width: 100%; margin-top: 2px;


    background: var(--bg-card); border: 1px solid #d4af37;


    border-radius: 12px; padding: 8px; display: none; z-index: 99999;


    box-shadow: var(--shadow-hover);


}


.search-history.show { display: block; }


.search-history-list {


    max-height: 72px; overflow-y: auto;


    scrollbar-width: thin; scrollbar-color: #d4af37 transparent;


    padding-right: 4px;


}


.search-history-list::-webkit-scrollbar { width: 6px; }


.search-history-list::-webkit-scrollbar-track { background: transparent; }


.search-history-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d4af37, #8b5cf6); border-radius: 3px; }


.search-history-item {


    display: flex; align-items: center; gap: 10px; padding: 8px 12px;


    border-radius: 8px; cursor: pointer; color: var(--text-secondary); font-size: 14px;


}


.search-history-item:hover { background: var(--bg-card-hover); color: var(--accent-gold); }


.search-history-item i { color: var(--text-muted); }


.search-history-delete {


    justify-content: center !important;


    color: var(--text-muted) !important;


    font-size: 13px !important;


    margin-top: 6px;


    border-top: 1px solid rgba(212, 175, 55, 0.2);


    border-radius: 0 0 8px 8px !important;


    padding-top: 10px !important;


}


.search-history-delete:hover {


    color: #ef4444 !important;


    background: rgba(239, 68, 68, 0.1) !important;


}


.search-history-delete i {


    color: inherit !important;


}


.search-history-clear {


    text-align: center; padding: 6px 12px; margin-top: 4px;


    font-size: 12px; color: var(--accent-gold); cursor: pointer;


    border: none; border-radius: 6px;


    transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: 6px;


    pointer-events: auto; user-select: none; font-weight: 600;


}


.search-history-clear:hover {


    color: #ef4444;


}





/* 搜索建议下拉框 */


.search-suggest {


    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);


    width: 100%; margin-top: 2px;


    background: var(--bg-card); border: 1px solid #d4af37;


    border-radius: 12px; padding: 0; display: none; z-index: 99999;


    box-shadow: var(--shadow-hover); overflow: hidden;


}


.search-suggest.show { display: block; }


.suggest-header {


    padding: 10px 16px; font-size: 12px; color: var(--text-muted);


    border-bottom: 1px solid var(--border-color);


    display: flex; align-items: center; gap: 6px;


}


.suggest-header i { color: var(--accent-gold); }


.suggest-list, .suggest-list-horizontal { max-height: 135px !important; overflow-y: auto !important; display: flex !important; flex-wrap: wrap !important; gap: 8px; padding: 10px; align-content: flex-start; }


.suggest-list::-webkit-scrollbar { width: 6px; }


.suggest-list::-webkit-scrollbar-thumb { background: var(--accent-purple); border-radius: 3px; }


.suggest-item {


    display: flex; align-items: center; gap: 12px;


    padding: 12px 16px; cursor: pointer; transition: var(--transition);


    border-bottom: 1px solid rgba(139, 92, 246, 0.1);


}


.suggest-item:last-child { border-bottom: none; }


.suggest-item:hover { background: var(--bg-card-hover); }


.suggest-icon {


    width: 32px; height: 32px; border-radius: 8px;


    background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center;


    color: var(--accent-purple-light); font-size: 14px; flex-shrink: 0;


}


.suggest-item:hover .suggest-icon { background: var(--accent-purple); color: #fff; }


.suggest-title { flex: 1; color: var(--text-primary); font-size: 14px; }


.suggest-highlight { color: var(--accent-gold); font-weight: 700; }


.suggest-type {


    font-size: 11px; padding: 2px 8px; border-radius: 10px;


    background: var(--bg-card-hover); color: var(--text-muted); flex-shrink: 0;


}


.suggest-footer {


    padding: 4px 8px; font-size: 11px; color: var(--text-muted);


    text-align: center; display: flex; align-items: center; justify-content: space-between; gap: 6px;


    line-height: 1.2;


}


.suggest-footer .clear-history-btn { cursor: pointer; color: var(--accent-gold); font-size: 11px; display: flex; align-items: center; gap: 3px; transition: var(--transition); }


.suggest-footer .clear-history-btn:hover { color: #ef4444; }


.suggest-footer kbd { padding: 1px 4px; font-size: 10px;


    background: var(--bg-card-hover); padding: 2px 6px; border-radius: 4px;


    border: 1px solid var(--border-color); font-family: monospace;


}


.suggest-empty {


    padding: 24px 16px; text-align: center; color: var(--text-muted); font-size: 14px;


}


.suggest-empty i { margin-right: 6px; color: var(--accent-purple); }





/* 搜索建议横向排列 */


.suggest-list-horizontal { max-height: 135px !important; overflow-y: auto !important; display: flex !important; flex-wrap: wrap !important; gap: 8px; padding: 10px; align-content: flex-start; }


.suggest-item-horizontal { padding: 6px 12px !important; line-height: 1.2 !important;


    flex: 0 0 auto; min-width: 80px; max-width: 180px;


    display: flex; align-items: center; justify-content: center;


    padding: 8px 16px; border-radius: 20px;


    border: 1px solid var(--border-color);


    background: var(--bg-card-hover); cursor: pointer; transition: var(--transition);


    text-align: center;


}


.suggest-item-horizontal:hover {


    background: var(--accent-purple); border-color: var(--accent-gold);


    transform: translateY(-2px);


}


.suggest-item-horizontal .suggest-icon {


    width: 28px; height: 28px; font-size: 13px; border-radius: 6px;


    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(212, 175, 55, 0.2));


    color: #d4af37; display: flex; align-items: center; justify-content: center;


    flex-shrink: 0;


}


.suggest-item-horizontal:hover .suggest-icon { background: rgba(255,255,255,0.2); color: #fff; }


.suggest-item-horizontal .suggest-icon-img {


    object-fit: contain; background: #fff; padding: 2px;


}


.suggest-item-horizontal .suggest-title {


    flex: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;


    max-width: 160px; text-align: center;


}





.top-right-buttons { position: absolute; top: 0; right: 0; z-index: 50; display: flex; gap: 8px; align-items: center; }


.top-right-label {


    font-size: 14px; font-weight: 700;


    background: linear-gradient(135deg, #8b5cf6, #d4af37);


    -webkit-background-clip: text;


    -webkit-text-fill-color: transparent;


    background-clip: text;


    filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.4));


    padding: 6px 12px; border-radius: 20px;


    border: 1px solid rgba(212, 175, 55, 0.3);


    letter-spacing: 1px;


    margin-right: 4px;


    white-space: nowrap;


}


.top-right-ladder-tip {


    font-size: 12px; font-weight: 600;


    color: #f97316;


    padding: 6px 10px; border-radius: 20px;


    background: rgba(249, 115, 22, 0.1);


    border: 1px solid rgba(249, 115, 22, 0.3);


    white-space: nowrap;


    margin-right: 4px;


}


/* 闪烁动画 - 站长通道+三个按钮一起闪 */


.top-right-buttons.blink-animation .top-right-label,


.top-right-buttons.blink-animation .top-btn,


.top-right-buttons.blink-animation #themeToggle {


    animation: blinkGlow 0.8s ease-in-out infinite;


}


@keyframes blinkGlow {


    0%, 100% { 


        opacity: 1; 


        box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);


        transform: scale(1);


    }


    50% { 


        opacity: 0.4; 


        box-shadow: 0 0 25px rgba(212, 175, 55, 0.8), 0 0 40px rgba(139, 92, 246, 0.5);


        transform: scale(1.1);


    }


}


.top-right-buttons.blink-animation .top-right-label {


    animation: blinkLabelGlow 0.8s ease-in-out infinite;


}


@keyframes blinkLabelGlow {


    0%, 100% { 


        opacity: 1; 


        text-shadow: 0 0 10px rgba(212, 175, 55, 0.6), 0 0 20px rgba(212, 175, 55, 0.3);


        transform: scale(1);


    }


    50% { 


        opacity: 0.5; 


        text-shadow: 0 0 20px rgba(212, 175, 55, 1), 0 0 40px rgba(212, 175, 55, 0.6), 0 0 60px rgba(139, 92, 246, 0.4);


        transform: scale(1.15);


    }


}


.top-btn {


    width: 32px; height: 32px; border-radius: 50%;


    background: var(--bg-card); border: 1px solid var(--border-color);


    color: var(--text-secondary); font-size: 13px; transition: var(--transition);


    display: flex; align-items: center; justify-content: center; cursor: pointer;


}


.top-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); transform: translateY(-1px); }


#themeToggle {


    width: 32px; height: 32px; border-radius: 50%;


    background: var(--bg-card); border: 1px solid var(--border-color);


    color: var(--accent-gold); font-size: 13px; transition: var(--transition);


    display: flex; align-items: center; justify-content: center; cursor: pointer;


}


#themeToggle:hover { transform: rotate(20deg); border-color: var(--accent-gold); }





/* 联系方式弹窗 */


.contact-modal {


    display: none; position: fixed; inset: 0; z-index: 10000;


    background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);


    align-items: center; justify-content: center;


}


.contact-modal.show { display: flex; }


.contact-modal-content {


    background: var(--bg-card); border: 1px solid var(--border-color);


    border-radius: 16px; padding: 30px; max-width: 320px; width: 90%;


    text-align: center; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.4);


    animation: modalIn 0.25s ease;


}


@keyframes modalIn { from { opacity: 0; transform: scale(0.9) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }


.contact-close {


    position: absolute; top: 12px; right: 12px;


    width: 28px; height: 28px; border-radius: 50%;


    background: var(--bg-card-hover); border: none; color: var(--text-muted);


    cursor: pointer; display: flex; align-items: center; justify-content: center;


    transition: var(--transition);


}


.contact-close:hover { background: #ef4444; color: #fff; }


.contact-telegram {


    display: flex; align-items: center; justify-content: center; gap: 10px;


    font-size: 20px; font-weight: 700; color: var(--accent-gold); margin-bottom: 20px;


}


.contact-telegram i { font-size: 28px; color: #0088cc; }


.contact-qrcode {


    width: 200px; height: 200px; margin: 0 auto 16px;


    border-radius: 12px; overflow: hidden;


    background: #fff; padding: 10px;


}


.contact-qrcode img { width: 100%; height: 100%; object-fit: contain; }


.contact-text { font-size: 13px; color: var(--text-muted); line-height: 1.6; }


.contact-ladder-tip { font-size: 12px; color: #f97316; margin-top: 10px; padding: 8px 12px; background: rgba(249, 115, 22, 0.1); border-radius: 8px; line-height: 1.5; font-weight: 600; }





/* ========== 区块通用 ========== */


.section-header {


    display: flex; align-items: center; justify-content: space-between;


    margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-color);


}


.section-title {


    font-size: 18px; font-weight: 700; color: var(--accent-gold);


    display: flex; align-items: center; gap: 8px;


}


.section-collapse {


    width: 28px; height: 28px; border-radius: 6px; color: var(--text-muted);


    display: flex; align-items: center; justify-content: center; transition: var(--transition);


}


.section-collapse:hover { background: var(--bg-card-hover); color: var(--accent-gold); }


.section-content.collapsed { display: none; }


.section-collapse.rotated i { transform: rotate(180deg); }





/* ========== 广告位 ========== */


.ad-section { margin: 20px 0; padding: 16px; border-radius: var(--radius-card); background: var(--bg-card); border: 1px dashed var(--border-color); text-align: center; }





/* ========== 热门推荐 ========== */


.hot-section { margin-bottom: 28px; }


.hot-grid {


    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px;


}


.hot-item {


    display: flex; align-items: center; gap: 12px;


    padding: 12px 16px; border-radius: var(--radius-card);


    background: var(--bg-card); border: 1px solid var(--border-color);


    transition: var(--transition); position: relative;


}


.hot-item:hover { border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: var(--shadow-hover); }


.hot-icon {


    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;


    background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center;


    overflow: hidden;


}


.hot-icon img { width: 100%; height: 100%; object-fit: contain; }


.hot-icon i { color: var(--accent-gold); font-size: 18px; }


.hot-info { flex: 1; min-width: 0; }


.hot-name { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; }


.hot-desc { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.copy-link {


    width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;


    color: var(--text-muted); display: flex; align-items: center; justify-content: center;


    opacity: 0; transition: var(--transition);


}


.hot-item:hover .copy-link { opacity: 1; }


.copy-link:hover { background: var(--bg-card-hover); color: var(--accent-gold); }





/* ========== 工具直达 ========== */


.tool-section { margin-bottom: 28px; }


.tool-grid {


    display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 12px;


}


.tool-item {


    display: flex; flex-direction: column; align-items: center; gap: 8px;


    padding: 12px 8px; background: var(--bg-card);


    border: 1px solid var(--border-color); transition: var(--transition);


}


.tool-item:hover { border-color: var(--accent-gold); transform: translateY(-3px); box-shadow: var(--shadow-hover); }


.tool-icon {


    border-radius: 50%; display: flex; align-items: center; justify-content: center;


    color: #fff; font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);


}


.tool-name { font-size: 12px; color: var(--text-secondary); text-align: center; line-height: 1.3; }





/* ========== 工具直达+热门教程 两栏布局 ========== */


.tool-tutorial-section { margin-bottom: 28px; }


.tool-tutorial-row {


    display: grid;


    grid-template-columns: 2fr 1fr;


    gap: 20px;


}


.tool-col {


    background: transparent;


    border: none;


    border-radius: var(--radius-card);


    padding: 16px 0;


    backdrop-filter: none;


}


.tool-col-bordered {


    background: transparent !important;


    border: none !important;


    padding: 16px 0 !important;


    backdrop-filter: none !important;


}


.tutorial-col {


    background: transparent;


    border: none;


    border-radius: var(--radius-card);


    padding: 16px 0;


    backdrop-filter: none;





    margin-top: -189px;}


.tool-col .section-header, .tutorial-col .section-header {


    margin-bottom: 12px; padding-bottom: 10px;


}


.tutorial-more {


    font-size: 12px; color: var(--text-muted);


    text-decoration: none;


    display: flex; align-items: center; gap: 4px;


    transition: var(--transition);


}


.tutorial-more:hover {


    color: var(--accent-gold);


}


/* 紧凑版工具网格 - 2排 */


.tool-grid-compact {


    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));


    gap: 12px;


    max-height: 235px;


    overflow-y: auto;


    padding-top: 8px;


    padding-right: 8px;


}


.tool-grid-compact .tool-item {


    padding: 10px 6px;


    gap: 8px;


}


.tool-grid-compact .tool-icon {


    width: 60px !important;


    height: 60px !important;


    font-size: 24px !important;


}


.tool-grid-compact .tool-name {


    font-size: 13px;


}


/* 热门教程列表 */


.tutorial-content { max-height: 450px; overflow-y: hidden; }


/* 自定义滚动条 - 紫金配色 */


.tutorial-content::-webkit-scrollbar,


.tool-grid-compact::-webkit-scrollbar {


    width: 4px;


}


.tutorial-content::-webkit-scrollbar-track,


.tool-grid-compact::-webkit-scrollbar-track {


    background: transparent;


}


.tutorial-content::-webkit-scrollbar-thumb,


.tool-grid-compact::-webkit-scrollbar-thumb {


    background: linear-gradient(180deg, #8b5cf6, #d4af37);


    border-radius: 4px;


    transition: width 0.3s ease;


}


.tutorial-content::-webkit-scrollbar-thumb:hover,


.tool-grid-compact::-webkit-scrollbar-thumb:hover {


    width: 8px;


    background: linear-gradient(180deg, #d4af37, #8b5cf6);


}


.tutorial-list { display: flex; flex-direction: column; gap: 8px; }


.tutorial-item {


    display: flex; align-items: center; gap: 12px;


    padding: 10px 12px;


    background: var(--bg-card-hover);


    border-radius: 10px;


    border: 1px solid transparent;


    transition: var(--transition);


    text-decoration: none;


}


.tutorial-item:hover {


    border-color: var(--accent-gold);


    background: rgba(139, 92, 246, 0.1);


    transform: translateX(4px);


}


.tutorial-icon {


    width: 40px; height: 40px;


    border-radius: 8px;


    background: linear-gradient(135deg, #8b5cf6, #d4af37);


    display: flex; align-items: center; justify-content: center;


    color: #fff; font-size: 15px;


    flex-shrink: 0;


}


.tutorial-info { flex: 1; min-width: 0; }


.tutorial-title {


    font-size: 14px; font-weight: 600;


    color: var(--text-primary);


    line-height: 1.4;


    display: -webkit-box;


    -webkit-line-clamp: 2;


    -webkit-box-orient: vertical;


    overflow: hidden;


    margin-bottom: 4px;


}


.tutorial-meta {


    display: flex; align-items: center; gap: 12px;


    font-size: 11px; color: var(--text-muted);


}


.tutorial-video-tag {


    background: linear-gradient(135deg, #ef4444, #f97316);


    color: #fff;


    padding: 1px 6px;


    border-radius: 6px;


    font-size: 10px;


    font-weight: 600;


}


.tutorial-article-tag {


    background: linear-gradient(135deg, #10b981, #06b6d4);


    color: #fff;


    padding: 1px 6px;


    border-radius: 6px;


    font-size: 10px;


    font-weight: 600;


}


.empty-tip {


    text-align: center; padding: 30px 20px;


    color: var(--text-muted); font-size: 13px;


}


/* 响应式：小屏幕变上下布局 */


@media (max-width: 900px) {


    .tool-tutorial-row {


        grid-template-columns: 1fr;


    }


}





/* ========== 分类卡片 ========== */


.categories-section { margin-bottom: 28px; }


.category-card {


    background: var(--bg-card); border: 1px solid var(--border-color);


    border-radius: var(--radius-card); margin-bottom: 20px;


    backdrop-filter: blur(10px); transition: var(--transition); overflow: hidden;


}


.category-card:hover { border-color: var(--border-hover); }


.category-header {


    display: flex; align-items: center; gap: 12px;


    padding: 16px 20px; border-bottom: 1px solid var(--border-color);


}


.category-header-right {


    display: flex; align-items: center; gap: 10px;


}


.category-toggle-btn {


    cursor: pointer; user-select: none;


}


.category-toggle-icon {


    font-size: 12px; color: var(--text-muted);


    transition: transform 0.3s ease;


}


.category-card.collapsed .category-toggle-icon {


    transform: rotate(-90deg);


}


.category-card.collapsed .category-content,


.category-card.collapsed .subcat-tabs {


    display: none;


}


.category-title {


    font-size: 16px; font-weight: 700; color: var(--accent-gold);


    display: flex; align-items: center; gap: 8px; flex: 1;


}


.category-count { font-size: 12px; color: var(--text-muted); background: var(--bg-card-hover); padding: 3px 10px; border-radius: 10px; }


.category-content { padding: 16px 20px; }





/* ========== 子分类Tab切换 ========== */


.subcat-tabs {


    display: flex; gap: 4px; padding: 0 20px;


    border-bottom: 1px solid var(--border-color);


    flex-wrap: wrap; align-items: flex-end;


}


.subcat-tab-btn {


    padding: 8px 18px; border-radius: 8px 8px 0 0;


    font-size: 13px; color: var(--text-secondary);


    background: transparent; border: 1px solid transparent;


    border-bottom: none; transition: var(--transition);


    margin-bottom: -1px; font-weight: 500;


}


.subcat-tab-btn:hover { color: var(--accent-gold); background: var(--bg-card-hover); }


.subcat-tab-btn.active {


    background: var(--bg-card); color: var(--accent-gold);


    border-color: var(--border-color); border-bottom-color: var(--bg-card);


    font-weight: 700;


}


.subcat-panel { display: none; animation: fadeIn 0.25s ease; }


.subcat-panel.active { display: block; }


.nav-grid {


    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px;


}


.nav-item {


    display: flex; align-items: center; gap: 10px;


    padding: 10px 12px; border-radius: 8px;


    background: var(--bg-card-hover); border: 1px solid transparent;


    transition: var(--transition); position: relative;


}


.nav-item:hover { border-color: var(--accent-gold); transform: translateY(-2px); box-shadow: var(--shadow-hover); }


.nav-highlight {


    animation: navHighlightPulse 1s ease-in-out 3;


    border-color: var(--accent-gold) !important;


    box-shadow: 0 0 25px rgba(212, 175, 55, 0.7) !important;


}


@keyframes navHighlightPulse {


    0%, 100% { box-shadow: 0 0 15px rgba(212, 175, 55, 0.4); }


    50% { box-shadow: 0 0 30px rgba(212, 175, 55, 0.8); }


}


.nav-icon {


    border-radius: 8px; flex-shrink: 0; position: relative;


    background: var(--bg-card); display: flex; align-items: center; justify-content: center;


    overflow: hidden;


}


.nav-icon img { width: 100%; height: 100%; object-fit: contain; }


.nav-icon i { color: var(--accent-purple); font-size: 16px; }


.hot-badge {


    position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;


    background: #ef4444; border-radius: 50%; display: flex; align-items: center; justify-content: center;


    color: #fff; font-size: 9px;


}


.nav-info { flex: 1; min-width: 0; }


.nav-name { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }


.nav-desc { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }





/* ========== 文章列表 ========== */


.articles-section { margin-bottom: 28px; }


.articles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }


.article-card {


    background: var(--bg-card); border: 1px solid var(--border-color);


    border-radius: var(--radius-card); overflow: hidden; transition: var(--transition);


}


.article-card:hover { border-color: var(--accent-gold); transform: translateY(-3px); box-shadow: var(--shadow-hover); }


.article-link { display: block; padding: 20px; }


.article-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-muted); margin-bottom: 12px; flex-wrap: wrap; align-items: center; }


.article-meta span { display: inline-flex; align-items: center; }


.article-meta a { color: var(--text-muted); }


.article-meta a:hover { color: var(--accent-gold); }


.article-meta i { margin-right: 4px; }


.article-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; line-height: 1.5; word-break: break-word; }


.article-excerpt { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; line-height: 1.7; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


.article-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); }


.article-views { color: var(--text-muted); display: flex; align-items: center; gap: 4px; }


.article-more { color: var(--accent-gold); font-weight: 600; display: flex; align-items: center; gap: 4px; }





/* ========== 视频专区 ========== */


.video-section { margin-bottom: 28px; }


.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }


.video-card {


    background: var(--bg-card); border: 1px solid var(--border-color);


    border-radius: var(--radius-card); overflow: hidden; transition: var(--transition);


}


.video-card:hover { border-color: var(--accent-gold); transform: translateY(-3px); box-shadow: var(--shadow-hover); }


.video-link { display: block; }


.video-thumb {


    position: relative; aspect-ratio: 16/9;


    background: linear-gradient(135deg, var(--accent-purple), var(--bg-card-hover));


    display: flex; align-items: center; justify-content: center;


}


.video-play {


    width: 56px; height: 56px; border-radius: 50%;


    background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;


    color: var(--accent-purple); font-size: 20px; padding-left: 4px;


}


.video-title { padding: 14px 16px; font-size: 14px; font-weight: 600; color: var(--text-primary); }





/* ========== 文章详情页 ========== */


.post-detail {


    background: var(--bg-card); border: 1px solid var(--border-color);


    border-radius: var(--radius-card); padding: 32px; margin-bottom: 24px;


}


.post-header { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }


.post-meta { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; flex-wrap: wrap; }


.post-meta i { margin-right: 4px; }


.post-video-tag {


    background: linear-gradient(135deg, #ef4444, #f97316);


    color: #fff;


    padding: 2px 10px;


    border-radius: 10px;


    font-size: 11px;


    font-weight: 600;


}


.post-title { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1.3; margin-bottom: 10px; }


.post-desc { font-size: 15px; color: var(--text-secondary); }


.video-player { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 12px; margin-bottom: 24px; }


.video-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }


.post-content { font-size: 15px; line-height: 1.8; color: var(--text-primary); }


.post-content h1, .post-content h2, .post-content h3 { margin: 20px 0 12px; color: var(--accent-gold); }


.post-content p { margin-bottom: 14px; }


.post-content a { color: var(--accent-purple-light); border-bottom: 1px dashed var(--accent-purple); }


.post-content img { border-radius: 8px; margin: 12px 0; cursor: pointer; }


.post-content pre { background: var(--bg-card-hover); padding: 16px; border-radius: 8px; overflow-x: auto; margin: 14px 0; border: 1px solid var(--border-color); }


.post-content code { font-family: 'Consolas', monospace; font-size: 13px; }


.post-content blockquote { border-left: 4px solid var(--accent-gold); padding: 10px 16px; margin: 14px 0; background: var(--bg-card-hover); border-radius: 0 8px 8px 0; }


.post-tags { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); }


.post-tags a { display: inline-block; padding: 4px 12px; margin: 4px 6px 4px 0; background: var(--bg-card-hover); border-radius: 14px; font-size: 12px; color: var(--accent-purple-light); }


.post-share { margin-top: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }


.post-share span { color: var(--text-muted); font-size: 13px; }


.share-btn {


    padding: 6px 14px; border-radius: 16px; font-size: 12px;


    background: var(--bg-card-hover); border: 1px solid var(--border-color);


    color: var(--text-secondary); transition: var(--transition);


}


.share-btn:hover { border-color: var(--accent-gold); color: var(--accent-gold); }





/* 微信分享弹窗 */


.wechat-share-modal {


    position: fixed;


    top: 0; left: 0; right: 0; bottom: 0;


    background: rgba(0,0,0,0.7);


    display: flex;


    align-items: center;


    justify-content: center;


    z-index: 9999;


}


.wechat-share-content {


    background: var(--bg-card);


    border: 1px solid var(--border-color);


    border-radius: 16px;


    padding: 30px;


    text-align: center;


    position: relative;


    max-width: 320px;


}


.wechat-close {


    position: absolute;


    top: 12px; right: 12px;


    background: none;


    border: none;


    color: var(--text-muted);


    font-size: 18px;


    cursor: pointer;


}


.wechat-share-content h3 {


    color: var(--text-primary);


    margin-bottom: 16px;


    font-size: 18px;


}


.wechat-qrcode {


    width: 200px;


    height: 200px;


    margin: 0 auto 16px;


    background: #fff;


    border-radius: 8px;


    display: flex;


    align-items: center;


    justify-content: center;


}


.wechat-qrcode img {


    width: 100%;


    height: 100%;


    border-radius: 8px;


}


.wechat-share-content p {


    color: var(--text-muted);


    font-size: 13px;


}


.post-nav { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border-color); gap: 16px; }


.post-nav a { flex: 1; padding: 12px 16px; background: var(--bg-card-hover); border-radius: 8px; font-size: 13px; color: var(--text-secondary); }


.post-nav a:hover { color: var(--accent-gold); }


.post-nav-prev { text-align: left; }


.post-nav-next { text-align: right; }





/* ========== 搜索结果/归档 ========== */


.search-result-header, .archive-header { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); }


.search-result-title, .archive-title { font-size: 22px; font-weight: 700; color: var(--accent-gold); margin-bottom: 6px; }


.search-result-count, .archive-count { font-size: 13px; color: var(--text-muted); }


.search-result-list, .archive-list { display: flex; flex-direction: column; gap: 12px; }


.search-result-item, .archive-item {


    display: flex; align-items: center; gap: 14px;


    padding: 16px 20px; border-radius: var(--radius-card);


    background: var(--bg-card); border: 1px solid var(--border-color); transition: var(--transition);


}


.search-result-item:hover, .archive-item:hover { border-color: var(--accent-gold); transform: translateX(4px); }


.search-result-icon, .archive-icon {


    border-radius: 8px; flex-shrink: 0;


    background: var(--bg-card-hover); display: flex; align-items: center; justify-content: center;


    overflow: hidden; position: relative;


}


.search-result-icon img, .archive-icon img { width: 100%; height: 100%; object-fit: contain; }


.search-result-icon i, .archive-icon i { color: var(--accent-purple); }


.search-result-info, .archive-info { flex: 1; min-width: 0; }


.search-result-name, .archive-name { font-size: 15px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }


.search-result-desc, .archive-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 6px; }


.search-result-meta, .archive-meta { display: flex; gap: 14px; font-size: 11px; color: var(--text-muted); }


.search-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }


.search-empty i { font-size: 48px; margin-bottom: 16px; color: var(--accent-purple); }


.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }


.pagination a, .pagination span { padding: 8px 14px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border-color); font-size: 13px; color: var(--text-secondary); }


.pagination a:hover { border-color: var(--accent-gold); color: var(--accent-gold); }





/* ========== 404页面 ========== */


.error-page { text-align: center; padding: 60px 20px; }


.error-image { margin-bottom: 24px; }


.error-image img { max-width: 300px; margin: 0 auto; }


.error-code { font-size: 120px; font-weight: 900; background: linear-gradient(135deg, var(--accent-gold), var(--accent-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }


.error-text { font-size: 24px; font-weight: 700; color: var(--accent-gold); margin-bottom: 8px; }


.error-desc { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }


.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


.btn { padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; transition: var(--transition); display: inline-flex; align-items: center; gap: 6px; }


.btn-primary { background: linear-gradient(135deg, var(--accent-purple), var(--accent-gold)); color: #fff; }


.btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }


.btn-secondary { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-secondary); }


.btn-secondary:hover { border-color: var(--accent-gold); color: var(--accent-gold); }





/* ========== 页脚 ========== */


.site-footer {


    margin-left: var(--sidebar-width); padding: 24px 32px;


    border-top: 1px solid var(--border-color); text-align: center;


    font-size: 12px; color: var(--text-muted); line-height: 2;


}


.site-footer a { color: var(--accent-purple-light); }


.footer-theme { margin-top: 4px; }





/* ========== 回到顶部 ========== */


.back-to-top {


    position: fixed; bottom: 32px; right: 32px; width: 44px; height: 44px;


    border-radius: 50%; background: linear-gradient(135deg, var(--accent-purple), var(--accent-gold));


    color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center;


    opacity: 0; visibility: hidden; transform: translateY(20px); transition: var(--transition);


    z-index: 90; box-shadow: var(--shadow-card);


}


.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }


.back-to-top:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }





/* ========== 图片灯箱 ========== */


.lightbox {


    position: fixed; inset: 0; background: rgba(0,0,0,0.85); z-index: 9998;


    display: none; align-items: center; justify-content: center; padding: 40px;


}


.lightbox.show { display: flex; }


.lightbox img { max-width: 90%; max-height: 90%; border-radius: 8px; }


.lightbox-close {


    position: absolute; top: 20px; right: 20px; width: 40px; height: 40px;


    border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff;


    font-size: 18px; display: flex; align-items: center; justify-content: center;


}





/* ========== 页面淡入动画 ========== */


.site-main > .container > section,


.site-main > .container > article {


    animation: fadeIn 0.4s ease both;


}


.site-main > .container > section:nth-child(1) { animation-delay: 0.05s; }


.site-main > .container > section:nth-child(2) { animation-delay: 0.1s; }


.site-main > .container > section:nth-child(3) { animation-delay: 0.15s; }


.site-main > .container > section:nth-child(4) { animation-delay: 0.2s; }


@keyframes fadeIn {


    from { opacity: 0; }


    to { opacity: 1; }


}





/* ========== 响应式 ========== */


@media (max-width: 1024px) {


    .site-sidebar { transform: translateX(-100%); }


    .site-sidebar.open { transform: translateX(0); }


    .site-main { margin-left: 0; padding: 16px; }


    .mobile-menu-btn { display: flex; }


    .sidebar-overlay.show { display: block; }


    .site-footer { margin-left: 0; padding: 16px; }


    .theme-toggle { position: static; margin-bottom: 12px; text-align: right; }


    .search-section { padding-top: 56px; }


    /* 平板适配 - 覆盖桌面端的固定宽度和左边距 */


    .search-section .search-engines,


    section.search-section .search-engines,


    body .search-engines,


    .search-engines {


        margin-left: 0 !important;


        justify-content: center !important;


        width: 100% !important;


    }


    .search-section .search-box,


    section.search-section .search-box,


    body .search-box,


    .search-box {


        margin-left: auto !important;


        margin-right: auto !important;


        float: none !important;


        width: 60% !important;


        max-width: 600px !important;


        display: flex !important;


        justify-content: center !important;


    }


    .search-section .cdk-inline,


    section.search-section .cdk-inline,


    body .cdk-inline,


    .cdk-inline {


        margin-left: auto !important;


        margin-right: auto !important;


        float: none !important;


        display: block !important;


        width: 60% !important;


        max-width: 600px !important;


    }


    .search-section {


        text-align: center !important;


        margin-left: 0 !important;


        padding-left: 0 !important;


    }


    .tutorial-col { margin-top: 0 !important; }


    .tool-tutorial-row { gap: 16px; }


}





@media (max-width: 768px) {


    .nav-grid { grid-template-columns: 1fr; }


    .hot-grid { grid-template-columns: 1fr; }


    .tool-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }


    .articles-grid { grid-template-columns: 1fr; }


    .video-grid { grid-template-columns: 1fr; }


    .post-detail { padding: 20px 16px; }


    .post-title { font-size: 22px; }


    .search-result-item, .archive-item { flex-direction: column; text-align: center; }


    .post-nav { flex-direction: column; }


    .back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; }


    /* 移动端搜索框覆盖桌面端的固定宽度和左边距（用更具体的选择器） */


    .search-section .search-engines,


    section.search-section .search-engines,


    body .search-engines,


    .search-engines {


        margin-left: 0 !important;


        justify-content: center !important;


        width: 100% !important;


        text-align: center !important;


    }


    .search-section .search-box,


    section.search-section .search-box,


    body .search-box,


    .search-box {


        margin-left: auto !important;


        margin-right: auto !important;


        float: none !important;


        width: calc(100% - 24px) !important;


        max-width: calc(100% - 24px) !important;


        display: flex !important;


        justify-content: center !important;


    }


    .search-box input[type="text"],


    .search-box input[type="search"] {


        width: 100% !important;


        max-width: 100% !important;


        float: none !important;


    }


    .search-section .cdk-inline,


    section.search-section .cdk-inline,


    body .cdk-inline,


    .cdk-inline {


        margin-left: auto !important;


        margin-right: auto !important;


        float: none !important;


        display: block !important;


        width: calc(100% - 24px) !important;


        max-width: calc(100% - 24px) !important;


    }


    .search-section {


        text-align: center !important;


        margin-left: 0 !important;


        padding-left: 0 !important;


    }


    /* 移动端分类默认折叠 */


    .category-card .category-content,


    .category-card .subcat-tabs {


        display: none;


    }


    .category-card.mobile-expanded .category-content,


    .category-card.mobile-expanded .subcat-tabs {


        display: block;


    }


    .category-toggle-icon {


        display: inline-block;


    }


}





/* 移动端底部导航 */


.mobile-bottom-nav {


    display: none; position: fixed; bottom: 0; left: 0; right: 0;


    background: var(--bg-sidebar); backdrop-filter: blur(10px);


    border-top: 1px solid var(--border-color); padding: 8px 0;


    z-index: 90; justify-content: space-around;


}


@media (max-width: 768px) {


    .mobile-bottom-nav { display: flex; }


    .site-main { padding-bottom: 70px; }


}


.mobile-bottom-nav a {


    display: flex; flex-direction: column; align-items: center; gap: 2px;


    font-size: 10px; color: var(--text-muted); padding: 4px 12px;


}


.mobile-bottom-nav a i { font-size: 18px; }


.mobile-bottom-nav a.active { color: var(--accent-gold); }





/* 搜索建议滚动条 */


.suggest-list::-webkit-scrollbar, .suggest-list-horizontal::-webkit-scrollbar { width: 6px; }


.suggest-list::-webkit-scrollbar-track, .suggest-list-horizontal::-webkit-scrollbar-track { background: transparent; }


.suggest-list::-webkit-scrollbar-thumb, .suggest-list-horizontal::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #d4af37, #8b5cf6); border-radius: 3px; }





/* 热门教程标题最多显示2行，固定高度，防止视觉上高度不一致 */


.tutorial-item .tutorial-title {


    display: -webkit-box !important;


    -webkit-line-clamp: 2 !important;


    -webkit-box-orient: vertical !important;


    overflow: hidden !important;


    text-overflow: ellipsis !important;


    min-height: 2.4em !important;


    max-height: 2.4em !important;


    line-height: 1.4em !important;


    font-size: 13px !important;


}





/* 视频项固定高度 */


.tutorial-list .tutorial-item {


    height: 90px !important;


    min-height: 79px !important;


    max-height: 79px !important;


    overflow: hidden !important;


}








/* 热门教程视频缩略图放大 */


.tutorial-item .tutorial-icon {


    width: 70px !important;


    height: 50px !important;


    min-width: 70px !important;


    flex-shrink: 0 !important;


}








/* 热门教程标题调整：字体缩小，行高缩小，让2行完全显示 */


.tutorial-item .tutorial-title {


    font-size: 12px !important;


    line-height: 1.3em !important;


    min-height: 2.6em !important;


    max-height: 2.6em !important;


}








/* 每日加速器CDK版块（紧凑版） */


.cdk-section-compact {


    margin-bottom: 20px;


    padding: 12px 20px;


    background: rgba(26, 10, 46, 0.7);


    border: 1px solid rgba(212, 175, 55, 0.3);


    border-radius: 10px;





    width: 220px;}





.cdk-section-compact .cdk-header {


    display: flex;


    align-items: center;


    gap: 8px;


    margin-bottom: 10px;


    font-size: 15px;


    color: #d4af37;


    font-weight: bold;


}





.cdk-section-compact .cdk-header i {


    color: #d4af37;


}





.cdk-section-compact .cdk-items {


    display: flex;


    gap: 15px;


    flex-wrap: wrap;





    flex-direction: column;}





.cdk-section-compact .cdk-item {


    display: flex;


    align-items: center;


    gap: 10px;


    padding: 6px 12px;


    background: rgba(139, 92, 246, 0.15);


    border: 1px solid rgba(139, 92, 246, 0.3);


    border-radius: 6px;


    font-size: 13px;





    width: 100%;


    box-sizing: border-box;}





.cdk-section-compact .cdk-name {


    color: #fff;


    font-weight: 500;


}





.cdk-section-compact .cdk-code {


    color: #d4af37;


    font-family: monospace;


    letter-spacing: 1px;


}





.cdk-section-compact .cdk-copy {


    padding: 3px 10px;


    background: linear-gradient(135deg, #d4af37, #b8941f);


    color: #1a0a2e;


    border: none;


    border-radius: 4px;


    font-size: 12px;


    cursor: pointer;


    font-weight: bold;


    transition: all 0.2s;


}





.cdk-section-compact .cdk-copy:hover {


    transform: scale(1.05);


    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);


}








/* 强制CDK项竖着排 */


.cdk-section-compact .cdk-items {


    flex-direction: column !important;


    display: flex !important;


    gap: 8px !important;


}





.cdk-section-compact .cdk-item {


    width: 100% !important;


    box-sizing: border-box !important;


    flex-direction: row !important;


    justify-content: space-between !important;


}








/* CDK版块横版（扁的长方形） */


.cdk-section-compact {


    width: 100% !important;


    max-width: 500px !important;


    padding: 10px 16px !important;


}





.cdk-section-compact .cdk-header {


    margin-bottom: 8px !important;


    font-size: 14px !important;


}





.cdk-section-compact .cdk-items {


    flex-direction: row !important;


    display: flex !important;


    gap: 10px !important;


    flex-wrap: wrap !important;


}





.cdk-section-compact .cdk-item {


    width: auto !important;


    flex: 1 !important;


    min-width: 140px !important;


    padding: 5px 10px !important;


    font-size: 12px !important;


}








/* 搜索引擘按钮居中显示 */


.search-engines {


    display: flex !important;


    justify-content: center !important;


    align-items: center !important;


    gap: 10px !important;


    flex-wrap: wrap !important;


    margin-bottom: 12px !important;


    width: 100% !important;


}





.search-engine-btn {


    margin: 0 !important;


}





/* 搜索框居中 */


.search-box,


.search-input-wrapper,


.search-section .search-box {


    margin: 0 auto !important;


    display: flex !important;


    justify-content: center !important;


}








/* 搜索框宽度和上面搜索引擘区域一样宽 */


.search-box {


    width: 100% !important;


    max-width: 621px !important;


    margin: 0 auto !important;


}





.search-box input[type="text"],


.search-box input[type="search"],


.search-input-wrapper input {


    width: 100% !important;


    max-width: 621px !important;


    box-sizing: border-box !important;


}








/* 搜索框宽度减少4厘米，居中 */


.search-box {


    max-width: 621px !important;


    margin: 0 auto !important;


}





.search-box input[type="text"],


.search-box input[type="search"] {


    max-width: 621px !important;


}








/* 搜索框宽度再缩小2厘米 */


.search-box {


    max-width: 545px !important;


    margin: 0 auto !important;


}





.search-box input[type="text"],


.search-box input[type="search"] {


    max-width: 545px !important;


}








/* 内联CDK版块（和搜索引擘同一行） */


.cdk-inline {


    display: inline-block !important;


    background: rgba(26, 10, 46, 0.7);


    border: 1px solid rgba(212, 175, 55, 0.3);


    border-radius: 8px;


    padding: 8px 12px;


    margin: 0 auto 10px auto !important;


    max-width: none;


    width: auto;


    text-align: center;


}





.cdk-inline-header {


    display: flex;


    align-items: center;


    gap: 6px;


    font-size: 13px;


    color: #d4af37;


    font-weight: bold;


    margin-bottom: 6px;


}





.cdk-inline-items {


    display: flex;


    gap: 8px;


    flex-wrap: wrap;


}





.cdk-inline-item {


    background: rgba(139, 92, 246, 0.2);


    border: 1px solid rgba(139, 92, 246, 0.4);


    border-radius: 4px;


    padding: 3px 8px;


    font-size: 11px;


    color: #fff;


    font-family: monospace;


}








/* 站内搜索向上移动80px */


.search-engines {


    margin-top: -80px !important;


    position: relative !important;


    z-index: 10 !important;


}








/* 去掉热门教程视频的紫色背景 */


.tutorial-content .tutorial-item,


.tutorial-list .tutorial-item {


    background: transparent !important;


    background-color: transparent !important;


    border: none !important;


    box-shadow: none !important;


}








/* 热门教程视频鼠标放上去边框发亮效果 */


.tutorial-content .tutorial-item,


.tutorial-list .tutorial-item {


    transition: all 0.3s ease !important;


    border: 1px solid transparent !important;


    border-radius: 10px !important;


}





.tutorial-content .tutorial-item:hover,


.tutorial-list .tutorial-item:hover {


    background: rgba(139, 92, 246, 0.1) !important;


    border: 1px solid rgba(212, 175, 55, 0.6) !important;


    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4), inset 0 0 10px rgba(139, 92, 246, 0.2) !important;


    transform: translateY(-2px) !important;


}








/* 热门教程边框跟工具直达图标一模一样 */


.tutorial-content .tutorial-item,


.tutorial-list .tutorial-item {


    background: rgba(45, 27, 78, 0.5) !important;


    background-color: rgba(45, 27, 78, 0.5) !important;


    border: 1px solid rgba(212, 175, 55, 0.3) !important;


    border-radius: 8px !important;


    padding: 10px 6px !important;


    transition: all 0.3s ease !important;


    box-shadow: none !important;


}





/* hover效果也跟工具直达一样 */


.tutorial-content .tutorial-item:hover,


.tutorial-list .tutorial-item:hover {


    background: rgba(45, 27, 78, 0.7) !important;


    border: 1px solid rgba(212, 175, 55, 0.6) !important;


    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;


    transform: translateY(-2px) !important;


}





/* 修复第一个视频上边框被裁剪的问题 */


.tutorial-content,


.tutorial-list {


    overflow: visible !important;


    padding-top: 5px !important;


}








/* CDK版块美化 */


.cdk-inline-header {


    font-size: 13px !important;


    font-weight: bold !important;


    background: linear-gradient(90deg, #d4af37, #f0e68c, #d4af37) !important;


    -webkit-background-clip: text !important;


    -webkit-text-fill-color: transparent !important;


    background-clip: text !important;


}





.cdk-inline-tip {


    display: block !important;


    width: 100% !important;


    text-align: center !important;


    font-size: 12px !important;


    color: rgba(255, 255, 255, 0.8) !important;


    padding: 8px 0 !important;


    background: rgba(139, 92, 246, 0.2) !important;


    border-radius: 6px !important;


    border: 1px solid rgba(212, 175, 55, 0.3) !important;


    cursor: pointer !important;


    transition: all 0.3s ease !important;


}





.cdk-inline-tip:hover {


    background: rgba(139, 92, 246, 0.4) !important;


    border-color: rgba(212, 175, 55, 0.6) !important;


    color: #fff !important;


}














/* 取消内边框，只保留外面的大边框 */


.cdk-inline-tip {


    display: block !important;


    width: 100% !important;


    text-align: center !important;


    font-size: 13px !important;


    color: rgba(255, 255, 255, 0.9) !important;


    padding: 8px 0 !important;


    background: transparent !important;


    border: none !important;


    border-radius: 0 !important;


    cursor: pointer !important;


    transition: all 0.3s ease !important;


    font-weight: 500 !important;


}





.cdk-inline:hover .cdk-inline-tip {


    color: #f0e68c !important;


}





/* 小手emoji动画 */


.cdk-inline-tip {


    animation: handPoint 1.5s ease-in-out infinite;


}





@keyframes handPoint {


    0%, 100% { transform: translateX(0); }


    50% { transform: translateX(5px); }


}








/* 取消内边框，透明背景 */


.cdk-inline-tip {


    display: block !important;


    width: 100% !important;


    text-align: center !important;


    font-size: 13px !important;


    color: rgba(255, 255, 255, 0.85) !important;


    padding: 6px 0 !important;


    background: transparent !important;


    border: none !important;


    border-radius: 0 !important;


    cursor: pointer !important;


    transition: all 0.3s ease !important;


    font-weight: 500 !important;


    animation: none !important;


}





.cdk-inline:hover .cdk-inline-tip {


    color: #f0e68c !important;


}





/* 小手单独动画 */


.cdk-hand {


    display: inline-block !important;


    animation: handPoint 1.5s ease-in-out infinite !important;


    margin-left: 5px !important;


}





@keyframes handPoint {


    0%, 100% { transform: translateX(0) rotate(0deg); }


    25% { transform: translateX(3px) rotate(-10deg); }


    75% { transform: translateX(3px) rotate(10deg); }


}








/* 标题后面的小手动画 */


.cdk-hand-header {


    display: inline-block !important;


    font-size: 14px !important;


    margin-left: 6px !important;


    animation: handPointHeader 1.5s ease-in-out infinite !important;


}





@keyframes handPointHeader {


    0%, 100% { transform: translateX(0) rotate(0deg); }


    25% { transform: translateX(3px) rotate(-10deg); }


    75% { transform: translateX(3px) rotate(10deg); }


}








/* CDK版块 - 跟右上角提示一样大小（312版本样式） */


.cdk-inline {


    background: transparent !important;


    border: 1px solid rgba(212, 175, 55, 0.4) !important;


    border-radius: 20px !important;


    padding: 6px 12px !important;


    transition: all 0.3s ease !important;


    cursor: pointer !important;


    display: inline-block !important;


    height: 33px !important;


    line-height: 21px !important;


}





.cdk-inline:hover {


    background: rgba(212, 175, 55, 0.1) !important;


    border-color: rgba(212, 175, 55, 0.7) !important;


    box-shadow: 0 0 10px rgba(212, 175, 55, 0.3) !important;


}





.cdk-inline-header {


    font-size: 12px !important;


    font-weight: 500 !important;


    background: linear-gradient(90deg, #d4af37, #f0e68c, #d4af37) !important;


    -webkit-background-clip: text !important;


    -webkit-text-fill-color: transparent !important;


    background-clip: text !important;


    margin-bottom: 0 !important;


    display: flex !important;


    align-items: center !important;


    gap: 6px !important;


    letter-spacing: 0.3px !important;


    line-height: 21px !important;


}





.cdk-inline-header i {


    color: #d4af37 !important;


    -webkit-text-fill-color: #d4af37 !important;


    font-size: 12px !important;


}





/* 浅色模式下CDK字体颜色 */


body.light .cdk-inline-header,


body[data-theme="light"] .cdk-inline-header {


    background: linear-gradient(90deg, #b8860b, #daa520, #b8860b) !important;


    -webkit-background-clip: text !important;


    -webkit-text-fill-color: transparent !important;


    background-clip: text !important;


}





body.light .cdk-inline,


body[data-theme="light"] .cdk-inline {


    border-color: rgba(184, 134, 11, 0.5) !important;


}





body.light .cdk-inline:hover,


body[data-theme="light"] .cdk-inline:hover {


    background: rgba(184, 134, 11, 0.1) !important;


    border-color: rgba(184, 134, 11, 0.8) !important;


}





/* 标题后面的小手动画 */


.cdk-hand-header {


    display: inline-block !important;


    font-size: 12px !important;


    margin-left: 4px !important;


    animation: handPointHeader 1.5s ease-in-out infinite !important;


}





@keyframes handPointHeader {


    0%, 100% { transform: translateX(0) rotate(0deg); }


    25% { transform: translateX(2px) rotate(-10deg); }


    75% { transform: translateX(2px) rotate(10deg); }


}





/* 浅色模式下教程版块跟工具直达图标一样带边框 */

















/* 浅色模式下教程版块跟工具直达图标一样带边框 */


html[data-theme="light"] .tutorial-content .tutorial-item,


html[data-theme="light"] .tutorial-list .tutorial-item {


    background: rgba(255, 255, 255, 0.9) !important;


    border: 1px solid rgba(139, 92, 246, 0.2) !important;


    border-radius: 8px !important;


    box-shadow: none !important;


    padding: 10px 6px !important;


    transition: all 0.3s ease !important;


}





html[data-theme="light"] .tutorial-content .tutorial-item:hover,


html[data-theme="light"] .tutorial-list .tutorial-item:hover {


    background: rgba(255, 255, 255, 1) !important;


    border: 1px solid rgba(139, 92, 246, 0.5) !important;


    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3) !important;


    transform: translateY(-2px) !important;


}





/* 浅色模式下CDK字体颜色 */


html[data-theme="light"] .cdk-inline-header {


    background: linear-gradient(90deg, #b8860b, #daa520, #b8860b) !important;


    -webkit-background-clip: text !important;


    -webkit-text-fill-color: transparent !important;


    background-clip: text !important;


}





html[data-theme="light"] .cdk-inline {


    border-color: rgba(184, 134, 11, 0.5) !important;


}





html[data-theme="light"] .cdk-inline:hover {


    background: rgba(184, 134, 11, 0.1) !important;


    border-color: rgba(184, 134, 11, 0.8) !important;


}








/* 站内搜索向下移动1厘米，避免被CDK挡住 */


.search-engines {


    margin-top: 38px !important;


    position: relative !important;


    z-index: 5 !important;


}





/* 搜索框也相应下移 */


.search-box {


    margin-top: 10px !important;


    position: relative !important;


    z-index: 5 !important;


}








/* 搜索区域向左平移，紧挨着左侧栏展开后的右边 */


.search-engines {


    margin-left: 0 !important;


    padding-left: 0 !important;


    text-align: left !important;


    position: relative !important;


    left: 0 !important;


}





.search-box {


    margin-left: 0 !important;


    margin-right: auto !important;


    text-align: left !important;


    float: left !important;


    position: relative !important;


    left: 0 !important;


}





.search-box input[type="text"],


.search-box input[type="search"] {


    margin-left: 0 !important;


    margin-right: 0 !important;


    float: left !important;


}





/* 搜索区域容器左对齐 */


.search-section {


    text-align: left !important;


    padding-left: 0 !important;


    margin-left: 0 !important;


}








/* 强制搜索区域左移，紧挨着左侧栏 */


.search-section {


    margin-left: 0 !important;


    padding-left: 0 !important;


    text-align: left !important;


    display: block !important;


}





/* 站内搜索按钮强制左对齐 */


.search-engines {


    margin-left: 0 !important;


    padding-left: 0 !important;


    text-align: left !important;


    justify-content: flex-start !important;


    display: flex !important;


    flex-wrap: wrap !important;


    gap: 8px !important;


}





.search-engines .search-engine-btn {


    margin-left: 0 !important;


    margin-right: 8px !important;


}





/* 搜索框强制左对齐 */


.search-box {


    margin-left: 0 !important;


    margin-right: auto !important;


    text-align: left !important;


    float: left !important;


    display: flex !important;


    justify-content: flex-start !important;


}





.search-box form {


    margin-left: 0 !important;


    text-align: left !important;


}





.search-box input[type="text"],


.search-box input[type="search"] {


    margin-left: 0 !important;


    margin-right: 0 !important;


    float: left !important;


}





/* 主内容区左移，紧挨着左侧栏 */


.main-content,


.content,


.container {


    margin-left: 0 !important;


    padding-left: 0 !important;


}








/* CDK版块浅色模式字体加大加粗 */


html[data-theme="light"] .cdk-inline-header {


    font-size: 14px !important;


    font-weight: 700 !important;


}





/* CDK版块整体也稍微加大 */


.cdk-inline {


    height: 38px !important;


    line-height: 26px !important;


    padding: 6px 14px !important;


}





.cdk-inline-header {


    font-size: 13px !important;


    font-weight: 600 !important;


    line-height: 26px !important;


}





/* 站内搜索向右平移5厘米（189px） */


.search-engines {


    margin-left: 189px !important;


    position: relative !important;


    left: 0 !important;


}





/* 搜索框也向右平移5厘米（189px） */








/* 搜索区域容器 */


.search-section {


    margin-left: 0 !important;


    padding-left: 0 !important;


}








/* 站内搜索再向右平移1厘米（总共227px） */


.search-section .search-engines,


section.search-section .search-engines,


body .search-engines {


    margin-left: 227px !important;


}





/* 搜索框向右平移6厘米（227px）- 强制覆盖 */


.search-section .search-box,


section.search-section .search-box,


body 





/* 搜索框内部的form和input也左对齐 */


.search-section .search-box form,


.search-section .search-box input {


    margin-left: 0 !important;


    float: left !important;


}





/* 搜索区域容器 */


.search-section {


    margin-left: 0 !important;


    padding-left: 0 !important;


    text-align: left !important;


}








/* 搜索框向右加宽1厘米（38px） */


.search-box {


    width: 583px !important;


    max-width: 583px !important;


}





.search-box input[type="text"],


.search-box input[type="search"] {


    width: 583px !important;


    max-width: 583px !important;


}





/* 搜索下拉栏显示2个，超过自动滚动 */


.search-history,


.search-suggest,


.search-dropdown,


.search-results-dropdown {


    max-height: 90px !important;


    overflow-y: auto !important;


    overflow-x: hidden !important;


}





/* 下拉栏每个项目高度 */


.search-history .history-item,


.search-suggest .suggest-item,


.search-dropdown .dropdown-item {


    height: 45px !important;


    line-height: 45px !important;


    min-height: 45px !important;


}





/* 下拉栏滚动条样式 */


.search-history::-webkit-scrollbar,


.search-suggest::-webkit-scrollbar,


.search-dropdown::-webkit-scrollbar {


    width: 6px !important;


}





.search-history::-webkit-scrollbar-track,


.search-suggest::-webkit-scrollbar-track,


.search-dropdown::-webkit-scrollbar-track {


    background: rgba(45, 27, 78, 0.3) !important;


    border-radius: 3px !important;


}





.search-history::-webkit-scrollbar-thumb,


.search-suggest::-webkit-scrollbar-thumb,


.search-dropdown::-webkit-scrollbar-thumb {


    background: linear-gradient(180deg, #d4af37, #8b5cf6) !important;


    border-radius: 3px !important;


}








/* 搜索框左右各加宽1厘米（总共659px） */


.search-box {


    width: 659px !important;


    max-width: 659px !important;


}





.search-box input[type="text"],


.search-box input[type="search"] {


    width: 659px !important;


    max-width: 659px !important;


}








/* 搜索框向左加宽1厘米 */








.search-box input[type="text"],


.search-box input[type="search"] {


    width: 697px !important;


    max-width: 697px !important;


    padding-left: 20px !important;


}








/* 搜索框向左整体平移1.5厘米（57px） */








/* 调整放大镜图标位置，不跟左边框重叠 */


.search-box .search-icon,


.search-box .fa-magnifying-glass,


.search-box i {


    left: 15px !important;


    position: absolute !important;


    z-index: 2 !important;


}





/* 搜索框input左边padding增加，给图标留空间 */


.search-box input[type="text"],


.search-box input[type="search"] {


    padding-left: 45px !important;


}








/* 强制搜索框向左平移1.5厘米（57px），从227px改为170px */


section.search-section .search-box,


.search-section .search-box,


body .search-box,


.search-box {


    margin-left: 189px !important;


    margin-right: 0 !important;


    float: left !important;


    position: relative !important;


    left: 0 !important;


}





/* 搜索区域容器也左移 */


.search-section {


    margin-left: 0 !important;


    padding-left: 0 !important;


    text-align: left !important;


}








/* ========== 搜索历史记录修复 ========== */


/* 历史记录项 - 图标和文字不重叠 */


.search-history-item {


    padding-left: 45px !important;


    position: relative !important;


    height: 40px !important;


    line-height: 40px !important;


    display: flex !important;


    align-items: center !important;


}





.search-history-item i {


    position: absolute !important;


    left: 15px !important;


    top: 50% !important;


    transform: translateY(-50%) !important;


    margin-right: 0 !important;


}





.search-history-item span {


    margin-left: 0 !important;


    padding-left: 0 !important;


}





/* 清空历史按钮 - 确保可见 */


.search-history-clear,


#clearHistory {


    display: flex !important;


    align-items: center !important;


    justify-content: center !important;


    padding: 10px 15px !important;


    cursor: pointer !important;


    color: #d4af37 !important;


    font-size: 13px !important;


    border-top: 1px solid rgba(139, 92, 246, 0.2) !important;


    transition: all 0.3s !important;


    visibility: visible !important;


    opacity: 1 !important;


    height: auto !important;


    line-height: 1.5 !important;


}





.search-history-clear:hover,


#clearHistory:hover {


    background: rgba(139, 92, 246, 0.1) !important;


    color: #fff !important;


}





/* 历史记录列表 */


.search-history-list {


    max-height: 72px !important;


    overflow-y: auto !important;


}





/* ========== 搜索下拉栏向下增加0.8厘米（30px） ========== */


#searchSuggest,


.search-suggest,


.search-dropdown {


    margin-top: 30px !important;


    top: calc(100% + 30px) !important;


}





/* 下拉栏内容区域增加高度 */


.search-suggest-list,


.suggest-list {


    max-height: 180px !important;


}








/* ========== 清除历史按钮图标强制可见 ========== */


.search-history-clear i,


#clearHistory i {


    display: inline-block !important;


    visibility: visible !important;


    opacity: 1 !important;


    margin-right: 8px !important;


    font-size: 14px !important;


    color: #d4af37 !important;


    width: auto !important;


    height: auto !important;


    position: static !important;


    transform: none !important;


}





.search-history-clear span,


#clearHistory span {


    display: inline-block !important;


    visibility: visible !important;


    opacity: 1 !important;


}





/* 确保清除按钮整体可见 */


.search-history-clear,


#clearHistory {


    display: flex !important;


    visibility: visible !important;


    opacity: 1 !important;


    z-index: 9999 !important;


    position: relative !important;


}





/* ========== 下拉栏向上移动0.8厘米（减少间距） ========== */


#searchSuggest,


.search-suggest,


.search-dropdown {


    margin-top: 0 !important;


    top: calc(100% + 0px) !important;


}





/* 搜索历史也上移 */


#searchHistory,


.search-history {


    margin-top: 0 !important;


    top: calc(100% + 0px) !important;


}








/* ========== 搜索历史记录修复 ========== */


#searchHistory {


    display: none !important;


}





#searchHistory.show {


    display: block !important;


}





.search-history-list {


    max-height: 72px !important;


    overflow-y: auto !important;


    padding-bottom: 5px !important;


}





.search-history-item {


    padding-left: 45px !important;


    padding-right: 15px !important;


    position: relative !important;


    height: 45px !important;


    line-height: 45px !important;


    display: flex !important;


    align-items: center !important;


    white-space: nowrap !important;


    overflow: hidden !important;


    text-overflow: ellipsis !important;


}





.search-history-item i {


    position: absolute !important;


    left: 15px !important;


    top: 50% !important;


    transform: translateY(-50%) !important;


}





/* 清除历史按钮 - 确保不跟内容重叠 */


.search-history-clear,


#clearHistory {


    display: flex !important;


    align-items: center !important;


    justify-content: center !important;


    padding: 12px 15px !important;


    margin-top: 5px !important;


    border-top: 1px solid rgba(139, 92, 246, 0.3) !important;


    position: relative !important;


    z-index: 10 !important;


    background: rgba(26, 10, 46, 0.95) !important;


}





/* ========== 搜索下拉栏修复 - 向下加宽确保两排显示 ========== */


#searchSuggest,


.search-suggest {


    max-height: 180px !important;


    height: auto !important;


    overflow-y: auto !important;


    overflow-x: hidden !important;


}





.search-suggest-list,


.suggest-list {


    max-height: 135px !important;


    overflow-y: auto !important;


    padding-bottom: 10px !important;


}





.suggest-item,


.search-suggest-item {


    height: 45px !important;


    line-height: 45px !important;


    min-height: 45px !important;


    padding-left: 45px !important;


    padding-right: 15px !important;


    white-space: nowrap !important;


    overflow: hidden !important;


    text-overflow: ellipsis !important;


    display: flex !important;


    align-items: center !important;


}





/* 下拉栏底部清除按钮 - 不跟内容重叠 */


.suggest-footer {


    padding: 12px 15px !important;


    margin-top: 5px !important;


    border-top: 1px solid rgba(139, 92, 246, 0.3) !important;


    background: rgba(26, 10, 46, 0.95) !important;


    position: relative !important;


    z-index: 10 !important;


    display: flex !important;


    justify-content: space-between !important;


    align-items: center !important;


}





.suggest-footer .clear-history-btn {


    cursor: pointer !important;


    color: #d4af37 !important;


    padding: 5px 10px !important;


    border-radius: 4px !important;


    transition: all 0.3s !important;


}





.suggest-footer .clear-history-btn:hover {


    background: rgba(139, 92, 246, 0.2) !important;


}








/* ========== 搜索下拉栏边框缩小+字体左对齐 ========== */


#searchSuggest,


.search-suggest,


.search-dropdown {


    border-radius: 6px !important;


    border-width: 1px !important;


    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15) !important;


}





/* 建议项字体左对齐 */


.suggest-item,


.search-suggest-item {


    text-align: left !important;


    justify-content: flex-start !important;


    padding-left: 45px !important;


    padding-right: 15px !important;


}





.suggest-item span,


.search-suggest-item span {


    text-align: left !important;


    margin-left: 0 !important;


}





/* 历史记录项也左对齐 */


.search-history-item {


    text-align: left !important;


    justify-content: flex-start !important;


}





/* 缩小建议项之间的间距 */


.suggest-item + .suggest-item,


.search-suggest-item + .search-suggest-item {


    margin-top: 0 !important;


    border-top: 1px solid rgba(139, 92, 246, 0.1) !important;


}








/* ========== 搜索下拉栏字体居中对齐 ========== */


.suggest-item,


.search-suggest-item {


    text-align: center !important;


    justify-content: center !important;


    padding-left: 15px !important;


    padding-right: 15px !important;


}





.suggest-item span,


.search-suggest-item span {


    text-align: center !important;


    margin-left: auto !important;


    margin-right: auto !important;


}





/* 历史记录项也居中 */


.search-history-item {


    text-align: center !important;


    justify-content: center !important;


    padding-left: 15px !important;


}





.search-history-item i {


    position: static !important;


    transform: none !important;


    margin-right: 8px !important;


}








/* ========== 历史记录靠左对齐 ========== */


.search-history-item {


    text-align: left !important;


    justify-content: flex-start !important;


    padding-left: 45px !important;


    padding-right: 15px !important;


}





.search-history-item i {


    position: absolute !important;


    left: 15px !important;


    top: 50% !important;


    transform: translateY(-50%) !important;


    margin-right: 0 !important;


}





.search-history-item span {


    text-align: left !important;


    margin-left: 0 !important;


}





/* ========== 搜索结果项变扁（高度缩小） ========== */


.suggest-item,


.search-suggest-item {


    height: 35px !important;


    line-height: 35px !important;


    min-height: 35px !important;


    padding-top: 0 !important;


    padding-bottom: 0 !important;


    text-align: center !important;


    justify-content: center !important;


}





/* 搜索结果列表高度调整 */


.search-suggest-list,


.suggest-list {


    max-height: 105px !important;


}





/* 历史记录列表高度调整 */


.search-history-list {


    max-height: 72px !important;


}





/* 历史记录项高度也缩小 */


.search-history-item {


    height: 35px !important;


    line-height: 35px !important;


    min-height: 35px !important;


}








/* ========== 搜索结果项小框框高度再缩小 ========== */


.suggest-item,


.search-suggest-item {


    height: 30px !important;


    line-height: 30px !important;


    min-height: 30px !important;


    padding-top: 0 !important;


    padding-bottom: 0 !important;


    margin: 2px 8px !important;


    border-radius: 15px !important;


}





/* 搜索结果列表高度调整 */


.search-suggest-list,


.suggest-list {


    max-height: 100px !important;


    padding: 5px 0 !important;


}





/* 历史记录项高度也同步缩小 */


.search-history-item {


    height: 30px !important;


    line-height: 30px !important;


    min-height: 30px !important;


    margin: 2px 8px !important;


    border-radius: 15px !important;


}





/* 历史记录列表高度调整 */


.search-history-list {


    max-height: 72px !important;


    padding: 5px 0 !important;


}








/* ========== 搜索结果项小框高度再缩小到25px ========== */


.suggest-item,


.search-suggest-item {


    height: 25px !important;


    line-height: 25px !important;


    min-height: 25px !important;


    font-size: 13px !important;


    margin: 2px 8px !important;


    border-radius: 12px !important;


}





/* 搜索结果列表高度调整 */


.search-suggest-list,


.suggest-list {


    max-height: 85px !important;


    padding: 4px 0 !important;


}





/* 历史记录项高度也同步缩小 */


.search-history-item {


    height: 25px !important;


    line-height: 25px !important;


    min-height: 25px !important;


    font-size: 13px !important;


    margin: 2px 8px !important;


    border-radius: 12px !important;


}





/* 历史记录列表高度调整 */


.search-history-list {


    max-height: 72px !important;


    padding: 4px 0 !important;


}








/* ========== 搜索结果小框自适应宽度，紧紧贴着文字 ========== */


#searchSuggest .suggest-item,


#searchSuggest .search-suggest-item,


.suggest-list .suggest-item,


.suggest-list-horizontal .suggest-item {


    width: auto !important;


    min-width: auto !important;


    max-width: none !important;


    height: auto !important;


    min-height: auto !important;


    line-height: 1.4 !important;


    padding: 5px 12px !important;


    margin: 4px 6px !important;


    display: inline-flex !important;


    align-items: center !important;


    justify-content: center !important;


    flex: none !important;


    float: none !important;


}





/* 确保列表是flex换行布局 */


#searchSuggest .suggest-list,


#searchSuggest .suggest-list-horizontal,


.search-suggest-list {


    display: flex !important;


    flex-wrap: wrap !important;


    justify-content: flex-start !important;


    align-items: center !important;


    padding: 10px !important;


    gap: 4px !important;


}





/* 历史记录项也同样处理 */


#searchHistory .search-history-item,


.search-history-list .search-history-item {


    width: auto !important;


    min-width: auto !important;


    height: auto !important;


    min-height: auto !important;


    line-height: 1.4 !important;


    padding: 5px 12px !important;


    margin: 4px 6px !important;


    display: inline-flex !important;


    align-items: center !important;


    justify-content: center !important;


    flex: none !important;


}





#searchHistory .search-history-list {


    display: flex !important;


    flex-wrap: wrap !important;


    justify-content: flex-start !important;


    align-items: center !important;


    padding: 10px !important;


    gap: 4px !important;


}





.search-history-item i {


    position: static !important;


    transform: none !important;


    margin-right: 6px !important;


    display: inline-block !important;


}








/* ========== 浅色模式下去掉搜索下拉栏边框 ========== */


html[data-theme="light"] #searchSuggest,


html[data-theme="light"] .search-suggest,


html[data-theme="light"] .search-dropdown {


    border: none !important;


    border-width: 0 !important;


    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;


}





/* 浅色模式下搜索结果项也去掉边框 */


html[data-theme="light"] #searchSuggest .suggest-item,


html[data-theme="light"] .search-suggest .suggest-item {


    border: none !important;


    border-width: 0 !important;


}





/* 浅色模式下历史记录也去掉边框 */


html[data-theme="light"] #searchHistory,


html[data-theme="light"] .search-history {


    border: none !important;


    border-width: 0 !important;


    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;


}





html[data-theme="light"] #searchHistory .search-history-item {


    border: none !important;


    border-width: 0 !important;


}








/* ========== 去掉历史记录项图标相关样式 ========== */


.search-history-item i {


    display: none !important;


}





/* ========== 浅色模式去掉清除历史按钮黑框 ========== */


html[data-theme="light"] .search-history-clear,


html[data-theme="light"] #clearHistory {


    border: none !important;


    border-width: 0 !important;


    box-shadow: none !important;


    background: transparent !important;


}





/* 浅色模式下历史记录项也去掉边框 */


html[data-theme="light"] .search-history-item {


    border: none !important;


    border-width: 0 !important;


}





/* 浅色模式下历史记录容器去掉边框 */


html[data-theme="light"] #searchHistory,


html[data-theme="light"] .search-history {


    border: none !important;


    border-width: 0 !important;


    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;


}








/* ========== 修复浅色模式清除历史按钮hover文字消失 ========== */


/* 浅色模式下清除历史按钮正常状态 */


html[data-theme="light"] .search-history-clear,


html[data-theme="light"] #clearHistory {


    color: #6d28d9 !important;


    background: transparent !important;


    border: none !important;


}





html[data-theme="light"] .search-history-clear span,


html[data-theme="light"] #clearHistory span {


    color: #6d28d9 !important;


}





html[data-theme="light"] .search-history-clear i,


html[data-theme="light"] #clearHistory i {


    color: #6d28d9 !important;


}





/* 浅色模式下清除历史按钮hover状态 - 确保文字可见 */


html[data-theme="light"] .search-history-clear:hover,


html[data-theme="light"] #clearHistory:hover {


    color: #4c1d95 !important;


    background: rgba(139, 92, 246, 0.1) !important;


    border: none !important;


}





html[data-theme="light"] .search-history-clear:hover span,


html[data-theme="light"] #clearHistory:hover span {


    color: #4c1d95 !important;


    visibility: visible !important;


    opacity: 1 !important;


}





html[data-theme="light"] .search-history-clear:hover i,


html[data-theme="light"] #clearHistory:hover i {


    color: #4c1d95 !important;


    visibility: visible !important;


    opacity: 1 !important;


}





/* 深色模式下也确保hover文字可见 */


.search-history-clear:hover,


#clearHistory:hover {


    color: #d4af37 !important;


    background: rgba(139, 92, 246, 0.2) !important;


}





.search-history-clear:hover span,


#clearHistory:hover span {


    color: #d4af37 !important;


    visibility: visible !important;


    opacity: 1 !important;


}





.search-history-clear:hover i,


#clearHistory:hover i {


    color: #d4af37 !important;


    visibility: visible !important;


    opacity: 1 !important;


}








/* ========== 禁止页面横向滚动 ========== */


html, body {


    overflow-x: hidden !important;


    max-width: 100% !important;


}





/* 主内容区也禁止横向溢出 */


.site-main,


.container,


.search-section,


.search-engines,


.search-box {


    max-width: 100% !important;


    overflow-x: hidden !important;


}





/* 站内搜索按钮栏自适应宽度，不超出容器 */


.search-engines {


    width: 100% !important;


    max-width: 100% !important;


    flex-wrap: wrap !important;


    box-sizing: border-box !important;


}





/* 搜索框也自适应 */


.search-box {


    max-width: 100% !important;


    box-sizing: border-box !important;


}





.search-box input[type="text"],


.search-box input[type="search"] {


    max-width: 100% !important;


    box-sizing: border-box !important;


}








/* ========== 工具直达图标去掉边框和背景 ========== */


.tool-grid .tool-item,


.tool-grid-compact .tool-item,


.tools-section .tool-item {


    border: none !important;


    border-width: 0 !important;


    background: transparent !important;


    box-shadow: none !important;


    border-radius: 8px !important;


}





/* hover时保留高亮效果 */


.tool-grid .tool-item:hover,


.tool-grid-compact .tool-item:hover,


.tools-section .tool-item:hover {


    border: 1px solid rgba(139, 92, 246, 0.4) !important;


    background: rgba(139, 92, 246, 0.1) !important;


    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3) !important;


}





/* 浅色模式下也去掉边框 */


html[data-theme="light"] .tool-grid .tool-item,


html[data-theme="light"] .tool-grid-compact .tool-item,


html[data-theme="light"] .tools-section .tool-item {


    border: none !important;


    background: transparent !important;


    box-shadow: none !important;


}





html[data-theme="light"] .tool-grid .tool-item:hover,


html[data-theme="light"] .tool-grid-compact .tool-item:hover,


html[data-theme="light"] .tools-section .tool-item:hover {


    border: 1px solid rgba(139, 92, 246, 0.4) !important;


    background: rgba(139, 92, 246, 0.1) !important;


}








/* ========== 修复工具直达图标hover抖动问题 ========== */


/* 正常状态下保留1px透明边框，确保hover时大小不变 */


.tool-grid .tool-item,


.tool-grid-compact .tool-item,


.tools-section .tool-item {


    border: 1px solid transparent !important;


    background: transparent !important;


    box-shadow: none !important;


    transition: all 0.3s ease !important;


    box-sizing: border-box !important;


}





/* hover时只改变边框颜色和背景，不改变边框大小 */


.tool-grid .tool-item:hover,


.tool-grid-compact .tool-item:hover,


.tools-section .tool-item:hover {


    border: 1px solid rgba(139, 92, 246, 0.4) !important;


    background: rgba(139, 92, 246, 0.1) !important;


    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3) !important;


    transform: none !important;


}





/* 浅色模式下也同样处理 */


html[data-theme="light"] .tool-grid .tool-item,


html[data-theme="light"] .tool-grid-compact .tool-item,


html[data-theme="light"] .tools-section .tool-item {


    border: 1px solid transparent !important;


    background: transparent !important;


}





html[data-theme="light"] .tool-grid .tool-item:hover,


html[data-theme="light"] .tool-grid-compact .tool-item:hover,


html[data-theme="light"] .tools-section .tool-item:hover {


    border: 1px solid rgba(139, 92, 246, 0.4) !important;


    background: rgba(139, 92, 246, 0.1) !important;


}








/* ========== CDK版块闪烁动画 ========== */


@keyframes cdkBlink {


    0%, 100% {


        opacity: 1;


        transform: scale(1);


    }


    50% {


        opacity: 0.6;


        transform: scale(1.05);


    }


}





@keyframes cdkHandBlink {


    0%, 100% {


        opacity: 1;


        transform: translateX(0);


    }


    25% {


        opacity: 0.5;


        transform: translateX(3px);


    }


    50% {


        opacity: 1;


        transform: translateX(0);


    }


    75% {


        opacity: 0.5;


        transform: translateX(-3px);


    }


}





@keyframes cdkGlow {


    0%, 100% {


        box-shadow: 0 0 5px rgba(212, 175, 55, 0.3);


    }


    50% {


        box-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 30px rgba(139, 92, 246, 0.5);


    }


}





/* ========== 最终响应式覆盖（最高优先级） ========== */


@media (max-width: 1024px) {


    body .search-section,


    body section.search-section {


        text-align: center !important;


        margin-left: 0 !important;


        padding-left: 0 !important;


        margin-right: 0 !important;


        padding-right: 0 !important;


    }


    body .search-section .search-engines,


    body section.search-section .search-engines,


    body .search-engines {


        margin-left: 0 !important;


        margin-right: 0 !important;


        justify-content: center !important;


        width: 100% !important;


        text-align: center !important;


        display: flex !important;


        flex-wrap: wrap !important;


        float: none !important;


        position: static !important;


        left: auto !important;


    }


    body .search-section .search-box,


    body section.search-section .search-box,


    body .search-box {


        margin-left: auto !important;


        margin-right: auto !important;


        float: none !important;


        width: 80% !important;


        max-width: 600px !important;


        display: flex !important;


        justify-content: center !important;


        position: relative !important;


        left: auto !important;


    }


    body .search-box input[type="text"],


    body .search-box input[type="search"] {


        width: 100% !important;


        max-width: 100% !important;


        float: none !important;


        margin-left: 0 !important;


        margin-right: 0 !important;


    }


    body .search-section .cdk-inline,


    body section.search-section .cdk-inline,


    body .cdk-inline {


        margin-left: auto !important;


        margin-right: auto !important;


        float: none !important;


        display: block !important;


        width: 80% !important;


        max-width: 600px !important;


        text-align: center !important;


    }


}





@media (max-width: 768px) {


    body .search-section .search-box,


    body section.search-section .search-box,


    body .search-box {


        width: calc(100% - 24px) !important;


        max-width: calc(100% - 24px) !important;


    }


    body .search-section .cdk-inline,


    body section.search-section .cdk-inline,


    body .cdk-inline {


        width: auto !important;


        max-width: fit-content !important;


        display: inline-block !important;


        margin-left: auto !important;


        margin-right: auto !important;


        float: none !important;


    }


    body .search-section {


        text-align: center !important;


    }


    /* 移动端顶部按钮区域避开左上角菜单按钮 */


    body .top-right-buttons {


        padding-left: 60px !important;


        justify-content: center !important;


        flex-wrap: wrap !important;


        gap: 8px !important;


    }


    body .top-right-ladder-tip {


        margin-left: 0 !important;


    }


}





/* CDK鼠标图标闪烁 */


.cdk-hand.cdk-blink {


    display: inline-block;


    animation: cdkHandBlink 1s ease-in-out infinite;


    color: #d4af37;


    margin-left: 5px;


    font-size: 16px;


}





/* 整个CDK版块闪烁发光 */


.cdk-inline.cdk-module-blink {


    animation: cdkGlow 2s ease-in-out infinite;


    border-radius: 8px;


    transition: all 0.3s;


}





.cdk-inline.cdk-module-blink:hover {


    animation: none;


    box-shadow: 0 0 25px rgba(212, 175, 55, 0.6);


    transform: scale(1.02);


}





/* 浅色模式下的闪烁效果 */


html[data-theme="light"] .cdk-inline.cdk-module-blink {


    animation: cdkGlow 2s ease-in-out infinite;


}





/* ========== 修复搜索下拉框高度 - 确保3排完整显示 ========== */


#searchSuggest .suggest-list,


#searchSuggest .suggest-list-horizontal,


.search-suggest .suggest-list,


.search-suggest .suggest-list-horizontal {


    max-height: 120px !important;


    overflow-y: auto !important;


    padding: 10px !important;


}





/* 搜索下拉框外层高度 */


#searchSuggest,


.search-suggest {


    max-height: 180px !important;


    overflow-y: auto !important;


    overflow-x: hidden !important;


}





/* 搜索历史列表高度 */


#searchHistory .search-history-list,


.search-history .search-history-list {


    max-height: 72px !important;


    overflow-y: auto !important;


}





/* 搜索历史外层高度 */


#searchHistory,


.search-history {


    max-height: 180px !important;


    overflow-y: auto !important;


}





/* ========== 修复搜索框overflow导致下拉框被裁剪 ========== */


.search-box {


    overflow: visible !important;


}





/* 确保搜索下拉框在搜索框外面能正常显示 */


.search-suggest,


.search-history {


    overflow: visible !important;


    overflow-y: auto !important;


}





/* ========== 修复父元素overflow:hidden导致搜索下拉框被裁剪 ========== */


.search-section {


    overflow: visible !important;


}





.container {


    overflow: visible !important;


}





.site-main {


    overflow: visible !important;


}





/* 确保搜索下拉框能正常显示在最上层 */


.search-suggest,


.search-history {


    z-index: 999999 !important;


    position: absolute !important;


}








/* ========== 2K search box shift right 4cm (151px) ========== */


@media (min-width: 2560px) {


    .search-section .search-engines {


        transform: translateX(227px) !important;


    }


    .search-section .search-box {


        transform: translateX(227px) !important;


    }


}





























/* ========== 1K search box shift right 0.4cm (15px) ========== */


@media (min-width: 1024px) and (max-width: 2559px) {


    html body section.search-section .search-engines,


    html body .search-section .search-engines {


        transform: translateX(15px) !important;


    }


    html body section.search-section .search-box,


    html body .search-section .search-box {


        transform: translateX(15px) !important;


    }


}

















/* ========== 苹果手机端：顶部按钮水平线对齐 ========== */


@media (max-width: 768px) {


    /* 隐藏"联系我们"文字标签 */


    .top-right-buttons .top-right-label {


        display: none !important;


    }


    


    /* "部分网站视频需梯子"在左上角菜单按钮右边 */


    .top-right-buttons .top-right-ladder-tip {


        position: fixed !important;


        top: 20px !important;


        left: 62px !important;


        transform: none !important;


        display: inline-block !important;


        font-size: 10px !important;


        padding: 4px 10px !important;


        margin: 0 !important;


        white-space: nowrap !important;


        z-index: 101 !important;


    }


    


    /* 右上角三个按钮：调整到同一水平线，向右上角移动 */


    .top-right-buttons {


        position: fixed !important;


        top: 14px !important;


        right: 10px !important;


        left: auto !important;


        padding: 0 !important;


        gap: 6px !important;


        height: auto !important;


        justify-content: flex-end !important;


        flex-wrap: nowrap !important;


        z-index: 101 !important;


    }


    


    /* 图标按钮大小 */


    .top-right-buttons .top-btn,


    .top-right-buttons #themeToggle {


        width: 32px !important;


        height: 32px !important;


        font-size: 14px !important;


        min-width: 32px !important;


        display: flex !important;


        align-items: center !important;


        justify-content: center !important;


    }


    


    /* 搜索区域恢复正常间距 */


    .search-section {


        margin-top: 10px !important;


    }


}





/* ========== 苹果手机端：留言板LOGO向下移动，避免被顶部覆盖 ========== */


@media (max-width: 768px) {


    .page-logo-bar {


        padding-top: 65px !important;


        padding-bottom: 15px !important;


        margin-bottom: 10px !important;


    }


    .page-logo-bar img {


        max-height: 40px !important;


        width: auto !important;


    }


    .page-logo-name {


        font-size: 20px !important;


    }


    .page-logo-subtitle {


        font-size: 11px !important;


    }


}








/* ========== 清空历史按钮定位到右上角 ========== */


#clearHistory {


    position: absolute !important;


    top: 8px !important;


    right: 8px !important;


    width: 32px !important;


    height: 32px !important;


    padding: 0 !important;


    display: flex !important;


    align-items: center !important;


    justify-content: center !important;


    border-radius: 8px !important;


    margin: 0 !important;


    border: none !important;


    z-index: 10 !important;


}





#clearHistory i {


    font-size: 14px !important;


    margin: 0 !important;


}





/* 历史记录列表添加右边距，避免和清空按钮重叠 */


.search-history-list {


    padding-right: 44px !important;


}





/* 下拉框容器设置为relative，让绝对定位生效 */


.search-history {


    position: absolute !important;


}





/* ========== 历史记录列表右边距，避免被清空按钮遮挡 ========== */


#searchHistory .search-history-list,


.search-history .search-history-list {


    padding-right: 48px !important;


}





/* ========== 最高优先级：历史记录列表右边距 ========== */


html body div#searchHistory.search-history div.search-history-list {


    padding-right: 48px !important;


    padding-left: 8px !important;


}





/* ============================================


   星星背景效果 - 开始


   如需恢复，删除此段到"星星背景效果 - 结束"之间的所有内容


   ============================================ */





body {


    position: relative;


    overflow-x: hidden;


}





body::before {


    content: '';


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    pointer-events: none;


    z-index: 0;


    background-image: 


        /* 小星星 */


        radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.8), transparent),


        radial-gradient(1px 1px at 40px 70px, rgba(255,255,255,0.6), transparent),


        radial-gradient(1px 1px at 50px 160px, rgba(255,255,255,0.7), transparent),


        radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.5), transparent),


        radial-gradient(1px 1px at 130px 80px, rgba(255,255,255,0.8), transparent),


        radial-gradient(1px 1px at 160px 120px, rgba(255,255,255,0.6), transparent),


        /* 中等星星 */


        radial-gradient(2px 2px at 200px 50px, rgba(255,255,255,0.9), transparent),


        radial-gradient(2px 2px at 250px 150px, rgba(255,255,255,0.7), transparent),


        radial-gradient(2px 2px at 300px 200px, rgba(255,255,255,0.8), transparent),


        radial-gradient(2px 2px at 350px 100px, rgba(255,255,255,0.6), transparent),


        /* 大星星 */


        radial-gradient(3px 3px at 400px 180px, rgba(255,255,255,0.9), transparent),


        radial-gradient(3px 3px at 450px 60px, rgba(255,255,255,0.8), transparent),


        /* 第二组星星（偏移） */


        radial-gradient(1px 1px at 500px 140px, rgba(255,255,255,0.7), transparent),


        radial-gradient(1px 1px at 550px 200px, rgba(255,255,255,0.5), transparent),


        radial-gradient(2px 2px at 600px 90px, rgba(255,255,255,0.8), transparent),


        radial-gradient(1px 1px at 650px 170px, rgba(255,255,255,0.6), transparent),


        radial-gradient(3px 3px at 700px 130px, rgba(255,255,255,0.9), transparent),


        radial-gradient(1px 1px at 750px 50px, rgba(255,255,255,0.7), transparent),


        radial-gradient(2px 2px at 800px 190px, rgba(255,255,255,0.8), transparent),


        radial-gradient(1px 1px at 850px 110px, rgba(255,255,255,0.5), transparent),


        radial-gradient(3px 3px at 900px 160px, rgba(255,255,255,0.9), transparent),


        radial-gradient(1px 1px at 950px 70px, rgba(255,255,255,0.6), transparent);


    background-repeat: repeat;


    background-size: 1000px 250px;


    animation: twinkle 8s ease-in-out infinite alternate;


}





body::after {


    content: '';


    position: fixed;


    top: 0;


    left: 0;


    width: 100%;


    height: 100%;


    pointer-events: none;


    z-index: 0;


    background-image: 


        radial-gradient(1px 1px at 100px 200px, rgba(200,200,255,0.6), transparent),


        radial-gradient(2px 2px at 200px 250px, rgba(255,255,255,0.7), transparent),


        radial-gradient(1px 1px at 300px 220px, rgba(255,255,255,0.5), transparent),


        radial-gradient(3px 3px at 400px 280px, rgba(200,200,255,0.8), transparent),


        radial-gradient(1px 1px at 500px 240px, rgba(255,255,255,0.6), transparent),


        radial-gradient(2px 2px at 600px 300px, rgba(255,255,255,0.7), transparent),


        radial-gradient(1px 1px at 700px 260px, rgba(200,200,255,0.5), transparent),


        radial-gradient(3px 3px at 800px 230px, rgba(255,255,255,0.8), transparent),


        radial-gradient(1px 1px at 900px 290px, rgba(255,255,255,0.6), transparent);


    background-repeat: repeat;


    background-size: 1000px 350px;


    animation: twinkle 12s ease-in-out infinite alternate-reverse;


    opacity: 0.7;


}





@keyframes twinkle {


    0% {


        opacity: 0.4;


    }


    50% {


        opacity: 0.8;


    }


    100% {


        opacity: 0.6;


    }


}





/* 确保页面内容在星星背景之上 */


body > * {


    position: relative;


    z-index: 1;


}





/* ============================================


   星星背景效果 - 结束


   ============================================ */







/* 返回主页按钮 - 精美样式 */
.post-back-home,
.list-back-home {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
}

.back-home-btn {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(168, 85, 247, 0.35);
    color: #e9d5ff !important;
    text-decoration: none !important;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
}

.back-home-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
    transition: left 0.6s ease;
}

.back-home-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
    border-color: rgba(168, 85, 247, 0.6);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3),
                0 0 0 1px rgba(168, 85, 247, 0.1) inset;
    text-decoration: none !important;
}

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

.back-home-btn:active {
    transform: translateY(0);
}

.back-home-btn i {
    font-size: 15px;
    transition: transform 0.3s ease;
}

.back-home-btn:hover i {
    transform: translateX(-3px);
}

@media (max-width: 768px) {
    .post-back-home,
    .list-back-home {
        margin-bottom: 18px;
    }
    
    .back-home-btn {
        padding: 8px 18px;
        font-size: 13px;
        gap: 8px;
    }
}

/* 浅色主题适配 */
[data-theme="light"] .back-home-btn {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(168, 85, 247, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    color: #7c3aed !important;
}

[data-theme="light"] .back-home-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
    border-color: rgba(139, 92, 246, 0.4);
    color: #6d28d9 !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.15);
}






[data-theme="light"] .back-home-btn:hover {


    background: rgba(0, 0, 0, 0.08);


    border-color: rgba(0, 0, 0, 0.15);


    color: #000;


    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);


}





[data-theme="light"] .back-home-btn::before {


    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);


}





/* 响应式适配 */


@media (max-width: 768px) {


    .post-back-home,


    .list-back-home {


        margin-bottom: 18px;


    }


    


    .back-home-btn {


        padding: 8px 18px;


        font-size: 13px;


        gap: 8px;


    }


    


    .back-home-btn i {


        font-size: 14px;


    }


}





}