/* ===========================================================
   国学工具站 · 主样式
   风格：宣纸底 · 墨字 · 朱砂 · 描金
   纯手写 CSS，零外部依赖（服务器 1.6G 内存，不跑 Node 构建）
   =========================================================== */

:root{
  /* 宣纸与墨 */
  --paper:      #f6f1e7;
  --paper-2:    #fffdf7;
  --paper-3:    #efe8d8;
  --ink:        #1f1c18;
  --ink-2:      #45403a;
  --ink-3:      #857c6d;
  --ink-4:      #b3a893;

  /* 朱砂 / 描金 / 青绿 */
  --cinnabar:   #9b2226;
  --cinnabar-l: #b8373a;
  --cinnabar-bg:#fdf3f2;
  --gold:       #b58a2b;
  --gold-l:     #d9b356;
  --gold-bg:    #fdf8ec;
  --jade:       #2c6e5b;

  --line:       #e2d9c6;
  --line-2:     #d0c4ab;

  --shadow-s: 0 1px 2px rgba(70,55,25,.06);
  --shadow-m: 0 2px 4px rgba(70,55,25,.06), 0 10px 28px rgba(70,55,25,.07);
  --shadow-l: 0 4px 8px rgba(70,55,25,.08), 0 18px 48px rgba(70,55,25,.12);

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;

  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", "楷体", "Songti SC", serif;
  --font-song: "Songti SC", "STSong", "SimSun", "宋体", serif;
  --font-hei: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
              "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background-color:var(--paper);
  /* 宣纸纹理：极淡的径向与线性叠加 */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(181,138,43,.035) 0, transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(155,34,38,.028) 0, transparent 46%),
    repeating-linear-gradient(0deg, rgba(160,145,115,.022) 0 1px, transparent 1px 3px);
  color:var(--ink);
  font-family:var(--font-hei);
  font-size:15px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

a{ color:var(--cinnabar); text-decoration:none; transition:color .15s; }
a:hover{ color:var(--cinnabar-l); }

img{ max-width:100%; height:auto; display:block; }

button,input,select,textarea{ font-family:inherit; font-size:inherit; }

/* 容器 */
.gx-wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 22px; }
.gx-main{ flex:1 0 auto; }

/* ===========================================================
   头部
   =========================================================== */
.gx-header{
  position:sticky; top:0; z-index:200;
  background:rgba(255,253,247,.94);
  backdrop-filter:saturate(160%) blur(10px);
  -webkit-backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-s);
}
.gx-header-in{
  display:flex; align-items:center;
  height:78px; gap:18px;
  position:relative;
}
.gx-logo{
  display:flex; align-items:center; gap:13px; color:var(--ink);
  flex:0 0 auto;
}
.gx-logo:hover{ color:var(--ink); }

/* ===== 印章：纯 SVG 图片（文字已转路径，不依赖任何字体）===== */
.gx-seal-img{
  display:block;
  width:184px; height:52px;   /* 固定尺寸，绝不随字体变化 */
  flex:0 0 184px;
  user-select:none;
  -webkit-user-drag:none;
}
.gx-seal-img-sm{ display:none; }   /* 手机专用，桌面隐藏 */
.gx-logo-txt{ display:flex; flex-direction:column; line-height:1.2; }
.gx-logo-txt b{
  font-family:var(--font-kai); font-size:19px; letter-spacing:3px;
  font-weight:700; color:var(--ink);
}
.gx-logo-txt i{
  font-style:normal; font-size:10.5px; letter-spacing:2.5px;
  color:var(--ink-4); margin-top:2px;
}

.gx-nav{
  display:flex; align-items:center; gap:6px;
  position:absolute; left:50%; transform:translateX(-50%);
}
/* 右侧配重：让 logo 与导航之间的视觉重心回到中间 */
.gx-head-balance{
  width:151px; flex:0 0 151px;
  margin-left:auto;
}
.gx-nav a{
  position:relative;
  padding:9px 14px; font-size:14.5px; color:var(--ink-2);
  letter-spacing:.8px; border-radius:var(--r-s);
  transition:color .15s, background .15s;
}
.gx-nav a:hover{
  color:var(--cinnabar); background:var(--cinnabar-bg);
}
.gx-nav a::after{
  content:""; position:absolute; left:50%; bottom:3px;
  width:0; height:2px; background:var(--cinnabar);
  transform:translateX(-50%); transition:width .2s;
}
.gx-nav a:hover::after{ width:18px; }

