/* ============================================================
 * 择时 · 万年历  —  样式
 * 中式宣纸质感 / 朱砂 · 黛青 · 鎏金
 * ============================================================ */

:root {
  --font-display: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --bg: #f4f0e6;
  --bg2: #efe9dc;
  --card: #fffdf7;
  --card2: #faf6ec;
  --line: #e3dac6;
  --line2: #d5c9ae;
  --ink: #23201a;
  --ink2: #6b6255;
  --ink3: #9c9285;
  --accent: #b23a2f;
  --accent2: #8f2f26;
  --gold: #b08a3e;
  --ok: #3f8f5f;
  --no: #b23a2f;
  --blue: #2f6f9e;
  --shadow: 0 1px 2px rgba(70, 55, 30, .05), 0 8px 24px -14px rgba(70, 55, 30, .22);
  --radius: 16px;

  /* 当日五行主题色（由 JS 按日期与主题写入） */
  --wx-glow1: transparent;
  --wx-glow2: transparent;
  --wx-wash: transparent;
  --wx-edge: transparent;
  --wx-solid: var(--line2);
}

html[data-theme="dark"] {
  --bg: #14120f;
  --bg2: #1a1714;
  --card: #201d18;
  --card2: #262218;
  --line: #35302a;
  --line2: #443d33;
  --ink: #ece5d8;
  --ink2: #a89e8c;
  --ink3: #7d7568;
  --accent: #d4574a;
  --accent2: #e07a6e;
  --gold: #cfa652;
  --ok: #5eb07f;
  --no: #d4574a;
  --blue: #5b9bd0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -16px rgba(0, 0, 0, .7);
}

* { box-sizing: border-box; }
/* 移动端浏览器（尤其 iOS Safari）会自行放大文字，而本文件尺寸几乎都是固定 px，
   于是文字长大、盒子不长大 —— 表现为评分数字顶出圆环、五行百分比顶出卡片。
   桌面浏览器不会这么做，所以这类问题只在真机上看得到。 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body { margin: 0; padding: 0; }

html { background: var(--bg); }

body {
  background: var(--bg);
  background-image:
    /* 整页五行底色：让背景真的是这个颜色，而不只是角落一点光晕 */
    linear-gradient(180deg, var(--wx-wash) 0%, var(--wx-wash) 100%),
    /* 左上 / 右上光晕，浓度更高 */
    radial-gradient(1100px 620px at 6% -12%, var(--wx-glow1) 0%, transparent 66%),
    radial-gradient(920px 540px at 104% -6%, var(--wx-glow2) 0%, transparent 62%),
    /* 底部回光 */
    radial-gradient(860px 480px at 50% 108%, var(--wx-glow2) 0%, transparent 68%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  transition: background-color .4s ease;
}
/* 页面四周一圈五行色描边，进一步强化当日主色 */
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 5;
  box-shadow: inset 0 0 0 1px var(--wx-edge);
}

.app { max-width: 1180px; margin: 0 auto; padding: 16px 16px 56px; }

h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
h3.mt { margin-top: 22px; }

.h3-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.h3-dot.ok { background: var(--ok); }
.h3-dot.no { background: var(--no); }
.hint { font-family: var(--font-body); font-size: 12px; color: var(--ink3); font-weight: 400; letter-spacing: 0; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow);
}
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.grid-2 > .card { margin-bottom: 16px; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 4px 14px;
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--wx-solid) 7%, var(--bg)) 0%,
    color-mix(in srgb, var(--wx-solid) 3%, var(--bg)) 66%,
    transparent 100%);
  backdrop-filter: blur(6px);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  flex: 0 0 auto;   /* 英文品牌文案更长，别把徽标挤扁 */
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 23px; font-weight: 700;
  color: #fff8ec;
  background: linear-gradient(150deg, var(--accent), var(--accent2));
  box-shadow: 0 6px 18px -8px var(--accent);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-text b { font-family: var(--font-display); font-size: 19px; letter-spacing: .12em; }
.brand-text span { font-size: 11.5px; color: var(--ink3); letter-spacing: .06em; }

.live { margin-left: auto; text-align: right; }
.live-clock {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  letter-spacing: .06em; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.live-sub { font-size: 12px; color: var(--ink2); white-space: nowrap; }
.live-meta { display: flex; gap: 6px; justify-content: flex-end; margin-top: 3px; flex-wrap: wrap; }
.live-meta .tz { font-size: 11px; color: var(--ink3); }
.live-meta .drift {
  font-size: 11px; padding: 1px 7px; border-radius: 6px; cursor: pointer;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
}
.live-meta .drift.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--card)); border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); }

