:root{
  --bg:#121212;
  --card:#1E1E1E;
  --muted:#A0A0A0;
  --text:#F8F9FA;
  --brand:#FF6600; /* Markt Oranje /
  --bot:#007BFF;   / Bot Blauw */
  --ok:#28A745;
  --warn:#FFC107;
  --err:#DC3545;
}/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html{height:100%;}
body{min-height:100%; margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui,Segoe UI,Roboto,Arial; position:relative; display:flex; flex-direction:column;}
a{color:var(--bot);text-decoration:none}
a:hover{color:#1a6fe8;text-decoration:underline}
.container{max-width:980px; margin:28px auto; padding:0 16px; flex:1;}
h1,h2{margin:.4em 0}
h1{font-size:1.6rem}
h2{font-size:1.2rem;color:var(--muted)}
.small{font-size:.9rem;color:var(--muted)}
.muted{color:var(--muted)}body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  bottom: 10%;
  left: calc(45% + 490px);
  width: 300px;
  aspect-ratio: 2/3;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom left; /* Align to the bottom left of the pseudo-element */
}body:has(#step1:not(.w-hide-right):not(.w-hide-left))::after {
  background-image: url('/img/robot1.png');
}body:has(#step2:not(.w-hide-right):not(.w-hide-left))::after {
  background-image: url('/img/robot2.png');
}body:has(#step3:not(.w-hide-right):not(.w-hide-left))::after {
  background-image: url('/img/robot3.png');
}body:has(#step4:not(.w-hide-right):not(.w-hide-left))::after {
  background-image: url('/img/robot4.png');
}body:has(#step5:not(.w-hide-right):not(.w-hide-left))::after {
  background-image: url('/img/robot5.png');
}body:has(#step6:not(.w-hide-right):not(.w-hide-left))::after {
  background-image: url('/img/robot6.png');
}/* Layout helpers */
.row{display:flex;gap:12px;flex-wrap:wrap}
.row-end{display:flex;justify-content:flex-end;gap:8px}
.grow{flex:1}
.hide{display:none!important}/* Components */
.card{background:rgba(30,30,30,.85);border:1px solid #333;border-radius:12px;padding:16px;margin:12px 0}
pre{background:rgba(30,30,30,.85);border:1px solid #333;border-radius:10px;padding:12px;overflow:auto;max-height:360px}
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th,.tbl td{padding:10px;border-bottom:1px solid #2b2b2b}
.tbl thead th{color:#bbb;text-align:left;background:#181818;position:sticky;top:0;z-index:1}
.tbl tr:hover td{background:#171717}button,.btn{background:var(--brand);color:#00111d;border:0;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
button:disabled{opacity:.6;cursor:not-allowed}
.btn-sm{padding:6px 10px;border-radius:8px;font-size:.9rem}
.btn-secondary{background:#1E1E1E;color:var(--text);border:1px solid #333}
.btn-ghost{background:transparent;color:var(--text);border:1px solid #333}
.btn-muted{background:#222;color:#eee;border:1px solid #333}
.btn-warn{background:#3a0000;color:#ffb4b4;border:1px solid #5a1a1a}input[type=file]{padding:8px;background:#1E1E1E;border:1px solid #333;border-radius:10px;color:var(--muted)}
input[type=text],input[type=number],textarea,select{
  background:#111;color:#eee;border:1px solid #333;border-radius:10px;padding:8px 10px;width:100%
}
label{display:block;margin:.3rem 0 .2rem;color:var(--muted)}.badge{
  display:inline-block;padding:4px 8px;border-radius:999px;background:rgba(30,30,30,.85);
  border:1px solid #333;color:var(--muted);font-size:.85rem
}
.badge.running{background:#2a3b23;color:#d7f2de;border-color:#2a3b23}
.badge.needs_input{background:#453016;color:#ffe5c7;border-color:#453016}
.badge.error{background:#532121;color:#ffd7d7;border-color:#532121}
.badge.planned{background:#2c7be5;color:#e7f1ff;border-color:#2c7be5}
.badge.paused{background:#a57b00;color:#fff1bf;border-color:#a57b00}
.badge.cancelled{background:#444;color:#eee;border-color:#444}.alert{padding:10px 12px;border-radius:10px;border:1px solid #333;background:rgba(30,30,30,.85)}
.alert.ok{border-color:var(--ok);color:#D4EDDA}
.alert.warn{border-color:var(--warn);color:#FFF3CD}
.alert.err{border-color:var(--err);color:#F8D7DA}/* Header + nav + footer (shared) */
.header{background:var(--bg);border-bottom:1px solid #333;position:sticky;top:0;z-index:20;padding:8px 0}
.header-inner{display:flex;justify-content:space-between;align-items:center;position:relative}
.brand{font-size:1.2rem;font-weight:bold;color:var(--brand)}
.bot-part{color:var(--bot)}
.logo-wrapper{display:flex;align-items:center;gap:10px}
#logo{height:75px}
.hamburger{display:none;background:transparent;border:none;font-size:1.5rem;color:var(--text);cursor:pointer}
.nav{display:flex;gap:8px}
@media
 (max-width:768px){
  .hamburger{display:block}
  .nav{
    display:none;position:absolute;top:100%;right:0;z-index:1000;
    background:var(--card);border:1px solid #333;border-radius:10px;padding:8px;flex-direction:column;gap:4px;
    box-shadow:0 8px 24px rgba(0,0,0,.4)
  }
  .nav.active{display:flex}
}
.footer{border-top:1px solid #333;margin-top:32px;padding:16px 0;background:#0e0e0e;color:#bbb}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer .sep{margin:0 6px;color:#555}/* Modal (shared) */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9999;display:flex;align-items:center;justify-content:center}
.modal-content{background:#1E1E1E;padding:16px 18px;border-radius:8px;width:min(720px,95vw)}
.row-gap-8{gap:8px}/* Thumbs (used in edit/app) */
.thumb-nav{background:#222;color:#fff;border:0;width:36px;height:36px;border-radius:8px;cursor:pointer}
.thumb-strip{overflow:hidden}
.thumb-row{display:flex;gap:8px;overflow-x:auto;scroll-behavior:smooth;padding-bottom:6px}
.thumb .x{position:absolute;top:6px;right:6px;width:22px;height:22px;line-height:20px;text-align:center;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;cursor:pointer;font-weight:bold}
.thumb .x:hover{background:rgba(0,0,0,.85)}/* Wizard stage system */
.wizard { position: relative; }
.w-step { transition: transform .28s ease, opacity .28s ease; }
.w-hide-right { transform: translateX(24px); opacity: 0; pointer-events:none; position:absolute; inset:0; }
.w-hide-left  { transform: translateX(-24px); opacity: 0; pointer-events:none; position:absolute; inset:0; }/* Upload preview grid */
.preview-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-top:10px; }
.preview-card { background:rgba(30,30,30,.85); border:1px solid #333; border-radius:12px; padding:8px; }
.preview-thumb { height:110px; border-radius:8px; overflow:hidden; border:1px solid #222; background:#0e0e0f;
  display:flex; align-items:center; justify-content:center; }
.preview-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.preview-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px; }
.name { font-size:.85rem; color:#bbb; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%; }/* Loading bars */
.progress { height:10px; border-radius:999px; border:1px solid #333; background:#1a1a1a; overflow:hidden; }
.bar { height:100%; width:0%; background:var(--brand); transition: width .4s ease; }/* Product grid (step 3) */
.grid-products { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }
.p-card { background:rgba(30,30,30,.85); border:1px solid #333; border-radius:12px; padding:10px; display:flex; gap:8px; flex-direction:column; }
.p-thumb { height:120px; border-radius:10px; overflow:hidden; border:1px solid #222; background:#0e0e0f; display:flex; align-items:center; justify-content:center; }
.p-thumb img { width:100%; height:100%; object-fit:cover; }
.p-title { font-size:.95rem; color:#eee; min-height:2.2em; }
.p-meta { font-size:.85rem; color:#9aa0a6; }/* Chips */
.chip { padding:3px 8px; border-radius:999px; border:1px solid #333; font-size:.8rem; background:#1E1E1E; color:#bbb; }
.chip.ok { border-color: var(--ok); color:#cfe9d6; }
.chip.err { border-color: var(--err); color:#f0c6cb; }/* Publish page layout / gallery */
.page-grid { display:grid; grid-template-columns:1fr 380px; gap:24px; align-items:start; }
.full-row { grid-column:1/-1; }
.imgbox { position:relative; background:#0c0c0c; border:1px solid #333; border-radius:10px;
  display:flex; align-items:center; justify-content:center; min-height:240px; }
.imgbox img { max-width:100%; height:auto; display:block; border-radius:8px; }
.shot-strip { display:flex; align-items:center; gap:8px; }
.shot-btn { width:28px; height:28px; border-radius:50%; border:1px solid #333; background:#1b1b1b; cursor:pointer; color:#ddd; }
.thumbs { display:flex; gap:8px; overflow-x:auto; padding:8px; border:1px solid #333; border-radius:12px; background:rgba(30,30,30,.85); }
.thumb { position:relative; flex:0 0 auto; }
.thumb img { width:140px; height:90px; object-fit:cover; border-radius:8px; opacity:.9; cursor:pointer; border:1px solid #333; background:#111; }
.thumb img.active { outline:2px solid #4da3ff; opacity:1; }
.thumb .time { position:absolute; right:6px; bottom:6px; font-size:11px; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:10px; color:#eee; }
.needs .row { margin:8px 0; }
@media
 (max-width:980px){ .page-grid { grid-template-columns:1fr; } }/* Small utilities (om inline styles te vervangen) */
.text-right { text-align:right; }
.mt-8 { margin-top:8px; } .mt-10 { margin-top:10px; } .mt-12 { margin-top:12px; } .mt-16 { margin-top:16px; }
.gap-8 { gap:8px; } .gap-12 { gap:12px; }@media
 (max-width: 980px) {
  body::after {
    left: auto;
    right: 10px;
    bottom: 0;
    width: 150px;
    background-position: bottom right;
  }  main.container {
    padding-bottom: 235px;
  }
}