/* ============================================================
   徐氏家族 · 族谱网站  深棕庄重主题
   ============================================================ */
:root{
  --brand:#5C3A21;        /* 主·深棕 */
  --brand-2:#7B5233;
  --brand-3:#9C7248;
  --brand-dark:#432A16;
  --gold:#C6A15B;         /* 鎏金 */
  --gold-2:#D9BE85;
  --gold-soft:#EFE3C8;
  --bg:#F5F0E8;           /* 宣纸底 */
  --bg-2:#EFE8DB;
  --panel:#FFFFFF;
  --ink:#2B2118;          /* 墨色 */
  --text:#3D3327;
  --text-2:#6B5B47;
  --muted:#9A8B75;
  --line:#E7DECF;
  --line-2:#DCCFB9;
  --ok:#3E7C4F;
  --danger:#B23A3A;
  --warn:#B8811F;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 6px 22px rgba(67,42,22,.08);
  --shadow-lg:0 14px 40px rgba(67,42,22,.14);
  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,"SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--sans);color:var(--text);background:var(--bg);
  font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--text);}
::selection{background:var(--gold-soft);}

/* 纸纹背景 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:radial-gradient(rgba(92,58,33,.045) 1px,transparent 1px);
  background-size:22px 22px;
}
.wrap{position:relative;z-index:1;}

/* ============ 顶栏 ============ */
.topbar{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand) 55%,var(--brand-2));
  color:#F3E9D8;position:sticky;top:0;z-index:100;
  box-shadow:0 2px 14px rgba(67,42,22,.22);
}
.topbar-in{max-width:1240px;margin:0 auto;padding:0 26px;height:74px;display:flex;align-items:center;gap:26px;}
.brand{display:flex;align-items:center;gap:13px;}
.brand .seal{
  width:46px;height:46px;border-radius:10px;flex:0 0 auto;
  background:linear-gradient(160deg,#8B1520,#6E0F18);
  color:#F5E6C8;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:25px;font-weight:700;letter-spacing:1px;
  box-shadow:inset 0 0 0 2px rgba(245,230,200,.35),0 4px 10px rgba(0,0,0,.3);
}
.brand .bn{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:2px;color:#FBF3E4;}
.brand .bs{font-size:11.5px;color:var(--gold-2);letter-spacing:3px;margin-top:1px;}
.nav{display:flex;gap:4px;margin-left:14px;flex:1;}
.nav a{
  padding:9px 17px;border-radius:9px;font-size:14.5px;color:#E8DCC6;
  letter-spacing:1px;transition:.18s;position:relative;
}
.nav a:hover{background:rgba(255,255,255,.09);color:#fff;}
.nav a.on{background:rgba(198,161,91,.22);color:#FFF4DC;box-shadow:inset 0 0 0 1px rgba(198,161,91,.5);}
.topbar .tsearch{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.1);
  border:1px solid rgba(198,161,91,.35);border-radius:20px;padding:7px 14px;width:210px;
}
.topbar .tsearch input{background:transparent;border:none;outline:none;color:#FBF3E4;flex:1;font-size:13px;}
.topbar .tsearch input::placeholder{color:rgba(243,233,216,.55);}

/* ============ 页头横幅 ============ */
.hero{
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 60%,#8A6239 100%);
  color:#F5ECDA;position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;right:-60px;top:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,.22),transparent 68%);
}
.hero::before{
  content:"徐";position:absolute;right:40px;bottom:-40px;
  font-family:var(--serif);font-size:220px;font-weight:700;color:rgba(255,255,255,.05);line-height:1;
}
.hero-in{max-width:1240px;margin:0 auto;padding:46px 26px 52px;position:relative;z-index:2;}
.hero h1{font-family:var(--serif);font-size:38px;letter-spacing:6px;font-weight:700;color:#FFF7E8;}
.hero .sub{font-family:var(--serif);font-size:15px;letter-spacing:5px;color:var(--gold-2);margin-top:12px;}
.hero .desc{max-width:660px;margin-top:18px;color:#EADCC6;font-size:14.5px;line-height:1.9;}
.hero-stats{display:flex;gap:40px;margin-top:26px;flex-wrap:wrap;}
.hero-stats .hs{display:flex;flex-direction:column;}
.hero-stats .hs b{font-family:var(--serif);font-size:30px;color:var(--gold-2);font-weight:700;}
.hero-stats .hs span{font-size:12.5px;color:#DAC9AC;letter-spacing:2px;margin-top:2px;}

/* ============ 通用容器 ============ */
.container{max-width:1240px;margin:0 auto;padding:0 26px;}
.section{margin:34px 0;}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.sec-head .bar{width:5px;height:22px;border-radius:3px;background:linear-gradient(var(--brand),var(--gold));}
.sec-head h2{font-family:var(--serif);font-size:22px;letter-spacing:3px;color:var(--brand-dark);font-weight:700;}
.sec-head .more{margin-left:auto;font-size:13px;color:var(--text-2);}
.sec-head .more:hover{color:var(--brand);}

/* ============ 卡片 ============ */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.card-pad{padding:22px 24px;}
.grid{display:grid;gap:18px;}

/* 字辈诗方块（每行 10 字，前 5 / 后 5 之间留空隙） */
.gc-grid{display:flex;flex-direction:column;gap:10px;padding:4px 0;}
.gc-row{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:nowrap;}
.gc-tile{flex:0 0 auto;width:54px;height:54px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold-2);border-radius:9px;background:linear-gradient(180deg,#FFFDF8,#FBF4E6);
  font-family:var(--serif);overflow:hidden;transition:.15s;}
.gc-tile:hover{border-color:var(--brand);box-shadow:0 3px 10px rgba(67,42,22,.12);transform:translateY(-1px);}
.gc-tile b{font-size:24px;font-weight:700;color:var(--brand-dark);line-height:1;}
.gc-gap{flex:0 0 auto;width:26px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}

/* 入口卡 */
.entry{display:flex;align-items:center;gap:16px;padding:22px;transition:.2s;position:relative;overflow:hidden;}
.entry:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-2);}
.entry .ic{
  width:54px;height:54px;border-radius:13px;flex:0 0 auto;font-size:26px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,var(--gold-soft),#E4D3AE);color:var(--brand);
}
.entry .et{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--brand-dark);letter-spacing:1px;}
.entry .ed{font-size:12.5px;color:var(--muted);margin-top:3px;}

/* ============ 世系树 ============ */
.tree{overflow-x:auto;padding:20px;}
.tree-inner{display:inline-block;min-width:100%;}
.tnode{position:relative;padding-left:0;}
.trow{display:flex;align-items:flex-start;}
.tcaret{
  width:22px;height:22px;flex:0 0 auto;margin:16px 6px 0 0;border-radius:6px;
  border:1px solid var(--line-2);background:#fff;color:var(--brand-3);
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;
}
.tcaret.leaf{visibility:hidden;}
.tcard{
  display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:11px 16px 11px 12px;margin:6px 0;min-width:250px;
  box-shadow:0 3px 10px rgba(67,42,22,.06);transition:.16s;cursor:pointer;
}
.tcard:hover{border-color:var(--brand-3);box-shadow:0 6px 18px rgba(67,42,22,.13);}
.tcard .av{
  width:38px;height:38px;border-radius:9px;flex:0 0 auto;font-family:var(--serif);
  display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;
  background:linear-gradient(150deg,var(--brand),var(--brand-2));color:#F5E6C8;
}
.tcard .ti{display:flex;flex-direction:column;}
.tcard .tn{font-family:var(--serif);font-size:15.5px;font-weight:700;color:var(--ink);letter-spacing:1px;}
.tcard .tm{font-size:11.5px;color:var(--muted);margin-top:2px;}
.tcard .gen{
  font-size:10.5px;color:var(--brand);background:var(--gold-soft);border:1px solid var(--gold-2);
  padding:1px 7px;border-radius:6px;margin-left:auto;font-weight:600;white-space:nowrap;
}
.tchildren{margin-left:34px;border-left:1.5px dashed var(--line-2);padding-left:14px;}
.tchildren.hide{display:none;}
.tcard.is-new{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-2),0 6px 18px rgba(198,161,91,.35);}
.tcard.is-new::after{content:'新增';position:absolute;margin-left:-6px;margin-top:0;font-size:10px;color:#fff;background:var(--gold);border-radius:5px;padding:1px 6px;transform:translateY(-22px);}

/* ============ 横向牵线图（传统吊线谱） ============ */
.h-tree{overflow:auto;padding:30px 24px;background:
  radial-gradient(circle at 1px 1px,rgba(92,58,33,.05) 1px,transparent 0) 0 0/22px 22px;}
.h-tree-inner{display:inline-block;min-width:100%;padding:6px;}
.hnode{display:flex;align-items:center;}
.hcard{
  display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:10px;padding:9px 15px;min-width:158px;
  box-shadow:0 3px 10px rgba(67,42,22,.06);cursor:pointer;transition:.16s;
}
.hcard:hover{border-color:var(--brand-3);border-left-color:var(--gold);box-shadow:0 6px 16px rgba(67,42,22,.15);transform:translateY(-1px);}
.hcard.is-new{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-2),0 6px 16px rgba(198,161,91,.4);}
.hcard .hn-nm{font-family:var(--serif);font-size:14.5px;font-weight:700;color:var(--ink);letter-spacing:1px;}
.hcard .hn-sub{font-size:10.5px;color:var(--muted);min-height:13px;}
.hcard .hn-gen{font-size:10px;color:var(--brand);background:var(--gold-soft);border:1px solid var(--gold-2);
  border-radius:5px;padding:0 6px;align-self:flex-start;margin-top:2px;}
.hcard.a{border-left-color:var(--ok);}
.hcard.n{border-left-color:var(--gold);box-shadow:0 3px 10px rgba(198,161,91,.25);}
.hcard.hit{outline:2px solid var(--brand-3);outline-offset:2px;background:#FFFBF3;}
.hkids{position:relative;display:flex;flex-direction:column;justify-content:center;margin-left:34px;}
.hkids::before{content:'';position:absolute;left:-34px;top:50%;width:34px;height:2px;background:var(--line-2);}
.hkid{position:relative;padding:5px 0 5px 34px;display:flex;align-items:center;}
.hkid::before{content:'';position:absolute;left:0;top:50%;width:34px;height:2px;background:var(--line-2);}
.hkid::after{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line-2);}
.hkid:first-child::after{top:50%;}
.hkid:last-child::after{bottom:50%;}
.hkid:only-child::after{display:none;}

/* ============ 族人卡 ============ */
.mcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;transition:.2s;position:relative;overflow:hidden;}
.mcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-2);}
.mcard .mav{
  width:72px;height:72px;border-radius:50%;margin:0 auto 12px;font-family:var(--serif);
  display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;
  background:linear-gradient(150deg,var(--brand),var(--brand-3));color:#F5E6C8;
  box-shadow:0 5px 14px rgba(67,42,22,.2);
}
.mcard h3{font-family:var(--serif);font-size:18px;letter-spacing:2px;color:var(--brand-dark);}
.mcard .tag{display:inline-block;font-size:11px;background:var(--gold-soft);color:var(--brand);border:1px solid var(--gold-2);padding:2px 9px;border-radius:20px;margin-top:7px;}
.mcard .meta{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.8;text-align:left;padding:0 4px;}
.mcard .meta b{color:var(--text-2);font-weight:600;}

