/* 艺术层：只换控件的皮肤（字体、线、形状、底色），不动星盘本体。
   2026-10-12 Steven 定的方向：星盘工具页的控件要和报告商城同一套语言——宋体字、古金细线、
   菱形记号、圆章、深青的主按钮。星盘是这一页的主作品，控件是它的铭牌和刻度。
   当天下午他看了第一版（按钮、盘型、时间条都是方角细框），说「方块硬邦邦的僵化版，不柔和」；
   他点头的形状是页头的弧、右侧的圆章。所以：能点的小东西一律是圆的——单个字或图标是圆章，
   几个字的是两头全圆的「长圆章」，不再画方框和格子。卡片、弹层这些大块仍是方角的画框。
   当天夜里他又定了一条：框一律只画一道线。原来圆章外面多套一圈、主按钮里面压一道金线、卡片和弹层
   画两道框，他说「不协调」「重影」。所以这一层里不再有「线外面再套一道线」的画法。

   为什么单独成文件、排在 chart.css 之后：chart.css 里同一个选择器常被后面的规则覆盖好几次，
   叠在最后才能保证这里说了算；要整层撤掉也只需删 chart.html 里那一行 link。
   选择器前缀 body:not(#art) 只为抬高优先级（等于多带一个 id），页面里并没有 #art 这个元素。
   颜色一律走 site-theme.css 的 --site-* 变量，所以夜间和黑白盘会自动换成各自的色板。 */

:root{
  /* 菱形记号做成遮罩而不是图片：遮罩只管形状，颜色由 background 给，才能跟着色板走 */
  --art-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1 9 5 5 9 1 5z' fill='none' stroke='%23000' stroke-width='1.15'/%3E%3C/svg%3E");
  --art-radius:2px;
  --art-pill:62.4375rem;
  --art-line:var(--site-gold-line);
  --art-line-soft:rgb(var(--site-gold-line-rgb)/.42);
}

