/* [THEMA] De kleuren van deze hub als tokens. Ze staan op precies de waarden
   die hier eerst hard per regel stonden, dus zonder gekozen thema verandert er
   niets. Het themablok onderaan deze pagina kan ze overschrijven, zodat de
   tools meegaan met de rest van je omgeving (productwens 13-08-2026).

   De pin blijft nodig: deze pagina is licht ontworpen terwijl BASE_CSS --text
   in dark mode op lichtgrijs zet -- zonder vastzetten wordt alles wat zijn
   kleur erft onleesbaar op een dark-mode-browser. */

/* Deze pagina's zijn LICHT ontworpen (witte kaarten, donkere tekst), maar
   BASE_CSS zet --text in dark mode op lichtgrijs. Alles wat zijn kleur
   erft werd daardoor onleesbaar op een dark-mode-browser (melding: de
   verzoekbalk onderaan /tools). Kleur en color-scheme hier vastzetten. */
body{ font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
      color:var(--to-tekst); }
.pt-shell{ max-width:1060px; margin:1.6rem auto 4rem; padding:0 1rem; }
.pt-top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:1.2rem; }
.pt-back{ display:inline-flex; align-items:center; gap:6px; color:var(--to-gedempt); text-decoration:none; font-size:.9rem; font-weight:500; }
.pt-back:hover{ color:var(--to-tekst); }
.pt-h1{ font-family:'Fraunces',Georgia,serif; font-size:1.7rem; color:var(--to-tekst); margin:0; font-weight:600; letter-spacing:-.02em; }
.pt-privacy{ margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0; border-radius:999px; padding:5px 12px; }
.pt-sub{ color:var(--to-gedempt); font-size:.95rem; margin:.2rem 0 1.6rem; max-width:640px; line-height:1.55; }
.pt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.pt-tool-card{ display:flex; flex-direction:column; gap:6px; background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:12px; padding:13px 14px 11px; text-decoration:none; color:var(--to-tekst); box-shadow:0 8px 24px -18px rgba(15,23,42,.28); transition:transform .12s, box-shadow .12s, border-color .12s; }
.pt-tool-card:hover{ transform:translateY(-2px); border-color:var(--to-lijn-2); box-shadow:0 14px 34px -18px rgba(30,90,158,.35); }
.pt-tool-ic{ width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; background:var(--to-vlak-2); color:var(--to-merk); }
.pt-tool-card h3{ margin:1px 0 0; font-size:.95rem; font-weight:600; }
.pt-tool-card p{ margin:0; color:var(--to-gedempt); font-size:.79rem; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pt-editor-hero{ display:flex; align-items:center; gap:18px; margin:0 0 18px; padding:20px 22px; border-radius:16px; text-decoration:none; color:var(--to-vlak); background:linear-gradient(120deg,var(--to-merk),var(--to-merk-2)); box-shadow:var(--to-schaduw-diep); transition:transform .12s, box-shadow .12s; }
.pt-editor-hero:hover{ transform:translateY(-2px); box-shadow:0 22px 50px -20px rgba(18,63,116,.8); }
.pt-editor-hero .peh-ic{ flex-shrink:0; width:52px; height:52px; border-radius:13px; background:rgba(255,255,255,.15); display:grid; place-items:center; color:var(--to-vlak); }
.pt-editor-hero .peh-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.pt-editor-hero .peh-title{ font-size:1.12rem; font-weight:700; display:flex; align-items:center; gap:10px; }
.pt-editor-hero .peh-badge{ font-size:.62rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--to-vlak); color:var(--to-merk); padding:2px 8px; border-radius:999px; }
.pt-editor-hero .peh-desc{ font-size:.86rem; line-height:1.45; color:rgba(255,255,255,.9); }
.pt-editor-hero .peh-desc strong{ color:var(--to-vlak); font-weight:700; }
.pt-editor-hero .peh-cta{ flex-shrink:0; font-weight:600; font-size:.9rem; background:rgba(255,255,255,.16); padding:9px 16px; border-radius:10px; white-space:nowrap; }
@media (max-width:640px){ .pt-editor-hero{ flex-wrap:wrap; } .pt-editor-hero .peh-cta{ width:100%; text-align:center; } }
.pt-card{ background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:16px; padding:22px; box-shadow:0 10px 30px -20px rgba(15,23,42,.30); }
.pt-drop{ border:2px dashed var(--to-lijn-2); border-radius:14px; padding:34px 20px; text-align:center; cursor:pointer; color:var(--to-gedempt); transition:border-color .12s, background .12s; }
.pt-drop:hover, .pt-drop.over{ border-color:var(--to-merk); background:var(--to-papier); color:var(--to-merk); }
.pt-drop .big{ font-size:1.02rem; font-weight:600; color:var(--to-tekst); margin-top:10px; }
.pt-drop .small{ font-size:.85rem; margin-top:3px; }
.pt-drop svg{ color:var(--to-gedempt-2); }
/* Ingeklapte dropzone zodra er afbeeldingen zijn (grote zone niet meer nodig). */
.pt-drop.pt-drop-mini{ padding:10px 16px; display:flex; align-items:center; justify-content:center; gap:8px; }
.pt-drop.pt-drop-mini svg{ width:18px; height:18px; }
.pt-drop.pt-drop-mini .big{ font-size:.9rem; margin-top:0; }
.pt-drop.pt-drop-mini .small{ display:none; }
/* Gedeelde live preview (alle beeldtools) */
.pt-preview{ margin-bottom:14px; }
.pt-prev-h{ font-size:.82rem; font-weight:600; color:var(--to-tekst-2); margin:0 0 6px; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.pt-prev-cap{ font-weight:400; color:var(--to-gedempt); font-size:.76rem; font-variant-numeric:tabular-nums; }
.pt-prev-stage{ display:flex; justify-content:center; align-items:center; background:#eef1f6; border:1px solid var(--to-lijn); border-radius:12px; padding:10px; min-height:120px;
  background-image:linear-gradient(45deg,#e3e8ef 25%,transparent 25%),linear-gradient(-45deg,#e3e8ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e3e8ef 75%),linear-gradient(-45deg,transparent 75%,#e3e8ef 75%); background-size:18px 18px; background-position:0 0,0 9px,9px -9px,-9px 0; }
.pt-prev-stage canvas{ max-width:100%; max-height:52vh; border-radius:8px; box-shadow:0 4px 16px -8px rgba(15,23,42,.45); }
.pt-hidden{ display:none !important; }
.pt-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pt-controls{ margin-top:18px; display:flex; flex-direction:column; gap:14px; }
.pt-field{ display:flex; flex-direction:column; gap:5px; }
.pt-field label{ font-size:.82rem; font-weight:600; color:var(--to-tekst-2); }
.pt-input, .pt-select{ padding:.5rem .7rem; border:1px solid var(--to-lijn-2); border-radius:9px; font:inherit; font-size:.9rem; background:var(--to-vlak); color:var(--to-tekst); }
.pt-input:focus, .pt-select:focus{ outline:2px solid var(--to-lijn-2); border-color:var(--to-merk); }
.pt-range{ width:220px; }
.pt-seg{ display:inline-flex; background:var(--to-lijn); border-radius:10px; padding:3px; gap:2px; }
.pt-seg button{ border:none; background:transparent; padding:6px 12px; border-radius:8px; font:inherit; font-size:.85rem; font-weight:600; color:var(--to-gedempt); cursor:pointer; }
.pt-seg button.active{ background:var(--to-vlak); color:var(--to-merk); box-shadow:0 2px 6px -3px rgba(15,23,42,.3); }
.pt-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--to-lijn-2); background:var(--to-vlak); color:var(--to-tekst); border-radius:10px; padding:.6rem 1.1rem; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; transition:filter .12s, border-color .12s; }
.pt-btn:hover{ border-color:var(--to-merk); }
.pt-btn.primary{ background:var(--to-merk); border-color:var(--to-merk); color:var(--to-vlak); }
.pt-btn.primary:hover{ filter:brightness(1.07); }
.pt-btn:disabled{ opacity:.5; cursor:default; }
.pt-status{ margin:12px 0 0; font-size:.88rem; color:var(--to-gedempt); min-height:1.1em; }
.pt-status.err{ color:#b42318; }
.pt-status.ok{ color:#067647; }
.pt-progress{ display:none; height:7px; background:var(--to-lijn); border-radius:99px; margin-top:12px; overflow:hidden; }
.pt-progress > i{ display:block; height:100%; width:0; background:var(--to-merk); transition:width .18s; }
.pt-thumbs{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.pt-thumb{ position:relative; width:96px; }
.pt-thumb canvas, .pt-thumb .ph{ width:96px; height:96px; object-fit:cover; border-radius:9px; border:1px solid var(--to-lijn); background:#f1f5f9; display:block; }
.pt-thumb .ph{ display:flex; align-items:center; justify-content:center; color:var(--to-gedempt-2); font-size:.7rem; text-align:center; padding:4px; }
.pt-thumb .nm{ font-size:.68rem; color:var(--to-gedempt); margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pt-thumb .rm{ position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%; border:none; background:var(--to-tekst); color:var(--to-vlak); cursor:pointer; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; }
.pt-note{ font-size:.8rem; color:var(--to-gedempt-2); margin:2px 0 0; }
.pt-actions{ margin-top:18px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }