:root{
  --navy:#002C5F; --navy-2:#01417f; --active:#00AAD2; --active-soft:#e6f6fb;
  --sand:#F6F3F2; --sand-2:#EDE8E5; --sand-3:#E0D9D4;
  --ink:#1b1c1e; --ink-2:#5a5f66; --ink-3:#8d939b;
  --card:#ffffff; --line:#e3e0dd; --line-2:#cfcac6;
  --hot:#B4231F; --warm:#B57318; --cool:#0F7A5A;
  --r:4px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--sand);color:var(--ink);font:14px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer}
.wrap{margin:0 auto;padding:0 20px}
header{background:var(--navy);color:#fff}
.top{display:flex;align-items:center;justify-content:space-between;height:56px}
.brand{font-weight:700;letter-spacing:.14em;font-size:15px;text-transform:uppercase}
.brand span{font-weight:400;letter-spacing:.02em;text-transform:none;font-size:13px;color:#9fb6cf;margin-left:12px}
.me{display:flex;align-items:center;gap:9px;font-size:13px;color:#cbd8e6}
.av{width:26px;height:26px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:11px;font-weight:600;flex:0 0 auto}
nav{display:flex;gap:0;overflow-x:auto;background:var(--navy-2)}
nav button,nav a,nav a:link,nav a:visited{background:none;border:0;padding:10px 15px;color:#a9c0d8;font-size:13px;border-bottom:3px solid transparent;white-space:nowrap;text-decoration:none;display:inline-block}
nav button:hover,nav a:hover,nav a:visited:hover{color:#fff}
nav button.on{color:#fff;border-bottom-color:var(--active);font-weight:600}
nav button:disabled{color:#5f7e9d;cursor:default}
main{padding:18px 0 60px}
.bar{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
input[type=text],input[type=date],select,textarea{border:1px solid var(--line-2);border-radius:var(--r);padding:6px 9px;font:inherit;font-size:13px;background:var(--card);color:var(--ink);font-family:inherit}
input[type=text]{width:200px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--active-soft);border-color:var(--active)}
.btn{background:var(--navy);color:#fff;border:0;border-radius:var(--r);padding:7px 14px;font-size:13px;font-weight:600}
.btn:hover{background:var(--navy-2)}
.btn.ghost{background:none;color:var(--navy);border:1px solid var(--line-2);font-weight:500}
.btn.ghost:hover{border-color:var(--navy);background:#fff}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.dgr{background:none;color:var(--hot);border:1px solid #e8c4c2;font-weight:500}
.chip{border:1px solid var(--line-2);background:var(--card);border-radius:var(--r);padding:5px 12px;font-size:12px;color:var(--ink-2)}
/* Кнопка фильтра по сотруднику в тулбаре — тот же вид, что у чипов
   рядом ("Только мои" и т.п.), плюс аватарка и шеврон, раз уж заменили
   обычный select на кастомный список с аватарками, как в недельке. */
.fltav{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r);padding:5px 10px;font-size:12px;color:var(--ink-2);cursor:pointer}
.fltav:hover{background:var(--sand-2)}
.fltwrap .cipick{left:0;right:auto;top:34px}
.pdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.chip.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.seg{display:flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:var(--card)}
.seg button{background:none;border:0;border-right:1px solid var(--line-2);padding:6px 14px;font-size:12px;color:var(--ink-2)}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--navy);color:#fff;font-weight:600}
.err{color:var(--hot);font-size:12px;margin-top:5px}

.board{display:flex;gap:8px;align-items:flex-start;padding-bottom:14px}
.col{flex:1 1 0;min-width:0;background:var(--sand-2);border-radius:var(--r);padding:9px;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}
.col.fold{flex:0 0 40px;min-width:40px;padding:9px 4px;cursor:pointer;max-height:none}
.collist{overflow-y:auto;min-height:0;flex:1 1 auto;margin:0 -4px;padding:0 4px}
.col.over{background:#f7e9e8}
.colhead{display:flex;justify-content:space-between;align-items:center;gap:5px;padding:2px 3px 8px}
.colhead b{font-size:13px;font-weight:500;color:var(--navy);flex:1 1 auto;min-width:0;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cnt{font-size:11px;color:var(--ink-2);background:#fff;border-radius:2px;padding:1px 6px;flex:0 0 auto;font-weight:600}
.cnt.wip{background:#f6dedc;color:var(--hot)}
.ico{background:none;border:0;color:var(--ink-3);font-size:13px;padding:0 3px;line-height:1}
.ico:hover{color:var(--navy)}
.fold .vert{writing-mode:vertical-rl;font-size:12px;font-weight:500;color:var(--navy);margin:6px auto}
.fold .cnt{display:block;text-align:center;margin-top:8px}
.card{background:var(--card);border:1px solid var(--line);border-left:3px solid transparent;border-radius:var(--r);padding:9px 10px;margin-bottom:6px;cursor:grab;transition:box-shadow .15s ease,transform .15s ease}
.card:hover{border-color:var(--line-2);box-shadow:0 1px 3px rgba(0,44,95,.08)}
.card.late{border-left-color:var(--hot);background:#fdf2f1}
/* Оригинал на месте, пока плавает клон */
.card-placeholder{opacity:.35;transform:scale(.98)}
/* Сам плавающий клон карточки */
.cardghost{position:fixed;z-index:30;margin:0;pointer-events:none;cursor:grabbing;
  box-shadow:0 2px 6px rgba(0,44,95,.1);transform:scale(1);transition:transform .15s ease,box-shadow .15s ease}
.cardghost.lift{box-shadow:0 14px 28px rgba(0,44,95,.28);transform:scale(1.04) rotate(-1.5deg)}
.cardghost.settle{transform:scale(1) rotate(0deg);box-shadow:0 1px 3px rgba(0,44,95,.08)}
.col.drop{background:var(--active-soft);outline:2px dashed var(--active);outline-offset:-2px;transition:background-color .12s ease,outline-color .12s ease}
.cover{height:56px;border-radius:2px;margin:-4px -5px 8px;background:#dde4ec;display:flex;align-items:center;justify-content:center;color:#8b919c;font-size:20px;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.tags{display:flex;gap:6px;margin-bottom:7px;flex-wrap:wrap;align-items:center}
.pbar{display:inline-block;width:30px;height:6px;border-radius:3px}
.rep{font-size:10px;font-weight:500;padding:2px 6px 2px 5px;border-radius:2px;background:var(--active-soft);color:#00718c;display:inline-flex;align-items:center;gap:3px}
.rep .ti{font-size:11px}
.age{font-size:10.5px;color:var(--ink-3);margin-left:auto;display:inline-flex;align-items:center;gap:3px}
.age .ti{font-size:12px}
.age.slow{color:var(--hot);font-weight:500}
.ctitle{font-size:13px;line-height:1.4;margin-bottom:7px;font-weight:500}
.cdesc{font-size:11.5px;color:var(--ink-3);line-height:1.4;margin:-3px 0 7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mleft{display:flex;gap:9px;align-items:center;font-size:11.5px;color:var(--ink-3);flex-wrap:wrap}
.mleft s{text-decoration:none;display:inline-flex;align-items:center;gap:3px}
.mleft .ti{font-size:13px}
.mleft s.late{color:var(--hot);font-weight:500}
.mleft s.all{color:var(--cool);font-weight:500}
.pend{font-size:10px;font-weight:500;background:#f7ecda;color:var(--warm);padding:2px 6px;border-radius:2px}
.avs{display:flex;flex:0 0 auto}
.av.more{background:var(--sand-3);color:var(--ink-2);font-size:10px}
.avs .av{width:21px;height:21px;font-size:9px;border:1.5px solid #fff;margin-left:-5px}
.avs .av:first-child{margin-left:0}
.a1{background:#002C5F}.a2{background:#00AAD2}.a3{background:#0F7A5A}.a4{background:#B57318}.a5{background:#B4231F}.a6{background:#5a6470}
.quick{width:100%;border:1px dashed var(--line-2);background:none;border-radius:var(--r);padding:7px;font-size:12px;color:var(--ink-3);text-align:left}
.quick:hover{border-color:var(--active);color:var(--navy)}
.qbox textarea{width:100%;resize:vertical;min-height:52px;font-size:13px}
.qrow{display:flex;gap:6px;margin-top:6px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px}
.phead{display:flex;align-items:center;gap:12px;row-gap:8px;flex-wrap:wrap;padding:10px 16px;user-select:none;border-left:3px solid var(--active)}
.phead .seg{flex:0 0 auto}
.phead b{font-size:13px;font-weight:500;color:var(--navy);cursor:pointer}
.pw{font-size:12px;color:var(--ink-3);white-space:nowrap}
.arw{color:var(--ink-3);font-size:11px;background:none;border:0;padding:0 4px}
.pbody{padding:4px 16px 14px;border-top:1px solid var(--line)}
/* Раньше пункты недели шли одним общим списком: строка тянулась на всю
   ширину панели, а закрытые пункты просто зачёркивались на месте среди
   открытых — справа от даты пустовало много места. Теперь открытые и
   закрытые пункты — две отдельные колонки, справа освобождённое место
   занято закрытыми делами, а не пустует. */
/* Месячный вид панели "Неделя": недели блоками друг под другом.
   Шапки блоков — одна и та же сетка с фиксированными колонками, поэтому
   полоска прогресса и счётчик стоят ровно друг под другом во всех блоках,
   а ячейка под бейдж "текущая" зарезервирована и там, где бейджа нет. */
.wblocks{display:flex;flex-direction:column;gap:8px;padding-top:8px}
.wblock{border:1px solid var(--line);border-radius:var(--r);background:var(--card);min-width:0}
.wblock.late{border-color:#e8c4c2}
.wblock.cur{border-color:var(--active)}
.wbhead{display:grid;grid-template-columns:minmax(0,1fr) 72px 130px 64px 16px;gap:10px;align-items:center;width:100%;
  background:var(--sand-2);border:0;border-radius:var(--r);padding:8px 12px;text-align:left;cursor:pointer;font-size:13px}
.wblock:has(.wbbody) .wbhead{border-radius:var(--r) var(--r) 0 0}
.wbhead:hover{background:var(--sand-3)}
.wblock.late .wbhead{background:#fdf2f1}
.wblabel{font-weight:600;color:var(--navy);min-width:0;overflow-wrap:break-word}
.wbbadge{min-width:0}
.wbcur{font-size:11px;font-weight:600;color:#00718c;background:var(--active-soft);border-radius:2px;padding:2px 6px;white-space:nowrap}
.wbhead .trk{max-width:none}
.wbcnt{font-size:12px;color:var(--ink-2);text-align:right;white-space:nowrap}
.wbchev{color:var(--ink-3);font-size:11px;text-align:right}
.wbbody{padding:4px 12px 12px}
@media(max-width:560px){.wbhead{grid-template-columns:minmax(0,1fr) 64px 56px 16px}.wbhead .trk{display:none}}
/* Раньше каждая строка недели была своим отдельным flex-рядом — если у
   соседних строк был разный набор бейджей/кнопок в хвосте, дата и текст
   съезжали каждая на своё место, потому что flex считает ширины только
   внутри одной строки. Сетка на всей колонке считает ширину каждой
   "колонки" сразу по всем строкам, поэтому дата у всех пунктов теперь
   в одном месте независимо от того, что там дальше — бейдж автора,
   кнопка "→ задача" или просто крестик удаления. */
.trk{height:5px;background:var(--sand-3);border-radius:2px;overflow:hidden;min-width:50px;flex:1}
.trk i{display:block;height:100%;background:var(--active)}
.item{display:flex;gap:9px;align-items:center;padding:5px 0;font-size:13px;max-width:920px}
.item input[type=checkbox]{accent-color:var(--cool);flex:0 0 auto}
.item label{flex:1;min-width:0;overflow-wrap:break-word}

.item label.editable{cursor:text;border-radius:4px;padding:2px 4px;margin:-2px -4px}
.item label.editable:hover{background:var(--sand-2)}
/* Поле переименования мелкой задачи. Было однострочным и стояло на
   общей ширине 200px (input[type=text]{width:200px}): в сетке недельки
   правило flex:1 не действует, и поле не растягивалось, а длинный текст
   обрезался. Теперь это textarea на всю колонку, растёт вниз по тексту. */
.item .wte{width:100%;min-width:0;box-sizing:border-box;font-size:13px;line-height:1.4;padding:3px 6px;
  resize:none;overflow:hidden;font-family:inherit;border:1px solid var(--active);border-radius:6px;background:#fff}
.item.done label{color:var(--ink-3);text-decoration:line-through}
.ref{font-size:10px;font-weight:600;color:#00718c;background:var(--active-soft);border-radius:2px;padding:2px 6px;white-space:nowrap;border:0;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.ref:hover{background:#cfeef7}
.by{font-size:10px;font-weight:600;color:var(--ink-2);background:var(--sand-2);border-radius:2px;padding:2px 6px;white-space:nowrap}
.mv{font-size:10px;font-weight:700;color:var(--warm);background:#f7ecda;border-radius:2px;padding:2px 6px;white-space:nowrap}
.mv.x3{color:var(--hot);background:#f6dedc}
.idue{font-size:11px;color:var(--ink-3);white-space:nowrap;border:1px solid transparent;border-radius:2px;padding:2px 4px;background:none;font-family:inherit}
.idue:hover{border-color:var(--line-2)}
.idue::-webkit-calendar-picker-indicator{opacity:.35}
.idue.late{color:var(--hot);font-weight:700}
.del{background:none;border:0;color:#c3c6cc;font-size:16px;line-height:1;padding:0 3px;opacity:.55}
.item:hover .del,.ci:hover .del{opacity:1}
.del:hover{color:var(--hot)}
.add{display:flex;gap:6px;margin-top:9px;max-width:920px;flex-wrap:wrap}
.add input[type=text]{flex:1;width:auto;min-width:160px}
.hint{display:flex;align-items:center;gap:10px;background:var(--active-soft);border-left:3px solid var(--active);border-radius:var(--r);padding:9px 13px;margin:10px 0;font-size:13px;max-width:920px}
.hint b{font-weight:500;flex:1}

.kpis{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:18px}
.kpi{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:var(--r);padding:13px 15px}
.kpi u{display:block;font-size:12px;color:var(--ink-3);text-decoration:none;margin-bottom:5px;font-weight:500}
.kpi b{font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--navy)}
.kpi i{font-style:normal;font-size:12px;color:var(--ink-3);margin-left:5px}
.kpi .dg{color:var(--cool);font-weight:700}
.kpi .db{color:var(--hot);font-weight:700}
.kpi .d0{color:var(--ink-3)}
.kpi .sub{display:block;font-size:11px;color:var(--ink-3);margin-top:3px}
h2{font-size:14px;font-weight:500;margin:24px 0 10px;color:var(--navy)}
h2 span{font-weight:400;color:var(--ink-3);font-size:11.5px;margin-left:8px;text-transform:none;letter-spacing:0}
table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-size:13px}
th{text-align:left;font-weight:500;font-size:12px;color:var(--ink-2);padding:9px 14px;border-bottom:1px solid var(--line);background:var(--sand-2)}
td{padding:9px 14px;border-bottom:1px solid #f1eeec}
tr:last-child td{border-bottom:0}
.num{text-align:right;font-variant-numeric:tabular-nums}
.bad{color:var(--hot);font-weight:700}
.mini{display:flex;align-items:center;gap:7px}
.bars{display:flex;align-items:center;gap:8px}
.bars .b{height:14px;border-radius:2px;min-width:2px;background:var(--navy)}
.stub{text-align:center;padding:70px 20px;color:var(--ink-3)}
.stub-wrap h3{color:var(--navy)}
.adminrow{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.adminrow:last-child{border-bottom:0}
.adminrow input[type=checkbox]{flex:0 0 auto}
.adminrow span{font-size:13px}
.stub b{display:block;font-size:15px;color:var(--ink-2);font-weight:600;margin-bottom:5px}

.ov{position:fixed;inset:0;background:rgba(0,20,45,.42);display:none;align-items:flex-start;justify-content:center;padding:34px 16px;overflow-y:auto;z-index:9}
.ov.on{display:flex}
.modal{background:var(--card);border-radius:var(--r);width:100%;max-width:760px;padding:0 24px 22px;border-top:4px solid var(--navy)}
.mgrid{display:grid;grid-template-columns:1fr 260px;gap:22px;align-items:start}
.mgrid>div{min-width:0}
.mright{border-left:1px solid var(--line);padding-left:22px}
@media(max-width:760px){.mgrid{grid-template-columns:1fr}.mright{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:16px}}
.modal.tight{max-width:460px}
.modal.tight .mgrid{display:block}
.mhead{padding:18px 0 0}
.mt{width:100%;border:1px solid transparent;border-radius:var(--r);font-size:17px;font-weight:600;line-height:1.35;padding:5px 8px;margin:0 -8px 3px;background:none}
.mt:hover{border-color:var(--line)}
.msub{font-size:12px;color:var(--ink-3);margin-bottom:12px}
.headmeta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.whocluster{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card);border-radius:20px;padding:4px 10px 4px 6px;cursor:pointer}
.whocluster:hover{border-color:var(--active)}
.whocluster.err{border-color:var(--hot);background:#fdf0ef}
.whocluster .tii{color:var(--ink-3)}
.headmeta .cipick{right:auto;left:0;top:38px}
.sec{margin-bottom:17px}
.sec h4{font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:8px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.desc{width:100%;min-height:74px;resize:vertical;line-height:1.55}
.desc-edit{width:100%;min-height:74px;line-height:1.55;font-size:13px;font-family:inherit;
  border:1px solid var(--active);border-radius:var(--r);padding:8px;background:#fff;overflow-wrap:anywhere}
.desc-edit.dragover{background:var(--active-soft);border-style:dashed}
.desc-edit:empty::before{content:attr(data-placeholder);color:var(--ink-3)}
.desc-edit .dimg{max-width:100%;max-height:260px;display:block;margin:6px 0;border-radius:4px;background:var(--sand-2);cursor:default;vertical-align:top}
.desc-edit .dlink,.desc-view a{color:#00718c;text-decoration:underline;cursor:pointer}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.row3 label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:4px}
.row3 select{width:100%}
.desc-view{font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--ink-2);cursor:pointer;border-radius:var(--r);padding:8px;margin:-8px;overflow-wrap:anywhere;word-break:break-word}
.desc-view a,.cmt a{word-break:break-all}
.cmt,.log{overflow-wrap:anywhere;word-break:break-word}
.sec,.mgrid>div,.mright{min-width:0}
.desc-view:hover{background:var(--sand-2)}
.pick{display:flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--card);border-radius:20px;padding:3px 10px 3px 4px;font-size:12px;color:var(--ink-2)}
.pick.on{border-color:var(--active);background:var(--active-soft);color:var(--navy);font-weight:600}
.pick .av{width:20px;height:20px;font-size:9px}
.ci{display:flex;gap:7px;align-items:center;padding:5px 0;font-size:13px;position:relative;border-bottom:1px solid var(--line)}
.ci:last-child{border-bottom:0}
.ci>input[type=checkbox]{flex:0 0 auto}
/* Раньше каждый пункт чек-листа на карточке был своим отдельным flex-рядом.
   Кнопка даты была шириной по своему тексту ("Без срока" длиннее "30 сен"),
   и от этого крестик удаления после неё сдвигался то левее, то правее в
   зависимости от конкретной строки. Внутри .chl-rows (список пунктов одного
   чек-листа) переводим на сетку — тогда колонка даты одной ширины у всех
   строк сразу, и колонка удаления с ней. Разделитель строк — .rowline,
   отдельным элементом, а не border на самих ячейках: ячейки центрируются
   по высоте строки, и если пункт заворачивается на несколько строк,
   border прямо на маленькой ячейке (аватарка, дата) окажется посередине
   строки, а не у её нижнего края. */
.chl-rows{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto auto;column-gap:7px;row-gap:2px;align-items:center}
.chl-rows .ci{display:contents}
.chl-rows .ci>*:not(.cipick){padding-block:5px}
.chl-rows .rowline{grid-column:1/-1;border-top:1px solid var(--line);height:1px;margin:2px 0}
.ci .citext{flex:1;min-width:60px;font-size:13px;line-height:1.4;padding:2px 4px;margin:1px -4px;border-radius:4px;overflow-wrap:anywhere;white-space:pre-wrap}
span.citext{cursor:text}
span.citext:hover{background:var(--sand-2)}
textarea.citext{border:1px solid var(--active);background:#fff;resize:none;overflow:hidden;font-family:inherit;min-height:24px;width:100%;box-sizing:border-box}
.ci.done .citext{color:var(--ink-3);text-decoration:line-through}
.ciav{border:0;background:none;padding:0;flex:0 0 auto;cursor:pointer;border-radius:50%}
/* Раньше без исполнителя аватарка просто не рисовалась вообще — дата и
   крестик удаления съезжали влево на этой строке относительно соседних
   строк, где аватарка есть. Пустая заглушка того же размера держит все
   строки на одной линии независимо от того, назначен исполнитель или нет. */
.ciav-empty{display:inline-block;width:22px;height:22px}
.ciav .av{width:22px;height:22px;font-size:9px}
.ciav:hover .av{box-shadow:0 0 0 2px var(--active)}
.cidate{flex:0 0 auto;display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-2);background:none;border:0;cursor:pointer;padding:3px 6px;border-radius:var(--r);min-width:82px}
.cidate:hover{background:var(--sand-2)}
.cidate.late{color:var(--hot);font-weight:600}
.cidate.none{color:var(--ink-3)}
.ci input[type=date]{font-size:12px;padding:4px 6px;flex:0 0 auto}
.cipick{position:absolute;right:28px;top:30px;z-index:12;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 6px 20px rgba(0,44,95,.16);padding:5px;min-width:180px}
/* Списки-переключатели (сотрудник/приоритет/чья неделя/кому мелкая) открываются
   и закрываются чистым DOM через togglePick() — без вызова render(), который
   пересобирает всю доску и ощущался как лаг при каждом клике по фильтру.
   Раньше был обычный select — открывался мгновенно средствами браузера,
   без единой строчки JS; эти правила возвращают ту же скорость открытия. */
.cipick-toggle{display:none}
.cipick-toggle.show{display:block}
/* Раньше в недельке список открывался влево (наследовал right:28px) и
   наезжал на соседние элементы шапки. Открывается от кнопки-аватарки
   вправо и вниз, как и остальные подобные списки в этом виде. */
.wwpick-wrap .cipick{right:auto;left:0;top:32px}
.wwtrigger{display:flex;align-items:center;gap:2px;border-radius:var(--r);padding:2px 4px 2px 2px}
.wwtrigger:hover{background:var(--sand-2)}
.wwchev{width:13px;height:13px;color:var(--ink-3)}
.wwtrigger:hover .wwchev{color:var(--ink)}
.cipick u{display:block;font-size:11px;color:var(--ink-3);text-decoration:none;padding:3px 7px 5px}
.cipick button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 7px;border-radius:var(--r);font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.cmtbox{width:100%;margin-bottom:6px;resize:none;overflow:hidden;min-height:36px;font-family:inherit;line-height:1.4}
.attach-label{display:inline-flex;align-items:center;margin:0}
.attach-select{font-size:12.5px;padding:5px 8px;border-radius:var(--r);border:1px solid var(--line-2);background:#fff;color:var(--ink-2);max-width:180px}
.uploadrow{display:flex;align-items:center;gap:8px;width:100%;padding:6px 7px;border-radius:var(--r);font-size:13px;color:var(--ink);cursor:pointer;font-weight:600;border-bottom:1px solid var(--line);margin-bottom:3px;padding-bottom:9px}
.uploadrow:hover{background:var(--sand-2)}
.cipick button:hover{background:var(--sand-2)}
.cipick button.on{background:var(--active-soft);color:var(--navy);font-weight:600}
.cipick .av{width:22px;height:22px;font-size:9px}
/* Раньше кнопка удаления пункта была opacity:0 и появлялась только при наведении —
   на телефоне и планшете hover не работает вообще, кнопки не было видно никогда.
   Теперь она видна всегда, просто менее заметная в спокойном состоянии. */
.ci .del{margin-left:auto;color:var(--ink-3);opacity:1;padding:4px 6px;border-radius:var(--r);flex:0 0 auto}
.ci .del:hover{background:#fdecea;color:var(--hot)}
.cmt{padding:9px 0;border-top:1px solid #f1eeec;font-size:13px;line-height:1.5}
.reply{border:0;background:none;color:var(--ink-3);font-size:11px;cursor:pointer;padding:0 0 0 8px;float:right}
.reply:hover{color:#00718c;text-decoration:underline}
.replybar{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);background:var(--active-soft);border-radius:var(--r);padding:5px 9px;margin-bottom:6px}
.replybar button{margin-left:auto;border:0;background:none;color:var(--ink-2);font-size:14px;cursor:pointer;line-height:1}
.cmt em{font-style:normal;font-weight:600;font-size:12px;color:var(--navy)}
.cmt s{text-decoration:none;color:var(--ink-3);font-size:11px;margin-left:6px}
.log{font-size:12px;color:var(--ink-2);padding:5px 0;display:flex;gap:8px}
.log s{text-decoration:none;color:var(--ink-3);flex:0 0 88px}
.x{float:right;background:none;border:0;font-size:20px;color:var(--ink-3);line-height:1;margin-top:16px}
.cardlink{float:right;display:flex;align-items:center;gap:5px;background:none;border:1px solid var(--line-2);border-radius:20px;padding:4px 10px;font-size:12px;color:var(--ink-2);margin:14px 8px 0 0}
.cardlink:hover{background:var(--sand-2)}
.cardlink .tii{width:.9em;height:.9em}
.att{display:flex;gap:8px}
.att div{width:64px;height:48px;border-radius:2px;background:linear-gradient(135deg,#c8d4e0,#dde4ea);border:1px solid var(--line)}
.mentionbox{position:absolute;left:0;right:0;background:#fff;border:1px solid var(--line-2);border-radius:var(--r);box-shadow:0 6px 20px rgba(0,44,95,.16);z-index:11;max-height:160px;overflow-y:auto;margin-top:-4px}
.mentionbox button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;padding:6px 9px;font-size:13px;text-align:left;cursor:pointer}
.mentionbox button.on,.mentionbox button:hover{background:var(--active-soft)}
.mentionbox .av{width:20px;height:20px;font-size:9px}
.chlname{flex:1;min-width:0;font-size:12.5px;font-weight:600;color:var(--navy);background:none;border:0;padding:2px 4px;margin:-2px -4px;border-radius:4px;text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.35;cursor:text}
.chlname:hover{background:#fff}
.imgov{position:fixed;inset:0;background:rgba(0,10,20,.86);display:none;align-items:center;justify-content:center;z-index:50;padding:30px}
.imgov.on{display:flex}
.imgov img,.imgov video{max-width:100%;max-height:100%;border-radius:4px;cursor:default}
.imgov .x{color:#fff;background:rgba(255,255,255,.12);border:0;width:34px;height:34px;border-radius:50%;font-size:20px;cursor:pointer}
.tii{width:1em;height:1em;vertical-align:-.15em;flex:0 0 auto}
.tii.ml-auto{margin-left:auto}
.attgrid{display:flex;flex-wrap:wrap;gap:6px}
.attimg{width:72px;height:72px;border-radius:var(--r);background:var(--sand-2);display:flex;align-items:center;justify-content:center;color:#8b919c;font-size:20px;overflow:hidden;cursor:zoom-in;flex:0 0 auto}
.attimg img{width:100%;height:100%;object-fit:cover;display:block}
.attvid{border:0;position:relative;color:#fff;background:#333 center/cover no-repeat;cursor:pointer}
.attvid .tii{background:rgba(0,0,0,.45);border-radius:50%;width:30px;height:30px;padding:7px;box-sizing:border-box}
.attvid:disabled{opacity:.5;cursor:wait}
.attpdf{border:0;background:#e5484d;color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.attpdf:disabled{opacity:.5;cursor:wait}
.attfile{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--navy);padding:5px 0;text-decoration:none;width:100%}
.attfile span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.attbadge{flex:0 0 auto;color:#fff;font-size:10px;font-weight:700;border-radius:4px;padding:2px 5px;letter-spacing:.02em}
.pdfframe{width:min(90vw,900px);height:85vh;border:0;border-radius:4px;background:#fff}
.cmtimg{margin:4px 0;max-width:220px;border-radius:var(--r);overflow:hidden;background:var(--sand-2)}
.cmtimg img{width:100%;display:block;max-height:220px;object-fit:cover}
.cmtimg a{font-size:12px;color:#00718c;display:block;padding:4px 6px}
.cover-lg{height:150px;margin:0 -24px 16px;background:#dde4ec;display:flex;align-items:center;justify-content:center;color:#8b919c;font-size:28px;overflow:hidden}
.cover-lg img{width:100%;height:100%;object-fit:cover;display:block}
.foot{display:flex;gap:8px;border-top:1px solid var(--line);padding-top:14px}
.due-box{display:flex;align-items:center;gap:10px;background:var(--sand-2);border-radius:var(--r);padding:9px 12px;font-size:13px}
.due-box b{font-weight:600}
.req{background:#f7ecda;border-left:3px solid var(--warm);border-radius:var(--r);padding:11px 13px;font-size:13px;margin-bottom:10px}
.req p{margin:4px 0 9px;color:var(--ink-2);font-size:12.5px}
.tcard{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:1px solid var(--line-2);background:var(--card);border-radius:var(--r);padding:13px 15px;margin-bottom:8px}
.tcard:hover{border-color:var(--active);background:var(--active-soft)}
.tcard b{display:block;font-size:14px;font-weight:600;margin-bottom:3px;color:var(--navy)}
.tcard span{font-size:12px;color:var(--ink-2);line-height:1.45}
.tico{width:32px;height:32px;border-radius:var(--r);background:var(--navy);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex:0 0 auto}
.imgtools{position:fixed;top:18px;left:20px;display:flex;gap:8px}
.imgtools a{background:rgba(255,255,255,.14);color:#fff;text-decoration:none;font-size:13px;padding:7px 12px;border-radius:var(--r)}
.imgtools a:hover{background:rgba(255,255,255,.26)}

/* =====================================================================
   РЕДИЗАЙН: "как Trello, в цветах Hyundai".
   Отдельным блоком поверх старых правил, а не правкой каждого по месту:
   старые правила целы, и если что-то поедет, откат — удалить этот блок.
   ===================================================================== */
:root{--r:8px}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans",Ubuntu,sans-serif;color:#172b4d}

/* Шапка и меню — одна строка, как у Trello */
header{background:var(--navy);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.top{height:48px;gap:14px;justify-content:flex-start}
.brand{font-size:14px;letter-spacing:.16em;flex:0 0 auto}
header nav{display:flex;align-items:center;gap:2px;background:none;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
header nav::-webkit-scrollbar{display:none}
header nav button,header nav a,header nav a:link,header nav a:visited,header nav span.on{padding:6px 12px;border:0;border-radius:6px;
  color:#dbe6f3;font-size:13.5px;font-weight:500;background:none;white-space:nowrap;text-decoration:none;display:inline-block;cursor:pointer}
header nav button:hover,header nav a:hover{background:rgba(255,255,255,.12);color:#fff}
header nav button.on,header nav span.on{background:rgba(255,255,255,.2);color:#fff;font-weight:600;border:0;cursor:default}
header nav .navsoon{padding:6px 12px;color:#7f9bbd;font-size:13px;white-space:nowrap;cursor:help}
.me{flex:0 0 auto;margin-left:auto}
@media(max-width:640px){#meName{display:none}.brand{letter-spacing:.08em}}

/* Фон доски — только на вкладке "Задачи" */
body.boardbg{background:#1d5391}
body.boardbg main{padding-top:14px}
body.boardbg .bar .btn{background:#fff;color:var(--navy)}
body.boardbg .bar .btn:hover{background:#e9eef5}
body.boardbg .chip.on{background:#fff;color:var(--navy);border-color:#fff;font-weight:600}
body.boardbg .chip,body.boardbg .fltav,body.boardbg #q{border-color:transparent}

/* Панель "Неделя" — белая карточка со скруглением */
.panel{border:0;border-radius:12px;box-shadow:0 1px 1px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31);overflow:visible}
.phead{border-left:0;padding:10px 16px}

/* Доска: колонки-плашки, карточки с мягкой тенью */
.board{gap:10px;overflow-x:auto;padding-bottom:10px}
.col{background:#f1f2f4;border-radius:12px;padding:8px}
.col:not(.fold){min-width:232px}
.col.fold{border-radius:12px}
.col.over{background:#f5e6e5}
.colhead b{color:#172b4d;font-weight:600;font-size:14px}
.cnt{background:none;color:#626f86;font-weight:500}
.cnt.wip{background:#ffd5d2;color:#ae2e24;border-radius:4px}
.card{border:0;border-radius:8px;padding:8px 10px;margin-bottom:8px;
  box-shadow:0 1px 1px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31)}
.card:hover{box-shadow:0 0 0 2px #388bff}
.card.late{border-left-color:transparent;background:#fff4f3;box-shadow:inset 3px 0 0 var(--hot),0 1px 1px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31)}
.card.late:hover{box-shadow:inset 3px 0 0 var(--hot),0 0 0 2px #388bff}
.cover{margin:-8px -10px 8px;height:72px;border-radius:8px 8px 0 0}
.pbar{width:40px;height:8px;border-radius:4px}
.ctitle{font-size:14px;font-weight:400;color:#172b4d;overflow-wrap:anywhere}
.cdesc{font-size:12px}
.mleft{gap:6px}
.mleft s{padding:1px 5px;border-radius:4px;color:#44546f}
.mleft s.late{background:#c9372c;color:#fff;font-weight:500}
.mleft s.all{background:#1f845a;color:#fff;font-weight:500}
.avs .av{width:24px;height:24px;font-size:9.5px}
.col .quick{border:0;background:none;color:#44546f;border-radius:8px;padding:8px}
.col .quick:hover{background:rgba(9,30,66,.08);color:#172b4d}
.qbox textarea{border-radius:8px;box-shadow:0 1px 1px rgba(9,30,66,.25)}

/* Окно карточки */
.ov{background:rgba(9,30,66,.55)}
.modal{border-top:0;border-radius:12px;padding:0 28px 24px;box-shadow:0 8px 24px rgba(9,30,66,.3)}
.modal .cover-lg{margin:0 -28px 16px;border-radius:12px 12px 0 0}
.modal .sec h4{color:#172b4d;font-weight:600}
.cipick,.mentionbox{border-radius:8px;border-color:#dfe1e6}

/* Кнопки, поля, чипы */
.btn{border-radius:6px}
.btn.sm{border-radius:6px}
.chip,.fltav{border-radius:6px}
.kpi{border-top:0;border-radius:12px;box-shadow:0 1px 1px rgba(9,30,66,.2),0 0 1px rgba(9,30,66,.25);border:0}
table{border-radius:12px}
/* Бежевая гамма старого дизайна -> нейтральный серый, как у Trello.
   Меняем сами переменные: всё, что на них завязано (подложки чек-листов,
   шапки таблиц, hover), перекрашивается разом. */
:root{--sand:#f7f8f9;--sand-2:#f1f2f4;--sand-3:#dcdfe4;--line:#dfe1e6;--line-2:#c7ccd4}
/* Аватарка в шапке сливалась с тёмно-синим фоном */
header .av{box-shadow:0 0 0 2px rgba(255,255,255,.55)}

/* =====================================================================
   АУДИТ ДИЗАЙНА: система скруглений, цвета, контраст, доступность.
   ===================================================================== */

/* Скругления. Одно правило на весь интерфейс:
     бейджи и мелкие метки  4px
     кнопки и поля          6px
     карточки               8px
     колонки, панели, окна  12px
     аватарки               круг
   Раньше было семь значений вперемешку, включая 2px и "пилюли" 20px. */
.rep,.pend,.wbcur,.ref,.by,.mv,.idue,.cnt,.cnt.wip,.mleft s,.attbadge,.pbar,
.item label.editable,.ci .citext,.chlname,.att div,.bars .b,.trk{border-radius:4px}
.whocluster,.pick,.cardlink,input[type=text],input[type=date],select,textarea,.desc-edit,.seg,.cidate,.arw,.del,.x{border-radius:6px}
.cover{border-radius:8px 8px 0 0}
.desc-edit .dimg,.imgov img,.imgov video,.pdfframe,.attimg{border-radius:8px}
.sec[style*="sand-2"],.wblock,.wbhead,.req,.hint{border-radius:12px}
.wblock:has(.wbbody) .wbhead{border-radius:12px 12px 0 0}

/* Цвет: один красный, один зелёный, один акцент.
   Красный бейджа и красный просрочки были двумя разными; обводка при
   наведении была ярко-синей из палитры Atlassian и спорила с фирменным
   бирюзовым. Для обводок берём тёмный бирюзовый: яркий #00AAD2 на белом
   даёт 2,7:1, а для элементов управления нужно 3:1. */
:root{--hot:#c9372c;--cool:#1f845a;--focus:#0087a8;
  /* Вспомогательный серый: был 3,1:1 на белом и 2,9:1 на розовой карточке,
     норма 4,5:1. Теперь 5,5:1 и 5,1:1. */
  --ink-3:#5e6a7d}
.mleft s.late{background:var(--hot)}
.mleft s.all{background:var(--cool)}
.card:hover{box-shadow:0 0 0 2px var(--focus)}
.card.late:hover{box-shadow:inset 3px 0 0 var(--hot),0 0 0 2px var(--focus)}
.cdesc{color:var(--ink-3)}

/* Фокус с клавиатуры: видимая рамка на всём, что нажимается. */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.card:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
header nav :focus-visible,header .me :focus-visible{outline-color:#fff}

/* Зоны нажатия не меньше 28x28 (минимум WCAG 2.2: 24x24). Раньше стрелки
   недели и крестики удаления были около 12x16. */
.arw,.del,.ico{min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}
.arw:hover,.ico:hover{background:var(--sand-2)}
.arw:disabled{opacity:.35;cursor:default;background:none}
.x{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center;padding:0}
.x:hover{background:var(--sand-2)}
.replybar button{min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}

/* Иконки Tabler внутри кнопок и меток */
.arw .tii,.x .tii,.del .tii,.ico .tii,.wbchev .tii{width:16px;height:16px}
.x .tii{width:18px;height:18px}
.by .tii,.mv .tii,.btn .tii{width:13px;height:13px;vertical-align:-2px;margin-right:2px}
.mv{display:inline-flex;align-items:center;gap:2px}
.tico .tii{width:16px;height:16px}
.wbchev{display:inline-flex;justify-content:flex-end}
.imgov .x{color:#fff}

/* Скелет загрузки */
.sk{background:#e4e7ec;border-radius:6px}
.sk-line{height:12px}
.sk-card{border-radius:8px;margin-top:8px;background:#fff;opacity:.7}
.sk-col .sk-line{background:#d5d9e0;margin:4px 4px 6px}
.sk-panel{padding:16px}
body.boardbg .sk-panel .sk{background:#e4e7ec}
@media (prefers-reduced-motion:no-preference){
  .sk{animation:skpulse 1.4s ease-in-out infinite}
  @keyframes skpulse{50%{opacity:.45}}
}

/* Уменьшенное движение: без наклона и увеличения при перетаскивании
   и без плавных переходов. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .cardghost.lift{transform:none}
}
/* Мелочи после прогона: кнопка "Объяснить просрочку" прилипала к
   "Описание"; крестик удаления был бледным (серый + прозрачность 55%). */
.mhead{margin-bottom:14px}
.del{color:var(--ink-3);opacity:1}
.del:hover{color:var(--hot);background:#fdecea}

/* Обложки: картинка целиком, в своих пропорциях, как в Trello.
   Раньше и на доске (72px), и в окне (150px) вырезалась полоса из
   середины: у вертикальных макетов не было видно ни верха, ни низа.
   Высокие картинки ограничены по высоте, по бокам нейтральный фон. */
.cover{height:auto;min-height:72px;max-height:260px;background:#dfe1e6}
.cover img{width:100%;height:auto;max-height:260px;object-fit:contain;display:block}
.cover-lg{height:auto;min-height:120px;max-height:360px;background:#dfe1e6;cursor:zoom-in}
.cover-lg img{width:100%;height:auto;max-height:360px;object-fit:contain;display:block}
.cover-color{height:32px;margin:-8px -10px 8px;border-radius:8px 8px 0 0}
/* Если у карточки есть обложка, кнопки "Ссылка" и "закрыть" лежат поверх
   неё (как в Trello), а не стоят в потоке: иначе они отжимали обложку,
   и она была уже окна. */
.modal{position:relative}
.modal:has(> .cover-lg) > .x,.modal:has(> .cover-lg) > .cardlink{position:absolute;top:12px;margin:0;z-index:2;
  background:rgba(255,255,255,.94);box-shadow:0 1px 3px rgba(9,30,66,.25)}
.modal:has(> .cover-lg) > .x{right:14px;border-radius:50%}
.modal:has(> .cover-lg) > .cardlink{right:56px}
.modal > .cover-lg{margin:0 -28px 12px;border-radius:12px 12px 0 0}
/* число заявок от дилеров рядом со «Справочником» */
header nav .navbadge{display:inline-block;min-width:18px;margin-left:6px;padding:0 6px;border-radius:9px;background:var(--hot);color:#fff;font-size:11px;font-style:normal;font-weight:700;line-height:18px;text-align:center}
header nav .navbadge.info{background:var(--active)}

/* ===== ОТСТУПЫ И РАЗМЕРЫ: единая шкала для Отчётника, Справочника и Аналитики =====
   Шаги отступов: 4, 8, 12, 16, 24, 32. Высота поля и обычной кнопки 34, маленькой кнопки и чипа 28.
   Расстояние между соседними элементами в строке 8, между блоками 16, между разделами 24.
   Правила с .ds действуют только на этих страницах, доска задач не меняется. */
:root{--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--ctl:34px;--ctl-sm:28px}
/* У блока страницы стоят и класс wrap, и тег main: правило для класса обнуляло вертикальные отступы main,
   и содержимое прилипало к шапке и к низу страницы. */
main.wrap{padding:var(--sp-5) 20px 64px}
body.boardbg main.wrap{padding-top:var(--sp-4)}
.ds .btn,.ds input[type=text],.ds input[type=date],.ds select{min-height:var(--ctl)}
.ds .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 16px}
.ds .btn.sm{min-height:var(--ctl-sm);padding:4px 12px}
.ds .chip{min-height:var(--ctl-sm);display:inline-flex;align-items:center;padding:4px 12px}
.ds .seg button{min-height:32px;padding:6px 16px}
.ds input[type=text],.ds input[type=date],.ds select,.ds textarea{padding:6px 12px}
.ds input[type=date],.ds select{height:var(--ctl)}
/* Вкладки не режутся на узком экране: прокручиваются, названия не переносятся */
.ds .seg{max-width:100%;overflow-x:auto;scrollbar-width:none}
.ds .seg::-webkit-scrollbar{display:none}
.ds .seg button{white-space:nowrap;flex:0 0 auto}
.ds textarea{padding:8px 12px}

/* Метки и поля карточки дилеров, как в Trello */
.lblchip{display:inline-block;min-width:36px;max-width:100%;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;line-height:16px;overflow-wrap:anywhere;min-height:20px;vertical-align:middle}
.lblrow{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:8px}
.lblrow .fltwrap .cipick{min-width:220px;max-height:280px;overflow:auto}
.cipick button .lblchip{flex:1}
.cipick button .tick{width:16px;flex:none;color:var(--navy);font-weight:700}
.dfields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:10px}
.dfields label{display:block;font-size:11px;color:var(--ink-3);margin-bottom:3px}
.dfields .fv{font-size:13px;color:var(--ink);background:var(--sand);border-radius:var(--r);padding:6px 9px;min-height:30px;overflow-wrap:anywhere}
.dfields .fv.no{color:var(--ink-3)}

/* Обложка «вся карточка», как в Trello: картинка на весь фон, название поверх */
.card:has(> .cover-bg){position:relative;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;color:#fff}
.card:has(> .cover-bg) > :not(.cover-bg){position:relative;z-index:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.card:has(> .cover-bg) .lblchip,.card:has(> .cover-bg) .rep{text-shadow:none}
.cover-bg{position:absolute;inset:0;z-index:0;background:#44546f}
.cover-bg img{width:100%;height:100%;object-fit:cover;display:block}
.cover-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.15) 65%,rgba(0,0,0,0) 100%)}
/* Окно выбора обложки */
.covpick{min-width:260px;max-width:300px}
.covsize{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 2px 6px}
.covsize button.on{background:var(--active-soft);font-weight:600}
.covgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:2px 2px 8px}
.covgrid .covthumb{display:block;padding:0;border:2px solid transparent;border-radius:var(--r);overflow:hidden;height:56px;background:var(--sand-2)}
.covgrid .covthumb.on{border-color:var(--active)}
.covgrid .covthumb div{width:100%;height:100%}
.covgrid .covthumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Фильтр с поиском: длинный список прокручивается внутри окошка и не ломает вёрстку */
.fltwrap{min-width:0}
.fltav>span{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fltwrap .cipick{min-width:220px;max-width:min(320px,90vw)}
.cipick-list{max-height:260px;overflow-y:auto}
.cipick .flt-q{width:100%;min-width:0;margin:2px 0 6px}
.cipick button span{min-width:0;overflow-wrap:anywhere}
/* Описание карточки дилеров: пока не кликнул, выглядит как обычный текст, а не как открытое поле */
.desc-edit.quiet{border-color:transparent;background:transparent;padding:6px 8px;min-height:44px}
.desc-edit.quiet:hover{background:var(--sand);border-color:var(--line)}
.desc-edit.quiet:focus{background:#fff;border-color:var(--active);outline:none}
.dnote{display:none;font-size:11px;color:var(--ink-3);margin-top:4px}
.desc-edit.quiet:focus + .dnote{display:block}
/* Комментарий: вставленные картинки показываются под полем */
.cmtbox{resize:none;overflow-y:auto;min-height:54px}
.cmtprev{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.cmtprev:empty{display:none}
.cmtthumb{width:84px;height:64px;border-radius:var(--r);overflow:hidden;background:var(--sand-2)}
.cmtthumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Поле комментария с картинками внутри: рамка одна на текст и миниатюры */
.cmtfield{border:1px solid var(--line-2);border-radius:6px;background:var(--card);margin-bottom:6px;padding:2px}
.cmtfield:focus-within{border-color:var(--active)}
.cmtfield textarea.cmtbox{border:0;outline:0;box-shadow:none;margin:0;background:transparent;width:100%;padding:6px 8px}
.cmtfield .cmtprev{margin:0;padding:10px 10px 6px}
.cmtthumb{position:relative;width:96px;height:72px}
.cmtthumb > div{width:100%;height:100%;border-radius:var(--r);overflow:hidden;background:var(--sand-2)}
.cmtx{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:13px;line-height:18px;cursor:pointer;padding:0}
.dnote-static{font-size:11px;color:var(--ink-3);margin-top:4px}

/* Окно настроек рейтинга */
.rts-modal{max-width:760px}
.rts{max-height:62vh;overflow-y:auto;padding-right:6px}
.rts-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.rts-g{margin-top:14px}
.rts-g b{color:var(--navy);font-size:13px}
.rts-g i{font-style:normal;font-size:12px;color:var(--ink-3);margin-left:6px}
.rts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 14px;margin-top:6px}
.rts-f{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--ink-2);min-width:0}
.rts-f span{overflow-wrap:anywhere}
.rts-f input{width:100%;min-width:0}

/* Н4: полоса о сбое расписания (только админам) и журнал запусков в «Настройках» */
.schalert{background:#fdecea;border-bottom:1px solid #f1c2bd;color:var(--hot)}
.schalert-in{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding-top:8px;padding-bottom:8px;font-size:13px}
.schalert-t{min-width:0;overflow-wrap:anywhere}
.schalert-a{display:flex;align-items:center;gap:12px;white-space:nowrap}
.schalert-a a{color:var(--hot);text-decoration:underline;cursor:pointer}
.schalert-a button{background:none;border:0;padding:4px;color:var(--hot);cursor:pointer;border-radius:4px;display:flex}
.schalert-a button:hover{background:rgba(180,35,31,.1)}
.schgrid{display:grid;grid-template-columns:110px 150px minmax(0,1fr) 92px;font-size:13px;margin-top:6px}
.schgrid>div{padding:8px 8px 8px 0;border-bottom:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.schgrid>.h{color:var(--ink-3);font-size:12px;padding-top:4px;padding-bottom:6px}
.schgrid>.st{text-align:right;padding-right:0}
.schgrid .err{color:var(--hot);margin:0;padding:0;background:none;border:0}
.schbadge{display:inline-block;font-size:12px;padding:2px 8px;border-radius:4px;background:#e6f4ee;color:var(--cool)}
.schbadge.bad{background:#fdecea;color:var(--hot)}
.schbadge.run{background:var(--sand-2);color:var(--ink-2)}
.schgrid .wk{display:none}
@media (max-width:640px){.schgrid{grid-template-columns:minmax(0,1fr) 92px}.schgrid>.h,.schgrid>.k{display:none}.schgrid .wk{display:inline}.schgrid>.w{grid-column:1/-1;border-bottom:0;padding-bottom:0;color:var(--ink-3);font-size:12px}}

/* Этап 3а: панель «Неделя». Одна сетка на все строки (subgrid), группы по срокам, своя прокрутка. */
.wk-head{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:10px 16px}
.wk-nav{display:flex;align-items:center;gap:4px;white-space:nowrap}
.wk-sum{font-size:13px;color:var(--ink-2);min-width:0;overflow-wrap:anywhere;flex:1 1 200px}
.wk-latecnt{color:var(--hot);font-weight:500}
.wk-who{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:4px;background:var(--card);padding:3px 8px;cursor:pointer;font:inherit;font-size:13px;color:var(--ink)}
.wk-who:hover{border-color:var(--ink-3)}
.wk-who .av{width:20px;height:20px;font-size:9px}
.wk-who-l{color:var(--ink-3)}
.wk-who-n{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wk-body{max-height:50vh;overflow:auto;padding-top:6px}
.wk-rows{display:grid;grid-template-columns:22px 18px minmax(0,1fr) 76px minmax(0,110px) auto;column-gap:8px}
.wk-r{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;border-bottom:1px solid var(--line);min-height:34px;padding:3px 0}
.wk-r.late{background:#fdf2f1}
.wk-r:hover{background:var(--sand)}
.wk-r.late:hover{background:#fbe9e7}
.wk-g{grid-column:1/-1;font-size:12px;font-weight:500;color:var(--ink-2);padding:10px 0 4px;display:flex;align-items:center;gap:6px}
.wk-g.late{color:var(--hot)}
.wk-g.rev{color:#00718c}
.wk-toggle{background:none;border:0;font:inherit;font-size:12px;font-weight:500;color:var(--ink-2);cursor:pointer;text-align:left;padding:10px 0 6px}
.wk-toggle:hover{color:var(--navy)}
.wk-toggle .tii{width:14px;height:14px}
.wk-empty{grid-column:1/-1;font-size:13px;color:var(--ink-3);padding:8px 0}
.wk-chk{display:flex;justify-content:center}
.wk-chk input{accent-color:var(--cool);width:16px;height:16px;margin:0;cursor:pointer}
.wk-kind{display:flex;color:var(--ink-3)}
.wk-kind .tii{width:15px;height:15px}
.wk-tx{min-width:0;overflow-wrap:anywhere;font-size:13px;line-height:1.35;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.wk-t{min-width:0}
.wk-t.editable{cursor:text;border-radius:4px;padding:1px 3px;margin:-1px -3px}
.wk-t.editable:hover{background:var(--sand-2)}
.wk-link{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.wk-link:hover{color:var(--navy);text-decoration:underline}
.wk-card{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--ink-3);cursor:pointer;text-align:left;min-width:0;overflow-wrap:anywhere}
.wk-card:hover{color:var(--navy);text-decoration:underline}
.wk-r.done .wk-t,.wk-r.done .wk-link{color:var(--ink-3);text-decoration:line-through}
.wk-note{font-size:11px;color:var(--ink-3)}
.wk-tx .wte{width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:13px;padding:3px 6px;border:1px solid var(--active);border-radius:4px;resize:none}
.wk-date{font-size:12px;color:var(--ink-2);white-space:nowrap;position:relative;border-radius:4px;padding:2px 4px}
.wk-date.none{color:var(--ink-3)}
.wk-date.late{color:var(--hot);font-weight:600}
.wk-date.edit{cursor:pointer;border:1px solid transparent}
.wk-date.edit:hover{border-color:var(--line-2);background:var(--card)}
.wk-date.edit input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;border:0;padding:0}
.wk-by{font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wk-by-m,.wk-rev-m{display:none}
.wk-act{display:flex;align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}
.wk-more,.wk-more-ph{width:28px;height:28px;flex:0 0 28px}
.wk-more{background:none;border:0;border-radius:4px;color:var(--ink-2);font-size:18px;line-height:1;cursor:pointer}
.wk-more:hover,.wk-more:focus-visible{background:var(--sand-2);color:var(--ink)}
.wk-menu{position:fixed;z-index:60;background:var(--card);border:1px solid var(--line-2);border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.14);padding:4px;min-width:180px;display:flex;flex-direction:column}
.wk-menu button{background:none;border:0;text-align:left;font:inherit;font-size:13px;padding:7px 10px;border-radius:4px;cursor:pointer;color:var(--ink)}
.wk-menu button:hover,.wk-menu button:focus{background:var(--sand-2);outline:none}
.wk-menu button.dgr{color:var(--hot)}
.wk-add{display:grid;grid-template-columns:minmax(0,1fr) 140px auto;gap:8px;margin-top:10px}
.wk-foot{padding:10px 16px 12px;border-top:1px solid var(--line)}
.wk-foot .wk-add{margin-top:0}
.wk-add input[type=text]{min-width:0;width:100%}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:.18s;z-index:70;background:var(--navy);color:#fff;border-radius:6px;padding:10px 14px;display:flex;align-items:center;gap:14px;font-size:13px;max-width:min(560px,calc(100vw - 32px))}
.toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast-t{min-width:0;overflow-wrap:anywhere}
.toast-b{background:none;border:0;color:#7fd8ee;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;padding:2px 4px}
@media (max-width:640px){
  .wk-rows{grid-template-columns:24px 16px minmax(0,1fr) auto auto}
  .wk-by{display:none}
  .wk-by-m{display:inline;font-size:11px;color:var(--ink-3)}
  .wk-by-m:empty{display:none}
  .wk-chk input{width:20px;height:20px}
  .wk-more,.wk-more-ph{width:36px;height:36px;flex-basis:36px}
  .wk-add{grid-template-columns:minmax(0,1fr) auto}
  .wk-add input[type=text]{grid-column:1/-1}
  .wk-rev{display:none}
  .wk-rev-m{display:inline-flex}
  .wk-who-l{display:none}
}

/* ---------- Перенос срока (этап 3б) ---------- */
.due-panel{padding:10px 14px;border-left:3px solid var(--warm)}
.due-head{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;margin-bottom:6px}
.due-head .tii{width:15px;height:15px;color:var(--warm)}
/* Одна сетка на все строки: текст, даты, кнопки стоят ровно друг под другом. */
.due-rows{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:14px}
.due-r{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.due-t{min-width:0;overflow-wrap:anywhere}
.due-link{background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left;overflow-wrap:anywhere}
.due-link:hover{color:var(--navy-2);text-decoration:underline}
.due-sub{font-weight:400;color:var(--ink-2)}
.due-m{font-size:12px;color:var(--ink-2);margin-top:2px;overflow-wrap:anywhere}
.due-d{font-size:12.5px;white-space:nowrap;color:var(--ink-2)}
.due-d b{color:var(--ink)}
.due-a{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.due-a input{min-width:0;width:180px;font:inherit;font-size:12.5px;padding:4px 8px;border:1px solid var(--line-2);border-radius:var(--r)}
.due-win{margin-top:9px}
.due-win .due-a{justify-content:flex-start}
.due-win p{overflow-wrap:anywhere}
.due-pend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:500;background:#f7ecda;color:var(--warm);padding:1px 6px;border-radius:2px;white-space:nowrap}
.due-pend .tii{width:11px;height:11px}
.due-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warm);margin-left:4px}
.due-dlg-ov{position:fixed;inset:0;background:rgba(9,30,66,.45);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px}
.due-dlg{background:var(--card,#fff);border-radius:8px;padding:18px;width:100%;max-width:420px;box-shadow:0 8px 28px rgba(0,0,0,.25);display:flex;flex-direction:column;gap:10px}
.due-dlg-h{font-weight:600;font-size:15px}
.due-dlg-s{font-size:12.5px;color:var(--ink-2);overflow-wrap:anywhere;min-width:0}
.due-dlg-l{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--ink-2)}
.due-dlg-l input,.due-dlg-l textarea{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line-2);border-radius:var(--r);color:var(--ink);resize:vertical}
.due-err{color:var(--hot);font-size:12.5px;min-height:0;overflow-wrap:anywhere}
.due-err:empty{display:none}
.due-dlg-f{display:flex;gap:8px;justify-content:flex-end}
@media (max-width:700px){
  .due-rows{grid-template-columns:minmax(0,1fr)}
  .due-r{row-gap:6px}
  .due-a{justify-content:flex-start}
  .due-a input{flex:1 1 140px}
}

/* ---------- Окно задачи и доска (этап 3в) ---------- */
/* О9: пока окно открыто, страница под ним не прокручивается */
body:has(.ov.on){overflow:hidden}
.modal:focus{outline:none}
/* О7: обложка ниже, название переносится на несколько строк */
.modal.task > .cover-lg{max-height:160px;min-height:90px}
.modal.task > .cover-lg img{max-height:160px}
.modal.task textarea.mt{display:block;resize:none;overflow:hidden;font-family:inherit;color:var(--ink);min-height:34px;overflow-wrap:anywhere;width:calc(100% + 16px);box-sizing:border-box}
.modal.task textarea.mt:focus{border-color:var(--active);background:#fff;outline:none}
.newtag{display:inline-block;font-size:11px;font-weight:600;background:#fff3cd;color:#7a5a00;border-radius:4px;padding:2px 7px}
/* О2: у новой задачи окно уже, без правой колонки */
.modal.newtask{max-width:560px}
.modal.newtask .mgrid{grid-template-columns:minmax(0,1fr)}
/* О6: повтор как переключатель */
.repbtn{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:34px;border:1px solid var(--line-2);border-radius:6px;background:#fff;padding:0 10px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;text-align:left}
.repbtn:hover{border-color:var(--ink-3)}
.repbtn .repl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.repbtn .tii{width:14px;height:14px;color:var(--ink-3);flex:0 0 auto}
.repbtn .tg{width:28px;height:16px;border-radius:8px;background:var(--line-2);position:relative;flex:0 0 auto;transition:background .15s}
.repbtn .tg::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:left .15s}
.repbtn.on .tg{background:var(--active)}
.repbtn.on .tg::after{left:14px}
.reppick{left:0;right:auto;top:calc(100% + 4px);min-width:100%;max-width:300px}
.reppick u{white-space:normal;line-height:1.4}
/* ЗС12: причина просрочки видна всем */
.odr{font-size:12.5px;color:var(--ink);background:#fdf0ef;border-left:3px solid var(--hot);border-radius:4px;padding:7px 10px;margin-bottom:7px;overflow-wrap:anywhere}
.odr span{color:var(--ink-2)}
/* Строка кнопок окна закреплена у нижнего края, в том числе на телефоне */
.modal.task{max-height:calc(100vh - 68px);overflow-y:auto;padding-bottom:0;overscroll-behavior:contain}
.mfoot{position:sticky;bottom:0;z-index:3;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:16px -28px 0;padding:12px 28px;background:#fff;border-top:1px solid var(--line)}
.mfoot-end{margin-left:auto;display:flex;gap:8px}
.mfoot-hint{flex-basis:100%;font-size:12.5px;color:var(--hot);min-height:0}
.mfoot-hint:empty{display:none}
/* О14: выпадающий список вверх, если внизу нет места */
.cipick.up{top:auto!important;bottom:calc(100% + 4px)}
/* О8: корзина у пункта видна при наведении (на сенсорных экранах всегда) */
@media (hover:hover){ .chl-rows .ci .del{opacity:0} .chl-rows .ci:hover .del,.chl-rows .ci .del:focus-visible{opacity:1} }
.chl-done{margin-left:auto;font-size:12px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--navy-2);text-decoration:underline;cursor:pointer}
.linkbtn:hover{color:var(--active)}
/* З12: подпись приоритета на карточке */
.plab{font-size:10.5px;font-weight:600;letter-spacing:.02em}
.plab.p-hot{color:var(--hot)}.plab.p-warm{color:var(--warm)}.plab.p-cool{color:var(--cool)}.plab.p-min{color:var(--ink-3)}
/* З14: пустой поиск */
.noresult{background:#fff;border-radius:8px;padding:12px 16px;margin:0 0 12px;font-size:13.5px;color:var(--ink-2);overflow-wrap:anywhere}
body.boardbg .bar #q{width:280px;max-width:100%}
/* З11: служебные колонки в конце и приглушены */
.col.svc,.col.fold.svc{opacity:.75}
/* О12, О13: телефон */
@media (max-width:600px){
  .ov.on:has(.modal.task){padding:0}
  .modal.task{max-width:none;min-height:100vh;max-height:100vh;min-height:100dvh;max-height:100dvh;border-radius:0;padding:0 16px}
  .modal.task > .cover-lg{margin:0 -16px 12px;border-radius:0}
  .modal.task .row3{grid-template-columns:minmax(0,1fr);gap:8px}
  .mfoot{margin:16px -16px 0;padding:10px 16px}
  .chl-rows{grid-template-columns:auto minmax(0,1fr) auto auto auto}
  .ci input[type=checkbox]{width:22px;height:22px}
  .ciav .av,.ciav-empty{width:28px;height:28px}
  .cidate{min-height:36px;min-width:64px;padding:4px 6px}
  .chl-rows .ci .del{min-width:36px;min-height:36px}
}

.wk-note-line{font-size:12.5px;color:var(--ink-2);padding:6px 0}
.wk-note-line.err{color:var(--hot)}

/* ---------- Описание и комментарии (этап 4) ---------- */
.dtb{display:flex;flex-wrap:wrap;gap:2px;border:1px solid var(--line-2);border-bottom:0;border-radius:6px 6px 0 0;padding:4px;background:var(--sand)}
.dtb-b{min-width:30px;height:28px;border:0;background:none;border-radius:4px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:0 7px}
.dtb-b:hover,.dtb-b:focus-visible{background:#fff}
.dtb-b .tii{width:14px;height:14px}
.dtb-sep{width:1px;background:var(--line-2);margin:4px 3px}
.desc-edit.with-tb{border-top-left-radius:0;border-top-right-radius:0}
.dsaved{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--cool)}
.dsaved .tii{width:12px;height:12px}
.dhint{font-size:11.5px;color:var(--ink-3)}
.desc-view,.desc-edit,.cm-body{overflow-wrap:anywhere;min-width:0}
.desc-view p,.cm-body p{margin:0 0 6px}
.desc-view p:last-child,.cm-body p:last-child{margin-bottom:0}
.desc-view h3,.desc-edit h3,.cm-body h3{font-size:15px;margin:8px 0 4px}
.desc-view h4,.desc-edit h4,.cm-body h4{font-size:13.5px;margin:8px 0 4px}
.desc-view ul,.desc-view ol,.desc-edit ul,.desc-edit ol,.cm-body ul,.cm-body ol{margin:4px 0;padding-left:22px}
.desc-view blockquote,.desc-edit blockquote,.cm-body blockquote{margin:4px 0;padding:2px 10px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.desc-view code,.desc-edit code,.cm-body code{background:var(--sand-2);border-radius:3px;padding:0 4px;font-size:12px}
.desc-view hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.mention{color:var(--navy-2);font-weight:600;background:var(--active-soft);border-radius:3px;padding:0 3px}
.muted-s{font-size:12.5px;color:var(--ink-3)}
.hsw{font-size:11px;font-weight:500;color:var(--ink-3)}
/* Лента комментариев: одна сетка на всю ленту, у строк subgrid (аватар, текст); ответы сдвинуты и с линией слева */
.cm-feed{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px}
.cm-r{display:grid;grid-column:1/-1;grid-template-columns:subgrid;padding:8px 0;border-top:1px solid var(--line)}
.cm-r:first-child{border-top:0}
.cm-r .av{width:28px;height:28px;font-size:10px}
.cm-r.cm-reply{grid-column:2/-1;grid-template-columns:24px minmax(0,1fr);column-gap:8px;border-top:0;padding:4px 0 4px 10px;border-left:2px solid var(--line)}
.cm-r.cm-reply .av,.cm-r.cm-reply .cm-ic{width:24px;height:24px;font-size:9px}
.cm-r.pending{opacity:.6}
.cm-t{min-width:0;font-size:13px;line-height:1.45}
.cm-h{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline}
.cm-h b{font-size:12.5px}
.cm-when{font-size:11.5px;color:var(--ink-3)}
.cm-acts{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-top:3px}
.cm-acts .linkbtn{font-size:11.5px;color:var(--ink-3)}
.cm-acts .linkbtn:hover{color:var(--navy-2)}
.cm-edit{width:100%;min-height:44px}
.cm-ic{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#f7ecda;color:var(--warm)}
.cm-ic .tii{width:14px;height:14px}
.cm-ic.k-ok{background:#e6f4ee;color:var(--cool)}
.cm-ic.k-no,.cm-ic.k-late{background:#fdf0ef;color:var(--hot)}
.cm-sys .cm-t{color:var(--ink-2);font-size:12.5px}
.cm-sys .cm-t b{color:var(--ink)}
.cm-reply-box{grid-column:2/-1;padding:4px 0 8px 10px;border-left:2px solid var(--active)}
.cmtthumb.cmtfile{display:inline-flex;align-items:center;gap:6px;width:auto;max-width:220px;padding:4px 26px 4px 8px;background:var(--sand-2);border-radius:6px}
.cmtfile-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.cmtfile-ic .tii{width:14px;height:14px}
.att-sub{font-size:11.5px;color:var(--ink-3);margin:10px 0 6px}
.desc-view{white-space:normal}
span.cmtimg{display:block}
.desc-view pre,.desc-edit pre,.cm-body pre{background:var(--sand-2);border-radius:4px;padding:8px 10px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere;margin:6px 0}

/* Окно выбора папки Google Drive (folderPick в common.js) */
.modal.fp{max-width:520px}
.fp h3{margin:0 0 10px;font-size:16px;color:var(--navy)}
.fp-cur{font-size:12px;color:var(--ink-2);margin:0 0 10px;overflow-wrap:anywhere}
.fp-tabs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;margin-bottom:10px}
.fp-tabs button{background:none;border:0;border-right:1px solid var(--line-2);padding:7px 10px;font-size:13px;color:var(--ink-2);cursor:pointer;min-width:0;overflow-wrap:anywhere}
.fp-tabs button:last-child{border-right:0}
.fp-tabs button:not(.on):hover{background:var(--sand)}
.fp-tabs button.on{background:var(--navy);color:#fff;font-weight:600}
.fp-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:12px;color:var(--ink-3);padding:6px 0;border-bottom:1px solid var(--line);min-height:34px}
.fp-crumbs button{background:none;border:0;padding:3px 5px;border-radius:var(--r);color:var(--navy-2);cursor:pointer;font-size:12px;overflow-wrap:anywhere;text-align:left}
.fp-crumbs button:hover{background:var(--active-soft);text-decoration:underline}
.fp-crumbs b{font-weight:600;color:var(--ink);padding:3px 5px;overflow-wrap:anywhere}
.fp-sep{color:var(--ink-3)}
.fp-list{display:grid;grid-template-columns:20px minmax(0,1fr) auto 16px;column-gap:10px;align-content:start;max-height:min(46vh,380px);overflow-y:auto;padding:0 6px;border-bottom:1px solid var(--line)}
.fp-row{display:grid;grid-template-columns:subgrid;grid-column:1/-1;align-items:center;padding:9px 0;border-top:1px solid var(--line);cursor:pointer;font-size:13px}
.fp-row:first-child{border-top:0}
.fp-row:hover,.fp-row:focus-visible{background:var(--active-soft);outline:0}
.fp-row span{min-width:0;overflow-wrap:anywhere}
.fp-row small{color:var(--ink-3);font-size:11px;display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.fp-row .tii,.fp-foot .tii{width:16px;height:16px;color:var(--ink-3);vertical-align:-3px}
.fp-row:hover .tii:last-child{color:var(--navy-2)}
.fp-empty{grid-column:1/-1;padding:18px 0;color:var(--ink-3);font-size:13px}
.fp-more{grid-column:1/-1;padding:8px 0;text-align:center}
.fp-new{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;margin-top:10px}
.fp-full{width:100%}
.fp-lbl{display:block;font-size:12px;color:var(--ink-2);margin:0 0 6px}
.fp-hint{font-size:12px;color:var(--ink-3);margin:8px 0 0}
.fp-msg{font-size:12px;color:var(--hot);min-height:16px;margin-top:8px;overflow-wrap:anywhere}
.fp-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}