/* vNext: aligned input rows, annotated chart tracks, resilient records. */
.field > span { display:flex; justify-content:space-between; }
.field small { color:var(--muted); font-size:12px; }
.line-row,.vnext-line-dialog .line-option { grid-template-columns:56px minmax(72px,1fr) 24px 92px; gap:7px; }
.line-row .yao-glyph,.vnext-line-dialog .yao-glyph { grid-column:2; margin-inline:auto; }
.line-row .line-motion,.vnext-line-dialog .line-motion { grid-column:3; color:var(--accent); font-size:17px; font-style:normal; font-weight:800; text-align:center; }
.line-row .choice,.vnext-line-dialog small { grid-column:4; justify-self:end; white-space:nowrap; }
.vnext-line-dialog { width:min(680px,calc(100vw - 24px)); }
.vnext-line-dialog .line-option { min-height:68px; }
.vnext-line-dialog .line-option .option-name { grid-column:1; }

.vnext-result-header { display:block; padding:14px 18px; }
.vnext-result-header p,.vnext-result-header div,.vnext-result-header h2 { margin:0; text-align:left; }
.vnext-result-header div { margin-top:5px; }
.vnext-result-header h2 { margin-top:6px; font-size:15px; }

.vnext-desktop-title,.vnext-desktop-line { display:grid; grid-template-columns:52px minmax(0,1fr) 28px minmax(0,1fr); align-items:center; }
.vnext-desktop-title { min-height:66px; padding:8px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.vnext-desktop-title > div { display:grid; grid-template-columns:132px 58px 34px; justify-content:center; min-width:0; }
.vnext-desktop-title > div span,.vnext-desktop-title > div strong { grid-column:1 / -1; text-align:center; }
.vnext-desktop-title > div span { color:var(--muted); font-size:11px; }
.vnext-desktop-title > div strong { font-size:14px; line-height:1.25; }
.vnext-desktop-line { min-height:70px; padding:6px 12px; border-bottom:1px solid var(--line); }
.vnext-desktop-line:last-child { border-bottom:0; }
.vnext-spirit { color:var(--muted); font-size:13px; white-space:nowrap; }
.vnext-desktop-side { position:relative; display:grid; grid-template-columns:132px 58px 34px; align-items:center; justify-content:center; gap:6px; min-width:0; padding-block:15px 13px; }
.vnext-main-meta { overflow:hidden; font-size:13px; font-weight:650; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
.vnext-desktop-side .yao-glyph { width:58px; gap:10px; margin:0; }
.vnext-desktop-side .yao-glyph.yang .stroke { width:58px; }
.vnext-desktop-side .yao-glyph.yin .stroke { width:24px; }
.vnext-marker { color:var(--accent); font-size:14px; font-weight:750; white-space:nowrap; }
.change-arrow { color:var(--accent); font-size:13px; text-align:center; }
.line-flags { position:absolute; top:0; right:98px; display:flex; gap:4px; height:14px; color:var(--accent); font-size:9px; font-weight:700; white-space:nowrap; }
.hidden-note { position:absolute; right:98px; bottom:0; color:var(--accent); font-size:9px; white-space:nowrap; }

.vnext-mobile-chart { display:none; }
.vnext-mobile-title { display:grid; grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr); align-items:center; min-height:66px; padding:7px 8px; background:var(--surface-2); border-bottom:1px solid var(--line); }
.vnext-mobile-title > div { display:grid; justify-items:center; min-width:0; }
.vnext-mobile-title span { color:var(--muted); font-size:10px; }
.vnext-mobile-title strong { font-size:14px; line-height:1.25; text-align:center; }
.vnext-mobile-line { display:grid; grid-template-columns:28px minmax(0,1fr) 34px 25px 10px minmax(0,1fr) 34px 25px; align-items:center; column-gap:3px; min-height:64px; padding:5px 8px; border-bottom:1px solid var(--line); }
.vnext-mobile-line:last-child { border-bottom:0; }
.vnext-mobile-spirit { color:var(--muted); font-size:11px; white-space:nowrap; }
.vnext-mobile-cell { position:relative; display:contents; }
.vnext-mobile-meta { overflow:hidden; font-size:11px; font-weight:650; letter-spacing:-.025em; text-align:right; white-space:nowrap; }
.vnext-mobile-line .yao-glyph { width:32px; gap:6px; margin:0; }
.vnext-mobile-line .yao-glyph.yang .stroke { width:32px; }
.vnext-mobile-line .yao-glyph.yin .stroke { width:13px; }
.vnext-mobile-line .vnext-marker { font-size:12px; }
.vnext-mobile-arrow { color:var(--accent); font-size:11px; text-align:center; }
.mobile-annotations { position:absolute; z-index:1; display:flex; gap:3px; color:var(--accent); font-size:8px; font-weight:700; white-space:nowrap; transform:translateY(-18px); }
.mobile-hidden { position:absolute; color:var(--accent); font-size:8px; white-space:nowrap; transform:translateY(17px); }

.record-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; }
.record-item > div:first-child { min-width:0; }
.record-item h3 { display:-webkit-box; overflow:hidden; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.record-item p { overflow-wrap:anywhere; }
.record-item .item-actions { display:flex; flex:0 0 auto; gap:7px; }
.record-item .item-actions button { min-width:58px; padding-inline:10px; }
.vnext-settings { overflow:hidden; }

.choice-dialog { width:min(420px,calc(100vw - 32px)); padding:0; color:var(--text); background:var(--surface); border:0; border-radius:12px; }
.choice-dialog::backdrop { background:rgb(14 29 32 / .58); }
.choice-dialog form { padding:18px; }
.choice-dialog header { display:flex; align-items:center; justify-content:space-between; }
.choice-dialog header button { border:0; background:transparent; font-size:20px; }
.choice-dialog p { color:var(--muted); }
.choice-dialog form > div { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.choice-dialog .accent { color:var(--on-brand); background:var(--accent); }

@media (max-width:700px) {
  .vnext-desktop-chart { display:none; }
  .vnext-mobile-chart { display:block; }
  .vnext-result { width:100%; }
  .vnext-result-header { padding:13px; }
  .record-item { align-items:start; }
  .record-item .item-actions { flex-direction:column; }
  .record-item .item-actions button { min-width:62px; }
}
@media (max-width:390px) {
  .line-row,.vnext-line-dialog .line-option { grid-template-columns:48px minmax(64px,1fr) 22px 82px; }
  .vnext-mobile-line { grid-template-columns:25px minmax(0,1fr) 30px 22px 7px minmax(0,1fr) 30px 22px; column-gap:2px; padding-inline:5px; }
  .vnext-mobile-spirit,.vnext-mobile-meta { font-size:10px; }
  .vnext-mobile-line .yao-glyph { width:28px; gap:5px; }
  .vnext-mobile-line .yao-glyph.yang .stroke { width:28px; }
  .vnext-mobile-line .yao-glyph.yin .stroke { width:11px; }
  .vnext-mobile-line .vnext-marker { font-size:11px; }
}