:root{
    --bg:#121210;
    --surface:#1b1b16;
    --surface-2:#232319;
    --border:#34331f;
    --text:#B9D13B;
    --text-dim:#DDDEDA;
    --accent:#bdd63c;
    --accent-dim:#8fa82c;
    --danger:#d9614f;
    --ok:#8fc95a;
    --radius:10px;
    --font-display:'Space Grotesk',sans-serif;
    --font-body:'Inter',sans-serif;
    --font-mono:'IBM Plex Mono',monospace;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    min-height:100vh;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
  }

  /* ---------- header ---------- */
  header{
    padding:22px 24px 18px;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:baseline;
    gap:14px;
    flex-wrap:wrap;
  }
  header .mark{
    height:84px;
    width:auto;
    flex:0 0 auto;
    display:block;
  }
  h1{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1.35rem;
    letter-spacing:-0.01em;
    margin:0;
  }
  header p{
    margin:0;
    color:var(--text-dim);
    font-size:0.85rem;
  }

  /* ---------- layout ---------- */
  .layout{
    display:grid;
    grid-template-columns:340px 1fr;
    min-height:calc(100vh - 84px);
  }
  @media (max-width:880px){
    .layout{grid-template-columns:1fr;}
  }

  .sidebar{
    border-right:1px solid var(--border);
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
    overflow-y:auto;
  }
  @media (max-width:880px){
    .sidebar{border-right:none; border-bottom:1px solid var(--border);}
  }

  .block-label{
    font-size:0.7rem;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-dim);
    margin:0 0 8px;
    font-weight:600;
  }

  /* ---------- drop zone ---------- */
  .dropzone{
    border:1.5px dashed var(--border);
    border-radius:var(--radius);
    padding:18px 14px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
    background:var(--surface);
  }
  .dropzone:hover, .dropzone.drag{
    border-color:var(--accent);
    background:var(--surface-2);
  }
  .dropzone .hint{
    font-size:0.78rem;
    color:var(--text-dim);
    margin-top:4px;
  }
  input[type=file]{display:none;}

  /* ---------- filmstrip ---------- */
  .filmstrip{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding:10px 6px;
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid var(--border);
    min-height:74px;
  }
  .filmstrip:empty::after{
    content:"Nog geen foto's geladen";
    color:var(--text-dim);
    font-size:0.8rem;
    align-self:center;
    padding-left:6px;
  }
  .frame{
    position:relative;
    flex:0 0 auto;
    width:58px;height:58px;
    border-radius:4px;
    overflow:hidden;
    cursor:pointer;
    border:2px solid transparent;
    background:repeating-conic-gradient(#2b2620 0% 25%, #211d18 0% 50%) 50% / 12px 12px;
  }
  .frame img{width:100%;height:100%;object-fit:cover;display:block;}
  .frame.active{border-color:var(--accent);}
  .frame .sprocket{
    position:absolute; left:2px; top:2px;
    width:5px;height:5px;border-radius:50%;
    background:rgba(0,0,0,.55);
  }

  /* ---------- form controls ---------- */
  label.field{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:0.82rem;
    color:var(--text-dim);
  }
  select, .btn, button{
    font-family:var(--font-body);
  }
  select{
    background:var(--surface-2);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 10px;
    font-size:0.88rem;
    appearance:none;
    background-image:linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
    background-position:calc(100% - 16px) center, calc(100% - 11px) center;
    background-size:5px 5px, 5px 5px;
    background-repeat:no-repeat;
  }
  select:focus, .dropzone:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  .settings-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }

  .btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:11px 14px;
    border-radius:9px;
    border:1px solid var(--border);
    background:var(--surface-2);
    color:var(--text);
    font-size:0.88rem;
    font-weight:500;
    cursor:pointer;
    transition:transform .08s ease, border-color .15s ease, background .15s ease;
  }
  .btn:hover{border-color:var(--text-dim);}
  .btn:active{transform:scale(0.98);}
  .btn.primary{
    background:var(--accent);
    border-color:var(--accent);
    color:#141306;
    font-weight:600;
  }
  .btn.primary:hover{background:#cbe45a;}
  .btn:disabled{opacity:0.4; cursor:not-allowed; transform:none;}

  .status{
    font-family:var(--font-mono);
    font-size:0.76rem;
    color:var(--text-dim);
    min-height:1em;
  }
  .status.ok{color:var(--ok);}
  .status.err{color:var(--danger);}

  /* ---------- preview ---------- */
  .preview-area{
    display:flex;
    flex-direction:column;
    padding:24px;
    gap:14px;
  }
  .preview-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
  }
  .preview-header h2{
    font-family:var(--font-display);
    font-size:1rem;
    margin:0;
    font-weight:600;
  }
  .preview-header .filename{
    font-family:var(--font-mono);
    font-size:0.78rem;
    color:var(--text-dim);
  }
  .canvas-wrap{
    flex:1;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:
      linear-gradient(45deg, #201c17 25%, transparent 25%) -0px -0px/20px 20px,
      linear-gradient(-45deg, #201c17 25%, transparent 25%) -0px -0px/20px 20px,
      linear-gradient(45deg, transparent 75%, #201c17 75%) -0px -0px/20px 20px,
      linear-gradient(-45deg, transparent 75%, #201c17 75%) -0px -0px/20px 20px,
      #17140f;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:340px;
    overflow:hidden;
    padding:16px;
  }
  #previewCanvas{
    max-width:100%;
    max-height:65vh;
    border-radius:4px;
    box-shadow:0 8px 30px rgba(0,0,0,.45);
  }
  .empty-state{
    color:var(--text-dim);
    font-size:0.9rem;
    text-align:center;
    max-width:280px;
    line-height:1.5;
  }

  .action-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .action-row .btn{width:auto; flex:1 1 220px;}

  ::-webkit-scrollbar{height:8px;width:8px;}
  ::-webkit-scrollbar-thumb{background:var(--border); border-radius:4px;}