:root{
  --navy:#04344D;--ice:#EEFAFF;--acc:#8ADCFF;--acc2:#00AAE5;
  --page:#EAF6FC;--panel:#fff;--ink:#04344D;--muted:#5E7A8C;--faint:#90A6B4;
  --line:#DCEAF1;--lsoft:#EEF5F9;--pos:#2F8F5B;--neg:#C0473F;--r:13px;
  --sh:0 1px 2px rgba(4,52,77,.05),0 6px 18px rgba(4,52,77,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"DM Sans",system-ui,sans-serif;font-size:14px;line-height:1.5;
  background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sb{width:240px;background:var(--navy);display:flex;flex-direction:column;
  min-height:100vh;flex:none;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.sb-logo{padding:16px 15px 13px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-mark{width:32px;height:32px;border-radius:8px;background:var(--acc);color:var(--navy);
  display:grid;place-items:center;font-weight:700;font-size:12px;margin-bottom:8px}
.sb-logo h2{color:var(--ice);font-size:13px;font-weight:600}
.sb-logo p{color:#7ABCD6;font-size:11px}
.sb-client{padding:9px 13px;border-bottom:1px solid rgba(255,255,255,.08)}
.sb-client label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:#7ABCD6;display:block;margin-bottom:4px}
.sb-client select{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:7px;color:var(--ice);font:inherit;font-size:13px;padding:6px 9px;cursor:pointer}
.sb-client select option{color:#04344D}
/* nav */
.sb-sec{padding:10px 9px 3px}
.sb-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#4A7A96;padding:0 7px;margin-bottom:2px}
.ni{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;color:#8FBDD4;
  font-size:12.5px;font-weight:500;cursor:pointer;transition:all .13s;margin-bottom:1px;user-select:none;text-decoration:none}
.ni svg{width:14px;height:14px;flex:none;opacity:.65}
.ni:hover{background:rgba(255,255,255,.06);color:var(--ice)}
.ni.active{background:rgba(138,220,255,.14);color:var(--acc);font-weight:600}
.ni.active svg{opacity:1}
.ni-arrow{margin-left:auto;font-size:9px;transition:transform .18s;opacity:.4;line-height:1}
.ni.open>.ni-arrow{transform:rotate(180deg)}
.subnav{overflow:hidden;max-height:0;transition:max-height .22s ease}
.subnav.open{max-height:600px}
.ni-l2{padding-left:24px}
.ni-l2 .ni{font-size:12px;padding:6px 9px;color:#7AAFCC}
.ni-l3{padding-left:38px}
.ni-l3 .ni{font-size:11.5px;padding:5px 9px;color:#6A9DB8}
.sb-bot{margin-top:auto;padding:10px 9px;border-top:1px solid rgba(255,255,255,.08)}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;min-width:0}

/* ── TOPBAR ── */
.topbar{background:var(--navy);padding:12px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.pg-title{color:var(--ice);font-size:15px;font-weight:600}
.pg-sub{color:#7ABCD6;font-size:11px;margin-top:1px}
.tb-r{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.tb-range{display:flex;align-items:center;gap:7px}
.dg{display:flex;align-items:center;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;overflow:hidden}
.db{padding:5px 10px;font:inherit;font-size:12px;font-weight:500;color:#9FC8DC;
  background:transparent;border:none;cursor:pointer;transition:all .13s;white-space:nowrap}
.db:hover{background:rgba(255,255,255,.07);color:var(--ice)}
.db.active{background:var(--acc);color:var(--navy);font-weight:600}
.dsep{width:1px;background:rgba(255,255,255,.1);align-self:stretch}
.cmpbtn{display:flex;align-items:center;gap:5px;padding:5px 11px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;color:#9FC8DC;font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:all .13s}
.cmpbtn.on{background:rgba(138,220,255,.18);border-color:var(--acc);color:var(--acc)}
.custom-range{position:relative}
.custom-range-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px}
.custom-range-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px;
  box-shadow:0 12px 30px rgba(15,40,70,.14);display:flex;flex-direction:column;gap:8px;min-width:180px}
.custom-range-pop label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted)}
.custom-range-pop input[type=date]{padding:6px 8px;font-size:13px;border:1px solid var(--line);
  border-radius:6px;color:var(--ink);font:inherit}
.custom-range-pop input[type=date]:focus{outline:none;border-color:var(--faint)}

/* ── SUB-TABS ── */
.sub-tabs{background:var(--panel);border-bottom:1px solid var(--line);padding:0 20px;
  display:flex;align-items:center;gap:0;overflow-x:auto;flex-shrink:0}
.stab{padding:10px 13px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;transition:all .13s}
.stab:hover{color:var(--ink)}
.stab.active{color:var(--navy);border-bottom-color:var(--acc2)}

/* ── CONTENT ── */
.content{padding:20px 20px;flex:1}

/* page / section visibility */
.page{display:none}.page.active{display:block}
.tsec{display:none}.tsec.active{display:block}

/* ── ANNOTATIES ── */
.anno-bar{margin-bottom:20px}
.anno-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.anno-header h4{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.anno-add-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;
  border-radius:7px;border:1px dashed var(--line);background:transparent;color:var(--faint);
  font:inherit;font-size:12px;cursor:pointer;transition:all .13s}
.anno-add-btn:hover{border-color:var(--acc2);color:var(--acc2)}
.anno-list{display:flex;flex-direction:column;gap:6px}
.anno{display:flex;align-items:flex-start;gap:10px;padding:10px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--sh)}
.anno-date{font-size:11px;font-weight:600;color:var(--acc2);white-space:nowrap;min-width:80px;margin-top:1px}
.anno-text{font-size:13px;color:var(--ink);flex:1}
.anno-del{background:none;border:none;cursor:pointer;color:var(--faint);font-size:16px;padding:0 2px;
  line-height:1;transition:color .13s;flex:none}
.anno-del:hover{color:var(--neg)}
.anno-form{display:none;gap:8px;align-items:flex-end;padding:12px 14px;
  border-radius:9px;border:1px solid var(--acc);background:#F0FAFF;margin-top:6px}
.anno-form.open{display:flex;flex-wrap:wrap}
.anno-form input{height:34px;border:1px solid var(--line);border-radius:8px;
  padding:0 10px;font:inherit;font-size:13px;color:var(--ink)}
.anno-form input[type=date]{width:150px}
.anno-form input[type=text]{flex:1;min-width:200px}
.anno-form button{height:34px;padding:0 14px;border-radius:8px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.anno-save{background:var(--navy);color:var(--ice);border:none}
.anno-cancel{background:#fff;color:var(--muted);border:1px solid var(--line)}

/* ── SPARKLINE ROW ── */
.spark-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;margin-bottom:18px}
.spark-card{padding:15px 17px 10px;border-right:1px solid var(--line);min-width:0}
.spark-card:last-child{border-right:none}
.sc-lbl{font-size:12px;color:var(--muted);margin-bottom:5px}
.sc-val{font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sc-sub{font-size:11px;color:var(--faint);margin-top:3px;display:flex;align-items:center;gap:5px}
.sc-spark{height:56px;margin-top:9px}
.sc-spark canvas{width:100%!important;height:56px!important}

/* ── KPI GRID ── */
.grp-lbl{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin:0 0 8px}
.grp-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.grp-hd .grp-lbl{margin:0}
.kc{position:relative}
.kc.is-hidden{opacity:.6}
.kc-eye{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:24px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;
  color:var(--muted);opacity:0;transition:opacity .12s}
.kc:hover .kc-eye,.kc-eye.off{opacity:1}
.kc-eye svg{width:15px;height:15px}
.kc-eye.off{color:var(--neg);border-color:var(--neg)}
.kc-eye:hover{border-color:var(--navy);color:var(--navy)}
.wgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.wc-third{grid-column:span 2}
.wc-half{grid-column:span 3}
.wc-full{grid-column:span 6}
@media (max-width:900px){.wgrid{grid-template-columns:1fr}.wc-third,.wc-half,.wc-full{grid-column:span 1}}
.cc-field-row{display:flex;gap:10px}
.cc-field-row .cc-field{flex:1;min-width:0}
.wcard.is-hidden{opacity:.6}
.wcard-actions{display:flex;align-items:center;gap:4px}
.wcard-drag{cursor:grab;color:var(--muted);font-size:15px;line-height:1;padding:0 2px;user-select:none}
.wcard-drag:active{cursor:grabbing}
.wcard.sortable-ghost{opacity:.4}
.wcard-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;
  border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;color:var(--muted);font-size:14px;line-height:1}
.wcard-btn:hover{border-color:var(--navy);color:var(--navy)}
.wm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 10px}
.notion-sec{margin-top:14px}
.wc-toggle{display:flex;align-items:center;gap:6px;width:100%;background:none;border:0;cursor:pointer;
  padding:6px 0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wc-toggle-caret{color:var(--muted)}
.wc-toggle-count{background:var(--ice);border-radius:999px;padding:1px 7px;font-size:11px;color:var(--navy);text-transform:none;letter-spacing:0}
.grp{margin-bottom:16px}
.kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.kc{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 10px;box-shadow:var(--sh)}
.kc .kl{display:flex;align-items:flex-start;gap:6px;color:var(--muted);font-size:11px;font-weight:500;line-height:1.35}
.kdot{width:7px;height:7px;border-radius:50%;flex:none;margin-top:.35em}
.kc .kv{font-weight:600;font-size:22px;letter-spacing:-.01em;margin:7px 0 5px;color:var(--navy);font-variant-numeric:tabular-nums}
/* Alleen de KPI-kaarten met een gekozen statistiek erop. Een conversienaam
   loopt daar over twee of drie regels, en zonder dit duwt zo'n naam het getal
   naar beneden en staan de cijfers in een rij niet meer op één lijn. De naam
   houdt zijn eigen hoogte, het getal wordt naar de onderkant geduwd.
   Bewust niet op .kc zelf: de reserveringskaarten hebben een lange voettekst
   en zouden dan een gat tussen naam en getal krijgen. */
/* Iets ruimer dan de 160px van een gewone kaart, zodat een conversienaam over
   twee regels past in plaats van drie. */
.kpi-cards{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.kpi-cards .kc{display:flex;flex-direction:column}
.kpi-cards .kc .kl{min-height:2.7em}
.kpi-cards .kc .kv{margin-top:auto}
.kc .kf{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--faint)}
.dl{display:inline-flex;align-items:center;gap:2px;font-weight:600}
.dl.u{color:var(--pos)}.dl.d{color:var(--neg)}
.dl svg{width:9px;height:9px}

/* ── CHARTS ── */
.cpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:14px 16px 12px;margin-bottom:16px}
.cp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.cp-head h3{font-size:14px;font-weight:600;color:var(--navy)}
.cp-r{display:flex;align-items:center;gap:8px}
.cp-sel{height:28px;padding:0 9px;border:1px solid var(--line);border-radius:7px;
  background:#fff;color:var(--muted);font:inherit;font-size:12px;cursor:pointer}
.charts-2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:900px){.charts-2{grid-template-columns:1fr}}
.chart-box{position:relative;height:240px}
.chart-box-lg{position:relative;height:270px}
.chart-box-sm{position:relative;height:180px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 4px}
.chip{display:inline-flex;align-items:center;gap:6px;height:27px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-size:12px;
  font-weight:500;cursor:pointer;transition:all .13s}
.chip .cd{width:7px;height:7px;border-radius:50%;flex:none;opacity:.35;transition:opacity .13s}
.chip[aria-pressed=true] .cd{opacity:1}
.chip:hover{border-color:var(--faint)}
.add-m-btn{display:inline-flex;align-items:center;gap:5px;height:27px;padding:0 10px;
  border-radius:999px;border:1px dashed var(--line);background:transparent;color:var(--faint);
  font:inherit;font-size:12px;cursor:pointer;transition:all .13s}
.add-m-btn:hover{border-color:var(--acc2);color:var(--acc2)}

/* ── TABLE PANEL ── */
.tpanel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:16px}
.tp-hd{padding:12px 16px 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.tp-hd h3{font-size:14px;font-weight:600;color:var(--navy)}
.t-btns{display:flex;gap:6px}
.tbtn{height:29px;padding:0 11px;border:1px solid var(--line);border-radius:7px;background:#fff;
  color:var(--muted);font:inherit;font-size:12px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .13s}
.tbtn:hover{border-color:var(--faint);color:var(--ink)}
.tbtn.prim{background:var(--navy);border-color:var(--navy);color:var(--ice)}
[x-cloak]{display:none!important}
.vis-sub{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin:12px 4px 4px}
.conn-row.is-hidden{opacity:.55}
.vis-eye{display:inline-flex;align-items:center;justify-content:center;width:34px;height:30px;
  border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;color:var(--navy)}
.vis-eye svg{width:18px;height:18px}
.vis-eye.off{color:var(--muted);background:var(--ice)}
.vis-eye:hover{border-color:var(--navy)}
.t-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 4px 12px}
.flt-ctl{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--navy);font-size:13px}
.flt-search{min-width:180px}
.flt-add{display:flex;align-items:center;gap:6px}
.flt-op{min-width:92px}
.flt-num{width:110px}
.flt-clear{margin-left:auto}
.t-filter-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 4px 12px}
.flt-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  background:var(--ice);border:1px solid var(--line);border-radius:999px;
  font-size:12px;color:var(--navy)}
.flt-chip button{border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:15px;line-height:1;padding:0}
.flt-chip button:hover{color:var(--navy)}
.th-move{cursor:grab}
.th-move.sortable-chosen{cursor:grabbing}
.th-move.sortable-ghost{opacity:.4;background:var(--ice)}
/* Sleepbare KPI-kaarten. Alleen voor het bureau, vandaar de klasse op het grid
   en niet op .kc zelf: de klant krijgt geen grijp-cursor op iets dat niet
   beweegt. Het oogje houdt zijn pointer-cursor, want dat blijft een knop. */
.kgrid.is-sortable .kc{cursor:grab}
.kgrid.is-sortable .kc .kc-eye{cursor:pointer}
.kgrid.is-sortable .kc.sortable-chosen{cursor:grabbing}
.kgrid.is-sortable .kc.sortable-ghost{opacity:.4}
.col-picker{position:relative}
/* Breed genoeg voor de echte namen. Een conversie-actie heet hier al gauw
   "Google Ads - MICE offerte aanvraag ingediend" (44 tekens), en op 264px werd
   daar de helft van afgekapt. De max houdt hem op een smal scherm binnen beeld. */
.col-menu{position:absolute;top:calc(100% + 6px);right:0;z-index:30;
  min-width:320px;max-width:min(440px,calc(100vw - 32px));
  max-height:min(420px,70vh);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;
  box-shadow:0 12px 30px rgba(15,40,70,.14)}
.col-menu-hd{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);padding:4px 8px 6px}
.col-search{width:100%;box-sizing:border-box;margin:0 0 8px;padding:7px 10px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.col-search:focus{outline:none;border-color:var(--faint)}
.col-group{border-top:1px solid var(--line)}
.col-group:first-of-type{border-top:none}
.col-group-hd{display:flex;align-items:center;gap:6px;width:100%;background:none;border:none;
  cursor:pointer;padding:8px;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted)}
.col-group-hd:hover{color:var(--ink)}
.col-group-caret{width:12px;display:inline-block;text-align:center}
.col-group-body{padding-bottom:4px}
.col-group-empty{padding:4px 8px 6px 26px;font-size:12px;color:var(--muted)}
.col-opt-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-left:18px}
/* Naam over meerdere regels in plaats van afgekapt: een halve conversienaam is
   niet te kiezen. Het vinkje blijft bij de eerste regel staan. */
.col-opt{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:7px;
  font-size:13px;line-height:1.35;color:var(--ink);cursor:pointer;flex:1;min-width:0}
.col-opt span{white-space:normal;overflow-wrap:anywhere}
.col-opt input{margin-top:2px}
.col-opt:hover{background:#F5FAFD}
.col-opt input{cursor:pointer;flex:none}
.col-opt-del{flex:none;background:none;border:none;cursor:pointer;color:var(--muted);
  font-size:16px;line-height:1;padding:0 8px;border-radius:6px}
.col-opt-del:hover{color:#c0392b;background:#FDECEA}
.col-opt-eye{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;
  background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;color:var(--muted)}
.col-opt-eye svg{width:15px;height:15px}
.col-opt-eye:hover{border-color:var(--line);color:var(--navy)}
.col-opt-eye.off{color:var(--neg)}
.col-opt-row.is-hidden .col-opt span{color:var(--muted);text-decoration:line-through}
.col-add-btn{display:block;width:calc(100% - 18px);margin:6px 0 2px 18px;padding:7px 10px;
  background:#F5FAFD;border:1px dashed var(--faint);border-radius:8px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--navy);text-align:left}
.col-add-btn:hover{background:#EAF4FA}
.cc-modal-overlay{position:fixed;inset:0;z-index:60;background:rgba(15,40,70,.35);
  display:flex;align-items:center;justify-content:center;padding:24px}
.cc-modal{width:100%;max-width:440px;max-height:88vh;overflow-y:auto;background:#fff;
  border-radius:14px;padding:20px;box-shadow:0 24px 60px rgba(15,40,70,.28)}
.cc-modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cc-modal-hd h3{margin:0;font-size:16px;color:var(--ink)}
.cc-close{background:none;border:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.cc-close:hover{color:var(--ink)}
.cc-field{margin-bottom:12px}
.cc-field label{display:block;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:5px}
.cc-field input,.cc-field select{width:100%;box-sizing:border-box;padding:8px 10px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.cc-formula{display:flex;flex-wrap:wrap;gap:6px;min-height:40px;padding:8px;
  border:1px solid var(--line);border-radius:8px;background:#F5FAFD}
.cc-chip{background:#fff;border:1px solid var(--faint);border-radius:6px;padding:3px 8px;
  font-size:12.5px;color:var(--ink)}
.cc-formula-empty{font-size:12.5px;color:var(--muted)}
.cc-controls{margin:10px 0}
.cc-control-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.cc-control-row select{flex:1;min-width:120px;padding:7px 8px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;color:var(--ink)}
.cc-num{width:96px;padding:7px 8px;font-size:13px;border:1px solid var(--line);border-radius:8px}
.cc-op{background:#F5FAFD;border:1px solid var(--line);border-radius:8px;cursor:pointer;
  padding:7px 12px;font-size:13px;color:var(--ink)}
.cc-op:hover{background:#EAF4FA;border-color:var(--faint)}
.cc-error{background:#FDECEA;color:#c0392b;border-radius:8px;padding:8px 10px;font-size:12.5px;margin-bottom:10px}
.cc-modal-ft{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.tscroll{overflow-x:auto;border-bottom-left-radius:var(--r);border-bottom-right-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead tr{background:#F5FAFD}
th{padding:8px 12px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);white-space:nowrap;border-bottom:1px solid var(--line);cursor:pointer}
th:hover{color:var(--ink)}
td{padding:8px 12px;border-bottom:1px solid var(--lsoft);white-space:nowrap;vertical-align:middle}
.tr-total td{background:#F5FAFD;font-weight:600;border-bottom:none}
tr:hover:not(.tr-total) td{background:#F8FBFD}
/* Eerste kolom vastzetten bij een brede tabel. Zonder dit schuift de kolom die
   de rij benoemt (Maand, Weekdag) links uit beeld zodra de tabel breder is dan
   het paneel, en dan staat er een rij cijfers zonder dat je weet waarover.
   border-collapse moet hiervoor los: met `collapse` horen de randen bij de
   tabel en niet bij de cel, en verdwijnen ze onder een sticky cel. */
.tscroll.pin-first table{border-collapse:separate;border-spacing:0}
.tscroll.pin-first th:first-child,
.tscroll.pin-first td:first-child{position:sticky;left:0;z-index:2;
  background:var(--panel);border-right:1px solid var(--line)}
.tscroll.pin-first thead th:first-child{z-index:3;background:#F5FAFD}
.tscroll.pin-first tr:hover:not(.tr-total) td:first-child{background:#F8FBFD}
.tscroll.pin-first .tr-total td:first-child{background:#F5FAFD}
/* Rij die wel gerapporteerd wordt maar niet meetelt, zoals een soort event dat
   buiten de bezetting valt. Wegdrukken en niet weglaten: anders vraagt de lezer
   zich af waar het gebleven is. */
.tr-muted td{color:var(--muted);background:#FBFCFD}
.tr-muted td strong{font-weight:500}
.tn{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}
.tp{color:var(--pos);font-weight:500}.tn2{color:var(--neg);font-weight:500}
.sp-a{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 7px;border-radius:5px;background:#E9F6EE;color:#1E5A38;font-weight:600}
.sp-p{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 7px;border-radius:5px;background:#F5F5F5;color:#888;font-weight:600}
.chan-pill{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.ch-dot{width:9px;height:9px;border-radius:3px;flex:none}

/* ── CONV FILTER ── */
.cf{display:flex;align-items:center;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.cf label{font-size:12px;color:var(--muted);font-weight:500}
.cc{display:inline-flex;align-items:center;height:25px;padding:0 10px;border-radius:999px;
  border:1px solid var(--line);background:#fff;color:var(--muted);font:inherit;font-size:11.5px;font-weight:500;cursor:pointer;transition:all .13s}
.cc.on{background:var(--navy);border-color:var(--navy);color:var(--ice)}

/* ── SEO PERF METRIC CHIPS ── */
.gsc-chips{display:flex;gap:0;margin-bottom:16px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.gsc-chip{flex:1;padding:12px 16px 10px;border-right:1px solid var(--line);cursor:pointer;transition:all .13s;background:var(--panel)}
.gsc-chip:last-child{border-right:none}
.gsc-chip.active{background:var(--navy)}
.gsc-chip .gc-lbl{font-size:11px;color:var(--muted);margin-bottom:4px}
.gsc-chip.active .gc-lbl{color:#7ABCD6}
.gsc-chip .gc-val{font-size:22px;font-weight:600;color:var(--navy);font-variant-numeric:tabular-nums}
.gsc-chip.active .gc-val{color:var(--acc)}

/* ── INDEX STATUS ── */
.index-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.idx-card{padding:14px 16px;border-radius:var(--r);border:1px solid;box-shadow:var(--sh)}
.idx-card.red{background:#FBEAE9;border-color:#E9C2BF}
.idx-card.green{background:#E9F6EE;border-color:#BFE3CD}
.idx-num{font-size:32px;font-weight:700;margin:6px 0 2px;font-variant-numeric:tabular-nums}
.idx-card.red .idx-num{color:var(--neg)}
.idx-card.green .idx-num{color:var(--pos)}
.idx-lbl{font-size:12px;font-weight:600}
.idx-card.red .idx-lbl{color:#7E2C27}
.idx-card.green .idx-lbl{color:#1E5A38}
.idx-sub{font-size:11px;margin-top:2px}
.idx-card.red .idx-sub{color:#B05050}
.idx-card.green .idx-sub{color:#3A8A5E}

/* ── SITEMAP ── */
.smap-add{display:flex;gap:10px;align-items:center;padding:16px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel);box-shadow:var(--sh);margin-bottom:14px}
.smap-add input{flex:1;height:36px;border:1px solid var(--line);border-radius:8px;
  padding:0 12px;font:inherit;font-size:13px;color:var(--ink)}
.smap-add button{height:36px;padding:0 16px;background:var(--navy);color:var(--ice);
  border:none;border-radius:8px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}

/* ── DEMOGRAFISCH ── */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:880px){.demo-grid{grid-template-columns:1fr}}
.demo-filter{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}
.df-chip{height:28px;padding:0 12px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--muted);font:inherit;font-size:12px;font-weight:500;cursor:pointer;transition:all .13s}
.df-chip.on{background:var(--navy);border-color:var(--navy);color:var(--ice)}

/* ── MODAL ── */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(4,52,77,.45);z-index:100;align-items:center;justify-content:center}
.modal-ov.open{display:flex}
.modal{background:#fff;border-radius:14px;padding:20px;width:460px;max-width:92vw;box-shadow:0 20px 60px rgba(4,52,77,.2)}
.modal h3{font-size:15px;font-weight:600;color:var(--navy);margin-bottom:4px}
.modal p{font-size:13px;color:var(--muted);margin-bottom:14px}
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:16px}
.mopt{padding:8px 11px;border:1px solid var(--line);border-radius:8px;cursor:pointer;transition:all .13s}
.mopt:hover{border-color:var(--acc2);background:#F0FAFF}
.mopt.sel{border-color:var(--acc2);background:#E0F5FF}
.mopt .mn{font-size:13px;font-weight:500;color:var(--navy)}
.mopt .md{font-size:11px;color:var(--faint)}
.m-acts{display:flex;justify-content:flex-end;gap:7px}
.mb{height:33px;padding:0 14px;border-radius:8px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.mb-c{border:1px solid var(--line);background:#fff;color:var(--muted)}
.mb-a{border:none;background:var(--navy);color:var(--ice)}

/* ── PLACEHOLDER ── */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px;text-align:center;gap:9px}
.ph-ico{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(4,52,77,.07);margin-bottom:5px}
.ph h2{font-size:18px;font-weight:600;color:var(--navy)}
.ph p{font-size:13px;color:var(--muted);max-width:340px}
.ph-btn{margin-top:5px;height:36px;padding:0 16px;background:var(--navy);color:var(--ice);border:none;border-radius:9px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}

/* attribution tags */
.attr-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:9px 13px;border-bottom:1px solid var(--lsoft)}
.attr-row:last-child{border-bottom:none}
.attr-tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;font-size:11px;font-weight:500;white-space:nowrap}
.at-g{background:#FFE8E0;color:#C23B00}.at-b{background:#E8F4FF;color:#1B5B8E}
.at-d{background:#E8F0FE;color:#1A5276}.at-li{background:#E8F0FE;color:#154360}
.at-o{background:#E9F6EE;color:#1E5A38}.at-r{background:#F5EEF8;color:#6C3483}
.at-num{margin-left:auto;font-size:13px;font-weight:600;color:var(--navy);min-width:28px;text-align:right}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── LOGIN SCREEN ── */
#login-screen{position:fixed;inset:0;z-index:200;background:var(--navy);
  display:flex;align-items:center;justify-content:center;flex-direction:column}
#login-screen.hidden{display:none}
.login-wrap{width:380px;max-width:92vw}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.login-mark{width:44px;height:44px;border-radius:12px;background:var(--acc);
  color:var(--navy);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.login-logo h1{font-size:22px;font-weight:700;color:var(--ice)}
.login-logo p{font-size:12px;color:#7ABCD6;margin-top:2px}
.login-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
  border-radius:16px;padding:28px}
.login-card h2{font-size:16px;font-weight:600;color:var(--ice);margin-bottom:4px}
.login-card p{font-size:13px;color:#7ABCD6;margin-bottom:22px}
.login-roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.role-btn{padding:14px 12px;border:1.5px solid rgba(255,255,255,.12);border-radius:11px;
  background:rgba(255,255,255,.05);color:#9FC8DC;cursor:pointer;text-align:left;
  transition:all .15s;font:inherit}
.role-btn:hover{border-color:rgba(138,220,255,.4);background:rgba(138,220,255,.08);color:var(--ice)}
.role-btn.selected{border-color:var(--acc);background:rgba(138,220,255,.14);color:var(--acc)}
.role-btn .rb-icon{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);
  display:grid;place-items:center;margin-bottom:10px}
.role-btn .rb-icon svg{width:16px;height:16px}
.role-btn .rb-title{font-size:13px;font-weight:600;display:block;margin-bottom:2px}
.role-btn .rb-desc{font-size:11px;color:#7ABCD6;display:block}
.role-btn.selected .rb-desc{color:#8ADCFF}
.login-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  height:42px;background:#fff;color:#1F1F1F;border:1px solid rgba(255,255,255,.2);
  border-radius:9px;font:inherit;font-size:14px;font-weight:600;text-decoration:none;
  transition:opacity .13s}
.login-google:hover{opacity:.9}
.login-divider{display:flex;align-items:center;gap:10px;margin:18px 0 16px;
  font-size:11px;color:#5A8FA8}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;
  background:rgba(255,255,255,.12)}
/* Shown instead of the password form when GOOGLE_LOGIN_ONLY is on */
.login-note{margin:16px 0 0;font-size:12.5px;line-height:1.5;color:#7FB2C8}

/* ── LEGAL PAGES (privacy, voorwaarden) ── */
.legal-body{display:block;background:var(--page)}
.legal{max-width:720px;margin:0 auto;padding:48px 24px 64px}
/* Needs to outrank `.legal a` below, which would otherwise paint the logo
   blue and underlined. */
.legal a.legal-brand{display:inline-flex;align-items:center;gap:11px;margin-bottom:36px;
  text-decoration:none;color:var(--ink)}
.legal-mark{width:38px;height:38px;border-radius:10px;background:var(--navy);
  color:var(--acc);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.legal-brand strong{display:block;font-size:14px;font-weight:600}
.legal-brand em{display:block;font-size:12px;font-style:normal;color:var(--muted)}
.legal h1{font-size:26px;font-weight:700;letter-spacing:-.01em}
.legal-date{font-size:12.5px;color:var(--faint);margin:6px 0 30px}
.legal h2{font-size:16px;font-weight:600;margin:32px 0 9px;padding-top:20px;
  border-top:1px solid var(--line)}
.legal h3{font-size:13.5px;font-weight:600;margin:20px 0 6px;color:var(--navy)}
.legal p{font-size:14px;line-height:1.62;color:#28495C;margin-bottom:12px}
.legal ul{margin:0 0 12px 20px}
.legal li{font-size:14px;line-height:1.62;color:#28495C;margin-bottom:5px}
.legal a{color:var(--acc2);text-decoration:underline;text-underline-offset:2px}
.legal-foot{display:flex;flex-wrap:wrap;gap:18px;margin-top:44px;padding-top:20px;
  border-top:1px solid var(--line);font-size:12.5px}
.legal-foot a{color:var(--muted);text-decoration:none}
.legal-foot a:hover{color:var(--acc2);text-decoration:underline}

.login-field{margin-bottom:14px}
.login-field label{font-size:12px;font-weight:500;color:#7ABCD6;display:block;margin-bottom:5px}
.login-field input{width:100%;height:40px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);border-radius:9px;color:var(--ice);
  font:inherit;font-size:14px;padding:0 13px;transition:border-color .13s}
.login-field input::placeholder{color:#4A7A96}
.login-field input:focus{outline:none;border-color:var(--acc)}
.login-submit{width:100%;height:42px;background:var(--acc);color:var(--navy);
  border:none;border-radius:9px;font:inherit;font-size:14px;font-weight:600;
  cursor:pointer;margin-top:6px;transition:opacity .13s}
.login-submit:hover{opacity:.9}
.login-error{font-size:12px;color:#FF8A80;margin-top:8px;display:none;text-align:center}
.login-hint{margin-top:18px;padding:12px;background:rgba(255,255,255,.04);
  border-radius:9px;border:1px solid rgba(255,255,255,.07)}
.login-hint p{font-size:11px;color:#5A8FA8;margin:0}
.login-hint code{background:rgba(138,220,255,.12);color:var(--acc);padding:1px 5px;
  border-radius:4px;font-family:monospace;font-size:11px}
/* Role badge in topbar */
.role-badge{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;
  border-radius:6px;font-size:11px;font-weight:600;background:rgba(138,220,255,.15);
  color:var(--acc);border:1px solid rgba(138,220,255,.2)}
.logout-btn{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  color:#9FC8DC;font:inherit;font-size:12px;cursor:pointer;transition:all .13s}
.logout-btn:hover{background:rgba(255,255,255,.12);color:var(--ice)}
/* Client view: hide agency-only elements */
body.client-view .agency-only{display:none!important}
body.client-view .sb-client{display:none!important}

/* ── TARGET TRACKER ── */
.tracker-section{margin-top:32px}
.tracker-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.tracker-hd h3{font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.07em}
.tracker-hd a{font-size:12px;color:var(--acc2);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.tracker-hd a:hover{text-decoration:underline}
/* Maandentabel */
.tracker-tbl-wrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);overflow-x:auto;margin-bottom:14px}
.tracker-tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:820px}
.tracker-tbl thead tr{background:#F5FAFD}
.tracker-tbl th{padding:9px 13px;text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.tracker-tbl th.th-group{border-bottom:none;padding-bottom:4px;font-size:10px;letter-spacing:.08em;color:var(--faint)}
.tracker-tbl th.th-sub{padding-top:4px;border-top:1px solid var(--lsoft)}
.tracker-tbl td{padding:10px 13px;border-bottom:1px solid var(--lsoft);vertical-align:middle;white-space:nowrap}
.tracker-tbl tr:last-child td{border-bottom:none}
.tracker-tbl tr:hover td{background:#F8FBFD}
.tk-month{font-weight:600;color:var(--navy)}
.tk-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:2px 9px;border-radius:6px}
.tk-s-done{background:#E9F6EE;color:#1E5A38}
.tk-s-busy{background:#E8F0FE;color:#1A5276}
.tk-s-open{background:#F5F5F5;color:#888}
.tk-num{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--navy)}
.tk-target-num{text-align:right;font-variant-numeric:tabular-nums;font-size:12px;color:var(--faint)}
.tk-prog-cell{min-width:120px}
.tk-prog-wrap{display:flex;align-items:center;gap:8px}
.tk-prog-bar-bg{flex:1;height:6px;background:var(--lsoft);border-radius:3px;overflow:hidden;min-width:60px}
.tk-prog-fill{height:100%;border-radius:3px;transition:width .4s ease}
.tk-prog-fill.good{background:var(--pos)}
.tk-prog-fill.warn{background:#D99A2B}
.tk-prog-fill.bad{background:var(--neg)}
.tk-prog-fill.empty{background:var(--line)}
.tk-prog-pct{font-size:11px;font-weight:600;min-width:30px;text-align:right}
.tk-prog-pct.good{color:var(--pos)}.tk-prog-pct.warn{color:#D99A2B}.tk-prog-pct.bad{color:var(--neg)}.tk-prog-pct.empty{color:var(--faint)}
.tk-col-sep{border-left:2px solid var(--line)!important}

/* Voorbeeldweergave: data staat klaar maar is nog nooit echt gesynchroniseerd */
.sample-notice{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px;padding:11px 13px;
  background:#FFF8E8;border:1px solid #E8CE8E;border-radius:var(--r);
  font-size:12.5px;line-height:1.45;color:#6B5320}
.sample-tag{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 8px;
  background:#D99A2B;color:#fff;border-radius:5px;font-size:10.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.biweekly-embed{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;margin-bottom:14px}
.embed-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  border-bottom:1px solid var(--line)}
.embed-hd h3{font-size:14px;font-weight:600;color:var(--navy)}
.embed-hd-r{display:flex;align-items:center;gap:8px}
.embed-notice{font-size:11px;color:var(--faint);background:var(--lsoft);padding:2px 8px;border-radius:5px}
.embed-frame-wrap{position:relative;height:400px}
.embed-frame-wrap iframe{width:100%;height:100%;border:none;display:block}
.embed-blocker{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:12px;background:#F5FAFD;text-align:center;padding:24px}
.embed-blocker.hidden{display:none}
.eb-icon{width:48px;height:48px;border-radius:14px;background:rgba(4,52,77,.07);display:grid;place-items:center;margin-bottom:4px}
.eb-title{font-size:15px;font-weight:600;color:var(--navy)}
.eb-desc{font-size:13px;color:var(--muted);max-width:380px}
.eb-link{display:inline-flex;align-items:center;gap:6px;margin-top:4px;height:36px;padding:0 16px;
  background:var(--navy);color:var(--ice);border:none;border-radius:9px;font:inherit;
  font-size:13px;font-weight:500;cursor:pointer;text-decoration:none}
.eb-link:hover{opacity:.88}
.eb-alt{font-size:11px;color:var(--faint);margin-top:6px}

/* ── GOALS PAGE ── */
.goals-section{margin-bottom:24px}
.goals-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.goals-sec-hd h3{font-size:14px;font-weight:600;color:var(--navy)}
.img-upload-area{border:2px dashed var(--line);border-radius:var(--r);background:var(--panel);
  padding:28px 20px;text-align:center;cursor:pointer;transition:all .15s;position:relative}
.img-upload-area:hover{border-color:var(--acc2);background:#F0FAFF}
.img-upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.img-upload-area p{font-size:13px;color:var(--muted);margin:6px 0 0}
.img-upload-area svg{width:28px;height:28px;color:var(--faint)}
.img-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:12px}
.img-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);overflow:hidden;position:relative}
.img-card img{width:100%;display:block;max-height:280px;object-fit:contain;background:#F8FBFD}
.img-card-meta{padding:10px 13px;display:flex;align-items:center;justify-content:space-between}
.img-card-meta span{font-size:12px;color:var(--muted)}
.img-del{background:none;border:none;cursor:pointer;color:var(--faint);font-size:16px;
  padding:0 3px;transition:color .13s}
.img-del:hover{color:var(--neg)}
.img-placeholder{background:#F5FAFD;border:1px solid var(--line);border-radius:var(--r);
  padding:24px;text-align:center}
.img-placeholder p{font-size:13px;color:var(--faint)}

/* ── NOTION EMBED PAGE ── */
.notion-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:18px}
.nt{padding:10px 16px;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;transition:all .13s;white-space:nowrap}
.nt:hover{color:var(--ink)}
.nt.active{color:var(--navy);border-bottom-color:var(--acc2)}
.nsec{display:none}.nsec.active{display:block}

/* ── KANBAN BOARD ── */
.kanban-wrap{overflow-x:auto;padding-bottom:12px;margin-bottom:4px}
.kanban-board{display:flex;gap:12px;align-items:flex-start;min-width:max-content;padding:2px}
.kb-col{width:220px;flex:none;background:#F5FAFD;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.kb-col-hd{padding:10px 12px 8px;font-size:12px;font-weight:600;color:var(--navy);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;background:var(--panel)}
.kb-col-hd .kb-icon{font-size:14px}
.kb-col-hd .kb-count{margin-left:auto;background:var(--line);color:var(--muted);
  font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px}
.kb-cards{padding:8px;display:flex;flex-direction:column;gap:7px;max-height:540px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.kb-card{background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:9px 10px;cursor:default;transition:box-shadow .13s}
.kb-card:hover{box-shadow:0 2px 8px rgba(4,52,77,.1)}
.kb-card-title{font-size:12px;font-weight:500;color:var(--navy);line-height:1.4;margin-bottom:6px}
.kb-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.kb-tag{font-size:10px;font-weight:600;padding:1px 6px;border-radius:5px;white-space:nowrap}
.kt-ip{background:#E8F0FE;color:#1A5276}
.kt-done{background:#E9F6EE;color:#1E5A38}
.kt-ns{background:#F5F5F5;color:#888}
.kt-high{background:#FBEAE9;color:#7E2C27}
.kt-medium{background:#FBF1DD;color:#7A5410}
.kt-low{background:#F0F7FF;color:#1A5276}
.kt-iwb{background:#EDE7F6;color:#4527A0}
.kt-sea{background:#E3F2FD;color:#0D47A1}
.kt-mice{background:#FCE4EC;color:#880E4F}
.kt-cpa{background:#F3E5F5;color:#6A1B9A}
.kt-new{background:#FFF3E0;color:#E65100}
.kb-meta{font-size:10px;color:var(--faint);margin-top:5px;display:flex;align-items:center;gap:8px}
.kb-meta svg{width:10px;height:10px}

/* ── SETTINGS ── */
.set-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.set-tab{height:36px;padding:0 14px;border:none;background:none;border-bottom:2px solid transparent;
  color:var(--muted);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:all .13s}
.set-tab:hover{color:var(--ink)}
.set-tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.set-form{padding:16px}
.set-hint{font-size:12.5px;color:var(--muted);margin-bottom:16px;max-width:560px}
.set-field{margin-bottom:14px;max-width:480px}
.set-field label{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--navy);margin-bottom:5px}
.set-field input,.set-field select{width:100%;height:38px;border:1px solid var(--line);border-radius:8px;
  padding:0 12px;font:inherit;font-size:13px;color:var(--ink);background:#fff}
.set-field input:focus,.set-field select:focus{outline:none;border-color:var(--acc2)}
.set-field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font:inherit;font-size:13px;color:var(--ink);background:#fff;min-height:64px;resize:vertical}
.set-set{font-size:10px;font-weight:600;padding:1px 7px;border-radius:5px;background:#E9F6EE;color:#1E5A38;text-transform:uppercase;letter-spacing:.04em}
.set-err{display:block;color:var(--neg);font-size:11.5px;margin-top:4px}
.set-flash{background:#E9F6EE;color:#1E5A38;border:1px solid #BFE3CD;border-radius:8px;padding:9px 12px;font-size:12.5px;margin-bottom:16px;max-width:560px}
.set-actions{display:flex;gap:8px;margin-top:6px}
.set-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.set-grid2{grid-template-columns:1fr}}
.set-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);font-weight:500;cursor:pointer}
.set-check input{width:auto;height:auto}
/* connection rows */
.conn-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--lsoft)}
.conn-row:last-child{border-bottom:none}
.conn-info{display:flex;flex-direction:column;gap:2px}
.conn-name{font-size:13.5px;font-weight:600;color:var(--navy)}
.conn-meta{font-size:11.5px;color:var(--muted)}
.conn-right{display:flex;align-items:center;gap:10px}
.conn-status{font-size:10px;font-weight:600;padding:2px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.04em}
.cs-connected{background:#E9F6EE;color:#1E5A38}
.cs-disconnected{background:#F5F5F5;color:#888}
.cs-error{background:#FBEAE9;color:#7E2C27}
/* toggle switch */
.tgl{position:relative;width:40px;height:22px;flex:none;cursor:pointer}
.tgl input{opacity:0;width:0;height:0}
.tgl .tgl-track{position:absolute;inset:0;background:#CBD9E2;border-radius:999px;transition:.15s}
.tgl .tgl-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.tgl input:checked+.tgl-track{background:var(--pos)}
.tgl input:checked+.tgl-track .tgl-knob{transform:translateX(18px)}
.conn-group-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:14px 16px 6px;background:#F8FBFD;border-bottom:1px solid var(--lsoft)}
/* account-id editor under a real connection */
.conn-account{padding:10px 16px 14px;border-bottom:1px solid var(--lsoft);background:#FBFDFE}
.conn-account>label{display:block;font-size:12px;font-weight:600;color:var(--navy);margin-bottom:5px}
.conn-account-row{display:flex;gap:8px;max-width:360px}
.conn-account-row input{flex:1;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 12px;font:inherit;font-size:13px;color:var(--ink);background:#fff}
.conn-account-row input:focus{outline:none;border-color:var(--acc2)}
.conn-account-row select{flex:1;min-width:0;height:36px;border:1px solid var(--line);border-radius:8px;padding:0 8px;font:inherit;font-size:13px;color:var(--ink);background:#fff}
.conn-account-row select:focus{outline:none;border-color:var(--acc2)}
.conn-account-row+.conn-account-row{margin-top:8px}
.conn-account .set-hint{margin:6px 0 0}

/* Bezetting: percentage-van-capaciteit en de datum van de drukste dag, naast
   het absolute aantal in dezelfde cel */
.occ-pct{display:inline-block;margin-left:6px;font-size:11.5px;font-weight:600;color:var(--acc2)}
.occ-sub{display:block;font-size:11px;font-weight:400;color:var(--muted)}
/* Eén getal per regel, eenheid er direct achter. Zo staan de jaarkolommen in de
   voor/achter-tabel regel voor regel gelijk en kun je ze naast elkaar lezen. */
.occ-line{display:block;line-height:1.45}
.occ-unit{font-size:11px;font-weight:400;color:var(--muted)}
/* Bevestigd en optie zijn een verdeling van de regel erboven, geen losse feiten. */
.occ-in{font-size:11.5px;color:var(--muted)}
.occ-in .occ-unit{color:var(--faint)}
/* Uitleg onder de paneelkop in plaats van ernaast. De standaard .tp-hd/.cp-head
   zetten titel en hint als flex-row naast elkaar; dat werkt bij één regel, maar
   niet bij de leeswijzer op de Bezetting-pagina. */
.tp-hd.stack,.cp-head.stack{flex-direction:column;align-items:flex-start;gap:4px}
.tp-hd.stack .set-hint,.cp-head.stack .set-hint{margin-bottom:0;max-width:none}
/* Kop die een reeks panelen samenvoegt tot één onderwerp, bijvoorbeeld alle
   zaalpanelen tegenover alle restaurantpanelen. Zwaarder dan een paneelkop, want
   hij moet los van de panelen leesbaar zijn als scheiding. */
.sec-hd{font-size:17px;font-weight:700;color:var(--navy);margin:26px 0 4px;padding-top:6px;border-top:2px solid var(--line);
  display:flex;align-items:center;gap:8px}
.sec-block.is-first .sec-hd{margin-top:4px;padding-top:0;border-top:0}
/* Uitleg staat standaard dicht achter deze knop. De teksten zijn leeswijzers:
   onmisbaar de eerste keer, in de weg zodra je de pagina kent. */
.info-btn{flex:none;width:17px;height:17px;border-radius:50%;border:1px solid var(--line);background:var(--lsoft);
  color:var(--muted);font-size:11px;font-weight:700;font-family:inherit;line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;transition:background .12s,color .12s,border-color .12s}
.info-btn:hover{background:var(--ice);color:var(--acc2);border-color:var(--acc)}
.info-btn.on{background:var(--acc2);color:#fff;border-color:var(--acc2)}
.hd-row{display:flex;align-items:center;gap:8px;width:100%}
.hd-row h3{flex:none}
.hd-ctl{margin-left:auto;display:flex;align-items:center;gap:8px}
/* Titel als knop, voor panelen die dicht mogen staan. Ziet eruit als een kop,
   want dat is het ook; het driehoekje ervoor zegt dat er iets achter zit. */
.pnl-toggle{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;
  cursor:pointer;font:inherit;color:inherit;text-align:left}
.pnl-toggle h3{cursor:pointer}
.pnl-toggle:hover h3{color:var(--acc2)}
.pnl-caret{color:var(--faint);font-size:11px;line-height:1}
/* Bladerbalk onder een tabel. Twintig rijen per pagina houdt de pagina kort
   genoeg om het widgetblok eronder nog te vinden. */
.pgr{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin:12px 0 0;
  padding-top:12px;border-top:1px solid var(--lsoft)}
.pgr-txt{font-size:12.5px;color:var(--muted)}
/* Telling links, bediening rechts. Zonder dit schuift de bediening naar links
   zodra er maar één pagina is, en staat de balk scheef onder de tabel. */
.pgr-per{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-left:auto}
.pgr-nav{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted)}
.pgr-lbl{color:var(--faint)}
.pgr .tbtn{padding:4px 10px;font-size:12px}
.pgr .tbtn:disabled{opacity:.4;cursor:default}
.sec-block .sec-sub{margin-top:2px}
/* Losse uitleg onder een rij kaarten. Met alleen tekst zweeft die regel tussen
   de kaarten en het paneel eronder; een eigen kader hangt hem vast aan het blok
   waar hij over gaat. */
.info-note{margin:2px 0 16px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:10px 14px;box-shadow:var(--sh)}
.info-line{display:flex;align-items:center;gap:7px;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--muted);text-align:left}
.info-line:hover{color:var(--acc2)}
.info-note .set-hint{margin:6px 0 0}
/* Tekstkolom met een plafond. Een landingspagina-URL is zo lang dat de tabel
   erdoor uitrekt en de cijfers buiten beeld vallen: dan moet je eerst naar
   rechts scrollen om te zien waar de pagina eigenlijk over gaat. Afgekapt met
   puntjes, zodat het begin van de URL leesbaar blijft. */
.td-id{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sec-sub{font-size:12.5px;line-height:1.6;color:var(--muted);max-width:80ch;margin:0 0 14px}

/* ── NOTION-STYLE VIEW ── */
.nt-body{padding:20px 24px 12px}
.notion-db{margin:6px 0 26px}
.notion-db+.notion-db{border-top:1px solid var(--lsoft);padding-top:20px}
.nt-db-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 16px}
.nt-db-title{font-size:16px;font-weight:700;color:var(--navy)}
.nt-db-tools{display:inline-flex;align-items:center;gap:8px}
.nt-views{display:inline-flex;background:var(--lsoft);border-radius:8px;padding:3px}
.nt-view{border:none;background:transparent;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
  padding:4px 12px;border-radius:6px;cursor:pointer}
.nt-view.on{background:#fff;color:var(--navy);box-shadow:0 1px 2px rgba(4,52,77,.1)}
/* board / kanban — compact so several columns are visible at once */
.nt-board{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;align-items:flex-start}
.nt-col{flex:0 0 224px;width:224px;min-width:0;background:#F7FAFC;border:1px solid var(--lsoft);border-radius:10px;padding:7px}
.nt-col-hd{display:flex;align-items:center;gap:6px;padding:2px 3px 7px}
.nt-count{font-size:11.5px;color:var(--faint);font-weight:600}
.nt-cards{display:flex;flex-direction:column;gap:6px}
.nt-load-more{width:100%;margin-top:6px;background:transparent;border:1px dashed var(--line);border-radius:8px;padding:6px 9px;font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;transition:background .13s,color .13s,border-color .13s}
.nt-load-more:hover{background:#fff;color:var(--navy);border-color:var(--acc2)}
.nt-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 9px;
  box-shadow:0 1px 2px rgba(4,52,77,.05)}
.nt-card-title{font-size:12.5px;font-weight:600;color:var(--navy);line-height:1.3}
.nt-card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.nt-card-meta:empty{display:none}
.nt-field{font-size:11px;color:var(--muted);min-width:0;overflow-wrap:anywhere;word-break:break-word}
.nt-card-title{overflow-wrap:anywhere}
.nt-board .nt-pill{font-size:10.5px;padding:1px 7px;white-space:normal}
/* table */
.nt-table{width:100%;border-collapse:collapse;font-size:13px}
.nt-table th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:#F8FBFD}
.nt-table td{padding:9px 12px;border-bottom:1px solid var(--lsoft);vertical-align:top;color:var(--ink)}
.nt-table tbody tr:hover{background:#FAFDFF}
.nt-td-title{font-weight:600;color:var(--navy)}
/* pills */
.nt-pill{display:inline-block;font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:999px;
  line-height:1.5;white-space:nowrap;margin:1px 0}
.nt-td-multi_select .nt-pill,.nt-card-meta .nt-pill{margin-right:3px}
/* notion option colors */
.nt-default{background:#E9EEF2;color:#37474F}
.nt-gray{background:#E3E2E0;color:#4B4B49}
.nt-brown{background:#EEE0DA;color:#5C3B2E}
.nt-orange{background:#FADEC9;color:#8A4B23}
.nt-yellow{background:#FDECC8;color:#7A5A16}
.nt-green{background:#DBEDDB;color:#22543D}
.nt-blue{background:#D3E5EF;color:#1C4A63}
.nt-purple{background:#E8DEEE;color:#4A2D63}
.nt-pink{background:#F5E0E9;color:#7A2A4E}
.nt-red{background:#FFE2DD;color:#8A2A22}
/* people / checkbox / links */
.nt-person{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--ink);margin-right:6px}
.nt-avatar{width:18px;height:18px;border-radius:50%;background:var(--acc2);color:#fff;font-size:10px;
  font-weight:700;display:grid;place-items:center;text-transform:uppercase}
.nt-check{display:inline-grid;place-items:center;width:16px;height:16px;border:1.5px solid var(--line);
  border-radius:4px;font-size:11px;color:#fff}
.nt-check.on{background:var(--pos);border-color:var(--pos)}
.nt-link{color:var(--acc2);text-decoration:none;overflow-wrap:anywhere}
.nt-link:hover{text-decoration:underline}

/* ── NOTION TABS + CLICKABLE + EDIT PANEL ── */
.nt-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;background:var(--page);border:1px solid var(--line);
  border-radius:10px;padding:4px;margin:2px 0 18px;max-width:100%}
.nt-tab{border:1px solid transparent;background:transparent;font:inherit;font-size:13px;font-weight:600;
  color:var(--muted);padding:7px 14px;border-radius:7px;cursor:pointer;white-space:nowrap;
  transition:background .13s,color .13s,border-color .13s,box-shadow .13s}
.nt-tab:hover{background:var(--panel);color:var(--navy)}
.nt-tab.on{background:var(--navy);color:#fff;border-color:var(--navy);box-shadow:0 1px 3px rgba(4,52,77,.18)}
.nt-tab.on:hover{color:#fff}
.nt-card{cursor:pointer;transition:box-shadow .12s,border-color .12s}
.nt-card:hover{border-color:var(--acc2);box-shadow:0 2px 8px rgba(4,52,77,.1)}
.nt-row{cursor:pointer}
.nt-row:hover{background:#F1F8FD !important}
/* edit panel (side drawer) */
.nt-overlay{position:fixed;inset:0;z-index:60}
.nt-backdrop{position:absolute;inset:0;background:rgba(4,52,77,.28)}
.nt-panel{position:absolute;top:0;right:0;height:100%;width:560px;max-width:94vw;background:#fff;
  display:flex;flex-direction:column;box-shadow:-8px 0 30px rgba(4,52,77,.18);animation:nt-slide .16s ease-out}
@keyframes nt-slide{from{transform:translateX(24px);opacity:.6}to{transform:translateX(0);opacity:1}}
.nt-panel-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.nt-panel-title{font-size:17px;font-weight:700;color:var(--navy);line-height:1.3}
.nt-panel-actions{display:flex;gap:8px;flex:none}
.nt-panel-body{flex:1;overflow-y:auto;padding:8px 20px 16px}
.nt-field-row{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:start;
  padding:9px 0;border-bottom:1px solid var(--lsoft)}
.nt-field-lbl{font-size:12.5px;font-weight:600;color:var(--muted);padding-top:7px;word-break:break-word}
.nt-field-val{min-width:0}
.nt-input{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 10px;font:inherit;
  font-size:13px;color:var(--ink);background:#fff}
.nt-input:focus{outline:none;border-color:var(--acc2)}
textarea.nt-input{resize:vertical;min-height:38px}
.nt-ms{display:flex;flex-wrap:wrap;gap:8px}
.nt-ms-opt{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.nt-readonly{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);padding-top:6px;flex-wrap:wrap}
.nt-ro-tag{font-size:10px;font-weight:600;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
.nt-panel-ft{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.tbtn-primary{background:var(--acc2);border-color:var(--acc2);color:#fff}
.tbtn-primary:hover{background:#0092c4}
/* view-settings drawer */
.nt-set-block{padding:12px 0;border-bottom:1px solid var(--lsoft)}
.nt-set-lbl{font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:8px}
.nt-set-hint{font-size:11.5px;color:var(--faint);margin:6px 0 0}
.nt-set-props{display:flex;flex-direction:column;gap:6px}
.nt-set-prop{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);cursor:pointer}
/* group-order controls */
.nt-set-order{display:flex;flex-direction:column;gap:4px}
.nt-set-orow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;background:#F7FAFC;border:1px solid var(--lsoft);border-radius:6px}
.nt-set-oname{font-size:12.5px;color:var(--ink)}
.nt-set-obtns{display:inline-flex;gap:4px}
.nt-ob{width:24px;height:24px;border:1px solid var(--line);background:#fff;border-radius:5px;cursor:pointer;color:var(--ink);line-height:1;font-size:12px}
.nt-ob:hover:not(:disabled){background:#EDF2F7}
.nt-ob:disabled{opacity:.35;cursor:default}
/* number-format selects */
.nt-set-fmts{display:flex;flex-direction:column;gap:8px}
.nt-set-fmt{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nt-set-fname{font-size:12.5px;color:var(--ink);flex:0 0 auto}
.nt-set-fmt .nt-input{flex:0 0 180px}
/* progress bar in cells */
.nt-prog{display:inline-flex;align-items:center;gap:8px;min-width:0}
.nt-prog-val{font-size:11px;color:var(--muted);flex:0 0 auto;min-width:34px;text-align:right}
.nt-prog-bar{position:relative;height:6px;width:96px;flex:0 0 96px;background:#E2E8F0;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.nt-prog-fill{position:absolute;left:0;top:0;bottom:0;background:var(--acc2);border-radius:4px}
.nt-prog-fill.is-full{background:#1E9E6A}
/* drag-to-reorder (manual sort) */
.nt-cards[x-init] .nt-card{cursor:grab}
.nt-table tbody[x-init] .nt-row{cursor:grab}
.nt-drag-ghost{opacity:.45}
/* database manager */
.nt-add-row{display:flex;gap:8px;align-items:center}
.nt-add-row .nt-input{flex:1 1 auto}
.nt-src-list{display:flex;flex-direction:column;gap:8px}
.nt-src{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;background:#F7FAFC;border:1px solid var(--lsoft);border-radius:8px}
.nt-src-main{min-width:0}
.nt-src-title{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-src-id{font-size:11px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-src-tools{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.nt-src-obtns{display:inline-flex;gap:4px}
.nt-src-del{border:1px solid var(--line);background:#fff;color:#C0392B;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.nt-src-del:hover{background:#FDECEA;border-color:#F5C6C0}
.nt-add-alt{display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--lsoft);flex-wrap:wrap}
.nt-src .nt-text-edit{display:flex;flex-direction:column;gap:8px;width:100%}
.nt-text-edit textarea.nt-input{resize:vertical;font-family:inherit;line-height:1.5}
.nt-text-edit-ft{display:flex;justify-content:flex-end;gap:8px}
/* text page */
.nt-textpage{padding:4px 2px}
.nt-text-body{font-size:14px;line-height:1.7;color:var(--ink);max-width:760px;white-space:normal}
/* notion page (document) */
.nt-page{padding:6px 0 4px}
.nt-doc{max-width:820px;color:var(--ink);font-size:15px;line-height:1.7}
.nt-doc .nt-h{margin:20px 0 8px;line-height:1.3;font-weight:700;color:var(--ink)}
.nt-doc .nt-h1{font-size:26px}
.nt-doc .nt-h2{font-size:21px}
.nt-doc .nt-h3{font-size:17px}
.nt-doc .nt-h:first-child{margin-top:0}
.nt-doc .nt-p{margin:8px 0}
.nt-doc .nt-p-empty{margin:4px 0}
.nt-doc .nt-list{margin:8px 0 8px 22px;padding:0}
.nt-doc .nt-list li{margin:4px 0}
.nt-doc .nt-list .nt-list{margin-top:4px}
.nt-doc a{color:var(--acc2);text-decoration:underline}
.nt-doc code{background:var(--lsoft);border-radius:4px;padding:1px 5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.nt-doc .nt-todo{display:flex;align-items:flex-start;gap:8px;margin:5px 0}
.nt-doc .nt-todo-box{flex:none;font-size:16px;line-height:1.5}
.nt-doc .nt-todo.is-done{color:var(--muted);text-decoration:line-through}
.nt-doc .nt-quote{margin:12px 0;padding:4px 0 4px 14px;border-left:3px solid var(--line);color:var(--ink)}
.nt-doc .nt-callout{display:flex;gap:10px;margin:12px 0;padding:12px 14px;background:var(--lsoft);border-radius:8px}
.nt-doc .nt-callout-icon{flex:none;font-size:18px;line-height:1.5}
.nt-doc .nt-toggle{margin:8px 0}
.nt-doc .nt-toggle summary{cursor:pointer;font-weight:600}
.nt-doc .nt-code{margin:12px 0;padding:12px 14px;background:#1e1e2e;color:#e6e6f0;border-radius:8px;overflow:auto;font-size:13px;line-height:1.5}
.nt-doc .nt-code code{background:none;padding:0;color:inherit}
.nt-doc .nt-hr{margin:18px 0;border:0;border-top:1px solid var(--line)}
.nt-doc .nt-figure{margin:14px 0}
.nt-doc .nt-figure img{max-width:100%;border-radius:8px;display:block}
.nt-doc .nt-figure figcaption{margin-top:6px;font-size:13px;color:var(--muted)}
/* notion page inline editor */
.nt-page-edit{display:flex;flex-direction:column;gap:12px;max-width:820px}
.nt-page-text{width:100%;min-height:360px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.7;white-space:pre;overflow-wrap:normal;overflow-x:auto}