.gx-burger{
  display:none; width:42px; height:42px;
  border:1px solid var(--line-2); border-radius:var(--r-s);
  background:var(--paper-2); cursor:pointer;
  padding:11px 10px; flex-direction:column; justify-content:space-between;
}
.gx-burger span{
  display:block; height:2px; background:var(--ink-2); border-radius:2px;
}

/* ===========================================================
   首页 Hero
   =========================================================== */
.gx-hero{
  position:relative;
  padding:76px 0 64px;
  text-align:center;
  background:
    radial-gradient(ellipse 900px 380px at 50% -8%, rgba(181,138,43,.13), transparent 70%),
    linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* 四角云纹装饰 */
.gx-hero::before,.gx-hero::after{
  content:""; position:absolute; width:180px; height:180px;
  border:1px solid rgba(181,138,43,.22); pointer-events:none;
}
.gx-hero::before{ top:22px; left:22px; border-right:0; border-bottom:0; border-radius:var(--r-l) 0 0 0; }
.gx-hero::after{ bottom:22px; right:22px; border-left:0; border-top:0; border-radius:0 0 var(--r-l) 0; }

.gx-hero-tag{
  display:inline-block; margin-bottom:22px;
  padding:5px 16px; font-size:12px; letter-spacing:3px;
  color:var(--gold);
  background:var(--gold-bg);
  border:1px solid rgba(181,138,43,.35);
  border-radius:100px;
}
.gx-hero h1{
  font-family:var(--font-kai);
  font-size:clamp(32px, 5.4vw, 52px);
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:20px;
  text-shadow:0 1px 0 rgba(255,255,255,.8);
}
.gx-hero h1 em{
  font-style:normal;
  color:var(--cinnabar);
  position:relative;
}
.gx-hero h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.32em;
  background:linear-gradient(90deg, rgba(181,138,43,.28), rgba(181,138,43,.10));
  z-index:-1; border-radius:2px;
}
.gx-hero p{
  font-size:16px; color:var(--ink-3); letter-spacing:2px;
  max-width:620px; margin:0 auto;
}
.gx-hero-sub{
  margin-top:14px !important;
  font-size:13.5px !important; color:var(--ink-4) !important;
  letter-spacing:2.5px !important;
}
.gx-hero-cta{
  margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}

/* ===========================================================
   通用按钮
   =========================================================== */
.gx-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:12px 30px;
  font-size:15px; letter-spacing:1.5px;
  color:#fff8ec; background:linear-gradient(150deg, var(--cinnabar), #7f1b1e);
  border:1px solid rgba(125,26,29,.9);
  border-radius:var(--r-s);
  cursor:pointer; font-family:var(--font-hei);
  box-shadow:0 2px 8px rgba(155,34,38,.24), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .12s, box-shadow .18s, filter .15s;
  white-space:nowrap;
}
.gx-btn:hover{
  filter:brightness(1.07);
  box-shadow:0 4px 14px rgba(155,34,38,.32), inset 0 1px 0 rgba(255,255,255,.18);
  color:#fff8ec;
}
.gx-btn:active{ transform:translateY(1px); }

.gx-btn-ghost{
  background:var(--paper-2); color:var(--cinnabar);
  border:1px solid rgba(155,34,38,.42);
  box-shadow:var(--shadow-s);
}
.gx-btn-ghost:hover{
  background:var(--cinnabar-bg); color:var(--cinnabar);
  border-color:var(--cinnabar);
  box-shadow:0 2px 10px rgba(155,34,38,.14);
}
.gx-btn-gold{
  background:linear-gradient(150deg, var(--gold-l), var(--gold));
  color:#2a1f08; border-color:rgba(140,105,30,.85);
  box-shadow:0 2px 8px rgba(181,138,43,.3), inset 0 1px 0 rgba(255,255,255,.35);
}
.gx-btn-sm{ padding:8px 18px; font-size:13.5px; letter-spacing:1px; }

/* ===========================================================
   区块标题
   =========================================================== */
