:root{--blue:#1FA2E5;--pink:#F0587A;--purple:#7B5CF0;--orange:#F7A37B;--yellow:#F5B342;--green:#1BCB8F;--ink:#26263A;--txt:#4A4A5E;--mut:#9A9AAD;--line:#ECEDF3;--bg:#F7F8FB;--side:226px;--top:74px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Poppins,system-ui,sans-serif;color:var(--txt);background:#fff;font-size:12px;letter-spacing:.01em;-webkit-font-smoothing:antialiased;overflow:hidden}
button,input,textarea{font:inherit;color:inherit;border:0;background:none;outline:none}
ul,ol{list-style:none}
a{cursor:pointer}
.app{display:grid;grid-template-columns:var(--side) 1fr;grid-template-rows:var(--top) 1fr;height:100vh}

/* sidebar */
.side{grid-row:1/3;background:#fff;box-shadow:6px 0 24px rgba(30,40,90,.04);z-index:3;position:relative}
.logo{height:var(--top);display:flex;align-items:center;padding:12px 0 0 34px}
.logo img{width:160px;display:block}
#nav{padding-top:20px}
.it{display:flex;align-items:center;gap:13px;height:44px;padding:0 22px 0 26px;font-size:13.5px;color:var(--ink);position:relative;transition:background .25s}
.it::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.it.on{background:var(--bg)}.it.on::before{transform:none}
.it:hover{background:#FAFBFD}
.ic svg{width:22px;height:22px;display:block;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.car{margin-left:auto;width:7px;height:7px;border:solid #B5B6C6;border-width:0 1.4px 1.4px 0;transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s}
.grp.open .car{transform:rotate(225deg) translate(-2px,-2px)}
.grp{margin-top:8px}
.sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.sub>*{overflow:hidden}
.grp.open .sub{grid-template-rows:1fr}
.subin{padding:4px 0 8px 61px}
.subin a{display:block;font-size:11.5px;color:#8A8A9E;line-height:28px;transition:color .2s}
.subin a:hover,.subin a.on{color:var(--blue)}

/* header */
.top{grid-column:2;display:flex;align-items:center;padding:0 34px;background:#fff;box-shadow:0 8px 24px rgba(30,40,90,.03);z-index:2;position:relative}
.burger{width:22px;display:grid;gap:4.5px;margin-right:18px;margin-left:-2px}
.burger i{height:2px;background:var(--blue);border-radius:2px}.burger i:nth-child(2){width:70%}.burger i:nth-child(3){width:85%}
#title{font-size:14.5px;font-weight:400;color:var(--ink);letter-spacing:.02em}
.tright{margin-left:auto;display:flex;align-items:center;gap:18px}
.tright svg{width:22px;height:22px;fill:none;stroke:#9A9AAD;stroke-width:1.4}
.mail{position:relative}.mail b{position:absolute;top:-8px;right:-7px;background:var(--pink);color:#fff;font-size:8px;font-weight:500;width:14px;height:14px;border-radius:50%;display:grid;place-items:center}
.me{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-left:6px}
.uname{font-size:13px;color:var(--ink);margin-left:-6px}
.dd{width:0;height:0;border:4px solid transparent;border-top:5px solid var(--blue);margin:4px 0 0 -8px}

/* main */
main{grid-column:2;background:var(--bg);position:relative;overflow:hidden}
.view{position:absolute;inset:0;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s;scrollbar-width:none}
.view::-webkit-scrollbar{display:none}
.view.on{opacity:1;visibility:visible;transition:opacity .35s}
.card{background:#fff;border-radius:2px;box-shadow:0 4px 18px rgba(30,40,90,.035);padding:28px 24px;position:relative}
.ch{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ch h3{white-space:nowrap;font-size:15px;font-weight:400;color:var(--ink);letter-spacing:.03em}
.tools{display:flex;gap:6px;align-items:center}
.sel{position:relative;font-size:10.5px;color:var(--blue);border:1px solid #DCEFFB;height:24px;padding:0 22px 0 9px;display:flex;align-items:center;cursor:pointer;background:#fff;white-space:nowrap;transition:border-color .2s}
.sel::after{content:"";position:absolute;right:9px;top:10px;border:3.5px solid transparent;border-top:4.5px solid var(--blue)}
.sel:hover{border-color:#A9DBF7}
.sel ul{position:absolute;left:-1px;top:calc(100% + 4px);min-width:calc(100% + 2px);background:#fff;box-shadow:0 10px 30px rgba(30,40,90,.14);padding:5px 0;z-index:9;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.22s cubic-bezier(.2,.8,.2,1)}
.sel.open ul{opacity:1;transform:none;pointer-events:auto}
.sel li{padding:7px 12px;color:var(--txt);font-size:11px;transition:background .15s,color .15s}
.sel li:hover,.sel li.hl{background:#F1F8FE;color:var(--blue)}
.more{width:18px;height:4px;margin-left:8px;background:radial-gradient(circle,#C9CAD6 1.6px,transparent 2px) 0 0/6px 4px}
.srch{position:relative;border:1px solid var(--line);height:24px;display:flex;align-items:center;padding:0 24px 0 10px;font-size:10.5px}
.srch::after{content:"";position:absolute;right:8px;top:50%;width:7px;height:7px;border:1.3px solid #B5B6C6;border-radius:50%;transform:translateY(-60%)}
.srch input{width:110px}
.srch input::placeholder{color:#B5B6C6}

/* dashboard */
.dash{display:grid;grid-template-columns:repeat(3,1fr) 296px;gap:16px;padding:40px 34px 40px}
.latest{grid-column:1/4;height:335px}
.retailers{height:335px}
.mini{height:455px}
.top10{height:455px}
.rel{grid-column:1/4;height:307px}
.accts{height:307px}
.big{font-size:12px;color:var(--mut);display:flex;align-items:baseline;gap:6px;margin-top:4px}
.big b{font-size:20px;font-weight:400;color:var(--blue);letter-spacing:.02em}
.big>b+*{margin-left:0}
.big{color:var(--blue)}.big small{font-size:11.5px;color:var(--mut)}
.big em{font-style:normal;color:var(--green);font-size:11.5px;display:inline-flex;gap:4px;align-items:center;margin-left:8px}
.big em i{width:11px;height:11px;border-radius:50%;background:var(--green);position:relative;top:1px}
.big em i::after{content:"";position:absolute;left:3px;top:2px;border:2.5px solid transparent;border-bottom:3.5px solid #fff}
.lc{position:absolute;left:20px;right:30px;top:118px;bottom:26px}
svg.chart{width:100%;height:100%;overflow:visible;display:block}
.chart text{font-size:10px;fill:#A9AABA;font-family:Poppins}
.chart .grid line{stroke:#F0F1F5}
.chart .ln{fill:none;stroke-width:2;stroke-linecap:round}
.chart .hov line{stroke:#C9CAD6;stroke-dasharray:3 3}
.chart .dot{fill:#fff;stroke-width:1.6}
.tip{position:absolute;background:#fff;box-shadow:0 6px 24px rgba(30,40,90,.12);padding:9px 12px;font-size:9.5px;color:#9A9AAD;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .2s;line-height:1.55;z-index:4}
.tip.on{opacity:1}
.tip b{color:var(--ink);font-weight:500}
.tip i{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:5px;position:relative;top:-1px}
.rrow{margin-top:26px}
.rrow p{font-size:12px;color:var(--ink)}.rrow small{font-size:9.5px;color:var(--mut);margin-left:6px}
.rrow em{font-style:normal}.dn{color:var(--pink)}.upx{color:var(--green)}
.trk{height:3px;background:#EEF0F4;margin-top:10px;position:relative}
.trk i{position:absolute;left:0;top:0;height:3px;width:var(--w);background:var(--c);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
.trk i.b{z-index:-0}.trk i:not(.b){z-index:1}
.note{font-size:9.5px;color:var(--mut);margin-top:28px}
.donut{width:150px;height:150px;margin:30px auto 0}
.donut svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.donut circle{fill:none;transition:stroke-width .3s}
.leg{margin-top:26px;padding-left:14px}
.leg li{font-size:12px;color:var(--ink);margin-bottom:13px;position:relative;padding-left:12px}
.leg li::before{content:"";position:absolute;left:0;top:5px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.leg small{display:block;font-size:9.5px;color:var(--mut);margin:0 0 1px -12px;padding-left:12px}
.leg li::before{top:5px}
.hbars{margin:40px 4px 0;display:grid;gap:15px}
.hbars div{height:7px;background:#F1F2F6;position:relative}
.hbars i{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--c);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.hbars div:nth-child(2) i{transition-delay:.08s}.hbars div:nth-child(3) i{transition-delay:.16s}.hbars div:nth-child(4) i{transition-delay:.24s}.hbars div:nth-child(5) i{transition-delay:.32s}
.vbars{display:flex;gap:10px;height:125px;margin:34px 6px 0}
.ax{display:flex;flex-direction:column;justify-content:space-between;font-size:9.5px;color:#B0B1C0;text-align:right;width:44px}
.cols{flex:1;display:flex;align-items:flex-end;justify-content:space-around;padding:6px 8px 7px;background:repeating-linear-gradient(#F1F2F6 0 1px,transparent 1px 22.6px)}
.cols i{width:9px;height:var(--h);background:var(--c);border-radius:1px;transform-origin:bottom;transform:scaleY(var(--p,0));transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.cols i:nth-child(2){transition-delay:.08s}.cols i:nth-child(3){transition-delay:.16s}.cols i:nth-child(4){transition-delay:.24s}.cols i:nth-child(5){transition-delay:.32s}
#top10{margin-top:20px}
#top10 li{display:grid;grid-template-columns:24px 1fr;font-size:11.5px;color:var(--ink);line-height:1.3;margin-bottom:10px;opacity:0;transform:translateY(6px);transition:.5s cubic-bezier(.2,.8,.2,1)}
#top10.in li{opacity:1;transform:none}
#top10 b{font-weight:400;color:var(--blue);font-size:13px}
#top10 small{display:block;font-size:9px;color:var(--mut)}
#top10 li.hl{color:var(--blue)}
.covers{display:flex;gap:10px;margin-top:24px}
.cv{flex:1;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;padding-bottom:10px;background:#fff}
.cv img{width:100%;aspect-ratio:1.05;object-fit:cover;display:block}
.cv p{font-size:11px;color:var(--ink);margin:12px 6px 0}.cv small{display:block;font-size:9px;color:var(--mut)}
.cv:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(30,40,90,.12)}
.alist{margin-top:22px}
.alist li{display:flex;align-items:center;gap:12px;padding:10px 26px;margin:0 -26px;transition:background .25s,box-shadow .25s}
.alist li:hover,.alist li.hi{box-shadow:0 6px 20px rgba(30,40,90,.06)}
.alist img,.lt{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.lt{background:var(--c);color:#fff;display:grid;place-items:center;font-size:12px}
.alist p{flex:1;font-size:11.5px;color:var(--ink)}.alist small{display:block;font-size:10px;color:var(--mut)}
.alist em{font-style:normal;font-size:7.5px;letter-spacing:.06em;color:var(--green);background:#E9FAF3;padding:5px 9px}

/* split views */
.split{display:grid;grid-template-columns:240px 1fr}
.filters{background:var(--bg);padding:36px 28px 40px 30px}
.filters label{display:block;font-size:12px;color:var(--ink);margin:0 0 8px}
.inp{height:31px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;padding:0 10px;font-size:10.5px;color:var(--mut);margin-bottom:18px;position:relative}
.inp input{width:100%;font-size:11px;color:var(--ink)}
.inp.srch{height:31px}
.inp .ph{color:#9A9AAD}
.sel2::after{content:"";position:absolute;right:12px;top:10px;width:6px;height:6px;border:solid #C5C6D2;border-width:0 1.2px 1.2px 0;transform:rotate(45deg)}
.sel2.blue{color:var(--blue)}.sel2.blue::after{border-color:var(--blue)}
.sel2{cursor:pointer}
.sel2 ul{position:absolute;left:-1px;right:-1px;top:calc(100% + 3px);background:#fff;box-shadow:0 10px 30px rgba(30,40,90,.14);padding:5px 0;z-index:9;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.22s cubic-bezier(.2,.8,.2,1)}
.sel2.open ul{opacity:1;transform:none;pointer-events:auto}
.sel2 li{padding:8px 12px;color:var(--txt);font-size:11px}
.sel2 li:hover,.sel2 li.hl{background:#F1F8FE;color:var(--blue)}
.cal::after{content:"";position:absolute;right:11px;top:9px;width:9px;height:9px;border:1.3px solid var(--blue);border-top-width:3px;border-radius:1px}
.obtn{display:flex;align-items:center;width:100%;height:31px;border:1px solid var(--blue);background:#fff;color:var(--blue);font-size:10.5px;margin-bottom:9px;cursor:pointer;transition:background .2s}
.obtn b{width:29px;height:29px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:400;margin-right:12px;flex:none}
.obtn b svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.obtn:hover{background:#F1F8FE}
.chips{display:grid;grid-template-columns:1fr 1fr;gap:9px 6px;margin:32px 0 30px}
.chips button{height:29px;font-size:10.5px;border:1px solid var(--blue);color:var(--blue);background:#fff;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .15s}
.chips button.on{background:var(--c);border-color:var(--c);color:#fff}
.chips button:active{transform:scale(.96)}
.grid{padding:36px 40px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px 28px;align-content:start;background:#fff;min-height:100%}
.rc{position:relative;transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.rc .art{position:relative;aspect-ratio:1.05;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.02)}
.rc .art img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rc .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--st)}
.rc .noph{width:100%;height:100%;background:#F4F5F8;display:grid;place-items:center;text-align:center;font-size:10.5px;color:#B5B6C6;font-weight:500;letter-spacing:.06em;line-height:1.3}
.rc .menu{position:absolute;inset:0;background:rgba(240,88,122,.94);padding:18px 0 0 38px;color:#fff;font-size:11.5px;display:flex;flex-direction:column;gap:5px;opacity:0;transition:opacity .3s}
.rc .menu a{display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.rc .menu a svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.5}
.rc .menu a:hover{text-decoration:underline}
.rc:hover .menu{opacity:1}
.rc:hover .menu a{opacity:1;transform:none}
.rc:hover .menu a:nth-child(2){transition-delay:.04s}.rc:hover .menu a:nth-child(3){transition-delay:.08s}.rc:hover .menu a:nth-child(4){transition-delay:.12s}.rc:hover .menu a:nth-child(5){transition-delay:.16s}
.rc .meta{padding:13px 4px 14px;transition:background .3s,box-shadow .3s}
.rc:hover .meta{box-shadow:0 14px 26px rgba(30,40,90,.09)}
.rc:hover{z-index:2}
.rc .meta p{font-size:11.5px;color:var(--ink)}.rc .meta small{display:block;font-size:9.5px;color:var(--mut)}.rc .meta em{display:block;font-style:normal;font-size:9.5px;color:var(--blue);letter-spacing:.04em}
.rc.out{opacity:0;transform:scale(.94)}
.rc.gone{display:none}

/* promotions */
.pf{padding:30px 0 0}
.promo{width:168px;height:156px;object-fit:cover;display:block;margin:4px 0 30px 32px;box-shadow:0 8px 24px rgba(30,40,90,.08)}
.pbox{background:#fff;padding:16px 28px 26px 30px;margin-bottom:24px}
.pl{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#7A7A8E;padding:12px 28px 12px 30px}
.pbox .pl{padding:0 0 14px;color:var(--blue)}
.chev{width:6px;height:6px;border:solid #C5C6D2;border-width:1.3px 1.3px 0 0;transform:rotate(45deg)}
.pl.on .chev{border-color:var(--blue)}
.pmain{background:#fff}
.voted{display:flex;justify-content:space-between;padding:36px 120px 30px 48px;border-bottom:1px solid var(--line)}
.voted h3{font-size:15px;font-weight:400;color:var(--ink);letter-spacing:.03em;margin-bottom:20px}
.votes li{font-size:12px;color:var(--ink);margin-bottom:14px}
.votes .vb{display:flex;align-items:center;gap:8px;margin-top:5px}
.votes .vb i{height:2px;background:var(--c);width:var(--w);transform-origin:left;transform:scaleX(var(--p,0));transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.votes .vb small{font-size:9.5px;color:var(--mut);opacity:0;transition:opacity .5s .6s}
.votes.in .vb small{opacity:1}
.rating{position:relative;width:158px;margin-top:6px}
.rating .donut{margin:0;width:158px;height:158px}
.rv{position:absolute;left:0;top:0;width:158px;height:158px;display:grid;place-content:center;text-align:center}
.rv b{font-size:22px;font-weight:300;color:var(--ink)}.rv small{font-size:9.5px;color:var(--mut)}
.rleg{display:flex;justify-content:center;gap:8px;font-size:10px;color:var(--mut);margin-top:16px;align-items:center}
.rleg i{width:6px;height:6px;border-radius:50%;background:var(--c);margin-left:8px}
.fb{padding:0}
.fr{display:grid;grid-template-columns:52px 205px 185px 210px 1fr;align-items:center;padding:24px 36px 24px 40px;border-bottom:1px solid var(--line);position:relative;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.fr.in{opacity:1;transform:none}
.fr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transition:transform .3s}
.fr:hover{box-shadow:0 10px 30px rgba(30,40,90,.08);z-index:1}.fr:hover::before{transform:none}
.fr img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.fr small{display:block;font-size:9.5px;color:var(--mut)}
.fr p{font-size:11.5px;color:var(--ink)}.fr p span{color:var(--mut)}
.fr .q{font-size:10px;color:var(--mut);line-height:1.55;padding-right:10px}
.st{display:flex;justify-content:flex-end;gap:22px;text-align:center}
.st div{font-size:9.5px;color:var(--mut)}
.st i{display:block;width:13px;height:13px;border-radius:50%;margin:0 auto 3px;background:var(--c);position:relative}
.st i::after{content:"";position:absolute;left:4px;top:2.4px;width:3px;height:5.5px;border:solid #fff;border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}
.st i.x::after{left:3.3px;top:6px;width:6px;height:1.4px;border:0;background:#fff;transform:rotate(45deg);box-shadow:none}
.st i.x::before{content:"";position:absolute;left:3.3px;top:6px;width:6px;height:1.4px;background:#fff;transform:rotate(-45deg)}
.st .r b{display:block;font-size:12px;font-weight:500;color:var(--c);margin-bottom:1px}
#share.done{background:#EAFBF4;border-color:var(--green);color:#11A874}#share.done b{background:var(--green)}

/* daily sales */
.smain{background:#fff;padding:24px 0 30px}
.tabs{display:flex;gap:6px;padding:0 32px 0 40px;align-items:center}
.tabs button{height:33px;padding:0 16px;font-size:11.5px;color:#7A7A8E;background:var(--bg);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.tabs button.on{background:#fff;color:var(--blue);box-shadow:0 0 0 1px var(--line)}
.tabs .month{margin-left:auto;height:26px}
.kpis{display:flex;justify-content:space-between;padding:26px 52px 0 42px}
.kpi small{font-size:9.5px;color:var(--mut);display:flex;align-items:center;gap:5px}
.kpi small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.kpi b{display:block;font-size:15px;font-weight:400;color:var(--ink);margin-top:2px;letter-spacing:.02em}
.sc{height:190px;margin:22px 40px 0 36px;position:relative}
.snote{font-size:9px;color:#B5B6C6;font-style:italic;text-align:center;padding:16px 60px 26px;border-bottom:1px solid var(--line)}
.table{padding-top:20px}
.back{display:block;font-size:10px;color:var(--blue);padding:0 0 16px 36px}
.tr{display:grid;grid-template-columns:1fr 78px 78px 70px 72px 68px 84px 110px;padding:0 40px 0 36px;height:48px;align-items:center;font-size:11px;color:var(--ink);position:relative;transition:background .25s,color .25s,box-shadow .25s}
.tr span:not(:first-child){text-align:left}
.th{color:var(--mut);height:34px}
#rows .tr{opacity:0;transform:translateY(8px);transition:opacity .45s,transform .55s cubic-bezier(.2,.8,.2,1),color .2s,box-shadow .25s}
#rows .tr.in{opacity:1;transform:none}
#rows .tr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transition:transform .3s}
#rows .tr:hover,#rows .tr.on{color:var(--blue);box-shadow:0 8px 24px rgba(30,40,90,.07);z-index:1}
#rows .tr:hover::before,#rows .tr.on::before{transform:none}
.t10{padding:20px 40px 0 42px;display:grid;gap:12px}
.t10 div{display:grid;grid-template-columns:22px 230px 1fr 60px;align-items:center;font-size:11px;color:var(--ink);gap:10px}
.t10 b{font-weight:400;color:var(--blue)}
.t10 i{height:6px;background:linear-gradient(90deg,var(--purple),var(--pink));transform-origin:left;transform:scaleX(0);transition:transform 1s cubic-bezier(.2,.8,.2,1);width:var(--w)}
.t10.in i{transform:scaleX(1)}
.t10 span:last-child{text-align:right;color:var(--mut)}

/* contacts */
.split3{display:grid;grid-template-columns:432px 202px 1fr}
.clist{background:#fff;padding:26px 0 0;box-shadow:8px 0 24px rgba(30,40,90,.04);z-index:1}
.clist .back{padding:0 0 10px 36px}
#clist li{display:flex;align-items:center;gap:16px;padding:18px 30px 18px 30px;cursor:pointer;position:relative;border-bottom:1px solid #F4F5F8;transition:box-shadow .3s,background .3s}
#clist li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue);transform:scaleY(0);transition:transform .3s}
#clist li.on{box-shadow:0 10px 30px rgba(30,40,90,.08);z-index:1}#clist li.on::before{transform:none}
#clist li:hover{background:#FCFCFE}
.av{position:relative;width:30px;height:30px;flex:none}
.av img,.av .lt{width:30px;height:30px;border-radius:50%;object-fit:cover;display:grid}
.av::after{content:"";position:absolute;right:-2px;top:-2px;width:8px;height:8px;border-radius:50%;background:#2FD39A;border:1.5px solid #fff}
#clist p{flex:1;font-size:12px;color:var(--ink)}#clist small{display:block;font-size:11px;color:var(--mut)}
.del{width:14px;height:15px;opacity:.35;transition:opacity .2s}
#clist li.on .del{opacity:1}
.del svg{width:14px;height:15px;fill:none;stroke:#9A9AAD;stroke-width:1.3}
#clist li.on .del svg{stroke:var(--pink)}
.ctabs{background:var(--bg);padding-top:44px}
.ctabs a{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#7A7A8E;padding:14px 22px 14px 26px;position:relative}
.ctabs a.on{background:#fff;color:var(--blue)}
.ctabs a.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--blue)}
.ctabs a.on .chev{border-color:var(--blue)}
.cform{background:#fff;display:grid;grid-template-columns:112px 1fr;gap:12px 0;padding:42px 50px 40px 46px;align-content:start;transition:opacity .25s}
.cform.fade{opacity:.25}
.cform label{font-size:11.5px;color:var(--ink);align-self:center}
.cform input,.cform textarea{height:34px;background:#F8F9FB;border:1px solid #F0F1F5;padding:0 13px;font-size:11.5px;color:#6A6A7E;width:100%;transition:border-color .2s,background .2s,box-shadow .2s}
.cform input:focus,.cform textarea:focus{border-color:#A9DBF7;background:#fff;box-shadow:0 0 0 3px rgba(31,162,229,.08)}
.cform textarea{height:66px;resize:none;padding-top:9px}
.cform label:nth-of-type(12){align-self:start;padding-top:8px}
.tags{min-height:34px;border:1px solid #F0F1F5;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:4px 8px;background:#fff}
.tags .tg{font-size:9.5px;color:var(--blue);border:1px solid var(--blue);padding:3px 7px;display:flex;align-items:center;gap:6px;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.tags .tg i{font-style:normal;color:#9A9AAD;font-size:9px;cursor:pointer}
.tags input{border:0!important;background:none!important;box-shadow:none!important;height:24px;flex:1;min-width:60px;padding:0 4px}
@keyframes pop{from{transform:scale(.6);opacity:0}}
.lists{display:flex;gap:6px}
.lists button{height:26px;font-size:10px;padding:0 10px;border:1px solid var(--line);color:#9A9AAD;cursor:pointer;display:flex;align-items:center;gap:5px;transition:.2s}
.lists button.on{border-color:var(--blue);color:var(--blue)}
.lists button.on::before{content:"";width:6px;height:3.5px;border:solid var(--blue);border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translateY(-1px)}
.acts{display:flex;gap:10px;margin-top:22px}
.save{height:40px;width:126px;background:#1BCB8F;color:#fff;font-size:11.5px;font-weight:500;cursor:pointer;position:relative;transition:background .25s,transform .15s}
.save:hover{background:#17BB83}.save:active{transform:scale(.97)}
.save.busy span{opacity:0}.save.busy::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
.save.ok{background:#14B07B}
@keyframes sp{to{transform:rotate(360deg)}}
.cancel{height:40px;width:72px;background:var(--bg);font-size:11.5px;color:#7A7A8E}
.toast{position:absolute;right:40px;bottom:36px;background:var(--ink);color:#fff;font-size:12px;padding:13px 18px 13px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 14px 34px rgba(20,20,40,.25);opacity:0;transform:translateY(14px);transition:.4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.toast.on{opacity:1;transform:none}
.toast i{width:16px;height:16px;border-radius:50%;background:var(--green);position:relative}
.toast i::after{content:"";position:absolute;left:5.5px;top:3px;width:4px;height:7px;border:solid #fff;border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}