/* =========================================== */
/*  反义词网 - 样式 */
/* =========================================== */

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;background:#f5f7fa;color:#333;line-height:1.6;min-height:100vh}

/* ─── 顶部导航 ─── */
.topbar{background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.08);position:sticky;top:0;z-index:100}
.topbar-inner{max-width:960px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:20px;font-weight:700;color:#dc2626;text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap}
.logo:hover{color:#b91c1c}
.logo span{font-size:18px}
.topbar-search{display:flex;align-items:center}
.topbar-search input{padding:7px 12px;border:1px solid #d1d5db;border-radius:6px 0 0 6px;font-size:14px;width:180px;outline:none}
.topbar-search input:focus{border-color:#dc2626}
.topbar-search button{padding:7px 12px;background:#dc2626;color:#fff;border:none;border-radius:0 6px 6px 0;cursor:pointer;font-size:14px}
.topbar-search button:hover{background:#b91c1c}

/* ─── 容器 ─── */
.container{max-width:960px;margin:0 auto;padding:24px 20px 60px}
.card{background:#fff;border-radius:10px;padding:24px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.card-title{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid #f3f4f6}

/* ─── 首页 Hero ─── */
.hero{text-align:center;padding:50px 20px 40px}
.hero h1{font-size:32px;font-weight:700;color:#1f2937;margin-bottom:8px}
.hero-desc{font-size:16px;color:#6b7280;margin-bottom:24px}
.search-box{display:flex;justify-content:center;max-width:500px;margin:0 auto}
.search-box input{flex:1;padding:12px 18px;border:2px solid #d1d5db;border-radius:8px 0 0 8px;font-size:16px;outline:none;transition:border-color .2s}
.search-box input:focus{border-color:#dc2626}
.search-box button{padding:12px 28px;background:#dc2626;color:#fff;border:none;border-radius:0 8px 8px 0;font-size:16px;cursor:pointer;transition:background .2s}
.search-box button:hover{background:#b91c1c}

/* ─── 区块 ─── */
.section{margin-bottom:28px}
.section h2{font-size:20px;font-weight:600;color:#1f2937;margin-bottom:14px}

/* ─── 热门标签 ─── */
.hot-tags{display:flex;flex-wrap:wrap;gap:10px}
.hot-tags a{display:inline-block;padding:8px 18px;background:#fef2f2;color:#dc2626;border-radius:20px;text-decoration:none;font-size:15px;transition:all .2s}
.hot-tags a:hover{background:#dc2626;color:#fff;transform:translateY(-1px)}

/* ─── 部首索引 ─── */
.char-index{display:flex;flex-wrap:wrap;gap:8px}
.char-index a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;color:#374151;text-decoration:none;font-size:16px;font-weight:600;transition:all .2s}
.char-index a:hover{background:#dc2626;color:#fff;border-color:#dc2626;transform:translateY(-2px)}

/* ─── 章节计数 ─── */
.section-count{font-size:13px;color:#9ca3af;font-weight:400;margin-left:6px}

/* ─── 分页 ─── */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:18px;flex-wrap:wrap}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;background:#fff;border:1px solid #e5e7eb;border-radius:6px;color:#374151;text-decoration:none;font-size:14px;transition:all .2s}
.pagination a:hover{background:#dc2626;color:#fff;border-color:#dc2626}
.pagination .cur{background:#dc2626;color:#fff;border-color:#dc2626;font-weight:600}
.pagination span:not(.cur){background:transparent;border:none;color:#9ca3af}

/* ─── 词卡网格 ─── */
.word-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.word-card{display:block;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:14px 16px;text-decoration:none;transition:all .2s}
.word-card:hover{border-color:#dc2626;box-shadow:0 2px 8px rgba(220,38,38,.12);transform:translateY(-2px)}
.word-main{display:block;font-size:17px;font-weight:600;color:#1f2937;margin-bottom:4px}
.word-subs{display:block;font-size:13px;color:#9ca3af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ─── 详情页 ─── */
.page-title{font-size:22px;font-weight:700;color:#1f2937;margin-bottom:20px}
.detail-header{margin-bottom:20px}
.detail-word{font-size:32px;font-weight:700;color:#1f2937}
.detail-label{font-size:18px;color:#6b7280;font-weight:400}
.detail-explain{color:#6b7280;font-size:15px;margin-top:10px;line-height:1.8}
.synonym-list{display:flex;flex-wrap:wrap;gap:10px}
.synonym-tag{display:inline-block;padding:8px 20px;background:#fef2f2;color:#dc2626;border-radius:20px;text-decoration:none;font-size:15px;transition:all .2s}
.synonym-tag:hover{background:#dc2626;color:#fff;transform:translateY(-1px)}
.no-data,.raw-data{color:#9ca3af;font-size:14px}

/* ─── 搜索结果 ─── */
.search-count{margin-bottom:16px;color:#6b7280;font-size:14px}
.search-results{list-style:none}
.search-results li{padding:12px 0;border-bottom:1px solid #f3f4f6;display:flex;align-items:center;gap:12px}
.search-results a{font-size:17px;font-weight:600;color:#dc2626;text-decoration:none;min-width:60px}
.search-results a:hover{text-decoration:underline}
.result-subs{font-size:14px;color:#9ca3af}

/* ─── 底部 ─── */
.footer{background:#fff;border-top:1px solid #e5e7eb;padding:24px 20px;text-align:center;color:#9ca3af;font-size:13px;line-height:1.8}
.footer-sub{font-size:12px}

/* ─── 移动端 ─── */
@media(max-width:640px){
    .hero h1{font-size:24px}
    .hero{padding:30px 10px 24px}
    .search-box input{font-size:15px;padding:10px 14px}
    .search-box button{padding:10px 18px;font-size:15px}
    .topbar-search input{width:120px}
    .word-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
    .detail-word{font-size:24px}
}