/* ===================== 布局样式：Header、容器、面板、按钮、Footer ===================== */

/* Header */
header { position:relative; z-index:1; text-align:center; padding:50px 20px 20px; }
header::before { content:''; position:absolute; top:20px; left:50%; transform:translateX(-50%); width:2px; height:30px; background:linear-gradient(to bottom,transparent,var(--vermillion)); }
.title-main { font-family:'Ma Shan Zheng',cursive; font-size:3rem; color:var(--ink); letter-spacing:0.3em; margin-bottom:8px; position:relative; display:inline-block; }
.title-main::after { content:'易'; position:absolute; right:-50px; top:50%; transform:translateY(-50%) rotate(15deg); font-size:4rem; color:var(--vermillion); opacity:0.08; font-family:'Ma Shan Zheng',cursive; }
.title-sub { font-family:'ZCOOL XiaoWei',serif; font-size:1rem; color:var(--gold); letter-spacing:0.5em; margin-bottom:12px; }
.title-desc { font-size:0.8rem; color:var(--ink-soft); max-width:520px; margin:0 auto; line-height:1.8; opacity:0.65; }
.bagua-deco { display:flex; justify-content:center; gap:18px; margin:16px 0; font-size:1.6rem; opacity:0.25; }
.bagua-deco span { animation:floatB 4s ease-in-out infinite; }
.bagua-deco span:nth-child(2){animation-delay:.5s} .bagua-deco span:nth-child(3){animation-delay:1s} .bagua-deco span:nth-child(4){animation-delay:1.5s} .bagua-deco span:nth-child(5){animation-delay:2s} .bagua-deco span:nth-child(6){animation-delay:2.5s} .bagua-deco span:nth-child(7){animation-delay:3s} .bagua-deco span:nth-child(8){animation-delay:3.5s}
@keyframes floatB { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.container { position:relative; z-index:1; max-width:1100px; margin:0 auto; padding:0 20px 60px; }

/* Panels */
.panel { background:rgba(255,255,255,0.4); border:1px solid var(--border); border-radius:4px; padding:26px; margin-bottom:24px; position:relative; backdrop-filter:blur(3px); }
.panel::before { content:''; position:absolute; top:10px; left:10px; right:10px; bottom:10px; border:1px solid rgba(154,123,31,0.1); border-radius:2px; pointer-events:none; }
.panel-title { font-family:'ZCOOL XiaoWei',serif; font-size:1.2rem; color:var(--ink); margin-bottom:16px; display:flex; align-items:center; gap:8px; position:relative; z-index:1; }
.panel-title::before { content:''; width:4px; height:20px; background:var(--vermillion); border-radius:2px; }
.panel-title .num { font-size:0.75rem; color:var(--gold); margin-left:auto; font-family:'Noto Serif SC'; letter-spacing:0.1em; }

/* Question input */
#questionInput { width:100%; padding:14px 18px; font-family:'Noto Serif SC',serif; font-size:1rem; background:rgba(255,255,255,0.5); border:1px solid var(--border); border-radius:3px; color:var(--ink); outline:none; transition:all 0.3s; }
#questionInput:focus { border-color:var(--vermillion); background:rgba(255,255,255,0.7); box-shadow:0 0 0 3px rgba(178,34,34,0.08); }
.q-tags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.q-tag { padding:5px 14px; background:rgba(154,123,31,0.08); border:1px solid var(--border); border-radius:20px; font-size:0.8rem; color:var(--ink-soft); cursor:pointer; transition:all 0.2s; font-family:'ZCOOL XiaoWei',serif; }
.q-tag:hover { background:rgba(178,34,34,0.1); border-color:var(--vermillion); color:var(--vermillion); }

/* Divination area */
.divination-area { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:24px; }
@media(max-width:768px){ .divination-area{grid-template-columns:1fr} }
.section-title { font-family:'ZCOOL XiaoWei',serif; font-size:1.2rem; color:var(--ink); margin-bottom:16px; text-align:center; position:relative; z-index:1; }
.section-title::after { content:''; display:block; width:40px; height:2px; background:var(--vermillion); margin:8px auto 0; }

/* Buttons */
.btn-divine { font-family:'ZCOOL XiaoWei',serif; font-size:1.1rem; padding:12px 44px; background:var(--ink); color:var(--paper); border:none; border-radius:3px; cursor:pointer; letter-spacing:0.3em; transition:all 0.3s; position:relative; z-index:1; overflow:hidden; }
.btn-divine::before { content:''; position:absolute; inset:0; background:var(--vermillion); transform:translateY(100%); transition:transform 0.3s; }
.btn-divine span{position:relative;z-index:1}
.btn-divine:hover::before{transform:translateY(0)} .btn-divine:hover{box-shadow:0 6px 20px rgba(178,34,34,0.3)} .btn-divine:disabled{opacity:0.4;cursor:not-allowed} .btn-divine:disabled:hover::before{transform:translateY(100%)}
.btn-reset { font-family:'ZCOOL XiaoWei',serif; font-size:0.85rem; padding:10px 26px; background:transparent; color:var(--ink-soft); border:1px solid var(--border); border-radius:3px; cursor:pointer; letter-spacing:0.2em; transition:all 0.3s; margin-left:10px; position:relative; z-index:1; }
.btn-reset:hover{border-color:var(--vermillion);color:var(--vermillion)}

/* Progress */
.yao-progress { display:flex; justify-content:center; gap:8px; margin-top:16px; position:relative; z-index:1; }
.yao-dot { width:26px; height:26px; border-radius:50%; border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:0.65rem; color:var(--ink-soft); font-family:'ZCOOL XiaoWei',serif; transition:all 0.3s; }
.yao-dot.filled-yang{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.yao-dot.filled-yin{background:var(--paper-dark);border-color:var(--ink-soft);color:var(--ink)}
.yao-dot.changing{animation:pulseG 1.5s infinite}
@keyframes pulseG{0%,100%{box-shadow:0 0 0 0 rgba(178,34,34,0.4)}50%{box-shadow:0 0 0 8px rgba(178,34,34,0)}}

/* Date info bar */
.date-bar{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:10px;background:rgba(154,123,31,0.05);border-radius:3px;margin-bottom:16px;font-size:0.8rem;color:var(--ink-soft);font-family:'ZCOOL XiaoWei',serif}
.date-bar span b{color:var(--vermillion)}

/* Action bar (save + countdown) */
.action-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:16px;margin-top:8px;background:rgba(154,123,31,0.05);border-radius:4px;border:1px solid var(--border)}
.btn-save,.btn-history,.btn-export-report{padding:8px 18px;font-family:'ZCOOL XiaoWei',serif;font-size:0.88rem;border:none;border-radius:3px;cursor:pointer;letter-spacing:0.1em;transition:all 0.2s;white-space:nowrap}
.btn-save{background:var(--jade);color:var(--paper)}
.btn-save:hover{background:#3a6b48;transform:translateY(-1px)}
.btn-export-report{background:var(--ink-soft);color:var(--paper)}
.btn-export-report:hover{background:var(--ink);transform:translateY(-1px)}
.btn-history{background:var(--gold);color:var(--paper)}
.btn-history:hover{background:#b8901f;transform:translateY(-1px)}

footer{text-align:center;padding:24px 20px;font-size:0.78rem;color:var(--ink-soft);opacity:0.35;position:relative;z-index:1;font-family:'ZCOOL XiaoWei',serif;letter-spacing:0.2em}
footer p{margin:4px 0}

@media(max-width:600px){
  .title-main{font-size:2.4rem}
  .interp-body{padding-left:0}
  .pan-chart table{font-size:0.78rem}
}