:root {
    --peach:#f7d2b9; --ink:#14101a; --white:#fff; --pink:#e6207f; --yellow:#f6e61e; --green:#6cbb56;
    --muted:#6b5a5a; --bad:#d4145a; --good:#2f8f2f;
    --font-head:'Shaabyla','Comic Sans MS',cursive,sans-serif;
    --font-text:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  }
  @font-face { font-family:'Shaabyla'; src:url('/fonts/Shaabyla-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
  * { box-sizing:border-box; font-synthesis:none; }
  body { margin:0; background:var(--peach); color:var(--ink); font:400 16px/1.35 var(--font-head); text-transform:uppercase; letter-spacing:.03em; padding:0 0 calc(32px + env(safe-area-inset-bottom)); }
  b { font-weight:400; }
  /* Cijfers in Londrina Solid (het eerdere lettertype); letters blijven Shaabyla */
  .num { font-family:'Londrina Solid','Comic Sans MS',cursive; font-weight:900; letter-spacing:.01em; }
  .wrap { padding:0 16px; max-width:560px; margin:0 auto; }
  .topline { height:8px; background:#fbd3e0; }
  header { background:var(--white); border-bottom:3px solid var(--ink); }
  header .wrap { display:flex; justify-content:space-between; align-items:center; padding-top:calc(10px + env(safe-area-inset-top)); padding-bottom:10px; }
  .logo { font:400 32px/1 var(--font-head); transform:rotate(-2deg); }
  .sticker { background:var(--yellow); border:2.5px solid var(--ink); border-radius:999px; padding:5px 11px; font:400 15px/1 var(--font-head); transform:rotate(3deg); box-shadow:2px 2px 0 var(--ink); cursor:pointer; }
  .sticker:active { transform:rotate(3deg) translateY(2px); box-shadow:0 0 0 var(--ink); }
  .tabs { display:flex; gap:7px; margin:18px 0 16px; }
  .tabs button { flex:1; padding:11px 0; border:2.5px solid var(--ink); background:var(--white); color:var(--ink); border-radius:12px; font:400 15px/1 var(--font-head); letter-spacing:.03em; text-transform:uppercase; box-shadow:0 4px 0 var(--ink); cursor:pointer; }
  .tabs button:active { transform:translateY(3px); box-shadow:0 1px 0 var(--ink); }
  .tabs button.on { background:var(--green); }

  /* Leesbare tekst (zinnen) in gewone letters */
  .txt, .help, .intro, .sub { font-family:var(--font-text); text-transform:none; letter-spacing:0; font-weight:500; }
  .intro { font-size:13px; line-height:1.45; color:var(--muted); margin:-4px 0 10px; }
  .sub { font-size:12px; color:var(--muted); }
  .help { font-size:13px; line-height:1.45; margin:8px 0 0; padding-top:8px; border-top:2px dashed #cdb8a8; color:#3b2f2f; }

  .grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
  .card { background:var(--white); border:2.5px solid var(--ink); border-radius:18px; padding:12px 14px; box-shadow:4px 4px 0 var(--ink); position:relative; }
  .card.full { grid-column:1/-1; }
  .card.yellow { background:var(--yellow); }
  .card.pink { background:var(--pink); color:#fff; }
  .card.pink .lbl, .card.pink .sub, .card.pink .delta { color:#fff !important; }
  .card.pink .help { color:#fff; border-color:rgba(255,255,255,.5); }
  .lbl { color:var(--muted); font-size:13px; line-height:1.2; padding-right:26px; }
  .card.yellow .lbl { color:#5a4d00; }
  .val { font:400 36px/1.05 var(--font-head); margin-top:4px; font-variant-numeric:tabular-nums; }
  .val small { font-size:20px; }
  .delta { font:600 12px/1.3 var(--font-text); text-transform:none; letter-spacing:0; margin-top:3px; }
  .up { color:var(--good); } .down { color:var(--bad); }
  details > summary { list-style:none; }
  details > summary::-webkit-details-marker { display:none; }
  .card > details > summary { position:absolute; top:9px; right:10px; width:24px; height:24px; border:2px solid var(--ink); border-radius:50%; background:var(--white); color:var(--ink); font:400 15px/20px var(--font-head); text-align:center; cursor:pointer; }
  .card.pink > details > summary { background:var(--yellow); }

  h2 { display:inline-block; font:400 23px/1 var(--font-head); letter-spacing:.04em; margin:28px 0 12px; padding:6px 12px; background:var(--white); border:2.5px solid var(--ink); border-radius:10px; transform:rotate(-1.5deg); box-shadow:3px 3px 0 var(--ink); }
  h2.alt { transform:rotate(1.2deg); background:var(--yellow); }
  .summary { background:var(--white); border:2.5px solid var(--ink); border-radius:18px; padding:14px 16px; box-shadow:4px 4px 0 var(--ink); margin-bottom:14px; }
  .summary .big { font:400 25px/1.15 var(--font-head); margin:6px 0 8px; }
  .summary p { margin:0 0 6px; font-size:14px; line-height:1.5; }
  .chip { display:inline-block; font:400 15px/1 var(--font-head); padding:5px 10px; border:2.5px solid var(--ink); border-radius:999px; }
  .chip.good { background:var(--green); } .chip.warn { background:var(--yellow); } .chip.bad { background:var(--pink); color:#fff; }

  .bars { display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:10px; border-bottom:2.5px solid var(--ink); }
  .bars button { flex:1; height:100%; padding:0; border:0; background:none; display:flex; align-items:flex-end; cursor:pointer; }
  .bars i { display:block; width:100%; background:var(--green); border:2px solid var(--ink); border-bottom:0; border-radius:5px 5px 0 0; min-height:3px; }
  .bars button.sel i { background:var(--pink); }
  .bars button.zero i { background:transparent; border-color:#cdb8a8; }
  .wbars { position:relative; display:flex; gap:3px; height:150px; margin-top:10px; }
  .wbars button { flex:1; position:relative; height:100%; padding:0; border:0; background:none; cursor:pointer; }
  .wbars i { position:absolute; left:0; right:0; background:var(--green); border:2px solid var(--ink); border-radius:5px; }
  .wbars i.neg { background:var(--pink); }
  .wbars button.sel i { outline:3px solid var(--yellow); }
  .wbars .zline { position:absolute; left:0; right:0; height:2.5px; background:var(--ink); z-index:2; pointer-events:none; }
  .axis { display:flex; justify-content:space-between; font:600 11px/1 var(--font-text); text-transform:none; letter-spacing:0; color:var(--muted); margin-top:5px; }
  .cap { font-size:13px; margin-top:8px; min-height:1.4em; }

  .row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:2px dashed #cdb8a8; }
  .row:last-child { border-bottom:0; }
  .row.tip { align-items:flex-start; justify-content:flex-start; }
  .row.tip .ico { font-size:20px; line-height:1.2; }
  .row.tip .txt { font-size:14px; line-height:1.5; }
  .row.tip .txt strong { font-weight:700; }
  .pill { font:400 15px/1 var(--font-head); letter-spacing:.03em; padding:5px 10px; border-radius:999px; border:2.5px solid var(--ink); white-space:nowrap; }
  .ok { background:var(--green); } .lowp { background:var(--yellow); } .crit { background:var(--pink); color:#fff; }
  .meter { height:12px; background:var(--white); border:2px solid var(--ink); border-radius:999px; margin-top:7px; overflow:hidden; }
  .meter i { display:block; height:100%; background:var(--pink); border-right:2px solid var(--ink); }
  .total { font:400 30px/1 var(--font-head); }

  .how { margin-top:28px; }
  .how summary { cursor:pointer; display:inline-block; font:400 20px/1 var(--font-head); padding:8px 14px; background:var(--white); border:2.5px solid var(--ink); border-radius:10px; box-shadow:3px 3px 0 var(--ink); }
  .how .card { margin-top:14px; }
  .how dl { margin:0; font-family:var(--font-text); text-transform:none; letter-spacing:0; font-size:13px; line-height:1.5; font-weight:500; }
  .how dt { font:400 17px/1.2 var(--font-head); text-transform:uppercase; letter-spacing:.03em; margin-top:12px; }
  .note { font:600 12px/1.5 var(--font-text); text-transform:none; letter-spacing:0; text-align:center; margin-top:22px; padding:12px; background:rgba(255,255,255,.55); border:2px dashed var(--ink); border-radius:14px; }
  .note:empty { display:none; }
  .loading { text-align:center; font:400 30px/1 var(--font-head); padding:40px 0; }

  /* Wisselen tussen B2C en B2B */
  .mode { display:flex; gap:10px; margin:16px 0 0; }
  .mode a { flex:1; text-align:center; padding:11px 0; border:2.5px solid var(--ink); border-radius:12px; background:var(--white); color:var(--ink); text-decoration:none; font:400 17px/1 var(--font-head); box-shadow:0 4px 0 var(--ink); }
  .mode a.on { background:var(--yellow); }
  /* B2B: omzet per maand, dit jaar naast vorig jaar */
  .mb { display:flex; gap:5px; height:140px; margin-top:10px; border-bottom:2.5px solid var(--ink); }
  .mb button { flex:1; height:100%; padding:0; border:0; background:none; display:flex; align-items:flex-end; gap:2px; cursor:pointer; }
  .mb i { flex:1; display:block; background:var(--yellow); border:2px solid var(--ink); border-bottom:0; border-radius:4px 4px 0 0; min-height:2px; }
  .mb i.cur { background:var(--green); }
  .mb button.sel { background:rgba(230,32,127,.15); }
  .axis12 { display:flex; gap:5px; font:600 11px/1 var(--font-text); text-transform:none; letter-spacing:0; color:var(--muted); margin-top:5px; }
  .axis12 span { flex:1; text-align:center; }
  .legend { font:600 12px/1.3 var(--font-text); text-transform:none; letter-spacing:0; margin-top:8px; }
  .legend b { display:inline-block; width:12px; height:12px; border:2px solid var(--ink); vertical-align:-2px; margin-right:4px; }

  /* "Zo sta je ervoor": vandaag tegenover gisteren en het gemiddelde op hetzelfde uur */
  .pacecard { margin-bottom:14px; }
  .pace { margin-top:14px; }
  .ptop { display:flex; justify-content:space-between; align-items:baseline; }
  .pv { font:400 30px/1 var(--font-head); }
  .track { position:relative; height:24px; background:var(--white); border:2.5px solid var(--ink); border-radius:999px; margin-top:6px; }
  .track i { display:block; height:100%; background:var(--green); border-radius:999px; }
  .track u { position:absolute; top:-6px; bottom:-6px; width:4px; margin-left:-2px; background:var(--ink); border-radius:2px; text-decoration:none; }
  .track u.m2 { background:var(--yellow); border:2px solid var(--ink); width:8px; margin-left:-4px; }
  .pscale { display:flex; justify-content:space-between; font:600 11px/1 var(--font-text); text-transform:none; letter-spacing:0; color:var(--muted); margin-top:5px; }
  .pchips { display:flex; gap:6px; flex-wrap:wrap; margin-top:7px; }
  .legend .sw1, .legend .sw2 { display:inline-block; width:5px; height:14px; border:2px solid var(--ink); vertical-align:-3px; margin-right:5px; background:var(--ink); }
  .legend .sw2 { background:var(--yellow); width:8px; }