/* ---------------- 时钟校准 ---------------- */
.ck-rows { display: flex; flex-direction: column; gap: 7px; }
.ck-row {
  display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 4px 14px; align-items: baseline;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
}
.ck-k { font-size: 12px; color: var(--ink3); }
.ck-v { font-family: var(--font-display); font-size: 14px; font-variant-numeric: tabular-nums; }
.ck-m { grid-column: 2; font-size: 11.5px; color: var(--ink3); font-style: normal; }
.ck-alert {
  margin-top: 12px; padding: 10px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.75;
  background: color-mix(in srgb, var(--accent) 9%, var(--card2));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  color: var(--ink2);
}
.ck-alert b { color: var(--accent); }
.ck-ok { margin-top: 12px; font-size: 12.5px; color: var(--ok); }
.ck-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ck-manual { font-size: 12px; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; }
.ck-manual .num { width: 72px; }
.ck-msg { margin-top: 10px; font-size: 12.5px; color: var(--ink2); }
.tiny code {
  font-family: ui-monospace, Consolas, monospace; font-size: 11px;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; padding: 0 4px;
}

.top-actions { display: flex; gap: 8px; }
/* 英文元素名（Water/Metal）比中文单字宽得多：按钮必须按内容长，不能被 min-width 压住后溢出 */
.top-actions > * { flex: 0 0 auto; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink2);
  font-size: 16px; line-height: 1; transition: .18s;
}
.icon-btn:hover { color: var(--accent); border-color: var(--line2); transform: translateY(-1px); }
.wx-btn {
  width: auto; min-width: 38px; padding: 0 9px;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  transition: .25s;
}
.wx-btn:hover { transform: translateY(-1px); }
.wx-btn { overflow: hidden; text-overflow: ellipsis; }
.wx-btn.off { color: var(--ink3) !important; border-color: var(--line) !important; border-style: dashed !important; background: var(--card) !important; opacity: .8; }
/* 语言选择：三态常显，当前项高亮，任意语言一键直达（不要做成轮换按钮） */
.lang-seg {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); padding: 2px;
}
.lang-opt {
  border: 0; background: transparent; color: var(--ink3); cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  min-width: 24px; height: 30px; padding: 0 5px; border-radius: 7px;
  line-height: 1; transition: .18s;
}
.lang-opt:hover { color: var(--accent); }
.lang-opt.active {
  background: linear-gradient(150deg, var(--accent), var(--accent2));
  color: #fff8ec;
  box-shadow: 0 6px 14px -8px var(--accent);
}

/* ---------------- 日期条 ---------------- */
.datebar {
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 8px 12px; margin-bottom: 14px; box-shadow: var(--shadow);
}
.nav-btn {
  min-width: 36px; height: 34px; padding: 0 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card2); color: var(--ink);
  border-radius: 9px; font-size: 15px; transition: .18s;
}
.nav-btn:hover { border-color: var(--accent); color: var(--accent); }
.today-btn { font-family: var(--font-display); letter-spacing: .1em; }
#datePicker {
  height: 34px; padding: 0 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--card2); color: var(--ink);
  font-family: var(--font-body); font-size: 13px;
}
.datebar-title {
  margin-left: auto; font-family: var(--font-display);
  font-size: 14px; color: var(--ink2); letter-spacing: .06em;
}

