/* Layout: Attio-achtige schil. Vaste zijbalk links met modules, een werkvlak met kopbalk en werkbalk, en een rechter paneel voor één lead.
   Tokens gemeten op app.attio.com (Inter 14/20, radius 8, blauw #266DF0, lijnen #EEEFF1 / #1B1C1F). */
:root{
  --bg:#FFFFFF; --bg-side:#FBFBFB; --bg-raise:#FFFFFF; --bg-sunk:#F6F6F7; --bg-hover:rgba(0,0,0,.04); --bg-active:rgba(0,0,0,.06); --bg-btn:rgba(0,0,0,.025); --bg-ink:#101112; --fg-ink:#F1F2F3;
  --line:#EEEFF1; --line-2:rgba(0,0,0,.09); --line-3:rgba(0,0,0,.16);
  --fg:#101112; --fg-2:rgba(0,0,0,.63); --fg-3:rgba(0,0,0,.5); --fg-4:rgba(0,0,0,.34);
  --accent:#266DF0; --accent-hover:#1E5FD6; --accent-fg:#FFFFFF; --link:#266DF0; --accent-soft:rgba(38,109,240,.10); --ring:rgba(38,109,240,.35);
  --accent-fill:var(--accent);   /* vlakken in de accentkleur (badge, balk, schakelaar); --accent-fg is de tekst daarop */
  --t-grey:#6B7280; --t-grey-bg:#F1F2F3; --t-blue:#266DF0; --t-blue-bg:#EAF1FE; --t-violet:#7A4DF5; --t-violet-bg:#F1ECFE; --t-amber:#C2680A; --t-amber-bg:#FEF3E2; --t-green:#15803D; --t-green-bg:#E6F6EC; --t-red:#DC2626; --t-red-bg:#FDECEC; --t-teal:#0D99BD; --t-teal-bg:#E3F5FA;
  --li:#0A66C2; --wa:#1FA855; --mail:#C2680A; --bel:#266DF0;
  --scrim:rgba(16,17,18,.45); --shadow:0 1px 2px rgba(0,0,0,.05),0 12px 36px -12px rgba(0,0,0,.22); --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --r:8px; --r-sm:6px; --r-lg:12px; --r-xl:16px; --sb:272px; --panel:480px; --top:48px; --row:36px;
  --f:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --hour:52px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101112; --bg-side:#0B0C0D; --bg-raise:#1B1C1F; --bg-sunk:#0B0C0D; --bg-hover:rgba(255,255,255,.05); --bg-active:rgba(255,255,255,.08); --bg-btn:rgba(255,255,255,.04); --bg-ink:#F1F2F3; --fg-ink:#101112;
    --line:#1B1C1F; --line-2:rgba(255,255,255,.07); --line-3:rgba(255,255,255,.15);
    --fg:#F1F2F3; --fg-2:rgba(255,255,255,.6); --fg-3:rgba(255,255,255,.45); --fg-4:rgba(255,255,255,.3);
    --accent:#266DF0; --accent-hover:#3A7BF5; --accent-fg:#FFFFFF; --link:#4E8CFC; --accent-soft:rgba(78,140,252,.14); --ring:rgba(78,140,252,.4);
    --t-grey:#9A9CA2; --t-grey-bg:rgba(255,255,255,.08); --t-blue:#4E8CFC; --t-blue-bg:rgba(78,140,252,.15); --t-violet:#9B69FF; --t-violet-bg:rgba(155,105,255,.16); --t-amber:#F59E0B; --t-amber-bg:rgba(245,158,11,.15); --t-green:#34C76A; --t-green-bg:rgba(52,199,106,.15); --t-red:#F26B6B; --t-red-bg:rgba(242,107,107,.15); --t-teal:#22B8DA; --t-teal-bg:rgba(34,184,218,.15);
    --li:#4E9BE0; --wa:#2ECC71; --mail:#F59E0B; --bel:#4E8CFC;
    --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 44px -14px rgba(0,0,0,.75); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101112; --bg-side:#0B0C0D; --bg-raise:#1B1C1F; --bg-sunk:#0B0C0D; --bg-hover:rgba(255,255,255,.05); --bg-active:rgba(255,255,255,.08); --bg-btn:rgba(255,255,255,.04); --bg-ink:#F1F2F3; --fg-ink:#101112;
  --line:#1B1C1F; --line-2:rgba(255,255,255,.07); --line-3:rgba(255,255,255,.15);
  --fg:#F1F2F3; --fg-2:rgba(255,255,255,.6); --fg-3:rgba(255,255,255,.45); --fg-4:rgba(255,255,255,.3);
  --accent:#266DF0; --accent-hover:#3A7BF5; --accent-fg:#FFFFFF; --link:#4E8CFC; --accent-soft:rgba(78,140,252,.14); --ring:rgba(78,140,252,.4);
  --t-grey:#9A9CA2; --t-grey-bg:rgba(255,255,255,.08); --t-blue:#4E8CFC; --t-blue-bg:rgba(78,140,252,.15); --t-violet:#9B69FF; --t-violet-bg:rgba(155,105,255,.16); --t-amber:#F59E0B; --t-amber-bg:rgba(245,158,11,.15); --t-green:#34C76A; --t-green-bg:rgba(52,199,106,.15); --t-red:#F26B6B; --t-red-bg:rgba(242,107,107,.15); --t-teal:#22B8DA; --t-teal-bg:rgba(34,184,218,.15);
  --li:#4E9BE0; --wa:#2ECC71; --mail:#F59E0B; --bel:#4E8CFC;
  --scrim:rgba(0,0,0,.6); --shadow:0 1px 2px rgba(0,0,0,.4),0 16px 44px -14px rgba(0,0,0,.75); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
/* Ook het document zelf in de kleur van het thema: zo schemert er nooit wit door, niet bij doorscrollen en niet rond de app. */
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font:500 14px/20px var(--f);-webkit-font-smoothing:antialiased;overflow:hidden}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0;margin:0}
:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-radius:var(--r-sm)}
svg.i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
svg.i.sm{width:14px;height:14px}
svg.i.lg{width:20px;height:20px}
.muted{color:var(--fg-3)}
.tab{font-variant-numeric:tabular-nums}
.sk{border-radius:6px;background:linear-gradient(90deg,var(--bg-sunk) 0,var(--line) 45%,var(--bg-sunk) 90%);background-size:220% 100%;animation:shimmer 1.4s linear infinite;color:transparent!important}
@keyframes shimmer{to{background-position:-220% 0}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes breathe{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---------- aanmelden: toestand en acties (de pagina zelf staat onderaan) ---------- */
.login-state{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line-2);border-radius:var(--r-lg);padding:10px 12px;background:var(--bg-sunk);margin-bottom:16px;font-size:13px;line-height:18px}
.login-state .dot{width:8px;height:8px;border-radius:50%;background:var(--t-amber);flex:none;margin-top:5px}
.login-state[data-s="ok"] .dot{background:var(--t-green)}
.login-state[data-s="bad"] .dot{background:var(--t-red)}
.login-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:var(--sb) minmax(0,1fr);height:100%;overflow:hidden}
.shell.sb-hidden{grid-template-columns:0 minmax(0,1fr)}
.sb{background:var(--bg-side);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:transform .25s var(--ease)}
.shell.sb-hidden .sb{display:none}
.sb-top{display:flex;align-items:center;gap:4px;padding:10px 8px 6px 8px}
.ws{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:4px 6px;border-radius:var(--r);text-align:left}
.ws:hover{background:var(--bg-hover)}
.ws-ava{width:22px;height:22px;border-radius:6px;background:var(--bg-ink);color:var(--fg-ink);display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:.02em;flex:none}
.ws-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em}
.ws .i{color:var(--fg-3);width:14px;height:14px}
.icon-btn{width:28px;height:28px;border-radius:var(--r);display:grid;place-items:center;color:var(--fg-3);flex:none}
.icon-btn:hover{background:var(--bg-hover);color:var(--fg)}
.icon-btn.spin svg{animation:spin .9s linear infinite}
.sb-search{display:flex;align-items:center;gap:8px;margin:2px 8px 8px;height:30px;padding:0 8px 0 9px;border-radius:var(--r);background:var(--bg-raise);border:1px solid var(--line-2);color:var(--fg);box-shadow:var(--shadow-sm);text-align:left}
.sb-search:hover{border-color:var(--line-3)}
.sb-search .i{color:var(--fg-3)}
.sb-search span{flex:1}
/* Sneltoets: een vast vakje met het teken precies in het midden. --k is de hoogte en de kleinste breedte. */
kbd{--k:18px;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:var(--k);height:var(--k);padding:0 3px;font:500 11px/1 var(--f);white-space:nowrap;vertical-align:middle;color:var(--fg-3);border:1px solid var(--line-2);border-radius:5px;background:var(--bg)}
/* Waar de browser het kan, telt alleen de hoogte van de hoofdletter mee. Dan staat het teken ook optisch exact in het midden. */
@supports (text-box:trim-both cap alphabetic){kbd{display:inline-block;text-align:center;padding:calc((var(--k) - 2px - 1cap)/2) 3px;text-box:trim-both cap alphabetic}}
.sb-nav{flex:1;overflow:auto;padding:0 8px 8px;scrollbar-width:thin}
.sb-nav a,.sb-foot a{display:flex;align-items:center;gap:9px;height:29px;padding:0 6px 0 7px;border-radius:var(--r);color:var(--fg);text-decoration:none;cursor:pointer;white-space:nowrap;position:relative}
.sb-nav a:hover,.sb-foot a:hover{background:var(--bg-hover)}
.sb-nav a[aria-current="page"],.sb-foot a[aria-current="page"]{background:var(--bg-active)}
.sb-nav a .i{color:var(--fg-2)}
.sb-nav a[aria-current="page"] .i{color:var(--fg)}
.sb-nav a span.l{flex:1;overflow:hidden;text-overflow:ellipsis}
.badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent-fill);color:var(--accent-fg);font-size:11px;font-weight:600;display:grid;place-items:center;line-height:1}
.badge:empty{display:none}
.sb-tag{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--fg-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 5px}
.cnt{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.sb-sec{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-2);padding:0 6px 0 7px;height:24px;margin-top:14px}
.sb-sec span{flex:1}
.sb-sec button{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;color:var(--fg-3)}
.sb-sec button:hover{background:var(--bg-hover);color:var(--fg)}
.sb-nav a.lst .sq{width:14px;height:14px;border-radius:4px;background:var(--t-grey-bg);display:grid;place-items:center;font-size:8px;font-weight:700;color:var(--fg-2);flex:none}
.sb-nav a.sb-add{color:var(--fg-3);border:1px dashed var(--line-2);justify-content:center;margin-top:4px;height:28px}
.sb-nav a.sb-add:hover{color:var(--fg);border-color:var(--line-3);background:transparent}
.sb-foot{border-top:1px solid var(--line);padding:8px}
.me{display:flex;align-items:center;gap:9px;padding:6px 6px;border-radius:var(--r);min-width:0}
.me img,.ava{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover;background:var(--t-grey-bg)}
.me > div{min-width:0;flex:1}
.me b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px;line-height:16px}
.me span{display:block;font-size:11.5px;line-height:14px;color:var(--fg-3)}

.shell > .main{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;position:relative;background:var(--bg)}
.top{height:var(--top);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 12px 0 12px;flex:none}
.crumb{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.crumb b{flex:none}
.crumb .ic{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.crumb .ic .i{width:14px;height:14px}
.crumb b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb .sep{color:var(--fg-4)}
.crumb .sub{color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-r{display:flex;align-items:center;gap:6px;flex:none}
.conn{display:flex;gap:4px;margin-right:4px}
.cdot{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 8px;border-radius:var(--r);font-size:12px;color:var(--fg-3);border:1px solid transparent}
.cdot i{width:6px;height:6px;border-radius:50%;background:var(--line-3)}
.cdot[data-s="ok"] i{background:var(--t-green)}
.cdot[data-s="loading"] i{background:var(--t-amber);animation:breathe 1.2s ease-in-out infinite}
.cdot[data-s="error"]{color:var(--t-red);cursor:pointer;border-color:var(--t-red-bg);background:var(--t-red-bg)}
.cdot[data-s="error"] i{background:var(--t-red)}
.cdot[data-s="off"]{opacity:.6}
.content{flex:1;min-height:0;overflow:auto;position:relative;scrollbar-width:thin}
.view{min-height:100%;animation:fadein .25s var(--ease) both}
.pad{padding:20px 24px 40px}
.pad-x{padding-inline:24px}
@media (max-width:900px){.pad{padding:16px 16px 40px}.pad-x{padding-inline:16px}}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r);background:var(--bg-btn);border:1px solid var(--line-2);color:var(--fg);font-weight:500;white-space:nowrap;line-height:1;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:var(--bg-hover);border-color:var(--line-3)}
.btn:active{transform:translateY(.5px)}
.btn .i{width:15px;height:15px}
.btn.primary{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fg)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--fg-2)}
.btn.ghost:hover{background:var(--bg-hover);color:var(--fg)}
.btn.danger{color:var(--t-red)}
.btn.danger:hover{background:var(--t-red-bg);border-color:var(--t-red-bg)}
.btn.lg{height:34px;padding:0 14px;border-radius:9px;font-size:14px}
.btn.sm{height:24px;padding:0 8px;font-size:12.5px;border-radius:6px}
.btn.sm .i{width:13px;height:13px}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.btn.ink{background:var(--bg-ink);color:var(--fg-ink);border-color:var(--bg-ink)}
.btn.ink:hover{opacity:.9}
.btn .kb{font-size:10.5px;color:inherit;opacity:.6;border:1px solid currentColor;border-radius:4px;padding:1px 4px;line-height:1}
.lnk{color:var(--link);text-decoration:none;cursor:pointer}
.lnk:hover{text-decoration:underline;text-underline-offset:3px}
.seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);padding:2px;background:var(--bg-btn);gap:2px}
.seg button{height:24px;padding:0 10px;border-radius:6px;color:var(--fg-3);font-size:13px;display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{background:var(--bg-raise);color:var(--fg);box-shadow:var(--shadow-sm)}
.seg button .i{width:14px;height:14px}

/* toolbar + tabs */
.toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 24px;border-bottom:1px solid var(--line);min-height:48px}
@media (max-width:900px){.toolbar{padding:8px 16px}}
.toolbar .grow{flex:1}
.vtabs{display:flex;gap:2px;align-items:center;overflow-x:auto;scrollbar-width:none;max-width:100%}
.vtabs::-webkit-scrollbar{display:none}
.vtabs button{height:28px;padding:0 10px;border-radius:var(--r);color:var(--fg-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.vtabs button:hover{background:var(--bg-hover);color:var(--fg)}
.vtabs button[aria-pressed="true"]{background:var(--bg-active);color:var(--fg)}
.vtabs button .cnt{font-size:12px}
.search{display:flex;align-items:center;gap:6px;height:28px;padding:0 8px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-raise);min-width:0}
.search .i{color:var(--fg-3);width:14px;height:14px}
.search input{border:0;background:transparent;outline:none;width:160px;min-width:0;font-size:13.5px}
.search input::placeholder{color:var(--fg-4)}
@media (max-width:600px){.search input{width:100px}}
/* Alleen een keuzemenu: een geselecteerde rij in een lijst heet ook .sel en mag deze opmaak niet krijgen. */
select.sel{height:28px;padding:0 26px 0 9px;border-radius:var(--r);border:1px solid var(--line-2);background:var(--bg-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;appearance:none;-webkit-appearance:none;color:var(--fg);font-size:13.5px;max-width:220px;text-overflow:ellipsis}
select.sel:hover{border-color:var(--line-3)}

/* pills / chips */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px 0 7px;border-radius:6px;font-size:12.5px;font-weight:500;white-space:nowrap;background:var(--t-grey-bg);color:var(--fg)}
.pill i{width:7px;height:7px;border-radius:50%;background:var(--t-grey);flex:none}
.pill.grey{background:var(--t-grey-bg)}.pill.grey i{background:var(--t-grey)}
.pill.blue{background:var(--t-blue-bg)}.pill.blue i{background:var(--t-blue)}
.pill.violet{background:var(--t-violet-bg)}.pill.violet i{background:var(--t-violet)}
.pill.amber{background:var(--t-amber-bg)}.pill.amber i{background:var(--t-amber)}
.pill.green{background:var(--t-green-bg)}.pill.green i{background:var(--t-green)}
.pill.red{background:var(--t-red-bg)}.pill.red i{background:var(--t-red)}
.pill.teal{background:var(--t-teal-bg)}.pill.teal i{background:var(--t-teal)}
.pill.plain{background:transparent;padding:0}
.chan{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--fg-2);white-space:nowrap}
.ava-i{width:22px;height:22px;border-radius:6px;background:var(--t-grey-bg);color:var(--fg-2);display:grid;place-items:center;font-size:10px;font-weight:700;flex:none;text-transform:uppercase}
.ava-i.lg{width:40px;height:40px;border-radius:10px;font-size:15px}
.ava-u{width:20px;height:20px;border-radius:50%;object-fit:cover;background:var(--t-grey-bg);flex:none}
.who{display:inline-flex;align-items:center;gap:6px;min-width:0}
.who span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* tables (Attio grid) */
.tbl-wrap{overflow:auto;min-width:0;scrollbar-width:thin}
table.grid{border-collapse:separate;border-spacing:0;width:100%;min-width:900px;font-size:14px}
.grid th{position:sticky;top:0;z-index:2;background:var(--bg);text-align:left;font-weight:500;color:var(--fg-2);height:30px;padding:0 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;font-size:13px}
.grid th .i{width:13px;height:13px;margin-right:6px;vertical-align:-2px;color:var(--fg-3)}
.grid th.sortable{cursor:pointer;user-select:none}
/* De kop staat vast boven de rijen en blijft dus dekkend, ook met de muis erboven: de tint ligt als laag op de achtergrond. */
.grid th.sortable:hover{background:linear-gradient(var(--bg-hover),var(--bg-hover)),var(--bg)}
.grid th .dir{margin-left:4px;color:var(--fg-3);font-size:11px}
.grid td{height:var(--row);padding:0 10px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px;vertical-align:middle}
.grid th:first-child,.grid td:first-child{width:36px;min-width:36px;padding:0;text-align:center;position:sticky;left:0;z-index:1;background:var(--bg)}
.grid th:nth-child(2),.grid td:nth-child(2){position:sticky;left:36px;z-index:1;background:var(--bg);min-width:220px;box-shadow:1px 0 0 var(--line)}
.grid th:first-child{z-index:3}.grid th:nth-child(2){z-index:3}
.grid tr:hover td{background:var(--bg-sunk)}
.grid tr.sel td{background:var(--accent-soft)}
.grid tr.active td{background:var(--accent-soft)}
.grid td.num{font-variant-numeric:tabular-nums}
.grid td.dim{color:var(--fg-3)}
.grid td .main-cell{display:flex;align-items:center;gap:8px;min-width:0;cursor:pointer}
.grid td .main-cell b{font-weight:500;overflow:hidden;text-overflow:ellipsis}
.grid td .main-cell:hover b{text-decoration:underline;text-underline-offset:3px}
.grid td .sub{display:block;font-size:12px;color:var(--fg-3);line-height:14px}
.grid input[type="checkbox"]{width:14px;height:14px;margin:0;vertical-align:middle;accent-color:var(--accent);cursor:pointer}
.grid tr.empty td{height:120px;text-align:center;color:var(--fg-3);white-space:normal}
.grid-foot{display:flex;align-items:center;gap:16px;height:36px;padding:0 24px;border-top:1px solid var(--line);font-size:12.5px;color:var(--fg-3);position:sticky;bottom:0;background:var(--bg)}
.grid-foot b{color:var(--fg);font-weight:600}
.due.late{color:var(--t-red)}
.due.today{color:var(--t-amber)}
.bulk{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-raise);box-shadow:var(--shadow);position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:5;animation:rise .25s var(--ease) both;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 32px)}
.bulk b{font-weight:600;margin-right:4px}

/* cards / tiles */
.card{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-raise);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);min-height:46px}
.card-h h3{margin:0;font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.card-h .i{color:var(--fg-3)}
.card-b{padding:12px 16px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;background:var(--bg-raise);min-width:0}
.tile .l{font-size:12px;color:var(--fg-3);display:flex;align-items:center;gap:6px;margin-bottom:6px}
.tile .v{font-size:26px;line-height:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:6px}
.tile .v small{font-size:13px;color:var(--fg-3);font-weight:500}
.tile .d{font-size:12px;color:var(--fg-3);margin-top:4px}
.tile .d.good{color:var(--t-green)}.tile .d.warn{color:var(--t-amber)}
.cols{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16px;align-items:start}
@media (max-width:1000px){.cols{grid-template-columns:minmax(0,1fr)}}
.stack{display:flex;flex-direction:column;gap:16px}
.rows{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid var(--line);min-width:0}
.row:last-child{border-bottom:0}
.row:hover{background:var(--bg-sunk)}
.row .t{flex:1;min-width:0}
.row .t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t span{display:block;font-size:12px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .when{font-size:12.5px;color:var(--fg-3);white-space:nowrap;font-variant-numeric:tabular-nums;min-width:52px}
.row .when b{display:block;color:var(--fg);font-weight:600}
.row .acts{display:flex;gap:4px;flex:none}
.empty{padding:28px 16px;text-align:center;color:var(--fg-3);font-size:13.5px}
.empty b{display:block;color:var(--fg);font-weight:600;margin-bottom:4px}
.empty .btn{margin-top:10px}
.err{font-size:13px;color:var(--t-red);border:1px solid var(--t-red-bg);background:var(--t-red-bg);border-radius:var(--r);padding:8px 12px;margin:10px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.err .btn{margin-left:auto}
.notice{display:flex;gap:10px;align-items:center;border:1px solid var(--line-2);background:var(--bg-raise);border-radius:var(--r-lg);padding:8px 12px;font-size:13.5px;color:var(--fg-2);flex-wrap:wrap}
.notice .i{color:var(--fg-3)}
.notice .btn{margin-left:auto}
h1.page{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.015em;margin:0 0 4px}
.page-sub{color:var(--fg-2);margin:0 0 18px}
h2.sec{font-size:15px;font-weight:600;margin:22px 0 10px}
.greet{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.greet h1{margin:0}
.greet p{margin:2px 0 0;color:var(--fg-3);font-size:13px}

/* lists view */
.stackbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--t-grey-bg);min-width:120px}
.stackbar i{display:block;flex-grow:0;flex-basis:0}
.stackbar .s-new{background:var(--t-grey)}.stackbar .s-busy{background:var(--t-blue)}.stackbar .s-won{background:var(--t-green)}.stackbar .s-lost{background:var(--t-red)}
.legend{display:flex;gap:12px;font-size:12px;color:var(--fg-3);flex-wrap:wrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:0}

/* drop */
.drop{border:1px dashed var(--line-3);border-radius:var(--r-lg);padding:28px 16px;text-align:center;color:var(--fg-3);transition:border-color .2s,background-color .2s;background:var(--bg-raise)}
.drop.over{border-color:var(--accent);background:var(--accent-soft)}
.drop .i.lg{width:24px;height:24px;color:var(--fg-3);margin:0 auto 8px;display:block}
.drop b{display:block;color:var(--fg);font-weight:600;margin-bottom:2px}
.drop p{margin:0 0 12px;font-size:13px}
textarea.paste{width:100%;min-height:72px;border:1px solid var(--line-2);border-radius:var(--r);padding:8px 10px;background:var(--bg-raise);resize:vertical;font-size:13px}

/* bellen */
.lead-tel{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:12px}
.tel{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;user-select:all}
.tel.none{font-size:14px;color:var(--fg-3);font-weight:500}
@media (max-width:640px){.outcomes{grid-template-columns:repeat(2,minmax(0,1fr))}}
.oc{position:relative;height:48px;padding:0 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--bg-raise);color:var(--fg);font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:left;transition:border-color .15s,background-color .15s,transform .1s}
.oc:hover{border-color:var(--line-3);background:var(--bg-hover)}
.oc:active{transform:scale(.985)}
.oc.main{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fg)}
.oc.main kbd{color:color-mix(in srgb,var(--accent-fg) 90%,transparent);border-color:color-mix(in srgb,var(--accent-fg) 40%,transparent);background:transparent}
.oc.flash::after{content:"";position:absolute;inset:-2px;border-radius:12px;border:2px solid var(--accent);animation:fadein .5s var(--ease) reverse both;pointer-events:none}
.oc[disabled]{opacity:.35;cursor:not-allowed}
.tx{font-size:12.5px;color:var(--fg-3);display:inline-flex;align-items:center;gap:5px;border-radius:4px}
.tx:hover{color:var(--fg)}
.tx[disabled]{opacity:.4;cursor:not-allowed}
.save{font-size:12px;color:var(--fg-3);display:inline-flex;align-items:center;gap:6px}
.save[data-s="saving"]::before,.save[data-s="saved"]::before,.save[data-s="error"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--t-amber)}
.save[data-s="saved"]::before{background:var(--t-green)}
.save[data-s="error"]{color:var(--t-red)}
.save[data-s="error"]::before{background:var(--t-red)}

