/* =========================================
           Nav - 全局样式库 (最终优化版)
========================================= */

:root {
    /* 1. 基础布局颜色 */
    --bg: #f4f7f9; 
    --card-bg: #ffffff; 
    --text: #1e293b; 
    --text-muted: #64748b;
    --border: #e2e8f0; 
    --header-bg: rgba(255, 255, 255, 0.8);
    --footer-shadow: rgba(0, 0, 0, 0.05);

    /* 2. 品牌色核心逻辑 (默认蓝色) */
    --brand-color: #2563eb; 
    
    /* 自动计算关联颜色 */
    --accent: var(--brand-color);
    --accent-shadow: color-mix(in srgb, var(--brand-color), transparent 90%);
    --accent-hover-shadow: color-mix(in srgb, var(--brand-color), transparent 80%);
    --accent-bg: color-mix(in srgb, var(--brand-color), transparent 92%);
}

[data-theme="dark"] {
    /* 暗黑模式基础颜色 */
    --bg: #0f172a; 
    --card-bg: #1e293b; 
    --text: #f1f5f9; 
    --text-muted: #94a3b8;
    --border: #334155; 
    --header-bg: rgba(30, 41, 59, 0.8);
    --footer-shadow: rgba(0, 0, 0, 0.3);

    /* 暗黑模式下自动提亮品牌色 */
    --accent: color-mix(in srgb, var(--brand-color), white 20%);
    --accent-shadow: color-mix(in srgb, var(--brand-color), transparent 85%);
    --accent-bg: color-mix(in srgb, var(--brand-color), transparent 85%);
}

* { box-sizing: border-box; }
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    background: var(--bg); color: var(--text); margin: 0; transition: background 0.3s, color 0.3s; 
    line-height: 1.5; display: flex; flex-direction: column; min-height: 100vh; 
}

/* ================== Header 导航 ================== */
header { position: sticky; top: 0; background: var(--header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 10px 20px; z-index: 1000; }
.nav-wrapper { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.logo { font-weight: 800; font-size: 1.2rem; color: var(--accent); text-decoration: none; flex-shrink: 0; letter-spacing: 1px; }
.search-box { position: relative; flex: 1; max-width: 400px; }
.search-box input { width: 100%; padding: 10px 15px 10px 38px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg); color: var(--text); outline: none; font-size: 14px; transition: 0.3s; box-sizing: border-box; }
.search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-shadow); background: var(--card-bg); }
.search-box i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: 14px; }
.controls { display: flex; gap: 10px; flex-shrink: 0; }
.btn { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card-bg); cursor: pointer; color: var(--text); font-size: 13px; font-weight: 500; transition: 0.2s; }
.btn:hover { border-color: var(--accent); color: var(--accent); }

/* ================== 主体布局 ================== */
main { max-width: 1200px; margin: 40px auto; padding: 0 20px; flex: 1; width: 100%; }
.breadcrumb { margin-bottom: 20px; font-size: 0.95rem; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: 0.2s; }
.breadcrumb a:hover { color: var(--accent); }
.hidden { display: none !important; }

/* ================== 首页卡片样式 ================== */
.section-header { margin-bottom: 20px; display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.section-header i { color: var(--accent); font-size: 1.2rem; } 
.section-title { font-size: 1.2rem; font-weight: 700; }

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

.card { 
    background: var(--card-bg); border: 1px solid var(--border); padding: 16px; border-radius: 14px; 
    text-decoration: none; color: inherit; display: flex; align-items: center; gap: 14px; 
    transition: all 0.2s ease; height: 100%; 
}
.card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 10px 20px -5px var(--accent-shadow); }
.card-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--accent); flex-shrink: 0; transition: 0.2s; }
.card:hover .card-icon { background: var(--accent-bg); }

