/* Дополнение к теме: классы карточек, выдвижной панели, канбана, календаря,
   чата задачи и таблиц. Подключается после theme.css и app.css. */

/* ---------- строки списков ---------- */
.trow{display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); cursor:pointer; transition:.14s}
.trow:hover{border-color:rgba(59,130,246,.5); transform:translateY(-1px)}
.trow.done{opacity:.6}
.trow.done .tt{text-decoration:line-through}
.tt{font-weight:600; font-size:14.5px; line-height:1.3; word-break:normal; overflow-wrap:break-word}
.trow .meta{display:flex; flex-wrap:wrap; gap:5px; margin-top:5px}
.stripe{width:5px; align-self:stretch; min-height:26px; border-radius:4px}
.ck{width:22px; height:22px; border-radius:50%; border:2px solid var(--line); background:transparent;
  color:var(--primary); font-size:12px; line-height:1; cursor:pointer; flex:0 0 auto}
.ck.on{background:rgb(34,197,94); border-color:rgb(34,197,94); color:#fff}
.due{font-size:12.5px; color:var(--muted); white-space:nowrap; text-align:right}
.due.today{color:rgb(217,119,6); font-weight:600}
.due.over{color:rgb(220,38,38); font-weight:700}
.big{font-size:30px; margin-bottom:6px}
.h1{font-size:19px; font-weight:700; letter-spacing:-.2px}
.ellipsis2{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.pad{padding:12px}
.note{background:rgba(254,249,195,.5); border-color:rgba(250,204,21,.5)}
.seg{display:inline-flex; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:3px; gap:2px}
.seg button{border:0; background:transparent; padding:6px 12px; border-radius:9px; cursor:pointer;
  font:inherit; font-size:13px; color:var(--muted)}
.seg button.on{background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--shadow)}
.warn{background:rgba(245,158,11,.16); color:rgb(180,83,9); border-color:rgba(245,158,11,.4)}

/* ---------- выдвижная карточка ---------- */
.dhead{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line);
  background:var(--surface); flex:0 0 auto}
.dtitle{flex:1; border:0; background:transparent; font:inherit; font-size:17px; font-weight:700;
  color:var(--text); padding:6px 4px; border-radius:9px}
.dtitle:focus{outline:2px solid rgba(59,130,246,.35)}
.dbody{flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:14px 16px 90px; display:flex; flex-direction:column; gap:14px}
.dsec{border:1px solid var(--line); border-radius:16px; padding:13px; background:var(--surface)}
.dsec-h{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:9px; font-size:14px}
.dsec-actions{display:flex; gap:8px; flex-wrap:wrap; border:0; padding:0}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:5px 11px;
  font:inherit; font-size:12.5px; cursor:pointer; color:var(--text)}
.chip.on{font-weight:600}

/* ---------- зелёная галочка «закрыть задачу» (10.2026) ---------- */
.donebtn{flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:2px solid var(--line);
  background:var(--surface); color:var(--muted); display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; padding:0;
  transition:background .18s, border-color .18s, color .18s, transform .12s}
.donebtn:hover{border-color:rgb(22 163 74 / .55); color:rgb(22 163 74); transform:scale(1.06)}
.donebtn.on{background:rgb(22 163 74); border-color:rgb(22 163 74); color:#fff;
  box-shadow:0 2px 10px rgb(22 163 74 / .35)}
.donebtn.on:hover{background:rgb(21 128 61); border-color:rgb(21 128 61); color:#fff}
.donebtn:active{transform:scale(.94)}
.dtitle.done{text-decoration:line-through; color:var(--muted)}
.drawer.justdone{box-shadow:0 0 0 2px rgb(22 163 74 / .45), 0 10px 34px rgb(22 163 74 / .22)}

/* ---------- чек-лист задачи во вкладке «Чат» (10.2026) ---------- */
.ckl{border:1px solid var(--line); border-radius:14px; padding:10px 11px; margin-bottom:10px; background:var(--bg)}
.ckl-h{display:flex; align-items:center; gap:8px; font-size:13.5px}
.ckl-cnt{font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.ckl-cnt.all{color:rgb(22 163 74); font-weight:700}
.ckl-tgl{padding:0 7px; font-size:13px; line-height:1.5}
.ckl-list{display:flex; flex-direction:column; gap:2px; margin-top:8px}
.ckl-row{display:flex; align-items:center; gap:9px; padding:6px; border-radius:10px}
.ckl-row:hover{background:var(--surface)}
.ckl-chk{position:relative; display:inline-flex; width:20px; height:20px; flex:0 0 auto; cursor:pointer}
.ckl-chk input{position:absolute; opacity:0; width:20px; height:20px; margin:0; cursor:pointer}
.ckl-box{width:20px; height:20px; border:2px solid var(--line); border-radius:6px; background:var(--surface);
  transition:background .15s, border-color .15s}
.ckl-chk input:checked + .ckl-box{background:rgb(22 163 74); border-color:rgb(22 163 74)}
.ckl-chk input:checked + .ckl-box::after{content:""; position:absolute; left:7px; top:2px; width:6px;
  height:11px; border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg)}
.ckl-t{flex:1; font-size:13.5px; line-height:1.35; word-break:break-word}
.ckl-row.done .ckl-t{text-decoration:line-through; color:var(--muted)}
.ckl-del{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:13px;
  padding:2px 6px; border-radius:8px; opacity:0; transition:opacity .15s, color .15s}
.ckl-row:hover .ckl-del{opacity:1}
.ckl-del:hover{color:rgb(220 38 38)}
.ckl-add{display:flex; gap:6px; margin-top:8px}
.ckl-add input{flex:1; border:1px solid var(--line); border-radius:10px; padding:7px 9px;
  font:inherit; font-size:13px; background:var(--surface); color:var(--text)}
.ckl-add input:focus{outline:2px solid rgb(59 130 246 / .35)}

/* ---------- чат задачи ---------- */
.chat{display:flex; flex-direction:column; gap:8px; max-height:44vh; overflow-y:auto; padding:4px}
.aichat{min-height:220px}
.msg{max-width:88%; padding:9px 12px; border-radius:14px; background:var(--bg); border:1px solid var(--line);
  font-size:14px; line-height:1.45; word-break:break-word}
.msg.me{align-self:flex-end; background:rgba(59,130,246,.12); border-color:rgba(59,130,246,.35)}
.msg.bot{align-self:flex-start}
.mtext{white-space:pre-wrap}
.mh{display:flex; align-items:center; gap:8px; margin-bottom:4px}
.mfiles{display:flex; flex-direction:column; gap:4px; margin-top:6px}
.pin{font-size:11px; color:rgb(180,83,9); font-weight:600}
.msg.pinned{border-color:rgb(245,158,11); box-shadow:0 0 0 2px rgba(245,158,11,.15)}
.chat-in{border-top:1px solid var(--line); padding-top:9px; margin-top:9px}
.filelink{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--primary);
  text-decoration:none; word-break:break-all}