/* agenda */
.cal-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cal-ctl{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cal-scroll{overflow:auto;max-height:620px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-raise);scrollbar-width:thin}
.cal{--days:5;min-width:640px;position:relative}
.cal.one{min-width:0}
.cal-head{display:grid;grid-template-columns:56px repeat(var(--days),minmax(0,1fr));position:sticky;top:0;z-index:3;background:var(--bg-raise);border-bottom:1px solid var(--line-2)}
.cal-dh{padding:8px 10px;font-size:12px;color:var(--fg-3);border-left:1px solid var(--line-2);display:flex;align-items:baseline;gap:6px;min-width:0}
.cal-dh b{font-size:16px;color:var(--fg);font-weight:600}
.cal-dh.today b{color:var(--accent)}
.cal-dh .sum{margin-left:auto;font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-allday{display:grid;grid-template-columns:56px repeat(var(--days),minmax(0,1fr));border-bottom:1px solid var(--line)}
.cal-allday .lab{font-size:10.5px;color:var(--fg-4);padding:6px 6px;text-align:right}
.cal-allday > div{border-left:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cal-allday .lab{border-left:0}
.ad{font-size:11.5px;padding:2px 6px;border-radius:5px;background:var(--t-grey-bg);color:var(--fg-2);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* De lijnen van het raster zijn doorschijnend, zodat ze zichtbaar blijven op de kaart en op de pagina, in licht en donker. */
.cal-body{display:grid;grid-template-columns:56px repeat(var(--days),minmax(0,1fr));position:relative}
.cal-col{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--hour) - 1px),var(--line-2) calc(var(--hour) - 1px),var(--line-2) var(--hour))}
.cal-hours{position:relative}
.cal-hours span{position:absolute;right:8px;transform:translateY(-50%);font-size:11px;color:var(--fg-4);font-variant-numeric:tabular-nums}
.cal-col{position:relative;border-left:1px solid var(--line-2);cursor:crosshair;min-width:0}
.cal-col.weekend{background-color:rgba(0,0,0,.015)}
.cal-col.past{cursor:default}
.ev{position:absolute;border-radius:6px;padding:3px 7px;font-size:12px;line-height:15px;text-align:left;overflow:hidden;border:1px solid transparent;color:var(--fg);background:var(--t-grey-bg);animation:fadein .3s var(--ease) both;animation-delay:calc(var(--d,0) * 18ms);min-width:0}
.ev .et{display:block;font-size:10.5px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.ev .en{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.short{padding:1px 6px;line-height:16px}
.ev.short .et{display:none}
.ev.k-money{background:var(--t-green-bg);border-color:var(--t-green);color:var(--fg)}
.ev.k-money .et{color:var(--t-green)}
.ev.k-google{background:var(--t-blue-bg);border-color:transparent}
.ev.k-google .et{color:var(--t-blue)}
.ev:hover{filter:brightness(.97);z-index:2}
.nowline{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--t-red);z-index:2;pointer-events:none}
.nowline::before{content:"";position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--t-red)}
.slot-ghost{position:absolute;left:3px;right:3px;border-radius:6px;border:1px dashed var(--accent);color:var(--accent);font-size:11px;padding:2px 6px;display:none;pointer-events:none;background:var(--accent-soft)}
.slot-ghost.on{display:block}
.cal-days-m{display:none;gap:4px;margin-bottom:8px;overflow-x:auto}
.cal-days-m button{flex:1;min-width:52px;height:30px;border-radius:var(--r);border:1px solid var(--line-2);font-size:12.5px;color:var(--fg-2)}
.cal-days-m button[aria-pressed="true"]{background:var(--bg-active);color:var(--fg)}
.cal-days-m button.today{border-color:var(--accent);color:var(--accent)}
@media (max-width:760px){.cal-days-m{display:flex}.cal{min-width:0}}

/* kanban */
.kanban{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin;align-items:flex-start}
.kcol{flex:0 0 268px;max-width:268px;background:var(--bg-sunk);border-radius:var(--r-xl);padding:10px;min-height:200px}
.khead{display:flex;align-items:center;gap:8px;padding:2px 4px 10px;font-weight:600}
.khead i{width:8px;height:8px;border-radius:50%;flex:none}
.khead .cnt{margin-left:2px}
.khead .sum{margin-left:auto;font-size:12px;color:var(--fg-3);font-weight:500}
.deal{background:var(--bg-raise);border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;margin-bottom:8px;animation:rise .3s var(--ease) both;animation-delay:calc(var(--d,0) * 25ms);min-width:0}
.deal b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.deal span{display:block;font-size:12.5px;color:var(--fg-3);margin-top:2px}
.deal.sk{height:60px}

/* funnel / reports */
.funnel{display:flex;flex-direction:column;gap:10px}
.fstep .fl{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.fstep .fl b{font-weight:600;font-variant-numeric:tabular-nums}
.fbar{height:8px;border-radius:4px;background:var(--t-grey-bg);overflow:hidden}
.fbar i{display:block;height:100%;background:var(--accent-fill);border-radius:4px;transition:width .8s var(--ease)}
.fconv{font-size:11.5px;color:var(--fg-3);margin-top:3px}
.bars{display:flex;gap:6px;align-items:flex-end;height:120px;padding-top:10px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:100%;justify-content:flex-end}
.bar .col{width:100%;max-width:38px;border-radius:5px 5px 2px 2px;background:var(--accent-fill);min-height:2px;transition:height .6s var(--ease)}
.bar.today .col{background:var(--t-violet)}
.bar .dl{font-size:11px;color:var(--fg-3);white-space:nowrap}
.bar .dl b{display:block;color:var(--fg);font-variant-numeric:tabular-nums;text-align:center}
table.mini{width:100%;border-collapse:collapse;font-size:13.5px}
.mini th{text-align:left;font-weight:500;color:var(--fg-3);font-size:12px;padding:6px 10px;border-bottom:1px solid var(--line)}
.mini td{padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.mini td.num,.mini th.num{text-align:right;font-variant-numeric:tabular-nums}
.mini tr:last-child td{border-bottom:0}
.slider{display:flex;align-items:center;gap:12px;margin:6px 0 12px}
.slider input{flex:1;accent-color:var(--accent)}
.pct{font-weight:600;font-variant-numeric:tabular-nums;min-width:44px;text-align:right}

/* settings */
.settings{display:grid;grid-template-columns:232px minmax(0,1fr);min-height:100%}
@media (max-width:900px){.settings{grid-template-columns:minmax(0,1fr)}}
.set-nav{border-right:1px solid var(--line);padding:14px 8px;background:var(--bg-side)}
@media (max-width:900px){.set-nav{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:4px;overflow-x:auto;padding:8px}.set-nav .sb-sec{display:none}}
.set-nav a{display:flex;align-items:center;gap:9px;height:29px;padding:0 8px;border-radius:9px;cursor:pointer;color:var(--fg);white-space:nowrap}
.set-nav a:hover{background:var(--bg-hover)}
.set-nav a[aria-current="page"]{background:var(--bg-active)}
.set-nav a .i{color:var(--fg-2)}
.set-body{padding:28px 32px 60px;max-width:860px;min-width:0}
@media (max-width:900px){.set-body{padding:20px 16px 60px}}
.set-sec{margin-bottom:30px}
.set-sec h2{font-size:16px;font-weight:600;margin:0 0 2px}
.set-sec > p{color:var(--fg-2);margin:0 0 14px;font-size:13.5px}
.fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
@media (max-width:640px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fgrid .full{grid-column:1/-1}
label.f{display:block;font-size:12px;color:var(--fg-3);margin-bottom:4px}
.in,input.in,textarea.in,select.in{width:100%;height:32px;border:1px solid var(--line-2);border-radius:9px;padding:0 10px;background:var(--bg-raise);font-size:14px;color:var(--fg)}
textarea.in{height:auto;min-height:80px;padding:8px 10px;resize:vertical;line-height:20px}
.in:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.in[disabled]{opacity:.6}
select.in{appearance:none;-webkit-appearance:none;background:var(--bg-raise) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;padding-right:28px}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer}
.chk input{accent-color:var(--accent);width:15px;height:15px;margin:0}
.sw{position:relative;width:34px;height:20px;border-radius:10px;background:var(--line-3);transition:background-color .2s;flex:none}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);box-shadow:0 1px 2px rgba(0,0,0,.3)}
.sw[aria-checked="true"]{background:var(--accent-fill)}
.sw[aria-checked="true"]::after{transform:translateX(14px)}
.swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.swrow:last-child{border-bottom:0}
.swrow b{display:block;font-weight:500}
.swrow span{display:block;font-size:12.5px;color:var(--fg-3)}
.set-foot{display:flex;align-items:center;gap:10px;margin-top:14px}
.set-foot .state{font-size:12.5px;color:var(--fg-3)}
.tpl{border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:10px;background:var(--bg-raise)}
.tpl-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tpl-h input{flex:1}
.tpl textarea{width:100%}
.members .row{padding:10px 0}
.members .row:hover{background:transparent}

