:root{
  --ink:#3a2412; --gold:#c9a45c; --gold2:#a8842f; --red:#b1271b;
  --paper:#f3e7cf; --paper2:#e8d7b3; --line:#2c1d10;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:"STKaiti","KaiTi","Kaiti SC","FangSong","STFangsong",serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 18%, rgba(255,248,230,.55), transparent 55%),
    repeating-linear-gradient(0deg, rgba(120,80,30,.035) 0 2px, transparent 2px 6px),
    linear-gradient(160deg,#e9d8b6 0%, #ddc59a 45%, #cdb182 100%);
  min-height:100%;
  overflow-x:hidden;
}
.frame{
  position:relative; min-height:100vh;
  padding:26px 16px 60px;
  display:flex; flex-direction:column; align-items:center;
}
/* decorative corner brackets */
.frame::before,.frame::after{
  content:""; position:fixed; width:54px; height:54px; pointer-events:none;
  border:3px solid var(--gold2); opacity:.7;
}
.frame::before{top:14px; left:14px; border-right:none; border-bottom:none;}
.frame::after{bottom:14px; right:14px; border-left:none; border-top:none;}

.topbar{width:100%; max-width:960px; display:flex; justify-content:space-between; align-items:flex-start;}
.seal{
  font-size:15px; letter-spacing:6px; color:#fff; background:var(--red);
  padding:8px 12px; border-radius:6px; writing-mode:vertical-rl;
  box-shadow:0 2px 8px rgba(0,0,0,.25); font-weight:bold; line-height:1.4;
}
.toggle-btn{
  font-family:inherit; cursor:pointer; font-size:16px; color:var(--paper);
  background:linear-gradient(180deg,#7a1c14,#a3261b); border:1px solid var(--gold);
  padding:10px 16px; border-radius:8px; letter-spacing:2px;
  box-shadow:0 3px 10px rgba(0,0,0,.3); transition:.2s;
}
.toggle-btn:hover{filter:brightness(1.12); transform:translateY(-1px);}
.mode-select{
  font-family:inherit; cursor:pointer; font-size:16px; color:var(--paper);
  background:linear-gradient(180deg,#7a1c14,#a3261b); border:1px solid var(--gold);
  width:96px; padding:9px 12px; border-radius:8px; letter-spacing:1px; text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.3); transition:.2s; -webkit-appearance:none; appearance:none;
  outline:none;
}
.mode-select:hover{filter:brightness(1.12); transform:translateY(-1px);}
.mode-select:focus,.mode-select:focus-visible{outline:none; border-color:var(--gold);}
.mode-select option{background:#f3e7cf; color:var(--ink); font-size:15px; text-align:left;}

.title{margin:14px 0 4px; font-size:30px; letter-spacing:10px; color:var(--gold2); text-shadow:0 1px 0 #fff5;}
.subtitle{font-size:14px; letter-spacing:4px; color:#7a5a2a; margin-bottom:18px;}

.clock-card{
  text-align:center; padding:22px 30px 18px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,250,238,.65), rgba(243,231,207,.5));
  border:1px solid var(--gold); box-shadow:0 6px 22px rgba(80,50,20,.18), inset 0 0 0 4px rgba(201,164,92,.18);
  margin-bottom:8px;
}
.date-line{font-size:34px; letter-spacing:6px; color:var(--ink); font-weight:bold;}
.week-line{font-size:15px; color:#7a5a2a; letter-spacing:3px; margin-top:2px;}
.time-line{font-size:46px; letter-spacing:4px; color:var(--red); font-family:"STSong","SimSun",serif; font-weight:bold; margin-top:4px; text-shadow:0 1px 0 #fff6;}
.lunar-line{font-size:16px; letter-spacing:2px; color:#5a3d1a; margin-top:8px;}

/* four pillars */
.bazi{display:flex; gap:14px; justify-content:center; margin:18px 0 6px;}
.pillar{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 14px; border-radius:10px; min-width:64px;
  background:rgba(255,250,238,.55); border:1px solid var(--gold);
  box-shadow:0 3px 10px rgba(80,50,20,.12);
}
.pillar .lab{font-size:13px; color:#7a5a2a; letter-spacing:2px;}
.pillar .gz{font-size:30px; line-height:1.15; color:var(--ink); font-weight:bold; display:flex; flex-direction:column; align-items:center;}
.pillar .gz .gan{color:#7a1c14;}
.pillar .gz .zhi{color:#23527a;}
.shichen{font-size:15px; color:#5a3d1a; letter-spacing:3px; margin-bottom:6px;}

/* hexagram area */
.gua-area{display:flex; gap:26px; justify-content:center; align-items:flex-start; margin-top:14px; flex-wrap:wrap;}
.gua-box{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 18px 14px; border-radius:12px; cursor:pointer; transition:.2s;
  background:linear-gradient(180deg, rgba(255,250,238,.5), rgba(232,215,179,.4));
  border:1px solid var(--gold); box-shadow:0 4px 14px rgba(80,50,20,.15);
  min-width:140px;
}
.gua-box:hover{transform:translateY(-3px); box-shadow:0 8px 20px rgba(80,50,20,.25);}
.gua-box .role{font-size:14px; letter-spacing:3px; color:#7a5a2a;}
.gua-box .gname{font-size:21px; letter-spacing:2px; color:var(--ink); font-weight:bold;}
.gua-box .gsymbol{font-size:13px; color:#8a6a30; letter-spacing:4px;}
.hex{display:flex; flex-direction:column; gap:6px; width:96px; padding:6px 0;}
.yao{height:13px; display:flex; justify-content:space-between;}
.yao .bar{background:var(--line); height:100%; border-radius:2px;}
.yao.yang .bar{width:100%;}
.yao.yin .bar{width:44%;}
.yao.moving .bar{background:var(--red); box-shadow:0 0 6px rgba(177,39,27,.6);}
.gua-box .hint{font-size:12px; color:#9a7a40; letter-spacing:1px;}

.divider{width:60%; max-width:520px; height:1px; margin:24px auto 6px;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);}
.foot{font-size:12px; color:#8a6a40; letter-spacing:2px; text-align:center; margin-top:10px;}
.beian{margin-top:auto; padding-top:26px; text-align:center;}
.beian a{font-size:12px; color:#8a6a40; letter-spacing:2px; text-decoration:none; transition:.2s;}
.beian a:hover{color:var(--red);}

/* modal */
.modal-mask{
  position:fixed; inset:0; background:rgba(40,25,10,.55); backdrop-filter:blur(3px);
  display:none; align-items:center; justify-content:center; z-index:70; padding:20px;
}
.modal-mask.show{display:flex;}
.modal{
  background:linear-gradient(180deg,#fbf3df,#efe0c0); color:var(--ink);
  border:1px solid var(--gold2); border-radius:14px; max-width:680px; width:100%;
  max-height:86vh; overflow:auto; padding:26px 28px; position:relative;
  box-shadow:0 14px 50px rgba(0,0,0,.4), inset 0 0 0 5px rgba(201,164,92,.2);
}
.modal h2{font-size:26px; letter-spacing:4px; color:#7a1c14; text-align:center; margin-bottom:4px;}
.modal .symline{text-align:center; font-size:14px; color:#8a6a30; letter-spacing:3px; margin-bottom:14px;}
.modal .judge{background:rgba(201,164,92,.16); border-left:4px solid var(--gold2);
  padding:10px 14px; border-radius:6px; margin-bottom:8px; line-height:1.7; font-size:16px;}
.modal .judge .lbl{color:#7a1c14; font-weight:bold; margin-right:6px;}
.modal .bai{font-size:14px; color:#5a3d1a; line-height:1.7; margin:6px 2px 16px;}
.yao-item{padding:10px 12px; border-bottom:1px dashed rgba(140,100,40,.4); line-height:1.7;}
.yao-item .yt{font-weight:bold; color:#23527a; margin-right:8px;}
.yao-item.moving{background:rgba(177,39,27,.1); border-radius:6px;}
.yao-item.moving .yt{color:var(--red);}
.yao-item.moving::after{content:"　← 动爻"; color:var(--red); font-size:13px;}
.yao-item .xx{color:#6a4a20; font-size:13px;}
.yao-item .yb{color:#5a3d1a; font-size:13px; display:block; margin-top:2px;}
.modal .close{position:absolute; top:12px; right:16px; cursor:pointer; font-size:22px; color:#7a1c14; background:none; border:none;}

/* 数字起卦（页面内嵌） */
.num-inline{display:none; width:100%; max-width:760px; text-align:center; margin-top:6px;}
.num-inline.show{display:block; animation:fadeIn .25s ease;}
@keyframes fadeIn{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
.num-title{font-size:24px; letter-spacing:8px; color:#7a1c14; text-align:center; margin-top:4px;}
.num-tip{text-align:center; font-size:14px; color:#7a5a2a; letter-spacing:2px; line-height:1.7; margin:8px 0 18px;}
.num-inputs{display:flex; gap:26px; justify-content:center; flex-wrap:wrap;}
.num-field{display:flex; flex-direction:column; align-items:center; gap:8px;}
.num-field label{font-size:15px; color:#7a5a2a; letter-spacing:3px;}
.num-field input{width:140px; text-align:center; font-family:"STSong","SimSun",serif; font-size:30px;
  color:var(--ink); padding:8px 6px; border:1px solid var(--gold2); border-radius:8px;
  background:rgba(255,250,238,.7); letter-spacing:6px; outline:none;}
.num-field input:focus{border-color:var(--red); box-shadow:0 0 0 3px rgba(177,39,27,.15);}
.num-go{display:block; margin:22px auto 6px; font-family:inherit; cursor:pointer; font-size:19px;
  letter-spacing:6px; color:var(--paper); background:linear-gradient(180deg,#7a1c14,#a3261b);
  border:1px solid var(--gold); padding:11px 40px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.3); transition:.2s;}
.num-go:hover{filter:brightness(1.12); transform:translateY(-1px);}
.num-err{text-align:center; color:var(--red); font-size:14px; min-height:18px; letter-spacing:1px; margin-top:6px;}
.num-formula{margin:6px 0 4px;}
.num-collapse{display:block; margin:16px auto 0; cursor:pointer; font-family:inherit; font-size:14px;
  letter-spacing:3px; color:#7a5a2a; background:none; border:none;}
.num-collapse:hover{color:var(--red);}
#numResult{margin-top:10px; justify-content:center;}

/* fangyuan overlay */
.fy-mask{position:fixed; inset:0; z-index:60; display:none;
  background:
   radial-gradient(circle at 50% 40%, rgba(255,248,230,.5), transparent 60%),
   linear-gradient(160deg,#e9d8b6,#cdb182);
  overflow:auto;}
.fy-mask.show{display:block;}
.fy-head{display:flex; justify-content:space-between; align-items:center; padding:18px 22px; max-width:1000px; margin:0 auto;}
.fy-head h2{font-size:24px; letter-spacing:6px; color:var(--gold2);}
.fy-wrap{position:relative; width:min(92vw,760px); height:min(92vw,760px); margin:0 auto 40px;}
.fy-circle{position:absolute; inset:0;}
.fy-cell{position:absolute; left:50%; top:50%; width:26px; margin-left:-13px; transform-origin:13px 13px;}
.mini{display:flex; flex-direction:column; gap:2px; width:26px;}
.mini .m{height:4px; display:flex; justify-content:space-between;}
.mini .m .b{background:var(--line); height:100%; border-radius:1px;}
.mini .m.yang .b{width:100%;}
.mini .m.yin .b{width:42%;}
.mini-name{font-size:11px; text-align:center; color:#5a3d1a; margin-top:3px; white-space:nowrap; font-weight:bold;}
.fy-square{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:grid; grid-template-columns:repeat(8,1fr); gap:1px; background:var(--gold2); padding:1px;
  border:1px solid var(--gold2); border-radius:3px; box-shadow:0 6px 24px rgba(0,0,0,.3);}
.sq-cell{background:#f6ecd2; width:var(--sq); height:var(--sq); display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; padding:4px 0;}
.sq-cell .mini{width:22px; gap:1px;}
.sq-cell .mini .m{height:2px;}
.sq-cell .mini-name{font-size:13px; color:var(--ink); letter-spacing:1px; line-height:1.1;}
@media (max-width:560px){
  .date-line{font-size:26px;} .time-line{font-size:34px;}
  .gua-area{gap:14px;} .gua-box{min-width:120px;}
}

/* ===== 八字五行配色：金=金色 木=绿 土=黄 水=蓝 火=红 ===== */
.bazi .gz .wx-wood{color:#2e7d32;}
.bazi .gz .wx-fire{color:#c0271b;}
.bazi .gz .wx-earth{color:#c79a00;}
.bazi .gz .wx-water{color:#1565c0;}
.bazi .gz .wx-metal{
  color:#a8842f;
  background:linear-gradient(180deg,#e6c84f,#a8842f);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}