:root{
  --bg:#f4f4f1;--card:#ffffff;--ink:#141414;--muted:#6d6d68;--line:#e4e4de;--soft:#eeeee9;
  --acc:#CDFF3C;--acc-ink:#000;--red:#e5484d;--amber:#f5a524;--green:#2fa36b;--blue:#3b82f6;
  --r:14px;--shadow:0 1px 2px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.04);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.4 Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
.app{display:flex;min-height:100vh}
.side{width:230px;flex:none;background:#111;color:#eee;padding:18px 12px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.brand{font-weight:800;font-size:18px;letter-spacing:-.02em;padding:4px 10px 14px;display:flex;align-items:center;gap:8px}
.brand i{width:26px;height:26px;border-radius:8px;background:var(--acc);display:inline-block;position:relative}
.brand i:after{content:"Б";position:absolute;inset:0;display:grid;place-items:center;color:#000;font-style:normal;font-size:15px}
.side a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;text-decoration:none;color:#cfcfcf;font-weight:500}
.side a.on,.side a:hover{background:#262626;color:#fff}
.side .sep{height:1px;background:#2a2a2a;margin:10px 4px}
.side .who{margin-top:auto;font-size:13px;color:#999;padding:8px 10px}
.main{flex:1;min-width:0;padding:18px 22px 90px}
.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.top h1{font-size:22px;margin:0;font-weight:800;letter-spacing:-.02em;flex:1;min-width:150px}
.pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.pill{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:7px 12px;font-weight:600;font-size:13px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.pill .dot{width:9px;height:9px;border-radius:50%}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn{border:0;background:var(--ink);color:#fff;border-radius:11px;padding:9px 14px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn.acc{background:var(--acc);color:var(--acc-ink)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.red{background:var(--red)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:9px}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:14px}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));margin-bottom:14px}
.kpi{background:var(--card);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow)}
.kpi b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em}
.kpi span{font-size:12px;color:var(--muted)}
h2{font-size:16px;margin:20px 0 10px;font-weight:800}
.muted{color:var(--muted)}.small{font-size:12.5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 11px;outline:none}
.input:focus{border-color:#999}
textarea.input{min-height:70px;resize:vertical}
.search{max-width:260px}
label.f{display:block;margin-bottom:10px}
label.f>span{display:block;font-size:12px;color:var(--muted);margin-bottom:4px;font-weight:600}
.chk{display:flex;align-items:center;gap:8px;margin:6px 0 12px;font-weight:500}
.chk input{width:20px;height:20px;accent-color:#111}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
/* канбан */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;align-items:flex-start}
.col{flex:0 0 282px;background:var(--soft);border-radius:var(--r);padding:8px;scroll-snap-align:start;min-height:120px}
.col.drop{outline:2px dashed #999}
.col h3{font-size:13px;margin:4px 6px 8px;display:flex;justify-content:space-between;font-weight:700}
.col h3 em{font-style:normal;color:var(--muted);font-weight:600}
.deal{background:var(--card);border-radius:12px;padding:10px 11px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer;border-left:4px solid var(--pc,#ccc)}
.deal .t{font-weight:700;display:flex;justify-content:space-between;gap:6px}
.deal .s{font-size:12.5px;color:var(--muted);margin-top:3px}
.deal .m{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.tag{font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--soft);white-space:nowrap}
.tag.red{background:#fde8e8;color:#b42318}.tag.green{background:#e3f6ec;color:#11734b}.tag.amber{background:#fff3dc;color:#8a5a00}.tag.blue{background:#e6efff;color:#1d4ed8}
.ago{font-size:11.5px;font-weight:700;color:var(--muted)}
.ago.hot{color:var(--red)}
.list .item{display:flex;gap:10px;align-items:center;padding:11px 12px;background:var(--card);border-radius:12px;margin-bottom:8px;box-shadow:var(--shadow);cursor:pointer}
.list .item .grow{flex:1;min-width:0}
.list .item .grow b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar{width:5px;align-self:stretch;border-radius:3px;flex:none}
.day{font-weight:800;margin:16px 0 8px;font-size:14px}.day::first-letter{text-transform:uppercase}
.bar{height:8px;background:var(--soft);border-radius:5px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--ink);border-radius:5px}
table.t{width:100%;border-collapse:collapse;font-size:13.5px}
table.t th{text-align:left;font-size:12px;color:var(--muted);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
table.t td{padding:8px;border-bottom:1px solid var(--soft)}
table.t td.n,table.t th.n{text-align:right;white-space:nowrap}
.scroll{overflow-x:auto}
/* модалка */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:flex;justify-content:flex-end}
.sheet{background:var(--bg);width:min(620px,100%);height:100%;overflow-y:auto;padding:0 0 40px;animation:sl .18s ease}
@keyframes sl{from{transform:translateX(30px);opacity:.5}to{transform:none;opacity:1}}
.sh-head{position:sticky;top:0;z-index:2;background:var(--ph,#111);color:var(--pi,#fff);padding:14px 16px;display:flex;gap:10px;align-items:center}
.sh-head h2{margin:0;flex:1;font-size:18px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-head .x{background:rgba(0,0,0,.15);border:0;color:inherit;width:34px;height:34px;border-radius:10px;font-size:18px;cursor:pointer}
.sh-body{padding:14px 16px}
.stages{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.stg{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.stg.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.stg[disabled]{opacity:.4;cursor:default}.stg.lost.on{background:var(--red);border-color:var(--red)}
.tl{border-left:2px solid var(--line);margin-left:6px;padding-left:14px}
.tl .ev{position:relative;margin-bottom:12px}
.tl .ev:before{content:"";position:absolute;left:-20px;top:5px;width:10px;height:10px;border-radius:50%;background:#bbb}
.tl .ev.msg_in:before{background:var(--blue)}.tl .ev.msg_out:before{background:var(--green)}.tl .ev.call:before{background:var(--amber)}.tl .ev.note:before{background:var(--ink)}
.bubble{display:inline-block;padding:8px 11px;border-radius:12px;background:#fff;box-shadow:var(--shadow);max-width:100%;white-space:pre-wrap}
.msg_in .bubble{background:#e6efff}.msg_out .bubble{background:#e3f6ec}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:12px;z-index:99;font-weight:600;max-width:90vw}
.bnav{display:none}
.demo{background:#111;color:#fff;border-radius:12px;padding:8px 12px;font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.demo select{max-width:100%;background:#222;color:#fff;border:1px solid #333;border-radius:8px;padding:5px 8px}
.code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--soft);padding:8px 10px;border-radius:8px;word-break:break-all;display:block}
.login{max-width:360px;margin:12vh auto;padding:24px}
.empty{padding:26px;text-align:center;color:var(--muted)}
@media (max-width:820px){
  .side{display:none}
  .main{padding:12px 12px 90px}
  .top h1{font-size:19px;flex-basis:100%}
  .bnav{display:flex;position:fixed;bottom:0;left:0;right:0;background:#111;z-index:40;padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bnav a{flex:1;text-align:center;color:#aaa;text-decoration:none;font-size:11px;font-weight:600;padding:4px 0}
  .bnav a b{display:block;font-size:19px;line-height:1.2}
  .bnav a.on{color:var(--acc)}
  .col{flex-basis:84vw}
  .fgrid{grid-template-columns:1fr}
  .search{max-width:none;flex:1}
}
/* v2 */
label.f.wide,.f.wide{grid-column:1/-1}
.lbl{display:block;font-size:12px;color:var(--muted);margin-bottom:6px;font-weight:600}
.artists{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.art{display:grid;grid-template-columns:22px 1fr;gap:0 6px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:#fff;cursor:pointer}
.art input{grid-row:span 2;width:18px;height:18px;accent-color:#111}
.art b{font-size:13.5px}.art span{font-size:11.5px;color:var(--muted)}
.art:has(input:checked){border-color:#111;background:#f2f2ec}
.imgbox{height:110px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;background:#fff;margin-bottom:6px;overflow:hidden}
.imgbox img{max-height:100px;max-width:100%}
.ov.wide .sheet{width:min(980px,100%)}
.docframe{width:100%;height:calc(100vh - 150px);border:1px solid var(--line);border-radius:10px;background:#fff}
.pill input{accent-color:#111}
.cap{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}
.cap b{font-size:20px}
/* ===== Мессенджер ===== */
.cbadge{font-style:normal;background:#e5484d;color:#fff;border-radius:10px;font-size:11px;font-weight:700;padding:1px 6px;margin-left:auto}
.bnav .cbadge{position:absolute;margin:-4px 0 0 -4px}
.main.chatmode{padding:0;height:100vh;overflow:hidden}
.av{border-radius:50%;object-fit:cover;display:inline-grid;place-items:center;color:#fff;font-weight:700;flex:none;letter-spacing:-.02em}
.msgr{display:flex;height:100vh;background:#fff}
.ml{width:340px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;background:#fff}
.mlh{display:flex;align-items:center;gap:6px;padding:12px 12px 6px}.mlh b{font-size:20px;font-weight:800}
.grow{flex:1;min-width:0}
.ib{border:0;background:transparent;width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;font-size:18px;cursor:pointer;text-decoration:none;color:inherit;flex:none;transition:background .15s,transform .12s}
.ib:hover{background:var(--soft)}.ib:active{transform:scale(.9)}.ib.acc{background:var(--ink);color:#fff}
.mls{padding:4px 12px 8px}.mls .input{border-radius:20px;background:var(--soft);border-color:transparent}
.mll{overflow-y:auto;flex:1}
.mli{display:flex;gap:10px;align-items:center;padding:8px 12px;text-decoration:none;color:inherit;transition:background .12s}
.mli:hover{background:#f6f6f2}.mli.on{background:#eef6d8}.mli.sub{padding-left:34px}
.mli .r1{display:flex;gap:6px;align-items:baseline}.mli .r1 b{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.mli .tm{font-size:11.5px;color:var(--muted);white-space:nowrap}
.mli .r2{display:flex;gap:6px;align-items:center;margin-top:2px}.pv{flex:1;min-width:0;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pv b{color:var(--ink);font-weight:600}
.ub{background:#2fa36b;color:#fff;border-radius:11px;font-size:12px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}.ub.mut{background:#aaa}
.typ{color:#2fa36b;font-style:normal}
.mc{flex:1;min-width:0;display:flex;flex-direction:column;background:#e9eee0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='%23000' fill-opacity='.035'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='50' cy='40' r='2'/%3E%3Cpath d='M60 10l4 4-4 4-4-4z'/%3E%3Cpath d='M20 55h8v2h-8z'/%3E%3C/g%3E%3C/svg%3E")}
.mce{flex:1;display:grid;place-items:center;text-align:center;color:var(--muted)}
.mch{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#fff;border-bottom:1px solid var(--line)}
.mch .tt{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mch .st{font-size:12.5px;color:var(--muted)}
.mch .back{display:none;font-size:30px}
.tpb{display:flex;gap:6px;padding:6px 10px;background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tp{border:0;background:var(--soft);border-radius:16px;padding:6px 12px;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer;transition:all .15s}
.tp.on{background:var(--ink);color:#fff}.tp.add{background:transparent;border:1px dashed #bbb}
.pinbar{background:#fff;padding:6px 14px;font-size:13px;border-bottom:1px solid var(--line);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm{flex:1;overflow-y:auto;padding:10px 12px 6px;overscroll-behavior:contain}
.dsep{text-align:center;margin:10px 0}.dsep span,.sys span{background:rgba(0,0,0,.28);color:#fff;font-size:12px;padding:3px 10px;border-radius:12px;font-weight:600}
.sys{text-align:center;margin:8px 0}
.msg{display:flex;gap:6px;align-items:flex-end;margin-top:6px;transition:transform .15s}
.msg.cont{margin-top:2px}.msg.me{justify-content:flex-end}
.msg.hl .bub{box-shadow:0 0 0 3px var(--acc)}
.mav{width:34px;flex:none}
.bub{position:relative;max-width:min(520px,78%);background:#fff;border-radius:16px 16px 16px 4px;padding:6px 10px 18px;box-shadow:0 1px 1px rgba(0,0,0,.08);animation:mIn .18s ease;min-width:70px}
.msg.me .bub{background:#e2f7c9;border-radius:16px 16px 4px 16px}
.msg.cont .bub{border-radius:16px}
.msg.plain .bub{background:transparent;box-shadow:none;padding:0 0 18px}
@keyframes mIn{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.nm{font-size:13px;font-weight:700;margin-bottom:2px}
.tx{white-space:normal;word-wrap:break-word;font-size:15px;line-height:1.35}
.tx a{color:#1d6fd8}
.mt{position:absolute;right:9px;bottom:3px;font-size:11px;color:#7d8c74}
.msg.plain .mt{background:rgba(0,0,0,.3);color:#fff;border-radius:8px;padding:0 6px}
.rd{color:#2fa36b;margin-left:3px;letter-spacing:-3px}.rd.one{color:#999}
.rq{border-left:3px solid var(--acc);background:rgba(0,0,0,.04);border-radius:6px;padding:3px 8px;margin:2px 0 4px;font-size:13px;cursor:pointer;max-width:100%}
.rq b{display:block;font-size:12.5px}.rq span{color:var(--muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcs{display:flex;gap:4px;flex-wrap:wrap;margin-top:5px}
.rc{border:0;background:rgba(0,0,0,.06);border-radius:14px;padding:2px 8px 2px 5px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;gap:3px;align-items:center;transition:transform .1s}
.rc.my{background:#2fa36b;color:#fff}.rc:active{transform:scale(.88)}
.img{display:block;max-width:100%;max-height:340px;border-radius:12px;margin:2px 0;cursor:zoom-in}
.file{display:flex;gap:10px;align-items:center;text-decoration:none;color:inherit;padding:4px 0}
.fi{width:42px;height:42px;border-radius:50%;background:#2fa36b;display:grid;place-items:center;font-size:20px}
.callm{font-weight:600;padding:4px 0}
.jumbo{font-size:64px;line-height:1.1;padding:4px 2px}
.ea{display:inline-block}
.jumbo .ea,.ep .ea:hover,.mce .ea{animation-duration:1.1s;animation-iteration-count:3;animation-timing-function:ease-in-out}
.jumbo .ea:hover{animation-iteration-count:infinite}
.ea.bounce{animation-name:eBounce}.ea.beat{animation-name:eBeat}.ea.flame{animation-name:eFlame}.ea.shake{animation-name:eShake}.ea.pop{animation-name:ePop}.ea.float{animation-name:eFloat;animation-iteration-count:infinite!important;animation-duration:2.4s!important}
.ea.nod{animation-name:eNod}.ea.clap{animation-name:eClap}.ea.sway{animation-name:eSway}.ea.spin{animation-name:eSpin}.ea.drive{animation-name:eDrive}
.ea.pop1{animation:ePop .35s ease-out 1}
.ep .ea{animation:none}.ep:hover .ea{animation-iteration-count:infinite}
@keyframes eBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-14%)}60%{transform:translateY(3%)}}
@keyframes eBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(.95)}45%{transform:scale(1.18)}}
@keyframes eFlame{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.1,1.2) rotate(-4deg)}50%{transform:scale(.95,1.05) rotate(3deg)}75%{transform:scale(1.08,1.15) rotate(-2deg)}}
@keyframes eShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
@keyframes ePop{0%{transform:scale(.3)}50%{transform:scale(1.3) rotate(8deg)}75%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes eFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes eNod{0%,100%{transform:rotate(0)}30%{transform:rotate(-18deg) translateY(-6%)}60%{transform:rotate(6deg)}}
@keyframes eClap{0%,100%{transform:scale(1)}20%,60%{transform:scale(.8)}40%,80%{transform:scale(1.15)}}
@keyframes eSway{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes eSpin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.2)}100%{transform:rotate(360deg) scale(1)}}
@keyframes eDrive{0%,100%{transform:translateX(0)}50%{transform:translateX(12%)}}
/* голосовые */
.vc{display:flex;align-items:center;gap:8px;min-width:230px;padding:2px 0}
.vp{width:40px;height:40px;border-radius:50%;border:0;background:#2fa36b;color:#fff;font-size:15px;cursor:pointer;flex:none;transition:transform .12s}.vp:active{transform:scale(.9)}
.vw{display:flex;align-items:center;gap:2px;height:28px;flex:1;cursor:pointer}
.vw i{display:block;width:3px;border-radius:2px;background:#b5c9a4;transition:background .1s}.vw i.p{background:#2fa36b}
.msg:not(.me) .vw i{background:#cfd6cc}.msg:not(.me) .vw i.p{background:#2fa36b}
.vd{font-size:12px;color:var(--muted);min-width:32px}
.vs{border:0;background:rgba(0,0,0,.07);border-radius:8px;font-size:11px;font-weight:700;padding:2px 5px;cursor:pointer}
/* кружочки */
.circ{position:relative;width:220px;height:220px;cursor:pointer}
.circ video{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#000;display:block}
.circ svg{position:absolute;inset:-4px;width:228px;height:228px;transform:rotate(-90deg);pointer-events:none}
.circ circle{fill:none;stroke:#2fa36b;stroke-width:2.5;stroke-dasharray:301.6;stroke-dashoffset:301.6;transition:stroke-dashoffset .2s linear}
.circ .cd,.circ .cs{position:absolute;bottom:8px;background:rgba(0,0,0,.45);color:#fff;font-size:11px;border-radius:9px;padding:1px 7px}.circ .cd{left:26px}.circ .cs{right:26px}
.circ.on video{transform:scale(1.02)}
/* поле ввода */
.cmp{background:#fff;border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));position:relative}
.crow{display:flex;align-items:flex-end;gap:6px}
.crow.recording .tin,.crow.recording label.ib{visibility:hidden}
.tin{flex:1;display:flex;align-items:flex-end;background:var(--soft);border-radius:22px;padding:2px 2px 2px 14px}
.tin textarea{flex:1;border:0;background:transparent;resize:none;outline:none;font-size:15px;line-height:1.35;padding:9px 0;max-height:140px}
.rb{width:46px;height:46px;border-radius:50%;border:0;background:#2fa36b;color:#fff;font-size:20px;cursor:pointer;flex:none;touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .15s,background .2s,box-shadow .2s}
.rb.send{background:#2fa36b}.rb:active{transform:scale(.92)}
.rb.live{transform:scale(1.55);background:#e5484d;box-shadow:0 0 0 10px rgba(229,72,77,.18);animation:rPulse 1.2s infinite}
.rb.flip{animation:rFlip .3s}
@keyframes rPulse{50%{box-shadow:0 0 0 18px rgba(229,72,77,.08)}}
@keyframes rFlip{50%{transform:rotateY(90deg)}}
.recui{position:absolute;left:8px;right:64px;bottom:calc(10px + env(safe-area-inset-bottom));height:40px;display:flex;align-items:center;gap:10px;padding:0 6px;background:#fff}
.recui[hidden]{display:none}
.rdot{width:10px;height:10px;border-radius:50%;background:#e5484d;animation:blink 1s infinite}@keyframes blink{50%{opacity:.2}}
.rt{font-variant-numeric:tabular-nums;font-weight:700}.rh{color:var(--muted);font-size:14px;transition:opacity .1s}
.recui .rsend{width:42px;height:42px;font-size:18px;position:relative;right:-58px}
.lock{position:absolute;right:14px;bottom:76px;width:38px;height:62px;border-radius:20px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:transform .05s;animation:lockIn .25s}
.lock[hidden]{display:none}.lock small{animation:up 1s infinite;color:var(--muted)}.lock.near{background:#2fa36b;color:#fff}
@keyframes up{50%{transform:translateY(-5px)}}@keyframes lockIn{from{opacity:0;transform:translateY(20px)}}
.circ-rec{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;animation:fadeIn .2s}
.circ-rec .cr{position:relative;width:min(78vw,320px);height:min(78vw,320px)}
.circ-rec video{width:100%;height:100%;border-radius:50%;object-fit:cover;transform:scaleX(-1)}
.circ-rec svg{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);transform:rotate(-90deg)}
.circ-rec circle{fill:none;stroke:#e5484d;stroke-width:2;stroke-dasharray:301.6;stroke-dashoffset:301.6}
.crt{color:#fff;font-weight:700;font-size:18px}
@keyframes fadeIn{from{opacity:0}}
.epanel{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:2px;max-height:210px;overflow-y:auto;padding:6px 0}
.epanel[hidden]{display:none}
.ep{border:0;background:transparent;font-size:26px;height:44px;border-radius:10px;cursor:pointer}.ep:hover{background:var(--soft)}
.rbar{display:flex;align-items:center;gap:8px;padding:4px 6px 8px;border-left:3px solid #2fa36b;margin:0 4px 6px;font-size:13px}
.rbar span{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* контекстное меню */
.cm{position:fixed;z-index:120;background:#fff;border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.2);padding:6px;min-width:220px;animation:cmIn .15s ease}
@keyframes cmIn{from{opacity:0;transform:scale(.9)}}
.cmr{display:flex;gap:2px;padding:2px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow-x:auto}
.cmr button{border:0;background:transparent;font-size:24px;width:38px;height:38px;border-radius:50%;cursor:pointer;transition:transform .12s}
.cmr button:hover{transform:scale(1.3);background:var(--soft)}
.cm>button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:8px;font-size:14.5px;cursor:pointer}
.cm>button:hover{background:var(--soft)}.cm>button.red{color:#e5484d}
.mpick{max-height:300px;overflow-y:auto;border:1px solid var(--line);border-radius:12px}
.mpi{display:flex;align-items:center;gap:10px;padding:7px 10px;cursor:pointer}.mpi:hover{background:var(--soft)}.mpi input{width:20px;height:20px;accent-color:#2fa36b}
.avpick{cursor:pointer;display:inline-block;position:relative}.avpick.big .av{box-shadow:0 2px 10px rgba(0,0,0,.15)}
.msheet .sh-head{background:#111;color:#fff}
.iview{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:130;display:grid;place-items:center;animation:fadeIn .15s}
.iview img{max-width:96vw;max-height:92vh}.iview .ib{position:absolute;top:12px;right:12px;color:#fff;background:rgba(255,255,255,.15)}
/* звонки */
.callin{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:140;background:#111;color:#fff;border-radius:18px;padding:12px;display:flex;gap:12px;align-items:center;width:min(420px,94vw);box-shadow:0 10px 40px rgba(0,0,0,.4);animation:cmIn .2s}
.cb{width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer;transition:transform .12s}
.cb:active{transform:scale(.9)}.cb.red{background:#e5484d}.cb.green{background:#2fa36b;animation:rPulse 1.2s infinite}.cb.off{background:#fff;color:#111}
.callov{position:fixed;inset:0;z-index:135;background:linear-gradient(160deg,#1b2a1d,#0d0d0d);color:#fff;display:flex;flex-direction:column;animation:fadeIn .2s}
.ctop{padding:18px;text-align:center}.ctop b{display:block;font-size:20px}.ctop span{display:block;font-size:14px;opacity:.75}
.cgrid{flex:1;display:grid;gap:6px;padding:6px;grid-template-columns:1fr}
.cgrid[data-n="2"],.cgrid[data-n="3"],.cgrid[data-n="4"]{grid-template-columns:1fr 1fr}.cgrid[data-n="5"],.cgrid[data-n="6"]{grid-template-columns:1fr 1fr 1fr}
.cgrid[data-n="0"]{display:none}.cgrid:not([data-n="0"])~.cwait{display:none}
.cwait{flex:1;display:grid;place-items:center}.cwait .av{animation:eBeat 1.6s infinite}
.tile{position:relative;background:#222;border-radius:14px;overflow:hidden;min-height:140px}
.tile video{width:100%;height:100%;object-fit:cover}.tile .tav{position:absolute;inset:0;display:none;place-items:center}
.tile.novid video{opacity:0}.tile.novid .tav{display:grid}
.tile .tn{position:absolute;left:8px;bottom:8px;font-size:13px;background:rgba(0,0,0,.4);padding:2px 8px;border-radius:8px}
.self{position:absolute;right:14px;top:80px;width:110px;height:150px;object-fit:cover;border-radius:12px;transform:scaleX(-1);box-shadow:0 4px 16px rgba(0,0,0,.4);background:#333}
.cbar{display:flex;gap:14px;justify-content:center;padding:16px 0 calc(22px + env(safe-area-inset-bottom))}
.callov.mini{inset:auto 12px 80px auto;width:170px;height:230px;border-radius:16px;box-shadow:0 8px 30px rgba(0,0,0,.5);cursor:pointer}
.callov.mini .ctop{padding:6px}.callov.mini .ctop b{font-size:13px}.callov.mini .self,.callov.mini .cbar .cb:not(.red){display:none}.callov.mini .cbar{padding:6px}.callov.mini .cb{width:38px;height:38px}
@media (max-width:820px){
  .main.chatmode{height:calc(100vh - 62px)}
  .msgr{height:calc(100vh - 62px)}
  .ml{width:100%;border:0}.msgr.has-open .ml{display:none}.msgr:not(.has-open) .mc{display:none}
  .mch .back{display:inline-grid}
  .bub{max-width:84%}
  .bnav a b{position:relative}
}
.vc{min-width:0;width:260px;max-width:100%}.vw{min-width:0;overflow:hidden}
/* дашборд-кольца */
.dashgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rcard{display:flex;flex-direction:column;align-items:center}.rcard h3{align-self:flex-start;margin:0 0 6px;font-size:15px}
.ring{max-width:100%;height:auto}.ring .arc{transition:stroke-dasharray .8s ease}.ring .rs{font-size:11px;fill:#6d6d68}.ring .rb{font-size:21px;font-weight:800;fill:#141414;font-family:Montserrat,system-ui,sans-serif}
.ring g{animation:ringIn .9s ease}@keyframes ringIn{from{opacity:0;transform:rotate(-140deg) scale(.9);transform-origin:100px 100px}}
.lg{width:100%;display:grid;gap:5px;margin-top:8px}.lg div{display:grid;grid-template-columns:12px 1fr auto;gap:8px;align-items:center;font-size:13px}.lg i{width:12px;height:12px;border-radius:4px}
.mbars{display:flex;gap:8px;align-items:flex-end;height:170px;overflow-x:auto}.mbars div{flex:1;min-width:46px;display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end;height:100%}
.mbars b{width:70%;background:var(--ink);border-radius:6px 6px 2px 2px}.mbars span{font-size:12px;color:var(--muted)}.mbars em{font-style:normal;font-size:11px;font-weight:700}
/* календарь-сетка */
.cal{padding:10px}.calh{display:flex;align-items:center;gap:6px;margin-bottom:6px}.calh b{flex:1;text-align:center;font-size:16px}
.calw,.calg{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calw span{text-align:center;font-size:11.5px;color:var(--muted);font-weight:700}
.cd{position:relative;aspect-ratio:1/1.05;border:1px solid var(--line);border-radius:10px;background:#fff;padding:4px;display:flex;flex-direction:column;align-items:flex-start;cursor:pointer;min-width:0;transition:transform .1s}
.cd:active{transform:scale(.94)}.cd.empty{border:0;background:transparent;cursor:default}
.cd .dn{font-size:13px;font-weight:700}.cd.today{border-color:var(--ink);border-width:2px}.cd.sel{background:var(--ink);color:#fff}
.cd .cnt{position:absolute;right:4px;top:4px;font-size:11px;font-weight:800;border-radius:8px;padding:0 6px}
.cd .dots{margin-top:auto;display:flex;gap:2px;flex-wrap:wrap}.cd .dots i{width:6px;height:6px;border-radius:50%;background:#bbb}.cd .dots i.w{background:#16a34a}
.cd .evm{font-size:11px;color:#b58900}.cd .warn{position:absolute;right:5px;bottom:3px;color:#e5484d;font-weight:900;font-size:13px}
.task .tchk{width:22px;height:22px;accent-color:#16a34a;flex:none}
.task.done b{text-decoration:line-through;color:var(--muted)}
.tright{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tright button.tag{border:0;cursor:pointer}
.red-t{color:#e5484d}
.taskm{border:1px solid var(--line);background:#fffbe6;border-radius:12px;padding:8px 10px;min-width:220px}
.taskm b{display:block}.taskm .small{display:block;margin-top:2px}
.task .tchk{width:22px;height:22px;accent-color:#16a34a;flex:none}
.task.done b{text-decoration:line-through;color:var(--muted)}
.tright{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tright button.tag{border:0;cursor:pointer}
.red-t{color:#e5484d}
.taskm{border:1px solid #e9d98a;background:#fffbe6;border-radius:12px;padding:8px 10px;min-width:220px;cursor:pointer}
.taskm b{display:block}.taskm .small{display:block;margin-top:2px}
.card.abon{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.card.abon .grow{flex:1 1 200px}.card.abon .grow b,.card.abon .grow span{display:block}