:root{
    --bg:#e9edf3; --chrome:#fff; --chrome-2:#f5f7fb; --rail:#f1f4f9; --canvas:#8d97a6;
    --ink:#1f2937; --ink-soft:#4b5563; --muted:#8a95a5; --line:#e3e8ef; --line-2:#cdd5e0;
    --accent:#1e5a9e; --accent-ink:#fff; --accent-soft:#e8f0fc; --accent-line:#bcd3ee;
    --danger:#dc2626; --ok:#0f9d6b; --chk1:#fff; --chk2:#d5dbe4;
    --ui:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){:root{
    --bg:#0f1319;--chrome:#181d25;--chrome-2:#1e242e;--rail:#151a21;--canvas:#0b0e13;
    --ink:#e6ebf2;--ink-soft:#aab4c2;--muted:#6b7686;--line:#28303b;--line-2:#333d4a;
    --accent:#4f92d6;--accent-ink:#0b1017;--accent-soft:#16263a;--accent-line:#2c4a6b;--chk1:#3a4250;--chk2:#2b323d;
  }}
  *{box-sizing:border-box;}
  html,body{margin:0;height:100%;}
  body{font-family:var(--ui);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;}
  .app{display:flex;flex-direction:column;height:100vh;min-height:560px;}
  .titlebar{display:flex;align-items:center;gap:12px;padding:7px 14px;background:var(--chrome);border-bottom:1px solid var(--line);}
  .brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;}
  .brand a{color:var(--ink-soft);text-decoration:none;font-weight:500;font-size:12.5px;}
  .brand .mark{width:24px;height:24px;border-radius:6px;background:linear-gradient(150deg,var(--accent),#123f74);color:#fff;display:grid;place-items:center;}
  .titlebar .spacer{flex:1;}
  /* De terugknop stond BUITEN .brand, terwijl de opmaak ervoor als ".brand a"
     was geschreven. Hij kreeg dus helemaal geen stijl mee en verscheen als een
     paarse, onderstreepte standaardlink midden in een donkere balk (melding
     eigenaar, 08-08-2026). Nu een echte knop, met dezelfde vorm als de rest. */
  .tb-back{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 11px;
    border:1px solid var(--line-2); border-radius:7px; background:var(--chrome-2);
    color:var(--ink-soft); text-decoration:none; font-size:12.5px; white-space:nowrap; }
  .tb-back:hover{ color:var(--ink); border-color:var(--accent); }
  /* Bestand-menu, zoals in Word en Excel: de bestandsacties bij elkaar in plaats
     van los verspreid over de balk. */
  .tb-file{ height:28px; padding:0 13px; border:0; border-radius:7px; background:var(--accent);
    color:#fff; font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; }
  .tb-file:hover{ filter:brightness(1.1); }
  .tb-menu{ position:absolute; z-index:80; min-width:230px; background:var(--chrome);
    border:1px solid var(--line-2); border-radius:10px; box-shadow:0 18px 40px rgba(0,0,0,.5);
    padding:6px; display:none; }
  .tb-menu.open{ display:block; }
  .tb-menu button{ display:flex; align-items:center; gap:9px; width:100%; border:0;
    background:none; font:inherit; font-size:13px; color:var(--ink); text-align:left;
    padding:7px 9px; border-radius:7px; cursor:pointer; }
  .tb-menu button:hover{ background:var(--chrome-2); }
  .tb-menu hr{ border:0; border-top:1px solid var(--line-2); margin:5px 2px; }
  .tb-menu .snel{ margin-left:auto; font-size:11px; color:var(--muted); }
  .doc-name{color:var(--ink-soft);font-size:13px;padding-left:12px;border-left:1px solid var(--line);}
  .optbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:7px 14px;background:var(--chrome-2);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);min-height:38px;}
  .optbar .ctx{color:var(--accent);font-weight:700;}
  .optbar .field{display:inline-flex;align-items:center;gap:7px;}
  .optbar .range{-webkit-appearance:none;appearance:none;width:96px;height:4px;border-radius:3px;background:var(--line-2);}
  .optbar .range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;}
  .optbar .val{font-variant-numeric:tabular-nums;min-width:36px;font-family:var(--mono);font-size:11px;}
  .ie-sbtn{border:1px solid var(--line-2);background:var(--chrome-2);color:var(--ink-soft);border-radius:6px;font:inherit;font-size:11.5px;padding:4px 9px;cursor:pointer;}
  .ie-sbtn:hover{border-color:var(--accent-line);color:var(--ink);}
  .work{flex:1;display:flex;min-height:0;}
  .tools{width:46px;flex-shrink:0;background:var(--rail);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:6px 0;gap:2px;overflow-y:auto;}
  .tool{width:34px;height:34px;border:1px solid transparent;border-radius:7px;background:transparent;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;}
  .tool svg{width:18px;height:18px;}
  .tool:hover{background:var(--chrome);border-color:var(--line);color:var(--ink);}
  .tool.active{background:var(--accent);border-color:var(--accent);color:#fff;}
  .tool-sep{width:24px;height:1px;background:var(--line);margin:4px 0;}
  .swatch{width:26px;height:26px;border-radius:6px;border:2px solid var(--chrome);box-shadow:0 0 0 1px var(--line-2);margin-top:6px;cursor:pointer;overflow:hidden;padding:0;}
  .swatch input{opacity:0;width:100%;height:100%;cursor:pointer;}
  /* Centreren met align-items/justify-content maakt de overloop naar BOVEN en
     naar LINKS onbereikbaar zodra je inzoomt: de browser laat je niet voorbij
     scrollpositie 0, terwijl het beeld daar wel doorloopt (gebruikersmelding 09-08-2026). Met margin:auto op het kind centreert het net zo, maar blijft
     het hele beeld bereikbaar. */
  .stage{flex:1;min-width:0;background:var(--canvas);overflow:auto;display:flex;padding:26px;}
  .stage > *{margin:auto;}
  .docwrap{position:relative;box-shadow:0 8px 34px -10px rgba(0,0,0,.55);background-image:linear-gradient(45deg,var(--chk2) 25%,transparent 25%),linear-gradient(-45deg,var(--chk2) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--chk2) 75%),linear-gradient(-45deg,transparent 75%,var(--chk2) 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0;background-color:var(--chk1);}
  #ieCanvas{display:block;image-rendering:auto;}
  #ieCanvas.pix{image-rendering:pixelated;}
  #ieOverlay{position:absolute;left:0;top:0;pointer-events:none;}
  .panels{width:270px;flex-shrink:0;background:var(--chrome);border-left:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;}
  .pn-sec{border-bottom:1px solid var(--line);}
  .pn-head{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
  .pn-body{padding:4px 10px 12px;}
  .adj-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  /* Vaste hoogte en één regel: "Meer verzadiging" en "Meer contrast" braken af
     over twee regels en werden daardoor hoger dan de rest — een raster waarin
     twee vakjes uitsteken leest als een fout (gebruikersmelding 09-08-2026).
     De twee labels zijn tegelijk ingekort tot "Contrast +" en "Verzadiging +";
     past een label toch niet, dan krijgt het puntjes. */
  .adj{display:flex;align-items:center;gap:6px;min-height:34px;height:34px;
    border:1px solid var(--line);background:var(--chrome-2);border-radius:7px;
    padding:0 8px;font:inherit;font-size:11.5px;color:var(--ink-soft);cursor:pointer;
    white-space:nowrap;overflow:hidden;}
  .adj svg{flex:0 0 auto;}
  .adj span, .adj{text-overflow:ellipsis;}
  .adj:hover{border-color:var(--accent-line);color:var(--ink);}
  .layer{display:flex;align-items:center;gap:9px;padding:6px;border-radius:7px;cursor:pointer;}
  .layer.active{background:var(--accent-soft);}
  .layer .eye{width:20px;height:20px;display:grid;place-items:center;color:var(--ink-soft);flex-shrink:0;background:none;border:none;cursor:pointer;padding:0;}
  .layer.off .eye{opacity:.35;}
  .layer .lthumb{width:34px;height:26px;border-radius:4px;flex-shrink:0;border:1px solid var(--line-2);background:#fff;}
  .layer .lmeta{flex:1;min-width:0;}
  .layer .lname{font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:none;border:none;padding:0;width:100%;text-align:left;font-family:inherit;}
  .layer .lsub{font-size:10.5px;color:var(--muted);font-family:var(--mono);}
  .layer-tools{display:flex;gap:4px;padding:8px 2px 2px;}
  /* Rechtermuismenu, in dezelfde donkere stijl als de rest van de editor. */
  .ie-ctx{position:fixed;z-index:9999;min-width:216px;background:var(--chrome);
    border:1px solid var(--line);border-radius:9px;padding:5px;
    box-shadow:0 18px 44px rgba(0,0,0,.45);font-size:12.5px;}
  .ie-ctx button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;
    color:var(--ink);text-align:left;padding:6px 9px;border-radius:6px;font:inherit;cursor:pointer;}
  .ie-ctx button:hover:not(:disabled){background:var(--chrome-2);}
  .ie-ctx button:disabled{opacity:.42;cursor:default;}
  .ie-ctx .k{margin-left:auto;opacity:.55;font-size:11px;}
  .ie-ctx hr{border:0;border-top:1px solid var(--line);margin:4px 2px;}
  .lbtn{width:26px;height:26px;border:1px solid var(--line);background:var(--chrome-2);border-radius:6px;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;}
  .lbtn:hover{border-color:var(--accent-line);color:var(--ink);}
  .lbtn.danger:hover{border-color:var(--danger);color:var(--danger);}
  .lbtn:disabled{opacity:.4;cursor:default;}
  .op-row{display:flex;gap:8px;align-items:center;margin:4px 2px 8px;font-size:11px;color:var(--muted);}
  .op-row input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--line-2);}
  .op-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--accent);cursor:pointer;}
  .op-row .opv{font-family:var(--mono);min-width:38px;text-align:right;color:var(--ink-soft);}
  .hist{list-style:none;margin:0;padding:0;font-size:12px;}
  .hist li{display:flex;gap:8px;padding:5px 8px;border-radius:6px;color:var(--ink-soft);cursor:pointer;}
  .hist li:hover{background:var(--chrome-2);}
  .hist li.now{background:var(--accent-soft);color:var(--accent);font-weight:600;}
  .status{display:flex;align-items:center;gap:14px;padding:5px 14px;background:var(--chrome);border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);}
  .iconbtn{width:26px;height:26px;border:1px solid var(--line-2);background:var(--chrome-2);border-radius:6px;color:var(--ink-soft);display:grid;place-items:center;cursor:pointer;}
  .iconbtn:hover{border-color:var(--accent-line);color:var(--ink);}
  #ieZoomVal,#ieDim{font-variant-numeric:tabular-nums;font-family:var(--mono);}
  .status .spacer{flex:1;}
  .ie-sel{height:28px;border:1px solid var(--line-2);background:var(--chrome-2);color:var(--ink);border-radius:7px;font:inherit;font-size:12px;padding:0 6px;cursor:pointer;}
  .btn-primary{background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;height:28px;padding:0 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;}
  .btn-primary:hover{filter:brightness(1.06);}
  /* Startscherm (drop) */
  .drop{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink-soft);cursor:pointer;margin:22px;border:2px dashed var(--line-2);border-radius:16px;background:var(--chrome);}
  .drop.hl{border-color:var(--accent);background:var(--accent-soft);}
  .drop .big{font-size:16px;font-weight:600;color:var(--ink);}
  .drop .small{font-size:12.5px;}
  .hidden{display:none!important;}
  button:focus-visible,.tool:focus-visible{outline:2px solid var(--accent);outline-offset:1px;}
  /* Meldingen: EIGEN kleurenpaar, niet --ink. Die variabele is de TEKSTkleur en die is
     in donkere modus bijna wit (#e6ebf2) -- met color:#fff erop stond er dus wit op wit
     en was er niets te lezen. Een melding hoort in beide standen af te steken tegen de
     achtergrond: donker paneel met lichte tekst in de donkere modus, en andersom in de
     lichte. */
  .toast{position:fixed;bottom:52px;left:50%;transform:translateX(-50%);background:#1f2937;color:#f4f7fb;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:500;letter-spacing:.1px;border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.38);z-index:50;}
  /* Donkere modus: #414d5d is de beste ruil. Nagerekend (WCAG): tekst erop 7,65:1 (AAA),
     en het paneel zelf steekt 2,25:1 af tegen het canvas -- lichter maakt de tekst
     zwakker, donkerder laat het paneel wegvallen in de achtergrond. */
  @media (prefers-color-scheme:dark){ .toast{background:#414d5d;color:#eef2f8;border-color:rgba(255,255,255,.16);} }
  .ie-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:60;}
  .ie-modal[hidden]{display:none;}
  .ie-dialog{background:var(--chrome);border:1px solid var(--line);border-radius:14px;width:380px;max-width:92vw;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);overflow:hidden;}
  .ie-dlg-head{padding:14px 18px;font-weight:700;font-size:14px;border-bottom:1px solid var(--line);}
  .ie-dlg-body{padding:16px 18px;display:flex;flex-direction:column;gap:13px;}
  .ie-frow{display:grid;grid-template-columns:80px 1fr 48px;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft);}
  .ie-frow input[type=range]{-webkit-appearance:none;appearance:none;height:4px;border-radius:3px;background:var(--line-2);}
  .ie-frow input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);cursor:pointer;}
  .ie-frow > span{font-family:var(--mono);font-size:11px;text-align:right;color:var(--ink);}
  .ie-dlg-foot{padding:12px 18px;display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);}
  .ie-sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  @media (max-width:560px){ .ie-sc-grid{grid-template-columns:1fr;} }
  /* ---- Telefoon ----
     De verticale gereedschapsbalk (46px) en het panelenblok (270px) namen op
     een smal scherm samen meer ruimte in dan er voor de afbeelding overbleef;
     de tekst in de sleepzone brak per woord af (gebruikersmelding 08-08-2026).

     Onder elkaar: gereedschappen als horizontale strook bovenaan die je opzij
     schuift, dan het beeld, dan de panelen. */
  @media (max-width:820px){
    /* [MOBIEL 29-08-2026] Stond hier als `.wrap`. Er bestaat GEEN element met
       class "wrap" in dit sjabloon -- de container is <div class="work">
       (`.work{flex:1;display:flex;min-height:0;}` hierboven). Deze regel heeft
       dus nooit iets gedaan, en het mobiele blok was daarmee half kapot: de
       rest ervan zette .tools en .panels wel op width:100%, maar omdat .work
       een RIJ bleef stonden gereedschapsstrook, canvas en panelenkolom elk op
       volle breedte naast elkaar. GEMETEN op 360 px: het document werd 829 px,
       469 px buiten beeld, en hier staat body op overflow-x:visible dus de
       pagina schoof zichtbaar heen en weer. Eén woord in een selector. */
    .work{ flex-direction:column; min-width:0; }
    /* De statusbalk onderaan draagt de exportknop en was een flexrij zonder
       wrap en zonder eigen scroll: op 360 px stond "Exporteren" op x=829,
       buiten beeld. Zelfde aanpak als de gereedschapsstrook hierboven, die die
       scroll al had. */
    .status{ overflow-x:auto; -webkit-overflow-scrolling:touch;
      min-width:0; max-width:100%; }
    .status > *{ flex:none; }
    .tools{ width:100%; flex-direction:row; border-right:0;
      border-bottom:1px solid var(--line); padding:5px 6px; gap:3px;
      overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
      scrollbar-width:none; }
    .tools::-webkit-scrollbar{ display:none; }
    .tool{ flex:0 0 auto; }
    .stage{ min-height:40vh; padding:12px; }
    .panels{ width:100%; border-left:0; border-top:1px solid var(--line);
      max-height:42vh; }
    .drop{ padding:18px 14px; }
    .drop .big{ font-size:.95rem; }
    .ie-frow{ grid-template-columns:70px 1fr 44px; gap:7px; }
    .adj-grid{ grid-template-columns:1fr 1fr; }
  }
  .ie-sc-h{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 6px;}
  .ie-sc{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--ink-soft);padding:2px 0;}
  .ie-sc span{flex:1;}
  .ie-sc kbd{display:inline-block;min-width:16px;text-align:center;font-family:var(--mono);font-size:11px;background:var(--chrome-2);border:1px solid var(--line-2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink);}
  .xf-bar{position:fixed;top:96px;left:50%;transform:translateX(-50%);z-index:55;display:flex;align-items:center;gap:12px;background:var(--chrome);border:1px solid var(--line);border-radius:11px;padding:8px 12px;box-shadow:0 14px 40px -14px rgba(0,0,0,.5);font-size:12.5px;color:var(--ink-soft);max-width:92vw;}
  .xf-bar[hidden]{display:none;}