/* Three complete presentation directions over the same CRM and task components. */
:root {
  --bg:#f5f3ec;--bg2:#fffefb;--bg3:#eeede5;
  --text:#253a33;--text2:#59665e;--text3:#69736c;
  --border:#dcded4;--border2:#bcc5b9;
  --green:#305c48;--green-dark:#214533;--green-bg:#e3edda;
  --radius:9px;--radius-lg:16px;
  --q-heading:Georgia,'Times New Roman',serif;
  --q-shadow:0 4px 18px #24382906;--q-card-border:1px solid var(--border);
  --q-capture:#e8eddf;--q-plan:#fffefb;--q-inbox:#f3ecde;--q-crm:#e9eef3;
}
/* Neutral comparison controls stay identical, so the variants are easy to compare. */
.design-review{flex-shrink:0;background:#fff;border-bottom:1px solid #dedfdd;}
.design-review>summary{display:flex;align-items:center;gap:12px;padding:8px 25px;font-size:10px;color:#56655b;cursor:pointer;list-style:none;}
.design-review>summary::-webkit-details-marker{display:none;}
.design-review>summary::after{content:'＋';margin-left:auto;font-size:12px;}
.design-review[open]>summary::after{content:'−';}
.design-review-hint{color:#657168;font-size:9px;}
.design-review>summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;}
.design-lab{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 24px;background:#fff;color:#202826;border-bottom:1px solid #dedfdd;flex-shrink:0;}
.design-lab-intro{display:flex;flex-direction:column;gap:4px;min-width:150px;}
.design-lab-intro>span{font-size:9px;letter-spacing:1.5px;color:#64716b;font-weight:700;}
.design-lab-intro>strong{font-size:13px;font-weight:600;}
.design-options{display:flex;gap:6px;flex:1;max-width:620px;}
.design-choice{display:flex;align-items:center;gap:9px;flex:1;padding:8px 10px;border:1px solid #e1e4e0;border-radius:8px;background:#fff;cursor:pointer;text-align:left;font-family:inherit;color:#25322c;min-width:0;}
.design-choice strong,.design-choice small{display:block;}.design-choice strong{font-size:12px;}.design-choice small{font-size:10px;color:#5c6761;margin-top:2px;white-space:nowrap;}
.design-choice:hover{background:#f5f6f2;}.design-choice[aria-pressed=true]{border-color:#243d31;box-shadow:inset 0 0 0 1px #243d31;background:#f3f6ef;}
.design-swatch{display:flex;align-items:center;justify-content:center;width:29px;height:32px;flex-shrink:0;border-radius:5px;font-size:13px;font-weight:700;}
.swatch-studio{background:#e4ead8;color:#325240;font-family:Georgia,serif;}.swatch-signal{background:#172c4a;color:#b5cafe;}.swatch-panelen{background:#f1d972;color:#26352d;border:1px solid #26352d;box-shadow:2px 2px #26352d;}
.design-description{width:100%;font-size:10px;color:#69746d;margin-top:-11px;line-height:1.4;}
.design-choice:focus-visible,.ni:focus-visible,.btn:focus-visible,.ktab:focus-visible,.mni:focus-visible{outline:3px solid var(--green);outline-offset:3px;}

/* Shared, readable foundation. */
.main,.body-wrap,.content{min-width:0;min-height:0;}
.main{background:var(--bg);}
.nav-sb{width:224px!important;background:var(--bg2)!important;padding:4px 10px 20px;overflow-y:auto;}
.q-brand{padding:28px 14px 26px;display:flex;align-items:center;gap:9px;}
.q-brand-mark{height:44px;width:44px;object-fit:contain;}
.q-brand-name{font-size:24px;font-weight:650;letter-spacing:2px;color:var(--text);line-height:1.1;}
.q-brand-sub{font-size:9px;letter-spacing:1.7px;text-transform:uppercase;color:var(--text2);margin-top:6px;}
.user-pill{margin:0 4px 28px;padding:9px 10px;background:var(--bg3);border-radius:8px;}
.up-av{width:25px;height:25px;font-size:9px;}.up-name{font-size:11px;}
.nav-s{padding:0;margin:0;}.nav-lbl{font-size:9px;letter-spacing:1.5px;padding:0 12px;margin-bottom:12px;}
.ni{border:0;background:transparent;font-family:inherit;width:100%;text-align:left;min-height:43px;padding:10px 12px;margin:3px 0;gap:10px;font-size:12px;border-radius:8px;}
.ni.active{font-weight:650;}.q-nav-icon{display:inline-flex;align-items:center;justify-content:center;width:19px;font-size:17px;flex-shrink:0;}
.ni-badge{font-size:9px;min-width:18px;text-align:center;}.ni-admin{font-size:9px;}
.topbar{padding:12px 26px;min-height:61px;background:var(--bg2);gap:9px;}
.tb-title{font-size:12px;font-weight:600;}.topbar .srch{width:100%;max-width:360px;min-width:70px;}
.ws-selector{border-radius:6px;padding:7px 10px;font-size:11px;}.ws-menu{top:auto;align-self:flex-start;margin-top:36px;}
.btn{padding:7px 12px;font-size:11px;font-weight:500;min-height:31px;}
.btn:disabled{cursor:default;opacity:.55;}.btn:disabled:hover{background:var(--green);color:#fff;}
.btn-p{font-weight:600;}.qf-bar,.af-bar{padding-left:26px;padding-right:26px;}
.content{padding:26px 30px 36px;scrollbar-gutter:stable;}
.pw-dashboard{max-width:1220px;}
.pw-dashboard-header{padding:1px 0 17px;border-bottom:1px solid var(--border);margin-bottom:14px;}
.pw-dashboard-header .pw-eyebrow{text-transform:uppercase;letter-spacing:2px;font-size:9px;margin-bottom:12px;color:var(--text2);}
.pw-dashboard-header .pw-heading{margin:0;}
.pw-dashboard-header h2{font-family:var(--q-heading);font-size:38px;line-height:1.15;font-weight:400;letter-spacing:-1.3px;margin-bottom:9px;}
.pw-dashboard-header .pw-muted{font-size:13px;}
.pw-preferences{font-size:11px;margin-bottom:16px;}
.pw-stats{gap:7px;margin-bottom:25px;}.pw-stats .btn{background:var(--bg2);border:1px solid var(--border);border-radius:30px;padding:8px 14px;}
.pw-stats .btn:last-child{margin-left:auto;background:transparent;border-color:transparent;padding-right:0;color:var(--green-dark);}
.pw-grid{gap:20px;}.pw-lead{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);}
.pw-section,.pw-capture{padding:23px;border:var(--q-card-border);border-radius:var(--radius-lg);box-shadow:var(--q-shadow);margin-bottom:20px;background:var(--bg2);}
.pw-capture{background:var(--q-capture);border-color:#ccd5c0;}
.pw-plan{background:var(--q-plan);}.pw-inbox{background:var(--q-inbox);}.pw-crm{background:var(--q-crm);}
.pw-section h2{font-size:18px;letter-spacing:-.3px;}
.pw-capture h2{font-family:var(--q-heading);font-size:27px;line-height:1.15;font-weight:400;letter-spacing:-.6px;max-width:330px;}
.pw-capture .pw-eyebrow{font-size:9px;letter-spacing:2px;}
.pw-capture .pw-input{background:var(--bg2);border-color:#bec9b5;min-height:128px;font-size:12px;}
.pw-muted{font-size:11px;line-height:1.65;}.pw-label{font-size:11px;}.pw-privacy{font-size:10px;}
.pw-item{padding:16px 0;}.pw-item-title{font-size:12px;}.pw-actions{gap:6px;}.pw-actions .btn{background:var(--bg2);font-size:10px;padding:5px 8px;}.pw-actions .btn-p{background:var(--green);color:#fff;}
.pw-select{font-size:10px;max-width:170px;min-height:30px;}.pw-chip{font-size:10px;}
.pw-tabs{gap:6px;margin-bottom:24px;padding-bottom:14px;}.pw-tabs>.btn{border-color:transparent;border-radius:7px;padding:9px 15px;}
#pg-tasks>.qt-toolbar{margin:0 0 24px;}#pg-tasks>.qt-toolbar h2{font-family:var(--q-heading);font-size:32px;font-weight:400;letter-spacing:-.7px;}
.qt-toolbar{margin-bottom:17px;}.qt-toolbar h2{font-size:18px;}.qt-toolbar p{color:var(--text2);}
.qt-board{gap:14px;grid-template-columns:repeat(4,minmax(220px,1fr));}
.qt-column{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:12px;border-top:3px solid #a0aea0;}
.qt-doing{border-top-color:#7298c7;}.qt-waiting{border-top-color:#c6a35e;}.qt-done{border-top-color:#63917a;}
.qt-column-head{margin:2px 1px 7px;}.qt-column-head h3{font-size:12px;}.qt-hint{line-height:1.5;color:var(--text2);}
.qt-card{border:var(--q-card-border);padding:13px;border-radius:9px;box-shadow:var(--q-shadow);margin-top:10px;}
.qt-title{font-size:12px;}.qt-count{font-size:10px;}.qt-meta{color:var(--text2);}.qt-company{margin-top:6px;font-size:11px;}
.qt-state-label{padding-top:10px;}.qt-state{font-size:10px;}.qt-note{color:var(--text2);}
.co-grid{gap:17px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));}
.co-card{border:var(--q-card-border);padding:20px;border-radius:var(--radius-lg);box-shadow:var(--q-shadow);transition:transform .15s,border-color .15s;}
.co-card:hover{transform:translateY(-2px);border-color:var(--green);}.cc-hd{gap:11px;margin-bottom:12px;}.cc-name{font-size:14px;font-weight:650;}.co-av{width:40px;height:40px;font-size:13px;}
.cc-sub{font-size:11px;}.mr{padding-top:12px;margin-top:12px;gap:9px;}.nasta{margin-top:12px;padding-top:12px;line-height:1.6;}
.ql-pipeline{gap:10px;}.ql-stage{min-width:180px;}.ql-arr{display:none;}
.ql-hd{padding:11px 12px;font-weight:650;font-size:11px;border-radius:11px 11px 0 0;}
.ql-body{padding:9px;min-height:180px;border-radius:0 0 11px 11px;}
.ql-card{padding:12px;margin-bottom:8px;border:var(--q-card-border);box-shadow:var(--q-shadow);border-radius:8px;}
.ql-name{line-height:1.5;font-weight:600;}.ql-meta{line-height:1.7;}.ql-pbar{margin-top:10px;}
.cust-c,.tl-add,.tl-cd,.focus-card{border:var(--q-card-border);border-radius:var(--radius-lg);box-shadow:var(--q-shadow);}
.cust-c{padding:18px;}.cust-l{width:245px;}.cust-wrap{gap:20px;height:auto;}.cust-r{min-height:520px;}
.cust-nm{font-size:17px;font-weight:650;}.cust-f{line-height:1.6;}.kund-tabs{margin-bottom:18px;}.ktab{font-size:11px;padding:10px 12px;}
.panel{box-shadow:-12px 0 40px #25382a0b;width:410px;}.ph{padding:20px;}.pb{padding:20px;}
.pw-grid:has(> :only-child){grid-template-columns:1fr;}

/* B — Signal: a dense blue/ink operations workspace. */
:root[data-design=signal]{
  --bg:#edf1f6;--bg2:#fff;--bg3:#e6ebf2;--text:#1c2b41;--text2:#526279;--text3:#637189;
  --border:#d6dfe9;--border2:#b8c6d8;--green:#315bc1;--green-dark:#26499e;--green-bg:#e3ebff;
  --radius:5px;--radius-lg:8px;--q-heading:inherit;--q-shadow:0 2px 4px #24375105;
  --q-capture:#f6f8fc;--q-plan:#fff;--q-inbox:#fff;--q-crm:#fff;
}
[data-design=signal] .nav-sb{background:#142239!important;border-color:#142239!important;width:208px!important;}
[data-design=signal] .q-brand-name{color:#f2f5ff;}[data-design=signal] .q-brand-sub,[data-design=signal] .nav-sb .nav-lbl{color:#99abc5;}
[data-design=signal] .q-brand-mark{border-radius:50%;background:#fff;}
[data-design=signal] .nav-sb .user-pill{background:#21334e;}[data-design=signal] .nav-sb .up-name{color:#d2e0f8;}[data-design=signal] .nav-sb .up-av{background:#446fd6;}
[data-design=signal] .nav-sb .ni{color:#b9c8de;min-height:40px;font-size:11px;border-radius:5px;}
[data-design=signal] .nav-sb .ni:hover{background:#21334e;}[data-design=signal] .nav-sb .ni.active{background:#2c4a78;color:#fff;box-shadow:inset 3px 0 #9abbff;}
[data-design=signal] .topbar{min-height:53px;padding:10px 25px;}[data-design=signal] .content{padding:22px 25px 32px;}
[data-design=signal] .pw-dashboard-header h2{font-size:30px;font-weight:650;letter-spacing:-1px;}
[data-design=signal] .pw-dashboard-header{padding-bottom:15px;}[data-design=signal] .pw-stats{margin-bottom:19px;}
[data-design=signal] .pw-stats .btn{border-radius:5px;}[data-design=signal] .pw-lead{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);}
[data-design=signal] .pw-section,[data-design=signal] .pw-capture{padding:20px;border-radius:8px;}
[data-design=signal] .pw-capture{border-color:var(--border);border-top:3px solid #7896ca;}
[data-design=signal] .pw-plan{border-top:3px solid #315bc1;}[data-design=signal] .pw-inbox{border-top:3px solid #c4a45a;}[data-design=signal] .pw-crm{border-top:3px solid #57887d;}
[data-design=signal] .pw-capture h2{font-size:22px;font-weight:650;letter-spacing:-.5px;}[data-design=signal] .pw-capture .pw-input{border-color:var(--border2);}
[data-design=signal] .pw-section h2{font-size:16px;}[data-design=signal] .pw-item{padding:12px 0;}
[data-design=signal] #pg-tasks>.qt-toolbar h2{font-size:28px;font-weight:650;}
[data-design=signal] .co-grid{grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:12px;}[data-design=signal] .co-card{padding:16px;}
[data-design=signal] .qt-board{gap:10px;}[data-design=signal] .qt-column{border-radius:6px;padding:9px;}[data-design=signal] .qt-card{padding:11px;border-radius:5px;}
[data-design=signal] .ql-stage{min-width:170px;}[data-design=signal] .ql-hd{border-radius:6px 6px 0 0;}[data-design=signal] .ql-body{border-radius:0 0 6px 6px;}

/* C — Panelen: bold pastel blocks and top navigation instead of a side rail. */
:root[data-design=panelen]{
  --bg:#f4f1e8;--bg2:#fffdf7;--bg3:#eae6da;--text:#242f2c;--text2:#505c54;--text3:#626c63;
  --border:#c8c8ba;--border2:#8e998d;--green:#314d3f;--green-dark:#233b2e;--green-bg:#e1edc8;
  --radius:7px;--radius-lg:13px;--q-heading:inherit;--q-shadow:3px 3px 0 #283b32;
  --q-card-border:1.5px solid #334239;--q-capture:#e2ebc9;--q-plan:#f7e39f;--q-inbox:#eddccf;--q-crm:#dce7f6;
}
[data-design=panelen] .app{flex-direction:column;}
[data-design=panelen] .nav-sb{width:100%!important;flex-direction:row!important;align-items:center;padding:0 24px;gap:20px;border-right:0!important;border-bottom:1.5px solid #334239;overflow:visible;min-height:78px;}
[data-design=panelen] .q-brand{padding:10px 0;gap:4px;}[data-design=panelen] .q-brand-mark{width:40px;height:40px;}[data-design=panelen] .q-brand-name{font-size:21px;}[data-design=panelen] .q-brand-sub{font-size:8px;letter-spacing:.7px;}
[data-design=panelen] .nav-sb .user-pill{order:3;margin:0 0 0 auto;padding:8px;flex-shrink:0;}
[data-design=panelen] .nav-sb .nav-s{display:flex;align-items:center;gap:4px;flex:1;}
[data-design=panelen] .nav-sb .nav-lbl{display:none;}[data-design=panelen] .nav-sb .ni{width:auto;white-space:nowrap;font-size:11px;gap:7px;padding:9px 11px;min-height:40px;border:1px solid transparent;}
[data-design=panelen] .nav-sb .ni.active{background:#f6df89;border-color:#334239;box-shadow:2px 2px #334239;}
[data-design=panelen] .q-nav-icon{font-size:15px;width:16px;}[data-design=panelen] .ni-admin{display:none;}
[data-design=panelen] .topbar{background:#263c31;color:#f3f6e9;border:0;min-height:56px;padding:10px 30px;}
[data-design=panelen] .topbar .btn:not(.btn-p){background:#344d3f;color:#f3f6e9;border-color:#718072;}
[data-design=panelen] .topbar .btn-p{background:#f5df94;color:#263c31;border-color:#f5df94;}
[data-design=panelen] .topbar .srch{background:#344d3f;border-color:#6f8171;color:#fff;}[data-design=panelen] .topbar .srch::placeholder{color:#c2cebf;}
[data-design=panelen] .topbar .ws-menu{color:var(--text);}
[data-design=panelen] .content{padding:26px 36px 40px;}
[data-design=panelen] .pw-dashboard{max-width:1290px;}[data-design=panelen] .pw-dashboard-header{border:0;padding-bottom:4px;}
[data-design=panelen] .pw-dashboard-header h2{font-size:40px;font-weight:800;letter-spacing:-1.8px;}
[data-design=panelen] .pw-preferences{margin-bottom:12px;}[data-design=panelen] .pw-stats{margin-bottom:24px;}
[data-design=panelen] .pw-lead{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);}
[data-design=panelen] .pw-section,[data-design=panelen] .pw-capture{border:var(--q-card-border);border-radius:13px;}
[data-design=panelen] .pw-capture h2{font-size:29px;font-weight:800;letter-spacing:-1px;}[data-design=panelen] .pw-section h2{font-size:20px;font-weight:750;}
[data-design=panelen] .pw-capture .pw-input{border:1px solid #728164;box-shadow:inset 0 -3px #e1e4d4;}
[data-design=panelen] .pw-item{border-color:#394b362d;}[data-design=panelen] .pw-stats .btn{border-radius:7px;border-color:#899583;}
[data-design=panelen] .pw-tabs .btn[aria-pressed=true]{background:#f6df89;color:#263c31;border-color:#334239;box-shadow:2px 2px #334239;}
[data-design=panelen] #pg-tasks>.qt-toolbar h2{font-size:36px;font-weight:800;letter-spacing:-1.3px;}
[data-design=panelen] .qt-column{background:#e9e5d9;border:1px solid #aab2a1;border-radius:12px;padding:13px;}
[data-design=panelen] .qt-doing{background:#dce7f6;}[data-design=panelen] .qt-waiting{background:#f4e4ac;}[data-design=panelen] .qt-done{background:#e0ebcc;}
[data-design=panelen] .qt-card{box-shadow:2px 2px #344536;border-radius:8px;margin-top:13px;}[data-design=panelen] .qt-column-head h3{font-size:13px;}
[data-design=panelen] .co-card{padding:21px;}.co-card:focus-visible{outline:3px solid var(--green);outline-offset:3px;}
[data-design=panelen] .ql-pipeline{gap:14px;padding-bottom:8px;}[data-design=panelen] .ql-stage{min-width:184px;}
[data-design=panelen] .ql-hd{border:1.5px solid #334239;border-bottom:0;}[data-design=panelen] .ql-body{border:1.5px solid #334239;border-top:0;}
[data-design=panelen] .ql-card{box-shadow:2px 2px #344536;}

/* Narrow desktop and mobile preserve all controls, even inside a customer board. */
@media(min-width:769px) and (max-width:1160px){
  [data-design=panelen] .nav-sb{gap:9px;padding:0 12px;}
  [data-design=panelen] .nav-sb .ni{padding:8px;font-size:10px;gap:4px;}
  [data-design=panelen] .nav-sb .user-pill .up-name,[data-design=panelen] .nav-sb .q-nav-icon{display:none;}
  .design-lab{gap:12px;padding:12px 20px;}.design-lab-intro{min-width:130px;}
}
@media(max-width:900px){.pw-lead{grid-template-columns:1fr!important;}.pw-grid{gap:14px;}.pw-crm-row{align-items:flex-start;}.pw-crm-row>.btn{white-space:normal;}.content{padding:22px 20px;}}
@media(max-width:768px){
  .design-lab{padding:10px 12px;gap:9px;}.design-lab-intro{width:100%;flex-direction:row;align-items:center;justify-content:space-between;}.design-lab-intro>strong{font-size:11px;}
  .design-options{max-width:none;width:100%;gap:5px;}.design-choice{padding:7px 8px;gap:7px;}.design-swatch{width:23px;height:26px;font-size:11px;}.design-choice small{display:none;}.design-choice strong{font-size:11px;}.design-description{font-size:9px;margin-top:0;}
  .topbar,[data-design=signal] .topbar,[data-design=panelen] .topbar{padding:9px 12px;min-height:54px;flex-wrap:wrap;gap:6px;}
  .topbar>.ws-selector{max-width:125px;}.topbar .btn{font-size:10px;min-height:32px;}.ws-name{max-width:85px;}
  .content,[data-design=signal] .content,[data-design=panelen] .content{padding:20px 13px 90px;scrollbar-gutter:auto;}
  .pw-dashboard-header h2,[data-design=signal] .pw-dashboard-header h2,[data-design=panelen] .pw-dashboard-header h2{font-size:31px;}
  .pw-grid{grid-template-columns:1fr!important;gap:0;}.pw-section,.pw-capture,[data-design=signal] .pw-section,[data-design=signal] .pw-capture{padding:19px;}
  .pw-stats{gap:6px;}.pw-stats .btn{padding:7px 10px;font-size:10px;}.pw-stats .btn:last-child{margin:0;}
  .pw-crm-row{flex-direction:column;gap:8px;}.pw-capture-actions>.btn{width:100%;margin:0;}
  .qt-board{grid-template-columns:repeat(4,minmax(240px,80vw));padding-bottom:14px;}.qt-card{max-width:100%;}
  .co-grid,[data-design=signal] .co-grid{grid-template-columns:1fr;}.ql-stage,[data-design=signal] .ql-stage,[data-design=panelen] .ql-stage{min-width:190px;}
  .cust-l{width:100%;}.cust-wrap{gap:15px;}.cust-r{min-height:400px;}.panel{width:100%;bottom:calc(60px + env(safe-area-inset-bottom,0px));}
  .kund-tabs{overflow-x:auto;}.ktab{flex-shrink:0;}.qf-bar,.af-bar{padding-left:12px;padding-right:12px;}
  .mob-nav{box-shadow:0 -4px 20px #263c310d;}.mni{font-size:9px;min-height:60px;}.mni.active{background:var(--green-bg);color:var(--green-dark);}
}
@media(prefers-reduced-motion:reduce){.co-card,.ni,.btn{transition:none;}.co-card:hover{transform:none;}}