/* ============================================================
   奇门遁甲 1.0 · pan.css —— 五分区（柳公 2026-10-25 定）
   ① 可改变颜色部分（:root 变量区）——调色只动这一区
   ② 盘头        ③ 九宫格        ④ 后台设置        ⑤ 媒体查询
   底神已独立：--baseshen-bg / --baseshen-fg（不跟值符神同色）
   ============================================================ */

/* ═══════════ ① 可改变颜色部分（变量区） ═══════════ */
:root{
  /* ============================================================
     样式集中区 —— 所有可单独调整的样式都在这里，改这里不影响布局
     ============================================================ */

 /* --------------- 字号 --------------- */
  --fs-time: 0.95rem;   /* 时间，盘头右侧 */
  --fs-sz-fg: 1.2rem;   /* 四柱 */
  --fs-kong: 0.7rem;    /* 空亡 */
  --fs-form: 1rem;      /* 表单 */
  --sub-fs: 1rem;       /* 九宫格内小 div */
  --horse-fs: 0.8rem;   /* 马星 */
  --kong-size:75%;      /* 空亡圈占小div比例 */
  --cell-fs:1.1rem;     /* 默认字号，九宫格下按钮文字 */
  --cs-fs:0.8rem;        /* 长生：平板 / 电脑端字号（:root 默认值） */
  --cs-h:0.85rem;        /* 长生：平板 / 电脑端行高（须略大于字号） */
  --cs-fs-m:0.75rem;     /* 长生：手机端字号（柳公已由 0.55 调到此值；手机上改这一条） */
  --cs-h-m:0.78rem;      /* 长生：手机端行高（略大于手机字号） */
  --ky-fs:1.1rem;        /* 十干克应显示区字号（柳公嫌小就加大这一条，如 1rem / 1.1rem） */
  /* ↑↑ 字号表到此为止：第 15~27 行，共 13 条 ↑↑ */

  --cs-color:#7F7F7F;    /* 长生小字的文字颜色（原写 #7F7F7 只有 5 位，属无效色值，已补全为灰） */
  --ky-gan:#ff0000;      /* 十干克应颜色：干+干   */
  --ky-nr:#63645c;       /* 十干克应颜色：内容显示 */
  
  /* —— 电脑端显示宽度（柳公自设；默认 380px，比原来的 440px 更窄）—— */
  --plate-w-desk:330px;

  /* —— 后台设置页 / 弹出页 字号（2026-10-30：全部去掉 clamp()，改成定值，三端可各调）—— */
  --set-fs:18px;        /* 后台选项 / 说明文字 */
  --set-time-fs:20px;   /* 后台「排盘时间」输入框 */
  --set-btn-fs:16px;    /* 后台底部按钮 */
  --zx-btn-fs:15px;     /* 自选局数按钮 */
  --pick-fs:17px;       /* 时间框 / 局数滚轮格 */
  --pick-head-fs:15px;  /* 弹窗头部（取消/标题/确定、滚轮标题） */
  --pick-btn-fs:16px;   /* 弹窗底部按钮 */

  /* —— 背景三色（整页 / 盘头内部 / 九宫内部，柳公要求全白）—— */
  --page-bg:#f5ede0;     /* 整页背景 */
  --head-bg:#f3ede1;     /* 盘头内部背景 */
  --palace-bg:#fbf8f1;   /* 九宫内部背景 */

  /* —— 通用色（结构用，一般不改）—— */
  --line:#cdbfa6;                 /* 边框/分隔线颜色（浅暖褐，仅微显） */
  --head-line:var(--line);        /* 盘头分隔线色 */
  --val-fg:#AFABAB;               /* 默认数值文字色 ，中宫数字，寄宫干*/
  /* 2026-10-30：旧 --cell-fs(clamp) 已删，统一由顶部「字号」区第 22 行的 --cell-fs 生效 */


  /* —— 新盘头(左右分栏) 文字颜色（集中可单独调）—— */
  --rig-row1-fg:#0000ff;     /* 右栏第一行 法/元/局 766CFF蓝 */
  --rig-fg:#FF0000;          /* 右栏第二行：红色 */
  --xun-lab-fg:#06980d;      /* 右栏第三行：绿色 */
  --left-sz-fg:#ca511c;      /* 左栏四柱 橙红 */
  --head-h:75px;             /* 盘头左右两栏高度 */
  --form-border:#e5b79a;     /* 事項框边框 */
  --form-fg:#203864;         /* 事項框文字 */

  /* —— 盘头：行高与分割线 —— */
  --head-gap:1px;             /* 分割线宽 */
  --head-row-h-30:30px;       /* 盘头 30px 行（新1/3/5行：盘式/四柱/旬首直符值使） */
  --head-row-h-24:24px;       /* 盘头 24px 行（新2/4行：日期/旬空） */

  /* —— 九宫：尺寸（不破坏结构）—— */
  --palace-ratio:1/1;         /* 九宫整体 宽:高（改 1/1 只动此变量） */
  --palace-pad:6px;           /* 每宫内边距 */
  --sub-w:22%;                /* 宫内小 div 宽（柳公要求：原/新格均22%） */
  --sub-ji-w:22%;             /* 寄宫宫4列时小 div 宽 */

  /* —— 宫内：颜色与边框 —— */
  --green-bg:#FF00FF; --green-fg:#fff;       /* 柳公 2026-10-10：值符神 / 直符星 / 值使门 统一06980d背景 #FF00FF */
  --baseshen-bg:#b7aff9; --baseshen-fg:#fff; /* 柳公 2026-10-25：底值符独立配色（不再跟值符神同一条），初值与值符神一致，可单独改 */
  --yellow-bg:#FFFF00;                       /* 柳公 2026-10-10：奇仪入墓 背景 #FFFF00（与击刑各自独立，可同时显示） */
  --ganred-fg:#0000ff;                       /* 天盘 日干/时干 颜色（柳公自调，原值双#已修正） */
  --gan-color:#cc6622;                       /* 天盘干(非日时干)/地盘干 颜色（可单独设） */
  --jx-border:#0000CC;                       /* 六仪击刑 红框(1px) */
  --kong-border:#333;                        /* 空亡圈 边框(1px) */
  --horse-bg:#C55A11;  --horse-fg:#fff;      /* 驿马 圆 */
  --menpo-border:#0000cc;                    /* 门迫 边框色（蓝） */
  --angan-ps:#62a137;                        /* 暗干：绿色 */
  --mxs-fg:#595c5d;                          /* 门 / 星 / 神 —— 三者同一色（柳公 2026-10-28 定 #ac6741） */
  --dishen-fg:#b5a77d;                       /* 底八神（行3 首位：值符/螣蛇/太阴/六合…）——单独一色，与门星神区分 */

  /* —— 宫内：八神/八门/九星/暗干 单独可设样式（默认随正文色，改这里即可）—— */
  --angan-fg:var(--angan-ps);   /* 暗干 */
  --shen-fg:var(--mxs-fg);      /* 八神（随门星神） */
  --star-fg:var(--mxs-fg);      /* 九星（随门星神） */
  --men-fg:var(--mxs-fg);       /* 八门（随门星神） */
 

  /* 2026-10-30：旧 --sub-fs / --horse-fs / --kong-size 已删，统一由顶部「字号」区第 19~21 行生效 */

  /* —— 表单（盘头与九宫之间，独立可调） —— */
  --form-w:70%;            /* 宽 */
  --form-h:28px;           /* 高 */
  --form-gap:3px;          /* 上下外边距（左右 auto 居中） */
  --form-border-w:1px;     /* 边框宽 */
  --form-border:#d8cdb8;   /* 边框色 */
  --form-bg:#ffffff;          /* 背景色（柳公要求全白） */
  --form-radius:0;         /* 圆角（0=直角） */
  --form-focus:#c08a3e;    /* 聚焦边框色（暖金） */

  /* —— 九宫下方四按钮（长生/上局/下局/重置） —— */
  --btn-bg:#f49e61;        /* 背景色766CFF */
  --btn-active-bg:#dd735b;   /* 按钮选中背景（文字随 --val-fg） */
  --btn-h:30px;            /* 高 */
  --btn-w:19%;             /* 宽（五按钮均布，两端与九宫边框一致） */
  --btn-gap:6px;           /* 与九宫的间距 */
 
}

