:root{
  --paper:#f2f3f6; --card:#fff; --ink:#16181d; --muted:#6b7383; --line:#e1e4ea;
  --accent:#2f4bd8; --hot:#c8352a; --warm:#b4780e; --ok:#1d7a4c; --on-accent:#fff;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --r:10px; --shadow:0 1px 2px rgba(20,24,35,.06),0 8px 24px rgba(20,24,35,.06);
  --shadow-sm:0 1px 2px rgba(0,0,0,.12); --backdrop:rgba(10,12,18,.55);
  color-scheme:light;
}
[data-theme="dark"]{
  --paper:#111318; --card:#191c23; --ink:#e8eaf0; --muted:#8b93a3; --line:#282d38;
  --accent:#4f63e0; --hot:#ef6a5c; --warm:#e0a83c; --ok:#1c8452; --on-accent:#fff;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 28px rgba(0,0,0,.35);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35); --backdrop:rgba(0,0,0,.6);
  color-scheme:dark;
}
[data-theme="pink"]{
  --paper:#fbf1f0; --card:#fffbfa; --ink:#2a1620; --muted:#8a6b72; --line:#f0d9de;
  --accent:#c81760; --hot:#d1442e; --warm:#b5790f; --ok:#1f7a4c; --on-accent:#fff;
  --shadow:0 1px 2px rgba(42,22,32,.07),0 8px 24px rgba(42,22,32,.08);
  --shadow-sm:0 1px 2px rgba(42,22,32,.14); --backdrop:rgba(40,10,20,.5);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--paper);color:var(--ink);font:15px/1.45 var(--sans);
     -webkit-font-smoothing:antialiased;padding-bottom:env(safe-area-inset-bottom)}
.hidden{display:none!important}
button,input,select,textarea,option{font:inherit;color:var(--ink);background:var(--paper)}
.dot{color:var(--accent)}
.spacer{flex:1}
.error{color:var(--hot);font-size:13px;margin:4px 0 0}