/* ---------------- 标签页 ---------------- */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button {
  padding: 9px 20px; cursor: pointer; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink2);
  font-family: var(--font-display); font-size: 15px; letter-spacing: .12em;
  transition: .18s;
}
.tabs button:hover { color: var(--accent); }
.tabs button.active {
  background: linear-gradient(150deg, var(--accent), var(--accent2));
  color: #fff8ec; border-color: transparent;
  box-shadow: 0 8px 20px -10px var(--accent);
}
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fade .28s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- Hero ---------------- */
.hero {
  display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap;
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--wx-solid) 9%, var(--card)) 0%,
    color-mix(in srgb, var(--wx-solid) 2%, var(--card)) 46%,
    var(--card) 78%);
  border-top: 3px solid var(--wx-solid);
}
.hero-left { flex: 1 1 420px; min-width: 260px; }
.hero-date { display: flex; align-items: baseline; gap: 4px; font-family: var(--font-display); }
.hd-num { font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.hd-unit { font-size: 17px; color: var(--ink2); margin-right: 6px; }
.hd-week { font-size: 16px; color: var(--ink2); margin-left: 8px; letter-spacing: .1em; }
.hero-lunar { margin-top: 10px; font-family: var(--font-display); font-size: 17px; letter-spacing: .03em; }
.hero-lunar .gz { color: var(--accent); margin-left: 6px; }
.hero-lunar .leap { color: var(--gold); font-style: normal; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tag {
  font-size: 12px; padding: 3px 9px; border-radius: 7px;
  background: var(--card2); border: 1px solid var(--line); color: var(--ink2);
}
.tag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.tag.no { color: var(--no); border-color: color-mix(in srgb, var(--no) 35%, var(--line)); }
.tag.hl { background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); font-weight: 600; }
.tag.wx {
  font-family: var(--font-display); font-weight: 600; letter-spacing: .02em;
  background: color-mix(in srgb, var(--wx-solid) 14%, var(--card));
  border-color: color-mix(in srgb, var(--wx-solid) 45%, var(--line));
  color: var(--wx-solid);
}
.tag.wx[data-w="木"] { color: #358a52; }
.tag.wx[data-w="火"] { color: #c0432f; }
.tag.wx[data-w="土"] { color: #a67d0c; }
.tag.wx[data-w="金"] { color: #6f7277; }
.tag.wx[data-w="水"] { color: #24619a; }
html[data-theme="dark"] .tag.wx[data-w="木"] { color: #5eb07f; }
html[data-theme="dark"] .tag.wx[data-w="火"] { color: #e0705c; }
html[data-theme="dark"] .tag.wx[data-w="土"] { color: #d8a94a; }
html[data-theme="dark"] .tag.wx[data-w="金"] { color: #d9e0e6; }
html[data-theme="dark"] .tag.wx[data-w="水"] { color: #5fa2d8; }
.hero-jieqi { margin-top: 14px; max-width: 460px; }
.jq-bar { height: 5px; border-radius: 4px; background: var(--line); overflow: hidden; }
.jq-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--accent)); transition: width .4s; }
.jq-text { font-size: 12px; color: var(--ink2); margin-top: 6px; }
.hero-right { flex: 0 0 152px; text-align: center; }
.score-ring { position: relative; width: 120px; height: 120px; margin: 0 auto; }
.score-ring svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: var(--line); stroke-width: 8; }
.ring-fg { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.score-in {
  position: absolute; inset: 0; display: grid; place-content: center;
  line-height: 1.05; padding: 0 10px;      /* 给放大后的文字留安全边距，不让它压到环外 */
  /* 结构性保证：无论手机把文字放大多少倍，都不可能溢出圆环去压下面的
     「综合日课评分」与「复制今日摘要」。极端情况下宁可裁掉一点，也不要压叠。 */
  overflow: hidden;
}
.score-in b {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 9vw, 34px);        /* 视口窄或文字被放大时自动变小，不顶出圆环 */
}
.score-in span {
  font-family: var(--font-display); color: var(--ink2); letter-spacing: .1em;
  font-size: clamp(10px, 3.4vw, 13px);
}
.score-label { font-size: 12px; color: var(--ink3); margin-top: 4px; }
.mini {
  margin-top: 10px; padding: 6px 12px; cursor: pointer; font-size: 12px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--card2); color: var(--ink2);
  transition: .18s;
}
.mini:hover { color: var(--accent); border-color: var(--accent); }

/* ---------------- 宜做 / 忌做 ---------------- */
.action-list { display: flex; flex-direction: column; gap: 10px; }
.act {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 10px 12px; border-radius: 11px;
  background: color-mix(in srgb, var(--ok) 8%, var(--card2));
  border: 1px solid color-mix(in srgb, var(--ok) 22%, var(--line));
}
.act.no { background: color-mix(in srgb, var(--no) 7%, var(--card2)); border-color: color-mix(in srgb, var(--no) 20%, var(--line)); }
.act-tag {
  flex: 0 0 auto; font-family: var(--font-display); font-size: 13px; font-weight: 600;
  padding: 3px 8px; border-radius: 7px; background: var(--card); border: 1px solid var(--line);
  color: var(--ink); white-space: nowrap;
}
.act div { display: flex; flex-direction: column; gap: 2px; }
.act b { font-size: 14px; font-weight: 600; }
.act i { font-size: 11.5px; color: var(--ink3); font-style: normal; }
.empty { color: var(--ink3); font-size: 13px; padding: 8px 0; }
.act-note { font-size: 11.5px; color: var(--ink3); margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line); }

/* ---------------- 四柱 ---------------- */
.pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pillar {
  background: var(--card2); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 13px; position: relative; overflow: hidden;
  overflow-wrap: anywhere;   /* 英文干支是拼音（GuiChou），窄屏要能断行而不是被裁掉 */
}
.pillar.dm { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 6%, var(--card2)); }
.p-label { font-size: 11.5px; color: var(--ink3); letter-spacing: .08em; }
.p-gz { font-family: var(--font-display); font-size: 32px; letter-spacing: .1em; margin: 2px 0 2px; }
.p-wx { font-size: 12px; color: var(--ink2); }
.p-wx .yy { color: var(--ink3); }
.p-nayin { font-size: 12px; color: var(--gold); margin-top: 2px; }
.p-hide { font-size: 11.5px; color: var(--ink3); margin-top: 6px; line-height: 1.7; }
.p-hide i { font-style: normal; margin: 0 6px 0 2px; opacity: .85; }
.p-ss { font-size: 11.5px; color: var(--ink3); margin-top: 4px; border-top: 1px dashed var(--line); padding-top: 5px; }

/* ---------------- 五行 ---------------- */
/* 第三列用 auto 而不是固定 88px：数字与百分比按内容定宽，轨道吸收剩余宽度。
   固定宽度 + 手机端文字放大 = 数字顶出卡片（真机现象，桌面缩窄复现不出来）。 */
.wx-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-bottom: 9px; padding: 2px 6px; border-radius: 8px; }
.wx-row.on { background: color-mix(in srgb, var(--wx-solid) 10%, transparent); }
.wx-name { font-family: var(--font-display); font-size: 17px; text-align: center; font-weight: 600; }
.wx-track { height: 12px; border-radius: 7px; background: var(--bg2); overflow: hidden; }
.wx-fill { height: 100%; border-radius: 7px; transition: width .5s ease; }
.wx-val {
  font-size: 12.5px; color: var(--ink2); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;     /* 宁可整列变宽，也不要换行把卡片撑破 */
}
.wx-val i { font-style: normal; color: var(--ink3); margin-left: 5px; font-size: 11px; }
.note-line { font-size: 12.5px; color: var(--ink2); margin-top: 6px; }
.note-line b.warn { color: var(--accent); }
.rels { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rel { font-size: 12px; color: var(--ink2); background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px; }
.rel i { font-style: normal; color: var(--ink3); margin-left: 5px; font-variant-numeric: tabular-nums; }
.tiny { font-size: 11px; color: var(--ink3); margin-top: 10px; line-height: 1.6; }

/* ---------------- 阴阳 ---------------- */
.yy-bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.yy-yang, .yy-yin {
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 13px; letter-spacing: .1em; transition: width .5s;
}
.yy-yang { background: linear-gradient(150deg, var(--accent), var(--accent2)); color: #fff8ec; }
.yy-yin { background: var(--bg2); color: var(--ink2); }
.yy-text { margin-top: 10px; font-size: 13px; color: var(--ink2); }
.rel-box { display: flex; flex-direction: column; gap: 7px; }
.rel-item {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 44px; align-items: center; gap: 10px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px;
}
.rel-item b { font-family: var(--font-display); font-size: 13.5px; }
.rel-item span { font-size: 12px; color: var(--ink2); }
.rel-item i { font-style: normal; text-align: right; font-size: 12.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }

/* ---------------- 方位：罗盘 ---------------- */
.dir-hint { font-size: 11.5px; color: var(--ink3); margin: -6px 0 8px; }
.compass-wrap { display: grid; place-items: center; padding: 2px 0 0; }
#compass { width: 100%; max-width: 400px; height: auto; display: block; }
.cp-north { fill: var(--accent); }
.cp-sec { fill: var(--card2); }
.cp-sec.alt { fill: var(--bg2); }
.cp-ring { fill: none; stroke: var(--line2); stroke-width: 1.2; }
.cp-line { stroke: var(--line2); stroke-width: 1; opacity: .8; }
.cp-spoke { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; opacity: .5; }
.cp-spoke.on { stroke: var(--accent); stroke-dasharray: 3 4; opacity: .38; }
.cp-dir { fill: var(--ink2); font-size: 12.5px; font-family: var(--font-display); font-weight: 600; text-anchor: middle; letter-spacing: .03em; }
.cp-dir.on { fill: var(--accent); }
.cp-gua { fill: var(--ink3); font-size: 9.5px; font-family: var(--font-display); text-anchor: middle; }
.cp-gua.on { fill: var(--accent); opacity: .75; }
.cp-pill { font-size: 10.5px; font-family: var(--font-display); font-weight: 700; text-anchor: middle; letter-spacing: .01em; }
.cp-center-t { fill: var(--accent); font-size: 13px; font-family: var(--font-display); font-weight: 700; text-anchor: middle; }
.cp-center-s { fill: var(--ink3); font-size: 10.5px; font-family: var(--font-display); text-anchor: middle; }

.dir-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding-top: 11px; border-top: 1px dashed var(--line); }
.lg {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink2); padding: 3px 9px; border-radius: 8px;
  background: var(--card2); border: 1px solid var(--line);
}
.lg i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.lg b { font-family: var(--font-display); font-size: 13px; color: var(--ink); font-weight: 600; }
.lg.dim { opacity: .92; }
.lg.dim b { color: var(--ink2); font-weight: 400; font-size: 12px; }

/* ---------------- 方位：九宫速查 ---------------- */
.dir-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 7px; margin-bottom: 14px; }
.dg-cell {
  min-height: 74px; border-radius: 11px; padding: 7px 8px;
  background: var(--card2); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 5px;
}
.dg-cell.has { border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); background: color-mix(in srgb, var(--accent) 5%, var(--card2)); }
.dg-cell.center { background: transparent; border-style: dashed; }
.dg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; flex-wrap: wrap; }
.dg-name { font-family: var(--font-display); font-size: 13px; font-weight: 600; }
.dg-gua { font-size: 9.5px; color: var(--ink3); font-family: var(--font-display); }
.dg-gods { display: flex; flex-wrap: wrap; gap: 4px; }
.dg-god {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 6px; border: 1px solid; line-height: 1.6;
}
.dg-none { color: var(--ink3); font-size: 12px; }