/* ═══════════ ② 盘头 ═══════════ */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--page-bg); font-size:18px;
  font-family:'Songti SC','Noto Serif SC','SimSun','宋体',serif;
  display:flex;flex-direction:column;align-items:center;
  min-height:100vh;min-height:100dvh;
}
.plate{width:100%;max-width:min(560px, calc(100vh - var(--vh-reserve,220px)));background:var(--page-bg);padding:6px;}   /* 桌面一屏：盘宽随视口高自适应，不出上下滚动 */

/* ================= 盘头（新布局：左右分栏，去掉原表格盘头） ================= */
#div-1{ width:100%; font-size:var(--fs-time);  margin-bottom:5px; color:#666;}

#div-2{ width:100%; height:75px; display:flex; gap:4%; margin-bottom:10px; align-items:stretch; }
#div-lef{ width:44%; height:73px; display:flex; flex-direction:column; padding-top:2px; }
#div-rig{ width:52%; height:75px; display:flex; flex-direction:column; font-size:var(--fs-time); font-weight:700;}

.lef-row-top{ display:flex; justify-content:space-between; height:55px; }
.lef-row-top > div{ width:25%; height:100%; font-size:var(--fs-sz-fg); font-weight:900; color:var(--left-sz-fg); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; line-height:1.3; }
.lef-row-bottom{ display:flex; justify-content:space-between; height:20px; }
.lef-row-bottom > div{ width:25%; height:100%; font-size:var(--fs-kong);font-weight:500; display:flex; align-items:center; justify-content:center; }

