/* ===== 起名排行榜专属样式（公共样式使用 bazi/common.css） ===== */

/* 布局 */
.rank-layout { display:flex; gap:20px; max-width:1200px; margin:0 auto; }
.rank-left { width:280px; flex-shrink:0; }
.rank-right { flex:1; min-width:0; }

/* 分类网格 */
.rank-cat-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 10px; margin-bottom:12px; }
.rank-cat-item { display:flex; align-items:center; gap:5px; padding:8px 12px; border:1px solid var(--border-color,#e8e8e8); border-radius:8px; font-size:.85rem; color:var(--text-primary); transition:.2s; background:#fff; text-decoration:none; cursor:pointer; }
.rank-cat-item:hover { border-color:var(--sun-red); color:var(--sun-red); }
.rank-cat-item.on { background:var(--sun-red); color:#fff; border-color:var(--sun-red); font-weight:600; }
.rank-cat-item .icon { font-size:1rem; }

/* 筛选条 */
.rank-filter { display:flex; gap:8px; align-items:center; padding:10px 14px; background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); border:1px solid var(--border-color); margin-bottom:10px; flex-wrap:wrap; }
.rank-filter .fg { display:flex; align-items:center; gap:4px; font-size:.82rem; }
.rank-filter .fg span { color:var(--text-muted); white-space:nowrap; }
.rank-filter select,.rank-filter input[type="text"] { padding:5px 8px; border:1px solid var(--border-color); border-radius:4px; font-size:.82rem; }
.rank-filter select { min-width:80px; }
.rank-filter .btn-search { padding:5px 16px; background:var(--sun-red); color:#fff; border:none; border-radius:4px; cursor:pointer; font-size:.82rem; white-space:nowrap; }

/* 排行榜卡片 */
.rank-card { background:#fff; border-radius:8px; box-shadow:0 1px 4px rgba(0,0,0,.06); margin-bottom:8px; border:1px solid var(--border-color); transition:.2s; cursor:pointer; }
.rank-card:hover { box-shadow:0 2px 8px rgba(0,0,0,.1); }
.rank-row { display:flex; align-items:center; padding:10px 14px; gap:8px; min-height:42px; }
.rank-name { font-size:.95rem; font-weight:600; color:var(--text-primary); flex-shrink:0; min-width:100px; line-height:1.4; }
.rank-tags { display:flex; gap:4px; flex-wrap:wrap; flex:1; min-width:0; align-items:center; }
.rank-tag { font-size:.7rem; padding:2px 8px; border-radius:10px; white-space:nowrap; line-height:1.4; }
.rank-tag.gm { background:#e8f4fd; color:#409eff; } .rank-tag.gf { background:#fdf2f9; color:#f56c6c; }
.rank-tag.ind { background:#fdf6ec; color:#e6a23c; } .rank-tag.wx { background:#fef0f0; color:#f56c6c; }
.rank-tag.st { background:#ecf5ff; color:#667eea; } .rank-tag.sc { background:#f0f9eb; color:#67c23a; }
.rank-tag.sco { background:#fff3e0; color:#ff9800; font-weight:600; }
.rank-meta { font-size:.75rem; color:var(--text-muted); flex-shrink:0; white-space:nowrap; }
.rank-meta .sep { color:#ddd; margin:0 6px; }

/* 分页 */
.rank-pager { display:flex; justify-content:center; gap:4px; margin-top:16px; padding:10px 0; }
.rank-pager a,.rank-pager span { padding:6px 14px; border:1px solid var(--border-color); border-radius:4px; font-size:.82rem; color:var(--text-secondary); text-decoration:none; transition:.2s; display:inline-block; }
.rank-pager a:hover { border-color:var(--sun-red); color:var(--sun-red); }
.rank-pager a.on { background:var(--sun-red); color:#fff; border-color:var(--sun-red); }