/* demo/stijl.css
 *
 * KOPIE van het stijlblok uit index.html (regels 54-3361), zonder wijzigingen.
 *
 * Waarom een kopie en geen gedeeld bestand: het stijlblok uit index.html halen
 * zou index.html wijzigen, en dat mag niet. De opdracht is expliciet: liever
 * kopieren dan bestaande code herstructureren.
 *
 * LET OP bij onderhoud: dit loopt NIET automatisch mee met index.html. Pas je
 * daar de huisstijl aan, dan verandert de demo niet mee.
 *
 * Alle selectors zijn gescopet op #app-layer. Daarom zet demo/index.html zijn
 * hele inhoud in <div id="app-layer">: dan pakt de opmaak vanzelf.
 */


  /* ===== MARKETINGSITE: hetzelfde palet als de app =====
     Eén merk, één ontwerp. Wie op de site het licht ziet en in de app het
     donker, denkt dat hij bij een ander bedrijf is beland. */
  :root {
    /* Merk-palet 2.0 (vormgeving-brief) — zelfde herprogrammering als index.html.
       Namen blijven, waarden naar off-white/sage/green-900 + accent #9ACB7A. */
    --off-white:#FCFCFA; --sage-100:#E7EDDF; --sage-300:#C9D6C1;
    --green-700:#1D3B2A; --green-900:#0F1F17; --accent:#9ACB7A;
    --ink-60:#5A6B62; --ink-40:#8A968E;
    --radius:12px; --radius-lg:20px; --radius-btn:10px;
    --shadow-subtle:0 4px 16px rgba(15,31,23,.06);

    --wash:#F4F5F0;
    --paneel:#FFFFFF;
    --vel:#FCFCFA;
    --rail:#F5F6F1;

    --abyss:#E7EDDF;
    --hull:#FFFFFF;
    --hull-2:#F4F5F0;
    --line:#E5E9E2;
    --line-soft:#F0F1EB;
    --fog:#5A6B62;
    --mist:#5A6B62;
    --foam:#0F1F17;
    --signal:#1D3B2A;
    --signal-dim:#0F1F17;
    --beam:#9ACB7A;
    --warn:#7A5A12;  --warn-bg:#F3E9D2;
    --danger:#9E3B28; --danger-bg:#F3DED8;
    --ok:#2F6B43;    --ok-bg:#E4EFE4;
    --ok-dim:#2F6B43;
    --ok-tekst:#2F6B43; --warn-tekst:#7A5A12; --danger-tekst:#9E3B28;
    --paper:#FFFFFF;
    --ink:#0F1F17;
    --ink-soft:#5A6B62;
    --card-line:#E5E9E2;
    --violet:#1D3B2A; --violet-dim:#0F1F17;
    --beam-tekst:#1D3B2A;
    --beam-knop:#0F1F17;
    --f1:#9AA29D; --f2:#7FA0B8; --f3:#5F8A72; --f4:#D2A044; --f5:#2F6B43; --f6:#9ACB7A;

    --schaduw-zweef:
      0 2px 4px rgba(28,40,34,.04),
      0 12px 24px rgba(28,40,34,.07),
      0 46px 80px -28px rgba(28,40,34,.32);
    --card-shadow:0 8px 22px -8px rgba(28,40,34,0.15);
  }
  * { box-sizing:border-box; }
  html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
  body {
    margin:0; background:var(--abyss); color:var(--foam);
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;
    line-height:1.6; -webkit-font-smoothing:antialiased;
  }
  .mono { font-family:'SF Mono',ui-monospace,'Cascadia Mono',Menlo,monospace; }
  a { color:inherit; text-decoration:none; }
  h1,h2,h3 { line-height:1.12; margin:0; font-family:'Newsreader',Georgia,serif; font-weight:600; letter-spacing:-0.015em; }

  /* ===== layout helpers ===== */
  .wrap { max-width:1140px; margin:0 auto; padding:0 28px; }
  .screen { display:none; }
  .screen.active { display:block; }
  .eyebrow { font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--beam-tekst); margin:0 0 14px; font-weight:600; }

  /* ===== nav ===== */
  header.nav {
    position:sticky; top:0; z-index:50;
    background:rgba(252,252,250,0.86); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line-soft);
  }
  .nav-inner { display:flex; align-items:center; gap:14px; height:64px; }
  .brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; letter-spacing:-0.01em; cursor:pointer; }
  .brand .logo { width:28px; height:28px; border-radius:8px; background:transparent; display:flex; align-items:center; justify-content:center; }
  .brand .logo svg { width:16px; height:16px; }
  .brand b { color:var(--signal); font-weight:700; }
  .nav-links { display:flex; gap:6px; margin-left:auto; align-items:center; }
  .nav-links a { font-size:14px; color:var(--mist); padding:8px 14px; border-radius:8px; transition:all .15s; cursor:pointer; }
  .nav-links a:hover { color:var(--foam); background:var(--hull); }
  .btn { display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding:9px 18px; border-radius:9px; border:1px solid transparent; cursor:pointer; transition:all .15s; font-family:inherit; }
  .btn-primary { background:var(--beam-knop); color:#fff; }
  .btn-primary:hover { background:#1D3B2A; transform:translateY(-1px); }
  .btn-ghost { background:var(--hull); color:var(--mist); border-color:var(--line); }
  .btn-ghost:hover { color:var(--foam); border-color:var(--violet); }
  .btn-lg { padding:13px 26px; font-size:15px; }
  .nav-toggle { display:none; }

  /* ===== hero ===== */
  .hero { position:relative; overflow:hidden; padding:88px 0 64px; }
  .hero-glow { position:absolute; top:-180px; right:-120px; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle,rgba(154,203,122,0.18),transparent 62%); pointer-events:none; }
  .hero-glow.b { top:120px; right:auto; left:-200px; width:480px; height:480px; background:radial-gradient(circle,rgba(154,203,122,0.13),transparent 60%); }
  .hero-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:52px; align-items:center; position:relative; }
  .hero h1 { font-size:52px; margin-bottom:22px; }
  .hero h1 .hl { color:var(--beam-tekst); font-style:italic; font-weight:600; }
  .hero .lede { font-size:19px; color:var(--mist); margin-bottom:32px; max-width:520px; }
  .hero-cta { display:flex; gap:13px; flex-wrap:wrap; align-items:center; }
  .hero-note { font-size:13px; color:var(--fog); margin-top:18px; display:flex; align-items:center; gap:8px; }
  .hero-note .dot { width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 8px var(--ok); }

  /* ===== hero visual (mini dashboard) ===== */
  .hero-visual { background:linear-gradient(160deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 30px 60px -20px rgba(0,0,0,0.5); }
  .hv-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .hv-head .hh-lbl { font-size:11px; color:var(--fog); letter-spacing:0.1em; display:flex; align-items:center; gap:6px; }
  .hv-head .hh-lbl svg { width:13px; height:13px; color:var(--beam-tekst); }
  .hv-head .hh-live { font-size:11px; color:var(--ok-tekst); }
  .hv-cycle { position:relative; padding-left:34px; }
  .hv-loop { position:absolute; left:0; top:0; width:34px; height:100%; }
  .hv-steps { display:flex; flex-direction:column; gap:2px; }
  .hv-step { display:flex; gap:11px; align-items:flex-start; padding:6px 0; }
  .hv-conn { height:9px; border-left:1.4px solid var(--line); margin-left:13px; }
  .hv-ic { width:28px; height:28px; border-radius:8px; background:var(--hull-2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--fog); }
  .hv-ic svg { width:15px; height:15px; }
  .hv-ic.beam { color:var(--beam-tekst); }
  .hv-ic.impact { background:var(--ok-bg); color:var(--ok-tekst); }
  .hv-lbl { font-size:9.5px; letter-spacing:0.09em; color:var(--fog); }
  .hv-lbl.beam { color:var(--beam-tekst); }
  .hv-lbl.green { color:var(--ok-tekst); }
  .hv-txt { font-size:13.5px; color:var(--foam); line-height:1.3; }
  .hv-txt.strong { font-size:14px; font-weight:500; }
  .hv-sub { font-size:10.5px; color:var(--fog); margin-top:2px; }

  .layers-5 { grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; }
  .layer-uniek { position:relative; }
  .layer-uniek::after { content:''; position:absolute; inset:-2px; border-radius:14px;
                        border:1.5px solid var(--beam); opacity:.35; pointer-events:none; }
  @media (max-width:1100px){ .layers-5 { grid-template-columns:repeat(2,1fr) !important; } }
  @media (max-width:640px){ .layers-5 { grid-template-columns:1fr !important; } }

  /* ===== BEWIJS ===== */
  .bewijs { background:var(--paneel); }
  .bw-kop { text-align:center; max-width:640px; margin:0 auto 44px; }
  .bw-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
  .bw-kaart { background:var(--kaart,#fff); border-radius:16px; padding:28px 26px; }
  .bw-v { font-family:'Newsreader',serif; font-size:40px; font-weight:600; color:var(--beam-tekst);
          line-height:1; margin-bottom:10px; }
  .bw-kaart h3 { font-size:14px; font-weight:500; color:var(--fog); margin:0 0 12px;
                 text-transform:uppercase; letter-spacing:.04em; }
  .bw-kaart p { font-size:13.5px; color:var(--mist); line-height:1.65; margin:0; }
  .bw-noot { text-align:center; margin-top:32px; font-size:13px; color:var(--fog);
             font-style:italic; max-width:64ch; margin-left:auto; margin-right:auto; }

  /* ===== sections ===== */
  section { padding:72px 0; }
  .section-head { text-align:center; max-width:680px; margin:0 auto 52px; }
  .section-head h2 { font-size:36px; margin-bottom:16px; }
  .section-head p { font-size:17px; color:var(--mist); }

  /* problem strip */
  .prob { background:var(--hull); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
  .prob-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .prob-card { padding:8px 4px; }
  .prob-card .ic { width:42px; height:42px; border-radius:11px; background:var(--danger-bg); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
  .prob-card .ic svg { width:21px; height:21px; stroke:var(--danger); }
  .prob-card h3 { font-size:18px; margin-bottom:9px; }
  .prob-card p { font-size:14.5px; color:var(--fog); margin:0; }

  /* how it works - 3 layers */
  .layers { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; position:relative; }
  .layer { background:var(--hull); border:1px solid var(--line); border-radius:15px; padding:28px 24px; position:relative; transition:all .2s; }
  .layer:hover { border-color:var(--signal-dim); transform:translateY(-3px); }
  .layer .step { font-family:'SF Mono',monospace; font-size:12px; color:var(--beam-tekst); font-weight:700; margin-bottom:16px; }
  .layer .lic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
  .layer:nth-child(1) .lic { background:var(--inset,#F4F5F0); }
  .layer:nth-child(1) .lic svg { stroke:var(--signal); }
  .layer:nth-child(2) .lic { background:#E7EDDF; }
  .layer:nth-child(2) .lic svg { stroke:var(--beam); }
  .layer:nth-child(3) .lic { background:rgba(79,197,138,0.14); }
  .layer:nth-child(3) .lic svg { stroke:var(--ok); }
  .layer .lic svg { width:23px; height:23px; fill:none; stroke-width:1.8; }
  .layer h3 { font-size:20px; margin-bottom:11px; }
  .layer p { font-size:14.5px; color:var(--fog); margin:0; }
  .layer-arrow { position:absolute; top:50%; right:-22px; transform:translateY(-50%); z-index:2; color:var(--fog); }
  .layer-arrow svg { width:24px; height:24px; }

  /* features grid */
  .feat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
  .feat { display:flex; gap:16px; background:var(--hull); border:1px solid var(--line); border-radius:13px; padding:22px 22px; }
  .feat .fic { flex-shrink:0; width:40px; height:40px; border-radius:10px; background:var(--hull-2); display:flex; align-items:center; justify-content:center; }
  .feat .fic svg { width:20px; height:20px; stroke:var(--signal); fill:none; stroke-width:1.8; }
  .feat h3 { font-size:16px; margin-bottom:6px; }
  .feat p { font-size:14px; color:var(--fog); margin:0; }

  /* outcome / results band */
  .band { background:linear-gradient(135deg,var(--hull-2),var(--hull)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .stats { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center; }
  .stat .big { font-size:46px; font-weight:700; letter-spacing:-0.03em; color:var(--signal); margin-bottom:6px; }
  .stat .lbl { font-size:14px; color:var(--mist); }

  /* for whom */
  .whom-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .whom-np { margin:24px 0 0; text-align:center; font-size:14px; color:var(--mist); }
  .binnenkort { display:flex; align-items:center; justify-content:center; min-height:50vh; padding:24px; }
  .uitlog-btn { display:flex; align-items:center; gap:8px; width:100%; margin-top:8px; padding:9px 10px; background:transparent; border:1px solid var(--line); border-radius:9px; color:var(--fog); font-size:13px; font-family:inherit; cursor:pointer; transition:all .15s; }
  .uitlog-btn:hover { color:var(--foam); border-color:var(--fog); }
  .uitlog-btn svg { width:15px; height:15px; flex-shrink:0; }
  #app-layer .vb-verbonden { background:var(--hull); border:1px solid var(--ok-dim); border-radius:14px; padding:20px 22px; margin-bottom:22px; }
  #app-layer .vbv-top { display:flex; align-items:center; gap:9px; margin-bottom:8px; }
  #app-layer .vbv-dot { width:9px; height:9px; border-radius:50%; background:var(--ok); flex-shrink:0; }
  #app-layer .vb-verbonden h3 { font-size:17px; }
  #app-layer .vbv-p { font-size:13.5px; color:var(--fog); line-height:1.6; margin:0 0 14px; }
  #app-layer .vbv-rij { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); font-size:13.5px; color:var(--fog); }
  #app-layer .vbv-rij b { color:var(--foam); }
  .fn-bar { display:flex; align-items:center; gap:12px; margin:16px 0 8px; }
  .fn-status { font-size:13px; color:var(--fog); }
  .fn-h { font-size:16px; margin:22px 0 10px; }
  .fn-fases { display:flex; flex-direction:column; gap:8px; }
  .fn-fase { display:grid; grid-template-columns:170px 1fr; gap:12px; align-items:start; background:var(--hull); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
  .fn-fase-naam { font-size:13.5px; color:var(--foam); display:flex; align-items:center; gap:7px; }
  .fn-fase-naam .d { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .fn-evs { display:flex; flex-wrap:wrap; gap:6px; }
  .fn-ev { font-size:12px; padding:4px 9px; border-radius:20px; border:1px solid var(--line); color:var(--fog); cursor:pointer; background:transparent; }
  .fn-ev.aan { background:var(--beam); border-color:var(--beam); color:var(--ink); font-weight:600; }
  .fn-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
  .fn-veld { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--fog); }
  .fn-veld select, .fn-veld input { background:var(--hull); border:1px solid var(--line); border-radius:8px; padding:9px 10px; color:var(--foam); font-size:14px; font-family:inherit; }
  .fn-chips { display:flex; flex-wrap:wrap; gap:7px; }
  .fn-acties { display:flex; align-items:center; gap:12px; margin-top:22px; }
  .fn-melding { font-size:13px; color:var(--ok-tekst); }
  #app-layer .btn.fn-opgeslagen { background:var(--ok); border-color:var(--ok); color:var(--ink); }
  #app-layer .fn-eerder { font-size:12.5px; color:var(--fog); margin-left:2px; }
  #app-layer .fn-veld textarea { background:var(--hull); border:1px solid var(--line); border-radius:8px; padding:9px 10px; color:var(--foam); font-size:14px; font-family:inherit; resize:vertical; }
  #app-layer .pg-periode { font-size:12.5px; color:var(--fog); margin-top:6px; }
  #app-layer .pg-kop { display:grid; grid-template-columns:1fr 90px 70px 175px; gap:14px; align-items:center; padding:0 13px 6px; margin-top:18px; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--fog); border-bottom:1px solid var(--line); }
  #app-layer .pg-kop span:nth-child(2), #app-layer .pg-kop span:nth-child(3) { text-align:right; }
  #app-layer .pg-blok { background:var(--hull); border:1px solid var(--line); border-radius:9px; padding:11px 13px; }
  #app-layer .pg-blok.pg-afwijk { border-color:var(--warn); }
  #app-layer .pg-rij { display:grid; grid-template-columns:1fr 90px 70px 175px; gap:14px; align-items:center; }
  #app-layer .pg-cijfers { text-align:right; }
  /* LET OP: --ink en --foam zijn bij de omzetting naar Gelaagd allebei donker
     geworden (in het oude thema was --ink de achtergrond, --foam de tekst).
     Een select met background:var(--ink) + color:var(--foam) is dus zwart op
     zwart. Hier expliciet het witte veld uit het lichte thema. */
  #app-layer .pg-sel { background:var(--kaart, #fff); border:1px solid var(--line); border-radius:7px;
                       padding:6px 8px; color:var(--foam); font-size:12.5px; font-family:inherit;
                       width:100%; cursor:pointer; transition:border-color .13s; }
  #app-layer .pg-sel:hover  { border-color:var(--beam); }
  #app-layer .pg-sel:focus  { outline:none; border-color:var(--beam);
                              box-shadow:0 0 0 3px rgba(154,203,122,.12); }
  #app-layer .pg-routes { display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:9px; padding-top:9px; border-top:1px solid var(--line); }
  #app-layer .pg-route { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  #app-layer .pg-rlabel { font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--fog); }
  #app-layer .pg-dk { font-size:12.5px; color:var(--fog); }
  #app-layer .pg-dk b { color:var(--foam); font-weight:500; }
  #app-layer .pg-dk.pg-leeg { font-style:italic; opacity:.7; }
 /* Was color:var(--foam) op background:var(--ink), in het oude thema licht-op-
     donker, na de omzetting DONKER OP DONKER. Mijn eerdere zoekopdracht miste dit
     omdat 'color' hier vóór 'background' staat. */
  #app-layer .pg-chip { display:inline-flex; align-items:center; gap:5px; font-size:12.5px;
                        color:var(--foam); background:var(--kaart,#fff); border:1px solid var(--line);
                        border-radius:20px; padding:3px 5px 3px 10px; }
  #app-layer .pg-chip-x { background:transparent; border:0; color:var(--fog); font-size:15px; line-height:1; cursor:pointer; padding:0 4px; border-radius:50%; }
  #app-layer .pg-chip-x:hover { color:var(--warn-tekst); }
  #app-layer .pg-toevoeg { background:transparent; border:1px dashed var(--line); border-radius:20px; padding:4px 8px; color:var(--fog); font-size:12px; font-family:inherit; cursor:pointer; }
  #app-layer .pg-toevoeg:hover { border-color:var(--fog); color:var(--foam); }
  #app-layer .pg-signaal { font-size:11.5px; color:var(--warn-tekst); border:1px solid var(--warn); border-radius:20px; padding:2px 8px; }
  /* ===== Taken: zelfde ontwerptaal als de demo ===== */
  #app-layer .fc-stat .v.v-slecht { color:var(--warn-tekst); }
  #app-layer .fc-stat .v.v-goed   { color:var(--ok-tekst); }

  /* Taakregel */
  /* ===== Klantreis, Inzichten, Impact, Maandrapport ===== */
  #app-layer .label-mono { font-family:'SF Mono',monospace; font-size:11px; letter-spacing:.1em;
                           text-transform:uppercase; color:var(--fog); }

  /* Klantreis: de trap */
  #app-layer .kr-kern { display:flex; gap:24px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
  #app-layer .krk-n { font-size:38px; font-weight:600; color:var(--warn-tekst); letter-spacing:-.02em; line-height:1; }
  #app-layer .krk-l { font-size:12px; color:var(--fog); margin-top:5px; }
  #app-layer .krk-rechts { flex:1; min-width:240px; }
  #app-layer .krk-rechts h3 { margin:0 0 6px; }
  #app-layer .kr-trap { display:flex; flex-direction:column; gap:16px; }
  #app-layer .krt-kop { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
  #app-layer .krt-naam { font-size:14.5px; font-weight:600; color:var(--foam); }
  #app-layer .krt-n { font-family:'SF Mono',monospace; font-size:15px; color:var(--foam); }
  #app-layer .krt-balk { height:12px; border-radius:6px; background:var(--hull-2); overflow:hidden; }
  #app-layer .krt-balk i { display:block; height:100%; border-radius:6px; }
  #app-layer .krt-balk .fase-1{background:var(--f1)} #app-layer .krt-balk .fase-2{background:var(--f2)}
  #app-layer .krt-balk .fase-3{background:var(--f3)} #app-layer .krt-balk .fase-4{background:var(--f4)}
  #app-layer .krt-balk .fase-5{background:var(--f5)} #app-layer .krt-balk .fase-6{background:var(--f6)}
  #app-layer .krt-voet { display:flex; justify-content:space-between; gap:12px; margin-top:5px; flex-wrap:wrap; }
  #app-layer .krt-ev { font-family:'SF Mono',monospace; font-size:11px; color:var(--fog); }
  #app-layer .krt-door { font-size:12px; color:var(--mist); white-space:nowrap; }
  #app-layer .krt-door.zwak { color:var(--warn-tekst); font-weight:600; }
  #app-layer .kr-noot { font-size:12.5px; color:var(--fog); line-height:1.6; margin-top:14px; max-width:76ch; }

  /* ===== ZOEKVERKEER (Search Console) ===== */
  #app-layer .sc-advies { border-color:rgba(78,127,94,.4); }
  #app-layer .sc-advies h3 { margin:10px 0 8px; }
  #app-layer .sc-stappen { margin-top:18px; padding:16px 18px; border-radius:10px; background:var(--inset,#F4F5F0); }
  #app-layer .sc-stappen-kop { font-size:13px; font-weight:600; color:var(--foam); margin-bottom:10px; }
  #app-layer .sc-stappen-kop span { font-weight:400; color:var(--fog); margin-left:6px; }
  #app-layer .sc-stappen ol { margin:0; padding-left:20px; }
  #app-layer .sc-stappen li { font-size:13px; color:var(--mist); line-height:1.65; margin-bottom:6px; }
  #app-layer .sc-letop { margin-top:14px; padding:12px 14px; border-radius:9px; background:var(--warn-bg);
                         font-size:12.5px; color:var(--mist); line-height:1.6; }
  #app-layer .sc-letop b { color:var(--warn-tekst); }
  #app-layer .sc-fout { margin-top:12px; padding:12px 14px; border-radius:9px; background:var(--danger-bg);
                        font-size:12.5px; color:var(--danger-tekst); line-height:1.6; }
  /* Als het aan Plotta ligt, zeg dat dan. Een klant die een stap uitvoert die
     niets oplost, denkt dat het product stuk is. */
  #app-layer .sc-fout.sc-onze-schuld { background:var(--warn-bg); color:var(--mist); }
  #app-layer .sc-fout.sc-onze-schuld b { color:var(--warn-tekst); }

  /* ===== SEARCH CONSOLE IN DE INTAKE ===== */
  #app-layer .vb-gsc { margin-top:16px; }
  #app-layer .vbg-laden { font-size:13px; color:var(--fog); padding:16px 0; }
  #app-layer .vbg-ok { border-color:rgba(78,127,94,.4); }
  #app-layer .vbg-naar { margin-top:14px; background:transparent; border:1px solid var(--line);
                         border-radius:8px; padding:8px 14px; font-family:inherit; font-size:13px;
                         color:var(--mist); cursor:pointer; transition:all .13s; }
  #app-layer .vbg-naar:hover { border-color:var(--beam); color:var(--beam-tekst); }

  /* Dit blok moet OPVALLEN. Een keurig grijs kaartje wordt overgeslagen, en dan
     mist Plotta de halve trechter. Dus: doorlopende oranje rand (geen stippel-
     lijn, die leest als "optioneel"), een zachte gloed, en een rode stip die
     pulseert zoals een ongelezen melding. */
  #app-layer .vbg-open { border:2px solid var(--beam); border-radius:14px; padding:22px 24px;
                         background:var(--kaart,#fff);
                         box-shadow:0 0 0 4px rgba(154,203,122,.09); }
  #app-layer .vbg-kop { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
  #app-layer .vbg-titel { flex:1; }
  #app-layer .vbg-kop h3 { margin:0; font-size:16px; color:var(--foam); }

  /* De rode stip. Klopt langzaam, zodat hij opvalt zonder te schreeuwen. */
  #app-layer .vbg-stip { width:10px; height:10px; border-radius:50%; background:var(--danger);
                         flex-shrink:0; box-shadow:0 0 0 0 rgba(194,68,63,.5);
                         animation:vbgKlop 2.2s ease-out infinite; }
  @keyframes vbgKlop {
    0%   { box-shadow:0 0 0 0 rgba(194,68,63,.5); }
    70%  { box-shadow:0 0 0 8px rgba(194,68,63,0); }
    100% { box-shadow:0 0 0 0 rgba(194,68,63,0); }
  }
  @media (prefers-reduced-motion: reduce) {
    #app-layer .vbg-stip { animation:none; }
  }

  #app-layer .vbg-status { display:block; font-size:12px; color:var(--danger-tekst); font-weight:600;
                           margin-top:1px; }
  #app-layer .vbg-gratis { font-size:11.5px; color:var(--ok-tekst); font-weight:600;
                           background:var(--ok-bg); padding:4px 9px; border-radius:6px;
                           white-space:nowrap; }
  #app-layer .vbg-open > p { font-size:13.5px; color:var(--mist); line-height:1.65; margin:0 0 14px; max-width:70ch; }

  #app-layer .vbg-hoe { margin-bottom:14px; }
  #app-layer .vbg-hoe summary { font-size:13px; color:var(--beam-tekst); cursor:pointer;
                                font-weight:500; padding:6px 0; }
  #app-layer .vbg-hoe ol { margin:8px 0 0; padding-left:20px; }
  #app-layer .vbg-hoe li { font-size:12.5px; color:var(--mist); line-height:1.7; margin-bottom:5px; }

  #app-layer .vbg-invul { display:flex; gap:10px; flex-wrap:wrap; }
  #app-layer .vbg-invul .sel { flex:1; min-width:200px; }
  #app-layer .vbg-hint { margin-top:7px; font-size:12px; color:var(--fog); }
  /* De klok tikt: Search Console gooit alles ouder dan 16 maanden weg. */
  #app-layer .vbg-klok { margin-top:14px; padding:11px 13px; border-radius:9px; background:var(--warn-bg);
                         font-size:12.5px; color:var(--mist); line-height:1.6; }

  /* ===== VERBREKEN / VERWIJDEREN ===== */
  .bw-lead { max-width:640px; margin:14px auto 0; font-size:16px; line-height:1.65; color:var(--ink-soft); }

  /* ===== DE GELAAGDE ADVIESKAART (uitklapbaar) =====
     Kern zichtbaar, nuance opvraagbaar. Elke laag is een <details>: dicht bij
     binnenkomst, de klant klapt open wat hij wil lezen. */
  #app-layer .lg-uitklap { margin-top:20px; border-top:1px solid var(--card-line); }
  #app-layer .lg-uit { border-bottom:1px solid var(--card-line); }
  #app-layer .lg-uit summary { display:flex; align-items:center; justify-content:space-between;
                               gap:10px; padding:14px 2px; cursor:pointer; list-style:none;
                               font-size:14px; font-weight:600; color:var(--ink);
                               user-select:none; }
  #app-layer .lg-uit summary::-webkit-details-marker { display:none; }
  #app-layer .lg-uit summary:hover { color:var(--beam-tekst); }
  #app-layer .lg-chev { flex-shrink:0; font-size:20px; line-height:1; color:var(--fog);
                        transition:transform .2s; }
  #app-layer .lg-uit[open] .lg-chev { transform:rotate(90deg); color:var(--beam-tekst); }
  #app-layer .lg-body { padding:2px 2px 16px; }
  #app-layer .lg-body p { font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0; }
  #app-layer .lg { margin-top:22px; }
  #app-layer .lg:first-child { margin-top:0; }
  #app-layer .lg p { font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0; }
  #app-layer .lg-gevonden p { color:var(--ink); }

  /* De brillen: elk een pictogram en een tekst. De waarschijnlijke vallen op,
     de uitgesloten staan gedempt eronder: je ziet meteen wat telt. */
  #app-layer .bril { display:flex; gap:11px; padding:11px 0; align-items:flex-start; }
  #app-layer .bril + .bril { border-top:1px solid var(--card-line); }
  #app-layer .bril-ic { flex-shrink:0; width:26px; height:26px; border-radius:7px;
                        display:flex; align-items:center; justify-content:center; font-size:14px;
                        background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .bril-tx { font-size:14px; line-height:1.65; color:var(--ink-soft); }
  #app-layer .bril-tx b { color:var(--ink); font-weight:600; }
  #app-layer .bril-waarschijnlijk .bril-ic { background:var(--beam-bg,#F6E7DA); color:var(--beam-tekst); }
  #app-layer .bril-uit-kop { font-size:11px; font-weight:700; letter-spacing:.06em;
                             text-transform:uppercase; color:var(--fog); margin:16px 0 4px; }
  #app-layer .bril-uitgesloten { opacity:.7; }
  #app-layer .bril-uitgesloten .bril-tx { font-size:13px; }

  #app-layer .lg-blind p { padding:13px 15px; background:var(--paper-inset);
                           border-left:3px solid var(--fog); border-radius:0 8px 8px 0; }
  #app-layer .lg-potentieel { margin-top:22px; }

  /* ===== EEN TAAK DIE EEN VRAAG STELT ===== */
  #app-layer .tkr-vraag { grid-column:1/-1; margin-top:12px; padding:15px 16px;
                          background:var(--beam-bg,#F6E7DA); border:1px solid var(--beam);
                          border-radius:10px; }
  #app-layer .tv-kop { font-size:14px; font-weight:600; color:var(--beam-tekst); margin-bottom:12px; }
  #app-layer .tv-opties { display:grid; gap:8px; }
  /* Elke optie toont WAT HET BETEKENT. De klant kiest niet blind: het antwoord
     bepaalt welk advies er volgt, en dat mag hij weten voordat hij klikt. */
  #app-layer .tv-optie { display:block; width:100%; text-align:left; cursor:pointer;
                         background:var(--kaart,#fff); border:1px solid var(--line);
                         border-radius:9px; padding:11px 14px; font-family:inherit;
                         transition:border-color .15s, box-shadow .15s; }
  #app-layer .tv-optie:hover { border-color:var(--beam); box-shadow:0 1px 6px rgba(0,0,0,.06); }
  #app-layer .tv-lbl { display:block; font-size:14px; font-weight:600; color:var(--ink); }
  #app-layer .tv-gevolg { display:block; margin-top:4px; font-size:12.5px; line-height:1.55;
                          color:var(--ink-soft); }

  #app-layer .tkr-gegeven { grid-column:1/-1; margin-top:10px; padding:12px 15px;
                            background:var(--ok-bg); border-radius:9px;
                            display:flex; gap:10px; align-items:flex-start; }
  #app-layer .tg-vink { flex-shrink:0; width:19px; height:19px; border-radius:50%;
                        background:var(--ok); color:#fff; font-size:11px; font-weight:700;
                        display:flex; align-items:center; justify-content:center; margin-top:1px; }
  #app-layer .tg-lbl { font-size:13.5px; color:var(--ok-tekst); }
  #app-layer .tg-aanpas { margin-left:10px; background:transparent; border:1px solid var(--line);
                          border-radius:8px; padding:3px 11px; font-family:inherit; font-size:12px;
                          font-weight:600; color:var(--ink-soft); cursor:pointer; transition:all .14s;
                          vertical-align:middle; }
  #app-layer .tg-aanpas:hover { border-color:var(--beam); color:var(--beam-tekst); }
  #app-layer .tg-aanpas:focus-visible { outline:2px solid var(--beam); outline-offset:2px; }
  #app-layer .tg-gevolg { margin-top:4px; font-size:12.5px; line-height:1.55; color:var(--ink-soft); }
  #app-layer .tv-optie-nu { border-color:var(--beam); background:var(--vel); }
  #app-layer .tv-nu { font-size:11.5px; font-weight:600; color:var(--beam-tekst); }


  /* ===== DE BASIS BIJ INTAKE ===== */
  #app-layer .basis-blok { background:var(--paper-inset); border:1px solid var(--card-line);
                           border-radius:12px; padding:20px 22px; margin-bottom:26px; }
  #app-layer .basis-kop h3 { margin:0 0 6px; font-family:'Newsreader',serif; font-size:18px; color:var(--ink); }
  #app-layer .basis-kop p { margin:0 0 18px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); }
  #app-layer .basis-blok .fn-veld small { display:block; margin-top:5px; font-size:11.5px; color:var(--fog); }
  #app-layer .basis-noot { margin-top:16px; padding:12px 15px; border-radius:9px;
                           font-size:13px; line-height:1.6; }
  #app-layer .basis-noot.nat { background:var(--paper); border:1px solid var(--line); color:var(--ink-soft); }
  #app-layer .basis-noot.int { background:var(--beam-bg,#F6E7DA); border:1px solid var(--beam);
                               color:var(--beam-tekst); }

  /* ===== DEZE WEEK: ÉÉN BOODSCHAP, TWEE DEUREN ===== */
  #app-layer .dw-blok { margin-top:22px; }
  #app-layer .dw-lbl { font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
                       color:var(--fog); margin-bottom:9px; }
  #app-layer .dw-wat { font-size:15px; line-height:1.72; color:var(--ink); margin:0; }
  #app-layer .dw-feit { font-size:13.5px; line-height:1.5; color:var(--ink-soft);
                        margin:6px 0 0; font-variant-numeric:tabular-nums; }
  #app-layer .tkg-feit { font-size:13px; line-height:1.5; color:var(--ink-soft);
                         margin:4px 0 8px; font-variant-numeric:tabular-nums; }
  /* Datakwaliteit-check (spoor 1): signalen over de meetopstelling */
  #app-layer .dc-blok { background:var(--kaart); border:1px solid var(--card-line);
                        border-radius:14px; padding:20px 22px; margin-bottom:22px; }
  #app-layer .dc-blok.dc-ok { background:var(--vel); }
  #app-layer .dc-kop { font-size:12px; font-weight:800; letter-spacing:.08em;
                       text-transform:uppercase; color:var(--ink); margin-bottom:6px; }
  #app-layer .dc-vink { color:var(--ok); margin-right:5px; }
  #app-layer .dc-ok-tekst { font-size:14px; color:var(--ink-soft); margin:0; line-height:1.6; }
  #app-layer .dc-intro { font-size:13px; color:var(--fog); margin:0 0 14px; line-height:1.55; }
  /* Een signaal is een TAAKREGEL. Het erft .tkr, .tkr-mid, .tkr-meta, .tkr-meer
     en .tkr-hoe van de takenlijst, zodat het niet lijkt op een taakregel maar er
     letterlijk een is. Hieronder staat alleen wat een signaal ANDERS maakt:
     de ernst-markering op de plek van het vinkje. */
  /* .tkr.dc-rij en niet .dc-rij: even specifiek zou verliezen op volgorde, want
     de mobiele .tkr-regels staan verderop in dit bestand. */
  #app-layer .tkr.dc-rij { align-items:start; }
  /* Zelfde maat en vorm als .tkr-vink, maar geen knop: hier valt niets af te
     vinken. Een signaal verdwijnt doordat je het probleem oplost en GA4 het
     niet meer meet, niet doordat je een vakje aankruist. */
  #app-layer .dc-ernst { width:19px; height:19px; border-radius:6px;
                         border:1.5px solid var(--fog); background:transparent;
                         display:flex; align-items:center; justify-content:center;
                         font-size:12px; font-weight:700; line-height:1; flex-shrink:0;
                         margin-top:1px; cursor:default; }
  #app-layer .dc-ernst-urgent { border-color:var(--danger); color:var(--danger-tekst); }
  #app-layer .dc-ernst-let-op { border-color:var(--warn); color:var(--warn-tekst); }
  /* De knop op Deze week, naar het scherm waar de uitleg wél staat. Een
     randknop, niet gevuld: de gevulde knop op dit scherm is het advies, en dat
     blijft de hoofdroute. */
  #app-layer .dc-naar-taken { margin-top:14px; }
  /* De secties in het uitgeklapte paneel: wat er aan de hand is, waarom het
     gebeurt, en hoe je weet dat het opgelost is. Zelfde .th-k-labels als bij een
     taak, met lopende tekst eronder in plaats van een opsomming. */
  #app-layer .dc-sec { margin-bottom:13px; }
  #app-layer .dc-sec p { font-size:13.5px; color:var(--mist); line-height:1.65; margin:0; max-width:70ch; }
  /* De controle achteraf staat ná de stappen, dus die krijgt een scheiding:
     het is geen stap meer maar de uitkomst waaraan je het afmeet. */
  #app-layer .dc-sec-check { margin-top:13px; padding-top:12px; border-top:1px solid var(--line); margin-bottom:0; }
  /* De ernst-badge in de meta-regel: zelfde vorm als .tkr-wie bij een taak. */
  #app-layer .dc-wie-urgent { background:var(--danger-bg); color:var(--danger-tekst);
                              border:1px solid rgba(194,68,63,.35); }
  #app-layer .dc-wie-let-op { background:var(--warn-bg); color:var(--beam-tekst);
                              border:1px solid rgba(122,90,18,.35); }
  /* Meebewegen met de taakregel op mobiel: bij 600px worden de raakvlakken 44px,
     en dan moet de markering mee, anders staat hij niet meer in zijn kolom. */
  @media (max-width:600px){
    #app-layer .dc-ernst { width:44px; height:44px; font-size:15px; margin-top:0; }
    /* De taakregel centreert op mobiel verticaal. Bij een taak kan dat: die
       titels zijn kort. Een signaal is de volle constatering (~100 tekens), dus
       die loopt over vijf regels en dan zweeft de markering in het midden naast
       de tekst. Boven uitlijnen, zoals op desktop. */
    #app-layer .tkr.dc-rij { align-items:start; }
    /* En wat meer tekstbreedte: de kaartrand kost op 390px te veel ruimte. */
    #app-layer .dc-blok { padding:16px 12px; }
  }
  #app-layer .dw-deuren { display:flex; gap:11px; margin-top:26px; flex-wrap:wrap; }
  /* De leesknop is een RANDKNOP: verdieping is optioneel. De takenknop is
     gevuld, want daar wil je uiteindelijk heen. */
  #app-layer .btn-lees { background:transparent; border:1px solid var(--line); color:var(--ink);
                         font-family:inherit; font-size:14px; font-weight:600; padding:11px 18px;
                         border-radius:9px; cursor:pointer; transition:border-color .15s, color .15s; }
  #app-layer .btn-lees:hover { border-color:var(--beam); color:var(--beam-tekst); }
  #app-layer .dw-voortgang { margin-top:14px; font-size:12.5px; color:var(--ok-tekst); }
  #app-layer .dw-focus .fc-right { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  @media (max-width:600px){
    #app-layer .dw-deuren { flex-direction:column; }
    #app-layer .dw-deuren button { width:100%; }
  }

  /* ===== DE DRIE SCHERMEN, UIT ELKAAR ===== */
  /* Deze week = WAT DOE IK NU · Advies = WAAROM · Taken = WIE DOET WAT.
     Ze toonden alle drie dezelfde taken. Nu heeft elk scherm één taak. */
  #app-layer .dw-taken { margin-top:10px; }
  #app-layer .dw-rest { margin-top:16px; padding:13px 16px; background:var(--paper-inset);
                        border-radius:10px; font-size:13.5px; color:var(--ink-soft); }
  #app-layer .dw-rest a { color:var(--beam-tekst); font-weight:600; cursor:pointer; margin-left:6px; }
  #app-layer .dw-rest a:hover { text-decoration:underline; }
  #app-layer .adv-afmelding { margin:-6px 0 18px; font-size:13px; color:var(--fog); }
  #app-layer .adv-afmelding a { color:var(--beam-tekst); font-weight:600; cursor:pointer; margin-left:5px; }
  #app-layer .adv-afmelding a:hover { text-decoration:underline; }
  #app-layer .da-uitkomst { display:flex; justify-content:space-between; align-items:center;
                            gap:16px; flex-wrap:wrap; padding-top:16px;
                            border-top:1px solid var(--card-line); }
  #app-layer .da-uk-n { font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:7px; }
  #app-layer .da-uk-wie { display:flex; gap:6px; flex-wrap:wrap; }
  #app-layer .da-uk-klaar { margin-top:7px; font-size:12.5px; color:var(--ok-tekst); }

  #app-layer .af-rij { align-items:flex-start; }
  #app-layer .af-mid { flex:1; min-width:0; }
  #app-layer .af-meta { display:flex; gap:8px; align-items:center; margin-top:4px; flex-wrap:wrap; }
  #app-layer .af-wie { font-size:11px; font-weight:600; color:var(--ok-tekst); background:var(--ok-bg);
                       padding:2px 8px; border-radius:4px; }
  #app-layer .af-d { flex-shrink:0; font-family:'SF Mono',monospace; font-size:11.5px;
                     color:var(--fog); white-space:nowrap; }

  #app-layer .tkr-af { font-size:11.5px; color:var(--ok-tekst); font-family:'SF Mono',monospace; }

  /* ===== AFGEROND: WAAR EEN ADVIES LANDT ===== */
  #app-layer .afg-adviezen { margin-top:22px; }
  #app-layer .afg-adv { display:flex; align-items:center; gap:12px; padding:13px 0;
                        border-top:1px solid var(--card-line); }
  #app-layer .afg-vink { flex-shrink:0; width:22px; height:22px; border-radius:50%;
                         background:var(--ok-bg); color:var(--ok-tekst); font-size:12px;
                         font-weight:700; display:flex; align-items:center; justify-content:center; }
  #app-layer .afg-adv-mid { flex:1; min-width:0; }
  #app-layer .afg-adv-t { font-size:14.5px; color:var(--ink); font-weight:500; }
  #app-layer .afg-adv-m { font-size:12px; color:var(--fog); margin-top:3px; }
  #app-layer .afg-meet { flex-shrink:0; font-size:11px; font-weight:600; letter-spacing:.04em;
                         text-transform:uppercase; color:var(--ok-tekst); background:var(--ok-bg);
                         padding:3px 9px; border-radius:5px; }

  /* ===== HET ECHTE ADVIES-SCHERM ===== */
  #app-layer #adviesEcht .deepadv { margin-bottom:20px; }
  #app-layer .da-prio { display:inline-flex; align-items:center; justify-content:center;
                        width:22px; height:22px; border-radius:6px; background:var(--beam-knop);
                        color:#fff; font-family:'SF Mono',monospace; font-size:12px; font-weight:700;
                        margin-right:8px; flex-shrink:0; }
  #app-layer .da-waarom { font-size:14.5px; line-height:1.7; color:var(--ink-soft); margin:0 0 20px; }
  /* De taken staan hier als LIJST, niet als afvinkbare regels. Dat gebeurt op
     Taken. Twee plekken waar je hetzelfde kunt afvinken, is één plek te veel. */
  #app-layer .da-taak { display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--card-line);
                        align-items:flex-start; }
  #app-layer .da-taak.af { opacity:.55; }
  #app-layer .da-taak.af .da-taak-t { text-decoration:line-through; }
  #app-layer .da-taak-nr { flex-shrink:0; width:21px; height:21px; border-radius:50%;
                           background:var(--paper-inset); color:var(--ink-soft);
                           font-family:'SF Mono',monospace; font-size:11px; font-weight:700;
                           display:flex; align-items:center; justify-content:center; margin-top:1px; }
  #app-layer .da-taak-t { font-size:14px; line-height:1.55; color:var(--ink); }
  #app-layer .da-taak-meta { display:flex; gap:8px; margin-top:5px; align-items:center; flex-wrap:wrap; }
  #app-layer .da-wie { font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
                       padding:2px 7px; border-radius:4px; }
  #app-layer .da-wie-klant  { background:var(--beam-bg,#F6E7DA); color:var(--beam-tekst); }
  #app-layer .da-wie-plotta { background:var(--ok-bg); color:var(--ok-tekst); }
  #app-layer .da-wie-dev    { background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .da-duur { font-family:'SF Mono',monospace; font-size:11.5px; color:var(--fog); }
  #app-layer .da-klaar { margin-left:8px; font-weight:400; text-transform:none; letter-spacing:0;
                         color:var(--ok-tekst); }
  #app-layer .da-naar-taken { margin-top:16px; display:inline-flex; flex:0 0 auto; }

  /* ===== DATUM & NIEUW-MARKERING BIJ EEN ADVIES ===== */
  #app-layer .adv-meta { display:inline-flex; align-items:center; gap:8px; margin-left:10px;
                         vertical-align:middle; white-space:nowrap; }
  /* De NIEUW-vlag valt op, maar schreeuwt niet: hij verdwijnt na veertien dagen
     vanzelf, dus hij hoeft geen aandacht af te dwingen die hij niet verdient. */
  #app-layer .adv-nieuw { font-family:'SF Mono',monospace; font-size:10px; font-weight:700;
                          letter-spacing:.08em; color:#fff; background:var(--beam-knop);
                          padding:3px 8px; border-radius:5px; }
  #app-layer .adv-datum { font-size:11.5px; color:var(--fog); font-weight:400; }
  @media (max-width:640px){
    #app-layer .adv-meta { display:flex; margin:6px 0 0; }
  }

  /* ===== PLOTTA'S PRODUCTVOORSTEL ===== */
  #app-layer .dp-prod { border-color:rgba(78,127,94,.35); margin-bottom:18px; }
  #app-layer .dp-tabel { margin-top:16px; }
  #app-layer .dp-th, #app-layer .dp-tr { display:grid; grid-template-columns:1fr 78px 92px 78px 160px;
                                         gap:12px; padding:9px 0; align-items:center; }
  #app-layer .dp-th { font-size:11px; text-transform:uppercase; letter-spacing:.05em;
                      color:var(--fog); border-bottom:1px solid var(--line); }
  #app-layer .dp-tr { border-top:1px solid var(--line); font-size:13.5px; }
  #app-layer .dp-n { color:var(--foam); font-weight:500; }

  /* Verborgen producten: pas zichtbaar na 'tonen'. */
  #app-layer .dp-tr[data-open="0"] { display:none; }

  /* De actieknoppen per product. */
  #app-layer .dp-acties { display:flex; gap:6px; justify-content:flex-end; }
  #app-layer .dp-btn { font-size:12px; font-weight:600; padding:6px 11px; border-radius:7px;
                       border:1px solid var(--line); background:transparent; color:var(--foam);
                       cursor:pointer; white-space:nowrap; font-family:inherit; }
  #app-layer .dp-btn:hover { border-color:var(--beam); color:var(--beam-tekst); }
  #app-layer .dp-bevestig-1 { background:var(--beam-knop); color:#fff; border-color:transparent; }
  #app-layer .dp-bevestig-1:hover { background:#1D3B2A; color:#fff; }
  #app-layer .dp-opslaan-1 { background:var(--ok); color:#fff; border-color:transparent; }
  #app-layer .dp-ok { font-size:12.5px; font-weight:600; color:var(--ok-tekst);
                      display:inline-flex; align-items:center; gap:5px; }
  #app-layer .dp-tr-ok { opacity:.75; }
  #app-layer .dp-tr-ok .dp-n { color:var(--ink-soft); }
  #app-layer .dp-prijs-in { width:82px; padding:5px 8px; border-radius:6px; border:1px solid var(--beam);
                            background:var(--kaart,#fff); color:var(--ink); font-family:inherit; font-size:13px; }

  /* 'Tonen'-knop in plaats van de doodlopende '...en nog N andere'. */
  #app-layer .dp-meer-knop { width:100%; text-align:center; padding:11px; margin-top:4px;
                             background:transparent; border:1px dashed var(--line); border-radius:9px;
                             color:var(--ink-soft); font-family:inherit; font-size:13px; cursor:pointer; }
  #app-layer .dp-meer-knop:hover { border-color:var(--beam); color:var(--beam-tekst); }
  #app-layer .dp-meer-knop b { color:var(--beam-tekst); }

  /* De twee knoppen onderaan naast elkaar. */
  #app-layer .dp-bevestig-knoppen { display:flex; gap:10px; align-items:center; }
  #app-layer .dp-c { font-family:'SF Mono',monospace; color:var(--mist); text-align:right; }
  #app-layer .dp-prijs { color:var(--ok-tekst); font-weight:600; }
  #app-layer .dp-meer { margin-top:10px; font-size:12.5px; color:var(--fog); font-style:italic; }
  #app-layer .dp-bevestig { display:flex; justify-content:space-between; align-items:center;
                            margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
                            gap:16px; flex-wrap:wrap; }
  #app-layer .dp-gem span { display:block; font-size:12px; color:var(--fog); }
  #app-layer .dp-gem b { font-family:'SF Mono',monospace; font-size:24px; color:var(--ok-tekst); }
  #app-layer .dp-hint { margin-top:10px; font-size:12px; color:var(--fog); line-height:1.55; }

  /* De eerlijkheidsregel. Dit is geen disclaimer maar het verkoopargument. */
  #app-layer .ci-herkomst { margin-bottom:16px; }
  #app-layer .ci-herkomst.gemeten { border-color:rgba(78,127,94,.4); }
  #app-layer .ci-herkomst.geschat { border-color:rgba(184,132,43,.45); }
  #app-layer .ci-herkomst h3 { margin:10px 0 8px; }
  #app-layer .ci-herkomst .fc-cta { margin-top:14px; }

  #app-layer .ci-eerlijk { margin:14px 0 20px; padding:14px 16px; border-radius:10px;
                           background:var(--warn-bg); font-size:12.5px; color:var(--mist);
                           line-height:1.65; max-width:76ch; }

  #app-layer .vb-verbreek { margin-top:14px; background:transparent; border:1px solid var(--line);
                            border-radius:8px; padding:8px 14px; font-family:inherit; font-size:12.5px;
                            color:var(--fog); cursor:pointer; transition:all .13s; }
  #app-layer .vb-verbreek:hover { border-color:var(--danger); color:var(--danger-tekst); }

  /* De gevarenzone staat NIET naast de gewone knoppen. Wie verwijderen naast
     verbreken zet, vraagt om een verkeerde klik. */
  #app-layer .vb-gevaar { margin-top:26px; border:1px solid var(--danger-bg); border-radius:12px;
                          background:var(--danger-bg); overflow:hidden; }
  #app-layer .vb-gevaar summary { padding:13px 18px; font-size:13px; font-weight:600;
                                  color:var(--danger-tekst); cursor:pointer; list-style:none; }
  #app-layer .vb-gevaar summary::-webkit-details-marker { display:none; }
  #app-layer .vb-gevaar summary::before { content:'\25B8'; display:inline-block; margin-right:8px;
                                          transition:transform .15s; }
  #app-layer .vb-gevaar[open] summary::before { transform:rotate(90deg); }
  #app-layer .vbg-inhoud { padding:0 18px 18px; }
  #app-layer .vbg-inhoud > p { font-size:13px; color:var(--mist); line-height:1.65; margin:0 0 14px; max-width:70ch; }
  #app-layer .vbg-lijst { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
                          gap:12px; margin-bottom:14px; }
  #app-layer .vbg-lijst > div { font-size:12.5px; color:var(--mist); }
  #app-layer .vbg-lijst b { display:block; font-family:'SF Mono',monospace; font-size:19px;
                            color:var(--danger-tekst); font-weight:600; }
  #app-layer .vbg-nooit { font-size:12.5px; color:var(--danger-tekst); font-style:italic;
                          line-height:1.6; margin-bottom:14px !important; }
  #app-layer .vb-verwijder { background:var(--danger); color:#fff; border:none; border-radius:8px;
                             padding:10px 18px; font-family:inherit; font-size:13px; font-weight:600;
                             cursor:pointer; }
  #app-layer .vb-verwijder:hover { filter:brightness(.92); }

  /* ===== DE WAARSCHUWINGSDIALOOG ===== */
  #app-layer .vw-scherm { position:fixed; inset:0; z-index:200; background:rgba(26,29,27,.55);
                          display:flex; align-items:center; justify-content:center; padding:24px; }
  #app-layer .vw-scherm[hidden] { display:none; }
  #app-layer .vw-doos { background:var(--kaart,#fff); border-radius:16px; padding:28px 30px;
                        max-width:520px; width:100%; box-shadow:0 24px 60px rgba(0,0,0,.22); }
  #app-layer .vw-doos h3 { margin:0 0 14px; font-size:19px; color:var(--foam); }
  #app-layer .vw-tekst p { font-size:13.5px; color:var(--mist); line-height:1.65; margin:0 0 12px; }
  #app-layer .vw-tekst ul { margin:0 0 14px; padding-left:18px; }
  #app-layer .vw-tekst li { font-size:13px; color:var(--mist); line-height:1.65; margin-bottom:9px; }
  #app-layer .vw-tekst li.vw-let-op { color:var(--danger-tekst); }
  #app-layer .vw-tekst .vw-nooit { font-size:12.5px; color:var(--fog); font-style:italic; }

  #app-layer .vw-typ { margin:16px 0 4px; }
  #app-layer .vw-typ label { display:block; font-size:12.5px; color:var(--mist); margin-bottom:6px; }
  #app-layer .vw-typ input { width:100%; padding:10px 12px; border:1px solid var(--line);
                             border-radius:8px; font-family:inherit; font-size:14px;
                             background:var(--vel,#FCFCFA); color:var(--foam); }
  #app-layer .vw-typ input:focus { outline:none; border-color:var(--danger); }

  #app-layer .vw-knoppen { display:flex; gap:10px; margin-top:22px; justify-content:flex-end; }
  /* De veilige uitgang is de OPVALLENDSTE knop. Dat is geen toeval. */
  #app-layer .vw-terug { background:var(--foam); color:var(--kaart,#fff); border:none; border-radius:8px;
                         padding:11px 20px; font-family:inherit; font-size:13.5px; font-weight:600;
                         cursor:pointer; }
  #app-layer .vw-door { background:transparent; color:var(--fog); border:1px solid var(--line);
                        border-radius:8px; padding:11px 20px; font-family:inherit; font-size:13.5px;
                        cursor:pointer; transition:all .13s; }
  #app-layer .vw-door:hover:not(:disabled) { border-color:var(--danger); color:var(--danger-tekst); }
  #app-layer .vw-door.gevaarlijk:hover:not(:disabled) { background:var(--danger); color:#fff;
                                                        border-color:var(--danger); }
  #app-layer .vw-door:disabled { opacity:.4; cursor:not-allowed; }
  #app-layer .sc-invul { display:flex; gap:10px; margin-top:18px; align-items:center; flex-wrap:wrap; }
  #app-layer .sc-invul label { font-size:13px; color:var(--mist); width:100%; margin-bottom:-2px; }
  #app-layer .sc-invul .sel { flex:1; min-width:220px; }
  #app-layer .sc-hint { margin-top:7px; font-size:12px; color:var(--fog); }

  #app-layer .sc-onbekend { margin-bottom:16px; }
  #app-layer .sc-cijfers { display:flex; gap:34px; margin:18px 0 14px; flex-wrap:wrap; }
  #app-layer .scc-v { font-family:'SF Mono',monospace; font-size:26px; font-weight:600; color:var(--foam); }
  #app-layer .scc:first-child .scc-v { color:var(--warn-tekst); }
  #app-layer .scc-l { font-size:12px; color:var(--fog); margin-top:2px; }

  #app-layer .sc-int-balk { display:flex; height:12px; border-radius:7px; overflow:hidden;
                            background:var(--hull-2); margin-top:16px; }
  #app-layer .sci.koop { background:var(--ok); }
  #app-layer .sci.lees { background:var(--warn); }
  #app-layer .sci.merk { background:var(--fog); }
  #app-layer .sc-int-l { display:flex; gap:22px; margin-top:9px; font-size:12.5px;
                         color:var(--fog); flex-wrap:wrap; }
  #app-layer .sc-dot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; }
  #app-layer .sc-dot.koop { background:var(--ok); }
  #app-layer .sc-dot.lees { background:var(--warn); }
  #app-layer .sc-dot.merk { background:var(--fog); }

  #app-layer .sc-tabel { margin-top:16px; }
  #app-layer .sc-th, #app-layer .sc-tr { display:grid; grid-template-columns:1fr 90px 70px 70px 130px;
                                         gap:12px; padding:9px 0; align-items:center; }
  #app-layer .sc-th { font-size:11px; text-transform:uppercase; letter-spacing:.05em;
                      color:var(--fog); border-bottom:1px solid var(--line); }
  #app-layer .sc-tr { border-top:1px solid var(--line); font-size:13px; }
  #app-layer .sc-w { color:var(--foam); font-weight:500; }
  #app-layer .sc-n { font-family:'SF Mono',monospace; color:var(--mist); }
  #app-layer .sc-i { font-size:11px; padding:3px 8px; border-radius:5px; text-align:center; }
  #app-layer .sc-i-koop { background:var(--ok-bg); color:var(--ok-tekst); }
  #app-layer .sc-i-lees { background:var(--warn-bg); color:var(--warn-tekst); }
  #app-layer .sc-i-merk_of_product { background:var(--inset,#F4F5F0); color:var(--fog); }
  @media (max-width:860px){
    #app-layer .sc-th { display:none; }
    #app-layer .sc-tr { grid-template-columns:1fr 70px; }
    #app-layer .sc-tr .sc-n:nth-of-type(2), #app-layer .sc-tr .sc-n:nth-of-type(3) { display:none; }
  }

  /* ===== MEETPOORT ===== */
  #app-layer .mp-oordeel { margin-bottom:16px; }
  #app-layer .mp-oordeel.goed { border-color:rgba(78,127,94,.4); }
  #app-layer .mp-oordeel.stuk { border-color:rgba(194,68,63,.4); }
  #app-layer .mp-oordeel h3 { margin:10px 0 6px; }

  #app-layer .mp-trechter { margin-top:16px; }
  #app-layer .mp-stap { display:grid; grid-template-columns:22px 1fr 160px 90px; gap:12px;
                        align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:13.5px; }
  #app-layer .mp-stap:first-child { border-top:none; }
  #app-layer .mp-vink { color:var(--ok-tekst); font-weight:700; }
  #app-layer .mp-stap.weg .mp-vink { color:var(--danger-tekst); }
  #app-layer .mp-stap.weg .mp-stap-naam { color:var(--danger-tekst); }
  #app-layer .mp-stap.weg .mp-stap-n { color:var(--danger-tekst); font-style:italic; }
  /* Een stap die WEL geteld wordt maar niet klopt. Die is gevaarlijker dan een
     stap die ontbreekt: hij ziet er bruikbaar uit. */
  #app-layer .mp-stap.onbetrouwbaar { background:var(--warn-bg); }
  #app-layer .mp-stap.onbetrouwbaar .mp-vink { color:var(--warn-tekst); font-weight:800; }
  #app-layer .mp-stap.onbetrouwbaar .mp-stap-naam { color:var(--warn-tekst); }
  #app-layer .mp-stap.onbetrouwbaar .mp-stap-n { color:var(--warn-tekst); }

  #app-layer .mp-norm { margin-top:18px; padding:14px 16px; border-radius:10px; background:var(--inset,#F4F5F0); }
  #app-layer .mp-norm-kop { font-size:12px; color:var(--fog); margin-bottom:10px; line-height:1.5; }
  #app-layer .mp-norm-rij { display:flex; justify-content:space-between; padding:5px 0; font-size:13px; color:var(--mist); }
  #app-layer .mp-norm-rij b { font-family:'SF Mono',monospace; color:var(--foam); }

  #app-layer .mp-breuk-kop { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:5px; }
  #app-layer .mp-breuk-kop b { color:var(--foam); }
  #app-layer .mp-x { font-family:'SF Mono',monospace; font-size:11.5px; font-weight:700;
                     color:var(--danger-tekst); background:var(--danger-bg); padding:2px 7px; border-radius:5px; }
  #app-layer .mp-breuk-uit { color:var(--mist); }

  /* Twee stapels naast elkaar: koopgedrag vs leesgedrag. Plotta oordeelt niet,
     het legt ze naast elkaar. Wie niet kan kopen zoekt naar verzendkosten; wie
     onderzoekt leest blogs. */
  #app-layer .mp-gedrag { margin-top:10px; }
  #app-layer .mp-gedrag-balk { display:flex; height:8px; border-radius:5px; overflow:hidden;
                               background:var(--hull-2); }
  #app-layer .mp-gb.koop { background:var(--warn); }
  #app-layer .mp-gb.lees { background:var(--ok); }
  #app-layer .mp-gedrag-l { display:flex; gap:18px; margin-top:7px; font-size:12px; color:var(--fog); }
  #app-layer .mp-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
  #app-layer .mp-dot.koop { background:var(--warn); }
  #app-layer .mp-dot.lees { background:var(--ok); }
  #app-layer .mp-gedrag-uit { margin-top:8px; font-size:12.5px; color:var(--mist); line-height:1.55;
                              font-style:italic; }
  #app-layer .mp-stap-naam { color:var(--foam); }
  #app-layer .mp-stap-ev { font-family:'SF Mono',monospace; font-size:11.5px; color:var(--fog); }
  #app-layer .mp-stap-n { text-align:right; font-family:'SF Mono',monospace; font-weight:600; color:var(--foam); }

  #app-layer .mp-fout { margin-top:14px; padding:14px 16px; border-radius:10px;
                        background:var(--danger-bg); font-size:13px; line-height:1.6; }
  #app-layer .mp-fout b { display:block; color:var(--danger-tekst); margin-bottom:4px; }
  #app-layer .mp-fout div { color:var(--mist); }
  #app-layer .mp-fout.mp-let-op { background:var(--warn-bg); }
  #app-layer .mp-fout.mp-let-op b { color:var(--warn-tekst); }

  #app-layer .mp-markten { margin-top:16px; border-color:rgba(78,127,94,.35); }
  #app-layer .mp-landen { margin-top:16px; }
  #app-layer .mp-land { padding:14px 0; border-top:1px solid var(--line); }
  #app-layer .mp-land-kop { display:flex; justify-content:space-between; align-items:baseline; }
  #app-layer .mp-land-kop b { font-size:15px; color:var(--foam); }
  #app-layer .mp-land-kop span { font-size:12.5px; color:var(--fog); }
  #app-layer .mp-land-gedrag { display:flex; gap:20px; margin-top:7px; flex-wrap:wrap; }
  #app-layer .mp-g { font-size:12px; color:var(--fog); }
  #app-layer .mp-g i { font-style:normal; font-family:'SF Mono',monospace; font-weight:600;
                       color:var(--ok-tekst); margin-right:3px; }
  #app-layer .mp-breuk { margin-top:9px; padding:9px 12px; border-radius:8px;
                         background:var(--warn-bg); font-size:12.5px; color:var(--mist); line-height:1.55; }
  #app-layer .mp-breuk-l { font-weight:600; color:var(--warn-tekst); margin-right:6px; }
  #app-layer .mp-breuk.mp-geen-breuk { background:var(--inset,#F4F5F0); color:var(--fog); font-style:italic; }

  #app-layer .mp-botrij { display:grid; grid-template-columns:130px 100px 1fr; gap:14px;
                          padding:10px 0; border-top:1px solid var(--line); font-size:13px; align-items:center; }
  #app-layer .mp-botrij b { color:var(--foam); }
  #app-layer .mp-botrij span { color:var(--fog); }
  #app-layer .mp-oordeel-t, #app-layer .mp-botrij .mp-oordeel { font-size:12px; font-style:italic; }

  #app-layer .mp-weten { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
  #app-layer .mp-wel  { border-color:rgba(78,127,94,.35); }
  #app-layer .mp-niet { border-color:rgba(184,132,43,.35); }
  #app-layer .mp-weten ul { margin:12px 0 0; padding-left:18px; }
  #app-layer .mp-weten li { font-size:13px; color:var(--mist); line-height:1.6; margin-bottom:7px; }
  @media (max-width:900px){
    #app-layer .mp-weten { grid-template-columns:1fr; }
    #app-layer .mp-stap { grid-template-columns:20px 1fr 80px; }
    #app-layer .mp-stap-ev { display:none; }
  }

  /* ===== PAGINAPATRONEN ===== */
  #app-layer .pt-kop { margin-bottom:16px; }
  #app-layer .pt-dekking { margin-top:18px; }
  #app-layer .pt-balk { height:10px; border-radius:6px; background:var(--hull-2); overflow:hidden; }
  #app-layer .pt-balk i { display:block; height:100%; border-radius:6px; background:var(--ok);
                          transition:width .3s cubic-bezier(.4,0,.2,1); }
  #app-layer .pt-dek-tekst { margin-top:9px; font-size:13.5px; color:var(--mist); }
  #app-layer .pt-dek-tekst b { color:var(--foam); font-family:'SF Mono',monospace; font-size:16px; }

  #app-layer .pt-lijst { display:flex; flex-direction:column; }
  #app-layer .pt-rij { display:grid; grid-template-columns:1fr 230px; gap:20px; align-items:start;
                       padding:16px 0; border-top:1px solid var(--line); }
  #app-layer .pt-rij:first-child { border-top:none; }
  #app-layer .pt-rij.aan .pt-pad { color:var(--ok-tekst); }
  #app-layer .pt-pad { font-family:'SF Mono',monospace; font-size:14.5px; font-weight:600; color:var(--foam); }
  #app-layer .pt-sub { font-size:12.5px; color:var(--fog); margin-top:3px; }
  #app-layer .pt-vb  { font-family:'SF Mono',monospace; font-size:11px; color:var(--fog);
                       opacity:.65; margin-top:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #app-layer .pt-keuze { display:flex; flex-direction:column; gap:6px; }
  #app-layer .pt-voorstel { background:transparent; border:1px dashed var(--beam); border-radius:8px;
                            padding:6px 10px; font-family:inherit; font-size:12px; color:var(--beam-tekst);
                            cursor:pointer; transition:all .13s; text-align:left; }
  #app-layer .pt-voorstel:hover { background:var(--beam-knop); color:#fff; border-style:solid; }
  #app-layer .pt-waarom { font-size:11px; color:var(--fog); font-style:italic; line-height:1.4; }

  #app-layer .pt-acties { display:flex; align-items:center; gap:12px; margin-top:20px;
                          padding-top:16px; border-top:1px solid var(--line); flex-wrap:wrap; }
  #app-layer .pt-allemaal { background:transparent; border:1px solid var(--beam); border-radius:9px;
                            padding:10px 16px; font-family:inherit; font-size:13px; font-weight:500;
                            color:var(--beam-tekst); cursor:pointer; transition:all .13s; }
  #app-layer .pt-allemaal:hover { background:var(--beam-knop); color:#fff; }
  @media (max-width:760px){ #app-layer .pt-rij { grid-template-columns:1fr; gap:10px; } }

  /* ===== DOELEN & WAARDE ===== */
  #app-layer .dl-meet { border-color:rgba(78,127,94,.35); margin-bottom:16px; }
  #app-layer .dl-meet-rij { display:flex; gap:36px; margin-top:16px; flex-wrap:wrap; }
  #app-layer .dlm-v { font-family:'SF Mono',monospace; font-size:24px; font-weight:600; color:var(--ok-tekst); }
  #app-layer .dlm-l { font-size:12px; color:var(--fog); margin-top:2px; }

  #app-layer .dl-lijst { display:flex; flex-direction:column; margin-top:16px; }
  #app-layer .dl-rij { display:grid; grid-template-columns:1fr 150px 100px 96px; gap:14px;
                       align-items:center; padding:12px 0; border-top:1px solid var(--line); }
  #app-layer .dl-rij.vast { grid-template-columns:1fr 120px 24px; }
  #app-layer .dl-ev { font-size:14px; font-weight:600; color:var(--foam);
                      font-family:'SF Mono',monospace; }
  #app-layer .dl-sub { font-size:12px; color:var(--fog); margin-top:2px; }
  #app-layer .dl-waarde { text-align:right; font-family:'SF Mono',monospace;
                          font-size:15px; font-weight:600; }
  #app-layer .dl-waarde.gemeten { color:var(--ok-tekst); }
  #app-layer .dl-eur { color:var(--warn-tekst); }
  #app-layer .dl-leeg { color:var(--fog); opacity:.5; }
  #app-layer .dl-slot { color:var(--ok-tekst); font-size:9px; text-align:center; opacity:.7; cursor:help; }
  #app-layer .dl-reken { background:transparent; border:1px solid var(--line); border-radius:7px;
                         padding:6px 10px; font-family:inherit; font-size:12px; color:var(--mist);
                         cursor:pointer; transition:all .13s; }
  #app-layer .dl-reken:hover:not(:disabled) { border-color:var(--beam); color:var(--beam-tekst); }
  #app-layer .dl-reken:disabled { opacity:.3; cursor:not-allowed; }

  /* De aanname staat er ZICHTBAAR bij. Een schatting die je niet kunt
     navertellen, is een schatting die niemand kan aanvechten. */
  #app-layer .dl-aanname { font-size:12px; color:var(--fog); padding:0 0 10px 0;
                           margin-top:-4px; font-style:italic; }
  #app-layer .dl-aanname b { color:var(--warn-tekst); font-style:normal; font-weight:600; }

  #app-layer .dl-acties { display:flex; align-items:center; gap:14px; margin-top:20px;
                          padding-top:16px; border-top:1px solid var(--line); }
  #app-layer .dl-melding { font-size:13px; }
  #app-layer .dl-waarschuw { border-color:rgba(184,132,43,.35); margin-top:16px; }
  #app-layer .dl-waarschuw h3 { margin:10px 0 6px; }

  /* Rekenhulp */
  #app-layer .dl-modal, .dl-modal { position:fixed; inset:0; background:rgba(26,29,27,.5);
                                    display:flex; align-items:center; justify-content:center;
                                    z-index:200; padding:20px; }
  .dl-mbox { background:var(--vel,#FCFCFA); border-radius:16px; padding:28px; max-width:540px;
             width:100%; max-height:88vh; overflow:auto;
             box-shadow:0 46px 80px -28px rgba(28,40,34,.4); }
  .dl-mbox h3 { font-size:19px; margin:0 0 18px; color:var(--foam,#0F1F17); }
  .dl-rk-optie { border:1.5px solid var(--line,#E5E9E2); border-radius:12px; padding:16px 18px;
                 margin-bottom:12px; cursor:pointer; transition:all .13s; }
  .dl-rk-optie:hover { border-color:var(--beam,#9ACB7A); }
  .dl-rk-optie.aan { border-color:var(--beam,#9ACB7A); background:#FDF6F1; }
  .dl-rk-kop { font-size:14px; font-weight:600; margin-bottom:5px; color:var(--foam,#0F1F17); }
  .dl-rk-optie p { font-size:13px; color:var(--mist,#5A6B62); line-height:1.55; margin:0 0 12px; }
  .dl-rk-rij { display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--foam,#0F1F17); }
  .dl-num { width:88px; min-width:0 !important; text-align:center; }
  .dl-rk-uit { margin-top:10px; }
  .dl-rk-som { font-family:'SF Mono',monospace; font-size:16px; font-weight:600; color:var(--warn,#7A5A12); }
  .dl-mvoet { display:flex; gap:10px; align-items:center; margin-top:18px; }
  .dl-annuleer { background:transparent; border:none; color:var(--fog,#6E7873);
                 font-family:inherit; font-size:13px; cursor:pointer; padding:8px; }
  .dl-annuleer:hover { color:var(--foam,#0F1F17); }

  @media (max-width:760px){
    #app-layer .dl-rij, #app-layer .dl-rij.vast { grid-template-columns:1fr; gap:8px; }
    #app-layer .dl-waarde { text-align:left; }
  }

  /* Onbekend als benadering: eerlijk over wat je wel en niet ziet */
  #app-layer .kr-benadering { border-color:rgba(184,132,43,.35); margin-bottom:16px; }
  #app-layer .kr-benadering h3 { margin:10px 0 6px; }
  #app-layer .kr-ben-rij { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
  #app-layer .kb-wel, #app-layer .kb-niet { padding:14px 16px; border-radius:11px; border:1px solid var(--line); }
  #app-layer .kb-wel  { background:var(--ok-bg);  border-color:rgba(78,127,94,.3); }
  #app-layer .kb-niet { background:var(--warn-bg); border-color:rgba(184,132,43,.3); }
  #app-layer .kb-k { font-size:12px; font-weight:700; letter-spacing:.02em; margin-bottom:5px; }
  #app-layer .kb-wel .kb-k  { color:var(--ok-tekst); }
  #app-layer .kb-niet .kb-k { color:#7A5A12; }
  #app-layer .kb-t { font-size:13px; color:var(--mist); line-height:1.55; }
  #app-layer .kr-ben-gratis { margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
                              font-size:13px; color:var(--mist); line-height:1.65; max-width:78ch; }
  #app-layer .kr-ben-gratis b { color:var(--foam); }
  @media (max-width:760px){ #app-layer .kr-ben-rij { grid-template-columns:1fr; } }

  /* ===== KOERS ===== */
  #app-layer .ko-hero { position:relative; overflow:hidden; }
  #app-layer .ko-hero .gauge-num .delta.op { color:var(--ok-tekst); }
  #app-layer .ko-hero .gauge-num .delta.af { color:var(--warn-tekst); }
  #app-layer .ko-betrouw { display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
  #app-layer .ko-bt-uit { font-size:12px; color:var(--fog); }
  #app-layer .ko-nog-niet h3 { margin:10px 0 6px; }
  #app-layer .ko-nog-niet .fc-cta { margin-top:16px; }
  #app-layer .ko-fases { display:flex; flex-direction:column; gap:3px; margin-top:16px; }
  #app-layer .ko-fase { display:grid; grid-template-columns:118px 1fr 48px; gap:14px; align-items:center; padding:7px 0; }
  #app-layer .kof-naam { font-size:13.5px; color:var(--foam); font-weight:500; }
  #app-layer .kof-balk { position:relative; height:9px; border-radius:5px; background:var(--hull-2); }
  #app-layer .kof-balk i { display:block; height:100%; border-radius:5px; }
  /* De 100-lijn: waar je begon. Zonder die streep zegt een balk niets. */
  #app-layer .kof-nul { position:absolute; left:33.33%; top:-3px; bottom:-3px; width:1.5px;
                        background:var(--fog); opacity:.6; }
  #app-layer .kof-n { font-family:'SF Mono',monospace; font-size:14px; font-weight:600; text-align:right; }
  #app-layer .kr-gaten { margin-top:14px; border-color:rgba(184,132,43,.35); }
  #app-layer .kr-gat-lijst { display:flex; flex-direction:column; gap:2px; margin-top:14px; }
  #app-layer .kr-gat { display:grid; grid-template-columns:130px 1fr; gap:18px; align-items:start;
                       padding:14px 0; border-top:1px solid var(--line); }
  #app-layer .krg-naam { font-size:14.5px; font-weight:600; color:var(--foam); }
  #app-layer .krg-uit { font-size:13.5px; color:var(--mist); line-height:1.65; max-width:72ch; }
  @media (max-width:760px){ #app-layer .kr-gat { grid-template-columns:1fr; gap:5px; } }

  /* Inzichten: tabellen */
  #app-layer .izs-kop { display:flex; align-items:center; gap:11px; margin-bottom:9px; flex-wrap:wrap; }
  #app-layer .izs-kop h3 { margin:0; }
  #app-layer .iz-tabel-wrap { overflow-x:auto; margin-top:12px; }
  #app-layer .iz-tabel { width:100%; border-collapse:collapse; font-size:13.5px; }
  #app-layer .iz-tabel th { text-align:right; padding:8px 12px; font-size:10.5px; text-transform:uppercase;
                            letter-spacing:.07em; color:var(--fog); font-weight:600;
                            border-bottom:1px solid var(--line); white-space:nowrap; }
  #app-layer .iz-tabel th:first-child { text-align:left; }
  #app-layer .iz-tabel td { text-align:right; padding:10px 12px; color:var(--mist);
                            border-bottom:1px solid var(--line-soft); white-space:nowrap; }
  #app-layer .iz-tabel tr:last-child td { border-bottom:none; }
  #app-layer .iz-tabel tr:hover td { background:var(--inset,#F4F5F0); }
  #app-layer .iz-naam { text-align:left !important; color:var(--foam) !important; font-weight:500; }
  #app-layer .iz-tabel .cijfer { font-family:'SF Mono',monospace; font-variant-numeric:tabular-nums; }
  #app-layer .iz-tabel .v-goed { color:var(--ok-tekst); font-weight:600; }
  #app-layer .iz-tabel .v-slecht { color:var(--warn-tekst); font-weight:600; }

  /* Sorteerbare kopjes */
  #app-layer .iz-tabel.srt th { cursor:pointer; user-select:none; transition:color .13s; white-space:nowrap; }
  #app-layer .iz-tabel.srt th:hover { color:var(--beam-tekst); }
  #app-layer .iz-tabel.srt th.aan { color:var(--foam); }
  #app-layer .iz-tabel.srt th.links { text-align:left; }
  #app-layer .srt-p { display:inline-block; margin-left:3px; opacity:.3; font-size:10px; }
  #app-layer .iz-tabel.srt th:hover .srt-p { opacity:.7; }
  #app-layer .srt-p.aan { opacity:1; color:var(--beam-tekst); }

  /* Commerciële impact */
  #app-layer .ci-kern { display:flex; gap:34px; flex-wrap:wrap; margin-bottom:14px; }
  #app-layer .ci-kern .fc-stat .v { font-size:26px; font-weight:600; }
  #app-layer .ci-lijst { display:flex; flex-direction:column; gap:2px; margin-top:12px; }
  #app-layer .ci-rij { display:flex; align-items:center; gap:16px; padding:12px 13px; border-radius:10px;
                       transition:background .14s; }
  #app-layer .ci-rij:hover { background:var(--inset,#F4F5F0); }
  #app-layer .ci-mid { flex:1; min-width:0; }
  #app-layer .ci-naam { font-size:14.5px; color:var(--foam); font-weight:500; }
  #app-layer .ci-meta { font-size:12px; color:var(--fog); margin-top:2px; }
  #app-layer .ci-bedrag { font-family:'SF Mono',monospace; font-size:17px; font-weight:600; white-space:nowrap; }
  #app-layer .ci-noot { font-size:12px; color:var(--fog); line-height:1.6; margin-top:12px;
                        padding-top:12px; border-top:1px solid var(--line); max-width:76ch; }

  /* Maandrapport */
  #app-layer .mr-kop { display:flex; justify-content:space-between; align-items:flex-end; gap:16px;
                       margin-bottom:16px; flex-wrap:wrap; }
  #app-layer .mr-kop h2 { margin:5px 0 0; text-transform:capitalize; }
  #app-layer .mr-rij { display:grid; grid-template-columns:22px 1fr auto; gap:12px; align-items:center;
                       padding:9px 11px; border-radius:9px; }
  #app-layer .mr-rij:hover { background:var(--inset,#F4F5F0); }
  #app-layer .mr-v { display:flex; align-items:center; justify-content:center; width:19px; height:19px;
                     border-radius:6px; background:var(--ok); color:var(--ink); font-size:11px; font-weight:700; }
  #app-layer .mr-v.mr-klok { background:transparent; border:1.5px solid var(--beam); color:var(--beam-tekst); }
  #app-layer .mr-t { font-size:14px; color:var(--foam); line-height:1.45; }
  #app-layer .mr-b { font-size:11.5px; color:var(--fog); margin-top:2px; }
  #app-layer .mr-d { font-size:12px; color:var(--fog); white-space:nowrap; }

  @media (max-width:760px){
    #app-layer .ci-kern { gap:20px; }
    #app-layer .kr-kern { gap:16px; }
    #app-layer .krt-ev { display:none; }
    #app-layer .iz-tabel { font-size:12.5px; }
    #app-layer .iz-tabel th, #app-layer .iz-tabel td { padding:8px 8px; }
  }
  /* ===== TOEWIJZING & CAPACITEIT ===== */
  #app-layer .tw-av { display:inline-flex; align-items:center; justify-content:center;
                      width:24px; height:24px; border-radius:50%; color:#fff;
                      font-size:9.5px; font-weight:700; letter-spacing:.02em; flex-shrink:0; }
  #app-layer .tw-av.mini { width:19px; height:19px; font-size:8px; }
  #app-layer .tw-av.groot { width:38px; height:38px; font-size:13px; }

  #app-layer .tkr-wie-blok { position:relative; }
  #app-layer .tw-lid, #app-layer .tw-voorstel, #app-layer .tw-leeg {
    display:inline-flex; align-items:center; gap:7px;
    font-family:inherit; font-size:12px; cursor:pointer;
    padding:4px 10px 4px 4px; border-radius:20px;
    border:1px solid var(--line); background:var(--kaart, #fff); color:var(--mist);
    white-space:nowrap; transition:all .14s;
  }
  #app-layer .tw-lid:hover, #app-layer .tw-leeg:hover { border-color:var(--fog); color:var(--foam); }
  /* Het voorstel is nog GEEN toewijzing. Dat moet je kunnen zien: gestippeld. */
  #app-layer .tw-voorstel { border-style:dashed; border-color:var(--beam); color:var(--beam-tekst); background:transparent; }
  #app-layer .tw-voorstel:hover { background:var(--beam-knop); color:#fff; border-style:solid; }
  #app-layer .tw-voorstel:hover .tw-av { box-shadow:0 0 0 2px rgba(255,255,255,.5); }
  #app-layer .tw-ok { font-weight:700; font-size:11px; }
  #app-layer .tw-leeg { padding:5px 12px; border-style:dashed; color:var(--fog); }
  #app-layer .tw-naam, #app-layer .tw-vt { font-weight:500; }

  #app-layer .tw-kiezer { position:absolute; right:0; top:calc(100% + 5px); z-index:20;
                          min-width:210px; background:var(--kaart, #fff);
                          border:1px solid var(--line); border-radius:12px; padding:5px;
                          box-shadow:0 12px 30px -10px rgba(28,40,34,.28); }
  #app-layer .twk-rij { display:flex; align-items:center; gap:9px; width:100%;
                        padding:8px 10px; border:none; background:transparent; border-radius:8px;
                        font-family:inherit; font-size:13px; color:var(--foam); cursor:pointer; text-align:left; }
  #app-layer .twk-rij:hover { background:var(--hull-2); }
  #app-layer .twk-naam { flex:1; }
  #app-layer .twk-uren { font-size:11px; color:var(--fog); }
  #app-layer .twk-los { color:var(--warn-tekst); border-top:1px solid var(--line); border-radius:0 0 8px 8px; }
  #app-layer .twk-geen { padding:12px; font-size:12.5px; color:var(--fog); text-align:center; }

  /* Capaciteit per teamlid */
  #app-layer .cap-team { margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  #app-layer .cap-kop { display:flex; justify-content:space-between; align-items:baseline;
                        gap:12px; margin-bottom:12px; flex-wrap:wrap; }
  #app-layer .cap-tot { font-size:12px; color:var(--fog); }
  #app-layer .cap-lid { display:grid; grid-template-columns:24px 1fr auto; gap:12px;
                        align-items:center; padding:9px 0; }
  #app-layer .cap-mid { min-width:0; }
  #app-layer .cap-naam { font-size:13.5px; color:var(--foam); font-weight:500; margin-bottom:5px; }
  #app-layer .cap-exp { font-size:11px; color:var(--fog); font-weight:400; margin-left:9px; }
  #app-layer .cap-balk { height:6px; border-radius:3px; background:var(--hull-2); overflow:hidden; }
  #app-layer .cap-balk i { display:block; height:100%; background:var(--ok); border-radius:3px; }
  #app-layer .cap-balk i.vol { background:var(--danger); }
  #app-layer .cap-uren { font-size:12px; color:var(--fog); text-align:right; white-space:nowrap;
                         font-variant-numeric:tabular-nums; }
  #app-layer .cap-over { display:block; font-size:10.5px; color:var(--danger-tekst); font-weight:600; margin-top:2px; }
  #app-layer .cap-van { color:var(--fog); font-weight:400; }
  #app-layer .cap-lid.over .cap-naam { color:var(--danger-tekst); }
  #app-layer .cap-rest { margin-top:12px; padding:10px 13px; border-radius:9px;
                         background:var(--warn-bg); color:#7A5A12; font-size:12.5px; line-height:1.5; }
  #app-layer .cap-link { display:inline-block; margin-top:12px; font-size:12.5px;
                         color:var(--beam-tekst); cursor:pointer; text-decoration:none; }
  #app-layer .cap-link:hover { text-decoration:underline; }
  #app-layer .cap-geen { margin-top:16px; padding-top:15px; border-top:1px solid var(--line); }
  #app-layer .cap-geen p { font-size:13px; color:var(--fog); line-height:1.6; margin:0; max-width:70ch; }

  /* Team-scherm */
  #app-layer .team-card { background:var(--hull); border:1px solid var(--line);
                          border-radius:14px; padding:18px 20px; }
  #app-layer .tc-head { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
  #app-layer .tc-id { flex:1; min-width:0; }
  #app-layer .tc-naam { font-size:15px; font-weight:600; color:var(--foam); }
  #app-layer .tc-uren { font-size:12px; color:var(--fog); margin-top:2px; }
  #app-layer .tc-edit { width:30px; height:30px; border-radius:8px; border:1px solid var(--line);
                        background:transparent; color:var(--fog); cursor:pointer; padding:6px; }
  #app-layer .tc-edit:hover { color:var(--foam); border-color:var(--fog); }
  #app-layer .tc-edit svg { width:100%; height:100%; }
  #app-layer .tc-balk { margin-bottom:9px; }
  #app-layer .tc-over { font-size:11.5px; color:var(--danger-tekst); font-weight:600; margin-bottom:10px; }
  #app-layer .tc-skills-label { font-family:'SF Mono',monospace; font-size:10px; text-transform:uppercase;
                                letter-spacing:.09em; color:var(--fog); margin-bottom:7px; }
  #app-layer .tc-skills { display:flex; gap:5px; flex-wrap:wrap; }
  #app-layer .tm-skill { font-size:11.5px; padding:3px 10px; border-radius:20px;
                         background:var(--hull-2); border:1px solid var(--line); color:var(--mist); }
  #app-layer .tm-skill.none { color:var(--fog); font-style:italic; }
  #app-layer .team-nieuw { border:1px dashed var(--line); border-radius:14px; padding:22px;
                           background:transparent; color:var(--fog); font-family:inherit; font-size:14px;
                           cursor:pointer; transition:all .14s; }
  #app-layer .team-nieuw:hover { color:var(--beam-tekst); border-color:var(--beam); }
  #app-layer .tce-row { margin-bottom:14px; }
  #app-layer .tce-row label { display:block; font-size:12px; color:var(--fog); margin-bottom:6px; }
  #app-layer .tce-input { width:100%; padding:9px 12px; border-radius:9px;
                          border:1px solid var(--line); background:var(--hull-2); color:var(--foam);
                          font-family:inherit; font-size:14px; }
  #app-layer .tce-input.short { width:90px; }
  #app-layer .tce-input:focus { outline:2px solid var(--beam); outline-offset:1px; }
  #app-layer .tm-skills-kies { display:flex; gap:5px; flex-wrap:wrap; }
  #app-layer .tm-skill-toggle { font-size:11.5px; padding:5px 11px; border-radius:20px;
                                border:1px solid var(--line); background:transparent; color:var(--fog);
                                font-family:inherit; cursor:pointer; transition:all .14s; }
  #app-layer .tm-skill-toggle:hover { border-color:var(--fog); color:var(--foam); }
  #app-layer .tm-skill-toggle.on { background:var(--beam-knop); border-color:var(--beam); color:#fff; }
  #app-layer .tce-acties { display:flex; gap:8px; flex-wrap:wrap; }
  #app-layer .btn-stil { background:transparent; border:1px solid var(--line); color:var(--foam); }
  #app-layer .btn-weg { background:transparent; border:1px solid var(--danger); color:var(--danger-tekst); margin-left:auto; }

  @media (max-width:760px){
    #app-layer .tw-vt, #app-layer .tw-naam { display:none; }
    #app-layer .cap-exp { display:none; }
  }
  /* ===== WAT GAAT ER GOED =====
     Groen omrand, want dit is de enige plek in de app waar niets mis is. */
  #app-layer .goed-blok { border-color:rgba(78,127,94,.4); margin-bottom:18px; }
  #app-layer .gd-lijst { display:flex; flex-direction:column; gap:2px; margin-top:16px; }
  #app-layer .gd-punt { display:grid; grid-template-columns:110px 1fr; gap:20px;
                        align-items:start; padding:14px 0; border-top:1px solid var(--line); }
  #app-layer .gd-cijfer { font-family:'SF Mono',monospace; font-size:23px; font-weight:600;
                          color:var(--ok-tekst); letter-spacing:-.01em; line-height:1.15;
                          font-variant-numeric:tabular-nums; }
  #app-layer .gd-mid { min-width:0; }
  #app-layer .gd-kop { font-size:14px; font-weight:600; color:var(--foam); margin-bottom:4px; }
  #app-layer .gd-uit { font-size:13.5px; color:var(--mist); line-height:1.65; max-width:74ch; }
  #app-layer .gd-brug { margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
                        font-size:13px; color:var(--fog); line-height:1.6; max-width:74ch; }
  @media (max-width:760px){
    #app-layer .gd-punt { grid-template-columns:1fr; gap:5px; }
  }
  #app-layer .tk-lijst { display:flex; flex-direction:column; gap:2px; }
  /* Taakregel: vinkje | tekst+meta | uitklapknop | (uitgeklapt: het klikpad) */
  #app-layer .tkr { display:grid; grid-template-columns:22px 1fr auto 26px; gap:12px; align-items:start;
                    padding:11px 12px; border-radius:10px; transition:background .14s; }
  #app-layer .tkr-uit { background:var(--inset,#F4F5F0); }
  #app-layer .tkr-mid { min-width:0; }
  #app-layer .tkr-meta { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-top:4px; }
  #app-layer .tkr-wie { font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
                        padding:2px 8px; border-radius:20px; }
  #app-layer .wie-klant  { background:var(--hull-2); color:var(--mist); border:1px solid var(--line); }
  #app-layer .wie-dev    { background:var(--hull-2); color:#47705C; border:1px solid var(--line); }
  #app-layer .wie-plotta { background:var(--warn-bg); color:var(--beam-tekst); border:1px solid rgba(122,90,18,.35); }
  #app-layer .tkr-duur { font-size:11.5px; color:var(--fog); }
  #app-layer .tkr-wacht { font-size:11.5px; color:var(--warn-tekst); }
  /* Geblokkeerd: zichtbaar, maar niet aanklikbaar. */
  #app-layer .tkr-blok { opacity:.55; }
  #app-layer .tkr-blok .tkr-vink { cursor:not-allowed; border-style:dashed; }
  #app-layer .tkr-plotta .tkr-vink { cursor:default; border-color:var(--beam); color:var(--beam-tekst); background:transparent; }
  /* Uitklapknop */
  #app-layer .tkr-meer { width:22px; height:22px; border-radius:7px; border:1px solid var(--line);
                         background:transparent; color:var(--fog); font-size:14px; line-height:1;
                         cursor:pointer; padding:0; font-family:inherit; transition:all .14s; }
  #app-layer .tkr-meer:hover { color:var(--foam); border-color:var(--fog); }
  #app-layer .tkr-meer:focus-visible { outline:2px solid var(--beam); outline-offset:2px; }
  /* Het klikpad */
  #app-layer .tkr-hoe { grid-column:2 / -1; margin-top:11px; padding:14px 16px;
                        background:var(--hull-2); border:1px solid var(--line); border-radius:11px; }
  #app-layer .th-k { font-size:10.5px; text-transform:uppercase; letter-spacing:.09em;
                     color:var(--fog); margin-bottom:6px; }
  #app-layer .th-impact { font-size:13.5px; color:var(--ok-tekst); line-height:1.55; margin-bottom:13px;
                          padding-bottom:12px; border-bottom:1px solid var(--line); }
  #app-layer .th-impact .th-k { display:block; color:var(--fog); margin-bottom:3px; }
  #app-layer .th-stappen { margin:0; padding-left:19px; }
  #app-layer .th-stappen li { font-size:13.5px; color:var(--mist); line-height:1.6; padding:4px 0; }
  #app-layer .th-stappen li::marker { color:var(--beam-tekst); font-variant-numeric:tabular-nums; }
  #app-layer .th-letop { margin-top:12px; padding:10px 13px; border-radius:9px;
                         background:var(--warn-bg); border:1px solid rgba(122,90,18,.25);
                         font-size:13px; color:var(--mist); line-height:1.6; }
  #app-layer .th-letop b { color:var(--beam-tekst); }
  @media (max-width:760px){
    #app-layer .tkr { grid-template-columns:22px 1fr 26px; }
    #app-layer .tkr-hoe { grid-column:1 / -1; }
  }

  #app-layer .tkr:hover { background:var(--inset,#F4F5F0); }
  #app-layer .tkr-vink { width:19px; height:19px; border-radius:6px; border:1.5px solid var(--fog);
                         background:transparent; color:var(--ink); font-size:11px; line-height:1;
                         cursor:pointer; display:flex; align-items:center; justify-content:center;
                         padding:0; flex-shrink:0; transition:all .14s; font-family:inherit; }
  #app-layer .tkr-vink:hover { border-color:var(--foam); }
  #app-layer .tkr-vink:focus-visible { outline:2px solid var(--beam); outline-offset:2px; }
  #app-layer .tkr-bezig .tkr-vink { border-color:var(--beam); background:var(--beam); color:var(--ink); font-weight:700; }
  #app-layer .tkr-afgerond .tkr-vink { border-color:var(--ok); background:var(--ok); color:var(--ink); font-weight:700; }
  #app-layer .tkr-t { font-size:14px; color:var(--foam); line-height:1.5; }
  #app-layer .tkr-afgerond .tkr-t { color:var(--fog); text-decoration:line-through; text-decoration-color:var(--line); }

  /* Taken binnen de focus-kaart */
  #app-layer .focus-card .fc-taken { margin:16px 0 18px; padding-top:15px; border-top:1px solid rgba(28, 40, 34, 0.055); }
  #app-layer .focus-card .fc-taken .tkr:hover { background:var(--inset,#F4F5F0); }

  /* Voortgang per advies in de prio-lijst */
  #app-layer .adv-voortgang { display:flex; align-items:center; gap:9px; min-width:78px; }
  #app-layer .av-bar { width:44px; height:5px; border-radius:3px; background:var(--hull-2); overflow:hidden; }
  #app-layer .av-bar i { display:block; height:100%; background:var(--ok); border-radius:3px; }
  #app-layer .av-n { font-size:11.5px; color:var(--fog); font-variant-numeric:tabular-nums; }
  #app-layer .prio { cursor:pointer; }
  #app-layer .prio .pmeta b.v-slecht { color:var(--warn-tekst); }
  #app-layer .prio .pmeta b.v-goed { color:var(--ok-tekst); }

  /* Voortgangskop op Taken */
  #app-layer .tk-kop { display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
                       margin-bottom:14px; flex-wrap:wrap; }
  #app-layer .cs-van { font-size:19px; color:var(--fog); font-weight:400; }
  #app-layer .tk-tel { display:flex; gap:22px; }
  #app-layer .tkt { text-align:right; }
  #app-layer .tkt b { display:block; font-size:19px; color:var(--foam); font-weight:600; }
  #app-layer .tkt span { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--fog); }

  /* Adviesgroep op Taken */
  #app-layer .tk-groep { margin-bottom:13px; }
  #app-layer .tkg-kop { display:grid; grid-template-columns:34px 1fr auto; gap:14px; align-items:start;
                        padding-bottom:14px; margin-bottom:11px; border-bottom:1px solid var(--line); }
  #app-layer .tkg-nr { width:30px; height:30px; border-radius:9px; background:var(--hull-2); border:1px solid var(--line);
                       display:flex; align-items:center; justify-content:center; font-size:13px;
                       font-weight:600; color:var(--fog); }
  #app-layer .tkg-mid h3 { margin:0 0 9px; font-size:16px; }
  #app-layer .tkg-cijfers { display:flex; gap:20px; flex-wrap:wrap; }
  #app-layer .tkg-cijfers .fc-stat .v { font-size:15px; font-weight:600; }
  #app-layer .tkg-cijfers .fc-stat .l { font-size:11px; }

  /* Afgerond */
  #app-layer .afg-summary { display:flex; gap:30px; flex-wrap:wrap; margin:18px 0 22px;
                            padding:18px 22px; background:var(--hull); border:1px solid var(--line); border-radius:14px; }
  #app-layer .afg-summary .fc-stat .v { font-size:26px; font-weight:600; }
  #app-layer .af-rij { grid-template-columns:22px 1fr auto; }
  #app-layer .af-v { display:flex; align-items:center; justify-content:center; width:19px; height:19px;
                     border-radius:6px; background:var(--ok); color:var(--ink); font-size:11px; font-weight:700; }
  #app-layer .af-bron { display:block; font-size:11.5px; color:var(--fog); margin-top:2px; text-decoration:none; }
  #app-layer .af-d { font-size:12px; color:var(--fog); white-space:nowrap; }

  @media (max-width:760px){
    #app-layer .tkg-kop { grid-template-columns:28px 1fr; }
    #app-layer .tkg-kop .ptype { display:none; }
    #app-layer .tkr { grid-template-columns:22px 1fr; }
    #app-layer .tkr-s { display:none; }
    #app-layer .adv-voortgang { display:none; }
    #app-layer .tkg-cijfers { gap:14px; }
  }
  #app-layer .koers-bt { display:inline-block; margin-top:14px; padding:4px 12px; border:1px solid; border-radius:20px; font-size:12.5px; }
  #app-layer .koers-fases { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin:22px 0; }
  #app-layer .koers-fase { background:var(--hull); border:1px solid var(--line); border-radius:11px; padding:13px 11px; text-align:center; }
  #app-layer .koers-fase .d { display:block; width:9px; height:9px; border-radius:50%; margin:0 auto 8px; }
  #app-layer .kf-naam { font-size:11.5px; color:var(--fog); margin-bottom:6px; line-height:1.3; }
  #app-layer .kf-num { font-size:24px; font-weight:600; }
  #app-layer .kf-sub { font-size:11px; color:var(--fog); margin-top:3px; opacity:.75; }
  #app-layer .koers-lijst { display:flex; flex-direction:column; gap:7px; }
  #app-layer .koers-rij { display:grid; grid-template-columns:18px 1fr 130px 150px 60px; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
  #app-layer .koers-rij:last-child { border-bottom:none; }
  #app-layer .kr-pijl { font-weight:700; }
  #app-layer .kr-pad { color:var(--foam); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  #app-layer .kr-camp { font-size:10.5px; color:var(--fog); border:1px solid var(--line); border-radius:12px; padding:1px 6px; margin-left:5px; }
  #app-layer .kr-fase, #app-layer .kr-cijfers { font-size:12.5px; color:var(--fog); }
  #app-layer .kr-score { font-weight:600; text-align:right; }
  #app-layer .koers-methode { margin-top:16px; padding-top:13px; border-top:1px solid var(--line); font-size:12px; color:var(--fog); line-height:1.6; }
  @media (max-width:860px){
    #app-layer .koers-fases { grid-template-columns:repeat(3,1fr); }
    #app-layer .koers-rij { grid-template-columns:18px 1fr 60px; }
    #app-layer .kr-fase, #app-layer .kr-cijfers { display:none; }
  }
  #app-layer .pg-camp { display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--fog); cursor:pointer; }
  #app-layer .pg-camp input { accent-color:var(--beam); }
  #app-layer .pg-campeind { background:var(--kaart, #fff); border:1px solid var(--line); border-radius:7px; padding:4px 7px; color:var(--foam); font-size:12.5px; font-family:inherit; }
  #app-layer .adv-taken { margin-top:12px; padding-top:11px; border-top:1px solid var(--line); }
  #app-layer .advt-kop { font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--fog); margin-bottom:7px; }
  #app-layer .advt-rij { display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--fog); padding:3px 0; line-height:1.5; }
  #app-layer .advt-vink { color:var(--beam-tekst); flex-shrink:0; font-size:11px; padding-top:2px; }
  #app-layer .pg-sorteer { display:flex; align-items:center; gap:8px; margin:16px 0 4px; }
  #app-layer .pg-sortknop { font-size:12.5px; padding:4px 11px; border-radius:20px; border:1px solid var(--line); background:transparent; color:var(--fog); font-family:inherit; cursor:pointer; transition:all .15s; }
  #app-layer .pg-sortknop:hover { color:var(--foam); border-color:var(--fog); }
  #app-layer .pg-sortknop.aan { background:var(--beam); border-color:var(--beam); color:var(--ink); font-weight:600; }
  #app-layer .pg-ga { background:none; border:none; padding:0; font-family:inherit; font-size:12.5px; color:var(--foam); cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
  #app-layer .pg-ga:hover { color:var(--beam-tekst); }
  #app-layer .pg-blok { transition:border-color .3s, box-shadow .3s; scroll-margin:80px; }
  #app-layer .pg-blok.pg-focus { border-color:var(--beam); box-shadow:0 0 0 2px rgba(122,90,18,.25); }
  @media (max-width:860px){
    #app-layer .pg-kop { display:none; }
    #app-layer .pg-rij { grid-template-columns:1fr; gap:7px; }
    #app-layer .pg-cijfers { text-align:left; }
  }
  @media (max-width:860px){ #app-layer .pg-kop { display:none; } }
  #app-layer .pg-lijst { display:flex; flex-direction:column; gap:6px; margin-top:14px; }
  #app-layer .pg-titel { font-size:13.5px; color:var(--foam); }
  #app-layer .pg-pad { font-size:11.5px; color:var(--fog); margin-top:2px; }
  #app-layer .pg-weergaven { font-size:14px; color:var(--foam); font-weight:600; }
  #app-layer .pg-sec { font-size:12px; color:var(--fog); }
  .binnenkort .bk-box { max-width:520px; text-align:center; background:var(--hull); border:1px solid var(--line); border-radius:16px; padding:32px 28px; }
  .binnenkort .bk-box h2 { font-size:22px; margin-bottom:10px; }
  .binnenkort .bk-box p { color:var(--fog); font-size:14.5px; line-height:1.6; margin:0; }
  .whom { background:var(--hull); border:1px solid var(--line); border-radius:13px; padding:26px 24px; }
  .whom h3 { font-size:17px; margin-bottom:10px; display:flex; align-items:center; gap:9px; }
  .whom h3 .d { width:9px; height:9px; border-radius:50%; }
  .whom p { font-size:14px; color:var(--fog); margin:0; }
  .whom ul { margin:13px 0 0; padding:0 0 0 4px; list-style:none; }
  .whom li { font-size:13.5px; color:var(--mist); padding:5px 0 5px 22px; position:relative; }
  .whom li::before { content:'→'; position:absolute; left:0; color:var(--beam-tekst); }

  /* CTA block */
  .cta-block { text-align:center; background:linear-gradient(160deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:20px; padding:56px 40px; position:relative; overflow:hidden; }
  .cta-block .glow { position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:400px; height:300px; background:radial-gradient(circle,rgba(154,203,122,0.18),transparent 60%); pointer-events:none; }
  .cta-block h2 { font-size:34px; margin-bottom:16px; position:relative; }
  .cta-block p { font-size:17px; color:var(--mist); margin-bottom:30px; max-width:520px; margin-left:auto; margin-right:auto; position:relative; }

  /* ===== pricing ===== */
  .price-hero { padding:72px 0 20px; text-align:center; }
  .price-hero h1 { font-size:44px; margin-bottom:16px; }
  .price-hero p { font-size:18px; color:var(--mist); max-width:560px; margin:0 auto; }
  .price-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch; padding-top:14px; }
  .plan { background:var(--hull); border:1px solid var(--line); border-radius:17px; padding:32px 28px; display:flex; flex-direction:column; position:relative; }
  .plan.feat-plan { border-color:var(--signal-dim); box-shadow:0 20px 50px -25px rgba(15,31,23,0.28); }
  .plan-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--beam); color:var(--green-900); font-size:11px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:5px 14px; border-radius:20px; }
  .plan h3 { font-size:20px; margin-bottom:4px; }
  .plan .phor { font-size:12.5px; color:var(--signal); font-weight:600; margin:0 0 10px; min-height:34px; }
  .plan .ptag { font-size:13.5px; color:var(--fog); margin-bottom:22px; min-height:38px; }
  .plan .price { display:flex; align-items:baseline; gap:5px; margin-bottom:4px; }
  .plan .price .cur { font-size:22px; font-weight:600; color:var(--mist); }
  .plan .price .amt { font-size:42px; font-weight:700; letter-spacing:-0.03em; }
  .plan .price .per { font-size:14px; color:var(--fog); }
  .plan .price-note { font-size:12.5px; color:var(--fog); margin-bottom:24px; }
  .plan ul { list-style:none; margin:0 0 28px; padding:0; flex:1; }
  .plan li { font-size:14px; color:var(--mist); padding:9px 0 9px 28px; position:relative; border-bottom:1px solid var(--line-soft); }
  .plan li:last-child { border-bottom:none; }
  .plan li svg { position:absolute; left:0; top:11px; width:17px; height:17px; stroke:var(--ok); fill:none; stroke-width:2.2; }
  .plan li.off { color:var(--fog); }
  .plan li.off svg { stroke:var(--line); }
  .plan .btn { width:100%; justify-content:center; }
  .price-faq { max-width:760px; margin:64px auto 0; }
  .price-faq h2 { font-size:26px; text-align:center; margin-bottom:32px; }
  .faq-item { border-bottom:1px solid var(--line-soft); padding:18px 0; }
  .faq-item h3 { font-size:16px; margin-bottom:8px; color:var(--foam); }
  .faq-item p { font-size:14.5px; color:var(--fog); margin:0; }

  /* ===== login ===== */
  .login-wrap { min-height:calc(100vh - 64px); display:flex; align-items:center; justify-content:center; padding:40px 24px; position:relative; overflow:hidden; }
  .login-glow { position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(154,203,122,0.12),transparent 62%); pointer-events:none; top:-160px; right:-100px; }
  .login-card { width:100%; max-width:410px; background:linear-gradient(165deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:18px; padding:40px 36px; position:relative; box-shadow:0 30px 70px -25px rgba(0,0,0,0.6); }
  .login-card .brand { justify-content:center; margin-bottom:8px; font-size:22px; }
  .login-card .sub { text-align:center; font-size:14px; color:var(--fog); margin-bottom:30px; }
  .field { margin-bottom:18px; }
  .field label { display:block; font-size:13px; color:var(--mist); margin-bottom:7px; font-weight:500; }
  .field input { width:100%; background:var(--abyss); border:1px solid var(--line); border-radius:10px; padding:13px 15px; color:var(--foam); font-size:15px; font-family:inherit; transition:border-color .15s; }
  .field input:focus { outline:none; border-color:var(--signal); }
  .field input::placeholder { color:var(--fog); }
  .login-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; font-size:13px; }
  .login-row label { display:flex; align-items:center; gap:7px; color:var(--mist); cursor:pointer; }
  .login-row a { color:var(--signal); }
  .login-card .btn { width:100%; justify-content:center; }
  .login-divider { display:flex; align-items:center; gap:14px; margin:24px 0; color:var(--fog); font-size:12px; }
  .login-divider::before, .login-divider::after { content:''; flex:1; height:1px; background:var(--line-soft); }
  .login-sso { width:100%; justify-content:center; background:var(--abyss); border:1px solid var(--line); color:var(--mist); }
  .login-sso:hover { border-color:var(--signal); color:var(--foam); }
  .login-sso svg { width:18px; height:18px; }
  .login-foot { text-align:center; font-size:13px; color:var(--fog); margin-top:26px; }
  .login-foot a { color:var(--signal); }
  .login-back { position:absolute; top:24px; left:24px; font-size:13px; color:var(--fog); display:flex; align-items:center; gap:6px; cursor:pointer; }
  .login-back:hover { color:var(--mist); }
  .login-back svg { width:15px; height:15px; }

  /* ===== footer ===== */
  footer.site { border-top:1px solid var(--line-soft); background:var(--hull); padding:48px 0 32px; }
  .foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:38px; }
  .foot-brand .brand { margin-bottom:14px; }
  .foot-brand p { font-size:13.5px; color:var(--fog); margin:0; max-width:260px; }
  .foot-col h4 { font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mist); margin:0 0 14px; }
  .foot-col a { display:block; font-size:14px; color:var(--fog); padding:5px 0; cursor:pointer; }
  .foot-col a:hover { color:var(--foam); }
  .foot-bottom { padding-top:14px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--fog); }
  .foot-eu { display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--fog); padding:16px 0 4px; border-top:1px solid var(--line-soft); margin-top:8px; }
  .foot-eu svg { width:17px; height:17px; color:var(--beam,#1D3B2A); flex-shrink:0; }
  .foot-bottom .made { display:flex; align-items:center; gap:7px; }

  /* ===== responsive ===== */
  @media (max-width:900px) {
    .hero-grid { grid-template-columns:1fr; gap:40px; }
    .hero h1 { font-size:40px; }
    .hero-visual { max-width:440px; }
    .prob-grid, .layers, .stats, .whom-grid, .price-grid { grid-template-columns:1fr; }
    .feat-grid { grid-template-columns:1fr; }
    .layer-arrow { display:none; }
    .foot-grid { grid-template-columns:1fr 1fr; gap:26px; }
    .nav-links { display:none; }
    .nav-links.open { display:flex; flex-direction:column; position:absolute; top:64px; left:0; right:0; background:var(--hull); border-bottom:1px solid var(--line); padding:14px 28px; gap:4px; }
    .nav-links.open a { padding:11px 14px; }
    .nav-toggle { display:flex; margin-left:auto; background:var(--hull); border:1px solid var(--line); border-radius:8px; width:40px; height:40px; align-items:center; justify-content:center; cursor:pointer; }
    .nav-toggle svg { width:20px; height:20px; stroke:var(--mist); }
  }
  @media (max-width:560px) {
    .wrap { padding:0 18px; }
    .hero { padding:56px 0 40px; }
    .hero h1 { font-size:32px; }
    .hero .lede { font-size:17px; }
    .section-head h2 { font-size:28px; }
    section { padding:52px 0; }
    .cta-block { padding:40px 24px; }
    .cta-block h2 { font-size:26px; }
    .foot-grid { grid-template-columns:1fr; }
    .foot-bottom { flex-direction:column; gap:12px; text-align:center; }
  }


/* ===================== KLANTOMGEVING (gescoped onder #app-layer) ===================== */

  /* GESCOPED naar #app-layer, NIET :root.
     :root is globaal en zou de (donkere) marketingsite meeslepen. */
  #app-layer {
    /* ===== THEMA "GELAAGD" =====
       De oude tokennamen blijven bestaan; ze wijzen alleen naar lichte waarden.
       Daardoor kantelt alle bestaande CSS mee zonder herschrijven.

       De vier lagen zijn het fundament. Ze liggen bewust dicht bij elkaar:
       de sprongen zijn klein, en juist daardoor werkt de schaduw. */
    --wash:#F4F5F0;         /* laag 0: buiten alles (licht cremeframe) */
    --paneel:#FFFFFF;       /* laag 1: het zwevende paneel — nu wit */
    --vel:#FCFCFA;          /* laag 2: het werkvel */
    --rail:#F5F6F1;         /* de losstaande balk — nu off-white i.p.v. donker */

    --abyss:#E7EDDF;        /* was de diepste laag → nu de wash */
    --hull:#FFFFFF;         /* was een donker blok  → nu een witte kaart */
    --hull-2:#F4F5F0;       /* was tweede blok      → nu een ingezonken vlak */
    --line:#E5E9E2;         /* rand: donker → licht */
    --line-soft:#F0F1EB;
    --fog:#5A6B62;          /* gedempte tekst. Moet ook op de wash (#E7EDDF) leesbaar zijn. */

    /* ===== BETEKENISKLEUREN: VLAK vs TEKST =====
       Elke kleur hieronder is ooit gekozen voor een DONKERE achtergrond. Op licht
       zijn ze allemaal te bleek als LETTER, precies dezelfde fout als bij de
       fasekleuren. Een kleur die werkt als vlak, werkt niet als tekst.
       Gebruik --x als achtergrond/balk/stip, en --x-tekst als je ermee schrijft. */
    --ok-tekst:#2F6B43;      /* 5,99 op licht (--ok zelf: 4,52) */
    --warn-tekst:#7A5A12;    /* ook leesbaar op de wash-achtergrond */
    --danger-tekst:#9E3B28;  /* 6,58 op licht (--danger zelf: 4,88) */
    --beam-tekst:#1D3B2A;    /* 5,45 op licht (--beam zelf: 3,08) */
    --beam-knop:#0F1F17;     /* voor een oranje KNOP met witte tekst: 4,99 */
    --warn-knop:#7A5A12;     /* wit op --warn haalt maar 3,29 */
    --mist:#5A6B62;         /* lopende tekst (was licht, wordt donker) */
    --foam:#0F1F17;         /* hoofdtekst: kantelt van licht naar donker */

    --signal:#1D3B2A;   /* tekstkleur: #9ACB7A haalt maar 3,08 op licht */
    --signal-dim:#0F1F17;
    --beam:#9ACB7A;
    --beam-tekst:#1D3B2A;
    --beam-knop:#0F1F17;
    --warn:#7A5A12;  --warn-bg:#F3E9D2;
    --danger:#9E3B28; --danger-bg:#F3DED8;
    --ok:#2F6B43;    --ok-bg:#E4EFE4;
    --ok-dim:#2F6B43;

    /* Lichte vlakken bínnen het lichte thema: nu juist de ingezonken tinten. */
    --paper:#FFFFFF;
    --paper-2:#FCFCFA;
    --paper-inset:#F0F1EB;
    --ink:#0F1F17;
    --ink-soft:#5A6B62;
    --card-line:#E5E9E2;
    --card-line-soft:#F0F1EB;

    /* Eén schaduw doet het werk: groot, zacht, en ver naar beneden geschoven.
       Haal die verschuiving weg en het zweeft niet meer. */
    --card-shadow:0 8px 22px -8px rgba(28,40,34,0.15);
    --schaduw-zweef:
      0 2px 4px rgba(28,40,34,.04),
      0 12px 24px rgba(28,40,34,.07),
      0 46px 80px -28px rgba(28,40,34,.32);
    --card-glow:none;

    --violet:#1D3B2A;   /* idem: tekstkleur, niet vlak */ --violet-dim:#0F1F17;
    --f1:#9AA29D; --f2:#7FA0B8; --f3:#5F8A72; --f4:#D2A044; --f5:#2F6B43; --f6:#9ACB7A;
  }
  #app-layer * { box-sizing:border-box; }
  #app-layer html { -webkit-text-size-adjust:100%; }
  #app-layer {
    color:var(--foam);
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;
    font-size:15px; line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  #app-layer .mono { font-family:'SF Mono',ui-monospace,'Cascadia Mono',Menlo,monospace; }

  #app-layer /* ---------- shell ---------- */
  /* ===== DE GELAAGDE SCHAAL =====
     De app is geen vlak van rand tot rand meer, maar een paneel dat ZWEEFT
     boven de wash. Vier lagen: wash → paneel → (rail | vel) → kaarten. */
  .app {
    display:flex; flex-direction:column; gap:14px;
    max-width:1420px; margin:0 auto;
    padding:16px;
    background:var(--paneel);
    border-radius:24px;
    box-shadow:var(--schaduw-zweef);
    min-height:calc(100vh - 60px);
  }
  /* De kop ligt OP het paneel. Daaronder pas de rail en het werkvel. */
  #app-layer .app-lijf {
    display:grid; grid-template-columns:212px 1fr; gap:16px;
    flex:1; min-height:0;
  }
  #app-layer .app-wash { padding:30px 26px 44px; background:var(--wash); min-height:100vh; }

  #app-layer /* sidebar */
  /* De rail: het ENIGE donkere vlak. Dat contrast met al het licht doet het
     werk. Je hebt verder bijna geen kleur nodig. */
  .side {
    background:var(--rail);
    border-right:none;
    border-radius:18px;
    padding:18px 12px;
    display:flex; flex-direction:column;
    align-self:start;
    position:sticky; top:0;
    max-height:calc(100vh - 150px);
    overflow-y:auto;
  }
  #app-layer .side::-webkit-scrollbar { width:5px; }
  #app-layer .side::-webkit-scrollbar-thumb { background:#D5D8D0; border-radius:3px; }

  /* ===== ALLES BINNEN DE RAIL: donkere tekst op off-white =====
     De rail is nu off-white (zoals de voorbeeldvisual), niet meer donker. Dus
     schrijven we hier met donkere ink en markeren het actieve item met een wit
     pilletje + rand, in plaats van licht-op-donker. */
  #app-layer .side .name,
  #app-layer .side .brand span { color:var(--ink); }
  #app-layer .side .nav-group-label,
  #app-layer .side .grp { color:var(--ink-60); }
  #app-layer .side .nav-item,
  #app-layer .side .nav a,
  #app-layer .side a { color:var(--ink-60); border-radius:11px; }
  #app-layer .side .nav-item:hover,
  #app-layer .side a:hover { color:var(--ink); background:rgba(15,31,23,0.05); }
  #app-layer .side .nav-item.active,
  #app-layer .side a.active,
  #app-layer .side .nav-item.aan { background:#FFFFFF; color:var(--ink); border:1px solid var(--card-line); box-shadow:0 1px 3px rgba(15,31,23,0.06); }
  #app-layer .side .nav-item.active svg,
  #app-layer .side a.active svg { stroke:var(--green-700); }
  #app-layer .side svg { stroke:currentColor; }
  #app-layer .side hr,
  #app-layer .side .side-foot { border-color:var(--card-line); }
  #app-layer .side-foot { border-top:1px solid var(--card-line); }
  #app-layer .side .env-name,
  #app-layer .side .kl-naam { color:var(--ink); }
  #app-layer .side .env-sub,
  #app-layer .side .kl-sub { color:var(--ink-60); }
  #app-layer .side .uitlog,
  #app-layer .side .logout { color:var(--ink-60); border:1px solid var(--card-line); background:transparent; border-radius:10px; }
  #app-layer .side .uitlog:hover,
  #app-layer .side .logout:hover { color:var(--ink); background:rgba(15,31,23,0.05); }
  #app-layer .side .badge,
  #app-layer .side .nav-badge { background:var(--ok); color:#fff; }

  /* De taalknop in de topbar staat op LICHT, dus die moet donker blijven. */
  #app-layer .lang-sep { color:var(--fog); }

  /* ===== SUBTABS =====
     Schermen die bij elkaar horen, staan naast elkaar in plaats van onder
     elkaar in de rail. Zo kost een bestemming één klik, geen keuze uit twaalf. */
  #app-layer .subtabs { display:flex; gap:3px; margin-left:10px; flex-wrap:wrap; }
  #app-layer .subtab {
    font-family:inherit; font-size:13.5px; color:#3E4A44;
    background:transparent; border:none; cursor:pointer;
    padding:8px 15px; border-radius:20px; white-space:nowrap;
    transition:background .15s, color .15s;
  }
  #app-layer .subtab:hover { background:var(--beam-knop); color:#fff; }
  #app-layer .subtab.aan { background:var(--beam-knop); color:#fff; font-weight:500; }
  #app-layer .subtab:focus-visible { outline:2px solid #16211D; outline-offset:2px; }

  /* De rail: zes bestemmingen, ruimer gezet nu er minder zijn. */
  #app-layer .nav { display:flex; flex-direction:column; gap:3px; }
  #app-layer .nav a { padding:10px 12px; }
  #app-layer .nav-hr { border:none; border-top:1px solid #333937; margin:14px 6px 10px; }
  #app-layer .nav-stil { opacity:.72; }
  #app-layer .nav-stil:hover { opacity:1; }

  @media (max-width:900px){
    #app-layer .subtabs { display:none; }
  }
  #app-layer .brand { display:flex; align-items:center; gap:11px; padding:4px 8px 22px; }
  #app-layer .brand .mark { width:30px; height:30px; flex-shrink:0; position:relative; }
  #app-layer .brand .mark svg { display:block; }
  #app-layer .brand .name { font-size:20px; font-weight:600; letter-spacing:0.02em; }
  #app-layer .brand .name b { color:var(--green-700); font-weight:600; }  /* accent op de off-white rail: leesbaar groen */
  #app-layer .nav { display:flex; flex-direction:column; gap:3px; margin-top:6px; }
  #app-layer .nav-label { font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--fog); padding:10px 10px 6px; }
  #app-layer .nav a {
    display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px;
    color:var(--mist); text-decoration:none; font-size:14px; cursor:pointer; transition:all .13s; border:1px solid transparent;
  }
  #app-layer .nav a .ic { width:17px; height:17px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:1.6; }
  #app-layer .nav a:hover { background:rgba(15,31,23,0.05); color:var(--ink); }
  #app-layer .nav a.active { background:#FFFFFF; color:var(--ink); border-color:var(--card-line); box-shadow:0 1px 3px rgba(15,31,23,0.06); }
  #app-layer .nav a.active .ic { stroke:var(--green-700); }
  #app-layer .side-foot { margin-top:auto; padding:14px 10px 4px; border-top:1px solid var(--line); }
  #app-layer .org { display:flex; align-items:center; gap:10px; cursor:pointer; padding:6px 8px; border-radius:9px; transition:background .14s; }
  #app-layer .org:hover { background:rgba(15,31,23,0.05); }
  #app-layer .org .ava { width:30px; height:30px; border-radius:8px; background:var(--green-900); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; color:#fff; }
  #app-layer .org .meta { font-size:12.5px; line-height:1.3; flex:1; min-width:0; }
  #app-layer .org .meta .nm { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #app-layer .org .meta .pl { color:var(--fog); font-size:11px; }
  #app-layer .org .org-switch-ic { width:15px; height:15px; color:var(--fog); flex-shrink:0; opacity:0.6; transition:opacity .14s; }
  #app-layer .org:hover .org-switch-ic { opacity:1; }
  /* Omgeving-keuzemenu (3 omgevingen) */
  #app-layer .side-foot { position:relative; }
  #app-layer .org-menu { position:absolute; bottom:calc(100% + 8px); left:0; right:0; background:#FFFFFF; border:1px solid var(--card-line); border-radius:12px; padding:6px; box-shadow:0 8px 30px -8px rgba(15,31,23,0.18); z-index:60; }
  #app-layer .org-opt { display:flex; align-items:center; gap:10px; width:100%; padding:9px 10px; border:none; background:none; border-radius:9px; cursor:pointer; text-align:left; transition:background .12s; }
  #app-layer .org-opt:hover { background:rgba(15,31,23,0.05); }
  #app-layer .org-opt-ava { width:28px; height:28px; border-radius:7px; background:var(--green-900); flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; color:#fff; }
  #app-layer .org-opt-meta { font-size:12.5px; line-height:1.3; min-width:0; }
  #app-layer .org-opt-naam { font-weight:600; color:var(--foam); display:block; }
  #app-layer .org-opt-plan { color:var(--fog); font-size:11px; }
  #app-layer .org-live-dot { color:#7FB89A; font-size:10px; font-weight:600; margin-left:4px; }
  /* Live-scherm (echte GA4-data) */
  #app-layer .live-card { background:var(--paper); border:1px solid var(--card-line); border-radius:18px; padding:44px 40px; text-align:center; box-shadow:var(--card-shadow); max-width:460px; margin:0 auto 20px; }
  #app-layer .live-badge { display:inline-flex; align-items:center; gap:7px; font-family:'SF Mono',monospace; font-size:11px; font-weight:700; letter-spacing:0.08em; color:var(--ok-tekst); background:var(--ok-bg); padding:5px 12px; border-radius:20px; margin-bottom:22px; }
  #app-layer .live-badge .lb-dot { width:7px; height:7px; border-radius:50%; background:#5F8A72; animation:livePuls 2s infinite; }
  @keyframes livePuls { 0%,100%{opacity:1;} 50%{opacity:0.35;} }
  #app-layer .live-getal { font-family:'Newsreader',Georgia,serif; font-size:82px; font-weight:600; line-height:1; color:var(--ink); letter-spacing:-0.02em; }
  #app-layer .live-label { font-size:15px; color:var(--ink-soft); margin-top:6px; }
  #app-layer .live-meta { font-family:'SF Mono',monospace; font-size:11.5px; color:var(--fog); margin-top:18px; padding-top:16px; border-top:1px solid var(--card-line); }
  #app-layer .live-fout { font-size:12px; color:var(--danger-tekst); margin-top:12px; background:var(--danger-bg); padding:10px 12px; border-radius:8px; text-align:left; }
  #app-layer .live-note { display:flex; gap:10px; align-items:flex-start; max-width:460px; margin:0 auto; font-size:13px; color:var(--fog); line-height:1.55; }
  /* Mini-dashboard (30 dagen) */
  #app-layer .live-dash { max-width:900px; margin:0 auto 24px; }
  #app-layer .ld-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
  #app-layer .ld-head h3 { margin:0; font-family:'Newsreader',Georgia,serif; font-size:18px; color:var(--foam); }
  #app-layer .ld-badge { display:inline-flex; align-items:center; gap:6px; font-family:'SF Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.06em; color:var(--ok-tekst); }
  #app-layer .ld-badge .lb-dot { width:6px; height:6px; border-radius:50%; background:#5F8A72; animation:livePuls 2s infinite; }
  #app-layer .nav a .nav-live-dot { margin-left:auto; color:var(--ok-tekst); font-size:9px; animation:livePuls 2s infinite; }
  /* Historie-scherm */
  #app-layer .hist-wrap { max-width:780px; }
  #app-layer .hist-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
  #app-layer .hist-head h3 { margin:0; font-family:'Newsreader',Georgia,serif; font-size:19px; color:var(--foam); }
  #app-layer .hist-sub { font-family:'SF Mono',monospace; font-size:11.5px; color:var(--fog); }
  #app-layer .hist-range { display:flex; gap:4px; flex-shrink:0; }
  #app-layer .hist-r-btn { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; color:var(--fog); background:var(--hull-2); border:1px solid var(--line); border-radius:8px; padding:6px 11px; cursor:pointer; transition:all .12s; }
  #app-layer .hist-r-btn:hover { color:var(--foam); }
  #app-layer .hist-r-btn.active { color:#fff; background:var(--beam-knop); border-color:var(--signal); }
  /* Tijdsbereik op Cijfers. Hergebruikt .hist-range/.hist-r-btn hierboven, dus
     de knoppen zien er overal in de app hetzelfde uit. Alleen de omlijsting
     eromheen is nieuw: op smalle schermen mogen de zes knoppen doorlopen. */
  #app-layer .iz-periode { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 18px; }
  #app-layer .iz-periode-lbl { font-family:'SF Mono',monospace; font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--fog); }
  /* min-width:0 is nodig: een flex-item krimpt standaard niet onder de breedte
     van zijn inhoud, waardoor de zes knoppen op mobiel buiten beeld liepen in
     plaats van te wikkelen. */
  #app-layer .iz-periode .hist-range { flex:1 1 auto; min-width:0; flex-wrap:wrap; }
  #app-layer .hist-card { background:var(--paper); border:1px solid var(--card-line); border-radius:16px; padding:20px; box-shadow:var(--card-shadow); }
  #app-layer .hist-chart { width:100%; }
  #app-layer .hist-svg { width:100%; height:auto; display:block; }
  #app-layer .hist-area { fill:var(--signal); opacity:0.10; }
  #app-layer .hist-line { fill:none; stroke:var(--signal); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
  #app-layer .hist-dot { fill:var(--signal); }
  #app-layer .hist-grid { stroke:var(--card-line); stroke-width:1; }
  #app-layer .hist-yl, #app-layer .hist-xl { fill:var(--ink-soft); font-family:'SF Mono',monospace; font-size:10px; }
  #app-layer .hist-foot { font-family:'SF Mono',monospace; font-size:11px; color:var(--fog); margin-top:12px; padding-top:12px; border-top:1px solid var(--card-line); }
  #app-layer .hist-prop { font-family:'SF Mono',monospace; font-size:11px; font-weight:600; fill:var(--beam-tekst); }
  #app-layer .hist-geen { text-align:center; color:var(--fog); font-style:italic; font-size:13px; padding:60px 0; }
  #app-layer .hist-leeg { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:var(--fog); line-height:1.55; background:var(--paper); border:1px solid var(--card-line); border-radius:14px; padding:18px; box-shadow:var(--card-shadow); }
  /* Koers uitgelegd */
  /* Koers-blok onder Inzichten */
  #app-layer .koers-block { margin-bottom:20px; }
  #app-layer .koers-head h3 { font-size:19px; font-weight:700; margin:0 0 4px; color:var(--foam); }
  #app-layer .koers-head p { font-size:13px; color:var(--fog); margin:0 0 16px; max-width:620px; line-height:1.5; }
  #app-layer .koers-cijfers { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
  #app-layer .kc-card { background:var(--hull); border:1px solid var(--line); border-radius:13px; padding:14px 15px; position:relative; }
  #app-layer .kc-card.kc-totaal { background:linear-gradient(160deg,#243b4e,#1c2f3f); border-color:#33586e; grid-column:span 2; }
  #app-layer .kc-top { display:flex; align-items:center; gap:6px; margin-bottom:10px; }
  #app-layer .kc-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  #app-layer .kc-label { font-size:11.5px; font-weight:600; color:var(--mist); letter-spacing:0.01em; flex:1; min-width:0; }
  #app-layer .kc-totaal .kc-label { color:var(--foam); font-weight:700; text-transform:uppercase; font-size:10px; letter-spacing:0.08em; }
  #app-layer .kc-num { font-family:'Bebas Neue',sans-serif; font-size:38px; line-height:0.9; color:var(--foam); letter-spacing:0.02em; }
  #app-layer .kc-totaal .kc-num { font-size:52px; color:var(--ok-tekst); }
  #app-layer .kc-base { font-family:'SF Mono',monospace; font-size:9.5px; color:var(--fog); margin-top:6px; letter-spacing:0.04em; }
  #app-layer .kc-delta { font-family:'SF Mono',monospace; font-size:11px; margin-top:7px; font-weight:700; }
  #app-layer .kc-delta .kc-vs { font-weight:400; color:var(--fog); font-size:9.5px; }
  #app-layer .kc-delta.up { color:var(--ok-tekst); } #app-layer .kc-delta.dn { color:var(--danger-tekst); } #app-layer .kc-delta.nt { color:var(--fog); }
  #app-layer .kc-info { position:relative; width:15px; height:15px; border-radius:50%; background:var(--line); color:var(--mist); font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; cursor:help; flex-shrink:0; font-family:'Inter',sans-serif; }
  #app-layer .kc-tip { position:absolute; bottom:calc(100% + 8px); right:-6px; width:230px; background:var(--abyss); color:var(--mist); border:1px solid var(--line); border-radius:11px; padding:11px 13px; font-size:11px; line-height:1.5; font-weight:400; box-shadow:0 12px 40px -8px rgba(0,0,0,0.5); opacity:0; visibility:hidden; transition:opacity .15s,visibility .15s; z-index:80; text-align:left; }
  #app-layer .kc-info:hover .kc-tip, #app-layer .kc-info:focus .kc-tip { opacity:1; visibility:visible; }
  #app-layer .koers-uitleg { background:var(--hull); border:1px solid var(--line); border-radius:14px; margin-bottom:24px; overflow:hidden; }
  #app-layer .koers-uitleg > summary { display:flex; align-items:center; justify-content:space-between; padding:15px 20px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--foam); list-style:none; }
  #app-layer .koers-uitleg > summary::-webkit-details-marker { display:none; }
  #app-layer .koers-uitleg > summary svg { width:18px; height:18px; color:var(--fog); transition:transform .2s; }
  #app-layer .koers-uitleg[open] > summary svg { transform:rotate(180deg); }
  #app-layer .koers-uitleg-body { padding:4px 20px 20px; }
  #app-layer .koers-uitleg-body .kx-card:last-child { margin-bottom:0; }
  #app-layer .kx-card { background:var(--paper); border:1px solid var(--card-line); border-radius:16px; padding:22px; margin-bottom:16px; box-shadow:var(--card-shadow); }
  #app-layer .kx-label { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:14px; }
  #app-layer .kx-hero { display:flex; align-items:center; gap:24px; }
  #app-layer .kx-big { display:flex; align-items:center; gap:14px; flex-shrink:0; }
  #app-layer .kx-big-num { font-family:'Newsreader',Georgia,serif; font-size:44px; font-weight:600; color:var(--ink-soft); line-height:1; }
  #app-layer .kx-big-num.kx-grown { color:var(--beam-tekst); }
  #app-layer .kx-arrow { font-size:24px; color:var(--fog); }
  #app-layer .kx-hero-txt h3 { margin:0 0 6px; font-family:'Newsreader',Georgia,serif; font-size:18px; color:var(--foam); }
  #app-layer .kx-hero-txt p { margin:0; font-size:13.5px; line-height:1.6; color:var(--ink); }
  #app-layer .kx-example { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
  #app-layer .kx-ex-row { display:grid; grid-template-columns:110px 1fr auto; align-items:center; gap:14px; }
  #app-layer .kx-ex-when { font-size:12px; color:var(--fog); }
  #app-layer .kx-ex-bar { height:12px; background:var(--paper-inset); border-radius:6px; overflow:hidden; }
  #app-layer .kx-ex-bar i { display:block; height:100%; background:var(--beam); opacity:0.55; border-radius:6px; }
  #app-layer .kx-ex-val { font-size:12.5px; color:var(--ink); white-space:nowrap; }
  #app-layer .kx-ex-note { margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.55; font-style:italic; }
  #app-layer .kx-steps { display:flex; flex-direction:column; gap:8px; }
  #app-layer .kx-step { display:flex; align-items:flex-start; gap:12px; }
  #app-layer .kx-step-n { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--beam-knop); color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
  #app-layer .kx-step-t { font-size:13.5px; line-height:1.5; color:var(--ink); padding-top:1px; }
  #app-layer .kx-step-arr { color:var(--fog); margin-left:10px; font-size:13px; }
  #app-layer .kx-deeper { margin-top:24px; }
  #app-layer .kx-deeper-head { font-family:'SF Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; color:var(--fog); margin-bottom:12px; }
  #app-layer .kx-acc { background:var(--paper); border:1px solid var(--card-line); border-radius:12px; margin-bottom:8px; overflow:hidden; }
  #app-layer .kx-acc summary { cursor:pointer; padding:14px 18px; font-size:13.5px; font-weight:600; color:var(--foam); list-style:none; display:flex; align-items:center; justify-content:space-between; }
  #app-layer .kx-acc summary::-webkit-details-marker { display:none; }
  #app-layer .kx-acc summary::after { content:'+'; font-size:18px; color:var(--fog); font-weight:400; }
  #app-layer .kx-acc[open] summary::after { content:'−'; }
  #app-layer .kx-acc[open] summary { border-bottom:1px solid var(--card-line); }
  #app-layer .kx-acc-body { padding:14px 18px; }
  #app-layer .kx-acc-body p { margin:0 0 10px; font-size:13px; line-height:1.6; color:var(--ink); }
  #app-layer .kx-acc-body p:last-child { margin-bottom:0; }
  #app-layer .kx-acc-honest summary { color:var(--beam-tekst); }
  #app-layer .hv-hint { cursor:help; opacity:0.6; font-size:11px; }
  #app-layer .ld-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-bottom:16px; }
  #app-layer .ld-grid-3 { grid-template-columns:1fr 1fr 1fr; }
  /* kerngetallen */
  #app-layer .ld-kpis { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:16px; }
  /* periodekiezer */
  #app-layer .ld-period { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  #app-layer .ld-period-sel { font-family:'Inter',sans-serif; font-size:13px; font-weight:600; color:var(--foam); background:var(--hull-2); border:1px solid var(--line); border-radius:9px; padding:9px 14px; cursor:pointer; }
  #app-layer .ld-period-sel:focus { outline:2px solid var(--signal); outline-offset:1px; }
  #app-layer .ld-period-vgl { font-size:12px; color:var(--fog); font-style:italic; }
  /* vergelijkingspijltjes */
  #app-layer .ld-kpi-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  #app-layer .ld-vgl { font-family:'SF Mono',monospace; font-size:11px; font-weight:700; padding:2px 7px; border-radius:20px; white-space:nowrap; }
  #app-layer .ld-vgl-op { color:var(--ok-tekst); background:var(--ok-bg); }
  #app-layer .ld-vgl-neer { color:#B4402F; background:rgba(180,64,47,0.12); }
  #app-layer .ld-vgl-neutraal { color:var(--fog); background:var(--paper-inset); font-weight:500; font-style:normal; }
  #app-layer .ld-kpi { background:var(--paper); border:1px solid var(--card-line); border-radius:14px; padding:18px; box-shadow:var(--card-shadow); }
  #app-layer .ld-kpi-v { font-family:'Newsreader',Georgia,serif; font-size:34px; font-weight:600; color:var(--ink); line-height:1; }
  #app-layer .ld-kpi-l { font-size:13px; color:var(--ink); font-weight:600; margin-top:6px; }
  #app-layer .ld-kpi-s { font-size:11.5px; color:var(--ink-soft); margin-top:3px; }
  /* weekdag-grafiek */
  #app-layer .ld-weekdag { display:flex; align-items:flex-end; gap:8px; height:110px; }
  #app-layer .ld-wd { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
  #app-layer .ld-wd-bar-wrap { flex:1; width:100%; display:flex; align-items:flex-end; }
  #app-layer .ld-wd-bar { width:100%; background:var(--beam); border-radius:3px 3px 0 0; min-height:3px; transition:height .3s; }
  #app-layer .ld-wd-bar.zwak { background:var(--danger); }
  #app-layer .ld-wd-label { font-family:'SF Mono',monospace; font-size:10px; color:var(--ink-soft); margin-top:6px; }
  #app-layer .ld-card { background:var(--paper); border:1px solid var(--card-line); border-radius:14px; padding:18px; box-shadow:var(--card-shadow); }
  #app-layer .ld-card-label { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin-bottom:14px; }
  /* info-icoon met uitleg-tooltip (wolkje) */
  #app-layer .ld-info { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; background:var(--paper-inset); color:var(--ink-soft); font-family:Georgia,serif; font-style:italic; font-size:10px; font-weight:700; margin-left:6px; cursor:help; position:relative; vertical-align:middle; text-transform:none; letter-spacing:0; }
  #app-layer .ld-info:hover, #app-layer .ld-info:focus { background:var(--beam-knop); color:#fff; outline:none; }
  #app-layer .ld-tip { position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:280px; background:var(--kaart, #fff); color:var(--foam); border:1px solid var(--line); border-radius:12px; padding:14px 15px; box-shadow:0 12px 40px -8px rgba(0,0,0,0.5); opacity:0; visibility:hidden; transition:opacity .15s, visibility .15s; z-index:80; font-family:'Inter',sans-serif; font-weight:400; text-transform:none; letter-spacing:0; }
  #app-layer .ld-info:hover .ld-tip, #app-layer .ld-info:focus .ld-tip { opacity:1; visibility:visible; }
  #app-layer .ld-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:7px solid transparent; border-top-color:var(--abyss); }
  #app-layer .ld-tip > b { display:block; font-size:12.5px; color:var(--foam); margin-bottom:8px; }
  #app-layer .ld-tip-row { display:block; font-size:11.5px; line-height:1.5; color:var(--mist); margin-bottom:7px; }
  #app-layer .ld-tip-row:last-child { margin-bottom:0; }
  #app-layer .ld-tip-row b { color:var(--beam-tekst); }
  /* grotere info-variant bij de dashboard-titel + breder wolkje */
  #app-layer .ld-info-lg { width:18px; height:18px; font-size:11px; margin-left:8px; }
  #app-layer .ld-head h3 { display:inline-flex; align-items:center; }
  #app-layer .ld-tip-wide { width:320px; }
  #app-layer .ld-tip-wide, #app-layer .ld-info-lg .ld-tip { text-align:left; }
  /* grafiek */
  #app-layer .ld-chart { display:flex; align-items:flex-end; gap:2px; height:110px; }
  #app-layer .ld-bar-wrap { flex:1; height:100%; display:flex; align-items:flex-end; }
  #app-layer .ld-bar { width:100%; background:var(--beam); border-radius:2px 2px 0 0; min-height:2px; transition:height .3s; }
  #app-layer .ld-chart-foot { font-family:'SF Mono',monospace; font-size:10.5px; color:var(--fog); margin-top:10px; }
  /* lijstjes */
  #app-layer .ld-list { display:flex; flex-direction:column; gap:12px; }
  #app-layer .ld-row-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; }
  #app-layer .ld-row-label { font-size:12.5px; color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #app-layer .ld-row-waarde { font-family:'SF Mono',monospace; font-size:12px; color:var(--ink-soft); font-weight:600; flex-shrink:0; }
  #app-layer .ld-row-track { height:5px; background:var(--paper-inset); border-radius:4px; overflow:hidden; }
  #app-layer .ld-row-fill { height:100%; background:var(--beam); border-radius:4px; }
  #app-layer .ld-leeg { font-size:12px; color:var(--fog); font-style:italic; padding:14px 0; text-align:center; }
  /* klik-events kaart */
  #app-layer .ld-events-card { margin-top:16px; }
  #app-layer .ld-events { display:grid; grid-template-columns:1fr 1fr; gap:14px 24px; }
  #app-layer .ld-ev-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; }
  #app-layer .ld-ev-label { font-size:12.5px; color:var(--ink); font-weight:500; }
  #app-layer .ld-ev-fase { font-family:'SF Mono',monospace; font-size:9.5px; color:var(--fog); margin-left:8px; padding:1px 6px; background:var(--paper-inset); border-radius:10px; white-space:nowrap; }
  #app-layer .ld-ev-aantal { font-family:'SF Mono',monospace; font-size:12px; color:var(--ink-soft); font-weight:600; flex-shrink:0; }

  #app-layer /* main */
  /* Het werkvel: bijna wit, eigen ronding, los van de rail. */
  .main {
    background:var(--vel);
    border-radius:18px;
    padding:0; overflow-y:auto; overflow-x:hidden;
    min-width:0;
  }
  /* ===== DE KOP =====
     Ligt op het paneel: geen eigen vlak, geen rand, geen schaduw. Het groengrijs
     is de achtergrond. Alles wat hier klikbaar is, kleurt oranje bij hover,
     precies zoals in de rail. */
  #app-layer .topbar {
    display:flex; align-items:center; gap:14px;
    padding:6px 10px 4px;
    background:transparent; border:none; box-shadow:none;
    flex-wrap:wrap;
  }
  #app-layer .tb-titel { min-width:0; }
  #app-layer .topbar h1 { color:#16211D; }
  #app-layer .topbar .crumb { color:#4C5A53; }
  #app-layer .tb-right { display:flex; align-items:center; gap:9px; margin-left:auto; }

  /* Periode-pil: een licht vlak op het paneel, zoals in de referentie. */
  #app-layer .topbar .period {
    background:rgba(255,255,255,0.55); border:none; border-radius:20px;
    padding:8px 15px; font-size:13px; color:#3E4A44;
    display:flex; align-items:center; gap:8px; white-space:nowrap;
    transition:background .15s, color .15s;
  }
  #app-layer .topbar .period:hover { background:var(--beam-knop); color:#fff; cursor:default; }
  #app-layer .topbar .period:hover .dot { background:#fff; }
  #app-layer .topbar .period .dot { width:7px; height:7px; border-radius:50%; background:var(--beam); }

  /* Taalknop: zelfde behandeling. */
  #app-layer .topbar .lang-btn {
    background:rgba(255,255,255,0.55); border:none; border-radius:20px;
    padding:8px 14px; font-family:inherit; font-size:12.5px; color:#3E4A44;
    cursor:pointer; transition:background .15s, color .15s;
  }
  #app-layer .topbar .lang-btn:hover { background:var(--beam-knop); color:#fff; }
  #app-layer .topbar .lang-btn:hover .lang-opt,
  #app-layer .topbar .lang-btn:hover .lang-sep { color:#fff; }
  #app-layer .topbar .lang-btn:focus-visible { outline:2px solid var(--beam); outline-offset:2px; }
  #app-layer .topbar .lang-opt { color:#7A857F; }
  #app-layer .topbar .lang-opt.active { color:#16211D; font-weight:600; }
  #app-layer .topbar .lang-sep { color:#8A948E; }
  #app-layer .topbar h1 { font-size:18px; font-weight:600; margin:0; letter-spacing:-0.01em; color:#16211D; }
  #app-layer .topbar .crumb { font-size:12px; color:#4C5A53; }
  #app-layer .topbar .period {
    margin-left:auto; font-size:12.5px; color:var(--mist); border:1px solid var(--line);
    background:var(--hull); padding:7px 13px; border-radius:8px; display:flex; align-items:center; gap:8px;
  }
  #app-layer .topbar .period .dot { width:7px; height:7px; border-radius:50%; background:var(--beam); box-shadow:0 0 8px var(--signal); }
  #app-layer .topbar .actions { margin-left:auto; display:flex; gap:10px; align-items:center; }
  #app-layer .tb-right { margin-left:auto; display:flex; gap:14px; align-items:center; }
  #app-layer .lang-btn { display:inline-flex; align-items:center; gap:5px; background:var(--hull-2); border:1px solid var(--line); border-radius:8px; padding:5px 10px; cursor:pointer; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; }
  #app-layer .lang-btn .lang-opt { color:var(--fog); transition:color .12s; }
  #app-layer .lang-btn .lang-opt.active { color:var(--beam-tekst); }
  #app-layer .lang-btn .lang-sep { color:var(--fog); }
  #app-layer .lang-btn:hover .lang-opt:not(.active) { color:var(--foam); }
  /* Site-taalknop (marketingpagina-nav) */
  .site-lang { display:inline-flex; align-items:center; gap:4px; background:transparent; border:1px solid rgba(255,255,255,0.18); border-radius:8px; padding:5px 9px; cursor:pointer; font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:0.03em; color:inherit; }
  .site-lang .lang-opt { opacity:0.5; transition:opacity .12s; }
  .site-lang .lang-opt.active { opacity:1; color:var(--beam,#1D3B2A); }
  .site-lang .lang-sep { opacity:0.35; }
  .site-lang:hover .lang-opt:not(.active) { opacity:0.8; }
  #app-layer .btn { font-size:12.5px; padding:9px 15px; border-radius:9px; font-weight:600; cursor:pointer; border:1px solid transparent; transition:all .13s; }
  #app-layer .btn-ghost { background:var(--hull); color:var(--mist); border-color:var(--line); }
  #app-layer .btn-ghost:hover { color:var(--foam); border-color:var(--violet); }
  #app-layer .btn-approve { background:var(--ok); color:#fff; }
  #app-layer .btn-approve:hover { background:#5fd699; }
  #app-layer .btn-primary { background:var(--beam-knop); color:#fff; }
  #app-layer .btn-primary:hover { background:#1D3B2A; }

  #app-layer .screen { display:none; padding:28px 30px 60px; max-width:1080px; animation:fade .35s ease; }
  #app-layer .screen.show { display:block; }
  @keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }

  #app-layer .lead-line { color:var(--mist); font-size:15px; max-width:62ch; margin:0 0 24px; }

  #app-layer /* ---------- hero ---------- */
  .hero {
    background:linear-gradient(160deg,var(--hull-2),var(--hull));
    border:1px solid var(--line); border-radius:18px; padding:30px 32px; margin-bottom:22px;
    position:relative; overflow:hidden;
  }
  #app-layer .hero .course-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:0.9; }
  #app-layer .hero-grid { display:grid; grid-template-columns:auto 1fr; gap:34px; align-items:center; position:relative; z-index:2; }
  #app-layer .gauge-wrap { position:relative; width:210px; height:210px; }
  #app-layer .gauge-num { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  #app-layer .gauge-num .big { font-size:54px; font-weight:700; letter-spacing:-0.03em; line-height:1; }
  #app-layer .gauge-num .lbl { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fog); margin-top:6px; }
  #app-layer .gauge-num .delta { font-size:13px; color:var(--ok-tekst); margin-top:9px; font-weight:600; }
  #app-layer .hero-side .eyebrow { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--beam-tekst); margin:0 0 10px; }
  #app-layer .hero-side h2 { font-size:25px; font-weight:600; margin:0 0 10px; letter-spacing:-0.015em; line-height:1.15; }
  #app-layer .hero-side p { color:var(--mist); margin:0 0 18px; font-size:14.5px; max-width:46ch; }
  #app-layer .pulse-row { display:flex; gap:10px; flex-wrap:wrap; }
  #app-layer .pulse { background:var(--abyss); border:1px solid var(--line); border-radius:11px; padding:11px 15px; min-width:108px; }
  #app-layer .pulse .pn { font-size:20px; font-weight:600; }
  #app-layer .pulse .pl { font-size:11px; color:var(--fog); margin-top:2px; }
  #app-layer .pulse .pd { font-size:11px; margin-top:4px; font-weight:600; }
  #app-layer .pd.up { color:var(--ok-tekst); } #app-layer .pd.dn { color:var(--danger-tekst); } #app-layer .pd.nt { color:var(--warn-tekst); }

  #app-layer /* phase index strip */
  .phase-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:22px; }
  #app-layer .phase {
    background:var(--hull); border:1px solid var(--line); border-radius:13px; padding:15px 14px; position:relative; overflow:hidden;
  }
  #app-layer .phase .pf-top { display:flex; align-items:center; gap:7px; margin-bottom:11px; }
  #app-layer .phase .pf-dot { width:9px; height:9px; border-radius:50%; }
  #app-layer .phase .pf-name { font-size:11.5px; color:var(--mist); font-weight:500; }
  #app-layer .phase .pf-idx { font-size:27px; font-weight:700; letter-spacing:-0.02em; }
  #app-layer .phase .pf-bar { height:4px; border-radius:3px; background:var(--line); margin-top:10px; overflow:hidden; }
  #app-layer .phase .pf-bar i { display:block; height:100%; border-radius:3px; }
  #app-layer .phase .pf-trend { font-size:11px; margin-top:8px; color:var(--fog); }

  #app-layer /* Koers badge per fase */
  .phase .pf-koers {
    display:inline-flex; align-items:center; gap:5px;
    margin-top:9px;
    font-family:'SF Mono',ui-monospace,Menlo,monospace;
    font-size:10px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--fog);
  }
  #app-layer .phase .pf-koers .koers-val {
    font-size:13px; font-weight:700; letter-spacing:-0.01em;
    color:var(--foam);
    font-family:'Inter','Helvetica Neue',Arial,sans-serif;
    text-transform:none;
  }
  #app-layer .phase .pf-koers .koers-delta {
    font-size:10px; font-weight:600;
  }
  #app-layer .phase .pf-koers .koers-delta.up { color:var(--ok-tekst); }
  #app-layer .phase .pf-koers .koers-delta.dn { color:var(--danger-tekst); }
  #app-layer .phase .pf-koers .koers-delta.nt { color:var(--warn-tekst); }

  #app-layer /* card */
  .card { background:var(--paper); color:var(--ink); border-radius:16px; padding:22px 24px; margin-bottom:18px; border:1px solid var(--card-line); box-shadow:var(--card-shadow); }
  #app-layer .card h3 { margin:0 0 4px; font-size:16px; font-weight:600; }
  #app-layer .card .csub { color:var(--ink-soft); font-size:13px; margin:0 0 18px; }
  #app-layer .card-dark { background:var(--hull); color:var(--foam); border-color:var(--line); }
  #app-layer .card-dark .csub { color:var(--fog); }

  #app-layer /* funnel table */
  .ftbl { width:100%; border-collapse:collapse; font-size:13px; }
  #app-layer .ftbl th { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft);
    font-weight:700; padding:7px 5px; border-bottom:1.5px solid var(--ink); text-align:center; }
  #app-layer .ftbl th.l { text-align:left; }
  #app-layer .ftbl td { padding:7px 5px; border-bottom:1px solid var(--card-line); text-align:center; font-variant-numeric:tabular-nums; }
  #app-layer .ftbl td.l { text-align:left; font-weight:600; }
  #app-layer .ftbl td.l .s { font-family:'SF Mono',monospace; font-size:10px; color:var(--ink-soft); font-weight:400; display:block; }
  #app-layer .conv { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .heat { display:block; border-radius:5px; padding:3px 0; color:#222; }

  #app-layer /* advice cards */
  .adv { border:1px solid var(--card-line); border-left-width:3px; border-radius:0 13px 13px 0; padding:17px 20px; margin-bottom:14px; background:var(--paper); color:var(--ink); }
  #app-layer .adv.hoog { border-left-color:var(--danger); }
  #app-layer .adv.kans { border-left-color:var(--ok); }
  #app-layer .adv.dag { border-left-color:var(--warn); }
  #app-layer .adv-top { display:flex; align-items:center; gap:10px; margin-bottom:9px; flex-wrap:wrap; }
  #app-layer .sev { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:3px 9px; border-radius:5px; color:#fff; }
  #app-layer .sev.hoog {background:var(--danger);} #app-layer .sev.kans {background:var(--ok);} #app-layer .sev.dag {background:var(--warn);}
  #app-layer .rid { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .fase-tag { margin-left:auto; font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:4px; color:#fff; }
  #app-layer .adv-page { font-weight:600; font-size:16px; margin-bottom:4px; }
  #app-layer .adv-diag { font-size:14px; color:var(--ink-soft); margin-bottom:13px; }
  #app-layer .pb { border-top:1px solid var(--card-line); }
  #app-layer .pb-item { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--card-line); }
  #app-layer .pb-item:last-child {border-bottom:none;}
  #app-layer .pb-rail { flex-shrink:0; width:92px; font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--beam-tekst); padding-top:2px; }
  #app-layer .pb-body .ck { font-weight:600; font-size:13.5px; margin-bottom:2px; }
  #app-layer .pb-body .how { color:var(--ink-soft); font-size:12.5px; margin-bottom:3px; }
  #app-layer .pb-body .fix { font-size:13px; }
  #app-layer .pb-body .norm { font-family:'SF Mono',monospace; font-size:10.5px; background:#EAF1F4; padding:1px 6px; border-radius:4px; color:var(--beam-tekst); }
  #app-layer .a11y { display:inline-block; font-family:'SF Mono',monospace; font-size:8.5px; font-weight:700; background:#EDE9F6; color:#6A5A9E; padding:1px 6px; border-radius:4px; margin-left:5px; }

  #app-layer /* tasks */
  .task { display:flex; gap:13px; align-items:flex-start; background:var(--paper); color:var(--ink); border:1px solid var(--card-line); border-radius:12px; padding:15px 17px; margin-bottom:11px; }
  #app-layer .task .box { flex-shrink:0; width:22px; height:22px; border:2px solid var(--signal-dim); border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:13px; color:#fff; cursor:pointer; transition:all .15s; background:#fff; }
  #app-layer .task .box.done { background:var(--ok); border-color:var(--ok); }
  #app-layer .task .box.open { color:var(--beam-tekst); }
  #app-layer .task .tb { flex:1; }
  #app-layer .task .tt { font-weight:600; margin-bottom:2px; font-size:14.5px; }
  #app-layer .task .tm { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .task .stat-pill { font-family:'SF Mono',monospace; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
  #app-layer .sp-open { background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .sp-meten { background:var(--warn-bg); color:var(--warn-tekst); }
  #app-layer .sp-pos { background:var(--ok-bg); color:var(--ok-tekst); }

  #app-layer /* ===== CAPACITEITSPLANNER ===== */
  .cap-planner { background:linear-gradient(150deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:16px; padding:20px 22px; margin-bottom:20px; }
  #app-layer /* team-capaciteit */
  .cap-team-total { font-size:26px; font-weight:800; color:var(--foam); line-height:1; margin:4px 0 6px; }
  #app-layer .cap-team-link { font-size:12px; color:var(--beam-tekst); text-decoration:none; font-weight:600; }
  #app-layer .cap-team-link:hover { text-decoration:underline; }
  #app-layer .cap-team { display:flex; flex-direction:column; gap:10px; margin:16px 0 4px; }
  #app-layer .cap-mkt { display:flex; align-items:center; gap:11px; }
  #app-layer .cm-avatar { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; flex-shrink:0; font-family:'SF Mono',monospace; }
  #app-layer .cm-body { flex:1; min-width:0; }
  #app-layer .cm-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; }
  #app-layer .cm-naam { font-size:13px; font-weight:600; color:var(--foam); }
  #app-layer .cm-uren { font-family:'SF Mono',monospace; font-size:11px; color:var(--fog); }
  #app-layer .cm-uren.over { color:var(--danger-tekst); font-weight:700; }
  #app-layer .cm-bar { height:6px; background:var(--abyss); border:1px solid var(--line); border-radius:5px; overflow:hidden; }
  #app-layer .cm-fill { height:100%; border-radius:5px; transition:width .3s; }

  #app-layer /* taak-toewijzing (avatar + wissel) */
  .taak-right { display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; }
  #app-layer .taak-assign { display:inline-flex; align-items:center; gap:7px; padding:4px 9px 4px 4px; border-radius:20px; border:1px solid var(--line); background:var(--hull); cursor:pointer; transition:all .13s; }
  #app-layer .taak-assign:hover { border-color:var(--signal-dim); }
  #app-layer .taak-assign.none { border-style:dashed; }
  #app-layer .ta-avatar { width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:9.5px; font-weight:800; color:#fff; flex-shrink:0; font-family:'SF Mono',monospace; }
  #app-layer .ta-avatar.none { background:var(--hull-2); color:var(--fog); border:1px dashed var(--line); }
  #app-layer .ta-naam { font-size:12px; font-weight:600; color:var(--mist); white-space:nowrap; }
  #app-layer .ta-pin { font-size:10px; }
  #app-layer .ta-chev { width:13px; height:13px; stroke:var(--fog); }
  #app-layer /* wissel-menu */
  .task.has-menu { position:relative; z-index:20; }
  #app-layer .wissel-menu { position:absolute; top:calc(100% + 6px); right:0; width:300px; background:var(--hull-2); border:1px solid var(--line); border-radius:12px; box-shadow:0 20px 50px -12px rgba(0,0,0,0.6); padding:8px; z-index:30; }
  #app-layer .wm-head { font-family:'SF Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--fog); padding:6px 8px 8px; }
  #app-layer .wm-row { display:flex; align-items:center; gap:10px; width:100%; padding:8px; border:none; background:none; border-radius:9px; cursor:pointer; text-align:left; transition:background .12s; }
  #app-layer .wm-row:hover { background:var(--hull); }
  #app-layer .wm-row.actief { background:var(--signal-dim); }
  #app-layer .wm-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; font-family:'SF Mono',monospace; }
  #app-layer .wm-info { flex:1; min-width:0; }
  #app-layer .wm-naam { display:block; font-size:13px; font-weight:600; color:var(--foam); }
  #app-layer .wm-skills { display:block; font-size:10.5px; color:var(--fog); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  #app-layer .wm-match { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--hull); color:var(--fog); flex-shrink:0; }
  #app-layer .wm-match.ok { background:rgba(79,197,138,0.18); color:var(--ok-dim); }
  #app-layer .wm-row.actief .wm-naam, #app-layer .wm-row.actief .wm-skills { color:#fff; }
  #app-layer .wm-row.actief .wm-match { background:rgba(28, 40, 34, 0.110); color:#fff; }
  #app-layer .wm-reset { width:100%; margin-top:4px; padding:8px; border:none; border-top:1px solid var(--line); background:none; color:var(--beam-tekst); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; border-radius:0 0 9px 9px; }
  #app-layer .wm-reset:hover { background:var(--hull); }

  #app-layer /* ===== TEAM-scherm ===== */
  .team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px; margin-bottom:16px; }
  #app-layer .team-card { background:var(--paper); border:1px solid var(--card-line); border-radius:14px; padding:18px; box-shadow:var(--card-shadow); }
  #app-layer .team-card.editing { border-color:var(--signal-dim); }
  #app-layer .tc-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
  #app-layer .tc-avatar { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; color:#fff; flex-shrink:0; font-family:'SF Mono',monospace; }
  #app-layer .tc-id { flex:1; min-width:0; }
  #app-layer .tc-naam { font-size:16px; font-weight:700; color:var(--ink); }
  #app-layer .tc-uren { font-size:12px; color:var(--ink-soft); margin-top:2px; }
  #app-layer .tc-edit { width:30px; height:30px; border-radius:8px; border:1px solid var(--card-line); background:var(--paper-2); color:var(--ink-soft); cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .tc-edit:hover { border-color:var(--signal-dim); color:var(--violet-dim); }
  #app-layer .tc-edit svg { width:15px; height:15px; }
  #app-layer .tc-skills-label { font-family:'SF Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); font-weight:700; margin-bottom:7px; }
  #app-layer .tc-skills { display:flex; flex-wrap:wrap; gap:6px; }
  #app-layer .tm-skill { font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:20px; background:var(--inset,#F4F5F0); color:var(--violet-dim); }
  #app-layer .tm-skill.none { background:var(--paper-inset); color:var(--fog); font-style:italic; }
  #app-layer /* team edit-card */
  .tce-row { margin-bottom:14px; }
  #app-layer .tce-row label { display:block; font-family:'SF Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); font-weight:700; margin-bottom:6px; }
  #app-layer .tce-hint { text-transform:none; letter-spacing:0; font-weight:400; color:var(--fog); }
  #app-layer .tce-input { width:100%; font-family:inherit; font-size:14px; color:var(--ink); background:#fff; border:1px solid var(--card-line); border-radius:8px; padding:9px 11px; }
  #app-layer .tce-input.short { width:90px; }
  #app-layer .tce-input:focus { outline:none; border-color:var(--signal-dim); }
  #app-layer .tm-skill-toggles { display:flex; flex-wrap:wrap; gap:7px; }
  #app-layer .tm-skill-toggle { font-family:inherit; font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px; border:1.5px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .13s; }
  #app-layer .tm-skill-toggle:hover { border-color:var(--signal-dim); }
  #app-layer .tm-skill-toggle.on { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); color:var(--violet-dim); }
  #app-layer .tce-actions { display:flex; gap:9px; margin-top:16px; flex-wrap:wrap; }
  #app-layer .tce-save { font-family:inherit; font-size:13px; font-weight:700; padding:9px 18px; border-radius:9px; border:none; background:var(--beam-knop); color:#fff; cursor:pointer; }
  #app-layer .tce-save:hover { background:var(--violet-dim); }
  #app-layer .tce-cancel { font-family:inherit; font-size:13px; font-weight:600; padding:9px 16px; border-radius:9px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; }
  #app-layer .tce-cancel:hover { border-color:var(--ink-soft); }
  #app-layer .tce-del { font-family:inherit; font-size:13px; font-weight:600; padding:9px 16px; border-radius:9px; border:1px solid transparent; background:none; color:var(--danger-tekst); cursor:pointer; margin-left:auto; }
  #app-layer .tce-del:hover { background:#FBEAE5; }
  #app-layer .team-add-btn { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:14px; font-weight:600; padding:11px 20px; border-radius:10px; border:1.5px dashed var(--line); background:var(--hull); color:var(--mist); cursor:pointer; transition:all .14s; }
  #app-layer .team-add-btn:hover { border-color:var(--signal-dim); color:var(--foam); background:var(--hull-2); }
  #app-layer .team-add-btn svg { width:16px; height:16px; }
  #app-layer /* ===== AFGEROND-scherm (trackrecord) ===== */
  .nav a .afg-badge { margin-left:auto; font-family:'SF Mono',monospace; font-size:10px; font-weight:700; min-width:18px; height:18px; padding:0 5px; border-radius:20px; background:var(--ok-dim); color:#fff; display:inline-flex; align-items:center; justify-content:center; }
  #app-layer .afg-summary { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; }
  #app-layer .afg-stat { background:var(--hull); border:1px solid var(--line); border-radius:14px; padding:14px 20px; min-width:120px; }
  #app-layer .afg-stat .as-n { font-size:26px; font-weight:800; color:var(--foam); line-height:1; }
  #app-layer .afg-stat .as-l { font-size:12px; color:var(--fog); margin-top:5px; }
  #app-layer .afg-card { display:flex; align-items:flex-start; gap:14px; background:var(--paper); border:1px solid var(--card-line); border-radius:14px; padding:16px 18px; margin-bottom:10px; box-shadow:var(--card-shadow); }
  #app-layer .afg-card.vers { animation:afgIn .5s ease; border-color:var(--ok-dim); }
  @keyframes afgIn { from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;} }
  #app-layer .afg-check { width:30px; height:30px; border-radius:50%; background:var(--ok-bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
  #app-layer .afg-check svg { width:16px; height:16px; stroke:var(--ok-dim); fill:none; }
  #app-layer .afg-body { flex:1; min-width:0; }
  #app-layer .afg-advies { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.03em; text-transform:uppercase; color:var(--violet-dim); font-weight:700; margin-bottom:4px; }
  #app-layer .afg-titel { font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.4; }
  #app-layer .afg-result { display:flex; align-items:flex-start; gap:8px; margin-top:9px; font-size:12.5px; color:var(--ok-dim); line-height:1.5; }
  #app-layer .afg-result svg { width:15px; height:15px; flex-shrink:0; margin-top:1px; }
  #app-layer .afg-result.pending { color:var(--fog); }
  #app-layer .afg-datum { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); flex-shrink:0; white-space:nowrap; }
  #app-layer .afg-empty { text-align:center; padding:50px 20px; color:var(--fog); font-size:14px; line-height:1.6; background:var(--hull); border:1px dashed var(--line); border-radius:14px; }
  #app-layer .task.archiverend { opacity:0.9; }
  #app-layer .archiverend-note { color:var(--ok-dim) !important; font-style:italic; }
  #app-layer .undo-archive { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:12px; font-weight:600; padding:6px 12px; border-radius:8px; border:1px solid var(--line); background:var(--hull); color:var(--mist); cursor:pointer; flex-shrink:0; transition:all .13s; align-self:center; }
  #app-layer .undo-archive:hover { border-color:var(--signal-dim); color:var(--foam); }
  #app-layer .undo-archive svg { width:13px; height:13px; }
  #app-layer .taken-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
  #app-layer .taken-head h3 { margin:0; }
  #app-layer .taken-head .csub { margin:2px 0 0; }
  #app-layer .taken-sort { display:flex; align-items:center; gap:10px; flex-shrink:0; }
  #app-layer .taken-sort .ts-label { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--fog); }
  #app-layer .ts-toggle { display:inline-flex; background:var(--hull); border:1px solid var(--line); border-radius:9px; padding:3px; }
  #app-layer .ts-opt { font-family:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; border:none; background:none; color:var(--mist); cursor:pointer; border-radius:6px; transition:all .13s; white-space:nowrap; }
  #app-layer .ts-opt:hover { color:var(--foam); }
  #app-layer .ts-opt.active { background:var(--beam-knop); color:#fff; }
  #app-layer .cap-top { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  #app-layer .cap-input-wrap { display:flex; align-items:center; gap:10px; }
  #app-layer .cap-input-wrap label { font-size:13px; color:var(--mist); font-weight:500; }
  #app-layer .cap-stepper { display:flex; align-items:center; background:var(--abyss); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
  #app-layer .cap-stepper button { width:34px; height:38px; background:transparent; border:none; color:var(--mist); font-size:18px; cursor:pointer; transition:background .15s; font-family:inherit; }
  #app-layer .cap-stepper button:hover { background:var(--hull-2); color:var(--foam); }
  #app-layer .cap-stepper input { width:52px; height:38px; background:transparent; border:none; color:var(--foam); font-size:17px; font-weight:700; text-align:center; font-family:'SF Mono',monospace; -moz-appearance:textfield; }
  #app-layer .cap-stepper input::-webkit-outer-spin-button, #app-layer .cap-stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
  #app-layer .cap-unit { font-size:13px; color:var(--fog); }
  #app-layer .cap-summary { margin-left:auto; text-align:right; }
  #app-layer .cap-summary .cs-big { font-size:15px; font-weight:700; color:var(--foam); }
  #app-layer .cap-summary .cs-sub { font-size:11.5px; color:var(--fog); font-family:'SF Mono',monospace; margin-top:2px; }
  #app-layer .cap-bar-wrap { margin-top:16px; }
  #app-layer .cap-bar { height:12px; border-radius:7px; background:var(--abyss); overflow:hidden; display:flex; }
  #app-layer .cap-bar .seg { height:100%; transition:width .4s ease; }
  #app-layer .cap-bar .seg.planned { background:linear-gradient(90deg,var(--signal),var(--signal-dim)); }
  #app-layer .cap-bar .seg.over { background:repeating-linear-gradient(45deg,var(--danger),var(--danger) 5px,#a8443d 5px,#a8443d 10px); }
  #app-layer .cap-legend { display:flex; gap:16px; margin-top:9px; font-family:'SF Mono',monospace; font-size:10.5px; color:var(--fog); flex-wrap:wrap; }
  #app-layer .cap-legend span { display:flex; align-items:center; gap:5px; }
  #app-layer .cap-legend .dot { width:9px; height:9px; border-radius:2px; display:inline-block; }
  #app-layer .cap-note { margin-top:12px; font-size:12.5px; color:var(--mist); display:flex; align-items:flex-start; gap:8px; line-height:1.5; }
  #app-layer .cap-note .ic-i { flex-shrink:0; width:17px; height:17px; border-radius:50%; background:var(--beam-knop); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; margin-top:1px; }

  #app-layer /* ===== DAG-SECTIES ===== */
  .day-section { margin-bottom:22px; }
  #app-layer .day-head { display:flex; align-items:center; gap:10px; margin:0 0 12px; }
  #app-layer .day-head .dh-pill { font-family:'SF Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; padding:4px 12px; border-radius:20px; }
  #app-layer .dh-vandaag { background:var(--beam-knop); color:#fff; }
  #app-layer .dh-morgen { background:#E7EDDF; color:var(--beam-tekst); border:1px solid var(--beam); }
  #app-layer .dh-week { background:var(--hull-2); color:var(--mist); border:1px solid var(--line); }
  #app-layer .dh-later { background:transparent; color:var(--fog); border:1px solid var(--line-soft); }
  #app-layer .day-head .dh-meta { font-family:'SF Mono',monospace; font-size:11px; color:var(--fog); }
  #app-layer .day-head .dh-line { flex:1; height:1px; background:var(--line-soft); }
  #app-layer .day-empty { font-size:12.5px; color:var(--fog); font-style:italic; padding:6px 2px 2px; }
  #app-layer .task .tm .hrs { color:var(--violet-dim); font-weight:700; }
  #app-layer .task.is-over { opacity:0.62; }
  #app-layer .task .deadline-tag { background:var(--danger-bg); color:var(--danger-tekst); }

  #app-layer /* ===== ADVIES-CHECK (afrond-paneel) ===== */
  .task.checking { display:block; }
  #app-layer .check-panel { margin-top:13px; padding-top:13px; border-top:1px dashed var(--card-line); }
  #app-layer .check-q { font-size:13px; font-weight:600; color:var(--ink); margin-bottom:10px; }
  #app-layer .check-opts { display:flex; gap:8px; flex-wrap:wrap; }
  #app-layer .check-opt { font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:9px; border:1.5px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .14s; display:flex; align-items:center; gap:7px; }
  #app-layer .check-opt:hover { border-color:var(--signal-dim); color:var(--ink); }
  #app-layer .check-opt.sel { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); color:var(--violet-dim); }
  #app-layer .check-opt .od { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  #app-layer .check-opt.opt-exact .od { background:var(--ok-dim); }
  #app-layer .check-opt.opt-adapted .od { background:var(--warn); }
  #app-layer .check-opt.opt-different .od { background:var(--danger); }
  #app-layer .check-detail { margin-top:11px; }
  #app-layer .check-detail label { display:block; font-size:12px; color:var(--ink-soft); margin-bottom:6px; }
  #app-layer .check-detail textarea { width:100%; min-height:62px; border:1px solid var(--card-line); border-radius:9px; padding:10px 12px; font-family:inherit; font-size:13px; color:var(--ink); resize:vertical; background:#fff; }
  #app-layer .check-detail textarea:focus { outline:none; border-color:var(--signal-dim); }
  #app-layer .check-actions { display:flex; gap:9px; margin-top:11px; align-items:center; }
  #app-layer .check-confirm { font-family:inherit; font-size:12.5px; font-weight:700; padding:8px 16px; border-radius:9px; border:none; background:var(--ok-dim); color:#fff; cursor:pointer; transition:all .14s; }
  #app-layer .check-confirm:hover { background:#268050; }
  #app-layer .check-confirm:disabled { background:var(--card-line); color:var(--fog); cursor:not-allowed; }
  #app-layer .check-cancel { font-family:inherit; font-size:12.5px; font-weight:600; padding:8px 12px; border-radius:9px; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; }
  #app-layer .check-cancel:hover { color:var(--ink); }
  #app-layer /* afgeronde taak met advies-label */
  .task .done-tag { display:inline-flex; align-items:center; gap:5px; font-family:'SF Mono',monospace; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; }
  #app-layer .dt-exact { background:var(--ok-bg); color:var(--ok-dim); }
  #app-layer .dt-adapted { background:var(--warn-bg); color:var(--warn-tekst); }
  #app-layer .dt-different { background:#FBEAE5; color:#a8443d; }
  #app-layer .task .what-changed { font-size:12px; color:var(--ink-soft); margin-top:6px; font-style:italic; padding:8px 11px; background:var(--paper-inset); border-radius:8px; border-left:2px solid var(--warn); }

  #app-layer /* ===== TEKSTVOORSTEL-GENERATOR ===== */
  .gen-btn { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:8px; border:1px solid var(--signal-dim); background:var(--inset,#F4F5F0); color:var(--violet-dim); cursor:pointer; transition:all .14s; margin-top:8px; }
  #app-layer .gen-btn:hover { background:var(--beam-knop); color:#fff; }
  #app-layer .gen-btn svg { width:13px; height:13px; }
  #app-layer .gen-panel { margin-top:12px; border:1px solid var(--card-line); border-radius:11px; overflow:hidden; background:#fff; }
  #app-layer .gen-head { display:flex; align-items:center; gap:9px; padding:11px 14px; background:linear-gradient(135deg,#EEF3E7,#E7EDDF); border-bottom:1px solid var(--card-line); }
  #app-layer .gen-head .gh-ic { width:24px; height:24px; border-radius:7px; background:var(--signal-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .gen-head .gh-ic svg { width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2; }
  #app-layer .gen-head .gh-t { font-size:12.5px; font-weight:700; color:var(--ink); }
  #app-layer .gen-head .gh-s { font-size:11px; color:var(--ink-soft); font-family:'SF Mono',monospace; }
  #app-layer .gen-context { display:flex; flex-wrap:wrap; gap:5px; padding:10px 14px 0; }
  #app-layer .gen-chip { font-family:'SF Mono',monospace; font-size:9.5px; padding:3px 8px; border-radius:20px; background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .gen-chip b { color:var(--violet-dim); font-weight:700; }
  #app-layer .gen-loading { padding:24px 14px; text-align:center; color:var(--ink-soft); font-size:12.5px; }
  #app-layer .gen-loading .spin { display:inline-block; width:16px; height:16px; border:2px solid var(--card-line); border-top-color:var(--signal-dim); border-radius:50%; animation:genspin .7s linear infinite; vertical-align:middle; margin-right:8px; }
  @keyframes genspin { to { transform:rotate(360deg); } }
  #app-layer .gen-result { padding:12px 14px; }
  #app-layer .gen-vtitle { font-size:11px; font-family:'SF Mono',monospace; font-weight:700; color:var(--violet-dim); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:8px; }
  #app-layer .gen-text { font-size:13px; color:var(--ink); line-height:1.6; white-space:pre-wrap; background:var(--paper-2); border:1px solid var(--card-line-soft); border-radius:9px; padding:12px 14px; }
  #app-layer .gen-extra { font-size:11.5px; color:var(--ink-soft); font-style:italic; margin-top:8px; padding-left:2px; }
  #app-layer .gen-actions { display:flex; gap:8px; padding:0 14px 13px; flex-wrap:wrap; align-items:center; }
  #app-layer .gen-act { font-family:inherit; font-size:12px; font-weight:600; padding:7px 13px; border-radius:8px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .14s; display:inline-flex; align-items:center; gap:6px; }
  #app-layer .gen-act:hover { border-color:var(--signal-dim); color:var(--ink); }
  #app-layer .gen-act.primary { background:var(--ok-dim); border-color:var(--ok-dim); color:#fff; }
  #app-layer .gen-act.primary:hover { background:#268050; }
  #app-layer .gen-act svg { width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2; }
  #app-layer .gen-taken { font-size:11.5px; color:var(--ok-dim); font-weight:600; padding:0 14px 13px; display:flex; align-items:center; gap:6px; }
  #app-layer .gen-disclaimer { font-size:10.5px; color:var(--fog); padding:0 14px 12px; font-style:italic; }

  #app-layer .ba { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
  #app-layer .ba-col { flex:1; min-width:160px; border:1px solid var(--card-line); border-radius:10px; overflow:hidden; }
  #app-layer .ba-col .cap { font-family:'SF Mono',monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; padding:6px 11px; color:#fff; }
  #app-layer .ba-col.b .cap {background:var(--ink-soft);} #app-layer .ba-col.a .cap {background:var(--signal-dim);}
  #app-layer .ba-col .demo { padding:18px; display:flex; align-items:center; justify-content:center; background:#fff; min-height:80px; }
  #app-layer .btn-old { background:#d4dbe0; color:#7c858c; border:none; padding:6px 13px; border-radius:5px; font-size:12px; }
  #app-layer .btn-new { background:var(--beam-knop); color:#fff; border:none; padding:12px 20px; border-radius:9px; font-size:14px; font-weight:600; }

  #app-layer .next-advice { border-left:3px solid var(--ok); background:var(--ok-bg); border-radius:0 9px 9px 0; padding:13px 17px; margin-top:8px; color:var(--foam); }
  #app-layer .next-advice .nl { font-family:'SF Mono',monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--ok-tekst); margin-bottom:5px; }
  #app-layer .next-advice p { margin:0; font-size:13.5px; }

  #app-layer .legend { display:flex; gap:15px; flex-wrap:wrap; font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); margin-top:8px; align-items:center; }
  #app-layer .legend .sw { display:inline-block; width:20px; height:10px; border-radius:3px; vertical-align:middle; margin-right:5px; }

  #app-layer .hint { font-family:'SF Mono',monospace; font-size:11px; color:var(--fog); margin-top:4px; }

  #app-layer /* ===== MAANDRAPPORT ===== */
  .rep-intro { display:flex; gap:16px; align-items:flex-start; background:linear-gradient(150deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin-bottom:20px; }
  #app-layer .rep-intro .ri-ic { flex-shrink:0; width:46px; height:46px; border-radius:12px; background:var(--inset,#F4F5F0); display:flex; align-items:center; justify-content:center; }
  #app-layer .rep-intro .ri-ic svg { width:24px; height:24px; stroke:var(--signal); fill:none; stroke-width:1.7; }
  #app-layer .rep-intro h3 { color:var(--foam); font-size:16px; margin:0 0 5px; }
  #app-layer .rep-intro p { color:var(--mist); font-size:13.5px; margin:0; max-width:64ch; }
  #app-layer .rep-intro .ri-act { margin-left:auto; flex-shrink:0; display:flex; flex-direction:column; gap:8px; }
  #app-layer .rep-intro .ri-act .btn { white-space:nowrap; }

  #app-layer .rep-preview { background:var(--paper); color:var(--ink); border-radius:16px; border:1px solid var(--card-line); overflow:hidden; }
  #app-layer .rep-pv-bar { display:flex; align-items:center; gap:8px; padding:11px 16px; background:#fff; border-bottom:1px solid var(--card-line); }
  #app-layer .rep-pv-bar .dotrow { display:flex; gap:6px; }
  #app-layer .rep-pv-bar .dotrow i { width:11px; height:11px; border-radius:50%; display:block; }
  #app-layer .rep-pv-bar .t { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); margin-left:6px; }
  #app-layer .rep-pv-scale { padding:26px; }

  #app-layer /* The actual report document (shared by preview + fullscreen) */
  .report-doc { background:#fff; color:var(--ink); max-width:840px; margin:0 auto; }
  #app-layer .report-doc .rd-head { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; border-bottom:2px solid var(--ink); margin-bottom:26px; }
  #app-layer .report-doc .rd-brand { display:flex; align-items:center; gap:9px; font-size:17px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
  #app-layer .report-doc .rd-brand b { color:var(--beam-tekst); }
  #app-layer .report-doc .rd-brand .lg { width:26px; height:26px; border-radius:7px; background:transparent; display:flex; align-items:center; justify-content:center; }
  #app-layer .report-doc .rd-brand .lg svg { width:15px; height:15px; }
  #app-layer .report-doc .rd-meta { text-align:right; font-size:12px; color:var(--ink-soft); line-height:1.5; }
  #app-layer .report-doc .rd-meta b { color:var(--ink); font-size:13px; }
  #app-layer .report-doc .rd-title { font-size:26px; font-weight:700; letter-spacing:-0.02em; margin:0 0 4px; }
  #app-layer .report-doc .rd-sub { font-size:14px; color:var(--ink-soft); margin:0 0 28px; }

  #app-layer .rd-section { margin-bottom:30px; }
  #app-layer .rd-section > .rds-label { display:flex; align-items:center; gap:9px; font-family:'SF Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--beam-tekst); margin-bottom:14px; }
  #app-layer .rd-section > .rds-label .n { width:20px; height:20px; border-radius:50%; background:var(--beam-knop); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; }

  #app-layer /* management summary */
  .rd-summary { background:linear-gradient(135deg,#F4F1FE,#EAF6FB); border:1px solid #E0DAF7; border-radius:13px; padding:20px 22px; }
  #app-layer .rd-summary p { font-size:14.5px; line-height:1.6; color:var(--ink); margin:0 0 14px; }
  #app-layer .rd-summary p:last-child { margin-bottom:0; }
  #app-layer .rd-summary .verdict { display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; background:var(--ok-bg); color:var(--ok-dim); margin-bottom:14px; }
  #app-layer .rd-summary .verdict .d { width:8px; height:8px; border-radius:50%; background:var(--ok-dim); }

  #app-layer /* KPI cards */
  .rd-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  #app-layer .rd-kpi { border:1px solid var(--card-line); border-radius:11px; padding:15px 16px; background:#fff; }
  #app-layer .rd-kpi .k-lbl { font-size:11px; color:var(--ink-soft); margin-bottom:7px; min-height:30px; }
  #app-layer .rd-kpi .k-val { font-size:27px; font-weight:700; letter-spacing:-0.02em; line-height:1; margin-bottom:6px; }
  #app-layer .rd-kpi .k-delta { font-size:11.5px; font-weight:600; font-family:'SF Mono',monospace; display:inline-flex; align-items:center; gap:4px; }
  #app-layer .k-up { color:var(--ok-dim); } #app-layer .k-down { color:var(--danger-tekst); } #app-layer .k-flat { color:var(--ink-soft); }

  #app-layer /* result bars */
  .rd-results { display:flex; flex-direction:column; gap:13px; }
  #app-layer .rd-res { display:grid; grid-template-columns:1fr auto; gap:6px 14px; align-items:center; }
  #app-layer .rd-res .r-top { display:flex; justify-content:space-between; align-items:baseline; grid-column:1; }
  #app-layer .rd-res .r-name { font-size:13.5px; font-weight:600; color:var(--ink); }
  #app-layer .rd-res .r-sub { font-size:11.5px; color:var(--ink-soft); }
  #app-layer .rd-res .r-val { grid-column:2; grid-row:1/3; font-size:18px; font-weight:700; font-family:'SF Mono',monospace; text-align:right; min-width:64px; }
  #app-layer .rd-res .r-track { grid-column:1; height:7px; background:#EEF2F6; border-radius:4px; overflow:hidden; }
  #app-layer .rd-res .r-fill { height:100%; border-radius:4px; }

  #app-layer /* completed tasks → impact */
  .rd-tasks { display:flex; flex-direction:column; gap:11px; }
  #app-layer .rd-task { display:flex; gap:13px; padding:14px 16px; border:1px solid var(--card-line); border-radius:11px; background:#fff; }
  #app-layer .rd-task .tcheck { flex-shrink:0; width:24px; height:24px; border-radius:7px; background:var(--ok-dim); display:flex; align-items:center; justify-content:center; color:#fff; font-size:14px; }
  #app-layer .rd-task .tbody { flex:1; }
  #app-layer .rd-task .tname { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
  #app-layer .rd-task .tmeta { font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; }
  #app-layer .rd-task .timpact { display:inline-flex; align-items:center; gap:7px; font-size:12px; background:var(--ok-bg); color:var(--ok-dim); font-weight:600; padding:4px 11px; border-radius:7px; }
  #app-layer .rd-task .timpact svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2; }

  #app-layer /* upcoming tasks + expected */
  .rd-plan { display:flex; flex-direction:column; gap:11px; }
  #app-layer .rd-pl { display:flex; gap:13px; padding:14px 16px; border:1px solid var(--card-line); border-radius:11px; background:#fff; position:relative; }
  #app-layer .rd-pl .plnum { flex-shrink:0; width:24px; height:24px; border-radius:7px; border:2px solid var(--signal-dim); color:var(--beam-tekst); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; }
  #app-layer .rd-pl .plbody { flex:1; }
  #app-layer .rd-pl .plname { font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:3px; }
  #app-layer .rd-pl .plmeta { font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; }
  #app-layer .rd-pl .plexp { display:inline-flex; align-items:center; gap:7px; font-size:12px; background:#EEF4FB; color:#1F5A85; font-weight:600; padding:4px 11px; border-radius:7px; }
  #app-layer .rd-pl .plexp svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2.2; }

  #app-layer .rd-foot { border-top:1px solid var(--card-line); margin-top:30px; padding-top:16px; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:var(--ink-soft); }
  #app-layer .rd-foot .mono { font-family:'SF Mono',monospace; }

  #app-layer /* ===== PRESENTATION OVERLAY ===== */
  .present-overlay { position:fixed; inset:0; z-index:200; background:rgba(8,15,24,0.86); backdrop-filter:blur(6px); display:none; overflow-y:auto; padding:40px 20px 60px; }
  #app-layer .present-overlay.show { display:block; animation:fade .3s ease; }
  #app-layer .present-sheet { background:#fff; max-width:880px; margin:0 auto; border-radius:14px; padding:48px 54px; box-shadow:0 40px 100px -20px rgba(0,0,0,0.6); }
  #app-layer .present-bar { position:sticky; top:0; max-width:880px; margin:0 auto 18px; display:flex; gap:10px; justify-content:flex-end; }
  #app-layer .present-bar .btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; vertical-align:middle; margin-right:5px; }
  #app-layer .pbtn { font-family:inherit; font-size:13px; font-weight:600; padding:9px 16px; border-radius:9px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; }
  #app-layer .pbtn-light { background:var(--inset,#F4F5F0); color:#fff; border-color:rgba(28, 40, 34, 0.110); }
  #app-layer .pbtn-light:hover { background:rgba(28, 40, 34, 0.120); }
  #app-layer .pbtn-close { background:#fff; color:var(--ink); }
  #app-layer .pbtn-close:hover { background:var(--mist); }
  @media print {
    #app-layer body * { visibility:hidden; }
    #app-layer .present-overlay, #app-layer .present-overlay * { visibility:visible; }
    #app-layer .present-overlay { position:absolute; background:#fff; padding:0; backdrop-filter:none; }
    #app-layer .present-bar { display:none; }
    #app-layer .present-sheet { box-shadow:none; max-width:100%; padding:0; border-radius:0; }
    #app-layer .koppel-overlay, #app-layer .koppel-overlay * { visibility:visible; }
    #app-layer .koppel-overlay { position:absolute; background:#fff; padding:0; backdrop-filter:none; }
    #app-layer .koppel-bar { display:none; }
    #app-layer .koppel-sheet { box-shadow:none; max-width:100%; padding:0; border-radius:0; }
    #app-layer .kh-step { break-inside:avoid; }}

  #app-layer /* ===== KOPPEL-HANDLEIDING ===== */
  .koppel-overlay { position:fixed; inset:0; z-index:200; background:rgba(8,15,24,0.86); backdrop-filter:blur(6px); display:none; overflow-y:auto; padding:40px 20px 60px; }
  #app-layer .koppel-overlay.show { display:block; animation:fade .3s ease; }
  #app-layer .koppel-bar { position:sticky; top:0; max-width:840px; margin:0 auto 18px; display:flex; gap:10px; justify-content:flex-end; }
  #app-layer .koppel-sheet { background:#fff; max-width:840px; margin:0 auto; border-radius:14px; padding:48px 56px; box-shadow:0 40px 100px -20px rgba(0,0,0,0.6); color:#1A2A3A; }
  #app-layer .kh-head { border-bottom:2px solid #EEF1F6; padding-bottom:22px; margin-bottom:28px; }
  #app-layer .kh-brand { display:flex; align-items:center; gap:9px; margin-bottom:16px; }
  #app-layer .kh-brand .kh-logo { width:26px; height:26px; border-radius:7px; background:transparent; display:flex; align-items:center; justify-content:center; }
  #app-layer .kh-brand .kh-logo svg { width:15px; height:15px; }
  #app-layer .kh-brand .kh-name { font-size:16px; font-weight:800; color:#1C1B18; }
  #app-layer .kh-brand .kh-name b { color:var(--beam-tekst); }
  #app-layer .kh-title { font-size:27px; font-weight:800; color:#1C1B18; line-height:1.2; margin-bottom:10px; letter-spacing:-0.01em; }
  #app-layer .kh-sub { font-size:14.5px; color:#5A6B7B; line-height:1.6; }
  #app-layer .kh-meta { display:flex; gap:18px; margin-top:16px; flex-wrap:wrap; }
  #app-layer .kh-meta-item { display:flex; align-items:center; gap:7px; font-size:12.5px; color:#5A6B7B; }
  #app-layer .kh-meta-item svg { width:15px; height:15px; stroke:#1D3B2A; fill:none; stroke-width:2; }
  #app-layer .kh-meta-item b { color:#1C1B18; }

  #app-layer .kh-section { margin-bottom:34px; }
  #app-layer .kh-section-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  #app-layer .kh-sec-num { width:30px; height:30px; border-radius:9px; background:#1C1B18; color:#fff; font-weight:800; font-size:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .kh-sec-logo { width:32px; height:32px; border-radius:9px; background:#F4F6FA; border:1px solid #E4E9F0; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .kh-sec-logo svg { width:19px; height:19px; }
  #app-layer .kh-sec-title { font-size:18px; font-weight:800; color:#1C1B18; }
  #app-layer .kh-sec-sub { font-size:13px; color:#5A6B7B; margin-top:1px; }

  #app-layer .kh-step { display:flex; gap:15px; padding:14px 0; border-bottom:1px solid #EEF1F6; }
  #app-layer .kh-step:last-child { border-bottom:none; }
  #app-layer .kh-step-num { width:25px; height:25px; border-radius:50%; background:var(--inset,#F4F5F0); color:#6A5A9E; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'SF Mono',monospace; }
  #app-layer .kh-step-body { flex:1; min-width:0; }
  #app-layer .kh-step-body p { font-size:14px; color:#1A2A3A; line-height:1.6; margin:0; }
  #app-layer .kh-step-body .ui { display:inline-block; font-family:'SF Mono',monospace; font-size:12px; font-weight:600; padding:1px 7px; border-radius:5px; background:#F4F6FA; border:1px solid #E4E9F0; color:#1C1B18; }
  #app-layer .kh-step-note { font-size:12.5px; color:#5A6B7B; margin-top:6px; font-style:italic; }

  #app-layer .kh-callout { display:flex; gap:13px; padding:16px 18px; border-radius:12px; margin:18px 0; }
  #app-layer .kh-callout.help { background:#FBF6E9; border:1px solid #EAD9A8; }
  #app-layer .kh-callout.safe { background:#EAF6EF; border:1px solid #BFE3CC; }
  #app-layer .kh-callout .kh-co-ic { width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .kh-callout.help .kh-co-ic { background:#E7B24C; }
  #app-layer .kh-callout.safe .kh-co-ic { background:#4FA877; }
  #app-layer .kh-callout .kh-co-ic svg { width:17px; height:17px; stroke:#fff; fill:none; stroke-width:2; }
  #app-layer .kh-callout .kh-co-body { flex:1; min-width:0; }
  #app-layer .kh-callout .kh-co-title { font-size:14px; font-weight:700; color:#1C1B18; margin-bottom:4px; }
  #app-layer .kh-callout .kh-co-body p { font-size:13px; color:#3A4A5A; line-height:1.6; margin:0; }
  #app-layer .kh-callout .kh-co-body p + p { margin-top:8px; }
  #app-layer .kh-foot { border-top:2px solid #EEF1F6; padding-top:18px; margin-top:30px; font-size:12px; color:#7A8B9B; line-height:1.6; }

  @media (max-width:860px){
    /* HIER STOND `#app-layer .app`. De klasse heet `.app-lijf`.
       Deze media query heeft dus NOOIT gewerkt: de zijbalk bleef 212px opeisen,
       ook op een telefoon van 390px. Daardoor kreeg het werkscherm 78px en liep
       ALLES buiten beeld. Alle andere mobiele fixes waren symptoombestrijding. */
    #app-layer .app-lijf { grid-template-columns:1fr; }
    #app-layer .side { flex-direction:row; align-items:center; overflow-x:auto; }
    #app-layer .nav { flex-direction:row; }
    #app-layer .nav-label { display:none; }
    #app-layer .side-foot { display:flex; align-items:center; margin:0 0 0 auto; padding:0 2px; border-top:none; flex-shrink:0; }
    #app-layer .org { padding:5px 6px; }
    #app-layer .org .meta { display:none; }
    #app-layer .uitlog-btn { width:auto; margin:0 0 0 6px; padding:7px 8px; }
    #app-layer .uitlog-btn span { display:none; }
    #app-layer .org-menu { position:fixed; left:14px; right:14px; top:auto; bottom:14px; width:auto; box-shadow:0 12px 40px -6px rgba(0,0,0,0.6); }
    #app-layer .hero-grid { grid-template-columns:1fr; }
    #app-layer .gauge-wrap {margin:0 auto;}
    #app-layer .phase-strip {grid-template-columns:repeat(3,1fr);}
    #app-layer .rd-kpis { grid-template-columns:repeat(2,1fr); }
    #app-layer .rep-intro { flex-wrap:wrap; }
    #app-layer .rep-intro .ri-act { margin-left:0; width:100%; flex-direction:row; }
    #app-layer .rep-intro .ri-act .btn { flex:1; justify-content:center; }
    #app-layer .present-sheet { padding:30px 22px; }
    #app-layer .report-doc .rd-head { flex-direction:column; gap:12px; }
    #app-layer .report-doc .rd-meta { text-align:left; }}
  #app-layer a:focus-visible, #app-layer .box:focus-visible, #app-layer button:focus-visible { outline:2px solid var(--signal); outline-offset:2px; }

  #app-layer /* ===== diepgaand advies ===== */
  .deepadv { background:var(--paper); color:var(--ink); border-radius:16px; border:1px solid var(--card-line); margin-bottom:18px; overflow:hidden; box-shadow:var(--card-shadow); }
  #app-layer .deepadv .da-head { padding:20px 24px 18px; background:linear-gradient(150deg,#E7EDDF,#FBFCFB); border-bottom:1px solid var(--card-line); }
  #app-layer .da-flag { display:inline-flex; align-items:center; gap:7px; font-family:'SF Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; color:var(--violet-dim); margin-bottom:10px; }
  #app-layer .deepadv h3.da-title { font-size:21px; font-weight:600; margin:0 0 8px; color:var(--ink); letter-spacing:-0.01em; }
  #app-layer .da-diag { font-size:14.5px; color:var(--ink-soft); margin:0 0 4px; line-height:1.55; max-width:70ch; }
  #app-layer .da-diag b { color:var(--ink); }
  #app-layer .da-reframe { margin-top:14px; background:var(--inset,#F4F5F0); border:1px solid #DDD4F5; border-radius:10px; padding:13px 16px; }
  #app-layer .da-reframe .rl { font-family:'SF Mono',monospace; font-size:9.5px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--violet-dim); margin-bottom:5px; }
  #app-layer .da-reframe p { margin:0; font-size:14px; color:var(--ink); font-weight:500; }
  #app-layer .da-body { padding:8px 24px 20px; }
  #app-layer .da-section-label { font-family:'SF Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; margin:20px 0 12px; display:flex; align-items:center; gap:8px; }
  #app-layer .da-section-label::after { content:""; flex:1; height:1px; background:var(--card-line); }

  #app-layer /* deep task */
  .deep-task { border:1px solid var(--card-line); border-radius:12px; padding:15px 18px; margin-bottom:12px; background:#fff; }
  #app-layer .task-top { display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
  #app-layer .task-num { flex-shrink:0; width:26px; height:26px; border-radius:7px; background:var(--beam-knop); color:#fff; font-family:'SF Mono',monospace; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; }
  #app-layer .task-h { font-weight:600; font-size:15.5px; color:var(--ink); flex:1; }
  #app-layer .task-disc { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 9px 38px; }
  #app-layer .disc { font-family:'SF Mono',monospace; font-size:9px; font-weight:700; letter-spacing:0.04em; padding:2px 8px; border-radius:5px; }
  #app-layer .disc-psy { background:#F3E9F6; color:#8a3fa0; }
  #app-layer .disc-cx { background:#E5F1FB; color:#1F5A85; }
  #app-layer .disc-content { background:#FBF3E5; color:var(--warn-tekst); }
  #app-layer .disc-a11y { background:#EDE9F6; color:#6A5A9E; }
  #app-layer .disc-data { background:#E7F0E9; color:var(--ok-tekst); }
  #app-layer .disc-cro { background:#FBEAE5; color:#b04a2e; }
  #app-layer .task-body { margin-left:38px; }
  #app-layer .task-what { font-size:13.5px; color:var(--ink); margin-bottom:7px; line-height:1.5; }
  #app-layer .task-what b { color:var(--violet-dim); }
  #app-layer .task-why { font-size:12.5px; color:var(--ink-soft); margin-bottom:9px; line-height:1.45; font-style:italic; }
  #app-layer .task-foot { display:flex; gap:16px; flex-wrap:wrap; font-family:'SF Mono',monospace; font-size:10.5px; color:var(--ink-soft); }
  #app-layer .task-foot .tf b { color:var(--ink); font-weight:600; }
  #app-layer .task-foot .tf.prio-1 b { color:var(--danger-tekst); }

  #app-layer /* ===== ONDERBOUWING (uitklapbaar) ===== */
  .why-toggle { display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-family:inherit; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:8px; border:1px solid var(--card-line); background:var(--paper-2); color:var(--violet-dim); cursor:pointer; transition:all .14s; }
  #app-layer .why-toggle:hover { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); }
  #app-layer .why-toggle svg { width:13px; height:13px; transition:transform .2s; }
  #app-layer .why-toggle.open svg { transform:rotate(180deg); }
  #app-layer .why-panel { margin-top:11px; border:1px solid var(--card-line); border-radius:11px; background:var(--paper-2); overflow:hidden; }
  #app-layer .why-panel .wp-head { padding:11px 16px; background:linear-gradient(135deg,#E7EDDF,#F0F3EB); border-bottom:1px solid var(--card-line); font-family:'SF Mono',monospace; font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; color:var(--violet-dim); display:flex; align-items:center; gap:8px; }
  #app-layer .why-panel .wp-head svg { width:14px; height:14px; stroke:var(--violet-dim); fill:none; stroke-width:2; }
  #app-layer .why-block { padding:13px 16px; border-bottom:1px solid var(--card-line-soft); }
  #app-layer .why-block:last-child { border-bottom:none; }
  #app-layer .why-block .wb-label { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:7px; display:flex; align-items:center; gap:7px; }
  #app-layer .why-block .wb-label .wb-ic { width:18px; height:18px; border-radius:5px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .why-block .wb-ic svg { width:11px; height:11px; stroke:#fff; fill:none; stroke-width:2.2; }
  #app-layer .wb-ic.ic-bron { background:#2a6fa0; } #app-layer .wb-ic.ic-trend { background:var(--ok-dim); } #app-layer .wb-ic.ic-exp { background:#8a3fa0; } #app-layer .wb-ic.ic-verw { background:var(--violet-dim); }
  #app-layer .why-block p { margin:0; font-size:13px; color:var(--ink); line-height:1.55; }
  #app-layer .why-block .wb-sources { display:flex; flex-direction:column; gap:6px; margin-top:2px; }
  #app-layer .why-block .wb-source { font-size:12.5px; color:var(--ink); padding-left:16px; position:relative; line-height:1.45; }
  #app-layer .why-block .wb-source::before { content:"—"; position:absolute; left:0; color:var(--ink-soft); }
  #app-layer .why-block .wb-source i { color:var(--ink-soft); font-style:normal; font-size:11px; }
  #app-layer .why-block .wb-chips { display:flex; flex-wrap:wrap; gap:5px; }
  #app-layer .why-block .wb-chip { font-family:'SF Mono',monospace; font-size:9px; font-weight:700; padding:2px 8px; border-radius:5px; background:#EDE9F6; color:#6A5A9E; }
  #app-layer .why-disclaimer { font-size:10.5px; color:var(--fog); font-style:italic; padding:10px 16px 12px; }

  #app-layer .da-measure { margin-top:18px; background:#E7F0E9; border:1px solid #C9E3D2; border-radius:12px; padding:15px 18px; }
  #app-layer .da-measure .ml { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--ok-dim); margin-bottom:7px; }
  #app-layer .da-measure p { margin:0 0 6px; font-size:13.5px; color:var(--ink); }
  #app-layer .da-measure p:last-child { margin-bottom:0; }
  #app-layer .da-measure .target { font-weight:600; color:var(--ok-dim); }

  #app-layer /* ===== COMMERCIËLE IMPACT ===== */
  .ci-hero { background:linear-gradient(150deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:18px; padding:24px 26px; margin-bottom:20px; }
  #app-layer .ci-hero-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
  #app-layer .ci-hero .ci-eyebrow { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; color:var(--beam-tekst); margin-bottom:10px; }
  #app-layer .ci-big { font-size:38px; font-weight:800; color:var(--foam); line-height:1.05; letter-spacing:-0.02em; }
  #app-layer .ci-big .unit { font-size:20px; font-weight:600; color:var(--mist); }
  #app-layer .ci-big-sub { font-size:13px; color:var(--fog); margin-top:6px; }
  #app-layer .ci-ltv { text-align:right; }
  #app-layer .ci-ltv .l { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--fog); margin-bottom:5px; }
  #app-layer .ci-ltv .v { font-size:22px; font-weight:700; color:var(--mist); }
  #app-layer .ci-assumptions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
  #app-layer .ci-chip { font-family:'SF Mono',monospace; font-size:10.5px; padding:5px 11px; border-radius:20px; background:var(--inset,#F4F5F0); color:var(--mist); border:1px solid var(--line); }
  #app-layer .ci-chip b { color:var(--foam); }
  #app-layer .ci-potential { display:flex; align-items:center; gap:14px; margin-top:18px; padding:14px 16px; background:var(--inset,#F4F5F0); border:1px solid rgba(154,203,122,0.25); border-radius:12px; }
  #app-layer .ci-potential .cp-ic { width:36px; height:36px; border-radius:10px; background:var(--signal-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .ci-potential .cp-ic svg { width:19px; height:19px; stroke:#fff; fill:none; stroke-width:2; }
  #app-layer .ci-potential .cp-body { flex:1; }
  #app-layer .ci-potential .cp-t { font-size:13px; color:var(--mist); }
  #app-layer .ci-potential .cp-v { font-size:17px; font-weight:700; color:var(--foam); }

  #app-layer .ci-section-h { font-family:'SF Mono',monospace; font-size:11px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--violet-dim); margin:6px 0 12px; }

  #app-layer /* per-taak impact rij */
  .ci-task { background:var(--paper); border:1px solid var(--card-line); border-radius:13px; padding:16px 18px; margin-bottom:11px; box-shadow:var(--card-shadow); }
  #app-layer .ci-task-top { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
  #app-layer .ci-task .ct-title { font-size:14.5px; font-weight:600; color:var(--ink); margin-bottom:4px; }
  #app-layer .ci-task .ct-meta { font-family:'SF Mono',monospace; font-size:10.5px; color:var(--ink-soft); }
  #app-layer .ci-task .ct-range { text-align:right; flex-shrink:0; }
  #app-layer .ci-task .ct-range .r { font-size:20px; font-weight:800; color:var(--ink); white-space:nowrap; letter-spacing:-0.01em; }
  #app-layer .ci-task .ct-range .rl { font-family:'SF Mono',monospace; font-size:9.5px; color:var(--ink-soft); margin-top:2px; }
  #app-layer .ci-band { margin-top:13px; }
  #app-layer .ci-band-track { position:relative; height:34px; border-radius:8px; background:var(--paper-inset); overflow:hidden; }
  #app-layer .ci-band-fill { position:absolute; top:0; bottom:0; border-radius:8px; opacity:0.9; }
  #app-layer .ci-band-fill.zeker-hoog { background:linear-gradient(90deg,#8FD9B0,#2F6B43); }
  #app-layer .ci-band-fill.zeker-mid { background:linear-gradient(90deg,#F2D08A,#E7B24C); }
  #app-layer .ci-band-fill.zeker-laag { background:repeating-linear-gradient(45deg,#C9B8F0,#C9B8F0 6px,#BBA8EC 6px,#BBA8EC 12px); }
  #app-layer .ci-band-labels { display:flex; justify-content:space-between; font-family:'SF Mono',monospace; font-size:9.5px; color:var(--ink-soft); margin-top:5px; }
  #app-layer .ci-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
  #app-layer .ci-zeker { display:inline-flex; align-items:center; gap:6px; font-family:'SF Mono',monospace; font-size:10px; font-weight:700; padding:3px 10px; border-radius:20px; }
  #app-layer .ci-zeker.zeker-hoog { background:var(--ok-bg); color:var(--ok-dim); }
  #app-layer .ci-zeker.zeker-mid { background:var(--warn-bg); color:var(--warn-tekst); }
  #app-layer .ci-zeker.zeker-laag { background:#EDE9F6; color:#6A5A9E; }
  #app-layer .ci-zeker .zd { width:7px; height:7px; border-radius:50%; }
  #app-layer .ci-zeker.zeker-hoog .zd { background:var(--ok-dim); }
  #app-layer .ci-zeker.zeker-mid .zd { background:var(--warn); }
  #app-layer .ci-zeker.zeker-laag .zd { background:#1D3B2A; }
  #app-layer .ci-perhour { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .ci-perhour b { color:var(--violet-dim); font-weight:700; }
  #app-layer .ci-chain-btn { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11px; font-weight:600; padding:5px 10px; border-radius:7px; border:1px solid var(--card-line); background:var(--paper-2); color:var(--violet-dim); cursor:pointer; transition:all .14s; }
  #app-layer .ci-chain-btn:hover { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); }
  #app-layer .ci-chain-btn svg { width:12px; height:12px; transition:transform .2s; }
  #app-layer .ci-chain-btn.open svg { transform:rotate(180deg); }
  #app-layer .ci-chain { margin-top:12px; padding-top:12px; border-top:1px dashed var(--card-line); }
  #app-layer .ci-chain-step { display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink); padding:5px 0; }
  #app-layer .ci-chain-step .cs-n { width:20px; height:20px; border-radius:50%; background:var(--beam-knop); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:'SF Mono',monospace; }
  #app-layer .ci-chain-step .cs-arrow { color:var(--ink-soft); }
  #app-layer .ci-chain-note { font-size:11.5px; color:var(--ink-soft); font-style:italic; margin-top:8px; padding:8px 11px; background:var(--paper-inset); border-radius:8px; border-left:2px solid var(--signal-dim); }
  #app-layer .ci-disclaimer { font-size:11px; color:var(--fog); font-style:italic; margin-top:14px; padding:0 2px; }

  #app-layer /* ===== KLANTREIZEN (meerdere reizen, #app-layer één tegelijk) ===== */
  .reis-switch { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
  #app-layer .reis-pill { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:13px; font-weight:600; padding:9px 15px; border-radius:10px; border:1px solid var(--line); background:var(--hull); color:var(--mist); cursor:pointer; transition:all .14s; }
  #app-layer .reis-pill:hover { border-color:var(--signal-dim); color:var(--foam); }
  #app-layer .reis-pill.active { background:var(--beam-knop); border-color:var(--signal-dim); color:#fff; }
  #app-layer .reis-pill .rp-ic { width:16px; height:16px; flex-shrink:0; }
  #app-layer .reis-pill .rp-conv { font-family:'SF Mono',monospace; font-size:10.5px; opacity:0.75; }
  #app-layer .reis-pill.active .rp-conv { opacity:0.9; }

  #app-layer /* conversie-hero */
  .reis-hero { background:var(--paper); border:1px solid var(--card-line); border-radius:16px; padding:22px 24px; margin-bottom:16px; box-shadow:var(--card-shadow); }
  #app-layer .reis-hero .rh-label { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--violet-dim); margin-bottom:10px; }
  #app-layer .reis-hero .rh-flow { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  #app-layer .reis-hero .rh-end { flex:1; min-width:130px; }
  #app-layer .reis-hero .rh-num { font-size:30px; font-weight:800; color:var(--ink); line-height:1; letter-spacing:-0.01em; }
  #app-layer .reis-hero .rh-cap { font-size:12.5px; color:var(--ink-soft); margin-top:5px; }
  #app-layer .reis-hero .rh-arrow { color:var(--fog); font-size:20px; flex-shrink:0; }
  #app-layer .reis-hero .rh-conv-box { text-align:center; padding:12px 18px; background:linear-gradient(135deg,#EDE9FB,#E5F2FB); border-radius:12px; flex-shrink:0; }
  #app-layer .reis-hero .rh-conv-num { font-size:26px; font-weight:800; color:var(--violet-dim); line-height:1; }
  #app-layer .reis-hero .rh-conv-lbl { font-family:'SF Mono',monospace; font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft); margin-top:5px; }
  #app-layer .reis-hero .rh-index { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); padding-top:13px; border-top:1px solid var(--card-line-soft); width:100%; }
  #app-layer .reis-hero .rh-index b { color:var(--ink); font-weight:700; }
  #app-layer .reis-hero .rh-index .trend-up { color:var(--ok-dim); font-weight:700; }
  #app-layer .reis-hero .rh-index .trend-down { color:var(--danger-tekst); font-weight:700; }

  #app-layer /* verticale stappen */
  .reis-steps { background:var(--paper); border:1px solid var(--card-line); border-radius:16px; padding:8px 24px 18px; box-shadow:var(--card-shadow); }
  #app-layer .reis-steps .rs-title { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); padding:16px 0 6px; }
  #app-layer .rstep { display:flex; align-items:stretch; gap:14px; }
  #app-layer .rstep .rstep-rail { display:flex; flex-direction:column; align-items:center; width:14px; flex-shrink:0; }
  #app-layer .rstep .rstep-dot { width:13px; height:13px; border-radius:50%; background:var(--signal-dim); flex-shrink:0; margin-top:16px; border:2.5px solid var(--paper); box-shadow:0 0 0 1.5px var(--signal-dim); }
  #app-layer .rstep.is-goal .rstep-dot { background:var(--ok-dim); box-shadow:0 0 0 1.5px var(--ok-dim); }
  #app-layer .rstep .rstep-line { flex:1; width:2px; background:var(--card-line); margin:2px 0; }
  #app-layer .rstep:last-child .rstep-line { display:none; }
  #app-layer .rstep-body { flex:1; min-width:0; padding:13px 0; border-bottom:1px solid var(--card-line-soft); display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
  #app-layer .rstep:last-child .rstep-body { border-bottom:none; }
  #app-layer .rstep-info { min-width:0; }
  #app-layer .rstep-name { font-size:14px; font-weight:600; color:var(--ink); }
  #app-layer .rstep-url { font-family:'SF Mono',monospace; font-size:10.5px; color:var(--ink-soft); margin-top:2px; }
  #app-layer .rstep-right { display:flex; align-items:center; gap:18px; flex-shrink:0; }
  #app-layer .rstep-count { text-align:right; }
  #app-layer .rstep-count .c { font-size:16px; font-weight:700; color:var(--ink); font-variant-numeric:tabular-nums; }
  #app-layer .rstep-count .cl { font-family:'SF Mono',monospace; font-size:9px; text-transform:uppercase; color:var(--ink-soft); }
  #app-layer .rstep-flow { font-family:'SF Mono',monospace; font-size:11px; font-weight:700; padding:4px 10px; border-radius:20px; white-space:nowrap; min-width:54px; text-align:center; }
  #app-layer .rstep-flow.f-hoog { background:#DDF0E5; color:var(--ok-dim); }
  #app-layer .rstep-flow.f-mid { background:#F6ECCF; color:var(--warn-tekst); }
  #app-layer .rstep-flow.f-laag { background:#F6DCD6; color:var(--danger-tekst); }
  #app-layer .rstep-flow.f-goal { background:var(--ok-dim); color:#fff; }
  #app-layer /* kruisverbinding-notitie */
  .reis-cross { display:flex; align-items:flex-start; gap:11px; margin-top:14px; padding:13px 16px; background:var(--paper); border:1px solid var(--beam); border-left:3px solid var(--beam); border-radius:12px; box-shadow:var(--card-shadow); }
  #app-layer .reis-cross .rc-ic { width:30px; height:30px; border-radius:8px; background:var(--beam); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .reis-cross .rc-ic svg { width:17px; height:17px; stroke:var(--abyss); fill:none; stroke-width:2; }
  #app-layer .reis-cross .rc-body { flex:1; min-width:0; font-size:13px; color:var(--ink); line-height:1.5; }
  #app-layer .reis-cross .rc-body b { color:var(--ink); font-weight:700; }

  #app-layer /* ===== EIGEN ACTIVITEITEN (ad-hoc) ===== */
  .act-intro { font-size:13px; color:var(--ink-soft); margin-bottom:14px; line-height:1.5; }
  #app-layer .act-add-btn { display:inline-flex; align-items:center; gap:7px; font-family:inherit; font-size:13px; font-weight:600; padding:9px 15px; border-radius:10px; border:1.5px dashed var(--card-line); background:var(--paper-2); color:var(--violet-dim); cursor:pointer; transition:all .14s; }
  #app-layer .act-add-btn:hover { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); border-style:solid; }
  #app-layer .act-add-btn svg { width:15px; height:15px; }
  #app-layer .act-form { margin-top:14px; border:1px solid var(--card-line); border-radius:12px; background:var(--paper-2); padding:16px 18px; }
  #app-layer .act-form-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
  #app-layer .act-field { flex:1; min-width:160px; }
  #app-layer .act-field.full { flex-basis:100%; }
  #app-layer .act-field label { display:block; font-family:'SF Mono',monospace; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
  #app-layer .act-field input, #app-layer .act-field select, #app-layer .act-field textarea { width:100%; font-family:inherit; font-size:13px; color:var(--ink); background:#fff; border:1px solid var(--card-line); border-radius:8px; padding:9px 11px; }
  #app-layer .act-field input:focus, #app-layer .act-field select:focus, #app-layer .act-field textarea:focus { outline:none; border-color:var(--signal-dim); }
  #app-layer .act-field textarea { min-height:54px; resize:vertical; }
  #app-layer .act-field .hint { font-size:10.5px; color:var(--fog); margin-top:5px; font-style:italic; }
  #app-layer .act-form-actions { display:flex; gap:9px; align-items:center; }
  #app-layer .act-save { font-family:inherit; font-size:13px; font-weight:700; padding:9px 18px; border-radius:9px; border:none; background:var(--beam-knop); color:#fff; cursor:pointer; transition:background .14s; }
  #app-layer .act-save:hover { background:var(--violet-dim); }
  #app-layer .act-cancel { font-family:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:9px; border:none; background:transparent; color:var(--ink-soft); cursor:pointer; }
  #app-layer .act-cancel:hover { color:var(--ink); }

  #app-layer /* activiteit-item in de lijst */
  .act-item { display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-bottom:1px solid var(--card-line-soft); }
  #app-layer .act-item:last-child { border-bottom:none; }
  #app-layer .act-item .act-date { flex-shrink:0; width:52px; text-align:center; background:var(--paper-inset); border-radius:9px; padding:7px 4px; }
  #app-layer .act-item .act-date .d { font-size:17px; font-weight:800; color:var(--ink); line-height:1; }
  #app-layer .act-item .act-date .mo { font-family:'SF Mono',monospace; font-size:9px; text-transform:uppercase; color:var(--ink-soft); margin-top:2px; }
  #app-layer .act-item .act-body { flex:1; min-width:0; }
  #app-layer .act-item .act-t { font-size:14px; font-weight:600; color:var(--ink); }
  #app-layer .act-item .act-m { font-family:'SF Mono',monospace; font-size:10.5px; color:var(--ink-soft); margin-top:3px; }
  #app-layer .act-item .act-effect { font-size:12.5px; color:var(--ink-soft); margin-top:6px; padding:7px 10px; background:var(--paper-inset); border-radius:7px; border-left:2px solid var(--beam); }
  #app-layer .act-item .act-tag { font-family:'SF Mono',monospace; font-size:9px; font-weight:700; padding:3px 9px; border-radius:20px; background:#E7EDDF; color:#1F5A85; flex-shrink:0; }
  #app-layer .act-item .act-tag.past { background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .act-item .act-del { background:none; border:none; color:var(--fog); cursor:pointer; font-size:15px; padding:2px 6px; border-radius:6px; flex-shrink:0; }
  #app-layer .act-item .act-del:hover { color:var(--danger-tekst); background:#FBEAE5; }
  #app-layer .act-empty { font-size:12.5px; color:var(--fog); font-style:italic; padding:8px 2px; }
  #app-layer .act-peak { font-size:11.5px; color:var(--ok-dim); margin-top:6px; display:flex; align-items:center; gap:6px; }
  #app-layer .act-peak svg { width:13px; height:13px; }

  #app-layer /* seizoens-SEO advies */
  .deepadv.forward .da-head { background:linear-gradient(150deg,#DCE7D1,#FBFCFB); }
  #app-layer .forward .da-flag { color:var(--green-700); }
  #app-layer .season-chart { display:flex; align-items:flex-end; gap:5px; height:108px; margin:6px 0 4px; padding:0 2px; }
  #app-layer .season-chart .sc-col { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; }
  #app-layer .season-chart .sc-bar { width:100%; border-radius:4px 4px 0 0; background:#CBD9E6; transition:height .3s; min-height:4px; }
  #app-layer .season-chart .sc-col.peak .sc-bar { background:#2a6fa0; }
  #app-layer .season-chart .sc-col.act .sc-bar { background:#1D3B2A; }
  #app-layer .season-chart .sc-m { font-family:'SF Mono',monospace; font-size:9px; color:var(--ink-soft); }
  #app-layer .season-chart .sc-col.peak .sc-m, #app-layer .season-chart .sc-col.act .sc-m { font-weight:700; color:var(--ink); }
  #app-layer .season-leg { display:flex; gap:16px; flex-wrap:wrap; font-family:'SF Mono',monospace; font-size:10px; color:var(--ink-soft); margin:2px 0 14px; }
  #app-layer .season-leg .sl { display:inline-flex; align-items:center; gap:6px; }
  #app-layer .season-leg .sw { width:11px; height:11px; border-radius:3px; }
  #app-layer .terms { margin:6px 0 4px; }
  #app-layer .term-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--card-line); }
  #app-layer .term-row:last-child { border-bottom:none; }
  #app-layer .term-row .tq { flex:1; font-size:13.5px; color:var(--ink); font-weight:500; }
  #app-layer .term-row .tq .ti { display:block; font-family:'SF Mono',monospace; font-size:10px; color:var(--ink-soft); font-weight:400; margin-top:1px; }
  #app-layer .term-row .tv { font-family:'SF Mono',monospace; font-size:12px; color:var(--ink-soft); white-space:nowrap; }
  #app-layer .term-row .tvol { width:120px; height:6px; background:#EEF2F5; border-radius:4px; overflow:hidden; flex-shrink:0; }
  #app-layer .term-row .tvol i { display:block; height:100%; background:#2a6fa0; border-radius:4px; }
  #app-layer .timeline { display:flex; gap:0; margin:10px 0 4px; }
  #app-layer .tl-step { flex:1; position:relative; padding:0 10px 0 0; }
  #app-layer .tl-step .tl-when { font-family:'SF Mono',monospace; font-size:10px; font-weight:700; color:#1F5A85; letter-spacing:0.05em; }
  #app-layer .tl-step .tl-what { font-size:12.5px; color:var(--ink); margin-top:3px; line-height:1.35; }
  #app-layer .tl-step::before { content:""; display:block; height:3px; background:#CBD9E6; border-radius:2px; margin-bottom:8px; }
  #app-layer .tl-step.go::before { background:#1D3B2A; }
  #app-layer .forecast { margin-top:14px; background:#EEF6FB; border:1px solid #C5DEEF; border-radius:12px; padding:15px 18px; }
  #app-layer .forecast .fl { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:#1F5A85; margin-bottom:9px; }
  #app-layer .forecast .fc-nums { display:flex; gap:24px; flex-wrap:wrap; margin-bottom:9px; }
  #app-layer .forecast .fc-n .v { font-size:22px; font-weight:700; color:#1F5A85; }
  #app-layer .forecast .fc-n .l { font-size:11px; color:var(--ink-soft); margin-top:2px; }
  #app-layer .forecast p { margin:0; font-size:12.5px; color:var(--ink-soft); line-height:1.45; }

  #app-layer /* Deze week */
  .week-intro { color:var(--mist); font-size:15px; max-width:64ch; margin:0 0 22px; }
 /* De eerste kaart mag opvallen, maar met een TINT, geen kleurvlak. */
  #app-layer .focus-card { background:linear-gradient(168deg,#FFF9F4,#FFFFFF 58%); border:1px solid #F0D4BE; border-radius:18px; padding:24px 26px; margin-bottom:22px; position:relative; overflow:hidden; box-shadow:var(--card-shadow); }
  #app-layer .focus-card .fc-flag { display:inline-flex; align-items:center; gap:7px; font-family:'SF Mono',monospace; font-size:10.5px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--beam-tekst); margin-bottom:12px; }
  #app-layer .focus-card .fc-flag .star { width:14px; height:14px; }
  #app-layer /* top-rij: vlag links, #app-layer type + impact rechts */
  .focus-card .fc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:4px; flex-wrap:wrap; }
  #app-layer .focus-card .fc-top .fc-flag { margin-bottom:0; }
  #app-layer .focus-card .fc-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
  #app-layer .focus-card .fc-type { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:5px; white-space:nowrap; }
  #app-layer .focus-card .fc-impact { display:flex; flex-direction:column; align-items:flex-end; gap:5px; }
  #app-layer .focus-card .fc-impact .ibar { width:110px; height:6px; border-radius:4px; background:var(--inset,#F4F5F0); overflow:hidden; }
  #app-layer .focus-card .fc-impact .ibar i { display:block; height:100%; border-radius:4px; background:var(--danger); }
  #app-layer .focus-card .fc-impact .iscore { font-family:'SF Mono',monospace; font-size:10px; color:var(--mist); }
  #app-layer .focus-card h2 { font-size:24px; font-weight:600; margin:0 0 8px; color:var(--foam); letter-spacing:-0.01em; }
  #app-layer .focus-card .fc-why { font-size:14.5px; color:var(--mist); margin:0 0 18px; max-width:62ch; line-height:1.5; }
  #app-layer .focus-card .fc-meta { display:flex; gap:22px; flex-wrap:wrap; margin-bottom:18px; }
  #app-layer .focus-card .fc-stat .v { font-size:21px; font-weight:700; color:var(--foam); }
  #app-layer .focus-card .fc-stat .l { font-size:11px; color:var(--fog); margin-top:2px; }
  /* DE PRIMAIRE KNOP (huisstijl). Stond eerst als '.focus-card .fc-cta', waardoor
     alleen de knop op Deze week hem kreeg. De knop op Advies had dezelfde klasse
     maar niet dezelfde ouder, en viel dus terug op een kale, ongestylede knop.
     Nu geldt de huisstijl voor ELKE .fc-cta, waar hij ook staat. */
  #app-layer .fc-cta { display:inline-flex; align-items:center; gap:8px; background:var(--beam-knop); color:#fff; font-weight:600; font-size:14px; padding:11px 18px; border-radius:10px; border:none; cursor:pointer; }
  #app-layer .fc-cta:hover { background:#1D3B2A; }

  #app-layer .prio-label { font-family:'SF Mono',monospace; font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--fog); font-weight:700; margin:26px 0 12px; }
  #app-layer .prio-list { display:flex; flex-direction:column; gap:10px; }
  #app-layer .prio { display:flex; align-items:center; gap:16px; background:var(--hull); border:1px solid var(--line); border-radius:13px; padding:14px 18px; cursor:pointer; transition:all .13s; }
  #app-layer .prio:hover { border-color:var(--violet); transform:translateX(2px); }
  #app-layer .prio .rank { font-family:'SF Mono',monospace; font-size:18px; font-weight:700; color:var(--fog); width:24px; text-align:center; flex-shrink:0; }
  #app-layer .prio .pbody { flex:1; min-width:0; }
  #app-layer .prio .ptitle { font-weight:600; font-size:15px; color:var(--foam); margin-bottom:3px; }
  #app-layer .prio .pmeta { font-size:12.5px; color:var(--mist); }
  #app-layer .prio .ptype { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:3px 9px; border-radius:5px; flex-shrink:0; }
  #app-layer .prio .pimpact { display:flex; flex-direction:column; align-items:flex-end; gap:5px; flex-shrink:0; width:118px; }
  #app-layer .prio .ibar { width:110px; height:6px; border-radius:4px; background:var(--hull-2); overflow:hidden; }
  #app-layer .prio .ibar i { display:block; height:100%; border-radius:4px; }
  #app-layer .prio .iscore { font-family:'SF Mono',monospace; font-size:10px; color:var(--fog); }
  #app-layer .tone-hoog { color:var(--danger-tekst); } #app-layer .tone-mid { color:var(--warn-tekst); } #app-layer .tone-kans { color:var(--ok-tekst); }
  #app-layer .bg-hoog { background:var(--danger); } #app-layer .bg-mid { background:var(--warn); } #app-layer .bg-kans { background:var(--ok); }
  /* Betekeniskleur komt ALTIJD als paar: verzadigde tekst op een zacht vlak.
     Een vol kleurvlak schreeuwt op deze lichte achtergrond. */
  #app-layer .pill-hoog     { background:var(--danger-bg); color:var(--danger-tekst); }
  #app-layer .pill-mid      { background:var(--warn-bg);   color:#7A5A12; }
  #app-layer .pill-kans     { background:var(--ok-bg);     color:var(--ok-tekst); }
  #app-layer .pill-seo      { background:var(--ok-bg);     color:var(--ok-tekst); }
  #app-layer .pill-sea      { background:#FDF0E7;          color:var(--beam-tekst); }
  #app-layer .pill-funnel   { background:#EAF0F5;          color:#4A6E8A; }
  #app-layer .pill-retentie { background:var(--warn-bg);   color:#7A5A12; }
  /* De vier types uit het adviesmodel */
  #app-layer .pill-verspilling { background:var(--danger-bg); color:var(--danger-tekst); }
  #app-layer .pill-meting      { background:var(--warn-bg);   color:#7A5A12; }
  #app-layer .pill-onderzoek   { background:#EAF0F5;          color:#4A6E8A; }

  #app-layer /* context strip */
  .ctx-strip { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 0; }
  #app-layer .ctx { flex:1; min-width:150px; background:var(--paper); border:1px solid var(--card-line); border-radius:10px; padding:11px 14px; }
  #app-layer .ctx .cl { font-family:'SF Mono',monospace; font-size:9px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:5px; display:flex; align-items:center; gap:5px; }
  #app-layer .ctx .cv { font-size:14px; font-weight:600; color:var(--ink); }
  #app-layer .ctx .cv small { font-weight:400; color:var(--ink-soft); font-size:12px; }
  #app-layer .ctx.impact .cv { color:var(--violet-dim); }
  #app-layer .first-step { margin-top:12px; background:var(--inset,#F4F5F0); border:1px solid #E3DCF6; border-radius:10px; padding:12px 15px; }
  #app-layer .first-step .fl { font-family:'SF Mono',monospace; font-size:9.5px; letter-spacing:0.06em; text-transform:uppercase; font-weight:700; color:var(--violet-dim); margin-bottom:5px; }
  #app-layer .first-step p { margin:0; font-size:13.5px; color:var(--ink); }

  #app-layer /* ===== Intake ===== */
  .body-pad { padding:26px 30px 70px; max-width:1280px; }
  #app-layer .intro { color:var(--mist); font-size:15px; max-width:66ch; margin:0 0 22px; }
  #app-layer .steps { display:flex; gap:0; margin-bottom:24px; flex-wrap:wrap; }
  #app-layer .pstep { display:flex; align-items:center; gap:9px; padding:0 18px 0 0; }
  #app-layer .pstep .num { width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); color:var(--fog); display:flex; align-items:center; justify-content:center; font-family:'SF Mono',monospace; font-size:12px; font-weight:700; }
  #app-layer .pstep.done .num { background:var(--beam-knop); border-color:var(--violet-dim); color:#fff; }
  #app-layer .pstep.active .num { background:var(--beam-knop); border-color:var(--violet); color:#fff; box-shadow:0 0 0 4px rgba(154,203,122,0.18); }
  #app-layer .pstep .lbl { font-size:12.5px; color:var(--mist); }
  #app-layer .pstep.done .lbl, #app-layer .pstep.active .lbl { color:var(--foam); font-weight:500; }
  #app-layer .pstep .arr { color:var(--fog); margin-left:14px; }
  #app-layer .fetch { background:var(--hull); border:1px solid var(--line); border-radius:14px; padding:16px 20px; margin-bottom:18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
  #app-layer .fetch .ga { width:34px; height:34px; border-radius:9px; background:#11202f; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
  #app-layer .fetch .ftxt .ft1 { font-weight:600; font-size:14px; }
  #app-layer .fetch .ftxt .ft2 { font-size:12px; color:var(--fog); font-family:'SF Mono',monospace; }
  #app-layer .fetch .stat { margin-left:auto; display:flex; align-items:center; gap:9px; font-family:'SF Mono',monospace; font-size:12px; }
  #app-layer .fetch .pill { background:var(--hull-2); border:1px solid var(--line); padding:5px 11px; border-radius:8px; color:var(--mist); }
  #app-layer .fetch .pill b { color:var(--foam); }
  #app-layer .approve-row { display:flex; align-items:center; gap:14px; margin-bottom:16px; background:var(--hull-2); border:1px solid var(--line); border-radius:12px; padding:13px 18px; }
  #app-layer .approve-row .ap-txt { font-size:13.5px; color:var(--mist); }
  #app-layer .approve-row .ap-txt b { color:var(--foam); }
  #app-layer .approve-bar { flex:1; height:7px; background:var(--hull); border-radius:5px; overflow:hidden; max-width:280px; }
  #app-layer .approve-bar i { display:block; height:100%; background:var(--ok); border-radius:5px; width:0%; transition:width .3s; }
  #app-layer .approve-row .ap-count { font-family:'SF Mono',monospace; font-size:12px; color:var(--ok-tekst); font-weight:700; }
  #app-layer .flegend { display:flex; gap:13px; flex-wrap:wrap; margin-bottom:14px; font-size:11.5px; color:var(--fog); align-items:center; }
  #app-layer .flegend .fl { display:inline-flex; align-items:center; gap:6px; }
  #app-layer .flegend .fdot { width:9px; height:9px; border-radius:50%; }
  #app-layer .ctbl-wrap { background:var(--paper); border-radius:16px; border:1px solid var(--card-line); overflow:hidden; box-shadow:var(--card-shadow); }
  #app-layer .ctbl-scroll { overflow-x:auto; }
  #app-layer table.ctbl { width:100%; border-collapse:collapse; font-size:13px; color:var(--ink); min-width:1180px; }
  #app-layer table.ctbl thead th { background:var(--paper-inset); text-align:left; font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-soft); font-weight:700; padding:11px 12px; border-bottom:1px solid var(--card-line); position:sticky; top:0; white-space:nowrap; }
  #app-layer table.ctbl tbody td { padding:9px 12px; border-bottom:1px solid var(--card-line); vertical-align:middle; }
  #app-layer table.ctbl tbody tr.confirmed td { background:#EAF4ED; }
  #app-layer table.ctbl tbody tr.confirmed:hover td { background:#E2F0E8; }
  #app-layer table.ctbl tbody tr:hover td { background:var(--paper-2); }
  #app-layer .fase-mark { display:inline-flex; align-items:flex-start; gap:8px; }
  #app-layer .fase-mark .fm-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:5px; }
  #app-layer .pg-id { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .pg-name { font-weight:600; font-size:13.5px; }
  #app-layer .pg-url { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .sel { font-family:inherit; font-size:12.5px; padding:6px 9px; border:1px solid var(--card-line); border-radius:7px; background:#fff; color:var(--ink); min-width:128px; cursor:pointer; }
  #app-layer .sel.fase { font-weight:600; }
  #app-layer .inp { font-family:'SF Mono',monospace; font-size:12px; padding:6px 9px; border:1px solid var(--card-line); border-radius:7px; background:#fff; color:var(--ink); width:84px; text-align:right; }
  #app-layer .inp.month { width:92px; text-align:left; }
  #app-layer .suggested { position:relative; }
  #app-layer .suggested::after { content:'voorstel'; position:absolute; top:-7px; right:-4px; font-family:'SF Mono',monospace; font-size:8px; font-weight:700; background:var(--beam); color:var(--green-900); padding:1px 5px; border-radius:4px; }
  #app-layer .end-empty { color:var(--fog); font-family:'SF Mono',monospace; font-size:11px; }
  #app-layer .followups { display:flex; flex-direction:column; gap:6px; }
  #app-layer .fu-hint { font-family:'SF Mono',monospace; font-size:11px; color:var(--fog); padding:2px 0 2px; }
  #app-layer .fu-row { display:flex; align-items:center; gap:6px; }
  #app-layer .fu-tag { font-family:'SF Mono',monospace; font-size:8.5px; font-weight:700; padding:2px 6px; border-radius:4px; white-space:nowrap; }
  #app-layer .fu-tag.primary { background:var(--inset,#F4F5F0); color:var(--violet-dim); }
  #app-layer .fu-tag.alt { background:#E7EDDF; color:#1F6485; }
  #app-layer .add-fu { font-family:'SF Mono',monospace; font-size:10.5px; color:var(--violet-dim); background:none; border:1px dashed var(--card-line); border-radius:6px; padding:4px 9px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .13s; }
  #app-layer .sel.is-anders { border-color:var(--violet); background:var(--inset,#F4F5F0); }
  #app-layer .add-fu:hover { background:var(--inset,#F4F5F0); border-color:var(--violet); }
  #app-layer .rm-fu { background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; opacity:0.55; }
  #app-layer .rm-fu:hover { opacity:1; color:var(--danger-tekst); }
  #app-layer .confirm-btn { display:inline-flex; align-items:center; gap:6px; font-family:'SF Mono',monospace; font-size:11px; font-weight:700; padding:7px 12px; border-radius:8px; cursor:pointer; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); transition:all .13s; white-space:nowrap; }
  #app-layer .confirm-btn:hover { border-color:var(--ok-dim); color:var(--ok-dim); }
  #app-layer .confirm-btn.done { background:var(--ok-dim); border-color:var(--ok-dim); color:#fff; }
  #app-layer .confirm-btn .tick { width:13px; height:13px; }
  #app-layer .review-row td { background:#FBF4E6; }
  #app-layer tr.review-row.confirmed td { background:#F2FAF5; }
  #app-layer .review-tag { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; background:#F6E3BC; color:#7a5b16; padding:2px 7px; border-radius:4px; }
  #app-layer .note { margin-top:18px; display:flex; gap:11px; align-items:flex-start; background:var(--hull); border:1px solid var(--line); border-radius:12px; padding:15px 18px; color:var(--mist); font-size:13.5px; }
  #app-layer .note .ic { color:var(--beam-tekst); font-weight:700; flex-shrink:0; }
  #app-layer .note b { color:var(--foam); }

  #app-layer /* ===== INTAKE KAART-INDELING ===== */
  .intake-cards { display:flex; flex-direction:column; gap:12px; }
  #app-layer .intake-card { background:var(--paper); border:1px solid var(--card-line); border-radius:13px; padding:0; overflow:hidden; transition:border-color .15s, box-shadow .15s; }
  #app-layer .intake-card:hover { box-shadow:var(--card-shadow); }
  #app-layer .intake-card.confirmed { border-color:var(--ok-dim); background:#F3FAF5; }
  #app-layer .intake-card.review-card { border-color:#E7C977; }
  #app-layer .intake-card.review-card.confirmed { border-color:var(--ok-dim); }
  #app-layer /* kaart-kop */
  .ic-head { display:flex; align-items:flex-start; gap:11px; padding:14px 18px; border-bottom:1px solid var(--card-line-soft); background:var(--paper-2); }
  #app-layer .ic-head .fm-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; margin-top:5px; }
  #app-layer .ic-head .ic-titlewrap { flex:1; min-width:0; }
  #app-layer .ic-head .ic-title { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
  #app-layer .ic-head .pg-id { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .ic-head .pg-name { font-weight:700; font-size:15px; color:var(--ink); }
  #app-layer .ic-head .pg-url { font-family:'SF Mono',monospace; font-size:11.5px; color:var(--ink-soft); margin-top:3px; }
  #app-layer /* kaart-body: velden in een grid */
  .ic-body { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:16px 18px; padding:16px 18px; align-items:start; }
  #app-layer .ic-field { min-width:0; }
  #app-layer .ic-field > label { display:block; font-family:'SF Mono',monospace; font-size:9px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
  #app-layer .ic-field .sel { width:100%; min-width:0; }
  #app-layer .ic-field.span2 { grid-column:span 2; }
  #app-layer .ic-startwaarde { display:flex; gap:8px; align-items:center; }
  #app-layer .ic-startwaarde .inp.month { width:104px; max-width:104px; flex-shrink:0; text-align:left; }
  #app-layer .ic-startwaarde .inp:not(.month) { width:100px; flex-shrink:0; }
  #app-layer /* kaart-voet: einddatum links, #app-layer bevestig rechts */
  .ic-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 18px; border-top:1px solid var(--card-line-soft); background:var(--paper-2); flex-wrap:wrap; }
  #app-layer .ic-foot .ic-eind { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); }
  #app-layer .ic-foot .ic-eind b { color:var(--warn-tekst); }

  @media (max-width:760px){
    #app-layer .ic-body { grid-template-columns:1fr; }
    #app-layer .ic-field.span2 { grid-column:span 1; }}

  #app-layer /* ===== INTAKE: TABS (Over de organisatie / Pagina's & route) ===== */
  .intake-tabs { display:flex; gap:6px; margin-bottom:18px; border-bottom:1px solid var(--line); }
  #app-layer .intake-tab { display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-size:14px; font-weight:600; padding:11px 18px; border:none; background:none; color:var(--fog); cursor:pointer; border-bottom:2.5px solid transparent; margin-bottom:-1px; transition:all .14s; }
  #app-layer .intake-tab:hover { color:var(--mist); }
  #app-layer .intake-tab.active { color:var(--foam); border-bottom-color:var(--signal); }
  #app-layer .intake-tab .it-num { width:20px; height:20px; border-radius:50%; background:var(--hull-2); color:var(--mist); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; font-family:'SF Mono',monospace; }
  #app-layer .intake-tab.active .it-num { background:var(--beam-knop); color:#fff; }
  #app-layer .intake-tab.done .it-num { background:var(--ok-dim); color:#fff; }
  #app-layer .intake-pane { display:none; }
  #app-layer .intake-pane.active { display:block; }

  #app-layer /* ===== KOPPELSTAP (verbind GA4 / Search Console) ===== */
  .verbind-intro { font-size:14px; color:var(--mist); line-height:1.6; margin-bottom:22px; max-width:680px; }
  #app-layer .verbind-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; }
  @media (max-width:820px){ #app-layer .verbind-grid { grid-template-columns:1fr; }}
  #app-layer .vb-card { background:var(--paper); border:1px solid var(--card-line); border-radius:16px; padding:22px 22px 18px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; transition:border-color .2s; }
  #app-layer .vb-card.connected { border-color:var(--ok-dim); }
  #app-layer .vb-card .vb-top { display:flex; align-items:flex-start; gap:13px; margin-bottom:14px; }
  #app-layer .vb-logo { width:44px; height:44px; border-radius:11px; background:var(--paper-2); border:1px solid var(--card-line); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .vb-logo svg { width:24px; height:24px; }
  #app-layer .vb-titlewrap { flex:1; min-width:0; }
  #app-layer .vb-title { font-size:16px; font-weight:700; color:var(--ink); }
  #app-layer .vb-badge { display:inline-block; font-family:'SF Mono',monospace; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:2px 8px; border-radius:20px; margin-top:5px; }
  #app-layer .vb-badge.req { background:#FBEAE5; color:var(--danger-tekst); }
  #app-layer .vb-badge.opt { background:var(--paper-inset); color:var(--ink-soft); }
  #app-layer .vb-desc { font-size:13px; color:var(--ink-soft); line-height:1.55; margin-bottom:8px; }
  #app-layer .vb-gets { font-size:12px; color:var(--fog); line-height:1.5; margin-bottom:16px; }
  #app-layer .vb-gets b { color:var(--ink-soft); font-weight:600; }
  #app-layer .vb-foot { margin-top:auto; }
  #app-layer .vb-status { display:flex; align-items:center; gap:9px; }
  #app-layer .vb-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
  #app-layer .vb-dot.off { background:var(--fog); }
  #app-layer .vb-dot.connecting { background:var(--warn); animation:vbpulse 1s ease-in-out infinite; }
  #app-layer .vb-dot.on { background:var(--ok-dim); }
  @keyframes vbpulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
  #app-layer .vb-status-txt { font-size:12.5px; font-weight:600; color:var(--ink-soft); }
  #app-layer .vb-status-txt.on { color:var(--ok-dim); }
  #app-layer .vb-btn { font-family:inherit; font-size:13.5px; font-weight:700; padding:11px 18px; border-radius:10px; border:none; cursor:pointer; width:100%; transition:all .15s; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  #app-layer .vb-btn.primary { background:var(--beam-knop); color:#fff; }
  #app-layer .vb-btn.primary:hover { background:var(--violet-dim); }
  #app-layer .vb-btn:disabled { opacity:0.6; cursor:default; }
  #app-layer .vb-btn svg { width:16px; height:16px; }
  #app-layer .vb-connected-row { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; background:var(--ok-bg); border:1px solid var(--ok-dim); border-radius:10px; }
  #app-layer .vb-connected-row .vc-left { display:flex; align-items:center; gap:9px; font-size:13px; font-weight:600; color:var(--ok-dim); }
  #app-layer .vb-connected-row .vc-left svg { width:16px; height:16px; }
  #app-layer .vb-disconnect { font-family:inherit; font-size:11.5px; font-weight:600; color:var(--ink-soft); background:none; border:none; cursor:pointer; text-decoration:underline; }
  #app-layer .vb-disconnect:hover { color:var(--danger-tekst); }
  #app-layer .vb-account { font-family:'SF Mono',monospace; font-size:11px; color:var(--ink-soft); margin-top:8px; }
  #app-layer .vb-trust { display:flex; align-items:flex-start; gap:10px; padding:13px 16px; background:var(--hull); border:1px solid var(--line); border-radius:12px; margin-bottom:22px; }
  #app-layer .vb-trust svg { width:17px; height:17px; stroke:var(--beam); fill:none; stroke-width:2; flex-shrink:0; margin-top:1px; }
  #app-layer .vb-trust .vt-body { font-size:12.5px; color:var(--mist); line-height:1.5; }
  #app-layer .vb-trust .vt-body b { color:var(--foam); }
  #app-layer .vb-help-link { color:var(--beam-tekst); font-weight:600; text-decoration:none; white-space:nowrap; }
  #app-layer .vb-help-link:hover { text-decoration:underline; }
  #app-layer .verbind-save-row { display:flex; align-items:center; gap:12px; }
  #app-layer .verbind-save { font-family:inherit; font-size:14px; font-weight:700; padding:11px 22px; border-radius:10px; border:none; background:var(--beam-knop); color:#fff; cursor:pointer; transition:all .15s; }
  #app-layer .verbind-save:hover:not(:disabled) { background:var(--violet-dim); }
  #app-layer .verbind-save:disabled { opacity:0.5; cursor:not-allowed; }
  #app-layer .verbind-save-note { font-size:12px; color:var(--fog); }

  #app-layer /* ===== CONTEXT-INTAKE (Over de organisatie) ===== */
  .ctx-intro { font-size:14px; color:var(--mist); line-height:1.6; margin-bottom:20px; max-width:680px; }
  #app-layer .ctx-grid { display:grid; grid-template-columns:1fr 340px; gap:20px; align-items:start; }
  @media (max-width:980px){ #app-layer .ctx-grid { grid-template-columns:1fr; }}
  #app-layer .ctx-blocks { display:flex; flex-direction:column; gap:14px; }
  #app-layer .ctx-block { background:var(--paper); border:1px solid var(--card-line); border-radius:14px; padding:18px 20px; box-shadow:var(--card-shadow); }
  #app-layer .ctx-block .cb-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
  #app-layer .ctx-block .cb-ic { width:30px; height:30px; border-radius:8px; background:var(--signal-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .ctx-block .cb-ic svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; }
  #app-layer .ctx-block .cb-title { font-size:15px; font-weight:700; color:var(--ink); }
  #app-layer .ctx-block .cb-sub { font-size:12.5px; color:var(--ink-soft); margin-bottom:14px; line-height:1.5; }
  #app-layer .ctx-block .cb-suggest { display:inline-flex; align-items:center; gap:6px; font-family:'SF Mono',monospace; font-size:10px; font-weight:700; padding:3px 9px; border-radius:20px; background:#EDE9F6; color:#6A5A9E; margin-left:auto; }
  #app-layer .ctx-block .cb-suggest svg { width:11px; height:11px; }

  #app-layer .ctx-field { margin-bottom:13px; }
  #app-layer .ctx-field:last-child { margin-bottom:0; }
  #app-layer .ctx-field > label { display:block; font-family:'SF Mono',monospace; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:6px; }
  #app-layer .ctx-field input[type=text], #app-layer .ctx-field select, #app-layer .ctx-field textarea { width:100%; font-family:inherit; font-size:13.5px; color:var(--ink); background:#fff; border:1px solid var(--card-line); border-radius:8px; padding:9px 11px; }
  #app-layer .ctx-field input:focus, #app-layer .ctx-field select:focus, #app-layer .ctx-field textarea:focus { outline:none; border-color:var(--signal-dim); }
  #app-layer .ctx-field textarea { min-height:50px; resize:vertical; }

  #app-layer /* segmented control (organisatietype) */
  .ctx-seg { display:flex; gap:8px; flex-wrap:wrap; }
  #app-layer .ctx-seg-opt { flex:1; min-width:90px; font-family:inherit; font-size:13px; font-weight:600; padding:10px 12px; border:1.5px solid var(--card-line); border-radius:9px; background:#fff; color:var(--ink-soft); cursor:pointer; text-align:center; transition:all .14s; }
  #app-layer .ctx-seg-opt:hover { border-color:var(--signal-dim); }
  #app-layer .ctx-seg-opt.active { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); color:var(--violet-dim); }

  #app-layer /* doelgroepen-lijst */
  .dg-list { display:flex; flex-direction:column; gap:9px; margin-bottom:12px; }
  #app-layer .dg-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--card-line); border-radius:9px; background:var(--paper-2); }
  #app-layer .dg-item.is-main { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); }
  #app-layer .dg-item .dg-name { flex:1; font-size:13.5px; font-weight:600; color:var(--ink); min-width:0; }
  #app-layer .dg-item .dg-traits { font-family:'SF Mono',monospace; font-size:10px; color:var(--ink-soft); }
  #app-layer .dg-main-btn { font-family:'SF Mono',monospace; font-size:9.5px; font-weight:700; padding:4px 10px; border-radius:20px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:all .13s; }
  #app-layer .dg-main-btn:hover { border-color:var(--signal-dim); }
  #app-layer .dg-item.is-main .dg-main-btn { background:var(--beam-knop); color:#fff; border-color:var(--signal-dim); }
  #app-layer .dg-del { background:none; border:none; color:var(--fog); cursor:pointer; font-size:15px; padding:2px 5px; border-radius:5px; }
  #app-layer .dg-del:hover { color:var(--danger-tekst); background:#FBEAE5; }
  #app-layer .dg-add { display:flex; gap:8px; }
  #app-layer .dg-add input { flex:1; }
  #app-layer .dg-add-btn { font-family:inherit; font-size:13px; font-weight:600; padding:9px 14px; border-radius:8px; border:1px solid var(--card-line); background:var(--paper-2); color:var(--violet-dim); cursor:pointer; white-space:nowrap; }
  #app-layer .dg-add-btn:hover { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); }

  #app-layer /* live principes-paneel (sticky rechts) */
  .ctx-principes { position:sticky; top:20px; background:linear-gradient(160deg,var(--hull-2),var(--hull)); border:1px solid var(--line); border-radius:16px; padding:20px 22px; }
  #app-layer .ctx-principes .cp-h { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.07em; text-transform:uppercase; font-weight:700; color:var(--beam-tekst); margin-bottom:6px; }
  #app-layer .ctx-principes .cp-lead { font-size:12.5px; color:var(--fog); line-height:1.5; margin-bottom:16px; }
  #app-layer .cp-principle { display:flex; align-items:flex-start; gap:11px; padding:11px 0; border-top:1px solid var(--line-soft); transition:opacity .2s; }
  #app-layer .cp-principle .cp-bar { width:4px; align-self:stretch; border-radius:3px; flex-shrink:0; background:var(--line); }
  #app-layer .cp-principle.w-hoog .cp-bar { background:var(--beam); }
  #app-layer .cp-principle.w-mid .cp-bar { background:var(--beam); }
  #app-layer .cp-principle.w-laag .cp-bar { background:var(--line); }
  #app-layer .cp-principle .cp-body { flex:1; min-width:0; }
  #app-layer .cp-principle .cp-name { font-size:13px; font-weight:600; color:var(--foam); }
  #app-layer .cp-principle .cp-why { font-size:11.5px; color:var(--fog); line-height:1.45; margin-top:3px; }
  #app-layer .cp-principle .cp-weight { font-family:'SF Mono',monospace; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; padding:2px 8px; border-radius:20px; white-space:nowrap; flex-shrink:0; }
  #app-layer .cp-principle.w-hoog .cp-weight { background:var(--inset,#F4F5F0); color:var(--signal); }
  #app-layer .cp-principle.w-mid .cp-weight { background:#E7EDDF; color:var(--beam-tekst); }
  #app-layer .cp-principle.w-laag .cp-weight { background:var(--hull-2); color:var(--fog); }
  #app-layer .cp-principle.dimmed { opacity:0.4; }

  #app-layer .ctx-save-row { display:flex; align-items:center; gap:12px; margin-top:18px; }
  #app-layer .ctx-save { font-family:inherit; font-size:14px; font-weight:700; padding:11px 22px; border-radius:10px; border:none; background:var(--beam-knop); color:#fff; cursor:pointer; transition:background .14s; }
  #app-layer .ctx-save:hover { background:var(--violet-dim); }
  #app-layer .ctx-save-note { font-size:12px; color:var(--fog); }

  #app-layer /* ===== SEIZOEN-LAAG (onder doelgroepen) ===== */
  .seizoen-block { background:var(--paper); border:1px solid var(--card-line); border-radius:14px; padding:18px 20px; box-shadow:var(--card-shadow); }
  #app-layer /* top-markten lijst */
  .mk-head { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-bottom:10px; }
  #app-layer .mk-head-sub { font-weight:400; text-transform:none; letter-spacing:0; color:var(--fog); }
  #app-layer .mk-list { display:flex; flex-direction:column; gap:4px; margin-bottom:14px; }
  #app-layer .mk-row { display:flex; align-items:center; gap:11px; width:100%; padding:8px 11px; border:1px solid transparent; border-radius:9px; background:var(--paper-2); cursor:pointer; transition:all .13s; text-align:left; font-family:inherit; }
  #app-layer .mk-row:hover { background:#fff; border-color:var(--card-line); }
  #app-layer .mk-row.active { background:var(--inset,#F4F5F0); border-color:var(--signal-dim); }
  #app-layer .mk-flag { font-size:16px; flex-shrink:0; }
  #app-layer .mk-naam { font-size:13px; font-weight:600; color:var(--ink); white-space:nowrap; display:flex; align-items:center; gap:7px; flex-shrink:0; min-width:130px; }
  #app-layer .mk-zuid { font-family:'SF Mono',monospace; font-size:8px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:2px 6px; border-radius:20px; background:#E7EDDF; color:#1F5A85; }
  #app-layer .mk-pct { font-family:'SF Mono',monospace; font-size:12px; font-weight:700; color:var(--ink); width:48px; text-align:right; flex-shrink:0; }
  #app-layer .mk-bar { flex:1; display:flex; height:11px; border-radius:4px; overflow:hidden; background:var(--paper-inset); min-width:80px; }
  #app-layer .mk-seg { height:100%; }
  #app-layer /* markt-inzicht */
  .mk-insight { display:flex; align-items:center; gap:11px; padding:11px 14px; background:#E7EDDF; border:1px solid rgba(154,203,122,0.30); border-radius:10px; margin-bottom:14px; }
  #app-layer .mk-insight .mki-ic { width:26px; height:26px; border-radius:7px; background:var(--beam); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .mk-insight .mki-ic svg { width:15px; height:15px; stroke:var(--abyss); }
  #app-layer .mk-insight .mki-body { flex:1; min-width:0; font-size:12.5px; color:var(--ink); line-height:1.45; }
  #app-layer .mk-insight .mki-confirm { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11px; font-weight:700; padding:5px 11px; border-radius:7px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .13s; }
  #app-layer .mk-insight .mki-confirm:hover { background:var(--ok-bg); border-color:var(--ok-dim); color:var(--ok-dim); }
  #app-layer .mk-insight .mki-confirm svg { width:11px; height:11px; }
  #app-layer .mki-actions { display:flex; gap:7px; flex-shrink:0; }
  #app-layer .mk-insight .mki-edit { display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:11px; font-weight:700; padding:5px 11px; border-radius:7px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; white-space:nowrap; transition:all .13s; }
  #app-layer .mk-insight .mki-edit:hover { background:var(--inset,#F4F5F0); border-color:var(--signal-dim); color:var(--violet-dim); }
  #app-layer .mk-insight .mki-edit svg { width:11px; height:11px; }
  #app-layer .mki-status { display:inline-flex; align-items:center; gap:5px; font-family:'SF Mono',monospace; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:5px 11px; border-radius:7px; flex-shrink:0; white-space:nowrap; }
  #app-layer .mki-status.ok { background:var(--ok-bg); color:var(--ok-dim); }
  #app-layer .mki-status.edit { background:var(--inset,#F4F5F0); color:var(--violet-dim); }
  #app-layer .mki-status svg { width:11px; height:11px; }
  #app-layer .mki-edit-form { display:flex; gap:7px; flex:1; min-width:200px; }
  #app-layer .mki-input { flex:1; font-family:inherit; font-size:12px; color:var(--ink); background:#fff; border:1px solid var(--signal-dim); border-radius:7px; padding:6px 10px; }
  #app-layer .mki-input:focus { outline:none; border-color:var(--violet-dim); }
  #app-layer .mki-save { font-family:inherit; font-size:11px; font-weight:700; padding:6px 13px; border-radius:7px; border:none; background:var(--beam-knop); color:#fff; cursor:pointer; white-space:nowrap; }
  #app-layer .mki-save:hover { background:var(--violet-dim); }
  #app-layer .mki-correctie { font-size:11.5px; color:var(--violet-dim); margin-top:6px; padding-top:6px; border-top:1px dashed var(--card-line); }
  #app-layer .mki-correctie b { color:var(--ink); }
  #app-layer /* simpele markt-bevestiging (intake) */
  .mk-simple-block { }
  #app-layer .mk-row-simple { display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:9px; background:var(--paper-2); margin-bottom:4px; }
  #app-layer .mk-row-simple.is-hoofd { background:var(--inset,#F4F5F0); border:1px solid var(--signal-dim); }
  #app-layer .mk-row-simple .mk-naam { flex:1; }
  #app-layer .mk-hoofd-tag { font-family:'SF Mono',monospace; font-size:8.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; padding:2px 8px; border-radius:20px; background:var(--beam-knop); color:#fff; flex-shrink:0; }

  #app-layer /* read-only markten in Inzichten (donkere sectie) */
  .iz-markten-inner .sz-dg { border-top-color:var(--line-soft); }
  #app-layer .iz-markten-inner .sz-dg-name { color:var(--foam); }
  #app-layer .iz-markten-inner .sz-detect { color:var(--fog); }
  #app-layer .iz-markten-inner .sz-detect b { color:var(--beam-tekst); }
  #app-layer .iz-markten-inner .sz-divider { color:var(--beam-tekst); }
  #app-layer .iz-markten-inner .sz-divider::after { background:var(--line); }
  #app-layer .iz-markten-inner .sz-mlabel { color:var(--mist); }
  #app-layer .iz-markten-inner .sz-bar-wrap.peak .sz-mlabel { color:var(--beam-tekst); }
  #app-layer .iz-markten-inner .sz-bar { background:var(--inset,#F4F5F0); }
  #app-layer .iz-markten-inner .sz-bar-track { background:transparent; }
  #app-layer .iz-markten-inner .sz-insight { background:var(--hull-2); border-color:var(--line); }
  #app-layer .iz-markten-inner .sz-insight .si-body { color:var(--mist); }
  #app-layer .iz-markten-inner .sz-insight .si-body b { color:var(--foam); }
  #app-layer .iz-markten-inner .mk-insight { background:#E7EDDF; border-color:rgba(154,203,122,0.30); }
  #app-layer .iz-markten-inner .mk-insight .mki-body { color:var(--mist); }
  #app-layer .iz-markten-inner .mk-insight .mki-body b { color:var(--foam); }
  #app-layer .iz-markten-inner .mk-bar { background:var(--inset,#F4F5F0); }
  #app-layer .sz-markt { display:flex; align-items:center; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
  #app-layer .sz-markt .sz-markt-lbl { font-family:'SF Mono',monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); margin-right:4px; }
  #app-layer .sz-markt-opt { font-family:inherit; font-size:12.5px; font-weight:600; padding:6px 13px; border:1px solid var(--card-line); border-radius:8px; background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .13s; display:inline-flex; align-items:center; gap:6px; }
  #app-layer .sz-markt-opt:hover { border-color:var(--signal-dim); }
  #app-layer .sz-markt-opt.active { border-color:var(--signal-dim); background:var(--inset,#F4F5F0); color:var(--violet-dim); }
  #app-layer .sz-markt-opt .flag { font-size:14px; }

  #app-layer .sz-dg { padding:14px 0; border-top:1px solid var(--card-line-soft); }
  #app-layer .sz-dg:first-of-type { border-top:none; padding-top:4px; }
  #app-layer .sz-dg-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
  #app-layer .sz-dg-name { font-size:13.5px; font-weight:700; color:var(--ink); display:flex; align-items:center; gap:8px; }
  #app-layer .sz-dg-name .main-pill { font-family:'SF Mono',monospace; font-size:8.5px; font-weight:700; text-transform:uppercase; padding:2px 7px; border-radius:20px; background:var(--inset,#F4F5F0); color:var(--violet-dim); }
  #app-layer .sz-detect { font-size:11.5px; color:var(--ink-soft); }
  #app-layer .sz-detect b { color:var(--violet-dim); }
  #app-layer /* 12-maands balkjes */
  .sz-bars { display:flex; gap:3px; align-items:flex-end; height:54px; margin-bottom:7px; }
  #app-layer .sz-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; }
  #app-layer .sz-bar-track { width:100%; height:46px; display:flex; align-items:flex-end; border-radius:4px 4px 0 0; overflow:hidden; }
  #app-layer .sz-bar { width:100%; background:var(--card-line); border-radius:4px 4px 0 0; transition:background .14s, height .2s; min-height:3px; }
  #app-layer .sz-bar-wrap.peak .sz-bar { background:linear-gradient(180deg,var(--signal),var(--signal-dim)); }
  #app-layer .sz-bar-wrap.dip .sz-bar { background:#D8C5BF; }
  #app-layer .sz-bar-wrap:hover .sz-bar { filter:brightness(1.08); }
  #app-layer .sz-mlabel { font-family:'SF Mono',monospace; font-size:8.5px; color:var(--ink-soft); text-transform:uppercase; }
  #app-layer .sz-bar-wrap.peak .sz-mlabel { color:var(--violet-dim); font-weight:700; }
  #app-layer .sz-dg-foot { display:flex; align-items:center; gap:10px; margin-top:9px; flex-wrap:wrap; }
  #app-layer .sz-confirm { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:7px; border:1px solid var(--card-line); background:var(--paper-2); color:var(--ink-soft); cursor:pointer; transition:all .13s; }
  #app-layer .sz-confirm:hover { border-color:var(--ok-dim); color:var(--ok-dim); }
  #app-layer .sz-confirm.confirmed { background:var(--ok-bg); border-color:var(--ok-dim); color:var(--ok-dim); }
  #app-layer .sz-confirm svg { width:12px; height:12px; }
  #app-layer .sz-edit-btn { display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:7px; border:1px solid var(--card-line); background:#fff; color:var(--ink-soft); cursor:pointer; transition:all .13s; }
  #app-layer .sz-edit-btn:hover { border-color:var(--signal-dim); color:var(--violet-dim); background:var(--inset,#F4F5F0); }
  #app-layer .sz-edit-btn svg { width:12px; height:12px; }
  #app-layer .sz-editing { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--violet-dim); }
  #app-layer .sz-editing svg { width:13px; height:13px; }
  #app-layer .sz-dg.is-editing { background:#F6F4FE; border-radius:10px; padding:12px 14px; margin:0 -14px; }
  #app-layer .sz-dg.is-editing .sz-bar-wrap { cursor:pointer; }
  #app-layer .sz-dg.is-editing .sz-bar-wrap:hover .sz-bar { outline:2px solid var(--signal); outline-offset:1px; }
  #app-layer .sz-dg:not(.is-editing) .sz-bar-wrap { cursor:default; }
  #app-layer .sz-hint { font-size:11px; color:var(--fog); font-style:italic; }
  #app-layer .sz-hint b { color:var(--ink-soft); font-style:normal; }
  #app-layer /* normale-daling inzicht */
  .sz-insight { display:flex; align-items:flex-start; gap:10px; margin-top:14px; padding:12px 14px; background:var(--paper-2); border:1px solid var(--card-line); border-left:3px solid var(--beam); border-radius:10px; }
  #app-layer .sz-insight .si-ic { width:26px; height:26px; border-radius:7px; background:var(--beam); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  #app-layer .sz-insight .si-ic svg { width:15px; height:15px; stroke:var(--abyss); fill:none; stroke-width:2; }
  #app-layer .sz-insight .si-body { font-size:12.5px; color:var(--ink); line-height:1.5; }
  #app-layer .sz-insight .si-body b { font-weight:700; }

/* app-layer neemt het hele scherm in zodra zichtbaar */
#app-layer { min-height:100vh; }

/* login-foutmelding */
.login-error { display:none; background:var(--danger-bg); color:var(--danger-tekst); font-size:13px; padding:10px 13px; border-radius:9px; margin-bottom:16px; border:1px solid #5a2f2b; }

  /* ═══════════════════════════════════════════════════════════════
     MOBIEL. Onder de 600px.

     LET OP DE PLEK: dit blok staat ACHTERAAN de stylesheet, en dat is geen
     opmaakkeuze maar een noodzaak. Een media query voegt GEEN specificiteit toe.
     Stond dit blok bovenaan, dan won `#app-layer .tkr` verderop alsnog, en dan
     verandert er niets. Ik had het eerst op regel 407 gezet, terwijl .tkr op
     1200 staat. Gemeten resultaat: nul verbetering.

     GEMETEN VOOR DEZE FIX (iPhone, 390px):
       Taken:   434 elementen buiten beeld, 103 knoppen kleiner dan 40px
       Advies:  145 buiten beeld
       Elk scherm scrollde HORIZONTAAL. Je veegt naar beneden en het
       scherm schuift opzij. Dat is de dodelijke.

     DE OORZAAK was niet "geen media queries" maar twee dingen:
       1. .tkr had grid-template-columns:22px 1fr auto 26px. Die 'auto'
          krimpt niet mee: de badge en de duur duwden de rij tot 459px.
       2. .tkr-vink was 19x19px. Dat is een vinkje voor een muis, niet
          voor een duim. Apple houdt 44px aan, Google 48px.
     ═══════════════════════════════════════════════════════════════ */
  @media (max-width:600px){

    /* De schermrand at 60px van de 390 op. */
    #app-layer .screen { padding:18px 14px 90px; }

    /* DE KOPBALK duwde de pagina 6px breder dan het scherm. Op 360px (een
       gewone Android) schoof daardoor ELK scherm opzij als je veegde. Zes pixels.
       De klassieke flexbox-val: een flex-kind heeft min-width:auto en krimpt niet
       onder zijn inhoud. */
    #app-layer .topbar, #app-layer .tb-right, #app-layer .tb-left { min-width:0; }
    #app-layer .tb-right { flex-shrink:1; overflow:hidden; }
    #app-layer .tb-right > * { min-width:0; }
    #app-layer .body-pad { padding-left:0; padding-right:0; }

    /* ── DE TAAKREGEL ──
       Niet meer vier kolommen naast elkaar, maar het vinkje links en de
       rest eronder. De badge en de duur zakken naar hun eigen regel. */
    #app-layer .tkr { grid-template-columns:44px 1fr; gap:8px; padding:12px 10px;
                      align-items:center; }
    #app-layer .tkr-mid { grid-column:2; min-width:0; }
    #app-layer .tkr-meta { gap:7px; margin-top:6px; }
    #app-layer .tkr-meer { grid-column:2; justify-self:start; margin-top:6px; }
    #app-layer .tkr-t { font-size:14.5px; line-height:1.5; word-break:break-word; }

    /* HET VINKJE. Het blijft er even groot uitzien, maar het RAAKVLAK is
       44x44. Een knop die je moet mikken is een knop die je mist. */
    #app-layer .tkr-vink { width:44px; height:44px; font-size:15px; }
    #app-layer .tkr-meer { min-width:44px; height:44px; padding:0 10px; }
    #app-layer .tw-leeg, #app-layer .tm-skill-toggle,
    #app-layer .ta-avatar { min-height:44px; min-width:44px; }

    /* DE INTAKE-TABS liepen tot 557px. Vier tabs naast elkaar passen niet op
       390px. Ze mogen scrollen in hun eigen balk, want de pagina mag dat niet. */
    #app-layer .intake-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch;
                              flex-wrap:nowrap; scrollbar-width:none;
                              padding-bottom:4px; }
    #app-layer .intake-tabs::-webkit-scrollbar { display:none; }
    #app-layer .intake-tab { flex-shrink:0; white-space:nowrap; min-height:44px; }

    /* Alles wat je kunt aanraken minstens 44px hoog. */
    #app-layer button, #app-layer select, #app-layer input[type=text],
    #app-layer input[type=email], #app-layer input[type=password] { min-height:44px; }

    /* ── CIJFERSTRIPS ──
       fc-stat liep tot 458px. Twee naast elkaar, niet vier. */
    #app-layer .fc-meta { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    #app-layer .ctx-strip { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    #app-layer .ctx { min-width:0; padding:9px 11px; }
    #app-layer .ctx .cv { font-size:15px; }
    #app-layer .afg-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

    /* ── PRODUCTKAART op mobiel ──
       Vijf kolommen passen niet op 390px. De productnaam en de acties krijgen
       een eigen regel; de drie cijfers (verkocht/prijs/koopkans) staan eronder. */
    #app-layer .dp-th { display:none; }   /* de koprij heeft geen zin zonder kolommen */
    #app-layer .dp-tr { grid-template-columns:1fr; gap:4px; padding:13px 0; }
    #app-layer .dp-n { font-size:15px; font-weight:600; }
    #app-layer .dp-c { display:inline-flex; gap:5px; font-size:13px; }
    /* de drie cijfers naast elkaar op één regel, met een label ervoor */
    #app-layer .dp-verkocht::before { content:'\2713 '; color:var(--fog); }
    #app-layer .dp-prijs::before { content:'\20ac\00a0'; color:var(--fog); }
    #app-layer .dp-tr > .dp-c { grid-column:1; }
    #app-layer .dp-acties { justify-content:flex-start; margin-top:6px; }
    #app-layer .dp-btn { padding:9px 14px; }   /* ruimer aantikbaar */

    /* ── FORMULIEREN ── één kolom, altijd. */
    #app-layer .fn-grid, #app-layer .verbind-grid,
    #app-layer .ctx-grid, #app-layer .doel-grid { grid-template-columns:1fr !important; }
    #app-layer .basis-blok { padding:16px 14px; }

    /* ── DEZE WEEK ── de twee deuren onder elkaar, volle breedte. */
    #app-layer .dw-deuren { flex-direction:column; }
    #app-layer .dw-deuren button { width:100%; justify-content:center; }
    #app-layer .focus-card { padding:18px 15px; }
    #app-layer .focus-card h2 { font-size:20px; line-height:1.3; }

    /* ── ADVIES ── */
    #app-layer .deepadv { padding:16px 14px; }
    #app-layer .da-title { font-size:18px; line-height:1.3; }
    #app-layer .da-uitkomst { flex-direction:column; align-items:stretch; }
    #app-layer .da-uitkomst button { width:100%; justify-content:center; }

    /* ── DE VRAAG-TAAK ── de antwoorden zijn het belangrijkste op dit
       scherm. Ze moeten ruim en aantikbaar zijn. */
    #app-layer .tkr-vraag { padding:13px 12px; }
    #app-layer .tv-optie { padding:13px 13px; }
    #app-layer .tv-lbl { font-size:15px; }

    /* ── TABELLEN ──
       Een tabel die niet past, laat je SCROLLEN in zijn eigen kader.
       Niet de pagina. Anders schuift je hele scherm opzij als je veegt. */
    #app-layer .tbl-wrap, #app-layer .tabel-omhulsel {
      overflow-x:auto; -webkit-overflow-scrolling:touch; }
    #app-layer table { min-width:520px; }
    #app-layer table th, #app-layer table td { padding:9px 10px; font-size:13px; }

    /* ── AFGEROND ── de datum onder de taak, niet ernaast. */
    #app-layer .af-rij { flex-wrap:wrap; }
    #app-layer .af-d { width:100%; margin-top:5px; margin-left:32px; }
    #app-layer .afg-adv { flex-wrap:wrap; }
    #app-layer .afg-meet { margin-left:34px; margin-top:5px; }

    /* ── CAPACITEIT & TEAM ── */
    #app-layer .cap-rij, #app-layer .tc-grid { grid-template-columns:1fr !important; }
    #app-layer .cap-naam { font-size:14px; }

    /* ── KOPPEN ── serif-koppen breken lelijk op smalle schermen. */
    #app-layer h1 { font-size:24px; line-height:1.25; }
    #app-layer h2 { font-size:20px; line-height:1.3; }
    #app-layer .lead-line, #app-layer .week-intro { font-size:14px; line-height:1.6; }

    /* ── LIVE ──
       .ld-info is een inline-flex die niet afbreekt: de tip ernaast werd
       naar buiten geduwd. Op een telefoon breekt hij af. */
    #app-layer .ld-info { display:flex; flex-wrap:wrap; max-width:100%; }
    #app-layer .ld-tip { white-space:normal; word-break:break-word; }
    #app-layer .ld-kpi { padding:13px 12px; min-width:0; }
    #app-layer .ld-vgl { white-space:normal; word-break:break-word; max-width:100%; }

    /* DE KLASSIEKE FLEXBOX-VAL.
       Een flex-kind heeft standaard min-width:auto, en krimpt dus NIET onder zijn
       inhoud. Zo duwt .ld-head zijn kinderen naar buiten. min-width:0 lost dat op,
       en het is de reden dat je bijna elke flexbox-overflow op deze regel oplost. */
    #app-layer .live-dash, #app-layer .live-dash * { min-width:0; }
    #app-layer .ld-head { flex-wrap:wrap; gap:8px; }
    #app-layer .ld-info { flex:1 1 auto; min-width:0; }
    #app-layer .ld-kpis { grid-template-columns:1fr 1fr; gap:10px; }
    #app-layer .ld-kpi-top { flex-wrap:wrap; }

    /* ── GRAFIEKEN ── */
    #app-layer canvas { max-width:100% !important; height:auto !important; }
  }

  /* TABLET. Een iPad wordt met een VINGER bediend, niet met een muis. Mijn
     44px-regel gold alleen onder 600px, dus op tablet bleven 74 knoppen te
     klein. Een aanraakscherm is een aanraakscherm, ongeacht de breedte. */
  @media (min-width:601px) and (max-width:1024px) and (pointer:coarse){
    #app-layer .tkr-vink { width:44px; height:44px; }
    #app-layer .tkr-meer { min-width:44px; height:44px; }
    #app-layer .tw-leeg, #app-layer .tm-skill-toggle,
    #app-layer .ta-avatar { min-height:44px; min-width:44px; }
    #app-layer button, #app-layer select, #app-layer input { min-height:44px; }
  }

  /* En dezelfde maat op een tablet zonder pointer-detectie (oudere browsers,
     en de testomgeving). Zonder deze regel test je iets anders dan de klant ziet. */
  @media (min-width:601px) and (max-width:1024px){
    #app-layer .tkr-vink { width:40px; height:40px; }
    #app-layer .tkr-meer { min-width:40px; height:40px; }
    #app-layer .tw-leeg, #app-layer .tm-skill-toggle { min-height:40px; }
    #app-layer button, #app-layer select { min-height:40px; }
  }

  /* ===== BEHEER (alleen Plotta) =====
     Een overzichtsscherm, geen adviespagina: rustig, tabelachtig, en het moet in
     een oogopslag laten zien wat WEL en NIET bij de klant staat. Alleen tokens,
     geen vaste kleuren, zodat het meebeweegt met het thema. */
  #app-layer .bh-klant { margin:0 0 30px; }
  #app-layer .bh-klant-kop { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
    padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid var(--line); }
  #app-layer .bh-klant-kop h3 { font-family:Newsreader,Georgia,serif; font-size:19px; margin:0; color:var(--foam); }
  #app-layer .bh-klant-tel { font-size:13px; color:var(--mist); }
  #app-layer .bh-open-btn { margin-left:auto; font-size:13px; padding:6px 12px; border-radius:9px;
    border:1px solid var(--card-line); background:var(--paper); color:var(--signal); cursor:pointer; }
  #app-layer .bh-open-btn:hover { border-color:var(--signal); }
  #app-layer .bh-open-btn[disabled] { color:var(--mist); cursor:default; border-color:var(--line-soft); }

  #app-layer .bh-rij { display:grid; grid-template-columns:1fr auto auto; gap:10px 16px; align-items:center;
    background:var(--paper); border:1px solid var(--card-line); border-radius:12px;
    padding:12px 15px; margin-bottom:8px; box-shadow:var(--card-shadow); }
  #app-layer .bh-rij-kop { font-size:14.5px; color:var(--foam); font-weight:500; }
  #app-layer .bh-rij-meta { font-size:12.5px; color:var(--mist); margin-top:3px; }
  #app-layer .bh-rij-meta code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }

  /* De status is de kern van dit scherm: drie toestanden, drie kleuren, en de
     reden staat erbij. Een bolletje zonder uitleg dwingt je te raden. */
  #app-layer .bh-status { font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; white-space:nowrap; }
  #app-layer .bh-status.zichtbaar     { background:var(--ok-bg);     color:var(--ok-tekst); }
  #app-layer .bh-status.wacht         { background:var(--warn-bg);   color:var(--warn-tekst); }
  #app-layer .bh-status.tegengehouden { background:var(--danger-bg); color:var(--danger-tekst); }
  #app-layer .bh-redenen { font-size:12px; color:var(--mist); white-space:nowrap; }
  #app-layer .bh-taken { font-size:12.5px; color:var(--mist); white-space:nowrap; }

  #app-layer .bh-leeg { font-size:13.5px; color:var(--mist); font-style:italic; padding:10px 2px 4px; }
  #app-layer .bh-sectie-h { font-family:Newsreader,Georgia,serif; font-size:22px; color:var(--foam);
    margin:34px 0 6px; }
  #app-layer .bh-sectie-p { font-size:13.5px; color:var(--mist); margin:0 0 16px; max-width:70ch; }

  /* De herkomstmelding. Dit scherm leest de adviezen uit CODE, niet uit de
     database: het toont dus de stand van de laatste deploy. Dat verzwijgen zou
     het overzicht betrouwbaarder laten lijken dan het is. */
  #app-layer .bh-bron { display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--warn-tekst);
    background:var(--warn-bg); border-radius:10px; padding:10px 13px; margin:0 0 22px; max-width:76ch; }

  @media (max-width:700px){
    #app-layer .bh-rij { grid-template-columns:1fr; }
    #app-layer .bh-redenen, #app-layer .bh-taken { white-space:normal; }
    #app-layer .bh-open-btn { margin-left:0; }
    /* In een kolom van 1fr rekt de pil over de volle breedte uit en leest hij
       als een balk in plaats van een label. Links uitlijnen op zijn eigen maat. */
    #app-layer .bh-status { justify-self:start; }
  }