/* 白天主题样式 - 优化版 */
:root {
    --bg-color: #f5f7fa;
    --glass-bg: rgba(255, 255, 255, 0.98);
    --glass-border: rgba(99, 102, 241, 0.08);
    --glass-highlight: rgba(99, 102, 241, 0.05);
    --primary: #6366f1;
    --primary-light: #818cf8;
    --accent: #ec4899;
    --text-main: #1e293b;
    --text-sub: #64748b;
    --card-radius: 16px;
    --success: #10b981;
    --warning: #f59e0b;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf4 100%) !important;
    color: var(--text-main) !important;
}

/* 动态背景光效 - 白天版本 */
.glow-blob {
    opacity: 0.08 !important;
}

.glow-1 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

.glow-2 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
}

.glow-3 {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
}

/* 侧边栏 */
.sidebar {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border-right: 1px solid rgba(99, 102, 241, 0.1) !important;
    box-shadow: 4px 0 24px rgba(99, 102, 241, 0.08) !important;
}

.sidebar-header h2 {
    color: var(--text-main) !important;
    font-weight: 700 !important;
}

.sidebar-header p {
    color: var(--text-sub) !important;
}

.nav-item {
    color: var(--text-sub) !important;
    transition: all 0.3s ease !important;
}

.nav-item:hover,
.nav-item.active {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%) !important;
    color: var(--primary) !important;
    border-left: 3px solid var(--primary) !important;
}

/* 主内容区 */
.main {
    background: transparent !important;
}

/* 头部 */
.header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.1) !important;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(20px) !important;
}

.page-title {
    color: var(--text-main) !important;
    font-weight: 700 !important;
}

.welcome h1 {
    font-weight: 700 !important;
    background: linear-gradient(135deg, #667eea 0%, #ec4899 50%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.welcome p {
    color: #64748b !important;
}

.search-input {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid rgba(99, 102, 241, 0.15) !important;
    color: var(--text-main) !important;
    transition: all 0.3s ease !important;
}

.search-input:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1) !important;
    background: white !important;
}

.search-input::placeholder {
    color: var(--text-sub) !important;
}

/* API卡片 */
.api-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.api-card:hover {
    transform: translateY(-4px) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.5) 100%) !important;
    box-shadow: 0 12px 32px rgba(99, 102, 241, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}    border-color: rgba(99, 102, 241, 0.3) !important;
}

.api-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0.08) 100%) !important;
    border: 2px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15) !important;
}

.api-info h3 {
    font-weight: 700 !important;
    background: linear-gradient(135deg, #667eea 0%, #ec4899 50%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.api-info span {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(99, 102, 241, 0.08) 100%) !important;
    color: #6366f1 !important;
    font-weight: 600 !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
}

/* 服务器支持/赞助商卡片 */
.sec-title {
    font-weight: 700 !important;
    position: relative !important;
    padding-left: 12px !important;
    background: linear-gradient(135deg, #667eea 0%, #ec4899 50%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.sec-title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 20px !important;
    background: linear-gradient(180deg, #667eea 0%, #ec4899 50%, #a855f7 100%) !important;
    bord/* 头部区域 */
.header-section,
.welcome-section,
.top-section {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.08) !important;
}

/* 服务器支持等分类标题区域 */
.section-title,
.category-title {
    background: transparent !important;
} 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !.sponsor-card:hover {
    transform: translateY(-4px) !important;
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}   border-color: rgba(99, 102, 241, 0.2) !important;
}

.partner-card div {
    font-weight: 700 !important;
    background: linear-gradient(135deg, #667eea 0%, #ec4899 50%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.partner-card small {
    color: #64748b !important;
}

.partner-card span {
    background: linear-gradient(135deg, #667eea 0%, #ec4899 50%, #a855f7 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-weight: 600 !important;
}

.api-desc {
    color: #64748b !important;
    line-height: 1.6 !important;
}

.card-btm {
    border-top: 1px solid rgba(99, 102, 241, 0.08) !important;
}

.status {
    color: var(--text-sub) !important;
    font-weight: 600 !important;
}

.status.on {
    color: #10b981 !important;
}

.status.off {
    color: #f43f5e !important;
}

.view-btn,
.btn-doc {
    padding: 8px 18px !important;
    border-radius: 50px !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    cursor: pointer !important;
}

/* 确保按钮可见性 */
.card-btm .view-btn,
.card-btm .btn-doc {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.view-btn:hover,
.btn-doc:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5) !important;
}

/* 统计样式 */
.stat-icon,
.stat-label {
    color: #64748b !important;
}

.stat-value {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    color: #059669 !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1) !important;
}

/* 模态框 */
.modal-mask {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(8px) !important;
}

.modal-box {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.15) !important;
    box-shadow: 0 24px 64px rgba(99, 102, 241, 0.2), 0 12px 32px rgba(0, 0, 0, 0.1) !important;
}

.modal-close {
    color: var(--text-sub) !important;
    transition: all 0.3s ease !important;
}

.modal-close:hover {
    color: var(--text-main) !important;
    background: rgba(99, 102, 241, 0.1) !important;
}

.modal-title {
    color: var(--text-main) !important;
    font-weight: 700 !important;
}

.modal-content {
    color: #64748b !important;
    line-height: 1.8 !important;
}

.modal-content p {
    color: #64748b !important;
}

/* 移动端按钮 */
.mob-btn {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%) !important;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4) !important;
}

/* 侧边栏头部 */
.sidebar-head .site-info h2 {
    color: #1e293b !important;
    font-weight: 700 !important;
}

.sidebar-head .site-info p {
    color: #64748b !important;
}

/* 页脚 */
footer {
    border-top: 1px solid rgba(99, 102, 241, 0.1) !important;
    color: #64748b !important;
}

footer p {
    color: #64748b !important;
}

/* 搜索框 */
.search-wrap {
    position: relative !important;
}

.search-icon {
    color: #64748b !important;
}

.search-input:focus ~ .search-icon {
    color: var(--primary) !important;
}

/* 加载页面 */
#preloader {
    background: linear-gradient(135deg, #e8ecf4 0%, #dce4f0 50%, #e8ecf4 100%) !important;
}

.loader-logo {
    background: linear-gradient(to right, #667eea, #ec4899) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.loader-bar {
    background: rgba(0, 0, 0, 0.08) !important;
}

.loader-progress {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 8px !important;
    height: 8px !important;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.02) !important;
}

::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.2) !important;
    border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.3) !important;
}