@charset "utf-8";

/* ========================================
   CSS自定义属性 - 支持动态主题切换
======================================== */
:root {
    /* 主色调 - 改为蓝色系 */
    --primary-color: #1387c0;          /* 保留主蓝色 */
    --primary-hover: #0f6699;          /* 保留蓝色悬停态 */
    --primary-light: #e1f2fd;          /* 保留浅蓝色背景 */
    
    /* 辅助色 */
    --accent-color: #4299e1;           /* 更换为蓝色强调色 */
    --accent-hover: #3182ce;           /* 更换为蓝色悬停态 */
    --accent-light: #ebf8ff;           /* 更换为浅蓝色背景 */
    --warm-base: #e6f6ff;              /* 更换为浅蓝色基调(原黄色) */
    --warm-darker: #c2e0ff;            /* 更换为更深的浅蓝色 */
    
    /* 背景色系 - 改为蓝色系 */
    --bg-primary: linear-gradient(135deg, #e6f6ff 0%, #dff0ff 100%);
    --bg-secondary: rgba(230, 246, 255, 0.95);
    --bg-glass: rgba(230, 246, 255, 0.25);
    --bg-card: #ffffff;
    --bg-warm: #e6f6ff;
    
    /* 边框和阴影 - 蓝色调 */
    --border-color: rgba(194, 224, 255, 0.6);
    --border-light: rgba(230, 246, 255, 0.8);
    --shadow-small: 0 2px 8px rgba(19, 135, 192, 0.08);
    --shadow-medium: 0 8px 25px rgba(19, 135, 192, 0.12);
    --shadow-large: 0 20px 40px rgba(19, 135, 192, 0.08);
    --shadow-primary: 0 8px 16px rgba(19, 135, 192, 0.2);
    --shadow-warm: 0 4px 12px rgba(66, 153, 225, 0.15);
    
    /* 功能色彩 */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    
    /* 文字颜色 - 确保在温馨背景上清晰可读 */
    --text-primary: #2d3748;          /* 深灰色 - 主要文字 */
    --text-secondary: #4a5568;        /* 中灰色 - 次要文字 */
    --text-muted: #718096;            /* 浅灰色 - 辅助文字 */
    --text-on-primary: #ffffff;       /* 主色上的文字 */
    --text-on-warm: #2d3748;          /* 温馨背景上的文字 */
    
    /* 圆角 */
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-full: 9999px;
    
    /* 间距 */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    
    /* 动画 */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 夜晚主题 - 专业夜间配色 #e9edf0 #ffbaac #759148 */
[data-theme="dark"] {
    /* 主色调 - 橄榄绿为主色 */
    --primary-color: #759148;          /* 橄榄绿主色 - 舒缓的夜间色调 */
    --primary-hover: #8aa055;          /* 橄榄绿悬停态 - 更明亮 */
    --primary-light: #2a3320;          /* 深橄榄绿 - 背景装饰 */
    
    /* 辅助色 - 温暖的桃色强调 */
    --accent-color: #ffbaac;           /* 桃色强调色 - 温暖点缀 */
    --accent-hover: #ff9d87;          /* 桃色悬停态 */
    --accent-light: #4a2b26;          /* 深桃色背景 */
    --warm-base: #2d3339;             /* 深色基调 */
    --warm-darker: #252a2f;           /* 更深的基调 */
    
    /* 功能色彩 - 夜间适配 */
    --success-color: #759148;
    --warning-color: #ffbaac;
    --error-color: #ff6b6b;
    
    /* 背景色系 - 深色舒适护眼 */
    --bg-primary: linear-gradient(135deg, #1a1f25 0%, #252a30 100%);
    --bg-secondary: rgba(41, 51, 57, 0.95);
    --bg-glass: rgba(26, 31, 37, 0.85);
    --bg-card: #2d3339;
    --bg-warm: #252a30;
    
    /* 文字颜色 - 浅灰色为主，确保夜间阅读舒适 */
    --text-primary: #e9edf0;          /* 浅灰色 - 主要文字 */
    --text-secondary: #c7cdd3;        /* 中灰色 - 次要文字 */
    --text-muted: #9ca3af;            /* 更浅灰色 - 辅助文字 */
    --text-on-primary: #ffffff;       /* 主色上的文字 */
    --text-on-warm: #e9edf0;          /* 温馨背景上的文字 */
    
    /* 边框和阴影 - 柔和夜间效果 */
    --border-color: rgba(117, 145, 72, 0.3);
    --border-light: rgba(233, 237, 240, 0.1);
    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-medium: 0 8px 25px rgba(0, 0, 0, 0.5);
    --shadow-large: 0 20px 40px rgba(0, 0, 0, 0.6);
    --shadow-primary: 0 8px 16px rgba(117, 145, 72, 0.3);
    --shadow-warm: 0 4px 12px rgba(255, 186, 172, 0.2);
}

/* ========================================
   基础样式重置和优化
======================================== */
* {
    padding: 0;
    margin: 0;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    box-sizing: border-box;
}

/* 强制移除所有点击边框和高亮效果 */
*, *:focus, *:active, *:hover {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    -webkit-appearance: none !important;
}

/* 特别处理搜索引擎切换按钮的所有状态 */
.lg,
.lg:focus, 
.lg:active, 
.lg:hover,
.lg.interactive-element,
.lg.micro-animation,
.lg.focus-ring {
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    background-color: transparent !important;
}

/* 移除侧边栏链接的所有边框效果 */
.list ul li.link a,
.list ul li.link a:focus,
.list ul li.link a:active,
.list ul li.link a:visited {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

html, body {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: var(--bg-primary);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 完全隐藏所有滚动条 */
*::-webkit-scrollbar {
    display: none;
    width: 0;
}

html, body, * {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 移除所有可能的边框和轮廓 */
html, body {
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
}

/* 确保页面容器没有边界 */
#content, .con {
    border: none;
    outline: none;
}

/* 背景装饰效果已移除 */

html {
    font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    border: none !important;
}

/* 个人中心按钮不受全局链接样式影响 */
a.user-center {
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
}

a:hover:not(.user-center) {
    color: var(--primary-color);
    transform: translateY(-1px);
}

/* 强制移除所有链接的点击反馈效果 - 但排除按钮 */
a:active:not(.user-center),
a:focus:not(.user-center),
a:visited:not(.user-center) {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* 专门针对个人中心按钮的强制样式 */
.user-center {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

form, input, button {
    padding: 0;
    margin: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
}

input::-webkit-input-placeholder {
    color: var(--text-muted);
    letter-spacing: 0.5px;
    font-size: 16px;
    font-weight: 400;
}

ul, li {
    display: block;
    list-style: none;
}

/* ========================================
   主要内容区域 - 专业布局
======================================== */
#content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 10;
    position: relative;
    padding: 0;
    box-sizing: border-box;
}

.con {
    width: 100%;
    transition: var(--transition-normal);
    margin: 0 auto;
    min-width: 320px;
    max-width: 640px;
    padding: 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    position: relative;
    min-height: 85vh;
    gap: var(--space-xl);
    padding-top: var(--space-xl);
}

/* Logo样式优化 - 黄金比例设计 */
.con .shlogo {
    position: relative;
    width: 240px;
    height: 64px;
    margin: 0 auto;
    background: url(icon/logo3.svg) no-repeat center/contain;
    transition: var(--transition-normal);
    filter: drop-shadow(0 2px 8px rgba(19, 135, 192, 0.12));
    cursor: pointer;
    border-radius: var(--radius-medium);
}

.con .shlogo:hover {
    transform: translateY(-2px) scale(1.02);
    filter: drop-shadow(0 4px 16px rgba(19, 135, 192, 0.2));
}

/* ========================================
   搜索框区域 - 专业UI设计
======================================== */
.con .sou {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
}

.con .sou form {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 4px;
    transition: var(--transition-normal);
    box-shadow: var(--shadow-medium);
}

.con .sou form:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-large);
    border-color: rgba(79, 70, 229, 0.2);
}

.con .sou form:focus-within {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, 0.15);
    border-color: transparent;
}

/* 搜索引擎切换按钮 */
.con .sou .lg {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: var(--transition-normal);
    background-color: transparent;
    box-shadow: none;
    border: none;
    outline: none;
    margin-left: 10px;
    margin-right: 8px;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    opacity: 1;
}

.con .sou .lg:hover {
    transform: scale(1.1);
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.con .sou .lg:active {
    transform: scale(0.95);
    opacity: 0.7;
}

/* 搜索输入框 */
.con .sou .wd {
    flex: 1;
    height: 48px;
    padding: 0 16px;
    font-size: 16px;
    color: var(--text-primary);
    background: transparent;
    border: none;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* 移除聚焦时的边框和轮廓 */
.con .sou .wd:focus,
.con .sou .wd.focus-ring:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.con .sou .wd::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    opacity: 0.8;
}

/* 搜索按钮 - 简洁设计 */
.con .sou button {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-medium);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    flex-shrink: 0;
    box-shadow: none;
    border: none;
    outline: none;
    opacity: 0.8;
}

.con .sou button:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
    color: var(--primary-color);
    opacity: 1;
}

.con .sou button:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.15);
    opacity: 0.9;
}