.dir-rows { display: flex; flex-direction: column; gap: 6px; }
.dir-row {
  display: grid; grid-template-columns: 10px 58px 52px 42px minmax(0, 1fr); align-items: center; gap: 9px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 11px;
}
.dir-row.off { opacity: .5; }
.dir-dot { width: 9px; height: 9px; border-radius: 50%; }
.dir-k { font-family: var(--font-display); font-size: 13px; }
.dir-v { font-family: var(--font-display); font-size: 14px; color: var(--accent); font-weight: 600; }
.dir-deg { font-size: 11px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.dir-m { font-size: 11.5px; color: var(--ink3); }
.dir-notes { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.dir-notes span {
  font-size: 11.5px; color: var(--ink2); background: var(--card2);
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 9px;
}
.dir-notes b { color: var(--ink); }

.seg { margin-left: auto; display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button {
  padding: 4px 13px; border: 0; cursor: pointer; background: var(--card2);
  color: var(--ink2); font-family: var(--font-body); font-size: 12px; transition: .18s;
}
.seg button.active { background: var(--accent); color: #fff8ec; }

/* ---------------- 宜忌 chips ---------------- */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-count { font-size: 12px; color: var(--ink3); font-family: var(--font-body); }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-display); font-size: 13.5px; padding: 4px 10px;
  border-radius: 8px; border: 1px solid var(--line); background: var(--card2); cursor: default;
}
.chip i { font-style: normal; font-size: 10.5px; color: var(--ink3); font-family: var(--font-body); }
.chip.ok { border-color: color-mix(in srgb, var(--ok) 32%, var(--line)); background: color-mix(in srgb, var(--ok) 8%, var(--card2)); }
.chip.no { border-color: color-mix(in srgb, var(--no) 28%, var(--line)); background: color-mix(in srgb, var(--no) 7%, var(--card2)); }
.chip.good { color: var(--ok); }
.chip.bad { color: var(--ink2); border-style: dashed; }

/* ---------------- 明细 ---------------- */
.kv { display: flex; flex-direction: column; }
.kv-row { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.kv-row:last-of-type { border-bottom: 0; }
.kv .k { font-size: 12.5px; color: var(--ink3); }
.kv .v { font-size: 13px; color: var(--ink); }
.xiu-song { margin-top: 12px; padding: 11px 13px; border-radius: 10px; background: var(--card2); border: 1px dashed var(--line2); font-family: var(--font-display); font-size: 12.5px; color: var(--ink2); line-height: 1.9; }

/* ---------------- 月历 ---------------- */
.mg-head, .mg-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mg-head span { text-align: center; font-size: 11.5px; color: var(--ink3); padding-bottom: 4px; font-family: var(--font-display); }
.mg-cell {
  position: relative; min-height: 62px; border-radius: 10px; padding: 6px 6px 5px;
  border: 1px solid var(--line); background: var(--card2); cursor: pointer;
  display: flex; flex-direction: column; transition: .16s;
}
.mg-cell:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line2); }
.mg-cell.empty { background: transparent; border: 0; cursor: default; }
.mg-cell b { font-family: var(--font-display); font-size: 15px; line-height: 1.1; }
.mg-cell i { font-style: normal; font-size: 10.5px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-cell u { text-decoration: none; font-size: 10px; color: var(--ink3); opacity: .8; }
/* 编号与评分同一行两端对齐：评分原来是绝对定位角标，窄屏上会压住日期编号 */
.mg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 3px; }
.mg-cell em {
  flex: 0 0 auto; font-style: normal;
  font-size: 9.5px; color: #fff; border-radius: 5px; padding: 0 4px; line-height: 14px;
  font-variant-numeric: tabular-nums;
}
.mg-cell.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* 今天用「圆角内环」而不是 outline：outline **不跟随 border-radius**，
   当今天正好是选中日时，方角轮廓会叠在圆角边框上，出现同时有矩形红框与圆角红框（真机现象）。
   两条规则都写在 .sel 之后，所以「今天 + 选中」时以这里的 2px 圆角内环为准，不叠加。 */
.mg-cell.today,
.mg-cell.today.sel { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.mg-cell.lv-great { background: color-mix(in srgb, var(--accent) 12%, var(--card2)); }
.mg-cell.lv-good { background: color-mix(in srgb, var(--gold) 13%, var(--card2)); }
.mg-cell.lv-flat { background: color-mix(in srgb, var(--ok) 8%, var(--card2)); }
.mg-cell.lv-care { background: color-mix(in srgb, var(--blue) 9%, var(--card2)); }
.mg-cell.lv-bad { background: var(--bg2); opacity: .82; }

/* ---------------- 时辰 ---------------- */
.now-hour { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nh-now { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nh-label { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: .08em; }
.nh-gz { font-family: var(--font-display); font-size: 22px; color: var(--accent); }
.nh-meta { font-size: 12.5px; color: var(--ink3); }
.nh-count { margin-left: auto; font-size: 13px; color: var(--ink2); }
.nh-count b { color: var(--accent); font-variant-numeric: tabular-nums; }

.hour-list { display: flex; flex-direction: column; gap: 8px; }
.hour-row {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px;
  background: var(--card2); border: 1px solid var(--line); border-left-width: 4px;
  border-radius: 11px; padding: 10px 13px; transition: .18s;
}
.hour-row.lucky { border-left-color: var(--ok); }
.hour-row.unlucky { border-left-color: var(--line2); }
.hour-row.now { background: color-mix(in srgb, var(--accent) 8%, var(--card2)); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); border-left-color: var(--accent); }
.h-time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.h-time b { font-family: var(--font-display); font-size: 15px; }
.h-time span { font-size: 11px; color: var(--ink3); }
.h-top { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.h-label { font-family: var(--font-display); font-size: 14.5px; }
.h-alias { font-size: 11px; color: var(--ink3); }
.h-gz { font-family: var(--font-display); font-size: 15px; color: var(--accent); letter-spacing: .06em; }
.h-wx { font-size: 11.5px; color: var(--ink3); }
.h-luck { font-size: 11.5px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); }
.h-luck.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--line)); }
.h-luck.no { color: var(--ink3); }
.h-now { font-size: 11px; color: #fff8ec; background: var(--accent); padding: 1px 7px; border-radius: 6px; }
.h-yj { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 5px; font-size: 12px; }
.h-yj .yi { color: var(--ok); }
.h-yj .ji { color: var(--ink2); }
.h-yj .chong { color: var(--ink3); font-size: 11.5px; }

.lh { display: grid; grid-template-columns: 100px 108px minmax(0, 1fr) 1.4fr; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.lh:last-child { border-bottom: 0; }
.lh b { font-family: var(--font-display); font-size: 14px; }
.lh span { color: var(--ink2); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.lh i { font-style: normal; color: var(--ink3); font-size: 12px; }
.lh em { font-style: normal; color: var(--ok); font-size: 12px; }

/* ---------------- 择日 ---------------- */
.pick-form { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.pick-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--ink3); }
.pick-form select {
  height: 38px; min-width: 190px; padding: 0 10px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card2); color: var(--ink);
  font-family: var(--font-body); font-size: 13.5px;
}
.pick-matter { font-size: 13px; color: var(--ink2); margin-bottom: 12px; }
.pick-matter b { color: var(--accent); font-family: var(--font-display); }
.pick-note { font-size: 11.5px; color: var(--ink3); margin: -4px 0 12px; }
.pick-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px; }
.pk {
  display: grid; grid-template-columns: 30px 78px minmax(0, 1fr) 66px; grid-template-areas: "rank date lunar score" "rank meta reasons score";
  gap: 3px 10px; align-items: center; cursor: pointer;
  background: var(--card2); border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px;
  transition: .18s;
}
.pk:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--accent); }
.pk-rank { grid-area: rank; font-family: var(--font-display); font-size: 19px; color: var(--ink3); text-align: center; }
.pk-date { grid-area: date; display: flex; flex-direction: column; }
.pk-date b { font-family: var(--font-display); font-size: 16px; }
.pk-date span { font-size: 11px; color: var(--ink3); }
.pk-lunar { grid-area: lunar; font-size: 12.5px; color: var(--ink2); }
.pk-lunar i { font-style: normal; color: var(--ink3); margin-left: 6px; font-size: 11.5px; }
.pk-meta { grid-area: meta; font-size: 11.5px; color: var(--ink3); }
.pk-score { grid-area: score; text-align: center; }
.pk-score b { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.pk-score span { font-size: 11px; color: var(--ink3); }
.pk-reasons { grid-area: reasons; display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pk-reasons span { font-size: 10.5px; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }
.pk-reasons .ok { color: var(--ok); }
.pk-reasons .no { color: var(--no); }
#pickMonth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pm-title { font-family: var(--font-display); font-size: 13.5px; color: var(--ink2); margin-bottom: 8px; }

/* ---------------- 提醒 ---------------- */
.sw-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.sw-row > div { flex: 1; display: flex; flex-direction: column; }
.sw-row b { font-size: 14px; }
.sw-row span { font-size: 12px; color: var(--ink3); }
.sw { flex: 0 0 auto; position: relative; width: 46px; height: 26px; }
.sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw i {
  position: absolute; inset: 0; border-radius: 999px; background: var(--line2);
  cursor: pointer; transition: .2s;
}
.sw i::after {
  content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.sw input:checked + i { background: var(--accent); }
.sw input:checked + i::after { transform: translateX(20px); }
.num {
  width: 62px; height: 26px; padding: 0 6px; border-radius: 7px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--card2); color: var(--ink);
}
input[type="time"].num { width: 96px; }
.perm-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.perm { font-size: 13px; color: var(--ink2); }
.perm b.ok { color: var(--ok); }
.perm b.no { color: var(--no); }
.btn {
  padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 13px;
  border: 1px solid transparent; background: linear-gradient(150deg, var(--accent), var(--accent2));
  color: #fff8ec; font-family: var(--font-body); transition: .18s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px var(--accent); }
.btn.ghost { background: var(--card2); color: var(--ink2); border-color: var(--line); }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); box-shadow: none; }
.log-row { display: grid; grid-template-columns: 148px 190px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.log-row:last-child { border-bottom: 0; }
.log-t { color: var(--ink3); font-variant-numeric: tabular-nums; }
.log-row b { font-weight: 600; }
.log-row span:last-child { color: var(--ink2); }

/* ---------------- 其他 ---------------- */
.disclaimer { font-size: 11.5px; color: var(--ink3); line-height: 1.8; padding: 4px 2px; }
.foot {
  display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between;
  margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--ink3);
}

.toast-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 99; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 240px; max-width: 360px; padding: 12px 15px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--line2); box-shadow: 0 12px 34px -14px rgba(0, 0, 0, .45);
  display: flex; flex-direction: column; gap: 3px;
  opacity: 0; transform: translateY(12px) scale(.98); transition: .32s cubic-bezier(.2, .8, .3, 1);
  border-left: 4px solid var(--accent);
}
.toast.in { opacity: 1; transform: none; }
.toast b { font-family: var(--font-display); font-size: 14px; }
.toast span { font-size: 12px; color: var(--ink2); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 980px) {
  .pick-top { grid-template-columns: minmax(0, 1fr); }
  #pickMonth { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .live { display: none; }
  .hd-num { font-size: 46px; }
  .lh { grid-template-columns: 84px 96px minmax(0, 1fr); }
  .lh em { grid-column: 1 / -1; }
  .kv-row { grid-template-columns: 84px minmax(0, 1fr); }
  .log-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (max-width: 560px) {
  .app { padding: 12px 10px 40px; }
  .card { padding: 14px 14px; }
  .datebar-title { display: none; }
  /* 顶栏现在有 3 个图标按钮 + 三段式语言选择，窄屏收紧品牌区与间距，避免溢出 */
  .topbar { gap: 10px; }
  .brand-text span { display: none; }
  .top-actions { gap: 6px; }
  .icon-btn { width: 34px; height: 34px; font-size: 15px; }
  /* 注意顺序：上面的 .icon-btn{width:34px} 会盖掉 .wx-btn{width:auto}，这里必须显式还回来 */
  .wx-btn { width: auto; min-width: 34px; padding: 0 7px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .lang-seg { padding: 1px; gap: 1px; }
  .lang-opt { font-size: 12px; min-width: 22px; height: 28px; padding: 0 4px; }
  .mg-cell { min-height: 52px; padding: 4px; }
  .mg-cell u { display: none; }
  /* 窄屏格子只有 ~37px 内容宽：「编号 + 评分」两枚数字必须收得下 */
  .mg-cell b { font-size: 14px; }
  .mg-cell em { font-size: 9px; padding: 0 3px; }
  .dir-row { grid-template-columns: 10px 50px 44px minmax(0, 1fr); }
  .dir-deg { display: none; }
  .dir-grid { gap: 5px; }
  .dg-cell { min-height: 66px; padding: 6px; }
  .dg-name { font-size: 12px; }
  .dg-gua { font-size: 9px; }
  .hour-row { grid-template-columns: 74px minmax(0, 1fr); }
  .pk { grid-template-columns: 26px minmax(0, 1fr) 60px; grid-template-areas: "rank date score" "rank lunar score" "rank meta score" "rank reasons score"; }
}

@media print {
  body { background: #fff; }
  .topbar, .datebar, .tabs, .toast-wrap, .mini, .seg, .foot, #monthGrid { display: none !important; }
  .card { break-inside: avoid; box-shadow: none; border-color: #ccc; }
  .tab-panel { display: block !important; }
  #tab-hours, #tab-pick, #tab-notify { display: none !important; }
}

/* ============ 目标日倒计时 与 择日关注 ============ */
.target-card {
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.tg-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 13px; }
.tg-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--accent); border-radius: 5px; padding: 1px 6px;
}
.tg-row b { font-family: var(--font-display); font-size: 15px; }
.tg-score, .tg-matter { font-size: 12px; color: var(--ink2); }
.tg-clear { margin-left: auto; }
.tg-cd {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line);
  font-size: 12px; color: var(--ink3);
}
.tg-cd b {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 20px; font-weight: 700; color: var(--accent); letter-spacing: .02em;
}

.watch-card {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px dashed var(--line2); border-radius: 14px;
  padding: 10px 12px; margin-bottom: 10px; background: var(--card2);
}
.watch-card.on { border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); background: color-mix(in srgb, var(--ok) 5%, var(--card)); }
.wk-body { flex: 1; min-width: 0; }
.wk-body > b { display: block; font-size: 13px; margin-bottom: 2px; }
.wk-body > span { display: block; font-size: 12px; color: var(--ink2); line-height: 1.5; }
.wk-th { margin-top: 6px; font-size: 12px; color: var(--ink3); display: flex; align-items: center; gap: 6px; }

