/* Online Content Wizard — onboarding (OCW website-huisstijl: blauw/indigo). */
.ocwiz-wizard { --ocwiz-teal:#1f6f6f; --ocwiz-navy:#1e293b; --ocwiz-pink:#e84e8a;
  max-width: 720px; margin: 0 auto; font-size: 16px; line-height: 1.5; }
.ocwiz-wizard .ocwiz-step { border:1px solid #e5e7eb; border-left:4px solid var(--ocwiz-teal);
  border-radius:8px; padding:1rem 1.25rem; margin:0 0 1.25rem; }
.ocwiz-wizard legend { font-weight:700; color:var(--ocwiz-navy); padding:0 .4rem; }
.ocwiz-wizard label { display:block; margin:.75rem 0; font-weight:600; color:var(--ocwiz-navy); }
.ocwiz-wizard input[type=text], .ocwiz-wizard input[type=url], .ocwiz-wizard textarea,
.ocwiz-wizard select { display:block; width:100%; margin-top:.25rem; padding:.5rem .6rem;
  border:1px solid #cbd5e1; border-radius:6px; font:inherit; font-weight:400; }
.ocwiz-wizard .ocwiz-check { display:inline-flex; align-items:center; gap:.4rem; font-weight:400;
  margin:.25rem 1rem .25rem 0; }
.ocwiz-wizard .ocwiz-check input { width:auto; margin:0; }
.ocwiz-wizard .ocwiz-hint { color:#64748b; font-size:.9rem; margin:.25rem 0 .5rem; }
.ocwiz-submit { background:var(--ocwiz-teal); color:#fff; border:0; border-radius:8px;
  padding:.7rem 1.4rem; font-size:1rem; font-weight:700; cursor:pointer; }
.ocwiz-submit:hover { background:#1a5e5e; }
.ocwiz-notice { border-radius:8px; padding:.75rem 1rem; margin:0 0 1.25rem; }
.ocwiz-notice--success { background:#ecfdf5; border:1px solid #6ee7b7; color:#065f46; }
.ocwiz-notice--error { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }
.ocwiz-aud { border:1px solid #e5e7eb; border-radius:10px; padding:.9rem 1rem; margin:.6rem 0 1rem; background:#fff; }
.ocwiz-aud__head { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.4rem; }
.ocwiz-aud__head .ocwiz-aud-name { flex:1; min-width:180px; margin:0; }
.ocwiz-aud__head .ocwiz-check { margin:0; }
.ocwiz-aud__head .ocwiz-aud-remove { margin-left:auto; padding:.3rem .6rem; }

/* Inklapbare profiel-secties (accordeon) — houdt de pagina kort. */
.ocwiz-wizard details.ocwiz-section > summary { cursor:pointer; list-style:none; display:flex;
  align-items:center; justify-content:space-between; gap:.6rem; font-weight:700; color:var(--ocwiz-navy);
  font-size:1.15rem; padding:.2rem 0; }
.ocwiz-wizard details.ocwiz-section > summary::-webkit-details-marker { display:none; }
.ocwiz-wizard details.ocwiz-section > summary::after { content:"+"; color:#94a3b8; font-weight:400; font-size:1.3rem; line-height:1; }
.ocwiz-wizard details.ocwiz-section[open] > summary::after { content:"–"; }
.ocwiz-wizard details.ocwiz-section[open] > summary { margin-bottom:.6rem; }

/* Historie: zoekbalk + paginering. */
.ocwiz-hist-search { display:flex; gap:.5rem; align-items:center; margin:0 0 1rem; }
.ocwiz-hist-search input[type=search] { flex:1; padding:.55rem .7rem; border:1px solid #cbd5e1; border-radius:9px; font:inherit; }
.ocwiz-hist-pager { display:flex; align-items:center; justify-content:center; gap:1rem; margin:1.2rem 0 .3rem; }

.ocwiz-wizard .ocwiz-expand { margin:.1rem 0 1.1rem; }
.ocwiz-wizard .ocwiz-expand > summary { cursor:pointer; color:var(--ocwiz-teal); font-weight:600; padding:.3rem 0; list-style:revert; }
.ocwiz-wizard .ocwiz-expand__body { border-left:3px solid #e5e7eb; padding:.4rem 0 .2rem .9rem; margin-top:.4rem; }
.ocwiz-wizard .ocwiz-expand__body .ocwiz-btn { margin-top:.3rem; }
.ocwiz-summarize-status { display:inline-block; margin-left:.6rem; color:#64748b; }

.ocwiz-card { max-width:720px; margin:1rem auto; padding:1rem 1.25rem; border:1px solid #e5e7eb; border-radius:8px; }
.ocwiz-dashboard .ocwiz-content { white-space:pre-wrap; line-height:1.55; }
.ocwiz-dashboard .ocwiz-card h3 { margin:0 0 .5rem; color:var(--ocwiz-teal); }
table.ocwiz-seo { border-collapse:collapse; width:100%; font-size:.95rem; }
table.ocwiz-seo th { text-align:left; width:160px; vertical-align:top; padding:.35rem .5rem; color:#475569; background:#f3f4f6; border:1px solid #e5e7eb; }
table.ocwiz-seo td { padding:.35rem .5rem; border:1px solid #e5e7eb; }

/* ============ Dashboard (app-look) ============ */
.ocwiz-app {
  --ocwiz-teal:#1f6f6f; --ocwiz-teal-dark:#1a5e5e; --ocwiz-navy:#1e293b; --ocwiz-pink:#e84e8a;
  --ocwiz-bg:#f6f7f9; --ocwiz-line:#e5e7eb;
  max-width:880px; margin:0 auto; color:var(--ocwiz-navy);
  font:16px/1.55 -apple-system,"Segoe UI",Roboto,sans-serif;
}
.ocwiz-app * { box-sizing:border-box; }

.ocwiz-app__bar { display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.1rem; background:#fff; border:1px solid var(--ocwiz-line);
  border-radius:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); margin-bottom:1rem; }
.ocwiz-app__title { display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:1.05rem; }
.ocwiz-app__logo { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px;
  background:var(--ocwiz-teal); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.03em; }

.ocwiz-panel { background:#fff; border:1px solid var(--ocwiz-line); border-radius:14px;
  padding:1.1rem 1.2rem; margin-bottom:1rem; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.ocwiz-panel h3 { margin:0 0 .4rem; color:var(--ocwiz-navy); }
.ocwiz-muted { color:#64748b; font-size:.88rem; margin:.2rem 0 .8rem; }
.ocwiz-app label { display:block; font-weight:600; margin:.6rem 0; }
.ocwiz-app input[type=text], .ocwiz-app input[type=password], .ocwiz-app textarea {
  display:block; width:100%; margin-top:.3rem; padding:.6rem .7rem; font:inherit; font-weight:400;
  border:1px solid #cbd5e1; border-radius:9px; background:#fff; transition:border-color .15s, box-shadow .15s; }
.ocwiz-app input:focus, .ocwiz-app textarea:focus { outline:none; border-color:var(--ocwiz-teal);
  box-shadow:0 0 0 3px rgba(15,118,110,.12); }

.ocwiz-idea-row { display:flex; gap:.6rem; align-items:stretch; margin-top:.3rem; }
.ocwiz-idea-row input { flex:1; margin-top:0; }

.ocwiz-btn { appearance:none; border:1px solid var(--ocwiz-line); background:#fff; color:var(--ocwiz-navy);
  font:inherit; font-weight:600; padding:.55rem .95rem; border-radius:9px; cursor:pointer;
  transition:background .15s, border-color .15s, transform .05s, opacity .15s; white-space:nowrap; }
.ocwiz-btn:hover { background:#f8fafc; border-color:#cbd5e1; }
.ocwiz-btn:active { transform:translateY(1px); }
.ocwiz-btn:disabled { opacity:.6; cursor:default; }
.ocwiz-btn--primary { background:var(--ocwiz-teal); border-color:var(--ocwiz-teal); color:#fff; }
.ocwiz-btn--primary:hover { background:var(--ocwiz-teal-dark); border-color:var(--ocwiz-teal-dark); }
.ocwiz-btn--ghost { background:transparent; border-color:transparent; color:var(--ocwiz-teal); padding:.4rem .6rem; }
.ocwiz-btn--ghost:hover { background:rgba(15,118,110,.08); }

.ocwiz-badge { display:inline-block; font-size:.72rem; font-weight:700; padding:.1rem .5rem;
  border-radius:999px; margin-left:.4rem; vertical-align:middle; }
.ocwiz-badge--on { background:#ecfdf5; color:#065f46; }
.ocwiz-badge--off { background:#f1f5f9; color:#64748b; }

.ocwiz-channels { display:grid; gap:1rem; }
.ocwiz-ch { background:#fff; border:1px solid var(--ocwiz-line); border-left:4px solid var(--ocwiz-teal);
  border-radius:12px; padding:.9rem 1.1rem; box-shadow:0 1px 2px rgba(16,24,40,.04);
  animation:ocwiz-fade .25s ease both; }
.ocwiz-ch__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.5rem; }
.ocwiz-ch__head h3 { margin:0; color:var(--ocwiz-teal); font-size:1.05rem; }
.ocwiz-ch__actions { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; justify-content:flex-end; }
.ocwiz-results-bar { display:flex; justify-content:flex-end; margin:0 0 .6rem; }
.ocwiz-iconbtn { display:inline-grid; place-items:center; width:32px; height:32px; padding:0;
  border:1px solid var(--ocwiz-line); border-radius:8px; background:#fff; color:#64748b; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s; }
.ocwiz-iconbtn:hover { background:#f1f5f9; color:var(--ocwiz-teal); border-color:#cbd5e1; }
.ocwiz-iconbtn.ocwiz-danger:hover { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.ocwiz-advanced { margin-top:1rem; border-top:1px solid var(--ocwiz-line); padding-top:.6rem; }
.ocwiz-advanced > summary { cursor:pointer; font-weight:600; color:var(--ocwiz-navy); list-style:revert; }
.ocwiz-advanced > summary:hover { color:var(--ocwiz-teal); }
.ocwiz-advanced__body { padding-top:.6rem; display:flex; flex-direction:column; gap:.3rem; }
.ocwiz-advanced__body textarea { width:100%; resize:vertical; }
.ocwiz-carousel-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:1rem; }
.ocwiz-carousel-row label { display:flex; flex-direction:column; gap:.25rem; font-weight:600; color:var(--ocwiz-navy); }
.ocwiz-carousel-row select, .ocwiz-carousel-row input { padding:.5rem .6rem; border:1px solid var(--ocwiz-line); border-radius:8px; }
.ocwiz-carousel-row input[type="number"] { width:6rem; }
.ocwiz-carousel-slides { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:1rem; }
.ocwiz-slide { display:flex; flex-direction:column; gap:.4rem; }
.ocwiz-slide .ocwiz-ch__img img { width:100%; height:auto; border-radius:8px; }
.ocwiz-iconbtn:active { transform:translateY(1px); }
.ocwiz-ch__text { width:100%; min-height:90px; resize:vertical; line-height:1.55; overflow:hidden; }
.ocwiz-ch__img { margin-top:.6rem; }
.ocwiz-ch__img img { max-width:100%; height:auto; border-radius:10px; border:1px solid var(--ocwiz-line); display:block; }
.ocwiz-ch__img a { margin-top:.5rem; display:inline-block; }

.ocwiz-idea-chips { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.6rem; }
.ocwiz-idea-chip { padding:.3rem .75rem; font-size:.85rem; }
.ocwiz-idea-list { list-style:none; margin:.7rem 0 0; padding:0; display:grid; gap:.4rem; }
.ocwiz-idea-list li { display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.5rem .2rem .5rem .8rem; border:1px solid var(--ocwiz-line); border-radius:9px; background:#fff; }
.ocwiz-idea-txt { flex:1; }
.ocwiz-idea-use { flex:none; padding:6px 12px; font-size:13px; white-space:nowrap; }

.ocwiz-btn-row { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.5rem; }

/* Aan de slag — onboarding-checklist boven op de Genereren-tab. */
.ocwiz-onboard { border-left:4px solid var(--ocwiz-teal); }
.ocwiz-steps { list-style:none; margin:.5rem 0 0; padding:0; display:grid; gap:.5rem; }
.ocwiz-steps li { display:flex; align-items:center; gap:.6rem; }
.ocwiz-steps li .ocwiz-step-label { flex:1; }
.ocwiz-steps li.is-done .ocwiz-step-label { color:#15803d; text-decoration:line-through; }
.ocwiz-step-mark { flex:none; width:1.5rem; height:1.5rem; display:inline-grid; place-items:center;
  border-radius:50%; background:#eef2f7; color:#15803d; font-weight:800; font-size:.85rem; }
.ocwiz-steps li.is-done .ocwiz-step-mark { background:#ecfdf5; }

.ocwiz-backup-slots { display:grid; gap:.6rem; }
.ocwiz-backup-slot { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem .9rem; border:1px solid var(--ocwiz-line); border-radius:10px; background:#fff; }
.ocwiz-backup-actions { display:flex; gap:.5rem; }

.ocwiz-loading { padding:1.5rem; text-align:center; color:#64748b; background:#fff;
  border:1px dashed #cbd5e1; border-radius:12px; }

/* Live voortgang tijdens een video-render (zichtbaar dat hij bezig is). */
.ocwiz-video-progress { display:flex; align-items:center; gap:.9rem; margin-top:.9rem;
  padding:1.1rem 1.2rem; background:#fff; border:1px solid var(--ocwiz-line, #e7ebf1); border-radius:12px; }
.ocwiz-video-progress strong { display:block; color:#0e2a47; }
.ocwiz-spinner { width:22px; height:22px; flex:none; border-radius:50%;
  border:3px solid #d3eae8; border-top-color:#1f6f6f; animation:ocwiz-spin .8s linear infinite; }
@keyframes ocwiz-spin { to { transform:rotate(360deg); } }

/* Merkprofiel resetten (gevarenzone) */
.ocwiz-btn--danger { background:#fff !important; color:#b91c1c !important; border:1px solid #fca5a5 !important; }
.ocwiz-btn--danger:hover { background:#fef2f2 !important; border-color:#f87171 !important; }
.ocwiz-btn--danger:disabled { opacity:.5; cursor:not-allowed; }
.ocwiz-resetzone { border-color:#fbd5d5; }
.ocwiz-resetzone__actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:8px; }
.ocwiz-reset-confirm { display:flex; flex-direction:column; gap:10px; padding:12px 14px;
  background:#fef2f2; border:1px solid #fca5a5; border-radius:10px; }
.ocwiz-reset-ack { display:flex; align-items:center; gap:8px; color:#7f1d1d; font-weight:600; }
.ocwiz-reset-confirm__btns { display:flex; flex-wrap:wrap; gap:8px; }

.ocwiz-actionbar { position:sticky; bottom:0; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-top:1rem; padding:.8rem 1.1rem; background:#fff; border:1px solid var(--ocwiz-line);
  border-radius:14px; box-shadow:0 -2px 10px rgba(16,24,40,.06); }
.ocwiz-actionbar__btns { display:flex; gap:.6rem; }
.ocwiz-cost { color:#64748b; font-size:.9rem; }

.ocwiz-toast { position:fixed; right:1rem; bottom:1rem; z-index:9999; max-width:360px;
  padding:.7rem 1rem; border-radius:10px; color:#fff; box-shadow:0 6px 24px rgba(16,24,40,.18);
  animation:ocwiz-fade .2s ease both; }
.ocwiz-toast--success { background:#1f6f6f; }
.ocwiz-toast--error { background:#b91c1c; }
.ocwiz-toast--info { background:#334155; }

.ocwiz-chanpick { display:flex; flex-wrap:wrap; gap:.3rem 1.1rem; margin-top:.2rem; }
.ocwiz-chanpick .ocwiz-check { display:inline-flex; align-items:center; gap:.4rem; font-weight:600;
  color:var(--ocwiz-navy); margin:0; }
.ocwiz-chanpick .ocwiz-check input { width:auto; margin:0; }

.ocwiz-storage { display:grid; gap:.6rem; margin-top:1.1rem; }
.ocwiz-storage-row { display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .9rem; border:1px solid var(--ocwiz-line); border-radius:10px; background:#fff; }
.ocwiz-storage-info strong { color:var(--ocwiz-navy); }
.ocwiz-storage-maplink { margin-left:.5rem; font-size:.85rem; color:var(--ocwiz-teal); text-decoration:none; white-space:nowrap; }
.ocwiz-storage-maplink:hover { text-decoration:underline; }

.ocwiz-upgrade { border-left:4px solid var(--ocwiz-pink); }
.ocwiz-upgrade h3 { color:var(--ocwiz-pink); }
.ocwiz-upgrade .ocwiz-btn--primary { margin-top:.4rem; }

.ocwiz-history-item { animation:none; }
.ocwiz-history-item summary { cursor:pointer; list-style:revert; padding:.2rem 0; }
.ocwiz-history-item summary strong { color:var(--ocwiz-navy); }
.ocwiz-history-item h4 { margin:.8rem 0 .3rem; color:var(--ocwiz-teal); }
.ocwiz-history-item .ocwiz-content { white-space:pre-wrap; line-height:1.55; color:#334155; }

/* Welkomstkop op de Genereren-tab */
.ocwiz-welcome { margin:0 0 1rem; }
.ocwiz-welcome__title { margin:0 0 .15rem; font-size:1.5rem; font-weight:800; color:var(--ocwiz-navy); letter-spacing:-.01em; }
.ocwiz-welcome__sub { margin:0; }

/* Profiel-template (CSV): download/import-paneel op de Profiel-tab */
.ocwiz-template { margin-bottom:1.2rem; }
.ocwiz-template__actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.6rem; }
.ocwiz-template__import { cursor:pointer; margin:0; }

/* Uitdiepen op slot (betaalde feature: actief abonnement + eigen sleutel) */
.ocwiz-summarize:disabled, .ocwiz-summarize.ocwiz-locked { opacity:.5; cursor:not-allowed; }
.ocwiz-summarize.ocwiz-locked + .ocwiz-summarize-status { color:#92400e; }

@keyframes ocwiz-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (max-width:600px){ .ocwiz-idea-row { flex-direction:column; } .ocwiz-actionbar { flex-direction:column; align-items:stretch; } }

/* Agenda: inplan-formulier + maandkalender met drag-and-drop */
.ocwiz-sched-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.6rem; align-items:end; }
.ocwiz-sched-form .ocwiz-sched-content-label { grid-column:1 / -1; }
.ocwiz-sched-form button { align-self:end; }
/* Kanaal/Datum/Tijd visueel gelijk: native datum/tijd niet grijs laten vullen + gelijke hoogte/breedte. */
.ocwiz-sched-form select,
.ocwiz-sched-form input[type=date],
.ocwiz-sched-form input[type=time] {
  box-sizing:border-box; width:100%; min-height:46px;
  background-color:var(--surface); color-scheme:light;
}
.ocwiz-sched-form input[type=date],
.ocwiz-sched-form input[type=time] { -webkit-appearance:none; appearance:none; }
.ocwiz-cal-head { display:flex; align-items:center; justify-content:center; gap:1rem; margin-bottom:.8rem; }
.ocwiz-cal-head strong { font-size:1.1rem; color:var(--ocwiz-navy); text-transform:capitalize; min-width:11rem; text-align:center; }
.ocwiz-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.ocwiz-cal-dow { text-align:center; font-weight:700; color:#64748b; font-size:.8rem; padding:.2rem 0; }
.ocwiz-cal-cell { min-height:92px; border:1px solid var(--ocwiz-line); border-radius:10px; padding:4px; background:#fff; display:flex; flex-direction:column; gap:3px; }
.ocwiz-cal-empty { border:0; background:transparent; }
.ocwiz-cal-cell.is-over { border-color:var(--ocwiz-teal); box-shadow:0 0 0 2px rgba(31,111,111,.2); }
.ocwiz-cal-daynum { font-size:.75rem; color:#94a3b8; font-weight:600; }
.ocwiz-cal-post { background:var(--ocwiz-teal); color:#fff; border-radius:7px; padding:3px 6px; font-size:.72rem; line-height:1.25; cursor:grab; display:flex; align-items:center; gap:3px; }
.ocwiz-cal-post .ocwiz-cal-time { font-weight:800; }
.ocwiz-cal-post.is-dragging { opacity:.5; }
.ocwiz-cal-post--published { background:#15803d; }
.ocwiz-cal-post--failed { background:#b91c1c; }
.ocwiz-cal-del { margin-left:auto; background:transparent; border:0; color:rgba(255,255,255,.85); cursor:pointer; font-size:.8rem; line-height:1; padding:0 2px; }
.ocwiz-cal-del:hover { color:#fff; }
@media (max-width:640px){ .ocwiz-cal-cell{ min-height:64px; } .ocwiz-cal-post{ font-size:.65rem; } }

/* Agenda: wachtrij-kolom + 2-koloms layout + inhoud-popup */
.ocwiz-sched-layout { display:grid; grid-template-columns:minmax(180px,240px) 1fr; gap:1rem; align-items:start; }
.ocwiz-sched-queue { position:sticky; top:1rem; }
.ocwiz-queue { display:flex; flex-direction:column; gap:.5rem; }
.ocwiz-qcard { background:#fff; border:1px solid var(--ocwiz-line); border-left:4px solid var(--ocwiz-teal); border-radius:10px; padding:.5rem 1.4rem .5rem .6rem; cursor:grab; display:flex; flex-direction:column; gap:.15rem; position:relative; }
.ocwiz-qcard strong { font-size:.85rem; color:var(--ocwiz-navy); }
.ocwiz-qcard__snip { font-size:.75rem; color:#64748b; }
.ocwiz-qcard.is-dragging { opacity:.5; }
.ocwiz-qcard__del { position:absolute; top:4px; right:5px; background:transparent; border:0; color:#94a3b8; cursor:pointer; font-size:.8rem; line-height:1; }
.ocwiz-qcard__del:hover { color:#b91c1c; }
@media (max-width:760px){ .ocwiz-sched-layout{ grid-template-columns:1fr; } .ocwiz-sched-queue{ position:static; } }

.ocwiz-modal { position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center; }
.ocwiz-modal[hidden] { display:none; }
.ocwiz-modal__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.45); }
.ocwiz-modal__box { position:relative; background:#fff; border-radius:16px; max-width:640px; width:92%; max-height:80vh; overflow:auto; padding:1.5rem 1.6rem; box-shadow:0 20px 60px rgba(0,0,0,.3); }
.ocwiz-modal__box h3 { margin:0 0 .2rem; color:var(--ocwiz-navy); }
.ocwiz-modal__close { position:absolute; top:.6rem; right:.8rem; background:transparent; border:0; font-size:1.1rem; color:#64748b; cursor:pointer; }
.ocwiz-modal__close:hover { color:var(--ocwiz-navy); }
.ocwiz-modal .ocwiz-content { white-space:pre-wrap; line-height:1.6; color:#334155; margin-top:.6rem; }
/* Datum/tijd instellen in de post-popup */
.ocwiz-modal__when { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.75rem; margin:.6rem 0 .2rem; padding:.75rem .85rem; background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; }
.ocwiz-modal__when-field { display:flex; flex-direction:column; gap:.25rem; margin:0; font-weight:600; color:var(--ocwiz-navy); font-size:.9rem; }
.ocwiz-modal__when-field input { font:inherit; padding:.45rem .55rem; border:1px solid #cbd5e1; border-radius:8px; }
.ocwiz-modal__when #ocwiz-modal-save { background:#1f6f6f; border-color:#1f6f6f; color:#fff; }
.ocwiz-modal__when #ocwiz-modal-save:hover:not(:disabled) { background:#003a80; border-color:#003a80; }
.ocwiz-modal__when #ocwiz-modal-when-status { flex-basis:100%; font-size:.85rem; }

/* Historie: hergebruik-knop per kanaal */
.ocwiz-hist-ch { margin: 0 0 .9rem; }
.ocwiz-hist-ch .ocwiz-reuse { margin-top: .4rem; }

/* Historie: verwijder-knoppen + werkbalk */
.ocwiz-hist-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 0 1rem; }
.ocwiz-history-item > summary { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ocwiz-history-item > summary .ocwiz-hist-del { margin-left:auto; padding:.25rem .6rem; }

/* ---------- JSON-validator (losse shortcode [ocwiz_json_validator]) ---------- */
#ocwiz-validator .ocwiz-val-card { border-left:4px solid #1f6f6f; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
#ocwiz-validator .ocwiz-val-field { width:100%; }
/* Upload-veld: de bestandsknop als een nette, volledig rechthoekige (afgeronde) knop —
   niet de half-afgekapte native variant. */
#ocwiz-validator .ocwiz-val-file { font:inherit; color:#334155; max-width:100%; }
#ocwiz-validator .ocwiz-val-file::-webkit-file-upload-button,
#ocwiz-validator .ocwiz-val-file::file-selector-button {
  font:inherit; font-weight:600; color:#fff; background:#1f6f6f; border:0;
  padding:.55rem 1rem; border-radius:9px; cursor:pointer; margin-right:14px;
  -webkit-appearance:none; appearance:none; transition:background .15s; }
#ocwiz-validator .ocwiz-val-file::-webkit-file-upload-button:hover,
#ocwiz-validator .ocwiz-val-file::file-selector-button:hover { background:#003a80; }
/* Valideren-knop in huisstijl-blauw, met ruimte eronder voor de status. */
#ocwiz-validator .ocwiz-val-go { background:#1f6f6f; border-color:#1f6f6f; color:#fff; }
#ocwiz-validator .ocwiz-val-go:hover:not(:disabled) { background:#003a80; border-color:#003a80; }
#ocwiz-validator .ocwiz-val-status { margin:0; color:#475569; min-height:1.2em; }
#ocwiz-validator .ocwiz-val-result { margin-top:20px; }
#ocwiz-validator .ocwiz-val-result .ocwiz-ch { margin-top:0; }
#ocwiz-validator .ocwiz-val-result .ocwiz-btn { margin-top:16px; background:#1f6f6f; border-color:#1f6f6f; color:#fff; }
#ocwiz-validator .ocwiz-val-result .ocwiz-btn:hover { background:#003a80; border-color:#003a80; }
/* Advies bij een nog-niet-geldige CSV: begrijpelijk advies bovenaan, technische melding eronder. */
#ocwiz-validator .ocwiz-val-advice { list-style:none; margin:.5rem 0 0; padding:0; }
#ocwiz-validator .ocwiz-val-advice > li { margin:0 0 14px; padding:12px 14px; background:#fff7f6; border:1px solid #f3d6d3; border-radius:9px; }
#ocwiz-validator .ocwiz-val-advies { display:block; color:#1e293b; font-weight:600; }
#ocwiz-validator .ocwiz-val-melding { display:block; margin-top:6px; color:#64748b; font-size:.86em; }
#ocwiz-validator .ocwiz-val-melding strong { color:#475569; font-weight:600; }

/* ============================================================================
   2026 UI-laag (teal / navy / pink). Override-blok onderaan: wint van de regels
   hierboven én van account.css (onboarding.css laadt als laatste in de app).
   Bron-tokens: ../../../Contentmotor SaaS/design-2026/. Herwerk hier.
   ========================================================================== */
:root {
  --ocw-teal-50:#ecf6f5; --ocw-teal-100:#d3eae8; --ocw-teal-200:#a9d6d3; --ocw-teal-300:#6fbab6;
  --ocw-teal-500:#1f6f6f; --ocw-teal-600:#1a5e5e; --ocw-teal-700:#134747;
  --ocw-navy-700:#0e2a47; --ocw-pink-50:#fdeef5; --ocw-pink-500:#e84e8a; --ocw-pink-600:#d33b77;
  --bg:#f5f7fa; --surface:#fff; --surface-2:#f8fafc; --surface-3:#f1f4f8;
  --border:#e7ebf1; --border-strong:#d7dde7;
  --text:#0e2a47; --text-2:#46505d; --text-muted:#7b8593;
  --primary:#1f6f6f; --primary-hover:#1a5e5e; --primary-press:#134747; --primary-soft:#ecf6f5;
  --accent:#e84e8a; --accent-soft:#fdeef5; --ring:rgba(31,111,111,.32);
  --success:#16a34a; --success-soft:#e7f6ec;
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(14,42,71,.05); --shadow-sm:0 2px 8px rgba(14,42,71,.06);
  --shadow-md:0 8px 24px rgba(14,42,71,.08); --shadow-lg:0 18px 44px rgba(14,42,71,.10);
  --ui-font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* Herkleur de legacy-merkvariabelen → teal/navy/pink (recolort alles ineens). */
.ocwiz-app, .ocwiz-wizard, .ocwiz-shell {
  --ocwiz-teal: var(--primary); --ocwiz-teal-dark: var(--primary-hover);
  --ocwiz-navy: var(--text); --ocwiz-pink: var(--accent);
  --ocwiz-bg: var(--bg); --ocwiz-line: var(--border);
}
.ocwiz-shell, .ocwiz-app, .ocwiz-wizard { font-family: var(--ui-font); color: var(--text); }

/* ---- shell / sidebar (wint van account.css) ---- */
.ocwiz-shell { max-width: 1640px; padding: clamp(8px, 1.4vw, 22px); }
.ocwiz-shell__grid { grid-template-columns: 256px minmax(0,1fr); gap: clamp(16px,2vw,28px); }
.ocwiz-shell__content { padding: clamp(16px, 2vw, 28px); }
.ocwiz-shell__nav { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 14px 12px; gap: 2px; }
.ocwiz-shell__logo { padding: 4px 8px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.ocwiz-shell__logo img { max-width: 150px; }
.ocwiz-shell__navlabel { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); padding: 14px 12px 4px; }
.ocwiz-shell__navlabel:first-of-type { padding-top: 4px; }
.ocwiz-shell__link { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm);
  color: var(--text-2); font-weight: 500; font-size: 14.5px; line-height: 1.2; }
.ocwiz-shell__link svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.ocwiz-shell__link:hover { background: var(--surface-3); color: var(--text); }
.ocwiz-shell__link.is-active { background: var(--primary-soft); color: var(--primary-press); font-weight: 600; }
.ocwiz-shell__link.is-active svg { opacity: 1; }
.ocwiz-shell__link .ocwiz-navcount { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; }
.ocwiz-shell__foot { margin-top: 18px; }
.ocwiz-shell__back { color: var(--text-muted); font-weight: 600; }
.ocwiz-shell__back:hover { color: var(--primary); }

/* ---- app container + panels ---- */
/* Breedte-cap eraf met !important, net als .ocwiz-wizard hierboven: zo gebruikt
   ook het uploadscherm (.ocwiz-app.ocwiz-uploads) en het overzicht de volledige
   content-ruimte, ook als een thema-/WooCommerce-regel .ocwiz-app wil versmallen. */
.ocwiz-app { max-width: none !important; }
.ocwiz-app__bar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 14px 18px; }
.ocwiz-app__logo { background: linear-gradient(150deg, var(--ocw-teal-500), var(--ocw-teal-700));
  border-radius: 11px; box-shadow: var(--shadow-sm); }
.ocwiz-panel, .ocwiz-card, .ocwiz-aud { background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: clamp(18px,2vw,24px); }
.ocwiz-panel h3, .ocwiz-card h3 { color: var(--text); font-weight: 700; letter-spacing: -.01em; }

/* ---- buttons ---- */
.ocwiz-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: var(--r-md); padding: 10px 18px; font-weight: 600; font-family: var(--ui-font);
  transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; }
.ocwiz-btn:hover { border-color: var(--border-strong); }
.ocwiz-btn:active { transform: translateY(1px); }
.ocwiz-btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 1px; }
.ocwiz-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 6px 16px rgba(31,111,111,.22); }
.ocwiz-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.ocwiz-btn--ghost { background: transparent; border-color: transparent; color: var(--primary); }
.ocwiz-btn--ghost:hover { background: var(--primary-soft); }
.ocwiz-submit { background: var(--primary); border-radius: var(--r-md); box-shadow: 0 6px 16px rgba(31,111,111,.22); }
.ocwiz-submit:hover { background: var(--primary-hover); }

/* ---- inputs ---- */
.ocwiz-app input[type=text], .ocwiz-app input[type=password], .ocwiz-app input[type=url],
.ocwiz-app input[type=number], .ocwiz-app input[type=search], .ocwiz-app input[type=datetime-local],
.ocwiz-app textarea, .ocwiz-app select,
.ocwiz-wizard input[type=text], .ocwiz-wizard input[type=url], .ocwiz-wizard textarea, .ocwiz-wizard select {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 10px 14px;
  background: var(--surface); color: var(--text); font-family: var(--ui-font);
  transition: border-color .15s, box-shadow .15s; }
.ocwiz-app input:focus, .ocwiz-app textarea:focus, .ocwiz-app select:focus,
.ocwiz-wizard input:focus, .ocwiz-wizard textarea:focus, .ocwiz-wizard select:focus {
  outline: none; border-color: var(--ocw-teal-300); box-shadow: 0 0 0 3px var(--ring); }

/* ---- badges, channel blocks, wizard, toast ---- */
.ocwiz-badge { border-radius: var(--r-pill); font-weight: 700; padding: 3px 10px; }
.ocwiz-badge--on { background: var(--success-soft); color: var(--success); }
.ocwiz-badge--off { background: var(--surface-3); color: var(--text-2); }
.ocwiz-ch { background: var(--surface); border: 1px solid var(--border); border-left: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.ocwiz-ch__head h3 { color: var(--text); }
.ocwiz-toast { border-radius: var(--r-md); box-shadow: var(--shadow-lg); font-weight: 600; }
.ocwiz-notice { border-radius: var(--r-md); }
.ocwiz-muted, .ocwiz-hint { color: var(--text-muted); }

/* ---- Overzicht / home ---- */
.ocwiz-overview { display: flex; flex-direction: column; gap: 24px; }
.ocwiz-hero { position: relative; overflow: hidden; border-radius: var(--r-xl, 24px); padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--border);
  background: radial-gradient(900px 200px at 12% -40%, var(--ocw-pink-50), transparent 60%), linear-gradient(120deg, var(--ocw-teal-50), #eef3fb 70%); }
.ocwiz-hero h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.025em; margin: 0; color: var(--text); }
.ocwiz-hero p { max-width: 560px; color: var(--text-2); margin: 12px 0 0; }
.ocwiz-hero__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
.ocwiz-hero__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.ocwiz-hero__link:hover { color: var(--primary); }

.ocwiz-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.ocwiz-chip { display: inline-flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--border);
  border-radius: var(--r-md); background: var(--surface); font-weight: 600; color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .05s; }
.ocwiz-chip:hover { border-color: var(--ocw-teal-300); box-shadow: var(--shadow-sm); }
.ocwiz-chip:active { transform: translateY(1px); }
.ocwiz-iconchip { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.ocwiz-iconchip svg { width: 17px; height: 17px; }
.ocwiz-iconchip.teal { background: var(--ocw-teal-50); color: var(--ocw-teal-600); }
.ocwiz-iconchip.pink { background: var(--ocw-pink-50); color: var(--ocw-pink-600); }
.ocwiz-iconchip.violet { background: var(--ocw-violet-50, #eef0fc); color: var(--ocw-violet-500, #6c5ce7); }
.ocwiz-iconchip.amber { background: var(--ocw-amber-50, #fdf3e3); color: var(--ocw-amber-500, #d9870b); }
.ocwiz-iconchip.sky { background: var(--ocw-sky-50, #e9f3fd); color: var(--ocw-sky-500, #2f86d6); }

.ocwiz-ov-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.ocwiz-ov-head h3 { font-size: 18px; font-weight: 700; }
.ocwiz-ov-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
/* Checklist weggevallen (alles afgevinkt): "Recente content" pakt de volle breedte. */
.ocwiz-ov-grid--full { grid-template-columns: 1fr; }
@media (max-width: 880px) { .ocwiz-ov-grid { grid-template-columns: 1fr; } }

.ocwiz-progress { height: 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; margin: 6px 0 4px; }
.ocwiz-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ocw-teal-500), var(--ocw-teal-300)); }
.ocwiz-check { display: flex; flex-direction: column; }
.ocwiz-check__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.ocwiz-check__row:first-child { border-top: 0; }
.ocwiz-check__row .t { font-weight: 600; }
.ocwiz-check__row .m { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.ocwiz-check__row .sp { margin-left: auto; }
.ocwiz-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 2px solid var(--border-strong); display: grid; place-items: center; color: #fff; }
.ocwiz-dot.done { background: var(--success); border-color: var(--success); }
.ocwiz-dot.done::after { content: "✓"; font-size: 12px; font-weight: 700; }

.ocwiz-ovlist { display: flex; flex-direction: column; }
.ocwiz-ovlist__row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); }
.ocwiz-ovlist__row:first-child { border-top: 0; }
.ocwiz-ovlist__row .t { font-weight: 600; }
.ocwiz-ovlist__row .m { font-size: 13px; color: var(--text-muted); }
.ocwiz-ovlist__row .sp { margin-left: auto; }
.ocwiz-ov-empty { text-align: center; color: var(--text-muted); padding: 24px 0; }

/* ---- hulpbalk + promo-kaarten (Overzicht onderkant) ---- */
.ocwiz-helper { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-lg);
  border: 1px solid var(--ocw-amber-500, #d9870b); background: linear-gradient(120deg, var(--ocw-amber-50, #fdf3e3), #fff 80%); }
.ocwiz-helper .ocwiz-iconchip { width: 38px; height: 38px; }
.ocwiz-helper h4 { margin: 0; font-size: 16px; font-weight: 700; color: var(--text); }
.ocwiz-helper p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.ocwiz-helper .sp { margin-left: auto; }
.ocwiz-promos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px) { .ocwiz-promos { grid-template-columns: 1fr; } }
.ocwiz-promo { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ocwiz-promo .ocwiz-iconchip { width: 40px; height: 40px; }
.ocwiz-promo h4 { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--text); }
.ocwiz-promo p { margin: 0 0 6px; color: var(--text-muted); font-size: 13px; }
/* Knop onderaan uitlijnen (gelijke onderkant ongeacht tekstlengte); kaart-padding = marge tot de rand. */
.ocwiz-promo .ocwiz-btn { margin-top: auto; }

/* ---- account-widget onderin de sidebar ---- */
.ocwiz-shell__navfoot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* ---- Meldingen-bel (beheerder -> klanten) in de zijbalk ---- */
.ocwiz-bell { position: relative; margin: 2px 0 6px; }
.ocwiz-bell__btn { display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px;
  border: 0; background: transparent; border-radius: var(--r-sm); color: var(--text-2);
  font: inherit; font-weight: 500; font-size: 14.5px; line-height: 1.2; cursor: pointer; }
.ocwiz-bell__btn:hover { background: var(--surface-3); color: var(--text); }
.ocwiz-bell__btn svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.ocwiz-bell__label { flex: 1 1 auto; text-align: left; }
.ocwiz-bell__badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.ocwiz-bell__pop { position: absolute; top: calc(100% + 6px); left: 0; width: 320px; max-width: 80vw; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: 0 12px 32px rgba(0,0,0,.16); max-height: 380px; overflow: auto; padding: 6px; }
.ocwiz-bell__head { padding: 8px 10px 6px; font-weight: 700; color: var(--text); font-size: 13px; }
.ocwiz-bell__empty { padding: 10px; color: var(--text-muted); font-size: 13px; }
.ocwiz-bell__list { list-style: none; margin: 0; padding: 0; }
.ocwiz-bell__item { padding: 10px; }
.ocwiz-bell__item + .ocwiz-bell__item { border-top: 1px solid var(--border); }
.ocwiz-bell__title { display: block; color: var(--text); font-size: 13.5px; }
.ocwiz-bell__msg { margin: 4px 0 0; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.ocwiz-bell__link { display: inline-block; margin-top: 6px; color: var(--primary); font-weight: 600; font-size: 13px; }
.ocwiz-bell__time { display: block; margin-top: 6px; color: var(--text-muted); font-size: 11px; }
.ocwiz-acct { position: relative; }
/* Hoge specificiteit + !important: de theme stylet <button> als blauwe pill — uitschakelen. */
.ocwiz-shell__navfoot .ocwiz-acct__btn,
.ocwiz-shell .ocwiz-acct .ocwiz-acct__btn {
  -webkit-appearance: none !important; appearance: none !important;
  display: flex !important; align-items: center; gap: 10px; width: 100% !important;
  padding: 8px 10px !important; min-height: 0 !important; line-height: 1.2 !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
  background: var(--surface-2) !important; color: var(--text) !important;
  box-shadow: none !important; cursor: pointer; font: inherit !important; text-align: left !important;
  text-transform: none !important; letter-spacing: normal !important;
}
.ocwiz-shell__navfoot .ocwiz-acct__btn:hover { border-color: var(--border-strong) !important; background: var(--surface) !important; }
.ocwiz-acct__av { position: relative; width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--ocw-teal-500), var(--ocw-teal-700)); color: #fff; font-weight: 800; overflow: hidden; }
.ocwiz-acct__av .ocwiz-avatar__initial { font-size: 13px; }
.ocwiz-acct__av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ocwiz-acct__meta { display: flex; flex-direction: column; min-width: 0; }
.ocwiz-acct__name { font-weight: 700; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocwiz-acct__ws { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocwiz-acct__chev { margin-left: auto; color: var(--text-muted); flex: none; }
.ocwiz-acct__btn[aria-expanded="true"] .ocwiz-acct__chev { transform: rotate(180deg); }
/* uitklap-venster opent naar boven */
.ocwiz-acct__pop { position: absolute; left: 0; right: 0; top: auto; bottom: calc(100% + 8px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); padding: 12px; z-index: 60; display: flex; flex-direction: column; gap: 8px; min-width: 220px; }
/* display:flex hierboven overschreef het hidden-attribuut, waardoor het menu niet sloot. */
.ocwiz-acct__pop[hidden] { display: none; }
.ocwiz-shell .ocwiz-acct__pop .ocwiz-accountmenu__item {
  -webkit-appearance: none !important; appearance: none !important;
  display: block !important; width: 100% !important; text-align: left !important; padding: 8px 10px !important;
  border: 0 !important; background: transparent !important; border-radius: var(--r-sm) !important;
  color: var(--text-2) !important; font: inherit !important; font-weight: 600 !important; cursor: pointer;
  text-decoration: none !important; box-shadow: none !important; text-transform: none !important; min-height: 0 !important; line-height: 1.3 !important; }
.ocwiz-shell .ocwiz-acct__pop .ocwiz-accountmenu__item:hover { background: var(--surface-3) !important; color: var(--text) !important; }
.ocwiz-acct__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.ocwiz-acct__nrow { display: flex; gap: 8px; }
.ocwiz-acct__nrow input { flex: 1; min-width: 0; }
.ocwiz-acct__nrow .ocwiz-btn { padding: 8px 14px; }
.ocwiz-acct__wsrow { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px 10px; border-bottom: 1px solid var(--border); }
.ocwiz-acct__wsrow strong { color: var(--text); }

/* ============================================================================
   App-typografie + knoppen afschermen van het theme. Het theme zet grote koppen
   en eigen knop-stijlen; hier dwingen we de OCW-verhoudingen af (!important nodig
   om themaregels te verslaan, ongeacht specificiteit/laadvolgorde).
   ========================================================================== */
.ocwiz-shell, .ocwiz-app, .ocwiz-wizard { font-size: 14.5px; }
.ocwiz-shell h1, .ocwiz-app h1, .ocwiz-wizard h1 { font-size: 26px !important; line-height: 1.2 !important; font-weight: 800 !important; margin: 0 !important; }
.ocwiz-shell h2, .ocwiz-app h2, .ocwiz-wizard h2 { font-size: 22px !important; line-height: 1.25 !important; font-weight: 800 !important; margin: 0 !important; }
.ocwiz-shell h3, .ocwiz-app h3, .ocwiz-wizard h3 { font-size: 18px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 0 !important; }
.ocwiz-shell h4, .ocwiz-app h4, .ocwiz-wizard h4 { font-size: 15px !important; line-height: 1.3 !important; font-weight: 700 !important; margin: 0 !important; }
.ocwiz-shell legend, .ocwiz-wizard legend { font-size: 18px !important; line-height: 1.3 !important; }
.ocwiz-hero h2 { font-size: clamp(24px, 2.6vw, 32px) !important; letter-spacing: -.02em !important; }
.ocwiz-app__title, .ocwiz-shell__logo { font-size: 16px; }

/* Knoppen: theme-styling (blauwe pill, hoofdletters, grote tekst/padding) uit. */
.ocwiz-shell .ocwiz-btn, .ocwiz-app .ocwiz-btn, .ocwiz-wizard .ocwiz-btn,
.ocwiz-shell .ocwiz-submit, .ocwiz-app .ocwiz-submit {
  -webkit-appearance: none !important; appearance: none !important;
  font: inherit !important; font-size: 14px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important; line-height: 1.2 !important;
  border-radius: var(--r-md) !important; min-height: 0 !important; width: auto; box-shadow: none !important;
  padding: 10px 16px !important;
}
.ocwiz-shell .ocwiz-btn--ghost, .ocwiz-app .ocwiz-btn--ghost { padding: 9px 12px !important; }
.ocwiz-shell .ocwiz-btn-sm, .ocwiz-app .ocwiz-btn-sm { padding: 7px 12px !important; font-size: 13px !important; }
.ocwiz-shell .ocwiz-btn--primary, .ocwiz-app .ocwiz-btn--primary, .ocwiz-shell .ocwiz-submit, .ocwiz-app .ocwiz-submit {
  background: var(--primary) !important; border: 1px solid var(--primary) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(31,111,111,.22) !important; }
.ocwiz-shell .ocwiz-btn--ghost, .ocwiz-app .ocwiz-btn--ghost { background: transparent !important; border-color: transparent !important; color: var(--primary) !important; }
.ocwiz-shell .ocwiz-btn:not(.ocwiz-btn--primary):not(.ocwiz-btn--ghost),
.ocwiz-app .ocwiz-btn:not(.ocwiz-btn--primary):not(.ocwiz-btn--ghost),
.ocwiz-wizard .ocwiz-btn:not(.ocwiz-btn--primary):not(.ocwiz-btn--ghost) {
  background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }

/* ==========================================================================
   Verbindingen — sub-tabs (gesegmenteerde balk) + panelen
   ========================================================================== */
.ocwiz-subtabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--surface-2, #eef2f4); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 5px; margin: 0 0 20px;
}
.ocwiz-shell .ocwiz-subtab, .ocwiz-app .ocwiz-subtab {
  -webkit-appearance: none !important; appearance: none !important;
  font: inherit !important; font-size: 13.5px !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: normal !important; line-height: 1.2 !important;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px !important; border: 1px solid transparent !important;
  border-radius: var(--r-sm, 8px) !important; min-height: 0 !important;
  background: transparent !important; color: var(--muted, #5b6b73) !important;
  box-shadow: none !important; cursor: pointer; transition: background .15s, color .15s;
}
.ocwiz-shell .ocwiz-subtab:hover, .ocwiz-app .ocwiz-subtab:hover {
  background: rgba(31,111,111,.07) !important; color: var(--text) !important; }
.ocwiz-shell .ocwiz-subtab.is-active, .ocwiz-app .ocwiz-subtab.is-active {
  background: #fff !important; color: #134747 !important;
  border-color: var(--border) !important; box-shadow: 0 1px 3px rgba(14,42,71,.08) !important; }
.ocwiz-cpane[hidden] { display: none !important; }
.ocwiz-cpane { animation: ocwiz-fade .18s ease; }
@keyframes ocwiz-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Hulp / ticket — modal
   ========================================================================== */
.ocwiz-modal[hidden] { display: none !important; }
.ocwiz-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.ocwiz-modal__backdrop {
  position: absolute; inset: 0; background: rgba(14,42,71,.45);
  backdrop-filter: blur(2px);
}
.ocwiz-modal__box {
  position: relative; width: 100%; max-width: 460px;
  background: #fff; border-radius: var(--r-lg, 16px);
  box-shadow: 0 24px 60px rgba(14,42,71,.28); padding: 24px;
  animation: ocwiz-pop .2s ease;
}
@keyframes ocwiz-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ocwiz-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--surface-2, #eef2f4); color: var(--muted, #5b6b73);
  font-size: 18px; line-height: 1; cursor: pointer; display: flex;
  align-items: center; justify-content: center;
}
.ocwiz-modal__close:hover { background: rgba(31,111,111,.12); color: var(--text); }
.ocwiz-modal__title { margin: 0 0 4px !important; }
.ocwiz-modal__intro { color: var(--muted, #5b6b73); font-size: 13.5px; margin: 0 0 18px; }
.ocwiz-modal__field { margin-bottom: 14px; }
.ocwiz-modal__field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.ocwiz-modal__field input, .ocwiz-modal__field select, .ocwiz-modal__field textarea {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  font: inherit; font-size: 14px; background: #fff; color: var(--text);
}
.ocwiz-modal__field textarea { min-height: 120px; resize: vertical; }
.ocwiz-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.ocwiz-modal__note { font-size: 13px; margin: 10px 0 0; }
.ocwiz-modal__note.is-ok { color: #1f6f6f; }
.ocwiz-modal__note.is-err { color: #c0392b; }

/* ==========================================================================
   2026-design — fase 3: componenten doortrekken naar álle subpagina's
   Spiegelt design-2026/app.css. Gedeelde componenten → werkt op elk tabblad.
   ========================================================================== */

/* ---- Paginakop: consistente titel + subtitel op elk scherm ---- */
.ocwiz-welcome__title,
.ocwiz-app .ocwiz-panel > h3:first-child {
  font-size: 22px !important; font-weight: 800 !important; color: var(--text) !important;
  letter-spacing: -.01em; line-height: 1.2 !important; margin: 0 0 4px !important;
}
.ocwiz-welcome { margin: 0 0 20px; }
.ocwiz-welcome__sub { color: var(--text-muted); max-width: 640px; margin: 0; }

/* ---- Kaarten/panelen: rustige ademruimte + zachte schaduw ---- */
.ocwiz-app .ocwiz-panel {
  border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.ocwiz-app .ocwiz-panel > h3 { margin-bottom: 16px; }

/* ---- Veldlabels: kort, halfvet, navy ---- */
.ocwiz-idea-label,
.ocwiz-app .ocwiz-panel label:not(.ocwiz-check):not(.ocwiz-autoimg) {
  font-weight: 600; font-size: 13px; color: var(--text);
}
.ocwiz-idea-label { display: block; margin-bottom: 6px; }

/* ---- Velden: even ruim + duidelijke teal focus-ring overal ---- */
.ocwiz-app input[type=text], .ocwiz-app input[type=password], .ocwiz-app input[type=url],
.ocwiz-app input[type=number], .ocwiz-app input[type=search], .ocwiz-app input[type=email],
.ocwiz-app input[type=date], .ocwiz-app input[type=time], .ocwiz-app input[type=datetime-local],
.ocwiz-app textarea, .ocwiz-app select {
  padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--surface); transition: border-color .15s, box-shadow .15s;
  font: inherit; font-size: 14.5px; font-weight: 400; color: var(--text);
}
.ocwiz-app input:focus, .ocwiz-app textarea:focus, .ocwiz-app select:focus {
  outline: none; border-color: var(--ocw-teal-300); box-shadow: 0 0 0 3px var(--ring);
}
.ocwiz-app textarea { min-height: 96px; resize: vertical; line-height: 1.55; }

/* Lucht boven de losse "Opslaan"-knoppen die direct onder een veld staan
   (Verbindingen -> AI-sleutels en Opslag -> mapnaam), zodat ze niet strak tegen
   het veld erboven plakken. */
.ocwiz-app #ocwiz-save-secrets,
.ocwiz-app #ocwiz-save-folder { margin-top: 16px; }

/* ==========================================================================
   Selectie-pills (doelgroep · kanalen · producten · CTA's)
   Ruwe checkbox-labels → teal toggle-pills met tick-cirkel (preview .toggle).
   ========================================================================== */
.ocwiz-chanpick { display: flex; flex-wrap: wrap; gap: 10px !important; margin-top: 8px; }
.ocwiz-chanpick .ocwiz-check {
  position: relative; display: inline-flex !important; flex-direction: row !important;
  align-items: center; gap: 8px;
  padding: 8px 16px !important; margin: 0 !important;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font-weight: 500 !important; cursor: pointer; user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.ocwiz-chanpick .ocwiz-check:hover { border-color: var(--border-strong); }
/* ruwe checkbox/radio onzichtbaar maar bedienbaar; tick wordt de ::before-cirkel */
.ocwiz-chanpick .ocwiz-check input[type=checkbox],
.ocwiz-chanpick .ocwiz-check input[type=radio] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.ocwiz-chanpick .ocwiz-check::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid var(--border-strong); display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 700; line-height: 1;
  transition: background .15s, border-color .15s;
}
.ocwiz-chanpick .ocwiz-check:has(input:checked) {
  background: var(--primary-soft); border-color: var(--ocw-teal-300);
  color: var(--primary-press); font-weight: 600 !important;
}
.ocwiz-chanpick .ocwiz-check:has(input:checked)::before {
  content: "✓"; background: var(--primary); border-color: var(--primary);
}

/* ==========================================================================
   Schakelaar: "Maak automatisch een afbeelding…" (preview .switch)
   ========================================================================== */
label.ocwiz-autoimg {
  position: relative; display: flex !important; flex-direction: row !important;
  align-items: center; gap: 12px; margin: 14px 0 2px !important;
  font-weight: 500; line-height: 1.4; cursor: pointer;
}
label.ocwiz-autoimg input[type=checkbox] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
label.ocwiz-autoimg::before {
  content: ""; flex: none; width: 42px; height: 24px; border-radius: var(--r-pill);
  background: var(--border-strong); transition: background .15s;
}
label.ocwiz-autoimg::after {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-xs); transition: left .15s;
}
label.ocwiz-autoimg:has(input:checked)::before { background: var(--primary); }
label.ocwiz-autoimg:has(input:checked)::after { left: 20px; }

/* ---- Consistente verticale ritmiek in de generator-kaart ---- */
/* Muted helper-tekst die een pillgroep inleidt → vaste marges, leest als sublabel */
.ocwiz-panel > .ocwiz-muted,
.ocwiz-advanced__body > .ocwiz-muted { margin: 18px 0 2px; color: var(--text-2); }
.ocwiz-panel > .ocwiz-muted:first-of-type { margin-top: 4px; }
.ocwiz-panel .ocwiz-chanpick,
.ocwiz-advanced__body .ocwiz-chanpick { margin: 8px 0 4px; }
/* Idee-rij: invoer + knop netjes op één lijn */
.ocwiz-idea-row { display: flex; gap: 10px; align-items: stretch; margin-top: 6px; }
.ocwiz-idea-row input { flex: 1; margin: 0; }
.ocwiz-idea-row .ocwiz-btn { flex: none; }
/* "Of kies een opgeslagen idee" chips netjes uitgelijnd */
.ocwiz-idea-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
/* Het "laatste idee" kan een lange zin zijn: laat de chip binnen de kolom blijven
   en over meerdere regels afbreken in plaats van uit het venster te lopen. */
.ocwiz-shell .ocwiz-idea-chip, .ocwiz-app .ocwiz-idea-chip {
  max-width: 100%; min-width: 0; height: auto; white-space: normal; text-align: left;
  word-break: break-word; overflow-wrap: anywhere; line-height: 1.45 !important;
}
/* Extra-instructie label in de geavanceerd-strook */
.ocwiz-advanced__body .ocwiz-idea-label { display: block; margin-top: 16px; }

/* "Specifiek maken" inklapper: rustige strook (preview .collapse) */
.ocwiz-advanced, details.ocwiz-advanced {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: 14px 18px; margin-bottom: 20px;
}
.ocwiz-advanced[open] { background: var(--surface); }
.ocwiz-advanced > summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.ocwiz-advanced > summary::-webkit-details-marker { display: none; }

/* ==========================================================================
   Resultaatblokken per kanaal (preview .block) — net, met kop-strook
   ========================================================================== */
.ocwiz-audience-group { margin-top: 20px; }
.ocwiz-aud-grouptitle { font-size: 18px !important; font-weight: 800 !important; color: var(--text) !important; margin: 0 0 12px !important; }
.ocwiz-app .ocwiz-ch {
  border: 1px solid var(--border); border-left: 1px solid var(--border) !important;
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: hidden; padding: 0;
  margin-top: 14px;
}
/* Historie-items hebben geen edge-to-edge .ocwiz-ch__head, dus geef de tekst hier
   binnenmarge (het gedeelde .ocwiz-ch heeft padding:0 voor de generate-resultaten). */
.ocwiz-app .ocwiz-history-item { padding: 8px 18px; }
.ocwiz-app .ocwiz-ch__head {
  margin: 0; padding: 12px 18px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); gap: 12px;
}
.ocwiz-app .ocwiz-ch__head h3 { font-size: 15px !important; font-weight: 700 !important; color: var(--text) !important; }
.ocwiz-app .ocwiz-ch__text {
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 16px 18px !important; background: transparent; min-height: 96px;
}
.ocwiz-app .ocwiz-ch__text:focus { box-shadow: inset 0 0 0 2px var(--ring) !important; }
.ocwiz-app .ocwiz-ch__img { margin: 0 18px 16px; }

/* Icoon-knoppen in resultaatkop: strak rond, teal hover (al deels aanwezig) */
.ocwiz-app .ocwiz-iconbtn { width: 32px; height: 32px; border-radius: var(--r-sm); }

/* ---- Badges: zachte tinten (Concept/SEO ✓ e.d.) ---- */
.ocwiz-badge { font-size: 12px; }

/* ---- Knoppen iets royaler (preview-maat) ---- */
.ocwiz-shell .ocwiz-btn--primary, .ocwiz-app .ocwiz-btn--primary,
.ocwiz-shell .ocwiz-submit, .ocwiz-app .ocwiz-submit { padding: 10px 20px !important; }

/* ==========================================================================
   Merkprofiel — volledige breedte + sub-tabs (zelfde patroon als Verbindingen)
   ========================================================================== */
/* Breedte-cap eraf: profiel gebruikt nu de volledige content-ruimte */
.ocwiz-wizard { max-width: none !important; margin: 0 !important; font-size: 14.5px !important; }

/* CSV-template-kaart bovenaan: net, niet meer een smal kadertje */
.ocwiz-wizard .ocwiz-template { max-width: none; margin: 0 0 16px; padding: 18px 22px; border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
.ocwiz-wizard .ocwiz-template h3 { font-size: 16px !important; margin: 0 0 4px !important; }
.ocwiz-template__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
/* Profiel-tools: template-kaart en reset-kaart naast elkaar. */
.ocwiz-wizard .ocwiz-profile-tools { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 0 0 16px; }
.ocwiz-wizard .ocwiz-profile-tools > .ocwiz-card { margin: 0; max-width: none; width: 100%; }
@media (max-width: 880px) { .ocwiz-wizard .ocwiz-profile-tools { grid-template-columns: 1fr; } }
/* Knoppen in beide kaarten exact gelijke hoogte + gecentreerd (ook de label-knop "Importeer"). */
.ocwiz-template__actions .ocwiz-btn,
.ocwiz-resetzone__actions .ocwiz-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; }

/* Tab-panes: elk een rustige kaart op volle breedte */
.ocwiz-wizard .ocwiz-cpane.ocwiz-pstep {
  background: var(--surface); border: 1px solid var(--border); border-left: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 24px 26px; margin: 0;
}
.ocwiz-pstep__title { font-size: 18px !important; font-weight: 800 !important; color: var(--text) !important; margin: 0 0 14px !important; }
.ocwiz-pstep__foot { margin-top: 18px; }

/* Labels + velden in het profiel: leesbare regellengte, niet eindeloos breed */
.ocwiz-wizard label { margin: 14px 0 0 !important; font-weight: 600; color: var(--text); }
.ocwiz-wizard .ocwiz-pstep > label:first-of-type { margin-top: 0 !important; }
.ocwiz-wizard input[type=text], .ocwiz-wizard input[type=url], .ocwiz-wizard select { max-width: 640px; }
.ocwiz-wizard textarea { max-width: 880px; min-height: 84px; }
.ocwiz-wizard .ocwiz-hint { display: block; color: var(--text-muted); font-size: 13px; font-weight: 400; margin: 4px 0 0; max-width: 880px; }

/* Blokken (doelgroep/kanaal/product/cta) netjes binnen de pane */
.ocwiz-wizard .ocwiz-aud.ocwiz-block, .ocwiz-wizard .ocwiz-block {
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2);
  padding: 16px 18px; margin: 12px 0 0;
}
.ocwiz-wizard .ocwiz-add-block { margin-top: 12px; }

/* ==========================================================================
   2026-design — fase 5: knoppen + typografie strak gelijktrekken
   Eén ronding, gelijke hoogtes; alleen kleur/breedte/maat-klasse verschilt.
   ========================================================================== */
/* Alle tekstknoppen: zelfde ronding (r-md), zelfde verticale maat (10px) → gelijke hoogte */
.ocwiz-shell .ocwiz-btn, .ocwiz-app .ocwiz-btn, .ocwiz-wizard .ocwiz-btn,
.ocwiz-shell .ocwiz-submit, .ocwiz-app .ocwiz-submit, .ocwiz-wizard .ocwiz-submit {
  -webkit-appearance: none !important; appearance: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  border-radius: var(--r-md) !important; padding: 10px 18px !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.2 !important;
  min-height: 40px !important; box-sizing: border-box !important;
}
/* Ghost: zelfde hoogte (10px verticaal), iets minder breed */
.ocwiz-shell .ocwiz-btn--ghost, .ocwiz-app .ocwiz-btn--ghost, .ocwiz-wizard .ocwiz-btn--ghost {
  padding: 10px 14px !important; }
/* Kleine variant: bewust compacter, óók gelijk onderling */
.ocwiz-shell .ocwiz-btn-sm, .ocwiz-app .ocwiz-btn-sm, .ocwiz-wizard .ocwiz-btn-sm {
  padding: 7px 12px !important; font-size: 13px !important; min-height: 32px !important; }
/* Icoon-knoppen: even hoog als de tekstknoppen ernaast, zelfde ronding → nette rij */
.ocwiz-shell .ocwiz-iconbtn, .ocwiz-app .ocwiz-iconbtn {
  width: 40px !important; height: 40px !important; min-height: 40px !important;
  border-radius: var(--r-md) !important; padding: 0 !important;
}
/* Actie-rij in resultaatblokken: nette, gelijkmatige tussenruimte */
.ocwiz-app .ocwiz-ch__actions { gap: 8px; align-items: center; }

/* ---- Typografie hard vastzetten zodat het thema niets vergroot ---- */
.ocwiz-shell, .ocwiz-app, .ocwiz-wizard { font-size: 14.5px !important; }
.ocwiz-shell h1, .ocwiz-app h1, .ocwiz-wizard h1 { font-size: 26px !important; }
.ocwiz-shell h2, .ocwiz-app h2, .ocwiz-wizard h2 { font-size: 22px !important; }
.ocwiz-shell h3, .ocwiz-app h3, .ocwiz-wizard h3 { font-size: 18px !important; }
.ocwiz-shell h4, .ocwiz-app h4, .ocwiz-wizard h4 { font-size: 15px !important; }
.ocwiz-shell h5, .ocwiz-app h5, .ocwiz-wizard h5,
.ocwiz-shell h6, .ocwiz-app h6, .ocwiz-wizard h6 { font-size: 14px !important; font-weight: 700 !important; margin: 0 !important; }
.ocwiz-shell legend, .ocwiz-app legend, .ocwiz-wizard legend { font-size: 15px !important; font-weight: 700 !important; }
.ocwiz-app p, .ocwiz-app li, .ocwiz-app td,
.ocwiz-wizard p, .ocwiz-wizard li, .ocwiz-wizard td { font-size: 14.5px; }
.ocwiz-app .ocwiz-muted, .ocwiz-app .ocwiz-hint,
.ocwiz-wizard .ocwiz-muted, .ocwiz-wizard .ocwiz-hint { font-size: 13px; }
/* Blok-titels (doelgroep/kanaal e.d.) niet als thema-kop oppoppen */
.ocwiz-wizard .ocwiz-aud__head { font-size: 14.5px; }

/* ==========================================================================
   2026-design — fase 6: Carrousel netjes uitlijnen (rijen verspringen niet)
   De plan-/actie-rijen werden in JS gemaakt zonder eigen CSS. Hier zetten we
   ze op één onderlijn en houden we de invoervelden compact.
   ========================================================================== */
/* Invoerrij: velden met label erboven + knop delen één onderlijn */
.ocwiz-carousel-row { display: flex !important; flex-wrap: wrap; align-items: flex-end !important; gap: 14px; margin-top: 16px; }
.ocwiz-carousel-row label { display: flex !important; flex-direction: column !important; align-items: flex-start; gap: 6px; margin: 0 !important; font-weight: 600; font-size: 13px; color: var(--text); }
.ocwiz-carousel-row select { min-width: 180px; width: auto; }
.ocwiz-carousel-row input[type="number"] { width: 96px !important; text-align: center; }
.ocwiz-carousel-row .ocwiz-btn { margin: 0; }

/* Resultaat-titel + actieknoppen (Stuur naar Canva · PDF) */
.ocwiz-carousel-out { margin-top: 22px; }
.ocwiz-carousel-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.ocwiz-carousel-head > .ocwiz-aud-grouptitle { margin: 0 !important; }
.ocwiz-carousel-out > .ocwiz-aud-grouptitle { margin-bottom: 6px !important; }
.ocwiz-carousel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 10px 0 0; }

/* "Plan op …": label op eigen regel, daaronder datum + knop netjes op één lijn */
.ocwiz-carousel-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; }
.ocwiz-carousel-plan > label { flex-basis: 100%; margin: 0 0 2px; font-weight: 600; font-size: 13px; color: var(--text); }
.ocwiz-carousel-plan input[type="datetime-local"] { width: auto; min-width: 220px; }
.ocwiz-carousel-plan .ocwiz-btn { margin: 0; }

.ocwiz-carousel-caption { margin-top: 16px; }
.ocwiz-carousel-caption-text { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; }
.ocwiz-pstep__subtitle { margin: 22px 0 4px; }
.ocwiz-analyze-style-row { display: flex; align-items: center; gap: 10px; margin: 10px 0; flex-wrap: wrap; }
.ocwiz-style-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 14px; margin: 12px 0 0; }
.ocwiz-style-gallery:empty { display: none; }

/* ---- Stijlvoorbeelden ----
   De kaart is een <button> en het theme stylet die als blauwe pill (zie de knop-
   regels rond r.579), waardoor de voorbeelden als gekleurde ovalen op de pagina
   stonden i.p.v. als kaartjes. Zelfde remedie als daar: hoge specificiteit +
   !important op elke eigenschap die het theme aanraakt. Ook hover/is-selected
   hebben !important nodig, anders wint de basisregel hieronder van zichzelf. */
.ocwiz-wizard .ocwiz-style-card {
  -webkit-appearance: none !important; appearance: none !important;
  position: relative; display: flex; flex-direction: column; gap: 8px;
  width: 100% !important; margin: 0 !important; padding: 8px !important;
  border: 1px solid var(--border) !important; border-radius: var(--r-md) !important;
  background: var(--surface) !important; color: var(--text) !important;
  font: inherit !important; text-transform: none !important; letter-spacing: normal !important;
  line-height: 1.2 !important; text-align: center !important; min-height: 0 !important;
  box-shadow: var(--shadow-xs) !important; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ocwiz-wizard .ocwiz-style-card:hover {
  border-color: var(--border-strong) !important; box-shadow: var(--shadow-sm) !important; transform: translateY(-1px);
}
.ocwiz-wizard .ocwiz-style-card:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* De motor rendert elke preview op 432x540 (4:5). Die verhouding hier vastzetten
   zodat de kaarten uitlijnen, ook zolang een beeld nog laadt of niet aankomt. */
.ocwiz-wizard .ocwiz-style-card img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-sm); background: var(--surface-3);
}
.ocwiz-wizard .ocwiz-style-card__name {
  margin: 0; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text-2);
}

/* Gekozen stijl: rand + ring + vinkje, zodat de keuze niet alleen uit een
   kleurverschil hoeft te blijken. */
.ocwiz-wizard .ocwiz-style-card.is-selected { border-color: var(--primary) !important; box-shadow: 0 0 0 2px var(--ring) !important; }
.ocwiz-wizard .ocwiz-style-card.is-selected .ocwiz-style-card__name { color: var(--primary); }
.ocwiz-wizard .ocwiz-style-card.is-selected::after {
  content: "✓"; position: absolute; top: 14px; right: 14px;
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--r-pill);
  background: var(--primary); color: #fff; font-size: 13px; line-height: 1;
  box-shadow: var(--shadow-sm);
}

/* ---- Ontwerpsysteem-tab: logo / beeldmerk / stijlvoorbeeld als nette kaartjes ----
   Spiegelt het .ocwiz-block-patroon (kaart, rand, radius, surface-2, marges) zodat de
   media-pickers niet als rauwe gestapelde blokken ogen maar als de andere panes
   (Doelgroepen/Kanalen/Producten). Kleuren komen uit de bestaande OCW-variabelen. */
.ocwiz-wizard .ocwiz-ds-logo {
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface-2); padding: 16px 18px; margin: 12px 0 0;
}
/* Label bovenaan het kaartje: geen dubbele bovenmarge uit de generieke cpane-regel,
   maar een nette label→veld-afstand gelijk aan de andere panes. */
.ocwiz-wizard .ocwiz-ds-logo > .ocwiz-idea-label {
  margin: 0 0 10px !important;
}
.ocwiz-wizard .ocwiz-ds-logo > .ocwiz-idea-label .ocwiz-hint {
  margin-top: 4px; font-weight: 400;
}
/* Voorbeeld + knoppen op één nette rij; wrapt op smalle schermen. */
.ocwiz-media-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ocwiz-media-pick .ocwiz-btn { margin: 0; }
/* Voorbeeldafbeelding begrensd + zachte kader passend bij de kaart. */
.ocwiz-media-preview {
  max-width: 160px; max-height: 120px; width: auto; height: auto;
  object-fit: contain; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); padding: 8px; box-shadow: var(--shadow-xs);
}
.ocwiz-media-preview[hidden] { display: none; }
/* De analyse-rij binnen het stijlvoorbeeld-kaartje op eigen regel onder de picker. */
.ocwiz-ds-logo .ocwiz-analyze-style-row { margin: 12px 0 0; }

/* Statistieken-tab */
.ocwiz-stats__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ocwiz-stats__period { display: flex; gap: 6px; flex-wrap: wrap; }
.ocwiz-stat-period.is-active { background: #1F6F6F; color: #fff; border-color: #1F6F6F; }
.ocwiz-stats__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.ocwiz-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #f4f4f4; border-radius: 12px; }
.ocwiz-kpi__val { font-size: 26px; font-weight: 800; color: #0E2A47; line-height: 1.1; }
.ocwiz-kpi__label { font-weight: 600; }
.ocwiz-kpi__sub { font-size: 12px; color: #666; }
.ocwiz-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.ocwiz-stats__grid .ocwiz-panel { padding: 14px 16px; }
.ocwiz-stats__note { font-size: 12px; margin-top: 10px; }
.ocwiz-stats__msg { margin-top: 8px; color: #666; }
.ocwiz-carousel-slides { margin-top: 16px; }

/* ==========================================================================
   2026-design — fase 7: gelijke marges label↔veld in de tab-panes
   (Verbindingen én Merkprofiel) + duidelijker 'niet beschikbaar'-staat
   ========================================================================== */
/* Elk veld-label in een tab-pane krijgt dezelfde afstand tot zijn invoerveld */
.ocwiz-cpane label:not(.ocwiz-check):not(.ocwiz-autoimg) {
  display: block; margin: 16px 0 0; font-weight: 600; font-size: 13px; color: var(--text);
}
.ocwiz-cpane label:not(.ocwiz-check):not(.ocwiz-autoimg) > input,
.ocwiz-cpane label:not(.ocwiz-check):not(.ocwiz-autoimg) > select,
.ocwiz-cpane label:not(.ocwiz-check):not(.ocwiz-autoimg) > textarea {
  display: block; width: 100%; margin-top: 6px;
}
/* Status-badge naast het label ("✓ ingesteld") netjes inline meelopen */
.ocwiz-cpane label > .ocwiz-badge { margin-left: 8px; vertical-align: middle; }
/* Losse hint onder een veld niet als nieuw veld laten ogen */
.ocwiz-cpane label + .ocwiz-hint, .ocwiz-cpane .ocwiz-hint { margin-top: 6px; }

/* Onderdelen die nu niet beschikbaar zijn (bijv. proefperiode) duidelijk dimmen */
.ocwiz-app .ocwiz-locked, .ocwiz-app .ocwiz-btn:disabled, .ocwiz-app button:disabled,
.ocwiz-app [aria-disabled="true"], .ocwiz-app .is-unavailable,
.ocwiz-wizard .ocwiz-locked, .ocwiz-wizard .ocwiz-btn:disabled, .ocwiz-wizard .is-unavailable {
  opacity: .45 !important; filter: grayscale(.4); cursor: not-allowed !important; box-shadow: none !important;
}
/* Een hele sectie als 'op slot': dimmen + interactie blokkeren (subtiel) */
.ocwiz-app .is-unavailable, .ocwiz-wizard .is-unavailable { pointer-events: none; }
.ocwiz-app .is-unavailable { opacity: .5; filter: grayscale(.35); }

/* Upgrade-/slot-banner boven een vergrendelde feature (bijv. Video tijdens proef) */
.ocwiz-lock-banner {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; margin-bottom: 18px;
  border: 1px solid #f3bcd6; border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--ocw-pink-50), #fff 78%); box-shadow: var(--shadow-sm);
}
.ocwiz-lock-banner .ocwiz-iconchip { flex: none; width: 40px; height: 40px; }
.ocwiz-lock-banner h3 { margin: 0 0 2px !important; }
.ocwiz-lock-banner p { margin: 0 0 10px; }

/* ==========================================================================
   On-brand loginpagina (/app, [ocwiz_login]) rond het WooCommerce-loginformulier.
   ========================================================================== */
.ocwiz-login { display: flex; justify-content: center; padding: 48px 16px; font-family: var(--ui-font); color: var(--text); }
.ocwiz-login__card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: 32px 28px; text-align: center; }
.ocwiz-login__logo { max-width: 150px; height: auto; margin: 0 auto 16px; display: block; }
.ocwiz-login__title { font-size: 24px; font-weight: 800; color: var(--text); margin: 0 0 4px; letter-spacing: -.01em; }
.ocwiz-login__sub { color: var(--text-muted); margin: 0 0 20px; font-size: 14px; }
.ocwiz-login form { text-align: left; margin: 0; }
.ocwiz-login .woocommerce-form-row, .ocwiz-login p.form-row, .ocwiz-login p { margin: 0 0 14px; }
.ocwiz-login label { display: block; font-weight: 600; font-size: 13px; color: var(--text); margin: 0 0 6px; }
.ocwiz-login input[type=text], .ocwiz-login input[type=email], .ocwiz-login input[type=password] {
  width: 100%; box-sizing: border-box; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14.5px; transition: border-color .15s, box-shadow .15s; }
.ocwiz-login input:focus { outline: none; border-color: var(--ocw-teal-300); box-shadow: 0 0 0 3px var(--ring); }
.ocwiz-login .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text-2); margin: 2px 0 16px; }
.ocwiz-login .woocommerce-form-login__rememberme span,
.ocwiz-login .woocommerce-form-login__rememberme { font-weight: 500; }
.ocwiz-login .woocommerce-form-login__rememberme input { width: auto; margin: 0; }
.ocwiz-login button[type=submit], .ocwiz-login .woocommerce-form-login__submit, .ocwiz-login button.button {
  width: 100%; margin: 4px 0 0; padding: 12px 18px; border: 1px solid var(--primary); border-radius: var(--r-md);
  background: var(--primary); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  box-shadow: 0 6px 16px rgba(31,111,111,.22); transition: background .15s, border-color .15s; }
.ocwiz-login button[type=submit]:hover, .ocwiz-login .woocommerce-form-login__submit:hover, .ocwiz-login button.button:hover {
  background: var(--primary-hover); border-color: var(--primary-hover); }
.ocwiz-login__lost { text-align: center; margin: 16px 0 0 !important; }
.ocwiz-login__lost a { color: var(--primary); font-weight: 600; font-size: 14px; text-decoration: none; }
.ocwiz-login__lost a:hover { text-decoration: underline; }
.ocwiz-login .woocommerce-error, .ocwiz-login .woocommerce-message, .ocwiz-login .woocommerce-info {
  list-style: none; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--r-md); font-size: 13px; text-align: left; }
.ocwiz-login .woocommerce-error { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.ocwiz-login .woocommerce-message, .ocwiz-login .woocommerce-info { background: var(--primary-soft); border: 1px solid var(--ocw-teal-200); color: var(--primary-press); }

/* Carrousel: preview van de referentieafbeelding */
.ocwiz-carousel-ref-preview img { max-height: 64px; width: auto; vertical-align: middle; border-radius: 6px; margin-right: 8px; }