.card-info { flex: 1; min-width: 0; }
.card-info .name { font-weight: 600; font-size: 0.95rem; display: block; margin-bottom: 2px; }
.card-info .desc { font-size: 0.8rem; color: var(--text-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================== 详情页商家信息区 ================== */
.provider-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 30px; 
    background: var(--card-bg); 
    padding: 30px; 
    border-radius: 16px; 
    border: 1px solid var(--border); 
    margin-bottom: 40px; 
}

.provider-icon { 
    width: 80px; height: 80px; border-radius: 16px; background: var(--accent-bg); 
    display: flex; align-items: center; justify-content: center; 
    font-size: 2.5rem; color: var(--accent); flex-shrink: 0; 
}

.provider-info { 
    flex: 1; 
    min-width: 0; 
}
.provider-info h1 { margin: 0 0 10px 0; font-size: 1.8rem; }
.provider-info p { margin: 0 0 15px 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

.provider-tags span { display: inline-block; padding: 4px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: 0.8rem; color: var(--text-muted); margin-right: 8px; margin-bottom: 8px;}

.provider-actions { 
    flex-shrink: 0; 
    display: flex;
    align-items: center;
}
.provider-actions a { 
    display: inline-block; padding: 12px 24px; background: var(--accent); color: #fff; 
    text-decoration: none; border-radius: 10px; font-weight: 600; font-size: 0.9rem; 
    transition: 0.2s; white-space: nowrap; 
}
.provider-actions a:hover { opacity: 0.9; transform: translateY(-2px); box-shadow: 0 6px 15px var(--accent-hover-shadow); }

/* ================== 详情页表格区 ================== */
.table-container { overflow-x: auto; background: var(--card-bg); border-radius: 14px; border: 1px solid var(--border); margin-bottom: 40px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
table { width: 100%; border-collapse: collapse; text-align: left; min-width: 1000px; }
th, td { padding: 16px 20px; border-bottom: 1px solid var(--border); }
th { background: rgba(0,0,0,0.02); font-weight: 600; color: var(--text-muted); font-size: 0.9rem; }
[data-theme="dark"] th { background: rgba(255,255,255,0.02); }
td { font-size: 0.95rem; }
tr:hover td { background: var(--bg); }
.cpu-ram { font-weight: 600; color: var(--accent); }
.buy-btn { display: inline-block; padding: 6px 16px; background: transparent; border: 1px solid var(--accent); color: var(--accent); border-radius: 6px; text-decoration: none; font-size: 0.85rem; font-weight: 500; transition: 0.2s; text-align: center; }
.buy-btn:hover { background: var(--accent); color: #fff; }

/* ================== 1. 主页原版悬浮页脚 (保持不变) ================== */
footer { margin: 60px 20px 30px; }
.footer-card { max-width: 1200px; margin: 0 auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 24px; padding: 40px; box-shadow: 0 10px 30px -10px var(--footer-shadow); }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand .logo { font-size: 1.6rem; margin-bottom: 15px; display: inline-block; }
.footer-brand p { font-size: 0.9rem; color: var(--text-muted); max-width: 350px; line-height: 1.7; }
.social-links { display: flex; gap: 12px; margin-top: 25px; }
.social-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--text-muted); text-decoration: none; transition: 0.3s; border: 1px solid var(--border); }
.social-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-3px); }
.footer-links h4 { font-size: 1rem; margin: 0 0 20px 0; color: var(--text); font-weight: 700; }
.footer-links a { display: block; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 12px; transition: 0.3s; }
.footer-links a:hover { color: var(--accent); transform: translateX(5px); }
.footer-bottom { padding-top: 30px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.85rem; }
.footer-bottom b { color: var(--accent); }

/* ================== 2. 分页专用极简页脚 (新增) ================== */
/* 这里的 .footer 类名必须保留以消除插件报错 */
.page-footer {
    border-top: 1px solid var(--border);
    margin-top: 10px;
    padding: 30px 20px;
    text-align: center;
    clear: both;
}
.page-footer-text {
    font-size: 14px;
    color: var(--text-muted);
}

/* ================== 响应式 (手机端优化) ================== */
@media (max-width: 768px) {
    .nav-wrapper { flex-direction: column; padding: 10px 0; } 
    .search-box { max-width: 100%; order: 3; } 
    .logo { order: 1; } .controls { order: 2; }

    .provider-header { flex-direction: column; text-align: center; padding: 20px; gap: 20px; }
    .provider-actions { width: 100%; }
    .provider-actions a { display: block; width: 100%; text-align: center; }

    .footer-main { grid-template-columns: 1fr; text-align: center; }
    .footer-brand p { max-width: 100%; margin: 0 auto; }
    .social-links { justify-content: center; }
    .footer-bottom { flex-direction: column; gap: 15px; }
}