/* ============================================================
   中华族谱网络平台 · 统一设计系统
   主色: 朱红 (#8b1a1a) / 墨黑 (#2b2b2b) / 宣纸 (#f5ecd9)
   辅色: 鎏金 (#c8a45c) / 黛绿 (#3a5a40) / 青花 (#1e3a5f)
   ============================================================ */
:root{
  --c-primary:#8b1a1a;        /* 朱红 */
  --c-primary-dark:#6b0f0f;
  --c-primary-light:#b53a3a;
  --c-gold:#c8a45c;           /* 鎏金 */
  --c-gold-light:#e0c388;
  --c-ink:#2b2b2b;            /* 墨黑 */
  --c-paper:#f5ecd9;          /* 宣纸 */
  --c-paper-2:#faf5e8;
  --c-paper-3:#fffdf7;
  --c-green:#3a5a40;          /* 黛绿 */
  --c-blue:#1e3a5f;           /* 青花 */
  --c-text:#2b2b2b;
  --c-text-2:#666;
  --c-text-3:#999;
  --c-border:#d9c9a5;
  --c-border-light:#e8dcc4;
  --c-bg:#f5ecd9;
  --c-bg-2:#efe4cc;
  --c-danger:#c0392b;
  --c-warning:#d68910;
  --c-success:#27ae60;
  --c-info:#2980b9;
  --shadow-sm:0 1px 3px rgba(139,26,26,.08);
  --shadow:0 2px 8px rgba(43,43,43,.1);
  --shadow-md:0 4px 16px rgba(43,43,43,.12);
  --shadow-lg:0 8px 32px rgba(43,43,43,.18);
  --radius:8px;
  --radius-lg:14px;
  --max-w:1240px;
  --header-h:64px;
  --tabbar-h:56px;
  --font-zh:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  --font-serif:"STKaiti","KaiTi","STSong","SimSun",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-zh);
  font-size:14px;
  line-height:1.6;
  color:var(--c-text);
  background:
    radial-gradient(circle at 10% 0%,rgba(200,164,92,.08) 0,transparent 40%),
    radial-gradient(circle at 90% 100%,rgba(139,26,26,.05) 0,transparent 40%),
    var(--c-bg);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