/* ========================================
   搜索建议下拉框 - 专业设计
======================================== */
.con .sou #word {
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-medium);
    left: 0;
    position: absolute;
    z-index: 500;
    top: 60px;
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    line-height: 1.5;
    font-size: 15px;
    overflow: hidden;
    display: none;
    box-shadow: var(--shadow-large);
    transition: var(--transition-normal);
    margin-top: 8px;
    padding: var(--space-xs) 0;
}

.con .sou #word li {
    cursor: pointer;
    color: var(--text-primary);
    padding: 10px 16px;
    transition: var(--transition-fast);
    border-radius: 0;
    margin: 2px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 400;
    position: relative;
}

.con .sou #word li:hover,
.con .sou #word li.active {
    background: var(--primary-light);
    color: var(--primary-color);
    padding-left: 20px;
}

/* 添加搜索建议图标 */
.con .sou #word li i {
    color: var(--text-muted);
    font-size: 14px;
    opacity: 0.7;
    transition: var(--transition-fast);
}

.con .sou #word li:hover i,
.con .sou #word li.active i {
    color: var(--primary-color);
    opacity: 1;
}

/* 暗色模式下的搜索建议样式 */
@media (prefers-color-scheme: dark) {
    .con .sou #word {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
        color: #e5e7eb !important;
    }
    
    .con .sou #word li {
        color: #e5e7eb !important;
    }
    
    .con .sou #word li:hover {
        background-color: rgba(59, 130, 246, 0.2) !important;
        color: #93c5fd !important;
    }
    
    .con .sou #word li.active {
        background-color: rgba(59, 130, 246, 0.2) !important;
        color: #93c5fd !important;
    }
}

