@font-face{font-family:"PingARLT";src:url(/assets/PingARLT-Bold.otf) format("opentype");font-display:swap}
@property --r{syntax:"<length>";inherits:false;initial-value:0px}
:root{--ink:#0a1a1f;--ink2:#12282F;--card:#10242a;--card2:#163139;--paper:#fff;--red:#CB0000;--red2:#ff2a2a;--dim:rgba(255,255,255,.62);--faint:rgba(255,255,255,.08);--line:rgba(255,255,255,.2);--ease:cubic-bezier(.2,.8,.2,1);--f:"PingARLT",Tahoma,"Segoe UI",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--f);-webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100dvh;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='87 45 20 20'%3E%3Cpath fill='%23fff' stroke='%230a1a1f' stroke-width='.8' d='M100.72,53.18c-.04-2.23-2.08-3.57-3.89-3.56-1.94,0-3.95,1.5-3.98,3.64l-.07,5.06h-3.69c0-2-.1-3.77.09-5.59.41-3.98,3.66-6.81,7.43-6.92s7.32,2.63,7.73,6.53c.21,2,.07,3.95.09,5.99h-3.62s-.09-5.14-.09-5.14Z'/%3E%3Cpath fill='%23CB0000' stroke='%230a1a1f' stroke-width='.5' d='M89.18 58.75h3.67v4.39h-3.67zM100.8 58.76h3.64v4.38h-3.64z'/%3E%3C/svg%3E") 4 4,auto}
a,button,label,select,summary,[data-go],[data-t],.row{cursor:pointer}
input,textarea{cursor:text}
::selection{background:var(--red);color:#fff}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- background pattern: magnet strokes ---------- */
#bgp{position:fixed;inset:-10%;z-index:0;pointer-events:none;opacity:.06;overflow:hidden}
#bgp svg{position:absolute;width:62vmax;height:62vmax;fill:none;stroke:#fff;stroke-width:.12;animation:drift 38s ease-in-out infinite alternate}
#bgp svg:nth-child(1){top:-6%;inset-inline-end:-12%}
#bgp svg:nth-child(2){bottom:-20%;inset-inline-start:-18%;width:48vmax;height:48vmax;animation-duration:46s;animation-direction:alternate-reverse;transform:rotate(180deg)}
@keyframes drift{from{transform:translate(0,0) rotate(-6deg)}to{transform:translate(2%,3%) rotate(6deg)}}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;animation:iSafe 0s linear 5.5s forwards;-webkit-mask:radial-gradient(circle at var(--cx,50%) var(--cy,50%),transparent var(--r),#000 calc(var(--r) + 1px));mask:radial-gradient(circle at var(--cx,50%) var(--cy,50%),transparent var(--r),#000 calc(var(--r) + 1px))}
#intro.open{transition:--r 1s cubic-bezier(.7,0,.2,1);--r:150vmax}
@keyframes iSafe{to{visibility:hidden;opacity:0}}
#intro svg{width:min(78vw,520px);height:auto;overflow:visible}
#intro .lg{fill:#fff;fill-opacity:0;stroke:#fff;stroke-width:.35;stroke-linejoin:round;stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);animation:iDraw 1.1s cubic-bezier(.6,0,.2,1) calc(.08s * var(--i,0)) forwards,iFill .4s ease calc(1s + .06s * var(--i,0)) forwards}
#intro .pole,#intro .bolt{fill:var(--red);fill-opacity:0;stroke:var(--red);stroke-width:.3;stroke-dasharray:40;stroke-dashoffset:40;animation:iDraw .7s ease .9s forwards,iFill .3s ease 1.45s forwards}
#intro .bolt{animation:iDraw .5s ease 1.35s forwards,iFill .2s ease 1.6s forwards,zap .9s ease 1.7s 1}
#intro .tag{position:absolute;bottom:14vh;inset-inline:0;text-align:center;color:var(--dim);letter-spacing:.35em;font-size:.72rem;opacity:0;animation:rise .6s var(--ease) 1.3s forwards;direction:ltr}
#intro.calm .lg,#intro.calm .pole,#intro.calm .bolt{stroke-dashoffset:0;animation:iFill .6s ease forwards}
@keyframes iDraw{to{stroke-dashoffset:0}}
@keyframes iFill{to{fill-opacity:1;stroke-opacity:0}}
@keyframes zap{0%,100%{filter:none}30%{filter:drop-shadow(0 0 2px var(--red2)) drop-shadow(0 0 6px var(--red))}60%{filter:drop-shadow(0 0 1px var(--red2))}}
html.intro{overflow:hidden}

/* ---------- shell ---------- */
#app{position:relative;z-index:1;min-height:100vh}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;padding:12px max(16px,3vw);padding-top:calc(12px + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--ink) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--faint)}
.brand{display:flex;align-items:center;background:none;border:0;padding:0;flex:none}
.brand svg{height:22px;width:auto;fill:#fff}
.brand .pole,.brand .bolt{fill:var(--red)}
.tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:1px solid transparent;background:none;color:var(--dim);padding:7px 15px;border-radius:999px;white-space:nowrap;transition:color .2s,background .2s,border-color .2s;font-size:.93rem;position:relative}
.tab:hover{color:#fff}
.tab.on{color:#000;background:#fff}
.tab .dot{position:absolute;top:4px;inset-inline-end:6px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.tops{display:flex;align-items:center;gap:8px;flex:none}
.ib{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:none;display:grid;place-items:center;color:#fff;transition:background .2s,transform .2s var(--ease)}
.ib:hover{background:var(--faint)}
.ib:active{transform:scale(.92)}
.ib svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.badge{position:absolute;top:-4px;inset-inline-end:-4px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:.7rem;display:grid;place-items:center;animation:pop .4s var(--ease)}
.ring{animation:ring 1s ease}
@keyframes ring{0%,100%{transform:none}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
@keyframes pop{from{transform:scale(0)}}
.av{width:40px;height:40px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-size:.95rem;border:0;color:#fff;flex:none}
.av.s{width:28px;height:28px;font-size:.75rem}
.av.g{background:var(--card2)}

main{padding:28px max(16px,3vw) 90px;max-width:1240px;margin:0 auto}
.v{animation:rise .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.st>*{animation:rise .55s var(--ease) both}
.st>*:nth-child(2){animation-delay:.05s}.st>*:nth-child(3){animation-delay:.1s}.st>*:nth-child(4){animation-delay:.15s}.st>*:nth-child(5){animation-delay:.2s}.st>*:nth-child(6){animation-delay:.25s}.st>*:nth-child(n+7){animation-delay:.3s}
h1{font-size:clamp(1.7rem,4.2vw,2.8rem);margin:0 0 6px;line-height:1.15;font-weight:400}
h1 .r{color:var(--red)}
h2{font-size:1.25rem;font-weight:400;margin:34px 0 14px;display:flex;align-items:center;gap:10px}
h2 small,.sub{color:var(--dim);font-size:.9rem}
.sub{margin:0 0 24px}
.hd{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}

/* ---------- controls ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border:1.5px solid #fff;border-radius:999px;background:#fff;color:#000;font-size:.95rem;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),transform .2s var(--ease);text-decoration:none;white-space:nowrap}
.btn::before{content:"";position:absolute;inset:0;background:var(--red);transform:translateY(101%);transition:transform .4s var(--ease);z-index:-1;border-radius:inherit}
.btn:hover{color:#fff;border-color:var(--red)}
.btn:hover::before{transform:none}
.btn:active{transform:scale(.97)}
.btn.o{background:none;color:#fff;border-color:var(--line)}
.btn.o:hover{border-color:#fff}
.btn.o::before{background:#fff}
.btn.o:hover{color:#000}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.red::before{background:#fff}
.btn.red:hover{color:#000}
.btn.sm{padding:7px 15px;font-size:.85rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.chip{border:1px solid var(--line);background:none;color:var(--dim);padding:6px 14px;border-radius:999px;font-size:.85rem;white-space:nowrap;transition:all .2s}
.chip:hover{color:#fff;border-color:#fff}
.chip.on{background:#fff;color:#000;border-color:#fff}
.chip b{font-weight:400;font-size:.75em;line-height:1;background:rgba(255,255,255,.14);border-radius:999px;padding:3px 6px;margin:0 7px}
.chip.on b{background:rgba(0,0,0,.12)}
.chips{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.inp{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:14px;padding:11px 14px;color:#fff;outline:none;transition:border-color .2s,background .2s}
.inp:focus{border-color:#fff;background:rgba(0,0,0,.4)}
select.inp{appearance:auto;background:#0b1c21}
textarea.inp{resize:vertical;min-height:90px;line-height:1.6}
.f{display:block;margin-bottom:14px}
.f>span{display:block;margin-bottom:7px;color:var(--dim);font-size:.88rem}
.f>span small{opacity:.7}
.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.bar .inp{flex:1;min-width:180px;width:auto}
.bar select.inp{flex:0 1 190px;min-width:140px}

/* ---------- cards ---------- */
.card{background:color-mix(in srgb,var(--card) 88%,transparent);border:1px solid var(--faint);border-radius:22px;padding:20px;position:relative}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:var(--card);border:1px solid var(--faint);border-radius:20px;padding:18px;transition:transform .3s var(--ease),border-color .3s}
.stat:hover{transform:translateY(-3px);border-color:var(--line)}
.stat b{display:block;font-size:2.2rem;font-weight:400;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.stat span{color:var(--dim);font-size:.85rem}
.stat.hot b{color:var(--red2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.empty{color:var(--dim);text-align:center;padding:40px 16px;border:1px dashed var(--line);border-radius:20px}

/* ---------- task rows ---------- */
.rows{display:flex;flex-direction:column;gap:8px}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;background:var(--card);border:1px solid var(--faint);border-radius:18px;padding:14px 16px;transition:transform .3s var(--ease),border-color .25s,background .25s;text-align:start;width:100%;color:#fff}
.row:hover{border-color:var(--line);transform:translateX(-4px);background:var(--card2)}
[dir=ltr] .row:hover{transform:translateX(4px)}
.row .t{min-width:0}
.row .t b{display:block;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t small{color:var(--dim);font-size:.8rem;display:flex;gap:10px;flex-wrap:wrap;margin-top:3px}
.row .e{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pr{width:10px;height:10px;border-radius:50%;flex:none}
.pr.urgent{background:var(--red2);box-shadow:0 0 0 4px rgba(255,42,42,.18);animation:beat 1.4s ease infinite}
.pr.high{background:#ff8a3d}.pr.medium{background:#e8c547}.pr.low{background:#5fb3a1}
@keyframes beat{50%{box-shadow:0 0 0 7px rgba(255,42,42,0)}}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.78rem;border:1px solid var(--line);white-space:nowrap}
.pill.new{border-color:#fff}
.pill.assigned{border-color:#7fb8ff;color:#a9d0ff}
.pill.in_progress{background:#fff;color:#000;border-color:#fff}
.pill.in_review{border-color:#e8c547;color:#f3d977}
.pill.revision_required{background:var(--red);border-color:var(--red);color:#fff}
.pill.approved{border-color:#5fd39a;color:#7ee6b1}
.pill.completed{color:var(--dim)}
.live{display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:.8rem;font-variant-numeric:tabular-nums;direction:ltr}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red2);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.late{color:var(--red2)}
.cnt{color:var(--dim);font-size:.78rem}

/* ---------- clients ---------- */
.cc{display:flex;flex-direction:column;gap:12px;background:var(--card);border:1px solid var(--faint);border-radius:22px;padding:18px;transition:transform .35s var(--ease),border-color .3s;text-align:start;color:#fff;width:100%}
.cc:hover{transform:translateY(-4px);border-color:var(--line)}
.lgo{width:58px;height:58px;border-radius:16px;background:#fff;display:grid;place-items:center;overflow:hidden;flex:none;color:#000;font-size:1.3rem}
.lgo img{width:100%;height:100%;object-fit:contain;padding:6px}
.lgo.big{width:86px;height:86px;border-radius:22px}
.cc .n{display:flex;gap:12px;align-items:center}
.cc .n b{font-weight:400;font-size:1.05rem}
.cc .n small{display:block;color:var(--dim);font-size:.8rem;margin-top:3px}
.sw{display:flex;gap:6px;flex-wrap:wrap}
.sw i{width:26px;height:26px;border-radius:8px;border:1px solid var(--line);display:block}
.brief{white-space:pre-wrap;line-height:1.75;color:rgba(255,255,255,.88);unicode-bidi:plaintext;text-align:start}

/* ---------- task page ---------- */
.tp{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
@media(max-width:920px){.tp{grid-template-columns:minmax(0,1fr)}}
.side{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
@media(max-width:920px){.side{position:static}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:.9rem}
.kv dt{color:var(--dim)}
.kv dd{margin:0}
.timer{font-size:2.6rem;font-variant-numeric:tabular-nums;direction:ltr;text-align:center;letter-spacing:.02em;margin:6px 0 12px}
.timer.on{color:#fff;text-shadow:0 0 18px rgba(203,0,0,.6)}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts .btn{flex:1}
.flow{display:flex;gap:4px;margin:16px 0 4px}
.flow i{flex:1;height:4px;border-radius:4px;background:var(--faint);position:relative;overflow:hidden}
.flow i.d{background:#fff}
.flow i.c{background:var(--red);animation:glow 1.6s ease infinite}
@keyframes glow{50%{opacity:.55}}
.revn{border-inline-start:3px solid var(--red);background:rgba(203,0,0,.1);padding:12px 16px;border-radius:12px;margin:14px 0;white-space:pre-wrap}
.links a{display:block;color:#a9d0ff;word-break:break-all;margin:4px 0;font-size:.9rem;direction:ltr;text-align:start}
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.refs a,.refs .ref{position:relative;aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--faint);display:grid;place-items:center;background:#000;color:var(--dim);font-size:.75rem;text-decoration:none;text-align:center;padding:4px}
.refs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.refs .x{position:absolute;top:4px;inset-inline-end:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.7);border:0;color:#fff;font-size:.8rem;z-index:2}
.drop{border:1.5px dashed var(--line);border-radius:16px;padding:16px;text-align:center;color:var(--dim);font-size:.88rem;transition:border-color .2s,background .2s;display:block}
.drop:hover,.drop.on{border-color:#fff;background:var(--faint);color:#fff}

/* versions + pins */
.vtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.dz{position:relative;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--faint);margin-bottom:12px}
.dz img{display:block;width:100%;height:auto}
.dz.pinmode{cursor:crosshair;outline:2px solid var(--red);outline-offset:-2px}
.pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50% 50% 50% 0;background:var(--red);color:#fff;display:grid;place-items:center;font-size:.72rem;border:2px solid #fff;transform:rotate(-45deg);box-shadow:0 4px 14px rgba(0,0,0,.5);animation:pop .35s var(--ease)}
.pin span{transform:rotate(45deg)}
.pin.res{background:#2e6a55;opacity:.75}
.dzm{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;font-size:.82rem;color:var(--dim);flex-wrap:wrap}
.pins{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.pins div{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;padding:8px 10px;border-radius:12px;background:var(--faint)}
.pins div.res{opacity:.5;text-decoration:line-through}
.pins b{flex:none;width:22px;height:22px;border-radius:50%;background:var(--red);display:grid;place-items:center;font-weight:400;font-size:.72rem}
.pins p{margin:0;flex:1}
.pins button{background:none;border:1px solid var(--line);border-radius:999px;color:var(--dim);font-size:.75rem;padding:2px 9px}

/* comments / chat */
.thread{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.msg{display:flex;gap:10px;align-items:flex-start;animation:rise .4s var(--ease) both}
.msg .bub{background:var(--card2);border-radius:4px 18px 18px 18px;padding:10px 14px;max-width:min(560px,100%);min-width:0}
[dir=rtl] .msg .bub{border-radius:18px 4px 18px 18px}
.msg.me{flex-direction:row-reverse}
.msg.me .bub{background:#fff;color:#000;border-radius:18px 4px 18px 18px}
[dir=rtl] .msg.me .bub{border-radius:4px 18px 18px 18px}
.msg.me .bub .who{color:rgba(0,0,0,.55)}
.msg.sys .bub{background:rgba(203,0,0,.14);border:1px solid rgba(203,0,0,.45)}
.bub .who{font-size:.75rem;color:var(--dim);margin-bottom:3px;display:flex;gap:8px}
.bub p{margin:0;white-space:pre-wrap;word-wrap:break-word;line-height:1.6;unicode-bidi:plaintext;text-align:start}
.bub img{border-radius:10px;margin-top:6px;max-height:260px;display:block}
.bub audio{margin-top:6px;max-width:240px;height:36px}
.bub a.file{display:inline-block;margin-top:6px;color:inherit;text-decoration:underline;font-size:.85rem}
.mention{color:var(--red2)}
.msg.me .mention{color:var(--red)}
.compose{display:flex;gap:8px;align-items:flex-end;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:8px}
.compose textarea{flex:1;background:none;border:0;outline:none;resize:none;min-height:40px;max-height:180px;padding:9px 8px;line-height:1.5}
.compose .ib{width:38px;height:38px;border-color:transparent}
.compose .ib.send{background:#fff;color:#000}
.compose .ib.rec{background:var(--red);border-color:var(--red);animation:beat 1.2s infinite}
.attp{font-size:.8rem;color:var(--dim);padding:4px 10px}
.hist{font-size:.8rem;color:var(--dim);display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.hist div{display:flex;justify-content:space-between;gap:8px}

/* people */
.person{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--faint);border-radius:18px;padding:14px;flex-wrap:wrap}
.person .t{flex:1;min-width:150px}
.person .t b{font-weight:400;display:block}
.person .t small{color:var(--dim);font-size:.8rem;direction:ltr;display:inline-block}
.person select.inp{width:auto}
.req{border-color:rgba(203,0,0,.6);background:linear-gradient(135deg,rgba(203,0,0,.15),transparent 60%)}
.wl{display:flex;flex-direction:column;gap:10px}
.wlb{height:6px;background:var(--faint);border-radius:6px;overflow:hidden}
.wlb i{display:block;height:100%;background:#fff;border-radius:6px;transition:width .8s var(--ease)}
.wlb i.hot{background:var(--red)}

/* library */
.li{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--faint);border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;transition:transform .3s var(--ease)}
.li:hover{transform:translateY(-3px)}
.li .th{aspect-ratio:4/3;background:#000;display:grid;place-items:center;color:var(--dim);overflow:hidden}
.li .th img{width:100%;height:100%;object-fit:cover}
.li .m{padding:10px 12px;font-size:.85rem;display:flex;justify-content:space-between;gap:6px}
.li .m small{color:var(--dim)}

/* auth */
.auth{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:24px 16px}
.authb{width:min(460px,100%)}
.authb .lgw{display:flex;justify-content:center;margin-bottom:28px}
.authb .lgw svg{width:min(260px,70vw);fill:#fff}
.authb .lgw .pole,.authb .lgw .bolt{fill:var(--red)}
.seg{display:flex;background:var(--card);border:1px solid var(--faint);border-radius:999px;padding:4px;margin-bottom:18px}
.seg button{flex:1;border:0;background:none;color:var(--dim);padding:9px;border-radius:999px;transition:all .3s var(--ease)}
.seg button.on{background:#fff;color:#000}
.roles{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:14px}
.roles button{border:1px solid var(--line);background:none;border-radius:16px;padding:12px 6px;color:var(--dim);font-size:.82rem;transition:all .25s var(--ease)}
.roles button b{display:block;color:#fff;font-weight:400;font-size:.92rem;margin-bottom:3px}
.roles button.on{border-color:var(--red);background:rgba(203,0,0,.15);color:#fff}
.err{color:var(--red2);font-size:.88rem;min-height:1.3em;margin:4px 0 10px}
.wait{text-align:center}
.wait .orb{width:90px;height:90px;margin:0 auto 22px;border-radius:50%;border:1.5px solid var(--line);position:relative;animation:spin 6s linear infinite}
.wait .orb::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--red);box-shadow:0 0 14px var(--red)}
@keyframes spin{to{transform:rotate(360deg)}}

/* bell panel */
#np{position:fixed;top:calc(68px + env(safe-area-inset-top,0px));inset-inline-end:max(12px,3vw);width:min(400px,calc(100vw - 24px));max-height:min(70vh,620px);overflow:auto;background:#0d2026;border:1px solid var(--line);border-radius:22px;z-index:60;box-shadow:0 30px 80px rgba(0,0,0,.6);transform-origin:top left;animation:npin .35s var(--ease)}
[dir=rtl] #np{transform-origin:top left}
@keyframes npin{from{opacity:0;transform:translateY(-8px) scale(.96)}}
.nh{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--faint);position:sticky;top:0;background:#0d2026}
.ni{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--faint);width:100%;background:none;border-inline:0;border-top:0;text-align:start;color:#fff;transition:background .2s}
.ni:hover{background:var(--faint)}
.ni.un{background:rgba(203,0,0,.08)}
.ni.un::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;margin-top:8px}
.ni .t{flex:1;min-width:0}
.ni b{font-weight:400;font-size:.9rem;display:block}
.ni p{margin:3px 0 0;font-size:.84rem;color:rgba(255,255,255,.75);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ni small{color:var(--dim);font-size:.74rem}

/* modal + toast */
.mdl{position:fixed;inset:0;z-index:90;background:rgba(3,10,12,.7);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:16px;animation:fade .25s ease}
@keyframes fade{from{opacity:0}}
.mdb{width:min(620px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#0f2228;border:1px solid var(--line);border-radius:24px;padding:22px;animation:rise .4s var(--ease)}
.mdb h3{margin:0 0 16px;font-weight:400;font-size:1.25rem}
.mdb.sm{width:min(420px,100%)}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,30px);opacity:0;background:#fff;color:#000;padding:10px 20px;border-radius:999px;z-index:300;transition:all .35s var(--ease);pointer-events:none;font-size:.93rem;max-width:calc(100vw - 32px);text-align:center}
#toast.on{transform:translate(-50%,0);opacity:1}
.lb{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.92);display:grid;place-items:center;padding:20px;animation:fade .2s}
.lb img{max-width:100%;max-height:100%;border-radius:10px}
.load{display:flex;justify-content:center;padding:60px}
.load i{width:34px;height:34px;border-radius:50%;border:2px solid var(--faint);border-top-color:var(--red);animation:spin .8s linear infinite}

@media(max-width:640px){
  .top{gap:8px;flex-wrap:wrap}
  .tabs{order:3;flex-basis:100%}
  .brand svg{height:18px}
  .tops{margin-inline-start:auto}
  main{padding-top:20px}
  .row{grid-template-columns:auto 1fr;gap:10px}
  .row .e{grid-column:1/-1;justify-content:flex-start}
  .roles{grid-template-columns:1fr}
}

/* ---------- motion like mzn ---------- */
html.mgc body,html.mgc a,html.mgc button,html.mgc label,html.mgc select,html.mgc summary,html.mgc [data-go],html.mgc [data-t],html.mgc .row{cursor:none}
html.mgc input,html.mgc textarea{cursor:text}
html.mgc .dz.pinmode{cursor:crosshair}
.mgcur{position:fixed;left:0;top:0;width:26px;height:26px;margin:-6px 0 0 -6px;pointer-events:none;z-index:2147483646;transition:width .25s,height .25s,margin .25s,opacity .2s;will-change:transform}
.mgcur svg{width:100%;height:100%;display:block;overflow:visible;filter:drop-shadow(0 1px 4px rgba(0,0,0,.55));transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.mgcur .a{fill:#fff}.mgcur .p{fill:var(--red)}
.mgcur.big{width:44px;height:44px;margin:-14px 0 0 -14px}.mgcur.big svg{transform:rotate(180deg)}
.mgcur.big .p{fill:var(--red2);filter:drop-shadow(0 0 3px var(--red2))}
.mgcur.down svg{transform:scale(.82)}.mgcur.big.down svg{transform:rotate(180deg) scale(.82)}
.mgcur.off,.mgcur.hid{opacity:0}
.btn,.fab,#bell,.mag{transition:transform .35s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s,color .2s,box-shadow .2s}
.mgsc{position:fixed;inset-inline-start:max(16px,env(safe-area-inset-left,0px));bottom:max(18px,calc(env(safe-area-inset-bottom,0px) + 14px));z-index:30;width:52px;height:52px;padding:10px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 75%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(10px) scale(.9);pointer-events:none;transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1)}
.mgsc.on{opacity:1;transform:none;pointer-events:auto}
.mgsc svg{width:100%;height:100%;display:block}
.mgsc .bg path{fill:rgba(255,255,255,.18)}
.mgsc .fg path{fill:#fff}.mgsc .fg path+path{fill:var(--red)}
.mgsc.full{box-shadow:0 0 0 1px var(--red),0 0 18px rgba(203,0,0,.45)}
@media(hover:none){.mgcur{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@media(hover:none){body{cursor:auto}}

/* v4.2: mention picker, notification banner, client info */
.compose{position:relative}
.mlist{position:absolute;bottom:calc(100% + 6px);inset-inline-start:0;min-width:240px;max-width:100%;background:var(--ink2,#0f2329);border:1px solid var(--line);border-radius:14px;padding:6px;display:none;z-index:20;box-shadow:0 12px 30px rgba(0,0,0,.45)}
.mlist.on{display:block}
.mlist button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;background:none;color:inherit;border-radius:10px;font:inherit;text-align:start;cursor:pointer}
.mlist button b{font-weight:400;flex:1}.mlist button small{color:var(--dim);font-size:.75rem}
.mlist button.on,.mlist button:hover{background:rgba(255,255,255,.08)}
.nban{display:flex;align-items:center;gap:12px;margin-bottom:18px;border-color:var(--red)}
.nban p{margin:0;flex:1;font-size:.9rem}.nban>span{font-size:1.3rem}
.kv.ci dd{white-space:normal;unicode-bidi:plaintext;text-align:start}
.kv.ci{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:10px 18px;align-items:baseline}
.kv.ci dt,.kv.ci dd{margin:0;text-align:start}
.fref{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;word-break:break-word}
.fref i{font-style:normal;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;background:var(--red);color:#fff;font-size:.9rem;letter-spacing:.04em}

#npops{position:fixed;top:76px;inset-inline-end:16px;z-index:120;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px))}
.npop{display:flex;gap:12px;align-items:flex-start;text-align:start;width:100%;padding:14px;border-radius:18px;border:1px solid var(--red);background:var(--ink2);color:#fff;font:inherit;box-shadow:0 18px 40px rgba(0,0,0,.5);animation:npIn .45s var(--ease);transition:opacity .35s,transform .35s;cursor:pointer}
.npop.out{opacity:0;transform:translateY(-8px)}
.npop .t{flex:1;min-width:0}.npop b{font-weight:400;display:block;margin-bottom:3px}.npop p{margin:0;color:var(--dim);font-size:.86rem;unicode-bidi:plaintext}
.npop i{font-style:normal;color:var(--dim);padding:0 4px}
@keyframes npIn{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:none}}

.row .t small.lastev{display:block;color:var(--dim);font-size:.76rem;margin-top:3px;unicode-bidi:plaintext}
.card.wl.click{cursor:pointer;transition:border-color .2s,transform .2s}.card.wl.click:hover{border-color:var(--red);transform:translateY(-2px)}

#rf svg{transition:transform .4s var(--ease)}#rf:hover svg{transform:rotate(90deg)}
#rf.spin svg{animation:rfs .8s linear infinite}@keyframes rfs{to{transform:rotate(360deg)}}

.av{overflow:hidden}.av img.fc{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}

/* ===== v4.7 ===== */
.top .bk svg{transform:none}
.mdb.wide{max-width:min(1100px,100%);width:100%}
.tplrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:-4px 0 16px}
.tplrow #tpls{display:flex;flex-wrap:wrap;gap:6px}
.chip.tpl{cursor:pointer}.chip.tpl i{font-style:normal;margin-inline-start:8px;opacity:.6}.chip.tpl i:hover{opacity:1;color:var(--red2)}
.recb{border:1px dashed var(--line);border-radius:16px;padding:12px 14px;margin-bottom:14px}
.recb summary{cursor:pointer;color:var(--dim)}.recb[open] summary{color:#fff}
.tvw{display:flex;justify-content:flex-start;margin-bottom:12px}.seg.tv{display:inline-flex;margin:0}.seg.tv button{padding:7px 16px;flex:none}
.board{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start}
.bcol{background:var(--card);border:1px solid var(--faint);border-radius:18px;padding:10px;min-height:200px;transition:border-color .2s,background .2s}
.bcol.over{border-color:var(--red);background:rgba(203,0,0,.08)}
.bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.bh small{color:var(--dim)}
.bl{display:flex;flex-direction:column;gap:8px}
.bcard{position:relative;background:var(--card2);border:1px solid var(--faint);border-radius:14px;padding:11px 12px 11px 12px;cursor:grab;transition:transform .2s,border-color .2s}
.bcard:hover{border-color:var(--line);transform:translateY(-1px)}.bcard.drag{opacity:.45}
.bcard b{display:block;font-weight:400;font-size:.92rem;margin-bottom:4px;padding-inline-start:14px}
.bcard small{display:block;color:var(--dim);font-size:.76rem;margin-top:2px}
.bcard .pr{position:absolute;inset-inline-start:11px;top:16px;width:7px;height:7px}
.calh{display:flex;align-items:center;gap:10px;margin-bottom:12px}.calh b{font-weight:400;font-size:1.15rem;min-width:150px;text-align:center}
.cal{border:1px solid var(--faint);border-radius:18px;overflow:hidden}
.cw,.cg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cw span{padding:8px;text-align:center;color:var(--dim);font-size:.8rem;background:var(--card)}
.cd{min-height:104px;border-top:1px solid var(--faint);border-inline-start:1px solid var(--faint);padding:6px;display:flex;flex-direction:column;gap:3px;min-width:0}
.cd.x{background:rgba(255,255,255,.015)}.cd.past .dn{opacity:.5}.cd.td{background:rgba(203,0,0,.08)}.cd.td .dn{background:var(--red);color:#fff;border-radius:999px;padding:0 7px}
.dn{font-size:.8rem;color:var(--dim);align-self:flex-start}
.ct{border:0;border-radius:7px;padding:3px 7px;font:inherit;font-size:.72rem;text-align:start;color:#fff;background:var(--card2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-inline-start:3px solid var(--line);cursor:pointer}
.ct.urgent{border-inline-start-color:var(--red2)}.ct.high{border-inline-start-color:#ff9f43}.ct.medium{border-inline-start-color:#4aa3ff}.ct.low{border-inline-start-color:#8a9ba0}
.ct.dn2{opacity:.45;text-decoration:line-through}.ct.lt{background:rgba(203,0,0,.25)}
.cd .more{color:var(--dim);font-size:.7rem}
@media(max-width:700px){.cd{min-height:70px;padding:3px}.ct{font-size:.62rem;padding:2px 4px}.cw span{font-size:.66rem;padding:6px 2px}}
.cmpb{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:12px}
.cmp2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cmp2 figure{margin:0;background:#000;border-radius:14px;overflow:hidden}.cmp2 img{width:100%;max-height:68vh;object-fit:contain;display:block}.cmp2 figcaption{padding:8px;text-align:center;color:var(--dim)}
.cmps{position:relative;background:#000;border-radius:14px;overflow:hidden}.cmps img{width:100%;max-height:70vh;object-fit:contain;display:block}
.cmps .top{position:absolute;inset:0}.cmps .ln{position:absolute;top:0;bottom:0;width:2px;background:var(--red);transform:translateX(-1px)}
.cmps .la,.cmps .lb2{position:absolute;top:10px;background:rgba(0,0,0,.6);padding:3px 10px;border-radius:999px;font-size:.8rem}.cmps .la{left:10px}.cmps .lb2{right:10px}
@media(max-width:700px){.cmpb{grid-template-columns:1fr}.cmp2{grid-template-columns:1fr}}
.rt{width:100%;border-collapse:collapse;font-size:.9rem}.rt th,.rt td{padding:11px 14px;text-align:start;border-bottom:1px solid var(--faint);white-space:nowrap}
.rt th{color:var(--dim);font-weight:400;font-size:.8rem}.rt tr.rp{cursor:pointer}.rt tr.rp:hover td{background:rgba(255,255,255,.03)}
.rt td b{font-weight:400;color:#fff}.rt .av{display:inline-grid;vertical-align:middle;margin-inline-end:6px}
.rt tr.rpd td{white-space:normal;background:rgba(255,255,255,.02)}.rt tr.rpd a{display:block;color:var(--dim);padding:4px 0;font-size:.84rem}
.av.big{width:84px;height:84px;font-size:1.6rem}
.recr{display:flex;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--faint)}.recr>div{flex:1;min-width:0}.recr b{font-weight:400;display:block}.recr small{color:var(--dim);font-size:.78rem}.recr.off{opacity:.55}
@media print{
  html,body{background:#fff!important;color:#000!important}
  .top,.noprint,.mgcur,.mgsc,#npops,.nban,#toast{display:none!important}
  .card,.stat{background:#fff!important;border-color:#ccc!important;color:#000!important;box-shadow:none!important}
  .stat b,.rt td b,h1,h2{color:#000!important}.sub,.stat span,.rt th{color:#555!important}
  .rt tr.rpd{display:table-row!important}.rt tr.rpd[hidden]{display:none!important}
  body *{animation:none!important;transition:none!important}
}