/* ==========================================================================
   dashboard.collegaonline.nl — concept
   Zelfde taal als de homepage en het klantplatform: warm zwart, warm papier,
   een accent oranje. Archivo voor koppen, IBM Plex Mono voor labels en cijfers.
   Grafiekkleuren zijn apart gevalideerd per thema (CVD + contrast), zie --s1..--s4.
   ========================================================================== */
/* Licht is de standaard; donker staat onder [data-thema="donker"].
   De vier grafiekkleuren per thema zijn apart gevalideerd op contrast en kleurenblindheid. */
:root{
  --bg:#efe8dc; --panel:#f8f4ec; --panel-2:#fffdf8; --ink:#141210;
  --ink-2:#4a453e; --muted:#6f685e; --line:rgba(20,18,16,.14);
  --accent:#d9471a; --accent-ink:#fffdf8;
  --goed:#2f7d4c; --let-op:#9a6a10; --stop:#b63a2f;
  --s1:#c74a16; --s2:#00897c; --s3:#6554c8; --s4:#946f00;
  --font:"Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.76,0,.24,1); --r:3px;
}
:root[data-thema="donker"]{
  --bg:#0f0d0b; --panel:#15120f; --panel-2:#1b1714; --ink:#f2ebdf;
  --ink-2:rgba(242,235,223,.72); --muted:#8a8378; --line:rgba(242,235,223,.13);
  --accent:#ff5a1f; --accent-ink:#141210;
  --goed:#4fae6b; --let-op:#d99a2b; --stop:#d9534a;
  --s1:#e05a1e; --s2:#1f9b8e; --s3:#8878dd; --s4:#ab8c3a;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.03em;line-height:1.05;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em}
.label{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:.2rem;padding:1.1rem .85rem;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;align-items:baseline;gap:.1rem;font-weight:800;letter-spacing:-.03em;font-size:1.05rem;padding:.2rem .5rem 1rem}
.brand i{font-style:normal;color:var(--accent)}
.shop{display:flex;gap:.6rem;align-items:center;padding:.6rem .5rem;border-block:1px solid var(--line);margin-bottom:.9rem}
.shop .mark{width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-size:.8rem;flex:none}
.shop b{display:block;font-size:.9rem;letter-spacing:-.01em}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.52rem .5rem;border-radius:var(--r);color:var(--ink-2);font-size:.9rem;transition:background .18s var(--ease),color .18s var(--ease)}
.nav button:hover{background:var(--panel-2);color:var(--ink)}
.nav button[aria-current="page"]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.nav .dot{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45;flex:none}
.nav button[aria-current="page"] .dot{opacity:1}
.plan{margin-top:auto;border:1px solid var(--line);border-radius:var(--r);padding:.8rem}
.plan .tier{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;margin-bottom:.35rem}
.plan b{font-size:1.5rem;letter-spacing:-.04em}
.plan p{color:var(--muted);font-size:.78rem}

/* ---------- main ---------- */
.main{min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,2.4vw,2rem);border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);z-index:5}
.crumb{display:flex;align-items:center;gap:.5rem;color:var(--muted)}
.crumb b{color:var(--ink);font-weight:700;letter-spacing:-.01em}
.top-acts{display:flex;align-items:center;gap:.5rem}
.ghost{border:1px solid var(--line);border-radius:var(--r);padding:.45rem .75rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;transition:border-color .18s var(--ease),background .18s var(--ease)}
.ghost:hover{border-color:var(--ink-2);background:var(--panel)}
.page{padding:clamp(1.1rem,2.4vw,2rem);display:flex;flex-direction:column;gap:1.1rem;max-width:1380px;width:100%}
.head h1{font-size:clamp(1.7rem,2.9vw,2.5rem)}
.head p{color:var(--ink-2);margin-top:.5rem;max-width:56ch}
.head .label{margin-bottom:.55rem;color:var(--accent)}

/* ---------- panels ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;border-bottom:1px solid var(--line)}
.panel-h h2{font-size:1rem;letter-spacing:-.015em}
.panel-b{padding:1rem}
.grid{display:grid;gap:1.1rem}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}


/* ---------- je collega ---------- */
.collega{padding:1.15rem 1.4rem;display:flex;flex-direction:column;gap:.5rem}
.collega h2{font-size:clamp(1.15rem,1.8vw,1.45rem)}
.collega p{color:var(--ink-2);font-size:.95rem;max-width:64ch}
.collega .label{display:flex;align-items:center;gap:.45rem}
.collega .label i{width:6px;height:6px;border-radius:50%;background:var(--goed);box-shadow:0 0 0 3px color-mix(in srgb,var(--goed) 22%,transparent)}

/* De collega rechtsonder kijkt alleen mee: hij volgt de muis en doet verder niets.
   Daarom staat hij buiten de tabvolgorde en vangt hij geen klikken op. */
#maatje{position:fixed;right:clamp(.25rem,1.4vw,1.4rem);bottom:0;width:clamp(150px,13vw,215px);height:clamp(175px,16vw,250px);
  z-index:4;pointer-events:none;filter:drop-shadow(0 14px 26px color-mix(in srgb,var(--ink) 16%,transparent))}
#maatje canvas{width:100%;height:100%;display:block}
@media (max-width:1100px){#maatje{display:none}}
@media (prefers-reduced-motion:reduce){#maatje{display:none}}

/* ---------- planning ---------- */
.plan-row{display:grid;grid-template-columns:7.6rem 1fr auto;gap:.9rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.plan-row:last-child{border-bottom:0}
.plan-row .wanneer{font-family:var(--mono);font-size:.72rem;color:var(--muted);line-height:1.3}
.plan-row .wanneer b{display:block;color:var(--ink);font-family:var(--font);font-size:.86rem;letter-spacing:-.01em}
.plan-row b.wat{font-size:.92rem;font-weight:700;letter-spacing:-.01em}
.plan-row small{display:block;color:var(--muted);font-family:var(--mono);font-size:.7rem;margin-top:.1rem}
.plan-row .r{display:flex;gap:.6rem;align-items:center;flex:none}
dialog{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink);padding:0;width:min(440px,92vw)}
dialog::backdrop{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(3px)}
.veld{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.8rem}
.veld input,.veld select,.veld textarea{font:inherit;font-size:.9rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.5rem .6rem}
.veld textarea{resize:vertical;min-height:3.4rem}
.keuze{display:flex;gap:.5rem}
.keuze label{flex:1;border:1px solid var(--line);border-radius:var(--r);padding:.5rem .6rem;font-size:.85rem;cursor:pointer;display:flex;gap:.45rem;align-items:center}
.keuze input{accent-color:var(--accent)}
.keuze label:has(input:checked){border-color:var(--accent);color:var(--accent)}

/* ---------- clarity ---------- */
.stat{padding:.9rem 1rem;display:flex;flex-direction:column;gap:.2rem}
.stat .v{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;letter-spacing:-.04em;margin-top:.3rem}
.stat .d{font-family:var(--mono);font-size:.7rem;color:var(--muted)}
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* ---------- gesprek met bennie ---------- */
.chat{display:flex;flex-direction:column;gap:.55rem;padding:1rem;max-height:420px;overflow:auto}
.bubble{max-width:72%;padding:.55rem .75rem;border-radius:10px;font-size:.9rem;line-height:1.4;position:relative}
.bubble small{display:block;font-family:var(--mono);font-size:.62rem;color:var(--muted);margin-top:.25rem;text-align:right}
.van-jou{align-self:flex-end;background:color-mix(in srgb,var(--goed) 16%,var(--panel-2));border:1px solid color-mix(in srgb,var(--goed) 30%,transparent);border-bottom-right-radius:3px}
.van-bennie{align-self:flex-start;background:var(--panel-2);border:1px solid var(--line);border-bottom-left-radius:3px}
.dag{align-self:center;font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:.3rem 0}
@media (max-width:1100px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.g5{grid-template-columns:1fr}.bubble{max-width:88%}}

/* ---------- kpi ---------- */
.kpi{padding:.95rem 1rem 0;display:flex;flex-direction:column;gap:.1rem;overflow:hidden}
.kpi .label{display:flex;justify-content:space-between;align-items:center}
.kpi .v{font-size:clamp(1.5rem,2.3vw,2rem);font-weight:800;letter-spacing:-.04em;margin-top:.35rem}
.kpi .d{font-family:var(--mono);font-size:.72rem;display:flex;align-items:center;gap:.35rem;color:var(--muted)}
.kpi .d b{font-weight:500}
.up{color:var(--goed)} .down{color:var(--stop)}
.kpi svg{display:block;margin:.55rem -1rem -1px;width:calc(100% + 2rem)}

/* ---------- aandacht ---------- */
.att{display:flex;gap:.8rem;padding:.85rem 1rem;border-bottom:1px solid var(--line);align-items:flex-start}
.att:last-child{border-bottom:0}
.att .pill{flex:none;margin-top:.15rem}
.att p{font-size:.92rem}
.att .why{color:var(--muted);font-size:.8rem;margin-top:.15rem}
.att .acts{margin-left:auto;display:flex;gap:.5rem;align-items:center;flex:none}
.pill{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:.2rem .5rem;display:inline-flex;align-items:center;gap:.3rem}
.pill.ok{color:var(--goed)} .pill.warn{color:var(--let-op)} .pill.bad{color:var(--stop)} .pill.off{color:var(--muted)}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.pill.plain::before{display:none}
.btn{background:var(--accent);color:var(--accent-ink);border-radius:var(--r);padding:.45rem .8rem;font-weight:700;font-size:.82rem;transition:filter .18s var(--ease)}
.btn:hover{filter:brightness(1.08)}
.link{font-family:var(--mono);font-size:.72rem;text-decoration:underline;text-underline-offset:.3em;color:var(--ink-2)}

/* ---------- chart ---------- */
.chart-wrap{position:relative}
.axis{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.grid-line{stroke:var(--line);stroke-width:1}
.tip{position:absolute;pointer-events:none;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.45rem .6rem;font-family:var(--mono);font-size:.7rem;white-space:nowrap;opacity:0;transform:translate(-50%,-115%);transition:opacity .12s}
.tip b{font-family:var(--font);font-size:.85rem;display:block;letter-spacing:-.02em}
.legend{display:flex;flex-wrap:wrap;gap:.9rem;padding:0 1rem 1rem}
.legend span{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.72rem;color:var(--ink-2)}
.legend i{width:9px;height:9px;border-radius:2px;display:inline-block}

/* ---------- kanaaltabel ---------- */
.bars{display:flex;flex-direction:column;gap:.75rem;padding:1rem}
.bar-row{display:grid;grid-template-columns:7.5rem 1fr auto;gap:.8rem;align-items:center}
.bar-row .nm{font-size:.86rem;display:flex;align-items:center;gap:.45rem}
.bar-row .nm i{width:9px;height:9px;border-radius:2px;flex:none}
.track{display:block;height:10px;background:var(--panel-2);border-radius:2px;overflow:hidden}
.fill{display:block;height:100%;border-radius:0 2px 2px 0}
.bar-row .amt{font-family:var(--mono);font-size:.78rem;min-width:5.5rem;text-align:right}

/* ---------- tabellen ---------- */
table{width:100%;border-collapse:collapse;font-size:.86rem}
th{text-align:left;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400;padding:.55rem 1rem;border-bottom:1px solid var(--line)}
td{padding:.6rem 1rem;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.tbl-wrap{overflow-x:auto}


/* ---------- merkmarkeringen ---------- */
/* Officiele paden uit simple-icons (CC0); de merken zijn van hun eigenaren en staan
   hier alleen om aan te geven welke dienst je koppelt. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.bm{width:19px;height:19px;display:block;fill:currentColor;flex:none}
.bm-wrap{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,currentColor 11%,transparent);border:1px solid color-mix(in srgb,currentColor 26%,transparent)}
.bm-sm{width:15px;height:15px;display:block;fill:currentColor;flex:none}
.m-openai{color:var(--ink)}
.m-meta{color:#0467DF}
.m-googleads{color:#4285F4}
.m-googleanalytics{color:#E37400}
.m-googlesearchconsole{color:#458CF5}
.m-whatsapp{color:#25D366}
.m-clarity{color:#185ABD}
.m-tagmanager{color:#246FDB}
.m-merchant{color:#1A73E8}
.m-woocommerce{color:#7F54B3}
.m-eigen{color:var(--accent)}
.with-ic{display:inline-flex;align-items:center;gap:.4rem}
.panel-h h2.with-ic .bm-sm{margin-top:1px}

/* ---------- koppelingen ---------- */
.conn{display:flex;align-items:center;gap:.85rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.conn:last-child{border-bottom:0}
.conn .ic{width:34px;height:34px;border-radius:var(--r);display:grid;place-items:center;font-weight:800;font-size:.78rem;flex:none;background:var(--panel-2);border:1px solid var(--line)}
.conn b{display:block;font-size:.9rem;letter-spacing:-.01em}
.conn .sub{color:var(--muted);font-family:var(--mono);font-size:.7rem}
.conn .r{margin-left:auto;display:flex;gap:.6rem;align-items:center;flex:none}

/* ---------- tools ---------- */
.tool{display:flex;flex-direction:column;gap:.5rem;padding:1rem;min-height:100%}
.tool h3{font-size:1.02rem}
.tool p{color:var(--ink-2);font-size:.86rem}
.tool .foot{margin-top:auto;padding-top:.8rem;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.num-big{font-size:1.7rem;font-weight:800;letter-spacing:-.04em}

/* ---------- creatives / fotostudio ---------- */
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;padding:1rem}
.shot{aspect-ratio:1;border-radius:var(--r);border:1px solid var(--line);position:relative;overflow:hidden;background:var(--panel-2)}
.shot span{position:absolute;left:.4rem;bottom:.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.06em;background:color-mix(in srgb,var(--bg) 70%,transparent);padding:.15rem .35rem;border-radius:2px}
.steps{display:flex;flex-direction:column}
.step{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .n{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.step.done .n{background:var(--goed);border-color:var(--goed);color:var(--accent-ink)}
.step.now .n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.step small{color:var(--muted);font-family:var(--mono);font-size:.7rem;display:block}

/* ---------- taken ---------- */
.task{display:grid;grid-template-columns:auto 1fr auto auto;gap:.85rem;align-items:center;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.sw{width:34px;height:19px;border-radius:999px;background:var(--line);position:relative;flex:none;transition:background .2s var(--ease)}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--ink);transition:transform .2s var(--ease)}
.sw[aria-checked="true"]{background:var(--accent)}
.sw[aria-checked="true"]::after{transform:translateX(15px);background:var(--accent-ink)}
.task b{font-weight:700;font-size:.9rem;letter-spacing:-.01em}
.task small{color:var(--muted);font-family:var(--mono);font-size:.7rem}

/* ---------- koppelingsindicatoren ---------- */
/* Een bolletje zegt of iets gekoppeld is. Nooit alleen kleur: er staat ook een tekst bij voor schermlezers. */
.inds{display:flex;flex-direction:column;gap:1px;padding:.35rem 0;border-bottom:1px solid var(--line)}
.inds-rij{flex-direction:row;flex-wrap:wrap;gap:.5rem;padding:0;border:0}
.ind{display:flex;align-items:center;gap:.6rem;padding:.45rem 1rem;font-size:.84rem}
.inds-rij .ind{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:.45rem .7rem}
.ind b{display:block;font-weight:700;letter-spacing:-.01em}
.ind small{display:block;color:var(--muted);font-family:var(--mono);font-size:.66rem}
.ind > i{margin-left:auto;width:8px;height:8px;border-radius:50%;flex:none;background:var(--goed);box-shadow:0 0 0 3px color-mix(in srgb,var(--goed) 20%,transparent)}
.ind.uit > i{background:var(--muted);box-shadow:none;opacity:.5}
.ind.uit svg{filter:grayscale(1);opacity:.5}
.ind.klein{padding:0;gap:.4rem;font-size:.76rem}
.kop-met-inds{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ---------- actieknoppen ---------- */
.actie{display:flex;flex-direction:column}
.knoppen{display:flex;flex-direction:column;gap:.5rem;padding:1rem;margin-top:auto}
.kn{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;width:100%;text-align:left;padding:.6rem .75rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel-2);font-weight:700;font-size:.88rem;letter-spacing:-.01em;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.kn small{font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--muted);letter-spacing:0}
.kn:hover{border-color:var(--accent)}
.kn:active{transform:scale(.99)}
.kn-start{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.kn-start small{color:color-mix(in srgb,var(--accent-ink) 78%,transparent)}

/* concept: hoe een klant zonder actieve kanalen het ziet */
:root[data-staat="nieuw"] .alleen-actief{display:none!important}
:root:not([data-staat="nieuw"]) .alleen-nieuw{display:none!important}
:root[data-staat="nieuw"] [data-staat-afh] > i{background:var(--muted);box-shadow:none;opacity:.5}
:root[data-staat="nieuw"] [data-staat-afh] svg{filter:grayscale(1);opacity:.5}
:root[data-staat="nieuw"] [data-staat-afh] small{visibility:hidden}
#nieuwe-klant[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.leeg{padding:1.4rem;display:flex;flex-direction:column;gap:.35rem}
.leeg p{color:var(--ink-2);font-size:.9rem;max-width:60ch}

/* ---------- wekelijkse analyse ---------- */
.moment{display:flex;align-items:center;gap:.45rem}
.moment select,.zoek input,.invoer input{font:inherit;font-size:.84rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.35rem .5rem}
.rapporten{display:flex;flex-direction:column;padding:.6rem 0 .2rem}
.rapport{display:grid;grid-template-columns:5.5rem 1fr auto;gap:.9rem;align-items:center;text-align:left;padding:.65rem 1rem;border-top:1px solid var(--line);transition:background .18s var(--ease)}
.rapport:hover{background:var(--panel-2)}
.rapport b{display:block;font-size:.9rem;letter-spacing:-.01em}
.rapport small{display:block;color:var(--muted);font-family:var(--mono);font-size:.68rem}
.rapport .wk{font-weight:700;font-size:.86rem}

/* ---------- vensters en meldingen ---------- */
dialog.breed{width:min(860px,94vw)}
dialog .venster-b{padding:1rem;max-height:70vh;overflow:auto}
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translate(-50%,calc(100% + 2rem));opacity:0;z-index:20;background:var(--ink);color:var(--bg);padding:.65rem 1rem;border-radius:var(--r);
  font-size:.86rem;max-width:min(520px,90vw);transition:transform .35s var(--ease),opacity .35s var(--ease);pointer-events:none}
.toast.toon{transform:translate(-50%,0);opacity:1}

/* ---------- fotostudio ---------- */
.studios{display:flex;gap:.5rem;flex-wrap:wrap}
.studio{display:flex;flex-direction:column;align-items:flex-start;padding:.55rem .85rem;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);font-weight:700;font-size:.9rem;text-align:left}
.studio small{font-family:var(--mono);font-weight:400;font-size:.66rem;color:var(--muted)}
.studio[aria-selected="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.studio-nieuw{border-style:dashed;color:var(--ink-2)}
.studio-chat{max-height:none}
.refs{display:flex;gap:.35rem;margin-top:.5rem}
.refs .ref{width:46px;height:46px}
.ref,.ph{border-radius:6px;overflow:hidden;position:relative;display:block;background:var(--panel-2)}
.ref svg,.ph svg{width:100%;height:100%;display:block}
.shots-4{grid-template-columns:repeat(2,1fr)}
.ref.groot{aspect-ratio:1}
.kenmerken{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-top:1px solid var(--line)}
.kenmerken span{background:var(--panel);padding:.6rem 1rem;font-size:.84rem;color:var(--ink-2)}
.kenmerken b{display:block;font-family:var(--mono);font-weight:400;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.invoer{display:flex;gap:.5rem;padding:.75rem 1rem;border-top:1px solid var(--line)}
.invoer input{flex:1;padding:.5rem .6rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);padding:2px;background:var(--panel-2)}
.seg button{padding:.32rem .7rem;border-radius:2px;font-size:.8rem;color:var(--ink-2)}
.seg button[aria-selected="true"]{background:var(--ink);color:var(--bg);font-weight:700}
.zoek{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border-bottom:1px solid var(--line)}
.zoek input{flex:1;max-width:360px;padding:.45rem .6rem}
.producten{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;padding:1rem}
.prod{display:flex;flex-direction:column;gap:.4rem;border:1px solid var(--line);border-radius:var(--r);padding:.45rem;background:var(--panel-2);text-align:left;position:relative;transition:border-color .18s var(--ease)}
.prod .ph{aspect-ratio:1}
.prod b{font-size:.8rem;line-height:1.25;letter-spacing:-.01em}
.prod small{font-family:var(--mono);font-size:.62rem;color:var(--muted)}
.prod[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.prod[aria-pressed="true"]::after{content:"\2713";position:absolute;top:.75rem;right:.75rem;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:.7rem;font-weight:800}
.balk{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.75rem 1rem;border-top:1px solid var(--line)}
.vink{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-2)}
.vink input,.cats input{accent-color:var(--accent)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
.cats{display:flex;flex-wrap:wrap;gap:.5rem}
.cats label{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);border-radius:var(--r);padding:.45rem .7rem;font-size:.86rem;cursor:pointer}
.cats label:has(input:checked){border-color:var(--accent)}
.cats small{font-family:var(--mono);font-size:.64rem;color:var(--muted)}
.taakbalk{display:grid;grid-template-columns:minmax(0,14rem) 1fr auto;gap:1rem;align-items:center;padding:.85rem 1rem;border-top:1px solid var(--line)}
.taakbalk b{display:block;font-size:.88rem}
.taakbalk small{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.resultaat{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.7rem;padding:1rem;border-top:1px solid var(--line)}
.keur-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem;padding:1rem}
.keur{border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);display:flex;flex-direction:column}
.voor-na{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:.45rem}
.voor-na .ph{aspect-ratio:1}
.voor-na .ph::after{content:attr(data-label);position:absolute;left:.35rem;top:.35rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  background:color-mix(in srgb,var(--panel) 82%,transparent);padding:.1rem .35rem;border-radius:2px;color:var(--ink-2)}
.keur-info{padding:.2rem .7rem .6rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.keur-info b{font-size:.84rem;letter-spacing:-.01em}
.keur-info small{font-family:var(--mono);font-size:.64rem;color:var(--muted)}
.keur-acts{display:flex;gap:.4rem;padding:.6rem .7rem;border-top:1px solid var(--line);margin-top:auto;align-items:center;flex-wrap:wrap}
.keur-acts .btn{padding:.38rem .7rem;font-size:.78rem}
.keur-acts .link{font-size:.68rem}
.aanwijzing{display:flex;gap:.4rem;padding:0 .7rem .7rem}
.aanwijzing input{flex:1;font:inherit;font-size:.8rem;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:.35rem .5rem}
.keur[data-status="live"]{border-color:color-mix(in srgb,var(--goed) 55%,var(--line))}
.keur[data-status="opnieuw"] .voor-na .ph:last-child{opacity:.45}
.bezig{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:.64rem;color:var(--ink-2);
  background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--panel) 80%,transparent) 0 8px,color-mix(in srgb,var(--panel-2) 80%,transparent) 8px 16px);animation:schuif 1.2s linear infinite}
@keyframes schuif{to{background-position:22px 0}}

/* ---------- modules ---------- */
.module{padding:1rem;display:flex;flex-direction:column;gap:.45rem;transition:opacity .2s var(--ease)}
.mod-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.25rem}
.module h3{font-size:1rem;letter-spacing:-.02em}
.module p{color:var(--ink-2);font-size:.85rem}
.mod-voet{margin-top:auto;padding-top:.6rem;display:flex;align-items:center;gap:.6rem}
.mod-voet .mono{font-size:.64rem;color:var(--muted)}
.module.uit{background:transparent;border-style:dashed}
.module.uit h3,.module.uit p{color:var(--muted)}
.module.uit .bm-wrap{filter:grayscale(1);opacity:.5}
.btn-stil{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-stil:hover{border-color:var(--accent);color:var(--accent);filter:none}

/* ---------- planning en kalender ---------- */
.plan-row .sw{margin-right:.15rem}
.plan-kop{padding:.65rem 1rem .4rem;border-bottom:1px solid var(--line);background:var(--panel-2)}
.kal-kop{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-bottom:1px solid var(--line)}
.kal-kop b{font-size:.95rem;letter-spacing:-.01em;min-width:9rem;text-align:center}
.legenda{margin-left:auto;display:flex;align-items:center;gap:.45rem;color:var(--muted)}
.legenda i{width:9px;height:9px;border-radius:2px;display:inline-block}
.lg-los{background:var(--accent)} .lg-vast{border:1.5px solid var(--s3)} .lg-dag{background:var(--muted);border-radius:50%!important;width:6px!important;height:6px!important}
.kal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line)}
.kal-wd{background:var(--panel);padding:.45rem .55rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kal-dag{background:var(--panel);min-height:96px;padding:.4rem .45rem;display:flex;flex-direction:column;gap:.25rem;text-align:left;transition:background .15s var(--ease)}
.kal-dag:hover{background:var(--panel-2)}
.kal-dag.buiten{background:color-mix(in srgb,var(--panel) 55%,var(--bg))}
.kal-dag.buiten .dnr{opacity:.4}
.kal-dag.weekend{background:color-mix(in srgb,var(--panel) 75%,var(--bg))}
.dnr{font-family:var(--mono);font-size:.7rem;color:var(--ink-2)}
.kal-dag.vandaag .dnr{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:0 .4rem;align-self:flex-start}
.kchip{font-size:.68rem;line-height:1.25;padding:.15rem .35rem;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kchip.los{background:var(--accent);color:var(--accent-ink);font-weight:700}
.kchip.vast{border:1px solid var(--s3);color:var(--ink)}
.kchip.vast.uitgezet{opacity:.45;text-decoration:line-through}
.kdag{font-family:var(--mono);font-size:.6rem;color:var(--muted);display:flex;align-items:center;gap:.3rem}
.kdag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted)}
@media (max-width:820px){.kal-dag{min-height:64px}.kchip{font-size:.6rem}.legenda{display:none}.taakbalk{grid-template-columns:1fr}.rapport{grid-template-columns:1fr auto}.rapport .wk{display:none}}

/* ---------- periodekiezer (zelfde keuzes als Google Ads) ---------- */
.periodebalk{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.periode-wrap{position:relative}
.periode-knop{display:flex;align-items:center;gap:.7rem;border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:.5rem .8rem;text-align:left;transition:border-color .18s var(--ease)}
.periode-knop:hover,.periode-knop[aria-expanded="true"]{border-color:var(--accent)}
.periode-knop b{display:block;font-size:.92rem;letter-spacing:-.01em}
.periode-knop small{display:block;font-size:.68rem;color:var(--muted)}
.periode-knop .pijl{color:var(--muted);font-size:.8rem;margin-left:.3rem}
.periode-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:15;display:grid;grid-template-columns:250px 372px;background:var(--panel);
  border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 50px color-mix(in srgb,var(--ink) 18%,transparent);overflow:hidden}
.pp-links{display:flex;flex-direction:column;border-right:1px solid var(--line);padding:.4rem 0}
.pp-links > button{text-align:left;padding:.55rem 1.1rem;font-size:.9rem;transition:background .12s}
.pp-links > button:hover{background:var(--panel-2)}
.pp-links > button[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 12%,var(--panel));color:var(--ink);font-weight:700}
.pp-scheid{height:1px;background:var(--line);margin:.35rem 0}
.pp-n{display:flex;align-items:center;gap:.6rem;padding:.35rem 1.1rem;font-size:.88rem;cursor:text}
.pp-n input{width:3.4rem;font:inherit;font-size:.88rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.45rem .4rem;text-align:center}
.pp-n[aria-pressed="true"] input{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pp-vgl{display:flex;align-items:center;justify-content:space-between;padding:.45rem 1.1rem;font-size:.9rem}
.pp-rechts{display:flex;flex-direction:column;min-width:0}
.pp-datums{display:flex;align-items:flex-end;gap:.5rem;padding:.9rem 1rem .6rem}
.pp-datums label{flex:1;display:flex;flex-direction:column;gap:.2rem}
.pp-datums label span{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-datums input{font:inherit;font-size:.9rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.5rem .55rem;width:100%}
.pp-datums input:focus{border-color:var(--accent);outline:none}
.pp-datums > span{padding-bottom:.55rem;color:var(--muted)}
.pp-wd,.pp-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:0 .8rem}
.pp-wd{border-bottom:1px solid var(--line);padding-bottom:.35rem}
.pp-wd span{text-align:center;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.pp-maanden{height:320px;overflow-y:auto;padding-bottom:.4rem;overscroll-behavior:contain}
.pp-mt{display:block;padding:.75rem 1.1rem .3rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em}
.pp-grid button{height:38px;font-size:.82rem;font-variant-numeric:tabular-nums;position:relative;z-index:0}
.pp-grid button:disabled{color:color-mix(in srgb,var(--muted) 55%,transparent);cursor:default}
.pp-grid button:not(:disabled):hover::before{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--ink-2);z-index:-1}
.pp-grid button.in{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.pp-grid button.begin,.pp-grid button.eind{color:var(--accent-ink);font-weight:700}
.pp-grid button.begin{background:linear-gradient(90deg,transparent 50%,color-mix(in srgb,var(--accent) 13%,transparent) 50%)}
.pp-grid button.eind{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 13%,transparent) 50%,transparent 50%)}
.pp-grid button.begin.eind{background:none}
.pp-grid button.begin::after,.pp-grid button.eind::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);z-index:-1}
.pp-grid button.vandaag:not(.begin):not(.eind)::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1px solid var(--ink-2);z-index:-1}
.pp-acties{display:flex;justify-content:flex-end;align-items:center;gap:.8rem;padding:.7rem 1rem;border-top:1px solid var(--line)}
.ads-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.ads-stats > div{background:var(--panel);padding:.8rem 1rem}
.ads-stats .num-big{font-size:1.35rem;margin-top:.2rem}
.ads-stats small{display:block;font-family:var(--mono);font-size:.64rem;margin-top:.1rem;min-height:1em}
@media (max-width:820px){
  .periode-pop{position:fixed;left:1rem;right:1rem;top:4.5rem;grid-template-columns:1fr;max-height:calc(100vh - 6rem);overflow:auto}
  .pp-links{border-right:0;border-bottom:1px solid var(--line)}
  .ads-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- auto-SEO en verzoeken ---------- */
.seo-tabs{align-self:flex-start}
.seo-tabs .tel{display:inline-grid;place-items:center;min-width:1.2rem;height:1.2rem;padding:0 .3rem;margin-left:.3rem;border-radius:999px;background:var(--accent);color:var(--accent-ink);font-size:.66rem;font-weight:800}
.seo-paneel{display:flex;flex-direction:column;gap:1.1rem}
.as-feiten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.as-feiten > div{background:var(--panel);padding:.8rem 1rem}
.as-feiten b{display:block;font-size:.95rem;letter-spacing:-.01em;margin-top:.2rem}
.as-feiten small{display:block;font-family:var(--mono);font-size:.66rem;color:var(--muted)}
.as-uitleg{display:flex;flex-direction:column;gap:.8rem}
.as-uitleg p{color:var(--ink-2);font-size:.88rem;max-width:68ch}
.as-regels{border-top:1px solid var(--line)}
.as-regel{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;border-bottom:1px solid var(--line)}
.as-regel:last-child{border-bottom:0}
.as-regel b{display:block;font-size:.88rem}
.as-regel small{display:block;color:var(--muted);font-size:.78rem}
[data-pauze] #as-stand{color:var(--muted)}
.logboek{display:flex;flex-direction:column}
.lb{display:grid;grid-template-columns:5.5rem 1fr auto;gap:.8rem;align-items:center;padding:.6rem 1rem;border-bottom:1px solid var(--line);font-size:.86rem;color:var(--ink-2)}
.lb .wk{font-weight:700;color:var(--ink)}
.lb small{display:block;font-family:var(--mono);font-size:.64rem;color:var(--muted);font-weight:400}
.herz-kop{display:flex;align-items:center;gap:.7rem;width:100%;text-align:left;padding:.85rem 1rem;flex-wrap:wrap}
.herz-kop .pijl{transition:transform .2s var(--ease);color:var(--muted)}
.herz-kop[aria-expanded="true"] .pijl{transform:rotate(90deg)}
.herz-lijf{padding:0 1rem 1rem 2.3rem;border-top:1px solid var(--line);padding-top:.8rem}
.herz-lijf p{color:var(--ink-2);font-size:.88rem;max-width:72ch}
.herz-r{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;font-size:.88rem}
.herz-r .pill{min-width:5.6rem;justify-content:center}
.vz{border-bottom:1px solid var(--line)}
.vz:last-child{border-bottom:0}
.vz-kop{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:.7rem;align-items:center;width:100%;text-align:left;padding:.75rem 1rem;transition:background .15s}
.vz-kop:hover{background:var(--panel-2)}
.vz-kop .pijl{color:var(--muted);transition:transform .2s var(--ease)}
.vz.open .vz-kop .pijl{transform:rotate(90deg)}
.vz-kop b{font-size:.92rem;letter-spacing:-.01em}
.vz-kop .kort{display:block;color:var(--muted);font-size:.8rem;font-weight:400;margin-top:.1rem}
.kant{font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;padding:.15rem .4rem;border-radius:2px;border:1px solid var(--line);color:var(--ink-2)}
.kant.fe{border-color:var(--s3);color:var(--s3)}
.wkchip{font-family:var(--mono);font-size:.64rem;color:var(--muted)}
.vz-lijf{padding:0 1rem 1rem 2.6rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.4rem 1.4rem}
.vz-lijf .blok{display:flex;flex-direction:column;gap:.2rem}
.vz-lijf .blok p{font-size:.86rem;color:var(--ink-2)}
.vz-lijf details{grid-column:1/-1;border:1px solid var(--line);border-radius:var(--r);padding:.5rem .7rem;font-size:.84rem;color:var(--ink-2)}
.vz-lijf summary{cursor:pointer;font-family:var(--mono);font-size:.7rem;color:var(--ink)}
.vz-lijf details ul{margin:.5rem 0 0;padding-left:1.1rem}
.vz-acties{grid-column:1/-1;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding-top:.5rem}
.vz-acties .btn{padding:.42rem .75rem;font-size:.8rem}
.vz-form{grid-column:1/-1;display:flex;flex-direction:column;gap:.5rem;padding-top:.4rem}
.vz-form textarea{font:inherit;font-size:.86rem;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:.5rem .6rem;min-height:3.6rem;resize:vertical}
.vz-reactie{grid-column:1/-1;font-size:.84rem;color:var(--ink-2);border-left:2px solid var(--s3);padding:.2rem .7rem}
@media (max-width:820px){.as-feiten{grid-template-columns:1fr}.vz-kop{grid-template-columns:auto 1fr auto}.vz-kop .kant,.vz-kop .wkchip{display:none}.vz-lijf{grid-template-columns:1fr;padding-left:1rem}}

.note{display:flex;gap:.6rem;align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--r);background:var(--panel);color:var(--ink-2);font-size:.86rem}
.hidden{display:none}
[hidden]{display:none!important}  /* anders wint display:flex van .veld en .aanwijzing */
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.g3,.g2{grid-template-columns:1fr}.shots{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;overflow:visible}
  .brand{padding:0 .5rem 0 0}.shop{border:0;margin:0;padding:0}.plan{display:none}
  .nav{flex-direction:row;flex-wrap:wrap;width:100%}
  .g4{grid-template-columns:1fr}.shots{grid-template-columns:repeat(2,1fr)}
  .att{flex-wrap:wrap}.att .acts{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}