/* ══ 一、铭牌：名字、时间、地点 ══════════════════════════════════════════ */
body:not(#art) .ci-subject .subject-name{
  font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:.14em;line-height:1.3;
  color:var(--text);margin-bottom:.4375rem;
}
body:not(#art) .ci-subject .subject-meta .rs-date{
  font-family:var(--serif);font-size:1.0625rem;font-weight:500;letter-spacing:.05em;line-height:1.4;
  font-variant-numeric:tabular-nums lining-nums;color:var(--text);margin-bottom:.25rem;
}
body:not(#art) .ci-subject .subject-meta .rs-place{
  font-family:var(--serif);font-size:.875rem;letter-spacing:.1em;color:var(--text-dim);
}
body:not(#art) .ci-subject .subject-meta .rs-place .rs-coords{
  font-style:italic;font-size:.8125rem;letter-spacing:.03em;color:var(--site-gold);margin-left:.5rem;
}
/* 最小的一行留给无衬线：宋体笔画细，11px 上下在普通屏幕上会发虚 */
body:not(#art) .ci-subject .subject-meta .rs-tech{letter-spacing:.16em;color:var(--text-faint)}
/* 铭牌底下的分隔：原来是 3rem 的灰短线，换成通栏金线，线头一颗菱形 */
body:not(#art) .ci-subject .subject-meta::after{
  width:100%;max-width:13.75rem;height:.5625rem;margin-top:.5625rem;
  background:var(--art-line);
  -webkit-mask:var(--art-diamond) 0 50%/.5625rem .5625rem no-repeat,
               linear-gradient(90deg,#000 55%,transparent) .8125rem 50%/calc(100% - .8125rem) 1px no-repeat;
          mask:var(--art-diamond) 0 50%/.5625rem .5625rem no-repeat,
               linear-gradient(90deg,#000 55%,transparent) .8125rem 50%/calc(100% - .8125rem) 1px no-repeat;
}

/* ══ 二、操作按钮：长圆章——右侧那种圆章拉长了写字；主按钮是一枚深青的 ══ */
body:not(#art) .ci-actions .rs-btn{
  border-radius:var(--art-pill);font-family:var(--serif);font-size:.8125rem;font-weight:500;
  /* 字距会在最后一个字后面多出一截，用等量缩进补回来，字才在章里居中 */
  letter-spacing:.24em;text-indent:.24em;line-height:1.5;padding-top:.3125rem;padding-bottom:.3125rem;
}
body:not(#art) .ci-actions .rs-btn.rs-ghost{
  background:var(--bg-card);color:var(--site-plate-ink);border:1px solid var(--art-line);
}
body:not(#art) .ci-actions .rs-btn.rs-ghost:hover{
  background:var(--site-gold-soft);color:var(--site-accent);border-color:var(--site-gold);
}
body:not(#art) .ci-actions .rs-btn.rs-accent{
  background:var(--site-plate);color:var(--site-on-plate);border:1px solid var(--site-plate);
  letter-spacing:.5em;text-indent:.5em;font-weight:500;
}
body:not(#art) .ci-actions .rs-btn.rs-accent:hover{background:var(--site-plate-deep);border-color:var(--site-plate-deep)}

/* ══ 三、盘型：一条两头全圆的轨道，四种盘排成一行，选中的那一格点亮 ══════ */
/* 和页头那道黄道环一个意思：一排刻度里亮着的那一格就是现在的位置。
   上面铭牌的字放大后高了约 7px，这里把盘型上方的留白从 2rem 收到 1.125rem 补回来；
   四格从两行并成一行又省出一行的高度，下面相位表的起点比原来高 */
body:not(#art).desktop-chart-controls .ci-subject .chart-mode-dock{margin-top:1.125rem}
body:not(#art).desktop-chart-controls .chart-mode-dock #chart-mode-toggle{
  grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:.1875rem;
  border:1px solid var(--art-line);border-radius:var(--art-pill);background:var(--bg-card);
}
body:not(#art).desktop-chart-controls .chart-mode-dock #chart-mode-toggle .cm-btn{
  border:0;border-radius:var(--art-pill);background:transparent;color:var(--site-plate-ink);
  font-family:var(--serif);font-size:.8125rem;font-weight:500;letter-spacing:.06em;
  min-height:1.75rem;padding:.1875rem 0;
}
body:not(#art).desktop-chart-controls .chart-mode-dock #chart-mode-toggle .cm-btn:hover{background:rgb(var(--site-gold-line-rgb)/.16);color:var(--site-accent)}
body:not(#art).desktop-chart-controls .chart-mode-dock #chart-mode-toggle .cm-btn.active{
  background:var(--site-gold-soft);color:var(--site-accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--art-line);
}
/* 轨道里格子挨着格子，画在按钮外面的键盘焦点框会压到邻格，所以收进格子里 */
body:not(#art).desktop-chart-controls .chart-mode-dock #chart-mode-toggle .cm-btn:focus-visible{outline-offset:-3px}

/* ══ 四、相位／特殊／笔记：宋体页签，选中的那格底线上压一颗菱形 ════════ */
body:not(#art) .ci-montage-tabs{border-bottom-color:var(--art-line)}
body:not(#art) .ci-montage-tabs button{
  font-family:var(--serif);font-weight:500;letter-spacing:.28em;color:var(--text-dim);
}
body:not(#art) .ci-montage-tabs button[data-mt="aspect"]:not(.active){font-weight:500;color:var(--text-dim)}
body:not(#art) .ci-montage-tabs button:hover{color:var(--site-accent)}
body:not(#art) .ci-montage-tabs button.active{color:var(--text);font-weight:700}
body:not(#art) .ci-montage-tabs button.active::after{height:1.5px;border-radius:0;background:var(--site-accent)}
body:not(#art) .ci-montage-tabs button.active::before{
  content:"";position:absolute;left:50%;bottom:-.25rem;width:.4375rem;height:.4375rem;z-index:1;
  transform:translateX(-50%) rotate(45deg);
  background:var(--bg-card);border:1px solid var(--site-accent);
}

/* ══ 五、顶部时间条：一圈圆头细线，里面一排小圆章 ══════════════════════ */
/* 外框的样子是 Steven 2026-10-12 看了「不画外框／圆头细线」两张对比图选的：圆头细线，
   和左栏的盘型轨道是同一种东西。原来那圈长方框他说是「僵化感」。
   边框要带 !important：chart.css 里给这一条画框的那条规则带着 */
body:not(#art) #ci-controlbar-pill{border-color:var(--art-line)!important;border-radius:var(--art-pill)}
/* 圆角留着：黑白盘模式会给这一组强加一层浅灰底，方角的话就是一条灰方块 */
body:not(#art) .tu-seg{background:transparent;border-radius:var(--art-pill);gap:.0625rem;padding:0}
/* 年月日时分各是一个字，正好做成圆章，选中的那枚点亮。直径 1.5rem 比原来的长条窄 2px：
   这一条每宽 1px，窄窗口下时间条就更早折行 */
body:not(#art) .tu-seg .tu-unit{
  display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;padding:0;
  font-family:var(--serif);font-size:.75rem;letter-spacing:0;line-height:1;border-radius:50%;color:var(--text-dim);
}
body:not(#art) .tu-seg .tu-unit.on{
  background:var(--site-gold-soft);color:var(--site-accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--art-line);
}
body:not(#art) .chart-date-bar .cdb-btn{border-color:var(--art-line);color:var(--site-plate-ink)}
body:not(#art) .chart-date-bar .cdb-btn:hover{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent)}
/* 日期下面原来有一道金线，Steven 2026-10-12 夜说「非常不协调」，去掉：外面已经有一圈圆头细线，日期自己不再画线 */
body:not(#art) .chart-date-bar .cdb-date{
  border:0;border-radius:0;padding:0 .125rem;
  /* 宽度钉在原来的 10.5rem：再宽的话，窄窗口下时间条会提前折成两行 */
  min-width:10.5rem;width:10.5rem;font-family:var(--serif);font-size:.8125rem;letter-spacing:.02em;
}
/* 「今」是这一条里唯一填了底色的：回到此刻是最常用的一步 */
body:not(#art) .chart-date-bar .cdb-btn.cdb-now{
  width:1.625rem;padding:0;letter-spacing:0;border-radius:50%;font-family:var(--serif);font-size:.75rem;font-weight:700;
  background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent);
  margin:0 .25rem 0 .1875rem;
}
body:not(#art) .chart-date-bar .cdb-btn.cdb-now:hover{background:var(--site-plate);border-color:var(--site-plate);color:var(--site-on-plate)}
/* 两组之间：竖线换成一颗菱形，和右侧图标栏分组用的是同一个记号 */
body:not(#art) .chart-date-bar .cdb-divider{
  width:.375rem;height:.375rem;margin:0 .1875rem;background:transparent;border:1px solid var(--art-line);transform:rotate(45deg);
}
/* 窄窗口（769–1200px）这一条会折成两行，菱形正好落在第二行开头，像个多出来的记号，收掉 */
@media (min-width:769px) and (max-width:1200px){
  body:not(#art) .chart-date-bar .cdb-divider{display:none}
}

/* ══ 六、右侧图标栏：一枚枚小圆章 ══════════════════════════════════════ */
body:not(#art).desktop-chart-controls .chart-integrated > .data-launcher{padding:.1875rem .3125rem;right:.3125rem;gap:.6875rem}
/* 矮屏幕（页面内容区不到 760px 高）上这一列本来就放不下、要滚动：间距退回原来的 .5rem，不再加长 */
@media (max-height:760px){
  body:not(#art).desktop-chart-controls .chart-integrated > .data-launcher{gap:.5rem}
}
body:not(#art).desktop-chart-controls .chart-integrated > .data-launcher button{
  background:var(--bg-card);color:var(--site-plate-ink);border-color:var(--art-line)!important;
}
body:not(#art).desktop-chart-controls .chart-integrated > .data-launcher button:hover{
  background:var(--site-gold-soft);color:var(--site-accent);border-color:var(--site-gold)!important;
}
body:not(#art).desktop-chart-controls .chart-integrated > .data-launcher button.active{
  background:var(--site-plate);color:var(--site-on-plate)!important;border-color:var(--site-plate)!important;
}
/* 两组图标之间：横线换成一颗菱形 */
body:not(#art).desktop-chart-controls .chart-integrated > .data-launcher .dl-divider{
  width:.4375rem;height:.4375rem;margin:.0625rem auto;opacity:1;flex:0 0 auto;
  background:transparent;border:1px solid var(--art-line);transform:rotate(45deg);
}
body:not(#art) .data-launcher-tooltip{
  background:var(--site-plate);color:var(--site-on-plate);border:0;border-radius:var(--art-pill);
  font-family:var(--serif);letter-spacing:.2em;
  box-shadow:0 .5rem 1rem -.5rem rgb(0 0 0/.45);
}

/* ══ 七、浮卡：点右侧图标后滑出的那一栏 ════════════════════════════════ */
/* 浮卡打开时图标栏换了一套带 !important 的尺寸规则，颜色也要用同样的力度压回来 */
body:not(#art).data-open .data-launcher{padding:.25rem!important;right:.25rem!important}
body:not(#art).data-open .data-launcher button{
  background:var(--bg-card)!important;border-color:var(--art-line)!important;color:var(--site-plate-ink);
}
body:not(#art).data-open .data-launcher button:hover{
  background:var(--site-gold-soft)!important;border-color:var(--site-gold)!important;color:var(--site-accent)!important;
}
/* 颜色也要 !important：夜间模式有一条带 !important 的图标颜色，不压住的话选中的图标是浅底浅字 */
body:not(#art).data-open .data-launcher button.active{
  background:var(--site-plate)!important;border-color:var(--site-plate)!important;color:var(--site-on-plate)!important;
}
body:not(#art).data-open .data-launcher button.active .dl-label{color:var(--site-on-plate)!important}
body:not(#art) .dual-back-btn{
  border-radius:var(--art-pill);background:transparent;border-color:var(--art-line);color:var(--site-plate-ink);
  font-family:var(--serif);letter-spacing:.14em;
}
body:not(#art) .dual-back-btn:hover{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent)}

/* 栏的左边缘：一道金线。只在电脑上做：手机上这一栏是从底部升起的抽屉，要保留它原来的圆顶和阴影 */
@media (min-width:769px){
  body:not(#art) #data-drawer{border-radius:0;border-left:1px solid var(--art-line);box-shadow:none}
}
/* 栏标题：金色宋体大字，底下一道「线—菱形—线」 */
body:not(#art) #data-drawer-title{
  font-family:var(--serif);font-weight:600;letter-spacing:.32em;text-indent:.32em;color:var(--site-gold);
  position:relative;border-bottom:0;
}
/* 原来这里是一条通栏灰线；换成通栏金线，正中一颗菱形，两头渐隐 */
body:not(#art) #data-drawer-title::after{
  content:"";position:absolute;left:0;right:0;bottom:-.25rem;height:.5625rem;pointer-events:none;
  background:var(--art-line);pointer-events:none;
  -webkit-mask:var(--art-diamond) 50% 50%/.5625rem .5625rem no-repeat,
               linear-gradient(90deg,transparent,#000 45%) 0 50%/calc(50% - .625rem) 1px no-repeat,
               linear-gradient(270deg,transparent,#000 45%) 100% 50%/calc(50% - .625rem) 1px no-repeat;
          mask:var(--art-diamond) 50% 50%/.5625rem .5625rem no-repeat,
               linear-gradient(90deg,transparent,#000 45%) 0 50%/calc(50% - .625rem) 1px no-repeat,
               linear-gradient(270deg,transparent,#000 45%) 100% 50%/calc(50% - .625rem) 1px no-repeat;
}
/* z-index 必须给：标题为了挂底下那道金线设成了 relative，这三个按钮在它前面，
   不抬高就会被标题整块盖住、点不到（手机上等于关不掉浮卡） */
body:not(#art) #data-drawer .data-drawer-max,
body:not(#art) #data-drawer .data-drawer-close,
body:not(#art) #data-drawer .data-drawer-back{
  background:transparent;border-color:var(--art-line);color:var(--site-plate-ink);z-index:3;
}
/* 放到全屏时按钮保持按下的样子（原样式里有，这里的透明底会把它冲掉） */
body:not(#art).data-maxed #data-drawer .data-drawer-max{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent)}
body:not(#art) #data-drawer .data-drawer-max:hover,
body:not(#art) #data-drawer .data-drawer-close:hover,
body:not(#art) #data-drawer .data-drawer-back:hover{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent)}

/* 栏里的卡片：方角，一道金色细边，底下一点落影 */
body:not(#art) #data-drawer-body .card{
  border-radius:var(--art-radius);border-color:var(--art-line-soft);background:var(--site-raised);
  box-shadow:0 1.5rem 1.75rem -1.75rem rgb(60 45 20/.42);
}
/* 小节标题：宋体，前面一颗菱形，底线从金色渐隐 */
body:not(#art) #data-drawer-body .bal-h{
  font-family:var(--serif);font-weight:600;letter-spacing:.24em;color:var(--site-plate-ink);
  border-bottom:0;background:linear-gradient(90deg,var(--art-line),transparent 85%) 0 100%/100% 1px no-repeat;
}
body:not(#art) #data-drawer-body .bal-h::before{
  content:"";display:inline-block;width:.4375rem;height:.4375rem;margin:0 .625rem .125rem .125rem;
  transform:rotate(45deg);border:1px solid var(--site-gold);vertical-align:middle;
}
body:not(#art) #data-drawer-body .bal-circle-title{font-family:var(--serif);font-weight:600;letter-spacing:.2em;color:var(--site-plate-ink)}
/* 条形图的轨道：细而方，像尺子上的一格 */
body:not(#art) #data-drawer-body .bar-track,
body:not(#art) #data-drawer-body .bar-fill{border-radius:0}

/* 栏顶的分段按钮（推运里选法达／小限／黄道释放那排） */
body:not(#art) #data-drawer-segmented{border-bottom-color:var(--art-line)}
body:not(#art) #data-drawer-segmented .seg-row-label{letter-spacing:.2em;color:var(--site-gold)}
body:not(#art) #data-drawer-segmented .seg-row-pills button{
  border-radius:var(--art-pill);border-color:var(--art-line);color:var(--site-plate-ink);background:transparent;
  font-family:var(--serif);letter-spacing:.14em;
}
body:not(#art) #data-drawer-segmented .seg-row-pills button:hover{background:rgb(var(--site-gold-line-rgb)/.16);color:var(--site-accent)}
body:not(#art) #data-drawer-segmented .seg-row-pills button.active{
  background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent);font-weight:700;
}
/* 同一张卡里的第二、第三个小节标题和上一段贴得太近（元素的最后一行紧挨着「模式」），拉开一点 */
body:not(#art) #data-drawer-body .em-mode-box + .em-mode-box,
body:not(#art) #data-drawer-body .em-mode-grid > * + *{margin-top:1.25rem}

/* 栏里和全屏工作台（回归盘、关系盘、龙头盘）里的小卡、输入框、提示块：方角。
   只列装内容的块和填字的框；里面能点的小按钮不在这里，它们是圆头的 */
body:not(#art) :is(#data-drawer-body,#ret-ws-overlay,#rel-ws-overlay,#draco-ws-overlay,#dyn-side)
  :is(.hell-heliacal-row,.phase-lookup-input,.lots-set-note,.stars-method,.tmp-summary,.tmp-card,
      .tmp-detail,.fd-wrap,.rws-select,.rws-loc,.coord-row,input,select){
  border-radius:var(--art-radius);
}
/* 各处的小按钮和分段开关：两头全圆，金色细线，选中用浅金底 */
body:not(#art) :is(.lots-tg-btn,.rws-tl-btn,.rws-asp-pill,.rels-swap-btn,.rws-chip-label,.tmp-kw){
  border-radius:var(--art-pill);font-family:var(--serif);letter-spacing:.12em;
}
body:not(#art) :is(.lots-tg-btn,.rws-tl-btn,.rws-asp-pill,.rels-swap-btn){border-color:var(--art-line);color:var(--site-plate-ink);background:transparent}
body:not(#art) :is(.lots-tg-btn,.rws-tl-btn,.rws-asp-pill,.rels-swap-btn):hover{background:rgb(var(--site-gold-line-rgb)/.16);color:var(--site-accent)}
body:not(#art) :is(.lots-tg-btn,.rws-asp-pill).active{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent);font-weight:700}
/* 分段开关和左栏的盘型是同一种东西：圆头轨道，选中的那一段点亮；段与段之间不画竖线 */
body:not(#art) :is(.fd-toggle,.rws-seg){border-radius:var(--art-pill);border-color:var(--art-line);background:transparent;padding:2px}
body:not(#art) :is(.fd-toggle,.rws-seg) :is(button,.cm-btn){border:0;border-radius:var(--art-pill);font-family:var(--serif);letter-spacing:.1em;color:var(--site-plate-ink)}
body:not(#art) :is(.fd-toggle,.rws-seg) :is(button,.cm-btn).active{background:var(--site-gold-soft);color:var(--site-accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--art-line)}

/* ══ 八、弹层：新建表单、设定、资料库和其余弹窗 ════════════════════════ */
body:not(#art) :is(.form-card,.settings-popup,.modal-panel){
  border-radius:var(--art-radius);border-color:var(--art-line);
  box-shadow:0 2.25rem 3.5rem -1.75rem rgb(40 30 12/.5);
}
body:not(#art) .form-card{box-shadow:0 1.5rem 2rem -1.75rem rgb(60 45 20/.42)}
body:not(#art) .settings-popup .sp-title,
body:not(#art) .modal-panel .modal-head h3{
  font-family:var(--serif);font-weight:600;letter-spacing:.3em;color:var(--site-gold);
  /* 手机上标题和搜索框挤在一行，字距拉开后标题会被压成一字一行，所以不许它折行 */
  white-space:nowrap;flex:0 0 auto;
}
@media (max-width:480px){
  body:not(#art) .modal-panel .modal-head h3{letter-spacing:.06em;font-size:1rem}
}
/* 填字的框是方角的（像印好的表格），能点的按钮是圆头的 */
body:not(#art) :is(.form-card,.settings-popup,.modal-panel) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea),
body:not(#art) :is(.form-card,.settings-popup,.modal-panel) .coord-row{
  border-radius:var(--art-radius);
}
body:not(#art) :is(.form-card,.settings-popup,.modal-panel) :is(.dst-pill,.modal-btn){border-radius:var(--art-pill)}
body:not(#art) :is(.form-card,.settings-popup,.modal-panel) .gen-btn{border-radius:50%}
/* 点进输入框：边线换成一道 2px 的深色线（1px 的边加紧贴着的 1px 影）。原来是金边外面隔 1px 再套一圈，读成两道框。
   透明的 outline 是留给系统「高对比度」模式的：那种模式不画影子，只认 outline */
body:not(#art) :is(.form-card,.settings-popup,.modal-panel) :is(input:not([type="checkbox"]):not([type="radio"]),select,textarea):focus,
body:not(#art) .ci-notes-text:focus{
  border-color:var(--site-accent);box-shadow:0 0 0 1px var(--site-accent);outline:2px solid transparent;outline-offset:0;
}
/* 表单里的按钮：确定是深青的长圆章，其余是细线的长圆章 */
body:not(#art) .form-card :is(.btn-pair,.btn-newchart,.btn-paste,button[onclick*="adb"],button[onclick*="ADB"]){
  border-radius:var(--art-pill);font-family:var(--serif);letter-spacing:.2em;
  background:transparent;border-color:var(--art-line);color:var(--site-plate-ink);
}
body:not(#art) .form-card :is(.btn-pair,.btn-newchart,.btn-paste,button[onclick*="adb"],button[onclick*="ADB"]):hover{
  background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent);
}
body:not(#art) .form-card .btn-pair.primary{
  background:var(--site-plate);border-color:var(--site-plate);color:var(--site-on-plate);letter-spacing:.4em;text-indent:.4em;
}
body:not(#art) .form-card .btn-pair.primary:hover{background:var(--site-plate-deep);border-color:var(--site-plate-deep);color:var(--site-on-plate)}

/* ══ 九、行运／太阳弧／次限模式：时间条和左栏那几个小按钮跟上同一套 ════ */
body:not(#art) .dyn-cursor .dc-btn{border-color:var(--art-line);color:var(--site-plate-ink)}
body:not(#art) .dyn-cursor .dc-btn:hover{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent)}
body:not(#art) .dyn-cursor .dc-btn.dc-now{
  width:1.625rem;height:1.625rem;padding:0;letter-spacing:0;border-radius:50%;font-family:var(--serif);font-size:.75rem;font-weight:700;
  background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent);
  margin:0 .25rem 0 .1875rem;
}
body:not(#art) .dyn-cursor .dc-divider{
  width:.375rem;height:.375rem;margin:0 .1875rem;background:transparent;border:1px solid var(--art-line);transform:rotate(45deg);
}
body:not(#art) .dyn-cursor #dyn-date{font-family:var(--serif);letter-spacing:.05em}
body:not(#art) .ci-subject .dyn-stamp-label{font-family:var(--serif);letter-spacing:.24em;color:var(--site-gold)}
body:not(#art) .ci-subject .dyn-stamp-time{font-family:var(--serif);font-weight:500;letter-spacing:.05em;font-variant-numeric:tabular-nums lining-nums}
body:not(#art) .ci-subject .dyn-pill{
  border-radius:var(--art-pill);background:transparent;border-color:var(--art-line);color:var(--site-plate-ink);
  font-family:var(--serif);letter-spacing:.14em;
}
body:not(#art) .ci-subject .dyn-pill:hover{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent)}

/* ══ 十、手机和窄屏（≤768px）：外卡是方角画框，里面的按钮是圆头的 ══════════ */
@media (max-width:768px){
  body:not(#art).embed:not(.chrome-journal):not(.chrome-lite) .container{padding-left:.5rem;padding-right:.5rem}
  body:not(#art).embed:not(.chrome-journal):not(.chrome-lite) .card.chart-integrated{
    padding:.25rem;border-radius:var(--art-radius);border-color:var(--art-line);
    box-shadow:0 1.5rem 1.75rem -1.75rem rgb(60 45 20/.42);
  }
  /* 盘型：和电脑上一样的圆头轨道，选中的那一格点亮；格子之间不画竖线 */
  body:not(#art) .chart-integrated .chart-mode-dock{border-radius:var(--art-pill);border-color:var(--art-line);box-shadow:none}
  body:not(#art) .chart-mode-dock #chart-mode-toggle{border-radius:var(--art-pill)}
  body:not(#art) .chart-mode-dock #chart-mode-toggle .cm-btn{
    border:0;border-radius:var(--art-pill);font-family:var(--serif);letter-spacing:.1em;color:var(--site-plate-ink);background:transparent;
  }
  body:not(#art) .chart-mode-dock #chart-mode-toggle .cm-btn.active{
    background:var(--site-gold-soft);color:var(--site-accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--art-line);
  }
  /* 行运／次限／太阳弧顶上的时间条：手机一行放不下，原来折成两行时把前后两个箭头拆散了，
     第二行还压到盘上（这一条的高度是写死的）。改成两行：日期在上，下面是五枚单位、两个箭头和「今」。
     手机上按钮默认最矮 36px，会把这些圆章拉成椭圆，所以这里宽高都写明 */
  body:not(#art)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor{
    display:grid;grid-template-columns:repeat(5,auto);justify-content:center;align-items:center;
    gap:.25rem .375rem!important;height:auto;padding:.125rem 0 .375rem;
  }
  body:not(#art)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor #dyn-date{
    grid-column:1/-1;grid-row:1;justify-self:center;width:11rem;text-align:center;font-size:.875rem;
    /* 日期下面原来画着一道金线，2026-10-12 夜去掉了；边留成透明的，这一条的高度不变 */
    border-bottom:1px solid transparent;border-radius:0;padding-bottom:.125rem;
  }
  /* 外面那圈圆头细线只包住这两行，不撑满整行：撑满的话两头会顶到外卡的画框 */
  body:not(#art)[data-dyn-mode]:not([data-dyn-mode="dial90"]) #ci-controlbar-pill{width:auto!important;padding:.125rem 1.125rem}
  body:not(#art)[data-dyn-mode] .ci-controlbar-pill > .dyn-cursor .tu-seg .tu-unit{width:1.875rem;height:1.875rem;min-height:0;font-size:.8125rem}
  body:not(#art)[data-dyn-mode] .ci-controlbar-pill > .dyn-cursor .dc-btn{width:2rem;height:2rem;min-width:0;min-height:0;padding:0!important}
  /* 「!」：手机上所有按钮最矮 36px，它原来只有 18px 宽，被拉成了竖椭圆；宽也给到 36px，成一枚正圆 */
  body:not(#art) .chart-mode-dock .chart-tutor-btn{width:2.25rem;height:2.25rem;margin:0 0 0 .125rem;border-color:var(--art-line);font-size:.875rem}
  body:not(#art) .chart-integrated .ci-subject{border-radius:var(--art-radius);border-color:var(--art-line);box-shadow:none}
  body:not(#art) .chart-integrated > .data-launcher{border-radius:var(--art-radius);border-color:var(--art-line)}
  body:not(#art) .chart-integrated > .data-launcher button{
    border-radius:var(--art-radius);font-family:var(--serif);letter-spacing:.1em;color:var(--site-plate-ink);
  }
  body:not(#art) .chart-integrated > .data-launcher button.active{background:var(--site-plate);border-color:var(--site-plate);color:var(--site-on-plate)}
}

/* ══ 十一、手机首屏：一屏之内是星盘、铭牌、一排页签，底栏五个入口 ══════════
   2026-10-12 Steven 两轮意见。第一轮：下半部「给人一种凌乱感」，要「隐藏起来又好找到」——
   于是首屏只留星盘和铭牌，其余收进底栏。第二轮（真机看过）：外卡右边比左边宽出一截；盘不够大，
   「重心都在此刻天象上了」；相位表要往下滑才看得到，「能在一个界面就尽量不要下拉」；
   「设定」藏在「更多」里不合适。这一节按第二轮重排：
   · 外卡撑满屏宽，左右各留 6px；盘铺满外卡，铭牌的字缩小一档；
   · 页签多一个「星盘」，四个页签共用盘所在的那块地方，点哪个看哪个，不用下滑；
   · 底栏是新建、资料库、工具、时间、设定；「修改」是名字旁边的小圆章。
   body.m-dock-on 由 chart-modules/mobile-dock.js 在手机宽度下加上；脚本没加载就整节不生效，
   页面退回原来的排法。 */
body:not(#art) :is(.m-dock,.m-scrim,.m-edit,.m-tools-foot,.mt-chart)[hidden]{display:none!important}

/* 底栏：日间和页头同一块深青，上下把纸面夹在中间。最底下 12px 是留给主站页脚露出的那一条的。
   夜间照 AstroGold 的底栏：比页面亮一档的近黑（#191919）、灰字，选中的那一格用夜间的金色 */
body:not(#art).m-dock-on .m-dock{
  --dock-bg:var(--site-plate);--dock-ink:var(--site-on-plate);--dock-accent:var(--site-on-plate-accent);
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  height:4.25rem;padding:0 .25rem .75rem;background:var(--dock-bg);color:var(--dock-ink);
  border-top:1px solid var(--art-line);
  box-shadow:0 -1rem 1.5rem -1.25rem rgb(20 30 36/.55);
}
html[data-theme="night"] body:not(#art).m-dock-on .m-dock{--dock-bg:#191919;--dock-ink:#a59e89;--dock-accent:var(--site-accent)}
body:not(#art).m-dock-on .m-dock button{
  appearance:none;-webkit-appearance:none;border:0;background:none;margin:0;padding:.375rem 0 0;color:inherit;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1875rem;
  font-family:var(--serif);font-size:.6875rem;letter-spacing:.16em;line-height:1.3;
  -webkit-tap-highlight-color:transparent;
}
body:not(#art).m-dock-on .m-dock svg{width:1.375rem;height:1.375rem;flex:none}
body:not(#art).m-dock-on .m-dock button span{text-indent:.16em}
/* 五个里只让「新建」不一样：新来的人第一件事就是排自己的盘 */
body:not(#art).m-dock-on .m-dock button[data-m="new"]{color:var(--dock-accent)}
body:not(#art).m-dock-on .m-dock button:active{background:rgb(255 255 255/.08)}
body:not(#art).m-dock-on .m-dock button[aria-expanded="true"]{color:var(--dock-accent);box-shadow:inset 0 5px 0 -3px var(--dock-accent)}
body:not(#art).m-dock-on .m-dock button:focus-visible{outline:2px solid var(--dock-accent);outline-offset:-4px}
/* 行运、次限、太阳弧自带顶部的时间条，底栏的「时间」在这些模式里用不上 */
body:not(#art).m-dock-on[data-dyn-mode] .m-dock{grid-template-columns:repeat(4,minmax(0,1fr))}
body:not(#art).m-dock-on[data-dyn-mode] .m-dock button[data-m="time"]{display:none}

/* 外卡上有一条 perspective（给早年的翻面动画用的，现在没有脚本再触发它）。带 perspective 的元素
   会把里面 position:fixed 的东西圈在自己范围内，工具抽屉和时间条就贴不到屏幕底部，所以这里关掉 */
body:not(#art).m-dock-on .chart-integrated{perspective:none}

/* —— 外卡：撑满屏宽、撑满一屏 ——
   原来外面那层排版规则是「内容靠左、按内容宽度收缩」（电脑上两栏并排时用的），到了手机上外卡就不撑满：
   390 宽的屏右边空 20px，428 宽的空 58px，左边都是 8px。让它占满，左右各 6px。
   高度至少一屏（屏高减去底栏），里面的东西上下摊开：盘和铭牌居中，页签贴在底栏上方。 */
body:not(#art).m-dock-on .main-content{width:100%}
/* 「新建」「修改」的表单卡是同一个毛病：Safari 内核里它按内容收成 376px，右边空 46px、左边 6px。同样撑满 */
body:not(#art).m-dock-on .form-sidebar{width:100%}
body:not(#art).m-dock-on .container{height:auto;min-height:100dvh;padding:.25rem .375rem 4.625rem!important}
/* min-height 和 padding 要带 !important：chart.css 的手机段里给外卡写了带 !important 的 auto 和 .5rem */
body:not(#art).m-dock-on .card.chart-integrated{
  gap:0!important;min-height:calc(100dvh - 4.875rem)!important;height:auto;max-height:none;margin:0;padding:.375rem .25rem .25rem!important;overflow:visible;
}
/* 星盘下面原来的按钮和工具卡：从页面里拿掉，入口都在底栏 */
body:not(#art).m-dock-on .ci-subject .ci-actions{display:none!important}
/* 盘型那一排末尾的「!」（看盘指引）：Steven 2026-10-12 夜说它放在这一排「放到哪里都会破坏美感」。手机上从这里拿掉，
   入口挪到工具抽屉最后一行，和横屏看盘、留言这两样不常用的排在一起（mobile-dock.js 里 data-m="tutor"）。
   要带 !important：这枚按钮显不显示是脚本直接写在它身上的 */
body:not(#art).m-dock-on .chart-mode-dock .chart-tutor-btn{display:none!important}
/* 盘型轨道下面的叠层选项（界、映点…）是点开才出现的一行：出现时把盘往下让，不压在盘上 */
body:not(#art).m-dock-on .chart-mode-dock:has(#ov-menu.show){margin-bottom:2.875rem}

/* —— 星盘：这一屏的主作品 ——
   盘铺满外卡的宽（428 宽的屏上，圆的直径从 311px 到 371px）。盘上面原来留着 32px 给叠层选项，收掉。
   图的高度按画布自己的比例走（原来硬撑成正方形，上下各白留一条）。
   矮屏幕上一屏放不下时盘先让一点，最多让到屏宽的 74%，再矮就往下滑着看。
   --m-stage-h 是盘实际占的高度：外卡内宽（屏宽减 22px）按画布比例算出来的高，和上面说的上限，两者取小。
   18.25rem 是盘以外那几样加起来的高度：盘型一排、铭牌、页签、底栏和它们之间的留白。
   「74%」封顶在 320px：手机（宽 432px 以内）不受影响；电脑上把窗口拉窄到六七百宽、又不高的时候，
   屏宽的 74% 比整屏还高，盘会把页签顶到屏幕外面去。 */
body:not(#art).m-dock-on{--m-stage-h:min(calc((100vw - 1.375rem) * 591 / 613),max(min(74vw,20rem),calc(100dvh - 18.25rem)))}
/* 一屏里多出来的高度原来对半分在「盘型那一排和盘之间」「铭牌和页签之间」：盘悬在中间、离上面远，下面又紧贴着铭牌
   （Steven 2026-10-12 夜：盘「和顶栏的空间太大，和下面的此刻天象又太挤」）。现在盘紧跟在盘型那一排下面，
   多出来的高度对半分在「盘和铭牌之间」「铭牌和页签之间」 */
body:not(#art).m-dock-on:not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-chart{padding:0!important;gap:0!important;margin-top:1.125rem}
/* 2026-10-13 Steven 真机：天顶那枚「MC」顶到盘型那一排的下沿了，「最忌讳的就是挤在一起」。盘往下让 18px
   （MC 小牌离上面那一排 21px），铭牌上面也多留 8px，不跟盘贴着；页签上面最少留 8px。这 24px 加在上面 --m-stage-h 的那个常数里。 */
body:not(#art).m-dock-on:not(.m-panel):not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-subject{margin-top:auto;padding-top:.75rem!important}
body:not(#art).m-dock-on:not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-chart #chart{
  aspect-ratio:613/591;margin:0 auto!important;max-height:var(--m-stage-h)!important;
}

/* —— 铭牌：画下面的说明牌，字比原来小一档，不和盘抢 ——
   三行：名字（旁边是「修改」）、日期和地点并排（地名长了自己折行）、最小的一行是时区和宫制。
   三列的格子是为了让名字正好在屏幕中线上，「修改」挂在它右边而不把它挤偏。 */
body:not(#art).m-dock-on .chart-integrated .ci-subject{
  display:grid;grid-template-columns:minmax(3.5rem,1fr) minmax(0,auto) minmax(3.5rem,1fr);align-items:center;
  /* padding 带 !important：chart.css 手机段里给这块写了带 !important 的 .5rem */
  border:0;background:transparent;box-shadow:none;padding:.25rem .375rem .125rem!important;text-align:center;
}
/* 90°盘：页面自带的样式把外卡锁成一屏高，铭牌排成一列、限高、放不下时从上面裁（是给电脑左栏定的）。
   到了手机上，428×770 的屏名字和日期整段被裁掉看不见，名字旁的「修改」落到单独一行、被压成 4px 高。
   手机上这一页本来就要往下滑（外卡下面还有指针、谐波那一块），不用锁一屏：外卡和铭牌的高度跟着内容走，
   铭牌和别的盘型一样用三列格子。
   铭牌最底下那排分析页签（行星树、太阳弧、句子）在手机上原来被挤得只剩十几像素高、内容一行都露不出来；
   高度放开后它会撑出一千多像素，把下面的指针和谐波顶得很远。手机上把它挪到盘下面，和指针那一块合成一排页签
   （见第十七节；挪位置是 mobile-dock.js 的 placeDialRail 做的）。 */
body:not(#art).m-dock-on[data-dyn-mode="dial90"] .card.chart-integrated{height:auto!important;max-height:none!important}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] .chart-integrated .ci-subject{display:grid!important;max-height:none!important;overflow:visible;flex:none}
/* 指针、谐波那一块排在外卡所在那一层的外面。给底栏让的 74px 原来留在两者中间（空出一截），
   而这一块自己的最后 68px 反被底栏盖住。把留白挪到整页的最下面
   （写在 body 的内边距上：写成这一块的下外边距会和 body 的合并掉，页面不会因此变长） */
body:not(#art).m-dock-on[data-dyn-mode="dial90"] .container{min-height:0;padding-bottom:.25rem!important}
body:not(#art).m-dock-on[data-dyn-mode="dial90"]:not(.mobile-landscape-focus){padding-bottom:4.625rem}
body:not(#art).m-dock-on .ci-subject > *{grid-column:1/-1}
body:not(#art).m-dock-on .ci-subject > .subject-name{
  grid-column:2;justify-content:center;margin:0;font-size:1.0625rem;letter-spacing:.2em;line-height:1.6;
}
/* 字距会在最后一个字后面多出一截，收回来名字才在正中 */
body:not(#art).m-dock-on .ci-subject .subject-name .name-text{flex:0 1 auto;margin-right:-.2em}
body:not(#art).m-dock-on .ci-subject > .m-edit{
  grid-column:3;grid-row:1;justify-self:start;position:relative;margin:0 0 0 .625rem;
  appearance:none;-webkit-appearance:none;min-height:0;padding:.0625rem .5rem .0625rem .5625rem;cursor:pointer;
  border:1px solid var(--art-line);border-radius:var(--art-pill);background:var(--bg-card);color:var(--site-plate-ink);
  font-family:var(--serif);font-size:.6875rem;font-weight:500;letter-spacing:.2em;line-height:1.5;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
body:not(#art).m-dock-on .ci-subject > .m-edit svg{display:none}
/* 看着是一枚小章，能点的范围往外扩到 44px 高 */
body:not(#art).m-dock-on .ci-subject > .m-edit::before{content:"";position:absolute;inset:-.75rem -.5rem}
body:not(#art).m-dock-on .ci-subject > .m-edit:active{background:var(--site-gold-soft);color:var(--site-accent)}
body:not(#art).m-dock-on .ci-subject > .m-edit:focus-visible{outline:2px solid var(--site-accent);outline-offset:3px}
body:not(#art).m-dock-on .ci-subject .subject-meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .75rem;line-height:1.5;
}
/* 行运、次限这些盘型下，铭牌里多出来的「自定义」「资料库」两枚：上面的字是居中的，它们也居中 */
body:not(#art).m-dock-on .ci-subject .dyn-actions{justify-content:center}
body:not(#art).m-dock-on .ci-subject .subject-meta .rs-date{font-size:.875rem;letter-spacing:.04em;line-height:1.5;margin:0}
body:not(#art).m-dock-on .ci-subject .subject-meta .rs-place{font-size:.8125rem;letter-spacing:.08em;line-height:1.5}
body:not(#art).m-dock-on .ci-subject .subject-meta .rs-place .rs-coords{font-size:.75rem;margin-left:.375rem}
body:not(#art).m-dock-on .ci-subject .subject-meta .rs-tech{flex:0 0 100%;font-size:.625rem;letter-spacing:.14em;line-height:1.6;margin:0}
/* 铭牌下面那道金线菱形：手机上紧接着就是页签的金线，两道线叠在一起，收掉这一道 */
body:not(#art).m-dock-on .ci-subject .subject-meta::after{display:none}

/* —— 页签：星盘、相位、特殊、笔记，共用盘所在的那块地方 ——
   手机一屏放不下盘和相位表（428 宽的屏上两样加起来 730px 高，可用的只有 690px），原来的排法是把表接在
   铭牌下面往下滑。现在页签留在首屏，点「相位」盘原地换成相位表，点「星盘」换回来。
   body.m-panel 表示「现在看的不是盘」，由 chart.html 的 setMontage 加减。
   做法：手机上把页签和面板从它们共同的外层里放出来各自排位——面板排到盘的位置，页签排在铭牌下面。
   只在本命圆盘下这样做；方盘、90°盘、行运这些有自己的排法，不动。 */
body:not(#art).m-dock-on:not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-montage{display:contents}
body:not(#art).m-dock-on:not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-montage-tabs{
  /* 上面的 8px 是页签和铭牌之间最少留的空（屏幕矮、auto 分不到高度的时候也不贴在一起） */
  order:6;align-self:center;width:auto;margin:auto 0 0;padding:.5rem 0 .375rem;gap:0;font-size:.875rem;overflow:visible;
  /* 不画通栏底线：紧挨着就是外卡的画框，三道线挤在一起。只留选中那一格的短线和菱形 */
  border-bottom-color:transparent;
}
body:not(#art).m-dock-on:not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-montage-tabs button{
  min-width:4.625rem;min-height:2.625rem;padding:.5rem .5rem .5625rem!important;text-align:center;letter-spacing:.3em;text-indent:.3em;
}
/* 看盘的时候亮的是「星盘」这一格；面板里选中的那一格（默认是相位）先不亮 */
body:not(#art).m-dock-on:not(.m-panel) .ci-montage-tabs button.active:not(.mt-chart){color:var(--text-dim);font-weight:500}
body:not(#art).m-dock-on:not(.m-panel) .ci-montage-tabs button.active:not(.mt-chart)::before,
body:not(#art).m-dock-on:not(.m-panel) .ci-montage-tabs button.active:not(.mt-chart)::after{content:none}
body:not(#art).m-dock-on:not(.m-panel) .ci-montage-tabs .mt-chart{color:var(--text);font-weight:700}
body:not(#art).m-dock-on:not(.m-panel) .ci-montage-tabs .mt-chart::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--site-accent);
}
body:not(#art).m-dock-on:not(.m-panel) .ci-montage-tabs .mt-chart::before{
  content:"";position:absolute;left:50%;bottom:-.25rem;width:.4375rem;height:.4375rem;z-index:1;
  transform:translateX(-50%) rotate(45deg);background:var(--bg-card);border:1px solid var(--site-accent);
}
/* 面板：平时收着；选了相位、特殊或笔记，盘收起，面板出现在盘的位置，至少和盘一样高，所以下面的铭牌和页签不会跳。
   矮屏幕上盘让过高度之后相位表会比它高：这时面板跟着表长高、整页往下滑，不在面板里面套一层滚动 */
body:not(#art).m-dock-on:not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-montage-stage{display:none!important}
/* 横屏看盘时这两条不生效：横屏只看盘。人停在「相位」时把手机横过来，不能因为盘被收着就得到一屏空白；
   竖回来还在原来那个页签上 */
body:not(#art).m-dock-on.m-panel:not(.mobile-landscape-focus):not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-chart{display:none!important}
body:not(#art).m-dock-on.m-panel:not(.mobile-landscape-focus):not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-montage-stage{
  display:flex!important;order:3;flex:0 0 auto!important;align-items:center;justify-content:center;
  width:100%;min-height:var(--m-stage-h)!important;margin:auto 0 0!important;padding:0!important;overflow:visible;
}
/* 铭牌（名字、日期、地点那三行）只跟着盘出现：看相位、特殊、笔记的时候收起（Steven 2026-10-12 夜：「此刻天象等信息，
   只有在星盘这个 tab 显示」）。只收里面的三样，铭牌这层壳留着：点底栏「时间」冒出来的那条时间条是挂在它里面的。
   腾出来的高度给面板：面板从「至少和盘一样高」改成占满页签上面剩下的地方，笔记的输入框、特殊那一页都跟着变高 */
body:not(#art).m-dock-on.m-panel:not(.mobile-landscape-focus):not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-subject > :is(.subject-name,.m-edit,.subject-meta){display:none}
body:not(#art).m-dock-on.m-panel:not(.mobile-landscape-focus):not([data-dyn-mode]) .chart-integrated:not(.is-square) .ci-montage-stage{flex:1 0 auto!important}
/* 相位表的格子按屏宽算：十四列正好排满外卡（390 宽的屏每格 26px，428 宽的 29px），不再被右边裁掉 */
/* 只管首屏面板里的这一张表（.ci-montage-stage 里的）；关系盘、龙盘弹窗里的相位表用的是同一套类名，尺寸由弹窗自己定 */
/* 另外两个上限管的是拉窄的电脑窗口（宽 560px 以上）：格子最大 38px；表（十三行）不高过盘那一块，页签就不会被顶下去。
   手机上起作用的一直是第一项；最后一项不低于 26px，矮手机上宁可往下滑一点也不把度数缩到看不清 */
body:not(#art).m-dock-on[data-asp-style="4"] .ci-montage-stage{--m-asp-cell:min(calc((100vw - 1.75rem) / 14),2.375rem,max(1.625rem,calc(var(--m-stage-h) / 13)));--asp-cell:var(--m-asp-cell)}
body:not(#art).m-dock-on[data-asp-style="4"] .chart-integrated .ci-montage-stage .ci-aspect .asp-tri .asp-sym-lg:not(.pcol-asc):not(.pcol-mc){font-size:calc(var(--m-asp-cell) * .58)!important}
body:not(#art).m-dock-on .ci-montage-stage :is(.ci-aspect,#asp-grid-content){flex:none;overflow:visible;margin:0!important;padding:0}
body:not(#art).m-dock-on[data-asp-style="4"] .chart-integrated .ci-montage-stage .ci-aspect .asp-tri{width:calc(var(--m-asp-cell) * 14)!important;margin:0!important}
body:not(#art).m-dock-on[data-asp-style="4"] .chart-integrated .ci-montage-stage .ci-aspect .asp-tri td,
body:not(#art).m-dock-on[data-asp-style="4"] .chart-integrated .ci-montage-stage .ci-aspect .asp-tri th.asp-rowlbl{
  width:var(--m-asp-cell)!important;height:var(--m-asp-cell)!important;min-width:var(--m-asp-cell)!important;
  min-height:var(--m-asp-cell)!important;max-height:var(--m-asp-cell)!important;
}
/* 特殊、笔记：铺满面板，内容长了在面板里滚 */
body:not(#art).m-dock-on.m-panel .ci-montage-stage :is(.ci-special,.ci-notes).active{padding:.75rem .875rem!important;overflow-y:auto}

/* 时间条：平时不出现；点底栏「时间」后贴在底栏上方，拨时间的时候星盘一直在眼前 */
body:not(#art).m-dock-on .ci-subject .chart-date-bar{display:none!important}
body:not(#art).m-dock-on.m-time-open:not([data-dyn-mode]) .ci-subject .chart-date-bar{
  display:flex!important;position:fixed;left:0;right:0;bottom:4.25rem;z-index:59;margin:0!important;
  padding:.5rem .5rem;justify-content:center;align-items:center;flex-wrap:nowrap;gap:.375rem;
  background:var(--bg-card);border-top:1px solid var(--art-line);
  box-shadow:0 -1rem 1.5rem -1.25rem rgb(40 30 12/.5);
}
body:not(#art).m-dock-on.m-time-open .ci-subject .chart-date-bar .cdb-btn{width:2.5rem;height:2.5rem}
body:not(#art).m-dock-on.m-time-open .ci-subject .chart-date-bar .cdb-btn.cdb-now{width:2.5rem;padding:0;margin:0 .1875rem;font-size:.9375rem}
/* 五枚圆章各 2rem，合起来和原来的五个长条一样宽：390px 的屏上这一排刚好放下，再宽就折行 */
body:not(#art).m-dock-on.m-time-open .ci-subject .chart-date-bar .tu-seg .tu-unit{width:2rem;height:2rem;padding:0;font-size:.875rem}
body:not(#art).m-dock-on.m-time-open .ci-subject .chart-date-bar .cdb-divider{display:none}

/* 工具抽屉：就是原来那张工具卡，改成从底栏上方升起的一层 */
body:not(#art).m-dock-on .chart-integrated > .data-launcher{
  position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:4.25rem!important;z-index:59!important;
  /* 最高到盘型那一排的下沿（屏高减 8rem）：方盘下抽屉有三组加一行小字，共 472px，
     390 宽的手机上原来的「屏高的 72%」差 23px 放不下，最后一行要在抽屉里再滚一下 */
  width:auto!important;max-height:min(calc(100dvh - 8rem),33rem);overflow-y:auto!important;margin:0!important;
  /* 二十等分：上面「本命」一组每枚占四份（一行五枚），下面「推运」一组每枚占五份（一行四枚） */
  display:grid!important;grid-template-columns:repeat(20,minmax(0,1fr));gap:.875rem 0!important;
  padding:.875rem .5rem .75rem!important;
  background:var(--bg-card);border:0;border-top:1px solid var(--art-line);border-radius:0;
  box-shadow:0 -1.25rem 2rem -1.25rem rgb(40 30 12/.6);
  transform:translateY(calc(100% + 4.5rem))!important;visibility:hidden;
  transition:transform .28s cubic-bezier(.2,.7,.2,1),visibility 0s .28s;
}
body:not(#art).m-dock-on.m-tools-open .chart-integrated > .data-launcher{
  transform:none!important;visibility:visible;transition:transform .28s cubic-bezier(.2,.7,.2,1);
}
body:not(#art).m-dock-on .chart-integrated > .data-launcher::before,
body:not(#art).m-dock-on .chart-integrated > .data-launcher .dl-divider::after{
  grid-column:1/-1;display:block;font-family:var(--serif);font-size:.75rem;letter-spacing:.3em;color:var(--site-gold);
}
body:not(#art).m-dock-on .chart-integrated > .data-launcher::before{content:"本命 · 看这张盘";padding:0 .5rem .125rem}
body:not(#art).m-dock-on .chart-integrated > .data-launcher .dl-divider{
  grid-column:1/-1;width:auto!important;min-width:0;height:auto!important;margin:.5rem 0 0!important;padding-top:.75rem;opacity:1;transform:none;
  background:none!important;border:0;border-top:1px solid var(--art-line-soft);
}
body:not(#art).m-dock-on .chart-integrated > .data-launcher .dl-divider::after{content:"推运 · 关系 · 地图";padding:0 .5rem}
html[lang="en"] body:not(#art).m-dock-on .chart-integrated > .data-launcher::before{content:"Natal";letter-spacing:.12em}
html[lang="en"] body:not(#art).m-dock-on .chart-integrated > .data-launcher .dl-divider::after{content:"Timing · Relationships · Maps";letter-spacing:.12em}
/* 方盘下抽屉里是另外三组（chart.css「方盘 launcher 顺序重排」）：第二组是方盘自己的几样分析，第三组是推运。
   原来两道分隔线都写着「推运 · 关系 · 地图」 */
body:not(#art).m-dock-on[data-chart-mode="square"] .chart-integrated > .data-launcher .dl-divider-1::after{content:"方盘分析"}
body:not(#art).m-dock-on[data-chart-mode="square"] .chart-integrated > .data-launcher .dl-divider-2::after{content:"推运"}
html[lang="en"] body:not(#art).m-dock-on[data-chart-mode="square"] .chart-integrated > .data-launcher .dl-divider-1::after{content:"Traditional analysis"}
html[lang="en"] body:not(#art).m-dock-on[data-chart-mode="square"] .chart-integrated > .data-launcher .dl-divider-2::after{content:"Timing"}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > .dl-divider ~ button{grid-column:span 5}
/* 英文名字长（Considerations、Temperament），一行五枚放不下 */
html[lang="en"] body:not(#art).m-dock-on .chart-integrated > .data-launcher > button{grid-column:span 5}
/* 每个工具是一枚圆章，名字写在章下面——和电脑右侧那一列是同一套，只是多了字。
   圆章就是按钮里的那个图标：给图标加内边距和圆边，不用另加标签 */
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button{
  grid-column:span 4;flex-direction:column;align-items:center;justify-content:flex-start;gap:.4375rem;
  width:auto!important;min-width:0!important;height:auto!important;min-height:0;padding:.1875rem 0 0!important;
  border:0!important;border-radius:0!important;background:none!important;box-shadow:none;
  color:var(--site-plate-ink);font-family:var(--serif);font-size:.75rem;letter-spacing:.04em;white-space:normal;
}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button svg{
  box-sizing:border-box;width:2.875rem;height:2.875rem;padding:.8125rem;flex:none;
  border:1px solid var(--art-line);border-radius:50%;background:var(--site-raised);
}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button .dl-label{font-size:.75rem;letter-spacing:.04em;line-height:1.3}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button:active svg{background:var(--site-gold-soft)}
/* 开着的那个工具：章填成深青；字不变色（原来整块变深青，字跟着反白） */
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button.active{color:var(--site-plate-ink)!important}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button.active .dl-label{color:var(--site-plate-ink)!important;font-weight:700}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button.active svg{
  background:var(--site-plate);border-color:var(--site-plate);color:var(--site-on-plate);
}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button:focus-visible{outline:0}
body:not(#art).m-dock-on .chart-integrated > .data-launcher > button:focus-visible svg{outline:2px solid var(--site-accent);outline-offset:4px}
/* 抽屉最后一行：横屏看盘、留言。两样不常用，写成一行小字，中间一颗菱形 */
body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot{
  /* order：方盘下抽屉里的工具是用 order 1–12 重排过的，这一行不写 order 就会插到最前面那一枚后面 */
  grid-column:1/-1;order:99;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 1.5rem;
  margin-top:.25rem;padding-top:.5rem;border-top:1px solid var(--art-line-soft);
}
/* 英文的三项比中文长一倍，390 宽的屏上两头被裁掉（独立审稿量出来的）：字距和间隔收小，再窄就折到第二行 */
html[lang="en"] body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot{gap:0 1.125rem}
html[lang="en"] body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot button{padding:0 .25rem!important;letter-spacing:.04em}
body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot button{
  appearance:none;-webkit-appearance:none;width:auto!important;height:auto!important;min-width:0!important;min-height:2.75rem;
  margin:0;padding:0 .5rem!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none;cursor:pointer;
  color:var(--site-plate-ink);font-family:var(--serif);font-size:.8125rem;letter-spacing:.2em;
}
/* 「看盘指引」只有圆盘和行运这几种盘有，别的盘型下脚本给它加 hidden；上面那条 appearance 之类的规则不会盖掉 hidden，这里写明白 */
body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot button[hidden]{display:none}
body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot button + button{position:relative}
body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot button + button::before{
  content:"";position:absolute;left:-.9375rem;top:50%;width:.375rem;height:.375rem;margin-top:-.1875rem;
  transform:rotate(45deg);border:1px solid var(--art-line);
}
body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot button:active{color:var(--site-accent)}
body:not(#art).m-dock-on .chart-integrated > .data-launcher .m-tools-foot button:focus-visible{outline:2px solid var(--site-accent);outline-offset:-2px}
body:not(#art).m-dock-on .m-scrim{position:fixed;left:0;right:0;top:0;bottom:0;z-index:58;background:rgb(20 30 36/.38)}
/* 夜间的遮罩不带蓝：日间那支深青盖在近黑的页面上会把盘染出一层蓝 */
html[data-theme="night"] body:not(#art).m-dock-on .m-scrim{background:rgb(0 0 0/.5)}
@media (prefers-reduced-motion:reduce){
  body:not(#art).m-dock-on .chart-integrated > .data-launcher{transition:none!important}
}

/* —— 手机上的其他盘型：方盘、90°盘、行运 ——
   外卡撑满之后这几种盘都跟着变大了，这里只收拾排版上的毛病 */
/* 面板那一格在电脑上往左挪了 12px（让相位表的太阳对着格线），手机上是通栏的，挪了就左右不齐 */
body:not(#art).m-dock-on .chart-integrated .ci-montage-stage{margin-left:0!important}
/* 方盘：盘上面原来空着 150px、只悬着一颗「本年运势」，收成盘型下面紧挨着的一行；
   铭牌和「格局点」之间 87px 的空白（面板外层锁了最小高度）也收掉 */
body:not(#art).m-dock-on .chart-integrated.is-square .ci-chart{padding:0!important;gap:0!important}
body:not(#art).m-dock-on .chart-integrated.is-square #year-fortune-bar{margin:.5rem auto .375rem!important}
body:not(#art).m-dock-on .chart-integrated.is-square .ci-montage{min-height:0!important;margin-top:.625rem!important}
/* 行运、次限、太阳弧的相位表：十三列加一列行首，格子按屏宽算，整张表正好排满，不用横着拖 */
body:not(#art).m-dock-on{--m-bi-cell:min(calc((100vw - 3.75rem) / 13),2.375rem)}
/* 宽度交回给格子去定：全局有一条 table{width:100%}，表被拉满后四舍五入多出 1px，就冒出一条横向滚动条 */
body:not(#art).m-dock-on table.bi-mat{--bi-cell:var(--m-bi-cell);width:auto;margin:0 auto}
body:not(#art).m-dock-on table.bi-mat td.bi-cell{width:var(--m-bi-cell)!important;height:var(--m-bi-cell)!important;min-width:var(--m-bi-cell)!important}
/* 表头这两条要带 !important：chart.css 里给表头写了带 !important 的 2rem */
body:not(#art).m-dock-on table.bi-mat th.bi-colax{width:var(--m-bi-cell)!important;max-width:var(--m-bi-cell)}
body:not(#art).m-dock-on table.bi-mat th.bi-rowax{height:var(--m-bi-cell)!important;line-height:var(--m-bi-cell)}
/* 笔记的输入框：手机上字号小于 16px 的输入框一点就会把整页放大，放大后不会自己缩回去 */
body:not(#art).m-dock-on #ci-notes-text{font-size:1rem}
/* 设定弹层（手机）：黄道系统那个下拉框的选项字多，比别的框宽出一截顶到画框外面；勾选框是系统的亮蓝 */
body:not(#art).m-dock-on .settings-popup select{width:100%;min-width:0;max-width:100%}
/* 设定里的「容许度」（Steven 2026-10-12 夜，真机）：「参差不齐，要整齐划一」。原来每颗星是「符号、名字、下拉框」挤成一小串、
   一串一串往后排：名字被挤成一字一行，下拉框的宽度跟着名字长短走，左边也对不齐。
   手机上这一行改成上下排（「容许度」三个字在上，格子占满整行）。
   光圈容许度两列，每格里三样东西各占固定的位置：符号一列、名字一列、下拉框一列，上下都对得齐。
   相位容许度每条多一个勾选框和一个角度、名字也长（「补十二分相」），一行放一条：勾选框｜符号｜名字｜角度｜下拉框。
   这一行用 :has(.s-classical-orbs) 认，不能用 .s-orbs：月亮交点、莉莉丝那两行的单选也套着同一个类名 */
body:not(#art).m-dock-on .settings-popup .s-row:has(.s-classical-orbs){display:block}
body:not(#art).m-dock-on .settings-popup .s-row:has(.s-classical-orbs) > .s-label{margin-bottom:.375rem}
body:not(#art).m-dock-on.orb-classical .settings-popup .s-classical-orbs,
body:not(#art).m-dock-on.orb-modern .settings-popup .s-modern-orbs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;padding:.5rem 0 .75rem;
}
body:not(#art).m-dock-on.orb-modern .settings-popup .s-modern-orbs{grid-template-columns:minmax(0,1fr)}
body:not(#art).m-dock-on .settings-popup :is(.s-classical-orbs,.s-modern-orbs) .opair{
  display:grid;grid-template-columns:1.375rem minmax(0,1fr) 4.5rem;align-items:center;gap:.375rem;white-space:nowrap;font-size:.8125rem;
}
body:not(#art).m-dock-on .settings-popup .s-modern-orbs .opair{grid-template-columns:1.25rem 1.75rem minmax(0,1fr) auto 4.5rem}
body:not(#art).m-dock-on .settings-popup :is(.s-classical-orbs,.s-modern-orbs) .opair > span{text-align:center}
body:not(#art).m-dock-on .settings-popup :is(.s-classical-orbs,.s-modern-orbs) .opair > select{width:100%;min-height:2.5rem;padding:.25rem .5rem}

/* —— 横屏看盘 ——
   这一屏只看盘（外层给了「工具／返回星盘／退出横屏」三颗按钮）。原来底栏还留在屏幕一侧，压住盘的下沿；
   上面给竖屏排版写的外卡留白、盘的高度上限在这里也不该生效。 */
body:not(#art).m-dock-on.mobile-landscape-focus :is(.m-dock,.m-scrim){display:none!important}
body:not(#art).m-dock-on.mobile-landscape-focus .container{min-height:0;padding:0!important}
body:not(#art).m-dock-on.mobile-landscape-focus .card.chart-integrated{min-height:0!important;padding:0!important}
body:not(#art).m-dock-on.mobile-landscape-focus .chart-integrated .ci-chart{margin-top:0}
body:not(#art).m-dock-on.mobile-landscape-focus .chart-integrated .ci-chart #chart{aspect-ratio:auto;max-height:calc(100dvh - .5rem)!important}

/* ══ 十二、相位表：颜色跟圆盘走，淡金格线，衬线度数，符号不带影 ══════════════
   2026-10-12 Steven：相位表里符号大小不一，「和整体有些不太搭，核心在色调上」，手机上「不要重影」。
   量出来的原因有三样：① 格线是冷的深灰蓝、度数是等宽字、刑冲是纯红，和纸色金线的页面不是一套；
   ② 同一颗星在盘上和表里颜色不同（表里另抄了一份旧色板）；③ 每个符号后面压着一层灰影。
   这里不动格子的排法（左列贴线、对角符号、太阳顶头是 5 月逐条定的），只换线、色、字。
   刑冲、六分、合相取圆盘相位线的那三支（chart.html 的 aspCol），盘上的线和表里的符号是同一个颜色；三分相例外，见下。 */
/* 三分相单独一支绿色：圆盘上三分、六分的线是同一支蓝，表里 Steven 要三分保持绿色（2026-10-12 他看了改成蓝的那版后定的）。
   用的是这张表原来的那支绿（#4F7F6B）；夜间见下一条。 */
body:not(#art){--asp-hard:#A35F5A;--asp-soft:#5A6BA0;--asp-trine:#4F7F6B;--asp-conj:#86715A;--asp-minor:var(--site-wheel-minor)}
/* 夜间跟盘上那组走（AstroGold 的深色盘）：刑冲珊瑚红、六合青；三合用偏黄的绿，免得和青混在一起 */
html[data-theme="night"] body:not(#art){--asp-hard:#EF8784;--asp-soft:#94D3D4;--asp-trine:#A0CD84;--asp-conj:#CEAC86;--asp-minor:#A59E89}
body:not(#art)[data-wheel-template="mono"]{--asp-hard:#000;--asp-soft:#000;--asp-trine:#000;--asp-conj:#000;--asp-minor:#000}
html[data-theme="night"] body:not(#art)[data-wheel-template="mono"]{--asp-hard:#FFF;--asp-soft:#FFF;--asp-trine:#FFF;--asp-conj:#FFF;--asp-minor:#FFF}

/* 格线：淡金细线。空格子的线再淡一档，有相位的格子自己就亮出来了 */
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri :is(td,th){border-color:rgb(var(--site-gold-line-rgb)/.72)!important}
/* 符号和度数都不带影：小字上的影子在手机的高分屏上读成重影 */
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri td.asp-cell > span,
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri :is(th.asp-rowlbl,td.asp-diag) .asp-sym-lg,
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri td.asp-cell::after{text-shadow:none!important}
/* 相位符号：刑冲仍比三分六分重一档（5 月定的主次），但不再用纯红和加粗描边去喊 */
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri .asp-sym-red{color:var(--asp-hard)!important;-webkit-text-stroke:.35px currentColor!important}
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri .asp-sym-blue{color:var(--asp-soft)!important;-webkit-text-stroke:0!important}
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri .asp-sym-green{color:var(--asp-trine)!important;-webkit-text-stroke:0!important}
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri .asp-sym-brown{color:var(--asp-conj)!important}
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri .asp-sym-gray{color:var(--asp-minor)!important}
/* 度数：和盘上的度数同一套衬线数字（EB Garamond）。原来是 7px 的等宽字，10°50′S 这种七个字的会顶出格子 */
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri td.asp-cell::after{
  font-family:"EB Garamond",Georgia,serif!important;font-weight:500!important;font-size:calc(var(--asp-cell) * .33)!important;
  font-variant-numeric:tabular-nums lining-nums;letter-spacing:0!important;color:var(--site-wheel-line)!important;bottom:2px!important;
}
/* 格子有几档大小（宽屏 32px、一般 26px、矮窗口和手机按窗口算），度数的字号取格宽的三分之一：
   最长的「10°50′S」七个字在哪一档都排得进一格 */
body:not(#art)[data-asp-style="4"]{--asp-cell:1.625rem}
@media (min-width:1401px){body:not(#art)[data-asp-style="4"]{--asp-cell:2rem}}
@media (min-width:769px) and (max-height:820px){
  body:not(#art)[data-asp-style="4"].embed:not(.chrome-journal):not(.chrome-lite):not([data-dyn-mode]){--asp-cell:var(--compact-aspect-cell)}
}
/* 上升、中天：左列和对角原来一个是 AC 一个是 Ac，字体也不同。统一成盘上小牌那种大写小字 */
body:not(#art)[data-asp-style="4"] .chart-integrated .ci-aspect .asp-tri :is(.pcol-asc,.pcol-mc){
  font-family:var(--site-font-sans)!important;font-size:.625rem!important;font-weight:700!important;
  letter-spacing:.04em!important;text-transform:uppercase!important;
}
/* 行运、次限、太阳弧、关系盘的那张方表（bi-mat）：和上面的本命相位表同一套——
   不带影，相位三色同圆盘，度数用同一套衬线数字、同一支暖灰，格线是淡金细线 */
body:not(#art) table.bi-mat td.bi-cell :is(.bi-asp,.bi-orb),
body:not(#art) table.bi-mat :is(.bi-rc-pl,.bi-rc-lot,.bi-rc-ax){text-shadow:none!important}
body:not(#art) table.bi-mat td.bi-cell,
body:not(#art) table.bi-mat td.bi-cell.bi-empty{border-color:rgb(var(--site-gold-line-rgb)/.5)!important}
body:not(#art) table.bi-mat td.bi-cell:has(.asp-sym-red) .bi-asp{color:var(--asp-hard)!important}
body:not(#art) table.bi-mat td.bi-cell:has(.asp-sym-blue) .bi-asp{color:var(--asp-soft)!important}
body:not(#art) table.bi-mat td.bi-cell:has(.asp-sym-green) .bi-asp{color:var(--asp-trine)!important}
body:not(#art) table.bi-mat td.bi-cell:has(.asp-sym-brown) .bi-asp{color:var(--asp-conj)!important}
body:not(#art) table.bi-mat td.bi-cell:has(.asp-sym-gray) .bi-asp{color:var(--asp-minor)!important}
/* 度数的字号取格宽的三成，不许折行：这张表的度数比本命表多一个空格（「2°30′ A」），格子窄的时候会折成两行压到符号上 */
body:not(#art) table.bi-mat{--bi-cell:2rem}
body:not(#art) table.bi-mat td.bi-cell .bi-orb{
  font-family:"EB Garamond",Georgia,serif!important;font-weight:500!important;font-size:calc(var(--bi-cell) * .3)!important;letter-spacing:0!important;
  font-variant-numeric:tabular-nums lining-nums;color:var(--site-wheel-line)!important;bottom:3px!important;white-space:nowrap;
}
/* 页签贴着表。表所在的那一格原来锁了 468px 高、表贴在格子底，页签和表之间空出一截
   （电脑上 50–130px，手机上 124px）。改成格子就是表那么高；相位这一层没选中时也留在原位撑着高度
   （只是看不见），所以切到「特殊」「笔记」页签不会上下跳。矮窗口放不下时格子照旧自己滚动。 */
body:not(#art)[data-asp-style="4"] .ci-montage-stage{min-height:0!important;flex:0 1 auto!important}
body:not(#art)[data-asp-style="4"] .ci-montage-stage .ci-aspect{position:relative!important;inset:auto!important;margin-top:0!important}
body:not(#art)[data-asp-style="4"] .ci-montage-stage .ci-aspect:not(.active){visibility:hidden}
body:not(#art)[data-asp-style="4"] .ci-montage-stage :is(.ci-special,.ci-notes).active{overflow-y:auto}
/* 没选中的那两层是透明地叠在表上面的，内容比表长的话会把这一格撑出一段空滚动（矮窗口里看得到滚动条），裁掉。
   方盘除外：方盘下「格局点」就排在这一层里，而且不带 active */
body:not(#art)[data-asp-style="4"] .chart-integrated:not(.is-square) .ci-montage-stage :is(.ci-special,.ci-notes):not(.active){overflow:hidden}
/* 电脑上面板那一格整体往左挪了 12px（让相位表的太阳对着格线），「特殊」「笔记」的内容跟着偏到页签左边线的外面，补回来 */
@media (min-width:769px){
  body:not(#art)[data-asp-style="4"] .ci-montage-stage :is(.ci-special,.ci-notes).active{padding-left:.8125rem!important}
}
/* 页签和表之间留一行的空，只在窗口够高时留：矮窗口（笔记本 768 高那一档）里表是按剩余高度刚好排下的，多 14px 末行就被挤出去 */
@media (min-height:821px){
  body:not(#art)[data-asp-style="4"] .ci-montage-tabs{margin-bottom:.875rem}
}

/* ══ 十三、几处零碎 ═══════════════════════════════════════════════════
   方盘下面只放「格局点」。切方盘之前页签要是停在「笔记」，笔记那一层还盖在上面，两样叠在一起，所以方盘下收掉它 */
body:not(#art) .chart-integrated.is-square .ci-montage-stage .ci-notes{display:none!important}
/* 行运、太阳弧、次限、回归盘画的也是圆盘。原来进了这几种，盘型那一排四格没有一格是亮的，不知道自己在哪；
   让「圆盘」保持点亮，再点它回到本命盘 */
body:not(#art):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"],[data-dyn-mode="solar-return"]) .chart-mode-dock #chart-mode-toggle #chart-mode-circle{
  background:var(--site-gold-soft);color:var(--site-accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--art-line);
}
/* 方盘上的「本年运势」：和别的长圆章一个样子 */
body:not(#art) .year-fortune-btn{
  border-color:var(--art-line);background:var(--bg-card);color:var(--site-plate-ink);box-shadow:none;
  font-family:var(--serif);letter-spacing:.24em;text-indent:.24em;
}
body:not(#art) .year-fortune-btn:hover{background:var(--site-gold-soft);border-color:var(--site-gold);color:var(--site-accent);box-shadow:none;transform:none}
/* 设定里的勾选框和单选：用页面自己的深青，不用系统的亮蓝 */
body:not(#art) .settings-popup :is(input[type="checkbox"],input[type="radio"]){accent-color:var(--site-plate)}
/* 夜间勾选框用浅金：夜里的色块色是深橄榄，勾上以后在深底上几乎看不出来 */
html[data-theme="night"] body:not(#art) :is(.settings-popup,#ret-ws-overlay,#rel-ws-overlay) :is(input[type="checkbox"],input[type="radio"]){accent-color:var(--site-accent)}
/* 行运、太阳弧、次限（电脑）左栏的相位表：格子原来固定 32px，连表头一共 476px 高。1440×900 的窗口里
   它上面的铭牌和按钮占了 386px，表的最后两行（上升、中天）落到外卡下边缘之外，被裁掉，也滚不到。
   让表所在的那一行只占外卡剩下的高度，格子按这段高度算（最大 34px、最小 24px），十四行都排在卡里。
   不认 cqh 的旧浏览器保持原样。
   只管 1025px 以上：再窄（769–1024）这几种盘是另一种排法，表挪到盘下面、整页往下滚（chart.css「小电脑和平板的双盘」），
   外卡的高度跟着内容走；这里的做法要外卡有个定下来的高度，套上去表那一格会塌成 0、整张表不见 */
@supports (height:1cqh){
  @media (min-width:1025px){
    body:not(#art).embed:not(.chrome-journal):not(.chrome-lite):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"]) .chart-integrated{grid-template-rows:auto minmax(0,1fr)}
    body:not(#art).embed:not(.chrome-journal):not(.chrome-lite):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"]) #ci-dyn-grid{
      align-self:stretch;min-height:0;container-type:size;display:flex;flex-direction:column;justify-content:safe flex-end;
    }
    /* 窗口矮到格子缩到最小（24px）还放不下时（这一格不足 406px 高），表自己上下滚，不再被外卡裁掉。
       只在这种时候才滚：滚动的框会把鼠标悬停时冒出来的那条说明也裁掉（最右一列的会少半句），平时不能加 */
    @container (max-height:25.5rem){
      body:not(#art).embed:not(.chrome-journal):not(.chrome-lite):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"]) #ci-dyn-grid > #dyn-bi-grid{
        flex:0 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;
      }
    }
    /* 表的宽度交回给格子定（全局有一条 table{width:100%} 会把格子横向拉开），再居中 */
    body:not(#art).embed:not(.chrome-journal):not(.chrome-lite):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"]) #ci-dyn-grid table.bi-mat{
      --dyn-cell:clamp(1.5rem,min(calc((100cqh - 5.875rem) / 13),calc((100cqw - 1.75rem) / 13)),2.125rem);--bi-cell:var(--dyn-cell);width:auto;margin:0 auto;
    }
    body:not(#art).embed:not(.chrome-journal):not(.chrome-lite):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"]) #ci-dyn-grid table.bi-mat td.bi-cell{
      width:var(--dyn-cell)!important;height:var(--dyn-cell)!important;min-width:var(--dyn-cell)!important;
    }
    body:not(#art).embed:not(.chrome-journal):not(.chrome-lite):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"]) #ci-dyn-grid table.bi-mat th.bi-rowax{height:var(--dyn-cell)!important;line-height:var(--dyn-cell)}
    body:not(#art).embed:not(.chrome-journal):not(.chrome-lite):is([data-dyn-mode="transit"],[data-dyn-mode="solar-arc"],[data-dyn-mode="secondary"]) #ci-dyn-grid table.bi-mat th.bi-colax{width:var(--dyn-cell)!important;max-width:var(--dyn-cell)}
  }
}

/* ══ 十四、手机：回归盘、关系盘、龙盘三个工作区 ══════════════════════════
   原来的排法是把电脑上的三栏竖着摞起来：设置在最上面占一屏多，两张盘缩在下面，428 宽的屏上一张只有
   一百二三十像素，Steven 说「根本就看不了」（2026-10-12 晚）。
   现在和首页同一个办法：顶上一排页签，一次只放一样，盘都是满宽的大盘，紧贴在页签下面；
   盘的说明和要点的按钮排在盘下面（和首页「盘在上、铭牌在下」一样，手也够得着）。
   两页的盘在同一个位置，来回点「回归盘｜本命盘」盘不跳，能对着看。
   看的是哪一样记在工作区自己的 data-mview 上（main 主盘｜natal 本命盘｜cfg 设置），由 mobile-dock.js 的 wsView 改。
   手机横过来看盘（mobile-landscape-focus）有自己的一套排法，这里不管。 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay){
  flex-direction:column!important;overflow-x:hidden;overflow-y:auto!important;overscroll-behavior:contain;
}
/* —— 顶栏：左边返回，中间页签（和首页「星盘｜相位｜特殊｜笔记」同一个样子）—— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) .rws-mbar{
  position:sticky;top:0;z-index:6;order:0;flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:2.75rem;padding:0 .25rem;background:var(--site-surface);border-bottom:1px solid var(--art-line);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) .rws-mback{
  justify-self:start;display:inline-flex;align-items:center;gap:.125rem;height:2.75rem;padding:0 .5rem 0 .375rem;white-space:nowrap;
  border:0;background:transparent;color:var(--text-dim);font-family:var(--serif);font-size:.875rem;letter-spacing:.12em;cursor:pointer;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) .m-tabs{display:flex}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) .m-tabs button{
  position:relative;min-width:min(4.625rem,19vw);height:2.75rem;padding:0 .375rem;border:0;background:transparent;white-space:nowrap;
  color:var(--text-dim);font-family:var(--serif);font-size:.875rem;font-weight:500;letter-spacing:.3em;text-indent:.3em;text-align:center;cursor:pointer;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) .m-tabs button[aria-selected="true"]{color:var(--text);font-weight:700}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) .m-tabs button[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--site-accent);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) .m-tabs button[aria-selected="true"]::before{
  content:"";position:absolute;left:50%;bottom:-.25rem;width:.4375rem;height:.4375rem;z-index:1;
  transform:translateX(-50%) rotate(45deg);background:var(--site-surface);border:1px solid var(--site-accent);
}

/* 用键盘（外接键盘、读屏）走到这些手机专用的按钮上时，画一圈看得见的框 */
body:not(#art).m-dock-on :is(.m-tabs button,.rws-mback,.rws-mgo,.rels-mwho,.ar-mseg button,.der-tab,.m-dyn-back):focus-visible{outline:2px solid var(--site-accent);outline-offset:-3px}

/* —— 三页各放什么 —— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="cfg"] .rws-main,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="natal"] .rws-cfg,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="main"] .rws-cell-natal,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="natal"] :is(.rws-cell-right,.rws-year-strip,.rws-meta){display:none!important}

/* —— 看盘的两页 ——
   盘、盘的说明、年份条、按钮原来分在几层壳里（两张盘各一格，格子里又分表头和说明，年份条在格子外面）。
   手机上让这几层壳都不占位（display:contents），里面的东西直接排进同一张格子：
     第一行  盘（满宽）
     第二行  左边一枚小工具｜盘的说明｜右边「相位表」
     再往下  备注、年份条、拨时间的那一条、三档切换，各占一行
   「相位表」「内外互换」原来想压在盘的空角上，量过会和盘外圈的「MC」小牌碰上（中天偏右三十度上下时），所以放在说明两边 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-main{
  position:relative;order:1;flex:0 0 auto!important;display:grid!important;
  /* 两边各一格放按钮、中间放说明。两边写成 1fr（不是 minmax(0,1fr)）：格子最窄也有里面那枚按钮宽，
     屏窄的时候让的是中间的说明（自己折行），按钮不会被挤到说明上面去。屏够宽时两边一样宽，说明正好在屏幕中线上。
     两边不能写 minmax(max-content,1fr)：盘、年份条这些通栏的东西也会按自己的「最宽」去撑这两格，中间只剩一百来像素 */
  grid-template-columns:1fr minmax(0,auto) 1fr;
  grid-template-areas:"wheel wheel wheel" "tool meta pills" "note note note" "strip strip strip" "cursor cursor cursor" "seg seg seg";
  align-items:center;gap:0 .5rem!important;width:100%!important;min-height:0!important;padding:.375rem .375rem 0!important;overflow:visible;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-charts,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="main"] .rws-cell-right,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="natal"] .rws-cell-natal,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-cell > .rws-cell-head,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-cell > .rws-cell-head > .rws-head-left{display:contents!important}
/* 盘：满宽，高度跟着盘自己的比例走（单盘、双盘、三盘画布的宽高比不一样） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-svg-wrap{
  grid-area:wheel;display:block!important;width:100%!important;max-width:none!important;max-height:none!important;
  aspect-ratio:auto!important;margin:0!important;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-svg-wrap > svg{
  width:100%!important;height:auto!important;max-width:100%!important;max-height:var(--ws-wheel-max)!important;margin:0!important;
}
/* 盘最高到多少：屏高减掉盘以外的东西（--ws-rest：顶栏、说明、年份条、按钮加起来的高度），这样矮一点的手机也尽量一屏放完；
   但最矮不低于屏宽的 74%（和首页同一条底线），再矮的手机宁可往下滑一点，盘不再缩。
   428×770 的屏上这个上限比盘本来的高度大，不起作用。「本命盘」那一页用和主盘同一个数，两页的盘一样大，来回点不跳 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay,#draco-ws-overlay){--ws-wheel-max:max(min(74vw,20rem),calc(100dvh - var(--ws-rest)))}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay{--ws-rest:15rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rws-mode-overlay #ret-ws-overlay[data-mview="main"]{--ws-rest:20.25rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay{--ws-rest:15.25rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay[data-mview="main"]{--ws-rest:20.25rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay{--ws-rest:6.5rem}
/* 盘的说明：是哪一次回归、几点几分、在哪里 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) :is(.rws-cell-meta,.rels-cell-meta,#rels-right-chip){
  grid-area:meta;justify-self:center;position:static!important;display:block!important;height:auto!important;max-width:none!important;min-height:0;
  padding:0!important;margin:.5rem 0 0!important;text-align:center!important;font-size:.75rem;line-height:1.5;color:var(--text-dim);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-cell-meta .rws-meta-col{white-space:normal!important}
/* 本命盘的说明：日期和地名一行，经纬度另起一行，行尾不挂一个孤零零的间隔点 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-cell-meta .meta-coord{display:block;margin-left:0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-cell-meta .meta-coord .meta-dot{display:none}
/* 说明两边的小工具 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) :is(#rws-right-pills,#rels-right-pills,.rws-cell-natal .rws-asp-pill){
  grid-area:pills;justify-self:end;position:static!important;height:auto!important;margin:.5rem 0 0!important;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) :is(#rws-bi-swap-btn,#rels-syn-swap,.rws-cell-natal .rws-tl-btn){
  grid-area:tool;justify-self:start;position:static;margin:.5rem 0 0!important;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay,#draco-ws-overlay) :is(.rws-asp-pill,.rws-bi-swap-toggle,.rels-swap-btn,.rws-tl-btn){
  min-height:2rem;padding:.25rem .625rem;font-size:.75rem;white-space:nowrap;
}
/* 回归盘的相位表按钮：电脑上写的是哪两张盘（「回归⇄本命」），手机上三档都只写「相位表」，样子也和单盘那一档一样。
   五个字的那枚有 107px 宽，和「内外互换」（88px）、两行说明（170px）排不进 390 宽的一行，会压住说明里的钟点
   （独立审稿量出来的：360 宽压 18px）。是哪两张盘，下面三档切换里亮着的那一格已经写着 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rws-right-pills .rws-pill-pair{display:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rws-right-pills .rws-pill-short{display:inline}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rws-right-pills .rws-asp-pill.active{
  background:transparent;border-color:var(--art-line);color:var(--site-plate-ink);font-weight:500;
}
/* 360 宽的手机：「内外互换」和「相位表」左右各收 2px，中间那两行说明刚好排得下，不用折成三行 */
@media (max-width:22.5rem){
  body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay :is(.rws-asp-pill,.rws-bi-swap-toggle){padding-left:.5rem;padding-right:.5rem}
}
/* 「本命盘」这枚名牌和页签重复，收掉 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-cell-natal .rws-chip-label{display:none}
/* 备注（用了置换地时写一行） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-meta{grid-area:note;margin:.25rem 0 0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-meta:empty{display:none}
/* 年份条：几张回归盘平分一行 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-strip{grid-area:strip;gap:.375rem;padding:0;margin:.5rem 0 0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-chip{flex:1 1 0;min-width:0;min-height:2.75rem;padding:.25rem .125rem;gap:0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-nav{min-height:2.75rem;padding:0 .75rem;font-size:1rem}
/* 三档切换：占满一行 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-cell .rws-seg{grid-area:seg;display:flex;margin:.5rem 0 0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-cell .rws-seg button{flex:1 1 0;min-height:2.25rem;padding:0 .25rem;font-size:.8125rem}

/* —— 看盘那一页：设置栏这层壳不占位，里面的东西都收起来，只有关系盘把「比对｜组合｜戴维森」那一排放出来（见下面关系盘那一段）。
   回归盘原来还在盘下面留了一行「行星」下拉；Steven 2026-10-13：「设置里有，这里就不要了」，去掉。 —— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="main"] .rws-cfg{display:contents!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="main"] .rws-cfg > *{display:none!important}

/* —— 设置那一页 —— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="cfg"] .rws-cfg{
  order:1;width:100%!important;padding:1.125rem 1.125rem 1.5rem;border-right:0;overflow:visible;
}
/* 顶栏已经有「返回」，设置栏自己那一枚收掉 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-cfg > .rws-back-btn{display:none!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="cfg"] .rws-mgo{
  display:block;align-self:stretch;min-height:2.875rem;margin-top:.75rem;border:1px solid var(--site-plate);border-radius:var(--art-pill);
  /* 和新建表单里的「确定」同一枚深青长圆章 */
  background:var(--site-plate);color:var(--site-on-plate);font-family:var(--serif);font-size:.9375rem;letter-spacing:.4em;text-indent:.4em;cursor:pointer;
}
/* 行运⇄回归那一档多一条拨行运时间的：排法和首页的时间条一样，日期一行，下面一行是五枚单位、前后两个箭头和「今」。
   电脑上它是压在盘顶中间的，手机上排在年份条下面，不盖盘 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay #rws-ov-cursor-top[style*="inline-flex"]{
  grid-area:cursor;justify-self:center;position:static!important;transform:none!important;
  display:grid!important;grid-template-columns:repeat(5,auto);justify-content:center;align-items:center;gap:.125rem .375rem!important;
  height:auto;margin:.5rem 0 0!important;padding:.125rem min(1rem,3vw) .25rem;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay #rws-ov-cursor-top #rws-ov-date-top{
  grid-column:1/-1;grid-row:1;justify-self:center;width:13rem;max-width:100%;height:1.75rem;min-height:0;text-align:center;
  border:0;border-radius:0;background:transparent;padding:0;font-family:var(--serif);letter-spacing:.05em;color:var(--text);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay #rws-ov-cursor-top .tu-seg .tu-unit{width:min(2rem,7.6vw);height:2rem;min-height:0;padding:0;font-size:.875rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay #rws-ov-cursor-top .dc-btn{width:min(2.125rem,8vw);height:2.125rem;min-width:0;min-height:0;padding:0!important}
/* 这一档的说明里原来还有一段行运的时刻：下面那条拨时间的已经写着，说明里就不重复了 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rws-mode-overlay #ret-ws-overlay #rws-right-meta .rws-meta-col + .rws-meta-col{display:none}

/* —— 关系盘工作区自己的几样 —— */
/* 看盘那一页：盘下面是「内外互换｜这是哪种合盘｜相位表」，再一行写关系人 B 是谁，最下面是比对、组合、戴维森三档 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay .rws-main{grid-template-columns:auto minmax(0,1fr) auto}
/* 底色带 !important：夜间有一条给所有小标签上深色底的规则（chart.css，也带 !important），不压住的话这行说明字后面夜里会多出一块深色方块 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay #rels-right-chip{
  max-width:none;border:0;border-radius:0;background:transparent!important;box-shadow:none;font-family:var(--serif);font-size:.8125rem;font-weight:500;letter-spacing:.06em;color:var(--text);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay #rels-right-pills{flex-wrap:nowrap!important;gap:.25rem!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay #rels-right-meta{grid-area:note;max-width:none;margin:.25rem 0 0!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay #rels-right-meta:empty{display:none!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="main"] .rels-mwho{
  grid-column:1/-1;justify-self:center;display:block;max-width:100%;min-height:2rem;margin:.375rem 0 0;padding:.25rem .875rem;
  border:1px dashed var(--art-line);border-radius:var(--art-pill);background:transparent;color:var(--text-dim);
  font-family:inherit;font-size:.75rem;line-height:1.4;text-align:center;cursor:pointer;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="main"] .rws-cfg > #rels-type-seg{
  display:flex!important;order:2;align-self:stretch;margin:.5rem .375rem .5rem;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="main"] .rws-cfg > #rels-type-seg button{flex:1 1 0;min-height:2.25rem;padding:0 .25rem;font-size:.8125rem}
/* 第三盘开着时东西多一组（相位表四枚：A·B、B·A、C·A、C·B，外加一条拨时间的），换一种排法：
     盘 → 这是哪种合盘 → 第三盘是什么时刻 → 「内外互换」和四枚相位表一行 → 拨时间的一行
   只管「关系盘」那一页。「本命盘」那一页不受第三盘影响，照常用上面那张格子：这张格子里没有给「本命 A｜本命 B」
   留位置，原来没限定页签，第三盘开着时点「本命盘」，那一排被挤到格子外面，盘从 378px 缩到 255px（独立审稿查出来的） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay[data-mview="main"] .rws-main{
  grid-template-areas:"wheel wheel wheel" "meta meta meta" "note note note" "tool pills pills" "cursor cursor cursor" "who who who";
  /* 最后一行（关系人 B 是谁）拿走多出来的高度，那一枚在里面上下居中；见二十七节 */
  grid-template-rows:auto auto auto auto auto minmax(3.5rem,1fr);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay #rels-right-meta{margin:.125rem 0 0!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay .rws-cell-right :is(.rws-chip-label,.rels-swap-btn,.rws-asp-pill){font-size:.75rem!important;padding:.25rem .5rem!important;gap:.1875rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay #rels-right-pills{gap:.1875rem!important}
/* 很窄的手机（屏宽不到 350px）：「内外互换」只留图标，四枚相位表才排得下 */
@media (max-width:21.875rem){
  body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay #rels-syn-swap{width:2rem;padding:0!important;justify-content:center;font-size:0!important;gap:0}
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay .rels-time-strip{
  grid-area:cursor;justify-self:center;position:static!important;transform:none!important;display:inline-flex!important;flex-wrap:nowrap;
  gap:.1875rem;margin:.5rem 0 0;padding:0;
}
/* 这一排一共十样（五枚单位、两个箭头、日期、日历、「今」）：按屏宽缩，360 宽的手机上也排成一行 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay .rels-time-strip button{min-width:0;width:min(1.875rem,7.4vw);height:1.875rem;min-height:0;padding:0;font-size:.8125rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay .rels-time-strip .tu-seg .tu-unit{width:min(1.75rem,7.2vw);min-width:0;height:1.875rem;padding:0;font-size:.8125rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay .rels-time-strip .date{font-size:.875rem;min-width:min(5.75rem,23vw);padding:0 .125rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay .rels-time-strip .rels-time-divider{display:none}
/* 设置那一页：先选人（关系人 B 那一组排最前），再是类型和第三盘 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="cfg"] .rws-cfg > .m-first{order:-1}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="cfg"] .rws-cfg > .rws-section-label.m-first{margin-top:0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="cfg"] .rws-cfg > .rws-section-label:not(.m-first){margin-top:.875rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="cfg"] .rws-cfg > .rws-mgo{order:9}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay .relb-row input{min-width:0;min-height:2.75rem}

/* —— 龙盘工作区：两张盘一次放一张 —— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay{padding:0!important;gap:0!important;overflow-x:hidden;overflow-y:auto!important;overscroll-behavior:contain}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .draco-ws-top{
  position:sticky;top:0;z-index:6;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-content:normal;
  height:2.8125rem;padding:0 .25rem;background:var(--site-surface);border-bottom:1px solid var(--art-line);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .draco-ws-top .rws-back-btn{
  justify-self:start;height:2.75rem;margin:0;padding:0 .5rem 0 .5rem;font-family:var(--serif);font-size:.875rem;letter-spacing:.12em;color:var(--text-dim);white-space:nowrap;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .rws-charts{display:block!important;flex:0 0 auto!important;padding:.375rem .375rem 1rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay[data-mview="single"] .rws-cell:nth-child(2),
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay[data-mview="bi"] .rws-cell:nth-child(1){display:none!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .rws-cell{display:flex;flex-direction:column;gap:.5rem;min-height:0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .rws-svg-wrap{order:0;flex:none!important;display:block;width:100%!important;height:auto!important;max-width:none;max-height:none;aspect-ratio:auto!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .rws-svg-wrap svg{width:100%!important;height:auto!important;max-height:var(--ws-wheel-max)!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .rws-cell-head{order:1;padding:0;justify-content:center;gap:.75rem}
/* 名牌和页签重复，收掉；剩下「相位表」居中放在盘下面 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #draco-ws-overlay .rws-chip-label{display:none}

/* —— 三个工作区的相位表弹层 ——
   双盘的相位方表十三列，每格 28px 连行首共 406px；原来的弹层只有 354px 宽的地方，最后一列被裁掉要横着拖。
   弹层放宽到和首页外卡一样（左右各留 6px），里面的留白收小 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal,#rel-ws-lib-modal) .rws-asp-card{
  width:calc(100vw - .75rem)!important;max-width:none;max-height:calc(100dvh - 1.5rem)!important;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal) .rws-asp-head{padding:.5rem .625rem .5rem 1rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal) .rws-asp-body{padding:.75rem .25rem 1rem}
/* 方表有几列跟着设定里开了哪些星体走（十三列起，开了福点、小行星就更多）：按列数平分弹层的宽度，多几列也不用横着拖 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal) .rws-asp-body > div:has(> table.bi-mat){width:100%}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal) table.bi-mat{table-layout:fixed;width:100%!important;margin:0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal) table.bi-mat td.bi-cell{width:auto!important;min-width:0!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal) table.bi-mat th.bi-colax{width:auto!important;max-width:none!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-asp-modal,#rel-ws-asp-modal,#draco-ws-asp-modal) table.bi-mat :is(th.bi-corner,th.bi-rowax){width:1.75rem!important;max-width:1.75rem!important;padding-left:0;padding-right:.25rem}

/* 夜间：工作区里那条拨行运时间的原来还是白天的浅色底，夜里是一条刺眼的亮板，上面的日期（浅色字）几乎看不见（电脑手机都一样）。
   换成夜间卡片的深底 */
html[data-theme="night"] body:not(#art) :is(#ret-ws-overlay,#rel-ws-overlay) .dyn-cursor{background:var(--bg-card);border-color:var(--border);box-shadow:none}
html[data-theme="night"] body:not(#art) :is(#ret-ws-overlay,#rel-ws-overlay) .dyn-cursor input{color:var(--text);color-scheme:dark}
/* 夜间有一条规则把工作区里所有按钮都刷成了「卡片底色、灰字」。手机顶栏的返回和页签不要底色，选中的那一格字要亮一档 */
html[data-theme="night"] body:not(#art).m-dock-on :is(#ret-ws-overlay,#rel-ws-overlay) :is(.rws-mback,.m-tabs button){background:transparent!important}
html[data-theme="night"] body:not(#art).m-dock-on :is(#ret-ws-overlay,#rel-ws-overlay) .m-tabs button[aria-selected="true"]{color:var(--text)!important}
/* 夜间：设置页最下面那枚「看回归盘／看关系盘」保持主按钮的样子（同一条规则刷掉的） */
html[data-theme="night"] body:not(#art).m-dock-on :is(#ret-ws-overlay,#rel-ws-overlay) .rws-mgo{
  background:var(--site-plate)!important;border-color:var(--site-plate)!important;color:var(--site-on-plate)!important;
}
/* 夜间：重置盘弹层右上角的关闭键原来写死了浅色底，深色卡片上是一颗白圆。跟着夜间走。
   只管手机：手机上这张弹层夜里是深色的；电脑上它夜里仍是浅色卡片，换成浅字就看不见了（独立审稿查出来的，对比度只有 1.7） */
html[data-theme="night"] body:not(#art).m-dock-on .acg-reloc .ar-close{background:transparent;border-color:var(--border);color:var(--text-dim)}

/* 工作区里的勾选框：用页面自己的深青，不用系统的亮蓝（电脑上也一样） */
body:not(#art) :is(#ret-ws-overlay,#rel-ws-overlay) input[type="checkbox"]{accent-color:var(--site-plate)}

/* ══ 十五、手机：输入框一律 16px ════════════════════════════════════════
   iPhone 的浏览器有个规矩：能打字、能选的框，字小于 16px，一点它整页就被自动放大，放大后不会自己缩回去。
   星盘页里这样的框有一百来个（搜索城市 13px、行运日期 12.5px、设定里的下拉 12.5px……）。Steven 2026-10-12 发来的
   占星地图截图，页头两边都被裁掉，就是整页被放大之后的样子（他是不是点了搜索框我没法确认，但这条规矩是确定的）。
   手机排法下统一 16px。勾选框、单选、滑杆不受这个规矩管，不动。
   只管主站首页嵌的这张盘（.m-dock-on）；日记页里嵌的盘和精简模式有自己的排版，这一轮不动它们。 */
body:not(#art).m-dock-on :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]),select,textarea){
  font-size:16px!important;
  /* 字大了以后，没写明宽度的输入框会自己变宽（浏览器按「二十个字宽」给的默认宽度跟着字号涨）：资料库顶上那个搜索框
     从 212px 涨到 254px，把右上角的关闭键顶到了屏幕外面。让输入框可以让位、最宽不超过所在的那一行 */
  min-width:0;max-width:100%;
}

/* 占星地图是深色底：「返回」和右上角的放大按钮压在地图上，用页面那支深青色的字几乎看不见（电脑手机都一样）。
   换成地图上放大、缩小那几枚按钮同一套：深底、浅字、浅细边 */
body:not(#art).data-mapping #data-drawer :is(.data-drawer-back,.data-drawer-max){
  background:rgba(36,28,52,.78);border-color:rgba(232,225,210,.3);color:rgba(240,229,204,.92);
}
body:not(#art).data-mapping #data-drawer :is(.data-drawer-back,.data-drawer-max):hover{
  background:rgba(36,28,52,.92);border-color:rgb(var(--site-accent-rgb)/.6);color:#F0CFB8;
}

/* ══ 十六、手机：占星地图 ══════════════════════════════════════════════
   地图本身的两处是在 chart.html 里改的：竖屏时地图按高度铺满（原来整张缩成中间一条，428 宽的屏上只有 237px 高），
   点地图取经纬度改用 SVG 自己的换算（原来竖屏上点上海会算成北纬 11°）。这里只管摆放。 */
/* 抽屉顶上原来留着 20px 的米色边和圆角（别的浮卡放标题用的），地图不需要，铺到顶 */
body:not(#art).m-dock-on.data-mapping #data-drawer.data-drawer{padding:0!important;border:0!important;border-radius:0!important}
/* 左上角：返回和搜索框排成一行，不再互相压住（原来搜索框居中，左头盖在「返回」上） */
body:not(#art).m-dock-on.data-mapping #data-drawer .data-drawer-back{top:.5rem;left:.5rem;height:2.25rem;z-index:11}
body:not(#art).m-dock-on.data-mapping .acg-search{top:.5rem;left:4.75rem;right:.5rem;width:auto;height:2.25rem;transform:none}
body:not(#art).m-dock-on.data-mapping .acg-rail{top:3.25rem;left:.5rem;max-height:calc(100% - 3.75rem)}
/* 放大、缩小、复位、迁居四枚：原来只有 24px，手指点不准，放到 36px */
body:not(#art).m-dock-on.data-mapping .acg-zoom-bar{top:3.25rem;left:3rem;gap:.25rem}
body:not(#art).m-dock-on.data-mapping .acg-zoom-bar button{width:2.25rem;height:2.25rem;font-size:1.0625rem}
body:not(#art).m-dock-on.data-mapping .acg-zoom-bar button svg{width:1rem;height:1rem}
/* 收藏的地点那一小块：原来在右上角，手机上正好压在搜索框上。挪到搜索框下面、靠右 */
body:not(#art).m-dock-on.data-mapping .acg-favs-panel{top:3.25rem;right:.5rem;width:min(15rem,calc(100vw - 6.5rem))}
/* 重置盘弹层：铺满地图那一块（四边各留 6px），两张盘一次放一张，先放重置盘。
   原来两张盘上下摞着、本命盘在前，要看的重置盘得往下滑才看得到 */
body:not(#art).m-dock-on .acg-reloc{
  top:.375rem;left:.375rem;right:.375rem;bottom:auto;transform:none;width:auto;max-height:calc(100% - .75rem);
  padding:.625rem .75rem .875rem;border-color:var(--art-line);border-radius:var(--art-radius);background:var(--bg-card);
}
body:not(#art).m-dock-on .acg-reloc .ar-close{top:.5rem;right:.5rem}
/* 弹层开着的时候地图左上角那枚「返回」先收起：它会压在弹层左上角的收藏键上；弹层自己有关闭键 */
body:not(#art).m-dock-on.data-mapping:has(#acg-reloc-card[style*="block"]) #data-drawer .data-drawer-back{display:none}
body:not(#art).m-dock-on .acg-reloc .ar-coord{margin-top:.5rem;padding-bottom:.5rem;font-size:.75rem;text-align:center}
body:not(#art).m-dock-on .acg-reloc .ar-meta{margin-top:.375rem;font-size:.8125rem;text-align:center}
body:not(#art).m-dock-on .acg-reloc .ar-mseg{
  display:flex;margin:.625rem auto 0;padding:2px;max-width:16rem;border:1px solid var(--art-line);border-radius:var(--art-pill);
}
body:not(#art).m-dock-on .acg-reloc .ar-mseg button{
  flex:1 1 0;min-height:2.125rem;border:0;border-radius:var(--art-pill);background:transparent;color:var(--site-plate-ink);
  font-family:var(--serif);font-size:.875rem;letter-spacing:.2em;text-indent:.2em;cursor:pointer;
}
body:not(#art).m-dock-on .acg-reloc .ar-mseg button.active{
  background:var(--site-gold-soft);color:var(--site-accent);font-weight:700;box-shadow:inset 0 0 0 1px var(--art-line);
}
body:not(#art).m-dock-on .acg-reloc .ar-body-2col{display:block;padding-top:.25rem}
body:not(#art).m-dock-on .acg-reloc[data-show="reloc"] .ar-cell-natal,
body:not(#art).m-dock-on .acg-reloc[data-show="natal"] .ar-cell-reloc{display:none}
body:not(#art).m-dock-on .acg-reloc .ar-chart-cell{gap:.25rem}
body:not(#art).m-dock-on .acg-reloc .ar-svg-wrap{order:0;width:100%;max-width:none;aspect-ratio:auto}
/* 盘最高到「屏高减 16.5rem」（弹层里盘以外的东西加起来这么高），整张弹层不用滚；最矮不低于屏宽的 74%（和首页同一条底线） */
body:not(#art).m-dock-on .acg-reloc .ar-svg-wrap svg{width:100%;height:auto;max-height:max(min(74vw,20rem),calc(100dvh - 16.5rem))}
/* 盘的名字上面两枚切换已经写了，这里只留迁居按钮，放在盘下面；按钮带上字（电脑上只有一个箭头，靠鼠标悬停看说明，手机上没有悬停） */
body:not(#art).m-dock-on .acg-reloc .ar-chart-label-row{order:1;min-height:0}
body:not(#art).m-dock-on .acg-reloc .ar-chart-label{display:none}
body:not(#art).m-dock-on .acg-reloc .ar-apply-txt{display:inline}
body:not(#art).m-dock-on .acg-reloc .ar-apply-icon{
  width:auto;height:2.75rem;padding:0 1.5rem;gap:.5rem;border-radius:var(--art-pill);border:1px solid var(--site-plate);
  background:var(--site-plate);color:var(--site-on-plate);font-family:var(--serif);font-size:.9375rem;letter-spacing:.2em;
}

/* ══ 十七、手机：90°盘 ══════════════════════════════════════════════════
   电脑上 90°盘两边各有一块：左栏最下面是「行星树｜太阳弧｜句子」，右边浮着「指针」面板（指针位置、公式、谐波、外圈……）。
   手机上原来只剩指针那一块排在盘下面，左栏那三样没有了（Steven 2026-10-12 晚：把电脑端的都合理地搬过来）。
   现在两块合在盘下面，一排页签「指针｜行星树｜太阳弧｜句子」，点哪个下面换成哪个，和首页的页签一个样子。 */
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-pointer-panel{
  width:auto!important;margin:.375rem .375rem 0!important;padding:0 .875rem 1rem;gap:.875rem;overflow:visible!important;
  border:1px solid var(--art-line);border-radius:var(--art-radius);background:var(--bg-card);box-shadow:none;
  /* 至少一屏高（减去底栏）：四格的内容长短差很多，短的那格（太阳弧可能只有一行）不让整页跟着缩短、页签跳位 */
  min-height:calc(100dvh - 5.125rem);align-content:flex-start;justify-content:flex-start;
}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-pointer-panel > #dial-expert-rail{display:flex;flex:none;margin:0;padding:0;border-top:0}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-tabs{
  justify-content:center;gap:0;margin:0 -.875rem;padding:0;border-radius:0;background:transparent;border-bottom:1px solid var(--art-line);
}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-tab{
  position:relative;flex:0 0 auto;display:block;min-width:min(4.625rem,22vw);height:2.75rem;padding:0 .375rem;border-radius:0;background:transparent;box-shadow:none;
  color:var(--text-dim);font-family:var(--serif);font-size:.875rem;font-weight:500;letter-spacing:.3em;text-indent:.3em;text-align:center;white-space:nowrap;
}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-tab.active{background:transparent;color:var(--text);font-weight:700;box-shadow:none}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-tab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--site-accent)}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-tab.active::before{
  content:"";position:absolute;left:50%;bottom:-.25rem;width:.4375rem;height:.4375rem;z-index:1;
  transform:translateX(-50%) rotate(45deg);background:var(--bg-card);border:1px solid var(--site-accent);
}
/* 夜间有一条规则给这排页签每格都刷了底色（电脑上它们是一排小方块）；手机上是「字加底线」的页签，不要底色 */
html[data-theme="night"] body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-tab{background:transparent!important;border-color:transparent!important}
html[data-theme="night"] body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-tab.active{color:var(--text)!important}
/* 页签下面：选「指针」时放指针面板自己的那几段；选另外三格时只放分析那一块 */
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-stage{display:block;flex:none;margin-top:.875rem}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-expert-rail .der-pane{overflow:visible;max-height:none;padding-right:0}
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-pointer-panel:has(.der-tab-pointer.active) .der-stage,
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #dial-pointer-panel:not(:has(.der-tab-pointer.active)) > :not(#dial-expert-rail){display:none!important}

/* ══ 十八、手机：浮卡里的表 ═══════════════════════════════════════════════
   浮卡（行星状态、气质禀赋、时主推运……）在手机上两边各有两层留白（浮卡 18px、里面的卡片 18px），
   428 宽的屏上留给内容的只有 342px，十一列的表放不下，要横着拖。两层留白各收到 10px 和 12px，内容宽 376px。 */
body:not(#art).m-dock-on:not(.data-mapping) #data-drawer.data-drawer{padding-left:.625rem!important;padding-right:.625rem!important}
body:not(#art).m-dock-on #data-drawer-body .card{padding-left:.75rem!important;padding-right:.75rem!important}

/* —— 行星状态 ——
   「先天尊贵与位置」十一列、「行星状态与主星」六列：原来每列固定 60px／77px（共 656px／464px），在 342px 的框里横着滚。
   改成按内容分宽、排满一行：符号一列二十几像素，黄经和三分性两列宽一点，不用拖 */
body:not(#art).m-dock-on .sch-split-scroll{overflow-x:visible}
body:not(#art).m-dock-on .sch-split-table,
body:not(#art).m-dock-on .sch-split-section:last-child .sch-split-table{min-width:0;width:100%;table-layout:auto}
body:not(#art).m-dock-on .sch-split-table :is(th,td){padding:.5rem .0625rem;font-size:.75rem;letter-spacing:0}
body:not(#art).m-dock-on .sch-split-table td:nth-child(6){min-width:0}
body:not(#art).m-dock-on .sch-split-table :is(.glyph,.glyph-lg,.sym-pl,.sym-sign){font-size:1rem}
/* 停滞表七列：留白收小、字小一号，排进卡片里（原来 393px，右边被裁掉一截） */
body:not(#art).m-dock-on .stations-table{font-size:.75rem}
body:not(#art).m-dock-on .stations-table :is(th,td){padding:.4375rem .125rem;letter-spacing:0}
body:not(#art).m-dock-on .stations-table th{font-size:.6875rem}
body:not(#art).m-dock-on .stations-table td.stn-days{font-size:.6875rem}
/* 行星五阶段：电脑上一行三格（星名｜一条标着晨星、光下、夜星几段的横带｜阶段和度数）。手机上三格的固定宽度加起来
   比卡片宽，中间那条横带被挤成 0 看不见，右边的度数还顶出卡片 8px。改成两行：上一行星名和阶段，下一行横带占满 */
body:not(#art).m-dock-on .hell-heliacal-row{
  grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pl st" "bar bar";gap:.375rem .75rem;padding:.5rem .625rem .625rem;
}
body:not(#art).m-dock-on .hell-heliacal-pl{grid-area:pl}
body:not(#art).m-dock-on .hell-heliacal-bar{grid-area:bar}
body:not(#art).m-dock-on .hell-heliacal-status{grid-area:st;justify-content:flex-end;font-size:.75rem}
body:not(#art).m-dock-on .hell-heliacal-status .hell-heliacal-deg{margin-left:.5rem}
/* —— 气质禀赋 ——
   表里「因子」一列写死不折行，手机上「上升 Almuten（按内在质）」这样的长名字压到旁边「详情」一列上，两段字叠在一起；
   「详情」又被截成半个词。手机上两列都允许折行，八列的宽度重新分一下 */
body:not(#art).m-dock-on .tmp-table :is(th,td){padding:.5rem .125rem}
body:not(#art).m-dock-on .tmp-table thead th:first-child,
body:not(#art).m-dock-on .tmp-table tbody td:first-child,
body:not(#art).m-dock-on .tmp-table tfoot td:first-child{padding-left:.5rem}
body:not(#art).m-dock-on .tmp-table col.tmp-col-factor{width:32%}
body:not(#art).m-dock-on .tmp-table col.tmp-col-detail{width:17%}
body:not(#art).m-dock-on .tmp-table col.tmp-col-w{width:9%}
body:not(#art).m-dock-on .tmp-table col.tmp-col-belong{width:11%}
body:not(#art).m-dock-on .tmp-table col.tmp-col-type{width:7.75%}
body:not(#art).m-dock-on .tmp-table th{letter-spacing:0;white-space:nowrap}
body:not(#art).m-dock-on .tmp-table .tmp-factor{white-space:normal;line-height:1.35}
body:not(#art).m-dock-on .tmp-table td.tmp-detail-cell{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;letter-spacing:0}
/* —— 时主推运 ——
   浮卡自己有个「最窄 640px」（电脑上防它被挤扁用的）。别的浮卡另有规则盖掉了，时主推运这一张没有：
   点到「小限」那一页整张浮卡被撑到 640px，右上角的关闭键跑到屏幕外面。手机上不设最窄 */
body:not(#art).m-dock-on #data-drawer.data-drawer{min-width:0!important}
/* 黄道释放顶上三行说明：原来手机上每行不许折、放不下就横着滚（滚动条还藏着），「当前大周期」后半句「（水星）· 几岁到几岁」看不到。改成正常折行 */
body:not(#art).m-dock-on .zr-info > div{white-space:normal;overflow:visible}
/* 配置法的年表：电脑上分左右两栏。手机上两栏各只有 173px，日期被折成两行（2026- ／ 10-12）、行和行挤在一起。手机上排成一栏 */
body:not(#art).m-dock-on #distributions-wrap > .dx-head{grid-template-columns:minmax(0,1fr)!important}
body:not(#art).m-dock-on #distributions-wrap > .dx-head > .dx-head-cell + .dx-head-cell{display:none!important}
body:not(#art).m-dock-on #distributions-wrap > .dx-body{column-count:1!important}
body:not(#art).m-dock-on #distributions-wrap .dx-row .dx-date{white-space:nowrap}

/* ══ 十九、手机：生时校准 ════════════════════════════════════════════════
   电脑上左边是推运表、右边是双盘。手机上原来还是左右并排：表占满了屏宽，盘那一边宽度是 0，整张盘看不见。
   改成和别处一样的页签「推运表｜星盘」，一次放一样；顶上的太阳弧／次限、加减时间和出生时刻两页都在。 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rect-mtabs{flex:0 0 auto;justify-content:center;border-bottom:1px solid var(--art-line)}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal[data-mview="table"] .rectify-right,
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal[data-mview="wheel"] .rectify-left{display:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-left{width:100%;border-right:0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-right{align-items:flex-start;padding:.375rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal #rectify-chart{width:100%;height:auto;max-width:none;max-height:100%}
/* 顶上一排：「太阳弧｜次限」原来被挤得每格只有 49px，字竖成一列。手机上去掉那句英文说明（Rectification:），
   两枚页签和加减时间排成一行；右上角留出关闭键的位置 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-bar{justify-content:flex-start;gap:.5rem .75rem;padding:.5rem 3rem .5rem .625rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-pill{flex:0 0 auto}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-pill .rp-btn{min-height:2.125rem;padding:0 .875rem;font-size:.875rem;white-space:nowrap}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-ctl{flex:0 0 auto;gap:.375rem;margin-left:auto}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-ctl-label{display:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rect-step{width:2.25rem;height:2.25rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal #rectify-unit{height:2.25rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .modal-close{top:.5rem!important;right:.5rem!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rectify-modal .rectify-stamp{padding:.5rem 0;font-size:1.25rem}

/* ══ 二十、手机：方盘下的几张浮卡 ════════════════════════════════════════ */
/* 方盘下开着浮卡时，电脑上左边留着缩小的方盘，旁边浮一枚「圆盘」用来换着看。手机上浮卡是满屏的，
   这枚按钮就悬在浮卡的字上面（每张浮卡的左边都压着它），浮卡开着的时候收起 */
body:not(#art).m-dock-on.data-open #square-to-circle{display:none!important}
/* 主题分析的十二宫：四列在手机上排不下（第四列在屏幕外面，第三列被裁掉一半），改成三列四行 */
body:not(#art).m-dock-on .hell-topical-chips{grid-template-columns:repeat(3,minmax(0,1fr));gap:.375rem}
body:not(#art).m-dock-on .hell-topical-chip{min-width:0;padding:.625rem .375rem;gap:.3125rem;font-size:.8125rem;white-space:nowrap}
/* 本年运势：弹层外面留 24px、里面再留 50px，428 宽的屏上内容只剩 268px，「强年 · 双 LOY 重合」这枚小章被折成两截、
   和旁边的「什么是年主」叠在一起。手机上两层留白收小（内容宽 380px），小章不许折行，一行放不下就整枚换到下一行 */
body:not(#art).m-dock-on .year-fortune-modal{padding:.375rem .375rem 1rem}
body:not(#art).m-dock-on .year-fortune-modal .yf-inner{padding:2.75rem .875rem 1.25rem;border-radius:var(--art-radius)}
body:not(#art).m-dock-on .year-fortune-modal .yf-close{top:.5rem;right:.5rem}
body:not(#art).m-dock-on .year-fortune-modal .yf-title{margin-bottom:1rem;font-size:1.25rem}
body:not(#art).m-dock-on .year-fortune-modal .yf-section{margin-bottom:1rem}
body:not(#art).m-dock-on .hell-loy-unified-card .hell-sr-section-label{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.375rem .5rem;height:auto}
body:not(#art).m-dock-on .hell-loy-unified-card :is(.hell-loy-tag,.hell-loy-helpbtn){position:static;white-space:nowrap;margin:0}
body:not(#art).m-dock-on .year-fortune-modal .yf-pills .hell-tl-pill{white-space:nowrap}

/* ══ 二十一、手机：「自定义双盘／三盘」弹层 ═══════════════════════════════
   行运、次限、太阳弧、关系盘里点「自定义」出来的那张：电脑上四五列并排（外圈行星｜内圈行星｜相位｜容许度）。
   手机上原来照样并排，最右一列「容许度」整列在屏幕外面，「中点」后面两个下拉框被挤成 10px 宽。
   手机上改成两行：行星几列一行（两盘两列、三盘三列，左右对着看），相位和容许度一行。
   列宽是程序写在元素自己的 style 里的，所以这里都要带 !important */
body:not(#art).m-dock-on #dyn-custom-overlay .settings-popup{padding-left:.875rem;padding-right:.875rem}
body:not(#art).m-dock-on #dyn-custom-body{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1.25rem .75rem!important;padding:.25rem 0!important}
body:not(#art).m-dock-on #dyn-custom-body:has(> div:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))!important}
body:not(#art).m-dock-on #dyn-custom-body:has(> div:nth-child(5)) > div:nth-child(-n+3){grid-column:span 2}
body:not(#art).m-dock-on #dyn-custom-body:has(> div:nth-child(5)) > div:nth-child(n+4){grid-column:span 3}
/* 90°盘的那一张只有一大格（里面自己分内圈、外圈两列）：让它占满整行 */
body:not(#art).m-dock-on #dyn-custom-body > div:only-child{grid-column:1/-1;padding:0!important}
body:not(#art).m-dock-on #dyn-custom-body > div:only-child{gap:.625rem!important}
body:not(#art).m-dock-on #dyn-custom-body > div:only-child > div > div:nth-child(2){gap:0 .25rem!important}
/* 这一张里有八颗汉堡学派的虚星，名字是拉丁文（Vulkanus、Poseidon），一格只有 86px：字小一号、间距收一点；再长也只裁在自己格子里，不压到旁边 */
body:not(#art).m-dock-on #dyn-custom-body > div:only-child label{font-size:.75rem!important;gap:.25rem!important;padding-left:0!important;padding-right:0!important;overflow:hidden}
body:not(#art).m-dock-on #dyn-custom-body label{min-width:0;min-height:2rem;font-size:.8125rem!important}
/* 屏宽 420px 以下的手机（多数机型）上，上面那样一格不到 84px，最长的几个名字要被裁：内圈、外圈改成上下两段，每段里一行三个；
   再窄（340px 以下）一行两个 */
@media (max-width:26.25rem){
  body:not(#art).m-dock-on #dyn-custom-body > div:only-child{grid-template-columns:minmax(0,1fr)!important;gap:1.25rem!important}
  body:not(#art).m-dock-on #dyn-custom-body > div:only-child > div > div:nth-child(2){grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:21.25rem){
  body:not(#art).m-dock-on #dyn-custom-body > div:only-child > div > div:nth-child(2){grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* 「中点」那一行：两个下拉框换到下一行，各占一半；三盘时一列只有一百来像素，就一行一个 */
body:not(#art).m-dock-on #dyn-custom-body label:has(select){flex-wrap:wrap}
body:not(#art).m-dock-on #dyn-custom-body label:has(select) > span:last-child{flex:1 0 100%;margin:.125rem 0 0!important;flex-wrap:wrap;gap:.25rem!important}
body:not(#art).m-dock-on #dyn-custom-body label select{flex:1 1 6rem;min-height:2.125rem;padding:0 .25rem!important}
body:not(#art).m-dock-on #dyn-custom-body label:has(select) > span:last-child > span{display:none}
body:not(#art).m-dock-on #dyn-custom-body .dyn-orb-custom{width:4rem;min-height:2.125rem}
/* 最下面三枚按钮：居中（电脑上是靠右、右边还空着 48px） */
body:not(#art).m-dock-on #dyn-custom-overlay .settings-popup > div:last-child{justify-content:center!important;flex-wrap:wrap;margin-right:0!important;padding:.875rem 0 0!important}

/* ══ 二十二、手机：八字（专业） ═══════════════════════════════════════════
   「专业」那一页上面的大表有七列（日期、流年、大运、年柱、月柱、日柱、时柱），表宽是按内容定的，共 436px，
   手机上比屏幕宽，最右边的「时柱」被裁掉一半。手机上表占满屏宽、七列平分，四柱都看得全；
   下面的大运流年表原来有个「最窄 384px」，也比屏幕宽 2px，一并放开（它自己本来就能左右滑） */
body:not(#art).m-dock-on .bazi-body{padding:1rem .625rem}
body:not(#art).m-dock-on .bz-pro-wrap{gap:1rem}
body:not(#art).m-dock-on .bz-pro-left{flex:1 1 100%;min-width:0}
body:not(#art).m-dock-on .bz-pro-left .bz-table{width:100%;table-layout:fixed}
body:not(#art).m-dock-on .bz-pro-left .bz-table :is(th,td){padding:.4rem .0625rem}
body:not(#art).m-dock-on .bz-pro-left .bz-table th{width:2.5rem}
body:not(#art).m-dock-on .bz-pro-right{flex:1 1 100%;min-width:0}
body:not(#art).m-dock-on .bz-pro-head{margin-top:.5rem}

/* ══ 二十三、手机：小限里点开的「月限」「日限」两层弹层 ══════════════════
   点小限表里任一年出来十二个月，再点一个月出来十二段日限。电脑上三列并排。手机上原来排两列，一格只有 151px，
   而一行的东西（日期、宫、主星、PNA 小圆、箭头）要 236px，右半边压到旁边那一格上，日期和符号叠在一起。
   手机上排成一列，一行一个月；表头只留一份，列宽和下面的行对齐（原来表头少算了 PNA 小圆那一列，「主星」两个字对不上符号） */
body:not(#art).m-dock-on .pf-modal{padding:.375rem .375rem 1rem}
body:not(#art).m-dock-on .pf-modal-inner{padding:.875rem .75rem 1rem}
body:not(#art).m-dock-on .pf-sub-head{grid-template-columns:minmax(0,1fr)}
body:not(#art).m-dock-on .pf-sub-head-cell + .pf-sub-head-cell{display:none}
body:not(#art).m-dock-on .pf-sub-head-cell{padding:.25rem .5rem .375rem;gap:.375rem}
body:not(#art).m-dock-on .pf-sub-head-cell.m{grid-template-columns:minmax(0,1fr) 2.25rem 2.5rem 1.5rem 1rem}
body:not(#art).m-dock-on .pf-sub-head-cell.d{grid-template-columns:minmax(0,1fr) 2.25rem 2.5rem 1.5rem}
body:not(#art).m-dock-on .pf-sub-grid{grid-template-columns:minmax(0,1fr)!important;gap:0}
body:not(#art).m-dock-on .pf-sub-row{min-height:2.75rem;padding:.25rem .5rem;gap:.375rem}
body:not(#art).m-dock-on .pf-sub-row > .pf-sub-range{font-size:.875rem}
/* PNA 小圆：手机上按钮默认最矮 36px，会把它拉成竖椭圆。保持 24px 的正圆，能点的范围用一层看不见的垫子放大到 32×44 */
body:not(#art).m-dock-on .pf-sub-row .pf-pna-jump{position:relative;width:1.5rem;height:1.5rem;min-height:0}
body:not(#art).m-dock-on .pf-sub-row .pf-pna-jump::after{content:"";position:absolute;inset:-.625rem -.25rem}

/* ══ 二十四、手机：90°盘用手指转指针 ═════════════════════════════════════
   电脑上在 90°盘上按住拖就能转指针。手机上原来手指一动，浏览器就把这一下当成滚页面接走了，指针只跟两三下就停
   （用真的触摸事件测过：收到 2 次移动就被取消）。让这张盘上的手势全归盘自己用：手指在盘上拖是转指针，
   要往下看指针、行星树那几页，从盘下面的铭牌那一块往上划 */
body:not(#art).m-dock-on[data-dyn-mode="dial90"] #chart{touch-action:none}
/* 回归盘的「行运⇄回归」和关系盘开了第三盘时，外圈那几颗星可以按住拖着改时间（电脑上的做法）。手机上同样的毛病：
   手指一动就被当成滚页面。这两种状态下整页正好一屏、不需要滚，所以把盘上的手势交给盘自己。
   首页的行运、次限、太阳弧不在这里：那几页盘下面还有相位表要往下滑，盘上的手势得留给滚动 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rws-mode-overlay #ret-ws-overlay #rws-svg-bi,
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay #rels-svg-rel{touch-action:none}
/* 法达、黄道释放、配置法里点一行出来的「这一段跨过的小限年」弹层：它的关闭键是照整屏定位的，手机上落在弹层外面，
   正好和后面浮卡的关闭键叠成两个 ×。让它回到弹层自己的右上角 */
body:not(#art).m-dock-on #fd2pf-modal .modal-panel{position:relative}

/* ══ 二十五、手机：行运、次限、太阳弧这一屏 ══════════════════════════════════
   Steven 2026-10-12 夜看了两回。第一回：盘上面是盘型一排加两行带框的时间条，共 124px，「傻大傻大的」「喧宾夺主」，
   要去掉盘型那一排、左边放一枚回圆盘。第二回：照 AstroGold 排——「干干净净的中间一个盘，左边是 natal chart，
   右边是推运方法的时间，而且保留核心信息就好」；盘下面那块铭牌「没有必要显示」；时间框挪到盘下面、
   加一圈圆润的框、时间要居中；「自定义」「资料库」两枚挂在铭牌下面「非常的碍眼」，换个地方。
   从上到下：
     顶上一行   ‹ 圆盘（左）                〔双盘｜次限盘〕 自定义  资料库（右，不带框的小字）
     两个角     左：名字／出生日期时刻／地点      右：行运星／行运的日期时刻
     盘
     时间框     一圈圆头细线：日期一行（居中），下面一行是年月日时分、前后两个箭头、「今」
     相位表
   盘型那一排不在这一屏，要换方盘、90°盘、八字：先点「‹ 圆盘」。换行运、次限、太阳弧在底栏「工具」里。
   横屏看盘（.mobile-landscape-focus）只看盘，这一节不生效。 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .chart-integrated > .chart-mode-dock{display:none!important}

/* —— 顶上一行：两头各钉一组（外卡是它们的定位基准），不占排队的位置，下面的铭牌让出 2rem —— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .m-dyn-back{
  position:absolute;left:.25rem;top:.25rem;z-index:2;display:inline-flex;align-items:center;gap:.125rem;height:2rem;min-height:0;padding:0 .625rem 0 .125rem;
  border:0;background:none;color:var(--text-dim);font-family:var(--serif);font-size:.875rem;letter-spacing:.12em;white-space:nowrap;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .m-dyn-back:active{color:var(--site-accent)}
/* 「自定义」「资料库」原来是铭牌下面两枚带框的长圆章；挪到右上角，去掉框和图标，只留字 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions{
  position:absolute;right:.375rem;top:.25rem;z-index:2;display:flex;flex-wrap:nowrap;align-items:center;gap:0;height:2rem;margin:0;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions .dyn-pill{
  height:2rem;min-height:0;padding:0 .4375rem;border:0;background:none;box-shadow:none;
  color:var(--text-dim);font-family:var(--serif);font-size:.8125rem;letter-spacing:.1em;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions .dyn-pill svg{display:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions .dyn-pill:active{color:var(--site-accent)}
/* 次限多一组「双盘｜次限盘」：排在那两枚前面，小一号的圆头轨道 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions .dyn-view-pill{order:-1;margin-right:.375rem;padding:1px;border-color:var(--art-line);background:transparent;box-shadow:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions .dyn-view-pill button{min-height:0;height:1.5rem;padding:0 .5rem;font-family:var(--serif);font-size:.75rem;letter-spacing:.06em;color:var(--site-plate-ink)}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions .dyn-view-pill button.active{background:var(--site-gold-soft);color:var(--site-accent);font-weight:700}

/* —— 两个角：左边这张本命盘是谁的，右边推运的是哪个时刻。铭牌整块挪到盘的上面，只留核心的几行 —— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .chart-integrated > .ci-subject{
  order:2!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,auto);grid-template-rows:auto 1fr;column-gap:.75rem;align-items:start;
  margin-top:2rem;padding:0 .5rem!important;text-align:left;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject > .subject-name{grid-column:1;grid-row:1;justify-content:flex-start;margin:0;font-size:1rem;letter-spacing:.14em;line-height:1.5}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .subject-name .name-text{margin-right:0}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject > .m-edit{display:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject > .subject-meta{grid-column:1;grid-row:2;display:block;text-align:left}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .subject-meta .rs-date{font-size:.8125rem;line-height:1.5}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .subject-meta .rs-place{font-size:.75rem;line-height:1.5}
/* 经纬度、时区、黄道和宫制那一行在这一屏不显示：看推运时要看的是「谁、哪一刻」 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .subject-meta :is(.rs-coords,.rs-tech){display:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject > .dyn-stamp{grid-column:2;grid-row:1/span 2;display:block!important;margin:0;padding:0;border:0;text-align:right}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-stamp .dyn-stamp-label{margin:0;font-size:1rem;font-weight:600;letter-spacing:.14em;line-height:1.5;color:var(--text)}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-stamp .dyn-stamp-time{margin:0;font-size:.8125rem;font-weight:500;line-height:1.5}

/* —— 时间框：排在盘的下面，一圈圆头细线，里面两行 —— */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .chart-integrated > .ci-controlbar{order:4!important;height:auto;margin:0 0 .875rem;padding:0;justify-content:center}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) #ci-controlbar-pill{
  /* 带 !important 的几样：chart.css 的手机段给这一条的宽、边、圆角、留白都写了带 !important 的值 */
  display:block;width:auto!important;max-width:100%!important;padding:.0625rem .875rem .375rem!important;
  border:1px solid var(--art-line)!important;border-radius:1.5rem!important;background:none;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor{
  position:relative;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:0 .3125rem!important;width:17.25rem;max-width:100%;height:auto;padding:0;
}
/* 日期那一行显示的是自己的一行字（mobile-dock.js 照抄铭牌里的时刻），系统的日期框透明地盖在上面接手指。
   直接显示系统日期框的话对不齐：电脑内核里它的字靠左、右边还留着日历图标的位置，Steven 看着是「太靠左边了」 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .dyn-cursor > .dyn-date-text{
  order:1;flex:0 0 100%;display:block;height:2rem;line-height:2rem;text-align:center;
  font-family:var(--serif);font-size:1rem;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums lining-nums;color:var(--text);
}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor #dyn-date{
  position:absolute;left:0;top:0;width:100%;height:2rem;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:pointer;
}
/* Chrome 内核里点日期框的字只是选中一段数字，点最右边的日历图标才弹出选择器：把那个图标铺满整个框 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor #dyn-date::-webkit-calendar-picker-indicator{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
/* 用键盘走到日期框上时（框是透明的），把框画在那行字上 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .dyn-cursor:has(#dyn-date:focus-visible) > .dyn-date-text{outline:2px solid var(--site-accent);outline-offset:-3px;border-radius:.75rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor > .tu-seg{order:2;margin-right:.375rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor > .dc-arrow{order:3}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor > .dc-divider{display:none}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor > .dc-btn.dc-now{order:4;margin:0 0 0 .375rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor .tu-seg .tu-unit,
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor > .dc-btn{width:1.875rem;height:1.875rem;font-size:.8125rem}

/* —— 2026-10-13 Steven 真机第五回：「最忌讳的就是挤在一起」。时间框贴着盘、日期的字太大；
   右上角要照 AstroGold 补齐（方法名、时刻、地点、经纬度），左边地点下面也要经纬度；男女符号和名字要在一排上。
   下面几条压过本节前面的同名规则。 —— */
/* 名字一行：男女符号和名字同一条基线 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject > .subject-name{display:flex;align-items:center;gap:.375rem}
/* 男女符号用盘上那套符号字体：原来写的字体这一页没有载，各家手机拿自己的字体顶上，高低就不一样 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .subject-name .name-gender{position:static;margin:0;font-family:"StarCue Symbols","Apple Symbols","Noto Sans Symbols",serif;font-size:1.0625rem;line-height:1;transform:none}
/* 左边：地点下面一行经纬度（时区、黄道、宫制那一行仍不显示） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .subject-meta .rs-place .rs-coords{display:block;margin-left:0;font-size:.6875rem;line-height:1.5;color:var(--text-faint);font-style:normal;letter-spacing:.02em}
/* 右边：方法名、时刻、地点、经纬度四行。地点那两行是 #dyn-stamp-coord 里的两个 span（行运开了置换地时是置换地） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-stamp .dyn-stamp-coord{display:block!important;margin:0;font-size:.75rem;line-height:1.5;letter-spacing:.02em;color:var(--text-dim)}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-stamp .dyn-stamp-coord span{display:block}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-stamp .dyn-stamp-coord span + span{font-size:.6875rem;color:var(--text-faint)}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-stamp .dyn-stamp-coord.is-reloc span:first-child{color:var(--site-accent)}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-actions .dyn-pill.active{color:var(--site-accent)}
/* 时间框：离盘 14px；框收紧，日期的字和左上角出生日期那一行一样大（13px） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .chart-integrated > .ci-controlbar{margin:.875rem 0 1rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) #ci-controlbar-pill{padding:0 .75rem .25rem!important;border-radius:1.25rem!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor{width:16.5rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor .tu-seg .tu-unit,
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor > :is(.dc-btn,.dc-arrow){width:1.625rem;height:1.625rem;min-height:0;font-size:.75rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .dyn-cursor > .dyn-date-text{height:1.5rem;line-height:1.5rem;font-size:.8125rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-controlbar-pill > .dyn-cursor #dyn-date{height:1.5rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .ci-subject .dyn-stamp .dyn-stamp-coord span + span::before{content:none}

/* ══ 二十六、手机：资料库 ═══════════════════════════════════════════════════
   Steven 2026-10-13 真机：打开资料库「显示的应该是文件夹，点击文件夹之后才会显示里面的星盘信息」。
   原来文件夹和星盘竖着摞在一屏：文件夹那一格限高 200px，只露出三行，下面一半是当前文件夹里的星盘。
   现在分两屏（看的是哪一屏记在弹层的 data-mlib 上，由 library.js 的 libSetMView 改）：
     folders  只有文件夹：一行一个，行高 52px，右边是里面有几张和一个「›」
     charts   点进去以后：顶上一条「‹ 文件夹　当前文件夹名」，下面是里面的星盘（搜索时是跨文件夹的结果）
     gate     没登录或读不到时的那段提示
   每一行星盘：性别、名字、出生时刻和地点、日月升各一行排满整宽，「编辑　笔记　导出」另起一行
   （原来三枚按钮挤在同一行中间，名字那一栏只剩九十来像素，日期和地名折成四行）。 */
/* 弹层在手机上铺满全屏，遮罩那层毛玻璃一点也露不出来，去掉（省掉整屏的模糊运算） */
body:not(#art).m-dock-on #lib-modal{-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;background:var(--site-surface)}
/* 弹层自己不再画框、不留边：原来它比屏幕窄一圈，后面页面外卡的那道线从两边露出来，看着是两道框 */
body:not(#art).m-dock-on #lib-modal > .modal-panel{width:100%;height:100%;max-width:none;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none}
body:not(#art).m-dock-on #lib-modal .lib-sidebar{max-height:none}
body:not(#art).m-dock-on #lib-modal[data-mlib="folders"] .lib-main{display:none}
body:not(#art).m-dock-on #lib-modal[data-mlib="folders"] .lib-sidebar{flex:1 1 auto;min-height:0;border-bottom:0;background:transparent}
body:not(#art).m-dock-on #lib-modal:is([data-mlib="charts"],[data-mlib="gate"]) .lib-sidebar{display:none}
/* 文件夹：一行 52px，手指好点；这一屏里没有「当前选中」的说法，不标亮哪一行 */
body:not(#art).m-dock-on #lib-modal .lib-folders{padding:0}
body:not(#art).m-dock-on #lib-modal .lib-folder{min-height:3.25rem;padding:0 1.125rem;gap:.625rem;font-size:1rem;border-bottom:1px solid var(--border)}
body:not(#art).m-dock-on #lib-modal .lib-folder.active{background:transparent;box-shadow:none;color:var(--text);font-weight:400}
body:not(#art).m-dock-on #lib-modal .lib-folder:active{background:var(--bg-hover)}
body:not(#art).m-dock-on #lib-modal .lib-folder-count{font-size:.8125rem;color:var(--text-dim)}
body:not(#art).m-dock-on #lib-modal .lib-folder-go{display:block;flex:0 0 auto;font-size:1.125rem;line-height:1;color:var(--text-faint)}
/* 行尾那枚删除文件夹的「×」在电脑上是鼠标移上去才显出来的；手机上没有「移上去」，它一直看不见却点得着，收掉 */
body:not(#art).m-dock-on #lib-modal .lib-folder-del{display:none}
/* 星盘那一屏顶上的返回条 */
body:not(#art).m-dock-on #lib-modal[data-mlib="charts"] .lib-mbar{
  display:flex;align-items:center;gap:.5rem;flex:0 0 auto;min-height:2.75rem;padding:0 .5rem;border-bottom:1px solid var(--border);
}
body:not(#art).m-dock-on #lib-modal .lib-mback{
  display:inline-flex;align-items:center;gap:.125rem;height:2.75rem;padding:0 .625rem 0 .25rem;border:0;background:transparent;white-space:nowrap;
  color:var(--text-dim);font-family:var(--serif);font-size:.875rem;letter-spacing:.12em;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
body:not(#art).m-dock-on #lib-modal .lib-mback svg{width:1rem;height:1rem}
body:not(#art).m-dock-on #lib-modal .lib-mback:active{color:var(--site-accent)}
body:not(#art).m-dock-on #lib-modal .lib-mback:focus-visible{outline:2px solid var(--site-accent);outline-offset:-3px}
body:not(#art).m-dock-on #lib-modal .lib-mfolder-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--serif);font-size:.9375rem;letter-spacing:.08em;color:var(--text)}
/* 一行星盘 */
body:not(#art).m-dock-on #lib-modal #lib-charts{padding:.5rem .75rem 1.5rem}
body:not(#art).m-dock-on #lib-modal .lib-chart-row{flex-wrap:wrap;align-items:flex-start;gap:.125rem .625rem;padding:.875rem .375rem .625rem}
body:not(#art).m-dock-on #lib-modal .lib-chart-row::before{display:none}
body:not(#art).m-dock-on #lib-modal .lib-chart-gcol{padding-top:.1875rem}
body:not(#art).m-dock-on #lib-modal .lib-chart-main{flex:1 1 calc(100% - 4.5rem);min-width:0}
body:not(#art).m-dock-on #lib-modal .lib-chart-name{font-size:1rem}
body:not(#art).m-dock-on #lib-modal :is(.lib-chart-meta,.lib-chart-tags){font-size:.8125rem;line-height:1.6}
body:not(#art).m-dock-on #lib-modal :is(.lib-chart-edit,.lib-chart-notes){opacity:1;min-height:2rem;padding:.25rem .625rem;font-size:.8125rem;color:var(--text-dim)}
body:not(#art).m-dock-on #lib-modal .lib-chart-edit{margin-left:1.375rem}
/* 行尾那枚删除的「×」同样是移上去才显的，手机上看不见却点得着；删盘走「整理」里的勾选删除 */
body:not(#art).m-dock-on #lib-modal .lib-chart-del{display:none}
body:not(#art).m-dock-on #lib-modal .lib-chart + .lib-chart{border-top:1px solid var(--border)}
/* 触屏上「移上去变色」会粘在刚点过的那一行上，看着像选中了：手机上只在按下的那一下变色 */
body:not(#art).m-dock-on #lib-modal :is(.lib-folder,.lib-chart-row):hover{background:transparent}
body:not(#art).m-dock-on #lib-modal :is(.lib-folder,.lib-chart-row):active{background:var(--bg-hover)}
body:not(#art).m-dock-on #lib-modal .lib-chart.selected .lib-chart-row{background:rgb(var(--site-accent-rgb)/.08)}

/* ══ 二十七、手机：回归盘、关系盘盘下面的留白 ══════════════════════════════════
   Steven 2026-10-13 真机：盘下面三排「全部排在一起，过于拥挤」，而下面还空着一截；天顶那枚 MC 又顶着页签。
   「最忌讳的就是挤在一起」。现在看盘那一页把一屏剩下的高度都拿过来分：
     盘往下让 14px（MC 不再贴着页签）
     盘下面 12px 是它的说明和「相位表」
     再往下的空当正中间放最要紧的那一样——回归盘是年份条（「把它放在 C 位」），关系盘是「关系人 B 是谁」
     最底下贴着屏幕下沿的是三档切换（回归盘｜回归⇄本命｜行运⇄回归；比对｜组合｜戴维森）
   屏幕矮、空当不够时：盘先缩（--ws-rest 那几个数就是盘以外这些东西最少要占的高度），再矮就往下滑。 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay):is([data-mview="main"],[data-mview="natal"]) .rws-main{
  flex:1 0 auto!important;align-content:stretch;padding:.875rem .375rem max(.75rem,env(safe-area-inset-bottom))!important;
}
/* 说明那一行离盘 12px（原来 8px） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) :is(.rws-cell-meta,.rels-cell-meta,#rels-right-chip){margin-top:.75rem!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) :is(#rws-right-pills,#rels-right-pills,.rws-cell-natal .rws-asp-pill){margin-top:.75rem!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) :is(#rws-bi-swap-btn,#rels-syn-swap,.rws-cell-natal .rws-tl-btn){margin-top:.75rem!important}

/* —— 回归盘 —— 第四行（年份条）拿走所有多出来的高度，年份条在这一行里上下居中 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay[data-mview="main"] .rws-main{grid-template-rows:auto auto auto minmax(4.75rem,1fr) auto auto}
/* 「本命盘」那一页（两个工作区都一样）没有年份条：中间那一行空着拿走多出来的高度，最底下那排（关系盘是「本命 A｜本命 B」）贴底 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay)[data-mview="natal"] .rws-main{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-strip{align-self:center;margin:0;gap:.5rem}
/* 年份是这半屏的主角：格子高 52px，年份的字 18px；当前那一张金线金字 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-chip{min-height:3.25rem;border-radius:.875rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-chip .y{font-size:1.125rem;letter-spacing:.04em;line-height:1.25}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-chip .md{font-size:.6875rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay .rws-year-nav{min-height:3.25rem}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #ret-ws-overlay #rws-ov-cursor-top[style*="inline-flex"]{margin:0 0 .75rem!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) :is(#ret-ws-overlay,#rel-ws-overlay) .rws-cell .rws-seg{margin:0}

/* —— 关系盘 —— 「关系人 B 是谁」那一枚放在空当正中；最底下那排类型在格子外面，由上面那条「拿走剩下的高度」推到底 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="main"] .rws-main{
  grid-template-areas:"wheel wheel wheel" "tool meta pills" "note note note" "who who who";
  grid-template-rows:auto auto auto minmax(3.5rem,1fr);
}
/* 第三盘开着时的格子在十四节那一条里（只许有那一条，给「本命盘」那一页留着原来的排法） */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="main"] .rels-mwho{grid-area:who;align-self:center;margin:0}
/* 关系盘的盘靠格子的上沿放：这一格的高度算出来比盘矮 6px，上下居中的话盘会往上冒 3px，MC 离页签又近了 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay .rws-svg-wrap{align-self:start}
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="main"] .rws-cfg > #rels-type-seg{margin:0 .375rem max(.75rem,env(safe-area-inset-bottom))}
/* 关系盘的格子最底下不用再留那 12px：底下还有类型那一排 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus) #rel-ws-overlay[data-mview="main"] .rws-main{padding-bottom:.75rem!important}
body:not(#art).m-dock-on:not(.mobile-landscape-focus).rels-overlay-on #rel-ws-overlay .rels-time-strip{margin:.75rem 0 0}

/* 行运那一屏的盘最高到多少：屏高减掉盘以外的东西（顶上一行 43、两个角 80、时间框连上下的空 82、底栏 68，共 17.25rem）。
   矮一点的手机（390×844 这一档，可见高度六百出头）上盘按原大画的话，时间框有一半压在底栏后面，要往下滑才拨得到；
   现在盘先让一点，时间框留在一屏之内。和首页同一条底线：最矮不低于屏宽的 74%。428×770 的屏上这个上限比盘本来的高度大，不起作用。 */
body:not(#art).m-dock-on:not(.mobile-landscape-focus)[data-dyn-mode]:not([data-dyn-mode="dial90"]) .chart-integrated .ci-chart #chart{max-height:max(min(74vw,20rem),calc(100dvh - 17.25rem))!important}