/* ============================================================
   梅花易数 · 公共样式
   ------------------------------------------------------------
   主题：默认跟随系统（prefers-color-scheme），可手动切换并记忆。
   三态：auto（跟随系统）/ light / dark
   ------------------------------------------------------------
   安全约定：所有渲染一律用 textContent，绝不使用 innerHTML。
   ============================================================ */

/* ---------- 暗色（默认） ---------- */
:root,
html[data-theme="dark"] {
  --bg:        #14161a;
  --panel:     #1c1f25;
  --panel-2:   #171a1f;
  --line:      #2b3038;
  --line-soft: #24282f;
  --text:      #e6e8ec;
  --dim:       #9aa3b0;
  /* 弱文字：原 #6b7480 在深底上只有 3.49:1，不达标。
     提亮到 #818993 后为 4.66:1，且仍比 --dim 暗，层级正确。 */
  --faint:     #818993;

  --accent:        #c9a227;
  --accent-ink:    #1a1408;   /* accent 底上的文字色 */
  --gold:          201, 169, 97;   /* 用于 rgba(var(--gold), .18) */
  --ink-line-a:    #cfcabd;   /* 爻线渐变：亮端 */
  --ink-line-b:    #aca698;
  --ink-line-c:    #918c80;

  --ok:   #3fb950;
  --bad:  #f85149;
  --warn: #d29922;

  --lvl-daji:  #3fb950;
  --lvl-ji:    #7fd18b;
  --lvl-ping:  #d29922;
  --lvl-xx:    #e08b5a;
  --lvl-xiong: #f85149;
  --lvl-daji-bg:  #122117;
  --lvl-ji-bg:    #122117;
  --lvl-ping-bg:  #1e1a0f;
  --lvl-xx-bg:    #1e160f;
  --lvl-xiong-bg: #1e1213;

  --metal: #c9c9d1;
  --wood:  #5fb37a;
  --water: #5b8fd6;
  --fire:  #d9634f;
  --earth: #c39a5c;

  --shadow: 0 1px 0 rgba(255,255,255,.03) inset;
  color-scheme: dark;
}

/* ---------- 亮色 ---------- */
html[data-theme="light"] {
  --bg:        #f4f1ea;   /* 微暖的宣纸白 */
  --panel:     #fffdf9;
  --panel-2:   #faf7f1;
  --line:      #e2dcd0;
  --line-soft: #ebe5da;
  --text:      #23262b;
  --dim:       #6b6f78;
  /* 弱文字：原 #969ba4 在浅底上只有 2.75:1，严重不达标。
     压到 #70747b 后为 4.62:1，达到 WCAG AA。 */
  --faint:     #70747b;

  --accent:        #8a6f27;   /* 亮色下用暗金，避免刺眼 */
  --accent-ink:    #fffdf9;
  --gold:          138, 111, 39;
  --ink-line-a:    #55505e;   /* 亮底上爻线要深才看得见 */
  --ink-line-b:    #45414e;
  --ink-line-c:    #39363f;

  --ok:   #1f7a34;
  --bad:  #b52a20;
  --warn: #8a6410;

  --lvl-daji:  #1f7a34;
  /* 原 #2f8f45 只有 4.02:1，压到 #2c8641 为 4.50:1 */
  --lvl-ji:    #2c8641;
  --lvl-ping:  #8a6410;
  --lvl-xx:    #b0602a;
  --lvl-xiong: #b52a20;
  --lvl-daji-bg:  #e8f4ea;
  --lvl-ji-bg:    #e8f4ea;
  --lvl-ping-bg:  #f6efdc;
  --lvl-xx-bg:    #f8ece2;
  --lvl-xiong-bg: #f8e8e6;

  --metal: #5d6270;
  --wood:  #2f7d47;
  --water: #2660a8;
  --fire:  #b8432f;
  --earth: #8a6428;

  --shadow: 0 1px 2px rgba(40,35,25,.05);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}

/* 背景加一层极淡的径向光晕：
   大屏纯色底会显得"空"，加一点明暗过渡就有空间感，且不干扰内容。 */
body {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(var(--gold), .045), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 26px 18px 60px; }
.wrap.wide { max-width: 900px; }
.wrap.narrow { max-width: 420px; }

/* ---------- 桌面双栏：左侧输入 + 右侧结果 ----------
   原先 .wrap 卡在 760px，1920 宽的屏上近六成是空白。

   排版要点（都是为了"一眼看过去舒服"）：
     1. 【不用 position:sticky】
        粘性会让左栏在滚动时脱开网格，主栏比它高时底部空出一截，
        两栏下缘参差 —— 眼睛立刻觉得不顺。改成自然对齐。
     2. 【两栏顶端对齐、下缘参差是正常的】
        排版上真正忌讳的是"顶端不对齐"。下缘长短不一在双栏布局里可接受，
        且主栏内容高度本来就不固定（填了外应会长出一块）。
     3. 【左栏略宽 + 右栏内容留出舒适行宽】
        360px 对中文表单太挤（「第一个数（定上卦）」这类标签容易折行）。
        改成 400px，右栏上限 720px，中文正文每行 35~40 字最舒服，
        超出部分变成两侧留白，而不是把正文拉成一条看不到尾的长线。
     4. 【间距用统一节奏】22 / 28，纵向大于横向，视觉上更稳。 */
.wrap.split {
  max-width: 1180px;
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  gap: 22px 28px;
  align-items: start;
}

