body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .header-logo {
            position: absolute;
            top: 20px;
            left: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #4285f4;
        }
        .header-logo img {
            width: 25px;
            height: 25px;
        }
        .search-container {
            display: flex;
            margin-top: 50px;
            width: 100%;
            position: relative;
        }
        .engine-select {
            width: 120px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
            background: #f8f8f8;
            appearance: none;
            -webkit-appearance: none;
            overflow: hidden;
        }
        .search-container::after {
            content: "";
            position: absolute;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
            pointer-events: none;
            width: 16px;
            height: 16px;
            background: url('img/xl.png') no-repeat center center;
            background-size: contain;
        }
        .search-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-left: none;
        }
        .search-button {
            padding: 10px 20px;
            background: #4285f4;
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        .settings-icon {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            cursor: pointer;
        }
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 100;
        }
        .modal-content {
            position: relative;
            background: white;
            margin: 50px auto;
            padding: 0;
            width: 800px;
            height: 600px;
            border-radius: 8px;
            display: flex;
            overflow: hidden;
        }
        .settings-sidebar {
            width: 200px;
            background: #f5f5f5;
            padding: 20px 0;
            border-right: 1px solid #e0e0e0;
        }
        .settings-main {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        .settings-menu-item {
            padding: 12px 20px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        .settings-menu-item:hover {
            background-color: #e8e8e8;
        }
        .settings-menu-item.active {
            background-color: #e1f0ff;
            color: #0078d4;
            font-weight: bold;
        }
        .settings-section {
            display: none;
        }
        .settings-section.active {
            display: block;
        }
        .settings-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #333;
        }
        .settings-group {
            margin-bottom: 30px;
        }
        .settings-group-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #444;
            font-weight: bold;
        }
        .settings-option {
            margin-bottom: 15px;
            padding-left: 20px;
        }
        .close {
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 24px;
            z-index: 101;
            cursor: pointer;
            color: #333;
        }
        .user-info {
            position: absolute;
            top: 20px;
            right: 100px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .user-info button {
            padding: 5px 10px;
            
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .recommendations {
            margin-top: 30px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
            border-radius: 8px;
            backdrop-filter: blur(10px); /* 毛玻璃效果 */
            border: 1px solid rgba(255, 255, 255, 0.2); /* 轻微边框增强效果 */
        }
        .recommendations h3 {
            margin-bottom: 10px;
            color: #4285f4;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .ad-badge {
    
    color: rgb(248, 219, 219);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    opacity: 0.15; /* 添加透明度 */
}
        .refresh-btn {
            background: none;
            border: none;
            color: #4285f4;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        #recommendationList {
            list-style: none;
            padding: 0;
        }
        #recommendationList li {
            margin: 8px 0;
            padding: 8px;
            background: rgba(255, 255, 255, 0.3); /* 列表项半透明背景 */
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        #recommendationList li:hover {
            background: rgba(255, 255, 255, 0.5); /* 悬停时更明显 */
        }
        .marquee-container {
            display: inline-block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
        }
        .marquee {
            display: inline-block;
            padding-left: 100%;
            animation: marquee 10s linear infinite;
        }
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }
        @media (max-width: 600px) {
            .modal-content {
                width: 90%;
                margin: 20px auto;
                max-height: 80vh;
                overflow-y: auto;
            }
        }
        /* 添加这些样式到外部CSS文件 */
        .settings-icon {
            cursor: pointer;
            font-size: 20px;
            padding: 5px;
            display: block;
        }
        
        #settingsModal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 800px;
            border-radius: 8px;
        }
        a{ 
            text-decoration: none;
            color: black;
            
        }

        /* 移动端设置样式 */
        #mobileSettingsContainer {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: 2000;
            overflow-y: auto;
        }
        
        #mobileSettingsContent {
            padding: 20px;
        }
        
        #mobileSettingsContent button {
            width: 100%;
            padding: 12px;
            background: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            margin-bottom: 10px;
            text-align: left;
        }
        
        #mobileSettingsContent input[type="text"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
   /* 夜间模式样式 */
body.dark-mode {
    background-color: rgba(34, 34, 34, 0.6); /* 原#222改为40%透明度 */
    color: #eee;
}

.dark-mode .search-container,
.dark-mode .search-input,
.dark-mode .engine-select {
    background-color: rgba(51, 51, 51, 0.6); /* 原#333改为40%透明度 */
    color: #eee;
    border-color: rgba(68, 68, 68, 0.6); /* 原#444改为40%透明度 */
}

.dark-mode .recommendations {
    background: rgba(0, 0, 0, 0.3); /* 原rgba(0,0,0,0.5)改为30%透明度 */
    border-color: rgba(68, 68, 68, 0.6); /* 原#444改为40%透明度 */
}

.dark-mode .modal-content,
.dark-mode .settings-sidebar,
.dark-mode .settings-main {
    background-color: rgba(51, 51, 51, 0.6); /* 原#333改为40%透明度 */
    color: #eee;
}

.dark-mode .settings-menu-item:hover {
    background-color: rgba(68, 68, 68, 0.6); /* 原#444改为40%透明度 */
}

.dark-mode .settings-menu-item.active {
    background-color: rgba(42, 93, 132, 0.6); /* 原#2a5d84改为40%透明度 */
}