.dark-theme .con .sou #word {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}

.dark-theme .con .sou #word li {
    color: #e5e7eb !important;
}

.dark-theme .con .sou #word li:hover {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

.dark-theme .con .sou #word li.active {
    background-color: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
}

/* ========================================
   侧边导航菜单 - 专业UI设计
======================================== */
#menu {
    width: 48px;
    height: 48px;
    position: fixed;
    left: 24px;
    top: 24px;
    z-index: 2000000;
    cursor: pointer;
    transition: var(--transition-normal);
    border-radius: var(--radius-medium);
    background: var(--bg-card);
    backdrop-filter: blur(20px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-small);
}

#menu i {
    position: relative;
    width: 18px;
    height: 2px;
    background: var(--text-primary);
    transition: var(--transition-normal);
    border-radius: 1px;
}

#menu i:before,
#menu i:after {
    content: '';
    position: absolute;
    width: 18px;
    height: 2px;
    background: var(--text-primary);
    transition: var(--transition-normal);
    border-radius: 1px;
}

#menu i:before {
    top: -5px;
}

#menu i:after {
    bottom: -5px;
}

#menu:hover {
    background: var(--bg-secondary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

#menu.on {
    left: 320px;
    top: 16px;
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-primary);
    z-index: 2001;
}

#menu.on i {
    background: transparent;
}

#menu.on i:before {
    top: 0;
    transform: rotate(-45deg);
    background: var(--primary-color);
}

#menu.on i:after {
    bottom: 0;
    transform: rotate(45deg);
    background: var(--primary-color);
}

/* 现代化侧边栏设计 - 优化尺寸 */
.list {
    width: 300px;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    position: fixed;
    left: 0px;
    top: 0;
    z-index: 2000;
    background: var(--bg-primary); /* 修改为与主页背景一致 */
    border-right: 1px solid var(--border-color);
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: none; /* 移除阴影效果 */
}

/* 侧边栏装饰区域已完全移除 */

/* 侧边栏顶部装饰区 - 已移至.list下方定义 */

/* 装饰区域 - 搜索图标已删除 */

/* 每日一言已移除 */
.daily-quote {
    display: none !important;
}

/* 简化后的每日一言样式 - 删除所有装饰 */

/* 侧边栏内容区 */
.list > * {
    padding-left: 0;
    padding-right: 0;
}

/* 侧边栏导航内容区 */
.list > ul {
    margin-top: 80px;
    padding: 0 16px 24px 16px;
    position: relative;
    z-index: 3;
}

.list.closed {
    left: -300px;
}

/* 暗色主题侧边栏适配 */
[data-theme="dark"] .list {
    background: var(--bg-primary); /* 修改为与主页背景一致 */
    border-right: 1px solid rgba(75, 85, 99, 0.3);
    box-shadow: none; /* 移除阴影效果 */
}

[data-theme="dark"] .list .search input {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .list .search input::placeholder {
    color: var(--text-muted);
}

/* 暗色主题每日一言已移除 */

[data-theme="dark"] .list ul li.title {
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.8) 0%, 
        rgba(17, 24, 39, 0.4) 100%);
    border-bottom-color: rgba(75, 85, 99, 0.4);
}

[data-theme="dark"] .list ul li.link a {
    background: rgba(31, 41, 55, 0.3);
    border-color: rgba(75, 85, 99, 0.2);
}

[data-theme="dark"] .list ul li.link a:hover {
    background: linear-gradient(135deg, 
        rgba(107, 114, 128, 0.15) 0%, 
        rgba(107, 114, 128, 0.08) 100%);
    border-color: rgba(107, 114, 128, 0.3);
}

/* 暗色主题移动端适配 */
@media (max-width: 480px) {
    [data-theme="dark"] .list ul li.title {
        background: linear-gradient(135deg, 
            rgba(31, 41, 55, 0.9) 0%, 
            rgba(17, 24, 39, 0.5) 100%);
        border-bottom-color: rgba(75, 85, 99, 0.4);
    }
    
    [data-theme="dark"] .list ul li.title::after {
        background: rgba(31, 41, 55, 0.9);
        color: var(--text-muted);
    }
    
    [data-theme="dark"] .list ul li.link a {
        background: rgba(31, 41, 55, 0.4);
        border-color: rgba(75, 85, 99, 0.3);
    }
    
    [data-theme="dark"] .list ul li.link a:active {
        background: linear-gradient(135deg, 
            rgba(107, 114, 128, 0.2) 0%, 
            rgba(107, 114, 128, 0.1) 100%);
        border-color: rgba(107, 114, 128, 0.4);
    }
}

/* 自定义滚动条 */
.list::-webkit-scrollbar {
    width: 6px;
}

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

.list::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.list::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

/* 现代化侧边栏搜索框设计 */
.list .search {
    position: absolute;
    top: 24px;
    left: 20px;
    right: 20px;
    z-index: 10;
    margin-bottom: 24px;
}

.list .search input {
    width: 100%;
    height: 44px;
    padding: 0 48px 0 20px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 400;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    letter-spacing: 0.01em;
    outline: none;
}

.list .search input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
    opacity: 0.8;
}

.list .search input:focus {
    border-color: var(--primary-color);
    box-shadow: 
        0 4px 20px rgba(107, 114, 128, 0.08),
        0 0 0 3px rgba(107, 114, 128, 0.1);
    background: var(--bg-card);
    transform: translateY(-1px);
}

