:root{--bg:#f3f5f9;--card:#fff;--text:#1d2433;--muted:#6b7385;--line:#e1e5ed;--accent:#2b6cff;--accent-soft:rgba(43,108,255,.12);--danger:#e5484d;--ok:#2e9e5b;--warn:#e8a317;--nav:#14213d;--nav-text:#c9d3ea;--shadow:0 6px 24px rgba(20,33,61,.12);--r:12px}
@media(prefers-color-scheme:dark){:root{--bg:#10131a;--card:#1a1e28;--text:#e8ebf1;--muted:#8f98ac;--line:#2b3140;--accent:#5b8dff;--accent-soft:rgba(91,141,255,.16);--nav:#0b0e14;--shadow:0 6px 24px rgba(0,0,0,.5)}}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--card);border-radius:9px;padding:7px 12px;display:inline-flex;gap:6px;align-items:center;justify-content:center;white-space:nowrap}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}button.primary:hover{filter:brightness(1.08)}
button.danger{background:var(--danger);border-color:var(--danger);color:#fff}
button.ghost{border-color:transparent;background:transparent}button.ghost:hover{background:var(--accent-soft)}
button.sm{padding:3px 9px;font-size:12px}button.wide{width:100%}
button.on{background:var(--accent-soft);border-color:var(--accent)}button.off{background:rgba(229,72,77,.15);border-color:var(--danger)}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input:disabled,select:disabled,textarea:disabled{opacity:.85;background:transparent}
textarea{resize:vertical}
label{display:block;margin:10px 0 4px;color:var(--muted);font-size:12px}
a{color:var(--accent)}
.muted{color:var(--muted)}.nowrap{white-space:nowrap}.spacer{flex:1}.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.err{color:var(--danger);min-height:18px;margin-top:6px}
.ico{display:inline-flex}

/* auth */
.authwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.auth{width:min(380px,100%);background:var(--card);padding:28px;border-radius:16px;border:1px solid var(--line);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;text-align:center}
.auth h1{margin:0;font-size:22px}
.logo{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.logo.big{width:56px;height:56px;font-size:22px;margin:0 auto}

/* shell */
.shell{display:flex;height:100vh}
.nav{width:220px;flex:none;background:var(--nav);color:var(--nav-text);display:flex;flex-direction:column;padding:14px 10px;gap:4px}
.brand{display:flex;align-items:center;gap:10px;padding:2px 6px 12px;color:#fff;font-weight:700;font-size:16px}
.newbtn{margin:0 0 10px;padding:10px}
.navitem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--nav-text);text-decoration:none;position:relative}
.navitem:hover{background:rgba(255,255,255,.07)}.navitem.on{background:rgba(255,255,255,.14);color:#fff}
.badge{margin-left:auto;background:var(--danger);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px}
.me{display:flex;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid rgba(255,255,255,.1);color:#fff}
.me .meta{display:flex;flex-direction:column;min-width:0;flex:1}.me .meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .muted{color:var(--nav-text);font-size:12px}.me button{color:var(--nav-text)}
.content{flex:1;min-width:0;overflow:auto;padding:20px 24px}
.ptitle{margin:0 0 14px;font-size:20px}
.ava{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:600;flex:none}
.ava.grp{width:40px;height:40px;background:rgba(127,135,150,.25);color:var(--text);font-size:18px}
.rowava{display:inline-flex;align-items:center;gap:8px}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}

/* dashboard */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;cursor:pointer}
.stat:hover{border-color:var(--accent)}.stat .n{font-size:28px;font-weight:700;line-height:1.1}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.panel h3{margin:0 0 8px;font-size:15px}
.row-t{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--line);color:var(--text);text-decoration:none}
.row-t:hover .rt{color:var(--accent)}.row-t .rt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* filters */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filters select{width:auto;min-width:140px}
.searchbox{position:relative;flex:1;min-width:180px;max-width:320px}
.searchbox .ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--muted)}
.searchbox input{padding-left:32px}

/* pills / cards */
.pill{display:inline-block;padding:1px 8px;border-radius:99px;background:rgba(127,135,150,.18);font-size:11px;white-space:nowrap}
.p-high{background:rgba(232,163,23,.2);color:#b86e00}.p-urgent{background:rgba(229,72,77,.18);color:var(--danger)}.p-low{opacity:.8}
.live{color:var(--ok);font-weight:600;font-size:12px}
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding-bottom:12px;min-height:60vh}
.col{flex:1 0 250px;max-width:340px;background:rgba(127,135,150,.1);border-radius:var(--r);padding:8px;transition:outline .1s}
.col.over{outline:2px dashed var(--accent);background:var(--accent-soft)}
.colhead{display:flex;align-items:center;gap:8px;padding:4px 6px 10px}
.count{margin-left:auto;color:var(--muted);background:var(--card);border-radius:99px;padding:0 8px;font-size:12px}
.cards{min-height:60px}.empty{color:var(--muted);text-align:center;padding:16px 0;font-size:12px}
.card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card:hover{border-color:var(--accent)}.card.drag{opacity:.35}
.card.prio-high{border-left-color:var(--warn)}.card.prio-urgent{border-left-color:var(--danger)}.card.prio-low{border-left-color:#9fb3c8}.card.prio-normal{border-left-color:var(--accent)}
.card .ct{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--muted);margin-bottom:4px}.card .num{font-weight:600}
.prod{font-size:11px;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:0 6px;margin-left:6px}
.card .t{font-weight:600;margin-bottom:8px;word-break:break-word}
.cmeta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.unassigned{width:24px;height:24px;border-radius:50%;border:1px dashed var(--muted);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px}

/* table */
.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;background:rgba(127,135,150,.06)}
th.sortable{cursor:pointer;user-select:none}th.sortable:hover{color:var(--accent)}
tr.clickable{cursor:pointer}tr.clickable:hover td{background:var(--accent-soft)}
td.ttl{min-width:220px}.overdue{color:var(--danger);font-weight:600}
td select{width:auto}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(10,15,30,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.modal{background:var(--card);border-radius:16px;width:min(620px,100%);max-height:94vh;overflow:auto;padding:20px;box-shadow:var(--shadow)}
.modal.narrow{width:min(460px,100%)}
.mhead{display:flex;justify-content:space-between;align-items:center}.mhead h3{margin:0}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.actions.left{justify-content:flex-start;flex-wrap:wrap;margin:0 0 12px}
.picklist{max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:9px;padding:6px}
.pick{display:flex;gap:8px;align-items:center;margin:0;padding:5px 4px;color:var(--text);font-size:14px;cursor:pointer}.pick input{width:auto}
.mrow{display:flex;justify-content:space-between;align-items:center;margin:4px 0}

/* drawer */
.drawer-bg{position:fixed;inset:0;background:rgba(10,15,30,.4);z-index:40;display:flex;justify-content:flex-end}
.drawer{width:min(620px,100%);height:100%;background:var(--card);display:flex;flex-direction:column;box-shadow:var(--shadow);animation:slide .18s ease-out}
@keyframes slide{from{transform:translateX(40px);opacity:0}}
.dhead{display:flex;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.dscroll{flex:1;overflow:auto;padding:14px 18px;display:flex;flex-direction:column}
.bigtitle{font-size:18px;font-weight:700;border-color:transparent;padding:6px 8px;margin-left:-8px;width:calc(100% + 8px)}
.bigtitle:not(:disabled):hover{border-color:var(--line)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}.fld label{margin:8px 0 3px}
.desc{white-space:pre-wrap;word-break:break-word;background:rgba(127,135,150,.08);padding:10px;border-radius:9px}
.sect{margin:18px 0 6px;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* thread */
.thread{display:flex;flex-direction:column;flex:1;min-height:0}
.msgs{flex:1;overflow:auto;padding:8px 4px;min-height:200px;max-height:520px;display:flex;flex-direction:column}
.dscroll .msgs{max-height:none;overflow:visible;min-height:0}
.dscroll .thread{flex:none}
.day{text-align:center;margin:10px 0;font-size:12px;color:var(--muted)}.day span{background:rgba(127,135,150,.15);padding:2px 12px;border-radius:99px}
.evt{text-align:center;color:var(--muted);font-size:12px;margin:6px 0}.evt .tm,.bub .tm{margin-left:8px;font-size:11px;opacity:.7}
.msg{max-width:82%;margin-top:8px;align-self:flex-start}.msg.same{margin-top:2px}.msg.mine{align-self:flex-end}
.who{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;margin-bottom:2px}.who .role{font-weight:400;color:var(--muted)}
.bub{background:rgba(127,135,150,.15);padding:7px 11px;border-radius:14px;white-space:pre-wrap;word-break:break-word;display:inline-block}
.msg.mine .bub{background:var(--accent);color:#fff}.msg.mine .bub a{color:#fff}
.empty-chat{text-align:center;margin:auto}
.composer{display:flex;gap:8px;align-items:flex-end;padding:8px;border-top:1px solid var(--line);background:var(--card);position:sticky;bottom:0}
.composer textarea{resize:none;max-height:140px;overflow:auto}
.dscroll .composer{border:1px solid var(--line);border-radius:12px;margin-top:8px;position:static}

/* chats view */
.chats{display:flex;height:100vh;margin:-20px -24px;background:var(--card)}
.chatlist{width:320px;flex:none;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.sidehead{display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line)}.sidehead .searchbox{max-width:none}
.chatlist .items{flex:1;overflow:auto}
.item{display:flex;gap:12px;align-items:center;padding:10px 14px;cursor:pointer}
.item:hover{background:rgba(127,135,150,.1)}.item.on{background:var(--accent-soft)}
.item .meta{flex:1;min-width:0}.item .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.unread{background:var(--accent);color:#fff;border-radius:99px;font-size:11px;padding:1px 7px;flex:none}
.chatpane{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.panehead{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);min-height:58px}
.panehead .ptxt{flex:1;min-width:0}.backbtn{display:none}
.chatpane .thread .msgs{max-height:none;padding:10px 18px}

/* toasts */
#toasts{position:fixed;top:14px;right:14px;z-index:90;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 28px))}
.toast{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:10px 12px;box-shadow:var(--shadow);display:flex;gap:8px;align-items:center}
.toast.err{border-left-color:var(--danger)}.toast.call{border-left-color:var(--ok)}.toast .tt{flex:1;word-break:break-word}

/* call */
.callbar{position:fixed;right:16px;bottom:16px;z-index:70;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px;width:min(380px,calc(100vw - 32px));box-shadow:var(--shadow)}
.callbar.big{width:min(900px,calc(100vw - 32px))}
.chead{display:flex;gap:6px;align-items:center}
.tiles{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.tile{flex:1 1 140px;background:rgba(127,135,150,.12);border-radius:10px;padding:8px;min-width:0}
.tile .who{margin:0;font-weight:500}
.tile.screen{flex:1 1 100%}.tile video{width:100%;max-height:60vh;background:#000;border-radius:8px;margin-bottom:6px}
.controls{display:flex;gap:8px;flex-wrap:wrap}.waiting{padding:8px}

/* mobile */
@media(max-width:800px){
  .shell{flex-direction:column-reverse}
  .nav{width:100%;flex-direction:row;padding:4px 6px;align-items:center;overflow-x:auto;gap:2px}
  .brand,.me .meta,.brandtxt,.spacer{display:none}
  .newbtn{margin:0;padding:8px}.newbtn span:last-child{display:none}
  .navitem{flex-direction:column;gap:2px;padding:6px 10px;font-size:11px;flex:1}
  .me{border:0;padding:0}
  .content{padding:12px}
  .fgrid{grid-template-columns:1fr}
  .chats{margin:-12px;height:calc(100vh - 58px)}
  .chatlist{width:100%;border:0}.chatpane{display:none}
  .chats.showpane .chatlist{display:none}.chats.showpane .chatpane{display:flex}
  .backbtn{display:inline-flex}
  .panehead button:not(.backbtn){padding:6px 8px;font-size:12px}
  .col{flex-basis:80vw}
  .callbar{bottom:72px}
}
.tile.cam{flex:1 1 200px}.tile video.mirror{transform:scaleX(-1)}.tile.cam video{max-height:260px;object-fit:cover}
.tile.screen video{object-fit:contain}
.dropzone{display:flex;gap:10px;align-items:center;border:2px dashed var(--line);border-radius:10px;padding:12px;color:var(--muted);cursor:pointer;font-size:13px}
.dropzone:hover,.dropzone.over{border-color:var(--accent);background:var(--accent-soft);color:var(--text)}
.filelist{margin-top:6px}.fitem{display:flex;gap:8px;align-items:center;padding:4px 0}.fitem .fn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atts{display:flex;flex-direction:column;gap:6px}.att{display:flex;gap:10px;align-items:center;padding:6px;border:1px solid var(--line);border-radius:10px}
.att img{width:56px;height:56px;object-fit:cover;border-radius:8px;display:block}.att .ai{flex:1;min-width:0}.att .fn{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fileico{width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(127,135,150,.15);border-radius:8px;color:var(--muted)}
.docs{position:relative;min-height:60vh;border-radius:var(--r)}.docs.over{outline:2px dashed var(--accent);outline-offset:4px;background:var(--accent-soft)}
.crumbs{margin:0 0 12px;font-size:14px}.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.dn{display:flex;gap:12px;align-items:center;min-width:240px;cursor:pointer}.dn .muted{font-size:12px}
.dico{width:36px;height:36px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;background:rgba(127,135,150,.15);color:var(--muted);flex:none}
.dico.folder{background:rgba(232,163,23,.18);color:#c98a00}
.acts{text-align:right}.acts button,.iconbtn{padding:5px 7px}.iconbtn{display:inline-flex;border-radius:8px;color:var(--text)}.iconbtn:hover{background:var(--accent-soft)}
.docempty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:60px 0;color:var(--muted)}
#upl{position:fixed;left:240px;bottom:16px;z-index:80;width:min(360px,calc(100vw - 32px))}
.uplbox{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:var(--shadow);margin-top:8px}
.urow{margin:8px 0}.urow .fn{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar{height:6px;background:rgba(127,135,150,.2);border-radius:99px;overflow:hidden;margin:4px 0}.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s}
.urow.ok .bar i{background:var(--ok)}.urow.bad .bar i{background:var(--danger)}.urow.bad .muted{color:var(--danger)}
@media(max-width:800px){#upl{left:16px;bottom:76px}}
#viewer{position:fixed;inset:0;z-index:100;background:rgba(8,12,22,.92);display:flex;flex-direction:column;outline:none}
.vhead{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.vtitle{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn.dl{border:1px solid var(--line);padding:6px 10px;gap:6px;align-items:center;text-decoration:none}
.vbody{flex:1;min-height:0;overflow:auto;display:flex;align-items:center;justify-content:center;padding:12px}
.vmsg{color:#dfe5f3;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}.vmsg.err{color:#ffb3b6}
.btn{display:inline-block;padding:8px 14px;border-radius:9px;text-decoration:none;border:1px solid var(--line)}.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.vimg{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;background:repeating-conic-gradient(#fff 0 25%,#eef 0 50%) 50%/20px 20px}.vimg.full{max-width:none;max-height:none;cursor:zoom-out}
.vbody:has(.vimg.full){align-items:flex-start;justify-content:flex-start}
.vmedia{max-width:100%;max-height:100%}
.vframe{width:min(1000px,100%);height:100%;border:0;background:#fff;border-radius:8px}.vframe.pdf{width:min(1200px,100%)}
.vtext{margin:0;width:min(1100px,100%);max-height:100%;overflow:auto;background:var(--card);color:var(--text);padding:16px;border-radius:8px;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-word;align-self:flex-start}
.vtable{width:min(1200px,100%);max-height:100%;overflow:auto;background:var(--card);border-radius:8px;align-self:flex-start}.vtable td,.vtable th{white-space:nowrap}
.sheetbox{width:min(1300px,100%);height:100%;display:flex;flex-direction:column;gap:6px}.sheetwrap{flex:1;min-height:0}.sheetwrap .vframe{width:100%}
.sheettabs{display:flex;gap:4px;overflow-x:auto}.sheettabs button{padding:5px 12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chip{border-radius:99px;padding:5px 12px;font-size:13px}.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip .cnt{background:rgba(127,135,150,.22);border-radius:99px;padding:0 7px;font-size:11px}.chip.on .cnt{background:rgba(255,255,255,.25)}
.daterange{display:flex;gap:6px;align-items:center;margin:0;color:var(--muted);font-size:13px}.daterange input{width:auto}
tr.late td{background:rgba(229,72,77,.13)}tr.late td:first-child{box-shadow:inset 4px 0 0 var(--danger)}tr.late:hover td{background:rgba(229,72,77,.22)}
tr.late td.ttl,tr.late td:first-child{color:var(--danger)}
.card.late{background:rgba(229,72,77,.1);border-color:var(--danger);border-left-color:var(--danger)}
.row-t.late .rt{color:var(--danger);font-weight:600}
.card{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.dragging{cursor:grabbing;user-select:none}body.dragging *{cursor:grabbing!important}
.card.ghost{position:fixed;z-index:200;margin:0;pointer-events:none;box-shadow:0 12px 32px rgba(0,0,0,.3);transform:rotate(2deg);opacity:.95}
.card.can{cursor:grab}
.board{align-items:stretch}.col{min-height:60vh}
.chead{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;padding:2px 2px 4px}
.callbar.moving{box-shadow:0 14px 40px rgba(0,0,0,.4)}.callbar.moving .chead{cursor:grabbing}
.rolepick{text-align:left}.rolepick label{margin-top:0}.small{font-size:12px;margin-top:6px}
.banner{background:rgba(232,163,23,.16);border:1px solid var(--warn);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.pending{font-size:11px;color:#f5c04a}
tr.pendingrow td{background:rgba(232,163,23,.1)}.reqcell{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}