:root {
  color-scheme: dark;
  --page-bg: #17191d;
  --panel-bg: #22252b;
  --panel-border: #3a3f48;
  --text: #f5f7fa;
  --muted: #aeb5c0;
  --accent: #4fa3ff;
  --cell-size: 20px;
  --tt-black: #000000;
  --tt-red: #ff0000;
  --tt-green: #00ff00;
  --tt-yellow: #ffff00;
  --tt-blue: #0000ff;
  --tt-magenta: #ff00ff;
  --tt-cyan: #00ffff;
  --tt-white: #ffffff;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input { font: inherit; }

button, .button-like {
  border: 1px solid #505763;
  border-radius: 8px;
  background: #30343c;
  color: var(--text);
  padding: 0.65rem 0.85rem;
  cursor: pointer;
  text-decoration: none;
}

button:hover, .button-like:hover { background: #3a3f49; }
button.primary { background: #1768b8; border-color: #2b85db; }
button.primary:hover { background: #1d78cf; }
.button-like.compact { padding: 0.45rem 0.65rem; display: inline-block; }

.app-header {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding: 1.25rem clamp(1rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--panel-border);
  background: #1d2025;
}

h1, h2 { margin: 0; }
h1 { font-size: clamp(1.35rem, 2.5vw, 2rem); }
h2 { font-size: 1.1rem; }
p { color: var(--muted); }
.app-header p, .panel-heading p { margin: 0.25rem 0 0; }
.header-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; justify-content: flex-end; }

.app-layout {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) minmax(390px, 0.72fr);
  gap: 1rem;
  padding: 1rem;
}

.editor-panel, .preview-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  overflow: hidden;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--panel-border);
}

.zoom-control { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); }

.toolbar {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--panel-border);
}

fieldset { border: 0; padding: 0; margin: 0; }
legend { color: var(--muted); font-size: 0.8rem; margin-bottom: 0.35rem; }
.palette, .glyph-buttons { display: flex; gap: 0.32rem; }
.color-button { width: 30px; height: 30px; padding: 4px; border-radius: 6px; }
.color-button span { display: block; width: 100%; height: 100%; border-radius: 3px; border: 1px solid rgba(255,255,255,.25); }
.color-button.active { outline: 2px solid var(--accent); outline-offset: 1px; }
.glyph-buttons button { min-width: 52px; padding: 0.45rem 0.6rem; }
#fontName { display: inline-block; max-width: 190px; margin-left: 0.45rem; color: var(--muted); font-size: 0.82rem; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.editor-wrap { overflow: auto; padding: 1rem; background: #111317; }
.teletext-grid {
  display: grid;
  grid-template-columns: repeat(40, var(--cell-size));
  grid-template-rows: repeat(25, calc(var(--cell-size) * 1.15));
  width: max-content;
  border: 1px solid #4d535d;
  background: #000;
  font-family: "TeletextCustom", "Courier New", monospace;
  font-size: calc(var(--cell-size) * 0.82);
  line-height: 1;
  user-select: none;
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--cell-size);
  height: calc(var(--cell-size) * 1.15);
  border: 0;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 0;
  outline: none;
  white-space: pre;
  overflow: hidden;
  cursor: text;
}
.cell:focus, .cell.selected { box-shadow: inset 0 0 0 2px var(--accent); z-index: 2; }
.cell.row-marker { border-bottom-color: rgba(255,255,255,.2); }
.cell.col-marker { border-right-color: rgba(255,255,255,.2); }