.rig-row1{ flex:1; display:flex; height:22px; padding-top:3px; color:var(--rig-row1-fg); align-items:flex-start; white-space:nowrap; }
.rig-row1 > div:nth-child(1){ flex:0 0 36%; display:flex; justify-content:flex-start; }
.rig-row1 > div:nth-child(2){ flex:0 0 28%; display:flex; justify-content:center; }
.rig-row1 > div:nth-child(3){ flex:0 0 36%; display:flex; justify-content:flex-end; }
/* 阴盘盘式行：49/2/49（柳公 index-3：方法靠左/局数靠右，中间空2%，容纳四字） */
.rig-row1.yin > div:nth-child(1){ flex:0 0 49%; }
.rig-row1.yin > div:nth-child(2){ flex:0 0 2%; }
.rig-row1.yin > div:nth-child(3){ flex:0 0 49%; }
.rig-row2{ flex:1; display:flex; height:25px; color:var(--rig-fg); }
.rig-row2 > div:first-child{ width:50%; display:flex; align-items:center; justify-content:flex-start; }
.rig-row2 > div:last-child{ width:50%; display:flex; align-items:center; justify-content:flex-end; }
.dot-hide{ color:transparent; }
.rig-row3{ flex:1; display:flex; height:22px; padding-bottom:3px; color:var(--xun-lab-fg);}
.rig-row3 > div:first-child{ width:50%; display:flex; align-items:flex-end; justify-content:flex-start; }
.rig-row3 > div:last-child{ width:50%; display:flex; align-items:flex-end; justify-content:flex-end; }

