/* SpaceCall · the monochrome space design (Gal 08.11, canvas "SpaceCall — 3 Monochrome Redesign Directions").
   Grey, black and white over a half-Earth horizon. Glossy "bowling-ball" orbs, a black active orb with a green satellite,
   white primary buttons, quiet glass windows, and nothing smaller than 13px to read.
   Loaded last, after cosmos.css / polish.css / light.css. It only changes looks: no rule here hides or moves anything a screen needs,
   so every button, id and flow stays exactly as it was. Light mode = html[data-light]. */

html[data-look=cosmos],html[data-look=cosmos-owner]{
 --sp-ball:radial-gradient(ellipse 42% 28% at 36% 22%,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 48%,rgba(255,255,255,0) 100%),radial-gradient(ellipse 50% 22% at 52% 92%,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 100%),radial-gradient(ellipse 55% 35% at 28% 68%,rgba(120,120,130,.55) 0%,rgba(120,120,130,0) 70%),radial-gradient(ellipse 40% 55% at 76% 40%,rgba(85,85,92,.6) 0%,rgba(85,85,92,0) 70%),radial-gradient(circle at 45% 40%,#3A3A3F 0%,#1A1A1D 60%,#08080A 100%);
 --sp-ball-act:radial-gradient(ellipse 42% 28% at 36% 22%,rgba(255,255,255,.95) 0%,rgba(255,255,255,.3) 48%,rgba(255,255,255,0) 100%),radial-gradient(ellipse 50% 22% at 52% 92%,rgba(255,255,255,.25) 0%,rgba(255,255,255,0) 100%),radial-gradient(circle at 45% 40%,#26262A 0%,#0C0C0E 60%,#000 100%);
 --sp-ball-light:radial-gradient(ellipse 42% 28% at 36% 22%,#fff 0%,rgba(255,255,255,.6) 48%,rgba(255,255,255,0) 100%),radial-gradient(circle at 45% 40%,#FFFFFF 0%,#E6E6EB 55%,#B8B8C0 100%);
 --sp-ball-sh:inset -6px -8px 14px rgba(0,0,0,.7),inset 3px 3px 8px rgba(255,255,255,.1),0 8px 16px rgba(0,0,0,.5),0 2px 3px rgba(0,0,0,.55);
 --sp-call:radial-gradient(circle at 34% 24%,#B8FFD0 0%,#4CE07A 28%,#22B04F 62%,#0F6E30 100%);
 --sp-white:linear-gradient(180deg,#FFFFFF 0%,#E4E4E9 55%,#CFCFD5 100%);
 --sp-live:#30D158;--sp-hot:#FF9F0A;--sp-bad:#FF453A;
 /* the shared cosmos tokens, repainted: every screen that uses them turns monochrome at once */
 --cx-mu:#D1D1D6;--cx-sub:#E5E5EA;--cx-blue:#E5E5EA;--cx-ice:#F5F5F7;--cx-line:rgba(255,255,255,.10);
 --cx-win:rgba(10,10,12,.76);
 --cx-win-solid:linear-gradient(180deg,rgba(24,24,27,.97),rgba(10,10,12,.98));
 --cx-win-sh:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(255,255,255,.10),0 30px 60px -20px rgba(0,0,0,.6),0 10px 20px -8px rgba(0,0,0,.4);
 --cx-gl:rgba(255,255,255,.10);--cx-gl-sh:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.10);
 --cx-rec:rgba(255,255,255,.05);--cx-rec-sh:inset 0 0 0 1px rgba(255,255,255,.06);
 --cx-m-blue:var(--sp-ball);--cx-m-gold:var(--sp-ball);--cx-m-ai:var(--sp-ball);--cx-m-slate:var(--sp-ball-light);
 --cx-m-green:var(--sp-call);
 --cx-m-sh:var(--sp-ball-sh);
 --cx-num:'Heebo','IBM Plex Sans Hebrew',sans-serif;
 --ac:#F5F5F7;--ac2:#D1D1D6;--mu:#D1D1D6;--ok:var(--sp-live);--warn:var(--sp-hot);--bad:var(--sp-bad)}

/* ---------- the page: the half-Earth horizon, quiet stars ---------- */
:is(html[data-look=cosmos],html[data-look=cosmos-owner]) .earth{background:#000 var(--cx-earth,url(cosmos/earth-dawn.webp)) center bottom/cover no-repeat}
@media (max-width:900px){html[data-look=cosmos] .earth{background-image:var(--cx-earth-sm,url(cosmos/earth-dawn-sm.webp))}}
:is(html[data-look=cosmos],html[data-look=cosmos-owner]) .veil{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,0) 40%)}
html[data-look=cosmos] .cx-ring{display:none}
html[data-look=cosmos] body{text-shadow:none}

/* GENERATED:START (tools/make_space.py, do not edit by hand) */
/* from cosmos.css */
html:not([data-light]) .cx-sat{background:linear-gradient(90deg,rgba(242,242,245,0),rgba(242,242,245,.7))}
html:not([data-light]) .cx-sat::after{box-shadow:0 0 8px 2px rgba(242,242,245,.95),0 0 18px 4px rgba(230,230,235,.6)}
html:not([data-light]) .cx-bg{background:rgba(6,6,8,.62)}
html:not([data-light]) .cx-bg:hover{background:rgba(6,6,8,.78)}
html[data-look=cosmos]:not([data-light]) .btn.g,html[data-look=cosmos]:not([data-light]) .btn.p,html[data-look=cosmos]:not([data-light]) .btn.primary,html[data-look=cosmos]:not([data-light]) .btn.wide{color:#0B0B0C}
html[data-look=cosmos]:not([data-light]) .ab.p{color:#0B0B0C}
html[data-look=cosmos]:not([data-light]) .f,html[data-look=cosmos]:not([data-light]) input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-look=cosmos]:not([data-light]) select,html[data-look=cosmos]:not([data-light]) textarea{background:rgba(6,6,8,.42)}
html[data-look=cosmos]:not([data-light]) input::placeholder,html[data-look=cosmos]:not([data-light]) textarea::placeholder{color:rgba(209,209,214,.55)}
html[data-look=cosmos]:not([data-light]) .f:focus,html[data-look=cosmos]:not([data-light]) input:focus,html[data-look=cosmos]:not([data-light]) select:focus,html[data-look=cosmos]:not([data-light]) textarea:focus{box-shadow:inset 0 0 0 1.5px rgba(242,242,245,.8),0 0 16px rgba(230,230,235,.35)}
html[data-look=cosmos]:not([data-light]) .tabs button.on,html[data-look=cosmos]:not([data-light]) .tabs2 .t2.on,html[data-look=cosmos]:not([data-light]) .segs button.on,html[data-look=cosmos]:not([data-light]) .subtabs button.on,html[data-look=cosmos]:not([data-light]) .subtabs button[aria-selected=true],html[data-look=cosmos]:not([data-light]) .mode button.on,html[data-look=cosmos]:not([data-light]) .bzseg button.on{color:#0B0B0C}
html[data-look=cosmos]:not([data-light]) .av{text-shadow:0 1px 2px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.5);box-shadow:var(--cx-m-sh),0 0 0 2px var(--cx-avring,rgba(242,242,245,.55))}
html[data-look=cosmos]:not([data-light]) .modal{background:rgba(0,0,0,.55)}
html[data-look=cosmos]:not([data-light]) .toast{background:rgba(10,10,12,.92)}
html[data-look=cosmos]:not([data-light]) nav .nv .i .oi{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.85))}
html[data-look=cosmos]:not([data-light]) nav .nv.on .i{box-shadow:var(--cx-m-sh),0 0 0 3px rgba(255,255,255,.18),0 0 22px rgba(230,230,235,.55)}
html[data-look=cosmos]:not([data-light]) nav .nv#logout .i{color:#0B0B0C}
html[data-look=cosmos]:not([data-light]) .auto .sw{background:rgba(6,6,8,.38)!important}
html[data-look=cosmos]:not([data-light]) .auto .sw::after{background:radial-gradient(circle at 35% 28%,#ffffff,#D1D1D6 55%,#636366)!important}
html[data-look=cosmos]:not([data-light]) #queue .q .av{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 22%),radial-gradient(circle at 35% 30%,#48484A,#1C1C1E 55%,#050506);box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9),0 0 0 4px var(--c2),0 0 14px var(--gl)}
html[data-look=cosmos]:not([data-light]) body #page-dial .numrow .big .numin::placeholder{color:rgba(209,209,214,.55)}
html[data-look=cosmos]:not([data-light]) #page-dial .card.dialer .cb .oi{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.85))}
html[data-look=cosmos]:not([data-light]) #page-dial .wrapbar .oc.fu>span{background:radial-gradient(circle at 35% 28%,#F2F2F5,#6E6E73 50%,#1C1C1E)}
html[data-look=cosmos]:not([data-light]) #page-dial .wrapbar .oc.na>span{background:radial-gradient(circle at 35% 28%,#F2F2F5,#D1D1D6 52%,#2C2C2E)}
html[data-look=cosmos]:not([data-light]) .xferbar{background:rgba(6,6,8,.38)}
html[data-look=cosmos]:not([data-light]) .novahead .sanring{background:var(--cx-shine),radial-gradient(circle at 35% 30%,#F5F5F7,#D1D1D6 52%,#2C2C2E)}
html[data-look=cosmos]:not([data-light]) .stages span{color:rgba(229,229,234,.7)}
html[data-look=cosmos]:not([data-light]) .stages span.on,html[data-look=cosmos]:not([data-light]) .stages span.cur{background:rgba(230,230,235,.32);box-shadow:inset 0 0 0 1px rgba(242,242,245,.6),0 0 12px rgba(230,230,235,.4)}
html[data-look=cosmos]:not([data-light]) .coach{background:linear-gradient(180deg,rgba(224,136,58,.14),rgba(6,6,8,.35))}
html[data-look=cosmos]:not([data-light]) #novaFeed .sg.warn,html[data-look=cosmos]:not([data-light]) .pinned .sg.warn{background:linear-gradient(180deg,rgba(224,136,58,.16),rgba(6,6,8,.35))}
html[data-look=cosmos]:not([data-light]) #tl .brief .br[data-obw]{background:linear-gradient(180deg,rgba(224,136,58,.22),rgba(6,6,8,.35))}
html[data-look=cosmos]:not([data-light]) #tl .btip{background:rgba(6,6,8,.3)}
html[data-look=cosmos]:not([data-light]) .cxh .hb i{background:linear-gradient(180deg,#9fd0ff,#6E6E73)}
html[data-look=cosmos]:not([data-light]) .cxh .orbit .orb-l{stroke:rgba(242,242,245,.28)!important}
html[data-look=cosmos]:not([data-light]) .cxh .orbit .orb-t{fill:rgba(209,209,214,.7)!important}
html[data-look=cosmos]:not([data-light]) .cxh .hub{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 24%),radial-gradient(circle at 40% 35%,#F2F2F5,#D1D1D6 48%,#2C2C2E 100%)!important;box-shadow:inset 0 -14px 24px rgba(0,30,60,.45),inset 0 6px 12px rgba(255,255,255,.6),0 0 0 8px rgba(255,255,255,.08),0 0 60px rgba(230,230,235,.55)!important}
html[data-look=cosmos]:not([data-light]) .cxh .sat .dot{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 22%),radial-gradient(circle at 35% 30%,#48484A,#1C1C1E 55%,#050506);box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9),0 0 0 4px var(--ring,#AEAEB2),0 0 14px var(--ringgl,rgba(143,166,196,.3))}
html[data-look=cosmos]:not([data-light]) .cxh .sat .lb{background:rgba(6,6,8,.62)}
html[data-look=cosmos]:not([data-light]) .cxh .orb-key span{background:rgba(6,6,8,.55)}
html[data-look=cosmos]:not([data-light]) .cxh .orb-key .k.avail{background:radial-gradient(circle at 35% 28%,#F2F2F5,#6E6E73 50%,#1C1C1E)}
html[data-look=cosmos]:not([data-light]) .cxh .flow3>em{background:linear-gradient(90deg,rgba(242,242,245,.1),rgba(242,242,245,.6),rgba(242,242,245,.1))}
html[data-look=cosmos]:not([data-light]) .cxh .ai2 .ad .oi{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.85))}
html[data-look=cosmos]:not([data-light]) .cxh .onb2{background:rgba(6,6,8,.55)}
html[data-look=cosmos]:not([data-light]) .rhome .mb.av{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 22%),radial-gradient(circle at 35% 30%,#48484A,#1C1C1E 55%,#050506)}
html[data-look=cosmos]:not([data-light]) .rhome .mb.av{box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9),0 0 0 3.5px var(--cx-avring)}
html[data-look=cosmos]:not([data-light]) .rhome .mb.av.hot{box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 3px rgba(10,10,12,.9),0 0 0 6px #e8664f,0 0 22px rgba(232,102,79,.7)}
html[data-look=cosmos]:not([data-light]) .rhome .mb .oi{filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.85))}
html[data-look=cosmos]:not([data-light]) .rhome .nxtip{background:rgba(6,6,8,.38);box-shadow:inset 0 0 0 1px rgba(242,242,245,.25)}
html[data-look=cosmos]:not([data-light]) .rhome .nxtip b{color:#E5E5EA}
html[data-look=cosmos]:not([data-light]) .rhome .cxgo{color:#0B0B0C}
html[data-look=cosmos]:not([data-light]) .rhome .ev2 .dot{background:radial-gradient(circle at 35% 28%,#F2F2F5,#6E6E73 50%,#1C1C1E)}
html[data-look=cosmos]:not([data-light]) main>.subtabs .stb.on{color:#0B0B0C}
html[data-look=cosmos]:not([data-light]) .mdsec:has(.mdh .mdk.ac) .mdh{color:#E5E5EA}
html[data-look=cosmos]:not([data-light]) .mdis .mdi{background:rgba(6,6,8,.38)}
html[data-look=cosmos]:not([data-light]) .mdis .mdi .mdk{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 22%),radial-gradient(circle at 35% 30%,#48484A,#1C1C1E 55%,#050506);box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9),0 0 0 3.5px var(--r,#D1D1D6)}
html[data-look=cosmos]:not([data-light]) .wbar #lNew,html[data-look=cosmos]:not([data-light]) .wbar .btn:last-child:not(.g){color:#0B0B0C}
html[data-look=cosmos]:not([data-light]) .lav{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 22%),radial-gradient(circle at 35% 30%,#48484A,#1C1C1E 55%,#050506);box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9),0 0 0 3.5px var(--r,#D1D1D6),0 0 12px var(--g,rgba(230,230,235,.4))}
html[data-look=cosmos]:not([data-light]) .hbar i{background:linear-gradient(90deg,#D1D1D6,#F2F2F5)}
:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .login .f,:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .auth .f{background:rgba(6,6,8,.42)!important}
:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .login .f:focus,:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .auth .f:focus{box-shadow:inset 0 0 0 1.5px rgba(242,242,245,.8),0 0 16px rgba(230,230,235,.35)!important}
:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .login .btn,:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .auth .btn{color:#0B0B0C!important}
:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .login code,:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .login .demo b,:is(html[data-look=cosmos],html[data-look=cosmos-owner]):not([data-light]) .login kbd{background:rgba(6,6,8,.42)!important}
html[data-look=cosmos-owner]:not([data-light]) .side .nv.on svg{box-shadow:var(--cx-m-sh),0 0 0 3px rgba(255,255,255,.18),0 0 22px rgba(230,230,235,.55)}
html[data-look=cosmos-owner]:not([data-light]) .side .nv#out svg{color:#0B0B0C!important}
html[data-look=cosmos-owner]:not([data-light]) .btn.p,html[data-look=cosmos-owner]:not([data-light]) .btn.g,html[data-look=cosmos-owner]:not([data-light]) .btn.primary{color:#0B0B0C}
html[data-look=cosmos-owner]:not([data-light]) .f,html[data-look=cosmos-owner]:not([data-light]) input:not([type=checkbox]):not([type=radio]),html[data-look=cosmos-owner]:not([data-light]) select,html[data-look=cosmos-owner]:not([data-light]) textarea{background:rgba(6,6,8,.42)}
html[data-look=cosmos-owner]:not([data-light]) .tabs .on,html[data-look=cosmos-owner]:not([data-light]) .mtabs .on,html[data-look=cosmos-owner]:not([data-light]) .seg .on{color:#0B0B0C!important}
html[data-look=cosmos-owner]:not([data-light]) .modal{background:rgba(0,0,0,.55)}
html[data-look=cosmos-owner]:not([data-light]) .toast{background:rgba(10,10,12,.92)}
html[data-look=cosmos-owner]:not([data-light]) .ov-core{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 24%),radial-gradient(circle at 40% 35%,#F2F2F5,#D1D1D6 48%,#2C2C2E 100%)!important;box-shadow:inset 0 -14px 24px rgba(0,30,60,.45),inset 0 6px 12px rgba(255,255,255,.6),0 0 60px rgba(230,230,235,.55)!important}
html[data-look=cosmos-owner]:not([data-light]) .sat .dot,html[data-look=cosmos-owner]:not([data-light]) .ov-orbit .dot{background:radial-gradient(circle at 32% 20%,rgba(255,255,255,.75) 0%,rgba(255,255,255,0) 22%),radial-gradient(circle at 35% 30%,#48484A,#1C1C1E 55%,#050506)!important;box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9),0 0 0 4px #D1D1D6!important}
html[data-look=cosmos-owner]:not([data-light]) .sw{background:rgba(6,6,8,.42)!important}
html[data-look=cosmos]:not([data-light]) .cxh .orbit .orb-more{background:rgba(6,6,8,.62)}
html[data-look=cosmos]:not([data-light]) #queue .pq-ev{color:#E5E5EA}
/* from polish.css */
html:not([data-light]) body[data-st=call] .sanhow .sh-steps li:nth-child(2){background:rgba(230,230,235,.16);box-shadow:inset 0 0 0 1px rgba(230,230,235,.5)}
html:not([data-light]) .sh-wave i{background:#D1D1D6}
html:not([data-light]) .cx-look{background:linear-gradient(180deg,rgba(22,22,25,.94),rgba(10,10,12,.96))}
html:not([data-light]) .cx-look .lk-tg{background:rgba(6,6,8,.5)}
html:not([data-light]) .cx-look .lk-tg::after{background:radial-gradient(circle at 35% 28%,#fff,#D1D1D6 55%,#636366)}
html:not([data-light]) .cx-look .lk-auto[aria-checked=true] .lk-tg{background:linear-gradient(90deg,#6E6E73,#D1D1D6)}
html:not([data-light]) .cx-look [data-bg][aria-pressed=true]{background:rgba(230,230,235,.18);box-shadow:inset 0 0 0 1.5px #D1D1D6}
html:not([data-light]) .lrn-hero{background:linear-gradient(120deg,rgba(230,230,235,.14),rgba(32,201,141,.08));box-shadow:inset 0 0 0 1px rgba(230,230,235,.3)}
html:not([data-light]) .lrn-hero.on{background:linear-gradient(120deg,rgba(230,230,235,.26),rgba(32,201,141,.18));box-shadow:inset 0 0 0 1.5px rgba(111,240,192,.55),0 0 26px -6px rgba(230,230,235,.55)}
html:not([data-light]) .lrn-rep i{box-shadow:var(--cx-m-sh),0 0 0 2px rgba(10,10,12,.85)}
html:not([data-light]) .lrn-rep.top i{box-shadow:var(--cx-m-sh),0 0 0 2px rgba(10,10,12,.85),0 0 16px rgba(217,166,80,.7)}
html:not([data-light]) .lrn-rep small{color:var(--cx-mu,rgba(209,209,214,.74))}
html:not([data-light]) .lrn-tx small{color:var(--cx-sub,rgba(229,229,234,.8))}
html:not([data-light]) .lrn-cols h4{color:var(--cx-ice,#F2F2F5)}
html:not([data-light]) .lrn-it{background:rgba(6,6,8,.3)}
html:not([data-light]) .lrn-q small{color:var(--cx-mu,rgba(209,209,214,.74))}
html:not([data-light]) .lrn-q b.hb{color:var(--cx-sub,rgba(229,229,234,.85))}
html:not([data-light]) .lrn-sum{background:rgba(230,230,235,.1)}
html:not([data-light]) .lrn-pick .chip.on,html:not([data-light]) .lrn-vers .chip.on{color:#0B0B0C}
html:not([data-light]) .lrn-empty>small{color:var(--cx-sub,rgba(229,229,234,.8))}
html:not([data-light]) .lrn-bar i{background:rgba(6,6,8,.4)}
html:not([data-light]) .lrn-bar i b{background:linear-gradient(90deg,#D1D1D6,#20c98d)}
html:not([data-light]) .lrn-train{background:rgba(230,230,235,.12)}
html:not([data-light]) .lrn-train small{color:var(--cx-sub,rgba(229,229,234,.8))}
html:not([data-light]) .lrn-spin{border:3px solid rgba(230,230,235,.25);border-top-color:#D1D1D6}
html:not([data-light]) .hring .ar{stroke:var(--hc,#D1D1D6);filter:drop-shadow(0 0 3px var(--hg,rgba(230,230,235,.6)))}
html[data-look=cosmos]:not([data-light]) #queue .q .av{box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9)!important}
html[data-look=cosmos]:not([data-light]) .lav{box-shadow:inset 0 -6px 10px rgba(0,0,0,.3),inset 0 3px 6px rgba(255,255,255,.5),0 0 0 2px rgba(10,10,12,.9)!important}
html[data-look=cosmos]:not([data-light]) body #page-dial .card.dialer .numrow #bPad[aria-expanded=true]{background:rgba(230,230,235,.35)!important}
html[data-look=cosmos]:not([data-light]) body #page-dial .dialrow #bTransfer .oi,html[data-look=cosmos]:not([data-light]) body #page-dial .dialrow #bMore .oi{color:#E5E5EA}
html[data-look=cosmos]:not([data-light]) .snew{background:rgba(230,230,235,.16)}
@media (min-width:1151px){
html[data-look=cosmos]:not([data-light]) #page-dial .col.c .card{background:linear-gradient(180deg,rgba(22,22,25,.40),rgba(10,10,12,.52))!important}
}
/* from workspace.css */
html:not([data-light]) .ctl{background:#0B0B0C}
html:not([data-light]) .ctl::before{background:radial-gradient(ellipse 50% 60% at 30% 50%,rgba(32,217,158,.16),transparent 70%),radial-gradient(ellipse 45% 55% at 72% 45%,rgba(110,110,115,.28),transparent 70%)}
html:not([data-light]) .planet{background:radial-gradient(ellipse 26% 20% at 38% 36%,#18946A 0 62%,transparent 66%),radial-gradient(ellipse 16% 26% at 64% 60%,#18946A 0 58%,transparent 62%),radial-gradient(ellipse 12% 9% at 30% 70%,#18946A 0 55%,transparent 60%),radial-gradient(circle at 34% 30%,#4AA3FF 0%,#3A3A3C 42%,#082F5A 78%,#0B0B0C 100%)}
html:not([data-light]) .sat .dot{color:#0B0B0C}
html:not([data-light]) .sat.live .dot{color:#0B0B0C}
html:not([data-light]) .sat .lb{text-shadow:0 1px 6px #0B0B0C}
html:not([data-light]) .ad.warm{background:#3A3A3C}
html:not([data-light]) html body .lcall{border:1px solid rgba(110,110,115,.16)}
html:not([data-light]) html body .lcall .lav{background:#3A3A3C}
html:not([data-light]) html body .lpill.ai{background:rgba(110,110,115,.10);color:#3A3A3C}
html:not([data-light]) html body .lheat .lbar i{background:linear-gradient(90deg,#3A3A3C,#20D99E 60%,#f0a020)}
html:not([data-light]) html body .lcall .ltr .m.a{background:#3A3A3C}
html:not([data-light]) .sat.available .dot{color:#0B0B0C}
html:not([data-light]) .sico{background:#3A3A3C}
html:not([data-light]) .snew{background:rgba(110,110,115,.10);color:#3A3A3C}
html:not([data-light]) .sop{color:#3A3A3C}
html:not([data-light]) .onb2{background:rgba(110,110,115,.08)}
html:not([data-light]) .kt.team{background:#0B0B0C;border-color:#0B0B0C}
html:not([data-light]) .hub{background:radial-gradient(circle at 50% 40%,rgba(110,110,115,.55),rgba(8,8,10,.9) 70%);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(110,110,115,.35)}
html:not([data-light]) .vav.m{background:linear-gradient(135deg,#D1D1D6,#2563eb)}
html:not([data-light]) .otag.rep{border-color:rgba(209,209,214,.45)}
html:not([data-light]) .rtag.rep{background:rgba(209,209,214,.16)}
html:not([data-light]) .qbig{background:rgba(209,209,214,.10);border:1px solid rgba(209,209,214,.25)}
html:not([data-light]) .lch i{background:linear-gradient(90deg,#D1D1D6,#f97316)}
html:not([data-light]) .aqav{background:rgba(110,110,115,.18)}
html:not([data-light]) .slico{background:rgba(110,110,115,.14)}
/* from agent.css */
html:not([data-light]) .aurora{background:radial-gradient(ellipse 35% 45% at 30% 50%,rgba(32,217,158,.55),transparent 70%),radial-gradient(ellipse 35% 40% at 60% 40%,rgba(110,110,115,.45),transparent 70%),radial-gradient(ellipse 25% 35% at 80% 55%,rgba(32,217,158,.35),transparent 70%)}
html:not([data-light]) .win{background:#0B0B0C!important;box-shadow:0 24px 60px rgba(8,8,10,.45),0 0 40px rgba(32,217,158,.25)!important}
html:not([data-light]) .constel{background:radial-gradient(ellipse at 50% 40%,#0A2A38 0%,#0B0B0C 75%)}
html:not([data-light]) .annc{background:#0B0B0C;box-shadow:0 10px 30px rgba(8,8,10,.35)}
html:not([data-light]) .chipsel .ab.on{color:#0B0B0C}
html:not([data-light]) .oc.quote.picked{background:#3A3A3C}
html:not([data-light]) :root:not([data-theme="space"]) #pinned.deck .dk{border-color:rgba(110,110,115,.28)}
html:not([data-light]) #pinned .held{background:rgba(110,110,115,.08)}
html:not([data-light]) .brief{background:linear-gradient(180deg,rgba(110,110,115,.10),rgba(110,110,115,.04));border:1px solid rgba(110,110,115,.22)}
html:not([data-light]) .brief .open div{color:var(--ac2,#3A3A3C)}
html:not([data-light]) .tli2.ai .ic{background:rgba(110,110,115,.14)}
html:not([data-light]) html body .fw{background:radial-gradient(120% 90% at 85% -10%,rgba(32,217,158,.18),transparent 55%),radial-gradient(90% 80% at 0% 0%,rgba(110,110,115,.35),transparent 60%),#0B0B0C}
html:not([data-light]) html body .fwring .av{background:#3A3A3C}
html:not([data-light]) html body .fwb.sel{color:#0B0B0C}
html:not([data-light]) html body .fwdock{box-shadow:0 24px 60px rgba(8,8,10,.45)}
html:not([data-light]) .podium{background:radial-gradient(80% 70% at 50% 0%,rgba(240,160,32,.22),transparent 70%),linear-gradient(180deg,#0b2533,#0B0B0C)}
html:not([data-light]) .pav{background:#3A3A3C}
html:not([data-light]) .qlist{background:rgba(110,110,115,.12);color:#3A3A3C}
html:not([data-light]) .avsvg.botm{background:#3A3A3C}
html:not([data-light]) .avsvg.botm em{color:#0B0B0C}
html:not([data-light]) .avopt.on{border-color:#3A3A3C;box-shadow:0 0 0 3px rgba(110,110,115,.18)}
html:not([data-light]) .avopt.on::after{background:#3A3A3C}
html:not([data-light]) .subtabs .stb.on{color:#0B0B0C}
@media (max-width:1150px){
html:not([data-light]) .grid .col.r{box-shadow:0 20px 60px rgba(8,8,10,.35)}
html:not([data-light]) body[data-page="dial"] .qtoggle{background:#3A3A3C}
}
html:not([data-light]) .spm.ai,html:not([data-light]) .spm.owner{background:rgba(110,110,115,.08)}
html:not([data-light]) html body .pill.rolechip.rep{background:rgba(209,209,214,.16);border-color:rgba(209,209,214,.55)}
html:not([data-light]) html body nav .meav em.rolechip.rep{background:rgba(209,209,214,.22)}
html:not([data-light]) .hdm-chip.on{background:#3A3A3C;border-color:#3A3A3C}
html:not([data-light]) .hdm-chip:hover:not(.on){border-color:#3A3A3C}
html:not([data-light]) .hdm-row:hover{border-color:#3A3A3C;background:rgba(110,110,115,.05)}
html:not([data-light]) .hdm-av{background:rgba(110,110,115,.1)}
html:not([data-light]) .hdm-ac{color:#3A3A3C}
html:not([data-light]) .hdm-goal{background:rgba(110,110,115,.06)}
html:not([data-light]) .hdm-bar{background:rgba(110,110,115,.12)}
html:not([data-light]) .numrow .big:focus-within{border-color:#3A3A3C;box-shadow:0 0 0 3px rgba(110,110,115,.15)}
html:not([data-light]) .dlg .chip2.on,html:not([data-light]) .chip2.on{background:#3A3A3C!important;border-color:#3A3A3C!important}
html:not([data-light]) .savebar{background:rgba(110,110,115,.08);border:1px solid rgba(110,110,115,.25)}
html:not([data-light]) .brief .pbrief .pfull{color:var(--ac2,#3A3A3C)}
/* from ../server/owner_ui/owner.css */
html[data-look=cosmos-owner] .side{background-image:radial-gradient(ellipse 120% 40% at 100% 0%,rgba(110,110,115,.28),transparent 70%),radial-gradient(ellipse 90% 30% at 0% 100%,rgba(32,217,158,.12),transparent 70%)}
html[data-look=cosmos-owner] .top{box-shadow:0 10px 30px rgba(8,8,10,.18)}
html[data-look=cosmos-owner] .top::before{background:radial-gradient(ellipse 50% 60% at 35% 50%,rgba(32,217,158,.30),transparent 70%),radial-gradient(ellipse 45% 55% at 70% 45%,rgba(110,110,115,.45),transparent 70%)}
html[data-look=cosmos-owner] .top::after{background:radial-gradient(circle at 62% 30%,#4AA3FF 0%,#3A3A3C 40%,#082F5A 74%,#0B0B0C 100%)}
html[data-look=cosmos-owner] .orbit{background:radial-gradient(ellipse at 50% 55%,#0D3046 0%,#0B0B0C 70%)}
html[data-look=cosmos-owner] .orbit .planet{background:radial-gradient(ellipse 26% 20% at 38% 36%,#18946A 0 62%,transparent 66%),radial-gradient(ellipse 16% 26% at 64% 60%,#18946A 0 58%,transparent 62%),radial-gradient(circle at 34% 30%,#4AA3FF 0%,#3A3A3C 42%,#082F5A 78%,#0B0B0C 100%)}
html[data-look=cosmos-owner] .btn{box-shadow:0 2px 8px rgba(110,110,115,.22)}
html[data-look=cosmos-owner] .f:focus{box-shadow:0 0 0 3px rgba(110,110,115,.14)}
html[data-look=cosmos-owner] .modal{background:rgba(8,8,10,.45)}
html[data-look=cosmos-owner] .dlg{box-shadow:0 30px 80px rgba(8,8,10,.3)}
html[data-look=cosmos-owner] .toast{box-shadow:0 10px 30px rgba(8,8,10,.3)}
html[data-look=cosmos-owner] .auth{background:radial-gradient(ellipse at 50% 120%,#0D3046 0%,#0B0B0C 60%)}
html[data-look=cosmos-owner] .auth .card{background:#1C1C1E}
html[data-look=cosmos-owner] .auth .btn{background:#D1D1D6}
html[data-look=cosmos-owner] .mtabs button.on{box-shadow:0 2px 8px rgba(110,110,115,.25)}
html[data-look=cosmos-owner] .c1{background:#3A3A3C}
html[data-look=cosmos-owner] .c2{background:#D1D1D6}
html[data-look=cosmos-owner] .nv.on{box-shadow:inset 0 0 0 1px rgba(220,220,225,.18)}
html[data-look=cosmos-owner] .top .pill{box-shadow:0 1px 2px rgba(18,18,20,.04)}
html[data-look=cosmos-owner] .btn.g{box-shadow:0 1px 2px rgba(18,18,20,.05)}
html[data-look=cosmos-owner] .mtabs button.on{box-shadow:inset 0 0 0 1px rgba(220,220,225,.18)}
html[data-look=cosmos-owner] .seg button.on{box-shadow:0 2px 8px rgba(18,18,20,.10)}
html[data-look=cosmos-owner] .toast{box-shadow:0 10px 30px rgba(18,18,20,.16),inset 0 0 0 1px #fff}
html[data-look=cosmos-owner] .dlg{box-shadow:0 30px 80px rgba(18,18,20,.22)}
html[data-look=cosmos-owner] .orbit{box-shadow:0 1px 2px rgba(18,18,20,.04),0 30px 70px rgba(60,60,66,.12),inset 0 1px 0 #fff}
html[data-look=cosmos-owner] .orbit::before{background:radial-gradient(30% 36% at 78% 22%,rgba(220,220,225,.50),transparent 70%),radial-gradient(28% 34% at 22% 74%,rgba(52,211,153,.45),transparent 70%),radial-gradient(26% 32% at 62% 80%,rgba(139,92,246,.38),transparent 70%),radial-gradient(24% 28% at 38% 18%,rgba(34,211,238,.38),transparent 70%)}
html[data-look=cosmos-owner] .orbit svg.o ellipse,html[data-look=cosmos-owner] .orbit svg.o circle{stroke:rgba(220,220,225,.35)}
html[data-look=cosmos-owner] .sat i{box-shadow:0 0 0 2px rgba(255,255,255,.9),0 6px 16px rgba(60,60,66,.18)}
html[data-look=cosmos-owner] .auth .card{box-shadow:0 30px 80px rgba(60,60,66,.16)}
html[data-look=cosmos-owner] .ov-hero{box-shadow:0 1px 2px rgba(18,18,20,.04),0 30px 70px rgba(60,60,66,.12),inset 0 1px 0 #fff}
html[data-look=cosmos-owner] .ov-hero::before{background:radial-gradient(30% 40% at 85% 20%,rgba(220,220,225,.55),transparent 70%),radial-gradient(28% 38% at 15% 85%,rgba(52,211,153,.48),transparent 70%),
  radial-gradient(24% 30% at 55% 95%,rgba(139,92,246,.40),transparent 70%),radial-gradient(22% 26% at 40% 10%,rgba(34,211,238,.40),transparent 70%),radial-gradient(18% 22% at 95% 80%,rgba(255,181,71,.32),transparent 70%)}
html[data-look=cosmos-owner] .ov-chip{box-shadow:0 4px 14px rgba(60,60,66,.08)}
html[data-look=cosmos-owner] .ov-money{box-shadow:0 18px 44px rgba(60,60,66,.12)}
html[data-look=cosmos-owner] .ov-t:hover{box-shadow:0 1px 2px rgba(18,18,20,.04),0 20px 44px rgba(60,60,66,.12)}
html[data-look=cosmos-owner] .ov-calm{background:linear-gradient(135deg,rgba(220,220,225,.07),rgba(31,191,166,.09))}
html[data-look=cosmos-owner] .ov-core{box-shadow:0 8px 24px rgba(60,60,66,.18),inset 0 1px 0 #fff}
html[data-look=cosmos-owner] .auth .card{box-shadow:0 1px 2px rgba(18,18,20,.04),0 40px 100px rgba(60,60,66,.20),inset 0 1px 0 #fff}
html[data-look=cosmos-owner] .fxo:hover{border-color:rgba(230,230,235,.6)}
/* GENERATED:END */

/* ---------- glass windows ---------- */
html[data-look=cosmos] .card,html[data-look=cosmos] .wcard,html[data-look=cosmos] .cx-win{backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border-radius:24px}
html[data-look=cosmos] .ch .t,html[data-look=cosmos] .wbar h2,html[data-look=cosmos] .card h3,html[data-look=cosmos] .wcard h3{font-weight:700}
html[data-look=cosmos] .badge{background:rgba(255,255,255,.12);box-shadow:none}
html[data-look=cosmos] .badge.hot{color:#fff;background:radial-gradient(circle at 35% 28%,#FFD08A 0%,#FF9F0A 45%,#C25400 100%);box-shadow:0 2px 8px rgba(255,159,10,.35)}

/* ---------- readable text: nothing under 13px ---------- */
html[data-look=cosmos] .sb,html[data-look=cosmos] .lb,html[data-look=cosmos] small,html[data-look=cosmos] .badge,html[data-look=cosmos] .tag{font-size:max(13px,1em)}
html[data-look=cosmos] header .hk span,html[data-look=cosmos] header .over{font-size:12.5px;color:#D1D1D6}
html[data-look=cosmos] header .hk b{font-family:var(--cx-num);font-weight:400;font-size:19px;letter-spacing:-.3px}
html[data-look=cosmos] nav .nv{font-size:12.5px;font-weight:500;text-shadow:none}
html[data-look=cosmos] #page-dial .dialrow .cb span{font-size:13px!important}
html[data-look=cosmos] #cust .cact{font-size:13px!important}

/* ---------- the rail: grey bowling balls, the active one black with a green satellite ---------- */
html[data-look=cosmos] nav .nv .i{background:var(--sp-ball);box-shadow:var(--sp-ball-sh);color:#F5F5F7}
html[data-look=cosmos] nav .nv .i::before{display:none}
html[data-look=cosmos] nav .nv[data-nav=dial] .i,html[data-look=cosmos] nav .nv[data-nav=ai] .i,html[data-look=cosmos] nav .nv[data-nav=team] .i,html[data-look=cosmos] nav .nv[data-nav=biz] .i{background:var(--sp-ball)}
html[data-look=cosmos] nav .nv.on{font-weight:700}
html[data-look=cosmos] nav .nv.on .i{width:46px;height:46px;background:var(--sp-ball-act);box-shadow:inset -6px -8px 14px rgba(0,0,0,.8),inset 3px 3px 8px rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.18)}
html[data-look=cosmos] nav .nv.on .i::after{content:"";position:absolute;top:-6px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#20D99E;box-shadow:0 0 10px #20D99E,0 0 2px #fff;transform-origin:4px 29px;animation:sp-orbit 6s linear infinite}
@keyframes sp-orbit{to{transform:rotate(360deg)}}
html[data-look=cosmos] nav .nv#logout .i{background:var(--sp-ball);color:#F5F5F7}

/* ---------- the header ---------- */
html[data-look=cosmos] header{background:rgba(10,10,12,.78);box-shadow:var(--cx-win-sh)}
html[data-look=cosmos] header .pill{background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.12);font-weight:500}
html[data-look=cosmos] header .hk.ok b,html[data-look=cosmos] header .hk b.ok{color:#fff}

/* ---------- buttons: white primary, glass secondary ---------- */
html[data-look=cosmos] .btn.g,html[data-look=cosmos] .btn.p,html[data-look=cosmos] .btn.primary,html[data-look=cosmos] .btn.wide,html[data-look=cosmos] .ab.p,html[data-look=cosmos] .nextbtn{background:var(--sp-white)!important;color:#000!important;border:0!important;text-shadow:none;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 5px rgba(0,0,0,.14),0 6px 18px rgba(255,255,255,.12),0 2px 6px rgba(0,0,0,.35)!important;font-weight:600}
html[data-look=cosmos] .btn:not(.g):not(.p):not(.primary):not(.wide):not(.d):not(.danger):not(.bad),html[data-look=cosmos] .ab:not(.p){background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03));color:#F5F5F7;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.25)}
html[data-look=cosmos] .btn.d,html[data-look=cosmos] .btn.danger,html[data-look=cosmos] .btn.bad{background:radial-gradient(circle at 34% 24%,#FFB4AE,#E5342A 62%,#9A1E16)!important;color:#fff!important;border:0!important;box-shadow:0 6px 16px rgba(229,52,42,.35)!important}

/* ---------- tabs and segments: the chosen one is a white pill ---------- */
html[data-look=cosmos] .tabs button.on,html[data-look=cosmos] .tabs2 .t2.on,html[data-look=cosmos] .segs button.on,html[data-look=cosmos] .subtabs button.on,html[data-look=cosmos] .subtabs button[aria-selected=true],html[data-look=cosmos] .mode button.on,html[data-look=cosmos] .bzseg button.on{background:var(--sp-white)!important;color:#000!important;text-shadow:none;box-shadow:inset 0 1px 0 #fff,0 2px 6px rgba(0,0,0,.35)!important}

/* ---------- the dialer: grey orbs, the green call orb, outcome orbs in their colours ---------- */
html[data-look=cosmos] #page-dial .numrow .cb,html[data-look=cosmos] #page-dial .card.dialer .cb{background:var(--sp-ball)!important;box-shadow:var(--sp-ball-sh)!important}
html[data-look=cosmos] #page-dial .card.dialer .cb::before{display:none}
html[data-look=cosmos] #cust .cact svg{background:var(--sp-ball)}
html[data-look=cosmos] #cust .cact.wa svg{background:radial-gradient(circle at 34% 26%,#8BF5B4 0%,#25D366 40%,#128C4A 100%)}
html[data-look=cosmos] #cust .cact.sms svg{background:radial-gradient(circle at 34% 26%,#8EC5FF 0%,#0A84FF 42%,#0050B3 100%)}
html[data-look=cosmos] #cust .cact.mail svg{background:radial-gradient(circle at 34% 26%,#FFA49A 0%,#EA4335 42%,#A3241A 100%)}
html[data-look=cosmos] #page-dial .wrapbar .oc.won>span{background:radial-gradient(circle at 34% 24%,#C8FFDA,#4CE07A 30%,#1FA347 64%,#0B5E27)}
html[data-look=cosmos] #page-dial .wrapbar .oc.quote>span{background:radial-gradient(circle at 34% 24%,#D6E8FF,#5AA8FF 30%,#1F6FE0 64%,#0B3A84)}
html[data-look=cosmos] #page-dial .wrapbar .oc.fu>span{background:radial-gradient(circle at 34% 24%,#FFEBC0,#FFC045 30%,#DE8600 64%,#7E4600)}
html[data-look=cosmos] #page-dial .wrapbar .oc.na>span{background:radial-gradient(circle at 34% 24%,#F2F2F5,#A1A1A8 30%,#55555B 64%,#1C1C1E)}
html[data-look=cosmos] #page-dial .wrapbar .oc.no>span{background:radial-gradient(circle at 34% 24%,#FFD2CD,#FF6E61 30%,#D0382C 64%,#6E140F)}

/* ---------- inputs, tables, dialogs ---------- */
html[data-look=cosmos] .f,html[data-look=cosmos] input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-look=cosmos] select,html[data-look=cosmos] textarea{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
html[data-look=cosmos] :focus-visible{outline:2px solid #F5F5F7;outline-offset:2px}
html[data-look=cosmos] .modal{background:rgba(0,0,0,.55)}

/* ---------- the clay characters ---------- */
.avsvg.char{background:#1C1C1E}

/* ---------- the owner's control room ---------- */
html[data-look=cosmos-owner]{--sp-panel:rgba(10,10,12,.78)}
html[data-look=cosmos-owner] .tag,html[data-look=cosmos-owner] .pill,html[data-look=cosmos-owner] .ov-chip{background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
html[data-look=cosmos-owner] .dlg{background:var(--cx-win-solid)}
html[data-look=cosmos-owner] .modal{background:rgba(0,0,0,.55)}

@media (prefers-reduced-motion:reduce){html[data-look=cosmos] nav .nv.on .i::after{animation:none}}

/* ---------- small pieces ---------- */
html[data-look=cosmos] header .lbp{color:#F5F5F7!important;border-color:transparent!important}
html[data-look=cosmos] header .lbp::before{background:var(--sp-ball)}
html[data-look=cosmos] .cxh .hub{background:radial-gradient(circle at 34% 24%,#55555C 0%,#1C1C20 46%,#050506 100%)!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.3),inset 0 -10px 22px rgba(0,0,0,.6),0 14px 34px rgba(0,0,0,.6),0 0 0 8px rgba(255,255,255,.05)!important;color:#fff!important}
html[data-look=cosmos] .cxh .hub *{color:#fff!important;text-shadow:none!important}

/* ---------- light mode (html[data-light]): light glass over the same space, light orbs, black primary ---------- */
html[data-look=cosmos][data-light] nav .nv .i,html[data-look=cosmos][data-light] nav .nv[data-nav] .i,html[data-look=cosmos][data-light] nav .nv#logout .i{background:var(--sp-ball-light);color:#1D1D1F;box-shadow:inset -6px -8px 14px rgba(0,0,0,.16),inset 3px 3px 8px rgba(255,255,255,.9),0 8px 16px rgba(0,0,0,.2),0 2px 3px rgba(0,0,0,.15)}
html[data-look=cosmos][data-light] nav .nv.on .i{background:var(--sp-ball-act);color:#fff;box-shadow:inset -6px -8px 14px rgba(0,0,0,.8),inset 3px 3px 8px rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.35),0 0 0 3px rgba(0,0,0,.08)}
html[data-look=cosmos][data-light] nav .nv{color:#1D1D1F}
html[data-look=cosmos][data-light] #page-dial .numrow .cb,html[data-look=cosmos][data-light] #page-dial .card.dialer .cb{background:var(--sp-ball-light)!important;color:#1D1D1F!important;box-shadow:inset -5px -7px 12px rgba(0,0,0,.14),inset 3px 3px 8px rgba(255,255,255,.9),0 6px 14px rgba(0,0,0,.18)!important}
html[data-look=cosmos][data-light] #page-dial .dialrow .cb span{color:#1D1D1F!important}
html[data-look=cosmos][data-light] #cust .cact svg{background:var(--sp-ball-light);color:#1D1D1F!important}
html[data-look=cosmos][data-light] #cust .cact.wa svg,html[data-look=cosmos][data-light] #cust .cact.sms svg,html[data-look=cosmos][data-light] #cust .cact.mail svg{color:#fff!important}
html[data-look=cosmos][data-light] #cust .cact.wa svg{background:radial-gradient(circle at 34% 26%,#8BF5B4 0%,#25D366 40%,#128C4A 100%)}
html[data-look=cosmos][data-light] #cust .cact.sms svg{background:radial-gradient(circle at 34% 26%,#8EC5FF 0%,#0A84FF 42%,#0050B3 100%)}
html[data-look=cosmos][data-light] #cust .cact.mail svg{background:radial-gradient(circle at 34% 26%,#FFA49A 0%,#EA4335 42%,#A3241A 100%)}
html[data-look=cosmos][data-light] #cust .cact{color:#1D1D1F!important}
html[data-look=cosmos][data-light] .btn.g,html[data-look=cosmos][data-light] .btn.p,html[data-look=cosmos][data-light] .btn.primary,html[data-look=cosmos][data-light] .btn.wide,html[data-look=cosmos][data-light] .ab.p,html[data-look=cosmos][data-light] .nextbtn{background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.25)!important}
html[data-look=cosmos][data-light] .btn:not(.g):not(.p):not(.primary):not(.wide):not(.d):not(.danger):not(.bad),html[data-look=cosmos][data-light] .ab:not(.p){background:linear-gradient(180deg,#FFFFFF,#ECECF0);color:#1D1D1F;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.1)}
html[data-look=cosmos][data-light] .tabs button.on,html[data-look=cosmos][data-light] .tabs2 .t2.on,html[data-look=cosmos][data-light] .segs button.on,html[data-look=cosmos][data-light] .subtabs button.on,html[data-look=cosmos][data-light] .subtabs button[aria-selected=true],html[data-look=cosmos][data-light] .mode button.on,html[data-look=cosmos][data-light] .bzseg button.on{background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#fff!important;box-shadow:0 2px 6px rgba(0,0,0,.25)!important}
html[data-look=cosmos][data-light] header{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93));color:#0B0B0C}
html[data-look=cosmos][data-light] header .hk span,html[data-look=cosmos][data-light] header .over{color:#333336}
html[data-look=cosmos][data-light] header .hk b,html[data-look=cosmos][data-light] header .h1{color:#0B0B0C}
html[data-look=cosmos][data-light] header .pill,html[data-look=cosmos][data-light] header .lbp{background:linear-gradient(180deg,#FFFFFF,#ECECF0);color:#1D1D1F!important;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(0,0,0,.08)}
html[data-look=cosmos][data-light] header .lbp::before{background:var(--sp-ball-light)}
html[data-look=cosmos][data-light] .f,html[data-look=cosmos][data-light] input:not([type=checkbox]):not([type=radio]):not([type=range]),html[data-look=cosmos][data-light] select,html[data-look=cosmos][data-light] textarea{background:rgba(0,0,0,.05);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);color:#0B0B0C}
html[data-look=cosmos][data-light] :focus-visible{outline-color:#0B0B0C}
html[data-look=cosmos][data-light] nav .nv:not(.on) .i,html[data-look=cosmos][data-light] nav .nv:not(.on) .i .oi,html[data-look=cosmos][data-light] nav .nv:not(.on) .i svg{color:#1D1D1F!important;stroke:currentColor;filter:none!important}
html[data-look=cosmos][data-light] nav .nv.on .i .oi,html[data-look=cosmos][data-light] nav .nv.on .i svg{color:#fff!important;filter:none!important}
html[data-look=cosmos][data-light] #page-dial .card.dialer .cb .oi,html[data-look=cosmos][data-light] #page-dial .card.dialer .cb svg{color:#1D1D1F!important;filter:none!important}

/* ---------- the owner's control room: the same orbs and glass ---------- */
html[data-look=cosmos-owner] .side .nv{font-size:12px;font-weight:500;text-shadow:none}
html[data-look=cosmos-owner] .side .nv svg,html[data-look=cosmos-owner] .side .nv[data-go] svg{background:var(--sp-ball);box-shadow:var(--sp-ball-sh)}
html[data-look=cosmos-owner] .side .nv#out svg{background:var(--sp-ball);color:#F5F5F7!important}
html[data-look=cosmos-owner] .side .nv.on{font-weight:700}
html[data-look=cosmos-owner] .side .nv.on svg{background:var(--sp-ball-act);box-shadow:inset -6px -8px 14px rgba(0,0,0,.8),inset 3px 3px 8px rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.55),0 0 0 3px rgba(255,255,255,.18)}
html[data-look=cosmos-owner] .side .nv.on::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#20D99E;box-shadow:0 0 10px #20D99E,0 0 2px #fff;pointer-events:none}
html[data-look=cosmos-owner] .ov-core{background:radial-gradient(circle at 34% 24%,#55555C 0%,#1C1C20 46%,#050506 100%)!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.3),inset 0 -10px 22px rgba(0,0,0,.6),0 14px 34px rgba(0,0,0,.6)!important;color:#fff!important}
html[data-look=cosmos-owner] .ov-core *{color:#fff!important}
html[data-look=cosmos-owner] .sb,html[data-look=cosmos-owner] small,html[data-look=cosmos-owner] .tag,html[data-look=cosmos-owner] th{font-size:max(13px,1em)}
html[data-look=cosmos-owner] .cx-ring{display:none}
html[data-look=cosmos-owner]{--ocean:#F5F5F7;--ocean2:#D1D1D6;--cta-a:#FFFFFF;--cta-b:#C7C7CC}
/* counters that sit on the light accent stay readable (review 08.11) */
html[data-look=cosmos-owner] .mtabs button.on .badge{background:#0B0B0C;color:#fff}
html[data-look=cosmos-owner] .ov-n{background:#F5F5F7;color:#0B0B0C}

/* ================= the dialer, like the canvas: an orbit dial over space, the dock under it ================= */
html[data-look=cosmos] #page-dial .col.c{gap:12px}
html[data-look=cosmos] #page-dial .card.dialer{max-height:none!important;overflow:visible!important;position:relative;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;padding:0!important;gap:0!important;flex:1 1 auto;min-height:0}
.sp-dial{position:relative;flex:none;width:400px;height:400px;margin:30px auto 0;pointer-events:none}
.sp-dial svg{display:block;overflow:visible}
.sp-dial .sp-core{opacity:.92}
.sp-dial .sp-tk{stroke:#5A5A5F;stroke-width:1.2;stroke-linecap:round}
.sp-dial .sp-tk.lg{stroke:#8E8E93;stroke-width:2}
.sp-dial .sp-seg{fill:none;stroke:#2C2C2E;stroke-width:6;stroke-linecap:round}
.sp-dial .sp-seg.done{stroke:#F5F5F7}
.sp-dial .sp-seg.cur{stroke:#F5F5F7;stroke-dasharray:40 400}
.sp-dial .sp-lb{fill:#8E8E93;font:500 13px 'Heebo','IBM Plex Sans Hebrew',sans-serif;letter-spacing:1.1px}
.sp-dial .sp-lb.on{fill:#F5F5F7;font-weight:600}
.sp-dial .sp-dot{fill:#fff;filter:drop-shadow(0 0 8px rgba(255,255,255,.7))}
body[data-st=call] .sp-dial .sp-dot{fill:#20D99E;filter:drop-shadow(0 0 10px #20D99E)}
/* what is inside the dial: state, the big timer, the name, the number */
html[data-look=cosmos] #page-dial .card.dialer .dialside{position:static!important;display:contents}
html[data-look=cosmos] #page-dial .lineinfo{position:absolute!important;top:120px;left:50%;transform:translateX(-50%);width:250px;z-index:2;text-align:center}
html[data-look=cosmos] #page-dial .lineinfo .lrow{position:static;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;gap:4px!important}
html[data-look=cosmos] #page-dial .lineinfo .lmain{display:contents!important}
html[data-look=cosmos] #page-dial .lineinfo .phase{order:1;background:none!important;box-shadow:none!important;padding:0!important;font-size:13.5px!important;font-weight:600;color:#D1D1D6!important}
html[data-look=cosmos] #page-dial .lineinfo .phase .dot{width:7px;height:7px;background:#8E8E93;box-shadow:none}
html[data-look=cosmos] #page-dial .lineinfo .phase .dot.on{background:#30D158;box-shadow:0 0 10px #30D158}
html[data-look=cosmos] #page-dial .lineinfo .dur,html[data-look=cosmos] body[data-st=call] #page-dial .lineinfo .dur{order:2;font-family:'Heebo',sans-serif!important;font-weight:200!important;font-size:60px!important;line-height:1!important;letter-spacing:-1px;color:#F5F5F7!important;direction:ltr}
html[data-look=cosmos] body[data-st=call] #page-dial .lineinfo .dur{color:#fff!important}
html[data-look=cosmos] #page-dial .lineinfo .person{order:3;font-size:18px!important;font-weight:700;color:#F5F5F7;max-width:240px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look=cosmos] #page-dial .lineinfo .sb{position:absolute;top:-112px;left:50%;transform:translateX(-50%);width:max-content;max-width:520px;font-size:13.5px!important;color:#E5E5EA!important;padding:5px 14px;border-radius:14px;background:rgba(8,8,10,.6)}
html[data-look=cosmos] #page-dial .lineinfo .empty{color:#D1D1D6;font-size:13.5px;margin-top:40px}
html[data-look=cosmos] #page-dial .cardguard{position:absolute;top:-150px;left:50%;transform:translateX(-50%);width:max-content}
html[data-look=cosmos] #page-dial .numrow{position:absolute!important;top:300px;left:50%;transform:translateX(-50%);width:250px;z-index:2;display:flex;justify-content:center;gap:6px}
html[data-look=cosmos] body #page-dial .numrow .big .numin{font:400 16px/1.2 'Heebo',sans-serif!important;letter-spacing:.8px;color:#D1D1D6!important}
html[data-look=cosmos] body #page-dial .numrow .big .numin::placeholder{font-size:14px!important;color:#8E8E93!important}
html[data-look=cosmos] body #page-dial .numrow .big small{display:none!important}
html[data-look=cosmos] #page-dial .numrow #bClear{position:absolute;left:-4px;top:-2px;width:26px!important;height:26px!important}
html[data-look=cosmos] #page-dial .numrow #bClear span{display:none}
html[data-look=cosmos] #page-dial .numrow #bFloat{position:fixed!important;top:auto;left:auto}
html[data-look=cosmos] #page-dial .card.dialer #bFloat{position:absolute!important;top:-262px;left:-150px}
/* the keypad opens inside the dial */
html[data-look=cosmos] #page-dial .card.dialer:not(.nopad) .pad{position:absolute;top:76px;left:50%;transform:translateX(-50%);z-index:4;width:250px;padding:14px;border-radius:30px;background:rgba(10,10,12,.92);box-shadow:var(--cx-win-sh);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
/* the dock: one glass pill of orbs, the green call orb in the middle */
html[data-look=cosmos] #page-dial .dialrow{margin:auto 0 0!important;padding:14px 26px 30px!important;gap:22px!important;border-radius:34px;background:rgba(10,10,12,.76);box-shadow:var(--cx-win-sh);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);align-items:flex-end!important;flex-wrap:nowrap!important}
html[data-look=cosmos] #page-dial .dialrow .cb{width:52px!important;height:52px!important}
html[data-look=cosmos] #page-dial .dialrow #bMute,html[data-look=cosmos] #page-dial .dialrow #bHold,html[data-look=cosmos] #page-dial .dialrow #bTransfer,html[data-look=cosmos] #page-dial .dialrow #bMore,html[data-look=cosmos] #page-dial .dialrow #bPad,html[data-look=cosmos] #page-dial .dialrow #bAi{background:var(--sp-ball)!important;box-shadow:var(--sp-ball-sh)!important}
html[data-look=cosmos] #page-dial .dialrow #bPad{order:6;position:relative}
html[data-look=cosmos] #page-dial .dialrow #bPad span{display:block!important;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;color:#fff;white-space:nowrap}
html[data-look=cosmos] #page-dial .dialrow #bAi{order:9}
html[data-look=cosmos] #page-dial .dialrow .cb span{top:calc(100% + 6px)!important}
html[data-look=cosmos] body #page-dial .dialrow .callnow{width:84px!important;height:84px!important;margin:-26px 4px 0!important;background:var(--sp-call)!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.65),inset 0 -10px 18px rgba(0,0,0,.3),0 10px 30px rgba(48,209,88,.45),0 0 0 7px rgba(48,209,88,.14)!important}
html[data-look=cosmos] body #page-dial .dialrow .callnow.live{background:radial-gradient(circle at 34% 24%,#FFB4AE 0%,#FF453A 35%,#B3211A 100%)!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.55),inset 0 -10px 18px rgba(0,0,0,.3),0 10px 30px rgba(255,69,58,.45)!important}
html[data-look=cosmos] body #page-dial .dialrow .callnow::after{top:calc(100% + 6px)!important;font-size:13.5px!important}
html[data-look=cosmos] body[data-st=before] #page-dial .nocallbtn{order:3;align-self:flex-end!important;margin-bottom:2px}
/* SAN: a slim voice strip under the dial; the six stages live on the ring (the list stays for screen readers) */
html[data-look=cosmos] #page-dial .card.nova{flex:none;padding:10px 16px!important;border-radius:20px}
html[data-look=cosmos] #page-dial .card.nova .heat .stages{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap}
html[data-look=cosmos] #page-dial .card.actions:has(#novaFeed>.empty:only-child):has(#pinned:empty){display:none}
html[data-look=cosmos] body #page-dial .card.dialer,html[data-look=cosmos] body #page-dial .card.dialer.nopad{height:auto!important;min-height:0!important;max-height:none!important;flex:1 1 auto!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;overflow:visible!important}
html[data-look=cosmos] body #page-dial .card.dialer,html[data-look=cosmos] body #page-dial .card.dialer.nopad{background-image:none!important}
html[data-look=cosmos] body[data-st] #page-dial .dialrow #bPad{display:flex!important}
html[data-look=cosmos] body[data-st] #page-dial .dialrow #bAi:not([hidden]){display:flex!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .card.dialer .lineinfo .person{display:block!important}
html[data-look=cosmos] body #page-dial .numrow .big{width:100%!important}
html[data-look=cosmos] body #page-dial .numrow .big .numin{width:100%!important}
.sp-dial{margin-top:44px}
html[data-look=cosmos] #page-dial .lineinfo{top:122px}
html[data-look=cosmos] #page-dial .numrow{top:312px}
html[data-look=cosmos] #page-dial .dialrow{margin-top:40px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .card.dialer.dialer{background:none!important;background-image:none!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow .big{flex:1 1 auto!important;width:230px!important;min-width:230px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow .big .numin{width:230px!important;min-width:230px!important;text-align:center}
/* dock order, right to left like the canvas: AI, update without a call, CALL, keypad, more (during a call: mute, hold, CALL/hang up, transfer, keypad, more) */
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bAi{order:1!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bMute{order:2!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .nocallbtn{order:3!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bHold{order:3!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow{order:5!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bTransfer{order:6!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bPad{order:7!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bMore{order:8!important}
/* "more" and "update without a call" are orbs with a label under them, like the rest */
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bMore,html[data-orbit][data-look=cosmos][data-theme] body[data-st=before] #page-dial .dialrow #bMore{width:52px!important;min-width:52px!important;height:52px!important;padding:0!important;border-radius:50%!important;font-size:18px!important;justify-content:center}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow #bMore span{display:block!important;position:absolute;top:calc(100% + 6px)!important;left:50%;transform:translateX(-50%);font-size:13px!important;font-weight:600;white-space:nowrap}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=before] #page-dial .dialrow #bNoCall{position:relative;width:52px!important;min-width:52px!important;height:52px!important;padding:0!important;border-radius:50%!important;font-size:0!important;color:transparent!important;background:var(--sp-ball)!important;box-shadow:var(--sp-ball-sh)!important;margin-bottom:0!important;overflow:visible}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=before] #page-dial .dialrow #bNoCall::after{content:"עדכון בלי שיחה";position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);font-size:13px;font-weight:600;color:#fff;white-space:nowrap}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow{justify-content:center!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow .big .numin{text-align:center!important;direction:ltr}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .cb{position:relative!important;flex-direction:column}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .cb>span{display:block!important;position:absolute!important;top:calc(100% + 6px)!important;left:50%!important;transform:translateX(-50%)!important;font-size:13px!important;font-weight:600;color:#fff;white-space:nowrap;margin:0!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=before] #page-dial .dialrow #bNoCall .oi{display:inline-flex!important;font-size:20px!important;width:20px!important;height:20px!important;color:#F5F5F7!important}
/* the float pill sits at the top corner, the "clear digit" orb next to the number */
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow #bFloat{position:absolute!important;top:-300px!important;left:-140px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow #bClear{position:absolute!important;left:-30px!important;top:2px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow .big .numin{font:400 17px/1.2 'Heebo',sans-serif!important;letter-spacing:1px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow{gap:34px!important;padding:14px 34px 32px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow{display:block!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow .big{display:block!important;width:100%!important;min-width:0!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow .big .numin{width:100%!important;min-width:0!important;padding:0!important;text-align:center!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow{top:296px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow #bClear{left:-14px!important}
html[data-look=cosmos] #page-dial .card.nova{margin-top:8px}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bMute,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bHold,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bTransfer,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bMore,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bPad,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bAi{width:52px!important;min-width:52px!important;height:52px!important;padding:0!important;border:0!important;border-radius:50%!important;background:var(--sp-ball)!important;box-shadow:var(--sp-ball-sh)!important;color:#F5F5F7!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bMute[aria-pressed=true],html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bHold[aria-pressed=true],html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bMute.on,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bHold.on{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#EDEDF1 38%,#B9B9C0 80%,#8E8E95 100%)!important;color:#000!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .cb:disabled{opacity:.45}
.sp-dial .sp-seg.cur{stroke:#F5F5F7;stroke-dasharray:none;opacity:.6}
html[data-look=cosmos] #page-dial .lineinfo .phase{white-space:nowrap}
/* how the call ended: five glossy orbs with their colours, like the canvas (the picked one gets a white ring) */
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .outcomes{display:flex!important;justify-content:center;gap:18px!important;padding:6px 10px 4px!important;border-radius:22px!important;background:none!important;box-shadow:none!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc{flex-direction:column!important;gap:7px!important;height:auto!important;padding:0!important;background:none!important;box-shadow:none!important;font-size:13.5px!important;font-weight:600!important;color:#D1D1D6!important;min-width:64px}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc>span{width:46px!important;height:46px!important;border-radius:50%!important;font-size:0!important;position:relative;box-shadow:inset 0 2px 2px rgba(255,255,255,.6),inset 0 -10px 16px rgba(0,0,0,.32),0 8px 20px rgba(0,0,0,.4)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc>span::after{content:"";position:absolute;top:9%;left:22%;width:42%;height:26%;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0))}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.picked{background:none!important;color:#fff!important;font-weight:800!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.picked>span{box-shadow:0 0 0 3px #000,0 0 0 5.5px #fff,0 10px 26px rgba(0,0,0,.5)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc:hover>span{transform:translateY(-2px)}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.won>span{background:radial-gradient(circle at 34% 24%,#C8FFDA,#4CE07A 30%,#1FA347 64%,#0B5E27)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.quote>span{background:radial-gradient(circle at 34% 24%,#D6E8FF,#5AA8FF 30%,#1F6FE0 64%,#0B3A84)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.fu>span{background:radial-gradient(circle at 34% 24%,#FFEBC0,#FFC045 30%,#DE8600 64%,#7E4600)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.na>span{background:radial-gradient(circle at 34% 24%,#F2F2F5,#A1A1A8 30%,#55555B 64%,#1C1C1E)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.no>span{background:radial-gradient(circle at 34% 24%,#FFD2CD,#FF6E61 30%,#D0382C 64%,#6E140F)!important}
/* ================= after the call, like the canvas "סיום השיחה": no dial, a top line, the outcome card ================= */
body[data-st=wrap] .sp-dial{display:none}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .dialrow,html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .numrow{display:none!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .lineinfo{position:static!important;transform:none;width:100%;margin:6px 0 12px}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .lineinfo .lrow{flex-direction:row!important;justify-content:center!important;gap:12px!important;padding:8px 16px;border-radius:16px;background:rgba(8,8,10,.62);width:max-content;margin:0 auto}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .lineinfo .dur{font-size:17px!important;font-weight:400!important;letter-spacing:0}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .lineinfo .person{font-size:15px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .lineinfo .sb{display:none!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .wrapbar{width:100%;box-sizing:border-box;padding:18px 20px 16px!important;border-radius:24px;background:rgba(10,10,12,.76)!important;box-shadow:var(--cx-win-sh)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex!important;flex-direction:column;gap:14px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .wrapbar::before{content:"איך נגמרה השיחה?"!important;display:block;font-size:17px!important;font-weight:700;color:#fff!important;text-align:right}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .wrapbar .outcomes{justify-content:space-between!important;gap:6px!important;padding:2px 6px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .wrapbar .oc>span{width:54px!important;height:54px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .wraprow{display:flex!important;flex-direction:column!important;gap:10px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .notebar{display:flex;gap:8px}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .notebar input{flex:1;height:44px;border-radius:14px}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .nextbtn{height:46px!important;border-radius:16px!important;font-size:14.5px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .nocallback{align-self:flex-start;order:9;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.14)!important;color:#F5F5F7!important;border-radius:14px!important;height:38px;padding:0 14px!important;font-size:13.5px!important}
/* ---- the dial follows the screen: full size on a 1600×900 screen, smaller on a laptop, never pushes the dock off ---- */
html[data-look=cosmos] #page-dial .card.dialer{--d:400px;--m:30px}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .card.dialer .sp-dial{width:var(--d);height:var(--d);margin-top:var(--m)}
.sp-dial svg{width:100%;height:100%}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .lineinfo{top:calc(var(--m) + var(--d)*.25)}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .lineinfo .dur{font-size:calc(var(--d)*.15)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .lineinfo .sb{top:calc(-1*var(--d)*.2 - 4px)}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow{top:calc(var(--m) + var(--d)*.63)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .dialrow{gap:clamp(12px,1.6vw,34px)!important;padding:12px clamp(16px,1.8vw,34px) 30px!important;margin-top:clamp(16px,3vh,40px)!important;max-width:100%;box-sizing:border-box}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .cb.sel{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#EDEDF1 38%,#B9B9C0 80%,#8E8E95 100%)!important;color:#000!important}
@media (max-height:820px){html[data-orbit][data-look=cosmos][data-theme] body #page-dial .card.dialer{--m:18px}html[data-look=cosmos] #page-dial .card.nova{padding:6px 14px!important}}
/* outcome tiles (Gal 09.11: closer together, a tile around each orb) */
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .outcomes,html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .wrapbar .outcomes{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;padding:0!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc{min-width:0!important;padding:12px 4px 10px!important;border-radius:18px!important;background:rgba(255,255,255,.05)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)!important;color:#F5F5F7!important;gap:8px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc:hover{background:rgba(255,255,255,.09)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc>span,html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .wrapbar .oc>span{width:40px!important;height:40px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.picked{background:rgba(255,255,255,.15)!important;box-shadow:inset 0 0 0 1.5px #fff,0 8px 18px rgba(0,0,0,.25)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .wrapbar .oc.picked>span{box-shadow:inset 0 2px 2px rgba(255,255,255,.6),inset 0 -10px 16px rgba(0,0,0,.32),0 8px 20px rgba(0,0,0,.4)!important}
html[data-look=cosmos][data-light] body #page-dial .wrapbar .oc{color:#1D1D1F!important;background:rgba(0,0,0,.035)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)!important}
html[data-look=cosmos][data-light] body #page-dial .wrapbar .oc.picked{background:rgba(0,0,0,.1)!important;box-shadow:inset 0 0 0 1.5px #0B0B0C!important}
/* Gal 09.11: the familiar phone icon in the call orb (not the logo) */
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow .oi{display:inline-flex!important;width:32px!important;height:32px!important;color:#fff!important;filter:drop-shadow(0 1px 2px rgba(0,30,10,.5))!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow .mbr{display:none!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow::before{display:none!important}
/* Gal 09.11: the dock is a dome (half circle): the call orb on top, the other orbs follow the curve down */
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow{min-height:132px;box-sizing:border-box;align-items:flex-end!important;padding:0 26px 14px!important;gap:6px!important;border-radius:999px 999px 30px 30px/120px 120px 30px 30px!important;min-width:480px}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow>*{margin-bottom:22px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .callnow{transform:translateY(-40px)!important;margin:0 8px 22px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .callnow:hover{transform:translateY(-40px) scale(1.04)!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow :is(#bNoCall,#bHold,#bTransfer){transform:translateY(-22px)}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=before] #page-dial .dialrow #bPad{transform:translateY(-22px)}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=call] #page-dial .dialrow #bPad{transform:translateY(-8px)}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .cb,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bNoCall{margin:0 4px 22px!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow,html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow.has-oi{background:var(--sp-call)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow.live,html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow.live.has-oi{background:radial-gradient(circle at 34% 24%,#FFB4AE 0%,#FF453A 35%,#B3211A 100%)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow.wait,html[data-orbit][data-look=cosmos][data-theme] body #page-dial .dialrow .callnow.wait.has-oi{background:radial-gradient(circle at 34% 24%,#FFEBC0,#FFC045 30%,#DE8600 64%,#7E4600)!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow{width:500px;min-width:0;min-height:140px;padding:0 18px 12px!important;justify-content:center;border-radius:250px 250px 30px 30px/120px 120px 30px 30px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .callnow{transform:translateY(-36px)!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .callnow:hover{transform:translateY(-36px) scale(1.04)!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c{min-height:0;overflow:hidden}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .card.dialer{min-height:0!important;flex:1 1 0!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow{margin-top:auto!important;flex:none}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial.grid .col.c{height:100%!important;align-self:stretch!important;max-height:100%!important}
/* after the call: the card sits right under the top line; SAN's actions get the rest of the column */
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .card.dialer{flex:none!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .lineinfo{position:static!important;transform:none!important;top:auto!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .lineinfo .dur{font-size:17px!important;font-weight:500!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .wraprow{flex-direction:row!important;align-items:center}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .notebar{flex:1}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .nextbtn{flex:none;padding:0 22px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .card.actions{display:flex!important;flex:1 1 0!important;min-height:0!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .card.actions .scroll{min-height:0;overflow:auto}
/* after the call the number stays reachable (typing a new number starts the next call), small under the top line */
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .numrow{display:block!important;position:static!important;transform:none!important;width:260px;margin:-6px auto 10px}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .numrow .big .numin{font-size:14px!important;color:#AEAEB2!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .numrow #bFloat,html[data-orbit][data-look=cosmos][data-theme] body[data-st=wrap] #page-dial .col.c .numrow #bClear{display:none!important}

/* ================= home, leads, rail: details from the canvas ================= */
/* the home hub is the black orb */
html[data-orbit][data-look=cosmos][data-theme] #page-home .stage .hub{background:radial-gradient(circle at 34% 24%,#55555C 0%,#1C1C20 46%,#050506 100%)!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.3),inset 0 -10px 22px rgba(0,0,0,.6),0 14px 34px rgba(0,0,0,.6),0 0 0 8px rgba(255,255,255,.05)!important;color:#fff!important}
html[data-orbit][data-look=cosmos][data-theme] #page-home .stage .hub *{color:#fff!important;text-shadow:none!important}
html[data-orbit][data-look=cosmos][data-theme] #page-home .stage .hub svg path{stroke:#fff!important}
/* the call button on every lead row is the small green phone orb */
html[data-orbit][data-look=cosmos][data-theme] #page-leads .ab.p.has-oi[title="חייג"]{width:38px!important;height:38px!important;padding:0!important;border-radius:50%!important;background:var(--sp-call)!important;color:#fff!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.6),inset 0 -6px 10px rgba(0,0,0,.25),0 6px 16px rgba(48,209,88,.35)!important}
html[data-orbit][data-look=cosmos][data-theme] #page-leads .ab.p.has-oi[title="חייג"] .oi{color:#fff!important}
html[data-orbit][data-look=cosmos][data-theme] #page-leads .ab.ob-dots{background:var(--sp-ball)!important;box-shadow:var(--sp-ball-sh)!important;border-radius:50%!important}
/* SAN in the rail is the assistant's warm cloud, called "עוזר אישי" */
html[data-look=cosmos] #saOrb{border-radius:50%;overflow:hidden;background:radial-gradient(circle at 30% 30%,#FFFDF3 0,rgba(255,253,243,0) 36%),radial-gradient(circle at 72% 66%,#FFB347 0,rgba(255,179,71,0) 44%),radial-gradient(circle at 34% 76%,#FFD7A3 0,rgba(255,215,163,0) 40%),linear-gradient(160deg,#FFEAB8 0%,#FFC060 55%,#FF9447 100%)!important;box-shadow:inset 0 0 10px rgba(255,255,255,.65),0 0 16px rgba(255,176,70,.5),0 0 34px rgba(255,150,60,.2)!important}
html[data-look=cosmos] #saOrb>*{display:none!important}
html[data-look=cosmos] #saOrb{overflow:visible!important}
html[data-look=cosmos] #saOrb::after{content:"עוזר אישי";display:block!important;position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 12.5px 'Heebo','IBM Plex Sans Hebrew',sans-serif;color:#F5F5F7;background:none;border:0;box-shadow:none}
html[data-look=cosmos][data-light] #saOrb::after{color:#1D1D1F}
html[data-look=cosmos] #saOrb{width:46px!important;height:46px!important;min-width:46px;flex:none}

/* ===== fixes 09.11 (Gal: crooked on a laptop screen) ===== */
/* WhatsApp / SMS / Gmail: their real logos on white glossy orbs, like the canvas */
html[data-look=cosmos] #cust .cact:is(.wa,.sms,.mail) svg{background:url(/brand/whatsapp.webp) center/72% no-repeat,radial-gradient(circle at 34% 24%,#FFFFFF 0%,#F2F2F5 55%,#C9C9CF 100%)!important;box-shadow:inset 0 -4px 8px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.35)!important}
html[data-look=cosmos] #cust .cact.sms svg{background-image:url(/brand/sms.webp),radial-gradient(circle at 34% 24%,#FFFFFF 0%,#F2F2F5 55%,#C9C9CF 100%)!important}
html[data-look=cosmos] #cust .cact.mail svg{background-image:url(/brand/gmail.webp),radial-gradient(circle at 34% 24%,#FFFFFF 0%,#F2F2F5 55%,#C9C9CF 100%)!important}
html[data-look=cosmos] #cust .cact:is(.wa,.sms,.mail) svg>*{opacity:0!important}
/* the dome dock: five equal slots, symmetric, nothing spills out of the dome */
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow{width:min(500px,100%)!important;padding:0 10px 12px!important;gap:0!important;justify-content:center!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow>:is(.cb,#bNoCall){flex:0 0 52px!important;margin:0 12px 24px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .callnow{flex:0 0 84px!important;margin:0 14px 24px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bAi{transform:none!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow #bAi>span{white-space:nowrap}
/* the status hint does not sit on the ring's labels; the "clear digit" sits beside the number inside the dial */
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .lineinfo .sb{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;padding:0!important}
html[data-orbit][data-look=cosmos][data-theme] body #page-dial .col.c .numrow #bClear{left:10px!important;top:-2px!important;width:24px!important;height:24px!important}
/* SAN strip: the assistant's warm orb */
html[data-look=cosmos] #page-dial .card.nova .nvorb,html[data-look=cosmos] #page-dial .card.nova .novaorb{background:radial-gradient(circle at 30% 30%,#FFFDF3 0,rgba(255,253,243,0) 36%),linear-gradient(160deg,#FFEAB8 0%,#FFC060 55%,#FF9447 100%)!important;box-shadow:0 0 14px rgba(255,176,70,.45)!important}
html[data-look=cosmos] #page-dial .card.nova #orb.sanring{background:radial-gradient(circle at 30% 30%,#FFFDF3 0,rgba(255,253,243,0) 36%),radial-gradient(circle at 72% 66%,#FFB347 0,rgba(255,179,71,0) 44%),linear-gradient(160deg,#FFEAB8 0%,#FFC060 55%,#FF9447 100%)!important;box-shadow:inset 0 0 8px rgba(255,255,255,.6),0 0 14px rgba(255,176,70,.45)!important;border:0!important}
html[data-look=cosmos] #page-dial .card.nova #orb.sanring::before,html[data-look=cosmos] #page-dial .card.nova #orb.sanring::after{display:none!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow>*{align-self:flex-end!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=before] #page-dial .dialrow #bNoCall{order:2!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow .callnow{width:84px!important;height:84px!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow #bMore,html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow #bNoCall{align-self:flex-end!important}
/* during a call the dock is like the canvas: mute, hold, END, transfer, more (the keypad is in "עוד" → מקלדת מספרים) */
html[data-orbit][data-look=cosmos][data-theme] body[data-st=call] #page-dial .col.c .dialrow #bPad{display:none!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=call] #page-dial .col.c .dialrow #bHold,html[data-orbit][data-look=cosmos][data-theme] body[data-st=call] #page-dial .col.c .dialrow #bTransfer{transform:translateY(-22px)!important}
html[data-orbit][data-look=cosmos][data-theme] body[data-st=call] #page-dial .col.c .dialrow #bMute,html[data-orbit][data-look=cosmos][data-theme] body[data-st=call] #page-dial .col.c .dialrow #bMore{transform:none!important;align-self:flex-end!important}

/* ================= canvas tokens (the same names the canvas uses, prefixed): one place for both modes ================= */
html[data-look=cosmos],html[data-look=cosmos-owner]{--sp-t:#F5F5F7;--sp-s:#D1D1D6;--sp-m:#B0B0B6;--sp-line:rgba(255,255,255,.09);--sp-f1:rgba(255,255,255,.05);--sp-f2:rgba(255,255,255,.08);--sp-f3:rgba(255,255,255,.15);--sp-trk:#2C2C2E;--sp-btn:#F5F5F7;--sp-btnT:#000;--sp-tip1:rgba(255,255,255,.08);--sp-tip2:rgba(255,255,255,.025);--sp-livec:#30D158;
 --sp-gbtn:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.03));--sp-gbtn-sh:inset 0 1px 0 rgba(255,255,255,.14),0 2px 8px rgba(0,0,0,.25);
 --sp-pbtn:linear-gradient(180deg,#FFFFFF 0%,#E4E4E9 55%,#CFCFD5 100%);--sp-pbtn-sh:inset 0 1px 0 #FFFFFF,inset 0 -2px 5px rgba(0,0,0,.14),0 6px 18px rgba(255,255,255,.14),0 2px 6px rgba(0,0,0,.35)}
html[data-look=cosmos][data-light],html[data-look=cosmos-owner][data-light]{--sp-t:#0B0B0C;--sp-s:#333336;--sp-m:#4A4A4F;--sp-line:rgba(0,0,0,.08);--sp-f1:rgba(0,0,0,.035);--sp-f2:rgba(0,0,0,.06);--sp-f3:rgba(0,0,0,.1);--sp-trk:#D6D6DC;--sp-btn:#1D1D1F;--sp-btnT:#FFFFFF;--sp-tip1:rgba(0,0,0,.05);--sp-tip2:rgba(0,0,0,.02);--sp-livec:#1F9D46}
/* the canvas buttons: glass (gbtn) and white (pbtn). On the open sky they look the same in both modes */
html[data-look=cosmos] .sp-g,html[data-look=cosmos] .sp-sel{background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-weight:500!important;text-shadow:none!important}
html[data-look=cosmos] .sp-p{background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important;font-weight:600!important;text-shadow:none!important}
html[data-look=cosmos] .sun{position:relative;display:inline-block;flex:none;overflow:hidden;border-radius:50%;isolation:isolate;background:radial-gradient(circle at 30% 30%,#FFFDF3 0,rgba(255,253,243,0) 36%),radial-gradient(circle at 72% 66%,#FFB347 0,rgba(255,179,71,0) 44%),radial-gradient(circle at 34% 76%,#FFD7A3 0,rgba(255,215,163,0) 40%),radial-gradient(circle at 76% 24%,#FFEDC2 0,rgba(255,237,194,0) 40%),linear-gradient(160deg,#FFEAB8 0%,#FFC060 55%,#FF9447 100%);background-size:190% 190%;box-shadow:inset 0 0 10px rgba(255,255,255,.65),inset 0 -4px 10px rgba(230,110,30,.25),0 0 16px rgba(255,176,70,.5),0 0 34px rgba(255,150,60,.2)}
html[data-look=cosmos] .callb{background:linear-gradient(180deg,#5EE88A 0%,#30D158 45%,#1FA346 100%)!important;color:#fff!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.18),0 8px 24px rgba(48,209,88,.38)!important;cursor:pointer}
@media (prefers-reduced-motion:no-preference){html[data-look=cosmos] .glowp{animation:spGlow 2.4s ease-in-out infinite}}
@keyframes spGlow{0%,100%{opacity:.45}50%{opacity:1}}

/* ================= calendar, like the canvas "יומן": the toolbar, today's clock on the right, the week ================= */
html[data-look=cosmos] #page-calendar.on{display:flex;flex-direction:column;gap:16px;min-height:0}
html[data-look=cosmos] #page-calendar .sp-calbar{display:flex;align-items:center;gap:14px;flex:none;flex-wrap:nowrap;margin:0;padding:0;background:none;border:0;box-shadow:none}
html[data-look=cosmos] #page-calendar .sp-calbar>h2{position:absolute;width:1px;height:1px;overflow:hidden;margin:0;clip:rect(0 0 0 0)}
html[data-look=cosmos] #page-calendar .sp-calbar .ab{height:40px;padding:0 17px;border-radius:14px!important;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-width:0}
html[data-look=cosmos] #page-calendar #cRange{font-size:14px;color:#E5E5EA;white-space:nowrap}
html[data-look=cosmos] #page-calendar .legend2{display:flex;gap:12px;padding:8px 14px;font-size:13px;color:#F5F5F7;border-radius:16px;background:rgba(8,8,10,.78);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.12);white-space:nowrap}
html[data-look=cosmos] #page-calendar .sp-lg{display:inline-flex;align-items:center;gap:4px}
html[data-look=cosmos] #page-calendar .sp-lg i{font-style:normal}
html[data-look=cosmos] #page-calendar .sp-lg.meeting{opacity:.8}html[data-look=cosmos] #page-calendar .sp-lg.followup{opacity:.65}html[data-look=cosmos] #page-calendar .sp-lg.internal{opacity:.5}
html[data-look=cosmos] #page-calendar .sp-flex{flex:1}
html[data-look=cosmos] #page-calendar .sp-sel{position:relative;display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 17px;border-radius:14px;box-sizing:border-box;font-size:13.5px}
html[data-look=cosmos] #page-calendar .sp-sel select{appearance:none;-webkit-appearance:none;background:transparent!important;border:0!important;box-shadow:none!important;color:inherit!important;height:38px;padding:0 0 0 16px!important;font:inherit;font-size:13.5px;cursor:pointer;min-width:0;width:auto;border-radius:0!important;background-image:none!important}
html[data-look=cosmos] #page-calendar .sp-sel::after{content:'▾';pointer-events:none;margin-inline-start:-14px}
html[data-look=cosmos] #page-calendar .sp-sel select option{color:#000}
html[data-look=cosmos] #page-calendar .sp-calgrid{flex:1;min-height:0;display:grid;grid-template-columns:400px minmax(0,1fr);gap:18px}
html[data-look=cosmos] #page-calendar .sp-calgrid>.wcard{margin:0;min-height:0;border-radius:22px!important}
/* today */
html[data-look=cosmos] #page-calendar .sp-day{padding:20px 22px;display:flex;flex-direction:column;align-items:center;gap:6px;overflow:hidden;color:var(--sp-t)}
html[data-look=cosmos] #page-calendar .sp-dt{align-self:stretch;display:flex;align-items:baseline}
html[data-look=cosmos] #page-calendar .sp-dt h3{margin:0;font-size:16px;font-weight:600;flex:1;color:var(--sp-t)}
html[data-look=cosmos] #page-calendar .sp-dt span{font-size:13.5px;color:var(--sp-s);direction:ltr}
html[data-look=cosmos] #page-calendar .sp-clock{position:relative;width:min(340px,100%);aspect-ratio:1;flex:0 1 auto;min-height:0;max-height:340px}
html[data-look=cosmos] #page-calendar .sp-clock svg{width:100%;height:100%;display:block}
html[data-look=cosmos] #page-calendar .sp-trk{stroke:var(--sp-trk)}html[data-look=cosmos] #page-calendar .sp-prg{stroke:var(--sp-f3)}
html[data-look=cosmos] #page-calendar .sp-tck{stroke:var(--sp-m);stroke-width:1.4;stroke-linecap:round}
html[data-look=cosmos] #page-calendar .sp-hl{fill:var(--sp-m);font-family:Inter,sans-serif;font-size:13px}
html[data-look=cosmos] #page-calendar .sp-evd{fill:var(--sp-m)}html[data-look=cosmos] #page-calendar .sp-nx,html[data-look=cosmos] #page-calendar .sp-hub{fill:var(--sp-t)}html[data-look=cosmos] #page-calendar .sp-hand{stroke:var(--sp-t)}
html[data-look=cosmos] #page-calendar .sp-ct{position:absolute;left:0;right:0;top:57.6%;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
html[data-look=cosmos] #page-calendar .sp-ct b{font-family:Inter,sans-serif;font-size:34px;font-weight:200;color:var(--sp-t);line-height:1.2}
html[data-look=cosmos] #page-calendar .sp-ct span{font-size:13.5px;color:var(--sp-s)}
html[data-look=cosmos] #page-calendar .sp-dl{align-self:stretch;display:flex;flex-direction:column;overflow:auto;min-height:0;flex:0 1 auto}
html[data-look=cosmos] #page-calendar .sp-dr{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--sp-line)}
html[data-look=cosmos] #page-calendar .sp-dr.past{opacity:.6}
html[data-look=cosmos] #page-calendar .sp-dr .t{font-family:Inter,sans-serif;font-size:15px;font-weight:500;width:46px;color:var(--sp-t)}
html[data-look=cosmos] #page-calendar .sp-dx{flex:1;display:flex;flex-direction:column;gap:1px;background:none;border:0;padding:0;text-align:right;color:var(--sp-t);font:inherit;cursor:pointer;min-width:0}
html[data-look=cosmos] #page-calendar .sp-dx b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-look=cosmos] #page-calendar .sp-dx small{font-size:13.5px;color:var(--sp-s)}
html[data-look=cosmos] #page-calendar .sp-st{font-size:13px;color:var(--sp-s)}
html[data-look=cosmos] #page-calendar .sp-cb{height:38px;padding:0 16px;border-radius:19px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px;font-family:inherit}
html[data-look=cosmos] #page-calendar .sp-fl{flex:1}
html[data-look=cosmos] #page-calendar .sp-tip{align-self:stretch;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:16px;background:linear-gradient(180deg,var(--sp-tip1),var(--sp-tip2));border:1px solid var(--sp-line);flex:none}
html[data-look=cosmos] #page-calendar .sp-tip::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--sp-t),transparent);opacity:.6}
html[data-look=cosmos] #page-calendar .sp-tip .h{display:flex;align-items:center;gap:10px}
html[data-look=cosmos] #page-calendar .sp-tip .sun{width:24px;height:24px}
html[data-look=cosmos] #page-calendar .sp-tip b{font-size:13.5px;font-weight:700;flex:1;color:var(--sp-t)}
html[data-look=cosmos] #page-calendar .sp-tip>span{font-size:14px;line-height:1.5;color:var(--sp-t)}
/* the week */
html[data-look=cosmos] #page-calendar .sp-wk{padding:18px 20px;display:flex;flex-direction:column;overflow:hidden}
html[data-look=cosmos] #page-calendar .week{display:grid;grid-template-columns:54px repeat(7,minmax(0,1fr));column-gap:0;flex:1;min-height:0;overflow:auto;background:none!important;min-width:0}
html[data-look=cosmos] #page-calendar .week .dh{position:sticky;top:0;z-index:2;background:transparent!important;border:0!important;box-shadow:none!important;padding:0 0 8px!important;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--sp-s)!important;font-size:13.5px;font-weight:500}
html[data-look=cosmos] #page-calendar .week .dh b{display:flex!important;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-size:20px;font-weight:300;color:var(--sp-s)!important;width:34px;height:34px;margin:0!important;background:none!important;box-shadow:none!important;border-radius:50%}
html[data-look=cosmos] #page-calendar .week .dh.istoday{color:var(--sp-t)!important;font-weight:600}
html[data-look=cosmos] #page-calendar .week .dh.istoday b{background:var(--sp-btn)!important;color:var(--sp-btnT)!important;font-weight:500}
html[data-look=cosmos] #page-calendar .week .dh.istoday b::before,html[data-look=cosmos] #page-calendar .week .dh.istoday b::after{display:none!important}
html[data-look=cosmos] #page-calendar .week .hcol{padding-left:8px}
html[data-look=cosmos] #page-calendar .week .hcol .hl2{height:calc(var(--sl,21px)*2);font-family:Inter,sans-serif;font-size:13px;color:var(--sp-m)!important;text-align:right;border:0!important;transform:translateY(-7px);box-sizing:border-box}
html[data-look=cosmos] #page-calendar .week .dcol{position:relative;border-right:1px solid var(--sp-line)!important;border-left:0!important;background:none!important}
html[data-look=cosmos] #page-calendar .week .dcol.istoday{background:var(--sp-f1)!important}
html[data-look=cosmos] #page-calendar .week .slot{height:var(--sl,21px);box-sizing:border-box;border-top:0!important;background:none}
html[data-look=cosmos] #page-calendar .week .slot:nth-child(2n+1){border-top:1px solid var(--sp-line)!important}
html[data-look=cosmos] #page-calendar .week .slot:hover{background:var(--sp-f1)}
html[data-look=cosmos] #page-calendar .week .ev{position:absolute;inset-inline:3px;border-radius:10px!important;padding:4px 8px!important;box-sizing:border-box;overflow:hidden;background:var(--sp-f2)!important;color:var(--sp-s)!important;border:1px solid var(--sp-line)!important;border-inline-start:1px solid var(--sp-line)!important;display:flex;flex-direction:column;justify-content:flex-start!important;align-items:stretch!important;text-align:right;line-height:1.35;font-family:inherit;box-shadow:none!important;z-index:1;min-height:28px}
html[data-look=cosmos] #page-calendar .week .ev>*{display:block;flex:none}
html[data-look=cosmos] #page-calendar .week .ev b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-look=cosmos] #page-calendar .week .ev small{font-size:13px;opacity:.8;white-space:nowrap}
html[data-look=cosmos] #page-calendar .week .ev.sp-next{background:var(--sp-btn)!important;color:var(--sp-btnT)!important;border:0!important}
html[data-look=cosmos] #page-calendar .week .ev.meeting:not(.sp-next){opacity:.92}html[data-look=cosmos] #page-calendar .week .ev.internal:not(.sp-next){opacity:.8}
html[data-look=cosmos] #page-calendar .week .now{position:absolute;right:0;left:0;height:2px;background:var(--sp-livec)!important;box-shadow:none!important;z-index:2;pointer-events:none}
html[data-look=cosmos] #page-calendar .week .now::after{content:"";position:absolute;right:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--sp-livec)}
@media (max-width:1280px){html[data-look=cosmos] #page-calendar .sp-calgrid{grid-template-columns:340px minmax(0,1fr)}html[data-look=cosmos] #page-calendar .sp-calbar{gap:10px}html[data-look=cosmos] #page-calendar .sp-calbar .ab{padding:0 13px}}
@media (max-width:900px){html[data-look=cosmos] #page-calendar .sp-calgrid{grid-template-columns:1fr}html[data-look=cosmos] #page-calendar .sp-day{display:none}html[data-look=cosmos] #page-calendar .sp-calbar{flex-wrap:wrap}}

/* ================= the header, like the canvas: mark | screen + name | five numbers and "more" … pills, then four round orbs ================= */
@media (min-width:1101px){html[data-look=cosmos] #app main>header{position:fixed!important;top:14px!important;left:18px!important;right:114px!important;transform:none!important;max-width:none!important;margin:0!important;flex-wrap:nowrap!important;height:64px!important;min-height:64px!important}
 html[data-look=cosmos] #app main{padding:96px 114px 18px 18px!important}}
html[data-look=cosmos] #app main>header{box-sizing:border-box;border-radius:22px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 14px!important;background:rgba(10,10,12,.74)!important;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;color:#F5F5F7}
html[data-look=cosmos][data-light] #app main>header{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important;color:#0B0B0C}
html[data-look=cosmos] #app main>header>div:first-child{display:flex!important;align-items:center!important;gap:8px!important;flex:none}
html[data-look=cosmos] #app main>header .cx-brand{display:flex;align-items:center;gap:10px;padding-left:8px;border-left:1px solid var(--sp-line);height:30px;margin:0}
html[data-look=cosmos] #app main>header .cx-brand svg{width:26px;height:26px}
html[data-look=cosmos] #app main>header .cx-brand span{font-family:Inter,sans-serif!important;font-size:18px!important;font-weight:600!important;letter-spacing:-.3px;color:var(--sp-t)!important}
html[data-look=cosmos] #app main>header .cx-brand .cx-c{font-style:normal}   /* Gal 10.11: the c of call is green here too */
html[data-look=cosmos][data-light] #app main>header .cx-brand svg path{stroke:#0B0B0C}
html[data-look=cosmos] #app main>header .h1{order:2;font-size:16px!important;font-weight:600!important;white-space:nowrap;color:var(--sp-t)!important;margin:0!important}
html[data-look=cosmos] #app main>header .over{order:3;font-size:13px!important;color:var(--sp-s)!important;white-space:nowrap;margin:0!important;max-width:160px;overflow:hidden;text-overflow:ellipsis;align-self:center;padding-top:2px}
html[data-look=cosmos] #app main>header>div:first-child::after{content:"";order:4;width:1px;height:30px;background:var(--sp-line);margin-right:0}
/* the numbers */
html[data-look=cosmos] #app main>header .hkpis{display:flex!important;align-items:center!important;gap:0!important;flex:none!important;position:relative;min-width:0;background:none!important;box-shadow:none!important;padding:0!important}
html[data-look=cosmos] #app main>header .hkpis .hk:not(.myorbit){display:flex!important;flex-direction:column;align-items:center;gap:2px;padding:0 7px!important;margin:0!important;background:none!important;box-shadow:none!important;border:0!important;border-right:1px solid var(--sp-line)!important;border-radius:0!important;min-width:0!important;height:auto!important;width:auto!important}
html[data-look=cosmos] #app main>header #hudTiles .hk:first-child{border-right:0!important}
html[data-look=cosmos] #app main>header .hkpis .hk::before,html[data-look=cosmos] #app main>header .hkpis .hk::after,html[data-look=cosmos] #app main>header .hkpis .hk .ob-g{display:none!important}
html[data-look=cosmos] #app main>header .hkpis .hk span{font-size:13px!important;color:var(--sp-s)!important;white-space:nowrap;line-height:1.3;font-weight:400!important}
html[data-look=cosmos] #app main>header .hkpis .hk b{font-family:Inter,'IBM Plex Sans Hebrew',sans-serif!important;font-size:19px!important;font-weight:500!important;line-height:1!important;color:var(--sp-t)!important;letter-spacing:0!important}
html[data-look=cosmos] #app main>header #obMore{display:inline-flex!important;flex-direction:row!important;align-items:center;gap:4px;height:34px!important;padding:0 10px!important;border-radius:12px!important;font-size:13px;margin-right:6px!important;white-space:nowrap;border:1px solid rgba(255,255,255,.15)!important;border-right:1px solid rgba(255,255,255,.15)!important;background:var(--sp-gbtn)!important;box-shadow:var(--sp-gbtn-sh)!important;color:#F5F5F7!important;cursor:pointer}
html[data-look=cosmos] #app main>header #obMore span,html[data-look=cosmos] #app main>header #obMore b{font-size:13px!important;font-family:inherit!important;font-weight:500!important;color:inherit!important;line-height:1!important}
html[data-look=cosmos][data-light] #app main>header #obMore{background:linear-gradient(180deg,#FFFFFF,#ECECF0)!important;color:#1D1D1F!important;border:1px solid rgba(0,0,0,.08)!important;box-shadow:inset 0 1px 0 #FFFFFF,0 1px 3px rgba(0,0,0,.1)!important}
html[data-look=cosmos][data-ob-kopen] #app main>header #hudTiles .hk:nth-child(n+6){display:flex!important;position:absolute;top:calc(100% + 14px);z-index:70;width:112px;padding:8px 10px!important;border-radius:16px!important;background:var(--cx-win-solid)!important;border:1px solid var(--sp-line)!important}
html[data-look=cosmos][data-ob-kopen] #app main>header #hudTiles .hk:nth-child(5){position:static;left:auto;width:auto;padding:0 7px!important;background:none!important;border-radius:0!important;border:0!important;border-right:1px solid var(--sp-line)!important}
html[data-look=cosmos][data-ob-kopen] #app main>header #hudTiles .hk:nth-child(6){left:0}html[data-look=cosmos][data-ob-kopen] #app main>header #hudTiles .hk:nth-child(7){left:118px}html[data-look=cosmos][data-ob-kopen] #app main>header #hudTiles .hk:nth-child(8){left:236px}html[data-look=cosmos][data-ob-kopen] #app main>header #hudTiles .hk:nth-child(9){left:354px}
html[data-look=cosmos][data-light][data-ob-kopen] #app main>header #hudTiles .hk:nth-child(n+6){background:linear-gradient(165deg,#FAFAFC,#E8E9EE)!important}
/* the pills and the orbs: trial · team table · available · level · inbox · light · help · EN */
html[data-look=cosmos] #app main>header .hl{display:flex!important;align-items:center!important;gap:8px!important;margin-right:auto!important;flex:none}
html[data-look=cosmos] #app main>header .hl>.cx-me{display:none!important}
html[data-look=cosmos] #app main>header .hl>#board{order:1}html[data-look=cosmos] #app main>header .hl>#presence{order:2}html[data-look=cosmos] #app main>header .hl>#meName{order:3}html[data-look=cosmos] #app main>header .hl>#lineState{order:4}
html[data-look=cosmos] #app main>header .hl>#jrBtn{order:5}html[data-look=cosmos] #app main>header .hl>#inboxBtn{order:6}html[data-look=cosmos] #app main>header .hl>#lookBtn{order:7}html[data-look=cosmos] #app main>header .hl>#helpBtn{order:8}html[data-look=cosmos] #app main>header .hl>#langBtn{order:9}html[data-look=cosmos] #app main>header .hl>#clock{order:10}
html[data-look=cosmos] #app main>header .hl>.pill:not(#inboxBtn):not(#lookBtn):not(#helpBtn):not(#langBtn){display:inline-flex;align-items:center;gap:7px;height:36px!important;border-radius:18px!important;font-size:13.5px!important;padding:0 12px!important;font-weight:500!important;background:var(--sp-gbtn)!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important;color:#F5F5F7!important;white-space:nowrap;min-width:0!important}
html[data-look=cosmos] #app main>header .hl>#jrBtn{padding:0 10px 0 4px!important}
html[data-look=cosmos] #app main>header .hl>:is(#inboxBtn,#lookBtn,#helpBtn,#langBtn){position:relative;display:inline-flex!important;align-items:center;justify-content:center;width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;border-radius:50%!important;border:0!important;color:#F5F5F7!important;font-family:Inter,sans-serif;font-size:13px!important;font-weight:700!important;background:radial-gradient(circle at 34% 26%,#7C7C82 0%,#3A3A3D 38%,#141416 78%,#050506 100%)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -6px 12px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.45)!important}
html[data-look=cosmos] #app main>header .hl>:is(#inboxBtn,#lookBtn,#helpBtn,#langBtn)::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.55);border-left-color:rgba(255,255,255,.25);transform:rotate(-20deg);pointer-events:none;background:none!important}
html[data-look=cosmos][data-light] #app main>header .hl>.pill:not(#inboxBtn):not(#lookBtn):not(#helpBtn):not(#langBtn){background:linear-gradient(180deg,#FFFFFF,#ECECF0)!important;color:#1D1D1F!important;border:1px solid rgba(0,0,0,.08)!important;box-shadow:inset 0 1px 0 #FFFFFF,0 1px 3px rgba(0,0,0,.1)!important}
html[data-look=cosmos][data-light] #app main>header .hl>:is(#inboxBtn,#lookBtn,#helpBtn,#langBtn){color:#1D1D1F!important;background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important;box-shadow:inset 0 1px 1px #FFFFFF,inset 0 -6px 12px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.18)!important}
html[data-look=cosmos][data-light] #app main>header .hl>:is(#inboxBtn,#lookBtn,#helpBtn,#langBtn)::after{border-color:rgba(0,0,0,.08);border-top-color:rgba(0,0,0,.35);border-left-color:rgba(0,0,0,.18)}
html[data-look=cosmos] #app main>header #inboxN:not(:empty){position:absolute;top:-5px;left:-5px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font-family:Inter,sans-serif;font-size:12px;font-weight:700;color:#fff!important;background:radial-gradient(circle at 35% 28%,#FFD08A 0%,#FF9F0A 45%,#C25400 100%)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(255,159,10,.4)!important;z-index:2}
html[data-look=cosmos] #app main>header .presence::first-letter{color:var(--sp-live)}
@media (max-width:1400px){html[data-look=cosmos] #app main>header .over{display:none!important}}
html[data-look=cosmos] #app main>header .cx-brand .cx-c{color:#20D99E!important;-webkit-text-fill-color:#20D99E!important;background:none!important;text-shadow:none!important;filter:none!important}
html[data-look=cosmos][data-light] #app main>header .cx-brand .cx-c{color:#12966c!important;-webkit-text-fill-color:#12966c!important}
html[data-look=cosmos] #app main>header #board::before,html[data-look=cosmos] #app main>header #board::after{display:none!important}
html[data-look=cosmos] #app main>header #board .oi{width:15px;height:15px;box-shadow:none!important;margin:0!important}
html[data-look=cosmos] #app main>header #presence{color:#F5F5F7!important}
html[data-look=cosmos][data-light] #app main>header #presence{color:#1D1D1F!important}
html[data-look=cosmos] #app main>header #presence .sp-pd{font-size:0;width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
html[data-look=cosmos] #app main>header #jrBtn{position:relative;padding:0 4px 0 10px!important}
html[data-look=cosmos] #app main>header #jrBtn svg{width:26px!important;height:26px!important;flex:none}
html[data-look=cosmos][data-light] #app main>header #jrBtn svg circle:first-child{stroke:rgba(0,0,0,.14)}
html[data-look=cosmos] #app main>header #jrBtn b{position:absolute;right:4px;top:50%;width:26px;transform:translateY(-50%);text-align:center;font-family:Inter,sans-serif;font-size:13px;font-weight:700;color:inherit!important;line-height:1}
html[data-look=cosmos] #app main>header #jrBtn .jr-t{font-size:13.5px;color:inherit!important}

/* the rail icons and header icons drawn from the canvas paths */
html[data-look=cosmos] nav .nv[data-nav=biz] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%203v18h18M7%2015l4-4%203%203%205-6'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv[data-nav=home] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2012%203l9%207.5V20a1%201%200%200%201-1%201h-5v-6h-6v6H4a1%201%200%200%201-1-1z'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv[data-nav=dial] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv[data-nav=leads] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv[data-nav=calendar] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%202v4M16%202v4M3%2010h18M5%204h14a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V6a2%202%200%200%201%202-2'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv[data-nav=ai] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203l1.9%205.1L19%2010l-5.1%201.9L12%2017l-1.9-5.1L5%2010l5.1-1.9zM19%2017l.8%202.2L22%2020l-2.2.8L19%2023l-.8-2.2L16%2020l2.2-.8z'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv[data-nav=team] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2022a10%2010%200%201%200%200-20%2010%2010%200%200%200%200%2020M12%2018a6%206%200%201%200%200-12%206%206%200%200%200%200%2012M12%2014a2%202%200%201%200%200-4%202%202%200%200%200%200%204'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv[data-nav=settings] .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2021v-7M4%2010V3M12%2021v-9M12%208V3M20%2021v-5M20%2012V3M1%2014h6M9%208h6M17%2016h6'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] nav .nv#logout .oi{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4M10%2017l-5-5%205-5M5%2012h12'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] #app main>header .oi[data-i=trophy]{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%2021h8M12%2017v4M7%204h10v5a5%205%200%200%201-10%200zM17%205h3v2a3%203%200%200%201-3%203M7%205H4v2a3%203%200%200%200%203%203'/%3E%3C/svg%3E")!important}
html[data-look=cosmos] #app main>header .oi[data-i=inbox]{--oi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M22%2012h-6l-2%203h-4l-2-3H2M5.45%205.11%202%2012v6a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2v-6l-3.45-6.89A2%202%200%200%200%2016.76%204H7.24a2%202%200%200%200-1.79%201.11'/%3E%3C/svg%3E")!important}

/* ================= the rail, like the canvas: a full-height glass column, 42px orbs, 13px names ================= */
@media (min-width:1101px){
 html[data-look=cosmos] #app>nav{position:fixed!important;top:14px!important;bottom:14px!important;right:14px!important;left:auto!important;transform:none!important;width:82px!important;height:auto!important;box-sizing:border-box;padding:min(18px,2vh) 0 min(16px,1.8vh)!important;gap:clamp(6px,calc(4.55vh - 26.9px),14px)!important;border-radius:30px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;overflow:visible!important;
  background:rgba(10,10,12,.74)!important;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important}
 html[data-look=cosmos][data-light] #app>nav{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
 html[data-look=cosmos] #app>nav>.nv{display:flex!important;flex-direction:column!important;align-items:center!important;gap:5px!important;font-size:13px!important;font-weight:500!important;line-height:1.2!important;width:auto!important;min-width:0!important;height:auto!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;color:var(--sp-t)!important}
 html[data-look=cosmos] #app>nav>.nv.on{font-weight:700!important}
 html[data-look=cosmos] #app>nav>.nv .i{width:clamp(30px,calc(6.8vh - 19.2px),42px)!important;height:clamp(30px,calc(6.8vh - 19.2px),42px)!important;margin:0!important}
 html[data-look=cosmos] #app>nav>.nv.on .i{width:clamp(32px,calc(6.8vh - 17.2px),44px)!important;height:clamp(32px,calc(6.8vh - 17.2px),44px)!important}
 html[data-look=cosmos] #app>nav>.sp{display:block!important;flex:1!important;min-height:0}
 html[data-look=cosmos] #app>nav>#saOrb{width:clamp(30px,calc(6.8vh - 19.2px),42px)!important;height:clamp(30px,calc(6.8vh - 19.2px),42px)!important;min-width:0!important;min-height:0!important;aspect-ratio:1;flex:none!important;margin:0 0 clamp(16px,calc(4.55vh - 19px),22px)!important}
 html[data-look=cosmos] #app>nav>#logout .i{width:clamp(28px,calc(4.55vh - 5px),36px)!important;height:clamp(28px,calc(4.55vh - 5px),36px)!important}
 html[data-look=cosmos] #app>nav>#meAv{gap:4px!important;font-weight:600!important}
 html[data-look=cosmos] #app>nav>#meAv .i{width:clamp(30px,calc(4.55vh - 1px),40px)!important;height:clamp(30px,calc(4.55vh - 1px),40px)!important;border-radius:50%;box-shadow:0 0 0 2px #000,0 0 0 3.5px var(--sp-live)!important;background:none!important}
 html[data-look=cosmos][data-light] #app>nav>#meAv .i{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #1F9D46!important}
}
html[data-look=cosmos] #app>nav .meav em.rolechip,html[data-look=cosmos] #app>nav .meav .rolechip{font-size:13px!important;font-weight:500!important;padding:1px 7px!important;border-radius:8px!important;background:var(--sp-f2)!important;color:var(--sp-s)!important;border:0!important;box-shadow:none!important;font-style:normal}
html[data-look=cosmos] #app main>header #board .oi{position:static!important;display:inline-block!important;flex:none!important;transform:none!important}

/* ================= dialer v2, measured from the canvas "חייגן" / "חייגן · בשיחה" (1600×900):
   queue 330 | the call 1fr | the customer 370, gap 20. In the middle: one top line, the dial, the voice strip, the dome dock on the bottom edge ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-dial{grid-template-columns:330px minmax(0,1fr) var(--sp-custw,370px)!important;gap:20px!important;align-items:stretch}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c{--d:clamp(290px,calc(100vh - 480px),420px);position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;padding:0!important;min-height:0;overflow:visible}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.dialer{display:contents!important;--d:clamp(290px,calc(100vh - 480px),420px)!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .sp-dial{order:1;width:var(--d)!important;height:var(--d)!important;margin:var(--dt,34px) auto 0!important;flex:none}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .sp-dial svg{width:100%!important;height:100%!important}
 /* inside the dial: state, the timer, the name; the number under them */
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .lineinfo{position:absolute!important;top:calc(var(--dt,34px) + var(--d)/2 - 72px)!important;left:50%!important;transform:translateX(-50%)!important;width:228px!important;margin:0!important;z-index:3}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .lineinfo .dur{font-family:Inter,sans-serif!important;font-size:calc(var(--d)*.1333)!important;font-weight:200!important;letter-spacing:-2px!important;line-height:1!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .lineinfo .person{font-size:18px!important;font-weight:600!important;margin-top:4px}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .lineinfo .phase{font-size:13.5px!important;font-weight:600!important;color:#C7C7CC!important;display:inline-flex;align-items:center;gap:7px}
 /* the top line: "interested · calling from … · callback at …" */
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .lineinfo .sb{position:absolute!important;top:calc(-1 * (var(--dt,34px) + var(--d)/2 - 72px))!important;left:50%!important;transform:translateX(-50%)!important;height:auto;max-width:min(560px,calc(100vw - 900px));width:max-content;font-size:14px!important;color:#C7C7CC!important;background:none!important;padding:0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px}
 html[data-look=cosmos] body[data-st=call] #app #page-dial .col.c .lineinfo .sb{top:calc(-1 * (var(--dt,34px) + var(--d)/2 - 72px) - 4px)!important;padding:8px 14px!important;border-radius:16px!important;background:rgba(8,8,10,.78)!important;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .numrow{position:absolute!important;top:calc(var(--dt,34px) + var(--d)/2 + 48px)!important;left:50%!important;transform:translateX(-50%)!important;width:228px!important;z-index:3}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .numrow .big .numin{font:400 14px/1.3 Inter,sans-serif!important;letter-spacing:.3px!important;color:#C7C7CC!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .numrow #bFloat{display:none!important}
 html[data-look=cosmos] body[data-st=call] #app #page-dial .col.c .numrow #bFloat:not(:disabled){display:inline-flex!important;position:fixed!important;top:auto!important;left:auto!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .pad{position:absolute!important;top:calc(var(--dt,34px) + var(--d)/2)!important;left:50%!important;transform:translate(-50%,-50%)!important;z-index:6}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .savebar,html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .xferbar{order:2;margin-top:10px}
 /* the voice strip */
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.nova{order:3;margin:auto 0 0!important;width:min(576px,100%)!important;box-sizing:border-box;padding:8px 18px 10px!important;border-radius:16px!important;background:rgba(8,8,10,.78)!important;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;min-height:0!important;height:auto!important;flex:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.nova>:not(.sp-wave):not(.heat){display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.nova>.heat{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.nova::before,html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.nova::after,html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.nova>.ob-tag{display:none!important}
 /* the dome dock: AI · update without a call · CALL · keypad · more (in a call: mute · hold · HANG UP · transfer · more) */
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .dialrow{order:4;position:relative!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;gap:4px!important;width:500px!important;max-width:100%;height:132px!important;box-sizing:border-box!important;padding:0 18px 12px!important;margin:14px 0 -18px!important;border-radius:250px 250px 30px 30px/120px 120px 30px 30px!important;background:rgba(10,10,12,.74)!important;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;flex:none!important;overflow:visible!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow::before,html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow::after{display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow>.cb,html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow>.nocallbtn{width:50px!important;min-width:50px!important;height:50px!important;margin:0 14px 31px!important;flex:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow>.cb>span,html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow>.nocallbtn::after{top:calc(100% + 9px)!important;font-size:13px!important;font-weight:500!important;color:#F5F5F7!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow>.callnow{width:76px!important;height:76px!important;min-width:76px!important;margin:-26px 10px 70px!important;flex:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .dialrow>.callnow::after{top:calc(100% + 8px)!important;font-size:14px!important;font-weight:700!important;color:#F5F5F7!important}
 html[data-look=cosmos] body:not([data-st=call]):not([data-st=wrap]) #app #page-dial .dialrow>#bNoCall,html[data-look=cosmos] body:not([data-st=call]):not([data-st=wrap]) #app #page-dial .dialrow>#bPad{margin-bottom:53px!important}
 html[data-look=cosmos] body[data-st=call] #app #page-dial .dialrow>#bHold,html[data-look=cosmos] body[data-st=call] #app #page-dial .dialrow>#bTransfer{margin-bottom:53px!important}
}
/* the voice strip, drawn */
html[data-look=cosmos] .sp-wave{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
html[data-look=cosmos] .sp-wave svg{width:100%;height:28px;display:block}
html[data-look=cosmos] .sp-wave .sp-wd{fill:#48484A}
html[data-look=cosmos] .sp-wave .sp-wb{fill:#F5F5F7;opacity:0;transform-box:fill-box;transform-origin:center}
html[data-look=cosmos] body[data-st=call] .sp-wave .sp-wd{opacity:.9}
html[data-look=cosmos] body[data-st=call] #sanWave.on~.sp-wave .sp-wb,html[data-look=cosmos] body[data-st=call] .card.nova:has(#sanWave.on) .sp-wave .sp-wb{opacity:1}
html[data-look=cosmos] body[data-st=call] .card.nova:has(#sanWave.on) .sp-wave .sp-wb:nth-child(4n+3){opacity:.55}
@media (prefers-reduced-motion:no-preference){html[data-look=cosmos] body[data-st=call] .card.nova:has(#sanWave.on) .sp-wave .sp-wb{animation:spWv 1.1s ease-in-out infinite;animation-delay:calc(var(--i) * -37ms)}}
@keyframes spWv{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
html[data-look=cosmos] .sp-wcap{font-size:13.5px;color:#C7C7CC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .lineinfo .sb{clip:auto!important;clip-path:none!important;height:auto!important;width:max-content!important;overflow:hidden!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .dialrow{margin-top:56px!important}
}
/* the customer card's contact orbs: 54px white balls with the real logos, like the canvas */
html[data-look=cosmos] #app #cust .custacts{display:flex!important;gap:4px!important;padding:4px 0 2px!important;justify-content:space-between}
html[data-look=cosmos] #app #cust .cact{flex:1 1 0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important;background:none!important;border:0!important;box-shadow:none!important;padding:6px 0 0!important;font-size:13px!important;font-weight:500!important;color:var(--sp-t)!important;min-width:0}
html[data-look=cosmos] #app #cust .cact svg{width:54px!important;height:54px!important;padding:16px!important;box-sizing:border-box;border-radius:50%!important;flex:none}
html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail) svg{background-size:59%,100%!important;background-position:center!important;background-repeat:no-repeat!important;padding:0!important}
html[data-look=cosmos] #app #cust .cact span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* the dock, final word (doubled ids so the older layers cannot win) */
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .dialrow{height:132px!important;min-height:132px!important;margin:58px 0 -40px!important;padding:0 18px 12px!important;gap:4px!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .dialrow>:is(.cb,.nocallbtn){width:50px!important;min-width:50px!important;height:50px!important;margin:0 14px 25px!important;transform:none!important}
 html[data-look=cosmos] body:not([data-st=call]):not([data-st=wrap]) #app#app #page-dial#page-dial .dialrow>:is(#bNoCall,#bPad),html[data-look=cosmos] body[data-st=call] #app#app #page-dial#page-dial .dialrow>:is(#bHold,#bTransfer){margin-bottom:47px!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .dialrow>.callnow{width:76px!important;min-width:76px!important;height:76px!important;margin:0 10px 65px!important;transform:none!important}
}
html[data-look=cosmos] #app #page-dial .dialrow>.cb::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(255,255,255,.10);border-top-color:rgba(255,255,255,.55);border-left-color:rgba(255,255,255,.25);transform:rotate(-20deg);pointer-events:none;background:none!important;display:block!important;opacity:1!important;width:auto!important;height:auto!important}
html[data-look=cosmos][data-light] #app #page-dial .dialrow>.cb::before{border-color:rgba(0,0,0,.08);border-top-color:rgba(0,0,0,.35);border-left-color:rgba(0,0,0,.18)}
@media (min-width:1101px){
 html[data-look=cosmos] body[data-st=call] #app#app #page-dial#page-dial .dialrow>#bAi{display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c .lineinfo:has(.cardguard) .sb{display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial .col.c .lineinfo .cardguard{position:absolute!important;top:calc(-1 * (var(--dt,34px) + var(--d)/2 - 72px) - 4px)!important;left:50%!important;transform:translateX(-50%)!important;width:max-content!important;max-width:520px;padding:8px 14px!important;border-radius:16px!important;background:rgba(8,8,10,.78)!important;border:1px solid rgba(255,255,255,.12)!important;color:#E5E5EA!important;font-size:14px!important;font-weight:400!important;box-shadow:none!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);white-space:nowrap}
 html[data-look=cosmos] body[data-st=call] #app#app #page-dial .col.c .numrow #bFloat:not(:disabled){position:absolute!important;top:calc(-1 * (var(--dt,34px) + var(--d)/2 + 48px) - 4px)!important;left:-190px!important;height:34px!important;padding:0 12px!important;border-radius:12px!important;font-size:13px!important;gap:5px;background:var(--sp-gbtn)!important;border:1px solid rgba(255,255,255,.15)!important;color:#F5F5F7!important;width:auto!important}
}

/* ================= after the call, like the canvas "חייגן · סיום שיחה": a top line, how it ended + the summary on the right, the actions on the left (520px) ================= */
@media (min-width:1101px){
 /* the top line */
 /* how it ended */
 /* the summary: the customer card, below how it ended */
 /* the actions from the call, on the left */
}

@media (min-width:1101px){
}

@media (min-width:1101px){
}
@media (min-width:1101px) and (max-width:1440px){html[data-look=cosmos] body #app #page-dial{grid-template-columns:300px minmax(0,1fr) var(--sp-custw,340px)!important}}

/* ================= home, like the canvas "בית": a date line on top, today 380 | the team orbit | what needs you 380, all full height ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-home .homewrap{display:grid!important;grid-template-columns:380px minmax(0,1fr) 380px!important;grid-template-rows:auto minmax(0,1fr)!important;gap:16px 18px!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0!important;box-sizing:border-box}
 html[data-look=cosmos] body #app #page-home .homewrap>section{grid-row:2!important;min-height:0!important;height:auto!important;max-height:none!important;align-self:stretch!important;margin:0!important}
 html[data-look=cosmos] body #app #page-home .homewrap>.today{grid-column:1!important}html[data-look=cosmos] body #app #page-home .homewrap>.ctl{grid-column:2!important}html[data-look=cosmos] body #app #page-home .homewrap>.needs{grid-column:3!important}
 html[data-look=cosmos] body #app #page-home .sp-htop{grid-column:1/-1!important;grid-row:1!important;display:flex;align-items:center;gap:16px;min-height:44px}
 html[data-look=cosmos] body #app #page-home .sp-hdate{flex:1;font-size:14px;color:#D1D1D6}
 html[data-look=cosmos] body #app #page-home .sp-htop .onb2{display:flex!important;align-items:center;gap:14px;height:44px;padding:0 8px 0 16px!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;margin:0!important;position:static!important;width:auto!important;color:#F5F5F7}
 html[data-look=cosmos] body #app #page-home .sp-htop .onb2>span{font-size:14px;font-weight:600}
 html[data-look=cosmos] body #app #page-home .sp-htop .onb2 .snbar{width:90px;height:4px;border-radius:2px;background:#2C2C2E;overflow:hidden}
 html[data-look=cosmos] body #app #page-home .sp-htop .onb2 .snbar i{display:block;height:4px;background:#F5F5F7}
 html[data-look=cosmos] body #app #page-home .sp-htop .onb2 .lnk{font-size:14px;color:#D1D1D6;background:none;border:0}
 /* panels */
 html[data-look=cosmos] body #app #page-home .homewrap>.wcard{padding:20px 22px!important;border-radius:22px!important;display:flex!important;flex-direction:column!important;gap:14px!important;overflow:hidden}
 html[data-look=cosmos] body #app #page-home .homewrap>.today .hch{margin-top:auto!important}
 /* the middle */
 html[data-look=cosmos] body #app #page-home .homewrap>.ctl{display:flex!important;flex-direction:column!important;align-items:center!important;gap:14px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible}
 html[data-look=cosmos] body #app #page-home .ctl>.orbit{flex:1 1 auto!important;min-height:0!important;width:100%!important}
 html[data-look=cosmos] body #app #page-home .ctl .sp-hkey{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 18px;border-radius:16px;background:rgba(8,8,10,.78);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);border:1px solid rgba(255,255,255,.12);flex:none}
 html[data-look=cosmos] body #app #page-home .ctl .sp-hkey .orb-key{display:flex!important;gap:16px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
 html[data-look=cosmos] body #app #page-home .ctl .sp-hkey .orb-key>span{display:flex!important;align-items:center;gap:6px;font-size:13.5px!important;color:#D1D1D6!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;height:auto!important}
 html[data-look=cosmos] body #app #page-home .ctl .sp-hkey .ctlside{display:flex!important;gap:22px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;justify-content:center}
 html[data-look=cosmos] body #app #page-home .ctl .sp-hkey .ctln{display:inline-flex!important;flex-direction:row-reverse!important;align-items:baseline;gap:6px;font-size:14px!important;color:#C7C7CC!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;height:auto!important}
 html[data-look=cosmos] body #app #page-home .ctl .sp-hkey .ctln .num{font-family:Inter,sans-serif!important;font-size:14px!important;font-weight:500!important;color:#F5F5F7!important;background:none!important;box-shadow:none!important;padding:0!important;width:auto!important;height:auto!important;min-width:0!important}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team{flex:none!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:18px!important;padding:10px 18px!important;border-radius:18px!important;width:auto!important;min-height:0!important;height:auto!important;font-size:13.5px;color:var(--sp-s)}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team>.ch{margin:0!important;padding:0!important;border:0!important}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team>.ch .t{font-size:13.5px!important;font-weight:600!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team>.ch .sb,html[data-look=cosmos] body #app #page-home .ctl>.wcard.team>.ks,html[data-look=cosmos] body #app #page-home .ctl>.wcard.team .flow3>em,html[data-look=cosmos] body #app #page-home .ctl>.wcard.team .flow3 .mb{display:none!important}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team .flow3{display:flex!important;gap:18px!important;padding:0!important;margin:0!important;background:none!important;border:0!important}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team .flow3>span{display:inline-flex!important;flex-direction:row-reverse!important;align-items:baseline;gap:5px;font-size:13.5px!important;color:var(--sp-s)!important;background:none!important;padding:0!important;border:0!important;box-shadow:none!important;min-width:0!important}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team .flow3 b{font-family:Inter,sans-serif!important;font-size:13.5px!important;font-weight:600!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-home .ctl>.wcard.team::before,html[data-look=cosmos] body #app #page-home .ctl>.wcard.team::after,html[data-look=cosmos] body #app #page-home .ctl>.wcard.team>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-home .ctl>.sp-hbtns{display:flex!important;gap:10px!important;flex:none;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
 html[data-look=cosmos] body #app #page-home .ctl>.sp-hbtns .ctlbtn{height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;display:inline-flex!important;align-items:center;gap:7px;background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important;font-weight:500!important}
 html[data-look=cosmos] body #app #page-home .ctl>.sp-hbtns .ctlbtn.p{background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important;font-weight:600!important}
}

/* ================= page tabs: a compact pill on the right of the top row, like the canvas ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app main>#subTabs:not([hidden]){justify-self:start!important;width:max-content!important;max-width:60%;height:44px!important;box-sizing:border-box;padding:4px!important;margin:0!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;display:flex!important;gap:2px!important}
 html[data-look=cosmos] body #app main>#subTabs .stb{height:34px!important;padding:0 16px!important;border-radius:17px!important;font-size:13.5px!important;font-weight:500!important;color:#FFFFFF!important;background:none!important;border:0!important;box-shadow:none!important}
 html[data-look=cosmos] body #app main>#subTabs .stb.on{background:var(--sp-pbtn)!important;color:#000000!important;font-weight:600!important;box-shadow:var(--sp-pbtn-sh)!important}
}
/* ================= leads, like the canvas "לידים": the actions on the left of the tabs row, one panel with the filters and the table ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-leads.on{position:relative!important;display:flex!important;flex-direction:column!important;min-height:0}
 html[data-look=cosmos] body #app #page-leads .sp-pacts{position:absolute;top:-56px;inset-inline-end:0;display:flex;align-items:center;gap:10px;z-index:5}
 html[data-look=cosmos] body #app #page-leads .sp-pacts .btn{height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;display:inline-flex!important;align-items:center;gap:7px;background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important;font-weight:500!important;margin:0!important;opacity:1}
 html[data-look=cosmos] body #app #page-leads .sp-pacts .btn:disabled{opacity:.6}
 html[data-look=cosmos] body #app #page-leads .sp-pacts #lNew{background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important;font-weight:600!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel{flex:1;min-height:0;margin:0!important;padding:20px 22px 14px!important;border-radius:22px!important;display:flex!important;flex-direction:column!important;gap:12px!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar{display:flex!important;align-items:center!important;gap:10px!important;flex-wrap:nowrap!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar #lQ{flex:0 1 260px!important;min-width:180px!important;max-width:280px!important;height:40px!important;border-radius:11px!important;background:var(--sp-f2)!important;border:0!important;box-shadow:none!important;color:var(--sp-t)!important;font-size:13.5px!important;padding:0 12px!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar select.f{height:36px!important;border-radius:18px!important;padding:0 14px 0 30px!important;font-size:13.5px!important;background-color:transparent!important;background-image:none!important;border:1px solid rgba(255,255,255,.15)!important;color:#F5F5F7!important;box-shadow:var(--sp-gbtn-sh)!important;width:auto!important;min-width:0!important;flex:none!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar #lOwner{background:var(--sp-pbtn)!important;color:#000!important;border:0!important;font-weight:600!important;box-shadow:var(--sp-pbtn-sh)!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar select.f option{color:#000}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar .chk{height:36px!important;padding:0 14px!important;border-radius:18px!important;font-size:13.5px!important;display:inline-flex!important;align-items:center;gap:7px;border:1px solid rgba(255,255,255,.15)!important;background:var(--sp-gbtn)!important;color:#F5F5F7!important;box-shadow:var(--sp-gbtn-sh)!important;flex:none}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar .chk:has(input:checked){background:var(--sp-pbtn)!important;color:#000!important;border:0!important}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel>.wbar .chk input{width:14px;height:14px;margin:0;accent-color:#F5F5F7}
 html[data-look=cosmos][data-light] body #app #page-leads .sp-lpanel>.wbar :is(select.f:not(#lOwner),.chk){background:linear-gradient(180deg,#FFFFFF,#ECECF0)!important;color:#1D1D1F!important;border:1px solid rgba(0,0,0,.08)!important}
 /* the table: a header line and rows split by thin lines (no cards) */
 html[data-look=cosmos] body #app #page-leads .sp-lpanel .wscroll{flex:1;min-height:0;overflow:auto}
 html[data-look=cosmos] body #app #page-leads .ltbl{border-collapse:collapse!important;border-spacing:0!important;width:100%}
 html[data-look=cosmos] body #app #page-leads .ltbl thead th{font-size:13px!important;font-weight:500!important;color:var(--sp-s)!important;padding:8px 10px!important;border-bottom:1px solid var(--sp-line)!important;background:none!important;text-align:right}
 html[data-look=cosmos] body #app #page-leads .ltbl tbody tr{background:none!important;box-shadow:none!important;border:0!important;border-bottom:1px solid var(--sp-line)!important;border-radius:0!important}
 html[data-look=cosmos] body #app #page-leads .ltbl tbody tr:hover{background:var(--sp-f1)!important}
 html[data-look=cosmos] body #app #page-leads .ltbl tbody td{background:none!important;box-shadow:none!important;border:0!important;padding:10px!important;border-radius:0!important;vertical-align:middle}
 html[data-look=cosmos] body #app #page-leads .ltbl tbody td:first-child,html[data-look=cosmos] body #app #page-leads .ltbl tbody td:last-child{border-radius:0!important}
 html[data-look=cosmos] body #app #page-leads .ltbl .lname b{font-size:15px!important;font-weight:600!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-leads .ltbl .sb{font-size:13px!important;color:var(--sp-s)!important}
 html[data-look=cosmos] body #app #page-leads .ltbl .hcell .hbar{display:none!important}
 html[data-look=cosmos] body #app #page-leads .ltbl .hcell .num{font-family:Inter,sans-serif!important;font-size:15px!important;font-weight:500!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-leads .ltbl .hcell:has(.ob-star.warm) .num,html[data-look=cosmos] body #app #page-leads .ltbl .hcell:has(.ob-star.hot) .num{color:var(--sp-hot)!important}
 html[data-look=cosmos] body #app #page-leads .ltbl .hcell .ob-star{display:none!important}
 html[data-look=cosmos] body #app #page-leads .ltbl .lsum{font-size:13.5px!important;color:var(--sp-t)!important;line-height:1.45}
 html[data-look=cosmos] body #app #page-leads .sp-lpanel .pager{justify-content:center!important;font-size:13.5px!important;color:var(--sp-s)!important;padding-top:6px}
}
@media (min-width:1101px){html[data-look=cosmos] body #app #page-leads{overflow:visible!important}}

/* ================= light mode, like the canvas ".lit": near-white panels over the same dark sky, dark text; white glass buttons inside, the main button dark ================= */
html[data-look=cosmos][data-light] body #app .page :is(.wcard,.card):not(.card.dialer):not(.card.nova):not(.card.actions):not(:is(.wcard,.card) :is(.wcard,.card)):not(.ktile):not(.rk){background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important;color:#0B0B0C;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-look=cosmos][data-light] body #app main>#subTabs:not([hidden]){background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
html[data-look=cosmos][data-light] body #app main>#subTabs .stb{color:#1D1D1F!important}
html[data-look=cosmos][data-light] body #app main>#subTabs .stb.on{background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#FFFFFF!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.25)!important}
html[data-look=cosmos][data-light] body #app #page-leads .sp-lpanel>.wbar #lOwner,html[data-look=cosmos][data-light] body #app #page-leads .sp-lpanel>.wbar .chk:has(input:checked){background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#FFFFFF!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.25)!important}
html[data-look=cosmos][data-light] body #app #page-leads .ltbl .ob-dots{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important;color:#1D1D1F!important;box-shadow:inset 0 1px 1px #FFFFFF,inset 0 -6px 12px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.18)!important}

/* after the call the number box stays usable (dial a new number right away): a small input in the top line, between the name and "finish and next" */
@media (min-width:1101px){
}

/* ================= team, like the canvas "צוות": numbers in one strip, the call monitor on the left, the team orbit on the right ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-team.on{position:relative!important;display:flex!important;flex-direction:column!important;gap:16px!important;overflow:visible!important;min-height:0}
 html[data-look=cosmos] body #app #page-team>.wbar{position:absolute!important;top:-56px;left:0;right:0;height:44px;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;z-index:5}
 html[data-look=cosmos] body #app #page-team>.wbar>*{pointer-events:auto}
 html[data-look=cosmos] body #app #page-team>.wbar>h2{display:none!important}
 html[data-look=cosmos] body #app #page-team>.wbar #tmLive{margin-right:var(--tabsw,230px);font-size:14px!important;color:#D1D1D6!important}
 html[data-look=cosmos] body #app #page-team>.wbar #tmNums{height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;display:inline-flex!important;align-items:center;gap:7px;background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important;font-weight:500!important;margin:0!important}
 /* the numbers strip */
 html[data-look=cosmos] body #app #page-team #tmK{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0!important;padding:16px 0!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.12)!important;flex:none;margin:0!important}
 html[data-look=cosmos][data-light] body #app #page-team #tmK{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
 html[data-look=cosmos] body #app #page-team #tmK .ktile{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 22px!important;margin:0!important;border-right:1px solid var(--sp-line)!important;display:flex!important;flex-direction:column!important;gap:6px!important;min-height:0!important}
 html[data-look=cosmos] body #app #page-team #tmK .ktile:first-child{border-right:0!important}
 html[data-look=cosmos] body #app #page-team #tmK .ktile::before,html[data-look=cosmos] body #app #page-team #tmK .ktile::after,html[data-look=cosmos] body #app #page-team #tmK .ktile .ob-g{display:none!important}
 html[data-look=cosmos] body #app #page-team #tmK .ktile span{font-size:13.5px!important;color:var(--sp-s)!important}
 html[data-look=cosmos] body #app #page-team #tmK .ktile b{font-family:Inter,sans-serif!important;font-size:30px!important;font-weight:200!important;color:var(--sp-t)!important;line-height:1.1!important;text-align:left}
 /* two columns: the orbit (right, open sky) and the monitor (left, 520) */
 html[data-look=cosmos] body #app #page-team .tgrid{flex:1;min-height:0;display:grid!important;grid-template-columns:minmax(0,1fr) 520px!important;gap:18px!important;margin:0!important}
 html[data-look=cosmos] body #app #page-team .tgrid>.wcard:first-child{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:10px!important;min-height:0;overflow:hidden}
 html[data-look=cosmos] body #app #page-team .tgrid>.wcard:first-child>.ch{display:none!important}
 html[data-look=cosmos] body #app #page-team .tgrid>.wcard:first-child>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-team .sp-torbit{position:relative;width:380px;height:380px;flex:none;color:#F5F5F7}
 html[data-look=cosmos] body #app #page-team .sp-torbit svg{position:absolute;inset:0}
 html[data-look=cosmos] body #app #page-team .sp-torbit .sp-tr{fill:none;stroke:rgba(255,255,255,.18);stroke-dasharray:2 6}
 html[data-look=cosmos] body #app #page-team .sp-torbit .sp-tr2{fill:none;stroke:rgba(255,255,255,.08)}
 html[data-look=cosmos] body #app #page-team .sp-thub{position:absolute;left:50%;top:50%;width:124px;height:124px;margin:-62px 0 0 -62px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:radial-gradient(circle at 45% 35%,#2A2A2E 0%,#0C0C0E 70%,#000 100%);box-shadow:inset -6px -8px 14px rgba(0,0,0,.8),inset 3px 3px 8px rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
 html[data-look=cosmos] body #app #page-team .sp-thub b{font-family:Inter,sans-serif;font-size:38px;font-weight:200;line-height:1}
 html[data-look=cosmos] body #app #page-team .sp-thub span{font-size:13.5px;color:#C7C7CC}
 html[data-look=cosmos] body #app #page-team .sp-tlab{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2;font-size:13px;color:#F2F2F7;background:rgba(0,0,0,.6);border-radius:8px;padding:2px 10px;white-space:nowrap}   /* a dark chip like "סוכני AI": bare grey text vanished on a light background, and the top rep's marble covered it (Gal 10.11) */
 html[data-look=cosmos] body #app #page-team .sp-tai{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:13px;color:#F2F2F7;background:rgba(0,0,0,.6);border-radius:8px;padding:2px 10px;white-space:nowrap}
 html[data-look=cosmos] body #app #page-team .sp-trep{position:absolute;transform:translate(-50%,-24px);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:2}
 html[data-look=cosmos] body #app #page-team .sp-trep .av{width:48px;height:48px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 34% 26%,#7C7C82 0%,#3A3A3D 38%,#141416 78%,#050506 100%);box-shadow:0 0 0 3px #000,0 0 0 5px var(--c);font-weight:600;font-size:16px;color:#F5F5F7}
 html[data-look=cosmos] body #app #page-team .sp-trep .av svg{width:100%;height:100%}
 html[data-look=cosmos] body #app #page-team .sp-trep .nm{font-size:13px;font-weight:600;white-space:nowrap;background:rgba(0,0,0,.65);color:#F5F5F7;padding:2px 8px;border-radius:8px}
 html[data-look=cosmos] body #app #page-team .sp-trep .ab{height:28px!important;padding:0 12px!important;border-radius:14px!important;font-size:13px!important}
 html[data-look=cosmos] body #app #page-team .sp-trep.st-offline .av{opacity:.7}
 html[data-look=cosmos] body #app #page-team .sp-tempty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:260px;padding:18px 20px;border-radius:22px;background:rgba(10,10,12,.74);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;gap:6px;text-align:center}
 html[data-look=cosmos] body #app #page-team .sp-tempty b{font-size:18px}html[data-look=cosmos] body #app #page-team .sp-tempty span{font-size:13.5px;color:#D1D1D6;line-height:1.5}
 html[data-look=cosmos] body #app #page-team .tgrid>.wcard:first-child #tmRows{width:100%;flex:1 1 auto;min-height:0;overflow:auto;border-radius:18px;background:rgba(8,8,10,.6);border:1px solid rgba(255,255,255,.1);padding:4px 10px;box-sizing:border-box}
 html[data-look=cosmos][data-light] body #app #page-team .tgrid>.wcard:first-child #tmRows{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93));border-color:rgba(255,255,255,.75)}
 html[data-look=cosmos] body #app #page-team #tmRows .tbl tr,html[data-look=cosmos] body #app #page-team #tmRows .tbl td{background:none!important;box-shadow:none!important;border-radius:0!important}
 html[data-look=cosmos] body #app #page-team #tmRows .tbl tbody tr{border-bottom:1px solid var(--sp-line)!important}
 /* the monitor: three mode tiles on top, the feed, the whisper box and the transfer row */
 html[data-look=cosmos] body #app #page-team .wcard.sup{padding:20px 22px!important;border-radius:22px!important;display:flex!important;flex-direction:column!important;gap:14px!important;min-height:0}
 html[data-look=cosmos] body #app #page-team .wcard.sup .supbody{flex:1;min-height:0;display:flex!important;flex-direction:column!important;gap:14px!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .supctl{display:contents!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .segs{order:-1;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;height:auto!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2{position:relative;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;height:auto!important;padding:62px 10px 14px!important;border-radius:18px!important;background:var(--sp-f1)!important;border:1px solid var(--sp-line)!important;color:var(--sp-t)!important;font-size:15px!important;font-weight:600!important;box-shadow:none!important;opacity:1!important;text-align:center}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2::before{content:"";position:absolute;top:14px;left:50%;width:40px;height:40px;margin-left:-20px;border-radius:50%;background:radial-gradient(circle at 34% 26%,#7C7C82 0%,#3A3A3D 38%,#141416 78%,#050506 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -6px 12px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.45)}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2::after{font-size:13px;font-weight:400;color:var(--sp-s);line-height:1.4}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2[data-sup=listen]::after{content:"שומע את השיחה, אף אחד לא שומע אותך"}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2[data-sup=whisper]::after{content:"רק הנציג שומע אותך, הלקוח לא"}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2[data-sup=takeover]::after{content:"אתה מדבר עם הלקוח ישירות"}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2.on{background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2.on::after{color:#333336}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2:disabled{cursor:default}
 html[data-look=cosmos] body #app #page-team .wcard.sup .supfeed{order:0;flex:1;min-height:0}
 html[data-look=cosmos] body #app #page-team .wcard.sup #supNote{display:none!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .say{order:1}
 html[data-look=cosmos] body #app #page-team .wcard.sup .transfer{order:2;display:flex!important;gap:8px!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .transfer select{flex:1;height:40px!important;border-radius:14px!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .transfer .ab{height:40px!important;padding:0 16px!important;border-radius:14px!important}
}
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-team #tmK .ktile b{text-align:right!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2 .oi{position:absolute!important;top:25px;left:50%;transform:translateX(-50%);z-index:1;width:18px!important;height:18px!important;color:#F5F5F7!important;margin:0!important}
 html[data-look=cosmos] body #app #page-team .wcard.sup .sg2.on::before{background:radial-gradient(circle at 34% 26%,#5A5A5F 0%,#2A2A2D 40%,#0B0B0C 100%)}
}

/* ================= AI, like the canvas "סוכני AI": the toolbar beside the tabs, who calls, then dialer (left 400) · the agent's big orb (middle) · the queue (right 360), history at the bottom ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-ai.on{position:relative!important;overflow:visible!important;display:flex!important;flex-direction:column!important;min-height:0}
 html[data-look=cosmos] body #app #page-ai>.wbar{position:absolute!important;top:-56px;left:0;right:0;height:44px;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;z-index:5;flex-wrap:nowrap!important}
 html[data-look=cosmos] body #app #page-ai>.wbar>*{pointer-events:auto}
 html[data-look=cosmos] body #app #page-ai>.wbar .tabs2{margin-right:var(--tabsw,230px)!important;height:44px!important;box-sizing:border-box;padding:4px!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;display:flex!important;gap:2px!important}
 html[data-look=cosmos] body #app #page-ai>.wbar .tabs2 .t2{height:34px!important;padding:0 14px!important;border-radius:17px!important;font-size:13.5px!important;color:#FFFFFF!important;background:none!important;border:0!important;box-shadow:none!important}
 html[data-look=cosmos] body #app #page-ai>.wbar .tabs2 .t2.on{background:var(--sp-pbtn)!important;color:#000!important;font-weight:600!important;box-shadow:var(--sp-pbtn-sh)!important}
 html[data-look=cosmos] body #app #page-ai>.wbar .rupd,html[data-look=cosmos] body #app #page-ai>.wbar .stg{font-size:14px!important;color:#D1D1D6!important;background:none!important;border:0!important;padding:0!important}
 html[data-look=cosmos] body #app #page-ai>.wbar #aiTry{margin-right:auto!important}
 html[data-look=cosmos] body #app #page-ai>.wbar :is(#aiTry,#aiNew){height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;display:inline-flex!important;align-items:center;gap:7px;background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important;font-weight:500!important;margin-top:0!important;margin-bottom:0!important}
 html[data-look=cosmos] body #app #page-ai>.wbar #aiNew{background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important;font-weight:600!important}
 html[data-look=cosmos] body #app #page-ai #aiBody{flex:1;min-height:0;overflow:visible!important;display:flex!important;flex-direction:column!important}
 html[data-look=cosmos] body #app #page-ai .adial{flex:1;min-height:0;display:flex!important;flex-direction:column!important;gap:16px!important;height:auto!important}
 /* who calls */
 html[data-look=cosmos] body #app #page-ai .agrow{flex:none;display:flex!important;align-items:center!important;gap:10px!important;padding:0!important;margin:0!important;background:none!important;border:0!important;box-shadow:none!important;height:auto!important}
 html[data-look=cosmos] body #app #page-ai .agrow .dlbl{font-size:15px!important;font-weight:600!important;color:#F5F5F7!important}
 html[data-look=cosmos] body #app #page-ai .agrow .agc{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:1px!important;height:auto!important;min-height:52px;padding:8px 18px 8px 14px!important;border-radius:18px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;color:#F5F5F7!important;box-shadow:none!important}
 html[data-look=cosmos] body #app #page-ai .agrow .agc.on{border:2px solid #F5F5F7!important}
 html[data-look=cosmos] body #app #page-ai .agrow .agc b{font-size:14.5px!important;font-weight:700!important}
 html[data-look=cosmos] body #app #page-ai .agrow .agc small{font-size:13px!important;color:#30D158!important}
 html[data-look=cosmos] body #app #page-ai .agrow .agc.add{min-height:44px;justify-content:center;border:1px dashed rgba(255,255,255,.3)!important;background:none!important;font-size:14px!important}
 /* the three columns */
 html[data-look=cosmos] body #app #page-ai .agrid{flex:1;min-height:0;display:grid!important;grid-template-columns:360px minmax(0,1fr) 400px!important;grid-template-rows:minmax(0,1fr)!important;gap:18px!important;margin:0!important;height:auto!important}
 html[data-look=cosmos] body #app #page-ai .agrid>.dqueue{grid-column:1!important;grid-row:1!important;min-height:0!important;height:auto!important;overflow:hidden;border-radius:22px!important;padding:20px 22px!important}
 html[data-look=cosmos] body #app #page-ai .agrid>.dright{grid-column:2!important;grid-row:1!important;min-height:0;height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:auto!important}
 html[data-look=cosmos] body #app #page-ai .agrid>.dpad{grid-column:3!important;grid-row:1!important;min-height:0!important;height:auto!important;align-self:stretch!important;border-radius:22px!important;padding:20px 22px!important;display:flex!important;flex-direction:column!important;gap:14px!important}
 html[data-look=cosmos] body #app #page-ai .agrid>.dpad>h3{font-size:16px!important;font-weight:600!important;margin:0!important}
 html[data-look=cosmos] body #app #page-ai .agrid>.dpad #dpGo{height:50px!important;border-radius:16px!important}
 /* the agent's orb in the middle, with "no call right now" under it */
 html[data-look=cosmos] body #app #page-ai #rSide{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;width:100%!important;height:auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;align-items:center!important}
 html[data-look=cosmos] body #app #page-ai #rSide>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-ai #rSide .rempty{display:flex!important;flex-direction:column!important;align-items:center!important;gap:0!important;text-align:center;width:100%}
 html[data-look=cosmos] body #app #page-ai #rSide .rempty .orb{position:relative;width:200px!important;height:200px!important;margin:50px 0 80px!important;border-radius:50%!important;background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#E6E6EB 30%,#9A9AA2 70%,#5A5A60 100%)!important;box-shadow:inset -14px -18px 30px rgba(0,0,0,.35),inset 6px 6px 16px rgba(255,255,255,.6),0 20px 40px rgba(0,0,0,.5)!important;flex:none}
 html[data-look=cosmos] body #app #page-ai #rSide .rempty .orb::before{content:"";position:absolute;inset:-50px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.55) 0 1deg,transparent 1deg 5deg);-webkit-mask:radial-gradient(circle,transparent 0 calc(50% - 10px),#000 calc(50% - 10px) calc(50% - 2px),transparent calc(50% - 2px));mask:radial-gradient(circle,transparent 0 calc(50% - 10px),#000 calc(50% - 10px) calc(50% - 2px),transparent calc(50% - 2px));pointer-events:none}
 html[data-look=cosmos] body #app #page-ai #rSide .rempty .orb>*{display:none!important}
 html[data-look=cosmos] body #app #page-ai #rSide .rempty>b,html[data-look=cosmos] body #app #page-ai #rSide .rempty>p{max-width:460px;box-sizing:border-box;margin:0!important;padding:0 24px;background:rgba(10,10,12,.74);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);color:#F5F5F7}
 html[data-look=cosmos] body #app #page-ai #rSide .rempty>b{padding-top:14px;border-top:1px solid rgba(255,255,255,.12);border-radius:22px 22px 0 0;font-size:18px!important;font-weight:600!important;width:460px}
 html[data-look=cosmos] body #app #page-ai #rSide .rempty>p{padding-bottom:14px;padding-top:6px;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0 0 22px 22px;font-size:14px!important;line-height:1.55;color:#D1D1D6!important;width:460px}
 /* history today */
 html[data-look=cosmos] body #app #page-ai .dtoday{flex:none!important;display:flex!important;align-items:center!important;gap:18px!important;padding:14px 20px!important;border-radius:22px!important;margin:0!important;min-height:0!important;height:auto!important}
 html[data-look=cosmos] body #app #page-ai .dtoday>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-ai .dtoday #dpTodayH{margin:0!important;font-size:16px!important;font-weight:600!important;white-space:nowrap}
 html[data-look=cosmos] body #app #page-ai .dtoday #dpToday{flex:1;min-width:0;max-height:64px;overflow:auto}
 html[data-look=cosmos] body #app #page-ai .dtoday .rl0{padding:10px 14px;border-radius:14px;border:1px solid var(--sp-line);text-align:center;font-size:13.5px;color:var(--sp-s)}
}
@media (min-width:1101px){html[data-look=cosmos] body #app #page-ai #rSide .rempty .orb{overflow:visible!important;isolation:auto!important}}

/* ================= settings, like the canvas "הגדרות": the tabs as a pill on the right, the connection cards 2×2 on the left, the connections orbit on the right ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-settings>.wbar{display:flex!important;justify-content:flex-start!important;margin:0 0 16px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;height:44px!important}
 html[data-look=cosmos] body #app #page-settings>.wbar .tabs2{height:44px!important;box-sizing:border-box;padding:4px!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;display:flex!important;gap:2px!important;margin:0!important}
 html[data-look=cosmos][data-light] body #app #page-settings>.wbar .tabs2{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important}
 html[data-look=cosmos] body #app #page-settings>.wbar .tabs2 .t2{height:34px!important;padding:0 16px!important;border-radius:17px!important;font-size:13.5px!important;font-weight:500!important;color:var(--sp-t)!important;background:none!important;border:0!important;box-shadow:none!important}
 html[data-look=cosmos]:not([data-light]) body #app #page-settings>.wbar .tabs2 .t2{color:#FFFFFF!important}
 html[data-look=cosmos] body #app #page-settings>.wbar .tabs2 .t2 .oi{display:none!important}
 html[data-look=cosmos] body #app #page-settings>.wbar .tabs2 .t2.on{background:var(--sp-pbtn)!important;color:#000!important;font-weight:600!important;box-shadow:var(--sp-pbtn-sh)!important}
 html[data-look=cosmos][data-light] body #app #page-settings>.wbar .tabs2 .t2.on{background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#fff!important}
 /* the connections tab */
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap){display:grid!important;grid-template-columns:520px minmax(0,1fr) minmax(0,1fr)!important;grid-auto-rows:auto;align-content:start;gap:18px!important;overflow:auto!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cnwrap,html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cngrid{display:contents!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cnti{grid-column:1/-1;grid-row:1;margin:0!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cngrid>.cnp:nth-child(1){grid-column:2;grid-row:2}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cngrid>.cnp:nth-child(2){grid-column:3;grid-row:2}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cngrid>.cnp:nth-child(3){grid-column:2;grid-row:3}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .sthero{grid-column:3;grid-row:3}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .srcs{grid-column:2/4;grid-row:4}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .sp-sorbit{grid-column:1;grid-row:2/4;align-self:center}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) :is(.cnp,.sthero){min-height:240px;margin:0!important;padding:20px 22px!important;border-radius:22px!important;display:flex!important;flex-direction:column!important;gap:12px!important;height:auto!important;box-sizing:border-box}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) :is(.cnp,.sthero)>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cnp>:last-child{margin-top:auto!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .sthero>div{display:flex;flex-direction:column;gap:8px}
 html[data-look=cosmos] body #app #page-settings .sthero{background:linear-gradient(90deg,#1c7cee22,#34d39914),var(--cx-win)!important}   /* the tint alone was see-through: on a light background its white words vanished (Gal 10.11) */
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .sthero>div>b{font-size:16px;font-weight:600}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .sthero #srcNew{margin-top:auto!important;align-self:flex-start;height:40px!important;padding:0 17px!important;border-radius:14px!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cnph{display:flex!important;align-items:flex-start!important;gap:12px!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cnph b{font-size:16px!important;font-weight:600!important}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cnph .sb{font-size:14px!important;line-height:1.55;color:var(--sp-s)!important;margin-top:6px}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.cnwrap) .cnbig{height:44px!important;border-radius:22px!important;align-self:flex-start;padding:0 18px!important;width:auto!important}
 /* the orbit */
 html[data-look=cosmos] body #app #page-settings .sp-sorbit{position:relative;width:420px;height:420px;margin:0 auto;color:#F5F5F7}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit>svg{position:absolute;inset:0}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit .ln{stroke:rgba(255,255,255,.25);stroke-dasharray:3 6}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit .hub{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:radial-gradient(circle at 45% 35%,#2A2A2E 0%,#0C0C0E 70%,#000 100%);box-shadow:inset -6px -8px 14px rgba(0,0,0,.8),inset 3px 3px 8px rgba(255,255,255,.12),0 10px 22px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12);font-size:13.5px;color:#D1D1D6}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit .hub svg{position:static;width:28px;height:28px}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit .sat{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit .sat i{width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 34% 26%,#7C7C82 0%,#3A3A3D 38%,#141416 78%,#050506 100%);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -6px 12px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:14px;font-weight:700}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit .sat span{font-size:13px;font-weight:600;text-align:center;padding:3px 10px;border-radius:8px;background:rgba(0,0,0,.65);line-height:1.35;white-space:nowrap}
 html[data-look=cosmos] body #app #page-settings .sp-sorbit .sat small{display:block;font-weight:400;color:#C7C7CC}
}

/* ================= the business, like the canvas "העסק": the period pill, numbers in one strip, the month (tall, right) · sales and the funnel (middle) · team and sources (left) ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-biz .bzv{gap:16px!important;height:100%!important}
 html[data-look=cosmos] body #app #page-biz .bztop{height:44px!important;align-items:center!important;gap:10px!important}
 html[data-look=cosmos] body #app #page-biz .bztop .bzseg{height:44px!important;box-sizing:border-box;padding:4px!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;gap:2px!important}
 html[data-look=cosmos][data-light] body #app #page-biz .bztop .bzseg{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important}
 html[data-look=cosmos] body #app #page-biz .bztop .bzseg>*{height:34px!important;padding:0 16px!important;border-radius:17px!important;font-size:13.5px!important}
 html[data-look=cosmos] body #app #page-biz .bztop .rupd{font-size:14px!important;color:#D1D1D6!important}
 html[data-look=cosmos] body #app #page-biz .bztop .btn{height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important;font-weight:500!important}
 html[data-look=cosmos] body #app #page-biz .bzstrip{gap:0!important;padding:16px 0!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(255,255,255,.12)!important;height:auto!important;box-shadow:none!important}
 html[data-look=cosmos][data-light] body #app #page-biz .bzstrip{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
 html[data-look=cosmos] body #app #page-biz .bzstrip>div{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 22px!important;border-right:1px solid var(--sp-line)!important;height:auto!important}
 html[data-look=cosmos] body #app #page-biz .bzstrip>div:first-child{border-right:0!important}
 html[data-look=cosmos] body #app #page-biz .bzstrip>div b{font-family:Inter,sans-serif!important;font-size:30px!important;font-weight:200!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-biz .bzg{flex:1;min-height:0;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important}
 html[data-look=cosmos] body #app #page-biz .bzg>.bzc{margin:0!important;min-height:0!important;height:auto!important;border-radius:22px!important;padding:20px 22px!important;overflow:hidden}
 html[data-look=cosmos] body #app #page-biz .bzg>.bzc:nth-child(4){grid-column:1!important;grid-row:1/3!important}
 html[data-look=cosmos] body #app #page-biz .bzg>.bzc:nth-child(1){grid-column:2!important;grid-row:1!important}
 html[data-look=cosmos] body #app #page-biz .bzg>.bzc:nth-child(2){grid-column:2!important;grid-row:2!important}
 html[data-look=cosmos] body #app #page-biz .bzg>.bzc:nth-child(3){grid-column:3!important;grid-row:1!important}
 html[data-look=cosmos] body #app #page-biz .bzg>.bzc:nth-child(5){grid-column:3!important;grid-row:2!important}
 html[data-look=cosmos] body #app #page-biz .bzg>.bzc>.ob-tag{display:none!important}
}

/* the business in grey, black and white like the canvas: white good days, orange weak days, white bars and line */
html[data-look=cosmos] body #app #page-biz .bzfun .band i{background:linear-gradient(90deg,#8E8E93,#F5F5F7)!important;box-shadow:none!important}
html[data-look=cosmos] body #app #page-biz .bzfun .bzfr.s4 .band i,html[data-look=cosmos] body #app #page-biz .bzfun .bzfr:last-child .band i{background:linear-gradient(90deg,#1FA346,#30D158)!important}
html[data-look=cosmos][data-light] body #app #page-biz .bzfun .band i{background:linear-gradient(90deg,#8E8E93,#1D1D1F)!important}
html[data-look=cosmos] body #app #page-biz .bzt .bar i{background:var(--sp-t)!important;opacity:.85}
html[data-look=cosmos] body #app #page-biz .bzchart svg path:not([stroke-dasharray]):not(.d),html[data-look=cosmos] body #app #page-biz .bzchart svg polyline:not(.d){stroke:var(--sp-t)!important}
html[data-look=cosmos] body #app #page-biz .bzchart svg circle{fill:var(--sp-t)!important;stroke:#000!important}
html[data-look=cosmos] body #app #page-biz .bzchart svg [fill^="url"]{opacity:.35}
html[data-look=cosmos] body #app #page-biz .bzlg i{background:var(--sp-t)!important}
html[data-look=cosmos] body #app #page-biz .bzcal .d{border-radius:12px!important;box-shadow:none!important;font-family:Inter,sans-serif;font-weight:500}
html[data-look=cosmos] body #app #page-biz .bzcal .d.lv-good,html[data-look=cosmos] body #app #page-biz .bzcal .d.lv-top{background:var(--sp-btn)!important;color:var(--sp-btnT)!important}
html[data-look=cosmos] body #app #page-biz .bzcal .d.lv-mid{background:rgba(255,255,255,.22)!important;color:var(--sp-t)!important}
html[data-look=cosmos] body #app #page-biz .bzcal .d.lv-bad{background:rgba(255,159,10,.18)!important;color:var(--sp-t)!important;box-shadow:inset 0 0 0 1.5px #FF9F0A!important}
html[data-look=cosmos] body #app #page-biz .bzcal .d.lv-zero,html[data-look=cosmos] body #app #page-biz .bzcal .d.lv-off{background:var(--sp-f2)!important;color:var(--sp-s)!important}
html[data-look=cosmos][data-light] body #app #page-biz .bzcal .d.lv-mid{background:rgba(0,0,0,.12)!important}
/* the business funnel as a rainbow, with what every colour means (Gal 09.11) */
#page-biz .bzarc{display:flex;align-items:center;gap:18px;flex:1;min-height:0}
#page-biz .bzarc .bzrbw{position:relative;flex:1 1 55%;min-width:0;max-width:340px}
#page-biz .bzarc .bzrb{width:100%;height:auto;display:block}
#page-biz .bzarc .bzrb .trk{fill:none;stroke:var(--sp-f2,rgba(255,255,255,.08));stroke-linecap:round}
#page-biz .bzarc .bzrbc{position:absolute;left:0;right:0;bottom:2%;display:flex;flex-direction:column;align-items:center;gap:2px}
#page-biz .bzarc .bzrbc b{font-family:Inter,sans-serif;font-size:26px;font-weight:300;color:var(--sp-t,#F5F5F7);line-height:1}
#page-biz .bzarc .bzrbc span{font-size:13px;color:var(--sp-s,#D1D1D6)}
#page-biz .bzarc .bzrbl{list-style:none;margin:0;padding:0;flex:1 1 45%;display:flex;flex-direction:column;gap:9px;min-width:0}
#page-biz .bzarc .bzrbl li{display:grid;grid-template-columns:12px 1fr auto;grid-template-rows:auto auto;column-gap:8px;align-items:center}
#page-biz .bzarc .bzrbl li i{width:12px;height:12px;border-radius:50%;grid-row:1/3}
#page-biz .bzarc .bzrbl li b{font-size:14px;font-weight:600;color:var(--sp-t,#F5F5F7)}
#page-biz .bzarc .bzrbl li .num{font-family:Inter,sans-serif;font-size:15px;font-weight:500;color:var(--sp-t,#F5F5F7)}
#page-biz .bzarc .bzrbl li small{grid-column:2/4;font-size:13px;color:var(--sp-s,#D1D1D6)}
#page-biz .bzarc .bzrbc{bottom:0!important}
#page-biz .bzarc .bzrbl{gap:5px!important;justify-content:center}
#page-biz .bzarc .bzrbl li{row-gap:0!important;line-height:1.3!important;margin:0!important;padding:0!important;min-height:0!important;height:auto!important}
#page-biz .bzarc .bzrbl li b{font-size:13.5px!important}
#page-biz .bzarc .bzrbl li small{font-size:13px!important;line-height:1.2}
#page-biz .bzc:has(.bzarc) .ch .r{display:none!important}
html body #page-biz .bzarc .bzrbl li .num{display:block!important;padding:0!important;border:0!important;height:auto!important;min-height:0!important;background:none!important;box-shadow:none!important;line-height:1.2!important}
html body #page-biz .bzarc .bzrbl{justify-content:flex-start!important}
@media (max-height:860px){html body #page-biz .bzarc .bzrbl{gap:3px!important}html body #page-biz .bzarc .bzrbl li small{font-size:13px!important}html body #page-biz .bzarc .bzrbl li:first-child small{display:none}}
@media (max-height:860px){html body #page-biz .bzarc .bzrbc b{font-size:20px}}

/* short windows (Gal 25.10 test): the dial shrinks so the dock sits on the bottom edge without making the column scroll */
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c:not(.sp-acts){--d:clamp(200px,calc(100vh - 430px),420px)!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c:not(.sp-acts)>.card.dialer{--d:clamp(200px,calc(100vh - 430px),420px)!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .dialrow{margin-bottom:0!important}
}
@media (min-width:1101px) and (max-height:720px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .lineinfo .person{font-size:15px!important;margin-top:0}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .lineinfo .phase{font-size:13px!important}
}

@media (min-width:1101px){html[data-look=cosmos] body #app main>.page{max-width:none!important}}

/* the customer card can be made wider with the mouse (Gal 09.11): a grip on its bottom-right corner; double click = back to normal */
html[data-look=cosmos] #cust{position:relative}
html[data-look=cosmos] #cust .sp-rsz{position:absolute;right:2px;bottom:2px;width:22px;height:22px;cursor:ew-resize;z-index:6;border-radius:0 0 20px 0;touch-action:none;opacity:.55;transition:opacity .2s}
html[data-look=cosmos] #cust .sp-rsz:hover,html[data-look=cosmos] #cust .sp-rsz.on{opacity:1}
html[data-look=cosmos] #cust .sp-rsz::before{content:"";position:absolute;right:6px;bottom:6px;width:10px;height:10px;border-right:2px solid var(--sp-t);border-bottom:2px solid var(--sp-t);border-radius:0 0 4px 0}
html[data-look=cosmos] body[data-st=wrap] #cust .sp-rsz{display:none}
@media (max-width:1100px){html[data-look=cosmos] #cust .sp-rsz{display:none}}

/* after the call (Gal 09.11 v2): in the dialer's own place, small and simple: how it ended, a note, and "finish and next" */
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .col.c>.card.nova{display:none!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .col.c>.card.actions:has(#novaFeed>.empty:only-child){display:none!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar{width:min(560px,100%)!important;margin:18px auto 0!important;padding:22px!important;border-radius:24px!important;display:flex!important;flex-direction:column!important;gap:16px!important;box-sizing:border-box}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar::before{content:"איך נגמרה השיחה?"!important;display:block!important;font-size:18px!important;font-weight:700!important;text-align:center!important;margin:0!important;color:var(--sp-t)!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar .outcomes{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;padding:0!important;margin:0!important;background:none!important;box-shadow:none!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar .oc{display:flex!important;flex-direction:column!important;align-items:center!important;gap:9px!important;padding:14px 4px 12px!important;border-radius:18px!important;background:var(--sp-f1)!important;border:1px solid var(--sp-line)!important;box-shadow:none!important;font-size:14px!important;font-weight:600!important;color:var(--sp-t)!important;min-width:0!important;height:auto!important;cursor:pointer;transition:transform .15s ease,background .15s ease}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar .oc:hover{transform:translateY(-2px);background:var(--sp-f2)!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar .oc.picked{background:var(--sp-f3)!important;box-shadow:inset 0 0 0 2px var(--sp-t)!important;font-weight:800!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar .oc>span{width:52px!important;height:52px!important;display:flex!important;align-items:center!important;justify-content:center!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar .oc>span .oi{display:inline-block!important;position:relative;z-index:1;width:22px!important;height:22px!important;color:#fff!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wraprow{display:flex!important;flex-direction:column!important;gap:12px!important;margin:0!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .notebar{display:flex!important;align-items:center!important;gap:8px!important;height:48px!important;padding:0 6px 0 14px!important;border-radius:14px!important;background:var(--sp-f2)!important;border:1px solid var(--sp-line)!important;box-shadow:none!important;width:100%!important;box-sizing:border-box}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .notebar #noteIn{flex:1!important;height:46px!important;border:0!important;background:transparent!important;color:var(--sp-t)!important;font-size:14px!important;box-shadow:none!important;padding:0!important;outline:0}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .notebar #noteSave{height:36px!important;padding:0 16px!important;border-radius:11px!important;font-size:13.5px!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial #bNext{width:100%!important;height:54px!important;border-radius:27px!important;font-size:16px!important;font-weight:700!important;margin:0!important;background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important}
html[data-look=cosmos][data-light] body[data-st=wrap] #app#app #page-dial #bNext{background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#fff!important}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial #bNoCallBack{align-self:center;height:36px!important;padding:0 16px!important;border-radius:14px!important;font-size:13.5px!important;order:-1}
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbar{background:rgba(10,10,12,.78)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:none!important}
html[data-look=cosmos][data-light] body[data-st=wrap] #app#app #page-dial .wrapbar{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important;color:#0B0B0C}
html[data-look=cosmos][data-light] body[data-st=wrap] #app#app #page-dial .wrapbar :is(.oc,#noteIn){color:#0B0B0C!important}
html[data-look=cosmos][data-light] body[data-st=wrap] #app#app #page-dial .wrapbar::before{color:#0B0B0C!important}
html[data-look=cosmos][data-light] body[data-st=wrap] #app#app #page-dial .lineinfo .phase{color:#F5F5F7!important}
/* the contact logos (Gal 09.11): the real logos on their own, whole, no white ball behind them */
html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail) svg{background:center/contain no-repeat!important;box-shadow:none!important;border-radius:0!important;width:44px!important;height:44px!important;padding:0!important;margin:5px 0!important}
html[data-look=cosmos] #app #cust .cact.wa svg{background-image:url(/brand/whatsapp.svg)!important}
html[data-look=cosmos] #app #cust .cact.sms svg{background-image:url(/brand/sms.svg)!important}
html[data-look=cosmos] #app #cust .cact.mail svg{background-image:url(/brand/gmail.svg)!important;background-size:contain!important}
html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail) svg>*{opacity:0!important}
html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail)::before,html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail)::after,html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail) svg::after{display:none!important}
html[data-look=cosmos] #app main>header .hl>#meName{display:none!important}
/* "call again" next to "finish and next" after a call (Gal 09.11): the same customer, one click */
html[data-look=cosmos] body[data-st=wrap] #app#app #page-dial .wrapbtns{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;width:100%}
html[data-look=cosmos] #page-dial .redialbtn{height:54px;border-radius:27px;border:0;font:inherit;font-size:16px;font-weight:700;color:#fff;cursor:pointer;background:linear-gradient(180deg,#5EE88A 0%,#30D158 45%,#1FA346 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -3px 6px rgba(0,0,0,.18),0 8px 24px rgba(48,209,88,.38)}
html[data-look=cosmos] body:not([data-st=wrap]) #page-dial .wrapbtns{display:contents}
#page-ai .dcall .dagain{display:inline-flex;gap:6px;flex:none;margin-inline-start:8px}
#page-ai .dcall .dagain .btn{height:32px!important;padding:0 12px!important;border-radius:12px!important;font-size:13px!important}
#page-ai .dcall .dph{font-family:Inter,sans-serif;font-weight:500;color:var(--sp-s);font-size:13.5px;margin-inline-start:6px}

/* ================= the agent builder: four tabs, readable fields (Gal 09.11) ================= */
#page-ai .abar .aprog{display:none!important}
#page-ai .abar .aname{min-width:0}
#page-ai .abar .aname .vav{flex:none}
#page-ai #aBuild{display:flex;flex-direction:column;gap:14px}
#page-ai .sp-btabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;position:sticky;top:0;z-index:3;padding:4px;border-radius:22px;background:rgba(10,10,12,.86);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
#page-ai .sp-btabs button{display:flex;align-items:center;gap:10px;text-align:right;padding:10px 12px;border-radius:18px;border:0;background:none;color:#F5F5F7;font:inherit;cursor:pointer;min-width:0}
#page-ai .sp-btabs button i{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-family:Inter,sans-serif;font-weight:700;font-size:13px;background:rgba(255,255,255,.12)}
#page-ai .sp-btabs button span{display:flex;flex-direction:column;min-width:0}
#page-ai .sp-btabs button b{font-size:15px;font-weight:700}
#page-ai .sp-btabs button small{font-size:13px;color:#C7C7CC;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-ai .sp-btabs button[aria-selected=true]{background:var(--sp-pbtn);color:#000;box-shadow:var(--sp-pbtn-sh)}
#page-ai .sp-btabs button[aria-selected=true] small{color:#333336}
#page-ai .sp-btabs button[aria-selected=true] i{background:#000;color:#fff}
#page-ai .sp-bpane{display:flex;flex-direction:column;gap:14px}
#page-ai .sp-bpane[hidden]{display:none!important}
#page-ai .sp-bh{margin:4px 2px 0;font-size:20px;font-weight:700;color:#F5F5F7;display:flex;flex-direction:column;gap:2px}
#page-ai .sp-bh small{font-size:14px;font-weight:400;color:#D1D1D6}
#page-ai .sp-bpane[data-bp=g]>.lb,#page-ai .sp-bpane[data-bp=g]>.goals{padding:0 22px}
#page-ai .sp-bpane[data-bp=g]>.lb{font-size:16px!important;font-weight:600!important;color:#F5F5F7!important;margin:0!important}
/* readable fields everywhere in the builder: light text on a clear field (dark mode), dark text on white (light mode) */
#page-ai #aBuild :is(input.f,textarea.f,select.f),#page-ai .atry :is(input,textarea,select){color:var(--sp-t)!important;background:var(--sp-f2)!important;border:1px solid var(--sp-line)!important;-webkit-text-fill-color:currentColor}
#page-ai #aBuild :is(input.f,textarea.f)::placeholder,#page-ai .atry :is(input,textarea)::placeholder{color:var(--sp-m)!important;opacity:1}
#page-ai #aBuild textarea.f{line-height:1.6!important;font-size:14.5px!important}
#page-ai #aBuild :is(.astep small,.sb,.lb,.rule2 small,.guard,p){color:var(--sp-s)!important}
#page-ai #aBuild :is(.astep b,.rule2 b,.ahd b){color:var(--sp-t)!important}
#page-ai #aBuild .chip{color:var(--sp-t)!important;background:var(--sp-f2)!important;border:1px solid var(--sp-line)!important}
#page-ai #aBuild .chip.on{background:var(--sp-btn)!important;color:var(--sp-btnT)!important}
#page-ai #aBuild details.adv>summary{color:var(--sp-t)!important;font-weight:600;cursor:pointer}
html[data-look=cosmos][data-light] #page-ai .sp-btabs{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93));border-color:rgba(255,255,255,.75)}
html[data-look=cosmos][data-light] #page-ai .sp-btabs button{color:#0B0B0C}
html[data-look=cosmos][data-light] #page-ai .sp-btabs button small{color:#4A4A4F}
html[data-look=cosmos][data-light] #page-ai .sp-btabs button[aria-selected=true]{background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%);color:#fff}
html[data-look=cosmos][data-light] #page-ai .sp-btabs button[aria-selected=true] small{color:#D1D1D6}
html[data-look=cosmos][data-light] #page-ai .sp-btabs button[aria-selected=true] i{background:#fff;color:#000}
#page-ai #aBuild .astep{background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;color:#F5F5F7;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
html[data-look=cosmos][data-light] #page-ai #aBuild .astep{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important;color:#0B0B0C}
html[data-look=cosmos][data-light] #page-ai #aBuild .astep *:not(.tg):not(.tg *):not(.vav):not(.btn):not(.btn *):not(.chip.on){border-color:rgba(0,0,0,.08)}
html[data-look=cosmos][data-light] #page-ai #aBuild :is(.vcard,.rule2,.sanpick,.note2,.gprev,.kchips .chip){background:rgba(0,0,0,.035)!important;color:#0B0B0C!important}
html[data-look=cosmos][data-light] #page-ai #aBuild .vcard.on{box-shadow:inset 0 0 0 2px #0B0B0C!important}
html[data-look=cosmos][data-light] #page-ai #aBuild :is(.vcard b,.vcard small){color:inherit!important}
html[data-look=cosmos][data-light] #page-ai .sp-bh{color:#F5F5F7}

/* ===== readability pass (Gal 09.11: "I have to strain to see"): found by an automatic contrast scan of every screen, both modes ===== */
/* light mode: warm and green words get the darker shades that read on white */
html[data-look=cosmos][data-light]{--sp-hot:#B85000;--sp-live-t:#1F7A3A}
html[data-look=cosmos][data-light] body #app .page :is(.wcard,.card) :is(.up,em.up,.ok){color:#1F7A3A!important}
html[data-look=cosmos][data-light] body #app #page-leads .ltbl .hcell .num{color:#0B0B0C!important}
html[data-look=cosmos][data-light] body #app #page-leads .ltbl .hcell:has(.ob-star.warm) .num,html[data-look=cosmos][data-light] body #app #page-leads .ltbl .hcell:has(.ob-star.hot) .num{color:#B85000!important}
html[data-look=cosmos][data-light] #cust :is(.has-oi,.fbox b,b)[style*="190, 84"],html[data-look=cosmos][data-light] #cust .brief .warn b{color:#9A4300!important}
/* things that sit on the open sky stay light in light mode too */
html[data-look=cosmos][data-light] .sp-dial .sp-lb{fill:#C7C7CC}
html[data-look=cosmos][data-light] .sp-dial .sp-lb.on{fill:#F5F5F7}
html[data-look=cosmos][data-light] #page-dial .col.c :is(.lineinfo,.lineinfo *,.numrow .numin,#bFloat,#bFloat *){color:#F5F5F7!important}
html[data-look=cosmos][data-light] #page-dial .col.c .lineinfo .sb{color:#C7C7CC!important}
html[data-look=cosmos][data-light] #page-dial .card.actions:not(:has(#novaFeed>.empty:only-child)) .empty,html[data-look=cosmos][data-light] #page-dial .card.actions .sanmini{color:#333336!important}
html[data-look=cosmos][data-light] body #app #page-team .sp-trep .av,html[data-look=cosmos] body #app #page-team .sp-trep .av .avsvg.mono{color:#F5F5F7!important}
html[data-look=cosmos] #page-calendar .week .ev.sp-next small,html[data-look=cosmos] #page-calendar .week .ev.sp-next b{color:var(--sp-btnT)!important}
/* the rail: "exit" always inside the rail */
@media (min-width:1101px){html[data-look=cosmos] #app>nav>#logout{margin-bottom:2px!important}}
/* the business page in light mode: the period pill and the numbers strip are white, so their words are dark */
html[data-look=cosmos][data-light] body #app #page-biz .bztop .bzseg>*:not(.on){color:#1D1D1F!important}
html[data-look=cosmos][data-light] body #app #page-biz .bztop .bzseg>.on{background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#fff!important}
html[data-look=cosmos][data-light] body #app #page-biz .bzstrip :is(span,small,div){color:#333336!important}
html[data-look=cosmos][data-light] body #app #page-biz .bzstrip b{color:#0B0B0C!important}
html[data-look=cosmos][data-light] body #app #page-biz .bzstrip .up{color:#1F7A3A!important}
html[data-look=cosmos][data-light] body #app #page-biz .bzstrip .down{color:#B3261E!important}
html[data-look=cosmos][data-light] body #app #page-settings .lb{color:#333336!important}
@media (min-width:1101px){html[data-look=cosmos] #app>nav{gap:clamp(5px,calc(4.55vh - 30px),11px)!important}html[data-look=cosmos] #app>nav>#saOrb{margin-bottom:clamp(10px,calc(4.55vh - 25px),16px)!important}}
html[data-look=cosmos][data-light] body .sp-dial svg text.sp-lb{fill:#C7C7CC!important}
html[data-look=cosmos][data-light] body .sp-dial svg text.sp-lb.on{fill:#F5F5F7!important}
html[data-look=cosmos][data-light] #page-dial .card.actions .sanmini{color:#E5E5EA!important}
html[data-look=cosmos][data-light] body #app #page-biz .bzstrip *:not(b):not(.up):not(.down){color:#333336!important}
html[data-look=cosmos][data-light] #cust .brief :is(b,strong,.has-oi){filter:brightness(.75)}
html[data-look=cosmos][data-light] body #app #page-dial .card.actions:not(:has(#novaFeed>.empty:only-child)){background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border:1px solid rgba(255,255,255,.75)!important;color:#0B0B0C}
html[data-look=cosmos][data-light] body #app #page-dial .card.actions .held{color:#333336!important}
@media (min-width:1101px){html[data-look=cosmos] #app>nav>#saOrb{margin-bottom:18px!important}html[data-look=cosmos] #app>nav>#saOrb+.nv,html[data-look=cosmos] #app>nav>#meAv{margin-top:0!important}}
html[data-look=cosmos] #cust .tabs button .n,html[data-look=cosmos] #cust .tabs button.on b,html[data-look=cosmos] #cust .tabs button.on span{color:#0B0B0C!important}
html[data-look=cosmos]:not([data-light]) #cust .brief :is(.ok b,b[style*="12, 143"]),html[data-look=cosmos]:not([data-light]) #cust .brief .fbox.ok b{color:#5BE39A!important}
html[data-look=cosmos] #page-settings .cnlogo.web{color:#0B0B0C!important;background:#F5F5F7!important}
html[data-look=cosmos] #page-dial #actBadge.hot:not(.zero){color:#fff!important;background:radial-gradient(circle at 35% 28%,#FFB347 0%,#E07B00 55%,#A84F00 100%)!important}

/* ================= the queue and the customer card, like the canvas "חייגן" ================= */
html[data-look=cosmos] body #app #page-dial #queue .q{border-radius:16px!important;background:transparent!important;border:1px solid transparent!important;box-shadow:none!important;transform:none!important}
html[data-look=cosmos] body #app #page-dial #queue .q:hover{background:var(--sp-f1)!important}
html[data-look=cosmos] body #app #page-dial #queue .q.sel{background:var(--sp-f2)!important;border-color:var(--sp-f3)!important}
html[data-look=cosmos] body #app #page-dial #queue .q .nm{font-size:15px!important;font-weight:600!important;color:var(--sp-t)!important}
html[data-look=cosmos] body #app #page-dial #queue .q .sb{font-size:13.5px!important;color:var(--sp-s)!important}
html[data-look=cosmos] body #app #page-dial #queue .q .hp{display:none!important}
html[data-look=cosmos] body #app #page-dial #queue .q .qtag{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin-inline-start:auto!important;display:flex!important;flex-direction:column;align-items:flex-end;gap:0}
html[data-look=cosmos] body #app #page-dial #queue .q .qtag b{display:none!important}
html[data-look=cosmos] body #app #page-dial #queue .q .qtag i{font-style:normal;font-family:Inter,sans-serif;font-size:14px;font-weight:600;color:var(--sp-s)}
html[data-look=cosmos] body #app #page-dial #queue .q:is(.h-hot,.h-warm) .qtag i{color:var(--sp-hot)!important}
html[data-look=cosmos] body #app #page-dial #queue .q .tm{font-size:13px!important;color:var(--sp-s)!important;background:none!important}
/* the customer card tabs: one segmented bar */
html[data-look=cosmos] body #app #cust #tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;padding:3px!important;border-radius:11px!important;background:var(--sp-f2)!important;border:0!important;box-shadow:none!important;height:auto!important}
html[data-look=cosmos] body #app #cust #tabs>button{height:32px!important;border-radius:9px!important;border:0!important;font-size:13.5px!important;font-weight:500!important;background:transparent!important;color:var(--sp-s)!important;box-shadow:none!important;padding:0 4px!important;min-width:0!important;width:auto!important}
html[data-look=cosmos] body #app #cust #tabs>button.on{background:var(--sp-btn)!important;color:var(--sp-btnT)!important;font-weight:600!important}
html[data-look=cosmos] body #app #cust #tabs>button.on *{color:inherit!important}
/* "before you call": a timeline of quiet tinted cards with a coloured dot, like the canvas */
html[data-look=cosmos] body #app #cust .brief{position:relative;padding-right:26px!important;display:flex!important;flex-direction:column!important;gap:7px!important;background:none!important;border:0!important;box-shadow:none!important}
html[data-look=cosmos] body #app #cust .brief::before{content:"";position:absolute;right:8px;top:44px;bottom:16px;width:1px;background:var(--sp-f3)}
html[data-look=cosmos] body #app #cust .brief .bh{margin-right:-26px!important;font-size:15px!important;font-weight:600!important;color:var(--sp-t)!important}
html[data-look=cosmos] body #app #cust .brief .br{position:relative;display:flex!important;flex-direction:column!important;gap:3px!important;padding:9px 12px!important;border-radius:12px!important;background:var(--sp-f1)!important;border:1px solid var(--sp-line)!important;box-shadow:none!important;color:var(--sp-t)!important;margin:0!important}
html[data-look=cosmos] body #app #cust .brief .br::after{content:"";position:absolute;right:-23px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--sp-m)}
html[data-look=cosmos] body #app #cust .brief .br>small{font-size:13px!important;font-weight:700!important;color:var(--sp-m)!important;background:none!important}
html[data-look=cosmos] body #app #cust .brief .br>div{font-size:13.5px!important;line-height:1.45!important;color:var(--sp-t)!important}
html[data-look=cosmos] body #app #cust .brief .br[data-obk=src]{background:rgba(10,132,255,.12)!important;border-color:rgba(10,132,255,.28)!important}
html[data-look=cosmos] body #app #cust .brief .br[data-obk=src]::after{background:#0A84FF;box-shadow:0 0 0 3px rgba(10,132,255,.25)}
html[data-look=cosmos] body #app #cust .brief .br[data-obk=src]>small{color:#5AA8FF!important}
html[data-look=cosmos] body #app #cust .brief .br[data-obk=was]:not(.pbrief){background:rgba(48,209,88,.11)!important;border-color:rgba(48,209,88,.26)!important}
html[data-look=cosmos] body #app #cust .brief .br[data-obk=was]:not(.pbrief)::after{background:#30D158;box-shadow:0 0 0 3px rgba(48,209,88,.22)}
html[data-look=cosmos] body #app #cust .brief .br[data-obk=was]:not(.pbrief)>small{color:#5BE39A!important}
html[data-look=cosmos] body #app #cust .brief .br.open,html[data-look=cosmos] body #app #cust .brief .br.pbrief{background:linear-gradient(180deg,var(--sp-tip1),var(--sp-tip2))!important}
html[data-look=cosmos] body #app #cust .brief .br.open>small,html[data-look=cosmos] body #app #cust .brief .br.pbrief>small{color:var(--sp-t)!important}
html[data-look=cosmos][data-light] body #app #cust .brief .br[data-obk=src]>small{color:#0A5BC4!important}
html[data-look=cosmos][data-light] body #app #cust .brief .br[data-obk=was]:not(.pbrief)>small{color:#1F7A3A!important}
html[data-look=cosmos] body #app #cust .brief .pq b{color:var(--sp-t)!important}
html[data-look=cosmos] body #app #cust .brief .br .oi{display:none!important}

/* SAN's waiting actions sit above the dial (the dial makes room), never on top of it */
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions{position:absolute!important;top:0;left:50%;transform:translateX(-50%);width:min(560px,100%)!important;max-height:130px!important;overflow:auto!important;z-index:4;margin:0!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c.sp-acts .lineinfo .sb{display:none!important}
}
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c.sp-acts .lineinfo{top:calc(var(--dt,34px) + var(--d)/2 - 58px)!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c.sp-acts .lineinfo .person{font-size:15px!important;margin-top:0!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c.sp-acts .numrow{top:calc(var(--dt,34px) + var(--d)/2 + 34px)!important}
}
/* the level pill reads "רמה 1" in plain words; the ring stays as decoration (Gal 09.11) */
html[data-look=cosmos] #app main>header #jrBtn b{position:static!important;width:auto!important;transform:none!important;order:3;font-size:13.5px!important;font-family:inherit!important}
html[data-look=cosmos] #app main>header #jrBtn .jr-t{order:2}
html[data-look=cosmos] #app main>header #jrBtn svg{order:1;width:20px!important;height:20px!important}
html[data-look=cosmos] #app main>header #jrBtn{padding:0 12px!important;gap:6px!important}
/* narrower windows: the header pills give up their words before anything sticks out */
@media (max-width:1440px){html[data-look=cosmos] #app main>header #board{font-size:0!important;gap:0!important;padding:0 10px!important}html[data-look=cosmos] #app main>header #board .oi{font-size:15px}html[data-look=cosmos] #app main>header #lineState{display:none!important}}
@media (max-width:1300px){html[data-look=cosmos] #app main>header #clock{display:none!important}html[data-look=cosmos] #app main>header #jrBtn .jr-t{display:none}}
html[data-look=cosmos] #app main>header [data-fit]{display:none!important}
html[data-look=cosmos] #app#app main>header [data-fit][data-fit]{display:none!important}
#page-ai .sp-goalbox .goals{padding:0!important;display:flex;flex-wrap:wrap;gap:8px}
#page-ai .sp-goalbox .goals .chip{height:40px;padding:0 16px;border-radius:20px;font-size:14px!important}
#page-ai #aBuild .ahd .sn{background:var(--sp-btn)!important;color:var(--sp-btnT)!important}
#page-ai .abar{gap:10px!important;flex-wrap:nowrap}
#page-ai .abar #aiBack{flex:none;position:relative;z-index:2}
#page-ai .abar .aname{display:flex;align-items:center;gap:10px;margin-inline-start:6px}
#page-ai .abar .aname h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}

/* ================= the control room in light mode (Gal 09.11): white panels over the same sky, dark text ================= */
html[data-look=cosmos-owner][data-light]{--cx-mu:#333336;--cx-sub:#333336;--cx-ice:#0B0B0C;--cx-line:rgba(0,0,0,.08);--cx-rec:rgba(0,0,0,.035);--cx-rec-sh:inset 0 0 0 1px rgba(0,0,0,.06);--mu:#333336;--ac:#1D1D1F;--ac2:#333336;--ok:#1F7A3A;--warn:#9A4300;--bad:#B3261E}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.auth){background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important;color:#0B0B0C!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.auth) :is(.panel,.kpi,.tbl-wrap){background:rgba(0,0,0,.035)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)!important;border:0!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal) :is(h1,h2,h3,h4,b,strong,td,th,.t,.n,.num,.li,span,p,div,label,small,a){color:inherit}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal) :is(.sb,.lb,small,.why,th,.mono){color:#4A4A4F!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal) :is(.ok,.up,.good){color:#1F7A3A!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal) :is(.bad,.neg,.down){color:#B3261E!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal) :is(.warn,.hot){color:#9A4300!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.ov-money,.ov-todo,.tbl-wrap,.dlg,.modal) tr{border-color:rgba(0,0,0,.08)!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.ov-money,.ov-todo,.tbl-wrap,.dlg,.modal) :is(.f,input,select,textarea){background:rgba(0,0,0,.05)!important;color:#0B0B0C!important;border:1px solid rgba(0,0,0,.1)!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.ov-money,.ov-todo,.tbl-wrap,.dlg,.modal) .btn:not(.g){background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#fff!important;border:0!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.ov-money,.ov-todo,.tbl-wrap,.dlg,.modal) .btn.g{background:linear-gradient(180deg,#FFFFFF,#ECECF0)!important;color:#1D1D1F!important;border:1px solid rgba(0,0,0,.08)!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.ov-money,.ov-todo,.tbl-wrap,.dlg,.modal) .tag{background:rgba(0,0,0,.06)!important;color:#1D1D1F!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.ov-money,.ov-todo,.tbl-wrap,.dlg,.modal) .note{background:rgba(0,0,0,.04)!important;color:#333336!important}
/* the side menu, the top line and the tabs */
html[data-look=cosmos-owner][data-light] .side{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
html[data-look=cosmos-owner][data-light] .side .nv{color:#1D1D1F!important}
html[data-look=cosmos-owner][data-light] .side .brand b,html[data-look=cosmos-owner][data-light] .side .brand small{color:#0B0B0C!important}
html[data-look=cosmos-owner][data-light] :is(.top,.ov-hero,.hero) :is(h1,h2,.sb,small,span,b){color:#F5F5F7}
html[data-look=cosmos-owner][data-light] :is(.mtabs,.tabs,.seg){background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important}
html[data-look=cosmos-owner][data-light] :is(.mtabs,.tabs,.seg) :is(button,a){color:#1D1D1F!important}
html[data-look=cosmos-owner][data-light] :is(.mtabs,.tabs,.seg) :is(button,a):is(.on,[aria-selected=true]){background:linear-gradient(180deg,#48484A 0%,#1D1D1F 60%,#0B0B0C 100%)!important;color:#fff!important}
html[data-look=cosmos-owner] .side .sp-owlight svg{width:20px;height:20px}
/* control room light: every word inside a white panel is dark (only the ones with a meaning colour keep it), every word on the sky stays light */
html[data-look=cosmos-owner][data-light] .hc{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) :where(*){color:#0B0B0C!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) :is(.sb,.lb,small,.why,th,.mono,.ov-k,time){color:#4A4A4F!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) :is(.ok,.up,.good,.pos){color:#1F7A3A!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) :is(.bad,.neg,.down){color:#B3261E!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) :is(.warn,.hot,.wn){color:#9A4300!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) [style*="255, 201, 112"],html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) [style*="#ffc970"],html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) [style*="#FFC970"]{color:#9A4300!important}
html[data-look=cosmos-owner][data-light] :is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) :is(.btn:not(.g),.btn:not(.g) *){color:#fff!important}
html[data-look=cosmos-owner][data-light] :is(.sub,.ov-date,.ov-line,.lbl,.top h1,.top h2,.top .sb):not(:is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) *){color:#E5E5EA!important}
html[data-look=cosmos-owner][data-light] .ov-hero :is(h1,h2,b):not(:is(.panel,.kpi,.wcd,.wal,.ov-money,.ov-todo,.ov-do,.story,.ledger,.agrid>*,.tbl-wrap,.dlg,.modal,.hc) *){color:#F5F5F7!important}
html[data-look=cosmos-owner][data-light] :is(.ov-t,details.tech){background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
html[data-look=cosmos-owner][data-light] :is(.ov-t,details.tech) :where(*){color:#0B0B0C!important}
html[data-look=cosmos-owner][data-light] :is(.ov-t,details.tech) :is(.sb,small,span:first-child){color:#4A4A4F!important}
html[data-look=cosmos-owner][data-light] .ov-t :is(.up,.ok,.pos){color:#1F7A3A!important}html[data-look=cosmos-owner][data-light] .ov-t :is(.warn,.hot,em){color:#9A4300!important}

/* ================= dial lists, like the canvas "רשימות חיוג": three columns, each scrolls by itself ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-campaigns.on{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr)!important;gap:18px!important;overflow:hidden!important;min-height:0;height:100%}
 html[data-look=cosmos] body #app #page-campaigns>.wbar{display:none!important}
 html[data-look=cosmos] body #app #page-campaigns>.lsec{min-height:0;display:flex!important;flex-direction:column!important;gap:12px;margin:0!important;overflow:hidden}
 html[data-look=cosmos] body #app #page-campaigns>#slSec{grid-column:1;grid-row:1}
 html[data-look=cosmos] body #app #page-campaigns>.lsec:not(#slSec):not(#kSec){grid-column:2;grid-row:1}
 html[data-look=cosmos] body #app #page-campaigns>#kSec{grid-column:3;grid-row:1}
 html[data-look=cosmos] body #app #page-campaigns .lsh{flex:none;display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 16px!important;border-radius:16px!important;background:rgba(8,8,10,.78)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);margin:0!important}
 html[data-look=cosmos] body #app #page-campaigns .lsh>b{font-size:15px!important;font-weight:600!important;color:#F5F5F7!important}
 html[data-look=cosmos] body #app #page-campaigns .lsh>.sb{display:none!important}
 html[data-look=cosmos] body #app #page-campaigns .lsh .lshb{width:auto!important;margin-inline-start:auto!important;display:flex;gap:8px}
 html[data-look=cosmos] body #app #page-campaigns :is(.slgrid,.srcgrid,.cgrid){flex:1;min-height:0;overflow:auto;display:flex!important;flex-direction:column!important;gap:12px!important;padding:0 2px 6px!important}
 html[data-look=cosmos] body #app #page-campaigns :is(.slgrid,.srcgrid,.cgrid)>.wcard{flex:none!important;width:auto!important;margin:0!important;border-radius:22px!important;padding:18px 20px!important}
 html[data-look=cosmos] body #app #page-campaigns :is(.slgrid,.srcgrid,.cgrid)>.wcard>.ob-tag{display:none!important}
}
@media (min-width:1101px){
 /* source cards compact like the canvas: the numbers as small chips, the tip, two buttons (the opener lives behind "ערוך פנייה") */
 html[data-look=cosmos] body #app #page-campaigns .srcc .sop{display:none!important}
 html[data-look=cosmos] body #app #page-campaigns .srcc .sst{display:flex!important;flex-wrap:wrap;gap:6px!important;padding:0!important;margin:8px 0!important;border:0!important;background:none!important}
 html[data-look=cosmos] body #app #page-campaigns .srcc .sst>span{display:inline-flex!important;flex-direction:row-reverse!important;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:13px;background:var(--sp-f2)!important;font-size:13px!important;color:var(--sp-s)!important;border:0!important}
 html[data-look=cosmos] body #app #page-campaigns .srcc .sst .num2{font-family:Inter,sans-serif!important;font-size:13px!important;font-weight:600!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-campaigns .srcc .stip{font-size:13.5px!important;background:none!important;border:0!important;padding:0!important;margin:0 0 10px!important;color:var(--sp-s)!important}
 html[data-look=cosmos] body #app #page-campaigns .srcc .snew{font-size:13px!important}
}

/* ================= recordings, like the canvas "הקלטות": one panel, the filters on top of it, a table with lines ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-recordings.on{display:flex!important;flex-direction:column!important;gap:0!important;min-height:0}
 html[data-look=cosmos] body #app #page-recordings>.wbar{margin:0!important;padding:18px 20px 12px!important;border-radius:22px 22px 0 0!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;border-bottom:0!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center}
 html[data-look=cosmos] body #app #page-recordings>.wcard.fill{margin:0!important;border-radius:0 0 22px 22px!important;border-top:0!important;padding:0 20px 14px!important;flex:1;min-height:0}
 html[data-look=cosmos] body #app #page-recordings>.wcard.fill>.ob-tag{display:none!important}
 html[data-look=cosmos][data-light] body #app #page-recordings>.wbar{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(240,240,244,.96))!important;border-color:rgba(255,255,255,.75)!important}
 html[data-look=cosmos] body #app #page-recordings>.wbar :is(input.f,select.f){height:36px!important;border-radius:18px!important;font-size:13.5px!important;padding:0 14px!important;background:var(--sp-f2)!important;color:var(--sp-t)!important;border:1px solid var(--sp-line)!important;width:auto!important;min-width:0!important;flex:none}
 html[data-look=cosmos] body #app #page-recordings>.wbar #rQ{flex:1 1 220px!important;border-radius:11px!important;max-width:none!important}
 html[data-look=cosmos] body #app #page-recordings>.wbar .chk{height:36px!important;padding:0 14px!important;border-radius:18px!important;font-size:13.5px!important;display:inline-flex!important;align-items:center;gap:7px;background:var(--sp-f2)!important;color:var(--sp-t)!important;border:1px solid var(--sp-line)!important}
 html[data-look=cosmos] body #app #page-recordings>.wbar .chk:has(input:checked){background:var(--sp-btn)!important;color:var(--sp-btnT)!important}
 html[data-look=cosmos] body #app #page-recordings .tbl{border-collapse:collapse!important;border-spacing:0!important;width:100%}
 html[data-look=cosmos] body #app #page-recordings .tbl thead th{font-size:13px!important;font-weight:500!important;color:var(--sp-s)!important;padding:8px 10px!important;border-bottom:1px solid var(--sp-line)!important;background:none!important}
 html[data-look=cosmos] body #app #page-recordings .tbl tbody tr{background:none!important;box-shadow:none!important;border:0!important;border-bottom:1px solid var(--sp-line)!important;border-radius:0!important}
 html[data-look=cosmos] body #app #page-recordings .tbl tbody tr:hover{background:var(--sp-f1)!important}
 html[data-look=cosmos] body #app #page-recordings .tbl tbody td{background:none!important;box-shadow:none!important;border:0!important;padding:12px 10px!important;border-radius:0!important;font-size:14px!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-recordings .tbl tbody td.num{font-family:Inter,sans-serif!important}
 html[data-look=cosmos] body #app #page-recordings .tbl .stg{font-weight:700!important;background:var(--sp-f2)!important;color:var(--sp-t)!important;border:0!important}
 html[data-look=cosmos] body #app #page-recordings .tbl .sum{font-size:13.5px!important;color:var(--sp-s)!important}
}

/* ================= reports, like the canvas "דוחות": the period pill beside the tabs, numbers in one strip, panels in grey-white ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-reports.on{position:relative!important;overflow:visible!important;display:flex!important;flex-direction:column!important;gap:16px!important;min-height:0}
 html[data-look=cosmos] body #app #page-reports>.wbar{position:absolute!important;top:-56px;left:0;right:0;height:44px;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;z-index:5}
 html[data-look=cosmos] body #app #page-reports>.wbar>*{pointer-events:auto}
 html[data-look=cosmos] body #app #page-reports>.wbar #rpRange{margin-right:var(--tabsw,230px)!important;height:44px!important;box-sizing:border-box;padding:4px!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;display:flex!important;gap:2px!important}
 html[data-look=cosmos] body #app #page-reports>.wbar #rpRange .sg2{height:34px!important;width:auto!important;padding:0 14px!important;border-radius:17px!important;font-size:13.5px!important;color:#fff!important;background:none!important;border:0!important;box-shadow:none!important;white-space:nowrap}
 html[data-look=cosmos] body #app #page-reports>.wbar #rpRange .sg2.on{background:var(--sp-pbtn)!important;color:#000!important;font-weight:600!important;box-shadow:var(--sp-pbtn-sh)!important}
 html[data-look=cosmos] body #app #page-reports>.wbar #rpAgent{margin-right:auto!important;height:40px!important;border-radius:14px!important;background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important}
 html[data-look=cosmos] body #app #page-reports #rpK{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0!important;padding:16px 0!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);margin:0!important;flex:none}
 html[data-look=cosmos][data-light] body #app #page-reports #rpK{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
 html[data-look=cosmos] body #app #page-reports #rpK .ktile{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 22px!important;margin:0!important;border-right:1px solid var(--sp-line)!important;display:flex!important;flex-direction:column!important;gap:4px!important;min-height:0!important}
 html[data-look=cosmos] body #app #page-reports #rpK .ktile:first-child{border-right:0!important}
 html[data-look=cosmos] body #app #page-reports #rpK .ktile::before,html[data-look=cosmos] body #app #page-reports #rpK .ktile::after,html[data-look=cosmos] body #app #page-reports #rpK .ktile .ob-g{display:none!important}
 html[data-look=cosmos] body #app #page-reports #rpK .ktile span{font-size:13.5px!important;color:var(--sp-s)!important}
 html[data-look=cosmos] body #app #page-reports #rpK .ktile b{font-family:Inter,sans-serif!important;font-size:30px!important;font-weight:200!important;color:var(--sp-t)!important;line-height:1.1!important}
 html[data-look=cosmos] body #app #page-reports #rpK .ktile small{font-size:13px!important;color:var(--sp-s)!important;position:static!important}
 html[data-look=cosmos] body #app #page-reports .rgrid{flex:1;min-height:0;gap:18px!important;margin:0!important}
 html[data-look=cosmos] body #app #page-reports .rgrid>.wcard{border-radius:22px!important;padding:20px 22px!important;min-height:0}
 html[data-look=cosmos] body #app #page-reports .rgrid>.wcard>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-reports #rpChart rect.bar{fill:#8E8E93!important}
 html[data-look=cosmos] body #app #page-reports #rpChart rect.bar2{fill:#F5F5F7!important}
 html[data-look=cosmos][data-light] body #app #page-reports #rpChart rect.bar2{fill:#1D1D1F!important}
 html[data-look=cosmos] body #app #page-reports #rpHours>i{background:var(--sp-t)!important;border-radius:4px}
 html[data-look=cosmos] body #app #page-reports .tbl{border-collapse:collapse!important}
 html[data-look=cosmos] body #app #page-reports .tbl tbody tr{background:none!important;box-shadow:none!important;border-bottom:1px solid var(--sp-line)!important;border-radius:0!important}
 html[data-look=cosmos] body #app #page-reports .tbl tbody td{background:none!important;border-radius:0!important}
}
html[data-look=cosmos] body #app #page-reports .rgrid .ch :is(i,.dot,span>i){filter:grayscale(1) brightness(1.6)}

/* ================= lead distribution, like the canvas "חלוקת לידים": actions beside the tabs, numbers strip, requests | the teams | the pool ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-flow.on{position:relative!important;overflow:visible!important;display:grid!important;grid-template-columns:380px minmax(0,1fr) 380px!important;grid-template-rows:auto auto minmax(0,1fr)!important;gap:16px 18px!important;min-height:0;height:100%}
 html[data-look=cosmos] body #app #page-flow>.wbar{position:absolute!important;top:-56px;left:0;right:0;height:44px;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;z-index:5}
 html[data-look=cosmos] body #app #page-flow>.wbar>*{pointer-events:auto}
 html[data-look=cosmos] body #app #page-flow>.wbar>.sb{margin-right:var(--tabsw,230px)!important;font-size:14px!important;color:#D1D1D6!important}
 html[data-look=cosmos] body #app #page-flow>.wbar .btn{height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;background:var(--sp-gbtn)!important;color:#F5F5F7!important;border:1px solid rgba(255,255,255,.15)!important;box-shadow:var(--sp-gbtn-sh)!important}
 html[data-look=cosmos] body #app #page-flow>.fltiles{grid-column:1/-1;grid-row:1;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:0!important;padding:16px 0!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;margin:0!important}
 html[data-look=cosmos][data-light] body #app #page-flow>.fltiles{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
 html[data-look=cosmos] body #app #page-flow>.fltiles .ktile{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:4px 22px!important;margin:0!important;border-right:1px solid var(--sp-line)!important;min-height:0!important}
 html[data-look=cosmos] body #app #page-flow>.fltiles .ktile:first-child{border-right:0!important}
 html[data-look=cosmos] body #app #page-flow>.fltiles .ktile::before,html[data-look=cosmos] body #app #page-flow>.fltiles .ktile::after{display:none!important}
 html[data-look=cosmos] body #app #page-flow>.fltiles .ktile span,html[data-look=cosmos] body #app #page-flow>.fltiles .ktile small{font-size:13.5px!important;color:var(--sp-s)!important}
 html[data-look=cosmos] body #app #page-flow>.fltiles .ktile b{font-family:Inter,sans-serif!important;font-size:30px!important;font-weight:200!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-flow>.fltiles .ktile b.bad{color:var(--sp-hot)!important}
 html[data-look=cosmos] body #app #page-flow>.flgrid{display:contents!important}
 html[data-look=cosmos] body #app #page-flow>.fasks{grid-column:1;grid-row:2}
 html[data-look=cosmos] body #app #page-flow>.wcard:last-child{grid-column:1;grid-row:3}
 html[data-look=cosmos] body #app #page-flow .fgroups{grid-column:2;grid-row:2/4;min-height:0;overflow:auto;display:flex!important;flex-direction:column!important;gap:14px!important;padding:0 2px!important}
 html[data-look=cosmos] body #app #page-flow .flside{grid-column:3;grid-row:2;min-height:0;overflow:auto;display:flex!important;flex-direction:column!important;gap:14px!important}
 html[data-look=cosmos] body #app #page-flow>.wcard:nth-last-child(2){grid-column:3;grid-row:3}
 html[data-look=cosmos] body #app #page-flow>.wcard,html[data-look=cosmos] body #app #page-flow .flside>.wcard,html[data-look=cosmos] body #app #page-flow .fgroups>.wcard{margin:0!important;min-height:0;overflow:auto;border-radius:22px!important;padding:18px 20px!important}
 html[data-look=cosmos] body #app #page-flow :is(.wcard)>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-flow .tbl tbody tr{background:none!important;box-shadow:none!important;border-bottom:1px solid var(--sp-line)!important;border-radius:0!important}
 html[data-look=cosmos] body #app #page-flow .tbl tbody td{background:none!important;border-radius:0!important}
}
@media (min-width:1101px){
 /* the teams: rep cards two by two, like the canvas */
 html[data-look=cosmos] body #app #page-flow .fgroups>.fg{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;align-content:start;background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;overflow:visible!important}
 html[data-look=cosmos] body #app #page-flow .fgroups>.fg>.ch{grid-column:1/-1;margin:0!important;padding:12px 16px!important;border-radius:16px!important;background:rgba(8,8,10,.78)!important;border:1px solid rgba(255,255,255,.12)!important;color:#F5F5F7!important}
 html[data-look=cosmos] body #app #page-flow .fgroups>.fg>.ch :is(.t,.sb){color:#F5F5F7!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp{display:flex!important;flex-direction:column!important;gap:10px!important;padding:16px 18px!important;border-radius:22px!important;background:rgba(10,10,12,.74)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);margin:0!important;box-shadow:none!important;min-width:0}
 html[data-look=cosmos][data-light] body #app #page-flow .fgroups .fp{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp::before{display:none!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .fp-who b{font-size:16px!important;font-weight:600!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .fp-fuel{display:flex!important;flex-direction:column!important;gap:6px;width:100%!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .fp-fuel .gauge{width:100%!important;height:4px!important;border-radius:2px!important;background:var(--sp-trk)!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .fp-fuel .gauge i{background:var(--sp-t)!important;border-radius:2px}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .fp-num{display:flex!important;flex-wrap:wrap;gap:4px 12px!important;font-size:13px!important;color:var(--sp-s)!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .fp-num span{display:inline-flex!important;flex-direction:row-reverse!important;gap:4px;align-items:baseline}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .fp-num b{font-family:Inter,sans-serif;font-size:13.5px!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp .acts{display:flex!important;gap:8px!important;justify-content:flex-start}
 html[data-look=cosmos] body #app #page-flow .fgroups .fp.low{box-shadow:inset 3px 0 0 var(--sp-hot)!important}
}
@media (min-width:1101px){html[data-look=cosmos] body #app #page-flow .fgroups>.fg{flex:none!important}}
html[data-look=cosmos] #app>nav>[hidden],html[data-look=cosmos] #app>nav>.nv[hidden]{display:none!important}

/* ================= my order (rep), like the canvas "הסדר שלי": groups as cards in two columns, the "leads left" card on the left ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-myday.on{position:relative!important;overflow:visible!important;display:grid!important;grid-template-columns:380px minmax(0,1fr)!important;grid-template-rows:auto minmax(0,1fr)!important;gap:16px 18px!important;min-height:0;align-content:start}
 html[data-look=cosmos] body #app #page-myday>.wbar{position:absolute!important;top:-56px;left:0;right:0;height:44px;display:flex!important;align-items:center!important;gap:10px!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;pointer-events:none;z-index:5}
 html[data-look=cosmos] body #app #page-myday>.wbar>*{pointer-events:auto}
 html[data-look=cosmos] body #app #page-myday>.wbar .mdsum{margin-right:var(--tabsw,230px)!important;flex:1;font-size:14px!important;color:#D1D1D6!important}
 html[data-look=cosmos] body #app #page-myday>.wbar .mdsum b{color:#F5F5F7!important}
 html[data-look=cosmos] body #app #page-myday>.wbar #mdGo{height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important;font-weight:600!important}
 html[data-look=cosmos] body #app #page-myday>.stk{grid-column:1;grid-row:1;margin:0!important;border-radius:22px!important;padding:18px 20px!important;display:flex!important;flex-direction:column!important;gap:12px!important;height:auto!important}
 html[data-look=cosmos] body #app #page-myday>.stk .stk-m{width:100%!important}
 html[data-look=cosmos] body #app #page-myday>.stk .gauge{height:4px!important;border-radius:2px!important;background:var(--sp-trk)!important}
 html[data-look=cosmos] body #app #page-myday>.stk .gauge i{background:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-myday>.mdgrid{grid-column:2;grid-row:1/3;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;align-content:start;min-height:0;overflow:auto;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;margin:0!important}
 html[data-look=cosmos] body #app #page-myday>.mdgrid>.mdsec{margin:0!important;border-radius:22px!important;padding:16px 18px!important;display:flex!important;flex-direction:column!important;gap:6px!important;min-width:0;height:auto!important}
 html[data-look=cosmos] body #app #page-myday>.mdgrid>.mdsec>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-myday>.mdgrid .mdis{display:flex!important;flex-direction:column!important;gap:0!important;width:100%!important}
 html[data-look=cosmos] body #app #page-myday>.mdgrid .mdis>*{width:100%!important;max-width:none!important;border-bottom:1px solid var(--sp-line);padding:8px 0!important;margin:0!important;background:none!important;box-shadow:none!important;border-radius:0!important}
 html[data-look=cosmos] body #app #page-myday>.mdgrid .mdis>*:last-child{border-bottom:0}
}
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-myday>.mdgrid{align-items:start!important}
 /* rep home, like the canvas "בית · נציג": three full-height columns, today | the next call | my leads */
 html[data-look=cosmos] body #app #page-home .rhome{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr)!important;gap:18px!important;width:100%!important;max-width:none!important;height:100%!important;margin:0!important;padding:0!important;align-items:stretch!important}
 html[data-look=cosmos] body #app #page-home .rhome>.rh-day{grid-column:1;grid-row:1}
 html[data-look=cosmos] body #app #page-home .rhome>.rh-mid{grid-column:2;grid-row:1;display:flex!important;flex-direction:column!important;gap:18px!important;height:auto!important}
 html[data-look=cosmos] body #app #page-home .rhome>.rh-leads{grid-column:3;grid-row:1}
 html[data-look=cosmos] body #app #page-home .rhome :is(.rh-day,.rh-leads,.rh-next,.rh-today){margin:0!important;border-radius:22px!important;padding:20px 22px!important;height:auto!important;max-height:none!important;width:auto!important;min-height:0;overflow:auto}
 html[data-look=cosmos] body #app #page-home .rhome .rh-next{flex:1}
 html[data-look=cosmos] body #app #page-home .rhome .ob-tag{display:none!important}
}
@media (min-width:1101px){html[data-look=cosmos] body #app #page-myday>.mdgrid>.mdsec:not(:has(.mdis)){align-self:start}}

/* ================= settings sub-tabs, like the canvas: 2×2 cards full height, the save button beside the tabs, clean fields ================= */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-settings.on{position:relative!important;display:flex!important;flex-direction:column!important;min-height:0}
 html[data-look=cosmos] body #app #page-settings #stBody:has(.stgrid){flex:1;min-height:0;overflow:auto!important;display:flex!important;flex-direction:column!important}
 html[data-look=cosmos] body #app #page-settings .stgrid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin:0!important}
 html[data-look=cosmos] body #app #page-settings .stgrid>.stsec{margin:0!important;border-radius:22px!important;padding:20px 22px!important;display:flex!important;flex-direction:column!important;gap:12px!important;min-height:0}
 html[data-look=cosmos] body #app #page-settings .stgrid>.stsec>.ob-tag{display:none!important}
 html[data-look=cosmos] body #app #page-settings .stgrid>.stsec :is(h3,.ch .t){font-size:16px!important;font-weight:600!important;color:var(--sp-t)!important}
 html[data-look=cosmos] body #app #page-settings .stgrid>.stsec .sb{font-size:13.5px!important;color:var(--sp-s)!important}
 html[data-look=cosmos] body #app #page-settings .stgrid>.stsec :is(input.f,select.f,textarea.f){height:40px;border-radius:11px!important;background:var(--sp-f2)!important;border:1px solid var(--sp-line)!important;color:var(--sp-t)!important;font-size:14px!important;padding:0 12px!important}
 html[data-look=cosmos] body #app #page-settings .stgrid>.stsec textarea.f{height:auto;min-height:80px;padding:10px 12px!important}
 html[data-look=cosmos] body #app #page-settings .stgrid>.stsec .chk{display:flex!important;align-items:center;gap:10px;font-size:14px!important;color:var(--sp-t)!important;background:none!important;border:0!important;padding:0!important;height:auto!important}
 html[data-look=cosmos] body #app #page-settings .stsave{position:absolute!important;top:0;left:0;margin:0!important;padding:0!important;z-index:5}
 html[data-look=cosmos] body #app #page-settings .stsave .btn{height:40px!important;padding:0 17px!important;border-radius:14px!important;font-size:13.5px!important;background:var(--sp-pbtn)!important;color:#000!important;border:0!important;box-shadow:var(--sp-pbtn-sh)!important;font-weight:600!important}
}

/* "what needs you" (Gal 09.11: dark icon on a dark ball, cannot see it): each item gets a clear coloured ball and a white icon, in both modes */
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad{width:40px!important;height:40px!important;border:0!important}
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad.blue{background:radial-gradient(circle at 34% 26%,#8EC5FF 0%,#0A84FF 42%,#0050B3 100%)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.6),inset 0 -6px 12px rgba(0,0,0,.25),0 6px 16px rgba(10,132,255,.35)!important}
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad.gold{background:radial-gradient(circle at 34% 26%,#FFE7B0 0%,#FFB020 45%,#B86E00 100%)!important}
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad.red{background:radial-gradient(circle at 34% 26%,#FFB4AE 0%,#FF453A 42%,#A3241A 100%)!important}
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad.green{background:radial-gradient(circle at 34% 26%,#B8FFD0 0%,#30D158 42%,#1A7F3A 100%)!important}
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad.orange{background:radial-gradient(circle at 34% 26%,#FFD9B0 0%,#FF8A1F 45%,#B04F00 100%)!important}
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad::before,html[data-look=cosmos] body #app #page-home .needs .ai2 .ad::after,html[data-look=cosmos] body #app #page-home .needs .ai2 .ad .mbr{display:none!important}
html[data-look=cosmos] body #app #page-home .needs .ai2 .ad .oi{display:inline-block!important;width:18px!important;height:18px!important;background:#fff!important;color:#fff!important;opacity:1!important;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))!important}
/* the text never hides: it wraps, and the button stays beside it */
html[data-look=cosmos] body #app #page-home .needs .ai2 .at{flex:1;min-width:0}
html[data-look=cosmos] body #app #page-home .needs .ai2 .at :is(b,.sb){white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:block}
html[data-look=cosmos] body #app #page-home .needs .ai2>button{flex:none}
/* the dial's "clear digit" in light mode: light on the dark dial */
html[data-look=cosmos][data-light] #page-dial .numrow #bClear{color:#F5F5F7!important}

/* the dock icons, big and white like the canvas (20–22px), in every orb */
html[data-look=cosmos] body #app#app #page-dial .dialrow>.cb .oi,html[data-look=cosmos] body #app#app #page-dial .dialrow>.nocallbtn .oi{display:inline-block!important;width:22px!important;height:22px!important;font-size:0!important;background:#F5F5F7!important;color:#F5F5F7!important;opacity:1!important;position:relative;z-index:2;margin:0!important;filter:none!important}
html[data-look=cosmos] body #app#app #page-dial .dialrow>.cb#bMute .oi{background:#FF9A86!important}
html[data-look=cosmos] body #app#app #page-dial .dialrow>.cb#bHold .oi{background:#FFD27A!important}
html[data-look=cosmos] body #app#app #page-dial .dialrow>.callnow .oi{width:32px!important;height:32px!important}
/* light mode, like the canvas: a white dome with light orbs and dark icons */
@media (min-width:1101px){
 html[data-look=cosmos][data-light] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .dialrow{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border-color:rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
}
html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>:is(.cb,.nocallbtn){background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important;box-shadow:inset 0 1px 1px #FFFFFF,inset 0 -6px 12px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.18)!important}
html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>:is(.cb,.nocallbtn) .oi{background:#1D1D1F!important}
html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>.cb#bMute .oi{background:#C0321F!important}
html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>.cb#bHold .oi{background:#9A5A00!important}
html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>:is(.cb,.nocallbtn)>span,html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>.nocallbtn::after,html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>.callnow::after{color:#0B0B0C!important}
html[data-look=cosmos][data-light] body #app#app #page-dial .dialrow>.cb::before{border-color:rgba(0,0,0,.08)!important;border-top-color:rgba(0,0,0,.35)!important;border-left-color:rgba(0,0,0,.18)!important}
/* the call history in the customer card: quiet cards with a dot, like the canvas timeline */
html[data-look=cosmos] body #app #cust .hist{font-size:13px!important;font-weight:600!important;color:var(--sp-s)!important;margin:12px 0 6px!important;background:none!important}
html[data-look=cosmos] body #app #cust .tl2{position:relative;padding-right:26px!important;display:flex!important;flex-direction:column!important;gap:7px!important}
html[data-look=cosmos] body #app #cust .tl2::before{content:"";position:absolute;right:8px;top:14px;bottom:14px;width:1px;background:var(--sp-f3)}
html[data-look=cosmos] body #app #cust .tli2{position:relative;display:block!important;padding:9px 12px!important;border-radius:12px!important;background:var(--sp-f1)!important;border:1px solid var(--sp-line)!important;box-shadow:none!important;margin:0!important}
html[data-look=cosmos] body #app #cust .tli2>.ic{position:absolute!important;right:-23px!important;left:auto!important;top:14px!important;width:10px!important;height:10px!important;min-width:0!important;border-radius:50%!important;background:var(--sp-m)!important;box-shadow:none!important;padding:0!important;margin:0!important}
html[data-look=cosmos] body #app #cust .tli2>.ic>*{display:none!important}
html[data-look=cosmos] body #app #cust .tli2.ai>.ic,html[data-look=cosmos] body #app #cust .tli2:has([data-i=phone])>.ic{background:#30D158!important;box-shadow:0 0 0 3px rgba(48,209,88,.22)!important}
html[data-look=cosmos] body #app #cust .tli2:has([data-i=calendar])>.ic{background:#0A84FF!important;box-shadow:0 0 0 3px rgba(10,132,255,.25)!important}
html[data-look=cosmos] body #app #cust .tli2 .bd{margin:0!important;padding:0!important;background:none!important;border:0!important}
html[data-look=cosmos] body #app #cust .tli2 .hd{display:flex!important;align-items:center!important;gap:8px!important}
html[data-look=cosmos] body #app #cust .tli2 .hd b{font-size:14px!important;font-weight:600!important;color:var(--sp-t)!important;flex:1}
html[data-look=cosmos] body #app #cust .tli2 .hd time{font-size:13px!important;color:var(--sp-s)!important}
html[data-look=cosmos] body #app #cust .tli2 .tx,html[data-look=cosmos] body #app #cust .tli2 .sum2{font-size:13.5px!important;line-height:1.45!important;color:var(--sp-s)!important}
/* the queue in light mode: light balls like the canvas */
html[data-look=cosmos][data-light] body #app #page-dial #queue .q .av{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important;color:#1D1D1F!important}
html[data-look=cosmos][data-light] body #app #page-dial #queue .q .av .mbr{display:none!important}
html[data-look=cosmos][data-light] body #app #page-dial #queue .q .av::after{color:#1D1D1F!important;text-shadow:none!important}

/* ===== the last navy from the old design (Gal 09.11: "the card is still blue"): every panel is the canvas graphite, in dark mode ===== */
html[data-look=cosmos]:not([data-light]) body #app #page-dial .col.l>.card,html[data-look=cosmos]:not([data-light]) body #app #page-dial .col.r>.card{background:rgba(10,10,12,.74)!important;background-image:none!important;border:1px solid rgba(255,255,255,.12)!important;box-shadow:none!important;backdrop-filter:blur(22px) saturate(140%)!important;-webkit-backdrop-filter:blur(22px) saturate(140%)!important}
html[data-look=cosmos]:not([data-light]) body #app #page-dial .sg.dk,html[data-look=cosmos]:not([data-light]) body #app #page-dial .card.actions .sg{background:rgba(255,255,255,.06)!important;background-image:none!important;border:1px solid rgba(255,255,255,.12)!important}
html[data-look=cosmos]:not([data-light]) body #app #page-ai :is(.aq.next,.dbulk){background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.14)!important}
html[data-look=cosmos]:not([data-light]) body #app #page-ai .aqh{background:rgba(255,255,255,.12)!important;color:#F5F5F7!important}
html[data-look=cosmos] body #app #page-settings .srch .ki{background:var(--sp-f2)!important;color:var(--sp-t)!important}
/* light mode leftovers: the same neutral greys as the canvas ".lit" */
html[data-look=cosmos][data-light] body #app #page-home .avsvg.botm{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important;color:#1D1D1F!important}
html[data-look=cosmos][data-light] body #app #page-leads .lav{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important}
html[data-look=cosmos][data-light] body #app #page-leads .lav::after{color:#1D1D1F!important}
html[data-look=cosmos] body #app #page-campaigns .sico{background:radial-gradient(circle at 34% 26%,#7C7C82 0%,#3A3A3D 38%,#141416 78%,#050506 100%)!important;color:#F5F5F7!important}
html[data-look=cosmos][data-light] body #app #page-campaigns .sico{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important;color:#1D1D1F!important}
html[data-look=cosmos][data-light] body #app #page-ai :is(.aq.next,.dbulk){background:rgba(0,0,0,.05)!important;border-color:rgba(0,0,0,.1)!important}
html[data-look=cosmos][data-light] body #app #page-ai :is(.aqh,.aqav){background:rgba(0,0,0,.08)!important;color:#1D1D1F!important}
html[data-look=cosmos] body #app #page-settings .src .srch .ki,html[data-look=cosmos] body #app #page-settings .srch .ki.has-oi{background:var(--sp-f2)!important;background-image:none!important;box-shadow:none!important}
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions{max-height:none!important;overflow:visible!important;padding:12px 14px!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions #pinned{max-height:96px;overflow:auto}
}
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions #pinned{max-height:none!important;overflow:visible!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions:has(#pinned:not(:empty)) #novaFeed{display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions .sg{margin:6px 0 0!important;padding:10px 14px!important;border-radius:14px!important;box-shadow:none!important}
 html[data-look=cosmos][data-light] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions{background:linear-gradient(165deg,rgba(250,250,252,.97),rgba(232,233,238,.93))!important;border:1px solid rgba(255,255,255,.75)!important;box-shadow:0 12px 34px rgba(0,0,0,.28)!important}
 html[data-look=cosmos][data-light] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions .sg{background:rgba(0,0,0,.04)!important;border:1px solid rgba(0,0,0,.08)!important}
 html[data-look=cosmos][data-light] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions :is(.t,b,.sb,div,span){color:#0B0B0C}
}

/* ===== one family of buttons (Gal 09.11: "something about all the buttons doesn't fit"), like the canvas:
   the contact row = four equal balls (the logos whole on white balls, transfer the same size);
   in light mode every ball is light with a dark mark, in dark mode every ball is graphite with a light mark ===== */
html[data-look=cosmos] #app #cust .cact svg,html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail) svg{width:54px!important;height:54px!important;border-radius:50%!important;box-sizing:border-box!important;margin:0!important}
html[data-look=cosmos] #app #cust .cact:is(.wa,.sms,.mail) svg{background-color:#FFFFFF!important;background-size:58% auto!important;background-position:center!important;background-repeat:no-repeat!important;box-shadow:inset 0 -4px 8px rgba(0,0,0,.06),0 6px 16px rgba(0,0,0,.28),0 0 0 1px rgba(255,255,255,.6)!important}
html[data-look=cosmos] #app #cust .cact.mail svg{background-size:56% auto!important}
html[data-look=cosmos] #app #cust .cact:not(.wa):not(.sms):not(.mail) svg{padding:16px!important;background:radial-gradient(circle at 34% 26%,#7C7C82 0%,#3A3A3D 38%,#141416 78%,#050506 100%)!important;color:#F5F5F7!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -6px 12px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.45)!important}
/* light mode: light balls everywhere on white cards */
html[data-look=cosmos][data-light] #app #cust .cact:not(.wa):not(.sms):not(.mail) svg,
html[data-look=cosmos][data-light] #app #cust #cAv,
html[data-look=cosmos][data-light] #app #cust #cEdit,
html[data-look=cosmos][data-light] #app #page-dial #qSort,
html[data-look=cosmos][data-light] #app #page-dial #queue .q .av{background:radial-gradient(circle at 34% 26%,#FFFFFF 0%,#F2F2F5 35%,#D3D3D9 75%,#B4B4BB 100%)!important;color:#1D1D1F!important;box-shadow:inset 0 1px 1px #FFFFFF,inset 0 -6px 12px rgba(0,0,0,.12),0 6px 14px rgba(0,0,0,.18)!important;text-shadow:none!important}
html[data-look=cosmos][data-light] #app #cust #cAv::after,html[data-look=cosmos][data-light] #app #cust #cAv *{color:#1D1D1F!important}
html[data-look=cosmos][data-light] #app :is(#cust #cAv,#cust #cEdit,#page-dial #qSort,#page-dial #queue .q .av) .mbr{display:none!important}
html[data-look=cosmos][data-light] #app :is(#cust #cEdit,#page-dial #qSort) .oi{background:#1D1D1F!important;color:#1D1D1F!important}
@media (min-width:1101px){html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c.sp-acts>.card.dialer{--dt:inherit!important;--d:inherit!important}}
/* SAN's actions above the dial, compact (Gal 09.11): only the top card shows (the badge already says how many wait), no swipe hints row */
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions #pinned.deck{height:auto!important;min-height:0!important;display:block!important;position:relative!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions #pinned.deck>.sg:not(:first-child){display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions #pinned.deck>.sg:first-child{position:relative!important;inset:auto!important;transform:none!important;width:auto!important;margin:8px 0 0!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions #pinned .dkfoot{display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.actions .sg>.sw{display:none!important}
}
/* the keypad, readable in both modes (Gal 09.11): dark glass with white digits, or white with dark digits in light mode */
html[data-look=cosmos] #page-dial .pad button{color:#F5F5F7!important;background:rgba(255,255,255,.1)!important;border:1px solid rgba(255,255,255,.08)!important;font-family:Inter,sans-serif!important;font-size:22px!important;font-weight:500!important;border-radius:16px!important}
html[data-look=cosmos] #page-dial .pad button small{color:#C7C7CC!important;font-size:11px!important;letter-spacing:1.5px}
html[data-look=cosmos] #page-dial .pad button:hover{background:rgba(255,255,255,.18)!important}
html[data-look=cosmos][data-light] #page-dial .pad{background:linear-gradient(165deg,rgba(250,250,252,.98),rgba(232,233,238,.96))!important;border:1px solid rgba(255,255,255,.8)!important;box-shadow:0 12px 34px rgba(0,0,0,.35)!important}
html[data-look=cosmos][data-light] #page-dial .pad button{color:#0B0B0C!important;background:rgba(0,0,0,.05)!important;border:1px solid rgba(0,0,0,.06)!important}
html[data-look=cosmos][data-light] #page-dial .pad button small{color:#4A4A4F!important}
html[data-look=cosmos][data-light] #page-dial .pad button:hover{background:rgba(0,0,0,.1)!important}

/* ===== the live AI call, readable (Gal 10.11: "I can't see what is written"): its own solid card, big clear buttons ===== */
html[data-look=cosmos] body #app #page-ai #rSide.has-call{background:rgba(12,14,20,.88)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:22px!important;padding:18px 22px!important;box-shadow:0 18px 50px rgba(0,0,0,.35)!important;color:#F5F5F7}
html[data-look=cosmos][data-light] body #app #page-ai #rSide.has-call{background:rgba(255,255,255,.95)!important;border-color:rgba(16,32,58,.10)!important;box-shadow:0 18px 50px rgba(16,32,58,.18)!important;color:#0B0D12}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rsh b{font-size:19px!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rsh small,html[data-look=cosmos] body #app #page-ai #rSide.has-call .rlbl,html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.sub small{color:#C7C7CC!important;opacity:1!important}
html[data-look=cosmos][data-light] body #app #page-ai #rSide.has-call .rsh small,html[data-look=cosmos][data-light] body #app #page-ai #rSide.has-call .rlbl,html[data-look=cosmos][data-light] body #app #page-ai #rSide.has-call .rtop.sub small{color:#4A5260!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rlbl{font-size:13px!important;font-weight:700!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtr .ln p{color:#F5F5F7!important;font-size:14.5px!important;line-height:1.5}
html[data-look=cosmos][data-light] body #app #page-ai #rSide.has-call .rtr .ln p{color:#0B0D12!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtr .ln .w{font-weight:700!important;color:#8FC4FF!important}
html[data-look=cosmos][data-light] body #app #page-ai #rSide.has-call .rtr .ln .w{color:#1B5FB4!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .lwait{color:#C7C7CC!important}
html[data-look=cosmos][data-light] body #app #page-ai #rSide.has-call .lwait{color:#4A5260!important}
/* the two actions: big, full colour, one word each line */
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r2{gap:12px!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r2 .ab.lbig{min-height:58px!important;font-size:17px!important;font-weight:800!important;border-radius:16px!important;border:0!important;box-shadow:none!important;opacity:1!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r2 .ab.lbig[data-act=listen]{background:#2F6FEB!important;color:#fff!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r2 .ab.lbig[data-act=listen].on{background:#1F9D6B!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r2 .ab.lbig.take{background:#20C08A!important;color:#06231A!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r1 .ab.lbig.torep{width:100%!important;min-height:52px!important;font-size:16px!important;font-weight:800!important;border-radius:16px!important;border:0!important;box-shadow:none!important;opacity:1!important;background:#E8ECF3!important;color:#10151F!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r1 .ab.lbig.torep[disabled]{background:rgba(127,127,127,.25)!important;color:inherit!important;opacity:.7!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtop.r2 .ab.lbig.take[disabled]{background:rgba(127,127,127,.25)!important;color:inherit!important;opacity:.7!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .racts.one{display:flex!important;justify-content:center!important;margin-top:6px}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .racts.one .ab.act2.bad{min-width:220px;min-height:48px;border-radius:14px!important;background:#E5484D!important;color:#fff!important;border:0!important}
html[data-look=cosmos] body #app #page-ai #rSide.has-call .racts.one .ab.act2.bad small{color:rgba(255,255,255,.85)!important}

/* ===== the calls that ended: a short list under the AI queue, not a long bar across the bottom (Gal 10.11) ===== */
@media (min-width:1101px){
html[data-look=cosmos] body #app #page-ai .agrid{grid-template-rows:auto minmax(0,1fr)!important}
html[data-look=cosmos] body #app #page-ai .agrid>.dqueue{grid-row:1!important;max-height:44vh}
html[data-look=cosmos] body #app #page-ai .agrid>.dright,html[data-look=cosmos] body #app #page-ai .agrid>.dpad{grid-row:1/3!important}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday{grid-column:1!important;grid-row:2!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;padding:16px 18px!important;min-height:0!important;overflow:hidden}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday #dpTodayH{font-size:15px!important}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .dtstat:empty{display:none}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .dtstat{font-size:12.5px}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday #dpToday{flex:1;min-height:0;max-height:none!important;overflow:auto}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .drow{flex-wrap:wrap;gap:4px 10px;padding:9px 0}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .drow .nm{flex:1 1 0;min-width:0}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .drow .dwhat{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .drow .dagain{order:9;flex-basis:100%;display:flex;gap:6px;padding-inline-start:40px}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .drow .dagain .btn{padding:4px 10px!important;font-size:12.5px!important;min-height:0!important}
html[data-look=cosmos] body #app #page-ai .agrid>.dtoday .rl0{font-size:13px}
}
/* the live call card never runs under what is below it: it takes the column's height and the transcript scrolls inside (Gal 10.11) */
@media (min-width:1101px){
 html[data-look=cosmos] body #app #page-ai .agrid>.dright:has(#rSide.has-call){justify-content:stretch!important;align-items:stretch!important;overflow:hidden;contain:size;height:100%!important;align-self:stretch!important}
 html[data-look=cosmos] body #app #page-ai #rSide.has-call{flex:1 1 auto!important;min-height:0!important;max-height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;gap:8px!important}
 html[data-look=cosmos] body #app #page-ai #rSide.has-call>*{flex:none}
 html[data-look=cosmos] body #app #page-ai #rSide.has-call .rtr{flex:1 1 auto!important;min-height:48px!important;max-height:none!important;overflow:auto!important}
}
/* SAN writes the opening line on the sound bar of the dialer, for a lead we never talked to (Gal 10.11) */
html[data-look=cosmos] body:not([data-st=wrap]) #app #page-dial .col.c>.card.nova>.sanopen.sanopen:not([hidden]),html[data-look=cosmos] body #app #page-dial .col.c>.card.nova>.sanopen.sanopen:not([hidden]){display:block!important;margin:2px 0 0!important;padding:0 10px!important;background:none!important;border:0!important;text-align:center;width:100%;box-sizing:border-box}
html[data-look=cosmos] body #app #page-dial .col.c>.card.nova>.sanopen small{color:#8FC4FF!important;font-size:12px!important;font-weight:700;opacity:1;margin-bottom:2px}
html[data-look=cosmos] body #app #page-dial .col.c>.card.nova>.sanopen .so-t{color:#F5F5F7!important;font-size:15px!important;font-weight:600;line-height:1.45}
html[data-look=cosmos] body #app #page-dial .card.nova:has(.sanopen:not([hidden])) .sp-wcap{display:none!important}
/* the opening line takes the place of the dots, so the sound bar keeps its height (the dialer still fits a laptop screen) */
html[data-look=cosmos] body #app #page-dial .card.nova:has(.sanopen:not([hidden])) .sp-wave{display:none!important}
html[data-look=cosmos] body #app #page-dial .col.c>.card.nova>.sanopen.sanopen:not([hidden]) small{display:inline!important;margin:0 0 0 6px!important}
html[data-look=cosmos] body #app #page-dial .col.c>.card.nova>.sanopen.sanopen:not([hidden]) .so-t{display:inline;font-size:14px!important;line-height:1.4!important}
html[data-look=cosmos] body #app #page-dial .col.c>.card.nova>.sanopen.sanopen:not([hidden]){display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:2.9em;line-height:1.4}

/* SAN's outcome guess after a call (Gal 10.11): marked like a pick, with a small SAN tag, until the rep confirms */
#page-dial .wrapbar .oc.sug{position:relative!important}
#page-dial .wrapbar .oc.sug::after{content:'✧ SAN'!important;display:block!important;position:absolute!important;top:5px!important;inset-inline-start:auto!important;inset-inline-end:7px!important;width:auto!important;height:auto!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:inherit!important;font-size:10px!important;font-weight:700;letter-spacing:.02em;opacity:.75;pointer-events:none}
#page-dial .wrapbar .ochint{margin:6px 0 0;font-size:12.5px;text-align:center;opacity:.8}
#page-dial .wrapbar .ochint[hidden]{display:none!important}
#page-dial .wrapbar .outcomes.slim .oc.sug::after{top:-8px!important;font-size:9px!important}
body[data-st=wrap] #page-dial .wrapbar .outcomes.slim .oc.sug::after{top:6px!important;font-size:10px!important}

/* keypad open = only the keypad: the call ring hides behind it, and comes back when dialing closes the keypad (Gal 10.11) */
html[data-look=cosmos] body #page-dial .card.dialer:not(.nopad) .sp-dial{visibility:hidden!important}
@media (min-width:1101px){
 /* keypad open: the typed number sits right above the keypad, so it is seen and can be pasted or copied (Gal 10.11) */
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .card.dialer:not(.nopad){--kt:max(0px,calc(var(--dt,34px) + var(--d)/2 - 178px))}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .card.dialer:not(.nopad) .numrow{top:var(--kt)!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c .card.dialer:not(.nopad) .pad{top:calc(var(--kt) + 62px)!important;transform:translateX(-50%)!important}
}
/* the "new number" line under the ring: readable on the dark sky */
html[data-look=cosmos]:not([data-light]) #page-dial .savebar .sbt{color:#F5F5F7!important}
/* the keypad is a phone keypad, always (Gal 10.11: "כמו בטלפון תמיד", the white glowing one was ugly):
   a dark panel with round dark keys and white digits, the same in dark and light mode */
html[data-look=cosmos] body #app #page-dial#page-dial .card.dialer .pad{background:rgba(12,12,14,.94)!important;border:1px solid rgba(255,255,255,.07)!important;box-shadow:0 18px 44px rgba(0,0,0,.5)!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;width:264px!important;padding:16px 18px!important;border-radius:32px!important;gap:12px 18px!important;justify-items:center}
html[data-look=cosmos] body #app #page-dial#page-dial .card.dialer .pad button{width:62px!important;height:62px!important;border-radius:50%!important;padding:0!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;line-height:1;background:#333336!important;border:0!important;box-shadow:none!important;color:#fff!important;font:400 26px/1 -apple-system,'SF Pro Display',Inter,sans-serif!important;transition:background .12s}
html[data-look=cosmos] body #app #page-dial#page-dial .card.dialer .pad button small{color:#fff!important;opacity:.85;font:600 9px/1 -apple-system,Inter,sans-serif!important;letter-spacing:1.6px!important;margin-top:3px}
html[data-look=cosmos] body #app #page-dial#page-dial .card.dialer .pad button:hover{background:#3d3d41!important}
html[data-look=cosmos] body #app #page-dial#page-dial .card.dialer .pad button:active{background:#6b6b70!important}

/* ===== the live transcript in the middle of the call screen (Gal 10.11: "in front of the eyes", not a tab nobody opens).
   Between the dial and the voice strip; the dial gets smaller during the call to make room. The answer to an objection
   is written right under the customer's sentence ===== */
#liveTr[hidden]{display:none!important}
html[data-look] body #app #liveTr.card.livetr,#liveTr{display:flex;flex-direction:column;gap:6px;width:min(576px,100%);box-sizing:border-box;margin:12px auto;padding:10px 14px 12px!important;border-radius:16px!important;
 background:rgba(8,8,10,.80)!important;border:1px solid rgba(255,255,255,.12)!important;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);box-shadow:0 14px 36px rgba(0,0,0,.35)!important;color:#F5F5F7;max-height:42vh;position:relative}
#liveTr .lth{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex:none}
#liveTr .lth .t{font-size:14px;font-weight:700;color:#F5F5F7;display:inline-flex;align-items:center;gap:7px}
#liveTr .lth .dot{width:8px;height:8px;border-radius:50%;background:#FF453A;box-shadow:0 0 0 3px rgba(255,69,58,.22)}
@media (prefers-reduced-motion:no-preference){#liveTr .lth .dot{animation:ltPulse 1.6s ease-in-out infinite}}
@keyframes ltPulse{50%{opacity:.35}}
#liveTr .lth .sb{font-size:12px;color:#AEAEB2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#liveTr .ltb{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:4px 2px 2px;scrollbar-width:thin;overscroll-behavior:contain}
#liveTr .ltm{max-width:82%;padding:7px 12px 8px;border-radius:14px;line-height:1.45;box-sizing:border-box}
#liveTr .ltm small{display:block;font-size:11.5px;font-weight:600;color:#AEAEB2;margin-bottom:1px}
#liveTr .ltm p{margin:0;font-size:15px;color:#F5F5F7;overflow-wrap:anywhere}
#liveTr .ltm.cu{align-self:flex-start;background:rgba(255,255,255,.10);border-start-start-radius:5px}
#liveTr .ltm.me{align-self:flex-end;background:rgba(10,132,255,.26);border-start-end-radius:5px}
#liveTr .ltm.me small{color:#9CCBFF}
#liveTr .ltm.sys{align-self:center;max-width:100%;background:none;padding:2px 8px;text-align:center}
#liveTr .ltm.sys p{font-size:12.5px;color:#AEAEB2}
#liveTr .ltm.w{align-self:center;background:rgba(255,214,10,.12);border:1px dashed rgba(255,214,10,.5)}
#liveTr .ltm.cu.hasobj{box-shadow:inset 0 0 0 1px rgba(255,159,10,.65)}
#liveTr .ltobj{align-self:flex-start;max-width:90%;margin:-3px 0 2px;padding:8px 12px 9px;border-radius:12px;background:rgba(255,159,10,.15);border:1px solid rgba(255,159,10,.45);border-inline-start:3px solid #FF9F0A;box-sizing:border-box}
#liveTr .ltobj b{display:block;font-size:12.5px;color:#FFB340;margin-bottom:2px}
#liveTr .ltobj p{margin:0;font-size:14.5px;line-height:1.45;color:#FFFFFF;font-weight:500;overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){#liveTr .ltobj{animation:ltIn .35s ease-out}}
@keyframes ltIn{from{opacity:0;transform:translateY(4px)}}
#liveTr .ltempty{margin:auto;padding:14px 8px;text-align:center;font-size:14px;color:#AEAEB2}
#liveTr .ltdown{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);padding:5px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(28,28,30,.95);color:#F5F5F7;font-size:12.5px;cursor:pointer}
#liveTr .ltdown[hidden]{display:none}
/* the old pop-up coach is the same answer twice: while the transcript is on screen, the answer lives only there */
html:has(#liveTr:not([hidden])) #coach{display:none!important}
@media (min-width:1101px){
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c.sp-ltr>.card.dialer{--d:clamp(220px,calc(100vh - 660px),280px)!important}
 /* SAN's actions wait for the end of the call anyway (its own note says so): during the call the middle belongs to the conversation */
 html[data-look=cosmos] body[data-st=call] #app#app #page-dial#page-dial .col.c.sp-ltr>.card.actions{display:none!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c>#liveTr{order:2;flex:1 1 0;min-height:130px;max-height:none;margin:14px 0 12px!important}
 html[data-look=cosmos] body:not([data-st=wrap]) #app#app #page-dial#page-dial .col.c.sp-ltr>.card.nova{margin-top:0!important}
}
/* the transcript after the call keeps the answer SAN gave under the customer's objection */
.msgs .m.tobj{background:rgba(255,159,10,.14)!important;border:1px solid rgba(255,159,10,.45)!important;border-inline-start:3px solid #FF9F0A!important;color:inherit}
.msgs .m.tobj small{color:#C77700!important;font-weight:700}
html:not([data-light]) .msgs .m.tobj small{color:#FFB340!important}
/* narrow screens: the call keeps its full size (dial, hang up, voice strip) and the transcript comes right after it, never on top of the buttons */
@media (max-width:1100px){
 html body #app #page-dial .col.c.sp-ltr>.card.dialer{flex:none!important;min-height:488px}
 html body #app #page-dial .col.c.sp-ltr>.card.nova{flex:none!important}
 html body #app #page-dial .col.c.sp-ltr{height:auto!important;max-height:none!important;overflow:visible!important}
 html body #app #page-dial .col.c>#liveTr{flex:none;height:min(46vh,380px);max-height:none;width:100%;margin:10px 0 0}
}
/* the transcript is only the words, written on the sky: no frame, no bubbles, no boxes (Gal 10.11: "רק המלל בלי מסגרת, רק הכתיבה").
   A soft shadow under the letters keeps them readable over the earth; the older lines fade out at the top */
html[data-look] body #app #liveTr.card.livetr,html body #liveTr{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:0!important;padding:0 6px!important}
#liveTr .lth,#liveTr .ltm,#liveTr .ltobj,#liveTr .ltempty{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.75)}
#liveTr .ltb{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px);padding-top:26px;gap:9px}
#liveTr .ltm,#liveTr .ltm.cu,#liveTr .ltm.me,#liveTr .ltm.w,#liveTr .ltm.cu.hasobj{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;max-width:88%}
#liveTr .ltm p{font-size:16px;line-height:1.5}
#liveTr .ltm.me p{color:#BFE0FF}
#liveTr .ltm.w p{color:#FFE27A}
#liveTr .ltobj{background:none!important;border:0!important;border-radius:0!important;padding:0!important;margin:-4px 0 2px!important;max-width:88%}
#liveTr .ltobj b{color:#FFB340;font-size:13px}
#liveTr .ltobj p{color:#FFD08A;font-size:15.5px;font-weight:600}
#liveTr .ltdown{background:none!important;border:0!important;padding:2px 6px!important;color:#F5F5F7;text-shadow:0 1px 3px #000;text-decoration:underline;text-underline-offset:3px}
#liveTr .ltdown{position:static!important;transform:none!important;align-self:center;flex:none;margin-top:2px;font-size:12.5px}

/* Phone (Gal 11.11 audit): the call centre was wider than the screen. The dome dock under the dial is built for a 500px row
   (five or six 76px slots), so the whole page, and the header with it, grew past the screen and its left side was cut off:
   the "תור" button, the language flag and "עוד" could not be reached. The page column never grows past the screen now,
   and on a phone the dock's slots are narrower so all the buttons fit, before a call and during one. */
@media (max-width:760px){
 html[data-look=cosmos] #app main{grid-template-columns:minmax(0,1fr)!important}
 html[data-look=cosmos] #app header .hl,html[data-look=cosmos] #app header .hkpis{flex-shrink:1!important;max-width:100%!important;min-width:0!important}   /* a row of header buttons wider than a small phone wraps instead of sticking out (a rep at 360px lost the language flag) */
 html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .col.c .dialrow{padding:0 2px 12px!important}
 html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow>:is(.cb,#bNoCall){flex:0 0 44px!important;width:44px!important;min-width:44px!important;height:44px!important;margin:0 5px 24px!important}
 html[data-orbit][data-look=cosmos][data-theme] body[data-st] #page-dial .dialrow .callnow{flex:0 0 68px!important;width:68px!important;height:68px!important;margin:0 6px 24px!important}
 html[data-look=cosmos] body #page-dial .dialrow .cb span,html[data-look=cosmos] body #page-dial .dialrow #bPad span{font-size:11px!important}
 /* the queue drawer: it kept the desktop offset (84px for the side bar), so closed it peeked 18px into the screen, and open it was cut
    by 26px on the left with its title and search hidden under the header. On a phone it opens over the call area, under the header, full width. */
 html[data-look=cosmos] #page-dial.grid{position:relative}
 html[data-look=cosmos] #page-dial.grid .col.r{position:absolute!important;inset:0!important;width:auto!important;z-index:30;transform:translateX(24px);opacity:0;visibility:hidden;pointer-events:none;transition:transform .22s,opacity .22s,visibility .22s}
 html[data-look=cosmos] body.qopen #page-dial.grid .col.r{transform:none;opacity:1;visibility:visible;pointer-events:auto}
 html[data-look=cosmos] #page-dial .card.dialer #bFloat{display:none!important}   /* the floating window is a desktop thing; here it sat outside the screen */
}
/* the connections diagram in "חיבור לידים" is a wide-screen decoration: its styles start at 1101px, so on a tablet or a phone its labels and
   icons were dropped loose over the text ("Zapier / Make" and "טיקטוק" on top of the first paragraph). Not drawn there. */
@media (max-width:1100px){html[data-look=cosmos] body #app #page-settings .sp-sorbit{display:none!important}}
/* the assistant's marble on a phone floats above the bottom bar (workspace.css). It lives inside the bar, and the bar is its own layer, so when the
   bar was scrolled sideways the marble slid with it, half out of the screen. assist.js reports the bar's scroll and the marble moves back by the same amount. */
@media (max-width:760px){html[data-look=cosmos] #app>nav>#saOrb{transform:translateX(var(--sa-nx,0px))!important}}

/* SAN's short debrief after a call (Gal 11.11): quiet, in SAN's panel under its action cards (it never pushes them down), readable on both lights */
#page-dial .debrief{margin:0 0 10px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#fff;text-align:start;font-size:14px;line-height:1.55}
#page-dial .debrief[hidden]{display:none!important}
#page-dial .debrief .db-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
#page-dial .debrief .db-h b{font-size:13px;letter-spacing:.2px;opacity:.85}
#page-dial .debrief .x{background:transparent;border:0;color:inherit;opacity:.7;cursor:pointer;width:24px;height:24px;border-radius:50%}
#page-dial .debrief p{margin:4px 0 0}
#page-dial .debrief .db-g span{color:#3ddc84}
#page-dial .debrief .db-i span{color:#f0a020}
#page-dial .debrief .db-m{margin-top:8px;font-weight:600}
html[data-light] #page-dial .debrief{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.1);color:#0B0B0C}
html[data-light] #page-dial .debrief .db-g span{color:#0a7a3d}
html[data-light] #page-dial .debrief .db-i span{color:#9a5a00}