/* ===== 卦轨术 H5 · 古典 × 现代 响应式样式 ===== */
:root{
  --bg:#f4ede1;
  --paper:#fbf6ec;
  --ink:#2c241b;
  --ink2:#5a4a38;
  --line:#d8c9ae;
  --accent:#8a2e1e;   /* 朱砂 */
  --accent2:#b8860b;  /* 金 */
  --jade:#3f6b5b;
  --shadow:0 4px 18px rgba(90,60,30,.12);
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:16px;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Songti SC",serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  padding-top:56px;
  padding-bottom:env(safe-area-inset-bottom);
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit;}
input,select{font-family:inherit;}

/* 宣纸纹理背景 */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; opacity:.35; pointer-events:none;
  background:
    radial-gradient(circle at 20% 10%, #fff8ec 0, transparent 40%),
    radial-gradient(circle at 80% 90%, #f0e2cc 0, transparent 45%);
}

/* ===== 顶部栏 ===== */
.appbar{
  position:fixed; top:0; left:0; right:0; height:56px; z-index:40;
  background:linear-gradient(135deg,#7a2418,#8a2e1e);
  color:#fbf6ec; display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.brand{display:flex; align-items:center; gap:10px;}
.logo{
  width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.15);
  display:grid; place-items:center; font-size:20px;
}
.titles h1{font-size:18px; letter-spacing:2px; font-weight:700;}
.titles .sub{font-size:10px; opacity:.85; letter-spacing:1px;}
.menu-btn{font-size:22px; width:40px; height:40px; border-radius:8px; color:#fff;}
.menu-btn:hover{background:rgba(255,255,255,.15);}

/* ===== 抽屉导航 ===== */
.drawer{
  position:fixed; top:56px; left:0; bottom:0; width:250px; z-index:45;
  background:var(--paper); border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .28s ease;
  display:flex; flex-direction:column;
  box-shadow:var(--shadow);
}
.drawer.open{transform:translateX(0);}
.drawer-head{
  padding:16px 18px 12px; font-size:15px; font-weight:700; color:var(--accent);
  border-bottom:2px solid var(--accent); letter-spacing:2px;
}
.nav-list{list-style:none; flex:1; overflow-y:auto; padding:8px 0;}
.nav-item{
  display:block; padding:13px 20px; font-size:14px; color:var(--ink2);
  border-left:4px solid transparent; transition:.2s;
}
.nav-item:hover,.nav-item.active{
  background:#f0e4ce; color:var(--accent); border-left-color:var(--accent);
  font-weight:600;
}
.drawer-foot{
  padding:14px; font-size:11px; color:#9a8a70; text-align:center;
  border-top:1px solid var(--line);
}
.scrim{
  position:fixed; inset:0; top:56px; background:rgba(0,0,0,.35); z-index:42;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.scrim.show{opacity:1; pointer-events:auto;}

/* ===== 主内容 ===== */
main{padding:16px; max-width:960px; margin:0 auto;}
.page{padding-bottom:40px;}
.page.hidden{display:none;}
.page-head{margin-bottom:14px;}
.page-head h2{font-size:22px; color:var(--accent); letter-spacing:1px;}
.muted{color:var(--ink2);}
.small{font-size:12px;}
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:16px; box-shadow:var(--shadow);
}
.card h3{font-size:16px; color:var(--accent); margin-bottom:10px; letter-spacing:1px;}

/* Hero */
.hero{
  text-align:center; padding:36px 20px 30px; margin-bottom:18px;
  background:radial-gradient(circle at center, #fdf8ef, #f0e2c8);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-gua{font-size:26px; letter-spacing:6px; color:var(--accent); margin-bottom:14px;}
.hero h2{font-size:20px; line-height:1.6; color:var(--ink); margin-bottom:12px;}
.hero-desc{color:var(--ink2); font-size:13px; margin-bottom:20px;}
.hero-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* 按钮 */
.btn{
  display:inline-block; padding:11px 22px; border-radius:9px; font-size:14px;
  font-weight:600; transition:.2s; letter-spacing:1px;
}
.btn.primary{background:var(--accent); color:#fff; box-shadow:0 3px 10px rgba(138,46,30,.3);}
.btn.primary:hover{background:#6f2416;}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent);}
.btn.block{display:block; width:100%; margin-top:6px;}

/* 三才卡 */
.core-triad{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px;}
.triad-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 10px; text-align:center; box-shadow:var(--shadow);
}
.triad-glyph{font-size:34px; color:var(--accent); margin-bottom:6px; font-weight:700;}
.triad-card h3{font-size:18px; color:var(--accent); margin-bottom:6px;}
.triad-card p{font-size:11px; color:var(--ink2); line-height:1.5;}

.rule-list{list-style:none; padding:0;}
.rule-list li{
  padding:10px 0; border-bottom:1px dashed var(--line); font-size:13px; color:var(--ink);
}
.rule-list li:last-child{border-bottom:none;}
.rule-list b{color:var(--accent);}

.limit-bars{display:flex; gap:8px;}
.limit-bar{
  flex:1; text-align:center; padding:14px 6px; border-radius:10px; color:#fff; font-size:12px;
}
.limit-bar span{display:block; font-size:16px; font-weight:700; margin-bottom:4px;}
.limit-bar.chu{background:linear-gradient(135deg,#3f6b5b,#4e8a72);}
.limit-bar.zhong{background:linear-gradient(135deg,#b8860b,#d4a017);}
.limit-bar.mo{background:linear-gradient(135deg,#8a2e1e,#b03a26);}

.notice{
  background:#fdf6e3; border:1px solid var(--accent2); border-radius:var(--radius);
  padding:14px 16px; font-size:12px; color:var(--ink2); line-height:1.7;
}

/* 八卦轨数卡牌 */
.bagua-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px;}
.bagua-card{
  border-radius:var(--radius); padding:16px; color:#fff; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s; position:relative; overflow:hidden;
}
.bagua-card:active{transform:scale(.97);}
.bagua-card .bg{font-size:64px; position:absolute; right:-6px; bottom:-14px; opacity:.18; font-weight:700;}
.bagua-card h3{font-size:22px; margin-bottom:2px;}
.bagua-card .gui{font-size:13px; opacity:.95;}
.bagua-card .meta{font-size:11px; margin-top:8px; opacity:.9;}
.bagua-card .tags{margin-top:8px; display:flex; gap:6px; flex-wrap:wrap;}
.bagua-card .tag{font-size:10px; background:rgba(255,255,255,.22); padding:2px 8px; border-radius:10px;}

/* 类象 */
.search-box{margin-bottom:14px;}
.search-box input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font-size:14px; margin-bottom:10px; color:var(--ink);
}
.seg{display:flex; gap:8px; flex-wrap:wrap;}
.seg-btn{
  padding:8px 16px; border:1px solid var(--line); border-radius:20px; font-size:13px;
  background:var(--paper); color:var(--ink2); transition:.2s;
}
.seg-btn.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.lei-list{display:flex; flex-direction:column; gap:10px;}
.lei-item{
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:13px 16px;
  display:flex; align-items:center; gap:12px; box-shadow:var(--shadow);
}
.lei-badge{
  flex-shrink:0; width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-size:18px; font-weight:700;
}
.lei-info{flex:1;}
.lei-info .nm{font-size:14px; font-weight:600;}
.lei-info .kw{font-size:11px; color:var(--ink2);}
.lei-tag{flex-shrink:0; font-size:11px; padding:3px 10px; border-radius:12px; font-weight:600;}
.lei-tag.dong{background:#fde8e6; color:var(--accent);}
.lei-tag.jing{background:#e6f2ec; color:var(--jade);}

/* 表单控件 */
.field-label{display:block; font-size:12px; color:var(--ink2); margin:14px 0 8px; font-weight:600;}
.select,.text-input{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px;
  background:var(--paper); font-size:14px; color:var(--ink); margin-bottom:4px;
}
.text-input{margin-bottom:4px;}

/* 取轨结果 */
.result-head{
  display:flex; align-items:center; gap:14px; margin-bottom:16px;
}
.result-glyph{font-size:44px; color:#fff; width:70px; height:70px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;}
.result-title h3{font-size:18px; color:var(--accent);}
.result-title p{font-size:12px; color:var(--ink2);}
.result-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;}
.result-stat{
  text-align:center; padding:12px 6px; background:#f8f0e0; border-radius:10px; border:1px solid var(--line);
}
.result-stat .lb{font-size:11px; color:var(--ink2);}
.result-stat .vl{font-size:20px; font-weight:700; color:var(--accent); margin-top:2px;}
.result-section{margin-bottom:14px;}
.result-section h4{font-size:13px; color:var(--accent); margin-bottom:6px; letter-spacing:1px;}
.result-section p{font-size:13px; color:var(--ink); line-height:1.8;}
.limit-visual{display:flex; gap:6px; margin-top:8px;}
.limit-dot{flex:1; text-align:center; padding:8px 2px; border-radius:8px; font-size:11px; background:#eee; color:#999;}
.limit-dot.on{font-weight:700; color:#fff;}
.limit-dot.on.chu{background:#3f6b5b;}
.limit-dot.on.zhong{background:#b8860b;}
.limit-dot.on.mo{background:#8a2e1e;}

/* 轨限推演 */
.num-input{display:flex; align-items:center; gap:0; margin-bottom:4px;}
.num-btn{
  width:48px; height:48px; background:var(--accent); color:#fff; font-size:26px; border-radius:10px 0 0 10px;
}
.num-btn:last-child{border-radius:0 10px 10px 0;}
.num-input input{
  width:80px; height:48px; text-align:center; border:1px solid var(--line); font-size:22px; font-weight:700;
  color:var(--accent); background:var(--paper); border-left:none; border-right:none;
}

/* 生克 */
.sk-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.sk-row .select{flex:1; margin:0;}
.sk-arrow{font-size:28px; color:var(--accent); font-weight:700;}

/* 案例 */
.case-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.case-tab{
  padding:8px 16px; border:1px solid var(--line); border-radius:20px; font-size:13px;
  background:var(--paper); color:var(--ink2);
}
.case-tab.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.case-item{
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px;
  box-shadow:var(--shadow); cursor:pointer; transition:transform .15s;
}
.case-item:active{transform:scale(.99);}
.case-item h4{font-size:15px; color:var(--accent); margin-bottom:6px;}
.case-item .src{font-size:11px; color:var(--accent2); margin-bottom:8px;}
.case-item p{font-size:12px; color:var(--ink2); line-height:1.6;}

/* 进阶路径 */
.path-block{margin-bottom:22px;}
.path-block h3{font-size:16px; color:var(--accent); margin-bottom:12px; padding-left:10px; border-left:4px solid var(--accent);}
.basis-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px;}
.basis-card{
  background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px; font-size:13px;
  font-weight:600; text-align:center; box-shadow:var(--shadow);
}
.basis-card small{display:block; font-weight:400; font-size:11px; color:var(--ink2); margin-top:4px;}
.core-list{padding-left:20px;}
.core-list li{padding:8px 0; font-size:13px; border-bottom:1px dashed var(--line);}
.core-list li:last-child{border-bottom:none;}
.stages{display:flex; flex-direction:column; gap:12px;}
.stage-card{
  border:1px solid var(--line); border-radius:12px; padding:16px; background:var(--paper); box-shadow:var(--shadow);
}
.stage-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.stage-head h4{font-size:15px; color:var(--accent);}
.stage-check{
  width:28px; height:28px; border-radius:50%; border:2px solid var(--line); display:grid; place-items:center;
  font-size:14px; color:var(--accent); cursor:pointer; background:var(--paper); transition:.2s;
}
.stage-check.done{background:var(--jade); border-color:var(--jade); color:#fff;}
.stage-card p{font-size:12px; color:var(--ink2); line-height:1.6;}

/* 底部 */
.footer{text-align:center; padding:20px 16px 30px; font-size:11px; color:#9a8a70; line-height:1.8;}

.hidden{display:none !important;}

/* ===== 响应式：PC ===== */
@media (min-width:820px){
  body{padding-top:0; padding-left:250px;}
  .appbar{left:250px;}
  .menu-btn{display:none;}
  .drawer{transform:translateX(0); top:0; box-shadow:2px 0 12px rgba(0,0,0,.06);}
  .scrim{display:none !important;}
  main{padding:28px 36px;}
  .hero h2{font-size:26px;}
  .bagua-grid{grid-template-columns:repeat(4,1fr);}
  .basis-grid{grid-template-columns:repeat(3,1fr);}
  .core-triad{grid-template-columns:repeat(3,1fr);}
}