:root{
  --ink:#1a1a2e;
  --ink-soft:#24243c;
  --ink-line:#3a3a5c;
  --cinnabar:#c0392b;
  --gold:#d4af37;
  --paper:#e8e0d0;
  --paper-dim:#b8b0a0;
  --pine:#4a7a5a;
  --muted:#8a8474;
}
*{box-sizing:border-box}
body{
  margin:0;font-family:"Noto Sans SC","Source Han Sans SC","Microsoft YaHei",sans-serif;
  color:var(--paper);background:var(--ink);line-height:1.7;
}
.site-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:#12121f;color:var(--paper);
  border-bottom:1px solid var(--ink-line);
}
.brand{font-family:"Noto Serif SC","Source Han Serif SC",serif;font-size:22px;font-weight:700;color:var(--gold);text-decoration:none;letter-spacing:2px}
.nav a{color:var(--paper);text-decoration:none;margin-left:18px;font-size:14px}
.nav a:hover{color:var(--gold)}
.container{max-width:1040px;margin:0 auto;padding:28px 20px 60px}
.site-footer{text-align:center;color:var(--muted);font-size:13px;padding:24px;border-top:1px solid var(--ink-line)}

.hero{text-align:center;padding:40px 0 20px}
.hero h1{font-family:"Noto Serif SC",serif;font-size:40px;margin:0 0 10px;color:var(--paper)}
.subtitle{color:var(--muted);font-size:16px}
.subtitle strong{color:var(--cinnabar)}

.map-card{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:20px;margin:24px 0}
.map-card h2,.tool-head h1,.surname-head h1{font-family:"Noto Serif SC",serif;color:var(--paper)}
.migra-map{width:100%;height:auto;border-radius:8px;margin-top:8px}
.map-label{font-size:12px;fill:var(--paper);font-family:"Noto Serif SC",serif}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:24px 0}
.feature{display:block;background:var(--ink-soft);border:1px solid var(--ink-line);border-left:4px solid var(--cinnabar);border-radius:10px;padding:18px;text-decoration:none;color:var(--paper);transition:.15s}
.feature:hover{border-left-color:var(--gold);transform:translateY(-2px)}
.feature h3{margin:0 0 6px;font-family:"Noto Serif SC",serif}
.feature p{margin:0;color:var(--muted);font-size:14px}

.sample-surnames h2{font-family:"Noto Serif SC",serif}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip,.tag{display:inline-block;background:var(--ink-soft);border:1px solid var(--gold);color:var(--paper);border-radius:20px;padding:6px 14px;text-decoration:none;font-size:14px}
.chip:hover,.tag:hover{background:var(--gold);color:var(--ink)}