/* ============ 支系 ============ */
.branch{display:flex;gap:18px;align-items:flex-start;padding:20px;}
.branch .bkg{
  width:60px;height:60px;border-radius:14px;flex:0 0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;color:#F5E6C8;font-family:var(--serif);
  background:linear-gradient(150deg,var(--brand),var(--brand-3));box-shadow:0 5px 14px rgba(67,42,22,.18);
}
.branch .bkg b{font-size:20px;line-height:1;}
.branch .bkg span{font-size:10px;opacity:.85;}
.branch h3{font-family:var(--serif);font-size:18px;color:var(--brand-dark);letter-spacing:1px;}
.branch p{font-size:13px;color:var(--text-2);margin-top:7px;line-height:1.8;}
.branch .bstat{display:flex;gap:22px;margin-top:12px;}
.branch .bstat div{font-size:12.5px;color:var(--muted);}
.branch .bstat b{color:var(--brand);font-family:var(--serif);font-size:17px;display:block;}

/* ============ 大事记 ============ */
.timeline{position:relative;padding-left:30px;}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:linear-gradient(var(--gold-2),var(--line-2));}
.tl-item{position:relative;margin-bottom:24px;}
.tl-item::before{
  content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--brand);border:3px solid var(--gold-soft);box-shadow:0 0 0 1px var(--gold-2);
}
.tl-item .tly{font-family:var(--serif);font-size:15px;color:var(--brand);font-weight:700;letter-spacing:1px;}
.tl-item .tlt{font-size:15px;font-weight:700;color:var(--ink);margin-top:4px;}
.tl-item .tld{font-size:13px;color:var(--text-2);margin-top:5px;line-height:1.8;}