a{color:var(--c-primary);text-decoration:none;transition:color .2s}
a:hover{color:var(--c-primary-dark)}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--c-text)}
ul,ol{list-style:none}
::selection{background:var(--c-primary);color:#fff}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:var(--c-gold);border-radius:4px}
::-webkit-scrollbar-track{background:var(--c-bg-2)}

/* ========== 布局骨架 ========== */
.zupu-app{min-height:100vh;display:flex;flex-direction:column}
.site-header{position:sticky;top:0;z-index:100;height:var(--header-h);background:linear-gradient(180deg,#6b0f0f,#8b1a1a);color:#fff;box-shadow:var(--shadow-md)}
.header-inner{max-width:var(--max-w);height:100%;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:20px}
.logo{display:flex;align-items:center;gap:8px;font-family:var(--font-serif);font-size:20px;font-weight:700;color:#fff;white-space:nowrap}
.logo .logo-mark{width:36px;height:36px;background:var(--c-gold);color:#6b0f0f;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700}
.logo:hover{color:#fff}
.main-nav{display:flex;gap:4px;flex:1}
.main-nav a{padding:8px 14px;color:#f5e0c8;font-size:14px;border-radius:var(--radius);transition:all .2s;white-space:nowrap}
.main-nav a:hover,.main-nav a.active{background:rgba(255,255,255,.15);color:#fff}
.header-search{position:relative;min-width:200px}
.header-search input{width:100%;padding:7px 12px 7px 32px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);border-radius:20px;color:#fff;font-size:13px}
.header-search input::placeholder{color:rgba(255,255,255,.6)}
.header-search input:focus{background:rgba(255,255,255,.95);color:var(--c-ink)}
.header-search .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.7)}
.header-search input:focus + .ico{color:var(--c-text-3)}
.header-actions{display:flex;align-items:center;gap:8px}
.header-user{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 10px;border-radius:20px;background:rgba(255,255,255,.1)}
.header-user:hover{background:rgba(255,255,255,.2)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--c-gold);color:#6b0f0f;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.btn-login{padding:7px 16px;background:var(--c-gold);color:#6b0f0f;font-weight:600;border-radius:var(--radius);font-size:13px}
.btn-login:hover{background:var(--c-gold-light);color:#6b0f0f}
.btn-menu-toggle{display:none;width:36px;height:36px;color:#fff;font-size:24px;background:rgba(255,255,255,.1);border-radius:var(--radius)}

.breadcrumb{max-width:var(--max-w);margin:0 auto;padding:10px 16px;font-size:13px;color:var(--c-text-2)}
.breadcrumb a{color:var(--c-text-2)}
.breadcrumb a:hover{color:var(--c-primary)}
.breadcrumb .sep{margin:0 6px;color:var(--c-text-3)}
.breadcrumb .current{color:var(--c-primary);font-weight:600}

.main{flex:1;max-width:var(--max-w);width:100%;margin:0 auto;padding:0 16px 80px}
.site-footer{background:#2b1a1a;color:#c8b890;padding:24px 16px 12px;margin-top:40px}
.footer-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between}
.footer-col h4{color:var(--c-gold-light);font-size:14px;margin-bottom:10px;font-family:var(--font-serif)}
.footer-col ul li{margin-bottom:6px;font-size:13px}
.footer-col a{color:#c8b890}
.footer-col a:hover{color:#fff}
.footer-bottom{max-width:var(--max-w);margin:20px auto 0;padding-top:14px;border-top:1px solid rgba(200,184,144,.2);font-size:12px;color:#8a7d5e;text-align:center}

.mobile-tabbar{display:none;position:fixed;bottom:0;left:0;right:0;height:var(--tabbar-h);background:#fff;border-top:1px solid var(--c-border-light);box-shadow:0 -2px 10px rgba(0,0,0,.06);z-index:99}
.mobile-tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--c-text-3);font-size:11px}
.mobile-tabbar a .ico{font-size:20px}
.mobile-tabbar a.active{color:var(--c-primary)}

/* ========== 卡片 ========== */
.card{background:var(--c-paper-3);border:1px solid var(--c-border-light);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-sm);transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-md)}
.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--c-border-light)}
.card-title h3{font-size:16px;color:var(--c-primary);font-family:var(--font-serif);font-weight:700}
.card-title .more{font-size:12px;color:var(--c-text-3)}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}

/* ========== 按钮 ========== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 18px;background:var(--c-primary);color:#fff;border-radius:var(--radius);font-size:14px;font-weight:500;transition:all .2s;border:1px solid transparent}
.btn:hover{background:var(--c-primary-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--c-primary);border-color:var(--c-primary)}
.btn-ghost:hover{background:var(--c-primary);color:#fff}
.btn-gold{background:var(--c-gold);color:#6b0f0f}
.btn-gold:hover{background:var(--c-gold-light);color:#6b0f0f}
.btn-outline{background:#fff;color:var(--c-text);border-color:var(--c-border)}
.btn-outline:hover{border-color:var(--c-primary);color:var(--c-primary)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-lg{padding:12px 28px;font-size:16px}
.btn-block{width:100%}
.btn-danger{background:var(--c-danger)}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ========== 标签 ========== */
.tag{display:inline-block;padding:2px 10px;background:var(--c-bg-2);color:var(--c-text-2);border-radius:12px;font-size:12px;line-height:1.6}
.tag-primary{background:rgba(139,26,26,.1);color:var(--c-primary)}
.tag-gold{background:rgba(200,164,92,.2);color:#8a6a20}
.tag-success{background:rgba(39,174,96,.12);color:var(--c-success)}
.tag-warning{background:rgba(214,137,16,.12);color:var(--c-warning)}
.tag-danger{background:rgba(192,57,43,.12);color:var(--c-danger)}
.tag-ai{background:linear-gradient(90deg,#c8a45c,#e0c388);color:#6b0f0f;font-weight:600}

/* ========== 表单 ========== */
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;font-weight:600;font-size:13px;color:var(--c-text)}
.form-label .req{color:var(--c-danger);margin-left:2px}
.form-control{width:100%;padding:9px 12px;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);font-size:14px;color:var(--c-text);transition:border-color .2s,box-shadow .2s}
.form-control:focus{outline:none;border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(139,26,26,.1)}
textarea.form-control{min-height:90px;resize:vertical}
select.form-control{cursor:pointer}
.form-hint{font-size:12px;color:var(--c-text-3);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ========== 列表 ========== */
.list{display:flex;flex-direction:column;gap:12px}
.list-item{padding:14px;background:var(--c-paper-3);border:1px solid var(--c-border-light);border-radius:var(--radius);display:flex;gap:12px;align-items:flex-start;transition:all .2s;cursor:pointer}
.list-item:hover{box-shadow:var(--shadow);border-color:var(--c-gold)}
.list-item .thumb{width:80px;height:80px;border-radius:var(--radius);object-fit:cover;background:var(--c-bg-2);flex-shrink:0}
.list-item .body{flex:1;min-width:0}
.list-item .title{font-weight:600;color:var(--c-text);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.list-item .desc{font-size:13px;color:var(--c-text-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.list-item .meta{display:flex;gap:12px;margin-top:6px;font-size:12px;color:var(--c-text-3);flex-wrap:wrap}

/* ========== 分页 ========== */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:24px;flex-wrap:wrap}
.pagination button{min-width:34px;height:34px;padding:0 10px;border:1px solid var(--c-border);background:#fff;color:var(--c-text);border-radius:var(--radius);font-size:13px}
.pagination button:hover:not(:disabled){border-color:var(--c-primary);color:var(--c-primary)}
.pagination button.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}

/* ========== 空状态/加载 ========== */
.empty{text-align:center;padding:60px 20px;color:var(--c-text-3)}
.empty .ico{font-size:60px;margin-bottom:12px;opacity:.4}
.loading{text-align:center;padding:30px;color:var(--c-text-3)}
.skeleton{background:linear-gradient(90deg,#efe4cc 25%,#f5ecd9 37%,#efe4cc 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--radius)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ========== Toast ========== */
#toast-root{position:fixed;top:80px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{padding:12px 18px;background:#fff;border-left:4px solid var(--c-info);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:14px;animation:slideIn .25s;display:flex;align-items:center;gap:8px}
.toast.success{border-color:var(--c-success)}
.toast.error{border-color:var(--c-danger)}
.toast.warning{border-color:var(--c-warning)}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ========== 模态框 ========== */
#modal-root{position:fixed;inset:0;z-index:9000;pointer-events:none}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.55);pointer-events:auto;animation:fade .2s}
.modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--c-paper-3);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);max-width:90vw;max-height:90vh;overflow:auto;pointer-events:auto;animation:modalIn .25s}
.modal-header{padding:14px 20px;border-bottom:1px solid var(--c-border-light);display:flex;justify-content:space-between;align-items:center}
.modal-header h3{font-size:17px;color:var(--c-primary);font-family:var(--font-serif)}
.modal-close{font-size:24px;color:var(--c-text-3);cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.modal-close:hover{color:var(--c-danger)}
.modal-body{padding:20px}
.modal-footer{padding:14px 20px;border-top:1px solid var(--c-border-light);display:flex;justify-content:flex-end;gap:8px}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{transform:translate(-50%,-45%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}

/* ========== 表格 ========== */
.table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
.table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--c-border-light);font-size:13px}
.table th{background:var(--c-bg-2);color:var(--c-text);font-weight:600;white-space:nowrap}
.table tr:hover{background:rgba(200,164,92,.06)}
.table tr:last-child td{border-bottom:none}

/* ========== 可视化 ========== */
.chart-box{width:100%;background:#fff;border:1px solid var(--c-border-light);border-radius:var(--radius-lg);overflow:hidden}
.chart-box .chart-head{padding:14px 18px;border-bottom:1px solid var(--c-border-light);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.chart-box .chart-head h3{font-size:15px;color:var(--c-primary);font-family:var(--font-serif)}
.chart-box .chart-toolbar{display:flex;gap:6px;flex-wrap:wrap}
.chart-box .chart-toolbar button{padding:5px 12px;background:var(--c-bg-2);color:var(--c-text-2);border-radius:var(--radius);font-size:12px;border:1px solid transparent}
.chart-box .chart-toolbar button.active{background:var(--c-primary);color:#fff}
.chart-box .chart-toolbar button:hover:not(.active){border-color:var(--c-primary);color:var(--c-primary)}
.chart-box .chart-body{width:100%;min-height:400px}
.chart-legend{display:flex;gap:14px;flex-wrap:wrap;padding:10px 18px;font-size:12px;color:var(--c-text-2)}
.chart-legend .item{display:flex;align-items:center;gap:6px}
.chart-legend .dot{width:12px;height:12px;border-radius:50%}

/* ========== 姓氏网格 ========== */
.surname-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px}
.surname-cell{aspect-ratio:1;background:var(--c-paper-3);border:1px solid var(--c-border-light);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-family:var(--font-serif);font-size:24px;font-weight:700;color:var(--c-primary);cursor:pointer;transition:all .2s;position:relative}
.surname-cell:hover{background:var(--c-primary);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
.surname-cell .rank{position:absolute;top:2px;left:4px;font-size:10px;color:var(--c-text-3);font-family:var(--font-zh)}
.surname-cell.hot{background:linear-gradient(135deg,#c8a45c,#e0c388);color:#6b0f0f}
.surname-initial{padding:4px 12px;background:var(--c-primary);color:#fff;border-radius:14px;font-size:13px;font-weight:600;display:inline-block;margin:6px 0 4px;font-family:var(--font-serif)}

/* ========== 世系图 ========== */
.gen-tree-toolbar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:var(--c-bg-2);flex-wrap:wrap;gap:10px}
.gen-tree-toolbar .view-switch{display:flex;background:#fff;border-radius:var(--radius);overflow:hidden;border:1px solid var(--c-border)}
.gen-tree-toolbar .view-switch button{padding:7px 16px;font-size:13px;color:var(--c-text-2)}
.gen-tree-toolbar .view-switch button.active{background:var(--c-primary);color:#fff}
.gen-graph-container{width:100%;height:600px;background:#fafafa;border:1px solid var(--c-border-light);border-radius:var(--radius);position:relative;overflow:hidden}
.gen-graph-container .g6-minimap{position:absolute;right:10px;bottom:10px;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:4px;box-shadow:var(--shadow)}

/* ========== AI 标识 ========== */
.ai-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:linear-gradient(90deg,#c8a45c,#e0c388);color:#6b0f0f;font-size:11px;font-weight:600;border-radius:10px}
.ai-confidence{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:var(--c-text-3)}
.ai-confidence .bar{display:inline-block;width:36px;height:5px;background:var(--c-bg-2);border-radius:3px;overflow:hidden;vertical-align:middle}
.ai-confidence .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c-warning),var(--c-success))}
.trust-A{color:var(--c-success);font-weight:600}
.trust-B{color:var(--c-warning);font-weight:600}
.trust-C{color:var(--c-danger);font-weight:600}

/* ========== 时间轴 ========== */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:'';position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--c-border)}
.timeline-item{position:relative;padding:0 0 22px 12px}
.timeline-item::before{content:'';position:absolute;left:-26px;top:6px;width:10px;height:10px;background:var(--c-primary);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 2px var(--c-primary)}
.timeline-item .era{font-weight:700;color:var(--c-primary);font-family:var(--font-serif);margin-bottom:4px}
.timeline-item .desc{font-size:13px;color:var(--c-text-2)}

/* ========== 上传组件 ========== */
.uploader{border:2px dashed var(--c-border);border-radius:var(--radius-lg);padding:30px;text-align:center;background:#fafafa;transition:all .2s;cursor:pointer}
.uploader:hover,.uploader.dragover{border-color:var(--c-primary);background:#fff5f5}
.uploader .ico{font-size:48px;color:var(--c-text-3);margin-bottom:8px}
.uploader .hint{color:var(--c-text-3);font-size:13px}
.upload-progress{margin-top:12px}
.upload-progress .item{padding:8px 12px;background:#fff;border:1px solid var(--c-border-light);border-radius:var(--radius);margin-bottom:6px;font-size:12px;display:flex;align-items:center;gap:8px}
.upload-progress .bar{flex:1;height:6px;background:var(--c-bg-2);border-radius:3px;overflow:hidden}
.upload-progress .bar i{display:block;height:100%;background:var(--c-primary);transition:width .3s}

/* ========== 移动端 ========== */
@media(max-width:900px){
  :root{--header-h:56px}
  .header-inner{padding:0 12px;gap:10px}
  .main-nav{display:none}
  .header-search{display:none}
  .btn-menu-toggle{display:flex;align-items:center;justify-content:center}
  .main{padding:0 12px 80px}
  .mobile-tabbar{display:flex}
  .form-row{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .gen-graph-container{height:450px}
  .modal{width:94vw}
}
@media(max-width:560px){
  body{font-size:13px}
  .logo{font-size:17px}
  .logo .logo-mark{width:30px;height:30px;font-size:17px}
  .header-actions .btn-login span{display:none}
  .surname-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  .table{font-size:12px}
  .table th,.table td{padding:8px 10px}
}

/* ========== 通用工具类 ========== */
.flex{display:flex}
.flex-col{flex-direction:column}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.flex-1{flex:1}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.text-center{text-align:center}
.text-sm{font-size:12px}.text-xs{font-size:11px}
.text-muted{color:var(--c-text-3)}
.text-primary{color:var(--c-primary)}
.text-danger{color:var(--c-danger)}
.text-success{color:var(--c-success)}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.p-3{padding:12px}.p-4{padding:16px}
.hidden{display:none}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:768px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
.section{margin-bottom:30px}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding-bottom:8px;border-bottom:2px solid var(--c-primary)}
.section-title h2{font-size:20px;color:var(--c-primary);font-family:var(--font-serif);font-weight:700}
.section-title .more{font-size:13px}
.divider{height:1px;background:var(--c-border-light);margin:16px 0}
.chip{display:inline-block;padding:4px 12px;background:var(--c-bg-2);border:1px solid var(--c-border-light);border-radius:16px;font-size:12px;cursor:pointer;transition:all .2s}
.chip:hover,.chip.active{background:var(--c-primary);color:#fff;border-color:var(--c-primary)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}
.stat-card{padding:18px;background:linear-gradient(135deg,#fff 0%,var(--c-paper) 100%);border:1px solid var(--c-border-light);border-radius:var(--radius-lg);text-align:center}
.stat-card .num{font-size:28px;font-weight:700;color:var(--c-primary);font-family:var(--font-serif)}
.stat-card .label{font-size:13px;color:var(--c-text-2);margin-top:4px}

/* ========== Hero Banner ========== */
.hero-banner{position:relative;margin:0 -16px 30px;background:linear-gradient(135deg,#6b0f0f 0%,#8b1a1a 50%,#3a0a0a 100%);overflow:hidden}
.hero-banner::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 80%,rgba(200,164,92,.25) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(200,164,92,.15) 0,transparent 50%)}
.hero-banner::after{content:'谱';position:absolute;right:5%;top:50%;transform:translateY(-50%);font-family:var(--font-serif);font-size:280px;color:rgba(200,164,92,.06);font-weight:700;pointer-events:none}
.hero-inner{position:relative;max-width:var(--max-w);margin:0 auto;padding:50px 16px 40px;display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.hero-text{flex:1;min-width:280px;color:#fff}
.hero-text h1{font-family:var(--font-serif);font-size:38px;font-weight:700;color:#fff;margin-bottom:12px;letter-spacing:2px;text-shadow:0 2px 8px rgba(0,0,0,.3)}
.hero-text .sub{font-size:15px;color:#f5e0c8;margin-bottom:24px;line-height:1.7}
.hero-actions{display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap}
.hero-search{display:flex;gap:8px;max-width:420px}
.hero-search input{flex:1;padding:11px 16px;border-radius:24px;border:2px solid var(--c-gold);background:rgba(255,255,255,.95);font-size:14px;color:var(--c-ink)}
.hero-search input:focus{outline:none;box-shadow:0 0 0 3px rgba(200,164,92,.4)}
.hero-search button{padding:0 22px;background:var(--c-gold);color:#6b0f0f;border-radius:24px;font-weight:600;font-size:14px}
.hero-search button:hover{background:var(--c-gold-light)}
.hero-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;min-width:240px}
.hero-stats .stat{padding:14px 20px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(200,164,92,.3);border-radius:var(--radius-lg);text-align:center}
.hero-stats .stat .num{font-family:var(--font-serif);font-size:30px;font-weight:700;color:var(--c-gold)}
.hero-stats .stat .label{font-size:12px;color:#f5e0c8;margin-top:2px}
@media(max-width:768px){
  .hero-banner::after{font-size:140px;right:-20px}
  .hero-text h1{font-size:24px}
  .hero-text .sub{font-size:13px}
  .hero-inner{padding:30px 12px 24px;flex-direction:column;align-items:flex-start}
  .hero-stats{grid-template-columns:repeat(2,1fr);width:100%}
  .hero-stats .stat .num{font-size:22px}
}