/* Командный пункт — «стеклянный» дашборд. */
:root{
  --accent:#2a78d6; --accent-deep:#1c5cab;
  --good:#0ca30c; --good-text:#006300;
  --critical:#d03b3b; --warning:#fab219;
  --ink:#0b0b0b; --ink-2:#52514e; --ink-3:#898781;
  --glass:rgba(255,255,255,.72);
  --glass-strong:rgba(255,255,255,.85);
  --glass-border:rgba(255,255,255,.75);
  --surface:#eef2f8;
  --r:22px;
}
html.dark{
  --ink:#f2f3f5; --ink-2:#b9bcc4; --ink-3:#8a8e98;
  --glass:rgba(28,31,40,.82);
  --glass-strong:rgba(32,36,46,.9);
  --glass-border:rgba(255,255,255,.09);
  --surface:#0d1016;
  --good-text:#4ade80; --accent-deep:#7cb2f0;
}

/* height:auto обязателен: с h-full (height:100%) + overflow-x:hidden body
   становится собственным скролл-контейнером и контент обрезается. */
body.cmd{background:var(--surface);color:var(--ink);height:auto;min-height:100vh;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
html:has(body.cmd){height:auto}

/* мягкий цветной фон под стеклом */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg::before,.bg::after,.bg .blob{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.bg::before{width:640px;height:640px;left:-160px;top:-180px;background:#bcd7ff}
.bg::after{width:560px;height:560px;right:-140px;top:120px;background:#ffd9e6}
.bg .blob{width:520px;height:520px;left:34%;bottom:-220px;background:#d3f5df}
html.dark .bg::before{background:#1e3a6b;opacity:.5}
html.dark .bg::after{background:#5a2440;opacity:.45}
html.dark .bg .blob{background:#12452f;opacity:.45}

.wrap{max-width:1240px;margin:0 auto;padding:20px 20px 80px}
/* ВАЖНО: backdrop-filter здесь НЕ используем. Десятки карточек с блюром
   роняют композитинг — при скролле контент «выцветает» в белые пятна.
   Матовость даёт полупрозрачный фон поверх пастельных блобов. */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-border);
  box-shadow:0 1px 1px rgba(11,11,11,.03),0 12px 34px -14px rgba(38,64,110,.18);
  border-radius:var(--r);
}
/* Блюр — только для липкой шапки: она одна и едет поверх контента. */
.glass-blur{
  backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4);
}

/* шапка */
.cmd-header{display:flex;align-items:center;gap:14px;padding:12px 18px;margin-bottom:20px;
  position:sticky;top:12px;z-index:50;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;font-weight:700;font-size:17px;letter-spacing:-.2px}
.logo-badge{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;color:#fff;font-size:16px;
  background:linear-gradient(135deg,#3987e5,#1c5cab);box-shadow:0 6px 16px -6px rgba(42,120,214,.6);flex:none}
.logo small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3);letter-spacing:0}
.cmd-header .spacer{flex:1}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;font-size:12.5px;
  font-weight:600;background:var(--glass-strong);border:1px solid var(--glass-border);color:var(--ink-2);
  text-decoration:none;cursor:pointer;white-space:nowrap}
.chip:hover{filter:brightness(1.04)}
.chip .dot{width:7px;height:7px;border-radius:50%;background:var(--good)}
.chip .dot.off{background:var(--warning)}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  font-weight:700;color:#fff;flex:none;letter-spacing:.3px}
.av-owner{background:linear-gradient(135deg,#4a3aa7,#2a78d6)}
.av-0{background:linear-gradient(135deg,#2a78d6,#1baf7a)}
.av-1{background:linear-gradient(135deg,#eb6834,#eda100)}
.av-2{background:linear-gradient(135deg,#e87ba4,#4a3aa7)}
.av-3{background:linear-gradient(135deg,#0ea5a5,#2a78d6)}
.av-obj{border-radius:11px;background:rgba(42,120,214,.14);color:var(--accent-deep);font-size:15px}

/* плитки */
.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:16px}
.tile{padding:18px 20px 16px;transition:transform .18s ease;text-decoration:none;color:inherit;display:block}
.tile:hover{transform:translateY(-2px)}
.tile .label{font-size:12px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:7px;margin-bottom:8px}
.tile .num{font-size:34px;font-weight:750;letter-spacing:-1.2px;line-height:1}
.tile .sub{margin-top:7px;font-size:11.5px;color:var(--ink-3);min-height:14px}
.t-ico{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:12px}
.tile.overdue .num{color:var(--critical)}
.tile.done .num{color:var(--good-text)}
.tile.streak .num{background:linear-gradient(90deg,#eb6834,#eda100);-webkit-background-clip:text;
  background-clip:text;color:transparent}

/* быстрый ввод */
.quick{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 20px;margin-bottom:10px;flex-wrap:wrap}
.quick .plus{color:var(--accent);font-size:20px;font-weight:600;flex:none}
.quick input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:15px;color:var(--ink);min-width:180px}
.quick input::placeholder{color:var(--ink-3)}
.qbtn{flex:none;border:none;cursor:pointer;font:inherit;font-weight:650;font-size:13.5px;
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:14px;transition:filter .15s}
.qbtn:hover{filter:brightness(1.06)}
.qbtn.send{background:linear-gradient(135deg,#3987e5,#1c5cab);color:#fff;box-shadow:0 8px 18px -8px rgba(42,120,214,.7)}
.hint{font-size:12px;color:var(--ink-3);text-align:center;margin:0 0 24px}
.hint b{color:var(--ink-2)}

/* секции */
.sec-h{display:flex;align-items:baseline;gap:10px;margin:0 4px 12px;flex-wrap:wrap}
.sec-h h2{font-size:15px;font-weight:700;letter-spacing:-.2px}
.sec-h span{font-size:12px;color:var(--ink-3)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-bottom:30px}
.objs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:30px}

/* карточки */
.card{padding:16px 16px 12px;transition:box-shadow .15s,outline-color .15s;
  outline:2px dashed transparent;outline-offset:-2px}
.card.droptarget{outline-color:var(--accent);background:var(--glass-strong)}
.card-h{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.card-h .name{font-weight:700;font-size:14.5px;letter-spacing:-.2px;cursor:pointer}
.card-h .meta{font-size:11.5px;color:var(--ink-3);margin-top:1px;display:flex;align-items:center;gap:5px}
.tg-dot{width:6px;height:6px;border-radius:50%;background:var(--good);display:inline-block;flex:none}
.tg-dot.off{background:var(--warning)}
.card-h .count{margin-left:auto;font-size:12px;font-weight:700;color:var(--ink-2);
  background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:999px;padding:3px 10px;flex:none}
.card-add{display:flex;align-items:center;justify-content:center;min-height:120px;border-style:dashed;
  cursor:pointer;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.6}

/* задачи */
.tasklist{min-height:8px}
.task{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;margin-bottom:8px;border-radius:14px;
  background:var(--glass-strong);border:1px solid var(--glass-border);
  box-shadow:0 1px 2px rgba(11,11,11,.04);cursor:grab;transition:transform .15s,box-shadow .15s,opacity .15s}
.task:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(38,64,110,.3)}
.task:active{cursor:grabbing}
.task.sortable-ghost{opacity:.35}
.pri{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none}
.pri.hi{background:var(--critical)} .pri.md{background:var(--warning)} .pri.lo{background:#c3c2b7}
.task .body{min-width:0;flex:1}
.task .t{font-size:13px;font-weight:550;line-height:1.35;overflow-wrap:anywhere}
.task .t.done{text-decoration:line-through;color:var(--ink-3)}
.task .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tag{font-size:10.5px;font-weight:650;padding:2.5px 8px;border-radius:999px}
.tag.obj{background:rgba(42,120,214,.12);color:var(--accent-deep)}
.tag.due{background:rgba(11,11,11,.05);color:var(--ink-2)}
html.dark .tag.due{background:rgba(255,255,255,.08)}
.tag.due.late{background:rgba(208,59,59,.12);color:var(--critical)}
.tag.who{background:rgba(74,58,167,.12);color:#5b49c9}
html.dark .tag.who{color:#a99cf5}
.tag.from{background:rgba(11,11,11,.06);color:var(--ink-3)}
html.dark .tag.from{background:rgba(255,255,255,.07)}
.tag.problem{background:rgba(208,59,59,.14);color:var(--critical)}
.tag.wait{background:rgba(250,178,25,.16);color:#9a6b00}
html.dark .tag.from{background:rgba(11,11,11,.06);color:var(--ink-3)}
html.dark .tag.from{background:rgba(255,255,255,.07)}
.tag.problem{background:rgba(208,59,59,.14);color:var(--critical)}
.tag.wait{color:var(--warning)}
.chk{margin-top:3px;width:16px;height:16px;flex:none;accent-color:var(--accent);cursor:pointer}
.empty{font-size:12px;color:var(--ink-3);text-align:center;padding:14px 8px;
  border:1.5px dashed var(--glass-border);border-radius:14px}

/* объекты */
.bar{height:6px;border-radius:99px;background:rgba(11,11,11,.06);overflow:hidden;margin:10px 0 6px}
html.dark .bar{background:rgba(255,255,255,.08)}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#86b6ef,#2a78d6)}
.obj-foot{font-size:11.5px;color:var(--ink-3)}

/* лента */
.feed{padding:16px 18px 10px;margin-bottom:30px}
.feed-row{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;
  border-bottom:1px solid var(--glass-border);font-size:13px}
.feed-row:last-child{border-bottom:none}
.feed-row .time{margin-left:auto;flex:none;font-size:11px;color:var(--ink-3);padding-top:2px}
.f-ico{flex:none;width:22px;text-align:center}
.st-good{color:var(--good-text);font-weight:650}

/* инвайт */
.invite{font-size:11px;color:var(--ink-3);margin-bottom:10px;word-break:break-all;
  border:1.5px dashed rgba(250,178,25,.5);border-radius:12px;padding:8px 10px}
.invite a{color:var(--accent-deep)}

@media (max-width:960px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .board,.objs{grid-template-columns:1fr}
  .cmd-header{position:static}
}

/* Ход работы на карточке объекта */
.plan-today{margin-top:8px;padding:8px 10px;border-radius:12px;
  background:rgba(42,120,214,.06);border:1px solid rgba(42,120,214,.12)}
html.dark .plan-today{background:rgba(124,178,240,.08);border-color:rgba(124,178,240,.15)}
.plan-h{font-size:10.5px;font-weight:700;color:var(--accent-deep);text-transform:uppercase;
  letter-spacing:.3px;margin-bottom:3px}
.plan-line{font-size:12px;color:var(--ink-2);line-height:1.4;overflow-wrap:anywhere}
.plan-who{color:var(--ink-3)}

/* Кнопка журнала хода работы на карточке объекта */
.journal-btn{margin-top:8px;width:100%;display:flex;align-items:center;justify-content:center;
  gap:6px;padding:7px 10px;border-radius:12px;cursor:pointer;font-size:12.5px;font-weight:600;
  color:var(--accent-deep);background:rgba(42,120,214,.06);border:1px solid rgba(42,120,214,.14);
  transition:background .15s}
.journal-btn:hover{background:rgba(42,120,214,.12)}
html.dark .journal-btn{background:rgba(124,178,240,.08);border-color:rgba(124,178,240,.16)}
.journal-n{min-width:18px;padding:0 5px;border-radius:9px;font-size:11px;
  background:var(--accent-deep);color:#fff}
/* Тело собранного отчёта в модалке */
.journal-report h4{font-size:13px;font-weight:700;color:var(--accent-deep);
  margin:14px 0 4px;text-transform:uppercase;letter-spacing:.3px}
.journal-report h4:first-child{margin-top:0}
.journal-report ul{margin:0 0 4px;padding-left:18px;list-style:disc}
.journal-report li{font-size:13.5px;line-height:1.5;color:var(--ink-1);margin:2px 0;overflow-wrap:anywhere}
.journal-report p{font-size:13.5px;line-height:1.5;color:var(--ink-1);margin:4px 0}
.journal-report strong{font-weight:700}