:root{
    --paper:#F6F3EE; --surface:#FFFFFF; --surface-2:#FBF9F6;
    --ink:#211C16; --ink-2:#4A4238; --muted:#7A7064;
    --line:#E3DCD1; --line-2:#D2C8B9;
    --accent:#8A6531; --accent-soft:#F1E7D7; --accent-ink:#5E441F; --on-accent:#FFFDF9;
    --ok:#3C6E4C; --ok-soft:#E4EFE6;
    --warn:#8F5C12; --warn-soft:#F8EBD6;
    --crit:#9B3934; --crit-soft:#F8E4E2;
    --shadow:0 1px 2px rgba(33,28,22,.05), 0 10px 28px -20px rgba(33,28,22,.45);
    --r:14px;
    --f-display:"Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
    --f-body:"Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#17140F; --surface:#201C16; --surface-2:#262118;
      --ink:#F3EEE6; --ink-2:#D5CDC0; --muted:#9B9183;
      --line:#332D25; --line-2:#463E32;
      --accent:#CDA162; --accent-soft:#332916; --accent-ink:#E7C68D; --on-accent:#1B1710;
      --ok:#7FB98D; --ok-soft:#1C2B20;
      --warn:#D7A557; --warn-soft:#2E2413;
      --crit:#DE8C86; --crit-soft:#31201E;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.8);
    }
  }
  :root[data-theme="dark"]{
    --paper:#17140F; --surface:#201C16; --surface-2:#262118;
    --ink:#F3EEE6; --ink-2:#D5CDC0; --muted:#9B9183;
    --line:#332D25; --line-2:#463E32;
    --accent:#CDA162; --accent-soft:#332916; --accent-ink:#E7C68D; --on-accent:#1B1710;
    --ok:#7FB98D; --ok-soft:#1C2B20;
    --warn:#D7A557; --warn-soft:#2E2413;
    --crit:#DE8C86; --crit-soft:#31201E;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -20px rgba(0,0,0,.8);
  }

  *{box-sizing:border-box}
  body{
    margin:0; background:var(--paper); color:var(--ink);
    font-family:var(--f-body); font-size:16px; line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.01em}
  p{margin:0}
  button{font:inherit; color:inherit; cursor:pointer}
  input,select,textarea{font:inherit; color:inherit}
  .mono{font-family:var(--f-mono); font-size:.86em; letter-spacing:-.01em}
  .tnum{font-variant-numeric:tabular-nums}

  /* ---------- chrome ---------- */
  .topbar{
    position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
    background:color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .topbar-in{
    max-width:1080px; margin:0 auto; padding:10px 16px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:baseline; gap:9px; margin-right:auto}
  .brand b{font-family:var(--f-display); font-weight:700; font-size:16px; letter-spacing:-.02em}
  .brand span{font-size:11px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted)}
  .switch{display:flex; gap:2px; padding:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px}
  .switch button{
    border:0; background:transparent; border-radius:999px; padding:6px 14px;
    font-size:13.5px; font-weight:600; color:var(--muted);
  }
  .switch button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
  .switch button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  .wrap{max-width:1080px; margin:0 auto; padding:0 16px; padding-block:26px 64px}
  .narrow{max-width:560px}

  /* ---------- building blocks ---------- */
  .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow)}
  .pad{padding:20px}
  .stack{display:flex; flex-direction:column; gap:16px}
  .stack-s{display:flex; flex-direction:column; gap:9px}
  .row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
  .spread{display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap}
  .eyebrow{font-family:var(--f-mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted)}
  .lede{color:var(--ink-2)}
  .small{font-size:13.5px; color:var(--muted)}
  hr.sep{border:0; border-top:1px solid var(--line); margin:0}

  .btn{
    border:1px solid transparent; border-radius:10px; padding:11px 18px;
    font-weight:600; font-size:15px; background:var(--accent); color:var(--on-accent);
  }
  .btn:disabled{opacity:.42; cursor:not-allowed}
  .btn.ghost{background:transparent; border-color:var(--line-2); color:var(--ink)}
  .btn.link{background:transparent; border:0; color:var(--muted); padding:11px 4px; text-decoration:underline; text-underline-offset:3px}
  .btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .btn.full{width:100%}

  label.field{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink-2)}
  .input, select.input, textarea.input{
    background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px;
    padding:11px 12px; font-size:16px; width:100%;
  }
  textarea.input{min-height:84px; resize:vertical; font-family:var(--f-body)}
  .input:focus-visible{outline:2px solid var(--accent); outline-offset:0}

  .pill{
    display:inline-flex; align-items:center; gap:6px; border-radius:999px;
    padding:3px 10px; font-size:12px; font-weight:600; letter-spacing:.01em;
    background:var(--surface-2); color:var(--muted); border:1px solid var(--line);
  }
  .pill.ok{background:var(--ok-soft); color:var(--ok); border-color:transparent}
  .pill.warn{background:var(--warn-soft); color:var(--warn); border-color:transparent}
  .pill.crit{background:var(--crit-soft); color:var(--crit); border-color:transparent}
  .pill.acc{background:var(--accent-soft); color:var(--accent-ink); border-color:transparent}
  .dot{width:7px; height:7px; border-radius:50%; background:currentColor; flex:none}

  /* ---------- customer flow ---------- */
  .steps{display:flex; gap:6px; align-items:center; margin-bottom:18px; flex-wrap:wrap}
  .steps i{
    height:3px; flex:1 1 30px; min-width:24px; border-radius:2px; background:var(--line-2); display:block;
  }
  .steps i.on{background:var(--accent)}

  .lineitem{display:flex; gap:13px; padding:15px 16px; align-items:flex-start}
  .lineitem + .lineitem{border-top:1px solid var(--line)}
  .thumb{
    width:52px; height:52px; border-radius:9px; flex:none; background:var(--accent-soft);
    display:grid; place-items:center; color:var(--accent-ink); font-family:var(--f-mono); font-size:10px; text-align:center; line-height:1.15; padding:4px;
  }
  .lineitem h4{font-size:15px; line-height:1.3}
  .lineitem .meta{font-size:12.5px; color:var(--muted); margin-top:3px}
  input[type=checkbox].box{width:20px; height:20px; accent-color:var(--accent); margin-top:2px; flex:none}

  .choice{
    display:flex; gap:11px; align-items:flex-start; padding:13px 14px;
    border:1px solid var(--line-2); border-radius:11px; background:var(--surface-2); cursor:pointer;
  }
  .choice input{accent-color:var(--accent); margin-top:3px; flex:none; width:17px; height:17px}
  .choice[data-on="1"]{border-color:var(--accent); background:var(--accent-soft)}
  .choice b{font-weight:600; font-size:14.5px; display:block}
  .choice span{font-size:13px; color:var(--muted); display:block; margin-top:2px}

  .engine{
    border:1px dashed var(--line-2); border-radius:12px; background:var(--surface-2); padding:14px 15px;
  }
  .engine .rule{display:flex; gap:9px; align-items:baseline; font-size:13px; color:var(--ink-2); padding:3px 0}
  .engine .rule .mono{color:var(--accent-ink); background:var(--accent-soft); padding:1px 6px; border-radius:5px}

  .uploads{display:grid; grid-template-columns:repeat(auto-fill, minmax(78px,1fr)); gap:8px}
  .up{
    aspect-ratio:1; border-radius:9px; border:1px dashed var(--line-2); background:var(--surface-2);
    display:grid; place-items:center; overflow:hidden; position:relative;
  }
  .up img{width:100%; height:100%; object-fit:cover; max-width:100%}
  .up.add{cursor:pointer; color:var(--muted); font-size:22px; font-family:var(--f-display)}

  .slot{display:flex; gap:11px; align-items:center; padding:13px 14px; border:1px solid var(--line-2); border-radius:11px; background:var(--surface-2); cursor:pointer}
  .slot[data-on="1"]{border-color:var(--accent); background:var(--accent-soft)}
  .slot input{accent-color:var(--accent); flex:none; width:17px; height:17px}
  .slot .d{font-weight:600; font-size:14.5px}
  .slot .w{font-size:12.5px; color:var(--muted)}

  .timeline{display:flex; flex-direction:column; gap:0}
  .tl{display:flex; gap:12px; align-items:flex-start}
  .tl .bullet{display:flex; flex-direction:column; align-items:center; flex:none; align-self:stretch}
  .tl .bullet i{width:10px; height:10px; border-radius:50%; background:var(--line-2); margin-top:5px; display:block}
  .tl.done .bullet i{background:var(--ok)}
  .tl.now .bullet i{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
  .tl .bullet u{flex:1; width:2px; background:var(--line); display:block; text-decoration:none; min-height:16px}
  .tl:last-child .bullet u{display:none}
  .tl .body{padding-bottom:16px}
  .tl b{font-size:14.5px; font-weight:600; display:block}
  .tl span{font-size:13px; color:var(--muted)}

  .money{display:flex; justify-content:space-between; font-size:14.5px; padding:4px 0}
  .money.total{font-weight:700; font-size:16px; border-top:1px solid var(--line); margin-top:6px; padding-top:10px}

  /* ---------- backoffice ---------- */
  .tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:12px}
  .tile{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 15px}
  .tile .k{font-size:12px; color:var(--muted); font-weight:600}
  .tile .v{font-family:var(--f-display); font-size:27px; font-weight:600; line-height:1.15; margin-top:4px; font-variant-numeric:tabular-nums}
  .tile .s{font-size:12px; color:var(--muted); margin-top:2px}
  .tile.flag{border-color:var(--crit)}
  .tile.flag .v{color:var(--crit)}

  .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
  table{border-collapse:collapse; width:100%; min-width:800px}
  th{
    text-align:left; font-family:var(--f-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--muted); font-weight:500; padding:11px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
  }
  td{padding:12px 14px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:top}
  tr:last-child td{border-bottom:0}
  tbody tr{cursor:pointer}
  tbody tr:hover{background:var(--surface-2)}
  tbody tr[aria-selected="true"]{background:var(--accent-soft)}
  td .sub{font-size:12.5px; color:var(--muted)}
  td b.mono, td .sub.mono{white-space:nowrap}

  .split{display:grid; grid-template-columns:1fr; gap:16px}
  @media (min-width:900px){ .split{grid-template-columns:1.35fr 1fr; align-items:start} }

  .dossier .photos{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
  .dossier .photos div{aspect-ratio:1; border-radius:8px; background:var(--surface-2); border:1px solid var(--line); display:grid; place-items:center; font-size:10.5px; color:var(--muted); text-align:center; padding:4px; font-family:var(--f-mono)}

  .note{background:var(--accent-soft); border-radius:11px; padding:13px 15px; font-size:13.5px; color:var(--accent-ink)}
  .demo{font-size:12.5px; color:var(--muted); background:var(--surface-2); border:1px dashed var(--line-2); border-radius:10px; padding:11px 13px}
  .demo b{color:var(--ink-2)}
  .demo button{background:transparent; border:0; padding:0; color:var(--accent-ink); font-weight:600; text-decoration:underline; text-underline-offset:2px; font-size:12.5px}

  /* ---------- mails ---------- */
  .mail{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow)}
  .mail .head{padding:15px 18px; background:var(--surface-2); border-bottom:1px solid var(--line)}
  .mail .trigger{display:flex; gap:9px; align-items:baseline; flex-wrap:wrap}
  .mail .when{font-size:13px; color:var(--ink-2)}
  .mail .subject{font-family:var(--f-display); font-weight:600; font-size:17px; margin-top:9px}
  .mail .to{font-size:12.5px; color:var(--muted); margin-top:2px}
  .mail .body{padding:18px; font-size:14.5px; color:var(--ink-2); white-space:pre-line}
  .mail .body b{color:var(--ink)}
  .mail .var{font-family:var(--f-mono); font-size:.85em; background:var(--accent-soft); color:var(--accent-ink); padding:1px 5px; border-radius:5px; white-space:nowrap}
  .mail .foot{padding:12px 18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); background:var(--surface-2)}
  .mailgrid{display:grid; grid-template-columns:1fr; gap:14px; align-items:start}
  @media (min-width:860px){ .mailgrid{grid-template-columns:1fr 1fr} }

  @media (prefers-reduced-motion:no-preference){
    .screen{animation:in .22s ease-out}
    @keyframes in{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
  }

/* ---------- aanvullingen voor de echte app ---------- */
html, body { min-height: 100%; }
body { padding: 0; }
.laden { display:inline-block; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--line-2); border-top-color:var(--accent); animation:draai .7s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
.leeg { padding:34px 18px; text-align:center; color:var(--muted); font-size:14px; }
.uit { opacity:.55; }