:root{
  /* 白底方案 */
  --paper:#ffffff;
  --card:#ffffff;
  --line:#d5d5d5;         /* 宫格线 */
  --line-soft:#ebebeb;
  --frame:#555555;        /* 九宫格外框 */
  --ink:#000000;
  --ink-2:#333333;
  --ink-3:#9a9a9a;
  --red:#d80000;
  --btn:#3a86f6;
  --star:#000000;
  --shen:#000000;
  --men:#000000;
  /* 四害标色（标在符号文字上）：四色必须一眼分开 —— 绿 / 红 / 紫 / 蓝 */
  --h-kong:#128a4e;       /* 空亡 绿 */
  --h-xing:#e00000;       /* 击刑 红 */
  --h-mu:#8e24aa;         /* 入墓 紫 */
  --h-po:#0f62c9;         /* 门迫 蓝 */
  --shadow:0 1px 2px rgba(0,0,0,.04);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;line-height:1.5;
  padding:env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 16px);
}
.wrap{max-width:620px;margin:0 auto;padding:8px 10px 0}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow);
  margin-bottom:8px;
  overflow:hidden;
}

/* ---------- 标题条 ---------- */
.title-bar{
  background:#fff;
  border:1px solid var(--line);
  border-bottom:2px solid var(--red);
  border-radius:8px 8px 0 0;
  text-align:center;
  padding:8px 0 7px;
  margin-bottom:8px;
}
.title-bar h1{
  margin:0;font-size:18px;font-weight:700;letter-spacing:.22em;
  color:var(--red);
  font-family:"Songti SC","STSong",serif;
}

/* ---------- 输入区 ---------- */
.input-card{padding:11px 13px 13px}
.row-title{display:flex;align-items:center;justify-content:space-between}
.brand{
  font-size:15px;font-weight:600;letter-spacing:.1em;color:#444;
  font-family:"Songti SC","STSong",serif;
}
.mini{
  border:1px solid var(--line);background:#fff;color:var(--ink-3);
  font-size:12px;padding:3px 10px;border-radius:14px;cursor:pointer;
}
.mini:active{background:#f5f5f5}

.time-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:9px}
.time-grid label{display:flex;flex-direction:column;gap:2px}
.time-grid span{font-size:11px;color:var(--ink-3);text-align:center}
.time-grid input{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:8px 2px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums;
  color:var(--ink);font-family:inherit;
}
.time-grid input:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 2px rgba(58,134,246,.15)}