.pk-pick-btn {
  grid-column: 1 / -1; margin-top: 6px; justify-self: start;
  font-family: var(--font-body); font-size: 11.5px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--card); color: var(--ink2);
  border-radius: 7px; padding: 3px 9px; transition: .15s;
}
.pk-pick-btn:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.pk-pick-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 版本标记：用来确认「装的是哪一版」 */
.ver {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 11px; font-weight: 600; color: var(--ink3);
  border: 1px solid var(--line); border-radius: 5px; padding: 0 5px;
}
.perm .ver, .foot .ver { margin-left: 4px; }

/* ============ 手机标签页 ============ */
.ph-url {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--card2); border: 1px dashed var(--line2); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px;
}
.ph-url b {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 16px; font-weight: 700; color: var(--accent);
  word-break: break-all; flex: 1; min-width: 0;
}
.ph-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; }
.ph-table th {
  text-align: left; font-weight: 600; color: var(--ink3); font-size: 11.5px;
  letter-spacing: .06em; padding: 4px 8px 6px 0; border-bottom: 1px solid var(--line);
}
.ph-table td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ph-table tr:last-child td { border-bottom: 0; }
.ph-table .ok { color: var(--ok); }
.ph-table .no { color: var(--no); }
.ph-ics { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.ph-days { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); flex-wrap: wrap; }
.ph-days .btn { padding: 4px 12px; font-size: 12.5px; }
.btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ph-ics-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ph-install {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 13px;
}
.ph-install > b { display: block; margin-bottom: 4px; }