/* ── 姓氏专题 Hero ── */
.surname-hero{background:linear-gradient(135deg,#1a1a2e 0%,#2d3561 40%,#4a3f75 100%);padding:60px 0 50px;text-align:center;position:relative;overflow:hidden}
.surname-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 40%,rgba(250,198,125,.12) 0%,transparent 50%),radial-gradient(circle at 70% 60%,rgba(22,93,255,.1) 0%,transparent 50%);pointer-events:none}
.surname-hero-inner{max-width:1160px;margin:0 auto;padding:0 20px;position:relative;z-index:1}
.surname-hero h1{font-size:40px;font-weight:800;color:#fff;margin-bottom:12px;letter-spacing:2px}
.surname-hero h1 span{color:#FAC67D}
.surname-hero p{font-size:17px;color:rgba(255,255,255,.75);margin-bottom:28px}
.surname-hero .surname-search{display:flex;justify-content:center;gap:10px}
.surname-hero .surname-search input{width:320px;padding:12px 20px;border:2px solid rgba(255,255,255,.2);border-radius:30px;background:rgba(255,255,255,.1);color:#fff;font-size:16px;outline:none;transition:all .3s}
.surname-hero .surname-search input::placeholder{color:rgba(255,255,255,.45)}
.surname-hero .surname-search input:focus{border-color:#FAC67D;background:rgba(255,255,255,.18)}
.surname-hero .surname-search button{background:#FAC67D;color:#76401D;border:none;padding:12px 28px;border-radius:30px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}
.surname-hero .surname-search button:hover{background:#fbb848;transform:translateY(-1px)}

/* ── 热门姓氏快捷入口 ── */
.surname-hot{max-width:1160px;margin:20px auto 0;padding:0 20px;text-align:center}
.surname-hot span{font-size:13px;color:rgba(255,255,255,.5);margin-right:10px}
.surname-hot a{display:inline-block;padding:4px 14px;margin:4px;border-radius:14px;background:rgba(255,255,255,.12);color:rgba(255,255,255,.8);font-size:14px;text-decoration:none;transition:all .2s}
.surname-hot a:hover{background:rgba(255,255,255,.22);color:#fff}

/* ── 通栏主体 ── */
.surname-main{background:#F5F6FA;padding:50px 0 60px}
.surname-container{max-width:1160px;margin:0 auto;padding:0 20px}

/* ── 6列网格 ── */
.surname-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.surname-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06);transition:all .25s;cursor:pointer;text-decoration:none;display:block}
.surname-card:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.12)}
.surname-card .card-img{aspect-ratio:1;overflow:hidden;background:#eef0f4}
.surname-card .card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.surname-card:hover .card-img img{transform:scale(1.06)}
.surname-card .card-label{padding:12px 10px;text-align:center}
.surname-card .card-label .surname{font-size:20px;font-weight:700;color:#1a1a2e;letter-spacing:1px}
.surname-card .card-label .sub{font-size:12px;color:#999;margin-top:2px}

/* ── 空状态 ── */
.surname-empty{text-align:center;padding:80px 20px;color:#999}
.surname-empty .icon{font-size:64px;margin-bottom:16px}
.surname-empty p{font-size:16px}

/* ── 加载状态 ── */
.surname-loading{text-align:center;padding:80px 20px;color:#888}
.surname-loading .spinner{display:inline-block;width:36px;height:36px;border:3px solid #e0e0e0;border-top-color:#165DFF;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 分页 ── */
.surname-pagination{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:36px;flex-wrap:wrap}
.surname-pagination button,.surname-pagination span.page-num{min-width:36px;height:36px;border-radius:8px;font-size:14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.surname-pagination button{background:#fff;border:1px solid #d0d5dd;color:#333}
.surname-pagination button:hover{background:#165DFF;color:#fff;border-color:#165DFF}
.surname-pagination button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.surname-pagination .active{background:#165DFF;color:#fff;border:none;cursor:default}
.surname-pagination .ellipsis{color:#999;font-size:14px;cursor:default}

/* ── 响应式 ── */
@media(max-width:1024px){.surname-grid{grid-template-columns:repeat(4,1fr);gap:12px}}
@media(max-width:640px){
 .surname-grid{grid-template-columns:repeat(3,1fr);gap:8px}
 .surname-hero h1{font-size:28px}
 .surname-hero .surname-search input{width:200px}
 .surname-card .card-label{padding:8px 6px}
 .surname-card .card-label .surname{font-size:16px}
}
@media(max-width:400px){.surname-grid{grid-template-columns:repeat(2,1fr);gap:6px}}