.quick-row{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:#fff;color:#555;
  border-radius:14px;padding:4px 12px;font-size:12.5px;cursor:pointer;
}
.chip:active{background:#f5f5f5}

.mode-row{display:flex;gap:6px;margin-top:9px}
.mode{
  flex:1;padding:7px 0;border-radius:7px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:#fff;color:#555;font-size:13.5px;
}
.mode.on{background:var(--btn);border-color:var(--btn);color:#fff;font-weight:600}

.act-row{display:flex;gap:8px;margin-top:11px}
.btn-primary{
  flex:2;background:var(--btn);color:#fff;border:none;border-radius:8px;
  padding:11px;font-size:15.5px;letter-spacing:.22em;cursor:pointer;font-family:inherit;
  font-weight:600;
}
.btn-primary:active{background:#2f74e0}
.btn-ghost{
  flex:1;background:#fff;color:var(--btn);border:1px solid var(--btn);
  border-radius:8px;padding:11px;font-size:14px;cursor:pointer;font-family:inherit;
}
.opt-row{display:flex;gap:16px;margin-top:9px;justify-content:center}
.opt{display:flex;align-items:center;gap:5px;font-size:12.5px;color:#666}
.opt input{accent-color:var(--btn)}

/* ---------- 盘头 ---------- */
.head-card{
  background:transparent;border:none;box-shadow:none;
  padding:6px 4px 9px;margin-bottom:4px;
}
.h-row{display:flex;flex-wrap:wrap;gap:3px 16px;font-size:13.5px;color:var(--ink)}
.h-row b{font-weight:600;color:var(--red)}
.h-row .k{color:var(--ink-3);margin-right:3px}
.bazi{display:flex;gap:12px;margin-top:5px;font-family:"Songti SC","STSong",serif;font-size:16px}
.bazi span{letter-spacing:.06em}
.bazi .tag{font-size:11px;color:var(--ink-3);font-family:inherit;letter-spacing:0;margin-left:1px}
.bazi .ke-tag{
  font-size:12px;color:var(--red);font-family:inherit;font-weight:700;
  letter-spacing:0;margin-left:2px;align-self:center;
}
.ju-line{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13.5px}
.ju-line .em{color:var(--red);font-weight:700}
.ju-line .k{color:var(--ink-3);margin-right:3px}

/* ---------- 九宫 ---------- */
.grid-card{padding:8px}
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:#cfcfcf;
  border:2px solid var(--frame);
  max-width:440px;
  margin:0 auto;
}
.gong{
  --gfs:clamp(14.5px,4vw,19px);   /* 格内统一字号 */
  background:#fff;
  position:relative;
  aspect-ratio:1/1;
  padding:clamp(5px,1.6vw,8px) clamp(5px,1.8vw,8px);
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(1px,.9vw,4px);
  cursor:pointer;
  transition:filter .12s;
}
.gong:active{filter:brightness(.97)}
/* 九宫格底色统一为白，四害不铺底，只标在具体符号上 */
.gong.mid{background:#fff}

.g-l1,.g-l2,.g-l3{
  display:grid;grid-template-columns:2.62em 1.05em;
  justify-content:center;column-gap:clamp(6px,2.2vw,12px);
  align-items:center;
  line-height:1.16;font-size:var(--gfs);color:#000;
}
.g-shen{font-weight:600;color:#000;flex-shrink:0}
.g-gan{
  font-family:"Songti SC","STSong",serif;color:#000;font-weight:600;
  font-size:var(--gfs);
}
.g-star,.g-men{color:#000;font-weight:500;letter-spacing:-.03em;white-space:nowrap}
/* 地盘干 + 中五寄干：两字紧贴成一组 */
.g-di{display:inline-flex;gap:0;white-space:nowrap;justify-self:start}

/* 四害标色：击刑=红（干）　入墓=紫（干 / 值符落坤）　门迫=蓝（门） */
.g-gan.harm-xing{color:var(--h-xing)}
.g-gan.harm-mu{color:var(--h-mu)}
.g-shen.harm-mu{color:var(--h-mu)}
.g-gan.harm-xing.harm-mu{
  color:var(--h-xing);
  text-decoration:underline;text-decoration-color:var(--h-mu);
  text-decoration-thickness:2px;text-underline-offset:2px;
}
.g-men.harm-po{color:var(--h-po)}
.g-mid-wrap{display:flex;flex-direction:column;align-items:center;gap:1px}

/* 空 / 马 标记：固定在格子右上角，不参与行内排布 */
.g-badge{
  position:absolute;
  top:clamp(3px,1.1vw,6px);right:clamp(4px,1.5vw,7px);
  display:flex;gap:2px;
}
.b-kong,.b-ma{
  font-size:calc(var(--gfs) - 3px);line-height:1.3;padding:0 3px;border-radius:2px;
  font-weight:700;
}
.b-kong{background:#d6f2e3;color:#0b7040}
.b-ma{background:#c9ddf7;color:#123f7a}

/* 底部格局条 */
.flags-bar{
  display:flex;flex-wrap:wrap;gap:4px;margin-top:7px;padding:6px 2px 2px;
  border-top:1px solid var(--line-soft);
}
.flag{
  font-size:11.5px;padding:1.5px 8px;border-radius:3px;
  background:#fff;color:#bcbcbc;border:1px solid #ededed;
}
/* 四害：有则整词上色（与盘面同色），无则留灰 */
.flag.on{font-weight:700}
.flag.on.f-kong{color:var(--h-kong);border-color:#b9e2cb}
.flag.on.f-xing{color:var(--h-xing);border-color:#f2c6c6}
.flag.on.f-mu{color:var(--h-mu);border-color:#dcc6e8}
.flag.on.f-po{color:var(--h-po);border-color:#c5d8f2}
.flag.dark{background:#fff;color:#444;border-color:#cfcfcf;font-weight:600}

/* ---------- 时间导航 ---------- */
.nav-bar{display:flex;gap:5px;margin:2px 0 8px}
.nav-bar button{
  flex:1;padding:8px 0;border-radius:6px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font-size:13.5px;cursor:pointer;font-family:inherit;
}
.nav-bar button:active{background:#f5f5f5}

.foot{text-align:center;font-size:11px;color:#b0b0b0;padding:2px 0 8px}

/* ---------- 详情面板 ---------- */
.sheet-mask{
  position:fixed;inset:0;background:rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .22s;z-index:20;
}
.sheet-mask.show{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:21;
  max-width:620px;margin:0 auto;
  background:#fff;
  border-radius:12px 12px 0 0;
  border-top:1px solid var(--line);
  transform:translateY(102%);
  visibility:hidden;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),visibility .26s;
  max-height:86vh;display:flex;flex-direction:column;
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
}
.sheet.show{transform:translateY(0);visibility:visible}
.sheet-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px 9px;border-bottom:1px solid var(--line-soft);
}
.sheet-head h3{margin:0;font-size:16px;font-weight:700;letter-spacing:.04em;color:var(--red)}
.sheet-body{padding:11px 14px calc(24px + env(safe-area-inset-bottom));overflow-y:auto}

.kv{display:flex;gap:8px;font-size:13.5px;margin-bottom:5px;flex-wrap:wrap}
.kv .k{color:var(--ink-3);min-width:44px}
.kv .v{color:var(--ink)}
.sec{margin-top:13px}
.sec h4{
  margin:0 0 5px;font-size:13px;font-weight:700;color:var(--red);
  letter-spacing:.04em;display:flex;align-items:center;gap:6px;
}
.sec h4::before{content:"";width:3px;height:12px;background:var(--red);border-radius:1px}
.sec p{margin:0 0 4px;font-size:13.5px;color:var(--ink-2);line-height:1.7}
.sec p b{color:var(--red)}
.sec .li{font-size:13.5px;color:var(--ink-2);line-height:1.75;padding-left:2px}
.sec .li b{color:var(--ink);font-weight:600}
.harm{display:flex;flex-wrap:wrap;gap:5px;margin:1px 0 0}
.harm span{font-size:12px;padding:1.5px 8px;border-radius:2px;background:#fdecec;color:var(--red);border:1px solid #f5c9c9}
.harm .ok{background:#f2f7f2;color:#3f7d45;border-color:#d8e6d8}

/* 常驻「存这一局」 */
.save-bar{margin:0 2px 9px}
.save-bar button{
  width:100%;padding:11px;border-radius:8px;cursor:pointer;font-family:inherit;
  border:1px solid var(--btn);background:#fff;color:var(--btn);
  font-size:14.5px;letter-spacing:.14em;font-weight:600;
}
.save-bar button:active{background:#f2f7ff}

/* ---------- 底部导航 ---------- */
body{padding-bottom:calc(62px + env(safe-area-inset-bottom))}
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:15;
  display:flex;background:#fff;border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
  /* 电脑宽屏时按钮只占内容区宽度，不铺到屏幕两端 */
  padding-left:max(0px, calc((100vw - 620px) / 2));
  padding-right:max(0px, calc((100vw - 620px) / 2));
}
.tabbar .tab{
  flex:1;padding:12px 0;border:none;background:none;cursor:pointer;
  font-size:13.5px;color:#7a7a7a;font-family:inherit;letter-spacing:.06em;
}
.tabbar .tab.on{color:var(--btn);font-weight:700}

/* ---------- 存档列表 ---------- */
.store-card{padding:10px 13px 6px}
.store-head{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:8px;border-bottom:1px solid var(--line-soft);
}
.store-count{font-size:13px;color:#666}
.store-count b{color:var(--ink);font-size:15px}
.store-acts{display:flex;gap:6px}
.store-empty{text-align:center;color:#b0b0b0;font-size:13px;padding:34px 0}
.store-item{padding:11px 0;border-bottom:1px solid #f3f3f3}
.store-item:last-child{border-bottom:none}
.si-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.si-time{font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.si-ju{font-size:12px;color:var(--red)}
.si-bazi{
  font-family:"Songti SC","STSong",serif;font-size:14px;color:#333;
  margin-top:3px;letter-spacing:.04em;
}
.si-note{font-size:12.5px;color:#8a7a5c;margin-top:3px}
.si-acts{display:flex;gap:6px;margin-top:7px}
.si-acts button{
  font-size:12px;padding:3px 12px;border-radius:5px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line);background:#fff;color:#666;
}
.si-acts .load{border-color:var(--btn);color:var(--btn)}
.si-acts .del{border-color:#f0c8c8;color:#c33}

/* ---------- 我的 ---------- */
.me-card{padding:12px 13px 14px}
.me-title{
  font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.08em;
  padding-bottom:8px;border-bottom:1px solid var(--line-soft);margin-bottom:10px;
}
.me-tip{font-size:12.5px;color:#8c8c8c;line-height:1.65;margin:0 0 4px}
.fld{
  width:100%;border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:10px 11px;font-size:15px;font-family:inherit;color:var(--ink);margin-top:8px;
}
.fld:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 2px rgba(58,134,246,.15)}
.me-err{font-size:12.5px;color:#c33;min-height:16px;margin:7px 0 0}
.me-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 0;border-bottom:1px solid #f3f3f3;
}
.me-row:last-child{border-bottom:none}
.me-name{font-size:13.5px;color:var(--ink)}
.me-desc{font-size:11.5px;color:#a0a0a0;margin-top:2px;line-height:1.5}

/* 轻提示 */
.toast{
  position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));transform:translate(-50%,10px);
  background:rgba(30,30,30,.92);color:#fff;font-size:13px;padding:9px 16px;border-radius:8px;
  z-index:40;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:80vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}