.list .search i {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 16px;
    pointer-events: none;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.list .search input:focus + i {
    color: var(--primary-color);
    opacity: 1;
}

/* 现代化分类标题设计 */
.list ul li.title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 700;
    padding: 16px 24px;
    margin: 0 16px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: 0.02em;
    position: relative;
    cursor: pointer;
    user-select: none;
    transition: none;
    background: rgba(240, 240, 240, 0.6); /* 添加轻微的灰色背景 */
    border-radius: 12px;
    border-bottom: none;
}

.list ul li.title i {
    color: var(--primary-color);
    font-size: 16px;
    background: transparent;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

/* 移除折叠指示器 */
.list ul li.title::after {
    display: none;
}

/* 移除悬停效果 */
.list ul li.title:hover {
    transform: none;
    background: rgba(240, 240, 240, 0.6); /* 保持背景色不变 */
}

.list ul li.title:hover i {
    transform: none;
    box-shadow: none;
}

.list ul li.link {
    margin-bottom: 2px;
}

/* 链接样式简化 */
.list ul li.link a {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: none;
    text-decoration: none;
    margin: 0 16px 2px;
    background: rgba(245, 245, 245, 0.5); /* 添加非常轻微的灰色背景 */
    border: none;
}

.list ul li.link a:hover {
    background: rgba(245, 245, 245, 0.7); /* 稍微加深背景色 */
    color: var(--primary-color);
    transform: none;
    box-shadow: none;
}

/* 移除左侧指示器 */
.list ul li.link a::before {
    display: none;
}

/* 网站名称样式 */
.list ul li.link a .site-title {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 8px;
}

/* 暗色模式下的背景色调整 */
[data-theme="dark"] .list ul li.title {
    background: rgba(50, 50, 60, 0.3); /* 暗色模式下的灰色背景 */
}

[data-theme="dark"] .list ul li.title:hover {
    background: rgba(50, 50, 60, 0.3); /* 保持背景色不变 */
}

[data-theme="dark"] .list ul li.link a {
    background: rgba(45, 45, 55, 0.2); /* 暗色模式下的灰色背景 */
}

[data-theme="dark"] .list ul li.link a:hover {
    background: rgba(45, 45, 55, 0.4); /* 暗色模式下悬停时加深背景 */
}

/* 智能链接图标系统 - 优化尺寸 */
.smart-link-icon {
    display: none;
}

/* 图片图标样式 - 优化尺寸 */
.link-icon-image {
    display: none;
}

/* 首字母头像样式 - 优化尺寸 */
.link-letter-avatar {
    display: none;
}

/* 字体图标样式 - 优化尺寸 */
.smart-link-icon i {
    font-size: 16px;
    transition: all 0.3s ease;
}

.smart-link-icon:hover i {
    transform: scale(1.1);
}

/* 现代化网站图标容器 - 统一尺寸 */
.list ul li.link a .icon-container {
    display: none;
}

/* 自定义上传图标样式 */
.list ul li.link a .icon-container img.custom-icon {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 4px;
    padding: 0;
    background: #fff !important;
}

/* Font Awesome图标样式 - 统一尺寸 */
.list ul li.link a .icon-container i {
    font-size: 18px;
    color: var(--primary-color);
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 美化的默认图标样式 */
.list ul li.link a .icon-container.no-icon::before {
    content: attr(data-title);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: var(--primary-color);
    text-transform: uppercase;
    z-index: 1; /* 确保伪元素在图片上方 */
}

/* 移除不必要的动画 */

.list ul li.link a .icon-container .default-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: var(--primary-color);
    text-transform: uppercase;
    border-radius: var(--radius-medium);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    flex-shrink: 0;
}

/* 简化颜色设置 */

.list ul li.link a .icon-container img {
    width: 24px;
    height: 24px;
    max-width: 24px;
    max-height: 24px;
    object-fit: contain;
    transition: var(--transition-fast);
}

.list ul li.link a:hover .icon-container {
    transform: scale(1.08);
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.2);
    border-color: var(--primary-color);
}

.list ul li.link a:hover .icon-container img {
    transform: scale(1.02);
}

.list ul li.link a:hover .icon-container.no-icon::before,
.list ul li.link a:hover .icon-container .default-icon {
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
}

/* ========================================
   主题切换和用户中心按钮 - 统一背景样式
======================================== */
.theme-toggle,
.user-center {
    position: fixed;
    top: 24px;
    z-index: 10000;
    padding: 9px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-normal);
    display: flex !important;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: 38px;
    opacity: 1 !important;
    visibility: visible !important;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-small);
    /* 强制移除移动端点击高亮 */
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -khtml-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    outline: none !important;
}

/* 悬停和交互状态 */
.theme-toggle:hover,
.user-center:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

.theme-toggle:active,
.user-center:active {
    transform: translateY(0);
    box-shadow: var(--shadow-small);
}

/* 移除所有点击高亮效果 */
.theme-toggle,
.theme-toggle:focus,
.theme-toggle:active,
.theme-toggle:hover,
.theme-toggle:visited,
.theme-toggle:link,
.user-center,
.user-center:focus,
.user-center:active,
.user-center:hover,
.user-center:visited,
.user-center:link {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
    -webkit-touch-callout: none !important;
    outline: none !important;
}