.gx-section{ padding:62px 0; }
.gx-section-head{ margin-bottom:34px; text-align:center; }
.gx-sec-title{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--font-kai);
  font-size:clamp(23px, 3.2vw, 29px);
  font-weight:700; letter-spacing:.18em; color:var(--ink);
}
.gx-sec-title::before,.gx-sec-title::after{
  content:""; width:34px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-l));
}
.gx-sec-title::after{
  background:linear-gradient(90deg, var(--gold-l), transparent);
}
.gx-sec-desc{
  margin-top:10px; font-size:13.5px; color:var(--ink-3); letter-spacing:1.5px;
}

/* ===========================================================
   卡片
   =========================================================== */
/* 用 flex 替代 grid：国产浏览器/老 WebView 对
   grid-template-columns:repeat(auto-fill,minmax(...)) 支持不稳，
   会导致整个网格塌陷成 0 高、卡片看不见。flex 兼容性远好。 */
.gx-grid{
  display:flex; flex-wrap:wrap; gap:22px;
  align-items:stretch;
}
.gx-grid > *{
  flex:1 1 300px;
  min-width:0;
  max-width:100%;
}
.gx-grid-2 > *{ flex:1 1 260px; }

@media (max-width: 620px){
  .gx-grid{ gap:14px; }
  .gx-grid > *{ flex:1 1 100%; width:100%; }
}

.gx-card{
  position:relative;
  display:block;
  min-height:200px;            /* 兜底：任何情况下都不会塌成 0 高 */
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:28px 26px 26px;
  color:inherit;
  box-shadow:var(--shadow-s);
  transition:transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
  overflow:hidden;
}
.gx-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--cinnabar), var(--gold-l));
  opacity:0; transition:opacity .2s;
}
.gx-card:hover{
  transform:translateY(-3px);
  border-color:var(--line-2);
  box-shadow:var(--shadow-l);
  color:inherit;
}
.gx-card:hover::before{ opacity:1; }

.gx-card-ico{
  width:46px; height:46px; margin-bottom:16px;
  display:grid; place-items:center;
  border-radius:var(--r-m);
  background:var(--gold-bg);
  border:1px solid rgba(181,138,43,.3);
  font-family:var(--font-kai);
  font-size:24px; font-weight:700;
  color:var(--gold);
  line-height:1; padding-bottom:2px;
}
.gx-card h3{
  font-family:var(--font-kai);
  font-size:21px; font-weight:700; letter-spacing:2px;
  margin-bottom:9px; color:var(--ink);
}
.gx-card p{
  font-size:13.5px; color:var(--ink-3); line-height:1.85; letter-spacing:.3px;
}
.gx-tag{
  display:inline-block; margin-top:16px;
  padding:3px 11px; font-size:11.5px; letter-spacing:1.5px;
  color:var(--cinnabar);
  background:var(--cinnabar-bg);
  border:1px solid rgba(155,34,38,.22);
  border-radius:100px;
}

/* ===========================================================
   工具页通用
   =========================================================== */
.gx-tool{ padding:36px 0 72px; }
.gx-tool-head{
  margin-bottom:28px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line);
}
.gx-tool-head h1{
  font-family:var(--font-kai);
  font-size:clamp(26px, 4vw, 34px);
  font-weight:700; letter-spacing:.14em; color:var(--ink);
}
.gx-tool-head p{
  margin-top:9px; font-size:13.5px; color:var(--ink-3); letter-spacing:1px;
}

.gx-panel{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:26px;
  box-shadow:var(--shadow-s);
  margin-bottom:22px;
}
.gx-panel-tight{ padding:20px 22px; }

.gx-form{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:16px;
}
.gx-field{ display:flex; flex-direction:column; gap:7px; }
.gx-field label{
  font-size:12.5px; color:var(--ink-3); letter-spacing:1px;
}
.gx-field input,.gx-field select{
  min-width:130px;
  padding:10px 13px;
  font-size:15px; color:var(--ink);
  background:#fff;
  border:1px solid var(--line-2);
  border-radius:var(--r-s);
  transition:border-color .15s, box-shadow .15s;
}
.gx-field input:focus,.gx-field select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(181,138,43,.13);
}

.gx-note{
  font-size:12.5px; color:var(--ink-4); line-height:1.9;
  letter-spacing:.3px;
  margin-top:20px;
  padding-top:16px;
  border-top:1px dashed var(--line);
}

