/* 剧本台 · 一套皮：近黑暖底 / 奶油字 / 单一火色。和互动影游工作台同一套 token，两边看着是一个家族。 */

:root {
  --paper: oklch(13% 0.012 40);
  --paper-2: oklch(17.5% 0.016 40);
  --paper-3: oklch(22% 0.018 40);
  --paper-deep: oklch(10% 0.01 40);
  --ink: oklch(94% 0.02 80);
  --ink-2: oklch(84% 0.025 70);
  --muted: oklch(72% 0.03 60);
  --faint: oklch(64% 0.028 55);
  --rule: oklch(96% 0.01 80 / 0.12);
  --rule-2: oklch(96% 0.01 80 / 0.22);
  --line-field: oklch(52% 0.02 55);
  --accent: oklch(70% 0.2 45);
  --accent-ink: oklch(14% 0.02 40);
  --focus: oklch(76% 0.19 56);
  --hot-2: oklch(40% 0.16 27);
  --hot-3: oklch(64% 0.195 34);
  --hot-4: oklch(76% 0.19 56);
  --hot-5: oklch(89% 0.14 78);
  --font-body: "PingFang SC", "Microsoft YaHei", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-lg: 16px;
  --text-xl: 19px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --dur: 120ms;
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* overscroll-behavior：堵掉「横向滑动 = 浏览器返回上一页」这条路。
   触控板两指横扫、或者按住拖到页面边缘，Chrome/Edge 默认会触发 history 后退。 */
html, body { margin: 0; height: 100%; overflow: hidden; overflow-x: clip; overscroll-behavior: none; background: var(--paper); color: var(--ink); font: var(--text-md)/1.6 var(--font-body); }
::selection { background: color-mix(in oklab, var(--accent) 32%, transparent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
button { font: inherit; color: var(--ink); height: 32px; padding: 0 var(--space-md); background: transparent; border: 1px solid var(--rule-2); border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; transition: background-color var(--dur), border-color var(--dur); }
button:hover:not(:disabled) { background: var(--paper-3); }
button:disabled { color: var(--faint); border-color: var(--rule); cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 500; }
button.primary:hover:not(:disabled) { background: color-mix(in oklab, var(--accent) 86%, var(--ink)); }
button.small { height: 28px; padding: 0 var(--space-sm); font-size: var(--text-sm); }
input, textarea, select { font: inherit; color: var(--ink); background: var(--paper-deep); border: 1px solid var(--line-field); border-radius: var(--radius-md); padding: 0 var(--space-sm); width: 100%; height: 30px; }
textarea { height: auto; padding: var(--space-sm); line-height: 1.65; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
.dim { color: var(--muted); font-size: var(--text-sm); }
.muted-hint { color: var(--muted); font-size: var(--text-xs); line-height: 1.7; }
.chip { font-size: var(--text-xs); color: var(--muted); border: 1px solid var(--rule); border-radius: var(--radius-pill); padding: 2px var(--space-sm); display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
.chip.ok { color: var(--hot-5); border-color: color-mix(in oklab, var(--hot-5) 30%, transparent); }
.chip.warn { color: var(--ink); border-color: color-mix(in oklab, var(--hot-4) 55%, transparent); }
.chip.bad { color: var(--hot-3); border-color: color-mix(in oklab, var(--hot-3) 34%, transparent); }
.kbd { font: var(--text-xs)/1 var(--font-mono); opacity: .55; margin-left: 2px; }
.err { color: var(--hot-3); font-size: var(--text-sm); min-height: 1.4em; }

/* ---------- 口令 / 首页 ---------- */
#gate { position: fixed; inset: 0; display: grid; place-items: center; background: var(--paper); }
#gate form { width: min(360px, 90vw); display: flex; flex-direction: column; gap: var(--space-md); }
#gate h1 { margin: 0; font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; }
#gate p { margin: 0; color: var(--muted); font-size: var(--text-sm); }
#home { padding: 40px; max-width: 900px; margin: 0 auto; height: 100%; overflow-y: auto; }
.home-head { display: flex; align-items: baseline; gap: var(--space-md); margin-bottom: var(--space-xl); }
.home-head h1 { margin: 0; font-size: 26px; font-weight: 500; letter-spacing: -0.02em; }
.home-actions { display: flex; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.home-actions input { max-width: 320px; height: 36px; }
#proj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); }
#proj-list li { display: flex; align-items: baseline; gap: var(--space-md); padding: var(--space-md); border: 1px solid var(--rule); border-radius: var(--radius-lg); cursor: pointer; background: var(--paper-2); }
#proj-list li:hover { border-color: var(--accent); }
#proj-list b { font-size: var(--text-lg); font-weight: 500; }
#proj-list .when { margin-left: auto; color: var(--muted); font-size: var(--text-xs); }

/* ---------- 三栏 ---------- */
#shell { display: grid; grid-template-rows: auto 1fr; height: 100%; }
#topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; min-height: 52px; padding: 6px var(--space-md); border-bottom: 1px solid var(--rule); }
.brand { display: flex; align-items: baseline; gap: var(--space-sm); cursor: pointer; min-width: 0; }
.brand b { font-size: var(--text-md); font-weight: 500; }
.dirty { color: var(--hot-4); font-size: var(--text-xs); }
.tools { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
main { display: grid; grid-template-columns: minmax(200px, var(--col-left, 620px)) 6px minmax(320px, 1fr); min-height: 0; overflow: hidden; }
section { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--rule); }
section:last-child { border-right: 0; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); height: 34px; padding: 0 var(--space-sm) 0 var(--space-md); font-size: var(--text-xs); color: var(--muted); border-bottom: 1px solid var(--rule); flex: none; }
.pane-head > span:first-child { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pane-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.splitter { background: transparent; position: relative; z-index: 3; transition: background-color var(--dur); }
.splitter.v { cursor: col-resize; border-left: 1px solid var(--rule); }
.splitter:hover, .splitter.on { background: color-mix(in oklab, var(--accent) 26%, transparent); }
.splitter::after { content: ""; position: absolute; inset: -2px; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }

/* ---------- 剧情图 ---------- */
#graph-wrap { position: relative; flex: 1; overflow: hidden; overscroll-behavior: contain; background: var(--paper-deep); -webkit-user-select: none; user-select: none; }
#graph { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; overscroll-behavior: contain; -webkit-user-drag: none; }
#graph.selecting { cursor: crosshair; }
#graph.panning { cursor: grabbing; }
.gnode > rect:first-of-type { fill: var(--paper-2); stroke: var(--rule-2); stroke-width: 1px; }
.gnode text { fill: var(--ink); font-size: var(--text-sm); pointer-events: none; }
.gnode .sub { fill: var(--muted); font-size: var(--text-xs); }
.gnode:hover > rect:first-of-type { stroke: var(--muted); }
.gnode.ending > rect:first-of-type { fill: var(--hot-2); stroke: color-mix(in oklab, var(--hot-4) 45%, transparent); }
.gnode.textonly > rect:first-of-type { stroke-dasharray: 3 3; }
.gnode.branch > rect:first-of-type { stroke: color-mix(in oklab, var(--hot-3) 55%, transparent); }
.gnode.sel > rect:first-of-type { stroke: var(--accent); stroke-width: 2px; fill: var(--paper-3); }
#graph .gnode.multi > rect:first-of-type, #graph .gstation.multi > rect { stroke: var(--ink); stroke-width: 2px; }
.gnode .gtype-bar { stroke: none; }
.gnode.branch .gtype-bar { fill: var(--hot-3); }
.gnode.ending .gtype-bar { fill: color-mix(in oklab, var(--hot-4) 70%, transparent); }
.gnode .ending-dot { fill: var(--hot-5); }
.gstation.picking > rect, .gnode.picking > rect:first-of-type { stroke: var(--hot-5); }
.gedge { stroke: var(--rule-2); fill: none; stroke-width: 1px; }
.gedge.next { stroke: color-mix(in oklab, var(--ink) 34%, transparent); }
.gedge.choice { stroke: var(--hot-3); stroke-width: 1.5px; stroke-dasharray: 7 4; }
.gedge.sel { stroke: var(--accent); stroke-width: 2px; stroke-dasharray: none; }
.gedge.dangling { stroke-dasharray: 3 4; opacity: .75; }
.gedge.choice.back { stroke-dasharray: 5 4; }
.gedge-label rect { fill: var(--paper-deep); stroke: var(--rule-2); stroke-width: 1px; }
.gedge-label text { fill: var(--muted); font-size: var(--text-xs); }
.glink-handle, .choice-link { fill: var(--accent); stroke: var(--paper-deep); stroke-width: 2px; cursor: crosshair; }
.glink-handle:hover, .choice-link:hover { fill: var(--hot-5); }
.gstation { cursor: pointer; }
.gstation > rect { fill: var(--paper-3); stroke: var(--hot-3); stroke-width: 1px; }
.gstation > text { fill: var(--ink); font-size: var(--text-xs); }
.gstation:hover > rect { stroke: var(--hot-4); }
.gstation.sel > rect { stroke: var(--accent); stroke-width: 2px; fill: var(--paper-2); }
.gstation.dangling > rect { stroke: var(--rule-2); stroke-dasharray: 3 3; }
.gstation.dangling > text { fill: var(--muted); }
.gstation .choice-link { opacity: 0; }
.gstation:hover .choice-link, .gstation.sel .choice-link, .gstation.dangling .choice-link { opacity: 1; }
.marquee { fill: color-mix(in oklab, var(--accent) 10%, transparent); stroke: var(--accent); stroke-width: 1px; stroke-dasharray: 4 3; pointer-events: none; }
#graph-legend { position: absolute; left: var(--space-sm); bottom: var(--space-sm); max-width: calc(100% - 16px); display: flex; gap: 2px var(--space-sm); flex-wrap: wrap; align-items: center; background: color-mix(in oklab, var(--paper-deep) 92%, transparent); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: 5px var(--space-sm); font-size: var(--text-xs); color: var(--muted); pointer-events: none; }
#graph-legend span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; flex: none; }
#graph-legend .lg-tip { flex: 1 0 100%; color: var(--faint); padding-top: 2px; }
#graph-legend .lg-sep { width: 1px; height: 12px; background: var(--rule-2); flex: none; }
#graph-legend i { width: 16px; height: 0; border-top: 1.5px solid; display: inline-block; }
#graph-legend .lg-next { border-color: color-mix(in oklab, var(--ink) 34%, transparent); }
#graph-legend .lg-choice { border-color: var(--hot-3); border-top-style: dashed; }
#graph-legend i.key { width: 3px; height: 10px; border: 0; border-radius: 1.5px; }
#graph-legend .lg-ending { background: var(--hot-2); border: 1px solid color-mix(in oklab, var(--hot-4) 45%, transparent); }

/* ---------- 正文（就是一块纸） ---------- */
#scene-editor { flex: 1; overflow-y: auto; padding: 32px clamp(24px, 6%, 72px) 80px; scrollbar-color: var(--muted) transparent; max-width: 860px; width: 100%; margin: 0 auto; }
.ed-title { display: block; width: 100%; height: auto; margin: 0 0 6px; padding: 0; border: 0; background: transparent; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.ed-title:focus { outline: none; box-shadow: inset 0 -1px 0 var(--accent); }
.ed-title::placeholder { color: var(--faint); }
.ed-body { display: block; width: 100%; height: auto; min-height: 320px; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.95; resize: none; overflow: hidden; }
.ed-body:focus { outline: none; }
.ed-body::placeholder { color: var(--faint); line-height: 1.9; }
/* 只读链接：正文变灰、光标不再是插入符，一眼能看出改不了 */
.ed-title[readonly], .ed-body[readonly] { color: var(--ink-2); cursor: default; }
.ed-title[readonly]:focus, .ed-body[readonly]:focus { box-shadow: none; }
.ed-label { color: var(--faint); font-size: var(--text-xs); margin: 18px 0 6px; }
.ed-label:first-child { margin-top: 0; }
.ed-foot { color: var(--faint); font-size: var(--text-xs); margin-top: 14px; }
#center .pane-head { border-bottom: 1px solid var(--rule); }
.scene-title { font-size: var(--text-xl); font-weight: 500; letter-spacing: -0.01em; margin-bottom: 2px; }
.scene-slug { color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-lg); }
.block { display: grid; grid-template-columns: 62px 1fr; gap: var(--space-sm); margin-bottom: var(--space-md); align-items: start; }
.block-kind { font-size: var(--text-xs); color: var(--muted); padding-top: 8px; }
.block-line { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-sm); }
.block-tools { display: flex; gap: 2px; justify-content: flex-end; margin-top: 2px; opacity: 0; transition: opacity var(--dur); }
.block:hover .block-tools, .block:focus-within .block-tools { opacity: 1; }
.block-tools button { height: 22px; padding: 0 6px; font-size: var(--text-xs); }
.block textarea { font-size: var(--text-md); }
.block .act textarea { color: var(--ink); font-family: var(--font-body); }
.block .line textarea { color: var(--ink); }
.block .note textarea { color: var(--muted); font-size: var(--text-sm); }
.add-row { display: flex; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--rule); }
.empty-editor { color: var(--muted); text-align: center; padding: 60px var(--space-md); line-height: 1.9; }

/* ---------- 属性面板 ---------- */
#inspector { flex: 1; overflow-y: auto; padding: var(--space-sm); scrollbar-color: var(--muted) transparent; }
.card { border: 1px solid var(--rule); border-radius: var(--radius-lg); background: var(--paper-2); margin-bottom: var(--space-sm); overflow: hidden; }
.card > h3 { margin: 0; padding: var(--space-sm) var(--space-md); font-size: var(--text-xs); font-weight: 500; color: var(--muted); border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: var(--space-sm); }
.card > h3 .dim { margin-left: auto; font-size: var(--text-xs); }
.card > .card-body { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.row { display: grid; grid-template-columns: 62px 1fr; gap: var(--space-sm); align-items: center; }
.row > label { color: var(--muted); font-size: var(--text-sm); }
.row.wide { grid-template-columns: 1fr; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.beat { border-top: 1px solid var(--rule); padding-top: var(--space-sm); display: flex; flex-direction: column; gap: 6px; }
.beat:first-child { border-top: 0; padding-top: 0; }
.pick-row { display: flex; align-items: baseline; gap: var(--space-sm); width: 100%; height: auto; padding: var(--space-sm); text-align: left; border-radius: var(--radius-md); background: var(--paper); border: 1px solid var(--rule); }
.pick-row:hover { border-color: var(--accent); background: var(--paper-3); }
.pick-row b { color: var(--hot-5); font-variant-numeric: tabular-nums; }
.pick-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-row em { font-style: normal; color: var(--muted); font-size: var(--text-xs); }

/* ---------- 弹层 ---------- */
#modal-mask { position: fixed; inset: 0; z-index: 400; background: color-mix(in oklab, var(--paper-deep) 76%, transparent); display: grid; place-items: center; padding: var(--space-xl); }
#modal { width: min(720px, 94vw); max-height: 84vh; overflow: auto; background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: var(--radius-lg); padding: var(--space-lg) var(--space-xl) var(--space-xl); box-shadow: 0 24px 60px oklch(6% 0.01 40); }
#modal h2 { margin: 0 0 var(--space-md); font-size: var(--text-lg); font-weight: 500; }
#modal h3 { margin: var(--space-lg) 0 var(--space-sm); font-size: var(--text-md); font-weight: 500; color: var(--ink-2); }
#modal .modal-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); }
#modal .issue { display: flex; gap: var(--space-sm); padding: 3px 0; font-size: var(--text-sm); align-items: baseline; }
#modal .issue .tag { font-size: var(--text-xs); padding: 0 6px; border-radius: 4px; flex: none; }
#modal .issue.err .tag { background: color-mix(in oklab, var(--hot-2) 40%, transparent); color: var(--hot-5); }
#modal .issue.warn .tag { background: color-mix(in oklab, var(--hot-2) 26%, transparent); color: var(--ink); }
#tip { position: fixed; z-index: 600; max-width: 300px; background: var(--paper-2); border: 1px solid var(--rule-2); border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); line-height: 1.6; box-shadow: 0 12px 28px oklch(6% 0.01 40); pointer-events: none; white-space: pre-line; }
#shell[data-role="view"] .tools button:not(#btn-export):not(#btn-history) { display: none; }
#shell[data-role="view"] #scene-editor textarea,
#shell[data-role="view"] #scene-editor input { pointer-events: none; opacity: .92; }

/* ---------- 场景头三段 ---------- */
.slug-row { display: grid; grid-template-columns: 62px 1fr 62px; gap: var(--space-sm); }
.slug-row select { padding: 0 4px; }

/* ---------- 试读 / 分享阅读器 ---------- */
#reader { position: fixed; inset: 0; z-index: 800; background: var(--paper); display: flex; flex-direction: column; }
.reader-head { display: flex; align-items: center; gap: var(--space-md); padding: 10px var(--space-xl); border-bottom: 1px solid var(--rule); }
.reader-head b { font-size: var(--text-md); font-weight: 500; }
#reader-body { flex: 1; overflow-y: auto; padding: var(--space-xl) var(--space-xl) 40px; max-width: 760px; width: 100%; margin: 0 auto; scrollbar-color: var(--muted) transparent; }
.r-scene { margin: var(--space-xl) 0 var(--space-lg); }
.r-scene:first-child { margin-top: 0; }
.r-slug { color: var(--muted); font-size: var(--text-sm); letter-spacing: .02em; }
.r-title { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-top: 2px; }
.r-block { margin: 0 0 var(--space-md); line-height: 1.85; font-size: 15px; }
.r-action { color: var(--ink); }
.r-note { color: var(--muted); font-size: var(--text-md); font-style: italic; }
.r-line { display: grid; grid-template-columns: 86px 1fr; gap: var(--space-md); align-items: baseline; }
.r-who { color: var(--hot-5); font-size: var(--text-sm); text-align: right; }
.r-text { color: var(--ink); }
#reader-foot { border-top: 1px solid var(--rule); padding: var(--space-md) var(--space-xl); display: flex; gap: var(--space-md); align-items: center; justify-content: center; flex-wrap: wrap; min-height: 64px; }
#reader-foot .dim { font-size: var(--text-xs); }
.r-choices { display: flex; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; width: 100%; }
.r-choices button { height: auto; min-height: 40px; padding: 8px 16px; white-space: normal; text-align: left; max-width: 320px; }
.r-choices button em { display: block; font-style: normal; color: var(--faint); font-size: var(--text-xs); }
.r-end { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.r-end b { font-size: var(--text-lg); font-weight: 500; color: var(--hot-5); }
.r-end span { color: var(--muted); font-size: var(--text-sm); }
body.sharing #gate, body.sharing #home, body.sharing #shell { display: none !important; }
.share-err { padding: 60px; color: var(--muted); text-align: center; }
.copy-row { display: flex; gap: var(--space-sm); align-items: center; }
.copy-row input { font-family: var(--font-mono); font-size: var(--text-xs); }
#shell[data-role="view"] .tools button:not(#btn-export):not(#btn-history):not(#btn-read):not(#btn-share) { display: none; }

/* 校验结果里可点的条目 */
#modal .issue { align-items: flex-start; }
#modal .issue .linkish {
  background: transparent; border: 0; height: auto; padding: 0;
  color: var(--ink-2); text-align: left; white-space: normal;
  text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px;
  font-size: var(--text-sm);
}
#modal .issue .linkish:hover { color: var(--ink); }

/* ---------- 场目录 ---------- */
#outline { touch-action: pan-y; position: absolute; top: 0; right: 0; bottom: 0; width: min(280px, 78%); z-index: 5; overflow-y: auto; background: color-mix(in oklab, var(--paper) 96%, transparent); border-left: 1px solid var(--rule); padding: var(--space-sm); scrollbar-color: var(--muted) transparent; }
.outline-head { display: flex; align-items: center; gap: var(--space-sm); padding: 2px 4px var(--space-sm); font-size: var(--text-xs); color: var(--muted); }
.outline-head > span:first-child { flex: 1; color: var(--ink-2); }
.ol-ch { margin-bottom: var(--space-sm); }
.ol-ch-head { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--muted); padding: 4px 2px; }
.ol-ch-head i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ol-ch-head em { margin-left: auto; font-style: normal; }
.ol-sc { display: flex; align-items: baseline; gap: 6px; width: 100%; height: auto; padding: 5px 8px; border: 0; border-radius: 6px; background: transparent; font-size: var(--text-sm); text-align: left; }
.ol-sc span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ol-sc em { font-style: normal; font-size: var(--text-xs); color: var(--faint); }
.ol-sc:hover { background: var(--paper-3); }
.ol-sc.on { background: color-mix(in oklab, var(--accent) 18%, transparent); color: var(--ink); }
.ol-empty { font-size: var(--text-xs); color: var(--faint); padding: 2px 10px 6px; }

/* 章色边不挡手势 */
.gch-bar { pointer-events: none; }
#graph-legend .lg-ch { width: 8px; height: 8px; border-radius: 2px; border: 0; }
#graph-legend .lg-tip { color: var(--faint); }

/* 连环圆点：一直在，悬停才亮（判定没变） */
.glink-handle { opacity: 0; transition: opacity 120ms; }
.gnode:hover .glink-handle, .gnode.sel .glink-handle { opacity: 1; }

/* 写不通的 JSON：红框 + 悬停说明 */
.field-bad { border-color: var(--hot-3) !important; box-shadow: 0 0 0 1px color-mix(in oklab, var(--hot-3) 40%, transparent); }

/* 阅读器底部导航 */
.r-nav { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }

/* 顶栏撤销重做 */
#btn-undo, #btn-redo { width: 32px; padding: 0; justify-content: center; font-size: 15px; line-height: 1; }

/* 中间标题/场景头可点改 */
.scene-title[contenteditable], .scene-slug[contenteditable] { outline: none; border-radius: 4px; }
.scene-title[contenteditable]:hover { background: color-mix(in oklab, var(--ink) 5%, transparent); }
.scene-title[contenteditable]:focus { background: color-mix(in oklab, var(--ink) 7%, transparent); box-shadow: inset 0 -1px 0 var(--accent); }
.scene-slug[contenteditable]:hover { color: var(--ink-2); }
.scene-slug[contenteditable]:focus { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }

/* 右键拖动期间：锁住文字选中，光标变抓 */
body.panning { cursor: grabbing; user-select: none; -webkit-user-select: none; }
body.panning * { cursor: grabbing !important; }

/* 窗口窄的时候：顶栏别把按钮挤出屏幕，左栏标题也收一收 */
@media (max-width: 1100px) {
  .tools button { padding: 0 8px; }
  #check { display: none; }
  .brand b { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 860px) {
  #topbar { flex-wrap: wrap; }
  .tools { flex-wrap: wrap; row-gap: 6px; }
  .pane-actions .small { padding: 0 6px; }
}