/* --- вход --- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:20px}
.auth-card{width:min(380px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:26px;box-shadow:var(--shadow)}
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.auth-title{font-size:30px;letter-spacing:-.02em;margin:0 0 18px}
.tabs{display:flex;gap:4px;background:var(--paper);border-radius:8px;padding:3px;margin-bottom:14px}
.tab{flex:1;border:0;background:none;padding:8px;border-radius:6px;cursor:pointer;color:var(--muted)}
.tab.is-active{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}

.field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px;min-width:0}
.field.grow{flex:1}
.field label{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:10px 11px;width:100%;outline:0}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
textarea{resize:vertical}

.btn{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:9px 14px;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn-ghost{background:transparent}
.btn-danger{color:var(--hot);border-color:color-mix(in srgb,var(--hot) 40%,var(--line))}
.btn-wide{width:100%;padding:12px}
.btn.is-active{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

/* --- шапка --- */
.app{max-width:1080px;margin:0 auto;padding:14px 16px 96px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px 12px;margin-bottom:12px;flex-wrap:wrap}
.brand{font-size:20px;font-weight:700;letter-spacing:-.02em}
.top-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.viewswitch{display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.vs{border:0;background:none;padding:8px 12px;cursor:pointer;color:var(--muted);font-size:13px}
.vs.is-active{background:var(--accent);color:var(--on-accent)}
.theme-select{border:1px solid var(--line);background:var(--card);border-radius:8px;height:34px;
  padding:0 8px;cursor:pointer;font-size:13px;color:var(--ink)}
.who{border:1px solid var(--line);background:var(--card);border-radius:999px;width:34px;height:34px;
  cursor:pointer;font:600 12px/1 var(--mono)}

/* --- рельс дедлайнов (сигнатурный элемент) --- */
.rail{display:flex;gap:0;overflow-x:auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:0;margin-bottom:12px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-item{flex:1 0 auto;min-width:96px;border:0;border-right:1px solid var(--line);background:none;
  padding:10px 12px 11px;cursor:pointer;text-align:left;position:relative}
.rail-item:last-child{border-right:0}
.rail-item .rl{display:block;font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rail-item .rn{display:block;font:700 22px/1.2 var(--sans);letter-spacing:-.02em}
.rail-item::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.rail-item.is-active::after{background:var(--accent)}
.rail-item.is-active .rl{color:var(--ink)}
.rail-item.hot .rn{color:var(--hot)}
.rail-item.hot.is-active::after{background:var(--hot)}

/* --- фильтры --- */
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.segment{display:flex;background:var(--card);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sg,.lm{border:0;background:none;padding:8px 12px;cursor:pointer;color:var(--muted);font-size:13px}
.sg.is-active,.lm.is-active{background:var(--ink);color:var(--paper)}
.select{width:auto;min-width:150px}
.search{width:auto;flex:1;min-width:140px}
.check{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);white-space:nowrap}
.check input{width:auto}

/* --- список --- */
.group{margin-bottom:22px}
.group-head{display:flex;align-items:baseline;gap:8px;margin:0 2px 8px}
.group-head h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;margin:0}
.group-head .cnt{font:600 12px var(--mono);color:var(--muted)}
.group.overdue .group-head h3{color:var(--hot)}

.task{display:flex;gap:11px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:var(--r);padding:11px 12px;margin-bottom:7px;cursor:pointer}
.task:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.task.done{opacity:.5}
.task.done .t-title{text-decoration:line-through}
.tick{width:20px;height:20px;flex:none;border:1.5px solid var(--line);border-radius:6px;background:var(--paper);
  cursor:pointer;margin-top:1px;display:grid;place-items:center;padding:0;font-size:12px;line-height:1;color:transparent}
.tick.on{background:var(--ok);border-color:var(--ok);color:var(--on-accent)}
.t-main{min-width:0;flex:1}
.t-title{font-weight:600;word-break:break-word}
.t-notes{color:var(--muted);font-size:13px;margin-top:2px;white-space:pre-wrap}
.t-closed{color:var(--muted);font-size:12px;margin-top:6px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;align-items:center}
.chip{font:600 11px/1 var(--mono);letter-spacing:.04em;padding:4px 7px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.chip.proj{border-color:transparent;color:var(--on-accent)}
.chip.date.hot{color:var(--hot);border-color:color-mix(in srgb,var(--hot) 45%,transparent)}
.chip.date.soon{color:var(--warm);border-color:color-mix(in srgb,var(--warm) 45%,transparent)}
.chip.prio{color:var(--hot);border-color:color-mix(in srgb,var(--hot) 40%,transparent)}
.empty{text-align:center;color:var(--muted);padding:56px 16px}
.empty b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}

/* --- иерархический список (раскрывающиеся вложенные задачи) --- */
.tree-root{display:flex;flex-direction:column;gap:2px}
.tree-node{margin-bottom:2px}
.tree-row{display:flex;align-items:flex-start;gap:4px}
.tree-row .task{flex:1;margin-bottom:0}
.tree-toggle{flex:none;width:20px;height:20px;margin-top:11px;border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:11px;display:flex;align-items:center;justify-content:center}
.tree-toggle-leaf{cursor:default;visibility:hidden}
.tree-children{margin-left:24px;border-left:1px dashed var(--line);padding-left:10px;margin-top:4px}
.tree-children.hidden{display:none}

/* --- календарь --- */
.calendar{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;overflow-x:auto}
.cal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.cal-head h3{margin:0;font-size:16px;text-transform:capitalize;white-space:nowrap}
.cal-zoom{display:flex;align-items:center;gap:6px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:3px 4px}
.cal-zoom .btn{padding:3px 9px;line-height:1;font-size:14px;font-weight:700}
.cal-zoom .btn:disabled{opacity:.3;cursor:default}
.cal-zoom .btn:disabled:hover{border-color:var(--line)}
.cal-scale-label{font:600 11px var(--mono);color:var(--muted);letter-spacing:.02em;white-space:nowrap;min-width:72px;text-align:center}

.cal-grid{display:grid;gap:4px;min-width:560px}
.cal-grid-month{grid-template-columns:34px repeat(7,1fr)}
.cal-grid-week,.cal-grid-twoweeks{grid-template-columns:repeat(7,1fr)}
.cal-dow{font:600 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:center;padding:4px 0}
.cal-wk{display:flex;align-items:center;justify-content:center;font:600 10px var(--mono);color:var(--muted)}

.cal-day{border:1px solid var(--line);border-radius:8px;padding:5px 6px;background:var(--paper);cursor:pointer;
  display:flex;flex-direction:column;overflow:hidden}
.cal-grid-month .cal-day{height:106px}
.cal-grid-twoweeks .cal-day{height:136px}
.cal-grid-week .cal-day{height:280px}
.cal-day.out{opacity:.4}
.cal-day.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.cal-num{font:600 11px var(--mono);color:var(--muted);flex:none}
.cal-day.off .cal-num{color:var(--hot)}
.cal-tasks{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;margin-top:3px}
.cal-task{flex:1 1 0;min-height:0;overflow:hidden;font-size:10.5px;line-height:1.25;padding:1px 4px;border-radius:3px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);white-space:normal;word-break:break-word;cursor:pointer}
.cal-task.hot{background:color-mix(in srgb,var(--hot) 16%,transparent)}
.cal-task.done{opacity:.45;text-decoration:line-through}
.cal-more-slot{background:var(--line);color:var(--muted);font:600 10px var(--mono);display:flex;align-items:center;justify-content:center}

.cal-agenda{display:flex;flex-direction:column}

.cal-overview{display:flex;flex-wrap:wrap;gap:16px}
.mini-month{flex:1 1 220px;min-width:200px}
.mm-head{font:600 12px var(--sans);text-transform:capitalize;margin-bottom:6px;color:var(--ink)}
.mm-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.mm-dow{font:600 9px var(--mono);color:var(--muted);text-align:center;padding-bottom:2px}
.mm-day{aspect-ratio:1;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;cursor:pointer;position:relative}
.mm-day:hover{background:var(--paper)}
.mm-num{font:600 10px var(--mono);color:var(--ink)}
.mm-day.out .mm-num{color:var(--muted);opacity:.4}
.mm-day.off .mm-num{color:var(--hot)}
.mm-day.today{box-shadow:inset 0 0 0 1.5px var(--accent);border-radius:5px}
.mm-cnt{font:700 8px var(--mono);color:#fff;background:var(--accent);border-radius:999px;padding:0 3px;line-height:1.3}

/* --- граф связей --- */
.graph{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;
  display:flex;flex-direction:column}
.graph-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;flex:none}
.graph-hint{color:var(--muted);font-size:12.5px}
.graph-canvas-wrap{flex:1;min-height:0;overflow:auto;border-radius:8px;background:var(--paper);touch-action:pan-x pan-y}
.graph-canvas-sizer{position:relative}
.graph-canvas{position:absolute;top:0;left:0;transform-origin:0 0}
.graph-svg{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}
.graph-edge{stroke-width:1.6}
.graph-edge-spoke{opacity:.5}
.graph-edge-group{cursor:pointer}
.graph-edge-link{stroke-dasharray:5 4;stroke-width:2;pointer-events:none;transition:stroke-width .1s ease,opacity .1s ease}
/* невидимая, но кликабельная полоса поверх пунктирной связи — сильно шире видимой линии,
   чтобы по связи было реально попасть кликом */
.graph-edge-hit{stroke:transparent;fill:none;pointer-events:stroke}
.graph-edge-group:hover .graph-edge-link{opacity:.8;stroke-width:3.5}
/* важно: сам слой нод должен пропускать клики мимо себя, иначе он перекрывает рёбра под собой */
.graph-nodes{position:absolute;inset:0;pointer-events:none}
.graph-node{position:absolute;pointer-events:auto;transform:translate(-50%,-50%);touch-action:none;cursor:grab;
  border-radius:999px;border:1.5px solid var(--nc,var(--line));background:var(--card);
  padding:7px 13px;font-size:12.5px;font-weight:600;max-width:170px;text-align:center;
  box-shadow:var(--shadow-sm);user-select:none;line-height:1.25}
.graph-node .gn-label{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.graph-node-task.is-done{opacity:.5;text-decoration:line-through}
.graph-node.dragging{cursor:grabbing;box-shadow:0 6px 18px rgba(0,0,0,.25);z-index:5}
.graph-edge-badge{fill:var(--card);stroke:var(--line);stroke-width:1}
.graph-edge-label{font:700 10px var(--mono);fill:var(--ink);text-anchor:middle;dominant-baseline:central;pointer-events:none}

/* --- диалоги --- */
.dlg{border:0;padding:0;background:transparent;max-width:560px;width:calc(100% - 24px)}
.dlg::backdrop{background:var(--backdrop)}
.dlg-inner{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:var(--shadow)}
.dlg-head h2{margin:0 0 14px;font-size:19px}
.row{display:flex;gap:10px}
.row>.field{flex:1}
.row-end{align-items:flex-end}
.dlg-foot{display:flex;gap:8px;align-items:center;margin-top:6px}

/* --- задача: форма + хронология событий --- */
#task-dlg{max-width:560px;transition:max-width .1s ease}
#task-dlg.has-events{max-width:840px}
.dlg-split{display:flex;gap:20px;align-items:stretch}
.dlg-main{flex:1;min-width:0}
.dlg-events{width:270px;flex:none;display:flex;flex-direction:column;min-height:0;
  border-left:1px solid var(--line);padding-left:20px}
.dlg-events h3{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.events-list{flex:1;overflow-y:auto;max-height:360px;display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.ev-item{border:1px solid var(--line);border-radius:8px;padding:7px 9px;position:relative}
.ev-item.ev-auto{background:var(--paper);border-style:dashed}
.ev-when{font:600 11px var(--mono);color:var(--muted);margin-bottom:2px}
.ev-author{color:var(--muted);font-weight:400}
.ev-tag{color:var(--muted);font-weight:400;font-style:italic}
.ev-text{font-size:13px;white-space:pre-wrap;word-break:break-word;padding-right:16px}
.ev-del{position:absolute;top:5px;right:6px;border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:15px;line-height:1;padding:2px}
.ev-del:hover{color:var(--hot)}
.events-empty{color:var(--muted);font-size:13px;padding:6px 0 2px}
.event-add{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.event-add input{width:100%}
.event-add .row{gap:8px}
.event-add .row>input{flex:1;min-width:0}

.files-block{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.files-block h3{margin:0 0 10px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.files-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.file-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.file-item .fi-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;cursor:pointer;background:none;border:0;text-align:left;color:var(--ink);padding:0}
.file-item .fi-name:hover{text-decoration:underline}
.fi-thumb{width:28px;height:28px;flex:none;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font:700 9px/1 var(--mono);color:#fff;letter-spacing:.01em;background-size:cover;background-position:center}
.fi-thumb-img{background-color:var(--paper);border:1px solid var(--line)}
.file-item .fi-del{border:0;background:none;cursor:pointer;color:var(--muted);font-size:15px;line-height:1;padding:2px;flex:none}
.file-item .fi-del:hover{color:var(--hot)}
.file-btn{display:flex;align-items:center;justify-content:center;cursor:pointer}
.files-empty{color:var(--muted);font-size:13px;padding:2px 0 6px}

@media (max-width:760px){
  #task-dlg.has-events{max-width:calc(100% - 24px)}
  .dlg-split{flex-direction:column}
  .dlg-events{width:auto;border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:16px;margin-top:4px}
  .events-list{max-height:220px}
}
/* --- исполнители задачи: раскрывающийся список с мультивыбором --- */
.msel{position:relative}
.msel-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;text-align:left;
  cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px 11px;outline:0}
.msel-btn:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.msel-caret{flex:none;color:var(--muted);font-size:11px}
.msel-panel{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;
  background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);
  padding:6px 10px;max-height:200px;overflow-y:auto}
.msel-panel.hidden{display:none}
.assignee-opt{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13px;cursor:pointer}
.assignee-opt input{width:auto}

/* --- иерархия внутри карточки задачи --- */
.hier-row{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-bottom:6px}
.hier-tag{font:700 11px var(--mono);color:var(--muted);background:var(--paper);border-radius:999px;padding:2px 7px;flex:none;white-space:nowrap}
.hier-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.hier-empty{color:var(--muted);font-size:13px;margin-bottom:6px}
.hier-add-row{gap:8px;margin-bottom:10px}
.hier-add-row select{flex:1;min-width:0}

/* --- диалог выбора направления связи --- */
.link-choice{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.link-opt{text-align:left;line-height:1.4}
.link-opt small{color:var(--muted);font-weight:400}

.proj-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-height:44vh;overflow:auto}
.proj-row{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.swatch{width:12px;height:12px;border-radius:3px;flex:none}
.proj-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{border:0;background:none;cursor:pointer;color:var(--muted);font-size:12px;padding:4px 6px;border-radius:6px}
.mini:hover{color:var(--hot)}

/* --- прочее --- */
.fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));width:56px;height:56px;
  border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:28px;line-height:1;cursor:pointer;
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 45%,transparent)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;background:var(--ink);color:var(--paper);
  padding:10px 16px;border-radius:999px;font-size:13px;z-index:99}

@media (max-width:640px){
  .app{padding:12px 12px 96px}
  .controls .search{order:9;width:100%;flex:1 0 100%}
  .rail-item{min-width:84px}
  .row{flex-direction:column;gap:0}
  .cal-grid-month .cal-day{height:80px}
  .cal-grid-twoweeks .cal-day{height:96px}
  .cal-grid-week .cal-day{height:200px}
  .mini-month{flex-basis:100%}
}
@media (prefers-reduced-motion:no-preference){
  .task,.btn,.rail-item{transition:border-color .12s ease,background .12s ease}
}