/* lead panel (drawer) */
.panel{position:absolute;top:0;right:0;bottom:0;width:min(var(--panel),100%);background:var(--bg);border-left:0;box-shadow:var(--shadow);display:flex;flex-direction:column;z-index:20;animation:slidein .28s var(--ease) both;min-width:0}
.panel-h{display:flex;align-items:center;gap:6px;padding:8px 10px 8px 14px;border-bottom:1px solid var(--line);min-height:48px}
.panel-h .nav{display:flex;gap:2px;margin-right:auto;align-items:center;font-size:12.5px;color:var(--fg-3)}
.panel-top{padding:16px 18px 0}
.panel-top .head{display:flex;gap:12px;align-items:flex-start}
.panel-top h2{margin:0;font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.panel-top .sub{color:var(--fg-2);margin:2px 0 0;overflow-wrap:anywhere}
.panel-top .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:12px 0 0}
.panel-chan{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.panel-chan .btn{padding-inline:9px}
.ptabs{display:flex;gap:2px;padding:12px 18px 0;border-bottom:1px solid var(--line)}
.ptabs button{height:32px;padding:0 10px;border-radius:var(--r) var(--r) 0 0;color:var(--fg-2);position:relative;display:inline-flex;align-items:center;gap:6px}
.ptabs button[aria-pressed="true"]{color:var(--fg)}
.ptabs button[aria-pressed="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--fg)}
.ptabs button:hover{background:var(--bg-hover)}
.panel-b{flex:1;overflow:auto;min-height:0;scrollbar-width:thin}
.composer{margin:14px 18px;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-raise);padding:10px 12px}
.composer .seg{margin-bottom:8px;flex-wrap:wrap}
.composer .ocs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.composer .ocs button{height:26px;padding:0 9px;border-radius:7px;border:1px solid var(--line-2);font-size:12.5px;color:var(--fg-2);background:var(--bg)}
.composer .ocs button:hover{border-color:var(--line-3);color:var(--fg)}
.composer .ocs button[aria-pressed="true"]{background:var(--bg-ink);color:var(--fg-ink);border-color:var(--bg-ink)}
.composer textarea{width:100%;border:0;background:transparent;resize:vertical;min-height:54px;font-size:14px;padding:4px 0;outline:none}
.composer .next{display:flex;gap:6px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}
.composer .next label{font-size:12px;color:var(--fg-3);margin-right:2px}
.composer .next input,.composer .next select{height:26px;border:1px solid var(--line-2);border-radius:6px;padding:0 6px;font-size:12.5px;background:var(--bg)}
.composer .next .btn{margin-left:auto}
.composer .tplrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.timeline{padding:4px 18px 24px;display:flex;flex-direction:column}
.tl-sec{font-size:12px;color:var(--fg-3);margin:12px 0 6px}
.tli{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);min-width:0}
.tli:last-child{border-bottom:0}
.tli .t{flex:1;min-width:0}
.tli .t .h{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tli .t .h b{font-weight:600}
.tli .t .h .d{color:var(--fg-3);font-size:12px;margin-left:auto;white-space:nowrap}
.tli .t p{margin:3px 0 0;color:var(--fg-2);white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px}
.tli .t .nx{font-size:12px;color:var(--fg-3);margin-top:3px}
.kv{padding:8px 18px 24px}
.kv .kvr{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px;align-items:center;min-height:34px;border-bottom:1px solid var(--line)}
.kv .kvr:last-child{border-bottom:0}
.kv .kvr label{font-size:12.5px;color:var(--fg-3);display:flex;align-items:center;gap:6px}
.kv .kvr label .i{width:13px;height:13px}
.kv .kvr input,.kv .kvr select{height:28px;border:1px solid transparent;border-radius:6px;padding:0 6px;background:transparent;font-size:14px;width:100%;min-width:0}
.kv .kvr input:hover,.kv .kvr select:hover{border-color:var(--line-2);background:var(--bg-raise)}
.kv .kvr input:focus,.kv .kvr select:focus{outline:none;border-color:var(--accent);background:var(--bg-raise);box-shadow:0 0 0 3px var(--ring)}
.kv .kvr .ro{font-size:13.5px;padding:0 6px;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kv .kvr .ro a{color:var(--link);text-decoration:none}
.kv-sec{font-size:12px;color:var(--fg-3);margin:14px 0 2px}
.panel-foot{border-top:1px solid var(--line);padding:8px 14px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.panel-foot .right{margin-left:auto;display:flex;gap:6px}

/* dialogs */
dialog{border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--bg-raise);color:var(--fg);padding:0;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 40px);box-shadow:var(--shadow);animation:rise .3s var(--ease) both}
dialog.sm{width:min(460px,calc(100vw - 32px))}
dialog.lg{width:min(920px,calc(100vw - 32px))}
dialog::backdrop{background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.dh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 12px}
.dh h3{margin:0;font-size:16px;font-weight:600}
.dh h3 span{display:block;color:var(--fg-3);font-weight:500;font-size:13px;margin-top:2px}
.db{padding:0 20px 8px;overflow:auto;max-height:calc(100vh - 180px)}
.df{display:flex;align-items:center;gap:8px;padding:12px 20px 16px;border-top:1px solid var(--line)}
.df .msg{flex:1;font-size:13px;color:var(--t-red);min-width:0}
.fset{display:flex;flex-direction:column;gap:10px}
.fset h4{margin:4px 0 0;font-size:12px;color:var(--fg-3);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:560px){.row2{grid-template-columns:minmax(0,1fr)}}
.fgrid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 24px}
@media (max-width:760px){.fgrid2{grid-template-columns:minmax(0,1fr)}}
.req{color:var(--t-red)}
.slots{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.slot{height:28px;padding:0 10px;border-radius:7px;border:1px solid var(--line-2);font-size:12.5px;color:var(--fg-2);background:var(--bg)}
.slot:hover{border-color:var(--line-3);color:var(--fg)}
.slot[aria-pressed="true"]{background:var(--bg-ink);color:var(--fg-ink);border-color:var(--bg-ink)}
.steps{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.steps li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;animation:rise .3s var(--ease) both;animation-delay:calc(var(--d,0) * 40ms)}
.steps .ic{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;flex:none;border:1px solid var(--line-3);color:var(--fg-3)}
.steps li[data-s="busy"] .ic{border-color:var(--t-amber);color:var(--t-amber)}
.steps li[data-s="ok"] .ic{background:var(--t-green);border-color:var(--t-green);color:#fff}
.steps li[data-s="err"] .ic{background:var(--t-red);border-color:var(--t-red);color:#fff}
.steps li[data-s="skip"]{color:var(--fg-3)}
.steps .m{display:block;font-size:12px;color:var(--fg-3)}
.steps li[data-s="err"] .m{color:var(--t-red)}
.map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px}
@media (max-width:640px){.map{grid-template-columns:minmax(0,1fr)}}
.mrow{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px;align-items:center;font-size:13px}
.mrow label{color:var(--fg-2)}
.mrow select{height:28px;border:1px solid var(--line-2);border-radius:7px;padding:0 6px;background:var(--bg);font-size:13px;min-width:0;max-width:100%}
.mrow .smp{grid-column:2;font-size:11.5px;color:var(--fg-4);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-4px}
.sumline{font-size:13.5px;color:var(--fg-2);margin:10px 0 0}
.sumline b{color:var(--fg);font-weight:600}
.prog{height:6px;border-radius:3px;background:var(--t-grey-bg);overflow:hidden;margin:8px 0}
.prog i{display:block;height:100%;width:0;background:var(--accent-fill);transition:width .4s var(--ease)}
.pal{width:min(620px,calc(100vw - 32px));margin-top:10vh}
.pal .search{height:44px;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0 16px;background:transparent}
.pal .search input{width:100%;font-size:15px}
.pal-list{max-height:min(420px,60vh);overflow:auto;padding:6px}
.pal-sec{font-size:11.5px;color:var(--fg-3);padding:8px 10px 4px;letter-spacing:.04em;text-transform:uppercase}
.pal-item{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px;border-radius:var(--r);cursor:pointer;min-width:0}
.pal-item:hover,.pal-item[aria-selected="true"]{background:var(--bg-hover)}
.pal-item .t{flex:1;min-width:0}
.pal-item .t b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-item .t span{display:block;font-size:12px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dlg-kv{display:grid;grid-template-columns:110px minmax(0,1fr);gap:6px 10px;font-size:13.5px}
.dlg-kv dt{color:var(--fg-3)}
.dlg-kv dd{margin:0;overflow-wrap:anywhere}

/* toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--bg-ink);color:var(--fg-ink);padding:9px 14px;border-radius:10px;font-size:13.5px;z-index:60;box-shadow:var(--shadow);animation:rise .3s var(--ease) both;max-width:calc(100% - 32px);display:flex;gap:10px;align-items:center}
.toast.out{animation:fadein .3s var(--ease) reverse both}
.toast button{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* mobile */
.sb-open{display:none}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sb{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;transform:translateX(-100%);box-shadow:var(--shadow)}
  .shell.sb-mobile-open .sb{transform:none;display:flex}
  .shell.sb-hidden .sb{display:flex}
  .sb-open{display:grid}
  .scrim{position:fixed;inset:0;background:var(--scrim);z-index:39}
  .conn{display:none}
  table.grid{min-width:720px}
}

/* ---------- v2.1: iconen, knoppen, campagnes ---------- */
:root{--hi:rgba(255,255,255,.7);--sb-on:#FFFFFF;--sb-ring:0 0 0 1px var(--line),0 1px 2px rgba(0,0,0,.06);--pri-a:#3B7DF5;--pri-b:#2563E8;--pri-line:#1F5BD8;--pri-sh:rgba(37,99,232,.35)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hi:rgba(255,255,255,.06);--sb-on:rgba(255,255,255,.08);--sb-ring:none;--pri-a:#3F7FF2;--pri-b:#2A66E0;--pri-line:#2A66E0;--pri-sh:rgba(0,0,0,.4)}}
:root[data-theme="dark"]{--hi:rgba(255,255,255,.06);--sb-on:rgba(255,255,255,.08);--sb-ring:none;--pri-a:#3F7FF2;--pri-b:#2A66E0;--pri-line:#2A66E0;--pri-sh:rgba(0,0,0,.4)}
svg.i{stroke-width:1.5}
svg.i.fill{fill:currentColor;stroke:none}
[data-icon]{display:inline-flex;align-items:center;gap:7px}
span[data-icon]{vertical-align:middle}
th span[data-icon],h3 span[data-icon]{color:var(--fg-3)}
th span[data-icon] .i,h3 span[data-icon] .i{width:14px;height:14px}
.card-h h3 span[data-icon]{margin-right:2px}
.ws-chev .i{width:14px;height:14px;color:var(--fg-3)}
.drop-ic{display:flex;justify-content:center;margin-bottom:8px}
.drop-ic .i{width:26px;height:26px;color:var(--fg-3)}
/* kanaalicoon: kleur in het icoon zelf, geen vlak */
.ch{display:inline-grid;place-items:center;width:20px;height:20px;flex:none;color:var(--fg-3)}
.ch .i{width:16px;height:16px}
.ch.lg{width:24px;height:24px}
.ch.lg .i{width:18px;height:18px}
.ch-bel{color:var(--bel)}.ch-li{color:var(--li)}.ch-mail{color:var(--mail)}.ch-wa{color:var(--wa)}.ch-note{color:var(--fg-2)}.ch-sys{color:var(--fg-4)}
/* de kleur van wat er gebeurde, zoals de knoppen in het belscherm */
.ch.u-red{color:var(--t-red)}.ch.u-green{color:var(--t-green)}.ch.u-amber{color:var(--t-amber)}
.chan{gap:6px}
.btn.c-bel .i{color:var(--bel)}.btn.c-li .i{color:var(--li)}.btn.c-mail .i{color:var(--mail)}.btn.c-wa .i{color:var(--wa)}
/* knoppen */
.btn{height:30px;padding:0 11px;background:var(--bg-raise);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 1px 0 var(--hi);gap:7px}
.btn:hover{background:var(--bg-sunk);border-color:var(--line-3)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn .i{width:15px;height:15px;color:var(--fg-2)}
.btn.primary{background:linear-gradient(180deg,var(--pri-a),var(--pri-b));border-color:var(--pri-line);color:var(--accent-fg);box-shadow:0 1px 2px var(--pri-sh),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.primary .i{color:var(--accent-fg)}
.btn.primary:hover{filter:brightness(1.06);background:linear-gradient(180deg,var(--pri-a),var(--pri-b));border-color:var(--pri-line)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--bg-hover);border-color:transparent}
.btn.danger .i{color:var(--t-red)}
.btn.sm{height:26px;padding:0 9px;gap:5px}
.btn.lg{height:34px;padding:0 14px}
.icon-btn{border:1px solid transparent}
.icon-btn:hover{border-color:var(--line-2);background:var(--bg-raise);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.icon-btn .i{width:16px;height:16px}
.seg{background:var(--bg-sunk);box-shadow:inset 0 1px 1px rgba(0,0,0,.04)}
.seg button[aria-pressed="true"]{box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
select.sel{background-color:var(--bg-raise);box-shadow:inset 0 1px 0 var(--hi)}
.search{box-shadow:inset 0 1px 0 var(--hi)}
.sb-search{box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 1px 0 var(--hi)}
/* zijbalk */
.sb-nav a[aria-current="page"],.sb-foot a[aria-current="page"]{background:var(--sb-on);box-shadow:var(--sb-ring)}
.sb-nav a .i,.sb-foot a .i{width:16px;height:16px;color:var(--fg-2)}
.sb-nav a[aria-current="page"] .i{color:var(--accent)}
.sb-sec button .i{width:13px;height:13px}
.sb-nav a.lst .sq{background:var(--bg-raise);border:1px solid var(--line-2);color:var(--fg-2)}
.sb-nav a.lst .sq.on{border-color:var(--t-green);color:var(--t-green)}
.sb-nav a.lst .sq.paused{border-color:var(--t-amber);color:var(--t-amber)}
/* uitkomsten */
.outcomes{gap:10px}
.oc{height:56px;padding:0 12px 0 11px;border-radius:12px;gap:10px;justify-content:flex-start;background:var(--bg-raise);box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 1px 0 var(--hi)}
.oc .i{width:18px;height:18px;flex:none}
.oc .l{flex:1;text-align:left}
.oc.nb .i{color:var(--t-red)}.oc.ges .i{color:var(--t-green)}.oc.tb .i{color:var(--t-amber)}
.oc.main{background:linear-gradient(180deg,var(--pri-a),var(--pri-b));border-color:var(--pri-line);color:var(--accent-fg);box-shadow:0 1px 2px var(--pri-sh),inset 0 1px 0 rgba(255,255,255,.18)}
.oc.main .i{color:var(--accent-fg)}
.oc.main:hover{filter:brightness(1.06);background:linear-gradient(180deg,var(--pri-a),var(--pri-b))}
.oc:active{transform:translateY(1px);box-shadow:none}
.tx .i{width:13px;height:13px}
/* pitch */
/* tegels en tabellen */
.tile{box-shadow:0 1px 2px rgba(0,0,0,.03)}
.tile .l .i{width:14px;height:14px}
.tile .v{font-size:28px;line-height:32px}
.grid td .act{display:inline-flex;align-items:center;gap:7px;min-width:0}
.grid td .act span{overflow:hidden;text-overflow:ellipsis}
.grid td .act small{color:var(--fg-3);font-size:12px;flex:none}
.ava-i{border:1px solid var(--line);background:var(--bg-sunk)}
.notice.plain{background:var(--bg-sunk);border-color:var(--line)}
.tli .ch.lg{margin-top:0}
.set-nav a .i{width:16px;height:16px;color:var(--fg-2)}
.set-nav a[aria-current="page"] .i{color:var(--accent)}
.pal-item .ic .i{width:13px;height:13px}
.badge{box-shadow:0 1px 2px rgba(37,99,232,.3)}

/* ---------- v2.2: velden met validatie ---------- */
.pf-row{display:flex;gap:6px}
.pf-cc{width:112px;flex:none;padding-right:26px}
.pf-in{flex:1;min-width:0}
.ferr{display:block;font-size:12px;color:var(--t-red);margin-top:4px}
.ferr:empty{display:none}
.in.invalid{border-color:var(--t-red)!important;box-shadow:0 0 0 3px var(--t-red-bg)!important}
.bad{color:var(--t-red)}
.grid td .bad{white-space:nowrap}
.kv .kvr .pf{min-width:0}
.kv .kvr .pf-cc{width:96px;height:28px;border:1px solid transparent;border-radius:6px;background:transparent;font-size:13px}
.kv .kvr .pf-cc:hover,.kv .kvr .pf-in:hover{border-color:var(--line-2);background:var(--bg-raise)}
.kv .kvr .pf-in{height:28px;border:1px solid transparent;border-radius:6px;padding:0 6px;background:transparent;font-size:14px}
.kv .kvr .pf-in:focus,.kv .kvr .pf-cc:focus{outline:none;border-color:var(--accent);background:var(--bg-raise);box-shadow:0 0 0 3px var(--ring)}
.kv .kvr .ferr{grid-column:2}

/* spreuk op Vandaag */
.quote{margin:8px 0 0;display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--fg);letter-spacing:-.005em;min-height:22px}
.quote span[data-icon] .i{width:15px;height:15px;color:var(--accent)}
.quote .q{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.quote .q.out{opacity:0;transform:translateY(4px)}

.h1q{color:var(--accent);font-weight:600;transition:opacity .7s var(--ease)}
.h1q.out{opacity:0}

/* ---------- v2.3: grotere tekst zoals Attio ---------- */
body{font-size:15px;line-height:22px}
.sb-nav a,.sb-foot a{height:32px;font-size:15px}
.sb-sec{font-size:12.5px;height:26px}
.ws-name{font-size:15px}
.sb-search{height:32px;font-size:14.5px}
/* Het teken blijft 11px: dan is een hoofdletter precies 8 pixels hoog en valt de marge boven en onder op hele pixels. */
kbd{--k:20px}
.cnt{font-size:13px}
.badge{font-size:11.5px;min-width:19px;height:19px}
.crumb b{font-size:15px}
.crumb .sub{font-size:15px}
.btn{height:32px;font-size:14.5px;padding:0 12px}
.btn.sm{height:28px;font-size:13.5px;padding:0 10px}
.btn.lg{height:36px;font-size:15px}
.icon-btn{width:30px;height:30px}
.vtabs button{height:30px;font-size:14.5px}
.seg button{height:26px;font-size:14px}
select.sel{height:30px;font-size:14.5px}
.search{height:30px}
.search input{font-size:14.5px}
table.grid{font-size:15px}
.grid th{font-size:13.5px;height:34px}
.grid td{height:40px}
.grid td .sub{font-size:13px;line-height:16px}
.grid-foot{font-size:13.5px;height:38px}
.pill{height:24px;font-size:13.5px;padding:0 9px 0 8px}
.chan{font-size:13.5px}
.tile{padding:16px 18px}
.tile .l{font-size:13.5px}
.tile .v{font-size:32px;line-height:36px}
.tile .d{font-size:13.5px}
.card-h h3{font-size:15px}
.row .t span{font-size:13.5px}
.row .when{font-size:13.5px}
.empty{font-size:14.5px}
.notice{font-size:14.5px}
h1.page{font-size:24px;line-height:30px}
.greet p{font-size:14px}
.h1q{font-size:24px}
.tel{font-size:26px}
.oc{height:58px;font-size:15px}
.tx{font-size:13.5px}
.mini{font-size:14.5px}
.mini th{font-size:13px}
.panel-top h2{font-size:20px;line-height:26px}
.panel-top .sub{font-size:15px}
.ptabs button{font-size:15px;height:34px}
.composer .seg button{font-size:14px}
.composer .ocs button{height:28px;font-size:13.5px}
.composer textarea{font-size:15px}
.composer .next label{font-size:13px}
.tli .t p{font-size:14.5px}
.tli .t .h .d{font-size:13px}
.tl-sec{font-size:13px}
.kv .kvr label{font-size:13.5px}
.kv .kvr input,.kv .kvr select{font-size:15px;height:30px}
label.f{font-size:13px}
.in,input.in,textarea.in,select.in{font-size:15px;height:34px}
textarea.in{height:auto}
.dh h3{font-size:17px}
.dh h3 span{font-size:13.5px}
.steps li{font-size:14.5px}
.set-sec h2{font-size:17px}
.set-sec > p{font-size:14.5px}
.swrow b{font-size:15px}
.swrow span{font-size:13.5px}
.pal-item .t b{font-size:15px}
.pal-item .t span{font-size:13px}
.cal-dh{font-size:13px}
.cal-dh b{font-size:17px}
.ev{font-size:13px}
.kcol .khead{font-size:15px}
.deal b{font-size:15px}
.deal span{font-size:13.5px}

/* ---------- v2.3: werkruimtemenu ---------- */
.ws-wrap{position:relative;flex:1;min-width:0}
.ws{width:100%}
.menu{position:absolute;left:0;top:calc(100% + 6px);width:290px;background:var(--bg-raise);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow);padding:6px;z-index:60;animation:rise .18s var(--ease) both}
.menu-ws{display:flex;align-items:center;gap:10px;padding:10px 10px;font-weight:600;font-size:15px}
.menu-ws .ws-ava{width:26px;height:26px;font-size:11px;border-radius:7px}
.menu-ws span:nth-child(2){flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-check .i{width:18px;height:18px;color:var(--accent)}
.menu-sep{height:1px;background:var(--line);margin:4px 6px}
.menu-item{display:flex;align-items:center;gap:11px;width:100%;height:38px;padding:0 10px;border-radius:9px;font-size:15px;color:var(--fg);text-decoration:none;text-align:left}
.menu-item:hover{background:var(--bg-hover)}
.menu-item .i{width:17px;height:17px;color:var(--fg-2)}
.menu-item.static{cursor:default}
.menu-item.static:hover{background:transparent}
.menu-item .l{flex:1}
.menu-item .seg button{width:30px;padding:0;height:24px}
.menu-item .seg button .i{width:14px;height:14px}

/* ---------- v2.3: instellingen over de volle breedte ---------- */
.shell.settings-mode{grid-template-columns:minmax(0,1fr)}
.shell.settings-mode .sb,.shell.settings-mode .top{display:none}
.shell.settings-mode .content{overflow:hidden}
.settings{display:grid;grid-template-columns:300px minmax(0,1fr);height:100%;min-height:0}
#v-instellingen{height:100%}
.set-nav{border-right:1px solid var(--line);padding:10px 10px 20px;background:var(--bg-side);overflow:auto;scrollbar-width:thin}
.set-head{display:flex;align-items:center;gap:6px;height:36px;padding:0 2px;margin-bottom:8px}
.set-head b{font-size:17px;font-weight:600}
.set-search{margin:0 2px 10px;height:34px}
.set-nav a{height:34px;font-size:15px}
.set-nav a[hidden]{display:none}
.set-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.set-top{height:48px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 20px;flex:none}
.set-body{flex:1;overflow:auto;padding:40px 48px 80px;max-width:none;scrollbar-width:thin}
.set-body > *{max-width:1000px;margin-left:auto;margin-right:auto}
.set-title{margin-bottom:28px;padding-bottom:22px;border-bottom:1px solid var(--line)}
.set-title h1{font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;margin:0 0 4px}
.set-title p{margin:0;color:var(--fg-2);font-size:15px}
.set-sec{margin-bottom:34px}
.set-tools{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.ws-ava.xl{width:56px;height:56px;border-radius:14px;font-size:18px}
.ava.lg{width:56px;height:56px}
.conn-list{display:flex;flex-direction:column;gap:8px}
.conn-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-raise);flex-wrap:wrap}
.conn-row .t{flex:1;min-width:200px}
.conn-row .t b{display:block;font-weight:600}
.conn-row .t span{display:block;font-size:13.5px;color:var(--fg-3)}
.conn-logo{width:40px;height:40px;border-radius:10px;background:var(--bg-ink);color:var(--fg-ink);display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
/* Een merklogo staat er in zijn eigen kleuren, zonder tegel erachter. */
.conn-logo.merk{background:none;border-radius:0}
.conn-logo.merk svg{width:34px;height:34px;display:block}
.dangerzone{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:14px 16px;border:1px solid var(--t-red);border-radius:var(--r-lg);background:var(--t-red-bg);flex-wrap:wrap}
.dangerzone b{display:block;font-weight:600}
.dangerzone span{display:block;font-size:13.5px;color:var(--fg-2)}
.dangerzone .btn.danger{background:var(--t-red);border-color:var(--t-red);color:#fff}
.dangerzone .btn.danger .i{color:#fff}
.tcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:760px}
@media (max-width:760px){.tcards{grid-template-columns:minmax(0,1fr)}}
.tcard{border:1px solid var(--line-2);border-radius:14px;padding:10px;background:var(--bg-raise);text-align:left;transition:border-color .15s,box-shadow .15s}
.tcard:hover{border-color:var(--line-3)}
.tcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.tcard-l{display:flex;align-items:center;justify-content:center;gap:8px;height:34px;font-weight:600;font-size:15px}
.tcard-l .i{color:var(--fg-2)}
.tprev{display:grid;grid-template-columns:34% 1fr;gap:4px;height:96px;border-radius:9px;padding:6px;overflow:hidden;border:1px solid var(--line)}
.tprev.light{background:#F7F7F8}
.tprev.dark{background:#141517}
.tprev.auto{background:linear-gradient(90deg,#F7F7F8 50%,#141517 50%)}
.tp-side,.tp-main{display:flex;flex-direction:column;gap:5px;padding:4px}
.tprev i{display:block;height:6px;border-radius:3px;background:rgba(127,127,127,.35)}
.tprev i.w{height:10px;background:var(--accent-fill)}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:50%;background:var(--c);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--line-3)}
.swatch.on{box-shadow:0 0 0 2px var(--c)}
:root[data-accent="teal"]{--accent:#0D99BD;--accent-hover:#0B86A5;--link:#0D99BD;--accent-soft:rgba(13,153,189,.12);--ring:rgba(13,153,189,.35);--pri-a:#22B3D8;--pri-b:#0D99BD;--pri-line:#0B86A5;--pri-sh:rgba(13,153,189,.35)}
:root[data-accent="oranje"]{--accent:#F2730A;--accent-hover:#D96508;--link:#E0690A;--accent-soft:rgba(242,115,10,.12);--ring:rgba(242,115,10,.35);--pri-a:#FF8A2E;--pri-b:#F2730A;--pri-line:#D96508;--pri-sh:rgba(242,115,10,.35)}
:root[data-accent="roze"]{--accent:#E24C8B;--accent-hover:#C93E78;--link:#E24C8B;--accent-soft:rgba(226,76,139,.12);--ring:rgba(226,76,139,.35);--pri-a:#F063A0;--pri-b:#E24C8B;--pri-line:#C93E78;--pri-sh:rgba(226,76,139,.35)}
:root[data-accent="paars"]{--accent:#7A4DF5;--accent-hover:#6A3EE0;--link:#7A4DF5;--accent-soft:rgba(122,77,245,.12);--ring:rgba(122,77,245,.35);--pri-a:#8E66F7;--pri-b:#7A4DF5;--pri-line:#6A3EE0;--pri-sh:rgba(122,77,245,.35)}
:root[data-accent="groen"]{--accent:#1A9E55;--accent-hover:#168A4A;--link:#1A9E55;--accent-soft:rgba(26,158,85,.12);--ring:rgba(26,158,85,.35);--pri-a:#27B465;--pri-b:#1A9E55;--pri-line:#168A4A;--pri-sh:rgba(26,158,85,.35)}
.chiplist{display:flex;flex-direction:column;gap:10px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:28px}
.chipx{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 6px 0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-raise);font-size:14px}
.chipx.time{font-variant-numeric:tabular-nums}
.chipx .i{width:13px;height:13px;color:var(--fg-3)}
.chipx button{width:20px;height:20px;border-radius:5px;display:grid;place-items:center;color:var(--fg-3)}
.chipx button:hover{background:var(--bg-hover);color:var(--fg)}
.chipadd{display:flex;gap:6px;align-items:center}
.chipadd .in{height:30px}
.win-grid{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-raise);overflow:hidden}
.win-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.win-row:last-child{border-bottom:0}
.win-day{font-weight:600}
@media (max-width:760px){.win-row{grid-template-columns:minmax(0,1fr)}}
.spr-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.spr-row{display:flex;align-items:center;gap:8px}
.spr-n{width:22px;text-align:right;font-size:13px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.spr-row .in{flex:1}
/* vrije momenten bij het inboeken */
.slotgrid{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:var(--r-lg);padding:10px 12px;background:var(--bg-raise)}
.slotday{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:center}
.slotday .d{font-size:13.5px;color:var(--fg-2);font-weight:500}
.slotday .d.today{color:var(--accent)}
.slotday .s{display:flex;gap:6px;flex-wrap:wrap}
.slot{height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);font-size:13.5px;color:var(--fg);background:var(--bg);display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.slot .i{width:13px;height:13px}
.slot.free{border-color:var(--t-green);color:var(--fg)}
.slot.free .i{color:var(--t-green)}
.slot.free:hover{background:var(--t-green-bg)}
.slot.busy{color:var(--fg-3);text-decoration:line-through;cursor:not-allowed;background:var(--bg-sunk)}
.slot.busy .i{color:var(--t-red)}
.slot.past{color:var(--fg-4);cursor:not-allowed;border-style:dashed}
.slot[aria-pressed="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fg)}
.slot[aria-pressed="true"] .i{color:var(--accent-fg)}
.slotlegend{display:flex;gap:14px;font-size:12.5px;color:var(--fg-3);flex-wrap:wrap;margin-top:6px}
.slotlegend .i{width:12px;height:12px;vertical-align:-2px;margin-right:4px}
.digest{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-raise);padding:12px 16px;margin-bottom:16px}
.digest b{font-weight:600}
.digest .i{color:var(--accent)}
.digest .muted{font-size:13.5px}
@media (max-width:900px){
.settings{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
.set-nav{display:flex;flex-direction:column;gap:0;padding:8px 12px 10px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}
.set-nav .set-head{margin-bottom:6px}
.set-nav .set-search{display:none}
.set-nav .sb-sec{display:none}
.set-nav .set-links{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.set-nav .set-links a{flex:none;height:32px;padding:0 10px;font-size:14px}
.set-body{padding:22px 16px 60px}
.set-title h1{font-size:24px;line-height:30px}
.set-top{padding:0 16px}
.fgrid{grid-template-columns:minmax(0,1fr)}
.conn-row{padding:12px}
.slotday{grid-template-columns:minmax(0,1fr)}
}

/* ---------- v2.4: tekst op Attio-maat, menu, afbeeldingen, instellingenlay-out ---------- */
body{font-size:16px;line-height:24px}
.sb-nav a,.sb-foot a{height:34px;font-size:16px;gap:10px}
.sb-nav a .i,.sb-foot a .i{width:17px;height:17px}
.sb-sec{font-size:13px;height:28px}
.ws-name{font-size:16px}
.ws-ava{width:24px;height:24px;border-radius:7px;font-size:10.5px;overflow:hidden}
.ws-ava.img{background:transparent;border:1px solid var(--line)}
.ws-ava img{width:100%;height:100%;object-fit:cover;display:block}
.sb-search{height:34px;font-size:15px}
.me b{font-size:14.5px;line-height:18px}
.me span{font-size:12.5px;line-height:16px}
.me img,.ava{width:28px;height:28px}
.cnt{font-size:13.5px}
.crumb b,.crumb .sub{font-size:16px}
.btn{height:34px;font-size:15px;padding:0 13px;gap:8px;justify-content:center;line-height:1}
.btn .i{width:16px;height:16px}
.btn.sm{height:30px;font-size:14px;padding:0 11px;gap:6px}
.btn.lg{height:38px;font-size:16px}
.icon-btn{width:32px;height:32px}
.vtabs button{height:32px;font-size:15px}
.seg button{height:28px;font-size:14.5px}
select.sel{height:32px;font-size:15px}
.search{height:32px}
.search input{font-size:15px}
table.grid{font-size:16px}
.grid th{font-size:14px;height:36px}
.grid td{height:42px}
.grid td .sub{font-size:14px;line-height:17px}
.grid-foot{font-size:14px;height:40px}
.pill{height:26px;font-size:14px;padding:0 10px 0 9px;line-height:1}
.chan{font-size:14px}
.tile .l{font-size:14px}
.tile .v{font-size:34px;line-height:38px}
.tile .d{font-size:14px}
.card-h h3{font-size:16px}
.row .t span{font-size:14px}
.row .when{font-size:14px}
.empty,.notice{font-size:15px}
h1.page{font-size:26px;line-height:32px}
.greet p{font-size:15px}
.h1q{font-size:26px}
.tel{font-size:28px}
.oc{height:60px;font-size:16px}
.tx{font-size:14px}
.mini{font-size:15px}
.mini th{font-size:13.5px}
.panel-top h2{font-size:21px;line-height:27px}
.panel-top .sub{font-size:16px}
.ptabs button{font-size:16px;height:36px}
.composer textarea{font-size:16px}
.composer .next label{font-size:14px}
.tli .t p{font-size:15px}
.tli .t .h .d,.tl-sec{font-size:13.5px}
.kv .kvr label{font-size:14px}
.kv .kvr input,.kv .kvr select{font-size:16px;height:32px}
label.f{font-size:14px;color:var(--fg-2);margin-bottom:6px}
.in,input.in,textarea.in,select.in{font-size:16px;height:36px}
textarea.in{height:auto}
.dh h3{font-size:18px}
.dh h3 span{font-size:14px}
.steps li{font-size:15px}
.pal-item .t b{font-size:16px}
.pal-item .t span{font-size:13.5px}
.slot{height:32px;font-size:14px}
.slotday .d{font-size:14px}
.slotlegend{font-size:13px}
.digest{font-size:15px}
.digest .muted{font-size:14px}
.conn-row .t span{font-size:14px}
.chipx{font-size:14.5px;height:30px}
.swrow b{font-size:16px}
.swrow span{font-size:14px}
.swrow{padding:12px 0}
/* instellingen */
.set-head b{font-size:18px}
.set-nav a{height:36px;font-size:16px}
.set-nav .set-links a{gap:10px}
.set-top{height:50px}
.set-body{padding:36px 48px 90px}
.set-title{margin-bottom:34px;padding-bottom:24px}
.set-title h1{font-size:30px;line-height:36px}
.set-title p{font-size:16px}
.set-sec{margin-bottom:0;padding-bottom:34px}
.set-sec + .set-sec,.set-foot + .set-sec,.set-tools + .set-sec{border-top:1px solid var(--line);padding-top:30px}
.set-sec h2{font-size:18px;line-height:24px;margin-bottom:3px}
.set-sec > p{font-size:15px;line-height:22px;margin-bottom:18px;max-width:72ch}
.set-foot{margin:-10px 0 34px;gap:12px}
.set-foot .state{font-size:14px}
.fgrid{gap:16px 20px}
.dangerzone{padding:16px 18px}
.dangerzone > div{flex:1;min-width:240px}
.dangerzone span{margin-top:2px}
.notice.plain{line-height:22px}
/* menu zoals Attio: vaste positie, compact */
.menu{position:fixed;left:auto;top:auto;width:280px;padding:4px;border-radius:12px;animation:rise .16s var(--ease) both}
.menu-ws{height:38px;padding:0 8px;gap:10px;font-size:15px;font-weight:600}
.menu-ws .ws-ava{width:22px;height:22px;font-size:9.5px;border-radius:6px}
.menu-check .i{width:16px;height:16px}
.menu-sep{margin:4px 4px}
.menu-item{height:34px;padding:0 8px;gap:11px;font-size:15px;border-radius:7px;font-weight:500}
.menu-item .i{width:16px;height:16px}
.menu-item .seg{padding:2px}
.menu-item .seg button{width:28px;height:22px}
.menu-item .seg button .i{width:13px;height:13px}
/* afbeeldingen */
.imgfield{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.imgprev{width:72px;height:72px;border-radius:16px;background:var(--bg-ink);color:var(--fg-ink);display:grid;place-items:center;font-size:22px;font-weight:700;letter-spacing:.02em;overflow:hidden;flex:none;border:1px solid transparent}
.imgprev.round{border-radius:50%}
.imgprev.has{background:var(--bg-sunk);border-color:var(--line)}
.imgprev img{width:100%;height:100%;object-fit:cover;display:block}
.imgprev .i{width:26px;height:26px;color:var(--fg-ink)}
.imgfield .t{flex:1;min-width:220px}
.imgfield .t b{display:block;font-weight:600}
.imgfield .t span{display:block;font-size:14px;color:var(--fg-3);line-height:20px;max-width:60ch}
.imgfield .acts{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
@media (max-width:900px){.set-body{padding:22px 16px 70px}.set-title h1{font-size:26px;line-height:32px}}

/* ---------- v2.4.1: thema-keuze in het menu, zijbalk sluiten ---------- */
.menu-item .v{color:var(--fg-3);font-size:14px;font-weight:500}
.menu-item .chev{display:inline-flex;transition:transform .15s var(--ease)}
.menu-item .chev .i{width:14px;height:14px;color:var(--fg-4)}
.menu-item[aria-expanded="true"] .chev{transform:rotate(90deg)}
.menu-sub{display:flex;flex-direction:column;gap:1px;padding:3px;margin:2px 0;border-radius:9px;background:var(--bg-sunk)}
.menu-sub .menu-item{height:32px;font-size:14.5px;padding-left:10px}
.menu-sub .menu-item .ck{display:none;margin-left:auto}
.menu-sub .menu-item[aria-checked="true"]{background:var(--bg-raise);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--line)}
.menu-sub .menu-item[aria-checked="true"] .ck{display:inline-flex}
.menu-sub .menu-item .ck .i{width:15px;height:15px;color:var(--accent)}
@media (max-width:900px){#sbShow{display:none}.sb-top #sbHide{display:grid}}
/* ingeklapte zijbalk: één kolom, anders valt de inhoud in de lege kolom van 0 px */
.shell.sb-hidden{grid-template-columns:minmax(0,1fr)}
.shell > .main{min-width:0}
.sb{transition:none}
@media (max-width:900px){.sb{transition:transform .25s var(--ease)}}

/* ---------- v2.4.2: schil robuust, vinkjes, lege staten ---------- */
.sb{grid-area:1/1/2/2}
.shell > .main{grid-area:1/2/2/3}
.shell.sb-hidden > .main,.shell.settings-mode > .main{grid-area:1/1/2/2}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:39}
@media (min-width:901px){.scrim{display:none!important}.sb-open{display:none!important}.sb{position:static;transform:none!important}}
@media (max-width:900px){.shell > .main{grid-area:1/1/2/2}}
.steps li{align-items:flex-start}
.steps .ic{width:20px;height:20px;margin-top:2px;line-height:1;font-size:12px}
.steps .ic .i{width:12px;height:12px;stroke-width:2.4}
.steps li[data-s="busy"] .ic{border-color:var(--t-amber);border-top-color:transparent;animation:spin .8s linear infinite;color:transparent}
div.empty{display:flex;flex-direction:column;align-items:center;gap:6px}
div.empty b{display:block;color:var(--fg)}
div.empty .btn{margin-top:6px}
.oc{flex-direction:row;white-space:nowrap;min-width:0}
.oc .l{overflow:hidden;text-overflow:ellipsis}

/* ---------- v2.5: knoppen, zoekpalet, importwizard, favorieten, meldingen ---------- */
button{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.icon-btn[data-icon],.icon-btn{display:grid;place-items:center;gap:0}
.icon-btn.sm{width:26px;height:26px}
.icon-btn.sm .i{width:14px;height:14px}
.btn[data-icon]{display:inline-flex;gap:8px;justify-content:center}
/* zijbalk: zoeken + bel, inklapbare secties, favorieten */
.sb-srow{display:flex;align-items:center;gap:6px;margin:2px 8px 8px}
.sb-srow .sb-search{flex:1;margin:0}
.sb-bell{position:relative;width:34px;height:34px;border:1px solid var(--line-2);background:var(--bg-raise);border-radius:var(--r);color:var(--fg-3);box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 1px 0 var(--hi)}
.sb-bell:hover{color:var(--fg);border-color:var(--line-3)}
.sb-bell .bdot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent-fill);color:var(--accent-fg);font-size:11px;font-weight:700;display:grid;place-items:center;line-height:1;border:2px solid var(--bg-side)}
.sb-fold{padding-left:2px}
.sb-fold .fold-btn{display:flex;align-items:center;gap:6px;height:100%;padding:0 4px;border-radius:6px;color:var(--fg-2);font-size:13px;font-weight:500;flex:1;justify-content:flex-start}
.sb-fold .fold-btn:hover{color:var(--fg);background:var(--bg-hover)}
.sb-fold .chev .i{width:13px;height:13px;transition:transform .15s var(--ease)}
.sb-fold.closed .chev .i{transform:rotate(-90deg)}
.sb-fold > button[data-icon]{width:22px;height:22px;border-radius:5px;display:grid;place-items:center;color:var(--fg-3);flex:none}
.sb-nav a.favl .i{color:var(--t-amber);fill:var(--t-amber);width:15px;height:15px}
.fav{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;color:var(--fg-4)}
.fav .i{width:16px;height:16px}
.fav:hover{color:var(--t-amber);background:var(--bg-hover)}
.fav.on{color:var(--t-amber)}
.fav.on .i{fill:var(--t-amber)}
.grid td.favc,.grid th.favc{width:36px;padding-right:0}
/* meldingen */
.menu.notif{width:400px;padding:0;overflow:hidden}
.notif-h{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 6px}
.notif-h b{font-size:18px;font-weight:600}
.notif-tabs{padding:4px 12px 8px;border-bottom:1px solid var(--line)}
.notif-tabs button[aria-pressed="true"]{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:transparent}
.notif-tabs .cnt{font-size:inherit;color:inherit}
.notif-list{max-height:min(480px,65vh);overflow:auto;padding:4px 0 6px}
.notif-r{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);justify-content:flex-start}
.notif-r:last-child{border-bottom:0}
.notif-r:hover{background:var(--bg-hover)}
.notif-r.unread{background:var(--accent-soft)}
.notif-ava{position:relative;width:40px;height:40px;flex:none}
.notif-ava img,.notif-ava .ini{width:40px;height:40px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--t-grey-bg);color:var(--fg-2);font-weight:700;font-size:13px}
.notif-ic{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--bg-raise);color:#fff;background:var(--t-grey)}
.notif-ic .i{width:11px;height:11px}
.notif-ic.green{background:var(--t-green)}.notif-ic.blue{background:var(--t-blue);color:var(--accent-fg)}.notif-ic.amber{background:var(--t-amber)}
.notif-r .t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.notif-r .x{font-size:15px;line-height:22px;color:var(--fg-2)}
.notif-r .x b{color:var(--fg);font-weight:600}
.notif-r .w{font-size:13.5px;color:var(--fg-3)}
/* zoekpalet: twee panelen */
dialog.pal{width:min(1000px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 40px));margin-top:6vh;padding:0;overflow:hidden}
dialog.pal[open]{display:flex;flex-direction:column}
.pal-top{display:flex;align-items:center;gap:12px;height:58px;padding:0 20px;border-bottom:1px solid var(--line);flex:none}
.pal-top .i{width:18px;height:18px;color:var(--fg-3)}
.pal-top input{flex:1;border:0;background:transparent;outline:none;font-size:18px;min-width:0}
.pal-top input::placeholder{color:var(--fg-4)}
.pal-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:0;flex:1}
.pal-list{overflow:auto;padding:10px 10px 14px;border-right:1px solid var(--line);scrollbar-width:thin;max-height:none}
.pal-sec{font-size:14px;color:var(--fg-3);padding:12px 12px 6px;text-transform:none;letter-spacing:0;font-weight:500}
.pal-item{height:auto;min-height:46px;padding:8px 12px;gap:12px;border-radius:9px}
.pal-item .ava-i{width:30px;height:30px;border-radius:8px;font-size:11px}
.pal-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--bg-sunk);border:1px solid var(--line);color:var(--fg-2);flex:none}
.pal-ic.lg{width:40px;height:40px;border-radius:10px}
.pal-item .t b{font-size:16px;line-height:22px}
.pal-item .t span{font-size:13.5px;line-height:18px}
.pal-item kbd{margin-left:auto}
.pal-item .pill{flex:none}
.dtile{width:38px;height:38px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-raise);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;line-height:1}
.dtile i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.dtile b{font-size:15px;font-weight:600;margin-top:1px}
.pal-detail{overflow:auto;padding:20px 22px;scrollbar-width:thin}
.pd{display:flex;flex-direction:column;gap:18px}
.pd-h{display:flex;align-items:center;gap:12px}
.pd-h .ava-i.lg{width:40px;height:40px;font-size:14px}
.pd-h .t{flex:1;min-width:0}
.pd-h .t b{display:block;font-size:18px;line-height:24px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-h .t span{display:block;font-size:14px;color:var(--fg-3)}
.pd-rows{display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--line)}
.pd-r{display:flex;align-items:center;gap:10px;font-size:15px;min-width:0}
.pd-r .i{color:var(--fg-3);flex:none}
.pd-r span,.pd-r a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-acts{display:flex;gap:8px;flex-wrap:wrap}
.pal-foot{display:flex;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--line);flex:none}
.pal-nav{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--fg-3)}
.pal-foot .btn kbd{margin-left:6px;border-color:color-mix(in srgb,var(--accent-fg) 40%,transparent);color:var(--accent-fg);background:transparent}
@media (max-width:760px){.pal-body{grid-template-columns:minmax(0,1fr)}.pal-detail{display:none}}
/* dropzone zoals Attio */
.drop.big{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:40px 20px;border-radius:16px;border:1px dashed var(--line-3);background:var(--bg)}
.drop.big.over{background:var(--accent-soft);border-color:var(--accent)}
.drop-art{width:112px;height:94px;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.drop-art .fold{stroke:var(--fg-3);fill:var(--bg-sunk)}
.drop-art .sheet{stroke:var(--t-amber)}
.drop-art .arr{stroke:var(--fg-3)}
.drop-t{margin:0;font-size:17px;color:var(--fg-2)}
.drop-or{display:flex;align-items:center;gap:12px;width:min(460px,100%);color:var(--fg-3);font-size:14px}
.drop-or::before,.drop-or::after{content:"";flex:1;border-top:1px dashed var(--line-3)}
.drop.big .btn.lg{min-width:min(460px,100%);height:44px;font-size:16px}
.drop-s{margin:8px 0 0;font-size:14px;color:var(--fg-3);text-align:center;max-width:60ch}
/* importwizard */
dialog.wiz{width:min(1180px,calc(100vw - 24px));max-height:calc(100vh - 24px);height:calc(100vh - 24px);padding:0;overflow:hidden}
dialog.wiz[open]{display:flex;flex-direction:column}
.wiz-h{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--line);flex:none}
.wiz-h h3{margin:0;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wiz-steps{list-style:none;margin:0;padding:12px 20px;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;font-size:15px;color:var(--fg-3);white-space:nowrap;flex:none}
.wiz-steps li{display:flex;align-items:center;gap:9px}
.wiz-steps li + li::before{content:"";width:7px;height:7px;border-right:1.5px solid var(--fg-4);border-bottom:1.5px solid var(--fg-4);transform:rotate(-45deg);margin:0 10px 0 2px}
.wiz-steps .n{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font-size:12.5px;font-weight:600;background:var(--bg-sunk);color:var(--fg-3);border:1px solid var(--line-2)}
.wiz-steps li[aria-current="step"]{color:var(--fg);font-weight:500}
.wiz-steps li[aria-current="step"] .n{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.wiz-steps li.done .n{background:var(--t-green-bg);color:var(--t-green);border-color:transparent}
.wiz-b{flex:1;overflow:auto;padding:20px 24px;min-height:0;scrollbar-width:thin}
.wiz-f{display:flex;align-items:center;gap:8px;padding:12px 20px;border-top:1px solid var(--line);flex:none}
.wiz-f .msg{flex:1;color:var(--t-red);font-size:14px}
#impS1 .drop.big{min-height:calc(100vh - 230px)}
.wiz-split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:24px;align-items:start}
.wiz-split.rev{grid-template-columns:260px minmax(0,1fr)}
@media (max-width:900px){.wiz-split,.wiz-split.rev{grid-template-columns:minmax(0,1fr)}.wiz-side.left{order:-1}}
.wiz-lbl{margin:0 0 10px;font-size:15px;color:var(--fg-3)}
.map-head{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:10px;padding:6px 12px;font-size:14px;color:var(--fg-3)}
.map-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mapr{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px}
.mapr:hover{background:var(--bg-hover)}
.mapr.on{background:var(--bg-sunk)}
.mapc{font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.maparrow{display:grid;place-items:center;color:var(--fg-4)}
.maparrow .i{width:16px;height:16px}
.mapsel{display:flex;align-items:center;gap:8px;min-width:0}
.mapsel .i{color:var(--fg-4);flex:none}
.mapr.set .mapsel .i{color:var(--t-green)}
.mapsel select{flex:1;min-width:0}
.prev{border:1px solid var(--line);border-radius:14px;background:var(--bg-raise);overflow:hidden}
.prev-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.prev-h b{font-size:17px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-r{padding:11px 16px;border-bottom:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-r:last-child{border-bottom:0}
.revcols{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:12px;padding:6px}
.revc{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:8px;justify-content:flex-start;font-size:16px;color:var(--fg)}
.revc:hover{background:var(--bg-hover)}
.revc.on{box-shadow:0 0 0 1.5px var(--accent);background:var(--bg-raise)}
.revc .i{color:var(--fg-3)}
.revc .l{flex:1;text-align:left}
.revc .dot{width:8px;height:8px;border-radius:50%;background:var(--accent-fill)}
.revc .i.sm{color:var(--t-green)}
.rev-skip{margin-top:14px;font-size:14px;color:var(--fg-3);display:flex;flex-direction:column;gap:3px}
.rev-skip b{color:var(--fg-2);font-weight:500}
.rev-tools{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.f-inline{display:flex;align-items:center;gap:10px}
.f-inline label.f{margin:0}
.rev-tbl{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rev-head,.rev-r{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 36px;gap:10px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.rev-head{font-size:14px;color:var(--fg-3);background:var(--bg-sunk)}
.rev-grp{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:15px;font-weight:500;background:var(--bg-sunk);border-bottom:1px solid var(--line)}
.rev-r .raw b{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev-r .rn{font-size:13px;color:var(--fg-3)}
.rev-r .mapped{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-raise);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.rev-r .mapped.bad{color:var(--t-red)}
.rev-r .mapped.ok{color:var(--fg-2)}
.rev-r .mapped.ok .i{color:var(--t-green)}
.rev-r.skip{opacity:.55}
.rev-r.ok span{grid-column:1/-1;color:var(--fg-3)}
.rev-ok summary{display:flex;align-items:center;gap:8px;padding:10px 14px;cursor:pointer;font-size:15px;font-weight:500;background:var(--bg-sunk);list-style:none}
.rev-ok summary::-webkit-details-marker{display:none}
.rev-ok[open] summary .i{transform:rotate(90deg)}
.rev-ok .rev-r:last-child{border-bottom:0}
.wiz-tab{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line);margin-bottom:0;padding-bottom:0}
.wiz-tab .tab{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 10px;border-bottom:2px solid var(--fg);font-weight:500}
.wiz-tbl{border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px}
.wiz-tbl table.grid{min-width:700px}
@media (max-width:600px){.wiz-b{padding:14px 12px}.wiz-steps{padding:10px 12px;font-size:14px}.wiz-f{padding:10px 12px}dialog.wiz{width:calc(100vw - 12px);height:calc(100vh - 12px)}#impS1 .drop.big{min-height:360px}}
.sb-fold .fold-btn > span{flex:none}
.sb-fold .fold-btn .chev{display:inline-flex}
.rev-head span{white-space:nowrap}
@media (max-width:640px){.top-r .btn .bl{display:none}.top-r .btn{padding:0 10px}.top{gap:6px;padding:0 8px}.grid-foot .hint{display:none}}
@media (max-width:600px){.wiz-f{flex-wrap:wrap;justify-content:flex-end}.wiz-f .msg:empty{display:none}.wiz-f .msg{flex-basis:100%}}
/* illustratie dropzone zoals Attio */
.drop-art{width:168px;height:153px;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.drop-art .back{fill:var(--bg-sunk);stroke:var(--fg-4)}
.drop-art .sheet rect{fill:var(--bg-raise);stroke:var(--t-amber)}
.drop-art .sheet path{stroke:var(--t-amber);opacity:.6}
.drop-art .front{fill:var(--bg-raise);stroke:var(--fg-3)}
.drop-art .arr{stroke:var(--fg-2);stroke-width:1.6}
.drop-art .arr{stroke-width:1.8}
.top .conn{display:none}
/* illustratie (vector): map in themakleuren, raster in de accentkleur */
.drop-art{width:210px;height:234px;margin-bottom:0;filter:drop-shadow(0 14px 24px rgba(0,0,0,.22));stroke-linejoin:round;stroke-linecap:round;fill:none}
.drop-art .fb{fill:var(--bg-sunk);stroke:var(--fg-4);stroke-width:6}
.drop-art .sh{fill:var(--bg-raise);stroke:var(--accent);stroke-width:6}
.drop-art .gr{stroke:var(--accent);stroke-width:5;opacity:.85}
.drop-art .ff{fill:var(--bg-raise);stroke:var(--fg-3);stroke-width:6}
.drop-art .ar{fill:var(--bg-raise);stroke:var(--fg-2);stroke-width:7}
@media (max-width:600px){.drop-art{width:160px;height:178px}}
/* gekozen accentkleur stuurt ook de 'blauwe' statuskleuren, de belkleur en de favorietenster */
:root[data-accent]{--t-blue:var(--accent);--t-blue-bg:var(--accent-soft);--bel:var(--accent)}
:root[data-accent] .fav.on,:root[data-accent] .fav.on .i,:root[data-accent] .sb-nav a.favl .i{color:var(--accent);fill:var(--accent)}
/* dropdown zoals Attio: breedte volgt de inhoud, niets vouwt om */
.menu.dd{width:auto;min-width:280px;max-width:calc(100vw - 16px);padding:6px;border-radius:12px}
.menu.dd .menu-item{height:38px;white-space:nowrap;gap:12px;padding:0 10px;font-size:15.5px}
.menu.dd .menu-item .i{width:18px;height:18px}
.menu.dd .menu-item.muted{color:var(--fg-3)}
.menu.dd .menu-item.muted .i{color:var(--fg-4)}
.menu.dd .menu-item[disabled]{opacity:.45;cursor:not-allowed}
.menu.dd .menu-sep{margin:6px 2px}
/* afsprakenlijst: raster dat omvouwt op smalle kaarten */
#ap{container-type:inline-size}
#ap .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:6px 12px;align-items:center}
#ap .row .t{min-width:0}
#ap .row .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
@container (max-width:680px){#ap .row{grid-template-columns:auto minmax(0,1fr)}#ap .row .pill{grid-column:2;justify-self:start}#ap .row .acts{grid-column:1/-1}}
/* agendablok: info bovenaan, tijd op één regel; slepen */
.ev{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left}
.ev .et{white-space:nowrap}
.ev.draggable{cursor:grab}
.ev.dragging{cursor:grabbing;z-index:6;box-shadow:0 10px 24px rgba(0,0,0,.28);opacity:.96;outline:2px solid var(--accent);animation:none}
.ad{display:inline-flex;justify-content:flex-start}
.tcard{display:flex;flex-direction:column;align-items:stretch}
/* dialogen: nooit afgeknipt, knoppen vouwen om, kop en voet blijven zichtbaar */
dialog{max-height:calc(100vh - 24px);width:min(720px,calc(100vw - 24px))}
dialog.sm{width:min(480px,calc(100vw - 24px))}
dialog.lg{width:min(960px,calc(100vw - 24px))}
dialog[open]{display:flex;flex-direction:column}
dialog > form{display:contents}
.dh{flex:none}
.dh h3{min-width:0;overflow-wrap:anywhere}
.db{flex:1 1 auto;min-height:0;overflow:auto;max-height:none}
.df{flex:none;flex-wrap:wrap}
.df .msg{flex:1 1 180px;min-width:0;white-space:normal}
.df .btn{white-space:nowrap}
@media (max-width:640px){dialog,dialog.sm,dialog.lg{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}.dh{padding:14px 16px 10px}.db{padding:0 16px 8px}.df{padding:10px 16px 14px;gap:8px}.dlg-kv{grid-template-columns:minmax(0,1fr);gap:2px 0}.dlg-kv dt{margin-top:8px}.row2{grid-template-columns:minmax(0,1fr)}}
/* lead-paneel: rustiger, zoals een Attio-record */
.grid tr.sel td:first-child,.grid tr.sel td:nth-child(2),.grid tr.active td:first-child,.grid tr.active td:nth-child(2){background-color:var(--bg);background-image:linear-gradient(var(--accent-soft),var(--accent-soft))}
.grid tr:hover td:first-child,.grid tr:hover td:nth-child(2){background-color:var(--bg);background-image:linear-gradient(var(--bg-sunk),var(--bg-sunk))}
.panel-top{padding:18px 18px 0}
.panel-top .meta{margin:12px 0 0;gap:8px}
.psel{position:relative;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 8px 0 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-raise);font-size:14.5px;max-width:100%}
.psel:hover{border-color:var(--line-3)}
.psel > i{width:7px;height:7px;border-radius:50%;background:var(--t-grey);flex:none}
.psel.green > i{background:var(--t-green)}.psel.blue > i{background:var(--t-blue)}.psel.amber > i{background:var(--t-amber)}.psel.red > i{background:var(--t-red)}.psel.violet > i{background:var(--t-violet)}.psel.teal > i{background:var(--t-teal,#0D99BD)}
.psel .i.sm{width:13px;height:13px;color:var(--fg-4);flex:none}
.psel > .i:first-child{color:var(--fg-3)}
.psel .ava-u{width:18px;height:18px}
.psel-in{appearance:none;-webkit-appearance:none;border:0;background:transparent;font:inherit;color:var(--fg);padding:0;min-width:0;max-width:180px;text-overflow:ellipsis;cursor:pointer;outline:none}
.psel-in:disabled{cursor:default;color:var(--fg-2)}
.kvl{margin:14px 0 0;border-top:1px solid var(--line);padding-top:6px;display:flex;flex-direction:column}
.kvr2{display:flex;align-items:center;gap:10px;height:36px;min-width:0}
.kvr2 > .i{color:var(--fg-3);flex:none;width:16px;height:16px}
.kvr2 .v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.kvr2 .a{display:flex;gap:2px;flex:none}
.kvr2 .a .icon-btn{width:28px;height:28px;color:var(--fg-4)}
.kvr2:hover .a .icon-btn{color:var(--fg-2)}
.ptabs{padding:14px 18px 0}
.composer{padding:12px 14px;margin:14px 18px 10px}
.composer .seg{border:0;background:transparent;box-shadow:none;padding:0;gap:4px;margin-bottom:10px}
.composer .seg button{height:30px;padding:0 10px;border-radius:7px;font-size:14px;color:var(--fg-2)}
.composer .seg button[aria-pressed="true"]{background:var(--bg-sunk);color:var(--fg);box-shadow:0 0 0 1px var(--line-2)}
.composer .ocs{margin-bottom:10px}
.composer textarea{min-height:64px;padding:6px 0}
.composer .next{border-top:1px solid var(--line);padding-top:10px;margin-top:6px;gap:6px}
.composer .next .icon-btn{width:26px;height:26px;color:var(--fg-4)}
.composer .c-foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:10px;margin-top:8px}
.composer .c-foot .tx{font-size:14px}
.panel-foot{gap:8px;padding:10px 14px}
.panel-foot .right .icon-btn.danger{color:var(--t-red)}
.panel-foot .right .icon-btn.danger:hover{background:var(--t-red-bg)}
/* pipeline: externe link naar het CRM, geen tweede overzicht */
.sb-nav a.crm-link .ext{display:inline-flex;margin-left:2px}
.sb-nav a.crm-link .ext .i{width:13px;height:13px;color:var(--fg-4)}
.sb-nav a.crm-link:hover .ext .i{color:var(--fg-2)}
/* menu-items links uitlijnen zoals Attio; inlogscherm met Google en e-mail */
.menu-item{justify-content:flex-start}
.menu-item .l{text-align:left}
.gicon{width:18px;height:18px;flex:none}
.login-hint{margin:8px 0 0;font-size:13.5px;color:var(--fg-2);min-height:18px}
/* selectiebalk zoals Attio: zwevend, gecentreerd, één rij */
.bulk{bottom:18px;padding:6px;gap:4px;border-radius:14px;white-space:nowrap;max-width:calc(100% - 32px);overflow-x:auto;scrollbar-width:none;z-index:15;align-items:center}
.bulk b{display:none}
.bchip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 6px 0 8px;border:1px dashed var(--line-3);border-radius:10px;color:var(--fg-2);font-size:15px;flex:none}
.bchip .bn{min-width:22px;height:22px;padding:0 6px;border-radius:7px;background:var(--accent-fill);color:var(--accent-fg);font-weight:700;font-size:13px;display:grid;place-items:center}
.bchip .bx{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;color:var(--fg-3)}
.bchip .bx:hover{background:var(--bg-hover);color:var(--fg)}
.bsep{width:1px;height:24px;background:var(--line-2);margin:0 4px;flex:none}
.bulk .bb,.klok-zweef .bb{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;background:var(--bg);font-size:15px;color:var(--fg);white-space:nowrap;flex:none}
.bulk .bb:hover,.klok-zweef .bb:hover{background:var(--bg-hover);border-color:var(--line-3)}
.bulk .bb[disabled]{opacity:.5;cursor:not-allowed}
.bulk .bb > .i,.klok-zweef .bb > .i{width:16px;height:16px;color:var(--fg-2)}
.bulk .bb .chev,.klok-zweef .bb .chev{display:inline-flex;margin-left:-2px}
.bulk .bb .chev .i,.klok-zweef .bb .chev .i{width:13px;height:13px;color:var(--fg-4)}
.menu.dd.up{animation:rise .16s var(--ease) both}
.menu.dd .menu-item.danger{color:var(--t-red)}
.menu.dd .menu-item.danger .i{color:var(--t-red)}
.menu.dd .menu-item.tone-green .i{color:var(--t-green)}.menu.dd .menu-item.tone-blue .i{color:var(--t-blue)}.menu.dd .menu-item.tone-amber .i{color:var(--t-amber)}.menu.dd .menu-item.tone-red .i{color:var(--t-red)}.menu.dd .menu-item.tone-violet .i{color:var(--t-violet)}.menu.dd .menu-item.tone-grey .i{color:var(--fg-3)}
/* selectiebalk: eigen animatie die de centrering bewaart */
@keyframes bulkin{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
.bulk{animation:bulkin .22s var(--ease) both;transform:translateX(-50%);flex-wrap:nowrap;justify-content:flex-start;width:max-content}
/* pillen in instellingenrijen: de regel voor subtekst (.swrow span) maakte ze blokken */
.swrow span.pill{display:inline-flex;align-items:center;gap:6px;font-size:14px;line-height:1;white-space:nowrap;flex:none}
.swrow span.pill i{display:inline-block;width:7px;height:7px;margin:0}
.swrow > div{min-width:0;flex:1}
/* stapnummers in de wizard: regelhoogte van de pagina (24px) duwde het cijfer naar onder */
.wiz-steps .n{line-height:1;font-size:12.5px;padding-top:0}
.wiz-steps li{line-height:1}
.badge,.cnt,.bchip .bn,.pill,.sb-tag{line-height:1}

/* ---------- aanmelden en werkruimtes: volledige pagina, zoals Attio ----------
   Logo bovenaan in het midden, een smalle kolom in het midden van het scherm, de voettekst onderaan.
   De knop Doorgaan en de focusrand volgen de gekozen accentkleur (var(--accent), zie data-accent). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.auth{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;padding:0 24px}
.auth-top{padding:40px 0 20px;display:flex;justify-content:center;width:100%}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--fg);max-width:100%}
.brand-mark{width:28px;height:28px;border-radius:7px;background:#305DFD;box-shadow:0 0 0 1px var(--line-3);display:grid;place-items:center;flex:none;overflow:hidden}
.brand-mark svg{width:100%;height:100%;fill:#F6F8FA;display:block}
.brand-word{display:block;font-size:18px;line-height:1;font-weight:600;letter-spacing:-.02em;color:var(--fg);white-space:nowrap}
.auth-main{width:min(340px,100%);align-self:center;display:flex;flex-direction:column;text-align:center;padding:16px 0 10vh;animation:rise .5s var(--ease) both}
.auth-main.wide{width:min(500px,100%)}
.auth h1{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.015em;margin:0}
.auth-sub{margin:6px 0 0;color:var(--fg-2);font-size:15px;line-height:22px}
.auth .login-state{margin:22px 0 0;text-align:left}
.auth .login-acts{margin-top:16px;justify-content:center}
.auth-form{margin-top:30px;display:flex;flex-direction:column}
.auth-form form{display:flex;flex-direction:column;margin:0}
.btn.auth-btn{width:100%;height:42px;padding:0 16px;font-size:15px;border-radius:10px;gap:10px;justify-content:center}
.btn.auth-btn.prov{background:transparent}
.btn.auth-btn.prov:hover{background:var(--bg-hover)}
.gicon{width:18px;height:18px;flex:none}
.auth-sep{border-top:1px solid var(--line-2);margin:22px 0;width:100%}
.auth-in{position:relative;margin-bottom:12px}
.auth-in > .i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none;width:17px;height:17px}
.auth-in .in{height:42px;padding:0 12px 0 40px;border-radius:10px;font-size:15px;background:transparent}
.auth-in:focus-within > .i{color:var(--accent)}
.login-hint{margin:10px 0 0;font-size:13.5px;line-height:19px;color:var(--fg-2);min-height:19px}
.auth-foot{padding:16px 0 28px;text-align:center;color:var(--fg-3);font-size:13px;line-height:19px;width:min(560px,100%)}
.auth-legal{margin:0 auto 14px;color:var(--fg-2);max-width:380px}
.auth-legal:empty{display:none}
.auth-legal a{color:var(--fg);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-3)}
.auth-links{display:flex;gap:6px 22px;justify-content:center;flex-wrap:wrap;align-items:center}
.auth-links a,.auth-links button{color:var(--fg-2);font:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--line-3)}
.auth-links a:hover,.auth-links button:hover,.auth-legal a:hover{color:var(--fg);text-decoration-color:currentColor}
/* werkruimtes */
.ws-list{margin-top:30px;display:flex;flex-direction:column;gap:8px}
.ws-card{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;text-align:left;transition:background-color .15s,border-color .15s}
.ws-card:hover{background:var(--bg-hover);border-color:var(--line-3)}
.ws-card:focus-visible{outline:2px solid var(--ring);outline-offset:1px;border-radius:12px}
.ws-card .ws-ava{width:40px;height:40px;border-radius:10px;font-size:15px}
.ws-card .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ws-card .t b{font-size:15px;font-weight:600;line-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-card .t span{font-size:13px;line-height:18px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-card .go{display:grid;place-items:center;color:var(--fg-4);flex:none;transition:color .15s,transform .15s}
.ws-card:hover .go{color:var(--accent);transform:translateX(2px)}
.ws-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;align-self:center;height:38px;padding:0 14px;border-radius:10px;color:var(--fg-2);font-size:15px;transition:background-color .15s,color .15s}
.ws-add:hover{background:var(--bg-hover);color:var(--fg)}
.ws-add .i{width:16px;height:16px}
.ws-new{margin-top:30px;text-align:left;display:flex;flex-direction:column;gap:8px}
.ws-new .in{height:42px;border-radius:10px;font-size:15px;background:transparent}
.ws-new-url{margin:0;font-size:13px;line-height:18px;color:var(--fg-3);min-height:18px;overflow-wrap:anywhere}
.ws-new-acts{display:flex;gap:8px;margin-top:8px}
.ws-new-acts .btn{flex:1}
@media (max-width:480px){.auth-links > span:first-child{flex-basis:100%}.auth{padding:0 16px}.auth-top{padding:28px 0 12px}.auth-main{padding-bottom:6vh}.auth h1{font-size:24px}.ws-new-acts{flex-direction:column-reverse}}
@media (max-height:620px){.auth-main{padding-bottom:16px}.auth-top{padding-top:24px}}
/* leden in de webversie: twee keuzelijsten per rij, die op een smal scherm onder de naam schuiven */
.members.web .row{flex-wrap:wrap;row-gap:8px}
.members.web .row .t{min-width:120px}

/* ---------- labels: keuzes van eigen velden, gekleurd zoals de categorieën in Attio ----------
   Elke waarde heeft een vaste kleur (--tc). Tekst, vlak en rand zijn daarvan afgeleid, zodat één regel per kleur
   volstaat en licht en donker vanzelf kloppen. */
:root{--tg-ink:#111;--tg-tx:60%;--tg-bg:13%;--tg-bd:30%}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--tg-ink:#fff;--tg-tx:74%;--tg-bg:17%;--tg-bd:34%}}
:root[data-theme="dark"]{--tg-ink:#fff;--tg-tx:74%;--tg-bg:17%;--tg-bd:34%}
.tg{--tc:#8A8F98;display:inline-block;height:22px;line-height:20px;max-width:220px;padding:0 7px;border-radius:6px;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;text-align:center;flex:none;
  color:color-mix(in srgb,var(--tc) var(--tg-tx),var(--tg-ink));background:color-mix(in srgb,var(--tc) var(--tg-bg),transparent);border:1px solid color-mix(in srgb,var(--tc) var(--tg-bd),transparent)}
.tg.c-groen{--tc:#22A559}.tg.c-teal{--tc:#0FA68F}.tg.c-lime{--tc:#84B312}.tg.c-oranje{--tc:#F2730A}.tg.c-blauw{--tc:#3B82F6}.tg.c-paars{--tc:#A65CF0}
.tg.c-roze{--tc:#EC4899}.tg.c-rood{--tc:#E5484D}.tg.c-geel{--tc:#D4A106}.tg.c-cyaan{--tc:#0EA5D8}.tg.c-grijs,.tg.more{--tc:#8A8F98}
.tg.dn{margin-left:8px}
.tgs{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;vertical-align:middle}
.tgs.wrap{display:flex;flex-wrap:wrap}
/* het eerste label blijft heel, de volgende krimpen met een beletselteken */
.tgs .tg{flex:0 1 auto;min-width:28px}
.tgs .tg:first-child,.tgs .tg.more{flex:none}
.tgs.wrap .tg{flex:none}

/* ---------- zwevend paneel (keuzelijst, weergaven, filter): blijft binnen het scherm, de lijst schuift ---------- */
.flyout{position:fixed;z-index:80;display:flex;flex-direction:column;min-height:0;background:var(--bg-raise);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;animation:rise .16s var(--ease) both}
.pop-h{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-bottom:1px solid var(--line);flex:none}
.pop-h > .i{color:var(--fg-3);flex:none;width:15px;height:15px}
.pop-q{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;font-size:15px;color:var(--fg)}
.pop-q::placeholder{color:var(--fg-4)}
.pop-q::-webkit-search-cancel-button{display:none}
.pop-list{flex:1 1 auto;min-height:0;overflow:auto;padding:4px;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin}
.pop-opt{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 8px;border-radius:7px;text-align:left;flex:none;width:100%}
.pop-opt:hover,.pop-opt:focus-visible{background:var(--bg-hover);outline:none}
.pop-opt .tg{flex:0 1 auto;min-width:0;max-width:none}
.pop-opt .n{margin-left:auto;font-size:12.5px;color:var(--fg-4);font-variant-numeric:tabular-nums;flex:none}
.pop-opt .ck{margin-left:auto;width:16px;height:16px;border-radius:5px;border:1.5px solid var(--line-3);display:grid;place-items:center;flex:none;color:transparent}
.pop-opt .n + .ck{margin-left:10px}
.pop-opt[aria-selected="true"] .ck{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fg)}
.pop-opt .ck .i{width:11px;height:11px;stroke-width:2.8}
.pop-opt.new{color:var(--fg-2)}
.pop-opt.new > .i{width:14px;height:14px;color:var(--accent)}
.pop-opt.new .lbl{font-size:14px;flex:none}
.pop-sep{height:1px;background:var(--line);margin:4px 2px;flex:none}
.pop-note{padding:12px 10px;font-size:13.5px;line-height:19px;color:var(--fg-3);text-align:center;flex:none}
.pop-lbl{padding:10px 10px 4px;font-size:12.5px;color:var(--fg-3);flex:none}
.pop-item{display:flex;align-items:center;gap:10px;height:34px;padding:0 8px;border-radius:7px;font-size:15px;font-weight:500;text-align:left;flex:none;width:100%}
.pop-item:hover,.pop-item:focus-visible{background:var(--bg-hover);outline:none}
.pop-item .i{width:16px;height:16px;color:var(--fg-2);flex:none}
.pop-item .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-item.on > .i:last-child{color:var(--accent)}
.pop-item .n{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent-fill);color:var(--accent-fg);font-size:12px;display:grid;place-items:center;flex:none;font-variant-numeric:tabular-nums}

/* ---------- balk boven de leadtabel: weergave, instellingen, filters ---------- */
.toolbar.vbar{min-height:46px;padding-top:8px;padding-bottom:8px;gap:6px}
.vbtn{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 10px;border-radius:8px;border:1px solid var(--line-2);background:var(--bg-raise);font-size:14.5px;font-weight:500;max-width:280px;min-width:0}
.vbtn .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbtn .i{width:15px;height:15px;color:var(--fg-2);flex:none}
.vbtn:hover{background:var(--bg-hover);border-color:var(--line-3)}
.vbtn.ghost{border-color:transparent;background:transparent;color:var(--fg-2)}
.vbtn.ghost:hover{background:var(--bg-hover);border-color:transparent;color:var(--fg)}
.vbtn[disabled]{opacity:.45;cursor:not-allowed}
.vsep{width:1px;height:18px;background:var(--line-2);margin:0 4px;flex:none}
.fchip{display:inline-flex;align-items:stretch;height:30px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-raise);overflow:hidden;max-width:100%;min-width:0}
.fchip .fl{display:inline-flex;align-items:center;gap:7px;padding:0 6px 0 10px;font-size:14px;min-width:0}
.fchip .fl b{font-weight:500;color:var(--fg-2);white-space:nowrap}
.fchip .fx{width:26px;display:grid;place-items:center;color:var(--fg-3);border-left:1px solid var(--line);flex:none}
.fchip .fx .i{width:13px;height:13px}
.fchip .fl:hover,.fchip .fx:hover{background:var(--bg-hover);color:var(--fg)}
/* De laatste kolom vangt alle overschot op. Zo houdt elke andere kolom precies haar eigen breedte en verschuift er niets
   als je een kolom breder of smaller sleept. */
.grid th.addc,.grid td.addc{width:100%;min-width:44px;max-width:none;padding:0;text-align:left;border-right:0}
.grid th.addc .icon-btn{margin:0 9px;width:26px;height:26px}
.grid th.addc .icon-btn .i{margin:0}
.grid td .tgs{max-width:260px}
.grid td .tg{max-width:180px}

/* ---------- weergave-instellingen ---------- */
.vs{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;scrollbar-width:thin;position:relative}
.vs-h{padding:12px 12px 2px;display:flex;flex-direction:column;flex:none}
.vs-h label.f{margin-bottom:6px}
.vs-note{margin:8px 0 0;font-size:13px;line-height:18px;color:var(--fg-3)}
.vs-list{padding:0 4px;display:flex;flex-direction:column;gap:1px;flex:none}
.vs-list.hid{max-height:230px;min-height:44px;overflow:auto;scrollbar-width:thin;padding-top:4px}
.vs-list.vis{max-height:214px;overflow:auto;scrollbar-width:thin}
.vs-row{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 4px 0 8px;border-radius:7px;font-size:14.5px;font-weight:500;text-align:left;flex:none}
.vs-row > .i{color:var(--fg-3);flex:none;width:14px;height:14px}
.vs-row .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-row .icon-btn{width:26px;height:26px}
.vs-row .icon-btn[disabled]{opacity:.3;cursor:default}
.vs-row.add{width:100%;padding-right:10px}
.vs-row.add:hover,.vs-row.add:focus-visible{background:var(--bg-hover);outline:none}
.vs-row.add > .i:last-child{color:var(--accent)}
.vs-row.fixed{color:var(--fg-2)}
.vs-row .fx{font-size:12.5px;font-weight:400;padding-right:8px;flex:none}
.pop-h.vs-find{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:2px}
.vs-acts{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 12px;border-top:1px solid var(--line);margin-top:6px;flex:none}

/* ---------- eigen velden in het lead-paneel ---------- */
.kv .kvr label > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.kv .kvr.tall{align-items:start;padding:3px 0}
.kv .kvr.tall label{min-height:30px}
.kv .kvr textarea{width:100%;min-width:0;border:1px solid transparent;border-radius:6px;padding:5px 6px;background:transparent;font:inherit;font-size:14.5px;line-height:20px;color:inherit;resize:vertical;display:block}
.kv .kvr textarea:hover{border-color:var(--line-2);background:var(--bg-raise)}
.kv .kvr textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-raise);box-shadow:0 0 0 3px var(--ring)}
.tgpick{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-start;width:100%;min-height:30px;padding:3px 6px;border:1px solid transparent;border-radius:6px;text-align:left;font-size:14.5px}
.tgpick:hover:not([disabled]){border-color:var(--line-2);background:var(--bg-raise)}
.tgpick:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.tgpick[disabled]{cursor:default}
.kv-link{display:flex;align-items:center;gap:4px;min-width:0}
.kv-link input{flex:1;min-width:0}
.kv-more{margin:10px 0 0}

/* ---------- telefoonveld: smalle landkeuze, het nummer krijgt de rest van de breedte ---------- */
.pf-row .pf-cc{width:104px;flex:none}
.pf-row .pf-in{flex:1 1 auto;width:auto;min-width:0}
.kv .kvr .pf-row .pf-cc{width:96px}

/* ---------- import: bestemming per kolom, voorbeeld met labels ---------- */
.mapc{display:flex;flex-direction:column;gap:1px;min-width:0;white-space:normal}
.mapc b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapc small{font-size:12.5px;line-height:16px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prev-tags{display:flex;flex-wrap:wrap;gap:8px 10px;padding:14px 16px}
.prev-tag{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
.prev-tag small{font-size:12px;color:var(--fg-4);font-variant-numeric:tabular-nums;flex:none}

/* ---------- instellingen: eigen velden ---------- */
.rows.velden .row{align-items:flex-start;gap:12px;padding:12px 0}
.rows.velden .row:hover{background:transparent}
.rows.velden .row > .ch{margin-top:8px}
.rows.velden .row .t{display:flex;flex-direction:column;gap:6px}
.rows.velden .row .t .in{max-width:340px}
.rows.velden .row .t > span{white-space:normal}
@media (max-width:640px){.vbtn.vset .l{display:none}.rows.velden .row{flex-wrap:wrap}}

/* ---------- importwizard zoals Attio: wat er gevonden is, veld kiezen, waarden nakijken, voorbeeld ---------- */
.imp-found{min-height:calc(100vh - 230px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 0}
.fcard{width:min(440px,100%);border:1px solid var(--line-2);border-radius:14px;background:var(--bg);padding:14px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow-sm)}
.fcard-h{display:flex;align-items:flex-start;gap:10px}
.fcard-n{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fcard-n b{font-weight:600;font-size:15px;line-height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fcard-n span{font-size:13.5px;line-height:18px;color:var(--fg-3)}
.fcard-s{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;border-top:1px solid var(--line);padding-top:12px}
.fstat{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;background:var(--bg-raise);min-width:0}
.fstat .l{display:flex;align-items:center;gap:6px;font-size:13px;line-height:16px;color:var(--fg-3);white-space:nowrap}
.fstat .l .i{width:14px;height:14px;flex:none}
.fstat b{font-size:22px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums}
.ffound{list-style:none;margin:0;padding:0;width:min(440px,100%);display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:20px;color:var(--fg-2)}
.ffound li{display:flex;gap:10px;align-items:flex-start}
.ffound li .i{flex:none;width:15px;height:15px;margin-top:2.5px;color:var(--fg-4)}
.ffound li.ok .i{color:var(--t-green)}
.ffound li.new .i{color:var(--accent)}
.fnote{margin:0;font-size:13.5px;line-height:18px;color:var(--fg-3);text-align:center}
/* stap 2: knop per kolom die de veldkiezer opent; het voorbeeld blijft in beeld terwijl de lijst schuift */
.mapr .mapsel .mapbtn{display:flex;align-items:center;justify-content:flex-start;gap:8px;width:100%;min-width:0;height:36px;padding:0 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-raise);font-size:15px;text-align:left;color:var(--fg)}
.mapr .mapsel .mapbtn:hover{border-color:var(--line-3)}
.mapr .mapsel .mapbtn:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.mapbtn .l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapr .mapsel .mapbtn > .i:first-child{color:var(--t-green);flex:none}
.mapr .mapsel .mapbtn > .i:last-child{color:var(--fg-4);flex:none;width:14px;height:14px}
.mapr .mapsel .mapbtn.off{color:var(--fg-3)}
.mapr .mapsel .mapbtn.off > .i:first-child{color:var(--fg-4)}
.mapbtn .nw{flex:none;font-size:12px;line-height:18px;padding:0 6px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-weight:500}
@media (min-width:901px){
  #impS2 .wiz-side{position:sticky;top:0;align-self:start;max-height:calc(100vh - 210px);overflow:auto;scrollbar-width:thin}
  #impS3 .wiz-side.left{position:sticky;top:0;align-self:start;max-height:calc(100vh - 210px);overflow:auto;scrollbar-width:thin}
}
.pop-item .sub{flex:none;max-width:46%;font-size:12.5px;font-weight:400;color:var(--fg-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop-item[disabled]{opacity:.5;cursor:not-allowed}
.pop-item.mk > .i:first-child{color:var(--accent)}
.pop-item .i.chev{transform:rotate(-90deg);color:var(--fg-4);width:14px;height:14px}
.pop-item.back{color:var(--fg-2)}
.pop-item.back > .i{transform:rotate(180deg)}
.pop-form{padding:6px 8px 4px;display:flex;flex-direction:column;gap:6px;flex:none}
.pop-form .f{margin:0;font-size:12.5px;color:var(--fg-3)}
.pop-err{font-size:13px;line-height:18px;color:var(--t-red)}
.pop-err:empty{display:none}
/* stap 3 */
.revlbl{padding:10px 10px 4px;font-size:12.5px;color:var(--fg-3)}
.revc{flex:none;width:100%;min-width:0}
.revc .l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.revc > .i:first-child{flex:none}
.rev-note{margin:0 0 12px;font-size:14px;line-height:20px}
.rev-r .mapped.tags{height:auto;min-height:36px;padding:6px 10px;white-space:normal}
.rev-r .mapped .t{min-width:0;overflow:hidden;text-overflow:ellipsis}
.rev-r .mapped.bad{font-size:14px}
.rev-ok summary .i{transform:rotate(-90deg);transition:transform .15s var(--ease)}
.rev-ok[open] summary .i{transform:none}
.rev-tools .in{width:auto;min-width:150px}
/* stap 4 */
.wiz-tab{flex-wrap:wrap}
.imp-stats{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;font-size:14px;line-height:20px;color:var(--fg-3);padding:6px 0}
.istat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.istat b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
.istat .i{width:15px;height:15px;flex:none}
.istat.new .i,.ist.new{color:var(--t-green)}
.istat.upd .i,.ist.upd{color:var(--accent)}
.istat.skip .i{color:var(--fg-3)}
.imp-sub{display:flex;align-items:center;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;padding:10px 2px;font-size:14px;line-height:20px;border:1px solid var(--line);border-top:0;border-bottom:0;padding:10px 12px}
.imp-sub .chk{font-size:14px}
.ist{display:inline-grid;place-items:center;width:16px;height:16px;vertical-align:-3px;margin-right:8px}
.ist .i{width:14px;height:14px}
.wiz-tbl{border-top:1px solid var(--line);max-height:max(300px,calc(100vh - 470px))}
.wiz-tbl .grid td .tgs{max-width:240px}
@media (max-width:600px){.imp-found{min-height:320px}.fstat b{font-size:20px}}
.pop-foot{flex:none;padding:4px;border-top:1px solid var(--line)}
/* het voorbeeld vult de hoogte van het venster; de tabel schuift zelf, met vaste kop */
#impS4:not([hidden]){display:flex;flex-direction:column;height:100%;min-height:540px}
#impS4 > *{flex:none}
#impS4 .wiz-tbl{flex:1 1 auto;min-height:0;max-height:none}

/* ---------- campagnerij op Vandaag: lucht rond de voortgangsbalk, de hele rij klikt door ---------- */
.row.camp{cursor:pointer;padding:12px 16px;gap:14px}
.row.camp:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.row.camp .t{display:flex;flex-direction:column;gap:0}
.row.camp .t .stackbar{margin:9px 0 7px;height:6px}
.row.camp .t .meta{font-size:13px;line-height:18px;color:var(--fg-3)}
.row.camp .cnt{white-space:nowrap}
.row.camp > .i.go{transform:rotate(-90deg);color:var(--fg-4);flex:none;width:14px;height:14px}
.row.camp:hover > .i.go{color:var(--fg-2)}
button.lnk{color:var(--link);font-weight:500;text-align:left;display:inline;padding:0}
button.lnk:hover{text-decoration:underline}
button.lnk.num{font-variant-numeric:tabular-nums;font-weight:500}

/* ---------- testomgeving: duidelijke band bovenaan, zodat niemand testdata voor echte leads houdt ---------- */
.testbar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:30px;padding:5px 16px;font-size:13.5px;line-height:18px;text-align:center;background:var(--t-amber-bg);color:var(--fg);border-bottom:1px solid var(--line);flex:none}
.testbar .i{width:14px;height:14px;color:var(--t-amber);flex:none}
.testbar b{font-weight:600}
.testbar span{color:var(--fg-2)}

/* ---------- activiteit per lead: label met metertje in de lijst, grafiek op de fiche ---------- */
.tg.act{display:inline-flex;align-items:center;gap:6px;overflow:visible}
.mtr{display:inline-flex;align-items:flex-end;gap:2px;height:11px;flex:none}
.mtr i{display:block;width:3px;border-radius:1px;background:currentColor;opacity:.28}
.mtr i:nth-child(1){height:5px}.mtr i:nth-child(2){height:8px}.mtr i:nth-child(3){height:11px}
.mtr i.on{opacity:1}
.actcard{border:1px solid var(--line);border-radius:0;background:var(--bg-raise);padding:12px 14px 10px;margin:14px 0 4px;display:flex;flex-direction:column;gap:10px}
.ac-h{display:flex;align-items:center;gap:10px;min-width:0}
.ac-h b{font-weight:600}
.ac-h .grow{flex:1}
.ac-h .muted{font-size:13px;white-space:nowrap}
.ac-chart{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;height:64px;align-items:end;border-bottom:1px solid var(--line-2);padding-top:8px}
.ac-col{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;border-radius:4px 4px 0 0}
.ac-col:hover{background:var(--bg-hover)}
.ac-col.now{background:var(--accent-soft)}
.ac-stack{width:100%;max-width:22px;display:flex;flex-direction:column;border-radius:3px 3px 0 0;overflow:hidden;min-height:0}
.ac-stack i{display:block;flex:1 1 0;min-height:3px;background:currentColor}
.ac-x{display:flex;justify-content:space-between;gap:8px;font-size:12px;line-height:16px;color:var(--fg-4);margin-top:-4px}
.ac-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.ac-num{display:flex;flex-direction:column;gap:1px;min-width:0}
.ac-num b{font-size:18px;line-height:22px;font-weight:600;font-variant-numeric:tabular-nums}
.ac-num span{font-size:12.5px;line-height:16px;color:var(--fg-3)}
.ac-leg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--fg-2)}
.ac-k{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ac-k .ch{width:16px;height:16px}
@media (max-width:520px){.ac-nums{grid-template-columns:repeat(2,minmax(0,1fr))}.ac-x span:nth-child(2){display:none}}
.actcard{margin:0 0 14px}
.actcard.dicht{padding:8px 14px}
button.ac-h{width:100%;justify-content:flex-start;text-align:left;border-radius:8px}
button.ac-h:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button.ac-h > .i{color:var(--fg-4);flex:none}
.ac-mini{display:inline-flex;align-items:flex-end;gap:2px;height:18px;flex:none}
.ac-mini i{display:block;width:4px;border-radius:1px;background:var(--line-3)}
.ac-mini i.on{background:var(--accent-fill)}

/* ---------- zijbalk: campagne met een megafoon in de kleur van haar status, zonder tegel ---------- */
.sb-nav a.lst .lst-ic{display:grid;place-items:center;flex:none}
.sb-nav a.lst .lst-ic .i{color:var(--fg-3)}
.sb-nav a.lst .lst-ic.on .i{color:var(--t-green)}
.sb-nav a.lst .lst-ic.paused .i{color:var(--t-amber)}
/* de cijfers staan onder de balk en mogen afbreken, zodat niets overlapt in een smalle kaart */
.row.camp .t .meta{white-space:normal;overflow:visible}
.row.camp .t b{white-space:normal;overflow:visible;line-height:20px}
.row.camp .acts{flex:none}

/* ---------- nieuwe versie beschikbaar ---------- */
.updbar{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;min-height:34px;padding:5px 16px;font-size:13.5px;line-height:18px;background:var(--accent-soft);border-bottom:1px solid var(--line);flex:none}
.updbar .i{width:14px;height:14px;color:var(--accent);flex:none}

/* ---------- belblok: wat elke uitkomst doet, de wachtrij met uitleg, fiche openen ---------- */
.oc .l{display:flex;flex-direction:column;gap:1px;min-width:0}
.oc .l b{font-weight:500;line-height:20px}
.oc .l small{font-size:12px;line-height:15px;font-weight:400;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc.main .l small{color:color-mix(in srgb,var(--accent-fg) 88%,transparent)}
.oc{height:64px}
.oc-hint{margin:10px 0 0;font-size:12.5px;line-height:18px;color:var(--fg-4);max-width:78ch}
.lead-meta .grow{flex:1}
.lead-open{font:inherit;color:inherit;letter-spacing:inherit;text-align:left;display:inline;padding:0;border-radius:6px}
.lead-open:hover{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.lead-open:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- geen interesse: redenen als knoppen met een cijfertoets ---------- */
.reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:6px}
@media (max-width:420px){.reasons{grid-template-columns:minmax(0,1fr)}}
.reason{display:flex;align-items:center;justify-content:flex-start;gap:8px;min-height:38px;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg-raise);text-align:left;font-size:14.5px;line-height:19px}
.reason:hover{border-color:var(--line-3)}
.reason:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.reason[aria-checked="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--fg)}
.reason kbd{flex:none}
.reason span{min-width:0}
.fhint{display:block;margin-top:4px;font-size:12.5px;color:var(--fg-4)}

/* ---------- taken en rapporten ---------- */
.view-note{margin:10px 24px 16px;font-size:13px;line-height:19px;color:var(--fg-4);max-width:90ch}
.toolbar.repbar{padding:0 0 14px;border:0;min-height:0;gap:8px;flex-wrap:wrap}
.toolbar.repbar .grow{flex:1}
.who-btn{display:inline-flex;align-items:center;font-weight:400;color:var(--fg)}
.who-btn:hover{text-decoration:none}
.who-btn:hover .who span:last-child{text-decoration:underline}
table.mini td .sub{display:block;font-size:12px;color:var(--fg-4);margin-left:28px}
.quotes{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-direction:column;gap:3px;font-size:12.5px;line-height:17px;color:var(--fg-3)}
.quotes li{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.quotes button.lnk{font-size:12.5px}

/* ---------- campagnetabel: twee regels per rij vragen meer lucht dan de standaardrij ---------- */
#listBody td{height:60px;padding-top:8px;padding-bottom:8px}
#listBody tr.empty td{height:120px}
#listBody .main-cell{gap:10px}
#listBody .main-cell .sub{margin-top:3px}

/* ---------- zijbalk: vanuit een campagne meteen naar het belblok ---------- */
.sb-nav a.lst .lst-bel{display:none;width:22px;height:22px;border-radius:6px;place-items:center;flex:none;color:var(--bel)}
.sb-nav a.lst .lst-bel .i{width:14px;height:14px;color:currentColor}
.sb-nav a.lst:hover .lst-bel,.sb-nav a.lst:focus-within .lst-bel{display:grid}
.sb-nav a.lst .lst-bel:hover{background:var(--bg-hover)}

/* ---------- lijsten: de hele rij opent, een waarde pas je ter plekke aan ---------- */
#leadBody tr,#followBody tr,#listBody tr{cursor:pointer}
#leadBody tr.empty,#followBody tr.empty,#listBody tr.empty,.grid tr.sk{cursor:default}
/* De eerste twee kolommen staan vast (sticky) en zijn daardoor al een ankerpunt voor het potloodje. */
.grid td.ed:not(:first-child):not(:nth-child(2)){position:relative}
.grid td.ed.direct .pill,.grid td.ed.direct .who,.grid td.ed.direct .tg,.grid td.ed.direct .tgs,.grid td.ed.direct .chan{cursor:pointer;transition:box-shadow .12s var(--ease)}
.grid td.ed.direct .pill:hover,.grid td.ed.direct .tg:hover{box-shadow:0 0 0 1px var(--line-3)}
.grid td.ed.direct .who:hover,.grid td.ed.direct .chan:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}
.ced{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:7px;display:grid;place-items:center;background:var(--bg-raise);box-shadow:0 0 0 1px var(--line-2),0 1px 2px rgba(0,0,0,.08);color:var(--fg-2);z-index:1}
.ced:hover{color:var(--accent)}
.ced .i{width:13px;height:13px}
.grid td .meer{margin-left:6px;font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}
/* Een aangeklikte of geselecteerde rij houdt haar kleur over de hele breedte, ook in de vaste kolommen en als de muis erboven staat. */
.grid tr.sel:hover td:first-child,.grid tr.sel:hover td:nth-child(2),.grid tr.active:hover td:first-child,.grid tr.active:hover td:nth-child(2){background-image:linear-gradient(var(--accent-soft),var(--accent-soft))}
/* het paneeltje onder een cel */
.flyout.cel .pop-form{padding:8px}
/* Alleen het veld zelf vult de breedte; in het telefoonveld houden landcode en nummer hun eigen plaats naast elkaar. */
.flyout.cel .pop-form > .in{width:100%}
.flyout.cel .pop-item .pill,.flyout.cel .pop-item .who,.flyout.cel .pop-item .chan{flex:0 1 auto;min-width:0}
.pop-val{display:flex;align-items:center;gap:8px;min-height:36px;padding:0 4px 0 8px;border-radius:7px;flex:none}
.pop-val:hover{background:var(--bg-hover)}
.pop-val .l,.pop-val .lnk{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.pop-val .sub{font-size:12px;color:var(--fg-4);flex:none}
.pop-val .icon-btn{width:26px;height:26px;flex:none;color:var(--fg-3)}
.pop-val .icon-btn:hover{color:var(--fg)}
.pop-h.add{border-bottom:0;border-top:1px solid var(--line)}
.pop-h.add > .i{color:var(--accent)}
.flyout.cel .pop-err{padding:0 12px 8px}

/* ---------- leadlijst als raster: kop en voet blijven staan, de schuifbalken horen bij de tabel zelf ---------- */
/* De voetregel ligt altijd volledig boven de rijen, ook boven de vaste eerste kolommen (die hebben zelf een z-index). */
.grid-foot{left:0;z-index:4}
@media (min-width:761px){
  #v-leads:not([hidden]){display:flex;flex-direction:column;height:100%;min-height:0}
  #v-leads > .tbl-wrap{flex:1 1 auto;min-height:0}
  #v-leads > .toolbar,#v-leads > .grid-foot{flex:none}
  #v-leads > .grid-foot{position:static}
}

/* ---------- kolommen schalen: sleep de rand van een kolomkop ---------- */
.grid th{overflow:hidden;text-overflow:ellipsis}
.grid th .colrs{position:absolute;top:0;right:0;width:9px;height:100%;cursor:col-resize;z-index:1;touch-action:none}
.grid th .colrs::after{content:"";position:absolute;top:5px;bottom:5px;right:0;width:2px;border-radius:2px;background:transparent;transition:background .12s var(--ease)}
.grid th .colrs:hover::after,.grid th.rs .colrs::after{background:var(--accent)}
body.col-resizing,body.col-resizing *{cursor:col-resize !important;user-select:none}
/* Tekst die niet past eindigt op drie puntjes, ook de tweede regel in een cel en een naam met een foto ervoor. */
.grid td .sub{overflow:hidden;text-overflow:ellipsis}
.grid td .who{display:flex;max-width:100%}
.grid td .main-cell > div{min-width:0}
.grid td .act{display:flex;max-width:100%}
.grid td .pill{max-width:100%}

/* De teller in de zijbalk: even hoogte, zodat hij in een rij altijd op hele pixels komt en het cijfer precies in het midden staat. */
.badge{height:20px;min-width:20px;padding:0 6px;border-radius:10px;font-variant-numeric:tabular-nums}

/* ---------- paneel bij een cel: woont in de schuifbak van zijn lijst en schuift daardoor vanzelf mee, zonder vertraging ---------- */
.tbl-wrap{position:relative}
.cel-laag{position:absolute;left:0;top:0;height:0;z-index:80;pointer-events:none}
.cel-vast{left:0;width:0;height:0}
.cel-laag .flyout{position:absolute;pointer-events:auto}
.flyout.cel{border-radius:10px;transform-origin:top left;animation:celin .14s var(--ease) both}
.flyout.cel.up{transform-origin:bottom left;animation-name:celop}
@keyframes celin{from{opacity:0;transform:translateY(-4px) scale(.985)}to{opacity:1;transform:none}}
@keyframes celop{from{opacity:0;transform:translateY(4px) scale(.985)}to{opacity:1;transform:none}}
/* De cel die je bewerkt, heeft een rand in de accentkleur zolang haar paneel open is. */
.grid td.ed-open{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- vaste kolom met de naam: duidelijk afgelijnd zodra er kolommen onder schuiven ---------- */
.grid th:nth-child(2),.grid td:nth-child(2){transition:box-shadow .18s var(--ease)}
.tbl-wrap.schuift .grid th:nth-child(2),.tbl-wrap.schuift .grid td:nth-child(2){box-shadow:1px 0 0 var(--line-3),14px 0 18px -14px rgba(0,0,0,.55)}
/* Houdt de schuifbreedte vast terwijl je een kolom smaller sleept, zodat de lijst niet mee opschuift. */
.rs-houder{position:absolute;top:0;width:1px;height:1px;pointer-events:none}

/* Ontkoppelen bij een koppeling is duidelijk rood: rode tekst op een rode tint, en vol rood met de muis erboven. */
.conn-row .btn.danger{background:var(--t-red-bg);border-color:transparent;color:var(--t-red)}
.conn-row .btn.danger:hover{background:var(--t-red);border-color:var(--t-red);color:#fff}
.conn-row .btn.danger:hover .i{color:#fff}

/* ---------- selectievakje: een vierkantje met afgeronde hoeken; aangevinkt gevuld in de accentkleur met een vinkje ---------- */
.grid input[type="checkbox"],.chk input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:none;border-radius:4px;border:1.5px solid var(--line-3);background:transparent;display:inline-grid;place-content:center;vertical-align:middle;cursor:pointer;transition:opacity .12s var(--ease),border-color .12s var(--ease),background-color .12s var(--ease)}
.grid input[type="checkbox"]:hover,.chk input[type="checkbox"]:hover{border-color:var(--fg-3)}
.grid input[type="checkbox"]:checked,.grid input[type="checkbox"]:indeterminate,.chk input[type="checkbox"]:checked{background:var(--accent-fill);border-color:var(--accent-fill)}
/* Het vinkje is een getekende vorm die in een vierkant van 10 pixels precies in het midden staat, ook optisch. */
:root{--vink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5.1 4 7.4 8.4 2.6' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.grid input[type="checkbox"]::before,.chk input[type="checkbox"]::before{content:"";width:10px;height:10px;background:var(--accent-fg);-webkit-mask:var(--vink) center/100% 100% no-repeat;mask:var(--vink) center/100% 100% no-repeat;transform:scale(0);transition:transform .1s var(--ease)}
.grid input[type="checkbox"]:checked::before,.chk input[type="checkbox"]:checked::before{transform:scale(1)}
/* een deel geselecteerd: een streepje in plaats van een vinkje */
.grid input[type="checkbox"]:indeterminate::before{width:8px;height:2px;border-radius:1px;-webkit-mask:none;mask:none;transform:none}
.grid input[type="checkbox"]:focus-visible,.chk input[type="checkbox"]:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.grid input[type="checkbox"]:disabled,.chk input[type="checkbox"]:disabled{opacity:.5;cursor:default}
/* In een lijst staat het vakje er pas als de muis op de rij staat. Aangevinkt blijft het altijd zichtbaar.
   Op een aanraakscherm is er geen muis, dus daar staat het er altijd. */
.grid input[type="checkbox"]{opacity:0}
.grid tr:hover input[type="checkbox"],.grid input[type="checkbox"]:checked,.grid input[type="checkbox"]:indeterminate,.grid input[type="checkbox"]:focus-visible{opacity:1}
@media (hover:none){.grid input[type="checkbox"]{opacity:1}}

/* ---------- bewerkveld met een oogje: toont of verbergt dat gegeven in de lijst ---------- */
.pop-rij{display:flex;align-items:center;gap:6px}
.pop-rij .in{flex:1;min-width:0}
.pop-rij .oog{flex:none;width:30px;height:30px;border-radius:8px;color:var(--fg-2)}
.pop-rij .oog:hover{color:var(--fg);background:var(--bg-hover)}
.pop-rij .oog.uit{color:var(--fg-4)}
.pop-rij .oog:disabled{opacity:.4;cursor:default;background:transparent}

/* ---------- afspraakvenster: gasten per bedrijf ---------- */
.ev-gasten{display:flex;flex-direction:column;gap:8px}
.ev-g{display:flex;flex-direction:column;gap:1px;min-width:0}
.ev-gk{display:flex;align-items:baseline;gap:8px}
.ev-gk b{font-weight:600}
.ev-gk .muted{font-size:12.5px}
.ev-g > span{overflow-wrap:anywhere;color:var(--fg-2)}

/* ---------- lijsten op Vandaag: één regel per rij ----------
   Vooraan het belangrijkste, daarachter gedempt de rest. Wat niet past, eindigt op drie puntjes: eerst de gedempte tekst. */
.rows.een .row{padding-top:9px;padding-bottom:9px}
.rows.een .row .t{display:flex;align-items:baseline;gap:8px;overflow:hidden}
.rows.een .row .t b{flex:0 1 auto;min-width:0}
.rows.een .row .t span{flex:1 1 0;min-width:0}
.rows.een .row .when{display:flex;align-items:baseline;gap:6px;min-width:0}
.rows.een .row .when b{display:inline}
/* Een vaste breedte voor het uur, zodat de icoontjes en namen onder elkaar staan. */
#todayAgenda .row .when{width:44px;flex:none}
#todayAct .row .when{flex:none}

/* ---------- lijsten zonder gevulde labels ----------
   De status houdt alleen haar gekleurde bolletje, de activiteit alleen haar gekleurde streepjes. De tekst zelf is gewoon. */
.grid .pill,.rows .pill{background:transparent;padding:0;height:auto;gap:7px;font-weight:400}
.grid .tg.act,.rows .tg.act{background:transparent;border-color:transparent;padding:0;height:auto;line-height:inherit;font-weight:400;color:var(--fg)}
.grid .tg.act .mtr,.rows .tg.act .mtr{color:color-mix(in srgb,var(--tc) var(--tg-tx),var(--tg-ink))}
/* Wat je meteen kunt aanpassen, krijgt met de muis erboven een onderstreping in plaats van een rand. */
.grid td.ed.direct .pill:hover,.grid td.ed.direct .tg.act:hover{box-shadow:none;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-3)}

/* ---------- zoekresultaten: één regel per resultaat, zoals de lijsten op Vandaag ---------- */
.pal-item .t{display:flex;align-items:baseline;gap:8px;overflow:hidden}
.pal-item .t b{flex:0 1 auto;min-width:0}
.pal-item .t span{flex:1 1 0;min-width:0}

/* ---------- schaalbaarheid: niets loopt uit zijn vak, op elk scherm ---------- */
/* Taken vandaag: het label past altijd; de naam van wie de taak heeft, wijkt als eerste. */
.rows.een .row .when b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows.een .row .who{flex:0 1 auto;min-width:0;max-width:34%}
.rows.een .row .pill{flex:none}
/* Rapporten: een omschrijving mag over twee regels lopen in plaats van uit de kaart te steken. */
.mini td:first-child{white-space:normal}
/* Belscherm: een lang e-mailadres of domein eindigt op drie puntjes in plaats van uit de kaart te steken. */
.lead-links .btn{max-width:100%;min-width:0}
.lead-links .btn .l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Agenda: de naam van een afspraak eindigt op drie puntjes binnen haar blokje. */
.ev .en,.ev .et{align-self:stretch;max-width:100%;min-width:0}
.ev .et{overflow:hidden;text-overflow:ellipsis}
/* Lijst: het icoontje van de laatste actie verschijnt pas met de muis op de rij. Op een aanraakscherm staat het er altijd. */
.grid td .act:not(.tg) > .ch{opacity:0;transition:opacity .12s var(--ease)}
.grid tr:hover td .act:not(.tg) > .ch{opacity:1}
@media (hover:none){.grid td .act:not(.tg) > .ch{opacity:1}}

/* ---------- bewerkbalk in lijsten die met de pagina meeschuiven (taken, campagnes): blijft onderaan in beeld ---------- */
.bulk.plak{position:sticky;left:auto;bottom:56px;transform:none;width:max-content;max-width:calc(100% - 32px);margin:10px auto;flex-wrap:nowrap;animation:fadein .2s var(--ease) both}
#bulkCamp.plak{bottom:18px}

/* Het vakje vooraan een rij en in de kop staat als blok in zijn cel, zodat het horizontaal en verticaal exact in het midden staat. */
.grid td:first-child > input[type="checkbox"],.grid th:first-child > input[type="checkbox"]{display:grid;margin:0 auto}

/* Teksten op elkaar: de knop is zo breed als de langste, alleen de juiste is zichtbaar. Knoppen in een kolom staan zo op één lijn. */
.stapel{display:inline-grid;justify-items:center}
.stapel > *{grid-area:1/1}
.stapel > .verborgen{visibility:hidden}

/* ---------- startpagina: één kolom zonder kaders, zoals Attio ---------- */
#v-vandaag > .greet,#v-vandaag > #todayDigest,#v-vandaag > .home{max-width:920px;margin-left:auto;margin-right:auto}
/* Vandaag: veel lucht tussen de blokken, zoals de startpagina van Attio; ruimte brengt rust. Op een smal scherm wat minder. */
.hsec{margin-top:72px}
.home > .hsec:first-child{margin-top:60px}
@media (max-width:900px){.hsec{margin-top:44px}.home > .hsec:first-child{margin-top:36px}}
.hsec-h{display:flex;align-items:center;gap:6px;min-height:32px;margin-bottom:10px;padding:0 8px}
.hsec-h .grow{flex:1}
.hsec-h h2{margin:0;font-size:15px;font-weight:500;color:var(--fg-2)}
.hsec-h .hcnt{margin-left:4px;font-weight:400;color:var(--fg-4)}
.hsec-h .hdag{font-size:14px;color:var(--fg-3);margin-right:4px;white-space:nowrap}
.hsec-h .icon-btn{width:28px;height:28px;color:var(--fg-3)}
.hrows .row{border-bottom:0;padding:9px 8px;border-radius:8px}
.hrows .row:hover{background:var(--bg-hover)}
.hrows .empty{padding:40px 8px 32px;text-align:center;color:var(--fg-3)}
.hrows .empty b{display:block;color:var(--fg-2);font-weight:500;margin-bottom:2px}
.hrows .empty .btn{margin-top:18px}
/* een taak: rondje om af te vinken, kanaal, bedrijf, datum rechts */
.row.taak .klaar{width:18px;height:18px;flex:none;border-radius:50%;border:1.5px solid var(--line-3);display:grid;place-items:center;color:transparent;transition:border-color .12s var(--ease),color .12s var(--ease),background-color .12s var(--ease)}
.row.taak .klaar .i{width:11px;height:11px}
.row.taak .klaar:hover{border-color:var(--accent-fill);color:var(--accent)}
.row.taak .klaar:disabled{opacity:.4}
.hrows .row .when{flex:none;margin-left:auto;text-align:right;min-width:0}
.hrows .row.taak .when{font-size:14px}
.row.meer{width:100%;color:var(--fg-3);text-align:left}
/* laatste acties: kleiner en rustiger */
.hsec.klein .hsec-h h2{font-size:13.5px}
.hsec.klein .row{padding:5px 8px}
.hsec.klein .row .t b{font-weight:400;font-size:13.5px;color:var(--fg-2)}
.hsec.klein .row .when{font-size:12.5px;color:var(--fg-4)}
.hsec.klein .ch{width:16px;height:16px}.hsec.klein .ch .i{width:14px;height:14px}
/* De samenvatting van je dag: een rustige regel zonder kader, zoals de rest van de startpagina. */
#v-vandaag .digest{border:0;background:transparent;padding:4px 8px;margin:0;gap:8px}
#v-vandaag .digest .btn{margin-left:auto}

/* ---------- de fiche ligt over de pagina, de rest wordt verduisterd ----------
   De pagina eronder krimpt niet meer. Klikken op de verduistering sluit de fiche. */
.panel-scrim{position:fixed;inset:0;background:var(--scrim);z-index:19;animation:fadein .2s var(--ease) both;cursor:default}

/* Openen en sluiten van de fiche: de verduistering vervaagt rustig, de fiche schuift zacht in en uit. */
.panel{animation:paneelIn .34s cubic-bezier(.22,1,.36,1) both}
.panel.sluit{animation:paneelUit .24s cubic-bezier(.4,0,.6,1) both;pointer-events:none}
.panel-scrim{animation:scrimIn .34s cubic-bezier(.22,1,.36,1) both}
.panel-scrim.sluit{animation:scrimUit .24s cubic-bezier(.4,0,.6,1) both;pointer-events:none}
@keyframes paneelIn{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@keyframes paneelUit{from{transform:none;opacity:1}to{transform:translateX(28px);opacity:0}}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}
@keyframes scrimUit{from{opacity:1}to{opacity:0}}

/* ---------- melding in de themakleur, zoals een geselecteerde rij; gecentreerd met translate zodat de animatie ze niet verschuift ---------- */
.toast{transform:none;translate:-50% 0;background-color:var(--bg-raise);background-image:linear-gradient(var(--accent-soft),var(--accent-soft));color:var(--fg);border:1px solid var(--accent)}
.toast button{color:var(--accent)}
/* begroeting: lucht tussen de titel en de datum; de knoppen lijnen uit op de datum */
.greet{margin-bottom:36px}
.greet p{margin:10px 0 0}
/* zoekvenster in het midden van het scherm, met een vaste hoogte zodat het niet meebeweegt met de resultaten */
dialog.pal{margin:auto;height:min(720px,calc(100vh - 40px));max-height:none}
/* afspraken op de startpagina: schakelaars in het menu, geweigerde afspraken doorgehaald */
.pop-item.schakel{height:40px}
.pop-item.schakel .sw{margin-left:auto}
.hrows .row.geweigerd .t b{text-decoration:line-through;color:var(--fg-3)}

/* ---------- belblok: gegevens links in een smalle kolom, het script in het midden, zes uitkomsten onderaan ---------- */
#v-bellen{container-type:inline-size;display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden;padding:0}
.bel-tb{flex:none;padding:16px 24px 0;border:0;min-height:0;margin:0}
.bel-dag{display:flex;gap:14px;font-size:13px;color:var(--fg-3);white-space:nowrap}
.bel-dag b{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums;display:inline-block}
.bel-dag b.pop{animation:pop .4s var(--ease)}
.bel-kolom{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
/* De linkerkolom scrolt zelf; een beetje marge binnenin, anders valt de rand van een gekozen veld buiten het vak en wordt ze afgesneden. */
.bel-wrap{flex:1;min-height:0;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:0 28px;align-items:stretch;padding:10px 0 0 20px}
.bel-links{border-right:1px solid var(--line);padding:4px 22px 16px 4px;min-width:0;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.bel-script{min-width:0;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;padding:0 24px 16px 52px}
/* Argumenten rechts: open een derde kolom met dezelfde editor, dicht een smalle rand met de naam erop. */
.bel-wrap{grid-template-columns:minmax(300px,380px) minmax(0,1fr) 36px}
.bel-wrap.met-arg{grid-template-columns:minmax(300px,380px) minmax(0,1fr) clamp(240px,var(--arg-w,340px),60%)}
.bel-arg{border-left:1px solid var(--line);min-width:0;min-height:0;display:flex;flex-direction:column;position:relative}
/* De greep op de scheiding: onzichtbaar tot je erover beweegt, dan een lijn in de themakleur; slepen verplaatst de scheiding. */
.bel-arg-greep{position:absolute;left:-5px;top:0;bottom:0;width:10px;cursor:col-resize;z-index:2}
.bel-arg-greep::after{content:'';position:absolute;left:4px;top:0;bottom:0;width:2px;background:transparent;transition:background .12s var(--ease)}
.bel-arg-greep:hover::after,body.kolom-sleept .bel-arg-greep::after{background:var(--accent)}
body.kolom-sleept{cursor:col-resize;user-select:none}
body.kolom-sleept .bel-script,body.kolom-sleept .bel-arg-scroll{pointer-events:none}
.bel-arg-kop{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px 0 20px;font-size:12.5px;color:var(--fg-3);flex:none;margin-bottom:6px}
.bel-arg-kop b{font-weight:500;color:var(--fg-2)}
.bel-arg-kop .icon-btn{width:28px;height:28px;color:var(--fg-3)}
.bel-arg-scroll{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain;padding:0 20px 16px 48px}
.bel-arg-scroll .scr-h{display:none}
.bel-arg-rail{border:0;border-left:1px solid var(--line);background:none;color:var(--fg-3);font:inherit;font-size:12.5px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 0;border-radius:0}
.bel-arg-rail .i{width:14px;height:14px}
.bel-arg-rail span{writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:.02em}
.bel-arg-rail:hover{color:var(--fg);background:var(--bg-hover)}
.bel-arg-rail[hidden]{display:none}
.scr-h,.scr-pagina,.scr-leeg{max-width:76ch}
@container (max-width:840px){.bel-kolom{overflow-y:auto}.bel-wrap{flex:none;grid-template-columns:minmax(0,1fr);padding-right:24px}.bel-links,.bel-script,.bel-arg-scroll{overflow:visible;padding-right:0}.bel-script{padding-left:36px}.bel-wrap,.bel-wrap.met-arg{grid-template-columns:minmax(0,1fr)}.bel-arg{border-left:0;border-top:1px solid var(--line);margin-top:16px;padding-top:8px}.bel-arg-greep{display:none}.bel-arg-scroll{padding-left:36px}.bel-arg-rail{flex-direction:row;justify-content:flex-start;border-left:0;border-top:1px solid var(--line);margin-top:16px;padding:12px 0}.bel-arg-rail span{writing-mode:horizontal-tb;transform:none}.bel-links{border-right:0;border-bottom:1px solid var(--line);margin-bottom:16px}.bel-oc{position:sticky;bottom:0}.bel-dag{display:none}}
/* de fiche links */
.bfiche{animation:rise .35s var(--ease) both}
.bfiche.leave{animation:none;opacity:.4;transition:opacity .2s}
.bf-kop{display:flex;align-items:center;gap:10px;min-height:32px;font-size:12.5px;color:var(--fg-3)}
.bf-kop .tx kbd{margin-left:2px}
.bf-kop .icon-btn{width:28px;height:28px;color:var(--fg-3)}
.bf-co{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.02em;margin:6px 0 0;overflow-wrap:anywhere}
.bf-wie{margin:2px 0 0;color:var(--fg-2);overflow-wrap:anywhere}
.bf-wie b{color:var(--fg);font-weight:600}
.bfiche textarea.nota{width:100%;border:1px solid var(--line);border-radius:var(--r);padding:8px 10px;font-size:14px;min-height:44px;resize:vertical;background:var(--bg);font:inherit;line-height:20px}
.bfiche textarea.nota:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)}
.bfiche.leeg{border:1px dashed var(--line-2);border-radius:var(--r-xl);padding:20px 22px}
.bf-kv.kv{padding:0 0 4px}
/* Meer info over dit contact: een duidelijke band onder de notitie, zodat het inklapbare deel zich afzet van wat je nu nodig hebt. */
.bf-meer{margin-top:22px;border-top:0}
.bf-meer summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;font-size:13px;font-weight:500;color:var(--fg-2);background:var(--bg-hover);border:1px solid var(--line);border-radius:var(--r)}
.bf-meer[open] summary{margin-bottom:12px}
.bf-meer summary::-webkit-details-marker{display:none}
.bf-meer summary .i{width:14px;height:14px;color:var(--fg-3);transition:transform .15s var(--ease)}
.bf-meer[open] summary .i{transform:rotate(90deg)}
.bf-meer summary:hover{color:var(--fg)}
.bf-kv .kvr{grid-template-columns:118px minmax(0,1fr)}
.bf-kv .kv-link{display:flex;align-items:center;gap:2px;min-width:0}
.bf-kv .kv-link > input,.bf-kv .kv-link > .pf{flex:1;min-width:0}
.bf-kv .kv-link .icon-btn{width:26px;height:26px;color:var(--fg-4);flex:none}
.bf-kv .kvr:hover .kv-link .icon-btn{color:var(--fg-2)}
/* het script: één pagina zoals Notion, lezen en typen in dezelfde blokken, alles links uitgelijnd */
.scr-pagina{font-size:15px;line-height:24px;color:var(--fg)}
.scr-blokken{display:flex;flex-direction:column;margin-left:-52px}
.scr-blok{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:start;border-radius:8px}
/* het plusje en de zes puntjes zoals in Notion: wat groter, vlak naast elkaar en vlak bij de tekst */
.scr-gut{display:flex;justify-content:flex-end;gap:0;padding-right:2px;opacity:0;transition:opacity .12s}
.scr-blok:hover .scr-gut,.scr-blok.actief .scr-gut{opacity:1}
.scr-gut button{width:24px;height:24px;border-radius:5px;color:var(--fg-4);display:grid;place-items:center;margin-top:4px}
.scr-gut .scr-greep{width:20px}
.scr-gut button .i{width:18px;height:18px}
.scr-gut button:hover{background:var(--bg-hover);color:var(--fg-2)}
/* op de hoogte van de eerste regel van het blok, ook bij koppen, markeringen en citaten */
.scr-blok.t-kop .scr-gut button{margin-top:25px}
.scr-blok.t-kop2 .scr-gut button{margin-top:19px}
.scr-blok.t-kop3 .scr-gut button{margin-top:14px}
.scr-blok:first-child.t-kop .scr-gut button{margin-top:7px}
.scr-blok:first-child.t-kop2 .scr-gut button{margin-top:5px}
.scr-blok:first-child.t-kop3 .scr-gut button{margin-top:4px}
.scr-blok.t-markering .scr-gut button{margin-top:14px}
.scr-blok.t-citaat .scr-gut button{margin-top:8px}
.scr-blok.t-lijn .scr-gut button{margin-top:6px}
.scr-gut button:hover{background:var(--bg-hover);color:var(--fg-2)}
.scr-greep{cursor:grab}
.scr-blok.sleept{opacity:.4}
.scr-blok.boven{box-shadow:0 -2px 0 var(--accent)}
.scr-blok.onder{box-shadow:0 2px 0 var(--accent)}
.scr-inh{display:flex;align-items:flex-start;gap:8px;min-width:0;padding:2px 0;text-align:left}
.scr-inh.kolom{flex-direction:column;gap:0;align-items:stretch}
.scr-rij{display:flex;align-items:flex-start;gap:8px;width:100%}
.scr-ta{width:100%;border:0;background:transparent;font:inherit;color:inherit;resize:none;padding:2px 4px;border-radius:6px;line-height:24px;min-height:28px;overflow:hidden;display:block;text-align:left}
.scr-ta.lees{white-space:pre-wrap;overflow-wrap:anywhere}
.scr-pagina.kan .scr-ta.lees{cursor:text}
textarea.scr-ta:focus{outline:none}
.scr-ta::placeholder,.scr-ta .ph{color:var(--fg-4)}
.scr-ta.lees:empty::before{content:"\00a0"}
.scr-blok.t-kop .scr-ta{font-size:22px;line-height:30px;font-weight:700;letter-spacing:-.015em;margin-top:18px;min-height:34px}
.scr-blok.t-kop2 .scr-ta{font-size:18px;line-height:26px;font-weight:600;margin-top:14px;min-height:30px}
.scr-blok.t-kop3 .scr-ta{font-size:16px;line-height:24px;font-weight:600;margin-top:10px}
.scr-blok:first-child .scr-ta{margin-top:0}
.scr-blok.t-markering .scr-inh{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 8px 8px 0;padding:6px 10px;margin:4px 0}
.scr-blok.t-citaat .scr-inh{border-left:3px solid var(--fg);padding-left:12px;margin:4px 0}
.scr-bol{width:6px;height:6px;border-radius:50%;background:var(--fg-2);flex:none;margin:11px 2px 0 8px}
.scr-nr{flex:none;min-width:22px;text-align:right;color:var(--fg-2);line-height:28px;font-variant-numeric:tabular-nums}
.scr-vink{width:18px;height:18px;flex:none;margin:5px 0 0 2px;border:1.5px solid var(--line-3);border-radius:5px;display:grid;place-items:center;color:transparent;padding:0;transition:background-color .15s,border-color .15s}
.scr-vink .i{width:12px;height:12px;stroke-width:3}
.scr-vink.aan{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--accent-fg)}
.scr-blok.t-vink.aan .scr-ta.lees{color:var(--fg-3);text-decoration:line-through}
.scr-chev{width:22px;height:22px;flex:none;margin-top:3px;border-radius:5px;display:grid;place-items:center;color:var(--fg-3)}
.scr-chev:hover{background:var(--bg-hover)}
.scr-chev .i{width:14px;height:14px;transition:transform .15s var(--ease)}
.scr-chev[aria-expanded="true"] .i{transform:rotate(90deg)}
.scr-blok.t-toggle .scr-ta.tekst{font-weight:500}
.scr-blok.t-toggle .scr-ta.sub{margin-left:30px;width:calc(100% - 30px);color:var(--fg-2)}
.scr-blok.t-lijn .scr-inh{padding:8px 0}
.scr-lijn{border:0;border-top:1px solid var(--line-2);margin:8px 0;width:100%}
mark.scr-var{background:var(--accent-soft);color:inherit;border-radius:4px;padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.scr-ta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:var(--bg-sunk);border-radius:4px;padding:1px 4px}
.scr-blok{position:relative}
.scr-blok.gekozen::after{content:"";position:absolute;top:1px;bottom:1px;left:52px;right:0;background:color-mix(in srgb,var(--accent) 18%,transparent);border-radius:4px;pointer-events:none}
@container (max-width:840px){.scr-blok.gekozen::after{left:36px}}
.scr-pagina.kiest,.scr-pagina.kiest *{user-select:none}
.scr-pagina ::selection{background:color-mix(in srgb,var(--accent) 32%,transparent)}
.scr-lasso{position:fixed;z-index:30;border:1px solid var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:2px;pointer-events:none}
.scr-h{user-select:none}
#v-bellen.tekstkeuze .bel-links,#v-bellen.tekstkeuze .bel-oc,#v-bellen.tekstkeuze .bel-tb,#v-bellen.tekstkeuze .scr-staart,#v-bellen.tekstkeuze .scr-hint,#v-bellen.tekstkeuze .scr-gut{user-select:none}
.scr-staart{min-height:72px;cursor:text}
.scr-hint{font-size:12.5px;color:var(--fg-4);margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.pop-item.gevaar,.pop-item.gevaar .i{color:var(--t-red)}
.scr-leeg{padding:28px 0;text-align:center;color:var(--fg-3);font-size:13.5px;display:flex;flex-direction:column;align-items:center;gap:6px}
.scr-leeg b{color:var(--fg)}
.scr-h{display:flex;align-items:center;gap:8px;min-height:32px;font-size:12.5px;color:var(--fg-3);margin-bottom:6px}
.scr-h > .i{width:15px;height:15px}
.scr-t{font-weight:500;color:var(--fg-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.scr-wat{color:var(--fg-4);white-space:nowrap}
.scr-wat::before{content:"·";margin-right:8px}
@container (max-width:840px){.scr-blokken{margin-left:-36px}.scr-blok{grid-template-columns:36px minmax(0,1fr)}.scr-gut{opacity:1}.scr-gut .scr-plus{display:none}}
/* de uitkomsten: zes op een rij, blijven onderaan in beeld terwijl het script scrolt */
.bel-oc{flex:none;z-index:3;margin:0;padding:12px 24px 14px;background:var(--bg);border-top:1px solid var(--line)}
@media (max-width:900px){.bel-tb{padding-inline:16px}.bel-wrap{padding-left:12px;padding-right:16px}.bel-script{padding-right:16px}.bel-oc{padding-inline:16px}}
.outcomes{display:grid;gap:10px;grid-template-columns:repeat(6,minmax(0,1fr))}
.oc.gi .i,.oc.ong .i{color:var(--t-red)}
/* tussen 1000 en 1240 breed blijven de zes op één rij, iets compacter en zonder de toetsletter */
@container (max-width:1240px){.outcomes{gap:8px}.oc{padding:0 10px;font-size:14px}.oc kbd{display:none}}
@container (max-width:1000px){.outcomes{grid-template-columns:repeat(3,minmax(0,1fr))}.oc{font-size:15px;padding:0 12px 0 11px}}
@container (max-width:560px){.outcomes{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.oc{height:46px;font-size:14px;padding:0 10px}.oc .l small{display:none}}

/* belblok: het nummer op één regel met kopiëren en bellen, de andere nummers en de gatekeeper klein eronder, de laatste acties elk op één regel */
.bf-tel{display:flex;align-items:center;gap:6px 8px;min-width:0;flex-wrap:wrap}
.bf-tel .tel{font-size:19px;line-height:28px;white-space:nowrap;letter-spacing:0}
.bf-tel a.tel{color:inherit;text-decoration:none;cursor:pointer}.bf-tel a.tel:hover{color:var(--bel)}
.bf-tel .icon-btn{width:26px;height:26px}
.bf-tel .tel.none{font-size:14px}
.bf-tel .icon-btn{width:28px;height:28px;color:var(--fg-3);flex:none}
.bf-tel .btn{flex:none}
.bf-gk{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--fg-2);margin:0 0 10px;min-width:0}
.bf-gk .i{width:14px;height:14px;color:var(--fg-3);flex:none}
.bf-gk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bf-acts{display:flex;flex-direction:column;gap:2px;min-width:0}
.bf-act{display:flex;align-items:center;gap:8px;min-height:24px;font-size:13px;color:var(--fg-2);min-width:0}
.bf-act .ch{flex:none}
.bf-act .t{color:var(--fg-4);font-size:12px;font-variant-numeric:tabular-nums;flex:none}
.bf-act .w{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- kleuren voor blokken in het script, zoals Notion: tekstkleur (nk) en achtergrond (nv) ---------- */
:root{--nk-grijs:#787774; --nv-grijs:#F1F1EF; --nk-bruin:#9F6B53; --nv-bruin:#F4EEEE; --nk-oranje:#D9730D; --nv-oranje:#FBECDD; --nk-geel:#CB912F; --nv-geel:#FBF3DB; --nk-groen:#448361; --nv-groen:#EDF3EC; --nk-blauw:#337EA9; --nv-blauw:#E7F3F8; --nk-paars:#9065B0; --nv-paars:#F6F3F9; --nk-roze:#C14C8A; --nv-roze:#FAF1F5; --nk-rood:#D44C47; --nv-rood:#FDEBEC;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--nk-grijs:#9B9B9B; --nv-grijs:#2F2F2F; --nk-bruin:#BA856F; --nv-bruin:#4A3228; --nk-oranje:#C77D48; --nv-oranje:#5C3B23; --nk-geel:#CA9849; --nv-geel:#564328; --nk-groen:#529E72; --nv-groen:#243D30; --nk-blauw:#5E87C9; --nv-blauw:#143A4E; --nk-paars:#9D68D3; --nv-paars:#3C2D49; --nk-roze:#D15796; --nv-roze:#4E2C3C; --nk-rood:#DF5452; --nv-rood:#522E2A;}}
:root[data-theme="dark"]{--nk-grijs:#9B9B9B; --nv-grijs:#2F2F2F; --nk-bruin:#BA856F; --nv-bruin:#4A3228; --nk-oranje:#C77D48; --nv-oranje:#5C3B23; --nk-geel:#CA9849; --nv-geel:#564328; --nk-groen:#529E72; --nv-groen:#243D30; --nk-blauw:#5E87C9; --nv-blauw:#143A4E; --nk-paars:#9D68D3; --nv-paars:#3C2D49; --nk-roze:#D15796; --nv-roze:#4E2C3C; --nk-rood:#DF5452; --nv-rood:#522E2A;}
.scr-blok.k-grijs .scr-ta,.scr-blok.k-grijs .scr-nr,.scr-blok.k-grijs .scr-bol{color:var(--nk-grijs)}.scr-blok.k-grijs .scr-bol{background:var(--nk-grijs)}
.scr-blok.v-grijs .scr-inh{background:var(--nv-grijs);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.grijs{color:var(--nk-grijs)}.sw-v.grijs{background:var(--nv-grijs)}
.scr-blok.k-bruin .scr-ta,.scr-blok.k-bruin .scr-nr,.scr-blok.k-bruin .scr-bol{color:var(--nk-bruin)}.scr-blok.k-bruin .scr-bol{background:var(--nk-bruin)}
.scr-blok.v-bruin .scr-inh{background:var(--nv-bruin);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.bruin{color:var(--nk-bruin)}.sw-v.bruin{background:var(--nv-bruin)}
.scr-blok.k-oranje .scr-ta,.scr-blok.k-oranje .scr-nr,.scr-blok.k-oranje .scr-bol{color:var(--nk-oranje)}.scr-blok.k-oranje .scr-bol{background:var(--nk-oranje)}
.scr-blok.v-oranje .scr-inh{background:var(--nv-oranje);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.oranje{color:var(--nk-oranje)}.sw-v.oranje{background:var(--nv-oranje)}
.scr-blok.k-geel .scr-ta,.scr-blok.k-geel .scr-nr,.scr-blok.k-geel .scr-bol{color:var(--nk-geel)}.scr-blok.k-geel .scr-bol{background:var(--nk-geel)}
.scr-blok.v-geel .scr-inh{background:var(--nv-geel);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.geel{color:var(--nk-geel)}.sw-v.geel{background:var(--nv-geel)}
.scr-blok.k-groen .scr-ta,.scr-blok.k-groen .scr-nr,.scr-blok.k-groen .scr-bol{color:var(--nk-groen)}.scr-blok.k-groen .scr-bol{background:var(--nk-groen)}
.scr-blok.v-groen .scr-inh{background:var(--nv-groen);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.groen{color:var(--nk-groen)}.sw-v.groen{background:var(--nv-groen)}
.scr-blok.k-blauw .scr-ta,.scr-blok.k-blauw .scr-nr,.scr-blok.k-blauw .scr-bol{color:var(--nk-blauw)}.scr-blok.k-blauw .scr-bol{background:var(--nk-blauw)}
.scr-blok.v-blauw .scr-inh{background:var(--nv-blauw);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.blauw{color:var(--nk-blauw)}.sw-v.blauw{background:var(--nv-blauw)}
.scr-blok.k-paars .scr-ta,.scr-blok.k-paars .scr-nr,.scr-blok.k-paars .scr-bol{color:var(--nk-paars)}.scr-blok.k-paars .scr-bol{background:var(--nk-paars)}
.scr-blok.v-paars .scr-inh{background:var(--nv-paars);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.paars{color:var(--nk-paars)}.sw-v.paars{background:var(--nv-paars)}
.scr-blok.k-roze .scr-ta,.scr-blok.k-roze .scr-nr,.scr-blok.k-roze .scr-bol{color:var(--nk-roze)}.scr-blok.k-roze .scr-bol{background:var(--nk-roze)}
.scr-blok.v-roze .scr-inh{background:var(--nv-roze);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.roze{color:var(--nk-roze)}.sw-v.roze{background:var(--nv-roze)}
.scr-blok.k-rood .scr-ta,.scr-blok.k-rood .scr-nr,.scr-blok.k-rood .scr-bol{color:var(--nk-rood)}.scr-blok.k-rood .scr-bol{background:var(--nk-rood)}
.scr-blok.v-rood .scr-inh{background:var(--nv-rood);border-radius:6px;padding-left:6px;padding-right:6px}
.sw-k.rood{color:var(--nk-rood)}.sw-v.rood{background:var(--nv-rood)}
/* de kleurstalen zoals in Notion: een vierkant met een A erin, of een gevuld vlakje, dat bijna de hele rij vult; de rijen dicht op elkaar */
.sw-k,.sw-v{width:24px;height:24px;border-radius:5px;border:1px solid var(--line-3);flex:none;display:grid;place-items:center;font-size:14px;line-height:1;font-weight:600;color:var(--fg)}
.sw-v{background:var(--bg-raise)}
.pop-item:has(.sw-k),.pop-item:has(.sw-v){height:30px;gap:9px}
.pop-list .pop-lbl + .pop-item:has(.sw-k),.pop-list .pop-lbl + .pop-item:has(.sw-v){margin-top:2px}

/* belblok: de kop als tabel, zoals de gegevens eronder; de velden om iemand te bereiken springen eruit */
.bf-tabel{margin:12px 0 14px;border-top:1px solid var(--line)}
.bf-r{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px;align-items:center;min-height:38px;padding:4px 0;border-bottom:1px solid var(--line)}
.bf-tel .icon-btn.c-bel{color:var(--bel)}
kbd.breed{--k:18px;min-width:0;padding:0 5px;color:var(--fg-4)}
.bf-klok{font-size:12.5px;color:var(--fg-3);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:6px;margin-left:2px}
.bf-klok.loopt{color:var(--t-green)}
.bf-klok.loopt i{width:7px;height:7px;border-radius:50%;background:var(--t-green);animation:klok 1.2s ease-in-out infinite}
@keyframes klok{0%,100%{opacity:1}50%{opacity:.35}}
.bf-r > label{font-size:12.5px;color:var(--fg-3);align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.bf-r > .v{min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.bf-r .pill.plain{height:auto;font-size:13.5px;font-weight:500;color:var(--fg);gap:6px;display:inline-flex}
.bf-r .muted{font-size:12.5px}
.bf-r .v > .pill.plain + .muted{margin-top:0}
.bf-r:has(.pill) .v{flex-direction:row;align-items:center;justify-content:flex-start;gap:10px}
.bf-r button.lnk{font-size:14px}
.bf-tal{font-size:14px;font-variant-numeric:tabular-nums}
.bf-kv .kvr.belangrijk label{color:var(--fg);font-weight:500}
.bf-kv .kvr.belangrijk input::placeholder,.bf-kv .kvr.belangrijk .pf-in::placeholder{color:var(--accent);opacity:.85}
.bf-kv .kvr label{font-size:12.5px}

/* e-mails op de fiche, uit Gmail */
.mails{padding:4px 18px 0}
.mails-h{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13.5px}
.mails-h > .i{width:15px;height:15px;color:var(--fg-3)}
.mails-h .icon-btn{width:28px;height:28px;color:var(--fg-3)}
.mails-l{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.mail-rij{padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer;min-width:0}
.mail-rij:hover{background:var(--bg-hover)}
.mail-k{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.mail-k b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mail-rij.ongelezen .mail-k b{font-weight:600}
.mail-n{font-size:11.5px;color:var(--fg-3);border:1px solid var(--line-2);border-radius:9px;padding:0 6px;flex:none}
.mail-d{font-size:12px;color:var(--fg-4);white-space:nowrap;flex:none}
.mail-s{font-size:13px;color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}
.mail-berichten{border-bottom:1px solid var(--line);padding:6px 0 10px;display:flex;flex-direction:column;gap:10px}
.mail-b{border-left:2px solid var(--line-3);padding-left:10px}
.mail-bk{display:flex;align-items:center;gap:8px;font-size:13px}
.mail-b p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13.5px;line-height:20px;color:var(--fg-2);max-height:320px;overflow:auto}
.mail-acts{display:flex;gap:6px;flex-wrap:wrap}
.mails-leeg{padding:12px 0;font-size:13px;color:var(--fg-3)}
/* Onderwerp als eerste regel van de mail, in lijn met de tekst eronder: geen kader, alleen een lijntje. */
.composer .c-onderwerp{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;padding:6px 0;margin:2px 0 2px;font-size:15px;font-weight:500;outline:none;box-shadow:none}
.composer .c-onderwerp:focus{border-bottom-color:var(--accent);box-shadow:none}
/* Onderaan: Taak toevoegen links op één regel, de knoppen rechts als groep; te smal, dan gaat de groep naar een eigen regel. */
.composer .c-foot{flex-wrap:wrap;row-gap:8px}
.composer .c-foot .tx{white-space:nowrap;flex:none}
.composer .c-acts{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
.composer .c-acts .btn{white-space:nowrap}
.c-antwoord{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);margin-bottom:6px}
.c-antwoord .i{width:14px;height:14px;color:var(--fg-3)}
.c-antwoord b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-antwoord .icon-btn{width:24px;height:24px;margin-left:auto}
/* Markering en citaat: dezelfde lijn en afronding, met of zonder achtergrondkleur. */
.scr-blok.t-markering .scr-inh{border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:6px 10px}
.scr-blok.t-citaat .scr-inh{border-left:3px solid var(--fg);border-radius:0;padding-left:9px}
/* Afgekort label in de fiche: wie eroverheen beweegt, ziet meteen de hele naam in een klein kader eronder. */
.lbl-tip{position:fixed;z-index:60;background:var(--bg-ink);color:var(--fg-ink);padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.18);pointer-events:none;max-width:min(80vw,420px);overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(-3px);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.lbl-tip.zicht{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.lbl-tip{transition:none}}
/* Taken: te laat in het rood, vandaag in oranjegeel, overal waar de datum rechts staat (de algemene regel voor .when won het anders). */
.row .when.due.late,.hrows .row .when.due.late,.hsec.klein .row .when.due.late,td.due.late{color:var(--t-red);font-weight:500}
.row .when.due.today,.hrows .row .when.due.today,.hsec.klein .row .when.due.today,td.due.today{color:var(--t-amber);font-weight:500}
/* De zwevende klok: dezelfde balk als bij een selectie in de lijst, in licht en donker, overal te verslepen. */
.klok-zweef{position:fixed;left:0;top:0;z-index:70;display:flex;align-items:center;gap:4px;padding:6px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-raise);box-shadow:var(--shadow);cursor:grab;user-select:none;white-space:nowrap;max-width:calc(100vw - 16px);overflow:hidden}
.klok-zweef[hidden]{display:none}
.klok-zweef.sleept{cursor:grabbing;transition:none}
.klok-zweef{opacity:0;transform:translateY(-8px) scale(.97);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.klok-zweef.zicht{opacity:1;transform:none}
.klok-zweef .bchip{border-style:solid;cursor:inherit}
.klok-zweef .bchip .bn{background:var(--t-red-bg,rgba(220,38,38,.14));color:var(--t-red)}
.klok-zweef .stip{width:9px;height:9px;border-radius:50%;background:var(--t-red);animation:klok 1.2s ease-in-out infinite;display:block}
.klok-zweef .tijd{font-weight:600;font-variant-numeric:tabular-nums;color:var(--fg);min-width:40px}
.klok-zweef .wie{color:var(--fg-3);font-size:13px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.klok-zweef{transition:none}.klok-zweef .stip{animation:none}}
/* E-mail in een venster in het midden: ruim tekstvak, ontvanger bovenaan; in de fiche alleen een knop die het venster opent. */
#dlgMail{width:min(760px,calc(100vw - 32px))}
#dlgMail .db{padding-bottom:16px}
.composer.venster{margin:0;border:0;background:transparent;padding:0}
.composer.venster textarea.groot{min-height:260px}
.composer .c-aan{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-3);padding:0 0 8px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.composer .c-aan b{font-weight:500;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer .mail-open{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--fg-3);font-size:13px;padding:4px 0 2px}
/* Mail: werkbalk onder de tekst (bestand, afbeelding, variabele, handtekening), bijlagen als chips, de conversatie erboven. */
.composer .c-tools{display:flex;align-items:center;gap:4px;margin:6px 0 2px;flex-wrap:wrap}
.composer .c-tools .icon-btn{width:30px;height:30px;color:var(--fg-3)}
.composer .c-tools .icon-btn:hover{color:var(--fg)}
.composer .c-tools .grow{flex:1}
.composer .c-handtekening{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg-3)}
.composer .c-handtekening .sel{height:28px;font-size:12.5px;max-width:260px}
.composer .c-hint{font-size:12px;color:var(--fg-4)}
.composer .c-bijlagen{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 2px}
.composer .c-bijlage{display:inline-flex;align-items:center;gap:6px;padding:2px 4px 2px 8px;border:1px solid var(--line-2);border-radius:8px;font-size:12.5px;max-width:100%}
.composer .c-bijlage .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.composer .c-bijlage small{color:var(--fg-4)}
.composer .c-bijlage .icon-btn{width:22px;height:22px}
.composer .c-weg{width:34px;height:34px;color:var(--fg-3)}
.composer .c-weg:hover{color:var(--t-red)}
.composer .c-draad{margin:0 0 12px;padding-bottom:4px;border-bottom:1px dashed var(--line-2);max-height:38vh;overflow:auto}
/* Velden in het venster Nieuwe lead blijven binnen hun vak, ook keuzelijsten met lange teksten. */
.row2 > div,.fgrid2 > div{min-width:0}
/* Alleen het veld zelf in een vak; het telefoonveld met landcode en nummer erin houdt zijn eigen verdeling. */
.row2 > div > .sel,.row2 > div > .in,.fgrid2 > div > .sel,.fgrid2 > div > .in{width:100%;min-width:0;max-width:100%;box-sizing:border-box}
#ldCountryBox > .sel{width:100%;min-width:0}
/* De keuzelijst van het veld Sector: zoals de andere menu's, met de getypte letters vet en de actieve regel gemarkeerd. */
.sector-lijst{max-height:280px}
.sector-lijst .pop-item{height:32px;font-weight:500}
.sector-lijst .pop-item.actief{background:var(--bg-hover)}
.sector-lijst .pop-item .l b{font-weight:700;color:var(--fg)}
.sector-lijst .pop-lbl{white-space:normal;line-height:18px}
.composer .c-draad-h{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);margin-bottom:8px}
.composer .c-draad-h b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.composer .c-draad-h .grow{flex:1}
/* Variabelen: de naam als code links, de uitleg ernaast. */
.var-lijst .pop-item{height:36px;gap:12px}
.var-lijst .pop-item code.var{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--bg-sunk);color:var(--fg);min-width:104px;text-align:left;flex:none}
.var-lijst .pop-item .l{color:var(--fg-2);font-weight:400;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Voorbeeld van de handtekening onder de tekst: gedempt, met een lijntje ervoor, afbeeldingen op maat. */
.composer .c-sig{display:block;width:100%;height:132px;border:0;border-top:1px solid var(--line);margin-top:6px;padding-top:8px;background:transparent}
.composer .c-sig[hidden]{display:none}
/* Definitief verwijderen: een rode melding, wat er verdwijnt, en het veld om de naam of het e-mailadres over te typen. */
#dlgWeg .db{display:flex;flex-direction:column;gap:12px;padding-bottom:16px}
.wg-let{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--t-red);background:var(--t-red-bg);border-radius:var(--r-lg)}
.wg-let > .i{color:var(--t-red);width:18px;height:18px;flex:none;margin-top:2px}
.wg-let b{display:block;font-weight:600}
.wg-let span{display:block;font-size:13.5px;color:var(--fg-2);margin-top:2px}
.wg-lijst{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--fg-2)}
.wg-lijst b{color:var(--fg);font-weight:600}
.wg-lijst .muted{color:var(--fg-3)}
.wg-kop{margin:0;font-size:13.5px;color:var(--fg-2)}
.wg-tip{margin:0;font-size:13px;color:var(--fg-3)}
.wg-veld{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.wg-veld .f{margin:0}
.wg-veld .wg-woord{align-self:flex-start;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;padding:2px 8px;border-radius:6px;background:var(--bg-sunk);color:var(--fg);user-select:all;max-width:100%;overflow-wrap:anywhere}
.btn.danger.vol{background:var(--t-red);border-color:var(--t-red);color:#fff}
.btn.danger.vol:hover:not(:disabled){background:var(--t-red);filter:brightness(1.06)}
.btn.danger.vol:disabled{opacity:.45;cursor:not-allowed}
/* Uitnodigingen bovenaan de lijst met werkruimtes. */
.ws-invites{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.ws-invites:empty{display:none}
.ws-inv-kop{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-2);font-weight:500}
.ws-inv{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--accent);border-radius:12px;background:var(--accent-soft);flex-wrap:wrap}
.ws-inv .t{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.ws-inv .t span{font-size:13px;color:var(--fg-2)}
.ws-invites + .ws-list{margin-top:16px}


/* platformbeheer (…/beheer): een eigen pagina buiten de werkruimtes, in dezelfde stijl als de lijsten in de app */
.beheer{position:fixed;inset:0;z-index:50;background:var(--bg);overflow:auto}
.bh-top{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;height:52px;padding:0 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.bh-top .brand-mark{width:24px;height:24px;border-radius:6px}
.bh-top b{font-weight:600}
.bh-sep{width:1px;height:16px;background:var(--line-2)}
.bh-tag{color:var(--fg-2);font-size:13.5px}
.bh-sp{flex:1}
.bh-main{width:min(1120px,100%);margin:0 auto;padding:28px 20px 48px}
.bh-kop{display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;margin-bottom:16px}
.bh-kop h1{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em;margin:0;flex:1;min-width:180px}
.bh-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bh-tools .in.bh-zoek{width:200px;height:28px;flex:none}
.bh-n{color:var(--fg-3);font-variant-numeric:tabular-nums}
.bh-list{border:1px solid var(--line-2);border-radius:12px;overflow:hidden}
.bh-item + .bh-item,.bh-list > .bh-row + .bh-row{border-top:1px solid var(--line)}
.bh-list .row{border-bottom:0}
.bh-klik{cursor:pointer}
.bh-row .t span span{display:inline}
.bh-row .ava-i{width:28px;height:28px;border-radius:7px;font-size:11px}
.bh-klik:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.bh-chev{color:var(--fg-3);display:grid;place-items:center;width:16px;flex:none}
.bh-stat{display:flex;flex-direction:column;align-items:flex-end;min-width:58px;flex:none;line-height:16px}
.bh-stat b{font-size:13.5px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.bh-stat span{font-size:11.5px;color:var(--fg-3);white-space:nowrap}
.bh-stat.breed{min-width:112px}
.bh-leden{background:var(--bg-sunk);border-top:1px solid var(--line);padding:4px 0 4px 26px}
.bh-leden .row:hover{background:transparent}
.bh-leden .in.bh-rol{height:28px;width:142px;flex:none;padding-top:0;padding-bottom:0}
.bh-row .t .bh-jij{display:inline;color:var(--fg-3);font-weight:400;font-size:inherit}
.bh-wanneer{min-width:118px}
.bh-door{font-size:12.5px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.bh-who{margin:16px 0 0;color:var(--fg-3);font-size:13px}
@media (max-width:760px){
  .bh-top{padding:0 16px}
  .bh-tag,.bh-sep{display:none}
  .bh-main{padding:20px 16px 40px}
  .bh-tools{width:100%}
  .bh-tools .in.bh-zoek{flex:1;width:auto;min-width:0}
  .bh-stat,.bh-door{display:none}
  .bh-row{flex-wrap:wrap}
  .bh-row .t{min-width:140px}
  .bh-leden{padding-left:0}
  .bh-wanneer{min-width:0}
}

/* ---------- de openbare demo (app.ringlane.ai/demo.html): vaste balk bovenaan en de rondleiding ---------- */
body.vitrine{display:flex;flex-direction:column;height:100%}
body.vitrine > .shell{flex:1 1 auto;min-height:0;height:auto}
.demobar{display:flex;align-items:center;justify-content:space-between;gap:6px 14px;flex-wrap:wrap;padding:7px 12px 7px 16px;background:var(--accent-soft);border-bottom:1px solid var(--line);font-size:13.5px;line-height:18px;flex:none;position:relative;z-index:41}
.demobar-t{display:flex;align-items:center;gap:8px;color:var(--fg);font-weight:500;min-width:0}
.demobar-t .i{width:15px;height:15px;color:var(--accent);flex:none}
.demobar-r{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.demobar .btn.sm{height:28px;padding:0 10px;font-size:13px}
.demobar .btn.sm .i{width:13px;height:13px}
.demobar a.btn{text-decoration:none}
@media (max-width:760px){.demobar{padding:6px 10px;font-size:12.5px;gap:4px}.demobar-r{width:100%}.demobar-r .btn.primary{margin-left:auto}#demoSite{display:none}}
.tour-ring{position:fixed;z-index:65;border-radius:10px;box-shadow:0 0 0 2px var(--accent),0 0 0 6px color-mix(in srgb,var(--accent) 22%,transparent);pointer-events:none;transition:left .35s var(--ease),top .35s var(--ease),width .35s var(--ease),height .35s var(--ease),opacity .25s var(--ease)}
.tour{position:fixed;z-index:66;left:auto;top:auto;right:20px;bottom:20px;width:min(360px,calc(100vw - 24px));transition:left .35s var(--ease),top .35s var(--ease);background:var(--bg-raise);color:var(--fg);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow);padding:16px 16px 12px;animation:rise .3s var(--ease) both}
.tour.wissel{animation:none}
.tour .tour-stap{font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.02em;margin-bottom:4px}
.tour h4{margin:0 0 6px;font-size:16px;line-height:22px;font-weight:600}
.tour p{margin:0;color:var(--fg-2);font-size:14px;line-height:20px}
.tour p kbd{font:600 12px/1 var(--f);padding:2px 5px;border-radius:5px;border:1px solid var(--line-2);background:var(--bg-sunk);color:var(--fg)}
.tour-f{display:flex;align-items:center;gap:6px;margin-top:14px}
.tour-f .grow{flex:1}
.tour-dots{display:flex;gap:4px}
.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background .25s var(--ease),transform .25s var(--ease)}
.tour-dots i.on{background:var(--accent);transform:scale(1.25)}
.tour-x{position:absolute;right:8px;top:8px}
.tour-body{transition:opacity .2s var(--ease),transform .2s var(--ease)}
.tour-body.uit{opacity:0;transform:translateY(4px)}
@media (max-width:640px){.tour{width:calc(100vw - 24px);padding:14px 14px 10px}.tour h4{font-size:15px}.tour p{font-size:13.5px}}
@media (prefers-reduced-motion:reduce){.tour,.tour-ring,.tour-body{animation:none;transition:none}}

html,body{height:100%}body{margin:0}