/* ============================================================
   CREAjt Klantportaal · styling (mobile-first PWA)
   ============================================================ */
:root{
  --beige:#E7E3DF; --blue:#3C58A4; --navy:#1E2744; --kraft:#C4B89A;
  --ink:#1C1C1C; --soft:#6b7280; --line:#e8e6e1; --bg:#f4f3f0; --card:#ffffff;
  --ok:#2e9e6b; --warn:#d99a2b; --danger:#cf5a4e;
  --sat: env(safe-area-inset-top); --sab: env(safe-area-inset-bottom);
  --radius:18px;
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }
html,body{ height:100%; }
body{
  font-family:'Roboto',Arial,sans-serif; color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
button{ font-family:inherit; cursor:pointer; }
.script{ font-family:'Glypher',cursive; font-weight:400; color:var(--kraft); }
@font-face{ font-family:'Glypher'; src:url('Glypher.ttf') format('truetype'); font-display:swap; }

.btn{ background:var(--blue); color:#fff; border:none; border-radius:30px; padding:13px 22px;
  font-size:15px; font-weight:700; transition:transform .15s, background .2s; }
.btn:hover{ background:var(--navy); }
.btn:active{ transform:scale(.97); }
.btn-block{ width:100%; }
.link-btn{ background:none; border:none; color:var(--blue); font-size:13.5px; font-weight:600; padding:8px; }

/* ══════════ LOGIN ══════════ */
.login{ min-height:100%; display:flex; align-items:center; justify-content:center; padding:28px 20px;
  background:radial-gradient(120% 80% at 50% -10%, #2b3a66 0%, var(--navy) 55%, #161d33 100%); }
.login-card{ width:100%; max-width:400px; background:var(--card); border-radius:24px; padding:32px 26px 26px;
  box-shadow:0 30px 70px rgba(0,0,0,.35); animation:pop .4s ease; }
@keyframes pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.login-logo img{ height:30px; margin:0 auto 18px; }
.login-card h1{ font-size:26px; font-weight:900; text-transform:uppercase; color:var(--navy); text-align:center; letter-spacing:-.5px; line-height:1.1; }
.login-card h1 .script{ text-transform:none; font-size:34px; color:var(--blue); }
.login-sub{ text-align:center; color:var(--soft); font-size:13.5px; line-height:1.6; margin:10px 0 22px; }
.login-form{ display:flex; flex-direction:column; gap:10px; }
.login-form label{ font-size:12.5px; font-weight:700; color:var(--navy); }
.login-form input[type=email]{ border:1.5px solid var(--line); border-radius:12px; padding:13px 15px; font-size:15px; font-family:inherit; }
.login-form input[type=email]:focus{ outline:none; border-color:var(--blue); }
.code-sent{ font-size:12.5px; color:var(--soft); margin-bottom:4px; }
.code-inputs{ display:flex; gap:8px; justify-content:space-between; }
.code-inputs input{ width:100%; aspect-ratio:1/1.15; text-align:center; font-size:22px; font-weight:900; color:var(--navy);
  border:1.5px solid var(--line); border-radius:12px; }
.code-inputs input:focus{ outline:none; border-color:var(--blue); background:#f7f9ff; }
.login-or{ display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:#b9b6af; font-size:12px; }
.login-or::before,.login-or::after{ content:''; flex:1; height:1px; background:var(--line); }
.oauth{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.oauth-btn{ display:flex; align-items:center; justify-content:center; gap:9px; background:#fff; border:1.5px solid var(--line);
  border-radius:12px; padding:12px; font-size:14px; font-weight:700; color:var(--navy); transition:border-color .2s, background .2s; }
.oauth-btn:hover{ border-color:#c9c6bf; background:#fafafa; }
.login-msg{ min-height:18px; text-align:center; font-size:12.5px; color:var(--danger); margin-top:12px; }
.login-demo{ text-align:center; font-size:11.5px; color:#a8a59e; margin-top:8px; }
.login-demo b{ color:var(--blue); }
.demo-link{ color:var(--blue); font-weight:700; }

/* ══════════ APP LAYOUT ══════════ */
.app{ min-height:100%; }
.sidebar{ display:none; }
.main{ min-height:100vh; padding-bottom:calc(78px + var(--sab)); }
.topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:calc(12px + var(--sat)) 18px 12px; background:rgba(244,243,240,.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.topbar-title{ font-size:21px; font-weight:900; color:var(--navy); letter-spacing:-.4px; }
.topbar-actions{ display:flex; align-items:center; gap:12px; }
.icon-btn{ position:relative; background:none; border:none; color:var(--navy); width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.icon-btn:hover{ background:#e9e7e2; }
.icon-btn .dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid var(--bg); }
.avatar{ width:38px; height:38px; border-radius:50%; background:var(--blue); color:#fff; font-size:13px; font-weight:900;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

.view{ padding:18px 18px 30px; max-width:760px; margin:0 auto; }

/* ── tabbar (mobiel) ── */
.tabbar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; justify-content:space-around;
  padding:8px 6px calc(8px + var(--sab)); background:rgba(255,255,255,.92); backdrop-filter:blur(14px); border-top:1px solid var(--line); }
.tab{ flex:1; background:none; border:none; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; color:#9a9790; padding:4px 2px; border-radius:10px; transition:color .2s; }
.tab svg{ width:23px; height:23px; }
.tab.active{ color:var(--blue); }
.tab.active svg{ transform:translateY(-1px); }

/* ══════════ CARDS / GENERIEK ══════════ */
.card{ background:var(--card); border-radius:var(--radius); padding:18px; box-shadow:0 6px 22px rgba(28,28,28,.05); }
.section-label{ font-size:12px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--soft); margin:22px 4px 12px; }
.section-label:first-child{ margin-top:4px; }
.empty{ text-align:center; color:var(--soft); font-size:13.5px; padding:30px 10px; }
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:4px 10px; border-radius:30px; }
.pill.ok{ background:rgba(46,158,107,.12); color:var(--ok); }
.pill.warn{ background:rgba(217,154,43,.14); color:var(--warn); }
.pill.blue{ background:rgba(60,88,164,.1); color:var(--blue); }
.pill.muted{ background:#efede9; color:var(--soft); }

/* ── overzicht / acties ── */
.hello{ font-size:24px; font-weight:900; color:var(--navy); letter-spacing:-.5px; }
.hello .script{ color:var(--blue); }
.hello-sub{ color:var(--soft); font-size:13.5px; margin-top:4px; }
.actions{ display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.action{ display:flex; align-items:center; gap:13px; background:var(--card); border-radius:14px; padding:14px 16px;
  box-shadow:0 5px 18px rgba(28,28,28,.05); border:none; width:100%; text-align:left; }
.action .ai{ width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; color:#fff; }
.action .at{ flex:1; }
.action .at b{ display:block; font-size:14.5px; color:var(--navy); }
.action .at span{ font-size:12.5px; color:var(--soft); }
.action .chev{ color:#c3c0b9; font-size:18px; }
.kpi-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:4px; }
.kpi{ background:var(--card); border-radius:14px; padding:15px 16px; box-shadow:0 5px 18px rgba(28,28,28,.05); }
.kpi .kv{ font-size:26px; font-weight:900; color:var(--navy); line-height:1; letter-spacing:-1px; }
.kpi .kl{ font-size:12px; color:var(--soft); margin-top:6px; }
.kpi .kd{ font-size:11.5px; font-weight:800; margin-top:6px; }
.kpi .kd.up{ color:var(--ok); } .kpi .kd.down{ color:var(--danger); }

/* ══════════ FEED ══════════ */
.feed{ display:flex; flex-direction:column; gap:16px; }
.feed-divider{ display:flex; align-items:center; gap:12px; margin:8px 2px; color:var(--soft); font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; }
.feed-divider::before,.feed-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
.feed-divider.now{ color:var(--blue); }
.feed-divider.now::before,.feed-divider.now::after{ background:rgba(60,88,164,.3); }
.post{ background:var(--card); border-radius:20px; overflow:hidden; box-shadow:0 8px 26px rgba(28,28,28,.07); }
.post-media{ position:relative; aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; }
.post-emoji{ font-size:64px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.25)); }
.post-badges{ position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; }
.post-plat{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; box-shadow:0 3px 10px rgba(0,0,0,.18); }
.post-plat svg{ width:17px; height:17px; }
.post-type{ background:rgba(0,0,0,.42); color:#fff; font-size:10.5px; font-weight:800; padding:5px 9px; border-radius:30px; backdrop-filter:blur(3px); }
.post-when{ position:absolute; bottom:12px; left:12px; background:rgba(0,0,0,.45); color:#fff; font-size:11px; font-weight:700; padding:5px 10px; border-radius:30px; backdrop-filter:blur(3px); }
/* reels visueel anders dan posts */
.post-media.reel{ aspect-ratio:9/14; }
.post-media.reel .post-emoji{ opacity:.9; }
.post-type.reel{ display:inline-flex; align-items:center; gap:4px; background:rgba(0,0,0,.55); }
.post-play{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.post-play::before{ content:''; position:absolute; width:58px; height:58px; border-radius:50%; background:rgba(0,0,0,.3); }
.post-play svg{ position:relative; width:24px; height:24px; color:#fff; margin-left:3px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.post-body{ padding:13px 15px 15px; }
.post-cap{ font-size:13.5px; line-height:1.5; color:var(--ink); }
.post-metrics{ display:flex; gap:16px; margin-top:11px; }
.post-metrics .m{ display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; color:var(--navy); }
.post-metrics .m svg{ width:15px; height:15px; color:var(--soft); }
.post-metrics .m small{ color:var(--soft); font-weight:600; }
.post-approve{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.post-approve .st{ font-size:12.5px; font-weight:700; }
.approve-btn{ background:var(--ok); color:#fff; border:none; border-radius:30px; padding:9px 16px; font-size:12.5px; font-weight:800; }
.approve-btn:active{ transform:scale(.96); }

/* ══════════ KALENDER ══════════ */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cal-head b{ font-size:16px; color:var(--navy); text-transform:capitalize; }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow{ text-align:center; font-size:10.5px; font-weight:800; color:var(--soft); text-transform:uppercase; padding-bottom:4px; }
.cal-cell{ aspect-ratio:1/1.05; border-radius:11px; background:var(--card); box-shadow:0 3px 12px rgba(28,28,28,.04); padding:6px; position:relative; }
.cal-cell.out{ background:transparent; box-shadow:none; }
.cal-cell .cd{ font-size:11.5px; font-weight:700; color:var(--soft); }
.cal-cell.today .cd{ background:var(--blue); color:#fff; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.cal-dots{ position:absolute; bottom:6px; left:6px; right:6px; display:flex; flex-wrap:wrap; gap:3px; }
.cal-dot{ width:7px; height:7px; border-radius:50%; }
.cal-legend{ display:flex; gap:16px; margin-top:14px; font-size:12px; color:var(--soft); }
.cal-legend span{ display:flex; align-items:center; gap:6px; }
.cal-legend i{ width:9px; height:9px; border-radius:50%; display:block; }

/* ══════════ RESULTATEN ══════════ */
.chart-card{ margin-top:14px; }
.chart-card h3{ font-size:14px; color:var(--navy); margin-bottom:2px; }
.chart-card .sub{ font-size:12px; color:var(--soft); margin-bottom:14px; }
.bars{ display:flex; align-items:flex-end; gap:8px; height:140px; }
.bars .b{ flex:1; background:linear-gradient(var(--blue),#5b73b8); border-radius:7px 7px 3px 3px; min-height:6px; position:relative; transition:height .5s ease; }
.bars .b span{ position:absolute; top:-18px; left:0; right:0; text-align:center; font-size:9.5px; font-weight:800; color:var(--soft); }
.bars-x{ display:flex; gap:8px; margin-top:8px; }
.bars-x span{ flex:1; text-align:center; font-size:9px; color:#b0ada6; }
.spark{ width:100%; height:60px; }
.toppost{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.toppost:last-child{ border-bottom:none; }
.toppost .tp-thumb{ width:42px; height:52px; border-radius:9px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:22px; }
.toppost .tp-b{ flex:1; }
.toppost .tp-b b{ font-size:13px; color:var(--navy); display:block; line-height:1.35; }
.toppost .tp-b span{ font-size:11.5px; color:var(--soft); }

/* ══════════ LIJSTEN (facturen/contracten/assets) ══════════ */
.row{ display:flex; align-items:center; gap:13px; background:var(--card); border-radius:14px; padding:14px 16px; box-shadow:0 5px 18px rgba(28,28,28,.05); margin-bottom:10px; }
.row .ri{ width:40px; height:40px; border-radius:11px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; color:#fff; }
.row .rb{ flex:1; min-width:0; }
.row .rb b{ font-size:14px; color:var(--navy); display:block; }
.row .rb span{ font-size:12px; color:var(--soft); }
.row .dl{ background:none; border:none; color:var(--blue); display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:700; }
.row .dl svg{ width:16px; height:16px; }

/* ══════════ ACCOUNTS KOPPELEN ══════════ */
.btn svg{ width:17px; height:17px; vertical-align:-3px; margin-right:5px; }
.conn-strip{ display:flex; flex-direction:column; gap:8px; }
.conn{ display:flex; align-items:center; gap:12px; background:var(--card); border-radius:14px; padding:12px 15px; box-shadow:0 5px 18px rgba(28,28,28,.05); }
.conn-ic{ width:30px; height:30px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; }
.conn-ic svg{ width:26px; height:26px; }
.conn-b{ flex:1; min-width:0; }
.conn-b b{ font-size:14px; color:var(--navy); display:block; }
.conn-b span{ font-size:12px; color:var(--soft); }
.conn-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.conn-dot.on{ background:var(--ok); box-shadow:0 0 0 3px rgba(46,158,107,.15); }
.conn-dot.off{ background:#d6d3cc; }
.conn.off{ opacity:.7; }
.conn-add{ display:flex; align-items:center; justify-content:center; gap:7px; background:none; border:1.5px dashed #cdcabf; border-radius:14px;
  padding:12px; font-size:13.5px; font-weight:700; color:var(--navy); transition:border-color .2s, color .2s; }
.conn-add svg{ width:17px; height:17px; }
.conn-add:hover{ border-color:var(--blue); color:var(--blue); }
.connect-intro{ font-size:13px; line-height:1.6; color:var(--soft); margin-bottom:14px; }
.connect-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.connect-note{ font-size:11.5px; color:#a8a59e; text-align:center; margin-top:10px; }

/* ══════════ BERICHTEN-SHEET ══════════ */
.sheet{ position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(20,25,40,.5); backdrop-filter:blur(2px); }
.sheet-card{ width:100%; max-width:560px; background:var(--card); border-radius:22px 22px 0 0; padding:16px 16px calc(16px + var(--sab)); max-height:80vh; display:flex; flex-direction:column; animation:sheetUp .28s ease; }
@keyframes sheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:12px; }
.sheet-head b{ font-size:15px; color:var(--navy); }
.msg-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px; }
.bubble{ max-width:78%; padding:10px 14px; border-radius:16px; font-size:13.5px; line-height:1.45; }
.bubble.jens{ background:var(--beige); color:var(--ink); border-bottom-left-radius:5px; align-self:flex-start; }
.bubble.client{ background:var(--blue); color:#fff; border-bottom-right-radius:5px; align-self:flex-end; }
.msg-form{ display:flex; gap:8px; margin-top:12px; }
.msg-form input{ flex:1; border:1.5px solid var(--line); border-radius:30px; padding:11px 16px; font-size:14px; font-family:inherit; }
.msg-form input:focus{ outline:none; border-color:var(--blue); }

/* ══════════ DESKTOP ══════════ */
@media (min-width:880px){
  .app{ display:grid; grid-template-columns:248px 1fr; }
  .sidebar{ display:flex; flex-direction:column; position:sticky; top:0; height:100vh; background:var(--navy); color:#fff; padding:26px 18px; }
  .side-logo img{ height:28px; filter:brightness(0) invert(1); margin:0 6px 28px; }
  .side-nav{ display:flex; flex-direction:column; gap:4px; flex:1; }
  .side-link{ display:flex; align-items:center; gap:13px; background:none; border:none; color:rgba(255,255,255,.7); font-size:14.5px; font-weight:600;
    padding:12px 14px; border-radius:12px; text-align:left; width:100%; transition:background .2s, color .2s; }
  .side-link svg{ width:20px; height:20px; }
  .side-link:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .side-link.active{ background:var(--blue); color:#fff; }
  .side-foot{ border-top:1px solid rgba(255,255,255,.12); padding-top:16px; }
  .side-user{ display:flex; align-items:center; gap:11px; margin-bottom:8px; }
  .side-user .avatar{ width:36px; height:36px; }
  .side-user .su-b b{ font-size:13.5px; color:#fff; display:block; }
  .side-user .su-b span{ font-size:11.5px; color:rgba(255,255,255,.6); }
  .side-foot .link-btn{ color:rgba(255,255,255,.75); padding-left:0; }
  .tabbar{ display:none; }
  .main{ padding-bottom:30px; }
  .topbar{ background:rgba(244,243,240,.9); padding:18px 30px; }
  .topbar-title{ font-size:24px; }
  .view{ padding:26px 30px 50px; max-width:920px; }
  .kpi-grid{ grid-template-columns:repeat(4,1fr); }
  .feed{ max-width:520px; margin:0 auto; }
  .actions{ flex-direction:row; flex-wrap:wrap; }
  .action{ flex:1 1 240px; }
}
@media (min-width:880px){
  .lists-2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
}

/* ══════════ MERK + CLAUDE-PROMPT ══════════ */
.merk-form{ display:flex; flex-direction:column; gap:14px; }
.merk-form .section-label{ margin:8px 0 2px; }
.merk-field label{ display:block; font-size:12.5px; font-weight:800; color:var(--navy); margin-bottom:6px; }
.merk-field input, .merk-field textarea{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:11px 13px; font-size:14px; font-family:inherit; color:var(--ink); background:#fff; resize:vertical; }
.merk-field input:focus, .merk-field textarea:focus{ outline:none; border-color:var(--blue); }
.merk-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.swatches{ display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.swatch{ display:flex; align-items:center; gap:8px; }
.swatch input[type=color]{ width:44px; height:38px; border:1.5px solid var(--line); border-radius:10px; padding:2px; background:#fff; cursor:pointer; flex:0 0 auto; }
.swatch .sw-name{ flex:1; border:1.5px solid var(--line); border-radius:10px; padding:9px 12px; font-size:13.5px; font-family:inherit; }
.sw-del{ background:none; border:none; color:#b4b1aa; font-size:14px; width:30px; height:30px; border-radius:8px; flex:0 0 auto; }
.sw-del:hover{ background:#f0eee9; color:var(--danger); }
.mini-add{ background:var(--beige); border:none; border-radius:10px; padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--navy); }
.mini-add:hover{ background:#dcd8d0; }
.prompt-card{ background:var(--navy); border-radius:18px; padding:16px; margin-bottom:10px; }
.prompt-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.prompt-status{ font-size:11.5px; color:rgba(255,255,255,.6); }
.copy-btn{ display:flex; align-items:center; gap:6px; background:var(--blue); color:#fff; border:none; border-radius:30px; padding:9px 15px; font-size:12.5px; font-weight:700; flex:0 0 auto; }
.copy-btn svg{ width:15px; height:15px; }
.copy-btn:active{ transform:scale(.97); }
.prompt-box{ width:100%; min-height:300px; border:none; border-radius:12px; padding:14px; font-size:12px; line-height:1.55;
  font-family:ui-monospace,Menlo,Consolas,monospace; color:#1E2744; background:#fff; resize:vertical; white-space:pre-wrap; }
.prompt-note{ font-size:11.5px; color:rgba(255,255,255,.72); margin-top:10px; line-height:1.55; }
.prompt-note b{ color:#fff; }

/* tabbar past 6 items netjes */
.tabbar{ padding-left:2px; padding-right:2px; }
.tab{ font-size:9.5px; padding:4px 1px; gap:2px; }
.tab svg{ width:22px; height:22px; }

/* ── feedback bij goedkeuren ── */
.approve-actions{ display:flex; gap:8px; align-items:center; }
.feedback-btn{ background:var(--beige); color:var(--navy); border:none; border-radius:30px; padding:9px 14px; font-size:12.5px; font-weight:800; }
.feedback-btn:active{ transform:scale(.96); }
.post-approve.col{ flex-direction:column; align-items:flex-start; gap:5px; }
.fb-note{ font-size:12.5px; color:var(--soft); font-style:italic; line-height:1.4; }
.fb-input{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; font-size:14px; font-family:inherit; resize:vertical; margin-bottom:14px; }
.fb-input:focus{ outline:none; border-color:var(--blue); }
/* klikbare kalenderdagen */
.cal-cell[data-date]{ cursor:pointer; transition:background .15s; }
.cal-cell.has:hover{ background:#eef1f8; }
.cal-cell.has::after{ content:''; position:absolute; inset:0; border-radius:11px; box-shadow:inset 0 0 0 1.5px rgba(60,88,164,.18); pointer-events:none; }

/* ── Merk-wizard (stap voor stap) ── */
.wiz-progress{ height:6px; background:var(--line); border-radius:30px; overflow:hidden; margin-bottom:14px; }
.wiz-bar{ height:100%; background:var(--blue); border-radius:30px; transition:width .35s ease; }
.wiz-steplabel{ font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--blue); }
.wiz-title{ font-size:24px; font-weight:900; color:var(--navy); letter-spacing:-.5px; margin:4px 0; }
.wiz-title .script{ color:var(--blue); }
.wiz-intro{ font-size:13.5px; color:var(--soft); margin-bottom:18px; line-height:1.6; }
.wiz-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:24px; }
.wiz-nav .btn{ min-width:150px; }
.wiz-back{ background:none; border:none; color:var(--soft); font-size:14px; font-weight:700; padding:10px; }
.wiz-back:hover{ color:var(--navy); }
.wizard-done{ text-align:center; padding:42px 16px; }
.wd-check{ width:72px; height:72px; border-radius:50%; background:var(--ok); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; box-shadow:0 12px 30px rgba(46,158,107,.3); }
.wd-check svg{ width:38px; height:38px; }
.wizard-done h2{ font-size:24px; font-weight:900; color:var(--navy); letter-spacing:-.4px; }
.wizard-done h2 .script{ color:var(--blue); }
.wizard-done p{ font-size:14px; color:var(--soft); line-height:1.6; margin:10px auto 22px; max-width:340px; }

/* ── goedkeur-blok (herzien, duidelijker) ── */
.pa{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.pa-status{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; }
.pa-dot{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.pa-pending .pa-status{ color:var(--warn); } .pa-pending .pa-dot{ background:var(--warn); box-shadow:0 0 0 3px rgba(217,154,43,.15); }
.pa-changes .pa-status{ color:var(--blue); } .pa-changes .pa-dot{ background:var(--blue); }
.pa-approved .pa-status{ color:var(--ok); } .pa-approved .pa-dot{ background:var(--ok); }
.pa-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:11px; }
.pa-edit{ background:#fff; color:var(--navy); border:1.5px solid var(--line); border-radius:12px; padding:12px; font-size:13.5px; font-weight:700; }
.pa-edit:hover{ border-color:#c9c6bf; background:#fafafa; }
.pa-ok{ display:flex; align-items:center; justify-content:center; gap:6px; background:var(--ok); color:#fff; border:none; border-radius:12px; padding:12px; font-size:13.5px; font-weight:800; }
.pa-ok svg{ width:16px; height:16px; }
.pa-ok:active, .pa-edit:active{ transform:scale(.97); }
.pa-note{ font-size:12.5px; color:var(--soft); font-style:italic; line-height:1.45; margin-top:7px; }

/* ── 'nu'-marker in de feed ── */
.feed-now{ margin:6px 0; }
.fn-row{ display:flex; align-items:center; gap:12px; }
.fn-line{ flex:1; height:1.5px; background:linear-gradient(90deg, transparent, rgba(60,88,164,.35)); }
.fn-row .fn-line:last-child{ background:linear-gradient(90deg, rgba(60,88,164,.35), transparent); }
.fn-badge{ display:flex; align-items:center; gap:7px; background:var(--blue); color:#fff; font-size:12.5px; font-weight:800; padding:6px 15px; border-radius:30px; box-shadow:0 6px 16px rgba(60,88,164,.3); }
.fn-dot{ width:7px; height:7px; border-radius:50%; background:#fff; animation:fnpulse 1.8s ease-in-out infinite; }
@keyframes fnpulse{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
.fn-help{ text-align:center; font-size:12px; color:var(--soft); margin-top:10px; line-height:1.5; }
.fn-help b{ color:var(--navy); }
.feed-end{ text-align:center; font-size:12.5px; color:var(--soft); padding:10px 0 4px; font-weight:600; }
.feed-end .script{ color:var(--kraft); font-size:17px; }

/* ── feed: tijdlijn / raster wisselen ── */
.feed-toggle{ display:flex; gap:5px; background:#e9e7e2; border-radius:30px; padding:4px; margin-bottom:16px; max-width:300px; }
.ft-btn{ flex:1; display:flex; align-items:center; justify-content:center; gap:6px; background:none; border:none; border-radius:30px; padding:8px 10px; font-size:13px; font-weight:700; color:var(--soft); }
.ft-btn svg{ width:16px; height:16px; }
.ft-btn.on{ background:#fff; color:var(--navy); box-shadow:0 2px 8px rgba(0,0,0,.08); }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; }
.grid-tile{ position:relative; aspect-ratio:1; border:none; border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.gt-emoji{ font-size:30px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25)); }
.gt-plat{ position:absolute; top:5px; left:5px; width:18px; height:18px; }
.gt-plat svg{ width:18px; height:18px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.gt-reel{ position:absolute; top:5px; right:6px; color:#fff; }
.gt-reel svg{ width:13px; height:13px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.gt-dot{ position:absolute; bottom:6px; right:6px; width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); }
.gt-dot.ok{ background:var(--ok); } .gt-dot.warn{ background:var(--warn); } .gt-dot.blue{ background:var(--blue); }
@media(min-width:880px){ .post-grid{ max-width:540px; margin:0 auto; } }

/* ── foto-galerij & levering ── */
.gal-grid{ gap:5px; }
.gal-tile{ position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.gal-tile.fav{ outline:3px solid var(--blue); outline-offset:-3px; }
.gal-heart{ position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:50%; background:rgba(0,0,0,.32); border:none; color:#fff; display:flex; align-items:center; justify-content:center; }
.gal-heart svg{ width:16px; height:16px; }
.gal-heart.on{ background:#fff; color:var(--danger); }
.gal-bar{ display:flex; gap:10px; margin-top:16px; position:sticky; bottom:calc(86px + var(--sab)); z-index:20; }
.gal-bar .btn{ flex:1; box-shadow:0 6px 18px rgba(28,28,28,.12); }
@media(min-width:880px){ .gal-grid{ max-width:640px; margin:0 auto; } .gal-bar{ max-width:640px; margin:16px auto 0; bottom:16px; } }

/* ── web-/brandingproject (fases) ── */
.ph-progress{ height:6px; background:var(--line); border-radius:30px; overflow:hidden; }
.ph-bar{ height:100%; background:var(--ok); border-radius:30px; transition:width .4s; }
.phaseline{ position:relative; }
.phase{ display:flex; gap:14px; padding-bottom:18px; position:relative; }
.phase::before{ content:''; position:absolute; left:13px; top:30px; bottom:-2px; width:2px; background:var(--line); }
.phase:last-child::before{ display:none; }
.ph-ic{ width:28px; height:28px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; z-index:1; }
.ph-ic.done{ background:var(--ok); color:#fff; } .ph-ic.done svg{ width:16px; height:16px; }
.ph-ic.current{ background:#fff; border:3px solid var(--warn); }
.ph-ic.upcoming{ background:#fff; border:3px solid var(--line); }
.ph-body{ flex:1; background:var(--card); border-radius:14px; padding:13px 15px; box-shadow:0 4px 14px rgba(28,28,28,.05); }
.phase.upcoming .ph-body{ opacity:.7; }
.ph-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ph-top b{ font-size:14.5px; color:var(--navy); }
.ph-desc{ font-size:12.5px; color:var(--soft); margin-top:4px; line-height:1.5; }