/* 结果区 */
.gx-result{ margin-top:22px; }
.gx-summary{
  display:flex; flex-wrap:wrap; gap:8px 22px; align-items:center;
  padding:14px 18px;
  background:linear-gradient(180deg, var(--gold-bg), var(--paper-2));
  border:1px solid rgba(181,138,43,.3);
  border-radius:var(--r-m);
  font-size:14px; color:var(--ink-2);
  margin-bottom:20px;
}
.gx-summary b{
  font-family:var(--font-kai); font-size:19px; letter-spacing:2px;
  color:var(--cinnabar); font-weight:700;
}
.gx-summary .sep{ color:var(--line-2); }

/* ===========================================================
   奇门九宫格
   =========================================================== */
.gx-palaces{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  max-width:820px;
  margin:0 auto;
}
.gx-palace{
  position:relative;
  min-height:158px;
  padding:11px 10px 10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-m);
  font-size:13px; line-height:1.7;
  transition:border-color .15s, box-shadow .15s;
}
.gx-palace:hover{
  border-color:var(--gold-l);
  box-shadow:0 2px 12px rgba(181,138,43,.15);
}
.gx-palace.is-zf{
  background:linear-gradient(180deg, #fffdf4, #fffefb);
  border-color:var(--gold);
  box-shadow:0 0 0 1px rgba(181,138,43,.3) inset;
}
.gx-palace .p-name{
  font-family:var(--font-kai);
  font-size:12px; letter-spacing:1.5px;
  color:var(--ink-4);
  padding-bottom:5px; margin-bottom:6px;
  border-bottom:1px dashed var(--line);
}
.gx-palace .p-shen{
  display:inline-block; font-size:11px; letter-spacing:.5px;
  color:#5b4a80; background:rgba(91,74,128,.08);
  padding:1px 6px; border-radius:3px; margin-bottom:4px;
}
.gx-palace .p-star{
  font-family:var(--font-kai); font-size:15px; font-weight:700;
  color:var(--cinnabar); letter-spacing:1px;
}
.gx-palace .p-door{
  font-family:var(--font-kai); font-size:15px; font-weight:700;
  color:var(--jade); letter-spacing:1px; margin-left:8px;
}
.gx-palace .p-gan{
  margin-top:5px; font-family:var(--font-song); font-size:13px;
  color:var(--ink-2); line-height:1.75;
}
.gx-palace .p-gan span{ color:var(--ink-4); font-family:var(--font-hei); font-size:11.5px; }
.gx-palace .p-tian{ color:var(--ink); font-weight:700; }
.gx-palace .p-marks{
  margin-top:5px; font-size:11px; letter-spacing:.5px;
  color:var(--cinnabar);
  background:var(--cinnabar-bg);
  border-radius:3px; padding:1px 6px; display:inline-block;
}

/* 格局列表 */
.gx-geju{ margin-top:20px; }
.gx-geju-sum{
  font-size:13.5px; color:var(--ink-2); letter-spacing:.5px; margin-bottom:10px;
}
.gx-geju-list{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.gx-geju-list li{
  padding:10px 14px;
  background:var(--paper);
  border-left:3px solid var(--line-2);
  border-radius:0 var(--r-s) var(--r-s) 0;
  font-size:13.5px; line-height:1.8;
}
.gx-geju-list li.ji{ border-left-color:var(--jade); }
.gx-geju-list li.xiong{ border-left-color:var(--cinnabar); }
.gx-geju-list li b{
  font-family:var(--font-kai); font-size:15px; letter-spacing:1px;
}
.gx-geju-list li.ji b{ color:var(--jade); }
.gx-geju-list li.xiong b{ color:var(--cinnabar); }
.gx-geju-list li .pal{
  font-size:11.5px; color:var(--ink-4); margin-left:6px;
}
.gx-geju-list li .desc{ color:var(--ink-3); }

/* ===========================================================
   八字
   =========================================================== */
.gx-pillars{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin:20px 0;
}
.gx-pillar{
  text-align:center;
  padding:18px 10px 16px;
  background:linear-gradient(180deg, #fff, var(--paper-2));
  border:1px solid var(--line);
  border-radius:var(--r-m);
  position:relative;
  transition:border-color .15s, box-shadow .15s;
}
.gx-pillar:hover{ border-color:var(--gold-l); box-shadow:0 2px 12px rgba(181,138,43,.14); }
.gx-pillar.is-day{
  border-color:var(--cinnabar);
  background:linear-gradient(180deg, var(--cinnabar-bg), #fff);
  box-shadow:0 0 0 1px rgba(155,34,38,.16) inset;
}
.gx-pillar .pl-name{
  font-size:11.5px; letter-spacing:2px; color:var(--ink-4);
  padding-bottom:8px; margin-bottom:9px;
  border-bottom:1px dashed var(--line);
}
.gx-pillar .pl-gz{
  font-family:var(--font-kai);
  font-size:30px; font-weight:700; letter-spacing:3px;
  color:var(--cinnabar); line-height:1.3;
}
.gx-pillar .pl-gz.ink{ color:var(--ink); }
.gx-pillar.is-day .pl-name{ color:var(--cinnabar); }

/* 大运 */
.gx-dayun-title{
  font-size:13.5px; color:var(--ink-2); letter-spacing:1px; margin:26px 0 12px;
  padding-left:10px; border-left:3px solid var(--gold);
}
.gx-dayun{
  display:flex; gap:10px; overflow-x:auto; padding:4px 2px 12px;
  scrollbar-width:thin;
}
.gx-dayun::-webkit-scrollbar{ height:6px; }
.gx-dayun::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:3px; }
.gx-dy{
  flex:0 0 auto;
  min-width:82px; padding:12px 10px 10px;
  text-align:center;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  transition:border-color .15s, transform .15s;
}
.gx-dy:hover{ border-color:var(--gold); transform:translateY(-2px); }
.gx-dy .dy-gz{
  font-family:var(--font-kai); font-size:20px; font-weight:700;
  letter-spacing:2px; color:var(--cinnabar);
}
.gx-dy .dy-ss{ font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.gx-dy .dy-age{ font-size:11px; color:var(--ink-4); margin-top:5px; }

/* 八字详情（引擎输出的 HTML 表格） */
.gx-detail{ margin-top:22px; }
.gx-detail table{
  width:100%; border-collapse:collapse;
  font-size:13.5px; margin:12px 0 20px;
  background:var(--paper-2);
  border-radius:var(--r-m); overflow:hidden;
  box-shadow:var(--shadow-s);
}
.gx-detail th,.gx-detail td{
  border:1px solid var(--line);
  padding:9px 8px; text-align:center;
}
.gx-detail th{
  background:var(--gold-bg);
  font-weight:normal; font-size:12.5px;
  color:var(--ink-2); letter-spacing:.5px;
}
.gx-detail h3,.gx-detail h4{
  font-family:var(--font-kai); font-weight:700;
  letter-spacing:2px; color:var(--ink);
  margin:24px 0 10px; font-size:19px;
  padding-left:10px; border-left:3px solid var(--cinnabar);
}
.gx-detail h4{ font-size:16.5px; border-left-color:var(--gold); }

/* ===========================================================
   梅花
   =========================================================== */
.gx-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.gx-tab{
  padding:9px 22px;
  font-size:14px; letter-spacing:1.5px;
  color:var(--ink-2); background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:100px; cursor:pointer;
  transition:all .15s;
}
.gx-tab:hover{ border-color:var(--cinnabar); color:var(--cinnabar); }
.gx-tab.on{
  background:linear-gradient(150deg, var(--cinnabar), #7f1b1e);
  color:#fff8ec; border-color:transparent;
  box-shadow:0 2px 10px rgba(155,34,38,.25);
}
.gx-pane{ display:none; }
.gx-pane.on{ display:block; }

.gx-gua-row{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(215px,1fr));
  gap:16px; margin-top:20px;
}
.gx-gua{
  text-align:center;
  padding:24px 18px 22px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  transition:border-color .18s, box-shadow .18s;
}
.gx-gua:hover{ box-shadow:var(--shadow-m); }
.gx-gua.is-main{
  border-color:var(--cinnabar);
  background:linear-gradient(180deg, #fffafa, var(--paper-2));
  box-shadow:0 0 0 1px rgba(155,34,38,.14) inset, var(--shadow-s);
}
.gx-gua h4{
  font-size:12px; font-weight:normal; letter-spacing:2.5px;
  color:var(--ink-4); margin-bottom:14px;
}
.gx-gua .gua-sym{
  font-size:44px; line-height:1.05; color:var(--cinnabar);
  font-family:var(--font-song); letter-spacing:2px;
}
.gx-gua .gua-name{
  font-family:var(--font-kai);
  font-size:23px; font-weight:700; letter-spacing:3px;
  margin:12px 0 6px; color:var(--ink);
}
.gx-gua .gua-sub{
  font-size:12px; color:var(--ink-3); line-height:1.9;
}
.gx-verdict{
  display:inline-block; margin-top:12px;
  padding:4px 14px; font-size:12.5px; letter-spacing:1px;
  border-radius:100px;
}
.gx-verdict.ji{ background:rgba(44,110,91,.1); color:var(--jade); border:1px solid rgba(44,110,91,.24); }
.gx-verdict.xiong{ background:var(--cinnabar-bg); color:var(--cinnabar); border:1px solid rgba(155,34,38,.24); }
.gx-verdict.ping{ background:rgba(133,124,109,.1); color:var(--ink-2); border:1px solid rgba(133,124,109,.22); }

.gx-tiyong{
  margin-top:20px; padding:18px 20px;
  background:linear-gradient(180deg, var(--gold-bg), var(--paper-2));
  border:1px solid rgba(181,138,43,.32);
  border-radius:var(--r-m);
  font-size:14px; line-height:2; color:var(--ink-2);
}
.gx-tiyong b{ color:var(--cinnabar); font-family:var(--font-kai); letter-spacing:1px; }

.gx-expl{ margin-top:22px; }
.gx-expl h4{
  font-family:var(--font-kai); font-size:18px; letter-spacing:2px;
  margin-bottom:12px; padding-left:10px; border-left:3px solid var(--cinnabar);
}
.gx-expl p{ font-size:14px; line-height:2.05; color:var(--ink-2); }

/* ===========================================================
   典籍
   =========================================================== */
.gx-books{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
}
.gx-book{
  display:block; text-align:center;
  padding:26px 18px 22px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  color:inherit;
  box-shadow:var(--shadow-s);
  transition:transform .18s, border-color .18s, box-shadow .18s;
  position:relative; overflow:hidden;
}
.gx-book::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background:linear-gradient(180deg, transparent 60%, rgba(181,138,43,.06));
  pointer-events:none;
}
.gx-book:hover{
  transform:translateY(-3px);
  border-color:var(--gold-l);
  box-shadow:var(--shadow-m);
  color:inherit;
}
.gx-book .bk-t{
  font-family:var(--font-kai); font-size:22px; font-weight:700;
  letter-spacing:4px; color:var(--ink); margin-bottom:9px;
}
.gx-book .bk-a{ font-size:12.5px; color:var(--ink-3); letter-spacing:.5px; }
.gx-book .bk-badge{
  display:inline-block; margin-top:12px;
  padding:2px 9px; font-size:11px; letter-spacing:1px;
  color:var(--ink-4);
  border:1px solid var(--line);
  border-radius:100px;
}

/* 阅读器 */
.gx-reader{
  display:grid; grid-template-columns:230px 1fr; gap:28px;
  padding:36px 0 72px;
}
.gx-toc{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:18px 14px;
  height:fit-content;
  position:sticky; top:90px;
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  box-shadow:var(--shadow-s);
}
.gx-toc h4{
  font-size:12.5px; color:var(--ink-4); letter-spacing:2px;
  padding-bottom:10px; margin-bottom:8px;
  border-bottom:1px solid var(--line);
}
.gx-toc a{
  display:block; padding:7px 10px;
  font-size:13.5px; color:var(--ink-2);
  border-radius:var(--r-s);
  transition:background .13s, color .13s;
}
.gx-toc a:hover{ background:var(--gold-bg); color:var(--cinnabar); }
.gx-toc a.on{ background:var(--cinnabar-bg); color:var(--cinnabar); }

.gx-text{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-l);
  padding:44px 48px;
  box-shadow:var(--shadow-m);
  font-family:var(--font-song);
  font-size:17.5px; line-height:2.15;
  color:var(--ink);
  white-space:pre-wrap; word-break:break-word;
}
.gx-text h2{
  font-family:var(--font-kai);
  font-size:23px; letter-spacing:3px;
  margin-bottom:22px; padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.gx-book-meta{
  margin-top:20px; padding-top:14px;
  font-size:12.5px; color:var(--ink-4);
  border-top:1px dashed var(--line);
}

/* ===========================================================
   术语
   =========================================================== */
.gx-search{
  display:flex; gap:10px; margin-bottom:26px; max-width:620px;
}
.gx-search input{
  flex:1; padding:12px 16px;
  font-size:15px; color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-s);
  transition:border-color .15s, box-shadow .15s;
}
.gx-search input:focus{
  outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(181,138,43,.13);
}

.gx-terms{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(255px,1fr));
}
.gx-term{
  padding:20px 20px 18px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  box-shadow:var(--shadow-s);
  transition:border-color .16s, transform .16s, box-shadow .16s;
}
.gx-term:hover{
  border-color:var(--gold-l);
  transform:translateY(-2px);
  box-shadow:var(--shadow-m);
}
.gx-term h3{
  font-family:var(--font-kai); font-size:19px; font-weight:700;
  letter-spacing:2px; margin-bottom:8px;
}
.gx-term h3 a{ color:var(--ink); }
.gx-term h3 a:hover{ color:var(--cinnabar); }
.gx-term p{ font-size:13px; color:var(--ink-3); line-height:1.85; }
.gx-term .t-cat{
  display:inline-block; margin-top:11px;
  font-size:11px; letter-spacing:1px;
  color:var(--gold);
  background:var(--gold-bg);
  padding:2px 9px; border-radius:100px;
  border:1px solid rgba(181,138,43,.24);
}

/* ===========================================================
   页脚
   =========================================================== */
.gx-footer{
  flex-shrink:0;
  margin-top:76px;
  background:linear-gradient(180deg, var(--paper-3), #e7dfcc);
  border-top:1px solid var(--line-2);
  padding:44px 0 32px;
}
.gx-foot-grid{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:32px; flex-wrap:wrap;
  padding-bottom:24px; margin-bottom:24px;
  border-bottom:1px solid rgba(160,145,115,.24);
}
.gx-foot-brand{
  font-family:var(--font-kai); font-size:22px; font-weight:700;
  letter-spacing:5px; color:var(--ink);
}
.gx-foot-slogan{
  margin-top:7px; font-size:12.5px; color:var(--ink-3); letter-spacing:3px;
}
.gx-foot-links{ display:flex; gap:20px; flex-wrap:wrap; }
.gx-foot-links a{
  font-size:13.5px; color:var(--ink-2); letter-spacing:.8px;
}
.gx-foot-links a:hover{ color:var(--cinnabar); }
.gx-disclaimer{
  font-size:12px; color:var(--ink-3); line-height:1.95;
  max-width:760px; letter-spacing:.2px;
}
.gx-copy{
  margin-top:14px; font-size:11.5px; color:var(--ink-4); letter-spacing:1px;
}

/* ===========================================================
   响应式
   =========================================================== */
@media (max-width: 860px){
  .gx-wrap{ padding:0 16px; }
  .gx-header-in{ height:64px; }
  .gx-burger{ display:flex; margin-left:auto; }
  .gx-head-balance{ display:none; }
  .gx-seal-img{ display:none !important; }
  .gx-seal-img-sm{ display:block !important; width:140px !important; height:36px !important; flex:0 0 140px !important; }
  .gx-logo-txt b{ font-size:16px; letter-spacing:2px; }
  .gx-logo-txt i{ display:block; font-size:9px; letter-spacing:1px; margin-top:1px; }
  .gx-nav{
    position:absolute; top:100%; left:0; right:0; transform:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper-2);
    border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-m);
    padding:8px 12px 14px;
    display:none;
  }
  .gx-nav.open{ display:flex; }
  .gx-nav a{
    padding:13px 14px; font-size:15px;
    border-bottom:1px solid var(--line);
    border-radius:0;
  }
  .gx-nav a:last-child{ border-bottom:0; }
  .gx-nav a::after{ display:none; }

  .gx-hero{ padding:52px 0 44px; }
  .gx-hero::before,.gx-hero::after{ width:110px; height:110px; }
  .gx-section{ padding:44px 0; }
  .gx-tool{ padding:26px 0 52px; }
  .gx-panel{ padding:20px 18px; }

  .gx-reader{ grid-template-columns:1fr; gap:20px; }
  .gx-toc{ position:static; max-height:220px; }
  .gx-text{ padding:26px 22px; font-size:16.5px; line-height:2.05; }

  .gx-login-hint{ display:none; }
}

@media (max-width: 620px){
  html{ font-size:15px; }
  .gx-pillars{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .gx-pillar .pl-gz{ font-size:26px; letter-spacing:2px; }
  .gx-gua-row{ grid-template-columns:1fr; }
  .gx-palaces{ gap:4px; }
  .gx-palace{ min-height:0; padding:7px 6px 8px; font-size:12px; line-height:1.55; }
  .gx-palace .p-name{ font-size:10.5px; padding-bottom:3px; margin-bottom:4px; letter-spacing:.5px; }
  .gx-palace .p-shen{ font-size:9.5px; padding:0 4px; margin-bottom:3px; letter-spacing:0; }
  .gx-palace .p-star,.gx-palace .p-door{ font-size:12.5px; letter-spacing:0; }
  .gx-palace .p-door{ margin-left:4px; }
  .gx-palace .p-gan{ font-size:12px; margin-top:3px; line-height:1.5; }
  .gx-palace .p-gan span{ font-size:9px; }
  .gx-palace .p-marks{ font-size:9.5px; padding:1px 4px; margin-top:4px; letter-spacing:0; }
  .gx-summary{ font-size:13px; padding:12px 14px; gap:6px 14px; }
  .gx-summary b{ font-size:17px; }
  .gx-btn{ padding:11px 22px; font-size:14.5px; }
  .gx-foot-grid{ flex-direction:column; gap:20px; }
  .gx-foot-links{ gap:14px; }
  .gx-logo-txt{ display:flex; flex-direction:column; }
  .gx-logo-txt b{ font-size:15px; letter-spacing:1.5px; }
  .gx-logo-txt i{ display:block !important; font-size:8.5px; letter-spacing:0.5px; }
  .gx-logo{ gap:9px; }
}

/* ===== 手机端九宫格放大版：整屏竖排，每宫信息重排 ===== */
@media (max-width: 620px){
  .gx-palaces{
    display:flex; flex-direction:column; gap:8px;
    max-width:none;
  }
  .gx-palace{
    display:grid;
    grid-template-columns:64px 1fr;
    grid-template-areas:
      "name shen"
      "star gan-t"
      "door gan-d"
      "marks marks";
    gap:2px 10px;
    align-items:center;
    padding:10px 12px;
    min-height:0;
    font-size:13px;
    line-height:1.6;
  }
  .gx-palace .p-name{
    grid-area:name;
    font-size:13px; letter-spacing:1px;
    color:var(--ink-2);
    border-bottom:0; padding-bottom:0; margin-bottom:0;
    writing-mode:horizontal-tb;
    font-weight:700;
  }
  .gx-palace .p-shen{
    grid-area:shen; justify-self:start;
    font-size:11px; padding:1px 7px; margin-bottom:0;
  }
  .gx-palace .p-star{
    grid-area:star; grid-column:2;
    font-size:16px; letter-spacing:1px;
  }
  .gx-palace .p-star::after{ content:" · "; color:var(--line-2); }
  .gx-palace .p-door{
    grid-area:door; grid-column:2; margin-left:0;
    font-size:16px; letter-spacing:1px;
  }
  /* 天盘地盘改成一行的两段 */
  .gx-palace .p-gan{
    font-size:13.5px; margin-top:0;
    grid-column:2;
  }
  .gx-palace .p-gan:nth-of-type(1){ grid-row:3; }
  .gx-palace .p-gan:nth-of-type(2){ grid-row:4; }
  .gx-palace .p-marks{
    grid-area:marks; grid-column:1 / -1;
    margin-top:6px; font-size:10.5px; padding:2px 8px;
  }
}

/* 打印 */
@media print{
  .gx-header,.gx-footer,.gx-btn,.gx-burger{ display:none !important; }
  body{ background:#fff; }
  .gx-panel,.gx-card,.gx-text{ box-shadow:none; border-color:#ccc; }
}