/* 顶栏与页脚横跨两栏，让整页有完整的上下闭合 */
.wrap.split > .topbar { grid-column: 1 / -1; margin-bottom: 0; padding-bottom: 14px; }
.wrap.split > footer { grid-column: 1 / -1; margin-top: 4px; }

/* 结果区限制舒适行宽，避免正文在宽屏上被拉成超长行 */
.wrap.split > #out { max-width: 720px; }

/* ★ 让左栏卡片撑满整行高度 —— 这是"左短右长"的正解。
   不靠 position:sticky，而是让这一网格项拉伸（外层 align-items:start，
   单独把本项改成 stretch），两栏下缘自然齐平。
   卡片内部用 flex 纵向排列，把说明文字用 margin-top:auto 顶到底部，
   于是中间多出来的高度变成一处呼吸留白，而不是让卡片"短一截"。 */
.wrap.split > .side {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
}
.wrap.split > .side > .sideFoot { margin-top: auto; padding-top: 14px; }

@media (max-width: 1040px) {
  .wrap.split {
    max-width: 760px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .wrap.split > #out { max-width: none; }
  /* 单栏时不需要拉伸与吸底，恢复自然高度 */
  .wrap.split > .side { align-self: auto; margin-bottom: 14px; }
  .wrap.split > .side > .sideFoot { margin-top: 0; }
}

header { border-bottom: 1px solid var(--line); padding-bottom: 16px; margin-bottom: 20px; }
h1 { margin: 0 0 4px; font-size: 21px; font-weight: 600; letter-spacing: .5px; }
h1 .dot { color: var(--accent); }
.sub { color: var(--dim); font-size: 13px; }

.topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px;
}
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 12.5px; color: var(--dim); }
.topbar a { font-size: 13px; color: var(--accent); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }

/* ---------- 主题切换按钮 ---------- */
.themebtn {
  padding: 4px 11px; font-size: 12.5px; cursor: pointer; font-family: inherit;
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: 20px;
}
.themebtn:hover { color: var(--text); border-color: var(--faint); }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card h2 {
  margin: 0 0 12px; font-size: 13px; font-weight: 600;
  color: var(--dim); letter-spacing: .5px;
}

label { display: block; font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
label:first-child { margin-top: 0; }
input[type=text], input[type=password], input[type=number] {
  width: 100%; padding: 9px 11px; font-size: 14.5px;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: 7px; color: var(--text);
  font-variant-numeric: tabular-nums; font-family: inherit;
}
input:focus { outline: none; border-color: var(--accent); }
input:disabled { opacity: .55; }

button {
  padding: 9px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  border: none; border-radius: 7px; font-family: inherit;
}
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; }
button.primary { width: 100%; margin-top: 16px; padding: 11px; }
button.ghost {
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); font-weight: 500;
}
button.ghost:hover { color: var(--text); border-color: var(--faint); }
button.small { padding: 5px 11px; font-size: 12.5px; }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.tab {
  padding: 7px 15px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--dim);
  border: 1px solid var(--line); border-radius: 7px;
}
.tab.active { background: var(--panel); color: var(--text); border-color: var(--faint); }

.hint { font-size: 11.5px; color: var(--faint); margin-top: 7px; }
.hint.ok { color: var(--ok); }
.hint.bad { color: var(--bad); }

.notice { border-radius: 8px; padding: 11px 13px; font-size: 13px; margin-bottom: 14px; }
.notice.warn { background: var(--lvl-ping-bg); border: 1px solid var(--line); color: var(--lvl-ping); }
.notice.ok   { background: var(--lvl-daji-bg); border: 1px solid var(--line); color: var(--lvl-daji); }
.notice.bad  { background: var(--lvl-xiong-bg); border: 1px solid var(--line); color: var(--lvl-xiong); }
.notice b { color: inherit; }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; color: var(--dim); font-weight: 600; font-size: 12px;
  padding: 7px 8px; border-bottom: 1px solid var(--line);
}
td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }

.mono { font-family: ui-monospace, Consolas, "Courier New", monospace; font-size: 12.5px; }
.code-box {
  font-family: ui-monospace, Consolas, monospace; font-size: 15px; letter-spacing: .5px;
  background: var(--bg); border: 1px dashed var(--accent); border-radius: 7px;
  padding: 11px 13px; margin-top: 10px; color: var(--accent);
  word-break: break-all; text-align: center;
}

.tag {
  display: inline-block; font-size: 11.5px; padding: 2px 9px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--dim);
}
.tag.ok   { color: var(--lvl-daji);  border-color: var(--line); background: var(--lvl-daji-bg); }
.tag.bad  { color: var(--lvl-xiong); border-color: var(--line); background: var(--lvl-xiong-bg); }
.tag.warn { color: var(--lvl-ping);  border-color: var(--line); background: var(--lvl-ping-bg); }

.el { font-weight: 600; }
.Metal { color: var(--metal); }
.Wood  { color: var(--wood); }
.Water { color: var(--water); }
.Fire  { color: var(--fire); }
.Earth { color: var(--earth); }

.rel { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; }
.rel-good { background: var(--lvl-daji-bg);  color: var(--lvl-daji);  border: 1px solid var(--line); }
.rel-mid  { background: var(--lvl-ping-bg);  color: var(--lvl-ping);  border: 1px solid var(--line); }
.rel-bad  { background: var(--lvl-xiong-bg); color: var(--lvl-xiong); border: 1px solid var(--line); }

.big { font-size: 20px; font-weight: 600; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > div { flex: 0 0 auto; }
.row input { width: 110px; }

footer {
  margin-top: 26px; padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--faint); font-size: 12px;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }