@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f5f7fa;color:#192c40;font:16px 'DM Sans',sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer;border:1px solid #dce2e9;background:white;color:inherit;border-radius:8px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px}button:hover{background:#edf3f7}button:disabled{opacity:.55;cursor:wait}a{color:inherit;text-decoration:none}input,select,textarea{border:1px solid #dce2e9;border-radius:7px;padding:11px 12px;background:white;min-width:0;width:100%;color:inherit}textarea{min-height:80px;resize:vertical}label{display:block;font-size:14px;font-weight:600;margin:16px 0}label input,label select,label textarea{margin-top:7px}small{font-size:12px;font-weight:400}.shell{display:flex;min-height:100vh}aside{width:250px;background:#102a3b;color:#b9c9d3;padding:35px 22px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0}.brand{display:flex;align-items:center;gap:10px;font:800 27px Manrope;color:white;letter-spacing:1px}.brandIcon{background:#bcf159;color:#102a3b;border-radius:10px;display:grid;place-items:center;width:40px;height:40px}.brandDot{color:#bcf159;margin-left:-10px}.workspace{border:1px solid #355062;border-radius:9px;margin:34px 0;padding:12px;display:flex;gap:10px;color:white;font-size:14px}.workspace small{display:block;color:#9db1bf;margin-top:4px}.team{border-radius:7px;background:#274353;padding:10px;font-size:12px}.navlabel,.eyebrow{font-size:12px;letter-spacing:1.6px;font-weight:700;color:#7c8f9f;margin-bottom:12px}.nav{background:none;border:0;color:#b9c9d3;width:100%;justify-content:flex-start;margin:4px 0;padding:13px;font-size:14px}.nav span{margin-left:auto;font-size:12px}.nav.active{background:#274452;color:#d3f596}.nav:hover{background:#274452}.sidebottom{margin-top:auto;padding-top:40px}.avatars{display:flex;margin-bottom:18px}.avatars b{background:#bcf159;color:#193343;border:3px solid #102a3b;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.avatars b+b{background:#dae4eb;margin-left:-7px}.sidebottom strong{font-size:14px;color:#e5edf2;display:block;max-width:160px;line-height:1.6}.sidebottom p{font-size:12px}.sidebottom select{background:#274452;color:white;border-color:#3a5667}.sidebottom small{color:#9db1bf}main{margin-left:250px;flex:1;min-width:0}header{height:80px;border-bottom:1px solid #e1e7ed;background:white;display:flex;align-items:center;justify-content:space-between;padding:0 42px;font-size:14px}.slash{color:#adb8c2;margin:0 14px}.members{display:flex;align-items:center;gap:7px}.members>span:last-child{margin-left:7px}.avatar{border-radius:50%;width:30px;height:30px;display:inline-grid;place-items:center;background:#edf5dd;color:#3a6115;font-weight:700;font-size:12px}.avatar.dark{background:#deebf7;color:#285378}.content{padding:38px 42px}.titlebar{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}h1{font:800 32px Manrope;margin:0;letter-spacing:-1px}.titlebar p{font-size:14px;color:#718393;margin:10px 0 0}.primary{background:#193e50;color:white;border-color:#193e50;font-weight:600;font-size:14px;padding:13px 18px}.primary:hover{background:#28556b}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:36px}.stats>div{background:white;border:1px solid #e1e6ec;border-radius:12px;padding:22px 24px;position:relative}.stats>div:first-child{border-top:3px solid #193e50}.stats span{font-size:14px;color:#647686}.stats strong{display:block;font:700 34px Manrope;margin:12px 0 7px}.stats small{color:#81919f}.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:24px}.tabs{display:flex;align-items:center;gap:15px;margin-right:auto}.tabs button{border:0;background:transparent;border-bottom:2px solid #244759;border-radius:0;padding:12px 0;font-weight:700;font-size:14px}.tabs span{font-size:12px;color:#81919f}.search{display:flex;align-items:center;background:white;border:1px solid #dce2e9;border-radius:8px;padding:0 12px;width:270px;color:#7e8d98}.search input{border:0;padding:10px 8px;font-size:14px}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.column h2{font-size:14px;display:flex;align-items:center;gap:8px;font-weight:600;margin:0 0 18px}.column h2 em{font-style:normal;background:#e7edf2;border-radius:5px;padding:3px 6px;margin-left:auto;font-size:12px}.statusdot{width:8px;height:8px;background:#96a5b3;border-radius:50%}.sInuitvoering{background:#4288c1}.sTercontrole{background:#dca048}.sAfgerond{background:#61a275}.card{display:block;text-align:left;width:100%;padding:19px;border:1px solid #e1e6ec;border-radius:11px;margin-bottom:14px;box-shadow:0 2px 3px #18334704}.card:hover{background:white;border-color:#95b1c4;transform:translateY(-2px)}.project{background:#edf2f6;color:#537084;padding:5px 8px;font-size:12px;display:inline-block;border-radius:5px;font-weight:600}.card h3{font:700 16px/1.5 Manrope;margin:15px 0 22px;overflow-wrap:anywhere}.progresslabel{display:flex;justify-content:space-between;font-size:12px;color:#7b8c99}.progresslabel span{display:flex;gap:5px;align-items:center}.progress{height:4px;background:#e9eef2;margin:9px 0 19px;border-radius:4px}.progress i{display:block;background:#85ae47;height:100%;border-radius:4px}.deadline{font-size:12px;display:flex;gap:6px;align-items:center;color:#7a8c9b;line-height:1.5}.deadline.late{color:#b3473c}.card footer{display:flex;align-items:center;gap:7px;border-top:1px solid #edf1f5;padding-top:14px;margin-top:16px;font-size:12px;color:#5d7182}.chainlabel{margin-left:auto;display:flex;gap:5px;align-items:center}.addcolumn{border:1px dashed #d4dfe7;background:transparent;width:100%;font-size:12px;color:#8293a2}.footnote{display:flex;align-items:center;gap:7px;font-size:12px;color:#8795a1;margin-top:30px}.empty{background:white;border:1px dashed #cdd9e2;border-radius:12px;text-align:center;padding:52px 20px}.emptyicon{display:inline-grid;place-items:center;width:70px;height:70px;background:#edf5dd;border-radius:20px;color:#456822}.empty h2{font:700 23px Manrope}.empty p{color:#758694;font-size:14px}.quick{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}.quick button{font-size:14px}.error{background:#fff0eb;color:#9a3f2c;padding:13px;border:1px solid #efcfc4;border-radius:8px;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:18px}.error button{margin-left:auto}.overlay{position:fixed;inset:0;background:#10263866;z-index:10;display:flex;justify-content:center;align-items:center;padding:24px;backdrop-filter:blur(3px)}.modal,.detail{background:white;border-radius:16px;padding:28px;width:540px;max-height:92vh;overflow:auto;box-shadow:0 20px 70px #14293833}.modalhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.modalhead h2{font:800 25px Manrope;margin:0}.modalhead button{padding:8px;border:0}.formrow{display:grid;grid-template-columns:1fr 1fr;gap:15px}.wide{width:100%;margin-top:12px}.hint{font-size:12px;color:#7a8c9a;line-height:1.6;display:block}.detailoverlay{justify-content:flex-end;padding:14px}.detail{width:650px;max-height:calc(100vh - 28px);height:100%;border-radius:12px;padding:30px}.tasktitle{font:800 25px/1.4 Manrope;border:0;padding:0;margin:10px 0}.sectionhead{display:flex;align-items:center;justify-content:space-between;margin-top:28px}.sectionhead h3,.handoff h3{font:700 16px Manrope;display:flex;align-items:center;gap:8px}.sectionhead span{font-size:12px;color:#7e90a0}.step{display:flex;gap:10px;align-items:center;border-bottom:1px solid #e9eef3;padding:11px 0;font-size:14px}.step>input{width:18px;height:18px;accent-color:#426b25;flex-shrink:0}.step>span{flex:1}.step>select{width:83px;font-size:12px;padding:7px}.step.inactive>span{color:#9ca8b0}.needed{display:flex;align-items:center;gap:4px;margin:0;font-size:12px;font-weight:400}.needed input{width:14px;margin:0}.addstep{display:flex;gap:8px;margin-top:15px}.upload{display:block;border:1px dashed #b8cbd8;border-radius:10px;padding:20px;text-align:center;color:#456b83;cursor:pointer}.upload input{padding:0;border:0;font-size:12px}.upload small{display:block;margin-top:8px;color:#8194a0}.file{display:flex;align-items:center;gap:8px;font-size:14px;padding:12px;border-bottom:1px solid #e7edf2;overflow-wrap:anywhere}.file small{margin-left:auto;white-space:nowrap}.handoff{background:#f1f6f8;border:1px solid #dbe6ec;border-radius:12px;padding:20px;margin-top:28px}.handoff h3{margin-top:0}.timeline>div{display:flex;gap:15px;position:relative}.timeline>div>span{width:8px;height:8px;margin-top:19px;background:#8fb056;border-radius:50%;flex-shrink:0}.timeline p{font-size:14px;line-height:1.6}.timeline small{display:block;color:#8a9ba8;margin-top:5px}@media(min-width:1500px){.content{max-width:1550px;margin:auto}}@media(max-width:1150px){aside{width:210px;padding:30px 16px}main{margin-left:210px}.content{padding:30px 24px}.board{grid-template-columns:repeat(2,minmax(0,1fr))}header{padding:0 24px}}@media(max-width:700px){aside{position:static;width:100%;padding:15px;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}.brand{font-size:21px}.brandIcon{height:32px;width:32px}.workspace,.navlabel,.sidebottom{display:none}.nav{width:auto;font-size:12px;margin:0;padding:9px}.nav span{display:none}.shell{display:block}main{margin:0}header{height:56px;font-size:12px;padding:0 18px}.members>span:last-child{display:none}.content{padding:24px 18px}.titlebar{align-items:start;gap:15px}h1{font-size:26px}.titlebar p{font-size:12px}.primary{padding:11px;font-size:12px}.stats{gap:8px}.stats>div{padding:14px 10px}.stats span{font-size:12px}.stats strong{font-size:28px}.stats small{display:none}.toolbar{flex-wrap:wrap}.search{width:100%;order:3}.board{grid-template-columns:1fr}.column{margin-bottom:18px}.overlay{padding:10px}.modal,.detail{padding:20px}.formrow{gap:8px}.step{gap:6px}.step>span{font-size:12px}.step>select{width:70px}.needed{font-size:12px}.footnote{line-height:1.5}}
.members select{font-size:14px;width:85px;padding:7px}
.welcome{text-align:center;width:480px}.welcome .modalhead{margin-bottom:8px}.welcome .eyebrow{margin:0}.welcome-symbol{display:grid;place-items:center;width:70px;height:70px;background:#edf5dd;color:#456822;border-radius:20px;margin:12px auto 22px}.welcome h2{font:800 28px/1.4 Manrope;margin:0 0 15px}.welcome p{line-height:1.6}.welcome .compliment{font-size:14px;color:#647686;background:#f3f6f8;border-radius:10px;padding:16px;margin:22px 0}
.passwordscreen{min-height:100vh;display:grid;place-items:center;background:#102a3b;padding:20px}.passwordscreen label{text-align:left}.lockbutton{position:fixed;bottom:12px;right:12px;font-size:12px;z-index:5}
/* Task timeline and phone layout */
textarea{min-height:140px;line-height:1.6}.tasktitle{width:100%;min-height:80px;resize:vertical}.tasksteps{list-style:none;padding:0;margin:24px 0}.taskstep{display:flex;gap:14px;position:relative;padding:0 0 20px}.taskstep:not(:last-child):before{content:'';position:absolute;top:34px;bottom:0;left:16px;width:2px;background:#dce6ed}.stepmarker{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:50%;background:#e8eef3;color:#607787;font-size:14px;font-weight:700;z-index:1}.complete .stepmarker{background:#deedcb;color:#456822}.current .stepmarker{background:#193e50;color:white}.stepbody{flex:1;min-width:0;border:1px solid #dde6ec;border-radius:10px;padding:15px;background:white}.current .stepbody{border-color:#7697ab;background:#f7fafc}.stepheadline{display:flex;gap:10px;align-items:flex-start;flex-direction:column}.stepheadline label{display:flex;gap:10px;margin:0;font-size:16px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.stepheadline input{width:20px;height:20px;flex:0 0 20px;margin:3px 0 0;accent-color:#456822}.steplabel{font-size:12px;color:#71899a}.complete .steplabel{color:#547d32}.inactive{opacity:.65}.stepcontrols{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:12px}.stepcontrols>label{margin:0;font-size:14px}.stepcontrols select{min-height:44px}.needed input{width:20px;height:20px}.remaining{color:#456b83;font-size:14px}.addstep{display:flex;flex-direction:column}.addstep button{align-self:flex-end;min-height:44px}.datefields{border:0;padding:0;margin:18px 0}.datefields legend{font-size:14px;font-weight:600}.datefields label{margin:8px 0}.urgentchoice{display:flex;align-items:center;gap:10px}.urgentchoice input{width:22px;height:22px;margin:0;accent-color:#c88621}.urgentbadge{display:flex;align-items:center;gap:7px;margin-top:12px;color:#986213;font-size:14px;font-weight:700}.urgentbadge i{width:10px;height:10px;background:#e3a32b;border-radius:50%;box-shadow:0 0 8px #e3a32b66;animation:urgentpulse 1.8s ease-in-out infinite}.urgentcard{border-left:3px solid #e3a32b}@keyframes urgentpulse{0%,100%{opacity:.35;box-shadow:0 0 2px #e3a32b33}50%{opacity:1;box-shadow:0 0 10px #e3a32b88}}@media(prefers-reduced-motion:reduce){.urgentbadge i{animation:none;opacity:1}.card:hover{transform:none}}
@media(max-width:700px){input,textarea,select{font-size:16px!important}button{min-height:44px}.overlay{padding:0}.modal,.detail{border-radius:0;width:100%;max-height:100dvh;height:auto;padding:20px 16px;padding-bottom:max(24px,env(safe-area-inset-bottom));overscroll-behavior:contain}.detail{height:100dvh}.passwordscreen .modal{border-radius:16px}.stats strong{font-size:26px}.formrow{grid-template-columns:1fr}.datefields .formrow{grid-template-columns:1fr 1fr}.datefields input{width:100%;max-width:100%;min-height:48px;padding:9px 6px}.titlebar{flex-direction:column}.titlebar>.primary{width:100%}.nav{font-size:14px}.nav svg{width:17px}.brand{width:100%;margin-bottom:4px}.content{padding:22px 14px 85px}.tasksteps{margin-left:0}.taskstep{gap:9px}.stepbody{padding:12px}.stepheadline label{font-size:16px}.stepcontrols{gap:12px}.stepcontrols>label:first-child{width:100%}.lockbutton{bottom:max(10px,env(safe-area-inset-bottom));right:12px}.members .avatar{display:none}.tasktitle{font-size:23px;min-height:90px}.search input{width:100%}.footnote{flex-wrap:wrap}.file{flex-wrap:wrap}.upload input{max-width:100%}.timeline p{overflow-wrap:anywhere}.remaining{font-size:16px}}