/* 事项表单（盘头与九宫之间，独立块：宽70% 居中 边框1px） */
#div-3{ width:70%; font-size:var(--fs-form); text-align:center; border:1px solid #e5b79a; padding:3px;margin:0px auto 15px; color:var(--form-fg); border-radius:0;}
#div-3 .cell-form{ width:100%; height:100%; box-sizing:border-box; border:none; background:transparent; font-family:inherit; font-size:inherit; color:inherit; text-align:center; }
#div-3 .cell-form::placeholder{ color:#9a8f80; }
#div-3 .cell-form:focus{ outline:none; }


/* ═══════════ ③ 九宫格 ═══════════ */
/* ================= 九宫 ================= */
.nine-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(3,1fr);
  aspect-ratio:var(--palace-ratio);
  gap:var(--head-gap);
  background:var(--head-line);
  border:1px solid var(--head-line);
  align-items:stretch;
}
.palace{
  background:var(--palace-bg);
  min-height:0;
  padding:var(--palace-pad);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  text-align:center;overflow-wrap:anywhere;
}
.sub-row{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;margin:0;
}
.sub-row.ji .sub{width:var(--sub-ji-w);}   /* 寄宫宫第二行：4格均布 */
.sub-jigong{background:#f7dcd0;color:#a4677c;font-weight:700;}   /* 寄宫天盘=天禽寄宫之干(禽X→X) */
/* ===== 十二长生标注（柳公 2026-10-06：字号 0.55rem、色 #0644f7）=====
   垂直：夹在两个小 div（行与行）中间；
   水平：右对齐并占一格宽(--sub-w)，使小字正落在「天盘干 / 地盘干」那一格的上方（不是九星、八门头上） */
.cs-row{height:auto;flex:0 0 auto;}   /* 分格与数据行一致（.sub-row 默认 space-between），保证每个标注正落在对应干的正上方；柳公2026-10-07：禁止被压缩，避免与相邻行重叠闪烁 */
/* 柳公2026-10-07：空占位格也必须等高（否则「有标注的宫」内容更高，space-between 一均分就把第二行九星/天盘干顶上去一点，看着像闪动）
   柳公2026-10-08：电脑端字号放大到 0.75rem（手机端字已够看，仍用 0.55rem —— 见「长生·手机端」媒体 query）
   尺寸铁律：行与行之间留 17%，标注行总高不得超过该余量，否则挤压相邻行产生闪动 */
.cs-tag{display:block;width:var(--sub-w);height:var(--cs-h);line-height:var(--cs-h);font-size:var(--cs-fs);color:var(--cs-color);font-weight:700;text-align:center;}
.sub{
  position:relative;
  width:var(--sub-w);                         /* 普通格宽（变量见 :root） */
  border:1px solid transparent;
  background:var(--palace-bg);
  font-size:var(--sub-fs);                    /* 九宫小div字号（变量见 :root） */
  color:var(--val-fg);
  font-weight:700;                            /* 宫内全部文字加粗（马/空亡除外，见下） */
}
.sub::before{content:'';display:block;padding-bottom:100%;}
.sub-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}

/* ============================================================
   宫内：颜色与边框（变量见 :root「宫内」区；改这里不影响布局）
   ============================================================ */
.sub-bold{font-weight:700;color:var(--gan-color);}     /* 天盘干(非日时干)/地盘干 色 #843C0C */

/* 空亡圈（柳公测试好的：小div的75%，1px 实线，色见 --kong-border） */
.circle{width:var(--kong-size);height:var(--kong-size);border-radius:50%;border:1px solid var(--kong-border);background:transparent;}

/* 马圆（底/字色见 --horse-bg/--horse-fg；字号照参考；字体保持原样不随宫内加粗） */
.horse{
  width:100%;height:0;padding-bottom:100%;
  border-radius:50%;background:var(--horse-bg);color:var(--horse-fg);
  position:relative;font-weight:600;
  font-size:var(--horse-fs);
  display:flex;align-items:center;justify-content:center;
}
.horse > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:inherit;}

