/* Interactive product demo ("demo video" without a video file): an app window whose
   content plays short CSS sequences. Clicking a feature (tab or sidebar item) swaps
   the scene. Every element reveals itself after its own --d delay. */
.scn{--stage-h:26em;font-size:14px;max-width:1080px;margin:40px auto 0;text-align:left}
.scn-prods{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-bottom:18px}
.scn-prods button{font:700 .98rem/1 var(--f);padding:.7rem 1.1rem;border-radius:999px;border:1.5px solid var(--line-2);background:var(--bg);color:var(--ink-2);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.scn-prods button::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--cyan)}
.scn-prods button:hover{border-color:var(--cyan);color:var(--ink)}
.scn-prods button[aria-selected=true]{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan)}
.scn-prods button[aria-selected=true]::before{background:var(--on-cyan)}
.scn-frame{position:relative;border-radius:22px;padding:12px;background:linear-gradient(135deg,var(--c-crm),var(--c-web) 50%,var(--c-cs));box-shadow:var(--shadow)}
.scn-win{display:grid;grid-template-columns:200px minmax(0,1fr);border-radius:13px;overflow:hidden;background:var(--bg)}
.scn-side{background:var(--band);color:var(--band-muted);padding:16px 10px;display:flex;flex-direction:column;gap:3px}
.scn-side b{color:var(--band-ink);font-size:1rem;padding:0 8px}
.scn-side small{display:block;padding:0 8px 12px;font-size:.78rem;color:var(--band-muted)}
.scn-side button{all:unset;display:flex;align-items:center;gap:.55rem;padding:.55rem .6rem;border-radius:7px;font-size:.88rem;cursor:pointer;line-height:1.3}
.scn-side button i{width:8px;height:8px;border-radius:3px;background:var(--band-muted);flex:none;opacity:.6}
.scn-side button:hover{background:var(--band-2);color:var(--band-ink)}
.scn-side button.on{background:var(--band-2);color:var(--band-ink);font-weight:700}
.scn-side button.on i{background:var(--cyan);opacity:1}
.scn-main{display:flex;flex-direction:column;min-width:0}
.scn-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:12px 18px;border-bottom:1px solid var(--line)}
.scn-top b{font-size:1rem;margin-right:auto}
.scn-chip{font-size:.72rem;font-weight:700;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;white-space:nowrap}
.scn-stage{position:relative;height:var(--stage-h);padding:18px;overflow:hidden;background:var(--bg-2)}
.scn-prog{height:3px;background:var(--line)}
.scn-prog i{display:block;height:100%;width:100%;background:var(--cyan);transform-origin:left;transform:scaleX(0)}
.scn.playing .scn-prog i{animation:scnFill var(--dur,7s) linear forwards}
.scn.paused .scn-prog i{animation-play-state:paused}
.scn.manual .scn-prog{visibility:hidden}
.scn-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:16px}
.scn-feats button{font:600 .9rem/1.2 var(--f);padding:.55rem .95rem;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink-2);cursor:pointer}
.scn-feats button:hover{border-color:var(--cyan)}
.scn-feats button[aria-selected=true]{border-color:var(--cyan);color:var(--ink);font-weight:800;box-shadow:inset 0 0 0 1px var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,var(--bg))}
.scn-cap{text-align:center;margin-top:12px;color:var(--ink-3);font-size:.95rem}
.scn-cap a{font-weight:800;color:var(--cyan);text-decoration:none;margin-left:.3rem;white-space:nowrap}

/* timing primitives */
.scn .a{opacity:0;animation:scnIn .45s cubic-bezier(.2,.7,.3,1) var(--d,0s) forwards}
.scn .o{animation:scnIn .3s ease var(--d,0s) both,scnOut .3s ease var(--o,2s) forwards}
.scn .lit{animation:scnLit .4s ease var(--l,0s) forwards}
.scn .a.lit{animation:scnIn .45s cubic-bezier(.2,.7,.3,1) var(--d,0s) forwards,scnLit .4s ease var(--l,0s) forwards}
.scn .fx{transform:scaleX(0);transform-origin:left;animation:scnFill var(--t,1s) ease var(--d,0s) forwards}
.scn .tap{animation:scnTap .7s ease var(--d,0s) 2}
.scn .swap{display:inline-grid}
.scn .swap > *{grid-area:1/1}
@keyframes scnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes scnOut{to{opacity:0;visibility:hidden}}
@keyframes scnFill{to{transform:none}}
@keyframes scnLit{to{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 13%,var(--bg));color:var(--ink)}}
@keyframes scnTap{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--cyan) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}
@keyframes scnDot{0%,80%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes scnScan{from{top:0}to{top:calc(100% - 3px)}}
/* reduced motion: show the last frame, no autoplay */
.scn.still .a,.scn.still .o{animation:none;opacity:1}
.scn.still .o{display:none}
.scn.still .lit{animation:none;border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 13%,var(--bg))}
.scn.still .fx{animation:none;transform:none}
.scn.still .tap,.scn.still .scan::after{animation:none}