.help-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; color: var(--muted); font-size: 0.82rem; }
.preview-panel { align-self: start; }
.preview-shell { overflow: auto; padding: 1rem; background: #0b0c0f; }
.teletext-preview {
  margin: 0 auto;
  width: max-content;
  min-width: 40ch;
  background: #000;
  color: #fff;
  font-family: "TeletextCustom", "Courier New", monospace;
  font-size: clamp(14px, 1.3vw, 22px);
  line-height: 1.15;
  white-space: pre;
  font-variant-ligatures: none;
  padding: 0;
}
details { margin: 1rem; color: var(--muted); }
details p { line-height: 1.5; }

@media (max-width: 1180px) {
  .app-layout { grid-template-columns: 1fr; }
  .preview-panel { order: -1; }
}

@media (max-width: 720px) {
  .app-header { align-items: flex-start; flex-direction: column; }
  .header-actions { justify-content: flex-start; }
  .help-row { flex-direction: column; }
}

.cell-half { position:absolute; left:0; width:100%; height:50%; pointer-events:none; }
.cell-half.top { top:0; }
.cell-half.bottom { bottom:0; }
.cell-char { position:relative; z-index:1; width:100%; text-align:center; }
.preview-cell { display:inline-flex; position:relative; width:1ch; height:1.15em; line-height:1.15em; align-items:center; justify-content:center; vertical-align:top; overflow:hidden; }
.preview-cell .half { position:absolute; left:0; width:100%; height:50%; }
.preview-cell .half.top { top:0; }
.preview-cell .half.bottom { bottom:0; }
.preview-cell .char { position:relative; z-index:1; }


/* Zelfgetekende teletekstvormen via inline SVG. */
.cell-glyph, .preview-glyph {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  pointer-events: none;
}
.cell-char, .preview-cell .char { position:relative; z-index:4; }

/* v2.5: glyphs als gewone HTML-lagen; betrouwbaar bij lokaal openen. */
.cell-glyph, .preview-glyph {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.glyph-part {
  position: absolute;
  display: block;
  min-width: 1px;
  min-height: 1px;
}
.glyph-part.full { inset: 0; }
.glyph-part.horizontal { left: 0; top: 40%; width: 100%; height: 20%; }
.glyph-part.vertical { left: 10%; top: 15%; width: 20%; height: 75%; }
.glyph-part.horizontal.corner-bottom { left: 10%; top: 70%; width: 80%; height: 20%; }

/* v2.8: actieve tekentool en vormweergave. */
.glyph-buttons { flex-wrap: wrap; max-width: 520px; }
.glyph-row-break { flex-basis: 100%; width: 0; height: 0; }
.glyph-buttons button.active-tool { outline: 2px solid var(--accent); outline-offset: 1px; background: #1768b8; }
.cell-char, .preview-cell .char { font-family: "TeletextCustom", "DejaVu Sans Mono", "Courier New", monospace; font-weight: 700; }
.shape-cell .char { transform: scale(1.12); }



/* v3.0: duidelijke aanwijzing van actieve en aangewezen rastercel. */
.cursor-position {
  position: sticky;
  left: 0;
  z-index: 20;
  width: max-content;
  margin: 0 0 0.55rem;
  padding: 0.38rem 0.65rem;
  border: 1px solid #78c7ff;
  border-radius: 999px;
  background: #102b40;
  color: #e8f7ff;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cell.cursor-row { border-bottom-color: rgba(79,163,255,.32); }
.cell.cursor-col { border-right-color: rgba(79,163,255,.32); }
.cell.cursor-hover {
  box-shadow: inset 0 0 0 2px #57d6ff, 0 0 0 1px #000, 0 0 10px rgba(87,214,255,.85);
  z-index: 5;
}
.cell.selected {
  box-shadow: inset 0 0 0 3px #ffe45c, 0 0 0 1px #000;
  z-index: 6;
}
.cell.selected.cursor-hover {
  box-shadow: inset 0 0 0 3px #ffe45c, inset 0 0 0 5px #57d6ff, 0 0 12px rgba(87,214,255,.9);
}

/* Tweekleurige mozaïekblokken: bovenkleur is de basis, onderkleur het afwijkende deel. */
.cell-mosaic,
.preview-mosaic {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.mosaic-piece { position: absolute; display: block; }
.mosaic-piece.q-tl { left: 0; top: 0; width: 50%; height: 50%; }
.mosaic-piece.q-tr { right: 0; top: 0; width: 50%; height: 50%; }
.mosaic-piece.q-bl { left: 0; bottom: 0; width: 50%; height: 50%; }
.mosaic-piece.q-br { right: 0; bottom: 0; width: 50%; height: 50%; }
.mosaic-piece.half-left { left: 0; top: 0; width: 50%; height: 100%; }



/* ChatGPT: duidelijke actieve cel */
.cell.selected{
  outline:3px solid #ff0000 !important;
  outline-offset:-3px;
  border-color:#ff0000 !important;
  z-index:10;
  position:relative;
}

.mosaic-piece.half-bottom { left: 0; bottom: 0; width: 100%; height: 50%; }

/* v3.4: standaard 2 × 3-teletekstmozaïek. */
.mosaic-tool {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  grid-template-rows: repeat(3, 15px);
  gap: 2px;
  padding: 4px;
  border: 1px solid #505763;
  border-radius: 6px;
  background: #111317;
}
.mosaic-tool .mosaic-bit {
  min-width: 0;
  width: 22px;
  height: 15px;
  padding: 0;
  border-radius: 2px;
  background: #000;
}
.mosaic-tool .mosaic-bit.on {
  background: var(--tt-cyan);
  outline: 1px solid #fff;
}
.mosaic-piece.sixel-0 { left:0; top:0; width:50%; height:33.3334%; }
.mosaic-piece.sixel-1 { right:0; top:0; width:50%; height:33.3334%; }
.mosaic-piece.sixel-2 { left:0; top:33.3333%; width:50%; height:33.3334%; }
.mosaic-piece.sixel-3 { right:0; top:33.3333%; width:50%; height:33.3334%; }
.mosaic-piece.sixel-4 { left:0; bottom:0; width:50%; height:33.3334%; }
.mosaic-piece.sixel-5 { right:0; bottom:0; width:50%; height:33.3334%; }

.nos-import{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.nos-import label{font-size:.86rem;color:var(--muted,#b9c0ca)}
.nos-import input{width:5.5rem;padding:.55rem .6rem;border:1px solid #586171;border-radius:.45rem;background:#111722;color:#fff;font:inherit}
.nos-import input:focus{outline:2px solid #00b7ff;outline-offset:2px}

/* v4.1 TeleStudio: bron- en paginabrowser. */
.studio-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem;
  align-items: start;
}
.work-area {
  display: grid;
  grid-template-columns: minmax(760px, 1fr) minmax(390px, .72fr);
  gap: 1rem;
  min-width: 0;
}
.browser-panel {
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
}
.source-tabs { display:flex; gap:.4rem; padding:.75rem 1rem; border-bottom:1px solid var(--panel-border); }
.source-tab { flex:1; padding:.5rem; }
.source-tab.active { background:#1768b8; border-color:#2b85db; }
.page-search { padding:.85rem 1rem; border-bottom:1px solid var(--panel-border); }
.page-search label { display:block; color:var(--muted); font-size:.8rem; margin-bottom:.35rem; }
.page-search > div { display:flex; gap:.4rem; }
.page-search input { min-width:0; width:100%; border:1px solid #505763; border-radius:8px; background:#111317; color:var(--text); padding:.55rem .65rem; }
.page-browser { padding:.45rem; }
.browser-section { margin-bottom:.35rem; }
.browser-section-title { padding:.55rem .65rem .35rem; color:var(--muted); font-size:.75rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.browser-page { width:100%; display:grid; grid-template-columns:3.2rem 1fr; gap:.45rem; text-align:left; padding:.5rem .6rem; margin:.12rem 0; border-color:transparent; background:transparent; }
.browser-page:hover { background:#30343c; }
.browser-page.active { background:#123c61; border-color:#2b85db; }
.browser-page .number { color:#ffeb66; font-family:"Courier New",monospace; font-weight:800; }
.browser-page .label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.recent-section { border-top:1px solid var(--panel-border); padding:.35rem .45rem .75rem; }
.recent-pages { display:flex; flex-wrap:wrap; gap:.35rem; padding:0 .55rem; }
.recent-pages button { padding:.35rem .55rem; font-family:"Courier New",monospace; }
.page-badge { display:inline-block; margin-left:.45rem; padding:.15rem .42rem; border-radius:999px; background:#123c61; color:#aadaff; font-size:.72rem; vertical-align:middle; }
@media (max-width: 1450px) {
  .studio-layout { grid-template-columns:220px minmax(0,1fr); }
  .work-area { grid-template-columns:1fr; }
  .preview-panel { order:-1; }
}
@media (max-width: 900px) {
  .studio-layout { grid-template-columns:1fr; }
  .browser-panel { position:static; max-height:none; }
  .page-browser { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
  .browser-section { display:contents; }
  .browser-section-title { grid-column:1/-1; }
}


/* TeleStudio 5.0 */
.version-tag{font-size:.42em;vertical-align:middle;letter-spacing:.08em;opacity:.72;font-weight:700}
button:disabled{opacity:.45;cursor:not-allowed}
.developer-panel{margin-top:1rem;border:1px solid var(--border,#364154);border-radius:.6rem;padding:.65rem;background:rgba(0,0,0,.16)}
.developer-panel summary{cursor:pointer;font-weight:700}
.developer-grid{display:grid;grid-template-columns:max-content 1fr;gap:.35rem .8rem;margin:.8rem 0 0;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.82rem}
.developer-grid dt{opacity:.65}.developer-grid dd{margin:0;overflow-wrap:anywhere}

/* TeleStudio 5.1 — projecten en tabs */
.project-controls{display:grid;gap:.55rem;padding:.8rem;border:1px solid var(--border,#354052);border-radius:.55rem;margin:.75rem 0;background:rgba(255,255,255,.025)}
.project-controls label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;opacity:.7}
.project-controls input{width:100%;box-sizing:border-box}
.project-button-row{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.project-button-row button:first-child{grid-column:1/-1}
.page-tabs{display:flex;gap:.3rem;overflow-x:auto;padding:.45rem .6rem;border-bottom:1px solid var(--border,#354052);background:rgba(0,0,0,.18);min-height:2.25rem}
.page-tab{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;border-radius:.4rem .4rem 0 0;padding:.38rem .55rem}
.page-tab.active{background:#172334;box-shadow:inset 0 -2px 0 #00d8ff}
.page-tab .dirty{font-size:.7rem;opacity:.8}
.page-tab .close{border:0;background:transparent;padding:0 .15rem;font-size:1rem;line-height:1;opacity:.65}
.page-tab .close:hover{opacity:1}
.browser-page .page-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.78;font-size:.8rem}
.project-status{font-size:.75rem;opacity:.72;padding:.3rem .1rem}

/* TeleStudio 5.2 — rechthoekselectie en blokbewerking */
.cell.block-selected { box-shadow: inset 0 0 0 2px rgba(255,255,255,.72); }
.cell.block-selected::after { content:""; position:absolute; inset:0; background:rgba(0,170,255,.20); pointer-events:none; }
.cell.selection-anchor { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #008cff; }
.block-button-row { display:flex; flex-wrap:wrap; gap:.35rem; }
.selection-info { display:block; margin-top:.45rem; font-size:.78rem; opacity:.75; }


/* TeleStudio 5.5 — vergelijkingsmodus */
.diff-panel{margin-top:1rem;border:1px solid var(--panel-border,#354052);border-radius:.7rem;background:rgba(0,0,0,.2);padding:.8rem}
.diff-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.7rem}
.diff-heading h3{margin:0 0 .2rem}.diff-heading p{margin:0;color:var(--muted);font-size:.85rem}
.diff-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;overflow:auto}
.diff-columns figure{margin:0;min-width:520px}.diff-columns figcaption{font-weight:800;margin-bottom:.35rem}
.diff-grid{display:grid;grid-template-columns:repeat(40,1fr);aspect-ratio:40/25;background:#000;border:1px solid #48505e;min-width:520px;font-family:"Courier New",monospace}
.diff-cell{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:1/1.42;font-size:clamp(7px,.72vw,13px);line-height:1}
.diff-cell>i,.diff-cell>b{position:absolute;left:0;width:100%;height:50%}.diff-cell>i{top:0}.diff-cell>b{bottom:0}.diff-cell em{position:relative;z-index:3;font-style:normal}
.diff-mosaic{position:absolute;inset:0;z-index:2}.diff-mosaic u{position:absolute;text-decoration:none}.diff-mosaic .sixel-0{left:0;top:0;width:50%;height:33.334%}.diff-mosaic .sixel-1{right:0;top:0;width:50%;height:33.334%}.diff-mosaic .sixel-2{left:0;top:33.333%;width:50%;height:33.334%}.diff-mosaic .sixel-3{right:0;top:33.333%;width:50%;height:33.334%}.diff-mosaic .sixel-4{left:0;bottom:0;width:50%;height:33.334%}.diff-mosaic .sixel-5{right:0;bottom:0;width:50%;height:33.334%}
.diff-cell.changed::after{content:"";position:absolute;inset:0;z-index:5;box-shadow:inset 0 0 0 2px #ff3b3b;background:rgba(255,45,45,.18);pointer-events:none}
.diff-legend{margin-top:.55rem;color:var(--muted);font-size:.8rem}.diff-swatch{display:inline-block;width:.8rem;height:.8rem;border:2px solid #ff3b3b;background:rgba(255,45,45,.18);vertical-align:-.12rem;margin-right:.25rem}
#compareBtn.active{background:#7d2631;border-color:#ff5968}
@media(max-width:1100px){.diff-columns{grid-template-columns:1fr}}

/* TeleStudio 5.5.1 — gelijk uitgelijnde werkruimte */
.work-area { display:block; min-width:0; }
.editor-panel { min-width:0; }
.workspace-canvases {
  --editor-share:58%;
  display:grid;
  grid-template-columns:minmax(420px,var(--editor-share)) 10px minmax(360px,1fr);
  align-items:stretch;
  min-width:0;
  background:#111317;
  border-bottom:1px solid var(--panel-border);
}
.canvas-column { min-width:0; margin:0; border:0; border-radius:0; background:var(--panel-bg); overflow:hidden; }
.canvas-heading {
  height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.65rem 1rem;
  border-bottom:1px solid var(--panel-border);
  background:#1d2025;
}
.canvas-heading h3 { margin:0; font-size:.95rem; }
.canvas-hint { color:var(--muted); font-size:.78rem; }
.editor-canvas-column .editor-wrap { height:calc(100% - 48px); min-height:610px; }
.preview-panel > .panel-heading {
  height:48px;
  padding:.65rem 1rem;
  background:#1d2025;
}
.preview-panel > .panel-heading h2 { font-size:.95rem; }
.preview-panel > .panel-heading p { display:none; }
.preview-panel .preview-shell { min-height:610px; display:flex; align-items:flex-start; justify-content:center; }
.workspace-splitter {
  position:relative;
  cursor:col-resize;
  touch-action:none;
  background:#181b20;
  border-left:1px solid #3a3f48;
  border-right:1px solid #3a3f48;
}
.workspace-splitter::after {
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:3px; height:48px;
  border-radius:4px;
  transform:translate(-50%,-50%);
  background:#687282;
}
.workspace-splitter:hover,.workspace-splitter.dragging,.workspace-splitter:focus { background:#123c61; outline:none; }
.workspace-splitter:hover::after,.workspace-splitter.dragging::after,.workspace-splitter:focus::after { background:#78c7ff; }
.studio-statusbar {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.45rem .85rem;
  border-top:1px solid var(--panel-border);
  background:#181b20;
  color:var(--muted);
  font-size:.78rem;
}
.diff-panel { margin:.8rem; }
@media (max-width:1180px) {
  .workspace-canvases { grid-template-columns:1fr; }
  .workspace-splitter { display:none; }
  .preview-panel { order:0; border-top:1px solid var(--panel-border); }
  .editor-canvas-column .editor-wrap,.preview-panel .preview-shell { min-height:0; }
}
@media (max-width:720px) {
  .studio-statusbar { flex-direction:column; gap:.2rem; }
}

/* TeleStudio 5.5.1 — uitgelijnde werkruimte */
.work-area { display:block; min-width:0; }
.editor-panel { width:100%; }
.comparison-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 1rem;
  border-bottom:1px solid var(--panel-border);
  background:#1b1e23;
}
.comparison-actions { display:flex; gap:.45rem; flex-wrap:wrap; }
#comparisonHint { color:var(--muted); font-size:.82rem; }
.workspace-split {
  --editor-share: 58%;
  display:grid;
  grid-template-columns:minmax(0,var(--editor-share)) 10px minmax(0,1fr);
  min-height:650px;
  background:#0b0c0f;
}
.workspace-pane {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:#111317;
}
.workspace-pane-heading {
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem .8rem;
  border-bottom:1px solid var(--panel-border);
  background:#20242a;
}
.workspace-pane-heading span { color:var(--muted); font-size:.78rem; }
.workspace-pane .editor-wrap,
.workspace-pane .preview-shell {
  flex:1;
  min-height:0;
  margin:0;
  padding:1rem;
  overflow:auto;
}
.preview-workspace .preview-shell {
  display:flex;
  align-items:flex-start;
  justify-content:center;
}
.workspace-splitter {
  position:relative;
  cursor:col-resize;
  background:#252a31;
  border-left:1px solid #3d444f;
  border-right:1px solid #3d444f;
  touch-action:none;
}
.workspace-splitter::after {
  content:"";
  position:absolute;
  left:3px;
  top:50%;
  width:2px;
  height:52px;
  transform:translateY(-50%);
  border-radius:2px;
  background:#788391;
  box-shadow:3px 0 0 #788391;
}
.workspace-splitter:hover,
.workspace-splitter:focus { background:#1768b8; outline:none; }
.workspace-splitter.dragging { background:#2b85db; }
.info-panels {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
  padding:0 1rem 1rem;
}
.info-panels details { margin:0; }
.diff-panel { margin:1rem; }

@media (max-width:1450px) {
  .work-area { display:block; }
  .preview-panel { order:initial; }
}
@media (max-width:1050px) {
  .workspace-split {
    display:grid;
    grid-template-columns:1fr;
    min-height:0;
  }
  .workspace-splitter { display:none; }
  .workspace-pane { min-height:560px; }
  .preview-workspace { border-top:1px solid var(--panel-border); }
  .info-panels { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  .comparison-bar { align-items:flex-start; flex-direction:column; }
}

/* ==========================================================
   TeleStudio 5.6 — Windows UI Refresh
   ========================================================== */
:root {
  color-scheme: light;
  --page-bg: #dfe3e8;
  --panel-bg: #f7f7f7;
  --panel-border: #aeb4bb;
  --text: #171717;
  --muted: #555d66;
  --accent: #0078d4;
  --win-blue: #0067c0;
  --win-blue-dark: #075a9c;
  --win-face: #f3f3f3;
  --win-face-2: #e7e7e7;
  --win-border: #a7a7a7;
  --win-shadow: rgba(0,0,0,.18);
}

html, body { height:100%; }
body {
  background:#d9dde2;
  color:var(--text);
  font-family:"Segoe UI", Tahoma, Arial, sans-serif;
  font-size:13px;
}

/* Compact title bar */
.app-header {
  min-height:38px;
  padding:0;
  gap:0;
  align-items:stretch;
  flex-direction:column;
  background:linear-gradient(#0877c9,#0067b8);
  border:0;
  color:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.app-header > div:first-child {
  display:flex;
  align-items:center;
  min-height:38px;
  padding:0 12px;
}
.app-header h1 {
  font-size:15px;
  font-weight:600;
  letter-spacing:0;
}
.app-header h1::before {
  content:"T";
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  margin-right:8px;
  border:1px solid rgba(255,255,255,.7);
  background:#111;
  color:#fff;
  font:700 14px/1 Consolas,monospace;
  box-shadow:inset 0 0 0 2px #00a7e8;
}
.app-header p { display:none; }
.version-tag { opacity:.85; font-size:.72em; }

/* Header buttons become a classic command toolbar */
.header-actions {
  order:2;
  justify-content:flex-start;
  align-items:center;
  gap:3px;
  padding:5px 7px;
  border-top:1px solid #b7bcc2;
  border-bottom:1px solid #92979d;
  background:linear-gradient(#fafafa,#e7e7e7);
  color:#111;
}
.header-actions button,
.header-actions .button-like {
  min-height:30px;
}
.header-actions > *:nth-child(4),
.header-actions > *:nth-child(10),
.header-actions > *:nth-child(18) {
  margin-left:7px;
  border-left-color:#777;
}

.windows-menubar {
  display:flex;
  align-items:center;
  min-height:28px;
  padding:1px 5px;
  background:#f5f5f5;
  border-bottom:1px solid #a6a6a6;
  box-shadow:0 1px 0 #fff inset;
}
.windows-menubar button {
  border:1px solid transparent;
  border-radius:2px;
  background:transparent;
  color:#111;
  padding:4px 9px;
  min-height:24px;
}
.windows-menubar button:hover,
.windows-menubar button:focus {
  border-color:#91c9f7;
  background:#e5f3ff;
  outline:none;
}

button, .button-like {
  border:1px solid #9c9c9c;
  border-radius:2px;
  background:linear-gradient(#fff,#e7e7e7);
  color:#111;
  padding:5px 9px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
button:hover, .button-like:hover {
  border-color:#0078d4;
  background:#e5f3ff;
}
button:active, .button-like:active {
  background:#cce8ff;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.18);
}
button:focus-visible, .button-like:focus-visible {
  outline:1px dotted #111;
  outline-offset:-4px;
}
button.primary {
  color:#fff;
  border-color:#005a9e;
  background:linear-gradient(#1688df,#006fc4);
}
button.primary:hover { background:linear-gradient(#2798ed,#087acb); }
button:disabled { color:#888; background:#ececec; border-color:#bbb; }

input, select, textarea {
  border:1px solid #7a7a7a;
  border-radius:0;
  background:#fff;
  color:#111;
  padding:4px 6px;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.08);
}
input:focus, select:focus, textarea:focus {
  border-color:#0078d4;
  outline:1px solid #0078d4;
}
.nos-import input { background:#fff; color:#111; border-radius:0; padding:4px 6px; }
.nos-import label { color:#333; }

.studio-layout {
  grid-template-columns:210px minmax(0,1fr);
  gap:6px;
  padding:6px;
  background:#cfd3d8;
}
.browser-panel,
.editor-panel,
.preview-panel,
.canvas-column {
  border:1px solid #9fa4aa;
  border-radius:0;
  background:#f5f5f5;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.browser-panel { padding:6px; }
.panel-heading {
  padding:7px 9px;
  border-bottom:1px solid #b5b5b5;
  background:linear-gradient(#fafafa,#e8e8e8);
}
h2 { color:#111; font-size:13px; font-weight:600; }
.panel-heading p { color:#666; font-size:11px; }

.source-tabs, .page-tabs {
  gap:0;
  padding:4px 4px 0;
  background:#dedede;
  border-bottom:1px solid #8f8f8f;
}
.source-tab, .page-tab {
  margin-bottom:-1px;
  border:1px solid #aaa;
  border-radius:3px 3px 0 0;
  background:linear-gradient(#fafafa,#dfdfdf);
  color:#222;
  padding:5px 9px;
}
.source-tab.active, .page-tab.active {
  border-bottom-color:#fff;
  background:#fff;
  color:#111;
  box-shadow:none;
}

.page-search, .project-controls, .recent-section {
  border-color:#b0b0b0;
  border-radius:0;
  background:#f1f1f1;
}
.page-browser {
  border:1px solid #9f9f9f;
  background:#fff;
}
.browser-page {
  border-radius:0 !important;
  color:#111 !important;
}
.browser-page:hover { background:#e5f3ff !important; }
.browser-page.active { background:#0078d4 !important; color:#fff !important; }
.browser-section-title { color:#333; }

.toolbar {
  gap:6px;
  padding:6px;
  background:#ececec;
  border-bottom:1px solid #a5a5a5;
}
.toolbar fieldset {
  position:relative;
  padding:18px 6px 6px;
  border:1px solid #aaa;
  background:#f8f8f8;
  box-shadow:inset 0 1px 0 #fff;
}
.toolbar legend {
  position:absolute;
  top:3px;
  left:7px;
  color:#333;
  font-size:11px;
  font-weight:600;
  margin:0;
}
.color-button { width:25px; height:25px; padding:2px; border-radius:1px; }
.color-button span { border-radius:0; border-color:#777; }
.color-button.active { outline:2px solid #0078d4; outline-offset:1px; }
.glyph-buttons button, .block-button-row button { min-width:38px; padding:4px 6px; }
.glyph-buttons button.active-tool { background:#cce8ff; color:#111; border-color:#0078d4; outline:none; }
.mosaic-tool { border-radius:0; border-color:#888; background:#d8d8d8; }

.comparison-bar {
  padding:5px 7px;
  background:linear-gradient(#f7f7f7,#e2e2e2);
  border-bottom:1px solid #999;
}
#comparisonHint { color:#555; }

.canvas-heading,
.preview-panel > .panel-heading,
.workspace-pane-heading {
  height:34px;
  min-height:34px;
  padding:5px 8px;
  background:linear-gradient(#f8f8f8,#dedede);
  border-bottom:1px solid #999;
  color:#111;
}
.canvas-heading h3 { font-size:12px; }
.canvas-hint { color:#555; }
.editor-wrap { background:#3d3d3d; padding:8px; }
.preview-shell { background:#333; padding:8px; }
.teletext-grid { border:1px solid #777; box-shadow:0 0 0 1px #111, 0 2px 5px rgba(0,0,0,.45); }
.teletext-preview { box-shadow:0 0 0 1px #111, 0 2px 5px rgba(0,0,0,.45); }
.cursor-position {
  border:1px solid #5b9bd5;
  border-radius:0;
  background:#e5f3ff;
  color:#111;
  padding:3px 7px;
  font-weight:600;
}

.workspace-splitter {
  background:#d0d0d0;
  border-left:1px solid #999;
  border-right:1px solid #fff;
}
.workspace-splitter::after { background:#777; box-shadow:3px 0 0 #777; }
.workspace-splitter:hover,
.workspace-splitter:focus,
.workspace-splitter.dragging { background:#99c9ed; }

.info-panels details, details, .developer-panel {
  color:#333;
  border-color:#aaa;
  border-radius:0;
  background:#f5f5f5;
}
details summary { color:#222; }
details p { color:#555; }
code { background:#e5e5e5; color:#111; }

.diff-panel {
  border-color:#999;
  border-radius:0;
  background:#efefef;
}
.diff-heading p, .diff-legend { color:#555; }

.studio-statusbar {
  padding:3px 7px;
  min-height:23px;
  align-items:center;
  border-top:1px solid #9a9a9a;
  background:#f0f0f0;
  color:#222;
  box-shadow:inset 0 1px 0 #fff;
}
.studio-statusbar span + span {
  border-left:1px solid #aaa;
  padding-left:9px;
}
.help-row {
  padding:5px 8px;
  border-top:1px solid #bbb;
  background:#e8e8e8;
  color:#444;
  font-size:11px;
}

/* Windows-blue selection and focus */
.cell.block-selected::after { background:rgba(0,120,212,.28); }
.cell.selection-anchor { box-shadow:inset 0 0 0 2px #fff, inset 0 0 0 4px #0078d4; }
.cell.selected { outline:2px solid #0078d4 !important; outline-offset:-2px; border-color:#0078d4 !important; }
.cell.cursor-hover { box-shadow:inset 0 0 0 2px #00a2ed; }
#compareBtn.active { background:#cce8ff; border-color:#0078d4; color:#111; }

@media (max-width:1050px) {
  .studio-layout { grid-template-columns:1fr; }
  .browser-panel { max-height:none; }
}
@media (max-width:720px) {
  .windows-menubar { overflow-x:auto; }
  .header-actions { flex-wrap:wrap; }
}


/* ==========================================================
   TeleStudio 5.6.3 — kleurenpalet lager uitgelijnd
   ========================================================== */
.studio-layout {
  --browser-width: 210px;
  grid-template-columns: var(--browser-width) 6px minmax(0, 1fr);
  gap: 8px;
  padding: 8px;
}
.browser-splitter {
  align-self: stretch;
  min-height: 320px;
  cursor: col-resize;
  border-left: 1px solid #9a9a9a;
  border-right: 1px solid #fff;
  background: linear-gradient(90deg, #d2d2d2, #efefef 50%, #c3c3c3);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.65);
  touch-action: none;
}
.browser-splitter:hover,
.browser-splitter.dragging,
.browser-splitter:focus-visible {
  background: #cce8ff;
  outline: 1px solid #0078d4;
  outline-offset: 0;
}

/* Elk kleurenkader gebruikt twee compacte rijen van vier vakjes. */
.toolbar .palette {
  display: grid;
  grid-template-columns: repeat(4, 25px);
  grid-auto-rows: 25px;
  gap: 4px;
  width: max-content;
  margin-top: 20px;
}
.toolbar fieldset {
  box-sizing: border-box;
  min-width: 124px;
}
.toolbar {
  gap: 8px;
}

/* Windows-achtig invoerveld onder 'Ga naar pagina'. */
#browserPageInput {
  background: #e9e9e9 !important;
  color: #000 !important;
  border-color: #7a7a7a !important;
}
#browserPageInput:focus {
  background: #f2f2f2 !important;
  border-color: #0078d4 !important;
}

/* Paginanummers blijven zwart, ook op de actieve pagina. */
.browser-page .number,
.browser-page.active .number {
  color: #000 !important;
}
.browser-page.active {
  background: #cce8ff !important;
  color: #000 !important;
  border-color: #0078d4 !important;
}
.browser-page.active:hover {
  background: #b9ddfa !important;
}

/* Rustige, gelijke paneelafstand. */
.work-area,
.workspace-split,
.info-panels {
  gap: 8px;
}
.browser-panel,
.editor-panel,
.preview-panel,
.canvas-column,
.toolbar fieldset {
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .studio-layout {
    grid-template-columns: 1fr;
  }
  .browser-splitter {
    display: none;
  }
}


/* v5.6.6: T-splitsingen, kruis en speciale tekens op één horizontale regel. */
.special-character-row {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 2px;
}
.glyph-buttons .special-character-row > button {
  flex: 0 0 auto;
}
.glyph-buttons .special-character-button {
  min-width: 30px;
  width: 30px;
  height: 28px;
  padding: 2px;
  font-size: 16px;
  line-height: 1;
}

/* v5.6.8: tekenmodi boven de lijn- en speciale tekens. */
.drawing-mode-row {
  display: flex;
  flex: 0 0 100%;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.drawing-mode-row > button {
  flex: 0 0 auto;
}

.mosaic-tool{display:flex;align-items:flex-start;gap:8px}
.mosaic-mode-buttons{display:flex;flex-direction:column;gap:4px}

/* v5.6.10: mozaïekraster en modusknoppen zijn aparte elementen naast elkaar. */
.mosaic-control-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 100%;
}
.mosaic-control-group .mosaic-tool {
  flex: 0 0 auto;
}
.mosaic-mode-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.mosaic-mode-buttons > button {
  flex: 0 0 auto;
}


/* v5.6.11: herstel 2 x 3-mozaïekraster en zet modusknoppen horizontaal ernaast. */
.mosaic-control-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: max-content;
  margin-bottom: 4px;
}

.mosaic-control-group .mosaic-tool {
  display: grid;
  grid-template-columns: repeat(2, 22px);
  grid-template-rows: repeat(3, 16px);
  gap: 2px;
  flex: 0 0 auto;
  width: max-content;
  padding: 4px;
  box-sizing: content-box;
}

.mosaic-control-group .mosaic-bit {
  width: 22px;
  min-width: 22px;
  height: 16px;
  padding: 0;
  margin: 0;
}

.mosaic-control-group .mosaic-mode-buttons {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
}

.mosaic-control-group .mosaic-mode-buttons > button {
  flex: 0 0 auto;
}


/* v5.6.12 — functionele Windows-menu's */
.windows-menubar { position:relative; overflow:visible; z-index:1000; }
.menu-group { position:relative; }
.windows-menubar .menu-title { white-space:nowrap; }
.menu-group.open > .menu-title { border-color:#0078d4; background:#cce8ff; }
.menu-popup {
  display:none; position:absolute; top:100%; left:0; min-width:245px; padding:3px;
  background:#f4f4f4; border:1px solid #777; box-shadow:2px 3px 7px rgba(0,0,0,.28); z-index:1100;
}
.menu-group.open > .menu-popup { display:block; }
.menu-popup-right { left:auto; right:0; }
.windows-menubar .menu-popup button {
  display:flex; width:100%; min-height:25px; align-items:center; justify-content:space-between;
  gap:20px; padding:4px 24px 4px 22px; border:1px solid transparent; border-radius:0;
  background:transparent; box-shadow:none; text-align:left; white-space:nowrap;
}
.windows-menubar .menu-popup button:hover,
.windows-menubar .menu-popup button:focus { border-color:#91c9f7; background:#e5f3ff; }
.menu-popup button span { color:#555; margin-left:auto; }
.menu-separator { height:1px; margin:3px 5px; background:#b9b9b9; border-bottom:1px solid #fff; }
.studio-layout.browser-hidden { grid-template-columns:0 0 minmax(0,1fr) !important; }
.studio-layout.browser-hidden .browser-panel,
.studio-layout.browser-hidden .browser-splitter { display:none; }
@media (max-width:720px) { .windows-menubar { overflow:visible; } }

/* v5.6.14: ruimere, volledig gevulde hoofdmenu's. */
.windows-menubar .menu-popup {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  min-width: 250px;
}
.windows-menubar .menu-popup button span {
  margin-left: auto;
  opacity: .72;
  padding-left: 18px;
}

/* v5.6.14: hoofdmenu bovenaan, opdrachtknoppen direct daaronder. */
body > .windows-menubar {
  position: relative;
  z-index: 1000;
}
body > .header-actions {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  flex: 0 0 auto;
}

/* v5.6.15: lichtkrant-easteregg voor Teletekstpagina 888. */
.editor-wrap,
.preview-shell {
  position: relative;
  overflow: hidden;
}
.page-888-ticker {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  z-index: 50;
  overflow: hidden;
  pointer-events: none;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  background: #000;
  color: #ff0;
  box-shadow: 0 0 12px rgba(255,255,0,.75);
  font-family: "Courier New", monospace;
  font-size: clamp(14px, 1.65vw, 25px);
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}
.page-888-active .page-888-ticker {
  display: block;
}
.page-888-ticker-track {
  display: inline-block;
  min-width: max-content;
  padding-left: 100%;
  animation: page-888-marquee 13s linear infinite;
}
.page-888-preview-ticker {
  bottom: 18%;
  font-size: clamp(12px, 1.15vw, 20px);
}
@keyframes page-888-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-888-ticker-track {
    animation-duration: 32s;
  }
}


/* TeleStudio 6.0: compacte bronkeuze in de importwerkbalk. */
.provider-import {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.provider-import select {
  min-width: 92px;
  height: 28px;
  color: #111;
  background: #f3f3f3;
  border: 1px solid #8a8a8a;
}

/* v9.2 — uitsluitend klassieke tv-weergave, ook op kleine schermen. */
.editor-wrap,
.preview-shell {
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.teletext-grid,
.teletext-preview {
  flex: 0 0 auto;
  max-width: none;
  white-space: pre;
}

@media (max-width: 720px) {
  /* De bediening mag stapelen; het 40×25-raster zelf wordt nooit een lijst. */
  .editor-wrap,
  .preview-shell {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding: 8px;
  }

  .teletext-grid {
    min-width: calc(40 * var(--cell-size));
  }

  .teletext-preview {
    min-width: 40ch;
    width: max-content;
  }

  .source-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .source-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}



/* v10.6 — uniforme provider- en subpaginanavigatie. */
.page-search > div:first-of-type {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) auto auto;
  gap: 6px;
}

.subpage-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.subpage-controls[hidden],
.fasttext-links[hidden],
.source-technical-info[hidden] {
  display: none;
}

.fasttext-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.fasttext-link {
  min-width: 0;
  font-weight: 700;
}

.fasttext-slot-0 { border-bottom: 3px solid #f33; }
.fasttext-slot-1 { border-bottom: 3px solid #3c3; }
.fasttext-slot-2 { border-bottom: 3px solid #dd3; }
.fasttext-slot-3 { border-bottom: 3px solid #3cc; }

.source-technical-info {
  margin-top: 8px;
  font-size: .82rem;
}

.source-technical-info dl {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 4px 8px;
  margin: 8px 0 0;
}

.source-technical-info dd {
  margin: 0;
  overflow-wrap: anywhere;
}