.filelink:hover{text-decoration:underline}
.frow{display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line);
  border-radius:12px; margin-bottom:7px; flex-wrap:wrap}
.frow:last-child{margin-bottom:0}

/* ---------- блоки во вкладке «Чат»: чек-лист и чат отдельными рамками (10.2026) ---------- */
.dblk{border:1px solid var(--line); border-radius:14px; padding:10px 11px; margin-bottom:10px; background:var(--bg)}
.dblk:last-child{margin-bottom:0}
.blk-h{display:flex; align-items:center; gap:8px; font-size:13.5px; margin-bottom:2px}
.blk-h b{font-weight:700}
.dblk .chat{padding:6px 2px 0}
.dblk .chat-in{margin-top:10px}
/* «Транскрибация и итоги» у звукового файла (10.2026) */
.fwrap{margin-bottom:7px}
.fwrap .frow{margin-bottom:5px}
.fai{display:flex; align-items:center; gap:9px; flex-wrap:wrap; padding:0 3px 3px}
.fai-state{font-size:12.5px}
.fai-doc{flex:1 1 100%; font-size:13px}
.fai-doc a{color:rgb(37 99 235); text-decoration:none; word-break:break-word}
.fai-doc a:hover{text-decoration:underline}

/* ---------- канбан ---------- */
.kcol{flex:1 1 250px; min-width:240px; background:var(--bg); border:1px solid var(--line); border-radius:16px;
  padding:10px; display:flex; flex-direction:column; gap:8px}
.khead{display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; padding:2px 4px}
.kbody{display:flex; flex-direction:column; gap:8px; min-height:60px}
.dnum{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:1px 8px;
  font-size:11.5px; color:var(--muted)}

/* ---------- календарь ---------- */
.cal-grid{display:grid; gap:8px}
.cal-days{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cal-cell{background:var(--surface); border:1px solid var(--line); border-radius:13px; padding:8px;
  min-height:96px; display:flex; flex-direction:column; gap:5px}
.cal-cell.today{border-color:var(--primary); box-shadow:0 0 0 2px rgba(59,130,246,.12)}
.cal-label{font-weight:700; font-size:15px; min-width:150px; text-align:center}
.cal-card{display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 6px; border-radius:7px;
  background:var(--bg); cursor:pointer}
.cal-card .dot{width:7px; height:7px; border-radius:50%; flex:0 0 auto}

/* ---------- проекты, заметки, люди ---------- */
.plist{display:flex; flex-direction:column; gap:7px}
.proj{display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line);
  border-radius:13px; background:var(--surface); cursor:pointer}
.proj.on{border-color:var(--primary); background:rgba(59,130,246,.06)}
.phead{display:flex; align-items:center; gap:9px; padding:11px 13px; border-radius:14px;
  background:linear-gradient(90deg, rgba(59,130,246,.1), transparent); border:1px solid var(--line)}
.pdot{width:10px; height:10px; border-radius:50%; flex:0 0 auto}

/* ---------- Проекты: иерархичное дерево (10.2026) ----------
   В разделе только структура проектов; задачи открываются кликом по названию. */
.ptree{display:flex; flex-direction:column; gap:8px}
.pnode{position:relative}
.prow{display:flex; align-items:center; gap:9px; padding:11px 12px 11px 16px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); position:relative; transition:border-color .15s, box-shadow .15s}
.prow:hover{border-color:rgba(59,130,246,.55); box-shadow:0 2px 10px rgba(15,23,42,.06)}
.pguide{position:absolute; left:0; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0}
.pchev{width:22px; height:22px; min-width:22px; border:0; background:transparent; color:var(--muted);
  font-size:13px; line-height:1; border-radius:8px; cursor:pointer; padding:0}
.pchev:hover{background:rgba(148,163,184,.18); color:var(--text)}
.pchev.ph{text-align:center; cursor:default; opacity:.45}
.pchev.ph:hover{background:transparent; color:var(--muted)}
.pdot{width:10px; height:10px; min-width:10px; border-radius:50%; flex:0 0 auto}
.pname{background:none; border:0; padding:0; font:inherit; font-size:15px; font-weight:700; color:inherit; text-align:left;
  cursor:pointer; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pname:hover{color:var(--primary); text-decoration:underline; text-underline-offset:3px}
.pmeta{font-size:12px; color:var(--muted); white-space:nowrap; flex:0 0 auto}
.pnum{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted); flex:0 0 auto; min-width:96px; justify-content:flex-end}
.pbar{width:52px; height:6px; border-radius:99px; background:rgba(148,163,184,.32); overflow:hidden; flex:0 0 auto}
.pbar[data-empty]{opacity:.4}
.pbar i{display:block; height:100%; border-radius:99px; transition:width .25s}
.pacts{display:flex; align-items:center; gap:2px; flex:0 0 auto; opacity:.55; transition:opacity .15s}
.prow:hover .pacts, .prow:focus-within .pacts{opacity:1}
.pkids{display:flex; flex-direction:column; gap:8px; margin:8px 0 2px 0; padding-left:22px;
  border-left:2px solid rgba(148,163,184,.35)}
