:root {
  --bg: #f3f2ef;
  --panel: #ffffff;
  --ink: #22231f;
  --muted: #6d6f68;
  --line: #d8d7d2;
  --accent: #5a4b7c;
  --accent-soft: #eee9f6;
  --danger: #a24444;
  --success: #3f7b55;
  --node-w: 210px;
  --node-h: 106px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { overflow: hidden; }
button, input, textarea, select { font: inherit; }
button, .button-like {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 8px 11px;
  cursor: pointer;
  color: var(--ink);
}
button:hover, .button-like:hover { border-color: #aaa7a0; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.ghost { background: transparent; }
button.small { padding: 5px 8px; font-size: 13px; }
.hidden { display: none !important; }
.startup-gate { max-width: 650px; margin: 12vh auto; padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.startup-gate p { line-height: 1.6; }
.storage-warning { position: fixed; z-index: 100; bottom: 16px; left: 16px; right: 16px; padding: 14px; background: #fff0df; border: 2px solid var(--danger); border-radius: 8px; box-shadow: 0 4px 24px #0003; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.storage-warning span { flex: 1 1 320px; }
.topbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #23231f;
  color: #fff;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 9px; background: #fff; color: #23231f;
  display: grid; place-items: center; font-weight: 800;
}
.brand-title { font-weight: 750; }
.brand-subtitle { font-size: 12px; opacity: .7; }
.toolbar { display: flex; align-items: center; gap: 8px; }
.sync-box { display: flex; align-items: center; gap: 7px; margin-left: 8px; padding-left: 10px; border-left: 1px solid #555; font-size: 13px; }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.sync-dot.local { background: #d4a94f; }
.sync-dot.online { background: #61bd7c; }
.sync-dot.error { background: #d26767; }
.workspace { height: calc(100vh - 64px); display: grid; grid-template-columns: minmax(560px, 1fr) 510px; }
.graph-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); }
.graph-toolbar {
  min-height: 62px; padding: 8px 10px; display: flex; align-items: flex-end; gap: 8px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field.compact { margin: 0; }
.field.grow { flex: 1; }
.field label, .scene-code-wrap label, .scene-status-wrap label { font-size: 12px; font-weight: 650; color: var(--muted); }
.field input, .field textarea, .field select, .scene-code-wrap input, .scene-status-wrap select {
  width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 7px; padding: 8px 9px; color: var(--ink);
}
.field textarea { resize: vertical; }
.graph-toolbar input, .graph-toolbar select { min-height: 34px; }
.graph-viewport {
  position: relative; flex: 1 1 0; min-height: 0; overflow: auto; background-color: #f7f6f3;
  background-image: radial-gradient(#d9d7d1 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: grab;
  touch-action: none;
}
.graph-viewport.panning, .graph-viewport.pan-ready { cursor: grabbing; }
.graph-viewport.panning .story-node { cursor: grabbing; }
.graph-viewport:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.graph-viewport:focus-visible .story-node.selected { outline: 2px dashed var(--accent); outline-offset: 5px; }
.story-node.selected.dimmed { opacity: .7; }
.keyboard-hint, .graph-status { padding: 5px 10px; font-size: 12px; background: var(--panel); }
.keyboard-hint { color: var(--muted); border-top: 1px solid var(--line); }
.graph-status:empty { display: none; }
.keyboard-dialog-content { padding: 20px; }
.keyboard-choice-list { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; margin-bottom: 16px; }
.keyboard-choice-list button { text-align: left; overflow-wrap: anywhere; }
.shortcuts-list { display: grid; grid-template-columns: max-content 1fr; gap: 9px 16px; }
.shortcuts-list dt { font-weight: 700; }
.shortcuts-list dd { margin: 0; }
.keyboard-dialog-content button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.graph-canvas { position: relative; width: 4000px; height: 2600px; transform-origin: 0 0; }
.edge-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.edge-path { fill: none; stroke: #8c8e88; stroke-width: 2.2; }
.edge-path.dimmed { opacity: .13; }
.edge-label-bg { fill: rgba(255,255,255,.92); stroke: #d7d6d0; stroke-width: 1; rx: 5; ry: 5; }
.edge-label { font-size: 11px; fill: #494b46; text-anchor: middle; dominant-baseline: middle; }
.edge-label-hit { pointer-events: auto; cursor: pointer; }
.edge-label-bg.edge-label-hit:hover { fill: #fff; stroke: var(--accent); stroke-width: 1.5; }
.node-layer { position: absolute; inset: 0; pointer-events: none; }
.story-node {
  pointer-events: auto;
  position: absolute; width: var(--node-w); min-height: var(--node-h); background: #fff;
  border: 2px solid #b8b7b1; border-radius: 11px; box-shadow: 0 3px 9px rgba(0,0,0,.06);
  padding: 10px 11px; cursor: grab; user-select: none;
}
.story-node:active { cursor: grabbing; }
.story-node.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.story-node.dimmed { opacity: .18; }
.story-node.connect-source { border-color: #b06d27; box-shadow: 0 0 0 3px #f7e8d4; }
.node-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.node-code { font-size: 12px; font-weight: 800; letter-spacing: .04em; color: var(--accent); }
.node-status { font-size: 10px; padding: 2px 6px; border-radius: 999px; background: #efefec; color: #64655f; }
.node-title { font-size: 14px; font-weight: 750; line-height: 1.2; margin-bottom: 6px; }
.node-synopsis { font-size: 11px; color: #6d6f68; line-height: 1.25; max-height: 30px; overflow: hidden; }
.node-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.tag { font-size: 10px; padding: 2px 5px; border-radius: 5px; background: var(--accent-soft); color: #564573; }
.connect-hint {
  position: absolute; left: 20px; bottom: 20px; background: #23231f; color: #fff; padding: 9px 12px; border-radius: 8px; z-index: 10;
}
.inspector-panel { background: var(--panel); overflow: auto; }
.empty-state { padding: 40px 32px; color: var(--muted); }
.empty-state h2 { color: var(--ink); }
.inspector { padding: 18px 20px 60px; }
.inspector-head { display: grid; grid-template-columns: 130px 1fr; gap: 10px; margin-bottom: 12px; }
.scene-code-wrap, .scene-status-wrap { display: flex; flex-direction: column; gap: 5px; }
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lang-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-top: 8px; }
.tab { border: none; border-radius: 7px 7px 0 0; background: transparent; padding: 8px 11px; }
.tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tab-panel { padding-top: 10px; }
.manuscript {
  width: 100%; min-height: 330px; resize: vertical; border: 1px solid var(--line); border-radius: 8px;
  padding: 14px; line-height: 1.55; font-family: Georgia, "Times New Roman", serif; font-size: 16px;
}
.manuscript.notes { min-height: 220px; font-family: inherit; font-size: 14px; }
.branches-section { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.section-head { display: flex; align-items: center; justify-content: space-between; }
.section-head h3 { margin: 0 0 10px; }
.branch-card { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; margin-bottom: 8px; }
.branch-card .branch-main { display: flex; gap: 8px; justify-content: space-between; }
.branch-actions { display:flex; gap:4px; align-items:center; }
.branch-goto { border:1px solid var(--line); background:var(--panel); border-radius:6px; cursor:pointer; padding:3px 7px; font-size:12px; white-space:nowrap; }
.branch-goto:hover { background:var(--hover); }
.branch-edit { border:0; background:transparent; cursor:pointer; opacity:.65; font-size:14px; padding:0 3px; }
.branch-edit:hover { opacity:1; }
.branch-target { font-weight: 750; }
.branch-choice { font-size: 13px; margin-top: 5px; }
.branch-condition { font-size: 11px; color: var(--muted); margin-top: 5px; }
.branch-delete { color: var(--danger); border-color: transparent; background: transparent; padding: 3px 6px; }
.save-state { font-size: 11px; color: var(--muted); text-align: right; margin-top: 12px; }
dialog { border: none; border-radius: 12px; padding: 0; box-shadow: 0 18px 60px rgba(0,0,0,.25); width: min(520px, 90vw); }
dialog::backdrop { background: rgba(0,0,0,.35); }
dialog form { padding: 20px; }
dialog h2 { margin-top: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.muted { color: var(--muted); font-size: 13px; }
code { background: #efefec; padding: 1px 4px; border-radius: 4px; }
@media (max-width: 1050px) {
  .workspace { grid-template-columns: 1fr 430px; }
  .toolbar button:not(.primary), .toolbar .button-like { display: none; }
}

/* v2 – navigace, číselníky, dostupnost postav a skládací shrnutí */
.graph-toolbar { flex-wrap: wrap; }
.nav-hint {
  flex-shrink: 0; pointer-events: none;
  padding: 4px 10px; background: var(--panel); color: var(--muted);
  font-size: 11px;
}
.field-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; }
.link-button, .collapse-button {
  border: 0; background: transparent; padding: 2px 4px; color: var(--accent); font-size: 11px; cursor: pointer;
}
.link-button:hover, .collapse-button:hover { text-decoration: underline; border-color: transparent; }
.field-help { color: var(--muted); font-size: 11px; line-height: 1.35; margin-top: 3px; }
.chip-selector { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; align-content: flex-start; }
.select-chip { position: relative; display: inline-flex; }
.select-chip input { position: absolute; opacity: 0; pointer-events: none; }
.select-chip span {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: #555750;
  font-size: 12px; cursor: pointer; user-select: none;
}
.select-chip input:checked + span { background: var(--accent-soft); border-color: #b8acd1; color: var(--accent); font-weight: 700; }
.character-chip input:checked + span { background: #e7f1eb; border-color: #a9c9b5; color: #356146; }
.character-chip span { border-radius: 7px; }
.node-characters { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 5px; min-height: 14px; }
.character-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 16px; padding: 0 4px;
  border-radius: 4px; background: #e7f1eb; color: #356146; font-size: 9px; font-weight: 800;
}
.collapsible-body { overflow: visible; }
.auto-grow { min-height: 42px; overflow: hidden; resize: vertical; }
.character-catalog-rows { display: flex; flex-direction: column; gap: 7px; }
.character-catalog-row { display: grid; grid-template-columns: minmax(0,1fr) 86px 32px; gap: 7px; align-items: center; }
.character-catalog-row input { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px; }
#tagCatalogInput { resize: vertical; min-height: 150px; }
#catalogDialog { width: min(640px, 92vw); }

/* v2.2 – skrývatelný pravý inspektor */
.workspace.inspector-collapsed { grid-template-columns: minmax(0, 1fr) 0 !important; }
.workspace.inspector-collapsed .inspector-panel { display: none; }
.workspace.inspector-collapsed .graph-panel { border-right: 0; }
#btnToggleInspector { white-space: nowrap; }

/* v2.3 – přepínání jazyka rozhraní CZ/BG */
.ui-language-switch {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 1px solid #555;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}
.ui-language-switch .ui-lang {
  min-width: 34px;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 800;
}
.ui-language-switch .ui-lang:hover { color: #fff; border-color: transparent; }
.ui-language-switch .ui-lang.active {
  background: #fff;
  color: #23231f;
}
@media (max-width: 1050px) {
  .toolbar .ui-language-switch button { display: inline-flex !important; }
}

/* v2.4 – bilingvní projektové číselníky */
.catalog-grid-head {
  display: grid;
  gap: 7px;
  align-items: end;
  margin: 1px 0 5px;
  padding: 0 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tag-grid-head { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; }
.character-grid-head { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 78px 32px; }
.catalog-rows { display: flex; flex-direction: column; gap: 7px; }
.tag-catalog-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 32px; gap: 7px; align-items: center; }
.character-catalog-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 78px 32px; gap: 7px; align-items: center; }
.tag-catalog-row input, .character-catalog-row input {
  width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px 9px;
}
#catalogDialog { width: min(780px, 94vw); }
@media (max-width: 680px) {
  .catalog-grid-head { display: none; }
  .tag-catalog-row, .character-catalog-row { grid-template-columns: 1fr 1fr 32px; }
  .character-catalog-row .character-short { grid-column: 1 / 3; }
}

/* v2.4.1 – kompaktní výběr tagů bez roztahování inspektoru */
.compact-picker { position: relative; min-width: 0; }
.compact-picker-button {
  width: 100%; min-width: 0; height: 34px; display: flex; align-items: center; gap: 8px;
  padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff;
  color: #44463f; text-align: left; cursor: pointer;
}
.compact-picker-button:hover { border-color: #b7b4ad; }
.compact-picker-button[aria-expanded="true"] { border-color: #b8acd1; box-shadow: 0 0 0 2px rgba(114,86,155,.08); }
.compact-picker-summary {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px;
}
.compact-picker-chevron { flex: 0 0 auto; color: var(--muted); font-size: 11px; transition: transform .12s ease; }
.compact-picker-button[aria-expanded="true"] .compact-picker-chevron { transform: rotate(180deg); }
.tag-picker-menu {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 230px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.tag-picker-menu .tag-option {
  position: relative; display: flex; width: 100%; margin: 0;
}
.tag-picker-menu .tag-option input { position: absolute; opacity: 0; pointer-events: none; }
.tag-picker-menu .tag-option span {
  width: 100%; min-height: 30px; display: flex; align-items: center; padding: 5px 8px 5px 28px;
  border-radius: 6px; font-size: 12px; color: #4d4e49; cursor: pointer; user-select: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tag-picker-menu .tag-option span::before {
  content: ''; position: absolute; left: 9px; top: 9px; width: 12px; height: 12px;
  border: 1px solid #b9b8b1; border-radius: 3px; background: #fff;
}
.tag-picker-menu .tag-option:hover span { background: #f6f5f2; }
.tag-picker-menu .tag-option input:checked + span { background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.tag-picker-menu .tag-option input:checked + span::before {
  content: '✓'; display: grid; place-items: center; border-color: #9b89bd; background: #fff;
  color: var(--accent); font-size: 10px; line-height: 1;
}


/* v2.9 – více gamebooků v jednom lokálním editoru */
.gamebook-switch-field { min-width: 180px; }
.gamebook-switch-field select { min-width: 180px; max-width: 260px; }
.book-name-field { min-width: 180px; max-width: 280px; }
.gamebook-actions { display: flex; gap: 4px; align-items: flex-end; }
.gamebook-actions .small { min-height: 34px; padding: 5px 8px; white-space: nowrap; }
.danger-soft { color: var(--danger); }
@media (max-width: 1250px) {
  .book-name-field { max-width: 220px; }
  .gamebook-switch-field select { max-width: 210px; }
}