/* 个人中心链接样式 - 与主题切换按钮完全一致 */
a.user-center,
a.user-center:visited,
a.user-center:link {
    text-decoration: none !important;
    color: var(--text-primary) !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    outline: none !important;
    /* 确保基础样式和主题按钮一致 */
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--shadow-small) !important;
}

a.user-center:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
}

a.user-center:active {
    background: var(--bg-secondary) !important;
    transform: translateY(0) !important;
    box-shadow: var(--shadow-small) !important;
    border-color: var(--border-color) !important;
}

/* 专门处理点击等待跳转时的状态 */
a.user-center:active::before,
a.user-center:active::after,
a.user-center::before,
a.user-center::after {
    display: none !important;
    content: none !important;
    background: transparent !important;
    border: none !important;
}
    
    .theme-toggle {
    right: 140px;
}

.user-center {
    right: 24px;
}

/* 暗色主题适配 */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .user-center {
    background: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .user-center:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* 这些冲突的样式已被移除，统一使用前面定义的悬停效果 */

/* 强制统一两个按钮的所有样式 */
.theme-toggle,
.user-center {
    /* 基础样式完全一致 */
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--shadow-small) !important;
    color: var(--text-primary) !important;
}

/* 悬停状态完全一致 */
.theme-toggle:hover,
.user-center:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
}

/* 激活状态完全一致 */
.theme-toggle:active,
.user-center:active {
    background: var(--bg-secondary) !important;
    transform: translateY(0) !important;
    box-shadow: var(--shadow-small) !important;
    border-color: var(--border-color) !important;
}

/* 暗色主题下完全一致 */
[data-theme="dark"] .theme-toggle,
[data-theme="dark"] .user-center {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .user-center:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
}

[data-theme="dark"] .theme-toggle:active,
[data-theme="dark"] .user-center:active {
    background: var(--bg-secondary) !important;
    transform: translateY(0) !important;
    box-shadow: var(--shadow-small) !important;
    border-color: rgba(75, 85, 99, 0.5) !important;
}

/* 🔥 超级强制规则 - 确保个人中心和主题切换按钮100%一致 */
html .theme-toggle,
html .user-center,
html a.user-center {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    backdrop-filter: blur(20px) !important;
    box-shadow: var(--shadow-small) !important;
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

html .theme-toggle:hover,
html .user-center:hover,
html a.user-center:hover {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
}

html .theme-toggle:active,
html .user-center:active,
html a.user-center:active {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
    transform: translateY(0) !important;
    box-shadow: var(--shadow-small) !important;
}

html .theme-toggle:focus,
html .user-center:focus,
html a.user-center:focus {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-small) !important;
    outline: none !important;
}

html .theme-toggle:visited,
html .user-center:visited,
html a.user-center:visited {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* 暗色主题超级强制规则 */
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .user-center,
html[data-theme="dark"] a.user-center {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .user-center:hover,
html[data-theme="dark"] a.user-center:hover {
    background: rgba(55, 65, 81, 0.95) !important;
    color: #f9fafb !important;
    border-color: rgba(75, 85, 99, 0.5) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-medium) !important;
}

.theme-toggle i,
.user-center i {
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.9;
    }

.theme-toggle span,
.user-center span {
    font-size: inherit;
    font-weight: 500;
    letter-spacing: 0.01em;
    }
    
/* ========================================
   页脚 - 专业语义化设计
======================================== */
.site-footer {
    margin-top: 60px;
    padding: 24px 20px;
    text-align: center;
    width: 100%;
    background: var(--bg-primary);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
    transition: var(--transition-normal);
}

.site-footer p {
    margin: 0;
    word-wrap: break-word;
}

.site-footer a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-normal);
    font-weight: 500;
    padding: 2px 4px;
    border-radius: 4px;
}

.site-footer a:hover {
    color: var(--primary-hover);
    background: rgba(99, 102, 241, 0.1);
    transform: translateY(-1px);
}

/* 暗色模式适配 */
[data-theme="dark"] .site-footer {
    background: var(--bg-primary);
    color: var(--text-muted);
}

[data-theme="dark"] .site-footer a:hover {
    background: rgba(139, 92, 246, 0.15);
}

/* ========================================
   响应式设计 - 专业自适应布局
======================================== */
@media (max-width: 992px) {
    .con {
        max-width: 680px;
    }
}

@media (max-width: 768px) {
    #content {
        padding: var(--space-md) var(--space-sm);
    }

    .con {
        max-width: 95%;
        padding: 0 var(--space-sm);
        gap: var(--space-lg);
        min-height: 80vh;
    }

    .con .shlogo {
        width: 180px;
        height: 48px;
    }

    .con .sou {
        max-width: 100%;
    }
    
    .con .sou form {
        height: 48px;
        padding: 6px;
    }
    
    .con .sou button {
        width: 36px;
        height: 36px;
    }
    
    .con .sou .wd {
        height: 36px;
        font-size: 14px;
        padding: 0 12px;
    }
    
    .list {
        width: 280px;
        padding: 0 0 20px;
    }

    .list.closed {
        left: -290px;
    }

    #menu.on {
        left: 290px;
    }

    /* 侧边栏装饰区域已移除 */

            .list .search {
        top: 25px;
        width: 220px;
        left: 20px;
    }
    
    .daily-quote {
        width: 220px;
        top: 70px;
        left: 20px;
        font-size: 11px;
    }

    .list > ul {
        margin-top: 70px;
    }
    
    .theme-toggle,
    .user-center {
        padding: 8px 12px;
        font-size: 12px;
        top: 16px;
        height: 34px;
    }

    .theme-toggle {
        right: 120px;
    }

    .user-center {
        right: 16px;
    }
    
    .site-footer {
        margin-top: 40px;
        padding: 24px 16px;
        font-size: 12px;
    }
}

