/* [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. */
:root{
  --to-vlak:#ffffff; --to-vlak-2:#eef4fd; --to-papier:#f5f9ff;
  --to-tekst:#0f172a; --to-tekst-2:#334155;
  --to-gedempt:#475569; --to-gedempt-2:#94a3b8;
  --to-lijn:#e5e9f0; --to-lijn-2:#cbd5e1;
  --to-merk:#1e5a9e; --to-op-merk:#ffffff;
}

/* 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. */
html{ color-scheme:light; }
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(230px,1fr)); gap:14px; }
.pt-tool-card{ display:flex; flex-direction:column; gap:8px; background:var(--to-vlak); border:1px solid var(--to-lijn); border-radius:14px; padding:18px 18px 16px; 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:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--to-vlak-2); color:var(--to-merk); }
.pt-tool-card h3{ margin:2px 0 0; font-size:1.02rem; font-weight:600; }
.pt-tool-card p{ margin:0; color:var(--to-gedempt); font-size:.84rem; line-height:1.45; }
.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); }
.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{ outline:2px solid var(--to-lijn-2); border-color:var(--to-merk); }
.pt-range{ width:220px; }
.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-actions{ margin-top:8px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.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-note{ font-size:.8rem; color:var(--to-gedempt-2); margin:2px 0 0; }
.au-player{ width:100%; margin-top:14px; }
.au-meta{ font-size:.82rem; color:var(--to-gedempt); margin:9px 0 2px; }
.ov-list{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.ov-row{ display:flex; align-items:center; gap:10px; background:#f8fafc; border:1px solid var(--to-lijn); border-radius:9px; padding:8px 12px; font-size:.88rem; }
.ov-row > span:first-child{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ov-sz{ color:var(--to-gedempt-2); font-size:.8rem; }
.ov-x{ border:none; background:var(--to-tekst); color:var(--to-vlak); width:22px; height:22px; border-radius:50%; cursor:pointer; font-size:13px; line-height:1; }