/* 防内容撑宽轨道 */
.cell,.palace,.sub{min-width:0;}

/* —— 宫内：八神/八门/九星/暗干 单独可设样式（类见渲染；默认随正文色）—— */
.angan{color:var(--angan-fg);}    /* 暗干 */
.yuejiang{white-space:nowrap;font-size:0.72em;position:relative;z-index:2;}   /* 月将：强制横排不换行、字号略缩、浮于邻格之上防白底遮挡 */
.shen{color:var(--shen-fg);}      /* 八神 */
.star{color:var(--star-fg);}      /* 九星 */
.men{color:var(--men-fg);}        /* 八门 */
.dishen{color:var(--dishen-fg) !important;}   /* 底八神（柳公 2026-10-28：单独一色；值符那只仍由下方 .sub-baseshen 定） */

/* —— 宫内配色预设（可叠加，供后期微调；全部引用 :root 变量）—— */
.sub-green{background:var(--green-bg) !important;color:var(--green-fg) !important;}  /* 值符神/直符星/值使门 */
.sub-baseshen{background:var(--baseshen-bg) !important;color:var(--baseshen-fg) !important;}  /* 【底值符】专用（行3首位的「值符」），与底八神分开 */
.sub-yellow{background:var(--yellow-bg) !important;}                                    /* 入墓 黄底 */
.sub-ganred{color:var(--ganred-fg) !important;font-weight:700;}                        /* 天盘 日干/时干 颜色 */
.sub-bordered{border:1px solid var(--jx-border) !important;}                            /* 六仪击刑 红框(1px) */
.sub-menpo{border:1px solid var(--menpo-border) !important;}  /* 门迫 仅加蓝框，不改文字色 */

/* ================= 九宫下方四按钮 ================= */
.bottom-bar{display:flex;justify-content:space-between;margin-top:var(--btn-gap);}
.bottom-bar .btn{
  width:var(--btn-w);height:var(--btn-h);
  background:var(--btn-bg);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--cell-fs);color:var(--green-fg);font-weight:700;
  border-radius:0;cursor:pointer;user-select:none;
}
.btn.active{background:var(--btn-active-bg);}

/* ===== 十干克应显示区（柳公 2026-10-31：九宫下方五按钮之下；字号见变量 --ky-fs） ===== */
#keying{display:none;width:100%;margin-top:6px;padding:6px 4px;
  border:1px solid var(--line,#cdbfa6);background:var(--palace-bg,#ffffff);cursor:pointer;
  font-size:var(--ky-fs,0.8rem);line-height:1.5;color:var(--ky-gan,#2498c8);text-align:left;}
#keying > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#keying .ky-r1,#keying .ky-r3{font-weight:700;color:var(--ky-gan,var(--val-fg,#766cff));}  /* 干+干 颜色（--ky-gan） */
#keying .ky-r2,#keying .ky-r4{font-weight:400;color:var(--ky-nr,var(--val-fg,#2498c8));}   /* 克应内容颜色（--ky-nr） */
/* 显示开关：所有屏通用（柳公 2026-11-01 修：手机端此前漏这条，点击无反应） */
#keying.shown{display:block;}
/* 手机端（≤600px）四行；平板/电脑（≥601px）并成两行（柳公 2026-11-01） */
@media (min-width:601px){
  #keying{display:none;grid-template-columns:auto 1fr;column-gap:8px;row-gap:2px;}
  #keying.shown{display:grid;}
  #keying .ky-r1::after,#keying .ky-r3::after{content:"：";}
}


/* ═══════════ ④ 后台设置 ═══════════ */
/* ======== 排盘设置页（内嵌全屏层，柳公版式 2026-09-29；样式未改仅加 #settingsPage 前缀隔离） ======== */
#settingsPage{position:fixed;inset:0;z-index:99;display:none;overflow-y:auto;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;
  background:#f3ece0;color:#43392f;
  padding:clamp(8px,2.5vw,14px);
  touch-action:manipulation;-webkit-text-size-adjust:100%;}
#settingsPage *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
#settingsPage .wrap{width:100%;max-width:520px;margin:0 auto;}
#settingsPage .div1{background:#e61919;color:#fff;text-align:center;font-size:18px;font-weight:700;padding:5px 0;letter-spacing:4px;border-radius:6px;margin-bottom:10px;}   /* 柳公2026-10-05：标题内边距5px、字号13px（压缩后台高度） */
#settingsPage .box{border:1px solid #b08a6a;border-radius:6px;padding:2px 0;margin-bottom:10px;}
#settingsPage .row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;}
#settingsPage .row + .row{border-top:1px dashed #d8c8b2;}
#settingsPage .row.nosep{border-top:none;}
#settingsPage .li{flex:0 0 auto;text-align:left;font-size:16px; font-weight:bold;}
#settingsPage .ri{flex:1 1 auto;text-align:right;font-size:var(--set-fs);min-width:0;line-height:1.4;}
#settingsPage .opt{display:inline-flex;align-items:center;gap:3px;cursor:pointer;padding:3px 2px;}
#settingsPage .opt input{display:none;}
#settingsPage .circle{width:18px;height:18px;border-radius:50%;border:1px solid #9a8a78;background:#fff;display:inline-block;position:relative;flex-shrink:0;}
#settingsPage .opt input:checked + .circle{background:#5a8a5a;border-color:#5a8a5a;}
#settingsPage .opt input:checked + .circle::after{content:"✓";color:#fff;font-size:11px;font-weight:bold;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#settingsPage .optxt{font-size:var(--set-fs);}
#settingsPage .start-methods{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:3px 10px;}
#settingsPage .timebox{width:100%;font-size:var(--set-time-fs);text-align:center;border:1px solid #b08a6a;border-radius:4px;background:#fffdf8;color:#43392f;padding:0;white-space:nowrap;overflow:hidden;cursor:pointer;user-select:none;}   /* 柳公2026-10-04:字号改小+去内边距+不换行,恢复一行；2026-10-24 柳公令「大一号」：11-13px→13-15px */
/* ===== 滚轮时间选择器（柳公示例图 2026-09-30：公历/农历切换 + 五列滚轮 + 取消/确定） ===== */
#timePicker{position:fixed;left:50%;top:50%;transform:translateX(-50%);display:none;flex-direction:column;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.28);z-index:110;overflow:hidden;}   /* 柳公2026-10-05：不再垂直居中，top 对齐「排盘时间」行下虚线（见 tpOpen）；2026-10-07：窗内各行整体上下居中 */
#timePicker .tp-mode{width:70%;margin:10px auto 4px;display:flex;border:1px solid #10c2b2;border-radius:6px;overflow:hidden;}
#timePicker .tp-mode div{flex:1;text-align:center;padding:7px 0;color:#10c2b2;font-size:var(--pick-head-fs);cursor:pointer;background:#fff;}
#timePicker .tp-mode div + div{border-left:1px solid #10c2b2;}
#timePicker .tp-mode div.on{background:#10c2b2;color:#fff;}
#timePicker .tp-wheel{display:flex;padding:6px 2px;}
#timePicker .tp-col{flex:1;min-width:0;text-align:center;user-select:none;touch-action:none;}
#timePicker .tp-cell{height:32px;display:flex;align-items:center;justify-content:center;line-height:1.2;font-size:var(--pick-fs);color:#b9b9b9;cursor:pointer;white-space:nowrap;overflow:hidden;}   /* 柳公2026-10-07：行内文字上下居中 */
#timePicker .tp-cell.mid{background:#efefef;color:#333;font-weight:700;}
#timePicker .tp-cell.up{opacity:.85;}
#timePicker .tp-btns{display:flex;border-top:1px solid #e0e0e0;}
#timePicker .tp-btns div{flex:1;text-align:center;padding:11px 0;font-size:var(--pick-btn-fs);color:#333;cursor:pointer;}
#timePicker .tp-btns div + div{border-left:1px solid #e0e0e0;}
#timePicker .tp-btns div:active{background:#f5f0e6;}
/* ===== 自选局数按钮+单列滚轮弹窗（柳公 2026-10-04） ===== */
#settingsPage .zx-btn{padding:4px 14px;border:1px solid #b08a6a;border-radius:16px;background:#fffdf8;color:#43392f;font-size:var(--zx-btn-fs);cursor:pointer;user-select:none;white-space:nowrap;}
#settingsPage .zx-btn.on{background:#5a8a5a;border-color:#5a8a5a;color:#fff;font-weight:700;}
#juPicker{position:fixed;left:50%;top:50%;transform:translateX(-50%);display:none;flex-direction:column;justify-content:center;background:#fff;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,.28);z-index:110;overflow:hidden;}   /* 柳公2026-10-05：宽/高/上边距由 JS 按设置框与时间窗同一口径设定；2026-10-07：窗内各行整体上下居中 */
#juPicker .ju-head{display:flex;align-items:center;border-bottom:1px solid #e0e0e0;}
#juPicker .ju-head div{padding:11px 0;font-size:var(--pick-head-fs);cursor:pointer;}
#juPicker .ju-cancel{flex:1;color:#666;text-align:left;padding-left:14px !important;}
#juPicker .ju-title{flex:1.4;text-align:center;color:#333;font-weight:700;cursor:default;}
#juPicker .ju-ok{flex:1;text-align:right;padding-right:14px !important;color:#5a8a5a;font-weight:700;}
#juPicker .ju-wheel{padding:6px 2px;}
#juPicker .tp-col{text-align:center;user-select:none;touch-action:none;}
#juPicker .tp-cell{height:32px;display:flex;align-items:center;justify-content:center;line-height:1.2;font-size:var(--pick-fs);color:#b9b9b9;cursor:pointer;white-space:nowrap;overflow:hidden;}   /* 柳公2026-10-07：行内文字上下居中 */
#juPicker .tp-cell.mid{background:#efefef;color:#333;font-weight:700;}
#juPicker .tp-cell.up{opacity:.85;}
/* ===== 经纬度输入（真太阳时,柳公 2026-10-04:根据手机） ===== */
#settingsPage .geo-in{width:64px;padding:4px 2px;border:1px solid #b08a6a;border-radius:4px;background:#fffdf8;color:#43392f;font-size:var(--set-fs);text-align:center;}
#settingsPage .geo-tag{color:#7a6e62;font-size:12px;}
#settingsPage .btn-row{display:flex;gap:4%;margin-bottom:0;}
#settingsPage .div8,#settingsPage .div9{background:#5a8a5a;color:#fff;text-align:center;font-size:var(--set-btn-fs);font-weight:700;padding:5px 0;border-radius:6px;cursor:pointer;letter-spacing:1px;margin-bottom:0;}   /* 柳公2026-10-05：底部三按钮内边距5px（压缩后台高度） */
#settingsPage .bw{flex:0 0 33%;}
#settingsPage .bm{flex:0 0 26%;}
/* ===== 自定义：九宫格内文字大小（柳公 2026-10-30 五档面板） ===== */
#fsPicker{display:none;position:fixed;z-index:120;background:var(--palace-bg,#fffdf8);
  border:1px solid #b08a6a;border-radius:6px;box-shadow:0 4px 18px rgba(0,0,0,.18);overflow:hidden;}
#fsList{display:flex;flex-direction:column;}
#fsList .fs-row{padding:10px 0;text-align:center;font-size:var(--pick-btn-fs,15px);color:#43392f;cursor:pointer;}
#fsList .fs-row + .fs-row{border-top:1px solid #e0e0e0;}
#fsList .fs-row.on{background:#5a8a5a;color:#fff;font-weight:700;}
#fsList .fs-row:active{background:#f5f0e6;}
#fsCancel{padding:9px 0;text-align:center;font-size:var(--pick-btn-fs,15px);color:#666;cursor:pointer;border-top:1px solid #e0e0e0;}

/* ═══════════ ⑤ 媒体查询 ═══════════ */
/* ── 手机端（≤600px）：保持柳公已调好的一套不动 ── */
@media (max-width:600px){
  #settingsPage .row{padding:9px 10px;gap:10px;}
  #settingsPage .opt{padding:5px 2px;}
  #settingsPage .circle{width:20px;height:20px;}
  /* 长生·手机端：改用顶部变量 --cs-fs-m / --cs-h-m（柳公 2026-10-31：手机太小，已可单独调） */
  :root{--cs-fs:var(--cs-fs-m);--cs-h:var(--cs-h-m);}
}

/* ── 平板端（601–1024px）：独立一档，居中显示；字号可单独在下表调 ──
   2026-10-30 柳公：原来平板被算进电脑档，跟电脑一样靠左，现已分开 */
@media (min-width:601px) and (max-width:1024px){
  body{align-items:center;}                 /* 平板居中 */
  .plate{margin-left:auto;margin-right:auto;max-width:min(560px, calc(100vh - var(--vh-reserve,220px)));}
  #settingsPage .wrap{margin-left:auto;margin-right:auto;}
  /* 平板专用字号（柳公想调平板，改这几行即可；留空=沿用 :root 默认值） */
  :root{ --ky-fs:1.3rem;
    /* --sub-fs:1.1rem;  --cell-fs:1.1rem;  --fs-sz-fg:1.15rem;  --set-fs:15px; */
  }
}

/* ── 电脑端（≥1025px）：白底 + 靠左 + 盘宽自设 + 弹窗按内容区居中 ── */
@media (min-width:1025px){
  body{align-items:flex-start; font-family:"Microsoft YaHei","PingFang SC",sans-serif; font-weight:500;}
  .plate{margin-left:16px;max-width:var(--plate-w-desk);}      /* 电脑端显示宽度：改 --plate-w-desk 即可 */
  .lef-row-top > div{line-height:1.5;}
  #div-rig{ font-weight:500;}
  .sub{ font-weight:550;}
  .cs-tag{font-weight:500;}
  .horse{font-weight:500;}
  #keying .ky-r1,#keying .ky-r3,#keying .ky-r2,#keying .ky-r4{font-weight:500;}

  #settingsPage .wrap{margin-left:16px;margin-right:auto;max-width:var(--plate-w-desk);}
  #settingsPage{max-width:none;}
  #settingsPage .li{ font-size:15px; font-weight:500;}
  #settingsPage .div1{ font-weight:500;}
  /* 柳公 2026-10-28：电脑端全白背景（手机/平板沿用 :root 暖色） */
  :root{--page-bg:#ffffff;--head-bg:#ffffff;--palace-bg:#ffffff; --cell-fs: 1.0rem; --sub-fs:1rem;  --horse-fs:0.75rem;  --btn-bg:#008989; 
  --fs-sz-fg:1rem; --baseshen-bg:#766CFF;  --fs-form:0.9rem; --cs-fs:0.7rem; --set-fs:16px;  --set-btn-fs:14px;  --set-time-fs:18px; --ky-fs:0.8rem; 
  }
  /* 时间框 / 自选局数：电脑端按「内容区」居中（内容区左缘 16px，宽 --plate-w-desk）；
     手机、平板维持全页居中 */
  #timePicker,#juPicker{left:calc(16px + var(--plate-w-desk) / 2);}
}

/* ===== 手机端专项（新盘头如需微调字号，变量见 :root「手机端专项」；改这里不影响布局） ===== */