/* ========================================
   专业响应式设计 - 移动端优先
======================================== */

/* 大屏幕 (1200px+) */
@media (min-width: 1200px) {
    #content {
        padding: var(--space-lg) var(--space-xl);
    }
    
    .con .sou .wd {
        width: 600px;
    }
}

/* 中等屏幕 (768px - 1199px) */
@media (max-width: 1199px) and (min-width: 768px) {
    #content {
        padding: var(--space-md) var(--space-lg);
    }
    
    .list {
        width: 280px;
    }
    
    .con .sou .wd {
        width: 500px;
    }
}

/* 小屏幕专业适配 (480px - 767px) */
@media (max-width: 767px) {
    body {
        font-size: 14px;
    }
    
    #content {
        padding: var(--space-sm) var(--space-md);
    }

    .con .shlogo {
        width: 200px;
        height: 55px;
        margin-bottom: 20px;
    }
    
    .con .sou {
        width: 100%;
        max-width: none;
        margin: 0;
    }
    
    .con .sou .wd {
        width: 100%;
        height: 44px;
        font-size: 16px; /* iOS避免缩放 */
        padding: 0 50px 0 16px;
        border-radius: 12px;
    }
    
    .con .sou .lg {
        width: 36px;
        height: 36px;
    }
    
    .con .sou button {
        width: 40px;
        height: 40px;
        right: 4px;
    }

    /* 侧边栏移动端优化 */
    .list {
        width: 280px;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }
    
    .list.closed {
        left: -300px;
    }
    
    /* 菜单按钮移动端优化 */
    #menu {
        width: 44px;
        height: 44px;
        top: 16px;
        left: 16px;
    }

    .list .search {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        margin-bottom: 20px;
    }
    
    .list .search input {
        height: 40px;
        font-size: 16px; /* iOS避免缩放 */
        padding: 0 40px 0 12px;
        border-radius: 10px;
    }
    
    .list .search i {
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* 分类标题移动端优化 */
    .list ul li.title {
        padding: 16px 20px 12px;
        font-size: 16px;
        font-weight: 600;
    }
    
    /* 链接项移动端优化 */
    .list ul li.link a {
        padding: 14px 20px;
        min-height: 56px; /* 触摸友好高度 */
    }
    
    .list ul li.link a .icon-container {
        width: 40px;
        height: 40px;
    }
    
    .list ul li.link a .site-title {
        font-size: 15px;
        line-height: 1.4;
    }
    
    /* 主题切换按钮移动端优化 */
    .theme-toggle {
        top: 16px;
        right: 70px;
        width: 44px;
        height: 44px;
    }
    
    .theme-toggle span {
        display: none;
    }
    
    .user-center {
        top: 16px;
        right: 16px;
        width: 44px;
        height: 44px;
    }
    
    .user-center span {
        display: none;
    }
    
    /* Footer移动端优化 */
    .site-footer {
        margin-top: 40px;
        padding: 20px 16px;
        font-size: 12px;
    }
    
    /* 触摸设备优化 */
    .list ul li.link a {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        tap-highlight-color: rgba(0,0,0,0.1);
    }
    
    .list ul li.link a:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* 防止双击缩放 */
    .con .sou .wd,
    .list .search input {
        touch-action: manipulation;
    }
}

/* 超小屏幕 (320px - 479px) */
@media (max-width: 479px) {
    #content {
        padding: var(--space-xs) var(--space-sm);
    }
    
    .con .shlogo {
        width: 160px;
        height: 44px;
        margin-bottom: 16px;
    }
    
    .con .sou .wd {
        height: 42px;
        font-size: 16px;
        padding: 0 45px 0 14px;
        border-radius: 10px;
    }
    
    .con .sou .lg {
        width: 32px;
        height: 32px;
    }
    
    .con .sou button {
        width: 36px;
        height: 36px;
    }
    
    .list {
        width: 260px;
    }
    
    .list ul li.link a {
        padding: 12px 16px;
        min-height: 52px;
    }
    
    .list ul li.link a .icon-container {
        width: 32px;
        height: 32px;
    }
    
    .list ul li.link a .site-title {
        font-size: 14px;
    }
    
    .site-footer {
        padding: 16px 12px;
        font-size: 11px;
    }
}

/* 旧的768px媒体查询已被专业响应式设计替代 */

