/* Mazaboard — рабочее пространство: журнал, хранилище, чат, личный кабинет. Плоско и спокойно, без рамок-карточек с полосами. */

/* ---------- общее ---------- */
.wav { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; color: #fff; font: 700 12px/1 var(--head); overflow: visible; }
.wav img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.wav.c0 { background: #5B7FE0; } .wav.c1 { background: #2FA886; } .wav.c2 { background: #D9963A; } .wav.c3 { background: #8A6FE0; } .wav.c4 { background: #D96666; } .wav.c5 { background: #1EA7C5; }
.wav.gen { background: var(--accent-soft); color: var(--accent); } .wav.gen svg { width: 62%; height: 62%; fill: none; stroke: currentColor; stroke-width: 5; }
.wav.deal { background: var(--amber-soft); color: var(--amber); } .wav.deal svg { width: 52%; height: 52%; }
.wav.sup { background: var(--mint-soft); color: var(--mint); } .wav.sup svg { width: 58%; height: 58%; }
.wav .on { position: absolute; right: -2px; bottom: -2px; width: 30%; height: 30%; min-width: 9px; min-height: 9px; max-width: 14px; max-height: 14px; border-radius: 50%; background: var(--ink3); border: 2px solid var(--panel); }
.wav .on.y { background: var(--mint); }
.c-on { color: var(--mint); font-weight: 700; }
.c-r { color: var(--rose); }
.req { color: var(--rose); }
.danger { color: var(--rose) !important; }
.chipb { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--ink2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.chipb svg.i { width: 13px; height: 13px; }
.chipb:hover { background: var(--bg2); color: var(--ink); }
.chipb.on { background: var(--accent-soft); color: var(--accent2); border-color: transparent; }
.chipb.on.warn { background: var(--amber-soft); color: #B87A1E; }
.seg.sm button { height: 26px; padding: 0 10px; font-size: 12px; }
.cvb { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: var(--ink3); flex-shrink: 0; }
.cvb:hover { background: var(--bg2); color: var(--ink); }
.cvb.on { color: var(--accent); }
.cvb svg.i { width: 17px; height: 17px; }
.bdg { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rose); color: #fff; font: 700 10.5px/1 var(--body); font-style: normal; margin-left: 4px; }
.topbar .ic .tbn { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--rose); color: #fff; font: 700 10px/17px var(--body); font-style: normal; text-align: center; border: 2px solid var(--panel); box-sizing: content-box; }
.nav .badge[hidden] { display: none; }
.ferr { color: var(--rose); font-size: 12px; min-height: 0; }
.ferr:empty { display: none; }
.fh { color: var(--ink3); font-size: 11.5px; }
.inp.bad { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(224,108,108,.14); }
.wd-q { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px; border-radius: 10px; background: var(--bg2); color: var(--ink3); flex: 1; min-width: 0; }
.wd-q svg.i { width: 15px; height: 15px; flex-shrink: 0; }
.wd-q input { border: 0; outline: 0; background: transparent; color: var(--ink); width: 100%; font-size: 13px; }
.modal .ft .sp { flex: 1; }
.modal.pv-modal { width: min(1100px, 100%); }
.pv { display: grid; place-items: center; background: var(--bg2); border-radius: 10px; min-height: 300px; }
.pv img { max-width: 100%; max-height: 72vh; border-radius: 8px; }
.pv-f { width: 100%; height: 72vh; border: 0; border-radius: 10px; background: #fff; }

/* значки типов файлов */
.fx { display: inline-grid; place-items: center; width: 34px; height: 40px; border-radius: 7px; font: 800 9px/1 var(--body); letter-spacing: .04em; color: #fff; background: #7A869C; flex-shrink: 0; position: relative; }
.fx::after { content: ''; position: absolute; top: 0; right: 0; width: 9px; height: 9px; background: rgba(255,255,255,.35); border-bottom-left-radius: 4px; }
.fx.pdf { background: #D9534F; } .fx.xls { background: #1E8E5A; } .fx.doc { background: #2F6FD6; } .fx.img { background: #9B5DE5; } .fx.zip { background: #B07A2A; } .fx.cad { background: #0E9AA7; }

/* ---------- всплывающие панели ---------- */
.wpop { position: fixed; z-index: 90; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow2); animation: wpIn .16s ease; }
@keyframes wpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.npop { width: 400px; max-height: min(620px, 80vh); display: flex; flex-direction: column; }
.np-h { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.np-h b { font: 700 15px/1 var(--head); }
.np-n { font-size: 11px; font-weight: 700; color: var(--accent2); background: var(--accent-soft); padding: 3px 7px; border-radius: 8px; }
.np-l { overflow: auto; padding: 0 6px 6px; }
.np-i { display: flex; gap: 12px; width: 100%; text-align: left; padding: 10px; border: 0; background: transparent; border-radius: 10px; color: var(--ink); }
.np-i:hover { background: var(--bg2); }
.np-i.new { background: var(--accent-soft); }
.np-a { position: relative; flex-shrink: 0; }
.np-k { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 800 10px/1 var(--body); font-style: normal; color: #fff; background: var(--ink3); border: 2px solid var(--panel); }
.np-k.b { background: var(--accent); } .np-k.a { background: var(--amber); } .np-k.v { background: var(--violet); }
.np-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 13px; }
.np-t b { font-weight: 600; line-height: 1.35; }
.np-t span { color: var(--ink2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.np-t small { color: var(--ink3); font-size: 11px; }
.np-e { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 24px; text-align: center; color: var(--ink3); }
.np-e svg.i { width: 30px; height: 30px; opacity: .5; }
.np-e b { color: var(--ink); }
.np-e span { font-size: 12.5px; }
.np-f { padding: 10px 14px 14px; border-top: 1px solid var(--line); }
.np-f .btn { width: 100%; justify-content: center; }
.wti { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--bg2); color: var(--ink2); }
.upop, .mpop { width: 270px; padding: 6px; }
.mpop { width: 220px; }
.up-h { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; }
.up-h > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.up-h b { font-size: 14px; }
.up-h span { font-size: 12px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-i { display: flex; align-items: center; gap: 10px; width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font-size: 13px; font-weight: 600; text-align: left; }
.up-i:hover { background: var(--bg2); }
.up-i svg.i { width: 17px; height: 17px; color: var(--ink3); }
.up-i.danger svg.i { color: var(--rose); }
.up-n { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; background: var(--rose); border-radius: 9px; padding: 2px 6px; }
.up-sep { height: 1px; background: var(--line); margin: 6px 4px; }
#wtoasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 8px; }
.wtoast { display: flex; gap: 12px; align-items: flex-start; width: 340px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow2); cursor: pointer; animation: wtIn .25s cubic-bezier(.2,.9,.3,1.2); }
.wtoast > div { display: flex; flex-direction: column; gap: 3px; font-size: 13px; min-width: 0; }
.wtoast span { color: var(--ink2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtoast.out { opacity: 0; transform: translateX(30px); transition: .35s; }
@keyframes wtIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.toast.undo { display: flex; align-items: center; gap: 10px; }
.toast.undo button { border: 0; background: transparent; color: var(--accent); font-weight: 700; margin-left: 6px; }
.rxpop { position: fixed; z-index: 95; display: flex; gap: 2px; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow2); animation: wpIn .14s; }
.rxpop button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; font-size: 20px; transition: transform .12s; }
.rxpop button:hover { background: var(--bg2); transform: scale(1.18); }

/* ---------- всплывающее окно чата ---------- */
.wdock { position: fixed; right: 18px; bottom: 18px; top: calc(var(--top) + 10px); width: 400px; z-index: 80; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(10,15,30,.28), 0 2px 8px rgba(10,15,30,.08); display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(calc(100% + 40px)); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.wdock.open { transform: none; opacity: 1; pointer-events: auto; }
.wdock.hidden-on-page { display: none; }
.wd-h { display: flex; align-items: center; gap: 6px; padding: 12px 10px 10px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.wd-h > b { font: 700 16px/1 var(--head); }
.wd-h.conv { padding-left: 8px; gap: 10px; }
.wd-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wd-t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-t small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-s { padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.wd-f { display: flex; gap: 2px; }
.wd-f button { flex: 1 1 auto; white-space: nowrap; height: 26px; padding: 0 6px; border: 0; border-radius: 13px; background: transparent; color: var(--ink3); font-size: 12px; font-weight: 700; }
.wd-f button.on { background: var(--ink); color: var(--panel); }
.wd-l { flex: 1; overflow: auto; padding: 4px 6px 10px; }
.wd-c { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cl { display: flex; gap: 11px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: var(--ink); }
.cl:hover { background: var(--bg2); }
.cl.on { background: var(--accent-soft); }
.cl-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cl-r { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cl-r b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.cl-r small { font-size: 11px; color: var(--ink3); flex-shrink: 0; }
.cl-l { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl.unr .cl-r b { font-weight: 800; } .cl.unr .cl-l { color: var(--ink2); }
.cl-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #fff; font: 700 11px/20px var(--body); font-style: normal; text-align: center; flex-shrink: 0; }
.cl-n.mu { background: var(--ink3); }
.cl-mu svg.i { width: 13px; height: 13px; color: var(--ink3); }
.cl-e { padding: 30px; text-align: center; color: var(--ink3); font-size: 13px; }

/* ---------- разговор ---------- */
.cv-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 2px; outline: 0; scroll-behavior: auto; }
.cv-load { margin: auto; color: var(--ink3); font-size: 13px; }
.cv-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; color: var(--ink3); max-width: 280px; }
.cv-empty svg.i { width: 34px; height: 34px; opacity: .45; }
.cv-empty b { color: var(--ink); }
.cv-empty span { font-size: 12.5px; }
.cv-day { display: flex; justify-content: center; margin: 12px 0 8px; position: sticky; top: 0; z-index: 2; }
.cv-day span { font-size: 11.5px; font-weight: 700; color: var(--ink2); background: var(--bg2); padding: 4px 10px; border-radius: 10px; text-transform: lowercase; }
.cv-day span::first-letter { text-transform: uppercase; }
.cv-new { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: var(--rose); font-size: 11px; font-weight: 700; }
.cv-new::before, .cv-new::after { content: ''; flex: 1; height: 1px; background: color-mix(in srgb, var(--rose) 40%, transparent); }
.cv-sys { text-align: center; font-size: 12px; color: var(--ink3); margin: 6px 0; }
.msg { display: flex; gap: 8px; align-items: flex-end; position: relative; padding: 1px 0; margin-top: 8px; }
.msg.grp { margin-top: 0; }
.msg.me { justify-content: flex-end; }
.msg.flash .m-b { animation: flash 1.4s; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--amber); } }
.m-ava { width: 30px; flex-shrink: 0; align-self: flex-start; }
.m-col { display: flex; flex-direction: column; gap: 3px; max-width: min(78%, 560px); min-width: 0; }
.msg.me .m-col { align-items: flex-end; }
.m-name { font-size: 12px; font-weight: 700; color: var(--ink2); padding-left: 4px; }
.m-b { position: relative; max-width: 100%; box-sizing: border-box; background: var(--bg2); padding: 8px 12px 18px; border-radius: 16px 16px 16px 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink); min-width: 70px; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.grp:not(.me) .m-b { border-top-left-radius: 6px; }
.msg.me .m-b { background: var(--accent); color: #fff; border-radius: 16px 16px 6px 16px; }
.msg.me.grp .m-b { border-top-right-radius: 6px; }
.msg.del .m-b { background: transparent; border: 1px dashed var(--line2); color: var(--ink3); }
.m-t a { color: inherit; text-decoration: underline; }
.m-tm { position: absolute; right: 10px; bottom: 4px; font-size: 10px; opacity: .6; white-space: nowrap; }
.m-rp { display: flex; min-width: 0; flex-direction: column; gap: 1px; margin: 0 0 6px; padding: 4px 8px; border-radius: 8px; background: rgba(0,0,0,.06); font-size: 12px; cursor: pointer; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-left: 2px solid currentColor; }
.msg.me .m-rp { background: rgba(255,255,255,.16); }
.m-rp b { font-size: 11px; }
.m-rx { display: flex; gap: 4px; flex-wrap: wrap; }
.m-rx button { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; }
.m-rx button b { font-size: 11px; color: var(--ink2); }
.m-rx button.on { border-color: var(--accent); background: var(--accent-soft); }
.m-act { position: absolute; top: -14px; display: none; gap: 1px; padding: 2px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 3; }
.msg:not(.me) .m-act { left: 46px; } .msg.me .m-act { right: 0; }
.msg:hover .m-act { display: flex; }
.m-act button { width: 28px; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--ink3); display: grid; place-items: center; }
.m-act button:hover { background: var(--bg2); color: var(--ink); }
.m-act svg.i { width: 15px; height: 15px; }
.rf { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px; border-radius: 6px; font-weight: 700; font-size: 12.5px; background: rgba(79,123,230,.14); color: var(--accent2); text-decoration: none !important; vertical-align: 1px; }
.rf svg.i { width: 13px; height: 13px; }
.msg.me .rf { background: rgba(255,255,255,.22); color: #fff; }
.rf.d { background: rgba(232,163,61,.16); color: #B87A1E; } .rf.t { background: rgba(47,179,138,.15); color: var(--mint); }
.rcards { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.rcard { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none !important; min-width: min(240px, 100%); max-width: 100%; border: 1px solid var(--line); }
.rcard > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rcard b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rcard small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rci { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--amber-soft); color: var(--amber); flex-shrink: 0; }
.rcard.t .rci { background: var(--mint-soft); color: var(--mint); }
.rcard.t.done b { text-decoration: line-through; color: var(--ink3); }
.rca { font-size: 12px; font-weight: 700; flex-shrink: 0; }
a.rcard:hover { border-color: var(--accent); }
.mimg { display: block; margin: -2px -6px 2px; }
.mimg img { max-width: 280px; max-height: 260px; border-radius: 12px; display: block; }
.mfile { display: flex; align-items: center; gap: 10px; padding: 6px; margin: 2px -4px 0; border-radius: 12px; background: var(--panel); color: var(--ink); min-width: min(230px, 100%); max-width: 100%; }
.mf-n { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mf-n b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-n small { font-size: 11px; color: var(--ink3); }
.cv-typing { min-height: 22px; padding: 0 18px; font-size: 12px; color: var(--ink3); display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink3); animation: dt 1.2s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dt { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.cv-ctx { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 8px 10px; border-radius: 12px 12px 0 0; background: var(--bg2); color: var(--accent); flex-shrink: 0; }
.cv-ctx > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.cv-ctx > div span { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-ctx svg.i { width: 16px; height: 16px; }
.cv-up { padding: 0 12px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.upr { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: var(--bg2); font-size: 12.5px; }
.upr .fx { width: 24px; height: 28px; font-size: 7px; }
.upn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upb { width: 90px; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.upb i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.upp { font-size: 11px; width: 34px; text-align: right; }
.cv-comp { position: relative; padding: 8px 12px 12px; flex-shrink: 0; }
.cv-box { border: 1px solid var(--line2); border-radius: 16px; background: var(--panel); transition: border-color .15s, box-shadow .15s; }
.cv-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,123,230,.12); }
.cv-box textarea { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 400 13.5px/1.45 var(--body); padding: 11px 14px 4px; max-height: 160px; }
.cv-tools { display: flex; align-items: center; gap: 2px; padding: 2px 6px 6px; }
.cv-tools .cvb { width: 30px; height: 30px; }
.cv-send { width: 34px; height: 34px; border: 0; border-radius: 11px; background: var(--accent); color: #fff; display: grid; place-items: center; transition: transform .12s; }
.cv-send:hover { transform: scale(1.06); } .cv-send:disabled { opacity: .5; }
.cv-send svg.i { width: 17px; height: 17px; }
.cv-pick { position: absolute; left: 12px; right: 12px; bottom: calc(100% - 4px); max-height: 300px; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow2); padding: 6px; z-index: 5; animation: wpIn .12s; }
.pk-h { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 6px 8px; }
.pk-h .inp { text-transform: none; letter-spacing: 0; flex: 1; }
.pk { display: flex; gap: 10px; align-items: center; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--ink); }
.pk > span:last-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pk b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk.on, .pk:hover { background: var(--accent-soft); }
.pk-i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--bg2); color: var(--ink2); flex-shrink: 0; }
.pk-i svg.i { width: 15px; height: 15px; }
.pk-e { padding: 14px; color: var(--ink3); font-size: 12.5px; text-align: center; }
.cv-drop { position: absolute; inset: 8px; border: 2px dashed var(--accent); border-radius: 16px; background: color-mix(in srgb, var(--panel) 88%, transparent); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--accent); z-index: 10; pointer-events: none; }
.cv-drop svg.i { width: 34px; height: 34px; }
.dragging > .cv-drop, .dragging .fs-drop { display: flex; }

/* ---------- страница чата ---------- */
.cp { display: grid; grid-template-columns: 330px 1fr auto; flex: 1; height: calc(100vh - var(--top)); min-height: 0; }
.cp-side { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-top-left-radius: 22px; }
.cp-sh { display: flex; align-items: center; padding: 18px 16px 6px; }
.cp-sh h2 { font: 700 20px/1 var(--head); }
.cp-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cp-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: var(--panel); }
.cp-head .wd-t b { font-size: 15px; }
.cp-conv { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; max-width: 980px; width: 100%; margin: 0 auto; }
.cp-empty { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 380px; color: var(--ink3); padding: 30px; }
.cp-empty > svg.i { width: 48px; height: 48px; opacity: .4; }
.cp-empty b { color: var(--ink); font-size: 17px; }
.cp-empty span { font-size: 13px; line-height: 1.5; }
.cp-info { width: 300px; border-left: 1px solid var(--line); background: var(--panel); overflow: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 18px; }
.cp-info.off { display: none; }
.ci-h { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ci-h b { font-size: 15px; margin-top: 4px; }
.ci-h small { font-size: 12px; color: var(--ink3); }
.ci-t { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 8px; }
.ci-m { display: flex; flex-direction: column; gap: 2px; }
.ci-p { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 10px; }
.ci-p:hover { background: var(--bg2); }
.ci-p > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ci-p b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-p small { font-size: 11px; color: var(--ink3); }
.ci-f { display: flex; flex-direction: column; gap: 4px; }
.ci-fi { display: flex; align-items: center; gap: 10px; padding: 5px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.ci-fi:hover { background: var(--bg2); }
.ci-fi .fx { width: 26px; height: 30px; font-size: 7px; }
.ci-fi > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ci-fi b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ci-fi small { font-size: 11px; color: var(--ink3); }
.nc-modal .bd { padding-top: 14px; }
.nc-l { display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow: auto; margin-top: 10px; }
.nc-p { display: flex; gap: 12px; align-items: center; padding: 8px; border: 0; border-radius: 11px; background: transparent; text-align: left; color: var(--ink); }
.nc-p:hover { background: var(--bg2); }
.nc-p > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.nc-p b { font-size: 13.5px; font-weight: 600; } .nc-p small { font-size: 12px; color: var(--ink3); }

/* ---------- журнал ---------- */
.jr { display: grid; grid-template-columns: 250px 1fr 0; flex: 1; min-height: calc(100vh - var(--top)); transition: grid-template-columns .25s ease; }
.jr.has-sheet { grid-template-columns: 250px 1fr 440px; }
.jr-nav { padding: 18px 12px; border-right: 1px solid var(--line); overflow: auto; max-height: calc(100vh - var(--top)); position: sticky; top: var(--top); }
.jr-cover { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 16px; position: relative; }
.jr-cover b { font: 700 28px/1 'Caveat', var(--head); color: var(--ink); }
.jr-cover small { font-size: 12px; color: var(--ink3); }
.jn-h { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 14px 10px 6px; }
.jn-g { display: flex; flex-direction: column; gap: 1px; }
.jn { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink2); font-size: 13px; font-weight: 600; text-align: left; width: 100%; }
.jn span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jn .sdot { flex: 0 0 9px; }
.jn svg.i { width: 16px; height: 16px; flex-shrink: 0; }
.jn i { font-style: normal; font: 600 11px/1 var(--mono); color: var(--ink3); }
.jn:hover { background: var(--bg2); color: var(--ink); }
.jn.on { background: var(--ink); color: var(--panel); } .jn.on i { color: var(--panel); opacity: .7; }
.jn.hot i { background: var(--rose); color: #fff; padding: 3px 6px; border-radius: 8px; opacity: 1; }
.jn.k-task svg.i { color: var(--accent); } .jn.k-note svg.i { color: var(--ink2); } .jn.k-call svg.i { color: var(--mint); } .jn.k-meeting svg.i, .jn.k-meet svg.i { color: var(--violet); } .jn.k-idea svg.i { color: var(--amber); }
.jn.on svg.i { color: inherit !important; }
.sdot { width: 9px; height: 9px; border-radius: 50%; margin: 0 3.5px; flex-shrink: 0; }
.sdot.sc-internal { background: var(--accent); } .sdot.sc-external { background: var(--amber); } .sdot.sc-personal { background: var(--violet); }
.jn-tags { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 6px; }
.jn-tags button { height: 24px; padding: 0 8px; border: 0; border-radius: 12px; background: var(--bg2); color: var(--ink2); font-size: 12px; font-weight: 600; }
.jn-tags button i { font-style: normal; color: var(--ink3); margin-left: 4px; font-size: 10.5px; }
.jn-tags button.on { background: var(--ink); color: var(--panel); }
.jr-book { min-width: 0; padding: 22px 28px 40px; display: flex; flex-direction: column; gap: 14px; }
.jr-top { display: flex; align-items: center; gap: 18px; }
.jr-date { display: flex; align-items: center; gap: 10px; }
.jr-day { font: 700 54px/.9 'Caveat', var(--head); color: var(--accent); }
.jr-date > span:last-child { display: flex; flex-direction: column; }
.jr-date b { font: 700 18px/1.1 var(--head); text-transform: capitalize; }
.jr-date small { font-size: 12.5px; color: var(--ink3); text-transform: capitalize; }
.jr-ttl { padding-left: 18px; border-left: 1px solid var(--line); }
.jr-ttl span { font: 700 26px/1 'Caveat', var(--head); color: var(--ink2); }
.jr-stats { display: flex; align-items: center; gap: 12px; }
.jr-ring { position: relative; width: 46px; height: 46px; }
.jr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.jr-ring circle { fill: none; stroke: var(--bg2); stroke-width: 3.2; }
.jr-ring circle.v { stroke: var(--mint); stroke-linecap: round; transition: stroke-dasharray .6s; }
.jr-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; }
.jr-st { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ink3); }
.jr-st b { color: var(--ink); }
.jq { background: var(--panel); border-radius: 16px; padding: 10px 12px 8px; border: 1px solid var(--line); transition: box-shadow .2s, border-color .2s; }
.jq:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(79,123,230,.1); }
.jq-row { display: flex; align-items: center; gap: 10px; }
.jq-row input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 16px/1.3 var(--body); height: 38px; }
.jq-k { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--bg2); flex-shrink: 0; }
.jq-opts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 8px; margin-top: 6px; border-top: 1px dashed var(--line); }
.jq-kinds { display: flex; gap: 2px; flex-wrap: wrap; }
.jq-kinds button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 8px; background: transparent; color: var(--ink3); font-size: 12px; font-weight: 700; }
.jq-kinds button svg.i { width: 14px; height: 14px; }
.jq-kinds button:hover { background: var(--bg2); color: var(--ink); }
.jq-kinds button.on { background: var(--bg2); color: var(--ink); }
.jq-more { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jq-hint { font-size: 11.5px; color: var(--ink3); padding: 6px 2px 0; }
.jq-hint b { color: var(--ink2); font-weight: 700; }
.k-task { color: var(--accent); } .k-note { color: var(--ink2); } .k-call { color: var(--mint); } .k-meet { color: var(--violet); } .k-idea { color: var(--amber); }
.jr-bar { display: flex; align-items: center; gap: 10px; }
.jr-bar .wd-q { max-width: 360px; }
.jr-paper { flex: 1; background: var(--panel); border-radius: 18px; padding: 8px 0 24px; position: relative; overflow: hidden;
  background-image: linear-gradient(90deg, transparent 54px, color-mix(in srgb, var(--rose) 28%, transparent) 54px, color-mix(in srgb, var(--rose) 28%, transparent) 55px, transparent 55px); }
.jr-page { position: relative; }
.jd { padding: 6px 0 4px; }
.jd-h { display: flex; align-items: baseline; gap: 10px; padding: 14px 24px 6px 70px; }
.jd-h span { font: 700 24px/1 'Caveat', var(--head); color: var(--ink2); }
.jd-h span::first-letter { text-transform: uppercase; }
.jd-h i { font-style: normal; font-size: 11px; color: var(--ink3); font-weight: 700; }
.jd.over .jd-h span { color: var(--rose); } .jd.today .jd-h span { color: var(--accent); } .jd.pin .jd-h span { color: var(--amber); }
.je { display: flex; align-items: flex-start; gap: 14px; padding: 9px 18px 9px 22px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 9%, var(--line)); cursor: pointer; position: relative; transition: background .15s; }
.je:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.je.sel { background: var(--accent-soft); }
.je.born { animation: born .9s ease; }
@keyframes born { from { background: color-mix(in srgb, var(--mint) 22%, transparent); } }
.je-ck { width: 22px; height: 22px; margin-top: 1px; border: 0; padding: 0; background: transparent; display: grid; place-items: center; flex-shrink: 0; border-radius: 7px; }
.je-ck svg.i { width: 17px; height: 17px; }
.je-ck i { width: 20px; height: 20px; border-radius: 7px; border: 2px solid var(--line2); display: grid; place-items: center; color: transparent; transition: .2s; }
.je-ck:hover i { border-color: var(--accent); color: var(--accent); }
.je-ck i svg.i { width: 13px; height: 13px; stroke-width: 3; }
.je.done .je-ck i, .je.ticking .je-ck i { background: var(--mint); border-color: var(--mint); color: #fff; }
.je.p1 .je-ck i { border-color: var(--amber); } .je.p2 .je-ck i { border-color: var(--rose); }
.je-m { flex: 1; min-width: 0; padding-left: 16px; }
.je-t { font-size: 14.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.je.done .je-t, .je.ticking .je-t { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--mint); text-decoration-thickness: 2px; }
.je.ticking { transition: opacity .35s .1s; opacity: .55; }
.je-pin svg.i { width: 13px; height: 13px; color: var(--amber); margin-right: 5px; vertical-align: -1px; }
.je-pr { color: var(--rose); font-weight: 800; margin-right: 6px; }
.je.p1 .je-pr { color: var(--amber); }
.je-b { font-size: 12.5px; color: var(--ink3); margin-top: 3px; line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.je-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; }
.jm { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink3); font-weight: 600; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.jm svg.i { width: 12px; height: 12px; flex-shrink: 0; }
.jm.over { color: var(--rose); } .jm.today { color: var(--accent2); } .jm.ok { color: var(--mint); }
.jm.deal { color: #B87A1E; } .jm.deal:hover { text-decoration: underline; }
.jm.tag { color: var(--violet); }
.jm.sc-external { color: var(--amber); } .jm.sc-personal { color: var(--violet); }
.jm.time { margin-left: auto; font-weight: 500; }
.je-a { display: flex; gap: 2px; opacity: 0; transition: opacity .15s; }
.je:hover .je-a, .je-a.vis { opacity: 1; }
.je-a button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink3); display: grid; place-items: center; }
.je-a button:hover { background: var(--bg2); color: var(--ink); }
.je-a button.on { color: var(--amber); }
.je-a svg.i { width: 15px; height: 15px; }
.je.trash .je-ck { opacity: .6; }
.jp-e { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 60px 30px; color: var(--ink3); }
.jp-ill { width: 120px; height: 90px; color: var(--line2); margin-bottom: 6px; }
.jp-e b { font: 700 24px/1 'Caveat', var(--head); color: var(--ink2); }
.jp-e span { font-size: 13px; max-width: 360px; }
.jp-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); padding: 12px 24px 4px 70px; }
.jp-note svg.i { width: 14px; height: 14px; }
.jb { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; padding: 12px 16px; overflow-x: auto; }
.jr-paper:has(.jb) { background-image: none; background: transparent; padding: 0; }
.jb-c { background: var(--bg2); border-radius: 14px; padding: 8px; min-height: 260px; display: flex; flex-direction: column; gap: 6px; transition: background .15s; }
.jb-c.over { background: var(--accent-soft); }
.jb-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 6px; }
.jb-h b { font-size: 13px; } .jb-h i { font-style: normal; font: 600 11px/1 var(--mono); color: var(--ink3); }
.jb-c.over .jb-h b, .jb-c[data-col=over] .jb-h b { color: var(--rose); } .jb-c[data-col=today] .jb-h b { color: var(--accent2); } .jb-c[data-col=done] .jb-h b { color: var(--mint); }
.jb-l { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.jb-card { background: var(--panel); border-radius: 11px; cursor: grab; }
.jb-card.drag { opacity: .4; }
.jb-card .je { border: 0; padding: 9px 10px; gap: 8px; }
.jb-card .je-m { padding-left: 0; }
.jb-card .je-t { font-size: 13px; }
.jb-card .jm.time { display: none; }
.jb-e { font-size: 12px; color: var(--ink3); text-align: center; padding: 18px 6px; border: 1.5px dashed var(--line2); border-radius: 10px; }
.jr-sheet { border-left: 1px solid var(--line); background: var(--panel); overflow: hidden; max-height: calc(100vh - var(--top)); position: sticky; top: var(--top); display: flex; flex-direction: column; }
.jr-sheet:not(.open) { visibility: hidden; }
.js-h { display: flex; align-items: center; gap: 4px; padding: 10px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.js-kind { display: flex; gap: 2px; background: var(--bg2); padding: 3px; border-radius: 10px; }
.js-kind button { width: 32px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--ink3); display: grid; place-items: center; }
.js-kind button.on { background: var(--panel); box-shadow: var(--shadow); }
.js-kind svg.i { width: 15px; height: 15px; }
.js-saved { font-size: 11.5px; color: var(--ink3); margin-right: 4px; }
.js-saved.ok { color: var(--mint); } .js-saved.err { color: var(--rose); }
.js-b { flex: 1; overflow: auto; padding: 16px 20px 24px; }
.js-done { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 8px; border-radius: 9px; background: var(--bg2); font-size: 12.5px; font-weight: 700; color: var(--ink2); cursor: pointer; }
.js-done input { display: none; }
.js-done i { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--line2); display: grid; place-items: center; color: transparent; }
.js-done i svg.i { width: 12px; height: 12px; stroke-width: 3; }
.js-done.on { background: var(--mint-soft); color: var(--mint); } .js-done.on i { background: var(--mint); border-color: var(--mint); color: #fff; }
.js-kl { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.js-kl svg.i { width: 15px; height: 15px; }
.js-title { display: block; width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 700 21px/1.3 var(--head); margin: 12px 0 10px; padding: 0; overflow: hidden; }
.js-props { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.jpp { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.jpp > span:first-child { display: inline-flex; align-items: center; gap: 7px; width: 98px; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--ink3); }
.jpp > span:first-child svg.i { width: 14px; height: 14px; }
.jpp .seg button.pr1.on { color: #B87A1E; } .jpp .seg button.pr2.on { color: var(--rose); }
.js-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1; }
.js-tags input { border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12.5px; min-width: 90px; flex: 1; height: 26px; }
.tg { display: inline-flex; align-items: center; gap: 2px; height: 24px; padding: 0 4px 0 8px; border-radius: 12px; background: var(--violet-soft); color: var(--violet); font-size: 12px; font-weight: 700; }
.tg button { width: 18px; height: 18px; border: 0; background: transparent; color: inherit; display: grid; place-items: center; opacity: .6; }
.tg button svg.i { width: 11px; height: 11px; }
.js-sec { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 16px 0 6px; }
.js-sec small { letter-spacing: 0; font: 600 11px/1 var(--mono); margin-left: 6px; }
.js-body { display: block; width: 100%; min-height: 160px; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink); font: 400 14px/26px var(--body); padding: 0; overflow: hidden;
  background-image: repeating-linear-gradient(transparent 0 25px, color-mix(in srgb, var(--accent) 14%, var(--line)) 25px 26px); }
.js-cl { display: flex; flex-direction: column; gap: 2px; }
.cli { display: flex; align-items: center; gap: 8px; height: 32px; }
.cli > button:first-child { width: 18px; height: 18px; border-radius: 6px; border: 2px solid var(--line2); background: transparent; display: grid; place-items: center; color: #fff; padding: 0; flex-shrink: 0; }
.cli > button:first-child svg.i { width: 11px; height: 11px; stroke-width: 3; }
.cli.d > button:first-child { background: var(--mint); border-color: var(--mint); }
.cli input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13.5px; height: 30px; }
.cli.d input { text-decoration: line-through; color: var(--ink3); }
.cli .clx { width: 24px; height: 24px; border: 0; background: transparent; color: var(--ink3); display: grid; place-items: center; opacity: 0; }
.cli:hover .clx { opacity: 1; }
.cli .clx svg.i { width: 13px; height: 13px; }
.cli.add span { width: 18px; display: grid; place-items: center; color: var(--ink3); }
.cli.add span svg.i { width: 14px; height: 14px; }
.js-foot { margin-top: 22px; font-size: 11.5px; color: var(--ink3); line-height: 1.8; }
.js-foot svg.i { width: 12px; height: 12px; vertical-align: -2px; }
.jdeal .bd { display: flex; flex-direction: column; gap: 10px; }
.jdeal .jr-page { background: var(--panel); }
.jdeal .je { padding-left: 4px; }
.jdeal .je-m { padding-left: 4px; }
.jdeal .jp-note { padding-left: 4px; }

/* ---------- хранилище ---------- */
.fs { display: grid; grid-template-columns: 268px 1fr; flex: 1; min-height: calc(100vh - var(--top)); }
.fs-side { padding: 16px 12px; border-right: 1px solid var(--line); overflow: auto; max-height: calc(100vh - var(--top)); position: sticky; top: var(--top); }
.gd-card { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--bg2); margin-bottom: 12px; }
.gd-card > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gd-card b { font-size: 13px; } .gd-card small { font-size: 11.5px; color: var(--ink3); }
.gd-i { width: 24px; height: 24px; color: #1FA463; flex-shrink: 0; }
.gd-card.ok .gd-i { color: var(--mint); }
.fs-n { display: flex; align-items: center; gap: 9px; height: 33px; padding: 0 10px; border-radius: 9px; color: var(--ink2); font-size: 13px; font-weight: 600; text-decoration: none; }
.fs-n span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-n svg.i { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink3); }
.fs-n > i { font-style: normal; font: 600 11px/1 var(--mono); color: var(--ink3); }
.fs-n:hover { background: var(--bg2); color: var(--ink); }
.fs-n.on { background: var(--ink); color: var(--panel); } .fs-n.on svg.i, .fs-n.on > i { color: var(--panel); }
.gd-b { display: inline-grid; } .gd-b .gd-i { width: 14px; height: 14px; }
.fs-h { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); padding: 16px 10px 6px; }
.fs-h .btn { height: 22px; width: 22px; padding: 0; justify-content: center; }
.fs-hint { font-size: 12px; color: var(--ink3); padding: 4px 10px 6px; line-height: 1.45; }
.fs-hint.big { padding: 20px 0; font-size: 13px; }
.fs-use { margin: 18px 6px 4px; font-size: 12px; color: var(--ink2); display: flex; flex-direction: column; gap: 6px; }
.fs-use > div { height: 5px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.fs-use > div i { display: block; height: 100%; background: var(--accent); min-width: 2px; }
.fs-use small { color: var(--ink3); font-size: 11px; }
.fs-main { padding: 22px 28px 40px; min-width: 0; }
.fs-fold { position: relative; min-height: 300px; }
.fs-crumbs { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink3); margin-bottom: 8px; flex-wrap: wrap; }
.fs-crumbs a { color: var(--ink3); } .fs-crumbs a:hover { color: var(--accent2); } .fs-crumbs b { color: var(--ink2); }
.fs-tb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fs-tb h2 { font: 700 22px/1.2 var(--head); margin-right: 6px; }
.fs-tb .btn svg.gd-i { width: 15px; height: 15px; }
.fs-q { max-width: 340px; }
.fs-upl { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.fs-upl:empty { display: none; }
.fs-sub { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 22px 0 10px; }
.fs-sub small { letter-spacing: 0; text-transform: none; font-weight: 600; }
.fs-sub svg.i { width: 14px; height: 14px; }
.fs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.fs-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: var(--panel); color: var(--ink); text-decoration: none; border: 1px solid transparent; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; min-width: 0; }
.fs-card:hover { border-color: var(--line2); transform: translateY(-1px); }
.fs-card b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-card small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-card.fold .fs-fi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.fs-card.fold .fs-fi svg.i { width: 22px; height: 22px; }
.fs-card.fold.me .fs-fi { background: var(--violet-soft); color: var(--violet); }
.fs-card.fold.add { border: 1.5px dashed var(--line2); background: transparent; }
.fs-card.fold.add .fs-fi { background: var(--bg2); color: var(--ink2); }
.fs-card .gd-b { position: absolute; top: 14px; right: 14px; }
.fs-th { height: 96px; border-radius: 10px; background: var(--bg2); display: grid; place-items: center; overflow: hidden; margin-bottom: 8px; }
.fs-th img { width: 100%; height: 100%; object-fit: cover; }
.fs-th .fx { width: 40px; height: 48px; font-size: 10px; }
.fs-by { position: absolute; right: 12px; bottom: 12px; }
.fs-more { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; border-radius: 8px; background: var(--panel); color: var(--ink2); display: grid; place-items: center; opacity: 0; box-shadow: var(--shadow); }
.fs-card:hover .fs-more { opacity: 1; }
.fs-card.bx { cursor: pointer; }
.bx-b { position: absolute; top: 10px; left: 10px; font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; background: var(--panel); color: var(--ink3); padding: 3px 6px; border-radius: 6px; }
.fs-list { display: flex; flex-direction: column; background: var(--panel); border-radius: 14px; overflow: hidden; }
.fs-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 150px 150px 100px 80px; align-items: center; gap: 12px; padding: 8px 14px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.fs-list .fs-row:last-child { border-bottom: 0; }
.fs-row:hover { background: var(--bg2); }
.fs-row b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-row .s { font-size: 12px; color: var(--ink3); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.fs-row .fx { width: 28px; height: 34px; font-size: 8px; }
.fs-row.hd { background: transparent; cursor: default; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); border: 0; padding-bottom: 4px; }
.fs-row.hd:hover { background: transparent; }
.fs-ra { display: flex; justify-content: flex-end; gap: 2px; }
.fs-fi.sm { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.fs-fi.sm svg.i { width: 16px; height: 16px; }
.fs-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 60px 20px; color: var(--ink3); border: 1.5px dashed var(--line2); border-radius: 18px; }
.fs-empty svg.i { width: 36px; height: 36px; opacity: .45; }
.fs-empty b { color: var(--ink); font-size: 15px; } .fs-empty span { font-size: 13px; max-width: 380px; }
.fs-drop { position: absolute; inset: -8px; border: 2px dashed var(--accent); border-radius: 18px; background: color-mix(in srgb, var(--bg) 85%, transparent); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--accent); z-index: 10; pointer-events: none; }
.fs-drop svg.i { width: 40px; height: 40px; }
.btn.gd svg.gd-i { color: #1FA463; }
.gd-how, .gd-st { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: var(--bg2); }
.gd-how > div, .gd-st > div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.gd-how span, .gd-st span { color: var(--ink2); font-size: 12.5px; line-height: 1.5; }
.gd-st.ok { background: var(--mint-soft); }
.gd-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.gd-m { padding: 12px; border-radius: 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.gd-m b { display: flex; align-items: center; gap: 6px; font-size: 13px; } .gd-m b svg.i { width: 15px; height: 15px; }
.gd-m span { font-size: 12px; color: var(--ink3); line-height: 1.45; }
.gd-m.on { border-color: var(--accent); }
.gd-m.off { opacity: .6; }
.gd-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink2); }

/* ---------- личный кабинет ---------- */
.pf { max-width: 1180px; margin: 0 auto; }
.pf-hero { position: relative; border-radius: 22px; overflow: hidden; background: var(--panel); margin-bottom: 14px; }
.pf-cover { height: 120px; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 60%), radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--violet) 45%, transparent), transparent 55%), var(--bg2); }
.pf-hb { display: flex; align-items: flex-end; gap: 20px; padding: 0 24px 20px; margin-top: -54px; flex-wrap: wrap; }
.pf-ava { position: relative; }
.pf-ava .wav { box-shadow: 0 0 0 5px var(--panel); font-size: 36px !important; }
.pf-cam { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--panel); background: var(--ink); color: var(--panel); display: grid; place-items: center; transition: transform .15s; }
.pf-cam:hover { transform: scale(1.08); }
.pf-cam svg.i { width: 16px; height: 16px; }
.pf-who { flex: 1; min-width: 240px; padding-bottom: 4px; }
.pf-who h1 { font: 700 26px/1.15 var(--head); }
.pf-pos { color: var(--ink2); font-size: 14px; margin-top: 4px; }
.pf-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pf-status { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 10px; border-radius: 21px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.pf-status:hover { background: var(--bg2); }
.pf-status i { font-style: normal; font-size: 20px; width: 26px; text-align: center; }
.pf-status i.e svg.i { width: 18px; height: 18px; color: var(--ink3); }
.pf-tabs { display: flex; gap: 4px; padding: 4px; background: var(--panel); border-radius: 14px; margin-bottom: 16px; overflow-x: auto; }
.pf-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--ink3); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pf-tabs button svg.i { width: 16px; height: 16px; }
.pf-tabs button:hover { color: var(--ink); background: var(--bg2); }
.pf-tabs button.on { background: var(--ink); color: var(--panel); }
.pf-form { background: var(--panel); border-radius: 18px; padding: 6px 24px 24px; position: relative; }
.pf-sec { padding: 18px 0; border-bottom: 1px solid var(--line); }
.pf-sec:last-of-type { border-bottom: 0; }
.pf-sh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.pf-sh b { font: 700 15px/1 var(--head); } .pf-sh span { font-size: 12.5px; color: var(--ink3); }
.pf-inp { position: relative; display: flex; align-items: center; }
.pf-inp > svg.i { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--ink3); pointer-events: none; }
.pf-inp > svg.i ~ .inp { padding-left: 34px; }
.pf-inp .inp[readonly] { background: var(--bg2); color: var(--ink2); cursor: not-allowed; }
.pf-form textarea.inp { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
.pf-cnt { text-align: right; font-size: 11px; color: var(--ink3); margin-top: 4px; }
.pf-save { position: sticky; bottom: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; margin-top: 10px; border-radius: 14px; background: var(--ink); color: var(--panel); font-size: 13px; font-weight: 600; transform: translateY(20px); opacity: 0; pointer-events: none; transition: .25s; }
.pf-save.show { transform: none; opacity: 1; pointer-events: auto; }
.pf-save > span:first-child { display: flex; align-items: center; gap: 8px; } .pf-save svg.i { width: 16px; height: 16px; }
.pf-save .btn.g { color: var(--panel); } .pf-save .btn.g:hover { background: rgba(255,255,255,.12); }
.pw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.pw-t { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--panel); color: var(--ink); text-decoration: none; transition: transform .15s; }
.pw-t:hover { transform: translateY(-2px); }
.pw-i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 6px; }
.pw-t.m .pw-i { background: var(--mint-soft); color: var(--mint); } .pw-t.r .pw-i { background: var(--rose-soft); color: var(--rose); }
.pw-l { font-size: 12px; color: var(--ink3); font-weight: 600; }
.pw-t b { font: 700 26px/1.1 var(--head); }
.pw-t small { font-size: 12px; color: var(--ink3); }
.pw-task { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.pw-task:hover { background: var(--bg2); }
.pw-task > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pw-task b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-task small { font-size: 11.5px; color: var(--ink3); }
.pw-task.over small { color: var(--rose); }
.pw-ck { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.pw-ck svg.i { width: 15px; height: 15px; }
.pw-e { font-size: 13px; color: var(--ink3); padding: 12px 4px; }
.card .hd h3 svg.i { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; color: var(--ink3); }
.pt-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pt-bar .wd-q { max-width: 420px; height: 38px; background: var(--panel); }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.pt-c { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--panel); }
.pt-c.me { outline: 1.5px solid var(--accent-soft); }
.pt-top { display: flex; gap: 14px; align-items: flex-start; position: relative; }
.pt-top > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.pt-top b { font-size: 15px; } .pt-top small { font-size: 12.5px; color: var(--ink3); }
.pt-st { font-size: 12px; color: var(--ink2); background: var(--bg2); border-radius: 8px; padding: 3px 8px; align-self: flex-start; margin-top: 2px; }
.pt-bd { width: 30px; height: 30px; border-radius: 50%; background: var(--rose-soft); color: var(--rose); display: grid; place-items: center; animation: bd 1.6s ease-in-out infinite; }
.pt-bd.soon { background: var(--amber-soft); color: var(--amber); animation: none; }
.pt-bd svg.i { width: 16px; height: 16px; }
@keyframes bd { 50% { transform: scale(1.12) rotate(-6deg); } }
.pt-ct { display: flex; flex-direction: column; gap: 5px; }
.pt-ct a, .pt-ct span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); text-decoration: none; }
.pt-ct a:hover { color: var(--accent2); }
.pt-ct svg.i { width: 14px; height: 14px; color: var(--ink3); }
.pt-ab { font-size: 12.5px; color: var(--ink2); line-height: 1.5; padding: 10px 12px; border-radius: 10px; background: var(--bg2); }
.pt-a { display: flex; gap: 6px; margin-top: auto; }
.sw-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.sw-row:last-of-type { border-bottom: 0; }
.sw-row > span:first-child { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sw-row b { font-size: 13.5px; font-weight: 600; } .sw-row small { font-size: 12px; color: var(--ink3); }
.sw-row.dis { opacity: .55; cursor: not-allowed; }
.sw { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.sw i { position: absolute; inset: 0; border-radius: 12px; background: var(--line2); transition: .2s; }
.sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: .2s; }
.sw input:checked + i { background: var(--accent); } .sw input:checked + i::after { transform: translateX(18px); }
.sw input:focus-visible + i { box-shadow: 0 0 0 3px rgba(79,123,230,.3); }
.pf-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pf-themes button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px; border-radius: 12px; border: 1.5px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.pf-themes button.on { border-color: var(--accent); }
.pf-themes .sw2 { width: 100%; height: 34px; border-radius: 8px; margin-bottom: 4px; }
.pf-themes b { font-size: 12.5px; } .pf-themes small { font-size: 11px; color: var(--ink3); }
.pw .inp { padding-right: 38px; }
.pw-eye { position: absolute; right: 6px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink3); display: grid; place-items: center; border-radius: 7px; }
.pw-eye:hover { background: var(--bg2); color: var(--ink); }
.pw-eye svg.i { width: 15px; height: 15px; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.pw-meter i { height: 4px; border-radius: 2px; background: var(--bg2); transition: background .2s; }
.pw-meter.s1 i:nth-child(-n+1) { background: var(--rose); } .pw-meter.s2 i:nth-child(-n+2) { background: var(--amber); } .pw-meter.s3 i:nth-child(-n+3) { background: var(--accent); } .pw-meter.s4 i { background: var(--mint); }
.ss { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.ss > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ss b { font-size: 13px; } .ss small { font-size: 12px; color: var(--ink3); }
.ss-i { width: 34px; height: 34px; border-radius: 10px; background: var(--bg2); color: var(--ink2); display: grid; place-items: center; }
.ss.cur .ss-i { background: var(--mint-soft); color: var(--mint); }
.crop { position: relative; width: 320px; height: 320px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--bg2); touch-action: none; }
.crop canvas { display: block; cursor: grab; }
.crop-ring { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 999px rgba(0,0,0,.0); border-radius: 50%; outline: 999px solid rgba(10,15,30,.45); }
.crop-z { display: flex; align-items: center; gap: 10px; width: 320px; margin: 14px auto 0; color: var(--ink3); }
.crop-z input { flex: 1; accent-color: var(--accent); }
.st-emo { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.st-emo button { height: 42px; border-radius: 10px; border: 1.5px solid var(--line); background: transparent; font-size: 20px; color: var(--ink3); }
.st-emo button.on { border-color: var(--accent); background: var(--accent-soft); }
.st-q { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* ---------- адаптив ---------- */
@media (max-width: 1280px) { .jr.has-sheet { grid-template-columns: 210px 1fr 380px; } .cp-info { display: none; } .pw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 980px) {
  .jr, .jr.has-sheet { grid-template-columns: 1fr; } .jr-nav { display: none; } .jr-sheet.open { position: fixed; inset: var(--top) 0 0 auto; width: min(440px, 100%); z-index: 60; box-shadow: var(--shadow2); }
  .fs { grid-template-columns: 1fr; } .fs-side { display: none; }
  .cp { grid-template-columns: 1fr; } .cp-side { display: none; }
  .fs-row { grid-template-columns: 36px minmax(0, 1fr) 80px 70px; } .fs-row > :nth-child(4), .fs-row > :nth-child(5) { display: none; }
  .wdock { left: 10px; right: 10px; width: auto; }
}

/* ---------- кто в сети ---------- */
.topbar .ic .tbo { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--mint); color: #fff; font: 700 10px/17px var(--body); font-style: normal; text-align: center; border: 2px solid var(--panel); box-sizing: content-box; }
.tmpop { width: 420px; }
.tm-on { color: var(--mint); background: var(--mint-soft); }
.tm-t { display: flex; gap: 2px; background: var(--bg2); padding: 3px; border-radius: 9px; }
.tm-t button { border: 0; background: transparent; color: var(--ink2); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.tm-t button.on { background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.tm-l, .tm-a { overflow: auto; padding: 0 8px 8px; }
.tm-p { position: relative; display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 10px; }
.tm-p.go { cursor: pointer; }
.tm-p.go:hover { background: var(--bg2); }
.tm-dot { position: absolute; left: 34px; top: 33px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink3); border: 2px solid var(--panel); }
.tm-dot.y { background: var(--mint); }
.tm-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-n b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-n small { font-size: 12px; color: var(--ink3); }
.tm-n small.c-on { color: var(--mint); font-weight: 700; }
.tm-f { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 14px 10px; }
.tm-f button { border: 1px solid var(--line); background: var(--panel); color: var(--ink2); font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 8px; cursor: pointer; }
.tm-f button.on { background: var(--accent-soft); border-color: transparent; color: var(--accent2); }
.tm-e { display: flex; gap: 10px; align-items: flex-start; padding: 8px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.tm-e:hover { background: var(--bg2); }
.tm-e > span { flex: 1; min-width: 0; color: var(--ink2); }
.tm-e > span b { color: var(--ink); }
.tm-e small { display: block; font-size: 11.5px; color: var(--ink3); margin-top: 1px; }
.tm-ft { font-size: 11.5px; color: var(--ink3); }

/* ---------- предложение включить уведомления ---------- */
.wask { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 115; display: flex; align-items: center; gap: 12px; padding: 12px 14px; max-width: calc(100vw - 40px); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow2); animation: wtIn .25s ease; }
.wask > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.wask > div span { color: var(--ink2); font-size: 12.5px; }

/* ---------- хранилище: папка «только для выбранных сотрудников» ---------- */
.fs-lk { font-style: normal; display: inline-grid; place-items: center; margin-left: 4px; color: var(--ink3); }
.fs-lk svg { width: 12px; height: 12px; }
.chip.fs-mem { gap: 5px; }
.chip.fs-mem svg { width: 12px; height: 12px; }
.fs-acc { margin-top: 14px; }
.fs-acc-l { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 10px; max-height: 240px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.fs-acc .fs-acc-u { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--body); text-transform: none; letter-spacing: 0; color: var(--ink); padding: 4px 0; margin: 0; cursor: pointer; }
.fs-acc-u input { width: 15px; height: 15px; accent-color: var(--accent); }
.fs-acc-u small { color: var(--ink3); }
.fs-hint2 { margin-top: 8px; font-size: 12px; color: var(--ink3); }
.fs-acc-name { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.fs-acc-name svg { width: 18px; height: 18px; color: var(--ink3); }

/* ---------- журнал: просмотр журнала сотрудника руководством (только чтение) ---------- */
.jr-who #jr-whob { margin-top: 8px; width: 100%; }
.jr-who .jr-ro { display: block; margin-top: 6px; color: var(--ink3); font-size: 11.5px; }
.je.ro { cursor: pointer; }
.je.ro .je-ck { cursor: default; }
.je-full { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--ink2); white-space: pre-wrap; word-break: break-word; }
.je-cl { margin-top: 6px; display: grid; gap: 3px; font-size: 12.5px; color: var(--ink2); }
.je-cl > div { display: flex; align-items: center; gap: 6px; }
.je-cl > div.d span { text-decoration: line-through; color: var(--ink3); }
.je-cl svg { width: 13px; height: 13px; color: var(--mint, #4caf7d); }
.je-bx { display: inline-block; width: 11px; height: 11px; border: 1.5px solid var(--ink3); border-radius: 3px; }

/* ---------- доп. расходы: блок в карточке сделки ---------- */
.xp-card .hd .s { font-size: 12px; color: var(--ink3); }
.xp-l { display: flex; flex-direction: column; padding: 4px 8px 8px; }
.xp-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.xp-r + .xp-r { border-top: 1px solid var(--line); border-radius: 0; }
.xp-r:hover { background: var(--bg2); }
.xp-m { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.xp-m b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-m small { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-sum { font-size: 13px; white-space: nowrap; }
.xp-st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.xp-dec { display: flex; gap: 4px; }
.xp-wait { font-size: 10.5px; color: var(--amber, #c98a2b); white-space: nowrap; }
.xp-th { width: 34px; height: 34px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--bg2); color: var(--ink3); font: 700 9.5px/1 var(--mono); flex-shrink: 0; }
.xp-th img { width: 100%; height: 100%; object-fit: cover; }
.xp-th.pdf { color: var(--rose, #d9534f); border: 1px solid var(--line); background: transparent; }
.xp-th.none { font-weight: 400; }
.xp-th.sm { width: 30px; height: 30px; }
/* новый расход */
.xp-deal { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg2); margin-bottom: 14px; }
.xp-deal svg { width: 18px; height: 18px; color: var(--ink3); flex-shrink: 0; }
.xp-deal span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xp-deal small { font-size: 11.5px; color: var(--ink3); }
.field .xp-drop { display: block; border: 1.5px dashed var(--line2, var(--line)); border-radius: 12px; padding: 14px; cursor: pointer; text-transform: none; letter-spacing: 0; font: 500 13px/1.4 var(--body); color: var(--ink2); margin: 0; }
.xp-drop:hover, .xp-drop.over { border-color: var(--accent); color: var(--ink); }
.xp-drop.has { border-style: solid; }
.xp-drop #xn-fl { display: flex; align-items: center; gap: 10px; }
.xp-drop #xn-fl > svg { width: 18px; height: 18px; flex-shrink: 0; }
.xp-drop #xn-fl span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xp-drop small { font-size: 11.5px; color: var(--ink3); }
.xp-prev { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
/* карточка расхода */
.modal.xp-modal { width: min(880px, 96vw); }
.xp-det { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; }
.xp-det-f { min-width: 0; }
.xp-big { display: block; border-radius: 12px; overflow: hidden; background: var(--bg2); }
.xp-big img { display: block; width: 100%; max-height: 62vh; object-fit: contain; }
.xp-pdf { width: 100%; height: 62vh; border: 0; border-radius: 12px; background: #fff; }
.xp-nofile { display: grid; place-items: center; height: 200px; border-radius: 12px; background: var(--bg2); color: var(--ink3); font-size: 13px; }
.xp-det-fa { display: flex; gap: 6px; margin-top: 8px; }
@media (max-width: 760px) { .xp-det { grid-template-columns: 1fr; } .xp-r { grid-template-columns: 30px minmax(0, 1fr) auto; } .xp-r .xp-st, .xp-r .xp-dec { grid-column: 2 / -1; justify-self: start; flex-direction: row; } }

/* ---------- раздел «Доп. расходы» ---------- */
.xr-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.xr-k { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.xr-k small { font-size: 12px; color: var(--ink3); }
.xr-k b { font-size: 20px; }
.xr-k span { font-size: 12px; color: var(--ink2); }
.xr-k.ok b { color: var(--mint, #3aa676); } .xr-k.wait b { color: var(--amber, #c98a2b); } .xr-k.no b { color: var(--ink3); }
.xr-tabs { margin-bottom: 10px; }
.xr-tabs .cnt { font: 600 11px/1 var(--mono); color: var(--ink3); margin-left: 4px; }
.xr-bar { flex-wrap: wrap; gap: 8px; }
.xr-q { flex: 1; min-width: 220px; }
.xr-t td { vertical-align: middle; }
.xr-t td.ell, .xr-t .s.ell { max-width: 260px; }
.xr-t tr.xr-tot td { border-top: 2px solid var(--line); }
.c-a { color: var(--amber, #c98a2b); }
.xr-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; padding: 14px; }
.xr-fc { display: flex; flex-direction: column; text-align: left; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); padding: 0; cursor: pointer; color: inherit; font: inherit; }
.xr-fc:hover { border-color: var(--accent); }
.xr-fi { height: 150px; display: grid; place-items: center; background: var(--bg2); overflow: hidden; }
.xr-fi img { width: 100%; height: 100%; object-fit: cover; }
.xr-fi.pdf { flex-direction: column; gap: 4px; color: var(--rose, #d9534f); }
.xr-fi.pdf small { color: var(--ink3); font-size: 11px; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xr-fm { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; min-width: 0; }
.xr-fm b { font-size: 13px; } .xr-fm small { font-size: 11.5px; color: var(--ink3); }
.xr-fm .chip { align-self: flex-start; margin-top: 4px; }
@media (max-width: 760px) { .xr-kpi { grid-template-columns: 1fr 1fr; } }

/* ---------- окно сотрудника: выбор темы оформления ---------- */
.up-th { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px; }
.up-th > span { font-size: 12px; color: var(--ink3); }
.up-sw { display: flex; gap: 6px; }
.up-sw button { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--line2); padding: 0; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.up-sw button:hover { transform: scale(1.12); }
.up-sw button.on { box-shadow: 0 0 0 2px var(--accent); }
/* прочтение своих сообщений: ✓ отправлено, ✓✓ прочитано; по нажатию — кто и когда */
.m-rd { display: inline-flex; align-items: center; vertical-align: -3px; margin-left: 4px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.m-rd svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.msg.me .m-tm { opacity: .75; }
.m-rd .rd-y { display: inline-flex; color: #fff; }
.msg.me .m-tm:has(.rd-y) { opacity: 1; }
.wpop.rdpop { width: 280px; max-height: 360px; overflow: auto; padding: 8px; }
.rdpop .rp-h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 8px 8px 4px; }
.rdpop .rp-i { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 8px; font-size: 13px; }
.rdpop .rp-i b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rdpop .rp-i small { font-size: 12px; color: var(--ink3); white-space: nowrap; }
.rdpop .rp-i.no { opacity: .6; }
.rdpop .rp-e { font-size: 12.5px; color: var(--ink3); padding: 4px 8px 8px; }