@import url('/fonts/inter/400.css');
@import url('/fonts/inter/500.css');
@import url('/fonts/inter/600.css');
@import url('/fonts/inter/700.css');
@import url('/fonts/inter/800.css');
@import url('/fonts/nunito/400.css');
@import url('/fonts/nunito/600.css');
@import url('/fonts/nunito/800.css');
@import url('/fonts/merriweather/400.css');
@import url('/fonts/merriweather/700.css');
@import url('/fonts/merriweather/900.css');
@import url('/fonts/space-grotesk/400.css');
@import url('/fonts/space-grotesk/500.css');
@import url('/fonts/space-grotesk/700.css');

:root {
  --bg: #f4f4f6; --vlak: #ffffff; --vlak2: #f8f8fa; --lijn: #e3e3e8; --lijn2: #d0d0d8;
  --tekst: #1d2330; --zacht: #6b7280; --accent: #5b4bdb; --accent-zacht: #ecebfd; --fout: #c0392b;
  --goed: #2a9d6f; --radius: 10px; --schaduw: 0 1px 2px rgba(20,20,40,.06), 0 4px 16px rgba(20,20,40,.06);
  --kop: 56px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--tekst); background: var(--bg);
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); font-size: 15px; line-height: 1.45; }
a { color: var(--accent); }
h1 { font-size: 26px; margin: 0 0 10px; letter-spacing: -0.01em; }
h2 { font-size: 18px; margin: 0 0 8px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--zacht); margin: 18px 0 8px; font-weight: 600; }
.klein { font-size: 13px; color: var(--zacht); }
.fout { color: var(--fout); }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* ---------- knoppen en velden ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font: 600 14px/1 Inter, system-ui, sans-serif; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--lijn2); border-radius: 8px;
  padding: 9px 13px; min-height: 38px; cursor: pointer; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.knop:hover { border-color: #b9b9c6; }
.knop:active { transform: translateY(1px); }
.knop:disabled { opacity: .5; cursor: default; }
.knop.hoofd { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop.hoofd:hover { background: #4d3ec9; }
.knop.plat { background: transparent; border-color: transparent; }
.knop.plat:hover { background: rgba(0,0,0,.05); }
.knop.gevaar { color: var(--fout); }
.knop.klein { min-height: 30px; padding: 6px 9px; font-size: 13px; }
.knop svg { width: 17px; height: 17px; flex: none; }
.knop.icoon { padding: 8px; min-width: 38px; }

input, select, textarea {
  font: 15px/1.35 Inter, system-ui, sans-serif; color: var(--tekst);
  border: 1px solid var(--lijn2); border-radius: 8px; background: #fff; padding: 8px 10px; width: 100%;
  min-height: 38px;
}
textarea { resize: vertical; min-height: 80px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
input[type=color] { padding: 2px; width: 44px; min-width: 44px; height: 38px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; flex: none; accent-color: var(--accent); }
input[type=range] { padding: 0; border: 0; accent-color: var(--accent); }
label { font-size: 13px; font-weight: 600; color: #3b4150; }
.stapel { display: flex; flex-direction: column; gap: 8px; }

/* ---------- losse pagina's (inloggen) ---------- */
body.los { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.los-kaart { background: var(--vlak); border-radius: 14px; box-shadow: var(--schaduw); padding: 30px; width: 100%; max-width: 420px; }
.los-kaart .knop.hoofd { margin-top: 6px; }
.woordmerk { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 20px; color: var(--tekst); text-decoration: none; margin-bottom: 18px; letter-spacing: -0.02em; }

/* ---------- kopbalk ---------- */
.kopbalk {
  position: sticky; top: 0; z-index: 20; height: var(--kop); background: var(--vlak); border-bottom: 1px solid var(--lijn);
  display: flex; align-items: center; gap: 10px; padding: 0 16px; padding-top: env(safe-area-inset-top);
}
.kopbalk .woordmerk { margin: 0; font-size: 18px; }
.kopbalk .ruimte { flex: 1; }

/* ---------- overzicht ---------- */
.overzicht { max-width: 1180px; margin: 0 auto; padding: 24px 16px 60px; }
.overzicht-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.kaart { background: var(--vlak); border-radius: var(--radius); box-shadow: var(--schaduw); overflow: hidden; display: flex; flex-direction: column; }
.kaart .duim { position: relative; aspect-ratio: 16/9; background: #eee; overflow: hidden; display: block; }
.kaart .info { padding: 10px 12px; display: flex; align-items: center; gap: 6px; }
.kaart .info .titel { flex: 1; min-width: 0; }
.kaart .info .titel b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leeg { background: var(--vlak); border-radius: var(--radius); padding: 30px; text-align: center; box-shadow: var(--schaduw); }
.leeg p { max-width: 460px; margin: 6px auto 16px; color: var(--zacht); }

/* ---------- menuutje ---------- */
.menu { position: fixed; z-index: 100; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.14); padding: 5px; min-width: 190px; }
.menu button { display: flex; width: 100%; gap: 8px; align-items: center; text-align: left; background: none; border: 0; padding: 9px 10px; border-radius: 6px; font: 500 14px Inter, sans-serif; color: var(--tekst); cursor: pointer; }
.menu button:hover { background: var(--vlak2); }
.menu button.gevaar { color: var(--fout); }

/* ---------- dialoog ---------- */
dialog { border: 0; border-radius: 14px; padding: 0; box-shadow: 0 20px 60px rgba(0,0,0,.25); width: min(620px, calc(100vw - 24px)); max-height: calc(100vh - 40px); color: var(--tekst); }
dialog::backdrop { background: rgba(20,22,35,.45); }
.dlg { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.dlg .knoppen { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.dlg .rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.voortgang { height: 8px; background: var(--lijn); border-radius: 4px; overflow: hidden; }
.voortgang > div { height: 100%; background: var(--accent); width: 0; transition: width .4s; }
.melding { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #1d2330; color: #fff; padding: 11px 16px; border-radius: 10px; z-index: 200; font-size: 14px; max-width: calc(100vw - 32px); box-shadow: 0 6px 24px rgba(0,0,0,.25); }

/* ---------- mensen ---------- */
.lijst { background: var(--vlak); border-radius: var(--radius); box-shadow: var(--schaduw); }
.lijst .regel { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--lijn); flex-wrap: wrap; }
.lijst .regel:first-child { border-top: 0; }
.lijst .regel .wie { flex: 1; min-width: 200px; }
.formulier-rij { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
@media (max-width: 640px) { .formulier-rij { grid-template-columns: 1fr; } }

/* ================= editor ================= */
body.editor { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.ed-kop .titel-veld { border: 1px solid transparent; font-weight: 700; font-size: 16px; max-width: 360px; background: transparent; }
.ed-kop .titel-veld:hover { border-color: var(--lijn2); }
.ed-kop .status { font-size: 12px; color: var(--zacht); white-space: nowrap; }
.ed { flex: 1; min-height: 0; display: grid; grid-template-columns: 190px 1fr 320px; }
.ed-scenes { border-right: 1px solid var(--lijn); background: var(--vlak); overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 10px; }
.ed-midden { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ed-paneel { border-left: 1px solid var(--lijn); background: var(--vlak); overflow-y: auto; padding: 14px 16px 40px; }

.scene-kaart { position: relative; border: 2px solid transparent; border-radius: 8px; background: var(--vlak2); cursor: pointer; touch-action: pan-y; flex: none; }
.scene-kaart.actief { border-color: var(--accent); }
.scene-kaart .duim { aspect-ratio: 16/9; position: relative; overflow: hidden; border-radius: 6px 6px 0 0; pointer-events: none; }
.scene-kaart .onder { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 7px; color: var(--zacht); }
.scene-kaart .onder b { color: var(--tekst); }
.scene-kaart.sleep { opacity: .5; }
.scene-plus { flex: none; }

.gereedschap { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--lijn); background: var(--vlak); overflow-x: auto; flex: none; scrollbar-width: none; }
.gereedschap::-webkit-scrollbar { display: none; }
.gereedschap .knop { flex: none; }

.podium-vak { flex: 1; min-height: 0; position: relative; padding: 16px; display: flex; align-items: center; justify-content: center; }
.podium-houder { position: relative; width: 100%; height: 100%; }
.podium-houder .ani-podium { box-shadow: 0 2px 20px rgba(0,0,0,.1); background: #fff; }
.selectie { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5; }
.selectie .kader { position: absolute; border: 2px solid var(--accent); pointer-events: auto; cursor: move; touch-action: none; }
.selectie .greep { position: absolute; width: 14px; height: 14px; background: #fff; border: 2px solid var(--accent); border-radius: 50%; transform: translate(-50%, -50%); touch-action: none; }
@media (pointer: coarse) { .selectie .greep { width: 24px; height: 24px; } }
.selectie .hulplijn { position: absolute; background: #ff3d7f; pointer-events: none; }

.transport { flex: none; display: flex; align-items: center; gap: 10px; padding: 6px 12px; background: var(--vlak); border-top: 1px solid var(--lijn); }
.transport .tijd { font: 600 13px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--zacht); min-width: 92px; }
.transport input[type=range] { flex: 1; }

.tijdlijn { flex: none; height: 190px; background: var(--vlak); border-top: 1px solid var(--lijn); overflow: auto; position: relative; font-size: 12px; -webkit-user-select: none; user-select: none; }
.tl-binnen { position: relative; min-width: 100%; }
.tl-liniaal { position: sticky; top: 0; z-index: 3; height: 24px; background: var(--vlak2); border-bottom: 1px solid var(--lijn); margin-left: 130px; cursor: pointer; touch-action: none; }
.tl-liniaal span { position: absolute; top: 5px; font-size: 11px; color: var(--zacht); transform: translateX(-50%); }
.tl-rij { display: flex; height: 30px; border-bottom: 1px solid #f0f0f3; }
.tl-rij.actief { background: var(--accent-zacht); }
.tl-naam { position: sticky; left: 0; z-index: 2; width: 130px; flex: none; background: inherit; display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; background: var(--vlak); border-right: 1px solid var(--lijn); }
.tl-rij.actief .tl-naam { background: var(--accent-zacht); }
.tl-naam svg { width: 14px; height: 14px; flex: none; color: var(--zacht); }
.tl-baan { position: relative; flex: 1; }
.tl-balk { position: absolute; top: 5px; height: 20px; border-radius: 5px; background: #cfcaf7; border: 1px solid #a99ff0; cursor: grab; touch-action: none; }
.tl-rij.actief .tl-balk { background: #b4abf3; border-color: var(--accent); }
.tl-balk .rand { position: absolute; right: -4px; top: 0; bottom: 0; width: 10px; cursor: ew-resize; }
.tl-balk .in, .tl-balk .uit { position: absolute; top: 0; bottom: 0; background: rgba(91,75,219,.28); pointer-events: none; }
.tl-balk .in { left: 0; border-radius: 4px 0 0 4px; }
.tl-balk .uit { right: 0; border-radius: 0 4px 4px 0; }
.tl-balk .actie { position: absolute; top: 3px; width: 8px; height: 12px; margin-left: -4px; background: #ff7a59; border-radius: 2px; pointer-events: none; }
.tl-stem { position: absolute; top: 5px; height: 20px; border-radius: 5px; background: #d6efe4; border: 1px solid #8fd1b5; overflow: hidden; }
.tl-stem canvas { width: 100%; height: 100%; display: block; }
.tl-stem.tl-geluid { background: #ffe1d6; border-color: #ff9d80; }
.tl-kop { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: 129px; background: #ff3d7f; z-index: 4; pointer-events: none; }
.tl-eind { position: absolute; top: 24px; bottom: 0; width: 8px; margin-left: 126px; cursor: ew-resize; z-index: 3; touch-action: none; }
.tl-eind::after { content: ''; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: var(--tekst); opacity: .35; }

/* paneel */
.veld { margin-bottom: 10px; }
.veld > label { display: block; margin-bottom: 4px; }
.velden2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.velden3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.velden4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.velden4 input, .velden3 input { padding: 7px 6px; }
.kleurveld { display: flex; gap: 6px; align-items: center; }
.kleurveld input[type=text] { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.vinkje { display: flex; align-items: center; gap: 8px; font-weight: 500; margin: 6px 0; }
.paneel-kop { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.paneel-kop h2 { flex: 1; margin: 0; }
.knoppenrij { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.stalen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.staal { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--lijn2); cursor: pointer; padding: 0; }
.acties-lijst .actie-rij { display: grid; grid-template-columns: 64px 1fr 1fr 32px; gap: 6px; margin-bottom: 6px; }
.acties-lijst .actie-rij input, .acties-lijst .actie-rij select { padding: 6px; font-size: 13px; }
.paneel-sluit { display: none; }
.uitlijnknoppen { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 4px; }
.uitlijnknoppen .knop { min-width: 0; padding: 8px 0; }
.uitlijnknoppen .knop:nth-child(4) { margin-left: 6px; }

/* iconenkiezer */
.iconen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 50vh; overflow-y: auto; padding: 2px; }
.iconen-raster button { aspect-ratio: 1; border: 1px solid var(--lijn); background: #fff; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 10px; }
.iconen-raster button:hover { border-color: var(--accent); }
.iconen-raster img { width: 100%; height: 100%; }
.figuren-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.figuren-raster button { border: 1px solid var(--lijn); background: #fff; border-radius: 8px; height: 150px; cursor: pointer; padding: 6px; }
.figuren-raster button:hover { border-color: var(--accent); }

/* ---------- telefoon en smal scherm ---------- */
@media (max-width: 1100px) {
  .ed { grid-template-columns: 150px 1fr 290px; }
}
@media (max-width: 860px) {
  .ed { display: flex; flex-direction: column; }
  .ed-scenes { order: 2; flex-direction: row; border-right: 0; border-top: 1px solid var(--lijn); overflow-x: auto; overflow-y: hidden; padding: 8px; flex: none; }
  .ed-scenes .scene-kaart { width: 120px; touch-action: pan-x; }
  .ed-scenes .scene-plus { width: 70px; }
  .ed-midden { order: 1; flex: 1; }
  .podium-vak { padding: 8px; flex: none; aspect-ratio: 16/9; max-height: 45vh; }
  .tijdlijn { height: auto; min-height: 120px; flex: 1; }
  .ed-paneel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 62vh; border-left: 0;
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18); transform: translateY(105%);
    transition: transform .25s ease; padding-bottom: calc(40px + env(safe-area-inset-bottom));
  }
  .ed-paneel.open { transform: translateY(0); }
  .paneel-sluit { display: inline-flex; }
  .ed-kop .titel-veld { max-width: 40vw; }
  .ed-kop .status { display: none; }
  .verberg-smal { display: none !important; }
  input, select, textarea { font-size: 16px; } /* iOS zoomt anders in */
}
@media (min-width: 861px) { .alleen-smal { display: none !important; } }