@media (max-width: 480px) {
    #menu {
        width: 40px;
        height: 40px;
        left: 12px;
        top: 12px;
    }
    
    #menu i,
    #menu i:before,
    #menu i:after {
        width: 16px;
    }
    
    /* 移动端按钮样式 - 保持背景 */
    .theme-toggle,
    .user-center {
        top: 12px !important;
        padding: 6px !important;
        font-size: 0 !important;
        height: 32px !important;
        width: 32px !important;
        justify-content: center !important;
        /* 强制移除移动端所有点击效果 */
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -khtml-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        outline: none !important;
        /* 保持背景和边框 */
        background: var(--bg-card) !important;
        border: 1px solid var(--border-color) !important;
        backdrop-filter: blur(20px) !important;
        box-shadow: var(--shadow-small) !important;
    }
    
    /* 移动端按钮所有状态完全一致 */
    .theme-toggle:active,
    .theme-toggle:focus,
    .theme-toggle:hover,
    .user-center:active,
    .user-center:focus,
    .user-center:hover {
        -webkit-tap-highlight-color: transparent !important;
        outline: none !important;
        background: var(--bg-secondary) !important;
        color: var(--text-primary) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: var(--shadow-medium) !important;
        transform: scale(0.95) translateY(-1px) !important;
    }
    
    /* 移动端暗色主题 */
    @media (max-width: 480px) {
        [data-theme="dark"] .theme-toggle,
        [data-theme="dark"] .user-center {
            background: var(--bg-card) !important;
            border-color: var(--border-color) !important;
        }
        
        [data-theme="dark"] .theme-toggle:active,
        [data-theme="dark"] .theme-toggle:focus,
        [data-theme="dark"] .theme-toggle:hover,
        [data-theme="dark"] .user-center:active,
        [data-theme="dark"] .user-center:focus,
        [data-theme="dark"] .user-center:hover {
            background: var(--bg-secondary) !important;
            color: var(--text-primary) !important;
            border-color: var(--border-color) !important;
        }
    }
    
    .theme-toggle i,
    .user-center i {
        font-size: 14px !important;
        margin: 0 !important;
    }
    
    .theme-toggle {
        right: 55px !important; /* 调整为适中的间距 */
    }
    
    .user-center {
        right: 12px !important;
    }
    
    .con .sou form {
        padding: 3px;
    }
    
    .con .sou .lg {
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-right: 4px;
        background-color: transparent !important;
        box-shadow: none !important;
        border: none !important;
        opacity: 1;
    }
    
    .con .sou .lg:active {
        transform: scale(0.9);
        opacity: 1;
        background-color: rgba(255, 255, 255, 0.2) !important;
}

    .con .sou button {
        width: 40px;
        height: 40px;
        margin-left: 4px;
        border: none !important;
        outline: none !important;
        opacity: 0.6;
    }
    
    .con .sou button:active {
        opacity: 0.9;
        transform: scale(0.95);
        background: rgba(255, 255, 255, 0.2) !important;
}

    .con .sou .wd {
        height: 40px;
        font-size: 14px;
        padding: 0 12px;
}

        .list {
        width: 280px;
        padding: 0;
    }
    
    .list.closed {
        left: -300px;
    }

    #menu.on {
        left: 290px;
    }

    .list .search {
        top: 16px;
        left: 12px;
        right: 12px;
    }
    
    .list .search input {
        height: 36px;
        font-size: 13px;
        padding: 0 40px 0 14px;
    }

    /* 每日一言已移除 */
    
        .list > ul {
        margin-top: 60px;
        padding: 0 8px 60px 8px;
    }
    
    /* 移动端分类标题优化 */
    .list ul li.title {
        font-size: 14px;
        padding: 16px 0 10px;
        gap: 10px;
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 8px;
        padding-right: 8px;
        border-radius: 8px;
        background: linear-gradient(135deg, 
            rgba(249, 250, 251, 0.9) 0%, 
            rgba(243, 244, 246, 0.5) 100%);
    }
    
    .list ul li.title i {
        width: 26px;
        height: 26px;
        font-size: 13px;
        background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
        color: white;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(107, 114, 128, 0.15);
    }
    
    .list ul li.title::after {
        width: 20px;
        height: 20px;
        border-radius: 4px;
        font-size: 10px;
        background: rgba(243, 244, 246, 0.9);
        color: var(--text-muted);
    }
    
    /* 移动端链接优化 */
    .list ul li.link a {
        padding: 10px 12px;
        font-size: 13px;
        gap: 10px;
        margin: 0 4px;
        width: calc(100% - 8px);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.4);
        border: 1px solid rgba(229, 231, 235, 0.3);
        margin-bottom: 3px;
    }
    
    .list ul li.link a .icon-container {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        background: var(--bg-card);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    }
    
    /* 移动端分类hover效果 */
    .list ul li.title:active {
        background: linear-gradient(135deg, 
            rgba(243, 244, 246, 1) 0%, 
            rgba(249, 250, 251, 0.9) 100%);
        transform: scale(0.98);
    }
    
    .list ul li.link a:active {
        background: linear-gradient(135deg, 
            rgba(107, 114, 128, 0.08) 0%, 
            rgba(107, 114, 128, 0.04) 100%);
        border-color: rgba(107, 114, 128, 0.2);
        transform: scale(0.97);
    }
}

/* 超小屏幕设备适配 */
@media (max-width: 360px) {
    .theme-toggle {
        right: 50px;
    }
    
    .user-center {
        right: 12px;
    }
    
    /* 确保按钮不会重叠 */
    .theme-toggle,
    .user-center {
        padding: 6px;
        width: 30px;
        height: 30px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
}

/* ========================================
   现代化动画效果和交互增强
======================================== */

/* 搜索框聚焦效果 */
.list .search.focused input {
    transform: translateY(-1px);
    box-shadow: 
        0 8px 32px rgba(107, 114, 128, 0.12),
        0 0 0 4px rgba(107, 114, 128, 0.08);
}

/* 搜索匹配高亮 */
.list ul li.link.search-match a {
    background: linear-gradient(135deg, 
        rgba(16, 185, 129, 0.08) 0%, 
        rgba(16, 185, 129, 0.04) 100%);
    border-color: rgba(16, 185, 129, 0.2);
    color: var(--success-color);
}

.list ul li.link.search-match a .site-title {
    color: var(--success-color);
    font-weight: 500;
}

/* 链接悬停增强效果 */
.list ul li.link a.link-hover-active {
    transform: translateY(-3px) translateX(6px);
    box-shadow: 
        0 12px 32px rgba(107, 114, 128, 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 图标悬停动画 */
.list ul li.link a .icon-container.icon-hover {
    transform: scale(1.15) rotate(-2deg);
    box-shadow: 0 6px 20px rgba(107, 114, 128, 0.25);
}

/* 触摸反馈效果 */
.touch-feedback {
    transform: scale(0.98) !important;
    opacity: 0.8 !important;
    transition: all 0.15s ease !important;
}

/* 分类折叠动画增强 */
.list ul li.title.collapsed {
    opacity: 0.7;
}

.list ul li.title.collapsed::after {
    transform: rotate(-90deg) scale(1.1);
    color: var(--primary-color);
}

/* 移动端交互优化 */
@media (max-width: 767px) {
    .list .search.focused input {
        transform: none;
        box-shadow: 
            0 4px 16px rgba(107, 114, 128, 0.08),
            0 0 0 2px rgba(107, 114, 128, 0.06);
    }
    
    .list ul li.link a:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    /* 触摸设备优化 */
    .list ul li.link a {
        -webkit-tap-highlight-color: rgba(0,0,0,0.1);
        tap-highlight-color: rgba(0,0,0,0.1);
    }
    
    /* 防止双击缩放 */
    .con .sou .wd,
    .list .search input {
        touch-action: manipulation;
    }
}

/* ========================================
   快捷键提示样式 - 现代化设计
======================================== */
.shortcuts-hint {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(248, 250, 252, 0.9) 100%);
    color: var(--text-secondary);
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    z-index: 1000;
    display: none;
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(229, 231, 235, 0.4);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: slideUpFade 0.3s ease-out;
}

.shortcuts-hint kbd {
    background: linear-gradient(135deg, 
        rgba(99, 102, 241, 0.1) 0%, 
        rgba(139, 92, 246, 0.08) 100%);
    color: var(--primary-color);
    padding: 4px 8px;
    border-radius: 6px;
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin: 0 2px;
    border: 1px solid rgba(99, 102, 241, 0.2);
    box-shadow: 
        0 2px 4px rgba(99, 102, 241, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* 暗色模式适配 */
[data-theme="dark"] .shortcuts-hint {
    background: linear-gradient(135deg, 
        rgba(31, 41, 55, 0.95) 0%, 
        rgba(17, 24, 39, 0.9) 100%);
    color: var(--text-muted);
    border-color: rgba(75, 85, 99, 0.4);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .shortcuts-hint kbd {
    background: linear-gradient(135deg, 
        rgba(139, 92, 246, 0.15) 0%, 
        rgba(99, 102, 241, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

/* ========================================
   CSS动画关键帧
======================================== */
@keyframes slideUpFade {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes searchHighlight {
    0% { background: var(--bg-card); }
    50% { background: rgba(16, 185, 129, 0.1); }
    100% { background: var(--bg-card); }
}

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

@keyframes slideInFromLeft {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========================================
   原有动画效果
======================================== */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
}
    to {
        opacity: 1;
        transform: translateY(0);
}
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
}
    to {
        opacity: 1;
        transform: translateX(0);
}
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

.con {
    animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.list ul li.link {
    animation: slideInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.con .shlogo {
    animation: float 6s ease-in-out infinite;
}
    
/* ========================================
   毛玻璃效果增强
======================================== */
@supports (backdrop-filter: blur(20px)) {
    .con .sou form,
    #menu,
    .theme-toggle,
    .user-center,
    .list {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
}
}

/* 为不支持backdrop-filter的浏览器提供fallback */
@supports not (backdrop-filter: blur(20px)) {
    .con .sou form,
    #menu,
    .theme-toggle,
    .user-center {
        background: rgba(255, 255, 255, 0.95);
        box-shadow: var(--shadow-medium);
}
    
    [data-theme="dark"] .con .sou form,
    [data-theme="dark"] #menu,
    [data-theme="dark"] .theme-toggle,
    [data-theme="dark"] .user-center {
        background: rgba(30, 41, 59, 0.95);
        box-shadow: var(--shadow-medium);
    }
}

/* 确保按钮文本在所有情况下可见 */
.theme-toggle,
.user-center {
    min-width: fit-content;
    }
    
.theme-toggle span,
.user-center span {
    display: inline-block;
    margin-left: 2px;
}

/* 图标容器样式 */
.icon-container {
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* 隐藏已成功加载JavaScript图标的备用显示 */
.icon-container.icon-loaded .fallback-icon {
    display: none !important;
}

/* 隐藏元素 */
.hidden {
    display: none;
}

/* 页脚样式 */
footer {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* 链接样式简化 */
.list ul li.link a {
    display: flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    transition: none; /* 移除动画效果 */
    text-decoration: none;
    margin: 0 16px 2px;
    background: rgba(245, 245, 245, 0.5); /* 添加非常轻微的灰色背景 */
    border: none; /* 移除边框 */
}

/* 暗色模式下的背景色调整 */
[data-theme="dark"] .list ul li.title {
    background: rgba(50, 50, 60, 0.3); /* 暗色模式下的灰色背景 */
}

[data-theme="dark"] .list ul li.link a {
    background: rgba(45, 45, 55, 0.2); /* 暗色模式下的灰色背景 */
}