/* Final responsive result layout: distinct desktop and phone compositions. */
.line-option { grid-template-columns: minmax(80px,auto) 88px 1fr; }
.option-name { display:flex; align-items:center; gap:7px; min-width:0; }
.option-name em { position:static; color:var(--accent); font-style:normal; font-size:18px; font-weight:800; }
.line-option > small { justify-self:end; white-space:nowrap; }
.final-result { width:100%; }
.compact-result-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 16px; align-items:end; padding:15px 18px; }
.compact-result-header p { grid-column:1 / -1; margin:0; }
.compact-result-header div { min-width:0; }
.compact-result-header h2 { margin:0; font-size:15px; text-align:right; }
.desktop-chart { display:block; }
.mobile-chart { display:none; }
.desktop-chart-title, .desktop-line { display:grid; grid-template-columns:48px minmax(132px,1fr) 76px 30px minmax(132px,1fr) 76px; align-items:center; }
.desktop-chart-title { min-height:50px; padding:8px 12px; color:var(--text); background:var(--surface-2); border-bottom:1px solid var(--line); font-size:13px; }
.desktop-chart-title > strong:first-child { text-align:left; }
.desktop-chart-title .original-title { grid-column:2 / 4; text-align:center; }
.desktop-chart-title > span { grid-column:4; color:var(--muted); text-align:center; font-size:12px; }
.desktop-chart-title .changed-title { grid-column:5 / 7; text-align:center; }
.desktop-line { min-height:56px; padding:7px 12px; border-bottom:1px solid var(--line); }
.desktop-line:last-child { border-bottom:0; }
.desktop-spirit { color:var(--muted); font-size:13px; }
.desktop-meta { display:flex; align-items:center; gap:5px; min-width:0; font-size:13px; font-weight:600; white-space:nowrap; }
.desktop-meta.changed { justify-content:flex-end; text-align:right; }
.desktop-meta .meta-copy { min-width:0; }
.desktop-meta .hidden-spirit { white-space:normal; }
.desktop-motion { color:var(--accent); font-size:17px; font-weight:800; text-align:center; }
.desktop-line .yao-glyph { width:66px; }
.desktop-line .yao-glyph.yang .stroke { width:66px; }
.desktop-line .yao-glyph.yin .stroke { width:27px; }
.desktop-line .yao-glyph { gap:12px; }
.mobile-chart-title { display:grid; grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr); align-items:center; gap:5px; padding:13px 12px; border-bottom:1px solid var(--line); }
.mobile-chart-title > div { display:grid; min-width:0; }
.mobile-chart-title > div:last-child { text-align:right; }
.mobile-chart-title span { color:var(--muted); font-size:11px; }
.mobile-chart-title strong { overflow-wrap:anywhere; font-size:15px; line-height:1.3; }
.mobile-chart-title i { color:var(--accent); font-family:KaiTi,STKaiti,serif; font-style:normal; text-align:center; }
.mobile-line { display:grid; grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr); align-items:center; gap:5px; min-height:94px; padding:10px 9px; border-bottom:1px solid var(--line); }
.mobile-line:last-child { border-bottom:0; }
.mobile-side { display:grid; align-content:center; gap:8px; min-width:0; }
.mobile-side.changed { justify-items:end; text-align:right; }
.mobile-meta { display:flex; align-items:flex-start; gap:4px; min-width:0; color:var(--text); font-size:12px; font-weight:600; line-height:1.4; }
.mobile-side.changed .mobile-meta { flex-direction:row-reverse; }
.mobile-meta-copy { min-width:0; overflow-wrap:anywhere; }
.mobile-meta .line-position, .mobile-meta .mobile-spirit { color:var(--muted); font-weight:400; }
.mobile-motion { color:var(--accent); font-size:17px; font-weight:800; text-align:center; }
.mobile-line .yao-glyph { width:64px; margin:0; }
.mobile-side.changed .yao-glyph { margin-left:auto; }
.mobile-line .yao-glyph.yang .stroke { width:64px; }
.mobile-line .yao-glyph.yin .stroke { width:27px; }
.mobile-line .yao-glyph { gap:10px; }

@media (max-width:700px) {
  .compact-result-header { display:block; padding:14px 13px; }
  .compact-result-header p { margin-bottom:5px; }
  .compact-result-header h2 { margin-top:5px; text-align:left; line-height:1.45; }
  .desktop-chart { display:none; }
  .mobile-chart { display:block; }
  .result-toolbar { padding:8px 10px; }
  .final-result { border-radius:9px; }
}
@media (max-width:390px) {
  .mobile-chart-title strong { font-size:14px; }
  .mobile-line { grid-template-columns:minmax(0,1fr) 23px minmax(0,1fr); padding-inline:7px; }
  .mobile-meta { font-size:11.5px; }
  .mobile-line .yao-glyph { width:58px; }
  .mobile-line .yao-glyph.yang .stroke { width:58px; }
  .mobile-line .yao-glyph.yin .stroke { width:24px; }
}