/* =========================================================================
 * 华世家 · 中国姓氏排行组件样式
 * 主题变量沿用华世家全局（--paper/--ink/--red/--gold/--serif 等）
 * 前缀：srank-
 * ========================================================================= */

/* ---- 百家姓大全页顶部入口区块 ---- */
.srank-block{margin:26px 0 0}
.srank-block-inner{border:1px solid var(--line);border-radius:12px;background:linear-gradient(115deg,#fffdf8,rgba(247,244,235,.55));overflow:hidden;box-shadow:0 12px 30px rgba(34,41,36,.06)}
.srank-block-head{display:flex;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line);background:linear-gradient(100deg,rgba(199,161,90,.12),rgba(199,161,90,.03))}
.srank-seal{flex:none;width:48px;height:48px;display:grid;place-items:center;background:var(--red);color:#fff;font:700 24px var(--serif);border-radius:6px;box-shadow:0 4px 10px rgba(169,52,38,.25)}
.srank-block-copy{min-width:0;flex:1}
.srank-block-copy h2{margin:2px 0 0;font:700 22px var(--serif);letter-spacing:.05em;color:var(--ink)}
.srank-block-copy p{margin:4px 0 0;color:var(--soft);font-size:12.5px}
.srank-block-head .btn{flex:none}
.srank-block-body{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;padding:18px 22px 20px}
.srank-mini{display:flex;flex-direction:column;gap:4px}
.srank-mini-row{display:flex;align-items:center;gap:10px;font-size:12.5px}
.srank-mini-no{flex:none;width:20px;text-align:center;color:var(--soft);font-variant-numeric:tabular-nums}
.srank-mini-row:nth-child(-n+3) .srank-mini-no{color:var(--red);font-weight:700}
.srank-mini-name{flex:none;width:36px;text-align:center;font:700 15px var(--serif);color:var(--ink)}
.srank-mini-track{flex:1;height:10px;background:rgba(25,52,47,.07);border-radius:5px;overflow:hidden}
.srank-mini-track i{display:block;height:100%;background:linear-gradient(90deg,var(--red),#c05a3c);border-radius:5px}
.srank-mini-row:nth-child(n+4) .srank-mini-track i{background:linear-gradient(90deg,var(--gold),#c9a878)}
.srank-mini-row em{flex:none;width:64px;text-align:right;color:var(--soft);font-style:normal;font-variant-numeric:tabular-nums}
.srank-search{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px;background:var(--paper2);border:1px dashed var(--line);border-radius:10px}
.srank-search input{width:100%;padding:11px 14px;font:inherit;border:1.5px solid var(--line);border-radius:8px;background:#fff;outline:none;transition:border-color .2s;color:var(--ink)}
.srank-search input:focus{border-color:var(--red)}
.srank-search button{padding:10px 14px;font:600 13px var(--serif);border:0;border-radius:8px;background:var(--ink);color:#fff;cursor:pointer;transition:background .2s}
.srank-search button:hover{background:var(--red)}

/* ---- 完整排行页 hero ---- */
.srank-hero{position:relative;isolation:isolate;overflow:hidden;padding:48px 0 34px;background:#faf7ef;border-bottom:1px solid var(--line)}
.srank-hero-carousel{position:absolute;inset:0;z-index:-2;pointer-events:none}
.srank-hero-bg{position:absolute;inset:-2%;opacity:0;background-position:center;background-size:cover;animation:srankHeroFade 18s infinite ease-in-out;transform:scale(1.035)}
.srank-hero-bg.bg1{background-image:url('/images/surname-rank/surname-rank-bg-1.webp');animation-delay:0s}
.srank-hero-bg.bg2{background-image:url('/images/surname-rank/surname-rank-bg-2.webp');animation-delay:6s}
.srank-hero-bg.bg3{background-image:url('/images/surname-rank/surname-rank-bg-3.webp');animation-delay:12s}
.srank-hero::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(255,253,248,.94) 0%,rgba(255,253,248,.87) 35%,rgba(255,253,248,.55) 58%,rgba(255,253,248,.18) 82%,rgba(255,253,248,.08) 100%)}
.srank-hero-content{position:relative;z-index:1}
@keyframes srankHeroFade{0%{opacity:0;transform:scale(1.04)}6%,28%{opacity:.78;transform:scale(1.015)}36%,100%{opacity:0;transform:scale(1)}}
.srank-hero h1,.srank-hero .eyebrow,.srank-hero .crumb,.srank-hero>div>p{text-shadow:0 1px 2px rgba(255,253,248,.95),0 0 12px rgba(255,253,248,.85)}
.srank-hero h1{margin:4px 0;font:700 clamp(30px,3.8vw,46px) var(--serif);letter-spacing:.05em}
.srank-hero>div>p{max-width:780px;margin:10px 0 0;color:var(--soft);font-size:14px;line-height:1.9}
.srank-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 0}
.srank-stat{padding:14px 10px;text-align:center;background:rgba(255,255,255,.92);border:1px solid rgba(188,172,144,.72);border-radius:10px;box-shadow:0 7px 22px rgba(44,48,39,.08);backdrop-filter:blur(3px)}
.srank-stat strong{display:block;font:700 22px var(--serif);color:var(--red);letter-spacing:.02em}
.srank-stat span{display:block;margin-top:3px;font-size:12px;color:var(--soft)}
.srank-hero .srank-search{max-width:560px;flex-direction:row;gap:0;margin:22px 0 0;padding:0;background:transparent;border:0}
.srank-hero .srank-search input{flex:1;border-radius:8px 0 0 8px;background:#fff}
.srank-hero .srank-search button{border-radius:0 8px 8px 0;padding:11px 22px}
.srank-result{margin-top:12px;min-height:24px;font-size:13.5px;color:var(--ink)}
.srank-result b{color:var(--red)}
.srank-hit{margin-right:18px;line-height:2}
.badge,.badge-gov,.badge-new{display:inline-block;background:var(--red);color:#fff;font-size:10px;padding:1px 6px;border-radius:3px;vertical-align:middle;margin-left:4px}
.badge-gov{background:#2e5c8a}
.badge-new{background:#6b8e23}

/* ---- 主体 ---- */
.srank-main{padding:30px 0 70px}
.srank-note{margin:0 0 22px;padding:14px 18px;border-left:4px solid var(--gold);background:rgba(157,120,64,.07);color:var(--soft);font-size:12.5px;line-height:2}
.srank-note b{color:var(--ink)}
.srank-song{margin:0 0 26px;padding:18px 22px;background:linear-gradient(135deg,#fffdf8,#f7efdc);border:1px solid var(--line);border-radius:10px}
.srank-song-head{font-size:14px;font-weight:700;letter-spacing:2px;margin-bottom:10px}
.srank-song-head b{color:var(--red)}
.srank-song-verse{font-size:16px;line-height:2.05;letter-spacing:2.5px;color:var(--ink);font-family:var(--serif)}
.srank-song-verse .srank-song-line{margin:2px 0}
.srank-song-note{margin-top:10px;font-size:12px;color:var(--soft);line-height:1.9}
.srank-song-note b{color:var(--red)}
.srank-title{font:700 19px var(--serif);letter-spacing:.04em;margin:28px 0 12px;padding-left:10px;border-left:4px solid var(--red)}
.srank-chart{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:20px 20px 8px}
.srank-bar-row{display:flex;align-items:center;margin-bottom:7px;font-size:13px}
.srank-bar-rank{width:30px;text-align:right;color:var(--soft);font-variant-numeric:tabular-nums}
.srank-bar-name{width:64px;text-align:center;font-weight:700;font-size:15px;color:var(--ink)}
.srank-bar-track{flex:1;height:18px;background:rgba(25,52,47,.06);border-radius:4px;overflow:hidden}
.srank-bar-fill{height:100%;background:linear-gradient(90deg,var(--red),#c05a3c);border-radius:4px;min-width:2px;transition:width .6s ease}
.srank-bar-fill.dim{background:linear-gradient(90deg,#c9a878,var(--gold))}
.srank-bar-pct{width:70px;text-align:right;color:var(--soft);font-variant-numeric:tabular-nums;padding-right:4px}
.srank-bar-num{width:92px;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.srank-up{color:#3a7a3a;font-weight:700;font-size:11px;margin-left:2px}
.srank-down{color:#b03a2e;font-weight:700;font-size:11px;margin-left:2px}
.srank-legend{display:flex;justify-content:center;gap:20px;font-size:12px;color:var(--soft);margin-top:8px;flex-wrap:wrap}
.srank-gov{display:flex;gap:16px;flex-wrap:wrap}
.srank-gov-col{flex:1;min-width:280px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper2)}
.srank-gov-head{background:rgba(199,161,90,.16);padding:10px 14px;font-size:13px;font-weight:700;letter-spacing:1px;text-align:center;border-bottom:1px solid var(--line);color:var(--ink)}
.srank-gov-row{display:flex;align-items:center;padding:7px 14px;border-bottom:1px solid rgba(25,52,47,.06);font-size:13.5px}
.srank-gov-row:last-child{border-bottom:none}
.srank-gov-row .g-rank{width:26px;color:var(--soft);font-variant-numeric:tabular-nums}
.srank-gov-row .g-name{width:46px;font-weight:700;font-size:15px;color:var(--ink)}
.srank-gov-row .g-data{flex:1;text-align:right;font-variant-numeric:tabular-nums;color:var(--soft)}
.srank-gov-row.top1 .g-name{color:var(--red);font-size:16px}
.srank-tabs{display:flex;gap:8px;margin:0 0 12px;flex-wrap:wrap}
.srank-tab{font:inherit;font-size:13.5px;padding:8px 18px;border:1px solid var(--line);background:var(--paper2);color:var(--soft);border-radius:6px;cursor:pointer;transition:all .2s}
.srank-tab:hover{border-color:var(--red);color:var(--red)}
.srank-tab.active{background:var(--red);border-color:var(--red);color:#fff}
.srank-table-wrap{background:var(--paper2);border:1px solid var(--line);border-radius:10px;overflow:auto}
.srank-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.srank-table thead th{background:rgba(199,161,90,.16);padding:10px 6px;font-size:12.5px;letter-spacing:1px;border-bottom:2px solid var(--line);color:var(--ink);white-space:nowrap}
.srank-table tbody td{padding:8px 6px;text-align:center;border-bottom:1px solid rgba(25,52,47,.05);font-variant-numeric:tabular-nums;color:var(--ink)}
.srank-table tbody tr:nth-child(even){background:#fbf8f0}
.srank-table tbody tr:hover{background:rgba(199,161,90,.12)}
.srank-table td.rank{color:var(--soft)}
.srank-table td.name{font-weight:700;font-size:15px}
.srank-table .top3 td.name{color:var(--red);font-size:17px}
.srank-table td.r2025{font-weight:700}
.srank-table .jw-col{color:#7a5b2a;font-size:12.5px}
.srank-table .jw-none{color:#c8bfae}
.bxj-tag{font-size:11px;background:#8a7a5c;color:#fff;padding:1px 7px;border-radius:3px;margin-left:5px;vertical-align:2px}
.srank-pager{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:16px;font-size:14px;color:var(--ink)}
.srank-pager button{font:inherit;padding:6px 16px;border:1px solid var(--line);background:var(--paper2);border-radius:6px;cursor:pointer;color:var(--ink)}
.srank-pager button:hover:not(:disabled){border-color:var(--red);color:var(--red)}
.srank-pager button:disabled{opacity:.4;cursor:not-allowed}
.srank-footnote{margin-top:24px;font-size:12px;color:var(--soft);line-height:1.9;border-top:1px dashed var(--line);padding-top:12px}
.srank-footnote b{color:var(--ink)}

/* ---- 响应式 ---- */
@media(max-width:1000px){.srank-block-body{grid-template-columns:1fr}.srank-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.srank-block-head{flex-wrap:wrap}.srank-block-head .btn{width:100%;text-align:center}.srank-stats{grid-template-columns:repeat(2,1fr)}.srank-hero .srank-search{flex-direction:column}.srank-hero .srank-search button{border-radius:8px}}
@media(prefers-reduced-motion:reduce){.srank-hero-bg{animation:none}.srank-hero-bg.bg1{opacity:.72;transform:none}}