/* глубина: вложенные проекты мельче и с лёгкой подсветкой — иерархия видна с первого взгляда */
.pnode .pnode > .prow{background:rgba(59,130,246,.045)}
.pnode .pnode > .prow:hover{background:rgba(59,130,246,.1)}
.pnode .pnode .pname{font-size:14px; font-weight:600}
.pnode .pnode .pacts{opacity:.75}
.pnode .pnode > .prow:hover .pacts{opacity:1}
.pnode.closed > .pkids{display:none}
.pnode.closed > .prow{background:var(--surface-2)}

@media (max-width:900px){
  .pmeta{display:none}
  .pnum{min-width:0}
}
@media (max-width:640px){
  .prow{flex-wrap:wrap; gap:6px; padding:10px 10px 10px 14px}
  .pbar{width:44px}
  .pacts{opacity:1; margin-left:auto}
  .pacts .btn.xs{padding:3px 7px}
  .pkids{padding-left:12px; margin-left:2px}
  .pname{white-space:normal}
}

/* ---------- таблицы ---------- */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:14px}

/* ---------- мелочи ---------- */
.mt8{margin-top:8px}
.grow{flex:1}
.small{font-size:12.5px}
.muted{color:var(--muted)}

@media (max-width:700px){
  .empty{padding:22px 12px}
  /* на тач-экране нет hover — крестик удаления пункта чек-листа всегда виден */
  .ckl-del{opacity:1}
  .ckl-row{padding:8px 6px}
}
@media (max-width:820px){
  .kcol{width:84vw; min-width:84vw}
  .dbody{padding-bottom:120px}
  .cal-cell{min-height:76px; padding:6px}
  .tt{font-size:14px}
}

/* ---------- нумерация задач ---------- */
.tnum{display:inline-block; font-size:11px; font-weight:700; color:var(--muted);
  background:rgb(100 116 139 / .12); border:1px solid var(--line); border-radius:6px;
  padding:0 5px; letter-spacing:.02em; vertical-align:1px}
.dhead .dnum{font-size:12px; padding:2px 7px; color:var(--text)}
.dhead .saved{font-size:11.5px; color:rgb(22 163 74); opacity:0; transition:opacity .2s; white-space:nowrap}
.dhead .saved.on{opacity:1}