.surname-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;border-bottom:2px solid var(--cinnabar);padding-bottom:12px;margin-bottom:20px}
.big{font-family:"Noto Serif SC",serif;font-size:48px;color:var(--cinnabar)}
.rank{background:var(--gold);color:var(--ink);padding:4px 12px;border-radius:16px;font-size:13px;font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.panel{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:10px;padding:18px}
.panel.wide{grid-column:1 / -1}

.grid.compact{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:12px}
.grid.compact .panel{padding:12px 14px;background:#15151f}
.grid.compact .panel h3{font-size:14px;margin:0 0 8px;color:var(--gold)}
.panel h2{font-family:"Noto Serif SC",serif;color:var(--gold);margin-top:0}
.meta{font-size:14px;color:var(--paper-dim)}
.meta span{display:inline-block;min-width:42px;color:var(--cinnabar);font-weight:600}
.zibei-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.zibei{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--pine);color:var(--paper);font-family:"Noto Serif SC",serif;font-size:18px}
.people{list-style:none;padding:0;margin:0}
.people li{margin-bottom:8px;color:var(--paper-dim)}

.cta{text-align:center;margin:28px 0;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;background:var(--cinnabar);color:var(--paper);text-decoration:none;padding:10px 22px;border-radius:24px;font-size:15px}
.btn:hover{background:var(--gold);color:var(--ink)}
.btn.ghost{background:transparent;border:1px solid var(--gold);color:var(--gold)}
.btn.small{padding:6px 14px;font-size:13px;border-radius:18px}

.tool-head{text-align:center;padding:20px 0}
.search-form{display:flex;gap:10px;justify-content:center;margin:18px 0;flex-wrap:wrap}

.pf-form{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:16px 18px}
.pf-grid{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.pf-f{display:flex;flex-direction:column;gap:6px;flex:1 1 140px;min-width:0}
.pf-f-wide{flex:2.2 1 220px}
.pf-lb{font-size:13px;color:var(--paper-dim);white-space:nowrap}
.pf-f input[type=text]{padding:11px 14px;border:1px solid var(--ink-line);border-radius:8px;background:#15151f;color:var(--paper);font-family:inherit;font-size:15px;width:100%}
.pf-f input[type=text]:focus{outline:none;border-color:var(--gold)}
.pf-f-birth{flex:1.5 1 190px}
.pf-f .pick-input{background:#15151f;font-size:14px}
.pf-go{flex:0 0 auto;padding:11px 26px;border-radius:8px;align-self:flex-end}
.pf-cur{margin:12px 0 0;font-size:13px;color:var(--paper-dim);line-height:1.9}
.pf-cur b{color:var(--gold)}
.pf-clear{margin-left:8px;color:var(--gold);text-decoration:none;white-space:nowrap}
.pf-clear:hover{text-decoration:underline}
@media (max-width:680px){
  .pf-grid{flex-direction:column;align-items:stretch}
  .pf-f,.pf-f-wide{flex:1 1 auto}
  .pf-go{width:100%;margin-top:2px}
}
.poem-result-sec{scroll-margin-top:90px}
.poem-src-card.on{border-color:var(--gold);background:#1b1b27}
.poem-src-card.on .poem-src-tag{color:var(--gold);border-color:var(--gold)}
.search-form input{flex:1;max-width:420px;padding:12px 16px;border:1px solid var(--ink-line);border-radius:24px;font-size:16px;background:var(--ink);color:var(--paper)}
.search-form button{background:var(--gold);color:var(--ink);border:0;padding:12px 26px;border-radius:24px;font-size:15px;cursor:pointer;font-weight:600}
.search-form button:hover{background:var(--cinnabar);color:var(--paper)}

.tag-hint{text-align:center;margin:14px 0}
.tag{margin:4px;font-size:13px}
.error{color:var(--cinnabar);text-align:center;font-weight:600}
.result-title{font-family:"Noto Serif SC",serif;text-align:center;color:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:16px}
.cards .name-card{display:flex;gap:14px;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:10px;padding:14px}
.char{font-family:"Noto Serif SC",serif;font-size:40px;color:var(--cinnabar);width:48px;text-align:center;flex-shrink:0}
.info .line{font-family:"Noto Serif SC",serif;margin:0 0 4px;color:var(--paper)}
.info .src{color:var(--muted);font-size:13px;margin:0 0 6px}
.info .meaning{font-size:14px;margin:0 0 8px;color:var(--paper-dim)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag-sm{background:var(--ink);color:var(--pine);border:1px solid var(--ink-line);border-radius:12px;padding:2px 10px;font-size:12px}
.muted{color:var(--muted);font-size:14px}

.zibei-grid{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.zibei-cell{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:var(--pine);color:var(--paper);font-family:"Noto Serif SC",serif;font-size:18px}
.meaning-list{font-size:14px;color:var(--paper-dim);padding-left:18px;margin:8px 0}
.meaning-list li{margin-bottom:4px}
.big-name{font-family:"Noto Serif SC",serif;font-size:30px;color:var(--cinnabar);margin:0 0 8px}
.cta form{display:flex;gap:14px;justify-content:center;align-items:flex-end;flex-wrap:wrap;margin:14px 0}
.cta label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted);text-align:left}
.cta select,.cta input[type=text]{padding:10px 14px;border:1px solid var(--ink-line);border-radius:8px;font-size:15px;background:var(--ink);color:var(--paper);min-width:200px}
details{margin-top:10px}
summary{cursor:pointer;color:var(--gold);font-size:14px}
.result-box{text-align:center;background:var(--ink-soft);border:1px solid var(--gold);border-radius:12px;padding:20px;margin:16px 0}
.result-label{display:block;color:var(--muted);font-size:13px;margin-bottom:6px}
.result-title{font-size:34px;color:var(--paper);display:block}

.viz-wrap{width:100%;overflow:hidden;background:var(--ink);border-radius:10px;padding:8px}
.viz-wrap.scroll{overflow-x:auto}
.viz-wrap svg{width:100%;height:auto;display:block}

.ink-map .map-bg{fill:var(--ink)}
.ink-map .land{fill:url(#land);stroke:var(--ink-line);stroke-width:1.4}
.ink-map .route{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:5 5;opacity:.75}
.ink-map .node .ring{fill:none;stroke:var(--gold);stroke-width:1.4;opacity:.8}
.ink-map .node .dot{fill:var(--cinnabar);stroke:var(--paper);stroke-width:1}
.ink-map .geo-label{fill:var(--paper);font-family:"Noto Serif SC",serif;font-size:15px;text-anchor:middle}

.viz-wrap svg.ink-tree{max-width:100%;height:auto}
.ink-tree .edge{fill:none;stroke:var(--pine);stroke-width:1.6;opacity:.8}
.ink-tree .box{fill:var(--ink-soft);stroke:var(--ink-line);stroke-width:1.1}
.ink-tree .node-box.root .box{stroke:var(--gold);stroke-width:1.8}
.ink-tree .box-name{fill:var(--paper);font-family:"Noto Serif SC",serif;font-size:13px;text-anchor:middle}
.ink-tree .box-note{fill:var(--muted);font-size:10px;text-anchor:middle}

.ink-timeline .axis{stroke:var(--ink-line);stroke-width:1.6}
.ink-timeline .band{fill:var(--ink-soft);opacity:.6}
.ink-timeline .band-label{fill:var(--gold);font-size:12px;text-anchor:middle;font-family:"Noto Serif SC",serif}
.ink-timeline .tl-stem{stroke:var(--ink-line);stroke-width:1.2}
.ink-timeline .tl-dot{fill:var(--cinnabar);stroke:var(--gold);stroke-width:1.2}
.ink-timeline .tl-name{fill:var(--paper);font-family:"Noto Serif SC",serif;font-size:14px;text-anchor:middle}
.ink-timeline .tl-year{fill:var(--muted);font-size:11px;text-anchor:middle}

.route-legend{list-style:none;padding:0;margin:12px 0 0;font-size:13px;color:var(--paper-dim)}
.route-legend li{margin-bottom:5px}
.route-legend b{color:var(--gold)}
.people-list ul{padding-left:18px;margin-top:8px;color:var(--paper-dim);font-size:14px}

.name-form{background:var(--ink-soft);padding:18px 20px;border-radius:12px;border:1px solid var(--ink-line)}
.gate-card{border:1px solid var(--gold);background:linear-gradient(180deg,rgba(212,175,55,.10),rgba(212,175,55,.02));box-shadow:0 0 0 4px rgba(212,175,55,.06)}
.gate-card h2{margin:0 0 8px;color:var(--gold);font-family:"Noto Serif SC",serif}
.gate-form{border-color:var(--gold)}
.gate-form .btn{background:linear-gradient(135deg,var(--gold),#9c7d22);color:#1a1a2e}
.form-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:10px}
.form-row label{display:flex;flex-direction:column;font-size:13px;color:var(--paper-dim);gap:5px;flex:0 0 auto}
.form-row label.grow{flex:1 1 280px}
.form-row input,.form-row select{
  background:#15151f;color:var(--paper);border:1px solid var(--ink-line);
  border-radius:8px;padding:9px 11px;font-size:15px;font-family:inherit;min-width:120px;
}
.form-row input:focus,.form-row select:focus{outline:none;border-color:var(--gold)}

.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:flex-end;margin-bottom:10px}
.fcell{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--paper-dim);min-width:0}
.fcell.full{grid-column:1 / -1}
.fcell > input,.fcell > select{background:#15151f;color:var(--paper);border:1px solid var(--ink-line);border-radius:8px;padding:10px 12px;font-size:15px;font-family:inherit;width:100%}
.fcell > input:focus,.fcell > select:focus{outline:none;border-color:var(--gold)}
.fcell .pick-input{width:100%;padding:11px 14px;border:1px solid var(--ink-line);border-radius:8px;background:#15151f;color:var(--paper);font-family:inherit;font-size:15px}
.fcell .pick-input:focus{outline:none;border-color:var(--gold)}
.fcell.full > .btn{width:100%}
@media (max-width:680px){.fgrid{grid-template-columns:1fr}}

.btn{
  background:linear-gradient(135deg,var(--cinnabar),#9b2d22);color:#fff;border:none;
  padding:10px 22px;border-radius:8px;font-size:15px;cursor:pointer;font-family:"Noto Serif SC",serif;
  letter-spacing:1px;transition:.2s;
}
.btn:hover{filter:brightness(1.12)}
.name-list{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(max-width:720px){.name-list{grid-template-columns:1fr}}
.name-card{display:block;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:16px 18px}
.name-card.big{grid-column:1/-1}
.nc-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:12px;border-bottom:1px dashed var(--ink-line)}
.nc-name{font-family:"Noto Serif SC",serif;font-size:28px;color:var(--gold);font-weight:700;letter-spacing:3px}
.nc-pinyin{color:var(--paper-dim);font-size:14px}
.nc-total{margin-left:auto;background:var(--pine);color:#fff;padding:4px 14px;border-radius:20px;font-size:13px;font-weight:600}
.nc-poem{margin:14px 0 6px;padding:14px 16px;border-left:3px solid var(--gold);background:var(--ink-soft);border-radius:0 10px 10px 0;font-size:15px;line-height:1.75}
.nc-poem .quote{display:block;color:var(--paper);font-family:"Noto Serif SC",serif;font-size:17px;letter-spacing:1px}
.np-line{margin-bottom:10px}
.np-by{display:block;margin-top:5px;color:var(--muted);font-size:13px}
.np-idiom{margin-top:11px;padding-top:11px;border-top:1px dashed var(--ink-line)}

.nc-poem .np-hit{background:transparent;color:var(--gold);font-weight:700;border-bottom:2px solid var(--gold);padding:0 1px}
.np-why{margin:6px 0 0;font-size:12.5px;color:var(--muted)}
.np-why b{color:var(--gold);font-weight:600}
.np-none{margin:0;font-size:13px;color:var(--muted)}
.np-py{color:var(--paper-dim);font-size:12px;margin-left:6px}
.np-exp{margin:6px 0 0;font-size:13.5px;color:var(--paper)}
.np-src{margin:5px 0 0;font-size:12px;color:var(--muted)}
.nc-grid{display:flex;flex-direction:column;gap:8px;font-size:13px;margin-top:6px}
.nc-grid>div{display:flex;align-items:center;flex-wrap:wrap;gap:3px 0}
.nc-grid b{color:var(--gold);font-weight:600;flex:0 0 72px}
.nc-grid .chip{margin:0 4px 0 0}
.chip{display:inline-block;background:#15151f;border:1px solid var(--ink-line);border-radius:6px;padding:2px 8px;margin:2px 4px 2px 0;font-size:12px;color:var(--paper-dim)}
.chip.good{color:#bfe6c8;border-color:var(--pine)}
.chip.bad{color:#f0b8b0;border-color:var(--cinnabar)}
.chip.wx{color:var(--gold)}

.nc-scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px 20px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--ink-line)}
.nc-scores .bar{display:block}
.nc-scores .bar-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12px;color:var(--paper-dim);margin-bottom:4px}
.nc-scores .bar-top em{font-style:normal}
.nc-scores .bar-top b{color:var(--gold);font-variant-numeric:tabular-nums;font-weight:600}
.nc-scores .bar-track{display:block;height:6px;background:#10101a;border:1px solid var(--ink-line);border-radius:3px;overflow:hidden}
.nc-scores .bar-track i{display:block;height:100%;background:linear-gradient(90deg,var(--pine),var(--gold));border-radius:3px}

.nc-corpus{display:flex;flex-direction:column;gap:8px;font-size:13px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--ink-line)}
.nc-corpus>div{display:flex;align-items:center;flex-wrap:wrap;gap:3px 0}
.nc-corpus b{color:var(--gold);font-weight:600;flex:0 0 96px}
.nc-corpus .chip{margin:0 4px 0 0}
.nc-corpus small{color:var(--paper-dim);font-size:11px}
.chip.male{color:#a8c8f0;border-color:#3a5a8a}
.chip.female{color:#f0b8d8;border-color:#8a3a6a}
.chip.neutral{color:var(--paper-dim)}
.bad{color:#f0b8b0;margin-top:4px}
.good{color:#bfe6c8;margin-top:4px}
.notice{background:#2a1a18;border:1px solid var(--cinnabar);color:#f0c0b8;padding:12px 16px;border-radius:8px}
.small{font-size:12px}
code{background:#15151f;border:1px solid var(--ink-line);border-radius:4px;padding:1px 5px;font-size:12px;color:var(--gold)}
.chip.good2{color:#cfe6bf;border-color:#5a7a4a}
.chip.mid{color:#e6d8a8;border-color:#7a6a3a}

.na-head{margin-bottom:14px}
.na-head h2{margin-top:0}
.panel h2{font-family:"Noto Serif SC",serif;font-size:19px;color:var(--gold);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid var(--ink-line)}
.panel h3{font-size:15px;color:var(--paper);margin:14px 0 6px}
.na-chars{display:flex;flex-wrap:wrap;gap:16px}
.na-char{display:flex;gap:12px;align-items:center;background:#15151f;border:1px solid var(--ink-line);border-radius:10px;padding:12px 16px;min-width:210px}
.na-glyph{font-family:"Noto Serif SC",serif;font-size:44px;color:var(--gold);line-height:1;min-width:56px;text-align:center}
.na-cmeta{font-size:13px;color:var(--paper-dim);line-height:1.85}
.na-cmeta b{color:var(--paper)}
.na-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
.na-table th,.na-table td{border:1px solid var(--ink-line);padding:7px 10px;text-align:left;vertical-align:top}
.na-table th{background:#15151f;color:var(--gold);font-weight:600;white-space:nowrap}
.na-table td.muted{color:var(--paper-dim)}
.na-wxbars{display:flex;flex-direction:column;gap:5px;margin:10px 0}
.na-wxrow{display:flex;align-items:center;gap:10px}
.na-wxlabel{width:20px;color:var(--gold);font-size:13px;text-align:center}
.na-wxrow .bar{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--paper-dim)}
.na-wxrow .bar i{display:inline-block;height:8px;background:linear-gradient(90deg,var(--pine),var(--gold));border-radius:4px;min-width:2px}
.na-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.na-cols{grid-template-columns:1fr}}
.na-advice{margin:6px 0 0;padding-left:20px;color:var(--paper-dim);font-size:14px}
.na-advice li{margin:6px 0;line-height:1.65}
details summary{cursor:pointer;color:var(--gold);font-size:13px;margin-top:8px}
details p{margin:6px 0 0}

.rel-current{margin-bottom:14px}
.rel-current-label{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
.rel-path{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;
  background:var(--ink);border:1px dashed var(--ink-line);border-radius:10px;padding:10px 12px}
.rel-chip{background:var(--ink-soft);border:1px solid var(--ink-line);color:var(--paper);
  border-radius:16px;padding:4px 14px;font-size:14px}
.rel-chip-self{background:var(--cinnabar);border-color:var(--cinnabar);color:#fff}
.rel-arrow{color:var(--muted);font-size:16px;line-height:1}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px;margin:16px 0}
.rel-btn{background:var(--ink-soft);border:1px solid var(--gold);color:var(--gold);
  border-radius:10px;padding:14px 8px;font-size:16px;cursor:pointer;
  font-family:inherit;transition:background .15s,color .15s,transform .08s}
.rel-btn:hover{background:var(--gold);color:var(--ink)}
.rel-btn:active{transform:scale(.96)}
.rel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.rel-actions .btn{cursor:pointer;font-family:inherit;font-size:14px;padding:8px 18px}
.rel-meta{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:8px}
.rel-meta .small{max-width:520px;text-align:left}
.rel-alts{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}
.rel-examples{display:flex;flex-wrap:wrap;gap:8px}
.rel-examples a{background:var(--ink-soft);border:1px solid var(--ink-line);color:var(--paper-dim);
  text-decoration:none;border-radius:16px;padding:6px 14px;font-size:13px}
.rel-examples a:hover{border-color:var(--gold);color:var(--gold)}

ul.people-list{list-style:none;padding:0;margin:14px 0 6px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:0 20px}
ul.people-list li{padding:5px 0;border-bottom:1px dashed var(--ink-line);
  font-size:14px;color:var(--paper-dim);line-height:1.55}
ul.people-list li strong{color:var(--paper);font-family:"Noto Serif SC",serif;
  font-size:15px;margin-right:6px}
ul.people-list li .chip{margin-left:6px;font-size:11px;padding:1px 6px}

.zibei-cell.wide{width:auto;min-width:42px;padding:0 8px;gap:1px}

.surname-index{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.slink{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:34px;padding:0 9px;border-radius:7px;
  background:var(--ink-soft);border:1px solid var(--ink-line);
  color:var(--paper-dim);text-decoration:none;
  font-family:"Noto Serif SC",serif;font-size:16px;transition:.12s}
.slink:hover{border-color:var(--gold);color:var(--paper);background:#1d1d2e}
.slink.detailed{color:var(--gold);border-color:#5a4b1e}
.slink.compound{min-width:52px;font-size:14px;letter-spacing:.5px}

.grade{display:inline-block;font-size:12px;line-height:1;padding:4px 9px;border-radius:10px;
  border:1px solid var(--ink-line);color:var(--paper-dim)}
.grade.a{color:var(--gold);border-color:var(--gold)}
.src{font-size:13px;color:var(--paper-dim);margin-left:8px}
.zibei-cell .cnt{font-size:10px;opacity:.55;margin-left:1px;vertical-align:super}
a.chip{display:inline-block;background:var(--ink-soft);border:1px solid var(--ink-line);
  color:var(--paper-dim);text-decoration:none;border-radius:14px;padding:3px 11px;font-size:13px;margin:2px}
a.chip:hover{border-color:var(--gold);color:var(--gold)}

.grade.b{color:var(--paper-dim);border-color:var(--ink-line)}
.grade.c{color:#d8b46a;border-color:#6a5726}
.grade.d{color:#7fb8d8;border-color:#2f5670}
.contrib{border:1px solid var(--ink-line);border-radius:10px;padding:10px 14px;margin:12px 0;background:var(--ink-soft)}
.ok-banner{border:1px solid #2f6b4f;background:#16301f;color:#9fe0b8;border-radius:8px;padding:10px 14px}

.zibei-form{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:20px 22px;margin-top:14px}
.zibei-form label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--paper-dim);margin-bottom:16px;text-align:left;line-height:1.6}
.zibei-form input[type=text]{padding:11px 14px;border:1px solid var(--ink-line);border-radius:8px;font-size:15px;background:#15151f;color:var(--paper);width:100%;font-family:inherit}
.zibei-form input[type=text]:focus{outline:none;border-color:var(--gold)}
.zibei-form .btn{margin-top:2px}

a.zibei-cell{text-decoration:none;transition:border-color .12s,background .12s,color .12s}
a.zibei-cell:hover{border-color:var(--gold);background:var(--gold);color:var(--ink)}

.site-header{position:sticky;top:0;z-index:50;background:rgba(18,18,31,.92);backdrop-filter:blur(6px)}
.nav a{position:relative}
.nav a::after{content:"";position:absolute;left:18px;right:18px;bottom:-4px;height:2px;background:var(--gold);transform:scaleX(0);transition:.18s;transform-origin:left}
.nav a:hover::after{transform:scaleX(1)}

.hero{position:relative;text-align:center;padding:64px 20px 48px;margin:-28px calc(50% - 50vw) 28px;
  background:
    radial-gradient(1200px 360px at 50% -40%, rgba(212,175,55,.16), transparent 70%),
    linear-gradient(180deg,#15151f,#1a1a2e);
  border-bottom:1px solid var(--ink-line);overflow:hidden}
.hero-inner{max-width:760px;margin:0 auto}
.hero-seal{display:inline-block;font-family:"Noto Serif SC",serif;font-size:15px;letter-spacing:6px;
  color:var(--gold);border:1px solid var(--gold);border-radius:6px;padding:5px 14px;margin-bottom:18px;opacity:.9}
.hero h1{font-family:"Noto Serif SC",serif;font-size:clamp(34px,6vw,56px);margin:0 0 12px;
  color:var(--paper);letter-spacing:4px;
  background:linear-gradient(180deg,#f3efe6,#d8c9a0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{color:var(--muted);font-size:16px;margin:0 0 26px}
.hero h1 .muted{display:block;white-space:nowrap;margin-top:10px;font-size:20px;font-weight:400;letter-spacing:.5px;color:var(--muted)}
.hero-search{display:flex;gap:10px;justify-content:center;max-width:520px;margin:0 auto 16px;flex-wrap:wrap}
.hero-search input{flex:1;min-width:220px;padding:13px 18px;border:1px solid var(--ink-line);
  border-radius:26px;background:#101019;color:var(--paper);font-size:15px;font-family:inherit}
.hero-search input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.15)}
.hero-search .btn{border-radius:26px;padding:13px 26px}
.hero-hint{color:var(--muted);font-size:13px;margin:0}
.hero-hint b{color:var(--gold)}

.modules{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:8px 0 36px}
.module{display:flex;flex-direction:column;gap:6px;background:var(--ink-soft);border:1px solid var(--ink-line);
  border-left:4px solid var(--cinnabar);border-radius:12px;padding:18px 20px;text-decoration:none;color:var(--paper);transition:.16s}
.module:hover{border-left-color:var(--gold);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.m-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:9px;
  background:linear-gradient(135deg,var(--cinnabar),#9b2d22);color:#fff;font-family:"Noto Serif SC",serif;font-size:20px;margin-bottom:4px}
.m-title{font-family:"Noto Serif SC",serif;font-size:18px;color:var(--gold);font-weight:700}
.m-desc{color:var(--muted);font-size:13px;line-height:1.6}

.surname-browser{margin-top:8px}
.surname-browser h2{font-family:"Noto Serif SC",serif;font-size:22px;color:var(--paper);margin:0 0 14px}
.surname-grid{display:flex;flex-wrap:wrap;gap:8px}
.surname-grid .slink{font-size:17px;min-width:42px;height:38px}
.more{text-align:center;margin-top:22px}

.zi-head,.idiom-head,.poem-head,.ci-head{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.zi-glyph{font-family:"Noto Serif SC",serif;font-size:74px;line-height:1;color:var(--gold);
  width:116px;height:116px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:18px}
.zi-meta{flex:1;min-width:240px}
.zi-meta p{margin:5px 0;color:var(--muted);font-size:14px}
.zi-meta b{color:var(--paper-dim);margin-right:5px}
.zi-meaning{font-size:16px;line-height:1.95;color:var(--paper)}
.idiom-word,.poem-text{font-family:"Noto Serif SC",serif;font-size:32px;color:var(--gold);margin:0;line-height:1.5}
.poem-text{font-size:27px;line-height:1.85}
.idiom-meta p{margin:6px 0;color:var(--muted);font-size:14px}
.ref-list{list-style:none;margin:0;padding:0}
.ref-list li{padding:10px 2px;border-bottom:1px dashed var(--ink-line)}
.ref-line{color:var(--paper);text-decoration:none;font-family:"Noto Serif SC",serif;font-size:18px}
.ref-line:hover{color:var(--gold)}
.chip-wrap{display:flex;flex-wrap:wrap;gap:7px}
a.chip.link{color:var(--paper-dim);text-decoration:none}
a.chip.link:hover{color:var(--gold);border-color:var(--gold)}
.nc-chars{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 2px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn.ghost{background:transparent;border:1px solid var(--ink-line);color:var(--paper-dim)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold)}

.page-head{margin-bottom:26px}
.page-head h1{margin:0 0 10px;font-size:28px;letter-spacing:2px}
.page-sub{color:var(--muted);font-size:15px;line-height:1.9;max-width:760px;margin:0}
.zi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:8px}
.zi-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 7px;
  background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;
  text-decoration:none;transition:border-color .15s}
.zi-cell:hover{border-color:var(--gold)}
.zi-ch{font-family:"Noto Serif SC",serif;font-size:24px;color:var(--paper);line-height:1.2}
.zi-cell:hover .zi-ch{color:var(--gold)}
.zi-py{font-size:11.5px;color:var(--muted)}
.idiom-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.idiom-cell{display:flex;align-items:center;justify-content:center;padding:10px 6px;
  background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;
  font-family:"Noto Serif SC",serif;font-size:17px;color:var(--paper);text-decoration:none;
  letter-spacing:1px;transition:border-color .15s}
.idiom-cell:hover{border-color:var(--gold);color:var(--gold)}
.idiom-strip{display:flex;flex-wrap:wrap;gap:8px}
.idiom-pill{display:inline-block;padding:7px 14px;background:var(--ink-soft);
  border:1px solid var(--ink-line);border-radius:999px;font-size:15px;
  color:var(--paper-dim);text-decoration:none;letter-spacing:1px}
.idiom-pill:hover{border-color:var(--gold);color:var(--gold)}
.ci-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ci-cell{display:flex;flex-direction:column;gap:3px;padding:10px 12px;
  background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;
  text-decoration:none;transition:border-color .15s;min-width:0}
.ci-cell:hover{border-color:var(--gold)}
.ci-w{font-family:"Noto Serif SC",serif;font-size:17px;color:var(--paper);letter-spacing:1px}
.ci-cell:hover .ci-w{color:var(--gold)}
.ci-m{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-mean{white-space:normal !important;min-width:180px;color:var(--muted);font-size:13.5px}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 10px}
.stat{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:14px;padding:13px 14px;
  display:flex;flex-direction:column;gap:3px;min-width:0}
.stat .k{font-size:12.5px;color:var(--muted);letter-spacing:.5px}
.stat .v{font-family:"Noto Serif SC",serif;font-size:26px;color:var(--gold);line-height:1.15}
.stat .u{font-size:12.5px;color:var(--muted)}

.ref-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:12px}
.ref-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.ref-table th,.ref-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--ink-line);
  white-space:nowrap}
.ref-table th{color:var(--muted);font-weight:400;font-size:13px;letter-spacing:.5px;
  border-bottom-color:var(--gold-dim,var(--ink-line))}
.ref-table tbody tr:hover{background:var(--ink-soft)}
.glyph-link{font-family:"Noto Serif SC",serif;font-size:26px;color:var(--gold);text-decoration:none;
  line-height:1.2}
.glyph-link:hover{color:var(--paper)}

@media (max-width: 820px){
  .site-header{flex-direction:column;align-items:flex-start;gap:10px;padding:10px 14px}
  .nav{display:flex;flex-wrap:wrap;gap:10px 16px;width:100%}
  .nav a{font-size:14px}
  .nav a::after{display:none}
  .container{padding:16px 13px 48px}
  .hero{padding:46px 16px 30px;margin:-16px calc(50% - 50vw) 18px}
  .modules{grid-template-columns:1fr;gap:12px}
  .name-list{grid-template-columns:1fr}
  .form-row{display:flex;flex-direction:column;align-items:stretch;gap:11px}
  .form-row label{width:100%}
  .name-form input,.name-form select{width:100%;box-sizing:border-box}
  .na-cols{grid-template-columns:1fr;gap:18px}
  .na-char{min-width:0;width:100%}
  .surname-grid .slink{font-size:15px;min-width:38px;height:34px}
  .zi-head,.idiom-head,.poem-head{flex-direction:column;align-items:flex-start}
  .zi-glyph{font-size:58px;width:88px;height:88px}
  .idiom-word,.poem-text{font-size:25px}
  .ref-line{font-size:16px}
  .nc-head{gap:8px}
  .nc-name{font-size:20px}
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat .v{font-size:22px}
  .zi-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:6px}
  .zi-ch{font-size:20px}
  .idiom-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}
  .idiom-cell{font-size:15px}
  .ci-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
}
@media (max-width: 440px){
  .hero h1{letter-spacing:2px}
  .modules{gap:10px}
  .zi-meaning{font-size:15px}
  .poem-text{font-size:22px;line-height:1.7}
  .stat-grid{grid-template-columns:1fr}
  .zi-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:5px}
  .zi-py{font-size:10px}
  .idiom-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
  .ci-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:6px}
  .page-head h1{font-size:22px;letter-spacing:1px}
}

.kw-field{position:relative;display:flex;flex-direction:column;gap:5px;flex:0 0 auto;font-size:13px;color:var(--paper-dim)}
.kw-field.grow{flex:1 1 280px}
.birth-field{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--paper-dim);flex:1 1 240px}
.birth-field input[type=datetime-local]{padding:11px 14px;border:1px solid var(--ink-line);border-radius:8px;background:#15151f;color:var(--paper);font-family:inherit;color-scheme:dark;width:100%}
.birth-field input[type=datetime-local]:focus{outline:none;border-color:var(--gold)}
.ff-label{font-size:13px;color:var(--paper-dim)}

.kw-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#15151f;border:1px solid var(--ink-line);
  border-radius:8px;padding:6px 10px;min-height:42px;cursor:text;transition:.15s;font-size:15px}
.kw-box:focus-within{border-color:var(--gold)}
.kw-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kw-tag{display:inline-flex;align-items:center;gap:4px;background:linear-gradient(135deg,var(--gold),#9c7d22);color:#1a1a2e;
  border-radius:14px;padding:3px 6px 3px 10px;font-size:13px;font-weight:600;line-height:1.5}
.kw-tag .kw-x{border:none;background:rgba(26,26,46,.25);color:#1a1a2e;width:18px;height:18px;border-radius:50%;
  cursor:pointer;font-size:13px;line-height:1;display:inline-flex;align-items:center;justify-content:center;padding:0}
.kw-tag .kw-x:hover{background:rgba(26,26,46,.45)}
.kw-box .kw-input{flex:1 1 110px;min-width:100px;background:transparent;border:none;color:var(--paper);
  font-size:15px;font-family:inherit;padding:4px 0;outline:none;box-shadow:none}
.kw-toggle{border:none;background:transparent;color:var(--paper-dim);cursor:pointer;font-size:15px;padding:0 2px}
.kw-toggle:hover{color:var(--gold)}
.vibe-hidden-wrap{display:none}

.vibe-pop{display:none;position:absolute;left:0;right:0;top:100%;margin-top:6px;z-index:90;
  background:var(--ink-soft);border:1px solid var(--gold);border-radius:14px;padding:16px 18px;
  max-height:52vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.vibe-pop.open{display:block}
.vibe-pop>p{margin:0}
.vibe-group{margin:14px 0 6px}
.vibe-group-title{display:block;color:var(--cinnabar);font-size:14px;font-weight:600;margin-bottom:8px;letter-spacing:1px}
.vibe-pop .vibe-chip{display:inline-flex;align-items:center;margin:0 6px 6px 0;cursor:pointer;font-size:14px;
  background:var(--ink);border:1px solid var(--ink-line);color:var(--paper-dim);border-radius:20px;padding:6px 14px;transition:.15s}
.vibe-chip:hover{border-color:var(--gold);color:var(--paper)}
.vibe-chip.on{background:linear-gradient(135deg,var(--gold),#9c7d22);color:#1a1a2e;border-color:var(--gold);font-weight:600}
@keyframes kwShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.vibe-chip.shake{animation:kwShake .4s}

.pick-input{width:100%;cursor:pointer;background:var(--ink-soft);border:1px solid var(--ink-line);
  border-radius:8px;color:var(--paper);font-size:15px;padding:11px 14px;
  font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;text-align:left}
.pick-input::placeholder{color:var(--muted)}
.pick-input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.3)}
.gearDate{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif;font-size:10px;
  background-color:rgba(0,0,0,.45);display:block;position:fixed;top:0;left:0;
  width:100%;height:100%;z-index:20189;overflow:hidden}
.date_ctrl{vertical-align:middle;background:var(--ink-soft);border:1px solid var(--ink-line);
  border-radius:12px;color:var(--paper);height:auto;width:92%;max-width:520px;
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);margin:0 auto;
  box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden;max-height:88vh}
.slideInUp{animation:dpSlideIn .2s ease}
@keyframes dpSlideIn{from{opacity:0}to{opacity:1}}
.date_roll{position:relative;width:100%;height:auto;overflow:hidden;font-weight:bold;background-color:transparent;
  -webkit-mask:-webkit-linear-gradient(top,#000 50%,rgba(0,0,0,0));mask:linear-gradient(to bottom,#000 50%,rgba(0,0,0,0))}
.date_roll>div{font-size:2em;height:6em;float:left;background-color:transparent;position:relative;overflow:hidden;width:33.33%}
.date_roll_more>div{width:25%}
.date_roll_minut>div{width:20%}
.date_roll_mask{padding:0 1em;
  -webkit-mask:-webkit-linear-gradient(bottom,#000 50%,rgba(0,0,0,0));mask:linear-gradient(to top,#000 50%,rgba(0,0,0,0))}
.date_grid{position:relative;top:2em;width:100%;height:2em;margin:0;box-sizing:border-box;z-index:0;
  background:rgba(212,175,55,.14);border-top:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line)}
.date_grid>div{color:var(--paper-dim);position:absolute;right:0;top:0;font-size:.8em;line-height:2.5em}
.date_info_box{color:var(--paper);font-size:1.8em;text-align:center;padding:.6em 0;
  border-bottom:1px solid var(--ink-line);font-weight:700;font-family:"Noto Serif SC",serif}
.date_class_box{text-align:center;padding:1em 2em}
.date_class{display:inline-block;font-size:1.4em;width:40%;padding:.4em 0;text-align:center;
  color:var(--gold);border:1px solid var(--gold);background:transparent;cursor:pointer}
.date_class_box .date_class:first-child{border-top-left-radius:.2em;border-bottom-left-radius:.2em}
.date_class_box .date_class:last-child{border-top-right-radius:.2em;border-bottom-right-radius:.2em}
.date_class_box .active{background:var(--gold);color:var(--ink)}
.date_btn_box{overflow:hidden;position:relative;border-top:1px solid var(--ink-line);margin-top:1em}
.date_btn{color:var(--paper);font-size:1.6em;line-height:1em;text-align:center;padding:.8em 1em;
  cursor:pointer;float:left;width:49.9%;box-sizing:border-box}
.date_btn:hover{color:var(--gold)}
.lcalendar_cancel{float:left !important}
.lcalendar_finish{float:right !important;color:var(--gold);font-weight:700}
.date_btn.lcalendar_cancel{border-right:1px solid var(--ink-line)}
.gear{float:left;position:absolute;z-index:9902;width:5.5em;margin-top:-6em;cursor:pointer;padding:2em 0}
.date_roll>div .gear{width:100%;color:var(--paper)}
.tooth{height:2em;line-height:2em;text-align:center;overflow:hidden;color:var(--paper)}
@media (max-width:560px){
  .date_ctrl{width:96%;top:14%;transform:none;max-height:80vh}
}

.algo-note{border-left:4px solid var(--gold);background:linear-gradient(180deg,rgba(212,175,55,.07),rgba(212,175,55,.01))}
.algo-note h2{color:var(--gold)}
.algo-note ul{margin:6px 0 0;padding-left:18px}
.algo-note li{color:var(--paper-dim);font-size:14px;line-height:1.85;margin-bottom:4px}
.algo-note b{color:var(--paper)}

.material-net{border-left:4px solid var(--pine);background:linear-gradient(180deg,rgba(60,140,120,.10),rgba(60,140,120,.02))}
.material-net h2{color:var(--pine)}
.mat-groups{margin-top:8px;display:flex;flex-direction:column;gap:12px}
.mat-group{display:flex;flex-wrap:wrap;align-items:flex-start;gap:10px}
.mat-label{flex:0 0 auto;align-self:center;color:var(--paper);font-weight:600;font-size:13px;
  padding:3px 10px;border:1px solid var(--ink-line);border-radius:999px;background:var(--ink)}
.zibei-char-link{color:var(--gold);text-decoration:none}
.zibei-char-link:hover{text-decoration:underline}

.how-diagram{width:100%;height:auto;display:block;margin:10px auto 0;max-width:780px}
.how-diagram text{font-family:"Noto Serif SC","Source Han Serif SC",serif}
.hd-cap{fill:var(--muted);font-size:12px;letter-spacing:1px}
.hd-node rect{fill:var(--ink);stroke:var(--ink-line);stroke-width:1.4}
.hd-node.key rect{stroke:var(--gold);stroke-width:2}
.hd-node .t{fill:var(--paper);font-size:17px;font-weight:700}
.hd-node .s{fill:var(--paper-dim);font-size:10.5px}
.hd-node.key .t{fill:var(--gold)}
.hd-engine rect{fill:rgba(74,122,90,.16);stroke:var(--pine);stroke-width:1.6}
.hd-engine .t{fill:var(--paper);font-size:15px;font-weight:700}
.hd-engine .s{fill:var(--paper-dim);font-size:10.5px}
.hd-out rect{fill:rgba(212,175,55,.14);stroke:var(--gold);stroke-width:1.6}
.hd-out .t{fill:var(--gold);font-size:14px;font-weight:700}
.hd-out .s{fill:var(--paper-dim);font-size:10.5px}
.hd-link{stroke:var(--pine);stroke-width:1.4;stroke-dasharray:4 4;fill:none}
.hd-arrow{stroke:var(--muted);stroke-width:1.4;fill:none}
.hd-arrow.key{stroke:var(--gold);stroke-width:1.8}
.hd-note{fill:var(--paper-dim);font-size:11px}

.footer-nav{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin:0 0 10px}
.footer-nav a{color:var(--paper-dim);text-decoration:none;font-size:13px}
.footer-nav a:hover{color:var(--gold);text-decoration:underline}
.footer-slogan{margin:10px 0 6px;color:var(--paper-dim);font-size:13.5px;letter-spacing:.02em}
.footer-note{margin:0;color:var(--muted);font-size:12.5px}

.must-tag{display:inline-block;background:rgba(122,31,31,.16);border:1px solid var(--cinnabar);
  color:var(--paper);border-radius:6px;padding:1px 8px;font-size:12.5px;width:fit-content}

.rel-term-group{margin:16px 0 6px}
.rel-term-group h3{font-size:14px;color:var(--paper-dim);margin:0 0 8px;
  padding-bottom:4px;border-bottom:1px dashed var(--ink-line)}
.rel-term-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(86px,1fr));gap:8px}
.rel-term-btn{background:var(--ink);border:1px solid var(--ink-line);color:var(--paper);
  border-radius:8px;padding:9px 6px;font-family:inherit;font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:38px;box-sizing:border-box;text-decoration:none;
  transition:border-color .15s,color .15s,background .15s}
.rel-term-btn:hover{border-color:var(--gold);color:var(--gold)}
.rel-term-btn:active{transform:scale(.96)}

.naming-methods{margin:2.2rem 0}
.naming-methods .sect-h, .naming-methods h2{font-size:1.25rem;margin:0 0 1rem;color:var(--gold);font-family:"Noto Serif SC",serif}
.method-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.method{display:block;padding:1.15rem 1.25rem;border:1px solid var(--ink-line);border-radius:12px;background:var(--ink-soft);text-decoration:none;color:var(--paper);transition:transform .15s,box-shadow .15s,border-color .15s}
.method:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translateY(-2px)}
.method h3{margin:0 0 .45rem;font-size:1.05rem;color:var(--gold)}
.method p{margin:0;font-size:.9rem;color:var(--paper-dim);line-height:1.65}

.poem-collections{margin:2rem 0}
.poem-collections h2{font-size:1.2rem;margin:0 0 1rem;color:var(--gold);font-family:"Noto Serif SC",serif}
.poem-col-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.poem-col{border:1px solid var(--ink-line);border-radius:12px;padding:1.1rem 1.2rem;background:var(--ink-soft)}
.poem-col h3{margin:0 0 .6rem;font-size:1.05rem;color:var(--gold)}
.poem-col-items{list-style:none;margin:0 0 .8rem;padding:0}
.poem-col-items li{font-size:.88rem;line-height:1.7;color:var(--paper);padding:.15rem 0;border-bottom:1px dashed var(--ink-line)}
.poem-col-items b{color:var(--cinnabar);font-size:1rem}
.btn.ghost.sm{padding:.4rem .8rem;font-size:.85rem}

.az-nav{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;
  background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:.55rem .8rem;margin:0 0 1.1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.3)}
.az-nav-label{font-size:.85rem;color:var(--paper-dim);margin-right:.35rem}
.az-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:1.7rem;height:1.7rem;
  border-radius:8px;font-size:.9rem;font-weight:600;color:var(--paper);text-decoration:none;background:var(--ink-line)}
.az-nav a:hover{background:var(--gold);color:var(--ink)}
.az-sec{scroll-margin-top:4.5rem;margin:0 0 1.4rem}
.az-key{font-size:1.15rem;color:var(--gold);border-bottom:2px solid var(--ink-line);padding:.25rem 0 .35rem;margin:0 0 .7rem;font-family:"Noto Serif SC",serif}
.zibei-idx{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem}
.zibei-idx-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem;border:1px solid var(--ink-line);
  border-radius:10px;padding:.55rem .7rem;background:var(--ink-soft)}
.zibei-idx-name{font-weight:700;color:var(--gold);text-decoration:none;font-size:1rem}
.zibei-idx-name:hover{text-decoration:underline}
.zibei-idx-meta{font-size:.8rem;color:var(--paper-dim)}
.zibei-idx-sub{margin-left:auto;font-size:.82rem;color:var(--cinnabar);text-decoration:none;white-space:nowrap}
.zibei-idx-sub:hover{text-decoration:underline}

.faq-sec{margin:1.6rem 0}
.faq-sec h2{margin:0 0 .5rem;color:var(--gold);font-family:"Noto Serif SC",serif}
.faq-list{margin:0}
.faq-list dt{font-weight:700;color:var(--paper);margin:1rem 0 .3rem;font-size:1.02rem}
.faq-list dd{margin:0;color:var(--paper-dim);line-height:1.78;font-size:.94rem}

.zbn-form{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:22px 22px 18px;margin:18px 0}
.zbn-form h2{margin:0 0 14px;color:var(--gold);font-family:"Noto Serif SC",serif;font-size:20px}
.zbn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.zbn-row > label{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--paper-dim);flex:1 1 160px}
.zbn-row > label input{padding:11px 14px;border:1px solid var(--ink-line);border-radius:8px;font-size:15px;background:#15151f;color:var(--paper);font-family:inherit;width:100%}
.zbn-row > label input:focus{outline:none;border-color:var(--gold)}
.zbn-branches{margin:18px 0}
.zbn-branch{border:1px solid var(--ink-line);border-radius:10px;padding:12px 14px;margin:10px 0;background:var(--ink-soft)}
.zbn-branch-name{color:var(--gold);font-size:15px;margin:0 0 8px;font-family:"Noto Serif SC",serif}
.zbn-chars{display:flex;flex-wrap:wrap;gap:8px}
.zbn-char{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:8px;background:var(--pine);color:var(--paper);font-family:"Noto Serif SC",serif;font-size:18px;text-decoration:none;transition:border-color .12s,background .12s,color .12s}
.zbn-char:hover{border:1px solid var(--gold);background:var(--gold);color:var(--ink)}
.zbn-related{margin:18px 0}
.zbn-related h2{color:var(--gold);font-family:"Noto Serif SC",serif;font-size:18px;margin:0 0 6px}
.zbn-related p{line-height:2.1;margin:6px 0}
.zbn-related a{color:var(--gold);text-decoration:none;font-size:14px}
.zbn-related a:hover{text-decoration:underline;color:var(--paper)}
.poem-col-char{color:var(--cinnabar);text-decoration:none;font-weight:600}
.poem-col-char:hover{text-decoration:underline;color:var(--gold)}
.bazi-banner{background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:10px;padding:12px 16px;margin:14px 0;font-size:14px;line-height:2}
.bazi-banner .chip{margin:0 4px 4px 0;display:inline-block;padding:2px 10px;border-radius:20px;border:1px solid var(--ink-line);font-size:13px}

.poetry-birth{flex-basis:100%;margin-top:8px}
.poem-sources{margin:22px 0}
.poem-src-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.poem-src-card{display:block;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--paper);transition:border-color .15s,background .15s,transform .12s}
.poem-src-card:hover{border-color:var(--gold);background:#1b1b27;transform:translateY(-2px)}
.poem-src-card h3{margin:0 0 6px;color:var(--gold);font-family:"Noto Serif SC",serif;font-size:18px}
.poem-src-desc{margin:0 0 10px;color:var(--paper-dim);font-size:13.5px;line-height:1.7}
.poem-src-meta{margin:0 0 8px;color:var(--muted);font-size:12.5px}
.poem-src-ex{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.poem-src-ex .poem-col-char{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 9px;white-space:nowrap;border-radius:8px;background:var(--pine);color:var(--paper);font-family:"Noto Serif SC",serif;font-size:17px;font-weight:600}
.poem-src-cta{display:inline-block;color:var(--gold);font-size:13.5px}
.poem-src-card:hover .poem-src-cta{text-decoration:underline}
.poem-src-tag{display:inline-block;font-size:11px;color:var(--muted);border:1px solid var(--ink-line);border-radius:20px;padding:1px 8px;margin-bottom:8px}
@media (max-width:440px){.poem-src-grid{grid-template-columns:1fr}}

.link-box-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:6px}
.link-box{display:flex;flex-direction:column;gap:6px;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:16px;text-decoration:none;color:var(--paper);transition:border-color .15s,background .15s,transform .12s}
.link-box:hover{border-color:var(--gold);background:#1b1b27;transform:translateY(-2px)}
.lb-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;background:var(--pine);color:var(--paper);font-family:"Noto Serif SC",serif;font-size:18px;font-weight:600}
.lb-title{color:var(--gold);font-family:"Noto Serif SC",serif;font-size:16px}
.lb-desc{color:var(--paper-dim);font-size:13px;line-height:1.6}
@media (max-width:560px){.link-box-grid{grid-template-columns:1fr}}

.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a::after{display:none}
.nav-group{position:relative}
.nav-label{background:none;border:none;color:var(--paper);font:inherit;font-size:14px;cursor:pointer;padding:8px 12px;border-radius:8px;line-height:1;transition:color .15s,background .15s}
.nav-label:hover{color:var(--gold);background:rgba(212,175,55,.08)}
.nav-drop{position:absolute;top:100%;left:0;margin-top:8px;min-width:170px;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:10px;padding:8px;display:none;flex-direction:column;gap:2px;z-index:60;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.nav-drop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.nav-group:hover .nav-drop,.nav-group:focus-within .nav-drop,.nav-group.open .nav-drop{display:flex}
.nav-drop a{color:var(--paper);text-decoration:none;padding:9px 12px;border-radius:8px;font-size:14px;transition:background .12s,color .12s}
.nav-drop a:hover{background:var(--ink-line);color:var(--gold)}
.nav-home{margin-left:6px;color:var(--paper);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:8px}
.nav-home:hover{color:var(--gold);background:rgba(212,175,55,.08)}
.nav-toggle{display:none;background:none;border:1px solid var(--ink-line);color:var(--gold);font-size:20px;line-height:1;cursor:pointer;border-radius:8px;padding:6px 12px}
@media (max-width:820px){
  .site-header{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
  .brand{order:1}
  .nav-toggle{display:inline-flex;order:2}
  .nav{display:none;order:3;width:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--ink-soft);border:1px solid var(--ink-line);border-radius:12px;padding:8px;margin-top:8px}
  .nav.open{display:flex}
  .nav-group{position:static}
  .nav-label{display:block;width:100%;text-align:left;padding:12px 10px;border-bottom:1px solid var(--ink-line);border-radius:0}
  .nav-drop{position:static;display:flex;box-shadow:none;border:none;background:transparent;padding:4px 0 8px 10px;border-bottom:1px solid var(--ink-line);border-radius:0}
  .nav-home{display:block;padding:12px 10px;margin-left:0}
}
@media (max-width:440px){
  .poem-col-grid{grid-template-columns:1fr}
}