/* ============ 家训 ============ */
.motto{background:linear-gradient(150deg,#FBF7EE,#F3EAD8);border:1px solid var(--gold-2);border-radius:var(--radius);padding:26px 30px;}
.motto .mt{font-family:var(--serif);font-size:19px;color:var(--brand-dark);letter-spacing:3px;text-align:center;margin-bottom:16px;}
.motto .ml{font-family:var(--serif);font-size:15px;color:var(--text);line-height:2.3;letter-spacing:1px;text-align:center;}

/* ============ 表格 ============ */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);}
.table th{
  background:linear-gradient(150deg,var(--brand-dark),var(--brand));color:#F3E8D4;
  text-align:left;padding:13px 16px;font-size:13px;font-weight:600;letter-spacing:1px;
}
.table td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--text);}
.table tr:last-child td{border-bottom:none;}
.table tbody tr:hover{background:#FBF7EF;}
.table .nm{font-family:var(--serif);font-weight:700;color:var(--brand-dark);font-size:14.5px;}

/* ============ 徽标 ============ */
.tag{display:inline-block;font-size:11.5px;padding:2px 10px;border-radius:20px;font-weight:600;}
.tag.br{background:var(--gold-soft);color:var(--brand);border:1px solid var(--gold-2);}
.tag.ok{background:#E7F3EA;color:var(--ok);}
.tag.dead{background:#EFEBE4;color:#8A7C66;}
.tag.g{background:#F0E9DC;color:var(--brand-2);}

/* ============ 筛选栏 ============ */
.toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px;}
.toolbar .fld{display:flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 13px;}
.toolbar input,.toolbar select{border:none;outline:none;background:transparent;font-size:13.5px;}
.toolbar input{width:190px;}
.toolbar .spacer{flex:1;}

/* ============ 按钮 ============ */
.btn{
  display:inline-flex;align-items:center;gap:7px;border:none;border-radius:10px;
  padding:10px 20px;font-size:14px;font-weight:600;letter-spacing:1px;transition:.18s;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#F7EEDC;
  box-shadow:0 4px 12px rgba(92,58,33,.22);
}
.btn:hover{filter:brightness(1.07);box-shadow:0 6px 18px rgba(92,58,33,.3);}
.btn.ghost{background:#fff;color:var(--brand);border:1px solid var(--line-2);box-shadow:none;}
.btn.ghost:hover{background:var(--gold-soft);}
.btn.gold{background:linear-gradient(135deg,#B8912F,var(--gold));color:#3A2A10;}
.btn.sm{padding:7px 14px;font-size:12.5px;}
.btn.danger{background:linear-gradient(135deg,#9E3030,var(--danger));color:#fff;}

/* ============ 详情页 ============ */
.detail-hd{display:flex;gap:26px;align-items:flex-start;padding:28px;}
.detail-hd .dav{
  width:110px;height:110px;border-radius:20px;flex:0 0 auto;font-family:var(--serif);
  display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;
  background:linear-gradient(150deg,var(--brand),var(--brand-3));color:#F5E6C8;
  box-shadow:0 8px 22px rgba(67,42,22,.24);
}
.detail-hd h1{font-family:var(--serif);font-size:30px;letter-spacing:4px;color:var(--brand-dark);}
.detail-hd .sub{color:var(--text-2);margin-top:8px;font-size:14px;}
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:20px;border-top:1px solid var(--line);}
.kv .kvr{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px;}
.kv .kvk{width:88px;flex:0 0 auto;color:var(--muted);}
.kv .kvv{color:var(--text);font-weight:600;}

/* ============ 页脚 ============ */
.footer{
  margin-top:50px;background:linear-gradient(150deg,var(--brand-dark),var(--brand));
  color:#D8C8AC;padding:34px 0 26px;
}
.footer-in{max-width:1240px;margin:0 auto;padding:0 26px;display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;}
.footer .ft{font-family:var(--serif);font-size:16px;color:#F3E8D4;letter-spacing:2px;margin-bottom:10px;}
.footer .fc{font-size:12.5px;line-height:2;color:#C8B695;}
.footer .copy{max-width:1240px;margin:22px auto 0;padding:16px 26px 0;border-top:1px solid rgba(198,161,91,.25);font-size:12px;color:#B5A488;text-align:center;}

/* ============ 响应式 ============ */
@media(max-width:980px){
  .nav{display:none;}
  .topbar .tsearch{width:150px;}
  .g4{grid-template-columns:repeat(2,1fr);}
  .g3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr;}
  .hero h1{font-size:28px;}
  .detail-hd{flex-direction:column;align-items:center;text-align:center;}
  .kv{grid-template-columns:1fr;}
  .topbar-in{height:64px;padding:0 16px;gap:12px;}
  .container{padding:0 16px;}
}

/* ============ 打印 ============ */
@media print{
  .topbar,.footer,.hero .sub,.tree-tools,.toolbar,.exp-bar,.seg,.legend,.breadcrumb,
  .sub-tabs,.page-pad,.btn{display:none !important;}
  body{background:#fff;}
  .card{box-shadow:none;border-color:#ccc;}
  .tree,.h-tree{overflow:visible !important;}
  .tree-inner,.h-tree-inner{min-width:0;}
  a{color:inherit;text-decoration:none;}
  .hero{padding:0 !important;}
  .hero-in{padding:16px 0 !important;}
  @page{size:A4 landscape;margin:14mm;}
}

/* ============ v3 组件：族人卡 / 世系卡 / 加载态 ============ */
.m-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow);transition:.16s;}
.m-card:hover{border-color:var(--brand-3);box-shadow:0 8px 22px rgba(67,42,22,.13);transform:translateY(-1px);}
.m-av{width:44px;height:44px;flex:0 0 auto;border-radius:11px;font-family:var(--serif);font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,var(--brand),var(--brand-2));color:#F5E6C8;}
.m-bd{flex:1;min-width:0;}
.m-nm{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:1px;}
.m-mt{font-size:12px;color:var(--muted);margin-top:2px;}
.m-ln{font-size:11.5px;color:var(--brand-3);margin-top:2px;}
.m-gen{flex:0 0 auto;font-size:11.5px;color:var(--brand);background:var(--gold-soft);border:1px solid var(--gold-2);
  border-radius:7px;padding:2px 9px;font-weight:600;align-self:flex-start;}
.m-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}

.ln-card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px;
  box-shadow:var(--shadow);transition:.16s;border-top:3px solid var(--brand);}
.ln-card:hover{box-shadow:0 10px 26px rgba(67,42,22,.15);transform:translateY(-2px);border-top-color:var(--gold);}
.ln-top{display:flex;align-items:flex-start;gap:10px;}
.ln-name{flex:1;font-family:var(--serif);font-size:15px;font-weight:700;color:var(--brand-dark);line-height:1.45;letter-spacing:.5px;}
.ln-count{flex:0 0 auto;font-family:var(--serif);font-size:20px;font-weight:700;color:var(--brand);}
.ln-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--muted);margin-top:9px;}
.ln-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:14px;}

.loading{text-align:center;padding:60px 20px;color:var(--muted);font-size:14px;}
.spin{width:34px;height:34px;margin:0 auto 14px;border:3px solid var(--line-2);border-top-color:var(--brand);
  border-radius:50%;animation:sp 1s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
.empty-box{text-align:center;padding:60px 20px;color:var(--muted);}
.empty-box .em{font-size:44px;opacity:.5;margin-bottom:12px;}

.crumb{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:18px 0 6px;flex-wrap:wrap;}
.crumb a:hover{color:var(--brand);}
.crumb .sep{opacity:.5;}

/* 世系内页头部 */
.ln-hero{background:linear-gradient(135deg,var(--brand) 0%,var(--brand-2) 62%,#8A6239 100%);color:#F5ECDA;
  border-radius:var(--radius);padding:26px 28px;position:relative;overflow:hidden;box-shadow:var(--shadow-lg);}
.ln-hero::before{content:"";position:absolute;right:-50px;top:-70px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(198,161,91,.24),transparent 68%);}
.ln-hero h1{font-family:var(--serif);font-size:26px;letter-spacing:3px;color:#FFF7E8;position:relative;}
.ln-hero .desc{font-size:13px;color:#E4D5BE;margin-top:10px;position:relative;line-height:1.85;}
.ln-hero .st{display:flex;gap:34px;margin-top:18px;position:relative;flex-wrap:wrap;}
.ln-hero .st div b{font-family:var(--serif);font-size:23px;color:var(--gold-2);display:block;}
.ln-hero .st div span{font-size:11.5px;color:#D3C09C;}

/* 分页 */
.pager{display:flex;justify-content:center;align-items:center;gap:10px;margin:26px 0;}
.pager button{border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 15px;font-size:13px;color:var(--text-2);}
.pager button:hover:not(:disabled){border-color:var(--brand-3);color:var(--brand);}
.pager button:disabled{opacity:.4;cursor:default;}
.pager .info{font-size:13px;color:var(--muted);}

/* 详情页 kv / bio */
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden;}
.kv>div{background:var(--panel);padding:13px 16px;}
.kv .k{font-size:11.5px;color:var(--muted);}
.kv .v{font-size:14.5px;color:var(--ink);margin-top:3px;word-break:break-word;}
.bio{font-family:var(--serif);font-size:15.5px;line-height:2.15;color:var(--text);text-indent:2em;}
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;background:#FBF7EE;border:1px solid var(--line);border-radius:18px;
  padding:5px 13px;font-size:12.5px;transition:.15s;}
.chip:hover{border-color:var(--gold-2);background:var(--gold-soft);}
.chip .cc{width:22px;height:22px;border-radius:50%;background:linear-gradient(150deg,var(--brand),var(--brand-3));
  color:#F5E6C8;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-family:var(--serif);}
.chip.cur{border-color:var(--gold-2);background:var(--gold-soft);box-shadow:inset 0 0 0 1px var(--gold-2);}

/* ---------- 世系访问密码门 ---------- */
.gate-box{max-width:460px;margin:50px auto;background:var(--panel,#fff);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:0 10px 30px rgba(67,42,22,.08);padding:38px 30px;text-align:center;}
.gate-ic{font-size:40px;line-height:1;margin-bottom:10px;}
.gate-t{font-family:var(--serif);font-size:21px;color:var(--brand-dark);letter-spacing:1px;margin-bottom:8px;}
.gate-d{font-size:13.5px;color:var(--text-2);line-height:1.8;margin-bottom:20px;}
.gate-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.gate-form input{flex:1;min-width:200px;border:1px solid var(--line);border-radius:10px;padding:11px 15px;
  outline:none;font-size:14px;font-family:inherit;background:#FBF7EE;}
.gate-form input:focus{border-color:var(--gold-2);background:#fff;box-shadow:0 0 0 3px rgba(198,161,91,.16);}
.gate-err{color:var(--danger,#B23B2E);font-size:12.5px;min-height:18px;margin-top:10px;}