/* ---------- поле «Крайний срок»: свёрнуто, раскрывается по клику (10.2026) ---------- */
.due-field{position:relative; margin-bottom:8px}
.due-btn{display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  text-align:left; font:inherit; font-size:13.5px; color:var(--text); cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 11px}
.due-btn:hover{border-color:rgb(59 130 246 / .45)}
.due-cur{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.due-cur.empty{opacity:.5}
.due-caret{opacity:.55; font-size:12px; flex:0 0 auto}
.due-pop{position:fixed; z-index:80; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; box-shadow:0 14px 36px rgb(15 23 42 / .22); padding:12px 13px;
  display:flex; flex-direction:column; gap:9px; max-height:74vh; overflow:auto}
.due-row{display:flex; align-items:center; gap:8px; font-size:13px}
.due-row .due-lab{flex:0 0 62px; opacity:.7}
.due-pop input[type=date]{border:1px solid var(--line); background:var(--surface); border-radius:7px;
  font:inherit; font-size:13px; padding:5px 7px; color:var(--text)}
.due-pop input.dw-time{width:auto; flex:1 1 0; min-width:0; text-align:center; border:1px solid var(--line);
  background:var(--surface); border-radius:11px; font:inherit; font-size:14px; padding:9px 8px; color:var(--text);
  font-variant-numeric:tabular-nums; cursor:pointer}
.due-pop input.dw-time:hover{border-color:rgb(59 130 246 / .5)}
.due-pop input:focus,.due-pop select:focus{outline:2px solid rgb(59 130 246 / .35)}
.due-pop .dw-dash{opacity:.5}
.due-pop select.dw-rec{border:1px solid var(--line); background:var(--surface); border-radius:7px;
  font:inherit; font-size:13px; padding:5px 7px; color:var(--text); flex:1 1 auto; max-width:190px}
.due-sec-h{font-size:12.5px; font-weight:700; padding-top:5px; border-top:1px solid var(--line); margin-top:2px}
.rem-list .rem-h{font-size:12.5px; opacity:.75; margin-bottom:5px}
.rem-list .rem-row{display:flex; align-items:center; gap:7px; font-size:13px; padding:3px 0; cursor:pointer}
.due-hint{font-size:11.5px; opacity:.55}
.ttime{color:rgb(37 99 235); font-weight:700; font-size:13px}
.dtabs{display:flex; gap:2px; padding:0 8px; border-bottom:1px solid var(--line);
  overflow-x:auto; flex:0 0 auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.dtabs::-webkit-scrollbar{display:none}
.dtab{border:0; background:none; padding:11px 12px; font-size:13.5px; color:var(--muted); cursor:pointer;
  border-bottom:2px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:6px; font-family:inherit}
.dtab:hover{color:var(--text)}
.dtab.on{color:var(--text); border-bottom-color:rgb(59 130 246); font-weight:600}
.dpane{display:block}

/* ---------- поиск в шапке ---------- */
.gsearch{position:relative; flex:0 1 340px; min-width:170px}
.gsearch input{width:100%; padding:8px 12px; font-size:13.5px; font-family:inherit; color:var(--text);
  background:var(--surface); border:1px solid var(--line); border-radius:10px}
.gsearch input:focus{outline:none; border-color:rgb(59 130 246); box-shadow:0 0 0 3px rgb(59 130 246 / .15)}
.sres{position:absolute; top:calc(100% + 6px); right:0; width:min(470px, 86vw); max-height:62vh; overflow:auto;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 44px rgb(0 0 0 / .2); z-index:70; padding:6px}
.sres-row{padding:8px 10px; border-radius:9px; cursor:pointer}
.sres-row:hover{background:rgb(100 116 139 / .12)}
.sres-t{font-size:13.5px; font-weight:600; color:var(--text)}
.sres-s{font-size:12px; color:var(--muted); margin-top:3px; display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden}
.sres-f{display:inline-block; background:rgb(59 130 246 / .14); color:rgb(37 99 235); border-radius:6px;
  padding:0 6px; margin-right:6px; font-size:10.5px; text-transform:uppercase; font-weight:700}
.sres-empty{padding:14px; font-size:13px; color:var(--muted); text-align:center}
.mobile-only{display:none !important}

/* ---------- дерево цепочки задач ---------- */
.chainPath{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 10px}
.chainNode{border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:9px;
  padding:6px 10px; font-size:13px; cursor:pointer; text-align:left; max-width:100%; font-family:inherit}
.chainNode:hover{border-color:rgb(59 130 246); background:rgb(59 130 246 / .07)}
.chainNode.cur{border-color:rgb(59 130 246); background:rgb(59 130 246 / .12); font-weight:600; cursor:default}
.chainNode[disabled]{cursor:default}
.chainArr{color:var(--muted); font-weight:700}
.chainTree{margin-top:4px}
.ctree-row{margin:6px 0}
.ctree-kids{margin-left:20px; padding-left:10px; border-left:2px solid var(--line)}

/* ---------- связь «продолжение»: полоса под шапкой карточки (10.2026) ----------
   Владелец: «Последующая задача = полная копия текущей… у открытых ранее задач
   будет видно, какие после неё задачи создавались и выполнялись». */
.chainbar{display:flex; flex-direction:column; gap:6px; margin:0 0 10px; padding:8px 10px;
  border:1px solid var(--line); border-radius:10px; background:rgb(59 130 246 / .05)}
.chainbar.hidden{display:none}
.cb-prev,.cb-kid{display:flex; align-items:center; gap:6px; min-width:0; text-align:left; cursor:pointer;
  border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:8px;
  padding:5px 8px; font:inherit; font-size:13px}
.cb-prev:hover,.cb-kid:hover{border-color:rgb(59 130 246); background:rgb(59 130 246 / .08)}
.cb-prev b{font-weight:600}
.cb-next{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.cb-lbl{color:var(--muted); font-size:12px; white-space:nowrap}
.cb-kid{width:auto; max-width:100%}
.cb-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:46ch; color:var(--muted)}
.cb-kid .cb-t{max-width:30ch}
.cst{font-size:12px; white-space:nowrap; border-radius:6px; padding:1px 5px}
.cst.ok{color:#0f7a3d; background:rgb(16 185 129 / .14)}
.cst.work{color:#8a5a00; background:rgb(245 158 11 / .16)}
.cst.canc{color:#8a1f1f; background:rgb(239 68 68 / .14)}
.chain-sum{font-size:13px; color:var(--muted); margin:0 0 6px}
.chainPath{flex-direction:column; align-items:stretch}
.chainPath .chainNode{width:100%}
.chainPath .chainArr{align-self:center}
.chainTree .chainNode{display:flex; align-items:center; gap:6px; width:100%; min-width:0}
.chainTree .chainNode .cn-t{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ctree-row{display:flex; align-items:flex-start; gap:4px}
.ctree-item{display:block}
.ctree-item + .ctree-item{margin-top:6px}
.ctree-kids{display:flex; flex-direction:column; margin-left:22px; padding-left:10px;
  border-left:2px solid var(--line)}
.ctree-row .chainNode{flex:1 1 auto}
.ct-elbow{color:var(--muted); font-family:monospace; line-height:1.9}
.ct-pad{display:inline-block; width:16px; flex:0 0 16px}
.cont-hint{margin:-2px 0 6px; grid-column:1 / -1}
@media (max-width:640px){
  .cb-t{max-width:22ch}
  .cb-kid .cb-t{max-width:16ch}
  .ctree-kids{margin-left:10px; padding-left:6px}
}

/* ---------- привычки ---------- */
.hbScroll{overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.hbGrid{min-width:660px}
.hbRow{display:flex; align-items:center; margin:7px 0}
.hbName{display:flex; align-items:center; gap:8px; width:250px; min-width:170px; flex:0 0 auto; padding-right:10px}
.hbName .dot{width:9px; height:9px; border-radius:50%; flex:0 0 auto}
.hbTitle{border:0; background:none; padding:0; font-size:13.5px; color:var(--text); cursor:pointer;
  text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:inherit}
.hbTitle:hover{color:rgb(37 99 235)}
.hbDay{width:22px; flex:0 0 auto; text-align:center; font-size:9.5px; color:var(--muted); padding:2px 0; line-height:1.25}
.hbDay b{display:block; font-size:12px; color:var(--text); font-weight:600}
.hbDay.today b{color:rgb(37 99 235)}
.hbCell{width:26px; height:26px; flex:0 0 auto; border-radius:50%; border:2px solid var(--line);
  background:none; cursor:pointer; padding:0; margin:0 -2px; transition:background .12s}
.hbCell:hover{border-color:rgb(59 130 246); transform:scale(1.12)}
.hbCell.on{background:var(--hc,rgb(59 130 246)); border-color:var(--hc,rgb(59 130 246))}
/* три состояния: пропуск — толстый контур без заливки, не портит серию */
.hbCell.skip{border:3.4px solid var(--hc,rgb(59 130 246)); background:transparent; opacity:.9}
.hbLegend .hbCell{display:inline-block; vertical-align:middle; margin:0 3px; pointer-events:none}
.hbCell.today{box-shadow:0 0 0 2px rgb(59 130 246 / .3)}
/* Широкий экран: сетка привычек тянется на ширину карточки, кружки
   считаются от одного шага --hstep, поэтому выравнивание колонок сохраняется. */
@media (min-width:1400px){
  .hbGrid{width:100%; --hstep:calc((100% - 250px) / 31)}
  .hbDay,.hbCell{width:var(--hstep); max-width:56px; height:auto; aspect-ratio:1; margin:0}
  /* кружки крупнее — обводку тоже тянем, иначе «контур» выглядит ниткой */
  .hbCell{border-width:2.8px}
  .hbCell.skip{border-width:4.6px}
}

@media (max-width:760px){
  .mobile-only{display:inline-flex !important; align-items:center; justify-content:center}
  .gsearch{display:none; position:absolute; left:8px; right:8px; top:100%; flex:none; width:auto; min-width:0;
    background:var(--surface); padding:8px; border:1px solid var(--line); border-radius:0 0 12px 12px;
    box-shadow:0 14px 34px rgb(0 0 0 / .18); z-index:65}
  .gsearch.open{display:block}
  .sres{left:0; right:0; width:auto}
  .top{flex-wrap:wrap}
  .hbName{width:160px; min-width:130px}
  .dhead .dnum{font-size:11px}
}

/* ---------- «Сегодня»: правая колонка «На контроле» (веб + планшет, не телефон) ----------
   Порог 1000px: iPad 1024 видит колонку, телефон (даже в альбомной 932) — нет. */
.today-grid{display:block}
.ctl-col{display:none}
.only-narrow{display:block}
/* Ограничение ширины снято ГЛОБАЛЬНО (см. app.css: .content{max-width:none}):
   все разделы — «Сегодня», «Календарь», «Задачи», «Заметки», доски, привычки —
   занимают всю ширину окна, справа нет пустой полосы. */
.card.ctl-card{display:flex; flex-direction:column; min-width:0}
/* 10.2026 (владелец: «иногда надо, чтобы крутился следующий элемент — например „На контроле“»):
   на краях список передаёт прокрутку странице, а не запирает жест. */
.ctl-list{display:flex; flex-direction:column; gap:2px; overflow:auto; overscroll-behavior-y:auto;
  -webkit-overflow-scrolling:touch; padding-right:2px}
.crow{display:flex; align-items:flex-start; gap:8px; padding:7px 6px; border-radius:10px; cursor:pointer}
.crow:hover{background:var(--bg)}
.crow + .crow{border-top:1px solid var(--line)}
.crow .ct{font-size:13.5px; line-height:1.3; overflow-wrap:anywhere}
.crow .cm{font-size:11.5px; color:var(--muted); margin-top:2px; display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.crow .cm .over{color:rgb(220,38,38); font-weight:600}

@media (min-width:1000px){
  .today-grid{display:grid; grid-template-columns:minmax(0,1fr) clamp(268px, 25%, 340px); gap:16px; align-items:start}
  .today-main{display:flex; flex-direction:column; gap:14px; min-width:0}
  .today-main > .card + .card{margin-top:0}
  .ctl-col{display:block; position:sticky; top:72px}
  .only-narrow{display:none}
  .ctl-list{max-height:calc(100vh - 250px)}
}
@media (min-width:1000px) and (max-width:1200px){
  .today-grid{grid-template-columns:minmax(0,1fr) 268px; gap:12px}
}
/* большой экран: колонка «На контроле» пошире, пустого места справа нет */
@media (min-width:1281px){
  .today-grid{grid-template-columns:minmax(0,1fr) clamp(330px,26vw,440px)}
}

/* ---------- планшет (1000–1280): колонка «На контроле» ---------- */
@media (min-width:1000px) and (max-width:1280px){
  .today-grid{grid-template-columns:minmax(0,1fr) clamp(280px,26vw,320px)}
}
/* ---------- телефон: длинную метку срока уводим под название, слова не рвём ---------- */
@media (max-width:520px){
  .trow{flex-wrap:wrap}
  .trow > .grow{flex:1 1 calc(100% - 36px); min-width:0}
  .trow > .due{margin-left:36px}
  .tt{word-break:normal; overflow-wrap:break-word; hyphens:auto}
}

/* ---------- аудиозапись совещания внутри задачи ---------- */
.rec{border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:10px; background:var(--surface)}
.rec-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rec-name{font-weight:600}
.rec-dot{width:9px; height:9px; border-radius:50%; background:var(--muted); flex:0 0 auto}
.rec-dot.run{background:var(--warn); box-shadow:0 0 0 4px color-mix(in srgb, var(--warn) 22%, transparent)}
.rec-dot.ok{background:var(--success)}
.rec-dot.err{background:var(--danger)}
.rec audio{width:100%; margin-top:8px; height:38px}
.rec-acts{flex-wrap:wrap}
.rec-bar{height:5px; border-radius:3px; background:var(--line); overflow:hidden; margin-top:8px}
.rec-bar > i{display:block; height:100%; background:var(--primary); transition:width .4s}
.rec-res{margin-top:10px; border-top:1px dashed var(--line); padding-top:10px}
.rec-block + .rec-block{margin-top:12px}
.rec-sum{white-space:normal; line-height:1.5; margin-top:6px}
.rec-todos{margin-top:8px}
.rec-todo{line-height:1.5}
.rec-tr{margin-top:6px; max-height:42vh; overflow:auto; line-height:1.5; white-space:normal;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px}
.rec-live{border:1px dashed var(--line); border-radius:var(--radius-sm); padding:10px; margin:8px 0 4px}
.rec-timer{font-variant-numeric:tabular-nums; font-weight:600; min-width:56px}
.rec-lvl{display:inline-block; width:90px; height:8px; border-radius:4px; background:var(--line); overflow:hidden; opacity:.25}
.rec-lvl > i{display:block; height:100%; width:4%; background:var(--danger); transition:width .12s}
#dRecStart{background:var(--danger); border-color:var(--danger); color:#fff}
@media (max-width:520px){
  .rec audio{height:44px}
  .rec-tr{max-height:none}
  /* на телефоне кнопки блока переносим, иначе «Скачать .txt» уезжает за экран */
  .rec .dsec-h{flex-wrap:wrap; row-gap:6px}
  .rec .dsec-h .btn{margin-left:0}
  .rec-h .rec-name{flex:1 1 100%}
  .rec-acts .btn{flex:1 1 auto}
  .rec-lvl{width:64px}
}

/* ---------- повторяющиеся задачи: полоса серии и шаблоны (10.2026) ---------- */
.series-bar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 6px;
  padding:9px 11px; border-radius:12px; background:rgb(59 130 246 / .10); border:1px solid rgb(59 130 246 / .30); font-size:13px}
.series-bar.whole{background:rgb(34 197 94 / .12); border-color:rgb(34 197 94 / .35)}
.series-bar .sbar-t{flex:1 1 100%; color:var(--fg, inherit)}
.series-bar .sbar-scope{font-size:12px; color:var(--muted)}
.seg{border:1px solid var(--line); background:transparent; color:var(--muted); padding:4px 10px;
  border-radius:9px; font-size:12px; cursor:pointer}
.seg.on{background:rgb(59 130 246 / .30); border-color:rgb(59 130 246 / .6); color:var(--fg, inherit); font-weight:600}
.series-bar.whole .seg.on{background:rgb(34 197 94 / .32); border-color:rgb(34 197 94 / .65)}
.srow{align-items:flex-start}
.srow .tt{font-weight:600}
.srow .small{margin-top:3px}
.series-lbl{opacity:.9}
@media (max-width:700px){
  .series-bar{gap:6px}
  .series-bar .seg, .series-bar .btn{flex:0 0 auto}
}

/* ---------- выбор времени на циферблате (10.2026) ---------- */
.tp{position:fixed; z-index:95; width:270px; background:var(--surface); border:1px solid var(--line);
  border-radius:18px; box-shadow:0 22px 60px rgb(15 23 42 / .26); padding:12px;
  display:flex; flex-direction:column; gap:9px}
.tp-head{display:flex; align-items:center; gap:8px}
.tp-val{font-size:24px; font-weight:800; letter-spacing:.4px; font-variant-numeric:tabular-nums}
.tp-head .seg{margin-left:auto}
.tp-steps{display:flex; gap:6px; justify-content:center}
.tp-body{min-height:210px; display:flex; flex-direction:column; justify-content:center}
.tp-face{width:100%; height:auto; display:block}
.tp-ring{fill:var(--surface-2); stroke:var(--line)}
.tp-hub{fill:var(--text); opacity:.3}
.tp-hit{fill:transparent; cursor:pointer}
.tp-t{text-anchor:middle; font-size:11px; fill:var(--muted); pointer-events:none; font-variant-numeric:tabular-nums}
.tp-item:hover .tp-hit{fill:rgb(59 130 246 / .14)}
.tp-item:hover .tp-t{fill:var(--text)}
.tp-item.on .tp-hit{fill:var(--primary)}
.tp-item.on .tp-t{fill:rgb(255 255 255); font-weight:700}
.tp-hand{stroke:var(--primary); stroke-width:2.4; stroke-linecap:round; opacity:.7}
.tp-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.tp-cell{border:1px solid var(--line); background:var(--surface-2); border-radius:11px; padding:9px 0;
  font:inherit; font-size:13px; color:var(--text); cursor:pointer; font-variant-numeric:tabular-nums}
.tp-cell:hover{border-color:rgb(59 130 246 / .5)}
.tp-cell.on{background:var(--primary); border-color:var(--primary); color:rgb(255 255 255); font-weight:700}
.tp-exact{display:flex; align-items:center; gap:8px; margin-top:10px}
.tp-exact > span{font-size:12.5px; color:var(--muted)}
.tp-exact input{width:72px; text-align:center; font-variant-numeric:tabular-nums}
.tp-foot{display:flex; align-items:center; gap:6px; border-top:1px solid var(--line); padding-top:9px}
input.dw-time.tp-open{border-color:var(--primary); box-shadow:0 0 0 3px rgb(59 130 246 / .16)}
@media (max-width:420px){
  .tp{width:calc(100vw - 20px)}
}

/* ---------- Шапка карточки задачи на телефоне (10.2026) ----------
   Владелец: «номер — под статус задачи, заголовок — влево, справа — закрытие карточки».
   Раскладка в две строки:
     [✓ статус] [заголовок задачи ...............] [✕ закрыть]
     [№284     ] [заметка                      ] [✓ сохр. ]
   Раньше номер стоял в строке заголовка и вытеснял его вправо, а крестик уезжал за кадр. */
@media (max-width:999px){
  .dhead{display:grid; grid-template-columns:34px minmax(0,1fr) 34px; grid-template-rows:auto auto;
    column-gap:10px; row-gap:3px; align-items:center}
  .dhead .donebtn{grid-area:1/1/2/2}
  .dhead .dtitle{grid-area:1/2/2/3; min-width:0; width:100%; font-size:16px}
  .dhead #dClose{grid-area:1/3/2/4; flex:none; width:34px; height:34px; min-width:0;
    padding:0; display:inline-flex; align-items:center; justify-content:center;
    font-size:15px; line-height:1; border-radius:50%}
  .dhead .dnum{grid-area:2/1/3/3; justify-self:start; margin:0; font-size:11px; padding:1px 7px}
  .dhead .saved{grid-area:2/3/3/4; justify-self:end; font-size:11px}
  .dhead .badge{grid-area:2/2/3/3; justify-self:end}
}

/* ---------- Привычки на телефоне (10.2026) ----------
   Владелец: «в мобильном всё слиплось, адаптируй под вертикальный экран, оптимизируй
   свободное место и отображай последние 5 дней, но дай возможность прокрутки назад».
   В кадре 5 дней (сегодня — у правого края), названия привычек прилипают к левому краю,
   остальные дни листаются сдвигом в сторону — без полей и «слипания» кружков. */
@media (max-width:999px){
  .hbH{flex:1 1 100%; font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .hbScroll{overflow-x:auto; scroll-behavior:smooth; padding-bottom:6px}
  .hbGrid{min-width:0; width:max-content}
  .hbRow{display:flex; align-items:center; gap:7px; margin:10px 0}
  .hbName{position:sticky; left:0; z-index:2; background:var(--surface);
    width:96px; min-width:96px; padding-right:8px; gap:6px}
  .hbName .dot{width:8px; height:8px}
  .hbTitle{font-size:13px; max-width:82px}
  .hbDay{width:var(--hstep,44px); font-size:10px; padding:1px 0}
  .hbDay b{font-size:13px}
  .hbCell{width:var(--hstep,44px); height:auto; aspect-ratio:1; margin:0; border-width:2.6px}
  .hbCell.skip{border-width:4.2px}
  .hbLegend{font-size:11.5px; line-height:1.55}
  .hbLegend .hbCell{width:16px; height:16px; border-width:2px; margin:0 3px}
  .hbLegend .hbCell.skip{border-width:3.2px}
}

/* ---------- строка фильтров в «Задачах» и «Заметках» (10.2026) ----------
   Владелец: «сделай красивее отображение фильтров в разделе Задачи: в веб-версии 4 элемента
   в одну строку, закруглённые углы; в мобильной — в две строки, тоже с закруглениями». */
.fcard{padding:10px 12px}
.fbar{display:grid; gap:8px; align-items:center;
  grid-template-columns:minmax(180px,1fr) minmax(150px,200px) minmax(120px,180px) minmax(120px,180px)}
.fbar > input,.fbar > select{width:100%; min-width:0; height:40px; padding:0 12px; font-size:13.5px;
  font-family:inherit; color:var(--text); background-color:var(--surface-2); border:1px solid var(--line);
  border-radius:12px; transition:.15s}
.fbar > select{padding-right:32px; background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%}
.fbar > input::placeholder{color:var(--muted)}
.fbar > input:hover,.fbar > select:hover{border-color:rgb(59 130 246 / .45)}
.fbar > input:focus,.fbar > select:focus{outline:none; background-color:var(--surface);
  border-color:var(--primary); box-shadow:0 0 0 3px rgb(59 130 246 / .16)}

@media (max-width:999px){
  .fcard{padding:9px 10px}
  .fbar{grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px}
  .fbar > input{grid-column:1/-1}
  .fbar > input,.fbar > select{height:38px; padding:0 10px; font-size:12.5px; border-radius:11px}
  .fbar > select{padding-right:22px; background-position:calc(100% - 15px) 50%, calc(100% - 10px) 50%}
}
/* Длинная подпись на кнопке (карточка дня рождения, телефон): разрешаем перенос строки,
   иначе .btn с white-space:nowrap вылезает за край плашки. */
.btn.wrap{white-space:normal}

/* Карточка дня рождения (04.10.2026): текст поздравления и история отметок по годам.
   Владелец просил две кнопки — зелёную «Поздравил» и красную «Не поздравил» — и чтобы
   через год-два было видно, поздравил он человека или нет. */
.bday-greet{background:var(--surface-2); border-left:3px solid rgb(244,114,182); border-radius:8px;
  padding:8px 10px; margin:4px 0 10px; font-size:13.5px; line-height:1.45; color:var(--text)}
.bdhist-wrap{margin:4px 0 10px}
.bdhist{display:flex; align-items:center; gap:8px; font-size:13.5px; padding:4px 0;
  border-bottom:1px solid var(--line)}
.bdhist:last-child{border-bottom:0}
.bdhist.yes{color:var(--success)}
.bdhist.no{color:var(--danger)}
.bdhist .grow{flex:1 1 auto}

/* 10.2026: «Дни рождения» и «Просрочено» на «Сегодня» — компактнее примерно на 30%.
   Владелец: пустые блоки занимали слишком много места над списком дел.
   Высоту даёт не список, а внутренние отступы карточки и заглушки — их и подрезаем. */
.card.short{padding:12px}
.card.short h3{margin-bottom:4px}
/* ФОКУС-10 (владелец): «около "на сегодня" добавь рядом " | на завтра"» — переключатель дня
   в заголовке блока. Класс, а не голый селектор: порядок файлов не важен. */
.sec-sep{color:var(--muted);font-weight:400;margin:0 1px}
h3 .sec-link{font-size:12.5px;font-weight:600;color:rgb(37 99 235);text-decoration:none;white-space:nowrap}
h3 .sec-link:hover{text-decoration:underline}
.card.short .empty{padding:9px 12px}
/* на узком экране заглушка изначально была плотнее — подрезаем сильнее, чтобы
   экономия вышла той же (около 30%), что на широком */
@media (max-width:700px){
  .card.short{padding:11px}
  .card.short .empty{padding:7px 12px}
}



/* 10.2026: бэклог «Проша» в админке — отдельная сущность, доступна только админам.
   Поля ввода и списки держим в том же виде, что и остальные карточки, чтобы админка
   не выглядела чужой; на узком экране кнопки уезжают под текст. */
#blCard .bl-et{display:block; width:100%; margin-bottom:6px}
#blCard .bl-ed{display:block; width:100%; min-height:54px; margin:0; resize:vertical;
  font:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface-2); color:var(--text)}
#blCard .bl-desc{white-space:pre-line; margin-top:2px}
#blCard .bl-filters{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0 8px}
#blCard .bl-filters .btn{white-space:nowrap}
#blCard .frow{flex-wrap:nowrap}
@media (max-width:700px){
  #blCard .frow{flex-wrap:wrap}
  #blCard .frow .nowrap{width:100%; margin-top:6px}
}

/* 10.2026: фильтры раздела «Дни рождения и Праздники» — «все / дни рождения / праздники».
   Заодно праздник в списке: фиолетовая полоса (rgb(168,85,247)) и никакого кружка
   «поздравил» — за праздником человека нет. */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px}
.chip{border:1px solid var(--line); background:var(--surface); color:var(--text);
  border-radius:20px; padding:5px 12px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap}
.chip:hover{border-color:var(--accent)}
.chip.on{border-color:var(--accent); background:var(--accent-100); font-weight:600}
.trow.bday.holiday .ck{display:none}
/* ФОКУС-12 (05.10.2026, владелец): «в праздниках мне не хватает кнопки "Ознакомлен"» —
   вместо кружка «поздравил» у праздника одна кнопка-надпись; нажатие убирает его из списка
   (запись уезжает на следующую годовщину, как у дней рождения). Размер xs — строка не растёт. */
.trow .hdok{flex:0 0 auto; align-self:center}
/* На телефоне строки переносятся, и кнопка шириной со слово съедала бы название праздника:
   там название идёт первой строкой во всю ширину, кнопка со сроком — второй. */
@media (max-width:520px){
  .trow.bday.holiday{row-gap:8px}
  .trow.bday.holiday > .grow{order:1; flex:1 1 100%}
  .trow.bday.holiday > .hdok{order:2; flex:0 0 auto}
  .trow.bday.holiday > .due{order:3; margin-left:auto}
  .trow.bday.holiday > .stripe{order:4}
}
/* праздник в списке раздела помечаем фиолетовой точкой перед именем: списки длинные
   (дни рождения + праздники), так их видно не вчитываясь. */
.trow.bday.holiday .tt::before{content:""; display:inline-block; width:8px; height:8px;
  border-radius:50%; background:rgb(168,85,247); margin-right:6px; vertical-align:middle}

/* ---------- Отмена задачи (10.2026) ----------
   Владелец: кнопка «Отменить» в описании — между «Конвертировать» и «Удалить».
   Задача уходит из списков и календаря, статус становится «Отменена»,
   в списке помечается красным крестиком; живёт в фильтре «✕ Отменённые». */
.btn.warn{background:rgba(245,158,11,.18); color:rgb(146,64,14); border:1px solid rgba(245,158,11,.55)}
.btn.warn:hover{background:rgba(245,158,11,.3); border-color:rgba(245,158,11,.8)}
.ck.canc{color:var(--danger); border-color:rgba(239,68,68,.55); font-weight:800; font-size:13px}
.ck.canc:hover{background:var(--danger-100); border-color:var(--danger)}
.trow.canc .tt{color:var(--muted)}
.trow.canc .ttime{color:var(--muted)}
.badge.canc{background:var(--danger-100); color:var(--danger)}
.dhead .badge.canc{text-transform:none}
.drawer.canc{box-shadow:0 0 0 2px rgb(239 68 68 / .45), 0 10px 34px rgb(239 68 68 / .22)}
.canc-bar{display:flex; align-items:center; gap:8px; padding:9px 16px; font-size:13px; font-weight:600;
  background:rgba(239,68,68,.10); color:var(--danger); border-bottom:1px solid rgba(239,68,68,.25)}
.canc-bar .cmark{font-weight:800; font-size:15px}
@media (max-width:999px){ .canc-bar{font-size:12.5px; padding:8px 12px} }

/* ---------- тач-жесты (10.2026, владелец) ----------
   Владелец: «когда я хочу прокрутить вниз, то задеваю задачи и случайно их двигаю… Открывается
   задача, если задерживается на 1 секунду, а если меньше, то нет».
   Итог трёх правок (05.10.2026): строка остаётся прокручиваемой (pan-y), а признак открытия —
   касание и отпускание БЕЗ движения пальца (палец поехал — прокрутка). Подсветка .hold-arm
   появляется через 0,2 с удержания, .hold-move («в руке») — через 1 с.
   Мышь работает как раньше: обычный клик открывает сразу. */
.trow, .cal-card{
  touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
/* Карточки Канбана лежат в ГОРИЗОНТАЛЬНОЙ ленте: pan-y запретил бы сдвиг доски вбок пальцем,
   поэтому им — только запрет выделения текста, без touch-action. */
.kcard, .td-card, .ctl-card, .bcard{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none}
.trow.hold-arm, .cal-card.hold-arm, .kcard.hold-arm, .td-card.hold-arm, .ctl-card.hold-arm, .bcard.hold-arm{
  box-shadow:0 0 0 2px rgba(59,130,246,.55)}
.trow.hold-move, .cal-card.hold-move, .kcard.hold-move, .td-card.hold-move, .ctl-card.hold-move, .bcard.hold-move{
  box-shadow:0 0 0 2px rgba(245,158,11,.75)}

/* --- кликабельные ссылки в названии, описании и чате (10.2026, владелец) --- */
.lnk{color:#2563eb; text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  word-break:break-all; -webkit-user-select:text; user-select:text; -webkit-touch-callout:default}
.lnk:active{opacity:.65}
.mtext .lnk{color:#1d4ed8}
.lnkstrip{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:6px 0 0;
  font-size:12px; line-height:1.5}
.lnkstrip .lnk-lab{color:#6b7280}
.lnkstrip .lnk{background:rgba(37,99,235,.08); border:1px solid rgba(37,99,235,.22);
  border-radius:8px; padding:1px 7px; text-decoration:none}
.lnkhost:empty{display:none}
.tc-ev-n .lnk{color:#1d4ed8}
.cc-title .lnk{color:#1d4ed8}

/* Тариф, место, опции и замки разделов (владелец, 06.10.2026) */
.plan-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 10px; font-size: 14px; }
.plan-line > span { color: var(--muted); }
.plan-bar { height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; margin-top: 6px; }
.plan-bar > i { display: block; height: 100%; background: var(--primary-600); border-radius: 4px; }
.plan-sub { margin: 18px 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.plan-tar { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin-top: 8px; }
.plan-tar.on { border-color: var(--primary-600); background: rgba(37, 99, 235, .06); }
.sect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 14px; margin-top: 6px; }
.nav a.locked, .mobile-tabs a.locked { opacity: .6; }
.nav a.locked .lock, .mobile-tabs a.locked .lock { margin-left: auto; font-size: 11px; line-height: 1; }