/* scene building blocks */
.scn-stage .g2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:14px;height:100%}
.scn-stage .g2.wide{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.scn-stage .col{display:flex;flex-direction:column;gap:10px;min-width:0}
.scn-stage .pane{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.scn-stage .ph{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:.9rem;padding-bottom:8px;border-bottom:1px solid var(--line)}
.scn-stage .ph small{font-weight:600;color:var(--ink-3)}
.scn-stage .item{display:flex;gap:10px;align-items:center;padding:8px;border-radius:9px;border:1px solid transparent}
.scn-stage .av{width:30px;height:30px;border-radius:8px;flex:none;display:grid;place-items:center;font-weight:800;font-size:.75rem;color:#fff;background:var(--cyan)}
.scn-stage .it{flex:1;min-width:0}
.scn-stage .it b{display:block;font-size:.88rem}
.scn-stage .it span{display:block;font-size:.8rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn-stage .ch{display:inline-block;font-size:.62rem;font-weight:800;padding:.1rem .35rem;border-radius:4px;color:#fff;margin-left:.3rem;vertical-align:1px}
.scn-stage .wa{background:#1F9D55}.scn-stage .ig{background:#C13584}.scn-stage .fb{background:#1877F2}.scn-stage .tt{background:#111827}.scn-stage .sp{background:#EE4D2D}.scn-stage .wb{background:#4F46E5}
.scn-stage .num{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--cyan);color:#fff;font-size:.72rem;font-weight:800;display:grid;place-items:center}
.scn-stage .num.z{background:var(--line-2);color:var(--ink-3)}
.scn-stage .bub{max-width:88%;padding:9px 12px;border-radius:12px 12px 12px 4px;background:var(--bg-3);font-size:.88rem;line-height:1.45}
.scn-stage .bub.me{align-self:flex-end;border-radius:12px 12px 4px 12px;background:color-mix(in srgb,var(--cyan) 16%,var(--bg));border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent)}
.scn-stage .bub small{display:block;margin-top:4px;font-size:.72rem;color:var(--ink-3)}
.scn-stage .dots{display:inline-flex;gap:4px;padding:11px 14px;border-radius:12px;background:var(--bg-3);align-self:flex-end}
.scn-stage .dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:scnDot 1s infinite}
.scn-stage .dots i:nth-child(2){animation-delay:.15s}.scn-stage .dots i:nth-child(3){animation-delay:.3s}
.scn-stage .tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;padding:.3rem .65rem;border-radius:999px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink-2)}
.scn-stage .tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.scn-stage .arr{color:var(--ink-3);font-weight:800}
.scn-stage .kv{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;padding:7px 0;border-bottom:1px dashed var(--line)}
.scn-stage .kv span{color:var(--ink-3)}
.scn-stage .kv b{text-align:right}
.scn-stage .toast{position:absolute;left:18px;bottom:18px;display:flex;gap:10px;align-items:center;padding:11px 14px;border-radius:12px;background:var(--band);color:var(--band-ink);font-size:.86rem;font-weight:600;box-shadow:var(--shadow);max-width:70%}
.scn-stage .toast::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ok);flex:none}
.scn-stage .ok{color:var(--ok);font-weight:800}
.scn-stage .tl{display:grid;gap:8px}
.scn-stage .tl .item{border-color:var(--line);background:var(--bg)}
.scn-stage .when{font-size:.75rem;font-weight:800;color:var(--cyan);min-width:72px}
.scn-stage .ck{width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--ok);color:#fff;font-size:.7rem;font-weight:900}
.scn-stage .tabs{display:flex;gap:8px}
.scn-stage .tabs > div{flex:1;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 11px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-weight:700;font-size:.86rem}
.scn-stage .clock{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.scn-stage .trk{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.scn-stage .trk div{padding:8px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font-size:.76rem;font-weight:700;color:var(--ink-3);text-align:center;line-height:1.3}
.scn-stage .kan{display:grid;grid-template-columns:1fr 1fr;gap:12px;height:100%}
.scn-stage .kan .pane{gap:8px}
.scn-stage .kc{padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);font-size:.84rem;display:flex;justify-content:space-between;gap:8px;align-items:center}
.scn-stage .flag{font-size:.7rem;font-weight:800;color:#fff;background:#DC2626;border-radius:999px;padding:.12rem .45rem}
.scn-stage .brow{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.scn-stage .url{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);font-size:.78rem;color:var(--ink-3)}
.scn-stage .url i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.scn-stage .url span{flex:1;padding:.2rem .6rem;border-radius:6px;background:var(--bg-2)}
.scn-stage .load{height:3px;background:var(--cyan)}
.scn-stage .site{padding:14px;display:flex;flex-direction:column;gap:10px;flex:1;position:relative}
.scn-stage .hero-b{padding:16px;border-radius:10px;background:linear-gradient(120deg,color-mix(in srgb,var(--cyan) 22%,var(--bg)),var(--bg-2))}
.scn-stage .hero-b b{display:block;font-size:1.15rem}
.scn-stage .hero-b span{font-size:.82rem;color:var(--ink-2)}
.scn-stage .pbtn{display:inline-block;margin-top:8px;padding:.35rem .8rem;border-radius:7px;background:var(--cyan);color:#fff;font-size:.78rem;font-weight:800}
.scn-stage .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.scn-stage .blk{padding:10px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);font-size:.8rem;font-weight:700}
.scn-stage .blk small{display:block;font-weight:500;color:var(--ink-3)}
.scn-stage .img{height:46px;border-radius:7px;margin-bottom:6px;background:linear-gradient(135deg,color-mix(in srgb,var(--cyan) 35%,var(--bg)),color-mix(in srgb,var(--c-web) 25%,var(--bg)))}
.scn-stage .wa-fab{position:absolute;right:14px;bottom:14px;width:42px;height:42px;border-radius:50%;background:#1F9D55;color:#fff;display:grid;place-items:center;font-weight:900;font-size:.8rem}
.scn-stage .phone{width:150px;border-radius:20px;border:6px solid var(--band);background:var(--bg);padding:10px 8px;display:flex;flex-direction:column;gap:8px;align-self:center;min-height:200px}
.scn-stage .notif{padding:8px 9px;border-radius:10px;background:var(--bg-3);font-size:.76rem;line-height:1.35}
.scn-stage .notif b{display:block;font-size:.78rem}
.scn-stage .cart{position:relative;font-weight:800;font-size:.85rem}
.scn-stage .badge{position:absolute;top:-8px;right:-14px;min-width:18px;height:18px;border-radius:999px;background:#DC2626;color:#fff;font-size:.68rem;display:grid;place-items:center}
.scn-stage .add{display:inline-block;margin-top:6px;padding:.2rem .55rem;border-radius:6px;border:1px solid var(--cyan);color:var(--cyan);font-size:.72rem;font-weight:800}
.scn-stage .steps{display:flex;gap:6px}
.scn-stage .steps div{flex:1;padding:8px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font-size:.78rem;font-weight:700;text-align:center;color:var(--ink-3)}
.scn-stage .opt{display:flex;justify-content:space-between;padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:var(--bg);font-size:.84rem;font-weight:600}
.scn-stage .paid{display:flex;align-items:center;gap:10px;padding:12px;border-radius:10px;background:color-mix(in srgb,var(--ok) 12%,var(--bg));border:1px solid color-mix(in srgb,var(--ok) 35%,transparent);font-weight:800}
.scn-stage .node{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);font-weight:700;font-size:.88rem}
.scn-stage .node .ck{margin-left:auto}
.scn-stage .trig{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.scn-stage .trig div{padding:12px 6px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);text-align:center;font-weight:700;font-size:.84rem;color:var(--ink-3)}
.scn-stage .core{align-self:center;padding:14px 22px;border-radius:14px;border:1.5px solid var(--line);background:var(--bg);font-weight:800;text-align:center}
.scn-stage .core small{display:block;font-weight:600;color:var(--ink-3)}
.scn-stage .doc{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.scn-stage .doc .ln{height:7px;border-radius:4px;background:var(--line)}
.scn-stage .scan::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--cyan);box-shadow:0 0 14px 4px color-mix(in srgb,var(--cyan) 45%,transparent);animation:scnScan .9s ease-in-out .3s 2 alternate both}
.scn-stage .bars{display:grid;gap:9px}
.scn-stage .bars div{display:grid;grid-template-columns:90px 1fr;gap:10px;align-items:center;font-size:.82rem;font-weight:600}
.scn-stage .bars i{display:block;height:12px;border-radius:6px;background:var(--cyan)}
.scn-stage .vline{display:flex;flex-direction:column;gap:8px}
.scn-stage .down{align-self:center;color:var(--ink-3);font-weight:800;line-height:1}

@media (max-width:900px){
  .scn{--stage-h:auto;font-size:13px;margin-top:28px}
  .scn-frame{padding:7px;border-radius:15px}
  .scn-win{grid-template-columns:minmax(0,1fr)}
  .scn-side{display:none}
  .scn-stage{min-height:23em;padding:12px}
  .scn-stage .g2,.scn-stage .g2.wide,.scn-stage .kan{grid-template-columns:minmax(0,1fr);height:auto}
  .scn-stage .toast{position:static;max-width:none;margin-top:10px}
  .scn-stage .phone{width:100%;min-height:0;border-width:4px}
  .scn-stage .trk{grid-template-columns:1fr 1fr}
  .scn-stage .trig{grid-template-columns:1fr 1fr}
  .scn-prods{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .scn-prods button{flex:none}
}
.scn-stage .url .cart{flex:none;background:none;padding:0 .2rem;margin-right:14px;color:var(--ink)}
.scn-stage .url .badge{flex:none;padding:0;background:#DC2626;border-radius:999px;color:#fff}
.scn-stage .url .badge b{font-size:.68rem}
.scn-stage .site .g3 .img{height:34px}

/* Inside a blue section the app window keeps the normal page colours and product accents. */
.tone-blue .scn-frame{--bg:#FFFFFF;--bg-2:#F5F8FD;--bg-3:#EAF1FB;--ink:#0B1A33;--ink-2:#33465F;--ink-3:#5E7190;--line:#D3DEEE;--line-2:#B9CBE5;--ok:#15803D;--on-cyan:#FFFFFF;color:var(--ink)}
@media (prefers-color-scheme: dark){.tone-blue .scn-frame{--bg:#0A1526;--bg-2:#0F1D33;--bg-3:#152642;--ink:#F2F6FD;--ink-2:#C6D3E6;--ink-3:#8FA3C0;--line:#22385A;--line-2:#2F4B73;--ok:#4ADE80;--on-cyan:#06142B}}
.tone-blue .scn[data-c=crm] .scn-frame{--cyan:var(--c-crm)}.tone-blue .scn[data-c=cs] .scn-frame{--cyan:var(--c-cs)}
.tone-blue .scn[data-c=web] .scn-frame{--cyan:var(--c-web)}.tone-blue .scn[data-c=auto] .scn-frame{--cyan:var(--c-auto)}
.tone-blue .scn-frame{background:rgba(255,255,255,.22)}

/* frozen while off screen; the replay button restarts the current scene */
.scn.off .scn-stage *,.scn.off .scn-prog i{animation-play-state:paused!important}
.scn-replay{font:600 .74rem/1 var(--f);color:var(--ink-3);background:none;border:1px solid var(--line);border-radius:999px;padding:.3rem .65rem;cursor:pointer;white-space:nowrap}
.scn-replay:hover{color:var(--ink);border-color:var(--line-2)}
.scn.still .scn-replay{display:none}
.scn-stage .site{padding:12px;gap:8px}
.scn-stage .hero-b{padding:12px 14px}
@media (max-width:900px){.scn-stage .when{min-width:52px}.scn-stage .item{gap:8px}}
@media (max-width:600px){
  .scn-top{padding:10px 12px}
  .scn-top b{font-size:.92rem;line-height:1.3}
  .scn-chip{display:none}
  .scn-stage .tl .item{flex-wrap:wrap;row-gap:2px}
  .scn-stage .tl .when{flex-basis:100%}
  .scn-stage .tl .it{flex:1 1 0}
}


/* ---- Spark CRM console skin for the CRM demo (.scn.k): the console's lavender theme ---- */
.scn.k{--k-f:'Inter','Plus Jakarta Sans',sans-serif;--k-mono:var(--k-f);
  --k-bg:#F4F3FB;--k-panel:#FFFFFF;--k-panel2:#F1F0F9;--k-ink:#2B2846;--k-ink2:#67658A;--k-ink3:#9C9AB8;--k-line:#ECEAF6;--k-line2:#DCD9EE;
  --k-brand:#6D5AE6;--k-brand-ink:#FFFFFF;--k-brand-soft:#EFECFD;--k-accent:#A9750E;--k-accent-soft:#FCF3DF;
  --k-good:#14936F;--k-good-soft:#E2F6EF;--k-warn:#C2601A;--k-warn-soft:#FDEEE2;--k-danger:#D9405F;--k-danger-soft:#FDE8EE;
  --k-grad:linear-gradient(90deg,#8E6CF5 0%,#6E86F7 100%);--k-sh:0 4px 22px -6px rgba(84,70,170,.12),0 1px 2px rgba(84,70,170,.05);
  --k-side:#2F2753;--k-side2:#3A3066;--k-side-ink2:#C9C4E8;--k-side-ink3:#8F89B6;--k-side-line:rgba(255,255,255,.08);--k-badge:#F0567A}
@media (prefers-color-scheme:dark){.scn.k{--k-bg:#191530;--k-panel:#211C38;--k-panel2:#2A2445;--k-ink:#EEECFA;--k-ink2:#B3AED3;--k-ink3:#8781AC;--k-line:#2F294C;--k-line2:#3D3660;
  --k-brand:#9A8CFF;--k-brand-ink:#FFFFFF;--k-brand-soft:#2E2758;--k-accent:#E3B341;--k-accent-soft:#352B14;--k-good:#3FC79B;--k-good-soft:#14302A;--k-warn:#EE9450;--k-warn-soft:#3A2716;--k-danger:#F27596;--k-danger-soft:#3D1A2A;
  --k-sh:0 4px 22px -6px rgba(0,0,0,.45);--k-side:#120F24;--k-side2:#1B1636}}
/* map the engine's tokens onto the console's so .pane/.kv/.bub/.toast keep working */
.scn.k .scn-win{--bg:var(--k-panel);--bg-2:var(--k-bg);--bg-3:var(--k-panel2);--ink:var(--k-ink);--ink-2:var(--k-ink2);--ink-3:var(--k-ink3);--line:var(--k-line);--line-2:var(--k-line2);
  --cyan:var(--k-brand);--on-cyan:var(--k-brand-ink);--ok:var(--k-good);--band:var(--k-panel);--band-ink:var(--k-ink);--band-muted:var(--k-ink2);--band-2:var(--k-panel2);
  font-family:var(--k-f);font-size:13px;color:var(--k-ink);grid-template-columns:208px minmax(0,1fr)}
.scn.k .scn-stage{background:var(--k-bg);padding:0}      /* console pages are edge-to-edge; scenes add their own padding */
.scn.k .scn-top{background:var(--k-panel)}
.scn.k .scn-top b{font-size:15px;font-weight:700}
.scn.k .scn-top b small{display:block;font-size:11.5px;font-weight:400;color:var(--k-ink2);margin-top:1px}
.scn.k .mono{font-family:var(--k-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
/* rail */
.scn.k .scn-side{background:var(--k-panel);color:var(--k-ink2);border-right:1px solid var(--k-line);padding:14px 10px;gap:4px}
.scn.k .k-brand{display:flex;align-items:center;gap:8px;padding:4px 8px 12px;font-weight:800;font-size:15px;color:var(--k-ink);letter-spacing:-.02em}
.scn.k .k-mark{width:24px;height:24px;border-radius:7px;background:var(--k-brand);display:grid;place-items:center;flex:none}
.scn.k .k-mark::after{content:"";width:9px;height:9px;border-radius:2px 7px 2px 7px;background:var(--k-accent)}
.scn.k .k-bell{margin-left:auto;position:relative;width:30px;height:30px;display:grid;place-items:center;color:var(--k-ink2)}
.scn.k .k-bell svg{width:19px;height:19px}
.scn.k .k-bell em{position:absolute;top:0;right:0;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--k-danger);color:#fff;font:700 9.5px/16px var(--k-mono);text-align:center;font-style:normal;box-shadow:0 0 0 2px var(--k-panel)}
.scn.k .k-div{display:flex;align-items:center;gap:4px;padding:0 8px 10px;font-size:11px;color:var(--k-ink3)}
.scn.k .k-div b{margin-left:auto;font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;border:1px solid transparent;color:var(--k-ink2)}
.scn.k .k-div b + b{margin-left:0}
.scn.k .k-div b.on{background:var(--k-brand);border-color:var(--k-brand);color:var(--k-brand-ink)}
.scn.k .k-search{display:flex;align-items:center;gap:7px;margin:2px 0 6px;padding:7px 9px;border-radius:8px;background:var(--k-bg);border:1px solid var(--k-line);color:var(--k-ink3);font-size:12px}
.scn.k .k-search svg{width:14px;height:14px}
.scn.k .k-search kbd{margin-left:auto;font:500 9.5px var(--k-mono);background:var(--k-panel2);padding:1px 6px;border-radius:5px}
.scn.k .scn-side button{all:unset;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;font-size:13px;font-weight:500;color:var(--k-ink2);cursor:pointer;line-height:1.3}
.scn.k .scn-side button svg{width:16px;height:16px;flex:none}
.scn.k .scn-side button[aria-disabled]{cursor:default}
.scn.k .scn-side button:hover:not([aria-disabled]){background:var(--k-panel2);color:var(--k-ink)}
.scn.k .scn-side button.on{background:var(--k-brand-soft);color:var(--k-brand);font-weight:600}
@media (prefers-color-scheme:dark){.scn.k .scn-side button.on{background:var(--k-brand);color:var(--k-brand-ink)}}
.scn.k .scn-side .count{margin-left:auto;font:600 10px var(--k-mono);background:var(--k-panel2);color:var(--k-ink2);padding:1px 6px;border-radius:20px;font-style:normal}
.scn.k .scn-side button.on .count{background:var(--k-brand);color:var(--k-brand-ink)}
@media (prefers-color-scheme:dark){.scn.k .scn-side button.on .count{background:var(--k-brand-ink);color:var(--k-brand)}}
.scn.k .scn-side-foot{margin-top:auto;border-top:1px solid var(--k-line);padding-top:10px;display:flex;flex-direction:column;gap:4px}
.scn.k .k-who{display:flex;align-items:center;gap:8px;padding:6px 8px}
.scn.k .k-who i{width:26px;height:26px;border-radius:50%;background:var(--k-brand-soft);color:var(--k-brand);display:grid;place-items:center;font:700 11px var(--k-f);font-style:normal}
.scn.k .k-who b{display:block;font-size:12.5px;color:var(--k-ink)}
.scn.k .k-who small{font:500 10px var(--k-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink3)}
/* page chrome inside the stage */
.scn.k .k-page{display:flex;flex-direction:column;height:100%;min-height:0}
.scn.k .k-top{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--k-panel);border-bottom:1px solid var(--k-line);flex:none}
.scn.k .k-top h4{margin:0;font-size:14px;font-weight:700;color:var(--k-ink)}
.scn.k .k-top p{margin:0;font-size:11.5px;color:var(--k-ink2)}
.scn.k .k-live{margin-left:auto;display:inline-flex;gap:6px;align-items:center;font:500 10px var(--k-mono);color:var(--k-ink3);text-transform:uppercase;letter-spacing:.08em}
.scn.k .k-live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--k-good)}
.scn.k .k-tabs{display:flex;gap:4px;padding:6px 14px;background:var(--k-panel);border-bottom:1px solid var(--k-line);overflow:hidden;flex:none}
.scn.k .k-tabs span{padding:4px 9px;border-radius:7px;font-size:12px;font-weight:600;color:var(--k-ink2);white-space:nowrap}
.scn.k .k-tabs span.on{background:var(--k-brand-soft);color:var(--k-brand)}
.scn.k .k-pad{padding:14px;display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
/* chips, dots */
.scn.k .k-chip{display:inline-flex;align-items:center;gap:4px;font:500 9.5px var(--k-mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--k-panel2);color:var(--k-ink2);white-space:nowrap}
.scn.k .k-chip.good{background:var(--k-good-soft);color:var(--k-good)}.scn.k .k-chip.warn{background:var(--k-warn-soft);color:var(--k-warn)}
.scn.k .k-chip.danger{background:var(--k-danger-soft);color:var(--k-danger)}.scn.k .k-chip.brand{background:var(--k-brand-soft);color:var(--k-brand)}.scn.k .k-chip.accent{background:var(--k-accent-soft);color:var(--k-accent)}
.scn.k .k-dot{width:6px;height:6px;border-radius:50%;background:var(--k-warn);flex:none}
/* inbox */
.scn.k .k-inbox{display:grid;grid-template-columns:270px minmax(0,1fr);flex:1;min-height:0;position:relative}
.scn.k .k-list{background:var(--k-panel);border-right:1px solid var(--k-line);display:flex;flex-direction:column;min-height:0}
.scn.k .k-filters{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--k-line)}
.scn.k .k-filters span{font:500 10px var(--k-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:6px;color:var(--k-ink3)}
.scn.k .k-filters span.on{background:var(--k-ink);color:var(--k-panel)}
.scn.k .k-row{display:block;padding:9px 12px;border-bottom:1px solid var(--k-line);border-left:3px solid transparent}
.scn.k .k-row.wait{border-left-color:var(--k-accent)}
.scn.k .k-row.cur{background:var(--k-brand-soft);border-left-color:var(--k-brand)}
.scn.k .k-row .r1{display:flex;align-items:center;gap:7px;margin-bottom:3px}
.scn.k .k-row .who{font-weight:650;font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-ink)}
.scn.k .k-row .who i{font-style:normal;font-weight:400;color:var(--k-ink3)}
.scn.k .k-row .when{font:500 10px var(--k-mono);color:var(--k-ink3)}
.scn.k .k-row .r2{display:flex;gap:5px;flex-wrap:wrap}
.scn.k .k-row .prev{font-size:12px;color:var(--k-ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* thread */
.scn.k .k-thread{display:flex;flex-direction:column;min-height:0;background:var(--k-bg)}
.scn.k .k-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 14px;background:var(--k-panel);border-bottom:1px solid var(--k-line)}
.scn.k .k-head b{font-size:14px;color:var(--k-ink)}
.scn.k .k-head b small{display:block;font:400 10.5px var(--k-mono);color:var(--k-ink3)}
.scn.k .k-sp{margin-left:auto}
.scn.k .k-body{flex:1;overflow:hidden;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.scn.k .k-msg{max-width:78%;display:flex;flex-direction:column}
.scn.k .k-msg .meta{font:500 9.5px var(--k-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink3);margin-bottom:3px}
.scn.k .k-msg .bbl{padding:8px 11px;border-radius:12px 12px 12px 3px;font-size:12.5px;line-height:1.45;border:1px solid var(--k-line);background:var(--k-panel);color:var(--k-ink)}
.scn.k .k-msg.out{align-self:flex-end}.scn.k .k-msg.out .meta{text-align:right}
.scn.k .k-msg.out .bbl{background:var(--k-brand);border-color:var(--k-brand);color:var(--k-brand-ink);border-radius:12px 12px 3px 12px}
.scn.k .k-msg.ai .bbl{background:var(--k-accent-soft);border-color:var(--k-accent);color:var(--k-ink)}
.scn.k .k-empty{margin:auto;text-align:center;max-width:280px;color:var(--k-ink2);font-size:12.5px}
.scn.k .k-empty b{display:block;color:var(--k-ink);font-size:14px;margin-bottom:4px}
.scn.k .k-comp{border-top:1px solid var(--k-line);background:var(--k-panel);padding:9px 14px;display:flex;flex-direction:column;gap:7px}
.scn.k .k-comp .ta{border:1px solid var(--k-line2);border-radius:8px;background:var(--k-bg);padding:8px 10px;font-size:12.5px;color:var(--k-ink3);min-height:34px}
.scn.k .k-comp .row{display:flex;align-items:center;gap:8px}
/* buttons */
.scn.k .k-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:1px solid var(--k-line2);background:var(--k-panel);font-size:12px;font-weight:600;color:var(--k-ink);white-space:nowrap}
.scn.k .k-btn.pri{background:var(--k-brand);border-color:var(--k-brand);color:var(--k-brand-ink)}
.scn.k .k-btn.ghost{background:transparent;border-color:transparent;color:var(--k-ink2)}
.scn.k .k-sel{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;border:1px solid var(--k-line2);background:var(--k-bg);font-size:12px;color:var(--k-ink)}
.scn.k .k-sel::after{content:"";width:6px;height:6px;border-right:1.5px solid var(--k-ink3);border-bottom:1.5px solid var(--k-ink3);transform:translateY(-2px) rotate(45deg)}
/* draft card */
.scn.k .k-draft{margin:0 14px 10px;border:1px dashed var(--k-accent);background:var(--k-accent-soft);border-radius:8px;padding:10px 12px}
.scn.k .k-draft .hd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--k-ink);margin-bottom:8px}
.scn.k .k-draft .mk{width:22px;height:22px;border-radius:6px;background:var(--k-accent);color:#fff;display:grid;place-items:center;font:800 9.5px var(--k-f)}
.scn.k .k-draft .hd .mono{margin-left:auto;color:var(--k-ink3);text-transform:none;letter-spacing:0;font-size:10.5px}
.scn.k .k-draft .bd{background:var(--k-panel);border:1px solid var(--k-line);border-radius:7px;padding:9px 11px;font-size:12.5px;line-height:1.5;color:var(--k-ink)}
.scn.k .k-draft .acts{display:flex;gap:7px;margin-top:9px;flex-wrap:wrap}
/* context / checks */
.scn.k .k-ctx{width:230px;flex:none;border-left:1px solid var(--k-line);background:var(--k-panel);overflow:hidden}
.scn.k .k-ctx section{padding:12px;border-bottom:1px solid var(--k-line)}
.scn.k .k-ctx h5{margin:0 0 7px;font:500 9.5px var(--k-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink3)}
.scn.k .k-kv{display:flex;justify-content:space-between;gap:8px;padding:2px 0;font-size:12px;color:var(--k-ink2)}
.scn.k .k-kv b{font:500 11px var(--k-mono);color:var(--k-ink);text-align:right}
.scn.k .k-check{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--k-ink2);padding:4px 0}
.scn.k .k-check i{width:16px;height:16px;border-radius:50%;flex:none;border:1.5px solid var(--k-line2);display:grid;place-items:center;font:700 10px var(--k-f);font-style:normal;color:transparent}
.scn.k .k-check.lit i{border-color:var(--k-good);background:var(--k-good-soft);color:var(--k-good)}
/* modal / drawer */
.scn.k .k-modal{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,9,28,.45);z-index:3}
.scn.k .k-modal > div{width:min(360px,90%);background:var(--k-panel);border:1px solid var(--k-line);border-radius:8px;box-shadow:var(--shadow)}
.scn.k .k-modal h5{margin:0;padding:11px 14px;border-bottom:1px solid var(--k-line);font-size:14px;color:var(--k-ink)}
.scn.k .k-modal .bd{padding:12px 14px;display:grid;gap:9px}
.scn.k .k-fld{display:grid;gap:3px}
.scn.k .k-fld label{font:500 9.5px var(--k-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--k-ink3)}
.scn.k .k-fld span{border:1px solid var(--k-line2);border-radius:8px;background:var(--k-bg);padding:6px 9px;font-size:12.5px;color:var(--k-ink)}
.scn.k .k-fld small{font-size:11px;color:var(--k-ink3)}
.scn.k .k-modal .acts{display:flex;justify-content:flex-end;gap:7px;padding:10px 14px;border-top:1px solid var(--k-line)}
/* tables */
.scn.k .k-panel{background:var(--k-panel);border:1px solid var(--k-line);border-radius:8px;overflow:hidden}
.scn.k .k-panel header{padding:9px 12px;border-bottom:1px solid var(--k-line);font-size:12.5px;font-weight:700;color:var(--k-ink);display:flex;align-items:center;gap:8px}
.scn.k .k-table{width:100%;border-collapse:collapse;font-size:12.5px}
.scn.k .k-table th{text-align:left;padding:8px 10px;border-bottom:2px solid var(--k-line2);font-weight:700;color:var(--k-ink);white-space:nowrap}
.scn.k .k-table td{padding:8px 10px;border-bottom:1px solid var(--k-line);color:var(--k-ink2);vertical-align:middle;white-space:nowrap}
.scn.k .k-table td b{color:var(--k-ink);display:inline-flex;align-items:center;gap:7px}
.scn.k .k-table .av{width:22px;height:22px;border-radius:50%;background:var(--k-brand-soft);color:var(--k-brand);display:grid;place-items:center;font:700 9.5px var(--k-f)}
.scn.k .k-table .mono{color:var(--k-ink2);font-size:11px;letter-spacing:.04em;text-transform:none}
.scn.k .k-chatb{width:24px;height:24px;border-radius:7px;display:inline-grid;place-items:center;color:#fff;font:800 9px var(--k-f)}
.scn.k .k-chatb.wa{background:#25D366}.scn.k .k-chatb.fb{background:#1877F2}.scn.k .k-chatb.ig{background:#D6249F}
.scn.k .k-table tr.lit{animation:scnLit .4s ease var(--l,0s) forwards}
.scn.k .k-menu{position:absolute;z-index:3;background:var(--k-panel);border:1px solid var(--k-line2);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:6px;display:grid;gap:2px;min-width:150px}
.scn.k .k-menu span{padding:5px 8px;border-radius:6px;font-size:12.5px;color:var(--k-ink)}
.scn.k .k-menu span.on{background:var(--k-brand-soft);color:var(--k-brand)}
/* calendar */
.scn.k .k-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--k-line);border:1px solid var(--k-line);border-radius:8px;overflow:hidden}
.scn.k .k-cal i{background:var(--k-panel2);padding:4px;text-align:center;font:500 9px var(--k-mono);text-transform:uppercase;color:var(--k-ink3);font-style:normal}
.scn.k .k-cal span{background:var(--k-panel);min-height:44px;padding:3px 4px;font-size:10.5px;color:var(--k-ink2);display:flex;flex-direction:column;gap:2px}
.scn.k .k-cal span.dim{color:var(--k-ink3);background:var(--k-bg)}
.scn.k .k-pill{font-size:9.5px;font-weight:600;padding:1px 4px;border-radius:4px;background:var(--k-brand-soft);color:var(--k-brand);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn.k .k-pill.gcal{background:var(--k-good-soft);color:var(--k-good)}
/* dashboard */
.scn.k .k-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.scn.k .k-stat{background:var(--k-panel);border:1px solid var(--k-line);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:4px}
.scn.k .k-stat span{font-size:11.5px;font-weight:600;color:var(--k-ink2)}
.scn.k .k-stat b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--k-ink);font-variant-numeric:tabular-nums}
.scn.k .k-stat em{font-style:normal;font-size:11px;font-weight:600;color:var(--k-good)}
.scn.k .k-stat em.warn{color:var(--k-warn)}
.scn.k .k-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.scn.k .k-bars{display:grid;gap:7px;padding:10px 12px}
.scn.k .k-bars div{display:grid;grid-template-columns:74px 1fr 32px;gap:8px;align-items:center;font-size:11.5px;color:var(--k-ink2)}
.scn.k .k-bars div > span{height:9px;border-radius:5px;background:var(--k-brand-soft);overflow:hidden}
.scn.k .k-bars div > span > i{display:block;height:100%;background:var(--k-brand);border-radius:0 4px 4px 0}
.scn.k .k-bars div.good > span{background:var(--k-good-soft)}.scn.k .k-bars div.good > span > i{background:var(--k-good)}
.scn.k .k-bars div > b{text-align:right;color:var(--k-ink);font-size:11.5px}
/* notification panel */
.scn.k .k-notif{position:absolute;right:14px;top:50px;width:230px;background:var(--k-panel);border:1px solid var(--k-line);border-radius:8px;box-shadow:var(--shadow);z-index:3;font-size:12px;overflow:hidden}
.scn.k .k-notif header{padding:8px 11px;border-bottom:1px solid var(--k-line);font-weight:600;color:var(--k-ink);display:flex;gap:6px;align-items:center}
.scn.k .k-notif div{padding:7px 11px;border-bottom:1px solid var(--k-line);color:var(--k-ink2)}
.scn.k .k-notif div b{display:block;color:var(--k-ink);font-weight:600}
/* steps layout for the #crm mount: window left, numbered step list right */
.scn.lay-steps{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"frame feats" "cap feats";gap:0 28px;align-items:start}
.scn.lay-steps .scn-frame{grid-area:frame}.scn.lay-steps .scn-cap{grid-area:cap}
.scn.lay-steps .scn-feats{grid-area:feats;flex-direction:column;align-items:stretch;margin-top:0;counter-reset:st}
.scn.lay-steps .scn-feats button{text-align:left;display:flex;gap:10px;align-items:center;padding:.7rem .9rem;font-size:.95rem}
.scn.lay-steps .scn-feats button::before{counter-increment:st;content:counter(st);width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-size:.78rem;font-weight:800;flex:none}
.scn.lay-steps .scn-feats button[aria-selected=true]::before{background:var(--cyan);border-color:var(--cyan);color:var(--on-cyan)}
@media (max-width:1100px){.scn.lay-steps{grid-template-columns:minmax(0,1fr);grid-template-areas:"frame" "feats" "cap"}.scn.lay-steps .scn-feats{flex-direction:row;flex-wrap:wrap}.scn.lay-steps .scn-feats button::before{display:none}}
/* phone */
@media (max-width:900px){
  .scn.k .scn-win{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-inbox{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-inbox > .k-thread.over{position:absolute;inset:0;z-index:2}   /* thread slides over the list, like the real console */
  .scn.k .k-ctx{display:none}
  .scn.k .k-tabs{overflow-x:auto}
  .scn.k .k-stats,.scn.k .k-grid3{grid-template-columns:1fr 1fr}
  .scn.k .k-table th:nth-child(n+4),.scn.k .k-table td:nth-child(n+4){display:none}
  .scn.k .k-notif{position:static;width:auto;margin-top:8px}
}


/* cursor: left/top are % of the stage; keyframes read the element's own --x/--y vars */
.scn-stage .cur{position:absolute;left:var(--x0);top:var(--y0);width:20px;height:22px;z-index:6;pointer-events:none;opacity:0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));animation:scnCur var(--t,1.2s) cubic-bezier(.3,.7,.2,1) var(--d,0s) forwards}
.scn-stage .cur.two{animation-name:scnCur2}
.scn-stage .cur svg{width:100%;height:100%;display:block}
@keyframes scnCur{0%{left:var(--x0);top:var(--y0);opacity:0}15%{opacity:1}100%{left:var(--x1);top:var(--y1);opacity:1}}
@keyframes scnCur2{0%{left:var(--x0);top:var(--y0);opacity:0}10%{opacity:1}42%{left:var(--x1);top:var(--y1)}58%{left:var(--x1);top:var(--y1)}100%{left:var(--x2);top:var(--y2);opacity:1}}
/* click ripple at a point */
.scn-stage .rip{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;border:2px solid var(--k-accent,var(--cyan));z-index:5;pointer-events:none;opacity:0;animation:scnRip .55s ease-out var(--d,0s) forwards}
@keyframes scnRip{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.7);opacity:0}}
/* highlight ring on the target element itself (no coordinates): lights at --l, fades 2.2s later */
.scn .hl{position:relative;z-index:1;animation:scnHl .4s ease var(--l,0s) forwards,scnHlOff .4s ease calc(var(--l,0s) + 2200ms) forwards}
@keyframes scnHl{to{box-shadow:0 0 0 2px var(--k-accent,var(--cyan)),0 0 0 7px color-mix(in srgb,var(--k-accent,var(--cyan)) 25%,transparent)}}
@keyframes scnHlOff{to{box-shadow:0 0 0 2px color-mix(in srgb,var(--k-accent,var(--cyan)) 60%,transparent),0 0 0 0 transparent}}
/* caption bar: number badge + text; two steps swap inside .swap so the height never jumps */
.scn-stage .cap{position:absolute;left:14px;right:14px;bottom:14px;max-width:440px;z-index:4;display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;
  background:var(--k-ink,var(--band));color:var(--k-panel,var(--band-ink));font-size:.9rem;font-weight:600;line-height:1.35;box-shadow:var(--shadow)}
.scn-stage .cap .n{flex:none;width:22px;height:22px;border-radius:6px;background:var(--k-accent,var(--cyan));color:#fff;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.scn-stage .cap .swap > *{grid-area:1/1}
/* reduced motion + phone */
.scn.still .cur,.scn.still .rip{display:none}
.scn.still .hl{animation:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--k-accent,var(--cyan)) 60%,transparent)}
@media (max-width:900px){.scn-stage .cur,.scn-stage .rip{display:none}.scn-stage .cap{position:static;max-width:none;margin:10px 14px 14px}}


.scn.mock{margin-top:40px}.scn-win.solo{grid-template-columns:minmax(0,1fr)}
.scn.mock .scn-stage{height:auto;min-height:0}
.scn-stage .tabs > button{all:unset;flex:1;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:9px 11px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-weight:700;font-size:.86rem;cursor:pointer}
.scn-stage .tabs > button[aria-selected=true]{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan);color:var(--ink)}
.scn-stage .trig > button{all:unset;padding:12px 6px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);text-align:center;font-weight:700;font-size:.84rem;color:var(--ink-3);cursor:pointer}
.scn-stage .trig > button[aria-selected=true]{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 13%,var(--bg));color:var(--ink)}
.scn-stage .tabs > button:focus-visible,.scn-stage .trig > button:focus-visible,.scn-stage .wa-fab:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.scn-stage .wa-fab{border:0;cursor:pointer;font:inherit;font-weight:900;font-size:.8rem}
.scn.mock .seg{margin:0}
.scn-stage.web .brow{transition:max-width .4s ease;margin:0 auto;width:100%}
.scn.mock[data-dev=phone] .scn-stage.web .brow{max-width:300px}.scn.mock[data-dev=phone] .scn-stage.web .g3{grid-template-columns:1fr}
.scn.mock .night-only{display:none}.scn.mock.night .night-only{display:flex}.scn.mock.night .day-only{display:none}

/* ---- additions on top of the spec ---- */
.scn.k{--stage-h:440px}
.scn.k .scn-side{gap:2px}
.scn.k .scn-menu{display:flex;flex-direction:column;gap:2px}
.scn.k .scn-top b{line-height:1.25}
.scn.k .k-rel{position:relative}
.scn.k .k-slot{position:relative}
.scn.k .k-slot > .over{position:absolute;inset:0}
.scn.k .k-over{position:absolute;inset:0}
.scn.k .k-ml{margin-left:auto}
.scn.k .k-inbox.k-side{grid-template-columns:minmax(0,1fr) 230px}
.scn.k .k-ctx{width:auto}
.scn.k .k-tagrow{display:flex;gap:4px;margin-top:6px}
.scn.k .k-callay{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px;align-content:start}
.scn.k .k-callay > .k-panel:first-child .k-cal{margin:10px}
.scn.k .k-form{padding:12px;display:grid;gap:9px}
.scn.k .k-form small{font-size:11px;color:var(--k-ink3)}
.scn.k .k-right{display:flex;justify-content:flex-end;gap:7px}
.scn.k .k-comp .mono{color:var(--k-ink3)}
.scn.k .k-pad .k-panel + .k-panel{margin-top:0}
.scn.k .scn-stage .cap{font-family:var(--k-f)}
/* appear + ring, appear + ring + leave: combine the animations instead of overriding them */
.scn .a.hl{animation:scnIn .45s cubic-bezier(.2,.7,.3,1) var(--d,0s) forwards,scnHl .4s ease var(--l,0s) forwards,scnHlOff .4s ease calc(var(--l,0s) + 2200ms) forwards}
.scn .o.hl{animation:scnIn .3s ease var(--d,0s) both,scnHl .4s ease var(--l,0s) forwards,scnOut .3s ease var(--o,2s) forwards}
.scn.still .a.hl,.scn.still .o.hl{animation:none;opacity:1}
@media (max-width:900px){
  .scn.k{--stage-h:auto}
  .scn.k .k-inbox.k-side{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-slot > .over{position:static}
  .scn.k .k-slot > .k-empty{display:none}
  .scn.k .k-callay{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-over{position:static}
  .scn.k .k-tabs span:nth-child(n+4){display:none}
  .scn.k .k-head{gap:6px}
  .scn.k .k-cal span{min-height:34px}
  .scn.k .k-cal .k-pill{font-size:8.5px}
}
/* chats grow from the bottom like a real chat; the caption is a subtitle strip under the page */
.scn.k .k-body{justify-content:flex-end}
.scn.k .k-filters span{white-space:nowrap}
.scn.k .scn-stage .cap{position:static;max-width:none;margin:0;border-radius:0;flex:none;box-shadow:none;padding:10px 14px}
/* a table row that moves away collapses instead of leaving a gap */
.scn.k tr.gone td{animation:scnRowOut .35s ease var(--o,2s) forwards}
.scn.k tr.gone td *{animation:scnRowOut .35s ease var(--o,2s) forwards}
@keyframes scnRowOut{to{padding-top:0;padding-bottom:0;font-size:0;line-height:0;height:0;min-height:0;border-width:0;opacity:0}}
.scn.still tr.gone{display:none}
@media (max-width:900px){
  .scn.k .k-page.k-rel > .o,.scn.k .k-callay > .o{display:none}
  .scn.k .k-cal{grid-template-columns:repeat(7,minmax(0,1fr))}
  .scn.k .k-cal span{min-width:0;overflow:hidden}
  .scn.k .k-grid3{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-bars div{grid-template-columns:80px 1fr 44px}
  .scn.k .k-callay .k-notif{position:static;width:auto}
}
@media (max-width:900px){.scn.k .k-grid3 > :nth-child(n+2){display:none}}
.scn-stage .phone-hint{margin:auto 0;text-align:center;font-size:.8rem;color:var(--ink-3)}
#webNotif:not([hidden]) + .phone-hint{display:none}
.scn.k .k-logo{width:24px;height:24px;flex:none;border-radius:6px}
.scn.k .k-brand b{font-size:13.5px;white-space:nowrap}

/* ---- lavender skin, matching the console's latest look (crmdev globals.css "lavender skin") ---- */
/* violet rail: profile card on top, round coloured section badges, pink count badges */
.scn.k .scn-win{grid-template-columns:212px minmax(0,1fr)}
.scn.k .scn-side{background:linear-gradient(180deg,var(--k-side2) 0%,var(--k-side) 100%);color:var(--k-side-ink2);border-right:0;padding:12px 10px;gap:2px}
.scn.k .k-brand{color:#fff;padding:2px 4px 8px}
.scn.k .k-logo{background:#fff;padding:2px;border-radius:7px}
.scn.k .k-bell{color:var(--k-side-ink2)}
.scn.k .k-bell em{background:var(--k-badge);box-shadow:0 0 0 2px var(--k-side2);font-family:var(--k-f)}
.scn.k .k-prof{display:flex;flex-direction:column;align-items:center;gap:1px;padding:2px 0 10px;margin-bottom:8px;border-bottom:1px solid var(--k-side-line)}
.scn.k .k-prof i{position:relative;width:46px;height:46px;border-radius:50%;background:var(--k-grad);color:#fff;display:grid;place-items:center;font:700 15px var(--k-f);font-style:normal;
  box-shadow:0 0 0 2.5px rgba(255,255,255,.9),0 0 0 5px rgba(142,108,245,.35);margin-bottom:7px}
.scn.k .k-prof i::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#34D399;box-shadow:0 0 0 2px var(--k-side2)}
.scn.k .k-prof b{font-size:13px;font-weight:600;color:#fff}
.scn.k .k-prof small{font-size:11px;color:var(--k-side-ink3)}
.scn.k .k-div{padding:0 4px 8px;color:var(--k-side-ink3)}
.scn.k .k-seg{margin-left:auto;display:flex;gap:2px;padding:2px;border-radius:7px;background:rgba(255,255,255,.07)}
.scn.k .k-div .k-seg b{margin:0;border:0;padding:2px 9px;border-radius:5px;font-weight:500;color:var(--k-side-ink2)}
.scn.k .k-div .k-seg b.on{background:rgba(255,255,255,.16);color:#fff}
.scn.k .k-search{background:rgba(255,255,255,.07);border:0;border-radius:999px;color:var(--k-side-ink3);margin:0 0 8px;padding:6px 11px}
.scn.k .k-search kbd{background:rgba(255,255,255,.08);color:var(--k-side-ink3);font-family:var(--k-f)}
.scn.k .scn-side button{position:relative;padding:4px 6px;min-height:30px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--k-side-ink2)}
.scn.k .scn-side button:hover:not([aria-disabled]){background:rgba(255,255,255,.06);color:#fff}
.scn.k .scn-side button.on,.scn.k .scn-side button.on:hover{background:rgba(255,255,255,.1);color:#fff;font-weight:600}
.scn.k .scn-side button.on::before{content:"";position:absolute;left:-10px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,#A18BFF,#6E86F7)}
.scn.k .scn-side svg[data-icon]{--hc:#8E6CF5;width:26px;height:26px;padding:6px;border-radius:50%;color:#fff;background:var(--hc);box-sizing:border-box;
  box-shadow:0 4px 10px -3px color-mix(in srgb,var(--hc) 70%,transparent)}
.scn.k .scn-side svg[data-icon=dash]{--hc:#F0567A}.scn.k .scn-side svg[data-icon=inbox]{--hc:#8E6CF5}.scn.k .scn-side svg[data-icon=client]{--hc:#1FB89A}
.scn.k .scn-side svg[data-icon=doc]{--hc:#F59E3D}.scn.k .scn-side svg[data-icon=cal]{--hc:#4C8DF6}.scn.k .scn-side svg[data-icon=brand]{--hc:#E85BC5}
.scn.k .scn-side svg[data-icon=muted]{--hc:rgba(255,255,255,.12);box-shadow:none;color:var(--k-side-ink2)}
.scn.k .scn-side .count,.scn.k .scn-side button.on .count{background:var(--k-badge);color:#fff;font-family:var(--k-f);font-size:10.5px;letter-spacing:0;min-width:18px;text-align:center}
.scn.k .scn-side-foot{border-top-color:var(--k-side-line);padding-top:6px;gap:0}
@media (prefers-color-scheme:dark){.scn.k .scn-side button.on{background:rgba(255,255,255,.1);color:#fff}.scn.k .scn-side button.on .count{background:var(--k-badge);color:#fff}}
/* chrome: white top bar, lavender page */
.scn.k .scn-top b{font-size:16px;font-weight:600}
.scn.k .mono{font-family:var(--k-f);letter-spacing:.06em}
/* controls: pills, gradient primary */
.scn.k .k-btn{border-radius:999px;padding:5px 13px}
.scn.k .k-btn svg{width:13px;height:13px}
.scn.k .k-btn.pri{background:var(--k-grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(110,108,245,.7)}
.scn.k .k-chip{border-radius:999px;padding:2px 8px;font-family:var(--k-f);letter-spacing:.02em;text-transform:none;font-size:10.5px;font-weight:600}
.scn.k .k-tabs span,.scn.k .k-filters span{border-radius:999px}
.scn.k .k-tabs span.on,.scn.k .k-filters span.on{background:var(--k-brand-soft);color:var(--k-brand)}
.scn.k .k-filters span{font-family:var(--k-f);text-transform:none;letter-spacing:0;font-size:11.5px;font-weight:500;color:var(--k-ink2)}
.scn.k .k-sel,.scn.k .k-fld span,.scn.k .k-comp .ta{border-radius:10px}
.scn.k .k-fld label,.scn.k .k-ctx h5{font-family:var(--k-f);font-weight:600;letter-spacing:.1em}
/* surfaces: borderless soft cards */
.scn.k .k-panel,.scn.k .k-stat,.scn.k .k-modal > div,.scn.k .k-notif,.scn.k .k-menu{border:0;border-radius:14px;box-shadow:var(--k-sh)}
.scn.k .k-panel header{border-bottom:0;padding:12px 14px 4px;font-weight:600;font-size:13px}
.scn.k .k-table th{border-bottom:1px solid var(--k-line);font-weight:600;color:var(--k-ink2);font-size:11.5px}
.scn.k .k-table .av{background:var(--k-grad);color:#fff}
.scn.k .k-row.cur{background:var(--k-brand-soft)}
.scn.k .k-msg .bbl{border-radius:14px 14px 14px 4px;border-color:transparent;box-shadow:var(--k-sh)}
.scn.k .k-msg.out .bbl{background:var(--k-grad);border-radius:14px 14px 4px 14px}
.scn.k .k-msg.ai .bbl{border:1px solid color-mix(in srgb,var(--k-accent) 40%,transparent);box-shadow:none}
.scn.k .k-draft{border-radius:14px}
.scn.k .k-draft .mk{border-radius:50%;background:var(--k-grad)}
.scn.k .k-cal{border-radius:12px}
.scn.k .k-cal span:nth-child(25){box-shadow:inset 0 0 0 2px var(--k-brand)}  /* today (16) outlined, like the console */
.scn.k .k-bars div > span{border-radius:999px;background:var(--k-panel2)}
.scn.k .k-bars div > span > i{border-radius:999px;background:linear-gradient(90deg,#6D5AE6,#3F7FE0)}
.scn.k .k-bars div.good > span > i{background:linear-gradient(90deg,#14936F,#1FB89A)}
/* dashboard: greeting card + stat tiles with a colour line and a round icon */
.scn.k .k-hello{position:relative;background:var(--k-panel);border-radius:14px;box-shadow:var(--k-sh);padding:12px 16px 12px 19px;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:end;
  background-image:repeating-linear-gradient(135deg,transparent 0 9px,color-mix(in srgb,var(--k-line) 70%,transparent) 9px 10px);background-size:40% 100%;background-repeat:no-repeat;background-position:right}
.scn.k .k-hello::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--k-brand)}
.scn.k .k-hello .mono{grid-column:1;font-size:9.5px;color:var(--k-ink3)}
.scn.k .k-hello > b{grid-column:1;font-size:19px;font-weight:600;color:var(--k-ink);letter-spacing:-.01em}
.scn.k .k-hello p{grid-column:1;margin:2px 0 0;font-size:12px;color:var(--k-ink2)}
.scn.k .k-hello p b{color:var(--k-ink)}
.scn.k .k-acts{grid-column:2;grid-row:1/4;display:flex;gap:6px}
.scn.k .k-stat{position:relative;padding:11px 13px;overflow:hidden}
.scn.k .k-stat::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--hc),color-mix(in srgb,var(--hc) 30%,transparent))}
.scn.k .k-stat span{font-weight:500;padding-right:30px}
.scn.k .k-stat b{font-size:20px;font-weight:700}
.scn.k .k-stat .ico{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:var(--hc);color:#fff;display:grid;place-items:center}
.scn.k .k-stat .ico svg{width:13px;height:13px}
.scn.k .k-pad:has(> .k-hello){gap:10px}
.scn.k .k-pad:has(> .k-hello) .k-bars{gap:5px;padding:6px 14px 10px}
@media (max-width:900px){
  .scn.k .k-hello{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-acts{grid-column:1;grid-row:auto;margin-top:8px}
}
/* keep the rail inside the window's height */
.scn.k .scn-side{overflow:hidden}
.scn.k .k-brand b{color:#fff}
.scn.k .k-prof{padding:0 0 8px;margin-bottom:6px}
.scn.k .k-prof i{width:40px;height:40px;font-size:13.5px;margin-bottom:6px}
.scn.k .k-div{padding-bottom:6px}
.scn.k .k-search{margin-bottom:6px;padding:5px 11px}
.scn.k .scn-side button{min-height:0;padding:3px 6px}
.scn.k .scn-side button.on::before{top:6px;bottom:6px}
.scn.k .k-pad > *{flex:none}
.scn.k .k-bars div{grid-template-columns:70px 1fr 46px}
.scn.k .scn-side{contain:size}   /* the rail never makes the window taller than the page */
@media (max-width:900px){.scn.k .scn-win{grid-template-columns:minmax(0,1fr)}.scn.k .k-stat span{padding-right:28px}.scn.k .k-stat b{font-size:18px}}

/* ---- the console's newer layout (crmdev, 17 Okt 2026): slim icon rail, chat list with avatars,
   client stages, calendar side column, dashboard with the chat recap ---- */
.scn.k .scn-win{grid-template-columns:58px minmax(0,1fr)}
.scn.k .scn-side{padding:10px 0;align-items:center;gap:6px}
.scn.k .scn-side-head{display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:8px;margin-bottom:2px;border-bottom:1px solid var(--k-side-line);width:40px}
.scn.k .k-logo{width:30px;height:30px;padding:3px;border-radius:9px;background:#fff;box-sizing:border-box}
.scn.k .k-bell{margin:0;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.1);color:var(--k-side-ink2)}
.scn.k .k-bell svg{width:15px;height:15px}
.scn.k .k-bell em{top:-4px;right:-4px;min-width:14px;height:14px;font-size:9px;line-height:14px;padding:0 3px}
.scn.k .k-me{position:relative;width:32px;height:32px;border-radius:50%;background:var(--k-grad);color:#fff;display:grid;place-items:center;font:700 11px var(--k-f);box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.scn.k .k-me::after{content:"";position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;background:#34D399;box-shadow:0 0 0 2px var(--k-side2)}
.scn.k .k-dv{font:600 9.5px var(--k-f);padding:1px 8px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff}
.scn.k .k-find{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--k-side-ink2);display:grid;place-items:center}
.scn.k .k-find svg{width:15px;height:15px}
.scn.k .scn-menu{align-items:center;gap:5px}
.scn.k .scn-side button{padding:5px;min-height:0;border-radius:11px;gap:0}
.scn.k .scn-side button > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.scn.k .scn-side button.on,.scn.k .scn-side button.on:hover{background:rgba(255,255,255,.14)}
.scn.k .scn-side button.on::before{display:none}
.scn.k .scn-side svg[data-icon]{width:25px;height:25px;padding:5.5px}
.scn.k .scn-side-foot{width:40px;align-items:center;gap:4px;padding-top:8px}
.scn.k .k-tchip{margin-left:8px;vertical-align:2px;font-size:10px}
/* chat list */
.scn.k .k-crow{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:9px;align-items:center;padding:7px 10px;margin:2px 6px;border-radius:10px}
.scn.k .k-crow:nth-child(odd){background:var(--k-panel2)}
.scn.k .k-crow .av{position:relative;width:30px;height:30px;border-radius:50%;color:#fff;display:grid;place-items:center;font:700 10px var(--k-f)}
.scn.k .k-crow .ch{position:absolute;right:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;box-shadow:0 0 0 2px var(--k-panel);background:#25D366}
.scn.k .k-crow .ch.ig{background:linear-gradient(45deg,#F58529,#DD2A7B,#8134AF)}.scn.k .k-crow .ch.fb{background:#1877F2}
.scn.k .k-crow .t{min-width:0;display:flex;flex-direction:column;gap:1px}
.scn.k .k-crow .t b{font-size:12px;font-weight:600;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:5px}
.scn.k .k-crow .t b em{font-style:normal;font-weight:400;color:var(--k-ink3)}
.scn.k .k-crow .t small{font-size:11px;color:var(--k-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn.k .k-crow .when{align-self:start;font-size:10.5px;color:var(--k-ink3)}
.scn.k .k-crow .k-dot{background:#F08A3C}
.scn.k .k-empty .ic{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 10px;border-radius:10px;background:var(--k-panel2);color:var(--k-ink2)}
.scn.k .k-empty .ic svg{width:16px;height:16px}
/* toolbars, segmented pills */
.scn.k .k-tool{display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--k-ink2);white-space:nowrap;min-width:0;overflow:hidden}
.scn.k .k-tool .k-n{color:var(--k-ink3)}
.scn.k .k-seg2{display:inline-flex;gap:2px;padding:2px;border-radius:999px;background:var(--k-panel2)}
.scn.k .k-seg2 b{padding:3px 10px;border-radius:999px;font-size:11px;font-weight:500;color:var(--k-ink2)}
.scn.k .k-seg2 b.on{background:var(--k-panel);color:var(--k-ink);font-weight:600;box-shadow:var(--k-sh)}
.scn.k .k-find2{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--k-panel);box-shadow:var(--k-sh);color:var(--k-ink3)}
.scn.k .k-find2 svg{width:12px;height:12px}
.scn.k .k-pillon{padding:4px 11px;border-radius:999px;background:var(--k-grad);color:#fff;font-weight:600}
.scn.k .k-panel header .k-chip{margin-left:6px}
.scn.k .k-panel header .k-seg2.k-ml + .k-chip{margin-left:6px}
/* client table: zebra rows, stage pickers with a coloured dot, add-meeting and WhatsApp buttons */
.scn.k .k-zebra tbody tr:nth-child(even) td{background:var(--k-panel2)}
.scn.k .k-st{display:inline-flex;align-items:center;gap:6px}
.scn.k .k-st i{width:7px;height:7px;border-radius:50%;background:var(--sc);flex:none}
.scn.k .k-ctab .k-sel{padding:2px 8px;font-size:11.5px}
.scn.k .k-plus{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid #D9A21B;color:#D9A21B;font:700 12px/1 var(--k-f);font-style:normal}
.scn.k .k-wa{display:inline-block;width:18px;height:18px;border-radius:50%;background:#25D366;box-shadow:inset 0 0 0 5px #25D366,inset 0 0 0 7px #fff}
.scn.k .k-menu{min-width:130px}
.scn.k .k-menu .k-st{padding:5px 8px;border-radius:8px;font-size:12px;color:var(--k-ink)}
/* calendar: month grid with a side column (today's agenda, status filter) */
.scn.k .k-callay{grid-template-columns:minmax(0,1fr) 190px;flex:1;min-height:0}
.scn.k .k-callay > .k-panel:first-child .k-cal{margin:6px 10px 10px}
.scn.k .k-col{display:flex;flex-direction:column;gap:10px}
.scn.k .k-agenda header,.scn.k .k-fstat header{display:flex;align-items:center;gap:7px;font-size:12px}
.scn.k .k-dot2{width:7px;height:7px;border-radius:50%;background:var(--k-brand)}
.scn.k .k-ag{margin:0 12px 6px;padding:6px 9px;border-radius:9px;background:var(--k-brand-soft);color:var(--k-brand);font-size:11px;font-weight:600}
.scn.k .k-agenda,.scn.k .k-fstat{padding-bottom:8px}
.scn.k .k-fstat div{display:flex;align-items:center;gap:8px;margin:0 12px 5px;padding:5px 9px;border:1px solid var(--k-line);border-radius:9px;font-size:11px;color:var(--k-ink)}
.scn.k .k-fstat i{width:7px;height:7px;border-radius:50%;background:var(--sc)}
.scn.k .k-fstat em{margin-left:auto;font-style:normal;font-size:10px;padding:0 6px;border-radius:999px;background:var(--k-brand-soft);color:var(--k-brand)}
.scn.k .k-pad.k-rel > .k-notif{top:44px}
/* dashboard: main column + right column (top deals, newest clients) */
.scn.k .k-dash{display:grid;grid-template-columns:minmax(0,1fr) 186px;flex:1;min-height:0}
.scn.k .k-dash > .k-pad{overflow:hidden;gap:10px}
.scn.k .k-rcol{border-left:1px solid var(--k-line);background:var(--k-panel);padding:12px 12px;display:flex;flex-direction:column;gap:4px;min-width:0;overflow:hidden}
.scn.k .k-rcol h6{display:flex;align-items:center;gap:8px;margin:4px 0 4px;font:600 9.5px var(--k-f);letter-spacing:.12em;text-transform:uppercase;color:var(--k-ink3)}
.scn.k .k-rcol h6::after{content:"";flex:1;height:1px;background:var(--k-line)}
.scn.k .k-rcol h6 + *{margin-top:0}
.scn.k .k-rcol h6:not(:first-child){margin-top:10px}
.scn.k .k-deal,.scn.k .k-newc{display:flex;align-items:center;gap:8px;padding:5px 6px;border-radius:9px;font-size:11.5px}
.scn.k .k-deal:nth-of-type(even),.scn.k .k-newc:nth-of-type(even){background:var(--k-panel2)}
.scn.k .k-deal b,.scn.k .k-newc b{flex:1;min-width:0;font-weight:600;color:var(--k-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scn.k .k-deal small,.scn.k .k-newc small{display:block;font-weight:400;font-size:10px;color:var(--k-ink3)}
.scn.k .k-deal em{font-style:normal;font-weight:700;font-size:11px;color:var(--k-ink)}
.scn.k .k-newc em{font-style:normal;font-size:10px;color:var(--k-ink3)}
.scn.k .k-newc .av{width:26px;height:26px;border-radius:50%;color:#fff;display:grid;place-items:center;font:700 9.5px var(--k-f);flex:none}
.scn.k .k-hello{align-items:center;padding:12px 12px 12px 19px}
.scn.k .k-need{grid-column:2;grid-row:1/4;display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;background:var(--k-grad);color:#fff;box-shadow:0 8px 20px -8px rgba(110,108,245,.8)}
.scn.k .k-need > i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.2)}
.scn.k .k-need > i svg{width:14px;height:14px}
.scn.k .k-need > span{font-size:10.5px;line-height:1.2}
.scn.k .k-need > span b{display:block;font-size:18px;font-weight:600}
.scn.k .k-need em{font-style:normal;font-size:11px;font-weight:600;margin-left:6px;align-self:flex-start;margin-top:6px}
.scn.k .k-stats.two{grid-template-columns:1fr 1fr}
.scn.k .k-recap header{display:flex;align-items:center;gap:6px;padding-bottom:6px;border-bottom:1px solid var(--k-line);margin:0 14px;padding-left:0;padding-right:0}
.scn.k .k-recap .bd{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;padding:8px 14px 10px}
.scn.k .k-donut{position:relative;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(#F08A3C 0 105deg,#E0508A 0 172.5deg,#4C8DF6 0 225deg,#1FB89A 0 247.5deg,#7C5CF0 0 277.5deg,#9C9AB8 0 322.5deg,#C9A227 0 360deg);
  animation:kDonut .9s cubic-bezier(.2,.7,.3,1) 900ms both}
.scn.k .k-donut::before{content:"";position:absolute;inset:24px;border-radius:50%;background:var(--k-panel)}
.scn.k .k-donut b{position:relative;text-align:center;font-size:17px;font-weight:700;color:var(--k-ink);line-height:1.1}
.scn.k .k-donut small{display:block;font-size:8.5px;font-weight:400;color:var(--k-ink3)}
@keyframes kDonut{from{opacity:0;transform:rotate(-90deg) scale(.6)}to{opacity:1;transform:none}}
.scn.still .k-donut{animation:none}
.scn.k .k-recap .k-table td,.scn.k .k-recap .k-table th{padding:4px 7px;font-size:11px}
.scn.k .k-recap .r{text-align:right}
.scn.k .k-recap .d{color:var(--k-ink2);font-size:10.5px}
.scn.k .k-cat{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.scn.k .k-cat i{width:7px;height:7px;border-radius:50%;background:var(--sc)}
@media (max-width:900px){
  .scn.k .scn-win{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-callay{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-col{display:none}
  .scn.k .k-dash{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-rcol{display:none}
  .scn.k .k-need{grid-column:1;grid-row:auto;margin-top:8px;justify-self:start}
  .scn.k .k-recap .bd{grid-template-columns:minmax(0,1fr)}
  .scn.k .k-donut{margin:0 auto}
  .scn.k .k-recap .d,.scn.k .k-recap th:last-child{display:none}
  .scn.k .k-ctab tr > :nth-child(n+4):nth-child(-n+6){display:none}
  .scn.k .k-tool > :nth-child(n+4):not(.k-find2):not(.k-btn){display:none}
  .scn.k .k-find2{display:none}
  .scn.k .k-recap header .k-seg2{display:none}
}
/* fit the slim rail and the dashboard inside the stage */
.scn.k .scn-side{padding:8px 0;gap:3px}
.scn.k .scn-side-head{gap:6px;padding-bottom:6px}
.scn.k .k-find{width:30px;height:30px}
.scn.k .scn-menu{gap:3px}
.scn.k .scn-side button{padding:4px}
.scn.k .scn-side-foot{gap:2px;padding-top:5px}
.scn.k .k-inbox{grid-template-columns:290px minmax(0,1fr)}
.scn.k .k-dash > .k-pad{padding:12px;gap:9px}
.scn.k .k-dash .k-hello{padding-top:9px;padding-bottom:9px}
.scn.k .k-dash .k-hello > b{font-size:17px}
.scn.k .k-dash .k-stat{padding:8px 12px}
.scn.k .k-dash .k-stat b{font-size:17px}
.scn.k .k-dash .k-stat .ico{top:8px;width:22px;height:22px}
.scn.k .k-recap header{padding-top:9px}
.scn.k .k-recap .bd{grid-template-columns:92px minmax(0,1fr);padding:6px 14px 8px}
.scn.k .k-donut{width:92px;height:92px}
.scn.k .k-donut::before{inset:21px}
.scn.k .k-pad.k-rel > .k-notif{top:8px;left:8px;right:auto}
@media (max-width:900px){.scn.k .k-inbox{grid-template-columns:minmax(0,1fr)}}